/* CASH Logo */
header h1.logo{
    margin:0 0 0 70px;
    padding:0;
    line-height: 35px;
    font-size: 35px;
    display: inline-block;
}

header a{
  color:#fff;
}

.watt header h1.logo{
    margin:0 0 0 132px;
}

header h1.logo span{
    display: none;
}

header #collapsed h1.logo{
  margin-top:10px;
}

/* Platform call to action */
header #platform-signup{
    position: absolute;
    top:13px;
    right:30px;
    font-size: 11px;
}
header #platform-signup span{
    margin:0 10px;
}
header #platform-signup a{
  display: inline-block;
  text-decoration: underline;
}
header #platform-signup a.login{
    text-decoration: none;
    border:solid 3px #fff;
    padding:5px 18px;
}

header #platform-signup a.login:hover{
	background:#fff;
	color:#222;
}

/* Fixed header  */
header #constant{
    width:100%;
    max-width:1350px;
    position: absolute;
    top:0;
    min-height:68px;
    z-index: 50;
    -webkit-overflow-scrolling: touch;
}

/* Headers */
header #constant #top, header #constant #collapsed{
    margin:0;
    padding:15px 0 0 0;
    position: relative;
    z-index: 2;
    -webkit-transform: translate3d(0,0,0);
}

header #constant #top{
	border-bottom: solid 1px rgba(34,34,34,0.2);
  padding:10px 0;
  width: 100%;
	color:#fff;
  max-width: 1350px;
}

header #constant #top{
	background-size: 100%;
	border: none;
	background:#fe5c71 url('https://static-cashmusic.netdna-ssl.com/www/img/constant/texture/header.jpg') 0% 0%;
	background-attachment: fixed;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

header #constant #top:before{
	content:"";
	position: absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	display: block;
	z-index: -1;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff475b+0,802fc6+100&0.9+0,0.9+100 */
	background: -moz-linear-gradient(left,  rgba(255,71,91,0.9) 0%, rgba(128,47,198,0.9) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(255,71,91,0.9) 0%,rgba(128,47,198,0.9) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(255,71,91,0.9) 0%,rgba(128,47,198,0.9) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6ff475b', endColorstr='#e6802fc6',GradientType=1 ); /* IE6-9 */
}

.watt header #constant #top, header.platform #constant #top{
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0);
}

.watt header #constant #top:before, header.platform #constant #top:before{
	background:transparent;
}

/* Collapsed Header (fixed one) */
header #constant #collapsed{
   position: fixed;
   width:100%;
   max-width:1350px;
   top:-600px;
	 background-color:rgba(34,34,34,0.98);
   height:59px;
   padding:0;
   -webkit-transition: .3s ease-in-out;
   -moz-transition: .3s ease-in-out;
   -o-transition: .3s ease-in-out;
   transition: .3s ease-in-out;
}

.reading header #constant #collapsed{
    top:0px;
}

header #constant #collapsed #platform-signup{
    top:13px;
}

header #constant #collapsed .menutoggle{
    top:22px;
}

/* Navigation */
header[role=banner] nav{
  display: inline-block;
  opacity: 1;
  margin: 0;
  padding:8px;
  text-transform: uppercase;
  /*border-top:1px solid rgba(255,255,255,0.2);
  border-bottom:1px solid rgba(255,255,255,0.2);*/
}

header[role=banner] #constant #collapsed nav{
  position: absolute;
  top:18px;
  left:130px;
  margin:0px 0  0 0;
  padding:0;
  display: block;
  opacity: 1;
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}


.watt header[role=banner] #constant #collapsed nav{
  left:200px;
}

.static-nav header[role=banner] nav{
  border-bottom: none;
}

.hide header[role=banner] nav{
    /*opacity: 0;*/
}
header[role=banner] nav ul{
    margin:0;
    padding:0;
    list-style-type: none;
}
header[role=banner] nav li{
    margin:0;
    padding:0;
    display: inline;
    line-height: 10px;
}
header[role=banner] nav li a{
    margin: 0 0 5px 0;
    padding:20px;
    font-size: 11px;
    display: block;
    line-height: 10px;
    color:#fff;
    font-family: 'Montserrat', sans-serif;
    border:1px solid rgba(255,255,255,0.2);
}
header[role=banner] nav li a:hover{
    background:rgba(255,255,255,0.6);
}

/* Menu Toggle Switch */
.menutoggle{
  position: absolute;
  top:22px;
  left:30px;
  margin:0;
  padding:0;
  width: 20px;
  height: 20px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

.watt .menutoggle{
  left:85px;
}

.menutoggle span{
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #fff;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

.menutoggle span:nth-child(1) {
  top: 5px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
.menutoggle span:nth-child(2) {
  top: 5px;
  opacity:0;
  left: 0px;
}
.menutoggle span:nth-child(3) {
  top: 5px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.hide .menutoggle span:nth-child(1) {
  top: 0px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}
.hide .menutoggle span:nth-child(2){
  left:0;
  opacity:1;
}
.hide .menutoggle span:nth-child(3){
  top: 10px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}

/* Toggled headers */

header[role=banner] #constant #collapsed.hide nav ul{
  display:none;
  pointer-events: none;
}


/* Tag/Author Drawer */

.tag-drawer{
  text-align: center;
  background:#534785;
  border-bottom: solid 1px #4c408c;
  padding:10px;
}

.tag-drawer h3{
  margin:0 auto;
  text-indent: -5000em;
  background: url('https://static-cashmusic.netdna-ssl.com/www/img/constant/icon/tag.svg') no-repeat 50% 50%;
  height:31px;
  width:30px;
  background-size: 60%;
}


.tag-drawer:hover{
  cursor: pointer;
  background:#3d3568;
}

.tag-drawer:hover h3{
  background-size: 65%;
  fill:red;
}

header .tag-nav{
  background:#5e5290;
  color:#fe5c71;
}

header .tag-nav .tag-content{
  position: absolute;
  z-index: -10;
  top:-1000vh;
  background:#222;
  background:rgba(34,34,34,0.99);
  border-top: solid 1px #000;
  width:100%;
  -webkit-transition: 0.2s  ease-out;
  transition: 0.2s  ease-out;
}

header .tag-nav .tag-content .inner{
  padding:30px 30px 80px 30px;
}

/* Show tags */

header .tag-nav.show .tag-content{
  top:58px;
}

header .tag-nav .tag-content h3{
  margin:0 0 30px 0;
  color:#fff;
  background:#202020;
  padding:20px 30px;
  text-align: center;
}

header .tag-nav ul li a{
  font-size: 14px;
  border-bottom: solid 2px;
  color:#444;
  text-transform: capitalize;
}

header .tag-nav ul li a:hover{
  color:#fe5c71;
}


/* Tag/Author Header */

header .tag-header{
  /*background:#5e5390;*/
}

/* Watt logo */

.watt-logo, #main article.expanded #hash-hero h2 #watt-logo{
    height: 100px;
    width: 105px;
    margin: 0 auto;
    background-size: 100%;
}

 #main article.expanded #hash-hero h2 #watt-logo .watt-logo-inner{
   fill:#ff475b;
 }

.watt header .watt-logo{
  background:url('https://static-cashmusic.netdna-ssl.com/www/img/constant/icon/watt-logo.svg') no-repeat 50% 50%;
  background-size: 100%;
  text-indent: -5000em;
  height: 55px;
  width: 55px;
  position: absolute;
  top:1px;
  left:2px;
  margin:0;
}

/* WATT Specific Header */

 header #top.hide nav{
  display: none;
  opacity:0;
}

.watt header #top, header.watt #top a{
  color:#ff475b;
  color:#fff;
}

.watt header #constant #top, .platform-bg header #constant #top{
  background: transparent;
  background-position: 0% 0%;
  border-bottom:rgba(255,255,255,0.1) 1px solid;
}

/* Watt Dark */

.watt.dark header #constant #top.hide, .watt.dark header #constant #top.hide a{
  color:#222;
}

.watt.dark header #constant #top.hide{
  border-bottom: rgba(0,0,0,0.1) 1px solid;
}

.watt.dark header #constant #top.hide .watt-logo{
  -webkit-filter: invert(.9);
  filter: invert(.9);
}

.watt.dark header #top.hide #platform-signup a.login{
  border-color:#222;
}

.watt.dark header #top.hide #platform-signup a.login:hover{
  background:#222;
  color:#fff;
}

.watt.dark header #constant #top.hide .menutoggle span{
  background:#222;
}

/* Watt Tag drawer */

.watt header .tag-nav{
  background: transparent;
}
.watt header .tag-drawer{
  background: transparent;
  border: none;
  position: absolute;
  top:3px;
  left: 78px;
  padding: 10px 0;
  z-index: 10;
}

/* Overview  */

.overview{
  background:#222;
  background: rgba(34,34,34,0.98);
  padding:60px 0 0 0;
  position: absolute;
  top:0px;
  z-index: -10;
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

.overview-inner{
  opacity: 1;
  padding:30px 0px 60px 30px;
  -webkit-transition: .3s ease-in-out .3s;
  -moz-transition: .3s ease-in-out .3s;
  -o-transition: .3s ease-in-out .3s;
  transition: .3s ease-in-out .3s;
  border-top: solid 1px #343434;
}

.overview-inner img{
  width:100%;
  height:auto;
}

.overview-inner ul{
  padding:0 0 30px 0px;
}

.overview-inner .nav-header{
  padding:0 0 0 30px;
}

.overview-inner p, header .overview-inner ul li a{
  font-size: 14px;
}

.overview-inner p{
    font-family: 'Nunito', sans-serif!important;
}

header .overview-inner ul li a{
  border-bottom: solid 2px;
}

.overview-inner ul li {
  margin:0 0 3px 0;
  padding:0;
  line-height: 18px;
  display: inline-block;
}

.overview-inner ul li a{
  color:#666;
  margin:0;
  padding:0;
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

.overview-inner ul li a{

}

.overview-inner ul li a:hover{
  color:#fff;
}

.overview .overview-content{
  padding:0 30px;
}

.hide .overview{
  top:-1000vh;
}

.hide .overview-inner{
  opacity: 0;
}

.overview h2{
  font-family: 'Montserrat', sans-serif;
  line-height: 24px;
}

/* Larger screen sizes */
@media screen and (min-width: 48em) {
	header[role=banner] nav{
	  /*height:76px;*/
    /*height:48px;*/
    margin:0 0 0 10px;
	}

	header[role=banner] nav li{
	    margin:0 20px 0 0;
	    padding:0;
	    display: inline-block;
	    /*border-left:solid 1px rgba(255,255,255,0.2);*/
	    line-height: 10px;
	    vertical-align: middle;
	}

	header[role=banner] nav li a{
	    margin: 0;
	    padding:0;
	    font-size: 11px;
	    line-height: 10px;
	    display: inline-block;
	    font-family: 'Montserrat', sans-serif;
	    border: none;
	    border-bottom:3px solid rgba(255,255,255,0);
	}

	header[role=banner] nav li a:hover{
	    background:none;
	    border-bottom:3px solid rgba(255,255,255,0.5);
	}
}

/* Smaller screens */
@media screen and (max-width: 48em) {
   header #constant #top {
      display:none;
   }
   header #constant #collapsed {
       top:0px;
   }
   header[role=banner] #constant #collapsed nav{
		height:100%;
    height:100vh;
    position: relative;
    left:0!important;
    top:11px;
    padding:30px;
    background:#222;
    z-index: -2;
	}
   header[role=banner] #constant #collapsed.hide nav{
		height:0;
    margin:0;
    padding:0 30px;
	}

  .watt header .tag-drawer{
    display: none;
  }

  header .tag-nav.show .inner{
    top: -1000vh;
  }

  .overview{
    display: none;
  }
}