body, html { margin:0; font-weight:normal; width:100%; height:100%; color:#12223a; font-family: 'ralewaythin';  }
header { width:100%; height:80px; background:white; position:fixed; top:-120px; z-index:99999;  transition: top 2s ease-in-out; }
#header { width:100%; height:170px; background:white; position:absolute; top:0; z-index:9999999; border-bottom:#296982 solid 4px;  transition: top 2s ease-in-out; }
#servicios header { width:100%; height:80px; background:white; position:fixed; top:0px; z-index:99999;  transition: top 2s ease-in-out; }
#contacto header { width:100%; height:80px; background:white; position:fixed; top:0px; z-index:99999;  transition: top 2s ease-in-out; }

.limpia { clear:both; }
a { display: inline-block; }
a:hover { text-decoration:none;  }
strong {  }
.activa { color:red; }

h1, h2, h3, h4 {  }

.blanco { color:white; }
.verde { color:#296982; }

.f-nav_ { width:100%; height:80px; background:white; position:fixed; top:0; z-index:9999999;  transition: top 2s ease-in-out; }
.f-nav { background:none; transition:all 400ms ease !important; margin-top:-80px;  }
.f-nav .logo { margin:10px 0 0 25px; transition:all 400ms ease; }
.f-nav_ .logo { margin:10px 0 0 25px; transition:all 400ms ease; }


.freez { position:fixed; top:50px; z-index:9999;  transition: top 2s ease-in-out; }
.freez_ { position:fixed; top:0px; z-index:9999;  transition: top 1s ease-in-out; }


.esconde { opacity:0; }

.miestilo { position:absolute; top:130px; right:10px;  }
.miestilo ul { width:450px;  }
.miestilo ul li { width:auto; float:left; font-size:12px; font-family: 'ralewaymedium'; list-style:none;  }
.miestilo ul li a {  color:#002232;  margin-right:16px;  }

.miestilo_ { position:absolute; top:40px; right:10px;  }
.miestilo_ ul { width:450px;  }
.miestilo_ ul li { width:auto; float:left; font-size:12px; font-family: 'ralewaymedium'; list-style:none;  }
.miestilo_ ul li a {  color:#002232;  margin-right:16px;  }



ul.menu { width:auto; float:right; top:130px; right:30px; position:absolute; z-index:99999999999999999999999;  }
ul.menu li { width:auto; list-style:none; }
ul.menu li a { width:auto; color:#002232;  margin-right:16px; font-size:12px; font-family: 'ralewayextrabold';   }
ul.menu li a:hover { width:auto; text-decoration:none; color:#3f8aa7; }

.actve {  color:#3f8aa7; }
.logo { margin-top:30px; margin-left:30px; transition:all 200ms ease; }
.logo-in { margin-top:30px; margin-left:30px; transition:all 200ms ease; }

header ul.menu { width:auto; float:right; top:30px; right:30px; position:absolute; z-index:99999999999999999999999;  }
header ul.menu li { width:auto; list-style:none; }
header ul.menu li a { width:auto; color:#296982;  transition:all 400ms ease; margin-right:16px; font-size:12px;  }
header ul.menu li a:hover { width:auto; background:url(../imagenes/flecha.png) no-repeat left center; text-decoration:none; }
header .logo { margin-top:0px; margin-left:30px; transition:all 400ms ease; }

ul.rs { width:auto; float:right; top:30px; right:30px; position:absolute; }
ul.rs li { width:auto; display:inline-block;  list-style:none; }
ul.rs li a { width:auto; color:#656565;  transition:all 400ms ease; margin-right:9px;  }
ul.rs li a:hover { width:auto; background:url(../imagenes/flecha.png) no-repeat left center; text-decoration:none; }

header ul.rs { width:auto; float:right; top:30px; right:30px; position:absolute;  }
header ul.rs li { width:auto; display:inline-block;  list-style:none; }
header ul.rs li a { width:auto; color:#656565;  transition:all 400ms ease; margin-right:9px;  }
header ul.rs li a:hover { width:auto; background:url(../imagenes/flecha.png) no-repeat left center; text-decoration:none; }

.nav-up { top: -120px; transition:all 600ms ease;  }
.nav-down { transition:all 600ms ease;  }

.submenu_ { width:100%; height:auto;  text-align:center; background:#002232; z-index:9999999999999999; padding:10px 0;  }
.submenu_ ul li { list-style:none; padding:0; margin: 0; }
.submenu_ ul li a { color:white; font-size:24px; font-family: 'ralewaymedium'; margin:15px auto; margin-left: -40px; display: block; }

.burger { position:absolute; top:25px; right:25px; display:none;  cursor: pointer; }


footer { width:100%; min-height:240px; clear:both; max-height:auto; padding:25px 0; text-align:center; background:#002232; color:#FFF; font-size:11px; border-top:white solid 3px;}
.btn-f { display:block; color:#2a6984; font-size:13px; text-align:left;  font-family: 'ralewaymedium'; margin-bottom:5px; }

.col-uno, .col-dos, .col-doss  { display:inline-block; vertical-align:top;  } 
.col-uno { width:180px; margin-right:80px; }
.col-dos { width:230px; text-align:left; line-height:19px; font-size:11px; padding-right:10px; }
.col-doss { width:200px; text-align:left; padding-left:10px; }
.col-doss .btn-f { font-family: 'ralewayextrabold'; font-size:14px; }

/* SLIDE  */

.carousel { padding-bottom:0; min-width:100%; height:570px; background:white;   }
.carousel-cell { width:100%;  height:570px; padding:140px 0 0 150px; }

.carousel-cell blockquote { border:none; font-size:30px !important; color:white; line-height:45px; margin-left:-55px;  }
.carousel-cell a { border:#00bae3 solid 1px; width:auto; padding:15px 25px; color:#00bae3;  font-size:16px; }


ol.flickity-page-dots { width:100%;  height:15px;  top:420px; }
ol.flickity-page-dots> li.dot {  background:none; border:#fff solid 2px; background:none; margin:0 10px; width:15px; height:15px;  border-radius:20px; }
ol.flickity-page-dots> li.dot.is-selected { border:white solid 1px; background:white; }

#slide1 { background:url(../imagenes/slide1.jpg) no-repeat top center; -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#slide2 { background:url(../imagenes/slide2.jpg) no-repeat top center; -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#slide3 { background:url(../imagenes/slide3.jpg) no-repeat center center; -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#slide4 { background:url(../imagenes/slide4.jpg) no-repeat center center; -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


/* LA FIRMA */

#firma { height:auto; border-top:white solid 3px; background:#296982 url(../imagenes/firmaa.jpg) no-repeat; background-position:bottom center; background-size:100%; color:white;
  
}

#firma p { font-size:18px;}

#firma article.seccion1 { text-align:center;  }
#firma article.seccion1 p { padding:0 5%; margin-bottom:45px;  }
.titulo {  margin:25px auto; }
.separador {  margin:25px auto;  }

#firma article.seccion2 { margin:100px 0 50px 0;  }
#firma article.seccion2 hr { width:70%; color:white; margin:0 auto;   }
#firma article.seccion1 h3 { text-align:center; font-size:24px; margin:50px auto 50px auto; font-family: 'ralewayextrabold';  }
#firma article.seccion2 h2 { font-family: 'ralewayextrabold'; font-size:24px;  }
#firma article.seccion2 .col1 { text-align:right; margin:60px 0;  }
#firma article.seccion2 .col2 { text-align:left; margin:60px 0;  }

.quote { width:100%; min-height:110px; background:#002232; color:white; text-align:center; padding:48px 0; font-size:32px; font-weight: bold; border-top:white solid 3px; border-bottom:white solid 3px; }
.quote span { color:#215569; font-size:32px; font-weight: bold; }

/* NUESTRO EQUIPO */

#equipo { width:100%; min-height:680px; background:#296982 url(../imagenes/equipo.jpg) no-repeat center center; -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-size:20px;
  text-align:center; color:white; padding:75px 0;
}



/* SERVICIOS */

/* SUBMENU  */



#servicios article.seccion1 { width:100%; height:480px;  }
#servicios .pleca { width:100%; height:152px; text-align:center; background: url(../imagenes/bg-pleca.jpg) no-repeat center center; -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;  padding:50px 0;  }
#servicios .pleca p { max-width:55%; color:white; margin:0 auto; font-size:16px;   }


#areas { width:100%; height:100%;  background: url(../imagenes/areas.jpg) no-repeat center center; -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }

.areas { width:100%; height:100%;  background: url(../imagenes/areas.jpg) no-repeat center center; -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;  height: 100%;
    overflow:hidden; }

.areas-a { width:65%; height:100%; float:left; 
    overflow: hidden;  }
	
.areas-b {   width:105%;
    height: 99%;
    overflow: auto;
    padding-right: 150px; /* exact value is given in JavaScript code */
	color:white;
}

.box-area { width:70%; height:auto; float:right;   }


.secciones h2 {   font-family: 'ralewayextrabold'; }

.separador-areas { max-width:502px; min-width:300px; height:15px; margin:125px auto; background: url(../imagenes/separador.png) no-repeat center center; }


.submenu { text-align:right; padding-right:8%; padding-top:50px; width:35%; height:100%; float:left; }
.submenu li { list-style:none; margin:8px 0;  }
.submenu li a { color:white; font-size:12px; font-family: 'ralewayregular'; }
.submenu li a:hover { font-family: 'ralewayextrabold'; }
.submenu li a.active { font-family: 'ralewayextrabold'; }
.btn_ { cursor:pointer; font-size:14px; }

.activo { font-family: 'ralewayextrabold'; }

.nav-container{  position: absolute;  }
.ha{ z-index: 999; position: fixed; left: 0; top:80px; height:60%;  transition:all 400ms ease; } /* this make our menu fixed top */
.be { position: static; transition:all 400ms ease; }



.secciones { width:90%; color:white; padding:90px 2%; font-family: 'ralewayregular';   }

/* CONTACTO */

#contacto { background:#296982;}

.copy { padding-top:100px; font-family: 'ralewayregular'; }
.dir { font-size:16px; color:#002232; padding-top:75px; font-family: 'ralewayregular'; }
.phone { width:100%; height:70px; font-size:28 px; color:white; background:#002232; padding-top:20px; box-sizing:border-box; position:absolute; left:0; bottom:240px; text-align:center; }

.contacto { width:100%; height:480px; background: url(../imagenes/contacto.jpg) no-repeat center center; -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-size:20px;
  color:white;
}

.contacto1 { width:100%; height:500px; background:white;  background: url(../imagenes/fondo-form.jpg) no-repeat center center; -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  
}

form  { padding-top:80px;}
input, textarea { font-family: 'ralewayregular';  background:none; height:45px; border:none; border-bottom:#002232 solid 1px; width:100%; margin-bottom:10px; resize:none; }
#submit { font-family: 'ralewayextrabold'; border:none; width:auto; float:right; font-size:28px; }
textarea { height:80px; }

.contacto1 h2 { font-size:18px; margin-top:80px; text-align: right; }
.contacto1 img { float: right; }


#map_canvas {  width:100%; height:480px; }

.close { font-size:25px;  color:#fff; text-shadow:none; box-shadow:none; opacity:1; }
.modal-body { margin-top:100px; }
.modal-content { background:none; box-shadow:none; border:none; }



.menu {
  cursor: pointer;
  margin: 0 auto;
  padding-left: 1.25em;
  position: relative;
  width: 40px;
  height: 30px;
}
.menu-global {
  backface-visibility: hidden;
  position: absolute;
  left: 0;
  border-top: 7px solid #296982;
  width: 100%;
  transition: 0.55s;
}
.menu-top {
  top: 0;
}
.menu-middle {
  top: 13px;
}
.menu-bottom {
  top: 26px;
}
.menu-top-click {
  backface-visibility: hidden;
  top: 15px;
  transform: rotate(50deg);
  transition: 0.55s 0.5s;
}
.menu-middle-click {
  opacity: 0;
}
.menu-bottom-click {
  backface-visibility: hidden;
  top: 15px;
  transform: rotate(-410deg);
  transition: 0.55s 0.5s;
}




/*==========  Non-Mobile First Method  ==========*/

    /* Large Devices, Wide Screens */
    @media only screen and (max-width : 1024px) {
		
	

    }

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {
		.submenu { display:none; }
		.secciones { margin:0 auto; width:100%; }
		.box-area { width:100%; height:auto; margin:0 auto; padding:0 5%;  }
		
    }

    
	
	
	
    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 820px) {
		
		/* SLIDE  */

.carousel { padding-bottom:0; min-width:100%; height:370px; background:white;   }
.carousel-cell { width:100%;  height:370px; padding:140px 0 0 50px; }

.carousel-cell blockquote { border:none; font-size:20px !important; color:white; line-height:25px; margin-left:-55px; font-family: 'ralewayextrabold';  }
.carousel-cell blockquote br { display:none; }
.carousel-cell a { border:#00bae3 solid 1px; width:auto; padding:15px 25px; color:#00bae3;  font-size:16px; }
ol.flickity-page-dots { width:100%;  height:15px;  top:320px; }

footer { width:100%; min-height:240px; max-height:auto; padding:25px 0; text-align:center; background:#002232; color:#FFF; font-size:11px; border-top:white solid 3px;}
.btn-f { display:block; color:#2a6984; font-size:13px; text-align:left;  font-family: 'ralewaymedium'; margin-bottom:5px; }

.col-uno, .col-dos, .col-doss  { display:inline-block; vertical-align:top; margin:25px 0px;  } 
.col-uno { width:180px; margin-right:0px; }
.col-dos { width:230px; text-align:left; line-height:19px; font-size:11px; padding-right:0px; }
.col-doss { width:200px; text-align:left; padding-left:10px; }
.col-doss .btn-f { font-family: 'ralewayextrabold'; font-size:14px; }


#firma article.seccion2 .col1 { text-align:center; margin:60px 0;  }
#firma article.seccion2 .col2 { text-align:center; margin:60px 0;  }
		
		
		
#servicios { background:pink; }
#servicios article.seccion1 { width:100%; height:480px;  }
#servicios .pleca { width:100%; height:auto; text-align:center; background: url(../imagenes/bg-pleca.jpg) no-repeat center center; -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;  padding:50px 0;  }
  
#servicios .pleca p { max-width:55%; color:white; margin:0 auto; font-size:16px;   }

.area_ { display: block; }


#areas { width:100%; height:100%;  background: url(../imagenes/areas.jpg) no-repeat center center; -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;  height: 100%;
    overflow:hidden; }
	
.areas { width:100%; height:100%;  background: url(../imagenes/areas.jpg) no-repeat center center; -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;  height: 100%;
    overflow:hidden; }

.areas-a { width:100%; height:100%; float:left; 
    overflow: hidden;  }
	
.areas-b {   width:105%;
    height: 99%;
    overflow: auto;
    padding:0 5%; /* exact value is given in JavaScript code */
	color:white;
}

.areas-b h2 {   font-family: 'ralewayextrabold'; }

.separador-areas { width:200px; height:15px; margin:25px auto; background: url(../imagenes/separador.png) no-repeat center center; }


.submenu { display:none; }


.nav-container{  position: absolute;  }
.ha{ z-index: 999; position: fixed; left: 0; top:80px; height:60%;  transition:all 400ms ease; } /* this make our menu fixed top */
.be { position: static; transition:all 400ms ease; }



.secciones { padding:25px 2%; width:80%; }



.copy { padding-top:100px; font-family: 'ralewayregular'; }
.dir { font-size:16px; color:#002232; padding-top:75px; font-family: 'ralewayregular'; }
.phone { width:100%; height:70px; font-size:28 px; color:white; background:#002232; padding-top:20px; box-sizing:border-box; position:absolute; left:0; bottom:-20px; text-align:center; }

.contacto { width:100%; height:680px; background: url(../imagenes/contacto.jpg) no-repeat center center; -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-size:20px;
  color:white;
}

.contacto1 { width:100%; height:auto; background:white;  background: url(../imagenes/fondo-form.jpg) no-repeat center center; -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  
  padding:25px 0;
}

form  { padding-top:80px;}
input, textarea { font-family: 'ralewayregular';  background:none; height:45px; border:none; border-bottom:#002232 solid 1px; width:100%; margin-bottom:10px; resize:none; }
#submit { font-family: 'ralewayextrabold'; border:none; width:auto; float:right; font-size:28px; }
textarea { height:80px; }

.contacto1 h2 { font-size:18px; margin-top:80px; text-align: right; }
.contacto1 img { float: right; }


#map_canvas {  width:100%; height:280px; }

.col-uno, .col-dos { width:33%; }
.col-uno br { display:none;  }
.col-uno img { margin-top:-40px;  }
		
		

    }
	/* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {
		
	   #section1, #section2, #section3, #section41, #section42  {
        margin-left: 150px;
    }


.f-nav_ { width:100%; height:80px; background:white; position:fixed; top:0; z-index:9999999;  transition: top 2s ease-in-out; }
.f-nav { background:none; transition:all 400ms ease !important; margin-top:-480px;  }
.f-nav .logo { margin:10px 0 0 25px; transition:all 400ms ease; }
.f-nav_ .logo { margin:10px 0 0 25px; transition:all 400ms ease; }


    }
	
	    /* Small Devices, Tablets */
    @media only screen and (max-width : 766px) {
		
		.logo { width:200px; padding-top:15px; }
		.logo-in  { width:100px; padding-top:15px !important; }
		.burger { display:inline; }
		.freez { position:relative;  }
    }


    /* Custom, iPhone Retina */ 
    @media only screen and (max-width : 320px) {
		
        
    }