@charset "utf-8";

/*
/*	Copyright (c) 2022 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
09) TOKYO APPLICATION
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: "Mulish";
	font-size: 18px;
	line-height: 30px;
	letter-spacing: 0px;
	word-wrap: break-word;
	font-weight: 400;
	background-color: #fff;
	color: #767676;
}
svg{
	fill: currentcolor;
	width: 15px;
	height: 15px;
}
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: 1070px;
	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: "Montserrat";
	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; }
a{
	text-decoration: none;
}
.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+ */
}
#preloader{
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 100%;
    z-index: 99999;
    display: flex;
}
#preloader:before,
#preloader:after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    z-index: -1;
    background-color: #000;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
#preloader:after{
    left: auto;
    right: 0;
}
#preloader .loader_line{
    margin: auto;
    width: 1px;
    height: 250px;
    position: relative;
    overflow: hidden;
    -webkit-transition: all 0.8s ease 0s;
    -o-transition: all 0.8s ease 0s;
    transition: all 0.8s ease 0s;
}
.loader_line:before{
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 0%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: #fff;
    -webkit-animation: lineheight 1000ms ease-in-out 0s forwards;
    -o-animation: lineheight 1000ms ease-in-out 0s forwards;
    animation: lineheight 1000ms ease-in-out 0s forwards;
}
.loader_line:after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background-color: #999999;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-animation: lineround 1200ms linear 0s infinite;
    -o-animation: lineround 1200ms linear 0s infinite;
    animation: lineround 1200ms linear 0s infinite;
    animation-delay: 2000ms;
}
@keyframes lineheight{
    0%{
        height: 0%;
    }
    100%{
        height: 100%;
    }
}
@keyframes lineround{
    0%{
        -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -o-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    100%{
        -webkit-transform: translateY(200%);
        -ms-transform: translateY(200%);
        -o-transform: translateY(200%);
        transform: translateY(200%);
    }
}
/*hiding all*/
.preloaded .loader_line:after{
    opacity: 0;
}
.preloaded  .loader_line{
    opacity: 0;
    height: 100%!important;
}
.preloaded:before,
.preloaded:after{
    -webkit-animation: preloadedzero 300ms ease-in-out 500ms forwards;
    -o-animation: preloadedzero 300ms ease-in-out 500ms forwards;
    animation: preloadedzero 300ms ease-in-out 500ms forwards;
}
@keyframes preloadedzero{
    0%{
        width: 50%;
    }
    100%{
        width: 0%;
    }
}

/*---------------------------------------------------*/
/*	02) TOKYO MOBILE MENU
/*---------------------------------------------------*/

.tokyo_tm_topbar{
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	height: 50px;
	background-color: #c4fbe2;
	z-index: 14;
	display: none;
}
.tokyo_tm_topbar .topbar_inner{
	width: 100%;
	height: 100%;
	clear: both;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0px 20px;
}
.tokyo_tm_topbar .logo img{
	max-width: 100px;
	max-height: 40px;
}
.tokyo_tm_topbar .logo ul{
	list-style-type: none;
}
.tokyo_tm_topbar .logo h3{
	font-weight: 900;
	font-family: "Poppins";
	font-size: 25px;
	letter-spacing: 4px;
}
.tokyo_tm_topbar .logo[data-type="image"] img{display: inline-block;}
.tokyo_tm_topbar .logo[data-type="image"] h3{display: none;}
.tokyo_tm_topbar .logo[data-type="text"] img{display: none;}
.tokyo_tm_topbar .logo[data-type="text"] h3{display: inline-block;}
.tokyo_tm_topbar .hamburger{
	padding: 0px;
}
.tokyo_tm_topbar .hamburger-inner, 
.tokyo_tm_topbar .hamburger-inner:after, 
.tokyo_tm_topbar .hamburger-inner:before{
	width: 30px;
	height: 2px;
}
.tokyo_tm_topbar .trigger{
	position: relative;
	top: 5px;
}
.tokyo_tm_topbar .hamburger-box{
	width: 30px;
}
.tokyo_tm_mobile_menu{
	position: fixed;
	top: 50px;
	right: -200px;
	height: 100vh;
	width: 200px;
	z-index: 15;
	background-color: #ffffff;
	
	-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_mobile_menu.opened{
	right: 0px;
}
.tokyo_tm_mobile_menu .menu_list{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	text-align: right;
	padding: 100px 20px 0px 20px;
}
.tokyo_tm_mobile_menu .menu_list ul{
	margin: 0px;
	list-style-type: none;
}
.tokyo_tm_mobile_menu .menu_list ul li{
	margin: 0px 0px 7px 0px;
}
.tokyo_tm_mobile_menu .menu_list ul li a{
	color: #000;
	font-family: "Montserrat";
}

/*---------------------------------------------------*/
/*	03) TOKYO LEFTPART
/*---------------------------------------------------*/

.tokyo_tm_all_wrap .leftpart{
	width: 450px;
	height: 100vh;
	position: fixed;
	display: flex;
	align-items: center;
	z-index: 12;
	padding: 0px 100px;
	background-color: #c4fbe2;
}
.tokyo_tm_all_wrap .leftpart_inner{
	width: 100%;
	height: auto;
}
.tokyo_tm_all_wrap .leftpart .logo img{
	list-style-type: none;
	padding-bottom: 50px;
}
.tokyo_tm_all_wrap .leftpart .logo ul{
	margin: 0px;
	list-style-type: none;
}
.tokyo_tm_all_wrap .leftpart .logo h3{
	font-family: "Poppins";
	font-weight: 900;
	font-size: 31px;
	letter-spacing: 5px;
}
.tokyo_tm_all_wrap .leftpart .logo[data-type="image"] img{display: inline-block;}
.tokyo_tm_all_wrap .leftpart .logo[data-type="image"] h3{display: none;}
.tokyo_tm_all_wrap .leftpart .logo[data-type="text"] img{display: none;}
.tokyo_tm_all_wrap .leftpart .logo[data-type="text"] h3{display: inline-block;}
.tokyo_tm_all_wrap .leftpart .menu{
	padding: 50px 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{
	color: #767676;
	display: inline-block;
	font-weight: 500;
	font-family: "Montserrat";
	
	-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:focus{
	color: #000;
}
.tokyo_tm_all_wrap .leftpart .menu ul li.active a{
	color: #000;
}
.tokyo_tm_all_wrap .leftpart .copyright{
	width: 100%;
	float: left;
}
.tokyo_tm_all_wrap .leftpart .copyright p{
	font-size: 15px;
	color: #999;
	font-family: "Montserrat";
	line-height: 25px;
}
.tokyo_tm_all_wrap .leftpart .copyright a{
	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:focus{
	color: #000;
}

/*---------------------------------------------------*/
/*	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: absolute;
    top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	overflow: hidden;
	overflow-y: scroll;
	
	opacity: 0;
	visibility: hidden;
	z-index: 8;
	transition: visibility 1s linear, opacity 0s linear;
	-moz-transition: visibility 1s linear, opacity 0s linear;
	-webkit-transition: visibility1s linear, opacity 0s linear;
	-o-transition: visibility 1s linear, opacity 0s linear;
}
.tokyo_tm_section.animated {
	opacity: 1;
	visibility: visible;
	z-index: 9;
}
.tokyo_tm_section.active {
	opacity: 1;
	visibility: visible;
	z-index: 10;
}
.tokyo_tm_section.hidden {
	opacity: 0;
	visibility: hidden;
	z-index: 9;
}
.tokyo_tm_section::-webkit-scrollbar{
  width: 14px;
}
.tokyo_tm_section{
  scrollbar-width: thin;
  scrollbar-color: #999 #fff;
}
.tokyo_tm_section:-webkit-scrollbar-track{
  background: #fff;
}
.tokyo_tm_section::-webkit-scrollbar-thumb{
  background-color: #999;
  border-radius: 6px;
  border: 3px solid #fff;
}

/*---------------------------------------------------*/
/*	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%;
}
.tokyo_tm_home .avatar[data-type="square"] .image{
	animation: none;
}
.tokyo_tm_home .avatar[data-type="circle"] .image{
	animation: none;
	border-radius: 100%;
}
.tokyo_tm_home .avatar .image{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-repeat: no-repeat;
	background-position:center;
	background-size: cover;
	animation: morph 8s ease-in-out infinite 1s;
	background-blend-mode: multiply;
	-webkit-box-shadow: inset 0px 0px 0px 9px rgba(255,255,255,.3);
    -moz-box-shadow: inset 0px 0px 0px 9px rgba(255,255,255,.3);
    box-shadow: inset 0px 0px 0px 9px rgba(255,255,255,.3);
}
@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%;
	}
}
.tokyo_tm_home .details{
	margin-left: 20px;
}
.tokyo_tm_home .details .name{
	font-size: 50px;
	font-family: 'Christmas ScriptC';
	background: linear-gradient(45deg,#ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 300%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 1.3;
	animation: transfer 5s ease-in-out infinite;
	font-weight: 800;
	text-transform: uppercase;
	margin-bottom: 14px; 
}
@keyframes transfer{
	0%{
		background-position: 0 50%;
	}
	50%{
		background-position: 100% 50%;
	}
	100%{
		background-position: 0 50%;
	}
}
.tokyo_tm_home .details .job{
	font-family: "Montserrat";
	font-weight: 500;
	max-width: 450px;
	margin-bottom: 25px;
}
.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: 0px 8px 0px 0px;
	display: inline-block;
}
.tokyo_tm_home .social ul li:last-child{
	margin-right: 0px;
}
.tokyo_tm_home .social ul li a{
	color: #000;
	font-size: 20px;
	
	-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:focus{
	color: #000;
}

/*---------------------------------------------------*/
/*	06) TOKYO SERVICE
/*---------------------------------------------------*/

#service{
	background-image: url("img/portfolio/7.webp");
	background: no-repeat center center;
	background-size:cover;
}
.tokyo_tm_services{
	width: 100%;
    height: auto;
    clear: both;
    float: left;
}
.tokyo_tm_services .list{
	width: 100%;
    height: auto;
    clear: both;
    float: left;
}
.tokyo_tm_services .list ul{
	margin: 0px 0px 0px -40px;
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
}
.tokyo_tm_services .list ul li{
	margin: 0px 0px 40px 0px;
	width: 33.3333%;
	padding-left: 40px;
}
.tokyo_tm_services .list ul li .list_inner{
	width: 100%;
    height: 100%;
    clear: both;
    float: left;
	position: relative;
	border: 1px solid rgba(0,0,0,.3);
    background-color: #fff;
    padding: 45px 30px 40px 30px;
	
	-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_services .list ul li .list_inner:hover{
	border: 1px solid rgba(0,0,0,.2);
}
.tokyo_tm_services .list ul li .number{
	display: inline-block;
    margin-bottom: 25px;
    position: relative;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    border-radius: 100%;
    background-color: rgba(0,0,0,.03);
    font-weight: 700;
    color: #000;
    font-family: "Montserrat";
	
	-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_services .list ul li .list_inner:hover .number{
	background-color: rgba(0,0,0,.08);
}
.tokyo_tm_services .list ul li .title{
	font-weight: 700;
    color: #000;
    font-size: 18px;
    margin-bottom: 15px;
}
.tokyo_tm_services .list ul li .tokyo_tm_read_more{
	margin-top: 7px;
}
.tokyo_tm_services .list 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_services .list ul li .list_inner:hover .tokyo_tm_read_more a span{
	transform: translateX(0%);
}
.tokyo_tm_services .popup_service_image{
	opacity: 0;
	visibility: hidden;
	display: none;
	position: absolute;
	z-index: -111;
}
.tokyo_tm_services .service_hidden_details{
	opacity: 0;
	visibility: hidden;
	display: none;
	position: absolute;
	z-index: -111;
}
.tokyo_tm_title{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	margin-bottom: 62px;
	margin-top: 50px;
}
.tokyo_tm_title h3{
	font-weight: 800;
	font-family: "Montserrat";
} 
.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: "Montserrat";
	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;
}
.tokyo_tm_modalbox .service_popup_informations{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
}
.tokyo_tm_modalbox .service_popup_informations .image{
	width: 100%;
	float: left;
	position: relative;
	margin-bottom: 37px;
}
.tokyo_tm_modalbox .service_popup_informations .image img{
	position: relative;
	min-width: 100%;
	opacity: 0;
}
.tokyo_tm_modalbox .service_popup_informations .image .main{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.tokyo_tm_modalbox .service_popup_informations .main_title{
	width: 100%;
	float: left;
	margin-bottom: 23px;
}
.tokyo_tm_modalbox .service_popup_informations .main_title h3{
	font-size: 23px;
	font-weight: 600;
}
.tokyo_tm_modalbox .service_popup_informations .descriptions{
	width: 100%;
	float: left;
}
.tokyo_tm_modalbox .service_popup_informations .descriptions p{
	margin-bottom: 15px;
}
.tokyo_tm_modalbox .service_popup_informations .descriptions p:last-child{
	margin-bottom: 0px;
}

/*---------------------------------------------------*/
/*	07) TOKYO PRICE
/*---------------------------------------------------*/

#price{
	background-image: url("img/portfolio/12.webp");
	background: no-repeat center center;
	background-size:cover;
}
.tokyo_tm_pricing{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	padding: 10px 0px 60px 0px;
}
.tokyo_tm_pricing .tokyo_tm_button a{
	padding: 6px 30px 11px 30px;
}
.tokyo_tm_pricing .list{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
}
.tokyo_tm_pricing .list > ul{
	margin: 0px 0px 0px -40px;
	list-style-type: none;
}
.tokyo_tm_pricing .list > ul > li{
	margin: 0px 0px 40px 0px;
	padding-left: 40px;
	width: 33.3333%;
	float: left;
}
.tokyo_tm_pricing .list > ul > li .list_inner{
	width: 100%;
    height: 650px;
    clear: both;
    float: left;
    position: relative;
    border: 1px solid rgba(0,0,0,.1);
	padding: 27px 35px 45px;
	box-shadow: 0px 0px 20px rgba(0,0,0,.8);
}
.tokyo_tm_pricing .price{
	width: 100%;
	float: left;
}
.tokyo_tm_pricing .price h3{
	font-size: 40px;
    font-weight: 600;
}
.tokyo_tm_pricing .price span{
	position: relative;
    display: inline-block;
}
.tokyo_tm_pricing .price .currency{
	position: absolute!important;
    bottom: 10px;
    right: -80px;
    font-size: 15px;
}
.tokyo_tm_pricing .plan{
	width: 100%;
	float: left;
}
.tokyo_tm_pricing .plan h3{
	font-weight: 600;
	font-size: 20px;
	border-bottom: 1px solid rgba(0,0,0,.1);
	margin-bottom: 20px;
	padding-bottom: 20px;
}
.tokyo_tm_pricing .item{
	margin: 0px;
	list-style-type: none;
	color: black;
}
.tokyo_tm_pricing .item li{
	margin: 0px;
	opacity: .5;
}
.tokyo_tm_pricing .item li.active{
	opacity: 1;
}
.tokyo_tm_pricing .tokyo_tm_button{
	margin-top: 30px;
}
.tokyo_tm_pricing .popular{
	position: absolute;
    display: inline-block;
    background-color: #f9f707;
    color: #000;
    font-size: 13px;
    padding: 0 20px 3px;
    top: -17px;
    right: 10px;
}

/*---------------------------------------------------*/
/*	08) TOKYO APPLICATION
/*---------------------------------------------------*/

#application {
	background: linear-gradient(90deg, rgb(151, 146, 220) 0%, rgba(213, 213, 244, 0.911) 35%, rgb(132, 230, 249) 100%);
	-webkit-animation: gradient 30s ease infinite;
	-moz-animation: gradient 30s ease infinite;
	animation: lapserate 30s ease infinite;
	background-size: 400% 400%;
}
@-webkit-keyframes lapserate {
	0%{background-position:0% 50%}
	50%{background-position:100% 50%}
	100%{background-position:0% 50%}
}
@-moz-keyframes lapserate {
	0%{background-position:0% 50%}
	50%{background-position:100% 50%}
	100%{background-position:0% 50%}
}
@keyframes lapserate {
	0%{background-position:0% 50%}
	50%{background-position:100% 50%}
	100%{background-position:0% 50%}
}
.tokyo_tm_application .fields_reservation{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	list-style-type: none;
	margin: 0px 0px 30px 0px;
	padding-bottom: 40px;
}
.tokyo_tm_application .fields_reservation .first{
	width: 100%;
	float: left;
}
.tokyo_tm_application .fields_reservation input{
	width: 100%;
	border: 1px solid rgba(0,0,0,.2);
	background-color: transparent;
	background: whitesmoke;
/*	margin-bottom: 30px;*/
}
.tokyo_tm_application .fields_reservation input:focus{
	outline: none;
	background-color: white;
	border: 1px solid rgba(0,0,0,.5);
}
.tokyo_tm_application .fields_reservation .last textarea{
	width: 100%;
	border: 1px solid rgba(0,0,0,.2);
	height: 120px;
	resize: none;
	margin-bottom: 20px;
	background-color: transparent;
}
.tokyo_tm_application .fields_reservation .last textarea:focus{
	outline: none;
	border: 1px solid rgba(0,0,0,.5);
} 
.tokyo_tm_application .fields_reservation .empty_notice{
	color: #F52225;
	margin-bottom: 7px;
	display: none;
	text-align: left;
	font-weight: 500;
}
.tokyo_tm_application .fields_reservation .contact_error{
	color: #F52225;
	text-align: left;
	font-weight: 500;
}
.tokyo_tm_application .fields_reservation .returnmessage{
	color:#3A00FF;
	margin-bottom: 7px;
	text-align: left;
	font-weight: 500;
}
button {
    padding: 0.5em 1.5em; /*  Расстояние от текста до края */
    background-color: #c4fbe2; /* Цвет фона */
    color: #000; /* Черный цвет текста */
    border-radius: 0.4em; /* Радиус скругления */
    font-size: 1.3em; /* Размер шрифта */
    transition: 0.5s; /* Время перехода */
    margin: 20px 20px 0 0;
   }
   button:hover {
    background-color: #f89d13; /* Цвет фона при наведении */
   }
   button:active {
    background-color: #f05347; /* Красный фон у активной кнопки */
   }
.coloradm {
	font-size: 18px;
	color: #000000;
}
.checkbox input[type=checkbox] {
    display:none;
}
.checkbox input[type=checkbox] + label {
    display: block;
    position: relative;
    margin: 12px 0 12px 30px;
    cursor: pointer;
    font-size: 16px;
    line-height: 20px;
    color: #333333;
}
.checkbox input[type=checkbox] + label:hover {
    color:#337AB7;
}
.checkbox input[type=checkbox] + label:before {
    position: absolute;
    content: '';
    width: 22px;
    height: 22px;
    line-height: 22px;
    left: -30px;
    border: 2px solid #706e6e;
}
.checkbox input[type=checkbox]:checked + label:before{
    content: '\2714';
    color:#337AB7;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
    border: 1px solid #337AB7; 
}
.checkbox input[type=submit] {
    display: block;
    cursor: pointer;
    font-size: 14px;
    padding: 10px 30px;
    border: 1px solid #275F8B;
    background: #337AB7;
    color: #FFF;
    text-transform: uppercase;
    transition: .4s all;
    font-weight: bold;
}
.checkbox input[type=submit]:hover {
    background: #275F8B;
}
.checkbox input[disabled] {
    opacity: .6;
    cursor: not-allowed;
}
/* Верный ввод */
input:valid {
border-color: green;
color: green;
}
/* Не верный ввод */
input:invalid {
border-color: red;
color: red;
}
/* Верный ввод при фокусе */
input:focus:valid {
border-color: green;
color: green;
}
/* Не верный ввод при фокусе */
input:focus:invalid {
border-color: red;
color: red;
}
/* Верный ввод при фокусе обязательного input */
input:focus:required:valid {
border-color: green;
color: green;
}
/* Не верный ввод при фокусе обязательного input */
input:focus:required:invalid {
border-color: red;
color: red;
}
.err {
  color: red;
  margin-left: 5px;
}
label.error {
  display: inline;
}
.pricecolor{
	color: #022196;
}

/*---------------------------------------------------*/
/*	09) TOKYO NEWS 
/*---------------------------------------------------*/

.tokyo_tm_news{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	padding: 10px 0px 10px 0px;
}
.tokyo_tm_news ul{
	margin: 0px 0px 0px -50px;
	list-style-type: none;
}
.tokyo_tm_news ul li{
	margin: 0px 0px 50px 0px;
	float: left;
	width: 50%;
	padding-left: 50px;
}
.tokyo_tm_news ul li .list_inner{
	width: 50%;
	height: 100%;
	clear: both;
	float: left;
	position: relative;
	box-shadow: 0px 0px 20px rgba(0,0,0,.07);
}
.tokyo_tm_news ul li .details{
	width: 100%;
	float: left;
	padding: 10px 10px 10px 40px;
	background-color: #c6fcd7;  /* цвет моей кнопки для МО */
	border-radius: 0.4em; 
	
	-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{
	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_read_more{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	position: relative;
	overflow: hidden;
}
.tokyo_tm_read_more a{
	display: inline-block;
	overflow: hidden;
    color: #000;
	padding-right: 32px;
    position: relative;
	text-transform: uppercase;
    font-weight: 500;
	font-size: 12px;
	font-family: "Montserrat";
}
.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 .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;
}
.tokyo_tm_modalbox .close{
	position: fixed;
	left: 100%;
	top: 0px;
	margin-left: 30px;
	z-index: 10;
}
.tokyo_tm_modalbox .close a{
	display: block;
	width: 40px;
	height: 40px;
	color: #fff;
	border:2px solid #fff;
	border-radius: 10px;
	position: relative;
	
	-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 .close a:hover{
	border-radius: 100%;
}
.tokyo_tm_modalbox .close a i{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.tokyo_tm_modalbox .description_wrap{
	position: relative;
	width: 100%;
	height: 100%;
	float: left;
	overflow: hidden;
	padding: 50px;
	overflow-y: scroll;
}
.tokyo_tm_modalbox .description_wrap:after{
	position: fixed;
	content: "";
	right: 0px;
	left: 0px;
	bottom: 0px;
	height: 50px;
	background-color: #fff;
	z-index: 3;
}
.tokyo_tm_modalbox .description_wrap:before{
	position: fixed;
	content: "";
	right: 0px;
	left: 0px;
	top: 0px;
	height: 50px;
	background-color: #fff;
	z-index: 3;
}
.tokyo_tm_modalbox .details{
	width: 100%;
	float: left;
	margin-bottom: 20px;
}
.tokyo_tm_modalbox .details .title{
	font-weight: 600;
	font-size: 23px;
	margin-bottom: 9px;
}
.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;
}
.tokyo_tm_modalbox .main_content .descriptions .bigger{
	color: #060606;
	font-size: 34px;		
	margin-bottom: 31px;
	font-family: 'Nautilus Pompilius';
}
.tokyo_tm_modalbox .main_content .descriptions p{
	margin-bottom: 22px;
}
.tokyo_tm_modalbox .main_content .descriptions p:last-child{
	margin-bottom: 0px;
}
.tokyo_tm_modalbox .main_content .quotebox{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	position: relative;
	padding-left: 70px;
	margin-bottom: 24px;
}
.tokyo_tm_modalbox .main_content .quotebox p{
	font-size: 20px;
	margin-bottom: 23px;
}
.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;
}

/*---------------------------------------------------*/
/*	10) TOKYO CONTACT
/*---------------------------------------------------*/

.tokyo_tm_contact{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	padding: 10px 0px 100px 0px;
}
.tokyo_tm_contact .map_wrap{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	margin-bottom: 50px;
}
.tokyo_tm_contact .fields{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
}
.tokyo_tm_contact .fields .first{
	width: 100%;
	float: left;
}
.tokyo_tm_contact .fields ul{
	margin: 0px;
	list-style-type: none;
}
.tokyo_tm_contact .fields ul li{
	width: 100%;
	margin: 0px 0px 30px 0px;
	float: left;
}
.tokyo_tm_contact .fields ul li input{
	width: 100%;
	border: 1px solid rgba(0,0,0,.2);
	background-color: transparent;
}
.tokyo_tm_contact .fields ul li input:focus{
	outline: none;
	border: 1px solid rgba(0,0,0,.5);
}
.tokyo_tm_contact .fields .last textarea{
	width: 100%;
	border: 1px solid rgba(0,0,0,.2);
	height: 120px;
	resize: none;
	margin-bottom: 20px;
	background-color: transparent;
}
.tokyo_tm_contact .fields .last textarea:focus{
	outline: none;
	border: 1px solid rgba(0,0,0,.5);
} 
.tokyo_tm_contact .empty_notice{
	color: #F52225;
	margin-bottom: 7px;
	display: none;
	text-align: left;
	font-weight: 500;
}
.tokyo_tm_contact .contact_error{
	color: #F52225;
	text-align: left;
	font-weight: 500;
}
.tokyo_tm_contact .returnmessage{
	color:#3A00FF;
	margin-bottom: 7px;
	text-align: left;
	font-weight: 500;
}
.tokyo_tm_button{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
}
.tokyo_tm_button a{
	color: #042052;
	display: inline-block;
	background-color: #c4fbe2;
	padding: 9px 40px 14px 40px;
	border-radius: 0.4em;
	font-size: 1.3em;
	transition: 0.5s;
	border: none;
	
	-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 {
    background-color: #f89d13; /* Цвет фона при наведении */
   }
 .tokyo_tm_button a:active {
    background-color: #f05347; /* Красный фон у активной кнопки */
   }
.mapouter{
	position: relative;
	text-align: right;
	height: 355px;
	width: 100%;
}
.gmap_canvas {
	width: 100%;
	height: 355px;
	overflow: hidden;
	border: 0px;
	background: none !important;
	position: relative;
	max-width:100%;
}
.gmap_canvas iframe{
	width: 100%;
	height: 355px;
	overflow: hidden;
	border: 0px;
	background: none !important;
	position: relative;
	max-width:100%;
}

/*---------------------------------------------------
/*	11) 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;}

/*---------------------------------------------------*/
/*	12) TOKYO MEDIA QUERIES (FOR SMALL DEVIVES)
/*---------------------------------------------------*/

@media (max-width: 1600px) {
	.container{max-width: 968px;}
	.tokyo_tm_all_wrap .leftpart{width: 400px;}
	.tokyo_tm_all_wrap .rightpart{padding-left: 350px;}
	.tokyo_tm_all_wrap .leftpart{width: 350px;padding: 0px 70px;}
	.tokyo_tm_home .avatar{min-width: 250px;min-height: 250px;}
	/* .tokyo_tm_home .details .name{font-size: 48px;margin-bottom: 10px;font-family: 'Christmas ScriptC';} */
	.tokyo_tm_home .details .job{margin-bottom: 22px;}
	.tokyo_tm_modalbox .box_inner{width: 850px;}
}
@media (max-width: 1200px) {
	.tokyo_tm_topbar{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_contact{padding-top: 130px;}
	.tokyo_tm_news{padding-top: 130px;}
	.tokyo_tm_services{padding-top: 130px;}
	.tokyo_tm_modalbox .description_wrap{padding: 40px;}
	.tokyo_tm_modalbox .box_inner{width: 500px;}
	.tokyo_tm_modalbox .additional_images ul{margin: 0px;}
	.tokyo_tm_modalbox .additional_images ul li{padding-left: 0px;width: 100%;}
	.tokyo_tm_modalbox .description_wrap:after{height: 40px;}
	.tokyo_tm_modalbox .description_wrap:before{height: 40px;}
}
@media (max-width: 1040px) {
	.mouse-cursor{display: none;}
	.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_title .title_flex{flex-direction: column;align-items: flex-start;}
	.container{padding: 0px 20px;}
	.tokyo_tm_services .list ul li{width: 50%;}
	.tokyo_tm_modalbox .details .title{font-size: 20px;}
	.tokyo_tm_modalbox .portfolio_main_title h3{font-size: 20px;}
	.tokyo_tm_modalbox .service_popup_informations .main_title h3{font-size: 20px;}
}
@media (max-width: 768px) {
	.tokyo_tm_home .details .name{font-size: 30px;}
	.tokyo_tm_home .avatar{min-width: 200px;min-height: 200px;}
	.tokyo_tm_news ul{margin: 0px;}
	.tokyo_tm_news ul li{width: 100%;padding-left: 0px;}
	.tokyo_tm_news ul li .details{padding-left: 30px;padding-right: 30px;}
	.tokyo_tm_modalbox .main_content .icon{position: relative;margin-bottom: 25px;}
	.tokyo_tm_modalbox .main_content .quotebox{padding-left: 0px;}
	.tokyo_tm_modalbox .close a{width: 30px;height: 30px;font-size: 14px;}
	.tokyo_tm_modalbox .close{left: auto;right: 0px;top: -40px;}
	.tokyo_tm_modalbox .box_inner{width: 300px;}
	.tokyo_tm_modalbox .description_wrap{padding: 20px;}
	.tokyo_tm_services .list ul{margin: 0px;}
	.tokyo_tm_services .list ul li{width: 100%;padding-left: 0px;}
	.tokyo_tm_pricing .list > ul{margin: 0px;}
	.tokyo_tm_pricing .list > ul > li{width: 100%;padding-left: 0px;}
	.tokyo_tm_modalbox .description_wrap:after{height: 20px;}
	.tokyo_tm_modalbox .description_wrap:before{height: 20px;}
	.tokyo_tm_modalbox .portfolio_main_title{margin-bottom: 20px;}
}

