/*
__________________________________________

(c) 2018 - ALL RIGHTS RESERVED 
Graphic Design and Web Design: Jaris GV
www.jar.is | @jarisgv | jaris@jar.is 

__________________________________________
*/
/* ------------------- #GLOBAL */
::selection {
  background: #e1c059;
  color: #ffffff;
}

/* ------------------- #COVER-MAIS */
#s-cover-mais {
  background-image: url("../img/bg-5.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -1;
  position: relative;
}
#s-cover-mais:after {
  padding: 70px 0 70px 0;
  background: none;
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#cover-mais {
  display: grid;
  grid-template-columns: 9px 1fr 9px;
  grid-template-rows: auto;
  grid-gap: 18px;
  height: 510px;
  padding-top: 36px;
  padding-bottom: 36px;
  align-items: self-end;
  outline: none;
}

/* ------------------- MEDIA QUERIES FOR #COVER-MAIS */
@media (min-width: 0px) and (max-width: 319px) {
  #s-cover-mais {
    height: 360px;
    background-size: 360%;
  }
}
@media (min-width: 320px) and (max-width: 575px) {
  #s-cover-mais {
    height: 360px;
    background-size: 240%;
  }
}
/* ------------------- #JORNAIS */
#s-jornais {
  background: #ffffff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
}
#s-jornais:after {
  background: none;
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#jornais {
  display: grid;
  grid-template-columns: 9px 1fr 1fr 1fr 9px;
  grid-template-rows: auto;
  grid-gap: 1px;
  padding-top: 36px;
  padding-bottom: 54px;
  outline: none;
}
#jornais .ttl {
  grid-column: 2 / 5;
  grid-row: 1 / 2;
  justify-self: center;
}
#jornais .ttl h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 33px;
  font-weight: 300;
  color: #424242;
  text-align: center;
  text-transform: uppercase;
  line-height: 1.2;
}

#jornais .card1 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

#jornais .card2 {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

#jornais .card3 {
  grid-column: 4 / 5;
  grid-row: 2 / 3;
}

#jornais .card4 {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}

#jornais .card5 {
  grid-column: 3 / 4;
  grid-row: 3 / 4;
}

#jornais .card6 {
  grid-column: 4 / 5;
  grid-row: 3 / 4;
}

#jornais .card7 {
  grid-column: 2 / 3;
  grid-row: 4 / 5;
}

#jornais .card8 {
  grid-column: 3 / 4;
  grid-row: 4 / 5;
}

#jornais .card9 {
  grid-column: 4 / 5;
  grid-row: 4 / 5;
}

#jornais .card {
  display: grid;
  background: #ffffff;
  color: #424242;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}
#jornais .card .pic {
  display: grid;
  background: #303030;
  max-width: 100%;
  height: 210px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

#jornais .pic .bg1,
#jornais .pic .bg2,
#jornais .pic .bg3,
#jornais .pic .bg4,
#jornais .pic .bg5,
#jornais .pic .bg6,
#jornais .pic .bg7,
#jornais .pic .bg8,
#jornais .pic .bg9 {
  opacity: .6;
  background-size: cover;
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: all 0.3s ease-in-out;
}

#jornais .pic .bg1 {
  background: url("../img/jor-1c.jpg") no-repeat center;
  background-size: cover;
}

#jornais .pic .bg2 {
  background: url("../img/jor-2c.jpg") no-repeat center;
  background-size: cover;
}

#jornais .pic .bg3 {
  background: url("../img/jor-3c.jpg") no-repeat center;
  background-size: cover;
}

#jornais .pic .bg4 {
  background: url("../img/jor-4c.jpg") no-repeat center;
  background-size: cover;
}

#jornais .pic .bg5 {
  background: url("../img/jor-5c.jpg") no-repeat center;
  background-size: cover;
}

#jornais .pic .bg6 {
  background: url("../img/jor-6c.jpg") no-repeat center;
  background-size: cover;
}

#jornais .pic .bg7 {
  background: url("../img/jor-7c.jpg") no-repeat center;
  background-size: cover;
}

#jornais .pic .bg8 {
  background: url("../img/jor-8c.jpg") no-repeat center;
  background-size: cover;
}

#jornais .pic .bg9 {
  background: url("../img/jor-9c.jpg") no-repeat center;
  background-size: cover;
}

#jornais .pic .bg1:hover,
#jornais .pic .bg2:hover,
#jornais .pic .bg3:hover,
#jornais .pic .bg4:hover,
#jornais .pic .bg5:hover,
#jornais .pic .bg6:hover,
#jornais .pic .bg7:hover,
#jornais .pic .bg8:hover,
#jornais .pic .bg9:hover {
  transform: scale(1.05);
  opacity: .9;
}

#jornais .pic .fa {
  font-size: 21px;
  color: #f3eacf;
}

#jornais .pic .fa-bg {
  width: 6px;
  height: 6px;
  background: rgba(0, 0, 0, 0.42);
  padding: 27px;
  border-radius: 50%;
  border: 3px solid #e1c059;
  display: grid;
  justify-content: center;
  align-content: center;
  transition: all 0.3s ease-in-out;
}
#jornais .pic .fa-bg:hover {
  background: rgba(66, 66, 66, 0.9);
}

#jornais .txt p {
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  text-align: left;
  font-weight: 600;
  padding: 3px 15px;
  transition: all 0.3s ease-in-out;
}
#jornais .txt p:hover {
  color: #e1c059;
}
#jornais .txt p span {
  font-size: 15px;
  font-weight: 100;
}

/* ------------------- MEDIA QUERIES FOR #jornais */
@media (min-width: 0px) and (max-width: 479px) {
  #jornais .ttl h2 {
    font-size: 21px;
  }

  #jornais .card .pic {
    height: 300px;
  }
}
@media (min-width: 0px) and (max-width: 767px) {
  #jornais {
    grid-template-columns: 9px 1fr 9px;
  }

  #jornais .card .pic {
    height: 300px;
  }

  #jornais .ttl {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }

  #jornais .card1 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }

  #jornais .card2 {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
  }

  #jornais .card3 {
    grid-column: 2 / 3;
    grid-row: 4 / 5;
  }

  #jornais .card4 {
    grid-column: 2 / 3;
    grid-row: 5 / 6;
  }

  #jornais .card5 {
    grid-column: 2 / 3;
    grid-row: 6 / 7;
  }

  #jornais .card6 {
    grid-column: 2 / 3;
    grid-row: 7 / 8;
  }

  #jornais .card7 {
    grid-column: 2 / 3;
    grid-row: 8 / 9;
  }

  #jornais .card8 {
    grid-column: 2 / 3;
    grid-row: 9 / 10;
  }

  #jornais .card9 {
    grid-column: 2 / 3;
    grid-row: 10 / 11;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  #jornais {
    grid-template-columns: 9px 1fr 1fr 1fr 1fr 9px;
    grid-template-rows: auto;
  }

  #jornais .card .pic {
    height: 300px;
  }

  #jornais .ttl {
    grid-column: 2 / 6;
    grid-row: 1 / 2;
  }

  #jornais .card1 {
    grid-column: 2 / 6;
    grid-row: auto;
  }

  #jornais .card2 {
    grid-column: 2 / 4;
    grid-row: auto;
  }

  #jornais .card3 {
    grid-column: 4 / 6;
    grid-row: auto;
  }

  #jornais .card4 {
    grid-column: 2 / 6;
    grid-row: auto;
  }

  #jornais .card5 {
    grid-column: 2 / 4;
    grid-row: auto;
  }

  #jornais .card6 {
    grid-column: 4 / 6;
    grid-row: auto;
  }

  #jornais .card7 {
    grid-column: 2 / 6;
    grid-row: auto;
  }

  #jornais .card8 {
    grid-column: 2 / 4;
    grid-row: auto;
  }

  #jornais .card9 {
    grid-column: 4 / 6;
    grid-row: auto;
  }
}