@charset "utf-8";
/* CSS Document */

/*GENERALES*/

    .fila-flex{
        -ms-box-orient: horizontal;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -moz-flex;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        -moz-flex-direction: row;
        flex-direction: row;
    }

    .columna-flex{
        -ms-box-orient: vertical;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -moz-flex;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        -moz-flex-direction: column;
        flex-direction: column;
    }

    .derecha-horizontal{
        -webkit-justify-content: flex-start;
        -ms-justify-content: flex-start;
        -ms-flex-pack: start;
        -moz-justify-content: flex-start;
        justify-content: flex-start;
    }

    .centrar-horizontal{
        -webkit-justify-content: center;
        -ms-justify-content: center;
        -ms-flex-pack: center;
        -moz-justify-content: center;
        justify-content: center;
    }

    .izquierda-horizontal{
        -webkit-justify-content: flex-end;
        -ms-justify-content: flex-end;
        -ms-flex-pack: end;
        -moz-justify-content: flex-end;
        justify-content: flex-end;
    }

    .centrar-vertical{
        -webkit-align-self: center;
        -moz-align-self: center;
        -ms-flex-align: center;
        align-self: center;
    }

    .espacio-entre {
        -webkit-justify-content: space-between;
        -moz-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .cambio-linea{
       -webkit-flex-wrap: wrap;
       -ms-flex-wrap: wrap;
       -moz-flex-wrap: wrap;
       flex-wrap: wrap;
    }

    .animaall{
        -webkit-transition: all 1s ease 0s;
        -moz-transition: all 1s ease 0s;
        -ms-transition: all 1s ease 0s;
        -o-transition: all 1s ease 0s;
        transition: all 1s ease 0s;
    }

    .comprimir{
        -webkit-justify-content: space-around;
        -ms-justify-content: space-around;
        -ms-flex-pack: center;
        -moz-justify-content: space-around;
        justify-content: space-around;
    }

    .extender{
        -webkit-justify-content: space-between;
        -ms-justify-content: space-between;
        -ms-flex-pack: justify;
        -moz-justify-content: space-between;
        justify-content: space-between;
    }

    .nomodelocaja{
        -webkit-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }


/*----SELECCION MULTIPLE----*/
/*----RADIO BUTTON PREGUNTAS----*/
.radioPregunta {
    width: 60% !important;
    height:auto;
    margin-top: 5vh;
    padding: 40px;
    background: rgba(255,255,255,.5);
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size:1.1em;
    position: relative;
}

.radioPregunta input[type=radio] {
    display:none;
}

.radioPregunta label {
    display: block;
    margin-left: 20px;
    margin-bottom: 15px;
    position:relative;
    cursor:pointer;
    -webkit-transition:all 0.3s ease;
    -o-transition:all 0.3s ease;
    transition:all 0.3s ease;
}

.radioPregunta label:hover {
    opacity:0.4;
}

.radioPregunta label:before {
    background-color: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(0, 0, 0, 0.5);
    border-radius: 2em;
    content: "";
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    margin: 0 0.5em;
    padding: 0.2em;
    opacity: 0.5;
    position: absolute;
}

.radioPregunta label::before {
    left: -43px;
    margin: 0 0.5em;
    position: absolute;
    top: 5px;
}

.radioPregunta input[type=radio]:checked + label:before {
    content: "\2022";
    color: rgba(0, 0, 0, 0.7);
    font-size: 1em;
    text-align: center;
    line-height: 0.5em;
}

.radioPregunta .pregunta {
    width: 100px;
    height: 100px;
    background-image:url(../images/interfaz/pregunta.svg);
    background-size: cover;
    position: absolute;
    top: -50px;
    right: -30px;
}

.retro {
    min-height:6%;
    height: auto;
    width: 50%;
    padding:3%;
    position: fixed;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -40%);
    box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
	border-radius:15px;
}

.retroMal {
    background-color: #D21A1A;
    min-height: 20%;
    height: auto;
    width: 50%;
    padding: 3%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%);
}
.retroMal::before {
    content: "";
    height: 100%;
    width: 50px;
    position: absolute;
    left: -50px;
    top: 0;
    z-index: 35;
    background: #DA4444;
}
.retroMal::after {
    content: "";
    height: 100%;
    width: 50px;
    position: absolute;
    right: -50px;
    top: 0;
    z-index: 35;
    background: #DA4444;
}
.retroBien {
    background-color: rgba(136, 178, 65, 0.95);
    min-height:20%;
    height: auto;
    width: 50%;
    padding:3%;
    position: fixed;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -40%);
    box-shadow: 5px 5px 5px #38511d;
}

.cierraRetro {
    background: none;
    border:none;
    height: 50px;
    left: 50%;
    margin: -25px;
    bottom: 50px;
    width: 50px;
    position: absolute;
    background-image:url(../images/interfaz/cierra.svg);
    background-position:center;
    background-repeat:no-repeat;
    cursor:pointer;	
    -webkit-transition:all 0.3s ease;
    -o-transition:all 0.3s ease;
    transition:all 0.3s ease;
}  

.cierraRetro:hover {
    opacity:0.4;
}

.selector {
    height: auto;
    margin: 0 auto;
    width: 98%;
}

.selector ul{
    list-style:none;
    counter-reset:li;
    width:100%;
    margin: 0;
    padding: 0;
}

.selector li{
    position:relative;
    margin:0 0 10px 0;
    padding: 3px 2px 0 17px;
    left:-5px;
    width:100%;
    border-radius: 3em 0;
    cursor:pointer;
}

.selector ul li{
    position: relative;
    display: block;
    padding: .4em .2em .4em 2em;
    *padding: .2em;
    margin: .5em 0;
    text-decoration: none;
    -webkit-transition:all 0.3s ease;
    -o-transition:all 0.3s ease;
    transition:all 0.3s ease; 
}

.selector ul li:before{
    background-color: rgba(0, 0, 0, 0.3);
    border: 3px solid #fff;
    border-radius: 2em;
    color: #fff;
    content: counter(li, decimal);
    counter-increment: li;
    font-size: 1.1em;
    font-weight: 600;
    height: 2em;
    left: 0;
    line-height: 2em;
    margin: -1.2em 1em;
    position: absolute;
    text-align: center;
    top: 50%;
    transition: all 0.3s ease-out 0s;
    width: 2em;
}

.selector ul li:hover{
    background: #eee;
}

.selector ul li:hover:before{
    transform: rotate(360deg);   
}

.selector ul li span{
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size:1em;
    color: #fff;
    display:block;
    min-height:25px;
    text-decoration:none;
    padding: .7em .7em .7em 4em;
    -webkit-transition:all 0.3s ease;
    -o-transition:all 0.3s ease;
    transition:all 0.3s ease;
}

/*---SIMULADOR FORMULARIO (lista desplegable)---*/
.matrizPregunta {
    font-family: "Open Sans",sans-serif;
    background: rgba(255, 255, 255, 0.5) none repeat scroll 0 0;
    height: auto;
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
    width: 100%;
}

.matrizPregunta .pregunta {
    background-image: url("../images/interfaz/pregunta.svg");
    background-size: cover;
    height: 100px;
    position: absolute;
    right: -30px;
    top: -50px;
    width: 100px;
    border-radius: 100px;
}

.matrizPregunta .toda-tabla{
    width: 100%;
    overflow-x: scroll;
}

.matrizPregunta table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    display: table;
}

.matrizPregunta table tr{
    width: 100%;
}

.matrizPregunta table td, .matrizPregunta table th {
    width: 10%;
    height: auto;
    border: 1px solid #ccc;
    text-align: center;
    font-size: 0.9em;
}

.matrizPregunta table th {
    background: lightblue;
    border-color: white;
}

.matrizPregunta table select {
    width: 100%;
}

/*---ARRASTRE VARIO S A UNO---*/
.matrizPregunta .tabla-1 {
    -ms-box-orient: horizontal;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    font-size: 0.9em;
    font-family: "Open Sans",sans-serif;
}

.matrizPregunta .tabla-1>div:nth-child(1) {
    -ms-box-orient: horizontal;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    -moz-flex-direction: row;
    flex-direction: row;
}

.matrizPregunta .tabla-1>div:nth-child(1) div {
    border: 1px solid lightblue;
    margin: 0.2em;
    padding: 0.5em;
    background: lightblue;
    box-sizing: border-box;
}

.matrizPregunta .tabla-1>div:nth-child(1) div h2{
    border-bottom: 1px solid #0e6666;
    color: #0e6666;
    font-size: 1em;
    padding-bottom: 0.5em;
}

.matrizPregunta .tabla-1>div:nth-child(2) {
    margin: 0.2em;
}

.matrizPregunta .tabla-1>div:nth-child(2) div{
    background: #0e6666;
    margin: 0.2em 0;
    padding: 0.5em;
    color: white;
}

.matrizPregunta .tabla-1>div div.drop div{
    background: #0e6666;
    color: white;
}


.matrizPregunta .tabla-1>div div.drag{
    cursor: pointer;
}

/*---ARRASTRE 1 : 1---*/
.matrizPregunta .tabla-2{
    font-size: 0.9em;
    font-family: "Open Sans",sans-serif;
    text-align: center;
    color: white;
}

.matrizPregunta .tabla-2 div.noact {
    width: 50px;
}

.matrizPregunta .tabla-2 div.act {
    width: 200px;
}

.matrizPregunta .tabla-2 div div{
    height: 30px;
    margin: 5px;
    padding: 5px;
    background: #a31d3f;
    box-sizing: border-box;
}

.matrizPregunta .tabla-2 div div.drop, .matrizPregunta .tabla-3 div div.drop{
    opacity: .6;
}

.matrizPregunta .tabla-2 div div.dropp, .matrizPregunta .tabla-3 div div.dropp{
    opacity: .3;
}

.matrizPregunta .tabla-3 {
    font-size: 0.9em;
    font-family: "Open Sans",sans-serif;
    text-align: justify;
    color: white;
    -webkit-justify-content: space-between;
    -ms-justify-content: space-between;
    -ms-flex-pack: justify;
    -moz-justify-content: space-between;
    justify-content: space-between;
}

.matrizPregunta .tabla-3 div.drag, .matrizPregunta .tabla-3 div div.drop{
    height: 80px;
    width: 126px;
    margin: 5px;
    padding: 10px;
    background: rgb(105, 102, 153);
    box-sizing: border-box;
	text-align:center;
	border-radius:10px;
	
}

.matrizPregunta .tabla-3 div div.texto{
    width: 385px;
    margin: 5px;
    background: rgb(105, 102, 153);
    box-sizing: border-box;
	border-radius:10px;
	padding:10px
}

.matrizPregunta .tabla-3 div div.dropp{
    opacity: 1;
    background: #446b80;
}


/*-----------------------------------------------------------------------*/

.actividadDrop{
	background:rgb(0,153,255);
	display:flex;}
.columna-d-1{}
.d-fila-1{}
.d-texto{}
.d-espacio{}
.columna-d-2{
	background:rgb(153,204,51);
	width:300px;}


/*-------------------------------------------------------------------------*/

@media screen and (max-width:1368px){
	
.radioPregunta {
    width: 80% !important;
    height:auto;
    margin-top: 5vh;
    padding: 40px;
    background: rgba(255,255,255,.5);
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size:1.1em;
    position: relative;
}

.selector {
    height: auto;
    margin: 0 auto;
    width: 100%;
}