* { font-family: lato, sans-serif; }
:root {
	--brand-red: #ed1c25;
	--brand-black: #232020;
	--brand-white: #fff;
	--brand-grey: rgb(244,244,244);
	--brand-dk-grey: #b8b8b8;
	--brand-md-grey: #d5d5d5;
	--brand-green: #6FAA40;
}

.text-red { color: var(--brand-red); }
.text-grey { color: var(--brand-grey); }
.text-dk-grey { color: var(--brand-dk-grey); }
.text-black { color: var(--brand-black); }
.btn { border-radius: 8px; min-width: 180px; font-size: 1em; margin: 0 0 20px 0; }
.btn img { height: 24px; width: auto; margin: 0 10px 0 0; }
.bg-red { background-color: var(--brand-red); color: var(--brand-white); }
.bg-green { background-color: var(--brand-green); color: var(--brand-white); }
.bg-grey { background-color: var(--brand-grey); }
.bg-md-grey { background-color: var(--brand-md-grey); }
.bg-white { background-color: var(--brand-white); }

.btn.bg-md-grey:hover { background-color: var(--brand-black); color: #fff;  }

.form-control { border-color: var(--brand-red); border-radius: 8px; }
.form-control-black { border-color: var(--brand-dk-grey); }

/** TOP NAV **/
nav { background-color: var(--brand-black); padding: 20px 0; }
.ct-vt-logo { width: 150px; height: auto; }

#artistbios .card-text { min-height: 220px; }


/** FOOTER **/
footer { background-color: var(--brand-black); color: var(--brand-white); padding: 40px 0; }
footer .links a { color: var(--brand-white);  margin: 0 0 10px 0; text-decoration: none; display: block; font-size: 0.8em; }
footer .footer-social-share ul, footer .footer-social-share li { list-style: none; text-indent: 0; }
footer .footer-social-share li { display: inline-block; width: 41px; }
footer .footer-social-share svg { width: 26px; height: auto; }
footer .copyright { color: var(--brand-white); font-size: 0.8em; }

#nftguide { height: 100%; }
.nft-virtual-tree-logo { justify-content: end; }

a.scroll-down { text-decoration: none; }
a.scroll-down:hover { color: inherit; }

.section-title { font-size: 40px; font-weight: 700; line-height: 48px; letter-spacing: 0em; color: var(--brand-black); margin: 0 0 20px 0; }
.section-text { font-style: normal; font-weight: 400; font-size: 20px; line-height: 24px; color: var(--brand-black); }

.card-title { font-size: 24px; font-weight: 700; line-height: 48px; letter-spacing: 0em; color: var(--brand-black); margin: 0 0 20px 0; }
.card-img-top { max-width: 50%; width: 100%; height: auto; margin: 0 auto; padding: 30px 0 0 0; }
.card { box-shadow: 0px 9px 19px rgb(38 38 38/10%); border-radius: 5px; border: 0; }

.nftart-img { width: 100%; height: auto; border-radius: 5px; }

.welcome-img { position: relative; z-index: 9; width: 100%; height: auto; }
.welcome-img-confetti a::before { content: " "; background: url("storage/images/watch-video-bg-asset.png"); background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; display: block; position: absolute; top: -65px; right: -80px; }

.dreamtree-img, .nft-img { width: 100%; height: auto; }

.accordion-button:not(.collapsed) { color: var(--brand-black); background-color: var(--brand-white); font-weight: 800; }
h2.accordion-header { font-weight: 800; }


.floater { overflow: hidden; transform: translateY(0px); animation: float 6s ease-in-out infinite; }

/** WALLET PAGE **/
.wallet-line { position: absolute; bottom: 190px; left: 0; width: 100vw; height: auto; z-index:0; }

/** WALLET CAROUSEL **/
#walletCarousel .wallet-carousel-steps { border: 1px solid #d8d8d8; padding: 20px 15px; position: relative; }
.wallet-steps { border: 1px solid #d8d8d8; margin: 0 0 20px 0; }
.wallet-steps-content-wrapper { padding: 20px 15px; position: relative; min-height: 160px; }
.wallet-steps-img { background-color: var(--brand-white); text-align: center; height: 375px; display: flex; align-items: center; justify-content: center; }
#walletCarousel .wallet-carousel-steps-content, .wallet-steps-content  { margin: 0 0 0 45px; }
#walletCarousel .wallet-carousel-steps-number-circle, .wallet-steps-number-circle { position: absolute; width: 36px; height: 36px; left: 15px; top: 20px; border: 3px solid var(--brand-red); border-radius: 50%; }
#walletCarousel .wallet-carousel-steps-number, .wallet-steps-number { position: absolute; width: 36px; height: 36px; left: 15px; top: 20px; font-weight: 700; font-size: 25px; line-height: 1.25; text-align: center; color: var(--brand-red); }
#walletCarousel .active div.wallet-carousel-steps { background: #d8d8d8; }
#walletCarousel .active div.wallet-carousel-steps::after { content: ""; position: absolute; bottom: -30px; border-top: 3px solid var(--brand-red); width: 100%; left: 0px; }
#walletCarousel .carousel-indicators { flex-shrink: 0; width: 100%; position: relative; right: auto; left: auto; bottom: auto; margin: 0; }
#walletCarousel .carousel-indicators [data-bs-target] { height: auto; margin: 0; text-indent: 0; box-sizing: border-box; flex: 0 0 auto; width: 33.33333333%; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5); margin-top: var(--bs-gutter-y); opacity: 1; }
.wallet-installation { filter: drop-shadow(2px 4px 25px rgba(0, 0, 0, 0.25)); border-radius: 8px; }
a.wallet-next { color: var(--brand-red); font-size: 20px; text-decoration: none; }
a.wallet-next img { width: 40px; height: auto; vertical-align: middle; }

.wallet-button-wrapper { background-color: var(--brand-grey); border-radius: 20px; padding: 10px; text-align: center; }

@keyframes float {
	0% { transform: translateY(0px) translateX(0px); }
	50% { transform: translateY(-20px) translateX(5px); }
	100% { transform: translateY(0px) translateX(0px); }
}

.donly { display: block; }
.monly { display: none; }
.ddib { display: inline-block; }
.dmib { display: none; }

/** TERMS & CONDITIONS **/
.terms-header { border-bottom: 1px solid var(--brand-dk-grey); width: 100%; font-size: 1.5em; font-weight: 600; }
.terms-subheader { font-size: 1.3em; font-weight: 600; margin-bottom: 10px; }
.terms-required { color: var(--brand-red); font-size: 0.8em; }
.termsdiv { height: 250px; width: 100%; margin: 0 auto; overflow: auto; border: 1px solid var(--brand-dk-grey); }
.termscontent {	height: 800px; width: 100%; padding: 20px; }
#termscontactform input[type='checkbox'] { display: none; }
#termscontactform .form-label { font-weight: 600; }
.disabledbutton { pointer-events: none; opacity: 0.4; }

/** MATH MODAL **/
#mathModal .modal-header { padding: 0; border-bottom: none; }
#mathModal .modal-header-grey { background-color: var(--brand-grey); padding: 1rem 1rem;}
#mathModal .math-header { border-bottom: 1px solid var(--brand-dk-grey); font-size: 1.25em; font-weight: 600; text-align: center;  }
#mathModal .math-question { font-size: 3em; font-weight: 600; }

/** WINNER SCREEN **/
.winbg { background: rgb(255,255,255); background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(237,39,38,1) 50%, rgba(237,39,38,1) 100%); }
.congrats-p { width: 60%; margin: 0 auto; }

/** THANKS FOR TRYING SCREEN **/
.thank-you-left { background: url('storage/images/thankyou-left.jpg') no-repeat; background-size: cover; }
.thank-you-content { min-height: 800px; }
.thank-you-right { background: url('storage/images/thankyou-right.jpg') no-repeat; background-size: cover; }

/** CT MONEY SCREEN **/
.ctmoney-step { width: 50%; height: auto; margin: 0 auto 20px auto; display: block; }
.ctmoney-step-img { min-height: 200px; }
ol.steps { padding: 0; }
.steps { margin: 0 auto 20px auto; width: 78%; height: 30px; display: block; text-align: center; background: url('storage/images/nft-indicator-line-horiz.png') no-repeat; background-position: center center; display: flex; flex-direction: row; justify-content: space-between; }
.steps li { background: url('storage/images/nft-indicator-grey.png') no-repeat; background-size: contain; width: 40px; height: 40px; border: none; z-index: 9; text-indent: 0; font-size: 20px; display: flex; align-items: center; justify-content: center; color: #fff; opacity: 1; }
.steps li.active { background: url('storage/images/nft-indicator.png') no-repeat; background-size: contain; }


/** GUIDE VERTICAL CAROUSEL **/
#guide .carousel { overflow: hidden; }
#guide .carousel-inner, #guide .carousel, #guide .carousel-item, #guide .carousel-container { height: 100%; width: 100%; background-position: center center; background-size: cover; }
#guide .carousel-inner { padding: 0 60px; }
#guide .carousel-item { min-height: 600px; padding: 100px 0; }
#guide .carousel-item-prev:not(.carousel-item-end), #guide .active.carousel-item-start { transform: translate3d(0, -100%, 0); -webkit-transform: translate3d(0, -100%, 0); -moz-transform: translate3d(0, -100%, 0); -ms-transform: translate3d(0, -100%, 0); -o-transform: translate3d(0, -100%, 0); }
#guide .carousel-item-next:not(.carousel-item-start), #guide .active.carousel-item-end { transform: translate3d(0, 100%, 0); -webkit-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0);	}
#guide .carousel-indicators { top: 0; margin: auto; right: auto; left: 10px; height: 600px; display: block; text-align: center; background: url('storage/images/nft-indicator-line.png') no-repeat; background-position: center center; display: flex; flex-direction: column; justify-content: space-between; }
#guide .carousel-indicators [data-bs-target] { background: url('storage/images/nft-indicator-grey.png') no-repeat; background-size: contain; width: 30px; height: 30px; border: none; z-index: 9; text-indent: 0; font-size: 10px; display: flex; align-items: center; justify-content: center; color: #fff; opacity: 1; }
#guide .carousel-indicators li.active { background: url('storage/images/nft-indicator.png') no-repeat; background-size: contain; }
#guide .carousel-control-next-icon, #guide .carousel-control-prev-icon { width: 4rem; height: 4rem; position: fixed; top: 95%; left: 50%; transform: translate(-50%, -50%) rotate(90deg); z-index: -1; }
#guide .carousel-control-prev-icon { top: 5%; }
#guide .unclickable { pointer-events: none; }
#guide .clickable { pointer-events: all; }

.line-text-wrapper-v { width: 20px; height: auto; text-align: center; z-index: 1; }
.line-text-line-v { position: absolute; left: 49%; top: 0; bottom: 0; width: 3px; background: #00a2c2; z-index: 1; }




@media all and (max-width: 1024px) {
	.btn { width: 100%; }

	/** WALLET PAGE **/
	.wallet-line { bottom: 160px; }


}

@media all and (max-width: 768px) {
	.ddib { display: none; }
	.dmib { display: inline-block; }
	.donly { display: none; }
	.monly { display: block; }

	.nft-virtual-tree-logo { justify-content: center; }

	#nftguide { height: 100%; }

	#walletCarousel .carousel-indicators [data-bs-target] { width: 100%; }
	#walletCarousel .carousel-indicators [data-bs-target] { margin-bottom: 30px; }

	/** WALLET PAGE **/
	.wallet-line { bottom: 140px; }

	.congrats-p { width: 100%; margin: 0 auto; }

	/** THANKS FOR TRYING SCREEN **/
	.thank-you-left, .thank-you-right { min-height: 200px; }
	.thank-you-content { min-height: 400px; }

	.sidequest-img { width: 100%; height: auto; margin: 0 auto; }
	.welcome-img-confetti a::before { display: none; }
}