/* ==========================================================================
		
		Raks Inferno 2018
		Author: Dawn L. Low

		Based on the code I wrote for DawnXianaMoon.com
   
		Built on HTML5 Boilerplate 
	
========================================================================== */

/* ============================
  	Base Styles
============================ */

html {
    font-size: 1em;
    line-height: 1.4;
    color: #f3e2c6;
}

body {
	font:  300 1.2em/1.9em 'Lato', sans-serif;
	color: #e9d6b6;
	background: #0d0d0d; 
}   

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #fdb96b;
    margin: 3em 0;
    padding: 0;
}

audio,
canvas,
img,
video {
    vertical-align: middle;
}

a { 
	color: #f48560; 
	font-weight: 400;
	text-decoration: none;
    transition: all 0.2s ease;
    outline: 0;
}
		
a:hover {
	color: #de5e33;
}

a:active { 
	color: #de5e33; 
}	

h1 {
	font: 300 1.4em 'Lato', sans-serif;
    text-align: center;
    color: #fdb96b;
}

h2 {
	margin-top: 0;
    font: 300 1.5em/1.4em 'Cardo', serif;
}

h3 {
	font-weight: 300;
	font-family: "Cardo", serif;
}

h4 {
	font-weight: 400;
	font-size: 1.1em;
	text-transform: uppercase;
}

h5 {
	font-weight: 400;
	font-size: 1.1em;
	margin: 0;
}

h6 {
    font-size: 1em;
    margin: 1em 0;
    font-weight: 400;
    text-transform: uppercase;
    color: #fdb96b;
}

h6 span {
    font-size: .9em;
    text-transform: none;
    font-weight: 300;
}

blockquote {
	margin-left: 2em;
}

img {
	max-width: 100%;
}

.bigger {
	font-size: 120%
}

.smaller {
	font-size: .9em;
}

.emphasis {
	font: 300 1.3em/1.8em "Cardo", sans-serif
}

.emphasis a {
	color: #b5b58f
}

.emphasis a:hover { 
	color: #ffffcc; 
}

.center {
	margin: 0 auto;
	text-align: center
}

.overlay {
	background: rgba(0,0,0,.4);
}

.typography {
	text-align: center;
	font-family: "Lato", sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 3em;
	font-size: 1.1em;
}

.small {
	font-size: .8em;
    line-height: 1.5em;
}

.secondary-color {
	color: #fdb96b;
}

.press-quote {
	font-style: italic;
	    font-size: 1.2em;
}

.press-source {
	margin: -1em 0 1em 1.5em;
}

.center .press-source {
	margin-left: 0
}

/* ============================
  	Grid
============================ */

.wrapper {
	max-width: 2000px;
	width: 100%;
	margin: 0 auto;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
	width: 84%;
	position: relative;
} 

.row {
	display: table
}

.half {
	width: 50%;
	float: left;
	box-sizing: border-box;
}

.third {
	width: 33%;
	float: left;
	box-sizing: border-box;
}

.two-thirds {
	width: 66%;
	float: left;
	box-sizing: border-box;
}

section {
    padding: 3em 8% 4em;
}

article {
	max-width: 700px;
	width: 100%;
	display: block;
	margin: 0 auto;	
}

.constrain {
	max-width: 700px;
	margin: 0 auto;
	padding-top: 0;
}

/* ============================
  	Forms and Buttons
============================ */

button,
input,
select,
textarea {
	color: #000;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

label {
	font-size: 1.2em;
	margin-right: .5em;
}

input {
	padding: .4em 1em;
	background: #ffffcc;
	border: 1px solid;
	border-radius: 3px;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	font-weight: 300;
}
::-moz-placeholder { /* Firefox 19+ */
	font-weight: 300;
}
:-ms-input-placeholder { /* IE 10+ */
	font-weight: 300;
}
:-moz-placeholder { /* Firefox 18- */
	font-weight: 300;
}

/* Transparent Button - Default */

.button {							
	border: 1px solid #ffffcc;
    padding: .5em 1.5em;
    border-radius: 3px;
    background: transparent;
    color: #ffffcc;
    font-weight: 600;
}

.button:hover {
    background: #ffffcc;
    color: #000;
}

/* Solid Button */

.button.solid {						
    background: #ffffcc;
    color: #000;
    font-weight: 600;
}

.button.solid:hover {
	background: transparent;
	color: #ffffcc
}

.cta {
	margin: 2em 0
}

.fixed-cta {
    position: absolute;
    /*right: 10%;*/
    right: 0;
    margin-top: -10vh;
}

/* ====================================
  	Backgrounds - see media queries
====================================== */

.parallax {
    min-height: 54vh;
}

#index .parallax {
	/*min-height: 68vh;*/
	min-height: 50vh;
}

#index .parallax.bottom {
	min-height: 65vh;
}

#theatre-shows .parallax {
	/*min-height: 60vh*/
	min-height: 50vh;
}

#theatre-shows .parallax.bottom {
	min-height: 60vh;
}

/* ============================
  	Header
============================ */

header {
	padding: 0 0 2em 0;
}

header h1 {
	margin: -.5em auto 0 auto;
	font-size: 1.2em
}

#menu-button, .mobile-logo {
	display: none;
}

nav {
	display: block;
	padding: 1em 0;
}

nav .logo {
	max-width: 360px;
    margin: 1em auto 0;
}

nav .logo img {
    transition: all 0.2s ease;
}     

nav .logo img:hover {
	opacity: .8;
} 

nav ul {
    list-style: none;
    padding: 0;
    overflow: hidden;
    text-align: center;
    display: block;
    margin: 0;
    font:  1.1em/1.4em 'Cardo', serif;
}

nav ul li {
    display: inline-block;
    position: relative;
    padding: 6px 15px;
    margin-right: 1.2em;
}

nav ul li:last-of-type {
	margin-right: 0;
}

nav ul li a {
	color: #de5e33;
}

nav ul li a:hover {
	color: #f4ad95
}   

/*nav ul li.upcoming-theatre a {
	color: #f4ad95
}  

nav ul li.upcoming-theatre a:hover {
	color: #f4ad95
}  
*/

/* Sidr Overrides */

.sidr {
	font: 300 1em 'Lato', sans-serif;
	background: #231812;
	box-shadow: none;
}

.sidr .sidr-inner {
    padding: 2.5em 1.5em
}

.sidr ul {
	border: 0;
	margin: 1em 0 0 0;
}

.sidr ul li {
	border: 0;
}

.sidr ul li a, .sidr ul li span {
    color: #ffffcc;
    padding: 0 0 0 5%;
}

.sidr ul li:hover, 
.sidr ul li.active, 
.sidr ul li.sidr-class-active {
    line-height: 48px;
}

.sidr ul li:hover > a, 
.sidr ul li:hover > span, 
.sidr ul li.active > a, 
.sidr ul li.active > span, 
.sidr ul li.sidr-class-active > a, 
.sidr ul li.sidr-class-active > span {
	box-shadow: none;
	color: #caca9f;
}

.sidr .sidr-class-mobile-logo img {
	max-width: 90%
}

/* ============================
   Homepage
============================ */

#index section:not(#logos) {
	margin: 1em 0;
	padding: 1em 0;
}

#promo-vid {
	margin: 2em auto 3em;
}

#index .fixed-cta {
    /*margin-top: -25vh;*/
    margin-top: -12vh;
}

.parallax.bottom {
	min-height: 70vh
}

/* ============================
   Shows
============================ */	

#shows {
	font-size: 1.1em;
	margin: 0 0 3em;
	outline: 0;
}

#shows h5 {
	padding-bottom: 2em;
	margin-bottom: 2em;
	border-bottom: 1px solid
}

#shows .cta {
	margin: 2em 0 3em;
}

.covid-notice {
	padding-bottom: 2em;
	margin-bottom: 2em;
	text-align: center;
	font-size: .9em
}

.show-poster {
	float: left;
    margin-right: 1em;
    margin-left: -5em;	
 	margin-top:  1em;
}


/* ============================
   Peformers / Company
============================ */	

section#cast {
	margin: 0;
	padding: 0 8% 3em;
}

#company h3 {
	text-align: center;
	margin-top: 2em;
}

#company img {
	margin: 1.5em auto;
	display: block;
	width: 100%;
	max-width: 300px
}

#company .cta {
	margin: 2em 0 1em;
}

.half-width {
    width: 46%;
    float:left;
    position: relative
}

.half-width.last {
    margin-left: 8%;
}

/* ============================
   Classes
============================ */	

section#teaching {
	margin: 0;
	padding: 0 8% 3em;
}

#teaching img {
	margin: 1.5em auto;
	display: block;
	width: 100%;
	max-width: 700px
}

#teaching .a-class img {
	margin: 0;
	max-width: 300px
}

.a-class .third {
	padding-right: 2%;
}

.a-class .two-thirds p:first-of-type {
	margin-top:0;
}

#teaching .cta {
	margin: 2em 0;
}



/* ============================
   As Seen In - Logos
============================ */

#logos {
	background: #000;
	padding: 2em;
}

.logo-strip {
	margin-top: 1em;
}

.logo-strip img {
    float: left;
    margin: 0 2em 2em 0;
    max-height: 45px;
}

/* ============================
   Footer
============================ */

footer {
	border-top: 1px solid;
	padding: 2em 8% 3em;
	font: 300 .95em "Lato", sans-serif;
}

footer .social ul {
	margin: 0;
	padding: 0;
}

footer .social ul li {
    display: inline-block;
    position: relative;
    padding: 6px 5px;
} 

footer .social a {
	color: #f6f6f3;
}

footer .social a:hover {
	color: #caca9f
}

footer .social .fa-inverse {
	color: #2F100E;
}

.copyright {
    float: right;
    margin-right: 0;
    text-align: right;
    font-size: .8em;
}

footer.sticky {
	display: none;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Responsive Styles
   ========================================================================== */

@media only screen and (min-width: 921px) {            /* Display desktop backgrounds and images (saves mobile load time) */

    img.desktop {
        display:block;
        width: 100%;
    }

    img.mobile {
        display:none;
    }

    /* Main Backgrounds */

	#index {
		background: url("../images/backgrounds/andrea-blur.jpg") top center no-repeat;
		background-size: cover;
		background-attachment: fixed;
	}

	#theatre-shows, #classes {
		background: url("../images/backgrounds/dawn-blur.jpg") top center no-repeat;
		background-size: cover;
		background-attachment: fixed;
	}

	#hire, #performers {
		background: url("../images/backgrounds/michi-blur.jpg") top center no-repeat;
		background-size: cover;
		background-attachment: fixed;
	}

	/* Parallax */

	.index {
		background: url("../images/backgrounds/andrea.jpg") top center no-repeat;
		background-attachment: fixed;
		background-size: cover;
	}

	.theatre-shows, .classes {
		background: url("../images/backgrounds/dawn.jpg") top center no-repeat;
		background-attachment: fixed;
		background-size: cover;
	}

	.hire {
		background: url("../images/backgrounds/michi.jpg") top center no-repeat;
		background-attachment: fixed;
		background-size: cover;
	}

}

@media only screen and (max-width:1024px) and (max-height: 1370px)  {				/* iPad Pro */

	.parallax.bottom {
		min-height: 90vh
	}

	/* Main Backgrounds */

	#index {
		background: url("../images/backgrounds/andrea-mobile-blur.jpg") top right no-repeat;
		background-size: cover;
		background-attachment: fixed;
	}

	#theatre-shows, #classes {
		background: url("../images/backgrounds/dawn-tablet-blur.jpg") top right no-repeat;
		background-size: cover;
		background-attachment: fixed;
	}

	#hire, #performers {
		background: url("../images/backgrounds/michi-tablet-blur.jpg") top right no-repeat;
		background-size: cover;
		background-attachment: fixed;
	}

	/* Parallax */

	.index {
		background: url("../images/backgrounds/andrea-mobile.jpg") top right no-repeat;
		background-attachment: fixed;
		background-size: cover;
	}

	.theatre-shows, .classes {
		background: url("../images/backgrounds/dawn-tablet.jpg") top right no-repeat;
		background-attachment: fixed;
		background-size: cover;
	}

	.hire {
		background: url("../images/backgrounds/michi-tablet.jpg") top right no-repeat;
		background-attachment: fixed;
		background-size: cover;
	}
}

@media only screen and (max-width: 920px) {            /* Primary tablet breakpoint */

	body {
		font-size: 1em
	}

	.container {
	    width: 90%;
	}

	section {
		padding: 3em 0;
	}

	article, .constrain, .half-width {
		max-width: 600px
	}

    /* Header */ 

    header {
	    max-width: 90%;
	    margin: 0 auto;
	}

    #menu-button {
        display: block;
        float: right;
    }

    #menu-button .fa-bars {
        font-size: 1.8em;
        vertical-align: top;
        margin-top: 1em;
    }

    #navigation {
    	display: none;
    }

	header h1 {
		font-size: 1.1em;
	}

    /* Sections */

    #index section:not(#logos) {
	    padding: .5em 0;
	}

    .parallax {
	    min-height: 47vh;
	}

	#index .parallax {
		min-height: 50vh
	}

	#theatre-shows .parallax {
		min-height: 45vh;
	}

	.parallax.bottom {
	    min-height: 80vh;
	}

	.logo-strip img {
        max-height: 30px;
        margin: 0 1em 1em 0;
    }

    .half-width {
	    width: 100%;
	    float:none;
	    position: relative;
	    margin: 0 auto;
	}

	.half-width.last {
	    margin: 0 auto;
	}

	.fixed-cta {
		display: none;
	}	

	/* Main Backgrounds */

	#index {
		background: url("../images/backgrounds/andrea-tablet-blur.jpg") top right no-repeat;
		background-size: cover;
		background-attachment: fixed;
	}

	#theatre-shows, #classes {
		background: url("../images/backgrounds/dawn-tablet-blur.jpg") top right no-repeat;
		background-size: cover;
		background-attachment: fixed;
	}

	#hire, #performers {
		background: url("../images/backgrounds/michi-tablet-blur.jpg") top right no-repeat;
		background-size: cover;
		background-attachment: fixed;
	}

	/* Parallax */

	.index {
		background: url("../images/backgrounds/andrea-tablet.jpg") top right no-repeat;
		background-attachment: fixed;
		background-size: cover;
	}

	.theatre-shows, .classes {
		background: url("../images/backgrounds/dawn-tablet.jpg") top right no-repeat;
		background-attachment: fixed;
		background-size: cover;
	}

	.hire {
		background: url("../images/backgrounds/michi-tablet.jpg") top right no-repeat;
		background-attachment: fixed;
		background-size: cover;
	}


    /* Footer */

    footer {
        padding: 0 5% 6em;
    }

    footer .half {
    	float: none;
    	text-align: center;
    	width: 100%
    }

    footer .half:nth-of-type(2) {
    	margin-top: 1em;
    }

    footer .copyright {
        float: none;
    }

    /* Mobile: Sticky Footer */

	footer.sticky {
	    display: block;
	    text-align: center;
	    position: fixed;
	    bottom: 0;
	    z-index: 20;
	    margin: 0;
	    padding: 1.4em 2%;
	    width: 100%;
	    background: #c55c3c;
	    font-size: 1em;
	    border: 0;
	    -webkit-box-shadow: -7px -18px 24px 0px rgba(0,0,0,0.75);
		-moz-box-shadow: -7px -18px 24px 0px rgba(0,0,0,0.75);
		box-shadow: -7px -18px 24px 0px rgba(0,0,0,0.75);
	}

	footer.sticky a {
	    color: #fff;
	    cursor: pointer;
	    width: 100%;
	    text-transform: uppercase;
	}

	footer.sticky a:hover {
	    color: #efefef;
	}

	footer.sticky span {
		margin: 0 .2em;
		color: #fff
	}

	footer.sticky a .fa {
	    padding: 0 5px;
	    font-size: 1.2em
	}

	footer.sticky a .fa-youtube-play {
	    margin-left: 1.5em;
	}

	footer.sticky .buy-tix {
		display: none;
	}

	#theatre-shows footer.sticky .upcoming {
		display: none;
	}

	#theatre-shows footer.sticky .upcoming,
	#theatre-shows footer.sticky .social {
		display: none
	}

	#theatre-shows footer.sticky .buy-tix {
		display: inline-block;
	}

}    

@media only screen and (max-width: 600px) {  		/* Primary mobile breakpoint */

	.container {
		max-width: 84%;
	}

	.half, .third {
		width: 100%;
	}



	.half:nth-of-type(2) {
		margin-top: 2em
	}

	.third:nth-of-type(2) {
		margin-top: 3em
	}

	.third:nth-of-type(3) {
		margin-top: 3em
	}

	h2 {
		text-align: center
	}

	p.bigger {
	    font-size: 1.2em;
	    line-height: 1.6em;
	}

	.typography {
	    font-size: 1em;
	    margin-bottom: 2em;
	}

	.press-source {
	    font-size: .9em;
	}

	.button {
		display: block;
	    margin: 0 auto;
	    width: 75%;
	    text-align: center;
	    padding: .5rem;
	    min-width: 130px;
	    max-width: 300px;
	}

	/* Header */

	header {
		padding-bottom: .5em;
	}

	#menu-button .fa-bars {
		margin-top: .3em
	}

	nav .logo {
		max-width: 250px;
		padding: 2em 0 0 0;
	}

	header h1 {
		margin-top: -.8em;
	}

	#index h1, header h1 {
		margin-bottom: 1em;
	}

	.ios .parallax.bottom {
	    min-height: 0;
	}

	/* Main Backgrounds - Mobile */

	#index {
		background: url("../images/backgrounds/andrea-mobile-blur.jpg") top center no-repeat;
		background-attachment: fixed;
	}

	#theatre-shows, #classes {
		background: url("../images/backgrounds/dawn-mobile-blur.jpg") top center no-repeat;
		background-attachment: fixed;
	}

	#hire, #performers {
		background: url("../images/backgrounds/michi-mobile-blur.jpg") top center no-repeat;
		background-attachment: fixed;
	}

	/* Parallax */

	.index {
		background: url("../images/backgrounds/andrea-mobile.jpg") top center no-repeat;
		background-attachment: fixed;
	}

	.theatre-shows, .classes {
		background: url("../images/backgrounds/dawn-mobile.jpg") top center no-repeat;
		background-attachment: fixed;
	}

	.hire {
		background: url("../images/backgrounds/michi-mobile.jpg") top center no-repeat;
		background-attachment: fixed;
	}

	/* Sections */

	.quote {
		font-size: .7em;
	}

	#index section {
	    margin: 0;
	}

	#index-about h2 {
		margin: 0 0 1.5em;
	}

	.show-poster {
		float: none;
		margin: 0 auto 2em;
		display: block;
	}

	#teaching .two-thirds {
		width: 100%;
	}

	#teaching .a-class img {
		max-width: 100%;
	}

	/* Footer */

	#index footer {
		border: 0;
	}

}