/* Large Screens (Desktops) */

@media only screen and (max-width : 1440px) {
    #intro:after,
    #banner:after,
    #feedback:before,
    #feedback:after {
        background-size: 1440px 100%;
    }

    #header .section {
        height: 166px;
    }

    #header .logo {
        left: 0;
        width: 355px;
    }

    #header #navigation ul li {
        margin: 0 13px;
    }

    #intro .section {
        height: 610px;
    }

    #intro ul.stacked {
        right: 0;
        top: 200px;
    }

    #banner {
        height: 500px;
    }

    #feedback .leaves01 {
        right: -67px;
        top: -50px;
        width: 415px;
    }

    #feedback .slides .owl-nav {
        width: 1160px;
    }

}

/* Medium Screens (Tablets - Landscape) */

@media only screen and (max-width : 1225px) {
    .section {
        max-width: 970px;
    }

    #menuBtn {
        left: 0;
    }

    #header .section {
        height: 120px;
    }

    #header .logo {
        width: 256px;
    }

    #header #navigation {
        padding: 11px 15px;
        bottom: 10px;
    }

    #header #navigation ul li {
        margin: 0 9px;
    }

    #header #navigation ul li ul {
        padding-top: 11px;
    }

    #intro .section {
        height: 483px;
    }

    #intro ul.stacked {
        top: 144px;
        max-width: 513px;
    }

    #banner {
        height: 450px;
    }

    #welcome .left {
        width: 526px;
    }

    #welcome .right {
    	width: 427px;
    }

    #content .leaves01 {
        right: -50px;
    }

    #options {
        padding-left: 60px;
        padding-right: 60px;
    }

    #contact {
        padding-left: 66px;
        padding-right: 66px;
    }

    #feedback .slides li .section {
        padding-left: 40px;
        padding-right: 40px;
    }

    #feedback .leaves01 {
        right: -67px;
        top: -30px;
        width: 351px;
    }

    #feedback .leaves02 {
        width: 115px;
    }

    #feedback .slides .owl-nav {
        width: 980px;
    }

    #footer .top .logo {
        width: 370px;
        top: 34px;
        margin-left: -185px;
    }

}

/* Small Screens  (Tablets - Portrait ) */

@media only screen and (max-width : 991px) {
    .section {
        max-width: 750px;
        padding-left: 15px;
        padding-right: 15px;
    }

    #header .section,
    body.scrolled #header .section {
        height: 150px;
    }

    #header .logo,
    body.scrolled #header .logo {
        width: 210px;
        top: 6px;
    }

    #header #navigation,
    body.scrolled #header #navigation {
        padding: 9px 12px;
        bottom: 5px;
    }

    #header .section {
        font-size: 13px;
    }

    #header .section,
    body.scrolled #header .section {
        height: 105px;
    }

    #header #navigation ul li {
        margin: 0 6px;
    }

    #header #navigation ul li ul {
        padding-top: 9px;
    }

    #intro .section {
        height: 400px;
    }

    #intro ul.stacked {
        max-width: 401px;
        top: 127px;
    }

    #banner {
        height: 400px;
    }

    #options {
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 40px;
    }

    #options ul li {
        font-size: 27px;
    }

    .paintPanel {
        margin-bottom: 50px;
    }

    #welcome {
        margin-bottom: 10px;
    }

    #welcome .left .leaves {
        top: -113px;
        left: -338px;
    }

    #welcome .right .smallSteps {
        font-size: 30px;
    }

    #welcome .right {
   		width: 316px;
    }

    #welcome .left {
    	width: 383px;
    }

    #contact .fields .left {
        width: 301px;
    }

    #contact .title,
    #feedback .title,
    .heading {
        font-size: 36px;
    }

    #content .leaves01 {
        top: -32px;
        right: -57px;
    }

    #feedback .leaves01 {
        right: -119px;
    }

    #feedback .slides .owl-nav {
        width: 751px;
    }

    #footer .top .logo {
        width: 313px;
        top: 14px;
        margin-left: -156.5px;
    }

    #footer .top .section {
        padding-top: 180px;
        padding-bottom: 45px;
    }

    .scribbleBtn {
        font-size: 23px;
    }

}

/* Extra Small Screens */

@media only screen and (max-width : 767px) {
    #menuBtn {
        display: block;
    }

    #header,
    body.scrolled #header {
        position: static;
        background: #fff;
        backdrop-filter: none;
        border-top: 8px solid #374d1f;
        border-bottom: 6px solid #7b895a;
    }

    #header .section,
    body.scrolled #header .section {
        height: auto;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    #header .logo,
    body.scrolled #header .logo {
        position: static;
        display: block;
        margin: 0 auto 15px;
        width: 230px;
    }

    #header .logo:before {
        display: none;
    }

    #header #navigation {
        display: none;
    }

    #header .options {
        position: static;
        display: block;
    }

    #header .options .contacts {
        display: block;
        text-align: center;
    }

    #header .options .contacts li {
        margin: 0 0 5px;
    }

    #header .options .socials {
        position: absolute;
        right: 0;
        top: 8px;
        display: block;
    }

    #header .options .socials li {
        margin: 0 0 3px;
    }

    #intro .section {
        padding-top: 30px;
        height: 124vw;
    }

    #intro ul.stacked {
        position: relative;
        display: block;
        margin: 0 auto;
        right: auto;
        top: auto;
        z-index: 1;
        max-width: 100vw;
        aspect-ratio: 613 / 349;
    }

    #banner {
        height: 220px;
    }

    ul.stacked li {
        border-bottom-width: 15px;
    }

    #intro .image {
        -o-object-position: 26% bottom;
           object-position: 26% bottom;
    }

    #options {
        margin-bottom: 30px;
    }

    #options ul {
        max-width: 350px;
        margin: 0 auto;
    }

    #options ul {
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

    #options ul li {
        font-size: 24px;
        margin: 10px;
    }

    #welcome {
        display: block;
        text-align: center;
    }

    #welcome .left {
        width: 100%;
    }

    .heading {
        padding-left: 0;
        padding-top: 55px;
    }

    .heading:before {
        left: 50%;
        -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
                transform: translateX(-50%);
        z-index: -1;
    }

    .paintPanel {
        margin-bottom: -5px;
    }

    #welcome .left .leaves {
        top: -6px;
        left: -201px;
        width: 278px;
    }

    #welcome .right {
        width: 100%;
    }

    #welcome .right .facebook {
        margin-left: auto;
        margin-right: auto;
    }

    #feedback .leaves01 {
        right: -149px;
        top: -66px;
        width: 351px;
    }

    #feedback .slides .owl-nav {
        width: 96%;
    }

    #content .leaves01 {
        top: -22px;
    }

    #contact {
        padding: 54px 20px 58px;
        margin-bottom: 81px;
    }

    #contact .fields {
        display: block;
    }

    #contact .fields .left {
        width: 100%;
        padding-right: 0;
    }

    #footer .top .section {
        display: block;
        padding-top: 20px;
        padding-bottom: 20px;
        text-align: center;
    }

    #footer .top .logo {
        display: block;
        position: static;
        width: 270px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
        -webkit-transform: none;
            -ms-transform: none;
                transform: none;
    }

    #footer .top .centres {
        margin-bottom: 30px;
    }

    #footer .top .contacts li a {
        padding-left: 35px;
    }

    .linkBtn {
        display: block;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .scribbleBtn {
        font-size: 21px;
    }

    .scribbleBtns {
        gap: 20px 24px;
    }

    .scribbleBtns--six {
        grid-template-columns: repeat(3, 1fr);
        gap: 4cqi 2cqi;
    }

    .scribbleBtns--six .scribbleBtn {
        font-size: clamp(15px, 5.2cqi, 26px);
    }

}

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

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

}