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

.parallax {
	background-attachment: unset;
	margin-top: 0px;
}

.jumbo.parallax, jumbo.fullbleed {
	background-size: cover !important;
}

.eg-logo {
	width: 65%;
	margin: 35px 0px 35px 0px;
	filter: drop-shadow(5px 5px 5px #222);
}

.header-bg {
	background-image: url('/evergreen/images/home/evergreen-long-campaign.png');
}

.jumbo.parallax, jumbo.fullbleed {
    padding: 10px;
	background-size: contain;
}

.hero-content {
display: none;
}

/* ===== Button Styling ===== */
.home-btn-white{
	background: #FFFFFF 0% 0% no-repeat padding-box;
	position:relative;
	box-shadow: 0px 3px 6px #00000029;
	opacity: 1;
	padding: 22px 25px 22px 10px;
	width: 100%;
	margin: 10px 0px;
	text-decoration: underline;
	display:inline-block;
	color:#275D38 !important;
	text-transform:uppercase;
	font: normal normal bold 13px/18px Rajdhani;
	border-radius: 8px;
	font-size: 18px;
}

a.home-btn-white:hover {
    color:#ffffff !important;
	background: #275D38;
}

a.home-btn-uvugreen:hover {
    background: #ffffff !important;
    color: #275d38 !important;
}

.home-btn-uvugreen{
	background: #275D38 0% 0% no-repeat padding-box;
	position:relative;
	box-shadow: 0px 3px 6px #00000029;
	opacity: 1;
	padding: 22px 25px 22px 10px;
	width: 330px;
	margin:10px 0px;
	text-decoration: underline;
	display:inline-block;
	color:#ffffff !important;
	text-transform:uppercase;
	font: normal normal bold 13px/18px Rajdhani;
	border-radius: 8px;
	font-size: 18px;
}

a.home-btn-white:after {
	content: "\f061";
	font-family: "Font Awesome 5 Pro";
	position: absolute;
	right: 10px;
bottom: 22px;
  font-size: 18px;

}

a.home-btn-uvugreen:after {
	content: "\f061";
	font-family: "Font Awesome 5 Pro";
	position: absolute;
	right: 10px;
bottom: 22px;
  font-size: 18px;
	font-weight: normal;
}

.btn-parent{
	display:flex;
	justify-content: start;
	column-gap: 20px;
}

.headerMobile .btn-parent {
  flex-wrap: wrap;
flex-direction: column;
}

.headerMobile{
	display: block;
}

.external-link{
	color:#275D38;
	text-transform: uppercase;
	text-align: left;
	text-decoration: underline;
	font: normal normal bold 16px/21px Rajdhani;
}

a.external-link:before{
	content: "\f08e";
	font-family: "Font Awesome 5 Pro";
	color:#030303;
	padding-right: 10px;
	text-decoration: none;
}

.external-link-white{
	color:#FFFFFF;
	text-transform: uppercase;
	text-align: left;
	text-decoration: underline;
	font: normal normal bold 16px/21px Rajdhani;
}

a.external-link-white:before{
	content: "\f08e";
	font-family: "Font Awesome 5 Pro";
	color:#FFFFFF;
	padding-right: 10px;
	text-decoration: none;
}

.internal-link{
	color:#275D38;
	text-transform: uppercase;
	text-align: left;
	text-decoration: underline;
	font: normal normal bold 16px/21px Rajdhani;
}

a.internal-link:before{
	content: "\f061";
	font-family: "Font Awesome 5 Pro";
	color:#030303;
	padding-right: 10px;
	text-decoration: none;
}

/* ===== End Button Styling ===== */



/* Progress */
.progress {
  background-color: #0d2d1d;
  color: white;
  text-align: center;
  padding: 50px 20px;
}
.progress h2 {
  color: #ffd700;
  font-size: 28px;
}
.progress .date {
  font-style: italic;
}
.progress .note {
  font-size: 14px;
  color: #aaa;
  margin-bottom: 30px;
}
.stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 50px;
}
.stats div {
  text-align: center;
}
.stats h3 {
  font-size: 32px;
  margin-bottom: 5px;
  color: #7cc342;
}


/* Buttons */

a.button-* {

}

a.button-give-today {
	background-color: #019949;
	color: var(--white);
	font-size: 28px;
	font-weight: bold;
	text-transform: uppercase;
	border-bottom: 10px solid #71BF44;
	padding: 10px 20px;
	font-family: "Rajdhani", sans-serif;
}

a.button-evergreen-solid {
	background-color: #019949;
	border: 2px solid #019949;
	color: #fff;
	text-transform: uppercase;
	padding: 15px 30px;
	transition: all .25s;
	font-family: "Rajdhani", sans-serif;
	display: inline-block;
	font-weight: bold;
	font-size: 18px;
}

a.button-evergreen-solid:hover {
	background-color: #fff;
	color: #019949;
	text-decoration: none;
}

a.button-card, span.button-card {
	background-color: #019949;
	border: 2px solid #019949;
	color: #fff;
	font-size: 24px;
	font-weight: 600;
	text-transform: uppercase;
	padding: 10px 20px;
	font-family: "Rajdhani", sans-serif;
	width: 100%;
	transition: all .25s;
	display: block;
	text-align: center;
}

a.button-card:hover, .card-image-fade:hover span.button-card {
	background-color: #fff;
	color: #019949;
	text-decoration: none;
}

a.evergreen-button {
	background-color: #019949;
	border-bottom: 5px solid #71BF44;
	color: #fff;
	font-size: 28px;
	font-family: "Rajdhani", sans-serif;
	padding: 10px 80px;
	transition: all .25s;
	text-transform: uppercase;
	font-weight: bold;
	display: inline-block;
	margin-top: 20px;
}

a.evergreen-button:hover {
	background-color: #71BF44;
	color: #000;
	border-bottom: 5px solid #019949;
	text-decoration: none;
}

/* End Buttons */

/* Give Today Bar */

.applyBar {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	padding: 10px;
	right: 0;
	width: 100%;
	color: #fff;
	text-align: center;
	overflow: hidden;
	z-index: 10;
	box-shadow: 0 2px 8px rgba(0,0,0,.4);
	transition: all 0.5s;
}
.headroom--unpinned:not(.headroom--bottom) .applyBar {
	top: 0;
	padding-left: 2px;
}
.headroom--pinned .applyBar, .headroom--bottom .applyBar {
	top: var(--headroom-height);
	padding-left: 2px;
}

.text-align-vh{	
	display:flex;
	align-items:center;
	justify-content:center;
}



/* Homepage */
.campaign-progress-table .transform-grid-cell {
	border: none;
}

.campaing-progress-number {
	font-size: 60px;
}



/* start curicular progress bar */
/* to update percentage, do it in the dept.js file*/
.container{
	display:flex;
	flex-direction:column;
	align-items:center;
	background-color:none;
	border-radius:8px;
	width:420px;
	padding: 50px 0;
	row-gap:30px;
}

.circular-progress{
	position:relative;
	height:250px;
	width:250px;
	/*background-color:#f0ff;*/
	background:conic-gradient(#78be20 3.6deg, #c9e5a6 0deg); /*bg-fern and bg-fern-l1*/
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
}

.reveal {
	position: relative;
	transform: translateY(150px);
	opacity: 0;
	transition: 1s all ease;
}

.reveal.active {
	transform: translateY(0);
	opacity: 1;
}

.circular-progress::before{
	content:"";
	position:absolute;
	height:210px;
	width:210px;
	background-color:#1e4119; /*interior circle - bg-forest-d2*/
	border-radius:50%;

}

.progress-value{
	position:relative;
	font-size:50px;
	font-weight:600;
	color:#a1d263; /*bg-fern-l1*/
}

.text{
	font-size:30px;
	font-weight:500;
	color:#fff; /*white*/
}

/* end circular progress bar */


/* ====================== START of Text Formatting ========================== */

.text-rajdhani {
	font-family: "Rajdhani", arial, sans-serif;
}

.gradient-text {
      background-image: linear-gradient(to right, #275d38, #009933);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent; /* For WebKit browsers */
    }



/* ====================== END of Text Formatting ========================== */

/* ====================== START Overlay Box ========================== */

.number-box {
  position: absolute;
  bottom: 30px;
  left: 30px;
  background: white;
  padding: 10px 45px 10px 15px;
  border-radius: 8px;
  clip-path: polygon(0 0, 85% 0, 100% 100%, 85% 100%, 0 100%);
	font-family: "Rajdhani", arial, sans-serif;
	text-align: left;
	
}

.number-box h3 {
  margin: 0;
  color: #00543c; /* UVU green */
  font-size: 35px;
  font-weight: 800;
	font-family: "Rajdhani", arial, sans-serif;
}

.number-box p {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #00543c;
  font-weight: 600;
  font-size: 18px;
	font-family: "Rajdhani", arial, sans-serif;
}

img.shadow  {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
	padding: 0px !important;
}
	

/* ====================== START Backgrounds ========================== */

.green-mosaic-bg {
	background-image: url("/evergreen/images/home/evergreen-backgrounds-green.jpg");
}

.white-mosaic-bg {
	background-image: url("/evergreen/images/home/evergreen-backgrounds-white.jpg");
}

/* ====================== START Story Cards ========================== */

.story-container {
  position: relative;
  text-align: center;
  color: white;
}

.story-margin {
	margin-top: 30px;
}

.bottom-left {
  position: absolute;
  bottom: -35px;
  padding: 0 20px;
}


.story-btn-white{
	background: #FFFFFF 0% 0% no-repeat padding-box;
	position:relative;
	box-shadow: 0px 3px 6px #00000029;
	opacity: 1;
	padding: 22px 10px 22px 10px;
	width: 100%;
	margin: 10px 0px;
	text-decoration: underline;
	display:inline-block;
	color:#275D38 !important;
	text-transform:uppercase;
	font: normal normal bold 13px/18px Rajdhani;
	border-radius: 8px;
	font-size: 18px;
}

a.story-btn-white:hover {
    color:#ffffff !important;
	background: #275D38;
}

/* ====================== START Story Cards ========================== */

.bottom-opportunity {
  position: absolute;
  bottom: -30px;
  padding: 0 20px;
	width: 100%;
}

.width-100 {
	width: 100%;
}


/* ====================== START Give Button ========================== */

.give-button {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  color: #fff;
  background: #185c33;
  border: 4px solid #009933;
  box-shadow: 10px 10px 0 #009933;
  width: 100%;
  max-width: 240px;
  padding: 12px 30px;
  margin: 12px auto;
  font-size: 28px;
  transition: all 0.5s ease-in-out;
  cursor: pointer;
}

.give-button:hover {
  box-shadow: 0px 0px 0 #009933;
  transform: translate(2px, 2px);
	color: white;
	weight: 500;
}

.amounts-container {
	display: flex;
	align-items: center;
	box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.2);
	border-radius: 15px;
	background-image: linear-gradient(to right, #f1f1f1, #ffffff);
	padding: 15px;
	margin: 20px 0px;
}

.amounts-container h3 {
	font-size: 48px;
    padding: 0 20px 0 0;
    font-weight: bold;
}

.amounts-container p {
	font-size: 16px;
    font-style: italic;
    font-weight: 500;
    padding-left: 10px;
    margin-bottom: 0;
}

.amount-margin {
	margin-top: -50px;
}

width-70 {
	width: 70%;
}

width-30 {
	width: 30%;
}


/* ====================== Tablet and Up (Overrides Mobile Styles) ========================== */
@media only screen and (min-width: 768px) {
	
	.parallax {
		background-attachment: fixed;
	}
	
	/*
	.jumbo.parallax, jumbo.fullbleed {
		background-size: contain !important;
	}
	*/
	
	.eg-logo {
		width: 50%;
		margin: 0px 0px 35px; 0px;
	}
	
	.jumbo.parallax, jumbo.fullbleed {
    	padding: 80px;
		background-size: cover;
	}
	
	/* ===== Button Styling ===== */
.home-btn-white{
	background: #FFFFFF 0% 0% no-repeat padding-box;
	position:relative;
	box-shadow: 0px 3px 6px #00000029;
	opacity: 1;
	padding: 12px 70px 12px 10px;
	width: 170px;
	margin: 10px 0px;
	text-decoration: underline;
	display:inline-block;
	color:#275D38 !important;
	text-transform:uppercase;
	font: normal normal bold 13px/18px Rajdhani;
	border-radius: 8px;
	font-size: 18px;
}

a.home-btn-white:hover {
    color:#ffffff !important;
	background: #275D38;
}

a.home-btn-uvugreen:hover {
    background: #ffffff !important;
    color: #275d38 !important;
}

.home-btn-uvugreen{
	background: #275D38 0% 0% no-repeat padding-box;
	position:relative;
	box-shadow: 0px 3px 6px #00000029;
	opacity: 1;
	padding: 12px 70px 12px 10px;
	width: 170px;
	margin:10px 10px;
	text-decoration: underline;
	display:inline-block;
	color:#ffffff !important;
	text-transform:uppercase;
	font: normal normal bold 13px/18px Rajdhani;
	border-radius: 8px;
	font-size: 18px;
}

a.home-btn-white:after {
	content: "\f061";
	font-family: "Font Awesome 5 Pro";
	position: absolute;
	right: 10px;
	bottom: 12px;
	font-size: 18px;

}

a.home-btn-uvugreen:after {
	content: "\f061";
	font-family: "Font Awesome 5 Pro";
	position: absolute;
	right: 10px;
	bottom: 12px;
	font-size: 18px;
}
	
	a.story-btn-white:after {
	content: "\f061";
	font-family: "Font Awesome 5 Pro";
	position: absolute;
	right: 10px;
	bottom: 20px;
	font-size: 18px;

}

.btn-parent{
	display:flex;
	justify-content: start;
}

.headerMobile .btn-parent {
  flex-wrap: wrap;
  justify-content: center;
}
	
	.hero-content {
display: block;
}
	
	.headerMobile{
		display: none;
	}
	
.small-line-break{
		display: none;
	}

	

	fundraising-priorities {
		flex-direction: column;
		align-content: center;
	}

	.blog .post {
		flex-wrap: nowrap;
	}

	.campaing-progress-number {
		font-size: 100px;
	}
	
	

	
/* ====================== START of About Flex Cards ========================== */

.flex-col-reverse {
	display: flex;
    flex-direction: column;
	flex-wrap:nowrap;
	justify-content:flex-start;
}

/* ====================== END of About Flex Cards ========================== */


.number-box {
  bottom: 35px;
  left: 65px;	
}

.number-box h3 {
  font-size: 50px;
}

.number-box p {
  font-size: 28px;
}


.amounts-container h3 {
	font-size: 115px;
}

.amounts-container p {
	font-size: 22px;
}
	
	.amount-margin {
	margin-top: 0px;
}
	
	.story-margin {
	margin-top: 0px;
}


}


/*end media query*/
/*End tablet and up styles*/
/* ====================== Landscape Tablet and Up (Overrides Mobile Styles) ========================== */
@media only screen and (min-width: 992px) {
	

	
	/* ===== Button Styling ===== */

.btn-parent{
	display:flex;
	justify-content: start;
}
	/* ===== End Button Styling ===== */

	/* Homepage */
	.campaign-progress-table .transform-grid-cell {
		border-right: 1px solid #fff;
	}

	.campaign-progress-table .transform-grid-cell:last-of-type {
		border:none;
	}

	.bg-image-grid-home{
		background-image:url('/evergreen/images/home/desktop-frame-animated.gif');
		background-repeat:no-repeat;
		background-position:center;
		background-size:cover;	
		/*padding:50px 0px 60px 0px;*/
		padding:50px 0px 15px 0px;
	}	

	.flex-three-items {
		flex-direction: row;
		flex-wrap: wrap;
	}
	
	section.jumbo.evergreen-jumbo {
	padding: 130px 20px 80px 20px;
	}

	#evergreen-motto {
	font-size: 24px;
	font-weight: 600;
	}
	
	.home-intro-text {
	font-size: 24px;

}
	
	.story-btn-white{
	background: #FFFFFF 0% 0% no-repeat padding-box;
	position:relative;
	box-shadow: 0px 3px 6px #00000029;
	opacity: 1;
	padding: 20px 10px 20px 10px;
	width: 100%;
	margin: 10px 0px;
	text-decoration: underline;
	display:inline-block;
	color:#275D38 !important;
	text-transform:uppercase;
	font: normal normal bold 13px/18px Rajdhani;
	border-radius: 8px;
		font-size: 18px;
}
	
	
}

/*end media query*/
/*End landscape tablet and up styles*/
/* ====================== Desktop Only (Overrides Mobile and Tablet Styles) ========================== */
@media only screen and (min-width: 1200px) {

.bg-image-grid-home{
		background-image:url('/evergreen/images/home/desktop-frame-animated.gif');
		background-repeat:no-repeat;
		background-position:center;
		background-size:cover;	
		padding:50px 0px 60px 0px;
	}	
	
	.btn-parent  a.home-btn-white, .btn-parent a.home-btn-uvugreen {
		padding: 22px 25px 22px 10px;width: 270px;font-size: 18px;text-decoration: underline;
		box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
	}
	
	a.home-btn-white:after,  a.home-btn-uvugreen:after{
	bottom: 22px;
    font-size: 15px;
		right: 19px;
	
		
	}



}

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