html {
	scroll-behavior: smooth;
	scroll-behavior: cubic-bezier(0.42, 0, 0.58, 1);
	overflow-x: hidden !important;
}
body {
	background: #0b1823;
	overflow-x: hidden !important;
	overflow: hidden;
	font-family: 'SF UI Display Light';
	padding-right: 0 !important;
	cursor: url('https://dinojump.izotcomputers.com/assets/images/Cursor.png'), auto
}

/* preload important images */
body::after{
   position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
   content:url(https://dinojump.izotcomputers.com/assets/images/Play_Button_Hovered.png) 
   url(https://dinojump.izotcomputers.com/assets/images/ButtonJumpinHover.png); 
}

@font-face {
	font-family: 'SF UI Display Ultralight';
	font-style: normal;
	font-weight: normal;
	src: local('SF UI Display Ultralight'), url('https://dinojump.izotcomputers.com/assets/fonts/sf-ui-display-ultralight-58646b19bf205.woff') format('woff');
}
@font-face {
	font-family: 'SF UI Display Thin';
	font-style: normal;
	font-weight: normal;
	src: local('SF UI Display Thin'), url('https://dinojump.izotcomputers.com/assets/fonts/sf-ui-display-thin-58646e9b26e8b.woff') format('woff');
}
@font-face {
	font-family: 'SF UI Display Light';
	font-style: normal;
	font-weight: normal;
	src: local('SF UI Display Light'), url('https://dinojump.izotcomputers.com/assets/fonts/sf-ui-display-light-58646b33e0551.woff') format('woff');
}
@font-face {
	font-family: 'SF UI Display Medium';
	font-style: normal;
	font-weight: normal;
	src: local('SF UI Display Medium'), url('https://dinojump.izotcomputers.com/assets/fonts/sf-ui-display-medium-58646be638f96.woff') format('woff');
}
@font-face {
	font-family: 'SF UI Display Semibold';
	font-style: normal;
	font-weight: normal;
	src: local('SF UI Display Semibold'), url('https://dinojump.izotcomputers.com/assets/fonts/sf-ui-display-semibold-58646eddcae92.woff') format('woff');
}
@font-face {
	font-family: 'SF UI Display Bold';
	font-style: normal;
	font-weight: normal;
	src: local('SF UI Display Bold'), url('https://dinojump.izotcomputers.com/assets/fonts/sf-ui-display-bold-58646a511e3d9.woff') format('woff');
}
@font-face {
	font-family: 'SF UI Display Heavy';
	font-style: normal;
	font-weight: normal;
	src: local('SF UI Display Heavy'), url('https://dinojump.izotcomputers.com/assets/fonts/sf-ui-display-heavy-586470160b9e5.woff') format('woff');
}
@font-face {
	font-family: 'SF UI Display Black';
	font-style: normal;
	font-weight: normal;
	src: local('SF UI Display Black'), url('https://dinojump.izotcomputers.com/assets/fonts/sf-ui-display-black-58646a6b80d5a.woff') format('woff');
}
@font-face {
	font-family: 'LuckiestGuy-Regular';
	font-style: normal;
	font-weight: normal;
	src: local('LuckiestGuy-Regular'), url('https://dinojump.izotcomputers.com/assets/fonts/LuckiestGuy-Regular.woff') format('woff');
}

.loading-screen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 1000; /* Ensures it covers the content */
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-family: 'SF UI Display Bold';
}
.loadingimage { max-width: 150px; }
.circle-mask { width: 100%; height: 100%; }
.text-gold { color: #e1951d !important; }
.text-yellow { color: #fff984 !important; }
.text-purple { color: #9a2cd9 !important; }
.text-blue { color: #45b7e7 !important; }
.text-green { color: #86c91c !important; }
.text-white { color: #ffffff !important; }

.firefly {
    width: 12px;
    height: 12px;
    background: rgb(104 185 213 / 100%);
    border-radius: 50%;
    box-shadow: 0 0 4px 3px rgb(104 185 213 / 100%);
    overflow: hidden;
}

.border-gradient:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 25px; /* Same as the border-radius of the container */
	padding: 3px; /* Adjust as needed */
	background: linear-gradient(to bottom, #5594c0, rgba(0, 0, 0, 0));
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
		mask-composite: exclude;
	pointer-events: none; /* Make sure it doesn’t interfere with interaction */
}

.w-30 { width: 30%; }
.w-70 { width: 70%; }
@media (max-width: 1280px) {
	.w-30, .w-70, .w-50 { width: 100% !important; }
}
.grecaptcha-badge { visibility: hidden; }

@media (max-width: 1280px) {
	.gradient-sidebar { width: 100%; background: rgb(7 40 63 / 43%); display: none; }
}
/***** NAV *****/
#logo_game { height: 60px; width: auto; position: relative; left: 2%; cursor: pointer; }
#logo_ic { height: 45px; width: auto; position: relative; right: 2%; cursor: pointer; }
.menubar {
    position: relative;
    top: 0;
    width: 100%;
    height: 80px;
    background-color: #091c2a;
    display: flex;
    align-items: center;
    justify-content: center;
    background: -moz-linear-gradient(180deg, rgb(110 184 235 / 14%) 0%, rgb(9 28 42 / 0%) 15%, rgb(110 184 235 / 0%) 88%, rgb(110 184 235 / 11%) 100%), radial-gradient(circle, rgb(42 107 155 / 20%) 0%, rgba(0, 0, 0, 0.0) 90%);
    background: -webkit-linear-gradient(180deg, rgb(110 184 235 / 14%) 0%, rgb(9 28 42 / 0%) 15%, rgb(110 184 235 / 0%) 88%, rgb(110 184 235 / 11%) 100%), radial-gradient(circle, rgb(42 107 155 / 20%) 0%, rgba(0, 0, 0, 0.0) 90%);
    background: linear-gradient(180deg, rgb(110 184 235 / 14%) 0%, rgb(9 28 42 / 0%) 15%, rgb(110 184 235 / 0%) 88%, rgb(110 184 235 / 11%) 100%), radial-gradient(circle, rgb(42 107 155 / 20%) 0%, rgba(0, 0, 0, 0.0) 90%);
    backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
    line-height: 2.5em;
	z-index: 20;
}
.menubar-darker { 
    background: -moz-linear-gradient(180deg, rgb(110 184 235 / 19%) 0%, rgb(9 28 42 / 0%) 15%, rgb(110 184 235 / 0%) 88%, rgb(110 184 235 / 14%) 100%), radial-gradient(circle, rgb(30 51 91 / 70%) 0%, rgb(0 0 0 / 65%) 90%);
    background: -webkit-linear-gradient(180deg, rgb(110 184 235 / 19%) 0%, rgb(9 28 42 / 0%) 15%, rgb(110 184 235 / 0%) 88%, rgb(110 184 235 / 14%) 100%), radial-gradient(circle, rgb(30 51 91 / 70%) 0%, rgb(0 0 0 / 65%) 90%);
    background: linear-gradient(180deg, rgb(110 184 235 / 19%) 0%, rgb(9 28 42 / 0%) 15%, rgb(110 184 235 / 0%) 88%, rgb(110 184 235 / 14%) 100%), radial-gradient(circle, rgb(30 51 91 / 70%) 0%, rgb(0 0 0 / 65%) 90%);
}
.menubar .nav-item, .menubar .nav-link { font-family: 'SF UI Display Bold'; font-size: 20px; color: #879cab !important; text-decoration: none; margin: 0 8px; transition: color 0.3s ease; position: relative; }
/*.menubar .nav-link.active:after, .menubar .nav-link-fake.active:after { content: ''; background: url(https://www.tombraider.com/images/header-highlight.svg); background-size: contain; width: 100%; height: 3px; position: absolute; border: 0; top: 49px; left: 0; margin-left: 0; }*/
.menubar .nav-link.active { color: #fff !important; }
.menubar .nav-link:hover { color: #dfdfdf !important; }
.menubar .nav-link-fake.active:after { width: 80%; margin-left: 10%; }
.offcanvas .nav-link { font-family: 'SF UI Display Bold'; font-size: 21px; color: #ffffff !important; text-decoration: none; margin: 0 14px; transition: color 0.3s ease; position: relative; }
.offcanvas .nav-link.active:before { color: #ccc; }
.offcanvas .dropdown .dropdown-menu { position: relative !important; background: #1e5d8f; margin: 0 0 0 25px !important; border: 0;  }
.offcanvas .dropdown .dropdown-menu a { color: #ffffff; font-family: 'SF UI Display Bold'; font-size: 21px; }
.offcanvas .dropdown .dropdown-menu a:hover,
.offcanvas .dropdown .dropdown-menu a:active,
.offcanvas .dropdown .dropdown-menu a:focus { background-color: #2291c4; }
.offcanvas { background: radial-gradient(ellipse at left top, rgb(56 163 215) 10%, rgb(15 99 172) 100%); } 
.offcanvas-body .canvas-user { font-family: 'SF UI Display Bold';  }
.offcanvas-body .canvas-user a { text-decoration: none; color: #ffffff; }
.offcanvas .canvas-user { width: 90%; margin: 0 auto; }
.offcanvas .canvas-user hr { max-width: 350px; background: linear-gradient(to left, rgb(0 0 0 / 0%), #45b7e7, rgb(0 0 0 / 0%)); border: 0; height: 2px; opacity: 1; }
.menubar .nav-item:hover { color: #ffffff; }
.menubar .nav-item:not(:last-child)::after { 
	content: '';
    position: absolute;
    right: -8px;
    top: 13px;
    width: 1px;
    height: 31px;
    background-color: #879cab; 
}
.offcanvas-body .canvas-user .active,
.offcanvas .navbar-nav .nav-link.active  { color: #fff984 !important; }
.menubar .dropdown-item:hover { background-color: #2291c4; color: #fff !important; }
.navbar_discord { filter: invert(30%) sepia(29%) saturate(230%) hue-rotate(162deg) brightness(97%) contrast(84%); }
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .dropdown-menu {
		background-color: #1e5d8f;
        backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
        border: 0; 
		margin: 6px 0 0 -12px; 
		border-radius: 7px;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu .dropdown-item {
		width: 90%;
		border-radius: 4px;
	}
    .navbar-expand-lg .navbar-nav .dropdown-menu li {
		justify-content: center;
		display: flex;
	}
    .navbar-expand-lg .navbar-nav .dropdown-menu a {
		color: #879cab;
    }
	.navbar-expand-lg .navbar-nav .dropdown-menu::before {
		content: "";
		position: absolute;
		border: solid transparent;
		border-bottom-color: #1e5d8f;
		border-width: 11px;
		margin-left: -10px;
		top: -21px;
		right: 65px;
		z-index: 1;
	}
}
@media (max-width: 992px) {
	.navbar-toggler-icon {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23fff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
		outline: none;
		right: 8px; top: 30px; position: relative;
	}
	.navbar-toggler:focus { box-shadow: none; }
	.navbar-toggler { border: 0; position: absolute; right: 0; }
	#logo_ic { display: none; }
	#logo_game { height: 90px; top: 25px; left: 25px; }
	.navbar-nav .nav-link.show { color: #879cab; }
	.menubar { height: 80px; background: transparent; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0);  }
}
.menu_darker {
    background: -moz-linear-gradient(180deg, rgb(50 111 153 / 5%) 0%, rgb(5 22 35 / 37%) 15%, rgb(22 43 59 / 31%) 88%, rgb(67 156 217 / 17%) 100%), radial-gradient(circle, rgb(50 94 127 / 44%) 0%, rgb(8 28 42 / 69%) 90%);
    background: -webkit-linear-gradient(180deg, rgb(50 111 153 / 5%) 0%, rgb(5 22 35 / 37%) 15%, rgb(22 43 59 / 31%) 88%, rgb(67 156 217 / 17%) 100%), radial-gradient(circle, rgb(50 94 127 / 44%) 0%, rgb(8 28 42 / 69%) 90%);
    background: linear-gradient(180deg, rgb(50 111 153 / 5%) 0%, rgb(5 22 35 / 37%) 15%, rgb(22 43 59 / 31%) 88%, rgb(67 156 217 / 17%) 100%), radial-gradient(circle, rgb(50 94 127 / 44%) 0%, rgb(8 28 42 / 69%) 90%);
}

/***** HERO *****/
#hero, #hero_full {
	width: 100%;
	height: calc(100vh - 80px);
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 800px;
}
#hero_index {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 110vh;
	background-size: cover;
	background-position: center;
	z-index: -1;
}

#hero_account,
#hero_media, 
#hero_leaderboards { display: flex; flex-direction: column; align-items: center; margin-bottom: 0; margin: 70px 0; height: 100%; }
#hero #hero_bg_video, 
#hero_full #hero_bg_video,
#hero #hero_index,
#hero_full #hero_index {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the video covers the entire area */
    z-index: -1;
}

#logo_hero { max-height: 450px; }
#playnowforfree { max-height: 250px; margin-right: 4em; margin-left: -106px; }
#playnowforfree2 { max-height: 250px; margin-right: 4em; }
#playnowforfree_container { padding-left: 40px; }

@media (max-width: 1500px) {
	#playnowforfree { max-height: 250px; margin-right: 4em; margin-left: 0px; }
}
@media (max-width: 1280px) {
    #logo_hero { display: none; }
    #playnowforfree, #playnowforfree2 { margin: initial; max-width: 87%; }
    #playnowforfree_container {  text-align: center; padding-left: 0; }
	#hero_full {
		display: contents;
	}
}
@media (max-height: 768px) {
	#hero, #hero_full {
		height: auto;
		min-height: 100vh;
	}
}
.hero_content { width: 1400px; }
.hero_content p { font-family: 'SF UI Display Ultralight'; color: #ffffff; font-size: clamp(19px, 5vw, 28px); }
@media (max-width: 1280px) {
    .hero_content {
        flex-direction: column; /* Stack the columns vertically */
        align-items: center; /* Center the items */
		margin-bottom: 0;
		margin: 70px 0;
		width: auto;
    }
    #playnowforfree, #playnowforfree { margin: 0; }
}

.btn-jumpin {
	display: inline-block;
    border-top-width: 42px;
    border-bottom-width: 42px;
    border-left-width: 57px;
    border-right-width: 57px;
    border-image-source: url(https://dinojump.izotcomputers.com/assets/images/ButtonJumpin.png);
    border-image-slice: 114 152 fill;
    border-style: ridge;
    border-color: transparent;
    text-decoration: none;
    font-size: 2em;
    font-family: 'SF UI Display Black';
    color: #fff;
    text-shadow: 3px 3px 0 #5b980b;
    margin-left: -40px;
    transition: all 0.3s ease;
}
.btn-jumpin:hover {
    border-image-source: url('https://dinojump.izotcomputers.com/assets/images/ButtonJumpinHover.png');
    text-shadow: 5px 3px 0 #3589ca;
	/*transform: scale(1.02) translateZ(0);*/
}
/* .btn-jumpin::before {
    position: absolute;
    width: 0;
    height: 0;
    content: "";
    background: url('https://dinojump.izotcomputers.com/assets/images/ButtonJumpin.png'), url('https://dinojump.izotcomputers.com/assets/images/btn-jumpin-active.png'), url('https://dinojump.izotcomputers.com/assets/images/btn-jumpin-hover.png')
} */

/* .btn-jumpin:active {
    border-image-source: url('https://dinojump.izotcomputers.com/assets/images/btn-jumpin-active.png');
    border-image-slice: 55 165 fill
} */ 
.btn-jumpin-text {
    vertical-align: middle;
    display: block;
    text-align: center;
    font-size: 1.3em;
    filter: drop-shadow(rgba(0,0,0,0.6) 1px 1px 1px) drop-shadow(rgba(0,0,0,0.6) 0px 0px 4px);
    margin: -10px -79.2px;
    color: #d2c8ae;
    text-decoration: none;
    margin: -10px -85.14px;
    padding: 5px 0 7px 0;
}
@media (max-width: 1280px) {
    #playnowforfree_container .btn-jumpin { margin: 0 auto; margin-top: -10px; font-size: 1.6em; }
}

.trailer_container {
	width: 634px;
	height: 386px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	cursor: url('https://dinojump.izotcomputers.com/assets/images/Cursor.png'), auto;
	z-index: 0;
	margin: 0 auto;
}
.trailer_container::after {
	content: '';
	background: url('https://dinojump.izotcomputers.com/assets/images/Trailer_Frame.png');
	background-repeat: no-repeat;
	background-size: contain;
	width: 634px;
	height: 386px;
	position: absolute;
	cursor: pointer;
	pointer-events: none;
}
.trailer_thumbnail {
	width: 595px;
	height: 334px;
	position: relative;
	z-index: -1;
	top: -5px;
	left: 1px;
}
.trailer_play {
	background: url('https://dinojump.izotcomputers.com/assets/images/Play_Button_Default.png');
	background-repeat: no-repeat;
	background-size: contain;
	width: 100px;
	height: 100px;
	z-index: 2;
	position: absolute;
	cursor: pointer;
	pointer-events: auto;
	transition: all 0.3s ease;
}
.trailer_container .trailer_play:hover  {
	background: url('https://dinojump.izotcomputers.com/assets/images/Play_Button_Hovered.png');
	background-repeat: no-repeat;
	background-size: contain;
	width: 100px;
	height: 100px;
	z-index: 2;
	position: absolute;
}
.trailer_container iframe {
	position: relative;
    width: calc(100% - 34px);
    height: calc(100% - 48px);
    overflow: hidden;
    z-index: -1;
    pointer-events: all;
    top: -5px;
}
.Watch_Trailer_Paper {
	background: url('https://dinojump.izotcomputers.com/assets/images/Watch_Trailer_Paper.png');
	position: absolute;
    width: 200px;
    height: 101px;
    background-size: contain;
    top: 0;
    left: 0;
    z-index: 1;
    margin: -14px;
}

@media (max-width: 768px) {
	.trailer_container, 
	.trailer_container::after {
		width: 90vw;
		height: calc(90vw * 0.61);
	}
	.trailer_thumbnail {
		width: 86vw;
        height: calc(84vw* 0.58);
        top: -2px;
        left: 2px;
	}
	.trailer_play {
		width: 15vw !important;
		height: 15vw !important;
	}
	.trailer_container iframe {
		position: relative;
        width: calc(100% - 20px);
        height: calc(100% - 30px);
        overflow: hidden;
        z-index: -1;
        pointer-events: all;
        top: -3px;
	}
	.Watch_Trailer_Paper {
		width: 124px;
		height: 59px;
		margin: -7px;
	}
}

/***** SECTION BOARD *****/
.bgBoard {
    width: 100%;
    height: 100%;
    background: url('https://dinojump.izotcomputers.com/assets/images/board.png');
    background-size: contain;
    background-position: center top;
    background-repeat: repeat-y;
    margin-top: -28px;
	padding-top: 200px;
	position: relative;
}
.bgBoard-bottom { 
	background: url(https://dinojump.izotcomputers.com/assets/images/board.png); 
	width: 100%; 
	height: 177px; 
	background-position: center bottom; 
	background-size: cover; 
}
.paper-anim { transform: translateY(130px); margin-top: 150px; }

.bgPaper {
	width: 80vw;
	max-width: 1583px;
    margin: 0 auto;
    padding: 0 0 250px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
@media (max-width: 768px) {
	.paper-anim { transform: translateY(60px); }
}
.bgPaper-middle {
    width: 100%;
    flex-grow: 1; /* Make the middle section expand to fill available space */
    background-image: url(https://dinojump.izotcomputers.com/assets/images/paper-middle.png);
    background-size: contain;
    background-position: center top;
    background-repeat: repeat-y;
	position: relative;
}
.bgBoard::before,
.bgBoard::after,
.bgPaper-middle::before,
.bgPaper-middle::after {
    content: ''; /* Required for pseudo-elements */
    position: absolute;
    left: 0;
    width: 100%;
    height: 50px; /* Adjust height as needed */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1; /* Ensure they are on top */
}

.bgBoard::before {
    top: -110px; /* Position at the top */
    background-image: url('https://dinojump.izotcomputers.com/assets/images/board-top.png'); /* Replace with your image */
	height: 165px;
}

.bgBoard::after {
    bottom: -84px; /* Position at the bottom */
    background-image: url('https://dinojump.izotcomputers.com/assets/images/board-bottom.png'); /* Replace with your image */
	height: 145px;
}
.bgPaper-middle::before {
    top: -170px; /* Position at the top */
    background-image: url('https://dinojump.izotcomputers.com/assets/images/paper-top.png'); /* Replace with your image */
	height: 200px;
	z-index: -1;
}

.bgPaper-middle::after {
    bottom: -170px; /* Position at the bottom */
    background-image: url('https://dinojump.izotcomputers.com/assets/images/paper-bottom.png'); /* Replace with your image */
	height: 200px;
	z-index: -1;
}

/*
.bgboard-top { position: relative; top: -25px; margin-bottom: 0; }
.bgboard-bottom { margin-bottom: -35px; }
*/
/*
.paper-top { position: relative; top: -206px; margin-bottom: -194px; }
.paper-bottom { position: absolute; margin-top: -1px;  }
*/
.bgPaper-middle h1.title { 
    font-size: clamp(24px, 5vw, 46px); 
    font-family: 'SF UI Display Heavy'; 
    color: #5b2c1b; 
    text-shadow: 1px 0 #fff, -1px 0 #fff, 0 1px #fff, 0 0px #fff, -1px 1px #fff, -1px -1px #fff, 0px -1px #fff, 0px 0px #fff; 
    margin-bottom: 20px;
}
.bgPaper-middle h3.subtitle { 
    font-size: clamp(16px, 5vw, 26px); 
    font-family: 'SF UI Display Heavy'; 
    color: #5b2c1b; 
    width: 70%;
    margin: 0 auto;
    margin-top: 20px;
    text-shadow: 1px 0 #fff, -1px 0 #fff, 0 1px #fff, 0 0px #fff, -1px 1px #fff, -1px -1px #fff, 0px -1px #fff, 0px 0px #fff; 
}
@media (max-width: 1400px) {
	.bgPaper { width: 90vw; }
	.bgBoard::before { height: 207px; } 
	.bgPaper-middle::before { top: -150px; }
	.bgPaper-middle::after { bottom: -150px; }
}
@media (max-width: 1280px) {
	.bgBoard { padding-top: 230px; }
}
@media (max-width: 920px) {
	.bgBoard { padding-top: 150px; }
	/*.bgboard-bottom { margin-bottom: -24px; }*/
	.bgPaper-middle::before { top: -120px; }
	.bgPaper-middle::after { bottom: -117px; height: 150px; }
	.bgBoard .img-fluid.hr { width: 80%; }
}
@media (max-width: 768px) {
	.bgBoard { padding-top: 100px; }
	.bgBoard::after { height: 165px; }
	.bgPaper-middle::after { bottom: -90px; }
}

.levelcards { display: flex; flex-wrap: wrap; gap: 50px; margin-top: 60px; margin-bottom: 90px; padding: 0 120px; }
.levelcard { flex: 1 1 calc(50% - 50px); transition: all 0.2s linear; width: 100%; height: 265px; box-shadow: 20px 30px 30px rgb(73 33 23 / 40%); border-radius: 26px; padding-bottom: 20px; }
.levelcard:hover { box-shadow: 25px 35px 30px rgb(73 33 23 / 45%); transform: translateX(-3px) translateY(-3px); }
.levelcard img {  transition: all 250ms ease-out; }
.lvl1_bg { background: url('https://dinojump.izotcomputers.com/assets/images/lvl1_bg.png'); }
.lvl2_bg { background: url('https://dinojump.izotcomputers.com/assets/images/lvl2_bg.png'); }
.lvl3_bg { background: url('https://dinojump.izotcomputers.com/assets/images/lvl3_bg.png'); }
.lvl4_bg { background: url('https://dinojump.izotcomputers.com/assets/images/lvl4_bg.png'); }
.lvl1_bg, .lvl2_bg, .lvl3_bg, .lvl4_bg { background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; }
.lvl1_bg h3, .lvl2_bg h3, .lvl3_bg h3, .lvl4_bg h3 { font-family: 'SF UI Display Heavy'; text-shadow: none; font-size: clamp(23px, 5vw, 39px); margin: 24px 0 0 30px; }
.lvl1_bg p, .lvl2_bg p, .lvl3_bg p, .lvl4_bg p { color: #ffffff; font-family: 'SF UI Display Light'; font-size: clamp(14px, 2vw, 15px); letter-spacing: 1px; margin: 7px 12px 0 25px; }
.lvl1_bg h3 { color: #e2eeb8; background: -webkit-linear-gradient(#fff, #e2eeb8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.lvl2_bg h3 { color: #ffe7a7; background: -webkit-linear-gradient(#fff, #ffe7a7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.lvl3_bg h3 { color: #bac6f7; background: -webkit-linear-gradient(#fff, #bac6f7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.lvl4_bg h3 { color: #b5cced; background: -webkit-linear-gradient(#fff, #b5cced); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.level_card_image { transition: all 0.1s linear; }
.levelcard:hover .level_card_image { transform: rotate(-1deg); transition: all 0.2s linear; }
.levelcard .level_card_image { float: right; width: 55%; height: auto; margin: 32px -20px -34px 0;  }

.coins_gems { width: 75%; }
.coins_gems p { font-family: 'SF UI Display Bold'; font-size: clamp(16px, 3vw, 26px); text-shadow: 1px 0 #fff, -1px 0 #fff, 0 1px #fff, 0 0px #fff, -1px 1px #fff, -1px -1px #fff, 0px -1px #fff, 0px 0px #fff; width: 300px; text-align: center; margin: 0 auto; }
.coins_gems img { max-height: 230px; margin: 60px 0 60px 0; }

@media (max-width: 1400px) {
	.levelcards { padding: 0 60px; gap: 35px; }
}
@media (max-width: 768px) {
    .levelcard { flex: 1 1 100%; height: auto; border-radius: 11px; box-shadow: 4px 7px 11px rgb(73 33 23 / 40%); }
    .levelcards { margin-top: 20px; gap: 30px; padding: 0 33px; margin-bottom: 60px; }
	.levelcard .level_card_image { width: 50%; margin: 20px -10px -21px 0; }
	.bgPaper-middle h3.subtitle { width: 80%; }	
	.bgPaper { padding: 0 0 120px 0; width: 94vw; }	
	.coins_gems img { max-height: 150px; margin: 50px 0 20px 0; }
	.lvl1_bg h3, .lvl2_bg h3, .lvl3_bg h3, .lvl4_bg h3 { margin: 20px 0 0 30px; }
	.lvl1_bg p, .lvl2_bg p, .lvl3_bg p, .lvl4_bg p { margin: 12px 0 0 30px; letter-spacing: 0; }
	.lvl1_bg h3, .lvl2_bg h3, .lvl3_bg h3, .lvl4_bg h3, .lvl1_bg p, .lvl2_bg p, .lvl3_bg p, .lvl4_bg p { margin-left: 5px; }
	.coins_gems .w-50 { width: 50% !important; }
	.coins_gems .w-50 video { width: 100%; height: auto; aspect-ratio: 16 / 9; }
	.coins_gems p {  font-size: 14px; width: 100%; }
	.coins_gems { width: 90%; margin-bottom: 2em; }
}

/***** SECTION HOW TO PLAY *****/
/*
#howtoplay-bg-effect {
	background: url('https://dinojump.izotcomputers.com/assets/images/howtoplaybg.png');
	background-position: center top;
	background-size: cover;
	width: 70vw; 
	height: 100%;
	position: absolute; 
	z-index: 0;
}*/
.howtoplay { 
	background: url('https://dinojump.izotcomputers.com/assets/images/howtoplaybg.jpg') #0a2232;
	background-position: center bottom;
	background-size: cover;
	padding: 9em 0 13em 0;
	margin-bottom: -25px;
}
.howtoplay h2.title { 
    font-size: clamp(30px, 5vw, 64px); 
    font-family: 'SF UI Display Heavy'; 
    color: #ffffff; 
    text-shadow: 3px 3px 0px #0a2336;
    padding: 0px 0 70px 0;
}
.howtoplay h3 { font-family: 'SF UI Display Heavy'; padding-bottom: 20px; font-size: 33px; color: #fff; padding-top: 30px; }
@media (max-width: 768px) {
	.howtoplay h2.title { padding: 50px 0 30px 0; }
	.howtoplay h3 { padding-top: 0px; font-size: 25px; }
}
.howtoplay p { font-size: clamp(16px, 3vw, 24px); font-family: 'SF UI Display Light'; color: #ffffff; padding-bottom: 17px; }
.howtoplay .row {
	width: 80vw;
	margin: 0 auto;
	padding: 80px;
	position: relative; /* Make sure the :after pseudo-element is positioned correctly */
}
.izotcho_movements { width: 80vw; max-width: 1600px; margin: 0 auto; text-align: center; padding: 30px 80px; }
.izotcho_movements .item { justify-content: center; display: flex; padding: 0 20px; }
.controls_video {
	position: relative;
	border-radius: 25px;
	overflow: hidden;
	padding: 50px; 
	aspect-ratio: 1 / 1;
	max-width: 300px;
}
.controls_video::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: inherit;
	padding: 3px; /* Border width */
	background: linear-gradient(145deg, #5594c0 0%, #5594c0 0, rgba(0, 0, 0, 0) 63%); 
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}
.controls_video video {
	max-width: 85%;
    height: auto;
}
@media (max-width: 1900px) {
	.izotcho_movements { width: 100%; padding: 0; }
}
@media (max-width: 920px) {
	.controls_video { padding: 30px; }
	.howtoplay .row { padding: 23px 16px; width: 96vw; }
	.howtoplay img { margin-bottom: 80px; }
	.howtoplay .w-40, .howtoplay .w-60 { width: 100% !important; }
	.izotcho_movements { width: 100%; padding: 0; margin-top: 1.5em; }
	.controls_video { padding: 10px 10px 30px 10px; }
}
@media (max-width: 768px) {
	.controls_video { width: 100%; }
	.howtoplay { padding: 1em 0 4em 0; }
}

/**** SECTION GALLERY *****/
.boardGallery h2.title { 
    font-size: clamp(30px, 5vw, 64px); 
    font-family: 'SF UI Display Heavy'; 
    color: #ffffff; 
    text-shadow: 3px 3px 0px #984223;
    padding: 0px 0 50px 0;
}
@media (max-width: 920px) {
	.boardGallery h2.title { padding: 0px 0 20px 0; }
}
/*
.boardGallery {
    width: 100%;
    height: 100%;
    background: url('https://dinojump.izotcomputers.com/assets/images/board.png');
    background-size: cover;
    background-position: center top;
    background-repeat: repeat-y;
    margin-top: -28px;
	position: relative;	
}*/
.boardGallery { padding-top: 20px; width: 100vw; background-size: cover; }
.boardGallery .gallery-slider { width: 80vw; max-width: 1400px; margin: 0 auto; }
.boardGallery .slick-track { padding-top: 53px; padding-bottom: 53px; }
.boardGallery .slick-slide { text-align: center; transition: transform 0.5s ease, filter 0.5s ease; transform: perspective(1000px) translate3d(0, 0, -200px); }
.boardGallery .slick-slide img { width: 100%; border: 10px solid transparent; border-image:  url() 19 round; }
.boardGallery .slick-slide.slick-center { filter: none; transform: perspective(1000px) translate3d(0, 0, 0) scale(1.10); position: relative; z-index: 1; }
.boardGallery .slick-prev, 
.boardGallery .slick-next {
    position: absolute;
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Adjust for top 50% to actually center */
    z-index: 1; /* Ensure they are on top of other elements */
    background: rgba(0,0,0,0.5); /* Example background for visibility */
    border: none;
    width: 70px; /* Example size */
    height: 70px; /* Example size */
    color: white; /* Example text color */
    cursor: pointer;
}
.boardGallery .slick-prev { background: url('https://dinojump.izotcomputers.com/assets/images/arrow_left.png'); left: 50px; }
.boardGallery .slick-next { background: url('https://dinojump.izotcomputers.com/assets/images/arrow_right.png'); right: 50px; }
.boardGallery .slick-prev, 
.boardGallery .slick-next {
	width: 70px;
    height: 70px;
    background-size: contain;
    background-repeat: no-repeat;
    border: 0;
	z-index: 10;
}
.boardGallery .slick-dots { text-align: center; margin-top: 30px; }
.boardGallery .slick-dots li { position: relative; display: inline-block; width: 30px; height: 5px; margin: 0 5px; padding: 0; cursor: pointer; box-shadow: 0 2px 3px rgb(0 0 0 / 27%); }
.boardGallery .slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 30px;
    height: 5px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.boardGallery .slick-dots li button:before {
    content: '';
    font-size: 32px;
    line-height: 5px;
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 5px;
    text-align: center;
    color: black;
	background: #ffffff; 
	border-radius: 10px;
}
.boardGallery .slick-dots li.slick-active button:before { background: #45b7e7; }
.boardGallery .slick-slide .inner-block,
.boardGallery .slick-slide[aria-hidden=true]:not(.slick-cloned) ~ .slick-cloned[aria-hidden=true] .inner-block {
    height: 100px;
    background-color: green;
    transform: translate(0px, 50px);
    transition: all 500ms ease;
	opacity: 0.5; 
}




/***** download game *****/

.download_game {
	background-image: url('https://dinojump.izotcomputers.com/assets/images/hero.png');
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	min-height: 90vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5em 2em;
}
	.download_game .vertical_text_left { flex-direction: column; align-items: flex-start !important; }
@media (min-width: 768px) {
	.download_game .w-50 { width: 50% !important; }
}
.download_game .boxart { max-width: 300px; }
.download_game small { display: block; color: #fff; font-size: 13px; font-style: italic; font-family: 'SF UI Display Light'; opacity: .7; margin: -20px 0 0 10px; }
@media (max-width: 768px) {
    .download_game { background-attachment: scroll; }
	.download_game .row { text-align: center; }
	.download_game .boxart { max-width: 250px; margin-bottom: 3em; }
	.download_game small { margin: 0 auto; }
	.download_game .btn-jumpin { margin: auto; }
	.download_game .vertical_text_left { align-items: center !important; margin-top: 3em; }
}

/***** footer *****/

footer {
	border-top: 4px solid #45b7e7;
	background: rgb(16,139,199);
	background: -moz-radial-gradient(ellipse at left top, rgb(56 163 215) 10%, rgb(15 99 172) 100%);
	background: -webkit-radial-gradient(ellipse at left top, rgb(56 163 215) 10%, rgb(15 99 172) 100%);
	background: radial-gradient(ellipse at left top, rgb(56 163 215) 10%, rgb(15 99 172) 100%);
	min-height: 40vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3em;
	z-index: 1;
	position: relative;
}
footer .row { width: 80vw; max-width: 1583px; }
footer #system_requirements {
	margin-right: 20px;
	padding-right: 20px;
	position: relative; /* Needed for positioning the pseudo-element */
	height: 100%;
}
footer #system_requirements::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(to bottom, rgb(0 0 0 / 0%), #45b7e7, rgb(0 0 0 / 0%));
}
footer { color: #ffffff; font-family: 'SF UI Display Light'; line-height: 1.3em; letter-spacing: 1px; }
footer strong { font-family: 'SF UI Display Bold'; }
footer h3 { font-family: 'SF UI Display Bold'; font-size: clamp(18px, 4vw, 30px); padding: 20px 0; }
footer h4 { font-family: 'SF UI Display Bold'; font-size: clamp(14px, 3vw, 18px); padding: 20px 0; }
footer #gameinfo { padding-left: 20px; }
footer #gameinfo .row { width: 100%; }
footer #gameinfo .row div { margin: 15px 0; width: 100%; }
footer .trademark { font-size: 11px; line-height: initial; }
footer .trademark img { margin: 0 0px 20px 120px; float: right; height: 50px; }
footer #system_requirements ul li { list-style: initial; }

@media (max-width: 1280px) {
	footer { padding: 1.5em; }
	footer #system_requirements { margin: 0; padding: 0 0 20px 0; border: 0px; border-bottom: 3px solid; border-image: linear-gradient(to right, rgb(0 0 0 / 0%), #45b7e7, rgb(0 0 0 / 0%)); border-image-slice: 1; }
	footer #system_requirements::after { display: none; }
	footer #gameinfo { padding: 30px 0 0 0; }
	footer .row .w-50 { width: 100% !important; }
	footer .row { width: 95vw; }
	footer #gameinfo .row div { margin: 5px 0; }
	footer .trademark img { margin: 0 0px 50px 40px; }
	footer #system_requirements ol, ul { padding-left: 1rem; }
}


/***** register page *****/
.register_form { 
	color: #fff;
	padding: 20px;
	width: 550px;
}
@media (max-width: 1900px) {
	.register_form { height: auto; width: auto; padding: 0; }
	.download_game_container, 
	.register_form_container { padding: 30px 20px !important; }
}
.register_form h1 { color: #fff; font-family: 'SF UI Display Heavy'; font-size: clamp(18px, 4vw, 35px); }
.register_form p { color: #fff; font-family: 'SF UI Display Light'; font-size: 14px;  padding-bottom: 5px; }
.register_form hr { max-width: 350px; background: linear-gradient(to left, rgb(0 0 0 / 0%), #45b7e7, rgb(0 0 0 / 0%)); border: 0; height: 2px; opacity: 1; }
.account_container hr { width: 70%; margin: 0 auto; background: linear-gradient(to left, rgb(0 0 0 / 0%), #45b7e7, rgb(0 0 0 / 0%)); border: 0; height: 2px; opacity: 1; }
.account_container .p-3 { padding: 1rem 2rem !important; } 
.register_form_container,
.download_game_container,
.news_container,
.account_container {
	background: rgb(8,28,42);
	background: -moz-linear-gradient(90deg, rgb(8 28 42) 63%, rgb(10 32 47 / 56%) 100%);
	background: -webkit-linear-gradient(90deg, rgb(8 28 42) 63%, rgb(10 32 47 / 56%) 100%);
	background: linear-gradient(90deg, rgb(8 28 42) 63%, rgb(10 32 47 / 56%) 100%);
	background-size: cover; background-position: center right; background-repeat: no-repeat; height: 100%; border-radius: 11px; border: 2px solid #45b7e7; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.download_game_container p a { color: #febc14; text-decoration: none; }
.download_game_container p a:hover { color: #ffffff; text-decoration: underline; }
.download_game_container p, .download_game_container li {
	font-size: .9rem;
	letter-spacing: 1px;
	color: #ffffff;
	list-style-type: circle;
	font-family: 'SF UI Display Thin';
}
.download_game_container h1 { font-family: 'SF UI Display Bold'; }
.account_container { max-width: 1300px; margin: 0 auto; text-align: center; }
.news_container { max-width: 1300px; margin: 0 auto; text-align: left; }
.register_form_container label,
.account_container label { 
	text-transform: uppercase;
    color: #6dc244;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
	padding: 15px 0 7px 5px;
}
.account_container svg { margin: -5px 6px 0px 0; }
.account_container h2 { font-family: 'SF UI Display Bold'; font-size: clamp(18px, 4vw, 28px); padding: 20px 0 9px 0; }
.account_container .account_form { border: 2px solid #164d73; padding: 20px; margin-bottom: -2px; background: #081c2a; }
.toggle_show_password { width: 20px; cursor: pointer; float: right; margin: -30px 13px; z-index: 5; position: relative; }

@media (max-width: 1400px) {
	height: auto; overflow: auto; padding-top: 160px;
}


.register_form .form-control,
.account_container .form-control { 
	background: rgb(9,31,47);
	background: -moz-linear-gradient(90deg, rgba(9,31,47,1) 0%, rgba(24,74,113,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(9,31,47,1) 0%, rgba(24,74,113,1) 100%);
	background: linear-gradient(90deg, rgba(9,31,47,1) 0%, rgba(24,74,113,1) 100%);
    border-radius: 6px;
    box-shadow: inset 0px 0px 5px #5a9ccf;
    border: 0;
    padding: 10px;
	color: #e0f6ff;
	letter-spacing: 1px;
}
.account_container .form-control:read-only { cursor: not-allowed; }

.leaderboards_container .form-control { font-family: 'SF UI Display Thin'; }
.leaderboards_container .form-control#username { min-width: 200px; }
.leaderboards_container label { font-family: 'SF UI Display Thin'; font-size: 16px; }
.leaderboards_container .form-control::placeholder { color: #e0f6ff; font-family: 'SF UI Display Thin'; }

.btn-green { 
	padding: 10px; font-size: 18px; color: #fff;  font-family: 'SF UI Display Heavy'; background: rgb(139,196,47);
	background: -moz-linear-gradient(101deg, rgba(139,196,47,1) 0%, rgba(98,158,1,1) 35%);
	background: -webkit-linear-gradient(101deg, rgba(139,196,47,1) 0%, rgba(98,158,1,1) 35%);
	background: linear-gradient(101deg, rgba(139,196,47,1) 0%, rgba(98,158,1,1) 35%);
    box-shadow: inset 0px 0px 5px #d2ff6b;
	border: 0;
}
.register_form a { color: #fff; text-decoration: none; }
.register_form a:hover { text-decoration: underline; }
.btn-green:hover, .btn-green:active { 
	color: #fff !important;
	background: rgb(254,188,20);
	background: -moz-linear-gradient(101deg, rgba(254,188,20,1) 0%, rgba(254,165,16,1) 35%);
	background: -webkit-linear-gradient(101deg, rgba(254,188,20,1) 0%, rgba(254,165,16,1) 35%);
	background: linear-gradient(101deg, rgba(254,188,20,1) 0%, rgba(254,165,16,1) 35%);
    box-shadow: inset 0px 0px 5px #a2dcff;
	border: 0;
}

.register_container.container-fluid, 
.leaderboards_container.container-fluid, 
.media_container.container-fluid, 
.profile_container.container-fluid { max-width: 1700px; }
.form-control.is-invalid, .was-validated .form-control:invalid { box-shadow: 0 0 5px #ff7a7a; }
.invalid-feedback { color: #f54e5e; }
.form-control.is-valid:focus, .was-validated .form-control:valid:focus,
.form-control.is-invalid:focus, .was-validated .form-control:invalid:focus,
.form-control.is-invalid, .was-validated .form-control:invalid { box-shadow: inset 0px 0px 5px #5a9ccf; }
.form-control[type="password"] { padding-right: calc(1.5em + .95rem) !important; }

/***** PROFILE PAGE *****/
.profile_head, .profile_bottom { 
	background: rgb(15,99,172);
	background: -moz-linear-gradient(90deg, rgba(15,99,172,1) 0%, rgba(16,130,193,1) 34%, rgba(15,99,172,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(15,99,172,1) 0%, rgba(16,130,193,1) 34%, rgba(15,99,172,1) 100%);
	background: linear-gradient(90deg, rgba(15,99,172,1) 0%, rgba(16,130,193,1) 34%, rgba(15,99,172,1) 100%);
	font-family: 'SF UI Display Heavy'; 
	font-size: clamp(19px, 5vw, 28px); 
	color: #fff; 
	text-align: center; 
	border-top-left-radius: 11px; 
	border-top-right-radius: 11px;
	padding: 17px;
}
.profile_bottom { border-bottom-left-radius: 11px; border-bottom-right-radius: 11px; border-top-left-radius: 0; border-top-right-radius: 0; }
#page_account { margin-top: 40px; }

.account_progress .level_head { 
    width: 100%; 
    height: 122px; 
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	text-align: left;
	padding: 62px 0 0 20px;
	position: relative;
	
}
.account_progress .level1_head {
    background: 
        linear-gradient(90deg, rgb(96 137 4 / 90%) 0%, rgb(96 137 4 / 55%) 42%, rgb(96 137 4 / 55%) 63%, rgb(96 137 4 / 96%) 100%), 
		url(https://dinojump.izotcomputers.com/assets/images/L1_Head.jpg);
    background-size: cover, cover; 
    background-position: center -50px; 
    box-shadow: inset 0 1px 13px #b5ff2670, inset 0 3px 3px #c1d38f94, inset 0 -3px 3px #0000005c;
}
.account_progress .level2_head {
    background: 
        linear-gradient(90deg, rgb(230 164 73 / 90%) 0%, rgb(230 164 73 / 68%) 42%, rgb(230 164 73 / 68%) 63%, rgb(230 164 73 / 90%) 100%),
		url(https://dinojump.izotcomputers.com/assets/images/L2_Head.jpg);
    background-size: cover, cover; 
    background-position: center -50px; 
    box-shadow: inset 0 1px 13px #ffdba9, inset 0 3px 3px #ffd69c, inset 0 -3px 3px #0000005c;
}
.account_progress .level3_head {
    background: 
        linear-gradient(90deg, rgb(49 54 78 / 88%) 0%, rgb(49 54 78 / 63%) 42%, rgb(49 54 78 / 63%) 63%, rgb(49 54 78 / 88%) 100%), 
		url(https://dinojump.izotcomputers.com/assets/images/L3_Head.jpg);
    background-size: cover, cover; 
    background-position: center -93px;  
    box-shadow: inset 0 1px 13px #454b6b, inset 0 3px 3px #6572b16b, inset 0 -3px 3px #0000005c;
}
.account_progress .level4_head {
    background: 
        linear-gradient(90deg, rgb(60 117 199) 0%, rgb(60 117 199 / 54%) 42%, rgb(60 117 199 / 36%) 63%, rgb(60 117 199 / 86%) 100%), 
		url(https://dinojump.izotcomputers.com/assets/images/L4_Head.jpg);
    background-size: cover, cover; 
    background-position: center -83px; 
    box-shadow: inset 0 1px 14px #b4d3ff, inset 0 3px 3px #5f84b9, inset 0 -3px 3px #0000005c;
}

@media (max-width: 1280px) { .account_progress .level_head {  background-position: center -80px; } }
@media (max-width: 768px) { .account_progress .level_head {  background-position: center -20px; } }
.account_progress .level_head h4 { font-family: 'SF UI Display Bold'; line-height: 0px; font-size: 18px; }
.account_progress .level1_head h4 { color: #e2eeb9; }
.account_progress .level2_head h4 { color: #ffe7a7; }
.account_progress .level3_head h4 { color: #bcc8fa; }
.account_progress .level4_head h4 { color: #d2e5ff; }
.account_progress .level_head h2 { font-family: 'SF UI Display Bold'; line-height: 0px; font-size: 29px; }
.account_progress table { width: calc(100% + 8px); border-spacing: 4px; border-collapse: separate; margin: 0px -4px -4px -4px; }
.account_progress table thead th { color: #fff; font-size: 13px; border-radius: 3px; padding: 4px; }
.account_progress table tbody td { background: #081c2a; border: 2px solid #113a57; font-family: 'SF UI Display Bold'; font-size: 18px; padding: 4px 2px; }
.account_progress img { width: 28px; }
.account_progress .level1_table thead tr th { background: #608904; box-shadow: inset 0 2px 5px #bde563, inset 0 3px 3px #c1d38f94, inset 0 -6px 6px #00000030; }
.account_progress .level2_table thead tr th { background: #e6a449; box-shadow: inset 0 1px 3px #ffc576, inset 0 4px 3px #ffc575, inset 0 -6px 6px #00000030; }
.account_progress .level3_table thead tr th { background: #31364e; box-shadow: inset 0 1px 6px #6e769d, inset 0 3px 2px #4f5883, inset 0 -6px 6px #00000054; }
.account_progress .level4_table thead tr th { background: #3c75c7; box-shadow: inset 0 1px 3px #699feb, inset 0 4px 3px #6c9ce1, inset 0 -6px 6px #00000030; }
.profile_container .account_progress .level1_table tbody tr:nth-child(1) td:last-child { background: #608904; }
.profile_container .account_progress .level2_table tbody tr:nth-child(1) td:last-child { background: #e6a449; }
.profile_container .account_progress .level3_table tbody tr:nth-child(1) td:last-child { background: #31364e; }
.profile_container .account_progress .level4_table tbody tr:nth-child(1) td:last-child { background: #3c75c7; }
.profile_container .account_progress .level1_table tbody tr:nth-child(2) td:last-child,
.profile_container .account_progress .level2_table tbody tr:nth-child(2) td:last-child,
.profile_container .account_progress .level3_table tbody tr:nth-child(2) td:last-child,
.profile_container .account_progress .level4_table tbody tr:nth-child(2) td:last-child { font-family: 'SF UI Display Light'; font-size: 15px; }
.profile_container .account_progress .level1_table tbody tr:nth-child(2) td:last-child span { color: #64cf37; font-family: 'SF UI Display Bold'; }
.profile_container .account_progress .level2_table tbody tr:nth-child(2) td:last-child span { color: #ff7e4a; font-family: 'SF UI Display Bold'; }
.profile_container .account_progress .level3_table tbody tr:nth-child(2) td:last-child span { color: #ff82ec; font-family: 'SF UI Display Bold'; }
.profile_container .account_progress .level4_table tbody tr:nth-child(2) td:last-child span { color: #52acf7; font-family: 'SF UI Display Bold'; }
.account_progress.level_locked { filter: blur(0px) saturate(50%); opacity: 0.7; }
.account_progress .perfect_score { background: url(https://dinojump.izotcomputers.com/assets/images/Perf_Score_Icon.png); width: 80px; height: 80px; background-size: cover; position: absolute; top: -10px; right: 7px; }


@media (max-width: 768px) { 
	.account_progress table tbody td { font-size: 15px; font-family: 'SF UI Display Semibold'; } 
	.account_progress img { width: 18px; }
}

.leaderboards_container .level_head { padding-top: 47px; }
.leaderboards_container .account_progress table tbody td { font-family: 'SF UI Display Semibold'; font-size: 16px; }
.leaderboards_container .level1_head { height: 108px; background: linear-gradient(90deg, rgb(96 137 4) 0%, rgb(96 137 4 / 81%) 17%, rgb(96 137 4 / 55%) 54%, rgb(96 137 4 / 100%) 74%), url(https://dinojump.izotcomputers.com/assets/images/L1_Head.jpg); background-size: 140%; background-position: 44px -27px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.leaderboards_container .level2_head { height: 108px; background: linear-gradient(90deg, rgb(230 164 73) 0%, rgb(230 164 73 / 41%) 42%, rgb(230 164 73 / 77%) 63%, rgb(230 164 73) 100%), url(https://dinojump.izotcomputers.com/assets/images/L2_Head.jpg); background-size: 140%; background-position: 65px -31px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.leaderboards_container .level3_head { height: 108px; background-size: 132%; background-position: 31px -55px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.leaderboards_container .level4_head { height: 108px; background: linear-gradient(90deg, rgb(60 117 199) 0%, rgb(60 117 199 / 93%) 34%, rgb(60 117 199 / 74%) 65%, rgb(60 117 199 / 19%) 100%), url(https://dinojump.izotcomputers.com/assets/images/L4_Head.jpg); background-size: 132%; background-position: -66px -55px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.leaderboards_container .markuser td { color: #fefa83; }
.leaderboards_container .level1_row:hover td { background: #608904; cursor: pointer; }
.leaderboards_container .level2_row:hover td { background: #e6a449; cursor: pointer; }
.leaderboards_container .level3_row:hover td { background: #31364e; cursor: pointer; }
.leaderboards_container .level4_row:hover td { background: #3c75c7; cursor: pointer; }

/***** MEDIA *****/
.media-container { position: relative; }
.media-container a { cursor: url('https://dinojump.izotcomputers.com/assets/images/Cursor.png'), auto }
.media-element { position: relative; border: 2px solid #1d5882; box-shadow: 0 3px 5px #000, 0 3px 40px #000; transition: all 0.5s ease; margin-bottom: 10px; top: 0; }
.media-zoom { position: absolute; right: 32px; top: 8px; width: 24px; height: 24px; pointer-events: none; transition: all 0.5s ease; opacity: 0; } 
.media-container:hover .media-element { border: 2px solid #629e01; top: -20px; filter: brightness(1.2) saturate(1.4); }
.media-container:hover .media-zoom { top: -12px !important; opacity: 0.9; z-index: 3; }
.media-title { background: #629e01; border-radius: 4px; text-align: center; position: absolute; width: calc(100% - 48px); z-index: 3; display: none; line-height: 40px; font-family: 'SF UI Display Bold'; letter-spacing: 1px; bottom: -23px; }
.lb-outerContainer { background: #0b1823; }
.lightbox .lb-image { border: 4px solid #1d5882; }
.lb-cancel { background-image: url(https://dinojump.izotcomputers.com/assets/images/Izotcho_Loading.gif)!important; background-size: contain; width: 100px; height: 100px; }
.lb-loader { top: 30%; }


/***** NEWS *****/
.news-element { position: relative; border: 2px solid #1d5882; box-shadow: 0 3px 5px #000, 0 3px 40px #000; transition: all 0.5s ease; margin-bottom: 10px; top: 0; }
.news-container:hover .media-element { border: 2px solid #629e01; filter: brightness(1.2) saturate(1.4); }
.news-title { position: relative; width: 100%; z-index: 3; line-height: 24px; font-family: 'SF UI Display Bold'; letter-spacing: 1px; font-size: 20px; }
.news-date { position: relative; color: #dddddd; line-height: 20px; font-family: 'SF UI Display Light'; float: right; }
.news-container a { text-decoration: none; color: #ffffff; }
.article-container a { text-decoration: none; color: #79b8e5; }
.article-container a:hover { text-decoration: underline; }
.article-container { font-family: 'SF UI Display Light'; color: #f3f3f3; }
.article-container ul { list-style-type: disc; }
.article-container strong { font-family: 'SF UI Display Bold'; }
.article-container img { max-width: 100%; height: auto; border: 2px solid #1d5882; box-shadow: 0 3px 5px #000, 0 3px 40px #000; }

@media (min-width: 990px) {
	.article-date { font-size: 16px; opacity: 0.5; position: absolute; right: 20px; top: 27px; }
	.article-container img[src*='#right'] { float: right; max-width: 500px; margin: 0 0 30px 20px; }
}
@media (max-width: 990px) {
	.article-date { font-size: 16px; opacity: 0.5; }
}

@media (min-width: 200px) {
  .animate {
    animation-duration: 0.3s;
    -webkit-animation-duration: 0.3s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
  }
}

@keyframes slideIn {
  0% {
    transform: translateY(-1rem);
    opacity: 0;
  }
  100% {
    transform: translateY(0rem);
    opacity: 1;
  }
  0% {
    transform: translateY(-1rem);
    opacity: 0;
  }
}

@-webkit-keyframes slideIn {
  0% {
    -webkit-transform: transform;
    -webkit-opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    -webkit-opacity: 1;
  }
  0% {
    -webkit-transform: translateY(1rem);
    -webkit-opacity: 0;
  }
}

.slideIn {
  -webkit-animation-name: slideIn;
  animation-name: slideIn;
}


.form-control.is-valid, .was-validated .form-control:valid,
.form-control.is-invalid, .was-validated .form-control:invalid { background-image: none; }

div:where(.swal2-container) div:where(.swal2-popup) { background: #031a2c !important; background: linear-gradient(90deg, rgb(8 28 42 / 86%) 63%, rgb(10 32 47 / 75%) 100%) !important; color: #ffffff !important; border: 2px solid #45b7e7;}
div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm) { background: linear-gradient(101deg, rgba(139,196,47,1) 0%, rgba(98,158,1,1) 35%) !important; box-shadow: inset 0px 0px 5px #a2dcff !important; font-family: 'SF UI Display Heavy' !important; }
div:where(.swal2-container) div:where(.swal2-actions):not(.swal2-loading) .swal2-styled:hover { background: linear-gradient(101deg, rgba(254,188,20,1) 0%, rgba(254,165,16,1) 35%) !important; }
div:where(.swal2-container).swal2-backdrop-show, div:where(.swal2-container).swal2-noanimation { background: rgb(0 0 0 / 66%) !important; }
div:where(.swal2-container).swal2-center>.swal2-popup { border-radius: 11px !important; }

/***** 404 page ****/
.globe_container { display: flex; justify-content: center; align-items: center; height: 100vh; width: 100%;  }
.globe { display: flex; justify-content: center; align-items: center; width: 100%; height: 70%; background: url('https://dinojump.izotcomputers.com/assets/images/404_World.png'); background-size: contain; background-position: center; background-repeat: no-repeat; }
.globe .text { position: absolute; margin-top: 355px; text-align: center; transform: translateY(50%); }
@media (max-width: 1920px) {
	.globe .text { bottom: auto; margin-top: 230px; }
	.globe {  margin-top: 0px; }
}
@media (max-width: 1366px) {
	.globe .text { bottom: auto; margin-top: 190px; }
	.globe {  margin-top: -80px; }
}
@media (max-width: 768px) {
	.globe .text { bottom: auto; margin-top: 203px; }
	.globe {  margin-top: -130px; }
}
@media (max-width: 568px) {
	.globe .text { bottom: auto; margin-top: 140px; }
	.globe {  margin-top: -130px; }
}
.globe h1 { color: #fff984; font-family: 'SF UI Display Bold'; font-size: clamp(24px, 3vw, 44px); }
.globe h3 { color: #ffffff; font-family: 'SF UI Display Ultralight'; font-size: clamp(15px, 3vw, 28px); line-height: 15px; font-weigt: 200; }


/**** CHECKBOX *****/

.switch {
  display: inline-block;
  height: 34px;
  position: relative;
  width: 60px;
}

.switch input {
  display:none;
}

.slider {
  background: linear-gradient(90deg, rgba(9, 31, 47, 1) 0%, rgba(24, 74, 113, 1) 100%);
  box-shadow: inset 0px 0px 5px #5a9ccf;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .4s;
}

.slider:before {
  background-color: #fff;
  bottom: 4px;
  content: "";
  height: 26px;
  left: 4px;
  position: absolute;
  transition: .4s;
  width: 26px;
}

input:checked + .slider {
  background: linear-gradient(90deg, rgb(132 189 39) 0%, rgb(88 139 7) 100%);
  box-shadow: inset 0px 0px 5px #afe55b;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}