/* SITE CSS - JAC-Systeme GmbH */
/* REM calculator: preset: 16px: https://offroadcode.com/rem-calculator/ */
/* reset browser styles */
* {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

@font-face {
    font-family: "Open Sans";
    src: url("/bundles/jacsitejacsysteme/font/OpenSans-Regular.ttf") format('truetype');
    font-weight: normal;
}

@font-face {
    font-family: "Open Sans";
    src: url("/bundles/jacsitejacsysteme/font/OpenSans-Semibold.ttf") format('truetype');
    font-weight: bold;
}

em {
    font-style: italic;
}

strong {
    font-weight: bold;
}

table { border-collapse: separate; border-spacing: 0; }

table, th, td {
    border: 1px solid #bdbdbd;
}

table, td, th { vertical-align: top; }

td
{
    padding: 5px;
}

tr
{
    background-color: #eaeaea;
}

tr.trBlue
{
    background-color: #dfdfdf;
}

caption, th, td { text-align: left; font-weight: normal; }

td
{
    padding: 5px;
    border: none;
    border-bottom: 1px solid #bdbdbd;
}

tr:last-child > td
{
    border-bottom: none;
}

a img { border: none; }

/* GENERAL ELEMENTS */

html { -webkit-backface-visibility: hidden;}

body {
    margin: 0;
    font-size: 100%;
    background-color: #8c8c8c;
    font-family: "Open Sans",Arial,Helvetica,sans-serif;
    background-repeat-y: no-repeat;
    background-repeat: repeat-x;
    color: #404040;
}
body p, body li { text-overflow: ellipsis; font-size: 16px; line-height: 25px; }

h1, h2, h3, h4, h5, h6 { font-weight: bold; }
h1 { font-size: 18px; margin: 0 0 .75em 0;  }
h2 { font-size: 16px; margin: 0 0 .5em 0; }
h3, h4, h5, h6 { font-size: 1em; margin: 0 0 .5em 0; }

p { line-height: 1.4;  }
p, table, pre, ul, ol { margin: 0 0 0 0; list-style-type: none; }

/*ul, ol { margin-left: 1.25em; }*/

a { text-decoration: none; color:#af3a11; }
a:hover { text-decoration: underline; }

hr { height: 1px; border: none; }
hr, .horiz-ruler { border-bottom: 1px dotted #ABABAB; margin-bottom: 0.75em; }

.box { width: 100%; outline: none; }
.halfbox { width: 50%; outline: none; }

.break { clear: both; }
.hide { display: none; }
.show { display: block; }

.underline { text-decoration: underline !important; }
.underline_hover:hover { text-decoration: underline !important; }

.place-right { float: right; }
.place-left { float: left; }
.inline { display: inline; }
.center-text { text-align: center; }

.pointer { cursor: pointer; }



/*.spamfilter { display: none }*/

/* PAGE LAYOUT / DESIGN  */

#page-container, .motiv-overlay, .motiv, .site-background-color {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    /* border-left: 20px solid rgba(0, 58, 101, 0.3); */
    /* border-right: 20px solid rgba(0, 58, 101, 0.3); */
    /* background-color: rgba(0, 58, 101, 0.5); */
    /*background-color: rgb(140, 140, 140);*/
    background-clip: padding-box;
    max-width: 1100px;
    width: 95%;
    height: 100%;
    display: inline-table;
    /*background-image: url("/bundles/jacsitejacsysteme/images/grafiken/hintergrund-motiv.jpg");*/
    /*background-repeat: no-repeat;*/
    /*background-size: contain;*/
}

.motiv
{
     background-image: url("/bundles/jacsitejacsysteme/images/grafiken/hintergrund-motiv.jpg");
     background-repeat: no-repeat;
     background-size: contain;
     position: fixed;
}

.motiv-overlay
{
     background-image: url("/bundles/jacsitejacsysteme/images/grafiken/hintergrund-vorn.png");
     position: fixed;
}

.site-background-color
{
    background-color: rgb(140, 140, 140);
}

/* TREEMENU */
.sidebar-item {
    margin-bottom: 0.9375rem; /* 15px = 0.9375rem */
    width: 100%;
}
.sidebar-item ul {
    margin: 0;
    margin: 0;
    list-style: none;
    font-family: "Open Sans";
}
.sidebar-item a {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-item-spacer {
    padding: 0.25em 0.25em 0.25em 0.5em;
    padding-left: 16px;
    border-bottom: 1px dotted #424141;
}
.sidebar-item-spacer.treemenu-level-2 {
    padding-left: 1em;
    font-weight: normal;
}

/*.treemenu-selected*/
/*{*/
    /*color: white !important;*/
/*}*/

.content-header { border-bottom: 1px solid #D1D1D1; padding-bottom: 0.5em; color: #d6dce4; }

/* FORMS */
input, textarea {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    border: 1px solid #232323;
    padding: 0.5em;
    width: 100%;
    resize: vertical;
    color: #232323;
    background: #EAEAEA;
    margin-top: 5px;
    margin-bottom: 10px;
}

.form-group {
    width: 90%;
    margin: 0 auto;
}

.image-article-full-view
{
    padding: 0 10px 0 0;
}

.class-16.content-view-full > div.content-view-full-container > p
{
    margin-bottom: 25px;
}

.top-shadow-page
{
    height: 0px;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 222;
    box-shadow: 0px 0px 6px 1px #3c3c3b;
}

#form_save
{
    background-color: #558f39;
    color: white;
    padding: 15px;
    padding-top: 5px;
    margin-top: 10px;
    border-radius: 6px;
    padding-bottom: 5px;
    width: 50%;
    border: 1px solid #aac79c;
    text-align: right;
    cursor: pointer;
    font-size: 18px;
    margin-bottom: 15px;
}

#form_eztext___your_message
{
    min-height: 125px;
}

#article-header > p { text-align: center; padding: 2px; }

#header-left
{
    float: left;
    width: 70%;
    height: 125px;
    margin-top: 30px;
    padding-left: 60px;
}

#header-right-
{
    float: right;
    overflow: hidden;
}

#header-right > ul > li {  display: inline; float: left; cursor: pointer; }
#header-right > ul > li > img { width: 76px; }

#left-items
{
    width: 35%;
    z-index: 100;
}

#right-items
{
    float: right;
    margin-bottom: 1.563rem; /* 1.563rem = 25px */
    width: 65%;
}

#sidebar
{
    margin-left: 25%;
    margin-right: 20%;
}

.article-body, .content-header, .sidebar-item a, h2 > a {
    color: #404040;
}

.article-body
{
    border-bottom-right-radius: 8px;
    /*background-color: #557799;*/
    /*background-color: #EAEAEA;*/
    /*padding: 2%;*/
    margin-right: 14.9%;
    margin-bottom: 10px;
}

.article-body {  position: relative; }

.cjw_ref_more-images
{
    position: relative;
    margin-bottom: 5px;
}

.cjw_ref_more-images > .ref-more-btn
{
    position: absolute;
    bottom: 25px;
    left: 25px;
}

.content-view-line
{
    background-color: #EAEAEA;
    border-bottom-right-radius: 15px;
}

#article-header
{
    width: 85%;
    margin-bottom: 2%; /* 26px = 1.625rem */
    will-change: opacity;
    transition: opacity 1000ms ease-in;
    border: 1px solid rgba(85, 119, 153, 0);
}

#article-header > img
{
    width: 100%;;
}

.content-view-full-container
{
    padding: 20px;
    padding-bottom: 23px;
    margin-bottom: 13px;
}

.sidebar-contact-block > ul > li
{
    font-size: 14px;
    margin-bottom: 4px;
    opacity: 0.8;
}

.sidebar-contact-block > ul
{
    margin-top: 40px;
    pointer-events: none;
}

.sidebar-logo-list
{
    margin-top: 30px;
}

.sidebar-logo-list > ul { margin-top: 20px; }

.sidebar-item > ul > li:last-child > div
{
    border-bottom: none;
}

.content-view-children
{
    overflow: auto;
}

.full-width
{
    width: 100%;
}

.gallery-item {
    float: left;
    cursor: pointer;
    margin-bottom: 15px;
    width: 33%;
}

.gallery-item > img
{
    width: 100%;
}

.gallery-item > h2
{
    font-size: 14px;
}

.hidden-desktop { display: none; }
.desktop-offset { margin-top: -2.5rem; } /* 40px = 2.5rem */

/* referenzen line view thumbnail */
.class-22.content-view-line
{
    float: left;
    width: 180px;
    margin-right: 10px;
    margin-bottom: 10px;
}

.class-22.content-view-line > img
{
    width: 100%;
}

#article-header.thumbnail-header
{
    margin-top: 25px;
    border: 1px solid #404040;
}

.thumbnail-body
{
    border-bottom-right-radius: 8px;
    /*background-color: #557799;*/
    padding: 2%;
    margin-right: 15%;
    padding-top: 20px;
    margin-bottom: 30px;
    background-color: #EAEAEA;
    color: #232323;
}

/* todo: auslagern */
.pull-left, .pull-right, .center > span{
    cursor: pointer;
}
.pull-right
{
    float: right;
}

.pull-left
{
    float: left;
}

.center
{
    text-align: center;
}

.center > span
{
    position: absolute;
    padding-top: 5px;
    padding-left: 4px;
}

.logo-title
{
    font-size: 14px;
    text-align: center;
    color: #93A9C0;
    margin-bottom: 13px;
    overflow: hidden;
}

.ref_more_images
{
    position: absolute;
    top: 360px;
    /* bottom: 100px; */
    left: 30px;
    cursor: pointer;
}

.class-16 > p
{
    padding-bottom: 10px;
}

#article-header > p
{
    position: relative;
}

#article-header > p > a > img
{
    position: absolute;
    left: 8px;
    bottom: 0;
    cursor: pointer;
    border-right: 1px dotted #557799;
    padding-right: 8px;
}

#article-header > p > a > img:hover
{
    opacity: 0.7;
}

.treemenu-selected {
/*    font-weight: bold !important; */
    font-weight: bold;
}

.class-16 > p {
    padding-bottom: 15px;
}

.logo-title {
    font-size: 13px;
}

.content-header
{
    border-bottom: none;
    font-size: 20px;
    /* padding: 10px 0px 6px 0px; */
    margin: 0;
    margin-bottom: 5px;
}

/*.article-body {*/
    /*margin-left: 15% !important;*/
/*}*/

.article-body > class-16.content-view-full{
    padding-left: 5px;
}

#article-header > p {
    font-size: 18px;
}

.logo-big
{
    margin-left: 30px;
}

.thumbnail-item
{
    width: 31.3333333333333%;
    float: left;
    margin-right: 2%;
    margin-bottom: 15px;
}

.class-22.content-view-line
{
    width: 100%;
}

.class-22.content-view-line > img, .class-21.content-view-line > img {
    width: 30%;
    float: left;
    padding-right: 3%;
}


.thumbnail-image > img
{
    width: 100%;

    /*image-rendering: -moz-crisp-edges;*/
    /*image-rendering: -o-crisp-edges;*/
    /*image-rendering: -webkit-optimize-contrast;*/
}

.thumbnail-container
{
    width: 100%;
}

.thumbnail-item:nth-child(3)
{
    margin-right: 0;
}

.thumbnail-item > p
{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 14px;
}

.up_overview > a > span
{
    display: table-caption;
    line-height: 27px;
    font-size: 17px;
}

.up_overview > a
{
    padding-top: 10px;
    color: white;
}

.up_overview > a:hover
{
    text-decoration: none;
    opacity: 0.8;
}

.image-back-btn
{
    font-size: 18px;
    line-height: 10px;
}

.article-body > .class-16
{
    padding-bottom: 20px;
    background-color: #EAEAEA;
}

.subscription
{
    background-color: #EAEAEA;
    padding: 10px;
}

.nav-arrow
{
    padding: 4px;
    padding-bottom: 0;
    border-left: 1px solid #557799;
}

.nav-item-left-arrow
{
    padding: 4px;
    padding-left: 7px;
    padding-right: 7px;
    padding-bottom: 0;
    border-right: 1px solid #557799;
}

.image-full-view
{
    background-color: #EAEAEA;
    padding: 15px;
}

.reference-full-view
{
    background-color: #EAEAEA;
    padding: 13px;
}

.nav-title
{
    padding: 7px;
    padding-left: 10px;
    pointer-events: none;
}

h2.line-article {
    color: #232323;
    font-size: 19px;
    margin-bottom: 10px;
}

.hr-line_article
{
    padding-bottom: 8px;
    display: none;
}

.scroll-up-button
{
    position: fixed;
    bottom: 0;
    left: auto;
    transition: left 400ms ease-in-out;
    opacity: 1;
    color: white;
    background-color: #424141;
    padding: 8px;
    width: 160px;
    font-size: 16px;
    cursor: pointer;
    display: none;
}

.imageleft
{
    float: left;
}

.jac-image-left
{
    padding-right: 10px;
}

.has_image_container
{
    padding-left: 0;
    padding-top: 0;
}

.has_image_container > p
{
    padding-left: 10px;
}

h2.has_image_top_padding
{
    padding-top: 10px;
}

a.treemenu-level-2
{
    padding-left: 15px;
}

#sidebar > .sidebar-item > ul.sidebar-ul > li.treemenu-selected:before
/*, #sidebar > .sidebar-item > ul.sidebar-ul > li > ul > li.treemenu-selected:before*/
{
    background-image: url("/bundles/jacsitejacsysteme/images/grafiken/navpunkt-aktiv.png");
    background-size: contain;
    content: "";
    height: 8px;
    width: 8px;
    position: absolute;
    margin-top: 12px;
    margin-left: 0px;
}

#sidebar > .sidebar-item > ul.sidebar-ul > li > ul > li.treemenu-selected:before
{
    background-image: url("/bundles/jacsitejacsysteme/images/grafiken/navpunkt-aktiv.png");
}

#sidebar > .sidebar-item > ul.sidebar-ul > li:before,
#sidebar > .sidebar-item > ul.sidebar-ul > li > ul > li:before
{
    background-image: url("/bundles/jacsitejacsysteme/images/grafiken/navpunkt-inaktiv.png");
    background-size: contain;
    content: "";
    height: 8px;
    width: 8px;
    position: absolute;
    margin-top: 12px;
    margin-left: 0px;
}

#sidebar > .sidebar-item > ul.sidebar-ul > li > ul > li:before
{
    margin-left: 15px;
}

#footer > p
{
    margin-bottom: 15px;
    color: white;
}

#footer
{
    margin-bottom: 60px;
    margin-top: 5px;
}

#footer > p > a
{
    color: #ffffff;
    font-weight: bold;
}

@media screen and (max-width: 980px)
{
    .hidden-desktop  {  display: block; }
    .hidden-mobile {  display: none;  }
    .center-mobile { margin: 0 auto; }
    .no-width-mobile { width: auto !important; }
    .no-height-mobile { height: auto !important; }
    #page-container  {  border: none;  }
    #right-items,#header-left  { float: none; }
    .full-width-mobile { width: 100% !important; }
    .no-margin-mobile,.desktop-offset { margin: auto !important; }

    .add-site-margin-mobile
    {
        margin-left: 4%  !important; /* 20px = 1.25rem */
        margin-right: 4%  !important;
    }

    #left-items
    {
        position: absolute;
        background-color: #1C4C76;
        width: 100%;
        background-color:  rgb(139, 139, 139);
        /*border-top: 1px solid rgba(145, 166, 186, 0.42);*/
        padding-top: 10px;
        box-shadow: 0px 10px 4px -8px rgba(16, 16, 16, 0.26);
    }

    #header-left
    {
        width: auto;
        height: auto;
        margin-top: auto;
        padding-left: initial;
    }

    .sidebar-item a {
        padding-left: 8%;
    }

    .class-22.content-view-line > img {
        width: 97%;
        margin-bottom: 10px;
    }

    /* reset margin-right of every third thumbnail, since mobile view only shows two per row */
    .thumbnail-item:nth-child(3)
    {
        margin-right: 2%;
    }

    .thumbnail-item:nth-child(even)
    {
        float: right;
        margin-right: 0px;
    }

    .thumbnail-item:nth-child(odd)
    {
        float: left;
    }

    .thumbnail-item {
        width: 49%; /* not 50% because margin-right 1%*/
        margin-right: 2%;
        margin-bottom: 10px;
    }

    .thumbnail-image > img {
        image-rendering: optimizeQuality;
    }

    .content-view-children > div.class-16:first-child > h2.line-article {
        margin-top: 10px;
    }

    .scroll-up-button
    {
        left: 18px;
    }

    .article-body,.thumbnail-body
    {
        margin-bottom: 55px !important;
    }

    #sidebar > .sidebar-item > ul.sidebar-ul > li:before, #sidebar > .sidebar-item > ul.sidebar-ul > li > ul > li:before
    {
        display: none;
    }

    .motiv
    {
        background-image: url("/bundles/jacsitejacsysteme/images/grafiken/hintergrund-motiv-ohne.jpg");
        background-repeat: no-repeat;
        background-size: contain;
        position: fixed;
    }
}
.fadeInLoad {
    border: 1px solid #48484A;
    font-size: 40px;
    animation: fadeInLoad 6s;
}


@keyframes fadeInLoad {
    from {
        opacity:0.4;
    }
    to {
        opacity:1;
    }
}

.tracking-settings {
    padding-bottom: 20px;
    background-color: #EAEAEA;
}