@charset "utf-8";

/*
Theme Name: Premios en Salud
Author: eidos'
Author URI: http://eidos.com.mx/
Description: En eidos’ llevamos 22 años ayudando a nuestros clientes a comunicar mejor sus ideas. Nuestros productos se construyen a partir de una metodología que parte de generar lazos con las personas a través de la construcción de mensajes eficaces, los cuales llevamos al público gracias a las herramientas innovadoras que desarrollamos. Nos especializamos en los medios directos, ofreciendo así la mejor solución para generar la respuesta que estás buscando.
Version: 1

*/
* { box-sizing: border-box; }
body { font-family: 'proxima-nova', sans-serif; margin: 0px!important; }
img { max-width: 100%; height: auto; }
a { text-decoration: none; }

/* ----- Alineación ----- */
.none { display: none; }
.clear { clear: both; }
.left { float: left; }
.right { float: right; }
.aligncenter { text-align: center; }
.alignleft { text-align: left; }
.alignright { text-align: right; }
.total { display: table; overflow: hidden; width: 100%; height: 100%; }
.medio { display: table-cell; vertical-align: middle; }
.bajo { display: table-cell; vertical-align: middle; }

/* ----- Videos ----- */
div#video {  max-width: 1100px; margin: 0 auto; }
div.videoo { margin: 60px auto; float: left; width: 50%; }
div.videoo div.video { width: 450px; background: rgba(255, 255, 255, .5); -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; margin-left: auto; margin-right: auto; }
div.videoo div.video div.youtube { position: relative; }
div.videoo div.video div.youtube a { height: 250px; width: 250px; -moz-border-radius: 250px; -webkit-border-radius: 250px; border-radius: 250px; }
div.videoo div.video div.youtube img.img { height: 450px; width: 450px; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; box-shadow: 5px 2px 10px #8d8d8d; float: none; margin: 0; }
div.videoo div.video div.play { width: 100px; height: 100px; border-radius: 60px; background-color: rgba(255, 255, 255, .3); position: absolute; z-index: 10; left: 43%; margin-top: -30px; transition: .05s linear all; background-position: 50% 50%; background-repeat: no-repeat; background-size: 35px 35px; background-image: url(https://fundacioncarlosslim.org/wp-content/uploads/2018/07/video_play_saludblanco.png); background-size: 70%; top: auto; bottom: 20px; margin-left: -30px; }
div.videoo div.video div.youtube a:hover .play {
    width: 150px;
    height: 150px;
    -moz-border-radius: 120px;
    -webkit-border-radius: 120px;
    border-radius: 120px;
    background-color: rgba(255, 255, 255, .3);
    position: absolute;
    z-index: 10;
    left: 45%;
    margin-top: -60px;
    transition: .1s linear all;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 80%;
    background-image: url(https://fundacioncarlosslim.org/wp-content/uploads/2018/07/video_play_saludblanco.png);
    top: auto;
    bottom: 20px;
    margin-left: -60px;
}

/* ----- Home----- */
div#banner { width: 100%; height: 760px; padding-bottom: 30px; color: #fff; background-size: 100%; background-position: center center; -webkit-transition: all 7s cubic-bezier(0.21, 0.19, 0.42, 0.44); -moz-transition: all 7s cubic-bezier(0.21, 0.19, 0.42, 0.44); -ms-transition: all 7s cubic-bezier(0.21, 0.19, 0.42, 0.44); -o-transition: all 7s cubic-bezier(0.21, 0.19, 0.42, 0.44); transition: all 7s cubic-bezier(0.21, 0.19, 0.42, 0.44); }
div#banner:hover { background-size: 150%; background-position: bottom; }
div.principal { width: 770px; margin: 0 auto; }
div#banner2 { width: 100%; margin-bottom: -30px; background-color: #007eb3; }
div#banner3 { width: 100%; }
div#banner3 img { margin: 100px 500px; width: 900px; box-shadow: 2px 4px 10px #2b2c2c; transition: 2s all; }
div.fundacion { margin-left: 240px; padding-top: 11px; float: left; width: 770px; margin-top: 140px; }
p.invi1 { font-size: 4em; text-align: center; margin: 0 auto; }
p.invi { font-size: 5em; text-align: center; width: 506px; margin: 0 auto; font-weight: bolder; }
div.premios { width: 1000px; margin: 0 auto; margin-bottom: 80px; }
div.premios p { text-align: justify; width: 700px; margin: 35px 240px; line-height: 30px; }
div.premios p a { color: #f35e95; font-weight: bold; }
div.foto { width: 800px; margin: 0 auto; margin-bottom: 50px; }
div.semblanza { color: #ffffff; text-align: right; width: 376px; float: left; }
img.arriba { width: 100%; margin-bottom: -10px; }
img.baja { width: 100%; margin-bottom: -10px; }
div#banner2 h1 { margin: 0px; color: #ffffff; font-weight: bolder; font-size: 2.8em; }
div#banner2 h2 { color: #38b7ee; font-size: 2.5em; font-weight: 100; margin: 0px 0px 0px 90px;  }
div#banner2 h2.cero { color:#37c3fe; font-size: 2.5em;font-weight: 100;margin: 0px 0px 0px 186px; }
div#sem { width: 1106px; margin: 0px auto; text-align: justify; line-height: 30px; height: 630px; padding-top: 50px;  }
div#sem div.foto1 { width: 680px; margin: 0px 0px 0px 50px; float: left; height: 377px; box-shadow: 2px 4px 10px #2b2c2c; transition: 2s all; }
div#sem div.foto1:hover img { filter: grayscale(100%); }
div#banner3 a:hover img { filter: grayscale(100%); }
p.textr { text-align: center; font-size: 18px; width: 200px; position: relative; margin-left: -80px; }
p.textl { text-align: center; font-size: 18px; width: 200px; float: right; position: relative; left: 90px;}
img.linea { width: 160px; }
img.linea2 { width: 160px; float: right; margin-left: 200px; }

/*--Botón--*/
.buttons_hd {
  font-size: 50px;
  font-weight: 300;
  height: 50px;
  color: white;
  cursor: default;
}
.btn {
  margin: 20px;
  height: 50px;
  width: 175px;
  background: none;
  font-weight: 700;
  border: 5px solid white;
  cursor: pointer;
  color: white;
  border-radius: 3px;
}
.btn:active {
  
}
.btn_txt {
  font-size: 20px;
  color: #ffffff;
}
.btn6 {
  position: relative;
  margin: 70px 470px;
  width: 165px;
  height: 50px;
  border: none;
  z-index: 1;
}
.btn6:before {
  border-radius: 3px;
  transition: 325ms;
  border: 5px solid #ffffff;
  z-index: -1;
  content: "";
  margin-left: -47.5px;
  margin-top: -16px;
  width: 100%;
  height: 100%;
  position: absolute;
  background: none;
}
.btn6:hover:before {
  margin-top: 22px;
  margin-left: -12px;
  height: 0;
  width: 55.5%;
  border-top: 5px solid #ffffff;
  border-bottom: 5px solid #ffffff;
  border-right: 5px solid #ffffff;
  border-left: 5px solid #ffffff;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}


/* ----- Footer ----- */
div.footer { width: 100%; background-color: #D3D3D3; height: 150px;}
div.imagen { width: 200px; margin: 0 auto; padding-top: 30px; }


/* ----- Versión Movil ----- */
@media (max-width:1440px) {
div#banner3 img { margin: 100px 269px; }
div#banner { height: 580px; }

}
@media (max-width:1400px) {
div#banner { height: 560px; }
div#banner3 img { margin: 100px 250px; }
}

@media (max-width:1240px) {
div#banner3 img { margin: 100px 168px; }
p.textr { margin-left: -20px; }
p.textl { left: 68px; }
div#banner { background-size: 120%; }
img.arriba { margin-top: 7px; }
}

@media (max-width:1200px) {
div#banner3 img { margin: 100px 150px; }
p.textl { left: 50px; }
}

@media (max-width:1097px) {
div#banner3 img { margin: 100px 98px; }
div#sem div.foto1 { width: 540px; height: 300px; }
div#sem { width: 1000px; height: 560px; }
div.videoo div.video div.youtube img.img { height: 400px; width: 400px; }
div.videoo div.video { width: 400px; }
div#video { max-width: 990px; }
div#banner { background-size: 130%; }
.btn6 { margin: 60px 420px; }
}

@media (max-width:1024px) {
div#banner3 img { margin: 100px 62px; }
div#video { max-width: 920px; }
div#banner { background-size: 140%; }
div#banner:hover { background-size: 160%; }
img.arriba { margin-top: 10px; }
}

@media (max-width:768px) {
div#banner3 img { width: 640px; }
.btn6 { margin: 60px 300px; }
div#sem { width: 768px; height: 730px; }
div.semblanza { width: 650px; margin: 0 58px; }
img.arriba { margin-top: 20px; }
div#sem div.foto1 { margin: 0px 0px 0px 120px; }
div.videoo { width: 100%; }
p.textr { margin-left: 100px; }
img.linea { margin-left: 200px; }
p.textl { left: -40px; }
img.linea2 { margin-top: 90px; margin-bottom: 16px; }
div.principal { width: 720px; }
div#banner { height: 500px; background-size: 165%; }
div#banner:hover { background-size: 180%; }
}

@media (max-width:600px) {
div#banner3 img { width: 540px; margin: 100px 30px; }
.btn6 { margin: 54px 210px 0px 210px; }
div.semblanza { width: 484px; }
div#sem div.foto1 { margin: 0px 0px 0px 27px; }
div#sem { height: 750px; padding-top: 30px; width: 600px; }
div.principal { width: 500px; }
p.invi1 { font-size: 3em; }
p.invi { font-size: 4em; }
div#banner { height: 400px; }

}

@media (max-width:425px) {
div#banner3 img { width: 380px; margin: 100px 20px; }
.btn6 { margin: 52px 130px 0px 130px; }
div#sem { width: 425px; }
div.semblanza { width: 350px; margin: 0 37px; }
div#sem div.foto1 { width: 380px; margin: 0px 0px 0px 20px; height: 212px; }
div.principal { width: 400px; }
p.invi { width: 390px; }
img.linea { margin-left: 105px; }
img.linea2 { margin-left: 0px; margin-right: -124px; }
div#banner { background-size: 240%; }
div#banner:hover { background-size: 300%; }
}

@media only screen and (max-width:390px) {
div#banner3 img { width: 360px; margin: 100px 14px; }
.btn6 { margin: 40px 110px 0px 110px; }
div#sem { width: 390px; height: 760px; }
div.semblanza { width: 321px; margin: 0 34px; }
div#sem div.foto1 { width: 354px; height: 197px; }
div.videoo div.video { width: 370px; }
div.videoo div.video div.youtube img.img { width: 370px; height: 370px; }
div.principal { width: 390px; }
div#banner { height: 380px; }
}

@media only screen and (max-width:375px) {
div.videoo div.video { width: 360px; }
div.videoo div.video div.youtube img.img { width: 360px; height: 360px; }
div#banner3 img { margin: 100px 7px; }
.btn6 { margin: 40px 105px 0px 105px; }
div#sem { width: 375px; }
div#sem div.foto1 { margin: 0px 0px 0px 10px; }
div.principal { width: 360px; }
div#banner { height: 360px; padding-bottom: 8px; }

}

@media only screen and (max-width:320px) {
  div.videoo div.video { width: 300px; }
  div.videoo div.video div.youtube img.img { width: 300px; height: 300px; }
  div#banner { height: 310px; padding-bottom: 8px; }
  div#banner3 img { width: 320px; margin: 100px 0px;}
  .btn6 { margin: 40px 75px 0px 75px; }
  div.semblanza { width: 280px; margin: 0 20px; }
  div#sem div.foto1 { width: 308px; margin: 0px 5px; height: 170px; }
  div.principal { width: 320px; }
  p.invi1 { font-size: 2em; }
  p.invi { width: 300px; }
  div#sem { width: 320px; height: 760px; } 

}