/* -------------------------------------------*--------------*--------------------------------------------------*/
/*                    -----------------------*   CUSTOM CSS   *------------------------                         */
/* -------------------------------------------*--------------*--------------------------------------------------*/

@font-face {
    font-family: 'sailecblack_italic';
    src: url('./assets/fonts/type_dynamic_-_sailec_black_italic-webfont.woff2') format('woff2'),
         url('./assets/fonts/type_dynamic_-_sailec_black_italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sailecblack';
    src: url('./assets/fonts/type_dynamic_-_sailec_black-webfont.woff2') format('woff2'),
         url('./assets/fonts/type_dynamic_-_sailec_black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sailecbold_italic';
    src: url('./fonts/type_dynamic_-_sailec_bold_italic-webfont.woff2') format('woff2'),
         url('./fonts/type_dynamic_-_sailec_bold_italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sailecbold';
    src: url('../fonts/type_dynamic_-_sailec_bold-webfont.woff2') format('woff2'),
         url('../fonts/type_dynamic_-_sailec_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sailechairline_italic';
    src: url('./fonts/type_dynamic_-_sailec_hairline_italic-webfont.woff2') format('woff2'),
         url('./fonts/type_dynamic_-_sailec_hairline_italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sailechairline';
    src: url('./fonts/type_dynamic_-_sailec_hairline-webfont.woff2') format('woff2'),
         url('./fonts/type_dynamic_-_sailec_hairline-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'saileclight_italic';
    src: url('./fonts/type_dynamic_-_sailec_light_italic-webfont.woff2') format('woff2'),
         url('./fonts/type_dynamic_-_sailec_light_italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'saileclight';
    src: url('./fonts/type_dynamic_-_sailec_light-webfont.woff2') format('woff2'),
         url('./fonts/type_dynamic_-_sailec_light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sailecmedium_italic';
    src: url('./fonts/type_dynamic_-_sailec_medium_italic-webfont.woff2') format('woff2'),
         url('./fonts/type_dynamic_-_sailec_medium_italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sailecmedium';
    src: url('./fonts/type_dynamic_-_sailec_medium-webfont.woff2') format('woff2'),
         url('./fonts/type_dynamic_-_sailec_medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sailecregular_italic';
    src: url('./fonts/type_dynamic_-_sailec_regular_italic-webfont.woff2') format('woff2'),
         url('./fonts/type_dynamic_-_sailec_regular_italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sailecregular';
    src: url('../fonts/type_dynamic_-_sailec_regular-webfont.woff2') format('woff2'),
         url('../fonts/type_dynamic_-_sailec_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* -------------------------------------------*--------------*--------------------------------------------------*/
/*                    -----------------------*   TYPE's CSS   *------------------------                         */
/* -------------------------------------------*--------------*--------------------------------------------------*/
h1 {
    font-size: 75px;
    font-weight: 600;
    max-width: 400px;
    font-family: sailecbold;
}

h2 {
    font-family: sailecbold;
}

h3 {
    font-weight: bold;
    font-size: 55px;
    margin-bottom: 30px;
    color: #4650ff;
    font-family: sailecbold;
}

h4 {
    font-size: 30px;
    margin-bottom: 30px;
    font-weight: bold; 
    color: #4650ff;
    font-family: sailecbold;
}

h5 {
    font-size: 30px;
    font-weight: lighter;
    font-family: sailecregular;
    margin-bottom: 20px;
}

.banner-blocks h5 {
    font-size: 30px;
    font-weight: lighter;
    font-family: sailecregular;
    margin-bottom: 20px;
    overflow: hidden;
    border-right: 0.15em solid #ffffff;
    white-space: nowrap;
    width: 0;
    max-width: 520px;
    animation: typing 2s steps(15, end) forwards, blinking .8s infinite;
    animation-delay: 2s;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100%; border-right: none; }
}

@keyframes blinking {
    from { border-color: transparent }
    to { border-color: #ffffff; }
}


.banner-blocks img {
    transform-origin: center;
    -moz-animation: scale 2s; 
    -webkit-animation: scale 2s; 
    -o-animation: scale 2s; 
}

@keyframes scale {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

@-moz-keyframes scale { 
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

@-webkit-keyframes scale { 
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

@-o-keyframes scale {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

.banner-blocks h6 {
    -moz-animation: fade-in 1s;
    -webkit-animation: fade-in 1s;
    -o-animation: fade-in 1s;
    animation-fill-mode: forwards;
    opacity: 0;
    animation-delay: 4s;
}

@keyframes fade-in {
    0% {
        transform: translate3d(0, -50px, 0);
        opacity: 0;
    }
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@-moz-keyframes fade-in {
    from {
        transform: translate3d(0, -50px, 0);
        opacity: 0;
    }
    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@-webkit-keyframes fade-in { 
    from {
        transform: translate3d(0, -50px, 0);
        opacity: 0;
    }
    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@-o-keyframes fade-in {
    from {
        transform: translate3d(0, -50px, 0);
        opacity: 0;
    }
    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

h6 {
    text-align: center;
    font-size: 26px;
    line-height: 26px;
    color: #4650ff;
    font-family: sailecregular;
}

p {
    font-size: 20px;
    line-height: 26px;
    color: #4650ff;
    font-family: sailecregular;
}

/* -------------------------------------------*--------------*--------------------------------------------------*/
/*                    -----------------------*   REUSE CSS   *------------------------                         */
/* -------------------------------------------*--------------*--------------------------------------------------*/

.ofh{overflow: hidden;}
.fl {float: left;}
.fr {float: right;}

.small-text,
.content-block-columns-m .small-text {
    font-size: 10px;
    line-height: 16px;
    color: #000;
}

.accordion-title {
    cursor: pointer;
    position: relative;
}

.accordion-title::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: relative;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    transition: transform 0.2s ease-out;
}

.active::after {
    transform: translateY(-50%) rotate(180deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.accordion-content a {
    color: #4650ff;
}

/* -------------------------------------------*--------------*--------------------------------------------------*/
/*                    -----------------------*   HEADER CSS   *------------------------                         */
/* -------------------------------------------*--------------*--------------------------------------------------*/

.site-header {
    display: none;
}

.logo {
    max-width: 300px !important;
    width: 100% !important;
}

#main {
    padding: 0;
}

.top-banner {
    background-color: #4650ff;
    padding: 70px 115px 0 115px;
    position: relative;
    z-index: 2;
    margin-bottom: 20px;
}

.banner-blocks {
    display: table;
    padding: 100px 0;
    color: #ffffff;
    width: 100%;
}

.banner-blocks div {
    display: table-cell;
    width: 48%;
    vertical-align: top;
}

.banner-blocks div:last-child {
    margin-top: -100px;
}

.banner-blocks .label {
    position: absolute;
    max-width: 200px;
    top: 45%;
    margin-left: -10%;
    text-align: center;
}

.banner-blocks .label:before {
    content: "";
    background: #0ff;
    background: linear-gradient(151deg,rgba(70,80,255,1) 0%,rgba(0,255,255,1) 100%);
    width: 245px;
    height: 230px;
    border-radius: 50%;
    display: block;
    position: absolute;
    z-index: 1;
    top: -50px;
    left: -20px;
}

.banner-blocks .label img {
    position: relative;
    z-index: 1;
}

.banner-blocks .label p {
    font-size: 14px;
    line-height: 17px;
    position: relative;
    z-index: 2;
    color: #fff;
}

.banner-blocks .label h2 {
    font-size: 34px;
    font-weight: bold;
    position: relative;
    z-index: 2;
    color: #fff;
}

.top-banner div img {
    max-width: 570px;
    width: 100%;
}


/* -------------------------------------------*--------------*--------------------------------------------------*/
/*                    -----------------------*   CONTENT CSS   *------------------------                         */
/* -------------------------------------------*--------------*--------------------------------------------------*/

.content {
    background-color: #cfdaf7;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
    max-width: 1115px;
    margin: 0 auto;
    box-shadow: 0 20px 60px 75px #cfdaf7;
    padding-top: 20px;
    z-index: 1;
}

.container-fluid {
    text-align: center;
}

.container-fluid.flex {
    text-align: left;
    display: flex;
    gap: 80px;
    padding: 40px 0 90px;
}

.container-fluid.flex div:first-child {
    width: 37%;
}

.container-fluid p.small-text {
    text-align: left;
}

.container-fluid p {
    margin: 0 0 30px;
}

.video-circle {
    border-radius: 50%;
    object-fit: cover;
}

.content h6 {
    font-size: 16px;
    text-align: justify;
    line-height: 19px;
    color: #000;
    max-width: 640px;
    margin: 0 auto;
}

.content h6 span {
    color: #4650fe;
    font-weight: bold;
}

.content img,
.content-center-bottom img {
    max-width: 400px;
    width: 100%;
    margin-bottom: 30px;
}

.row {
    display: flex;
    flex-direction: row;
}
  
.column {
    flex: 1;
    padding: 10px;
}

.column:nth-child(odd) {
    order: 1;
}

.column:nth-child(even) {
    order: 2;
}

.content .circles-bg {
    max-width: 1400px;
    width: 100%;
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    margin: -115px auto;
}

.content h1.top-title  { 
    text-align: center;
    font-weight: bold;
    position: relative;
    z-index: 2;
    margin-top: 30px;
    font-size: var(--heading--font-size-h2);
	letter-spacing: var(--heading--letter-spacing-h2);
	line-height: var(--heading--line-height-h2);
    max-width: 100%;
}

.content .top-title span { 
    color: #4650ff;
}

.content .first-content .content-block:first-child{
    margin: 100px auto 100px;
}

/* .content-block {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    gap: 115px;
    max-width: 1100px;
    margin: 200px auto 150px;
} */

.content-block-columns-m {
    display: none;
}

.content-block {
    display: table;
    max-width: 1100px;
    margin: 50px auto;
}

.content-block div {
    display: table-cell;
    width: 48%;
    vertical-align: middle;
}

.content-block div img {
    text-align: right;
    display: block;
    margin: 0 auto 0 auto;
    max-width: 385px;
    width: 100%;
}

.content-block div p {
    font-size: 20px;
    line-height: 22px;
}

.content-block div:last-child {
    color: #4650ff;
}

.content-left-column .graph-block h4 {
    max-width: 350px;
}

.content-left-column .graph-block img {
    max-width: 690px;
    width: 100%;
    position: relative;
    margin-left: -100px;
}

.content-left-column .graph-block p {
    padding: 15px 0px;
    max-width: 365px;
}

.content-left-column .second-block {
    margin-top: 35px;
}

.content-left-column .second-block img {
    padding: 0 0 0 25px;
}

/* .content-block-columns {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    gap: 55px;
    max-width: 1100px;
} */

.content-block-columns {
    display: table;
    max-width: 1100px;
}

.content-left-column, 
.content-right-column {
    color: #4650ff;
    display: table-cell;
    width: 48%;
    vertical-align: top;
}

.content-left-column .second-block{
    padding: 0 60px 0 0;
}



.content-right-column {
    position: relative;
    top:-15px;
}

.custos-gif {
    background-image: url(/wp-content/themes/eutenhogasnatural-template/assets/videos/Custos_1.gif);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    min-height: 400px;
    margin-bottom: 0;
}

/* .content-right-column {
    margin-top: -100px;
} */

.content-right-column img {
    max-width: 400px;
}

.second-block {
    margin-top: 0;
}

.second-block .small-text {
    margin-bottom: 100px;
}

.content-center-info-m {
    display: none;
}

.content-center-info,
.content-center-info-simulador{
    max-width: 1115px;
    margin: 100px auto;
    position: relative;
    z-index: 1;
    background-color: #ffffff;
    box-shadow: 0 0px 60px 85px #ffffff;
    position: relative;
    transition: all .5s linear;
}

.content-center-info::before {
    content: "";
    position: absolute;
    background-image: url(/wp-content/uploads/2023/05/img.webp);
    background-repeat: no-repeat;
    background-size: cover;
    width: 320px;
    height: 320px;
    top: -65px;
    left: -179px;
    z-index: 1;
    opacity: 1;
    transition: all .5s linear;
}

.content-center-info::after {
    content: "";
    position: absolute;
    background-image: url(/wp-content/themes/eutenhogasnatural-template/assets/videos/camaleao_anim.gif);
    background-repeat: no-repeat;
    background-size: cover;
    width: 300px;
    height: 300px;
    top: -50px;
    left: -170px;
    z-index: 1;
    opacity: 0;
    transition : all .5s linear;
}

.content-center-info.on {
    transition : all .5s linear;
}

.content-center-info.on::after {
    opacity: 1;
    transition : all .5s linear;
}

.content-center-info h3 {
    text-align: center;
}

.content-center-info .text-blocks {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 95px;
    max-width: 1150px;
    margin: 75px auto;
    list-style: none;
    padding: 0;
    position: relative;
    z-index: 2;
}

.content-center-info .text-blocks li {
    position: relative;
}

.content-center-info .text-blocks li::before {
    content: "";
    position: absolute;
    background-image: url(/wp-content/uploads/2023/05/arrow.png);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
    width: 40px;
    height: 20px;
    right: -60px;
    top: 40px;
}

.text-blocks li:last-child::before {
    display: none;
}

/* .content-center-bottom {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    gap: 115px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 100px 0 0 0;
    background-color: #cfdaf7;
    box-shadow: 0 20px 60px 75px #cfdaf7;
} */

.content-center-bottom {
    display: table;
    max-width: 1100px;
    margin: 0 auto;
    padding: 50px 0 0 0;
    background-color: #cfdaf7;
    box-shadow: 0 20px 60px 75px #cfdaf7; 
}

.content-center-bottom-block {
    display: block !important;
    width: 100% !important;
}

.content-center-bottom div {
    display: table-cell;
    width: 48%;
    vertical-align: middle;
}

/* .content-center-bottom div:last-child {
    padding: 85px 0;
}

.content-center-bottom p {
    max-width: 290px;
} */

.bottom-content-isolated {
    background: rgb(61,145,254);
    background: -moz-linear-gradient(90deg, rgba(61,145,254,1) 0%, rgba(93,159,255,1) 45%);
    background: -webkit-linear-gradient(90deg, rgba(61,145,254,1) 0%, rgba(93,159,255,1) 45%);
    background: linear-gradient(90deg, rgba(61,145,254,1) 0%, rgba(93,159,255,1) 45%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3d91fe",endColorstr="#5d9fff",GradientType=1);
    margin-bottom: 0;
    padding-top: 30px;
}

.bottom-content-isolated .content-block {
    margin-bottom: 0;
}

.bottom-content-isolated .content-center-bottom-block h3,
.bottom-content-isolated .content-center-bottom-block p {
    color: #ffffff;
}

.bottom-content-services {
    margin-top: 0;
    margin-bottom: 0;
    background-color: #4650ff;
    background-repeat: no-repeat;
    background-size: contain;
}

.bottom-content-services .content-block {
    max-width: 750px;
    margin: 0 auto;
    padding: 150px 60px;
}

.bottom-content-services .content-block h3,
.bottom-content-services .content-block h4,
.bottom-content-services .content-block p,
.bottom-content-services .content-block a {
    color: #ffffff;
}

.bottom-content-distribution {
    max-width: 1100px;
    margin: 0 auto;
    background: rgb(204,209,253);
    background: linear-gradient(180deg, rgba(204,209,253,1) 15%, rgba(204,209,253,0) 100%);
    position: relative;
    z-index: 2;
}

.bottom-content-distribution h4 {
    font-size: 24px;
}

.bottom-content-distribution .content-block {
    margin: -70px 0;
    padding: 100px;
    color: #fff;
    display: block;
}

/* .bottom-content-distribution ul {
    display: table;
} */

.bottom-content-distribution ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 40px;
}

.bottom-content-distribution ul li { 
    display: block;
}

/* .bottom-content-distribution ul li {
    float: left;
    width: 33%;
    margin-bottom: 40px;
} */

.bottom-content-distribution ul li p {
    font-size: 14px;
}

.bottom-content-distribution ul li h5 {
    color: #4650ff;
    font-size: 24px;
    font-weight: 500;
}

.page-template-default .entry-content p {
    margin: 0px 0 25px;
    color: #ffffff;
}

.page-template-default .wpb_text_column h2,
.page-template-default table,
.page-template-default a {
    color: #ffffff;
}

.page-template-default {
    background-color:#4650ff !important;
}

.page-template-default p,
.page-template-default table {
    font-size: 16px;
}

.page-template-default header.entry-header {
    display: none;
}

.page-template-default .small-text p {
    font-size: 10px;
    margin-bottom: 0;
}

.page-template-default .small-text p:last-child {
    margin-bottom: 50px;
}


.page-template-default .widget-area {
    margin: 0 auto;
}


/* -------------------------------------------*--------------*--------------------------------------------------*/
/*                    -----------------------*   FOOTER CSS   *------------------------                         */
/* -------------------------------------------*--------------*--------------------------------------------------*/
.widget-area {
    max-width: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100%;
    display: block;
    margin: -100px auto;
    position: relative;
    z-index: 1;
}

.widget-area .footer-blocks {
    padding: 200px 0;
    max-width: 1100px;
    margin: 0 auto;
}

.textwidget  img {
    display: block;
}

.widget-area .footer-blocks img {
    max-width: 250px;
}

.widget-area .footer-block-1 {
    display: table;
    float: left;
    margin-top: 50px;
}

.widget-area .footer-block-2 {
    margin-top: 5px;
}

.widget-area .address {
    margin: 50px 0;
    color: #fff;
    /* float: left; */
    display: table-cell;
    vertical-align: bottom;
}

.widget-area .address p {
    font-size: 14px;
    line-height: 20px;
    max-width: 226px;
}

.widget-area .address p a {
    color: #fff;
    text-decoration: none;
}

.widget-area .img-partners {
    display: table-cell;
    vertical-align: bottom;
    overflow: hidden;
}

.widget-area .img-partners img {
    float: left;
    margin: 0 15px;
    max-width: 70px;
}

.widget-area .img-partners img:first-child {
    max-width: 70px;
    margin-left: 60px;
}

.widget-area .img-partners img:last-child {
    max-width: 52px;
}

.copyright p {
    color: #fff;
    max-width: 290px;
    font-size: 14px;
    line-height: 20px;
}

.copyright li {
    line-height: 16px !important;
}

.copyright a {
    color: #fff !important;
    font-size: 14px;
    text-decoration: none;
}

.copyright .optanon-toggle-display {
    border: solid 1px #ffffff;
    border-radius: 30px;
    padding: 7px 20px;
    margin-bottom: 30px;
    display: block;
    max-width: 165px;
    font-weight: 500;
}

.address h6 {
    text-align: left;
    color: #ffffff;
    margin-bottom: 25px;
}


/* -------------------------------------------*--------------*--------------------------------------------------*/
/*                    -----------------------*   MEDIA QUERIES CSS   *------------------------                  */
/* -------------------------------------------*--------------*--------------------------------------------------*/

@media only screen and (min-width: 2000px) {
    .header-content {
        max-width: 1600px;
        margin: 0 auto;
    }

    .banner-blocks .label {
        top: 50%;
        margin-left: -5%;
    }

    .bottom-content-services {
        background-color:#4650fe; 
        background-image: url('/wp-content/uploads/2023/05/LP_Floene_BG_2600-scaled.jpg') !important;
        background-repeat: no-repeat;
        background-size: 100%;
    }
    .content-center-info {
 
        box-shadow: 0 0px 90px 120px #ffffff;
    }

    .content,
    .content-center-bottom {
        box-shadow: 0 20px 100px 120px #cfdaf7;
    }

    .content,
    .content-center-info,
    .content-center-bottom {
        max-width: 1600px;
    }

    .content-block-columns {
        max-width: 1600px;
    }

    .content-left-column, .content-right-column {
        width: 50%;
    }

    .bottom-content-services .content-block {
        max-width: 1100px;
    }

    .widget-area {
        margin: -100px auto;
        padding: 200px 0;
    }
    
}

@media only screen and (max-width: 1280px) {
    .top-banner div img {
        width: 75%;
    }
    .banner-blocks div:last-child {
        margin-top: -30px;
    }
    .top-banner {
        padding: 70px 0px 0 70px;
    }
    .banner-blocks .label {
        top: 50%;
    }
    .banner-blocks .label::before {
        width: 210px;
        height: 200px;
    }

    .banner-blocks .label:before {
        content: "";
        top: -35px;
        left: -5px;
    }

    .content, 
    .content-center-info,
    .content-center-bottom,
    .bottom-content-isolated .content-block {
        padding: 0 30px;
    }

    .content-center-bottom-block:last-child {
        margin-top: 50px;
    }

    .content-center-info::before {
        width: 235px;
        height: 235px;
        top: -65px;
        left: -60px;
    }

    .content-center-info::after {
        width: 220px;
        height: 221px;
        top: -55px;
        left: -54px;
    }
    
    .content-left-column .graph-block img {
        margin-left: -60px;
    }
    .widget-area {
        padding: 0;
    }
}

@media only screen and (max-width: 1199px) {
    .banner-blocks h5 {
        font-size: 23px;
    }

    .banner-blocks .fl h2 {
        min-height: 220px;
        font-size: 60px !important;
        max-width: 400px;
        line-height: 65px !important;
    }

    h1 {
        font-size: 60px;
        max-width: 315px;
    }
    .content-left-column .graph-block img {
        margin-left: 0;
        max-width: 375px;
    }
}

@media only screen and (max-width: 899px) {
    .banner-blocks h5 {
        font-size: 22px !important;
    }

    .banner-blocks .fl h2 {
        min-height: 220px!important;
        font-size: 55px !important;
        font-weight: 600;
        max-width: 400px;
        line-height: 60px !important;
    }

    .video-block {
        margin: 0 auto;
        text-align: center;
    }

    .video-circle {
        max-width: 280px;
        height: 280px;
    }

    h6 {
        display: none;
    }

    .banner-blocks h6 {
        display: block;
        font-size: 17px;
        max-width: 315px;
    }

    h3 {
        font-size: 45px;
        margin-top: 15px;
    }
    
    .banner-blocks .label {
        top: 64%;
    }

    .banner-blocks .label::before {
        top: -35px;
        left: -5px;
    }

    .label img {
        max-width: 140px;
    }
    
    .top-banner div img {
        max-width: 305px;
    }

    .top-banner div img {
        width: 85%;
    }

    .top-banner {
        padding: 70px 0px 0 30px;
    }

    .content-block {
        display: table;
        max-width: 1100px;
        margin: 100px auto 150px;
    }

    .content-center-bottom,
    .text-blocks  {
        padding: 30px;
    }
    
    .widget-area {
        background-size: cover;
    }

    .widget-area .footer-blocks {
        padding: 100px 30px 150px;
    }

    .bottom-content-distribution ul li {
        width: 100%;
    }

    .bottom-content-distribution {
        margin: 0 30px; 
    }
    
    .bottom-content-distribution ul li p {
        font-size: 14px;
    }

    .content-center-info::before {
        width: 225px;
        height: 225px;
        top: -80px;
        left: -10px;
    }

    .content-center-info::after {
        width: 220px;
        height: 221px;
        top: -76px;
        left: -8px;
    }

    .content-center-info h3 {
        position: relative;
        z-index: 999;
    }

    .content {
        padding: 30px;
    }

    .content-block div img,
    .content img, .content-center-bottom img {
        max-width: 280px;
    }
    
    .content-center-info::before {
        width: 225px;
        height: 225px;
        top: -80px;
        left: -10px;
    }

    .content-left-column .graph-block img {
        max-width: 356px;
        width: 100%;
        position: relative;
        margin-left: 0;
    }

    .content-right-column img {
        max-width: 280px;
    }

    .bottom-content-distribution ul {
        grid-template-columns: 1fr 1fr;
        grid-gap: 40px;
    }
}

@media only screen and (max-width: 768px) {

    .container-fluid.flex div:first-child {
       width: 100%;
    }
    
    .banner-blocks .fl h2 {
        min-height: 200px!important;
    }

    .banner-blocks div:last-child {
        margin-bottom: 100px;
    }

    .top-banner {
        text-align: center;
    }

    .container-fluid.flex {
        margin-top: 70px;
        text-align: left;
        display: block;
    }

    .banner-blocks { 
        display: flex; 
        flex-direction: column; 
    }

    .banner-blocks .fl { 
        order: 2; 
    }

    .banner-blocks div {
        width: 100%;
    }

    .banner-blocks .label {
        top: 40%;
        margin-left: 0;
        right: 65px;
    }

    .top-banner {
        padding: 70px 30px 0 30px;
    }

    .banner-blocks .label::before {
        left: -5px;
    }

    .banner-blocks .fl {
        text-align: left;
    }

    .content {
        padding: 40px 40px 0;
        background: rgb(255,255,255);
        background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(207,218,247,1) 0%, rgba(255,255,255,1) 100%);
        box-shadow: none;
    }

    .content-block div img, .content img, .content-center-bottom img {
        max-width: 280px;
        margin-top: 35px;
    }
    
    .content-center-info::before {
        width: 225px;
        height: 225px;
        top: -80px;
        left: -10px;
    }

    .content-left-column .graph-block img {
        max-width: 356px;
        width: 100%;
        position: relative;
        margin-left: 0;
    }

    .content-right-column img {
        max-width: 280px;
    }

    .content-block {
        margin: -90px auto 0;
        position: relative;
        z-index: 2;
        padding: 0;
    }

    .content .first-content .content-block:first-child {
        margin: -90px auto 0;
    }

    .content .first-content .content-block div:last-child {
        margin: 35px 0 0;
    }

    .first-content .content-block:last-child {
        margin: 50px auto 0;
    }

    .content-center-info-m {
        background: rgb(224,254,255);
        /* background: radial-gradient(circle, rgba(224,254,255,1) 0%, rgba(255,255,255,1) 86%); */
        background: radial-gradient(circle, rgba(255,255,255) 0%, rgba(255,255,255,1) 86%);
    }

    .content-block-columns-m .content-block {
        margin: 50px auto 0; 
    }
    
    .content-block-columns-m h4 {
        margin: 50px 0 0 0;
    }

    .content .top-title {
        display: none;
    }

    .content-block div {
        display: block;
        width: 100%;
        max-width: 500px;
    }

    .content-block-columns-m {
        display: block;
    }

    .content-block-columns {
        display: none;
    }

    .content-block-columns-m .content-block div {
        margin-bottom: 50px;
    }

    .content-block-columns-m .content-block div img:last-child {
        margin-top: 50px;
    }

    .bottom-content-isolated {
        margin: 30px 0 0 0;
        padding: 100px 0 50px 0;
    }

    .bottom-content-distribution ul li {
        width: 100%;
    }

    .bottom-content-distribution {
        margin: 0 25px;
    }

    .widget-area .footer-blocks {
        padding: 150px 110px 40px;
        max-width: 1100px;
        margin: 0 auto;
    }

    .widget-area {
        background-size: cover;
    }

    .widget-area .address {
        display: block;
    }

    .widget-area .footer-block-1 {
        display: block;
        float: none;
        margin-top: 50px;
        max-width: 300px;
        margin: 0 auto;
    }

    .widget-area .footer-block-2 {
        display: block;
        float: none;
        margin: 0 auto;
    }

    .copyright {
        max-width: 300px;
        margin: 50px auto 0;
    }

    .content-center-info-m {
        display: block;
        position: relative;
        top: 50px;
    }

    .content-center-info {
        display: none;
    }

    .content-center-info-m img {
        position: absolute;
        left: 35%;
        top: -80px;
    }

    .content-center-info-m li {
        margin-bottom: 50px;
    }

    .content-center-info-m li:nth-child(2)::after {
        content: "";
        background-image: url(/wp-content/themes/eutenhogasnatural-template/assets/videos/camaleao_anim.gif);
        background-repeat: no-repeat;
        background-size: cover;
        width: 300px;
        height: 300px;
        top: -50px;
        left: -170px;
        z-index: 1;
        display: block;
    }

    .content-center-info-m li:nth-child(2) {
        margin-bottom: 0;
    }

    .content-center-info-m h3 {
        transform: rotate(-90deg);
        position: absolute;
        left: -15%;
    }

    .content-center-info-m .text-blocks {
        display: block;
        max-width: 335px;
        margin: 0 auto;
    }

    .content-center-info-m .text-blocks li:first-child::after, 
    .content-center-info-m .text-blocks li:nth-child(3)::before {
        content: "";
        background-image: url(/wp-content/uploads/2023/05/arrow-m-down.png);
        background-repeat: no-repeat;
        background-size: cover;
        z-index: 1;
        width: 40px;
        height: 80px;
        display: block;
        margin: 0 auto;
    }

    .bottom-content-distribution ul {
        padding: 0;
    }

    .bottom-content-distribution .content-block {
        padding: 100px 60px;
    }

    .content-center-bottom {
        display: block;
        padding: 40px;
        margin-top: 0;
        background-color: #fff;
        box-shadow: none;
    }

    .content-center-bottom div {
        display: block;
        width: 100%;
        margin: 0 auto;
        max-width: 330px;
    }

    .content-center-bottom div:last-child {
        padding: 0;
    }

    .bottom-content-services .content-block {
        padding: 150px 40px;
    }

    .widget-area .footer-blocks img {
        max-width: 300px;
        margin: 0 auto;
    }
}


@media only screen and (max-width: 600px) {
    .banner-blocks h2 {
        font-size: 31px !important;
        line-height: 35px !important;
    }

    h3 {
        font-size: 30px;
    }
    
    .content-center-info-m {
        display: none;
    }
    
    .container-fluid {
        text-align: left;
    }
    
    .container-fluid.flex {
        margin-top: 0;
    }
    
    .widget-area {
        margin: -100px auto 700px;
    }

    .content-center-info-m h3 {
        left: -25%;
    }

    .banner-blocks div:last-child {
        margin-bottom: 100px;
    }

    .banner-blocks .label {
        top: 40%;
        margin-left: 0;
        right: 35px;
    }

    .content-center-info-m .text-blocks {
        display: block;
        max-width: 280px;
        margin: 0 auto;
    }

    .bottom-content-distribution .content-block {
        margin: -70px 0;
        padding: 50px 30px;
    }

    .bottom-content-distribution ul {
        padding: 0;
    }

    .bottom-content-distribution ul li {
        width: 100%;
    }

    .widget-area .footer-blocks {
        padding: 150px 30px 30px;
        max-width: 1100px;
        margin: 0 auto;
    }

    .bottom-content-services .content-block {
        padding: 50px 40px 110px;
    }

    .bottom-content-isolated .content-block {
        padding: 0 40px;
    }

    .bottom-content-distribution ul li p {
        font-size: 12px;
    }

    .widget-area .footer-blocks img {
        max-width: 250px;
    }
    .bottom-content-services {
        margin-top: 0;
    }
    .bottom-content-distribution ul {
        grid-template-columns: 1fr;
        grid-gap: 40px;
        padding: 0 5px 0;
    }
}