@charset "UTF-8";
/* CSS Document */

html,body {
color:#fddaec;
font-family:"Josefin Sans", sans-serif;
font-size:100%;
height:100%;
line-height:1.45;
background: black;
	z-index:-1;

}


/* Video Overlay */

#overlay {
background-color:rgba(0,0,0,0);
height:100%;
left:0;
position:relative;
top:0;
transition:background-color 300ms ease;
width:100%;
}

#overlay_2 {
background-color:rgba(0,0,0,0);
height:50%;
left:0;
position:relative;
top:0;
transition:background-color 300ms ease;
width:100%;
}

.fade { background-color:rgba(0,0,0,.85) !important; }


/* Hero Video + Fallback */

#hero-vid {
backface-visibility:hidden;
background:url("") no-repeat scroll 0 0 #000;
background-size:cover;
bottom:0;
height:auto;
min-height:100%;
min-width:100%;
perspective:1000;
position:fixed;
right:0;
width:auto;
z-index:0;
}

#hero-pic {
display:block;
height:auto;
width:100%;
}

#hero-vid_2 {
bottom:0;
height:50%;
min-width:100%;
right:0;

}

#hero-pic_2 {
display:block;
height:auto;
width:100%;
}

#state {
bottom:0;
cursor:pointer;
font-size:2.25rem;
left:0;
line-height:1;
padding:2rem 2.5rem 1.65rem;
position:absolute;
}

#icon_image {
display:block;
width:30%;
	align-content: center;
}


/* Content Styles */

#title {
backface-visibility:hidden;
left:0;
perspective:1000;
position:fixed;
padding-top: 20vw;
width:100%;
text-align: center;
	z-index: 101;
}

#title h1 {
background-color:rgba(0,0,0,0);
font-family: 'Permanent Marker', cursive;
font-size:3.5rem;
padding:1rem 1.75rem;
	color: aliceblue;
}

#content {
background-color:black;
padding-top:1rem;
position:relative;
z-index:2;
}

#content_team {
background-color:black;
padding-left: 5rem;
padding-right: 5rem;
position:relative;
z-index:1;
}

#headline {
background-color:black;
padding:2.5rem;
position:relative;
z-index:1;
text-align: center;
}

#headline h1 {
background-color:rgba(0,0,0,0);
font-family: 'Permanent Marker', cursive;
font-size:2.5rem;
padding:1rem 1.75rem;
color: white;
text-align: center;
}

#headline h2, a {
font-family: 'Open Sans', sans-serif;
font-size:1.75rem;
padding:1rem 1.75rem;
color: white;
text-align: center;
	text-decoration: none;
}
}

#content p {
font-size:1.25rem;
letter-spacing:.02rem;
margin-bottom:1.3rem;
}



/* Media Queries */

@media only screen and (max-width:768px) {
    #overlay { height:auto; }
}


/* Visibility Helpers */

@media only screen and (min-width:769px) {
    .visible-mobile,.visible-tablet,.hidden-desktop { display:none !important; }
}

@media only screen and (min-width:480px) and (max-width:768px) {
    .visible-mobile,.hidden-tablet,.visible-desktop { display:none !important; }
}

@media only screen and (max-width:479px) {
    .hidden-mobile,.visible-tablet,.visible-desktop { display:none !important; }
}


* {
    box-sizing: border-box;
}

/* Create four equal columns that floats next to each other */

.icon {
font-size: 2rem;
text-align: center;
}

.column {
    float: left;
    width: 33%;
    padding: 10px;
}

.column h2  {
font-family: 'Open Sans', sans-serif;
font-size:1.75rem;
padding:1rem 1.75rem;
color: white;
text-align: center;
}

.column p  {
font-family: 'Open Sans', sans-serif;
font-size:1rem;
padding-left: 1rem;
padding-right: 1rem;
color: white;
text-align:;
}

.column_2 {
    float: left;
    width: 50%;
    padding: 10px;
	align-content: center;
}

.column_2 h2  {
font-family: 'Open Sans', sans-serif;
font-size:1.75rem;
padding:1rem 1.75rem;
color: white;
text-align: center;
}

.column_2 p  {
font-family: 'Open Sans', sans-serif;
font-size:1rem;
padding-left: 1rem;
padding-right: 1rem;
color: white;
text-align:;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 900px) {
    .column  {
        width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column  {
        width: 100%;
    }
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 900px) {
    .column_2  {
        width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column_2  {
        width: 100%;
    }
}