/* Extra small devices (phones, 600px and down) */
@media screen and (max-device-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 !important;
        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);
        }
    .expand audio {
        width: 90%;
    }
    .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;
    }
    .hotspots{
        width: 75vw !important;
        max-width: 80vw !important;
        height: 67vw !important;
        max-height: 80vw !important;
    }
    .hotimg {
        width: 75vw !important;
        max-width: 80vw !important;
        height: 67vw !important;
        max-height: 80vw !important;
    }
    .align-hot{
        width: 75vw !important;
        max-width: 80vw !important;
        height: 67vw !important;
        max-height: 80vw !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;
        height: 60vw;
        min-width: 40vw !important;
    }
    .img-full{
        width: 99% !important;
        height: 85vw !important;
        flex: 80% !important;
    }
    .text{
        margin-left: 0 !important;
    }
    .profile {
        display: block !important;
        width: 91% !important;
        max-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;
        white-space: normal !important ;
    }
    .label{
        flex-direction: row !important;
    }
    form {
        max-width: 90vw;
    }

    body, html {
        max-width: 100%;
        max-height: 100%;
    }
    .cert{
        max-width: 60vw !important;
    }
    .certbox{
        display: flex;
		padding: 25px;
		width: 60vw;
		max-width: 80vw;
		height: 80vw;
		max-height: 80vw;
		margin:auto;
        margin-bottom: 50px !important;
		background-color: #ebe3e1;
	}
    .box{
        display: flex;
		padding: 25px;
		width: 60vw;
		max-width: 80vw;
		height: 50vw;
		max-height: 80vw;
		border: 1px;
		border-style: outset;
		margin:auto;
        margin-bottom: 50px !important;
		background-color: #ebe3e1;
		align-items: center;
        justify-content: center;
	}
    .box1{
        display: flex;
		padding: 25px;
		width: 60vw !important;
        max-width: 80vw;
		height: fit-content !important;
		border: 1px;
		border-style: outset;
		margin-right:auto !important;
        margin-left: auto !important;
        margin-bottom: 50px !important;
		background-color: #ebe3e1;
		align-items: center;
        justify-content: center;
	}
    .chartbox{
		padding: 25px;
		width: 60vw !important;
		max-width: 80vw !important;
		height: fit-content;
		max-height: 60vw !important;
		border: 1px !important;
		border-style: outset !important;
        margin-bottom: 50px !important;
		background-color: #ebe3e1;
		align-items: center;
        justify-content: center;
	}
    .etable{
        display: none;
    }
    .etable1{
        display: none;
    }
    .boc{
        margin-left: 12vw !important;
        width: 60vw;
    }
    .boc h2{
        text-align: center !important;
    }
    .rotate{
        display: block !important;
    }
    .vcharts .box1{
		padding: 25px;
        width: 80vw;
        height: fit-content;
		border: 1px;
		border-style: outset;
		margin-top: 30px;
		background-color: #ebe3e1;
		align-items: center;
	}
    .vcharts .box2{
		padding: 25px;
		border: 1px;
        width: 60vw !important;
		border-style: outset;
		margin-top: 30px;
        margin-bottom: 50px;
		background-color: #ebe3e1;
		align-items: center;
	}
}

/* This is for tablets changes for landscape only */

@media only screen and (min-device-width: 600px) and (max-device-width:1280px) and (orientation: landscape){


    .vcharts .chartbox{
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .vcharts .box1{
        height: 440px !important;
    }

    .etable, .etable1{
        position: relative;
        width: 40vw;
        margin-right: 5vw;
        margin-left: 5vw;
        left:-40px;
    }
}


/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-device-width: 600px) and (max-device-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;
    }
    .hotimg {
        width: 75vw !important;
        max-width: 80vw !important;
        height: 67vw !important;
        max-height: 80vw !important;
    }
    .align-hot{
        width: 75vw !important;
        max-width: 80vw !important;
        height: 67vw !important;
        max-height: 80vw !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;
    }
    hbox div, vbox div {
        display: flex !important;
        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;
        height: 60vw;
        min-width: 40vw !important;
    }
    .img-full{
        width: 80vw !important;
        height: 60vw !important;
    }
    .img{
        width: 45vw !important;
        height: 40vw !important;
        max-width: 95vw !important;
        max-height: 95vw !important;
            }
    
    .box{
        padding: 25px;
            width: 80vw !important;
            max-width: 80vw!important;
            height: 50vw;
            max-height: 80vw;
            border: 1px;
            border-style: outset;
            margin:auto;
            margin-bottom: 50px !important;
            background-color: #ebe3e1;
            align-items: center;
            justify-content: center;
            }
            .box1{
                padding: 25px;
                    width: 80vw!important;
                    max-width: 80vw!important;
                    height: 50vw !important;
                    max-height: 80vw;
                    border: 1px;
                    border-style: outset;
                    margin:auto;
                    margin-bottom: 50px !important;
                    background-color: #ebe3e1;
                    align-items: center;
                    justify-content: center;
                    }
    .cert{
        max-width: 360px !important;
        max-height: 262px !important;
         }
         .certbox{
            display: flex;
            padding-top: 25px;
            padding-bottom: 25px;
            width: 50vw;
            max-width: 50vw;
            height: 40vw;
            max-height: 40vw;
            margin:auto;
            margin-bottom: 50px !important;
            background-color: #ebe3e1;
            align-items: center;
            justify-content: center;
        }
    .reset-button{
        margin-left: 20%;
        margin-right: 20%;
    }
    .profile {
        display: block !important;
        width: 91% !important;
        max-width: 91% !important;
        margin: auto !important;
        padding: 20px !important;
        border-radius: 16px !important;
        text-align: center !important;
        background-color: var(--back-col-pref) !important;
    }
    .user{
        text-align: center !important;
    }
    .instruct-button .homepage-butt{
        text-align: center !important;
        max-width: 45vw !important;
    }
    .orcha, .nia {
        width: 25% !important;
        height: 25% !important;
    }
    /*img{
        width: 65vmin !important;
        height: 60vmin !important;
    }*/
    table {
        max-width: 90vw ;
    }
    body, html {
        max-width: 100%;
        max-height: 100%;
    }
    .rotate{
        display: none !important;
    }
    .etable, .etable1{
        width: 80vw!important;
        margin:auto !important;
    }
    .etable th h2, .etable1 th h2{
        padding: 5px;
    } 
    .etable th, .etable1 th{
        border-bottom: none;
    } 
    .chartbox{
		padding: 25px;
        width:50vw !important;
		max-width: 80vw !important;
		height: fit-content !important;
		max-height: 60vw !important;
		border: 1px !important;
		border-style: outset !important;
        margin-bottom: 50px !important;
        margin-left:auto !important;
        margin-right:auto !important;
		background-color: #ebe3e1;
		align-items: center;
        justify-content: center;
	}
    .vcharts{
        width: 80% !important;
        max-width: 80% !important;
        align-items: center !important;
    }
    .vcharts .box1{
		padding: 50px;
        width: 90vw!important;
        height: fit-content;
		border: 1px;
		border-style: outset;
		margin-top: 30px;
		background-color: #ebe3e1;
		align-items: center;
	}
    .vcharts .box2{
		padding: 25px;
        width: 75vw !important;
        height: 50vw;
		border: 1px;
		border-style: outset;
		margin-top: 30px;
        margin-bottom: 30px;
		background-color: #ebe3e1;
		align-items: center;
	}
    #myChart2{
        width: 75vw;
        height: 55vw;
    }
}








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

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

    }
    .hotimg {
        width: 50vw !important;
        max-width: 80vw !important;
        /*height: 44vw !important;
        max-height: 80vw !important;*/
    }
    .align-hot{
        width: 50vw !important;
        max-width: 80vw !important;
        height: 44vw !important;
        max-height: 80vw !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;
    }
    .cert{
        max-width: 15vw !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%);
      }
      .box{
		padding: 25px;
		width: 30vw;
        height: 350px;
		border: 1px;
		border-style: outset;
		margin:auto;
		background-color: #ebe3e1;
		align-items: center;
	}
    .box1{
		padding: 25px;
		width: 30vw;
        height: 400px;
		border: 1px;
		border-style: outset;
		margin-left:auto;
        margin-right:auto;
		background-color: #ebe3e1;
		align-items: center;
	}
    .box2{
        margin-left:auto;
        margin-right:auto;
        margin-bottom: 25px; 
    }
    .certbox{
        display: flex;
        flex-direction: column;
        padding: 25px;
        width: fit-content;
        block-size: fit-content;
        margin:auto;
        margin-bottom: 50px !important;
        background-color: #ebe3e1;
    }
    .vcharts .box{
		padding: 25px;
        width: 30vw;
        height: 350px;
        max-height: 350px;
		border: 1px;
		border-style: outset;
		margin:auto;
		margin-top: 30px;
		background-color: #ebe3e1;
		align-items: center;
	}
    .rotate{
        display: none !important;
    }
    .i05{
        width:446px;
        height: 815px;
    }

}