*, body, button {
  font-family: 'Encode Sans', sans-serif;
}

body {
  height: 100vh;

  display: flex;
  flex-direction: column;
  align-items: center;
}

header {
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo-img {
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo-mobile {
  display: none;
}

.logo-img img {
  height: 36px;
}

nav {
  height: 46px;
  width: 100%;

  display: flex;
  justify-content: center;

  border-top: 1px solid #F5F6F7;
  border-bottom: 1px solid #F5F6F7;
}

.navbar-mobile {
  display: none;
}

ul {
  height: 100%;
  width: 100%;
  max-width: 1250px;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

ul li {
  font-size: 1.1875rem;
  line-height: 1.5rem;
  font-weight: 700;
}

.g1 a {
  color: #C3170C;
}

.oglobo a {
  color: #1E4B9B;
}

.valor a {
  color: #006766;
}

.ge a {
  color: #07AA47;
}

.cartola a {
  color: #E3662B;
}

.globoplay a {
  color: #FB0735;
}

.dropz a {
  color: #FF75BB;
}

.gshow a {
  color: #EC7D00;
}

.quem a {
  color: #323333;
}

.receitas a {
  color: #A81D83;
}

.content {
  width: 100%;
  max-width: 1250px;
  min-height: 877px;

  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  padding-bottom: 2rem;
  margin-top: 2.125rem;
}

.g1-content {
  width: 100%;
  max-width: 624px;
}

.g1-content h1 {
  font-size: 3.25rem;
  font-weight: 700;
  line-height: 4.1875rem;
  color: #C4160C;
  margin-bottom: 1.8125rem;
}

.principal-content {
  margin-bottom: 1.5625rem;
}

.principal-content p {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.375rem;
  color: #303134;
}

.last-principal-news {
  margin-top: .5rem;
}

.divider-row {
  height: 1px;
  width: 100%;
  background: #EBEDEF;
  margin-bottom: 1.5625rem;
}

.g1-news-with-images {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2.25rem;
}

.g1-new {
  width: 193px;
}

.g1-new img {
  width: 100%;
  border-radius: 12px;
  margin-bottom: 0.7rem;
}

.span-g1 {
  color: #C4170C;
}

span {
  font-weight: 500;
  font-size: .875rem;
  line-height: 1.125rem;
}

h2 {
  font-size: 1.25rem;
  line-height: 1.56rem;
  font-weight: 700;
  color: #2F3134;
  margin-top: .5rem;
}

p {
  font-weight: 400;
  font-size: .875rem;
  line-height: 1.1875rem;
  color:#2F3134;
  margin-top: 4.5px;
}

.g1-news-without-images {
  display: flex;
  justify-content: space-between;
}


.divider-column {
  height: 100%;
  width: 1px;
  background: #EBEDEF;
  margin: 0 2.25rem;
}

.ge-content, .gshow-content {
  width: 240px;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ge-new img, .gshow-new img {
  width: 100%;
  border-radius: 12px;
  margin-bottom: 0.7rem;
}

.span-ge {
  color: #16AE54;
}

.span-gshow {
  color: #EC8006; 
}

.gshow-new p + p {
  margin-top: 9px;
}

a:hover {
  transition: all 0.2s;
  filter: opacity(0.6);
}

@media (max-width: 768px) {
  :root {
    font-size: 14px;
  }

  .logo-web {
    display: none;
  }

  .logo-mobile {
    display: block;
  }

  .logo-img img {
    height: 57px;
  }

  nav {
    border-color: #E6E6E6;
    height: 60px;
  }

  .navbar-mobile {
    display: flex;
    justify-content: space-around;
  }

  .navbar-web {
    display: none;
  }

  .g1 a {
    color: #A80001;
  }

  .ge a {
    color: #06AA48;
  }

  .gshow a {
    color: #FF7F00;
  }

  .tech a {
    color: #666666;
  }

  .videos a {
    color: #0769DE;
  }

  .content {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;

    min-height: 0;
    height: 100%;

    margin-top: 1.15rem;
    padding: 0 1rem;
  }

  .g1-content {
    width: 100%;
    max-width: 100%;

  }

  .principal-content {
    border-bottom: 1px solid #E6E6E6;
    padding-bottom: 1rem;
    margin-bottom: 0;
  }
  
  .principal-content h1 {
    font-size: 2.2857rem;
    line-height: 2.8671rem;
    margin-bottom: 1rem;
  }

  .principal-content p {
    font-size: 1.2857rem;
    line-height: 1.7857rem;
    font-weight: 700;
    color: #CD150B;
  }

  .g1-news-with-images, .ge-content, .gshow-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
  }

  .new-container-mobile {
    display: flex;
  }
  
  .g1-new, .ge-new, .gshow-new {
    width: 100%;
    padding-top: 1.4284rem;
    border-bottom: 1px solid #E6E6E6;
    padding-bottom: 1rem;
  }

  .new-container-mobile img {
    width: 120px;
    height: 67px;
    border-radius: 4px;
    margin-right: 1rem;
    margin-bottom: 0;
  }

  span {
    display: none;
  }

  .new-container-mobile h2, .g1-news-without-images h2 {
    font-size: 1.2857rem;
    line-height: 1.7857rem;
    margin-top: 0;
  }

  .g1-new h2, .g1-new p {
    color: #CD150B;
  }

  .ge-new h2, .ge-new p {
    color: #06AA48;
  }

  .gshow-new h2, .gshow-new p {
    color: #FF8203;
  }

  .g1-new p, .ge-new p, .gshow-new p{
    font-size: 1.1428rem;
    line-height: 1.3571rem;
    margin-top: 1rem;
  }

  .g1-news-without-images {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .divider-row, .divider-column {
    display: none;
  }
}

@media (min-width: 769px) and (max-width: 960px){
  ul {
    justify-content: space-around;
  }

  .content {
    flex-direction: column;
    flex-wrap: nowrap;

    justify-content: flex-start;
    align-items: center;
  }

  .divider-column {
    display: none;
  }

  .g1-content {
    margin-bottom: 2.25rem;
  }

  .ge-content, .gshow-content {
    padding-top: 2rem;
    width: 100%;
    max-width: 624px;
    border-top: 1px solid #EBEDEF;
    margin-bottom: 2.25rem;

    display: flex;

  }
  
  .ge-new, .gshow-new {
    width: 193px;
  }


  .ge-content, .gshow-content {
    flex-direction: row;
    justify-content: space-between;
  }
}

@media (min-width: 961px) and (max-width: 1249px) {
  ul {
    justify-content: space-around;
  }
  
  .ge-gshow {
    display: none;
  }

  .gshow-content {
    padding-top: 2rem;
    width: 100%;
    height: auto;
    /* max-width: 624px; */
    margin-bottom: 2.25rem;

    display: flex;

  }
  
  .gshow-new {
    width: 193px;
  }


  .gshow-content {
    flex-direction: row;
    justify-content: space-around;
  }
}