/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Permanent+Marker');

/* =========================================================================
   BASE
   ========================================================================= */
body {
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    line-height: 1.7;
}

/* =========================================================================
   PASO 03 - SELECTORES Y GIRADORES
   ========================================================================= */
.paso03-girador {
    float: right;
    padding: 5px 5px 5px 5px;
    width: 90px;
    background-color: #eee;
    color: #000;
    cursor: pointer;
    margin-left: 20px;
    text-align: center;
}

.paso03-girador.selected,
.paso03-girador:hover {
    background-color: #000;
    color: #fff;
}

.paso03-selector {
    float: left;
    padding: 5px 5px 5px 10px;
    background-color: #eee;
    color: #000;
    width: 15%;
    cursor: pointer;
    margin-right: 20px;
}

.paso03-selector.mini {
    width: 15%;
}

.paso03-selector-grosor {
    float: left;
    background-color: #eee;
    color: #000;
    cursor: pointer;
    width: 70px;
    margin-right: 0px;
    padding: 5px 5px 5px 10px;
}

.paso03-selector:hover,
.paso03-selector.selected,
.paso03-selector-grosor.selected,
.paso03-selector-grosor:hover {
    background-color: #000;
    color: #fff;
}

/* =========================================================================
   TÍTULOS DE PASO
   ========================================================================= */
.paso-titulo {
    background-color: #000;
    padding: 5px 5px 5px 10px;
    color: #FFF;
    letter-spacing: 2px;
}

.paso-semititulo {
    background-color: #000;
    padding: 5px 5px 5px 10px;
    color: #FFF;
    letter-spacing: 2px;
    float: left;
    width: 48%;
    opacity: .25;
    cursor: pointer;
}

.paso-semititulo:hover,
.paso-semititulo.selected {
    opacity: 1;
}

/* =========================================================================
   ICONOS DE OPCIONES (puertas: tipo/instalacion/escenario ·
                       mamparas: aquanet/grosor)
   ========================================================================= */
.ico-perfil,
.ico-cristal,
.ico-tipo,
.ico-instalacion,
.ico-escenario,
.ico-aquanet,
.ico-grosor {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
    -webkit-transition: transform 0.2s ease 0s;
    transition: transform 0.2s ease 0s;
    cursor: pointer;
}

.ico-perfil:hover,
.ico-perfil.selected,
.ico-cristal:hover,
.ico-cristal.selected,
.ico-tipo.selected,
.ico-tipo:hover,
.ico-instalacion.selected,
.ico-instalacion:hover,
.ico-escenario.selected,
.ico-escenario:hover,
.ico-aquanet.selected,
.ico-aquanet:hover,
.ico-grosor.selected,
.ico-grosor:hover {
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
}

/* Estados activo/inactivo/deshabilitado */
.ico-perfil,
.ico-tipo,
.ico-cristal {
    cursor: pointer;
    transition: opacity 0.5s ease;
}

.ico-perfil.disabled,
.ico-tipo.disabled,
.ico-cristal.disabled,
#ico-play.disabled {
    pointer-events: none;
}

.ico-perfil.inactive,
.ico-tipo.inactive,
.ico-cristal.inactive {
    opacity: 0.2;
}

/* Tiradores / agarres (mamparas) */
.ico-agarre {
    opacity: .5;
}

.ico-agarre:hover,
.ico-agarre.selected {
    opacity: 1;
}

.leyenda-ico {
    font-size: 9px;
    color: #999;
    margin-top: 2px;
}

/* =========================================================================
   SERIES Y MODELOS
   ========================================================================= */
.titulo-serie-vertical {
    float: left;
    margin: 5px 4px 4px 4px;
    background-color: #000;
    width: 10px;
    height: 133px;
    padding: 10px;
}

.serie-minitexto {
    position: relative;
    margin: -20px 0px 0px 0px;
    padding-left: 5px;
    color: #fff;
    font-size: 12px;
    background-color: #50c4aa;
    text-transform: uppercase;
}

#check-serie,
#check-modelo {
    position: relative;
    margin-top: -100%;
    margin-left: 80%;
    padding: 2px;
    background-image: url('/configurador/assets/decorador/icons8-checkmark-64.png');
    background-size: cover;
    width: 24px;
    height: 24px;
}

.ico-serie {
    float: left;
    padding: 4px;
    cursor: pointer;
    height: 150px;
}

.ico-serie:hover {
    opacity: .75;
}

.ico-modelo {
    float: left;
    width: 25%;
    cursor: pointer;
    opacity: 1;
    margin-bottom: 40px;
}

.ico-modelo:hover {
    opacity: 0.75;
}

.ico-escenario-paso1 {
    float: left;
    width: 25%;
    cursor: pointer;
    opacity: 1;
    margin-bottom: 40px;
}

.ico-escenario-paso1:hover {
    opacity: 0.75;
}

/* =========================================================================
   BOTONES
   ========================================================================= */
.boton-verde {
    margin-top: 20px;
    padding: 10px;
    background-color: #5ed6bd;
    cursor: pointer;
    color: #FFF;
    border-radius: 5px;
}

.boton-verde:hover {
    opacity: .75;
}

.boton-pdf {
    margin-top: 10px;
    padding: 10px;
    background-color: #000;
    cursor: pointer;
    color: #FFF;
    border-radius: 5px;
    width: 150px;
    float: left;
}

.boton-pdf:hover {
    opacity: .75;
}

.boton-pedido {
    padding: 10px;
    background-color: #eb6b11;
    cursor: pointer;
    color: #FFF;
    border-radius: 5px;
    width: 180px;
    float: left;
    margin-top: 10px;
    margin-left: 10px;
}

.boton-pedido:hover {
    opacity: .75;
}

.boton-aceptar {
    padding: 10px;
    background-color: #eb6b11;
    cursor: pointer;
    color: #FFF;
    border-radius: 5px;
    margin-top: 10px;
    width: 210px;
    float: left;
    margin-right: 10px;
}

.boton-aceptar:hover {
    opacity: .75;
}

.boton-areaprofesional {
    display: none;
    padding: 10px;
    background-color: #eb6b11;
    cursor: pointer;
    color: #FFF;
    border-radius: 5px;
    margin-top: 10px;
    width: 230px;
    float: right;
    margin-right: 10px;
}

.boton-areaprofesional:hover {
    opacity: .75;
}

.boton-add {
    padding: 10px;
    background-color: #5ed6bd;
    cursor: pointer;
    color: #FFF;
    border-radius: 5px;
    margin-top: 10px;
    width: 200px;
    float: left;
    margin-right: 10px;
}

.boton-add:hover {
    opacity: .75;
}

.boton-videotutorial {
    text-align: center;
    padding: 5px;
    background-color: #000;
    color: #FFF;
    width: 15%;
    margin-bottom: 10px;
    float: right;
}

.boton-videotutorial a {
    font-size: 12px;
    color: #fff;
    letter-spacing: 2px;
}

.boton-videotutorial:hover {
    opacity: .5;
}

.boton-formulario-datos {
    border-radius: 0px;
    background-color: #000;
    font-weight: normal;
}

/* =========================================================================
   VISOR / ZOOM
   ========================================================================= */


.ico-abrir {
    float: right;
    cursor: pointer;
    padding: 5px 5px 5px 10px;
    background: #000;
    width: 100px;
    text-align: center;
}

.ico-play {
    float: right;
    cursor: pointer;
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    -ms-filter: fliph;
    /*IE*/
    filter: fliph;
    /*IE*/
}

.ico-play.cerrar {
    -moz-transform: scaleX(1);
    -webkit-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
    -ms-filter: fliph;
    /*IE*/
    filter: fliph;
    /*IE*/
}

.ico-play:hover {
    opacity: .75;
}

.ico-play.disabled {
    cursor: not-allowed;
    opacity: 0;
    pointer-events: none;
}

.ico-tutorial {
    cursor: pointer;
    position: relative;
    margin-top: -63%;
    padding: 10px;
    color: #FFF;
    z-index: 101;
    float: right;
}

.ico-tutorial:hover {
    opacity: .75;
}

.ico-screenshot {
    cursor: pointer;
    position: relative;
    margin-top: -63%;
    padding: 10px;
    color: #FFF;
    z-index: 101;
    float: left;
}

.ico-screenshot:hover {
    opacity: .75;
}

.rota180 {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    -ms-filter: fliph;
    /*IE*/
    filter: fliph;
    /*IE*/
}

/* =========================================================================
   CABECERA Y FORMULARIOS
   ========================================================================= */
.minitexto-cabecera {
    padding: 5px;
    color: #000;
    margin-bottom: 10px;
    float: left;
    font-size: 14px;
}

.formulario-datos {
    text-align: left;
    color: #000;
    font-size: 14px;
}

.formulario-datos input {
    width: 98%;
    padding: 1%;
    border: 1px solid #ccc;
    margin-bottom: 15px;
}

.formulario-datos input[type='checkbox'] {
    width: auto;
    padding: 0px;
}

.formulario-datos select {
    width: 100%;
    padding: 1%;
    border: 1px solid #ccc;
    background-color: white;
}

.formulario-datos .res-formulario {
    color: #f00;
}

/* =========================================================================
   VARIOS
   ========================================================================= */
#full-width {
    position: relative;
    max-width: 100%;
    min-height: 400px;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

#zoom {
    display: block;
    position: relative;
    width: 100%;
}

#zoom img {
    width: 100%;
    display: block;
}