.main-background{background-color:rgba(24,24,24,1); color:rgba(200,200,200,1); font-family: 'Rajdhani', sans-serif; padding:0;}
.logo{max-width:100%;}
.container-background{background-color:rgba(0,0,0,0.5); min-height:100%; }
.h1{font-weight:600;}
.parallax {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  background-image:url('background.jpg');}
  
.bottomborder{border-bottom:solid; border-width:1px; border-color: rgba(255,255,255,0.2);padding-bottom:2em; margin-bottom:2em; margin-left:0.1em;}

.game-mainbox{display:block; background-color: rgba(30,30,30,0.8); padding:1.6em; cursor:pointer; transition:0.2s; text-align:left; text-decoration:none; color:rgba(200,200,200,1); }
.game-mainbox:hover{background-color: rgba(50,50,50,0.8); transition:0.2s; color:rgba(200,200,200,1);}
.gmbr{margin-left:2em; margin-right:-2em;}
.gmbl{margin-left:-1em}
.gmbwide{margin-bottom:2em; }

.gametitle {transition:0.2s; font-size:1.3em;}
.game-mainbox:hover .gametitle{font-weight:bold; transition:0.2s; border-color:#5c7e10;}
.game-cover{float:left;width:30%; margin-right:1.25em; margin-bottom:0.2em; transition:0.2s;}
.game-cover-wide{float:left;width:20%; margin-right:1.25em; margin-bottom:0.2em; transition:0.2s;}
.game-mainbox:hover .game-cover{border-top:solid; border-left:solid; border-width:2px; border-color:#5c7e10; transition: 0.2s; margin-top:-0.2em; margin-bottom:0.4em; margin-left:-0.2em; margin-right:1.45em; }

.game-mainbox:hover .game-cover-wide{border-top:solid; border-left:solid; border-width:2px; border-color:#5c7e10; transition: 0.2s; margin-top:-0.2em; margin-bottom:0.4em; margin-left:-0.2em; margin-right:1.45em; }


.playbutton{ background-color:#31410c; text-align:center; display:inline-block; padding:0.8em 1.4em 0.8em 1.4em; font-size:1.2em;  transition:0.2s; border-radius:10em;   opacity:0.99; margin-top:-0.5em; }
.pbparent{text-align:center;}

.screenshot{width:80%; margin-left:10%; height:15em; 
    background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  opacity:1; 

  transition:0.6s;
}

.screenshot-wide{width:40%; margin-left:30%; height:16em; 
    background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  opacity:1; 

  transition:0.6s;
}

.scr_anim1{ background-size:103%;}
.scr_anim2{ background-size:100%;}
.scr_off{opacity:0; transition:0.4s;}

.game-mainbox:hover .playbutton{background-color:#5c7e10;  transition:0.3s; font-weight:bold;}

.social-parent{padding:0em 0.5em 0em 0.5em}
.social{display:block; font-size:1.5em; color:white; padding:0.3em; text-align:center; border-radius:10em;background-color: rgba(30,30,30,0.8); transition:0.2s;}

.social:hover{font-weight:bold; color:white;}
.ico{height:0.9em; margin-right:0.4em; margin-bottom:0.1em;}

.fb:hover{background-color:#4267B2; transition:0.2s;}
.di:hover{background-color:#5865F2; transition:0.2s;}
.in:hover{background-color:#C13584; transition:0.2s;}









@media screen and (max-width: 1200px) {.screenshot{height:9em; width:80%; margin-left:10%;  }
@media screen and (max-width: 992px) {
.gmbr{margin-left:0; margin-right:0; margin-bottom:1em;}    
.gmbl{margin-left:0; margin-right:0; margin-bottom:1em;}
.gmbwide{margin-left:0; margin-right:0; margin-bottom:1em;}
.screenshot{height:11em; width:70%; margin-left:15%; }   
.screenshot-wide{height:11em; width:70%; margin-left:15%; }    
.social{margin-bottom:1em;}
}
@media screen and (max-width: 768px) {
.screenshot{height:11em; width:100%; margin-left:0;}   
.screenshot-wide{height:11em; width:100%; margin-left:0;}    
    
}
@media screen and (max-width: 576px) {
.screenshot{height:9em; width:100%; margin-left:0;}
.screenshot-wide{height:9em; width:100%; margin-left:0;}
}
    
}