/** llamado a las fuentes personalizadas **/

@font-face {
    font-family: 'built_titlingbold_italic';
    src: url('font/built_titling_bd_it-webfont.woff2') format('woff2'),
         url('font/built_titling_bd_it-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'built_titlingbold';
    src: url('font/built_titling_bd-webfont.woff2') format('woff2'),
         url('font/built_titling_bd-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'built_titlingXLtIt';
    src: url('font/built_titling_el_it-webfont.woff2') format('woff2'),
         url('font/built_titling_el_it-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'built_titlingextralight';
    src: url('font/built_titling_el-webfont.woff2') format('woff2'),
         url('font/built_titling_el-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'built_titlinglight_italic';
    src: url('font/built_titling_lt_it-webfont.woff2') format('woff2'),
         url('font/built_titling_lt_it-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'built_titlinglight';
    src: url('font/built_titling_lt-webfont.woff2') format('woff2'),
         url('font/built_titling_lt-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'built_titlingitalic';
    src: url('font/built_titling_rg_it-webfont.woff2') format('woff2'),
         url('font/built_titling_rg_it-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'built_titlingregular';
    src: url('font/built_titling_rg-webfont.woff2') format('woff2'),
         url('font/built_titling_rg-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'built_titlingsemibold_italic';
    src: url('font/built_titling_sb_it-webfont.woff2') format('woff2'),
         url('font/built_titling_sb_it-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'built_titlingsemibold';
    src: url('font/built_titling_sb-webfont.woff2') format('woff2'),
         url('font/built_titling_sb-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/** fin llamado a las fuentes **/
body{
  font-family: 'built_titlinglight';
  margin: 0;
  padding: 0;
  background: #006f89;
}
h1,h2,h3,h4,h5,h6{
  font-family: 'built_titlingregular';
}
p{
  font-family: 'built_titlinglight';
  font-size: 16px;
  letter-spacing: 4px;
}
a{
  text-decoration:none;
  color: white;
}
a:hover{
  text-shadow: 0 0 10px #222;
}
.contenedor{
  width: 100%;
  float: left;
  padding: 0;
}
.row{
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
}
.marcos{
  width: 100%;
  /*border-top: 5px solid #e7a611;*/
  border-bottom: 5px solid #e7a611;
}
.infoesc{
  background: #f2f2f2;
  float: left;
}
header{
  width: 100%;
  float: left;
  padding:15px 0;
}
/** acá creo una clase menucont, que su ancho máximo es 600px pero si es menor el tamaño de dispositivo, se ajusta **/
.menucont{
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: -webkit-flex; /* Safari */
    display: flex;
}
.contslide, .infocol{
  width: 100%;
  max-width: 560px;
  margin: 40px auto;
  display: -webkit-flex; /* Safari */
    display: flex;
}
/** **/


/** el div #menu tiene un ancho del 100%, se ajusta según el dispositivo **/
#menu, #cabecera, #main{
    width: 100%;
    height: auto;
    display: -webkit-flex; /* Safari */
    display: flex;
}
/** **/

/** acá uso flex para que las cajas del menu header se ajusten a mismo ancho **/
#menu div, #cabecera div, #main div{
    -webkit-flex: 1;  /* Safari 6.1+ */
    -ms-flex: 1;  /* IE 10 */    
    flex: 1;
}
/** **/

div#main {
    float: left;
    padding-bottom: 40px;
}

.headmenu{
  text-align: center;
  color: white;
  vertical-align: middle;
  font-size: 2em;
}
i.fa.fa-search, i.fa.fa-user {
    color: rgba(01,0,0,0.4);
    vertical-align: -webkit-baseline-middle;
}
.menuitem a{
  color: #fff;
  font-weight: bold;
}
.menuitem a:hover{
  text-shadow: none;
  width: 100%;
  color: #fff;
 }
.menuitem{
  margin: 10px;
  padding: 10px;
  text-align: center;
  color: #006f89;
  text-transform: uppercase;
  font-size: 17px;
  letter-spacing: 2px;
  border: 4px solid #b77300;
  border-radius: 15px;
  background: #ffba48;
}
.menuitem:hover{
  box-shadow: 0 0 5px 0px #333;
  border: 4px solid #fff;
  background: #b77300;
  color: #fff !important;
}
.slide{
  margin: 0px;
  padding: 0px;
  width: 100%;
  max-width: 200px;
  height: 100px;

  text-align: center;
}
.subir{
  z-index: 9999;
}
.foto{
  width: 100%;
  height: 100%;
}
.foto img{
  width: 100%;
  height: 100%;
}
.izquierda{}
.central{
  margin-left: -20px;
  width: 120% !important;
  height: 120%;
  margin-top: -10px;
  max-width: 240px !important;
}
.central img{
  height: 100%;
  width: 100%;
}
.derecha{
}
.slide h5{
  font-size: 1.5em;
  margin: 10px auto;
  color: white;
  font-weight: 300;
}
.colinf{
  margin: 10px;
  padding: 10px;
}
.logosup{
  z-index: 9999;
  margin-left: 10px;
}
.quienes{
  background: white;
  padding-left: 10%;
  margin-left: -60%;
  border-radius: 15px;
  padding-right: 30px;
  margin-right: 30px;

}