body {
	width:100%;
	max-width:100%; 
	overflow-x: hidden;
}

li.nav-item {
	left:0;
	border-right: 1px solid rgb(11,35,65);
	color:rgb(11,35,65);
	font-size:1.2rem;
}

a.col {
	font-size:1.2rem;
}


.col-12.body-wrapper {
	display: block;
	position: relative;
	width: 100%;
}

li {
	position: relative;
	left:2%;
	font-size:1.25rem;
}

.col-12.page-header-container {
	display: block;
	position: relative;
	width: 100%;
	background-image: url("../images/aerial-photo.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}

.title-bluebar.title-container .content {
    min-height: 40vh;
	height:40vh;
}

.homepage-image {
	background:url("");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.title-container {
	background:url("../images/page-headers/pg4 seal.jpg"); 
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.title-container-recruitment {
	background:url("../images/page-headers/pg90_JE13186.jpg"); 
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.title-container-procedures {
	background:url("../images/page-headers/pg53_JDE_0012.JPG"); 
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.title-container-retreat {
	background:url("../images/page-headers/Header_HR.png"); 
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}


.col-10.content-wrapper{
	display: block;
	position: relative;
	width:90%;
	margin: 0 auto;
	padding:2% 0 0 0 ;
}

.left-content {
	display: inline-block;
	position: relative;
	width:59%;
	padding: 0 1%;
}

.right-content {
	display: inline-block;
	position: relative;
	width:39%;
	top:2.5rem;
}

.container{
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  box-lines: multiple;
	max-width: none;
}

.box{
  width: 20rem;
  height: 20rem;
  overflow: hidden;
  margin: 5px;
  border: 1px solid #000;
  box-shadow: 0px 0px 15px 0px #666,
              0px 5px 15px 0px #000;
}

.two-2 {
	background: url('../../../images/headshots/2019/thumb/amanda-malone.jpg');
	background-position: center;
	background-size:cover;
	background-repeat: no-repeat;
}

.nine-3 {
	background: url('https://www.auburn.edu/academic/provost/images/headshots/2019/thumb/lavelle-bledsoe.jpg');
	background-position: center;
	background-size:cover;
	background-repeat: no-repeat;
}

.cover{
  width: 100%;
  height: 100%;
  background: rgba(11,35,65,0.95);
  position: relative;
  -webkit-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
  padding: 10%;
  color: #fff;
  overflow: hidden;
  text-shadow: 1px 1px 0px #000;
  text-align: center;
}

.cover-content {
	display: block;
	position: relative;
	top:1rem;
}

.cover .title{
  font-style: italic;
}

.box .cover .intro{
  line-height: 1.5em;
  height: 10em;
  width: 100%;
  position: relative;
  overflow: hidden;
  top:0;
  margin-bottom:0;
  color:#fff;
}

.box .cover .intro a{
  color:#fff;
}

.box .cover .intro a:hover{
  color:rgb(204,78,11);
}

.cover .btn{
  padding: 0.5em 1em;
  margin: 0.5em;
  background: rgb(204,78,11);
  left:12%;
  border-radius: 0.25em;
}

.cover .btn:hover{
  background: rgb(231,233,236);
	color:rgb(11,35,65);
}

.btn a{
  color: #fff;
  text-decoration: none;
}

.btn a:hover{
  color: rgb(11,35,65);
  text-decoration: none;
}

.cover .date{
  position: absolute;
  bottom: 1em;
  right: 1em;
  font-size: 10pt;
}

.box:hover .left{
  -webkit-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
   left: 0px;
}

.box:hover .right{
  -webkit-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
   right: 0px;
}

.box:hover .top{
  -webkit-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
   top: 0px;
}

.box:hover .bottom{
  -webkit-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
    bottom: 0px;
}

.box:hover .top-left{
  -webkit-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
    top: 0px;
    left: 0px;
}

.box:hover .top-right{
  -webkit-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
    top: 0px;
    right: 0px;
}

.box:hover .bottom-left{
  -webkit-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
    bottom: 0px;
    left: 0px;
}

.box:hover .bottom-right{
  -webkit-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
    bottom: 0px;
    right: 0px;
}

.left{
  left: -40rem;
}

.right{
  right: -40rem;
}

.top{
  top: -40rem;
}

.bottom{
  bottom: -40rem;
}

.top-left{
  top: -40rem;
  left: -40rem;
}

.top-right{
  top: -40rem;
  right: -40rem;
}

.bottom-left{
  bottom: -40rem;
  left: -40rem;
}

.bottom-right{
  bottom: -40rem;
  right: -40rem;
}

/* Ordering */
  .left{order:1;}
  .right{order:2;}
  .top{order:3;}
  .bottom{order:4;}
  .top-left{order:5;}
  .top-right{order:6;}
  .bottom-left{order:7;}
  .bottom-right{order:8;}

h2.leadership-name {
	display: block;
	position: relative;
	color:rgb(11,35,65);
	text-align: center;
	margin:4% 0;
	font-size:1.2rem;
}

div#filter-btns, div#filter-btns1, div#filter-btns2 {
    display: block;
    position: relative;
    width: 100%;
}

div#filter-btns a, div#filter-btns1 a, div#filter-btns2 a {
	text-decoration: none;
}

div#filter-btns1 {
	position: relative;
	left:14%;
}

div#filter-btns2 {
	position: relative;
	left:25%;
}

button.btn-primary {
	font-size:1.2rem;
	padding:1% 0;
	width:20%;
	margin: 1% 2%;
}

button.btn.btn-primary.filter, button.btn.btn-primary {
	background-color:rgb(11,35,65);
	border-color:rgb(207,78,11);
}

button.btn.btn-primary.filter:hover, button.btn.btn-primary:hover {
    background-color: rgb(204,78,11);
	border-color:rgb(11,35,65);
}

button.btn.btn-primary.filter.active, button.btn.btn-primary.active {
    background-color: rgb(204,78,11);
	border-color:rgb(11,35,65);
}

.spacer {
	padding:2% 0;
}

.little-spacer {
	padding:1% 0;
}

.accordion-body ol {
	display: block;
	position: relative;
	left:2rem;
	font-size:1.25em;
}

.col-2.join-number {
	display: inline-grid;
	position: relative;
	font-weight:700;
	font-size:2.5rem;
	color:rgb(72,148,174);
	text-align: center;
}

.col-10.join-text {
	padding:.5% 0;
}

ul.criteria li {
	position: relative;
	left:2%;
	font-size:1.2rem;
}

.col-12.semester-container {
	display: block;
	position: relative;
	background-color: rgb(212,233,239);
	padding:1%;
}

.semester-title {
	font-size:1.5rem;
	font-weight:600;
	border-bottom: 3px solid #fff;
}
.col-4.semester {
	display: inline-grid;
	position:relative;
	width:32%;
	text-align: center;
	padding: 1% 0;
	font-weight:600;
}

.col-4.semester strong {
	font-size:1.5rem;
}

.col-1.position-btn {
	display: inline-block;
	position: relative;
	width:10%;
	margin: 0% 1.25%;
	padding:1%;
	background: #fff;
	border: 4px solid #0b2341;
	text-align: center;
}

.col-1.position-btn:after, .col-1.position-btn:before {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.col-1.position-btn:after {
	border-color: rgba(255, 255, 255, 0);
	border-left-color: #fff;
	border-width: 30px;
	margin-top: -30px;
}
.col-1.position-btn:before {
	border-color: rgba(11, 35, 65, 0);
	border-left-color: #0b2341;
	border-width: 36px;
	margin-top: -36px;
}

.col-1.position-btn:last-child:before,.col-1.position-btn:last-child:after {
	border-color: rgba(11, 35, 65, 0);
	border-left-color: #0b2341;
	border-width: 0px;
	margin-top: 0px;
}


.col-10.button-container {
	display: block;
	position: relative;
	width:100%;
	margin: 0 auto;
}

.hide {
	display: none;
}

button.accordion-button, button.accordion-button.collapsed {
    font-size: 1.25rem;
}

#rotate-words {
  max-width:400px;
  margin:auto;
  padding:0 0 10% 0;
  font-size:2.5rem;
  text-transform:uppercase;
  text-align: center;
  font-weight:800;
	color:rgb(11,35,65);
}

#rotate-words span {
  display:block;
  height:10rem;
  font-size:1.5rem;
  opacity:1;
  text-transform: capitalize;
	color:rgb(204,78,11);
}

#rotate-words div {
 position:absolute;
 opacity:0;
 overflow:hidden;
 left:8%;
 width:80vw;
 line-height:1.2em;
 animation: rotate-word 24s linear infinite 0s;
	color:rgb(11,35,65);
}

@keyframes rotate-word {
    0% { opacity: 0;  transform: translateX(0);filter:blur(10px);transform:scale(1.2)}
    3% { opacity: 1;  transform: translateX(0);filter:blur(0px);transform:scale(.9)}
    12% { opacity: 1; transform: translateX(0);filter:blur(0px);transform:scale(1)}
    16% { opacity: 0; transform: translateX(0);filter:blur(10px);transform:scale(1.2)}
}

#rotate-words div:nth-child(2) { animation-delay: 4s}
#rotate-words div:nth-child(3) { animation-delay: 8s}
#rotate-words div:nth-child(4) { animation-delay: 12s}
#rotate-words div:nth-child(5) { animation-delay: 16s}
#rotate-words div:nth-child(6) { animation-delay: 20s}



/* ------------ Flowchart Test -------- */



@media only screen and (max-width: 2560px) {
    .title-bluebar.title-container .content {
		min-height: 60vh;
		height:60vh;
	}
}

@media only screen and (max-width: 1920px) {
  	.title-bluebar.title-container .content {
		min-height: 40vh;
		height:40vh;
	}
}


@media only screen and (max-width: 1536px) {
  	button.btn-primary {
		position: relative;
		width: 29%;
		
	}
}

@media only screen and (max-width: 1440px) {
  
}

@media only screen and (max-width: 1366px) {
  
}
@media only screen and (max-width: 1280px) {
	.left-content {
		width:100%;
	}
  .right-content {
		display: block;
		position: relative;
		width:100%;
		padding:2% 0;
	}
	button.btn-primary {
		position: relative;
		width: 90%;
		left: 5%;
	}
}
@media only screen and (max-width: 962px) {
  #rotate-words {
  display:none;
}
}
@media only screen and (max-width: 800px) {
  
}

@media only screen and (max-width: 768px) {
  
}

@media only screen and (max-width: 601px) {
  
}

@media only screen and (max-width: 414px) {
  	

}

@media only screen and (max-width: 375px) {
  
}

@media only screen and (max-width: 360px) {
  
}