/* Global Styles */
@font-face {
	font-family: 'VerelaRound';
	src: url('VarelaRound-Regular.eot'); /* IE9 Compat Modes */
	src: url('VarelaRound-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	   
	     url('VarelaRound-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('VarelaRound-Regular.svg#svgFontName') format('svg'); /* Legacy iOS */
}
html,
body {
  height: 100%;
  width: 100%;
  color:#7a7a7a;
  font-family:"VerelaRound";
}
h1, .h1, h2, .h2, h3, .h3 {
margin-top: 0px;
margin-bottom: 0;
padding: 20px 0
}
#boxWrapp{
width:100%;
max-width:1360px;
margin:0 auto;
padding:0;
overflow:hidden;
}
.build{
padding:15px 0;
margin:0;
}
.build ul{
padding:0;
margin:0;
list-style:none;
position:relative;
}

/* =============================== header ===================================== */
.header {
    background: url(../img/bghead.jpg);

    /* Full height */
    height: 100%; 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.maskHeader{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(3, 126, 189, 0.3);
}

.vert-text {
 width:100%;
  vertical-align: middle;
  text-align: center;
  padding:0 0;
  color:#fff;
  position:absolute;
  bottom:50%;
  left:50%;
  transform: translate(-50%, 50%);
-webkit-transform: translate(-50%, 50%);
-moz-transform: translate(-50%, 50%);
-ms-transform: translate(-50%, 50%);
-o-transform: translate(-50%, 50%);
}

.vert-text h1 {
  padding: 0;
  margin: 0;
  font-size: 60px;
  font-weight: 600;
  color:#fff;
}
.vert-text h2{
/*color:#426369; color original*/
/*color:#00008B; color azul oscuro*/
 color:#FFFFFF;    
 /*font-size: 48px; original*/
 font-size:40px;
}
.btnAbout{
color:#fff;
font-size:48px;
position:fixed;
bottom:5%;
left:50%;
margin-left:-44px;
}
.btnAbout:hover{
 color:#fff;   
}
.progress {
clear: both;
}
.wrapp-progress{
position:relative;  
padding-top: 24px;
}
.wrapp-progress p{
font-size:14px;
margin:0;
padding:0;
line-height:24px;
position:absolute;
left:0;
top: 0px;
}

.precent-value{
font-size:14px;
line-height:24px;
position:absolute;
right:0;
top: 0px;
}

/* ==============================================================  Menu original ======================================================= */

.navbar {
border-radius: 0px;
min-height: 86px;
margin-bottom: 0px;
width: 100%;
z-index:88;
}
a.navbar-brand {
float: left;
height: inherit;
/*original padding
padding: 18px 15px;*/
padding: 7px 7px;
font-size: 36px;
line-height: 48px;
color:#fff;
}
.navbar-inverse .navbar-brand {
color:#fff;
}
.navbar-nav > li > a {
/* modificado de 32px para tener menos espacio entre menu */
padding-top: 12px;
padding-bottom: 12px;
font-size:24px;
}
.navbar-nav > li span{
display: block;
padding: 24px 24px;
font-size: 24px;
color: #fff;
}
.navbar-inverse .navbar-nav > li > a {
color: #fff;
}
.navbar-inverse .navbar-nav > li.current > a {
text-decoration:underline;
}

/* ==============================================================  Menu con submenu ======================================================= */

/* Add a black background color to the top navigation */
.topnav {
  background-color: #2A7BB0;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 25px;
}

/* Add an active class to highlight the current page */
.active {
  /*new*/
  background-color: #00008b;
  /*background-color: #4CAF50;*/
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 25px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: fixed;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}


/* ========================================= title page ==================================== */
.line-title{
border-top: 5px solid #dedede;
height: 1px;
display: block;
position: relative;
margin:0 -15px;
padding-bottom:40px;
}

.title-page-white{
color:#7a7a7a;

}
.title-page-white h2{
display: table;
background: #fff;
position: relative;
margin: 0 auto;
top: 20px;
z-index: 77;
padding: 0 40px;
}

.title-page-gray{
color:#7a7a7a;

}
.title-page-gray h2{
display: table;
background: #f2f2f2;
position: relative;
margin: 0 auto;
top: 20px;
z-index: 77;
padding: 0 40px;
}

/* Full Page Image Header Area */

.header {
  position: relative;
 
}
.linear{
 transition:all 200ms linear;   
 -webkit-transition:all 200ms linear;   
 -moz-transition:all 200ms linear;   
 -ms-transition:all 200ms linear;   
 -o-transition:all 200ms linear;   
}
/* Intro */

.page {
  padding: 86px 0;
  position:relative;
  /*new*/
  padding: 21px 0;
  
}
.page-bgcolor{
background:#f2f2f2;
}
/* ================================================= about us ================================================== */
/*MOD HT 180509*/
.about-content p{
/*font-size:24px;*/
font-size:18px;
}
/* ============================================== Portfolio ================================================================= */
ul#filterOptions{
margin: 0;
padding: 3px 0;
list-style: none;
display: table; 
}

ul#filterOptions li{
 float:left;
margin-right: -1px;
}
ul#filterOptions li span{
padding: 10px 12px;
display: block;  
color:#c4c4c4;  
}
ul#filterOptions li a{
color:black;  
font-size:18px;
}
ul#filterOptions li.cur a{
 /*GSC color:#7a7a7a;*/
 color:#2A7BB0;
}
ul#filterOptions li a:hover{
 text-decoration:none;  
 /*GSCcolor:#7a7a7a;*/
 color:#2A7BB0;
}
.box img{
max-width:100%
}
.portfolio-item .thumbnail{
margin:0;
position:relative;
}

.linear{
 transition:all 200ms linear;   
 -webkit-transition:all 200ms linear;   
 -moz-transition:all 200ms linear;   
 -ms-transition:all 200ms linear;   
 -o-transition:all 200ms linear;   
}
.thumb-img{
 position:relative;  
overflow:hidden;
}
.thumb-img a{
display:block;
/* modificado para quitar el fondo negro a blanco 
background:#000; */
background: #fff;
-webkit-transform: scale(1,1);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
    -moz-transform: scale(1,1);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 250ms;  
}
.thumb-img a:hover{
 -webkit-transform: scale(1.05,1.07);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
    -moz-transform: scale(1.05,1.07);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 250ms;   
}
.thumb-img a:hover img{
 opacity:0.7;   
}
.folio-caption{
 position:absolute;
 bottom:-55px;
 left:0;
background:rgba(42, 163, 173, 0.8);
width:100%;
max-height:48px;
}
.folio-caption p{
 color:#fff;
 padding:15px;
 margin:0;
text-align:center;
font-size:14px;
}
.portfolio-item {
  margin: 0;
  padding:0 0;
}
.main-folio{
 margin:0 auto;
 width:100%;
padding:40px 0;
position:relative;
overflow:hidden;
}
ul.container_folio{
 margin:0 0 0 0;
padding:0 0;
list-style:none;
width:100% !important;

}
ul.container_folio li.box{
margin:0;
padding:0 15px;
width:33.333%;

float:left;
}
.col-md-12{
 clear:both;
}
.img-portfolio {
  margin: 0;
}

div.link{
visibility:hidden;
position:absolute;
top:0;
color:#fff;
font-size:14px;
}

.thumbnail {
border-radius: 0px;
}

/*=================contact====================*/
.main-contact{
 padding: 40px 0;
}


.contact-info p span{
width:24px;
height:24px;
text-align:center;
}
.contact-info .fa{
font-size:18px;
vertical-align:middle;
margin-right:20px;
}

.contact p{
font-size:24px;
margin:0;
padding:0 0 0 0;
}
.contact span{
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
-o-border-radius: 100%;
border:3px solid #7a7a7a;
width:48px;
height:48px;
text-align:center;
font-size:24px;
line-height:42px;
vertical-align:middle;
margin-right:15px;
}
.table-contact{
display:table;
width:100%;
}
ul.table-contact li{
padding-bottom:30px;
}
ul.table-contact li:nth-last-child(1){
padding-bottom:0px;
}
.row-contact{
display:table-row;
padding:0 0 15px 0;
}
.cell-contact{
display:table-cell;
}
.w-cell{
width:48px;
}
/* Footer */

footer {
   color: #ffffff;
  background: #222121;
  padding: 20px 0;
}
.cp-right P{
margin:0;
padding:10px 0;
}
.cp-right P a{
 color:#fff;
 text-decoration:underline;
}
.top-scroll {
  margin: 0;
  padding:0;
}

.top-scroll a {
  text-decoration: none;
  color: inherit;
  display:block;
  font-size:92px;
  line-height:48px;
}
.top-scroll a:hover{
color:#fff;
}
i.scroll {
color: #fff;
position: absolute;
top: -15px;
left:50%;
margin-left: -28px;
}

i.scroll:hover {
color:#fff;
}


/* ========================================== Footer ======================================================= */
.list-inline > li {
display: inline-block;
padding-right: 10px;
padding-left: 10px;
}
.list-inline > li a i{
 vertical-align:middle;
 line-height: 41px;

}
.socIcon{
display:block;
color:#fff;
animation-duration: 750ms;
  -webkit-animation-duration: 750ms;
  -moz-animation-duration: 750ms;
  -ms-animation-duration: 750ms;
  -o-animation-duration: 750ms;
  -webkit-animation-delay: 1000ms;
    -moz-animation-delay: 1000ms;
    -ms-animation-delay: 1000ms;
    -o-animation-delay: 1000ms;
        animation-iteration-count: 1;   
        -webkit-animation-iteration-count: 1;   
        -moz-animation-iteration-count: 1;   
        -ms-animation-iteration-count: 1;   
        -o-animation-iteration-count: 1;  
}
.socIcon:hover{
color:#fff;
}
/* ========================================== Responsive ======================================================= */

/* @media screen and (min-width:768px) and (max-width: 1024px){
ul.container_folio li:nth-last-child(1).box{
float:left;
}
} */
@media screen and (min-width:240px) and (max-width: 1024px){
.navbar-nav{
margin:0;
}
.vert-text h1 {
font-size: 48px;
    }
.vert-text h2 {
font-size: 36px;
    }
.btnAbout{
     bottom:-2%;   
    }
}
@media screen and (min-width:240px) and (max-width: 991px){
.cp-right, ul.list-inline{
 text-align:center;       
    }
i.scroll {
color: #fff;
position: relative;
top: 0;
left: 0;
margin-left: 0;
}
    
}

@media (min-width: 768px){
.navbar-nav {
float: none;}
}
@media screen and (min-width:768px) and (max-width: 1199px){
.folio-caption p{
font-size:12px;
}
}
@media screen and (min-width:240px) and (max-width: 767px){
ul.container_folio{
text-align:center;
}
    
 ul.container_folio li.box{
margin:0;
padding:0 15px;
width:100%;
max-width:380px;
display:inline-block;
float:none;
}   

.navbar ul.pull-right{
float:none !important;
}
.navbar-inverse .navbar-nav > li > a.btn, .navbar-inverse .navbar-nav > li span {
    display:none;
}

.navbar-toggle {
margin-top: 25px;
}

}
@media screen and (min-width:240px) and (max-width: 660px){
.btnAbout {
bottom: -5%;
margin-left: -36px;
}
.fa-2x {
font-size: 1.5em !important;
}
.top-scroll a{
font-size: 60px;
}
.vert-text h1 {
font-size: 36px;
    }
.vert-text h2 {
font-size: 21px;
    }
.w-cell {
width: 20%;
}
.title-page-white h2, .title-page-gray h2{
font-size:24px;
top: 16px;
}
a.navbar-brand {
font-size: 24px;
}
.about-content p, .contact p {
font-size: 18px;
}
.contact span {
width: 40px;
height: 40px;
font-size: 16px;
line-height: 34px;
}
.navbar-nav > li > a {
padding-top: 23px;
padding-bottom: 23px;
font-size: 18px;
}
}

.h2-blue-text{
color: #428bca;
}