@font-face {
    font-family: 'tommybiglowhandwritingmedium';
    src: url('/fonts/tommybiglowhandwriting-webfont.woff2') format('woff2'),
         url('/fonts/tommybiglowhandwriting-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.button-group {
  text-align: right;
  position: fixed;
  top: 20px;
  right: 20px;
}

.button-group button {
    background: none;
    border: none;
    font-size: 1em;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 0px 20px 0;
}

button {
  cursor: pointer;
}

/*.grid .grid-item:first-child {
  margin-top: 30px;
}*/

body {
  font-family: "tommybiglowhandwritingmedium";
  text-transform: uppercase;
  background: #e6e6e6;
}

    #flipdiv {
      width: 100%;
      height: 100%;
      -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    }
    
    h1 {
      position: fixed;
      top: 10px;
      left: 20px;
      /*right: 0;*/
      text-align: left;
    }

    a {
      color: #000;
    }

    a:hover, a:focus, a:active, button:hover, button:focus, button:active {
      text-decoration: none;
      color: #666;
        outline: none;

    }

    .info-img {
      margin-top: 90px; 
      display: block;
    }

    .photo-grid div div {
      padding-bottom: 30px;
    }

.selector {
      position: fixed;
      bottom: 40px;
      left: 10px;
      -ms-transform: rotate(-90deg); /* IE 9 */
      -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
      transform: rotate(-90deg);
          font-size: .8em;
    }

    .selector a {
      float: left;
      padding: 0 0px 0 7px;
      text-decoration: none;
    }
    .info {
      position: fixed;
      bottom: 20px;
      right: 20px;
      font-size: 1em;
      letter-spacing: 2px;
      font-weight: bold;
    }

    .super-shady {
    	background: white;
      padding: 0px;
      -webkit-box-shadow: 0 0px 5px 1px rgba(0,0,0,.4) inset;
       -moz-box-shadow: 0 0px 5px 1px rgba(0,0,0,.4) inset;
            box-shadow: 0 0px 5px 1px rgba(0,0,0,.4) inset;
            
    }

    .shady {
      margin: 90px auto 190px;
	  /*background: url('/img/changer.gif') repeat;*/
    background: #333;
      padding: 7px;
      -webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,.4);
       -moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,.4);
            box-shadow: 0px 0px 3px 1px rgba(0,0,0,.4);
            
    }

    .shady img {
      padding: 8px;
    }

    .fifty {
      width: 50%;
      right: 0;
    }

    .seventy {
      width: 70%;
      right: 0;
    }

    .videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 0px;
  height: 0;
}

.close {
  cursor: pointer;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

img {
    max-width: 100%;
    width: 100%;
    display: block;
    text-align: center;
}
video {
  display: none;
}
#video-background {
    position: fixed;
    left: 0;
    top: 0;
    min-height: 100vh;
    min-width: 100vw;
    width: auto;
    height: auto;
    z-index: -100;
    background-position: top left;
}
.html5-info-bar {
  display: none;
}
.lazyYT {
  //margin: 50px auto 125px;
}
.body {
  max-width: 100%;
  width: 720px;
  margin: 0 auto;
  /*background: #e6e6e6;*/
}


  .tombo {
    max-width: 600px;
  }
  .turn {
    -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    transform: rotate(-90deg);
    width: 100px;
    height: 100px;
  }

@media only screen and (max-width: 768px) {

  .shady {
    margin: 80px auto 0px;
  }
    .super-shady {
      padding: 3px;
            
    }
  }