---
---
@charset "utf-8";
@import "variables";
@import "bootstrap";
@import "font-awesome/scss/font-awesome";
@import "rangeslider";

@import "hc-elements";
@import "hc-tutorials";
@import "hc-header";
@import "hc-dark-theme";
@import "docs-mixins";
@import "docs-layout";

html {
    width: 100%;
    height: 100%;
}

body {
    width: 100%;
    font-family: "Open Sans", sans-serif;
    color: $font-color;
    height: 100%;
    margin: 0;
}

/* ------------ LOGO ------------ */

.logo {
    background:url(/assets/favicons/gk-logo.svg) 0 0 no-repeat;
    background-size: 100% auto;
    width: 120px;
    height: 40px;
    @media(min-width: 768px) {
        width: 150px;
        margin-top: 5px;
    }
    text-indent:-999em;
    overflow:hidden;
}

@media(min-width:768px) {
    .transparent .logo {
        background:url(/assets/favicons/gk-logo-white.svg) 0 0 no-repeat;
    }
    .transparent.black .logo {
        background:url(/assets/favicons/gk-logo.svg) 0 0 no-repeat;
    }
}

/* ------------ LOGO END ------------ */


/* ------------ KEYVISUAL ------------ */

.keyvisual {
    padding: 0;
    max-width: 900%;
    margin-top: 90px;
    margin-bottom: 40px;
    text-align: center;
    display: block;
    position: relative;
    white-space: nowrap;
    img {
        position: relative;
        max-height: 100%;
        max-width: 100%;
        vertical-align: middle;
    }
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-top: 80px;
    @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
        display: none;
    }
}


/* ------------ KEYVISUAL END ------------ */


/* ------------ MAIN NAVIGATION ------------ */

$nav-col-width-sm: 630px;
$nav-col-width-md: 850px;
$nav-col-width-lg: 1050px;
.navbar-custom {
    opacity: 0.95;
    margin-bottom: 0;
    background: $primary-color;
    -webkit-transition: background 0.1s ease;
    -moz-transition: background 0.1s ease;
    -o-transition: background 0.1s ease;
    transition: background 0.1s ease;
    text-transform: uppercase;
    font-family: "Open Sans Condensed", sans-serif;
    /* Fix height limit and scroll for small screen and many items menu */
    max-height: 100%;
    @media(max-width: 767px) {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }
    .navbar-toggle {
        padding: 4px 6px;
        font-size: $font-size-base;
        color: $navbar-color;
        &:focus,
        &:active {
            outline: none;
        }
    }
    .navbar-brand:focus {
        outline: none;
    }
    a {
        color: $navbar-color;
        @if $header-text-shadow {
            text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
        }
    }
    .nav {
        @media(min-width: 768px) {
            position: relative;
            text-align: center;
        }
        &>li {
            cursor: pointer;
            @media(min-width: 768px) {
                position: static;
            }
            &.active a.firstlevelanchor {
                color: $secondary-color;
            }
            span {
                cursor: auto;
                @media(max-width: 480px) {
                    color: $font-color;
                    font-size: $font-size-base;
                    opacity: 0.6;
                    padding: 6px 0 3px 0;
                    display: block;
                }
            }
            a,
            >span {
                font-family: "Open Sans Condensed", sans-serif;
                font-weight: 700;
                font-size: 20px;
                padding: 15px;
                position: relative;
                @media(max-width: 767px) {
                    padding-left: 10px;
                }
                @media(min-width:768px) {
                    font-size: $font-size-base;
                    padding: 5px;
                    margin-top: 17px;
                    display: block;
                }
                @media(min-width:992px) {
                    font-size: $font-size-base +2px;
                    padding: 10px 15px;
                    margin-top: 11px;
                }
                &:hover {
                    outline: none;
                    color: $secondary-color;
                    background-color: transparent;
                }
                &:focus,
                &:active {
                    outline: none;
                    color: $secondary-color;
                    background-color: transparent;
                    &:hover {
                        outline: none;
                        background-color: transparent;
                        color: $secondary-color;
                    }
                }
            }
            /* SECOND LEVEL LIST */
            &.dropdown {
                .dropdown-menu {
                    -webkit-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.175);
                    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.175);
                    background-repeat: no-repeat;
                    background-image: none;
                    // Padding bottom = 20px - 1/2 (font-size - lineheigth)
                    padding: 6px 27px 21px 27px;
                    border-radius: 0;
                    @media(max-width: 767px) {
                        padding-left: 10px;
                    }
                    @media(min-width:768px) {
                        margin-top: 14px;
                        min-width: 100%;
                        position: absolute;
                        right: 0;
                    }
                    .secondlevel {
                        @media(min-width: 768px) {
                            margin-top: 12px;
                        }
                    }
                    ul {
                        list-style-type: none;
                        margin: 0;
                        padding: 0;
                    }
                    li.divider {
                        background: transparent;
                        height: 18px;
                        min-height: 18px;
                        margin: 14px 0 -3px 0;
                        overflow: hidden;
                        border-top: 1px dotted $gk-grey;
                    }
                    >ul {
                        white-space: nowrap;
                        @media(min-width: 768px) {
                            & > li:not(:last-child) {
                                margin-right: 20px;
                            }
                        }
                        >li {
                            float: none;
                            text-align: left;
                            display: block;
                            @media (min-width: 768px) {
                                width: ($nav-col-width-sm / 3);
                                display: inline-table;
                            }
                            @media (min-width: 992px) {
                                width: ($nav-col-width-md / 4);
                            }
                            @media (min-width: 1200px) {
                                width: ($nav-col-width-lg / 5);
                            }
                            span {
                                color: $secondary-color;
                                font-weight: 700;
                                font-size: $font-size-base;
                                font-family: "Open Sans Condensed", sans-serif;
                                font-weight: 700;
                                text-transform: uppercase;
                            }
                            @media (max-width: 767px) {
                                &+li>ul>li>span {
                                    display: inline-block;
                                    padding-top: 15px;
                                }
                                li.divider+li>span {
                                    display: inline-block;
                                    padding-top: 0;
                                }
                            }
                            /* THIRD LEVEL LIST */
                            >ul {
                                border: 0 none;
                                position: relative;
                                padding-top: 0;
                                margin-top: 0;
                                @media(min-width: 768px) {
                                    // General margin 20px - 1/2 (font-size - lineheigth)
                                    margin-top: 0px;
                                    /* min-height:240px;*/
                                    position: relative;
                                    width: auto;
                                    white-space: nowrap;
                                    @media(max-width: 767px) {
                                        border: none;
                                    }
                                }
                                >li {
                                    font-family: "Open Sans", sans-serif;
                                    text-transform: none;
                                    color: #000;
                                    color: #f0f;
                                    font-weight: 300;
                                    float: none;
                                    cursor: auto;
                                    white-space: normal;
                                    @media(max-width: 767px) {
                                        font-size: $font-size-base;
                                        display: block;
                                        padding: 3px 0;
                                        color: $font-color;
                                        >a {
                                            color: $font-color;
                                        }
                                    }
                                    @media(min-width:768px) {
                                        font-size: -2px + $font-size-base;
                                        // min-height:30px;
                                        line-height: 30px;
                                    }
                                    a {
                                        font-family: "Open Sans", sans-serif;
                                        font-weight: 300;
                                        padding: 0;
                                        font-size: inherit;
                                        margin-top: 0;
                                        margin-right: 10px;
                                        display: block;
                                        padding-left: 15px;
                                        margin-left: -15px;
                                        padding-right: 10px;
                                        margin-right: -5px;
                                        width: auto;
                                        @media(max-width: 767px) {
                                            padding-left: 5px;
                                            margin-left: -5px;
                                            padding-right: 5px;
                                            margin-right: -5px;
                                        }
                                    }
                                    a:hover,
                                    a:active,
                                    a:focus {
                                        // color:darken($secondary-color, 15%);
                                        // padding:3px;
                                        // Assembles $gk-lightgrey
                                        background: rgba(0, 0, 0, 0.04);
                                        color: $gk-black;
                                    }
                                    &.active a {
                                        color: $secondary-color;
                                    }
                                }
                            }
                        }
                    }
                    /* INDIVIDUAL MENU ITEMS */
                    &#technologien {
                        @media(min-width: 1200px) {
                            padding-right: ($nav-col-width-lg / 5) +60px;
                            background-image: url(/assets/nav/splash.png);
                            background-position: right -60px top 50px;
                        }
                        @media only screen and (min-width: 1200px) and (-webkit-min-device-pixel-ratio: 2),
                        only screen and (min-width: 1200px) and ( min--moz-device-pixel-ratio: 2),
                        only screen and (min-width: 1200px) and ( -o-min-device-pixel-ratio: 2/1),
                        only screen and (min-width: 1200px) and ( min-device-pixel-ratio: 2),
                        only screen and (min-width: 1200px) and ( min-resolution: 192dpi),
                        only screen and (min-width: 1200px) and ( min-resolution: 2dppx) {
                            background-image: url(/assets/nav/splash@2x.png);
                            background-size: 320px 305px;
                        }
                    }
                    &#szenarien {
                        @media(min-width: 1200px) {
                            padding-right: ($nav-col-width-lg / 5) +60px;
                            background-image: url(/assets/nav/splash.png);
                            background-position: right -60px top 50px;
                        }
                        @media only screen and (min-width: 1200px) and (-webkit-min-device-pixel-ratio: 2),
                        only screen and (min-width: 1200px) and ( min--moz-device-pixel-ratio: 2),
                        only screen and (min-width: 1200px) and ( -o-min-device-pixel-ratio: 2/1),
                        only screen and (min-width: 1200px) and ( min-device-pixel-ratio: 2),
                        only screen and (min-width: 1200px) and ( min-resolution: 192dpi),
                        only screen and (min-width: 1200px) and ( min-resolution: 2dppx) {
                            background-image: url(/assets/nav/splash@2x.png);
                        }
                    }
                    &#portfolio {
                        @media(min-width: 1200px) {
                            padding-right: ($nav-col-width-lg / 5) +60px;
                            background-image: url(/assets/nav/splash.png);
                            background-position: right -60px top 50px;
                        }
                        @media only screen and (min-width: 1200px) and (-webkit-min-device-pixel-ratio: 2),
                        only screen and (min-width: 1200px) and ( min--moz-device-pixel-ratio: 2),
                        only screen and (min-width: 1200px) and ( -o-min-device-pixel-ratio: 2/1),
                        only screen and (min-width: 1200px) and ( min-device-pixel-ratio: 2),
                        only screen and (min-width: 1200px) and ( min-resolution: 192dpi),
                        only screen and (min-width: 1200px) and ( min-resolution: 2dppx) {
                            background-image: url(/assets/nav/splash.png);
                        }
                    }
                    &#unternehmen {
                        @media(min-width: 1200px) {
                            padding-right: ($nav-col-width-lg / 5) +60px;
                            background-image: url(/assets/nav/splash.png);
                            background-position: right -60px top 50px;
                        }
                        @media only screen and (min-width: 1200px) and (-webkit-min-device-pixel-ratio: 2),
                        only screen and (min-width: 1200px) and ( min--moz-device-pixel-ratio: 2),
                        only screen and (min-width: 1200px) and ( -o-min-device-pixel-ratio: 2/1),
                        only screen and (min-width: 1200px) and ( min-device-pixel-ratio: 2),
                        only screen and (min-width: 1200px) and ( min-resolution: 192dpi),
                        only screen and (min-width: 1200px) and ( min-resolution: 2dppx) {
                            background-image: url(/assets/nav/splash.png);
                        }
                    }
                }
                &.open {
                    background-color: transparent;
                    outline: none;
                    >a,
                    >a:hover,
                    >a:focus {
                        background-color: transparent !important;
                    }
                    >a:hover {
                        color: $secondary-color;
                    }
                    @media(min-width:768px) {
                        display: block;
                        a.firstlevelanchor::before {
                            background:url(/assets/nav/arrow-up.png) 0 0 no-repeat;
                            padding: 0;
                            position: absolute;
                            width: 21px;
                            height: 12px;
                            top: 38px;
                            @media(min-width: 992px) {
                                top: 48px;
                            }
                            left: 50%;
                            margin-left: -13px;
                            content:' ';
                            line-height:1px;
                        }
                    }
                }
                @media(max-width:767px) {
                    a.dropdown-toggle {
                        position: absolute;
                        right: 0;
                    }
                    a.dropdown-toggle+span.dropdown-hover,
                    a.dropdown-toggle+a.firstlevelanchor {
                        margin-right: 50px;
                    }
                    a.dropdown-toggle.firstlevelanchor {
                        position: relative;
                        width: auto;
                    }
                }
                @media(min-width:768px) {
                    >a {
                        position: relative;
                        z-index: 1001;
                    }
                }
            }
        }
    }
    @media(min-width:768px) {
        padding: 20px 0;
        border-bottom: none;
        &.top-nav-collapse {
            border-bottom: 1px solid #ccc;
        }
        &.transparent {
            background: transparent;
            .dropdown-menu {
                background-color: rgba(255, 255, 255, 1);
            }
        }
    }
}

.navbar-custom.transparent:not(.black) {
    @media(min-width: 768px) {
        li a.firstlevelanchor, li a.firstlevelanchor:focus, li a.firstlevelanchor:active {
            color: rgba(255, 255, 255, 0.8);
        }
        li.active a.firstlevelanchor,
        li.dropdown.open a.firstlevelanchor:hover,
        li a.firstlevelanchor:hover,
        li.dropdown.open a.firstlevelanchor {
            color: $primary-color;
        }
    }
}


/* ------------ MAIN NAVIGATION END ------------ */


/* ------------ HEADINGS ------------ */

h1 {
    text-transform: uppercase;
}

h1,
h2 {
    margin: 2rem 0 2rem;
    @media(min-width: 768px) {
        margin: 2.7rem 0 2.7rem;
    }
}

h3,
h4,
h5,
h6 {
    margin: 2rem 0 2rem;
    @media(min-width: 768px) {
        margin: 1.7rem 0 0.7rem;
    }
}

h1,
h2,
h3 {
    color: $secondary-color
}

h1 {
    @media(max-width: 1024px) {
        font-size: 26px;
    }
    span {
        font-weight: 300;
    }
    --line-height:36px;
}

h1.condensed-light {
    font-weight: 300;
    margin-bottom: -1em;
    @media(max-width: 768px) {
        margin-bottom: -0.8em;
    }
}

h2 {
    @media(max-width: 767px) {
        font-size: 20px;
    }
    --line-height:26px;
}


/* ------------ HEADINGS END ------------ */


/* ------------ GENERAL STYLES ------------ */

p {
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    color: $font-color;
    margin: 0 0 2.8rem;
    @media(min-width: 768px) {
        hyphens: none;
    }
}

p.lead {
    font-size: $font-size-base;
    font-weight: 700;
}

a {
    color: $gk-blue;
    font-weight: bold;
    &:hover,
    &:focus {
        text-decoration: none;
        color: darken($secondary-color, 20%);
    }
    &.phonelink {
        color: $primary-color;
    }
}

blockquote {
    font-size: 18px;
}

tfoot {
    border-top-style: double;
}

tfoot td {
    font-weight: bold
}

.overflow-hidden {
    overflow: hidden;
}

.center {
    text-align: center;
}

.vertical-center {
    display: flex;
    align-items: center;
}


/* ------------ GENERAL STYLES END ------------ */


/* ------------ SPACER ------------ */

.spacer5 {
    height: 5px;
    width: 100%;
    font-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
}

.spacer10 {
    height: 10px;
    width: 100%;
    font-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
}

.spacer15 {
    height: 15px;
    width: 100%;
    font-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
}

.spacer20 {
    height: 20px;
    width: 100%;
    font-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
}

.spacer25 {
    height: 25px;
    width: 100%;
    font-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
}

.spacer30 {
    height: 30px;
    width: 100%;
    font-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
}

.spacer35 {
    height: 35px;
    width: 100%;
    font-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
}

.spacer40 {
    height: 40px;
    width: 100%;
    font-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
}

.spacer45 {
    height: 45px;
    width: 100%;
    font-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
}

.spacer50 {
    height: 50px;
    width: 100%;
    font-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
}

.spacer100 {
    height: 100px;
    width: 100%;
    font-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
}

.spacer200 {
    height: 200px;
    width: 100%;
    font-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
}

.margin-bottom-5 {
    margin-bottom: 5px;
}

.margin-bottom-10 {
    margin-bottom: 10px;
}

.margin-bottom-15 {
    margin-bottom: 15px;
}

.margin-bottom-20 {
    margin-bottom: 20px;
}

.margin-bottom-25 {
    margin-bottom: 25px;
}

.margin-bottom-30 {
    margin-bottom: 30px;
}

.margin-bottom-35 {
    margin-bottom: 35px;
}

.margin-bottom-40 {
    margin-bottom: 40px;
}

.margin-bottom-45 {
    margin-bottom: 45px;
}

.margin-bottom-50 {
    margin-bottom: 50px;
}

.margin-bottom-55 {
    margin-bottom: 55px;
}

.margin-bottom-60 {
    margin-bottom: 60px;
}

.margin-bottom-70 {
    margin-bottom: 70px;
}

.margin-bottom-80 {
    margin-bottom: 80px;
}

.margin-bottom-90 {
    margin-bottom: 90px;
}

.margin-bottom-100 {
    margin-bottom: 100px;
}


/* ------------ SPACER END ------------ */


/* ------------ CUSTOM TABLES ------------ */

table.guk thead {
    background-color: $gk-blue;
    th {
        color: $primary-color;
    }
}

.table-striped.guk>tbody>tr:nth-of-type(2n+1) {
    background-color: $gk-lightblue;
}

table.table.guk>thead>tr>th,
table.table.guk>thead>tr>td,
table.table.guk>tbody>tr>th,
table.table.guk>tbody>tr>td,
table.table.guk>tfoot>tr>th,
table.table.guk>tfoot>tr>td,
table.table.guk tfoot {
    border-color: $gk-midblue;
}


/* ------------ CUSTOM TABLES END ------------ */


/* ------------ MATERIAL DESIGN ICONS ------------ */


/* Rules for sizing the icon. */

.material-icons.md-18 {
    font-size: 18px;
}

.material-icons.md-24 {
    font-size: 24px;
}

.material-icons.md-36 {
    font-size: 36px;
}

.material-icons.md-48 {
    font-size: 48px;
}


/* Rules for using icons as black on a light background. */

.material-icons.md-dark {
    color: rgba(0, 0, 0, 0.54);
}

.material-icons.md-dark.md-inactive {
    color: rgba(0, 0, 0, 0.26);
}


/* Rules for using icons as white on a dark background. */

.material-icons.md-light {
    color: rgba(255, 255, 255, 1);
}

.material-icons.md-light.md-inactive {
    color: rgba(255, 255, 255, 0.3);
}

.material-icons.gk-blue {
    color: #0061aa;
}

.float {
    float: left;
    padding-right: 15px;
}

.vertical-align-middle {
    padding-top: 30px;
}


/* ------------ MATERIAL DESIGN ICONS END ------------ */


/* ------------ FEATURES ------------ */

.features {
    background-color: $gk-lightergrey;
    padding: 30px 0;
}

.features .fa {
    color: $gk-blue;
    font-size: 2em;
    float: left;
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 15px;
}


/* ------------ FEATURES END ------------ */


/* ------------ SPECIALS ------------ */

.specials {
    background-color: $gk-lightblue;
    padding: 30px 0;
}

.specials p {
    margin-bottom: 10px;
}


/* ------------ SPECIALS END ------------ */


/* ------------ VIDEOS ------------ */

.videos .videos-in {
    background: $gk-lightergrey;
}

.videos h3 {
    margin-bottom: 0;
    padding: 10px 15px 15px;
}

.videos p {
    padding: 0 15px;
    margin-bottom: 20px;
}

.videos .videos-info {
    margin-left: 0;
    margin-top: 30px;
    overflow: hidden;
    padding: 8px 10px;
    border-top: solid 1px #eee;
}

.videos .videos-info li {
    font-size: 12px;
    list-style: none;
}

.videos .videos-desc {
    padding-top: 1px;
    background: #fff;
}

.videos .fa {
    color: $gk-darkgrey;
    font-size: 14px;
    float: left;
    padding-top: 1px;
    padding-left: 2px;
    padding-right: 10px;
}


/* ------------ VIDEOS END ------------ */


/* ------------ BESTPRACTICE ------------ */

.bestpractice {
    background-color: $gk-lightblue;
    padding: 30px 0;
}


/* ------------ BESTPRACTICE END------------ */


/* ------------ PROJECTDETAIL ------------ */

.projectdetail h2 {
    margin-top: 5px;
    margin-bottom: 15px;
}

.projectdetail .btn-tagging {
    border-radius: 20px;
    border-color: $gk-lightblue;
    padding: 3px 10px;
    margin-bottom: 10px;
    font-size: 13px;
    color: $gk-grey;
    background: none;
    background: $gk-lightblue;
}

.projectdetail .fa {
    padding-right: 10px;
}


/* ------------ PROJECTDETAIL END ------------ */


/* ------------ CALL-ACTION ------------ */

.call-action-box {
    border: dashed 1px #bbb;
    // background-color: $gk-blue;
}

.call-action .call-action-box {
    width: 100%;
    display: table;
    padding: 30px 10px;
    vertical-align: middle;
}


/* ------------ CALL-ACTION END ------------ */


/* ------------ QUOTE ------------ */

.quote {
    padding: 50px 0 50px;
    text-align: center;
}

.quote p {
    font-family: $headings-font-family;
    font-size: 30px;
    font-style: italic;
    font-weight: 700;
    line-height: 36px;
    color: $gk-lightergrey;
    padding: 0 100px;
    position: relative;
    margin-bottom: 20px;
}

.quote p:before {
    color: $gk-lightergrey;
    font-size: 80px;
    content: "\201C";
    position: absolute;
    margin: 5px 0 0 -60px;
    font-family: Georgia, serif;
}

.quote span {
    color: $gk-lightergrey;
    font-size: 18px;
}

@media (max-width: 768px) {
    .quote p {
        font-size: 18px;
        padding: 0 50px;
    }
}


/* ------------ QUOTE END ------------ */


/* ------------ SERVICE BOX ------------ */

.service-box .service-block {
    background: #fff;
    padding-top: 30px;
    padding-bottom: 20px;
}

.service-box p {
    position: relative;
    margin-bottom: 50px;
}

.service-box p:after {
    content: " ";
    left: 50%;
    height: 1px;
    width: 50px;
    bottom: -15px;
    position: absolute;
    margin-left: -25px;
    background: #0061aa;
}

.service-box ul {
    padding: 0 20px;
}

.service-box li {
    margin: 8px 0;
    font-size: 15px;
    padding-top: 8px;
    border-top: dotted 1px #0061aa;
}

.service-box li:hover {
    color: #0061aa;
}

.service-box li:first-child {
    padding-top: 0;
    border-top: none;
}

.service-block {
    margin-top: 20px;
    text-align: center;
    position: relative;
    padding: 45px 20px 20px;
    border: 1px solid #f2f2f2;
}

.service-block i {
    left: 50%;
    top: -30px;
    color: #fff;
    width: 60px;
    height: 60px;
    font-size: 26px;
    line-height: 62px;
    margin-left: -30px;
    text-align: center;
    position: absolute;
    background: #72c02c;
    display: inline-block;
}


/* ------------ SERVICE BOX END ------------ */


/* ------------ SPECIAL ------------ */

.bg-color-light {
    background-color: #f7f7f7 !important;
}

.content-sm {
    padding-top: 60px;
    padding-bottom: 60px;
}

.special-block .fa {
    color: $gk-blue;
    float: left;
    padding-top: 1px;
    padding-right: 10px;
}


/* ------------ SPECIAL END ------------ */


/* ------------ PANEL ------------ */

.panel-default>.panel-heading {
    background-color: white;
}

.panel-title {
    background-color: white !important;
}


/* ------------ PANEL END ------------ */


/* ------------ THUMBNAILS ------------ */

.thumbnails p {
    margin-bottom: 10px;
}

a.thumbnail {
    padding: 0;
    border: none;
    margin-bottom: 15px;
}

.thumbnail-style {
    padding: 7px;
    margin-bottom: 20px;
}

.thumbnail-style:hover {
    box-shadow: 0 0 8px #ddd;
    transition: box-shadow 0.2s ease-in-out;
}

.thumbnail h3,
.thumbnail-style h3 {
    margin: 6px 0 8px 0;
}

.thumbnail h3 a:hover,
.thumbnail-style h3 a:hover {
    color: $gk-blue;
    text-decoration: none;
}

.thumbnail-style .thumbnail-img {
    position: relative;
    margin-bottom: 11px;
}

.thumbnail-style a.btn-more {
    right: -10px;
    bottom: 10px;
    color: #fff;
    padding: 1px 6px;
    position: absolute;
    background: $gk-blue;
    display: inline-block;
}

.thumbnail-style a.btn-more:hover {
    text-decoration: none;
    box-shadow: 0 0 0 2px $gk-darkshadedblue;
}


/*.thumbnail-style:hover a.btn-more {
    right: 10px;
}
*/

.thumbnail-kenburn img {
    left: 10px;
    margin-left: -10px;
    position: relative;
    transition: all 0.8s ease-in-out;
}

.thumbnail-kenburn:hover img {
    transform: scale(1.2) rotate(2deg);
}


/* ------------ THUMBNAILS END ------------ */


/* ------------ OWL CAROUSEL ------------ */

.owl-carousel {
    position: relative;
    width: 100%;
    -ms-touch-action: pan-y;
}

.owl-carousel .owl-wrapper {
    display: none;
    position: relative;
    -webkit-transform: translate3d(0px, 0px, 0px);
}

.owl-carousel .owl-wrapper-outer {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.owl-carousel .owl-wrapper-outer.autoHeight {
    -webkit-transition: height 500ms ease-in-out;
    -moz-transition: height 500ms ease-in-out;
    -ms-transition: height 500ms ease-in-out;
    -o-transition: height 500ms ease-in-out;
    transition: height 500ms ease-in-out;
}

.owl-carousel .owl-item {
    float: left;
}

.owl-controls .owl-page,
.owl-controls .owl-buttons div {
    cursor: pointer;
}

.owl-controls {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


/* ------------ OWL CAROUSEL END ------------ */

/* ------------ FORMS & BUTTONS ------------ */

.select-wrap {
    position: relative;
}

.select-wrap select,
.select-wrap select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2*($padding-base-vertical) + $font-size-base +1px;
    background: transparent;
}

.select-wrap::after {
    font-family: FontAwesome;
    content: $fa-var-angle-down;
    position: absolute;
    top: $padding-base-vertical +1px;
    right: $padding-base-horizontal +1px;
    z-index: -1;
}

.select-wrap.form-group-lg select,
.select-wrap.form-group-lg select.form-control {
    padding-right: 2*($padding-large-vertical) + $font-size-large +1px;
    line-height: inherit;
}

.select-wrap.form-group-lg::after {
    font-size: $font-size-large;
    top: $padding-large-vertical;
    right: $padding-large-horizontal;
}

.select-wrap.form-group-sm select,
.select-wrap.form-group-sm select.form-control {
    padding-right: 2*($padding-small-vertical) + $font-size-small +1px;
    line-height: inherit;
}

.select-wrap.form-group-sm::after {
    font-size: $font-size-small;
    top: $padding-small-vertical +1px;
    right: $padding-small-horizontal +1px;
}

.form-top {
    overflow: hidden;
    padding: 0 25px 0 25px;
    background: $gk-grey;
    -moz-border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
    text-align: left;
    padding-top: 25px;
}

.form-top-left {
    float: left;
    width: 75%;
    padding-top: 25px;
}

.form-top h2,
.form-top h3 {
    margin-top: 0;
    color: #fff;
}

.form-top p {
    opacity: 0.8;
    color: #fff;
}

.form-top-right {
    float: left;
    width: 25%;
    padding-top: 5px;
    font-size: 66px;
    color: #fff;
    line-height: 100px;
    text-align: right;
    opacity: 0.3;
}

.form-bottom {
    padding: 25px 25px 30px 25px;
    background: $gk-grey;
    background: rgba(71, 82, 93, 0.5);
    -moz-border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
    text-align: left;
}

.form-bottom form textarea {
    height: 100px;
}

.form-bottom form button.btn {
    width: 100%;
}

.form-bottom form .input-error {
    border-color: #19b9e7;
}

.form-box .fa {
    color: $gk-lightergrey;
    font-size: 1em;
    float: left;
    padding: 15px 10px 0 15px;
}

input[type="text"],
input[type="password"],
textarea,
textarea.form-control,
select,
select.form-control {
    margin: 0;
    vertical-align: middle;
    background: #fff;
    border: 3px solid #fff;
    font-size: 15px;
    font-weight: 300;
    line-height: 50px;
    color: $gk-grey;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -o-transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
}

textarea,
textarea.form-control,
select,
select.form-control {
    padding-bottom: 10px;
    line-height: 25px;
}

input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus,
textarea.form-control:focus,
select:focus,
select.form-control:focus {
    outline: 0;
    background: #fff;
    border: 3px solid #fff;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.form {
    background-color: $gk-lightergrey;
    padding: 30px 0;
}

.fa-stack-2x {
    color: $gk-blue;
}

.vertical-align-middle
/* ------------ FORMS & BUTTONS END ------------ */


/* ------------ ROUNDED AND CIRCLE CLASSES  ------------ */

.no-rounded {
    border-radius: 0 !important;
}

.rounded {
    border-radius: 4px !important;
}

.rounded-x {
    border-radius: 50% !important;
}

.rounded-2x {
    border-radius: 10px !important;
}

.rounded-3x {
    border-radius: 15px !important;
}

.rounded-4x {
    border-radius: 20px !important;
}

.rounded-sm {
    border-radius: 2px !important;
}

.rounded-md {
    border-radius: 3px !important;
}

.rounded-top {
    border-radius: 4px 4px 0 0 !important;
}

.rounded-left {
    border-radius: 4px 0 0 4px !important;
}

.rounded-right {
    border-radius: 0 4px 4px 0 !important;
}

.rounded-bottom {
    border-radius: 0 0 4px 4px !important;
}


/* ------------ ROUNDED AND CIRCLE CLASSES  ------------ */


/* ------------ CONTENT & LISTS  ------------ */

nav+section.container {
    margin-top: 80px;
    @media(min-width: 768px) {
        margin-top: 100px;
    }
}

section.main {
    padding-bottom: 20px;
    ol {
        padding: 0 0 0 ($font-size-base +4px);
    }
    ul {
        padding: 0;
        list-style-type: none;
        li {
            padding: 0 0 5px ($font-size-base +4px);
            position: relative;
            ul li:before {
                top: .2em;
                font-size: 0.80em;
            }
        }
        li::before {
            font-family: FontAwesome;
            color: $gk-blue;
            content: $fa-var-angle-double-right;
            position: absolute;
            left: 0.1em;
        }
        &.list-unstyled {
            li {
                padding: 0;
            }
            li ul li {
                padding-left: ($font-size-base +4px);
            }
            li:before {
                display: none;
            }
        }
        &.list-inline {
            margin-left: 0;
            li {
                padding-left: 0;
            }
            li:last-child {
                padding-right: 0;
            }
            li:before {
                display: none;
            }
        }
        &.boldlist {
            li {
                font-weight: 700;
            }
        }
    }
}

.embed-responsive-16by9 {
    padding-bottom: 55.25%;
}


/* ------------ CONTENT & LISTS END ------------ */


/* ------------ PANEL ------------ */

.panel-title {
    color: #0061aa;
    background-color: #f5f5f5;
    border-color: #ddd;
}

.panel-default p {
    margin-bottom: 10px;
}


/* ------------ PANEL END ------------ */


/* ------------ BLOG ------------ */

.posts {
    margin-top: 50px;
}

.posted-info {
    font-size: 14px;
    margin-bottom: -16px;
}

.post .thumbnail {
    border: 0;
    padding: 0;
    img {
        width: 100%;
    }
}

.blogtitlepic {
    margin-bottom: 50px;
    height: 100%;
    @media(min-width: 768px) {
        height: 865px;
    }
    background-attachment:fixed;
    /* Retina iPad in portrait & landscape */
    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
        height: 100%;
        max-height: 865px;
        background-attachment: scroll;
        h1 {
            padding-left: 20px;
            padding-right: 20px;
            line-height: 110%;
        }
    }
    background-position:center center;
    background-size: cover;
    background-repeat: no-repeat;
    padding:0;
    width:auto;
    text-align: center;
    h1 {
        color: $primary-color;
        font-size: 2em;
        margin-top: -.3em;
        position: absolute;
        text-align: center;
        top: 50%;
        width: 100%;
        z-index: 2;
        @media(min-width: 768px) {
            font-size: 3.5em;
            margin-top: -.5em;
            top: 430px;
        }
        /* Retina iPad in landscape */
        @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
            top: 50%;
        }
        /* Retina iPad Pro in landscape */
        @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) {
            top: 430px;
        }
    }
}

.blog-post iframe {
    border: none;
    margin-bottom: 10px;
}

.recentposts {
    @media(max-width: 991px) {
        visibility: hidden;
        height: 0px;
    }
    padding-left:0px;
    h2 {
        margin-top: 0px;
    }
    ul>li {
        list-style-type: none;
        margin-left: -40px;
        >a span {
            font-size: 14px;
            color: $gk-lightgrey;
        }
        >a {
            padding: 5px 20px 5px 0px;
            display: block;
            font-size: 14px;
            font-weight: 300;
            margin-top: 0;
            margin-bottom: 5px;
            width: auto;
            &:hover {
                background: rgba(0, 0, 0, 0.04);
                color: $gk-black;
            }
        }
    }
}

@media(min-width:768px) {
    .postcolumn .row {
        margin-left: 0 !important;
    }
}


/* ------------ BLOG END ------------ */


/* ------------ EXTERNAL LINKS ------------ */

#linklist {
    background-color: $gk-midgrey;
    padding: 50px 0;
    margin-top: 35px;
    h3 {
        color: #fff;
        @media(min-width: 768px) {
            font-size: 36px;
            text-transform: uppercase;
        }
    }
    h3 .first-word {
        font-weight: 300;
    }
    h5 {
        font-size: 1.5em;
        @media(min-width: 992px) {
            min-height: 2em;
        }
    }
    div,
    p {
        color: #fff;
    }
}


/* ------------ EXTERNAL LINKS END ------------ */


/* ------------ SITE LINKS ------------ */

#sitelinks {
    background-color: $gk-darkgrey;
    padding: 50px 0;
    h3 {
        position: relative;
        color: #fff;
        font-weight: 300;
        width: 100%;
        vertical-align: middle;
        @media(min-width: 480px) {
            padding-right: 200px;
        }
        @media(min-width:768px) {
            padding-right: 300px;
            font-size: 36px;
            text-transform: uppercase;
        }
    }
    h3 a {
        font-weight: 700;
        @media(max-width: 479px) {
            margin-top: 5px;
            display: block;
        }
        @media(min-width:480px) {
            position: absolute;
            top: 0;
            right: 0;
            font-weight: 700;
        }
    }
    h3 .first-word {
        font-weight: 300;
    }
    h5 {
        font-size: 1.1em;
    }
    div,
    p {
        color: #fff;
    }
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        li {
            margin: 0 0 0.2em 0;
            padding: 0;
            a {
                color: #fff;
            }
        }
    }
    img {
        width: 80%;
        margin-left: -12px;
        padding-top: 20px;
    }
    .recentposts {
        @media(max-width: 991px) {
            visibility: hidden;
            height: 0px;
        }
        padding-left:0px;
        h2 {
            margin-top: 0px;
        }
        ul>li {
            list-style-type: none;
            >a span {
                font-size: 14px;
                color: $gk-lightgrey;
            }
            >a {
                padding: 5px 20px 5px 0px;
                display: block;
                font-size: 14px;
                font-weight: 300;
                margin-top: 0;
                margin-bottom: 5px;
                width: auto;
                &:hover {
                    background: rgba(0, 0, 0, 0.04);
                    color: $gk-black;
                }
            }
        }
    }
}


/* ------------ SITE LINKS END ------------ */


/* ------------ MAP START ------------ */

#map {
    width: 100%;
    clear: both;
    height: 500px;
    @media(max-width: 767px) {
        height: 400px;
    }
    @media(max-width:479px) {
        height: 350px;
    }
}

#map iframe {
    position: absolute;
    left: 0;
    width: 100%;
    height: 500px;
    border: 0;
    border-top: 1px solid $gk-lightergrey;
    border-bottom: 1px solid $gk-lightergrey;
    @media(max-width: 767px) {
        height: 400px;
    }
    @media(max-width:479px) {
        height: 350px;
    }
}


/* ------------ MAP END ------------ */


/* ------------ FOOTER ------------ */

footer {
    margin: 2em 0;
    font-size: 12px;
}


/* ------------ FOOTER END ------------ */