@media (max-width: 575.98px) {
    .gx-8 {
        --bs-gutter-x: 1.2rem;
    }
    .breadPAU a {        
        padding-top: .3rem;
    }
    .overlay .closebtn {
        font-size: 2.5rem;
        top: 0;
        right: 2rem;
    }
    .navLine .websiteTitle h1 {
        font-size: 1.25rem;
    }
    #slider {
        padding-top: 4rem;
    }
    .external-links {
        margin-top: 3rem;
    }
    .footerLogo .w-15 {
        width: 35% !important;
    }
    a.scrollUp {
        right: 1rem;
    }
    #pauGuide .defaultGudie .title {
        padding-left: .5rem;
        font-size: initial;
    }    
    #pauGuide .resultSearch .item div.gorevyeri {
        border-left: .15rem solid #014974;
    }
    #pauGuide .resultSearch .item div.gorevyeri p {
        padding: 0 .5rem;
    }
    #pauGuide .resultSearch .item div.gorevyeri:after {
        content: inherit;
    }
}

@media screen and (orientation:landscape) and (min-device-width: 319px) and (max-device-width: 568px) {
    .breadPAU a {        
        padding-top: .3rem;
    }
    .navLine .websiteTitle h1 {
        font-size: 1.5rem;
    }
    #websiteBanner .carousel-caption h5 {
        font-size: 1.1rem;
        letter-spacing: .2px;
        top: 70%;
        left: 10%;
        width: 80%;
        font-size: 2rem;
    }
    .carousel-control-next, .carousel-control-prev {
        top: initial;
        bottom: 10px;
    }
    #buttonList {
        margin-top: 0;
        padding-top: 1.5rem;
        background-color: #000;
    }
    #pauGuide .defaultGudie .title {
        padding-left: .5rem;
        font-size: initial;
    }
    #pauGuide .resultSearch .item div.gorevyeri {
        border-left: .15rem solid #014974;
    }
    #pauGuide .resultSearch .item div.gorevyeri p {
        padding: 0 .5rem;
    }
    #pauGuide .resultSearch .item div.gorevyeri:after {
        content: inherit;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .gx-8 {
        --bs-gutter-x: 1.2rem;
    }
    .breadPAU a {
        padding-top: .3rem;
    }
    .overlay .closebtn {
        font-size: 2.5rem;
        top: 0;
        right: 2rem;
    }
    .navLine .websiteTitle h1 {
        font-size: 1.5vw;
    }
    #websiteBanner .carousel-caption h5 {
        font-size: 1.5rem;
        letter-spacing: .2px;
        top: 30%;
        left: 12%;
        width: 55%;
    }
    .external-links {
        margin-top: 3rem;
    }
    .footerLogo .w-15 {
        width: 30% !important;
    }
    a.scrollUp {
        right: 1rem;
    }
    #pauGuide .defaultGudie .title {
        padding-left: .5rem;
        font-size: initial;
    }
    #pauGuide .defaultGudie .title {
        padding-left: .5rem;
        font-size: initial;
    }
    #pauGuide .resultSearch .item div.gorevyeri {
        border-left: .15rem solid #014974;
    }
    #pauGuide .resultSearch .item div.gorevyeri p {
        padding: 0 .5rem;
    }
    #pauGuide .resultSearch .item div.gorevyeri:after {
        content: inherit;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .bread a.closeMenu {
        right: 0.5rem;
    }
    .gx-8 {
        --bs-gutter-x: 3rem;
    }
    .breadPAU a:after {
        content: 'PAU';
    }
    .breadPAU a span {        
        display: none;
    }
    .overlay .closebtn {
        font-size: 2.5rem;
        top: 0;
        right: 2rem;
    }
    .navLine .websiteTitle h1 {
        font-size: 1.5vw; /*1.2rem*/
    }
    .websiteNav ul.navbar-nav > li.nav-item {
        margin-left: 1rem !important;
        margin-right: 1rem !important;
    }
    .websiteNav ul.navbar-nav > li.nav-item a.nav-link {
        font-size: 1.1rem;
    }
    .navLine .search {
        margin-left: 1rem !important;
    }
    .carousel-inner .carousel-item,
    .carousel-inner .carousel-item img {
        height: 75vh;
    }
    #websiteBanner .carousel-caption h5 {
        font-size: 1.5rem;
    }
    #owl-News .item h5 {
        font-size: 1.1rem;
    }
    .external-links {
        margin-top: 3rem;
    }
    .footerLogo .w-15 {
        width: 20% !important;
    }
    .announcementDetail article,
    .eventDetail article {
        padding-right: 3rem;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .navLine .websiteTitle h1 {
        font-size: 1.5vw;
    }
    .bread a.closeMenu {
        right: 0.5rem;
    }
    .gx-8 {
        --bs-gutter-x: 3rem;
    }
    .overlay .closebtn {
        font-size: 2.5rem;
        top: 0;
        right: 2rem;
    }
    .carousel-inner .carousel-item,
    .carousel-inner .carousel-item img {
        height: 75vh;
    }
    #websiteBanner .carousel-caption h5 {
        font-size: 1.85em;
    }   
    .homePageComponent {
        padding-right: 6rem;
        padding-left: 6rem;    
    }
    .footerLogo .w-15 {
        width: 20% !important;
    }
    .announcementDetail article,
    .eventDetail article {
        padding-right: 3rem;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .navLine .websiteTitle h1 {
        font-size: 1.5vw;
    }
    .carousel-inner .carousel-item,
    .carousel-inner .carousel-item img {
        height: 75vh;
    }
    .homePageComponent {
        padding-right: 6rem;
        padding-left: 6rem;    
    }
    .announcementDetail article,
    .eventDetail article {
        padding-right: 3rem;
    }
}

@media (min-width: 1400px) {
    .navLine .websiteTitle h1 {
        font-size: 1.5vw;
    }
    #slider .tp-parallax-wrap {
        left: 0 !important;
    }
    .homePageComponent {
        padding-right: 6rem;
        padding-left: 6rem;    
    }
    .announcementDetail article,
    .eventDetail article {
        padding-right: 3rem;
    }
}