@import url(//fonts.googleapis.com/css?family=Roboto);
* {
  box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
}
a, a:link, a:hover, a:visited {
  color: gray;
  text-decoration: none;
  font-weight: 100;
}
body {
  font-family: "Helvetica Neue", "HelveticaNeue", "Roboto", Helvetica, Arial, "Lucida Grande", sans-serif; 
  margin: 0px;
  font-size: 1.5vw;
}
h2 {
  margin: 0px;
  padding-left: .33vw;
}
p {
  padding-left: .33vw;
  font-weight:100;
}
.separa {
  color: #f6adcb;
}
#container {
  border: 1vw solid #f6adcb;
  max-width: 100%;
  margin: 0px auto;
  overflow: hidden;
}
#cabecera {
  padding: 3%;
  overflow: hidden;
  display: flex;
}
#bajo {
  text-align:center;
  color: gray;
  font-size: 1vw;
  padding: 1vw;
  font-weight: 100;
}
#cabecera .b {
  width: 25%;
  display: flex;
  flex-direction: column;
}
#cabecera .b1 .c1 {
  font-size: 2vw;
}
#cabecera .c1 {
  flex: 1 0 auto;
  align-content: flex-end;
  padding-bottom: 2em;
}
.c1 img{
  width:50%;
}
.c2 img{
  width:100%;
}
.b2 .c2 {
  margin: .5em 2.1em;
  color: gray;
  line-height: 1.15;
}
.c2 b {
  color: black;
}
#desde {
  margin-top: -0.75vw;
}
#cabecera .faq div{
  border-bottom: 1px solid #ccc;
  font-size: 1.2vw;
  margin-left: 6em;
}
#cabecera .titulo{
  font-size: 3.5vw;
  font-weight: bold;
  line-height: 0.9em;
}
#situa {
  clear: both;
  color: white;
  background-color: #f6adcb;
  font-weight: bold;
  overflow: hidden;
  font-size: 1.5vw;
  padding: .33vw 2vw;
}
#situa .cir{
  color: #f6adcb;
  background-color: #fdd;
  border-radius: 1vw; 
  width: 1.8vw;
  display: inline-block;
  text-align: center;
}
#situa .activa .cir {
  background-color: white;
}
#container_dentro {
  overflow: hidden;
  padding: 1em 13%;
}
#contenido {
  float: left;
  width: 75%;
  padding: 1vw 0px;
}
.#portada {
  border-right: 1px solid lightgrey;
}
#duda {
  float: left;
  width: 25%;
}
#portada {
  display: flex;
 padding: 2vw 1vw;
}
#modalidad {
  display: flex;
  padding: 1vw 0px;
  flex-wrap: wrap;
}
.explica {
  flex: 1 0 auto;
  color: gray;
  font-size: 1.1vw;
  font-weight: 100;
}
.explica ul{
  margin: 0 ;
  padding: 0 1vw 0;
}
.explica li {
 margin-bottom: .5vw;
}
.explica p {
  margin: 0px;
  margin-bottom: 1vw;
}
.tip.op,
.tit{
  font-size: 1.8vw;
  font-weight:bold;
  cursor: pointer;
}
#aportar .tit {
  font-size: 2.3vw;
}
.sr {
}
.modalidad .subtit{
  font-size: 1.6vw;
  padding: 0.25em 0em;
  margin-bottom: 1em;
  font-weight: 100;
}
#form .subtit{
  font-size: 1.1vw;
  font-weight:normal;
  padding: .5vw 1vw 1vw 2vw;
  color: gray;
}
#form #aportar .bono_otra{
  padding-left: 2vw;
}
.modalidad {
  display: flex;
  flex-direction: column;
  width: 33%;
  padding: 0px 1vw 1vw 1vw;
  border-right: 1px solid lightgrey;
  margin-bottom: 1vw;
}
.fondo {
  background-color: #f6adcb;
  background-color: rgba(247,153,207,0.8);
}
.finalizar {
  clear: both;
  border: none;
}
.finalizar,
.validar,
.mov,
.quiero,
.ele .op {
  color: white;
  background-color: #f6adcb;
  padding: .15em 1vw;
  font-weight: bold;
  font-size: 1.6vw;
  cursor: pointer;
  margin-top: 1vw;
}
.op {
  display: inline-block;
}
.quiero {
  font-size: 2.5vw;
}

#desde {
  font-size: 2.3vw;
}
.faw {
  padding: 0.5em 1em;
}
.tit.op:hover,
.faq div:hover{
  background-color: #f6adcb;
}
.finalizar:hover,
.validar:hover,
.quiero:hover,
.mov:hover,
.op:hover{
  background-color: black ;
}
.validar {
  float: right;
  border:none;
}
.col {
  font-size: 1.5vw;
  margin: 0px auto;
}
.col p{
  padding: 0px;
  color: gray;
}
.lin {
  margin: 0px 1.4vw;
  border-bottom: 1px solid lightgrey;
}
.lin:hover {
  background-color: #f6adcb;
}
.ot {
  border-bottom: 1px solid lightgrey;
  width: 65%;
}
.otras_op .lin {
  margin: 0px;
  font-size: 2vw;
  width: 65%;
}

#situa .m {
 color: #333;
 margin-right: .33vw;
}
#situa .activa {
  color: white;
}

.antseg {
  padding: 1vw .33vw;
  margin-top: 1vw;
  clear: both;
}
.mov_o {
  text-align: center;
  color: white;
  background-color: lightgrey;
  padding: 3px 20px;
  font-weight: bold;
  font-size: 12px;
  cursor: pointer;
  width: 140px;
}
#ir_aportar,
#ir_datos,
#ir_modalidad {
  float:left;
}
#bono_w #ir_datos,
#ir_pago {
  float:right;
}
.duda{
  text-transform: uppercase;
  font-size: 1vw;
  font-weight: bold;
}
#duda {
  padding: 2vw 1vw;
}
#duda input,
#duda textarea {
  padding: .33vw;
  width: 100%;
  border: 1px solid lightgrey;
  margin: .33vw 0px;
}
#duda textarea {
  height: 250px;
}
#duda button {
  border: none;
  color: white;
  background-color: lightgrey;
  font-weight: bold;
  cursor: pointer;
  font-size: 1.4vw;
  float: right;
}
#duda button:hover {
  background-color: black;
}

.paro {
margin: 1vw .33vw;
padding: 0px 1vw;
background-color: #fcfcfc; 
border: 1px solid lightgrey;
font-size: 1.1vw;
clear: both;
}
.paro p {
  color: gray;
}
#radio {
  padding: 1vw 1vw 1vw 0px;
  float: left;
  width: 25%;
  font-size: 1.35vw;
  font-weight: bold;
}
#radio .tit {
  font-size: 1.2vw;
  margin-bottom: .5em;
}
h2 {
  font-size: 2.3vw;
}
#domi h2{
  padding-top: .75em;
}
#aportar {
  margin-top: 1vw;
}
#aportar,
#datos_in {
  padding: 0px 1vw;
  float: left;
  width: 75%;
  border-left: 1px solid lightgrey;
  border-right: 1px solid lightgrey;
}

select,
input {
  border: 1px solid lightgrey;
  padding: .33vw;
  background-color: white;
}

#bono_otra{
  width: 8em;
}
#facturacion,
#personales {
  margin-top: 1vw;
  overflow: hidden;
}
h2.envio,
#facturacion {
  clear: both;
  padding-top: 4vw

}
#facturacion {
  margin-bottom: 4vw;
}
.todo {
  width: 100%;
  padding: .66vw .33vw;
}
#telefono,
#regalo_email,
#regalo_telefono,
#factura_cp,
#factura_dni,
#factura_loca,
#factura_estado,
#factura_provincia,
#envio_cp,
#envio_loca,
#envio_estado,
#envio_provincia_2,
#factura_provincia_2,
#envio_provincia,
#dni, #email, #dnif,
#envio_direccion,
#factura_titular,
#direccion_factura,
#nombre_factura,
#envio_nombre,
#pago_titular,
#telefono,
#nombre {
  font-size: 1.5vw;
  width: 100%;
}
#ano {
  font-size: 1.5vw;
}
#factura_dni{
  width: 33%;
}

#envio_provincia_2,
#factura_provincia_2{
  display: none;
}
.email label,
.dni label{
  display: none;
}
.telefono,
.dni {
  float:left;
  width: 35%;
  padding: .33vw;
}
.email {
  width: 65%;
  float:left;
  padding: .33vw;
}
#personales .telefono {
  clear:both;
  padding: .66vw .33vw;
  float: left;
}
.bono_otra {
  font-size: 1.4vw;
}
#bonos {
  padding-bottom: .66vw;
  overflow: hidden;
}
.bono {
  width: 20%;
  float: left;
  color: white;
  cursor: pointer;
  font-size: 1.8vw;
  font-weight: bold;
  text-align: center;
}
.sr input+label,
.st input+label{
  font-size: 2vw;
}
.st {
  margin-top: 4vw;
}
#aportar .paro{
  margin-top: 4vw;  
}
#radio input[type="radio"]:checked+label{ 
  background-color: #f6adcb;
}
.bono .int {
  background-color: #f6adcb;
  margin: .33vw;
  padding: 2px;
} 
label:hover{
  background-color: #f6adcb;
}
.bono .int:hover {
  background-color: black;
}
#bono_otra {
  margin-left: .33vw;
  font-size: 1.5vw;
}
.subl {
  color: gray;
  font-weight: 100;
}
.ano {
  padding: .33vw;
  padding-top: .66vw;
  text-align: left;
  width: 65%;
  color: gray;
  font-weight: 100;
  float: left;
}
.bono_otra input,
.ano input{
  font-size: 1.5vw;
  width: 4.5em;
  color: gray;
}
.ano input{
  width: 9.5em;
}
.bono_otra input.reno {
  width: auto;
  margin-left: 2vw;

}
.eco {
padding: 1vw 0px;
clear:both;
color: gray;
font-size: 1.2vw;
}
#proteccion_datos input+label{
  color: gray;
}
#proteccion_datos {
  margin-top: 5vw
}
.cp, .loca, .pro, .pais {
  width: 50%;
  float: left;
  padding: .33vw;
  padding-bottom: .66vw;
}

#pago_tipo {
  float: left;
  width: 30%;
  padding: 1em 0em;
  font-size: 1.25vw; 
  font-weight: bold;
}
#pago_sel {
  float: left;
  width: 70%;
  padding: 1vw;
  border-left: 1px solid lightgrey;
  border-right: 1px solid lightgrey;
}
#pago_tipo p {
  color: gray;
  font-weight: 100;
  padding-left: 1.25vw;
  padding-right: 0.5vw;
}
#gracias .tit{
  font-size: 2.5vw;
  font-weight: bold;
}
#total_info {
  font-size: 1.2vw;
  margin-bottom: 6vw;  
  color: gray;
}
.tt {
  font-size: 1.7vw;
}
#otras p{
  font-size: 1.5vw;
  margin: .5vw 2vw;
}
#otras img {
  width: 75%;
  margin-left: 1.75vw;
}
#gracias p{
  color: gray;
  font-size: 1.75vw;
}
#gracias {
  padding: 2vw;
  text-align: center;
}
.col3 {
  width: 33%;
  float: left;
  color: gray;
}
#gracias input {
  float: left;
}
#gracias .label{
  margin: 0 1vw 0 3vw;
  text-align: left;

}
.fin {
  clear: both;
}
p.puedes {
  color: gray;
}
#paypal {
  margin-top: 3vw;
}
.carro {
  border-bottom: 1px solid gray;
  font-size: 1.4vw;
}
#personales_dona {
  padding-top: 6vw;
}
input.ccc:-webkit-outer-spin-button,
input.ccc::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;  
}
input.ccc {
  -moz-appearance:textfield;
  width: 3.5em;
  font-size: 1.5vw;
}
.politica {
  text-align: left;
}
.int.activa {
  background-color: black;
}
.cuenta_inter {
  color: gray;
  font-size: 1.2vw;
  padding-left: 3vw;
}
#colectivo {
  padding-top: 4vw;
}
#form .colectivo .bono {
  width: 33%;
}
.colectivo #radio li,
.colectivo #radio p{
  color: gray;
  font-weight: 100;
  font-size: 1.1vw;
}
.colectivo #radio li{
  margin: 1vw 0vw;
}
.colectivo #radio ul{
    padding: 0 0 0 1.5vw;
}
.colectivo #radio .tit{
  font-size: 1.5vw;
}