/* I need to push the content down under the fixed menu */
/* This must be set here as padding-top, otherwise it the pimcore admin was pushing wysiwig editor down. */
body { padding-top: 118px; }
body.doc-1,
body.front { padding-top: 0px; }

body.overlay-active:after { content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); z-index: 2; }

/* General */
.blockquote::before { pointer-events: none; }
.block              { display: block !important; }
.hidden             { display: none; }
.eyebrow            { display: block; }
.bg-grey            { background-color: #f5f5f5; }

video               { max-width: 100%; }

/* Header */
.navbar-brand { padding-right: 0 !important; margin-right: 0px; }
header.header-dark .burger span, 
header.header-dark .burger span::before, 
header.header-dark .burger span::after { background-color: #fff; }

/* Breadcrumbs */
.breadcrumb-custom { position: relative; top: 48px; }
.breadcrumb-custom .breadcrumb-item.active, 
.breadcrumb-custom .breadcrumb-item a { border: 1px solid #bcbcbc; }

/* Footer */
footer { border-top: 1px solid rgba(255, 255, 255, 0.1); }

/* Header default */
.areabrick-header-default {padding: 40px 20px !important; position: relative; overflow: hidden; }

/* Show icon font */
.iconmoon-selection .x-combo-list-item, 
.iconmoon-selection .x-boundlist-item { font-family: 'icomoon' !important; font-size: 25px !important; }

/* Message window ------------------------- */
#go-message-window                    { display: none; position: fixed; top: 140px; right: 20px; left: auto; max-width: 400px; z-index: 2; padding: 20px 20px 10px; border: 1px solid #ddd; border-radius: 3px; background: #fff; }
#go-message-window.visible            { display: block; }
#go-message-window h2                 { font-size: 26px; line-height: 36px; position: relative; margin: 2px 60px 20px 0px; padding-left: 40px; }
#go-message-window h2 > i             { position: absolute; top: 3px; left: 0; }
#go-message-window .button-close      { position: absolute; top: 0px; right: 0px; cursor: pointer; padding: 20px; }
#go-message-window .button-close:hover  { opacity: 0.6; }
#go-message-window p             { margin-bottom: 0.65rem; }

/* Form ----------------------------------- */

form .submit-section               { margin-bottom: 20px !important; }
form .headline                     { margin-bottom: 25px; }
form .form-section                 { margin-bottom: 20px !important; }
form label                         { display: block; }

.form-group .label-tooltip-icon    { color: #aa791c !important;font-size: 1.6em;position: relative;top: 3px;left: 3px;line-height: 0px !important;}
.form-group .label-tooltip         { text-transform: none; display: none !important; }
body.mode-edit .label-tooltip      { display: block !important; padding: 5px; background: #555; color: #fff !important; border-radius: 6px; }
.form-group div[data-tippy-root]   { text-transform: none; }

.form-group.checkbox { user-select: none; }
.form-group.checkbox > label > span { cursor: pointer; }
.form-group.checkbox > label > input{ width: 30px; height: 30px; vertical-align: middle; display: inline-block; margin: 0 15px 0 0; cursor: pointer; }

.select2-selection                 { border: 1px solid #e5e5e5 !important; height: 56px !important; }
.select2-selection__arrow          { margin: 15px 10px 0 0; }
.select2-selection__rendered       { padding: 13px 15px 0 !important; color: #151515 !important; }

.hide-selectric .selectric-wrapper { display: none !important; }
.selectric .label { background: #fff; }

/* ------------------------------------------------------------------------- */
/* AREA BRICKS-------------------------------------------------------------- */


/* Type text */
.areabrick-section-slider-typed .type-video-text h1 { margin: 0 0 15px; font-size: 2rem; }
.areabrick-section-slider-typed .type-video-text .iframe-wrap { margin: 40px 0 40px; }
.areabrick-section-slider-typed .type-video-text .text { margin: 0 0 25px; }
.areabrick-section-slider-typed .type-video-text .btn { padding: 9px 30px; font-size: 1.1rem; }
.areabrick-section-slider-typed .swiper-footer { pointer-events: none; }
.areabrick-section-slider-typed .circle-card .image-card { margin-right: 10px; }
.areabrick-section-slider-typed .circle-card h2 { color: #fff; font-size: 22px; line-height: 28px; padding: 0 20px; text-align: center; }
.areabrick-section-slider-typed .long-text { font-size: 20px; line-height: 26px; max-width: 610px; }
.areabrick-section-slider-typed .long-text p { color: #eee; }

body.mode-edit .areabrick-section-slider-typed .image-cards .pimcore_tag_block { display: flex; justify-content: space-between; flex-wrap: wrap; }
body.mode-edit .areabrick-section-slider-typed .image-card { border-radius: 5px !important; height: 380px !important; color: #000;  }
body.mode-edit .areabrick-section-slider-typed .image-card a { color: #000; }

/* Features with image */
.areabrick-section-features-with-image .text-headline { font-size: 2rem; color: rgb(21, 21, 21); }

/* Masonry gallery */
.areabrick-section-masonry .tile-image { height: 100%; }
.areabrick-section-masonry .pimcore_editable.pimcore_tag_link { background-color: transparent !important; border: 0px !important; }

/* Call to action */
.areabrick-section-call-to-action h2 > p { line-height: inherit; }

/* Contact map */
.areabrick-section-contact-map > .container { position: relative; z-index: 20; }
.areabrick-section-contact-map h2 { line-height: 1.1; }
.areabrick-section-contact-map .list-group-item > i { min-width: 24px; }
/* .areabrick-section-contact-map .contact-form { position: absolute; top: 50px; left: 50px; background: #fff; padding: 20px; } */

/* Gallery */
body.mode-view .areabrick-section-gallery-basic .user-caption { pointer-events: none; }
.areabrick-section-gallery-basic .extra-text,
.areabrick-section-gallery-basic .extra-text > p { color: #fff; display: block; font-size: 16px; }
.photo-no-lightbox { -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; transition-delay: 0s; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; transition-delay: 0s; border-radius: 0.25rem; position: relative; overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(white, black); }

/* Team */
.areabrick-section-team .team-block { display: block; }
.areabrick-section-team .team-block.no-link { pointer-events: none; }
.areabrick-section-team .team-block-avatar { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; display: block; margin: 0 auto; }
.areabrick-section-team .team-block-text { text-align: center; margin: 0 -20px; /* we add some more space for longer names */ }
.areabrick-section-team .team-block-text .name { white-space: nowrap; font-size: 16px; font-weight: bold; }

/* Snippet */
body.mode-edit .areabrick-section-snippet .pimcore_tag_textarea { font-family: courier; }

/* Timeline */
.areabrick-section-timeline .timeline-wrap         { width: 80%; padding: 20px 0; margin: 50px auto; position: relative; overflow: hidden; }
.areabrick-section-timeline .timeline-wrap:before  { content: ''; position: absolute; top: 0px; bottom: 0px; left: 50%; margin-left: -1px; width: 2px; background: #CCD1D9; z-index: 1 }
.areabrick-section-timeline .timeline-block        { position: relative; width: -webkit-calc(50%); width: -moz-calc(50%); width: calc(50%); display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; justify-content: space-between; clear: both; margin: 0 8px; }
.areabrick-section-timeline .timeline-block-right  { float: right; }
.areabrick-section-timeline .timeline-block-left   { float: left; text-align: right;  }
.areabrick-section-timeline .timeline-marker       { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #F5F7FA; background: #4FC1E9; margin-top: 10px; z-index: 9999; position: absolute; }
.areabrick-section-timeline .timeline-block-left .timeline-marker { right: 0px; }
.areabrick-section-timeline .timeline-block-right .timeline-marker { left: 0px; }
.areabrick-section-timeline .timeline-content      { padding: 0 35px; color: #666 }
.areabrick-section-timeline .timeline-content h3   { margin-top: 5px; margin-bottom: 5px; font-size: 25px; font-weight: 500 }
.areabrick-section-timeline .timeline-content span { font-size: 15px; color: #a4a4a4; }
.areabrick-section-timeline .timeline-content p    { font-size: 14px; line-height: 1.5em; word-spacing: 1px; color: #888; }

.tile .tile-content::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; background: rgba(0, 0, 0, 0.2); }

/* ------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */

/* Changes for the admin section */

body.mode-edit > header .navbar-nav { pointer-events: none; }

.pimcore_block_buttons             { position: relative;  z-index: 10000; }
.pimcore_area_buttons.top          { top: -35px !important; z-index: 10001; }
.pimcore_block_entry > .item, 
.pimcore_block_entry > section, 
.pimcore_block_entry > footer      { position: relative; margin: 0 auto; padding: 6.25rem 0; overflow: hidden; }

.pimcore_block_entry.pimcore_area_hidden > section { opacity: 0.35; }

.pimcore_tag_snippet .x-panel-default,
.pimcore_tag_snippet .x-panel-default .x-panel-body-default { background: transparent; }
.pimcore_tag_snippet .x-panel-body,
.pimcore_tag_snippet .x-border-box { overflow: hidden !important; }
.pimcore_tag_snippet .x-panel-body-header,
.pimcore_tag_snippet .x-panel-body-default { color: inherit; }

.cke_dialog_body select { opacity: 1 !important; }

/* ------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */

/* Big screen */
@media (min-width: 1600px) {
    .container { max-width: 1170px; }
}

@media (min-width: 1200px) {
    /* Move menu to the right */
    .navbar-expand-lg .navbar-collapse { justify-content: flex-end !important; }
} 


/* Mobil */
@media (max-width: 1200px) {
    body { padding-top: 0px; }

    .navbar .nav-item .nav-link { text-align: center; }
    .navbar-collapse { padding: 25px 10px !important; }

    img                                   {width: 100% !important;height: auto !important;}
    iframe                                { width: 100% !important; }
    .areabrick-header-default  { padding: 50px 20px !important; margin-top: 0px !important; }
    .areabrick-header-default .container { padding-top: 120px !important; }
    header { border-radius: 0 !important; margin: 0px !important; width: 100% !important; }

    .areabrick-header-default h1 { font-size: 34px; line-height: 42px; }

    .areabrick-section-call-to-action .type-compact-icon .box-icon { margin-bottom: 10px; }  


} 

@media (max-width: 655px) {
    .breadcrumb-custom { display: none; }

    body .navbar { padding: 5px 0; }
    body .navbar-brand { height: 50px !important; margin: 0px 0; padding: 0; }
    body .navbar-logo { width: auto !important; }

    body .areabrick-header-default .container { padding-top: 65px !important; }

    .burger { width: 40px; height: 40px; margin: 2px 5px 0 0; }
    .burger:focus { border: 0px !important; }
    
    #go-message-window  { left: 0px !important; right: 0px !important; }

    /* .areabrick-section-slider-typed .image-blocks .image-card-image { display: none; } */

    body.front .areabrick-section-slider-typed .image-cards { margin-top: 20px !important; }
    body.front .areabrick-section-slider-typed .image-card { height: 58px !important;border-radius: 3px !important;width: 100% !important;margin: 0 15px 10px;}
    body.front .areabrick-section-slider-typed .image-card .tile-footer { padding: 15px 10px; }
    body.front .areabrick-section-slider-typed .image-card h2 { padding: 15px 0 0; margin: 0 !important; transform: none !important; }

    .areabrick-content-image-block .type-circle .order-2 { order: 0; }
    .areabrick-content-mod > .container > .row > .col { flex-basis: auto !important; }

    .areabrick-section-timeline .timeline-wrap,
    .areabrick-section-timeline .timeline-block                       { width: 100%; margin-bottom: 30px; }
    .areabrick-section-timeline .timeline-block-right                 { float: none; }
    .areabrick-section-timeline .timeline-block-left                  { float: none; direction: ltr; }
    .areabrick-section-timeline .timeline-content                     { text-align: left; }
    .areabrick-section-timeline .timeline-wrap:before                 { left: 0%; margin: 0 0 0 15px; }
    .areabrick-section-timeline .timeline-block-left .timeline-marker { left: 0px; right: auto; }


}