/*============================
=            BASE            =
============================*/
body {
    background: black;
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
    color: #333;
    font-family: 'Lato';
}
main, article, section, header, footer, aside {
    position: relative;
}
section {
    margin: 175px 0;
}
h2 {
    margin-top: 0;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 50px;
    text-align: center;
}
h3 {
    font-weight: 300;
}
a {
    text-decoration: none !important;
    -webkit-transition: all 225ms ease;
    -moz-transition: all 225ms ease;
    transition: all 225ms ease;
    color: #FF6767;
}
a:hover {
    color: #FF1F1F;
}
::selection {
    background: #000;
    color: #fff;
}
::-moz-selection {
    background: #000;
    color: #fff;
}
th {
    background: #e3e3e3;
    color: #333;
}

.make-me-a-panel,
.button-panel { display: none !important; }
.scotchified .make-me-a-panel,
.scotchified .button-panel { display: block !important; }







/*========================================
=            INDIVIDUAL ITEMS            =
========================================*/
.content {
    background: #fff;
    padding: 50px;
    -moz-box-shadow: 0 0 6px rgba(153, 153, 153, 0.29);
    -webkit-box-shadow: 0 0 6px rgba(153, 153, 153, 0.29);
    box-shadow: 0 0 6px rgba(153, 153, 153, 0.29);
}
.burger-x {
    position: absolute;
    top: 45%;
    left: 0;
    display: block;
    width: 100%;
    height: 8px;
    background-color: #fff;
    font-size: 0px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 225ms ease;
    -moz-transition: all 225ms ease;
    transition: all 225ms ease;
    margin: 0 auto;
}
.burger-x:before, .burger-x:after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    content: '';
    -webkit-transition: all 225ms ease;
    -moz-transition: all 225ms ease;
    transition: all 225ms ease;

}
.burger-x:before {
    -webkit-transform: translateY(-200%);
    transform: translateY(-200%);
}
.burger-x:after {
    -webkit-transform: translateY(200%);
    transform: translateY(200%);
}
.scotch-is-showing .burger-x {
    background-color: transparent !important;
}
.scotch-is-showing .burger-x:before {
    -webkit-transform: translateY(0) rotate(45deg);
    transform: translateY(0) rotate(45deg);
}
.scotch-is-showing .burger-x:after {
    -webkit-transform: translateY(0) rotate(-45deg);
    transform: translateY(0) rotate(-45deg);
}
.center-hack {
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.loader {
    width: 30px;
    height: 30px;
    border-style: solid;
    border-top-color: #FFF;
    border-right-color: #FFF;
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-animation: rotate 500ms ease-in-out infinite;
    animation: rotate 500ms ease-in-out infinite;
    -webkit-transform: rotate(-200deg);
    -ms-transform: rotate(-200deg);
    transform: rotate(-200deg);
}




/*================================
=            MAIN NAV            =
================================*/
#main-nav {
    background: #2E2E2E;
    text-align: center;
}
#main-nav a {
    display: block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    color: #ff;1#main-nav a i {
    color: #FF6767;
    margin-right: 5px;
}
#main-nav a:hover {
    background: #242424;
}
#main-nav .scotch-panel-wrapper {
    height: 100%;
}
#nested-demo {
    background: rgb(44, 16, 63);
}
#nested-demo a {
    color: #fff;
}
#nested-demo a:hover {
    color: #fff;
    background: rgb(0, 124, 172);
}
#nested-demo a i {
    color: #AAFF9A;
}


/*======================================
=            CALL TO ACTION            =
======================================*/
#call-to-action {
    background: #0f1a32;
    text-align: center;
    min-height: 800px !important;
}
#call-to-action a.toggle-nav {
    position: absolute;
    right: 15px;
    top: 5px;
    color: #fff;
    font-size: 40px;
    display: block;
    width: 60px;
    height: 60px;
}
#call-to-action a.toggle-nav:hover .burger-x, #call-to-action a.toggle-nav:hover .burger-x:before, #call-to-action a.toggle-nav:hover .burger-x:after {
    background-color: #1cf2aa;
}
.scotch-is-showing #call-to-action a.toggle-nav .burger-x:before, .scotch-is-showing #call-to-action a.toggle-nav .burger-x:after {
    background-color: #FF6767;
}
.toggle-nested-demo {
    background: red;
}
.toggle-nested-demo:hover {
    background: red !important;
}
a.toggle-nested-demo i {
    font-size: 20px;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    transition: all 300ms ease;
    position: absolute;
    right: 40px;
    top: 15px;
}
#main-nav .scotch-is-showing #nested-demo ~ a.toggle-nested-demo i {
    -o-transform: rotate(1620deg);
    -ms-transform: rotate(1620deg);
    -moz-transform: rotate(1620deg);
    -webkit-transform: rotate(1620deg);
    transform: rotate(1620deg);
}
#call-to-action span.demo {
    color: #9ED1FF;
    position: absolute;
    right: 100%;
    font-size: 13px;
    width: 150px;
    text-transform: uppercase;
    top: 20px;
    -webkit-animation-name: jiggle;
    animation-name: jiggle;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
#call-to-action .hero {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
}
#call-to-action button {
    max-width: 225px;
    margin: 0 auto;
    background: #FF6767;
    color: #fff;
    height: 60px;
    padding: 0;
    line-height: 60px;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
    outline: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    margin-top: 35px;
    margin-bottom: 10px;
    margin-right: 5px;
    margin-left: 5px;
    font-weight: 400;
    display: inline-block;
    overflow: hidden;
    -o-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    border: none !important;
}
#call-to-action button:hover, #call-to-action button:focus {
    background: #FF7979;
}
#call-to-action button:active {
    background: #FF8E8E;
}
#call-to-action .button-panel {
    background: #00FFAD;
    color: rgb(5, 31, 60);
    font-size: 11px;
}
#call-to-action small {
    font-size: 14px;
    color: #fff;
    display: block;
}
#call-to-action h1 {
    color: #fff;
    margin: 0;
    font-family: 'Luckiest Guy';
    font-size: 100px;
    text-transform: uppercase;
    letter-spacing: 0.035em;
    font-size: 160px;
    line-height: 100%;
    -moz-text-shadow: 0px 0px 5px rgba(2, 2, 2, 0.35);
    -webkit-text-shadow: 0px 0px 5px rgba(2, 2, 2, 0.35);
    text-shadow: 0px 0px 5px rgba(2, 2, 2, 0.35);
}
#call-to-action p {
    margin: 0;
    color: #9ED1FF;
    font-size: 40px;
    font-weight: 300;
}
#call-to-action p span {
    color: #e0e0e0;
}
#call-to-action a.more {
    position: absolute;
    bottom: -20px;
    left: 50%;
    color: #fff;
    font-size: 22px;
    font-weight: 300;
}
#call-to-action a.more:hover, #call-to-action a.more:focus {
     color: #1cf2aa;
}
#call-to-action a.more span {
    display: block;
}
#call-to-action a.more i {
    -moz-transition: all 225ms ease;
    -webkit-transition: all 225ms ease;
    transition: all 225ms ease;
    -webkit-animation-name: bounce;
    animation-name: bounce;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    color: #1cf2aa !important;
}




/*=============================================
=            DIRECTION AND CONTENT            =
=============================================*/
#direction-content .content {
    padding: 0;
}
#direction-content h2 {
    padding-top: 50px;
}
#direction-content p {
    text-align: center;
}
#direction-content .arrows {
    text-align: center;
    margin: 0 auto;
    max-width: 320px;
    padding-bottom: 50px;
}
#direction-content .arrows a {
    width: 25%;
    display: block;
    float: left;
}
#direction-content .arrows a i {
    display: block;
    font-size: 50px;
}
#direction-content .arrows a span {
    display: block;
}
#direction-content-html-panel {
    background: #53b5e6;
    padding: 15px;
    -o-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
#direction-content-html-panel legend {
    margin: 0;
    border: none;
    color: #fff;
}
#direction-content-html-panel button {
    float: left;
}
#direction-content-html-panel a {
    float: right;
}
#direction-content #direction-content-video-panel .toggle-direction-content-video {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99999;
    margin: 5px;
}
#direction-content #direction-content-iframe-panel {
    background: #1cf2aa !important;
    -o-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
#direction-content #direction-content-iframe-panel .loader {
    border-top-color: #53b5e6;
    border-right-color: #53b5e6;
    display: block;
    position: absolute;
    left: 50%;
    top: 40%;
    margin-top: -15px;
    margin-left: -15px;
}
#direction-content .toggle-direction-content-iframe {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 999999;
    width: 50%;
    -webkittransform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}
#direction-content .toggle-direction-content-image {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999999;
}







/*=====================================
=            ANY CONTAINER            =
=====================================*/
#any-container .events {
    margin-top: 50px;
}
#any-container .wrap {
    background: #9ED1FF;
}
#any-container .content-helper-panel.click {
    background: #BDFFBD;
    color: #9B1DCC;
}
#any-container .content-helper-panel.hover {
    background: #FFE459;
    color: #246E20;
}
#any-container .content-helper-panel.touch {
    background: #FF6C6C;
    color: #A20000;
}
#any-container h3 {
    margin: 0;
    display: block;
    width: 100%;
    text-align: center;
    height: 200px;
    line-height: 200px;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    transition: all 300ms ease;
}
#any-container .events h3 {
    height: 100px;
    line-height: 100px;
}
#any-container .content-helper-panel i {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 20px;
}
#any-container .wrap.click-content-helper, #any-container .wrap.touch-content-helper {
    cursor: pointer;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    transition: all 300ms ease;
}
#any-container .wrap.click-content-helper:hover, #any-container .wrap.touch-content-helper:hover {
    background: #62C0FF;
}
#any-container .wrap.click-content-helper:hover h3, #any-container .wrap.touch-content-helper:hover h3 {
    color: #fff;
}




/*================================
=            ANY SYLES           =
================================*/
#any-style .row {
    margin: 15px 0;
}
#any-style .content {
    margin-bottom: 50px;
}
#any-style .events {
    margin-top: 50px;
}
#any-style .wrap {
    background: #9ED1FF;
}
#any-style h3 {
    margin: 0;
    display: block;
    width: 100%;
    text-align: center;
    height: 200px;
    line-height: 200px;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    transition: all 300ms ease;
}
#any-style .content-helper-panel i {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 20px;
}
#any-style .wrap.click-content-helper, #any-style .wrap.touch-content-helper {
    cursor: pointer;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    transition: all 300ms ease;
}
#any-style .wrap.click-content-helper:hover, #any-style .wrap.touch-content-helper:hover {
    background: #62C0FF;
}
#any-style .wrap.click-content-helper:hover h3, #any-style .wrap.touch-content-helper:hover h3 {
    color: #fff;
}
#any-style .transitions h3 {
    height: 50px;
    line-height: 50px;
    font-size: 15px;
}
#any-style .transition-example {
    height: 50px;
    background: #0f1a32;
}
#any-style .transition-example i {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 20px;
    color: #FF6767;
}
#any-style .durations h3 {
    height: 50px;
    line-height: 50px;
    font-size: 15px;
}
#any-style .duration-example {
    height: 50px;
    background: #0f1a32;
}
#any-style .duration-example i {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 20px;
}

#any-style .linear { background: #38d683; }
#any-style .linear i { color: #7F65C0 !important; }

#any-style .ease { background: #ea8557; }
#any-style .ease i { color: #750618 !important; }

#any-style .ease-in { background: #69bfe9; }
#any-style .ease-in i { color: #FF7A00 !important; }

#any-style .ease-out { background: #a685ca; }
#any-style .ease-out i { color: #00FFFF !important; }

#any-style .ease-in-out { background: #16a085; }
#any-style .ease-in-out i { color: #0F2414 !important; }

#any-style .cubic-bezier { background: #0f1a32; }
#any-style .cubic-bezier i { color: #e7e7e7 !important; }



#any-style .ms-0 { background: #D8318F; }
#any-style .ms-0 i { color: #FFADDB !important; }
#any-style .ms-200 { background: #2D7524; }
#any-style .ms-200 i { color: #245B75 !important; }
#any-style .ms-600 { background: #FFFF00; }
#any-style .ms-600 i { color: #9D16D1 !important; }

#any-style .ms-1500 { background: #3300FF; }
#any-style .ms-1500 i { color: #E8FDA5 !important; }




/*================================
=            LICENSES            =
================================*/
#licenses p {
    text-align: center;
    max-width: 550px;
    margin: 30px auto;
}







/*=============================
=            DEMOS            =
=============================*/
#demos {
    text-align: center;
}
#demos ul {
    margin: 0;
    padding: 0;
    list-style: none;
}


/*================================
=            FEATURES            =
================================*/
#features {
    text-align: center;
}
#features ul {
    margin: 0;
    padding: 0;
    list-style: none;
}



/*=======================================
=            GETTING STARTED            =
=======================================*/
.getting-started h2 {
    margin-bottom: 20px;
    font-size: 36px;
}
.getting-started h3 {
    margin-top: 0;
    margin-bottom: 30px;
    text-align: center;
}
.getting-started h4 {
    margin-top: 30px;
}




/*===============================
=            OPTIONS            =
===============================*/
#options h2 {
    margin-bottom: 30px;
}
#options table {
    margin-bottom: 50px;
}




/*=================================
=            REMINDERS            =
=================================*/
#reminder {
    text-align: center;
}
#reminder h2 {
    margin-bottom: 30px;
}
#reminder a {
    display: block;
    width: 100%;
    margin: 10px auto;
    max-width: 200px;
}








/*===================================
=            SITE FOOTER            =
===================================*/
#site-footer {
    background: #0f1a32;
    padding: 400px 0;
    text-align: center;
}
#site-footer h4, #site-footer h5 {
    color: #fff;
}
#site-footer .col-md-4 {
    margin-bottom: 50px;
}
#site-footer a.logo {
    display: block;
    margin: 0 auto;
}








/*==================================
=            KEY FRAMES            =
==================================*/
@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    40% {
        -webkit-transform: translateY(-8px) scale(1.1);
        transform: translateY(-8px) scale(1.1);
    }

    60% {
        -webkit-transform: translateY(-8px) scale(1.1);
        transform: translateY(-8px) scale(1.1);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    40% {
        -webkit-transform: translateY(-8px) scale(1.1);
        -ms-transform: translateY(-8px) scale(1.1);
        transform: translateY(-8px) scale(1.1);;
    }

    60% {
        -webkit-transform: translateY(-8px) scale(1.1);
        -ms-transform: translateY(-8px) scale(1.1);
        transform: translateY(-8px) scale(1.1);
    }
}
@-webkit-keyframes jiggle {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    40% {
        -webkit-transform: translateX(-8px);
        transform: translateX(-8px);
    }

    60% {
        -webkit-transform: translateX(-8px);
        transform: translateX(-8px);
    }
}

@keyframes jiggle {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    40% {
        -webkit-transform: translateX(-8px);
        -ms-transform: translateX(-8px);
        transform: translateX(-8px);;
    }

    60% {
        -webkit-transform: translateX(-8px);
        -ms-transform: translateX(-8px);
        transform: translateX(-8px);
    }
}


@-webkit-keyframes rotate {
  0% { border-width: 10px; }
  25% { border-width: 3px; }
  50% {
    -webkit-transform: rotate(115deg);
    transform: rotate(115deg);
    border-width: 10px;
  }
  75% { border-width: 3px;}
  100% { border-width: 10px;}
}
@keyframes rotate {
  0% { border-width: 10px; }
  25% { border-width: 3px; }
  50% {
    -webkit-transform: rotate(115deg);
    transform: rotate(115deg);
    border-width: 10px;
  }
  75% { border-width: 3px;}
  100% { border-width: 10px;}
}
@-webkit-keyframes rubberBand {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.55, 0.75, 1);
    transform: scale3d(1.55, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.25, 1.25, 1);
    transform: scale3d(0.25, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes rubberBand {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.55, 0.75, 1);
    -ms-transform: scale3d(1.55, 0.75, 1);
    transform: scale3d(1.55, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.25, 1.25, 1);
    -ms-transform: scale3d(0.25, 1.25, 1);
    transform: scale3d(0.25, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    -ms-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    -ms-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
    -ms-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}


/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/

    /* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {
        #any-container .col-md-4 {
            margin-bottom: 15px;
        }
        #any-style .col-sm-4 {
            margin-bottom: 15px;
        }
        #any-style .row {
            margin-top: 0;
            margin-bottom: 0;
        }
    }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {
        #call-to-action h1 {
            font-size: 85px;
        }
        #call-to-action h1 img {
            display: block;
            margin: 0 auto 15px;
        }
        #call-to-action button {
            display: block;
            margin: 0 auto 15px;
        }
        #call-to-action p {
            font-size: 21px;
            margin-bottom: 15px;
        }
    }

    /* Extra Small Devices, Phones */
    @media only screen and (max-width : 480px) {
        #call-to-action h1 {
            font-size: 60px;
        }
        h2 {
            font-size: 25px;
        }
        #direction-content-html-panel legend {
            display: none;
        }
        #direction-content-html-panel a {
            float: right;
            font-size: 12px;
            width: 100%;
            margin-top: 7px;
        }
    }

    /* Custom, iPhone Retina */
    @media only screen and (max-width : 320px) {

    }