/*
Theme Name: Renata Design de Interiores
Theme URI: 
Author: Alexandre Beltramini
Author URI: https://portfolio.alexandrebeltramini.com.br
Description: Meu primeiro tema
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
Version: 1.0
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: alexandrebeltramini
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500&display=swap');


/*RESET CONFIGS*/
html, body{
	overflow-x:hidden;
}
.wp-block-columns {
    margin: 0;
}

.wp-block-image {
    margin: 0;
}

html {
    scroll-behavior: smooth;
}

p,
h1,
h2 {
    margin: 0;
}

/*Default*/
a {
    color: var(--wp--preset--color--white);
    text-decoration: none;
    transition: 0.3s;
}
button{
	transition: 0.3s !important;
}

a:hover{
  opacity: 0.7;
}
#port-intro figure, #projects figure{
  background: var(--wp--preset--color--bg) !important;
}


p,
h1,
h2 {
    color: var(--wp--preset--color--branco)
}

figure {
    margin-bottom: 0;
}

input:focus,
textarea:focus {
    border: 0 !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--wp--preset--color--branco) !important;
}

.content {
    max-width: 900px;
    margin: 0 auto !important;
    padding: 100px 20px !important;
}

.btn-1 a,
#wpforms-submit-183 {
    padding: 7px 30px;
}

.btn-2 a {
    background: 0;
    padding: 0 0 2px 0;
    border-bottom: 3px solid var(--wp--preset--color--branco);
    border-radius: 0;
}

.btn-3 a {
    padding: 7px 30px;
}



/*Starts here*/

#mobile-side-menu {
    display: none;
}
#logo-renata{
	line-height: 0px;
}
#logo-renata img{
	max-width: 120px !important;
}

header img {
    min-width: 90px;
}

header {
    padding: 0px 20px;
	position: relative;
	z-index:100;
}

/*HOME*/
#header {
    max-width: 900px;
    margin: 20px auto;
	padding: 20px;
    border-radius: 10px;
    z-index: 100;
    position: relative;
}

#header .wp-block-navigation__container {
    gap: 3.3em;
}

#modal-3-content {
    gap: 3.3em;
}


#footer {
    max-width: 900px;
    margin: 100px auto;
    padding: 0 20px;
}

#footer #social-nav {
    display: none !important;
}

.is-style-logos-only svg {
    max-width: 22px;
}

#footer #col1 figure {
    max-width: 90px;
    margin-bottom: 5px;
}
#footer #col3 {
  min-width: 330px;
}

.is-style-logos-only {
    margin-top: 0;
    gap: 1em;
}

.link-lb {
    margin: 0;
}

#banner-home {
    background: url('https://renatainteriores.com.br/wp-content/uploads/2023/07/img-banner-home.png)');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
    height: 39vw;
    max-height: 900px;
    margin-top: -110px;
    padding-top: 90px;
    min-height:
        /*650px*/
        46vw;
}

.banner-content {
    align-content: center;
    display: inline-grid;
}

#banner-home h1 {
    max-width: 400px;
    margin-bottom: 40px;
}

#intro {
    padding: 0;
}

#intro p {
    max-width: 490px;
}

#intro .content {
    padding-bottom: 50px !important;
}

#port-intro .content {
    padding: 0 20px !important;
}

.port-intro img {
    aspect-ratio: 2/3;
    object-fit: cover;
    max-height: 431px
}

#port-intro {
    background: linear-gradient(180deg, var(--wp--preset--color--preto) 50%, var(--wp--preset--color--bg) 50%);
}

.mais-projs-link {
    position: absolute;
    right: 20px;
    bottom: -40px;
}

#port-intro .content {
    position: relative;
}

#sobre-home {
    margin-top: 50px;
    background: url('https://renatainteriores.com.br/wp-content/uploads/2023/07/sobre-bg-1.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0% 100%;
    max-height: 600px;
}

#sobre-home .sobre-o-estudio {
    max-width: 510px;

}

#sobre-home p {
    margin: 20px 0;
}

#fale-conosco {
    padding: 0;
}

#fale-conosco h1 {
    max-width: 580px;
}

#fale-conosco p {
    max-width: 420px;
    margin: 40px 0;
}

#fale-conosco {
    background: url('https://renatainteriores.com.br/wp-content/uploads/2023/07/bg-fale-conosco.png)');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
    max-height: 900px;
    height: 39vw;
    min-height: 650px;
}

/*SOBRE*/

#banner-sobre {
    margin-top: -110px;
}

#banner-sobre {
    background: url('https://renatainteriores.com.br/wp-content/uploads/2023/07/bg-sobre.png');
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: left;
}

#banner-sobre .banner-content {
    background: rgba(173, 150, 119, 1);
}


#banner-sobre h1 {
    max-width: 447px;
}

#banner-sobre .content {
    padding: 160px 20px 100px !important;
}

#scroll-link {
    margin-top: 10px;
    border: 1px solid var(--wp--preset--color--branco);
    padding: 13px 15px 17px;
    width: 0;
    height: 0;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.seta {
    max-width: 12px;
    transform: translatey(3px);
	-moz-transform: translatey(3px);
	-webkit-transform: translatey(3px);
}

#sobre-itens {
    justify-content: space-between
}

#sobre-itens .wp-block-column.is-layout-flow {
    max-width: 190px;
}

#sobre-itens .wp-block-column.is-layout-flow:nth-of-type(1) {
    max-width: 210px;
}

#sobre-itens .wp-block-heading {
    max-width: 180px;
}

#sobre-itens .wp-block-column.is-layout-flow:nth-of-type(3) .wp-block-heading {
    max-width: 135px;
}

#sobre-itens .wp-block-separator {
    margin: 20px 0;
}

#nossos-servicos .nossos-servicos-heading {
    margin-bottom: 50px !important;
}

#sobre-renata #sobre-renata-heading {
    max-width: 684px;
    margin: 0 auto 60px;
}

#sobre-renata #renata-heading {
    margin-bottom: 20px;
}

#sobre-renata-txt {
    max-width: 780px;
    margin: 0 auto;
    background: url('https://renatainteriores.com.br/wp-content/uploads/2023/07/sobre-bg-1.png');
    background-repeat: repeat;
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 414px;
}


#sobre-renata img {
    aspect-ratio: 3/4;
    width: 330px;
}

#nossos-servicos,
#sobre-renata {
    padding: 0;
}

/*PORTFOLIO*/
#header-port .content {
    padding-bottom: 0 !important;
}

#header-port h1 {
    max-width: 455px;
    margin: 0 !important;
    padding: 0 0 0 !important;
}

#projects {
    background: linear-gradient(180deg, var(--wp--preset--color--bg) 30%, var(--wp--preset--color--preto) 0%);
    padding: 0;
}

#projects .content {
    padding-bottom: 50px !important;
    padding-top: 50px !important;
}

#projects img {
    aspect-ratio: 2/3;
    object-fit: cover;
    max-height: 431px
}

.single-cover img {
    max-height: 600px;
    margin-top: -110px;
    object-fit: cover;
}

#post-content h1,
#post-content p {
    padding-bottom: 50px;
}

#post-content img {
    width: 100%;
    height: auto;
    padding-bottom: 50px;
}

#post-content .wp-block-columns {
    gap: 50px !important;
}

#fale-conosco-projects,
#fale-conosco-single {
    padding-bottom: 100px;
}

#fale-conosco-projects p,
#fale-conosco-single p {
    margin: 40px 0;
    max-width: 450px;
}

#fale-conosco-projects .content {
    padding-top: 50px !important;
    background: url('https://renatainteriores.com.br/wp-content/uploads/2023/07/bg-port.png');
    background-repeat: no-repeat;
    background-size: 550px;
}

#fale-conosco-single .content {
    padding-top: 50px !important;
    background: url('https://renatainteriores.com.br/wp-content/uploads/2023/07/bg-port.png');
    background-repeat: no-repeat;
    background-size: 550px;
    background-position: right;
}
/*BLOG*/
#header-blog .content {
    padding-bottom: 0 !important;
}

#header-blog h1 {
    max-width: 539px;
    margin: 0 !important;
    padding: 0 0 0 !important;
}
.posts-blog{
  background: var(--wp--preset--color--black);
  border-radius: 10px;
}
.posts-blog .attachment-post-thumbnail.size-post-thumbnail.wp-post-image {
  max-width: 450px;
  aspect-ratio: 4/3;
  object-fit: cover;
	border-radius: 10px 0px 0px 10px;
transform: translatex(-1px);
}

.todos-posts li {
  width: 100%;
}
.todos-posts ul {
  gap: 40px !important;
}
.wp-block-post-template.is-layout-flow {
  display: flex;
  flex-wrap: wrap;
}
.posts-blog .wp-block-column.is-layout-flow:nth-of-type(2) {
  padding: 30px;
}

.posts-blog .wp-block-post-excerpt__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Defina o número de linhas desejado */
    -webkit-box-orient: vertical;
    overflow: hidden;
	padding-top: 20px;
}
.todos-posts .wp-block-post-excerpt__more-text {
  position: absolute;
  bottom: 20px;
}
.todos-posts .wp-block-column.is-layout-flow {
  position: relative;
}

.share-p {
  padding: 0 !important;
}
.bssbSocialShare {
  padding: 0 !important;
  transform:translatex(-5px);
}
.bssbSocialShare li{
  transition: 0.3s;
}
.bssbSocialShare li:hover{
  opacity: 0.7 !important;
}
.wp-block-query-pagination-numbers {
  padding-top: 40px;
}

.page-numbers.current {
  opacity: 0.5;
}

.page-numbers{
  padding:0 3px;
}

@media(max-width:781px){
  .posts-blog .has-text-color.has-branco-color.wp-block-post-excerpt{
  padding-bottom:30px !important;
}
  .attachment-post-thumbnail.size-post-thumbnail.wp-post-image {
    max-width: 100% !important;
    height: 300px !important;
    transform:translate(0px, -1px) !important; 
    border-radius: 10px 10px 0px 0px !important;
}
}

/*CONTATO*/

#contato-banner .content,
#em-breve-banner .content {
    padding-top: 50px !important;
    background: url('https://renatainteriores.com.br/wp-content/uploads/2023/07/sobre-bg.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
}

#contato-banner,
#em-breve-banner {
    padding-bottom: 0;
}

#contato-banner p {
    margin: 40px 0;
    max-width: 450px;
}
#form-contact {
  padding: 0;
}
#form-contact input::placeholder,
#form-contact textarea::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #fff;
    opacity: 1;
    /* Firefox */
}

#form-contact input,
#form-contact textarea {
    background: 0;
    border-bottom: 1px solid var(--wp--preset--color--branco);
    padding: 0;
    resize: none;
    color: #fff;
    font-weight: 300;
}

#form-contact textarea {
    height: fit-content;
}

.wpforms-submit-container button {
    float: right !important;
    font-weight: 300 !important;
    font-family: var(--wp--preset--font-family--poppins);
}

.wpforms-submit-container button:focus::after {
    border: 0 !important;
}

#wpforms-183 {
    margin-top: -10px;
}

#wpforms-183-field_0-container {
    padding-top: 0;
}

#form-contact p {
    max-width: 275px;
    margin-bottom: 20px;
}

.fale-whatsapp {
    color: var(--wp--preset--color--branco);
    display: inline-flex;
    gap: 10px;
    display: flex;
    align-items: center;

}

.fale-whatsapp div {
    max-width: 145px;
}

.whats-logo {
    filter: invert(100%);
    max-width: 40px;
    display: flex;
}
.wpforms-confirmation-container-full {
  background: 0 !important;
  border: 0 !important;
}
#contato-banner h1,
#contato-banner p {
  max-width: 400px;
  margin: 20px 0;
  
}
#contato-banner p {
letter-spacing: 1px;
}
/*EM BREVE*/
#em-breve-banner h1 {
    max-width: 300px;
}


/*MOBILE*/

@media(max-width:900px) {

    

    #banner-home {
        background-size: cover;
        background-position: center;
        padding-top: 0px;
        height: auto;

    }

    #sobre-home {
        background-size: 300px;
        background-position: 100% 100%;

    }

    #fale-conosco {
        background-size: cover;
        background-position: center;
        padding: 0;
        height: auto;
        min-height: auto;
    }

    .fale-conosco-content {
        background: rgba(0, 0, 0, 0.5) !important;
    }
}



@media(min-width:782px) and (max-width:1098px) {
    #banner-sobre h1 {
        font-size: 26px;
        max-width: 300px;
    }
}

@media(max-width: 781px) {

    h1 {
        font-size: 30px;
    }

    #desktop-menu {
        display: none;
    }
    #mobile-side-menu {
        display: initial;
    }
	#header .wp-block-column.is-vertically-aligned-center.is-layout-flow {
	  transform: translatey(2px);
	}
	

    #fale-conosco h1 {
        max-width: 350px;
    }

    #banner-home h1 {
        max-width: 300px;
    }

    #banner-sobre {
        margin-top: -110px;
    }

    #banner-sobre h1 {
        max-width: 300px;
    }

    #banner-sobre .wp-block-column.is-vertically-aligned-center.col-banner.is-layout-flow {
        position: absolute;
        z-index: -1;
    }

    #banner-sobre {
        background-size: cover;
        background-position: center;
    }

    .banner-content {
        background: rgba(173, 150, 119, 0.8) !important;
        margin: 0 !important;
        padding-top: 160px !important;
    }

    #sobre-renata-txt img {
        margin: 0 auto !important;
        display: block
    }

    #sobre-renata-txt h2 {
        margin: 30px 0;
    }

    #sobre-renata,
    #sobre-renata-heading {
        text-align: center;
    }

    #header-port h1 {
        max-width: 300px !important;
    }
	
	#header-blog h1 {
        max-width: 320px !important;
    }

    #fale-conosco-projects h1 {
        max-width: 350px;
    }

    #post-content .wp-block-columns {
        gap: 0 !important;
    }
	#contato-banner{
		padding: 0;
	}
	#contato-banner h1 {
  		max-width: 350px;
	}
	#whats-col{
		margin-bottom: 50px;
	}
	.wpforms-submit-container button {
  		float: left !important;
	}
	#footer {
        text-align: center;
    }
	.footer-cols {
        gap: 2em;
    }


    #footer #col3 ul {
        justify-content: center;
    }

    #footer #col2 nav {
        align-items: center;
    }

    #footer #col2 ul {
        text-align: center;
        display: contents;
    }

    #footer #col1 figure {
        display: inline-block;
    }
}

@media(max-width:716px) {
    #sobre-itens .wp-block-column.is-layout-flow:nth-of-type(1) {
        max-width: 100% !important;
    }

    #sobre-itens .wp-block-column.is-layout-flow {
        max-width: 100% !important;
    }

    #sobre-itens {
        gap: 80px;
    }

}

@media(max-width:599px) {

    #intro .content {
        padding-bottom: 50px !important;
    }

    #port-intro .is-flex-container.columns-3.wp-block-post-template.is-layout-flow {
        gap: 5%;
    }

    #sobre-home {
        margin-top: 0;
        padding-top: 0;
    }

    #sobre-home .content {
        padding-top: 50px !important;
    }

    #port-intro img {
        aspect-ratio: 1;
    }

    #port-intro li {
        max-width: 47%;
        margin-bottom: 5%;
    }

    #port-intro li:nth-of-type(3) {
        max-width: 100%;
    }

    .mais-projs-link {
        bottom: -10px;
    }

    #projects {
        padding: 0;
    }

    #projects ul {
        column-gap: 3vw !important;
        row-gap: 3vw !important;
    }

    #projects li {
        width: 48% !important;
    }

    #fale-conosco-projects .content,
    #fale-conosco-single .content {
        background-size: 60vw !important;
    }
}



/*Animation*/
.btn-mobile {
  transition: 0s !important;
}

header, div{transition: 1s !important}
.fade-in-nav{
	opacity: 0;
    transition: 0.5s ease-in; 
	transform: translatey(-100px);
}
.fade-in, .fade-in-load, .fade-in-1s, .fade-in-load-1s{
      opacity: 0;
      transition: 0.5s ease-in; 
    }

.left{
	transform: translatex(100px);
}
.right{
	transform: translatex(-100px);
}
.top{
	transform: translatey(-100px);
}
.bottom{
	transform: translatey(100px);
}
                 
.visible{
	opacity: 1;
	transform: translate(0%, 0%) !important;
	transition: opacity 0.5s ease-in; 
}