// Body
@body-bg: #f8fafc;

// Typography
@font-family-worksans-serif: "Work Sans", sans-serif;
@font-size-base : 0.95rem;
@line-height-base : 1.6;

// Colors
@blue : #3490dc;
@indigo: #6574cd;
@purple: #9561e2;
@pink : #f66D9b;
@red : #e3342f;
@orange: #f6993f;
@yellow: #ffed4a;
@green : #38c172;
@teal : #4dc0b5;
@cyan : #6cb2eb;

@navbar-bg : #0FA2D9;
@navbar-text : white;
@navbar-text-active: white;

@companyColor : #00b0e2;
@companyColorSecondary : #d3d800;

.bg-company {
    background: @companyColor;
}

@font-face {
    font-family: "HPSimplified";
    src: url(latin-e-regular-eot.eot);
    src: url(latin-e-regular-eot.eot?#iefix) format("embedded-opentype"), url("latin-e-regular-woff.woff") format("woff"), url("latin-e-regular-ttf.ttf") format("truetype");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: "HPSimplified";
    src: url(latin-e-bold-eot.eot);
    src: url(latin-e-bold-eot.eot?#iefix) format("embedded-opentype"), url("latin-e-bold-woff.woff") format("woff"), url("latin-e-bold-ttf.ttf") format("truetype");
    font-weight: bold;
    font-style: normal
}

@font-face {
    font-family: "HPSimplifiedLight";
    src: url(latin-e-light-eot.eot);
    src: url(latin-e-light-eot.eot?#iefix) format("embedded-opentype"), url("latin-e-light-woff.woff") format("woff"), url("latin-e-light-ttf.ttf") format("truetype");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: "HPSimplifiedLight";
    src: url(latin-e-light-italic-eot.eot);
    src: url("latin-e-light-italic-woff.woff") format("woff"), url("latin-e-light-italic-ttf.ttf") format("truetype");
    font-weight: normal;
    font-style: italic
}

body {
    font-size: 100%;
    line-height: 1.5;
    font-family: "HPSimplifiedLight", arial;
    color: #58585a;
}

.btn {
    padding: 7.5px 25px;
    font-weight: bold;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;

    &.btn-primary {
        background-color: @companyColorSecondary  !important;
        background: @companyColorSecondary  !important;
        border: 1px solid @companyColorSecondary  !important;
        border-color: @companyColorSecondary  !important;
        color: #222 !important;

        &:active {
            background: #f9ff0c !important;
            background-color: #f9ff0c !important;
            border-color: #f9ff0c !important;
        }
    }

    &.btn-secondary {
        background: @companyColor;
        border-color: @companyColor;

        &:active {
            background: lighten(@companyColor, 10%) !important;
            background-color: lighten(@companyColor, 10%) !important;
            border-color: @companyColor  !important;
        }
    }
}

body {
    font-size: 100%;
    line-height: 1.5;
    font-family: "HPSimplifiedLight", arial;
    color: #58585a;
    background: white;

    img {
        max-width: 100%;
    }

    header {
        position: relative;

        #icon_wrapper {
            text-align: right;
            padding-right: 50px;
            height: 100%;
            padding-top: 25px;

            a {
                text-decoration: none;

                &.faHomeWrapper {
                    margin-right: 40px;
                }

                i {
                    color: white;
                    font-size: 2em;
                }
            }
        }

        #mainNavigation {
            background: @navbar-bg;
            background-color: @navbar-bg;

            @media(max-width: 991px) {
                .navRow {
                    margin-left: 0 !important;
                }
            }

            ul {
                li {
                    a {
                        color: @navbar-text;
                        font-size: 1em;
                        text-transform: uppercase;

                        @media(min-width:1200px) {
                            padding-left: 30px;
                            padding-right: 30px;
                        }

                        &.active {
                            color: @navbar-text-active;
                        }
                    }
                }
            }
        }
    }

    section {
        padding: 50px 0;
    }
}

.jumbotron {
    border-radius: 0;
    background-size: cover;
    background-position: 50% 50%;
    background-color: #0d0d0d;
    background-repeat: no-repeat;
    margin: 0;


    .hero-textbox {
        position: absolute;
        padding: 2%;
        width: 100%;
        right: auto;
        left: 0;
        background: #fff;
        color: #000;

        h2 {
            text-transform: unset;
            letter-spacing: unset;
            font: 400 1.5rem HPSimplified, Arial, sans-serif;
            font-size: 2.125rem;
            line-height: 1.17;
        }

        @media screen and (min-width: 576px) {
            width: 440px;
            max-width: 98%;
            left: 2%;
        }
    }
}

.selected-slider {
    background-color: #e8e8e8 !important;
    position: absolute;
    top: 45px;
    left: 15px;
    right: 15px;
    height: 2px;
    max-width: 850px;
    margin: 0 auto;

    @media(max-width: 780px) {
        display: none;
    }

    .selected-indicator {
        background-color: #0171ad;
        position: relative;
        transition: left .2s ease-in-out, width .2s ease-in-out;
        width: 0;
        height: 2px;
    }
}

.tab-h3 {
    font-size: 2.125rem;
    line-height: 1.17;
    padding-bottom: 1em;
    margin-top: 3em;
    color: #0171AD;
    margin-bottom: .5rem;
    font-weight: 500;
    font-family: HPSimplified, Arial, sans-serif;
}




#win10,
#produkte {
    background: #F7F7F7;
    padding: 50px 0px;

    h2 {
        font-size: 36px !important;
        font-weight: bold !important;
        letter-spacing: normal !important;
        text-transform: uppercase;
        font-weight: 500;
        line-height: 1.2;
    }

    h3 {
        font-size: 29px;
        letter-spacing: normal;
        text-transform: uppercase;
        font-weight: 500;
        line-height: 1.2;
    }

    h4 {
        font-size: 29px;
        letter-spacing: normal;
        margin-top: -10px;
        margin-bottom: 25px;
        font-weight: 500;
        line-height: 1.2;
    }
}

footer {
    padding: 35px 0;
}

footer ul {
    margin: 0;
    padding: 0;
    text-align: center;
}

footer ul li {
    display: inline-block;
    padding: 0 10px;
    padding-left: 5px;
}

footer ul li:not(:last-child) {
    border-right: 1px solid #848484;
}

footer ul li a {
    text-decoration: none;
    background-color: transparent;
    color: #222 !important;
}

#zusammenarbeit {
    .previewItem {
        margin-bottom: 50px;
    }
}

.carousel-indicators {
    margin-bottom: 0 !important;

    li {
        background-color: @companyColor;
    }
}

.carousel {
    padding-bottom: 50px;
}

.flex-col {
    flex-direction: column;
}

.modal-content {
    border-radius: 0;
}

.cursor-pointer {
    cursor: pointer;
}

.playBtnImg {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -48px;
    margin-top: -48px;
}


#beste-notebooks-und-zubehoer {
    background: #EBF8FF;

    .slicked {
        width: 90%;
        margin: 0px auto;
        margin-top: 100px;
    }

    .slick-track {
        display: flex !important;
    }

    .slick-slide {
        margin: 10px;
        height: inherit !important;
        position: relative;
        padding-bottom: 75px;
    }

    .slick-slide img {
        width: 100%;
        border: 0px solid #fff
    }

    .slicked {
        button.btn.btn-secondary {
            position: absolute;
            bottom: 0;
            left: 0;
        }
    }

    #myTab {
        text-align: center;
        position: relative;
        display: flex;
        justify-content: space-between;
        max-width: 850px;
        margin: 0 auto;
        margin-bottom: .8em;
        border: none;

        @media(max-width: 650px) {
            flex-direction: row;

            li {
                width: 100%;
                padding: 5px;
            }
        }

        li {
            a {
                padding: 0;
                margin: 0;

                &:not(:first-child) {
                    margin-right: 15px;
                }
            }
        }
    }

    .nav-link {
        color: black;
        background: transparent;
        text-decoration: none;
        font-family: HPSimplified, Arial, sans-serif;
        font-size: 1.5rem;
        line-height: 1.33;
        font-weight: 400;
        margin: 1em;
    }

    .nav-item,
    .nav-link {
        border: none;
    }
}

.border-radius-none {
    border-radius: 0;
}

#windows {
    [role="tablist"] {
        border-bottom: 0;

        li {
            a {
                text-decoration: none !important;
                color: #222;
                display: block;
                padding-top: 5px;
                position: relative;

                &:before {
                    content: '';
                    height: 3px;
                    width: 100%;
                    position: absolute;
                    top: -5px;
                    max-width: 115px;
                }

                &.active {
                    &:before {
                        background: #222;
                    }
                }

                h4 {
                    color: #222;
                    font-weight: bold;
                }
            }
        }
    }
}

.no-float {
    float: none;
}

.carousel-control-next,
.carousel-control-prev

/*, .carousel-indicators */
    {
    filter: invert(100%);
    max-width: 50px;
}

#carousel0,
#carousel1,
#carousel2,
#carousel3,
#carousel4,
#carousel5 {
    padding: 75px;
}

.supersmall {
    font-size: 60%;
}

.slick-arrow {

    &:before,
    &:after {
        color: #222;
    }
}

#kennenlernen {
    #laserjet-detail {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        max-width: 100%;
        border-radius: 10px;
        overflow: hidden;
        min-height: 10px;
        min-width: 10px;

        g {
            cursor: pointer;

            &.active {
                circle {
                    fill: @companyColor;
                }

                tspan {
                    fill: #fff;
                }
            }
        }

        img {
        }

        svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            max-width: 100%;
            height: auto;
        }
    }

    #laserjet-feature-list {
        .single-feature {
            display: flex;
            flex-direction: row;

            &:not(:last-of-type) {
                margin-bottom: 25px;
            }

            &.active {
                .hr {
                    opacity: 1;
                }

                h4 {
                    font-weight: bold;
                }

                .single-feature-desc {
                    opacity: 1;
                }
            }

            .hr {
                width: 75px;
                background-color: @companyColor;
                height: 2px;
                margin-top: 11px;
                opacity: 0;
            }

            .single-feature-title {
                width: 50%;
                margin-top: -2px;
                padding-right: 10px;
                cursor: pointer;

                h4 {
                    margin-bottom: 0;
                }
            }

            .single-feature-desc {
                width: calc(~'100% - 50% - 75px');
                padding-left: 10px;
                opacity: 0;

                p {
                    margin: 0;
                }
            }
        }
    }
}

#modelle {
    padding-left: 60px;
    padding-right: 60px;    
    background: linear-gradient(to bottom, @companyColor, #56a0cc, #69b3b2);
    *{
        color: white;
    }
  
    @media screen and (max-width: 719px) {
      padding-top: 0px;
      padding-bottom: 0px;
      padding-right: 0px;
      padding-left: 0px;
    }

    h4{
        margin-bottom: 0;
    }
  
    table {
      width: 1600px;
      margin: 0 auto;
  
      td,
      tr {
        border: none;
      }
  
      tr:nth-child(even) {
      }
  
      tr:nth-child(2) {
      }
  
      td {
        width: calc(100% / 6);
        border-top: 1px solid white;
        padding: 25px;
  
        &:first-child {
          font-weight: 600;
        }

        &:not(:first-child){
            vertical-align: middle;
            text-align: center;
        }
  
        p{
          margin: 0;
        }
  
        h4{
          margin-bottom: 0;
          font-weight: 600;
        }
      }
    }
  }