@charset "UTF-8";
/* CSS Document */

*{
	margin:0px;
	padding:0;}

@font-face {
	src:url(centuryGothicBold.ttf);
	font-family:centuryGothicBold;}

@font-face {
	src: url(centuryGothicRegular.ttf);
	font-family:centuryGothicRegular;}

@font-face {
	src:url(calibri.ttf);
	font-family:calibri;}

@font-face {
	src:url(gothamBook.otf);
	font-family:gothamBook;}

@font-face {
	src:url(gothamMedium.otf);
	font-family:gothamMedium;}

@font-face {
	src:url(gothamMedium.otf);
	font-family:gothamMedium;}

@font-face {
	src:url(gloriahallelujah.ttf);
	font-family:gloriahallelujah;}

body {
	margin:0 auto;
	background:rgba(30,30,30,1.00);
	background-image: url(../images/fondo_figuras_vidacanina.png);
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
}

#container {
	width:100%;
}

#content {
	position: relative;
	float: right;
	right:11%;
	width: 48%;
	height: 100vh;
	margin-top: 10%;
}

header {
	position: fixed;
	float: left;
	width: 24%;
	height: 200vh;
	padding-top: 4%;
	left:6%;
	text-align: center;
	z-index:5;
	background-color: rgba(255,255,255,0.10);
}

#logo {
	width: 50%;
	max-width: 300px;
}


h1 {
	font-size:calc(1.0em + 1vw);
	font-family:centuryGothicBold;
	color:rgba(255,255,255,1.00);
	text-align: center;
	margin: 0;
}

h2 {
	font-size:calc(.11em + 1vw);
	font-family:centuryGothicRegular;
	color:rgba(255,255,255,1.00);
	text-align: center;
	margin: 0;
}

span {
	color:rgba(255,158,21,1.00);
}

p {
	font-family: gothamBook;
	font-size: 18px;
	color: rgba(204,204,204,1.00);
	text-align: justify;
	line-height: 26px;
}

h3 {
	font-size: 30px;
	font-family:gloriahallelujah;
	font-weight: bold;
	color:rgba(255,158,21,1.00);
	text-align: left;
}

h4 {
	font-size: 20px;
	font-family: gothamMedium;
	font-weight: bold;
	color:rgba(255,158,21,1.00);
	text-align: left;
}

p {
	clear: both;
	font-family: gothamBook;
	font-size: 18px;
	color: rgba(204,204,204,1.00);
	text-align: justify;
	line-height: 26px;
}

a {clear: both;
	font-family: gothamBook;
	font-size: 18px;
	color:rgba(253,204,171,1.00);
	text-align: justify;
	line-height: 26px;
	margin-top: 50px;
}

a:hover {
	color:rgba(255,158,21,1.00);
}

#navPrincipal {
	bottom:80px;
	position:fixed;
	background-color:rgba(51,51,51,1.00);
	width:100%;
	height:auto;
	text-align: right;
	-webkit-box-shadow: 0 0 30px 15px rgba(0,0,0,1);
	box-shadow: 0 0 30px 15px rgba(0,0,0,1);
	z-index:6;
}


#navPrincipal ul {
	margin:5px;
	float:right;
	padding-right: 4%;
	width: 80%;
}

#navPrincipal ul li {
	display:inline-block;
} 

#navPrincipal ul li a {
	color: rgba(204,204,204,1);
	font-size:16px;
	text-decoration:none;
	font-family:calibri;
	padding: 9px 12px 9px 12px;
	border-left: thin rgba(118,188,33,1.00);
}

#navPrincipal ul li a:hover {
	background:rgba(255,158,21,0.50);
	color: rgba(255,255,255,1.00);
	-webkit-transition: background 1s ease;
	-moz-transition: background 1s ease;
	-ms-transition: background 1s ease;
	-o-transition: background 1s ease;
	transition: background 1s ease;}


/* Estilos #nav-mobile y lo ocultamos */
    #nav-mobile{
        display: none;
        background:url(../images/menu_vidaCanina.png);
		background-size:cover;
        float: right;
        width: 35px;
        height: 29px;
        position: fixed;
        right: 5%;
        top:-34px;
		opacity: 400;	
		z-index:400;
    }   
       /*Agregaremos esta clase a #nav-mobile, cuando el menu mobile haya sido desplegado */
        #nav-mobile.nav-active{
            opacity: 1;
        }

#plecaNayeli {
	width: 100%;
	height:80px; 
	bottom:0;
	left:0;
	position:fixed;
	background:rgba(255,158,21,1.00);
	background-image:url(../images/plecaAbajo.jpg);
	z-index:7;
}

#pitbull {
	position: fixed;
	left:2%;
	bottom:0px;
	width: 18%;
	max-width: 300px;
	z-index:7;
}

footer {
	position: fixed;
	right:5%;
	bottom:15px;
	text-align: right;
	float:right;
	z-index: 7;
 }

#pie {
	z-index: 9;
	width: 250px;
	font-size:13px;
	text-align: right;
	color:rgba(80,80,80,1.00);
	font-family: gothamMedium;
}


#marcaRegistrada {
	font-size:14px;
	color:rgba(80,80,80,1.00);
	font-family:centuryGothicBold;
	}

#redesSociales {
	position: fixed;
	bottom:140px;
	left:25%;
	margin: 0 auto;
	text-align: center;
	z-index: 7;
}

#redesSociales ul {
	padding: 0;
}

#redesSociales li {
	display:block;
	padding:5px 0;

}

#redesSociales img {
	height: 28px;
}






/*-----------SOMOS-----------*/


#somos {
	right:11%;
	width: 100%;
	text-align:justify;
	padding-bottom:850px;
}

hr {
  	height: 0.1px;
	width: 100%;
 	border-color:rgba(255,158,21,1.00);	
	}


/*-----------GALERÍA-----------*/

#galeria {
	width: 100%;
	text-align:justify;
	padding-bottom:850px;
}

/*-----------EQUIPO-----------*/

#equipo {
	right:11%;
	width: 100%;
	text-align:justify;
	bottom:850px;
}

#equipo img {
	width: 50%;
	float: left;
}

/*-----------GROOMING-----------*/

#grooming table {
	width: 100%;
	border-collapse: collapse;
	text-align: center;
}

#grooming table td {
	border: rgba(255,255,255,0.50) 1px solid;
	padding: 10px;
	font-family: gothamBook;
	font-size: 16px;
	color: rgba(204,204,204,1.00);
	text-align: left;
	line-height: 26px;
}

#grooming ul {
	padding-left: 40px; 
}

#grooming li{
	font-family: gothamBook;
	font-size: 18px;
	color: rgba(204,204,204,1.00);
	text-align: justify;
	line-height: 26px;
}

/*-----------CONTACTO-----------*/

#contacto {
	right:11%;
	width: 100%;
	text-align:justify;
	padding-bottom:850px;
}

/*#tableWeb {
	width: 100%;
	border-collapse: collapse;
	text-align: center;
	opacity: 1;
}


#tableWeb td {
	border: rgba(255,255,255,0.50) 1px solid;
	padding: 20px;
}

#tableWeb td img {
	width: 25%;
	max-width: 180px;
}

#tableWeb a {
	font-family: gothamBook;
	font-size: 18px;
	color: rgba(204,204,204,1.00);
	text-align: center;
	line-height: 26px;
	font-style: normal;
	text-decoration: none;
}

#tableWeb a:hover {
	color:rgba(255,158,21,1.00);
}*/



#tableCel {
	bottom: 0;
	width: 100%;
	border-collapse: collapse;
	text-align: center;
	
}

#tableCel td {
	border: rgba(255,255,255,0.50) 1px solid;
	padding: 20px;
}

#tableCel td img {
	width: 12%;
	max-width: 180px;
}

#tableCel a {
	font-family: gothamBook;
	font-size: 18px;
	color: rgba(204,204,204,1.00);
	text-align: center;
	line-height: 26px;
	font-style: normal;
	text-decoration: none;
}

#tableWeb a:hover {
	color:rgba(255,158,21,1.00);
}



#tablaDireccion {
	width: 100%;
	text-align: center;
	opacity: 1;
}

#tablaDireccion td {
	border: rgba(255,255,255,0.50) 1px solid;
	padding: 20px;
}

#tablaDireccion img {
	width: 12%;
	max-width: 180px;
}

#tablaDireccion p {
	font-size: 18px;
	text-align: center;
}

#tablaDireccion address {
	font-family: gothamBook;
	font-size: 18px;
	color: rgba(204,204,204,1.00);
	text-align: center;
	line-height: 26px;
	font-style: normal;}





/*-----------------------------------------*/

/*RESPONSIVE*/

@media only screen and (min-width: 801px) and (max-width: 1280px) {

	
}

/*-----------------------------------------*/


@media only screen and (min-width: 0px) and (max-width: 800px) {
	
body {background-image:url(../images/fondo_figuras_vidacanina.png);background-size:auto;}
header {position: fixed;width: 100%;height: 60px;padding:0 0 0 0;left:0;text-align: left; z-index: 10;background-color: rgba(51,51,51,1.00);border-right: none;top:0px;}
#logo {width: 0; opacity: 0;}
h1 {text-align: left;margin: -34px 0 0 5%;font-size:23px;}
h2 {text-align: left;margin: 0px 0 0 5%;font-size:12px;}
p {font-size: 16px; text-align: left; }
h3 {font-size: 25px;margin-top:  60px;text-align: center;line-height: 33px;}
#content {right:10%;width: 80%;}
hr {opacity: 0;}
	
#nav-mobile{display: block;}
#navPrincipal li:last-child{ border-bottom: 0;}
#navPrincipal ul.open-menu{max-height: 400px;-webkit-transition: max-height .4s;-moz-transition: max-height .4s;-ms-transition: max-height .4s;-o-transition: max-height .4s;transition: max-height .4s;}
	
#navPrincipal{top: 0;left: 0;width: 100%; height:60px;float: none;padding-top: 0; background-color:transparent;-webkit-box-shadow: 0 0 10px 5px rgba(0,0,0,0.0);box-shadow: 0 0 10px 5px rgba(0,0,0,0.0);z-index: 11;}	
	
#navPrincipal ul{width: 100%; list-style: none;text-align:center;max-height: 0;overflow: hidden; background-color:rgba(255,255,255,0.90);height: 100vh;margin-top: 60px;}
	
#navPrincipal ul li{width: 80%;display: block;float: none;padding:15px 0;margin:0 10% ;border-right:none;border-bottom:rgba(51,51,51,1.00) 1px solid;z-index:100;}
	
#navPrincipal ul li a{font-size: 17px; padding: 0;height: auto;line-height: normal;border-width:0; color:rgba(51,51,51,1.00);font-family:gothamMedium;}
	
#navPrincipal ul li a:hover{color:rgba(255,158,21,1.00);background: none; -webkit-transition: none;-moz-transition: none;-ms-transition: none;-o-transition:none;transition: none;}	

#plecaNayeli {height:30px;}
#pitbull {width: 20%;}
footer {right:5%;bottom:-29px;z-index: 7;}
#pie {z-index: 9;width: 230px;font-size:13px;}
address {opacity: 0;}	
	
#redesSociales {opacity:0;z-index: 1;}

/*-----------somos-----------*/

#somos{float: center;width: 100%;left:0%;height: auto;text-align:center;padding: 0px 0 200px 0;margin:0 auto;}
	
#contacto {right:10%;width: 100%;padding: 0px 0 200px 0;margin:0 auto;padding-bottom:200px;}

#tablaDireccion address {
	opacity: 1;}

#grooming table td {
	font-size: 13px;
}

	
	
}