@import url('https://fonts.googleapis.com/css?family=BioRhyme');

@font-face{
  font-family:'Canada Type - CaptainComic';
  src:url('../fonts/Canada Type - CaptainComic.ttf') format('truetype');
}

body{
  font-family: 'BioRhyme', serif;
	width:100vw;
	height:100vh;
	margin:0;
	overflow-x:hidden;
	transition: background-color 1s ease;
}

* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}



#marquee, img{
  cursor: pointer;
}

#downArrow{
  animation:bounce 1s infinite;
}

@keyframes bounce {
  0% {transform: translateY(0);}
  50% {transform: translateY(-12px);}
  100% {transform: translateY(0px);}
}



#introVideo{
  width:90%;
  max-width:880px;
}

section{
	padding-top:64px;
	padding-bottom:64px;
	min-height:100vh;
	display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
}

section p{
    font-family:'Canada Type - CaptainComic';
    color:white;
    font-size:1em;
    line-height: 1.4;
    text-align: center;
    margin-top:24px;
    max-width:480px;
}


svg{
  cursor: pointer;
}

object{
	width:90%;
	max-width:960px;
  cursor:pointer;
}

.svg{
  width:90%;
  max-width:960px;
  cursor:pointer;
}


#jukeBox{
	display:block;

}

#jukeBox object{
	margin:-8px auto -8px auto;
	display: block;
	width:96%;
	max-width: 960px;
}

#tv{
	display:flex;
	position:relative;
	width:100%;
}

#tv object, iframe{
  width:100%;
  margin:0 auto;
}

#tv object{
	position:relative;
	z-index:2;
/*	max-height:600px;
    height:600px;*/
	pointer-events:none;
}

#tv iframe{
  margin:0 auto;
  position:absolute;
  z-index:1;
  max-width:900px;
  width:92%;
  left: 50%;
  transform: translate(-50%, 0%);
  height: 92%;
/*  max-height:510px;
  height:510px;*/
}

#spotify-wrapper{
  display:flex;
  flex-direction:column;
  margin:0 auto;
}


#spotify-wrapper iframe{
	position:relative;
	margin:0 auto;
	width:300px;
    max-width: 785px;
    height: 80px;
    margin-top: 7px;
    width: 78%;
}


.video-wrapper{
	position:relative;
	display:flex;
	flex-direction:column;
	width:100%;
	margin:0 auto;
	height:100%;
}

.overlay{
	margin:0 auto;
}

#youTubeVideo{
	margin:0 auto;

}

/*#frontPage{
  position:absolute;
  transform:scale(0.4) rotate(5deg);
  z-index:2;
  transition:all 1s;
}

.pageFrontHovered{
  z-index:0;
  animation:pageBack 1s ;
  transform:scale(0.6) rotate(-5deg);
}

#backPage{
  position:relative;
  transform:scale(0.4) rotate(-5deg);
  z-index:1;
  transition:all 1s;
}

.backPageHovered{
  animation:page 1s linear;
}

@keyframes page{
  0%{transform:translateX(0%) scale(0.4) rotate(-5deg); z-index:1;}
  50%{transform:translateX(50%) scale(0.5) rotate(5deg); z-index:2;}
  100%{transform:translateX(0%) scale(0.6) rotate(10deg); z-index:3;}
}

@keyframes pageBack{
  0%{transform:translateX(0%) scale(0.4) rotate(-5deg); z-index:2;}
  50%{transform:translateX(-50%) scale(0.5) rotate(5deg); z-index:2;}
  100%{transform:translateX(0%) scale(0.6) rotate(10deg); z-index:0;}
}
*/

#news a{
  display: flex;
  margin: 0 auto;
  flex-direction: column;
}

#news a, #news img {
  margin:0 auto;
  width:80%;
  max-width:960px;
  cursor:pointer;
}


#backPage{
  transform-origin:50% 50%;
  position:relative;
  transform: scale(1.1) rotate(-5deg);
  transition:all 1s;
  box-shadow:5px 10px 30px rgba(0,0,0,0.5);
}

#frontPage{
  transform-origin:50% 50%;
  position:absolute;
  transform:scale(0.9) rotate(5deg);
  transition:all .3s;
  box-shadow:5px 10px 30px rgba(0,0,0,0.5);
}

#frontPage:hover{
  transform:rotate(3deg);
}


.moveUp{
  animation:page 1s alternate;
  transform:scale(1.15);
  z-index:2;
}

.pageToggle{
  animation:page 1s alternate;
  transform:scale(1.0);
  z-index:0;
}


@keyframes forward{
  0%{transform:translateX(0%) rotate(5deg);}
  50%{transform:translateX(50%) rotate(10deg);}
  100%{transform:translateX(0%) rotate(5deg);}
}

@keyframes page{
  0%{transform:translateX(0%) rotate(5deg);}
  50%{transform:translateX(50%) rotate(10deg);}
  100%{transform:translateX(0%) rotate(5deg);}
}

#bio{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:100vw;
  height:100vh;
  position:fixed;
  background-color:rgba(0, 0, 0, 0.9);
  z-index:10;
  color:white;
  transition:all 1.5s;
}

#bio p{
  padding:0px 16px 0px 16px;
  width:92%;
  max-width:600px;
  font-size:.8em;
  line-height:1.6;
  letter-spacing:.5px;
}

#bio h2{
  line-height:1;
}

.closeButtons{
  border: 2px solid white;
  padding: 10px 16px 10px 16px;
  border-radius: 30px;
  cursor: pointer;
  position:fixed;
  top:16px;
  right:16px;
  display:block;
  transition:all .3s;
}

.closeButtons:hover{
  transform:scale(1.1);
}


#adImage{
    width:80%;
    max-width:640px;
    transform:scale(1.0) rotate(8deg);
    transition:all 1.0s;

}

#adImage:hover{
    transform:scale(1.2) rotate(-10deg);

}

.quote{
  width:90%;
  max-width:480px;
}

/* colours */
.color-1 {
  background-color: #FFFDE4;
}
.color-2 {
  background-color: #464644;
}
.color-3 {
  background-color: #303030;
}
.color-4 {
  background-color: #2B2B2B;
}
.color-5 {
  background-color: #222222;
}
.color-6 {
  background-color: #181818;
}
.color-7 {
  background-color: #0D0D0D;
}
.color-8 {
  background-color: #0D0D0D;
}
.color-9 {
  background-color: #0D0D0D;
}
.color-10 {
  background-color: #0D0D0D;
}
.color-11 {
  background-color: #0D0D0D;
}
.color-12 {
  background-color: #0D0D0D;
}
.color-13 {
  background-color: #000000;
}

.popupVid{
  background-color:rgba(0, 0, 0, 0.9);
  z-index:0;
  color:white;
  transition:all 1s;
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height: 100vh;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.popupVid video{
  width:90%;
  max-width:880px;
}