@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700&display=swap');

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&display=swap');

:root{
  --color-orange: #F26722;
  --color-grey-dark: #232128;
  --font-OSC: 'Open Sans Condensed';
  --font-OS: 'Open Sans';
}

body{
  font-family: var(--font-OS);
}

a, a:hover{
  color: #888;
  text-decoration: none;
}


header .top-nav{
  background-color: var(--color-grey-dark);

}

header .top-nav-wrapper{
  display: flex;
  padding: 2.2rem 1.6rem 1.3rem;
  color: white;
}

header .top-nav-wrapper, header .bottom-nav-wrapper{
  width: 100%;
  max-width: 97rem;
  margin: 0 auto;
}

body{
  background-color: #ededed;
}

.top-nav-wrapper .logo-box{
  display: flex;
  align-items: center;
  text-decoration: none;
  color: white;
}

.logo{
  height: 3rem;
}

.top-nav-wrapper .edition, .top-nav-wrapper .social-edition, .edition-select {
  display: flex;
}

.social-edition {
  margin-right: auto;
}

.top-nav-wrapper .fa-caret-down{
  line-height: 1.3;
}

.edition-select, .edition-select:hover{
  color: #fff;
}

.top-nav-wrapper .logo{
  margin-right: 1.2rem;
}

.top-nav-wrapper .bar-separator{
  border-right: 1px solid #97b7c8;
  position: relative;
  bottom: 4px;
  height: 28px;
}

.top-nav-wrapper .tag-line{
  text-transform: uppercase;
  font-size: 1.3rem;
  height: 1.5rem;
}

.top-nav-wrapper .edition{

  padding-right: 1rem;
  line-height: 3rem;
}

.top-nav-wrapper .brand{
  margin-right: 18rem;;
}

.top-nav-wrapper .edition-text{
  font-size: 1rem;
  margin-right: .8rem;
  line-height: 2.2;
}

.top-nav-wrapper .flag{
  width: 2rem;
  height: 1.5rem;
  margin-right: .4rem;
  position: relative;
  top: 0.4rem;
}

.top-nav-wrapper .social-icons {
  padding-left: 1rem;
  display: flex;
  position: relative;
  bottom: 2px;
}

.top-nav .burger-menu{
  width: 1.8rem;
  height: 2px;
  background-color: white;
  position: relative;
  margin-right: 2rem;
  margin-left: .4rem;
  cursor: pointer;
  display: none;
}

.top-nav .burger-menu::after, .top-nav .burger-menu::before{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: inherit;
  position: absolute;
}

.top-nav .burger-menu::after{
  bottom: -5px;
}

.top-nav .burger-menu::before{
  top: -5px;
}


.social-icon-t, .social-icon-y, .social-icon-f{
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-icon-t a, .social-icon-y a, .social-icon-f a{
  color: white;
}


.social-icon-f {
  font-size: 1.4rem;
  background-color: #3B5998;
  margin-right: 1rem;
}

.social-icon-f:hover {
  background-color: #4c70ba
}


.social-icon-t{
  font-size: 1.3rem;
  background-color: #4099FF;
  margin-right: 1rem;
}

.social-icon-t:hover{
  background-color: #73b4ff;
}


.social-icon-y{
  font-size: 1.3rem;
  background-color: #cd201f;
}

.social-icon-y:hover{
  background-color: #e23e3d;
}

.top-nav-wrapper .search{
  display: flex;
  align-items: center;
  padding-bottom: 1rem;
}

.search input, .search input:focus{
  background-color: transparent;
  border: none;
  width: 7rem;
  outline: none;
}

.search input::placeholder{
  color: white;
  font-size: 1.4rem;
}

.search .fa-search {
  font-size: 1.7rem;
  width: 1rem;
  position: relative;
  right: 1.6rem;
  bottom: 0.1rem;
}


.bottom-nav{
  background-color: var(--color-orange);
}

.bottom-nav-wrapper{
  width: 100%;
  max-width: 97rem;
  margin: 0 auto;
}

.bottom-nav-wrapper ul{
  list-style-type: none;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.bottom-nav-wrapper ul li {
  padding: .9rem 1.6rem .8rem ;
  transition: all .1s;

}

.bottom-nav-wrapper ul a {
  color: white;
  font-size: 1.6rem;
}


.bottom-nav-wrapper ul li:hover {
  background-color: #333; 
  cursor: pointer;
}

.bottom-nav-wrapper ul li:hover a{
  text-decoration: underline;
}

.bottom-nav-wrapper .fa-home{
  font-size: 1.8rem;
}

main {
  width: 100%;
  max-width: 97rem;
  margin: 0 auto;
  padding: 0 2.4rem;
}

main .trending-nav {
  margin: 3rem 0;
}

main .trending-nav ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  background-color: white;
  overflow: hidden;
}

main .trending-nav li {
  padding: 1rem 1.4rem;
  white-space: nowrap;
}

main .trending-nav .active{
  color: var(--color-orange);
}

main .trending-nav li a {
  color: #333;
  font-size: 1.4rem;
  font-weight: 600;
  transition: all .1s;
}

main .trending-nav li:hover a:not(.active){
  text-decoration: underline;
}

main .trending-nav li:hover {
 cursor: pointer;
}

.container .lead-card {
  display: block;
  position: relative;
}

.lead-card img {
  width: 100%;
  display: block;
}


.lead-card .content {
  background-color: #222;
  color: white;
  padding: 1.2rem 2rem;

}

.lead-card .content h2 {
  font-family: var(--font-OSC);
  font-size: 2.8rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
  margin-bottom: .8rem;
  letter-spacing: .3px;
}

.lead-card .content h2:hover {
  color: var(--color-orange);
}


.lead-card .banner, 
.gallery-news-card .banner, 
.midsize-news-cards .banner, 
.small-news-card .banner,
.big-card .banner {
  position: absolute;
  color: white;
  background-color: var(--color-orange);
  padding: .8rem 1rem;
  text-transform: uppercase;
  font-size: 1.3rem;
}

.lead-card .strapline{
  font-size: 1.6rem;
}

.lead-card-col{
  padding-right: .3rem;
  padding-left: 0;
}

.latest-news-links .latest-news-banner{
  position: relative;
}

.latest-news-links{
  padding: 0;
  padding-left: 1.3rem;
}

.latest-news-links .latest-news-banner a{
  display: block;
  background-color: var(--color-orange);
  color: white;
  padding: .9rem 2rem;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 1.6rem;
  transition: all .1s;
}

.latest-news-links .latest-news-banner a:hover{
  text-decoration: underline;
}

.latest-news-links .latest-news-banner::after{
  content: '';
  display: block;
  height: 1.6rem;
  width: 1.6rem;
  bottom: 1rem;
  background-color: var(--color-orange);
  position: relative;
  left: 50%;
  transform:  translateX(-50%) rotate(58.6deg) skewX(28.6deg);
}

.latest-news-links ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.latest-news-links ul li {
  padding: 1rem 0;
  line-height: 1.3
}

.latest-news-links ul li:nth-child(3) a, .latest-news-links ul li:nth-child(4) a {
  font-size: 1.8rem;
}

.latest-news-links ul li:not(:last-of-type){
  border-bottom: 1px solid #ccc;
}

.latest-news-links ul a {
  color: #333;
  font-size: 2.2rem;
  font-family: var(--font-OSC);
  font-weight: 700;
}

.latest-news-links ul a:hover {
  color: var(--color-orange);
}

.gallery-news-cards{
  margin: 0 -2.2rem;
}

.gallery-news-card {
  position: relative;
  padding: 0 .7rem;
  margin-bottom: 1.5rem;
}



.gallery-news-card a, .gallery-news-card img{
  display: block;
}

.gallery-news-card .img-box{
  height: 16.7rem;
}


.gallery-news-card img {
  width: 100%;
  object-fit: cover;
  height: 100%;
}

.gallery-news-card .heading {
  background-color: #222;
  padding: 1rem 2rem 1.4rem;
  color: white;
  font-family: var(--font-OSC);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 2.3rem; 
  transition: all .1s;
}

.gallery-news-card .heading:hover{
  color: var(--color-orange);
}

.gallery-news-card .gallery-news-card-wrapper{
  background-color: #222;
  height: 100%
}

.game-suggestions{
  display: flex;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding: .8rem 0;
  align-items: center; 
  text-transform: uppercase;
  margin: 0 -1.5rem;
  margin-top: 3rem;

}

.game-suggestions div:first-child{
  font-weight: 700;
  margin-left: 50%;
  transform: translateX(-50%);
}

.game-suggestions .view-more{
  margin-left: auto;
  font-size: 1.4rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.game-suggestions .view-more .fa-caret-right{
  font-size: 1.8rem;
  margin-left: .5rem;
  line-height: 1px;
}

.tab-menu {
  margin: 4rem -1.5rem;
}

.tab-menu ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  background-color: #ddd;
}

.tab-menu li{
 padding: 1.3rem 0;
 flex: 1;
 text-align: center;
 line-height: 1;
}

.tab-menu a {
  color: #868d94;
  text-transform: uppercase;
  font-size: 1.4rem;
  font-weight: 600;
  transition: all .1s;
}

.tab-menu a:hover {
  color: #333;
}

.tab-menu li:not(.active){
  border-bottom: 1px solid #ccc;
}

.tab-menu li.active{
  background-color: #ededed;
  border-top: 3px solid var(--color-orange);
  border-right: 1px solid #ccc;
  border-left: 1px solid #ccc;;
}

.tab-menu li.active a{
  color: #333;
}

.midsize-news-card {
  padding: 0 .75rem;
}

.midsize-news-cards {
  margin-left: -2.2rem;
  margin-right: -2.2rem
}

.midsize-news-cards img {
  display: block;
  width: 100%;
  height: 26rem;
  object-fit: cover;
}

.midsize-news-cards .title, .big-card .title {
  color: #333;
  font-size: 2.2rem;
  font-family: var(--font-OSC);
  font-weight: 700;
  line-height: 1.3;
}

.midsize-news-cards .byline, .small-news-card .byline, .big-card .byline{
  display: flex;
  font-size: 1.3rem;
  color: #666;
  margin: .7rem 0;
}

.midsize-news-cards time, .small-news-card time, .big-card time{
  display: inline-block;
  margin-left: .7rem;
}

.midsize-news-cards .text, .small-news-card .text, .big-card .text {
  color: #333;
  line-height: 1.5;
}

.midsize-news-cards .content-wrapper {
  padding: 1.5rem;
  background-color: white;
}

.stars .star-full, .stars .star-half{
  color: var(--color-orange);
}

.stars .star-empty {
  color: #ccc;
}

.stars .fas{
  margin-left: -2.8px;
}

.stars .star-half-other{
  transform: rotateY(180deg);
  margin-left: -22px;
  color: #ccc;
}

.midsize-news-card-wrapper {
  background-color: white;
  height: 100%;
}

.midsize-news-card-wrapper .title:hover, .big-card .title:hover{
  color: var(--color-orange);
}

.small-news-card-wrapper {
  background-color: white;
  height: 100%;
}

.small-news-cards{
  margin-left: -2rem;
  margin-right: -2rem;
  margin-top: 2rem;
}

.small-news-card-wrapper .banner-black{
  background-color: transparent;
}

.small-news-card-wrapper img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.small-news-card-wrapper .heading{
   font-size: 1.8rem;
   line-height: 1.4;
   color: #333;
   font-family: var(--font-OSC);
   font-weight: 700;
   transition: all .1s;
}

.small-news-card-wrapper .heading:hover {
  color: var(--color-orange);
}

.small-news-card-wrapper .content-wrapper{
  padding: 1.5rem;
}

.small-news-cards .small-news-card{
    padding: 0 .5rem;
}

.small-news-card-wrapper .team-link{
  color: var(--color-orange);
  text-transform: uppercase;
  font-size: 1.3rem;
  font-weight: 600;
  margin-top: 1rem;
}

.small-news-card-wrapper .img-box{
  height: 16.8rem;
}

.tiny-card .heading {
  font-size: 1.6rem;
  line-height: 
}

.tiny-card .byline {
  display: block;
}

.tiny-card time {
  margin-left: 0;
}

.tiny-card .img-box{
  height: 12.6rem;
}

.viewall{
  background-color: #333;
  padding: 1.1rem 2rem;
  color:white;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 4.1rem -1.5rem;
}

.viewall .fa-caret-right{
  font-size: 1.8rem;
  margin-left: .5rem;
}

.big-cards {
  margin-left: -1.5rem;
  margin-top: 2.2rem;
}

.big-card{
  padding: 0;
}

.big-card img {
  width: 100%;
  display: block;
}

.big-card .content-wrapper{
  background-color: white;
  padding: 1.5rem;
}

.hot {
  margin-top: 5.6rem;
}

.tiny-cards-heading .heading{
  font-size: 1.8rem;
  line-height: 1.3;
}

.tiny-cards-heading .tiny-card-heading{
  padding: 0 6.2px;
}

.small-news-card-text .text {
  margin-top: .5rem;
}

.small-news-cards-text .small-news-card-text{
  padding-right: 7.5px;
  padding-left: 7.5px;
}

.reviews .tab-menu-reviews li{
  background-color: var(--color-orange);
  border: none;
  cursor: pointer;
}

.reviews .tab-menu-reviews a{
  color: white;
}

.reviews .tab-menu-reviews {
  margin: 0;
}

.reviews {
  margin-top: -1.6rem
}

.reviews .tab-menu-reviews li.active {
  background-color: white;
  border-top: 4px solid var(--color-orange);
  border-left: 4px solid var(--color-orange);
}

.reviews .tab-menu-reviews li.active a {
  color: #ccc;
}

.reviews-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.reviews-list a {
  font-family: var(--font-OSC);
}

.reviews-list li:first-child .img-box {
  position: relative;
  display: block;
}

.reviews-list li:first-child .img-box img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.reviews-list .list-item-text{
  display: flex;
  padding: 1.4rem 1.3rem .8rem;
  background-color: white;
  border-bottom: 1px dotted #999;
}

.reviews-list .list-item-text a{
  color: #333;
}

.reviews-list li:first-child .list-item-text{
  position: absolute;
  width: 100%;
  bottom: 0;
  background-color: rgba(51,51,51, .9);
  color: white;
  padding: .9rem 1.6rem .2rem;
} 

.reviews-list h4 {
  line-height: 1.7;
  margin: 0;
}

.reviews-list .number {
  color: #999;
  font-size: 3rem;
  font-weight: 300;
  margin-right: 1.1rem;
  line-height: 1.2;
}

.reviews-row {
  margin-left: -3rem;
  margin-right: -3rem;
}

footer{
  background-color: #666;
  color: white;
  font-size: 1.4rem;
  padding: 3rem 0;
  margin-top: 6.2rem;
  
}

footer .footer-content {
  width: 100%;
  max-width: 97rem;
  margin: 0 auto;
  padding-left: 2.4rem;
  padding-right: 2.4rem;
}

footer a {
  color: var(--color-orange);
  transition: all .1s;
  font-weight: 700;
}

footer a:hover {
  text-decoration: underline;
  color: var(--color-orange);
}

footer ul{
  list-style: none;
  display: inline-block;
  margin: 2.2rem 0;
  padding: 0;
  border-top: 1px solid white;
  border-bottom: 1px solid white

}

footer li{
  display: inline-block;
  margin: 2.3rem 0;
  line-height: 12px;
}

footer li a {
  color: white;
  transition: all .1s;
  font-weight: normal;
}

footer li a:hover {
  color: white;
  text-decoration: underline;
}

footer li:not(:first-child){
  padding-left: 1rem;
}

footer li:not(:last-child){
  padding-right: 1rem;
  border-right: 1px solid white;
}


/* Media Queries */

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

  .top-nav .social-edition {
    margin-right: 3.3rem;
  }
  .top-nav .tag-line, .top-nav .edition-text{
    white-space: nowrap;
  }

  .top-nav .brand{
    margin-right: auto;
  }

}


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

  .top-nav .tag-line{
    display: none;
  }

  .top-nav .social-edition{
    margin-left: auto;
    margin-right: 4.5rem
  }

  .top-nav .top-nav-wrapper{
    margin-right: .9rem;
  }

  footer{
    margin-top: 4.2rem;
  }

  .reviews {
    margin-top: 0;
  }

  .viewall{
    margin-top: 3rem;
    margin-bottom: 3rem;
  }

  .container {
    max-width: 100%;
  }

  .latest-news-links{
    padding-left: 0;
    order: -1;
    margin-bottom: 2.1rem;
  }

  .midsize-news-card {
    border-bottom: 1px solid #ccc;
    padding: 2rem 0;
  }

  .midsize-news-card a{
    display: flex;
  }

  .midsize-news-card-wrapper, .midsize-news-card-wrapper .content-wrapper {
    background-color: transparent;
  }

  .midsize-news-card-wrapper .content-wrapper {
    margin-top: -.6rem;
    padding-top: 0;
    padding-bottom: 0;
  }

  .midsize-news-card .img-box{
    flex-basis: 25rem;
    height: 14rem;
  }

  .midsize-news-card img {
    height: 100%;
  }

  .midsize-news-card .content-wrapper{
    flex: 8
  }
  
  .latest-news-links ul a{
    font-size: 2rem;
  }
  
  .latest-news-links ul li:nth-child(3) a, 
  .latest-news-links ul li:nth-child(4) a {
    font-size: 1.6rem;
  }

  .row.small-news-cards{
    margin-top: 0;
    margin-bottom: 0;
  }

  .row.midsize-news-cards{
    margin-bottom: 0;
  }

  .small-news-cards .small-news-card{
    border-bottom: 1px solid #ccc;
    padding: 2rem 0;
  }

  .small-news-cards .small-news-card:last-child{
    border-bottom: none;
    /* padding-bottom: 0; */
  }

  .small-news-card-wrapper{
    background-color: transparent;
  }

  .small-news-card a{
    display: flex;
  } 

  .small-news-card .img-box {
    flex-basis: 25rem;
    height: 14rem;
  }

  .small-news-card .content-wrapper {
    flex: 8;
    margin-top: -.6rem;
    padding-top: 0;
    padding-bottom: 0;
  }

  .small-news-card .heading{
    font-size: 2.2rem;
  }

  .small-news-card .byline{
    font-size: 1.3rem
  }

  .small-news-card .text{
    font-size: 1.6rem;
  }

}

@media screen and (max-width: 850px){
  .top-nav .social-edition{
    margin-right: 2.6rem
  }
}

@media screen and (max-width: 830px){
  .bottom-nav .movies-link{
    display: none;
  }
}

@media screen and (max-width: 740px){
  .bottom-nav .switch-link{
    display: none;
  }

  .top-nav .edition-text {
    display: none;
  }
}


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

  .container{
    overflow: hidden;
  }

  .top-nav .burger-menu{
    display: block;
  }

  .top-nav .social-icons, .top-nav .bar-separator, .top-nav input{
    display: none;
  }

  .top-nav .fa-search{
    font-size: 2rem;
    bottom: 0.1rem;
  }

  .top-nav .brand {
    margin-right: auto;
  }

  main {
    padding: 0;
  }

  main .trending-nav ul{
    margin: 0 2.4rem;
  }

  .latest-news-links {
    padding: 0 2.4rem; 
  }

  .lead-card .content h2 {
    font-size: 2.2rem;
  }


  .gallery-news-card .heading{
    font-size: 1.6rem;
  }

  .game-suggestions {
    position: relative;
  }

  .game-suggestions .view-more{
    position: absolute;
    bottom: -3.7rem;
    margin-left: 3.5rem;
  }

  .tab-menu{
    margin-top: 5rem;
  }

  .midsize-news-card a {
    flex-direction: column;
  }

  .midsize-news-card .img-box{
    height: auto;
  }

  .midsize-news-card{
    padding: 0;
  }

  .midsize-news-card .content-wrapper{
    padding: 2.8rem;
  }

  .midsize-news-card img {
    max-height: 38.4rem;
  }

  .midsize-news-card{
    border: none;
  }
  
  .small-news-card .img-box {
    display: none;
  }

  .small-news-card .content-wrapper {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .midsize-news-card {
    border-bottom: 1px solid #ccc;
  } 
  .midsize-news-card .content-wrapper{
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .midsize-news-card:last-child .img-box{
    display: none;
  } 

  .big-card .content-wrapper{
    padding: 2rem 2.5rem;
    background-color: transparent;
  }

  .game-suggestions.hot{
    margin-top: .4rem;
    margin-bottom: .4rem;
  }

  .row.big-cards{
    margin-bottom: 0;
  }

  .tiny-card-heading:first-child .img-box{
    display: block;
    margin-bottom: 2rem;
  }

  .tiny-card-heading:first-child a {
    flex-direction: column;
  }

  .tiny-card-heading:first-child .img-box{
    max-height: 38.4rem;
    height: auto;
  }

  .big-cards-2{
    margin-top: 5rem;
  }

  .viewall{
    margin-top: 2.2rem;
    margin-bottom: 2.2rem;
  }
  .game-suggestions {
    margin-top: 0;
  }

  footer li, footer ul{
    display: block; 
    text-align: center;
  }

  footer li {
    border: none !important;
    padding: 0 !important;
    margin-top: 3.1rem;
    margin-bottom: 3.1rem;
  }

  .latest-news-links .latest-news-banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

  .lead-cards{
    position: relative;
  }

   .latest-news-links ul{
    margin-top: 6.8rem;
  }

  .bottom-nav{
    display: none;
  }

  footer ul li:first-child{
    margin-top: 2.4rem;
  }

  footer ul li:last-child{
    margin-bottom: 2.6rem;
  }
}


@media screen and (max-width: 576px){
  .gallery-news-card a {
    display: flex;
  }

  .gallery-news-card .banner{
    display: none;
  }

  .gallery-news-card .img-box{
    flex-basis: 15.1rem;
    height: 9rem;
  }

  .gallery-news-card .heading {
    flex: 6;
  }

  .game-suggestions .view-more{
    margin-left: 1.8rem;
  }
}