/* CSS Document */
header,nav,section,article,aside,footer,figure{
	display: block;
}

html {
    height: 100%;
    display: grid;
}

body{
	background: url(../img/back_fog-action-platformer-openbor-indie-game.png) #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	padding:0px;
	margin:0px;
	height: 100%;
}

a {
	color: #fff;
	text-decoration: none;
}

.logo {
    text-align: center;
    position: relative;
    display: flex;
    justify-content: center;
}

.logo img {
    max-width: 440px;
    margin-top: 10px;
}

.logo a {
    display: inline-block;
}

#contenedor{
	width:960px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
}

.back_mountains{
	background: url(../img/back_mountains-action-platformer-openbor-indie-game.png) repeat-x bottom;
	height: 100%;
}

.back_moon{
	background: url(../img/moon-action-platformer-openbor-indie-game.png) no-repeat 90% top;
	height: 100%;
}

.castle{
	background: url(../img/castle-action-platformer-openbor-indie-game.png) no-repeat 41% bottom;
	height: 100%;
}

.sheeba{
	background: url(../img/sheeba-action-platformer-openbor-indie-game.png) no-repeat right bottom;
	height: 100%;
}

.rocks{
	background: url(../img/rocks-action-platformer-openbor-indie-game.png) no-repeat 110% bottom;
	height: 100%;
}

.aside{
	float: left;
    width: 324px;
    margin-top: 0.5rem;
}

.novedades {
    position: relative;
    width: 230px;
    border-style: solid;
    border-width: 2px;
    -moz-border-image: url(../img/border_2_menu-action-platformer-openbor-indie-game.png) 1;
    -webkit-border-image: url(../img/border_2_menu-action-platformer-openbor-indie-game.png) 1;
    -o-border-image: url(../img/border_2_menu-action-platformer-openbor-indie-game.png) 1;
    border-image: url(../img/border_2_menu-action-platformer-openbor-indie-game.png) 1;
    padding: 2px;
	background-color: #000;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0px;
    border-top: 0px none;
}

.languaje {
	display: inline-block;
	position: absolute;
	left: 0px;
}

.flag {
	width: 30px;
}

/* --- PERSONAJES --- */

.name-character {
    font-size: 21px;
    text-align: left;
    margin-bottom: 10px;
    margin-top: 10px;
	font-weight: 700;
    color: #a07800;
    background: #a07800;
    background: -webkit-linear-gradient(top, #a07800, #f8d018, #a07800);
    background: linear-gradient(top, #a07800, #f8d018, #a07800);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.charam {
	border-style: solid;
    border-width: 2px;
    -moz-border-image: url(../img/border_2_menu-action-platformer-openbor-indie-game.png) 1;
    -webkit-border-image: url(../img/border_2_menu-action-platformer-openbor-indie-game.png) 1;
    -o-border-image: url(../img/border_2_menu-action-platformer-openbor-indie-game.png) 1;
    border-image: url(../img/border_2_menu-action-platformer-openbor-indie-game.png) 1;
	width:44px;
	height:44px;
	display:inline-block;
}
.tabs nav ul li {
    display: inline-block;
}
.col-desc, .info-characters {
	width: 550px;
	float: left;
}
.secondary {
    width: 425px;
	float: left;
}
.secondary .col-desc {
    width: 425px;
	float: left;
}
.text-characters {
	width: 100px;
    position: absolute;
    right: 0px;
}
.charas {
	border-style: solid;
    border-width: 2px;
    -moz-border-image: url(../img/border_2_menu-action-platformer-openbor-indie-game.png) 1;
    -webkit-border-image: url(../img/border_2_menu-action-platformer-openbor-indie-game.png) 1;
    -o-border-image: url(../img/border_2_menu-action-platformer-openbor-indie-game.png) 1;
    border-image: url(../img/border_2_menu-action-platformer-openbor-indie-game.png) 1;
	width:26px;
	height:26px;
	display:inline-block;
}

.psheeba {
	background:url(../img/psheeba-faulkner-action-platformer-openbor-indie-game.jpg) no-repeat center;
}
.pfran {
	background:url(../img/pfran-bloodrose-action-platformer-openbor-indie-game.jpg) no-repeat center;
}
.pethan {
	background:url(../img/pethan-graymont-action-platformer-openbor-indie-game.jpg) no-repeat center;
}
.pbertha {
	background:url(../img/pbertha-graymont-action-platformer-openbor-indie-game.jpg) no-repeat center;
}
.pteobaldo {
	background:url(../img/pteobaldo-mondragon-action-platformer-openbor-indie-game.jpg) no-repeat center;
}
.pxavier {
	background:url(../img/pxavier-bogdan-action-platformer-openbor-indie-game.jpg) no-repeat center;
}
.pficzko {
	background:url(../img/pficzko-action-platformer-openbor-indie-game.jpg) no-repeat center;
}
.pdarvulia {
	background:url(../img/pdarvulia-action-platformer-openbor-indie-game.jpg) no-repeat center;
}
.pelizabeth{
	background:url(../img/pelizabeth-action-platformer-openbor-indie-game.jpg) no-repeat center;
}
.pevaine{
	background:url(../img/pevaine-action-platformer-openbor-indie-game.jpg) no-repeat center;
}

.sheeba-sprite{
	background:url(../img/sheeba-faulkner-action-platformer-openbor-indie-game.gif) right -30% no-repeat;
}
.ethan-sprite{
	background:url(../img/ethan-graymont-action-platformer-openbor-indie-game.gif) 70% 96% no-repeat;
}
.fran-sprite{
	background: url(../img/francis-bloodrose-action-platformer-openbor-indie-game.gif) 0% 98% no-repeat;
}
.bertha-sprite{
	background:url(../img/bertha-graymont-action-platformer-openbor-indie-game.png) right bottom no-repeat;
}
.teobaldo-sprite{
	background:url(../img/teobaldo-mondragon-action-platformer-openbor-indie-game.png) right bottom no-repeat;
}
.xavier-sprite{
	background:url(../img/xavier-action-platformer-openbor-indie-game.png) right bottom no-repeat;
}
.ficzko-sprite{
	background:url(../img/ficzko-action-platformer-openbor-indie-game.png) right bottom no-repeat;
}
.darvulia-sprite{
	background:url(../img/darvulia-action-platformer-openbor-indie-game.png) right bottom no-repeat;
}
.elizabeth-sprite{
	background:url(../img/elizabeth-action-platformer-openbor-indie-game.png) right bottom no-repeat;
}
.evaine-sprite{
	background:url(../img/evaine-action-platformer-openbor-indie-game.png) right bottom no-repeat;
}

.text-characters {
    float: right;
}

.col-desc{
	text-align: justify;
}
.col-desc p{
	height: 80px;
}
.face-image {
	float: left;
	margin-right: 10px;
}
.col-desc span {
    width: 100%;
    display: block;
    margin-bottom: 4px;
}
.col-desc p {
    width: 280px;
    display: block;
    clear: both;
	margin-bottom: 0px;
}

/* --- SUB ARMAS --- */

.sub-armas {
	margin-top: 20px;
}
.sub-armas li {
    width: 49%;
    float: left;
    margin-bottom: 10px;
}
.sub-armas p {
	text-align: left;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-right: 20px;
	box-sizing: border-box;
}
.sub-armas img.weapon-image{
	float: left;
	border-style: solid;
    border-width: 2px;
    -moz-border-image: url(../img/border_2_menu-action-platformer-openbor-indie-game.png) 1;
    -webkit-border-image: url(../img/border_2_menu-action-platformer-openbor-indie-game.png) 1;
    -o-border-image: url(../img/border_2_menu-action-platformer-openbor-indie-game.png) 1;
    border-image: url(../img/border_2_menu-action-platformer-openbor-indie-game.png) 1;
    margin-right: 10px;
}

/* --- GALLERY --- */
.titulo-galeria{
	position: relative;
	top: -11px;
}
.title-gallery{
	margin-bottom: 11px;
}
.gallery li {
    display: inline-block;
    margin-right: 2px;
    margin-left: 2px;
    margin-bottom: 5px;
}
.gallery li img{
    border-style: solid;
    border-width: 2px;
    -moz-border-image: url(../img/border_2_menu-action-platformer-openbor-indie-game.png) 1;
    -webkit-border-image: url(../img/border_2_menu-action-platformer-openbor-indie-game.png) 1;
    -o-border-image: url(../img/border_2_menu-action-platformer-openbor-indie-game.png) 1;
    border-image: url(../img/border_2_menu-action-platformer-openbor-indie-game.png) 1;
    width: 90px;
}
.video-gallery{
	text-align: left;
}
.video-gallery li {
    width: 33%;
    float: left;
}

.main-menu {
    position: relative;
    z-index: 0;
    font-size: 21px;
    text-shadow: 2px 2px #000;
}

.main-menu ul li a {
	display: block;
	padding-top: 13px;
    padding-left: 65px;
    padding-bottom: 7px;
}

.main-menu ul li {
	position: relative;
}

.main-menu ul li:hover {
	color: #f8d018;
}

.main-menu ul li a {
	height: 30px;
	background: url(../img/menu-back-1-action-platformer-openbor-indie-game.png) no-repeat center;
}

.main-menu ul li.activo a {
	background: url(../img/menu-back-action-platformer-openbor-indie-game.png) no-repeat center;
}

.main-menu ul li.activo .flame1-a, .main-menu ul li.activo .flame1-b{
	background: url(../img/flame-1-action-platformer-openbor-indie-game.gif) no-repeat center;
	z-index: 99;
	position: absolute;
	width: 30px;
	height: 64px;
	top: -30px;
}

.main-menu ul li.activo .flame1-b{
	right: 0px;
}

.main-menu ul li:hover .flame1-a, .main-menu ul li:hover .flame1-b{
	background: url(../img/flame-2-action-platformer-openbor-indie-game.gif) no-repeat center;
	z-index: 99;
	position: absolute;
	width: 30px;
	height: 64px;
	top: -30px;
}

.main-menu ul li:hover .flame1-b{
	right: 0px;
}

.trailer {
    top: 0px;
    position: relative;
    width: 432px;
    height: 228px;
    display: block;
    background: url(../img/video-action-platformer-openbor-indie-game.png) no-repeat top left;
    margin: 30px auto;
}
.trailer:hover {
    background: url(../img/video-action-platformer-openbor-indie-game.png) no-repeat top right;
}

.trailer-eng {
    background: url(../img/video-eng-action-platformer-openbor-indie-game.png) no-repeat top left;
}
.trailer-eng:hover {
    background: url(../img/video-eng-action-platformer-openbor-indie-game.png) no-repeat top right;
}


.estatua{
	width: 32px;
	display: block;
	float: left;
	height: 362px;
}
.estatua-izquierda{
	background: url(../img/candle-left-action-platformer-openbor-indie-game.gif) no-repeat bottom left;
}
.estatua-derecha{
	background: url(../img/candle-right-action-platformer-openbor-indie-game.gif) no-repeat bottom left;
}

.home{
	position: relative;
	float: right;
	width: 636px;
	height: 100%;
    margin-top: 0.5rem;
}

.interior {
    position: relative;
    float: right;
    width: 636px;
    height: 100%;
    margin-top: 0.5rem;
    box-sizing: content-box;
}

.cuadro-texto{
	border: 14px solid;
	border-image-source: url(../img/border-action-platformer-openbor-indie-game.png);
	border-image-slice: 14;
	border-image-repeat: repeat;
	padding:10px;
	float:left;
	background:#000020;
	color:#fff;
	box-sizing: border-box;
	width: 572px;
    height: 362px;
}

.text-center{
	text-align: center;
}

.btn-download{
	display: inline-block;
	background: url(../img/download-action-platformer-openbor-indie-game.gif) no-repeat bottom left;
	width: 252px;
	height: 66px;
}
.btn-download:hover{
	background: url(../img/download-action-platformer-openbor-indie-game.gif) no-repeat bottom right;
}

.btn-download-eng{
	background: url(../img/download-eng-action-platformer-openbor-indie-game.gif) no-repeat bottom left;
}
.btn-download-eng:hover{
	background: url(../img/download-eng-action-platformer-openbor-indie-game.gif) no-repeat bottom right;
}

.titulo-novedad {
	position: relative;
	display: flex;
	justify-content: center;
	height: 0px;
}

.titulo-novedad h3 {
    background: #686843;
    margin-top: 0px;
    border: outset 2px #8d8d68;
    position: relative;
    z-index: 11;
    top: -11px;
    padding-bottom: 0px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 1px;
    font-size: 16px;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 0px;
    color:#fff;
	height: 18px;
}

.body-web {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: 100%;
}

.scrollbar{
	height: 62px;
	width: 100%;
	overflow-y: scroll;
	color: #fff;
}

#style-2::-webkit-scrollbar-track{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 4px;
}

#style-2::-webkit-scrollbar{
	width: 8px;
	background-color: #666;
}

#style-2::-webkit-scrollbar-thumb{
	border-radius: 4px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #F5F5F5;
}

.novedades ul{
	padding-left:10px;
	padding-right: 10px;
}

.novedades ul li{
	display:block;
	border-bottom:1px dashed #ccc;
	padding-top:10px;
	padding-bottom:10px;
	font-size: 12px;
}

.novedades ul li:last-child{
	border-bottom:0px none;
}

/* --- TIPS --- */
.tips{
	margin-top: 10px;
	text-align: justify;	
}

.tips li{
	margin-bottom: 10px;
	list-style-type: square;
	margin-left: 15px;
}

img{
	border:none;
}

ul{
	margin:0px;
	padding:0px;
}

ul li{
	list-style:none;
}

a img{
	border:none;
}

.cl{
	clear:both;
}

.izq{
	float:left;
}

.der{
	float:right;
}

footer {
    clear: both;
    color: #fff;
    height: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
	text-align: center;
}

footer a{
	color: #fff;
}

footer p {
    margin-bottom: 0px;
    margin-top: 0px;
}

.responsive-menu{
	display: none;
}

/* Menú */

.sidenav {
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	background-color: #000020;
	overflow-x: hidden;
	padding-top: 0px;
	transition: 0.5s;
}
.sidenav .menu-nav a {
    padding: 6px 0px 6px 32px;
    text-decoration: none;
    font-size: 18px;
    color: #fff;
    display: block;
    transition: 0.3s;
}
.sidenav a:hover {
	color: #f1f1f1;
}
.sidenav .closebtn {
	position: absolute;
	top: 0;
	right: 25px;
	font-size: 36px;
	margin-left: 0px;
}
.border-sidebar{
	border-right: 14px solid;
	border-image-source: url(../img/border-action-platformer-openbor-indie-game.png);
	border-image-slice: 14;
	border-image-repeat: repeat;
    padding-top: 3%;
    height: 97%;
}
.sidenav .languaje {
    padding: 8px 8px 8px 32px;
    display: block;
    transition: 0.3s;
}
#main {
	transition: margin-left .5s;
	padding: 20px;
}

.toggle-menu{
	display: none;
}

.toggle-menu div {
    width: 30px;
    height: 3px;
    background-color: #000020;
    margin: 6px 0;
}

.menu-nav {
    margin-top: 35px;
}

/* Pop up */

.background-popup {
    color: white;
    padding: 1rem;
    box-sizing: border-box;
}
.background-popup h4 {
    margin-top: 0px;
    font-size: 1.5em;
    text-align: center;
	font-weight: 700;
    color: #a07800;
    background: #a07800;
    background: -webkit-linear-gradient(top, #a07800, #f8d018, #a07800);
    background: linear-gradient(top, #a07800, #f8d018, #a07800);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.btn-download-2, .btn-download-3 {
    background: #a07800;
    display: inline-block;
    width: 100%;
    max-width: 260px;
    padding: 0.5em 0em;
    margin-bottom: 0.6em;
    font-weight: 700;
    font-size: 1em;
}
.btn-download-2:hover {
    background: #ca9800;
}
.btn-download-3 {
    background: #885800;
}
.btn-download-3:hover {
    background: #703800;
}
.texto-nota a {
	font-weight: 700;
}

.text-credits {
	width: 100%;
	max-width: 640px;
	text-align: justify;
}

.text-credits {
	margin-top: 0px;
}

.text-credits ul {
    padding-left: 1rem;
}

.text-credits ul li {
    list-style: circle;
}

.background-popup h5 {
    font-size: 1em;
    font-weight: 700;
    color: #a07800;
    background: #a07800;
    background: -webkit-linear-gradient(top, #a07800, #f8d018, #a07800);
    background: linear-gradient(top, #a07800, #f8d018, #a07800);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gold-color {
	font-weight: 700;
    color: #a07800;
    background: #a07800;
    background: -webkit-linear-gradient(top, #a07800, #f8d018, #a07800);
    background: linear-gradient(top, #a07800, #f8d018, #a07800);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/******************************************/
/***    DISEÑO PARA TABLETAS           ****/
/******************************************/
@media only screen and (max-width:991px){
	.hide-responsive{
		display: none;
	}
	.responsive-menu {
    	display: block;
	}
	.home {
    	width: 100%;
    }
    #contenedor {
    	width: 100%;
	}
	footer {
		position: relative;
		bottom: 0px;
		width: 100%;
		height: auto;
	}
	footer p {
		padding-bottom: 10px;
		padding-top: 10px;
	}
	.interior {
    	float: none;
    	width: 636px;
    	margin-left: auto;
    	margin-right: auto;
	}
	.toggle-menu{
		margin-left: 10px;
    	margin-top: 10px;
    	display: block;
    	position: fixed;
    	cursor: pointer;
    	z-index: 1;
    	background: #ca9800;
    	padding: 1px 6px;
    	border-radius: 4px;
    	text-align: center;
    	font-size: 10px;
    	font-weight: 700;
	}
	
	.sheeba-responsive{
		height: 500px;
	}

	footer .cl {
		clear: both;
		display: none;
	}
	footer p {
		width: 93%;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	footer a {
		display: block;
	}
}

@media only screen and (max-width:668px){
	.fancybox-outer, .fancybox-inner {
	    width: auto !important;
	}
	.estatua{
		display: none;
	}
	.logo img {
    	width: 65%;
	}
	.interior {
    	float: none;
    	width: 90%;
	}
	.cuadro-texto{
		width: 100%;
		height: auto;
	}
	.sub-armas li {
    	width: 100%;
    	float: none;
    	margin-bottom: 20px;
	}
	.trailer {
    	width: 280px;
    	height: 160px;
		background: url(../img/video-mobile-action-platformer-openbor-indie-game.png) no-repeat top left;
    }
    .trailer:hover {
		background: url(../img/video-mobile-action-platformer-openbor-indie-game.png) no-repeat top right;
    }
	.castle {
    	background: url(../img/castle-action-platformer-openbor-indie-game.png) no-repeat 10% bottom;
	}
	.name-character {
    	text-align: center;
    	margin-top: 100px;
	}
	.col-desc, .info-characters {
    	width: 100%;
    	float: none;
    	height: 500px;
	}
	.content-wrap section {
    	padding: 0px !important;
    }
    .col-desc p {
    	width: 100%;
    }
    .secondary .face-image {
    	float: none;
    	margin-right: 0px;
	}
	.secondary .col-desc img {
    	text-align: center;
    	margin: auto;
    	display: block;
	}
    .secondary .col-desc {
    	width: 100%;
    	float: none;
	}
	.secondary {
    	width: 100%;
    	float: none;
	}
	.sub-armas p {
    	height: 48px;
	}
	.text-characters {
    	width: 100%;
    	top: 0px;
    	margin-top: 10px;
    	z-index: 0;
	}
	.titular-seccion {
    	max-width: 80%;
	}
	.sheeba-sprite {
    	background: url(../img/sheeba-faulkner-action-platformer-openbor-indie-game.gif) 85% bottom no-repeat;
	}
	.ethan-sprite {
    	background: url(../img/ethan-graymont-action-platformer-openbor-indie-game.gif) 70% 90% no-repeat;
	}
	.fran-sprite {
    	background: url(../img/francis-bloodrose-action-platformer-openbor-indie-game.gif) 110% 90% no-repeat;
	}
	.bertha-sprite {
    	background: url(../img/bertha-graymont-action-platformer-openbor-indie-game.png) center 90% no-repeat;
	}
	.teobaldo-sprite {
		background: url(../img/teobaldo-mondragon-action-platformer-openbor-indie-game.png) center 90% no-repeat;
	}
	.xavier-sprite {
		background: url(../img/xavier-action-platformer-openbor-indie-game.png) center 90% no-repeat;
	}
	.ficzko-sprite {
    	background: url(../img/ficzko-action-platformer-openbor-indie-game.png) center 88% no-repeat;
	}
	.darvulia-sprite {
    	background: url(../img/darvulia-action-platformer-openbor-indie-game.png) center 90% no-repeat;
	}
	.elizabeth-sprite {
    	background: url(../img/elizabeth-action-platformer-openbor-indie-game.png) center 90% no-repeat;
	}
	.evaine-sprite {
    	background: url(../img/evaine-action-platformer-openbor-indie-game.png) center 90% no-repeat;
	}
}

@media only screen and (max-width:480px){
	.fancybox-outer, .fancybox-inner {
	    height: auto !important;
	}
	.fancybox-type-iframe.fancybox-opened .fancybox-skin {
    	height: auto !important;
    }
}