@font-face {
    font-family: 'open_sansbold';
    src: url('../fonts/Open-Sans/opensans-bold-webfont.woff2') format('woff2'),
         url('../fonts/Open-Sans/opensans-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_sansbold_italic';
    src: url('../fonts/Open-Sans/opensans-bolditalic-webfont.woff2') format('woff2'),
         url('../fonts/Open-Sans/opensans-bolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_sansextrabold';
    src: url('../fonts/Open-Sans/opensans-extrabold-webfont.woff2') format('woff2'),
         url('../fonts/Open-Sans/opensans-extrabold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_sansextrabold_italic';
    src: url('../fonts/Open-Sans/opensans-extrabolditalic-webfont.woff2') format('woff2'),
         url('../fonts/Open-Sans/opensans-extrabolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_sansitalic';
    src: url('../fonts/Open-Sans/opensans-italic-webfont.woff2') format('woff2'),
         url('../fonts/Open-Sans/opensans-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_sanslight';
    src: url('../fonts/Open-Sans/opensans-light-webfont.woff2') format('woff2'),
         url('../fonts/Open-Sans/opensans-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_sanslight_italic';
    src: url('../fonts/Open-Sans/opensans-lightitalic-webfont.woff2') format('woff2'),
         url('../fonts/Open-Sans/opensans-lightitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_sansregular';
    src: url('../fonts/Open-Sans/opensans-regular-webfont.woff2') format('woff2'),
         url('../fonts/Open-Sans/opensans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_sanssemibold';
    src: url('../fonts/Open-Sans/opensans-semibold-webfont.woff2') format('woff2'),
         url('../fonts/Open-Sans/opensans-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_sanssemibold_italic';
    src: url('../fonts/Open-Sans/opensans-semibolditalic-webfont.woff2') format('woff2'),
         url('../fonts/Open-Sans/opensans-semibolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'dosisbold';
    src: url('../fonts/Dosis/dosis-bold.woff2') format('woff2'),
         url('../fonts/Dosis/dosis-bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'dosisextrabold';
    src: url('../fonts/Dosis/dosis-extrabold.woff2') format('woff2'),
         url('../fonts/Dosis/dosis-extrabold.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'dosisextralight';
    src: url('../fonts/Dosis/dosis-extralight.woff2') format('woff2'),
         url('../fonts/Dosis/dosis-extralight.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'dosislight';
    src: url('../fonts/Dosis/dosis-light.woff2') format('woff2'),
         url('../fonts/Dosis/dosis-light.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'dosismedium';
    src: url('../fonts/Dosis/dosis-medium.woff2') format('woff2'),
         url('../fonts/Dosis/dosis-medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'dosisregular';
    src: url('../fonts/Dosis/dosis-regular.woff2') format('woff2'),
         url('../fonts/Dosis/dosis-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'dosissemibold';
    src: url('../fonts/Dosis/dosis-semibold.woff2') format('woff2'),
         url('../fonts/Dosis/dosis-semibold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
body {
  margin: 0;
  font-family: 'open_sansregular'!important;
  font-size: 12px;
  color: #2e2e2e!important;
  margin:0px;
  width: 100%!important;overflow-y:hidden!important;
}
html {scroll-behavior: smooth!important;overflow-x:hidden!important; margin:0px!important;}
a {text-decoration:none!important;}
p {margin: 0!important;font-size: 14px;}
img { max-width: 100%;vertical-align: middle;border: 0;}
/****whatsapp****/
#whatsapp-float{
  position:fixed;
  width:2em;
  height:2em;
  bottom:10px;
  left:40px;
  background-color:#25d366!important;
  color:#FFF!important;
  border-radius:50px;
  text-align:center;
  font-size:30px;
  box-shadow: 2px 2px 3px #999;
  z-index:100;
  padding-top: 0.3em;
}

#whatsapp-float a{
  color:#FFF!important;

}

/****LOADER****/
.loader {
position: fixed;
top: 0;
left: 0;
width: 100%!important;
height: 100%!important;
z-index: 999999!important;
margin: 0;
padding: 0;
background-color: white;
}
.item {
  width: 3em;
  height: 3em;
  position: absolute;
}

.item-1 {
  background-color: #A53692;
  top: 50%;
  left: 50%;
  z-index: 1;
  animation: item-1_move 2s cubic-bezier(.6,.01,.4,1) infinite;
}

.item-2 {
  background-color: #FFCC29;
  top: 50%;
  right: 50%;
  animation: item-2_move 2s cubic-bezier(.6,.01,.4,1) infinite;
}

.item-3 {
  background-color: #F58634;
  bottom: 50%;
  right: 50%;
  z-index: 1;
  animation: item-3_move 2s cubic-bezier(.6,.01,.4,1) infinite;
}

.item-4 {
  background-color: #C8A2CB;
  bottom: 50%;
  left: 50%;
  animation: item-4_move 2s cubic-bezier(.6,.01,.4,1) infinite;
}

@keyframes item-1_move {
  0%, 100% {transform: translate(0, 0)} 
  25% {transform: translate(0, 100px)} 
  50% {transform: translate(100px, 100px)} 
  75% {transform: translate(100px, 0)} 
}

@keyframes item-2_move {
  0%, 100% {transform: translate(0, 0)} 
  25% {transform: translate(-100px, 0)} 
  50% {transform: translate(-100px, 100px)} 
  75% {transform: translate(0, 100px)} 
}

@keyframes item-3_move {
  0%, 100% {transform: translate(0, 0)} 
  25% {transform: translate(0, -100px)} 
  50% {transform: translate(-100px, -100px)} 
  75% {transform: translate(-100px, 0)} 
}

@keyframes item-4_move {
  0%, 100% {transform: translate(0, 0)} 
  25% {transform: translate(100px, 0)} 
  50% {transform: translate(100px, -100px)} 
  75% {transform: translate(0, -100px)} 
}	
/****MENU****/
.navbar-toggler {
    border: 0!important;
}
.navbar {
  background-color: rgba(30, 30, 30, 0.85);
  font-family: 'dosisbold'!important;
  font-size: 15px;
  padding: 10px 0px;
}
.navbar-brand, .navbar-nav .nav-link {
  color: white!important;
  line-height:1;
  letter-spacing:1.3px;
}
.navbar-nav .nav-link {
  text-transform: uppercase;
}
.navbar-nav .current a, .navbar-nav a:hover{
      color: #FFCC29!important;
}

.navbar-nav .current a{
      border-bottom: 2px solid #FFCC29!important;
}
.navbar-brand{
  color: white!important;
  margin-left: 2em;
  font-family: 'open_sansbold'!important;
  font-size: 1.5em!important;
}

/****HEADER****/
.header, .header-gracias{
overflow-x, overflow-y: hidden!important;
background:url("../img/fondo.jpg")no-repeat center bottom;
background-size:cover;
box-sizing: content-box;
height:100vh;
width:100%;
position:relative;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
}
.header{position:relative;background-attachment: scroll;}

.header-gracias{background-attachment: fixed;position:fixed;}

.header-img{display:block; width: 6em; margin-left: auto; margin-right: auto; margin-bottom: 1em;}

#flecha a {
		font-size: 24px;
		color: white!important;
		cursor: pointer; 
		-webkit-animation: jumpInc 3s infinite;
		-moz-animation: jumpInc 3s infinite;
         -o-animation: jumpInc 3s infinite;
         animation: jumpInc 3s infinite;
		 position: absolute;
		margin-left: auto;
		margin-right: auto;
		left: 0;
		right: 0;
		}

		@-webkit-keyframes jumpInc {
			0%   {
				margin-top: 0em;
				opacity: 0;
			}
			50%  {
				margin-top: 3em;
				opacity: 1;
			}
			100% {
				margin-top: 6em;
				opacity: 0;
			}
		}

		@-moz-keyframes jumpInc {
			0%   {
				margin-top: 0em;
				opacity: 0;
			}
			50%  {
				margin-top: 3em;
				opacity: 1;
			}
			100% {
				margin-top: 6em;
				opacity: 0;
			}
		}
		@-o-keyframes jumpInc {
			0%   {
				margin-top: 0em;
				opacity: 0;
			}
			50%  {
				margin-top: 3em;
				opacity: 1;
			}
			100% {
				margin-top: 6em;
				opacity: 0;
			}
		}
		@keyframes jumpInc {
			0%   {
				margin-top: 0em;
				opacity: 0;
			}
			50%  {
				margin-top: 3em;
				opacity: 1;
			}
			100% {
				margin-top: 6em;
				opacity: 0;
			}
		}
.desc {font-size: 2em;}
.desc {color:white;margin-bottom: 20px;}
#social {padding: 0;text-align: center;}
#social li {display: inline-block;margin-right:0.5em;}
#social a {color:white;display: block;width: 2.5em;height: 2.5em;line-height: 2.5em;font-size: 0.8em; border: 1px solid white;
-webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    transition: background 0.3s linear;
    -moz-transition: background 0.3s linear;
    -webkit-transition: background 0.3s linear;
    -o-transition: background 0.3s linear;}	
#social a:hover{color:#FFCC29;}	
/****SECCIONES****/
.container, .main{margin: 0!important;height: auto!important; width: 100%!important;min-width: 100%!important;}
.section-padding{padding:7em 3em 2em 4em!important;}		
.v-middle{display:block; text-align: center; margin-left: auto!important; margin-right: auto!important; position:absolute;width:100%;top:50%;left:0;-webkit-transform:translate(0,-50%);-moz-transform:translate(0,-50%);-ms-transform:translate(0,-50%);-o-transform:translate(0,-50%);transform:translate(0,-50%)}
.tc-title h4 {font-family:'dosisregular';font-size: 1.9em!important;text-align:center;}
.tc-title {width: 100%;margin-bottom: 3em!important;text-align: center!important;}
.secciones-heading {font-size: 14px;font-family:'dosisregular';font-weight:bold;line-height: 21px;text-transform: uppercase;letter-spacing: 1.5px;margin-bottom: 1em;}
.secciones-text {margin: 0 0 20px;}
.secciones-icons {font-size: 3em;display: block;color: #A53692;margin-bottom: 0.5em;}
.secciones-tiles {width: 25%;float: left;padding: 1em;box-sizing: border-box;text-align: center;}

/****nosotros****/
.nosotros-title {
text-align: center!important;
margin-bottom: 35px;
}
.nosotros-title h6 {
font-size: 30px;
line-height: 45px;
color:#303030;
}
.nosotros-tiles {
color: black;
width: 33%!important;
padding:0 3em 3em 3em!important;
text-align: center!important;
}
.nosotros-image {
font-size: 45px;
display: block;
color: #303030;
margin: 0 1em 0.5em 1em;
}

/****instructivo****/
.bk-violeta {background-color: #A53692; color: white;}
.instructivo-icons {
color: #A53692;
}
.instructivo-icons li {
width: 3em;
height: 3em;
background-color: #ddd;
border-radius: 50%;
position: relative;
display: inline-block;
overflow: hidden;
margin: 10px;
list-style:none;
}
.instructivo-icons li .text {
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
z-index: 1;
}
.instructivo-icons li .bar-circle-right, .instructivo-icons li .bar-circle-left {
border-radius: 50%;
position: absolute;
display: block;
width: 100%;
height: 100%;
background: #FFCC29;
clip: rect(0, 75px, 150px, 0);
}
.instructivo-icons li .bar-circle-left {
background: #ddd;
}
.instructivo-icons li .bar-circle-cover {
display: block;
width: 95%;
height: 95%;
border-radius: 50%;
background-color: #fff;
z-index: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

/*--------------servicios-------------*/
.og-grid {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	text-align: center;
	width: 100%;
}

.og-grid li {
	display: inline-block;
	margin: 10px 5px 0 5px;
	vertical-align: top;
	width: 18%!important;
}

.og-grid li > a,
.og-grid li > a img {
	border: none;
	outline: none;
	display: block;
	position: relative;
	width:100%!important;
}

.og-expander {
	position: absolute;
	top: auto;
	left: 0;
	width: 100%;
	margin-top: 10px;
	text-align: left;
	overflow: hidden;
	padding: 2em 10em 0em 5em;
	z-index: 100;

}

.og-close {
	position: absolute;
	width: 40px;
	height: 40px;
	top: 20px;
	right: 50px;
	cursor: pointer;
}

.og-close::before,
.og-close::after {
	content: '';
	position: absolute;
	width: 100%;
	top: 50%;
	height: 1px;
	background: #888;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
}

.og-close::after {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.og-close:hover::before,
.og-close:hover::after {
	background: #333;
}

.og-fullimg,
.og-details {
	float: left;
	overflow: hidden;
	position: relative;
}

.og-details {
	padding: 0 20px 0 20px;
	width: 70%;
	height: 100%;
}

.og-fullimg {
	text-align: center;
	width: 25%;
    vertical-align:super!important;
    
}

.og-fullimg img {
	display: inline-block;
    width: 100%;
    
}

.og-details h3 {
	font-family: 'dosisregular';
	font-weight: bold;
	font-size: 18px;
	color: #A53692;
	text-transform: uppercase;
	padding: 0 0 0;
}

.og-details p {
	font-size: 14px;
	color: black;
	line-height: 18px;
}
.og-details h6 {
	margin: 1em 0 0.5em;
    font-size: 14px!important;
}

.og-details a {
	font-weight: bold;
	font-size: 16px;
	font-family: 'dosisregular';
	color: #A53692;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding: 0.5em 0.5em;
	border: 3px solid #A53692;
	display: inline-block;
	margin: 1em 0 0;
	outline: none;
}

.og-details a::before {
	content: '\2192';
	display: inline-block;
	margin-right: 10px;
}

.og-details a:hover {
	border-color: #999;
	color: #999;
}

.og-loading {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #ddd;
	box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ccc;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -25px 0 0 -25px;
	-webkit-animation: loader 0.5s infinite ease-in-out both;
	-moz-animation: loader 0.5s infinite ease-in-out both;
	animation: loader 0.5s infinite ease-in-out both;
}

.fancybox-image img{height:100vh!important;}

.servicios-desc ul{width:100%!important;}
@-webkit-keyframes loader {
	0% { background: #ddd; }
	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

@-moz-keyframes loader {
	0% { background: #ddd; }
	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

@keyframes loader {
	0% { background: #ddd; }
	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

#og-grid a:hover:before{
  content: attr(data-title);
  font-family: 'dosisregular';
  padding: 4px 8px;
  color: white;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
}

/*--------------SUGERENCIAS-------------*/
.bk-amarillo {background-color: #FFCC29;}
.sugerencias-icons {color: black;}
/*--------------CONTACTO-------------*/
.contact_form h5{font-size: 1.5em; text-align: left; color: white; background-color: #A53692;padding: 0.2em 0 0.2em 0.5em;}
.contact_form {text-align: left!important;}
.contact_list_wrapper {
text-align: center!important;
    width: 100%;
}
.contact-list-info a {
    text-decoration: none;
    color: #000;
}

.contact-list-info a:hover {
    color: #FFCC29;
}

.contact-list-info {
list-style: none;
padding: 0;
margin: 0;
text-align: center;
}
.contact_list_wrapper .contact-list-info li {
padding: 0;
padding-left: 15px;
padding-right: 15px;
display: inline-block;
line-height: 25px;
color: #606060;
}
.contact_list_wrapper .contact-list-info li i {
display: inline;
margin-right: 5px;
font-size: 15px;
vertical-align: -2px;
color: #303030;
}
.contact_list_wrapper .contact-list-info li p {
display: inline;
}
.form-check-input, .form-check {position: relative!important; margin:0!important;  padding:0!important;}
.col {padding: 0!important;}
option:checked {
            background-color: #A53692;
            color: white;
			border: none;
        }

            option:checked:hover, select:focus option:checked:hover {
            background-color: #A53692;
            color: white;
			border: none;
            }

form {
    font-family: 'open_sansregular'!important;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    margin-top: 20px;
}

form i {
    display: inline!important;
}


.titulo  {
    font-weight: bold;
	font-size: 18px;
}

.completar  {
    background: white;
	width: 100%;
    margin-top: 10px!important;
    margin-bottom: 20px!important;
    padding: 10px;
    box-sizing: border-box;
    font-size: 17px;
    border: 1px solid #D2D2D2;
}

textarea {
    min-height: 100px;
    max-height: 200px;
    max-width: 100%;
}

.btn{
    background:#A53692;
    color: #fff;
    padding: 20px;
	border-radius:40px;
	width:140px;
    margin-left: 1em;
    float: right;
}

.btn:hover {
    cursor: pointer;
    background:#FFCC29;
}
.map-me  {
position: relative;
padding-bottom: 30%;
overflow: hidden;
float: none;
clear: both;
width: 100% !important;
}
.map-me  iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
/*--------------FOOTER-------------*/
.contactFooterGracias{position:fixed; bottom:0;width:100%!important;}
.contactFooter{margin-bottom:0!important;}
.contact_image .overlay .contact_info .item:nth-of-type(1),.contact_image .overlay .contact_info .item:nth-of-type(2){margin-bottom:0!important}
.contact_body{padding:30px 20px!important;}
.contactFooter{background-color:black;padding:0;color:white}
.contactFooter a{color: white!important;}
.contactFooter a:hover{color:#FFCC29!important;}

/****RESPONSIVE****/
	@media screen and (max-width:1000px){
		.navbar {overflow-y:hidden!important; width: 100%; position: fixed!important; z-index:1;}
		.nav-item {text-align: center!important;}
	}
	@media only screen and (max-width: 830px) {
		.og-expander h3 { font-size: 32px; }
		.og-expander p { font-size: 13px; }
		.og-expander a { font-size: 12px; }
        .sugerencias-tiles {width: 50%;}
        .col-form-label { font-size: 0.9em!important; padding-right: 0!important; }
        .col-sm-8 { padding: 0!important; }
	}	
	@media screen and (max-width: 650px) {
        .instructivo-tiles {width: 50%;}
        .sugerencias-tiles {width: 100%;}
		.og-fullimg { display: none; }
		.og-details { float: none; width: 100%;}
        .og-grid li {width: 26% !important;}
        .og-details h3 {font-size: 16px;}
	}	
	@media only screen and (max-width: 400px) {
        .desc{font-size: 20px;}
        .desc-gracias{font-size: 15px;}
        .section-padding {padding: 5em 1em 2em 1em!important;}
        .tc-title {margin: 0 1em 1em 1em!important;}
        .secciones-icons{margin-bottom: 0;}
        .nosotros-heading {font-size: 10px;}
		.nosotros-text {font-size: 12px;}
		.nosotros-tiles {padding: 0.5em !important;}
		.nosotros-image {margin: 0 0 0.2em 0;}
        .og-grid li {width: 29%!important;}
        .og-expander {padding: 0em 2.5em 0.3em 0em !important;}
        .col-md-6.contact_body{float:none;}
		.contact_body{padding:30px 20px!important;}
		form{width: 100%;}
		#og-grid a:before{
		  content: attr(data-title);
		  font-family: 'dosisregular';
		  font-size: 0.5em!important;
		  padding: 0.2em;
		  color: white;
		  position: absolute;
		  left: 0;
		  bottom: 0;
		  z-index: 20;
		  width: 100%;
		  white-space: nowrap;
		  background: rgba(0, 0, 0, 0.5);
		  text-transform: uppercase;
		}
		#og-grid a:after{display:none;}
		.og-close {width: 20px;	height: 20px; top: 0;right: 10px;}

    #whatsapp-float{
  position:fixed;
  width:1.5em;
  height:1.5em;
  padding:1px;
}
	}