.hide-mobile{
    display: block;
}
.hide-desktop{
    display: none;
}
@media screen and (max-width: 480px){
    header{
        height: 50px;
        width: 100vw;
    }
    header nav{
        display: none;
    }
    #main-wrapper{
        background-size: 350%;
        background-position: top right;
    }
    .main-header{
        grid-template-columns: 1fr 1fr;
    }
    #logo img{
        max-height: 30px;
    }
    .hide-mobile.profile-links{
        display: none;
    }
    section{
        max-width: 90%;
        margin: 30px auto;
    }
    section#hero{
        grid-template-columns: 1fr;
        padding-top: 50px;
        padding-top: 20vh;
        grid-template-rows: 30vh 30vh;
        grid-gap: 5vh;
        height: 80vh;
    }
    h1.special-header{
        font-size: 2.3rem;
        color: #FFFFFF;
        text-align: center;
    }
    h4.special-caption{
        color: #FFFFFF;
        font-size: .9rem;
        text-align: center;
    }
    .main-header{
        max-width: 90%;
    }
    #home-news .news-grid,
    #news-page-highlight .news-grid{
        grid-template-columns: 1fr;
        grid-gap: 25px;
    }
    #home-news .news-grid .news-item,
    #news-page-highlight .news-grid .news-item{
        display: grid;
        grid-template-columns: 1fr 100px;
        grid-gap: 15px;
        align-items: center;
        grid-template-areas: "content img";
        border-radius: 0;
    }

    #home-news .news-grid .news-item .news-spoiler,
    #news-page-highlight .news-grid .news-item .news-spoiler{
        display: none;
    }
    #home-news .news-grid .news-item .news-thumbnail-link,
    #news-page-highlight .news-grid .news-item .news-thumbnail-link{
        grid-area: img;
    }
    #home-news .news-grid .news-item  .news-thumbnail,
    #news-page-highlight .news-grid .news-item  .news-thumbnail{
        border-radius: 0;
    }
    #home-news .news-grid .news-item  .news-thumbnail img,
    #news-page-highlight .news-grid .news-item  .news-thumbnail img{
        border-radius: 0;
        object-fit: cover;
        width: 100px;
        height: 100px;
    }
    #home-news .news-grid .news-item .news-title,
    #news-page-highlight .news-grid .news-item .news-title{
        font-size: 1rem;
        font-weight: bold;
    }
    #home-news .news-grid .news-item .news-cta,
    #news-page-highlight .news-grid .news-item .news-cta{
        display: none;
    }
    .value-item-grid{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: "img" "text";
    }

    .value-img{
        grid-area: img;
    }
    .value-text{
        grid-template-columns: 1fr;
        grid-gap: 5px;
    }
    .value-text h4{
        text-align: center;
        margin-bottom: 15px;
    }

    .value-text h4.invis{
        display: none;
    }
    .value-text p{
        margin: 0;
    }
    .univ-grid, .course-grid{
        grid-template-columns: 1fr 1fr;
        grid-gap: 15px;
    }
    .university-grid .univ-item{
        box-shadow: none;
        display: block;
    }

    .university-grid .univ-item .univ-bottom-meta,
    .university-grid .course-item .univ-bottom-meta{
        margin: 5px 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 10px;
    }

    .university-grid  .univ-item .univ-bottom-meta .univ-bottom-meta-item,
    .university-grid .course-item .univ-bottom-meta .univ-bottom-meta-item{
        background-color: #FFFFFF;
        border-radius: 7px;
        box-shadow: 0px 0px 7px rgba(0,0,0,.3);
        padding: 7px;
        height: 50px;
        text-align: center;
        display: grid;
        align-items: center;
        justify-content: center;
    }
    .university-grid  .univ-item .univ-bottom-meta .univ-bottom-meta-item i,
    .university-grid .course-item .univ-bottom-meta .univ-bottom-meta-item i{
        display: block;
        font-size: 22px;
        margin-bottom: 5px;
        color: #132A4E;
    }

    .university-grid  .univ-item .univ-bottom-meta .univ-bottom-meta-item small,
    .university-grid .course-item .univ-bottom-meta .univ-bottom-meta-item small{
        font-size: 12px;
        color: #212121;
        font-weight: 600;
        text-transform: uppercase;
    }
    .university-grid  .univ-item .img-cover{
        position: relative;
    }

    .university-grid  .univ-item .img-cover .img-cover-overlay{
        display: flex;
        align-items: center;
        height: 50px;
        background: linear-gradient(to bottom, rgba(33,33,33,.0), rgba(33,33,33,.7));
        position: absolute;
        bottom: 0;
        width: 100%;
        box-sizing: border-box;
        color: #FFFFFF;
        padding: 3px 7px;
        border-radius: 0 0 7px 7px;
    }

    .university-grid  .univ-item .img-cover .img-cover-overlay .overlay-content{
        display: grid;
    }
    .university-grid  .univ-item .img-cover .img-cover-overlay h3{
        font-size: 16px;
    }
    .university-grid  .univ-item .img-cover .img-cover-overlay small{
        font-size: 12px;
    }
    .university-grid  .univ-item .img-cover img{
        width: 100%;
        object-fit: cover;
        height: 150px;
        border-radius: 7px;
    }
    #list-filter-box{
        display: none;
    }
    #basic-wrapper{
        margin: 60px auto;
    }
    #university-detail--grid{
        grid-template-columns: 1fr;
    }
    .courses-box{
        grid-template-columns: 1fr;
    }
    .courses-box > .level {
        border-radius: 0;
    }
    .courses-box > .level ul li{
        display: inline-block;
        margin: 10px;
    }
    .courses-grid{
        grid-template-columns: 1fr;
        grid-gap: 15px;
    }
    #univ-banner .univ-meta{
        grid-template-columns: 1fr;
        padding: 15px;
        box-sizing: border-box;
    }
    #univ-banner .univ-meta .logo{
        margin: 0;
        padding: 0;
    }
    #univ-banner .univ-meta .logo img{
        max-width: 100px;
    }

    #univ-banner .univ-meta .meta-desc{
        text-align: center;
    }
    #univ-banner .univ-meta .meta-desc h1{
        margin-bottom: 10px;
    }
    #univ-banner .univ-meta .meta-desc h3{
        margin-bottom: 10px;
    }
    #univ-banner .univ-meta .meta-details .icons{
        display: none;
    }

    #univ-banner .univ-meta .meta-details{
        text-align: center;
        grid-template-columns: 1fr;
        justify-self: center;
        margin-right: 0;
    }
    #univ-banner .meta-reg{
        width: 85%;
    }
    .course-info-grid{
        grid-template-columns: 1fr;
    }
    h3.left-title{
        text-align: center;
    }
    .detail-container{
        text-align: center;
    }
    .mobile-nav{
        display: block;
        text-align: right;
    }
    .mobile-nav a{
        color: #FFFFFF;
        font-size: 20px;
    }
    header:not(.scrolled) .logo-dark{
        display: none;
    }
    header:not(.scrolled) .logo-light{
        display: block;
    }
    header.blue-nav:not(.scrolled) .logo-dark{
        display: block;
    }
    header.blue-nav:not(.scrolled) .logo-light{
        display: none;
    }
    header.blue-nav:not(.scrolled) .mobile-nav a{
        color: #132A4E;
    }
    .blue-nav ul.main-nav li a{
        color: #FFFFFF;
    }
    .main-header nav{
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0;
        left: -95vh;
        height: 100vh;
        width: 95vw;
        background-color: #132A4E;
        z-index: 999999;
    }
    .main-header nav.show{
        left: 0;
    }
    ul.main-nav{
        display: block;
        width: 100vw;
        height: auto;
    }
    ul.main-nav li{
        display: block;
        text-align: center;
        margin: 25px 0;
        font-size: 12.5px;
    }
    ul.main-nav li.search-link{
        margin-left: 0;
    }
    ul.main-nav li.close-nav-mobile{
        display: block;
        color: #F8333C;
        font-size: 22px;
    }
    footer{
        grid-template-columns: 1fr;
        height: auto;
    }
    footer .foot-left{
        text-align: center;
    }
    footer .foot-copy{
        margin-top: 10px;
        margin-bottom: 10px;
        text-align: center;
    }
    a.floating-button{
        grid-template-columns: 1fr;
        height: 50px;
        width: 50px;
        padding: 0;
        bottom: 20px;
    }

    a.floating-button .fab-text{
        display: none;
    }
    #reg-head .the-overlay .overlay-wrapper .top{
        grid-template-columns: 1fr;
    }

    #reg-head .the-overlay .overlay-wrapper .top .left{
        grid-template-columns: 1fr;
        grid-gap: 16px;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    #reg-head .the-overlay .overlay-wrapper .top .left .logo{
        margin: auto;
    }
    #reg-head .the-overlay .overlay-wrapper .bottom ul li{
        display: block;
        padding: 0;
        margin: 10px 0;
        text-align: center;
    }
    #reg-head .the-overlay .overlay-wrapper .bottom ul li:not(:last-child){
        border: none;
    }
    .the-steps{
        overflow-x: scroll;
    }
    .the-steps ul{
        width: 300%;
    }
    .alamat-grid{
        grid-template-columns: 1fr;
        grid-gap: 16px;
    }
    .reg-page--the-box{
        height: 350px;
        overflow: hidden;
        box-shadow: 3px 5px 7px rgba(0,0,0,.32);
        border-radius: 7px;
    }

    .reg-page--the-box .the-bg{
        object-fit: cover;
        max-width: none;
    }
    .reg-page--the-box .the-overlay{
        padding: 15px;
    }

    .reg-page--the-box .the-overlay .overlay-content img{
        max-width: 100px;
    }
    #home-search-mobile{
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 16px;
    }
    #home-search-mobile .mobile-grid-item a i{
        margin-right: 8px;
    }
    .top-search-box{
        left: 0;
        right: 0;
        top: 100vh;
        bottom: 0;
        width: 100vw;
        box-sizing: border-box;
        transition: top .5s ease-out;
    }
    .top-search-box.show{
        top: 0;
    }
    .hide-mobile{
        display: none;
    }
    .hide-desktop{
        display: block;
    }
    #basic-wrapper{
        min-height: 70vh;
    }
    .univ-overlay.hide-mobile{
        display: none;
    }
    .course-item{
        display: block;
        box-shadow: none;
    }
    .course-overlay.hide-mobile{
        display: none;
    }
    .university-grid .course-item{
        display: block;
    }
    .university-grid .course-item .img-cover{
        position: relative;
    }
    .university-grid .course-item .img-cover img{
        height: 150px;
        border-radius: 7px;
        width: 100%;
        object-fit: cover;
    }

    .university-grid .course-item .img-cover .img-cover-overlay{
        position: absolute;
        bottom: 0;
        box-sizing: border-box;
        width: 100%;
        background: linear-gradient(to bottom, rgba(33,33,33,.0), rgba(33,33,33,.7));
        color: #FFFFFF;
        border-radius: 7px;
        padding: 3px 7px;
    }
    .university-grid .course-item .img-cover .img-cover-overlay .overlay-content{
        display: grid;
    }
    .university-grid .course-item .img-cover .img-cover-overlay h3{
        font-size: 16px;
    }
    .university-grid .course-item .img-cover .img-cover-overlay small{
        font-size: 12px;
    }
    .tuition-no-login a{
        font-weight: 600;
        text-decoration: underline;
        color: #212121;
    }
    .foot-copy{
        grid-column: span 1;
    }
    .foot-link-grid{
        grid-gap: 16px;
    }

    ul.category-nav::-webkit-scrollbar{width: 0 !important; height: 0 !important;}
    .category-nav-wrapper{
        top: 50px;
        box-sizing: border-box;
            padding: 0 16px;
    }
    ul.category-nav{
        overflow-x: scroll;
        overflow-y: hidden;
        display: block;
        min-width: 100%;
        max-width: 100%;
        width: 100%;
        white-space: nowrap;
        overflow: -moz-scrollbars-none;
    }
    ul.category-nav li{

    }
    .white-nav ul.main-nav li a.btn.btn-reg-mobile,
    .blue-nav ul.main-nav li a.btn.btn-reg-mobile{
        background-color: #FBC212;
        color: #212121;
        padding: 7px 30px;
        width: 50%;
    }
    ul.main-nav li.cta-sidebar{
        margin: 15px auto;
    }
}