/*Typography*/
html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}
html {
    font: 16px 'Open Sans', sans-serif;
    -webkit-appearance: none; 
    background-image: url("/tb_media/fractured_background_bitcoin.jpg");
    background-size:cover;
    text-align:center;
}
body{
    /*background-image: linear-gradient(to top, #5ee7df 0%, #b490ca 100%);*/
    
    background:rgba(4,4,4,.7);
}
h1, h2, h3, h4, p{
    background: rgb(245,246,246);
    background: -moz-linear-gradient(top, rgba(245,246,246,1) 0%, rgba(219,220,226,1) 21%, rgba(184,186,198,1) 49%, rgba(221,223,227,1) 80%, rgba(245,246,246,1) 100%);
    background: -webkit-linear-gradient(top, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%);
    background: linear-gradient(to bottom, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=0 );
    border-radius:5px;
    padding:2%;
    margin: 2% auto;
    display:inline-block;
    text-align:justify;
}
h1 {
    font-size: 1.75em;
}
h2 {font-size: 1.5em;}
h3 {font-size: 1.25em;}
h4 {font-size: 1.1em;}
p {font-size: 1em;}
a{
    color:#FF9900;
}
/*Layout*/
body {color: #111;}
*,
*:before,
*:after {box-sizing: border-box;}
.line {
  float: left;
  width: 100%;
  border-top: .25em solid #444;
}
.wrapper {
  margin: auto;
  width: 60%;
  min-height:100%;
}
main{
    margin-top:10%;
}
header,
nav,
section,
footer {
  float: left;
  width: 100%;
  min-width:100%;
  max-width:100%;
  display:block;
}
a {
  text-decoration: none;
  transition: color .25s;
}
.button {
  display: block;
  padding: .75em 1.25em;
  font-size: 1em;
  font-weight: bold;
  text-transform: uppercase;
  background: #FF9900;
  color: #fff;
  border: 0;
  cursor: pointer;
}
.button:focus {
    background: darken(#FF9900, 7%);
}
.button:hover {
    background: darken(#FF9900, 7%);
}
.button:active {
    background: #FF9900;
}
.link {
  font-weight: bold;
  color: #FF9900;
}
.link:focus{
    color: darken(#FF9900, 10%);
}
.link:hover {
    color: darken(#FF9900, 10%);
}
.link:active {
    color: lighten(#FF9900, 5%);
}
/*Navigation*/
nav h1 {
  float: left;
  padding: .25em .25em 0 0;
  margin:0;
  font-size: 2.5em;
  text-transform: uppercase;
  height:47px;
  width:47px;
  margin-left:3%;
  background:transparent;
}
nav h1 a {color: #FF9900;}
nav a{
    max-width:100%;
}
nav a img{
    width:100%;
}
.nav-ul {
  display: flex;
  list-style: none;
  max-width:80%;
}
header .nav-ul{
    margin: 0 auto;
}
header li {width: 20%;}
header li:not(:first-child) {margin-left: 2%;}
header .nav-ul a {
  display: block;
  padding: 1em .5em;
  font-size: 1em;
  text-align: center;
  text-transform: uppercase;
  color: #eee;
  font-weight:bold;
}
header .nav-ul a:focus{
    color: #FF9900;
}

header .nav-ul a:hover {
    color: #FF9900;
}
header{
    padding:1%;
    margin-bottom:3%;
    background:#333;
    text-align:center;
}

/*Footer*/
footer {
  padding: 1% 0;
  width: 100%;
  text-align: center;
  background: #eee;
}
footer .nav-ul {
    justify-content: center;
    margin:auto;
    margin-bottom: 1em;
    padding:0;
}
footer li:not(:first-child) {margin-left: .75em;}
footer li:first-child a {color: #333;}
footer a {
  font-size: 1em;
  font-weight: bold;
  color: #555;
}
footer .social-ul{
    display: flex;
    list-style: none;
    justify-content:center;
    padding:0;
}
.social-ul li{
    max-width:250px;
}
footer a:focus, :hover {color: #333;}
.copy {font-size: .85em;}
.copy a{font-size: .75em;
font-weight:lighter;
color:#222;
}
.cta{
    width:40%;
    font-size:1.5em;
    border-radius:15px;
    margin: 30px auto 30px auto;
    text-align:center;
    border:2px solid #fff;
}
.cta:hover{
    background:#5EAB24;
}
/*form styling*/
input{
    width:60%;
    margin: 2% auto;
    font-size:1.1em;
    border-radius:5px;
    padding:10px;
}
.warning{
    display:none;
    font-size:.9em;
    color:red;
    line-height:16px;
    margin-top:-16px;
    background:#fff;
    border-radius:4px;
    padding:1px;
}

/*individual pages*/

.homepagecontainer{
    text-align:center;
}

.guidewrapper{
    width:60%;
    margin: 4% auto;
    background: #555;
    background-position: top center;
    padding: 10px 0px 10px 0px;
    -webkit-box-shadow: 9px 9px 260px 30px rgba(0,0,0,0.75);
    -moz-box-shadow: 9px 9px 260px 30px rgba(0,0,0,0.75);
    box-shadow: 9px 9px 260px 30px rgba(0,0,0,0.75);
    border-radius:20px;
}

/*Responsive*/

@media only screen and (min-width : 1126px) and (max-width : 1625px) {
    html {font-size: 14px;}
    .wrapper{width:90%;max-width:100%;margin:auto;text-align:center;}
    .cta{
        width:70%;
        -webkit-appearance: none;
    }
}
@media only screen and (min-width : 320px) and (max-width : 1125px) {
    html {font-size: 12px;}
    .wrapper{width:90%;max-width:90%;margin:auto;text-align:center;}
    footer .social-ul{
        display:block;
        text-align:center;
        margin: 10px auto 10px auto;
    }
    footer .social-ul li{
        display:block;
        text-align:center;
        margin: 10px auto 10px auto;
    }
    .cta{
        width:80%;
        -webkit-appearance: none;
    }
    header .nav-ul{
        margin: 2% 0 0 0;
    }
    .guidewrapper{
        margin-top:30%;
        width:85%;
        padding:3%;
    }
    input{
        width:80%;
        margin: 2% auto;
        font-size:1.1em;
        border-radius:5px;
        padding:10px;
        -webkit-appearance: none;
    }
    main{
        margin-top:25%;
    }
}