body {
  color: #232323;
  font-family: "Open Sans", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !important;
  font-weight: 300 !important;
  margin: 0;
  padding: 0;
}

h1 {
  font-family: "Raleway", sans-serif;
  font-size: 40px;
  font-weight: 300;
  padding: 0;
}

hr {
  display: inline-block;
  padding: 0;
}

img {
  max-width: 100%;
}

li {
	list-style-type: none;
}

li input {
	display: none;
}

li.edit span {
	display: none;
}

li.edit input {
	display: initial;
}

main {
  text-align: center;
}

p.whiteText {
  opacity: 0;
}

ul {
  list-style: none;
  padding-left: 0;
}

#activeTab {
  background-color: #333333;
  border-bottom: 8px solid white;
}

#banner {
  font-size: 0;
  width: 100vw;
  margin-top: -8vw;
  padding: 0;
  z-index: 1;
}

#bannerHeader {
  display: none;
  text-align: center;
  /* crop the banner */
  margin: -8vw;
}

#bannerHeader span {
  background-color: white;
  font-size: 4.46vw;
  max-height: 0;
  opacity: 0;
  position: absolute;
  top: 10vw;
  left: 0;
  right: 0;
  margin: 0 auto;
}

#bottom {
  text-align: center;
  font-family: Times New Roman, serif;
  font-size: 12px;
}

#darkBg {
  background-color: #232323;
  padding-bottom: 3vw;
  text-align: center;
}

#darkMargin {
  background-color: #232323;
  padding: 0vw 5vw 5vw 5vw;
}

#lightBg {
  background-color: white;
  padding-bottom: 3vw;
  text-align: center;
}

#navBar {
  background-color: black;
  box-shadow: 0px 1px 5px #1c1c1c;
  font-size: 0;
  padding: 1vw 0vw 1vw 0vw;
  position: absolute;
  opacity: .75;
  overflow: hidden;
  top: 0;
  margin: 0;
  min-width: 100%;
  z-index: 2;
}

#navBar li {
  display: inline;
  font-size: 15px;
}

#navBar a {
  color: lightgrey;
  padding: 1.5vw;
  text-decoration: none;
}

#navBar a:hover {
  color: #232323;
  background-color: lightgrey;
}

#mainBody {
  margin-top: 0px;
  background-color: #FEFEFA;
  border-radius: 2vw;
  overflow: hidden;
  z-index: 2;
}

#mainBody.padBottom {
  padding-bottom: 3vw;
}

#holder {
  padding: 0vw 2vw 2vw 2vw;
  background-color: #232323;
  text-align: center;
}

#overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.85);
    z-index: 3;

}

#overlayImage {
  max-height: 90vh;
  max-width: 80vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

#replaceCup {
  font-size: 0;
}

.circleText {
  font-size: 2vw;
  position: absolute;
  top: 2vw;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.halfCircle {
  border-top-left-radius: 8vw;
  border-top-right-radius: 8vw;
  background-color: #FEFEFA;
  height: 8vw;
  width: 16vw;
  position: absolute;
  left: 42.2%;
  top: 20vw;
  text-align: center;
  z-index: 0;
}

.halfCircleDown {
  border-bottom-left-radius: 5vw;
  border-bottom-right-radius: 5vw;
  background-color: lightgrey;
  height: 5vw;
  width: 10vw;
  position: absolute;
  left: 42.4vw;
  text-align: center;
  margin-top: -1.3vw;
  z-index: 0;
}

.imgCircle {
  display: none;
  height: 20vw;
  width: 20vw;
  position: absolute;
  left: 37vw;
  top: -10vw;
  text-align: center;
  z-index: 0;
}

/* For fake play button - i to exclude my YouTube profile link icon */
i.fa.fa-youtube-play {
  color: #232323;
  font-size: 5vw;
  position: absolute;
  margin: 6vw 0vw 0vw -2vw;
  z-index: 3;
}

/* Position a white square behind the above icon.
 * Using a fa font so that it loads synchronously with above icon.
 */
.fa.fa-stop {
  color: #FEFEFA;
  font-size: 2vw;
  position: absolute;
  margin: 7.5vw 0vw 0vw -.5vw;
  z-index: 2;
}

i.fa.fa-times {
  color: #FEFEFA;
  cursor: pointer;
  font-size: 45px;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
}

i.fa.fa-chevron-right {
  color: white;
  cursor: pointer;
  font-size: 4vw;
  position: absolute;
  top: 50%;
  right: 2vw;
  z-index: 5;
}

i.fa.fa-chevron-left {
  color: #FEFEFA;
  cursor: pointer;
  font-size: 4vw;
  position: absolute;
  top: 50%;
  left: 2vw;
  z-index: 5;
}

i.fa.fa-chevron-down {
  color: #232323;
  cursor: pointer;
  font-size: 3vw;
  padding-top: 1.5vw;
  z-index: 3;
}

i.fa.fa-chevron-up {
  color: #232323;
  cursor: pointer;
  font-size: 3vw;
  padding-top: 1vw;
  z-index: 3;
}

i.fa.fa-info-circle {
  color: white;
  cursor: pointer;
  margin-left: 1vw;
}

i.fa.alt.fa-chevron-down {
  color: #232323;
  cursor: pointer;
  font-size: 3vw;
  top: 20vw;
  left: 48.85%;
  position: absolute;
  z-index: 3;
}

i.fa.fa-info-circle:hover {
  color: #42d4f4;
  transition: .2s ease;
}

.fadeIn {
  color: #1a1a1a;
}

.floater {
  float: right;
  display: inline-block;
}

.grey {
  background-color: lightgrey;
  padding: 0vw 3vw 3vw 3vw;
}

.imgGridContainer {
  margin: 0 5.5vw;
}

.imgRow {
  display: flex;
  flex-wrap: wrap;
  padding: 0px;
}

.imgColumn1, .imgColumn2, .imgColumn3 {
  flex: 33%;
  max-width: 60%;
  margin: 0 auto;
  padding: 0 auto;
}

.imgRow img {
  cursor: pointer;
  vertical-align: middle;
  max-width: 23.5vw;
  padding-top: 1vw;
}

.hide{
	display: none;
}

.jumbotron {
  text-align: center;
}

.leftPad {
  padding: 0px 0px 0px 2px;
}

.my_profile_bigScreen {
  border-top-right-radius: 2vw;
  border-bottom-right-radius: 2vw;
  max-height: 75vh !important;
  max-width: 38vw;
  margin-left: 6vw;
  box-sizing: border-box;
  float: right;
  display: inline;
}

.my_profile_smallScreen {
  display: none;
  max-height: 60vw;
  width: auto;
}

.padMe {
  padding: 2vw 5vw; /* top and bottom, then right and left */
  text-align: center;
  position: relative;
  z-index: 2;
}

.padMeSide {
  padding: 0vw 7vw;
}

.paragraphs, .paragraphs2 {
  text-align: justify;
  text-justify: inter-word;
  padding: 1vh 3vw 0 3vw;
  margin: 0;
}

.hrLeft {
  text-align: left;
  padding: 0vh 3vw;
}

.pdfs {
  max-width: 10vw;
}

.rightPad {
  padding: 0px 2px 0px 0px;
}

.seeMore {
  background-color: lightgrey;
  border-bottom-left-radius: 1vw;
  border-bottom-right-radius: 1vw;
  display: none;
  margin: 0 auto;
  padding: 0;
  width: 32vw;
  position: relative;
  text-align: center;
  z-index: 2;
}

.seeMore2 {
  background-color: lightgrey;
  border-bottom-left-radius: 1vw;
  border-bottom-right-radius: 1vw;
  display: none;
  margin: 0 auto;
  padding: 0;
  width: 32vw;
  position: relative;
  text-align: center;
  z-index: 2;

}

.socialMedia {
  color: grey;
  font-size: 36px;
}

.socialMedia:hover {
  color: #22323;
  text-decoration: none;
}

.soundCloud {
  max-width: 550px;
}

.tinyGrid {
  background-color: lightgrey;
  border-radius: 1vw;
  /* display: inline-block; */
  padding: 1vw 1.5vw 1.5vw 1.5vw;
  position: relative;
  z-index: 2;
}

.tinierGrid {
  margin: 0 15vw;
}

.videoInfo {
  color: white;
  padding: 2vw;
}

.vidThumbnail {
  cursor: pointer;
  margin-top: 4px;
  max-width: 12vw;
}

.vidThumbnailInfo {
  display: none;
}

.videoContainer {
  position: relative;
}

.videoInfoOverlay {
  background-color: rgba(0,0,0,0.85);
  display: none;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
}

.videoSpan {
  background-color: #232323;
  border-top-left-radius: 1vw;
  border-top-right-radius: 1vw;
  color: white;
  display: inline-block;
  margin: 2vw 1vw;
  position: relative;
}

.videoSpan#tinyGridPreview {
  margin: 0;
}

.whiteText {
  color: #1c1c1c;
}

.youTubeWrapper , .localVideo {
  cursor: pointer;
  margin: 0 auto;
  min-width: 192px;
  padding: 0;
  position: relative;
  z-index: 1;
}

.localVideo:hover .fa-youtube-play{
  color: red;
  transition: .2s ease;
}

.youTube {
  display: block;
  font-size: 0;
  height: 18vw;
  width: 32vw;
  margin: 0 auto;
  padding: 0px;
  text-align: center;
}


@media (max-width: 1200px) {

  .youTube, .localVideo {
    height: 27vw;
    width: 48vw;
  }

  .seeMore, .videoSpan {
    width: 48vw;
    border-bottom-left-radius: 2vw;
    border-bottom-right-radius: 2vw;
  }
  i.fa.fa-youtube-play {
    font-size: 8vw;
    margin: 9vw 0vw 0vw -4vw;
  }
  .fa.fa-stop {
    font-size: 4vw;
    margin: 11vw 0vw 0vw -2vw;
  }

  .my_profile_smallScreen {
    display: inline-block;
    max-height: 50vw;
  }
  .my_profile_bigScreen {
    display: none;
  }
  .paragraphs2 {
    text-align: center;
  }

  .hrLeft {
    text-align: center;
  }

}

/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 800px) {

  .imgColumn1, .imgColumn2, .imgColumn3 {
    flex: 50vw;
    max-width: 100vw;
    padding-left: 20px;
    padding-right: 20px;
  }
  .imgRow img {
    max-width: 34vw;
    max-height: 40vw;
    padding-top: .65vw;
  }
  .padMe {
    padding: 2vw 3vw;
  }
  .vidThumbnail {
    min-width: 110px;
  }
  .videoInfo {
    font-size: 2.33vw;
  }
  .tinierGrid {
    margin: 0 6vw;
  }
  .my_profile_smallScreen {
    max-height: 70vw;
  }
  i.fa.alt.fa-chevron-down {
    font-size: 4vw;
    left: 48.5%;
  }
  i.fa.fa-chevron-up {
    font-size: 4vw;
    left: 48.5%;
    padding-top: .5vw;
  }

}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .imgColumn1, .imgColumn2, .imgColumn3  {
    flex: 100vw;
    max-width: 100vw;
  }
  .imgRow img {
    max-width: 100%;
    max-height: 61vw;
  }

  .youTube, .localVideo {
    height: 36vw;
    width: 64vw;
  }
  .seeMore, .videoSpan {
    width: 64vw;
    border-bottom-left-radius: 3vw;
    border-bottom-right-radius: 3vw;
  }
  i.fa.fa-youtube-play {
    font-size: 11vw;
    margin: 12vw 0vw 0vw -6vw;
  }
  .fa.fa-stop {
    font-size: 6vw;
    margin: 14vw 0vw 0vw -3.5vw;
  }
  .videoInfo {
    font-size: 3.34vw;
  }
  .tinierGrid {
    margin: 0;
  }
  i.fa.alt.fa-chevron-down {
    font-size: 5vw;
    left: 48%;
  }
  i.fa.fa-chevron-up {
    font-size: 5vw;
    padding-top: 0;
  }
}