@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}



.circle {    display: block;
    z-index: 2;
    height: 32px;
    width: 32px;
    margin: 10px 0 0 10px;
    border-radius: 50%;
    transform: translate(-50%, 0);
    box-shadow: -4px 2px 4px rgba(0,0,0,0.25);
}
.outline {
height: 30px;
width: 30px;
stroke: #000;
stroke-width: 1.333;
fill: #a9a3ab;
}
.smile {
    stroke: #000;
    fill: none;
    stroke-width: 0.9;
    stroke-linecap: round;
    }
.logo {
position: absolute;
width: 75px;

padding-left: 15px;
padding-top: 10px;
padding-right: 10px;
height: 75px;
}
p {
font-size: 18px;
}
img {
max-width: 100%;
}

  .section-1 {
    background-color:#000000;
    width:95%;
    margin:auto;
    height: 450px;
    max-width: 800px;
  }

  .game-description {
    width: 95%;
    padding:0px;
    height: fill;
    margin: auto;
    max-width: 800px;
  }

  .header{
    display: flex;

    padding:0px;
    height: 65px;
    background-color: #232125;
    margin: auto;
    color: #f1f1f1;


  }

  .header-details{
    width: 95%;
    margin: auto;
    color: #f1f1f1;
    max-width: 800px;
    overflow: hidden;
    text-align: center;

  }

  .game-images{
    height: 250px;
    width: 375px;
    float: left;
    padding-left: 10px;
    overflow: hidden;
    visibility: hidden;
  }

  #fadeInSect{
    visibility: hidden;

    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 2s; /* Firefox < 16 */
     -ms-animation: fadein 2s; /* Internet Explorer */
      -o-animation: fadein 2s; /* Opera < 12.1 */
         animation: fadein 2s;
  }

  a{
    color: #f1f1f1;
  }

  .share-buttons{

    margin-top: 20px;
    margin-right: 50px;
  }
  .game-poster {
    float: left;
    height: 300px;
    width: 200px;
    margin: auto;
    background-repeat: no-repeat;
    background-position: 50% 0;
    -ms-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
  }
  .main-game {
    height: 300px;
    width: 350px;
    margin: auto;
  }
 .vote{
    width: 100%;
    height: 60px;
    margin: auto;
   padding-top:5px;
   visibility: hidden;
 }
 .preview{
   width: 100%;
   margin: auto;
 }
 .preview-title{
   margin: auto;
   width: 100%;
   text-align: center;
 }
 .preview-image{
  height: 400px;
  width: 289px;
  margin: auto;
  background-repeat: no-repeat;
  background-position: 50% 0;
  -ms-background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
 }

#rank{
  visibility: hidden;
}
#totalVotes{
  visibility: hidden;
}
#todaysVotes{
  visibility: hidden;
}
#todaysVotesLabel{
  visibility: hidden;
}
#totalVotesLabel{
  visibility: hidden;
}


  .game-stats{
    float: left;
    width:145px;
    padding-left: 10px;
    padding-top: 10px;

    color: #f1f1f1;
    font-size: 18px;
    font-weight: 600;
    align-content: center;
    align-items: center;
    text-align: center;
  }
  h1{
      color: #000000;
      margin-left: 10px;
  }

  @keyframes slidy {
    0% { left: 0%; }
    20% { left: 0%; }
    25% { left: -130%; }
    45% { left: -130%; }
    50% { left: -260%; }
    70% { left: -260%; }
    75% { left: -375%; }
    95% { left: -375%; }
    100% { left: 0%; }
    }
    * {
      box-sizing: border-box;
    }
    body, figure { 
      margin: 0; background: #101010;
      font-family: Istok Web, sans-serif;
      font-weight: 100;
    }
    div#captioned-gallery { 
      width: 100%; overflow: hidden; 
    }
    figure.slider { 
      position: relative; width: 600%;
      font-size: 0; animation: 30s slidy infinite; 
    }
    figure.slider figure { 
      width: 20%; height: auto;
      display: inline-block;  position: inherit; 
    }
    figure.slider img { width: 100%; height: auto; }
    figure.slider figure figcaption { 
      position: absolute; bottom: 0;
      background: rgba(0,0,0,0.4);
      color: #fff; width: 100%;
      font-size: 2rem; padding: .6rem; 
    }

  @media only screen and (max-width: 770px) {

  }

  @media only screen and (max-width: 345px){
    .game-stats{
      float: left;
      width:100px;
      padding-left: 5px;
      padding-top: 5px;
  
      color: #f1f1f1;
      font-size: 14px;
      font-weight: 600;
      align-content: center;
      align-items: center;
      text-align: center;
    }
    .main-game {
      height: 300px;
      width: 300px;
      margin: auto;
    }
    .game-poster {
      float: left;
      height: 200px;
      width: 150px;
      margin: auto;
      background-repeat: no-repeat;
      background-position: 50% 0;
      -ms-background-size: cover;
      -o-background-size: cover;
      -moz-background-size: cover;
      -webkit-background-size: cover;
      background-size: cover;
    }
  }

