@charset "UTF-8";
/* CEP - CSS - © 2019 4toestudio.com */

/*==== webFonts ====*/
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700&display=swap');


/*==== Basic stuff ====*/
body {
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	font-weight: 300;
	background: #f2f2f2;
	color: #000;
	margin: 0; padding: 0;
}

div { margin: 0; padding: 0;}
img { max-width: 100%; height: auto; border: none; vertical-align: top;}

a {
	-webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;}
	
a:link, a:visited { color: #52aac6; text-decoration: none;}
a:hover, a:active { color: #999; text-decoration: none;}


/*===== the Wrappers =====*/
.theWrapper { width: 80%; max-width: 1100px; margin: 0 auto; overflow: hidden;}
.theSmallWrapper { width: 70%; max-width: 700px; margin: 0 auto; overflow: hidden;}
.theBigWrapper { width: 90%; max-width: 1240px; margin: 0 auto; overflow: hidden;}
.justWrapp { width: 100%; overflow: hidden;}
.contentX50 { width: 80%; max-width: 550px; margin: 50px auto;}


/*===== cols =====*/
.colX2 { width: 45%; margin: 0 5% 0 0; float: left;}
.colX3 { width: 30%; margin: 0 1.5%; float: left;}
.colX4 { width: 22%; margin: 0 1.5%; float: left;}
.colX50 { width: 50%; float: left;}



/*===== ghostBlue =====*/
.ghostBlue { margin: 10px 0;}

.ghostBlue a {
	font-size: 16px;
	font-weight: 400;
	color: #12385f;
	display: block;
	padding:  10px 2%;
	border: solid 1px #12385f;
	text-decoration: none;
	line-height: 1em;
	text-align: center;
	width: 94%;
	max-width: 250px;
}
	
.ghostBlue a:link, .ghostBlue a:visited { color: #12385f;}
.ghostBlue a:hover, .ghostBlue a:active { color: #fff; background: #12385f;}



/*===== blueBTN =====*/
.blueBTN { margin: 20px 0;}

.blueBTN a {
	font-size: 14px;
	font-weight: 400;
	color: #fff;
	display: block;
	padding:  10px 2%;
	background: #072660;
	text-decoration: none;
	line-height: 1em;
	text-align: center;
	width: 94%;
	max-width: 250px;
}
	
.blueBTN a:link, .blueBTN a:visited { color: #fff;}
.blueBTN a:hover, .blueBTN a:active { color: #fff; background: #444;}



/*===== whiteBTN =====*/
.whiteBTN { margin: 20px 0;}

.whiteBTN a {
	font-size: 18px;
	font-weight: 400;
	color: #072660;
	display: block;
	padding:  10px 2%;
	background: #fff;
	text-decoration: none;
	line-height: 1em;
	text-align: center;
	width: 94%;
	max-width: 250px;
}
	
.whiteBTN a:link, .whiteBTN a:visited { color: #072660;}
.whiteBTN a:hover, .whiteBTN a:active { color: #fff; background: #072660;}



/*===== Headings =====*/
h1, h2, h3, h4, h5 { font-weight: 900; line-height: 1.2em;}
h1 { font-size: 40px;}
h2 { font-size: 30px; margin: 0;}
h3 { font-size: 28px;}
h4 { font-size: 16px; margin: 0;}
h5 { font-size: 14px;}


/*===== goBold =====*/
.goBold { font-weight: 900;}

/*===== titleBox =====*/
.titleBox { width: 100%; margin: 0 0 40px 0; padding: 24px; background: url(images/HeadBox.png) no-repeat top left;}
.titleBox h2 { font-size: 30px; font-weight: 400; max-width: 850px; margin: 0 0 5px 0;}
.titleBox h5 { font-size: 16px; margin: 0; font-weight: 400;}

/*===== colorBoxes =====*/
.whiteBox { background: #fff;}
.lightBlueBox { background: #c0d4e8;}
.blueBox { background: #072660; color: #fff;}



/*===== Header =====*/
#header { width: 100%; height: 80px; background: #fff; position: fixed; top: 0; z-index: 9999; overflow: hidden;}
#header div { overflow: hidden;}

/*===== Logo =====*/
#logo { width: 20%; padding: 5px 0; float: left;}
#logo img { max-width: 105px;}

/*===== Nav =====*/
#nav { width: 80%; float: right; font-size: 16px; color: #444; font-weight: 400; text-transform: uppercase;}
#nav ul { list-style-type: none; margin: 0; padding: 0;}
#nav li a { display: block; float: right; padding: 30px 15px;}

#nav li a:link, #nav li a:visited { color: #444;}
#nav li a:hover, #nav li a:active { color: #fff; background: #8391ac;}
#nav li.current-menu-item a { color: #fff; background: #8391ac;}



/*===== HeroBox =====*/
#HeroBox { width: 100%; background: #444; overflow: hidden; position: relative;}
#HeroBox img { vertical-align: top;}

/*===== HeroContent =====*/
#HeroContent { 
	width: 80%;
	max-width: 350px;
	text-align: center;
	position: absolute;
	top: 35%;
	left: 15%;
	color: #fff;
	z-index: 999;
}

#HeroContent h1 { font-size: 48px; margin: 10px 0; line-height: 1em;}
#HeroContent h4 { font-size: 18px; text-transform: uppercase;}
#HeroContent .blueBTN a { font-size: 18px; margin: 0 auto;}



/*===== IntroBox =====*/
#IntroBox { width: 100%; padding: 50px 0; overflow: hidden;}
#IntroBox div { overflow: hidden;}


/*===== theTagline =====*/
#theTagline { width: 100%; padding: 50px 0; text-align: center; font-size: 24px; overflow: hidden;}


/*===== ProjectBox =====*/
#ProjectBox { width: 100%; padding: 50px 0; overflow: hidden;}
#ProjectBox div { overflow: hidden;}


/*================================ 
	theProject (overlay stuff)
==================================*/
.theProject { width: 31.5%; margin: 0 1.5% 0 0; float: left;}

.container{
  padding: 1em 0;
  float: left;
  width: 100%;
}
@media screen and (max-width: 640px){
  .container{
    display: block;
    width: 100%;
  }
}

@media screen and (min-width: 900px){
  /*.container{
    width: 33.33333%;
  }*/
}

.container .title{
  color: #1a1a1a;
  text-align: center;
  margin-bottom: 10px;
}

.content {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: auto;
  overflow: hidden;
}

.content .content-overlay {
  background: rgba(3,85,153,0.7);
  position: absolute;
  height: 99%;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}

.content:hover .content-overlay{
  opacity: 1;
}

.content-image{
  width: 100%;
}

.content-details {
  position: absolute;
  text-align: center;
  padding-left: 1em;
  padding-right: 1em;
  width: 100%;
  top: 50%;
  left: 50%;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.content:hover .content-details{
  	top: 50%;
  	left: 50%;
  	opacity: 1;
}

.content-details h3 {
	color: #fff;
  	font-size: 16px;	
  	font-weight: 500;
  	letter-spacing: 0.1em;
  	margin-bottom: 0.5em;
	padding: 0 4%;
  	text-transform: uppercase;
}

.content-details p {
  	color: #fff;
  	font-size: 0.8em;
}

.fadeIn-bottom{
  	top: 80%;
}

.fadeIn-top{
  	top: 20%;
}

.fadeIn-left{
  	left: 20%;
}

.fadeIn-right{
	left: 80%;
}



/*===== c2a =====*/
#c2a { 
	width: 100%;
	padding: 50px 0;
	background: #4d596f url(images/bckHero-building.jpg) no-repeat center center fixed;
	background-size: cover;
	color: #fff;
	overflow: hidden;
}

/*===== c2a (tag) =====*/
#c2a-Tag { width: 50%; margin: 0 5% 0 0; float: left;}
#c2a-Tag h3 { font-weight: 300;}

/*===== c2a (btn) =====*/
#c2a-BTN { width: 45%; margin: 50px 0; float: left;}


/*===== Footer =====*/
#footer { width: 100%; padding: 40px 0;}
#footer h3 { font-size: 18px; color: #5b5b5b; text-transform: uppercase; margin: 0 0 20px 0;}

#footer a:link, #footer a:visited { color: #000;}
#footer a:hover, #footer a:active { color: #000;}

/*===== (bott) Logo =====*/
#bott-Logo {}
#bott-Logo img { max-width: 100px;}

/*===== Copyright =====*/
.copyright { font-size: 12px;}



/*================================ 
	Nosotros
==================================*/

/*===== titleHero =====*/
#titleHero {
	width: 100%;
	padding: 120px 0 40px 0;
	background: #f2f2f2 url(images/titleHero-bck.png) no-repeat bottom right;
	text-align: center;
}

#titleHero h1 { font-size: 34px; color: #000; text-transform: uppercase;}

/*===== breadBox =====*/
#breadBox { width: 100%; font-size: 12px; font-weight: 400; text-transform: uppercase;}
#breadBox a:link, #breadBox a:visited { color: #000;}
#breadBox a:hover, #breadBox a:active { color: #072660;}



/*===== Equipo =====*/
#equipo { width: 100%; padding: 50px 0; overflow: hidden;}
#equipo .theWrapper { max-width: 960px;}
#equipo div { overflow: hidden;}

/*===== team (Intro) =====*/
#team-Intro { width: 60%; margin: 0 5% 0 0; float: left;}

/*===== team (sidePic) =====*/
#team-sidePic { width: 35%; float: right;}

/*===== theTeam =====*/
#theTeam { width: 100%; margin: 40px auto;}


/*===== Misión =====*/
#mision { width: 100%; padding: 50px 0; overflow: hidden;}
#mision .theWrapper { max-width: 960px;}
#mision h3 { font-size: 22px;}


/*===== Clientes =====*/
#clientes { width: 100%; padding: 70px 0; text-align: center;}
#clientes .theWrapper { max-width: 900px;}
#clientes h2 { font-size: 34px; padding: 25px 0; background: url(images/head-topStroke.png) no-repeat top center;}


/*===== clientBox =====*/
#clientBox { width: 100%; margin: 40px auto; color: #072660; text-align: left; font-weight: 400;}
#clientBox ul { margin: 10px 0; padding: 0 0 0 15px;}



/*================================ 
	Project (stuff)
==================================*/

/*===== ProjectBox =====*/
#theProject { width: 100%; padding: 50px 0;}

/*===== ProjectBox =====*/
#ProjectFacts { width: 25%; margin: 0 5% 0 0; float: left;}
#ProjectFacts h5 { font-size: 16px;}


/*===== goGreen =====*/
.goGreen { 
	max-width: 200px;
	margin: 20px 0;
	padding: 10px;
	background: #6d9931;
	color: #fff;
	text-align: center;
	font-size: 14px
}

.goGreen::after { content: "TERMINADO";}


/*===== goSilver =====*/
.goSilver { 
	max-width: 200px;
	margin: 20px 0;
	padding: 10px;
	background: #999;
	color: #fff;
	text-align: center;
	font-size: 14px
}

.goSilver::after { content: "EN EJECUCIÓN";}


/*===== ProjectSlides =====*/
#ProjectSlides { width: 70%; float: right;}



/*===== MoreProjects =====*/
#MoreProjects { width: 100%; padding: 50px 0; background: #e6e9ef;}

#MoreProjects h3 {
	font-size: 34px;
	margin: 10px 0;
	padding: 25px 0;
	text-align: center;
	background: url(images/head-topStroke.png) no-repeat top center;}

#MoreProjects .content-details h3 { font-size: 18px;}

/*===== ContentBox =====*/
#ContentBox { width: 100%; padding: 50px 0;}

#ContentBox h2 { 
	font-size: 24px;
	color: #072660;
	margin: 0 0 40px 0;
	padding: 0 0 5px 0;
	border-bottom: solid thin #ccc;
}

#ContentBox .colX3 h2 { margin-top: 0;}

#ContentBox h4 { color: #444; margin: 0 0 20px 0;}
#ContentBox h5 { color: #7788a8;}

#ContentBox ul { margin: 20px 0; padding: 0 0 0 15px;}



/*===== (RS) Custom stuff =====*/
.royalSlider,
.royalSlider .rsOverflow,
.royalSlider .rsSlide,
.royalSlider .rsVideoFrameHolder,
.royalSlider .rsThumbs {
    background: transparent !important;
}




/*===============================================================
  Forms (stuff)
=================================================================*/
.ninja-forms-required-items { display: none;}

/*===== Contact =====*/
#ninja_forms_form_1, #ninja_forms_form_5 { max-width: 600px; margin: 0 auto;}
#ninja_forms_form_1 input, #ninja_forms_form_1 textarea, #ninja_forms_form_1 select {
	width: 99%;
	padding: 2%;
	font-family: 'Lato', sans-serif !important;
	font-size: 16px;
	font-weight: 300;
	color: #444;
	border: none;
	border-bottom: dotted 1px #b3b3b3;
	background: none;
	-webkit-appearance: none;
}


/*===== Form BTN =====*/
.formBTN-wrap { margin: 20px 0 10px 0 !important;}

input.formBTN { 
	width: 90% !important;
	max-width: 320px !important;
	background: #072660 !important;
	color: #fff !important;
	border: none;
	padding: 2% 10% !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-appearance: none;
   	-moz-appearance:    none;
	-webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;}

input.formBTN:hover { background: #444 !important; color: #fff;}