.mainC { color: #FCD535; }
.secondaryC { color: #ffffff; }
.tertiaryC { color: #DBEAFB; }
.green { color: #3DED69; }
.red { color: #FF5B5D; }
.white { color: #ffffff; }

.mainCBk { background: #FCD535; }
.secondaryCBk { background: #ffffff; }
.tertiaryCBk { background: #DBEAFB; }

.fw400 { font-weight: 400; }	.fw500 { font-weight: 500; }	.fw600 { font-weight: 600; }	.fw700 { font-weight: 700; }
.fs20 { font-size: 20px; }		.fs40 { font-size: 40px; }		.fs70 { font-size: 70px; }

.blur {  backdrop-filter: blur(21px); z-index: 100; }
.rotateArrow { transform: rotate(-180deg) !important; }
.displayBlock { display: block !important; }
.hidden { display: none !important; }

* { margin: 0; padding: 0;	box-sizing: border-box; font-family: Rubik; -webkit-font-smoothing: antialiased; text-decoration: none; }

::-webkit-scrollbar { width:4px; height: 4px; }
::-webkit-scrollbar-thumb {  background: #455A64; }

html { width:100%; height: 100%; background: rgba( 21,21,21,1); overflow-y: scroll; overflow-x: hidden; }
body { position:relative; width: 100%; min-height: 100%; margin: 0 auto; background: rgba( 21,21,21,1); font-family: Rubik; }

p {  }
p:not(:first-child) { margin-top:10px; }

header {  width: 100%; height: 83px; line-height: 83px; position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; user-select:none;
		background: radial-gradient(97.57% 210.75% at 0.9% 2.98%, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 100%); }

	header .btnLogin { color: white; }
	header .btnSignUp { color: black; background: #F0B90B !important; border-radius: 10px; padding: 10px 18px; margin-left: 20px; }

footer { position: fixed; bottom: 0; display: flex; height: 26px; line-height:26px; width: 1440px;  color: white; padding: 0 5px; font-weight: 400;  }
	footer { background: radial-gradient(97.57% 210.75% at 0.9% 2.98%, rgba(0, 0, 0, 0.56) 0%, rgba(0, 0, 0, 0) 100%); border: 0.3px solid rgba(255, 255, 255, 0.3); }

section { display: flex; flex-wrap: wrap; color: white;}

main { z-index: 10; position: relative; background: transparent; }


.box { width: 100%; border: 0.3px solid #555; border-radius: 10px; background: radial-gradient(97.57% 210.75% at 0.9% 2.98%, rgba(255, 255, 255, 0.028) 0%, rgba(255, 255, 255, 0) 100%); }
	.box:not(:first-child) { margin-top: 15px; }
	
.divCarusel { width: 100%; border: 1px solid #555; border-radius: 10px; overflow: hidden; background: #000; position: relative; user-select: none; }
	.divCarusel .caruselDiv { position: absolute; top:0; left: 0; width: 100%; height: 100%; }

.divCaruselController { margin: 20px auto 40px; height: 5px; user-select: none; }
	.divCaruselController .control {  background: rgba( 217,217,217,0.7); display:inline-block; cursor: pointer;  }
	.divCaruselController .control:not(:first-child) { margin-left: 5px; }
	.divCaruselController .control.selected { background: white !important; }


.marquee { overflow: hidden; }
.marquee h1 { white-space: nowrap; font-weight: normal; }

#divLive .box { padding: 8px 20px; width: 100%; display: table; vertical-align: middle; }
#divLive .line { display: table-row;  width: 100%; vertical-align: middle; }
#divLive .line .column { display: table-cell; vertical-align: middle; line-height: 195%;}
#divLive .line .column:nth-child(2) { text-align:right; min-width: 140px; }

#menuFooter { margin-top: 40px; padding-top: 20px; border-top: 1px solid #313135; display: flex; flex-wrap:wrap; justify-content: center; }
	#menuFooter .btnFooter { cursor: pointer; }


/* common Ball Animations */
.divBallAnimation { z-index: 9; position: absolute; width: 100%;  background-color: transparent; }
.ballAnimation { animation-duration: 40s; animation-iteration-count: infinite; xanimation-timing-function: linear;}



/****** DESKTOP */
/*==============*/
@media all and (orientation:landscape)  
{
	.left { left: 48px; }
	.marquee h1 { font-size: 12px; }

	body { max-width: 1440px !important; }
	header, section { padding: 0 42px; }
	header { max-width: 1440px; }
		header #menu { display: inline-block; font-size: 16px; }
		header #menuMobile { display:none; }
		
		header #divLogoName { height: 62px; font-size:24px; display: flex; align-items:center; }
		header #divLogoName img { width: 58px; height: 100%; margin-left: -5px;}

		header #headerMobileMenu { display:none; }

	section { margin-top: 40px; }


	/* logos and live */

	#divLogo { width: 55%; }
		#divLogoMasterName { font-size: 70px;  letter-spacing: 0.06em; display:block; }
		#divLogoMasterNameL2 { font-size: 20px; display:block; text-shadow: #000040 0px 4px 4px;  color: rgba( 255,255,255,0.7);  margin-top: -10px; margin-left:3px; }
		#divLogoDescription { margin-top: 50px; font-size: 40px; line-height: 61px; }
		#divLogoButtons { margin-top: 70px; }
	#divLive { width: 45%; font-size: 20px;  }


	.divCarusel { height: 288px; }
	.divCaruselController .control { width: 33px; height: 7px; }

	#TradeRulesTitle { font-size: 44px; line-height: 195%; margin:25px auto 0;  }
	#TradeRulesHeader { font-size: 30px; line-height: 195%;  padding: 10px 10px 20px 40px; color:white !important; text-align: center; }
	ul { list-style-position: inside; }
	ul#TradeRules li { list-style-image: url(../i/bullet_yellow_big.svg); font-size: 26px; font-weight: 400; padding: 30px 20px 30px 30px; border-top: 1px solid #444; color: white !important; } 
		ul#TradeRules li:first-child { border-top: none; }
	ul#TradeRules li span { margin-left: 20px; }


	.divCard { width: calc( 33% - 5px ); margin-top: 20px; border: 1px solid #555; border-radius: 10px; text-align: center; min-height: 506px; position: relative; padding: 0 30px;  }
		.divCard:not(:first-child) { margin-left: 10px; }

		.divCard .cardHeader { display:block;font-size:40px;margin-top: 35px; }
		.divCard .bodytext { display:block;font-size:26px; line-height: 40px; margin-top: 50px; padding-bottom: 170px; }
		.divCard .feePercent { position: absolute; margin-inline: auto; left:0; right:0; bottom: 70px; font-size: 70px;}
		.divCard .txtPercent { position: absolute; margin-inline: auto; left:0; right:0; bottom: 45px; font-size: 24px; }


	#ReferralTitle { font-size: 44px; line-height: 195%; margin:25px auto 0;  }
	.divRefCard { border:1px solid #555; border-radius: 10px; padding: 40px 42px; display:block; width:100%; }
		.divRefCard:not(:first-child) { margin-top:16px; }
		.divRefCard .divRefCardTitle { display: block;font-size:33px; }
		.divRefCard .divRefCardText { display: block; font-size:26px; line-height: 40px; margin-top: 20px; }
		.divRefCard .divRefCardFullText { display:none; width: 100%; font-size:26px;line-height: 40px;margin-top: 20px;  }

		.divRefCard .btnRefCard { border:1px solid rgba(255,255,255,0.5); border-radius: 40px; padding: 13px 26px 14px 20px; display: inline-block; margin-top: 20px; user-select: none; cursor: pointer; }
		.divRefCard .btnRefCard .btnRefCardCarret { position: relative; top: -3px;  transition: transform 0.3s ease-in-out; } 
		.divRefCard .btnRefCard .btnRefCardTitle { font-size:26px; margin-left:16px; }

		.starLine img { width: 20px; height: 20px; }
		.starLine img:last-child { margin-right: 10px; }

	#btnSignUpDownPage { color: black; padding: 16px 24px; border-radius: 10px;font-size: 30px; display:inline-block; margin: 0 auto; user-select: none; cursor: pointer; }

	#menuFooter{ margin-left: 42px; max-width: 1356px; width:calc( 100% - 84px); }
		.btnFooter { font-size: 20px;  }
		.btnFooter:not(:first-child) { margin-left: 40px; }

	#copyright { margin:0 auto; font-size: 16px; line-height: 40px; }
	
	


	#divBackAnim { top: -500px; }
	#imgBackAnim {  animation-name: goAnimateBack; width: 1848px; height: 1848px; margin-left: 0px; }
	@keyframes goAnimateBack {
		  50% { transform: rotate( 90deg); margin-left: 500px; width: 1500px; height: 1500px; filter: grayscale(0.3); opacity: 0.5}
		  100% { transform: rotate( 0deg); margin-left: 0px; width: 1848px; height: 1848px; filter: grayscale(0.5); opacity: 0.07; }
	}

	#divBackAmin2 { top:980px; }
	#imgBackAnim2 { animation-name: goAnimateBack2; width: 1400px; height: 1400px; margin-left: -50%; }
	@keyframes goAnimateBack2 {
		  50% { transform: rotate( -90deg); margin-left: -50%; width: 2000px; height: 2000px; filter: grayscale(0.5); opacity: 0.07;}
		  100% { transform: rotate( 0deg); margin-left: -50%; width: 1400px; height: 1400px; filter: grayscale(0.3); opacity: 0.5 }
	}

	#divBackAnim3 { top:2480px; }
	#imgBackAnim3 { animation-name: goAnimateBack; width: 1848px; height: 1848px; margin-left: 0px; }
}





/****** MOBILE */
/*==============*/
@media all  and (orientation:portrait) 
{
	.left { left: 16px; }
	.marquee { overflow:hidden; display:flex; }
	.marquee h1 { font-size: 8px; white-space: nowrap; }

	body { }
	header,section { padding: 0 16px; width: 100%; }

		header #menu { display:none; z-index: 2; }
		header #menuMobile { display: inline-block; color: white; z-index: 2; }

		header #divLogoName { height: 43px; font-size:20px; display: flex; align-items:center; z-index: 2; }
		header #divLogoName img { width: 40px; height: 100%; margin-left: -5px; }

		header #headerMobileMenu { display: none; height: calc( 100vh - 20px ); width: 100%; background: rgba( 11,11,11,0.8); position:absolute; left: 0; top:0px; z-index: 1; padding: 10px; }
		header #headerMobileMenu.open { display: block !important; }
		header #headerMobileMenu #innerMenu { border:1px solid #555; background: rgba( 21,21,21,0.95); width: 100%;  border-radius: 10px; z-index: 102; padding: 83px 10px 20px;  }
		header #headerMobileMenu #innerMenu .btnMenu { font-size: 16px; line-height: 43px; border-radius: 12px; display: block; width: 100%; text-align: center; }

		header.menuOn {  background: #151515;  }

	section { margin-top: 15px;  }
	section:first-child { margin-top: 20px; }


	#mMenu { position:absolute; top: 32px; right: 12px; width: 30px; }
		#mMenu span { display: block; position: absolute; height: 2px; width: 26px; background: #eee; border-radius: 10px; opacity: 1; left: 0; transition: .2s ease-in-out; box-shadow: 1px 1px 2px #222; cursor:pointer; }
		#mMenu span:nth-child(1) { top: 0px; }
		#mMenu span:nth-child(2) { top: 8px; }
		#mMenu span:nth-child(3) { top: 16px; }
		#mMenu.open span:nth-child(1) { top: 7px; transform: rotate(135deg); box-shadow: none; background: #C62828; height:3px; }
		#mMenu.open span:nth-child(2) { opacity: 0; left: -35px; }
		#mMenu.open span:nth-child(3) { top: 7px; transform: rotate(-135deg); box-shadow: none; background: #C62828; height: 3px; }

	#siteMenu { position: absolute; width: 100%; height: 100%; }



	/* logos and live */

	#divLogo, #divLive { width: 100%; }
		#divLogoMasterName { font-size: 40px; left: 16px; letter-spacing: 0.09em; display:block; }
		#divLogoMasterNameL2 { font-size: 12px; left: 16px; letter-spacing: -2.1%; display:block; text-shadow: #000040 0px 4px 4px ; color: rgba( 255,255,255,0.7); }
		#divLogoDescription { margin-top: 30px; font-size: 20px; line-height: 143%; zoom: 1.15; }
		#divLogoButtons { margin-top: 30px; zoom: 0.55; }

	#divLive { margin-top: 25px; font-size: 14px; }
		#divLive .box { padding: 8px 14px; }
		#divLive .box .line .column { line-height: 165%; }

	.divCarusel { height: 80px; }
	.divCarusel .caruselDiv { height: 80px; }
		.divCaruselController { margin-top :0px !important; }
		.divCaruselController .control { width: 12px; height: 3px; }

	#TradeRulesTitle { font-size: 20px; line-height: 100%; margin:15px auto 10px; }
	#TradeRulesHeader { font-size: 18px; padding: 0px 10px 10px 10px; color:white !important; text-align: center; }
	ul { list-style-position: inside; }
	ul#TradeRules li { list-style-image: url(../i/bullet_yellow.svg?); font-size: 16px; font-weight: 400; padding: 10px 0; border-top: 1px solid #444; color:white !important;} 
		ul#TradeRules li:first-child { border-top: none;  }
	ul#TradeRules li span {  }

	.divCard { width: 100%; margin-top: 15px; border: 1px solid #555; border-radius: 10px; text-align: center; height: 220px; }
		.divCard:not(:first-child) { }

		.divCard .cardHeader { display:block; font-size:24px; margin-top: 20px; }
		.divCard .bodytext { display:block; font-size:16px;  margin-top: 5px; }
		.divCard .feePercent { position: absolute; margin-inline: auto; left:0; right:0; bottom: 35px; font-size: 36px;}
		.divCard .txtPercent { position: absolute; margin-inline: auto; left:0; right:0; bottom: 17px; font-size: 16px; }

	#ReferralTitle { font-size: 20px; line-height: 100%; margin:15px auto 10px; }
	.divRefCard { border:1px solid #555; border-radius: 10px; padding: 10px 15px; display:block; width:100%; }
		.divRefCard:not(:first-child) { margin-top:16px; }
		.divRefCard .divRefCardTitle { display: block;font-size:18px; }
		.divRefCard .divRefCardText { display: block; font-size:16px; margin-top: 18px; }
		.divRefCard .divRefCardFullText { display:none; width: 100%; font-size:16px;margin-top: 18px;  }

		.divRefCard .btnRefCard { border: 1px solid rgba(255,255,255,0.5); border-radius: 40px; padding: 3px 16px 5px 12px; display: inline-block; margin-top: 10px; user-select: none; cursor: pointer; }
		.divRefCard .btnRefCard .btnRefCardCarret { zoom: 0.7; position: relative; top: -2px; transition: transform 0.3s ease-in-out; } 
		.divRefCard .btnRefCard .btnRefCardTitle { font-size:14px; margin-left:6px; }

		.starLine { margin-top: 10px; }
		.starLine img { width: 12px; height: 12px; }
		.starLine img:last-child { margin-right: 8px; }

	#btnSignUpDownPage { color: black; padding: 10px; border-radius: 10px;font-size: 14px; display:inline-block; margin: 0 auto; user-select: none; cursor: pointer; }

	#menuFooter{ width: 100%; }
		.btnFooter { width: 100%; font-size: 14px; line-height: 35px;}


	#copyright { margin:0 auto; font-size: 12px; line-height: 40px; }



	#divBackAnim { top: -200px; overflow: hidden;  }
	#imgBackAnim { width: 1000px; height: 1000px; margin-left: -200px; animation-name: goAnimateBack; }
	@keyframes goAnimateBack {
		  50% { transform: rotate( 90deg); margin-left: 200px; width: 800px; height: 800px; filter: grayscale(0.3); opacity: 0.5}
		  100% { transform: rotate( 0deg); margin-left: -200px; width: 1000px; height: 1000px; filter: grayscale(0.5); opacity: 0.07; }
	}

	#divBackAmin2 { top: 900px; overflow: hidden; }
	#imgBackAnim2 { width: 800px; height: 800px; margin-left: -100%; animation-name: goAnimateBack2; }
	@keyframes goAnimateBack2 {
		  50% { transform: rotate( -90deg); margin-left: -50%; width: 1000px; height: 1000px; filter: grayscale(0.5); opacity: 0.07; }
		  100% { transform: rotate( 0deg); margin-left: -100%; width: 800px; height: 800px; filter: grayscale(0.3); opacity: 0.5; }
	}

	#divBackAnim3 { top: 1800px; overflow: hidden; }
	#imgBackAnim3 { width: 1000px; height: 1000px; margin-left: -200px; animation-name: goAnimateBack; }
}



/*

*/