@charset "utf-8";
/* CSS Document */
/*CSS Tuppertips 6*/
/********Generales***********/
a {
    -webkit-transition:color 0.2s ease-in;
    -moz-transition:color 0.2s ease-in;
    -o-transition:color 0.2s ease-in;
    transition:color 0.2s ease-in;}

/** @group clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }

html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
/*****/
@font-face {
    font-family: 'proxima_novablack';
    src: url('../fonts/proximanova-black-webfont.eot');
    src: url('../fonts/proximanova-black-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/proximanova-black-webfont.woff') format('woff'),
        url('../fonts/proximanova-black-webfont.ttf') format('truetype'),
        url('../fonts/proximanova-black-webfont.svg#proxima_novablack') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'proxima_nova_rgbold';
    src: url('../fonts/proximanova-bold-webfont.eot');
    src: url('../fonts/proximanova-bold-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/proximanova-bold-webfont.woff') format('woff'),
        url('../fonts/proximanova-bold-webfont.ttf') format('truetype'),
        url('../fonts/proximanova-bold-webfont.svg#proxima_nova_rgbold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'proxima_novaextrabold';
    src: url('../fonts/proximanova-extrabold-webfont.eot');
    src: url('../fonts/proximanova-extrabold-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/proximanova-extrabold-webfont.woff') format('woff'),
        url('../fonts/proximanova-extrabold-webfont.ttf') format('truetype'),
        url('../fonts/proximanova-extrabold-webfont.svg#proxima_novaextrabold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'proxima_novalight';
    src: url('../fonts/proximanova-light-webfont.eot');
    src: url('../fonts/proximanova-light-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/proximanova-light-webfont.woff') format('woff'),
        url('../fonts/proximanova-light-webfont.ttf') format('truetype'),
        url('../fonts/proximanova-light-webfont.svg#proxima_novalight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'proxima_nova_rgregular';
    src: url('../fonts/proximanova-regular-webfont.eot');
    src: url('../fonts/proximanova-regular-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/proximanova-regular-webfont.woff') format('woff'),
        url('../fonts/proximanova-regular-webfont.ttf') format('truetype'),
        url('../fonts/proximanova-regular-webfont.svg#proxima_nova_rgregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'proxima_novasemibold';
    src: url('../fonts/proximanova-semibold-webfont.eot');
    src: url('../fonts/proximanova-semibold-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/proximanova-semibold-webfont.woff') format('woff'),
        url('../fonts/proximanova-semibold-webfont.ttf') format('truetype'),
        url('../fonts/proximanova-semibold-webfont.svg#proxima_novasemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'proxima_nova_condensedlight';
    src: url('../fonts/proximanovacond-light-webfont.eot');
    src: url('../fonts/proximanovacond-light-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/proximanovacond-light-webfont.woff') format('woff'),
        url('../fonts/proximanovacond-light-webfont.ttf') format('truetype'),
        url('../fonts/proximanovacond-light-webfont.svg#proxima_nova_condensedlight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'proxima_nova_cn_rgregular';
    src: url('../fonts/proximanovacond-regular-webfont.eot');
    src: url('../fonts/proximanovacond-regular-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/proximanovacond-regular-webfont.woff') format('woff'),
        url('../fonts/proximanovacond-regular-webfont.ttf') format('truetype'),
        url('../fonts/proximanovacond-regular-webfont.svg#proxima_nova_cn_rgregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'proxima_nova_condensedSBd';
    src: url('../fonts/proximanovacond-semibold-webfont.eot');
    src: url('../fonts/proximanovacond-semibold-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/proximanovacond-semibold-webfont.woff') format('woff'),
        url('../fonts/proximanovacond-semibold-webfont.ttf') format('truetype'),
        url('../fonts/proximanovacond-semibold-webfont.svg#proxima_nova_condensedSBd') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'impactregular';
    src: url('../fonts/impact/impact-webfont.eot');
    src: url('../fonts/impact/impact-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/impact/impact-webfont.woff2') format('woff2'),
        url('../fonts/impact/impact-webfont.woff') format('woff'),
        url('../fonts/impact/impact-webfont.ttf') format('truetype'),
        url('../fonts/impact/impact-webfont.svg#impactregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


body{ 
    background: url(../images/transparent-square-tiles.png) repeat;
    color: #000;
    font-family: 'proxima_novalight', Helvetica, Arial, sans-serif;
    font-size:13px;
    margin:0; 
    padding:0; 
}
#wrapper{ 
    background: #fff;
    -moz-box-shadow:    0px 0px 5px 2px #656565;
    -webkit-box-shadow: 0px 0px 5px 2px #656565;
    box-shadow:         0px 0px 5px 2px #656565;
    margin:0 auto;
    width:810px;
}
footer{background: #db328e; color: #e8e8e8;font-size: 1em;padding:4% 4% 1%;}
footer ul{}
footer li{margin-bottom:15px;list-style:none;text-align:justify;}
footer li a{color:#e8e8e8;display:block;text-align:center;text-decoration:none;padding: 1% 0;}
footer li a:hover{text-decoration:underline;}

/*HOME*/
.contenidoHome{background: #fff;}
.contenidoHome .imgHome{display: block;width: 100%;}
.contenidoHome .imgHome img{display: block;width: 100%;}
.copyHome{padding-bottom: 5%;text-align: center;}
.copyHome h1{color: #3e1e3e;font-family: 'proxima_novasemibold';font-size: 2.46153846em;padding: 0 5%;}
.btnEntrar{background: transparent url('../images/btnEntraya.png');background-size: 100%;display: block; height: 106px;margin:4% auto 0;width: 415px;}
.btnEntrar:hover{background-position: 0 -103px; height: 106px;}

/*INTERIOR*/
.contenidoInterior{background: url('../images/backInterior.jpg') repeat-y; background-size: 100%;}
.imgInterior img{width: 100%;}
.infoMando{
}
.btnInfo{
    background: url('../images/btnConoceOlla.png'); background-size: 100%; display: block; height: 338px; margin: 4% auto; width: 527px;
}
.btnInfo:hover{
    background-position: 0 -337px;
    height: 338px;
}
.titleDinamica{
    margin: 4% 0 2%;
    text-align: center;
}
/*Formulario*/
.titleParticipa{
    margin: 4% 0;
    text-align: center;
}
#contForm{color:#2E2E2E;padding:3% 0 1%;}
#contForm h1, .lista_ingredientes h1{color:#d33179;font-family: 'proxima_nova_condensedSBd';font-size:1.6em;padding:0 0 3%; text-align:center;}
#formInfo {box-sizing: border-box;color:#002d39;font-size:1.1em;width:80%;margin:0 auto;}
#formInfo #label{box-sizing: border-box; margin:1% 0; width:100%;}
#formInfo label{float:left;width:45%;}
#formInfo .txtinput { 
    border-style: solid;
    border-width: 1px;
    border-color: #dedede;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset; 
    color: #cecece;
    display: block;
    float:right;
    font-family: 'proxima_novalight';
    font-size: 1em;
    padding: 1% 3%;
    transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    width: 40%;
}
#formInfo .txtinput:focus { 
    color: #333;
    border-color: rgba(41, 92, 161, 0.4);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
    outline: 0 none; 
}
#formInfo textarea {
    border-style: solid;
    border-width: 1px;
    border-color: #dedede;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset; 
    color: #cecece;
    display: block;
    float:right;
    font-family: 'proxima_novalight';
    font-size: 1em;
    padding: 1% 3%;
    transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    width: 40%;
}
#formInfo textarea:focus {
    color: #333;
    border-color: rgba(41, 92, 161, 0.4);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);
    outline: 0 none; 
}
#formInfo input[type=checkbox] {display: none;}
#formInfo input[type=checkbox]:checked + label:before {
    content: "\2713";
    color: #972479;
    font-size: 1.3em;
    line-height: 1.1em;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
}
#formInfo #checkbox{box-sizing: border-box; padding:1% 0;width:100%;}
#formInfo .check1{
    border-radius: 3px;
    cursor: pointer;
    display: inline-block;
    float:none;
    font-size: 1em;
    margin-right: 15px;
    position: relative;
    padding-left: 25px;
    width:90%;
}
#formInfo .check1:before {
    background-color: #f1f1f1;
    bottom: 1px;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
    content: "";
    display: inline-block;
    height: 16px;
    left: 0;
    margin-right: 10px;
    position: absolute;
    width: 16px;
}
#formInfo #submitbtn{
    background: #e8181f;
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    border-radius: 0.5em;
    border: 6px #b30107 solid;
    color: #fff;
    display: block;
    font-family: 'proxima_nova_condensedSBd';
    font-size: 2.46153846em;
    margin: 4% auto;
    padding: 2%;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 70%;
}
#formInfo #submitbtn:hover{
    background: #ff5700;
    border: 6px #de4c00 solid;
}
.politicas{text-align:center;}
.politicas p{margin: 2% 0 0;padding: 0 8%;}
.politicas .pol1{text-transform:uppercase;}
.politicas .pol1 a{color:#002d39;}
.politicas .pol1 a:hover{color:#C80081;text-decoration:none;}
.politicas .pol2{font-family: 'proxima_nova_condensedSBd';font-size:1.6em;}
.politicas .pol3{font-size:.8em;}
.test-modal{
    background: url(../images/bgGracias.jpg) repeat;
    background-position:center 0;
    background-size: 100%;
    border: .5em solid #570aa5;
    border-radius: 20px;
    margin: 0 auto;
    position:relative;
    text-align:center;
    width:485px;
}
.test-modal .contGracias{color: #000;padding:8%; /*height: 500px;*/}
.ollaModal{ height: 530px;}
div.contGracias div div {
float: left;
width: 50%;
}
.test-modal h3{color:#fff;font-family: 'proxima_nova_condensedSBd';font-size:3.38461538em;text-shadow: 1px 1px 1px #303030;}
.test-modal .txt1{color: #411073;font-size:2.30769231em;padding: 4% 10%;}
.test-modal .txt2{color: #cf1f7e;font-size: 2.15384615em;padding: 2% 0% 4%;}
.test-modal .image{margin: 0 auto 2%;width: 435px;}
.test-modal .popup-modal-dismiss{
    background:#fff;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    border: 5px solid #570aa5;
    display:block;
    right: -5%;
    top: -5%;
    padding:1%;
    position: absolute;
    width:8%;
}
.test-modal .popup-modal-dismiss img{
    width: 100%;
}
.test-modal .btnDescargar{
    background: url('../images/btnDescargaRecetario.png');
    background-size: 100%;
    display: block;
    height: 104px;
    margin: 2% auto;
    width: 416px;
}
.test-modal .btnDescargar:hover{
    background-position: 0 -103px;
    height: 104px;

}
.contGracias .star{
    padding: 3% 0;
}
.btns{
    margin-bottom: 3%;
    overflow: hidden;
}
.btns li{
    float: left;
    margin: 2% 3%;
    width: 35%;
}
.btns li:first-of-type{
    margin-left: 13%;
}
.btns a{
    color: #d40000;
    display: block;
    height: 46px;
    font-size: 1.5em;
    padding-top: 10px;
    text-align: left;
    text-decoration: none;
    
}
.btns a:hover{color: #000;}
.btns .btnIntentalo{
    background: url('../images/icon1.png') no-repeat;
    padding-left: 52px;
}
.btns .btnEnviar{
    background: url('../images/icon2.png') no-repeat;
    padding-left: 47px;
}

/*Participantes*/
.contParticipantes{background: url(../images/subtle-grey.png) repeat; padding: 0% 0 6%;}
.contParticipantes .titles{ padding: 6% 0 4%;}
.participantes{
    background:#fff;
    -moz-box-shadow:    0 0 4px 0px #656565;
    -webkit-box-shadow: 0 0 4px 0px #656565;
    box-shadow:         0 0 4px 0px #656565;
    margin:0 auto;
    width:80%;
}
.titleParticipantes{background:#670e7d;text-align:center;padding:2%;}
.titleParticipantes h4{color:#fff;font-family: 'proxima_nova_condensedSBd';font-size:2em;padding:2% 0 3%;}
.titleParticipantes .btn_invita{
    background:#d33179;
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    border-radius: 0.5em;
    color:#fff;
    display:block;
    font-family: 'proxima_nova_condensedSBd';
    font-size:1.61538462em;
    margin:0 auto;
    padding:1% 2%;
    text-decoration:none;
    text-transform:uppercase;
    width:35%;
}
.titleParticipantes .btn_invita:hover{background:#d33179;}
#boxesParticipantes{overflow: hidden;padding-bottom: 5%;}
#boxesParticipantes .box{
    -moz-box-shadow:    0 0 4px 0px #656565;
    -webkit-box-shadow: 0 0 4px 0px #656565;
    box-shadow:         0 0 4px 0px #656565;
    float: left; 
    margin: 4% 0 0 3%;
    width: 298px;
}
#boxesParticipantes .box2{
    -moz-box-shadow:    0 0 4px 0px #656565;
    -webkit-box-shadow: 0 0 4px 0px #656565;
    box-shadow:         0 0 4px 0px #656565;
    float: left; 
    margin: 4% 0 0 3%;
    width: 298px;
}
#boxesParticipantes .box .imgBox{}
#boxesParticipantes .box .imgBox img{display: block;width: 100%;}
#boxesParticipantes .box .txtBox{}
.txtBox .name{background: #d33179; color: #fff;font-family: 'proxima_nova_cn_rgregular';font-size: 1.38461538em; text-align: center; padding: 4% 1%;}
.txtBox .title{color: #d33179;font-family: 'proxima_nova_cn_rgregular';font-size: 1.25em;padding: 4%;text-align: center;}
.txtBox .txt{padding: 0% 5% 4%;text-align: center;}
.txtBox .tiempo{font-family: 'proxima_nova_rgbold';font-size: 3.25em; text-align: center; padding-bottom:4%;}
.box .fb{clear: both;padding: 2% 1%; text-align: center;}

#boxesParticipantes .box2 .imgBox{}
#boxesParticipantes .box2 .imgBox img{display: block;width: 100%;}
#boxesParticipantes .box2 .txtBox{}
.box2 .fb{clear: both;padding: 2% 1%; text-align: center;}

/*Bases*/
.contBases{background: url('../images/bgInterior.jpg') repeat-y;background-size: 100%;}
.contBases .imgBases{width: 100%;}
.imgBases{width:100%;}
.imgBases img{width:100%;}
.txtBases{font-size:1em;margin: 0 auto;padding: 2% 5%;width: 65%;}
.txtBases h1,.txtBases h2,.txtBases h3 {color:#000;padding:2% 0;}
.txtBases h1{color:#d8147e;font-family: 'proxima_nova_condensedSBd';font-size:2em;text-align:center;}
.txtBases h2,.txtBases h3{font-size:1.5em;}
.txtBases ol{padding-left:4%;}
.txtBases ol li{list-style:decimal;margin-bottom:2%;}
.txtBases ul li{margin-bottom:2%;}
.txtBases .segunda li{list-style:lower-alpha; margin:0 0 0 4%;}
.txtBases ul li a{color:#d8147e;font-family: 'proxima_nova_condensedSBd'; text-decoration:none;}
.txtBases ul li a:hover{color:#000;text-decoration:underline;}
.txtBases p{margin-bottom:2%;}
#regresar{color:#d8147e; display:block;font-family: 'proxima_nova_condensedSBd'; margin: 5% 0; text-decoration:none;}
#regresar span{margin-right:2%;}
#regresar:hover{color:#000;text-decoration:underline; }
/**/

/*Infografia*/
.contInfo{}
.video-container {
    height: 0;
    margin: 0 auto 4%;
    overflow: hidden;
    position: relative;
    padding-bottom: 56.25%; /* Para que el contenedor tenga relación de aspecto 16/9 */
    padding-top: 30px;
    width: 80%;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.contInfo img{
    display: block;
    width: 100%;
}
.contInfo h1{
    color: #3e1e3e;
    font-family: 'proxima_novalight';
    font-size: 2.8em;
    margin: 4% auto 0;
    text-align: center;
    text-transform: uppercase;
    width: 81%;
}
.contInfo .btnRegresarHome{
    background: url('../images/btnRegresarHome.png');
    background-size: 100%;
    display: block;
    height: 102px;
    margin: 4% auto;
    width: 417px;
}
.contInfo .btnRegresarHome:hover{
    background-position: 0 -101px;
    height: 102px;
}

/*Dinámica*/
.bg{background: url(../images/subtle-grey.png) repeat; }
.comenzar{
    padding: 4% 0 0;
}
.comenzar .btnComenzar{
    background: url('../images/btnComenzar.png');
    background-size: 100%;
    display: block;
    height: 84px;
    margin: 0 auto;
    width: 308px;
}
.comenzar .btnComenzar:hover{
    background-position: 0 -83px;
    height: 84px;
}
.comenzar .btnComenzar2{
    background: url('../images/btnComenzar.png');
    background-size: 100%;
    display: block;
    height: 84px;
    margin: 0 auto;
    width: 308px;
}
.comenzar .btnComenzar2:hover{
    background-position: 0 -83px;
    height: 84px;
}
#contenedorJuego{ display:none;
}
#contenedorJuego h2{
    font-family: 'proxima_nova_cn_rgregular';
    font-size: 2.15384615em;
    text-align: center;
}
#contenedorJuego ul{
    margin: 0 auto 2%;
    overflow: hidden;
    width: 88%;
}
#contenedorJuego ul li{
    float: left;
    margin: 2%;
}
#contenedorJuego ul li input{
    display: block;
    height: 48px;
    width: 200px;
    border: 0;
}
#contenedorJuego ul li input:hover{
    background-position: 0 -48px;
    height: 48px;
    border: 0;
}
#contenedorJuego ul li input:active{
    border: 0;
}
#contenedorJuego ul li input:visited{
    border: 0;
}
#contenedorJuego .btnFrijoles{
    background: url('../images/btnRecetaFrijoles.png');
}
#contenedorJuego .btnCochinita{
    background: url('../images/btnRecetaCochinita.png');
}
#contenedorJuego .btnFlan{
    background: url('../images/btnRecetaFlan.png');
}
#contenedorJuego .btnCochinita{}
#contenedorJuego .btnFlan{}
/************************ELEVEN************************/
.decora{
    color: #C80685;
    font-size: 2em;
    font-weight: bolder;
    line-height: 1;
}
.contenidoJuego{
    display: none;
    background: #f6f6f6;

    border: solid #cfcfcf 6px;

    margin: 0 auto;

    overflow: hidden;

    padding: 1%;

    width: 92%;

}


.contObjetos{

    float: left;

    width: 25%;

    background:url("../images/bgIngredientes.jpg") ;

    background-size: 100%;
    padding: 10px;

}

#juego{
    background: url("../images/imgDinamica/BgDecora.jpg") no-repeat;
    -webkit-background-size: 100% 100%;           /* Safari 3.0 */
    -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
    -o-background-size: 100% 100%;           /* Opera 9.5 */
    background-size: 100% 100%;
    
}

.juego{
    text-align: center;
    border: solid #000 1px;
    float: right;
    height: 500px;
    background-size: 100%;
    width: 70%;
    overflow: hidden;
    position: relative;

    -moz-box-shadow:    0px 0px 5px 2px #656565;

    -webkit-box-shadow: 0px 0px 5px 2px #656565;

    box-shadow:         0px 0px 5px 2px #656565;

    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

#platillo{
    position: absolute;
    width: 350px;
    height: 300px;
    margin: 200px 20%;
}

.Receta1{ background: url('../images/Decora/Frijol.png') no-repeat; background-size: 100%;}
.Receta3{ background: url('../images/Decora/Flan.png') no-repeat; background-size: 100%;}
.Receta2{ background: url('../images/Decora/Cochinita.png') no-repeat; background-size: 100%;}

div.juego > div{ position:relative;float:left;width:0px; height:0px;}

li{
    list-style: none;
}

.box{
    display: none;
    margin-top: 10px;
    position:absolute;
    z-index: 1;
}
.box2{
    margin-top: 10px;
    z-index: 1;
}
#cebolla{ background: url('../images/Decora/cebolla.png')no-repeat; width:150px; height:60px; background-size: 80%;}
#cilantro{ background: url('../images/Decora/cilantro.png')no-repeat; width:106px; height:110px; background-size: 80%;}
#chocolate{ background: url('../images/Decora/chocolate.png')no-repeat; width:75px; height:50px; background-size: 80%;}
#hierbas{ background: url('../images/Decora/hierbas.png')no-repeat; width:45px; height:90px; background-size: 80%;}
#fresco{ background: url('../images/Decora/fresco.png')no-repeat; width:71px; height:54px; background-size: 80%;}
#gratinado{ background: url('../images/Decora/gratinado.png')no-repeat; width:220px; height:85px; background-size: 80%;}
#rodajas{ background: url('../images/Decora/rodajas.png')no-repeat; width:110px; height:55px; background-size: 80%;}
#tortilla{ background: url('../images/Decora/tortilla.png')no-repeat; width:127px; height:118px; background-size: 80%;}


.lista ul li{
    padding: 5px;
    width: 100%;
}

.lista ul li input{
    float: left;
height: auto !important;
width: auto !important;
}

#listo{

    background: url('../images/btnListoDecora.png') no-repeat;
    background-size: 100%;
    width: 100%;
    height: 69px;
    margin-top: 40px;
    cursor: pointer;
}

#listo:hover{
    background-position: 0 -69px;
    height: 69px;
}

.platos{

    width: 400px;

    height: 400px;

    margin:20% auto;
}

/**************CZee Glz****************/
.instruccion {
    border-radius: 5px; 
    border: 6px solid #aaa;
    background: url(../images/tooltip.png) repeat;
    color: #4c4c4c;
    width:200px;
    font-family: 'proxima_nova_condensedSBd'; font-size:16px;
}

.instruccion .tooltipster-content {
    font-family: 'proxima_nova_condensedSBd';
    font-size: 28px;
    line-height: 34px;
    padding: 8px 10px;
    width: 230px;
}

.step {display: none; width:800px; height: 500px; margin: 0 auto;}
.step > div{border: .5em solid #d6c9bc;-webkit-box-shadow: 1px 1px 3px 1px #939393;box-shadow: 1px 1px 3px 1px #939393;}
.lista_ingredientes{ background: url(../images/bgIngredientes.jpg) repeat;border-radius: 20px 0 0 20px; width:136px; height: 470px; float:left; padding: 10px;}
.lista_ingredientes h1{text-transform: uppercase; font-size: 22px !important;}
ul#ingredientes li{font-size: 1.5em;list-style-type: none;margin: 4% 0;}
ul#ingredientes li:before{content: "-"; margin-right: 5%;} 
.cocina{ background: url(../images/cocina.jpg); background-size: cover;border-radius: 0 20px 20px 0; width:614px; height: 490px; margin:0 auto; float: right; z-index: 50;}

.scene{display: none;}
.scene div.paso{ /*display: none;*/}
.scene div div:hover{ cursor: pointer;}

.paso div{float: left; position: relative;}
.draggable{ z-index: 80;}
.droppable{ z-index: 90;}
.paso div:hover{cursor: pointer;}

/*****alacena arriba*****/
.left_alacena{ width: 74px;height: 110px; background: url(../images/alacena_left.jpg); background-size: cover; position: relative;top: 37px;left: 9px; float:left;}
.center_alacena{ width: 73px;height: 110px; background: url(../images/alacena_center.jpg); background-size: cover; position: relative;top: 37px;left: 12px; float:left;}
.right_alacena{ width: 44px;height: 110px; background: url(../images/alacena_right.jpg); background-size: cover; position: relative;top: 37px;left: 15px; float:left;}

/*******repisa******/
.repisa{ width: 155px;
height: 104px;
position: relative;
top: 37px;
left: 130px;
float: left;}
.repisa_arriba{ width:100%; height: 53px; position: relative;top: 0px; left: 0px; float: left;}
.repisa_abajo{width:100%; height: 53px; position: relative;left: 0px; float: left;}

/*********arriba de la alacena**********/
.arriba_de_alacena{ width: 206px;
height: 110px;
float: left;
position: relative;
top: 155px;
left: -346px;}

.estufa{ height: 110px;
width: 108px;
float: left;
position: relative;
top: 44px;
left: 206px;}

.micro{ width: 113px;
height: 77px;
position: relative;
float: left;
top: 72px;
left: 249px;}

.micro_abierto_con_olla{width: 113px;
height: 77px;
position: relative;
float: left;
top: 72px;
left: 249px;
background: url(../images/micro_con_olla.png);
background-size: cover;}

/*********alacena de abajo****************/
.alacena_abajo_left{ width: 74px; height: 140px; background: url(../images/alacena_abajo_left.png); background-size: cover; position: relative;top: 170px;left: -211px; float:left;}
.alacena_abajo_center{ width: 73px; height: 140px; background: url(../images/alacena_abajo_center.png); background-size: cover; position: relative;top: 170px;left: -208px; float:left;}
.alacena_abajo_right{ width: 44px; height: 140px; background: url(../images/alacena_abajo_right.png); background-size: cover; position: relative;top: 170px;left: -206px; float:left;}

/***************refri*********************/
.refri_arriba{ width: 114px; height: 196px; position: relative; top: -14px; right: 5px; float: right !important;}
.refri_arriba_abierto{background: url(../images/refri_arriba_abierto.png); background-size: contain;}
    .refri_arriba div{ width:100%; height: 64px; float: left; display: none;}

.refri_abajo{ width: 114px; height: 124px; position: relative; top: 54px; right: -109px; float: right !important;}
.refri_abajo_abierto{background: url(../images/refri_abajo_abierto.png); background-size: contain;}
    .refri_abajo div{ width:100%; height: 58px; float: left; display: none;}

/**************ingredientes*************/
.epazote{ width: 74px; height: 44px; background:url(../images/epazote.png) center no-repeat; background-size: contain; float: left;}
.ajo{ width: 74px; height: 44px; background:url(../images/ajo.png) center no-repeat; background-size: contain; float: left;}
.chorizo{ width: 74px; height: 44px; background:url(../images/chorizo.png) center no-repeat; background-size: contain; float: left;}
.cebolla{ width: 74px; height: 44px; background:url(../images/cebolla.png) center no-repeat; background-size: contain; float: left;}
.jitomate{ width: 33% !important; height: 100% !important; background:url(../images/jitomate.png) center no-repeat; background-size: contain; float: left;}
.jalapeno{ width: 33% !important; height: 100% !important; background:url(../images/jalapeno.png) center no-repeat; background-size: contain; float: left;}
.cuchillo{ width: 74px; height: 44px; background:url(../images/cuchillo.png) center no-repeat; background-size: contain; float: left;}
.trinche{ width: 74px; height: 44px; background:url(../images/trinche.png) center no-repeat; background-size: contain; float: left;}
.carne{ width: 74px; height: 44px; background:url(../images/chuleta.png) center no-repeat; background-size: 50%; float: left;}
.jugo{ width: 74px; height: 44px; background:url(../images/exprimidor.png) center no-repeat; background-size: contain; float: left;}
.tabla{ width: 100px; height: 90%; background:url(../images/tabla.png) center bottom no-repeat; background-size: contain; float: left;}
.tabla_con_carne{ width: 100px; height: 90%; background:url(../images/tabla_carne.png) center bottom no-repeat; background-size: contain; float: left;}
.tijeras{width: 100px; height: 90%; background:url(../images/tijeras.png) center bottom no-repeat; background-size: contain; float: left;}
.huevos{ width: 74px; height: 44px; background:url(../images/huevos.png) center no-repeat; background-size: contain; float: left;}
.leche{ width:100%; height: 100%; background:url(../images/leche.png) center no-repeat; background-size: contain; float: left;}
.qcrema{ width:100%; height: 100%; background:url(../images/qcrema.png) center no-repeat; background-size: 50%; float: left;}

/*******partes de la olla**********/
.olla1{ width: 284px; height: 178px; background: url(../images/olla1.png) center bottom no-repeat; background-size: contain;}
.olla2{ width: 18px; height: 16px; background: url(../images/olla2.png) center bottom no-repeat; background-size: contain;}
.olla3{ width: 39px; height: 30px; background: url(../images/olla3.png) center bottom no-repeat; background-size: contain;}
.olla4{ width: 284px; height: 165px; background: url(../images/olla4.png) center bottom no-repeat; background-size: contain;}
.olla4b{ width: 284px; height: 165px; background: url(../images/olla4b.png) center bottom no-repeat; background-size: contain;}
.olla4c{ width: 284px; height: 210px; background: url(../images/olla4c.png) center bottom no-repeat; background-size: contain;}
.olla5{ width: 36px; height: 26px; background: url(../images/olla5.png) center bottom no-repeat; background-size: contain;}
.olla6{ width: 37px; height: 38px; background: url(../images/olla6.png) center bottom no-repeat; background-size: contain;}
.olla7{ width: 284px; height: 149px; background: url(../images/olla7.png) center bottom no-repeat; background-size: contain;}
.olla8{ width: 284px; height: 166px; background: url(../images/olla8.png) center bottom no-repeat;  background-size: contain;}
.olla9{ width: 284px; height: 202px; background: url(../images/olla9.png) center bottom no-repeat;background-size: contain;}
/*receta1*/
    .frijolesr1s1{ width: 73px;height: 110px; background: url(../images/frijoles.png) center bottom no-repeat;position: relative;top: 37px;left: 12px;}
    .bicarbonato_alacenar1s1{width: 74px;height: 110px; background: url(../images/bicarbonato.png) center bottom no-repeat; position: relative;top: 37px;left: 9px; float:left; background-size: contain;}
    .vacio_alacenar1s1{ width: 44px;height: 110px; background-color: #3F301D !important; position: relative;top: 37px;left: 15px; float:left;}
    .salr1s1{ width: 74px; height: 140px; background: url(../images/sal.png) center bottom no-repeat; background-size: contain; position: relative;top: 170px; left: -211px; float:left;}
    .chipotlesr1s1{ width: 73px; height: 140px; background: url(../images/chipotles.png) center bottom no-repeat; background-size: contain; position: relative;top: 170px;left: -208px; float:left;}
    .vacio_abajor1s1{ width: 44px; height: 140px; background-color: #3F301D !important; position: relative;top: 170px;left: -206px; float:left;}
    .colador{ width:100px; height: 100px; background: url(../images/colador.png) center bottom no-repeat; background-size: contain; float:left; }
    .jarra{ width:100px; height: 100px; background: url(../images/jarra.png) center bottom no-repeat; background-size: contain; float:left; }
    .tazonmini{ width:50px; height: 90%; background: url(../images/tazon_mini.png) center bottom no-repeat; background-size: contain; float:left; }
    .tapaolla{ width:100px; height: 100px; background: url(../images/olla8.png) center bottom no-repeat; background-size: contain; float:left;}
    .tazongrande{width:100px; height: 100px; background: url(../images/tazongrande.png) center bottom no-repeat; background-size: contain; float:left;}
    .boterefri{width:50px; height: 100px; background: url(../images/tazonblanco.png) center bottom no-repeat; background-size: contain; float:left;}
    .sarten{width:100px; height: 100px; background: url(../images/sarten.png) center bottom no-repeat; background-size: contain; float:left;}
    .micro_con_olla_cerrada{width: 113px;
        height: 77px;
        position: relative;
        float: left;
        top: 72px;
        left: 249px;
        background: url(../images/olla10.png) no-repeat;
        background-size: contain;}
    .olla_alacena{ width:100px; height: 100px; background: url(../images/olla10.png) center bottom no-repeat; background-size: contain; float:left; }
    .olla_abierta_alacena{ width:100px; height: 100px; background: url(../images/olla.png) center bottom no-repeat; background-size: contain; float:left; }
    .tapa_olla_alacena{width:100px; height: 100px; background: url(../images/olla8.png) center bottom no-repeat; background-size: contain; float:left;}
    .plato{width:100px; height: 100px; background: url(../images/imgDinamica/imgPlato.png) center bottom no-repeat; background-size: contain; float:left;}
    .flan{width:100px; height: 100px; background: url(../images/flan.png) center bottom no-repeat; background-size: contain; float:left;}
/********receta 2************/
    .r2vinagre_alacena{width: 73px;height: 110px; background: url(../images/vinagre.png) center bottom no-repeat; background-size: contain;position: relative;top: 37px;left: 12px;}
    .r2achiote_alacena{ width: 44px;height: 110px; background: url(../images/achiote.png) center bottom no-repeat; background-size: contain; position: relative;top: 37px;left: 15px; float:left;}
    .vacio_alacena_abajo_left{ width: 74px; height: 140px; background-color: #3F301D !important; position: relative;top: 170px;left: -211px; float:left;}
    .vacio_alacena_abajo_center{ width: 73px; height: 140px; background-color: #3F301D !important; position: relative;top: 170px;left: -208px; float:left;}
    .vacio_alacena_abajo_right{ width: 44px; height: 140px; background-color: #3F301D !important; position: relative;top: 170px;left: -206px; float:left;}
    .tazonmurano{width:100px; height: 100px; background: url(../images/tazonrosa.png) center bottom no-repeat; background-size: contain; float:left;}
/*************receta 3**************/
    .r3azucar_alacena{ width: 74px;height: 110px; background: url(../images/azucar.png) center bottom no-repeat; background-size: contain; position: relative;top: 37px;left: 9px; float:left;}
    .r3coco_alacena{ width: 73px;height: 110px; background: url(../images/coco.png) center bottom no-repeat; background-size: contain; position: relative;top: 37px;left: 12px; float:left;}
    .r3evaporada_alacena{ width: 44px;height: 110px; background: url(../images/evaporada.png) center bottom no-repeat; background-size: contain; position: relative;top: 37px;left: 15px; float:left;}
    .quick{ width:100px; height: 100px; background: url(../images/minichef.png) center bottom no-repeat; background-size: 50%; float:left; }

.alacena{ background-color: #3F301D !important;}
.olla{ width:118px; height: 85px; background: url(../images/olla.png); position: relative; top: 130px;left: 124px; float: left;}
.olla_cerrada{ width:118px; height: 85px; background: url(../images/olla10.png) no-repeat; background-size: contain; position: relative; top: 130px;left: 124px; float: left;}
.olla_cerrada_refri{ width:100%; height: 100%; background: url(../images/olla10.png) no-repeat; background-size: contain;}
.olla_abierta_refri{ width:100%; height: 100%; background: url(../images/olla.png) no-repeat; background-size: contain;}
.oculto{ display: none !important;}

.emergente{ width: 8px;
height: 25px;
background-image: none;
position: relative;
top: 211px;
/* left: 124px; */
float: right;
right: 0px;}

.instrucciones{ width: 98%;
border-radius: 10px;
float: left;
margin: 10px auto;
background: url(../images/bgIngredientes.jpg) repeat;}
.instrucciones > p{display: none; color: #d33179;
font-family: 'proxima_nova_condensedSBd';
font-size: 22px; margin: 20px 0;
text-align: center;}

#capa0 > video{ margin: 25% 0 10%;}
/****************************** ELEVEN
*********************MEDIAS QUERYS*******************/

/* #### Desktops #### */

@media screen and (min-width: 1024px){

    #wrapper{/*border: 2px solid DeepPink; */width: 810px;}

}

@media (max-width: 800px) {
    
    #platillo{
        margin: 200px 10%;
    }

}

@media screen and (min-width: 768px) and (max-width: 1023px){

    #wrapper{/*border: 2px solid Red;*/width: 810px;}

}

@media screen and (min-width: 20px) and (max-width: 767px){

    #wrapper{/*border: 2px solid chocolate;*/

             -moz-box-shadow:    none;

             -webkit-box-shadow: none;

             box-shadow:         none;

             width: 100%;}

    footer{font-size: 0.9em;}

    .txtBases{width:80%;}

    .contInfo .btnRegresarHome{height: 47px;width: 250px;}

    .contInfo .btnRegresarHome:hover{background-position: 0 -47px; height: 47px;}

    /*Formulario*/

    #contForm h2{padding:4%}

    #formInfo{width: 95%;}

    #formInfo label{float: none; width: 100%;}

    #formInfo .txtinput{float: none; margin-top: 3%; width: 90%;}

    #formInfo textarea{float: none; margin-top: 3%; width: 90%;}

    #formInfo #submitbtn{font-size: 1.75em;padding: 4% 0;width: 80%;}


    #test-modal{width:90%;}

    #test-modal h3{font-size: 2.5em;}

    #test-modal .txt1{font-size: 1.5em;}

    #test-modal .image{width: 100%;}

    #test-modal .btnDescargar{height: 78px;width: 315px;}

    #test-modal .btnDescargar:hover{background-position: 0 -78px; height: 78px;}

    /*Home*/

    .contenidoHome h1{font-size: 2.2em;margin: 0 auto;width: 90%;}

    .copyHome p{font-size: 2.5em;line-height: 22px;}

    .btnEntrar{height: 63px;width: 250px;}

    .btnEntrar:hover{background-position: 0 -62px; height: 63px;}

    /*Interior*/

    .contenidoInterior h1{}

    .btnInfo{ height: 201px;width: 315px;}

    .btnInfo:hover{background-position:  0 -201px; height: 201px;}

    .comenzar .btnComenzar{height: 67px;width: 250px;}

    .comenzar .btnComenzar:hover{background-position: 0 -67px; height: 67px;}

    .titleDinamica img{width: 100%;}

    .titleParticipa img{width: 100%;}

    .inst ul{width: 90%;}

    .inst .btn{width: 80%;}

    /*Participantes*/

    .participantes{width: 95%;}

    .titleParticipantes h4{font-size: 1.6em;}

    .titleParticipantes .btn_invita{padding: 3% 2%;width: 70%;}

    #boxesParticipantes .box{float: none; margin: 5% auto 0;width: 90%;}

    .btns{margin: 2% auto 3%;width: 37%;}

    .btns li{float: none;margin: 0;width: 100%;}

    .btns li:first-of-type{margin: 0;}

    /*Infografia*/

    .contInfo h1{font-size: 1.5em;width: 90%;}

    .contInfo .btnRegresarHome{height: 61px;}

    .contInfo .btnRegresarHome:hover{background-position: 0 -61px; height: 61px;}

    /*Dinámica*/

    #contenedorJuego ul {width: 200px;}

    #contenedorJuego ul li{float: none;}

}



/* #### Tablets Portrait or Landscape #### */

@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait){

    #wrapper{/*border: 2px solid GreenYellow;*/width: 100%;}  

}

@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : landscape){

    #wrapper{/*border: 2px solid orchid;*/width: 70%;}  

}

@media (max-width: 650px) {
  .contObjetos{
    display: block;
    width: 100%;
    float: left;
  }

  .decora{
    line-height: 1!important;
  }

  #platillo{
    margin: 30px 20%;
  }

  .lista ul li{
    display: inline-block;
  }

  #juego{
    width: 100%;
    display: block;
    float: left;
    height: 300px;
  }
}


/* #### Mobile Phones Portrait or Landscape #### */

@media screen and (max-device-width: 640px){

    #wrapper{/*border: 2px solid blueviolet;*/width: 100%;}

    #contForm h4{margin: 0 auto;width: 80%;}

    #formInfo {width: 75%;}

    #formInfo .txtinput{font-size: 1.4em;}

}



/* #### Mobile Phones Portrait #### */

@media screen and (max-device-width: 480px) and (orientation: portrait){

    #wrapper{/*border: 2px solid forestgreen;*/width: 100%;}

    .txtBases{padding: 2% 0;}

    /*Home*/

    .copyHome h1{font-size: 1.5em;line-height: 24px;}

    /*Formulario*/

    #formInfo{width: 90%;}

    #formInfo label{font-size: 1.5em}

    #formInfo .txtinput{font-size: 1.5em;padding: 3%;}

    #formInfo textarea{font-size: 1.5em;}

    #test-modal .contGracias{padding: 8% 2%;}

    #test-modal h3 {font-size: 3em;}

    #test-modal .txt2{font-size: 1.5em;}

    #test-modal .btnDescargar{height: 66px;width: 265px;}

    #test-modal .btnDescargar:hover{background-position: 0 -66px; height: 66px;}

}



/* #### Mobile Phones Landscape #### */

@media screen and (max-device-width: 640px) and (orientation: landscape){

    #wrapper{/*border: 2px solid LightBlue;*/width: 100%;}

}

@media (max-width: 550px){
    #platillo{
        margin: 40px 17%;
    }
}


/* #### iPhone 4+ Portrait or Landscape #### */

@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){

    #wrapper{/*border: 2px solid Orange;*/width: 100%;}

    .txtBases{padding: 2% 0;}

    /*Home*/

    .copyHome h1{font-size: 1.5em;line-height: 24px;}

    /*Interior*/

    .infoMando h1{font-size: 2.4em;padding: 0 3%;}

    .inst ul{width: 100%;}

    .inst ul li span{width: 6%;}

    .inst ul li .img{width: 25%;}

    .inst ul li p{width: 68%;}

    .inst .btn{font-size: 2.2em;width: 90%;}

    /*Formulario*/

    #formInfo{width: 90%;}

    #formInfo label{font-size: 1.5em}

    #formInfo .txtinput{font-size: 1.5em;padding: 3%;}

    #formInfo textarea{font-size: 1.5em;}

    #test-modal .contGracias{padding: 8% 2%;}

    #test-modal h3 {font-size: 3em;}

    #test-modal .txt2{font-size: 1.5em;}

    #test-modal .btnDescargar{height: 66px;width: 265px;}

    #test-modal .btnDescargar:hover{background-position: 0 -66px; height: 66px;}

    /*Dinamica*/

    #contenedorJuego h2{font-size: 1.8em;padding: 2% 3%;}

    
    #platillo{
        margin: 40px 10%;
    }

}


@media (max-width: 400px){
    #platillo{
        margin: 110px 10%;
    }

    .Frijol, .Flan, .Cochinita {
        background-size: 70%;
    }

    #cebolla, #cilantro, #chocolate, #hierbas, #fresco, #gratinado, #rodajas, #tortilla{
        background-size: 100%;    
    }
    #cebolla{ width:50px; height:30px;}
    #cilantro{ width:56px; height:60px;}
    #chocolate{ width:55px; height:40px;}
    #hierbas{ width:30px; height:50px;}
    #fresco{ width:40px; height:34px;}
    #gratinado{ width:90px; height:45px;}
    #rodajas{ width:60px; height:35px;}
    #tortilla{ width:67px; height:68px;}

    #listo{
    background-size: 50%;
    height: 51px;
    margin-top: 0px;
    margin-left: 50px;
    }

    #listo:hover{
        height: 51px;
        background-position: 0 -51px;
    }
}