@charset "UTF-8";
/* =RESET */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}main,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}ol,ul{list-style:none;}li{display:-moz-inline-stack;display:inline-block;vertical-align:top;zoom:1;*display:inline;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}b,strong{font-weight:bold;}textarea{overflow:auto;vertical-align:top;}html{font-family:sans-serif;font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-rendering:optimizelegibility;-webkit-tap-highlight-color:rgba(0,0,0,0);}audio,canvas,progress,video{display:inline-block;vertical-align:baseline;}audio:not([controls]){display:none;height:0;}[hidden],template{display:none;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.25em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}pre{overflow:auto;}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0;}button{overflow:visible;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}input{line-height:normal;}input[type="checkbox"],input[type="radio"]{padding:0;}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto;}input[type="search"]{-webkit-appearance:textfield;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}legend{border:0;padding:0;}optgroup{font-weight:bold;}td,th{padding:0;}a{background:transparent;text-decoration:none;}a:active,a:hover,a:focus{border:none;outline:0;text-decoration:none;}::selection{background:#6a6a6a;color:#f5f5f5;text-shadow:1px 1px 1px #060606;}::-moz-selection{background:#6a6a6a;color:#f5f5f5;text-shadow:1px 1px 1px #060606;}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0;}::-webkit-input-placeholder{color:inherit;opacity:0.5;font-family:inherit;}:-moz-placeholder{color:inherit;opacity:0.5;font-family:inherit;}::-moz-placeholder{color:inherit;opacity:0.5;font-family:inherit;}:-ms-input-placeholder{color:inherit;opacity:0.5;font-family:inherit;}button,.btn:hover{cursor:pointer;}*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;*behavior:url("../js/boxsizing.htc");}



@font-face {
	font-family: 'LeagueGothic';
	src: url('../fonts/leaguegothic-regular-webfont.eot');
	src: url('../fonts/leaguegothic-regular-webfont.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/leaguegothic-regular-webfont.woff2') format('woff2'),
		 url('../fonts/leaguegothic-regular-webfont.woff') format('woff'),
		 url('../fonts/leaguegothic-regular-webfont.ttf') format('truetype'),
		 url('../fonts/leaguegothic-regular-webfont.svg#leaguegothic-regular-webfont') format('svg');
	font-weight: normal;
	font-style: normal;
}



/*  =DEFAULT & BASIC STYLES
	========================================================================== */
html,
body {
	/* height: 100%; */
}
body {
	background: url('../images/bg-body.jpg') no-repeat center top #f6b5c9;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-o-background-size: 100% 100%;
	background-size: 100% 100%;
	color: #000;
	font: 300 62.5%/1 Montserrat,sans-serif;
	-webkit-font-smoothing: antialiased;
	position: relative;
}

main,
header,
section,
footer,
nav,
.container,
a {
	-webkit-transition: all 0.1s ease-out;
	-moz-transition: all 0.1s ease-out;
	-ms-transition: all 0.1s ease-out;
	-o-transition: all 0.1s ease-out;
	transition: all 0.1s ease-out;
}

.formRow:before,
.formRow:after,
.blockItem:before,
.blockItem:after,
.block:before,
.block:after,
.container:before,
.container:after,
nav:before,
nav:after,
main:before,
main:after,
header:before,
header:after,
section:before,
section:after,
footer:before,
footer:after,
.cf:before,
.cf:after {
	display: table;
	content: " ";
}
.formRow:after,
.blockItem:after,
.block:after,
.container:after,
nav:after,
main:after,
header:after,
section:after,
footer:after,
.cf:after {
	clear: both;
}

.container {
	background: #fff;
	clear: both;
	display: block;
	margin: 7.5em auto;
	padding: 3em 5em 5.5em;
	position: relative;
	width: 1000px;
	z-index: 2;
}

img,
.img-responsive {
	display: inline-block;
	height: auto !important;
	margin: 0 auto;
	max-width: 100%;
	width: auto;
}


	.bg {
		background: url('../images/bg-wrapper.png') repeat 0 0 fixed transparent;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		height: 100%;
		width: 100%;
		z-index: 1;
	}


  h2 {
		font: 1em/1 "LeagueGothic", sans-serif;
		text-transform: uppercase;
  }



/*  HEADER 
	========================================================================== */
.header {
	position: absolute;
	left: 4.5em;
	top: -2.5em;
}



/*  CONTENT 
	========================================================================== */
.main {
	text-align: center;
}
	.main .van {
		margin: 3em auto 2em;
	}
	.main h1 {
		background: url('../images/heading.png') no-repeat center top transparent;
		display: block;
		direction: ltr;
		margin: 0 auto 5em;
		padding-bottom: 2.8em;
		text-indent: -9999em;
		height: 75px;
		width: 331px;
	}
		.main h1::after {
			background: url('../images/heading-line.png') no-repeat center top transparent;
			content: '';
			display: block;
			margin: 8em auto 2.8em;
			height: 7px;
			width: 97px;
		}


	.ubicacion {
		color: #ff009b;
		font-size: 2em;
		font-weight: 300;
		letter-spacing: 2px;
		letter-spacing: 0.2em;
		margin-bottom: 3.5em;
	}


/*  FORMULARIO 
	========================================================================== */
.contacto,
.formulario {
	float: right;
	width: 385px;
}
	.formulario {
		margin-top: -2em;
		margin-bottom: 2em;
	}
.formulario fieldset {
	margin-bottom: 2.5em;
}
.formulario fieldset#datosAdulto {
	margin-bottom: 1em;
}
.formulario legend {
	background: url('../images/bg-datos-teen.png') no-repeat left center transparent;
	direction: ltr;
	/* overflow: hidden; */
	height: 42px;
	margin-bottom: 1.5em;
	width: 309px;
	text-indent: -9999em;
}
	.formulario #datosAdulto legend {
		background: url('../images/bg-datos-adulto.png') no-repeat left center transparent;
		height: 37px;
		width: 384px;
	}

	.formRow {
		position: relative;
	}

	.forms input {
		float: right;
		color: #555;
		font-size: 1.4em;
		line-height: 2.86;
		height: 2.86em;
		font-weight: 300;
		width: 362px;
		border: 1px solid #ff009b;
		padding: 0 1em;
		margin-bottom: 0.71em;
	}
	.forms #datosAdulto input {
		border-color: #52a2d9;
	}
	.forms .btnSubmit {
		border: none;
		background: url('../images/bg-btn-grad.png') no-repeat center top #eb268f;
		-webkit-background-size: 100% 100%;
		-moz-background-size: 100% 100%;
		-o-background-size: 100% 100%;
		background-size: 100% 100%;
		color: #fff;
		letter-spacing: 1.8px;
		letter-spacing: 0.18em;
		font-weight: bold;
		font-size: 2.4em;
		text-transform: uppercase;
		margin-bottom: 0.5em;
		padding: 0.2em 0.4em;
		position: relative;
		z-index: 1;
	}
		.forms .btnSubmit::before {
			display: block;
		  content: '';
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  background: rgba(255,255,255,0.33);
		  z-index: -1;
		  opacity: 0;
		  -webkit-transform: scale3d(0.35, 1, 1);
		  transform: scale3d(0.35, 1, 1);
		  -webkit-transition: -webkit-transform 0.4s, opacity .4s;
		  transition: transform 0.4s, opacity .4s;
		  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
		  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
		}
		.forms .btnSubmit:hover::before {
		  opacity: 1;
		  -webkit-transform: translate3d(0, 0, 0);
		  transform: translate3d(0, 0, 0);
		}
		.forms .btnSubmit:active {
		  -webkit-transition: transform 0.1s linear;
		  -moz-transition: transform 0.1s linear;
		  -ms-transition: transform 0.1s linear;
		  -o-transition: transform 0.1s linear;
		  transition: transform 0.1s linear;
			-webkit-transform: translateY(1px);
			-ms-transform: translateY(1px);
			-o-transform: translateY(1px);
			transform: translateY(1px);
		}
	
		

	.formNote a,
	.formNote {
		color: #ff009b;
	}
	.formNote {
		font-size: 1.4em;
		font-weight: bold;
		max-width: 374px;
		margin-right: 0;
		margin-left: auto;
	}
		.formNoteEmail {
			border-right: 1px solid #ff009b;
			padding-right: 3%;
			margin-right: 3%;
			margin-top: 0.2em;
			float: left;
			max-width: 307px;
			width: 82%;
			text-align: center;
		}
			.formNoteEmail a {
				text-decoration: none;
			}
				.formNoteEmail a:hover {
					text-decoration: underline;
				}

		.formNoteWhatsapp {
			max-width: 70px;
			width: 15%;
			float: right;
			text-align: center;
		}

	
		.formulario .error {
			color: #900;
			color: rgba(200,0,0,0.8);
			font-size: 1.5em;
			margin-bottom: 1em;
		}
		.formulario label.invalid {
		  position: absolute;
		  bottom: 0.5em;
		  right: 0;
		  background: #f70;
		  background: rgba(255, 119, 0, 0.6);
		  color: #fff;
		  padding: 0.15em;
		  font-weight: 200;
		  font-size: 1.3em;
		  text-align: center;
		}
		.formulario .errorMesage {
		  font-size: 2em;
		  font-weight: 300;
		  letter-spacing: -0.2px;
		  letter-spacing: -0.02em;
		  text-align: center;
		  margin: 1em auto;
		}
		.formulario textarea.invalid,
		.formulario input.invalid {
		  background: #fff5f5;
		  border: 1px dashed #800;
		  border: 1px dashed rgba(200,0,0,0.7);
		}
		#formStatus {
		  clear: both;
		  display: block;
		  font-size: 1.8em;
		  font-weight: 300;
		  margin: 0 auto;
		  text-align: center;
		  width: 100%;
		}
		  #formStatus h4 {
		    color: #fad5e0;
				color: rgba(246, 181, 201, 0.6);
		    font-size: 1.7em;
		    line-height: 1.4;
		    height: 1.4em;
		    font-weight: 500;
		    display: block;
		    text-transform: uppercase;
		  }
		  #formStatus > span {
		    font-size: 1.1em;
		    line-height: 1;
		    font-weight: 500;
		    height: 2em;
		    display: block;
		    margin-top: 0.5em;
		  }




/*  POR QUE 
	========================================================================== */
.porQue {
	background: url('../images/box-border.png') no-repeat 0 0 transparent;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-o-background-size: 100% 100%;
	background-size: 100% 100%;
	float: left;
	width: 494px;
}
	.porQue h2 {
		color: #fad5e0;
		color: rgba(246, 181, 201, 0.6);
		margin: -0.55em 0 0.3em;
		font-size: 6em;
	}
	.porQue ul {
		margin: 0 auto 3em;
		max-width: 79%;
	}
		.porQue li {
			font-size: 1.4em;
			margin-bottom: 1.2em;
			text-align: center;
		}

	.porQuePaquetes {
		max-width: 305px;
		margin-left: auto;
		margin-right: auto;
	}
	.block.blockPaquetes {
		clear: both;
		margin: 0 -15px;
	}
		.blockItem {
			float: left;
			padding: 0 15px 25px;
			width: 50%;
		}
			.blockItem a {
				display: block;
				opacity: 1;
				filter: alpha(opacity=100);
				-webkit-transition: opacity 0.15s ease-out;
				-moz-transition: opacity 0.15s ease-out;
				-ms-transition: opacity 0.15s ease-out;
				-o-transition: opacity 0.15s ease-out;
				transition: opacity 0.15s ease-out;
			}
			.blockItem a:hover {
				opacity: 0.8;
				filter: alpha(opacity=80);
			}


	.porQue p {
		font-weight: bold;
		font-size: 1.4em;
		margin: 0 auto 1.2em;
	}

	.porQue figure {
		margin-bottom: 2px;
	}





/*  CONTACTO 
		========================================================================== */
.contacto {
	color: #ec268f;
  margin-left: auto;
  margin-right: auto;
}
	.contacto h2 {
		color: #dcecf7;
		color: rgba(82, 162, 217, 0.2);
		font-size: 12.7em;
		left: 0.2em;
		margin-bottom: -0.6em;
		position: relative;
		text-align: right;
	}
    .contacto > div {
    	font-weight: 300;
    	font-size: 1.2em;
    	line-height: 1.3;
    	padding: 1em 0;
    	margin-bottom: 1.2em;
		}
    .contacto > div.casaCentral {
    	border-left: 1px solid #ec268f;
    	text-align: left;
			padding-left: 1.42em;
    }
    .contacto > div.sucursalBBPS {
    	border-right: 1px solid #ec268f;
			padding-right: 1.42em;
    	text-align: right;
    }

  .contacto strong {
    font-weight: bold;
  }
  .contacto > div.contactoFooter {
  	font: 3.6em/1 "LeagueGothic", sans-serif;
  	padding: 0;
  	margin-bottom: 0;
		text-align: center;
  	text-transform: uppercase;
  }


  .vCard {
    position: relative;
  }
    .vCard .celular {
      position: absolute;
      top: -3em;
      right: 0;
      display: inline-block;
      font-size: 2em;
      font-weight: 500;
      line-height: 1.75;
      height: 1.75em;
      padding: 0 1em;
      background: rgba(0, 0, 0, 0.7);
      -webkit-border-radius: 8px;
      -moz-border-radius: 8px;
      border-radius: 8px;
      color: #fff;
      text-align: center;
      visibility: hidden;
      opacity: 0;
      filter: alpha(opacity=0);
      -webkit-transition: opacity 0.15s ease-out, visibility 0.15s ease-out;
      -moz-transition: opacity 0.15s ease-out, visibility 0.15s ease-out;
      -ms-transition: opacity 0.15s ease-out, visibility 0.15s ease-out;
      -o-transition: opacity 0.15s ease-out, visibility 0.15s ease-out;
      transition: opacity 0.15s ease-out, visibility 0.15s ease-out;
      z-index: 10;
    }
    .vCard .celular:after {
      top: 100%;
      left: 88%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
      border-color: rgba(0, 0, 0, 0);
      border-top-color: rgba(0, 0, 0, 0.5);
      border-width: 8px;
      margin-left: -8px;
    }
      body.isMobile .vCard .celular {
        display: none;
      }
      body:not(.isMobile) .vCard:hover .celular {
        visibility: visible;
        opacity: 1;
        filter: alpha(opacity=100);
      }



/*  ==========================================================================
	MEDIA QUERIES 
	========================================================================== */

@-ms-viewport { width: device-width; }

@media all and (max-width:1023px){
	.container {
		width: 740px;
	}
	.porQue {
		/* max-width: 100%; */
		clear: both;
		width: 92%;
	}
	.porQue,
	.contacto,
	.formulario {
		float: none;
		margin: 0 auto 2em;
		text-align: center;
	}
	.formulario {
		margin-bottom: 6em;
	}
	.contacto {
		margin-bottom: 0;
		width: 100%;
	}
	.contacto > div {
		width: 49%;
		float: left;
	}
	.contacto h2 {
		position: static;
		text-align: center;
	}
	.contacto > div.sucursalBBPS {
		padding-bottom: 2em;
	}
	.contacto > div.contactoFooter {
		clear: both;
		float: none;
		text-align: center;
		width: 100%;
	}
}
@media only screen and (max-width:767px){
  .container {
  	width: 450px;
  }
  .header {
  	left: 1.5em;
  	top: -2.05em;
  }
  #logo {
  	width: 160px;
  }


  .formulario {
  	width: 100%;
  }
  .formulario #datosAdulto legend,
  .formulario legend {
  	-webkit-background-size: 100% auto;
  	-moz-background-size: 100% auto;
  	-o-background-size: 100% auto;
  	background-size: 100% auto;
  	height: 34px;
  	width: 250px;
  }
  .formulario #datosAdulto legend {
  	width: 300px;
  	height: 29px;
  }
  .porQue {
  	clear: both;
  	width: 100%;
  }
  .contacto > div.casaCentral,
  .contacto > div.sucursalBBPS {
  	width: 100%;
  	border: none;
  	float: none;
  	margin: 0 auto 2em;
  	padding: 0;
  	text-align: center;
  }
}
@media only screen and (max-width:479px){
  .container {
  	background: rgba(255, 255, 255, 0.85);
  	margin-top: 3.5em;
  	padding: 1em 1em 1.5em;
  	width: 310px;
  }
  .main .van {
  	margin: 8em auto 1em;
  }
  .main h1 {
  	-webkit-background-size: 100% auto;
  	-moz-background-size: 100% auto;
  	-o-background-size: 100% auto;
  	background-size: 100% auto;
  	height: 66px;
  	width: 290px;
  }
  .ubicacion {
  	margin-bottom: 2em;
  }
  .forms #datosAdulto input,
  .forms input {
  	max-width: 100%;
  	width: 100%;
  }
  .formulario #datosAdulto legend {
  	height: 28px;
  	width: 290px;
  }
  .porQue h2 {
  	font-size: 4.9em;
  }
  .block.blockPaquetes {
  	margin: 0 auto 2em;
  }
  .blockItem {
  	float: none;
  	display: block;
  	width: auto;
  	margin: 0 auto 1em;
  	padding: 0;
  }
  .contacto h2 {
  	font-size: 10em;
  }
}