@import url("https://fast.fonts.net/t/1.css?apiType=css&projectid=554b7f4c-7c7d-49c2-a440-f79094ee79b1");
@font-face {
    font-family: "Helvetica Neue";
    font-weight: normal;
    font-style: normal;
    src: url("http://www.sonepar.de/assets/fonts/07fe0fec-b63f-4963-8ee1-535528b67fdb.eot?#iefix");
    src: url("http://www.sonepar.de/assets/fonts/07fe0fec-b63f-4963-8ee1-535528b67fdb.eot?#iefix") format("eot"),
        url("http://www.sonepar.de/assets/fonts/3600b37f-2bf1-45f3-be3a-03365f16d9cb.woff2") format("woff2"),
        url("http://www.sonepar.de/assets/fonts/60be5c39-863e-40cb-9434-6ebafb62ab2b.woff") format("woff"),
        url("http://www.sonepar.de/assets/fonts/4c6503c9-859b-4d3b-a1d5-2d42e1222415.ttf") format("truetype"),
        url("http://www.sonepar.de/assets/fonts/36c182c6-ef98-4021-9b0d-d63122c2bbf5.svg#36c182c6-ef98-4021-9b0d-d63122c2bbf5") format("svg");
}

@font-face {
    font-family: "Helvetica Neue Light";
    font-weight: 300;
    font-style: normal;
    src: url("http://www.sonepar.de/assets/fonts/ae1656aa-5f8f-4905-aed0-93e667bd6e4a.eot?#iefix");
    src: url("http://www.sonepar.de/assets/fonts/ae1656aa-5f8f-4905-aed0-93e667bd6e4a.eot?#iefix") format("eot"),
        url("http://www.sonepar.de/assets/fonts/5a13f7d1-b615-418e-bc3a-525001b9a671.woff2") format("woff2"),
        url("http://www.sonepar.de/assets/fonts/530dee22-e3c1-4e9f-bf62-c31d510d9656.woff") format("woff"),
        url("http://www.sonepar.de/assets/fonts/688ab72b-4deb-4e15-a088-89166978d469.ttf") format("truetype"),
        url("http://www.sonepar.de/assets/fonts/7816f72f-f47e-4715-8cd7-960e3723846a.svg#7816f72f-f47e-4715-8cd7-960e3723846a") format("svg");
}

/*@font-face {
  font-family: 'icomoon';
  src: url("http://www.sonepar.de/assets/fonts/icomoon.eot?5py5cq");
  src: url("http://www.sonepar.de/assets/fonts/icomoon.eot?5py5cq#iefix") format("embedded-opentype"),
      url("http://www.sonepar.de/assets/fonts/icomoon.ttf?5py5cq") format("truetype"),
      url("http://www.sonepar.de/assets/fonts/icomoon.woff?5py5cq") format("woff"),
      url("http://www.sonepar.de/assets/fonts/icomoon.svg?5py5cq#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}*/

@font-face {
    font-family: 'icomoon';
    src: url("fonts/icomoon.ttf") format("truetype"),
        url("fonts/icomoon.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-keyboard_arrow_down:before {
    content: "\e807";
}

.icon-keyboard_arrow_up:before {
    content: "\e800";
}

.icon-keyboard_arrow_right:before {
    content: "\e801";
}

.icon-keyboard_arrow_left:before {
    content: "\e802";
}

.icon-books:before {
    content: "\e803"; }

.icon-file-text2:before {
    content: "\e804"; }

.icon-cog:before {
    content: "\e805"; }

.icon-exit:before {
    content: "\e806"; }

/* Colors */
/* Fonts */
body {
    font-family: Arial;
    line-height: 18px;
    color: #333333;
    -webkit-text-size-adjust: none;
    font-size: 13px; }
@media screen and (max-width: 1200px) {
    body {
        font-size: 14px; } }

h1 {
    font-family: "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosRegular", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
    line-height: 37px;
    font-size: 34px;
    color: #23358a; }
@media screen and (max-width: 992px) {
    h1 {
        font-size: 25px; } }

h2 {
    font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosRegular", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
    line-height: 37px;
    font-size: 34px;
    font-weight: 300;
    color: #25a4d9; }
@media screen and (max-width: 992px) {
    h2 {
        font-size: 25px; } }

h1 + h2 {
    margin-top: -10px;
    margin-bottom: 30px; }

h3 {
    font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosRegular", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
    line-height: 30px;
    font-size: 26px;
    font-weight: 300;
    color: #25a4d9; }
@media screen and (max-width: 1200px) {
    h3 {
        font-size: 23px; } }
@media screen and (max-width: 992px) {
    h3 {
        font-size: 23px; } }
@media screen and (max-width: 768px) {
    h3 {
        font-size: 21px; } }

h4 {
    font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosRegular", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
    line-height: 23px;
    font-weight: 300;
    font-size: 20px;
    color: #23358a;
    margin-top: 25px; }
@media screen and (max-width: 1200px) {
    h4 {
        font-size: 21px; } }
@media screen and (max-width: 992px) {
    h4 {
        font-size: 21px; } }
@media screen and (max-width: 768px) {
    h4 {
        font-size: 18px; } }

h5 {
    font-family: "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosRegular", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
    line-height: 23px;
    font-size: 20px;
    color: #999999;
    font-weight: normal; }

h6 {
    font-family: Arial;
    line-height: 16px;
    font-size: 13px;
    color: #333333;
    font-weight: bold; }

p {
    font-family: Arial;
    color: #333333;
    font-size: 13px; }
@media screen and (max-width: 992px) {
    p {
        font-size: 12px; } }

.icon-keyboard_arrow_right {
    margin-left: -8px; }

a {
    text-decoration: none;
    color: #333333;
    cursor: pointer; }
a span {
    color: #25a4d9 !important;
    font-size: 150%;
    vertical-align: middle;
    display: inline-block;
    margin-bottom: 0.1em; }
a:hover {
    color: #25a4d9;
    text-decoration: none; }
a:active {
    color: #25a4d9;
    text-decoration: none; }

ul {
    font-family: Arial;
    color: #333333;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-padding-start: 0;
    padding-left: 20px; }
ul li {
    color: #25a4d9;
    font-size: 14px; }
ul li span {
    font-size: 12px;
    color: #333333; }
ul li ul {
    color: #333333;
    padding-left: 20px;
    list-style-type: disc; }
ul li ul li {
    color: #333333; }

ol {
    font-family: Arial;
    color: #333333;
    -webkit-margin-before: 10px;
    -webkit-margin-after: 10px;
    -webkit-padding-start: 10px;
    padding-left: 20px; }
ol li {
    color: #333333;
    font-size: 14px; }
ol li span {
    font-size: 12px;
    color: #333333; }

input[type="text"], input[type="password"], input[type="email"], input[type="search"], input[type="tel"], input[type="url"] {
    width: 100%;
    border: 1px solid #999999;
    border-radius: 5px;
    height: 46px;
    padding: 8px; }

input[type="radio"] {
    margin-right: 5px; }

input[type="checkbox"] {
    margin-right: 5px;
    margin-bottom: 5px;
    border-radius: 0;
    border: 1px solid #999999; }

input[type="Submit"] {
    font-size: 20px;
    padding: 14px 14px;
    border: none;
    color: #ffffff;
    background-color: #25a4d9;
    margin-top: 30px;
    width: 100%; }
input[type="Submit"]:hover, input[type="Submit"]:active {
    background-color: #23358a; }
input[type="Submit"].disabled {
    background-color: #999999;
    color: #cccccc; }
input[type="Submit"] span {
    font-size: 28px;
    margin-top: -5px;
    margin-right: -5px;
    vertical-align: middle;
    display: inline-block; }

input:disabled {
    background: #ffffff;
    border-color: #cccccc;
    color: #999999; }

@media screen and (max-width: 768px) {
    input {
        font-size: 16px; } }

select:disabled {
    background: #ffffff;
    border-color: #cccccc;
    color: #999999; }

.input-group .input-group-btn button.btn {
    height: 46px; }
.input-group .input-group-btn button.btn:hover {
    color: #ffffff; }

textarea {
    width: 100%;
    resize: none;
    border: 1px solid #999999;
    border-radius: 5px;
    min-height: 120px; }

select {
    width: 100%;
    height: 46px;
    border: 1px solid #999999;
    border-radius: 5px;
    padding: 8px;
    background-color: #ffffff; }

button {
    font-size: 20px;
    padding: 14px 14px;
    border: none;
    color: #ffffff;
    background-color: #25a4d9; }
button:hover, button:active {
    background-color: #23358a; }
button.disabled {
    background-color: #999999;
    color: #cccccc; }
button span {
    font-size: 28px;
    margin-top: -5px;
    margin-right: -5px;
    vertical-align: middle;
    display: inline-block; }

#main-carousel {
    top: -52px;
    position: relative;
    height: 875px; }
@media screen and (max-width: 1200px) {
    #main-carousel {
        height: 630px; } }
@media screen and (max-width: 992px) {
    #main-carousel {
        top: -25px;
        height: 485px; } }
@media screen and (max-width: 768px) {
    #main-carousel {
        top: -20px;
        height: 270px; } }
#main-carousel .controls {
    width: 100%;
    z-index: 4;
    position: absolute;
    bottom: 260px;
    text-align: center; }
@media screen and (max-width: 1200px) {
    #main-carousel .controls {
        bottom: 260px; } }
@media screen and (max-width: 992px) {
    #main-carousel .controls {
        bottom: 75px; } }
@media screen and (max-width: 768px) {
    #main-carousel .controls {
        bottom: 35px; } }
#main-carousel .controls .inner .carousel-indicators {
    display: inline-block;
    position: static;
    margin-left: 0;
    width: 90%;
    left: 0;
    margin-top: 20px; }
#main-carousel .controls .inner .carousel-indicators li {
    background-color: #25a4d9;
    border: none;
    width: 18px;
    height: 18px; }
@media screen and (max-width: 992px) {
    #main-carousel .controls .inner .carousel-indicators li {
        margin-right: 10px; } }
#main-carousel .controls .inner .carousel-indicators li.active {
    margin-bottom: -2px;
    border-radius: 15px;
    width: 24px;
    height: 24px;
    border: 3px solid #23358a;
    background-color: #ffffff; }
#main-carousel .controls .inner a {
    width: 50px;
    height: 80px; }
#main-carousel .controls .inner a img {
    width: 100%; }
#main-carousel .controls .inner .left {
    float: left; }
#main-carousel .controls .inner .right {
    float: right; }
#main-carousel .carousel-inner .item {
    height: 100%;
    text-align: center;
    margin: 0 auto; }
#main-carousel .carousel-inner .item img {
    display: inline-block; }
#main-carousel .carousel-inner .item .overlay_container {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%; }
#main-carousel .carousel-inner .item .overlay_container .center_container {
    max-width: 1280px;
    margin: 0 auto;
    height: 100%;
    position: relative; }
#main-carousel .carousel-inner .item .overlay_container .center_container .overlay {
    text-align: left;
    position: absolute;
    font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosRegular", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; }
#main-carousel .carousel-inner .item .overlay_container .center_container .overlay button {
    font-family: "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosRegular", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
    margin-top: 20px;
    white-space: nowrap; }
@media screen and (max-width: 992px) {
    #main-carousel .carousel-inner .item .overlay_container .center_container .overlay h1 {
        font-size: 20px; }
    #main-carousel .carousel-inner .item .overlay_container .center_container .overlay button {
        margin-top: 10px;
        font-size: 20px; } }
@media screen and (max-width: 768px) {
    #main-carousel .carousel-inner .item .overlay_container .center_container .overlay h1 {
        font-size: 20px; }
    #main-carousel .carousel-inner .item .overlay_container .center_container .overlay button {
        margin-top: 5px;
        padding: 10px; } }

.content {
    margin-top: 0px;
    max-width: 1170px; }
.content.full {
    margin-top: -180px;
    position: relative; }
@media screen and (max-width: 1200px) {
    .content.full {
        margin-top: -180px; } }
@media screen and (max-width: 992px) {
    .content.full {
        margin-top: -80px; } }
@media screen and (max-width: 768px) {
    .content.full {
        margin-top: -40px; } }

#searchTextField::-ms-clear {
    display: none; }

.header-image {
/*    margin-top: -50px;*/
    margin-bottom: 10px; }
@media screen and (max-width: 992px) {
    .header-image {
        margin-top: -19px; } }
.header-image img {
    width: 100%;
    height: auto; }

.fixed header {
    position: fixed; }

.fixed .login-container {
    position: fixed;
    width: 100%;
    z-index: 5;
}

.fixed #main-carousel {
    margin-top: 115px; }

.fixed .content {
    margin-top: 200px; }

.sub-nav {
    background-color: #f8f8f8;
    padding: 20px 30px 20px 20px;
    position: relative;
    margin-bottom: 20px; }
.sub-nav .arrow-left {
    position: absolute;
    top: 20px;
    right: 0;
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-right: 30px solid #ffffff;
    transition: 0.5s; }
.sub-nav ul {
    list-style: none;
    padding-left: 0; }
.sub-nav li {
    margin: 20px 10px 20px 0; }
.sub-nav li a {
    color: #23358a;
    font-size: 16px;
    font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosRegular", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; }
.sub-nav li a:hover {
    font-family: "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosRegular", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; }
.sub-nav li.active a {
    font-family: "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosRegular", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; }

.mobile-sub-nav {
    position: relative;
    margin-bottom: 20px; }
.mobile-sub-nav ul {
    list-style: none;
    padding-left: 0; }
.mobile-sub-nav li {
    color: #333333;
    margin-bottom: 2px; }
.mobile-sub-nav li .nav-item {
    background-color: #f8f8f8;
    color: #23358a;
    cursor: pointer;
    font-size: 16px;
    padding: 10px;
    position: relative;
    text-align: center; }
.mobile-sub-nav li .nav-item .arrow-up {
    display: none; }
.mobile-sub-nav li .nav-item.active {
    font-weight: bold;
    padding-bottom: 30px; }
.mobile-sub-nav li .nav-item.active .arrow-up {
    display: block;
    position: absolute;
    bottom: 0;
    right: 47%;
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 20px solid #ffffff; }
.mobile-sub-nav li .nav-item:hover {
    font-weight: bold; }
.mobile-sub-nav li .row {
    margin-bottom: 20px; }
.mobile-sub-nav .answer {
    margin: 10px 10px; }

.lightbox,
.lightbox-video {
    text-align: center; }
.lightbox .modal-dialog,
.lightbox-video .modal-dialog {
    max-width: 100%;
    width: auto;
    display: inline-block;
    margin-top: 10%; }
.lightbox .modal-dialog .modal-content,
.lightbox-video .modal-dialog .modal-content {
    position: relative;
    padding: 20px;
    border-radius: 0; }
.lightbox .modal-dialog .modal-content img,
.lightbox-video .modal-dialog .modal-content img {
    width: 100%; }
.lightbox .modal-dialog .modal-content iframe,
.lightbox-video .modal-dialog .modal-content iframe {
    width: 100%; }
.lightbox .modal-dialog .modal-content .close,
.lightbox-video .modal-dialog .modal-content .close {
    position: absolute;
    top: 0;
    right: 0;
    opacity: 1; }

.close {
    opacity: 1; }
.close:hover {
    opacity: 1; }

.modal-content {
    background: #f8f8f8;
    border: none;
    border-radius: 0; }
.modal-content > .modal-body > .close {
    margin-top: -15px;
    margin-right: -15px; }

.zoomimage {
    display: block;
    position: relative; }
.zoomimage .zoom-icon {
    position: absolute;
    left: 0;
    top: 0; }

.fl {
    float: left;
    margin-right: 15px;
    margin-bottom: 15px; }

.fr {
    float: right;
    margin-left: 15px;
    margin-bottom: 15px; }

.slider_h1 {
    display: block;
    font-family: "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosRegular", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
    line-height: 37px;
    font-size: 34px;
    color: #23358a; }
@media screen and (max-width: 992px) {
    .slider_h1 {
        font-size: 25px;
        line-height: 25px; } }
@media screen and (max-width: 768px) {
    .slider_h1 {
        font-size: 20px;
        line-height: 25px; } }

.slider_h2 {
    display: block;
    font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosRegular", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
    line-height: 37px;
    font-size: 34px;
    font-weight: 300;
    color: #25a4d9;
    margin-bottom: 30px; }
@media screen and (max-width: 992px) {
    .slider_h2 {
        font-size: 25px;
        line-height: 25px; } }
@media screen and (max-width: 768px) {
    .slider_h2 {
        font-size: 20px;
        line-height: 25px; } }

div.svg {
    position: absolute;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-image: url("http://www.sonepar.de/assets/images/header2.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%; }

header {
    height: 70px;
    width: 100%;
    z-index: 10;
    position: relative;
    top: 0; }
@media screen and (min-width: 992px) {
    header {
        height: 214px; } }
header .background {
    position: absolute;
    top: 0;
    z-index: -1;
    height: 100%;
    width: 100%; }
header .container {
    height: 100%; }
header .content {
    margin-top: 2%;
    height: 77%; }
@media screen and (max-width: 992px) {
    header .content {
        margin-top: 0%; } }
header .content > [class*="col-"] {
    height: 100%;
    text-align: center; }
header .content .logo {
    z-index: 11; }
header .content .logo a {
    height: 100%;
    width: 100%; }
header .content .logo a img {
    margin-top: 5%;
    height: 70%; }
@media screen and (min-width: 992px) {
    header .content .logo a img {
        height: 90px; } }
header .content #main-nav {
    float: left;
    margin-top: 62px;
    width: 100%;
    list-style-type: none;
    display: inline-block; }
@media screen and (max-width: 1200px) {
    header .content #main-nav {
        margin-left: 9%; } }
header .content #main-nav li {
    margin-right: 9%;
    display: inline-block; }
header .content #main-nav li a {
    font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosRegular", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
    color: #23358a;
    font-size: 20px; }
header .content #main-nav li a:hover {
    color: #25a4d9; }
header .content .search {
    width: 100%;
    height: 50px;
    margin-top: 50px;
    display: inline-block;
    float: right;
    position: relative; }
header .content .search input {
    width: 100%;
    height: 100%; }
header .content .search .searchbutton {
    background-color: transparent !important;
    background-image: url("http://www.sonepar.de/assets/images/icons/icon_search.png");
    position: absolute;
    right: 10px;
    top: 10px; }
header .content .search .icon {
    width: 28px;
    height: 28px;
    position: absolute;
    right: 11px;
    top: 11px; }
header .content .search.mobile {
    margin-top: 0px;
    width: 60px;
    height: 70%;
    float: left;
    text-align: center; }
header .content .search.mobile .icon {
    height: 85%;
    width: auto;
    margin-top: 17%;
    top: 0;
    left: 0;
    position: relative; }
header .content .login-icon {
    display: inline-block;
    float: right;
    height: 100%; }
header .content .login-icon img {
    height: 60%;
    margin-top: 15%; }
header .content .menu-icon {
    display: inline-block;
    float: left;
    text-align: center;
    height: 100%; }
header .content .menu-icon img {
    height: 50%;
    margin-top: 19%;
    margin-left: 30%; }
header #main-nav-escape {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 62px;
    padding-top: 2%; }

.login-container {
    position: absolute;
    width: 100%;
    top: 140px;
    z-index: 5;
    pointer-events: none; }
.login-container .container-fluid {
    max-width: 1170px; }
.login-container .row .module-content {
    padding-left: 0; }

.menu-container {
    position: absolute;
    width: 100%;
    top: 80px;
    z-index: 7; }
.menu-container .container {
    padding: 135px 55px 55px 55px;
    background-color: #f8f8f8; }
.menu-container .container .header_title {
    font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosRegular", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
    line-height: 23px;
    font-weight: 300;
    font-size: 20px;
    color: #23358a;
    margin-top: 25px; }
@media screen and (max-width: 1200px) {
    .menu-container .container .header_title {
        font-size: 21px; } }
@media screen and (max-width: 992px) {
    .menu-container .container .header_title {
        font-size: 21px; } }
@media screen and (max-width: 768px) {
    .menu-container .container .header_title {
        font-size: 18px; } }
.menu-container .container .header_title a {
    color: #23358a; }
.menu-container .container .header_title a:hover {
    color: #25a4d9; }
.menu-container .container ul {
    list-style-type: none; }
.menu-container .container ul li {
    font-size: 13px; }

#mobile-nav {
    z-index: 5;
    position: absolute;
    width: 100%;
    margin-top: -20px; }
#mobile-nav .close {
    position: absolute;
    right: 30px;
    top: 20px;
    width: 25px;
    z-index: 1; }
#mobile-nav .background {
    background-color: #ffffff;
    position: relative; }
#mobile-nav .background ul {
    list-style: none;
    width: 100%; }
#mobile-nav .background ul li {
    border-bottom: 1px solid #999999;
    background-color: #f8f8f8;
    font-size: 20px;
    font-family: "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosRegular", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; }
#mobile-nav .background ul li.back {
    font-weight: normal;
    background-color: #ffffff;
    font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosRegular", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; }
#mobile-nav .background ul li.back span {
    font-size: 20px; }
#mobile-nav .background ul li a {
    display: inline-block;
    padding: 20px;
    color: #23358a;
    width: 100%;
    height: 100%; }
#mobile-nav .background ul.list {
    position: absolute;
    top: 0;
    left: 0; }
#mobile-nav .background ul.list li a {
    width: 80%; }
#mobile-nav .background ul.list li.top-spacer {
    height: 69px;
    background-color: #ffffff; }
#mobile-nav .background ul.list li .next-level {
    text-align: center;
    float: right;
    padding: 20px;
    color: #23358a;
    width: 18%;
    border-left: 1px #999999 solid; }
#mobile-nav .background ul.list li .next-level:hover {
    color: #f8f8f8;
    background-color: #23358a; }

#mobile-search-container {
    z-index: 5;
    position: absolute;
    width: 100%;
    margin-top: -20px; }
#mobile-search-container .close {
    width: 25px; }
#mobile-search-container h1 {
    margin-top: 0px;
    margin-bottom: 30px; }
#mobile-search-container .background {
    background-color: #ffffff;
    padding: 25px 15px 15px 15px; }
#mobile-search-container .background .search {
    position: relative; }
#mobile-search-container .background .search .icon {
    width: 28px;
    height: 28px;
    position: absolute;
    right: 11px;
    top: 11px; }
#mobile-search-container .background .searchbutton {
    background-color: transparent !important;
    background-image: url("http://www.sonepar.de/assets/images/icons/icon_search.png");
    position: absolute;
    right: 10px;
    top: 10px; }

#mobile-login {
    z-index: 5;
    position: absolute;
    width: 100%;
    margin-top: -20px; }
#mobile-login .close {
    width: 25px; }
#mobile-login .login {
    padding-top: 25px; }

.breadcrumb {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    list-style: none;
    margin-bottom: 0px;
    color: #999999; }
.breadcrumb .icon-keyboard_arrow_left {
    font-size: 25px;
    vertical-align: middle;
    display: inline-block;
    margin-bottom: 2px; }
@media screen and (min-width: 992px) {
    .breadcrumb {
        margin-bottom: 20px; } }

footer {
    padding: 65px 0;
    margin-top: 100px;
    position: relative;
    background: #f4f4f5;
}
footer h5 {
    font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosRegular", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; }
footer .background-head {
    width: 100%;
    position: absolute;
    top: 0;
    z-index: -1; }
footer .background {
    width: 100%;
    height: 85%;
    position: absolute;
    top: 15%;
    z-index: -1; }
footer .container hr {
    border-color: #999999;
    margin-bottom: 30px; }
footer .container .logos {
    margin-top: 20px;
    padding-left: 15px; }
@media screen and (min-width: 1200px) {
    footer .container .logos {
        margin-top: 55px;
        margin-bottom: 50px; } }
footer .container .logos .logo {
    text-align: center;
    height: 60px;
    display: inline-block;
    margin-right: 8%; }
@media screen and (max-width: 768px) {
    footer .container .logos .logo {
        margin-right: 0%; } }
footer .container .logos .logo:last-child {
    margin-right: 0px; }
@media screen and (max-width: 768px) {
    footer .container .logos .logo img {
        width: 50%; } }
footer .container .copyright {
    display: inline-block;
    color: #999999; }
footer .container #bottom-nav {
    list-style-type: none;
    color: #999999;
    display: inline-block; }
footer .container #bottom-nav li {
    margin-right: 35px;
    margin-bottom: 10px;
    color: #999999;
    display: inline-block; }
@media screen and (max-width: 992px) {
    footer .container #bottom-nav li {
        margin-right: 16px; } }
footer .container .social {
    margin-top: 10px;
    margin-bottom: 20px;
    color: #999999; }
@media screen and (min-width: 1200px) {
    footer .container .social {
        float: right;
        margin-top: -5px;
        margin-bottom: 0; } }
footer .container .social img {
    margin-left: 18px; }

.login {
    pointer-events: all;
    background-color: #f5973a;
    color: #ffffff;
    padding: 75px 16px 16px 16px;
    width: 100%; }
.login img {
    vertical-align: bottom;
    float: left;
    width: 40px; }
.login .login-title {
    margin-left: 10px;
    font-size: 24px;
    font-weight: lighter;
    float: left;
    line-height: 43px; }
.login .login-title-mobile {
    margin-left: 10px; }
.login input {
    width: 100%;
    margin-top: 10px;
    color: #333333; }
.login a {
    color: #ffffff; }
.login a span {
    color: inherit !important; }
.login .forgotten-password {
    float: right;
    font-size: 12px;
    margin-top: 8px; }
.login button {
    background-color: #ee7219;
    width: 100%;
    margin-top: 8px; }
.login hr {
    margin-top: 15px;
    margin-bottom: 15px; }
.login .new-customer {
    font-size: 20px; }

.modul {
    margin-bottom: 20px; }
.modul.ansprechpartnersuche {
    position: relative; }
.modul.ansprechpartnersuche .background {
    background-color: #ffffff;
    width: calc(100% - 30px);
    height: 100%;
    position: absolute; }
.modul.ansprechpartnersuche img {
    float: left;
    top: 0;
    left: 0; }
.modul.ansprechpartnersuche .title {
    margin-top: 20px;
    font-size: 20px;
    margin-right: 0;
    margin-left: 0;
    color: #23358a;
    margin-bottom: 20px;
    font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosRegular", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; }
.modul.ansprechpartnersuche .form {
    margin-right: 0;
    margin-left: 0; }
.modul.ansprechpartnersuche .form input {
    margin-top: 5px;
    margin-bottom: 5px;
    background-color: #ebebeb;
    border-radius: 0;
    border: none;
    width: 100%; }
.modul.ansprechpartnersuche .form select {
    margin-top: 5px;
    margin-bottom: 15px;
    width: 100%;
    height: 46px;
    background-color: #ebebeb;
    border: none;
    color: #A9A9A9; }
.modul.ansprechpartnersuche .form button {
    width: 100%; }
.modul.coverflow ul {
    padding-left: 15px; }
.modul.coverflow ul li {
    margin-bottom: 15px; }
.modul.coverflow .flow {
    width: 100%;
    margin-top: 50px; }
.modul.coverflow .flow .arrow {
    position: relative;
    display: inline-block;
    float: left;
    width: 10%;
    text-align: center; }
.modul.coverflow .flow .arrow img {
    margin-top: 60px; }
.modul.coverflow .flow .slider {
    width: 80%;
    float: left; }
.modul.coverflow .flow .slider #covers .cover {
    display: block; }
.modul.coverflow .carousel .carousel-inner {
    width: 80%;
    margin: 0 auto; }
.modul.coverflow .carousel .carousel-inner .item .row {
    margin-left: 0;
    margin-right: 0; }
.modul.coverflow .carousel .carousel-inner .item .row img {
    width: 100%; }
.modul.coverflow .carousel .carousel-inner .item .row .thumbnail {
    margin-bottom: 0; }
.modul.coverflow .carousel .carousel-control {
    background-color: transparent;
    background-image: none;
    width: 10%;
    opacity: 1; }
.modul.coverflow .carousel .carousel-control img {
    margin-top: 40px;
    height: 50px; }
@media screen and (max-width: 992px) {
    .modul.coverflow .carousel .carousel-control img {
        position: absolute;
        margin-top: 0;
        top: 44%;
        left: 0; } }
.modul.gallery .background {
    background-color: #f8f8f8;
    padding: 40px 0px; }
@media screen and (max-width: 992px) {
    .modul.gallery .background {
        margin: 0 -15px;
        padding-left: 15px;
        padding-right: 15px; } }
.modul.gallery .background .carousel .carousel-inner {
    width: 80%;
    margin: 0 auto; }
.modul.gallery .background .carousel .carousel-inner .item .row {
    margin-left: 0;
    margin-right: 0; }
.modul.gallery .background .carousel .carousel-inner .item .row img {
    width: 100%; }
.modul.gallery .background .carousel .carousel-inner .item .row .thumbnail {
    margin-bottom: 0; }
.modul.gallery .background .carousel .carousel-control {
    background-color: transparent;
    background-image: none;
    width: 10%;
    opacity: 1; }
.modul.gallery .background .carousel .carousel-control img {
    margin-top: 40px;
    height: 50px; }
@media screen and (max-width: 992px) {
    .modul.gallery .background .carousel .carousel-control img {
        position: absolute;
        margin-top: 0;
        top: 44%; } }
@media screen and (max-width: 768px) {
    .modul.gallery .background .carousel .carousel-control img {
        left: 0; } }
.modul.zielgruppenansprache h1 {
    color: #2FA5D7;
    margin-bottom: 60px;
    margin-top: 20px;
    font-size: 300%; }
.modul.zielgruppenansprache .modal-dialog.modal-lg {
    width: 90vw;
    max-width: 1260px; }
.modul.zielgruppenansprache .modal-content {
    background-color: #e9e9e9; }
.modul.zielgruppenansprache .zielgruppenansprache-card-container {
    box-sizing: border-box;
    padding-left: 35px;
    padding-right: 35px;
    padding-bottom: 20px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: stretch;
    flex-wrap: wrap; }
.modul.zielgruppenansprache .zielgruppenansprache-card-group {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    flex: 1 1 430px;
    -webkit-flex: 1 1 430px; }
.modul.zielgruppenansprache .zielgruppenansprache-card {
    width: calc(25% - 20px);
    min-width: 195px;
    flex: 1 1 195px;
    -webkit-flex: 1 1 195px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    padding-bottom: 20px;
    background-color: white; }
.modul.zielgruppenansprache .zielgruppenansprache-card .image {
    width: 100%;
    height: 66.67%;
    background-size: cover;
    background-position: center center; }
.modul.zielgruppenansprache .zielgruppenansprache-card .description {
    display: block;
    box-sizing: border-box;
    text-align: center;
    padding: 10px 20px 0 20px;
    margin-bottom: 20px; }
.modul.zielgruppenansprache .zielgruppenansprache-card .weiter-link {
    display: block;
    width: 100%;
    text-align: center; }

.teaser {
    margin-bottom: 30px; }
.teaser.icon-teaser .background {
    padding: 20px;
    width: 100%;
    text-align: center; }
.teaser.icon-teaser .background .icon {
    margin: 0;
    height: 150px; }
.teaser.icon-teaser .background hr {
    margin-top: 10px;
    margin-bottom: 10px; }
.teaser.icon-teaser .background .subline {
    font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosRegular", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
    font-size: 30px;
    text-align: left; }
.teaser.image-overlay-teaser {
    text-align: center; }
.teaser.image-overlay-teaser .overlay {
    text-align: left;
    position: absolute;
    font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosRegular", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
    font-size: 16px;
    line-height: 1.42857143; }
@media screen and (max-width: 1200px) {
    .teaser.image-overlay-teaser .overlay {
        font-size: 13px; } }
@media screen and (max-width: 992px) {
    .teaser.image-overlay-teaser .overlay {
        font-size: 28px; } }
@media screen and (max-width: 668px) {
    .teaser.image-overlay-teaser .overlay {
        font-size: 16px; } }
@media screen and (max-width: 320px) {
    .teaser.image-overlay-teaser .overlay {
        font-size: 14px; } }
.teaser.image-overlay-teaser .overlay .title {
    font-size: 30px;
    text-align: left;
    font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosRegular", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; }
@media screen and (max-width: 992px) {
    .teaser.image-overlay-teaser .overlay .title {
        font-size: 17px; } }
.teaser.image-overlay-teaser img {
    width: 100%; }
.teaser.image-teaser img {
    width: 100%; }
.teaser.image-text-teaser a {
    color: #333333;
    text-decoration: none; }
.teaser.image-text-teaser img {
    width: 100%;
    height: 250px; }
.teaser.image-text-teaser .text {
    height: 250px;
    padding: 20px;
    background-color: #f8f8f8;
    line-height: 24px; }
.teaser.image-text-teaser .text .title {
    font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosRegular", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
    color: #23358a;
    font-size: 24px;
    text-align: left; }
.teaser.image-text-teaser .text .subtitle {
    font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosRegular", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
    color: #23358a;
    font-size: 18px;
    margin-top: 10px;
    margin-bottom: 30px;
    text-align: left; }

.sidebar {
    margin-top: 30px;
    padding-left: 30px;
    padding-right: 30px; }
.sidebar div.background + div {
    margin-top: 30px; }
.sidebar > div:last-of-type {
    margin-bottom: 30px; }
.sidebar > hr:last-of-type {
    display: none; }
@media screen and (min-width: 992px) {
    .sidebar {
        margin-top: 355px; }
    .sidebar div.background + div {
        margin-top: 80px; } }
.sidebar .background {
    background-color: #f8f8f8;
    position: absolute;
    width: calc(100% - 15px);
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    margin-bottom: 0 !important; }
@media screen and (max-width: 992px) {
    .sidebar .background {
        width: calc(100% - 30px);
        margin-left: 15px; } }
.sidebar hr {
    border-color: #999999;
    margin-top: 30px;
    margin-bottom: 30px;
    margin-left: 0;
    width: calc(100% - 15px); }
@media screen and (max-width: 992px) {
    .sidebar hr {
        margin-left: 15px;
        width: calc(100% - 30px); } }
.sidebar .row .col-xs-12 .heading-icon {
    vertical-align: top;
    display: inline-block;
    margin-right: 10px;
    font-size: 30px;
    width: 30px;
    height: 30px;
    color: #999999;
    float: left; }
.sidebar .row .col-xs-12 h3 {
    display: inline-block;
    margin-bottom: 25px;
    margin-top: 0;
    color: #999999;
    float: left; }
.sidebar .row .col-xs-12 a {
    margin-bottom: 10px;
    display: inline-block;
    float: left;
    clear: left; }

.ansprechpartnersuche h1 {
    margin-bottom: 20px; }

.ansprechpartnersuche .form {
    background-color: #f8f8f8;
    padding: 20px; }
.ansprechpartnersuche .form strong {
    margin-bottom: 0px;
    color: #23358a;
    font-size: 18px; }
.ansprechpartnersuche .form .form-group {
    margin-bottom: 20px; }
.ansprechpartnersuche .form .form-group label {
    white-space: nowrap; }
.ansprechpartnersuche .form .form-group button {
    float: right;
    width: 100%;
    padding-left: 14px;
    padding-right: 14px; }
@media screen and (min-width: 1200px) {
    .ansprechpartnersuche .form .form-group button {
        margin-top: 115px; } }

.ansprechpartnersuche .suchergebnis {
    word-break: normal; }
.ansprechpartnersuche .suchergebnis address {
    cursor: pointer;
    margin-top: 20px;
    margin-bottom: 10px; }
.ansprechpartnersuche .suchergebnis address:hover {
    color: #25a4d9; }
.ansprechpartnersuche .suchergebnis .contact-name {
    margin-top: 20px; }
.ansprechpartnersuche .suchergebnis .icon-keyboard_arrow_left {
    margin-right: 5px; }
.ansprechpartnersuche .suchergebnis .contact {
    line-height: 30px;
    font-weight: bold; }
.ansprechpartnersuche .suchergebnis .contact img {
    margin-right: 5px; }
.ansprechpartnersuche .suchergebnis .contact-button {
    margin-top: 10px;
    display: inline-block; }

.ansprechpartnersuche .map-container {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    margin-top: 55px;
    margin-bottom: 20px; }
.ansprechpartnersuche .map-container .map {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0; }

.ansprechpartnersuche .karriere form {
    margin-top: 30px; }
.ansprechpartnersuche .karriere form strong {
    margin-bottom: 20px;
    color: #23358a;
    font-size: 18px; }
.ansprechpartnersuche .karriere form label {
    white-space: nowrap; }

.ansprechpartnersuche .karriere .people {
    margin-top: 55px; }

.ansprechpartnersuche .karriere .overview {
    color: #23358a;
    font-weight: lighter; }

.ansprechpartner .people {
    margin-top: 55px; }

.ansprechpartner .overview {
    color: #23358a;
    font-size: 16px;
    font-weight: lighter; }
@media screen and (max-width: 992px) {
    .ansprechpartner .overview {
        font-size: 12px; } }

.ansprechpartner .mobile-sub-nav li[data-ansprechpartnergruppe] {
    display: none; }

.ansprechpartner .mobile-sub-nav li[data-ansprechpartnergruppe="1"]:first-child,
.ansprechpartner .mobile-sub-nav li[data-ansprechpartnergruppe="1"] + li[data-group] + [data-ansprechpartnergruppe="2"],
.ansprechpartner .mobile-sub-nav li[data-ansprechpartnergruppe="2"] + li[data-group] + [data-ansprechpartnergruppe="3"],
.ansprechpartner .mobile-sub-nav li[data-ansprechpartnergruppe="3"] + li[data-group] + [data-ansprechpartnergruppe="4"],
.ansprechpartner .mobile-sub-nav li[data-ansprechpartnergruppe="4"] + li[data-group] + [data-ansprechpartnergruppe="5"],
.ansprechpartner .mobile-sub-nav li[data-ansprechpartnergruppe="5"] + li[data-group] + [data-ansprechpartnergruppe="6"],
.ansprechpartner .mobile-sub-nav li[data-ansprechpartnergruppe="6"] + li[data-group] + [data-ansprechpartnergruppe="7"],
.ansprechpartner .mobile-sub-nav li[data-ansprechpartnergruppe="7"] + li[data-group] + [data-ansprechpartnergruppe="8"],
.ansprechpartner .mobile-sub-nav li[data-ansprechpartnergruppe="8"] + li[data-group] + [data-ansprechpartnergruppe="9"],
.ansprechpartner .mobile-sub-nav li[data-ansprechpartnergruppe="9"] + li[data-group] + [data-ansprechpartnergruppe="10"],
.ansprechpartner .mobile-sub-nav li[data-ansprechpartnergruppe="10"] + li[data-group] + [data-ansprechpartnergruppe="11"],
.ansprechpartner .mobile-sub-nav li[data-ansprechpartnergruppe="11"] + li[data-group] + [data-ansprechpartnergruppe="12"],
.ansprechpartner .mobile-sub-nav li[data-ansprechpartnergruppe="12"] + li[data-group] + [data-ansprechpartnergruppe="13"],
.ansprechpartner .mobile-sub-nav li[data-ansprechpartnergruppe="13"] + li[data-group] + [data-ansprechpartnergruppe="14"],
.ansprechpartner .mobile-sub-nav li[data-ansprechpartnergruppe="14"] + li[data-group] + [data-ansprechpartnergruppe="15"],
.ansprechpartner .mobile-sub-nav li[data-ansprechpartnergruppe="15"] + li[data-group] + [data-ansprechpartnergruppe="16"],
.ansprechpartner .mobile-sub-nav li[data-ansprechpartnergruppe="16"] + li[data-group] + [data-ansprechpartnergruppe="17"],
.ansprechpartner .mobile-sub-nav li[data-ansprechpartnergruppe="17"] + li[data-group] + [data-ansprechpartnergruppe="18"],
.ansprechpartner .mobile-sub-nav li[data-ansprechpartnergruppe="18"] + li[data-group] + [data-ansprechpartnergruppe="19"],
.ansprechpartner .mobile-sub-nav li[data-ansprechpartnergruppe="19"] + li[data-group] + [data-ansprechpartnergruppe="20"] {
    display: list-item; }

.news img.main {
    margin-bottom: 20px;
    width: 100%; }

.news .more-news {
    margin-top: 20px; }
.news .more-news hr {
    margin-bottom: 40px; }

.news .news-row {
    margin-bottom: 10px; }
.news .news-row .image img {
    width: 100%;
    margin-bottom: 10px; }

.karriere-faq .questions {
    margin-top: 55px; }

.karriere-faq .overview {
    color: #23358a;
    font-size: 16px;
    font-weight: lighter; }
@media screen and (max-width: 992px) {
    .karriere-faq .overview {
        font-size: 12px; } }

.newsletter .form {
    margin-top: 55px; }
.newsletter .form form h2 {
    margin-bottom: 10px; }
.newsletter .form form label {
    margin-top: 10px; }
.newsletter .form form button {
    width: 100%;
    padding-right: 35px; }
.newsletter .form .tipp {
    margin-top: 30px;
    margin-bottom: 30px; }

.katalog .form {
    margin-bottom: 55px; }
.katalog .form label {
    margin-top: 10px; }
.katalog .form button {
    width: 100%; }
.katalog .form button.send {
    margin-bottom: 50px; }
.katalog .form .tipp {
    margin-top: 30px;
    margin-bottom: 30px; }

.katalog .formular input[type="checkbox"] {
    margin-top: 20px; }

.katalog .formular .background {
    background-color: #f8f8f8;
    padding: 20px; }
.katalog .formular .background h3 {
    margin-top: 0px; }
.katalog .formular .background .upload {
    margin-top: 10px; }
.katalog .formular .background .upload img {
    margin-right: 10px; }

.katalog .formular button {
    margin-top: 30px; }

.katalog .auswahl .katalog-liste {
    margin-top: 40px; }

.katalog .auswahl .catalog-frame img {
    width: 100%;
    margin-bottom: 10px; }

.katalog .auswahl .catalog-frame ul {
    padding-left: 0; }
@media screen and (max-width: 992px) {
    .katalog .auswahl .catalog-frame ul {
        padding-left: 18px; } }

.katalog .auswahl .catalog-frame input[type="checkbox"] {
    margin-top: 20px; }

@media screen and (min-width: 992px) {
    .katalog .auswahl .catalog-frame .remember {
        margin-left: -14px; } }

.katalog .auswahl .catalog-frame .remember label {
    font-weight: normal; }

.katalog .auswahl button {
    margin-top: 30px;
    width: 100%; }
.katalog .auswahl button span {
    font-size: 28px;
    margin-top: -5px;
    margin-right: -5px;
    vertical-align: middle;
    display: inline-block; }

.kontakt label {
    margin-top: 5px; }

.kontakt button {
    width: 100%;
    margin-top: 30px;
    margin-bottom: 30px; }

.kontakt label {
    margin-top: 15px; }

.kontakt textarea {
    min-height: 300px; }

.kontakt .tipp {
    margin-top: 30px; }

.mitarbeiter .employes .employe {
    margin-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px; }
.mitarbeiter .employes .employe img {
    width: 100%; }

.mitarbeiter .active {
    margin-bottom: 20px; }
.mitarbeiter .active .big-picture {
    padding-left: 10px;
    padding-right: 10px; }
.mitarbeiter .active .big-picture .mask {
    overflow: hidden;
    text-align: center; }
.mitarbeiter .active .big-picture .mask img {
    height: 345px; }
@media screen and (max-width: 992px) {
    .mitarbeiter .active .big-picture .mask img {
        width: 100%;
        height: auto; } }
.mitarbeiter .active .voice {
    height: 345px;
    padding-left: 10px;
    padding-right: 10px; }
.mitarbeiter .active .voice .background {
    height: 100%;
    background-color: #f8f8f8;
    padding: 20px;
    position: relative; }
.mitarbeiter .active .voice .background h2 {
    margin-bottom: 20px; }
.mitarbeiter .active .voice .background .plus {
    position: absolute;
    top: 0;
    right: 0; }

.schulung #formular label {
    margin-top: 5px; }

.schulung #formular button {
    margin-top: 30px;
    width: 100%; }

.schulung .detail button {
    width: 100%; }

.schulung #list .background {
    background-color: #f8f8f8;
    padding: 10px 20px 20px 20px; }
.schulung #list .background label {
    margin-top: 10px; }

.schulung #list .head {
    color: #25a4d9;
    font-size: 20px;
    padding: 30px 30px 0px 30px; }

.schulung #list hr {
    margin-top: 0;
    margin-bottom: 0; }

.schulung #list .schulungs-row {
    padding: 15px 30px; }
.schulung #list .schulungs-row:nth-child(even) {
    background-color: #f8f8f8; }

.schulung #list .controls {
    margin-top: 20px;
    text-align: center; }
.schulung #list .controls ul {
    margin-left: 10px;
    display: inline-block;
    list-style: none; }
.schulung #list .controls ul li {
    display: inline-block;
    margin-right: 10px;
    color: #333333; }
.schulung #list .controls ul li.active {
    color: #23358a;
    font-weight: bold;
    font-size: 16px; }

.search .count {
    margin-bottom: 50px; }

.search .search-result {
    margin-bottom: 10px; }
.search .search-result .title {
    text-decoration: underline;
    color: #23358a;
    font-size: 20px; }
.search .search-result a .icon-keyboard_arrow_right {
    margin-left: -8px; }

.search .controls {
    text-align: center; }
.search .controls ul {
    margin-left: 10px;
    display: inline-block;
    list-style: none; }
.search .controls ul li {
    display: inline-block;
    margin-right: 10px;
    color: #333333; }
.search .controls ul li.active {
    color: #23358a;
    font-weight: bold;
    font-size: 16px; }

.events .detail ul {
    padding-left: 15px;
    margin-bottom: 30px; }
.events .detail ul li {
    margin-bottom: 10px; }

.shop input[type="checkbox"] {
    margin-top: 20px; }

.shop label {
    margin-top: 10px; }

.shop .background {
    background-color: #f8f8f8;
    padding: 20px; }
.shop .background h3 {
    margin-top: 0px; }
.shop .background .upload {
    margin-top: 10px; }
.shop .background .upload img {
    margin-right: 10px; }

.shop .tipp {
    margin-top: 30px;
    margin-bottom: 30px; }

.shop button {
    margin-top: 30px;
    width: 100%; }
.shop button.login-button {
    width: auto;
    margin-bottom: 30px;
    background-color: #ee7219; }
@media screen and (max-width: 992px) {
    .shop button.login-button {
        width: 100%; } }
.shop button.send {
    margin-bottom: 50px; }

.stellenangebote .list .wrapper {
    background-color: #f8f8f8;
    border-radius: 10px;
    border: 1px solid #999999;
    padding: 10px;
    margin-top: 30px; }
.stellenangebote .list .wrapper .heading {
    padding: 5px;
    font-size: 20px;
    background-color: #25a4d9;
    color: #ffffff;
    border: 1px solid #999999; }
.stellenangebote .list .wrapper .scroll {
    height: 88px;
    padding: 5px;
    border: 1px solid #999999;
    background-color: #ffffff;
    overflow-y: scroll;
    margin-bottom: 10px; }
.stellenangebote .list .wrapper .scroll label {
    display: block; }
.stellenangebote .list .wrapper .refresh {
    font-size: 20px;
    color: #25a4d9; }

.stellenangebote .list .head {
    margin-top: 50px;
    color: #25a4d9;
    font-size: 20px;
    padding: 30px 30px 0px 30px; }

.stellenangebote .list hr {
    margin-top: 0;
    margin-bottom: 0; }

.stellenangebote .list .stellenangebot-row {
    padding: 15px 30px; }
.stellenangebote .list .stellenangebot-row:nth-child(even) {
    background-color: #f8f8f8; }

.stellenangebote .list .controls {
    margin-top: 20px;
    text-align: center; }
.stellenangebote .list .controls ul {
    margin-left: 10px;
    display: inline-block;
    list-style: none; }
.stellenangebote .list .controls ul li {
    display: inline-block;
    margin-right: 10px;
    color: #333333; }
.stellenangebote .list .controls ul li.active {
    color: #23358a;
    font-weight: bold;
    font-size: 16px; }

.stellenangebote .list .bonus {
    margin-top: 55px; }

.video #player .info {
    margin-top: 30px; }
.video #player .info ul {
    padding-left: 18px; }

.ansprechpartner-row {
    margin-bottom: 15px; }
.ansprechpartner-row div[class^="col-"]:first-child {
    padding-right: 0; }
.ansprechpartner-row img {
    margin-top: 25px;
    margin-bottom: 15px; }
.ansprechpartner-row img.contact-image {
    width: 100%; }
.ansprechpartner-row .phone {
    margin-top: 20px;
    margin-bottom: 20px; }
.ansprechpartner-row .phone img {
    margin-right: 5px;
    margin-top: 0px;
    margin-bottom: 0px; }

/* fix for video player play-button to fit to different screen sizes. */
@media screen and (max-width: 1200px) {
    span.play_image img {
        width: 136px;
        height: 136px; } }

@media screen and (max-width: 992px) {
    span.play_image img {
        width: 100px;
        height: 100px; } }

@media screen and (max-width: 768px) {
    span.play_image img {
        width: 80px;
        height: 80px; } }

/*# sourceMappingURL=main.css.map */

header .caruso-header-sonepar.col-xs-6 img{
    max-height: 80%;

}
header .caruso-header-sonepar.col-xs-6{
    text-align: right;

}