@charset "UTF-8";
/*IMPORT GOOGLE FONTS <------------------------------------------------------------------------*/

/* DEFINO FUENTES <------------------------------------------------------------------------
	{
	font-family: 'Montserrat', sans-serif;
	font-weight: 100;
	font-weight: 300;
	font-weight: 400;
	font-weight: 500;
	font-weight: 600;
	font-weight: 700;
	font-weight: 800;
	font-weight: 900;
	}	
*/

/* DEFINO COLORES <------------------------------------------------------------------------
azul: #007abc;
gris claro: #7f7f7f;
gris oscuro: #313131;
*/

/*
.selector-for-some-widget {
  box-sizing: content-box;
}
*/

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

html {scroll-behavior: smooth;}

body {
	/*background-color: #fff;*/
	background-color:#d2e2ec;
	background-image:url(../images/bg.jpg);
	background-position:center top;
	background-repeat:no-repeat;
  	font-family: 'Montserrat', sans-serif;
  	font-weight: 400;
  	font-size:1em;
  	margin:0 auto;
  	min-height: 100%;
}

	@media screen and (max-width: 991px) and (min-width: 768px) {
		body { background-image:url(../images/bg.jpg); background-position:-700px -280px; }
	}
	@media screen and (max-width: 767px) and (min-width: 300px) {
		body { background-image:url(../images/bg.jpg); background-position:-850px -220px; }
	}

/*------------------------------------------------------------------------------------
																			ESTILOS	GENERALES
 -----------------------------------------------------------------------------------------------*/
 /*
@media screen and (min-width: 1200px) {
}
@media screen and (max-width: 1199px) and (min-width: 992px) {
}
@media screen and (max-width: 991px) and (min-width: 768px) {
}
@media screen and (max-width: 767px) and (min-width: 300px) {
}
*/

 /*
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
*/


/*
// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
*/


/* ------------------------------------------------------the given screen size or smaller
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width
*/


.wh { background-color: #fff; }
	@media screen and (min-width: 1200px) {
	.wh .p-5 { padding: 100px !important; }
}

h1, h2, h3, h4, h5, h6 { font-weight: 700;}
p, a { font-weight: 400;}

h1 { font-size: 3.8em; line-height: 1.3em; }
h2 { font-size: 3.4em; line-height: 1.3em; }
h3 { font-size: 3em; line-height: 1.3em; }
h4 { font-size: 2.6em; line-height: 1.3em; }
h5 { font-size: 2.2em; line-height: 1.3em; }
h6 { font-size: 1.8em; line-height: 1.3em; }

	@media screen and (max-width: 1199px) and (min-width: 992px) {
		h1 { font-size: 3.8em; line-height: 1.3em; }
		h2 { font-size: 3.4em; line-height: 1.3em; }
		h3 { font-size: 3em; line-height: 1.3em; }
		h4 { font-size: 2.6em; line-height: 1.3em; }
		h5 { font-size: 2.2em; line-height: 1.3em; }
		h6 { font-size: 1.8em; line-height: 1.3em; }
	}

	@media screen and (max-width: 991px) and (min-width: 768px) {
		h1 { font-size: 2.5em; line-height: 1.3em; }
		h2 { font-size: 2.2em; line-height: 1.3em; }
		h3 { font-size: 1.8em; line-height: 1.3em; }
		h4 { font-size: 1.4em; line-height: 1.3em; }
		h5 { font-size: 1.3em; line-height: 1.3em; }
		h6 { font-size: 1.2em; line-height: 1.3em; }
	}

	@media screen and (max-width: 767px) and (min-width: 300px) {
		h1 { font-size: 2.3em; line-height: 1.3em; }
		h2 { font-size: 2em; line-height: 1.3em; }
		h3 { font-size: 1.5em; line-height: 1.3em; }
		h4 { font-size: 1.3em; line-height: 1.3em; }
		h5 { font-size: 1.2em; line-height: 1.3em; }
		h6 { font-size: 1.1em; line-height: 1.3em; }
	}

@keyframes img_zoom_out {
	0% { transform: scale(1);}
  	90% { transform: scale(1.1);}
  	100% { transform: scale(1.1);}
}

@keyframes img_zoom_in {
	0% { transform: scale(1.1);}
  	90% { transform: scale(1);}
  	100% { transform: scale(1);}
}

@keyframes appears_alfa {
	0% {opacity:0;}
	50% {opacity:1;}
	100% {opacity:0;}
}

@keyframes appears_up {
	0% {transform:  translate(-200px,0px);}
	20% {transform:  translate(0px,0px);}
	100% {transform:  translate(0px,0px);}
}

.divisor { display: block; height: 1px !important; background-color: #a2a3a5; }

/* Fade */
.hvr-fade {
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
}
.hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active {
  /*background-color: #2098D1;*/
  /*color: white;*/
}

/* Shadow */
.hvr-shadow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
}
.hvr-shadow:hover, .hvr-shadow:focus, .hvr-shadow:active {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
}

/* Grow Shadow */
.hvr-grow-shadow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow, transform;
  transition-property: box-shadow, transform;
}
.hvr-grow-shadow:hover, .hvr-grow-shadow:focus, .hvr-grow-shadow:active {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

/*------------------------------------------------------------------------------------
																						MAIN
 -----------------------------------------------------------------------------------------------*/


/*------- TOP HEADER -------*/

/* Side Menu */
#sidebar-wrapper {
  position: fixed;
  z-index: 2;
  right: 0;
  width: 400px;
  height: 100%;
  -webkit-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  -webkit-transform: translateX(400px);
  transform: translateX(400px);
  background: #007abc;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-nav {
  position: absolute;
  top: 0;
  width: 400px;
  margin: 0;
  padding: 80px 0 0 0;
  list-style: none;
  text-align: center;

}

.sidebar-nav li.sidebar-nav-item a {
  display: block;
  text-decoration: none;
  color: #fff;
  padding: 15px;
  transition-property: background;
  transition-duration: .75s;
  font-weight: 300 !important;
}

.sidebar-nav li a:hover {
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
  text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
  font-size: 1.2rem;
  background: rgba(52, 58, 64, 0.1);
  height: 80px;
  line-height: 50px;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
}

.sidebar-nav > .sidebar-brand a {
  color: #fff;
}

.sidebar-nav > .sidebar-brand a:hover {
  color: #fff;
  background: none;
}

#sidebar-wrapper.active {
  right: 400px;
  width: 400px;
  -webkit-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}

.menu-toggle {
  position: fixed;
  right: 15px;
  top: 15px;
  width: 80px;
  height: 80px;
  text-align: center;
  color: #007abc;
  line-height: 50px;
  z-index: 999;
  font-size: 26px;
}

.menu-toggle:focus, .menu-toggle:hover {
}

.menu-toggle:focus {
	color:#fff;
}



/*------------------------------------------------------------------------------------
																						HOME
 -----------------------------------------------------------------------------------------------*/

.txt-col {
	padding: 100px 80px 0;
	/*background-image: url(../images/bg_elem.png);*/
	background-size: contain;
	background-repeat: no-repeat;
}

	@media screen and (max-width: 1400px) and (min-width: 992px) {
		.txt-col { padding: 100px 60px 0;}
	}
	@media screen and (max-width: 991px) and (min-width: 768px) {
		.txt-col { padding: 80px 40px 0;}
	}
	@media screen and (max-width: 767px) and (min-width: 300px) {
		.txt-col { padding: 30px 20px 0;}
	}

.txt-col h2 {
	color: #007abc;
}

.typewrite {
	color: #313131 !important;
	font-weight: 400 !important;
}

.vaquita {
	max-height: 100%; 
}

	@media screen and (max-width: 991px) and (min-width: 768px) {
		.vaquita { height: 60%;}
	}
	@media screen and (max-width: 767px) and (min-width: 300px) {
		.vaquita { height: 50%; margin-top: 40px;}
	}
 
.elem { position: absolute; z-index: 99; }

.e1 {width: 40px; height: auto; top:20px; right: 60px;}
.e2 {width: 50px; height: auto; top:0; left: 0;}
.e3 {width: 15px; height: auto; top:440px; right: 30px;}
.e4 {width: 10px; height: auto; top:60px; left: 300px;}
.e5 {width: 10px; height: auto; top:500px; left: 0;}
.e6 {width: 15px; height: auto; top:200px; left: 0;}
.e7 {width: 6px; height: auto; top:300px; left: 40px; animation: appears_alfa 1.3s ease-in-out 1s infinite; opacity: 0;}
.e8 {width: 10px; height: auto; top:50px; left: 200px; animation: appears_alfa 2s ease-in-out 1s infinite; opacity: 0;}
.e9 {width: 8px; height: auto; top:470px; left: 300px; animation: appears_alfa 1.5s ease-in-out infinite; opacity: 0;}
.e10 {width: 4px; height: auto; top:20px; left: 400px; animation: appears_alfa 1.8s ease-in-out infinite; opacity: 0;}
.e11 {width: 4px; height: auto; top:150px; right: 20px; animation: appears_alfa 1.5s ease-in-out .5s infinite; opacity: 0;}


.icon-scroll,
.icon-scroll:before {
  position: absolute;
  left: 50%;
}

.icon-scroll {
  width: 25px;
  height: 45px;
  margin-left: -22px;
  bottom: 50px;
  margin-top: -22px;
  border-radius: 20px;
  background-color: rgba(143,152,160,.7);
}

	@media screen and (max-width: 1400px) {
		.icon-scroll {bottom: 20px;}
	}

.icon-scroll:before {
  content: '';
  width: 6px;
  height: 10px;
  background: #fff;
  margin-left: -3px;
  top: 8px;
  border-radius: 6px;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-name: scroll;}

@keyframes scroll {
  0% {opacity: 1}
  100% {opacity: 0; transform: translateY(22px)}
}






#mas_info { padding: 100px 0 150px; }

.tami-fotos {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1); border-radius: 2px;}

.tami-fotos .carousel-caption { /*color: #000099 !important;*/ color: #007abc !important;}

/*.carousel-control-prev-icon {
	color: #007abc !important;
    filter: hue-rotate(240deg) saturate(5); 
    -webkit-filter: hue-rotate(240deg) saturate(100); 
}*/

/*------------------------------------------------------------------------------------
																						FOOTER
-----------------------------------------------------------------------------------------------*/

footer { padding: 100px 0 20px; background-color: #fff !important; display: block; }
	@media screen and (max-width: 767px) and (min-width: 300px) {
		footer { padding: 80px 0 20px; }
	}
footer h2 { text-align: center; color: #313131; }

footer .logo-pie { width: 200px; display: block; margin: 40px auto 20px;}

footer .social_top {
	padding-top: 40px;
}

footer .social_top li {
	margin: 0 10px;
}

footer .social_top li a {
	border: 2px solid #313131;
	width: 50px;
	height: 50px;
	color: #313131;
	border-radius: 25px;
	font-size: 1.2em;
	text-align: center;
	padding: 10px;
	background-color: transparent;
}

footer .social_top li a:hover {
	background-color: #313131;
	border: 2px solid #313131;
	color: #fff;
}

footer p { font-family: 'Montserrat', sans-serif; letter-spacing: -.03em; padding: 40px 20px; font-size: 1em; font-weight: 300; text-align: center;}
footer p a { color: #007abc; }
footer p :hover {color: #7f7f7f;}