/*custom font*/


@import url(https://fonts.googleapis.com/css?family=Roboto+Slab);



/*basic reset*/
* {margin: 0; padding: 0;}

html {
	height: 110vh;
	/*Image only BG fallback*/
	
	/*background = gradient + image pattern combo*/
	
}

body {
	font-family: 'Roboto Slab', arial, verdana;
	
	color: #222;
	
}
.img-central {
	max-width: 400px;
}
legend {
	font-size: 20pt;
	line-height: 22pt;

}
#finalizar{
	background: url(finalizar.png) no-repeat center / contain!important
}
.leyenda-txt {

	font-size: 12pt;
	padding-bottom: 10px;
	text-align: left;
	width: 100%;
}
#msform textarea {

	padding: 15px;
	border: none;
	border-radius: none;
	margin-bottom: 10px;
	font-family: 'Roboto Slab';
	height: 198px;
	color: #111;
	font-size: 13px;
	margin-top: 20px;
	text-transform: uppercase;
	width: 250px;
	background: url(cuadro-de-texto.png);
	background-size: contain;
	text-align: center;
	outline: none;
	resize: none;
	box-shadow: none;
	overflow: auto;
}
.volver{

	width: 130px!important;
	height: 39px!important;
	background-size: contain!important;

	margin:  30px 0 -20px 0!important;
	position: absolute;
	margin-top: 30px!important;
	left: 0;
}
.action-button.next {
			width: 130px!important;
			height: 39px;
			
		position: absolute;
	
		right: 0;
			margin: 30px -20px 0 0!important;
		}

.ultimo {

	width: 600px!important;
	margin-left: -100px!important;
}

.txtc {

	text-align: left;
	text-indent: 10px;
}
.sqvamos {

    width: 400px;
    height: 100px;
    
    background-image: url(boton-vamos-a-evaluar.png)!important;
    background-size: contain!important;
    background-repeat: no-repeat;
   
    display: flex;
    align-items: center;
    
    margin: 10px;
    padding: 5px;
    padding-top: 30px;
    justify-content: center;
    background-position: center;

}

.slide {
    border: none; 
    opacity: 0; 
    position: absolute; 
    
    left: 0;
    -webkit-transition: opacity 1s linear;
    -moz-transition: opacity 1s linear;
    -o-transition: opacity 1s linear;
    transition: opacity 1s linear;
    top: 0;
   
    height: 100%;
    margin-left: 0;
    object-fit: cover;
   
}
.showMe {opacity: 1;}
.swal2-container {
	padding: 0rem!important;
}
.swalimg{

	max-width: 400px;
}
.bgg {
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
}
.b1 {
	background: url(1-fondo.jpg) no-repeat bottom / cover;
}
.b2 {
	background: url(2-fondo.jpg) no-repeat bottom / cover;
}
.b3 {
	background: url(3-fondo.jpg) no-repeat bottom / cover;
}

.b4 {
	background: url(4-fondo.jpg) no-repeat bottom / cover;
}

.b5 {
	background: url(5-fondo.jpg) no-repeat bottom / cover;
}
.b6 {
	background: url(6-fondo.jpg) no-repeat bottom / cover;
}
.b7 {
	background: url(7-fondo.jpg) no-repeat bottom / cover;
}
.b8 {
	background: url(8-fondo.jpg) no-repeat bottom / cover;
}
.b9 {
	background: url(9-fondo.jpg) no-repeat bottom / cover;
}



input[type="radio"]{

	width: 25px!important;
}
.titulo{


    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    

}
.titulo2{


    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    

}
.break {
  flex-basis: 100%;
  height: 0;
}
/*form styles*/
#msform {
	width: 400px;
	margin: 50px auto;
	text-align: center;
	position: relative;
}
#msform fieldset {
	/*background: white;
	border: 0 none;
	border-radius: 3px;
	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
	padding: 20px 30px;
	box-sizing: border-box;*/
	width: 80%;
	margin: 0 10%;
	display: flex;
	align-items: flex-end;
	flex-direction: column;
	
	/*stacking fieldsets above each other*/
	position: relative;
}

.fieldsetradio {

	display: inline!important;
	text-align: left;
}
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
	display: none;
}
/*inputs*/
#msform input {
	padding: 15px;
	border: 1px solid #ccc;
	border-radius: 3px;
	margin-bottom: 10px;
	width: 100%;
	box-sizing: border-box;
	font-family: montserrat;
	color: #2C3E50;
	font-size: 13px;
}
/*buttons*/
#msform .action-button {
	width: 100px;
	background: #27AE60;
	font-weight: bold;
	color: white;
	border: 0 none;
	border-radius: 1px;
	cursor: pointer;
	padding: 10px 5px;
	margin: 10px 5px;
}
.action-button.next {
		width: 130px!important;
			height: 39px;
		background: #31cf99!important;
		position: absolute;
	
		right: 0;
			margin: 30px -20px 0 0!important;
			color: #222!important;
    font-size: 18pt!important;
    line-height: 12pt;
    font-family: 'Roboto Slab'!important;
    text-transform: uppercase;

}
#msform .action-button:hover, #msform .action-button:focus {
	box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
/*headings*/
.fs-title {
	font-size: 15px;
	text-transform: uppercase;
	color: #2C3E50;
	margin-bottom: 10px;
}
.fs-subtitle {
	font-weight: normal;
	font-size: 13px;
	color: #666;
	margin-bottom: 20px;
	position: absolute;
	top: -20px;
	left: 5px;
}
/*progressbar*/
#progressbar {
	margin-bottom: 30px;
	overflow: hidden;
	/*CSS counters to number the steps*/
	counter-reset: step;
}
#progressbar li {
	list-style-type: none;
	color: white;
	text-transform: uppercase;
	font-size: 9px;
	width: 33.33%;
	float: left;
	position: relative;
}
#progressbar li:before {
	content: counter(step);
	counter-increment: step;
	width: 20px;
	line-height: 20px;
	display: block;
	font-size: 10px;
	color: #333;
	background: white;
	border-radius: 3px;
	margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
	content: '';
	width: 100%;
	height: 2px;
	background: white;
	position: absolute;
	left: -50%;
	top: 9px;
	z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
	/*connector not needed before the first step*/
	content: none; 
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,  #progressbar li.active:after{
	background: #27AE60;
	color: white;
}
.sq {
  cursor: pointer;
  background-image: url(recuadro-chico.png);
  background-size: cover;
    background-repeat: no-repeat;
    color: #111;
}

.sq:hover {
  background-image: url(recuadro-chico-activo.png);
  background-size: cover;
    background-repeat: no-repeat;
    color: #000;
}
input[type="radio"]:checked + label div {
  background-image: url(recuadro-chico-activo.png);
  background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
}
input[type="checkbox"]:checked + label div {
  background-image: url(recuadro-chico-activo.png);
  background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
}
.radio{
	display: none;
}

.sq {

    width: 120px;
    height: 120px;
   /* border: 2px solid #888;*/
    border-radius: 15px;
    display: flex;
    align-items: center;
  /*  background-color: #a9d;*/
    margin: 10px;
    padding: 5px;
    justify-content: center;
    font-size: 18pt;
    line-height: 20pt;
}

.txt {

	width: 254px!important;
	height: 30px!important;
	border: 2px solid #888!important;
	
	box-sizing: unset!important;
}

.sqfieldset {

	display: flex;
	flex-flow: row nowrap;
	height: 100%;
}
br {
  content: '\A';
  display: contents;
  white-space: pre;
}

.sqdiv {

	display: flex;
	flex-flow:  row wrap;
	justify-content: center;
}
.nota {
    width: 120px!important;
    height: 120px!important;
    font-weight: bolder;
    background: #31cf98;
    border-radius: 50%;
    font-size: 35pt;
}
}




.txt:focus {
	/*color: #fff!important;*/
	font-family: 'Roboto Slab'!important;
}
.navegacion {
	width: 100%;
	padding-top: 20px;
}

@media screen and (max-width: 600px) {

	.swalimg {
		width: 100%;
	}
		  #msform {
			width: 100%;
			margin: 10px auto;
			text-align: center;
			position: relative;
			display: flex;
			justify-content: center;
		}
		fieldset {
			/*background: white;
			border: 0 none;
			border-radius: 3px;
			box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
			padding: 20px 30px;
			box-sizing: border-box;*/
			width: 80%;
			margin: 0!important;
			display: flex;
			align-items: center!important;
			flex-direction: column;
			
			/*stacking fieldsets above each other*/
			position: relative;
		}
		.action-button.next {
			width: 130px!important;
			height: 39px;
			background: url(boton-seguir.png) no-repeat center / contain!important;
		position: absolute;
	
		right: 0;
			margin: 30px -20px 0 0!important;

		}
.notadiv {
	justify-content: center;
}
.titulo {
/*	padding-top: 0px;*/
	align-items: center;
	flex-direction: column;
}
.titulo-logo {

	height: 100px;
/*	margin-top: 50px;*/
	padding-bottom: 20px;
}
.img-central {
	height: 250px;
}
.sqvamos {

    width: 200px;
    height: 100px;
    
    
    background-size: contain!important;
    background-repeat: no-repeat;
   
    display: flex;
    align-items: center;
    
    margin: 10px;
    padding: 5px;
    padding-top: 30px;
    justify-content: center;
    background-position: center;

}
.sq {

	width: 100px;
	height: 100px;
}
legend {
	font-size: 16pt;
}
.volver{
	
	width: 130px!important;
	height: 39px!important;
	background-size: contain!important;

	margin:  30px 0 -20px 0!important;
	position: absolute;
	
	left: 0;
}
#msform textarea {

	padding: 15px;
	border: none;
	border-radius: none;
	margin-bottom: 10px;
	font-family: 'Roboto Slab';
	height: 198px;
	color: #111;
	font-size: 13px;
	margin-top: 20px;
	text-transform: uppercase;
	width: 250px;
	background: url(cuadro-de-texto.png);
	background-size: contain;
	text-align: center;
	outline: none;
	resize: none;
	box-shadow: none;
	overflow: auto;
}
.leyenda-txt {

	font-size: 12pt;
	padding-bottom: 10px;
	text-align: left;
	width: 100%;
}

.slide {

	top: 0;
	height: 100%;
	width: auto;

}


}
@media screen and (max-width: 327px) {
.sq {padding: 0!important;	}



}
@media screen and (min-width: 601px) {
.sqfp {margin: 0!important;	}



}


.form-group {
  margin: 7px 0;
  position: relative;
  display: inline-block;
}
  
.form-label {
  padding: 12px;
  pointer-events: none;
  position:absolute;
  left:0;
  top:0;
  transition: 0.2s;
  transition-timing-function: ease;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  opacity:0.5;
}

.form-control {
  padding: 12px 16px!important;
  width: 100%!important;
  background: rgba(255, 255, 255, 0.5);
  font-size: 20px;
}

.form-group input:focus + label, .form-group input:not(:placeholder-shown) + label {
  opacity:1;
  transform: scale(0.75) translateY(-100%) translateX(-30px);

}

/* For IE Browsers*/
.form-group input:focus + label, .form-group input:not(:-ms-input-placeholder) + label {
  opacity:1;
  transform: scale(0.75) translateY(-100%) translateX(-30px);
}


.ultimomobilelegend {

	padding-left: 100px!important;
	width: 100%;
}

.ultimomobile {

	padding-left: 160px;
}