body,html{
  margin:0;
  padding:0;
  box-sizing: border-box;
}
body{
  font-family: 'Raleway', sans-serif; font-size: 16px; color:#333; font-weight: 400;
}
a{
  color:#2a2075; text-decoration: none;
}
h1,h2,h3,h4,h5{
  font-weight: 700;
}
.relative{
  position: relative;
}

/* header */
.topBorder{
  height:auto;
  background-color: #fff;
  color:#090431;
  padding:16px;
}
.topBorder a{
  color:#090431;
}
.topBorder .social{
  font-size:20px;
}
.topBorder .social a{
  display: inline-block;
  margin-right: 10px;
}
.topBorder .contacto a{
  margin-right: 25px;
}

.areaMenu{
  display: block;
  width:100%; height: auto; overflow-y: auto;
  background-color: #fff;
}
/* header{
  position:fixed;
  top:0; left:0;
  width:100%;
  justify-content: space-between;
  z-index:10000;
  text-align: center;
} */
header{
  width:100%; height: auto; overflow: auto;
  text-align: center;
}
.areaLogo{
  display: block;
  width:auto; height: auto; overflow: auto;
  background-color: #090431;
}
.areaLogo img{
  display: block;
  width:100%; max-width: 350px;
  margin:0 auto;
  padding:6px;
}
header nav{
  display: inline-block;
}
header nav ul{
  list-style: none;
  margin:0;
  padding:0;
  display:flex;
  align-content: center;
}
header nav ul li{
  align-self:flex-start;
}
header nav ul li a{
  display: inline-block;
  padding:20px;
  font-weight: 700;
}

/* Banner */

.banner{
  position: relative;
  width:100%;
  min-height: 100vh;
  padding-top: 140px;
}
.banner .imgBx{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.banner .imgBx img{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit: cover;
  opacity:0;
  transition:0.5s;
  background-position: center;
  filter: brightness(50%);
}
.banner .imgBx img.active{
  opacity: 1;
}
.controls{
  margin:0; padding:0;
  position: absolute;
  top:50%;
  transform: translateY(-50%);
  right:0;
  width:80px;
}
.controls li{
  position: relative;
  width:80px; height:80px;
  background-color: #fff;
  list-style: none;
  display:flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.controls li:hover{
  background-color: #ff6f00;
}
.controls li:before{
  content: '';
  position: absolute;
  width:20px; height:20px;
  border-left: 3px solid #666;
  border-bottom: 3px solid #666;
  transform: rotate(45deg);
}
.controls li:nth-child(2):before{
  transform: rotate(225deg);
}

/* Contents */

.contentBx{
  position: absolute;
  display: flex;
  left:0; right:0; top:0; bottom:0;
  justify-content: center;
  align-items: center;
}
.contentBx div{
  display: none;
}
.contentBx div.active{
  align-self: center;
  display: block;
  padding:50px;
  text-align: center;
}
.contentBx div h3{
  color:#fff; text-align: center; text-transform: uppercase; font-size: 1.1em;
  margin:0 0 20px 0;  
}
.contentBx div h2{
  color: #fff; text-align: center; letter-spacing: 1px;
  font-size: 3em; font-weight: 700;
  margin:0 0 20px 0;
  padding:0;
}
.contentBx div h2 strong{
  color:#ff6f00;
}
.contentBx div p{
  color: #fff; text-align: center;
}

/* .contentBx{
  position: absolute;
  bottom: 0%;
  max-width:700px;
}
.contentBx div{
  display: none;
}
.contentBx div.active{
  display: block;
  padding:30px;
  margin-left: 30px;
  background: rgba(0, 0, 0, 0.5);
}
.contentBx div h2{
  color: #fff;
  font-size: 2em; font-weight: 700;
  margin:0;
  padding:0;
}
.contentBx div p{
  color: #fff;
} */

h1.title{
  font-weight: 700;
  margin: 60px 0;
}
h1.title:after{
  content:'';
}


/* Servicios */

.areaServicio {
  position: relative;
  height: 350px;
  margin-bottom: 30px;
}
.areaServicio img{
  width:100%; height:100%;
  object-fit: cover;
  filter: brightness(50%);
  transition: all ease 0.3s;
}
.areaServicio:hover img{
  transform: scale(1.02);
}
.areaServicio .areaInfo{
  position: absolute;
  left:0; right:0; top:0; bottom: 0;
  padding:10px 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.areaServicio .areaInfo h2{
  color:#fff; font-weight: 700;
}

section#servicios{
  padding: 4em 10px;
}

section#proyectos{
  position: relative;
  padding:14em 10px;
  background: linear-gradient(
    rgba(0, 0, 0, 0.5), 
    rgba(0, 0, 0, 0.5)
  ),
  url(../../images/web/home_proyectos.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
section#proyectos .container{
  color:#fff;
  z-index: 1000;
}

section.bg-pattern{
  background: url(../../images/web/what-the-hex.png) repeat fixed;
}

/* Buttons */

.btn{
  border:none;
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  padding:30px;
  text-transform: uppercase;
}
.btn-success{
  background: #090431;
  color:#fff;
}
.btn-success:hover{
  background: #11008f;
  color:#fff;
}
.btn .fa,
.btn .fas{
  margin-right: 6px;
}
/* Contacto */

form{
  padding-top: 40px;
}
.input-group{
  position: relative;
  margin-bottom: 35px;
}
.input-group label{
  position: absolute;
  left:0; top:0;
  padding:10px;
  color:#666; font-size: 0.9em;
  cursor: text;
  transition: 0.2s;
}
.input-group input, 
.input-group textarea{
  display: block;
  width:100%;
  padding:10px;
  outline:0;
  border: solid 1px #ccc;
  color:#333; font-size: 15px;
  background: transparent;
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
}
form button{
  padding:10px 0;
  color:#666;
  outline:none;
  background: transparent;
  border: solid 1px #0e0b0b;
  width:100%;
  cursor:pointer;
}
.input-group input:focus,
.input-group textarea:focus{
  background: transparent;
}
.input-group input:focus~label,
.input-group textarea:focus~label{
  top:-40px;
  font-size: 14px;
}
.input-group input:valid~label,
.input-group textarea:valid~label{
  top:-40px;
}

/* Datos de contacto */

.datosContacto{
  position: absolute;
  right:0; top:15%;
  width:45%;
  float:right;
  background-color: #333;
  color:#fff;
  padding:4em 3em;
}
.datosContacto .container{
  z-index: 200;
}
.datosContacto h2{
  margin-bottom: 1em;
}
.datosContacto a{
  color:#fff;
}
.datosContacto .dato{
  display: flex;
  justify-content: start;
  align-items: flex-start;
  margin-bottom: 40px;
}
.datosContacto .dato .fa,
.datosContacto .dato .fas{
  font-size: 1.5em;
  display: block;
  width:50px;
  flex-shrink: 0;
}
.rightBar{
  position: absolute;
  top:0; bottom:0; right:0; 
  width:150px;
  background-color: #090431;
}

.areaMapa{
  position: relative;
  display: block;
  width:100%; height: 450px;
  padding:20px;
  z-index: 1000;
}
.areaMapa iframe{
  display: block; width:100%; height: 100%;
}

/* Footer */

footer{
  position: relative;
  padding:6em 10px;
  background-color: #090431;
  color:#f1f1f1; font-size: 0.8em;
}
footer a{
  color:#fff;
}
footer h3{
  font-size: 1em; text-transform: uppercase;
  color:#7269b3;
  margin-bottom: 20px;
}

footer .flex-container{
  display: flex;
  justify-content: space-between;
}
footer .flex-container .info{
  align-items: flex-start;
  flex-shrink: 1;
}

.headerSection{
  position: relative;
  width:100%; height:500px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.headerSection .areaImg{
  position: relative;
  width: inherit; height: inherit;
}
.headerSection .areaImg img{
  width:100%; height:500px;
  object-fit: cover;
  filter: brightness(50%);
}
.headerSection .areaInfo{
  position: absolute;
  z-index: 100;
  color:#fff; text-transform: uppercase; letter-spacing: 2px;
  text-shadow: 0px 0px 5px #000000;
}

.areaContenido p{
  text-align: justify;
}
.imagenContenido{
  position: absolute;
  right:0; top:15%;
  width:45%;
  float:right;
  background-color: #333;
  color:#fff;
  padding:0; margin:0;
}
.imagenContenido img{
  width:100%; height:100%;
  object-fit: cover;
}

section#mision{
  position: relative;
  padding:14em 10px;
  background: linear-gradient(
    rgba(0, 0, 0, 0.7), 
    rgba(0, 0, 0, 0.7)
  ),
  url(../../images/web/home_proyectos.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color:#fff;
}
section#vision{
  position: relative;
  padding:14em 10px;
  background: linear-gradient(
    rgba(0, 0, 0, 0.7), 
    rgba(0, 0, 0, 0.7)
  ),
  url(../../images/web/servicios_06.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color:#fff;
}
section#footContent{
  background-color: #090431;
  color:#f1f1f1;
  padding:5em 10px;
}