@import url(https://fonts.googleapis.com/css?family=Arvo:700,400|Open+Sans:800,600,300);

/* ========= CSS RESET =============
====================================
   http://meyerweb.com/eric/tools/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: 1em;
}
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;
}

img {
	vertical-align:top;
}


/* ========= GENERIC STYLES =========
====================================
 */


html {
  /*overflow-y: scroll;*/
}

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

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

a:hover {
  color: #de6500;
  text-decoration: underline;
}

body {
  font-family: 'Open Sans', Helvetica, sans-serif;  
  font-size: 2em;
  line-height: 1.5em;
  color:#ddd;
  background-color: #000;
  text-align:center;
}

img {
  width: auto;
  max-width: 100%;
  height: auto;
  border: 0;
}

p { 
  font-weight:300;
  margin: .7em 0;
  text-shadow: 0 0 10px #000000;
}

h1 {
	font-family: 'Arvo', "Times", serif;
	font-weight: 700;
	letter-spacing:3px;
	font-size:2.5em;
	line-height:1.15em;
	text-align:center;
	/*
	background: linear-gradient(0deg, #aeaeae 0%, #aeaeae 25%, #ffffff 50%, #aeaeae 75%, #aeaeae 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	*/
	margin-top:.25em;
}

h3 {
	font-family: 'Arvo', "Times", serif;
	font-weight: 700;
	letter-spacing:2px;
	font-size:1.15em;
	line-height:1.25em;
	text-align:center;
	margin-top:1.5em;
	margin-bottom:1em;
}

h4 {
	font-family: 'Open Sans', "Helvetica", serif;
	font-size:1.5em;
	font-weight: 600;
	margin:.5em 0;
}

ul {
	list-style-type:disc;
	margin-left:1em;
}

.clear {
	clear:both;
}

.bold {
	font-weight:600;
}	

.lg-text {
	font-size:1.25em;
}

ul {
	margin:.5em 0 1em 2em;
	list-style-type:disc;
	font-weight:300;
}	




/* ========= H2 STYLES =========
====================================
 */
h2 {
	font-family: 'Open Sans', "Helvetica", serif;
	font-weight: 800;
	letter-spacing:1px;
	text-align:center;
	color:#ffffff;
	text-shadow: 0px 0px 30px rgba(0, 0, 0, .75);
}

.h2-anim{
	opacity: 0.75;
	font-size:6.75em;
}

.h2-right {
	float:right;
	margin-right:50px;
}

.h2-left {
	float:left;
	margin-left:50px;
}

.h2-overflow {
	overflow:hidden;
}




/* ========= LAYOUT STYLES =========
====================================
 */

/* clearfix */
.wrapper:after{
  content: " "; 
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

.container {
	width:100%;
	max-width:1250px;
	margin: 0 auto;
	padding:0 25px;
	overflow:hidden;
}

.col-left, .col-right {
	width:50%;
}

.col-left {
	float:left;
}

.col-right {
	float:right;
}

.choice-box {
	width:80%;
	margin: 0 auto;
}

.choice-box img {
	border-radius:10px;
	-webkit-box-shadow: 0px 0px 17px 3px rgba(0, 0, 0, 1);
	-moz-box-shadow:    0px 0px 17px 3px rgba(0, 0, 0, 1);
	box-shadow:         0px 0px 17px 3px rgba(0, 0, 0, 1);
	width:50%;
}

.choice-box p {
	margin: .2em 0 1em;
	letter-spacing: 3px;
	line-height:1.25em;
}

.choice-box a:hover {
	opacity:.75;
}



/* ========= BELIEVE STYLES =========
====================================
 */
  
#believe {
 	background: url('images/gurwitz-believe.jpg') no-repeat left 80px;
 	background-size:initial;
 }
 
#believe .col-left {
 	padding-top:2em;
 }
 
#believe .h2-anim {
 	padding:.5em 0 1em;
 	font-size:6em;
 }
 
.tag-video {
	margin-top:2em;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    margin:1.5em 0 1em 0;
    height: 0; 
    overflow: hidden;
	-webkit-box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.95);
	-moz-box-shadow:    0px 0px 20px 5px rgba(0, 0, 0, 0.95);
	box-shadow:         0px 0px 20px 5px rgba(0, 0, 0, 0.95);
}
    
.video-container iframe,.video-container object,.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}




/* ========= COMMIT STYLES =========
====================================
 */
 #commit {
 	background: url('images/clemens-commit.jpg') no-repeat right top;
 	background-size:initial;
 }
 
#commit .container:nth-child(1) {
	margin-top:2em;
}
 
#commit .h2-anim {
	padding: .5em 0 1em;
	font-size: 5em;
}

#commit .h2-overflow {
	margin-top: -9em;
	padding-bottom:1em;
}

.buy-button {
	float:left;
	margin:0 auto;
	width:45%;
}

.buy-button a {
	background: #f1f0f0; /* Old browsers */
	background: -moz-linear-gradient(top,  #f1f0f0 48%, #e0e0e0 48%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #f1f0f0 48%,#e0e0e0 48%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #f1f0f0 48%,#e0e0e0 48%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f0f0', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */
	color:#bf5700;
	font-family: 'Arvo', "Times", serif;
	font-weight: 400;
	letter-spacing:2px;
	font-size:1.20em;
	display:block;
	width:100%;
	padding:.25em .1em;
	border-radius:10px;
}

.buy-button a:hover {
	background: #f1f0f0; /* Old browsers */
	background: -moz-linear-gradient(top,  #ccc 48%, #bbb 48%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #ccc 48%,#bbb 48%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #ccc 48%,#bbb 48%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccc', endColorstr='#bbb',GradientType=0 ); /* IE6-9 */
  	color: #444;
}

.greyed-out-button a {
	background: #f1f0f0; /* Old browsers */
	background: -moz-linear-gradient(top,  #ccc 48%, #bbb 48%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #ccc 48%,#bbb 48%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #ccc 48%,#bbb 48%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccc', endColorstr='#bbb',GradientType=0 ); /* IE6-9 */
  	color: #444;
}

.greyed-out-button a {
	text-decoration:none;
}

#renew-button {
	margin-right:10%;
}
 
.buy-button p {
	font-size:.5em;	
	line-height:1.5em;
}




/* ========= unite STYLES =========
====================================
 */
 
 #unite {
 	background: url('images/jones-unite.jpg') no-repeat left top;
 	background-size:initial;
 }

#unite .h2-anim {
	padding: .5em 0 .8em;
}

#unite .h2-overflow {
	margin-top:-10em;
	padding-bottom:2em;
}

#questions {
	font-size:.8em;
	margin-top:1em;
	line-height:1.5em;
}


 

/* ========= FOOTER STYLES =========
====================================
 */
#footer {
	font-size:.5em;
}

#footer a:link, #footer a:visited {
	text-decoration: underline;
}

#footer a:hover {
	text-decoration: none;
}



/* ========= POP UP BOXES =========
====================================
 */
.pop-up {
}

.pop-up:hover {
	background-color:#9c9796;
}

a.popup-with-zoom-anim {
outline:none;
}

/* Styles for dialog window */
.small-dialog {
background: #444;
padding: 1.5em;
text-align: left;
width:70%;
max-width: 600px;
margin: 40px auto;
position: relative;
border-radius: 10px;
line-height:1.5em;
font-size:.55em;
border: 2px solid #999;
}

.small-dialog p { 
  text-shadow: none;
}
.small-dialog a { 
  text-decoration:underline;
}
.small-dialog a:hover { 
  text-decoration:none;
  color:#ddd;
}
.small-dialog ul li {
	margin:1em 0;
}
.small-dialog ul li ul li {
	margin:0;
}

.mfp-close-btn-in .mfp-close {
    /* color: #ddd; */
}
/**
 * Fade-zoom animation for first dialog
 */

/* start state */
.my-mfp-zoom-in .small-dialog {
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
}
/* animate in */
.my-mfp-zoom-in.mfp-ready .small-dialog {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
/* animate out */
.my-mfp-zoom-in.mfp-removing .small-dialog {
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
opacity: 0;
}
/* Dark overlay, start state */
.my-mfp-zoom-in.mfp-bg {
opacity: 0;
-webkit-transition: opacity 0.3s ease-out;
-moz-transition: opacity 0.3s ease-out;
-o-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-zoom-in.mfp-ready.mfp-bg {
opacity: 0.8;
}
/* animate out */
.my-mfp-zoom-in.mfp-removing.mfp-bg {
opacity: 0;
}
/**
 * Fade-move animation for second dialog
 */

/* at start */
.my-mfp-slide-bottom .small-dialog {
opacity: 0;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
-webkit-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
-moz-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
-ms-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
-o-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
}
/* animate in */
.my-mfp-slide-bottom.mfp-ready .small-dialog {
opacity: 1;
-webkit-transform: translateY(0) perspective( 600px ) rotateX( 0 );
-moz-transform: translateY(0) perspective( 600px ) rotateX( 0 );
-ms-transform: translateY(0) perspective( 600px ) rotateX( 0 );
-o-transform: translateY(0) perspective( 600px ) rotateX( 0 );
transform: translateY(0) perspective( 600px ) rotateX( 0 );
}
/* animate out */
.my-mfp-slide-bottom.mfp-removing .small-dialog {
opacity: 0;
-webkit-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg );
-moz-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg );
-ms-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg );
-o-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg );
transform: translateY(-10px) perspective( 600px ) rotateX( 10deg );
}
/* Dark overlay, start state */
.my-mfp-slide-bottom.mfp-bg {
opacity: 0;
-webkit-transition: opacity 0.3s ease-out;
-moz-transition: opacity 0.3s ease-out;
-o-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-slide-bottom.mfp-ready.mfp-bg {
opacity: 0.8;
}
/* animate out */
.my-mfp-slide-bottom.mfp-removing.mfp-bg {
opacity: 0;
}





/* ========= MEDIA QUERIES =========
====================================
 */


@media screen and (max-width: 1375px) {
	
	#believe .h2-anim {
		font-size:5.5em;
	 }
	#believe .h2-right {
   		margin-right: 2%;
	}
	#commit {
 		background-size:65%;
 	}
 	#unite {
 		background-size:73%;
 	}
 	h3 {
 		margin-top: 1em;
 	}
	.h2-anim{
		font-size:5.75em;
	}
	.h2-right {
		margin-right:5%;
	}
	#unite	.h2-anim{
		font-size:6.25em;
	}
	.tag-video {
		margin-top:1.5em;
	}
	
}

@media screen and (max-width: 1200px) {
 	#believe {
 		background-size:85%;
	}
 	h1 {
 		font-size:2em;
 	}
	.h2-anim{
		font-size:5em;
	}
	.h2-right {
		margin-right:7%;
	}
	#unite	.h2-anim{
		font-size:5.75em;
	}
	#unite .h2-overflow {
		margin-top:-12em;
		padding-bottom:4em;
	}
	.tag-video {
		margin-top:1em;
	}
 	#commit .h2-anim {
		font-size: 4.5em;
	}
}

@media screen and (max-width: 1100px) {
	.h2-anim{
		font-size:4.5em;
	}
	.h2-right {
		margin-right:6%;
	}
	#believe .h2-anim {
		font-size:4.4em;
	 }
	#commit .col-left {
		margin-top:.5em;
	}
	#commit .h2-overflow {
		margin-top: -9em;
		padding-bottom:2em;
	}
	#unite .h2-overflow {
    	margin-top: -9em;
	}
	#unite	.h2-anim{
		font-size:5em;
	}
	.choice-box p {
		font-size: .8em
	}
	h3 {
		font-size: 1em;
	}
	#commit .h2-anim {
		font-size: 3.75em;
	}
	.buy-button a {
		font-size:1em;
	}
	
}

@media screen and (max-width: 960px) {
 	
 	h1 {
 		font-size:1.5em;
 	}
 	.h2-anim{
		font-size:3.5em;
	}
	.h2-right {
		margin-right: 8%;
	}
	#unite {
 		background: url('images/jones-unite.jpg') no-repeat left 40px;
 		background-size:76%;
 		margin-top:0;
 	}
 	#unite	.h2-anim{
		font-size:4em;
	}
	#believe .h2-anim {
		font-size:3.5em;
	}
	#unite .h2-overflow {
    	margin-top: -5em;
    	padding-bottom: 1em;
	}
 	p {
 		font-size:.8em;
 	}
 	.video-container {
   	 	margin-top:1em;
	}
	.game-div p {
		font-size:.5em;
		letter-spacing:0px;
	}
	#games {
		margin-top:1em;
	}
 	.choice-box p {
		font-size: .7em
	}
	h3 {
		font-size: .8em;
	}
	.small-dialog p { 
  		font-size:1em;
  		margin:.7em 0;
	}
	.small-dialog .lg-text {
 		font-size:1.25em;
 	}
 	.buy-button a {
 		font-size:.85em;
 	}
 	#commit .h2-anim {
		font-size: 3.25em;
	}
	#commit .h2-overflow {
		margin-top: -8em;
	}
}

@media screen and (max-width: 850px) {
	.h2-right {
		margin-right:5%;
	}
	#games {
		margin-top:0;
	}
	.choice-box p {
		font-size: .6em
	}
	#questions {
		font-size:.7em;
	}
	#commit .h2-anim {
		font-size: 3em;
	}
	.buy-button a {
		font-size:.75em;
	}
	
}


@media screen and (max-width: 750px) {
 	body {
 		line-height:1.2em;
 	}
 	.container {
 		padding: 0;
 	}
 	p {
 		margin:.1em 0;
 	}
 	h1 {
 		font-size:1.5em;
 	}
 	.col-left, .col-right {
		width:100%;
	}
	.col-left, .col-right {
		float:none;
	}
	.h2-right, .h2-left {
		float:none;
		margin-right:0;
		margin-left:0;
	}
	.h2-anim {
		font-size:4.5em;
	}
	.video-container {
   	 	margin-top:1em;
	}
	h3 {
		font-size: 1.15em;
	}
	#believe {
 		background: url('images/gurwitz-believe-750.jpg') no-repeat left 600px;
 		background-size:100%;
	}
	#believe .h2-overflow {
   		margin-top: 8em;
   		padding-bottom: 1em;
	} 
	#unite, #commit {
 		background:none;
 	}
 	h3 {
 		margin-top:0;
 	}
 	#unite .h2-overflow {
		margin-top:0;
	}
 	.choice-box img {
		width:auto;
	}
	.choice-box p {
		font-size: .8em;
		margin: .25em 0 1.25em;
	}
	.buy-button {
		margin: 1em 5% 1.5em 5%;
		width:42.5%;
	}
	#renew-button {
		margin-right:0;
	}
	.buy-button p {
		margin-top:1em;
	}
	#unite .buttons-container  {
    	padding-top: 0em;
	}
	#commit .h2-overflow {
		margin-top:0;
		padding-bottom:0;
	}
	#commit .col-left {
		margin-top: 0;
	}
	.small-dialog {
		width:95%;
	}
	h4 {
		font-size:1.25em;
	}
}

@media screen and (max-width: 550px) {
 	h1 {
 		font-size:1.9em;
 	}
 	.h2-anim {
 		font-size:3em;
 	}	
 	#games {
		margin-top:0;
	}
	h3 {
		font-size: .7em;
	}
	.small-dialog {
		padding: .5em;
	}
	.choice-box {
		width:100%;
	}
	#believe {
 		background: url('images/gurwitz-believe-750.jpg') no-repeat left 600px;
 		background-size:100%;
	}
	#believe .h2-overflow {
   		margin-top: 6em;
	} 
	#believe .h2-anim {
		font-size: 3em;
	}
	#commit .h2-anim {
		font-size: 2.75em;
	}
 }
 @media screen and (max-width: 450px) {
 	h1 {
 		font-size:1.25em;
 	}
 	.buy-button a {
 		font-size:.65em;
 	}
 	#believe {
 		background: url('images/gurwitz-believe-750.jpg') no-repeat left 500px;
 		background-size:100%;
	}
	#believe .h2-overflow {
   		margin-top: 4em;
	} 
	#believe .h2-anim {
		font-size: 2.5em;
	}
 	#commit .h2-anim {
		font-size: 2.25em;
	}
	#unite	.h2-anim{
		font-size:3em;
	}
 }