@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;}


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%;
}

#videoIntro {
	clear: both;
 	visibility: visible;
	position: relative;
 	float: left;
 	left: 0%;
 	height: auto;
 	padding-bottom: 50px;
}

video {
	width: 100%;
 }

#intro {
	position: relative;
	float: left;
	left:18%;
	width: 48%;
	height: 100vh;
	text-align:justify;
	padding-bottom:850px;
	
	
}

header {
	position: relative;
	float: left;
	width: 24%;
	height: 200vh;
	padding-top: 6%;
	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;
	
}

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

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

/*#pleca {
	position: fixed;
	display: block;
	margin: 0 auto;
	top:0;
	width: 50%;
	height: 100%;
	z-index: -1;
}*/

/*h3 {
	font-family:centuryGothicRegular;
	text-align:right;
	font-size:28px;
	color:rgba(255,158,21,1.00);
	padding:0 0 30px 0;
}
*/
h4 {
	font-size: 18px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: bold;
	color:rgba(255,158,21,1.00);
	text-align: left;
}

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


#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:9px;
	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:15px;
		opacity: 400;	
		z-index:100;
    }   
       /*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: 9;
 }

#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 {
	text-align: left;
	margin: -7px 0;
	z-index: 3;
	
}

#redesSociales ul {
	padding: 0;
	
}

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

#redesSociales img {
	height: 28px;
}


/*-----------INDEX-----------*/




#perroIndex {
	float: right;
	right:0px;
	bottom:0;
	width: 350px;
	padding: 0 0 0 20px;
	
}

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

#intro h3 {
	font-family:centuryGothicRegular;
	text-align:left;
	font-size:27px;
	color:rgba(255,158,21,1.00);
	padding: 201px 0px 0 0;
	min-width: 275px;
}

h4 {
	font-size: 18px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	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;
}



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

/*RESPONSIVE*/

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

	
h2 {font-size:calc(.3em + 1vw);}
h3 {font-size:24px; padding:0 0 0 0;}
p {font-size: 17px;line-height: 24px;}
#logo {width: 60%;}
/*-----------INDEX-----------*/
#perroIndex {width: 50%; padding: 0 0 0 0;}
#intro h3 {padding: 49px 0 0 0;font-size:24px;}
p {line-height: 26px;}

}

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


@media only screen and (min-width: 0px) and (max-width: 800px) {
	
#videoIntro {top:60px;padding-bottom: 50px;z-index: 9;}
#intro {left:10%;width: 80%;padding-bottom:500px;}
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);}
#logo {width: 0; opacity: 0;}
h1 {font-size:22px;text-align: left;margin: -31px 0 0 5%;}
h2 {font-size:12px;text-align: left;margin: 0px 0 0 5%;}
p {font-size: 16px; text-align: left;}

	
#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;padding: 0;}
	
#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: 8;}
#pie {z-index: 9;width: 230px;font-size:13px;}
address {opacity: 0;}	
#redesSociales {opacity: 0;}	


/*-----------INDEX-----------*/

#intro {clear: both; margin:20px 0 0 0; margin: 0 auto; width:80%;}
#perroIndex {padding:0; opacity: 1;width: 40%;}
#intro h3 {font-size:23px;padding: 47px 0 0 0; text-align: left;}
#intro p {font-size: 16px;line-height: 24px;}

}