body{font-family: 'Lato', sans-serif;margin:0;font-size:16px;color:#2C3845}
header{background:#006F58;margin-bottom:1em;height:4em; z-index: 999}
.container{max-width:73.75em;margin:0 auto;position:relative;}
.clear{clear:both;}
ul,li{margin:0;padding:0;list-style:none; text-decoration: none}
h1,h2,h3{margin-top:0;}
header img{border:0;}
h2{font-size: 1.2em}

.logo img{margin-top:0;}
nav{float:right; margin-bottom:2em;}
nav ul{margin-right: 2em}
nav li{display:inline-block;}
nav a{text-decoration:none;display:block;color:white;height:1em;line-height:1.5em;font-weight:100;}
nav a:hover{font-weight:700}

.barra{margin-top: 1em}


#capa1{position:absolute; z-index:1;}
#capa2{position:relative; z-index:0;margin-top:4.5em}

.rslide ul{padding-top: -10em;}
.slide img{width:100%;height:auto;}

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }

.izquierda{float: left}
.izquierda2{float: left;margin-top: 2em}
.derecha{float: right;}
.nosotros{width: 40%; margin-top:5em}
.institucional{margin-top:-16em;}
.nosotros.puntos {font-variant: 300; color: #006F58}
.bold{font-weight:700;}
.primer{color: #006F58}
.barra{float: left}
.puntos{font-weight:700; color: #006F58}

.empresas{background:#006F58; height:3em; margin-top:1em; text-align: center; color: white}
.empresas h1{line-height: 3em; font-weight: 100; font-size: 1em}

.sponsor li{display:inline-block; padding: 1em}
.sponsor{background: #EBEBEB;}
.sponsor ul{text-align: center}

.mapa iframe{width: 100%; height:350px; border:0; margin-top:0.5em}

.institucional2 img{width:100%; height: auto}
.directorio{margin-right: 5em; margin-top: 1em}
.descripcion{margin-top:2em;}
h2{padding-top: 20em; color:#006F58;}
.establecimiento2{display: none}
.izquierda2{width:45%; margin-bottom: 2em}

#detalleservicios li{display:inline-block;width:25%;margin-right:4%;margin-left:4%;position:relative;margin-bottom: 2em}
#detalleservicios {text-align: center;}
#detalleservicios img{width: 15%}
#detalleservicios h2{text-align: left; margin-bottom: 2em;margin-left: 2%;padding-top:2em;}
#detalleservicios h1{color:#333333;font-size: 1.2em}
#detalleservicios p{color:#333333;font-family: 'Lato', sans-serif;font-size: 0.8em}

#equipamiento h2{background-color: #006F58; color:white; text-align:center; font-weight: 100; padding:0.4em; margin-bottom: 1.5em}
#equipamiento li{display: inline-block;}
#equipamiento ul{text-align: center}
#equipamiento img{width:100%}
.equipos2{display: none}
.equipamiento2{width: 82%;margin: 0 auto}

.catalogo li{display:inline-block;width:17.9%;margin-right:1.6%;position:relative;}
.catalogo img{width:100%; margin-bottom: 1em}
.catalogo h2{margin-top:1em; margin-bottom: 1em}
.catalogo{margin-left:3%}

.videos li{display: inline-block; margin: 1em}
.videos{text-align: center; margin-top: 1em}
.videos ul{margin-top: 1em; margin-bottom:2em}

.colDerecha{float:right;width:48%; margin-top:-7em}
.colDerecha h2{margin-bottom:1em}
.izquierda3 p{margin-bottom:1em}
.izquierda3{width:45%; margin-top: 2em}


.contact{font-size:1.5em; width: 80% ;color:#006F58}
.contact a{color:#006F58;list-style:none; text-decoration: underline; }
.contact img{margin-top: 1em}
.colDerecha img{margin-top: 1em}


.lobos{width: 48%}
.habilitaciones{text-decoration: none; color:#006F58; }
.habilitaciones:hover{font-weight: 700}

.contactos li{display:none; }
.contactos img{width: 100%}
.contactos{margin-top: 1em}

footer{background:#006F58;margin:0;padding-top:3em;text-align: center;color:white;padding-bottom:3em;margin-top:0.3em;}
footer li{display:inline-block;font-size: 0.9em}
footer a{text-decoration: none; color:white;}
footer a:hover{font-weight:600}
footer ul{padding-top:0; padding-bottom: 2em}
footer img{margin-top: 1em}

.field {
  display:flex;
  position: absolute;
  margin-top: 20%;
  margin-left: 23%;
  width:50%;
  flex-direction:row;
  z-index: 99
  
}

.field>input[type=text],
.field>button {
  display:block;
  font:0.9em 'Open Sans';
}

.field>input[type=text] {
  flex:1;
  padding:0.6em;

}

.field>button {
  padding:0.6em 0.8em;
  background-color:#35B9F5;
  color: white;
}

.formulario{width: 70%;text-align: center; margin: 0 auto;}
.formulario h1{color: #2C3845; margin-top: 1em; margin-bottom: -0.5em; font-size: 2em}
.contacto{background: #FDFDFD; }
form{padding:2em;margin:0.5em; color:#2C3845 }
.campoform{display:block;width:100%;margin-top:0.3em;height: 2em; margin-bottom: 0.5em}
textarea{display:block;width:100%;height:15em;margin-top:0.3em;}
.botonenviar{display:inline-block;background:#006F58;color:white;border:0;font-size:1em;text-transform:uppercase;padding:0.5em 1em;margin-top:1em}
br{margin-top:0.3em;}
form span{color:red;font-size: 0.9em}
.botonenviar:hover{background:#2C3845}


.confirmacion{height: 31em; text-align: center; }
.confirmacion img{width:10%; margin-top: 13em}
.confirmacion h1{color:#333333;font-family: 'Lato', sans-serif;font-size: 1.5em;}

/*mediaqueri*/
@media screen and (max-width:75em){

nav{margin-right: 1em}
.container{max-width:98%;margin:0 auto;position:relative;}
}

@media screen and (max-width:69em){

div .izquierda2{margin-left:1em;width:40%;}
.izquierda2 p{font-size: 0.8em}
.derecha img{width: 80%;}
}

@media screen and (max-width:66em){
.nosotros{width:30%; margin-top:1em; text-align: center; font-size: 0.9em}
.izquierda3 p{font-size: 0.9em}
div .izquierda2{width: 90%;margin-left:5%}
.izquierda2{text-align: center;}

}

@media screen and (max-width:63em){
.colDerecha{float: none; margin-top:1em; width: 80%; margin: 0 auto}
.colDerecha h2{margin-top: 1em}
.izquierda3 {width: 80%; margin: 0 auto; margin-bottom: 2em }
.izquierda3 h2{margin-top: 1em}
.izquierda3{text-align: center;}
.lobos{width: 100%;margin: 0}
.izquierda3 div{ margin: 0 auto}
}

@media screen and (max-width:60em){
.nosotros{margin:2em; width: 90%; margin-top: 3em}
.derecha img{display: none}
.barra{display: none}
.descripcion{width: 95%; margin-bottom: 2em}

}

@media screen and (max-width:58em){
header{text-align: center}
.catalogo li{width:31.14%;}

}

@media screen and (max-width:44em){
.contactos li{display:block;}
.mail-tel{display: none}

}

@media screen and (max-width:40em){
.establecimiento2{display: block}
.establecimiento{display: none}
#detalleservicios li{display:block;width:85%; margin: 0 auto; margin-bottom: 1em}
#detalleservicios h2{text-align: center}
.equipos2{display: block;}
.equipos1{display: none;}
.equipamiento2{width: 96%}
}

@media screen and (max-width:38em){

  .catalogo li{width:48%;}
   
}

@media screen and (max-width:37.5em){
 .catalogo li{width:90%;}
   
}

@media screen and (max-width:36em){

  .catalogo ul{text-align: center}
  .catalogo h2{text-align: center;}
   
}

@media screen and (max-width:22em){
.videos iframe{width: 100%;}

}

@media screen and (max-width:20em){
.empresas{height:5em}
.empresas h1{line-height:1.5em; padding-top:1em}
.nosotros{width: 80%}
p{font-weight: 0.7em}

}


body, div,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre, dl, dt, dd, ol, ul, li, hr,
fieldset, form, label, legend, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section,
summary, hgroup {
  margin: 0;
  padding: 0;
  border: 0;
}

a:active,
a:hover {
  outline: 0;
}

@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }


/* ------------------------------------------
  RESPONSIVE NAV STYLES
--------------------------------------------- */

.nav-collapse ul {
 
  width: 100%;

  display: block;
  list-style: none;
}

.nav-collapse li {
  width: 100%;
  display: block;
}

.js .nav-collapse {
  clip: rect(0 0 0 0);
  max-height: 0;
  position: absolute;
  display: block;
  overflow: hidden;
  zoom: 1;
}

.nav-collapse.opened {
  max-height: 9999px;
}

.disable-pointer-events {
  pointer-events: none !important;
}

.nav-toggle {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

@media screen and (min-width: 70em) {
  .js .nav-collapse {
    position: relative;
  }
  .js .nav-collapse.closed {
    max-height: none;
  }
  .nav-toggle {
    display: none;
  }
}


/* ------------------------------------------
  DEMO STYLES
--------------------------------------------- */

body {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color: #37302a;
  background: #fff;
  font: normal 100%/1.4 sans-serif;
}





/* ------------------------------------------
  FIXED HEADER
--------------------------------------------- */

header {
  background: #006F58;
  position: fixed;
  z-index: 3;
  width: 100%;
  left: 0;
  top: 0;
}

.logo {
  line-height: 55px;
  padding: 0 30px;
  float: left;
}


/* ------------------------------------------
  MASK
--------------------------------------------- */

.mask {
  -webkit-transition: opacity 300ms;
  -moz-transition: opacity 300ms;
  transition: opacity 300ms;
  background: rgba(0,0,0, .5);
  visibility: hidden;
  position: fixed;
  opacity: 0;
  z-index: 2;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

.android .mask {
  -webkit-transition: none;
  transition: none;
}

.js-nav-active .mask {
  visibility: visible;
  opacity: 1;
}

@media screen and (min-width: 70em) {
  .mask {
    display: none !important;
    opacity: 0 !important;
  }
}


/* ------------------------------------------
  NAVIGATION STYLES
--------------------------------------------- */

.fixed {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
}

.nav-collapse,
.nav-collapse * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.nav-collapse,
.nav-collapse ul {
  list-style: none;
  width: 100%;
  float: left;
}



@media screen and (min-width: 70em) {
  .nav-collapse {
    float: right;
    width: auto;
  }
}

.nav-collapse li {
  float: left;
  width: 100%;
}

@media screen and (min-width: 70em) {
  .nav-collapse li {
    width: auto;
  }
}

.nav-collapse a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  padding:1.5em ;
  text-decoration: none;
  background: #006F58;
  color: #fff;
  width: 100%;
  float: left;
}

.nav-collapse a:active,
.nav-collapse .active a {
  background: #006F58;
}

@media screen and (min-width: 70em) {
  .nav-collapse a {
    text-align: center;
    border-top: 0;
    float: left;
    margin: 0;
  }
}

.nav-collapse ul ul a {
  background: #006F58;
  padding-left: 2em;
}

@media screen and (min-width: 70em) {
  .nav-collapse ul ul a {
    display: none;
  }
}


/* ------------------------------------------
  NAV TOGGLE STYLES
--------------------------------------------- */

@font-face {
  font-family: "responsivenav";
  src:url("../icons/responsivenav.eot");
  src:url("../icons/responsivenav.eot?#iefix") format("embedded-opentype"),
    url("../icons/responsivenav.ttf") format("truetype"),
    url("../icons/responsivenav.woff") format("woff"),
    url("../icons/responsivenav.svg#responsivenav") format("svg");
  font-weight: normal;
  font-style: normal;
}

.nav-toggle {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
  text-indent: -300px;
  position: relative;
  overflow: hidden;
  width: 60px;
  height: 55px;
  float: right;
}

.nav-toggle:before {
  color: #fff; /* Edit this to change the icon color */
  font: normal 28px/55px "responsivenav"; /* Edit font-size (28px) to change the icon size */
  text-transform: none;
  text-align: center;
  position: absolute;
  content: "\2261"; /* Hamburger icon */
  text-indent: 0;
  speak: none;
  width: 100%;
  left: 0;
  top: 0;
}

.nav-toggle.active:before {
  font-size: 24px;
  content: "\78"; /* Close icon */
}