.dropdown-menu {
            -webkit-box-shadow: none;
            box-shadow: none;
            padding: 5px 5px;
            margin: 2px 0px 0px;
          }


          .demobox {
            background-color: #FFF ;
            padding: 20px 20px;
            margin: 2px 0px 0px;
          }


          .h4 {
  display: block;
  font-size: 1.2em;
  margin-top: 1.33em;
  margin-bottom: 1.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
          }

          .h5 {
  display: block;
  font-size: .83em;
  margin-top: 1.67em;
  margin-bottom: 1.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

          .margin-l-150 {
            margin-left:150px!important
          }

          .margin-l-25 {
            margin-left:25px!important
          }

          .margin-l-5 {
            margin-left:5px!important
          }

          .margin-t-10 {
            margin-top:10px!important
          }

          .margin-t-50 {
            margin-top:50px!important
          }

          .margin-t-65 {
            margin-top:65px!important
          }

          .margin-t-70 {
            margin-top:70px!important
          }

          .margin-t-80 {
            margin-top:80px!important
          }

          .margin-t-90 {
            margin-top:90px!important
          }

          .margin-t-100 {
            margin-top:100px!important
          }

          .margin-t-120 {
            margin-top:120px!important
          }

          .margin-t-140 {
            margin-top:140px!important
          }

          .margin-t-150 {
            margin-top:150px!important
          }

          .margin-t-170 {
            margin-top:170px!important
          }

          .margin-t-180 {
            margin-top:180px!important
          }

          .margin-t-190 {
            margin-top:190px!important
          }

          .margin-t-200 {
            margin-top:200px!important
          }

          .margin-t-210 {
            margin-top:210px!important
          }

          .margin-t-223 {
            margin-top:223px!important
          }

          .margin-t-225 {
            margin-top:225px!important
          }

          .margin-t-240 {
            margin-top:240px!important
          }

          .margin-t-250 {
            margin-top:250px!important
          }

          .margin-t-280 {
            margin-top:280px!important
          }

          .margin-t-295 {
            margin-top:295px!important
          }

          .margin-t-305 {
            margin-top:305px!important
          }

          .margin-t-350 {
            margin-top:350px!important
          }

          .margin-t-365 {
            margin-top:365px!important
          }

          .margin-t-370 {
            margin-top:370px!important
          }

          .margin-t-420 {
            margin-top:420px!important
          }

          .margin-t-435 {
            margin-top:435px!important
          }

          .margin-t-460 {
            margin-top:460px!important
          }

          .margin-t-490 {
            margin-top:490px!important
          }

          .margin-t-507 {
            margin-top:507px!important
          }

          .margin-t-515 {
            margin-top:515px!important
          }

          .margin-t-560 {
            margin-top:560px!important
          }

          .margin-t-578 {
            margin-top:578px!important
          }

          .margin-t-585 {
            margin-top:585px!important
          }

          .margin-t-630 {
            margin-top:630px!important
          }

          .margin-t-650 {
            margin-top:650px!important
          }

          .margin-t-690 {
            margin-top:690px!important
          }

          .margin-t-720 {
            margin-top:720px!important
          }

          .margin-t-785 {
            margin-top:785px!important
          }

          .margin-t-840 {
            margin-top:840px!important
          }

          .margin-t-900 {
            margin-top:900px!important
          }

          .margin-t-965 {
            margin-top:965px!important
          }

          .margin-t-1025 {
            margin-top:1025px!important
          }







          .box {
            border: 7px solid #999;
            height: 200px;
            width: 500px;
            background-color: lightgreen;
            display: flex;
          }
          .left, .right {
            height: 100%;
            transition: all 0.5s;
            flex: 0 1 50%;
          }

          .left:hover, .right:hover {
            flex: 1 0 100%;
          }

          .left {
            background-color: lightsalmon;
          }

          .right {
            background-color: mediumpurple;
          }




          .auto {
            display: block;
            margin: 20px;
            width: 400px;
            height: 20px;
            overflow: hidden;
            transition: all .5s ease;
          }


          .flyout {
            display: none;
          }

          #prefacio:hover + .flyout{
            display:block;
          }

          //
          // Carousel
          // --------------------------------------------------


          // Wrapper for the slide container and indicators
          .carousel {
            position: relative;
          }

          .carousel-inner {
            position: relative;
            overflow: hidden;
            width: 100%;

            > .item {
              display: none;
              position: relative;
              .transition(.6s ease-in-out left);

              // Account for jankitude on images
              > img,
              > a > img {
                &:extend(.img-responsive);
                line-height: 1;
              }

              // WebKit CSS3 transforms for supported devices
              @media all and (transform-3d), (-webkit-transform-3d) {
                .transition-transform(~'0.6s ease-in-out');
                .backface-visibility(~'hidden');
                .perspective(1000px);

                &.next,
                &.active.right {
                  .translate3d(100%, 0, 0);
                  left: 0;
                }
                &.prev,
                &.active.left {
                  .translate3d(-100%, 0, 0);
                  left: 0;
                }
                &.next.left,
                &.prev.right,
                &.active {
                  .translate3d(0, 0, 0);
                  left: 0;
                }
              }
            }

            > .active,
            > .next,
            > .prev {
              display: block;
            }

            > .active {
              left: 0;
            }

            > .next,
            > .prev {
              position: absolute;
              top: 0;
              width: 100%;
            }

            > .next {
              left: 100%;
            }
            > .prev {
              left: -100%;
            }
            > .next.left,
            > .prev.right {
              left: 0;
            }

            > .active.left {
              left: -100%;
            }
            > .active.right {
              left: 100%;
            }

          }

          // Left/right controls for nav
          // ---------------------------

          .carousel-control {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            width: @carousel-control-width;
            .opacity(@carousel-control-opacity);
            font-size: @carousel-control-font-size;
            color: @carousel-control-color;
            text-align: center;
            text-shadow: @carousel-text-shadow;
            background-color: rgba(0, 0, 0, 0); // Fix IE9 click-thru bug
            // We can't have this transition here because WebKit cancels the carousel
            // animation if you trip this while in the middle of another animation.

            // Set gradients for backgrounds
            &.left {
              #gradient > .horizontal(@start-color: #cc3518; @end-color: rgba(0,0,0,.0001));
            }
            &.right {
              left: auto;
              right: 0;
              #gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5));
            }

            // Hover/focus state
            &:hover,
            &:focus {
              outline: 0;
              color: @carousel-control-color;
              text-decoration: none;
              .opacity(.9);
            }

            // Toggles
            .icon-prev,
            .icon-next,
            .glyphicon-chevron-left,
            .glyphicon-chevron-right {
              position: absolute;
              top: 50%;
              margin-top: -10px;
              z-index: 5;
              display: inline-block;
            }
            .icon-prev,
            .glyphicon-chevron-left {
              left: 50%;
              margin-left: -10px;
            }
            .icon-next,
            .glyphicon-chevron-right {
              right: 50%;
              margin-right: -10px;
            }
            .icon-prev,
            .icon-next {
              width:  20px;
              height: 20px;
              line-height: 1;
              font-family: serif;
            }


            .icon-prev {
              &:before {
                content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
              }
            }
            .icon-next {
              &:before {
                content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
              }
            }
          }

          // Optional indicator pips
          //
          // Add an unordered list with the following class and add a list item for each
          // slide your carousel holds.

          .carousel-indicators {
            position: absolute;
            bottom: 100px;
            left: 50%;
            z-index: 15;
            width: 60%;
            margin-left: -30%;
            padding-left: 0;
            list-style: none;
            text-align: center;

            li {
              display: inline-block;
              width:  10px;
              height: 10px;
              margin: 1px;
              text-indent: -999px;
              border: 1px solid @carousel-indicator-border-color;
              border-radius: 10px;
              cursor: pointer;

              // IE8-9 hack for event handling
              //
              // Internet Explorer 8-9 does not support clicks on elements without a set
              // `background-color`. We cannot use `filter` since that's not viewed as a
              // background color by the browser. Thus, a hack is needed.
              // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer
              //
              // For IE8, we set solid #cc3518 as it doesn't support `rgba()`. For IE9, we
              // set alpha transparency for the best results possible.
              background-color: #000000 \9; // IE8
              background-color: #000000; // IE9
            }
            .active {
              margin: 0;
              width:  12px;
              height: 12px;
              background-color: @carousel-indicator-active-bg;
            }
          }

          // Optional captions
          // -----------------------------
          // Hidden by default for smaller viewports
          .carousel-caption {
            position: absolute;
            left: 15%;
            right: 15%;
            bottom: 20px;
            z-index: 10;
            padding-top: 20px;
            padding-bottom: 20px;
            color: @carousel-caption-color;
            text-align: center;
            text-shadow: @carousel-text-shadow;
            & .btn {
              text-shadow: none; // No shadow for button elements in carousel-caption
            }
          }


          // Scale up controls for tablets and up
          @media screen and (min-width: @screen-sm-min) {

            // Scale up the controls a smidge
            .carousel-control {
              .glyphicon-chevron-left,
              .glyphicon-chevron-right,
              .icon-prev,
              .icon-next {
                width: (@carousel-control-font-size * 1.5);
                height: (@carousel-control-font-size * 1.5);
                margin-top: (@carousel-control-font-size / -2);
                font-size: (@carousel-control-font-size * 1.5);
              }
              .glyphicon-chevron-left,
              .icon-prev {
                margin-left: (@carousel-control-font-size / -2);
              }
              .glyphicon-chevron-right,
              .icon-next {
                margin-right: (@carousel-control-font-size / -2);
              }
            }

            // Show and left align the captions
            .carousel-caption {
              left: 20%;
              right: 20%;
              padding-bottom: 30px;
            }

            // Move up the indicators
            .carousel-indicators {
              bottom: 20px;
            }
          }



          .border {
            border:1px solid green;
          }