@font-face {
  font-family: DoodleSans;
  src: url(DoodleSans-Regular.ttf);
}


html{
height: 100%;
}

body{
	font-family: DoodleSans, cursive;
	font-size: 3em;
	background-image: url(../img/bg.png) no-repeat;
    background-size: 100%;
	background-position: bottom;
	line-height: 1.25em;
	background-color: #c8bcff;
}

.header2 {
	position: relative;
	text-align: center;
	margin: 120px auto 0;
	max-width: 960px;
	background: url(../img/bg.png) bottom no-repeat;
	background-size: 100%;
	width: 100%;
	height: 320px;
}

.container{
	margin-top: 400px;
	width: 100%;
	max-width: 960px;
}	
.pressbox {
	margin-top: 24px;
	width: 100%;
	max-width: 960px;
	font-size: .66em;
	line-height: 30px; 
	font-family: Open Sans, Helvetica, sans-serif;"
}	
.pressbox a{
	text-decoration: none;
}
.pressbox a:hover{
	color: #ffc698;
}

.header {
	background-image: url("../img/bg.png");
	max-width: 500px;
	width: 100%;
	background-size: 400px;
}
.header-scroll {
	position: fixed;
	background-size: 100%;
	background-repeat: no-repeat;

	width: 100%;
	max-width: 960px;
	bottom: 0
	left: 50%;
	transform: translateX(-50%);
}

.middle {
text-align: center;
border-radius: 0px;
padding: 24px 10px;
border: 10px solid white;
background: #ffc698;
color: #3b3b3b;
margin-bottom: 128px;
  box-shadow: 0px 8px 32px rgba(72,25,128,.6);
}



.parallax {
	top: 0px;
}
.logo {
	background-image: url("../img/logo.png");
	max-width: 500px;
	width: 100%;
	background-size: 400px;
}
.logo-scroll {
	position: fixed;
	background-size: 100%;
	background-repeat: no-repeat;

	width: 100%;
	max-width: 960px;
	bottom: 0;

	left: 50%;
	transform: translateX(-50%);
}
.description {
	text-align: center;
	width: 80%;
	margin: 0 auto;
	max-width: 500px;
}

::selection {
	background: #71b2ba;
    color:#FFF;
	}
::-moz-selection {
	background: #71b2ba
    color:#FFF;
}
::-webkit-scrollbar {
    background: ffc698;
    padding:2px;
}
::-webkit-scrollbar-button {
    background: white;
}
::-webkit-scrollbar-thumb {
    background: #ffc698;
    border:2px solid white;
}

.nope{display:none;}

.acknowledgement{
	font-size: .66em;
	margin: 64px 0 0;
	line-height: 1em;
}

.screenshots {
	margin: 0 auto;
	text-align: center;
}

.screenshots img{
	width: 100%;
	max-width: 320px;
}

a:hover{
	color: #fff;
	}
a{
	color: #71b2ba;
	}
input#email2 {
  padding:20px 10px;
  margin-bottom:10px;
  border-radius: 0;
  background: none;
  border: none;
  border-bottom: 0px solid black;
  width: 33%;
  min-width: 320px;
  background: rgb(220,220,220);
border: 1px solid white;
  
}
input#email2:hover {
  background: white;
	color: #71b2ba;
border: 1px solid #ffc698;
}

input#email {
  font-family: DoodleSans, cursive;
  padding:20px 10px;
  margin-bottom:10px;
  border-radius: 0;
  background: none;
  border: none;
  border-bottom: 0px solid black;
  width: 33%;
  min-width: 320px;
  background: rgba(255,255,255,.25);
  
}

input#email:hover {
	background: white;
	color: #71b2ba;
}

button#submit {
  text-transform: uppercase;
  font-weight:bold;
  padding:0px 10px 1px;
  font-size:20px;
  text-weight: 700;
  font-family: Open Sans;
  line-height:32px;
  transition:0.1s;
    margin: 0 10px;
  font-style: italic;
  width:160px;
  height: 48px;
  
  box-shadow: 8px 8px #bebebe;
  background: #71b2ba;
  border: 2px solid black;
  position: relative;
  color:#FFF;
}
button#submit:hover {
  transform: translate(0,0px);
  transition:0.1s;
  border: 2px solid black;
  color: white;
  background: #c8bcff;
  box-shadow: 8px 8px #bebebe;
}

button#submit:active {
  transform: translate(0,8px);
  transition:0.1s;
  
  border: 2px solid white;
  color: #ffc698;
  background: white;
  box-shadow: 2px 2px #bebebe;
}


.filmvic img{
    width:100%;
    max-width: 328.5px;
    min-height: 74px;
    margin: 2% auto 1%;
}

    @keyframes logo {
        0% {
            -webkit-transform: translate3d(0px, 0px, 0px);
            -moz-transform: translate(0px, 0px);
        }
        100% {
            -webkit-transform: translate3d(0px, -10px, 0px);
            -moz-transform: translate(0px, -10px);
        }
    }
	
#beachvideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}
.dither {
  right: 0;
  bottom: 0;
  background: url(../img/grid.png);
  z-index: 1;
  min-width: 100%;
  min-height: 100%;
}

.videobg {
	width: 100%;
	height:100%;
}

.press{
text-align: center;
border-radius: 0px;
padding: 24px 10px;
border: 10px solid white;
background: #ffc698;
color: #3b3b3b;
margin-bottom: 128px;
}

.presskit {
   text-transform: uppercase;
  font-weight:bold;
  padding:0px 10px 1px;
  font-size:20px;
  text-weight: 700;
  font-family: Open Sans;
  line-height:32px;
  transition:0.1s;
    margin: 0 10px;
  font-style: italic;
  width:128px;
  text-align: center;
  z-index: 2;
  
  box-shadow: 8px 8px 8px rgba(128,128,128,.2);
  background: #71b2ba;
  border: 2px solid black;
  color:#FFF;
  position: fixed;
  right: 16px;
  top: 16px;
  border-radius: 6px;
}
.presskit:hover {
  transform: translate(0,0px);
  transition:0.1s;
  
  border: 2px solid black;
  color: white;
  background: #c8bcff;
  box-shadow: 8px 8px  8px rgba(128,128,128,.2);
}

.presskit:active {
  transform: translate(0,8px);
  transition:0.1s;
  
  border: 2px solid white;
  color: #ffc698;
  background: white;
  box-shadow: 2px 2px  8px rgba(128,128,128,.2);
}

.vid{
	position: relative;
	padding-bottom: 56.25%;
	width: 100%;
	height: 0;
	overflow: hidden;
	margin: 45px 0;
}

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


@media (max-width: 960px) {
	
	.presskit {
	 position: absolute;
	}
	
	.logo{
		margin-top: 32px;
	}
	
	.container{		
		margin-top: 40%;
	}
	
	.pressbox {
	margin-top: 0px;
	font-size: .5em;
	line-height: 24px;
	}
	
	.description {
	width: 90%;
	max-width: 500px;
	}

	.middle {
		margin-bottom: 0px;
	}
	
}

@media (max-width: 652px) {
	
	.container{		
		margin-top: 45%;
	}
	
	.pressbox {
	margin-top: 0px;
	}
	.acknowledgement{
	width:100%;
	max-width: 400px;
	margin: 0 auto;
}
}

@media (max-width: 400px) {
	
	.container{		
		margin-top: 60%;
	}
	.video-container {
		height: 240px;
	}
	
	.videobg {
		display: none;
	}

	.pressbox {
	margin-top: 0px;
	width: 100%;
	max-width: 960px;
	font-size: .5em;
	line-height: 24px;
	}
	
	.logo{
		margin-top: 64px;
	}
	
	.description {
	width: 95%;
	font-size: .87em;
	}

	
	
}