/*---------------------------------- FONTS ----------------------------------*/
@font-face {/*BebasNeue Thin*/
    font-family: 'bebas_neuethin';
    src: url('./bebas/bebasneue_thin-webfont.woff2') format('woff2'),
         url('./bebas/bebasneue_thin-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {/*BebasNeue Book (light)*/
    font-family: 'bebas_neuebook';
    src: url('./bebas/bebasneue_book-webfont.woff2') format('woff2'),
         url('./bebas/bebasneue_book-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {/*BebasNeue Regular*/
    font-family: 'bebas_neueregular';
    src: url('./bebas/bebasneue_regular-webfont.woff2') format('woff2'),
         url('./bebas/bebasneue_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {/*BebasNeue Bold*/
    font-family: 'bebas_neuebold';
    src: url('./bebas/bebasneue_bold-webfont.woff2') format('woff2'),
         url('./bebas/bebasneue_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/*----------------------------------/FONTS ----------------------------------*/

/*++++++++++++++++++++++++++++++++++++++++++++++GENERICS++++++++++++++++++++++++++++++++++++++++++++++++++++*/
html, body{
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: #fff;
	font-family: 'bebas_neueregular', arial, helvetica, sans-serif;
	line-height:1;
	color:#d9d9d9;
}
*, *:before, *:after{
	box-sizing:inherit;
}
html{
	font-size:62.5%; /*Reset para REMS : 62.5% =10px */
}
body{
	font-size:1.6rem /*=16px*/;
}
h1, h2, h3, h4, h5, h6, p{
	margin:0px;
	padding:0px;
	line-height:1;
}
img{
	width:100%;
	max-width:100%;
}
a{ text-decoration: none; }
::selection, iframe body::selection {
  background: #cacaca !important; /* WebKit/Blink Browsers */
}
::-webkit-scrollbar, iframe body::-webkit-scrollbar{
width: 8px !important;
height: 8px !important;
}
::-webkit-scrollbar-thumb, iframe body::-webkit-scrollbar-thumb{
background: #737373 !important;
border-radius: 0px !important;
}
::-webkit-scrollbar-thumb:hover, iframe body::-webkit-scrollbar-thumb:hover{
background: #636363 !important;
}
::-webkit-scrollbar-track, iframe body::-webkit-scrollbar-track{
background: #F0F0F0 !important;
border-radius: 0px !important;
box-shadow: inset 0px 0px 0px 0px #F0F0F0 !important;
}
/*FONTELLO*/
[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: "fontello";
    display: inline;
}
/*++++++++++++++++++++++++++++++++++++++++++++++/GENERICS++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/*++++++++++++++++++++++++++++++++++++++++++++++LOADER++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.loader {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(60, 60, 60, 0.9);
	text-align: center;
	font-size: 2em;
	color: #cacaca;
	padding-top: 18%;
}

.loader-icon {
	-webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}

@-moz-keyframes spin { 100% { -moz-transform: translateZ(100px) rotateY(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: translateZ(100px) rotateY(360deg); } }
@keyframes spin { 100% { -webkit-transform: translateZ(100px) rotateY(360deg); transform:rotateY(360deg); } }


.loader-message {

}
/*++++++++++++++++++++++++++++++++++++++++++++++/LOADER++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/*++++++++++++++++++++++++++++++++++++++++++++++CANVAS++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.editor-3d {
	margin: 0;
	padding: 0;
}

.editor-3d-canvas {
	margin: 0;
	padding: 0;
	/*
	width: 100% !important;
	height: 100% !important;
	*/
}

.controles {
	position: absolute;
	bottom: -20px;
	right: 20px;
	background-color: #ccc;
	-moz-transform: perspective(600px)  rotateX(60deg) translate3d(-20px, 100px, 70px);
	-webkit-transform: perspective(600px)  rotateX(60deg) translate3d(-20px, 100px, 70px);
	transform: perspective(600px) rotateX(60deg) translate3d(-20px, 100px, 70px);
	border-radius: 5em;
	width: 10em;
	height: 10em;
	background: -webkit-linear-gradient(#888, #ccc);
    background: -o-linear-gradient(#888, #ccc);
    background: -moz-linear-gradient(#888, #ccc);
    background: linear-gradient(#888, #ccc);
    text-align: center;
    opacity:0.4;
  	filter:alpha(opacity=40);
}

.controles-aux {
	position: absolute;
	bottom: -20px;
	left: 20px;
	background-color: #ccc;
	-moz-transform: perspective(600px)  rotateX(60deg) translate3d(20px, 100px, 70px);
	-webkit-transform: perspective(600px)  rotateX(60deg) translate3d(20px, 100px, 70px);
	transform: perspective(600px) rotateX(60deg) translate3d(20px, 100px, 70px);
	border-radius: 5em;
	width: 10em;
	height: 10em;
	background: -webkit-linear-gradient(#888, #ccc);
    background: -o-linear-gradient(#888, #ccc);
    background: -moz-linear-gradient(#888, #ccc);
    background: linear-gradient(#888, #ccc);
    text-align: center;
    opacity:0.4;
  	filter:alpha(opacity=40);
}

.controles-top {
	position: absolute;
	top: -10px;
	left: 20px;
	background-color: #ccc;
	-moz-transform: perspective(600px)  rotateX(60deg) translate3d(20px, 100px, 70px);
	-webkit-transform: perspective(600px)  rotateX(60deg) translate3d(20px, 100px, 70px);
	transform: perspective(600px) rotateX(60deg) translate3d(20px, 100px, 70px);
	border-radius: 5em;
	width: 10em;
	height: 10em;
	background: -webkit-linear-gradient(#888, #ccc);
    background: -o-linear-gradient(#888, #ccc);
    background: -moz-linear-gradient(#888, #ccc);
    background: linear-gradient(#888, #ccc);
    text-align: center;
    opacity:0.4;
  	filter:alpha(opacity=40);
}

.controles, .controles-aux, .controles-top {
	z-index: 999;
}

.controles .fa, .controles-aux .fa , .controles-top .fa {
	display: block;
	color: #666;
	font-size: 4.5em;
}



.controles:hover, .controles-aux:hover {
	opacity:0.9;
  	filter:alpha(opacity=90);
}

.controles .fa.fa-chevron-up {
	font-size: 4em;
	padding-bottom: .3em;
	border-bottom: solid 1px #bbb;
}

.controles .fa:hover, .controles-aux .fa:hover, .controles-top .fa:hover {
	color: #fff;
	cursor: pointer;
}

.controles-aux .fa.fa-chevron-left, .controles-aux .fa.fa-chevron-right {
	font-size: 2.5em;
}

.controles-aux .fa.fa-chevron-left {
	float: left;
}

.controles-aux .fa.fa-chevron-right {
	float: right;
}

.controles .fa.fa-arrows-alt, .controles .fa.fa-backward {
	font-size: 1.75em;
}

.controles .fa.fa-backward {
	float: left;
}

.controles .fa.fa-arrows-alt {
	float: right;
	margin-right: .2em;
}



@media only screen and (max-width : 768px) {
	.controles, .controles-aux, .controles-top {
		width: 7em;
		height: 7em;
		opacity:0.6;
		filter:alpha(opacity=60);
	}

	.controles-top {
		top: 0;
	}

	.controles .fa, .controles-aux .fa , .controles-top .fa {
		font-size: 2.5em;
	}
	.controles-aux .fa.fa-chevron-left, .controles-aux .fa.fa-chevron-right {
		font-size: 1.5em;
	}

	.controles-aux {
		bottom: -26px;
		left: -4px;
	}

	.controles {
		bottom: -26px;
		right: -4px;
	}

	.controles-top {
		top: -4px;
		left: -4px;
	}
}

@media only screen and (max-width : 480px) {
	.controles, .controles-aux, .controles-top {
		width: 6em;
		height: 6em;
		opacity:0.6;
		filter:alpha(opacity=60);
	}

	.controles-top {
		top: 0;
	}

	.controles .fa, .controles-aux .fa , .controles-top .fa {
		font-size: 2em;
	}
	.controles-aux .fa.fa-chevron-left, .controles-aux .fa.fa-chevron-right {
		font-size: 1em;
	}

	.controles-aux {
		bottom: -26px;
		left: -4px;
	}

	.controles {
		bottom: -26px;
		right: -4px;
	}

	.controles-top {
		top: -4px;
		left: -4px;
	}
}
/*++++++++++++++++++++++++++++++++++++++++++++++/CANVAS++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/*++++++++++++++++++++++++++++++++++++++++++++++MODALES++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.modal {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(60, 60, 60, 0.8);
	display: none;
}

.modal iframe {
	background: #666;
	position: absolute;
	top: 10%;
	left: 10%;
	width: 80%;
	height: 80%;
}

.modal .btn {
	position: absolute;
	top: 1%;
	right: 10%;
	font-size: 2em;
	color: #fff;
}

@media only screen and (max-width : 768px) {
	.modal {
		display: none !important;
	}
}

body.with-modal .controles, body.with-modal .controles-aux, body.with-modal .controles-top {
	display: none !important;
}
/*++++++++++++++++++++++++++++++++++++++++++++++/MODALES++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/*++++++++++++++++++++++++++++++++++++++++++++++MENU++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.menu {
	box-sizing: border-box;
	position: absolute;
    right: 0%; 
    top: 0%;
	width: auto;
	height: auto;
	background: none;
	text-align: center;
	transition: all .1s linear;
	-moz-transition: all .1s linear;
	-webkit-transition: all .1s linear;
	-o-transition: all .1s linear;
	z-index: 10;
}
.dropdown {
  position: relative;
  display: block;
}
@media (max-width : 767px) {
	.menu {
		width: 100%;
		height: auto;
		text-align: center;
	}	
	.dropdown {
		width:100%;
		z-index: 2;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-end;
	}
}
.bt-menu{
	background:rgb(255 255 255 / 25%);    
	padding: .5rem;
	cursor:pointer;
	position:relative;
	z-index: 2;
}

.bt-menu-inner{	
	display: flex;
	justify-content: center;
	align-items: flex-start;
	text-decoration:none;
	color:#222;
	cursor:pointer;
}
.menu-logo-container{
	text-transform:uppercase;    
	margin: 1rem;
	color:#4c4c4c !important;
	z-index: 2;
	font-size:2.3rem;
}
@media (max-width : 767px) {
	.bt-menu{
		width:52px;
		padding:.5rem;
	}
}


.dropdown-content {
	position: absolute;
	opacity:0;
	top:-3rem;
	right:52px;
	z-index: -1;
	width:calc(100% - 52px);
  	transition: all .6s ease;
}
.show {
	opacity:1;
	z-index:-1;
	top:/*5.3rem*/0;
}
@media (min-width : 767.5px) {
	.dropdown-content {
		width:20rem;
		right:6.2rem;
	}
	.show {
		top:0rem;
	}
}
a.principal {
	box-sizing: border-box;
	display:block;
    background: rgb(0 0 0 / 82%);
    color: #fff;
    padding: 1.2rem .9rem;
    text-decoration: none;
    font-size: 1.6rem;
	font-family: 'bebas_neuebook';
    text-transform: uppercase;
    letter-spacing: .5rem;
    text-align: center;
    border-bottom: .1rem solid rgb(255 255 255 / 23%);
    -webkit-text-stroke: 0.01rem rgb(255 255 255);
    transition: all .3s ease;
}
@media (min-width : 767.5px){
	a.principal {
        text-align:right;
	}
}
a.principal:hover { 
	background: #000;
    color: rgb(255 156 156);
    -webkit-text-stroke: 0.01rem currentColor;
}
/*++++++++++++++++++++++++++++++++++++++++++++++/MENU++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/*++++++++++++++++++++++++++++++++++++++++++++++UTILIDADES++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.text-center{
	text-align: center;
}
.text-right{
	text-align: right;
}
.display-block{ 
	display:block !important; 
}
.display-none-hard {
    display: none!important
}
.p-15{	
	padding:1.5rem;
}
.upper{
	text-transform:uppercase;
}
/*++++++++++++++++++++++++++++++++++++++++++++++/UTILIDADES++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/*++++++++++++++++++++++++++++++++++++++++++++++ORIENTATION WARNING++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.orientation-warning {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/orientation_portrait.png) no-repeat 50%;
    background-color: #848484;
    z-index: 10003
}

@media (orientation: portrait) {
    .orientation-warning {
        display:none
    }
}
/*++++++++++++++++++++++++++++++++++++++++++++++/ORIENTATION WARNING++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/*++++++++++++++++++++++++++++++++++++++++++++++BIENVENIDA++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.bienvenida-inicio{
	position:fixed;
	width:100%;
	height:100%;
	background:#ef2e36;
}
.bienvenida-inicio-inner{
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	font-family:'bebas_neuebook', arial, helvetica, sans-serif;
	width:80%;
	max-width:600px;
	color:#ffffff;
	text-align:center;
	letter-spacing:0.04rem;
}
.bienvenida-logo{	    
	margin-bottom:4rem;
}
.bienvenida-logo i{	    
	font-size: 8rem;
}
.bienvenida-quote{
	font-size:1.4em;
	line-height:1.2em;
	margin-bottom:4rem;
	-webkit-text-stroke:.003em currentColor;
}
.bienvenida-quote-footer{
	line-height:1.1;
}
.bienvenida-quote-footer i{
	font-size: 1.1em;
    display: block;
    font-style: normal;
}
.bienvenida-quote-footer b{
	font-size: 1.1em;
	font-family:'bebas_neuebold', arial, helvetica, sans-serif;
}
.bienvenida-boton{
	margin-top:2rem;
    color: #fff;
    text-align: center;
}
.bienvenida-boton-blink{/*SPAN QUE CONTIENE AL BOTON Y TIENE ANIMACION DE SOMBRA*/
    display: inline-block;
    position:relative;
	margin-top:.6em;
	border:1px solid rgb(255 255 255 / 40%);
	animation: shadow-drop-br 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes shadow-drop-br {
  0% {
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
            box-shadow: 12px 12px 20px -12px rgba(0, 0, 0, 0.35);
  }
}

.bienvenida-boton #btnCerrarBienvenida{/*BOTON QUE CIERRA PANTALLA. Tiene animación blink*/
    cursor: pointer;
    display: block;
    position:relative;
    overflow:hidden;
    box-shadow: 0 0 0 0 rgb(255 255 255 / 60%);
  	animation: pulse 2s infinite;
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgb(255 255 255 / 60%);
  }
  70% {
      box-shadow: 0 0 0 10px rgb(255 255 255 / 0%);
  }
  100% {
      box-shadow: 0 0 0 0 rgb(255 255 255 / 0%);
  }
}
.bienvenida-boton #btnCerrarBienvenida span.bienvenida-boton-txt{	    	    
	font-size: 2.8rem;
	font-family:'bebas_neuebold', arial, helvetica, sans-serif;
	display:inline-block;
	text-align:center;
	color:#ffffff;
	padding:.4em .6em;
	z-index: 2;
}

.bienvenida-boton #btnCerrarBienvenida span.bienvenida-boton-bg-outer{/*CONTENEDOR DE LOS TROZOS DEL BG: lateral color plano + efecto espejo + lateral color plano*/
	width:622px /*222px*/;
	height:160%;
	position: absolute;
    top: 50%;
    left:50%;
    transform:translate(-50%,-50%) rotate(0deg);
    display:flex;
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: stretch;
	align-content: center;
	justify-content: center;		
	animation-name: botonespejo;
	animation-duration: 9s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}
@keyframes botonespejo {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
		opacity:.7;
	}
	50% {
		transform: translate(-48%, -50%) rotate(5deg);
		opacity:1;
	}
	100% {
		transform: translate(-50%, -50%) rotate(0deg);
		opacity:.7;
	}
}
.bienvenida-boton #btnCerrarBienvenida span.bienvenida-boton-bg{/*BG ESPEJO*/
	width:222px;
	display:inline-block;
	height:100%;
	background: linear-gradient(125deg, 
			rgb(255 255 255 / 40%) 0%, 
			rgb(255 255 255 / 40%) 24%, 
			rgb(255 255 255 / 0%) 24%, 
			rgb(255 255 255 / 0%) 26%, 
			rgb(255 255 255 / 40%) 26%, 
			rgb(255 255 255 / 40%) 26%, 
			rgb(255 255 255 / 40%) 30%, 
			rgb(255 255 255 / 0%) 30%, 
			rgb(255 255 255 / 0%) 35%, 
			rgb(255 255 255 / 40%) 35%, 
			rgb(255 255 255 / 40%) 68%, 
			rgb(255 255 255 / 0%) 68%, 
			rgb(255 255 255 / 0%) 80%, 
			rgb(255 255 255 / 40%) 80%, 
			rgb(255 255 255 / 40%) 100%);
}
.bienvenida-boton #btnCerrarBienvenida span.bienvenida-boton-bg-side{/*LATERAL COLOR PLANO. Sirve para que al desplazar el bg dentro del botón, no se vean huecos*/
	width:200px;
	display:inline-block;
	height:100%;
	background:rgb(255 255 255 / 40%);
}



@media (min-width: 1920px) {
	.bienvenida-quote{
		font-size:2.6em;
	}
	.bienvenida-quote-footer i{
		font-size: 2em;
	}
	.bienvenida-quote-footer b{
		font-size: 2em;
	}
	.bienvenida-logo #btnCerrarBienvenida i{	    
    	font-size: 12rem;
	}
	.bienvenida-logo #btnCerrarBienvenida span{	    	    
    	font-size: 2.2rem;
	}
}
/*++++++++++++++++++++++++++++++++++++++++++++++/BIENVENIDA++++++++++++++++++++++++++++++++++++++++++++++++++++*/