::selection { color: #213444; background: #F2E18B; }

::-moz-selection { color: #213444; background: #F2E18B; }

#luxetbono .st0 { font-family: "scriptorama-tradeshow-jf", sans-serif; }

#luxetbono .st1 { font-size: 87.2104px; }

#luxetbonoand #lux, #luxetbonoand #et, #luxetbonoand #bono { fill: #FFF; font-size: 80px; font-family: 'scriptorama-tradeshow-jf'; }

#luxetbonoand #and { position: absolute; top: 0px; left: -1vw; fill: #f97c7c; font-size: 340.074px; font-family: "reklame-script", sans-serif; margin-top: -35vw; z-index: 1; }

#LMSST #together { font-family: "reklame-script", sans-serif; font-size: 240px; }

#LMSST #whitebackground { fill: #FFF; }

#LMSST #slogan { font-family: "Josefin Sans", sans-serif; font-size: 44px; }

#abc .st0, #abc #abc .st1 { position: relative; left: 0px; }

#abc .st0 { font-family: "Josefin Sans", sans-serif; font-size: 200px; fill: #FFF; }

#abc .st1 { font-family: "scriptorama-tradeshow-jf", sans-serif; font-size: 36px; fill: #F97C7C; }

html, body, nav, #container { overflow: hidden; }

div#container { position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; background-color: #213444; overflow: hidden; }

div#container { background-image: url(/assets/background.png); }

#logo { position: absolute; left: 20px; }

#luxetbono { position: absolute; z-index: 2; }

text#lux, text#et, text#bono { text-shadow: 0px 3px 0px #213444, 0px 14px 10px rgba(0, 0, 0, 0.15), 0px 24px 2px rgba(0, 0, 0, 0.1), 0px 34px 30px rgba(0, 0, 0, 0.1); }

#gt { position: absolute; width: inherit; display: block; font-weight: 800; font-family: 'Varela Round', sans-serif; color: #f2e18b; text-align: center; -webkit-text-fill-color: #213444; -webkit-text-stroke: 1px #F2E18B; }

#pitch { position: absolute; width: inherit; font-family: "reklame-script", sans-serif; color: #fff; text-align: center; }

#flight #places { position: relative; display: inline; margin-right: 40px; left: 20px; border: 1px solid beige; padding: 1px 18px; font-weight: bold; color: beige; border-radius: 5px; background-image: url(/assets/background.png); }

#flight div { position: relative; display: inline; font-family: 'Varela Round', sans-serif; color: beige; }

nav { position: absolute; font-weight: bold; font-family: 'Varela Round', sans-serif; z-index: 3; }

nav li { list-style: none; width: 400px; }

nav a { text-decoration: none; }

nav .work a { color: #F97C7C; }

nav .about a { color: #fff; width: 200px; }

nav .contact a { color: #F2E18B; }

@media (orientation: landscape) { #maintext { position: absolute; top: 15vh; left: 50vw; margin-left: -300px; }
  div#container { width: 100vw; }
  #logo { width: 300px; }
  #logo #and { text-shadow: 7px 4px 6px #1f2d3a, 19px 20px 6px #2e4150; }
  #greeting { position: absolute; top: 440px; left: -40px; width: 400px; height: 75px; }
  #gt { font-size: 40px; }
  #pitch { top: 40px; font-size: 35px; }
  #arrow { display: none; }
  #flight { position: absolute; bottom: 20px; left: 50vw; margin-left: -260px; width: 200px; height: 20px; background-color: #213444; border: 2px solid #394e5f; box-shadow: 4px 4px 2px #213444; padding: 8px 16px; z-index: 2; }
  nav { top: 40px; right: 0px; width: 10vw; bottom: 40px; font-size: 25px; background-color: #213444; border: 20px solid #FFFFFF; border-width: 20px 0px 20px 20px; background-image: url("../work/photos/Drag%20Queen.jpg"); background-position: left; }
  @keyframes navSlider { from { left: 80vw; }
    to { left: 40px; } }
  nav:hover { width: auto; left: 40px; animation-name: navSlider; animation-duration: 1s; animation-timing-function: ease-in-out; }
  @keyframes flightOpacity { from { opacity: 1.0; }
    to { opacity: 0.0; } }
  nav:hover ~ #flight { opacity: 0.0; animation-name: flightOpacity; animation-duration: 1s; animation-timing-function: ease-in-out; }
  nav .work a:hover::before { color: #F97C7C; }
  nav .about a:hover::before { color: #fff; margin-top: -10px; margin-left: 0px; font-family: 'Homemade Apple', cursive; font-size: 25px; width: 400px; }
  nav .contact a:hover::before { color: #F2E18B; }
  nav a:hover::before { position: absolute; content: attr(data-nav); width: 100px; }
  nav a:hover { color: transparent; }
  nav ul { position: relative; margin-top: -150px; top: 50vh; } }

@media (orientation: portrait) { body { position: absolute; top: 5px; bottom: 5px; left: 5px; right: 5px; }
  #maintext { position: absolute; top: 25vh; left: 25vw; }
  #logo { width: 40vw; max-width: 400px; height: 100%; }
  #greeting { position: absolute; top: 58vw; left: -15vw; width: 75vw; height: 75px; }
  #gt { font-size: 6vw; }
  #pitch { top: 6vw; font-size: 5vw; }
  #arrow { position: absolute; bottom: 10px; right: 10px; width: inherit; font-size: 10vw; font-family: 'Varela Round', sans-serif; color: #fff; text-align: right; }
  #flight { position: relative; top: 20px; left: 0px; width: 100%; height: 20px; background-color: #213444; padding: 8px 0px; text-align: right; }
  #maintext, #arrow { cursor: pointer; }
  #maintext:hover + #arrow, #arrow:hover { color: #F2E18B; }
  nav { top: 15vh; left: 0vw; margin-top: 0px; margin-left: 450px; font-size: 5vh; }
  .about-highlighted:before { position: absolute; content: attr(data-nav); margin-top: -10px; margin-left: -10vw; width: 100vw; font-family: 'Homemade Apple', cursive; font-size: 4vh; }
  /* Used in JavaScript for portrait mode navigation. */
  .before-text::before { position: absolute; content: attr(data-nav); width: 400px; } }