/* 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 ========================== */

#globalHeader a, #globalFooter a, #globalHeader a:hover, #globalFooter a:hover, .card-picture-button,  .card-advisor a, .resource-links a, .social-links a,  a.backToTop {
	text-decoration: none;
	border-bottom: none;
}

.two-column {
	column-count: 2;
}

a.button:hover, a.button:focus {
	border-bottom-style: solid;
	border-width: 2px;
}
a {
	border-bottom: 1px dotted var(--color-uvu-primary);
	color: #00843D;
}
a:hover, a:focus {
	border-bottom: 1px solid var(--color-uvu-priamry);
}
a.text-white, a.text-white:hover, a.text-white:focus {
	border-color: white;
	color: white;
}
.jumbo header a.button-shadow {
    color: #275d38;
    text-decoration: none;
}

.jumbo header a.button-shadow:hover {
    color: #fff;
    text-decoration: none;
}

a:hover .on-hover{
	background-color:#275d38;
	color:#fff;
	}

.accordion:not(.accordion-unstyled):hover{
    background-color:#275d38;
	color:#fff;
}
	
	.details a:hover{
		color: #fff;
	}

#ogCountdown uvu-countdown-timer {
    --countdown-ticker-frame-size: 200px;
    --countdown-text-indicator-size: 60px;
    --countdown-circle-gutter-width: 20px;
}
uvu-countdown-timer [data-countdown-frame] {
--countdown-circle-text-indicator-color: var(--countdown-circle-progress-color);
}
uvu-countdown-timer [data-countdown-frame="days"] {
    --countdown-circle-progress-color: #497E6E;
}
uvu-countdown-timer [data-countdown-frame="hours"] {
    --countdown-circle-progress-color: #54697B;
}
uvu-countdown-timer [data-countdown-frame="minutes"] {
    --countdown-circle-progress-color: #697886;
}
uvu-countdown-timer [data-countdown-frame="seconds"] {
    --countdown-circle-progress-color: #81623E;
}
.countdown-title a:hover {
    text-decoration: underline;
}
.countdown-title {
    display: block;
    text-decoration: none;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #197d5e;
    line-height: 1.5em;
	margin-bottom: 20px;
}


/* Grad Fest Pricing Page */
div.pricing-header {

}
div.pricing-header-right {
	margin-top: 30px;
}

div.space-between {
	justify-content: space-between;
}
/* End Grad Fest */


.bg-step-one {
	background-image: url("/graduation/images/graduation-home-page/step1_apply.jpg");
		padding-top:300px;	
	padding-bottom: 0px;
	background-position: center top;
    background-size: contain;
	background-repeat-y: no-repeat;
    overflow-y: hidden;

}
.bg-step-two {
	background-image: url("/graduation/images/graduation-home-page/step2_eventinfo.jpg"); 
	padding-top:300px;	
	padding-bottom: 0px;
	background-position: right top;
    background-size: contain;
	background-repeat-y: no-repeat;
    overflow-y: hidden;
}
.bg-step-three {
	background-image: url("/graduation/images/graduation-home-page/step3_capgown.jpg");
	padding-top:300px;	
	padding-bottom: 0px;
	background-position: center top;
    background-size: contain;
	background-repeat-y: no-repeat;
    overflow-y: hidden;
}
.bg-step-four {
	background-image: url("/graduation/images/graduation-home-page/step4_aftergraduation.jpg");
	padding-top:300px;
	padding-bottom: 0px;
	background-position: right top;
    background-size: contain;
	background-repeat-y: no-repeat;
    overflow-y: hidden;
}

.convocation {
	background-image: url("/graduation/images/ceremony/convocation.png");
	padding-top:200px;
	padding-bottom: 0px;
	background-position: right top;
    background-size: contain;
	background-repeat-y: no-repeat;
    overflow-y: hidden;
}

.commencement {
	background-image: url("/graduation/images/ceremony/commencement.png");
	padding-top:200px;
	padding-bottom: 0px;
	background-position: right top;
    background-size: contain;
	background-repeat-y: no-repeat;
    overflow-y: hidden;
}

.president-reception {
	background-image: url("/graduation/images/ceremony/president_reception.png");
	padding-top:200px;
	padding-bottom: 0px;
	background-position: right top;
    background-size: contain;
	background-repeat-y: no-repeat;
    overflow-y: hidden;
}

.wsb {
	background-image: url("/graduation/images/green.jpg");
	padding:150px 20px 20px;
    background-size: cover;
	background-repeat-y: no-repeat;
    overflow-y: hidden;
}

.humanities {
	background-image: url("/graduation/images/black.jpg");
	padding:150px 20px 20px;
    background-size: cover;
	background-repeat-y: no-repeat;
    overflow-y: hidden;
}

.soa {
	background-image: url("/graduation/images/green.jpg");
	padding:150px 20px 20px;
    background-size: cover;
	background-repeat-y: no-repeat;
    overflow-y: hidden;
}

.chps {
	background-image: url("/graduation/images/black.jpg");
	padding:150px 20px 20px;
    background-size: cover;
	background-repeat-y: no-repeat;
    overflow-y: hidden;
}

.cos {
	background-image: url("/graduation/images/green.jpg");
	padding:150px 20px 20px;
    background-size: cover;
	background-repeat-y: no-repeat;
    overflow-y: hidden;
}

.cet {
	background-image: url("/graduation/images/black.jpg");
	padding:150px 20px 20px;
    background-size: cover;
	background-repeat-y: no-repeat;
    overflow-y: hidden;
}

.education {
	background-image: url("/graduation/images/green.jpg");
	padding:150px 20px 20px;
    background-size: cover;
	background-repeat-y: no-repeat;
    overflow-y: hidden;
}

.validictorians {
	background-image: url("/graduation/images/black.jpg");
	padding:150px 20px 20px;
    background-size: cover;
	background-repeat-y: no-repeat;
    overflow-y: hidden;
}

.countdown .time li .circle {
    position: relative;
    width: 60px !important;
    height: 60px !important;
    margin: 5px auto;
}
.countdown .time li .circle {
    position: relative;
    width: 60px !important;
    height: 60px !important;
    margin: 5px auto;
}

.countdown .countdown-title a {
    text-align: left !important;
    padding-bottom: 20px !important;
}

.countdown .time li .circle > div {
    width: 100%;
    height: 100%;
    font-size: 22px !important;
    font-weight: normal;
    line-height: 1.9 !important;
    border-width: 8px !important;
    border-style: solid;
    border-radius: 50%;
}


.countdown .time li {

    font-size: 16px !important;
    text-transform: uppercase !important;
}

/*End mobile and up styles*/
/* ====================== Tablet and Up (Overrides Mobile Styles) ========================== */
@media only screen and (min-width: 768px) {


	
	underlinetext{
		text-decoration:underline;
	}
	
	.fullWidthTable{
		width=100%;
	}
	
	
	.flex-container{
		display: flex;
		justify-content: center;
	}
	
	/* Grad Fest Pricing Page */
	div.pricing-header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	div.pricing-header-right {
		text-align: right;
	}
	div.pricing-header hr {
		margin-right: 0px;
		width: 40%;
	}
	/* End Grad Fest */
	
	.partial-right {
    background-color: #275D38;
    /* background-repeat: no-repeat; */
    -attachment: fixed;
    background: linear-gradient(to right, #fff 80%, #fff 50%);
    /* background-position: 10% 50%; */
}
	.partial-left {
    background-color: #000;
    /* background-repeat: no-repeat; */
    -attachment: fixed;
    background: linear-gradient(to left, #fff 80%, #fff 50%);
    /* background-position: 10% 50%; */
}
	
}

/*end media query*/
/*End tablet and up styles*/
/* ====================== Landscape Tablet and Up (Overrides Mobile Styles) ========================== */
@media only screen and (min-width: 992px) {
	.countdown-title {
	text-align: left;
}
	
	
	.header-styles{
		font: normal normal bold 80px/100px Rajdhani;
		text-shadow: 0px 6px 6px #000000;
	}
		.bg-step-one {
    background-color: #fff
    /* background-repeat: no-repeat; */
    -attachment: fixed;
    background-image: url("/graduation/images/graduation-home-page/step1_apply.jpg"), linear-gradient(to right, #275D38 80%, #fff 50%);
		padding:40px 0px;
			background-position: right top;
    background-size: cover;
    /* background-position: 10% 50%; */
}
	.bg-step-two {
    background-color: #fff
    /* background-repeat: no-repeat; */
    -attachment: fixed;
    background-image: url("/graduation/images/graduation-home-page/step2_eventinfo.jpg"), linear-gradient(to right, #275D38 80%, #fff 50%);
    /* background-position: 10% 50%; */
		padding:40px 0px;	
		background-position: right top;
    background-size: cover;
}
	.bg-step-three {
    background-color: #fff
    /* background-repeat: no-repeat; */
    -attachment: fixed;
    background-image: url("/graduation/images/graduation-home-page/step3_capgown.jpg"), linear-gradient(to right, #275D38 80%, #fff 50%);
    /* background-position: 10% 50%; */
		padding:40px 0px;	
		background-position: right top;
    background-size: cover;
}
	.bg-step-four {
    background-color: #fff
    /* background-repeat: no-repeat; */
    -attachment: fixed;
    background-image: url("/graduation/images/graduation-home-page/step4_aftergraduation.jpg"), linear-gradient(to right, #275D38 80%, #fff 50%);
    /* background-position: 10% 50%; */
		padding:40px 0px;	
		background-position: right top;
    background-size: cover;
}
	.convocation {
	background-image: url("/graduation/images/ceremony/convocation.png");
	padding:40px 0px;	
		background-position: right top;
    background-size: cover;
		 background-color: #fff
    /* background-repeat: no-repeat; */
    -attachment: fixed;
}
	.commencement {
	background-image: url("/graduation/images/ceremony/commencement.png");
	padding:40px 0px;	
		background-position: right top;
    background-size: cover;
		 background-color: #fff
    /* background-repeat: no-repeat; */
    -attachment: fixed;
}
	.president-reception {
	background-image: url("/graduation/images/ceremony/president_reception.png");
	padding:40px 0px;	
		background-position: right top;
    background-size: cover;
		 background-color: #fff
    /* background-repeat: no-repeat; */
    -attachment: fixed;
}
	.countdown .time li .circle {
    position: relative;
    width: 200px !important;
    height: 200px !important;
    margin: 5px auto;
}
.countdown .time li .circle {
    position: relative;
    width: 200px !important;
    height: 200px !important;
    margin: 5px auto;
}

.countdown .countdown-title a {
    text-align: left !important;
    padding-bottom: 20px !important;
}

.countdown .time li .circle > div {
    width: 100%;
    height: 100%;
    font-size: 60px !important;
    font-weight: normal;
    line-height: 2.4 !important;
    border-width: 20px !important;
    border-style: solid;
    border-radius: 50%;
}

.countdown .time li {

    font-size: 22px !important;
    text-transform: uppercase !important;
}
	
}

/*end media query*/
/*End landscape tablet and up styles*/
/* ====================== Desktop Only (Overrides Mobile and Tablet Styles) ========================== */
@media only screen and (min-width: 1200px) {
	.bg-step-one {
    background-color: #fff
    /* background-repeat: no-repeat; */
    -attachment: fixed;
    background-image: url("/graduation/images/graduation-home-page/step1_apply.jpg"), linear-gradient(to right, #275D38 100%, #fff 50%);

    /* background-position: 10% 50%; */
}
	.bg-step-two {
    background-color: #fff
    /* background-repeat: no-repeat; */
    -attachment: fixed;
    background-image: url("/graduation/images/graduation-home-page/step2_eventinfo.jpg"), linear-gradient(to right, #275D38 100%, #fff 50%);
	
    /* background-position: 10% 50%; */
}
	.bg-step-three {
    background-color: #fff
    /* background-repeat: no-repeat; */
    -attachment: fixed;
    background-image: url("/graduation/images/graduation-home-page/step3_capgown.jpg"), linear-gradient(to right, #275D38 100%, #fff 50%);

    /* background-position: 10% 50%; */
}
	.bg-step-four {
    background-color: #fff
    /* background-repeat: no-repeat; */
    -attachment: fixed;
    background-image: url("/graduation/images/graduation-home-page/step4_aftergraduation.jpg"), linear-gradient(to right, #275D38 100%, #fff 50%);
	
    /* background-position: 10% 50%; */
}
	.convocation {
	background-image: url("/graduation/images/ceremony/convocation.png");
	 background-color: #fff
    /* background-repeat: no-repeat; */
    -attachment: fixed;
}
	.commencement {
	background-image: url("/graduation/images/ceremony/commencement.png");
	background-color: #fff
    /* background-repeat: no-repeat; */
    -attachment: fixed;
}
	.president-reception {
	background-image: url("/graduation/images/ceremony/president_reception.png");
	background-color: #fff
    /* background-repeat: no-repeat; */
    -attachment: fixed;
}
	
}

/*end media query*/
/*End desktop only styles*/
/*END OF DOCUMENT*/