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

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

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

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

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

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

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

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


body {
	margin:0 auto;
	background-color: rgba(0,167,225,1.00);
	background-image:url(../images/fondo_partyPaw_1.png);
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

#container {
	width: 100%;
}

#logoContainer {
	display: block;
	width: 100%;
	margin-top:250px;
}

#logo {
	display: block;
	margin: 0 auto;
	width: 23%;
}

header {
	position: fixed;
	top:6px;
	left:40px;
	text-align: left;
	z-index: 2;
	height: 50px;
}

h1 {
	color: rgba(255,255,255,1.00);
	font-family:gothamBook;
	font-size: 17px;
}

h2 {
	color: rgba(255,255,255,1.00);
	font-family:gothamLight;
	font-size: 15px;
}

h3 {
	color:rgba(12,48,113,1.00);
	font-family:magnoliaScript;
	text-align: center;
	font-size: 30px;
	padding-top: 60px;
	height: 10vh;
}

#navPrincipal {
	position:fixed;
	top:0;
	text-align: center;
	background-color:rgba(65,0,78,1.00);
	width: 100%;
	height: 50px;
	margin: 0 auto;
	z-index: 1;
}

#navPrincipal ul {
	padding: 17px 0 0 0;

}

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

#navPrincipal ul li a {
	color:rgba(255,255,255,1.00);
	font-size:15px;
	text-decoration:none;
	padding-right: 25px;
	font-family:gothamLight;
}

#navPrincipal ul li a:hover {
	color:rgba(200,213,30,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_celular_partyPaw.png);
		background-size:cover;
        float: right;
        width: 35px;
        height: 25px;
        position: fixed;
        right: 8%;
        top:12px;
		opacity: 400;	
		z-index:400;
    }   
       /*Agregaremos esta clase a #nav-mobile, cuando el menu mobile haya sido desplegado */
        #nav-mobile.nav-active{
            opacity: 1;
        }

#navRedes {
	position:fixed;
	bottom:20px;
	right:2%;
	text-align:center;
	width: 100px;
	z-index: 1;
}

#navRedes ul {
	padding: 0;
}

#navRedes li {
	display:block;
	padding:7px 2px;
}

#navRedes img {
	height: 50px;
}

#globos {
	position: fixed;
	width: 16%;
	bottom: 0;
	left: 3%;
	z-index: 3;
}

#banderines {
	position: fixed;
	width: 100%;
	height: 300px;
	top: 30px;
	background-image:url(../images/banderines_partyPaw.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 2;
}

#plecaDer {
	position: fixed;
	height: 100%;
	top: 0;
	right: 0%;
	z-index: 1;
}

#plecaIzq {
	position: fixed;
	height: 100%;
	top: 0;
	left: 0%;
	z-index: 1;
}

#content {
	width: 50%;
	margin: 0 auto;
	padding-bottom: 100px;
	}
	
p {
	color:rgba(255,255,255,1.00);
	font-family:gothamBook;
	text-align: justify;
	font-size: 18px;
	line-height: 26px;
}

footer {
	width: 100%;
	margin: 0 auto;
	text-align: center;
	padding-bottom: 50px;
 }

#pie {
	font-size:14px;
	color:rgba(12,48,113,1.00);
	font-family: gothamMedium;
}








/*--------------------------------RESPONSIVE TABLET-------------------------------*/


@media only screen and (min-width: 801px) and (max-width: 1280px) {
	
#logoContainer {margin-top:180px;}
#logo {width: 25%;}

h3 {font-size: 27px;padding-top: 50px;height: 20vh;}
#navPrincipal {text-align: right;}
#navPrincipal ul {padding: 17px 13px 0 0;}
#navPrincipal ul li a {font-size:14px;padding-right: 20px;}
#navRedes {bottom:15px;}
#navRedes li {padding:5px 2px;}
#navRedes img {height: 40px;}

#globos {width: 18%;}
#banderines {top: 33px;}
p {font-size: 17px;}
footer {width: 60%;}
		
}


/*--------------------------------RESPONSIVE CEL-------------------------------*/

@media only screen and (min-width: 0px) and (max-width: 800px) {

	
#logoContainer {margin-top:140px;}
#logo {width: 33%;}
	
header {top:0px;left:0;width: 100%;background-color: rgba(65,0,78,1.00);height: 50px;z-index: 1;}
h1 {text-align: center; font-size: 17px; padding: 7px 0 0 0;}
h2 {text-align: center; font-size: 14px;}	
h3 {font-size: 20px;padding-top: 30px;height: 16vh;}
	
#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;z-index: 11;}	
#navPrincipal ul{width: 90%; list-style: none;text-align:center;max-height: 0;overflow: hidden; background-color:rgba(200,213,30,1.00);height: 100vh;margin-top: 50px;margin-right: 10%;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(0,154,222,1.00);background: none; -webkit-transition: none;-moz-transition: none;-ms-transition: none;-o-transition:none;transition: none;}	
	
#navRedes {bottom:10px;right:0%;}
#navRedes ul {padding: 0;}
#navRedes li {padding:4px 0px;}
#navRedes img {height: 33px;}
#globos {width: 20%;left:0%;}
#banderines {top: 40px;}

#content {width: 55%;padding-bottom: 100px;}
p {text-align: center;font-size: 16px;}
footer {width:55%;padding-bottom: 20px;}


}