body { font-family: "Montserrat", Arial, Helvetica, sans-serif; font-size: 16px; background: #f9f9f9; color: #636667; }
body a { color: #e10000; text-decoration: none; }
body a:hover { text-decoration: underline; }
body #content { width: 100%; max-width: 780px; margin: 0 auto; background: #fff; }
body #content #promo p { margin: 0; padding: 0;}
body #content #promo { text-align: center; position: relative; background-size:cover;}
body #content #promo:after { display: block; clear: both; content: ""; }

body #content #promo #texto1, body #content #promo #texto2, body #content #promo #texto3 { display: block; clear: both; padding: 2em 0 0 2em;}
body #content #promo #texto2 { padding-left: .5em;}
body #content #promo #texto2, body #content #promo #texto3 { padding-top: .5em;}
body #content #promo #logoTucTuc { position: absolute; top: 1em; right: 1em;}
body #content #promo #nina { position: absolute; top: 5em; right: 5em;}

body #content #promo #pasos { position: relative;}
body #content #promo #pasos #paso1 { padding:0 3em 0 1em;}
body #content #promo #pasos #paso2 { position: relative; top:-1em;}
body #content #promo #pasos #flecha1 { position: absolute; top:5em; left: 43%;}
body #content #promo #pasos #flecha2 { position: absolute; bottom:-4em; right: 10%;}

body #content #formulario { text-align: center; }
body #content #formulario:after { display: block; clear: both; content: ""; }
body #content #formulario h2 { font-size: 1.2em; color: #000; }
body #content #formulario form { text-align: center; width: 90%; margin: 0 auto 30px auto; }
body #content #formulario form:after { display: block; clear: both; content: ""; }
body #content #formulario form label { width: 38%; float: left; padding: 0 2% 10px 0; text-align: right; }
body #content #formulario form input.text { width: 55%; float: left; margin: 0 0 10px 0; }
body #content #formulario form input#enviaDatos { margin: 0 auto; text-align: center; background: #e10000; color: #fff; padding: 5px 10px; border: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; cursor: pointer; }
body #content #formulario form input#enviaDatos:hover { opacity: .7; }
body #content #formulario form textarea { width: 55%; height: 80px; float: left; }
body #content #formulario form .separador { display: block; font-size: .8em; text-align: center; width: 100%; }
body #content #formulario form .separador:after { display: block; clear: both; content: ""; }
body #content #formulario form .verBases { color: #555; text-decoration: none; font-size: .8em; }
body #content #formulario form .verBases:hover { text-decoration: underline; }

body #content #promo.respuesta #logoTucTuc, body #content #promo.respuesta #nina { position: inherit; top: auto; right: auto;}

@media only screen and (max-width: 700px) { 
body #content #promo #texto1, body #content #promo #texto2, body #content #promo #texto3 {text-align:center; margin:0 auto; max-width:90%; padding-left:0;}
body #content #promo #texto1 {padding-top:8em;}
body #content #promo #logoTucTuc { position: absolute; top: 1em; right: 43%;}
body #content #promo #nina { position: inherit; top: auto; right: auto; max-width:95%;}
body #content #promo #pasos #paso2 {margin-top:2em;}
body #content #promo #pasos #flecha1 {-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); top:13em; max-width:90%; }
body #content #promo #pasos #flecha2 {right:43%;max-width:90%;}
}
@media only screen and (max-width: 400px) { 
  body #content #promo #header { padding-top: 2em; }
  body #content #promo #text { margin-top: 3em;}
  body #content #formulario form label { width: 100%; float: none; padding: 0 0 10px 0; text-align: center; }
  body #content #formulario form input.text { width: 100%; float: none; margin: 0 0 10px 0; }
  body #content #formulario form textarea { width: 100%; height: 80px; float: none; }
  body #content #formulario form .separador { display: block; font-size: .8em; text-align: center; width: 100%; }
  body #content #formulario form .separador:after { display: block; clear: both; content: ""; } 
}

#textoPromo { background: #ddd; font-weight: bold; font-size: 1.3em; padding: 10px 10%;}
.resQuiniela {
    display: block;
    font-size: 1.3em;
    font-weight: bold;
    margin: 0 auto;
    text-align: center !important;
    width: 100% !important;
}

.campoVacio { border: 1px solid #e10000; }
span.campoVacio { border: 0; color: #e10000; }
#contenedor { width:100%; max-width:780px; height:auto; margin:0 auto; position:relative; text-align:left;}
#contenedor #triangulo { position:absolute; top:0; right:0;}
#contenedor #logoAVIA { position:absolute; top:0; right:2%;}
#contenedor #txt1, #contenedor #txt2, #contenedor #txt3 { margin:20px 0 10px 7%;}
#contenedor #promo { margin:0 auto; text-align:center; width: 100%;}
.divQuiniela { float: left; display: block; width: 100%; margin: 0 43%; }
.imgQuiniela { cursor: pointer; float: left; width: 30px; height: 30px  }
#imgQuiniela1 { background: url('/concursos/quinieibar/img/1.png') no-repeat; }
#imgQuinielax { background: url('/concursos/quinieibar/img/x.png') no-repeat; }
#imgQuiniela2 { background: url('/concursos/quinieibar/img/2.png') no-repeat; }
#imgQuiniela1:hover { background: url('/concursos/quinieibar/img/1h.png') no-repeat; }
#imgQuinielax:hover { background: url('/concursos/quinieibar/img/xh.png') no-repeat; }
#imgQuiniela2:hover { background: url('/concursos/quinieibar/img/2h.png') no-repeat; }
body #content #promo { height:auto;!important}

@media only screen and (max-width: 665px) { 
	#contenedor #triangulo { display:none;}
	#contenedor #logoAVIA { position:relative; top:inherit; right:inherit; margin-left:40%;}
}
@media only screen and (max-width: 420px) { 
	#contenedor #logoAVIA { margin-left:35%;}
}