/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  padding-top: 8rem;
  color: #5a5a5a;
  background-color:#003060;
}

.video-fade{
  background-color:rgba(0, 0, 0, 0.8);
}
.video-modal-content{
  background-color:rgba(0, 0, 0, 0);
  border-style:none;
}
.video_mask{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:338px;
  z-index:25;
  opacity:0;
}
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.video-container iframe, .video-container object, .video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.videos{
  width:72%;
  height:auto;
}
.video-modal-content .close span{
  color:white;
}

.nounderline{
  text-decoration:none!important;
}

.modal-image img{
  width:100%;
  height:auto;
}
.lecturer-div{
  margin-bottom:5vh;
}
.lecturer-image_sq{
  transition: opacity .3s ease;
  width:100%;
  height:auto;
}
.lecturer-div:hover .lecturer-image_sq, .lecturer-div:focus .lecturer-image_sq{
  opacity: 0.7;
}
h3{
  font-weight:bolder;
}
h5{
  border-bottom:3px solid #5A5A5A;
  font-weight:bolder;
}


/* Extra small devices (portrait phones, less than 576px) */
@media screen and (max-width: 575.98px){
  #body-container{
	margin-bottom:4vh;
  }
  .title{
	margin:4vh auto 2vh auto;
  }
  .close span{
    font-size:40px;
  }
  #close-right{
	display:none;
  }
  #lecturer-space{
	display:none;
  }
  .lecturer-div{
	padding:0px 15px;
	margin-bottom:20px;
  }
  .lecturer-name{
	font-weight:bolder;
	font-size:12px;
	margin:8px auto 0 auto;
  }
  .pre-scrollable {
    max-height: 180vh!important;
    overflow-y: auto;
	padding-right:8px;
	margin-bottom:4px;
  }
  h3{
	margin:12px auto;
	padding-left:8px;
  }
  h5{
	font-size:18px;
	margin-top:8px;
	padding-left:8px;
  } 
  #client-lg{
	display:none;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media screen and (min-width: 576px) and (max-width: 767.98px){
  #body-container{
	margin-bottom:4vh;
  }
  .title{
	margin:8vh auto 6vh auto;
  }
  .close span{
    font-size:40px;
  }
  #close-right{
	display:none;
  }
  #lecturer-space{
	display:none;
  }
  .lecturer-div{
	padding: 0px 15px;
  }
  .lecturer-name{
	font-weight:bolder;
	margin:8px auto 0 auto;
  }
  .pre-scrollable {
    max-height: 180vh!important;
    overflow-y: auto;
	padding-right:8px;
	margin-bottom:4px;
  }
  h3{
	margin:12px auto;
	padding-left:8px;
  }
  h5{
	margin-top:8px;
	padding-left:8px;
  } 
  #client-lg{
	display:none;
  }
}

/* Medium devices (tablets, 768px and up) [ | ]  */
@media screen and (min-width: 768px) and (max-width: 991.98px) and (orientation: portrait){
  #body-container{
	margin:3vh auto;
  }
  .title{
	margin:4vh auto 2vh auto;
  }
  .close span{
    font-size:45px;
  }
  #close-right{
	display:none;
  }
  #lecturer-space{
	display:none;
  }
  .modal-image{
	margin:10px 0px;
  }
  .lecturer-div{
	padding: 0px 30px;
  }
  .lecturer-name{
	font-weight:bolder;
	font-size:20px;
	margin:10px auto 0 auto;
  }
  .pre-scrollable {
    max-height: 60vh!important;
    overflow-y: auto;
	padding-right:8px;
	margin-bottom:4px;
  }
  h3{
	margin:12px auto;
	padding-left:8px;
  }
  h5{
	margin-top:8px;
	padding-left:8px;
  } 
  #client-lg{
	display:none;
  }
}

/* Medium devices (tablets, 768px and up) [ - ]  */
@media screen and (min-width: 768px) and (max-width: 991.98px) and (orientation: landscape){
  #body-container{
	margin:4vh auto;
  }
  .title{
	margin:6vh auto 5vh auto;
  }
  .close span{
    font-size:45px;
  }
  #close-right{
	display:none;
  }
  #lecturer-space{
	display:none;
  }
  .modal-image{
	margin:12px 0px;
  }
  .lecturer-div{
	padding: 0px 30px;
  }
  .lecturer-name{
	font-weight:bolder;
	margin:10px auto 0 auto;
  }
  .pre-scrollable {
    max-height: 160vh!important;
    overflow-y: auto;
	padding-right:8px;
	margin-bottom:4px;
  }
  h3{
	margin:12px auto;
	padding-left:8px;
  }
  h5{
	margin-top:8px;
	padding-left:8px;
  }  
  #client-sm{
	display:none;
  }
}

/* Large devices (desktops, 992px and up) */
@media screen and (min-width: 992px) and (max-width: 1199.98px){
  #body-container{
	margin:3vh auto 4vh auto;
  }
  .title{
	margin:4vh auto 3vh auto;
  }
  .close span{
    font-size:45px;
  }
  #close-top{
	display:none;
  }
  .modal-image{
	margin:12px 0px;
  }
  .pre-scrollable {
    max-height: 48vh!important;
    overflow-y: auto;
	padding-right:8px;
	margin-bottom:4px;
  }
  .lecturer-name{
	font-weight:bolder;
	font-size:24px;
	margin:10px auto 0 auto;
  }
  h3{
	margin:12px auto;
	padding-left:8px;
  }
  h5{
	margin-top:8px;
	padding-left:8px;
  } 
  #client-sm{
	display:none;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) and (max-width: 1439.98px){
  #body-container{
	margin:5vh auto 6vh auto;
  }
  .title{
	margin:5vh auto 3vh auto;
  }
  .close span{
    font-size:45px;
  }
  #close-top{
	display:none;
  }
  .modal-image{
	margin:auto 0px;
  }
  .pre-scrollable {
    max-height: 63vh!important;
    overflow-y: auto;
	padding-right:8px;
	margin-bottom:4px;
  }
  .lecturer-name{
	font-weight:bolder;
	font-size:18px;
	margin:14px auto 8px auto;
  }
  h3{
	margin:12px auto;
	padding-left:8px;
  }
  h5{
	margin-top:8px;
	padding-left:8px;
  }
  #client-sm{
	display:none;
  }
}

/* Extra large devices (large desktops, 1440px and up) */
@media screen and (min-width: 1440px){
  #body-container{
	margin:4vh auto 5vh auto;
  }
  .title{
	margin:5vh auto 3vh auto;
  }
  .close span{
    font-size:45px;
  }
  #close-top{
	display:none;
  }
  .modal-image{
	margin:auto 0px;
  }
  .pre-scrollable {
    max-height: 38vh!important;
    overflow-y: auto;
	padding-right:8px;
	margin-bottom:4px;
  }
  .lecturer-name{
	font-weight:bolder;
	font-size:20px;
	margin:12px auto 0 auto;
  }
  h3{
	padding-left:8px;
  }
  h5{
	margin-top:8px;
	padding-left:8px;
  }
  #client-sm{
	display:none;
  }
}