/*
Theme Name: Pastificio Raviollini
Theme URI: https://kairoscorp.com.br/criacao-de-sites/
Author: Kairós Soluções Empresariais
Author URI: https://kairoscorp.com.br/
Description: Tema criado para Pastificio Raviollini
Requires at least: 5.6
Tested up to: 6.2
Requires PHP: 7.0
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pastificio
Tags: one-column, custom-menu, custom-logo, featured-images, blog
*/


* {
  margin:0;
  padding:0;
box-sizing: border-box; }

body {background-color:#f0f0f0; margin:0;  padding:0;}

b, strong {font-weight:bolder;}

img {
  border-style: none;
  max-width: 100%;
  height: auto;
  margin-left: 0;
  margin-right: 0;
  margin-bottom:0;
  margin-top:0;
}


textarea {
  resize:none;
}

a {
  text-decoration: none;
  color: inherit;
}

a:-webkit-any-link:focus-visible {
  outline-color: transparent;
}

@font-face {
  font-family: 'GlacialIndifference';
  src: url('font/GlacialIndifference-Regular.otf') format('opentype');
  font-weight:400;
}

@font-face {
  font-family: 'GlacialIndifference';
  src: url('font/GlacialIndifference-Bold.otf') format('opentype');
  font-weight:700;
}

@font-face {
  font-family: 'GlacialIndifference';
  src: url('font/GlacialIndifference-Italic.otf') format('opentype');
  font-style: italic;
}
@font-face {
  font-family: 'Buff';
  src: url('font/Buffalo.otf') format('opentype');
  font-style: normal;
}

/* Containers */

.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container {
      max-width: 540px;
      padding-right: 15px;
      padding-left: 15px;
  }
}
@media (min-width: 768px) {
  .container {
      max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container {
      max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container {
      max-width: 1140px;
  }
}

@media (min-width: 1500px) {
  .container {
      max-width: 1500px;
  }
}


/** topo **/


/** topo **/

#main-header,   footer, #blog-home, #top, #blog-home, #header-blog, #blog-page, #page-404 {
  font-family: 'GlacialIndifference';
  font-weight:400;
  }

  .buff h1,.buff h2, .buff h3, .buff h4 {
    font-family: 'Buff'!important;
  }

  #main-header { padding: 30px 0px;}
  
#top {
    display: flex;
    align-items: center;
    color: #000;
    justify-content: right;
    margin-bottom: 20px;
    font-size:20px;
}
#top img {
  position: relative;
  top: 3px;
  padding-right: 0;
  right: 6px;
}
#top a {padding: 0 13px; transition: all 500ms ease-out;}

.sep{
  width: 3px;
  background: #000;
  height: 30px;
  padding-right: 0px;
  margin: 0 10px;
}

  /**menu**/
  
  #menu-area {
    display: flex;
    justify-content: flex-end;
    column-gap: 60px;
    align-items: center;
}

  
  .main-menu ul li {
    display: inline-block;
    line-height: 21px;
    position: relative;
  }
  
  .main-menu ul li a {
      color: #000;
      font-size: 19px;  
      text-decoration: none;
      display: block;
      font-weight: 500;
      transition: all 500ms ease-out;
      text-transform: uppercase;
  }
  
  .main-menu li {
    padding-right: 54px;
}
  
  .main-menu li:last-child{ padding-right: 0em;}
  .mobile-nav-toggle {display: none}

  
  .main-menu  a:hover {
    color: #5e8205;
}
  
  #slide-mob {display:none;}


/** footer **/

footer {
  background-color:#5e8205;
  color:#fff;;
}

footer a {
  transition: all 500ms ease-out;
}
footer a:hover{
  color: #ffda00;
}
#contato {
  padding:100px 0 70px 0px;
}

#contato .container{
  display: flex;
  justify-content: space-evenly;
  /* column-gap: 100px; */
  font-size: 20px;
}
#contato h2 {
  color: #ffda00;
  font-weight: 700;
  font-size: 35px;
  text-transform: uppercase;
}
.footer1,
.footer2 {
position:relative;
}
.tel:before, .add-footer:before, .whats a:before, .footer2 p:before {
  content: "";
  display: block;
  height: 20px;
  width: 20px;
  position: absolute;
  left: 0;
  background-image: url(https://pastificioraviollini.com.br/wp-content/uploads/2023/07/icone-rodape-telefone.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.add-footer:before {
  height: 25px;
  background-image: url(https://pastificioraviollini.com.br/wp-content/uploads/2023/07/icone-rodape-pin-mapa.png);
  width: 20px;
}
.whats a:before {
  left: 162px;
  background-image: url(https://pastificioraviollini.com.br/wp-content/uploads/2023/07/icone-rodape-whatsapp.png);
}
.footer2 p:before {
  background-image: url(https://pastificioraviollini.com.br/wp-content/uploads/2023/07/icone-rodape-relogio.png);}
.tel-footer, .add-footer, .footer2 p, .footer2 h3 {
  margin-left:30px;
}

.footer1 h3 {
  text-transform:uppercase;
  margin-top:20px;
}
#contato h3{
  font-weight:400;
}
.tel-footer {
  display: flex;
  column-gap: 40px;
  margin-top: 5px;
  margin-bottom:10px;
}
.footer2 p {
  margin-bottom: 20px;
}

.social-footer {
  margin-top:15px;
}
.social-footer img {
margin-right:10px;
transition: all 500ms ease-out; transform: scale(0.8);}
.social-footer img:hover{
  transform: scale(1.0);
}

.kairos-c, .copyright {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 10px;
}

.copyright {
  border-top: 2px solid #fff;
  padding: 20px;
  text-transform: uppercase;
  column-gap: 30px;
}

/**blog home**/
#blog-home {
  background-image: url(https://pastificioraviollini.com.br/wp-content/uploads/2023/07/bg-blog.jpg);
  padding: 80px 0 100px 0;
  background-repeat: no-repeat;
  background-size: cover;
  height: 632px;
}
#blog-home h2 {
  font-style: italic;
  color: #5e8205;
  font-size: 40px;
  text-align: center;
  font-weight: 400;
  margin-bottom: 40px;
}
.card-blog-home {
  background: #fffdee;
  display: flex;
  max-width:1190px;
  margin:0 auto;
  height:350px;
}
.content-blog-home {
    padding: 50px 50px 50px 40px;
    flex:2;
}
.content-blog-home h3 {
  color: #000;
  font-weight: 400;
  text-shadow: 0px 0px 0px #000;
  font-size: 27px;
  margin-bottom: 20px;
  line-height: 25px;
}

.img-blog-home {
  width: 418px;
  height: 100%;
  position:relative;
}

.img-blog-home img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.blog-home-date {
  position:absolute;
  z-index: 2;
  color:#fff;
  padding:25px 18px;
  text-align: center;
  background-color: #5e8205;
  width:60px;
  height:100px;
}
.b-day {
    font-weight: 700;
    font-size: 25px;
}

.b-month {
  text-transform: uppercase;
  text-shadow: 0px 0px 0px #fff;
}
.text-blog-home {
  color: #494949;
  font-size: 21px;
  line-height: 26px;
  margin-bottom: 40px;
}
.content-blog-home a{
    font-size: 18px;
    color: #000;
    transition: all 500ms ease-out;
  }

  .content-blog-home a:hover{
    color: #5e8205;
  }

  #blog-home .slick-next {
    background-image: url(https://pastificioraviollini.com.br/wp-content/uploads/2023/07/seta-02.png);
    background-repeat: no-repeat;
    width: 59px;
    height: 59px;
    background-size: contain;
    right: 41px;
    z-index: 9999999999;
}
#blog-home .slick-prev {
  background-image: url(https://pastificioraviollini.com.br/wp-content/uploads/2023/07/seta-01.png);
  background-repeat: no-repeat;
  width: 59px;
  height: 59px;
  background-size: contain;
  left: 45px;
  z-index: 9999999999;
}

#blog-home .slick-prev:before, #blog-home .slick-next:before {
  color: transparent;
  font-size: 60px;
}

#blog-home .slick-dots {
  display:none!important;
}


/**blog**/
/***      blog page      **/
#header-blog {
  background-image: url(https://pastificioraviollini.com.br/wp-content/uploads/2023/07/bg-unidades.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  display: grid;
  align-items: center;
  height:250px;
}
#header-blog h1 {
text-align: center;
font-size: 55px;
color: #ffda00;
}

.blog-1, .blog-2 {
  height: 670px;
  display: flex;
  position: relative;
  overflow: hidden;
}
.blog-1 .thumb-blog, .blog-2 .thumb-blog {
  margin-bottom: 0;
  width: 50%;
position:relative;
height: 670px;
overflow:hidden}

.thumb-blog img {
    width: 100%;
    height: 670px;
    object-fit: cover;
    transition: all 500ms ease-out;
    transform: scale(1.0);
}
.thumb-blog img:hover{
  transform: scale(1.5);
}
.blog-1 h2, .blog-2 h2 {
  font-size: 30px;
  text-transform: uppercase;
  margin-bottom: 21px;
  line-height: 38px;
  color:#000;
}
.text-blog {
  width: 50%;
  padding: 6% 6%;
  color: #494949;
  font-size: 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.btn{
      margin-top:20px;
}
.btn a {
      color: #5e8205;
      border-radius: 50px;
      font-size: 18px;
  }
.blog-1 {background: #fff;}

.blog-1 .blog-home-date {
right:0;
}

#page-404 {
    text-align: center;
    padding: 100px 0;
    color:#494949;
    font-size:20px;
}

#page-404 h2  {
  color: #5e8205;
  font-size: 130px;
}

#page-404 h1 {
  color: #000;
  font-size: 30px;
  margin: 20px 0;
}

.btn-404 {
  color: #5e8205;
  margin: 10px 0;
}

.btn-404 a { 
  transition: all 500ms ease}
.btn-404 a:hover {
  color: #ffda00;
}


@media (min-width:1200px) and (max-width:1499px){

  #menu-area {
    column-gap: 45px;
}

.main-menu li {
  padding-right: 30px;
}

  .main-menu ul li a { 
    font-size: 17px; }

    .card-blog-home { 
      max-width: 990px; 
  }

  .content-blog-home h3 {
    font-size: 25px;}

    .text-blog-home { margin-bottom: 27px;}

    #blog-home .slick-next {
      right: -17px; }

      #blog-home .slick-prev {
        left: -15px;}

        .blog-1 h2, .blog-2 h2 {
          font-size: 25px;
          line-height: 32px;}

          .text-blog {
            font-size: 18px;
        }

}


@media (min-width:1025px) and (max-width:1199px){

.main-menu ul li a {font-size: 15px;}
.main-menu li {padding-right: 20px;}
#menu-area {column-gap: 31px;}
.logo {width: 18%;}
#top {font-size: 17px;}
#top img {width: 20px;}
.card-blog-home {max-width: 800px;}
.img-blog-home {width: 284px;}
.content-blog-home h3 {font-size: 22px;}
.text-blog-home {
  font-size: 17px;
  line-height: 22px;
  margin-bottom: 21px;
}
#blog-home .slick-next {
  right: -5px;
}
#blog-home .slick-prev {
  left: -5px;
}
.blog-1 h2, .blog-2 h2 {
  font-size: 21px;
  line-height: 30px;
}
.text-blog {font-size: 18px;}
#header-blog h1 {
  font-size: 46px;}
#header-blog {height: 168px;}

}

@media (max-width:1024px) {
  
  .img-blog-home {
    width: 230px;}
    .card-blog-home {
      max-width: 630px;
  }
  .content-blog-home {
    padding: 35px;}
    .content-blog-home h3 {
      font-size: 21px;
      line-height: 28px;
  }
  .text-blog-home{
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 40px;
}
#blog-home .slick-next, #blog-home .slick-prev {
  width: 40px;
  height: 40px;
}
#blog-home .slick-next {
  right: 0;
}
#blog-home .slick-prev {
  left: 0;
}
#contato h2 {
  font-size: 24px;
}
#contato .container { 
  column-gap: 45px;
  font-size: 18px;
}
.whats a:before {
  left: 153px;
}
.copyright { 
  column-gap: 15px;
  font-size: 12px;
}
.copyright img  {
  width: 20px;
}
.blog-1 h2, .blog-2 h2 {
  font-size: 19px;
  line-height: 26px;
}
.text-blog {
  font-size: 15px;
}
.blog-1, .blog-2, .thumb-blog img {
  height: 416px;}
}

@media (min-width:768px) and (max-width:900px) {
  #top { font-size: 12px;}
  .main-menu ul li a { font-size: 12px;}
  #menu-area { column-gap: 23px;}
  .logo {  width: 17%;}
  .main-menu li {
    padding-right: 13px;}
  #menu-area { justify-content: center;}
  .sep {height: 19px;}
  #top img {  width: 16px;}

}


@media (min-width:901px) and (max-width:1024px) {
  #top {  font-size: 14px;}

  .logo  {
    width: 21%;
}
.sep {
  height: 19px;
}
.main-menu li {
  padding-right: 12px;
}
#menu-area {
  justify-content: center;
  column-gap: 28px;
}

#main-header .container {
  max-width: 800px;
}

.main-menu ul li a {
    font-size: 13px;}


}



@media (max-width: 767px) {

  #top { display:none;}
  .logo {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

  #main-header .container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;}

    .main-menu {
      background: #5e8205;
  }


  #main-header .container {
      max-width: 100%;
      padding-left: 0;
      padding-right: 0;}

      
      #menu-area {display: block;}
    
      #main-header {padding: 40px 0px 0px 0px;}
        
      .primary-navigation {
        display: none;
        background: #5e8205;
        position: absolute;
        z-index: 99;
        width: 100%;
        padding: 55px 40px 40px 40px;
    }
    .main-menu ul li a {
      color: #fff;}
    .main-menu a:hover {
        color: #ffda00;
    }
      
     .main-menu ul li {
          display: block;
          line-height: 21px;
          position: relative; }

          .main-menu li {
              padding-right: 0px;
          }
  
        .mobile-nav-toggle  {
          display: block;
        }

        .main-menu ul li a {
          padding: 10px 0;
          text-align: center;
      }
      
      .mobile-nav-toggle {
        z-index: 9999;
        margin: 0 auto;
      }
      
      .mobile-nav-toggle {
        z-index: 9999;
        margin: 0 auto;
        background-color: transparent;
        background-image: url('https://pastificioraviollini.com.br/wp-content/uploads/2023/08/menu-mobile.png');
        background-repeat: no-repeat;
        border:0;
        width: 2rem;
        aspect-ratio: 1;
        top:2rem;
        right:2rem;
        background-position: center;
        
      }

      
.card-blog-home {
  height: auto;
  flex-direction: column;
}
.img-blog-home {
  width: 100%;
}
.text-blog-home {
  font-size: 17px;
  line-height: 23px;
}

#blog-home {height: auto; padding: 80px 0 30px 0;}

.sr-only {color:transparent;}

#blog-home .slick-next, #blog-home .slick-prev {
  display: none!important;
}

/* #slide-desk {display:none;} */

#contato .container {
  justify-content: center;
  font-size: 20px;
  flex-direction: column;
  align-items: center;
  row-gap: 36px;
  text-align: center;
  font-size: 16px;
}
.footer2 p {line-height: 27px;}
#contato {
  padding: 70px 0 70px 0px;
}
.whats a:before {
  left: 147px;
  height: 15px;
  width: 15px;
}
.add-footer:before {
  height: 19px;
  width: 15px;
  left: 10px;
}
.tel:before {
  height: 14px;
  width: 14px;
  left: 8px;}
  .footer1 h3, .footer2 h3 {
    margin-bottom: 14px;
}
#contato h2 {
  margin-bottom: 15px;
}
.copyright {
  font-size: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  row-gap: 12px;
}


#blog-home .slick-dots {
  display:block!important;
}
.slick-dots li button:before {
  font-size: 45px!important;
  color: #5e8205!important;
}
.blog-1, .blog-2 {
  height: auto;
  flex-direction: column;
}
.text-blog, .blog-1 .thumb-blog, .blog-2 .thumb-blog {
  width: 100%;}
  .blog-1 .thumb-blog, .blog-2 .thumb-blog {
    height: 430px;
}
.blog-2 {
  flex-direction: column-reverse;
}

}