/*
* Camille Crimson
* Copyright 2014-2016, Productions VD2C
* www.camillecrimson.me
* 03/25/2016
*/

/* http://meyerweb.com/eric/tools/css/reset/ 
   CSS Reset v2.0 | 20110126
   License:none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display:block;
}
body {
line-height:1;
}
ol, ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
table {
border-collapse:collapse;
border-spacing:0;
}

/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html {
font-size:1.1em;
-ms-text-size-adjust:100%; 
-webkit-text-size-adjust:100%;
}

body {
background-color:black;
color:white;
font-family:"Myriad Pro","Trebuchet MS",Verdana,Arial,sans-serif;
/*font-family:'Slabo 27px', serif;*/
line-height:1.6;
-webkit-font-smoothing:antialiased;
}
 
video {
width:100%;
height:auto;
display:inline-block;
vertical-align:baseline;
}

img {
width:100%;
height:auto;
}

a {background-color:transparent;}

a:link,
a:visited {
color:#14b0d1;
text-decoration:none;
}

a:hover,
a:visited:hover {
color:#64c7f5;
text-decoration:none;
}

.join-btn a:link, .join-btn a:visited {
    background-color: #64c7f5;
    color: white;
    padding: 18px 29px;
    text-align: center; 
    text-decoration: none;
    display: inline-block;
}

.join-btn a:hover, .join-btn a:active {
    background-color: #14b0d1;
}

.buy-btn a:link, .buy-btn a:visited {
	font-size:0.8em;
    background-color: #fa60e6;
    color: white;
    padding: 5px 9px;
    text-align: center; 
    text-decoration: none;
    display: inline-block;
}

.buy-btn a:hover, .join-btn a:active {
    background-color: #14b0d1;
}
.poster {min-height:340px;}
.picture {margin-bottom:3.5%; min-height:450px;}

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */


h1, h2, h3, h4, h5, h6 {
margin:1em 0 0.5em 0;
font-weight:300;
text-transform:uppercase;
font-family:'Montserrat', sans-serif;
/*letter-spacing:-.1em;*/
}

h1 {font-size:1.9em; line-height:1.6em;}
h2 {font-size:1.6em; line-height:1.4em; margin-bottom:1em;}
h3 {font-size:1.3em; line-height:1.1em;}
h4 {font-size:1em; line-height:1.1em;}
h5 {font-size:0.85em; line-height:1.1em;}
h6 {font-size:0.7em; line-height:1.1em;}

.sample h1 {font-size:1.4em;text-transform:capitalize;}
.poster h3 {font-size:1.1em;}

p {font-size:0.975em; line-height:1.375em; margin:1em 0 0.75em 0;}

.alert {font-weight:bold; color:red;}
.note {font-style:italic; color:green;}
.smaller {font-size:0.8em;}

strong {font-weight:bold;color:white;}
em {font-style:italic;}

dl dt {font-weight:bold; margin-bottom:0.15em; font-size:1.1em; line-height:1.075em;}
dl dd {font-style:italic; margin:0 0 .75em 1em; font-size:0.975em; line-height:1.15em;}

ul {list-style:square; margin-left:5%; font-size:0.975em;}

figcaption {font-style:italic; font-size:0.75em; margin-bottom:8%;}

/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
label {font-size:0.875em; font-weight:bold;}
input {font-size:0.975em;}
input[type=email],input[type=text] { margin: 1%;}
input[type=submit] {
	margin:2% 0;
    padding:5px 15px; 
    background:white; 
    border:0 none;
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
}

/* Comments
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.comment_text {width:500px;}
.comment_textarea {width:500px;height:200px;}
.comment_name {font-size:1.1em;font-weight:bold;line-height:0.9em;margin-bottom:-.3em;}
.comments .para {font-size:0.875em;font-style:italic;}
.comments {margin:2em 0;}

/* Header
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.header-bar {width:100%;padding:1em 0;margin:0;}
.header-bar .inside {max-width:960px; margin:0 auto; padding:0 2em;}

header {float:left; margin:0; padding:0;}
header h1 {font-size:2em; margin:0;padding:0;}
header h1 a:link, header h1 a:visited {color:white;margin:0;padding:0;}
header h1 a:hover, header h1 a:visited:hover {color:#14b0d1;}

/* Navigation
–––––––––––––––––––––––––––––––––––––––––––––––––– */
nav {float:right;margin:1em 0 0 0;padding:0;}
nav ul {list-style:none; margin:0; padding:0;}
nav ul li {float:left; margin-left:1em;}
nav ul li a:link, nav ul li a:visited {color:white;}
nav ul li a:hover, nav ul li a:visited:hover {color:#14b0d1;}

/* Footer
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer {padding:2em 0;}
footer section {max-width:960px; margin:0 auto; text-align:center;}
footer p {color:#b4b4b4;margin:0;}
footer ul li {display:inline;margin:0 .65em;padding:0;}

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

main {max-width:960px; margin:0 auto; padding:0 2em;}
section {margin:6% 0;}
.column {width:100%; float:left; box-sizing:border-box;}
.row {margin:2% 0;}

.one-half {width:45%;}
.one-third {width:30%;}
.two-thirds {width:63%;}

.lefty {margin-right:3.5%;}
.righty {margin-left:3.5%;}
.middly {margin-left:5%; margin-right:5%;}

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media only screen and (min-width:1920px) {
	html {font-size:120%;}
	body{font-size:1.2em;}
	main, .header-bar .inside {max-width:1200px; margin:0 auto; padding:0 2em;}
	header h1 {font-size:1.8em; margin:0;padding:0;}
	footer section {max-width:1200px; margin:0 auto; text-align:center;}
	.poster {min-height:500px;}
	.picture {margin-bottom:3.5%; min-height:600px;}
	input[submit] {font-size:1.1em;}
}


@media only screen and (max-width:365px) {
	html {font-size:90%;}
	body{font-size:1.1em;}
	
	main {max-width:95%; margin:0 auto; padding:0 2em;}
	.column {width:100%; float:none; box-sizing:border-box;}
	
	.one-half, .one-third, .two-thirds {width:100%;}	 
	.lefty, .righty, .middly {margin:0;}
	
	header h1 {font-size:1.3em; margin:0;padding:0;color:yellow;}
	footer section {max-width:95%; margin:0 auto; text-align:center;}
	.poster {min-height:250px;}
	
	.comment_text {width:100%;}
	.comment_textarea {width:100%;height:100px;}
}


@media only screen and (max-width:767px)
and (min-width:370px) {
	html {font-size:90%;}
	body{font-size:1.1em;}
	
	main {max-width:95%; margin:0 auto; padding:0 2em;}
	.column {width:100%; float:none; box-sizing:border-box;}
	
	.one-half, .one-third, .two-thirds {width:100%;}	 
	.lefty, .righty, .middly {margin:0;}
	header h1 {font-size:1.6em; margin:0;padding:0;}
	
	.comment_text {width:100%;}
	.comment_textarea {width:100%;height:100px;}

}

/* Clearing Style
================================================= */
.row:after,
section:after, .header-bar {
	content:"";
	display:table;
	clear:both;
}