/*==========================================
/Mobile Navigation
==========================================*/

/*At a max-width of 1024px the mobile navigation is displayed and the desktop navigation is hidden*/

  
 
  


  
/*====================================================================================
/Normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
====================================================================================*/



/*==========================================
/Default Settings
==========================================*/

/*Sets default values for all html elements*/
:root {
    border: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
	/*All other instances of font-size are based on this default size and use (rem)*/
    font-size: 16px;
    margin: 0;
    padding: 0;
    text-align: left;

  
/*==========================================
/Brand Color Palette
==========================================*/
  	/*Primary color*/
    --primary-color: #000;
  	/*Accent color*/
    --accent-color-blue: #fff;
  	/*Neutral colors*/
    --neutral-color-dark-grey: #000;
  	--neutral-color-medium-grey: #242424;
  	--neutral-color-medium-light-grey: #616161;
    --neutral-color-grey: #f2f2f2; /*#efefef*/
    --neutral-color-off-white: #fff;
    --neutral-color-white: #ffffff;
}

/*Sets default values for the body element*/





/*==========================================
/Adjustments
==========================================*/

/*Can be added to an <img> element to center the image*/
.image-align-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.image-align-left {
    display: block;
    margin-left: 0 !important;
    margin-right: auto !important;
}
  
p.indent, p > span.indent {
  	padding-left: 10px;
}
  
/*==========================================
/Blockquote
==========================================*/

/*Sets the default blockquote style*/
blockquote {
    border-left: 4px solid var(--accent-color-blue);
    color: var(--primary-color);
    font-family: SouthernCdSb;
    font-size: 1.75rem;
    line-height: 1.5;
    margin: 20px 0;
    padding: 0 10px;
}

blockquote > p {
  	margin-bottom: 0 !important;
}

@media screen and (max-width: 1199px) {
    blockquote {
        font-size: 1.3125rem;
        margin: 20px 0;
    }
}

@media screen and (max-width: 768px) {
    blockquote {
        font-size: 1.125rem;
        margin: 20px 0;
    }
}

/*==========================================
/Breadcrumbs
==========================================*/

/*Optional. Used within the .page-title-header-container to display breadcrumbs*/
.breadcrumb-container {
    bottom: -17px;
    display: inline-block;
    padding: 17px 20px;
    position: relative;
    width: auto;
}

.breadcrumbs a, .breadcrumbs strong {
    font-family: WorkSansRg !important;
    font-size: 1rem;
    line-height: 1rem;
    padding: 5px;
  	text-decoration: none !important;
}

.breadcrumbs strong {
    color: var(--neutral-color-dark-grey);
    font-family: WorkSansBd !important;
}

@media screen and (max-width: 1199px){
  	.breadcrumb-container {
        bottom: 0;
    }
  
    .breadcrumbs a {
        padding: 10px 5px;
    }
}

@media screen and (max-width: 768px){
    .breadcrumb-container {
        bottom: 0;
        padding: 10px;
    }
    
    .breadcrumbs a, .breadcrumbs strong {
        font-size: .75rem;
    }
}

/*==========================================
/Buttons
==========================================*/

/*Sets the default button style*/
button {
    border: none;
    border-radius: 4px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2);
    display: block;
  	font-family: BarlowSb;
    font-size: 1.5rem;
    margin: 10px 0;
  	padding: 0;
  	width: 300px;
}

button > a {
    box-sizing: border-box;
  	-webkit-box-sizing: border-box;
    color: inherit;
    display: block;
    margin: 0 auto;
    padding: 12px 10px;
    text-decoration: none;
}
  
a.button {
  	box-sizing: border-box;
  	-webkit-box-sizing: border-box;
    border-radius: 4px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2);
    display: block;
  	font-family: BarlowSb;
    font-size: 1.5rem;
    margin: 10px 0;
  	max-width: 300px;
  	padding: 12px 10px;
  	text-align: center;
  	text-decoration: none !important;
  	width: 100%
}
  
a.button:hover {
  	text-decoration: none;
}

/*Can be added to a <button> element to make the button larger*/
.button-large {
  	max-width: 400px !important;
  	width:100% !important;
}

/*Can be added to a <button> element to make the button smaller*/
.button-small, a.button-small {
    font-size: 1.1875rem;
    margin: 10px 0;
    max-width: 140px;
    width: 60%;
}

.button-small > a, a.button-small{
    padding: 7px 0;
}

.button-blue, .button-blue-2 {
    background-color: var(--accent-color-blue);
    color: var(--primary-color);
}

.button-dark {
    background-color: var(--primary-color);
    color: var(--neutral-color-white);
}

.button-white {
    background-color: var(--neutral-color-white);
    color: var(--primary-color);
}
  
.button-no-style {
	background-color: transparent;
  	border-radius: none;
    box-shadow: none;
  	color: var(--primary-color);
}

.button-blue:hover {
    background-color: var(--primary-color);
    border: 2px solid var(--accent-color-blue);
    color: var(--neutral-color-white);
}

.button-blue-2:hover {
    background-color: var(--neutral-color-white);
    border: 2px solid var(--accent-color-blue);
    color: var(--primary-color);
}

.button-dark:hover {
    background-color: var(--neutral-color-white);
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
}

.button-white:hover {
    background-color: var(--primary-color);
    border: 2px solid var(--neutral-color-white);
    color: var(--neutral-color-white);
}

.button-blue-2:hover, .button-blue:hover, .button-dark:hover, .button-white:hover {
    box-shadow: inset 0 0 8px 0 rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: background-color 0.1s ease-in;
}

/*Changes the button background color to transparent*/
.parallax-background-image > .wide-container button:hover, .responsive-background-image > .wide-container button[class*="button-"]:hover {
  	background-color: transparent !important;
}
  
.parallax-background-image > .wide-container .accordion-active, .parallax-background-image > .wide-container button.accordion-button:hover {
    background-color: var(--neutral-color-grey) !important;
}

.button-blue-2:hover > a, .button-blue:hover > a, .button-dark:hover > a, .button-white:hover > a, a.button-blue-2:hover, a.button-blue:hover, a.button-dark:hover, a.button-white:hover {
    padding: 10px;
  	text-decoration: none;
}

.button-small:hover > a, a.button-small:hover{
    padding: 5px 0 !important;
}

.button-col > button, .button-col > a.button {
    display: block;
    margin: 20px auto;
}

/*Sets the default style for a button row with three buttons*/
.button-row {
    text-align: center;
}

.button-row > button, .button-row > a.button {
  	display: inline-block;
    margin: 0 2%;
  	width: 28.33%
}

div.row-container.button-row > div > button, div.row-container.button-row > div > a.button {
  	margin-left: auto;
    margin-right: auto;
  	max-width: 320px;
    width: 100%;
}

.button-row-uncentered > div > button, .button-row-uncentered > div > a.button {
  	margin-left: 0;
}

@media screen and (max-width: 1024px) {
  	button, a.button {
  		box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
  	}
  
    .button-col > button, .button-col > a.button {
        display: block;
        margin: 10px auto;
        max-width: 300px;
        width: 75%;
    }
  	#mobile-give-button {
    	margin-left: auto;
    	margin-right: auto;
      	max-width: 300px;
        width: 75%;
  	}
}

/*Changes the default button style on mobile devices*/
@media screen and (max-width: 768px) {
    button, .button-large, a.button {
        display: block;
        font-size: 1.1875rem;
        margin-left: auto;
        margin-right: auto;
        max-width: 300px;
        width: 75%;
    }
  
  	.button-row > div > button, .button-row > div > a.button {
  		margin: 5px auto;
    }
  
  	.button-row-uncentered > div > button, .button-row-uncentered > div > a.button  {
  		margin: 5px auto;
	}
  
    .button-small {
        font-size: 1rem;
    }
  
    .button-row > button, .button-row > a.button {
        display: block;
        margin: 10px auto;
        width: 75%;
    }
}

/*==========================================
/Columns
==========================================*/

/*Clears floated elements that are after the columns*/
.row-container::after {
    clear: both;
    content: "";
    display: block;
}

/*Can be added with .row-container to vertically center content*/
.row-container.row-vertical-center {
    display: flex;
    align-items: center;
}
  
.flex-row-container {
  	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: 100%;
    padding: 0;
}

/*Sets the default style for all column sizes*/
[class*="col-"] {
    height: auto;
    float: left;
    overflow: hidden;
}
 
  	/*Five column layout*/
    .col-one-fifth {
        width: 18.4%;
        margin-left: auto;
        margin-right: auto;
    }
  
    .col-one-fifth:not(:last-child) {
        margin-right: 2%;
    }
  
  	/*Four column layout*/
    .col-one-fourth {
        width: 23.5%;
        margin-left: auto;
        margin-right: auto;
    }
  
    .col-one-fourth:not(:last-child) {
        margin-right: 2%;
    }
  
  	/*Three column layout*/
  
    .col-one-third {
        width: 32%;
    }
  
    .col-one-third:not(:nth-child(3n)) {
      	margin-left: 0;
        margin-right: 2%;
    }
  
  	.col-two-thirds {
        width: 64%;
        margin-left: 0;
        margin-right: 4%;
    }
  
  	/*Removes the margin of the adjacent .col-one-third element*/
    .col-two-thirds + .col-one-third {
        width: 32%;
        margin-left: auto;
        margin-right: 0;
    }
  	
  	 /*Removes the margin of the adjacent .col-two-thirds element*/
    .col-one-third + .col-two-thirds {
        margin-left: 2%;
        margin-right: 0
    }
  	
  	/*Two column layout*/
    .col-one-half {
        width: 48%;
    }
  
    .col-one-half:not(:last-child) {
        margin-right: 4%;
    }
  
@media screen and (max-width: 1024px) {
    .row-container.mobile-collapse > .col-one-fourth {
      	width: 48%;
  	}
}

@media screen and (max-width: 768px) {
    .row-container.row-vertical-center {
        display: block;
    }
  
    [class*="col-"] {
        width: 100%;
    }
  
  	.row-container.mobile-collapse > .col-one-fourth {
      	width: 48%;
  	}
  
    .col-one-third + .col-two-thirds, .col-two-thirds + .col-one-third {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}
  
/*Collapses multiple column layout to one column on smaller devices*/
@media screen and (max-width: 425px) {
    .row-container.mobile-collapse > .col-one-fourth {
      	width: 100%;
  	}
}

/*==========================================
/Containers
==========================================*/

/*Dark blue background for use with .section-container*/
.dark-background {
    background-color: var(--primary-color);
    color: var(--neutral-color-white) !important;
}

/*Blue gradient background for use with .section-container*/
.gradient-background {
    background: linear-gradient(125deg, #21376d 31%, #004d90 93%);
    color: var(--neutral-color-white) !important;
}

/*Changes the h2 and h3 color to white*/ 
.dark-background h2, .dark-background h3, .gradient-background h2, .gradient-background h3 {
    color: var(--neutral-color-white) !important;
}

/*Light background for use with .section-container*/
.light-background {
    background-color: var(--neutral-color-white);
    color: var(--neutral-color-dark-grey);
}

/*Off-white background for use with .section-container*/
.light-background-off-white {
    background-color: var(--neutral-color-off-white);
    color: var(--neutral-color-dark-grey);
}

/*Changes the h2 and h3 color to the primary blue*/ 
.light-background h2, .light-background h3, .light-background-off-white h2, .light-background-off-white h3 {
    color: var(--primary-color);
}

/*Sets the default style for a large section of content*/
.section-container {
  	color: var(--neutral-color-dark-grey);
    margin: 0;
    padding: 80px 60px;
}

.section-container.light-background-off-white .accordion-button {
  	background-color: var(--neutral-color-white);
}
  
.section-container.light-background-off-white .accordion-button:hover {
  	background-color: var(--neutral-color-grey);
}
  
/*Sets the paragraph width to 75% for .section-container to improve readability*/
@media screen and (min-width: 1200px) {
    .section-container .wide-container > p, .section-container .wide-container > h2, .section-container .wide-container > h3, .section-container .wide-container > blockquote {
        max-width: 75%;
    }
  
    .section-container .wide-container > .accordion-content, .section-container .wide-container > button.accordion-button {
        width: 75% !important;
    }
  
  	.section-container .wide-container > .accordion-content {
        box-sizing: border-box;
      	-webkit-box-sizing: border-box;
    }
}

@media screen and (max-width: 1199px) {
  	/*Sets the paragraph width to 100% in .section-container on smaller screens*/
    .section-container .wide-container > p {
        max-width: 100%;
    }
    .section-container .wide-container > .accordion-content, .section-container .wide-container > button.accordion-button {
        width: 90% !important;
    }
}

/*Optional, can be used to make a block of content stand out*/
.content-container {
    background-color: var(--primary-color);
    border-left: 10px solid var(--accent-color-black);
    color: var(--neutral-color-white) !important;
    margin: 20px 0;
    padding: 20px;
}

/*Changes the h2 and h3 color to white*/ 
.content-container > h2, .content-container > h3 {
    color: var(--neutral-color-white);
}

/*Optional, can be used around a block of text*/
.text-container {
    background-color: var(--neutral-color-grey);
    margin: 0;
    padding: 40px;
}

/*Changes the h2 and h3 color to the primary blue*/ 

/*==========================================
/Footer
==========================================*/

/*Sets the default style for the footer*/

/*==========================================
/Images
==========================================*/

/*Removes the margin that display:inline adds to the <img> element*/
img {
    display: block;
}

/*Sets the default style for a responsive header images*/
img.header-image {
    height: auto;
    margin: 0;
    width: 100%;
}

/*Sets the default style for a respsonive images*/
img.responsive-image {
    height: auto;
  	margin: 10px auto;
  	max-width: fit-content;
    width: 100%;
}

/*Sets the default style for badges/awards*/
img.badge {
    height: auto;
    max-width: 140px;
    width: 95%;
}

/*Used with .section-container to set the default style for a responsive background images*/
.responsive-background-image {
    background-attachment: scroll;
    background-image: url("");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--neutral-color-white);
    height: 100%;
}

/*Used with .section-container to set the default style for parallax background images*/




/*==========================================
/Date & Event Cards
==========================================*/

.event-card h3 {
    color: #000;
}

.date-card {
    border: 1px solid var(--neutral-color-grey);
    max-height: 100px;
    max-width: 100px;
    text-align: center;
    width: 95%;
}

.date-card > .month {
    background-color: #800000;
    color: #fff;
}

.date-card > .month > p {
    line-height: 30px;
    margin: 0 !important;
}

.date-card > .day {
    background-color: #fff;
    height: 70px;
}

.date-card > .day > p {
    color: #000;
    font-size: 2.25rem;
    line-height: 70px;
    margin: 0 !important;
}

.event-date {
    color: #000;
  	font-family: WorkSansLt;
}

@media screen and (max-width: 768px) {
    .row-container.event-card:nth-last-of-type(-n + 2) {
        display: none;
    }
  
    .date-card {
        max-height: 60px;
        max-width: 60px;
    }
  
    .date-card > .month > p {
        font-size: inherit;
        line-height: 20px;
    }
  
    .date-card > .day > p {
        font-size: inherit;
        line-height: 40px;
    }
}

.news-card h3 {
    color: #000;
}

.news-card > div > p {
    display: -webkit-box;
    height: auto;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
  
p#pagination {
	background-color: #800000;
}
  
p#pagination > a {
  	display: inline-block;
  	padding: 10px;
}

p#pagination > a#current {
  	background-color: #800000;
  	color: #fff;
}

@media screen and (max-width: 768px) {
    .news-card > div > img {
        max-width: 50%;
    }
}

/*====================================================================================
/Southern Wesleyan University Fonts
====================================================================================*/



/*==========================================
/Southern font designed by: Josh Mayfield
/Copyright 2022-2023
==========================================*/

/*Condensed bold*/


/*========================================*/

/*Bold*/


/*========================================*/



/*====================================================================================
Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com
License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
Copyright 2022 Fonticons, Inc.
==================================================================================== */


/*========================================*/



/*========================================*/



/*========================================*/


/*====================================================================================
/Scroll Animations
====================================================================================*/