@charset "utf-8";

/*
/*	Copyright (c) 2021 Marketify
/*	Author: Marketify
/*	This file is made for CURRENT TEMPLATE

01)	TOKYO TOKYO BASE
02) TOKYO MOBILE MENU
03) TOKYO LEFTPART
04) TOKYO RIGHTPART
05) TOKYO HOME
06) TOKYO ABOUT
07) TOKYO PORTFOLIO
08) TOKYO NEWS
09) TOKYO CONTACT
10) TOKYO MAGIC CURSOR
11) TOKYO MEDIA QUERIES (FOR SMALL DEVIVES)


/*---------------------------------------------------*/
/*	01) TOKYO BASE
/*---------------------------------------------------*/

html {
	overflow-x: hidden;
	padding: 0px;
	margin: 0px
}
body{
	font-family: "Inter";
	font-size: 15px;
	line-height: 30px;
	letter-spacing: 0.5px;
	word-wrap: break-word;
	font-weight: 400;
	background-color: #fff;
	color: #767676;
}
svg{
	fill: #000;
	width: 20px;
	height: 20px;
}

img.svg{
	width: 15px;
	height: 15px;
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #6f6f6f;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: #6f6f6f;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: #6f6f6f;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: #6f6f6f;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color: #6f6f6f;
}

::placeholder { /* Most modern browsers support this now. */
   color: #6f6f6f;
}

.container{
	max-width: 960px;
	width:100%;
	margin-left: auto;
	margin-right: auto;
	height:auto;
	padding:0px 40px;
	position:relative;
	clear:both;
}

h1, h2, h3, h4, h5, h6{
	font-weight:500;
	line-height: 1.4;
	font-family: "Inter";
	color: #000;
}

h1 { font-size: 45px; }
h2 { font-size: 36px; }
h3 { font-size: 30px; }
h4 { font-size: 24px; }
h5 { font-size: 20px; }
h6 { font-size: 16px; }

.tokyo_tm_all_wrap{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	position: relative;
}
.tokyo_tm_all_wrap,
.tokyo_tm_all_wrap *{
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}

















/* ===== CONTENEDOR GLOBAL ===== */
#preloader {
  position: fixed;
  inset: 0;
  background: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;              /* por encima de todo */
  transition: opacity .6s ease, visibility .6s ease;
}
#preloader.pl-hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ===== ENVOLTURA FRACTAL ===== */
.fractal-shell {
  position: relative;
  width: 250px; /* Más grande */
  height: 250px;
  display: grid;
  place-items: center;
  perspective: 900px;
  transform-style: preserve-3d;
}


/* ===== HALO DE FONDO, COLOR MUY SUAVE ===== */
.fractal-halo {
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 90%;
  background: conic-gradient(
    from 0deg,
    rgba(255, 140, 180, 0.18),
    rgba(255, 200, 120, 0.15),
    rgba(200, 255, 180, 0.15),
    rgba(150, 220, 255, 0.18),
    rgba(190, 150, 255, 0.18),
    rgba(255, 150, 220, 0.15),
    rgba(255, 140, 180, 0.18)
  );
  filter: blur(45px) hue-rotate(0deg);
  opacity: 0.28;               /* desvanecido general */
  animation:
    haloPulse 6s ease-in-out infinite,
    haloHue 20s linear infinite;
  will-change: transform, opacity, filter;
}

/* Pulsación leve */
@keyframes haloPulse {
  0%, 100% { transform: scale(1);   opacity: 0.22; }
  50%      { transform: scale(1.1); opacity: 0.38; }
}

/* Cambio de tono lento */
@keyframes haloHue {
  0%   { filter: hue-rotate(0deg)   blur(45px); }
  50%  { filter: hue-rotate(180deg) blur(45px); }
  100% { filter: hue-rotate(360deg) blur(45px); }
}





/* ===== PATRÓN RADIAL ===== */
.fractal-rays {
  position: absolute;
  width: 200px;
  height: 200px;
  pointer-events: none;
}
.fractal-rays span {
  position: absolute;
  width: 0.5px; /* más fino */
  height: 100%;
  background: rgba(0,0,0,1); /* negro puro */
  top: 0;
  left: 50%;
  transform-origin: center 50%;
  animation: rayBlink 2.8s ease-in-out infinite;
}
@keyframes rayBlink {
  0%, 100% { opacity: 0; }
  40%      { opacity: .9; }
}
.fractal-rays span:nth-child(1) { transform: translateX(-50%) rotate(0deg); animation-delay: 0s; }
.fractal-rays span:nth-child(2) { transform: translateX(-50%) rotate(22.5deg); animation-delay: .1s; }
.fractal-rays span:nth-child(3) { transform: translateX(-50%) rotate(45deg); animation-delay: .2s; }
.fractal-rays span:nth-child(4) { transform: translateX(-50%) rotate(67.5deg); animation-delay: .3s; }
.fractal-rays span:nth-child(5) { transform: translateX(-50%) rotate(90deg); animation-delay: .4s; }
.fractal-rays span:nth-child(6) { transform: translateX(-50%) rotate(112.5deg); animation-delay: .5s; }
.fractal-rays span:nth-child(7) { transform: translateX(-50%) rotate(135deg); animation-delay: .6s; }
.fractal-rays span:nth-child(8) { transform: translateX(-50%) rotate(157.5deg); animation-delay: .7s; }

/* ===== CAPAS GEOMÉTRICAS ===== */
.fractal-layer {
  position: absolute;
  border: 1.1px solid rgba(0,0,0,2); /* más fino y negro */
  border-radius: 6%;
  mix-blend-mode: multiply;
  transform-origin: center;
  will-change: transform, border-radius, opacity;
  animation:
    layerMorph 4.2s ease-in-out infinite,
    layerRotate 6.2s linear infinite;
}

/* Capas ajustadas */
.fractal-layer.l1 { width: 190px; height: 190px; animation-duration: 6.3s, 9s; }
.fractal-layer.l2 { width: 162px; height: 162px; animation-duration: 5.5s, 7.5s; animation-delay: .25s; transform: rotateX(12deg); }
.fractal-layer.l3 { width: 132px; height: 132px; animation-duration: 4.8s, 6.4s; animation-delay: .45s; transform: rotateY(10deg); }
.fractal-layer.l4 { width: 100px; height: 100px; animation-duration: 4s, 5.2s; animation-delay: .6s; transform: rotateX(-10deg); }
.fractal-layer.l5 {
  width: 65px;
  height: 65px;
  animation-duration: 3.4s, 4.5s;
  animation-delay: .75s;
  border-width: 1.3px; /* también más fino */
  background: radial-gradient(circle, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 70%);
}

/* === MORFOLOGÍA === */
@keyframes layerMorph {
  0%   { border-radius: 5%; opacity: 1; }
  20%  { border-radius: 22% 78% 44% 56% / 48% 38% 62% 52%; }
  40%  { border-radius: 50%; opacity: .7; }
  60%  { border-radius: 12% 52% 72% 22% / 25% 75% 25% 75%; }
  80%  { border-radius: 3%; opacity: .9; }
  100% { border-radius: 5%; opacity: 1; }
}

/* === ROTACIÓN === */
@keyframes layerRotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.fractal-layer.l2 { animation-name: layerMorph, layerRotateReverse; }
.fractal-layer.l4 { animation-name: layerMorph, layerRotateReverse; }

@keyframes layerRotateReverse {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 540px) {
  .fractal-shell { width: 180px; height: 180px; }
  .fractal-layer.l1 { width: 145px; height: 145px; }
  .fractal-layer.l2 { width: 122px; height: 122px; }
  .fractal-layer.l3 { width: 98px;  height: 98px; }
  .fractal-layer.l4 { width: 74px;  height: 74px; }
  .fractal-layer.l5 { width: 50px;  height: 50px; }
}






















/*---------------------------------------------------*/
/*	02) TOKYO MOBILE MENU
/*---------------------------------------------------*/

.tokyo_tm_mobile_menu{
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	z-index: 10;
	background-color: #fff;
	display: none;
}
.tokyo_tm_mobile_menu .menu_inner{
	width: 100%;
	height: auto;
	clear: both;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 40px;
}
.tokyo_tm_mobile_menu .logo img{
	max-width: 50px;
}
.tokyo_tm_mobile_menu .menu ul{
	margin: 0px;
	list-style-type: none;
}
.tokyo_tm_mobile_menu .menu ul li{
	margin: 0px 10px 0px 0px;
	display: inline-block;
}
.tokyo_tm_mobile_menu .menu ul li:last-child{
	margin-right: 0px;
}
.tokyo_tm_mobile_menu .menu ul li a{
	text-decoration: none;
	color: #000;
}
.tokyo_tm_mobile_menu .menu ul li .svg{
	width: 20px;
	height: 20px;
}

/*---------------------------------------------------*/
/*	03) TOKYO LEFTPART
/*---------------------------------------------------*/

.tokyo_tm_all_wrap .leftpart{
	width: 450px;
	height: 100vh;
	position: fixed;
	display: flex;
	align-items: center;
	z-index: 10;
	padding: 0px 100px;
	background-color: #fff;
}
.tokyo_tm_all_wrap .leftpart_inner{
	width: 100%;
	height: auto;
}
.tokyo_tm_all_wrap .leftpart img{
	max-width: 60px;
}
.tokyo_tm_all_wrap .leftpart .menu{
	padding: 40px 0px 50px 0px;
	width: 100%;
	float: left;
}
.tokyo_tm_all_wrap .leftpart .menu ul{
	margin: 0px;
	list-style-type: none;
}
.tokyo_tm_all_wrap .leftpart .menu ul li{
	margin: 0px;
	width: 100%;
	float: left;
}
.tokyo_tm_all_wrap .leftpart .menu ul li a{
	text-decoration: none;
	color: #bdbaba;
	display: inline-block;
	font-weight: 500;
	font-family: "Inter";
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.tokyo_tm_all_wrap .leftpart .menu ul li a:hover{
	color: #000;
	letter-spacing: 2px;
}
.tokyo_tm_all_wrap .leftpart .menu ul li.active a{
	color: #000;
	letter-spacing: 2px;
}
.tokyo_tm_all_wrap .leftpart .copyright{
	width: 100%;
	float: left;
}
.tokyo_tm_all_wrap .leftpart .copyright p{
	font-size: 15px;
	color: #999;
	font-family: "Inter";
	line-height: 25px;
}
.tokyo_tm_all_wrap .leftpart .copyright a{
	text-decoration: none;
	color: #787878;
	font-weight: 500;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.tokyo_tm_all_wrap .leftpart .copyright a:hover{
	color: #000;
	letter-spacing: 2px;
}

/*---------------------------------------------------*/
/*	04) TOKYO RIGHTPART 
/*---------------------------------------------------*/

.tokyo_tm_all_wrap .rightpart{
	width: 100%;
	min-height: 100vh;
	float: left;
	position: relative;
	background-color: #f8f8f8;
	padding-left: 450px;
}
.tokyo_tm_all_wrap .rightpart_in{
	position: relative;
	width: 100%;
	float: left;
	clear: both;
	border-left: 1px solid #ebebeb;
	min-height: 100vh;
}
.tokyo_tm_section{
	position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
	padding-left: 450px;
    overflow-x: hidden;
    overflow-y: auto;
    opacity: 0;
    transform: translate3d(5%, 0, 0);
    transition: transform .3s ease .3s,opacity 0s ease .3s;
	z-index: -1;
}
.tokyo_tm_section.active{
	opacity: 1;
	transform: translate3d(0, 0, 0);
	z-index: 5;
}

/*---------------------------------------------------*/
/*	05) TOKYO HOME
/*---------------------------------------------------*/

.tokyo_tm_home{
	width: 100%;
	min-height: 100vh;
	clear: both;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.tokyo_tm_home .home_content{
	display: flex;
	align-items: center;
}
.tokyo_tm_home .avatar{
	min-width: 300px;
	min-height: 300px;
	position: relative;
	border-radius: 100%;
}

























/*---------------------------------------------------*/
/*	05) AVATAR IMAGEN INICIO (versión grande, máscara animada)
/*---------------------------------------------------*/

.tokyo_tm_home .avatar .image {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 380px; /* ⬆️ más grande */
	height: 380px; /* ⬆️ más grande */
	transform: translate(-50%, -50%); /* centra perfectamente */
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-blend-mode: multiply;
	box-shadow: inset 0px 0px 0px 8px rgba(255,255,255,0.3);
	transform-origin: center;
	perspective: 1000px;

	/* Solo la máscara se mueve */
	animation: morph 8s ease-in-out infinite;
}

/* --- La máscara animada --- */
@keyframes morph {
	0% {
		border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
	}
	50% {
		border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
	}
	100% {
		border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
	}
}

/* --- Ajustes responsivos --- */
@media (max-width: 992px) {
	.tokyo_tm_home .avatar .image {
		width: 300px;
		height: 300px;
		box-shadow: inset 0px 0px 0px 6px rgba(255,255,255,0.3);
	}
}

@media (max-width: 540px) {
	.tokyo_tm_home .avatar .image {
		width: 230px;
		height: 230px;
		box-shadow: inset 0px 0px 0px 5px rgba(255,255,255,0.3);
	}
}






























.tokyo_tm_home .details{
	margin-left: 80px;
}
.tokyo_tm_home .details .name{
	font-size: 55px;
	font-weight: 800;
	text-transform: uppercase;
	margin-bottom: 14px;
}
.tokyo_tm_home .details .job{
	font-family: "Inter";
	font-weight: 500;
	max-width: 450px;
}
.tokyo_tm_home .social{
	width: 100%;
	float: left;
}
.tokyo_tm_home .social ul{
	margin: 0px;
	list-style-type: none;
}
.tokyo_tm_home .social ul li{
	margin: 10px 12px 0px 0px;
	display: inline-block;
}
.tokyo_tm_home .social ul li:last-child{
	margin-right: 0px;
}
.tokyo_tm_home .social ul li a{
	text-decoration: none;
	color: #000;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.tokyo_tm_home .social ul li a:hover{
	color: #000;
}
.tokyo_tm_home .social ul li .svg{
	width: 25px;
	height: 25px;
}

/*---------------------------------------------------*/
/*	06) TOKYO ABOUT
/*---------------------------------------------------*/

.tokyo_tm_about{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	padding: 100px 0px 100px 0px;
}
.tokyo_tm_about .about_image{
	position: relative;
	margin-bottom: 48px;
}
.tokyo_tm_about .about_image img{
	opacity: 0;
	min-width: 100%;
}
.tokyo_tm_about .about_image .main{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.tokyo_tm_about .about_image img{
	min-width: 100%;
	box-shadow: 0px 0px 20px rgba(0,0,0,.12);
}
.tokyo_tm_about .description{
	width: 100%;
	height: auto;
	clear: both;
}
.tokyo_tm_about .description_inner{
	width: 100%;
	display: flex;
	justify-content: space-between;
}
.tokyo_tm_about .description .left{
	width: 55%;
	padding-right: 50px;
}
.tokyo_tm_about .description .left p{
	margin-bottom: 35px;
	font-style: italic;
}
.tokyo_tm_about .description .name{
	font-weight: 700;
	font-size: 22px;
	margin-bottom: 26px;
}
.tokyo_tm_about .description .right{
	width: 45%;
	padding-left: 50px;
}
.tokyo_tm_about .description .right > ul{
	margin: 0px;
	list-style-type: none;
}
.tokyo_tm_about .description .right > ul > li{
	margin: 0px;
	width: 100%;
	float: left;
}
.tokyo_tm_about .description .right > ul > li span{
	min-width: 90px;
	display: inline-block;
	font-weight: 700;
	color: #000;
	font-style: italic;
}
.tokyo_tm_about .description .right > ul > li a{
	text-decoration: none;
	color: #787878;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.tokyo_tm_about .description .right > ul > li a:hover{
	color: #000;
	letter-spacing: 2px;
}
.tokyo_tm_button{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
}
.tokyo_tm_button a{
	text-decoration: none;
	color: #fff;
	display: inline-block;
	background-color: #000;
	padding: 9px 40px 14px 40px;
	font-style: italic;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.tokyo_tm_button a:hover{
	letter-spacing: 2px;
}
.tokyo_tm_modalbox_about{
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	height: 100vh;
	z-index: 15;
	background-color: rgba(0,0,0,.8);
	opacity: 0;
	visibility: hidden;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.tokyo_tm_modalbox_about.opened{
	opacity: 1;
	visibility: visible;
}
.tokyo_tm_modalbox_about .container{
	height: 100vh;
}
.tokyo_tm_modalbox_about .box_inner{
	position: absolute;
	top: 70px;
	bottom: 70px;
	width: 968px;
	left: 50%;
	transform: translateX(-50%);
	background-color: #fff;
	z-index: 1;
	opacity: 0;
	visibility: hidden;
	margin-top: -20px;
	transition-delay: .3s;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.tokyo_tm_modalbox_about.opened .box_inner{
	opacity: 1;
	visibility: visible;
	margin-top: 0px;
}
.tokyo_tm_modalbox_about .close{
	display: block;
	visibility: visible;
	position: absolute;
	z-index: 3;
}
.tokyo_tm_modalbox_about .close a{
	text-decoration: none;
	color: #fff;
}
.tokyo_tm_modalbox_about .close .svg{
	width: 50px;
	height: 50px;
}
.tokyo_tm_modalbox_about .description_wrap{
	position: relative;
	width: 100%;
	height: 100%;
	float: left;
	overflow: hidden;
	overflow-y: scroll;
	padding: 90px 70px 75px 70px;
}
.tokyo_tm_modalbox_about .description_wrap::-webkit-scrollbar{
  width: 11px;
}
.tokyo_tm_modalbox_about .description_wrap{
  scrollbar-width: thin;
  scrollbar-color: #999 #fff;
}
.tokyo_tm_modalbox_about .description_wrap:-webkit-scrollbar-track{
  background: #fff;
}
.tokyo_tm_modalbox_about .description_wrap::-webkit-scrollbar-thumb{
  background-color: #999;
  border-radius: 6px;
  border: 3px solid #fff;
}
.tokyo_tm_modalbox_about .my_box{
	width: 100%;
	height: auto;
	clear: both;
	display: flex;
	margin-bottom: 92px;
}
.tokyo_tm_modalbox_about .my_box .left{
	width: 50%;
	padding-right: 50px;
}
.tokyo_tm_modalbox_about .about_title h3{
	font-weight: 700;
	color: #000;
	font-size: 20px;
}
.tokyo_progress{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	padding-top: 33px;
}
.progress_inner{
	width:100%;
	margin-bottom:17px;
}
.progress_inner:last-child{
	margin-bottom: 0px;
}
.progress_inner > span{
	margin:0px 0px 5px 0px;
	width:100%;
	display:block;
	text-align:left;
	color: #000;
	font-style: italic;
}
.progress_inner span.number{
	float: right;
}
.progress_inner .background{
	background:rgba(0,0,0,.09);
	width:100%;
	min-width:100%;
	position:relative;
	height:3px;
}
.progress_inner .background .bar_in{
	height:100%;
	background:#000;
	width:0px;
	overflow:hidden;
}
.progress_inner .background .bar{
	width:0px;
	height:100%;
}
.progress_inner .background .bar.open{
	-webkit-animation: wow 2s cubic-bezier(0.165, 0.840, 0.440, 1.000);  /* Safari 4+ */
	-moz-animation:    wow 2s cubic-bezier(0.165, 0.840, 0.440, 1.000);  /* Fx 5+ */
	animation:         wow 2s cubic-bezier(0.165, 0.840, 0.440, 1.000);  /* IE 10+ */
	width:100%;	
}

@-webkit-keyframes wow {0%{ width:0%; } 100%{ width:100%; }}
@-moz-keyframes wow {0%{ width:0%; } 100%{ width:100%; }}
@keyframes wow {0%{ width:0%; } 100%{ width:100%; }}

.tokyo_tm_modalbox_about .my_box .right{
	width: 50%;
	padding-left: 50px;
}
.tokyo_tm_modalbox_about .counter{
	width: 100%;
	float: left;
	clear: both;
}
.tokyo_tm_modalbox_about .counter ul{
	margin: 0px 0px 42px -50px;
	list-style-type: none;
	padding-top: 45px;
	display: flex;
	flex-wrap: wrap;
}
.tokyo_tm_modalbox_about .counter ul li{
	margin: 0px 0px 50px 0px;
	width: 33.3333%;
	float: left;
	padding-left: 50px;
} 
.tokyo_tm_modalbox_about .list_inner{
	width: 100%;
	height: 100%;
	clear: both;
	float: left;
	position: relative;
	border: 1px solid rgba(0,0,0,.1);
	text-align: center;
	padding: 40px 20px;
}
.tokyo_tm_modalbox_about .counter ul li h3{
	font-weight: 600;
	font-size: 20px;
	margin-bottom: 3px;
}
.tokyo_tm_modalbox_about .counter ul li .name{
	font-style: italic;
}
.tokyo_tm_modalbox_about .partners{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
}
.tokyo_tm_modalbox_about .partners ul{
	margin: 0px;
	list-style-type: none;
	padding-top: 15px;
}
.tokyo_tm_modalbox_about .partners ul li{
	margin: 0px;
	opacity: .5;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.tokyo_tm_modalbox_about .partners ul li:hover{
	opacity: 1;
}
















/*---------------------------------------------------*/
/*	07) ARLO PORTFOLIO
/*---------------------------------------------------*/

.tokyo_tm_title{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	margin-bottom: 62px;
}
.tokyo_tm_title h3{
	font-weight: 800;
	font-family: "Inter";
} 
.tokyo_tm_title span{
	display: inline-block;
	background-color: rgba(0,0,0,.04);
	text-transform: uppercase;
	padding: 4px 10px;
	font-weight: 600;
	font-size: 12px;
	color: #333;
	font-family: "Inter";
	letter-spacing: 0px;
	margin-bottom: 11px;
}
.tokyo_tm_title .title_flex{
	width: 100%;
	height: auto;
	clear: both;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom:20px;
}
.tokyo_tm_portfolio .portfolio_filter ul{
	margin: 0px;
	list-style-type: none;
}
.tokyo_tm_portfolio .portfolio_filter ul li{
	margin: 0px 25px 0px 0px;
	display: inline-block;
}
.tokyo_tm_portfolio .portfolio_filter ul li:last-child{
	margin-right: 0px;
}
.tokyo_tm_portfolio .portfolio_filter ul li a{
	text-decoration: none;
	color: #767676;
	display: inline-block;
	font-weight: 500;
	font-family: "Inter";
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.tokyo_tm_portfolio .portfolio_filter ul li a.current{
	color: #000;
	letter-spacing: 2px;
}
.tokyo_tm_portfolio .portfolio_filter ul li a:hover{
	color: #000;
	letter-spacing: 2px;
}
.tokyo_tm_portfolio .list_wrapper{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
}
.tokyo_tm_portfolio{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	padding: 100px 0px 50px 0px;
}
.tokyo_tm_portfolio .portfolio_list{
	margin: 0px 0px 0px -25px; /* <<< para 4 columnas */
	list-style-type: none;
}
.tokyo_tm_portfolio .portfolio_list li{
	margin: 0px 0px 50px 0px;
	float: left;
	width: 25%;                /* <<< cuatro imágenes por línea */
	padding-left: 25px;        /* <<< mismo espacio que el margin negativo */
}
.tokyo_tm_portfolio .portfolio_list li .inner{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	overflow: hidden;
	position: relative;
}
.tokyo_tm_portfolio .portfolio_list li .inner img{
	opacity: 0;
	min-width: 100%;
}
.tokyo_tm_portfolio .portfolio_list li .inner .main_image{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.tokyo_tm_portfolio .portfolio_list li .inner:hover .main_image{
	transform: scale(1.1) translateZ(0);
}
.tokyo_tm_portfolio_titles {
	white-space: nowrap;
	background: #ffffff;
	font-size: 18px;
	padding: 5px 15px;
	font-family: "Inter";
	font-weight: 600;
	color: #000;
	position: fixed;
	z-index: 6;
	opacity: 0;
	visibility: hidden;
}
.tokyo_tm_portfolio_titles.visible {
	opacity: 1;
	visibility: visible;
}
.tokyo_tm_portfolio_titles .work__cat {
	position: absolute;
	background: #ffffff;
	top: 100%;
	left: 0;
	margin-top: -10px;
	font-family: "Inter";
	font-weight: 500;
	padding: 5px 15px;
	color: #767676;
	font-size: 15px;
	font-style: italic;
}
.entry{position: relative;}
.tokyo_tm_portfolio .popup_details{
	opacity: 0;
	visibility: hidden;
	position: absolute;
	z-index: -11;
	display: none;
	
}
.tokyo_tm_modalbox .details_all_wrap{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
}
.tokyo_tm_modalbox .popup_details{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
}
.tokyo_tm_modalbox .popup_details .top_image{
	position: relative;
	overflow: hidden;
	margin-bottom: 37px;
}
.tokyo_tm_modalbox .popup_details .top_image img{
	position: relative;
	min-width: 100%;
	opacity: 0;
	margin-bottom: -50%;
}
.tokyo_tm_modalbox .popup_details .main_image{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.tokyo_tm_modalbox .portfolio_main_title{
	width: 100%;
	float: left;
	margin-bottom: 28px;
}
.tokyo_tm_modalbox .portfolio_main_title h3{
	font-weight: 700;
    font-size: 22px;
    margin-bottom: 5px;
}
.tokyo_tm_modalbox .portfolio_main_title span{
	font-style: italic;
}
.tokyo_tm_modalbox .main_details{
	width: 100%;
	height: auto;
	clear: both;
	display: flex;
	margin-bottom: 90px;
}
.tokyo_tm_modalbox .main_details .textbox{
	width: 70%;
	padding-right: 40px;
}
.tokyo_tm_modalbox .main_details .textbox p{
	margin-bottom: 18px;
	font-style: italic;
}
.tokyo_tm_modalbox .main_details .textbox p:last-child{
	margin-bottom: 0px;
}
.tokyo_tm_modalbox .main_details .detailbox{
	width: 30%;
	padding-left: 40px;
}
.tokyo_tm_modalbox .main_details .detailbox > ul{
	margin: 0px;
	list-style-type: none;
}
.tokyo_tm_modalbox .main_details .detailbox > ul > li{
	margin: 0px 0px 8px 0px;
	width: 100%;
	float: left;
}
.tokyo_tm_modalbox .main_details .detailbox > ul > li:last-child{
	margin-bottom: 0px;
}
.tokyo_tm_modalbox .main_details .detailbox .first{
    font-weight: 700;
	display: block;
	color: #000;
	margin-bottom: 3px;
	font-style: italic;
}
.tokyo_tm_modalbox .main_details .detailbox span a{
	text-decoration: none;
	color: #767676;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.tokyo_tm_modalbox .main_details .detailbox span a:hover{
	color: #000;
	letter-spacing: 2px;
}
.tokyo_tm_modalbox .main_details .detailbox .share{
	margin: 0px;
	list-style-type: none;
	position: relative;
	top: 7px;
}
.tokyo_tm_modalbox .main_details .detailbox .share li{
	margin: 0px 13px 0px 0px;
	display: inline-block;
}
.tokyo_tm_modalbox .main_details .detailbox .share li:last-child{
	margin-right: 0px;
}
.tokyo_tm_modalbox .main_details .detailbox .share li a{
	text-decoration: none;
	color: #000;
}
.tokyo_tm_modalbox .additional_images{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
}
.tokyo_tm_modalbox .additional_images ul{
	margin: 0px 0px 0px -30px;
	list-style-type: none;
}
.tokyo_tm_modalbox .additional_images ul li{
	margin: 0px 0px 30px 0px;
	float: left;
	width: 50%;
	padding-left: 30px;
}
.tokyo_tm_modalbox .additional_images ul li:nth-child(3n-2){
	width: 100%;
}
.tokyo_tm_modalbox .additional_images ul li .list_inner{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	position: relative;
}
.tokyo_tm_modalbox .additional_images ul li .my_image{
	position: relative;
}
.tokyo_tm_modalbox .additional_images ul li .my_image img{
	opacity: 0;
	min-width: 100%;
}
.tokyo_tm_modalbox .additional_images ul li .my_image .main{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
















/*---------------------------------------------------*/
/*	08) TOKYO NEWS 
/*---------------------------------------------------*/

.tokyo_tm_news{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	padding: 100px 0px 45px 0px;
}
.tokyo_tm_news ul{
	margin: 0px 0px 0px -33.3333px;
	list-style-type: none;
}
.tokyo_tm_news ul li{
	margin: 0px 0px 50px 0px;
	float: left;
	width: 33.3333%;
	padding-left: 33.3333px;
}
.tokyo_tm_news ul li .list_inner{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	position: relative;
	box-shadow: 0px 0px 20px rgba(0,0,0,.07);
}
.tokyo_tm_news ul li .image{
	position: relative;
	overflow: hidden;
}
.tokyo_tm_news ul li .image img{
	min-width: 100%;
	opacity: 0;
}
.tokyo_tm_news ul li .image .main{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position:center; 
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.tokyo_tm_news ul li .list_inner .image:hover .main{
	transform: scale(1.1) translateZ(0);
}
.tokyo_tm_news ul li .details{
	width: 100%;
	float: left;
	padding: 30px 40px 25px 40px;
	background-color: #fff;
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.tokyo_tm_news ul li .list_inner:hover .details{
	box-shadow: 0px 0px 20px rgba(0,0,0,.12);
}
.tokyo_tm_news ul li .details .title{
	margin-bottom: 10px;
	line-height: 1.4;
}
.tokyo_tm_news ul li .details .title a{
	text-decoration: none;
	color: #000;
	font-size: 18px;
	font-weight: 600;
	display: inline-block;
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.tokyo_tm_news ul li .details .title a:hover{
	color: #000;
}
.tokyo_tm_news ul li .details .date{
	font-family: "Inter";
	font-size: 13px;
	color: #767676;
	font-style: italic;
}
.tokyo_tm_news ul li .details .date a{
	text-decoration: none;
	color: #767676;
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.tokyo_tm_news ul li .details .date a:hover{
	color: #000;
}
.tokyo_tm_news ul li .details .date span{
	position: relative;	
}
.tokyo_tm_news ul li .details .date span:before{
	position: relative;
	content: "/";
	font-size: 10px;
	padding: 0px 7px 0px 2px;
}
.tokyo_tm_news ul li .extra{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 25px;
	position: relative;
}
.tokyo_tm_news ul li .extra:before{
	position: absolute;
	content: "";
	width: 100%;
	height: 1px;
	background-color: rgba(0,0,0,.1);
	bottom: -7px;
}
.tokyo_tm_news ul li .my_like a{
	text-decoration: none;
	color: #767676;
	font-size: 13px;
}
.tokyo_tm_news ul li .my_like .svg{
	width: 13px;
	height: 13px;
	position: relative;
	top: 1px;
	transform: rotate(2deg);
}
.tokyo_tm_news ul li .my_like span{
	display: inline-block;
	padding-left: 5px;
	font-style: italic;
}
.tokyo_tm_read_more{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	position: relative;
	overflow: hidden;
}
.tokyo_tm_read_more a{
	text-decoration: none;
	display: inline-block;
	overflow: hidden;
    color: #000;
	padding-right: 32px;
    position: relative;
	text-transform: uppercase;
    font-weight: 500;
	font-size: 12px;
	font-family: "Inter";
}
.tokyo_tm_read_more a:before{
	position: absolute;
	content: '';
    background-color: #000;
    margin: auto;
	width: 100%;
	height: 1px;
	top: 0px;
    left: 0px;
	bottom: 0px;
    transform: scaleX(.2);
    transform-origin: left center;
	animation: read-more-anim;
    animation-fill-mode: forwards;
    animation-duration: .4s;
    animation-timing-function: cubic-bezier(.6, .01, 0, 1);
}
.tokyo_tm_read_more a span{
	display: inline-block;
    position: relative;
	background-color: #fff;
	z-index: 1; 
    transition: .6s cubic-bezier(.6, .01, 0, 1);
	transform: translateX(-110%);
}
.tokyo_tm_news ul li .list_inner:hover .tokyo_tm_read_more a:before{
	animation: read-more-anim-2;
	animation-fill-mode: forwards;
	animation-duration: .4s;
	animation-timing-function: cubic-bezier(.6,.01,0,1);
}
.tokyo_tm_news ul li .list_inner:hover .tokyo_tm_read_more a span{
	transform: translateX(0%);
}

@keyframes read-more-anim{
    0% {
        transform-origin: right center;
        transform: scaleX(.2);
    }
    70% {
        transform-origin: right center;
    }
    71% {
        transform-origin: left center;
        transform: scaleX(1);
    }

    100% {
        transform-origin: left center;
        transform: scaleX(.2);
    }
}

@keyframes read-more-anim-2{
    0% {
        transform-origin: left center;
        transform: scaleX(.2);
    }
    70% {
        transform-origin: left center;
        transform: scaleX(1);
    }
    71% {
        transform-origin: right center;
    }
    100% {
        transform-origin: right center;
        transform: scaleX(.2);
    }
}

.tokyo_tm_modalbox .details .extra{
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	margin-bottom: 30px;
}
.tokyo_tm_modalbox .details .extra:before{
	position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    background-color: rgba(0,0,0,.1);
    bottom: -10px;
}
.tokyo_tm_modalbox .details .extra .my_like a{
	text-decoration: none;
	color: #767676;
}
.tokyo_tm_modalbox .details .extra .my_like .svg{
	width: 14px;
	height: 14px;
	position: relative;
	top: -2px;
	transform: rotate(2deg);
}
.tokyo_tm_modalbox .details .extra .my_like span{
	display: inline-block;
	padding-left: 5px;
	font-style: italic;
}
.tokyo_tm_modalbox .tokyo_tm_read_more{
	display: none;
}
.tokyo_tm_full_link{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 4;
}
.tokyo_tm_modalbox{
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	height: 100vh;
	z-index: 15;
	background-color: rgba(0,0,0,.8);
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.tokyo_tm_modalbox.opened{
	opacity: 1;
	visibility: visible;
}
.tokyo_tm_modalbox .container{
	height: 100vh;
}
.tokyo_tm_modalbox .box_inner{
	position: absolute;
	top: 70px;
	bottom: 70px;
	width: 968px;
	left: 50%;
	transform: translateX(-50%);
	background-color: #fff;
	z-index: 1;
	opacity: 0;
	visibility: hidden;
	margin-top: -20px;
	transition-delay: .3s;
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.tokyo_tm_modalbox.opened .box_inner{
	opacity: 1;
	visibility: visible;
	margin-top: 0px;
}

/* BOTÓN DE CIERRE – visible sobre fondo claro y oscuro */
.tokyo_tm_modalbox .close{
	display: block;
	visibility: visible;
	position: fixed;
	z-index: 30;
	top: 16px;
	right: 16px;
	width: 56px;
	height: 56px;
	cursor: pointer;
	background: rgba(0,0,0,.65);   /* contraste sobre contenido blanco */
	border-radius: 999px;
}
.tokyo_tm_modalbox .close a{
	text-decoration: none;
	color: #fff;
	display: block;
	width: 100%;
	height: 100%;
}
.tokyo_tm_modalbox .close .svg{
	width: 100%;
	height: 100%;
	padding: 10px;
}

.tokyo_tm_modalbox .description_wrap{
	position: relative;
	width: 100%;
	height: 100%;
	float: left;
	overflow: hidden;
	padding: 70px;
	overflow-y: scroll;
}
.tokyo_tm_modalbox .details{
	width: 100%;
	float: left;
	margin-bottom: 20px;
}
.tokyo_tm_modalbox .description_wrap .image{
	position: relative;
	max-height: 450px;
	z-index: -1;
	margin-bottom: 40px;
}
.tokyo_tm_modalbox .description_wrap .image img{
	min-width: 100%;
}
.tokyo_tm_modalbox .description_wrap .image .main{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.tokyo_tm_modalbox .details .title{
	font-weight: 600;
	font-size: 23px;
	margin-bottom: 9px;
}
.tokyo_tm_modalbox .date{
	text-transform: uppercase;
    font-family: "Inter";
    font-size: 12px;
    color: #767676;
    font-style: italic;
}
.tokyo_tm_modalbox .date a{
	text-decoration: none;
    color: #767676;
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.tokyo_tm_modalbox .date a:hover{
	color: #000;
}
.tokyo_tm_modalbox .date span{
	position: relative;
    margin-left: 11px;
}
.tokyo_tm_modalbox .date span:before{
	position: absolute;
    content: "";
    margin-top: 0px;
    top: 50%;
    transform: translateY(-50%) rotate(15deg);
    right: 100%;
    background-color: #939393;
    width: 1px;
    height: 9px;
    margin-right: 7px;
}
.tokyo_tm_news .main_content{
	opacity: 0;
	visibility: hidden;
	position: absolute;
	z-index: -11;
	display: none;
}
body.modal{
	overflow-y: hidden;
}
.tokyo_tm_modalbox .main_content{
	width: 100%;
	float: left;
}
.tokyo_tm_modalbox .main_content .descriptions{
	width: 100%;
	float: left;
	margin-bottom: 15px;
}
.tokyo_tm_modalbox .main_content .descriptions .bigger{
	color: #888;
	font-size: 20px;		
	margin-bottom: 31px;
}
.tokyo_tm_modalbox .main_content .descriptions p{
	margin-bottom: 22px;
}
.tokyo_tm_modalbox .main_content .quotebox{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	position: relative;
	padding-left: 70px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.tokyo_tm_modalbox .main_content .quotebox p{
	font-size: 20px;
	font-style: italic;
	margin-bottom: 23px;
}
.tokyo_tm_modalbox .main_content .icon{
	position: absolute;
	left: 0px;
	top: 10px;
}
.tokyo_tm_modalbox .main_content .icon .svg{
	width: 40px;
	height: 40px;
	color: #000;
}
.tokyo_tm_modalbox .news_share{
	width: 100%;
	height: auto;
	clear: both;
	display: flex;
	align-items: center;
}
.tokyo_tm_modalbox .news_share span{
	font-family: "Inter";
	font-weight: 600;
	font-style: italic;
	padding-right: 20px;
	color: #000;
}
.tokyo_tm_modalbox .news_share ul{
	margin: 0px;
	list-style-type: none;
	position: relative;
	top: -2px;
}
.tokyo_tm_modalbox .news_share ul li{
	margin: 0px 12px 0px 0px;
	display: inline-block;
}  
.tokyo_tm_modalbox .news_share ul li .svg{
	width: 15px;
	height: 15px;
}
.tokyo_tm_modalbox .news_share ul li a{
	text-decoration: none;
	color: #000;
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}


.tokyo_tm_modalbox .description_wrap::-webkit-scrollbar{
  width: 11px;
}
.tokyo_tm_modalbox .description_wrap{
  scrollbar-width: thin;
  scrollbar-color: #999 #fff;
}
.tokyo_tm_modalbox .description_wrap:-webkit-scrollbar-track{
  background: #fff;
}
.tokyo_tm_modalbox .description_wrap::-webkit-scrollbar-thumb{
  background-color: #999;
  border-radius: 6px;
  border: 3px solid #fff;
}

/* MOBILE: botón más grande, sigue visible */
@media (max-width: 768px){
  .tokyo_tm_modalbox .close{
    top: 12px;
    right: 12px;
    width: 72px;
    height: 72px;
    background: rgba(0,0,0,.75);
  }
  .tokyo_tm_modalbox .close .svg{
    padding: 14px;
  }
}








































/*---------------------------------------------------*/
/*	09) TOKYO CONTACT
/*---------------------------------------------------*/

/* Sección de contacto */
.tokyo_tm_contact { 
    width: 100%;
    padding: 100px 0;
    clear: both;
    float: left;
}

/* Contenedor del formulario */
.tokyo_tm_contact .fields {
    width: 100%;
    float: left;
    max-width: 600px; /* Limitar el ancho para mejor legibilidad */
    margin: 0 auto;
}

/* Agrupación de campos */
.tokyo_tm_contact .fields .first {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.tokyo_tm_contact .fields ul {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.tokyo_tm_contact .fields ul li {
    width: 100%;
    margin-bottom: 20px;
}

/* Estilos generales para inputs y textarea */
.tokyo_tm_contact .fields input,
.tokyo_tm_contact .fields textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background-color: #fff;
    font-style: normal;
    font-size: 16px;
    border-radius: 5px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* Enfoque en los campos */
.tokyo_tm_contact .fields input:focus-visible,
.tokyo_tm_contact .fields textarea:focus-visible {
    outline: none;
    border-color: #0078FF;
    box-shadow: 0 0 5px rgba(0, 120, 255, 0.5);
}

/* Ajuste especial para textarea */
.tokyo_tm_contact .fields .last textarea {
    height: 150px;
    resize: none;
    margin-bottom: 20px;
}

/* Botón de envío */
.tokyo_tm_button {
    display: flex;
    justify-content: flex-start;
}

.tokyo_tm_button a {
    display: inline-block;
    padding: 12px 20px;
    background-color: #0078FF;
    color: white;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.tokyo_tm_button a:hover {
    background-color: #005bb5;
}

/* Mensajes de validación */
.tokyo_tm_contact .empty_notice,
.tokyo_tm_contact .contact_error,
.tokyo_tm_contact .returnmessage {
    font-size: 14px;
    font-weight: 500;
    display: none;
}

.tokyo_tm_contact .empty_notice,
.tokyo_tm_contact .contact_error {
    color: #F52225;
}

.tokyo_tm_contact .returnmessage {
    color: #3A00FF;
}

/* Adaptabilidad en móviles */
@media (max-width: 768px) {
    .tokyo_tm_contact .fields .first {
        flex-direction: column;
    }
}




.response_message {
    margin-top: 15px;
    font-size: 14px;
    font-weight: 500;
    display: none;
    text-align: left;
}

.response_message .success {
    color: #28a745; /* Verde */
}

.response_message .error {
    color: #F52225; /* Rojo */
}





/*---------------------------------------------------*/
/*	10) TOKYO MAGIC CURSOR
/*---------------------------------------------------*/

.tokyo_tm_all_wrap[data-magic-cursor="hide"] .mouse-cursor{
	display: none;
}
.mouse-cursor{
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  border-radius: 50%;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  visibility: hidden;
}
.cursor-inner {
  margin-left: -3px;
  margin-top: -3px;
  width: 6px;
  height: 6px;
  z-index: 50;
  background-color: #000;
  -webkit-transition: width .3s ease-in-out, height .3s ease-in-out, margin .3s ease-in-out, opacity .3s ease-in-out;
  transition: width .3s ease-in-out, height .3s ease-in-out, margin .3s ease-in-out, opacity .3s ease-in-out;
}
.cursor-inner.cursor-hover {
  margin-left: -40px;
  margin-top: -40px;
  width: 80px;
  height: 80px;
  background-color: #000;
  opacity: .3;
}
.cursor-outer {
  margin-left: -15px;
  margin-top: -15px;
  width: 30px;
  height: 30px;
  border: 2px solid #000;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 50;
  opacity: .5;
  -webkit-transition: all .08s ease-out;
  transition: all .08s ease-out;
}
.cursor-outer.cursor-hover{opacity: 0;}

/*---------------------------------------------------*/
/*	11) TOKYO MEDIA QUERIES (FOR SMALL DEVIVES)
/*---------------------------------------------------*/

@media (max-width: 1600px) {
	.tokyo_tm_all_wrap .leftpart{width: 400px;}
	.tokyo_tm_section{padding-left: 400px;}
	.tokyo_tm_all_wrap .rightpart{padding-left: 400px;}
}
@media (max-width: 1200px) {
	.tokyo_tm_mobile_menu{display: block;}
	.tokyo_tm_section{padding-left: 0px;}
	.tokyo_tm_all_wrap .leftpart{display: none;}
	.tokyo_tm_all_wrap .rightpart{padding-left: 0px;}
	.tokyo_tm_all_wrap .rightpart_in{border-left: none;}
	.tokyo_tm_about{padding-top: 170px;}
	.tokyo_tm_portfolio{padding-top: 170px;}
	.tokyo_tm_contact{padding-top: 170px;}
	.tokyo_tm_news{padding-top: 170px;}
	.tokyo_tm_modalbox .box_inner{width: 500px;}
	.tokyo_tm_modalbox .close{margin-left: 5px;}
	.tokyo_tm_modalbox .close .svg{width: 25px;height: 25px;}
	.tokyo_tm_modalbox .main_details{flex-direction: column;}
	.tokyo_tm_modalbox .main_details .textbox{padding-right: 0px;width: 100%;margin-bottom: 30px;}
	.tokyo_tm_modalbox .main_details .detailbox{padding-left: 0px;width: 100%;}
	.tokyo_tm_modalbox .additional_images ul{margin: 0px;}
	.tokyo_tm_modalbox .additional_images ul li{padding-left: 0px;width: 100%;}
	.tokyo_tm_modalbox_about .box_inner{width: 500px;}
	.tokyo_tm_modalbox_about .close{margin-left: 5px;}
	.tokyo_tm_modalbox_about .close .svg{width: 25px;height: 25px;}
	.tokyo_tm_modalbox_about .description_wrap{padding: 40px;}
	.tokyo_tm_modalbox_about .my_box{flex-direction: column;}
	.tokyo_tm_modalbox_about .my_box .left{width: 100%;padding-right: 0px;margin-bottom: 50px;}
	.tokyo_tm_modalbox_about .my_box .right{width: 100%;padding-left: 0px;}
}
@media (max-width: 1040px) {
	.mouse-cursor{display: none;}
	.tokyo_tm_mobile_menu .menu_inner{padding: 20px;}
	.tokyo_tm_home .home_content{flex-direction: column;text-align: center;}
	.tokyo_tm_home .avatar{margin-bottom: 30px;}
	.tokyo_tm_home .details{margin-left: 0px;}
	.tokyo_tm_about .description_inner{flex-direction: column;}
	.tokyo_tm_about .description .left{width: 100%;padding: 0px;margin-bottom: 50px;}
	.tokyo_tm_about .description .right{width: 100%;padding: 0px;}
	.tokyo_tm_title .title_flex{flex-direction: column;align-items: flex-start;}
	.tokyo_tm_title .portfolio_filter{padding-top: 48px;}
	.container{padding: 0px 20px;}
	
}
@media (max-width: 768px) {
	.tokyo_tm_home .details .name{font-size: 40px;}
	.tokyo_tm_home .avatar{min-width: 200px;min-height: 200px;}
	.tokyo_tm_portfolio .portfolio_list{margin: 0px;}
	.tokyo_tm_portfolio .portfolio_list li{width: 100%;padding-left: 0px;}
	.tokyo_tm_news ul{margin: 0px;}
	.tokyo_tm_news ul li{width: 100%;padding-left: 0px;}
	.tokyo_tm_modalbox .main_content .icon{position: relative;margin-bottom: 30px;}
	.tokyo_tm_modalbox .main_content .quotebox{padding-left: 0px;}
	.tokyo_tm_modalbox_about .counter ul{margin: 0px;}
	.tokyo_tm_modalbox_about .counter ul li{width: 100%;padding-left: 0px;}
	.tokyo_tm_modalbox .box_inner{width: 300px;}
	.tokyo_tm_modalbox_about .box_inner{width: 300px;}
	.tokyo_tm_modalbox .description_wrap{padding: 20px;}
}

.button {
  background-color: #000; /* Color de fondo normal */
  color: white; /* Color del texto normal */
  padding: 10px 20px; /* Espaciado interno del botón */
  text-align: center; /* Alineación del texto */
  text-decoration: none; /* Decoración del texto */
  display: inline-block; /* Mostrar como elemento en línea */
  font-size: 16px; /* Tamaño del texto */
  margin: 4px 2px; /* Margen exterior del botón */
  cursor: pointer; /* Cambiar el cursor al pasar el ratón sobre el botón */
}

/* Estilo del botón al hacer clic */
.button:active {
  background-color: #ccc; /* Nuevo color de fondo cuando se hace clic */
color: #000;
}