/*

MAIN FEATURE:

The four <h3> child elements within ".subhead-wrap" need to be animated
such that each one corresponds to a section of video. More specifically,
at four moments in the video, one piece of text slides up while another
slides up from the bottom to replace it (unidirectionally), all without
affecting the big 'Shakie' title and the App Store button below it. It
should feel seamless and should loop infinitely.

EXAMPLE:
http://jsfiddle.net/q596y/8/
(but vertical, pauses for some time,
and with different content)

Timing:

1st  Transition: ~7.4s (1 slides out, 2 slides in)
2nd  Transition: ~13s (2 slides out, 3 slides in)
3rd  Transition: ~21.1s (3 slides out, 4 slides in)
Last Transition: ~30s (4 slides out, 1 slides in) (loop to beginning)

KNOWN ISSUES/CONCERNS

Layout:
- Footer sometimes appears after some messing around with the window on Safari.
- At very small heights, height of icons in footer exceed height of footer.

Typography:
- Need 'Helvetica Neue' to work on all platforms.

Video:
- Need to make sure .htaccess file lets Firefox play web video.

*/

html, body {
    padding: 0;
    margin: 0;
    font-family: "nimbus-sans", Helvetica, sans-serif;
    color: white;
    height: 100%;
    width: 100%;
    overflow: hidden;
    min-width: 320px;
    /*min-height: 480px;*/
}

.desktop html, .desktop body {
	min-height: 480px;
}

section {
    padding: 0;
    margin: 0;
}

.site_container {
	width: 100%;
	height: 100%;
	overflow-y: scroll;
	position: fixed;
	top: 0;
	left: 0;
	min-width: 320px;
    /*min-height: 480px;*/
}

.desktop .site_container {
	min-height: 480px;
}

.mobile .site_container {
	overflow: hidden;
	background-image: url('../img/shakie.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.site_scroller {
	height: 110%;
	overflow: hidden;
}

.view {
    width: 100%;
    /*height: 100vh;*/
    top: 35%;
}

.desktop .view.home {
	min-height: 480px;
}

.main {
    position: relative;
    background-color: blue;
}

.home, .send {
    display: flex;
    display: -webkit-flex;
}

.home {
    position: fixed;
    /*background-color: black;*/
    align-items: center;
    -webkit-align-items: center;
    pointer-events: none;
}

.send {
	opacity: 1;
    height: 10%;
    width: 100%;
    position: absolute;
    background-color: #00CCA5;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    -webkit-align-items: center;
    -webkit-justify-content: center;
    -webkit-flex-direction: column;
    bottom: -10%;
    max-height: 100px;
	min-height: 55px;
}

.send .wrapper {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    flex-wrap: wrap;
}

.send .wrapper div {
  flex-basis: 33.33%;
}

.send .wrapper .send__ssk-labs {
  align-items: center;
}

.send .wrapper .send__home {
  text-align: center;
}

.send .wrapper .send__home a {
  display: inline-block;
}

.send .wrapper .send__privacy-policy {
  flex-basis: 100%;
}

.send .wrapper .send__privacy-policy a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
}

.app_store {
    opacity: .8;
    /*
    -webkit-transition: .1s all ease-in-out;
    transition: .1s all ease-in-out;
    */
    pointer-events: auto;
}

.app_store:hover {
    opacity: 1;
}

.intro_text {
    color: white;
    font-weight: 300;
    font-family: "nimbus-sans", sans-serif;
    width: 60vw;
    padding: 2%;
}

.title {
    margin: 0;
    font-size: 130px;
    font-weight: 300;
    display: block;
    text-indent: -7px;
    margin-bottom: -13px;
}

.subhead {
    font-size: 25px;
    font-weight: 300;
    margin: 0;
    position: relative;
    top: -.8vw;
    padding-top: 10px;
    padding-bottom: 10px;
    vertical-align: middle;
    display: none;
}

.subhead.active {
	display: block
}

.wrapper.foot {
    padding: 0;
    margin: 0;
}

.logo {
    opacity: .6;
    /*
    -webkit-transition: .1s all ease-in-out;
    transition: .1s all ease-in-out;
    */
}

.logo:hover {
    opacity: 1;
}

.ssk.logo {
    min-width: 100px;
    width: 5vw;
    max-height: 100px;
}

.shakie {
    min-width: 40px;
    width: 2vw;
/*    max-height: 50px;*/

}

.medium.logo {
    min-width: 30px;
    width: 2vw;
    max-height: 30px;
    margin-right: 10px;
}

.twitter.logo {
    min-width: 30px;
    width: 2vw;
    max-height: 30px;
}

.send__social_container {
    display: flex;
    display: -webkit-flex;
    min-width: 100px;
    width: 4vw;
    max-width: 15vw;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    justify-content: flex-end;
}

/* BEGIN: Portrait */
@media screen and (max-width: 1200px)  {
    .view {
		height: 100%;
		top: auto;
	}

	.site_container {
		overflow: hidden;
	}

	.site_scroller {
    	background: none;
		height: 100%;
    }
    .send {
        position: absolute;
        width: 100%;
        bottom: 0;
    }

    .intro_text {
        color: white;
        font-family: "nimbus-sans", sans-serif;
        font-weight: 300;
        width: 60vw;
        padding: 2%;
    }

    .title {
        font-size: 130px;
    }

    .subhead {
        font-size: 25px;
        font-weight: 300;
        margin: 0;
        position: relative;
        top: -.8vw;
        vertical-align: middle;
    }

}

@media screen and /*(min-width: 481px) and */ (max-width: 900px) {
    .intro_text {
        color: white;
        font-family: "nimbus-sans", sans-serif;
        font-weight: 300;
        width: 100%;
        padding: 2%;
        text-align: center;
    }

    .title {
        font-size: 110px;
        font-weight: 300;
        margin-top: 25px;
        display: block;
    }

    .subhead {
        font-size: 18px;
        font-weight: 300;
        margin: 0;
        position: relative;
        top: -.8vw;
        margin-top: .5vw ;
        vertical-align: middle !important;
    }

    .app_store {
        width: 150px;
    }

    .subhead-wrap{
        display: flex;
        align-items: center;
        justify-content: center;
        display: -webkit-flex;
        -webkit-align-items: center;
        -webkit-justify-content: center;
    }
}

@media screen and (max-width: 480px) {

    .site_container {
    	background-image: url('../img/shakie.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .intro_text {
        color: white;
        font-family: "nimbus-sans", sans-serif;
        font-weight: 300;
        width: 100%;
        padding: 2%;
        text-align: center;
    }

    .title {
        font-size: 15vw;
        font-weight: 300;
        margin-top: 25px;
        display: block;
    }

    .subhead {
        font-size: 4vw;
        font-weight: 300;
        margin: 0;
        position: relative;
        top: -.8vw;
        margin-top: .5vw ;
    }

    .app_store {
        width: 35vw;
    }

    .subhead-wrap{
        display: flex;
        align-items: center;
        justify-content: center;
        display: -webkit-flex;
        -webkit-align-items: center;
        -webkit-justify-content: center;
    }


    video {
        display: none;
    }
    /*
    .home {
        background-image: url('../img/shakie.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
    */
    body {
        height: 100%;
    }

    .ssk.logo {
        min-width: 60px !important;
        max-height: 100px;
    }

    .shakie {
        min-width: 40px;
        width: 2vw;
    }

    .medium.logo {
        min-width: 20px !important;
        width: 2vw;
        max-height: 30px;
        margin-right: 0px !important;
    }

    .twitter.logo {
        min-width: 20px !important;
        width: 2vw;
        max-height: 30px;
    }

    .social_container {
        display: -webkit-flex;
        display: flex;
        min-width: 60px !important;
        width: 4vw;
        max-width: 15vw;
        justify-content: space-between;
        -webkit-justify-content: space-between;
    }

    .subhead-wrap{
        display: flex;
        align-items: center;
        justify-content: center;
        display: -webkit-flex;
        -webkit-align-items: center;
        -webkit-justify-content: center;
    }

}
/* END: Portrait */


/* BEGIN: Landscape mobile */
@media screen and (orientation: landscape) {
	html, body {
		/*min-width: 480px;
		 min-height: 320px; */
	}

	.site_container {
		/* min-width: 480px;
		 min-height: 320px; */
	}
}

@media screen and (orientation: landscape) and (max-width: 600px)
{
	.video_container {
		display: none;
	}

	.site_container {
		overflow: hidden;
		background-image: url('../img/shakie.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
	}

	.site_scroller {
		height: 100%;
	}

	.send {
		bottom: 0;
	}
}


@media screen and (orientation: landscape) and (max-height: 350px)
{

	.view.home {
		height: 80%;
	}

	.title {
        font-size: 10vw;
    }

    .subhead {
		font-size: 14px;
	}

    .app_store {
        width: 100px;
    }


}

/* END: Landscape mobile */

.wrapper {
    width: 80%;
    margin: auto;
    max-width: 1600px;
    position: relative;
}

.video_container {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

video#bgvid {
    opacity: .85;
    /*position: absolute;
    top: 0%;
    left: 0%;*/
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    /*-webkit-transform: translateX(-50%) translateY(-50%);*/
    /*transform: translateX(-50%) translateY(-50%);*/
    background: #000;
    background-size: cover;
}