body{
  padding:0;
  margin:0;

  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size:1em;

  background-color:#fff;
}









.fp-bg{
  box-sizing:border-box;

  height:100vh;
  padding-top:5vh;

  background-attachment: fixed;
  background-image:url('../img/lightbg2.png');
  background-repeat:no-repeat;
  background-size: cover;
  background-position:center;
}

@keyframes float{
  0% {
    transform: translatey(0px);
    border-top-color:rgba(255,255,255,1);
  }
  50% {
    transform: translatey(-20px);
    border-top-color:rgba(255,255,255,0.1);
  }
  100% {
    transform: translatey(0px);
    border-top-color:rgba(255,255,255,1);
  }
}

.fp-bg::after{
    content: '';
    position: absolute;
    left: calc(50% - 20px);
    top: calc(95vh - 80px);
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid rgba(255,255,255,1);;
    clear: both;

    transform: translatey(0px);
    animation: float 4s ease-in-out infinite;
}








#topNav{
  height:160px;
}

#leftNav{
  box-sizing:border-box;
  width:50%;
  float:left;
  padding:50px 120px 50px 0px;
}

#rightNav{
  box-sizing:border-box;
  width:50%;
  float:right;
  padding:50px 0px 50px 120px;
}

#topNav ul{
  margin:0;
  padding:0;
  list-style-type:none;
}

#topNav ul li{
  display:inline-block;
}

#rightNav ul li{ float:left; }
#leftNav ul li{ float:right; }

#topNav ul li a{
  box-sizing:border-box;
  display:inline-block;
  text-decoration:none;
  height:60px;
  line-height:60px;
  color:#fff;
  font-size:14pt;
  padding:0 20px;
  border-bottom:2px solid rgba(255,255,255,0);
}

#topNav ul li a{
  transition:border 0.2s;
}

#topNav ul li a:hover{
  transition:border 0.07s;
  border-bottom:2px solid rgba(255,255,255,1);
}

#topNav ul li a#on-page{
  border-bottom:2px solid rgba(255,255,255,1);
}













#fp-intro{
  margin-top:calc(40vh - 180px);
  text-align:center;
  color:#fff;
  font-size:24px;
}

#fp-intro h1{
  font-weight:300;
  font-size:2.5em;
  margin:0;
}


#fp-intro h2{
  margin:0;
  font-weight:300;
  font-size:1em;
}

#fp-intro h3{
  margin:0;
  font-weight:400;
  font-size:0.75em;
}

#fp-intro h4{
  margin:0;
  font-weight:200;
  font-size:0.40em;
}

#fp-intro a{
  color: white;
}













.sect{
  position:relative;
  box-sizing:border-box;
  padding:10vh 10vw;
  background-color:#fff;
  color:#545454;
  font-size:16px;
}

.sect div:last-child{
  margin-bottom:0;
}

.trans{
  background-color:#42A1DA;
}

.sect.secondarypage{
  padding:5vh 10vw;
}

.center{
  width:100%;
  max-width:800px;
  margin:0 auto;
}

.sect .center h1{
  font-weight:400;
  font-size:2em;
}

.youtubevideo{
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  margin-bottom:10vh;
}

.youtubevideo iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}








#logo{
  background-image:url('../img/logo.png');
  background-repeat:no-repeat;
  background-position:center 0;
  background-size:160px;
  height:160px;
}

.nav-toggle{

}

.nav-toggle:after {
  content: "";
  display: table;
  clear: both;
}

.nav-label {
  box-sizing:border-box;
  text-align:left;
  width:100%;
  height:56px;
  line-height:56px;
  padding-left:16px;
  color:#fff;
  cursor: pointer;
  display: none;
  float:right;
  background-image:url('../img/menuicon.png');
  background-repeat:no-repeat;
  background-position:calc(100% - 20px) 50%;
}

.nav-input {
  /* Hide the input element */
    display: none;
}

@media only screen and (max-width : 920px) {

  .nav-label{ display: block; padding:0; }

  .nav-input:not(checked) ~ #topNav { display: none; }

  .nav-input:checked ~ #topNav { display: inline-block; }


  #leftNav{
    width:100%;
    float:left;
    padding:0;
  }

  #rightNav{
    width:100%;
    float:left;
    padding:0;
  }

  #topNav ul{
    width:100%;
  }

  #topNav ul li{
    width:100%;
    float:left;
  }

  #topNav ul li a{
    background-color:#fff;
    color:#666;
    width:100%;
    padding:0 20px;

    border-bottom:none;
  }

  #topNav ul li a:hover{ border-bottom:none; }

  #fp-intro{ font-size: 22px; }
}














.fp-bg-small{
  box-sizing:border-box;

  height:250px;
  padding-top:5vh;

  background-attachment: fixed;
  background-image:url('../img/lightbg2.png');
  background-repeat:no-repeat;
  background-size: cover;
  background-position:center;
}

#topNav ul li a.highlight{
  border-bottom:2px solid #fff;
}









#footer{
  box-sizing:border-box;
  padding:10vh 10vw;
  background-color:#fff;
  color:#545454;
  font-size:16px;
}

#footer-social{
  margin-bottom:10vh;
}

#footer-social:after {
  content: "";
  display: table;
  clear: both;
}

#footer-social a{
  box-sizing:border-box;

  float:left;
  width:calc(25% - 16px);
  text-align:center;
  text-decoration:none;
  color:rgba(0,0,0,0.5);

  padding-top:96px;
  padding-bottom:16px;
  margin:0 8px;
  border-radius:4px;

  background-repeat:no-repeat;
  background-position:50% 16px;
  transition:background-color .2s ease;
}

#footer-social a:hover{
  transition:background-color .07s ease;
  background-color:rgba(0,0,0,0.07);
}

#footer-social-reddit{ background-image: url('../img/icon-reddit.png'); }
#footer-social-bitcoin{ background-image: url('../img/icon-bitcointalk.png'); }
#footer-social-twitter{ background-image: url('../img/icon-twitter.png'); }
#footer-social-slack{ background-image: url('../img/icon-slack.png'); }

#footer-box{
  max-width:300px;
  margin:0 auto;

  padding-left:64px;
  text-align:left;
  color:rgba(0,0,0,0.5);
  background-position:0 0;
  background-size:contain;
  background-repeat:no-repeat;
  background-image:url('../img/logo_bw.png');
}

@media only screen and (max-width : 920px) {

  #footer-social a{
    width:calc(50% - 16px);
    margin-bottom:8px;
  }

  #footer-box{
    padding:74px 0 0 0;
    background-position:50% 0;
    background-size:64px;
    text-align:center;
  }

}










/* 

    Whitepaper page 

*/

#whitepaper-box{
  display:block;
}

#whitepaper-dl{
  box-sizing:border-box;
  display:block;
  background-color:#FFF;
  text-decoration:none;
  color:#545454;
  text-align:center;
  padding:80px 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  font-weight:400;
  font-size:2em;
  border-radius:4px;
}

#whitepaper-dl:hover{ background-color:#EEEEEE; }


/* 

Text Section Styling 

*/



.textsect{
  text-align:center;
  margin-bottom:10vh;
}

.textsect.justify p{
  text-align:justify;
}

.trans .textsect{
  color:#fff;
}

.textsect h1{ margin:0 0 20px 0; }
.textsect p{ 
  margin:0; 
  text-align:center;
}

.textsect a{
  color:#545454;
  font-weight:bold;
  text-decoration:none;
}

.textsect b{
  font-size:1.1em;
  display:block;
  margin-bottom:20px;
}

.textsect a:hover{
  text-decoration:underline;
}


/*************************************************************************************


      Page-specific styling


*************************************************************************************/

.reglink{
  display:block;
  background-color:#42A1DA;
  box-sizing:border-box;
  text-decoration:none;
  text-align:center;
  color:#fff;
  padding:5vh;
  border-radius:4px;
}

.reglink:hover{
  background-color:#208DCD;
}

/* 

  Tutorial Styling

*/



.tutorial-link{
  position:relative;
  background-color:#42A1DA;
  color:#FFF;

  background-position:16px 50%;
  background-size:32px;
  background-repeat:no-repeat;
  background-image:url('../img/tutorial-written.png');

  display:block;
  box-sizing:border-box;

  text-decoration:none;
  text-align:center;
  padding:2vh;

  margin-bottom:8px;

  width:100%;
  bottom:0;
  top:0;
  transition:0.2s;
}

.tutorial-link.video{
  background-image:url('../img/tutorial-video.png');
}

.tutorial-link:hover{
  transition:0.07s;
  background-color:#208DCD;
}

@media only screen and (max-width : 920px) {

  .tutorial-link{
    background-position:50% calc(1vh + 16px);
    padding:calc(2vh + 64px) 2vh 2vh 2vh;
  }

}



/* 

  Roadmap Styling

*/



.roadmap{
  font-size:16px;
  background-color:#EEEEEE;
  margin-bottom:10vh;
  border-radius:4px;
}

.roadmap ul{
  margin:0;
  padding:0;
  list-style-type:none;
}

.roadmap ul li{
  display:block;
  box-sizing:border-box;
  padding:40px 20px 40px 20px;
  position:relative;
  border-bottom:1px solid rgba(0,0,0,0.1);
  text-align:center;
}

.roadmap ul li.complete{
  background-color:#fff;
}

.roadmap ul li.downarrow::after{
  content: '';
  position: absolute;
  left: calc(50% - 100px);
  bottom: -21px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 100px 0 100px;
  border-color: #fff transparent transparent transparent;
}

.roadmap ul li.complete::after{ bottom:-20px; }
.roadmap ul li:first-child{ border-radius: 4px 4px 0 0; }
.roadmap ul li:last-child{ border-bottom:none; }
.roadmap ul li:last-child::after{ border:none; }
.roadmap ul li.complete::after{ border-color: #fff transparent transparent transparent; }


.roadmap .date{
  /* Date */
  display:block;
  font-weight:600;
  margin-bottom:8px;
}



/* 

  Facts Styling 

*/



.facts{
  font-size:16px;
  margin-bottom:10vh;
}

.facts-col{ 
  margin-bottom:5vh;
}

.facts-col:last-of-type{ 
  margin-bottom:0; 
}

.facts-col.trip .facts-item{ 
  /* Triple items */
}

.facts-col.dubs .facts-item{ 
  /* Double items */
  margin:0 calc(33.33%/4); 
}

.facts-col:after {
  content: "";
  display: table;
  clear: both;
}

.facts-item{
  width:33.33%; 

  padding:42px 10px 10px 10px;
  box-sizing:border-box;
  display:inline-block;
  float:left;
  text-align:center;

  background-image:url('../img/logo.png');
  background-repeat:no-repeat;
  background-position:50% 0;
  background-size:32px;
}

#fact-initialsupply{ background-image:url('../img/icon_2.png'); }
#fact-burn{ background-image:url('../img/icon_5.png'); }
#fact-roadmap{ background-image:url('../img/icon_1.png'); }
#fact-erc{ background-image:url('../img/icon_3.png'); }
#fact-heart{ background-image:url('../img/icon_4.png'); }

@media only screen and (max-width : 920px) {

  .facts-col.trip .facts-item{ 
    width:100%; 
    margin:0 0 20px 0;
  }

  .facts-col.dubs .facts-item{ 
    width:100%; 
    margin:0 0 20px 0;
  }
  .facts-col{ margin-bottom:0; }

  .facts-item{ 
    width:100%;
    margin:0 0 20px 0;
  }

}

.facts-item-title{
  font-weight:600;
  font-size:1.2em;
  height:32px;
}

.facts-item-content{
  font-size:1em;
}











/* 

  Tut

*/

.step{
  margin-bottom:60px;
}

.step-heading{
  border-bottom:1px solid rgba(66,162,218,1);
  cursor:default;
}

.step-heading-number{
  display:inline-block;
  background-color:rgba(66,162,218,1);
  font-size:1.4em;
  padding:8px 16px;
  color:#fff;
}

.step-heading-text{
  display:inline-block;
  font-size:1.4em;
  color:rgba(66,162,218,1);
  margin-left:12px;
  box-sizing:border-box;
  position:relative;
  font-weight:700;
}


.step p{
  text-align:justify;
}


.step a{
  text-decoration:none;
  color:rgba(66,162,218,1);
  padding:0 4px;
  border-radius:4px;
  position:relative;
  font-weight:700;

}

.step a:hover{
  color:#fff;
  background-color:rgba(66,162,218,1);
}

.step img{
  width:100%;
  box-shadow:0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);
  box-sizing:border-box;
}