/* Extra small devices (phones, 600px and down) */
@media  screen and (max-width: 600px) {
    .nav-menu {
        position: fixed;
        left: -110%;
        top: 8rem;
        flex-direction: column;
        background-color: #fff;
        width: 102vw;
        border-radius: 10px;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
        padding-left: 0px !important;
    }
    .login{
        flex-direction: column !important;
    }
    .login-box {
        width: 60vw !important;
        max-width: 65vw !important;
    }
     .nav-menu.active {
            left: 0;
            z-index: 1;
            top: 8rem;
        }
     .nav-item {
        margin: 1rem;
    }
    .navbar{
        width: 102vw;
    }
    .hamburger {
        display: block;
        cursor: pointer;
        margin-right: 10%;
    }
    .hamburger.active .bar:nth-child(2) {
            opacity: 0;
        }
        .hamburger.active .bar:nth-child(1) {
            transform: translateY(8px) rotate(45deg);
        }
        .hamburger.active .bar:nth-child(3) {
            transform: translateY(-8px) rotate(-45deg);
        }
        
    .orcha, .nia {
        width: 25% !important;
        height: 25% !important;
    }
    .next-last{

        justify-content: center !important;
        align-items: center !important;
    }
    video {
        width: 100% !important;
    }
    .margin-left {
        margin-left: 0px !important;
    }
    textarea {
        width: 100% !important
    }
    td {
        padding: 0px !important;
    }
    .expand {
        margin-left: 15px !important;
    }
    .fc-1 {
        width: 100% !important;
    }
    .hotspot-item .hs-content * {
        overflow: unset !important;
    }
    .hotspot-item {
        width: 8px !important;
        height: 8px !important;
        border: 5px solid #29666e !important;
        overflow: scroll !important;
    }
    .hs-content {
        max-height: 90vh !important;
        max-width: 80vw !important;
        position: fixed !important;
        right: 5vw !important;
        top: 5vh !important;
        left: 5vw !important;
        bottom: auto !important;
        overflow: auto !important;
    }
    .select {
        padding: 0px !important;
    }
    .languages {
        display: block !important;
    }
    .reg-box form {
        width: 100% !important;
    }
    .languages a {
        margin: 0px;
    }
    .lessons p {
        text-align: left;
    }
    .lessons {
        width: 85vmin !important;
        margin: 1vmin !important;
        padding: 2vmin !important;
        margin-left: auto !important;
        margin-right:auto !important;
    }
    hbox {
        width: 100%;
        flex-direction: column !important;
    }
    hbox div, vbox div {
        display: flex !important;
        flex-direction: column !important;
    }
    .img{
        max-width: 90vw !important;
        max-height: 95vw !important;
            }
    .small-img{
        max-width: 99% !important;
        max-height: 50vw !important;
    }
    .odd-img{
        width:99% !important;
        height:90vw !important;
    }
    img.align-mid {
        width:99% !important;
    }
    img.margin-left{
        width: 99% !important;
        min-width: 40vw !important;
    }
    .img-full{
        width: 99% !important;
        height: 85vw !important;
        max-width: 80vw !important;
        max-height: 80vw !important;
        flex: 80% !important;
    }
    .text{
        margin-left: 0 !important;
    }
    .profile {
        display: block !important;
        width: 91% !important;
        margin: 0 !important;
        padding: 20px !important;
        border-radius: 16px !important;
        text-align: center !important;
        background-color: var(--back-col-pref) !important;
    }
    .expand-head {
        flex-direction: row !important;
    }
    .accessibility {
        flex-direction: column !important;
    }
    .homepage-butt{
        text-align: center!important;
        max-width: 95vw !important;
        margin-left: auto;
        margin-right: auto;
    }
    .label{
        flex-direction: row !important;
    }
    form {
        max-width: 90vw;
    }

    body, html {
        max-width: 100%;
        max-height: 100%;
    }

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) and (max-width:1280px){
    .nav-menu {
        position: fixed;
        left: -110%;
        top: 8rem;
        flex-direction: column;
        background-color: #fff;
        width: 102%;
        border-radius: 10px;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
        padding-left: 0px !important;
    }
     .nav-menu.active {
            left: 0;
            z-index: 1;
            top: 8rem;
        }
        .nav-logo {
            position: relative;
            left: 4%;
            width: 10% !important;
            height: 10% !important;
        }
     .nav-item {
        margin: 1rem;
    }
    .nav-logo {
        position: relative;
        left: 4%;
        width: 10% !important;
    }
    .hamburger {
        display: block;
        cursor: pointer;
        margin-right: 10%;
    }
    .hamburger.active .bar:nth-child(2) {
            opacity: 0;
        }
        .hamburger.active .bar:nth-child(1) {
            transform: translateY(8px) rotate(45deg);
        }
        .hamburger.active .bar:nth-child(3) {
            transform: translateY(-8px) rotate(-45deg);
        }
    
    .hotspot-item {
        max-width: 95vw !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    video {
        width: 100% !important;
    }
    .margin-left {
        margin-left: 0px !important;
    }
    textarea {
        width: 100% !important
    }
    td {
        padding: 0px !important;
    }
    .expand {
        margin-left: 15px !important;
    }
    .fc-1 {
        width: 100% !important;
    }
    
    .hotspot-item {
        width: 8px !important;
        height: 8px !important;
        border: 5px solid #29666e !important;
    }
    .hs-content {
        max-width: 40vw !important;
        position: inherit !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow: auto !important;
    }
    .select {
        padding: 0px !important;
    }
    .languages {
        display: block !important;
    }
    .reg-box form {
        width: 100% !important;
    }
    .languages a {
        margin: 0px;
    }
    .lessons {
        width: 85vmin !important;
        margin: 1vmin !important;
        padding: 2vmin !important;
        margin-left: auto !important;
        margin-right:auto !important;
    }
    .hbox {
        width: 100%;
        flex-direction: column !important;
    }
    .align-mid{
        max-width: 60vw !important;
    }
    
    .languages a img {
        max-width: 35vw !important;
        max-height: 30vw !important;
    }
    img.align-mid {
        width: 60vw !important;
    }
    img.margin-left{
        width: 60vw !important;
        min-width: 40vw !important;
    }
    .img-full{
        width: 80vw !important;
    }
    .img{
        width: 40vw !important;
        max-width: 95vw !important;
        max-height: 95vw !important;
            }
    .reset-button{
        margin-left: 20%;
        margin-right: 20%;
    }
    .profile {
        display: block !important;
        width: 91% !important;
        margin: 0 !important;
        padding: 20px !important;
        border-radius: 16px !important;
        text-align: center !important;
        background-color: var(--back-col-pref) !important;
    }
    .instruct-button .homepage-butt{
        text-align: center !important;
        max-width: 45vw !important;
    }
    .orcha, .nia {
        width: 25% !important;
        height: 25% !important;
    }
    /*img{
        width: 60vmin !important;
        height: 60vmin !important;
    }*/
}

/* Desktops */
@media screen and (min-width:1280px) {

    .hs-content{
        max-width: 30vw !important;

    }
    .lessons {
        width: 60vw !important;
    }
    .reset-button{
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .img{
        max-width: 40vw !important;
    }
    .baby{
        max-height: 22vw !important;
    }
    .mid-img{
        max-width: 30vw !important;
        max-height: 30vw !important;
    }
    .small-img{
        max-width: 20vw !important;
        max-height: 20vw !important;
    }
    .tiny-img{
        max-width: 5vw !important;
        max-height: 5vw !important;
    }
    .orcha{
        max-width: 10vw !important;
        max-height: 10vw !important;
    }
    .mid-align {
        margin: 0;
        position: relative;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      }
}