/* @import url(https://fonts.googleapis.com/css?family=Gill+Sans); */

#navbar {
  background-color: black; /* Black background color */
  position: fixed; /* Make it stick/fixed */
  top: 0; /* Stay on top */
  width: 100%; /* Full width */
  border-bottom: 0.5px dotted cyan;
}

/* Style the navbar links */
#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding-top: 7px;
  padding-left: 15px;
  padding-right: 15px;
  /* padding-bottom: 5px; */
  height: 28px;
  text-decoration: none;
  font-size: 17px;
  letter-spacing: 3px;
  font-weight: 400;
}

#navbar a img {
 width: 20px;
 height: 20px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

body {
  margin: 0;
  /* margin-bottom: -25px; */
  /* padding-bottom: -25px; */
  background-color: rgb(20, 20, 20);
  font-family: 'Gill-Sans-Nova';
  font-style: normal;
  font-weight: 200;
  font-size: 12px;
  /* padding:15px 15px 2500px; */
  /* font-size:30px; */
  /* margin-bottom:-50px; */
}

canvas {
  margin-top: -5px;
  margin-bottom: -5px;
}

#Title {
  background-color: rgb(5,5,5);
  color: white;
  padding: 100px;
  letter-spacing: 0.8px;
}



#Title h1 {
  text-transform: uppercase;
  letter-spacing: 5px;
  font-weight: 400;
  font-size: 12px;
  padding-bottom: 10px;
  border-bottom: 0.5px dotted white;
  margin-bottom: 7px;
    text-align: center;
}

#Title p {
  font-size: 12px;
    font-weight:lighter;
}

#headerPhoto {
  width: auto;
  height: auto;
  position: relative;
  text-align: center;
}

#headerPhoto img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  /* object-position: 50% 0; */
  /* filter: brightness(90%); */
}

#headerPhoto h1 {
  font-size: 28px;
  color: white;
  background-color: black;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  padding: 5px;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 500;
}

#intro {
  color: black;
  background-color: #f1f1f1;
  right:50%;
  left:50%;
  /* transform: translate(-50%, -50%); */
}


.flex-container {
  display: flex;
  flex-direction: column;
  /* background-color: dodgerblue; */
  /* margin: 30px; */
  justify-content: center;
}

.flex-container > div {
  /* margin: 10px; */
  padding: 20px;
  margin-left: 100px;
  margin-right: 100px;
  margin-top: 50px;
  margin-bottom: 0px;
}

.flex-container #introText {
  font-size: 12px;
  padding: 15px;
  font-style: italic;
}

.flex-container #subHeader {
  text-transform: uppercase;
  letter-spacing: 5px;
  font-weight: 400;
  font-size: 12px;
  border-bottom: 0.5px dotted cyan;
  margin-bottom: 7px;
}

#FLbody1 {
  display: flex;
}
#FLbody1b {
  display: flex;
  flex-direction: column;
}

#FLbody1 img {
  width: 400px;
  height: auto;
  max-height: 400px;
  padding-right: 15px;
  object-fit: cover;
  object-position: center;
}

#FLbody1 {
  color: black;
  background-color: #f1f1f1;
  right:50%;
  left:50%;
}

#FLbody2 {
  display: flex;
  padding: 0px;
}

#FLbody2 img {
  width: 100%;
  height: auto;
}

#FLbody3 {
  display: flex;
  background-color: #f1f1f1;
  /* padding: 0px; */
}

#FLbody3 img {
  width: 67%;
  /* max-width:550px; */
  height: auto;
  padding-right: 0.4%;
  object-fit: cover;
  object-position: center;
}

#FLbody3b {
  display: flex;
  flex-direction: column;
  background-color: #f1f1f1;
  /* padding: 0px; */
  margin-top: -0.4%;
}

#FLbody3b img {
  width: 100%;
  min-height: 32.6%;
  /* max-width: 300px; */
  object-fit: cover;
  object-position: center;
  margin: 1%;
}

#FLbody4 {
  display: flex;
}
#FLbody4b {
  display: flex;
  flex-direction: column;
}

#FLbody4 img {
  width: 400px;
  height: auto;
  max-height: 400px;
  padding-right: 15px;
  object-fit: cover;
  object-position: center;
}

#FLbody4 {
  color: black;
  background-color: #f1f1f1;
  right:50%;
  left:50%;
  margin-bottom: 50px;
}

#FSOAbody1 {
  display: flex;
  padding: 0px;
}

#FSOAbody1 iframe {
  width: 100%;
  min-height: 420px;
}

#FSOAbody1 {
  color: black;
  background-color: #f1f1f1;
  right:50%;
  left:50%;
}

#FSOAbody2 {
  display: flex;
  flex-direction: column;
  color: black;
  background-color: #f1f1f1;
}

#FSOAbody2 img {
  width: 100%;
  object-fit: cover;
  object-position: center;
  height: auto;
  margin-bottom: 15px;
}

#FSOAbody3 {
  display: flex;
  background-color: #f1f1f1;
  /* padding: 0px; */
}

#FSOAbody3 img {
  width: 67%;
  /* max-width:550px; */
  height: auto;
  padding-right: 0.4%;
  object-fit: cover;
  object-position: center;
}

#FSOAbody3b {
  display: flex;
  flex-direction: column;
  background-color: #f1f1f1;
  /* padding: 0px; */
  margin-top: -0.4%;
}

#FSOAbody3b img {
  width: 100%;
  min-height: 32.6%;
  /* max-width: 300px; */
  object-fit: cover;
  object-position: center;
  margin: 1%;
}

#FSOAbody4 {
  display: flex;
  background-color: #f1f1f1;
  /* padding: 0px; */
  flex-direction: column;
  margin-bottom: 50px;
}

#FSOAbody4b {
  display: flex;
  background-color: #f1f1f1;
  /* padding: 0px; */
}
#FSOAbody4b img {
  width: 49.2%;
  height: auto;
  padding-right: 0.4%;
  padding-left: 0.4%;
  object-fit: cover;
  object-position: center;
  padding-bottom: 15px;
}

#Mbody1 {
  display: flex;
  /* flex-direction: column; */
  color: black;
  background-color: #f1f1f1;
}

#Mbody1 img {
  width: 66%;
}

#Mbody1b {
  margin-right: 15px;
  width: 34%;
}

#Mbody2 {
  display: flex;
  /* flex-direction: column; */
  color: black;
  background-color: #f1f1f1;
}

#Mbody2 img {
  width: 60%;
  object-fit: cover;
  object-position: center top;
  max-height: 200px;
}

#Mbody2b {
  margin-right: 15px;
  width: 40%;
}

#Mbody3 {
  display: flex;
  flex-direction: column;
  color: black;
  background-color: #f1f1f1;
}

#Mbody3b {
  width:100%;
  padding: 15px;
}

#Mbody3 img {
  width: 100%;
  height: auto;
  /* max-height: 300px; */
}

#Mbody4 {
  display: flex;
  background-color: #f1f1f1;
  /* padding: 0px; */
  padding-bottom: 1%;
}

#Mbody4 img {
  width: 67%;
  /* max-width:550px; */
  height: auto;
  padding-right: 0.4%;
  object-fit: cover;
  object-position: center;
}

#Mbody4b {
  display: flex;
  flex-direction: column;
  background-color: #f1f1f1;
  /* padding: 0px; */
  margin-top: -0.4%;
}

#Mbody4b img {
  width: 100%;
  min-height: 32.6%;
  /* max-width: 300px; */
  object-fit: cover;
  object-position: center;
  margin: 1%;
}

#Mbody5 {
  display: flex;
  background-color: #f1f1f1;
  /* padding: 0px; */
  padding-bottom: 1%;
}

#Mbody5 img {
  width: 67%;
  /* max-width:550px; */
  height: auto;
  object-fit: cover;
  object-position: center;
}
#Mbody5c{
  padding-left: 1%;
}

#Mbody5b {
  display: flex;
  flex-direction: column;
  background-color: #f1f1f1;
  /* padding: 0px; */
  margin-top: -0.4%;
}

#Mbody5b img {
  width: 100%;
  min-height: 32.6%;
  /* max-width: 300px; */
  object-fit: cover;
  object-position: center;
  margin-right: 1%;
  margin-top: 1%;
  margin-bottom: 1%;
}

#MbodyLast {
  display: flex;
  background-color: #f1f1f1;
  flex-direction: column;
}

#Rbody1 {
  display: flex;
  flex-direction: column;
  background-color: #f1f1f1;
  /* margin: 15px; */
}

#Rbody1 img {
  margin: 15px;
  width: 100%;
  height: auto;
  align-self: center;
}

#Bbody1 {
  display: flex;
  background-color: #f1f1f1;
  flex-direction: column;
}

#Bbody1b {
  margin-top: 15px;
  display: flex;
}

#Bbody1ba {
  margin-right: 15px;
  width: 34%;
}

#Bbody1bb {
  width: 66%;
  flex-direction: column;
}

#Bbody1bb img {
  /* margin: 15px; */
  width: 100%;
  height: auto;
  max-height: 150px;
  align-self: center;
  object-fit: cover;
  object-position: center;
}

#Bbody1c {
  margin-top: 25px;
  display: flex;
}

#Bbody1ca {
  width: 34%;
  margin-right: 15px;
}

#Bbody1c img {
  /* margin: 15px; */
  /* margin-left: 15px; */
  width: 64.8%;
  /* width: 100%; */
  height: auto;
  max-height: 300px;
  object-fit: cover;
  object-position: center;
}

#Bbody1d {
  margin-top: 25px;
  display: flex;
}

#Bbody1da {
  width: 34%;
  margin-right: 15px;
}

#Bbody1d img {
  /* margin: 15px; */
  /* margin-left: 15px; */
  width: 64.8%;
  /* width: 100%; */
  height: auto;
  max-height: 300px;
  object-fit: cover;
  object-position: center;
}

#Bbody2 {
  display: flex;
  background-color: #f1f1f1;
  /* flex-direction: column; */
}

#Bbody2b {
  width: 34%;
  margin-right:15px;
}

#Bbody2c {
  display: flex;
  flex-direction: column;
  width: 66%;
}

#Bbody2c img {
  width: 100%;
  height: auto;
  max-height: 250px;
  align-self: center;
  object-fit: cover;
  object-position: center;
  padding-bottom: 1%;
}

#Bbody3 {
  display: flex;
  padding: 0px;
  margin-bottom: 50px;
}

#Bbody3 iframe {
  width: 100%;
  min-height: 420px;
}

#Bbody3 {
  color: black;
  background-color: #f1f1f1;
  /* right:50%;
  left:50%; */
}

#HCbody1 {
  display: flex;
  background-color: #f1f1f1;
  flex-direction: column;
}

#HCbody1b {
  margin-top: 15px;
  display: flex;
}

#HCbody1c {
  margin-top: 15px;
}

#HCbody1c img{
  width: 100%;
  height: auto;
  max-height: 150px;
  align-self: center;
  object-fit: cover;
  object-position: center;
}

#HCbody2 {
  display: flex;
  background-color: #f1f1f1;
  flex-direction: column;
}

#HCbody2c {
  display: flex;
  background-color: #f1f1f1;
  /* padding: 0px; */
  margin-top: 15px;
}

#HCbody2c img {
  width: 67%;
  /* max-width:550px; */
  height: auto;
  padding-right: 0.4%;
  object-fit: cover;
  object-position: center;
}

#HCbody2ca {
  display: flex;
  flex-direction: column;
  background-color: #f1f1f1;
  margin-top: -0.4%;
}

#HCbody2ca img {
  width: 100%;
  min-height: 22%;
  object-fit: cover;
  object-position: center;
  margin: 1%;
}

#HCbody3 {
  display: flex;
  padding: 0px;
  margin-bottom: 50px;
}

#HCbody3 iframe {
  width: 100%;
  min-height: 420px;
}

#HCbody3 {
  color: black;
  background-color: #f1f1f1;
}

#contact1 {
  background-color: rgb(20,20,20);
  color: white;
}

#headshot {
  width:42%;
  height:42%;
  margin-left:auto;
  margin-right:auto;
  display: block;
  margin-top: 40px;
}

#contact1text {
  font-size: 12px;
  font-weight:300;
  padding-top: 15px;
  padding-left: 25%;
  padding-right: 25%;
  padding-bottom: 20px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 5px;
  line-height: 30px;
}

#contact1text2 {
  font-size: 10px;
  font-weight:200;
  line-height: 15px;
}

#logoCircle {
  width:10%;
  height:10%;
  margin-left:auto;
  margin-right:auto;
  margin-top: 15px;
  margin-bottom: 15px;
  display: block;
}

#contact1 a:link {
  text-decoration: none;
  color: white;
}

#contact1 a:visited {
  text-decoration: none;
  color: white;
}

#contact1 a:hover {
  text-decoration: underline;
  color: white;
}

#contact1 a:active {
  text-decoration: underline;
  color: white;
}

#webgl {
  cursor: pointer !important;
}

#webgl2 {
  cursor: pointer !important;
}

canvas {
  cursor: pointer !important;
}

#loader {
  text-align: center;
}

#innerCircle {
  color: rgb(20, 20, 20);
  background-color: white;
  position: absolute;
  width: 410px;
  height: 410px;
  top: 50%;
  left: 50%;
  margin-left: -290px; /* margin is -0.5 * dimension */
  margin-top: -290px;
  padding: 75px;
  border-radius: 50%;
}

#innerText {
    text-align: center;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

#p1 {
  margin: 2%;
  letter-spacing: 0.8px;
  display: inline-block;
  text-align: justify;
  letter-spacing: 2px;
  font-weight: 200;
  font-size: 12px;
  line-height: 26px;
  margin-top: 10px;
}

#emphasis {
  font-weight: 400;
  padding: 2px;
  color: white;
  background-color: rgb(20, 20, 20);
  text-transform: uppercase;
}

#italic {
  font-style: oblique;
}

#outsideCircle {
  color: rgb(20, 20, 20);
  background-color: white;
  border-radius: 50%;

  text-align: center;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-51.7%,-51.7%);

  animation-name: example;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 30s; /* Safari 4.0 - 8.0 */
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
}

#clicker{
  margin-top: 30px;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
  0%   {background-color:rgb(255, 255, 255); width:0%; height: 0%;}
  16.6% {background-color:rgb(103,239,239); width:800px; height: 800px;}
  33.3%  {background-color:rgb(255, 255, 255); width:0%; height: 0%;}
  50%  {background-color:rgb(226,86,109); width:800px; height: 800px;}
  66.6%  {background-color:rgb(255, 255, 255); width:0%; height: 0%;}
  83.3%  {background-color:rgb(255, 255, 255); width: 800px; height: 800px;}
  100% {background-color:rgb(255, 255, 255); width:0%; height: 0%;}
}

@keyframes example {
  0%   {background-color:rgb(255, 255, 255); width:0%; height: 0%;}
  16.6% {background-color:rgb(103,239,239); width:800px; height: 800px;}
  33.3%  {background-color:rgb(255, 255, 255); width:0%; height: 0%;}
  50%  {background-color:rgb(226,86,109); width:800px; height: 800px;}
  66.6%  {background-color:rgb(255, 255, 255); width:0%; height: 0%;}
  83.3%  {background-color:rgb(255, 255, 255); width: 800px; height: 800px;}
  100% {background-color:rgb(255, 255, 255); width:0%; height: 0%;}

}