@charset "utf-8";
/* CSS Document */

.sec-nav-horiz {background-color:#fff;}
	.navbar-light .navbar-brand {color: rgba(11,35,65);}
	.navbar-light .navbar-toggler {color: rgba(11,35,65);}
	.navbar-light .navbar-nav .nav-link {color: rgba(11,35,65);}
	.navbar-light .nav-item:last-child {border-bottom:1px solid #a1a1a1;}
	.navbar-light .navbar-nav .nav-link:hover {color:#cc4e0b;}
	.page-content {padding-top:0%;}
	
	.story-title {font-size:2.5em; line-height: .9; text-align: center; font-family:sweet-sans-pro; text-transform: uppercase; font-weight:800; color:#cc4e0b;}
	
	.theproblem {text-align: center; text-transform: uppercase; font-weight:800;}
	.theproblem .title { background-color:#0b2341; color:#fff; font-size:2em; letter-spacing: 1.5px;}
	.ourwork {text-align: center; text-transform: uppercase; font-weight:800;}
	.ourwork .title { background-color:#cc4e0b; color:#fff; font-size:2em; letter-spacing: 1.5px;}

	.problem-body p a, .story-body p a {color:#fff; border-bottom:1px solid #fff;}

	.row01 .row01-title-01 {color:#cc4e0b;}
	
	.row02 {background-color:#cc4e0b; text-align: center;}
	.row02 p {color:#fff;}
	.row02 p .highlight {background-color:#0b2341; padding:0px 1% 0px 1%;}
	.row02 p .underline {font-weight:600; border-bottom:1px solid #fff;}
	.row-title.row02-title-01 {}
	
	.row03 {background-color:#0b2341; color:#fff;}
	.row03 .row03-title-01 {background-color:#cc4e0b; color:#fff;}
	
	.nav-item.pillars {background: url(//auburn.edu/template/2022/_assets/images/design-elements/pillars-orange.png);
    width: 5%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;}
	
	@media (min-width:768px) {
		.navbar-light .nav-item:last-child {border-bottom:0px;}
		.row01 {position:relative;}
		.row01 .row01-title-01 {font-size:3em; line-height: 1;}
		.row01 {padding-top:10%;}
		.row02 p {font-size:1.4em;}
		.row03 .item {border:0px; position:relative;}
		.row03 .item .info {position:relative;}
		.row03 .item .info p::before {display: inline-block; position: absolute; top: 2%; bottom: 0; left: -5%; width: 18px; content: ""; background: url(https://ocm.auburn.edu/hardwork/_assets/arrow-right.png) no-repeat 0 0; background-size: 100%;}
		.row03 .item .image {position:relative;}
		
		.row03 .item .image::before {display: inline-block; position: absolute; content: ""; background: url(https://ocm.auburn.edu/hardwork/_assets/arrow-bar.png) no-repeat 0 0; background-size: 100%;}
		.row03 .item.item-01 .image::before {top: 90%; bottom: 0; right: 0; width: 50%;}
		.row03 .item.item-02 .image::before {top: 5%; bottom: 0; right: 0; width: 50%;}
		.row03 .item.item-03 .image::before {top: 5%; bottom: 0; left: 0; width: 50%;}
		.row03 .item.item-04 .image::before {top: 90%; bottom: 0; left: 0; width: 50%;}
		.row03 .item.item-05 .image::before {top: 5%; bottom: 0; left: 0; width: 50%;}
		.row03 .item.item-06 .image::before {top: 5%; bottom: 0; right: 0; width: 50%;}

		.theproblem .title {font-size:2.5em;}
		.ourwork .title {font-size:2.5em;}
		
		.divider-pillars {text-align: center; height:0px;}
		.divider-pillars img {width:4%; transform: translateY(-50%);}
	}
	
	@media (min-width: 992px) {
		.row03 .item .info p::before {top: 0; bottom: 0; left: -5%; width: 22px;}
	}
	
	@media (min-width: 1200px) {
		.row01 .row01-title-01 {font-size:5em;}
		.row02 p {font-size:2em;}
		.row02-title-01, .row03-title-01 {font-size:3em;}
		.sec-nav-horiz .navbar-nav .nav-item .nav-link {border-right: 0px;}
		.story-body p {font-size:1.5em;}
	}
	
	@media (min-width:1300px) {
		.story-title {font-size:3em;}
	}

	@media (min-width: 1400px) {
		.row02-title-01, .row03-title-01 {font-size:3.5em;}
		.story-title {font-size:3.5em;}
		.theproblem .title {font-size:3.5em;}
		.ourwork .title {font-size:3.5em;}
	}