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

body {
background: #121526;
	margin: 0;
	padding: 0;
}

.flex {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex; 
  justify-content: center;/* NEW, Spec - Opera 12.1, Firefox 20+ */
	
 }

.main-content {
	width: 90%;
	text-align: center;
	max-width: 980px;
}
#girl {
	height: 100vh;
	z-index: -1;
}

#artwork {
	height: 100vh;
	width: 100%;
	position: relative;
	background: url(../img/The-Mortal-Coil-web-layers.jpg) ; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
	background-position: center bottom;
}

#artwork span {
	bottom: 0;
	position: absolute;
	width: 100%;
	text-align: center;
	margin-bottom: 3rem;
}

.main-video {
	width: 75%;
	max-width: 850px;
	text-align: center;
	margin: 2rem 0;
}

#video {
	padding: 1%;
	width: 100%;
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#resist{
	max-width: 150px;
	margin: 3rem 0;
	opacity: 0.6;
}

*,
:after,
:before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.scroll-down {
  opacity: 1;
  -webkit-transition: all .5s ease-in 3s;
  transition: all .5s ease-in 3s;
}

.scroll-down {
  position: absolute;
  bottom: 0px;
  left: 50%;
  margin-left: -16px;
  display: block;
  width: 32px;
  height: 32px;
  border: 2px solid rgba(255,255,255,0.58);
  background-size: 14px auto;
  border-radius: 50%;
  z-index: 2;
  -webkit-animation: bounce 2s infinite 2s;
  animation: bounce 2s infinite 2s;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
}

.scroll-down:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 12px;
    height: 12px;
    content: "";
    border: 2px solid rgba(255,255,255,0.58);
    border-width: 0px 0 2px 2px;
}

@keyframes bounce {
  0%,
  100%,
  20%,
  50%,
  80% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  60% {
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}


/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {
	
}

/* Larger than desktop */
@media (min-width: 1000px) {
	
	.main-content {
		width: 100%;
	}
	
}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}