@font-face {
  font-family: 'Druk Text Web Bold';
  src: url('../druk/DrukText-Bold-Web.eot');
  src: url('../druk/DrukText-Bold-Web.eot?#iefix') format('embedded-opentype'),
  url('../druk/DrukText-Bold-Web.woff2') format('woff2'),
  url('../druk/DrukText-Bold-Web.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-stretch: normal;
  }

  @font-face {
		font-family: 'Druk Text Web Medium';
		src: url('../druk/DrukText-Medium-Web.eot');
		src: url('../druk/DrukText-Medium-Web.eot?#iefix') format('embedded-opentype'),
		url('../druk/DrukText-Medium-Web.woff2') format('woff2'),
		url('../druk/DrukText-Medium-Web.woff') format('woff');
		font-style: normal;
		font-stretch: normal;
		}

body {
  font-size: 1rem;
  font-family: 'Georgia';
  color: #0f0e48;
  background-color: #ffffff;
}

.head_gan {
  top:0px;
  background-color: #F2F3F4;
  padding: 0.4em;left: 0px;display: block;width: 100%; border-bottom-color: #000;
  border-right-width: 2px;border-bottom-style:solid;z-index: 99; -webkit-transition: background-color 0.5s ease-out; -moz-transition: 
  background-color 0.5s ease-out; -o-transition: background-color 0.5s ease-out; transition: background-color 0.5s ease-out;}

  .head_gan:hover{ background-color: #ED1C24; }


.head_gan_ob{
  top:0px;
  background-color: #501D4F;
  padding: 0.4em;left: 0px;display: block;width: 100%; border-bottom-color: #000;
  border-right-width: 2px;border-bottom-style:solid;z-index: 99; -webkit-transition: background-color 0.5s ease-out; -moz-transition: 
  background-color 0.5s ease-out; -o-transition: background-color 0.5s ease-out; transition: background-color 0.5s ease-out;}

.head_gan_ob:hover{ background-color: #ED1C24; }



.row{
  margin-right: 0 !important;
  margin-left: 0 !important;
}
.col-12 {
  padding-left: 0;
  padding-right: 0;
}
.container-fluid {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

img {
  width: 100%;
  height: auto;
}

.flecha img{
  width: 50px;
  padding: 50px 0;
}

a {
  color: #501D4F !important;
  text-decoration: none !important;
}

p{
  line-height: 1.7;
  font-size: 1.2em;
  color: #1e1e1e;
  font-family: 'Georgia';
}

.pie-foto p{
  margin-top: 16px;
  margin-bottom: 4em;
  line-height: 1.3;
  font-size: 0.8em;
  font-family: 'Roboto',sans-serif;
  text-align: center !important;
}


li{
  background-color:#fff;
}

li:hover{
  background-color:#ccc;
}

h1, h2, h3, h4, h5, h6{
  font-weight: 900;
  font-family: 'Druk Text Web Bold', sans-serif !important;
  color: #0f0e48;
  text-transform: uppercase;
}


/******* estilos que cambian mobile y desk *******/
.mobile {
  display: none;
}
.desk{
  display: block;
}
/******* estilos que cambian mobile y desk *******/



.titulares h2{
  font-size: 4.8em !important;
  font-family: 'Druk Text Web Medium' !important;
  color: #000000;
  text-align: center;
  line-height: 1.1;
  letter-spacing: 6px;
}

.titulares h4 {
font-size: 35px;
line-height: 1;
color: #501D4F !important;
text-align: center;
}

.titulares h3{
  font-family: "Roboto", sans-serif !important;
  font-size:1.7em ;
  padding:3px 0 0;
  text-align: center;
  color: #0f0e48;
}

.titulares h6{
  font-family:"Roboto", sans-serif !important;
  font-size:1.2em ;
  text-transform: uppercase;
  color: #ef3f3f;
  text-align: center;
  line-height: 7px;
  font-weight: 300;
  font-style: italic;
}

.titulares h5{
  background-color: #EF3F3F;
  font-size:2em;
  padding: 7px;
  color: #ffffff;
  width: fit-content;
  margin: 0 auto;
  text-align: center;
}

.pleca{
  background-color: #FECA00;
  height: 40px;
  width: 22%;
}


.pleca-der{
  background-color: #FECA00;
  height: 40px;
  width: 22%;
  position: relative;
margin: 0 0 0 auto ;
}


.circulos{
  padding-bottom: 5%;
  width: 10%;
}

.capitular{
  background-color: #F6F6F6;
  border-radius: 50%;
  color: #000000;
  display: flex;
  font-size: 190px;
  font-family: 'Druk Text Web Bold';
  height: 210px;
  justify-content: center;
  align-items: center;
  margin: 30px auto;
  width: 210px;
}

.creditos h6{
  font-size: .8em;
  padding-bottom: 7px;
  color: #000000 !important;
}

.creditos p{
  font-family: 'Georgia',serif !important;
  color: #000000 !important;
}

.creditos strong{
  font-family: 'Roboto', sans-serif;
}

.obra-comex{
  width: 50%;
  padding: 0 !important;
}


.met h6{
font-size: 3em;
padding:0;
}


.met p{
  color: #1e1e1e;
  line-height: 1.5;
  padding: 50px 0;
}

.sumario p{
  font-family: "Roboto", sans-serif !important;
  font-weight: 300;
  text-align: center;
  font-size: 1.6em;
  color: #656565;
}

.nota{
  padding: 0.8em 0;
  text-align: center;
}
.nota p{
  font-family: 'Georgia', serif !important;
  color: #501D4F;
  font-size: 1.2em;
  text-align: center;
}

.cuadro{
  background-color: #FFE1E1;
  border-top : 30px solid #EF3F3F;
  height: fit-content;
  margin: 0 15px;
}

.cuadro p{
color: #1e1e1e;
  font-family: "Roboto Condensed", sans-serif;
  text-transform: none;
  text-align: left;
  padding: 28px;
}

.destacado p{
  background-color: #FFE1E1;
  padding: 20px;
  border-left:15px solid #EF3F3F;
  font-family: "Roboto", sans-serif !important;
  line-height: 1.5;
  font-weight: 400;
}

.col-sm-1{
  margin-left: 0px !important;
}
.col-sm-1{
  margin-left: 0px !important;
}
/*********** CONTENEDOR GRIS****/

.contenedor-gris{
  background-color: #F2F3F4;
  padding: 50px;
}




/* Safari 4.0 - 8.0 */
@-webkit-keyframes inzoom {
  from {opacity: 0;
  transform: scale(0.7);}
  to {opacity: 1;
  transform: scale(1);}
}

@keyframes inzoom {
from {opacity: 0;
  transform: scale(0.7);}
  to {opacity: 1;
  transform: scale(1);}
}

.botX_2{
  position: fixed;
  top: 65px;
  right: 25px;
  width: 40px;
  z-index: 999;
  max-width:100px;margin: 10px;
  -webkit-transition: 0.3s ease-out;
  -moz-transition: 0.3s ease-out;
  -o-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}
.botX_2:hover{
  -webkit-transform: scale(130%);
  transform: scale(130%);
}


@media only screen and (max-width: 550px) {
  .hide_element{
  display: none !important;
 }
 
}

@media (min-width: 200px) and (max-width: 770px) {

  .fotoartes img {
    padding: 40px 0;
  }
  .fixed-top {
    background-color: #000;
  }
  .typing-demo {
    font-size: 3em;
  }

  .desk {
    display: none;
  }
  
  .mobile {
    display: block;
  }
 
  .titulares h2{
    font-size: 2.7em !important;
    text-align: center;
    letter-spacing: 3px;
  }

  .titulares-mob h2{
    font-size: 3.3em !important;
    text-align: center;
  }
  

  .met h3{
    font-size:1.4em ;
    text-align: center;
  }

  .met h4{
    font-size:2.7em;
    text-align: center;
  }

  .met h5{
    font-size:1.7em;
    text-align: center;
  }

  .sumario p{
    font-size: 1.3em;
  }
  
  .cuadro p{
padding: 10px;
  }

  .pleca{
    height: 40px;
    width: 42%;
  }

  .obra-comex{
    width: 90%;
  }

}

/******recuadros con texto en imagen chava ***/
.recuadro-vmedia-texto{
	background-color: #F2F3F4;
  height: 200px;
  color: #000;
  position: relative;
  margin-left: 305px;
  margin-top: -123px;
  z-index: 1;
  display: flex;
  align-items: center;
} 

.recuadro-vmedia-texto .texto_recuadro p{
	width: 80%;
	margin: 0 auto;
	border-top: solid 15px #feca00;
	padding-top: 8px;
  font-size: 15px;
	font-family: 'roboto', sans-serif;
  }

/******recuadro gris con texto, GANADOR OBRA en imagen cesar ***/
.recuadro-gris-ganador-texto{
	background-color: #F2F3F4;
height: 200px;
  color: #000;
  position: relative;
  margin-left: -100px;
  z-index: 1;
  display: flex;
  align-items: center;
} 

.recuadro-gris-ganador-texto .texto_mundial p{
	width: 80%;
	margin: 0 auto;
	border-top: solid 15px #feca00;
	padding-top: 8px;
  font-size: 15px;
	font-family: 'roboto', sans-serif;
  }
/******recuadro gris con texto en imagen ***/
.recuadro-gris-texto{
	background-color: #F2F3F4;
height: 200px;
  color: #000;
  position: relative;
  margin-top: -40%;
  right: -500px;
  z-index: 1;
  display: flex;
  align-items: center;
} 

.recuadro-gris-texto .texto_mundial p{
	width: 80%;
	margin: 0 auto;
	border-top: solid 15px #feca00;
	padding-top: 8px;
  font-size: 15px;
	font-family: 'roboto', sans-serif;
  }

  /******recuadro gris con texto, con texto a la izquiera cesar***/
.recuadro-gris-texto-izq{
	background-color: #F2F3F4;
height: 200px;
  color: #000;
  position: relative;
  margin-top: 0%;
  right: 200px;
  z-index: 1;
  display: flex;
  align-items: center;
} 

.recuadro-gris-texto-izq .texto_mundial p{
	width: 80%;
	margin: 0 auto;
	border-top: solid 15px #feca00;
	padding-top: 8px;
  font-size: 15px;
	font-family: 'roboto', sans-serif;
  }
  

/******recuadro gris con texto version imagen completa en imagen cesar ***/
.recuadro-gris-completa-texto{
	background-color: #F2F3F4;
height: 200px;
  color: #000;
  position: relative;
  margin-top: -50%;
  right: -500px;
  z-index: 1;
  display: flex;
  align-items: center;
} 

.recuadro-gris-completa-texto .texto_mundial p{
	width: 80%;
	margin: 0 auto;
	border-top: solid 15px #feca00;
	padding-top: 8px;
  font-size: 15px;
	font-family: 'roboto', sans-serif;
  }
  


/****CLASES QUE AGREGÓ CESAR****/

/******recuadro rojo con texto en imagen ***/
@media (min-width: 200px) and (max-width: 675px) {


  .recuadro-gris-texto-mobile{
    background-color: #F2F3F4;
    height: 200px;
    color: #fff;
      margin: 0 auto;
      right: 0px;
    display: flex;
    align-items: center;
    } 
    
    .recuadro-gris-texto-mobile .texto_mundial p{
      width: 80%;
      margin: 0 auto;
    }

    .recuadro-vmedia-texto-mobile{
      background-color: #F2F3F4;
      height: 200px;
      color: #fff;
      margin: 0 auto;
      display: flex;
      align-items: center;
      } 
      
      .recuadro-vmedia-texto-mobile .texto_recuadro p{
        width: 90%;
        margin: 0 auto;
      }


      .botX_2{
        top: 55px;
        right: 4px;
      }
  
  


}


@media (min-width: 200px) and (max-width: 770px) {


  .recuadro-vmedia-texto-mobile{
    background-color: #F2F3F4;
    height: 200px;
    color: #fff;
    margin: 0 auto;
    display: flex;
    align-items: center;
    } 
    
    .recuadro-vmedia-texto-mobile .texto_recuadro p{
      width: 90%;
      margin: 0 auto;
    }




}