/* CSS Document */
/* Index
1.Base
2.quicklinks
3.twitter
4.Faculty 
5.effect-apollo (Students/index.php)
6.effect-ming (explore.php)
7.Student pages
8.dynamic tabs
9.student/health pics 
10.Responsive Video
11.facilities
12.Sensory
13.Forms
14.SDA
15.Mission
16.Effect Ruby(explore_index.php)
*/

/*1. Base*/

body { background-color:#000; color:#FFF; overflow-x:hidden; }

.container-fluid { width:100%; padding:0; max-width:100%;}


	a { color:#cbbe93; }
	a:hover { color:#d7ab44; }

blockquote a {text-decoration: underline;}

	.clear { margin-top:25px; }

.top-menu-row { float:right; }
.level-university { display:inline-block; padding:5px 10px; font-size:12px; border-right:1px solid #555;}
	.level-university:last-child { display:inline-block; padding:5px 10px; font-size:12px; border-right:none;}
.level-university a { color:#CCC; }
.menu-nav { background-color:#000; padding:0 3px 0 3px; }

.left-nav {}
.left-nav li { list-style:none; margin-bottom:25px;}
.left-nav li a { color:#FFF; }
.left-nav li a:hover { color:#d7ab44; text-decoration: none;}

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

.cloned { background-color:#000; border-bottom:2px solid #FFF; padding-left:30%; }


	.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; font-weight:bolder; }
	nav#main-menu.navbar .navbar-nav > li > a:hover { color:#490C0F !important; }
	nav#main-menu.navbar .navbar-nav > li > a:focus { color:#490C0F !important; }

.salamander-bg { background-image:url("../img/shemani-gradient.jpg") !important; background-size: cover !important; background-position: 50% 7% !important}

.header-img { width:auto; position:absolute; top:50%; left:50%; z-index:-10; height:1080px; min-height:100%; min-width:100%; transform: translateX(-50%) translateY(-50%);}
	.nav li a { color:#FFF; text-shadow: 0px 4px 3px rgba(0,0,0,0.6),
             0px 8px 13px rgba(0,0,0,0.3),
             0px 18px 23px rgba(0,0,0,0.3);}
	.nav li a:hover { background-color: #000; }
	.navbar-inverse { background:none; }
	.navbar-inverse .navbar-nav li a { color:#FFF; }
	
	header#msu-header { height:450px; background:none; background-color:rgba(0,0,0,0); border: none; overflow:hidden;}

.navbar-wrapper { background-color:#222; }
#navbar { padding-top:15px; border:0; text-align:center; display:flex !important; justify-content: center; align-items: center;}
.navbar { border:0; }

ul.nav li { padding: 0px 30px; }

.marketing { margin-top:50px; }

.intro { text-align: center;}


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

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

	#feature h3{
		margin-bottom: 0px;
	}

	#feature h4{
		margin-top: 5px;
	}

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

/*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. twitter*/
	.col-twitter{
		height: 22.75em!important;
		overflow: hidden;
	}

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

	@media (max-width: 1120px){
		.col-twitter{
			height: 23.5em;
		}
	}

	@media (max-width: 1025px){
		.col-twitter{
			height: 25em;
		}
	}

	@media (max-width: 940px){
		.col-twitter{
			height: 26em;
		}
	}

	@media (max-width: 820px){
		.col-twitter{
			height: 29.25em;
		}
	}

	@media (max-width: 767px){
		.col-twitter{
			height: 40em;
			margin-bottom: 5em!important;
		}
	}

	.twitter-timeline{
		height: 100% !important;
	}

	.page-head{
		color: #660000;
	}
	.timeline-Header-title{
		color: #660000!important;
	}


/*4. Faculty*/
	.people-info {
		height: 4em;
		padding: 1em 0;
	}

	@media (max-width: 768px){
		.people-info {
		text-align: center;
		}
	}

	.faculty_label{
		padding:10px;
		background-color: #660000;
		color: #FFF; 
		text-align: center;
		margin-top: 1em;
	}


/*5. effect-apollo*/
	figure.effect-apollo{
		background: #000000!important;
		min-width: 235px!important;
		width: 100%!important;
		height: 100%!important;
	}

	figure.effect-apollo img{
		opacity: .8!important;
	}

	figure.effect-apollo h2{
		text-shadow: 1px 1px #fff;
	}


/*6. effect-ming*/
	figure.effect-ming {
		width: 100%!important;
		max-width: none!important;
	}
	figure.effect-ming h2{
		font-weight: 600!important;
		margin:0px;
	}

	@media (max-width: 1155px){
		figure.effect-ming h2{
			font-size: 1.75em;
		}
	}
	@media (max-width: 1119px){
		figure.effect-ming h2{
			font-size: 2em;
		}
	}
	@media (max-width: 980px){
		figure.effect-ming h2{
			font-size: 1.5em;
		}
	}
	@media (max-width: 840px){
		figure.effect-ming h2{
			margin:10% 0px -10px 0px!important;
			font-size: 1.5em;
		}
	}
	@media (max-width: 767px){
		figure.effect-ming h2{
			margin:5% 0px 10px 0px!important;
			font-size: 2.5em;
		}
	}
	@media (max-width: 640px){
		figure.effect-ming h2{
			margin:0px 0px -10px 0px!important;
			font-size: 2em;
		}
	}
	@media (max-width: 480px){
		figure.effect-ming h2{
			font-size: 1.75em;
		}
	}
	@media (max-width: 420px){
		figure.effect-ming h2{
			font-size: 1.5em;
		}
	}
	@media (max-width: 345px){
		figure.effect-ming h2{
			font-size: 1.65em;
		}
	}
	@media (max-width: 330px){
		figure.effect-ming h2{
			font-size: 1.5em;
			margin:20% 0px -10px 0px!important;
		}
	}
	@media (max-width: 450px){
		figure.effect-ming p{
			display:none;
		}
	}
	@media (max-width: 300px){
		figure.effect-ming h2{
			margin:0px!important;
			font-size: 1.4em;
		}
	}
	@media (max-width: 280px){
		figure.effect-ming h2{
			font-size: 1.3em;;
		}
	}

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

	.student_page{
		padding-top: 2em;
	}

	.students_desc {
		padding-top: 15px;
		color: #660000;
	}
	@media (max-width: 768px){
		.students_desc {
			margin-bottom: -10px!important;
		}
	}

	@media (max-width: 1095px){
		figure.effect-apollo p{
			display:none;
		}
	}

	@media (max-width: 768px){
		figure.effect-apollo p{
			display: block;
		}
	}

	@media (max-width: 420px){
		figure.effect-apollo p{
			display:none;
		}
	}



/*8. dynamic tabs*/
	.button_back {
		background-color: #660000; 
		border: none;
		color: white;
		padding: 15px 32px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 16px;
		margin: 4px 2px;
		cursor: pointer;
		-webkit-transition-duration: 0.4s; /* Safari */
		transition-duration: 0.4s;
	}

	.button_back:hover {
		box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
	}


	/*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;
	}

	.tab button.active:focus {
	outline: 1px solid blue;
	}

	.tab button:focus {
	outline: 1px solid blue;
	}

	/* 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;
		}
	}
	.health_tab{
		height:4.1em;
	}
	@media (max-width: 767px){
		.health_tab{
			height:3em!important;
		}
	}

	.sensory_tab{
		border: 1px solid lightgrey;
	}

/*End of dynamic tab styles*/


/*9. Students/health pics*/
	.grad_pic {
		padding-top: 1.75em;
		float:left; 
		padding-right:10px;
	}

	.col-faculty_pic{
			padding-bottom:10px;
		}

	@media (max-width: 650px){
		.col-faculty_pic{
			width:100%;
			height: 155px;
		}

		.col-faculty{
			width:100%;
		}
	}


/*10. Responsive Video*/
	.video-responsive{
		overflow:hidden;
		padding-bottom:56.25%;
		position:relative;
		height:0;
	}
	.video-responsive iframe{
		left:0;
		top:0;
		height:100%;
		width:100%;
		position:absolute;
	}



/*11. facicilites page*/
	.fac_photo{
		float:left;
		padding-right: 10px;
		padding-bottom: 4px;
	}


/*12. Sensory*/
	.sensory_tabs{
		display: none;
	}
	.sensory_sidetabs{	
		margin-bottom: 15px;
	}
	
	@media (max-width: 767px){
		.sensory_tabs{
			display: block;
		}
		.sensory_sidetabs{
			display: none;
		}
	}

	.sensory_menu{
		background-color:#eee;
		color: #660000;
		font-size: 1.5em;
		padding-bottom: 0px;
	}
	.menu_tab:hover{
		background-color: #660000!important;
		color: #fff;
	}

	.menuActive{
		background-color: #660000!important;
		color: #fff;
	}	

	.menu_content{
		margin-top:-32px;
		margin-left: 10px;
		margin-right: 10px;
	}
	@media (min-width: 768px){
		.menu_content{
			display: none!important;
		}
	}


	.back_button{
		float: right;
		width: 50%;
		height: 40px;
		background-color: #660000;
		color: #fff;
		border: none;
	}

	.back_button:hover{
		opacity: .9;
	}

	@media (max-width: 768px){
		.back_button{
		width: 100%;
		}
	}


/*13. Forms*/
	
	@media (max-width: 768px){
		.form_full{
			padding-left: 0px!important;
			padding-right: 0px!important;
		}
	}
	.form_button{
		background-color:#660000;
		color: #eee;
	}
	.form_button:hover{
		background-color: #ABABAB;
		color: #660000;
	}
	
	.class_option{
		font-weight: bold!important;
	}

	.pay_options{
		border: none;
	}
	.payment_desc{
		margin-top: 10px;
		border: 2px solid #660000;
		padding: 7px;
		background-color: #EEEEEE;
	}
	.pay_label{
		color: #660000;
	}

	.servsafe_button{
		background-color:#660000;
		color: #eee;
		height:3em;
		width:6.5em;
	}
	.servsafe_button:hover{
		background-color: #ABABAB;
		color: #660000;
	}


/*14. SDA*/
	.sda_names{
		color: black;
	}

	.orgsync-logo{
		border-radius:16px;
	}

	.social-logo{
		height:30%;
		width: 40%;
		margin-left: auto;
		margin-right: auto;
		display: block;
		transition: width 1s, height 1s;
		-webkit-transition: width 1s, height 1s;
	}
	.social-logo:hover{
		opacity: .7;
		width: 50%;
	}

	.social-row{
		display: flex;
		align-items: center;
		height: 100%;
		background-color:#eaeaea;
		border-radius:15px;
		min-height: 95px;
	}

	@media(max-width: 900px){
		.social-logo{
			width: 50%;
		}
		.social-logo:hover{
			width: 60%;
		}
	}

	@media(max-width: 768px){
		.social-logo{
			heigth: 75%;
			width: 75%;
		}
		.social-logo:hover{
			opacity: .7;
			width: 85%;
		}
		.social-row{
			min-height:150px;
		}

	}

	@media(max-width: 630px){
		.social-row{
			min-height: 125px;
		}
	}

	@media(max-width: 500px){
		.social-row{
			min-height: 100px;
		}
	}

	@media(max-width: 440px){
		.social-logo{
			width: 50px;
		}
		.social-logo:hover{
			opacity: .7;
			width: 60px;
		}
	}
	@media(max-width: 400px){
		.social-row{
			min-height: 75px;
		}
	}

	
	.social-col{
		margin-top:0!important;
		margin-bottom:0!important;
	}

/*15. Mission*/
	.mission-statement{
		font-size: 1.25em;
	}


/*16. Effect-ruby(explore_index.php*/
	
	figure.effect-ruby h2{
		margin:10% 0px 0px 0px!important;
		font-weight: 600!important;
	}

	@media(max-width: 800px){
		figure.effect-ruby p{
			font-size: 0.65em!important;
		}
		figure.effect-ruby h2{
			margin: 5% 0px 0px 0px!important;
		}
	}
	@media(max-width: 767px){
		figure.effect-ruby h2{
			font-size: 2em!important;
		}

	}

	@media(max-width: 500px){
		figure.effect-ruby h2{
			font-size: 1.25em!important;
		}
		figure.effect-ruby p{
			font-size: 50%!important;
		}
	}

	@media(max-width: 410px){
		figure.effect-ruby h2{
			font-size: .9em!important;
		}
	}

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;
}

a.list-group-item, button.list-group-item {
    color: #525252 !important;
}

.slick-dots li button:focus {outline-color:blue; }