/* ====================== Mobile and Up ========================== */
.bg-grey {
	background-color: #efefef;
}
/* Department CSS Document */
/*For mobile first adaptive design place styles for mobile and up in the mobile and up area.
Place styles for tablet and up inside the media query in the tablet and up area.
Place styles for desktop only inside the media query in the desktop only area.

For questions or media query training contact Web Development Services.
*/
/* ====================== Mobile and Up ========================== */
/*hiding nav*/
#deptNav .deptNavWrap {
	display: none;
}

/*--------------------------------GENERAL CSS------------------------------------*/
.padding-bottom-100 {
	padding-bottom: 100px;
}
.padding-top-100 {
	padding-top: 100px;
}
.padding-bottom-change {
	padding-bottom: 50px;
}
.padding-top-change {
	padding-top: 50px;
}
.padding-change {
	padding-left: 25px;
}

.bg-stripes {
	background-image: url(/_common/marketing/images/bg-lines.svg);
}

p.about-program {
	font-weight: 500;
	font-family: "Raleway";
    font-size: 16px;
}

/*career cards*/
.career-card {
    color: #fff !important;
	border-radius: 5px;
}
.career-card.bg-lime {
	color: #275D38 !important;
}
.career-card .card-content-header {
	padding: 5px 0;
    display: flex;
    align-items: center;
}
.career-card .card-content-header p {
    margin: 0;
}
.career-card .card-content-header img {
    width: 50px;
    margin-right: 10px;
}
.career-card .card-content-header h3 {
    color: #fff;
	font-size: 21px;
	margin: 0;
    font-weight: 600;
	font-family: 'Rajdhani', sans-serif;
    text-transform: uppercase;
}
.career-card .fa-ul {
    color: #fff;
    font-weight: bold;
    letter-spacing: unset;
    font-size: 16px;
    margin-top: 10px;
    margin-left: 2.5em !important;
}
.career-card li {
    margin: 10px 0 5px !important;
}
.career-card .fa-ul .fa-li {
    font-size: 16px;
    top: 0;
	color: #fff !important;
}
.career-card.bg-lime .fa-li, .career-card.bg-lime .card-content-header h3, .career-card.bg-lime li {
    color: #275D38 !important;
}

/*------------------------------ADMISSION REQUIREMENTS SECTION-----------------------------------*/
/*LIST CSS*/
ul.arrow {
    color: #275D38;
    font-size: 18px;
    font-weight: bold;
    margin-top: 30px;
	margin-left: 2.7em;
	padding-left: 0;
	letter-spacing: 1.4px;
}
.fa-ul {
    list-style-type: none;
    margin-left: 2.5em;
    padding-left: 0;
    color: #275D38;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1.68px;
    margin-top: 50px;
}
.fa-ul>li {
	    margin-bottom: 30px;
}
.fa-li {
    left: -55px;
    position: absolute;
    text-align: center;
    width: 2em;
    line-height: inherit;
	    color: #75B233;
    font-size: 30px;
}
ul.arrow>li:before {
    color: #75B233;
	position: absolute;
    left: -2em;
    width: 2em;
	font-size: 24px;
}
ul.arrow li, ul.square-check li {
    margin: 0px 0px 20px 0px;
}


.admission-requirements-photo p {
    position: relative;
}
.admission-requirements-photo p img {
    height: auto;
    width: 90%;
}
.admission-requirements-photo p:after {
    position: absolute;
    background: url(/_common/marketing/images/chevrons-up-repeat.svg) bottom no-repeat;
    background-size: 300px;
    right: 0;
    bottom: -30px;
    width: 300px;
    height: 200px;
    z-index: -1;
    content: "";
}
/*--------------------------ADMISSION PROCESS SECTION------------------------------*/
.admission-process-section h2 {
    position: relative;
}
.admission-process-section h2::after {
    background: url(/_common/marketing/images/arrows-right-repeat.png) no-repeat;
    background-size: 800px;
    position: absolute;
    bottom: -50px;
    left: 0;
    width: 100%;
    height: 50%;
    content: "";
}

.admission-process-photo p {
    position: relative;
	text-align: right;
}
.admission-process-photo p img {
    width: 90%;
    height: auto;
}
.admission-process-photo p:before {
    position: absolute;
    background: url(/_common/marketing/images/light-green-circle.svg) bottom no-repeat;
    background-size: 150px;
    left: -5px;
    bottom: -50px;
    width: 150px;
    height: 150px;
    content: "";
}
.admission-process-photo p:after {
	position: absolute;
    background: url(/_common/marketing/images/square-small.svg) bottom no-repeat;
    background-size: 60px;
    left: 100px;
    bottom: -30px;
    width: 60px;
    height: 60px;
    content: "";
}
/*-------------------------------------------ENROLLMENT DEADLINES SECTION----------------------------------------------------*/
.dates-separator-right:after {
    content: "";
    background-color: #275D38;
    width: 260px;
    height: 2px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 0;
}
.dates-separator-left {
    padding-top: 20px;
}
.dates-separator-right {
    padding-bottom: 40px;
}
.enrollment-heading {
    margin-bottom: 40px;
}
.enrollment-date {
    font-size: 36px;
}
.semester-heading {
    font-weight: 800;
    margin-top: 10px;
}


/*------------------------------------GRAPHICS STYLING---------------------------------------------------*/
/*program info top section*/
.program-media {
	position: relative;
}
.program-media::before {
    position: absolute;
    background: url(/_common/marketing/images/dark-green-circle.svg) no-repeat;
    background-size: 70%;
    left: -15px;
    top: 130px;
    width: 50%;
    height: 100%;
    z-index: -1;
    content: "";
}
.program-media::after {
	background: url(/_common/marketing/images/x-square.svg) no-repeat;
	background-size: 70%;
    position: absolute;
    right: -80px;
    bottom: 20px;
    width: 50%;
    height: 100%;
    z-index: -1;
    content: "";
}


/*BUTTONS AND LINKS*/
.apply-button {
    border-radius: 8px;
    font-size: 34px;
    padding: 15px 20px 15px 40px;
    text-transform: unset;
    font-weight: bold;
}
.apply-button span {
    font-size: 24px;
    margin-left: 40px;
}
.margin-top-20 {
	margin-top: 20px !important;
}


/*--------------------------HEADING STYLES---------------------------------*/
.shadow-heading {
    text-shadow: 0px 3px 6px #00000029;
}

.bold-heading {
    font-family: 'Montserrat', sans-serif;
    font-size: 38px;
	color: #275D38;
    font-weight: 800;
    margin-bottom: 0px;
    letter-spacing: 0px;
}

.small-bold-heading {
	font-family: 'Montserrat', sans-serif;
    margin-top: 10px;
    font-weight: 700;
	color: #00843d;
    text-transform: uppercase;
	font-size: 28px;
	letter-spacing: 0px;
}

.light-heading {
    font-size: 24px;
    color: #000;
    font-weight: 600;
	margin-top: 10px;
}

/*this needs to go after light-heading to match design, overrides black color on headings*/
.light-green-heading {
    color: #000;
    font-size: 30px;
	font-weight: 600;
	margin-top: 10px;
}
.program-name-heading {
    margin-top: 0px;
}


/*---------------------------------------------------APPLY SECTION-------------------------------------------------------*/
.apply-blurb-left {
	position: relative;
}
.apply-blurb-left::before {
    position: absolute;
    background: url(/_common/marketing/images/ladder-left.svg) no-repeat;
    background-size: 70px;
    left: 20px;
    top: -50px;
    width: 200px;
    height: 200px;
    content: "";
}

.apply-blurb-right {
	position: relative;
}
.apply-blurb-right::after {
	background: url(/_common/marketing/images/ladder-right.svg) no-repeat;
    background-size: 70px;
    position: absolute;
    right: -110px;
    bottom: -200px;
    width: 200px;
    height: 200px;
    content: "";
}
.bg-stripes .apply {
    padding-left: 25px;
}

/*stackable cards css*/
.new-stackable .stackable-card {
    padding: 30px;
    height: 250px;
    width: 350px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	text-align: center;
	font-weight: bold;
	background-color: #275D38;
    color: #fff;
}

.new-stackable .stackable-card.finish h3, .new-stackable .stackable-card.middle h3 {
	margin-top: 30px;
}

.new-stackable .stackable-card:before {
    content: "";
    position: absolute;
    border: 100px solid;
    border-color: #fff transparent transparent transparent;
    border-width: 50px 175px 0 175px;
    top: 9px;
    width: 350px;
    z-index: 0;
}
.new-stackable .stackable-card.start:before {
	border: none;
}
.new-stackable .stackable-card:after {
    content: "";
    position: absolute;
    border: 100px solid;
    border-color: #275D38 transparent transparent transparent;
    border-width: 50px 175px 0 175px;
    width: 350px;
    bottom: -39px;
    z-index: 3;
}
.new-stackable .stackable-card.start:after {
	border-color: #275D38 transparent transparent transparent;
}
.new-stackable .stackable-card.middle:after {
	border-color: #275D38 transparent transparent transparent;
}
.new-stackable .stackable-card.finish:after {
	border: none;
}

.new-stackable h3 {
	text-transform: uppercase;
	font-weight: 600;
    font-family: 'Rajdhani', sans-serif;
}
.new-stackable .middle-1.stackable-card {
    height: 300px;
}
.new-stackable .middle-1.stackable-card h3 {
    margin-top: 70px;
}

/*End mobile and up styles*/
/* ====================== Tablet and Up (Overrides Mobile Styles) ========================== */
@media only screen and (min-width: 768px) {
	/*NEW STACKABLE*/
	.new-stackable .stackable-card.middle-1:after, .new-stackable .stackable-card.middle-2:before {
		content: unset;
	}
	.new-stackable .stackable-card {
    	padding: 20px 50px !important;
		height: 300px !important;
		width: 300px;
	}
	.new-stackable .stackable-card:after {
		border-color: transparent #275D38 transparent transparent;
        border-width: 100px 50px 100px 0;
        transform: rotate(180deg);
        right: -40px;
        bottom: 10px;
        width: unset;
        z-index: 5;
	}
	.new-stackable .stackable-card.start:after {
		border-color: transparent #275D38 transparent transparent;
	}
	.new-stackable .stackable-card:before {
		border-color: transparent #fff transparent transparent;
        border-width: 100px 50px 100px 0;
        transform: rotate(180deg);
        left: 9px;
        bottom: 10px;
        z-index: 1;
		width: unset;
        right: unset;
        top: unset;
	}
	.new-stackable .stackable-card:before {
		border-color: transparent #fff transparent transparent;
	}
	.new-stackable .stackable-card.finish:before {
		border-color: transparent #fff transparent transparent;
        border-width: 100px 50px 100px 0;
        transform: rotate(180deg);
        left: 9px;
        bottom: 10px;
        z-index: 1;
		width: unset;
        right: unset;
        top: unset;
	}
	.new-stackable .stackable-card.start, .new-stackable .stackable-card.finish {
		margin-right: 0;
	}
	.new-stackable .stackable-card.middle-1 {
		margin-left: 0;
	}
	.new-stackable .stackable-card h3 {
		margin-top: 0 !important;
	}
	
	/*--------------------------ENROLLMENT DEADLINES SECTION------------------------------*/
	.enrollment-date {
		font-size: 44px;
	}
	.semester-heading {
		font-size: 26px;
	}
	.dates-separator-right {
		padding-bottom: 0;
	}
	.dates-separator-left {
		padding-top: 0;
	}
	.dates-separator-right:after {
		width: 2px;
		height: 110px;
		left: unset;
		margin: unset;
	}
	/*------------------------------------ADMISSION REQUIREMENTS SECTION---------------------------------------------------*/
	.admission-requirements-photo p img, .admission-process-photo p img {
		height: auto;
		width: 90%;
	}
	.admission-requirements-photo p:after {
		background-size: 300px;
		right: 0;
		bottom: -30px;
		width: 300px;
		height: 200px;
	}
	
	/*------------------------------GENERAL CSS-----------------------------------*/
	.padding-bottom-change {
		padding-bottom: 0px;
	}
	.light-heading {
		font-size: 28px;
	}
		
	/*APPLY BUTTON*/
	.bg-stripes .apply-button {
		margin-top: 60px;
	}
	.apply-button-top {
		margin-top: 20px;
	}
	
		/*------------------------------------ADMISSION PROCESS SECTION---------------------------------------------------*/
	/*LIST ICON CSS*/
	.fa-li {
	    top: -0.2em;
	}
	.admission-process-photo p:before {
		position: absolute;
		background-position: bottom;
		background-size: 100px;
		left: -30px;
		bottom: -40px;
		width: 160px;
		height: 160px;
		content: "";
	}
	.admission-process-photo p:after {
		background-size: 30px;
		left: 60px;
		bottom: -10px;
		width: 60px;
		height: 60px;
	}
	.admission-process-section h2::after {
		background-size: 1000px;
		left: 0;
		right: unset;
		bottom: -50px;
		width: 600px;
		height: 100%;
		z-index: -1;
	}
	
	
	
}/*end media query*/
/*End tablet and up styles*/
/* ====================== Landscape Tablet and Up (Overrides Mobile Styles) ========================== */
@media only screen and (min-width: 992px) {
		/*stackable cards css*/
	 .new-stackable .transform-grid .col-md-4 {
        width: 50%;
    }
	/*stackable cards css*/
	.new-stackable .col-md-3 {
        width: 50%;
    }
	/*------------------------------------APPLY NOW SECTION---------------------------------------------------*/
	.program-button {
		margin: 40px 0 0 60px;
	}
	
	/*------------------------------GENERAL CSS-----------------------------------*/
	.padding-change {
		padding-left: 60px;
	}
	.bold-heading {
    	font-size: 44px;
	}
	
	/*career cards*/
	.career-card .card-content-header img {
		margin-right: 40px;
	}
	
	

	
}/*end media query*/
/*End landscape tablet and up styles*/
/* ====================== Desktop Only (Overrides Mobile and Tablet Styles) ========================== */
@media only screen and (min-width: 1200px) {
/*stackable cards css*/
	 .new-stackable .transform-grid .col-md-4 {
        width: 33.3%;
    }
	.new-stackable .stackable-card {
		width: 100%;
		height: 260px !important;
	}
	.new-stackable .stackable-card:after, .new-stackable .stackable-card:before {
		        border-width: 135px 51px 125px 0 !important;
	}
	.new-stackable .stackable-card.middle-1:after {
		content: "";
		border-color: transparent #275D38 transparent transparent;
	}
	.new-stackable .stackable-card.middle-2:before {
		content: "";
		border-color: transparent #fff transparent transparent;
	}
	.new-stackable .stackable-card.finish:before {
		content: "";
	}
	
	/*stackable cards css*/
	.new-stackable .col-md-3 {
        width: 25%;
    }
	/*--------------------------PROGRAM INFO SECTION-------------------------*/
	.program-media::before {
		background-size: 180px;
		left: -40px;
		top: 200px;
		width: 300px;
		height: 300px;
	}
	.program-media::after {
		background-size: 180px;
		right: -150px;
		bottom: 70px;
		width: 300px;
		height: 300px;
	}
	
	/*------------------------------GENERAL CSS-----------------------------------*/
	.padding-bottom-change {
		padding-bottom: 20px;
	}
	.padding-top-change {
		padding-top: 100px;
	}
	.apply-blurb-left::before {
		left: 10px;
	}

	
	/*--------------------------APPLY NOW SECTION-------------------------*/
	.program-button {
		margin: 40px 40px 0 60px;
	}
	/*--------------------------ENROLLMENT DEADLINES SECTION------------------------------*/
	.enrollment-heading {
		text-align: center;
	}
	
	.enrollment-info {
		display: flex;
		align-items: center;
	}
	
	.enrollment-info div:first-child:after {
		content: "";
		background-color: #275D38;
		width: 2px;
		height: 160px;
		position: absolute;
		right: 0;
		top: 0;
		margin: 0;
		bottom: 0;
	}
	.dates-separator-right:after {
		height: 160px;
		bottom: -20px;
	}
	
	/*--------------------------ADMISSION REQUIREMENTS SECTION------------------------------*/
	ul.arrow {
		padding-left: 15px;
	}
	.fa-ul {
		margin-left: 60px !important;
	}
	.fa-ul>li {
		margin-bottom: 20px;
	}
	
	.admission-requirements-photo p:after {
		background-position: bottom right;
		background-size: 450px;
		right: 0;
		bottom: -50px;
		width: 450px;
		height: 300px;
	}
	
	/*--------------------------ADMISSION PROCESS SECTION------------------------------*/
	.admission-process-photo p:after {
		background-size: 60px;
		left: 100px;
		width: 60px;
		height: 60px;
	}
	.admission-process-photo p:before {
		background-size: 160px;
		left: -20px;
		bottom: -40px;
		width: 160px;
		height: 160px;
	}
	.admission-process-section h2::after {
		background-size: 600px;
		left: unset;
		right: -200px;
		bottom: -20px;
		width: 400px;
		height: 100%;
	}
	
}/*end media query*/