/* Main Page Stylesheet */

 Reset Styles
.navbar, .navbar1, .navbar2, #about, #photo, #video, #contact, #about1, #photo1, #video1, #contact1,
 #logo, .hline3, header, .hline4, .container, .container1, .container2,
.video1, .video2, .container3, .socialmediacontainer, .hline5, .MainBody, .AboutBody, .PhotoBody,
.VideoBody, .ContactBody, .boxer, #apm, #apmred, #apmblue, .logo, #apmmedia, .top, #tumblr, #youtube, #insta,
.purple, .blue, .fotorama, .contactcontainer {
   border: 0;
   padding: 0;
   margin: 0;
   white-space: nowrap;
}

/* Navigation Bar */

/* Main Page Nav Bar */
.navbox {
    font-family: GeosansLight;
    font-size: 18px;
    color: white;
    text-shadow: 2px 1px #808080;
    letter-spacing: 0.25em;
    align-items: center;
    position: relative;
}

.nav1{
  float: left;
  width: 30%;
  align-items: center;
  border: 3px solid black;
  position: relative;
  top: 20em;
  left: 6em;

}

.nav2 {
  float: left;
  width: 30%;
  align-items: center;
  border: 3px solid black;
  position: relative;
  top: 20em;
  left: 4em;
}

#about {

}

#photo {

    left: -21em;
    top: 23em;
}

#video {

    left: 63em;
    top: 23em;
}

#contact {
    left: 4em;
    top: 1em;
}
/* Other Pages Nav Bar */
.navigation-menu-button {
    display: none;
}

.surround {
    background-color: white;
    position: relative;
    top: -2em;
    height: 16em;
}

.top{
    display: block;
    position: relative;
    width: 100%;
    height: 4%;
    background-color: #FFFFFF;
}

.navbox1 {
    font-family: Arial Black;
    font-size: 14px;
    color: white;
    letter-spacing: 0.25em;
    float: left;
    display: block;
    width: 90%;
    position: relative;
    left: 20em;
}

#pgbbars{
      position: relative;
      top: -2em;

}

.pbar {
      display: block;
      width: 100%;
      height: 8%;
      border: 0;
      border-top: 10px solid #b57fae;
      padding: 0;
}

.bbar {
      display: block;
      width: 100%;
      height: 8%;
      border: 0;
      border-top: 10px solid #8a86cf;
      padding: 0;
}

.gbar {
      display: block;
      width: 100%;
      height: 8%;
      border: 0;
      border-top: 10px solid #8ccfb0;
      padding: 0;
}

.logo{
      display: block;
      position: relative;
      left: 49em;
}

#apm {
      font-family: hacked;
      font-size:  60px;
      float: left;
      position: relative;
      left: 2em;
      z-index: 2;
      text-decoration: none;
}

#apm a:visited {
      text-decoration: none;
      color: black;
}

#apm a:link {
      text-decoration: none;
      color: black;
}

#apmred {
      font-family: hacked;
      font-size: 60px;
      float: left;
      position: relative;
      color: #ff4545;
      right: 0.12em;
      z-index: 1;
}

#apmblue {
      font-family: hacked;
      font-size: 60px;
      float: left;
      position: relative;
      color: #4bb9ff;
      right: 2.35em;
      z-index: 1;
}

#apmmedia {
      font-family: GeosansLight;
      font-size: 14px;
      position: relative;
      left: -18em;
      top: 9em;
      z-index: 2;
}

/* Social Media Container */
.socialmediacontainer {
    display: block;
    text-align: center;
    float:left;
    position: relative;
    top: -55em;
    left: 55em;
}

.hline5 {
    display: block;
    width: 15%;
    border: 0;
    border-top: 2px solid #000;
    padding: 0;
    position: relative;
    top: -1em;
    left: -5em;
}

.socialmediacontainerp {
    position: relative;
    top: -10em;
    left: 55em;
}

.socialmediacontainerv {
    position: relative;
    top: 20em;
    left: 55em;
}

.socialmediacontainerc {
    position: relative;
    top: -30em;
    left: 55em;
}

#youtube {
    float: left;
}

#insta {
    float: left;
}

#tumblr {
    float: left;
    position: relative;
    top: -1.5em;
}

/*  Main Page Buttons */
#about, #photo, #video, #contact {
    width: 100%;
    float: left;
    text-align: center;
    transition-timing-function: ease;
    transition: 0.2s ;
    text-decoration: none;
    color: black;
}

#about:hover, #photo:hover, #video:hover, #contact:hover {
    background-color: black;
    color: white;

}

#about a:hover, #photo a:hover, #video a:hover, #contact a:hover{
    color: black;
    text-decoration: none;
}

#about a, #photo a, #video a, #contact a{
    color: black;
}

#about a:link, #photo a:link, #video a:link, #contact a:link{
    color: black;

}

#about a:visited, #photo a:visited, #video a:visited, #contact a:visited{
    color: black;
}

/* Other Pages Buttons */
#about1, #photo1, #video1, #contact1 {
    width: 10%;
    display: block;
    float: left;
    text-align: center;
    position: relative;
    left: 25em;
    color: black;
}

#about1:hover, #photo1:hover, #video1:hover, #contact1:hover {
    background-color: black;
    color: white;

}

#about1 a:hover, #photo1 a:hover, #video1 a:hover, #contact1 a:hover{
    color: black;
    text-decoration: none;
}

#about1 a, #photo1 a, #video1 a, #contact1 a{
    color: black;
}

#about1 a:link, #photo1 a:link, #video1 a:link, #contact1 a:link{
    color: black;

}

#about1 a:visited, #photo1 a:visited, #video1 a:visited, #contact1 a:visited{
    color: black;
}

/* Main Page Intro */

.middle {
    max-width: 50%;
    max-height: 20%;
    position: relative;
    margin: 0 auto;
    left: 4em;
    top: 10em;
    float: left;
}

#cubevector {
    position: relative;
    top: 2em;
    left: 2em;
}

#logo {
    position: relative;
    top: -22em;
    left: 12em;
}

/* Other Pages Intro */

.intro p {
      width: 10%;
      position: relative;
      top: 9em;
      left: 24.5em;
      font-size: 36px;
      background-color: black;
      color: white;
      font-family: Langdon Regular;
      text-align: center;
}

.intro {
    position: absolute;
    width: 80%;
    top: 12em;
    left: 1em;
}

#logo1 {
    position: relative;
    left: -15em;
    top: 20em;
    z-index: -1;
}

#bluevector1 {
    position: relative;
    left: 36em;
    top: -0.5em;
    z-index: -1;
    width: 0;
}

#purplevector1 {
    position: relative;
    left: 32.5em;
    top: -23em;
    z-index: -1;
    width: 0;
}

#greenvector1 {
    position: relative;
    left: 40em;
    top: -51em;
    z-index: -1;
    width: 0;
}
/* Content */

/* About Page Content */
.container {
    width: 80%;
    margin-top: 24%;
    padding:20px;
    position: relative;
    left:12em;
    top: -60em;
    color: black;
    border: 2px solid #5bbb8e;
}

.container p {
    font-size: 16px;
    font-family: GeosansLight;
    padding: 20px;
    margin-top: auto;
    margin-bottom: auto;
    text-align: center;
}

.container h1 {
    font-size: 18px;
    font-family: GeosansLight;
    text-align: center;
}

#Picture {
    position: relative;
    left: 28em;
}

.container1 {
    font-family: GeosansLight;
    background-color: black;
    color: white;
    padding: 1%;
}

.container2 {
    width: 30%;
    background-color: black;
    color: white;
    padding: 1%;
    float: left;
    display: inline-block;
}

.container3 {
    width: 30%;
    height: 19.5em;
    background-color: black;
    color: white;
    padding: 1%;
    float: right;
    display: inline-block;
}

.container4 {
    width: 20%;
    float: left;
    position: relative;
    left: 10em;
    top: 2em;
}
.hortainer {
    width: 100%;
    display: inline-block;
}
/* Photo Page Content */

.fotorama {
    position: relative;
    left: 24em;
    top: -20em;
}

/* Video Page Content */
.video1 {
    max-width: 80%;
    position: relative;
    top: -30em;
    left: 5%;
    padding: 5%;
}

.video1 h2 {
    font-size: 30px;
    font-family: GeosansLight;
    color: white;
    text-align: center;
    float: right;
    position: relative;
    right: 4%;
    margin-top: 19%;
}

.video2 {
    max-width: 80%;
    position: relative;
    top: -20em;
    float: right;
    right: 5%;
    padding: 5%;
}

.video2 h2 {
    font-size: 30px;
    font-family: GeosansLight;
    color: white;
    text-align: center;
    position: relative;
    float: left;
    right: 15%;
    margin-top: 23%;
}

/* Contact Page Content */
.contactcontainer {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    top: -40em;
}

.contactcontainer h3 {
    color: white;
    font-family: GeosansLight;
    text-align: center;
}

form{
    padding: 8px;
}

.contactinfo legend, .contactmeth legend, .topics legend, .additionalinfo legend {
    margin-left: 1em;
    color: white;
    font-family: GeosansLight;
    text-align: center;
}

.contactinfo input, textarea{
    border: 1px solid #ccc;
    padding: 0.2em;
    font-size: 0.8em;
}

.contactinfo input{
    position: absolute;
    left: 6em;
}

#firstname, #lastname, #emailinput{
    width: 25em;
}

#phoneinput{
    width: 12em;
}

label{
    font-size: 1em;
    line-height: 1.6em;
    left: 18em;
    color: white;
    font-family: GeosansLight;
}

.contactmeth label {
    position: relative;
    left: 14em;
    font-size: 1em;
    font-family: GeosansLight;
}

.contactinfo label{
    display: block;
    position: relative;
    margin: 0 0;
    color: white;
    font-family: GeosansLight;
    font-size: 1em;
    left: 10em;
}

.service legend {
    text-align: center;
    color: white;
    font-family: GeosansLight;
}

.service label{
    position: relative;
    display: block;
    font-size: 1em;
}

.additionalinfo {
    color: white;
    font-family: GeosansLight;
    font-size: 1em;
}

.additionalinfo p {
    position: relative;
    left: 15em;
}

.additionalinfo textarea {
    position: relative;
    left: 22em;
}

.submitbutton{
    border: none;
}

#submit{
    border: none;
    text-decoration: none;
    padding: 0.4em 0.6em;
    background-color: black;
    color: white;
    font-size: 1em;
    border: 10px;
    position: relative;
    left: 21em;
}
/* Main Page Body */
.MainBody {
    background-color: #FFFFFF;
    padding: 1em;
}

/* About Page Body */
.AboutBody {
    position: relative;
    width: 100%;
    background-color: #FFFFFF;
    height: 150vw;
    overflow-y: scroll;
    overflow-x: hidden;

}

/* Photo Page body */
.PhotoBody {
    position: relative;
    background-color: #FFFFFF;
    height: 150vw;
    overflow-y: scroll;
    overflow-x: hidden;
    background-image: url("PHOTOS/DSC_1171.JPG");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

/* Video Page Body */
.VideoBody {
    position: relative;
    background-color: #FFFFFF;
    height: 150vw;
    overflow-y: scroll;
    overflow-x: hidden;
    background-image: url("PHOTOS/DSC_1173.JPG");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

/* Contact Page Body */
.ContactBody {
    height: 150vw;
    position: relative;
    background-color: #c5b699;
    background-image: url("PHOTOS/DSC_0656.JPG");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    overflow-y: scroll;
    overflow-x: hidden;
}

/* small screen styles */
@media screen and (max-width: 375px), print {
  #logo {
    position: relative;
    top: -22em;
    left: 7.5em;
    z-index: -1;
  }

  #cubevector {
    top: 1.5em;
    left: -2.5em;
    z-index: -1;
  }

  .middle {
    position: static;
  }

  .nav1{
    top: 5em;
    left: 4.5em;
    width: 80%;
  }

  .nav2 {
    top: -20em;
    left: 4.5em;
    width: 80%;
  }

  .AboutBody {
    position: relative;
  }

  #apm {
    left: -11em;
    top: 0.5em;
  }

  #apmred {
    left: -13.1em;
    top: 0.5em;
  }

  #apmblue {
    left: -11.06em;
    top: -2.6em;
  }

  #apmmedia {
    left: -65em;
    top: 11em;
  }

  #pgbbars {
    top: -5em;
  }

  .navbox1 {
    left: -21em;
    top: -5em;
    width: 90%;
  }

  #about1 {
    width: 40%;
  }

  #photo1 {
    width: 40%;
  }

  #video1 {
    width: 40%;
  }

  #contact1 {
    width: 40%;
  }

  .intro {
    width: 80em;
    left: -47.5em;
    top: 8em;
  }

  #bluevector1 {
    left: -35em;
  }

  #purplevector1 {
    left: -17.5em;
  }

  #greenvector1 {
    left: -9.5em;
  }

  .container {
    left: 1.2em;
  }

  .container2 {
    width: 100%;
  }

  .container3 {
    width: 100%;
    position: relative;
    left: 0.5em;
  }

  .container4 {
    width: 100%;
    left: 3em;
    top: 0.5em;
  }

  .socialmediacontainer {
    top: -55em;
    left: 7em;
  }

  .fotorama{
    left: 5em;
    top: -40em;
  }

  .socialmediacontainerp {
    position: relative;
    top: -40em;
    left: 8em;
  }

  .video1 {
    top: -40em;
    left: -2em;
  }

  .video1 h2 {
    left: 1em;
  }

  .video2 {
    top: -30em;
    left: -4em;
  }

  .video2 h2 {
    left: 4em;
  }

  .socialmediacontainerv {
    position: relative;
    top: -30em;
    left: 8em;
  }

  .contactcontainer{
    top: -50em;
  }

  .contactinfo label {
    left: 1em;
  }

  #firstname, #lastname, #emailinput{
      width: 15em;
  }

  .contactmeth label {
    left: 4em;
  }

  .service label {
    left: 1em;
  }

  .additionalinfo p {
    left: 1em;
  }

  #feedback {
    left: 1em;
    width: 25em;
  }

  #submit {
    left: 8em;
  }

  .socialmediacontainerc {
    position: relative;
    top: -40em;
    left: 6em;
  }

  .PhotoBody, .VideoBody, .ContactBody {
    position: relative;
  }
}