* { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;   box-sizing: border-box;         /* Opera/IE 8+ */}
html { }
body {font:14px/1.6em 'Open Sans', sans-serif; color:#000; background:url(../img/fondos/squared_metal.png) #ccc; margin: 0; 
-webkit-highlight: none; -webkit-tap-highlight-color: rgba(0,0,0,0); font-weight: 300;}
a {color:#0A77C0; text-decoration: none; font-weight: 600; transition:all 0.3s ease;}
a:hover {color:inherit;}
a.act {}
b.ultra {font-weight: 800;}
.right {float: right;}
.left {float: left;}
img {display: block;}
.align-center {text-align: center !important;}
.align-left {text-align: left !important;}
.no-rap {white-space: nowrap;}
.padre {overflow: hidden;}
.amarillo {color:#FFE500;}
.verde {color:#28B122;} .bc-verde {background-color: #28B122;}
.azul {color:#197DFF;}
.fa-minus {display: none;}

h1 {font:17px/2em 'Open Sans', sans-serif; font-weight:800;}
h2 {font:15px/1.4em 'Open Sans', sans-serif; font-weight:600; text-transform: uppercase;}
h3 {font:14px/2em 'Open Sans', sans-serif; font-weight:800; text-transform: uppercase;color:#000; padding-top: 0px;}

.h1 {font:17px/1.1em 'Open Sans', sans-serif; font-weight:400; display: block;}
.h2 {font:17px/2em 'Open Sans', sans-serif; font-weight:800; text-transform: uppercase; display: block;}
.h3 {font:14px/2em 'Open Sans', sans-serif; font-weight:800; text-transform: uppercase;color:#000; padding-top: 0px; display: block;}
p {line-height: 1.6em;}

input {width:100%; background-color: #eee;}
input[type="text"] {padding:2px 5px; margin-bottom: 10px;}
input[type="submit"] {width:50%; font-weight: 800; padding:7px 0; margin-top: 0px; background-color: #000; color:#fff;}
input[type="submit"].sin-margin {margin:0;}
input[type="submit"].enviar {margin:15px 0;}
input[type="password"] {width:50%; margin-right:10%;}
textarea {width:100%; height:323px; padding:3px 0 0 10px; background-color: #eee;}
textarea.js-newCommentTextarea {height: 120px;}
label {display: block; text-transform: uppercase; color:#666; font-size:9px; letter-spacing: 1px; margin:7px 0 0px;}

.wrapper {width:1170px; height:auto; margin:0 auto; position:relative; overflow: hidden; padding-bottom:200px; border-bottom: 0px solid #000;}
.header {width:100%; height: auto; border-bottom: 6px solid #000; overflow: hidden;}
.navegador  {width:auto; height:auto; float: left; overflow: hidden; margin-right: 0px;}
.selector {overflow: hidden; border-bottom: 1px dashed #000; overflow: hidden; padding:1em 0 1em;} 
.buscador {overflow: hidden; padding: 15px 0 5px 10px; margin-bottom: -30px}
.contenido {overflow: hidden; overflow: hidden; padding-top: 30px; border-bottom: 1px solid #000;}

.mitad {width: 570px; float:left; display:block; margin-right: 30px;}
.mitad:nth-child(2n+2) {margin-right: 0;}
.cuarto {width:270px; float:left; display:block; margin:0 30px 0px 0; position: relative; overflow: hidden;}
.cuarto:nth-child(4n+4) {margin-right: 0;}
.quintos {width:20%; float:left; display:block;}
.sextos {width:15%; float:left; display:block;}
.fin {margin-right: 0;}
.filete {border-top:3px solid #000;}

/* HEADER */
.header {}
.header .h3 {padding-top: 5px;}
.header .cuarto {padding:20px 0 30px; height:175px; text-align: center; text-align: center;} 
.cuarto.sinp {padding-top: 0;}
.cuarto.leyenda {color:#fff; text-align: left;}

.identidad {}

.monos { width:100%; font-size: 40px; letter-spacing: -6px; text-align: center; margin-bottom: 5px;}
.t { display:none; margin:0 auto; width:0; height:0; border-style:solid; border-width:125px;
border-color:#000 transparent transparent transparent; position: absolute; top:-70px; left:-140px; z-index: -1;}
a .monos {color:#000;}
a i.fa-minus {color:#000;}
.t.excep {top:-50px; display: block;}
.header.b-amarillo {border-color: #FFE500;}
.header.b-azul {border-color: #197DFF;}
.header.b-blanco {border-color: #666; border-width:1px ;}
.header.b-verde {border-color: #28B122;}
.header .h1 {border-top: 0px solid #000; padding:0px 0 0px 0px; width: 200px; font-weight: 300;
            letter-spacing: 0px; color:#000; width: 100%; text-align:center; margin-top: 0px;}
.header .h1 b {color: #fff; font-weight: 300;}
.color { color:#000; font-size: 350%; padding:0px 0 0px; width:auto; margin:0px 0 0px 60px; font-weight: 800;
            display:block; border-bottom: 0px solid #000; border-top: 0px solid #000; text-align: left; line-height: 1em;}
.color span {color:#000; font-size: 30%; font-weight: 300;}
.leyenda {float: left;}
.subtitulo {}

.bienvenida,
.login {margin-bottom: 0px;}
.cuarto.bienvenida {text-align: left;}
a.aqui {display: inline-block; margin-top: 0px; padding:0px; font-weight: 700; color:#f5f5f5;
        border-top: 0px solid #000;}
a.aqui:hover {color:#000;}

.pestana {width:270px; display:block; margin:0 30px 0px 0; position: relative; overflow: hidden; position: absolute; bottom:0; z-index: 500;
    text-align:center;}
.pestana a {display: block; color:#fff; background-color: #000; transition: all 0.3s ease; padding:0 10px 0px;}
.pestana a:hover {padding-bottom: 10px;}
.pestana.ej a {color:#000; background-color: #FFE500;}
.pestana.azul a {color:#fff; background-color: #197DFF;}
.pestana.blanca a {color:#fff; background-color: #28B122;}
.pestana span.mosca {position: absolute; top:7px; right:15px;}

.panel {height: auto; float: left; padding-top: 0px; width:auto; overflow: hidden;}
.panel .cuarto:nth-child(2n+2) {margin-right: 0;}
.panel.cliente {width: 45%; padding:15px 0 0 30px;}

.login {background-color: #000; color: #fff; padding: 7px 15px 7px; position: absolute; z-index: 1000; width: 270px; right: 0; top: 0; text-align: center;}
.login form {display: none;}
.login a {text-transform: uppercase; font-weight: 400; margin:5px; display: inline-block; color:#fff;}
.login a.olvidado {text-transform: none; color: #fff; font-size: 12px; margin-top: 10px;}
.login a.act {font-weight: 800; color: #fff;}
.login label {color:#eee; text-align: left;}
.login input[type="submit"] {width: 40%;}

.navegador.sub {border-bottom:0px solid #999; text-align: center; width: 100%; float: none;}
.navegador.sub.b-azul {border-color:#999;}
.navegador.sub a {padding:15px 15px; text-transform: uppercase; border-top: 0px solid #fff; display: inline-block; 
                    font-size:14px; font-weight: 600; color:#000;}
.navegador.sub a:hover,
.navegador.sub a.act {color:#fff;}
.navegador.sub.foot {border-bottom:0px; border-top:0px solid #999; margin-top:40px;}

.listado ul {margin:0 30px 0 0; list-style-type: none;}
.listado ul li {margin-bottom: 0.2em; display: block;}
.listado ul li:first-letter {text-transform: uppercase;}
.listado ul li.tit {padding:1em 0 0; font-weight: 800; padding-left: 10px;}
.listado ul li a {color:#000; font-weight:300; background-color:transparent; padding:2px 10px 4px 10px; font-size: 13px; transition:all 0.3s ease;}
.listado ul li a:hover,
.listado ul li a.act {color:#000; font-weight: 700; background-color:#fff;}
.listado ul li a.act:after {content: " x"; color:red; padding-left: 10px;}
.listado ul li a.act:hover {background-color: #000; color:#fff;}

/* EJERCICIOS */
.contenido {position: relative;}
.contador {width:auto; text-align:center; margin:0 auto 1em; z-index: 100; position: relative;
             border-top:5px solid #000; border-bottom: 0px solid #999; padding:10px 0 20px; 
             font-size: 16px; text-transform: uppercase; font-weight: 400;}
    .contador span.caret {display: none; font-size: 50px; margin: -20px 0 -10px; line-height:0px; vertical-align: top;}
    .contador span.caret i {vertical-align: top;}
.tarjeta {width: 100%; height:auto; margin-bottom: 30px; border-bottom: 0px solid #000; 
            line-height: 2em; position: relative; overflow: hidden;}
.tarjeta img {min-height: 200px;}
/* seleccionado */
.tarjeta.select .ejercicio {background-color:#FFE500; color:#000;}
.anadir {width: 100%; text-align: center; padding-top: 0.5em; display: block; text-transform: none;}
.anadir a {color: transparent; display: block; height:0px; transition:all 0.3s ease;}
.anadir a:hover {color:#fff;}

.lienzo {position: relative; overflow: hidden;}
.ejercicio {font-weight: 800; width: 100%; text-align: center; line-height: 1.4em; 
            color:#fff; text-transform: uppercase; z-index: 1000; position: absolute; bottom:0px;
            background: rgba(0,0,0,0.4); z-index: 1000; padding:0.7em 0.3em 0.7em; transition:all 0.3s ease;}
.tarjeta:hover .ejercicio .anadir a { height:20px; color: #FFE500;}
.tarjeta.select .ejercicio .anadir a { height:20px; color: #FFF;}
.ejercicio .num {width:25%; position: relative; top:0; right:none; margin: 0 auto; font-weight: 400; 
                font-size:14px; margin-bottom: 5px;}
.ejercicio .num a {color:#fff; font-weight: normal;}


.barra {width: 100%; border-bottom:1px solid #000; overflow: hidden; margin-bottom: 30px; padding-bottom: 30px;}
.barra.bottom {border-top: 0px dashed #000; padding: 30px 0 0; border-bottom: 0; margin-top: 0px; float: none;}
.barra.bottom .h3 {margin-bottom: 0.2em;}

/* FICHA */
.ficha {margin-bottom: 30px;}
.ficha img {min-height: 200px;}
.fila {padding:7px 0 5px; overflow: hidden; position: relative;}
.fila:first-child {border-top: 1px solid #000;}
    .planesEnviados .fila:first-child {border-top: none;}
.fila .num {width:33%; position: absolute; top:5px; right:0; text-align: center;}
.fila .num span {font-size: 12px; font-weight: 600;}
.fila .num a {color:#000; display: block;}
.fila .num a.left {padding-right:10px;}
.fila .num a.right {padding-left: 10px;}
.fila .num a:hover {color:#fff;}
.fila.first {margin-top: 0.5em;}
.fila.fin {color: #FFF; padding:15px 0; border-bottom: none;}
.fila.fin a {color: #000; display: block; font-weight: 400; text-align: center; padding: 3px 0; text-transform: uppercase;
                font-size: 10px; border: 1px solid #0A77C0; font-weight:400; color:#0A77C0; max-width:50%; margin:0 auto;}
.fila.fin a:hover {color:#fff;}
a.mas {width: 100%;}
a.equis {position: absolute; padding:7px 12px; top:0px; right:0px; color:#eee; font-size: 14px;}
a.equis:hover {color:red;}

.cartela {height:auto; min-height: 240px; border-top: 4px solid #000; padding:5px 0 19px;}
.cartela .h2 {text-align:center; padding:5px 1.4em 10px; padding-bottom: 10px; line-height: 1.3em;}
.cartela ol {margin:0 0 0 1.5em;}
.cartela ol li {margin:5px 0;}
.cartela .fila {border-top: 0px solid #000;}

.cartela.plan {background-color: #000; text-align: center; color:#fff; min-height: 30px;}
.cartela.plan .h2 {font-size: 50px;}
.cartela.plan .h2,
.cartela.plan .h3 {color:#fff; margin: 0; padding: 0; line-height: 1.2em;}
.cartela.plan .h3 {margin-bottom: 10px;}
.cartela.plan a {color:#fff; font-weight: 300;}
.cartela.plan i.fa-minus {color:#fff;}
.espacio-triangulo {padding-top: 10px; width:270px; margin:0 auto;}
.triangulo {    width: 0;
    height: 0;
    border-left: 135px solid transparent;
    border-right: 135px solid transparent;
    border-top: 50px solid #000;}

.master {font-weight: bold;}
.master.edit {text-transform: uppercase; font-weight: 300; margin: 19px 0 10px; 
    border:0px solid #000; border-left:0; border-right: 0; text-align: left;}
.master.edit i.fa {display: none;}


/* Nuestros planes */
.globo {border-top:5px solid #000; padding-top:30px; margin-top: 0px;}
.barra-anadir {float: none; clear: both; margin-bottom:30px; overflow: hidden; border-top: 5px solid #000; padding-bottom: 30px;}
.boton-anadir,
.boton-cerrar {display: block; padding:7px 0 10px; text-align: center; background-color: #000; color:#fff; font-weight: bold;}
.boton-cerrar {background-color: #fff; color:#000;}
.boton-anadir:hover {background-color: #999;}
.boton-cerrar:hover {background-color: #999;} 
.sin-margin {margin:0px;}
.globo .fila .num {width:100%; position: absolute; top:5px; right:0; text-align:right;}

/* INFO */
.central {width: 630px; display:block; margin:0 auto 15px; text-align: center; overflow: hidden;}
    .central .h1 {font:37px/1em 'Open Sans', sans-serif; font-weight:800; width: 100%; text-align: center; margin-bottom: 1em;}
    .central .h2 {font:17px/1.5em 'Open Sans', sans-serif; width: 100%; text-align: center; text-transform: none; font-weight: bold;}
    .central.ylegal .h2 {text-align: left; margin:15px 0;}
    .central.ylegal .h3 {text-align: left;}
    .central p,
    .central li {font-size: 17px; line-height: 1.6em; text-align: left; display: block;}
    .central ul {margin-left:0; display: block; margin:1em auto;}
    .central li {margin-bottom:1em;}
    .central li b {text-transform: uppercase;}
    .central li i.fa {display: block;}
.central p.destacado {font-size:19px; margin-bottom:1em;}

.central.quees {width:930px; padding-left: 30px;}
.central.quees .cuarto p {font-size: 15px; text-align: center;}
.central.con-b {border-top: 1px solid #999; padding:10px 0 0; text-align: left;}

.central .cuarto {width:300px;}
.central.quees .cuarto {width:270px;}

/* CLIENTE */
.panel.cliente {width: 100%; padding:30px 0px 0 0px;}
.header.decliente {border: none; border-top:5px solid #000; margin-top: 15px;}
.header.decliente .cuarto {text-align: left; padding: 20px 0 0 0; height: auto;}
.header.decliente .cuarto:nth-child(2),
.header.decliente .cuarto:nth-child(3) {margin-right: 30px; padding-top:25px;}
.header.decliente .monos {width: 50%; margin:0 auto;}
.header.decliente .h1 {width:55%; font-size: 14px; display: block; margin: 0 auto;}

/* REGISTRO */
.fila.registro {border:0; border-bottom:1px dashed #999; margin:-15px 0 10px; color:#444;}
.fila .fa-caret-up {line-height: 0.5em; display: block; margin-bottom: -10px;}

/* DETALLES */
.cuarto.inputs {border-top: 1px dashed #999;}
.cuarto.archivar {border-right: 1px solid #999; width: 285px; margin-right: 15px; padding-bottom: 30px; padding-right: 15px;}
.cuarto.aviso p {font-size: 14px; line-height:1.7em; margin-bottom: 0.5em;}
.cuarto.aviso {padding-top: 40px;}

/* cookies y avisos */
.politica-cookies {width:720px; position: fixed; bottom: 10px; left:50%; margin-left:-360px; padding:10px 30px; background-color:#fff;
  -webkit-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    0px 0px 10px 1px rgba(0,0,0,0.5);  /* Firefox 3.5 - 3.6 */
  box-shadow:         0px 0px 10px 1px rgba(0,0,0,0.5);  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */}
.boton-cookies {display: block; width:120px; padding:3px 15px; border:1px solid #000; background-color:#197DFF; color:#fff; margin:15px auto 5px; text-align:center;}
.alert {position:fixed; width:500px; left:50%; top:35%; margin-left:-250px; padding:20px 40px; background-color:#fff; z-index: 1000; text-align: center;
  -webkit-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    0px 0px 10px 1px rgba(0,0,0,0.5);  /* Firefox 3.5 - 3.6 */
  box-shadow:         0px 0px 10px 1px rgba(0,0,0,0.5);  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}
.alert i.fa {font-size: 2em; display:block; margin:0px auto 5px;}
.alert-success {}
.alert-danger {color:#f00;}

img.aixa {width:140px;} 

/* cosas de Edu */

.preview {
width: 270px;
height: 270px;
overflow: hidden;
position: relative;
}

.preview img {
position: absolute;
top: 0;
left: 0;
display: none;
image-orientation: none;
}

.preview img.visible {
display: block;
}

.zonaPreview {
overflow: hidden;
padding-top: 30px;
display: none;
/*max-height: 9999px;*/    
}

.js-loading {
background: url('../img/loading.gif');
background-repeat: no-repeat; 
background-position: center center; 
width: 100%; 
min-height: 64px;
}

.infscr-loading {
background: url('../img/loading.gif');
background-repeat: no-repeat;
background-position: bottom left;
padding-left: 25px;
margin-bottom: 20px;
}

.login form {
display: block;
}

.hp_surname {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    z-index: -1;
}

@media only screen and (max-width:1170px) { 
    .responsive .wrapper {width:570px;}
    .header.decliente .cuarto:nth-child(2),
    .responsive .cuarto:nth-child(2) {margin-right:0px;}
    .responsive .cuarto:nth-child(3) {clear:both;}
}

@media only screen and (max-width:570px) {
    .responsive .wrapper {width:270px;}
    .responsive .cuarto {margin-right: 0;}
}