@media all {
  body { overflow-x: hidden; overflow-y: scroll; }
  
  .viewport { max-width: 73em; overflow: hidden; margin: 0 auto; padding: 4.5em 0.5em 3em; }
  
  #pre-head { position: fixed; height: 40px; top: 0; right: 0; left: 0; padding: 0; z-index: 101; background: #F0F0F0; }
  #pre-head .viewport { padding: 0.25em 0.5em; }
  
  #head { position: fixed; top: 40px; right: 0; left: 0; background: #fff; box-shadow: 0 0 8px 0 #3A3A3A; z-index: 100; }
  #head .viewport { padding: 0.75em 0.5em 1.5em; }
  #head-box:after { content: "."; display: block; clear: both; font-size: 0; height: 0; visibility: hidden; }
  
  #nav-padding { height: 156px !important; }

  #logo { float: left; width: 250px; height: 71px; }
  #logo * { display: block; }
  
  #mobile-box { display: none; }
  #nav-box { float: right; padding: 20px 0 0 0; display: -ms-flexbox; display: flex; }

  #foot { background: rgba(140,139,139,0.2); }  
  #foot .viewport { max-width: 25em; text-align: center; }
  #foot * { font-weight: 500; letter-spacing: 0.05em; }
  #foot p { font-size: 1.25em; }
  #foot a { color: #3A3A3A; }
  #foot a:hover, #foot a:focus { color: #3A3A3A; text-decoration: underline; }
  
  #sitemap { background: #333; }
  
  #particles-js { position: relative !important; height: 50vh !important; max-height: 56.25vw; }
  
  .fb3d-pdf { height: 80vh; height: calc(100vh - 156px - 6em); margin: 0 0 1.5em; background: #f8f8f8; }
  
  .section-header { text-align: center; margin: 0 0 1.5em; }
 
  .section--start .viewport { padding: 3em 0.5em 0; }
  .section--start .frame-type-menu_pages ul { margin: 0 -0.25em; }
  .section--start .frame-type-menu_pages li { float: left; width: 33.333%; padding: 0 0.25em; }
  .section--start .frame-type-menu_pages li a { margin: 0 0 0.25em; padding: 1em; }
  
  .section--company { clear: left; background: url(/fileadmin/gfx/bg-optence.png) no-repeat scroll calc(100% - 0.5em) 50%; }
  
  .section--tiles { background: rgba(140,139,139,0.2); }
  .tiles .inner--flex { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; }
  .tile--image { position: relative; z-index: 0; }
  .tile { height: 100%; background: #fff; padding: 1.5em; }
  .tile h3 { font-size: 1.5em; font-weight: 500; text-transform: none; color: #CB1417; margin: 0 0 0.25em; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
  .tile a { font-style: italic; text-decoration: underline; }
  
  .section--advantages { background: url(/fileadmin/gfx/bg-advantages.png) no-repeat scroll 0.5em 3em; }
  .section--advantages .grid--left { width: 33.333%; }
  .section--advantages .grid--right { width: 66.666%; }
  .listing { margin: 3em 0 0; }
  
  #section164 { background: none; }
  #section164 .inner--flex { width: 25%; }
  #section164 .tile { box-shadow: 0 0 4px rgba(80,80,80,0.5); }
  
  .ce-left .ce-header > *, .ce-right .ce-header > * { margin-top: 0; }


  /* ---------- news ---------- */
  /*
  .outer--flex.flex--cols-1.news-list-view { display: block; margin: 0.25em 0 1.5em; }
  .news-list-view .inner--flex { border: 1px solid #bbb; border-top: none; box-shadow: 1px 1px 1px 1px #ccc; border-radius: 2px; background-color: #ccc; margin: 0 0.25em 1em; padding: 0; }
  */
  .news-list-view .tile { box-shadow: none; }
  .news-list-view .tile h3 { font-size: 1.25em; }
  .news-list-view.outer--flex.flex--cols-2 .inner--flex { width: -webkit-calc(50% - 0.5em); width: calc(50% - 0.5em); }
  .news-list-view.outer--flex.flex--cols-3 .inner--flex { width: -webkit-calc(33.333% - 0.5em); width: calc(33.333% - 0.5em); }

  .news-header { overflow: hidden; }
  .news-header .news-img-wrap { float: left; width: 25%; padding: 0 1.5em 1.5em 0; }
  .news-header .news-img-wrap + .teaser-text { margin-left: 25%; }
  
  
  /* ---------- jobs ---------- */
  .job-market--item, .job-market--company { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; margin: 0 0 1.5em; }
  .job-market--item { border: 1px solid #bbb; border-top: none; box-shadow: 1px 1px 7px 1px #ccc; border-radius: 2px; background: #fff; }
  .job-market--company { margin: 3em 0; }
  .job-market--company-logo { display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; width: 25%; }
  .job-market--company-logo img { max-height: 100px; }
  .job-market--text { width: 75%; padding: 1em 1.5em; }
  .job-market--text h3, .job-market--text p { margin: 0; }
  .job-market--company-text { width: 75%; padding: 1em 1.5em; color: #fff; background: #CB1417; }
  .job-market--company-text p { margin: 0; }
  .job-market--company-name { margin: 0; color: #fff; }


  /* ---------- memberlist ---------- */
  .memberlist { padding: 1em 1em 2.5em 0; }
  .memberlist--filter, .memberlist--items { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: stretch; align-items: stretch; width: calc(100% + 1em); margin-left: -0.5em; }
  .memberlist--filter a { position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: center; justify-content: center; width: 25%; padding: 0.5em; color: #3A3A3A; background: none; z-index: 0; }
  .memberlist--filter a:before { content: ""; position: absolute; top: 0.5em; right: 0.5em; bottom: 0.5em; left: 0.5em; z-index: -1; border: 1px solid #999; background: #fff; }
  .memberlist--filter span { display: block; padding: 0.25em 0.5em; font-style: italic; line-height: 1.2; text-align: center; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; text-overflow: ellipsis; overflow: hidden; }
  .memberlist--filter a.is--active:before, .memberlist--filter a:hover:before, .memberlist--filter a:focus:before{ background-color: #CB1417; }
  .memberlist--filter a.is--active, .memberlist--filter a:hover, .memberlist--filter a:focus { color: #fff; }
  .memberlist--items { margin-top: 1em; }
  .memberlist--items [data-filter-tags] { width: 25%; padding: 0.5em; }
  .memberlist--items a { display: block; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; width: 100%; height: 100%; color: #3A3A3A; background: #fff; }
  .memberlist--image { position: relative; width: 100%; height: 0; padding: 0 0 65.5%; z-index: 0; }
  .memberlist--image span { position: absolute; width: 100%; height: 100%; padding: 1em 1.5em; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; }
  .memberlist--image img { max-height: 100%; }
  .memberlist--image + * { /*border-top: 1px solid #8B8B8B;*/ display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: center; justify-content: center; height: 100%; padding: 0.5em 0.25em; text-align: center; line-height: 1.2; word-break: break-word; /*-webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;*/ }
  .memberlist--image + * b { display: block; }
  
  .memberlist--items a { border: 1px solid #bbb; border-top: none; box-shadow: 1px 1px 7px 1px #ccc; border-radius: 2px; background-color: #ccc; }
  .memberlist--image { background-color: #fff; }

  
  /* ---------- Social Media ---------- */
  .socialmedia--links { position: fixed; top: 200px; right: 0; z-index: 90; }
  .socialmedia--links ul, .socialmedia--links li { list-style-type: none; margin: 0; }
  .socialmedia--links li { display: block; float: right; clear: both; }
  .socialmedia--links li:after { content: "."; display: block; clear: both; font-size: 0; visibility: hidden; height: 0; }
  .socialmedia--links li + li { margin: 0.25em 0 0; }
  .socialmedia { display: block; width: 2em; height: 2em; text-indent: -999999px; color: transparent; background: none no-repeat scroll 0 0 #CB1417; background-size: auto 100%; overflow: hidden; }
  .socialmedia:hover, .socialmedia:focus { background-color: none; } 
  .socialmedia.socialmedia--login { background-image: url(/fileadmin/gfx/icons/login.svg); }
  .socialmedia.socialmedia--phone { background-image: url(/fileadmin/gfx/icons/phone.svg); }
  .socialmedia.socialmedia--email { background-image: url(/fileadmin/gfx/icons/mail.svg); }
  .socialmedia.socialmedia--xing { background-image: url(/fileadmin/gfx/icons/xing.svg); }
  .socialmedia.socialmedia--linkedin { background-image: url(/fileadmin/gfx/icons/linkedin.svg); }
  .socialmedia.socialmedia--trigger { width: auto; text-indent: 0; cursor: pointer; }
  .socialmedia.socialmedia--trigger a { display: block; width: 10em; margin: 0 0 0 2em; font-style: normal; text-align: center; line-height: 2; color: #fff !important; -webkit-transition: margin 0.3s linear; transition: margin 0.3s linear; }
  .socialmedia.socialmedia--phone a { white-space: nowrap; }
  .socialmedia.socialmedia--trigger.is--closed a { margin-right: -10em; }
  
  
  /* ---------- Modal ---------- */
  .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; }
  .modal .modal-close.is--background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.65); z-index: 1; outline: 0; }
  .modal .modal-close.is--cross { position: absolute; top: 0.5em; right: 0.5em; width: 2em; height: 2em; cursor: pointer; -webkit-transform: rotate(45deg); transform: rotate(45deg); z-index: 1; outline: 0; }
  .modal .modal-close.is--cross:before, .modal .modal-close.is--cross:after { content: ""; position: absolute; top: 0; right: 0; display: block; background: #666; }
  .modal .modal-close.is--cross:before { top: 50%; margin-top: -1px; width: 2em; height: 2px; }
  .modal .modal-close.is--cross:after { left: 50%; margin-left: -1px; width: 2px; height: 2em; }
  .modal .modal-close.is--cross:hover:before, .modal .modal-close.is--cross:focus:before, .modal .modal-close.is--cross:hover:after, .modal .modal-close.is--cross:focus:after { background-color: #888; }
  .modal .modal-wrapper { display: block; position: relative; top: 50%; max-width: 100%; width: 46em; max-height: 60%; max-height: 60vh; height: 100%; margin: 0 auto; padding: 3em 0 0; background: #fff; box-shadow: 0 0 8px 0 rgba(0,0,0,0.25); overflow: hidden; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 5; }
  .modal .modal-content { display: block; position: relative; width: 100%; height: 100%; margin: 0; padding: 0 3em 3em; overflow-y: auto; }
  .modal .modal-content .frame:first-of-type .ce-header * { margin-top: 0; }
  
  
  /* ---------- Accordion ---------- */
  .tx-accordion { margin: 0 0 0.5em; }
  .tx-accordion .accordion-head { background: none; padding: 1.5em; }
  .tx-accordion.is--closed .accordion-head { background: rgba(140,139,139,0.2); }
  .tx-accordion .frame-type-header .ce-header { position: relative; }
  .tx-accordion h3 { color: #3A3A3A; margin: 0; }  
  .tx-accordion .accordion-icon { width: 38px; height: 38px; float: right; display: inline-block; position: relative; cursor: pointer; outline: 0; }
  .tx-accordion .accordion-head .accordion-icon:before { content: ""; display: block; position: absolute; width: 30px; height: 1px; background: #3A3A3A; left: 4px; top: 50%; transform: translateY(-50%); }
  .tx-accordion .accordion-head .accordion-icon:after { display: none; }
  .tx-accordion.is--closed .accordion-head .accordion-icon:after { content: ""; display: block; position: absolute; width: 30px; height: 1px; background: #3A3A3A; left: 4px; top: 50%; -webkit-transform: translateY(-50%) rotate(90deg); -moz-transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg); }
  .tx-accordion .accordion-body { padding: 1em 1.5em; }
  
  
  /* ---------- Parallax ---------- */
  .parallax { position: relative; overflow: hidden; height: 50vh; }
  .parallax--layer { position: absolute; top: 50%; left: 0; width: 100%; height: 56.25vw; background: none no-repeat scroll 50% 50%; background-size: cover; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); }
  
  
   /* ---------- Flex ---------- */
  .outer--flex { display: -ms-flexbox; display: flex; -ms-flex-direction: row; -ms-flex-wrap: wrap; flex-flow: row wrap; margin: 0 -0.5em; }
  .inner--flex { position: relative; margin: 0 0 1em; padding: 0 0.5em; z-index: 0; }
  .inner--flex:before { content: ""; position: absolute; top: 0; right: 0.5em; bottom: 0; left: 0.5em; border: 1px solid #bbb; border-top: none; box-shadow: 1px 1px 7px 1px #ccc; border-radius: 2px; background: #fff; z-index: -1; }
  .outer--flex.flex--cols-1 .inner--flex { width: 100%; }
  .outer--flex.flex--cols-2 .inner--flex { width: 50%; }
  .outer--flex.flex--cols-3 .inner--flex { width: 33.333%; }
  .outer--flex.flex--cols-4 .inner--flex { width: 25%; }

  .outer--flex.flex--cols-1 .inner--flex { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; margin: 0 0 1.5em; }
  .outer--flex.flex--cols-1 .inner--flex figure { display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; width: 25%; padding: 1px; }
  .outer--flex.flex--cols-1 .inner--flex figure + * { width: 75%; padding: 1em 1.5em; }


  a.inner--flex, a.job-market--item { color: inherit; }
  a.inner--flex:hover h3, a.inner--flex:focus h3, a.job-market--item:hover h3, a.job-market--item:focus h3 { color: rgba(203,20,23,0.5); }
  
  
  .page-navigation { margin: 1.5em 0 1em; text-align: center; }
  .page-navigation.page-navigation-top { margin: 3em 0 1em; }
  .page-navigation.page-navigation-bottom { margin: 1.5em 0 2.5em; }
  .page-navigation a { display: block; color: #fff; margin: 0; padding: 0; font-weight: 400; font-size: 0.8em; line-height: 2.5; text-decoration: none; background: #333; border: 0; }
  .page-navigation .current a, .page-navigation .tx-indexedsearch-browselist-currentPage a { color: #fff; font-weight: 400; background: #e1001a; }
  .page-navigation ul { list-style-type: none; margin: 0; overflow: hidden; }
  .page-navigation li { list-style-type: none; display: inline-block; height: 2em; line-height: 2; margin: 0 0.5em 0.5em 0; min-width: 2em; text-align: center; }
  .page-navigation li:before { display: none !important; }
  .page-navigation li.last { margin-right: 0; }
  
  
  /* ---------- Columns / Grids ---------- */
  /*.columns { overflow: hidden; }*/
  .column--1 { float: left; width: 30%; padding: 0 3em 0 0; }
  .column--3 { margin: 0 0 0 30%; padding: 0; }
  
  .grids { overflow: hidden; margin: 0 -3em; }
  .grid--left { float: left; padding: 0 3em; }
  .grid--right { float: right; padding: 0 3em; }
  .grid--50 { width: 50%; }
}