
#pageContainer {
  margin-top: 135px;
}

@media only screen and (max-width: 991px) {
  #pageContainer {
    margin-top: 40px;
  }
}

#subtitle {
  position: relative;
  font-size: 35px;
}

.blogPost {
  box-shadow: 10px 10px 50px lightgrey;
  margin-bottom: 80px;
}

.mentionPost {
  display: flex;
  flex-flow: row;
  box-shadow: 10px 10px 50px lightgrey;
  margin-bottom: 60px;
}

.align-right {
  margin-top: 8px;
  position: relative;
  right: -25%;
}

.blogPost div {
  height: 500px;
}

.mentionPost div {
  height: 180px;
}

.blogPost h3 {
  font-size: 30px;
}



@media only screen and (max-width: 1199px) {

  .leftContainer h3 {
    font-size: 25px !important;
  }

  .midContainer img {
    height: 400px !important;
    position: relative;
    top: 50px;
  }

  .blogPost div {
    height: 450px;
  }
  .blogPost iframe {
    width: 80%;
    height: 60%;
    margin: 130px auto 10px auto;
  }

  .rightContainer {
    font-size: 15px;
    line-height: 170%;
  }

  .rightContainer h3 {
    font-size: 24px;
  }
}

@media only screen and (max-width: 991px) {

  .blogPost, .mentionPost {
    box-shadow: 0px 0px 0px white;
    border-top: 1px solid lightgrey;
  }
  .leftContainer {
    height: 350px !important;
  }
  .rightContainer {
    height: 150px !important;
  }
}


/* Section switcher */

#section-nav {
  height: 35px;
  width: 650px;
  margin: 0 auto 55px auto;

  display: flex;
  flex-flow: row;
}

.section-item {
  width: 18%;
  flex: 1 1 18%;
  text-align: center;
  font-size: 16px;
  line-height: 35px;
  background-color: clear;
  border-radius: 17.5px;
  margin: 0 4px;
}
.section-item a {
  text-decoration: none;
  color: inherit;
}
.section-item.active:hover {
  color: white !important;
}
.section-item.active a:hover {
  color: white !important;
}
.section-item:hover {
  color: #6a89cc !important;
}
.section-item a:hover {
  color: #6a89cc !important;
}

.section-item.active {
  background-color: #6a89cc;
  font-weight: bold;
  color: white;
}


@media only screen and (max-width: 991px) {
  #section-nav {
    height: 220px;
    width: 100vw;
    flex-flow: column;
    margin-left: -15px;
    margin-bottom: 0;
  }
  .section-item {
    width: 45%;
    flex: 0 1 35px;
    margin-left: auto;
    margin-right: auto;
  }

  #footer {
  	margin-top: 30px !important;
  }
}

/* Footer */

#footer {
	margin-top: 60px !important;
}
