body {
  padding: 0px;
  margin: 0px;
  position: relative;
  font-family: 'Open Sans', sans-serif; }

#introContainer {
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  min-width: 800px;
  background-image: url("/img/welcome/intro_bg_graphic.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  animation-name: introFocusFadeIn;
  animation-duration: 1.5s; }
  #introContainer #sawGraphic {
    position: absolute;
    top: -100%;
    left: -3%;
    width: 60%;
    height: 100%;
    background-image: url("/img/welcome/saw.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    animation-name: sawDrop;
    animation-duration: 1.5s;
    animation-delay: 0.0s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out; }
  #introContainer #compassGraphic {
    position: absolute;
    top: -15px;
    right: -30px;
    z-index: 0;
    width: 100%;
    height: 100%;
    background-image: url("/img/welcome/compass.png");
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: top right;
    animation-name: compassSlide;
    animation-duration: 1.5s;
    animation-delay: 0.0s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out; }
  #introContainer #divHeader {
    position: relative;
    z-index: 9001; }
    #introContainer #divHeader #imgHeaderTitle {
      z-index: 9001;
      width: 746px;
      height: 167px;
      margin-top: 6px; }
  #introContainer #imgYVLogo {
    position: absolute;
    top: 6px;
    left: 10px;
    width: 202px;
    height: 39px;
    opacity: 0.8; }
    #introContainer #imgYVLogo:hover {
      opacity: 1.0; }
  #introContainer.login #mainPopUp {
    transition: border-radius .5s ease-in-out, width .5s ease-in-out, height .5s ease-in-out, top 1.5s ease-in-out;
    top: 36%;
    width: 500px;
    height: 260px; }
  #introContainer.loading #mainPopUp {
    top: 36%;
    width: 100px;
    height: 100px;
    background-image: url("/img/blue_loading.gif");
    background-position: center center;
    background-size: 100px 100px;
    background-repeat: no-repeat; }
  #introContainer.toursView #mainPopUp {
    top: 175px;
    width: 95%;
    height: 78%;
    padding: 10px; }
  #introContainer.newTour #mainPopUp {
    top: 36%;
    width: 500px;
    height: 170px;
    padding: 10px; }
  #introContainer #mainPopUp {
    position: absolute;
    top: 100%;
    left: 50%;
    min-width: 100px;
    min-height: 100px;
    border-radius: 10px;
    border: 1px solid #FFF;
    box-shadow: -10px 12px 30px 0px rgba(0, 0, 0, 0.25);
    background: #f5f5f5;
    box-sizing: border-box;
    padding: 25px 30px 30px 30px;
    transform: translate(-50%);
    transition: border-radius .5s ease-in-out, width .5s ease-in-out, height .5s ease-in-out, top .5s ease-in-out; }
    #introContainer #mainPopUp.shrunken {
      border-radius: 200px; }
    #introContainer #mainPopUp .loginLabel {
      color: #656565; }
    #introContainer #mainPopUp h1 {
      color: #16B5CC;
      margin: 0px 0px 10px 0px; }
    #introContainer #mainPopUp input {
      width: 100%;
      margin: 3px 0px 10px 0px;
      padding: 3px 8px;
      border-radius: 6px; }
    #introContainer #mainPopUp button {
      cursor: pointer;
      background: #FFF;
      border: 1px solid #00B5D1;
      border-radius: 20px;
      padding: 3px 10px;
      color: #00B5D1;
      outline: none;
      margin-top: 4px; }
      #introContainer #mainPopUp button:hover {
        background: #00B5D1;
        color: #FFF; }
    #introContainer #mainPopUp #loginArea {
      width: 100%;
      height: 100%;
      transform: scale(1, 1);
      opacity: 1.0;
      transition: transform .5s ease-in-out, width .5s ease-in-out, height .5s ease-in-out, opacity .3s ease-in-out; }
      #introContainer #mainPopUp #loginArea.shrunken {
        transform: scale(0, 0);
        width: 0%;
        height: 0%;
        opacity: 0.0; }
    #introContainer #mainPopUp #toursArea {
      width: 100%;
      height: 100%;
      transform: scale(1, 1);
      position: relative;
      transition: transform .5s ease-in-out, width .5s ease-in-out, height .5s ease-in-out, opacity .5s ease-in-out; }
      #introContainer #mainPopUp #toursArea #topBar {
        border-radius: 10px;
        position: relative;
        box-sizing: border-box; }
        #introContainer #mainPopUp #toursArea #topBar h1 {
          font-size: 1.5em;
          margin: 0; }
        #introContainer #mainPopUp #toursArea #topBar #cmdNewTour {
          position: absolute;
          top: 2px;
          right: 0px; }
      #introContainer #mainPopUp #toursArea #lblYourTours {
        display: none;
        margin-top: 0px;
        font-style: italic;
        color: #999; }
      #introContainer #mainPopUp #toursArea #toursList {
        border-radius: 10px;
        background: linear-gradient(to top, #eeeeee 0%, #cecece 100%);
        position: absolute;
        top: 41px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        box-sizing: border-box;
        padding: 40px; }
        #introContainer #mainPopUp #toursArea #toursList .tourThumb {
          display: inline-block;
          margin-bottom: 40px;
          margin-right: 40px;
          position: relative;
          border-radius: 10px;
          border: 2px solid #FFF;
          box-shadow: -5px 5px 15px 0px rgba(0, 0, 0, 0.25);
          width: 256px;
          height: 128px;
          transform: scale(1, 1);
          transition: transform 0.3s ease-in-out, background-position 0.3s ease-in-out;
          background-repeat: no-repeat;
          background-position: 50% 50%;
          background-size: 300% 300%;
          overflow: hidden; }
          #introContainer #mainPopUp #toursArea #toursList .tourThumb .innerGlow {
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            box-shadow: inset 0px 0px 80px 0px black;
            background-color: rgba(255, 255, 255, 0.2);
            transition: background-color 0.3s ease-in-out; }
          #introContainer #mainPopUp #toursArea #toursList .tourThumb .title {
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 40px;
            box-sizing: border-box;
            padding: 0px 5px;
            overflow: hidden;
            font-size: 1.5em;
            font-weight: bold;
            color: #FFF;
            text-align: center;
            text-shadow: 0px 0px 12px black; }
          #introContainer #mainPopUp #toursArea #toursList .tourThumb .cmdEditTour {
            position: absolute;
            left: 10px;
            bottom: 10px; }
          #introContainer #mainPopUp #toursArea #toursList .tourThumb .cmdViewTour {
            position: absolute;
            right: 10px;
            bottom: 10px; }
          #introContainer #mainPopUp #toursArea #toursList .tourThumb button {
            opacity: 0.0;
            transition: opacity 0.3s ease-in-out; }
          #introContainer #mainPopUp #toursArea #toursList .tourThumb:hover {
            transform: scale(1.2, 1.2);
            border: 2px solid #00B5D1; }
            #introContainer #mainPopUp #toursArea #toursList .tourThumb:hover button {
              opacity: 1.0; }
            #introContainer #mainPopUp #toursArea #toursList .tourThumb:hover .innerGlow {
              background-color: rgba(255, 255, 255, 0); }
          #introContainer #mainPopUp #toursArea #toursList .tourThumb.createNew {
            cursor: pointer;
            border: 2px dashed #b3b3b3;
            box-shadow: none; }
            #introContainer #mainPopUp #toursArea #toursList .tourThumb.createNew .innerGlow {
              display: none; }
            #introContainer #mainPopUp #toursArea #toursList .tourThumb.createNew .title {
              pointer-events: none;
              font-size: 1.5em;
              font-style: italic;
              font-weight: 100;
              color: #b3b3b3;
              text-align: center;
              text-shadow: 0px 0px 12px rgba(0, 0, 0, 0); }
            #introContainer #mainPopUp #toursArea #toursList .tourThumb.createNew:hover {
              border: 2px dashed #00B5D1; }
              #introContainer #mainPopUp #toursArea #toursList .tourThumb.createNew:hover .title {
                color: #00B5D1;
                text-shadow: 0px 0px 12px white; }
        #introContainer #mainPopUp #toursArea #toursList #noTours {
          background-image: url("/img/sad_euvee.png");
          background-position: center center;
          background-size: auto 100%;
          background-repeat: no-repeat;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -70%);
          width: 300px;
          height: 200px; }
          #introContainer #mainPopUp #toursArea #toursList #noTours p {
            font-size: 1.5em;
            font-style: italic;
            color: #828282;
            text-align: center;
            position: absolute;
            left: -30px;
            right: -30px;
            bottom: -60px; }
      #introContainer #mainPopUp #toursArea.shrunken {
        transform: scale(0, 0);
        height: 0%;
        opacity: 0.0; }
    #introContainer #mainPopUp #newTourArea {
      width: 100%;
      height: 100%;
      transform: scale(1, 1);
      transition: transform .5s ease-in-out, width .5s ease-in-out, height .5s ease-in-out, opacity .5s ease-in-out; }
      #introContainer #mainPopUp #newTourArea.shrunken {
        transform: scale(0, 0);
        width: 0%;
        height: 0%;
        opacity: 0.0; }

@keyframes introFocusFadeIn {
  0% {
    filter: blur(20px);
    opacity: 0;
    background-size: 140% 140%; }
  100% {
    filter: blur(0px);
    opacity: 1;
    background-size: 100% 100%; } }

@keyframes sawDrop {
  0% {
    top: -100%; }
  100% {
    top: 0%; } }

@keyframes compassSlide {
  0% {
    right: -100%; }
  100% {
    right: -30px; } }

@keyframes mainPopUp {
  0% {
    top: 100%;
    opacity: 0; }
  100% {
    top: 36%;
    opacity: 1; } }

@keyframes toursPopUp {
  0% {
    top: 36%; }
  100% {
    top: 180px; } }