* {box-sizing:border-box}


/* Slideshow container */
.slideshow-container {
  position: relative;
  margin: 0px auto;
  height:30rem;
  overflow-x:visible;
  
}
.slideshow-container button{margin: 0 auto; display: block; padding: .8rem 2rem .8rem 2rem; box-shadow:none;}
.slideshow-container img{height:100%;  width:100%;   object-fit: cover;}
.slideshow-container .large-6{height: 100%;}

.slideshow-container .next{   right: -41px;}
.slideshow-container .prev{ left: -40px;}
.slideshow-container .pause{background-color:transparent; color:#6b686d; box-shadow:none; position:absolute; left:10px;  padding:10px;  float:left; margin-top:-3rem;     z-index: 1;}
.slideshow-container .pause:hover, .slideshow-container .pause:focus{
	border:1px solid gainsboro; z-index:1; }
.ssDots{
	position: absolute;
    margin-top: -3rem;
    display: block;
	    height: unset !important;
}
.newsSlide {
  display: flex;
  height:unset;
      overflow: hidden;
}
}

.slideImg{float:right;}
/* Next & previous buttons */
.slideshow-container .prev ,.slideshow-container .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;

  font-weight:bold;
  transition: 0.6s ease;
  
  user-select: none;
  padding:16px;
}

/* Position the "next button" to the right */

/* On hover, add a black background color with a little bit see-through */

.slideText{padding:10px;float:left;}
/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  left: 44%;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.9s ease;
}

.ssDots .active, .dot:hover .dot:focus{
  background-color: #542f90;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}
.slideshow-container iframe{width:100%; max-height:68%;  height: calc(9 / 18 * 30vw);
    top: 0; margin:0; z-index:1;}
.modalVid iframe{max-height:calc(9 / 18 * 90vw);}
/* The Modal (background) */
.slideshow-container .modal {
  display: none;
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%;
  
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.7);
  overflow: hidden;
      justify-content: center;
    align-items: center;
}
.slideVid {    display: flex;
    align-items: center;}

/* Modal Content/Box */
.slideshow-container .modalVid{
 background-color: #fefefe;
    margin: 7% auto;
    height: 80%;	
    width: 80%;
    height: calc(9 / 18 * 90vw);
	top:0;
}
.slideshow-container .modalVid iframe{
	
	    position: inherit;
		height:100%;
		width:100%;
}



/* The Close Button */
.slideshow-container .close {

  font-size: 57px;
  font-weight: bold;
    color: #ffffff;
  position:fixed;
	top:10px;
  right:20px;
  line-height:3rem;
}

.slideshow-container .close:hover,
.slideshow-container .close:focus {
  color: #cccccc;
  text-decoration: none;
  cursor: pointer;
  border: 1px dashed #cccccc;
}
/*Background Sylting Variations
section.dkgrey .ssDots .active,section.dkgrey .dot:hover .dot:focus,section.purple .ssDots .active,section.purple .dot:hover .dot:focus{
  background-color: #ffffff;
}*/

section.purple .slideshow-container .pause,section.dkgrey .slideshow-container .pause{color:#ffffff;}
section.purple .ssDots .active, section.purple .dot:hover , section.purple .dot:focus { background-color: #bbbbbb;}
section.purple .dot { background-color: transparent; border: 1px solid #bbbbbb;}

.modalOver{
	width:50%; 
	height:100%;
	position: absolute; 
	top: 0; 
	z-index:2; 
	background-color: transparent !important;
	box-shadow: none;
}
.modalOver button{
    width: 100% !important;
    height: 100%;
    background-color: transparent;
    border: none;
  box-shadow: none;}
.modalUnder{
	height:100%; 
	width:50%; 
	background-color:#000000; 
	z-index:0; 
	position:absolute;
	top:0px;
}
.slideVid, .slideImg{float:left; height: 93%; margin-left: 50px;} 
.slideText {float:left;}

/*Responsive Styling*/
@media only screen and (max-width: 1262px) and (min-width: 1025px){
	
	.nSliders .row{
		max-width:92%;
	}
}


/*Mobile Styles*/
@media only screen and (max-width: 64em){
	
	.slideshow-container .large-6{height:unset;}
	.modalOver{width:100%; height:340px;}
	.modalUnder{width:100%; height:340px;}
	.slideshow-container{height:auto !important;}
	.slideText,.slideVid, .slideImg{  float:none; width:100%;}
	/*.slideVid, .slideImg{height:340px !important;}/*/
	.slideText{padding:3.5rem 15px 3rem 15px;}
	/*.newsSlide .large-6:last-child,.newsSlide .large-6:first-child{float:none; height: 28.7rem; }*/
	.ssDots{
		position: absolute !important; 
		display: block;
		top: 26rem;
		width: 100%;
	}
	.slideshow-container .prev  {
		left: 0px;
		z-index:1;
	    top: 22.8rem;
		border-radius:0px;
	}

	.slideshow-container .next  {
		right: 0px;
		z-index:1;
	    top: 22.8rem;
		border-radius:0px;
	}
	.slideshow-container iframe{width: 86%;  height:calc(9 / 18 * 90vw);   margin: 0px auto; }
}
@media only screen and (max-width: 682px){.slideshow-container iframe{width: 86%;  height:calc(9 / 18 * 90vw);}}

/*Print Styles*/ 
@media print{
	.slideshow-container {height:auto;}
	.newsSlide{display:block !important;}
	.slideText{color:#000000; opacity:1;}
}


/*Edits for MySJC Announcements*/
.wImg{float:left !important; width:60% !important;   padding: 0 10px 10px;}
#mysjcAnnouncements .slideText{width:90%; float:none; margin:auto;}
#mysjcAnnouncements .slideImg{ width:31%; height:100%;}
#mysjcAnnouncements .ssDots{right: -1rem;   bottom: 30%;    width: 5px;}
#mysjcAnnouncements .slideshow-container{height:330px; margin:5px auto; }
#mysjcAnnouncements .slideshow-container .next {right:0;}
#mysjcAnnouncements .slideshow-container .prev {left:0;}
#mysjcAnnouncements .slideshow-container .pause{left: 10%;}
#mysjcAnnouncements .slideshow-container .pause {left:0px; top:45px;}
#mysjcAnnouncements .slideVid{ height:100%; width:30%; padding:-bottom:10px;}
#mysjcAnnouncements .modalOver, #mysjcAnnouncements .modalUnder{width:30%; height:calc(9 / 18 * 30vw);}
#mysjcAnnouncements h3{margin-bottom:0px;}
#mysjcAnnouncements em{margin-bottom:10px;}
#mysjcAnnouncements .slideshow-container img{width:auto;}

@media only screen and (min-width: 1025px) and (max-width: 1300px){
  #mysjcAnnouncements .slideshow-container{ height: 375px;}
}

/*Tablet Styles*/
@media only screen and (min-width: 40.063em) and (max-width: 64em){
	#mysjcAnnouncements .large-6.slideText{ padding:0px;} 
#mysjcAnnouncements .slideText{width:80%; float:none; margin:auto; padding-top:0px;}
#mysjcAnnouncements .slideshow-container .next{top:50%;}
#mysjcAnnouncements .slideshow-container .prev {top:50%}
#mysjcAnnouncements .ssDots{top:52%}
#mysjcAnnouncements .slideImg, #mysjcAnnouncements .slideVid {
    float:right;
    height: auto;
   margin: 0 50px 0 0; 
}

  #mysjcAnnouncements .slideshow-container{height:auto !important;}
.wImg{width:90% !important; float: none !important;}
.slideshow-container img{height:auto; }
.mySJC-eventListItem{width:60%;}
#mysjcAnnouncements .slideImg{}
#mysjcAnnouncements .slideVid iframe{height:calc(9 / 18 * 49vw);}
#mysjcAnnouncements .slideVid{width:50%;    margin:0 50px 0 0px; }
#mysjcAnnouncements .modalOver, #mysjcAnnouncements .modalUnder{width:50%; height:calc(9 / 18 * 50vw)}
#mysjcAnnouncements .modalOver button{width:100%; height:calc(9 / 18 * 50vw)}
}

/*MobileStyles*/
@media only screen and (max-width: 40em){
	
#mysjcAnnouncements .slideText{width:90%; padding:0; margin-top:30px;}
#mysjcAnnouncements .slideshow-container .prev{left: 0; top: 20px;  height: 30px;  padding: 0 10px; }
#mysjcAnnouncements .ssDots { top: 0px;  right: 40%; width:unset; height:auto; margin-top:5px; bottom:unset;}
#mysjcAnnouncements .slideshow-container .next { right: 0; top: 20px; height: 30px; padding: 0 10px;}
#mysjcAnnouncements .slideshow-container .pause { left: -30px;  top: 40px;}
#mysjcAnnouncements .slideImg, #mysjcAnnouncements .slideVid  { margin:30px auto 0; height:auto !important; width: 100%;}
.wImg{margin-top:0px; width:100% !important; margin: 0 0 10px 0 !important;  }
 #mysjcAnnouncements .modalUnder{display: none;}
 #mysjcAnnouncements .modalOver{width:100%; height:calc(9 / 18 * 90vw); margin-top:50px;}
}