@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: #fff; color: #000;font-size: 1em;padding:4% 4% 1%;}
footer ul{}
footer li{margin-bottom:15px;list-style:none;text-align:justify;}
footer li a{color:#000;display:block;text-align:center;text-decoration:none;padding: 1% 0;}
footer li a:hover{text-decoration:underline;}

/*HOME*/
.contenidoHome{background: #000;}
.contenidoHome .imgHome{display: block;width: 100%;}
.contenidoHome .imgHome img{display: block;width: 100%;}
.copyHome{background: #000;color: #fff;padding-bottom: 10%;text-align: center;}
.copyHome h1{font-family: 'proxima_nova_condensedlight';font-size: 2.46153846em;padding: 0 5%;}
.copyHome p{font-family: 'proxima_nova_condensedSBd';font-size: 4em;padding: 4% 0;}
.btnEntrar{background: transparent url('../images/btnEntraya.png');background-size: 100%;display: block; height: 99px;margin: 0 auto;width: 348px;}
.btnEntrar:hover{background-position: 0 -99px; height: 99px;}

/*INTERIOR*/
.contenidoInterior{background: url('../images/backInterior.jpg') repeat-y; background-size: 100%;}
.imgInterior img{width: 100%;}
.infoMando{
    padding: 4% 0 0;
}
.infoMando h1{
    font-family: 'proxima_nova_condensedSBd';
    font-size: 2.76923077em;
    text-align: center;
}
.btnInfo{
    background: url('../images/btnSorprendete.png'); background-size: 100%; display: block; height: 65px; margin: 4% auto; width: 342px;
}
.btnInfo:hover{
    background-position: 0 -65px;
    height: 65px;
}
.titles{
    color: #d40000;
    font-family: 'proxima_nova_condensedSBd';
    font-size: 2.76923077em;
    padding: 6% 0 0;
    text-align: center;
    text-transform: uppercase;
}
.titles span{
    display: block;
}

/*Formulario*/
#contForm{color:#2E2E2E;padding:3% 0 6%;}
#contForm h4{color:#000;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/subtle-grey.png) white repeat;
    background-position:center 0;
    background-size: 100%;
    border: .5em solid #d40000;
    margin: 0 auto;
    position:relative;
    text-align:center;
    width:485px;
}
.test-modal .contGracias{color: #000;padding: 2% 0 8%;}
.test-modal h3{color:#d40000;font-family: 'proxima_nova_condensedSBd';font-size:3.38461538em;padding: 0% 3% 3%;text-transform: uppercase;}
.test-modal .txt1{font-size:1.84615385em;padding: 0 10% 4%;}
.test-modal .txt2{font-size: 1.38461538em;padding: 0 10%;}
.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 #d40000;
    display:block;
    right: -5%;
    top: -5%;
    padding:1%;
    position: absolute;
    width:8%;
}
.test-modal .popup-modal-dismiss img{
    width: 100%;
}
.test-modal .btnDescargar{
    background: #d40000;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    color: #fff;
    display: block;
    font-family: 'proxima_nova_rgbold';
    font-size: 2.30769231em;
    margin: 2% auto;
    padding: 2% 0;
    text-align: center;
    text-decoration: none;
    width: 70%;
}
.test-modal .btnDescargar:hover{
    background: #ec8000;

}
.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;
}
#juego1, #juego2, #juego3{ display: none;}
/*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:#000;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:#e8181f;
    -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:#ff5700;}
#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 .box .imgBox{}
#boxesParticipantes .box .imgBox img{display: block;width: 100%;}
#boxesParticipantes .box .txtBox{}
.txtBox .name{background: #000; color: #fff;font-family: 'proxima_nova_cn_rgregular';font-size: 1.38461538em; text-align: center; padding: 4% 1%;}
.txtBox .title{color: #d62121;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;}

/*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{}
.contInfo img{
    display: block;
    width: 100%;
}
.contInfo .btnRegresarHome{
    background: url('../images/btnRegresarHome.png');
    background-size: 100%;
    display: block;
    height: 65px;
    margin: 3% auto;
    width: 342px;
}
.contInfo .btnRegresarHome:hover{
    background-position: 0 -65px;
    height: 65px;
}

/*Dinámica*/
.bg{background: url(../images/subtle-grey.png) repeat; }
#contenedor_juego{
    margin: 6% 0 0;
}
.comenzar{}
.comenzar .btnComenzar{
    background: url('../images/btnComenzar.png');
    background-size: 100%;
    display: block;
    height: 110px;
    margin: 0 auto;
    width: 388px;
    border: 0;
}
.comenzar .btnComenzar:hover{
    background-position: 0 -110px;
    height: 110px;
}
.inst{
    background: url(../images/subtle-grey.png) white repeat;
    padding: 4% 0;
}
.inst .star{
    text-align: center;
}
.inst .fel{
    color: #c10000;
    font-family: 'proxima_nova_rgbold';
    font-size: 2.76923077em;
    text-align: center;
}
.inst .tx{
    font-size: 2.30769231em;
    padding: 2% 0;
    text-align: center;
}
.inst .title{
    color: #cc0000;
    font-family: 'proxima_nova_condensedSBd';
    font-size: 2.30769231em;
    text-align: center;
}
.inst ul{
    margin: 0 auto;
    width: 80%;
}
.inst ul li{
    overflow: hidden;
    padding: 2% 8%;
}
.inst ul li span{
    color: #cc0000;
    float: left;
    font-family: 'impactregular';
    font-size: 2.30769231em;
    width: 4%;
}
.inst ul li .img{
    float: left;
    width: 20%;
}
.inst ul li .img img{width: 100%;}
.inst ul li p{
    float: left;
    font-size: 1.53846154em;
    text-align: left;
    width: 75%;
}
.inst .btn{
    background: #c10000;
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    color: #fff;
    display: block;
    font-family: 'proxima_nova_cn_rgregular';
    font-size: 1.53846154em;
    margin: 0 auto;
    padding: 2% 4%;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 70%;
}
.inst .btn:hover{
    text-decoration: underline;
}
.tiempoRecorrido{
    border: 1px solid #9f9f9f;
    margin: 0 auto 3%;
    padding: 2% 3%;
    text-align: center;
    width: 40%;
}
.tiempoRecorrido .time{
    font-family: 'proxima_novasemibold';
    font-size: 2em;
}
.tiempoRecorrido .number{
    color: #7b7b7b;
    font-family: 'proxima_nova_cn_rgregular';
    font-size: 2.2em;
}
.juegoUno{
    background: #fff;
    overflow: hidden;
    padding: 2%;
    position: relative;
}
.juegoUno .izq{
    background: #000;
    color: #fff;
    height: 95%;
    position: absolute;
    top:3%;
    width: 25%;
}
.juegoUno .izq .ti{
    font-family: 'proxima_nova_cn_rgregular';
    font-size: 2.30769231em;
    text-align: center;
}
.juegoUno .izq .tiempo{
    padding: 8% 0;
}
.juegoUno .izq .seg{
    border: 1px solid #fff;
    font-size: 2em;
    margin: 0 auto;
    padding: 3% 0;
    text-align: center;
    width: 130px;
}
.juegoUno .izq .ingredientes{}
.juegoUno .izq .ingredientes ul{
    font-size: 1.38461538em;
    margin: 4% auto 0;
    width: 75%;
}
.juegoUno .izq .ingredientes ul li{
    margin: 4% 0;
    overflow: hidden;
}
.juegoUno .izq .ingredientes ul li span{
    float: left;
    margin-right: 4%;
}
.juegoUno .der{
    background: url('../images/imgJuegoUno.jpg') no-repeat;
    background-size: 100%;
    border: 3px solid #cccccc;
    -webkit-box-shadow: 1px 2px 2px 2px #B0B0B0;
    box-shadow: 1px 2px 2px 2px #B0B0B0;
    height: 420px;
    float: right;
    width: 75%;
}
.juegoDos{
    background: #fff;
    padding: 2%;
}
.juegoDos .border{
    border: 3px solid #cccccc;
    -webkit-box-shadow: 1px 2px 2px 2px #B0B0B0;
    box-shadow: 1px 2px 2px 2px #B0B0B0;
    overflow: hidden;
}
.juegoDos .izq{
    background: rgb(255,255,255); /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iI2Q5ZDlkOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(217,217,217,1) 99%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(99%,rgba(217,217,217,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(217,217,217,1) 99%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(217,217,217,1) 99%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(217,217,217,1) 99%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(217,217,217,1) 99%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d9d9d9',GradientType=0 ); /* IE6-8 */
    color: #424242;
    float: left;
    width: 25%;
}.juegoDos .izq .ti{
    font-family: 'proxima_nova_cn_rgregular';
    font-size: 2.30769231em;
    text-align: center;
}
.juegoDos .izq .tiempo{
    padding: 8% 0;
}
.juegoDos .izq .seg{
    border: 1px solid #424242;
    font-size: 2em;
    margin: 0 auto;
    padding: 3% 0;
    text-align: center;
    width: 130px;
}
.juegoDos .izq p{
    color: #c51111;
    font-size: 1.3em;
    padding: 0 4%;
    text-align: center;
}
.juegoDos .izq ul{}
.juegoDos .izq ul li{
    float: left;
    margin: 3%;
    width: 100%;
}
.juegoDos .izq ul li img{
    width: 100%;
}
.juegoDos .der{}
.juegoDos .der .in{
    background: #66a032;
    color: #fff;
    font-family: 'proxima_nova_rgbold';
    font-size: 1.1em;
    padding: 1% 0;
    text-align: center;
}
.juegoTres{
    background: #fff;
    padding: 2%;
}
.juegoTres .border{
    border: 3px solid #cccccc;
    -webkit-box-shadow: 1px 2px 2px 2px #B0B0B0;
    box-shadow: 1px 2px 2px 2px #B0B0B0;
}
.juegoTres .tiempo{
    background: #000;
    color: #fff;
    font-size: 2.30769231em;
    padding: 2% 0;
    text-align: center;
}
.juegoTres ul{overflow: hidden;}
.juegoTres ul li{
    border: 2px outset #cccccc;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    width: 33.3333%;
}
.juegoTres ul li img{
    display: block;
    width: 100%;
}

/******************************CGH*************************************/
.dispensador{ width: 100%; height: 85px;}
.dispensador > .ingr{width:20%; text-align: center; float: left;}
.contenedor_vaso{margin-top: 41%; position: static;}
.contenedor_vaso > img{ width:20%; margin-left: 40%;}
.opciones_corte{ width: 51%; float: right;}
.grupos_ingredientes{ width: 24%; float: left; text-align: center;}
.grupos_ingredientes > img{ width: 32%;}
#droppable_area{ float: left; width: 100%;}
.border_hover{ border: 2px solid #dedede;}
.drag{ display: none;}
.image_encima{
    z-index:333;
    position:absolute;
    }
/**************************************************************************************MEDIAS QUERYS*******************/
/* #### Desktops #### */
@media screen and (min-width: 1024px){
    #wrapper{/*border: 2px solid DeepPink;width: 810px;*/}
}
@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%;}
    /*Home*/
    .contenidoHome h1{font-size: 2.2em;margin: 0 auto;width: 90%;}
    .copyHome p{font-size: 2.5em;line-height: 22px;}
    .btnEntrar{height: 71px;width: 250px;}
    .btnEntrar:hover{background-position: 0 -71px; height: 71px;}
    /*Interior*/
    .contenidoInterior h1{}
    .btnInfo{height: 47px;width: 250px;}
    .btnInfo:hover{background-position:  0 -47px; height: 47px;}
    .comenzar .btnComenzar{height: 70px;width: 250px;}
    .comenzar .btnComenzar:hover{background-position: 0 -70px; height: 70px;}
    .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: 100px;*/}
    .btns{margin: 2% auto 3%;width: 37%;}
    .btns li{float: none;margin: 0;width: 100%;}
    .btns li:first-of-type{margin: 0;}
    /*Dinámica*/
    .juegoUno{position: static;}
    .juegoUno .izq{position: static;width: 100%;}
    .juegoUno .izq .tiempo{overflow: hidden;padding: 2% 0;width: 100%;}
    .juegoUno .izq .ingredientes ul{margin: 2% auto 0;overflow: hidden;}
    .juegoUno .izq .ingredientes ul li{float: left;width: 32%;}
    .juegoUno .der{float: none;width: 100%;}
    .juegoDos .izq{float: none;overflow: hidden;width: 100%;}
    .juegoDos .izq .tiempo{padding: 2% 0;}
    .juegoDos .der{clear: left;}
    .juegoDos .der .in{font-size: 1.5em;}
    .juegoDos .izq .cortes ul{margin: 2% auto 0;overflow: hidden;}
    .juegoDos .izq .cortes ul li{float: left;width: 32%;}
}

/* #### 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%;*/}  
}

/* #### 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;}
    /*Formulario*/
    #formInfo{width: 90%;}
    #formInfo label{font-size: 1.5em}
    #formInfo .txtinput{font-size: 1.5em;padding: 3%;}
    #formInfo textarea{font-size: 1.5em;}
}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
    #wrapper{/*border: 2px solid LightBlue;width: 100%;*/}
}

/* #### 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 p{font-size: 2em;line-height: 35px;}
    /*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;}
    /*Dinamica*/
    .juegoUno .izq .ingredientes ul{width: 90%;}
    .juegoUno .izq .ingredientes ul li{float: none;text-align: center;width: 100%;}
    .btns{width: 60%;}
    #test-modal .btnDescargar{padding: 5% 0;width: 95%;}

}