@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;600&display=swap');
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css);

#accept-button          {background:#5fcf69 !important;}
#deny-button            {background:#4997cf !important;}
#manage-settings-button {background:#ddf1ff !important; color:#4997cf !important; border: solid 1px #4997cf;}

.hamburger {display: none;}

.open {
  background-color: #4997cf;
  width: 24px;
  height: 4px;
  display: block;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  top: 0px;
}

.open:before {
  content: "";
  background-color: #4997cf;
  width: 24px;
  height: 4px;
  display: block;
  border-radius: 2px;
  position: relative;
  top: -8px;
  transform: rotate(0deg);
  transition: all 0.3s ease;
}

.open:after {
  content: "";
  background-color: #4997cf;
  width: 24px;
  height: 4px;
  display: block;
  border-radius: 2px;
  position: relative;
  top: 4px;
  transform: rotate(0deg);
  transition: all 0.3s ease;
}

.menuOpen {
  width: 24px;
  height: 20px;
  display: none;
  padding: 15px;
  cursor: pointer;
  float: right;
  position: fixed;
  z-index: 99;
  right: 15px;
  top: 25px;
}



.menu {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: rgba(38, 165, 118, 0.9);
  z-index: 98;
}

.menu label {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 20px;
  top: 20px;
  background-size: 100%;
  cursor: pointer;
}

.menu .menuContent {
  position: relative;
  top: 30%;
  font-size: 1.1em;
  text-align: center;
  padding-bottom: 25px;
  margin-top: -160px;
}

.menu ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
}

.menu ul li a {
  display: block;
  color: white;
  text-decoration: none;
  transition: color 0.2s;
  text-transform: uppercase;
  padding: 7px 0;
}

@media screen and (orientation: landscape) {
  .menu .menuContent{margin-top: -100px; font-size: 0.9em;}
  .menu ul li a     {padding: 3px 0;}
}

.menu ul li a:hover {
  color: rgb(18, 212, 140);
}

.menu ul li:hover {
  background: #ffffff;
  transition: all 0.3s;
}

.menuEffects {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0.5s;
}

.menuEffects ul {
  transform: translateY(3%);
  transition: all 0.5s;
}

#menuToggle:checked ~ .menuEffects {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s;
}

#menuToggle:checked ~ .menuEffects ul {
  opacity: 1;
}

#menuToggle:checked ~ .menuOpen .open {
  background-color: transparent;
}

#menuToggle:checked ~ .menuOpen .open:before {
  content: "";
  background-color: white;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

#menuToggle:checked ~ .menuOpen .open:after {
  content: "";
  background-color: white;
  transform: rotate(-45deg);
  position: relative;
  top: 0;
  right: 0;
  z-index: 1;
}

#menuToggle:not(:checked) ~ .menuEffects ul {
  transform: translateY(-30%);
}

@media all and (max-width: 1030px) {
  #mainMenuWrap ul, nav {display: none;} 
  .menuOpen        {display: inline-block;}
}

html {scroll-behavior: smooth;}

body 		{background-color: #fff; color: #444; margin: 0; padding:80px 0 0 0; font-family:'Quicksand', calibri; width: 100%;}
.divider{height: 0px;margin: 40px auto;border-bottom: dotted 2px #ccc;}

header                      {position:fixed;top:0;left:0;height:100vh;width:100%;background:#fff;transition:0.7s;padding:10px 0px;box-sizing:border-box;z-index: 90;border-bottom: solid 1px #fff;}
header.scrolled             {height: 80px;border-bottom: solid 1px #ddd;}
header img.banner           {object-fit: cover;position: absolute;top: 0;left: 0;height: 100%;width: 100%;transition: 0.7s;}
header.scrolled img.banner  {opacity: 0;}
header .logo                {position: absolute;top: calc(50% - 150px);left: calc(50% - 150px);transition: 0.7s;}
header.scrolled .logo       {position: relative;top: 14px;left:14px;width:128px; height:auto;}
header .logo img            {width: 128px;transition: 0.7s;}
header.scrolled .logo img   {width: 80px;}
header h2                   {position: absolute;top: calc(50% - 60px);left: calc(50% - 125px);color:#fff;z-index:100;font-size:0.8em;transition:0.1s;}
header.scrolled h2			    {display: none; color: red;}
header.scrolled .downArrow	{display: none;}

.downArrow 	{position: absolute;top: calc(50% - 1px); left: calc(50% + 15px); z-index: 99; color: #fff; font-size: 2em; animation: arrows 1.2s steps(5, end) infinite;}
@keyframes arrows {
  20% {
    color: rgba(0,0,0,0);
    text-shadow:
      0 .5em 0  rgba(0,0,0,0),
      0 1em 0 rgba(0,0,0,0);}
  40% {
    color: white;
    text-shadow:
      0 .5em 0  rgba(0,0,0,0),
      0 1em 0 rgba(0,0,0,0);}
  60% {
    text-shadow:
      0 .5em 0  white,
      0 1em 0 rgba(0,0,0,0);}
  80%, 100% {
    text-shadow:
      0 .5em 0  white,
      0 1em 0 white;}
}


nav                     {position: relative;float: right; right: 14px;}
nav ul                  {margin: 0;padding: 24px 0;display: flex;transition: 0.7s;opacity: 0;visibility: hidden;transform: translateX(100px);}
header.scrolled nav ul  {opacity: 1;visibility: visible;transform: translateX(0);}
nav ul li               {list-style: none; font-size: 0.8em;}
nav ul li a             {color: #777;padding:0 15px 27px 15px;text-decoration: none;border-bottom: solid 3px #ffffff00;transition: 0.5s;}
/*nav ul li a.active      {color:#0092fb; border-bottom: solid 3px #4997cf;} */
nav ul li a:hover       {color:#0092fb; border-bottom: solid 3px #4997cf;} /* blue:#00c8e6, green:#5fcf69  */
/* .active      {color:#0092fb; border-bottom: solid 3px #4997cf; background-color: transparent;} */

a 			{color:#00DDFF;}
a:hover {color:#adedf7;}

h1	{text-align: center;}
h2  {text-align: center; padding-top: 0; font-size: 1.5em;}
h3	{text-align: center; margin-top: 0; padding-top: 0; font-size: 1.4em;}
h5  {margin: 0;}
.completed  {color: green !important;}
.inProgress {color: #ff7600 !important;}

#menudo i {font-size: 0.9em; margin-left: 2px;}


#wrapper{position: relative; //top:80px; width:100%; margin: 0 auto; background-color: #fff; //border: solid 1px red;}

#Mission, #Platform, #faqs, #GetInvolved, #Team {position: relative; top: -80px;}
#Solutions{position: relative; top: -10px;}
#Partners {position: relative; top: -40px;}
.section 	{display: block;}

.innerWrap    {width: 75%; max-width: 1200px; margin: 0 auto; border: solid 0px cyan;}
.flexBoxWrap  {display: flex;}
.flexBox1     {margin: 10px; font-size: 0.8em;}

.darkRed {display:inline !important; width: auto !important; font-weight: 600; color:#C00;}



/* Section 1 */
#Home   {padding: 200px 0 90px 0; text-align: center; color: #fff; background: url(../img/banner.jpg) center top #051b30; background-size: cover; background-attachment: fixed;}
#Home   h2{margin: -15px 0 30px 0; font-size:0.8em;}
#Home h4 {max-width: 420px; margin: 0 auto;padding: 10px 20px;background: #ffffff2e; border: dotted 1px #fff;}
#logo2	{width: 80%; max-width: 384px; height: auto;}


#tipsMp4 {width:720px; height: auto; margin: 0 auto;}
#tipsMp4 video {width: 100%; height: auto;}
#youtube {width: 560px; height: 315px; margin: 0 auto;}



/* Mission Sec */
#ourMission 		{background: url(../img/Clanity-world-map.svg) #d7efd9 center top no-repeat;background-size: cover;background-position-y: -100px;}
#missionDiv     {margin: 0 auto; width: 75%; max-width: 1020px ; text-align: center; border: solid 1px #d7efd9;}
.p1             {font-size: 1.5em;}
#isometric      {position: relative; top: 35px; width: 753px; height: 324px; margin:-35px auto 0 auto; background: url(../img/Clanity-Network.png) center top; background-size: cover; overflow: visible;}



/* Section Token */
#sectionToken     {margin:-70px auto 60px auto; text-align: center;}
#sectionToken h1  {margin:3px auto;}
#sectionToken span {display: inline-block; width: 90%; margin: 0 auto; font-size: 1.3em;}
#sectionToken sup  {font-size: 17px; text-decoration: underline;}
#tokenDiv {width: 180px;height: 180px;margin: 0 auto;background: white;border-radius: 50%;}
#tokenDiv img {position: relative; top: 17px;}
#tokenFaqWrap   {margin: 0 auto; width: 80%; max-width: 650px !important;text-align: left;}
#tokenFaqWrap h2{padding-top:30px; border-top: dotted 1px #aaa;}
.tokenBtn       {position: relative; padding: 6px 24px;color:#FFF;font-size: 1.2em;background:#4b98cf;border-bottom:3px solid #2e7cb4;border-radius: 3px; cursor: pointer; text-decoration: none;}
.tokenBtn:hover {background:#5cb6f7; color: #fff;border-bottom: 3px solid #3d9add;}
#blockpass-kyc-connect {top: 10px;}

#sectionToken table   {position:relative; text-align: center;font-size: 0.8em; background: #ebebeb;}
#sectionToken table td{padding: 8px 10px; background: #fff;}
.row1                 {font-weight: 600; color: #888; background: #f8f8f8 !important;}

.faqLink      {position:relative;bottom:1px;padding:2px 8px 3px 8px;font-size:0.8em;text-decoration:none;color:#FFF;background:#26a576;border-radius:3px;cursor:pointer;}
.faqLink:hover{color: #fff;background: #26cf90;}

#tokenFaqs_dl dt, #tokenFaqs_dl dd {padding: 0 0 0 30px;}
#tokenFaqs_dl dt {margin:0 0 30px 0;font-size:1.3em;color:#4997cf;cursor:pointer;line-height:25px;background:url(../img/plus.png) no-repeat left;background-size:15px;transition:all ease-out 0.5s;}
#tokenFaqs_dl dd {margin:-20px 0 20px 0; font-size:1em;}
#tokenFaqs_dl .expanded_image {background: url(../img/minus.png) no-repeat left; background-size: 15px; transition: all ease-out 0.5s;}


/* sectionNFT  */
#sectionNFT   {padding: 60px 0; background:#e4eff3 /*url(../img/platform-bg1.jpg) center top */; background-size: cover;}
#sectionNFT a {text-decoration: none; color: #fff;}

#nftWrap span {font-size: 1.4rem; text-align: center;}
#nft0 {display: block;}
#nft1 {margin: 0 8px 0 0;}
#nft2 {}
#nft3 {display: block; margin-bottom: 20px; }

#nftWrap          {max-width: 1000px; margin: 0 auto;}
#nftMovieWrap     {display: flex; margin: 40px auto 60px auto; text-align: center;}
#nftMovieWrap div {width: 49%; margin: 0 auto;}
.videoTD    {height: 300px;}
#cardVideo  {width: 170px;}
#coinVideo  {width: 190px;}
.nftBtn       {position: relative; padding: 6px 24px;color:#FFF;font-size: 1.2em;background:#26a576;border-bottom:3px solid #078757;border-radius: 3px; cursor: pointer; text-decoration: none;}
.nftBtn:hover {background: #26cf90; color: #fff;border-bottom: 3px solid #26a576;}


#nftFaqWrap   {max-width: 700px; margin: 0 auto;}
#nftFaqWrap h2{padding-top:30px; border-top: dotted 1px #aaa;}

#sectionNFT table {border: solid 5px #000; border-radius: 15px; font-size: 0.7rem;}
#sectionNFT table tr td {text-align: center;}
#sectionNFT h3 {position: relative; top: 15px; color:#4997cf;font-size: 1.2rem;}
#sectionNFT h4 {margin:5px 0 0 0;color: #6b9abb; font-size: 1rem;}

#nftFaqs_dl dt, #nftFaqs_dl dd {padding: 0 0 0 30px;}
#nftFaqs_dl dt {margin:0 0 30px 0;font-size:1.3em;color:#4997cf;cursor:pointer;line-height:25px;background:url(../img/plus.png) no-repeat left;background-size:15px;transition:all ease-out 0.5s;}
#nftFaqs_dl dd {margin:-20px 0 20px 0; font-size:1em;}
#nftFaqs_dl .expanded_image {background: url(../img/minus.png) no-repeat left; background-size: 15px; transition: all ease-out 0.5s;}


/* Section 2 solution */
#section2	{padding: 60px 0 40px 0; background: url(../img/wave3source.svg) top right no-repeat;}

#section2 h3 {text-align: left; font-size: 1.2em; color: #4997cf;}
#section2 h4 {margin: -10px 0 6px 0;}

.problemDiv, .solutionDiv{position: relative; width: 100%; margin: 10px auto; padding: 20px;}

#section2BG {height: 200px; margin-top: -90px; background: url(../img/Wav2source.svg) bottom left no-repeat; background-position-y:12px;}



/* Section 3 Platform */
#section3	{padding: 40px 0 150px 0; background-color:#dfe3e6; background: url(../img/globe.png) #e2edf1; background-size:cover; background-attachment: fixed; background-position-y: -150px; background-repeat: no-repeat;}
.delighter h1, .delighter p {opacity: 0; transform: translatey(400%); transition: all .7s ease-out;}
.delighter.started h1, .delighter.started p {opacity: 1; transform: none; }

#section3 p {max-width: 800px; margin: 0 auto; font-size: 1.2em; text-align: center;}

.platformUl li {width: 380px; margin:20px auto 20px auto; padding: 20px 0; font-size: 1em; list-style: none; text-align: center; background: #ffffff80; border:solid 1px #fff;}

#platformBoxWrap{margin: 222px auto;}
.platformBox 	{position: relative; width:180px; padding: 15px; font-size: 0.8em; /*background: #ebf0f3;*/}
.platformBox i  {display: block; text-align: center; font-size: 4em;}
.platformBox i, .platformBox h3	{color: #777;}
.platformBox img {display: inherit; width: 80px; margin: 0 auto;}
#DataClanSvg {position: relative; top: 15px; width: 120px;}
#ClanSwapSvg {position: relative; top: 0px; width: 100px;}
#platBox1 {margin: 0 auto -230px auto; bottom: 230px;}
#platBox2 {right: 222px; margin-bottom: -230px;}
#platBox3 {left: 212px; margin-bottom: -25px;}
#platBox4 {left: 160px; margin-bottom: -230px; top: 30px;}
#platBox5 {right: 150px; top: 10px;}

.platformPie {width:200px; height:200px; margin: 0 auto;border-radius: 50%;background:#6cc06955;}
#logoC {position: relative; width: 148px;height: 150px;top: 25px; left: 25px;margin: 0 auto -134px auto;}




.delighter.right { transform:translate(-10%); opacity:0; transition: all .75s ease-out; }
.delighter.right.started { transform:none; opacity:1; }

.delighter.left { transform:translate(10%); opacity:0; transition: all .75s ease-out; }
.delighter.left.started { transform:none; opacity:1; }

.delighter.bottom { transform:translatey(300%); opacity:0; transition: all .75s ease-out; }
.delighter.bottom.started { transform:none; opacity:1; }

.delighter li { opacity: 0; transform: translatey(400%); transition: all .7s ease-out; }
.delighter.started li { opacity: 1; transform: none; }
.delighter.started li:nth-child(1) { transition: all .7s ease-out .1s; }
.delighter.started li:nth-child(2) { transition: all .7s ease-out .3s; }
.delighter.started li:nth-child(3) { transition: all .7s ease-out .5s; }
.delighter.started li:nth-child(4) { transition: all .7s ease-out .7s; }
.delighter.started li:nth-child(5) { transition: all .7s ease-out .9s; }
.delighter.started li:nth-child(6) { transition: all .7s ease-out 1.1s; }
.delighter.started li:nth-child(7) { transition: all .7s ease-out 1.3s; }
.delighter.started li:nth-child(8) { transition: all .7s ease-out 1.5s; }

.delighter.bottom { transform:translatey(300%); opacity:0; transition: all .75s ease-out; }
.delighter.bottom.started { transform:none; opacity:1; }



/* Section 4 Roadmap */
#Roadmap    {position: relative; top: -190px;}
#Tokenomics {position: relative; top: -77px;}
#section4	{padding: 20px 0 80px 0; background: url(../img/Wave-bottom-right-white.svg) bottom right no-repeat;}
#section4 h1  {position: relative; width: 160px; left: 140px; margin: 0 auto;}
#section4 p 	{max-width:950px; margin:0 auto; font-size: 1.2em; text-align: center;}
#section4 h3 	{margin:30px 0 0 0; font-size: 1.3em;}
#section4 h4  {position: relative; margin:0 0 0 0; bottom: 5px; font-size: 1.2em; color: #da4b9a;}
#section4 ul  {position: relative; z-index: 1;}
#section4 li  {margin: 0 0 25px 0;}
#ecosystemMin {display: none;}

#clouds {position: relative; width: 480px; margin: -83px auto 0 auto; right: 13px;}

#roadBar 	{position: relative; float: left; left: 50%; top: 60px; margin: 0 auto; width: 5px; height: 1090px; background:#4b98cf; z-index: 1;}
#rocket		{position: relative; width: 80px;height: 202px; margin: 0 auto -203px auto; right: 38px; bottom: 210px;}
.roadBarL, .roadBarR 	{position: relative; display: inline; clear: right; width: 25px; height: 5px; background:#4b98cf; z-index: 1;}
.roadBarL {float: right; right: 50%;}
.roadBarR {float: Left; left: 50%;}
#roadBar1 {top: 107px;}
#roadBar2 {top: 230px;}
#roadBar3 {top: 338px;}
#roadBar4 {top: 450px;}
#roadBar5 {top: 563px;}
#roadBar6 {top: 667px;}
#roadBar7 {top: 786px;}
#roadBar8 {top: 876px;}
#roadBar9 {top: 962px;}
#roadBar10{top: 1060px;}

#roadmapGraphic {position: relative; margin:40px auto 70px auto; z-index: 2; /* width:90%;  padding:100px 0; background-color: #c5c5c559; border: solid 1px #aaaaaa50;*/}
#roadmapGraphic div {position: relative; width: 200px; margin: 0 auto -20px auto; padding: 30px 5px; text-align: center; background: #fff; border: solid 1px #ddd;
-webkit-box-shadow: 1px 2px 18px 0px rgba(0,0,0,0.15);box-shadow: 1px 2px 18px 0px rgba(0,0,0,0.15);-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;}
.roadL	{border: solid 0px red; right:130px;}
.roadR 	{border: solid 0px green; left: 135px;}


.animation-element {opacity: 0; position: relative;}
/*animation element sliding left*/

.animation-element.slide-left {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(50px, 0px, 0px);
  -webkit-transform: translate3d(50px, 0px, 0px);
  -o-transform: translate(50px, 0px);
  -ms-transform: translate(50px, 0px);
  transform: translate3d(50px, 0px, 0px);
}

.animation-element.slide-right {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(-50px, 0px, 0px);
  -webkit-transform: translate3d(-50px, 0px, 0px);
  -o-transform: translate(-50px, 0px);
  -ms-transform: translate(-50px, 0px);
  transform: translate3d(-50px, 0px, 0px);
}

.animation-element.slide-up {
  opacity: 1;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(0px, 100px, 0px);
  -webkit-transform: translate3d(0px, 100px, 0px);
  -o-transform: translate(0px, 100px);
  -ms-transform: translate(0px, 100px);
  transform: translate3d(0px, 100px, 0px);
}

.animation-element.slide-1 {
  opacity: 0;
  -moz-transition: all 700ms linear;
  -webkit-transition: all 700ms linear;
  -o-transition: all 700ms linear;
  transition: all 700ms linear;
  -moz-transform: translate3d(0px, 60px, 0px);
  -webkit-transform: translate3d(0px, 60px, 0px);
  -o-transform: translate(0px, 60px);
  -ms-transform: translate(0px, 60px);
  transform: translate3d(0px, 60px, 0px);
}

.animation-element.slide-2 {
  opacity: 0;
  -moz-transition: all 700ms linear;
  -webkit-transition: all 700ms linear;
  -o-transition: all 700ms linear;
  transition: all 700ms linear;
  -moz-transform: translate3d(90px, 20px, 0px);
  -webkit-transform: translate3d(90px, 20px, 0px);
  -o-transform: translate(90px, 20px);
  -ms-transform: translate(90px, 20px);
  transform: translate3d(90px, 20px, 0px);
}

.animation-element.slide-3 {
  opacity: 0;
  -moz-transition: all 700ms linear;
  -webkit-transition: all 700ms linear;
  -o-transition: all 700ms linear;
  transition: all 700ms linear;
  -moz-transform: translate3d(-90px, 20px, 0px);
  -webkit-transform: translate3d(-90px, 20px, 0px);
  -o-transform: translate(-90px, 20px);
  -ms-transform: translate(-90px, 20px);
  transform: translate3d(-90px, 20px, 0px);
}

.animation-element.slide-4 {
  opacity: 0;
  -moz-transition: all 700ms linear;
  -webkit-transition: all 700ms linear;
  -o-transition: all 700ms linear;
  transition: all 700ms linear;
  -moz-transform: translate3d(-60px, -90px, 0px);
  -webkit-transform: translate3d(-60px, -90px, 0px);
  -o-transform: translate(-60px, -90px);
  -ms-transform: translate(-60px, -90px);
  transform: translate3d(-60px, -90px, 0px);
}

.animation-element.slide-5 {
  opacity: 0;
  -moz-transition: all 700ms linear;
  -webkit-transition: all 700ms linear;
  -o-transition: all 700ms linear;
  transition: all 700ms linear;
  -moz-transform: translate3d(60px, -90px, 0px);
  -webkit-transform: translate3d(60px, -90px, 0px);
  -o-transform: translate(60px, -90px);
  -ms-transform: translate(60px, -90px);
  transform: translate3d(60px, -90px, 0px);
}

.animation-element.slide-left.in-view, .animation-element.slide-right.in-view, .animation-element.slide-up.in-view, .animation-element.slide-1.in-view, .animation-element.slide-2.in-view, .animation-element.slide-3.in-view, .animation-element.slide-4.in-view, .animation-element.slide-5.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}

.animation-element.grow-left, .animation-element.grow-right {opacity: 0; -moz-transition: all 700ms linear; -webkit-transition: all 700ms linear; -o-transition: all 700ms linear; transition: all 700ms linear;}
.animation-element.grow-left.in-view, .animation-element.grow-right.in-view {opacity: 1;}

.animation-element.scaleWide 	{transform: scaleX(0); opacity: 1; -moz-transition: all 1000ms cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition: all 1000ms cubic-bezier(0.4, 0, 0.2, 1); -o-transition: all 1000ms cubic-bezier(0.4, 0, 0.2, 1); transition: all 1000ms cubic-bezier(0.4, 0, 0.2, 1); }
.animation-element.scaleWide.in-view 	{transform: scaleX(1); opacity: 1;}

.animation-element.visible	{opacity: 0; display: none; -moz-transition: all 500ms linear; -webkit-transition: all 500ms linear; -o-transition: all 500ms linear; transition: all 500ms linear;}
.animation-element.visible.in-view 	{opacity: 1; display: inline-block;}




@keyframes bake-pie {
  from {
    transform: rotate(0deg) translate3d(0,0,0);
  }
}

main {width: 100%;margin: 30px auto;text-align: center;}
section {margin-top: 30px;}

.pieID {display: inline-block;vertical-align: middle;}
.pie {
  height: 200px;
  width: 200px;
  position: relative;
  margin: 0 30px 30px 0;
}
.pie::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  width: 100px;
  height: 100px;
  background: #FFF;
  border-radius: 50%;
  top: 50px;
  left: 50px;
}
.pie::after {
  content: "";
  display: block;
  width: 120px;
  height: 2px;
  background: rgba(0,0,0,0.1);
  border-radius: 50%;
  box-shadow: 0 0 3px 4px rgba(0,0,0,0.1);
  margin: 220px auto;
  
}
.slice {
  position: absolute;
  width: 200px;
  height: 200px;
  clip: rect(0px, 200px, 200px, 100px);
  animation: bake-pie 1s;
}
.slice span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-color: black;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  clip: rect(0px, 200px, 200px, 100px);
}
.legend {
  list-style-type: none;
  padding: 20px 30px 0 30px;
  margin: 0;
  font-size:0.8em;
  text-align: left;
  border: solid 0px #ddd;
}
.legend li {
  width: 170px;
  height: 1.25em;
  margin-bottom: 0.7em;
  padding-left: 0.5em;
  border-left: 1.25em solid black;
}
.legend em {font-style: normal;}
.legend span {float: right;}

#logoPie {position: relative;z-index: 2;float: left;width: 75px;top: 62px;left: 62px;}

#tokenBG {position: relative; float: left; right: 0px; z-index: 0; transform: scaleY(-1); margin: -272px 0 0px 0;}







/* Section 5 Partners */
#section5     {padding: 40px 0 60px 0; color:#fff; text-align:center;background: url(../img/digital-bg1.jpg) #051b30; background-size:cover; background-attachment:fixed;}
#section5 h1	{padding-bottom: 15px;}
#section5 img {width: 200px; height: 50px; margin: 0 auto 10px auto; /* filter: grayscale(100%); */}
/* #section5 a:hover img 	{filter: grayscale(0%); transition: 1s;} */

#section5 div {width:25%; max-width:250px;;display:inline-block;margin:0 6px 10px 0;padding:20px;min-height:175px;vertical-align:top;font-size:0.8em;background:#00000080;border:solid 1px #ffffff40;}
#section5 span{display: block; text-align:left;}




/* Section 5a Featured */
#section5a      {margin:50px auto 70px auto; max-width: 1500px; text-align: center;}
#section5a h1   {margin: 0 0 50px 0;}
#section5a img  {width: auto; height: 50px;}
#section5a div  {display: inline-block; margin: 30px 40px 40px 30px;}

#featured2 {height: 60px !important;}
#featured7 {height: 80px !important;}
#featured8 {height: 80px !important;}
#featured9 {height: 80px !important;}




/* Section 6 FAQ */
#section6		{padding: 10px 0 40px 0; background: url(../img/Top-wave-left.svg) #f4f4f4 top left no-repeat;}
#section6	h1{margin: 20px 0 -20px 0;}
#section6	h4{text-align: center; color: #999; font-size: 1.1em;}

#faqWrap		{width: 80%; max-width: 1200px; margin: 0 auto; position: relative; z-index: 1;}
#faqs_dl dt, #faqs_dl dd {padding: 0 0 0 30px;}
#faqs_dl dt {margin: 0 0 20px 0; font-size:1.3em; color: #4997cf; cursor: pointer; height: 37px; line-height: 37px;background: url(../img/plus.png) no-repeat left; background-size: 15px; transition: all ease-out 0.5s;}
#faqs_dl dd {margin:-20px 0 20px 0; font-size:1em;}
#faqs_dl .expanded_image {background: url(../img/minus.png) no-repeat left; background-size: 15px; transition: all ease-out 0.5s;}
.fa-times {color: #C00;}
.fa-check {color: #5fcf69;}

#section6 table	{text-align: center; font-size: 0.8em; max-width: 800px; background: #f8f8f8; border: solid 1px #aaa;}
#section6 table td {padding: 8px 0 8px 10px;}
.tdBorderRight	{border-right: solid 1px #ddd;}
.tdBorderBottom	{border-bottom: solid 1px #ddd;}
#chartTitleSup	{font-size: 1.3em;}
#chartTitle 	{font-size: 1.1em; font-weight: 600;text-transform: uppercase;}
.chartSec1		{font-weight: 600; text-transform: uppercase;}
.chartTxtLeft	{text-align: left;}

#section6BG   {height: 302px; margin-top: -250px; background: url(../img/Botttom-right-wave.svg) #f4f4f4 bottom right no-repeat;}



/* Section 6a Team */
#section6a      {margin: 30px 0 80px 0;}
#advisors       {width: 90%; margin: 0 auto; padding:0 0 20px 0;border-bottom: dotted 1px #999;}
#section6a h2   {margin:0;text-align: left;}
#section6a h3   {margin:0 0 10px 0;text-align: left; font-size: 1.1rem; font-style: italic; color: #999;}
.teamPic        {width: 155px; height: 155px; min-width: 155px; min-height: 155px; margin: 0 40px 0 0;}

.teamMemberWrap {display: flex; width: 90%; max-width: 1200px; margin:50px auto 60px auto;}
.teamLinks      {display: inline-block;margin: 15px 0 0 0; padding: 5px 10px; text-decoration: none; border: solid 1px #d2e8f7; color: #4997cf; background: #fff;}
.teamLinks:hover{color: #fff; background: #a0c7e3;}
.teamIcons      {display: block; width: 25px; height: 25px; margin: 10px 0 0 0;}




/* Section 7 Get Involved */
#section7	{padding: 40px 0; color:#fff; text-align:center; /*background: #dcdcdc;*/ background: url(https://clanity.com/img/banner.jpg) #051b30; background-size: cover; background-attachment: fixed;}
#section7 h1 {}
#section7 span {display: inline; font-size: 1em;}

#signupForm {width: 100%; height: 470px;}






/* Section 8 */
#section8			{padding: 80px 0; text-align:center; background: url(../img/Top-left-wave.svg) top left no-repeat;}
#section8 h1 	{font-size: 2em; display: inline;}
#section8 i 	{position: relative; bottom: 15px; margin: 0 5px;}
#section8 p 	{font-size: 1.5em; margin:0 0 50px 0;}
#section8 h1, #section8 h2, #section8 i, #section8 p {color: #999;}

#section8 div 					{display: inline-block; margin: 10px;}
#section8 div img 			{width: 100px; height: 100px; padding: 10px; filter: grayscale(100%);}
#section8 div img:hover	{filter: none; transition: 0.6s;}


/* Sections End */







/* Footer */
#footer 		{padding: 40px 0px 40px 0px; color: #aaa; background: url(../img/3b.jpg) center top /*#1f3042*/ #051b30; background-size: cover;}
#footerFoot {font-size: 0.7em; text-align: center; text-transform: uppercase; letter-spacing: 2px;}
#address    {font-size: 0.9em; text-align: center; letter-spacing: 1px;}

#footer .flexBoxWrap		{margin: 0 auto; max-width: 1200px;}
#footer .flexBoxWrap div{border: solid 0px red; width: 25%; margin: 0 auto 25px auto;}
#footMenu               {position: relative; left: 45px;}
#footQuote              {flex-grow: 1;}
#footQuote span         {line-height: 1.8em; font-size: 1.3em;}
#footQuote i            {margin: 0 10px; font-size: 1.2em;}

#footer h4 {color: #fff; text-transform: uppercase; letter-spacing: 1px;}
#footer ul {padding-inline-start: 0;}
#footer li {list-style: none; margin: 5px 0;}
#footer li a 			{color: #aaa; text-decoration: none;}
#footer li a:hover{color: #eee; transition: 0.5s;}
#footer li a:active	{color: #eee; text-decoration: none; background-color: transparent; border: none;} 

.whitePaper {display:inline-block; margin:10px auto 0 auto; padding:10px 20px; font-size:1.3em; color: #2776c1; background:#fff; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-bottom:solid 3px #00ddff; text-decoration: none;}
.clanBtnIcon{width: 20px; height: 20px; min-height: 20px; min-width: 20px; position:relative; top:2px;}

/* @media screen and (prefers-reduced-motion: reduce) {
	html {scroll-behavior: auto;}
} */







/* ////////////////////////   Responsive   ////////////////////////  */

@media all and (max-width: 1300px) {
#footQuote   {flex-grow: 0.9; right: 20px; position: relative;}
}

@media all and (max-width: 1200px) {
  nav ul li a {padding: 0 8px 27px 8px;}
}

@media all and (max-width: 1050px) {
  #nftWrap {width: 93%;}
}


@media all and (max-width: 999px) {
  #section8 h1 {font-size: 1.4em;}
  #section8    {background-size: 300px;}

  #footQuote span {line-height: 1.8em; font-size: 1.1em;}

  #footer     {padding: 40px 0px 80px 0px;}
}

@media all and (max-width: 950px) {
  #nftWrap span {font-size: 1.2rem;}
  .videoTD    {height: 230px;}
  #cardVideo  {width: 130px;}
  #coinVideo  {width: 130px;}
}


@media all and (max-width: 880px) {
  .innerWrap                {width: 80%;}

  #section2 {background-size: 200px;}
  #section2 .flexBoxWrap {flex-direction: column;}
  #section2BG {height: 150px; background-position-y: 55px; background-size: 300px;}
  .problemDiv, .solutionDiv{padding:0 0 20px; 0}

  #section3 {background-size:200%; background-position:50% -150px; }

  #section4 {background-size: 120px;}
  #tokenBG  {width: 300px; margin: -168px 0 0 0;}

  #section5 div {display: block; margin: 0 auto 15px auto; width: 60%; max-width: 300px;}

  #section7 span {display: block; font-size: 0.7em;}

  #footQuote   {flex-grow: 0.8; right: 0px;}
}

@media all and (max-width: 850px) {
  #nftWrap span {font-size: 1.3rem;}
  #nft1, #nft2 {display: block;}
  #nft3 {margin:5px auto 20px auto; font-size: 1.1em !important;}
}

@media all and (max-width: 770px) {
  #tipsMp4 {width:90%;}
  #isometric  {width:100%;}
}

@media all and (max-width: 740px) {
  #nftWrap div {flex-direction: column; width: 99%; margin: 20px auto 0 auto;}
  .nftBtn {top: -35px;}

  .videoTD    {height:300px;}
  #cardVideo  {width: 170px;}
  #coinVideo  {width: 190px;}

  #nftFaqs_dl dt {font-size: 1.2em; background-position: 0 5px;}
  #nftFaqs_dl .expanded_image {background-position: 0 5px;}
  
  .teamLinks {font-size: 0.9rem;}
}

@media all and (max-width: 700px) {
  header .logo  {left: calc(50% - 187px);}
  header h2     {left: calc(50% - 165px);}
  .downArrow    {left: calc(50% + -15px);}

  #sectionToken table     {font-size: 0.7em;}
  #sectionToken table td  {padding: 8px 5px;}
  #tokenFaqWrap   {width: 90%;}
  #tokenFaqs_dl dt{font-size: 1.2em; background-position: 0 5px;}
  #tokenFaqs_dl .expanded_image {background-position: 0 5px;}

  #section4 ul {padding-inline-start: 0px;}

  #section6 table {font-size: 0.7em;}
  
  .teamLinks {font-size: 0.8rem;}

  #section7 h1 {font-size: 1.5em;}

  #section8 h1 {font-size: 1.1em;}
  #section8    {background-size: 200px;}

  #footQuote   {flex-grow: 0.7;}

  #footerFoot span  {display: block; margin: 0 auto 5px auto;}
  #footBar          {display: none !important;}
}



@media all and (max-width: 650px) {
  #sectionToken h1  {font-size: 1.5em;}
  #sectionToken span{font-size: 1em;}

  #section3 .innerWrap  {text-align: center;}
  #section3 p           {margin: 0 auto 40px auto;}
  #ecosystemH1          {position: relative; z-index: 1; top: 35px; line-height: 30px;}
  #platformBoxWrap      {display: inline-block; margin:-100px auto 1020px auto;}
  .platformBox          {width: 300px; right:35%; text-align: left; font-size: 1em;}
  .platformBox h3       {margin-bottom: 2px;}
  #ecosystemMin         {display: block; margin-top: 180px;}
  #ecosystemFull        {display: none;}
  #logoC                {left: 0px;}
  #ClanWalletSvg  {width: 100px;}
  #ClanSwapSvg    {width: 120px;}
  #ClanBuzzSvg    {width: 100px;}
  #PayClanSvg     {width: 100px;}
  #DataClanSvg    {width: 150px;}
}

@media all and (max-width: 580px) {
#youtube {width: 310px; height: auto;}
.teamMemberText {font-size: 0.9rem;}
.teamPic  {/*width: 100px; height: 100px;*/ margin: 0 20px 0 0;}

#address span {display: block;}
}


@media all and (max-width: 550px) {
  h5 {font-size: 0.6rem;}
  .innerWrap                {width: 75%;}

  #Home h4 {width:85%; padding: 10px 10px; font-size: 0.8em;}

  #sectionNFT {padding: 30px 0;}

  #section3 ul    {padding-inline-start: 0;}
  .platformUl li  {width: 90%; margin:20px auto 20px auto; padding: 20px 0;}

  #clouds {width: 95%; margin: -60px auto 0 auto; right: 2px;}
  #roadmapGraphic div {width: 150px; padding: 20px 5px; font-size: 0.8em;}
  .roadL  {border: solid 0px red; right:90px;}
  .roadR  {border: solid 0px green; left: 95px;}
  #roadBar  {height: 753px;}
  #roadBar1 {top: 94px;}
  #roadBar2 {top: 170px;}
  #roadBar3 {top: 250px;}
  #roadBar4 {top: 322px;}
  #roadBar5 {top: 400px;}
  #roadBar6 {top: 474px;}
  #roadBar7 {top: 552px;}
  #roadBar8 {top: 613px;}
  #roadBar9 {top: 670px;}
  #roadBar10{top: 723px;}

  #section4 {background-size: 90px;}
  #tokenBG  {width: 200px; margin: -112px 0 0 0;}

  #section5a div  {display:block; margin: 40px auto 60px auto;}
  #section5a img  {max-width: 250px; height: auto !important;}

  #faqWrap        {width: 90%;}
  #faqs_dl dd     {padding: 0;}
  #section6 table {font-size: 0.6em;}
  
  .teamMemberWrap {flex-direction: column;}
  .teamPic  {/*width: 150px; height: 150px;*/ margin: 0 auto 20px auto;}
  #section6a h2   {text-align: center;}
  #section6a h3   {margin: 0 0 20px 0; font-size: 0.9rem; text-align: center;}
  .teamMemberText {padding: 0 0 15px 0; border-bottom: dotted 1px #999;}
  .teamLinks {margin: 10px auto 0 auto;}
  .teamIcons {margin: 10px auto 0 auto;}

  #section7 h1 {font-size: 1.1em;}

  #section8 h1 {font-size: 0.9em;}
  #section8    {background-size: 150px;}

  #footer .flexBoxWrap      {flex-direction: column;}
  #footer .flexBoxWrap div  {width: 80%; text-align: center;}
  #footer li                {width: 50%;margin: 1px auto;padding: 10px 0;border-top: dotted 1px #ffffff25;}
  #footMenu                 {left: 0px; order: 2;}
  #footQuote                {flex-grow: 1; order: 1;}
}

@media all and (max-width: 525px) {
  #nftWrap span {font-size: 1.2rem;}
}


@media all and (max-width: 480px) {
  #nftWrap span {font-size: 1.1rem;}
  #nft3 {font-size: 0.9rem !important;}
}


@media all and (max-width: 450px) {
  #sectionToken h1   {font-size: 1.5em;}
  #sectionToken span {font-size: 1.1em;}
  #sectionToken table     {font-size: 0.6em; right: 20px;}
  #sectionToken table td  {padding: 6px 4px;}
  #tokenFaqs_dl dt{font-size: 1.1em;}

  #nft0 {display: block;}
  #nft1, #nft2 {display: inline;}
  .videoTD   {height:190px;}
  #cardVideo {width: 100px;}
  #coinVideo {width: 110px;}

  .platformUl li  {font-size: 0.9em;}

  #roadBar      {top: 44px;}
  #section4 h1  {margin: 0; left: -30px; font-size: 1.2em;}
}


@media all and (max-width: 400px) {
  header .logo  {width: 300px;left: calc(50% - 150px);}
  header h2     {font-size:0.7em;left: calc(50% - 137px);}
  .downArrow    {left: calc(50% + 1px);}

  .innerWrap    {width: 69%;}

  #Home h2        {margin: -1px 0 30px 0; font-size:0.7em;}
  #SIGNUP_HEADING span{display: block; font-size: 1.3em;}

  #missionDiv {margin: 0 auto; width: 90%; font-size: 0.7em;}
  #isometric  {height: 300px}

  #sectionToken ol {padding: 0; list-style-position: inside;}
  #sectionToken li {margin: 0 0 15px 0;}

  #section2 h3, #section2 h4 {text-align: center;}
  #section2 h4 {margin: -10px 0 13px 0;}
  .problemDiv, .solutionDiv {margin: 0px; padding:20px 0 20px 0;}
  .divider {margin: 20px auto;}

  #ecosystemH1    {top: 50px;}
  .platformBox    {width: 250px; right: 20%; margin-bottom: 20px; font-size: 0.9em;}
  .platformUl li  {font-size: 0.8em;}

  #section4      {overflow: hidden;}

  #section5 img {width: 100%; height: auto;}
  #section5 div {width:70%; margin:0 auto 10px auto;padding:20px;}

  #faqWrap        {width: 95%;}
  #section6 table {font-size: 0.5em;}

  #section7 h1 {font-size: 0.9em;}

  #section8 h2 {font-size: 1.1em;}

  #address    {font-size: 0.8em;}
  #footerFoot {font-size: 0.5em;}
}

@media all and (max-width: 358px) {

  h5 {font-size: 0.5rem;}
  #clouds {margin: -50px auto 0 auto; right: 0px;}
  #roadmapGraphic div {width: 125px; padding: 20px 5px;}
  .roadR  {left: 83px;}
  #roadBar  {height: 796px;}
  #roadBar1 {top: 98px;}
  #roadBar2 {top: 184px;}
  #roadBar3 {top: 261px;}
  #roadBar4 {top: 337px;}
  #roadBar5 {top: 420px;}
  #roadBar6 {top: 500px;}
  #roadBar7 {top: 587px;}
  #roadBar8 {top: 648px;}
  #roadBar9 {top: 706px;}
  #roadBar10{top: 766px;}
}