@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

html, body {
	margin:0;
	padding:0;
	font-family:"Montserrat", Arial, sans-serif;
	font-weight:500;
	font-size: 24px;
	font-size: 2vw;
	height:100%;
	color:#000;
	background:#fff;
	text-shadow: 1px 1px 1px #000;
}
*:focus {outline:none;}

input {
	background:none;
	border:none;
	padding:0;
	text-align:center;
	font-size:inherit;
	color:inherit;
	font-family:inherit;
	text-shadow:inherit;
	margin:0 -25px;
	position:relative;
	z-index:5;
	transition:opacity 0.3s ease-out 0.5s, width 0.1s;
}

input:-webkit-autofill{transition:5555s background-color step-end;-webkit-text-fill-color:#15c815;;}
input:-webkit-autofill:focus,input:-webkit-autofill:hover {-webkit-text-fill-color:#00BEFF;}

input[type="checkbox"], input[type="button"], input[type="file"]{position:absolute;left:-9999px;}

input:disabled, input:disabled:hover, .disabled{color:#808080;cursor:default;}
input:disabled, input:disabled:hover, .disabled{-webkit-text-fill-color:#808080;-webkit-opacity:1;color:#808080;}

input::-webkit-input-placeholder {opacity:1;color:inherit;}
input::-moz-placeholder {opacity:1;color:inherit;}
input::placeholder {opacity:1;color:inherit;}

.focus > input::-webkit-input-placeholder {opacity:0.3;}
.focus > input::-moz-placeholder {opacity:0.3;}
.focus > input::placeholder {opacity:0.3;}

label, input[type="submit"] {
	cursor:pointer;
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
.container {width:100%;height:100%;display:table;}
.vcenter {display:table-row;}

a, a:link, a:visited, .lfx {
	color:#15c815;;
	font-family:"Play", Lucida Console, Monospace;
	text-decoration:none;
}
a:hover, .lfx:hover, .focus, .focus > .lfx, a.current {color:#00BEFF;}

#notify > a {font-family:"Montserrat", Arial, sans-serif;}

#bg_main, #bg_tr, .overlay, #fullscreen {
	position:-ms-device-fixed;
	position:fixed;
	top:0;bottom:0;
	left:0;right:0;
	z-index:0;
	background-position:center center;
}
#bg_main, #bg_tr {background-size:cover;background-color:#fff;}
.overlay {background:rgba(255,255,255,0.60);}

header, aside, article {position:-ms-device-fixed;position:fixed;z-index:1;}
header, aside.toggles, .lang_selector, #fullscreen .close-btn {top:1.2%; bottom:92.2%;}
article, aside.sidebar{top:9%;bottom:0.001%;}
aside.sidebar {background:rgba(255,255,255,0.6);}
header, article {left: 0%;right:23%;}
aside.toggles, aside.sidebar, .lang_selector, #fullscreen .close-btn {left:78%; right:0%;}
aside#main_menu{top:0%;left:0%;bottom:0%;right:0%;z-index:1000;}
.main {overflow:hidden;}
.lang_selector {text-align:center;position:fixed;}
#fullscreen .close-btn {
	position:absolute; z-index:5; text-align: center; display: flex;
	align-items: center; justify-content: center;
}

.lfx:hover, .focus, a.current {
	text-shadow: 0 0 1px #0080ff, 0 0 4px #0080ff, 0 0 9px #0080ff, 0 0 9px #0080ff;/*, 0 0 12px #0080ff;*/
	text-shadow:0 0 0.05vw #0080FF, 0 0 0.2vw #0080FF, 0 0 0.5vw #0080FF, 0 0 0.5vw #0080FF;/*, 0 0 1.2vw #0080FF;*/
}
nav {
	height:100%;
	display:table-cell;
	vertical-align:middle;
	opacity:0;
	transition:opacity 0.5s;
}
nav.show {opacity:1;}

.menu {
	list-style: none;
	padding:0;
	margin:0;
	display:table;
	height:0%;
	width:100%;
	transition:height 0.5s;
	animation:show-menu 0.5s;
}
nav.show > .menu {height:100%;}
.menu > li, #menu_toggle {display:table-row;}
.menu > li > .item, .select_form .item {display:table-cell;vertical-align:middle;text-align:center;}

.offset::before, .offset::after {display:block;content:' ';}
.menu.offset::before, .menu.offset::after {display:none;}

.arrows::before {content: '<';}
.arrows::after  {content: '>';}
.ups::before {content: '^';}
.ups::after  {content: '^';}
.menues::before {content: '{';}
.menues::after  {content: '}';}
.squares::before {content: '[';}
.squares::after  {content: ']';}
.lines::before, .lines::after{content: '-';}

.lfx {white-space:nowrap;transition:color 0.3s, text-shadow 0.3s;}
.lfx::before, .lfx::after{transition:transform 0.3s;display:inline-block;transform:translateX(0);padding:0 5px;}
.lfx:hover::before{transform:translateX(-5px);}
.lfx:hover::after {transform:translateX(5px);}

.disabled, .disabled > .lfx{color:#808080 !important;text-shadow:none !important;}
.disabled:hover::before,
.disabled:hover::after,
.disabled > .lfx:hover::before,
.disabled > .lfx:hover::after{transform:translate(0,0);cursor:default;}

.req, .req > .lfx {color:#FF0000;text-shadow:0 0 1px #FF0000;}

#content {
	height:100%;
	box-sizing:border-box;
	opacity:0;
	transition:opacity 0.5s;
	overflow:auto;
	-webkit-overflow-scrolling:touch;
	margin-right:-50px;
	padding-right:30px;
}

/* #title {font-size:100%;text-shadow:0 0 1px #000, 0 0 2px #000;}*/
header {transition:transform 0.5s;transform:translateY(-200%);-webkit-transform:translateY(-200%);}

#main_menu {overflow:hidden;height:0%;transition:height 0.3s;}
#main_menu.show {height:100%;}
aside#main_menu {background:#fff;}

.title,
.intro,
.cell,
#menu_toggle > *, #notify {display:table-cell;vertical-align:middle;text-align:center;box-sizing:border-box;}

.toggles-container {
	display: flex;
	align-items:stretch;
	height:100%;
}
#lang_toggle {flex-shrink: 1;}
#menu_toggle {flex-grow: 1;}
#lang_toggle > a, #menu_toggle > a {
	height: 100%;
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.cells-2::before, .cells-2::after,
.cells-3::before, .cells-3::after,
.cells-4::before, .cells-4::after {
	content: '';
	display: table-cell;
}

.cells-2 > .cell {width:46%; padding: 0 4px;}
.cells-3 > .cell {width:33.3334%; padding: 0 20px;}
.cells-4 > .cell {width:25%; padding: 0 20px;}

.intro > p {line-height:2;width:55%;margin:0 auto;}
.justify {display:flex;flex-direction:column;justify-content:space-between;height:100%;}
.hide {transition:opacity 1.5s;opacity:0;}
.unhide {transition:opacity 1.5s;opacity:1;}
header.show {-webkit-transform:translateY(0);transform:translateY(0);}
#content.show {opacity:1;}
.form {
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	position:relative;
	height:100%;
	width:100%;
	margin:0 auto;
}
.form.fluent {margin:0;width:60%;}
.field{text-align:center;margin:3%;}
.field label {position:relative;}
select {position:absolute;left:-9999px;top:0;width:100%;opacity:0;}
.center {text-align:center;width:90%; margin: 0 auto;}

#select {position:-ms-device-fixed;position:fixed;top:0;left:0;right:0;bottom:0;z-index:5;background:#000;animation:show-select 0.3s;}
#select.hidden {animation: hide-select 0.3s;}
.select_form {background:#fff;padding:10px;width:100%;height:100%;overflow:auto;text-align:center;box-sizing:border-box;}
.select_form ul {list-style:none;padding:10px 0;margin:0;display:table;width:100%;height:100%;box-sizing:border-box;}
.select_form li {margin:4px;padding:2px;display:table-row;}

.star {animation:attention 0.5s infinite;}

#fullscreen {
	opacity:0;
	transition:0.5s opacity;
	background:#fff;
	z-index:999;
}
#fullscreen.show{
	opacity:1;
	animation:fromFade 0.5s;
}

.avatar_wafer, .photo_wafer {
	background-size:contain;
	background-position:center center;
	background-repeat:no-repeat;
	position:relative;
}

.avatar_wafer {
	width:300px; height:300px;
	width:14vw; height:14vw;
	flex-shrink: 0;
}
.photo_wafer {
	float:left;
	display:flex;
	width:29vw;
	height:100%;
	padding:20px;
	box-sizing:border-box;
}
.photo_wafer > .photo[data-image] {aspect-ratio: 1; height: auto; margin: auto;}
.avatar_wafer.male, .photo_wafer.male {background-image: url('../img/avatar_male.png');}
.avatar_wafer.female, .photo_wafer.female{background-image: url('../img/avatar_female.png');}
.avatar_wafer.vehicle_image{background-image: url('../img/avatar_car.png');}
.avatar_wafer.club_image{background-image: url('../img/avatar_club.png');}
.avatar, .photo {
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
}
.avatar[data-image], .photo[data-image]{
	height:100%;width:100%;
	opacity:1;
	transition:opacity 0.5s;
	cursor:pointer;
}
.track_image .avatar, .club_image .avatar {background-size:contain;}
.avatar.preload, .avatar.loading, .photo.preload, .photo.loading {opacity:0;}

.lfx.item, .toggles .lfx {background:rgba(0,128,255, 0); transition: background 0.5s;}
.profile, .info, .vehicle-page {height:100%;width:100%;}
.cols, .driver, .vehicle, .event, .event_details, .list-item {display:flex;justify-content:space-between;flex-direction:row;}
.driver, .vehicle, .drivers_list, .auto_list, .default_list, .notification_list{box-sizing:border-box;}

.drivers_list .avatar_wafer {
	box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2), 0px 0px 5px 2px rgba(255, 255, 255, 0.2);
}

.drivers_list .driver[data-position="1"] .avatar_wafer {

	box-shadow: inset 2px 2px 6px rgba(255, 215, 0, 0.5), 0px 0px 6px 2px rgba(255, 215, 0, 0.5);
}
.drivers_list .driver[data-position="2"] .avatar_wafer {

	box-shadow: inset 2px 2px 6px rgba(211, 211, 211, 0.75), 0px 0px 6px 2px rgba(211, 211, 211, 0.75);
}
.drivers_list .driver[data-position="3"] .avatar_wafer {

	box-shadow: inset 2px 2px 6px rgba(139, 69, 19, 0.75), 0px 0px 6px 2px rgba(139, 69, 19, 0.75);
}

.drivers_list .driver[data-position="1"]:hover {
	background:  rgba(250, 215, 0, 0.2);
	box-shadow: 0 0 0 6px rgba(250, 215, 0, 0.2);
}

.drivers_list .driver[data-position="2"]:hover {
	background:  rgba(211, 211, 211, 0.2);
	box-shadow: 0 0 0 6px rgba(211, 211, 211, 0.2);
}

.drivers_list .driver[data-position="3"]:hover {
	background:  rgba(139, 69, 19, 0.2);
	box-shadow: 0 0 0 6px rgba(139, 69, 19, 0.2);
}


.drivers_list, .auto_list, .default_list{padding:10px;padding:1vw;width:100%;min-height:100%;}
.drivers_list, .notification_list, .auto_list, .default_list {padding:10px;width:100%;height:100%;}
.driver, .event, .vehicle, .list-item {margin-bottom:10px;transition:0.3s background;cursor:pointer;position:relative;}
.event_details {transition:background 0.5s;cursor:pointer;}
.drivers_list .driver:hover,
.event:hover, .event_details:hover,
.vehicle:hover, .item.lfx:not(.disabled):hover,
.toggles .lfx:hover, .list-item:hover {
	background:rgba(0,128,255, 0.2);
}
.drivers_list .driver:hover,
.event:hover, .event_details:hover,
.vehicle:hover, .list-item:hover {
	box-shadow: 0 0 0 6px rgba(0,128,255, 0.2);
} 
/*.drivers_list .driver:hover:after,
.event:hover, .event_details:hover:after,
.vehicle:hover:after, .list-item:hover:after {
	content: '';
	position:absolute;
	top:0; left:0;right:0;bottom:0;
	height:100%;width:100%;
	background: rgba(255,255,255, 0.2);
}
.item.lfx:not(.disabled):hover,
.toggles .lfx:hover {
	background:rgba(255,255,255, 0.2);
}*/
.drivers_list .driver,
.event, .event_details,
.vehicle, .list-item, .item.lfx:not(.disabled),
.toggles .lfx {
	transition: none;
}

.userinfo, .eventinfo {
	width:100%;
	padding:0 8px;
	box-sizing:border-box;
	text-align:center;
	display:flex;
	flex-direction:column;
	justify-content:space-around;
	/* font-size: 2vw; */
}
.eventinfo > p {margin:0;}
.gallery-image {
	background-size:contain;
	width:100%;height:100%;
	background-repeat:no-repeat;
	background-position:center center;
	animation:show-photo 0.5s;
	position:absolute;
}
.event_page {width:100%;padding:10px;padding:1vw;box-sizing:border-box;}
.map {height:50vh;}
.gm-style-cc, .gm-style > div:nth-child(2), .gm-style > div:nth-child(3){display:none;}

.lfx.inaction > input {
	transition:opacity 0.3s, width 1s;
	opacity:0;
	width: 40px !important;
}
.inaction::before {animation: saving-left 2s 1s infinite;}
.inaction::after {animation: saving-right 2s 1s infinite;}
.loadaction {animation: blink 2s infinite;}
.star {font-size: 140%;}
.selector-filter {position:fixed;top:0;left:0;right:0;height:50px;background:black;padding-top:10px;z-index:99;}
ul.filter-content {padding: 60px 0 10px 0;}

.position-overlay .number {
	display: table-cell;
	vertical-align: bottom;
	text-align: right;
	padding-right: 0.75vw;
	font-size: 19px;
	font-size: 4vw;
	opacity: 0.5;
	text-shadow: 0 0 6px white, 0 0 6px white;
	color: black;
    font-weight: bold; 
}

.socials {text-align:center;}
.socials a.social {display:inline-block; height: 50px; width: 50px; background-size: contain;margin:3vw 4px;}
.social {background-image: url('/img/social/kactop_icon_www.png');}
.social[href*="vk.com"] {background-image: url('/img/social/kactop_icon_vkontakte.png');}
.social[href*="//discord"] {background-image: url('/img/social/kactop_icon_discord.png');}
.social[href*="//t.me"] {background-image: url('/img/social/kactop_icon_telegram.png');}
.social[href*="instagram.com"] {background-image: url('/img/social/kactop_icon_instagram.png');}
.social[href*="facebook.com"], .social[href*="fb.com"] {background-image: url('/img/social/kactop_icon_facebook.png');}
.social[href*="youtu.be"], .social[href*="youtube.com"] {background-image: url('/img/social/kactop_icon_youtube.png');}

/*.social:hover {background-image: url('/img/social/_kactop_icon_www.png');}
.social[href*="vk.com"]:hover {background-image: url('/img/social/_kactop_icon_vkontakte.png');}
.social[href*="//discord"]:hover {background-image: url('/img/social/_kactop_icon_discord.png');}
.social[href*="//t.me"]:hover {background-image: url('/img/social/_kactop_icon_telegram.png');}
.social[href*="instagram.com"]:hover {background-image: url('/img/social/_kactop_icon_instagram.png');}
.social[href*="facebook.com"]:hover, .social[href*="fb.com"]:hover {background-image: url('/img/social/_kactop_icon_facebook.png');}
.social[href*="youtu.be"]:hover, .social[href*="youtube.com"]:hover {background-image: url('/img/social/_kactop_icon_youtube.png');}
*/

.driver:first-child .position-overlay .number {
	opacity: 0.75;
	color: #FFDF00;
	text-shadow: 0 0 10px yellow, 0 0 10px black;
}
.driver:nth-child(2) .position-overlay .number {
	opacity: 0.75;
	color: #D3D3D3;
	text-shadow: 0 0 10px black, 0 0 10px white;
}
.driver:nth-child(3) .position-overlay .number {
	opacity: 0.75;
	color: #8B4513;
	text-shadow: 0 0 10px black, 0 0 10px white;
}

.position-overlay {
	height: 100%;
	width: 100%;
	color: black;
	position: absolute;
	top: 0;
	left: 0;
	text-align: center;
	display: table;
}


@keyframes show-menu {
	0% {height:0%;}
	100% {height:100%;}
}
@keyframes show-select {
	0% {transform:scaleY(0) scaleX(0.8);}
	100% {transform:scaleY(1) scaleX(1);}
}
@keyframes hide-select {
	0% {transform:scaleY(1) scaleX(1);}
	100% {transform:scaleY(0) scaleX(0.8);}
}
@keyframes attention {
	50% {transform:scale(1);}
	0%, 100% {transform:scale(1.3);}
}
@keyframes saving-left {
	0%, 100% {padding-right: 0 5px;}
	50% {padding-right:25%;}
}
@keyframes saving-right {
	0%, 100% {padding-left: 5px;}
	50% {padding-left:25%;}
}
@keyframes show-photo {
	0% {transform:scale(0);}
	100% {transform:scale(1);}
}
@keyframes fromFade {
	0%{opacity:0;}
	100%{opacity:1;}
}
@keyframes blink {
	0%, 100% {opacity:1}
	50% {opacity:0;}
}

/* @media only screen and (min-width: 768px) {

} */

@media only screen and (orientation: portrait) {
	body {
		font-size: 30px;
		font-size: 2.5vw;
	}
	/* #header .title  {padding-top: 3%; } */
	article, aside.sidebar{top:11%;bottom:12%;}

	header, article, aside.sidebar {left: 0%;right:0%;}
	header {bottom: 89%; top: 5.5%}
	.title {padding: 1%;}
	aside.sidebar {top: 89%; bottom: 0%;}
	#sidebar ul.menu {display: flex; flex-wrap: wrap; align-items: stretch; justify-content: stretch;}
	#sidebar ul.menu > li {width: 33.3%;display:inline-flex;}
	#sidebar ul.menu > li:nth-child(1) { order: 0; }
	#sidebar ul.menu > li:nth-child(2) { order: 3; }
	#sidebar ul.menu > li:nth-child(3) { order: 1; }
	#sidebar ul.menu > li:nth-child(4) { order: 4; }
	#sidebar ul.menu > li:nth-child(5) { order: 2; }
	#sidebar ul.menu > li:nth-child(6) { order: 5; }
	#sidebar ul.menu > li > * {width:100%; align-content:center;justify-content: center;}
	.avatar_wafer {height:18vw;width:18vw;}
	.form.fluent {width:100%;height:50%;}
	.field {margin: 1%;}
	.photo_wafer {
		float:none;
		margin:auto;
		height:50%;
		width:auto;
		aspect-ratio: 1 / 1;
	}
	aside.toggles {top: 0%; bottom: 94.5%; left:0%; right:0%;}
	.toggles-container {display: flex; justify-content: space-between;}
	#lang_toggle, #menu_toggle {width: 100%;}
	#menu_toggle {flex-grow: 0;}
	.intro > p {width:65%;}
	#fullscreen .close-btn {top:4%; bottom:96%; left: 50%; right:50%;}
	/* #drivers_list:after, #vehilce_list:after, #club_list:after, #track_list:after {
		content: '';
		display:block;
		height: 13vh;
	} */
}