/* FONTS */

@font-face
{
    font-family:'Comfortaa';
    src:url('../font/comfortaa-light.woff2') format('woff2'),
        url('../font/comfortaa-light.woff') format('woff');
    font-weight:300;
    font-style:normal;
    font-display:swap;
}

@font-face
{
    font-family:'Comfortaa';
    src:url('../font/comfortaa-bold.woff2') format('woff2'),
        url('../font/comfortaa-bold.woff') format('woff');
    font-weight:700;
    font-style:normal;
    font-display:swap;
}

@font-face
{
    font-family:'Comfortaa';
    src:url('../font/comfortaa.woff2') format('woff2'),
        url('../font/comfortaa.woff') format('woff');
    font-weight:normal;
    font-style:normal;
    font-display:swap;
}

/* GLOBALS */

html,
body
{
	margin:0;
	padding:0;
	color:#efefef;
	font-size:18px;
	background:#1f1f1f;
	font-family:'Comfortaa', sans-serif;
}

h1, h2, h3,
h4, h5, h6
{
	font-weight:700;
}

a,
a:link,
a:focus,
a:hover,
a:visited
{
	outline:0 !important;
}

@media (max-width:991.98px)
{
	html,
	body
	{
		font-size:15px;
	}
}

/* NAVBAR */

.navbar-dark
{
	color:#fff;
	font-size:20px;
	font-weight:400;
	padding:15px 60px;
	background:#1f1f1f;
	margin-bottom:80px;
	border-bottom:3px solid #55cc7c;
	border-bottom-left-radius:80px;
	border-bottom-right-radius:80px;
	box-shadow:0 2px 15px rgba(85, 204, 124, 0.5);
}

.navbar-footer
{
	margin-top:80px;
	margin-bottom:0;
	border-bottom:none;
	padding-bottom:20px;
	border-bottom-left-radius:0;
	border-bottom-right-radius:0;
	border-top-left-radius:80px;
	border-top-right-radius:80px;
	border-top:3px solid #55cc7c;
	box-shadow:0 2px 15px rgba(85, 204, 124, 0.5);
}

.navbar-dark .nav-link
{
	color:#fff;
	font-weight:400;
	padding-left:15px !important;
	padding-right:15px !important;
}

.navbar-dark .nav-link:hover
{
	color:#f4f97f;
}

.navbar-dark .nav-link.active
{
	color:#f4f97f;
}

.navbar-dark .dropdown-item:hover,
.navbar-dark .dropdown-item.active
{
	background:#f4f97f;
}

.navbar-dark .dropdown-toggle::after
{
	border:0;
	content:'';
	width:0.35em;
	height:0.35em;
	margin-left:0;
	vertical-align:.2em;
	border-style:solid;
	border-width:0.1em 0.1em 0 0;
	transform:rotate(135deg);
	display:inline-block;
}

.navbar-brand img
{
	width:240px;
	max-width:50vw;
}

.relative
{
	position:relative;
}

.copyright
{
	left:0;
	right:0;
	bottom:0;
	display:block;
	margin:0 auto;
	position:absolute;
}

.copyright span
{
	width:320px;
	display:block;
	margin:0 auto;
	max-width:90%;
	color:#55cc7c;
	font-size:15px;
	font-weight:600;
	text-align:center;
	background:#505050;
	padding:3px 10px 1px 10px;
	border-top-left-radius:40px;
	border-top-right-radius:40px;
}

@media (max-width:1399.98px)
{
	.navbar-brand img
	{
		width:250px;
	}
	
	.navbar-footer
	{
		padding-bottom:45px;
	}
}

@media (max-width:767.98px)
{	
	.navbar-dark
	{
		margin-bottom:40px;
		padding-left:25px;
		padding-right:25px;
	}
	
	.navbar-footer
	{
		margin-top:40px;
		margin-bottom:0;
	}

	.navbar-dark.flex-wrap
	{
		display:block !important;
		flex-wrap:nowrap !important;
		text-align:center;
	}
	
	.navbar-brand,
	.navbar-toggler
	{
		flex:none;
		display:inline-block;
		flex-grow:0 !important;
	}
	
	.navbar-nav,
	.navbar-buttons
	{
		flex:none;
		width:100%;
		display:block;
		flex-grow:0 !important;
	}
}

/* BUTTONS */

.btn
{
	min-width:200px;
	font-size:16px;
	font-weight:600;
	padding:11px 20px;
	border-radius:28px;
	text-overflow:ellipsis;
	white-space:nowrap;
	overflow:hidden;
}

.btn svg,
.btn img
{
	width:24px;
	margin-right:4px;
	display:inline-block;
	vertical-align:middle;
}

.btn span
{
	display:inline-block;
	vertical-align:middle;
}

.btn svg path
{
	fill:#fff;
}

.btn + .btn
{
	margin-left:21px;
}

.btn-default,
.btn-default:link,
.btn-default:hover,
.btn-default:active,
.btn-default:visited,
.btn-connect,
.btn-connect:link,
.btn-connect:hover,
.btn-connect:active,
.btn-connect:visited
{
	color:#fff;
	transition:none;
	border:1px solid #fff;
	background:linear-gradient(to bottom, #4e4e4e 0%, #1f1f1f 100%);
}

.btn-connect:hover
{
	color:#000;
	border-color:#55cc7c;
	background:#55cc7c;
}

.btn-connect:hover svg path
{
	fill:#000;
}

.btn-outline,
.btn-outline:link,
.btn-outline:visited,
.btn-outline:active,
.btn-outline:hover
{
	transition:none;
	border-radius:50%;
	padding:10px 12px;
	border:2px solid #fff;
	min-width:24px !important;
}

.btn-outline svg
{
	margin:0 !important;
}

.btn-outline svg path
{
	fill:#fff;
}

.btn-outline:hover
{
	color:#000;
	border-color:#55cc7c;
	background:#55cc7c;
}

.btn-outline:hover svg path
{
	fill:#000;
}

.btn-primary
{
	color:#000;
	border:none;
	transition:none;
	background:#55cc7c;
}

.btn-secondary
{
	color:#000;
	border:none;
	transition:none;
	background:#f4f97f;
}

.btn-unstake,
.btn-unstake:link,
.btn-unstake:visited,
.btn-unstake:active,
.btn-unstake:hover
{
	color:#2b3b2b;
	background:#ea3a3d;
}

.btn-stake,
.btn-stake:link,
.btn-stake:visited,
.btn-stake:active,
.btn-stake:hover
{
	color:#2b3b2b;
	background:#55cc7c;
}

.btn-modal-close,
.btn-modal-close:link,
.btn-modal-close:visited,
.btn-modal-close:active,
.btn-modal-close:hover
{
	width:auto;
	padding:8px;
	color:#99fe98;
	font-size:14px;
	min-width:70px !important;
	border:1px solid #99fe98;
	border-radius:15px;
}

.btn-default:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-unstake:hover,
.btn-modal-close:hover,
.btn-stake:hover
{
	color:#000;
	background:#efefef;
	border-color:transparent;
}

.btn-collapse,
.btn-collapse:focus,
.btn-collapse:hover,
.btn-collapse:active
{
	outline:0;
	min-width:0;
	border:none;
	padding:6px 16px;
	box-shadow:none;
	background:transparent;
	transition:transform 0.3s;
}

.btn-collapse img
{
	max-height:20px;
}

.btn-collapse.collapsed
{
	transform:rotate(-180deg);
	transform-origin:center;
}

.btn-strong
{
	font-weight:600;
	font-size:18px;
}

@media (max-width:1399.98px)
{
	.btn
	{
		min-width:170px;
	}
}

@media (max-width:767.98px)
{
	.btn + .btn
	{
		margin-left:5px;
	}
	
	.navbar-buttons
	{
		margin-top:15px;
	}
}

/* TEXTS */

.text-aqua
{
	color:#30edff !important;
}

.text-blue
{
	color:#338cfa !important;
}

.text-green
{
	color:#55cc7c;
}

.text-red
{
	color:#ff7575;
}

.text-yellow
{
	color:#f4f97f;
}

/* SOCIALS */

.social-networks
{
	margin:0;
	padding:0;
	display:block;
	list-style-type:none;
}

.social-networks li
{
	display:inline-block;
	margin-left:18px;
}

.social-networks li a
{
	padding:8px;
	border-radius:10px;
	background:#505050;
	display:inline-block;
	transition:all 0.3s;
}

.social-networks li svg
{
	width:32px;
}

.social-networks li svg path
{
	fill:#69ea7b;
	transition:all 0.3s;
}

.social-networks li a:hover
{
	background:#69ea7b;
}

.social-networks li a:hover svg path
{
	fill:#efefef;
}

@media (min-width:1200px) and (max-width:1399.98px)
{
	.social-networks li
	{
		margin-left:8px;
	}
}

/* INFO BOX */

.info-box
{
	padding:40px 60px;
	border-radius:40px;
	border:3px solid #f4f97f;
	background:linear-gradient(to bottom, #505050 0%, #1f1f1f 100%);
	border-bottom:none;
	border-top:none;
}

.info-box h1,
.info-box h2,
.info-box h3,
.info-box h4,
.info-box h5,
.info-box h6
{
	font-weight:400;
	font-size:46px;
}

.info-box ul
{
	padding-left:1rem;
}

.info-box ul li
{
	font-weight:300;
}

@media (max-width:767.98px)
{
	.info-box
	{
		padding:30px 15px;
	}
	
	.info-box h1,
	.info-box h2,
	.info-box h3,
	.info-box h4,
	.info-box h5,
	.info-box h6
	{
		font-size:32px;
	}
}

/* INFO NFT BOX */

.info-nft-box
{
	position:relative;
	margin-top:130px;
	padding-top:20px;
	border-radius:40px;
	padding-bottom:20px;
	padding-left:280px;
	border:3px solid #55cc7c;
	background:linear-gradient(to bottom, #505050 0%, #1f1f1f 100%);
	border-right:none;
	border-left:none;
}

.info-nft-box .btn
{
	margin-top:18px;
}

.info-nft-box h3
{
	font-size:34px;
}

.info-nft-box h6
{
	font-size:18px;
}

.info-nft-box strong
{
	font-size:1.2em;
}

.info-nft-box .separated
{
	position:relative;
}

.info-nft-box .separated::before
{
	top:0;
	left:0;
	bottom:0;
	content:'';
	display:block;
	position:absolute;
	border-left:3px solid #fff;
}

.double-line
{
	font-size:1.05em;
	line-height:2.2rem;
}

.info-nft-image-box
{
	left:0;
	width:250px;
	bottom:-2.6px;
	overflow:hidden;
	padding-top:10px;
	position:absolute;
	background:#505050;
	border-radius:40px;
	text-align:center;
	border:3px solid #55cc7c;
	border-right:none;
	border-left:none;
}

.info-nft-image-box h1,
.info-nft-image-box h2,
.info-nft-image-box h3,
.info-nft-image-box h4,
.info-nft-image-box h5,
.info-nft-image-box h6
{
	font-size:24px;
	font-weight:300;
}

.info-nft-image-box img
{
	width:100%;
	border-radius:40px;
}

@media (max-width:1199.98px)
{
	.info-nft-box
	{
		margin-top:40px;
		padding-left:15px;
		text-align:center;
	}
	
	.info-nft-box .separated
	{
		margin-top:5px;
		padding-top:15px;
	}
	
	.info-nft-box .separated::before
	{
		top:0;
		left:5px;
		right:8px;
		bottom:auto;
		border-left:none;
		border-top:2px solid #fff;
	}
	
	.info-nft-image-box
	{
		left:auto;
		bottom:auto;
		width:100%;
		padding-top:0;
		border-top:none;
		position:static;
		margin-bottom:10px;
	}
}

/* MODAL */

.modal
{
	--bs-modal-bg:#1f1f1f;
	--bs-modal-width:min(90%, 1200px);
}

.modal-header,
.modal-footer,
.modal-body
{
	border:none;
	padding-top:20px;
	padding-bottom:30px;
}

.modal-body
{
	padding-left:40px;
	padding-right:40px;
	scrollbar-width:thin;
	scrollbar-color:#55cc7c transparent;
}

.modal-header
{
	padding-bottom:10px;
}

.modal-footer
{
	padding-top:10px;
	text-align:center;
	justify-content:center;
}

.btn-close,
.btn-close:focus
{
	border:none;
	outline:none;
	box-shadow:none;
	--bs-btn-close-color:#efefef;
	--bs-btn-close-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}

.modal-content
{
	border:2px solid #888;
}

.modal-body h1,
.modal-body h2,
.modal-body h3,
.modal-body h4,
.modal-body h5,
.modal-body h6
{
	margin-top:0;
	font-size:32px;
	font-weight:300;
	margin-bottom:30px;
}

.error-message
{
	padding-top:25vh;
	padding-bottom:25vh;
	line-height:50px;
	text-align:center;
	font-weight:700;
	font-size:22px;
}

.error-message::before
{
	width:50px;
	height:50px;
	content:'';
	margin-right:15px;
	display:inline-block;
	vertical-align:middle;
	background:url('../img/error.png') no-repeat;
	background-position:center center;
	background-size:contain;
}

@media (max-width:767.98px)
{
	.error-message::before
	{
		width:100%;
		display:block;
		margin-right:0;
	}
}

/* NFT BOX */

.nft-box
{
	width:100%;
	margin:10px 0;
	padding-top:10px;
	text-align:center;
	border-radius:40px;
	background:linear-gradient(to bottom, #2b3032 0%, #2b3032 80%, transparent 80%, transparent 100%);
}

.nft-box h1,
.nft-box h2,
.nft-box h3,
.nft-box h4,
.nft-box h5,
.nft-box h6
{
	margin:0;
	padding:0;
	font-size:16px;
	font-weight:400;
	margin-bottom:10px;
}

.nft-box img
{
	width:100%;
	border-radius:40px;
	border:2px solid #4fdf6a;
}

.nft-box .btn
{
	width:100%;
	padding-top:16px;
	margin-top:-60px;
	padding-bottom:16px;
	font-weight:700 !important;
	font-size:18px;
}

/* LOADER */

.loader
{
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	z-index:9999;
	display:flex;
	position:fixed;
	visibility:hidden;
	align-items:center;
	justify-content:center;
	background-color:rgba(0,0,0,0.7);
}

.loader-text
{
	color:#fff;
	font-size:20px;
	text-align:center;
	font-family:'Jost', sans-serif;
}

.lds-roller 
{
	display: block;
	position: relative;
	margin:0 auto;
	width: 80px;
	height: 80px;
}

.lds-roller div 
{
	animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	transform-origin: 40px 40px;
}

.lds-roller div:after 
{
	content: " ";
	display: block;
	position: absolute;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #fff;
	margin: -4px 0 0 -4px;
}

.lds-roller div:nth-child(1) 
{
	animation-delay: -0.036s;
}

.lds-roller div:nth-child(1):after 
{
	top: 63px;
	left: 63px;
}

.lds-roller div:nth-child(2) 
{
	animation-delay: -0.072s;
}

.lds-roller div:nth-child(2):after 
{
	top: 68px;
	left: 56px;
}

.lds-roller div:nth-child(3) 
{
	animation-delay: -0.108s;
}
  
.lds-roller div:nth-child(3):after 
{
	top: 71px;
	left: 48px;
}
  
.lds-roller div:nth-child(4) 
{
	animation-delay: -0.144s;
}

.lds-roller div:nth-child(4):after 
{
	top: 72px;
	left: 40px;
}
  
.lds-roller div:nth-child(5) 
{
	animation-delay: -0.18s;
}
  
.lds-roller div:nth-child(5):after 
{
	top: 71px;
	left: 32px;
}
  
.lds-roller div:nth-child(6) 
{
	animation-delay: -0.216s;
}
  
.lds-roller div:nth-child(6):after 
{
	top: 68px;
	left: 24px;
}
  
.lds-roller div:nth-child(7) 
{
	animation-delay: -0.252s;
}
  
.lds-roller div:nth-child(7):after 
{
	top: 63px;
	left: 17px;
}
  
.lds-roller div:nth-child(8) 
{
	animation-delay: -0.288s;
}
  
.lds-roller div:nth-child(8):after 
{
	top: 56px;
	left: 12px;
}
  
@keyframes lds-roller 
{
	0% {
	  transform: rotate(0deg);
	}
	100% {
	  transform: rotate(360deg);
	}
}