/*! Made with Bones: http://themble.com/bones :) */
/******************************************************************
Site Name:
Author:

Stylesheet: Main Stylesheet

Here's where the magic happens. Here, you'll see we are calling in
the separate media queries. The base mobile goes outside any query
and is called at the beginning, after that we call the rest
of the styles inside media queries.

Helpful articles on Sass file organization:
http://thesassway.com/advanced/modular-css-naming-conventions

******************************************************************/
/*********************
IMPORTING PARTIALS
These files are needed at the beginning so that we establish all
our mixins, functions, and variables that we'll be using across
the whole project.
*********************/


body, html {
  height: 100%;
}
body {
	background: #fff;
	font-family: 'Heebo', sans-serif;
	font-weight: 300;
  background-image: url(../images/Rhye_Home_WebGB-V2.jpg);
	color: #222;
}
img {
	max-width: 100%;
}
a,a:link {
	color: #222;
	transition: .2s ease all;
}
a:hover {
	text-decoration: none;
	opacity: .7;
}
.copyright {
  text-align: center;
  font-size: .7em;
}
.video-wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.video-wrapper iframe, .video-wrapper video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.btn-default, a.btn-default {
	background: #000;
	color: #fff;
	border-radius: 0;
}
.btn-default:hover {
	background: #222;
}
.btn-white {
  background: #fff;
  color: #000;
  border: 1px solid #ddd;
}


.excerpt-read-more {
  display: none;
}




html,body {
  height: 100%;
}
body {
  background: #fff;
  font-family: 'Heebo', sans-serif;
  font-weight: 300;
  background-image: url(../images/Rhye_Home_WebGB-V2.jpg);
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: #222;
}
h1,h2,h3,h4,h5 {
  font-weight: 100;
}
#logo {
  text-align: center;
}
#logo img {
  width: 300px;
}
.center {
  text-align: center;
}
.headernav #logo {
  text-align: center;
}
.headernav {
  padding: 20px 0;
  position: fixed;
  width: 100%;
  z-index: 10;
  transition: .5s ease all;
  top: 0;
  background-image: url(../images/Rhye_Home_WebGB-V2.jpg);
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
.headernav #logo img {
  transition: .5s ease all;
}
.headernav.scrolled {
  padding: 10px 0;
  box-shadow: 2px 2px 5px #333;
}
.headernav.scrolled #logo img {
  height: 40px;
  width: auto;
}
.socials {
  float: right;
  font-size: 2em;
  margin: 0;
}
.socials li {
  display: inline-block;
  padding: 0 3px;
}




.shopitem {
  text-align: center;
}
.shopitem a {
  text-decoration: none;
}

.bottompanel {
}
.header,.footer {
  background: transparent;
  color: #222;
}
.entry-content {
  background: transparent;
}
.hentry {
  border: 0;
  background: transparent;
}
.toppanel {
  text-align: center;
}
img {
  max-width: 100%;
  height: auto;
}
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.panel {
  margin: 60px 0;
}
a, a:visited {
  color: #222;
  transition: .2s ease all;
}
a:hover, a:focus, a:visited:hover, a:visited:focus {
  color:#0e6991;
}
.copyright {
  text-align: center;
  font-size: .8em;
}
.musiclinks {
  text-align: center;
}
.musiclinks a {
}
.musiclinks i {
  font-size: 3em;
  margin: 20px;
}

button, html input[type="button"], input[type="reset"], input[type="submit"] {
  background: #fff;
  border: 1px solid #ddd;
  padding: 5px 15px;
  transition: .2s ease all;
  font-size: 1.3em;
}
button, html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover {
  background: #0e6991;
  color: #fff;
}


/** animated boxes **/
.animBlock {
  /*display: inline-block;*/
  opacity: 0;
  filter: alpha(opacity=0);
  position: relative;
  -webkit-transition: all .55s ease-in;
  -moz-transition: all .55s ease-in;
  -ms-transition: all .55s ease-in;
  -o-transition: all .55s ease-in;
  transition: all .55s ease-in;
}
.animBlock[data-position="left"] { left: -20%; }
.animBlock[data-position="right"] { right: -20%; }

.animBlock[data-position="left"].viewed {
  left: 0%;
  opacity: 1;
  filter: alpha(opacity=100);
}
.animBlock[data-position="right"].viewed {
  right: 0%;
  opacity: 1;
  filter: alpha(opacity=100);
}

.animBlock[data-position="top"] { margin-top: 20%; }

.animBlock[data-position="top"].viewed {
  margin-top: 0%;
  opacity: 1;
  filter: alpha(opacity=100);
}

#content {
  margin-top: 150px;
}
.mainmenu {
  position: fixed;
  top: 0;
  left: 0;
  max-width: 400px;
  width: 80%;
  height: 100vh;
  background-image: url(../images/Rhye_Home_WebGB-V2.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  padding: 40px 20px;
  box-shadow: 2px 2px 12px #666;
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  transition: .5s ease all;
  z-index: 10;
}
.mainmenu.open {
  transform: translateX(0);
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
}
.mainmenu .closebtn {
  position: absolute;
  top: -15px;
  right: 10px;
  font-size: 3em;
  transition: .2s ease all;
  cursor: pointer;
}
.menuitems {
  padding: 40px 10px;
  list-style: none;
}
.mainmenu a {
  text-decoration: none;
  font-size: 1.4em; 
}
.mainmenu img {
  max-width: 50%;
  margin: 0 auto;
  display: block;
}
.mainmenu .socials {
  float: none;
  text-align: center;
  margin-top: 40px;
  font-size: 1.3em;
  padding-left: 0;
}


.toggle {
  transition: .3s ease all;
  cursor: pointer;
}
.toggle:hover {
  color: #999;
}
.toggle:hover #nav-icon4 span {
  background: #999;
}
.toggletxt {
  display: inline-block;
  vertical-align: top;
  margin: 8px 0;
}
#nav-icon4 {
  width: 32px;
  height: 22px;
  position: relative;
  margin: 10px 3px;
  background: transparent;
  -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;
  display: inline-block;
}

#nav-icon4 span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #444;
  opacity: 1;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
body.page #nav-icon4 span {
  background: #999;
}
#nav-icon4 span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(2) {
  top: 8px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(3) {
  top: 16px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4.open span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: -3px;
  left: 0px;
  background: #444;
}

#nav-icon4.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#nav-icon4.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 20px;
  left: 0px;
  background: #444;
}
.panel h1 {
  text-transform: uppercase;
  text-align: center;
}



body.halt {
  overflow: hidden;
}
.splash {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  z-index: 100;
  background: #fff;
  font-family: 'Heebo', sans-serif;
  font-weight: 300;
  /*background-image: url(../images/asfalt-dark2.png);*/
  background: rgba(0,0,0,.7);
  color: #222;
  overflow-y: auto;
  display: none;
}
.splash.display {
  display: block;
}
.splash .toppanel {
  margin: 60px auto;
  padding: 60px;
  background: #000;
  color: #fff;
}
.splash .toppanel img {
  /*max-width: 60%;*/
}
.splash a.btn {
  background: #fff;
  color: #000!important;
  padding: .5rem .75rem;
  text-decoration: none;
}
.centertext {
  text-align: center;
}
.retail a {
  font-size: 3rem;
  padding: 0 1rem;
  color: #fff;
}



@media only screen and (max-width: 768px) {
  .socials {
    float: none;
    text-align: center;
  }
  .retail a {
    font-size: 2rem;
    padding: 0 1rem;
  }
}


@media only screen and (max-width: 767px) {
  .retail a {
    font-size: 1.2rem;
    padding: 0 1rem;
  }
  .splash .toppanel {
    padding: 20px;
  }
}