html, body {
  margin: 0;
  padding: 0;
  background:#000;
  color:#fff;
  font-family: Tahoma, Geneva, sans-serif;
  overflow-x: hidden;
  overflow-y: hidden;
  width: screen-width;
  height: 100%;
}
.embed-responsive{
z-index: 1;
top: -40px;
width: screen-width;
height: screen-height;
}
.embed-responsive iframe{
size: cover;
width: screen-width;
height: screen-height;
}

.menu{
 position: fixed;
 border: 1px solid #7c776e;
 border-color: #7c776e;
 position: absolute;
 padding:6px 12px 0px 12px;
 top:40px;
 left: 30px;
 text-align: center;
 z-index: 11;
 background: transparent;
 color: #7c776e;
 font-size:16px;
 -webkit-transition: border-color color 12s;
 -moz-transition: border-color color 12s;
 -o-transition: border-color color 12s;
 transition: border-color color 12s;
}
.menu:hover{
  color: rgba(250,169,115,1);
  cursor: default;
  border-color:rgba(250,169,115,1);
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
}
.menu:hover+.nav, .nav:hover{
  z-index: 10;
  visibility: visible;
  opacity: 1;
  -webkit-transition: visibility 1s;
  -webkit-transition: opacity 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
}

.nav{
 position: fixed;
 z-index: 2;
 visibility: hidden;
 opacity: 0;
 -webkit-transition: 6s;
 -webkit-transition-delay: 6s;
 -moz-transition: 6s;
 -moz-transition-delay: 6s;
 -o-transition: 6s;
 -o-transition-delay: 6s;
 transition: 6s;
 transition-delay: 6s;
}
.nav .container {
 text-align: center;
 top: 3%;
 left: 17%;
 position: fixed;
 max-width: screen-width;
 background:transparent;
 padding:0;
}
.nav .col-md-4{
display: inline-block;
max-width: 100%;
padding:0;
margin:0;
}
.nav p {
  text-align: center;
  margin-right:0;
}
.nav p a {
  color: rgba(250,169,115,1);
  font-size: 24px;
  text-shadow: none;
  -webkit-transition: text-shadow .5s;
  -moz-transition: text-shadow .5s;
  -o-transition: text-shadow .5s;
  transition: text-shadow .5s;
}
.nav p a span{
  border-bottom: 2px solid rgba(250,169,115,1);
}
.nav p a:hover{
  text-decoration: none;
  text-shadow: 1px 1px rgba(249,238,198,.5);
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
}
.nav p a:focus{
  text-decoration: none;
}
.about{
background: url('files/logobrokenworse.png') no-repeat center center;
width: 220px;
height: 140px;
}
.about:hover{
background: url('files/logobrokenworseglow.png') no-repeat center center;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
.current {
 -webkit-transform: rotate(-15deg); 
 -moz-transform: rotate(-15deg);
 -o-transform: rotate(-15deg);  
 transform: rotate(-15deg); 
}
.archive {
 margin-top:12%;
 -webkit-transform: rotate(40deg); 
 -moz-transform: rotate(40deg);
 -o-transform: rotate(40deg);
 transform: rotate(40deg); 
}
.current span{
 letter-spacing: 24px;
 border-bottom: 2px solid #ffee94;
}
.current .second{
 color:#ffee94;
 letter-spacing:6px;
 border-bottom: none;
 font-size: 16px;
 font-weight: 300px;
}

.sidebar {
position: fixed;
bottom: 6%;
left:3%;  
color:#7C776E;
}
.sidebar:hover {
  cursor: default;
}
.sidebar h1 {
 font-size:16px; 
}
.sidebar span{
  font-size: 12px;
}
.sidebar p {
 font-size: 12px; 
 text-align: left;
}

.downloads {
  position: fixed;
  bottom: 20%;
  left: 3%;
  color: #7c776e;
}
.downloads h1 {
  font-size: 16px;
  display: inline;
}
.downloads p a {
  color:#7c776e;
  font-size: 12px;
  text-align: left;
}
.downloads a:hover {
 text-decoration: none;
 color: rgba(250,169,115,1);
 text-shadow: 1px 1px rgba(249,238,198,.5);
 -webkit-transition: .5s;
 -moz-transition: .5s;
 -o-transition: .5s;
 transition: .5s;
}
.downloads a:focus {
  text-decoration: none;
}
.phone{
z-index: -3;
position: fixed;
visibility: hidden;
text-align: center;
background:#1a1a1a;
size: cover;
width: screen-width;
height: screen-height;
top: 0;
left: 0;
}
.phone p{
margin-top: 25%;
}
a:focus { 
    outline: none; 
}

@media (min-width: 981px) and (max-width: 1280px){
.nav .container {
 top: 3%;
 left: 7%;
}
.nav p a {
font-size: 16px;
}
.about{
-moz-transform: scale(0.5);
-o-transform: scale(0.5);
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
.current span{
 letter-spacing: 12px;
}
.current .second{
 letter-spacing:2px;
 font-size: 10px;
}
.sidebar h1, .downloads h1 {
 font-size:10px; 
}
.sidebar span{
  font-size: 8px;
}
.sidebar p, .downloads p a{
 font-size: 8px; 
}
}
@media (max-width: 980px){
.nav .container {
 padding-top: -3%;
 top:0;
 left: 0;
 -moz-transform: rotate(-15deg);
 -o-transform: rotate(-15deg);
  -webkit-transform: rotate(-15deg);
 transform: rotate(-15deg);
}
.nav p a {
font-size: 16px;
}
.about{
-moz-transform: scale(0.5);
-o-transform: scale(0.5);
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
.current span{
 letter-spacing: 12px;
}
.current .second{
 letter-spacing:2px;
 font-size: 10px;
}

.sidebar h1, .downloads h1 {
 font-size:10px; 
}
.sidebar span{
  font-size: 8px;
}
.sidebar p, .downloads p a{
 font-size: 8px; 
}
}
@media only screen and (max-width: 580px) {
.nav {
visibility: hidden;
}
.phone{
visibility: visible;
text-align: center;
background:#1a1a1a;
size: cover;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 12;
}
.phone p{
margin-top: 25%;

}
}