html {
  height: 100%;
  background: url(/selection/IBphotoshoot3small.jpg) no-repeat center center
    fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

button {
  font-weight: bold;
  font-style: italic;
  background: -moz-linear-gradient(white, rgba(0, 0, 0, 0.2)); /* FF 3.6+ */
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, white),
    color-stop(100%, #b2b2b2)
  ); /* Safari 4+, Chrome 2+ */
  background: -webkit-linear-gradient(
    white,
    rgba(0, 0, 0, 0.2)
  ); /* Safari 5.1+, Chrome 10+ */
  background: -o-linear-gradient(white, rgba(0, 0, 0, 0.2)); /* Opera 11.10 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='white', endColorstr='#B2B2B2'); /* IE6 & IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='white', endColorstr='#B2B2B2')"; /* IE8+ */
  background: linear-gradient(white, rgba(0, 0, 0, 0.2)); /* the standard */
  width: 7em;
  height: 3em;
  color: #00ffff;
  border: 1px dotted #ff0066;
  box-shadow: 0px 0px 2px 2px #b20000;

  border-radius: 10%;
}
button:hover {
}

#container {
  font-family: "Open Sans", "Droid", "Helvetica", "sans-serif", "Dancing Script";
  font-size: 100%;

  width: 100%;
  position: absolute;
  top: 0%;
  background-color: rgba(0, 0, 0, 0.2);
}

h1,
h2 {
  font-style: italic;
  font-weight: lighter;
  padding-right: 0em;
  padding-left: 2em;
}
a {
  color: #0066ff;
}
a:hover {
  text-shadow: 0px 0px #ffffff;
  color: #ff6600;
}

#mobilemenu {
  display: none;
}

#menubutton {
  display: none;
}
ul {
  padding-right: 5em;
  padding-left: 5em;
}

p {
  font-family: "Open Sans", "Droid", "Helvetica", "sans-serif", "Dancing Script";
  text-align: justify;
  line-height: 2em;
  text-indent: 1em;
  padding-right: 4em;
  padding-left: 4em;
  padding-top: 1em;
  text-justify: inter-word;
}
#page {
  height: 100%;
  color: #ffffff;
  text-shadow: 0px 0px #000000;
  width: 70%;

  margin-left: 13%;
  margin-right: 15%;
  border: 1px dotted #ff0066;
  background-color: rgba(0, 0, 0, 0.3);
  box-shadow: 0px 10px 100px 20px #b20000;
  padding: 1%;
  line-height: 1.5em;
  z-index: 50;
}

#page:hover {
  background-color: rgba(0, 0, 0, 0.6);
}
.toplinks {
  margin-left: 1em;
}
#banner {
  position: fixed;
  top: 0.5em;
  width: 70%;
  max-height: 22%;
  background: -webkit-linear-gradient(
    bottom,
    rgba(0, 0, 0, 0.2) white,
    white
  ); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(
    bottom,
    white,
    rgba(0, 0, 0, 0.2)
  ); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(
    top,
    white,
    white,
    rgba(0, 0, 0, 0.2)
  ); /* the standard */
  background: linear-gradient(to bottom, white, rgba(0, 0, 0, 0.2));
  white-space: nowrap;
}

.linksonpage {
  position: absolute;
  top: 1em;
  right: 20%;
  float: right;
  z-index: 50;
  text-shadow: 2px 2px 2px 2px #000000;
  visibility: visible;
  display: inline;
}

#space {
  height: 150px;
}

#slideshowbutton {
  float: right;
}
#slideshowbutton:hover {
  text-shadow: 0px 1px #000000;
  border: 2px dotted #ff0066;
  box-shadow: 0px 0px 2px 3px #b20000;
  border-radius: 20%;
}
#slideshowbutton:active {
  border: 2px dotted #ff751a;
  box-shadow: 0px 0px 2px 3px #ff751a;
  border-radius: 30%;
}
#player1 {
  position: static;
  border: 1px dotted #ff0066;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  z-index: 50;
}
#player2 {
  position: static;
  border: 1px dotted #ff0066;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  z-index: 50;
}

#photoleft {
  position: fixed;
  top: 0;
  left: 0;
  width: 18%;
  height: 100%;
}
#imgphotolefttop,
#imgphotoleftbottom,
#imgphotorighttop,
#imgphotorightbottom {
  height: 50%;
  opacity: 0.7;
}
#photoright {
  position: fixed;
  top: 0;
  right: 0;
  width: 19%;
  height: 100%;
}
.logo {
  width: 15%;
  padding: 0;
}
#logo1 {
  width: 10%;
}
#photos {
  padding-top: 10%;
  padding-right: 1em;
  padding-left: 1em;
  text-align: justify;
  text-justify: inter-word;
}
.photo {
  width: 20%;
  padding: 1em;
}
.photo:hover {
  border: 1px dotted #ff0066;
}
#photopopup {
  width: 50%;
  max-height: 100%;
  margin-right: 25%;
  margin-left: 25%;
}
#photopopuplabel {
  margin-right: 25%;
  margin-left: 25%;
  font-style: italic;
}
.x {
  position: absolute;
  right: 2%;
  top: 2%;
  border-radius: 50%;
  padding: 0.4em;
  line-height: 2em;
  text-indent: 0em;

  box-shadow: -1px -1px 2px 2px #b20000;
  text-shadow: 1px 1px #b20000;
}

#forward {
  position: absolute;
  height: 100%;
  text-align: center;
  height: 100%;
  width: 20%;
  right: 0%;
  top: 50%;

  padding: 2em;

  text-shadow: 1px 1px #b20000;
}
#backward {
  position: absolute;
  height: 100%;
  vertical-align: middle;
  text-align: center;
  height: 100%;
  width: 20%;
  left: 0%;
  top: 50%;

  padding: 2em;

  text-shadow: 1px 1px #b20000;
}
#popup {
  width: 0%;
  position: absolute;
  left: 50%;
  bottom: 0%;
  border-radius: 60%;
  box-shadow: 0px 10px 50px 20px #b20000;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  transition-duration: 0.4s;
  -webki-transition-duration: 0.4s;
}
#popup {
  visibility: hidden;
}
#popupup {
  height: auto;
  width: 70%;
  position: fixed;
  left: 14%;
  bottom: 0%;
  background-color: rgba(0, 0, 0, 0.9);
  border: 1px dotted #ff0066;
  box-shadow: 0px 10px 100px 20px #b20000;
  z-index: 70;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  transition-duration: 0.4s;
  -webki-transition-duration: 0.4s;
}
#popupup {
  visibility: visible;
}

#imgdiv {
  display: inline-block;
  margin: 0 5px;
}

.copy {
  text-align: center;
}

@media screen and (max-width: 800px) and (orientation: portrait) {
  html {
    height: 100%;
    background: url(selection/ph16s.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  h1,
  h2 {
    padding-left: 1em;
  }
  #banner {
    width: 100%;
    white-space: wrap;
  }

  #space {
    height: 7em;
  }

  a {
    line-height: 2em;
  }

  .logo {
    width: 16%;
    padding: 0;
  }
  #logo1 {
    width: 14%;
  }
  .linksonpage {
    display: none;
  }
  #mobilemenu {
    position: fixed;
    top: 3em;
    right: 0.5em;
    background: -webkit-linear-gradient(
      bottom,
      rgba(217, 217, 217, 0.7),
      white,
      rgba(217, 217, 217, 0.7) white
    ); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(
      bottom,
      rgba(217, 217, 217, 0.7),
      rgba(255, 255, 255, 0.9),
      white,
      rgba(255, 255, 255, 0.9),
      rgba(217, 217, 217, 0.7)
    ); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(
      top,
      rgba(217, 217, 217, 0.7),
      rgba(255, 255, 255, 0.9),
      white,
      rgba(255, 255, 255, 0.9),
      rgba(217, 217, 217, 0.7)
    ); /* the standard */
    background: linear-gradient(
      to bottom,
      rgba(217, 217, 217, 0.7),
      rgba(255, 255, 255, 0.9),
      white,
      rgba(255, 255, 255, 0.9),
      rgba(217, 217, 217, 0.7)
    );
    width: auto;
    text-shadow: 0px 0px #000000;
    -webkit-box-shadow: 14px 10px 24px 0px rgba(255, 0, 0, 0.75);
    -moz-box-shadow: 14px 10px 24px 0px rgba(255, 0, 0, 0.75);
    box-shadow: 14px 10px 24px 0px rgba(255, 0, 0, 0.75);
    padding: 2%;
    z-index: 70;
    border-radius: 10%;
  }
  ul {
    list-style-type: none;
    line-height: 3em;
    padding-right: 1.5em;
  }
  #menubutton {
    position: fixed;
    top: 1em;
    right: 0.5em;
    visibility: visible;
    display: inline;
  }

  #photoleft {
    visibility: hidden;
  }
  #imgphotolefttop,
  #imgphotoleftbottom,
  #imgphotorighttop,
  #imgphotorightbottom {
    height: 50%;
  }
  #photoright {
    visibility: hidden;
  }
  .x,
  #backward,
  #forward {
    position: fixed;
  }
  #page {
    color: #ffffff;
    text-shadow: 0px 0px #000000;
    width: 95%;
    margin-left: 0%;
    margin-right: 2%;
    background-color: rgba(0, 0, 0, 0.4);
    border: 1px dotted #ff0066;
    box-shadow: 0px 0px 0px 0px #000000;
    padding: 1%;
    z-index: 50;
  }
  p {
    padding: 5%;
  }
  .photo {
    padding: 0em;
  }
  #popupup {
    width: 94%;
    height: auto;
    position: fixed;
    left: 2%;
    bottom: 0%;
    background-color: rgba(0, 0, 0, 0.9);
    border: 1px dotted #ff0066;
    box-shadow: 0px 10px 100px 20px #b20000;
    z-index: 70;
    -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    transition-duration: 0.4s;
  }
  #popupup {
    visibility: visible;
  }
  #photopopup {
    width: 90%;
    height: auto;
    margin-right: 5%;
    margin-left: 5%;
  }
  #photopopuplabel {
    margin-right: 10%;
    margin-left: 10%;
    font-style: italic;
  }
  .x {
    position: absolute;
    right: 6%;
    top: 1%;
  }
}
@media screen and (max-width: 800px) and (orientation: landscape) {
  #banner {
    width: 100%;
    white-space: wrap;
    height: 30%;
  }

  #space {
    height: 8em;
  }

  a {
    line-height: 2em;
  }

  .photo {
    padding: 0em;
  }

  .logo {
    position: fixed;
    top: 1em;
    width: 12%;
    padding: 0;
  }
  #logo1 {
    width: 12%;
  }
  .linksonpage {
    display: none;
  }
  #mobilemenu {
    position: fixed;
    top: 3em;
    right: 0.5em;
    background: -webkit-linear-gradient(
      bottom,
      rgba(217, 217, 217, 0.7),
      white,
      rgba(217, 217, 217, 0.7) white
    ); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(
      bottom,
      rgba(217, 217, 217, 0.7),
      rgba(255, 255, 255, 0.9),
      white,
      rgba(255, 255, 255, 0.9),
      rgba(217, 217, 217, 0.7)
    ); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(
      top,
      rgba(217, 217, 217, 0.7),
      rgba(255, 255, 255, 0.9),
      white,
      rgba(255, 255, 255, 0.9),
      rgba(217, 217, 217, 0.7)
    ); /* the standard */
    background: linear-gradient(
      to bottom,
      rgba(217, 217, 217, 0.7),
      rgba(255, 255, 255, 0.9),
      white,
      rgba(255, 255, 255, 0.9),
      rgba(217, 217, 217, 0.7)
    );
    width: auto;
    text-shadow: 0px 0px #000000;
    -webkit-box-shadow: 14px 10px 24px 0px rgba(255, 0, 0, 0.75);
    -moz-box-shadow: 14px 10px 24px 0px rgba(255, 0, 0, 0.75);
    box-shadow: 14px 10px 24px 0px rgba(255, 0, 0, 0.75);
    padding: 2%;
    z-index: 70;
    border-radius: 10%;
  }
  ul {
    list-style-type: none;
    line-height: 3em;
    padding-right: 1.5em;
  }
  #menubutton {
    position: fixed;
    top: 1em;
    right: 0.5em;
    visibility: visible;
    display: inline;
  }

  #photoleft {
    visibility: hidden;
  }
  #imgphotolefttop,
  #imgphotoleftbottom,
  #imgphotorighttop,
  #imgphotorightbottom {
    height: 50%;
  }
  #photoright {
    visibility: hidden;
  }
  .x {
    position: fixed;
  }
  #page {
    color: #ffffff;
    text-shadow: 0px 0px #000000;
    width: 95%;
    margin-left: 0%;
    margin-right: 2%;
    background-color: rgba(0, 0, 0, 0.4);
    border: 1px dotted #ff0066;
    box-shadow: 0px 0px 0px 0px #000000;
    padding: 1%;
    z-index: 50;
  }
  p {
    padding: 5%;
  }

  #popupup {
    width: 94%;
    height: auto;
    position: fixed;
    left: 2%;
    bottom: 0%;
    background-color: rgba(0, 0, 0, 0.9);
    border: 1px dotted #ff0066;
    box-shadow: 0px 10px 100px 20px #b20000;
    z-index: 70;
    -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    transition-duration: 0.4s;
  }
  #popupup {
    visibility: visible;
  }
  #photopopup {
    width: 90%;
    height: auto;
    margin-right: 5%;
    margin-left: 5%;
  }
  #photopopuplabel {
    margin-right: 10%;
    margin-left: 10%;
    font-style: italic;
  }
  .x {
    position: absolute;
    right: 6%;
    top: 1%;
  }
}