/*
__________________________________________

(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;
}

/* ------------------- #JHEADER */
header {
  background: #2f2f2fe0;
  text-align: center;
  position: fixed;
  z-index: 999;
  width: 100%;
  transition: all 0.5s;
  font-family: "Montserrat", sans-serif;
  height: 84px;
  align-items: center;
}
header h1 {
  margin-top: 3px;
}

.nav-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 84px;
}

.nav-logo img {
  height: 45px;
  width: 171px;
  padding: 6px;
  vertical-align: middle;
}

.scrollUp {
  transform: translateY(-100px);
}

.nav-toggle {
  display: none;
}

.nav-toggle-label {
  position: absolute;
  top: 0;
  left: 0;
  margin-left: 1em;
  height: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
  display: block;
  background: #e1c059;
  height: 3px;
  width: 2em;
  border-radius: 3px;
  position: relative;
}

.nav-toggle-label span::before,
.nav-toggle-label span::after {
  content: '';
  position: absolute;
}

.nav-toggle-label span::before {
  bottom: 7px;
}

.nav-toggle-label span::after {
  top: 7px;
}

nav {
  position: absolute;
  text-align: left;
  top: 100%;
  left: 0;
  background: rgb(47 47 47);
  width: 100%;
  transform: scale(1, 0);
  transform-origin: top;
  transition: transform 400ms ease-in-out;
}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  margin-bottom: 1em;
  margin-left: 1em;
}
nav a {
  color: #ffe38d;
  text-decoration: none;
  font-size: 15px;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity ease-in-out 250ms;
}
nav a:hover {
  color: #e1c059;
  transition: ease-in .3s all;
  transition: opacity ease-in-out 250ms;
}

.nav-toggle:checked ~ nav {
  transform: scale(1, 1);
}

.nav-toggle:checked ~ nav a {
  opacity: 1;
}

/* ------------------- MEDIA QUERIES FOR #JHEADER */
@media screen and (min-width: 992px) {
  .nav-toggle-label {
    display: none;
  }

  header {
    display: grid;
    grid-template-columns: 1fr auto minmax(600px, 1fr) 1fr;
    height: 84px;
  }

  .nav-logo {
    grid-column: 2 / 3;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .nav-logo img {
    width: 100%;
  }

  nav {
    all: unset;
    grid-column: 3 / 4;
    display: flex;
    align-items: center;
  }

  nav ul {
    display: flex;
  }

  nav li {
    margin-left: 1.5em;
    margin-bottom: 0;
  }

  nav a {
    opacity: 1;
    position: relative;
  }

  nav a::before {
    content: '';
    display: block;
    height: 1px;
    background: #e1c059;
    position: absolute;
    top: -.3em;
    left: 0;
    right: 0;
    transform: scale(0, 1);
    transform-origin: center;
    transition: transform ease-in-out 250ms;
  }

  nav a:hover::before {
    transform: scale(1, 1);
  }
}
/* ------------------- #COVER */
#s-cover {
  background: url(../img/queila-cover.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
  height: 860px;
}
#s-cover:after {
  background: linear-gradient(0deg, black, transparent);
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  right: 0;
  height: 540px;
}

#cover {
  display: flex;
  align-items: flex-end ;
  outline: none;
  height: 860px;
}
#cover .ttl {
  display: flex!important;
  flex-flow: column wrap;
  justify-content: end;
  padding-bottom: 27px;
  box-sizing: border-box;
  max-width: 666px;
  text-align: center;
  margin: 0 auto;
}
#cover .ttl h1 {
  font-family: "Montserrat", sans-serif;
  font-size: 36px;
  font-weight: 600;
  color: #ffffff;
  text-transform: capitalize;
  margin-bottom: 0;
}
#cover .ttl p {
  font-family: "Open Sans", sans-serif;
  font-size: 15px;
  color: #f5e7b5;
}

/* ------------------- MEDIA QUERIES FOR #COVER */
@media (min-width: 0px) and (max-width: 575px) {
  #s-cover {
    height: 100vh;
  }
  #s-cover:after {
    height: 666px;
  }
  #cover {
    height: 100vh;
    align-items: flex-end;
  }
  #cover .ttl {
    padding: 0 15px 54px 15px;
    box-sizing: border-box;
    text-align: center;
  }
  #cover .ttl h1 {
    font-size: 27px;
  }
  #cover .ttl p {
    font-size: 21px;
    margin-top: 6px;
  }  
  #cover .pic {
    padding-top: 0;
  }
  #cover .pic img {
    max-width: 100%;
  }
}
@media (min-width: 576px) and (max-width: 767px) {
  #s-cover {
    height: 666px;
  }
  #cover {
    height: 666px;
    align-items: flex-end;
  }
  #cover .ttl {
    max-width: 72%;
  }
  #cover .ttl h1 {
    font-size: 30px;
  }
 #cover .ttl p {
    font-size: 21px;
    margin-top: 6px;
  }  
  #cover .pic {
    padding-top: 54px;
  }
  #cover .pic img {
    max-width: 100%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
 #cover .ttl p {
    font-size: 21px;
    margin-top: 6px;
  }   
}
@media (min-width: 992px) and (max-width: 1199px) {
  #cover .ttl h1 {
    font-size: 42px;
  }
  #cover .ttl p {
    font-size: 21px;
    margin-top: 6px;
  }
  #cover .pic {
    padding-top: 90px;
  }
  #cover .pic img {
    max-width: 100%;
  }
}
@media (min-width: 1200px) {
  #cover {
    grid-template-columns: 93px auto 93px;
  }
  #cover .ttl h1 {
    font-size: 42px;
  }
  #cover .ttl p {
    font-size: 27px;
    margin-top: 15px;
  }
  #cover .pic {
    padding-top: 90px;
  }
  #cover .pic img {
    max-width: 120%;
  }
}
/* ------------------- #VIDEOS */
#s-videos {
  background: #f1f1f1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
}
#s-videos:after {
  background: none;
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

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

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

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

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

#videos .card {
  display: grid;
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 0 1px 1px #ddd;
  color: #424242;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
  padding-bottom: 15px;
}
#videos .card:hover {
  transform: translateY(-3px);
}
#videos .card .pic {
  display: grid;
  background: #303030;
  max-width: 100%;
  height: 210px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

#videos .pic .bg1,
#videos .pic .bg2,
#videos .pic .bg3 {
  opacity: .6;
}

#videos .pic .bg1 {
  background: url("../img/vid-1.jpg") no-repeat center;
  background-size: cover;
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: all 0.3s ease-in-out;
}

#videos .pic .bg2 {
  background: url("../img/vid-2.jpg") no-repeat center;
  background-size: cover;
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: all 0.3s ease-in-out;
}

#videos .pic .bg3 {
  background: url("../img/vid-3.jpg") no-repeat center;
  background-size: cover;
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: all 0.3s ease-in-out;
}

#videos .pic .bg1:hover,
#videos .pic .bg2:hover,
#videos .pic .bg3:hover {
  transform: scale(1.05);
  opacity: .9;
}

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

#videos .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;
}
#videos .pic .fa-bg:hover {
  background: rgba(66, 66, 66, 0.9);
}

#videos .card .txt {
  text-align: center;
}

#videos .txt p {
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  font-weight: 300;
  padding: 3px 15px;
  text-align: left;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 3px;
}

#videos .card h3 {
  font-family: "Open Sans", sans-serif;
  color: #424242;
  transition: all 0.3s ease-in-out;
  padding: 6px 17px;
  text-align: left;
  margin-bottom: 0;
}
#videos .card h3:hover {
  color: #e1c059;
}

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

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

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

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

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

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

  #videos .card3 {
    grid-column: 2 / 3;
    grid-row: 4 / 5;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  #videos {
    grid-template-columns: 9px 1fr 1fr 1fr 1fr 9px;
    grid-template-rows: auto;
  }

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

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

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

  #videos .card3 {
    grid-column: 4 / 6;
    grid-row: auto;
  }
}
/* ------------------- #RECONHECIMENTOS */
#s-reconhecimentos {
  background: url(../img/bg-1.jpg);
  background-repeat: repeat;
  position: relative;
  z-index: 1;
}
#s-reconhecimentos:after {
  background: none;
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#reconhecimentos {
  display: grid;
  grid-template-columns: 9px 1fr 1fr 1fr 9px;
  grid-template-rows: auto;
  grid-gap: 21px;
  padding-top: 36px;
  padding-bottom: 36px;
  outline: none;
}
#reconhecimentos .ttl {
  grid-column: 2 / 5;
  grid-row: 1 / 2;
  justify-self: center;
}
#reconhecimentos .ttl h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 33px;
  font-weight: 300;
  color: #e1c059;
  text-align: center;
  text-transform: uppercase;
  line-height: 1.2;
}
#reconhecimentos .btn {
  grid-column: 1 / 6;
  grid-row: 4 / 5;
  width: 210px;
  height: 33px;
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  font-weight: 300;
  color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 12px;
  padding: 6px;
  margin: 0 auto;
  outline: none;
  text-align: center;
  background: #424242;
  transition: all 0.3s ease-in-out;
}
#reconhecimentos .btn:hover {
  box-shadow: 0 0px 3px #e1c059;
  background: #303030;
}
#reconhecimentos a {
  color: #ffffff;
  transition: all 0.3s ease-in-out;
}
#reconhecimentos a:hover {
  color: #e1c059;
}

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

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

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

#reconhecimentos .card {
  display: grid;
  background: #ffffff;
  border-radius: 6px;
  color: #424242;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
  padding-bottom: 15px;
}
#reconhecimentos .card:hover {
  transform: translateY(-3px);
}
#reconhecimentos .card .pic {
  display: grid;
  background: rgba(60, 60, 60, 0.72);
  max-width: 100%;
  height: 210px;
  align-items: end;
  justify-content: center;
  position: relative;
  z-index: 1;
}

#reconhecimentos .pic .bg1,
#reconhecimentos .pic .bg2,
#reconhecimentos .pic .bg3 {
  opacity: .6;
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: all 0.3s ease-in-out;
}

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

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

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

#reconhecimentos .pic .bg1:hover,
#reconhecimentos .pic .bg2:hover,
#reconhecimentos .pic .bg3:hover {
  top: -9px;
  opacity: .9;
}

#reconhecimentos .pic .fa {
  font-size: 36px;
  color: #fff;
}

#reconhecimentos .pic .fa-bg {
  width: 21px;
  height: 21px;
  background: #424242;
  padding: 27px;
  border-radius: 50%;
  border: 3px solid #fff;
  display: grid;
  justify-content: center;
  align-content: center;
  margin-bottom: -45px;
  transition: all 0.3s ease-in-out;
}
#reconhecimentos .pic .fa-bg:hover {
  background: #e1c059;
}

#reconhecimentos .card .txt {
  text-align: center;
}

#reconhecimentos .txt p {
  font-family: "Open Sans", sans-serif;
  text-align: left;
  font-size: 15px;
  font-weight: 300;
  padding: 3px 15px;
}
#reconhecimentos .txt p span {
  color: #e1c059;
  font-weight: 400;
}

#reconhecimentos .card h3 {
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  color: #424242;
  text-align: center;
  transition: all 0.3s ease-in-out;
  padding: 40px 6px 0;
}
#reconhecimentos .card h3:hover {
  color: #e1c059;
}

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

  #reconhecimentos .card .pic {
    height: 300px;
  }
}
@media (min-width: 0px) and (max-width: 767px) {
  #reconhecimentos {
    grid-template-columns: 9px 1fr 9px;
  }
  #reconhecimentos .btn {
    grid-column: 1 / 4;
    grid-row: auto;
  }

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

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

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

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

  #reconhecimentos .card3 {
    grid-column: 2 / 3;
    grid-row: 4 / 5;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  #reconhecimentos {
    grid-template-columns: 9px 1fr 1fr 1fr 1fr 9px;
    grid-template-rows: auto;
  }

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

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

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

  #reconhecimentos .card3 {
    grid-column: 4 / 6;
    grid-row: auto;
  }
}
/* ------------------- #NA-MIDIA */
#s-na-midia {
  background: #ffffff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
}
#s-na-midia:after {
  background: none;
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

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

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

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

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

#na-midia .card {
  display: grid;
  background: #fafafa;
  border-radius: 6px;
  box-shadow: 0 0 1px 1px #ddd;
  color: #424242;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}
#na-midia .card:hover {
  transform: translateY(-3px);
}
#na-midia .card .pic {
  display: grid;
  background: #303030;
  max-width: 100%;
  height: 210px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

#na-midia .pic .bg1,
#na-midia .pic .bg2,
#na-midia .pic .bg3 {
  opacity: .6;
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: all 0.3s ease-in-out;
}

#na-midia .pic .bg1 {
  background: url("../img/mid-1.jpg") no-repeat center;
  background-size: cover;
}

#na-midia .pic .bg2 {
  background: url("../img/mid-2.jpg") no-repeat center;
  background-size: cover;
}

#na-midia .pic .bg3 {
  background: url("../img/mid-3.jpg") no-repeat center;
  background-size: cover;
}

#na-midia .pic .bg1:hover,
#na-midia .pic .bg2:hover,
#na-midia .pic .bg3:hover {
  transform: scale(1.05);
  opacity: .9;
}

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

#na-midia .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;
}
#na-midia .pic .fa-bg:hover {
  background: rgba(66, 66, 66, 0.9);
}

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

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

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

  #na-midia .card .pic {
    height: 300px;
  }

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

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

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

  #na-midia .card3 {
    grid-column: 2 / 3;
    grid-row: 4 / 5;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  #na-midia {
    grid-template-columns: 9px 1fr 1fr 1fr 1fr 9px;
    grid-template-rows: auto;
  }

  #na-midia .card .pic {
    height: 300px;
  }

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

  #na-midia .card1 {
    grid-column: 2 / 6;
    grid-row: 2 / 3;
  }

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

  #na-midia .card3 {
    grid-column: 4 / 6;
    grid-row: auto;
  }
}
/* ------------------- #DEPOIMENTOS */
#s-depoimentos {
  background: #f3eacf;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
}
#s-depoimentos:after {
  background: none;
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#depoimentos {
  display: grid;
  grid-template-columns: 9px 1fr 1fr 1fr 9px;
  grid-template-rows: auto;
  grid-gap: 21px;
  padding-top: 36px;
  padding-bottom: 36px;
  outline: none;
}
#depoimentos .ttl {
  grid-column: 2 / 5;
  grid-row: 1 / 2;
  justify-self: center;
}
#depoimentos .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;
}

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

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

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

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

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

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

#depoimentos .card {
  display: grid;
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 0 1px 1px #ddd;
  color: #424242;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}
#depoimentos .card:hover {
  transform: translateY(-3px);
}
#depoimentos .card .pic {
  display: grid;
  background: #303030;
  max-width: 100%;
  height: 210px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

#depoimentos .pic .bg1,
#depoimentos .pic .bg2,
#depoimentos .pic .bg3,
#depoimentos .pic .bg4,
#depoimentos .pic .bg5,
#depoimentos .pic .bg6 {
  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;
}

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

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

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

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

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

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

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

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

#depoimentos .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;
}
#depoimentos .pic .fa-bg:hover {
  background: rgba(66, 66, 66, 0.9);
}

#depoimentos .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;
}
#depoimentos .txt p:hover {
  color: #e1c059;
}
#depoimentos .txt p span {
  font-size: 15px;
  font-weight: 100;
}

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

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

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

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

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

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

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

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

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

  #depoimentos .card6 {
    grid-column: 2 / 3;
    grid-row: 7 / 8;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  #depoimentos {
    grid-template-columns: 9px 1fr 1fr 1fr 1fr 9px;
    grid-template-rows: auto;
  }

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

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

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

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

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

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

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

  #depoimentos .card6 {
    grid-column: 4 / 6;
    grid-row: auto;
  }
}
/* ------------------- #PORTFOLIO */
#s-portfolio {
  background: url(../img/bg-2.jpg);
  background-repeat: repeat;
  position: relative;
  z-index: 1;
}
#s-portfolio:after {
  background: rgba(255, 255, 255, 0.91);
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#portfolio {
  display: grid;
  grid-template-columns: 9px 1fr 1fr 1fr 9px;
  grid-template-rows: auto;
  grid-gap: 21px;
  padding-top: 36px;
  padding-bottom: 36px;
  outline: none;
}
#portfolio .ttl {
  grid-column: 2 / 5;
  grid-row: 1 / 2;
  justify-self: center;
}
#portfolio .ttl h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 33px;
  font-weight: 300;
  color: #e1c059;
  text-align: center;
  text-transform: uppercase;
  line-height: 1.2;
}
#portfolio .btn {
  grid-column: 1 / 6;
  grid-row: 4 / 5;
  width: 210px;
  height: 33px;
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  font-weight: 300;
  color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 12px;
  padding: 6px;
  margin: 0 auto;
  outline: none;
  text-align: center;
  background: #424242;
  transition: all 0.3s ease-in-out;
}
#portfolio .btn:hover {
  box-shadow: 0 0px 3px #e1c059;
  background: #303030;
}
#portfolio a {
  color: #ffffff;
  transition: all 0.3s ease-in-out;
}
#portfolio a:hover {
  color: #e1c059;
}

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

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

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

#portfolio .card {
  display: grid;
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 0 1px 1px #ddd;
  color: #424242;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
  padding-bottom: 15px;
}
#portfolio .card:hover {
  transform: translateY(-3px);
}
#portfolio .card .pic {
  display: grid;
  background: rgba(60, 60, 60, 0.72);
  max-width: 100%;
  height: 210px;
  align-items: end;
  justify-content: center;
  position: relative;
  z-index: 1;
}

#portfolio .pic .bg1 {
  opacity: .6;
  background: url("../img/port-1.jpg") no-repeat center;
  background-size: cover;
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: all 0.3s ease-in-out;
}

#portfolio .pic .bg2 {
  opacity: .6;
  background: url("../img/port-2.jpg") no-repeat center;
  background-size: cover;
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: all 0.3s ease-in-out;
}

#portfolio .pic .bg3 {
  opacity: .6;
  background: url("../img/port-3.jpg") no-repeat center;
  background-size: cover;
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: all 0.3s ease-in-out;
}

#portfolio .pic .bg1:hover,
#portfolio .pic .bg2:hover,
#portfolio .pic .bg3:hover {
  top: -9px;
  opacity: .9;
}

#portfolio .pic .fa {
  font-size: 36px;
  color: #fff;
}

#portfolio .pic .fa-bg {
  width: 21px;
  height: 21px;
  background: #424242;
  padding: 27px;
  border-radius: 50%;
  border: 3px solid #fff;
  display: grid;
  justify-content: center;
  align-content: center;
  margin-bottom: -45px;
  transition: all 0.3s ease-in-out;
}
#portfolio .pic .fa-bg:hover {
  background: #e1c059;
}

#portfolio .card .txt {
  text-align: center;
}

#portfolio .txt p {
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  font-weight: 300;
  padding: 3px 15px;
}

#portfolio .card h3 {
  font-family: "Open Sans", sans-serif;
  color: #424242;
  text-align: center;
  transition: all 0.3s ease-in-out;
  padding: 40px 6px 0;
}
#portfolio .card h3:hover {
  color: #e1c059;
}

/* ------------------- MEDIA QUERIES FOR #PORTFOLIO */
@media (min-width: 0px) and (max-width: 767px) {
  #portfolio {
    grid-template-columns: 9px 1fr 9px;
  }
  #portfolio .btn {
    grid-column: 1 / 4;
    grid-row: auto;
  }

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

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

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

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

  #portfolio .card3 {
    grid-column: 2 / 3;
    grid-row: 4 / 5;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  #portfolio {
    grid-template-columns: 9px 1fr 1fr 1fr 1fr 9px;
    grid-template-rows: auto;
  }

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

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

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

  #portfolio .card3 {
    grid-column: 4 / 6;
    grid-row: auto;
  }
}
/* ------------------- #FRASE */
#s-frase {
  background-image: url("../img/bg-3.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: -1;
  position: relative;
}
#s-frase:after {
  padding: 70px 0 70px 0;
  background: rgba(138, 85, 0, 0.36);
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#frase {
  display: grid;
  grid-template-columns: 9px 1fr 9px;
  grid-template-rows: auto;
  grid-gap: 18px;
  grid-template-areas: ". pic ." ". txt .";
  padding-top: 36px;
  padding-bottom: 36px;
  align-items: self-end;
  outline: none;
}

#frase .txt {
  grid-area: txt;
  align-self: center;
  margin: 0 auto;
}
#frase .txt p {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-size: 45px;
  color: #ffffff;
  text-align: left;
  text-transform: uppercase;
}
#frase .txt p .sp1 {
  color: #fff255;
}

#frase .pic {
  grid-area: pic;
  text-align: left;
}
#frase .pic img {
  display: flex;
  width: 21%;
  padding-top: 36px;
}

/* ------------------- MEDIA QUERIES FOR #FRASE */
@media (min-width: 0px) and (max-width: 319px) {
  #s-frase {
    background-size: cover;
  }

  #frase .pic img {
    width: 51%;
  }

  #frase .txt p {
    font-size: 30px;
  }
}
@media (min-width: 320px) and (max-width: 575px) {
  #s-frase {
    background-size: 450%;
  }

  #frase .pic img {
    width: 30%;
  }

  #frase .txt p {
    font-size: 36px;
  }
}

/*
*************************************************

---   SECTION   --->   SOBRE
   
*************************************************
*/

.mais-header .txt .ttl {
  font-family: 'Open Sans', sans-serif;
  color: #ffffff;	
  position: relative;
  margin-bottom: 6px;
}
.mais-header .txt .ttl:after {
  content: "";
  border-left: 3px solid #b39744;
  position: absolute;
  width: 100%;
  top: 0; right: 0; bottom: 0; left: -15px;
}
.mais-header .txt .desc {
  font-family: "Open Sans";
	line-height: 1.2;
	max-width: 50%;
}
.mais-container {
    font-family:"Open Sans";
    max-width: 720px;
    margin: 0 auto;
}
.mais-container img {
    border-radius: 9px;
    box-shadow: 1px 1px 12px #bbb;
    max-width: 100%;
    margin: 12px 0;
}

#mais-header {
    display: flex;
    position: relative;
    width: 100%;
    height: 720px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

#mais-header .img {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-size: cover;
    position: absolute;
    overflow: hidden;
}

#mais-header .img img {
  object-fit: cover;
  object-position: top;
  width: 100vw;
  height: 100%;
}

#mais-header .img .overlay {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    padding-bottom: 18px;
    padding-top: 396px;
    width: 100%;
    opacity: 1;
    text-align: left;
    color: #fff;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgb(0 0 0 / 89%) 100%);
}

#mais-header .txt {
  max-width: 720px;
  margin: 0 auto;
  padding: 36px;
  font-family: 'Open Sans', sans-serif;  
}

#mais-header .txt .ttl {
  font-size: 45px;
  line-height: 1.2;
  color: #fff;
}

@media (min-width: 0px) and (max-width: 319px) { 
#mais-header {
    height: 450px;
}
#mais-header .txt .ttl {
  font-size: 24px;
}
#mais-header .img .overlay {
  padding-bottom: 9px;
} 
#mais-header .txt .ttl {
  font-size: 18px;
}   
.mais-header .txt .desc {
	max-width: 100%;
} 
}

@media (min-width: 320px) and (max-width: 479px) { 
#mais-header {
    height: 450px;
}
  #mais-header .txt .ttl {
    font-size: 24px;
  }
  #mais-header .img .overlay {
    padding-bottom: 9px;
  } 
  #mais-header .txt .ttl {
    font-size: 30px;
  } 
.mais-header .txt .desc {
	max-width: 100%;
}    
}
@media (min-width: 480px) and (max-width: 666px) { 
.mais-header .txt .desc {
	max-width: 90%;
} 
}

/* ------------------- #MAIS-CONTENT */

.mais-content {
  max-width: 720px;
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  line-height: 1.5;
  margin: 0 auto;
  padding: 36px 0 72px 0;
}
.mais-content h2 {
  font-family: 'Open Sans', sans-serif;
  color: #cc8e33;
}
.mais-content .bio-btn {
  background: #cc8e33;
  padding: 6px 21px;
  box-sizing: border-box;
  border-radius: 9px;
  color: #fff;
  transition: all ease-in-out .3s;
  font-size: 21px;
}
.mais-content .bio-btn:hover {
  color: #fff;
  background: #ff9e07;
  box-shadow: 0 9px 15px #eee;
}

/* ------------------- #CONTATO */
#s-contato {
  background: rgba(165, 148, 123, 0.54);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
}
#s-contato:after {
  background: url("../img/map.png");
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#contato {
  outline: none;
}

#cont-form {
  margin: 0 auto;
}

.has-error {
  font-family: "Open Sans", sans-serif;
  color: #ef5350;
}

.has-error li {
  list-style: none;
  text-align: left;
  text-shadow: 1px 1px 1px #fff;
}

.has-error .form-control {
  border-color: #ef5350;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ef5350;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ef5350;
}

.has-error .form-control:focus {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ef5350;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ef5350;
}

.form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #424242;
  background-color: #ffffff;
  background-image: none;
  border-radius: 4px;
  -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.form-control:focus {
  background: #fafafa;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

:after, :before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.cont-envelope {
  color: #424242;
  text-align: center;
}

#cont-form .fa-stack {
  position: unset;
}

.cont-title {
  grid-column: 2 / 4;
  grid-row: 2 / 3;
}

.cont-title h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 33px;
  font-weight: 700;
  color: #424242;
  text-align: center;
  margin-bottom: 33px;
  margin-left: 9px;
  margin-right: 9px;
}

#contactForm {
  display: grid;
  grid-template-columns: 9px 1fr 1fr 9px;
  grid-template-rows: 1fr auto;
  text-align: center;
  margin: 0 auto;
}

.cont-group1 {
  width: 90%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  grid-column: 2/3;
  grid-row: 1/2;
}

.cont-group2 {
  width: 100%;
  grid-column: 3/4;
  grid-row: 1/2;
}

.cont-group3 {
  text-align: center;
  grid-column: 2/5;
  grid-row: 2/3;
  margin-bottom: 18px;
}

#msgSubmit {
  font-family: "Open Sans", sans-serif;
  color: #ef5350;
}

.form-control {
  border: none;
  border-radius: 33px;
  width: 100%;
}

.form-group {
  max-width: 100%;
  margin: 15px;
}

.form-group #name, #email, #subject {
  height: 63px;
  font-size: 21px;
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  padding-left: 27px;
  margin-top: 6px;
  margin-bottom: 6px;
  outline: none;
}

.form-group #message {
  height: 222px;
  font-size: 21px;
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  padding-left: 27px;
  padding-top: 27px;
  border-radius: 36px;
  width: 90%;
  outline: none;
}

.cont-btn {
  color: white;
  background-color: #9ccc65;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 27px;
  border: none;
  font-size: 21px;
  padding: 20px 40px;
  margin: 15px;
  transition: all .6s ease;
  outline: none;
}

.cont-btn:hover,
.cont-btn:focus,
.cont-btn:active {
  color: white;
  background-color: #ef5350;
  border-radius: 33px;
}

/* ------------------- MEDIA QUERIES FOR #CONTATO */
@media (min-width: 0px) and (max-width: 575px) {
  #contactForm {
    grid-template-columns: 9px 1fr 9px;
    grid-template-rows: repeat(3, 1fr);
    grid-gap: 6px;
  }

  .cont-group1 {
    grid-column: 2/3;
    grid-row: 1/2;
  }

  .cont-group2 {
    grid-column: 2/3;
    grid-row: 2/3;
  }

  .cont-group3 {
    grid-column: 2/3;
    grid-row: 3/4;
  }

  .form-group #message {
    width: 90%;
  }
}
/* ------------------- #FOOTER */
#s-footer {
  background: #424242;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
}
#s-footer:after {
  background: none;
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#footer {
  display: grid;
  grid-template-columns: 1fr minmax(21%, 30%) minmax(32%, 45%) 1fr;
  grid-template-rows: auto;
  grid-gap: 27px;
  grid-template-areas: ". pic txt .";
  padding-top: 33px;
  padding-bottom: 33px;
}
#footer .pic {
  grid-area: pic;
  text-align: right;
}
#footer .pic img {
  width: 71%;
}
#footer .txt {
  grid-area: txt;
}
#footer .txt p {
  font-family: "Montserrat", sans-serif;
  color: #ffffff;
  font-size: 12px;
  line-height: 1.8;
}
#footer .ttl {
  font-family: "Montserrat", sans-serif;
  font-size: 21px;
  font-weight: 900;
  line-height: 1.8;
  color: #e1c059;
}
#footer a {
  color: #fff255;
  transition: all .3s ease-in-out;
}
#footer a:hover {
  color: #ffffff;
}

/* ------------------- MEDIA QUERIES FOR #FOOTER */
@media (min-width: 0px) and (max-width: 575px) {
  #footer {
    grid-template-columns: 1fr 90% 1fr;
    grid-template-rows: auto;
    grid-template-areas: ". pic ."  ". txt .";
  }
  #footer .pic {
    text-align: center;
  }
  #footer .pic img {
    width: 45%;
    text-align: center;
  }
  #footer .txt {
    text-align: center;
  }
}
@media (min-width: 576px) and (max-width: 767px) {
  #footer {
    grid-template-columns: 1fr 90% 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: ". pic ."  ". txt .";
  }
  #footer .pic {
    text-align: center;
  }
  #footer .pic img {
    width: 45%;
    text-align: center;
  }
  #footer .txt {
    text-align: center;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  #footer {
    grid-template-columns: 9px 1fr 1fr 9px;
  }
  #footer .pic img {
    width: 100%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  #footer {
    grid-template-columns: 9px 1fr 2fr 9px;
  }
  #footer .pic img {
    width: 81%;
  }
}