@import url(http://fonts.googleapis.com/css?family=Questrial|Playfair+Display:400,700);


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

}
*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after {display: table;  content: ''; }
.clearfix:after { clear: both; }

body {
	background: #fff;
	color: #333;
	font-size: 1em;
	font-family: 'Questrial', 'Avenir', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
section {padding:3em 0; background: white;}
#hero {position:fixed; width:100%; z-index: -1; background-color: transparent !important;padding: 0 0 0 0;}
#hero img {margin-top: 50px;}
#spacer { background: transparent; padding:0 0 0 0;}
.overlay {background-color: rgba(33,33,33,0.7); color:white;}
.overlay.light {background-color: rgba(238,232,232,0.63); color:#333;}

#audio {position:fixed; top:20px; right:20px; color:#ebebeb; text-shadow: 0px 0px 15px rgba(128,128,128,0.79);cursor:pointer;}
i.fa-fw {
    text-align: left !important;
	
  -webkit-transition: all 0.3s ease-out;  /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */
          transition: all 0.3s ease-out;  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */

}

#nav.affix {
    position: fixed;
    top: 0;
    width: 100%
}
.navbar {margin-bottom: 0px; z-index: 9999999}

a {
	outline: none;
	color: rgb(160, 148, 147);
	text-decoration: none;
}

a:hover, a:focus {
	color: rgb(197, 135, 130);
}

.mobile-note {
	position: absolute;
	bottom: 1em;
	color: #fff;
	font-size: 1.15em;
	text-align: center;
	width: 100%;
	padding: 1em;
	background: #fb7f93;
	display: none;
	font-family: 'Avenir', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.hero {
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	overflow: hidden;}

.hero__imgwrap {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.hero__imgwrap::after {
	content: '';
	position: absolute;
	background: rgba(76,0,1,0.1);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.hero__img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: 100vh;
	-webkit-transform: translate3d(-50%,-50%,0);
	transform: translate3d(-50%,-50%,0);
}

.hero__imgwrap .tilt__back,
.hero__imgwrap .tilt__front {
	background-size: auto 100vh;
}
span.orange {color: #E84B01 !important;}
span.teal {color: #07B0A0 !important;}
#mobile-hero {background: #EDE6E6;}
#tag { padding:6em 0;}
.tag {margin:0 0 0 0; padding: 0 0 0 0;}
.left {width:50%; display: block; margin:0 0 0 0; padding: 0 0 0 0; position: absolute; max-height: 100%; background: url("../img/broken_noise.png") repeat; background:#EDE6E6;  }


#author {background: url("../img/lecrae.jpg"); background-attachment: scroll; min-height: 100vh; color:white; padding:3em 0; background-size: cover;}

/* Content */
.content {
	padding: 4em 0 2em;
}

.content > p {
	max-width: 900px;
	margin: 1em auto;
	padding: 1em 0.5em 0;
}

.content p > code {
	background: #ddd;
	display: inline-block;
	padding: 0.25em 0.5em;
	border-radius: 3px;
}

.content--color-alt {
	background: #EDE8DA;
	color: #A39C88;
}

.poster-headline {
	text-align: center;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 2.65em;
	font-weight: 400;
	margin: 0.25em 0 0.5em;
}

.poster-text {
	font-size: 1.15em;
	text-align: center;
	padding: 1em 0;
	max-width: 1000px;
	margin: 0 auto;
	line-height: 1.5;
	max-width: 800px;
}

/* Grid */
.grid {
	position: relative;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	-ms-justify-content: center;
	justify-content: center;
	list-style: none;
	padding: 3em 0 0 0;
	margin: 0 auto;
	max-width: 1020px;
}

.grid__item {
	margin: 0 65px 100px;
	width: 100%;
}

.grid--xray .grid__item {
	margin: 0 20px 20px;
	width: 300px;
}

.grid__item-title {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1em;
	padding: 1em 0;
	font-weight: bold;
}

.grid__item-title code {
	color: #aaa;
	font-weight: normal;
	font-size: 0.85em;
}

.grid--xray .grid__img {
	width: 300px;
	height: 300px;
}

.grid__img img {
	max-width: 100%;
	display: block;
}

.grid__img--border .tilt__back,
.grid__img--border .tilt__front {
	border: 1px solid #333;
}

.grid__img--border .tilt {
	overflow: visible;
} 

/* Examples custom styles */
.grid--examples {
	max-width: 830px;
}

.grid--examples .grid__img {
	position: relative;
	height: 0;
	padding-bottom: 66.714%;
	overflow: hidden;
}

.grid--examples .tilt {
	position: absolute;
	top: 0;
}

.grid__img--example-2::after {
	content: '';
	position: absolute;
	box-shadow: inset 0 0 50px 30px rgba(2,0,37,0.8);
	pointer-events: none;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.grid__img--example-3 .tilt {
	-webkit-filter: grayscale(100%) brightness(105%) contrast(120%);
	filter: grayscale(100%) brightness(105%) contrast(120%);
	-webkit-transition: filter 0.5s, -webkit-filter 0.5s;
	transition: filter 0.5s, -webkit-filter 0.5s;
}

.grid__img--example-3 .tilt:hover {
	-webkit-filter: none;
	filter: none;
}

.grid__img--example-4 .tilt {
	width: 120%;
	height: 120%;
	top: -10%;
	left: -10%;
}

/* Definition list */
.def-list {
	max-width: 900px;
	background: #f0f0f0;
	border-radius: 10px;
	margin: 1em auto;
	padding: 3%;
}

.def-list dt {
	font-family: 'Avenir', 'Helvetica', Arial, sans-serif;
}

.def-list dt:not(:first-child) {
	margin-top: 2em;
}

.def-list dd {
	margin: 0;
	font-size: 0.95em;
	line-height: 1.4;
}

/* Related demos */
.content--related {
	text-align: center;
	font-weight: bold;
	padding: 8em 0;
}

.media-item {
	display: inline-block;
	padding: 1em;
	vertical-align: top;
	-webkit-transition: color 0.3s;
	transition: color 0.3s;
}

.media-item__img {
	max-width: 100%;
	opacity: 0.7;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.media-item:hover .media-item__img,
.media-item:focus .media-item__img {
	opacity: 1;
}

.media-item__title {
	margin: 0;
	padding: 0.5em;
	font-size: 1em;
}

@media screen and (min-aspect-ratio: 1440/960) {
	.hero__imgwrap .tilt__back,
	.hero__imgwrap .tilt__front,
	.codrops-header {
		background-size: 100vw auto;
	}
	.hero__img {
		width: 100vw;
		height: auto;
	}
}

@media screen and (max-width: 460px){
	
	.hero {
		left: 0px;
		bottom: 0px;
		right: 0px;
		top: 0px;
	}
	p {font-size: 16px;}
	.btn-lg {font-size: 19px !important;}
	section {padding:2em 0;}
	#author {padding-top: 0px;}
	#author .content {padding-top: 0em; margin-top: -2em;
		
	}
	.content {padding-top: 0px;}
	.tag {line-height: 15vh; font-size: 1.6em;
	}
}


.retailer {margin-bottom: 20px;}















/* MODAL STYLES */
/* General styles for the modal */

/* 
Styles for the html/body for special modal where we want 3d effects
Note that we need a container wrapping all content on the page for the 
perspective effects (not including the modals and the overlay).
*/
.md-perspective,
.md-perspective body {
	height: 100%;
	overflow: hidden;
}

.md-perspective body  {
	background: #222;
	-webkit-perspective: 600px;
	-moz-perspective: 600px;
	perspective: 600px;
}

.container {
	background: #e74c3c;
	background: transparent;
	min-height: 100%;
}

.md-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 50%;
	max-width: 630px;
	min-width: 320px;
	height: auto;
	z-index: 2000;
	visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.md-show {
	visibility: visible;
}

.md-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	visibility: hidden;
	top: 0;
	left: 0;
	z-index: 1000;
	opacity: 0;
	background: rgba(143,27,15,0.8);
	background: rgba(33,33,33,0.9);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.md-show ~ .md-overlay {
	opacity: 1;
	visibility: visible;
}

/* Content styles */
.md-content {
	color: #fff;
	background: #e74c3c;
	position: relative;
	border-radius: 3px;
	margin: 0 auto;
}

.md-content h3 {
	margin: 0;
	padding: 0.4em;
	text-align: center;
	font-size: 2.4em;
	font-weight: 300;
	opacity: 0.8;
	background: rgba(0,0,0,0.1);
	border-radius: 3px 3px 0 0;
}

.md-content > div {
	padding: 15px 40px 30px;
	margin: 0;
	font-weight: 300;
	font-size: 1.15em;
}

.md-content > div p {
	margin: 0;
	padding: 10px 0;
}

.md-content > div ul {
	margin: 0;
	padding: 0 0 30px 20px;
}

.md-content > div ul li {
	padding: 5px 0;
}

.md-content button {
	display: block;
	margin: 0 auto;
	font-size: 0.8em;
}



/* Effect 12:  Just me */
.md-effect-12 .md-content {
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-ms-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.md-show.md-effect-12 ~ .md-overlay {
	background: #e74c3c;
	background: rgba(14,14,14,0.95);
} 

.md-effect-12 .md-content h3,
.md-effect-12 .md-content {
	background: transparent;
}

.md-show.md-effect-12 .md-content {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}


@-webkit-keyframes OpenTop {
	50% { 
		-webkit-transform: rotateX(10deg); 
		-webkit-animation-timing-function: ease-out; 
	}
}

@-moz-keyframes OpenTop {
	50% { 
		-moz-transform: rotateX(10deg); 
		-moz-animation-timing-function: ease-out; 
	}
}

@keyframes OpenTop {
	50% { 
		transform: rotateX(10deg); 
		animation-timing-function: ease-out; 
	}
}

.md-effect-19 .md-content {
	-webkit-transform: translateY(-200%);
	-moz-transform: translateY(-200%);
	-ms-transform: translateY(-200%);
	transform: translateY(-200%);
	opacity: 0;
}

.md-show.md-effect-19 .md-content {
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
	opacity: 1;
	-webkit-transition: all 0.5s 0.1s;
	-moz-transition: all 0.5s 0.1s;
	transition: all 0.5s 0.1s;
}

@media screen and (max-width: 32em) {
	body { font-size: 75%; }
}