@media only screen and (max-width: 1200px) {
    /* nav */
    .container > header {
        margin: 0 10px !important;
    }
    nav{
        position: fixed;
        top: 0;
        padding: 5px 25px;
        z-index: 1000;
        width: 100%;
        display: flex;
        justify-content: flex-end;

    }
    nav > button > i{
        font-size: 30px !important;
    }
    nav > button, nav > button:active, nav > button:focus {
        height: 50px;
        width: 50px;
        background-color: white !important;
        border-radius: 50% !important;
        box-shadow:
            0 0px 4px rgba(0, 0, 0, 0.2),
            0 0 7px rgba(0, 0, 0, 0.1) !important;
    }
            .offcanvas-xl {
        background-color: rgba(30, 30, 30, 0.5);
        backdrop-filter: blur(20px);
    }

    .offcanvas-xl * {
        color: #fff;
    }

    .logo-img {
        margin: 25px auto;
    }

    .main-navbar-logo {
        height: 5vh;
        width: 50%;
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
        flex-direction: column;
    }

    .main-navbar-logo span:first-of-type {
        color: #fff;
        transform: none;
    }

    .main-navbar-logo span:last-of-type {
        color: #ddd;
    }

    .logo-img {
        margin: none !important;
    }

    .main-navbar,
    .main-navbar-text {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin: 0;
    }

    .main-navbar-text > * {
        margin: 10px 0;
    }

    .offcanvas-head {
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    
    
    /* banner */
    .mb-right, .mb-left{
        width: 100%;
    }
    .mb-right{
        border-radius: 0;
    }
    .mb-left > .row{
        gutter
    }
    .mb-left{
        border-radius: 0 0 25px 25px;
        height: auto;
        padding: 10px;
        padding-bottom: 75px;
    }
    .mb-left > h1{
        text-align: center;
        margin-bottom: 10px;
    }
    .mb-right{
        height: 300px;
    }
    .swiper-pagination{
        margin-bottom: 5px;
    }
    .mb-right > p.subtitle{
        bottom: 25px;
    }
    .main-banner > div > header{
        flex-direction: column-reverse;
    }
    .mb-offer-card{
        margin-bottom: 25px;
    }
    .mb-offers{
        margin: 0;
    }
/* about us */
    #aboutus-banner > h1{
        font-size: 36px;
    }
    #aboutus-banner > p{
        font-size: 26px;
    }
    .au-image{
        margin-right: 10px;
    }
    .au-image > img{
        width: 60vw;
        height: auto;
        margin-right: 0 !important;
        max-height: 375px;
        max-width: 309px;
    }
    .au-banner-div{
        height: 200px;
        width: 85vw;
    }
    .au-logo{
        width: 80px;
        height: 80px;
        top: -20px;
        left: -20px;
    }
    .au-logo > img{
        width: 70px;
        height: 70px;
    }
    .aboutus-header{
        height: 100px;
        width: 250px;
        font-size: 20px
    }
    #aboutus-docs > div.container > div > *{
        display: flex;
        justify-content: center;
        margin-bottom: 0 !important;
        margin-right: 0 !important;
    }
    #aboutus-exp > div.row.g-0 > div.col-12.col-lg-9 > *{
        margin: 25px 0!important;
    }
    #aboutus-docs > div.container > div > .col-xl-3{
        margin-top: 20px;
    }
    #aboutus-exp > div.row.g-0{
        padding: 20px !important;
        width: 100%;
    }
    #aboutus-docs > div.container > div {
        margin: 25px 0;
    }
    /* wip */
    .wip-image{
        width: 300px;
        height: 300px;
        margin-bottom: 25px;
    }
    .wip-quote{
        border-radius: 15px 0 15px 15px;
        width: 75px;
        height: 75px;
        top: 0;
        right: 0;

    }
    .wip-quote > i{
        font-size: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .what-is-prevention > .row > .col-12:nth-child(1){
        margin-bottom: 50px;
    }
    .what-is-prevention > .row > .col-12:nth-child(2){
        padding: 0 25px; 
    }
    /* contact */
    .contact-frame{
        padding: 0;
    }
    #kontakt > div > div:nth-child(2) > h4{
        font-size: 20px !important;
    }
    /* Footer */
    .logo-img-footer{
        margin-right: 25px;
        width: 50px;
        height: 50px;
    }
    .logo-footer{
        margin-bottom: 50px;
    }
    .footer-item{
        margin-bottom: 25px;
    }
    /* faq */
    .faq-image{
        height: 300px;
        width: 300px;
    }
    .faqc-header, .faqc-footer{
        font-size: 16px;
    }
    .faqc-content{
        font-size: 20px;
    }
    .faqc-content{
        height: 30%;
    }
    .faq-quote-icon{
        display: none;
    }
    .faq-quote{
        padding: 10px 20px;
        width: 90%;
        height: 40%;
        font-size: 12px;
    }
    body > section.py-5.faq > p{
        flex-direction: column;
        align-items: center;
        margin: 25px;
    }
    
    /* Recommendations */
    .r-banner-image{
        height: 300px;
        width: 200px;
        margin-left: 15px;
        margin: auto;
    }
    .r-banner-image::after{
        left: 50%;
        transform: translateX(-50%);
    }
    .rbi-bubble{
        display: none;
    }
    .r-likes{
        transform: scale(0.5);
        margin-top: 0;
    }
    .r-likes > div > div.text-muted{
        font-size: 25px;
    }
    .positive::after, .negative::after{
        display: none !important;
    }
    .ref-frame{
        margin: 40px 20px;
    }
    .ref-frame > *{
        font-size: 12px;
    }
    .ref-header > button > span{
        display: none;
    }
    .ref-collapse > .accordion-body{
        margin: 0;
        text-align: justify;
    }
    .ref-header > button{
        display: flex;
        justify-content: center;
    }
    .ref-header > button::before{
        display: none;
    }
    #r-banner{
        padding-bottom: 50px;
    }
    #r-banner > div > div:nth-child(2) > div.container.pe-5 > h1{
        font-size: 20px;
        margin-top: 20px;
    }
    #r-banner > div > div:nth-child(2) > div.container.pe-5 > p{
        font-size: 14px;
    }
    /* Offer */
    #of-banner > div > div:nth-child(2) > div > h1{
        margin-top: 50px;
    }
    .of-banner-image{
        height: 300px;
        width: 300px;
    }
    #of-banner > div > div:nth-child(2) > div > div > div.col-12{
        justify-content: center !important;
    }
    #of-banner > div > div:nth-child(2) > div{
        padding: 0 !important;
    }
    
}