@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: 'Roboto', sans-serif; }
img { max-width: 100%; height: auto; }
.gris { background-color: #dcdcdc; }
.grisobscuro { background-color: #313131; }
.azul { background-color: #00265f; }
a, #footer .min a { color: #000; text-decoration: none; font-weight: bold; }
a:hover, #footer .min a:hover { font-weight: 400; }
.caja { cursor: pointer; }

/* ----- Videos ----- */
div#video { overflow: hidden; max-width: 1100px; margin: 0 auto; }
div.videoo { margin: 60px auto; float: left; width: 50%; }
div.videoo div.video { width: 260px; 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: 250px; width: 250px; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; border: 5px solid #fff; box-shadow: none; 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(http://eidosdigital.com/clientes/fundacion_nueva/images/video_play_salud_ambiente.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(http://eidosdigital.com/clientes/fundacion_nueva/images/video_play_salud_ambiente.png);
    top: auto;
    bottom: 20px;
    margin-left: -60px;
}

/* ----- 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: bottom; }

/* ----- Header ----- */
div#header { z-index: 10; position: absolute; width: 100%; }
header { max-width: 1100px; margin: 0 auto; padding: 70px 0; }
header nav, header img, #footer nav, #footer .search-footer { float: left; }
header nav ul { padding: 0; margin: 50px 0 0 200px; }
header nav ul li, #footer nav ul li { list-style: none; display: inline-block; margin: 0 15px; color: #fff; }
header nav ul li a, #footer a { color: #fff; text-decoration: none; }
header nav ul li a + hr { left: 0; width: 100%; height: 1px; background: rgba(255, 255, 255, .8); -webkit-transform: scale(0, 1); -ms-transform: scale(0, 1); transform: scale(0, 1); -webkit-transition: -webkit-transform .3s ease; transition: -webkit-transform .3s ease; transition: transform .3s ease; transition: transform .3s ease, -webkit-transform .3s ease; -webkit-transform-origin: right center; -ms-transform-origin: right center; transform-origin: right center; }
header nav ul li a:hover + hr { -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; }

/* ----- Home ----- */
.main { z-index: 1; background-color: #fff; margin-bottom: 450px; }
div#banner { width: 100%; height: 950px; 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#banner * { margin: 0; padding: 0; }
div#banner .principal, div#banner .fecha { float: left; }
div#banner .principal { width: 80%; }
div#banner .principal h1.max, h1.max { font-size: 115px; border-left: 15px solid #fff; padding-left: 40px !important; }
div#banner .fecha { width: 20%; text-align: right; font-size: 25px; }
.premios { float: left; height: 575px; text-align: justify; }
.margen { padding: 40px 0; }
.nominaciones { background-size: cover; background-position: bottom; margin: 55px 0 40px; }
.nominaciones .color { background-color: rgba(0, 38, 95, 0.65); }
.nominaciones .color:hover { background-color: rgba(0, 38, 95, 0.95); transition: 1s ease }
.nominaciones .color .contiene { color: #fff; padding: 80px 20%; text-align: justify; font-weight: 300; }
.nominaciones .color .contiene h2 { text-align: center; font-weight: 100; }
.texto { margin: 55px 0 40px; }
.texto ol { padding: 0 20px; }
.texto ol li { margin: 40px 0; text-align: justify; }
.texto h3 { text-transform: uppercase; }
.texto p { text-align: justify; }
.menuconvocatoria { text-align: right; }
.menuconvocatoria nav ul { padding: 0; margin: 0; }
.menuconvocatoria nav ul li { display: inline-block; margin: 20px 5px; }

/* ----- Animaciones ----- */
div#animaciones { overflow: hidden; padding-bottom: 100px; }
.animaciones { float: left; width: 50%; height: 400px; color: #fff; }
.animaciones:nth-child(2n+1) { padding: 15px 15px 15px 0; }
.animaciones:nth-child(2n) { padding: 15px 0 15px 15px; }
.animaciones .foto { height: 100%; background-size: 110%; }
.animaciones .foto .dentro .contenedor { padding-top: 170px; height: 100px; }
.animaciones .foto .dentro .contenedor .dos { height: 100px; background-color: rgba(0, 38, 95, 0.65); }
.animaciones .foto .dentro .contenedor h2 { padding: 15px 40px; font-weight: 100; text-transform: uppercase; margin: 0; }
.animaciones .foto:hover .dentro { background-color: rgba(0, 38, 95, 0.65); -webkit-transition: all 350ms ease; -moz-transition: all 350ms ease; -ms-transition: all 350ms ease; -o-transition: all 350ms ease; transition: all 350ms ease; }
.animaciones .foto .dentro .contenedor .info { padding: 0 40px; opacity: 0; -webkit-transition: all 350ms ease; -moz-transition: all 350ms ease; -ms-transition: all 350ms ease; -o-transition: all 350ms ease; transition: all 350ms ease; box-sizing: border-box; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); }
.animaciones .foto:hover .dentro .contenedor { padding-top: inherit; height: inherit; -webkit-transition: all 350ms ease; -moz-transition: all 350ms ease; -ms-transition: all 350ms ease; -o-transition: all 350ms ease; transition: all 350ms ease; }
.animaciones .foto:hover .dentro .contenedor .dos { height: 100px; background-color: transparent; -webkit-transition: all 350ms ease; -moz-transition: all 350ms ease; -ms-transition: all 350ms ease; -o-transition: all 350ms ease; transition: all 350ms ease; }
.animaciones .foto:hover .dentro .contenedor .info { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }

/* ----- Footer ----- */
#footer { position: fixed; z-index: -1; width: 100%; bottom: 0; left: 0; text-align: center; }
#footer div { overflow: hidden; }
#footer .grisobscuro, #footer .gris { padding: 20px; }
#footer #menu-footer { width: 430px; margin: 0 auto }
#footer .buscador { padding: 12px 0 0 60px; }
#footer .search-footer { padding: 20px 0; position: relative; border: none; }
#footer .search-footer input { padding: 0; left: 0; line-height: 25px; background: url(http://www.fundacioncarlosslim.org/premios2017/images/lupa.png) 5px center no-repeat, #fff; border-radius: 25px; border: 2px solid #fff; color: rgba(0, 0, 0, 0); position: absolute; width: 30px; z-index: 10; -webkit-transition: all ease-out 300ms; -moz-transition: all ease-out 300ms; -o-transition: all ease-out 300ms; transition: all ease-out 300ms; }
#footer .search-footer label { float: left; line-height: 26px; margin-left: 40px; }
#footer .search-footer:hover input { width: 145px; padding: 0 5px; padding-left: 30px; color: rgba(0, 0, 0, 1); }
#footer nav ul { padding: 0; }
#footer nav ul li { margin: 20px 5px; }
div#bases { width: 250px; margin: 0 auto; position: relative; margin-bottom: -30px; }
#footer .ajusta { width: 600px; margin: 0 auto; }
#footer .min { text-align: center; margin: 40px 20px 10px; }
div.centra { max-width: 1100px; margin: 0 auto !important; overflow: hidden; }
a, #footer .min a { color: #000; text-decoration: none; font-weight: bold; }
a:hover, #footer .min a:hover { font-weight: 400; }

/* ----- Versión Movil ----- */
@media (max-width:1200px) {
	div#banner { background-size: 120%; padding-bottom: 50px; }
	div#banner:hover { background-size: 170%; }
}
@media (max-width:1097px) {
	header { padding: 70px 40px; }
	div#banner { padding: 0 40px 50px; height: 860px; }
	div#banner .principal { width: 70%; }
	div#banner .principal h1.max { font-size: 100px; }
	div#banner .fecha { width: 30%; }
	div#banner .fecha .total { height: 584px !important; }
	.margen { padding: 40px; }
	div.premios:nth-child(2n) { max-width: 585px !important; }
	.texto { padding: 0 40px; }
}
@media (max-width:800px) {
	div#banner { padding: 0 40px 30px; height: 637px; }
	div#banner .principal h1.max { font-size: 70px; }
	div#banner .fecha .total { height: 424px !important; }
	div.premios:nth-child(2n) { max-width: 285px !important; }
	.animaciones { float: none; width: 100%; padding: 15px 40px !important; }
}
@media (max-width:600px) {
	header { padding: 40px; text-align: center; }
	header nav, header img { float: none; }
	header nav ul { margin: 30px 0 0; }
	div#banner { height: 465px; }
	div#banner .principal h1.max { font-size: 45px; border-left: 10px solid #fff; padding-left: 20px; }
	div#banner .fecha { font-size: 18px; }
	div#banner .fecha .total { height: 212px !important; }
	div.premios, div.premios:nth-child(2n) { float: none; height: inherit; max-width: 100% !important; }
	div.premios:nth-child(2n+1) { text-align: center; }
	#footer .min { float: none; width: 100%; text-align: center; margin: 20px auto -15px; }
	.medio.masbajo { vertical-align: bottom; }
}
@media (max-width:450px) {
	div#banner .principal, div#banner .fecha { float: none; width: 100%; height: inherit !important; }
	div#banner { background-size: 160%; padding: 40px; }
	div#banner:hover { background-size: 200%; }
	div#banner .principal h1.max { font-size: 35px; margin-bottom: 25px; border-left: 5px solid #fff; }
	div#banner .fecha .total { height: inherit !important; }
	div#banner .fecha .total .bajo { vertical-align: inherit; }
	.nominaciones .color .contiene { ; padding: 40px; }
	div.animaciones { height: 260px; }
	.animaciones .foto .dentro .contenedor .info { padding: 0 20px; }
	.animaciones .foto { background-size: cover; background-position: center; }
	.animaciones .foto .dentro .contenedor { padding-top: 270px; }
}
@media only screen and (max-width:390px) {
	div#banner { background-size: 190%; }
	div#banner:hover { background-size: 230%; }
	div.animaciones { height: 680px; }
	div.animaciones .foto { background-position: left; }
	div.animaciones .foto .dentro .contenedor { padding-top: 420px; }
	div.animaciones .foto .dentro .contenedor .dos { height: 120px; }
}