* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
#mainContent {
  display: flex;
  border: #2aa198 solid;
  padding: 10px;
  width: 90%;
  margin: 10px auto;
}
#tutVidTitle {
  font-family: 'arial narrow', sans-serif;
  font-weight: 100;
  background: #222024;
  color: #32a6da;
  padding: 5px;
  margin-top: 4px;
}
#videoSizer {
  flex: 2;
  width: 100%;
}
#videoWrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
}
iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}
#videoList {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 15px;
  background: #2aa198;
  margin: 0 5px;
  align-items: center;
}
#videoList a {
  text-decoration: none;
  font-family: 'arial narrow', sans-serif;
  color: black;
  display: block;
  padding: 10px;
  background: #ffffff;
  margin: 4px;
  width: 100%;
  transition: .4s;
  border: 1px white solid;
}
#videoList a:hover, #videoList a:active {
  color: #fff;
  background: gray;
  border: 1px black solid;
  text-shadow: .5px .5px black;
}
input:checked ~ a {
  color: #fff;
  background: #2aa198;
  border: 1px black solid;
  text-shadow: .5px .5px black;
}

@media screen and (max-width: 800px) {
  #mainContent {
    flex-direction: column;
  }
  #videoList {
    padding-top: 20px;
    margin: 5px 0;
  }
}
/*add css code*/
aney{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    margin: 0;
    padding: 0;
} 
aney li{
    list-style: none;
    margin: 0 5px;
}
aney li a .fa{
    font-size: 40px;
    color: #262626;
    line-height: 80px;
    transition: 0.5s;
    padding-right: 14px;
}
aney li a span{
    padding: 0;
    margin: 0;
    position: absolute;
    top: 30px;
    color: #262626;
    letter-spacing: 4px;
    transition: 0.5s;
}                                                                                               /*ontent: '';position: absolutetop:1left:-20height:10width:2background: #b1b1transform: transform: rotate(0deg) skewY(-45deg);aney li a:after {connt: ''position: absolute;bottom:-20pxleft:-10px;height:20px*/
aney li a {
    text-decoration: none;
    display:absolute;
    display:block;
    width:210px;
    height:80px;
    background: #fff;
    text-align:left;
    padding-left: 20px;
    transform: rotate(-30deg) skew(25deg) translate(0,0);
    transition:.5s;
    box-shadow: -20px 20px 10px rgba(0,0,0,.5);
  }
  aney li a:before {
    content: '';
    position: absolute;
    top:10px;
    left:-20px;
    height:100%;
    width:20px;
    background: #b1b1b1;
    transform: .5s;
    transform: rotate(0deg) skewY(-45deg);
  }
  aney li a:after {
    content: '';
    position: absolute;
    bottom:-20px;
    left:-10px;
    height:20px;
    width:100%;
    background: #b1b1b1;
    transform: .5s;
    transform: rotate(0deg) skewX(-45deg);
  }

    aney li a:hover{
      transform: rotate(-30deg) skew(25deg) translate(20px, -15px);
      box-shadow: -50px 50px 50px rgba(0,0,0,.5);
  }                                                                                               /*ontent: '';position: absolutetop:1left:-20height:10width:2background: #b1b1transform: transform: rotate(0deg) skewY(-45deg);aney li a:after {connt: ''position: absolute;bottom:-20pxleft:-10px;height:20px*/
  aney li:hover .fa{
color: #fff;
  }
  aney li a:hover span{
      color: #fff;
  }

  aney li:hover:nth-child(1) a{
      background: #5865F2;
  }
  aney li:hover:nth-child(1) a::before{
      background: #5865f4;
  }
  aney li:hover:nth-child(1) a::after{
    background: #5865F0;
}
/*2nd*/

aney li:hover:nth-child(2) a{
    background: #00aced;
}
aney li:hover:nth-child(2) a::before{
    background: #097aa5;
}
aney li:hover:nth-child(2) a::after{
  background:#53b9e0;
}
/* 3rd button*/
aney li:hover:nth-child(3) a{
    background: #dd4b39;
}
aney li:hover:nth-child(3) a::before{
    background: #b33a2b;
}
aney li:hover:nth-child(3) a::after{
  background:#e66a5a;
}
/* 4th botton*/
aney li:hover:nth-child(4) a{
    background: #229ED9;
}
aney li:hover:nth-child(4) a::before{
    background: #229ED9;
}
aney li:hover:nth-child(4) a::after{
  background:#229ED9;
}
/* 5th botton*/
aney li:hover:nth-child(5) a{
    background: #FFC300;
}
aney li:hover:nth-child(5) a::before{
    background: #FFC330;
}
aney li:hover:nth-child(5) a::after{
  background:#FFC350;
}
.container-timers{
    width: 40%;
}
.container-timers h1{
    text-align:  center;
    color: white;
    text-transform: uppercase;
    font-size: 1.8rem;
    position: relative;
    letter-spacing: 3px;
    padding-bottom: 2rem;
}
.container-timers h1::after{
    content: "IS STARTED";
    position: absolute;
    font-size: 0.8rem;
    top: -1.4rem;
    right: 5rem;
    background-color: #2aa198;
    color: white;
    padding: 3px;
}
.timers{
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.timers .timer{
    background-color: rgb(31, 22, 61);
    width: 150px;
    height: 150px;
    padding: 0.5rem;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.timers .timer::before{
    content: "";
        background-color: rgb(251, 156, 3);
        inset: 0px ;
        position: absolute;
        border-radius: 50%;
        z-index: 0;
        animation: animate 3s linear infinite none;
        transition: 1s;
}
.timers .timer div{
    position: relative;
    z-index: 100;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background-color: rgb(10, 6, 21);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}
.timers .timer div span{
    font-size: 40px;
    color: rgb(251, 156, 3);
    padding: 10px;
}

@keyframes animate {
    0%{
        transform: rotate(0deg);
        inset: 15px;
        
    }
    50%{
        transform: rotate(90deg);
        inset: 5px;
    }
    100%{
        transform: rotate(180deg);
        inset: 0px;
    }
}

@media only screen and (max-width: 640px) {
    .container-timers{
        width: 100%;
        padding-top: 100px;
        padding-bottom: 100px;
    }
    .timers{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}
/* Featured Sec */
.countsec {
    float: left;
    width: 100%;
    text-align: center;
    margin-top: 50px;
}
.countsec > h3 {
    float: left;
    width: 100%;
    font-size: 30px;
    color: #556bff;
    font-family: Barlow;
    font-weight: 500;
}
.countsec > p {
    float: left;
    width: 100%;
    font-size: 15px;
    color: #443c62;
    line-height: 30px;
    padding: 0 390px;
    letter-spacing: 0px;
    margin-bottom: 60px;
}
.countdown-soon {
    float: left;
    width: 100%;
    text-align: center;
    margin: 0;
}
.countdown-soon > li >  span{
    float: none;
    display: inline-block;
    margin: 0;
    width: 110px;
    height: 110px;
    text-align: center;
    
        background: rgb(250,57,102);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZhMzk2NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMyJSIgc3RvcC1jb2xvcj0iI2ZhMzk2NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiYzAyZTAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(left, rgba(250,57,102,1) 0%, rgba(250,57,102,1) 32%, rgba(188,2,224,1) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(250,57,102,1)), color-stop(32%,rgba(250,57,102,1)), color-stop(100%,rgba(188,2,224,1)));
    background: -webkit-linear-gradient(left,  rgba(250,57,102,1) 0%,rgba(250,57,102,1) 32%,rgba(188,2,224,1) 100%);
    background: -o-linear-gradient(left,  rgba(250,57,102,1) 0%,rgba(250,57,102,1) 32%,rgba(188,2,224,1) 100%);
    background: -ms-linear-gradient(left,  rgba(250,57,102,1) 0%,rgba(250,57,102,1) 32%,rgba(188,2,224,1) 100%);
    background: linear-gradient(to right,  rgba(250,57,102,1) 0%,rgba(250,57,102,1) 32%,rgba(188,2,224,1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#fa3966', endColorstr='#bc02e0',GradientType=1 );
    
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;

    position: relative;
    z-index: 0;
    font-size: 40px;
    color: #556bff;
    font-weight: bold;
    line-height: 107px;
}
.countdown-soon > li > span::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 106px;
    height: 106px;
    content: "";
    background: #ffffff;
    
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;

    left: 50%;
    top: 50%;
    
    -webkit-transform: translateY(-50%) translateX(-50%);
    -moz-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    -o-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);

    z-index: -1;
}
.countdown-soon > li {
    float: none;
    display: inline-block;
    width: 110px;
    margin: 0 15px;
}
.countsec .btns li {
    float: none;
    display: inline-block;
    margin: 0;
    margin-top: 20px;
}
.countsec .social {
    float: left;
    width: 100%;
    text-align: center;
    margin-top: 40px;
}
.countsec .social a {
    float: none;
    display: inline-block;
    margin: 0 10px;
    font-size: 21px;
    color: #8488c0;
}
.fcount .countdown-soon > li {
    float: none;
    width: 70px;
    margin: 0 5px;
}
.fcount .countdown-soon > li > span::before {
    display: none;
}
.fcount .countdown-soon > li > span {
    float: left;
    width: 70px;
    height: 70px;
    background: #ffffff;
    
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;

    font-size: 30px;
    font-family: Barlow;
    font-weight: 500;
    color: #2aa198;
    line-height: 70px;
    padding: 0;
}
.fcount .countdown-soon > li > p {
    float: left;
    width: 100%;
    font-size: 16px;
    color: #f8f9fa;
    font-family: barlow;
    text-transform: capitalize;
    margin: 0;
        margin-top: 0px;
    margin-top: 6px;
}
.fsec.s4 .finfos {
    padding: 0;
}
.prosec {
    float: left;
    width: 100%;
    padding: 0 13px;
    margin-top: 21px;
}
.prosec > span {
    font-size: 16px;
    color: #f8f9fa
    font-family: Barlow;
}
.prosec > p {
    font-size: 16px;
    color: #f8f9fa;
    font-family: Barlow;
    margin: 0;
}
.progresssec {
    float: left;
    width: 100%;
    background: #2aa198;
    height: 15px;
    
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    border-radius: 30px;

    margin-top: 11px;
    margin-bottom: 4px;
}
.rpogressbar {
    float: left;
    height: 15px;
    background: #ffc935;
    
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    border-radius: 30px;

}
.fcount .btns {
    float: left;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}
.fcount .btns li {
    float: none;
    display: inline-block;
    margin: 0;
}
.fcount .social {
    float: left;
    width: 100%;
    margin-top: 37px;
    text-align: center;
}
.fcount .social a {
    float: none;
    display: inline-block;
    font-size: 18px;
    color: #8488c0;
    margin: 0 10px;
}
.fsec.s4 .finfos > h3 {
    margin-top: -40px;
}
.fcount {
    float: left;
    width: 350px;
    margin-right: 80px;
    margin-top: 45px;
}
.fsec.s4 .finfos .theme-btn.blank {
    padding: 16px 42px;
}
.countsec.color > h3 {
    color: #ffffff;
}
.countsec.color > p {
    color: #c1c9ff;
}
.countsec.color .countdown-soon li span {
    color: #ffffff;
}
.countsec.color .countdown-soon li p {
    color: #ffffff;
}
.countsec.color .someblock li span, .countsec.color .someblock li p {
    color: #c1c9ff;
}
.partnersec.color > h3 {
    color: #ffffff;
}
.faqsec.color > h3 {
    color: #ffffff;
    margin-bottom: 80px;
}
.faqsec.color #toggle-widget h2 {
    background: #28276f;
    color: #ffffff;
}
.faqsec.color #toggle-widget h2.active {
    background: #ffffff;
    color: #32328e;
}
.faqsec.color #toggle-widget .content p {
    color: #c1c9ff;
}
.contactsec.color > h3 {
    color: #ffffff;
}
.contactsec.color .contactlists {
    padding: 0;
}
.contactsec.color .contactformsec {
    
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;

}
.contactsec.color .consec.s2 .contactformsec input, .contactsec.color .consec.s2 .contactformsec textarea {
    color: #c1c9ff !important;
    border-color: #5d5da2;
}
.bottomline.s2.color {
    border-top: 1px solid #58589d;
}
.bottomline.s2.color span {
    color: #c1c9ff;
}
header.flat {
    padding: 0;
}
.fsec.slice {
    padding: 0;
    margin-top: 180px;
}
.fcount.s2 {
    background: #2aa1987d;
    padding: 33px 20px;
    width: 380px;
    
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;

}
.fcount.s2 {

    float: left;
    width: 100%;
    text-align: center;
    color: #ffffff;
    font-family: Barlow;
    font-weight: 500;
    margin: 0;
        margin-top: 0px;
        margin-bottom: 0px;
    margin-bottom: 25px;
    font-size: 25px;
    margin-top: 6px;

    width: 400px;
}
.costb {
    float: left;
    width: 100%;
    margin: 0;
        margin-top: 0px;
    margin-top: 30px;
    padding: 0 12px;
}
.costb > li {
    float: left;
    width: 50%;
    text-align: left;
}
.costb > li > h3 {
    float: left;
    width: 100%;
    font-family: Barlow;
    color: #ffffff;
    font-size: 25px;
    font-weight: normal;
    margin: 0;
        margin-bottom: 0px;
    margin-bottom: 5px;
}
.costb > li > span {
    float: left;
    width: 100%;
    font-size: 16px;
    color: #2aa198;
}
.costb > li:last-child {
    text-align: right;
}
.fsec.slice .finfos > h3 {
    margin-top: -50px;
}
.clsec.s2 {
    padding: 0;
}
.sliceup {
    float: left;
    width: 100%;
    margin-top: 70px;
}
.block.sliceimg {
    padding-bottom: 320px;
}
.tokenfesec.s2.gapless {
    padding-left: 0;
}
.tokenfesec.s2.gapless .row > div {
    padding: 0 14px;
}
.nomargin {
    margin: 0;
}
.countdown-soon.sflat {
    float: none;
    display: inline-block;
    width: auto;
    background: #2aa198;
    
    -webkit-border-radius: 26px;
    -moz-border-radius: 26px;
    -ms-border-radius: 26px;
    -o-border-radius: 26px;
    border-radius: 26px;

    padding: 36px 0px;
    padding-bottom: 41px;
    margin-bottom: 40px;
}
.countdown-soon.sflat > li {
    margin: 0 20px;
}
.countdown-soon.sflat > li > span::before {
    display: none;
}
.countdown-soon.sflat > li > span {
    background: none;
    width: auto;
    height: auto;
    line-height: normal;
    color: #ffffff;
}
.countdown-soon.sflat > li > p {
    color: #556bff;
    margin: 0;
}