.name {display:none}
#skin_novus > div.container-fluid > div > div > div .head1 {display:none}
.main .row {margin:2% 0}
body {background: white;font-family:'Lato'}

.wht-container{padding-top:0px;margin-top:0px;padding-left:0px;padding-right:0px;}
.news-detail-cell{
position:absolute;

top: 30%;

width:100%;
text-align:center;
font-weight:700!important;
font-size:22px;
position:absolute;
height: 40%;
width:55%;
font-family:'LeagueSpartan',tahoma;
background:#000;
background:rgba(0,0,0,0.9)
}
.news-detail-cell h5 {    padding-top: 25%;}
.News {padding-left:0;padding-right:0; margin-bottom:0 !important;}
.news-detail {top:0;right:auto;width:100%;text-align:left}
@media all and (max-width:600px){
    p.leader{display:none}
}
.news-detail-cell h5{
padding-left: 10%;}
.news-detail-cell h5 a {font-size:4vw!important;color:white;}


@media all and (min-width:600px) {
    .news-detail-cell h5 a {font-size: 2vw !important;}
.news-detail {top:0;right:auto;width:100%;text-align:left}
.news-detail .news-detail-cell {
position:absolute;

top: 30%;

width:100%;
text-align:center;
font-weight:700!important;
font-size:22px;
position:absolute;
height: 40%;
width:55%;
font-family:'LeagueSpartan',tahoma;
background:#000;
background:rgba(0,0,0,0.9)
}
.news-detail .news-detail-cell h5 a {color:#fff;}

}
.news-detail-cell > h5 > a{}

.news-detail .news-detail-cell {text-align:center;left:0}
#newslist .news-detail .news-detail-cell {left:0;right:1%;text-align:left}
.news-detail .news-detail-cell h5 a {transition:.5s;text-align:center;font-size:1.5em;text-decoration:none;}
.news-detail .news-detail-cell h5 a:hover {color:#eee;text-decoration:none}
.news-detail {position:absolute;bottom:0;left:0;text-align:left;color:#fff;z-index:2;font-size:-5px}
#newsButton{width: auto !important;text-decoration: none !important;}
.bx-pager{bottom:1vw !important; padding-right:0 !important;}
.news-detail-cell h5 {    padding: 5%; padding-left: 30%; padding-bottom:2%;padding-top:2%}

#newsButtonText{width: 100%;text-align:center;text-decoration:none;margin:0;border-width:0;}
#newsButton{width: auto !important;text-decoration: none !important;}



/*Nav Tiles*/
#navTiles{padding:0;margin:0;width:100%;}
.tileRow{margin:0 !important;}
.navTile{padding-left:0;padding-right:0;}
.tileContent{padding:10%;color:white;}
.tileTitle{font-family:'LeagueSpartan', arial; text-transform: uppercase;font-size:1.1vw}
.tileButton{border:solid white 1px;background-color:#fff0;width:60%;float:left;font-size:1vw;padding:10px;text-align:center;}
.tileText{height:65%;font-size:0.9vw;}


.tileContent:hover .tileButton{background-color:white;color:black;}

/*resize tile content as they change ratio - this is below md*/
@media all and (max-width:992px) {
    .tileTitle{font-size:2vw;}
    .tileButton{font-size:2vw;}
    .tileContent{background-repeat:no-repeat;background-size:cover;background-blend-mode: multiply;}
    .tileText{font-size:1.9vw}
    #campaignTile{background-image:url('https://keelesu.com/assets/site_resources/campaignsB.jpg');}
    #adviceTile{background-image:url('https://keelesu.com/assets/site_resources/supportB.jpg')}
    #foodTile{background-image:url('https://keelesu.com/assets/site_resources/foodB.jpg')}
    #shopTile{background-image:url('https://keelesu.com/assets/site_resources/shopB.jpg')}
    #socsTile{background-image:url('https://keelesu.com/assets/site_resources/socsB.jpg')}
    #entsTile{background-image:url('https://keelesu.com/assets/site_resources/entsB.jpg')}
    #eventsAreaTitle{font-size:7vw;}
}

@media all and (max-width:768px) {
    .tileTitle{font-size:3.5vw;}
    .tileButton{font-size:3vw;padding:5px} 
    .tileText{font-size:2.7vw;}
}
.eventBanner{
    background-image:url('https://keelesu.com/assets/site_resources/KeeleSUBannerPattern.png');
    height: 40px;
    width: 100%;
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
}

/*** Events slider - careful with this, Frankenstein would be proud of it.  ***/
#eventsArea{background-color:#2e1a47;}
#eventsAreaTitle{color:white;font-size: 2vw;font-family: 'LeagueSpartan';padding: 30px;padding-left: 20%;padding-bottom: 10px;}
.event_item{background-color:white;}
#eventCarousel{padding-bottom: 50px;padding-left: 5vw;padding-right: 5vw;}
.msl_event_description{overflow: hidden;}


/*** Events styling MY AMAZING CSS I TOTALLY DIDN'T DOWNLOAD FROM MSL AND THEN MUTILATE***/
/* Card styles */
.carousel-item {
    width: 95%;
    vertical-align: top;
    
    padding:5px;
    border-radius: 7px;
    background: none; }


.carousel-item:hover {
    -webkit-box-shadow:5px 4px 5px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 5px 4px 5px 0px rgba(0,0,0,0.1);
    box-shadow:5px 4px 5px 0px rgba(0,0,0,0.1);}    

.carousel-item img {width: 100%;}
.cardWrapper{margin: 5px;background-color: white;border-radius: 7px;height:100%;color:#2E1A47!important;}
.msl_event_organisation{padding-left: 2%;}
.cardDetails {padding: 2% 5% 0 5%;}
.msl_event_description{display:none;}
.msl_event_types{display:none;}
.msl_event_location{display:none;}

#eventCarousel .event_item .msl_event_organisation{font-size: 20px; line-height:1.2;}
#eventCarousel .event_item .msl_event_name {
    padding: 2%;
    text-decoration:none!important;
    text-transform: uppercase; 

    display: block;
    font-weight: 700;    
    height: 50px;
    overflow: hidden;
        color: #2E1A47!important;
}


#eventCarousel .event_item .msl_event_time,
#eventCarousel .event_item .msl_event_location {
    font-size: 15px;
    font-weight:bold;
     }
    
/*#eventCarousel .event_item .msl_event_description {display: none; } */

@media (min-width: 600px) { 
#eventCarousel .event_item {
    width: 45%;
    width: calc(50% - 24px);}
}


@media (min-width: 768px) {     
.cardStyling .event_item {
    width: 30%;
    width: calc(33% - 24px);}
}

@media (min-width: 992px) {    
#eventCarousel .event_item {
    width: 22%;
    width: calc(25% - 24px);
    vertical-align: top;
}
}

.carousel-control-next{
        width: 5%;
    margin: -5%;
}
.carousel-control-prev{
        width: 5%;
    margin: -5%;
}
/*carousel css - totally not stuff I found online and tried to stitch into this.*/
@media (min-width: 768px) {

    /* show 3 items */
    .carousel-inner .active,
    .carousel-inner .active + .carousel-item,
    .carousel-inner .active + .carousel-item + .carousel-item,
    .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item  {
        display: block;
    }
    
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item,
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
        transition: none;
    }
    
    .carousel-inner .carousel-item-next,
    .carousel-inner .carousel-item-prev {
      position: relative;
      transform: translate3d(0, 0, 0);
    }
    
    .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -25%;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    
    /* left or forward direction */
    .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .carousel-item-next.carousel-item-left + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    
    /* farthest right hidden item must be abso position for animations */
    .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    
    /* right or prev direction */
    .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .carousel-item-prev.carousel-item-right + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }

}

/***  Lower part of the site with officers and info panes  ***/


@media (min-width: 1160px){
    #lowerThird{margin:auto;width: 80vw;}
    #studentsFirst:after, #studentsFirst:before {
  content: '';
  width: 150px;
  height: 2px;
  background: #2E1A47;
  margin: 0 10px;
}
    
}

@media (max-width: 600px) { 
    #studentsFirst{font-size: 4.2vw;}
    
    
}
@media (max-width:768px){
    #meetTheTeam{font-size:5vw!important;text-align:center}
    #eventsAreaTitle{font-size:5vw;}
}
#studentsFirst {
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  padding-top:50px;
}
#meetTheTeam{padding:15px;margin-top:50px;margin-bottom:10px;font-size:1.7rem}

@media (max-width:779){
    #meetTheTeam{background-color: #2e1a47;color: white;margin-left:5%;margin-right:5%}
}

/*Officers - original css*/
#officers .fas {display:none}
.officers {background:#f7f7f7;margin:50px 0;padding:50px 0 0}

@media all and (min-width:600px) {
.officers {margin:50px 0;padding:50px 0}
}

.officers h2 {top:-95px}
#officers {margin-top:4px}

@media all and (min-width:568px) {
#officers {margin-top:0}
}
@media all and (min-width:1200px) {
#officers {margin-top:0}
}

#officers ul {display:block;overflow:hidden;padding:0}
#officers ul li {float:left;width:50%;list-style-type:none;text-align:center;display:block;min-height:185px;padding: 1%;}
#officers ul li:nth-child(2n+1) {clear:both}

@media all and (min-width:400px) {
#officers ul li {width:50%}
#officers ul li:nth-child(2n+1) {clear:none}
#officers ul li:nth-child(3n+1) {clear:both}
}

@media (min-width: 780px) {
#officers ul li {width:20%}
#officers ul li:nth-child(3n+1) {clear:none}
}

#officers .msl-imagenav-description {float:left;display:block;width:100%;color:#000;font:700 1em 'LeagueSpartan',tahoma}
#officers .msl-imagenav-title {float:left;display:block;width:100%;color:#000;background:#FFF}

@media all and (min-width:480px) {
#officers .msl-imagenav-description {font-size:1.3em}
}

#officers .msl-imagenav-image {margin:0 auto}
.scroller-c,.ents-c {margin-bottom:20px}

@media all and (min-width:1200px) {
.scroller-c,.ents-c {margin-bottom:0}
}




@media all and (min-width:1200px) {
#officers {margin-top:0}
}

#officers ul {display:block;overflow:hidden;padding:0}
#officers ul li {float:left;width:50%;list-style-type:none;text-align:center;display:block;min-height:185px}
#officers ul li:nth-child(2n+1) {clear:both}

@media all and (min-width:400px) {
#officers ul li {width:50%}
#officers ul li:nth-child(2n+1) {clear:none}
#officers ul li:nth-child(3n+1) {clear:both}
}

@media (min-width: 780px) {
#officers ul li {width:20%}
#officers ul li:nth-child(3n+1) {clear:none}
}

#officers .msl-imagenav-description {float:left;display:block;width:100%;color:#000;font:700 1em 'LeagueSpartan',tahoma}
#officers .msl-imagenav-title {float:left;display:block;width:100%;color:#000;background:#FFF}

@media all and (min-width:480px) {
#officers .msl-imagenav-description {font-size:1.3em}
}

#officers .msl-imagenav-image {margin:0 auto;border-radius: 50% 50% 50% 0;}
.scroller-c,.ents-c {margin-bottom:20px;}

@media all and (min-width:1200px) {
.scroller-c,.ents-c {margin-bottom:0}
}




/*Explore*/
#explore ul {display:block;padding:0;margin:0}
#explore ul li {float:left;width:100%;list-style-type:none;border:10px solid #fff;position:relative}

@media all and (min-width:798px) {
#explore ul li:after {font-size:3em;top:10px;display:none}
}

#explore ul li a {
padding:15px;
background:#333;
color:#fff;
width:100%;
display:block;
border-top:10px solid;
border-color:#8dc74c;
position:relative;
transition:.3s;
font:16px 'LeagueSpartan',tahoma
}

#explore ul li a:hover {text-decoration:none}


#explore .msl-imagenav-image {position:absolute;top:10px}
#explore .msl-imagenav-title {margin-top:0;display:block;margin-left:40px;background:none}

@media all and (min-width:768px) {
#explore ul li {width:50%}
#explore ul li a {font-size:25px}
#explore .msl-imagenav-image {position:absolute;top:16px}
}
/*** End of original officers css ***/
@media all and (min-width:768px) {
    #explore ul li {width:100%}
}


.sabbImage {
  position: relative;

    width: 100%;
    padding-bottom : 100%; 
    margin:1.66%;
    background-position:center center!important;
    background-repeat:no-repeat!important;
    background-size:contain!important; 
    border-radius: 50% 50% 50% 0;
}

.msl-imagenav-image {
  position: absolute;
  width: 100%;
  height: 100%;
}

.sabbs_description{
    text-align:left;
}
@media (max-width:399px){
#officers > ul > li:last-child {
    margin-left: 25%;
}
}
@media (max-width:768px){
.bSection > h3 {margin-top:50px;}
}

.hide {
   position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;
}
.accordion .card .collapse{background:transparent!important;}
.mb-0 > button{text-decoration:none;color:#000;font-family: 'Lato';}


.announcementsWrapper {
  padding: 10px;
  background: white;
  box-sizing: border-box;
  resize: horizontal;
  overflow: auto;
  max-width: 100%;
}

.announcementsWrapper > div {
  width: 100%;
  padding-bottom: 30%;
  color:white;
}
.annText{    margin-left: 15%;
    padding-top: 15%; font-family:'LeagueSpartan'}   
    
.msl-morelink{
            border: 2px solid white;
    padding: 0.5%;
    color: white!important;
    text-decoration: none!important;
    margin-left: 5px;
    padding-top: 1%;
        display: block;
    width: 30%;
}

p.leader{
        width: 60%;
    float: right;
    margin-right: 5%;
    text-align:left;
        font-size: 1.5vw;

}