@font-face {
    font-family: 'PragmaticaWebExtraLight';
    src: url('../Fonts/PRG35__W.eot');
    src: local('Pragmatica Web ExtraLight'), local('PragmaticaWebExtraLight'), url('../Fonts/PRG35__W.woff') format('woff'),url('P../Fonts/RG35__W.ttf') format('truetype'), url('../Fonts/PRG35__W.svg#PragmaticaWeb-ExtraLight') format('svg');
    font-weight: 200;
    font-style: normal;
}

/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #838282;
}
html, body {
    min-height: 100%;
}


body {
    font-family: Helvetica, Arial, Verdana,sans-serif;
    /*line-height: 1.2em;*/
    width: 100%;
    font-size: 1em;
    margin-bottom:100px;
    color: #878686;
    color: #181716;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #878686;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

td {
    vertical-align: top; }


/* ===== Initializr Styles ==================================================
   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
   ========================================================================== */

body {
    /*font: 16px/26px Helvetica, Helvetica Neue, Arial;*/
    font-family: Helvetica, Arial, Verdana,sans-serif;
    line-height: 1.2em;
    width: 100%;
    font-size: 1em;
}

/*#topnav, #subnav,*/ .pageheader h1, .pageheader h2, .eye-catcher {
    font-family: "Helvetica Neue Light", "Helvetica Neue", "PragmaticaWebExtraLight", Helvetica, Arial, Verdana, sans-serif;
    font-weight: 200;
}

.wrapper {
    width: 94%;
    margin: 0 3%;
    overflow: hidden; }

/* ===================
    ALL: Orange Theme
   =================== */

.header-container {
    background: #2d476b url("../Images/Band-01.png") repeat-y center center;
    position: relative;
}

.header-container .wrapper {
    overflow: visible; }

.footer-container {
    padding: 1em 0;
    overflow: visible;
    font-size: 80%;
    color: #a2a1a1;
    /*border-top: 1px solid #878686;*/ }

.footer-container-fixed {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #fff;
    z-index: 1000;
}

/* ==============
    MOBILE: Menu
   ============== */

nav ul {
    margin: 0;
    padding: 0;
}

nav a {
    display: block;
    margin-bottom: 10px;
    padding: 15px 0;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
}

#bt-main-menu {
    display: block;
    text-align: center;
}

#bt-main-menu button {
    width: 43px;
    height: 39px;
    background: url(../Images/icon_bt-main-menu_bg.png) 2px 0 no-repeat;
    border: 0;
    content: "";
    /*-moz-box-sizing: border-box;*/
    position: relative;
    text-indent: -900em;
    background-image: none, url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40px" height="140px"><line fill="none" stroke="%23222222" stroke-width="2.5" x1="2.023" y1="12.216" x2="36.979" y2="12.216"/><line fill="none" stroke="%23222222" stroke-width="2.5" x1="2.023" y1="19.469" x2="36.979" y2="19.469"/><line fill="none" stroke="%23222222" stroke-width="2.5" x1="2.023" y1="26.541" x2="36.979" y2="26.541"/><line fill="none" stroke="%23222222" stroke-width="2.5" x1="2.023" y1="112.216" x2="36.979" y2="112.216"/><line fill="none" stroke="%23222222" stroke-width="2.5" x1="2.023" y1="126.541" x2="36.979" y2="126.541"/></svg>');
}

/*
#bt-main-menu button:after {
    background: none repeat scroll 0 0 #FFFFFF;
    box-shadow: 0 10px 0 #FFFFFF, 0 20px 0 #FFFFFF;
    content: "";
    height: 4px;
    position: absolute;
    top: 8px;
    left: 6px;
    width: 30px;
    overflow: hidden;
    -moz-box-sizing: border-box;
}
*/
#subnav {
    position: relative;
}
#sublogo {
    float: right;
    /*margin-top: 27px;*/
}
#sublogo a {
    display: block;
    width: 217px;
    height: 68px;
    background: url("../Images/SmartIntego_Logo.png") 0 0 no-repeat;
    background-image: none, url("../Images/SmartIntego_Logo.svg");
    text-indent: 250px;
    white-space: nowrap;
}
#subnav ul {
    display: none; }

#subsubnav {
    display: none;
    position:relative;
    float: none;}


/* ==============
    MOBILE: Main
   ============== */

.main {
    padding: 10px 0;
    border-top: 1px solid #878686;
    font-size: 90%;
}

.main aside {
    color: white;
    padding: 0px 5% 10px;
}

.main-container {
    margin-bottom: 60px;
}

/* ===============
    ALL: IE Fixes
   =============== */


/* ==========================================================================
   Author's custom styles
   ========================================================================== */


.pageheader {
    border-bottom: 1px solid #878686;
    margin-bottom: 1em;
}
.pageheader h1 {
    text-align: left;
    font-size: 40px;
    text-transform: none;
    width: 100%;
    font-weight: 100;
    letter-spacing: 1px;
    line-height: 1.2;
    margin-bottom: .25em;
}
.pageheader h2 {
    /*display: none;*/
    font-size: 14px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 200;
    margin-top: 0;
    margin-bottom: .5em;
}
h3 {
    margin: 1.5em 0 0;
    font-weight: normal;
    text-transform: uppercase;
    font-size: 1em;
    letter-spacing: 2px;
}
p {
    margin: 1.5em 0;
}
.img-scale {
    width: 100%;
}

#headline-page {
    padding: 20px 0;
    width: 100%;
    text-align: center; }

a {
    color: #181716;
    text-decoration: underline; }
a:hover {
    color: #0072a2;
}

h1 {
    margin: 0 auto;
    font-size: 1.4em;
    line-height: 1.4;
    text-align: center;
    font-weight: normal;
    text-transform: uppercase;
}
.eye-catcher {
    color: #0072a2;
    text-decoration: none;
    font-size: 50px;
    font-weight: 100;
}
.eye-catcher:hover {
    color: #181716;
}

#logo {
    display: block;
    margin: 15px 0 12px;
}
#logo a {
    display: block;
    width: 256px;
    height: 38px;
    background: url("../Images/simons-voss.png") 0 0 no-repeat;
    background-image: none, url("../Images/simons-voss.svg");
    overflow: hidden;
    text-indent: 300px;
    white-space: nowrap;
}


#subnav {
    font-size: 75%;
    line-height: 1.25;
    padding: 2.5em 0 2.25em;
    clear: right;}

#subnav ul {
    list-style: none;
    margin: 0;
    padding: 0; }

#subnav ul li {
        margin: 0; }

#subnav ul li a {
        /*color: #181716;*/
        letter-spacing: .1em;
        text-transform: uppercase;
        text-decoration: none; }

#subnav ul li a.active {
    font-weight: bold;
}

#subnav ul li a:hover {
    /*color: #5b5b5b;*/ }

#subsubnav {
    margin: 0 auto;
    height: 37px;
    overflow: hidden; }

#subsubnav ul:after{content:"\00a0";display:block;height:0;font:0/0 serif;clear:both;visibility:hidden;overflow:hidden;}
#subsubnav ul, #subsubnav ul li{display:block;list-style:none;padding:0;margin:0;line-height:normal;direction:ltr;}

#subsubnav ul {
    display: inline;
    float: right; }

#subsubnav ul li {
    float: left;
    margin: 0 10px;
    position: relative; }

#subsubnav ul li:last-child {
    margin-right: 0; }

#subsubnav ul li:first-child {
    margin-left: 0; }

#subsubnav ul li a {
    overflow: hidden;
    display: block; }

#subsubnav a {
    display: block;
    overflow:hidden;
    height: 37px;}

#subsubnav a span {
    display: none; }

#subsubnav a.ssn-transponder { width: 28px; background: url(../Images/tab-nav/transponder.png) 0 0 no-repeat; }
#subsubnav a.ssn-zylinder { width: 53px; background: url(../Images/tab-nav/zylinder.png) 0 0 no-repeat; }
#subsubnav a.ssn-software { width: 56px; background: url(../Images/tab-nav/computer.png) 0 0 no-repeat; }
#subsubnav a.ssn-programmierung { width: 41px; background: url(../Images/tab-nav/usb.png) 0 0 no-repeat; }
#subsubnav a.ssn-smartcard { width: 37px; background: url(../Images/tab-nav/smartcard.png) 0 0 no-repeat; }
#subsubnav a.ssn-mobile { width: 22px; background: url(../Images/tab-nav/mobile.png) 0 0 no-repeat; }

#subsubnav a.ssn-10 { width: 28px; background: url(../Images/tab-nav/transponder.png) 0 0 no-repeat; }
#subsubnav a.ssn-11 { width: 53px; background: url(../Images/tab-nav/zylinder.png) 0 0 no-repeat; }
#subsubnav a.ssn-12 { width: 56px; background: url(../Images/tab-nav/computer.png) 0 0 no-repeat; }
#subsubnav a.ssn-13 { width: 41px; background: url(../Images/tab-nav/usb.png) 0 0 no-repeat; }

#subsubnav a:hover {
    background-position: 0 -100px; }

#subsubnav a.active {
    background-position: 0 -100px; }

@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-devicepixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
    #subsubnav a.ssn-transponder { background: url(../Images/tab-nav/transponder2x.png) 0 0 no-repeat; background-size: 28px 150px; }
    #subsubnav a.ssn-zylinder { background: url(../Images/tab-nav/zylinder2x.png) 0 0 no-repeat; background-size: 53px 150px; }
    #subsubnav a.ssn-software { background: url(../Images/tab-nav/computer2x.png) 0 0 no-repeat; background-size: 56px 150px; }
    #subsubnav a.ssn-programmierung { background: url(../Images/tab-nav/usb2x.png) 0 0 no-repeat; background-size: 41px 150px; }
    #subsubnav a.ssn-smartcard { background: url(../Images/tab-nav/smartcard2x.png) 0 0 no-repeat; background-size: 37px 150px; }
    #subsubnav a.ssn-mobile { background: url(../Images/tab-nav/mobile2x.png) 0 0 no-repeat; background-size: 22px 150px; }

    #subsubnav a.ssn-10 { background: url(../Images/tab-nav/transponder2x.png) 0 0 no-repeat; background-size: 28px 150px; }
    #subsubnav a.ssn-11 { background: url(../Images/tab-nav/zylinder2x.png) 0 0 no-repeat; background-size: 53px 150px; }
    #subsubnav a.ssn-12 { background: url(../Images/tab-nav/computer2x.png) 0 0 no-repeat; background-size: 56px 150px; }
    #subsubnav a.ssn-13 { background: url(../Images/tab-nav/usb2x.png) 0 0 no-repeat; background-size: 41px 150px; }
}

#subsubnav a:hover {
    background-position: 0 -100px; }

#ssn-bt-left, #ssn-bt-right {
    position: absolute;
    background-color: #fff;
    cursor: pointer;
    width: 35px;
    height: 37px; }

#ssn-bt-left span, #ssn-bt-right span {
    display: none; }

#ssn-bt-left {
    display:none;
    background: #fff url(../Images/icon_cnt-bt-arrow-left.png) 0 2px no-repeat;
    left:0; }

#ssn-bt-right {
    display: none;
    background: #fff url(../Images/icon_cnt-bt-arrow.png) 5px 2px no-repeat;
    right: 0; }

@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-devicepixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
    #ssn-bt-left { background: #fff url(../Images/icon_cnt-bt-arrow-left.png) 0 2px no-repeat; background-size: 30px 30px; }
    #ssn-bt-right { background: #fff url(../Images/icon_cnt-bt-arrow.png) 5px 2px no-repeat; background-size: 30px 30px; }
}


.main-img {
    width:100%;
    overflow: hidden; }

.main-img-map-container {
    float:left;
    width:100%;
    position: relative;
    overflow: hidden; }

.img-scal-overlay {
    top: 50%;
    left: 50%;
    width: 230px;
    margin: auto 0;
    margin-left: -115px;
    margin-top: -30px;
    padding: 20px 0;
    position: absolute;
    display:block;
    color: #fff;
    font-size: 110%;
    line-height: 80%;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    background: url(../Images/bg-blue.png);}

.main-img-map {
    float: left;
    width: 180%;
    margin-left: -40%;
    position: relative; }

.main-img-map img {
    width: 100%;
    height: auto;
    margin-left: 0;
    display: block; }

a.img-scal-cross {
    height: 36px;
    width: 36px;
    position: absolute;
    display:block;
    background:url(../Images/cross-line.png) no-repeat; }

a.cross1{ top:62%; left:32%;}
a.cross2{ top:36%; left:42%;}
a.cross3{ top:30%; left:66%;}
a.cross4{ top:3%; left:69%;}

#content {
    padding: 10px 0; }

.content-headline {
    padding: 10px 0; }

.article {
    clear: both;
    padding: 10px 0; }

.article-media{
    padding: 0 0 10px 0;
    border-bottom: 1px solid #878686; }

#content .article-media, #content .article-gallery {
    margin-top: -10px; }

.article-gallery {
    padding: 0 0 30px 0; }

.two-col-left, .two-col-right {
    width: 100%;
    float: none;
    display: block; }

.two-col-left .article {
    padding-bottom: 0; }
.two-col-right .article {
    padding-top: 0; }

.two-col-left h1, .two-col-right h1 {
    width: auto;
    text-align: left; }

.service-navi {
    clear: both;
    margin: 30px 0;
    border-top: 1px solid #878686; }

.sn-collapse {
    margin-top: -1px;
    margin-bottom: 0;
    border-bottom: 1px solid #878686; }

.sn-collapse ul.sn-list, .sn-collapse ul li {
    border: 0 !important; }

.service-navi ul.sn-list {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important; }

.service-navi ul.sn-list li {
/*
    padding: 0 !important;
    border-bottom: 1px solid #878686;
*/
    }

.service-navi ul.sn-list li li {
    border-bottom: none; }

a.sn-bt {
    text-transform: uppercase;
    letter-spacing: .07em;
    line-height: 1.4em;
    cursor: pointer;
    text-decoration: none;
    font-size: 110%;
    /*color: #a2a1a1;*/
    padding: .5em 0 .5em 32px;
    display: block;
    position: relative;
}
a.sn-bt:before {
    position: absolute;
    left: 4px;
    top: .4em;
    content: "";
    width: 22px;
    height: 22px;
    display: block;
    background: #181716 url(../Images/list-icons.png) 0 0 no-repeat;
    background-image: none, url(../Images/list-icons.svg);
    border: 1px solid #fff;
}
a.sn-bt:hover:before {
    background-color: #0072a2;
}
@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-devicepixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
    a.sn-bt:after {
        position: absolute;
        left: 4px;
        top: .4em;
        background: transparent;
        content: "";
        display: block;
        width: 20px;
        height: 20px;
        margin-top: -2px;
        margin-left: -2px;
        border: 4px solid #fff;
        z-index: 100;
    }
}
.two-col-right .sn-list a, .two-col-left .sn-list a {
    letter-spacing: .07em; }

a.sn-head {
    font-size: 130%;
    text-transform: uppercase; }

a.sn-menu:before { background-position: 0 0; }
a.sn-menu-open:before {background-position: -22px 0; }
a.sn-cnfg:before { background-position: -44px 0; }
a.sn-pdf:before { background-position: -44px 0; }
a.sn-video:before { background-position: -66px 0; }
a.sn-link:before { background-position: -110px 0; }

.sn-menu-cnt {
    width: 95%;
    margin: 0 0 10px 5px; }

.sn-list .article {
    padding-top: 0;
    padding-left: 26px;
}

.sn-content {
    padding-bottom: 1px;}

.sn-content p {
    padding-left: 50px; }

div.sn-content-numb {
    position: relative;
    float: left;
    margin-top: 3px;
    font-size: 140%; }

div.cnt-button, div.cnt-bt-arrow {
    margin: 25px 0; }

div.cnt-button a {
    border: 1px solid #a2a1a1;
    color: #a2a1a1 ;
    letter-spacing:0.1em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 4px 10px 4px 32px;
    background: transparent url(../Images/icon_cnt-button.png) 8px 5px no-repeat; }

div.cnt-bt-arrow a {
    width: 30px;
    height: 30px;
    display: block;
    background: transparent url(../Images/icon_cnt-bt-arrow.png) 0 0 no-repeat; }

div.cnt-bt-arrow span {
    display: none; }

div.cnt-bt-arrow a:hover {
    background-position: 0 -100px; }

@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-devicepixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
    div.cnt-button a {
        background: transparent url(../Images/icon_cnt-button2x.png) 8px 5px no-repeat;
        background-size: 15px 15px; }
    div.cnt-bt-arrow a {
        background: transparent url(../Images/icon_cnt-bt-arrow2x.png) 0 0 no-repeat;
        background-size: 30px 30px; }
}

#footernav ul {
    letter-spacing:0.1em;
    /*float: right;*/
    margin: 0;
    padding: 0;
    list-style: none; }

#footernav ul li {
    margin-right: 20px;
    float:left; }
/*
#footernav ul li:first-child {
    margin-left: 0; }
*/
#footernav a {
    text-transform: uppercase;
    text-decoration: none;
    /*color: #181716;*/
    display: block;
    padding: 0; }

div.footer-container .two-col-right .article {
    padding-top: 0px; }


#lang-menu {
    position: relative;
    float: left;
    margin-right:20px;
}

.lang-menu-text {
    display: inline;}

.lang-menu-text a {
    /*color: #181716;*/
    padding: 1em 20px 8px 0;
    text-align:left;
    /*display: block;*/
    position: relative;
    text-decoration: none;
}

.lang-menu-arrow {
    width: 17px;
    height: 14px;
    background: #181716 url(../Images/list-icons.png) -88px -4px no-repeat;
    background-image: none, none;
    top: 1em;
    right: 0;
    position:absolute;
    z-index: 999;
    overflow: visible;
}
.lang-menu-arrow:before {
    position: absolute;
    content: "";
    display: block;
    top: -1px;
    left: -1px;
    width: 19px;
    height: 16px;
    background: url(../Images/list-icons.png) -88px -4px no-repeat;
    background-image: none, url(../Images/list-icons.svg);
}
.lang-menu-text a:hover .lang-menu-arrow {
    background-color: #0072a2;
}

#lang-items {
    margin-top: 8px;
    position: absolute;
    bottom: 2em;
    left: 0;
    background: #fff;
    padding: 20px;
    padding-bottom: 5px;
    margin-left: -20px;
    display: none; }

#lang-items ul {
    border-top: 1px solid #a2a1a1;
    letter-spacing:0.1em;
    margin: 0;
    padding: 0;
    list-style: none; }

#lang-items li {
    padding: 8px .5em 8px 0;
    border-bottom: 1px solid #a2a1a1; }

#lang-items a {
    /*color: #181716;*/
    text-transform: uppercase;
    text-decoration: none; }



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


#content .article ul, .sn-menu-cnt ul, #content ul {
    margin: 10px 0;
    padding-left: 0;
    margin-left: -20px;
    /*list-style-image: url(../Images/bullet_arrow.png);*/
    list-style: none;
}
#content ul {
    margin-left: 0;
}

#content .article ul li, .sn-menu-cnt ul li, #content li {
    padding: 0 0 .5em 1.55em;
    background: url("../Images/bullet_arrow.png") .1em .45em no-repeat;
}



#content .sn-list li {
    padding: 0;
    background: none;
}

.image-container {
    margin: .5em 0;
}
.image-subline {
    margin-top: .5em;
}

img.cnt-img-scal-50 {
    width: 100%;
    height: auto;
    margin-left: 0;
    display: block; }

img.cnt-img-scal-center {
    margin: 0 auto !important; }

img.img-scal {
    width: 100%;
    height: auto;
    /*margin-left: -40%;*/
    display: block; }

.callbacks img {
    width: 180% !important;
    height: auto;
    margin-left: -40% !important; }


.upper {
    text-transform: uppercase; }

.upper-wide {
    letter-spacing:0.1em;
    text-transform: uppercase; }

.upper-wide a {
    text-decoration: none; }

.noborder {
    border: none; }


#icons-bestandteile a {
    overflow: hidden;
    margin: 0 auto;
    display:block;
    width:207px;
    height:33px;
    background: url(../Images/Bestandteile-Icons.png) 0 0 no-repeat;
    background-size: 207px 83px; }

#icons-bestandteile a span {
    display: none; }

#icons-bestandteile a:hover {
    background-position: 0 -50px; }

@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-devicepixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
    #icons-bestandteile a {
        background: url(../Images/Bestandteile-Icons2x.png) 0 0 no-repeat;
        background-size: 207px 83px; }
}

/* -- Gallery FlexSlieder anpassungen ------------ */
.flexslider { overflow: hidden; }
div.flexslider .flex-control-nav { width: 102% !important; }
div.flexslider .flex-control-thumbs li img { width: 95% !important; }
div.flexslider .flex-direction-nav { display: none; } /* back/next button ausblenden */


/* ==========================================================================
   Media Queries
   ========================================================================== */



@media only screen and (min-width: 640px) { /* 480px */

/* ====================
    INTERMEDIATE: Menu
   ==================== */

    #topnav {
        float: right;}

    #start-header #topnav {
        margin-top: 50px !important; }

    #bt-main-menu {
        display: none; }

    /*#subnav {
        border-top: 1px solid #878686; }*/

    #subnav ul {
        display: block;
        /*position: absolute;*/
        left: 0;
        bottom: 2em;
    }
    #subnav ul.tobig {
        position: static;
    }

    #subsubnav {
        border-top: 0;
        float: right;}



/* ========================
    INTERMEDIATE: IE Fixes
   ======================== */

    nav ul li {
        display: inline;
    }

    .oldie nav a {
        margin: 0 0.7%;
    }

/* ====================
   ==================== */

    #logo {
        position: absolute; }

    #topnav {
        display: block !important;
        float: right !important;}

    #subsubnav {
        margin-top: -37px;
        display: block !important; }


    img.img-scal {
        width: 100%;
        height: auto;
        margin-left: 0 !important;
        display: block; }

    img.cnt-img-scal-50 {
        width: 50%;
        height: auto;
        margin-left: 0;
        display: block; }

    .main-img-map {
        width: 100%;
        margin-left: 0;
        display: block; }

}

@media only screen and (min-width: 768px) {

/* ====================
    WIDE: CSS3 Effects
   ==================== */


/* ============
    WIDE: Menu
   ============ */

    #topnav {
        display: block !important;
        float: right !important; }

/*    #subnav {
        border-top: 1px solid #878686; }*/

    #subsubnav {
        margin-top: -37px; }

    h1 {
        width: 70%; }


/* ============
    WIDE: Main
   ============ */

a.sn-bt {
    letter-spacing: .1em; }

.sn-menu-cnt {
    width: 75%; }

/* ====================
    Content
    ==================== */

    /* 2-spaltiger Content */
    .two-col-left {
        float: left;
        width: 48%;
        margin: 0; }

    .two-col-right {
        float: right;
        width: 48%;
        margin: 0; }

    .two-col-left .article {
        padding-bottom: 10px; }
    .two-col-right .article {
        padding-top: 10px; }

    .img-scal-overlay {
        width: 390px;
        margin-left: -195px;
        margin-top: -50px;
        padding: 30px 0;
        font-size: 130%;
        line-height: 80%; }

    .callbacks img {
        width: 100% !important;
        margin-left: 0 !important; }



    #icons-bestandteile a {
        width:414px;
        height:65px;
        background: url(../Images/Bestandteile-Icons.png) 0 0 no-repeat; }

    #icons-bestandteile a:hover {
        background-position: 0 -100px; }

    @media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-devicepixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
        #icons-bestandteile a {
            background: url(../Images/Bestandteile-Icons2x.png) 0 0 no-repeat;
            background-size: 414px 165px; }
    }

    #content .article-gallery{
        margin-top: 1.5em; }
    /*
    #footernav ul {
        float: right; }
    */
    #footernav a {
        padding: 0; }

    div.footer-container .two-col-right .article {
        padding-top: 10px; }

}




@media only screen and (min-width: 1024px) {
    .wrapper {
        width: 980px;
        margin: 0 auto; }
}




@media only screen and (min-width: 1140px) {

/* ===============
    Maximal Width
   =============== */

    .wrapper {
        width: 1026px; /* 1140px - 10% for margins */
        margin: 0 auto;
    }

}



/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }
/*
    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }
*/
    /*
     * Don't show links for images, or javascript/internal links
     */

     /*
    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }
    */

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }

    #logo {
        margin: 20px 0 0 0;
        position: relative; }

    .main {
        border: 0; }

    #topnav, #bt-main-menu, #subnav, .footer-container {
        display: none; }

    .sn-menu-cnt {
        display: block !important; }

    .flex-control-nav {
        list-style: none;
    }

}


/* ------------------------------------------------------------- */
/* ------ Plugin Colorbox --------------------------------- */
/* ------ custom settings ---------------------------------- */
/* ------------------------------------------------------------- */

#cboxContent {
    margin-top: 0 !important;
    font-size: 90%; }

.infobox-hidden {
    display: none; }

.infobox {
    background:#fff;
    padding: 10px 50px 10px 10px !important; }

.infobox .infobox-img {
    float:left;
    width:50%; }

.infobox .infobox-txt {
    float:left;
    width:50%; }

#cboxClose {
    background: url(../Images/ic_cancel.png) right center no-repeat !important;
    width: 26px !important;
    height: 26px !important;
    margin: 10px !important;
    top: 0 !important; }

@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-devicepixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
    #cboxClose {
        background: url(../Images/ic_cancel_2x.png) right center no-repeat !important;
        background-size: 26px 26px !important; }
}

/* ------------------------------------------------------------- */
/* ------ Formular --------------------------------- */
/* ------------------------------------------------------------- */

.form-button-2 {
    background-color: #181716;
    border-color: #181716;
    color: #FFFFFF;
    display: inline-block;
    height: auto;
    margin: 0 10px 0 0;
    padding: 8px 13px;
}
.form-button-3 {
    background-color: #181716;
    border-color: #181716;
    color: #FFFFFF;
    display: inline-block;
    height: auto;
    margin: 0 10px 0 0;
    padding: 8px 13px;
}

.form-button-2-center {
    text-align: center;
    height: auto !important;
}

.form-button-reset-2 {
    background-color: #FFFFFF;
    border: 1px solid #878686;
    color: #878686;
    display: inline-block;
    height: auto;
    margin: 0 10px 0 0;
    padding: 8px 13px;
}

.form-button-2, .form-button-reset-2 {
    border: 1px solid #878686;
    font-size: 115%;
    height: 36px;
    letter-spacing: 0.1em;
    text-decoration: none;
    text-transform: uppercase;
}

/* Haendlerportrait */

.main2 {
    padding: 10px 0;
    border-top: 1px solid #878686;
}

.main2 p.bodytext {
    margin: 0 0 1em 0;
}

div.imgcol {
    float: left;
    font-size: 80%;
    padding: 5px 5px 5px 5px;
    border-bottom: 1px solid #d9d9d9;
}
div.imgcol .image {
    height: 155px;
    display: table-cell;
    position: relative;
    text-align: center;
    padding-top:10px;
    /* vertical-align: middle; */
}

div.imgcol img {
    /* vertical-align: middle; */
    display:inline;
}

#partnerlogos {
    position: relative;
    width: 99.9%;
    margin: 50px 0;
    border-left: 1px solid #d9d9d9;
    border-top: 1px solid #d9d9d9;
}

#partnerlogos .partnerimage {
    position: relative;
    width: 16.66%;
    float: left;
    height: 110px;
    text-align: center;
    vertical-align: middle;
    display: table;
}

#partnerlogos .partnerimage div.partnerimagewrapper {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 100%;
    min-width: 110px;
    height: 110px;
    border-right: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
}

#partnerlogos .partnerimage img {
    display: inline !important;
    height: auto;
    max-height: 120px;
    max-width:  120px;
    margin: 5px;
}

#partnerlogos .partnerimagepattern,
#partnerlogos .partnerimagepattern2,
#partnerlogos div.partnerpattern,
#partnerlogos div.partnerpattern2 {
    position: absolute;
    background: #fff;
    width: 21px;
    height: 10px;
    z-index: 999;
}

#partnerlogos div.partnerpattern {
    top: -5px;
    right: -10px;
}

#partnerlogos div.partnerpattern2 {
    bottom: -5px;
    left: -10px;
}

#partnerlogos .partnerimage div.partnerimagepattern {
    top: -5px;
    left: -10px;
}

#partnerlogos .partnerimage div.partnerimagepattern2 {
    bottom: -5px;
    right: -10px;
}

@media only screen and (max-width: 730px) {
    #partnerlogos .partnerimage {
        width: 19.9% !important;
    }
}
@media only screen and (max-width: 620px) {
    #partnerlogos .partnerimage {
        width: 24.9% !important;
    }
}
@media only screen and (max-width: 510px) {
    #partnerlogos .partnerimage {
        width: 33.3% !important;
    }
}
@media only screen and (max-width: 400px) {
    #partnerlogos .partnerimage {
        width: 49.9% !important;
    }
}







#headerbar {
    background: #fff;
    min-height: 65px;
}

.allegion {
    float: right;
    margin: 19px 0 0;
}
.allegion a {
    background: url("../Images/allegion_brand.jpg") 0 0 no-repeat;
    display: block;
    width: 190px;
    height: 20px;
    text-indent: 200px;
    overflow: hidden;
    background-size: contain;
}

.footer-container .allegion {
    margin: 0;
}

@media only screen and (max-width: 52em) {
    #lang-menu,
    #footernav ul li {
        float: none;
    }
    #footernav ul li {
        margin-top: .55em;
    }
    #footernav ul a {
        display: inline;
    }
}

@media screen and (max-height: 42em){
    .footer-container-fixed {
        position: static;
    }
    body,
    .main-container {
        margin-bottom: 0;
    }
    #supersized {
        margin: 0;
    }
}

@media only screen and (max-width: 480px) {
    #headerbar .allegion {
        float: none;
        padding-bottom: 12px;
        border-bottom: 1px solid #888;
    }
    #logo a,
    #headerbar .allegion a {
        margin: 0 auto;
    }
}