body {
background-color:transparent;
font-size: 16px;
}

h2 {
text-align:center;
}

button {
-moz-transition:all 200ms linear;
-ms-transition:all 200ms linear;
-o-transition:all 200ms linear;
-webkit-transition:all 200ms linear;
background-color:#f6f6f6;
display:inline-block;
font-family:titillium-font;
font-weight:500;
min-width:260px;
min-height: 45px;
outline:transparent;
padding:7px;
text-align:center;
transition:all 200ms linear;
}

button::-moz-focus-inner {
	border:0;
}

#container {
color:#1a1a1a;
font-family:titillium-font;
font-size:14px;
font-weight:500;
height:auto;
margin:auto;
opacity:0;
padding:0;
width: 100%;
}

#preguntas {
margin:auto;
position:relative;
width:94%;
}

.pregunta {
border-top:2px solid #1a1a1a;
padding-top:15px;
position:relative;
width:100%;
}

.textoPreg {
	width: 100%;
	height: auto;
	display: block;
	color: #1a1a1a;
	text-align: center;
	margin: 20px 0;
	font-size: 20px;
	line-height: 24px;
	border-top: 1px solid #cccccc;
	padding-top: 14px;
}

.numPregunta {
color:#1a1a1a;
display:block;
font-size:36px;
font-weight:100;
text-align:center;
width:100%;
}

.imgQuiz {
display:block;
margin:15px auto auto;
width: 100%;
border-top: 3px solid #1a1a1a;
}

.botonesResp {
  height: auto;
  margin-top: 1.3em;
  text-align: center;
  width: 100%;
}

.butResp {
border:1px solid #1a1a1a;
color:#1a1a1a;
cursor:pointer;
display:inline-block;
font-size:16px;
margin-left:30px;
margin-top:15px;
opacity:1;
position:relative;
}

.respondida .butResp {
cursor:default;
opacity:0.36;
}

.respondida .butResp.butResp1 {
background-color:#77C16C;
border-color:#77C16C;
color:#fff;
}

.respondida .butResp.butResp1:not(.pulsada) {
color:#1a1a1a;
border-color:#1a1a1a;
}

.respondida .butResp.pulsada {
opacity:1;
}

.respondida .butResp.pulsada:not(.butResp1) {
background-color:#F75D5F;
border-color:#F75D5F;
color:#fff;
}

.pregunta:not(.respondida) .butResp:hover {
background-color:#1187b8;
color:#fff;
}

.butResp i {
color:#fff;
font-size:21px;
position:absolute;
right: 7px;
top: 7px;
}

/* CUSTOM CSS de los BOTONES */

/*Ejemplo 1: Color en borde y color del texto del botón, que pasa a background en el hover (Para ver: Descomentar este y comentar el ejemplo activo)*/
.pregunta:not(.respondida) .butResp.podemosBut{color:#54075B; border-color:#54075B;}
.pregunta:not(.respondida) .butResp.csBut{color:#EF7A36;border-color:#EF7A36;}
.pregunta:not(.respondida) .butResp.podemosBut:hover{background-color:#54075B; color:#fff;}
.pregunta:not(.respondida) .butResp.csBut:hover{background-color:#EF7A36; color:#fff;}

/* Ejemplo 2: Color personalizado del botón al pasar por encima */
/*.pregunta:not(.respondida) .butResp.podemosBut:hover{background-color:#54075B;}
.pregunta:not(.respondida) .butResp.csBut:hover{background-color:#EF7A36;}*/

/* Ejemplo 3: Color personalizado del botón desde el principio y opacity en hover (Para ver: Descomentar este y comentar el ejemplo activo) */
/*.pregunta:not(.respondida) .butResp.podemosBut{background-color:#54075B; color:#fff;}
.pregunta:not(.respondida) .butResp.csBut{background-color:#EF7A36;color:#fff;}
.pregunta:not(.respondida) .butResp.podemosBut:hover{background-color:#54075B; opacity:0.7;}
.pregunta:not(.respondida) .butResp.csBut:hover{background-color:#EF7A36; opacity:0.7;}*/


.mensajeResp {
clear:both;
height:auto;
margin: 2em auto;
text-align:center;
width:100%;
font-size: 1.2em;

}

.mensajeResp span {
	display:inline-block;
	line-height:17px;
	opacity:0;
	line-height: 1.5em;
}

#score {
margin:auto;
position:relative;
text-align:center;
width:94%;
padding-bottom: 4em;
}

#score span {
font-size:21px;
}

#score span span {
font-size:33px;
}

body *,option,select {
outline:transparent!important;
}

body ::-moz-focus-inner,option::-moz-focus-inner,select::-moz-focus-inner {
border:0!important;
}


/* FOOTER: RRSS, LOGO, METODOLOGÍA */
#footer{text-align:center; margin-top:15px; margin-bottom:10px; position:relative;}
#footer a{display:inline-block; color:#1187B8; padding:5px;margin:3px; opacity:1; font-size:30px; margin-right:5px;
	-webkit-transition: all 400ms linear; -moz-transition: all 400ms linear;
	-o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear;
}
#footer a.sinm{margin-right:0px;}
#footer a:hover{opacity:1;}
#footer a#tw:hover{color:#33CCFF;}
#footer a#fb:hover{color:#3C5A98;}
#footer a#gplus:hover{color:#DA4835;}

@media screen and (max-width: 620px){
	.botonesResp{
		width: 100%;
		text-align: center;
	}

	.butResp1, .butResp2, .butResp3, .butResp4{
		margin-left: 0px;
	}
	
	button {
		min-width: 100%;
		height: 3.1em;	}

	.butResp i{
		right: 11px;
 		top: 13px;
	}

	#score {
		padding-bottom: 4em;
	}

}