.bgLogo {
    background: url(/stylesheet/SOAS23/plainorange.png);
    background-size: 1000px auto;
    text-align: center;
    position: absolute;
    height: 67vh;
    width: 100%;
    top: 120px;}

.bgLogo h1 {font-size: 7vw;}

@media (min-width: 600px) {
    .bgLogo h1 {font-size: 8vw;}
}

@media (min-width: 768px) {
    .bgLogo {
        height: 67vh;
        top: 120px;}
    
}

@media (min-width: 1200px) {
    .bgLogo {height: 73vh;}
}


@media (min-width: 1300px) {
    .bgLogo h1 {font-size: 6rem;}
}

@media (min-width: 1500px) {
    .bgLogo {height: 80vh;}
}

/* Quicklinks */

.ql {
    margin-top: 120px;
    background: white;
    border-radius: 20px;
    padding: 30px;
    position: relative;
    top: 50%;
    transform: translateY(-15%);
    -webkit-box-shadow: 2px 2px 15px 1px rgb(156 156 156 / 30%);
    box-shadow: 2px 2px 15px 1px rgb(156 156 156 / 30%);
    margin-bottom: 30px;}

.ql ul {
    margin: 0;
    padding: 0;
    list-style: none;}

.ql li {
    display: block;
    margin: 20px 0;
    text-align: center;
    color: #000;
    font-weight: 900;}

.ql li a {color: #000;}

.ql li .msl-imagenav-title {
    color: #000;
    text-decoration: none;
    margin-top: 15px;
    display: block;}

.ql li a {text-decoration: none;}
    
@media (min-width: 769px ) {
 .ql li {
    display: inline-block;
    vertical-align: top;
    width: 30%;
    width: calc(33% - 20px);
    margin: 0 8px;}

 .ql {   margin-top: -10px;}

}


    
/* Events */
.landing-section .landing-section-header {
    margin: 0 auto 20px;
    display: block;}

.landing-section .landing-section-header h2, 
.landing-section .landing-section-header p {
    text-align: center;
    max-width: 75%;
    margin: 0 auto 15px;
    display: block;}


/* newsArticles */
.newsArticles {padding: 70px 0;}
.newsArticles landing-section-header h2,
.newsArticles landing-section-header p {color: white;}

.newsArticles.landing-section .landing-section-header h2, 
.newsArticles.landing-section .landing-section-header p {
    text-align: center;
    max-width: 75%;
    margin: auto;
    display: block;}



.newsArticles .buttonStyles.left {margin: 15px auto 0;}

@media (min-width: 992px ) {
.newsArticles.landing-section .landing-section-header h2, 
.newsArticles.landing-section .landing-section-header p {
    text-align: left;
    margin: 0;}

.newsArticles .buttonStyles.left {margin: 15px 0 0;}
}



/* Slider Setting */
/* Hide the text within .news-content */
.slick-slider .news-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 5;
    text-align: center;
    display: none; /* Add this line to hide the text */
}


.slick-initialized .slick-slide {
    position: relative;
    margin: 0;
}

.slick-slider .news_image,
.slick-slider .msl-image {
    padding: 0;
    margin-bottom: 0;
}

.slick-slider .news_image,
.slick-slider .msl-image,
.slick-slider .event_item dt {
    width: 100%;
    min-height: auto;
    border-radius: 25px;
}

.slick-slider .slick-dots {
    text-align: center;
    bottom: -60px;
    position: absolute, fixed;
    color: #FFFFFF;
}

.slick-dots li button:before {
    opacity: 1;
    border: 1px solid #FFFFFF;
    width: 20px; /* Adjust to desired dot size */
    height: 20px; /* ''desired dot size */
    border-radius: 50%; /*  make circular */
}


/* Soften/Round the edges of the images */
.slick-slider .news_image img,
.slick-slider .msl-image img,
.slick-slider .event_item .msl_event_image img {
    min-height: 280px;
    min-width:420;
    padding: 0px;
    object-fit: cover;
    border-radius: 25px; /* Adjust value to control the roundness of edges */
}

/*hardcode slider styles to enlarge and round*/

.slick-slider {
    width: 90%;
    height: auto;
    margin-bottom: -15px;
    margin: 20px 5% 20px;
}



.slick-slider .news_image img,
.slick-slider .msl-image img,
.slick-slider .event_item .msl_event_image img {
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: cover;
    border-radius: 15px;
}


@media (min-width: 769px ) {
.slick-slider .slick-dots {   bottom: -10px;}
}


@media (min-width: 992px ) and (max-width: 1199px) {
.scrolling-cards .msl-item-list .msl-item:nth-child(4), .sectionCards li:nth-child(4) {display: none;}
}