
@media only screen and (max-width: 1400px) {

    .introduction {
        width: 96%;
        margin: 150px 2%;
    }

    .introduction .content {
        padding: 25px;
    }

    .quote-content .quote-author {
        margin-bottom: 60px;
    }
}

@media only screen and (max-width: 1200px) {
    .events-banner {
        width: 96%;
        height: auto;
        margin: 35px 2%;
    }
    .events-banner .banner .left-container .top-container {
        padding: 25px;
    }

    .events-banner .banner .left-container .bottom-container {
        padding: 25px;
    }

    .content-list-style-2 {
        width: 94%;
        margin: 0 auto;
    }

    .content-list-style-2 > .content {
        column-gap: 30px;
    }

    .contact-page .grid-position {
        column-gap: 15px;
        grid-template-columns: 351px auto;
    }

    .events-banner .banner .left-container .bottom-container {
        position: relative;
        width: 100%;
        margin-top: 25px;
        padding-left: 0;
        padding-right: 0;
    }

    .events-banner .banner .left-container .bottom-container .navigations {
        padding: 0 25px;
    }
}

@media only screen and (max-width: 1100px) {
    #main-navigation nav {
        display: none;
    }

    .main-navigation-trigger {
        display: inline-block;
    }

    .shopping-bag-icon-mobile {
        display: inline-block;  
    }

    header .center-text {
        font-size: 8vw;
        line-height: 9vw;
        color: #ffffff;
        text-align: center;
        padding: 25px;
    }

    #main-navigation .center-container .logo {
        margin-top: 10px;
    }

    header .navigation-links {
        display: none;
    }

    header .short-description {
        max-width: 50%;
        left: auto;
        position: relative;
        text-align: center;
    }

    header {
        background-position: left;
    }

    .quote-content .quote-container {
        position: relative;
        width: 75%;
        margin-left: 5%;
    }

    .quote-content .quote-author {
        margin-bottom: 40px;
    }

    footer .top-container {
        grid-template-columns: auto 410px 30px;
    }

    .content-list-style-2 > .content {
        display: grid;
        column-gap: 0px;
        grid-template-columns: auto;
    }

    .content-list-style-2 > .content .list {
       order: 2;
    }

    .content-list-style-2 > .content .aside-container {
       order: 1;
    }

    .calendar-trigger {
        display: grid;
    }
}

@media only screen and (max-width: 1000px) {
    .footer-banners .footer-banners-container {
        width: 80%;
        margin: 0 10%;
        grid-template-columns: auto auto auto; 
    }
}

@media only screen and (max-width: 850px) {
    .error-page img {
        width: 100%;
    }
}

@media only screen and (max-width: 800px) {

    .events-banner .banner {
        display: flex;
        height: auto;
        flex-direction: column;
    }

    .events-banner .banner .left-container {
        float: none;
        width: 100%;
        padding: 25px 0;
        order: 2;
    }

    .events-banner .banner .right-container {
        float: none;
        width: 100%;
        order: 1;
    }

    .events-banner .banner .right-container .bg-image {
        padding-bottom: 100%;
    }

    .introduction {
        margin: 50px 2%;
        background-size: 70% 70%;
        background-position: top;
    }

    .introduction .box-style-2 .left-container {
        order: 2;
    }

    .introduction .box-style-2 .right-container {
        order: 1;
    }

    .quote-content {
        width: 96%;
        margin: 150px 2%;
    }

    .quote-content img {
        width: 100%;
    }

    .quote-content .left-container {
        flex-grow: 1;
        flex-basis: 100%;
        order: 2;
    }
    
    .quote-content .right-container {
        flex-grow: 1;
        flex-basis: 100%;
        order: 1;
    }

    .quote-content {
        width: 80%;
        margin: 70px 10%;
        background-size: 60% 60%;
    }

    .quote-content .quote-container {
        position: relative;
        width: 70%;
        margin-left: 0;
        margin: 50px 15%;
    }

    .quote-content .quote-container .quote-text {
        font-size: 22px;
        width: 100%;
        font-weight: 700;
        color: var(--quter_space);
    }

    .quote-content .quote-container .quote-text:before {
        content: url('../images/start_quote.svg') 20% 20%;
        position:absolute;
        left:-12%;
        top:-12%;
        transform: scale(.8);
    }

    .quote-content .quote-container .quote-text:after {
        content:url('../images/end_quote.svg');
        position:absolute;
        right:-12%;
        bottom:-12%;
        transform: scale(.8);
    }
    
    .quote-content .quote-author {
        font-size: 18px;
        width: 100%;
        margin-top: 00px;
        margin-bottom: 30px;
        margin-left: 0px;
    }

    .footer-banners .footer-banners-container {
        width: 90%;
        margin: 0 5%;
        grid-template-columns: auto auto;
    }

    footer .top-container {
        width: 90%;
        margin: 0 5%;
        column-gap: 0;
        justify-items: center;
        align-items: center;
        grid-template-columns: auto;
    }

    footer .top-container .box .inside-box-container {
        display: grid;
        width: 100%;
        column-gap: 50px;
        grid-template-columns: auto auto;
    }

    footer .top-container .box .footer-menu {
        padding-left: 0;
        padding-right: 0;
    }

    footer .top-container .box:first-child {
       margin-bottom: 65px;
    }
    
    footer .top-container .box .inside-box-container .box {
        margin-bottom: 35px;
    }

    footer .bottom-container {
        width: 96%;
        margin: 0 2%;
        grid-template-columns: auto;
        text-align: center;
    }

    footer .bottom-container .footer-navigation-links {
        text-align: center;
        margin-top: 15px;
    }

    .image-gallery .images-list {
        grid-template-columns: auto auto auto;
    }

    .contact-page .grid-position {
        column-gap: 0;
        grid-template-columns: auto;
    }

    .contact-page .grid-position .left-container img {
        display: none;
    }


    .contact-page .grid-position .right-container {
        margin-top: 35px;
    }

}


@media only screen and (max-width: 720px) {

    .content-list-style-1 {
        width: 92%;
        margin: 0 auto;
    }

    .content-list-style-1 .tags {
        margin-top: 25px;
    }

    h1 {
        font-size: 40px;
        line-height: 50px;
    }
    
    h2 {
        font-size: 30px;
        line-height: 40px;
    }

    .content-list-style-3 {
        width: 94%;
        margin: 50px auto;
    }

    .content-list-style-3 .content-list-3-item .title {
        font-size: 32px;
        line-height: 40px;
    }
}

@media only screen and (max-width: 650px) {

    .breadcrumb-navigation ul {
        display: none;
    }

    .breadcrumb-navigation ul.mobile {
        display: block;
    }

    .breadcrumb-navigation ul.mobile li::before {
        content: "<";
    }
}

@media only screen and (max-width: 600px) {

    header .short-description {
        max-width: 95%;
    }

    .events-banner .banner .left-container .top-container .title {
        font-size: 30px;
    }

    .error-page h1 {
        font-size: 60px
    }
    
    .error-page .short-description {
        font-size: 25px;
    }

    .error-page .back-link a {
        font-size: 16px;
    }
    
    header .center-text {
        font-size: 12vw;
        line-height: 14vw;
    }
    
}

@media only screen and (max-width: 450px) {

    .quote-content .quote-container {
        width: 80%;
        margin: 50px 10%;
    }

    header .center-text .events-banner .banner .left-container .bottom-container{
        font-size: 12vw;
        line-height: 13vw;
        padding: 0 10px;
    }

    footer .bottom-container .footer-navigation-links ul li {
        display: block;
        margin-bottom: 10px;
    }

    footer .bottom-container .footer-navigation-links ul li a {
        padding-left: 0px;
    }

    .image-gallery .images-list {
        grid-template-columns: auto auto;
    }

    .content-list-style-3 .content-list-3-item .title {
        font-size: 25px;
        line-height: 34px;
    }
}

@media only screen and (max-width: 370px) {

    footer .top-container .box .inside-box-container {
        display: grid;
        width: 100%;
        grid-template-columns: auto;
    }
}

@media only screen and (max-width: 340px) {

    .events-banner .banner .left-container .bottom-container .navigations {
        grid-template-columns: auto;
    }

    .events-banner .banner .left-container .bottom-container div {
        margin-bottom: 15px;
    }  
    
    .events-banner .banner .left-container .bottom-container .slide-indicator {
        text-align: center;
    }

    .events-banner .banner .left-container .bottom-container .more-info {
        text-align: center;
    }
}