@font-face {
    font-family: 'upheaval_pro';
    src: url('fonts/upheavalpro-webfont.woff2') format('woff2'),
         url('fonts/upheavalpro-webfont.woff') format('woff'),
         url('fonts/upheavalpro-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

* {
	padding: 0;
	margin: 0;
}

html, body {
	background-color: #000;
	color: #fff;
	word-wrap: break-word;
	margin: 0 auto;
}

.site {
}

body {
	text-align: left;
    direction: ltr;
	font-family: 'upheaval_pro', "Times New Roman", Times, serif;
	font-size: 16px;
	overflow-y: scroll;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
	right: 0;
	display: contents;
}

canvas {
  position: fixed;
  opacity: 0.4;
  z-index: -1;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  image-rendering: optimizeSpeed;             /* Legal fallback */
  image-rendering: -moz-crisp-edges;          /* Firefox        */
  image-rendering: -o-crisp-edges;            /* Opera          */
  image-rendering: -webkit-optimize-contrast; /* Safari         */
  image-rendering: optimize-contrast;         /* CSS3 Proposed  */
  image-rendering: crisp-edges;               /* CSS4 Proposed  */
  image-rendering: pixelated;                 /* CSS4 Proposed  */
  -ms-interpolation-mode: nearest-neighbor;   /* IE8+           */
}

.header {
	background-image: url(images/logo.png);
  width: 100%;
	transition:all 0.5s linear;
	background-size: contain;
  background-repeat: no-repeat;
  background-position-x: 50%, 50%;
  margin: 0 auto;
	display: inline-block;
	z-index: 1;
	user-select: none;
	position: relative;
  min-height: 140px;
}

.bg {
	background-image: url(images/bg.png);
	background-position: 50% 30%;
	background-size: 63vh;
	position: fixed;
	background-color: transparent;
	width: 100%;
	height: 100%;
}

a {
	text-decoration: none;
	color: #fff;
  font-size: 3rem;
}

a:hover{
	text-shadow: 0px 0px 25px #fff;
}

.social-container {
	text-align: center;
	z-index: 1;
  position: relative;
	user-select: none;
	width: 100%;
  margin-top: 10rem;
  margin-left: 8rem;
}

.social-btn {
  display: inline-block;
  margin: 0.3rem;
  border: none;
  text-align: center;
  background: rgb(40, 128, 171);
  background: linear-gradient(0deg, rgb(0, 135, 255) 0%, rgb(40, 128, 171) 100%);
  color: #fff;
  border-radius: 0.3rem;
  width: 3.5rem;
  height: 3.5rem;
  padding-left: 0.4rem;
}

.tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  margin-top: -2rem;
  margin-left: -5.5rem;
}

.social-btn:hover .tooltiptext {
  visibility: visible;
}

.social-btn:hover a {
width: 100%;
height: 100%;
display: inline-block;
}

.social-btn:hover {
	background: crimson;
  text-decoration: none;
  color: #fff;
}

.social-btn:active{
  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.3),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.2),
    inset 4px 4px 6px 0 rgba(0, 0, 0, .2);
}

.scene {
	width: 100%;
	height: 300px;
	text-align: center;
	perspective: 400px;
  }
  
  .card {
	width: 200px;
	height: 300px;
	position: relative;
	transform-style: preserve-3d;
	/* transform: translateZ(-50px) rotateY(20deg) rotateX(-25deg); */
	transition: transform 1s;
	cursor: pointer;
	display: inline-block;
	margin: 2rem;
  }
  
  .box.show-front  { transform: translateZ( -50px) rotateY(   0deg); }
  .box.show-right  { transform: translateZ(-150px) rotateY( -90deg); }
  .box.show-left   { transform: translateZ(-150px) rotateY(  90deg); }
  .box.show-top    { transform: translateZ(-100px) rotateX( -90deg); }
  .box.show-bottom { transform: translateZ(-100px) rotateX(  90deg); }
  
  .box__face {
	position: absolute;
	border: 2px solid black;
	font-size: 20px;
	font-weight: bold;
	color: white;
	background-color: black;
	background-size: cover;
  background-position: center;
  }
  
  .box__face--front {
	width: 200px;
	height: 300px;
	line-height: 300px;
  }
  
  .box__face--right,
  .box__face--left {
	width: 100px;
	height: 300px;
	left: 49px;
	line-height: 300px;
  }
  
  .box__face--top,
  .box__face--bottom {
	width: 200px;
	height: 97px;
	top: 50px;
	line-height: 100px;
  }
  
  #becloudead .box__face--front  { background-image: url('images/becfront.png'); }

  #becloudead .box__face--front  { background-image: url('images/becfront.png'); }
  #becloudead .box__face--left { background-image: url('images/becleft.png'); }
  #becloudead .box__face--right { background-image: url('images/becright.png'); }
  #becloudead .box__face--top { background-image: url('images/bectop.png'); }
  #becloudead .box__face--bottom { background-image: url('images/becbottom.png'); }

  #badpad .box__face--front  { background-image: url('images/bpfront.png'); }
  #badpad .box__face--left { background-image: url('images/bpleft.png'); }
  #badpad .box__face--right { background-image: url('images/bpright.png'); }
  #badpad .box__face--top { background-image: url('images/bptop.png'); }
  #badpad .box__face--bottom { background-image: url('images/bpbottom.png'); }

  #badrun .box__face--front  { background-image: url('images/brfront.png'); }
  #badrun .box__face--left { background-image: url('images/brleft.png'); }
  #badrun .box__face--right { background-image: url('images/brright.png'); }
  #badrun .box__face--top { background-image: url('images/brtop.png'); }
  #badrun .box__face--bottom { background-image: url('images/brbottom.png'); }

  #magua .box__face--front  { background-image: url('images/magfront.png'); }
  #magua .box__face--left { background-image: url('images/magleft.png'); }
  #magua .box__face--right { background-image: url('images/magright.png'); }
  #magua .box__face--top { background-image: url('images/magtop.png'); }
  #magua .box__face--bottom { background-image: url('images/magbottom.png'); }
  
  .box__face--right  { }
  .box__face--left   { }
  .box__face--top    { }
  .box__face--bottom { }
  
  .box__face--front  { transform: rotateY(  0deg) translateZ( 50px); }
  .box__face--right  { transform: rotateY( 90deg) translateZ(102px); }
  .box__face--left   { transform: rotateY(-90deg) translateZ(100px); }
  .box__face--top    { transform: rotateX( 90deg) translateZ(100px); }
  .box__face--bottom { transform: rotateX(-90deg) translateZ(202px); }
  
  label { margin-right: 10px; }


@media screen and (orientation: portrait) { 

	.header {
		height: 13vw;
		top: 0.7rem;
	}

	.social-btn {
		max-width: 13%;
	}

  .social-btn a {
    font-size: 3rem;
  }

}

@media only screen and (max-width: 695px) {
  .social-container {
    margin-top: 9rem;
    margin-left: 0;
  }

}

#mc_embed_signup {
  margin-top: 3rem !important;
}