@import url(https://fonts.googleapis.com/css?family=Lato:400,300,700,400italic);

body {
	background-color: #000000;
	color: #ffffff;
	font-family: 'Lato', 'Helvetica', 'Arial', sans-serif;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
    font-size: 14px;
    text-align: center;
    line-height: 1.4;
}

a {
	color: #ffffff;
	font-weight: 700;
	text-decoration: none;
	text-transform: lowercase;
}

strong {
	font-weight: 700;
}

section div {
	max-width: 960px;
	margin: 0 auto;
}

ol {
	margin: 0;
	padding: 0;
}

.home nav {
  margin-right: 1rem;
}

nav,
nav ol {
	display: block;
	text-align: right;
	padding: 0.26rem 0 0.86rem 0;
	font-size: 0.86rem;
}

nav ol li {
	list-style: none;
	display: inline-block;
	margin: 0 0.3rem;
}

nav ol .twitter img,
nav ol .facebook img,
nav ol .instagram img {
	width: 100%;
}

nav ol li.twitter,
nav ol li.facebook,
nav ol li.instagram {
	display: inline-block;
	position: relative;
	bottom: -6px;
	margin: 1rem 0.4rem;
}

@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {

    .home nav ol li {
      margin: 0 0.3rem;
    }

  	.home nav ol li.twitter,
    .home nav ol li.facebook,
  	.home nav ol li.instagram {
  		max-width: 24px;
  		bottom: -8px;
  	}
 }

h1 a {
	display: block;
	font-size: 3.6rem;
	background-image: url(../images/logo.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	max-width: 220px;
	margin: 1rem auto 3rem;
	text-indent: -9999px;
}

nav ol li.current a {
	color: #5bb4ff;
}

nav ol li.logo {
	display: inline-block;
	float:left;
	position: relative;
	bottom: -0.8rem;
}

nav ol li.logo a {
	background-image: url(../images/logo.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	text-indent: -9999px;
	padding: 1.8rem;
	color: transparent;
}

@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {

    nav ol li.logo {
      bottom: -1rem;
    }

    nav ol li.logo a {
      padding: 1.2rem;
      margin-left: 1rem;
      position: relative;
      top: -6px;
    }

 }

h3 {
	font-size: 1.4rem;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 5px;
}



ul.action-buttons {
	list-style: none;
	padding: 0;
}

ul.action-buttons li {
	display: inline-bl.stay-updated
	margin-right: 1.3rem;
}

ul.action-buttons li:last-child {
	margin-right: 0;
}

.learn-more {
	display: block;
	max-width: 100px;
	margin: 3rem auto;
	padding-top: 36px;
	text-transform: uppercase;
	font-size: 0.8rem;
	font-weight: 400;
	letter-spacing: 1px;
	background: url(../images/learn-more.svg) no-repeat center top;
}

/*Section Intro*/
body section#intro {
	background: url(../images/black-white-city.png) no-repeat center top;
	background-size: cover;
	padding-bottom: 2rem;
  position: relative;
  z-index: 0;
}
body section#intro:after {
  content: "";
  pointer-events: none;
  display: block;
  height: 200px;
  z-index: -1;
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.01) 1%, rgba(0,0,0,0.74) 68%, rgba(0,0,0,1) 92%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.74) 68%,rgba(0,0,0,1) 92%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.74) 68%,rgba(0,0,0,1) 92%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */*/
}

section#intro h3 {
	max-width: 460px;
	margin: 3rem auto;
}

section#intro div > img {
	width: 85%;
	max-width: 598px;
}

@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {

  	section#intro h1 a {
  		max-width: 160px;
  		font-size: 2.4rem;
  	}

  	section#intro h3 {
  		font-size: 0.9rem;
  		max-width: 310px;
  		margin-top: 1.4rem;
  	}

  }

/*Section Calls Received*/
section#calls-received {
	background: url(../images/map.png) no-repeat center center;
	background-size: cover;
	padding: 3rem 0;
}

section#calls-received h3 {
	color: #5bb4ff;
	font-weight: 700;
	font-size: 2.6rem;
	margin-top: 0rem;
	margin-bottom: 0;
}

section#calls-received p{
	text-transform: uppercase;
	letter-spacing: 2px;
	max-width: 175px;
	margin: 0.2rem auto;
}

/*Section What is Vigilante*/

section#what-is-vigilante {
	padding-top: 8rem;
	margin-bottom: 5rem;
}

section#what-is-vigilante h2 {
	font-size: 2.3rem;
	letter-spacing: 3px;
	margin: 0 auto 8rem;
}

.highlights li {
	margin: 5rem auto;
	max-width: 800px;
	list-style: none;
}

.highlights li:after {
	content: "";
	display: block;
	clear: both;
}

.highlights li .text {
	max-width: 400px;
	text-align: left;
	padding-top: 9rem;
	margin-left: 0;
}

.highlights li img {
	float: right;
  width: 100%;
  max-width: 270px;
}


.highlights li:nth-child(even) .text {
	margin-left: 20rem;
}

.highlights li:nth-child(even) img  {
	float: left;
}

/* Portrait */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {

  	.highlights li img,
  	.highlights li:nth-child(even) img {
		float: none;
	}

	.highlights li .text,
	.highlights li:nth-child(even) .text {
		margin: 0 auto;
		text-align: center;
		padding-top: 0;
	}

	.highlights h3 {
		margin-bottom: 0;
		margin-top: 2.4rem;
		font-size: 0.9rem;
		letter-spacing: 3px;
	}

	.highlights li {
		padding: 0 2rem;
	}

	section#what-is-vigilante .action-buttons {
		margin: 7rem auto;
	}

}

/*Section Content*/
h3.statement-header {
	letter-spacing: 0.05em;
	font-size: 24px;
}
section#content {
	text-align: left;
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 0.05rem;
}

/*Section Stay Updated*/

section.stay-updated {
	padding: 2rem 0;
}

section.stay-updated-normal {
	background-color: #13171f;
}

section.stay-updated-transparent {
	background: none;
}


section.stay-updated form input {
	outline: none;
}

section.stay-updated form input[type="email"] {
	background: #4c5057;
	color: #ffffff;
	border: none;
	font-size: 0.8rem;
	font-family: 'Lato', 'Helvetica', 'Arial', sans-serif;
	font-style: italic;
	padding: 0.7rem 0.8rem 0.9rem 0.8rem;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	min-width: 180px;
	-webkit-appearance: none;

}

section.stay-updated form input[type="submit"] {
	text-transform: uppercase;
	border: none;
	font-size: 0.8rem;
	font-family: 'Lato', 'Helvetica', 'Arial', sans-serif;
	font-weight: 700;
	background: #ffffff;
	padding: 0.7rem 1.8rem 0.9rem 1.8rem;
	letter-spacing: 2px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	cursor: pointer;
	-webkit-appearance: none;

}

section.stay-updated form label {
	display: block;
	margin: 0 auto 1rem;
	max-width: 300px;
}

section.stay-updated form.success input[type="submit"] {
	background: #10cf3b url(../images/ok.svg) no-repeat center center;
	color: white;
	text-indent: -9999px;
	padding-left: 3rem;
	padding-right: 3rem;
}

section.stay-updated form.error input[type="submit"] {
	background: #D13F3F url(../images/x-white.svg) no-repeat center center;
	color: white;
	text-indent: -9999px;
	padding-left: 3rem;
	padding-right: 3rem;
}

/*Section Mission*/

body.mission {
  background-color: #13171f;
}

section#mission {
	background: url(../images/black-white-city.png) no-repeat center top;
	background-size: cover;
	padding-bottom: 4.5rem;
}

section#mission nav {
	margin-bottom: 6rem;
}

section#mission div > img.eyes {
	max-width: 80px;
	margin: 1rem auto;
}

section#mission p {
	max-width: 700px;
	line-height: 1.7;
	margin: 1rem auto 1.618rem;
}

section#mission p span {
	display: block;
}

section#mission p span.crime-no-more {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
}

section#mission .action-buttons {
	margin: 6rem auto;
}

@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {

  	section#mission p { padding: 0 3rem; }
  	section#mission p span { display: inline; }
}

/* Section: Copyright */

section#copyright {
	background-color: #13171f;
}

section#copyright p {
	font-size: 0.8rem;
	color: #4c5057;
	margin: 0;
	padding-bottom: 2rem;
}

section#copyright p a {
	color: #4c5057;
	margin-left: 2px;
	font-family: 'Andele Mono', 'Lato', 'Helvetica', 'Arial', sans-serif;
}

/* LANDING PAGE */

body.landing section#intro {
  padding-bottom: 0;
  padding-top: 7.618rem;
}

body.landing h1 {
  margin-top: 0;
  margin-bottom: 0;
}
body.landing h1 a {
  max-width: 160px;
  margin-top: 0;
  margin-bottom: 0;
}
body.landing section#intro h3 {
  font-size: 0.8rem;
  letter-spacing: 2px;
  margin-top: -0.618rem;
}


body.landing nav ol li.twitter img,
body.landing nav ol li.facebook img,
body.landing nav ol li.instagram img {
  width: 100%;
  max-width: 20px;
}

body.landing nav ol {
  text-align: center;
}

.responsive-video {
   max-width: 640px;
   width: 100%;
   position: relative;
   padding-bottom: 40%;
   height: 0;
}

.responsive-video iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

/* Mobile */
@media only screen
  and (max-width: 640px){

    #intro {
      padding: 1.2rem;
    }

    body.landing section#intro h3 {
      font-size: 1rem;
      letter-spacing: 2px;
      margin-top: 0rem;
    }

    body.landing .embedded-video {
      max-width: 320px;
      width: 100%;
      margin-bottom: 2rem;
    }


    body.landing nav ol li.twitter img,
    body.landing nav ol li.facebook img,
    body.landing nav ol li.instagram img {
      width: 30px;
      max-width: 30px;
    }

    .responsive-video {
       padding-bottom: 78%;
    }

}