/*
************************************************************
Styles:     flix//theme
Project:    flix-Base - Main CSS
Autor:      Yannik Boost
Copyright:  (c) 2015 interaktiv manufaktur
Website:    www.interaktiv-manufaktur.de
************************************************************
*/
@media only screen and (max-width: 480px) {

    .lang-selector .lang-text {
        display: none !important;
    }

    .overviewpages-main .text-container {
        width: 100%;
        margin: 0px;
        padding-top: 10px;
    }

    /*#### gallery-list #####*/
    .gallery-list-main .item {
        width: 100%;
        margin-left: 0px;
    }

    .lang-selector {
        width: 115px;
    }


    /*****************************************************************
    *********** Document
    ******************************************************************/
    /*****************************************************************
    *********** Allgemeine Selectoren
    ******************************************************************/
    /*****************************************************************
    *********** Header
    ******************************************************************/
    /*****************************************************************
    *********** Footer
    ******************************************************************/
    #footer-canvas .column {
        width: 100%;
        padding-bottom: 25px;
    }

    .logo-footer {
        width: 100%;
        margin: auto;
        padding-bottom: 50px;
    }

    /*****************************************************************
    *********** Content
    ******************************************************************/
    /*****************************************************************
    *********** Seitenelemente
    ******************************************************************/
    .text-image-main .left-column .text, .text-image-main .right-column .text {
        box-sizing: border-box;
        max-width: 100%;
        position: relative;
        transform: translateY(0%);
        top: 0px;
    }

    .text-image-main .left-column {
        width: 100%;
        float: none;
        height: auto;
        overflow: hidden;
    }

    .text-image-main .right-column {
        width: 100%;
        overflow: hidden;
        float: none;
        height: auto;
    }

    .text-image-main .left-column .text {
        padding: 25px 40px !important;
        text-align: left;
    }

    .text-image-main .left-column .text {
        padding: 0px !important;
        text-align: left;
    }

    .scroll-to-top-div {
        width: 100% !important;
        bottom: 0px !important;
        left: 0px;
        background-color: #D7AE86;
    }

    #scroll-to-top {
        display: block;
        margin: auto;
        width: 75px !important;
    }

    .info-teaser-main .info {
        width: 100%;
        margin: 10px 0;
    }

    .contactform .textbox {
        width: 80% !important;
        margin: 10px 0;
    }

    .contactform .form-row.nachricht {
        display: block;
    }

    .contactform #nachricht {

        width: 80%;
        margin-top: 10px;
    }

    .contactform .button-submit {
        width: 100%;
        margin-left: 10px !important;
    }

    .teaser-start img {
        width: 75%;
    }

    .teaser-start p {
        width: 75%;
    }

    .gallery-image {
        width: 100%;
        margin: 0px 0px 5px;
    }

    .slick-prev, .slick-next {
        background-size: 65%;
    }

    .ort-input {
        width: calc(70% - 30px);
    }

}


@media only screen and (max-width: 520px) {
    .news-list .image-container {
        width: 100%;
        margin: 0px;
        float: none;
    }

    .news-list .text-container {
        float: none;
        width: 100%;
        overflow: hidden;
        max-width: 100%;
    }

    .overviewpages-main .image-container {
        width: 100%;
        margin: 0px;
    }

    .overviewpages-main .image-container img {
        width: 100%;
    }

    .overviewpages-main .text-container {
        float: left;
        width: 100%;
        margin-left: 0px;
        padding: 5px 0px 5px 5px;
    }

    .teaser-start img {
        width: 75%;
    }

    .teaser-start p {
        width: 75%;
    }
}

@media only screen and (max-width: 420px) {
    .gallery-list-main, .gallery-container {
        grid-template-columns: 1fr;
        grid-gap: 16px;
    }

    .teaser-start img {
        width: 75%;
    }

    .teaser-start p {
        width: 75%;
    }
}