@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;300&display=swap');

/*GENERAL CSS*/
html, body{
	font-family: 'Roboto', sans-serif;
	font-size:17px;
	color:#111;
	background-color:#FFF;
	height: 100%;
	font-weight:300;
}

/*Links Color*/
a{
	color:#89cddf;
}

a:hover{
	color:#025586;
}

/*Titles Color*/

h1{
	font-weight:700;
	font-size:3.5vw;
	line-height:4.0vw;
	letter-spacing:2px;
	font-family: 'Montserrat', sans-serif;
	
}

h2{
	font-weight:700;
	font-size:45px;
	line-height:45px;
	letter-spacing:1px;
	color:#111;
	font-family: 'Montserrat', sans-serif;
}

 h3{
	font-size:18px;
	font-weight:400;
	letter-spacing:1.5px;
	font-family: 'Roboto', sans-serif;
	color:#4fabde;
 }


 h4{
	font-size:18px;
	font-weight:300;
	padding-top:20px;
	letter-spacing:1px;
	font-family: 'Montserrat', sans-serif;
 }
 
 .color-text{
	color:#333;
	font-weight:900;
}

.small-text{
	font-size:14px;
	line-height:16px;
	font-weight:300;
}

 /*BUTTONS*/
 .btn{
	letter-spacing:2.5px;
	font-weight:400;
	font-size:15px;
	padding:15px 30px;
	border-radius:25px;
 }
 
 .cta-button-form{
	 background-color:#1d75c2;
 }
 
  .cta-button-form:hover{
	 background-color:#114d82;
 }
 
 /*IMAGES*/
 .img-full{
	max-width:100%;
	text-align:center;
}

/*DEVICE VISIBILITY*/
.mobile{
		display:none;
	}
.pc{
		display:inline;
}


/*FLOATING BUTTONS*/

.float-fbmessenger{
	position:fixed;
	bottom:45px;
	right:17px;
	color:#FFF;
	text-align:center;
	z-index:20;
}

#img-fbmessenger{
	height:50px;
	text-shadow: 1px 1px 1px #999;
}


/*List Settings*/
ul{
	text-align:left;
	list-style: none;
	background-color:rgba(255,255,255, 1);
	margin-left:0px;
}

li{
  line-height:18px;
  font-size:18px;
  font-weight:300;
  color:#111;
  letter-spacing:0.5px;
  padding-bottom:20px;
}

ul li::before {
  content: "✔";
  color: #4fabde;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  padding: 0px;
  border: 2px solid #4fabde;
  font-weight: bold;
  display: inline-block; 
  text-align: center;
  font: 18px Arial, sans-serif;
  margin-right:10px;
}


.fa{
	color:#fff;
}

.div-shadow{
	box-shadow: 4px 4px 4px 4px rgba(0, 0, 0, 0.1), 0 6px 10px 0 rgba(0, 0, 0, 0.1);
}
	
.border-div{
	border:5px solid #fff; border-radius:2px;
}

 /* TOP BAR & MENU */

 #img-logo{
	 height:75px;
	 padding-bottom:0px;
 }
 
 #img-logo-scroll{
	 height:45px;
	 padding-bottom:0px;
 }


 #navbar{
	 background-color: rgba(255,255,255,0.2);
	 height:100px;
 }
 
  #navbar2{
	 background-color: rgba(255,255,255,1);
	 height:60px;
	 visibility:hidden;
 }
 
.topnav {
  position: absolute;
  overflow: hidden;
  z-index:220;
  width:100%;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 6px 10px 0 rgba(0, 0, 0, 0.1);
}


.topnav-centered img {
  float: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: rgba(0,0,0,0.7);
  color: #fff;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav-right {
  float: right;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;

}

#navbar2 a {
	color:#111;
}

#navbar2 a:hover {
  background-color: transparent;
  border-bottom:3px solid #4faadf;
  color: black;
}


#img-logo-mobile {
    margin-left: 50px !important;
}


/*MAIN SECTION*/
#main-container {
	background: linear-gradient(-45deg, rgba(229, 129, 0,0.7),rgba(204, 34, 0,0.7),rgba(0, 183, 229,0.7),rgba(10, 20, 81,0.7));
	background-size: 400% 400%;
	-webkit-animation: gradient 15s ease infinite;
	animation: gradient 15s ease infinite;			
	padding-top:250px;
	 min-height: 100%;
}

#main-background{
	background-image: url("../images/background.jpg");
	background-attachment:fixed;
	background-repeat:no-repeat;
	background-position:center-right;
	background-size:cover;
	height: 100%;
}

.video-investigador{
  padding-top:90px !important;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/*ABOUT SECTION*/
#about-container{
	padding:150px 0px 150px 0px;
	background-image: url("../images/triangle.png");
	background-attachment:fixed;
	background-repeat:no-repeat;
	background-position:center-right;
	background-size:cover;
}

/*SERVICES SECTION*/
#services-container{
	padding:100px 0px 180px 0px;
	z-index:-2;	
    background-color:#f2f2f2;
	background-image: url("../images/triangle-white.png");
	background-attachment:fixed;
	background-repeat:no-repeat;
	background-position:center-right;
	background-size:cover;

}

#services2-container{
	background-color:#f2f2f2;
	padding:50px 0px 50px 0px;
	 background-color:#f2f2f2;
	background-image: url("../images/triangle-white.png");
	background-attachment:fixed;
	background-repeat:no-repeat;
	background-position:center-right;
	background-size:cover;
}

#testimonials-title{
	padding-top:70px;
}

.icon-service{
	margin-top:-30px;
}

.icon-service:hover{
	transform: rotate(-5deg);
}

.service-item{
	background-color:#fff;
	padding:0px 20px 30px 20px;
	letter-spacing:1px;
	font-size:17px;
}

.service-details{
	background-color:#f2f2f2; color:#595959; line-height:25px; padding:20px;
}




/*INFO1 SECTION*/
#info1-container{
	padding-top:100px;
	text-align:center;
	z-index:300;
	background-image: url("../images/triangle-2.png");
	background-attachment:fixed;
	background-repeat:no-repeat;
	background-position:center-left;
	background-size:cover;
}

.testimonials{
	background-color:rgba(255,255,255,1);
	padding:20px 30px 50px 30px;
	border-radius:55px 5px 55px 5px;
	margin-top:40px;
}

p.testimonial{
	font-size:17px;
	letter-spacing:1px;
}


@-webkit-keyframes backgroundScroll {
from {background-position: 0 0;}
to {background-position: -400px 0;}
}
 
@keyframes backgroundScroll {
from {background-position: 0 0;}
to {background-position: -200px 0;}
}


/*INFO2 SECTION*/
#info2-container{
	padding-top:100px;
	text-align:center;
	z-index:300;
	padding-bottom:200px;
	background-image: url("../images/triangle-2.png");
	background-attachment:fixed;
	background-repeat:no-repeat;
	background-position:center-left;
	background-size:cover;
}

.img-step{
	max-width:88%;
	margin:auto;
}
	
	/*BANNER CTA*/
	#cta-banner{
		background-color:#303030;
		margin-top:0px;
		padding:30px 30px 00px 30px;
		z-index:4;
			background: linear-gradient(-45deg, rgba(204, 34, 0,1),rgba(10, 20, 81,1));
	background-size: 400% 400%;
	-webkit-animation: gradient 10s ease infinite;
	 animation: gradient 15s ease infinite;		
	 opacity:0.9;
	}
	
/*CONTACT SECTION*/
	#contact-info{
		padding:50px 20px;
		background-color:rgba(255,255,255,1);
	}
	
	#contact-info p{
		font-size:18px;
		letter-spacing:1.5px;
		font-weight:400;
	}
	
	#contact-info h4{
		font-size:20px;
		letter-spacing:1.5px;
		font-weight:400;
		color:#fff;
		background-color:#111;
		padding-bottom:20px;
	}
	
/*FORM*/

input{
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 6px 10px 0 rgba(0, 0, 0, 0.1);
	border:0px solid #fff;
	border-top-style: hidden;
	border-right-style: hidden;
	border-left-style: hidden;
	border-bottom-style: groove;
	background-color: #eee;
	font-weight:400;
	height:40px;
	color:#ccc;
	font-size:10px;
}

.form-control{
	border:0px !important;
}

.no-outline:focus {
  outline: none;
}

.form-container{
	margin:auto;
	padding:15px 40px 30px 40px;
	max-width:600px;
	border-radius:5px;
	background-color:rgba(255,255,255,1);
	margin-top:-150px;
}


/*CONTACT SECTION*/
	#contact-container{
		padding:0px;
		text-align:center;
	}

	#contact-text{
		padding:10px 0px 20px 25px;
	}
	
	.color-font{
	  background: linear-gradient(to right, #7927b2, #fb3182);
	  -webkit-background-clip: text;
	  -webkit-text-fill-color: transparent;
	  text-transform: uppercase;
	  font-weight:900;
	}
	
	#map{
		width:100%;
		height:100%;
	}
	
/*FOOTER*/
#footer-container{
	/*Footer Container Colors*/
	background-color:#111;
	color:#FFF;	
	text-align:center;
	font-size:17px;
	padding: 15px;
}



#footer-addventure
{
	padding:15px;
	font-size:17px;
	text-align:center;
	background-color:#fff;
	
}

.autor-sitio{font-size:14px; color:#333; font-weight:400;}

#footer-addventure a{
	color:#333;
	font-size:14px;
	text-decoration:none;
}


#thankyou-container {
	background: linear-gradient(-45deg, rgba(229, 129, 0,0.7),rgba(204, 34, 0,0.7),rgba(0, 183, 229,0.7),rgba(10, 20, 81,0.7));
	background-size: 400% 400%;
	-webkit-animation: gradient 15s ease infinite;
	animation: gradient 15s ease infinite;			
	padding-top:180px;
	 min-height: 100%;
}

/*PRIVACIDAD*/
#privacy-container{
  padding: 100px 0px 50px 0px;
}

#navbar-clear {
  position: fixed;
  background-color: #fff;
}

#navbar-clear a{
  color:#111;
}

/*INVESTUIGADOR*/
#incognitoform-container{
  padding-top: 90px;
}

@charset "UTF-8";
:root {
  --width: 100vw;
  --full-width: 100vw;
  --angle: -11deg;
  --magic-number: 0.09719;
  --skew-padding: calc(var(--width) * var(--magic-number));
  --clip-padding: calc(var(--full-width) * var(--magic-number));
}
@media (min-width: 42em) {
  :root {
    --width: 42rem;
  }
}

.diagonal-box {
  position: relative;
  padding: var(--skew-padding) 0;
  margin-top: -1px;
  	background-image: url("../images/triangle-white.png");
	background-position:center;
	background-attachment:fixed;
	background-repeat:no-repeat;
}
.diagonal-box:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  transform: skewy(var(--angle));
  transform-origin: 50% 0;
  outline: 1px solid transparent;
  backface-visibility: hidden;
}

.bg-one:before {
	background-image: linear-gradient(-135deg, #00b4db, #31258e, #00b4db);
	background-size: 400% 400%;
	-webkit-animation: gradient 10s ease infinite;
	 animation: gradient 15s ease infinite;		
	 opacity:0.9;
}

.bg-two:before {
  background-image: linear-gradient(-135deg, #0166ff, #05b382, #4c0494, #e13500 );
}

.bg-three:before {
  background-image: linear-gradient(-135deg, #007, #003);
}

.content {
  max-width: var(--width);
  margin: 0 auto;
  padding: 1.5em;
  position: relative;
  /* -----------
  enable the border to see, that the content
  perfectly fits into the section withou
  bleeding into the adjecting areas:
  ------------ */
}

/* --------------------
Clip Path Update
-------------------- */
.clip-path {
  position: relative;
  margin-top: calc((var(--clip-padding) * -1) - 2px);
  background-image: linear-gradient(rgba(0, 0, 0, 0.05) 50%, 0, transparent 100%), linear-gradient(-135deg, #0cc, #066);
  background-size: 0.5em 0.5em, 100% 100%;
  padding: calc( (var(--clip-padding) * 2) - (var(--clip-padding) - var(--skew-padding)) ) 0 4em;
  clip-path: polygon(0% calc(var(--clip-padding) * 2), 100% 0%, 100% 100%, 0% 100%);
  -webkit-clip-path: polygon(0% calc(var(--clip-padding) * 2), 100% 0%, 100% 100%, 0% 100%);
}

/* --------------------
Presentational Styles 
-------------------- */
*,
*:before,
*:after {
  box-sizing: border-box;
}


.intro {
  font-size: 1.25em;
  transform: skewY(var(--angle));
  margin: 0em auto 0em;
  text-align: center;
  background: #fff;
  color: #003;
  font-weight: 900;
  padding: 0.5em;
  text-transform: uppercase;
}

p {
  font-size: 1.25em;
  margin: 0;
  line-height: 1.5;
}
p + p, svg + p {
  margin-top: 1em;
}
p code {
  background: #0033;
  padding: 0.125em 0.375em;
  border-radius: 0.125em;
}
@media (min-width: 35em) {
  p code {
    white-space: nowrap;
  }
}
p a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(transparent 90%, 0, #fffa 100%);
  padding: 0.125em 0;
  transition: opacity 0.3s ease-out;
}
p a:hover {
  text-decoration: none;
  opacity: 0.8;
}

.columns {
  display: flex;
  margin: 2em -1em;
}

.figure {
  display: block;
  width: 100%;
  margin: 0 1em;
}
.figure svg {
  display: block;
  width: 100%;
}
.figure .object {
  transform-origin: 140px 140px;
}
.figure .object--rotate {
  animation: rotate 3s ease-in-out alternate infinite;
}
.figure .object--skew {
  animation: skew 3s ease-in-out alternate infinite;
}
.figure .object--skew-pause {
  animation: skew-pause 6s ease-in-out infinite;
}
.figure .object--skew-pause-alt {
  animation: skew-pause-alt 6s ease-in-out infinite;
}
.figure figcaption {
  margin-top: 0.5em;
  line-height: 1.5;
  font-weight: 700;
  opacity: 0.9;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-11deg);
  }
  100% {
    transform: rotate(-11deg) scaleX(1.2);
  }
}
@keyframes skew {
  to {
    transform: skewY(-11deg);
  }
}
@keyframes skew-pause {
  0%,
  70%,
  100% {
    transform: skewY(0deg);
  }
  20%,
  50% {
    transform: skewY(-11deg);
  }
}
@keyframes skew-pause-alt {
  0%,
  40%,
  100% {
    transform: skewY(0deg);
  }
  20%,
  30% {
    transform: skewY(-11deg);
  }
}
.formula {
  font-family: monospace;
  font-size: 1.5em;
  display: block;
  margin: 1em auto;
  text-align: center;
}
@media (min-width: 26em) {
  .formula {
    font-size: 2em;
  }
}


/* ---------------------------------
   Interactive Controls
--------------------------------- */
.controls {
  background: #fff3;
  z-index: 5;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 0 0 0.5em 0.5em;
  max-width: 90%;
}
.controls__headline {
  color: #fff;
  margin: 0.75em 1.125em 0.625em;
  font-size: 1em;
  text-align: center;
  font-weight: 400;
}

.angle-control {
  padding: 0.75em 0.625em 0.625em;
  margin: 0 0.5em;
  font-size: 1em;
  border-top: 1px solid #fff3;
  display: flex;
}
.angle-control > * {
  vertical-align: middle;
  margin: 0 0.5em;
}
.angle-control span {
  display: inline-block;
  min-width: 6ch;
}
.angle-control input {
  width: 8em;
  flex-shrink: 1;
}

.result {
  text-align: right;
}

[hidden] {
  display: none;
}


/*LOGOS*/
/* Slider */

.slick-slide {
    margin: 0px 20px;
}

.slick-slide img {
    width: 100%;
}

.slick-slide img:hover{
	transform: rotate(-5deg);
}

.slick-slider
{
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;
    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

.blurred-box{
  background: inherit;
  border-radius: 2px;
  overflow: hidden;
}

.blurred-box:after{
	content: '';
 box-shadow: inset 0 0 0 200px rgba(255,255,255,0.05);
 filter: blur(10px);
}


/*MENU MOBILE*/
/* Style the navigation menu */
.topnavmob {
  overflow: hidden;
  background-color: #333;
   position: fixed;
   width:100%;
   z-index:2000;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnavmob #myLinks {
    display: none;
    margin-top: 70px;
}

/* Style navigation menu links */
.topnavmob a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
  border-bottom: 1px #ccc solid;
}

/* Style the hamburger menu */
.topnavmob a.icon {
    /*  background: #fff;*/
    display: block;
    position: absolute;
    top: 0;
    margin-top: 10px !important;
    margin-left: 5px !important;
}

/* Add a grey background color on mouse-over */
.topnavmob a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the active link (or home/logo) */
.active {
  background-color: #4CAF50;
  color: white;
}

#img-logo-mobile{
	height:70px;
	padding:8px 10px;
}

@-webkit-keyframes uparrow {
  0% { -webkit-transform: translateY(0); opacity: 0.4 }
  100% { -webkit-transform: translateY(-0.4em); opacity: 0.9 }
}
@-webkit-keyframes downarrow {
  0% { -webkit-transform: translateY(0); opacity: 0.4 }
  100% { -webkit-transform: translateY(0.4em); opacity: 0.9 }
}

@arrow-size: 20vw;
body{
  background-color: beige;
  animation: paint 10s ease-in-out infinite;
}


#arrowAnim {
  width:100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index:1;
  padding-top:50px;
}

.arrow {
  width: 1vw;
  height: 2vw;
  border: 1vw solid;
  border: 1vw solid;
  border-color: #ccc transparent transparent #ccc;
  transform: rotate(135deg);
}


.arrowSliding {
  position: absolute;
  -webkit-animation: slide 6s linear infinite; 
          animation: slide 6s linear infinite;
}

.delay1 {
  -webkit-animation-delay: 1s; 
    animation-delay: 1s;
}
.delay2 {
  -webkit-animation-delay: 2s; 
    animation-delay: 2s;
}
.delay3 {
  -webkit-animation-delay: 3s; 
    animation-delay: 3s;
}

@-webkit-keyframes slide {
    0% { opacity:0; transform: translateX(15vw); }	
   20% { opacity:1; transform: translateX(9vw); }	
   80% { opacity:1; transform: translateX(-9vw); }	
  100% { opacity:0; transform: translateX(-15vw); }	
}
@keyframes slide {
    0% { opacity:0; transform: translateX(-15vw); }	
   20% { opacity:1; transform: translateX(-9vw); }	
   80% { opacity:1; transform: translateX(9vw); }	
  100% { opacity:0; transform: translateX(15vw); }	
}




/*MOBILE*/
@media screen and (max-width: 950px) {

		
	/*DEVICE VISIBILITY*/
		.mobile{
				display:block;
			}
		.pc{
				display:none;
		}
		
    	/*FLOATING BUTTONS*/

      .float-fbmessenger{
        bottom:45px;
        right: 65px;
      }
      

		h1{
			font-weight:700;
			font-size: 10vw;
			line-height: 12vw;
			letter-spacing:2px;
			font-family: 'Montserrat', sans-serif;
			
		}
		
		h2{
			font-size:26px;
		}
		
		#main-container {
			padding-top: 150px;
		}
		
		.form-container{
			margin-top: 50px;
			 padding: 15px 20px 30px 20px;
		}
		
		#contact-info p{ font-size:16px;}
		
		.btn{
			font-size:14px;
			padding: 10px 20px;
		}
}