#botonescubo { margin-left: -150%; }
 
/*#################################### CONTENEDORES ELEMENTOS ####################################*/

.tablebtn { display: table; margin: 0 auto; padding: 5px; }

.contenedor-boton { display: inline-block; vertical-align: middle; padding: 0 10px; }
.txtrotulos {
  position: relative;
  text-align: center;
  font-family: OPENSANS;
  font-size: 18px;
  color: white;
  margin: 0;
  padding-bottom: 3px;}

.contenedor-flechas { position: relative; width: 102px; height: 67px; }

/*#################################### SWITCH CAMBIO DE TEMA ####################################*/
.switch {
	position: relative;
	display: block;
	padding: 0;
	margin: 0;
	width: 70px;
	height: 38px;
  -webkit-box-reflect: below -1px linear-gradient(to top, rgba(0, 0, 0, .4), rgba(255,255,255,0) 60%);}

.switch input {display:none;}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #313131;
	-webkit-transition: .6s;
	transition: .6s;}

.slider:before {
	position: absolute;
	content: "";
	height: 28px;
	width: 28px;
	left: 4px;
	top: 3px;
	background: radial-gradient(at top left, #FFFFFF 30%, #494949);
	-webkit-transition: .6s;
	transition: .6s;}

.slider:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 50%;
  transition: all 0.3s ease;
  background: rgba(255,255,255,.2);}

input:checked + .slider {background: #0092DE;}
input:focus + .slider {box-shadow: 0 0 1px #242424;}
input:checked + .slider:before {
	background: radial-gradient(at top left, #FFF15B 40%, #FF9000);
	-webkit-transform: translateX(30px);
	-ms-transform: translateX(30px);
	transform: translateX(30px);}

.bordenoche { border: 2px solid white; }
.bordedia { border: 2px solid black; }

/*#################################### ESTADO DEL TEMA ####################################*/
.estadofondo {
	z-index: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	background: #262626;
	padding: 0px;
	margin: 0px; }
.estadofondo:after, .estadofondo:before { content: ""; position: absolute; }

/*#################################### BACKGROUND NOCHE ####################################*/
.fondonoche:after, .fondonoche:before, .mascaranoche { background: #262626; }
.fondonoche:after, .fondonoche:before { top:0; bottom: 0; }
.fondonoche:after { left: 100%; right: 0; }
.fondonoche:before { left: 0; right: 100%; }
@keyframes noche1 { from { left: 100%; } to { left: 50%; } }
@keyframes noche2 { from { right: 100%; } to { right: 50%; } }
.fondonoche:after {	animation: noche1 0.5s ease; }
.fondonoche:before { animation: noche2 0.5s ease; }

/*#################################### BACKGROUND DÍA ####################################*/
.fondodia:after, .fondodia:before, .mascaradia { background: #D3D3D3; }
.fondodia:after, .fondodia:before { left: 0; right: 0; }
.fondodia:after { top:0; bottom: 100%; }
.fondodia:before { top: 100%; bottom: 0; }
@keyframes dia1 { from { bottom: 100%; } to { bottom: 50%; } }
@keyframes dia2 { from { top: 100%; } to { top: 50%; } }
.fondodia:after { animation: dia1 0.5s ease; }
.fondodia:before { animation: dia2 0.5s ease; }
.fondonoche:after, .fondonoche:before, .fondodia:after, .fondodia:before { animation-fill-mode: forwards; }

/*#################################### BOTÓN ROTACIÓN AUTOMÁTICA ####################################*/

.boton-auto {
  display: block;
	position: relative;
  padding: 1px 8px;
  color: white;
  border: 2px solid white;
  transition: all .5s ease;
  -webkit-box-reflect: below -1px linear-gradient(to top, rgba(0, 0, 0, .4), rgba(255,255,255,0) 60%); }

.boton-auto:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 50%;
  transition: all 0.3s ease;
  background: rgba(255,255,255,.2);}

.boton-auto:after {
	z-index: -1;
	content: "";
	position: absolute;
	transition: all 0.3s ease 0s;
	background: #0185C7;
	top:0; 
	bottom: 0; 
	left: 0; 
	right: 100%;}

.boton-auto:hover, .boton-auto:focus { color: white; }
.boton-auto:hover:after { right: 0; }
.sellarauto:after { right: 0; background: #B20000; }

.icon-auto { display: inline-block;	font-size: 20px; padding-top: 2px; }
.txt-auto { display: inline-block; padding-bottom: 3px; font-family: CENTURY; font-size: 16px;}

.autonoche{ border-color: white; }
.autonoche, .autonoche:hover, .autonoche:focus { color: white; }

.autodia{ font-weight: bold; border-color: black; }
.autodia, .autodia:hover, .autodia:focus { color: black; }

/*#################################### BOTONES DE COLORES ####################################*/
.btncaras {
	position: relative;
	width: 30px;
	height: 30px;
  padding: 0;
  margin: 0 2px;
	transition: all 0.3s ease;
  border: 2px solid white;  
  border-radius: 50%;
  -webkit-box-reflect: below -1px linear-gradient(to top, rgba(0, 0, 0, .4), rgba(255,255,255,0) 60%); }

.btncaras:before {
	content: '';
	position: absolute;
	top: -5px;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	transition: all 0.3s ease;
	background-image: 
    -webkit-linear-gradient(
      rgba(250, 250, 255, 1) 0%, 
      rgba(250, 250, 255, .8) 10%, 
      rgba(250, 250, 255, 0) 100%);
	-webkit-transform: scale(0.8, 0.6);}	

.btncaras:hover {border-radius: 0;}
.btncaras:hover:before {
	top: 0;
	border-radius: 0; 
	background-image: 
    -webkit-linear-gradient(
      rgba(250, 250, 255, .8) 0%, 
      rgba(250, 250, 255, .4) 25%, 
      rgba(250, 250, 255, 0) 50%);
	-webkit-transform: scale(1, 1);}

.btnleft { background: #0EAF9A; }   /* 1. Ámbito de la comunidad anfitriona */ 
.btnfront { background: #76C152; }  /* 2. Ámbito de gestión del recurso turístico */
.btnbottom { background: #F16322; } /* 3. Ámbito de gestión de la actividad recreacional */
.btnback { background: #FBAF17; }   /* 4. Ámbito de gestión logística */  
.btntop { background: #17BDE3; }    /* 5. Ámbito de gestión comercial */
.btnright { background: #DC4397; }  /* 6. Ámbito del turista vivencial */       

/*#################################### ROTULOS BOTONES DE COLORES ####################################*/
.rotulo { display: inline-block; z-index: 1; }

.rotulo-comunidad, .rotulo-turistico, .rotulo-recreacional,
.rotulo-logistica, .rotulo-comercial, .rotulo-vivencial{
	visibility: hidden;
	position: absolute;
	width: 180px;
	height: 40px;
	top: 36px;
	left: -78px; 
	color: #000000;
	border: 2px solid white;
	border-radius: 6px;
	transform: rotateY(90deg);
	transition: all 0.2s ease;
  -webkit-box-reflect: below -1px linear-gradient(to top, rgba(0, 0, 0, .4), rgba(255,255,255,0) 50%);}

.rotulo-comunidad:before, .rotulo-turistico:before, .rotulo-recreacional:before,
.rotulo-logistica:before, .rotulo-comercial:before, .rotulo-vivencial:before {
	content:"";
	position: absolute;
	left: 80px;
	top: -11px;
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-bottom: 10px solid white;
	border-right: 10px solid transparent;}

.rotulo-comunidad:after, .rotulo-turistico:after, .rotulo-recreacional:after, 
.rotulo-logistica:after, .rotulo-comercial:after, .rotulo-vivencial:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 50%;
  transition: all 0.3s ease;
  background: rgba(255,255,255,.2);}

.rotulo-comunidad { background-color: #0EAF9A; }
.rotulo-turistico { background-color: #76C152; }
.rotulo-recreacional { background-color: #F16322; }
.rotulo-logistica { background-color: #FBAF17; }
.rotulo-comercial { background-color: #17BDE3; }
.rotulo-vivencial { background-color: #DC4397; }

.verrotulo:hover .rotulo-comunidad,
.verrotulo:hover .rotulo-turistico,
.verrotulo:hover .rotulo-recreacional,
.verrotulo:hover .rotulo-logistica,
.verrotulo:hover .rotulo-comercial,
.verrotulo:hover .rotulo-vivencial { visibility: visible; transform: translateY(0px); }

.rotulo .rotulo-dia { border-color: black; }
.rotulo .rotulo-dia:before { border-bottom-color: black; }

.titulo-rotulo {
	position: relative;
	padding-top: 5px;
	text-align: center;
	font-family: CENTURY;
	font-style: normal;
	font-size: 12px;
	font-weight: bold;	
	line-height: 1.1;
	color: #000000; }

/*#################################### BOTONES FLECHAS ####################################*/
.btnflechas {
	position: absolute;
  width: 32px;
  height: 32px;
  background-color: #AFAFAF;
  border-radius: 4px;
  border-right: 3px solid white;
  border-bottom: 3px solid #757575;
  font-size: 14px;
  color: black;
  padding-left: 8px;
  padding-top: 5px;
  transition: all 0.3s ease; }
 
/*.arriba { display: block; margin: 2px auto; }
.izquierda, .abajo, .derecha { 
	display: inline-block;
	-webkit-box-reflect: below 0px linear-gradient(to top, rgba(0, 0, 0, .4), rgba(255,255,255,0) 60%); }*/

.btnflechas:before {
	content: '';
	position: absolute;
	left: 1px;
	top: 1px;
	width: 0;
	height: 0;
	transition: all 0.3s ease;
	border-top: 32px solid rgba(255,255,255,.2);
	border-right: 32px solid transparent;
	border-bottom: 32px solid transparent;}

.btnflechas:focus { color: black; }
.btnflechas:hover { background-color: #C0FF00; color: black; }
.btnflechas:active {
  width: 30px;
  height: 30px;
  border-right: 2px solid white;
  border-bottom: 2px solid #757575; }

.izquierda { left: 0px; bottom: 0px; }
.arriba { left: 35px; bottom: 35px; }
.abajo { left: 35px; bottom: 0px; }
.derecha { left: 70px; bottom: 0px; }

.izquierda:active, .pressizquierda { left: 2px; }
.arriba:active, .pressarriba { left: 37px; }
.abajo:active, .pressabajo { left: 37px; }
.derecha:active, .pressderecha { left: 72px; }

.flechasdia{
	background-color: #3E3E3E;
	color: white;
	border-right: 3px solid #737373;
	border-bottom: 3px solid black;}
.flechasdia:active {
	border-right: 1px solid #737373;
	border-bottom: 1px solid #000000;}

.flechasnoche:hover {background-color: #C0FF00; color: black;}
.flechasdia:hover {background-color: #00AEFF; color: white;}
.flechasnoche:focus {color: black;}
.flechasdia:focus {color: white;}

/*#################################### PULSACIÓN FLECHAS (NOCHE) ####################################*/
.pressnoche, .pressdia { width: 30px; height: 30px; }

.pressnoche {
	background-color: #C0FF00;
	border-right: 1px solid white;
	border-bottom: 1px solid #757575;}

/*#################################### PULSACIÓN FLECHAS (DÍA) ####################################*/
.pressdia{
	background-color: #00AEFF;
	border-right: 1px solid #737373;
	border-bottom: 1px solid #000000;}

/*#################################### BOTÓN MODO 3D ####################################*/
#contModo3D {
	position: relative;
	width: 145px;
	height: 40px;
	margin-left: 10px;
	-webkit-box-reflect: below 2px linear-gradient(to top, rgba(0, 0, 0, .4), rgba(255,255,255,0) 50%);}

/*################ CONTENEDOR CUBO MODO 3D ################*/
.containerModo3D {
	position: relative;
  padding: 0;
  width: 40px;
  height: 40px;
  perspective: 800px;}

#cuboModo3D {
	transform: rotateX(-45deg) rotateY(-45deg);
  width: inherit;
  height: inherit;
  -webkit-transition: -webkit-transform 1s linear;
  -moz-transition: -moz-transform 1s linear;
  transition: transform 1s linear;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;}

.sideModo3D {
	opacity: .3;
  position: absolute;
  width: inherit;
  height: inherit;
  font: normal 0px Arial;
  text-align: center;
  box-sizing: border-box;}

/*##################### CARAS DEL CUBO LOGO #####################*/
:root { --widthC3D: 20px; }
.leftModo3D {transform: rotateY(-90deg) translateZ(var(--widthC3D)); border: 6px solid #0EAF9A;}
.frontModo3D {transform: translateZ(var(--widthC3D)); border: 6px solid #76C152;}
.topModo3D {transform: rotateX(90deg) translateZ(var(--widthC3D)); border: 6px solid #F16322;}
.bottomModo3D {transform: rotateX(-90deg) translateZ(var(--widthC3D)); border: 6px solid #17BDE3;}
.backModo3D {transform: rotateY(180deg) translateZ(var(--widthC3D)); border: 6px solid #FBAF17;}
.rightModo3D {transform: rotateY(90deg) translateZ(var(--widthC3D)); border: 6px solid #DC4397;}

#cuboModo3D > div {background: transparent;}

@keyframes rotateModo3D {
  from{ transform: rotateX(-45deg) rotateY(-45deg);}
  to{ transform: rotateX(-405deg) rotateY(-405deg);}}
.AnimModo3D {animation: rotateModo3D 3s infinite linear;}

/*##################### BOTÓN 3D #####################*/
.btn3d {
  position: absolute;
  top: 2px;
  left: 55px;
  padding: 6px;
  color: black;
  transition: all 0.3s;
  background: #B3B3B3; }

.btn3d:before, .btn3d:after {position: absolute; content: ''; transition: all 0.3s;}
.btn3d:focus, .btn3d:hover {color: black;}

.btn3d:before {
  width: 102%;
  height: 6px;
  left: 2px;
  bottom: -6px;
  transform: skewX(45deg);
  background: #565656;}

.btn3d:after {
  height: 102%;
  width: 6px;
  right: -6px;
  top: 2px;
  transform: skewY(45deg);
  background: #A2A2A2;}

.brillo3D {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 50%;
  transition: all 0.3s ease;
  background: rgba(255,255,255,.3);}

.active3D { margin-left: 4px; margin-top: 4px; background: #009CFF; }
.active2:before { height: 2px; bottom: -1px; left: 1px; background: #00546C; }
.active3:after { width: 2px; right: -2px; top: 1px; height: 98%; background: #008DB5; }

.cont-plano {
  cursor: pointer;
  position: relative;
  margin-left: 5px;
  -webkit-box-reflect: below -25px linear-gradient(to top, rgba(0, 0, 0, .4), rgba(255,255,255,0) 60%);}

.cont-plano div {
  position: absolute;
  left: 0;
  top: 0;
  width: 60px; 
  height: 34.64px;
  transition: .3s all ease-in-out; }

.cont-plano div:before,
.cont-plano div:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent; }

.cont-plano div:before { bottom: 100%; }
.cont-plano div:after { top: 100%; }
:root { --wborder: 17.32px; }

.mascara2d { 
	position: relative !important; 
	display: flex;
  justify-content: center;
  align-items: center;
	text-align: center; 
	line-height: 1; 
	background: #B3B3B3; 
	color: white;
  text-shadow: 1px 1px 1px #1D1D1D; }
.mascara2d:before { border-bottom: var(--wborder) solid #B3B3B3; }
.mascara2d:after { border-top: var(--wborder) solid #B3B3B3; }

.efecto span {
  z-index: 1;
  position: absolute;
  top: 11px;
  left: -3px;
  width: 56%;
  height: 90%;
  background: rgba(0,0,0,.4);
  transform: rotate(30deg) skew(30deg);}

.efecto span:before {
  content: '';
  position: absolute;
  top: -12px;
  left: 28px;
  width: 48px;
  height: 24px;
  background: rgba(0,0,0,.2);
  transform: rotate(-41deg) skew(-41deg);}

.plano1 {background: #76C152;}
.plano1:before {border-bottom: var(--wborder) solid #76C152;}
.plano1:after {border-top: var(--wborder) solid #76C152;}

.plano2 {background: #F16322;}
.plano2:before {border-bottom: var(--wborder) solid #F16322;}
.plano2:after {border-top: var(--wborder) solid #F16322;}

.plano3 {background: #FBAF17;}
.plano3:before {border-bottom: var(--wborder) solid #FBAF17;}
.plano3:after {border-top: var(--wborder) solid #FBAF17;}

.plano4 {background: #17BDE3;}
.plano4:before {border-bottom: var(--wborder) solid #17BDE3;}
.plano4:after {border-top: var(--wborder) solid #17BDE3;}

.plano5 {background: #0EAF9A;}
.plano5:before {border-bottom: var(--wborder) solid #0EAF9A;}
.plano5:after {border-top: var(--wborder) solid #0EAF9A;}

.plano6 {background: #DC4397;}
.plano6:before {border-bottom: var(--wborder) solid #DC4397;}
.plano6:after {border-top: var(--wborder) solid #DC4397;}

.hover2d:hover .plano1 { left: 10px; }
.hover2d:hover .plano2 { left: 20px; }
.hover2d:hover .plano3 { left: 30px; }
.hover2d:hover .plano4 { left: 40px; }
.hover2d:hover .plano5 { left: 50px; }
.hover2d:hover .plano6 { left: 60px; }

.bottom2d { top: 68px !important; }
.back2d { top: 136px !important; }
.top2d { top: 204px !important; }
.left2d { left: -62px !important; }
.right2d { left: 62px !important; }
.left2df { top: 136px !important; }
.right2df { top: 136px !important; }

@media only screen and (max-width: 420px) {

	.tablebtn { display: block; text-align: justify; }

	.bordenoche { border-width: 1px; }
	.bordedia { border-width: 1px; }
	.autonoche { border-color: white; }
	.autodia { border-color: black; }
	.contenedor-boton { padding: 4px; }

	.switch { width: 42px; height: 24px; }
	.slider:before { height: 16px; width: 16px; left: 3px; top: 3px; }
	input:checked + .slider:before { 
		-webkit-transform: translateX(18px);
    -ms-transform: translateX(18px);
    transform: translateX(18px); }
	
	.icon-auto { font-size: 14px; padding-top: 2px; }
	.txt-auto { display: none; }
	.boton-auto { padding: 0 6px; border-width: 1px; margin-left: 5px; }
	
	.contenedor-rotulos { line-height: 0; margin-left: 5px; }
	.btncaras { margin: 0; width: 24px; height: 24px; border-width: 1px; }
	.txtrotulos { font-size: 14px; }
	.rotulo-comunidad,
	.rotulo-turistico,
	.rotulo-recreacional,
	.rotulo-logistica,
	.rotulo-comercial,
	.rotulo-vivencial { top: 33px; left: -81px; border-width: 1px; }

	.contenedor-flechas { position: relative; width: 82px; height: 54px; }
	.btnflechas { width: 26px; height: 26px; font-size: 12px; padding-left: 6px; }
	.btnflechas:before { border-top-width: 24px; border-right-width: 24px; border-bottom-width: 24px; }
	.btnflechas:active {
		width: 24px;
		height: 24px;
		border-right: 2px solid white;
		border-bottom: 2px solid #757575; }
	.arriba { left: 28px; bottom: 27px; }
  .izquierda { left: 0px; }
  .abajo { left: 28px; }
  .derecha { left: 56px; }
  .izquierda:active, .pressizquierda { left: 2px; }
	.arriba:active, .pressarriba { left: 30px; }
	.abajo:active, .pressabajo { left: 30px; }
	.derecha:active, .pressderecha { left: 58px; }

	#contModo3D { width: 115px; height: 32px; }
	.containerModo3D { width: 30px; height: 30px; }
	:root { --widthC3D: 15px; }
	.leftModo3D, .frontModo3D, .topModo3D, .bottomModo3D, .backModo3D, .rightModo3D { border-width: 4px; }
	.btn3d { left: 42px; font-size: 12px; padding: 3px 5px; }

	.cont-plano { margin-left: 8px; }
	.cont-plano div { width: 42px; height: 22px; font-size: 10px; }
	.cont-plano div:before, .cont-plano div:after { border-left-width: 21px; border-right-width: 21px; }
	:root { --wborder: 13px; }
	.hover2d:hover .plano1 { left: 5px; }
	.hover2d:hover .plano2 { left: 10px; }
	.hover2d:hover .plano3 { left: 15px; }
	.hover2d:hover .plano4 { left: 20px; }
	.hover2d:hover .plano5 { left: 25px; }
	.hover2d:hover .plano6 { left: 30px; }
	.bottom2d { top: 10px !important; }
	.back2d { top: 20px !important; }
	.top2d { top: 30px !important; }
	.left2d { left: -10px !important; }
	.right2d { left: 10px !important; }
	.left2df { top: 20px !important; }
	.right2df { top: 20px !important; }
	.efecto span { display: none; }

}