/* 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 ========================== */
/**************************************START HOMEPAGE CSS********************************************/
.bg-home-info {
	background: url(https://www.uvu.edu/rootsofknowledge/images/background-images/rok-panel-bg.jpg) no-repeat;
    background-size: cover;
    height: 400px;
	display: flex;
    align-items: center;
	   
}
.rok-home-heading {
    font-weight: 500;
    font-size: 40px !important;
}
.rok-home-subheading {
    color: #fff;
    font-size: 20px !important;
	margin-top: 0px;
}
.bg-home-info .info-box-inner {
    padding: 10px 15px;
	
}
.bg-home-info .info-text {
	text-align: center;
    font-size: 18px;
}
.bg-home-info .info-facts {
    font-size: 14px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 20px;
}
.info-box {
	 background-color: rgba(0, 0, 0, 0.8) !important;
}

.continue-down{
	position: absolute;
	bottom: -50px;
	left: 50%;
	margin-left: -21px;
	display: block;
}

.accessible-link {
	border-bottom: 1px dotted #275d38 !important;
}
.accessible-link:hover {
	border-bottom: none;
	text-decoration: underline;
}


/**************************************!END HOMEPAGE CSS********************************************/

/**************************************!!!!!!!START GENERAL CSS!!!!!!!!!!********************************************/
.bg-purple {
	background-color: #301C46 !important;
}
.text-purple {
    color: #301C46;
}
input[type='checkbox']:checked {
    accent-color: #275d38 !important;
}
.line-height-12 {
	line-height: 1.2;
}

#globalFooter:before {
    content: "";
    background: url(https://www.uvu.edu/rootsofknowledge/images/background-images/bottom_border.png) repeat-x;
    background-size: 1500px;
    width: 100%;
    height: 100%;
   position: absolute;
    top: -28px;
    border-top: 6px solid #000;
}

.banner-heading {
     margin-bottom: 50px;
    position: relative;
    text-transform: uppercase;
}

.banner-heading:after {
    content: "";
    background: url(https://www.uvu.edu/rootsofknowledge/images/assets/border_green.png) repeat-x;
    position: absolute;
    width: 100%;
	background-size: 150px;
    z-index: -1;
    bottom: -60px;
    left: 0;
    height: 50px;
}
.banner-heading-left p img {
    background-position: center;
    object-fit: cover;
    width: 578px;
    height: 136px;
    border-radius: 8px;
}

/*accessible link fix */
.accessible-link {
	border-bottom: 1px dotted #275d38 !important;
}
.accessible-link:hover {
	border-style: none !important;
	text-decoration: underline;
}

section#contact {
    position: relative;
}
section#contact:before {
    background: url(https://www.uvu.edu/rootsofknowledge/images/assets/border_green.png) repeat-x;
    content: "";
    position: absolute;
	background-size: 150px;
	
    width: 100%;
    height: 50px;
    top: 0;
}
section#contact:after {
    background: url(https://www.uvu.edu/rootsofknowledge/images/assets/border_green.png) repeat-x;
    content: "";
    position: absolute;
	background-size: 150px;
    width: 100%;
    height: 50px;
    bottom: -35px;
}

p.rok-image {
    position: relative;
}
p.rok-image:after {
    content: "";
    background: url(https://www.uvu.edu/rootsofknowledge/images/assets/border_white-new.png) repeat-x;
    z-index: 4;
    position: absolute;
	background-size: 150px;
    width: 100%;
    bottom: -20px;
    left: 0;
    height: 50px;
}


/**************************************!END GENERAL CSS********************************************/


/**************************************START ACCORDION CSS********************************************/
.rok-accordion .accordion p {
    color: #275d3b;
    font-family: 'Rajdhani', sans-serif;
    font-weight: bold;
    font-size: 24px;
	position: relative;
}
.rok-accordion .accordion {
    background-color: #fff !important;
    padding: 30px 30px 50px !important;
    box-shadow: 0px 0px 6px #00000029;
    margin-bottom: 25px !important;
}
.rok-accordion .accordion:not(.accordion-unstyled).open {
    margin-bottom: 0px !important;
    padding: 30px 30px 60px !important;
    clip-path: inset(-10px -10px 0px -10px);
    border-radius: 8px 8px 0px 0px;
}

.rok-accordion .accordion:not(.accordion-unstyled):before {
    content: "";
    background: url(https://www.uvu.edu/rootsofknowledge/images/assets/border_green.png) repeat-x;
    position: absolute;
    z-index: 4;
    width: 100%;
	background-size: 150px;
    bottom: -20px;
    left: 0;
    height: 50px;
}
.rok-accordion .accordion:not(.accordion-unstyled).open:before {
	bottom: -10px;
}

.rok-accordion .accordion:not(.accordion-unstyled):after {
   content: "\f0d7";
    font-weight: bold;
    margin: 0;
    position: relative;
    height: 30px;
    font-size: 40px;
    background-color: #fff;
    color: #285d39;
}
.rok-accordion .accordion:not(.accordion-unstyled).open:after {
	content: "\f0d8";
}
.rok-accordion .accordion-content {
    background-color: #fff;
    border-top: 0;
    margin-top: 0;
    position: relative;
    box-shadow: 0px 0px 6px #00000029;
    margin-bottom: 20px;
    clip-path: inset(0px -10px -10px -10px);
    padding: 10px 30px 20px 30px;
}

/*accordion on event page*/
.event-accordion {
    background-color: #fff !important;
    display: inline-block !important;
    color: #301C46;
    padding: 0 !important;
    font-family: 'Rajdhani', sans-serif;
    font-size: 18px;
    font-weight: 500;
}
.event-accordion:hover {
    text-decoration: underline;
}
.event-accordion:after {
    position: relative !important;
    display: inline-block !important;
    font-family: "Font Awesome 5 Solid", "Font Awesome 5 Pro" !important;
    content: "\f078" !important;
    color: #301C46 !important;
    background-color: #fff !important;
    margin-left: 20px !important;
}
.event-accordion.open:after {
    content: "\f077" !important;
}

/**************************************!END ACCORDION CSS********************************************/

/**************************************START PICTURE CARD AND CONTENT CARD CSS********************************************/
/*PICTURE CARDS ON HOMEPAGE*/
.card-picture-7 .card-picture-title:after {
	display: none;
}
h2.card-picture-title {
    padding: 15px 10px !important;
	position: relative;
}


/*CONTENT CARDS ON VISIT PAGE*/
.card-content-custom {
    background-color: #fff;
    color: #000;
    padding: 20px 30px 40px;
}
.card-content-custom .card-content-title {
    color: #275D38;
    text-transform: uppercase;
    margin-bottom: 70px;
    position: relative;
}
.card-content-custom .card-content-title:after {
    content: "";
    background: url(https://www.uvu.edu/rootsofknowledge/images/assets/border_green.png) repeat-x;
    position: absolute;
    width: 1000px;
    bottom: -70px;
	background-size: 150px;
    left: -50px;
    height: 50px;
}

/*MULTICONTENT CARDS ON RESOURCES PAGE*/
.card-multicontent {
    display: flex;
	box-shadow: none;
    flex-direction: column-reverse;
    border-radius: 8px;
}
.card-multicontent .card-content-title {
    font-size: 18px !important;
    margin: 0;
    height: 100%;
    width: 100%;
    padding: 0;
}
.card-multicontent .card-content-title a {
    font-size: 18px !important;
    font-weight: bold;
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: 0px 0px 8px 8px;
    border: 2px solid #275D3B;
    padding: 20px 20px;
    margin: 0;
	display: flex;
	justify-content: space-between;
}
.card-multicontent .card-content-title a:hover {
    background-color: #275D3B;
    color: #fff;
}
.card-multicontent .card-content-title a:after {
	content: "\f178";
    color: inherit;
	font-family: "Font Awesome 5 Pro";
}
.card-multicontent .card-content-container-1 {
    background-color: #275D3B;
    color: #fff;
    height: 100%;
	position: relative;
    padding: 20px 30px 30px !important;
}
.card-multicontent .card-content-container-1:after {
	    content: "";
    background: url(https://www.uvu.edu/rootsofknowledge/images/assets/border_white-new.png) repeat-x;
    position: absolute;
    width: 1000px;
    bottom: -2px;
    left: -20px;
    background-size: 150px;
    height: 20px;
}

/*TESTIMONIAL CARDS ON EDUCATION PAGE*/
.card-picture-testimonial .card-picture-content {
    flex: 4;
    padding: 60px 50px 40px;
	position: relative;
}
.card-picture-testimonial .card-picture-content:before {
    content: "\f10d";
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Solid";
    color: #000;
    font-weight: bold;
    border-radius: 50%;
    position: absolute;
    top: -40px;
    left: 30px;
    background-color: #fff;
    font-size: 26px;
    padding: 20px;
    box-shadow: 0px 3px 6px #00000029;
}
.card-picture-testimonial .card-picture-img {
    flex: 1;
	width: 100%;
}
.card-picture-testimonial .testimonial-name {
    font-family: "Lato";
    font-size: 24px;
    color: #000;
}


/*STAFF CARDS ON ABOUT PAGE*/
.card-staff-admin .card-staff-admin-nameplate:before {
	display: none;
}
.card-staff-admin {
    height: 100%;
	background-color: #000;
	min-height: 500px;
}
.card-staff-admin .card-staff-img-container {
    max-height: 300px;
    max-width: 300px;
    margin: 0 auto;
    background-color: #000;
}
.card-staff-admin .card-staff-img-container img {
	max-height: 400px;
}
.card-staff-admin-body {
    bottom: unset;
    position: relative;
    height: 100%;
    background-color: #275D38 !important;
    color: #fff !important;
}
.card-staff-admin-nameplate {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    min-height: 115px;
    padding: 0px 20px;
}
.card-staff-admin .card-staff-admin-nameplate:before, .card-staff-admin .card-staff-admin-name, .card-staff-admin .card-staff-admin-area {
    color: #fff !important;
}
.card-staff-admin-area:after {
	border-bottom: 2px solid white !important;
	bottom: -7px;
}

/**************************************!END PICTURE CARD AND CONTENT CARD CSS********************************************/


/**************************************START BUTTON AND LINK CSS********************************************/
.button-solid-purple {
	background-color: #301C46;
	border-color: #301C46;
}
.button-solid, .arrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.button-solid:after {
	content: "\f178";
    color: inherit;
	font-family: "Font Awesome 5 Pro";
}
.button-light {
    background-color: #fff;
    color: #275d38;
    font-weight: bold;
    font-size: 18px;
	position: relative;
    margin: 0;
}
.button-light:hover {
    background-color: #275D38;
    color: #fff;
}
.button-solid-purple.button-dark {
    font-weight: bold;
	    border: 2px solid #fff;
    font-size: 18px;
}
.arrow:after {
    content: "\f175";
    color: inherit;
	font-family: "Font Awesome 5 Pro";
}

.sf {
    background-color: #fff;
    color: #000;
}
.sf:hover {
	background-color: #9E3922;
	color: #fff;
}
.seed {
	background-color: #fff;
    color: #000;
}
.seed:hover {
	background-color: #301C46;
    color: #fff;
}
.sapling {
	background-color: #fff;
    color: #000;
}
.sapling:hover {
	background-color: #0095C8;
    color: #fff;
}
.tree {
	background-color: #fff;
    color: #000;
}
.tree:hover {
	background-color: #00843D;
    color: #fff;
}


/**************************************!END BUTTON AND LINK CSS********************************************/




/**************************************START FORM ASSEMBLY CSS********************************************/
.wFormContainer {
    margin: 0 auto !important;
}
.wFormContainer .wForm {
    margin: 0 auto !important;
    padding-top: 0 !important;
    background-color: #f9f9f9 !important;
}
.wFormTitle, .wFormContainer .supportInfo, .wFormHeader {
    display: none;
}

/**************************************!END FORM ASSEMBLY CSS********************************************/

/**************************************START EVENT AND SCAVENGER HUNT PAGE CSS********************************************/

.event-card .event-image, .scavenger-card .scavenger-image {
    padding-bottom: 20px;
    position: relative;
}
.event-card .event-heading, .scavenger-card .scavenger-heading {
	position: relative;
    padding-top: 40px;
}
.event-card .event-heading:before, .scavenger-card .scavenger-heading:before {
 	content: "";
    background: url(https://www.uvu.edu/rootsofknowledge/images/assets/border_purple.png) no-repeat;
    position: absolute;
	background-size: 150px;
    width: 70%;
    z-index: -1;
    top: 10px;
    left: 0;
    height: 50px;
}

.event-image:after, .scavenger-image:after {
    content: "";
    background: url(https://www.uvu.edu/rootsofknowledge/images/assets/border_white-new.png) repeat-x;
    z-index: 4;
    position: absolute;
	background-size: 150px;
    width: 100%;
    bottom: 0;
    left: 0;
    height: 50px;
}

.scavenger-search-key {
    padding-top: 10px;
}
/**************************************!END EVENT AND SCAVENGER HUNT PAGE CSS********************************************/


/**************************************START HISTORY AND CREATION PAGE CSS********************************************/
.transform-grid-cell {
    margin-bottom: 30px;
}
.process-heading {
    font-weight: bold;
    font-size: 30px;
    margin-bottom: 50px;
    position: relative;
    text-transform: uppercase;
}
.process-heading:after {
    content: "";
    background: url(https://www.uvu.edu/rootsofknowledge/images/assets/border_green.png) repeat-x;
    position: absolute;
    width: 100%;
	background-size: 150px;
    z-index: -1;
    bottom: -60px;
    left: 0;
    height: 50px;
}

.process-heading-right img, .process-heading-left img {
    background-position: center;
    object-fit: cover;
    width: 578px;
    height: 136px;
    border-radius: 8px;
}
/*TIMELINE CSS*/
.tab-container .tab-content {
    color: #fff;
}
.tab-container .tab-content h3 {
    font-weight: bold;
    color: #fff;
}
.tabs {
        display: flex;
    justify-content: space-between;
    padding: 0px 20px;
    position: relative;
    overflow-x: scroll;
}
.tabs div a {
    display: flex;
	outline: none;
	    margin-right: 30px;
    color: #fff;
	text-decoration: none;
	transition: all 300ms;
    flex-direction: column;
}
.tabs div a:hover,.tabs div a:focus {
    font-size: 18px;
}
.tabs div a:hover span, .tabs div a:focus span {
    font-weight: 600;
}


/**************************************!END HISTORY AND CREATION PAGE CSS********************************************/

/*End mobile and up styles*/
/* ====================== Tablet and Up (Overrides Mobile Styles) ========================== */
@media only screen and (min-width: 768px) {
	.rok-home-heading {
		font-size: 70px !important;
	}
	.rok-home-subheading {
		    font-size: 28px !important;
	}
	.bg-home-info .info-box-inner {
    	padding: 40px 45px;
	}
		.bg-home-info .info-text {
		font-size: 22px;
	}
	.card-picture-7 .card-picture-title {
		font-size: 19px;
	}
	
	
	.continue-down {
		bottom: -40px;
	}
	
	h2.card-picture-title:before {
		content: "";
		background: url(https://www.uvu.edu/rootsofknowledge/images/assets/border_white-new.png) repeat-x;
		position: absolute;
		width: 100%;
		background-size: 150px;
		top: -20px;
		left: 0;
		height: 50px;
	}
	
	.search-scavenger-hunts {
		display: flex;
	}
	
	/*************BORDER BANNER**************/
	.banner-heading {
		margin-bottom: 0;
	}
	.banner-heading:after {
		bottom: 30px;
	}
	.banner-heading-left {
		display: flex;
		justify-content: space-between;
	}
	.banner-heading-left .banner-heading {
		flex: 3;
	}
	.banner-heading-left p {
		flex: 2.7;
	}
	.banner-heading-bottom {
    margin-top: -50px;
}
	
	/*************TESTIMONIAL CARD/*************/
	.card-picture.card-picture-testimonial {
		flex-direction: row;
	}
	.card-picture-testimonial .card-picture-content {
		padding: 40px 50px 40px 60px;
	}
	.card-picture-testimonial .card-picture-content:before {
		top: 110px;
    	left: -30px;
	}
	.card-picture-testimonial .card-picture-img {
		width: 300px;
	}
	
	/*************CREATION PROCESS CSS/*************/
	.process-heading-left {
		display: flex;
		justify-content: space-between;
	}
	.process-heading-right {
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
	}
	.process-heading-right .process-heading {
		text-align: right;
		flex: 3;
	}
	.process-heading-left .process-heading {
		flex: 3;
	}
	.process-heading-left p, .process-heading-right p {
    	flex: 2.7;
	}	
	.process-heading-right .process-heading:after {
		right: 0;
		width: 650px;
		left: unset;
	}
	
	
	/******************TIMELINE TABS********************/
	.tabs {
		overflow: hidden;
	}
	.tabs div a {
		margin-right: 0;
	}
	
}

/*end media query*/
/*End tablet and up styles*/
/* ====================== Landscape Tablet and Up (Overrides Mobile Styles) ========================== */
@media only screen and (min-width: 992px) {
	.event-image, .scavenger-image {
		padding-bottom: 0px;
	}
	
	.scavenger-search-key {
		display: flex;
		justify-content: space-between;
	}
	
	/*************TESTIMONIAL CARD/*************/
	.card-picture-testimonial .card-picture-content:before {
    	top: 60px;
	}
	
	/*************CREATION PROCESS CSS/*************/
	h3.process-heading {
		margin-bottom: 0;
	}
	.process-heading:after {
		bottom: 10px;
	}
	.process-heading-right, .process-heading-left {
		margin-bottom: -20px;
	}
	
}

/*end media query*/
/*End landscape tablet and up styles*/
/* ====================== Desktop Only (Overrides Mobile and Tablet Styles) ========================== */
@media only screen and (min-width: 1200px) {
	
	/*************CREATION PROCESS CSS/*************/
	.process-heading:after {
		bottom: 20px;
	}
	
}


/*end media query*/
/* ====================== Desktop Only (Overrides Mobile and Tablet Styles) ========================== */
@media only screen and (min-width: 1400px) {
		.bg-home-info .info-box-inner {
		padding: 40px 100px;
	}
	
}

/*end media query*/
/* ====================== Desktop Only (Overrides Mobile and Tablet Styles) ========================== */
@media only screen and (min-width: 1800px) {
	
	.bg-home-info .info-box-inner {
		padding: 40px 350px;
	}
	
}

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