/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ===== Initializr Styles ==================================================
   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
   ========================================================================== */

$lightest: #ffffff;
$darkest: #212121;
$black: #000000;

body {
    font: 16px/1.5 'Raleway', Helvetica, Helvetica Neue, Arial, sans-serif;
    background-color: $darkest;
}

.wrapper {
    width: 80%;
    margin: 0 10%;
}

/* Make the body 100% of the browser viewport height */
html, body {
    height: 100%;
    margin: 0;
}
h1 {
    font-size: 2em;
    margin-top: 0;
    font-family: 'Roboto Condensed', Helvetica, Helvetica Neue, Arial, sans-serif;
    font-weight: 700;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */
/* =Preloader */
#preloader {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 101;
    background-color: $darkest;
    color: $lightest;
    .txt {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .txt-perc {
        font-size: 35px;
        font-family: 'Roboto Condensed', Helvetica, Helvetica Neue, Arial, sans-serif;
        opacity: 1;
        margin: 0 0 6px 0; 
        max-width: 400px;
        text-align: center;
    }
    .progress {
        width: 100px;
        height: 3px;
        background-color: rgba(255,255,255,0.2);
        margin: 0 auto 15px auto;
        span {
            display: block;
            width: 0;
            height: 100%;
            background-color: rgba(255,255,255,0.8);
        }
    }
    &.is-hidden {
        visibility: hidden;
        opacity: 0;
    }
}
.is-loading {
    overflow: hidden;
}

/* =Header */
.header-container {
    text-align: center;
    color: $lightest;
    .wrapper {
        padding-top: 120px;
        z-index: 2;
        position: relative;
    }
    .bcg {
        transition: transform 4s ease-out;
        transform: scale(1.05);
        transform-origin: top center;
    }
    &.is-loaded {
        .bcg {
            transform: scale(1);
        }
    }
}

.bcg {
    background: no-repeat center center;
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.5;
    .header-container & {
        background-image: url(../img/img_mountains01.jpg);
        background-size: cover;
    }
    #slide01 & {
        background: url(../img/img_mountains02.jpg) no-repeat center center;
        background-size: cover;
    }
    #slide02 & {
        background: url(../img/img_mountains03.jpg) no-repeat center center;
        background-size: cover;
    }
    #slide03 & {
        background: url(../img/img_mountains04.jpg) no-repeat center center;
        background-size: cover;
        opacity: 0.7;
    }
}

/* =Navigation */
nav {
    display: none;
    position: fixed;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    text-align: right;
    z-index: 100;
    a {
        display: block;
        line-height: 25px;
        position: relative;
        padding-right: 20px;
        color: $lightest;
        text-decoration: none; 
        &:hover {
            .nav-label {
                transform: translateX(0);
                opacity: 1;
                visibility: visible;
            }
        }
    }
    .nav-dot {
        display: block;
        width: 10px;
        height: 10px;
        position: absolute;
        right: 0;
        top: 50%;
        background-color: transparentize($lightest,.1);
        -webkit-border-radius: 100%; 
        border-radius: 100%;
        transform: translateY(-50%); 
        transition: all 0.3s linear;
    }
    .nav-label {
        display: block;
        opacity: 0.5;
        visibility: hidden;
        transform: translateX(-10px);
        transition: all 0.2s cubic-bezier(.17,.67,.83,.67);
    }
    &.is-dark {
        a {
            color: $darkest;
        }
        .nav-dot {
            background-color: transparentize($black,.5);
        }
    }
    &.is-light {
        a {
            color: $lightest;
        }
        .nav-dot {
            background-color: transparentize($lightest,.5);
        }
    }
    ul {
        margin: 0;
        padding: 0;
    }
    li {
        width: auto;
        list-style: none;
    }
}
.scroll-hint {
    color: $darkest;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px 40px;
    border: 3px $lightest solid;
    font-size: 13px;
    font-weight: bold;
    font-family: 'Roboto Condensed', Helvetica, Helvetica Neue, Arial, sans-serif;
    background-color: rgba(255,255,255,0.9);
    z-index: 2;
}

/* =Main */
p {
    font-size: 16px;
}
.fs {
    height: 100vh;
}
.slide {
    color: $lightest;
    position: relative;
    .wrapper {
        padding-top: 30px;
        text-align: center;
        position: relative;
        z-index: 2;
    }
    &#slide01 {
        .wrapper {
            position: absolute;
            top: 10%;
        }
    }
    &#slide02 {
        .wrapper {
            position: absolute;
            bottom: 10%;
        }
    }
    &#slide03 {
        .button {
            border-color: $lightest;
            color: $darkest;
            background-color: rgba(255,255,255,0.9);
            &:hover {
                border-color: $darkest;
                background-color: $darkest;
                color: $lightest;
            }
        }
        .wrapper {
            padding-top: 100px;
        }
    }
    &#slide04 {
        background-color: rgb(190, 76, 44);
    }
}
.button {
    text-decoration: none;
    color: $lightest;
    border: 1px transparentize($lightest,.3) solid;
    padding: 8px 15px;
    margin-top: 15px;
    display: inline-block;
    position: relative;
    &:hover {
        border-color: $lightest;
        background-color: $lightest;
        color: $black;
    }
}

/* =Content Block */
.content-block {
    background-color: $darkest;
    color: transparentize($lightest,.1);
    .wrapper {
        padding: 30px 0;
        text-align: center;
    }
    .no-touch & {
        .wrapper {
            visibility: hidden;
            opacity: 0;
        }
        &.is-active {
            .wrapper {
                visibility: visible;
                opacity: 1;
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
            }
        }
    }

}

/* =Footer */
.footer-container {
    text-align: center;
    font-size: 14px;
    color: transparentize($lightest,.5);
    background-color: #06060d;
    h3 {
        margin: 0;
        padding: 20px 0;
        font-weight: normal;
    }
    a {
        color: transparentize($lightest,.5);
    }
}

/* =Simple animation up */
.slideInUp {
    .no-touch & {
        visibility: hidden;
        opacity: 0;
        transition: all 0.7s ease-out;

        -webkit-transform: translate3d(0, 50px, 0);
        transform: translate3d(0, 50px, 0);
    }
    .no-touch .is-active & {
        visibility: visible;
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    &.slideInUp2{transition-delay: 0.2s;}
    &.slideInUp3{transition-delay: 0.4s;}
}

#iht_logo {
    width: 100px;
    margin-bottom: 30px;
}


/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 480px) {

}

@media only screen and (min-width: 768px) {
    body {
        font-weight: 100;
    }
    h1 {
        font-size: 3em;
    }
    p { font-size: 20px; }
    /* =Header */
    .header-container {
        overflow: hidden;
        position: relative;
        .wrapper {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -120%);
            margin: 0;
            padding: 0;
        }
        &:before {
            font-size: 70em;
        }
    }
    .scroll-hint {
        font-size: 20px;
    }
    .bcg {
        opacity: 1;
    }
    .slide {
        overflow: hidden;
        section {
            max-width: 400px;
        }
        overflow-x: hidden;
        .wrapper {
            padding-top: 120px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: left;
            width: 100%;
            margin: 0;
        }
        &#slide01,
        &#slide02,
        &#slide03 {
            color: $darkest;
            .wrapper {
                top: 20%;
                text-align: center;
            }
            section {
                margin: 0 auto;
            }
        }
        &#slide02 {
            color: $lightest;
            .wrapper {
                top: auto;
                bottom: 40%;
                left: 10%;
                text-align: left;
                transform: translate(0);
                padding: 0;
            }
            section {
                margin: 0;
            }
        }
        &#slide03 {
            .wrapper {
                padding: 0;
                top: 15%;
                transform: translate(-50%, 0);
            }
            section {
                margin: 0 auto;
                max-width: 570px;
            }
            .button {
                border-color: transparentize($black,.3);
                background-color: transparent;
                color: $darkest;
            }
            .bcg {
                opacity: 1;
            }
        }
    }
    nav {
        display: block;
    }
    .content-block {
        .wrapper {
            padding: 120px 0;
        }
    }
}

@media only screen and (min-width: 1140px) {

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}