@font-face {
    font-family: 'cyborgsistermedium';
    src: url('font/cs/cyborgsister-webfont.woff2') format('woff2'),
         url('font/cs/cyborgsister-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body {
  background-color: black;
  font-family: 'cyborgsistermedium', Arial, sans-serif;
font-weight:normal;
font-style:normal;
overflow: hidden;
font-size:2vmin;
}

h1 {
  font-size: 3vw;
  color: white;
}

h2 {
  font-size: 2.5vw;
  color:white;
}

a {
  color:white;
}
a:hover{
  color:white;
  text-decoration: none;
}

.logo {
  height: 11vw;
  padding-top:2vw;
}

.logo > img {
  width:15vw;
}

.menu {
  margin-top:-10vw;
  margin-bottom: 3.4vw;
}

.bar-top {
  height:3.4vw;
  background-color: white;
  z-index:-1;
  margin-bottom: -6.7vw;
}

.bar-bottom {
  height:3.4vw;
  background-color: white;
  z-index:-1;
  margin-top: -6.7vw;
  margin-bottom: 4vw;
}

.games {
  margin-bottom: -3.3vw;
  overflow: hidden;
  position:relative;
  height:40.1vw;
}

.games:hover .h-left{
  filter:grayscale(0.7);
}

.games:hover .h-right{
  filter:grayscale(0.7);

}

.games:hover .h-left:hover{
    filter:grayscale(0);
}

.games:hover .h-right:hover{
    filter:grayscale(0);
}

.left {
    margin-right:-7.5vw;
    transition:.2s all;
}

.left img:hover {

}

.right {
  padding-top: 6.7vw;
  margin-left: -7.5vw;
  transition:.2s all;
}

.stack-top{
    z-index: 9;
}

.stack-mid{
  z-index: 5;
}

.home-menu{
  position:absolute;
  margin-left: 11vw;
  margin-top:0.8vw;
}

.blog-menu{
  position:absolute;
  margin-left: 25.5vw;
  margin-top:0.8vw;
}

.presskit-menu{
  position:absolute;
  margin-top:0.8vw;
  margin-left:68.8vw;
}

.contact-menu{
  position:absolute;
  margin-top:0.8vw;
    margin-left:82.5vw;
}

.game-development{
  position:absolute;
  margin-top:6vw;
  margin-left:42.7vw;
}
.home-select {
  position:absolute;
  margin-left:-7.5vw;
  margin-top:-3.78vw;
  height:2.8vw;
  display:none;
}

.blog-select{
  position:absolute;
  margin-left:-4.2vw;
  margin-top:-3.78vw;
  height:2.8vw;
  display:none;
}

.press-select{
  position:absolute;
  margin-left:-2.5vw;
  margin-top:-3.7vw;
  height:2.8vw;
  display:none;
}

.contact-select{
  position:absolute;
  margin-left:-6vw;
  margin-top:-3.7vw;
  height:2.8vw;
  display:none;
}

.menuhover:hover + img{
  display:block;
}

#hide {
  display:block;
}

#hide:target {
  display:none;
}

.below {
  z-index:-1;
  position:absolute;
  margin-left: 5vw;
}

.contact {
  position:absolute;
  z-index: 9;
  margin-top: -30vw;
}

.copyright {
  margin-top: -3vw;
}

.home-hover {
  position:absolute;
  margin-left:-7vw;
  margin-top: -3.8vw;
  height:2.9vw;
  width: 18.5vw;
}

.blog-hover {
  position:absolute;
  margin-left:-3vw;
  margin-top: -3.8vw;
  height:2.9vw;
  width: 11vw;
}

.press-hover {
  position:absolute;
  margin-left:-2.5vw;
  margin-top: -3.8vw;
  height:2.9vw;
  width: 11.5vw;
}

.contact-hover {
  position:absolute;
  margin-left:-4.7vw;
  margin-top: -3.8vw;
  height:2.9vw;
  width: 18.5vw;
}

.blog {
  overflow:scroll;
  height: 67.1vh;
  width: 40vw;
  margin:auto;
  z-index: 1;
  color: #fff;
  font-size:2vmin;
  margin-top:-3vw;
  background-color: #222222;
}

.blog-main {

  color: #e4e4e4;
  font-size:30px;
  font-weight:normal;

}

.overlay-right {
  z-index: 9;
    height:33.4vw;
  width: 38.8vw;
    position: absolute;
        margin-left:9.2vw;
        margin-top:-40vw;
  transform: skew(29deg);

}

.overlay-left {
  z-index: 90;
    height:33.4vw;
  width: 38.8vw;
  position: absolute;
      margin-left:9.2vw;
      margin-top:-40vw;
  transform: skew(29deg);


}

img {-webkit-transition:-webkit-filter 0.3s ease-in-out;}
.g {-webkit-filter: grayscale(0.7);}