@import "https://fonts.googleapis.com/css?family=Karla";
* {
  box-sizing: border-box;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-4px, 3px) ;
    transform: rotate(-45deg) translate(-4px, 3px) ;
  }
  .change .bar2 {opacity: 0;}
  .change .bar3 {
    -webkit-transform: rotate(45deg) translate(-5px, -5px) ;
    transform: rotate(45deg) translate(-5px, -5px) ;
  }

  .bar1 , .bar2 , .bar3 {
  width: 22px;
height: 3px;
background-color: #000;
margin: 3px 0;
transition: 0.4s;
}

html{
	overflow-x: hidden;
}
body {
	width:100%;
	/*max-width:1920px;*/
	margin:0 auto;
	padding:0;
}

h1, h2, h3, h4, h5, h6 {
  color: #444;
}

.head-page {
  position: relative;
  padding: 20px 0 20px 0;
  -webkit-transform-style: preserve3d;
          transform-style: preserve3d;
  -webkit-perspective: 3000px;
          perspective: 3000px;
}

.menu {
  list-style: none;
  margin: 0;
  padding-left: 0;
  display: flex;
  justify-content: center;
}
.menu a {
  padding: 10px 10px;
  display: block;
  text-decoration: none;
  color: #000;
}
.menu__item, .menu-static {
  position: relative;
}
.menu__item:hover > .sub-menu-shadow {
  display: block;
}
.menu .sub-menu-shadow {
  position: absolute;
  display: none;
}

.dropdown-holder {
  position: absolute;
  width: 100%;
  left: 0;
  top: 100%;
}
.dropdown__bg, .dropdown__arrow {
  position: absolute;
}
.dropdown__arrow {
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #f2f1f1;
  top: -20px;
  opacity: 0;
  transition: .20s ease;
  pointer-events: none;
}
.dropdown__bg {
  width: 450px;
  height: 400px;
  background-color: #f2f1f1;
  opacity: 0;
  transition: .25s ease;
  border-radius: 5px;
  overflow: hidden;
  z-index: 9999;
}
.dropdown__bg-bottom {
  background-color: #fafafa;
  position: absolute;
  width: 100%;
  left: 0;
  top: 300px;
  height: 700px;
  transition: .3s ease;
}
.dropdown__wrap {
  overflow: hidden;
  position: absolute;
  transition: .25s ease;
  z-index: 9999;
}
.dropdown__wrap .top-section, .dropdown__wrap .bottom-section {
	padding: 20px;
	font-size:12px;
}
.dropdown-menu__content {
  position: absolute;
  opacity: 0;
  transition: .25s ease;
  min-width: 200px;
  background-color:#f2f1f1;
  z-index: 9999;
}
.dropdown-menu__content ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.dropdown-menu__content a {
  color: inherit;
  text-decoration: none;
  display: block;
  padding: 5px 0;
}
.dropdown-menu__content a:hover {
  color: #436ca9;
}
.dropdown-menu.active .dropdown-menu__content {
  opacity: 1;
}

#certificacion .dropdown-menu__content {
  width: 840px;
  text-align:left !important;
  font-weight:300;
}

#developer .dropdown-menu__content {
  width: 400px;
}

.col-2 {
  display: flex;
}
.col-2 > ul, .col-2 > div {
  flex: 1 0 150px;
}

#certificacion .col-2 li {
  display: block;
  padding: 20px 20px 10px;
}
#certificacion .col-2 li h3 {
  font-size: 18px;
  margin: 0 0 10px;
  color: turquoise;
}
#certificacion .col-2 li p {
  color: #999;
  margin: 0;
}

.menu-title {
  margin: 0 0 10px;
  font-size: 18px;
  color: #2196F3;
}

.info {
  line-height: 1.7;
}
.logo{
	width:150px;
}
#nav-test {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color:#FFF;
  text-align:center;
}
#nav-test #nav-container {
  position: relative;
  box-sizing: border-box;
  margin-left:100px;
  margin-right:50px;
  max-width:90%;
}
#nav-test #nav-container ul {
  display: flex;
  padding-left: 10px;
  padding-right: 10px;
  margin: 0;
}
#nav-test #nav-container ul li {
  display: flex;
  align-items: center;
  min-height: 50px;
  margin-left: 30px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
/*#nav-test #nav-container ul li:first-child {
  margin-left: 0;
}*/
#nav-test #nav-container ul li a {
  color: #000;
}
#nav-test #nav-container #line {
  position: absolute;
  bottom: 0;
  height: 4px;
  background: #f4c32d;
  transition: all 150ms ease-in-out;
}
#nav-test h1 {
  margin-top: 30px;
  font-weight: 500;
  color: #212121;
}
.titulo{
	font-size:24px;
	color:#436ca9;
}
.listaguion li:before{
	content: "- ";
}
#homeslide, #quienes{
	width:100%;
	height:70vh;
	background-color:#436ca9;
}
#mision{
	width:100%;
	text-align:center;
	padding:50px 0px;
	min-height:600px;
}
#quienes{
	position:relative;
	max-height:600px;
}
.descripcion{
	width:85%;
	display:inline-block;
	position:relative;
}
.img-mv{
	width:60%;
	z-index:0;
	display:none;
}
.div-text{
	position:absolute;
	width:400px;
	top:100px;
	left:50px;
	text-align:left;
	display:none;
}
.texto-prin{
	font-size:30px;
	color:#1a1e26;
	font-weight:300;
}
.texto-sec{
	color:#fece12;
	font-family: 'Roboto', sans-serif;
	font-size:18px;
	font-weight:700;
}

.tituloMision{
	font-size:22px;
	font-weight:400;
	margin-bottom:5px;
}
.caja-m, .caja-v{
	position:absolute;
	width:450px;
	box-shadow:0px 0px 5px rgba(0,0,0,.3);
	color:#1a1e26;
	font-family: 'Roboto', sans-serif;
	font-weight:300;
	font-size:14px;
	text-align:left;
	padding:20px;
	display:none;
	background-color:#FFF;
}

.caja-m{
	top:80px;
	right:0px;
	border-left:5px solid #949496;
}

.caja-v{
	top:260px;
	right:0px;
	border-left:5px solid #fece12;
}
footer{
	font-family: 'Roboto', sans-serif;
	font-size:14px;
	font-weight:300;
	color:#1a1e26;
	background-color:#e4e1e0;
	padding:50px 0;
}
#tablaFooter{
	display:table;
	width:90%;
	height:100%;
	margin:0 auto;
}
.contenidoFooter{
	display:inline-block;
	width:90%;
	text-align:left;
	margin:0 auto;
}
.textoFooter{
	display:table-cell;
	width:18%;
	height:100%;
	vertical-align:top;
	text-align:center;
}
.espacioFooter{
	display:table-cell;
	width:2.5%;
	vertical-align:top;
}
.divisorFooter{
	width:1px;
	background-color:#d5d3d2;
	height:100%;
	display:inline-block;
}
.linkFooter{
	color:#1a1e26;
}
.linkFooter:hover{
	text-decoration:underline;
	cursor:pointer;
}
#btnPonteContacto{
	background-color:#f6c401;
	display:inline-block;
	padding:10px 25px;
	text-align:center;
	transition:all .3s;
}
#btnPonteContacto:hover{
	background-color:#436ca9;
	color:#FFFFFF;
	cursor:pointer;
}
.btnPonteContacto{
	background-color:#f6c401;
	display:inline-block;
	padding:10px 25px;
	text-align:center;
	transition:all .3s;
}
.btnPonteContacto:hover{
	background-color:#436ca9;
	color:#FFFFFF;
	cursor:pointer;
}
.div-quien{
	position:absolute;
	width:350px;
	right:65%;
	top:10%;
	font-size:12px;
	color:#FFF;
	display:none;
}
.yellow-button{
	width:200px;
	color:#666666;
	padding:10px 20px;
	background-color:#f6c401;
	text-align:center;
	cursor:pointer;
	font-family:'Roboto', sans-serif;
	font-size:14px;
}
.yellow-button:hover{
	background-color:#e4e1e0;
}

.div-negro{
	width:55%;
	height:100%;
	display:inline-block;
	position:absolute;
	background-color:#12151a;
	right:0;
	min-width:500px;
}
/*AUTOMATIC SLIDER*/

.slide-cont{
	max-width:500px;
	position:absolute;
	right:10%;
	top:-100px;
	display:none;
}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 500px;
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

#menuMovil{
  display: none;
}

.dot-container{
	width:60px;
	position:absolute;
	bottom:-25px;
	right:0;
}
/* The dots/bullets/indicators */
.dot {
  height: 5px;
  width: 5px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active-dot {
  background-color: #436ca9;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
/*AUTOMATIC SLIDER*/
.texto-g{
	display:none;
	width:350px;
	font-family:'Roboto', sans-serif;
	font-weight:700;
	font-size:50px;
	color:#f6c401;
	position:absolute;
	right:25%;
	top:25%;
	line-height: 110%;
}
.div-serv{
	width:130px;
	position:absolute;
	z-index:3;
	font-size:18px;
	color:#FFF;
	/* background:url(img/right.svg); */
	background-repeat:no-repeat;
	background-size:15px;
	background-position: 80px 7px;
	bottom:150px;
	right:300px;
	font-family:'Roboto', sans-serif;
	cursor:pointer;
	transition:ease;
}
.div-serv:hover{
	transform:scale(1.1);
	background:url(img/right-h.svg);
	background-repeat:no-repeat;
	background-size:15px;
	background-position: 80px 7px;
}
/*animate*/
.right-left{animation: right-left 2s linear;}@keyframes right-left {0% { right: -100px; opacity:0.5}100% { right: 10%; opacity:1 }}
.down-up{animation: down-up 1s linear;}@keyframes down-up {0% { top: 110%; opacity:0.2}100% { top: 25%; opacity:1 }}
.left-right{animation: left-right 1s linear;}@keyframes left-right { 0% { left: 110%; opacity:0.2} 100% { left: 25%; opacity:1 }}
.spin{animation:w3-spin 2s 1 linear}@keyframes w3-spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}
.animate-fading{animation:fading 3s 1}@keyframes fading{0%{opacity:0}100%{opacity:1}}
.animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
.animate-top{position:relative;animation:animatetop 2s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.animate-left{position:relative;animation:animateleft 1s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.animate-left2{position:relative;animation:animateleft 2s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.animate-right{position:relative;animation:animateright 1s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.animate-bottom{position:relative;animation:animatebottom 1s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.animate-input{transition:width 0.4s ease-in-out}.animate-input:focus{width:100%!important}
.caja-m-animate{animation: caja-m 1s linear}@keyframes caja-m{0%{ right:-200px; opacity:0.2}100%{right:0;opacity:1}}
.caja-v-animate{animation: caja-v 1.5s linear}@keyframes caja-v{0%{ right:-200px; opacity:0.2}100%{right:0;opacity:1}}
.caja-t-animate{animation: caja-t 1.5s linear}@keyframes caja-t{0%{ left:-200px; opacity:0.2}100%{left:50px;opacity:1}}
/*end-animate*/
.letrero-home{
	display:none;
}
#btnYellow2{
	display:none;
}
@media (max-width:980px){
	#menuMovil{
	  display: block;
	}


	#nav-test{
	  display: none;
	}

	.bar1 , .bar2 , .bar3 {
	  width: 22px;
	height: 3px;
	background-color: #000;
	margin: 3px 0;
	transition: 0.4s;
	}
	#homeslide{
		height:auto;
		vertical-align:bottom;
		margin-top:57px;
		padding-top:40px;
		position:relative;
		padding-bottom:20px;
	}
	.letrero-home{
		display:block;
		position:relative;
		margin:auto;
		top:auto;
		left:0;
		right:0;
		font-size:32px;
		color:#FFF;
		width:250px;
		line-height:100%;
		text-align:center;
		margin-bottom:20px;
	}
	#mision{
		height:900px;
	}
	.descripcion{
		width:100%;
		text-align:center;
	}
	.div-text{
		display:inline-block;
		position:initial;
		width:80%;
		top:0;
		left:0;
		text-align:center;
	}
	.texto-prin {
		font-size:18px;
		line-height:100%;
	}
	.texto-sec {
		font-size:14px;
		line-height:100%;
		font-weight:500;
	}
	.img-mv{
		width:100%;
	}
	.caja-m, .caja-v {
		width:90%;
		font-size:12px;
	}
	.caja-m{
		top:500px;
		right: 10px;
	}
	.caja-v{
		top:635px;
		right: 10px;
	}
	.tituloMision {
		font-size:16px;
	}
	#quienes{
		height:800px;
		max-height:800px;
	}
	.div-negro{
		position:static;
		width:100%;
		height:350px;
		min-width:320px;
	}
	.slide-cont {
		width:70%;
		right: 0;
		left:0;
		margin:auto;
		top: -50px;
	}
	.texto-g{
		width:50%;
		margin:auto;
		left:0;
		right:0;
		font-size:28px;
		top:160px;
	}
	.div-serv{
		right:10px;
		bottom:500px;
	}
	.div-quien{
		width:90%;
		right:0;
		left:0;
		margin:auto;
		top:380px;
		text-align:center;
	}
	.yellow-button{
		margin:auto;
		display:inline-block;
	}
	#btnYellow{
		display:none;
	}
	#btnYellow2{
		display:inline-block;
	}
	#btnYellow2 a{
		text-decoration:none;
		color:#666666;
	}
	h4{
		font-size: 28px !important;
	}
	.caja-t-animate,.right-left, .down-up, .animate-left, .animate-left2{
		animation:fading 1s}@keyframes fading{0%{opacity:0}100%{opacity:1}
	}

}

/* Boton Adicional */
.procedimientoBtn {
    width: 200px;
    color: #666666!important;
    padding: 10px 20px;
    background-color: #f6c401;
    text-align: center;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    margin: 0 auto;
}
.procedimientoBtn a {
    color: #666666!important;
}
.procedimientoBtn:hover{
	background-color:#e4e1e0;
}
/*  */