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

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


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

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

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

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

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

header {
	width: 27%;
	position: fixed;
	font-family:gothamLight;
	bottom: 120px;
	right:0;
}

h1 {
	color: rgba(255,255,255,1.00);
	font-family:gothamBook;
	text-align: center;
	font-size: 20px;
}

h2 {
	color: rgba(255,255,255,1.00);
	font-family:gothamLight;
	text-align: center;
	font-size: 18px;
}


#logo {
	position: fixed;
	width: 20%;
	top:13%;
	right: 3%;
}

#logoCel {
	display: none;
	width: 50%;
	text-align: center;
	margin: 0 auto;
}

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

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

}

#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: 4%;
        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;
	top:0px;
	right:0%;
	text-align:center;
	background-color:rgba(65,0,78,1.00);
	width: 27%;
	height: 50px;
	z-index: 1;
}

#navRedes ul {
	padding: 0;
}

#navRedes li {
	display:inline-block;
	padding:10px 2px;
}

#navRedes img {
	height: 31px;
}

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

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

#plecaArriba {
	position: fixed;
	background-image: url(../images/plecaArriba.png);
	background-position: top;
	background-size:contain;
	background-repeat: no-repeat;
	background-attachment: fixed;
	width: 63%;
	max-height: 230px;
	top: 50px;
	left: 10%;
	z-index: 1;
}


#fondoContent {
	position: fixed;
	background-color:rgba(255,255,255,0.70);
	width: 63%;
	height: 100%;
	left:10%;
	top:50px;
	-webkit-box-shadow: 0 10px 20px 5px rgba(0,0,0,0.5);
	box-shadow: 0 10px 20px 5px rgba(0,0,0,0.5);
}

#content {
	position: absolute;
	width: 43%;
	left:10%;
	top:50px;
	padding: 15% 10% 5% 10%;}
	

h3 {
	color:rgba(12,48,113,1.00);
	font-family:magnoliaScript;
	text-align: center;
	font-size: 30px;
	padding-bottom: 12%;
}
p {
	color:rgba(12,48,113,1.00);
	font-family:gothamBook;
	text-align: justify;
	font-size: 16px;
	line-height: 24px;
}

footer {
	position: fixed;
	width: 27%;
	right:0%;
	bottom:15px;
	text-align: center;
 }

#pie {
	font-size:13px;
	color:rgba(255,255,255,1.00);
	font-family: gothamBook;
}

/*-----------PAQUETES-------------*/


#tablePaquetes {
	width: 100%;
	margin: 0 auto;
	max-width: 710px;
	color:rgba(12,48,113,1.00);
	font-family:gothamBook;
	text-align: center;
	font-size: 15px;
	line-height: 24px;
	border-collapse: collapse;
	background: rgba(0,0,0,0.20);
	}

th {border-collapse: collapse;
	border:  rgba(12,48,113,0.40) 1px solid;
	padding: 2%;
	background-image:url(../images/puntos_patron.png);
	background-repeat:round;
}

td {border-collapse: collapse;
	border: rgba(12,48,113,0.40) 1px solid;
	padding: 2%;
	background-image: url(../images/puntos_patron3.png);
	background-repeat:round;
	text-align: center;
	color: rgba(200,213,30,1.00);
	font-size: 20px;
	font-family:gothamMedium;
}

#tablePaquetes span {
	font-family:gothamBold;
	text-align: center;
	font-size: 18px;
}

#tablePaquetes td img {
	width:30px;
	margin: 0 auto;
	text-align: center;
}

#tablePaquetes ul p {
	color:rgba(12,48,113,1.00);
	font-family:gothamMedium;
	text-align: center;
	font-size: 16px;
	line-height: 24px;
}

#tablePaquetes ul li{
	color:rgba(12,48,113,1.00);
	font-family:gothamBook;
	text-align: left;
	font-size: 15px;
	line-height: 24px;
	margin: 0  20px;
}

#tablePaquetes1, #tablePaquetes2, #tablePaquetes3 {
	display: none;
}

#tablePaquetes1 span, #tablePaquetes2 span, #tablePaquetes3 span {
	display: none;
}

#tablePaquetes1 td img, #tablePaquetes2 td img, #tablePaquetes3 td img  {
	display: none;
}

#tablePaquetes1 ul p, #tablePaquetes2 ul p, #tablePaquetes3 ul p {
	display: none;
}

#tablePaquetes1 ul li, #tablePaquetes2 ul li, #tablePaquetes3 ul li{
	display: none;
}



#paqueteIndividual {
	width: 100%;
	margin: 0 auto;
	max-width: 710px;
	color:rgba(12,48,113,1.00);
	font-family:gothamBook;
	text-align: center;
	font-size: 15px;
	line-height: 24px;
	border-collapse: collapse;
	background: rgba(0,0,0,0.20);
	}

#paqueteIndividual th {border-collapse: collapse;
	border:  rgba(12,48,113,0.40) 1px solid;
	padding: 0 2% 2% 2%;
	background-image:url(../images/puntos_patron.png);
	background-repeat:round;
}

#paqueteIndividual td {border-collapse: collapse;
	border: rgba(12,48,113,0.40) 1px solid;
	padding: 2%;
	background-image: url(../images/puntos_patron3.png);
	background-repeat:round;
	text-align: center;
	color: rgba(200,213,30,1.00);
	font-size: 20px;
	font-family:gothamMedium;
}

#paqueteIndividual span {
	font-family:gothamBold;
	text-align: center;
	font-size: 18px;
}


#paqueteIndividual p{
	color:rgba(12,48,113,1.00);
	font-family:gothamBook;
	text-align: center;
	font-size: 15px;
	line-height: 24px;
	margin: 0  20px;
}



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

#contacto {
	width: 100%;
	text-align:center;
}


#contacto ul {
	padding: 0;
}

#contacto li {
	display:inline-block;
	padding:15px 5px;
}

#contacto img {
	height: 50px;
}

#contacto a {
	text-decoration: none;
	font-size: 16px;
	color: rgba(12,48,113,1.00);
	font-family:gothamMedium;
	text-align: center;
}

#contacto a:hover {
	color:rgba(0,154,222,1.00);
}

hr {
	border: rgba(12,48,113,1.00) 0.5px solid;	
}

form {
	width: 70%;
	margin: 0 auto;
}

form p {font-family: gothamMedium;}

input {
	width: 96%;
	font-size: 16px;
	color:rgba(12,48,113,1.00);
	padding: 6px 2% 4px 2%;
	font-family: gothamBook;
	background-color:rgba(0,0,0,0.00);
	border: rgba(12,48,113,1.00) 1px solid;
}

textarea {
	width: 96%;
	height: 120px;
	font-size: 16px;
	color:rgba(12,48,113,1.00);
	padding: 7px 2% 7px 2%;
	font-family: gothamBook;
	background-color:rgba(0,0,0,0.00);
	border: rgba(12,48,113,1.00) 1px solid;
}

#enviar {
	color:rgba(12,48,113,1.00);
	font-family: gothamMedium;}



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


@media only screen and (min-width: 801px) and (max-width: 1280px) {
	
	
header {bottom: 110px;}
h1 {font-size: 19px; }
h2 {font-size: 16px;}
#navPrincipal ul li a {font-size:14px;padding-right: 14px;font-family:gothamLight;}
#navRedes li {padding:11px 2px;}
#navRedes img {height: 29px;}
#globos {width: 15%;}
h3 {font-size: 25px;}
#pie {padding: 0 20%;}
	
#tablePaquetes {font-size: 14px;line-height: 20px;}
th {padding: 1%;}
td {padding: 1%;font-size: 14px;}
#tablePaquetes span {font-size: 14px;}
#tablePaquetes td img {width:25px;}
#tablePaquetes ul p {font-size: 14px;line-height: 20px;}
#tablePaquetes ul li{font-size: 14px;line-height: 20px;}

#paqueteIndividual {font-size: 14px;line-height: 20px;}
#paqueteIndividual th {padding: 2%;}
#paqueteIndividual td {padding: 2%;font-size: 14px;}
#paqueteIndividual span {font-size: 14px;}
#paqueteIndividual p {font-size: 14px;line-height: 20px;}
		
		
}


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

@media only screen and (min-width: 0px) and (max-width: 800px) {
	
	
header {position: fixed;width: 100%;background-color: rgba(65,0,78,1.00);height: 50px;top: 0px;z-index: 2;}
h1 {text-align: center; font-size: 17px; padding: 6px 0 0 0;}
h2 {font-family:gothamLight; text-align: center; font-size: 14px; padding: 0 0 0 0;}
#logo {display: none;}
#logoCel {display: block; }
	
#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: 100%; 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 {top:inherit;bottom:180px;right:3%;background-color:rgba(0,0,0,0.00); width:10%;z-index: 2;}
#navRedes ul {padding: 20px 20%;}
#navRedes li {display:block; padding:2px 0;}

#plecaArriba {width: 80%;z-index: 1;background-attachment:inherit;}

#globos {width: 20%;left: 0%;z-index: 2;}
#banderines {width: 100%;top: 45px;left: 0%;z-index: 2;}

#fondoContent {background-color:rgba(255,255,255,0.60);width: 80%;height: 100%;left:10%;top:50px;z-index: 0;	}
#content {width: 58%;left:11%;top:13%;padding: 15% 10% 10% 10%;}
	
h3 {font-size: 24px;}
p {text-align: center;font-size: 16px;}
footer {display: none;}
	
#tablePaquetes {display:none}

#tablePaquetes1, #tablePaquetes2, #tablePaquetes3 {
	display:block;
	margin: 0 auto;
	width: 100%;
	color:rgba(12,48,113,1.00);
	font-family:gothamBook;
	text-align: center;
	font-size: 14px;
	line-height: 20px;
	border-collapse: collapse;
	background: rgba(0,0,0,0.20);
	}

#tablePaquetes1 span, #tablePaquetes2 span, #tablePaquetes3 span {
	display:block;
	font-family:gothamBold;
	text-align: center;
	font-size: 17px;
}

#tablePaquetes1 td img, #tablePaquetes2 td img, #tablePaquetes3 td img  {
	display:block;
	width:25px;
	margin: 0 auto;
	text-align: center;
}

#tablePaquetes1 ul p, #tablePaquetes2 ul p, #tablePaquetes3 ul p {
	display:block;
	color:rgba(12,48,113,1.00);
	font-family:gothamMedium;
	text-align: center;
	font-size: 14px;
	line-height: 20px;
}

#tablePaquetes1 ul li, #tablePaquetes2 ul li, #tablePaquetes3 ul li{
	display:block;
	color:rgba(12,48,113,1.00);
	font-family:gothamBook;
	text-align: left;
	font-size: 14px;
	line-height: 20px;
	margin: 0  20px;
}
th {padding: 2%;}
td {padding: 2%;font-size: 15px;}

#contacto img {height: 35px;}
#contacto a {
	text-decoration: none;
	font-size: 14px;
	color: rgba(12,48,113,1.00);
	font-family:gothamMedium;
	text-align: center;
}

#paqueteIndividual {font-size: 14px;line-height: 20px;}
#paqueteIndividual th {padding: 2%;}
#paqueteIndividual td {padding: 2%;font-size: 14px;}
#paqueteIndividual span {font-size: 14px;}
#paqueteIndividual p {font-size: 14px;line-height: 20px;}
	
}