/*color guide
bright orange: #E49526
dark navy: #1a2150 (outdated)
purplish gray: #DEE1F6
dark dark navy:#151c4d (outdated)
color of blue jeans: #5b80c4
*/
/*color guide v2
dark blue:#121940 ;
dark dark blue: #091038;
light blue #E9F2FA;
when in doubt to colors always refer to style.css
*/
html {
  height:100%;
}
body {
  margin:0px;
  font-family: "Lato", sans-serif;
}
hr {
  margin-top:0;
  margin-bottom:0;
}
p {
  font-size:18px;
}
/*for the margins*/
.sciovirtualContainer {
  max-width:1000px;
  position:relative;
  left:50%;
  transform:translateX(-50%);
}
/*buttons*/
.orangebtnlink {
  color:white;
  text-decoration:none;
  font-size:20px;
  border-radius:30px;
  border-style:solid;
  border-width:4px;
  border-color:#E49526;
  transition-duration:0.5s;
  width:150px;
  font-weight:700;
  background-color:#E49526;
}
.orangebtnlink:hover {
  color:#E49526;
  background-color:transparent;
}
.bluebtnlink {
  color:white;
  text-decoration:none;
  font-size:20px;
  border-radius:30px;
  border-style:solid;
  border-width:4px;
  border-color:#5b80c4;
  transition-duration:0.5s;
  width:150px;
  font-weight:700;
  background-color:#5b80c4;
}
.bluebtnlink:hover {
  color:#5b80c4;
  background-color:transparent;
}
.btnContainContainer {
  margin-top:30px;
  /*background-color:pink;*/
}
.btnContainer {
  display:inline-block;
  margin-left:0px;
  margin-right:0px;
  text-align:center;
  width:49%;
}

@media screen and (max-width:400px) {
  .btnContainer {
    display:block;
    width:100%;
    margin-bottom:20px;
  }
}
/*course description*/
.courseDescription h1{
  font-weight:900;
  font-size:50px;
}
.cdHeader {
  text-align:center;
  color:#121940
}
/*topics covered*/
.topicsCovered {
  background-color:#DEE1F6;
}
/*instructors*/
.instructors{
  text-align:center;
}
.instructorTile p:nth-child(2) {
  color:red;
}
.section {
  text-align:center;
  margin-top:10px;
  padding-left:10%;
  padding-right:10%;
  padding-top:20px;
  padding-bottom:20px;
}
.section > h3 {
  color:#16243C;
  font-size:50px;
  font-weight:400;
}
.section > p {
  font-size:25px;
  font-weight:100;
  margin-top:37px;
  line-height:40px;
}
.section > p:nth-child(3) {
  font-weight:normal;
}

.bg-image{
  background: url("/assets/img/chemistrypattern.jpg") no-repeat;
  height: 200px;
  background-position: center;
  background-size: cover;
  position: relative;
  background-attachment:fixed;
  z-index:1;
  margin-top:65px;
}

.bg-image::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background:  #151C4Dcb;
}

.bg-text {
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width:90%;
  z-index: 2;
  padding: 20px;
  text-align: center;
}
.bg-text h1 {
  font-size:90px;
  font-weight: 500;
  text-shadow: 4px 4px 4px black;
}

.flextable {
  display: flex;
  flex-wrap: wrap;
}
.flexelement {
  width:33.333333333333333333333%;
  background-color:blue;
  margin-top:20px;
  position:relative;
}
.profilepic {
  width:100%;
  height:auto;
  display:block;
  margin:auto;
}
.hoverimage {
  position:relative;
  width:80%;
  margin:auto;
}
.description {
  background-color:grey;
  width:80%;
  margin:auto;
}
.description > p {
  font-size:20px;
  line-height:25px;
  padding:2px 0px;
  margin-top:0px;
  margin-bottom:0px;
}
.description > p:nth-child(1) {
  font-weight:bold;
}
.hoverimage:hover .aboutperson {
  display:block;
}
.aboutperson{
  top:0;
  left:0;
  right:0;
  bottom:0;
  position:absolute;
  background:rgb(0,128,0,0.8);
  height:100%;
  display:none;
}