@charset "utf-8";
/* CSS Document */
.limpiar{clear:both;}
.limpiar10{clear:both;height:10px;}
.flotari{float: left;}
.flotard{float: right;}
.encabezado{
	font-family:'Fira Sans', sans-serif;
	font-size:16px;
	font-weight:400;
}
.question-container {
	text-align: center;
    width: 100%;
    border: none;
    color: #545E6B;
    display: block;
    font-weight: 400;
    line-height: 28px;
    margin-bottom: 10px;
    position: relative;
}
.mensaje {
	font-family: 'Fira Sans', sans-serif;
	font-size:18px;
	font-weight:600;
    width: 98%;
    border: 1px solid #E53935;
    border-radius: 5px;
    background-color: #44f814;
    margin: 10px;
    padding: 10px;
}
.question{
	font-family: 'Fira Sans', sans-serif;
	font-size:20px;
	font-weight:400;
}
.global{
	font-family: 'Fira Sans', sans-serif;
	font-size:24px;
	font-weight:400;
}
.respuestas-contenedor{padding:20px;border-bottom:1px solid rgba(225,225,225,.5);}
.respuestas{
	padding: 10px;
	font-family: 'Fira Sans', sans-serif;
	font-size:16px;
	color:#333;
	font-weight:400;
}
.campotexto {
	font-family: 'Fira Sans', sans-serif;
	font-size:16px;
	color:#181818;
	background-color:#F1F1F1;
	border:1px solid #CCC;
	padding:4px;
}
.boton {
	font-family: 'Fira Sans', sans-serif;
	font-size:18px;
	color:#FFF;
	background-color:#5bb8d8;
	border:0px solid #CCC;
	padding:8px;
}
.radio{
	padding: 5px;
	border-color: #5bb8d8;
}
.titular{
	font-family: 'Fira Sans', sans-serif;
	font-size:26px;
	font-weight: 700;
	color:#5bb8d8;
}

a.titular{
	font-family: 'Fira Sans', sans-serif;
	font-size:24px;
	font-weight: 700;
	color:#5bb8d8;
	text-decoration: none;
}
a.titular:hover {color:#CCC;}
.texto{
	font-family: 'Fira Sans', sans-serif;
	font-size:14px;
	font-weight: 400;
	color:#666;
	text-align:justify;
	line-height:20px;
}
.progreso{
	font-family: 'Fira Sans', sans-serif;
	font-size:12px;
	font-weight:400;
	color:#5bb8d8;
}
.cabecera{
	padding:2px;
	font-family: 'Fira Sans', sans-serif;
	font-size:14px;
	color:#333;
	font-weight:700;
}
.resultados{
	padding:2px;
	font-family: 'Fira Sans', sans-serif;
	font-size:14px;
	color:#5bb8d8;
	font-weight:400;
}
.progress {
    height: 35px;
    width: 100%;
    border: 1px solid #02B126;
    border-radius: 5px;
    background-color: #e6f3fa;
    margin-bottom: 15px;
}
.progress-bar {
    height: 100%;
    background: #02B126;
    display: flex;
    align-items: center;
    transition: width 0.25s;
    border-radius: 5px;
} 
.progress-bar-text {
    margin-left: 10px;
    font-weight: bold;
    color: #cce7f5;
}

.progress-orange {
    height: 35px;
    width: 100%;
    border: 1px solid #D77F09;
    border-radius: 5px;
    background-color: #e6f3fa;
    margin-bottom: 15px;
}
.progress-bar-orange {
    height: 100%;
    background: #D77F09;
    display: flex;
    align-items: center;
    transition: width 0.25s;
    border-radius: 5px;
} 
.progress-bar-text-orange {
    margin-left: 10px;
    font-weight: bold;
    color: #cce7f5;
}
.progress-red {
    height: 35px;
    width: 100%;
    border: 1px solid #E53935;
    border-radius: 5px;
    background-color: #e6f3fa;
    margin-bottom: 15px;
}
.progress-bar-red {
    height: 100%;
    background: #E53935;
    display: flex;
    align-items: center;
    transition: width 0.25s;
    border-radius: 5px;
} 
.progress-bar-text-red {
    margin-left: 10px;
    font-weight: bold;
    color: #cce7f5;
}
/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}
/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1%;
}
.col:first-child {margin-left:0;}
/*  GROUPING  */
.group:before,
.group:after { content:""; display:table;}
.group:after {clear:both;}
.group {zoom:1; /* For IE 6/7 */ }

/*  GRID OF FOUR  */
.span_4_of_4 {width: 100%;}
.span_3_of_4 {width: 74.5%;}
.span_2_of_4 {width: 49%;}
.span_1_of_4 {width: 24%;}
/*  GRID OF SIX  */.span_6_of_6 {
	width: 100%;
}
.span_5_of_6 {
  	width: 83.06%;}
.span_4_of_6 {
  	width: 66.13%;}
.span_3_of_6 {
  	width: 49.2%;}
.span_2_of_6 {
  	width: 32.26%;}
.span_1_of_6 {
  	width: 15.33%;
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width:480px) {
	.col {margin: 1% 0 1% 0%;}
	.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 {width:100%;}
	.span_1_of_6, .span_2_of_6, .span_3_of_6, .span_4_of_6, .span_5_of_6, .span_6_of_6 {width:100%;}
	
.titular{font-size:22px;}
.question{font-size:18px;}
.respuestas{font-size:14px;}
}