/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */

/* apply a natural box layout model to all elements */
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

 header {
 	 background: #2c75ce;
 	 position: fixed;
 	 width: 100%;
 	 display: block;
 	 z-index: 99;
 	 border-bottom: 1px solid #063d75;
 }

 #main_nav {
 	z-index: 98;
 	line-height: 2em;
 	font-size: 1em;
 }

 #main_nav a {
 	padding: 0 .75em;
 	text-decoration: none;
 	color: white;
 }

 #main_nav a:active {
 	background: #063d75;
 }

 #main_nav img {
 	max-height: 1.25em;
 	position: relative;
 	top: 6px;
 	float: right;
 	margin-right: 1em;
 }

 .em {
 	font-weight: 300;
 	margin-bottom: 3em;
 	text-align: center;
 }

 #headline {
 	background: #fff;
 	padding: 2.5em 0;
 }

 /*Mobile Page 1 Styles */
 #instafeed img {
 	width: 20%;
 	margin-top: -2px;
 	overflow: hidden;

 }

#holder {
	 position: absolute;
	 width: 100vw;
	 height: 80vw;
	 top: 2em;
	 text-align: center;


}

.helper {
	height: 100%;
	vertical-align: middle;
	display: inline-block;
}

#holder img {
	vertical-align: middle;
}

 #logo {
 	margin: 0 auto;
 	max-width: 70%;

 }
 .center {
 	text-align: center;
 }

 #instafeed {

 	width: 100vw;
 	height: 80vw;
 	overflow: hidden;
 }

 #section1 {
 	padding-top: 2em;
 }

 #section2 {
 	background: #063d75;
 	color: #eee;
 	padding: 3em 0;
 }

 #section3 {
 	padding: 3em 0;
 	text-align: center;
 	line-height: 1.5em;
 	font-size: 1em;
 }

 .green_button {
 	background: #2c75ce;
 	line-height: 2.5em;
 	display: block;
 	text-align: center;
 	color: #fff;
 	text-decoration: none;
 	font-weight: bold;
 	border-radius: .5em;
 	border-top: 1px solid #80ACE2;
 	border-bottom: 1px solid #063d75;
 	padding: 0 3em;
 	width: 15em;
 	margin: 0 auto;
 }

 .green_button:visited {
 	color: #eee;
 }

 .video-container {
 	position: relative;
 	padding-bottom: 56.25%;
 	padding-top: 2em;
 	height: 0;
 	overflow: hidden;
 	margin-bottom: 2em;
 }

.video-container iframe,
.video-container embed,
.video-container object {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.img-center {
	display: block;
	margin: 0 auto 2em;
}

#footer1 {
	background: #2c75ce;
	color: white;
}

#footer1 h6{
	line-height: 2.5em;
}

#footer1 h6 a img {
	max-height: 1em;
	margin-left: 1em;
}

#footer2 {
	line-height: 1.5em;
	background: #063d75;
	color: white;
}

.footer_nav a {
	text-decoration: none;
	color: white;
	margin-right: .5em;
}

.footer_nav a:visited {
	color: white;
}

.amazon_button {
	display: inline-block;
	margin: .5em auto 0;
	width: 282px;
	float: right;
}

#money {
	display: inline-block;
}

#money h6,
#money h1 {
	display: inline-block;
}

#money h6 {	color: #bbb;}
.number {
	color: #2c75ce;
	font-weight: 900;
	letter-spacing: -2px;
	font-size: 6em;
	margin-right: .075em;
}

#tagline {
	background: #333;
	color: #eee;
	padding: 3em 0;
}

#tagline div h4 {
	font-size: 2.5em;
	font-weight: 400;
	text-align: center;
	font-style: italic;
}

#manifesto {
	padding: 3em 0;
	background: #666;
	color: #eee;
	}

#manifesto div h4 {
	font-weight: 300;
	font-size: 2em;
	text-align: center;
	line-height: 2em;
}

.cool {
	font-size: 2.5em;
	font-weight: 900;
	text-align: center;
	font-style: italic;
	margin-bottom: .25em;
}

#steps {
	padding: 2em 0 0;
	background: #2c75ce;
	color: #eee;
}


#steps div div {
	text-align: center;
	margin-bottom: 2em;
}

#steps div div h5{
	font-weight: 300;
}

.headerr {
	margin-bottom: 1em;
}

#section4 {
	padding: 3em 0;
}

.selfie-holder {
	overflow: auto;
	margin-bottom: 2em;
}

.selfie iframe {
	margin-bottom: 10em;
	border-radius: .5em;
	border-top: 1px solid white;
	box-shadow: 0 0 1em #ddd;
	border-bottom: 1px solid #ddd;
	overflow: auto;
	display: block;
}

.steps {
	max-width: 5em;
	margin-bottom: 1em;
	display: inline;
}

.spunk img, 
.spunk div {
	display: inline-block;
	float: left;

}

.spunk img {
	margin-right: 1em;
}

.spunk div {
	max-width: 12em;

}

.spunk div h4,
.spunk div p {
	text-align: left;
}

.embed-container {
	position: relative; 
	padding-bottom: 120%; 
	padding-top: 30px; 
	height: 0; 
	overflow: hidden;
} 

.embed-container iframe, 
.embed-container object, 
.embed-container embed { 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
}


/* #Tab
================================================== */

.tabs input[type=radio] {
          display: none;
      }

.tabs {
        width: 100%;
        float: none;
        list-style: none;
        position: relative;
        padding: 0;
        margin: 2em auto 18em;
      }

.tabs li{
        float: left;
      }

.tabs label {
	display: block;
	padding: 0 3em;
	font-size: 1em;
	cursor: pointer;
	font-style: italic;
	border-top-right-radius: .5em;
	border-top-left-radius: .5em;
	background: #d7d7d7;
	margin-right: .5em;
	color: #383838;
	line-height: 3em;
	border-top: 1px solid white;

  }


       
[id^=tab]:checked + label {
	background: #eee;
	color: #383838;
	top: 0;
}
       
[id^=tab]:checked ~ [id^=tab-content] {
	display: block;
}

.tab-content{
	z-index: 2;
	display: none;
	text-align: left;
	width: 100%;
	padding: 1em 2em;
	background: #eee;
	color: #383838;
	position: absolute;
	top: 2.4em;
	left: 0;
	height: 7em;
	border-bottom-left-radius: .5em;
	border-bottom-right-radius: .5em;
	text-align: center;
	font-size: 1.25em;

}

.tab-content p {
	line-height: 1.5em;
}

#instructions {
	color: #999;
	font-size: .75em;
	line-height: 1em;
	text-align: center;
	margin-bottom: 1em;
}







/* #Page Styles
================================================== */

.firsty {
	padding-top: 4em;
	padding-bottom: 1em;
}

.big_time {
	font-weight: 900;
	font-size: 7.5em;
	display: block;
	float: left;
	letter-spacing: -7px;
}

.callout {
	font-style: italic;
}

figure {
	margin-bottom: 6em;
}

figcaption {
	width: 100%;
	margin-top: 1em;	
}

figcaption a {
	display: block;
	width: 50%;
	float: left;
	font-size: 1.5em;
	text-decoration: none;
	line-height: 1em;
}

figcaption a img {
	max-height: 1.125em;
	margin-right: .25em;
	position: relative;
	top: .25em;
}

.fb-share-button {
	position: inline;
}

#donate-more {
	margin: 2em auto;
	display: block;
	width: 289px;
	float: right;
}

.twitter-share-button {
	position: relative;
	top: 2px;
	margin-left: 1em;
}

#whats-next {
	background: #2c75ce;
	text-align: center;
	color: #eee;
	padding: 1em;
}

#whats-next h3 {
	font-size: 3em;
	font-weight: 300;
}

#lists {
	background: #333;
	color: #eee;
}

.callouter {
	font-size: 1.25em; 
	font-weight: 600; 
	font-style: italic; 
	text-align: center;
	line-height: 3em;
}

#lists2 {
	background: #eee;
	padding: 2em 0;
}

#lister li {
	margin: 0;
	margin-bottom: 3em;
	display: block;
}

.lefty {
	max-height: 3em;
	padding: .5em;
	border-top: 1px solid #80ACE2;
 	border-bottom: 1px solid #063d75;
 	background: #2c75ce;
 	display: inline-block;
 	border-radius: 1.5em;
 	margin-right: 1em;

}

.lefty img {
	max-height: 2em;
}

#sharediv {
	padding: 1em;
	background: #2c75ce;
	text-align: center;
}


/* #Media Queries
================================================== */



	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (min-width: 960px) {
		#instafeed {
			width: 100vw;
			height: 21.8vw;
		}
		#instafeed img {
			width: 11.1111111%;
		}
		#holder {
			width: 100vw;
			height: 22.22222vw;
		}
		#logo {
			max-height: 30vh;

		}
	}

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {


	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 959px) {
		#instafeed img {
			width: 12.5%;
		}
		#holder {
			height: 37.5vw;
		}

		#logo {
			max-height: 11em;
		}
		#instafeed {
			height: 37.5vw;
		}
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		.amazon_button {
			float: none;
			margin: 0 auto 2em;
			display: block;
			width: 282px;
		}
		#money h6,
		#money h1 {
			display: block;
			text-align: center;
			width: auto;
		}
		#money {
			width: 100%;
		}

		#money h1 {
			margin-bottom: .075em;
		}
		#money h6 {
			margin-bottom: 3em;
		}
		#tagline div h4 {
			font-size: 1.5em;
		}
		#manifesto div h4 {
			font-size: 1.5em;
		}
		#steps div div {
			margin-bottom: 2em;
		}
		.tab-content {
			height: 9em;
		}
		.tabs label {
			padding: 0 2em;
		}
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		.tab-content {
			height: 14em;
		}
		.tabs label {
			padding: 0 1em;
		}
		.tabs {
			margin-bottom: 23em;
		}

		figcaption a {
			font-size: 1em;
		}

		figcaption a img {
			max-height: 1em;
			margin-right: .5em;
			position: relative;
			top: .25em;
		}

		 #main_nav a {
 			padding: 0 .25em;
 		}
	}

	@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) { #logo {
	max-width: 200em;
	}}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('http://selfiepolice.org/fonts/FontName.eot');
	    src: url('http://selfiepolice.org/fonts/FontName.eot?iefix') format('eot'),
	         url('http://selfiepolice.org/fonts/FontName.woff') format('woff'),
	         url('http://selfiepolice.org/fonts/FontName.ttf') format('truetype'),
	         url('http://selfiepolice.org/fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/