@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('../font/font/open-sans-v29-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('../font/font/open-sans-v29-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../font/font/open-sans-v29-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('../font/font/open-sans-v29-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('../font/font/open-sans-v29-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../font/font/open-sans-v29-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/*font-family: 'Helvetica Inserat'*/
/*font-family: 'Helvetica Inserat Pro Roman'*/

/**********************************************
	Global
**********************************************/



/*Add your own styles here:

@color c2c9e2 - very ligt blue
@color 8799c4 - light blue
@color 466daa - middle blue
@color 004c93 - dark blue
@color 1f476c - Logo blau?
*/


.fixfloat 				{ clear: both; float: none; height: 0; font-size: 0; width: 0; line-height: 0px; }
.clear 					{ clear: both; }
.clearleft 				{ clear: left; }
.clearright 			{ clear: right; }
.invisible 				{ visibility: hidden; display: none; }
.nopadding 				{ padding: 0 !important; }
.nopadding-top 			{ padding-top: 0 !important; }
.nopadding-right		{ padding-right: 0 !important; }
.nopadding-bottom		{ padding-bottom: 0 !important; }
.nopadding-left			{ padding-left: 0 !important; }
.nomargin 				{ margin: 0 !important; }
.nomargin-top			{ margin-top: 0 !important; }
.nomargin-right			{ margin-right: 0 !important; }
.nomargin-bottom		{ margin-bottom: 0 !important; }
.nomargin-left			{ margin-left: 0 !important; }
.noborder				{ border:0 none !important; }
.noborder-top			{ border-top: none !important; }
.noborder-right			{ border-right: none !important; }
.noborder-bottom		{ border-bottom: none !important; }
.noborder-left			{ border-left: none !important; }
.align-left				{ text-align: left !important; }
.align-right			{ text-align: right !important; }
.align-center			{ text-align: center !important; }
.float-left				{ float: left !important; }
.float-right			{ float: right !important; }
.hidden					{ visibility: hidden; }
.invisible				{ height: 0; }
.smaller 				{ font-size:90%;}
.clickable 				{ cursor:pointer; }


.spacer-3,
.spacer-5,
.spacer-10,
.spacer-20,
.spacer-30,
.spacer-40,
.spacer-50 {
    font-size: 0;
    clear: both;
    float: none;
}
.spacer	   { height: 20px; }
.spacer-3  { height: 3px; }
.spacer-5  { height: 5px; }
.spacer-10 { height: 10px; }
.spacer-20 { height: 20px; }
.spacer-30 { height: 30px; }
.spacer-40 { height: 40px; }
.spacer-50 { height: 50px; }

.push-bottom-3  { margin-bottom: 3px; }
.push-bottom-5  { margin-bottom: 5px; }
.push-bottom-10 { margin-bottom: 10px; }
.content .push-bottom-20,
.push-bottom-20 { margin-bottom: 20px; }
.push-bottom-30 { margin-bottom: 30px; }
.push-bottom-40 { margin-bottom: 40px; }
.push-bottom-50 { margin-bottom: 50px; }


.push-left-3  { margin-left: 3px; }
.push-left-5  { margin-left: 5px; }
.push-left-10 { margin-left: 10px; }
.content .push-left-20,
.push-left-20 { margin-left: 20px; }
.push-left-30 { margin-left: 30px; }
.push-left-40 { margin-left: 40px; }
.push-left-50 { margin-left: 50px; }

.push-right-3  { margin-right: 3px; }
.push-right-5  { margin-right: 5px; }
.push-right-10 { margin-right: 10px; }
.push-right-15 { margin-right: 15px; }
.content .push-right-20,
.push-right-20 { margin-right: 20px; }
.push-right-30 { margin-right: 30px; }
.push-right-40 { margin-right: 40px; }
.push-right-50 { margin-right: 50px; }

a:active {
    outline: none;
}
:focus {
    -moz-outline-style: none;
}

* {
    outline: none;
}

a::-moz-focus-inner,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: none;
}

/*::selection { background: #812588; }*/
/*input::selection {  background: #812588; }*/

img {
    border: none;
}

.cover {
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.cover-horizontal,
.coverlogo,
.coverlogo-horizontal {
    -o-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center;
}

.cover-vertical,
.coverlogo-vertical {
    -o-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -webkit-background-size: auto 100%;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center center;
}

.rounded-corners {
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    -ms-border-radius:4px;
    -o-border-radius:4px;
    border-radius:4px;
}

.lazyBg {
    position: relative;
}
.lazyBg::before {
    width: 40px;
    height: 40px;
    content: ' ';
    display: inline-block;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% -50%);
    -webkit-transform: translate(-50% -50%);
    background-color: #333;
    border-radius: 100%;
    -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
    animation: sk-scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
    0% { -webkit-transform: scale(0) }
    100% {
        -webkit-transform: scale(1.0);
        opacity: 0;
    }
}

@keyframes sk-scaleout {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    } 100% {
          -webkit-transform: scale(1.0);
          transform: scale(1.0);
          opacity: 0;
      }
}

.wbr {
    -ms-word-break: break-all;
    word-break: break-all;

    /* Non standard for webkit */
    word-break: break-word;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

/**********************************************
	Fonts
**********************************************/

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 1.5em;
}

.footer,
.topaddress {
    font-size: 14px;
}

.content  .swiper-container .global-title h2 {
    font-size: 50px;
}
.content  .swiper-container .global-title p {
    font-size: 24px;
}

[class^="icon-"].no-margin-left:before, [class*=" icon-"].no-margin-left:before {
    margin-left: 0;
}

.leftsubmenu menu ul.list li.headline {
    font-weight: 600;
    font-size:16px;
}

.leftsubmenu .dropdown button {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.1;
}


/**********************************************
	Links
**********************************************/

a {
    color: #1f476c;
    text-decoration: none;
}

a:focus, a:hover {
    color: #8799c4;
    text-decoration: underline;
}
/**********************************************
	Header
**********************************************/

.topaddress {
    height: 36px;
    background-color: #ffffff;
    color: #1f476c;
    border-bottom: 1px solid rgba(255,255,255,0.25);
    box-shadow: 2px 1px 3px rgba(0,0,0,0.5);
}

.topaddress a {
    color: #1f476c;
    line-height: 36px;
}

.topaddress a:hover,
.topaddress a:focus{
    text-decoration: none;
}

header ul.contact,
header ul.konto {
    list-style: none;
    margin: 0;
    padding: 0;
}

.right-vertical-line:before,
.topaddress ul.contact>li+li:before,
.topaddress ul.konto>li+li:before {
    padding: 0 5px;
    color: #1f476c;
    content: "|";
}

.header-content {
    padding-top: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255,255,255,0.25);
    /*height: 102px;*/
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 39;
    background-color: #ffffff;
    background-color: rgba(255,255,255,0.75);
}

.header-content ul.contact {
    margin-top:4px;
}
.header-content ul.contact li {
    display: block;
    color: #1f476c;
}

header h1 {
    margin-top: 0;
}
header h1 a {
    background-image: url(/local/media/_img/logo/wp_westermann-logo.svg);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: auto 100%;
    width: 265px;
    height: 99px;
    margin: 0;
    display: block;
}

header h1 span {
    display: none;
}

header .navbar {
    margin-bottom: 0;
}

.menu-social span {
    display: inline-block;
    margin-right:5px;
}

.nav-thumb {
    display: block;
    width: 96px;
    height: 64px;
    float: left;
    margin: 0 10px 10px 0;
}

#affixtop.affix,
#affixtop.affix-top {
    width: 100%;
    display: block;
}

#affixtop.affix-top {
    position: absolute;
    top:-46px;
    opacity: 0;
}

#affixtop.affix {
    top: 0px;
    z-index: 40;
    opacity: 0.95;
    filter: alpha(opacity=95);
    -webkit-transition: opacity 0.4s ease-in-out;
    transition: opacity 0.4s ease-in-out;
    -webkit-perspective: 1000px;
    -webkit-backface-visibility: hidden;
}

#affixtop .logo {
    background-image: url(/local/media/_img/logo/wp_westermann-logo.svg);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: auto 100%;
    width: 90px;
    height: 32px;
    margin: 2px 0 0 0;
    display: inline-block;
}

/**********************************************
	Content
**********************************************/

.content section.maincontent {
    padding: 40px 0 40px 0;
}

.content .swiper-container {
    position: relative;
}

.content  .swiper-container .global-title {
    position: absolute;
    width: 100%;
    bottom: 20%;
    color: #79b533;
    font-family: Roboto, 'Open Sans', sans-serif;
    font-weight: 700;
}

.content  .swiper-container .slide2 .global-title {
    bottom: 20%;
}

.content  .swiper-container .global-title p,
.content  .swiper-container .global-title h2 {
    background-color: #fff;
    background-color: rgba(255,255,255,0.75);
    display: inline-block;
    color: #1f476c;
    padding: 10px;
    margin: 0;
}

.content  .swiper-container .colorvers p,
.content  .swiper-container .colorvers h2 {
    background-color: #1f476c;
    background-color: rgba(31,71,108,0.75);
    color: #fff;
}

.content  .swiper-container .colordark p,
.content  .swiper-container .colordark h2 {
    background-color: #000;
    background-color: rgba(0,0,0,0.75);
    color: #fff;
}

.content .swiper-container .bgimage {
    background-position: center bottom;
    min-height:750px;
    max-height:850px;
}


.subpage .content .swiper-container .bgimage {
    background-position: center bottom;
    min-height:400px;
    max-height:450px;
}

.content  .swiper-container .slide2 .global-title {
    text-align: left;
}

section.product-placement {
    padding: 0 0 0 0;
}

.content .textcontent ul {
    list-style-image: url(/local/media/_img/_d/dot.svg);
    padding-left: 20px;
}

.content .textcontent ul li {
    list-style-image: url(/local/media/_img/_d/dot.svg);
    padding: 0 0 0 3px;
}

#gmap{
    width: 100%;
    height: 570px;
}

/**********************************************
	Footer
**********************************************/

.footer {
    min-height: 200px;
    background-color: #1f476c;
    padding: 20px 0 20px 0;
    color: #fff;
}

.bottomfooter a,
.footer a {
    color: #fff;
}

.footer .nav>li>a{
    padding: 3px 0 3px 0;
}

.footer .nav>li>a:focus, .footer .nav>li>a:hover {
    text-decoration: underline;
    background-color: transparent;
}

.bottomfooter {
    border-top: 1px dashed #f1f1f1;
    background-color: #1f476c;
}
.bottomfooter p {
    margin-top: 10px;
    color: #ffffff;
}

.footer h5 {
    font-size: 18px;
    margin-top: 0;
}

.footer .helptext p {
    margin-bottom:16px;
}

.footer .news ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer .news li {
    margin: 0 0 10px 0 !important;
}

.footer .news li {
    padding: 0 0 10px 0;
    margin: 10px 0 10px 0;
    line-height: 21px;
    border-bottom: 1px dashed #f1f1f1;
}


/**********************************************
	RESPONSIVE
**********************************************/

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
@media only screen and (max-width: 420px) {
    .content .swiper-container .global-title h2 {
        font-size: 20px;
    }
}

/* iphone 6 height*/
@media only screen and (min-height: 667px) {
    .content .swiper-container .bgimage {
        min-height:667px;
        max-height:700px;
    }
}
/* iphone 6 plus height*/
@media only screen and (min-height: 736px) {
    .content .swiper-container .bgimage {
        min-height:736px;
        max-height:800px;
    }
}

/* ipad height*/
@media only screen and (min-height: 768px) {
    .content .swiper-container .bgimage {
        min-height:768px;
        max-height:800px;
    }
}

@media only screen and (max-width: 767px) {

}


@media only screen and (min-width: 420px) and (max-width: 767px) {

}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {

    .content .swiper-container .global-title h2 {
        font-size: 40px;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {

}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

}

/* Very large devices (large desktops, 1600px and up) */
@media (min-width: 1600px) {

}

/* Super large devices (large desktops, 2000px and up) */
@media (min-width: 2000px) {

}