h6{
  font-family: Verdana, Geneva, sans-serif;
  color: #c1c4c9;
}

h5{
  font-family: Verdana, Geneva, sans-serif;
  color: #c1c4c9;
}

h3 {
  font-family: Verdana, Geneva, sans-serif;
  color: #c1c4c9;
}

h4 {
  font-family: Verdana, Geneva, sans-serif;
  color: #c1c4c9;
}

p{
  font-family: Verdana, Geneva, sans-serif;
  color: #c1c4c9;
}
@media (max-width:500px){
  p{
    font-family: Verdana, Geneva, sans-serif;
    color: #c1c4c9;
    font-size: 13.5px;
  }
}


body{
  position: absolute;
  width: 100%;
}


.navbar{
  background-color: #1c2024;
  box-shadow: 0 5px 20px black;
}

.navbar-brand{
  padding-left: 15%;
}

.navbar-nav{
  text-align: right;
  margin: 0 0 0 50%;
}

.pagetitle{
  color: #996a59;
  font-weight: bold;
}

.pagedescription{
  padding-top: 15px;
}

.textcontainer{
  padding: 100px 0 150px 0px;
}

.container{
  margin: 0px;
}

#logo-image:hover{
  filter: brightness(150%);
}

.eeg-dimensions{
  width: 400px;
  height: 297px;
}

.vent-dimensions{
  width: 300px;
  height: 333px;
}
.bird-dimensions{
  width: 400px;
  height: 251px;
}
@media (max-width:500px){
  .bird-dimensions{
    width: 330px;
    height: 159px;
  }
}
.lsc-dimensions{
  width: 350px;
  height: 228px;
}
.fort-dimensions{
  width: 400px;
  height: 185px;
}
@media (max-width:500px){
  .fort-dimensions{
    width: 340px;
    height: 157px;
  }
}
.sim-dimensions{
  width: 300px;
  height: 194px;
}
.dbf4-dimensions{
  width: 320px;
  height: 214px;
}
.hive-dimensions{
  width: 450px;
  height: 206px;
}
@media (max-width:500px){
  .hive-dimensions{
    width: 350px;
    height: 161px;
  }
}
.net-dimensions{
  width: 430px;
  height: 242px;
}
@media (max-width:500px){
  .net-dimensions{
    width: 350px;
    height: 197px;
  }
}
.dbf3-dimensions{
  width: 350px;
  height: 305px;
}
.co2-dimensions{
  width: 330px;
  height: 214px;
}
.mobi-dimensions{
  width: 450px;
  height: 256px;
}
@media (max-width:500px){
  .mobi-dimensions{
    width: 350px;
    height: 199px;
  }
}
.dbf2-dimensions{
  width: 380px;
  height: 230px;
}
@media (max-width:500px){
  .dbf2-dimensions{
    width: 330px;
    height: 200px;
  }
}
.boat-dimensions{
  width: 410px;
  height: 280px;
}
@media (max-width:500px){
  .boat-dimensions{
    width: 350px;
    height: 239px;
  }
}
.dbf1-dimensions{
  width: 350px;
  height: 310px;
}
.tilt-dimensions{
  width: 350px;
  height: 330px;
}
.quad-dimensions{
  width: 400px;
  height: 262px;
}
@media (max-width:500px){
  .quad-dimensions{
    width: 340px;
    height: 223px;
  }
}

.break-dimensions{
  width: 10px;
  height: 200px;
}
.text-dimensions{
  width: 420px;
  height: 150px;
  padding-left: 15px;
  padding-top: 100px;
}
@media (max-width:500px){
  .text-dimensions{
    width: 300px;
    height: 150px;
    padding-left: 15px;
    padding-top: 75px;
  }
}






.header{
  color: #996a59;
  font-weight: bold;
}
@media (max-width:500px){
  .header{
  color: #996a59;
  font-size: 15px;
  font-weight: bold;
  }
}

.description{
  padding: 0px 15px 0 16px;
  color: #c1c4c9;
  text-align: justify;
  text-justify: inter-word;
}


.flip-box-v {
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
.flip-box-h {
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-box-inner {
  position: relative;
  text-align: center;
  transition: transform 0.7s;
  transform-style: preserve-3d;
  box-shadow: 5px 5px 10px black;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box-v:hover .flip-box-inner {
  transform: rotateY(180deg);
}
.flip-box-h:hover .flip-box-inner {
  transform: rotateX(180deg);
}
/* Position the front and back side */
.flip-box-front, .flip-box-back-v {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}
.flip-box-front, .flip-box-back-h {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-box-front {
}
/* Style the back side */
.flip-box-back-v {
  padding-top: 10px;
  background-color: #13191c;
  color: white;
  transform: rotateY(180deg);
}
.flip-box-back-h {
  padding-top: 10px;
  background-color: #13191c;
  color: white;
  transform: rotateX(180deg);
}


.container-fluid{
  padding-left: 0px;
  padding-right: 0px;
  margin-right: 0px;
  margin-left: 0px;
  padding: 0px;
  margin: 0px;
}

#endcontainer{
  padding-bottom: 25%;
  margin-top: 0px;
  background: url('Images/Design_Background/greycircle.png'), url('Images/Design_Background/bluecircle.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
}
#endcontainer.show{
  background: url('Images/Design_Background/bluecircle.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  transition: 0.5s;
}

.section-top{
  margin-top: 0px;
  background-color: #242d33;
  width: 100%;
}

.section-2021{
  margin-top: 0px;
  background: url('Images/Design_Background/GreyLine.png'), url('Images/Design_Background/OrangeLine.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
}
.section-2021.show{
  background: url('Images/Design_Background/OrangeLine.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  transition: 0.5s;
}
.section-2021.reset{
  background: url('Images/Design_Background/GreyLine.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  transition: 0.5s;
}

.section-2020{
  margin-top: 0px;
  background: url('Images/Design_Background/GreyLine.png'), url('Images/Design_Background/BlueLine.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
}
.section-2020.show{
  background: url('Images/Design_Background/BlueLine.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  transition: 0.5s;
}
.section-2020.reset{
  background: url('Images/Design_Background/GreyLine.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  transition: 0.5s;
}

.section-2019{
  margin-top: 0px;
  background: url('Images/Design_Background/GreyLine.png'), url('Images/Design_Background/OrangeLine.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
}
.section-2019.show{
  background: url('Images/Design_Background/OrangeLine.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  transition: 0.5s;
}
.section-2019.reset{
  background: url('Images/Design_Background/GreyLine.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  transition: 0.5s;
}

.section-2018{
  margin-top: 0px;
  background: url('Images/Design_Background/GreyLine.png'), url('Images/Design_Background/TanLine.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
}
.section-2018.show{
  background: url('Images/Design_Background/TanLine.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  transition: 0.5s;
}
.section-2018.reset{
  background: url('Images/Design_Background/GreyLine.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  transition: 0.5s;
}

.section-2017{
  margin-top: 0px;
  background: url('Images/Design_Background/GreyLine.png'), url('Images/Design_Background/BlueLine.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
}
.section-2017.show{
  background: url('Images/Design_Background/BlueLine.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  transition: 0.5s;
}
.section-2017.reset{
  background: url('Images/Design_Background/GreyLine.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  transition: 0.5s;
}

.section-2016{
  margin-top: 0px;
  background: url('Images/Design_Background/GreyLine.png'), url('Images/Design_Background/OrangeLine.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
}
.section-2016.show{
  background: url('Images/Design_Background/OrangeLine.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  transition: 0.5s;
}
.section-2016.reset{
  background: url('Images/Design_Background/GreyLine.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  transition: 0.5s;
}

.section-2015{
  margin-top: 0px;
  background: url('Images/Design_Background/GreyLine.png'), url('Images/Design_Background/TanLine.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
}
.section-2015.show{
  background: url('Images/Design_Background/TanLine.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  transition: 0.5s;
}
.section-2015.reset{
  background: url('Images/Design_Background/GreyLine.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  transition: 0.5s;
}

.section-2014{
  margin-top: 0px;
  background: url('Images/Design_Background/GreyLine.png'), url('Images/Design_Background/BlueLine.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
}
.section-2014.show{
  background: url('Images/Design_Background/BlueLine.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  transition: 0.5s;
}
.section-2014.reset{
  background: url('Images/Design_Background/GreyLine.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  transition: 0.5s;
}



.year{
  text-align: center;
  color: #c1c4c9;
  background-color: #242d33;
  border-radius: 30px;
  border: 3px solid #818a96;
  margin-left: 38%;
  margin-right: 38%;
  margin-bottom: 50px;
}

#year2021.show{
  border-color: #932f03;
  background-color: #230a02;
  transition: 0.5s;
}
#year2021.reset{
  border-color: #818a96;
  background-color: #242d33;
  transition: 0.5s;
}
#year2020.show{
  border-color: #00b2e3;
  background-color: #102a38;
  transition: 0.5s;
}
#year2020.reset{
  border-color: #818a96;
  background-color: #242d33;
  transition: 0.5s;
}
#year2019.show{
  border-color: #932f03;
  background-color: #230a02;
  transition: 0.5s;
}
#year2019.reset{
  border-color: #818a96;
  background-color: #242d33;
  transition: 0.5s;
}
#year2018.show{
  border-color: #996a59;
  background-color: #3a1002;
  transition: 0.5s;
}
#year2018.reset{
  border-color: #818a96;
  background-color: #242d33;
  transition: 0.5s;
}
#year2017.show{
  border-color: #00b2e3;
  background-color: #102a38;
  transition: 0.5s;
}
#year2017.reset{
  border-color: #818a96;
  background-color: #242d33;
  transition: 0.5s;
}
#year2016.show{
  border-color: #932f03;
  background-color: #230a02;
  transition: 0.5s;
}
#year2016.reset{
  border-color: #818a96;
  background-color: #242d33;
  transition: 0.5s;
}
#year2015.show{
  border-color: #996a59;
  background-color: #30221e;
  transition: 0.5s;
}
#year2015.reset{
  border-color: #818a96;
  background-color: #242d33;
  transition: 0.5s;
}
#year2014.show{
  border-color: #00b2e3;
  background-color: #102a38;
  transition: 0.5s;
}
#year2014.reset{
  border-color: #818a96;
  background-color: #242d33;
  transition: 0.5s;
}

.shadow{
  box-shadow: 5px 5px 10px black;
  border-radius: 5px;
}

.picture-2021{
  margin: 0px 0 60px 0;
  width: 100%;
  border-radius: 5px;
  filter: grayscale(0);
}

.picture-2021{
  margin: 0px 0 60px 0;
  width: 100%;
  border-radius: 5px;
  filter: grayscale(0);
}

.picture-2020{
  margin: 0px 0 60px 0;
  width: 100%;
  border-radius: 5px;
  filter: grayscale(0);
}

.picture-2020{
  margin: 0px 0 60px 0;
  width: 100%;
  border-radius: 5px;
  filter: grayscale(0);
}

.picture-2019{
  margin: 0px 0 60px 0;
  box-shadow: 5px 5px 10px black;
  width: 100%;
  border-radius: 5px;
  filter: grayscale(0);
}
.picture-2019.show{
  transition: 1s;
  filter: grayscale(0);
}

.picture-2018{
  margin: 0px 0 60px 0;
  box-shadow: 5px 5px 10px black;
  width: 100%;
  border-radius: 5px;
  filter: grayscale(0);
}


.picture-2017{
  margin: 0px 0 60px 0;
  box-shadow: 5px 5px 10px black;
  width: 100%;
  border-radius: 5px;
  filter: grayscale(0);
}

.picture-2016{
  margin: 0px 0 60px 0;
  box-shadow: 5px 5px 10px black;
  width: 100%;
  border-radius: 5px;
}

.picture-2015{
  margin: 0px 0 60px 0;
  box-shadow: 5px 5px 10px black;
  width: 100%;
  border-radius: 5px;
}

.picture-2014{
  margin: 0px 0 60px 0;
  box-shadow: 5px 5px 10px black;
  width: 100%;
  border-radius: 5px;
}

.lower{
  margin-top: 100px;
}

.raise{
  margin-top: -50px;
}


.headshot{
  width: 300px;
  box-shadow: 5px 5px 10px black;
  margin: 20px 0 20px 0;
}

footer{
	color: #7d8185;
	background-color: #1c2024;
  padding: 10px 0px 5px 20px;
	margin: 0px;
  box-shadow: 0 -5px 20px black;
}

footer li{
  display: inline;
}

.footertext{
  color: #858e94;
}

.linklogo:hover{
  margin: 0 0 0 -1px;
  width: 32px;
  filter: brightness(150%);
}