/**
 * --- --- --- --- --- --- --- --- --- --- --- --- --- ---
 * style.css
 *
 * goenningersamen.de
 * basic styling (add reset.css before and navigation.css and sites.css afterwards)
 *
 * written by wagnerwagner.de
 * --- --- --- --- --- --- --- --- --- --- --- --- --- ---
 */

/**
 * --- --- --- --- --- --- --- --- --- --- --- --- --- ---
 * TYPO
 * --- --- --- --- --- --- --- --- --- --- --- --- --- ---
 */

html{
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  	font-smoothing: antialiased;
   	text-rendering: optimizeLegibility;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and (min-device-pixel-ratio: 1.25),
only screen and (min-resolution: 200dpi),
only screen and (min-resolution: 1.25dppx){
	html{
		-webkit-font-smoothing: subpixel-antialiased;
     	font-smoothing: subpixel-antialiased;
   	}
}

body{
	/* reset settings */
    color: #000000;
    background: #FEFEFE;
    font: 400 1em sans-serif;
    text-align: left;
}

/* BASICS FONTS AND COLORS */

body{font-family: "Fira Sans", Helvetica, Arial, sans-serif;}

h5,
h6,
.main_content pre,
.main_content .pre,
footer pre,
footer .pre,
p,
.p,
li,
.li,
quote,
.quote,
blockquote,
.blockquote,
.sans_serif_font,
input{
    /* serif Font */
   	font-family: "Fira Sans", Helvetica, Arial, sans-serif;
	/* extended font-settings */
	-moz-font-feature-settings: "onum=1, tnum=1, zero=1, kern=1, liga=1";
	-moz-font-feature-settings: "onum" 1, "tnum" 1, "zero" 1, "kern" 1, "liga" 1;
	-webkit-font-feature-settings: "onum" 1, "tnum" 1, "zero" 1, "kern" 1, "liga" 1;
	font-feature-settings: "onum" 1, "tnum" 1, "zero" 1, "kern" 1, "liga" 1;
}

h1,
h2,
h3,
h4,
.serif_font,
.deco_font,
.main_content .ce_text:first-child > p:first-child::first-letter,
.main_content .dropcap p:first-child::first-letter{font-family: serif;}

h1,
h2,
h3,
h4,
.serif_font,
.deco_font,
.main_content .ce_text:first-child > p:first-child::first-letter,
.main_content .dropcap p:first-child::first-letter{
    /* sabs-serif Font */
	font-family: "Vollkorn", Georgia, serif;
	/* extended font-settings */
	-moz-font-feature-settings: "onum=1, tnum=1, zero=1, kern=1, liga=1";
	-moz-font-feature-settings: "onum" 1, "tnum" 1, "zero" 1, "kern" 1, "liga" 1;
	-webkit-font-feature-settings: "onum" 1, "tnum" 1, "zero" 1, "kern" 1, "liga" 1;
	font-feature-settings: "onum" 1, "tnum" 1, "zero" 1, "kern" 1, "liga" 1;
}

#wrapper{
    color: #282828;
    background: #FEFEFE;
	font-size: 18px;
	line-height: 28px;
	font-weight: 400;
} /* body-copy */

a{
	color: #282828;
	font-style: italic;
	text-decoration: none;
	border-bottom: 1px solid #99CC66;
	-webkit-transition-property: color;
    -moz-transition-property: color;
    -o-transition-property: color;
    -ms-transition-property: color;
    transition-property: color;
	-webkit-transition: color 102ms cubic-bezier(0.215,0.61,0.355,1);
	-ms-transition: color 102ms cubic-bezier(0.215,0.61,0.355,1);
	-o-transition: color 102ms cubic-bezier(0.215,0.61,0.355,1);
	-moz-transition: color 102ms cubic-bezier(0.215,0.61,0.355,1);
	transition: color 102ms cubic-bezier(0.215,0.61,0.355,1);
}

a:active,
a:focus,
a:visited{
    color: #282828;
    outline: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
}

.no-touchevents a:hover{color:rgb(103,154,52);}

/* BASICS SIZES, WEIGHTS, STYLES AND LINE-HEIGHTS */

h1{
	font-size: 62px;
	line-height: 72px;
	font-weight: 700;
    color: #202221;
}

h2{
	font-size: 40px;
	line-height: 52px;
	font-weight: 700;
    color: #202221;
}

h3{
	font-size: 32px;
	line-height: 44px;
	font-weight: 500;
    color: #303231;
}

h4{
	font-size: 28px;
	line-height: 40px;
	font-weight: 500;
    color: #303231;
}

h5{
	font-size: 22px;
	line-height: 36px;
	font-weight: 600;
    color: #303231;
}

h6{
	font-size: 16px;
	line-height: 30px;
	font-weight: 500;
    color: #303231;
	text-transform: uppercase;
}

.main_content pre,
.main_content .pre,
footer pre,
footer .pre,
quote,
.quote,
blockquote,
.blockquote{
	font-size: 28px;
   	line-height: 38px;
	font-style: italic;
   	font-weight: 300;
    color: #404241;
}

b,
.b,
strong,
.strong{font-weight: 700;}

i,
.i{font-style: italic;}

.small_type,
.small_type p,
.mod_search .relevance{
	font-size: 16px;
	line-height: 24px;
    color: #505251;
}

.small_type b,
.small_type p .b,
.small_type strong,
.small_type p .strong{
    font-weight: 600;
    color: #303231;
}

.tiny_type,
.tiny_type p{
	font-size: 15px;
	line-height: 22px;
    color: #606261;
}

.tiny_type b,
.tiny_type p .b,
.tiny_type strong,
.tiny_type p .strong{
    font-weight: 600;
    color: #404241;
}

/* BLOCKS */

.main_content .ce_text,
.main_content .ce_headline,
.main_content .ce_table{
    max-width: 1150px;
    margin: 0 auto;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 0 0 250px;
	display: block;
	position: relative;
}

h1,
h2,
h3,
.main_content pre,
.main_content .pre,
footer pre,
footer .pre,
quote,
.quote,
blockquote,
.blockquote{
    max-width: 900px;
    display: block;
}

h4,
h5,
h6,
p{max-width: 650px;}

.small_type,
.small_type p,
.tiny_type,
.tiny_type p{max-width: 500px;}

/* Tables */
.main_content .ce_table h4{}

.ce_table table{
	width: 100%;
	max-width: 650px;
    display: block;
    padding-bottom: 12px;
}

.ce_table table tbody{
	width: 100%;
    display: block;
}

.ce_table tr{
	width: 100%;
	max-width: 700px;
	display: block;
	padding: 8px 0;
}

.ce_table td{
	padding: 4px 0;
}

.ce_table td:first-child{
    padding: 4px 12px;
	margin: 0 16px 0 0;
	background: #F2F2F2;
	float: left;
}

/* Lists */
.ce_text > ul{
	width: 100%;
	max-width: 650px;
	padding: 12px 0;
}

.ce_text > ul li{
	list-style-type: disc;
	list-style-position: inside;
}

/* ADDITIONAL ELEMENTS */

input,
select{
	font-size: 16px;
	height: 48px;
	line-height: 48px;
}

button,
.button,
.button_style,
input[type="button"],
.dropdowns input[value="Suchen"],
header .shop_navigation .mod_customnav .mod_form .formbody input.submit{
    font-size: 15px;
    text-align: center;
	text-transform: uppercase;
	text-decoration: none;
    letter-spacing: 1px;
	border: none;
	position: relative;
	overflow: visible;
}

button:hover,
.button:hover,
.button_style:hover,
input[type="button"]:hover,
.dropdowns input[value="Suchen"]:hover{
	color: rgba(0,0,0,.42) !important;
	-moz-box-shadow: 0 0 0 1px rgba(0,0,0,.168) inset;
	-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.168) inset;
	box-shadow: 0 0 0 1px rgba(0,0,0,.168) inset;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
   	box-sizing:border-box;
   -moz-box-shadow:
      0px 1px 2px rgba(2,4,6,0.075),
      0px 2px 6px rgba(2,4,6,0.05),
      0px 5px 20px rgba(2,4,6,0.025);
   -webkit-box-shadow:
      0px 1px 2px rgba(2,4,6,0.075),
      0px 2px 6px rgba(2,4,6,0.05),
      0px 5px 20px rgba(2,4,6,0.025);
   box-shadow:
      0px 1px 2px rgba(2,4,6,0.075),
      0px 2px 6px rgba(2,4,6,0.05),
      0px 5px 20px rgba(2,4,6,0.025);
}


header .shop_navigation .mod_customnav .mod_form .formbody input.submit:hover{
	color: rgba(0,0,0,.48) !important;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
   	box-sizing:border-box;
}

/* Dots */
.ce_text > p:last-child:after,
.p_dot > *:last-child:after{
  	content: "";
  	width: 8px;
   	height: 8px;
   	display: block;
    margin: 32px auto 24px;
  	background: url(../ui/sprite_navigation.svg) top left no-repeat;
}

.no_dot > p:last-child:after,
.article_header *:last-child:after,
.article_meta *:last-child:after,
.article_footer *:last-child:after{display:none;}

/* Dropcaps */
.main_content .ce_text:first-child > p:first-child::first-letter,
.main_content .dropcap p:first-child::first-letter{
	float: left;
    font-size: 56px;
    line-height: 56px;
    display: block;
    font-weight: 700;
	padding: 0 10px 0 0;
}

.main_content .no_dropcap p:first-child::first-letter{
	float: none !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    padding: 0 !important;
}

/* HIGHLIGHTING */

::selection {
	background: #99CC66 !important;
   	color: #ffffff !important;
} /* text-selection in WebKit/Blink Browsers */

::-moz-selection {
 	background: #99CC66 !important;
   	color: #ffffff !important;
 } /* text-selection in Gecko Browsers */

p .highlight{
	padding: 2px 4px;
	background: rgba(255,94,84,0.48);
}
.error{color: #FF5E54;}

/* Specific Typo Elements */

header ul.level_2,
header .checkout_steps{font-size: 16px;}

header ul.level_1 > .active > a,
header ul.level_1 > .active > span,
header ul.level_1 > .trail > a,
header ul.level_1 > .trail > span,
header ul.level_1 > .trail ul .active > a,
header ul.level_1 > .trail ul .active > span,
header ul.level_1 > .active ul .active > a,
header ul.level_1 > .active ul .active > span,
.visible_search header .mod_customnav .level_1 > li.first > a,
.visible_login header .mod_customnav .level_1 > li:nth-child(2) > a,
.visible_bag header .mod_customnav .level_1 > li.last > a{color:rgb(103,154,52);}

header .toggle_nav_container{font-weight: 500;}
header .shop_navigation pre{display:inline-block;}

/* RESPONSIVE */

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

	.main_content pre,
	.main_content .pre,
	quote,
	.quote,
	blockquote,
	.blockquote{margin: 0 0 0 -125px;}

}

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

	.main_content h1,
	.main_content h2,
	.main_content h3,
	.main_content h4,
	.main_content h5,
	.main_content h6{text-align: center;}

	.main_content .ce_text > h1,
	.main_content .ce_text > h2,
	.main_content .ce_text > h3,
	.main_content .ce_text > h4,
	.main_content .ce_text > h5,
	.main_content .ce_text > h6,
	.main_content .ce_text > p,
	.main_content .ce_text > ul,
	.main_content .ce_text > table,
	.main_content .ce_table > * {
		max-width: 650px;
		margin: 0 auto;
		text-align: left;
	}

	.main_content .text_right h3{text-align: left;}

	.main_content pre,
	.main_content .pre,
	footer pre,
	footer .pre,
	quote,
	.quote,
	blockquote,
	.blockquote{
		max-width: 763px;
		margin: 0 auto;
	}

	.main_content .ce_text,
	.main_content .ce_headline,
	.main_content .ce_table{padding: 0 64px;}

}

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

    h1{
        font-size: 56px;
        line-height: 64px;
    }
    h6{
        font-size: 19px;
        line-height: 28px;
    }
    .small_type,
    .small_type p,
	.mod_search .relevance{
        font-size: 17px;
        line-height: 25px;
    }
    .tiny_type,
    .tiny_type p{
        font-size: 16px;
        line-height: 24px;
    }
    .tiny_type b,
    .tiny_type p .b,
    .tiny_type strong,
    .tiny_type p .strong{font-weight: 500;}
}

/* Switch to mobile here */

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

	header ul.level_2{font-size: 18px;}

}

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

    h1{
        font-size: 44px;
        line-height: 56px;
    }
    h2{
        font-size: 36px;
        line-height: 48px;
    }

    h3{
        font-size: 28px;
        line-height: 38px;
    }
    h4{
        font-size: 24px;
        line-height: 32px;
        font-weight: 600;
    }
    h5{
        font-size: 20px;
        line-height: 32px;
    }
    h6{
        font-size: 18px;
        line-height: 30px;
    }
    .main_content pre,
    .main_content .pre,
    footer pre,
    footer .pre,
    quote,
    .quote,
    blockquote,
    .blockquote{
        font-size: 24px;
        line-height: 32px;
    }

}

@media only screen and (max-width: 750px){
    .main_content .ce_text,
	.main_content .ce_headline,
	.main_content .ce_table{padding: 0 48px;}
}

@media only screen and (max-width: 650px){
   	.main_content .ce_text,
	.main_content .ce_headline,
	.main_content .ce_table{padding: 0 32px;}
}

@media only screen and (max-width: 550px){
    .main_content .ce_text,
	.main_content .ce_headline,
	.main_content .ce_table{padding: 0 24px;}
}

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

    #wrapper{
        font-size: 17px;
        line-height: 26px;
    }
    h1{
        font-size: 30px;
        line-height: 40px;
    }
    h2{
        font-size: 26px;
        line-height: 36px;
    }
    h3{
        font-size: 24px;
        line-height: 34px;
    }
    h4{
        font-size: 20px;
        line-height: 28px;
    }
    h5{
        font-size: 19px;
        line-height: 28px;
    }
    h6{
        font-size: 17px;
        line-height: 26px;
    }
    .main_content pre,
    .main_content .pre,
    footer pre,
    footer .pre,
    quote,
    .quote,
    blockquote,
    .blockquote{
        font-size: 18px;
        line-height: 26px;
    }
    .small_type,
    .small_type p,
	.mod_search .relevance{
        font-size: 16px;
        line-height: 24px;
    }
    .tiny_type,
    .tiny_type p{
        font-size: 15px;
        line-height: 22px;
    }
    .tiny_type b,
    .tiny_type p .b,
    .tiny_type strong,
    .tiny_type p .strong{font-weight: 600;}

    .main_content .ce_text:first-child > p:first-child::first-letter,
    .main_content .dropcap p:first-child::first-letter{
        font-size: 52px;
        line-height: 52px;
    }

    .main_content .ce_text,
	.main_content .ce_headline,
	.main_content .ce_table{padding: 0 16px;}

}

/* PADDING */

.main_content h4{padding: 0.25em 0;}

h5{padding: 0.455em 0 0;}

h6{padding: 0.625em 0 0;}

.main_content pre,
.main_content .pre,
footer pre,
footer .pre,
quote,
.quote,
blockquote,
.blockquote{padding: 1.1em 0;}

p{padding: 0.55em 0;}

/**
 * --- --- --- --- --- --- --- --- --- --- --- --- --- ---
 * BASIC UI-ELEMENTS
 * --- --- --- --- --- --- --- --- --- --- --- --- --- ---
 */

/* LOADING-BAR */

.pace{
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.pace-inactive{display: none;}

.pace .pace-progress{
	background: rgb(103,154,52);
    position: fixed;
    z-index: 2000;
    top: 0;
    right: 100%;
    width: 100%;
    height: 5px;
	border-top: 1px solid rgba(0,0,0,0.023);
	border-bottom: 1px solid rgba(0,0,0,0.023);
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
   	box-sizing:border-box;
    -webkit-box-shadow: 0 0 6px -1px rgba(0,0,0,0.23);
    -moz-box-shadow: 0 0 6px -1px rgba(0,0,0,0.23);
    box-shadow: 0 0 6px -1px rgba(0,0,0,0.23);
}

@media only screen and (max-width: 860px){
    .pace .pace-progress{height: 6px;}
}

@media only screen and (max-width: 500px){
    .pace .pace-progress{height: 8px;}
}

/* FORMS, INPUTS AND BUTTONS */

form{
	max-width: 650px;
	margin: 0 auto;
}

label{
    display: table;
    cursor: text;
}

/*reset inputs */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill,
input::-moz-focus-inner,
input:-moz-focusring,
input::-moz-focus-outer{
	background: none;
	background-color: transparent;
    background: #ff0000;
	border-width: 0;
	border: none;
	outline-width: 0;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
input:-webkit-autofill{-webkit-box-shadow: 0 0 0px 1000px #FF0000 inset;}

input,
select{
	width: 100%;
	display: block;
    border-radius: 0;
	padding: 0px 16px;
	background: #ff0000;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
	background: none;
	background: transparent;
	border-width: 0;
	border: none;
	outline-width: 0;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

header input{background: rgba(254,254,254,0.25);}
header input:hover{background: rgba(254,254,254,0.48);}
header input:-webkit-autofill{-webkit-box-shadow: 0 0 0px 1000px #FEFEFE inset;}

.main_content input,
.main_content select{background: rgba(182,170,150,0.25);}
.main_content input:hover,
.main_content select:hover{background: rgba(182,170,150,0.48);}
.main_content input:-webkit-autofill,
.main_content select:-webkit-autofill{-webkit-box-shadow: 0 0 0px 1000px #B6AA96 inset;}

input.submit,
button,
.button,
input[type="button"],
.button_style,
.dropdowns input[value="Suchen"]{
	font-style: normal;
	width: auto;
	display: table;
    padding: 0px 16px;
    margin: 8px 0 0;
    height: 40px;
    line-height: 40px;
    border-radius: 3px;
	outline: none;
	cursor: pointer;
}

input:focus{outline:none;}

input.green_button,
button.green_button,
a.green_button{
	color: #FFFFFF;
	background: #99CC66;
}

input.green_button:hover,
button.green_button:hover,
a.green_button:hover{
	color: #FFFFFF;
	background: #99CC66;
}

input.red_button,
button.red_button,
a.red_button{
	color: #FFFFFF;
	background: #FF5E54;
}

input.red_button:hover,
button.red_button:hover,
a.red_button:hover{
	color: #FFFFFF;
	background: #FF5E54;
}

input.brown_button,
button.brown_button,
a.brown_button,
.dropdowns input[value="Suchen"]{
	color: #FFFFFF;
	background: #B6AA96;
}

input.brown_button:hover,
button.brown_button:hover,
a.brown_button:hover,
.dropdowns input[value="Suchen"]:hover{
	color: #FFFFFF;
	background: #B6AA96;
}

input.neutral_button,
button.neutral_button,
a.neutral_button{
	background: #F0F0F0;
}

input.neutral_button:hover,
button.neutral_button:hover,
a.neutral_button:hover{
	background: #F0F0F0;
}

input[type="checkbox"],
input[type="radio"]{
	width: 20px;
	height: 20px;
  	position: relative;
	padding: 3px;
    border-radius: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
	background: rgba(219,213,204,0.5);
	border: 1px solid rgba(0,0,0,0.4);
    cursor: pointer;
	-moz-box-shadow:
		0 0 1px #ccc,
		inset 0 1px 2px rgba(0,0,0,.2);
	-webkit-box-shadow:
		0 0 1px #ccc,
		inset 0 1px 2px rgba(0,0,0,.2);
	box-shadow:
		0 0 1px #ccc,
		inset 0 1px 2px rgba(0,0,0,.2);
}

input[type="checkbox"]:after,
input[type="radio"]:after{
	content: '';
	width: 10px;
	height: 10px;
	display: block;
    border-radius: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
	border: 1px solid rgba(0,0,0,0.1);
  	position: absolute;
  	top: 4px;
	left: 4px;
  	background: rgba(0,0,0,0.04);
  	transition: all .1s;
}

input[type="checkbox"]:hover,
input[type="radio"]:hover{
	background: rgba(219,213,204,0.5);
}

input[type="checkbox"]:hover:after,
input[type="radio"]:hover:after{
	background: rgba(0,0,0,0.4);
}

.error input[type="checkbox"],
.error input[type="radio"]{
	background: #FF5E54;
	border: 1px solid rgba(0,0,0,0.4);
}

input[type="checkbox"]:checked,
input[type="radio"]:checked{
	background: #99CC66;
	border: 1px solid rgba(0,0,0,0.4);
}

input[type="checkbox"]:checked:after,
input[type="radio"]:checked:after{
  	background: rgba(0,0,0,0.4);
}

a.button_style{display: inline-block;}

/* IMAGES */

figure{position: relative;}

img{
	width: 100%;
	height: auto;
	display: block;
}

.ce_image{
	width: 100%;
	height: auto;
	display: block;
}

.image_container > a:before,
.ce_image:after{
	content: "";
 	width:24px;
   	height:24px;
   	display:block;
 	position:absolute;
	z-index: 3;
 	top:12px;
 	right:12px;
 	background:rgba(254, 255, 253, 0.2);
 	-webkit-border-radius:50%;
 	-moz-border-radius:50%;
 	-ms-border-radius:50%;
 	-o-border-radius:50%;
 	border-radius:50%;
}

.image_container{
	width: 100%;
	height: auto;
	display: block;
}

.image_container:before{
	content: "";
 	width: 100%;
	height: 100%;
	display: block;
 	position: absolute;
 	-webkit-transform: translate(8px, 8px);
 	-moz-transform: translate(8px, 8px);
 	-ms-transform: translate(8px, 8px);
 	-o-transform: translate(8px, 8px);
 	transform: translate(8px, 8px);
 	background: url(../ui/diagonal_lines_brown.png) repeat;
}

.image_container img{
   	width: 100%;
   	height: auto;
   	position: relative;
}

.image_container:after{
	content: "";
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	background: url(../ui/noisy_texture.png) center center repeat;
	border: 1px solid rgba(0,0,0,0.1);
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
   	box-sizing: border-box;
}

/* LINK-IMAGES */


.image_container > a,
.formbody > a{
	text-decoration: none;
    border-bottom: none !important;
}

footer .image_container > a{
	width: 100%;
	height: 100%;
	display: block;
	position: relative;
	z-index: 5;
	cursor: pointer;
	background: url("../ui/noisy_texture.png") center center repeat;
}

a > .ce_image{position: relative;}
a > .ce_image:after,
.image_container > a:after{
    content: "";
    position: absolute;
    width: 25%;
	height: auto;
    padding-bottom: 25%;
    display: block;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background-color: #99CC66;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.15), 0px 5px 15px rgba(0,0,0,0.1), 0px 10px 40px rgba(0,0,0,0.05);
    -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.15), 0px 5px 15px rgba(0,0,0,0.1), 0px 10px 40px rgba(0,0,0,0.05);
    box-shadow: 0px 2px 4px rgba(0,0,0,0.15), 0px 5px 15px rgba(0,0,0,0.1), 0px 10px 40px rgba(0,0,0,0.05);
    opacity: 0;
    -webkit-transition: opacity 123ms cubic-bezier(0.215,0.61,0.355,1);
    -ms-transition: opacity 123ms cubic-bezier(0.215,0.61,0.355,1);
    -o-transition: opacity 123ms cubic-bezier(0.215,0.61,0.355,1);
    -moz-transition: opacity 123ms cubic-bezier(0.215,0.61,0.355,1);
    transition: opacity 123ms cubic-bezier(0.215,0.61,0.355,1);
}
a:hover > .ce_image:after,
.image_container > a:hover:after{opacity: 1;}

/**
 * --- --- --- --- --- --- --- --- --- --- --- --- --- ---
 * CORE-ELEMENTS
 * --- --- --- --- --- --- --- --- --- --- --- --- --- ---
 */

html,
body{
	width: 100%;
    overflow-x: hidden;
}

section,
article{
   	width: 100%;
   	position: relative;
   	overflow: hidden;
}

/* STANDARD IMAGE-GRID */

.ce_accordion,
.image_grid{
	width: 102%;
 	margin: -1%;
	font-size: 0;
	line-height: 0;
 	padding: 32px;
   	-moz-box-sizing: border-box;
   	-webkit-box-sizing: border-box;
   	box-sizing: border-box;
 	text-align: center;
}

@media only screen and (min-width: 1500px){
	.ce_accordion,
	.image_grid{padding: 48px;}
}

@media only screen and (max-width: 1000px){
	.ce_accordion,
	.image_grid{padding: 24px;}
}

@media only screen and (max-width: 500px){
	.ce_accordion,
	.image_grid{padding: 16px;}
}

.ce_accordion .ce_image,
.image_grid .ce_image{
	display:inline-block;
 	position: relative;
}

.ce_accordion .ce_image,
.image_grid .ce_image{margin: 1%;}

.ce_accordion .col_small,
.image_grid .col_small{width: 23%;}

.ce_accordion .col_basic,
.image_grid .col_basic{width: 31.25%;}

.ce_accordion .col_medium,
.image_grid .col_medium{width: 40%;}

.ce_accordion .col_large,
.image_grid .col_large{width: 56%;}

@media only screen and (max-width: 1120px){
	.ce_accordion .col_medium,
	.image_grid .col_medium{width: 56%;}
}

@media only screen and (max-width: 1000px){
	.ce_accordion .col_small,
	.image_grid .col_small{width: 31.25%;}
}

@media only screen and (max-width: 650px){
	.ce_accordion .ce_image,
	.image_grid .ce_image{
		margin: 24px 0;
		display: block;
		width: 100%;
	}
}

@media only screen and (max-width: 500px){
	.ce_accordion .ce_image,
	.image_grid .ce_image{margin: 16px 0;}
}

.ce_accordion .spacer,
.image_grid .spacer{
 	height: 0;
   	opacity: 0;
   	overflow: hidden;
}

@media only screen and (max-width: 1120px){
   	.ce_accordion .spacer,
 	.image_grid .spacer{display: none;}
   	.ce_accordion .invisible,
 	.image_grid .invisible{display: none !important;}
}

.col_full_width{width: 100%;}

.align_top{vertical-align: top;}
.align_middle{vertical-align: middle;}
.align_bottom{vertical-align: bottom;}

.ce_accordion .image_container,
.image_grid .image_container{position: relative;}

.ce_accordion .image_container img,
.image_grid .image_container img{
	width: 100%;
 	height: auto;
 	display: block;
 	position: relative;
}

.ce_accordion:after,
.image_grid:after{
    content: "";
	width: 1px !important;
    height: 1px !important;
    display: block !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    opacity: 0 !important;
    overflow: hidden;
    float: none;
    clear: both;
} /* clearfloat */

/* new bigger image style */
.ce_text.bigger_img > p{
	display: flex;
	align-content: center;
	justify-content: center;
}

.ce_text.bigger_img > p > a > img{
	width: auto;
	max-width: 84vw;
}

@media only screen and (max-width: 550px){
	.ce_text.bigger_img > p > a > img{
		max-width: calc(100vw - ( 2 * 24px ) );
	}
}

@media only screen and (max-width: 650px){
	.ce_text.bigger_img > p > a > img{
		max-width: calc(100vw - ( 2 * 32px ) );
	}
}

@media screen and (max-width: 1150px){
	.ce_text.bigger_img > p > a > img{
		max-width: calc(100vw - ( 2 * 64px ) );
	}
}

/* HERO-HEADER */

.hero_header{
    width: 100%;
    display: block;
    position: relative;
    overflow: hidden;
}

.pace-running .hero_header .scroll_down_button{display: none !important;}

.hero_header .scroll_down_button{
    width: 100%;
    height: 100%;
    display: block;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 3;
    overflow: hidden;
}

.hero_header .scroll_down_button div{
    width: 100%;
    bottom: -48px;
    position: fixed;
    will-change: auto;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    -o-transition-property: -o-transform, opacity;
    -ms-transition-property: -ms-transform, opacity;
    transition-property: transform, opacity;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    perspective: 1000;
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: -webkit-transform 402ms cubic-bezier(.36,1.01,.32,1.28), opacity 402ms cubic-bezier(0.215,0.61,0.355,1);
    -ms-transition: -ms-transform 402ms cubic-bezier(.36,1.01,.32,1.28), opacity 402ms cubic-bezier(0.215,0.61,0.355,1);
    -o-transition: -o-transform 402ms cubic-bezier(.36,1.01,.32,1.28), opacity 402ms cubic-bezier(0.215,0.61,0.355,1);
    -moz-transition: -moz-transform 402ms cubic-bezier(.36,1.01,.32,1.28), opacity 402ms cubic-bezier(0.215,0.61,0.355,1);
    transition: transform 402ms cubic-bezier(.36,1.01,.32,1.28), opacity 402ms cubic-bezier(0.215,0.61,0.355,1);
    opacity: 0.93;
    -webkit-transform: translate3d(0,-72px,0) rotate(0deg) scale3d(1,1,1);
    -moz-transform: translate3d(0,-72px,0) rotate(0deg) scale3d(1,1,1);
    -ms-transform: translate3d(0,-72px,0) rotate(0deg) scale3d(1,1,1);
    -o-transform: translate3d(0,-72px,0) rotate(0deg) scale3d(1,1,1);
    transform: translate3d(0,-72px,0) rotate(0deg) scale3d(1,1,1);
}

.hero_header .scroll_down_button a{
	width: 48px;
	height: 48px;
	display: block;
    margin: 0 auto;
	line-height: 48px;
    text-align: center;
	position: relative;
	-webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
 	-webkit-box-shadow:
        0px 2px 4px rgba(0,0,0,0.15),
        0px 5px 15px rgba(0,0,0,0.1),
        0px 10px 40px rgba(0,0,0,0.05);
 	-moz-box-shadow:
        0px 2px 4px rgba(0,0,0,0.15),
        0px 5px 15px rgba(0,0,0,0.1),
        0px 10px 40px rgba(0,0,0,0.05);
 	box-shadow:
        0px 2px 4px rgba(0,0,0,0.15),
        0px 5px 15px rgba(0,0,0,0.1),
        0px 10px 40px rgba(0,0,0,0.05);
}

.hero_header .scroll_down_button div:hover a{
 	-webkit-box-shadow:
        0px 2px 4px rgba(0,0,0,0.4),
        0px 5px 15px rgba(0,0,0,0.3),
        0px 10px 40px rgba(0,0,0,0.2);
 	-moz-box-shadow:
        0px 2px 4px rgba(0,0,0,0.4),
        0px 5px 15px rgba(0,0,0,0.3),
        0px 10px 40px rgba(0,0,0,0.2);
 	box-shadow:
        0px 2px 4px rgba(0,0,0,0.4),
        0px 5px 15px rgba(0,0,0,0.3),
        0px 10px 40px rgba(0,0,0,0.2);
}

/* IMAGE */

.hero_header .ce_image{
    width:100%;
    display: block;
   	-moz-box-sizing: border-box;
   	-webkit-box-sizing: border-box;
   	box-sizing: border-box;
   	overflow: hidden;
}

/* VIDEO */

.hero_header .ce_video{
    width:100%;
    height:100%;
    display: block;
    top: 0;
    left: 0;
    position: absolute;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
}

.touch .hero_header .ce_video{display: none;}

.ce_video > div:before{
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: .2;
    position: absolute;
    z-index: 2;
    background: url("../ui/diagonal_lines_brown.png") repeat;
}

.ce_video > div:after{
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 1;
    position: absolute;
    z-index: 1;
    background: url("../ui/noisy_texture.png") center center repeat;
}

.hero_header .ce_video video{
	position: absolute;
    right: 0;
    bottom: 0;
    width: auto;
    min-width: 100%;
    height: auto;
    min-height: 100%;
    background: #000;
    right: 50%;
    bottom: 50%;
    -webkit-transform: translate3d(50%,50%,0);
    -moz-transform: translate3d(50%,50%,0);
    -ms-transform: translate3d(50%,50%,0);
    -o-transform: translate3d(50%,50%,0);
    transform: translate3d(50%,50%,0);
}

/* Fullscreen Hero-Header */
@media only screen and (min-width: 765px) and (max-width: 1499px) and (max-aspect-ratio: 1768/1172) and (orientation: landscape),
only screen and (min-width: 1500px) and (max-aspect-ratio: 1832/932) and (orientation: landscape),
only screen and (min-height: 840px) and (orientation: landscape){
	.hero_header{
	   height: 100vh;
	   -moz-box-sizing: border-box;
	   -webkit-box-sizing: border-box;
	   box-sizing: border-box;
	   overflow: hidden;
	}
	.hero_header .ce_image,
	.hero_header .ce_video{
		height: 100%;
		padding-bottom: 56px;
	}
	.hero_header .ce_image > figure,
	.hero_header .ce_video > div{
		height: 100%;
    	position: relative;
		overflow: hidden;
	}
	.hero_header .ce_image img,
	.hero_header .ce_video video{
		position: absolute;
	  	right: 0;
	  	bottom: 0;
	  	width: auto;
	  	min-width: 100%;
	  	height: auto;
	  	min-height: 100%;
		right: 50%;
	  	bottom: 50%;
	  	-webkit-transform:translate3d(50%,50%,0);
	  	-moz-transform:translate3d(50%,50%,0);
	  	-ms-transform:translate3d(50%,50%,0);
	  	-o-transform:translate3d(50%,50%,0);
	  	transform:translate3d(50%,50%,0);
	}
	.hero_header .scroll_down_button div{
		bottom: 24px;
		position: absolute;
	}
	.hero_header:after{
		content:"";
		width: 100%;
		height: 56px;
		display: block;
		bottom: 0;
		position: absolute;
		background: #FFFFFF;
	}
}

@media only screen and (max-height: 700px) and (min-width: 765px) and (max-width: 1499px) and (max-aspect-ratio: 1768/1172) and (orientation: landscape),
only screen and (max-height: 700px) and (min-width: 1500px) and (max-aspect-ratio: 1832/932) and (orientation: landscape){
	.hero_header .ce_image,
	.hero_header .ce_video{padding-bottom: 40px;}
	.hero_header .scroll_down_button div{bottom: -8px;}
	.hero_header:after{height: 40px;}
}

@media only screen and (orientation: portrait),
only screen and (max-height: 600px){
    .touch .hero_header .scroll_down_button,
    .no-touchevents .hero_header .scroll_down_button{display: none;}
}

/* When no hero image */

.no-touchevents .main_content > .inside > article.first,
.no-touchevents .main_content > .inside > article:first-of-type,
.no-touchevents .main_content > .inside > .mod_article.first,
.no-touchevents .main_content > .inside > .mod_article:first-child{padding-top: 152px;}

@media only screen and (max-width: 860px){
	.no-touchevents .main_content > .inside > article.first,
	.no-touchevents .main_content > .inside > article:first-of-type,
	.no-touchevents .main_content > .inside > .mod_article.first,
	.no-touchevents .main_content > .inside > .mod_article:first-child{padding-top: 0;}
}

@media only screen and (min-width: 1620px){
	.no-touchevents .main_content > .inside > article.first,
	.no-touchevents .main_content > .inside > article:first-of-type,
	.no-touchevents .main_content > .inside > .mod_article.first,
	.no-touchevents .main_content > .inside > .mod_article:first-child{padding-top: 88px;}
}

.no-touchevents .main_content .mod_article:first-child:not(.hero_header) > *:first-child:not(.mod_iso_productreader),
.no-touchevents .main_content article:first-child:not(.hero_header) > *:first-child:not(.mod_iso_productreader),
.no-touchevents .main_content .hero_header + article > *:first-child:not(.mod_iso_productreader),
.no-touchevents .main_content .hero_header + .mod_article > *:first-child:not(.mod_iso_productreader){padding-top: 3.125vw;}

/* STICKEM */

.stickem{
    max-width: 226px;
	top: 0;
	left: 0;
	position: absolute;
    z-index: 5;
	-moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* SHARE SEEDS */

.stickem .share_list{
    position: relative;
    margin: 40px 0;
}

.stickem .share_list li{
    width: 100px;
	height: 100px;
	line-height: 100px;
	display: inline-block;
    text-align: center;
    margin-right: 16px;
}

.share_directlink,
.share_facebook,
.share_twitter,
.share_mail{
    position: absolute;
    opacity: 0;
}

.stickem li.share_directlink{
	width: 62px;
	height: 62px;
	line-height: 62px;
	display: block;}

.share_directlink{
	top: -31px;
	left: 244px;
}
.share_facebook{
	top: -64px;
	left: 112px;
}
.share_twitter{
	top: 80px;
	left: 236px;
}
.share_mail{
	top: -38px;
	left: 360px;
}

.visible .share_directlink,
.visible .share_facebook,
.visible .share_twitter,
.visible .share_mail{
    z-index: auto;
    opacity: 1;
}

.stickem .share_list li a{
    width: 100%;
	height: 100%;
	display: block;
    position:relative;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    background: #FEFEFE url(../ui/diagonal_lines_green.png) repeat;
    -moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-style: normal;
	border: none;
}

.stickem .show_share_buttons a:after{
    content: "Teilen";
    width: 100%;
	height: 100%;
	display: block;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    top: 0;
	left: 0;
	position: absolute;
    color: #FFFFFF;
    background: #99CC66;
    -webkit-transition: opacity 316ms ease-in-out;
    -moz-transition: opacity 316ms ease-in-out;
    -ms-transition: opacity 316ms ease-in-out;
    -o-transition: opacity 316ms ease-in-out;
    transition: opacity 316ms ease-in-out;
    opacity: 1;
}

.stickem .share_list li a:hover{opacity: 1;}

.stickem.visible .show_share_buttons a:after{opacity:0;}

.stickem .share_list .show_share_buttons:hover a{
 	-webkit-box-shadow:
        0px 2px 4px rgba(0,2,2,0.04),
        0px 5px 15px rgba(0,2,2,0.03),
        0px 10px 40px rgba(0,2,2,0.02);
 	-moz-box-shadow:
        0px 2px 4px rgba(0,2,2,0.04),
        0px 5px 15px rgba(0,2,2,0.03),
        0px 10px 40px rgba(0,2,2,0.02);
 	box-shadow:
        0px 2px 4px rgba(0,2,2,0.04),
        0px 5px 15px rgba(0,2,2,0.03),
        0px 10px 40px rgba(0,2,2,0.02);
}

.stickem.visible .share_list .show_share_buttons:hover a{
 	-webkit-box-shadow:
        0px 2px 4px rgba(0,2,2,0.03),
        0px 5px 15px rgba(0,2,2,0.02),
        0px 10px 40px rgba(0,2,2,0.01);
 	-moz-box-shadow:
        0px 2px 4px rgba(0,2,2,0.03),
        0px 5px 15px rgba(0,2,2,0.02),
        0px 10px 40px rgba(0,2,2,0.01);
 	box-shadow:
        0px 2px 4px rgba(0,2,2,0.03),
        0px 5px 15px rgba(0,2,2,0.02),
        0px 10px 40px rgba(0,2,2,0.01);
}

.stickem .share_list .share_directlink a{
    background: #99CC66;
    color: #FFFFFF;
}

.stickem .share_list .share_directlink:hover a{
 	-webkit-box-shadow:
        0px 2px 4px rgba(0,2,2,0.04),
        0px 5px 15px rgba(0,2,2,0.03),
        0px 10px 40px rgba(0,2,2,0.02);
 	-moz-box-shadow:
        0px 2px 4px rgba(0,2,2,0.04),
        0px 5px 15px rgba(0,2,2,0.03),
        0px 10px 40px rgba(0,2,2,0.02);
 	box-shadow:
        0px 2px 4px rgba(0,2,2,0.04),
        0px 5px 15px rgba(0,2,2,0.03),
        0px 10px 40px rgba(0,2,2,0.02);
}

.stickem .share_list .share_facebook a{
    background: #3B5998;
    color: #FFFFFF;
}

.stickem .share_list .share_facebook:hover a{
 	-webkit-box-shadow:
        0px 2px 4px rgba(0,0,3,0.06),
        0px 5px 15px rgba(0,0,3,0.05),
        0px 10px 40px rgba(0,0,3,0.04);
 	-moz-box-shadow:
        0px 2px 4px rgba(0,0,3,0.06),
        0px 5px 15px rgba(0,0,3,0.05),
        0px 10px 40px rgba(0,0,3,0.04);
 	box-shadow:
        0px 2px 4px rgba(0,0,3,0.06),
        0px 5px 15px rgba(0,0,3,0.05),
        0px 10px 40px rgba(0,0,3,0.04);
}

.stickem .share_list .share_twitter a{
    background: #00ACED;
    color: #FFFFFF;
}

.stickem .share_list .share_twitter:hover a{
 	-webkit-box-shadow:
        0px 2px 4px rgba(1,1,2,0.06),
        0px 5px 15px rgba(1,1,2,0.05),
        0px 10px 40px rgba(1,1,2,0.04);
 	-moz-box-shadow:
        0px 2px 4px rgba(1,1,2,0.06),
        0px 5px 15px rgba(1,1,2,0.05),
        0px 10px 40px rgba(1,1,2,0.04);
 	box-shadow:
        0px 2px 4px rgba(1,1,2,0.06),
        0px 5px 15px rgba(1,1,2,0.05),
        0px 10px 40px rgba(1,1,2,0.04);
}

.stickem .share_list .share_mail a{
    background: #DD4B39;
    color: #FFFFFF;
}

.stickem .share_list .share_mail:hover a{
 	-webkit-box-shadow:
        0px 2px 4px rgba(3,0,0,0.06),
        0px 5px 15px rgba(3,0,0,0.05),
        0px 10px 40px rgba(3,0,0,0.04);
 	-moz-box-shadow:
        0px 2px 4px rgba(3,0,0,0.06),
        0px 5px 15px rgba(3,0,0,0.05),
        0px 10px 40px rgba(3,0,0,0.04);
 	box-shadow:
        0px 2px 4px rgba(3,0,0,0.06),
        0px 5px 15px rgba(3,0,0,0.05),
        0px 10px 40px rgba(3,0,0,0.04);
}

.stickem .share_list{
   	/* PREPARE ANIMATION OF CHILD */
   	display: inline-block;
   	-moz-backface-visibility: hidden;
 	-webkit-backface-visibility: hidden;
   	backface-visibility: hidden;
}

.share_directlink,
.share_facebook,
.share_twitter,
.share_mail{
/* PREPARE ANIMATION */
	will-change: auto;
  	-moz-box-sizing: content-box;
  	-webkit-box-sizing: content-box;
  	box-sizing: content-box;
	-webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    -o-transition-property: -o-transform, opacity;
    -ms-transition-property: -ms-transform, opacity;
    transition-property: transform, opacity;
   	-moz-transform-style: preserve-3d;
   	-webkit-transform-style: preserve-3d;
   	transform-style: preserve-3d;
   	-webkit-perspective: 1000;
   	-moz-perspective: 1000;
   	perspective: 1000;
}

.share_list:hover .share_directlink,
.share_list:hover .share_facebook,
.share_list:hover .share_twitter,
.share_list:hover .share_mail{will-change: transform, opacity;}

.share_directlink{
    -webkit-transform: translate3d(-225px,50px,0) rotate(0deg) scale3d(1,1,1);
    -moz-transform: translate3d(-225px,50px,0) rotate(0deg) scale3d(1,1,1);
    -ms-transform: translate3d(-225px,50px,0) rotate(0deg) scale3d(1,1,1);
    -o-transform: translate3d(-225px,50px,0) rotate(0deg) scale3d(1,1,1);
    transform: translate3d(-225px,50px,0) rotate(0deg) scale3d(1,1,1);
    -webkit-transition: -webkit-transform 346ms cubic-bezier(.645,.045,.355,1) 16ms, opacity 358ms cubic-bezier(.645,.045,.355,1) 4ms;
    -moz-transition: -moz-transform 346ms cubic-bezier(.645,.045,.355,1) 16ms, opacity 358ms cubic-bezier(.645,.045,.355,1) 4ms;
    -ms-transition: -ms-transform 346ms cubic-bezier(.645,.045,.355,1) 16ms, opacity 358ms cubic-bezier(.645,.045,.355,1) 4ms;
    -o-transition: -o-transform 346ms cubic-bezier(.645,.045,.355,1) 16ms, opacity 358ms cubic-bezier(.645,.045,.355,1) 4ms;
    transition: transform 346ms cubic-bezier(.645,.045,.355,1) 16ms, opacity 358ms cubic-bezier(.645,.045,.355,1) 4ms;
}

.share_facebook{
    -webkit-transform: translate3d(-112px,63px,0) rotate(0deg) scale3d(1,1,1);
    -moz-transform: translate3d(-112px,63px,0) rotate(0deg) scale3d(1,1,1);
    -ms-transform: translate3d(-112px,63px,0) rotate(0deg) scale3d(1,1,1);
    -o-transform: translate3d(-112px,63px,0) rotate(0deg) scale3d(1,1,1);
    transform: translate3d(-112px,63px,0) rotate(0deg) scale3d(1,1,1);
    -webkit-transition: -webkit-transform 316ms cubic-bezier(.645,.045,.355,1) 16ms, opacity 328ms cubic-bezier(.645,.045,.355,1) 4ms;
    -moz-transition: -moz-transform 316ms cubic-bezier(.645,.045,.355,1) 16ms, opacity 328ms cubic-bezier(.645,.045,.355,1) 4ms;
    -ms-transition: -ms-transform 316ms cubic-bezier(.645,.045,.355,1) 16ms, opacity 328ms cubic-bezier(.645,.045,.355,1) 4ms;
    -o-transition: -o-transform 316ms cubic-bezier(.645,.045,.355,1) 16ms, opacity 328ms cubic-bezier(.645,.045,.355,1) 4ms;
    transition: transform 316ms cubic-bezier(.645,.045,.355,1) 16ms, opacity 328ms cubic-bezier(.645,.045,.355,1) 4ms;
}

.share_twitter{
    -webkit-transform: translate3d(-236px,-80px,0) rotate(0deg) scale3d(1,1,1);
    -moz-transform: translate3d(-236px,-80px,0) rotate(0deg) scale3d(1,1,1);
    -ms-transform: translate3d(-236px,-80px,0) rotate(0deg) scale3d(1,1,1);
    -o-transform: translate3d(-236px,-80px,0) rotate(0deg) scale3d(1,1,1);
    transform: translate3d(-236px,-80px,0) rotate(0deg) scale3d(1,1,1);
    -webkit-transition: -webkit-transform 366ms cubic-bezier(.645,.045,.355,1) 16ms, opacity 378ms cubic-bezier(.645,.045,.355,1) 4ms;
    -moz-transition: -moz-transform 366ms cubic-bezier(.645,.045,.355,1) 16ms, opacity 378ms cubic-bezier(.645,.045,.355,1) 4ms;
    -ms-transition: -ms-transform 366ms cubic-bezier(.645,.045,.355,1) 16ms, opacity 378ms cubic-bezier(.645,.045,.355,1) 4ms;
    -o-transition: -o-transform 366ms cubic-bezier(.645,.045,.355,1) 16ms, opacity 378ms cubic-bezier(.645,.045,.355,1) 4ms;
    transition: transform 366ms cubic-bezier(.645,.045,.355,1) 16ms, opacity 378ms cubic-bezier(.645,.045,.355,1) 4ms;
}

.share_mail{
    -webkit-transform: translate3d(-360px,38px,0) rotate(0deg) scale3d(1,1,1);
    -moz-transform: translate3d(-360px,38px,0) rotate(0deg) scale3d(1,1,1);
    -ms-transform: translate3d(-360px,38px,0) rotate(0deg) scale3d(1,1,1);
    -o-transform: translate3d(-360px,38px,0) rotate(0deg) scale3d(1,1,1);
    transform: translate3d(-360px,38px,0) rotate(0deg) scale3d(1,1,1);
    -webkit-transition: -webkit-transform 386ms cubic-bezier(.645,.045,.355,1) 16ms, opacity 398ms cubic-bezier(.645,.045,.355,1) 4ms;
    -moz-transition: -moz-transform 386ms cubic-bezier(.645,.045,.355,1) 16ms, opacity 398ms cubic-bezier(.645,.045,.355,1) 4ms;
    -ms-transition: -ms-transform 386ms cubic-bezier(.645,.045,.355,1) 16ms, opacity 398ms cubic-bezier(.645,.045,.355,1) 4ms;
    -o-transition: -o-transform 386ms cubic-bezier(.645,.045,.355,1) 16ms, opacity 398ms cubic-bezier(.645,.045,.355,1) 4ms;
    transition: transform 386ms cubic-bezier(.645,.045,.355,1) 16ms, opacity 398ms cubic-bezier(.645,.045,.355,1) 4ms;
}

.visible .share_directlink,
.visible .share_facebook,
.visible .share_twitter,
.visible .share_mail{
    -webkit-transform: translate3d(0px,0px,0) rotate(0deg) scale3d(1,1,1);
    -moz-transform: translate3d(0px,0px,0) rotate(0deg) scale3d(1,1,1);
    -ms-transform: translate3d(0px,0px,0) rotate(0deg) scale3d(1,1,1);
    -o-transform: translate3d(0px,0px,0) rotate(0deg) scale3d(1,1,1);
    transform: translate3d(0px,0px,0) rotate(0deg) scale3d(1,1,1);
}

.stickem .share_list li a{
  	-moz-box-sizing: content-box;
  	-webkit-box-sizing: content-box;
  	box-sizing: content-box;
	-webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    -ms-transition-property: -ms-transform;
    transition-property: transform;
   	-moz-transform-style: preserve-3d;
   	-webkit-transform-style: preserve-3d;
   	transform-style: preserve-3d;
   	-webkit-perspective: 1000;
   	-moz-perspective: 1000;
   	perspective: 1000;
	-ms-transform: translateZ(0);
   	-o-transform: translateZ(0);
   	-moz-transform: translateZ(0);
   	-webkit-transform: translateZ(0);
   	transform: translateZ(0);
	-webkit-transition: -webkit-transform 104ms ease-in-out;
	-ms-transition: -ms-transform 104ms ease-in-out;
	-o-transition: -o-transform 104ms ease-in-out;
	-moz-transition: -moz-transform 104ms ease-in-out;
	transition: transform 104ms ease-in-out;
   	-webkit-transform: translate3d(0,0,0) rotate(0deg) scale3d(0.9,0.9,0.9);
   	-moz-transform: translate3d(0,0,0) rotate(0deg) scale3d(1,1,1);
   	-ms-transform: translate3d(0,0,0) rotate(0deg) scale3d(1,1,1);
   	-o-transform: translate3d(0,0,0) rotate(0deg) scale3d(1,1,1);
   	transform: translate3d(0,0,0) rotate(0deg) scale3d(1,1,1);
}

.stickem .share_list li:hover a{
   	-webkit-transform: translate3d(0,1px,0) rotate(0deg) scale3d(1,1,1);
   	-moz-transform: translate3d(0,1px,0) rotate(0deg) scale3d(1,1,1);
   	-ms-transform: translate3d(0,1px,0) rotate(0deg) scale3d(1,1,1);
   	-o-transform: translate3d(0,1px,0) rotate(0deg) scale3d(1,1,1);
   	transform: translate3d(0,1px,0) rotate(0deg) scale3d(1,1,1);
}

@media screen and (max-width:1300px){
	.stickem{
		max-width: 650px;
		margin: 0 auto;
		position: relative;
	}
}

/* PAGINATION (IF NEEDED) */

.pagination{
	padding: 80px 0;
	margin: 0 0 -64px;
	background:#FDFEFC url(../ui/white_noise.png) center center repeat;
}

.pagination:after{
	content:"";
	width:100%; height:2px; display:block;
	background:#FFFFFF;
	top:0; left:0; position:absolute;
}

.pagination ul{
	text-align: center;
}

.pagination li{
	width: 48px;
	height: 48px;
	line-height: 48px;
	display:inline-block;
	text-align: center;
	position: relative;
}

.pagination ul > *:first-child {margin:0 12px 0 0;}

.pagination ul > *:last-child {margin:0 0 0 4px;}

.pagination li span{
	width: 48px;
	height: 48px;
	display: block;
	-webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
	background: #99CC66;
	position: relative;
}

.pagination li span,
.pagination li a{z-index: 2;}

.pagination li .highlight{
	content: "";
	width: 48px;
	height: 48px;
	display: block;
	-webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
	background: #99CC66;
	top: 0;
	left: 0;
	position: absolute;
	z-index: 1;
}

.pagination li a{
	width: 48px;
	height: 48px;
	display: block;
	position: relative;
	z-index: 2;
	font-style: normal;
	border: 0;
}

.pagination li a:hover{
	color: inherit;
}

.pagination li.next a{
	-webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
	background: url("../ui/diagonal_lines_green.png") repeat;
}

.pagination li.next a:hover{}

.pagination li .highlight{
    -webkit-transition: -webkit-transform 326ms cubic-bezier(.645,.045,.355,1);
    -moz-transition: -moz-transform 326ms cubic-bezier(.645,.045,.355,1);
    -ms-transition: -ms-transform 326ms cubic-bezier(.645,.045,.355,1);
    -o-transition: -o-transform 326ms cubic-bezier(.645,.045,.355,1);
    transition: transform 326ms cubic-bezier(.645,.045,.355,1);
}

/* FOOTER */

footer{margin: 64px 0 0;}

footer article h3,
footer .mod_article h3{
	padding-top: 32px;
}

footer article > .ce_tex,
footer .mod_article > .ce_tex{
	padding: 32px 0;
}

footer article .ce_text pre,
footer .mod_article .ce_text pre{
	margin: 0 auto;
	text-align: center;
	padding: 0 0 32px 0;
}

footer article .product p,
footer .mod_article .product p,
footer article .teaser > p,
footer .mod_article .teaser > p{
	padding-left: 32px;
	padding-right: 32px;
   	-moz-box-sizing: border-box;
   	-webkit-box-sizing: border-box;
   	box-sizing: border-box;
	margin: 0 auto;
}

.empty_cart.mod_iso_productlist,
footer .mod_iso_productlist,
footer .mod_iso_relatedproducts{
	width:102%;
 	font-size:0;
 	line-height:0;
 	margin: 1% -1% 0;
 	padding: 24px 48px 0;
   	-moz-box-sizing: border-box;
   	-webkit-box-sizing: border-box;
   	box-sizing: border-box;
 	text-align: center;
}

.empty_cart.mod_iso_productlist .product,
footer .product,
footer .related_posts > div{
	margin: 1% 2%;
 	width: 96%;
 	display:inline-block;
    vertical-align: middle;
 	position: relative;
}

footer .product .formbody{
	width: 100%;
	display: block;
}

footer .product .formbody > a{
	width: 100%;
	height: 100%;
	display: block;
    position: relative;
	z-index: 1;
}

footer article .product .formbody:hover > a:after,
footer .mod_article .product .formbody:hover > a:after{
	opacity: 1;
}

footer .submit_container{
	display: none;
}

footer .submit_container .add_to_wishlist{
	display: inline-block;
}

.empty_cart.mod_iso_productlist .product,
footer .product,
footer .related_posts > div{
	margin: 0 1%;
	width: 31.25%;
}

#footer{
	background: #EFF0EE;
   	border-top: 1px solid #B5B6B4;
    position: relative;
}

#footer .right{
    top: 0;
    right: 48px;
    position: absolute;
}

/* */

footer .accordion .halves,
footer .accordion .thirds{
    width: 102%;
    font-size: 0;
    line-height: 0;
    margin: 1% -1% 0;
    padding: 0 48px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
}

footer .accordion > div > div{
	float: left;
    vertical-align: middle;
}

footer .halves > div{
    display: inline-block;
	margin: 0 1%;
	width: 48%;
}

footer .thirds > div{
	margin: 0 1%;
	width: 31.25%;
}

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

	footer .product_last,
	footer .thirds > div:last-child{display: none;}

	footer .product,
	footer .thirds > div{width: 48%;}

}

#footer .accordion .image_container{
	width: 100%;
    margin: 0;
    padding: 0;
}

#footer .accordion .image_container a{
	width: 100%;
	height: 100%;
	display: block;
    position: relative;
    z-index: 1;
}

#footer .accordion .image_container a:after{
    content: "";
    position: absolute;
    width: 25%;
    padding-bottom: 25%;
    display: block;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background-color: #99CC66;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.1), 0px 5px 15px rgba(0,0,0,0.05), 0px 10px 40px rgba(0,0,0,0.025);
    -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.1), 0px 5px 15px rgba(0,0,0,0.05), 0px 10px 40px rgba(0,0,0,0.025);
    box-shadow: 0px 2px 4px rgba(0,0,0,0.1), 0px 5px 15px rgba(0,0,0,0.05), 0px 10px 40px rgba(0,0,0,0.025);
	opacity: 0;
	-webkit-transition: opacity 123ms cubic-bezier(0.215,0.61,0.355,1);
	-ms-transition: opacity 123ms cubic-bezier(0.215,0.61,0.355,1);
	-o-transition: opacity 123ms cubic-bezier(0.215,0.61,0.355,1);
	-moz-transition: opacity 123ms cubic-bezier(0.215,0.61,0.355,1);
	transition: opacity 123ms cubic-bezier(0.215,0.61,0.355,1);
}

#footer .accordion .image_container:hover a:after{
	opacity: 1;
}

#footer .accordion .image_container img{
	width: 100%;
	height: auto;
	display: block;
}

#footer .accordion p{
    padding-left: 32px;
    padding-right: 32px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#footer .text_box p{
	margin: 0 auto;
}

/* */

#footer article > .mod_news4wardList,
#footer .mod_article > .mod_news4wardList{
    width: 102%;
    font-size: 0;
    line-height: 0;
    margin: 1% -1% 0;
    padding: 0 48px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
}

#footer .mod_news4wardList > div{
    margin: 1% 2%;
    width: 96%;
    display: inline-block;
    position: relative;
    vertical-align: middle;
}

@media only screen and (min-width: 550px){
	#footer .mod_news4wardList > div{
		margin: 0 1%;
		width: 31.25%;
	}
}

#footer article > .mod_news4wardList .image_container a:after,
#footer .mod_article > .mod_news4wardList .image_container a:after{
    content: "";
    position: absolute;
    width: 25%;
    padding-bottom: 25%;
    display: block;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background-color: #99CC66;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.1), 0px 5px 15px rgba(0,0,0,0.05), 0px 10px 40px rgba(0,0,0,0.025);
    -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.1), 0px 5px 15px rgba(0,0,0,0.05), 0px 10px 40px rgba(0,0,0,0.025);
    box-shadow: 0px 2px 4px rgba(0,0,0,0.1), 0px 5px 15px rgba(0,0,0,0.05), 0px 10px 40px rgba(0,0,0,0.025);
	opacity: 0;
	-webkit-transition: opacity 123ms cubic-bezier(0.215,0.61,0.355,1);
	-ms-transition: opacity 123ms cubic-bezier(0.215,0.61,0.355,1);
	-o-transition: opacity 123ms cubic-bezier(0.215,0.61,0.355,1);
	-moz-transition: opacity 123ms cubic-bezier(0.215,0.61,0.355,1);
	transition: opacity 123ms cubic-bezier(0.215,0.61,0.355,1);
}

#footer article > .mod_news4wardList .image_container:hover a:after,
#footer .mod_article > .mod_news4wardList .image_container:hover a:after{
	opacity: 1;
}

#footer article > .mod_news4wardList .teaser p:last-child,
#footer .mod_article > .mod_news4wardList .teaser p:last-child{
	padding-bottom: 0;
}

/* */

#footer li{display: inline-block;}

#footer .right{
    top: 0;
    right: 32px;
    position: absolute;
}

/* Footer Header */

#footer article,
#footer .mod_article{
	padding: 32px 0;
}

/* Main Footer */

.main_footer{
	height: 80px;
   	line-height: 80px;
   	-moz-box-sizing: border-box;
   	-webkit-box-sizing: border-box;
   	box-sizing: border-box;
	background: #E3E3E3;
}

.main_footer .level_1{padding: 0 0 0 16px;}

.main_footer .level_1 a{
	display: block;
    padding: 0 16px;
    position: relative;
    font-style: normal;
    text-decoration: none;
    border: none;
}

.main_footer .share_link{
	width: auto;
	height: 80px;
	line-height: 80px;
}

.main_footer .share_link a{
	width:32px;
   	height:58px;
   	display:block;
	padding:0;
	margin:11px 0;
	background:url(../ui/sprite_social_circles.svg) no-repeat;
	background-size: 96px;
	-ms-transition:background-position 0ms ease-in-out 32ms;
  	-o-transition:background-position 0ms ease-in-out 32ms;
	-moz-transition:background-position 0ms ease-in-out 32ms;
  	-webkit-transition:background-position 0ms ease-in-out 32ms;
	transition:background-position 0ms ease-in-out 32ms;
	font-style: normal;
	border: 0;
}

.main_footer .right li:not(:last-child) a{margin-right:8px}

.main_footer .share_fb a{background-position:top left;}
.main_footer .share_tw a{background-position:top center;}
.main_footer .share_ig a{background-position:top right;}

.main_footer .share_fb a:hover{background-position:bottom left;}
.main_footer .share_tw a:hover{background-position:bottom center;}
.main_footer .share_ig a:hover{background-position:bottom right;}

/* Footer Footer */

.footer_copyright{
	width:100%;
   	height:48px;
   	display:block;
   	-moz-box-sizing: border-box;
   	-webkit-box-sizing: border-box;
   	box-sizing: border-box;
	position:relative;
   	padding: 0 32px;
	background:#D4D4D4;
}

.footer_copyright > div{
   	height:48px;
   	line-height:48px;
   	display:inline-block;
	font-size: 14px;
}

.footer_copyright a{white-space: nowrap;}

@media only screen and (max-width: 1424px){
    #footer .main_footer{
        height: auto;
        line-height: 64px;
    }
    #footer .main_footer .sub_navigation li.last + li{
        display: block;
        margin-top: -16px;
        padding-left: 0;
    }
}

@media only screen and (max-width: 1000px){
	.main_footer .level_1{padding: 0 0 0 12px;}
	.main_footer .level_1 a{padding: 0 12px;}
	.footer_copyright{padding: 0 24px;}
	#footer .right{right: 24px;}
}

@media only screen and (max-width: 860px){
	.main_footer{
		height: auto;
		line-height: inherit;
	}
	.main_footer .level_1 {
    	padding: 0 12px;
		text-align: center;
		line-height: 48px;
		padding-top: 24px;
    	padding-bottom: 24px;
	}
    #footer .main_footer .sub_navigation li.last + li{
        margin-top: 0;
        margin-bottom: -24px;
    }
	#footer .main_footer nav .right{
		right: 0;
		position: relative;
		height: 80px;
		text-align: center;
	}
	.footer_copyright{
		height: auto;
		padding-top: 16px;
    	padding-bottom: 16px;
	}
	.footer_copyright > div{
		display: block;
		height: auto;
		line-height: 32px;
		text-align: center;
        margin: 0 auto;
	}
	#footer .footer_copyright .right{
		right: 0;
		position: relative;
		text-align: center;
	}
}

@media only screen and (max-width: 650px){
    #footer article.first,
    #footer .mod_article.first{display: none;}
}

@media only screen and (max-width: 380px){
    #footer .main_footer .sub_navigation li.last + li{
        margin-top: 8px;
        margin-bottom: -24px;
        line-height: 32px;
    }
}

@media only screen and (min-width: 1500px){
	.main_footer .level_1{padding: 0 0 0 32px;}
	.footer_copyright{padding: 0 48px;}
	#footer .right{right: 48px;}
}