/* CSS Document */
@font-face { font-family: Alwyn; src: url("../recursos/alwyn.ttf"); font-weight: normal; font-style: normal; }
@font-face { font-family: Alwyn; src: url("../recursos/alwyn_bold.ttf"); font-weight: bold; font-style: normal; }
/* CSS Document */
#menuLateral .boton-menu, #menuLateral p { -webkit-transform-origin: right; -ms-transform-origin: right; transform-origin: right; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); padding: 8px 0 8px 20px; background-color: #82A3B4; font: normal 1.125rem Alwyn, sans-serif; color: transparent; -webkit-transition: -webkit-transform 0.4s ease-in 0s, color 0s ease-in; transition: transform 0.4s ease-in 0s, color 0s ease-in; }

#botonAbrirMenu:hover, #menuLateral .boton-menu:hover, #menuLateral > a:hover:first-child, .botonVolver:hover { border-right: 5px solid #c2d2da; }

html { height: 100%; font: 16px/1.3em Alwyn, sans-serif; }
@media screen and (max-width: 550px) { html { font: 14px/1em Alwyn, sans-serif; } }

body { position: relative; width: 100%; height: 100%; margin: 0; background-color: #82a3b4; background: url(../recursos/fondoCabecera.png) left top repeat-x, url(../recursos/adornoFondo.png) right bottom no-repeat, -webkit-linear-gradient(280deg, #82a3b4 0%, #82a3b4 23%, #2c5469 100%); background: url(../recursos/fondoCabecera.png) left top repeat-x, url(../recursos/adornoFondo.png) right bottom no-repeat, linear-gradient(170deg, #82a3b4 0%, #82a3b4 23%, #2c5469 100%); letter-spacing: 0.2px; word-spacing: 0.3px; color: black; }
@media screen and (max-width: 550px) { body { background: url(../recursos/fondoCabeceraMoviles.png) left top repeat-x, url(../recursos/adornoFondo.png) right bottom no-repeat, -webkit-linear-gradient(280deg, #82a3b4 0%, #82a3b4 23%, #2c5469 100%); background: url(../recursos/fondoCabeceraMoviles.png) left top repeat-x, url(../recursos/adornoFondo.png) right bottom no-repeat, linear-gradient(170deg, #82a3b4 0%, #82a3b4 23%, #2c5469 100%); } }

nav, a { text-decoration: none; color: inherit; outline: none; }

H1 { font-size: 3rem; font-weight: bold; letter-spacing: -0.6px; color: rgba(0, 0, 0, 0.7); }

H2 { color: #000; }

canvas { margin: 0 auto; }

header { position: fixed; top: 0; z-index: 5; width: 100%; max-width: 1010px; }

form { display: inline-block; padding: 3%; background-color: #e5edf2; text-align: right; font-weight: normal; font-size: 1rem; color: rgba(0, 0, 0, 0.7); }
form input { margin: 0.5em 0; }
form button { margin: 0.5em 0; padding: 5px; border: 2px solid #82A3B4; color: rgba(0, 0, 0, 0.7); border-radius: 3px; font: 16px/1.3em Alwyn, sans-serif; }
form button:hover { border-color: #000; }

.contenedor { position: relative; height: 100%; max-width: 1010px; margin: 0 auto; }

#contenidoIzquierda { position: fixed; top: 111.66667px; box-sizing: border-box; background-clip: padding-box; width: 100%; height: calc(100% - 111.66667px); border: 10px solid rgba(180, 180, 180, 0.7); border-radius: 10px; overflow-y: auto; z-index: 15; -webkit-transform: translateX(-120%); -ms-transform: translateX(-120%); transform: translateX(-120%); -webkit-transition: -webkit-transform 0.5s ease-in; transition: transform 0.5s ease-in; background-color: white; }
#contenidoIzquierda .tituloContenidos { margin-left: 2em; }
#contenidoIzquierda.abierto { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0, 1); transition: transform 1s cubic-bezier(0, 0, 0, 1); }
@media screen and (max-width: 550px) { #contenidoIzquierda { top: 87.16667px; height: calc(100% - 87.16667px); border-width: 5px; }
  #contenidoIzquierda .tituloContenidos { margin-left: 1em; } }

.cabecera { box-sizing: border-box; width: 100%; font-size: 2.5rem; line-height: 70px; padding-left: 70px; background: #e5edf2 url("../recursos/logo.png") left/contain no-repeat; }
@media screen and (max-width: 550px) { .cabecera { font-size: 1.625rem; line-height: 45.5px; padding-left: 45.5px; } }

.bajoCabecera { box-sizing: border-box; position: relative; width: 100%; padding-left: 70px; font-size: 1.5rem; line-height: 41.66667px; background-color: transparent; color: #fff; }
@media screen and (max-width: 550px) { .bajoCabecera { padding-left: 1em; } }

.cajaMenu { position: absolute; top: 0; right: 20px; z-index: 5; width: 150px; height: 50px; padding: 20px; background: url(../recursos/fondoBlanco.png) top right/contain no-repeat; }
.cajaMenu a { display: block; }
@media screen and (max-width: 550px) { .cajaMenu { height: 32.5px; } }

#botonAbrirMenu { width: 100%; height: 100%; border-right: 5px solid transparent; background: transparent url("../recursos/botonMenu.png") right top/auto 600% no-repeat; overflow: visible; }
#botonAbrirMenu:target { -webkit-animation: pasoBotonAMenu 0.4s steps(5) 0s 1 forwards; animation: pasoBotonAMenu 0.4s steps(5) 0s 1 forwards; }

#menuLateral { position: absolute; right: 0; box-sizing: border-box; width: 150%; height: 0; padding-right: 20px; }
#menuLateral p { margin: 0; }
#menuLateral p .boton-menu { font: normal 1rem Alwyn, sans-serif; }
#menuLateral > a:first-child { width: 100%; height: 100%; margin-bottom: 10px; }
#menuLateral > a:last-child { padding-bottom: 12px; }
#menuLateral:target { top: 0; height: 100%; padding: 20px; }
#menuLateral:target .boton-menu, #menuLateral:target p { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); color: rgba(255, 255, 255, 0.8); -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.1, 0.1, 0.85, 1.3) 0s, color 0.2s ease-out 0.4s; transition: transform 0.4s cubic-bezier(0.1, 0.1, 0.85, 1.3) 0s, color 0.2s ease-out 0.4s; }
#menuLateral:target p { color: rgba(255, 255, 255, 0.4); }
#menuLateral:target > a:first-child { background: transparent url("../recursos/botonMenu.png") right top/auto 600% no-repeat; -webkit-animation: pasoBotonACerrar 0.4s steps(5) 0.1s 1 forwards; animation: pasoBotonACerrar 0.4s steps(5) 0.1s 1 forwards; }
#menuLateral:target .seccionActual, #menuLateral:target p .seccionActual { padding-left: 15px; border-right: 7.5px solid #e5edf2; font-weight: bold; color: #fff; letter-spacing: 0.5px; cursor: default; }

.boton-menu { cursor: pointer; }

.botonVolver { position: absolute; top: 2%; right: 15px; z-index: 5; width: 150px; height: 6%; background: transparent url("../recursos/botonMenu.png") right bottom/auto 600% no-repeat; border-right: 5px solid transparent; }

.cuerpoGaleria, .cuerpoAcceso { position: absolute; bottom: 0; box-sizing: border-box; width: 100%; height: calc(100% - 111.66667px); padding-top: 50px; overflow-y: scroll; background-color: #fff; }
@media screen and (max-width: 550px) { .cuerpoGaleria, .cuerpoAcceso { height: calc(100% - 87.16667px); padding-top: 32.5px; } }

.cuerpoAcceso { overflow: auto; bottom: 5%; height: calc(95% - 111.66667px); text-align: center; background-color: transparent; font-weight: bold; font-size: 1.25rem; color: black; }

.seccion { min-height: 200px; padding-bottom: 70px; background-color: white; }
.seccion:last-child { padding-bottom: 0; border-bottom: 60px solid #b1c8d4; }

.encabezadoSeccion { font-size: 1.5rem; line-height: 60px; padding-left: 60px; background-color: #b1c8d4; }
@media screen and (max-width: 550px) { .encabezadoSeccion { line-height: 39px; padding-left: 39px; } }

.apartadoSeccion { font-size: 1.3rem; line-height: 60px; margin-left: 60px; padding-left: 1em; background-color: #e5edf2; border-top: 2px solid #b1c8d4; }
@media screen and (max-width: 550px) { .apartadoSeccion { line-height: 39px; margin-left: 39px; } }

.cuadroApartado { box-sizing: border-box; background-clip: content-box; float: left; width: 60px; height: 60px; padding: 17.14286px; background-color: #b1c8d4; border-top: 1px solid #b1c8d4; }
@media screen and (max-width: 550px) { .cuadroApartado { width: 39px; height: 39px; padding: 11.14286px; } }

.elemento { box-sizing: border-box; width: 100%; margin: 40px 0; padding: 0 0 0 60px; }

.miniatura { display: inline-block; min-height: 60px; min-width: 60px; margin-right: 30px; padding: 5px; vertical-align: top; background-color: #e5edf2; }
.miniatura img { vertical-align: bottom; }

.datosElemento { display: inline-block; width: calc(100% - 270px); font-size: 1.2rem; line-height: 2rem; }
@media screen and (max-width: 470px) { .datosElemento { display: block; width: 145px; } }

.botonFormato1 { display: inline-block; width: 163px; height: 45px; background: transparent url("../recursos/botonSWF.png") left no-repeat; margin-right: 5%; }
.botonFormato1:hover { cursor: pointer; background-position: right; }

.botonFormato2 { display: inline-block; width: 163px; height: 45px; background: transparent url("../recursos/botonMP4.png") left no-repeat; margin-right: 5%; }
.botonFormato2:hover { cursor: pointer; background-position: right; }

.botonFormato3 { display: inline-block; width: 183px; height: 45px; background: transparent url("../recursos/botonHTML.png") left no-repeat; margin-right: 5%; }
.botonFormato3:hover { cursor: pointer; background-position: right; }

.tituloContenidos { line-height: 60px; font-size: 1.3rem; }
@media screen and (max-width: 550px) { .tituloContenidos { line-height: 39px; font-size: 1rem; } }

.contenido { box-sizing: border-box; width: 100%; height: calc(99% - 60px); padding: 10px; text-align: center; background-color: #e5edf2; background: url(../recursos/cargando.png) center/contain no-repeat; }
.contenido video { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); max-width: 100%; max-height: 100%; }
.contenido iframe { border: none; text-align: center; }

@-webkit-keyframes pasoBotonAMenu { 0% { background-position: right bottom; }
  100% { background-position: right top; } }

@keyframes pasoBotonAMenu { 0% { background-position: right bottom; }
  100% { background-position: right top; } }
@-webkit-keyframes pasoBotonACerrar { 0% { background-position: right top; }
  100% { background-position: right bottom; } }
@keyframes pasoBotonACerrar { 0% { background-position: right top; }
  100% { background-position: right bottom; } }

/*# sourceMappingURL=funcionamiento.css.map */