jekyll-theme-glueckkanja 0.7.0

data/assets/css/app.scss

@@ -0,0 +1,1900 @@
+---
+---
+@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 ------------ */