/*! 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.
*********************/
/* normalize.css 2012-07-07T09:50 UTC - http://github.com/necolas/normalize.css */
/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined in IE 8/9.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block; }

/**
 * Correct `inline-block` display not defined in IE 8/9.
 */
audio,
canvas,
video {
  display: inline-block; }

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Address `[hidden]` styling not present in IE 8/9.
 * Hide the `template` element in IE, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none; }

/* ==========================================================================
   Base
   ========================================================================== */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/**
 * Remove default margin.
 */
body {
  margin: 0;
 }
  
  

/* ==========================================================================
   Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background: transparent; }

/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */
a:focus {
  outline: thin dotted; }

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0; }

@font-face {
	font-family: 'bamb';
	src: url('../fonts/bamb.eot');
	src: url('../fonts/bamb.eot?#iefix') format('embedded-opentype'),
		url('../fonts/bamb.woff2') format('woff2'),
		url('../fonts/bamb.woff') format('woff'),
		url('../fonts/bamb.ttf') format('truetype'),
		url('../fonts/bamb.svg#bamb') format('svg');
	font-weight: 900;
	font-style: normal;
}

@font-face {
  font-family: 'Awesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'),
  		url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), 
		url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), 
		url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), 
		url('../fonts/fontawesome-webfont.svg?v=4.3.0#Awesome') format('svg');
  font-weight: normal;
  font-style: normal;
}

body, html {
	height:100%;
	background-size:cover;
	font-family:'bamb', sans-serif;
	-webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
	background:#00bab7 center no-repeat;
}

body {
	background:#00bab7 center no-repeat;
	background-image:url(../images/bg.jpg);
    background-size: cover;
}

#container {
/*	display:none; */
}

.header {
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 2;
}

.header-blue {
    position: absolute;
    height: 50px;
    background: #231f20;
    top: 0;
    left: 0;
    right: 0px;
    z-index: 0;
}

.inner-header {
    background: #E1B524;
    padding: 0;
    margin: auto;
    width: 260px;
    box-sizing: border-box;
    max-width: 100%;
	position:relative;
	z-index:1;
}

#title-wrapper {
	padding:10px;
}

.header img {
	display:block;
	width:100%;
}
.rand_pos {
	max-width:150px;
	max-height:150px;
position:absolute;
	-webkit-transition: -webkit-transform 0.5s ease-in;
-moz-transition:    -moz-transform 0.5s ease-in;
-o-transition:      -o-transform 0.5s ease-in;
-ms-transition:     -ms-transform 0.5s ease-in;
transition:         transform 0.5s ease-in;
}

#date {
    color: #e2b50a;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: table;
    z-index: 0;
}

#date h2 {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    line-height: 1em;
    margin: 0;
    padding: 0;
	    text-transform: uppercase;
		font-size:18px;
}

#date h2 table {
    margin: auto;
	table-layout: fixed;
}

#date table tr:first-child {
	 font-size: 100px;
	     line-height: 1em;
}

#date table td {
    padding: 10px 0;
	width:180px;
}

/*  SOCIAL  */

#socialwrapper {
    position: absolute;
    left: 0;
    top: 10px;
	box-sizing: border-box;
}

#social {
    list-style: none;
    padding: 0;
    display: table;
    position: relative;
    margin: auto;
}

#social li {
margin-left: -50000px;
margin-top: -50000px;
position: absolute;
}

#social .social-icon {
    float: left;
    font-family: 'Awesome';
    color: #fff;
    text-decoration: none;
    font-size: 24px;
    box-sizing: border-box;
    margin-left: 4px;
    line-height: 24px;
    width: 34px;
    text-align: center;
    font-weight: 100;
    -webkit-transition: all ease-in-out 0.3s;
    -moz-transition: all ease-in-out 0.3s;
    -o-transition: all ease-in-out 0.3s;
    transition: all ease-in-out 0.3s;
}

#social .social-icon:first-child {
    margin-left: 0;
    width: initial;
    padding-right: 5px;
}

#social a:hover, #signup a:hover {
	opacity:0.5;
}

#social #fb:before {
content: '\f09a';
}

#social #tw:before {
content: '\f099';
}

#social #in:before {
content: '\f16d';
}

#social #yt:before {
content: '\f167';
}

#social #tumblr:before {
content: '\f173';
}

#social #sp:before, #spotifybutton span:before {
content: '\f1bc';
}

#social #ap:before {
content: '\f179';
}

#social #merch:before {
content: '\f07a';
}

#social #it:before {
    content: '';
    background: url('../images/itunes.png') no-repeat center;
    background-size: contain;
    width: 100%;
    height: 24px;
    display: block;
}

#social #sc:before {
content: '\f1be';
}
#social #gg:before {
content: '\f0d5';
}

#extra-buttons #tour:before {
content: '\f145';
font-family:'Awesome';
}

#extra-buttons #largemerch:before {
    content: '\f07a';
    font-family: 'Awesome';
}

#extra-buttons #spotify:before {
content: '\f1bc';
font-family:'Awesome';
}

#social #deezer:before {
    content: '';
    background: url('../images/deezer.png') no-repeat center;
    background-size: contain;
    width: 24px;
    height: 24px;
    display: block;
}

#gabutton span:before {
content: '\f07a';
}

#spotifyfollow {
    width: 94px !important;
    margin: 6px auto 0;
    position: relative !important;
    display: block;
    border: 0;
    float: left;
}

#signup {
    position: absolute;
    right: 0;
    text-align: center;
    top: 10px;
    text-transform: uppercase;
	font-size:14px;
	box-sizing:border-box;
}

#signup:after {
	content:'';
	display:block;
	clear:both;
}

.spotify-follow, .ae-wp-widget-container {
	display:block;
	float: left;
	width:50%;
}

.ae-wp-logout-link {
    display: block;
}

#buttons #signup {
    bottom: 0;
    margin: 0 ;
}



#signup a {
    display: block;
    color: #fff;
    text-decoration: none;
	font-size: 10px;
    line-height: 24px;
	-webkit-transition: all ease-in-out 0.3s;
    -moz-transition: all ease-in-out 0.3s;
    -o-transition: all ease-in-out 0.3s;
    transition: all ease-in-out 0.3s;
}

#signup a:before {
    font-family: 'Awesome';
    content: '\f003';
    margin-right: 5px;
    font-size: 24px;
    vertical-align: top;
}

#date #signup {
    float: none;
    margin: auto;
    display: table;
    z-index: 9999;
    position: relative;
	font-weight: 100;
}

#date #signup a {
    background: #e1b524;
    margin: auto;
    display: block;
    text-indent: 0;
    width: 342px;
    padding: 15px;
    text-decoration: none;
    text-transform: uppercase;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 8px;
	line-height:18px;
}

#date #signup a:hover {
    color: #fff;
	background:#231F20;
}

#date #signup a:before {
    float: none;
    margin-right: 10px;
	vertical-align: top;
}


.footer {
    font-family: sans-serif;
    font-size: 7px;
    position: fixed;
    bottom: 10px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 9;
	color:#fff;
}

.footer a {
	color:#fff;
}

/*  Bottom Right  */
#extra-buttons {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

#extra-buttons a {
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    color: #231F20;
    background: #e2b50a;
    font-size: 8px;
    line-height: 24px;
    padding: 10px;
    margin: 10px 0 0;
    display: table;
    margin-left: auto;
    margin-right: 0;
	-webkit-transition: all ease-in-out 0.3s;
    -moz-transition: all ease-in-out 0.3s;
    -o-transition: all ease-in-out 0.3s;
    transition: all ease-in-out 0.3s;
}

#extra-buttons a:hover {
	color: #fff;
    background: #231f20;
}

#extra-buttons #tour:before {
content: '\f145';
font-family:'Awesome';
}

#extra-buttons #spotify:before {
content: '\f1bc';
font-family:'Awesome';
}

#extra-buttons a:before {
    font-size: 24px;
    margin-right: 5px;
    vertical-align: top;
}

#extra-buttons:after {
    clear: both;
    content: '';
    display: block;
}

/*  Bottom Left  */
#bottom-left {
    position: fixed;
    bottom: 20px;
    left: 20px;
	display:table;
}

#bottom-left img {
    width: 150px;
    display: table-cell;
	border:1px solid;
}

#bottom-left .the-buttons {
    display: table-cell;
    vertical-align: middle;
    color: #fff;
    text-transform: uppercase;
	    padding-left: 20px;
		
	    line-height: 18px;
}

#bottom-left .the-buttons:after {
    clear: both;
    content: '';
    display: block;
}

#bottom-left .the-buttons a {
    display: table;
    text-decoration: none;
    color: #231f20;
    background: #E1B524;
    padding: 10px 20px;
    font-size: 8px;
    line-height: 24px;
	margin-top: 10px;
	-webkit-transition: all ease-in-out 0.3s;
    -moz-transition: all ease-in-out 0.3s;
    -o-transition: all ease-in-out 0.3s;
    transition: all ease-in-out 0.3s;
}

#bottom-left .the-buttons a:hover {
color: #fff;
    background: #231f20;
}
#bottom-left .the-buttons a:before {
    content: '\f07a';
    font-family: 'Awesome';
    font-size: 24px;
    margin-right: 5px;
    vertical-align: top;
}

#albumpopup:before {
	content:'\f0ac';
	font-family:'Awesome';
}

#bottom-left .the-buttons .amazon:before {
	content:'\f270'
}

#bottom-left .the-buttons .itunes {
    float: left;
}

#bottom-left .the-buttons .amazon {
    float: left;
	margin-left:10px;
}




.mfp-bg {
	background:#231f20 !important;
	opacity: 0.9 !important;
	position: fixed !Important;
}

#live {
    width: 90%;
    margin: auto;
    padding: 5%;
    box-sizing: border-box;
    position: relative;
}

.hideme {
	opacity:0;
	width: 0 !important;
    height: 0 !important;
    overflow: hidden;
}

/*  Video  */

.mobilevideo #bgndVideo, #touchvideo {
	display:none;
}

#touchvideo {
	margin:0 auto 0;
	padding:0 20px;
	width:100%;
	position:relative;
	box-sizing: border-box;

}

#touchvideo iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


#videowrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  width: 100%;
  margin: auto;
}

.mobilevideo #touchvideo {
	display:block;
}

.video-controls {
    display: none;
    margin: auto;
    padding: 20px;
    width: 260px;
    box-sizing: border-box;
    font-family: 'Awesome';
    color: #fff;
	font-size: 24px;
}

.mobilevideo .video-controls {
	display:none !important;
}

.video-controls-inner {
    display: table;
	margin:auto;
}

#playpause, #muteunmute, #restart {
    border-left: 1px solid #E1B524;
    padding: 0 10px;
    text-align: center;
	margin: 0;
	float: left;
}

#playpause div, #muteunmute div, #restart div {
    width: 20px;
	margin:auto;
}
#playpause span, #muteunmute span, #restart span {
    cursor: pointer;
}

#playpause {
    margin-left: 0;
    border: 0;
}

#playpause:hover span, #muteunmute:hover span, #restart:hover span, #social a:hover {
   opacity:0.5;
}

#playpause .play {
  padding-left: 2px;
}

.unmute {
	display:none;
}


.mobilevideo .extra-wrapper {
    position: relative;
    margin: 20px auto 0;
	    padding-bottom: 20px;
}
.mobilevideo .extra-wrapper:after {
    content: '';
    display: block;
    clear: both;
}

.mobilevideo #extra-buttons {
    position: absolute;
    right: 20px;
}

.mobilevideo #bottom-left {
    position: relative;
    float: left;
	bottom: 0;
}

.mobilevideo #bottom-left img {
	border:1px solid;
}


.mobilevideo .footer {
    padding: 20px 0;
    position: absolute;
    bottom: 0;
	background: #231f20;
}

body.mobilevideo {
	padding-top: 133px;
    box-sizing: border-box;
    padding-bottom: 68px;
    height: initial;
    min-height: 100%;
    position: relative;
}


/*  OVERLAY  */
  .ow-overlay, .ae-modal-overlay, .ae-modal {
	  position: fixed !important;
  }
  
  /*  RETAIL  */
#staytogether {
    position: relative;
    padding: 0;
    max-width: 80%;
    margin: auto;
}

#staytogether img {
    display: block;
    margin: auto;
    width: 300px;
    max-width: 60%;
}

#staytogether div {
    text-align: center;
    color: #fff;
    text-transform: uppercase;
}

#staytogether div a {
	    display: inline-table;
    text-decoration: none;
    color: #231f20;
    background: #E1B524;
    padding: 10px 20px;
    font-size: 18px;
    line-height: 24px;
    margin: 0 5px 10px;
    -webkit-transition: all ease-in-out 0.3s;
    -moz-transition: all ease-in-out 0.3s;
    -o-transition: all ease-in-out 0.3s;
    transition: all ease-in-out 0.3s;
}

#staytogether div a:hover {
    color: #fff;
    background: #231f20;
}

.mfp-close-btn-in .mfp-close {
    color: #fff !important;
    font-size: 72px !important;
}

/*  THANK YOU  */

.thankyoumessage {
    position: relative;
    display: table;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #231F20;
    padding: 143px 0;
}

.thankyoumessage div {
    display: table-cell;
    vertical-align: middle;
    font-size: 24px;
}
.thankyoumessage span {
    padding: 0;
    display: table;
    margin: auto;
    font-size: 14px;
}

@media screen and (min-width:739px) and (max-width:1200px){
.rand_pos {
	max-height:100px;
	max-width:100px;
}
}

@media screen and (min-width:0px) and (max-width:738px){

body {
	    height: initial;
}
body.mobilevideo {
	padding-top:0;
 
}
.rand_pos {
	max-width:50px;
	max-height:50px;
}


#date h2 {
	font-size:10px;
    padding-top: 50px;
}

#date table tr:first-child {
    font-size: 36px;
}

#date table td {
    padding:5px 0;
	width:60px;
}

.header {
    position: relative;
}

.header-blue {
    display: none;
}

.inner-header {
    width: 100%;
}

#socialwrapper {
    position: relative;
    top: 0;
    width: 100% !important;
    margin: 0;
    background: #231F20;
    padding: 10px;
}

#social .social-icon {
    font-size: 16px;
    width: 22px;
}

#social #deezer:before {
    width: 18px;
    height: 24px;
    margin-left: 1px;
}

#social #it:before {
    height: 20px;
    margin-top: 2px;
}

#signup {
    position: relative;
    top: 0;
    width: 100% !important;
    background: #E1B524;
    padding: 10px;
}

#signup a {
    color: #231f20;
	font-size: 6px;
}

#bottom-left img {
    display: none;
}

#bottom-left .the-buttons {
    display: block;
    padding-left: 0;
    text-align: center;
    margin-top: 10px;
	    border-bottom: 2px solid;
    padding-bottom: 20px;
}

#bottom-left .the-buttons a {
    float: none !important;
    margin-left: 0 !Important;
}
/*  VIDEO  */

#touchvideo {
    margin: 20px auto 0;
}

/*  BUTTONS  */

.extra-wrapper {
    position: relative !important;
    margin: 20px auto 0 !important;
    padding: 0 20px 30px !important;
}

#bottom-left {
    position: relative !Important;
    bottom: 0;
    left: 0;
    display: table;
    width: 100%;
    margin: auto;
	float: none !important;
}

.the-buttons a {
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

#extra-buttons {
    position: relative !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 100%;
    margin: 20px auto 0;
}

#extra-buttons a {
    width: 100%;
	    box-sizing: border-box;
}

#staytogether div {
    width: 100%;
}

#staytogether div a {
    padding: 10px;
    font-size: 12px;
    line-height: 12px;
	min-width: 48%;
    margin: 1%;
    box-sizing: border-box;
}

#staytogether div .fullwidth {
	min-width: 98%;
}

#staytogether h2 {
    font-size: 18px;
}

.thankyoumessage {
    position: relative;
    margin: 20px auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.thankyoumessage span {
    font-size: 18px;
    width: 100%;
    box-sizing: border-box;
}

}