/* CSS Document */

/*Index

1. Base
2. Quicklinks
3. Index Pages
4. Tabs
5. Student Pages
6. Cards
7. Gardens
8. Flickity 
9. Facility
10.Research
11.Random

*/

/* Base */
	a { color:#005580; }

	p a {text-decoration: underline;}

	blockquote a {font-weight:bold;}

	.clear { margin-top:25px; }

	header#msu-header { background-color: #4f131f; }

	header#msu-header .secondary .top-menu-row .nav { background-color:#490C0F; }

	#main-menu { /*background-image: url(//cdn01.its.msstate.edu/i/basedrupal/1.0.0/img/bg_header.jpg) !important; background-color:#C3C3C3 !important; background-size:100% !important;*/}

	nav#main-menu.navbar .navbar-nav > li > a {  color:#FFF !important; }
	nav#main-menu.navbar .navbar-nav > li > a:hover { color:#490C0F !important; }
	nav#main-menu.navbar .navbar-nav > li > a:focus { color:#490C0F !important; }

	.header_tab{
		border-right: 1px solid black !important;
	}

	.color-maroon{
		color: #660000;
	}
	.grid figure h2{
		word-spacing: 0em!important;
	}
	.feature_link{
		color: #FFFFFF;
		line-height:1.5;
		
	}
	.feature_link:hover{
		color: #FFFFFF;
		text-decoration: underline;
	}

	.list-group-item {
		min-height: 80px;
	}

	svg.svg-inline--fa path{
		fill: #660000;
	}

	@media(max-width: 991.9px){
		.main-feature{
			height: 450px!important;
		}
	}

	@media(max-width: 850px){
		.main-feature{
			height: 0px!important;
		}
	}


/*2. Quicklinks*/
	#quicklinks { padding-left:0px; }
		#quicklinks li { list-style: none; border-bottom:1px solid #ddd; padding:15px 0;}
			#quicklinks li:hover { background:#fdfdfd; }
		#quicklinks li a { color:#555; font-size:16px; margin-bottom:4px; margin-top:4px; font-weight:400; margin-left:20px; }
	.fa, .far, .fas {min-width: 30px; font-size: 20px; color: #660000; }
	#quicklink_caption{
		color: #660000;
	}

/*3. Index Page*/
	
	@media(max-width: 767px){
		.feature h3{
			display: none;
		}
	}

	.index_links{
		min-width: 18.5em!important;
	}

	.fac_slider{
		height: 25em;
		
	}

	.fac_cap{
		margin-top: -45%;
		padding-left: 35px;
		padding-right: 35px;
		color: #FFFFFF;
		font-size: 1.25em;
	}	

	.fac_slider h2{
		text-align: center;
		position: relative;
		z-index: 500;
		font-size: 2em;
	}

	.fac_slider.slick-dots li{
		z-index: 100!important;
	}

	.fac_slider img{
		width: 100%;
		opacity: 0.75;
	}
	.fac_item {
		height:auto;
	}

	.fac_feature .glyphicon-chevron-right{
		right: -50px;
	}

	.fac_feature .glyphicon-chevron-left{
		left: 7px;
	}

	.fac_feature .glyphicon-chevron-right:before{
		width: 40px!important;
		height: 40px!important;
		opacity: .7;
	}

	.fac_feature .glyphicon-chevron-left:before{
		width: 40px!important;
		height: 40px!important;
		opacity: .7;
	}


	.fac_feature .glyphicon-chevron-left:hover:before{
		opacity: .9;	
	}

	.fac_feature .glyphicon-chevron-right:hover:before{
		opacity: .9;	
	}

	@media(max-width: 1190px){
		.fac_slider{
			height: 23.75em;
		}
	}

	@media(max-width: 1170px){
		.fac_slider{
			height: 23.25em;
		}
	}


	@media(max-width: 1060px){
		.fac_slider{
			height: 22.5em;
		}
	}
	@media(max-width: 992px){
		.fac_slider{
			height: 22em;
		}
	}

	@media(max-width: 970px){
		.fac_slider{
			height: 21.5em;
		}
	}

	@media(max-width: 950px){
		.fac_slider{
			height: 20.5em;
		}
	}

	@media(max-width: 850px){
		.fac_slider{
			height: 20em;
		}
	}

	@media(max-width: 835px){
		.fac_slider{
			height: 19.5em;
		}
	}

	@media(max-width: 815px){
		.fac_slider{
			height: 18.4em;
		}
	}


	@media(max-width: 767px){
		.fac_slider{
			height: 25em;
		}
		.fac_cap{
			margin-top: -45%;
			font-size: 1em;
		}
	}

	@media(max-width: 600px){
		.fac_slider{
			height: 23em;
		}
	}

	@media(max-width: 545px){
		.fac_slider{
			height: 20em;
		}
	}

	@media(max-width: 500px){
		.fac_slider{
			height: 18.5em;
		}
		.fac_cap{
			padding-left: 15px;
			padding-right: 15px;
		}
	}

	@media(max-width: 450px){
		.fac_slider{
			height: 16.5em;
		}
	}

	@media(max-width: 415px){
		.fac_slider{
			height: 15.5em;
		}
		
		.fac_cap{
			font-size: .8em;
		}
	}

	@media(max-width: 400px){
		.fac_slider{
			height: 15em;
		}
	}

	@media(max-width: 380px){
		.fac_slider{
			height: 14em;
		}
	}

	@media(max-width: 360px){
		.fac_slider{
			height: 13em;
		}
		.fac_slider h2{
			font-size: 1.75em;
		}
	}

	@media(max-width: 340px){
		.fac_slider{
			height: 12em;
		}
		
		.fac_slider h2{
			font-size: 1.75em;
		}
	}

	@media(max-width: 315px){
		.fac_slider{
			height: 11em;
		}
	}


	.bottom_fade {
		display: block;
		position: relative;
		background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0%, black 100%);
		background-image: -o-linear-gradient(rgba(255, 255, 255, 0) 0%, black 100%);
		background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, black 100%);
		margin-top: -150px;
		height: 150px;
		width: 100%;
		content: '';
		overflow: hidden;
		z-index: 1;
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 );
	}



	.twitter_col{
		height: 29em!important;
		overflow: hidden;

	}

	#twitter-widget-0 {
		height: 462px !important;
	}


	.award_well{
	border-radius:0px;margin:0px 0px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f6f6f6+47,f7f7f7+100 */background: rgb(255,255,255); /* Old browsers */background: -moz-linear-gradient(-45deg,  rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(247,247,247,1) 100%); /* FF3.6-15 */background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(247,247,247,1) 100%); /* Chrome10-25,Safari5.1-6 */background: linear-gradient(135deg,  rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(247,247,247,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f7f7f7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	}

	.award-well{
		/*border: 2px solid black;
		margin-bottom: 20px;
		padding-bottom: 0px;
		border-radius: 2% 2% 6% 6%;
		transition: .4s;
		max-width: 505px;
		-webkit-box-shadow: -2px 2px 2px 0px rgba(0,0,0,.5);
		-moz-box-shadow: -2px 2px 2px 0px rgba(0,0,0,.5);
		box-shadow: -2px 2px 2px 0px rgba(0,0,0,.5);
		margin-left:auto;
		margin-right:auto;*/
		background-color: #fff;
		min-height: 165px;
		width: 100%;
		padding: 20px;
		text-align: center;
		margin-bottom: 30px;
		-webkit-transition: box-shadow 500ms linear;
		-ms-transition: box-shadow 500ms linear;
		transition: box-shadow 500ms linear;
		border-top: 3px solid #660000;
		box-shadow: 0 2px 4px rgba(18,44,80,.5);
		/*border-top: 1px solid #0b3254;*/
	}

.job-well{
		/*border: 2px solid black;
		margin-bottom: 20px;
		padding-bottom: 0px;
		border-radius: 2% 2% 6% 6%;
		transition: .4s;
		max-width: 505px;
		-webkit-box-shadow: -2px 2px 2px 0px rgba(0,0,0,.5);
		-moz-box-shadow: -2px 2px 2px 0px rgba(0,0,0,.5);
		box-shadow: -2px 2px 2px 0px rgba(0,0,0,.5);
		margin-left:auto;
		margin-right:auto;*/
	    background-color: #fff;
		width: 100%;
		padding: 10px;
		-webkit-transition: box-shadow 500ms linear;
		-ms-transition: box-shadow 500ms linear;
		transition: box-shadow 500ms linear;
		border-top: 3px solid #660000;
		box-shadow: 0 2px 4px rgba(18,44,80,.5);
		/*border-top: 1px solid #0b3254;*/
	    
	    
	}


	.award_logo{
		max-width: 125px;
		min-width: 35px;
		margin:auto;
	}

.job-well li {text-align: left; padding:0px 0px 15px 0px; list-style: none;}


/*4. tabs */
	/*Style for dynamic tabs*/
	/* Style the tab */
	.tab {

		overflow: hidden;
		border: 1px solid #ccc;
		background-color: #f1f1f1;
		width:100%;

	}

	/* Style the buttons inside the tab */
	.tab button {
		background-color: inherit;
		float: center;
		border: none;
		outline: none;
		cursor: pointer;
		padding: 10px;
		transition: 0.3s;
		font-size: 100%;
		width: 100%;

	}

	/* Change background color of buttons on hover */
	.tab button:hover {
		background-color: #ddd;
	}

	/* Create an active/current tablink class */
	.tab button.active {
		background-color: #660000;
		color:#fff;
	}

	/* Style the tab content */
	.tabcontent {
		display: none;
		padding: 6px 12px;

		border-top: none;
	}
	.facultycontent {
		display: none;
		padding: 6px 12px;
		margin-top: 2.5em;

		border-top: none;
	}
	@media (min-width: 953px){
		.facultylinks{
			min-height:2em!important;
		}
	}
	@media (min-width: 768px){
		.facultylinks{
			min-height:4.25em;
		}
	}




/*5. Student Pages */
	.breadcrumb {
			padding: 0; margin-bottom: 20px; list-style: none; background-color: transparent;  font-size: 14px; 
		}

	.student_pics{
		min-width: 265px!important;
		width: 100%!important;

	}

	.student_pics h2{
		font-size: 1.5em!important;
	}
	.student_pics p{
		font-size: 52%!important;
	}


	.golf_slider{
		width:100%!important;

	}


	.list_title{
		margin-bottom: .5em;

	}


/*6. Cards */
	.card{
		/*border: 2px solid black;
		margin-bottom: 20px;
		padding-bottom: 0px;
		border-radius: 2% 2% 6% 6%;
		transition: .4s;
		max-width: 505px;
		-webkit-box-shadow: -2px 2px 2px 0px rgba(0,0,0,.5);
		-moz-box-shadow: -2px 2px 2px 0px rgba(0,0,0,.5);
		box-shadow: -2px 2px 2px 0px rgba(0,0,0,.5);
		margin-left:auto;
		margin-right:auto;*/
		background-color: #fff;
		min-height: 165px;
		width: 100%;
		padding: 20px;
		text-align: center;
		margin-bottom: 30px;
		-webkit-transition: box-shadow 500ms linear;
		-ms-transition: box-shadow 500ms linear;
		transition: box-shadow 500ms linear;
		/*border: 1px solid rgba(0,0,0,0.4);*/
		box-shadow: 0 1px 2px rgba(18,44,80,.4);
		/*border-top: 1px solid #0b3254;*/
		color: #595959;
		text-transform: uppercase; 
		font-family: 'Roboto', sans-serif;
		font-weight: normal;
		border: 1px solid rgba(0,0,0,0.15);
	}

	.card:hover{
		/*border: 2px solid black;
		margin-bottom: 20px;
		padding-bottom: 0px;
		border-radius: 3% 3% 8% 8%;
		transition: .4s;
		-webkit-box-shadow: -5px 5px 5px 0px rgba(0,0,0,.9);
		-moz-box-shadow: -5px 5px 5px 0px rgba(0,0,0,.9);
		box-shadow: -5px 5px 5px 0px rgba(0,0,0,.9);*/
		box-shadow: 0px 1px 8px rgba(0,0,0,0.45);
		-webkit-transition: box-shadow 500ms linear;
		-ms-transition: box-shadow 500ms linear;
		transition: box-shadow 500ms linear;
	}
	

	@media(max-width: 991px){
		.card{
			width: 90%;
			margin-left: auto;
			margin-right: auto;
		}
	}



	.card_link:hover {
		text-decoration: none!important;
	}

	.card-title {
		height: 1.5em;
		
	}

	h2.card-title {
		height: 1.5em;
		font-size: 1.1em;
    	margin: 1.67em 0;
    	text-transform: uppercase;
	}



/*7. Gardens */

	.garden_links li{
		cursor: pointer;
	}

	.close{
		position: absolute;
		right: 2%;
		top: 2%;
		font-size: 40px;
		z-index: 5;
		display: block;
		visibility: hidden;
	}

	.pop-up{
		position: absolute;
		left:50%;
		top: 50%;
		width: 0px;
		transition: .5s;
		z-index: 1;
	}

	.zoom-in{
		left: 0px!important;
		top: 0px!important;
		width: 100%!important;
	}
	.image-row{
		position: relative;
		margin: 0px;
	}

	.garden_thumbnail{
		position: absolute;
		cursor: pointer;
		margin: 0px!important;
	}

	.butterfly{
		width: 14.25%;
		height: 22.5%;
		top: 47%;
		right: 7%;
	}

	.daylily{
		width:18.5%;
		height: 25%;
		bottom: 2.5%;
		right: 3%;
	}
	
	.evergreen{
		width:16%;
		height: 16.5%;
		top: 3.5%;
		left: 26.5%;
	}

	.fern{
		width: 17%;
		bottom: 5.5%;
		left: 28%;
		height: 21%;
	}

	.hydrangea{
		width: 22%;
		height: 14%;
		top: 45.5%;
		left: 4.5%;
	}

	.prairie{
		width: 16%;
		height: 18%;
		top: 19%;
		right: 5.5%;
	}

	.rain{
		width: 13%;
		height: 14.5%;
		top: 7.5%;
		right: 25.5%;
	}

	.shade{
		width: 16.5%;
		height: 26%;
		bottom: 5.5%;
		left: 6.5%;
	}

	.vine{
		width: 16%;
		height: 25%;
		bottom: 4%;
		left: 50%;
	}

	.xerophytic{
		top: 16%;
		width: 14%;
		height: 22%;
		left: 3.5%;
	}

/*8. Flickity */

	body { font-family: sans-serif; }

	.carousel {
		background: #FFF;
		/*box-shadow: 0 2px 4px rgba(18,44,80,.2);*/
		height: 375px;
		margin-right:5px;
	}

	.flickity-page-dots {
		bottom: -20px!important;
	}

	.carousel-cell {
	  width: 31%;
	  height: 100%;
	  margin: 14px;
	  background: #FFF;
	  border-radius: 5px;
	  counter-increment: carousel-cell;
	  padding-left: 9px;
	}

	.flickity-slider{
		height: 375px;
	}

	.flickity-viewport{
		height: 100%!important;
	}

	@media (max-width: 1195px){
		.carousel{
			height: 370px;
		}
	}

	@media (max-width: 1180px){
		.carousel{
			height: 365px;
		}
	}

	@media (max-width: 1150px){
		.carousel{
			height: 355px;
		}
	}

	@media (max-width: 1119px){
		.carousel{
			height: 345px;
		}
	}

	@media (max-width: 1090px){
		.carousel{
			height: 340px;
		}
	}

	@media (max-width: 1070px){
		.carousel{
			height: 335px;
		}
	}

	@media (max-width: 1050px){
		.carousel{
			height: 330px;
		}
	}

	@media (max-width: 1025px){
		.carousel{
			height: 320px;
		}
	}

	@media (max-width: 991.9px){
		.carousel{
			height: 360px;
		}
	}

	@media (max-width: 972px){
		.carousel{
			margin-right: 0px;
			height: 355px;
		}
	}

	@media (max-width: 950px){
		.carousel{
			height: 350px;
		}
	}

	@media (max-width: 930px){
		.carousel{
			height: 345px;
		}
	}

	@media (max-width: 910px){
		.carousel{
			height: 340px;
		}
	}

	@media (max-width: 900px){
		.carousel{
			height: 333px;
		}
	}

	@media (max-width: 890px){
		.carousel{
			height: 330px;
		}
	}

	@media (max-width: 880px){
		.carousel{
			height: 325px;
		}
	}

	@media (max-width: 860px){
		.carousel{
			height: 320px;
		}
	}

	@media(max-width: 850px){
		.carousel-cell{
			width: 50%;
			margin: 0px;
			padding-left: 2px;
		}
		.carousel{
			height: 480px;
		}

	}

	@media (max-width: 825px){
		.carousel{
			height: 465px;
		}
	}

	@media (max-width: 800px){
		.carousel{
			height: 450px;
		}
	}

	@media (max-width: 775px){
		.carousel{
			height: 440px;
		}
	}

	@media (max-width: 767px){
		.carousel{
			height: 450px;
		}
	}

	@media (max-width: 740px){
		.carousel{
			height: 440px;
		}
	}

	@media (max-width: 720px){
		.carousel{
			height: 430px;
		}
	}

	@media(max-width: 700px){

		.carousel{
			height: 420px;
		}
	}

	@media (max-width: 675px){
		.carousel{
			height: 410px;
		}
	}

	@media (max-width: 650px){
		.carousel{
			height: 395px;
		}
	}

	@media (max-width: 630px){
		.carousel{
			height: 385px;
		}
	}

	@media (max-width: 610px){
		.carousel{
			height: 375px;
		}
	}

	@media (max-width: 580px){
		.carousel{
			height: 365px;
		}
	}

	@media (max-width: 560px){
		.carousel{
			height: 360px;
		}
	}

	@media (max-width: 550px){
		.carousel{
			height: 350px;
		}
	}

	@media (max-width: 530px){
		.carousel{
			height: 340px;
		}
	}

	@media (max-width: 500px){
		.carousel{
			height: 330px;
		}
	}

	@media (max-width: 480px){
		.carousel{
			height: 320px;
		}
	}

	@media (max-width: 475px){
		.carousel-cell{
			width: 100%;
		}

		.carousel{
			height: 500px;
		}

	}

	@media (max-width: 470px){
		.carousel{
			height: 495px;
		}
	}

	@media (max-width: 460px){
		.carousel{
			height: 487px;
		}
	}

	@media (max-width: 450px){
		.carousel{
			height: 477px;
		}
	}

	@media (max-width: 440px){
		.carousel{
			height: 468px;
		}
	}

	@media (max-width: 430px){
		.carousel{
			height: 460px;
		}
	}

	@media (max-width: 420px){
		.carousel{
			height: 450px;
		}
	}

	@media (max-width: 410px){
		.carousel{
			height: 440px;
		}
	}

	@media (max-width: 400px){
		.carousel{
			height: 432px;
		}
	}

	@media (max-width: 390px){
		.carousel{
			height: 425px;
		}
	}

	@media (max-width: 380px){
		.carousel{
			height: 420px;
		}
	}

	@media (max-width: 370px){
		.carousel{
			height: 415px;
		}
	}

	@media (max-width: 360px){
		.carousel{
			height: 400px;
		}
	}

	@media (max-width: 350px){
		.carousel{
			height: 390px;
		}
	}

	@media (max-width: 340px){
		.carousel{
			height: 380px;
		}
	}

	@media (max-width: 330px){
		.carousel{
			height: 370px;
		}
	}

	@media (max-width: 320px){
		.carousel{
			height: 360px;
		}
	}

	@media (max-width: 310px){
		.carousel{
			height: 350px;
		}
	}

	@media (max-width: 300px){
		.carousel{
			height: 340px;
		}
	}


	.flickity-button{
		opacity: .4;
		transition: .5s;
	}

	.flickity-button:hover {
		opacity: .9;
		transition: .5s;
	}


/*9. Facilities */

	.facility{
		box-shadow: 0px 1px 5px rgba(0,0,0,0.5);
		box-shadow: 0px 1px 5px rgba(18,44,80,0.5);
		border-top: 2px solid #660000;
		-webkit-transition: box-shadow 500ms linear;
		-ms-transition: box-shadow 500ms linear;
		transition: box-shadow 500ms linear;
		margin-bottom: 20px;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.facility:hover{
		box-shadow: 0px 1px 6px rgba(0,0,0,0.6);
		-webkit-transition: box-shadow 500ms linear;
		-ms-transition: box-shadow 500ms linear;
		transition: box-shadow 500ms linear;
	}


	@media (max-width: 767px){
		.facility h3{
			text-align: center;
		}
	}


/*10. Research */

	.research_image{
		margin: auto;
		width: 100%;
		min-width: 160px;
		max-width: 500px;
		/*padding: 8px 9px;
		border: 1px solid rgba(0,0,0,0.2);
		background: #fff;
		-moz-box-shadow: 0 3px 4px rgba(0,0,0,0.4);
		-webkit-box-shadow: 0 3px 4px rgba(0,0,0,0.4);
		box-shadow: 0 3px 4px #ddd;*/
	}

	.research_body p:first-of-type:first-letter{
		color: #660000;
    	float: left;
    	font-size: 50px;
    	line-height: 35px;
   	 	padding-top: 3px;
    	padding-right: 8px;
    	padding-left: 3px;
    	font-family: serif;
	}	

	.research_box{
		border-top: 2px solid #660000;
		box-shadow: 0 1px 4px rgba(18,44,80,.33);
		-webkit-transition: box-shadow 500ms linear;
		-ms-transition: box-shadow 500ms linear;
		transition: box-shadow 500ms linear;
		margin-bottom: 20px;
		padding-top: 5px;
		padding-bottom: 10px;
	}

	.research_box:hover{
		box-shadow: 0px 1px 4px rgba(0,0,0,0.5);
		-webkit-transition: box-shadow 500ms linear;
		-ms-transition: box-shadow 500ms linear;
		transition: box-shadow 500ms linear;
	}

	.research_title{
		color: #660000;
		padding-top: 10px;
	}
	@media(max-width: 767px){
		.research_title{
			text-align: center;
		}
	}

/*11. random */

	@media (max-width: 767px){
		#contact-map{
			display: none;
		}
		#contact-link{
			display: block!important;
		}
	}

	.external_link{
		width: 15px;
	}

	.people_text{
		text-align: left;
	}

	@media(max-width: 767px){
		.people_text{
			text-align: center;
		}
	}

	@media (max-width: 460px){
		.award-links{
			font-size: 0.9em;
		}
	}

	@media (max-width: 415px){
		.award-links{
			font-size: 0.8em;
		}
	}

	@media (max-width: 370px){
		.award-links{
			font-size: 0.7em;
		}
	}

		.associate_title{
			margin:1.33em 0em!important;
			margin-top:0em!important;
		}

		.no-top{
			margin-top:0!important;
		}

	@media (max-width: 767px){
		.page_title{
			text-align: center;
		}
		
		.associate-center{
			text-align: center;
		}
	}

a.skip-main {
    left:-999px;
    position:absolute;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
    z-index:-999;
}
a.skip-main:focus, a.skip-main:active {
    color: #fff;
    background-color:#000;
    left: auto;
    top: auto;
    width: 30%;
    height: auto;
    overflow:auto;
    margin: 10px 35%;
    padding:5px;
    border-radius: 15px;
    border:4px solid #640d0d;
    text-align:center;
    font-size:1.2em;
    z-index:999;
}

.slick-list:focus {
    outline:1px dotted #640d0d!important;
}

.slick-dots li button:focus {
	outline:1px dotted #640d0d!important;
}

.carousel-control:focus {
	outline:1px dotted #640d0d!important;
}

.flickity-enabled:focus {
	outline:1px dotted #640d0d!important;
}

.tab button:focus {
	outline:1px dotted #640d0d!important;
}

.feature .slick-prev:focus, .feature .slick-next:focus {
	outline:1px dotted #640d0d!important;
}