/* ============================== */
/*      Index.php Styling         */
/* ============================== */
@media screen and (max-width: 950px) { 
    #container {
        width: 100%;
    }
}

@media screen and (max-width: 800px) { 
    #content img {
        margin-left: 5px;
        margin-right: 5px;
    }
}
/* ============================== */
/*         Footer Styling         */
/* ============================== */
@media screen and (max-width: 1820px) {    
    #footer_img {
        width: 100%;
    }
    #footer_img img {
        width: 5%;
    }
}

@media screen and (max-width: 1500px) {    
    #footer_img {
        width: 100%;
    }
    #footer_img img {
        height: 5%;
    }
}

@media screen and (max-width: 1380px) {    
    #footer_img {
        width: 100%;
    }
    #footer_img img {
        height: 5%;
    }
}

@media screen and (max-width: 1260px) {    
    #footer_img {
        width: 100%;
    }
    #footer_img img {
        height: 5%;
    }
}

@media screen and (max-width: 1000px) {    
    #footer_img {
        width: 100%;
    }
    #footer_img img {
        height: 5%;
    }
}

@media screen and (max-width: 800px) {
    #footer_img {
        width: 100%;
    }
    #footer_img img {
        height: 4.8%;
    }
}

@media screen and (max-width: 680px) {
    #footer_img {
        width: 100%;
    }
    #footer_img img {
        height: 4.4%;
    }
}

@media screen and (max-width: 615px) {
    #footer_img {
        width: 100%;
    }
    #footer_img img {
        height: 3.8%;
    }
}

@media screen and (max-width: 545px) {
    #footer_img {
        width: 100%;
    }
    #footer_img img {
        height: 3.4%;
    }
}

@media screen and (max-width: 490px) {   
    #footer_img img {
        height: 3%;
    }
}

@media screen and (max-width: 425px) {   
    #footer_img img {
        height: 2.6%;
    }
}

@media screen and (max-width: 392px) {   
    #footer_img img {
        height: 2.4%;
    }
}

@media screen and (max-width: 368px) {   
    #footer_img img {
        height: 2.2%;
    }
}

@media screen and (max-width: 330px) {   
    #footer_img img {
        height: 2%;
    }
}
/* ============================== */
/*            Banner              */
/* ============================== */
@media screen and (max-width: 580px) {
    #banner {
        display: none;
    }
    #banner2 {
        display: block;
    }
}
/* ============================== */
/*            navbar              */
/* ============================== */
@media screen and (max-width: 760px) {
    #navbar {
        display: none;
    }
    #navbar-mobile {
        display: block;
        background-color: #bbbaba;
        overflow: hidden;
        position: relative;
        width: 100% !important;
    }
    #navbar-mobile a {
        padding: 14px 16px;
        text-decoration: none;
        text-align: center;
        display: block;
    }
    #navbar-mobile a:hover, .dropdown-mobile:hover .dropbtn-mobile, .dropbtn-mobile:focus {
        background-color: #c3c0c0;
    }
    #myLinks {
        display: none;
    }
    #navbar-mobile a.icon {
        float: left;
        padding: 14px 16px;
        text-decoration: none;
        text-align: center;
    }
    
    #myDropdown1-mobile {
        display: none;
    }

    #myDropdown2-mobile {
        display: none;
    }

    #myDropdown4-mobile {
        display: none;
    }

    .dropdown-content-mobile {
        background-color: #616161!important;
        color: white;
    }

    .dropdown-mobile {
        cursor: pointer;  
        border: none;
        outline: none;
        color: rgb(0, 0, 0);
        background-color: inherit;
        font-family: inherit;
        margin: 0;
    }
}
/* ============================== */
/*        mindfulness.php         */
/* ============================== */
@media screen and (max-width: 1000px) {
    .content {
        max-width: 90%;
    }
    .modal-content {
        width: 100%;
    }

    #kontakt_content {
        max-width: 100%;
        
    }
    #divAddSelectContainer img {
        width: 50%; 
        padding: 0 10px;
      }
      #divAddSelectContainer img:hover {
        transform: scale(1.1);
      }
}

@media screen and (max-width: 706px) {
    .content {
        max-width: 95%;
    }

    #apps_content {
        width: 50%;
    }

    #apps_text {
        max-width: 45% !important;
    }

    .content-text img {
        width: 50%;
    }

    #divAddSelectContainer h3 {
        font-size: 14px;
        font-weight: bold;
    }
}

@media screen and (max-width: 550px) {
    .content-text img {
        width: 80%;
    }
}