* {
  box-sizing: border-box;

}

body, html {
    margin: 0px;
    padding: 0px;
    background-color: #FFFFFF;
    font-family: 'Arial';
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.row::after {
  list-style-type: none;
  content: "";
  clear: both;
  display: table;
}

.mediaTitle {
text-align: left;
letter-spacing: 2px;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
line-height: 16px;
color: #7F7F7F;
font-size: 13px;
}

.imgTitle {
  opacity: 1;
  filter: alpha(opacity=50); /* For IE8 and earlier */
}

.imgTitle:hover {
  opacity: 0.5;
  filter: alpha(opacity=100); /* For IE8 and earlier */
}
.content-image {
  display:none;
  margin: 0px;
  padding: 0px;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.width-container {
  padding-left: 120px;
  padding-right:120px;
  max-width: 1400px;
}

@media only screen and (min-width: 10px) {
  /* For phones: */

  .titleDiv {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-flow: wrap;
    height: 120px; 
    margin: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .titleText {
    color: #000000;
    font-size: 26px;
    padding-top: 10px;
    line-height: 50px;
    letter-spacing: 2px;
    text-align: center;
    width: 400px;
  }

  .navBar {
    display: flex;
    justify-content: space-between;
    padding-left: 0px;
    padding-bottom: 40px;
  }

  .contentSingle {
    display: initial;
  }

  .contentDouble {
    display: none;
  }

}

@media only screen and (min-width: 700px) {
  /* For desktop: */

  .width-container {
    padding-left: 5%;
    padding-right: 5%;
  }

  .titleDiv {
    padding-left: 40px; 
    padding-right: 40px; 
    width:100%; 
    max-width:1240px; 
    margin: auto; 
    height: 80px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
  }

  .titleText {
    color: #000000;
    font-size: 24px;
    padding-top: 0px;
    line-height: 60px;
    letter-spacing: 2px;
    text-align: left;
    width: 320px;
  }

  .navBar {
    display: flex;
    justify-content: space-between;
    padding-left: 0px;
    padding-bottom: 40px;
  }

  .contentSingle {
    display: none;
  }

  .contentDouble {
    display: initial;
  }

}

.content-title {
  width:100%;
  height:30px;
  text-align: left;
  letter-spacing: 2px;
  color: #151515;
  font-size: 12px;
  padding-top:5px;
  padding-bottom: 30px;
}

.contentDiv {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-family: Arial;
  background-color: #FFFFFF;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
  font-size: 30px;
}

.container {
    width: 100%;
}

#menuText a:link, a:visited {color: black; text-decoration: none;}
#menuText a:hover, #menuText a:active {
  color: grey;
}

.workDescriptionText {
  font-size: 15px;
  line-height: 22px;
  text-align: left;
  padding-bottom: 20px;
}

.footerText {
  text-align: center;
  color: grey;
}

#menuText {
  letter-spacing: 3px;
  color: rgb(0, 0, 0);
  font-size: 18px;
  line-height: 60px;
  text-decoration: none;
}

.bioText {
  letter-spacing: 0px;
  color: rgb(0, 0, 0);
  font-size: 15px;
  line-height: 22px;
  text-decoration: none;
}

.maven-pro {
  font-family: "Maven Pro", sans-serif;
  font-optical-sizing: auto;
  font-weight: 450;
  font-style: normal;
}

.titleGrad {
  background: rgb(174,198,240);
  background: linear-gradient(90deg, rgb(206 233 255) 0%, rgb(219 254 244) 100%);
}

.bgGrad {
  background: rgb(235,242,255);
  background: linear-gradient(90deg, rgb(245 249 255) 0%, rgb(241 255 254) 100%);
}