/*
CSS File created for the MySJC Header
Homepage Layout Only
Date: 11-18-2019
Developer: Jamie Chavez
box-shadow: 0 8px 6px -6px black;

*/


/*Header Image*/
.hImgContainer{
	overflow: hidden;
	background: rgba(80, 7, 120, 1);
    display: flex;
    align-items: center;
    justify-content: center;
	width:100vw;
 	position:relative;
	top:0;
	min-height:15rem;
}
.blkBackground{
	background-color: #000000;
	 height:12rem;
}
.welcometxt{
  text-align:left;
  position:absolute; 
  bottom:1em; 
  width: -webkit-fill-available; 
  left:2rem;
}
.wlcm {
  width:14rem; 
  display:inline-block;
  position:relative;
  color:#ffffff;
}
.heroButton{
  border:1px solid #cccccc;
  background:rgba(84, 47, 144, .8);
}
.heroHeading{
  text-align:center; 
  overflow-wrap:break-word;
}
.heroHeading p, .heroHeading a{
  color:#ffffff;
  font-size: 1rem; 
  margin:0px;
  text-align:left;
}
.wlcmto {    
  color: #ffffff;    
  font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: 2.5rem !important;
}
.mysjc_search{
  	background-color: #542e8e;
    padding: 15px;
    border-radius: 5px;
  margin-left:15px;
}
.heroHeading button{
  background:transparent; 
  color:#ffffff; 
  border:1px solid #ffffff; 
  border-radius:5px; 
  font-size: 1.3rem; 
}
.heroHeading h1{
	color:#ffffff;
	font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	font-weight:300;
	font-size:2.5rem;
}
.heroHeading hr{    
  margin:0 auto 1.5rem auto;
  margin-top: 0; 
  width: 60%; 
}
.hImgContainer .row{
	z-index:1;
}
#mysjcLogo{
  display: inline-block;
  width: 60%;
}
#sjcLogo:hover img, #sjcLogo:focus img{
  border: 2px solid #ffffff;
}
#mysjcLogo img{
  min-width:unset !important; 
margin-left: -2rem !important;
  position:relative !important;
  opacity:1 !important; 
      margin-top: -6px !important;
  height: 100% !important;
}
#mainHImgContainer img{    
	margin: auto;
	max-height: 100%;
    min-width: 100vw;
    width: auto;
    object-fit: cover;
	position: absolute;
    top: 0;
    opacity: .5;
  left:0;
    }
	
.sjcHImg{
  height:100%;
}
.mysjc_search .large-7.column{
  padding:10px;
}
.searchBar input#query {
    border-radius: 5px;
    height: 2em;
}
.searchBar p{    
  font-size: 1rem;
  letter-spacing: 0.05em;
  font-weight:bold;
  margin:0px;
  color:#ffffff;
}
.heroHeading .large-4{
  display:inline-block; 
  width:32%; 
  flex:1; 
  max-width:28%;
}
.heroHeading .large-4 button, .heroHeading .large-4 a{
  width:95%; 
  height:60%; 
  padding:10px; 
  padding-bottom: 15px;
}
.heroHeading .large-4 button:hover, .heroHeading .large-4 button:focus{
  background-color:#542f90;
}
.mainHBtns{
  display:flex;     
  justify-content: center;
}
/*--NavIcons--*/
.navIcon img{
	/*Updated 1.18.24 for Quick Link Styling Improvements*/
	padding: 5px 10px;
    max-height: 75px;
    transition: all .2s ease-in-out;
    width: 28%;
    border-radius: 5px;
	    max-width: 65px;
}
.navIcon {
  padding:3px 10px; 
  max-height:75px;
  transition: all .2s ease-in-out;  
  width:20%;
    border-radius: 5px;  
}
.mySJC-linkList .flexItem a, .mySJC-linkList .flexItem p{
  color:#000000; 
  text-decoration:none;
}
.navIcon p{
  display:inline-block; 
  width:70%; 
  padding-left:10px; 
  font-weight:bold; 
  margin:0px;
  /*Added for Quick Link Styling Improvements 1.18.2024*/
  display: flex;
    align-self: center;
}

/*Added for Quick Link Styling Improvements 1.18.2024*/
.navIcon a{
	display: flex;
    text-decoration: none;
}
#navIconContainer{
  padding: 0px 0px; 
}
.navIcon:hover, .navIcon:focus{ 
  box-shadow: 0 8px 6px -6px black; 
  transform: scaleY(1.1);  
  transform-origin:center; 
  background-color:#f4f4f4;
}
.navFlex:last-child{
  margin-bottom: 10px;
}
.navFlex{
  justify-content:left; 
  padding-top: 5px; 
  margin:0px;
}
#navIconContainer .navFlex{    
	flex-wrap: wrap;
/*added for styling improvements 1.18.24*/
	margin-top: 0px;
    padding-top: 0;
    padding-bottom: 0;

}
.navIcon:last-child{ 
  float: left !important;
}

.quickLnkNav{display:none; margin: 5px auto; margin-bottom: 0; box-shadow:none; }

.quickLnkNav button{background-color: #ffda02;    color: #542f90;    font-size: 1.3rem;}

/*Added for Quick Links Header 1.18.2024*/
.navIconHeader{
    margin-top: 9px;
    margin-bottom: 0;
    padding: 0 20px;
    font-family: "museo500", "Droid Serif", Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
    font-style: normal;
    font-weight: 700;
    /* line-height: 1.4; */
    /* font-size: 2rem; */
    text-rendering: optimizeLegibility;
    letter-spacing: 0.2em;
    font-size: 1.6875rem;
}

@media only screen and (max-width: 64em){
.navIconHeader {
    margin-bottom: 5px;
}}

#mainNavLink button{background-color:transparent; margin:unset;  width: 8rem; position: fixed;    top: 10rem;    z-index: 2; background-color:#ffda02; color:#542f90; max-width:17%; box-shadow:none;}
#mainNavLink button:hover, #mainNavLink :focus{ background-color:gainsboro; color:#000000;}
#stuNavBtn button:hover, #stuNavBtn button:focus{background-color:gainsboro; color:#000000;}
#stuNavBtn button{
  	display: block;
    position: relative;
    text-decoration: none;
    width: 100%;
    margin: 0px auto 7px;
}
#stuNavBtn{
  text-decoration:none;
  display:block;
  padding-left:15px;
}
#mainNavLeft{position: fixed; height:100%; z-index:3; background-color:#ffffff; top: 0; width:50%; left:-50%; display:none;}

#mainNavRight{position: fixed; height:100%; z-index:3; background-color:#542f90; top: 0; width:50%; right:-50%; display:none;}

.sjcID{position:absolute; right:9em; max-width:8em; top:15px; text-align:right; color:#ffffff; z-index:10;}
.sjcID a{color:#ffffff;}

/*Fix for Menu buttons*/
@media only screen and (min-width: 1025px) and (max-width: 1300px){
	.wMenu .row{    margin: 0 auto 0 8.2rem; }
}

/*------------------------------------
			TABLET VIEW 
-------------------------------------*/
@media only screen and (max-width: 64em) {
 .mysjc_search {
 margin:0px 0px 15px 0px;
   
 }
	/*Header Image*/
		.heroHeading{
			top:15%; 
			width:90%; 
			margin:auto;
			padding-top: 40px;  
			padding-bottom: 35px;
		}
		#mainHImgContainer img{height:100%;}
		.heroHeading .large-4 button, .heroHeading .large-4 a{
			width:95%; 
			font-size: 1.3rem;
			margin: 0;
			padding: 10px;
		}
		.heroHeading .large-4 {
			margin-top:15px;
			flex:0 0 auto;
			width:100%;
			height: 100%;
			max-width:unset;
		}
  #mysjcLogo {
    margin-left:10px;
    width: 66%;
}
		
	/*Quick Link Icons*/
		.navFlex{
			float: left; 
			display:inline-block; 
			width:50%; 
			padding-top: 0px; 
		}
		#quickLnkPanel{
			 
			align-items:center; 
			width:80%; 
			margin-bottom: 10px;
			max-height:0px;	
			transition: max-height ease-in-out 20s;
		}
		.navIcon {
			width:100%; 
			padding-left: 10%;     
			border: 1px solid #cccccc;   
			background-color: #f4f4f4;
		}
		#navIconContainer{display: none;}
		.quickLnkNav{display:block; width:90%;}
		.navIcon  img{width: 10%;}

	/*Main Menu Buttons*/
		#stuNavBtn{display:none;}
  		
		#mainNavLink{display:none;}
  .mysjc_search, #sideNav{margin-left:0px;}
  

}
  .sjcIDMobile p {
		color: #000000;
		margin: 0px 0px 0px 0px;
		padding-left: 15px;
		font-size: .8em;
		display: inline-block;}

.mHomeBtn{background-color:#542e8e; margin:10px 0px;;}
.mHomeBtn a{width:100%; border: 1px solid #ffffff;}
/*---------------------------------
			MOBILE VIEW 
--------------------------------*/
@media only screen and (max-width: 51.442em) and (orientation: landscape){

}
.sjcIDMobile{background-color:#c0bdba;}

@media only screen and (max-width: 40em){	
	.logout{display:block !important; padding-bottom:10px;}
	.sjcID{display:none;}
	.mysjc_search .large-7.column{padding-bottom:0px ;}
	.heroHeading .large-4 {width:100%; min-height:70px;}
	.mainHBtns{display:block;}
	#sjcLogo img{min-width:unset !important; height: auto;     width: 25%;     max-width: 108px; top:10px;}
	.wlcmto{font-size: 1.5rem !important;}
	.wlcm{display:inline-block;  width: auto;}
	.welcometxt{left: 10px;}
	#mysjcLogo img{    max-width: 10em; min-width:unset !important;  max   object-fit: contain;     margin-left: 0px !important;}
	.navIcon {width:100%; padding: 5px;}
	.navFlex{width:100%;}
	.mySJCHeading h2{font-size:1.3rem; margin-bottom:0px;}
	.mSideNavAcc .wPanel{margin:0px;}
  #mysjcLogo{width:60%;}
}
@media only screen and (max-width: 441px){.mysjc_search .large-7.column{width:100%;}}

/*---------------------------------
			IE Styles
--------------------------------*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     .hImgContainer{display: block;}
	 .hImgContainer .row{position:absolute;	top:15%; right:0;	left:0;}
	 .mainHBtns{display:block; height:108px; }
	 .heroHeading .large-4{}
}





/* Main Nav Styles - JME*/

.menuLeft, .menuRight{
	height: 100%;
    width: 50.25%;
    position: fixed;
    z-index: 2;
    top: 0;

    transition: 1s;
    padding-top: 5%;
    margin: 0;
	padding-left:5%;
	max-height:100vh;
overflow:auto;
}
.menuLeft .row, .menuRight .row{width:auto; margin:0;}
.menuLeft{ background-color: #fff;     left: -50.25%; }
.menuRight{ background-color: #542f90;     right: -50.25%; }
  .menuLeft em,  .menuLeft p, .menuLeft h1, .menuLeft h2, .menuLeft h3 {	color: #542f90;   font-weight:bold; letter-spacing: .2em; text-transform: uppercase;}
  .menuLeft a{	color: #542f90; text-decoration:none; width:100%;  padding-left:10px;}
 .menuRight em, .menuRight p, .menuRight h1, .menuRight h2, .menuRight h3 {	color: #ffffff; font-weight:bold; letter-spacing: .2em; text-transform: uppercase;}
  .menuRight a{text-decoration:none; color: #ffffff; padding-left:10px;}
.menuLeft ul, .menuRight ul {list-style: none; display: flex; flex-wrap: wrap; margin-left:1rem;}
#closebtn{
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 60px;
  color: #fff;
  text-decoration: none;
  padding-left:0px;
  line-height:1em;
  width:1em;
  text-align: center;			
}
 .menuLeft li,  .menuLeft li, .menuRight li,  .menuRight li{flex: 1 0 40%; padding: 1px 11px; margin-left:10px; text-indent:-12px; margin-right:5%; max-width:40%}
 .menuRight li:hover ,  .menuRight li:focus {border:1px solid #ffffff; padding: 0px 10px;} 
 .menuLeft li:hover ,  .menuLeft li:focus {border:1px solid #542f90;  padding: 0px 10px;}
 
 @media only screen and (max-width: 64em){
 .menuLeft, .menuRight{display:none;}}



/*--- --------------------
Footer Edits 2023
------------------------------*/

.site-footer .flexContainer{justify-content:flex-start}

#sjcLogo{
  	display: block;
    position: relative;
    height: auto;
    width: 100%;
    border-bottom: none;
}

#sjcLogo img {
    top: auto;
    right: auto;
    display: block;
   height: 100px;
    min-width: 100px !important;
    padding: 9px;
}

#sjcLogo:hover,#sjcLogo:focus{background-color:transparent;}