/* Note: this file may use CSS 3 properties that currently may cause errors when run through the W3C CSS validator. */

/* Import resets and basic styling */
@import "/css/basic.css";

/* Import common CSS used on Hultafors Tools */
@import "/css/global.css";

/* The rest of this file contains rules specific to this site */

@media screen, projection {
	html,
	body {
		background:#fff url(/i/snickers/grad-body.jpg) repeat-x;
	}
	a:link {
		color:#940;
	}
	a:visited {
		color:#530;
	}
	a:hover,
	a:focus,
	a:active {
		color:#310;
	}

	/* LAYOUT
 * Common layout and specific layouts based on body layout classes
============================================================================================= */

	/* Layout-4
 * Content page without sub navigation, with right column and
 * wider content area
-------------------------------------------------------------- */

	.layout-4 .heading {
		border-top-color:#ffcd00;
	}


	/* LAYOUT CLASSES
============================================================================================================================ */

	/* Note
 * Used to show info about the current page being available on country-specific sites
-------------------------------------------------------------- */
	.note {
		border-color:#ffcd00;
	}


	/* FORMS
============================================================================================================================ */


	/* MODULES
============================================================================================================================ */

	.layout-2 #content-secondary .m-h {
		background:#ffcd00;
	}
	.layout-2 #content-secondary .m-h h2 {
		color:#101820;
	}

	/* Splash
-------------------------------------------------------------- */
	#splash .splash-roll {
		background:url(/i/snickers/bg-splash.jpg) no-repeat 100% 0;
	}
	#splash .splash-m {
		background-image:url(/i/snickers/bg-splash.jpg);
	}
	#splash .white a.action {
		color:#101820;
	}

	/* Languages
-------------------------------------------------------------- */
	#m-languages.m-page .m-h {
		background:#444;
	}

	/* Product listing
-------------------------------------------------------------- */
	.p-i .new {
		background:#ffcd00;
		color:#101820;
	}
	.product .p-i {
		padding-bottom:20px;
	}
	.product .p-i img {
		bottom:20px;
	}
	.product .colors {
		top:170px;
	}
	/* Product presentation
-------------------------------------------------------------- */
	.m-page .m-h {
		border-top-color:#ffcd00;
	}
	.m-page .m-nav li a {
		color:#940;
	}
	#m-product .m-c .p-i .nav li > a {
		color:#940;
	}
	#m-product .m-c .p-i .nav li > a:hover,
	#m-product .m-c .p-i .nav li > a:focus {
		color:#310;
	}
	#compareit .ddcompare li a.sel,
	#m-product #compareit .ddcompare li a.sel {
		background:#ffcd00;
		color:#101820;
	}
	#m-product .laundry {
		float:right;
		margin-top:30px;
		padding:5px;
		text-align:right;
	}
	#m-product .laundry img {
		margin:5px;
		vertical-align:middle;
	}

	/* Sub page teaser themeing
================================================================================ */

.article .block-headline {
	background: #ffd500;
}

.article .block-headline h2{
	color:#101820;
}

a.teaser-button, a.teaser-button:hover{
	background: #ffd500;
	color:#101820;
}

.article .collapsable {
	border-color:#ffd500;
}
.article div.collapse-trigger-container,
.article h2.collapse-trigger-container {
	background: #ffd500;
	color:#101820;
}

.article .plus-minus-icon .icon{
	background:#101820;
}

.article .big-image-teaser .teaser-content.negative{
	background-color: rgba(0,0,0,0.7);
}

.article .big-image-teaser .teaser-content.negative h3,
.article .big-image-teaser .teaser-content.negative p{
	color:#fff;
}

	/* Product size configurator
-------------------------------------------------------------- */
	#size-configurator .m-h {
		display:table;
		width:100%;
		padding:0;
		text-transform:uppercase;
	}
	#size-configurator .m-h h2,
	#size-configurator .m-h a {
		display:table-cell;
		margin:0;
		padding:10px 20px;
		background-color:#ffdc00;
		font-weight:bold;
	}
	#size-configurator .m-h h2 span {
		font-size:0.7em;
	}
	#size-configurator .m-h a {
		position:relative;
		padding-right:48px;
		background:#e0b800;
		color:#fff;
		font-size:0.9em;
		text-decoration:none;
		line-height:32px;
		text-align:right;
		vertical-align:top;
	}
	#size-configurator .m-h a:after {
		position:absolute;
		right:12px;
		content:'';
		width:24px;
		height:32px;
		margin-left:8px;
		background:#e0b800 url(/i/size-configurator/help.png) no-repeat 0 50%;
	}
	#size-configurator .m-h .edit:after {
		background:#e0b800 url(/i/size-configurator/edit.png) no-repeat 0 50%;
	}
	#size-configurator .m-c {
		padding:0;
		background-color:#f2f2f2;
	}
	#size-configurator img {
		float:left;
		max-width:calc(100% - 300px);
		height:auto;
	}
	#size-configurator .size-form {
		float:right;
		width:60%;
		padding:20px 20px 0 0;
	}
	#size-configurator form label {
		display:block;
		text-transform:uppercase;
	}
	#size-configurator fieldset {
		border:none;
	}
	#size-configurator legend {
		text-transform:uppercase;
	}
	#size-configurator form .alt {
		display:inline;
	}
	#size-configurator form .alt input,
	#size-configurator form .alt label {
		display:inline;
		margin:0;
	}
	#size-configurator form label strong {
		display:inline;
		color:#333;
	}
	#size-configurator form .text {
		background:url(/i/size-configurator/check-dimmed.png) no-repeat 8.5em 1.9em;
	}
	#size-configurator form .valid {
		background:url(/i/size-configurator/check.png) no-repeat 8.5em 1.9em;
	}
	#size-configurator select,
	#size-configurator .text input {
		width:6em;
		padding:.5em .8em;
	}
	#size-configurator input[type=number]::-webkit-inner-spin-button,
	#size-configurator input[type=number]::-webkit-outer-spin-button {
		margin:0;
		-webkit-appearance:none;
	}
	#size-configurator input[type=number] {
		-moz-appearance:textfield;
	}
	#size-configurator .col-2 {
		padding-left:20px;
	}
	#size-configurator .your-size {
		width:104px;
		padding:12px 12px;
		margin-bottom:8px;
		background:linear-gradient(136deg, #ffdc00 0%,#ffdc00 50%,#f5d325 51%,#f5d325 100%);
		background-color:#ffcd00;
		font-weight:bold;
		text-align:center;
		text-transform:uppercase;
	}
	#size-configurator .your-size span {
		display:block;
		border-bottom:4px solid #fff;
		font-size:3em;
	}
	#size-configurator .your-size span.empty {
		color:#666;
		opacity:0.6;
	}
	#size-configurator .your-size span.error {
		color:#822;
		opacity:0.6;
	}
	#size-configurator .for-style {
		padding:8px 0 0;
		font-weight:bold;
		text-align:center;
		text-transform:uppercase;
	}
	#size-configurator .info {
		clear:left;
		padding:10px 25px;
		background:url(/i/size-configurator/info.png) no-repeat 0 12px;
		color:#666;
	}
	/* Compact size info */
	#size-configurator .multiple-size-charts .col-1 {
		width:45%;
	}
	#size-configurator .multiple-size-charts .col-2 {
		width:54%;
		padding-left:4px;
	}
	#size-configurator .multiple-size-charts .your-size {
		float:left;
		width:80px;
		padding:8px 12px;
		margin:0 4px 4px 0;
	}
	#size-configurator .multiple-size-charts .your-size span {
		border-bottom:none;
		font-size:2em;
	}
	#size-configurator .multiple-size-charts .your-size .for-style {
		padding:0;
	}

	/* Product comparison
-------------------------------------------------------------- */
	#m-comparison h1 span {
		color:#aaa;
	}
	#m-comparison thead th span {
		background:#ffcd00;
		color:#101820;
	}
	#m-comparison tbody .yes,
	#m-comparison tbody .no {
		color:#101820;
	}
	#m-comparison tbody .yes span {
		background:#ffcd00;
		color:#101820;
	}

	/* Find Store
-------------------------------------------------------------- */
	#fs-list li a,
	#fs-list li a:visited {
		color:#940;
	}
	.m-markets #fs-list {
		display:block;
	}
	.m-markets #fs-map,
	.m-markets #fs-map .map {
		width:648px !important;
	}

	/* Start teaser module
-------------------------------------------------------------- */
	.layout-2 .m-teaser a span {
		color:#940;
	}


	/* SKIP LINKS
============================================================================================================================ */

	#skip a:focus,
	#skip a:active {
		background:#101820;
	}


	/* MAIN NAVIGATION
============================================================================================================================ */

	#nav-main li.ddmenu > a:after {
		background-position:-16px 8px;
	}
	#nav-main > ul > li.sel > a {
		border-left-color:#ffcd00;
		background:#ffcd00 url(/i/snickers/nav-selected-bg.jpg);
		color:#101820;
	}
	#nav-main li.ddsel.sel > a:before {
		background:#ffcd00;
	}

	#nav-main li.sel .drop-down {
		background-color:#ffcd00;
	}

	#nav-main li.sel .drop-down a,
	#nav-main li.sel .drop-down h3 {
		color:#101820;
	}
	#nav-main li.sel .drop-down a:hover,
	#nav-main li.sel .drop-down a:focus {
		background:#ffbf00;
	}


	/* SEARCH
============================================================================================================================ */

	/* Main search form, in the header
-------------------------------------------------------------- */
	#toggle-search-button.active {
		background-image:url(/i/icons/search-yellow.png?embed);
	}
	#toggle-nav-button.active {
		background-image:url(/i/icn-menutoggle-yellow.png?embed);
	}

	/* Brand search
-------------------------------------------------------------- */
	#brand-search .submit {
		border-color:#ddd;
	}

	/* Product search form
-------------------------------------------------------------- */
	#product-search {
		margin-bottom:20px;
		padding:10px 0;
		border-top:none;
		background:#ffd500;
	}
	#product-search .search-input {
		border-radius:3px;
	}
	#product-search .search-input:focus {
		padding:8px;
		border:2px solid #dcc02f;
		box-shadow:none;
	}
	.search input[type=submit] {
		width:48px !important;
		border-radius:3px;
		background:#ecbd00 url(/i/snickers/search-arrow.png) no-repeat;
		background-position:center center;
		text-indent:-9999px;
		-moz-transition:background-position 0.1s ease-in;
		-o-transition:background-position 0.1s ease-in;
		-webkit-transition:background-position 0.1s ease-in;
		transition:background-position 0.1s ease-in;
	}
	.search input[type=submit]:hover {
		box-shadow:none;
		background-position:right center;
	}
	.search input[type=submit]:active {
		outline:none;
		border:none;
		box-shadow:0 0 3px rgba(0,0,0,0.3) inset;
	}

	/* Search autocomplete
-------------------------------------------------------------- */
	.js-autocomplete a {
		color:#940;
	}
	.js-autocomplete a.sel,
	.js-autocomplete a:hover,
	.js-autocomplete a:focus {
		background:#ffcd00;
		color:#101820;
	}
	.js-autocomplete li a.sel span,
	.js-autocomplete li a:hover span,
	.js-autocomplete li a:focus span,
	.js-autocomplete li a.sel strong,
	.js-autocomplete li a:hover strong,
	.js-autocomplete li a:focus strong {
		color:#101820;
	}


	/* SUB NAVIGATION
============================================================================================================================ */

	#nav-sub h2 {
		border-color:#101820;
		background:#ffcd00 url(/i/snickers/nav-selected-bg.jpg);
		color:#101820;
	}

	/* Selected page link */
	#nav-sub li a.selected {
		background:#ffcd00;
		color:#101820;
	}


	/* CONTENT STYLING
============================================================================================================================ */

	/* Action buttons
-------------------------------------------------------------- */
	.action,
	a.action,
	a.action:active,
	#m-product #compareit a.action {
		border:none;
		background:#ffdc00;
		background:-webkit-linear-gradient(top, #ffdc00, #ffbe00 100%);
		background:linear-gradient(to bottom, #ffdc00, #ffbe00 100%);
		color:#101820;
		font-weight:bold;
		font-family:"FranklinGothicFS", Arial, Helvetica, sans-serif;
		text-shadow:none;
	}
	.action:hover,
	.action:focus,
	a.action:hover,
	a.action:focus,
	#m-product #compareit a.action:hover,
	#m-product #compareit a.action:focus,
	.action-area a.action:hover,
	.action-area a.action:focus {
		box-shadow:0 0 3px rgba(0,0,0,0.8) inset;
		color:#101820;
	}
	a.action .fw {
		background-image:url(/i/snickers/bullet-fwact.png);
	}


	/* LANGUAGE LIGHTBOX
============================================================================================================================ */

	.lb-lang .lb-panel {
		background:#fff url(/i/snickers/bg-splash.jpg) no-repeat;
	}
	.lb-lang .lb-panel .choose-lang {
		background:#ffcd00;
	}
	.lb-lang .lb-panel .choose-lang img,
	.lb-lang .lb-panel .choose-lang a {
		float:left;
		border-left:1px solid #fff;
	}
	.lb-lang .lb-panel .choose-lang a,
	.lb-lang .lb-panel .choose-lang a:visited {
		color:#101820;
	}
	.lb-lang .lb-panel .choose-lang a strong {
		color:#101820;
	}


	/* LISTS
============================================================================================================================ */

	/* FAQ listing
-------------------------------------------------------------- */
	.js-faq h2,
	.js-faq h3,
	.js-faq h4 {
		color:#940;
	}

	/* SGG teaser link on Products */
	#m-products .sgg-teaser-link {
		display:inline-block;
		float:right;
		padding:2px 6px;
		background-color:rgb(252, 215, 54);
		color:#000;
		font-weight:bold;
		font-size:25px;
		font-family:FranklinGothicFS, Arial, sans-serif;
		text-decoration:none;
		text-transform:uppercase;
	}
	#m-products .sgg-teaser-link:after {
		display:inline-block;
		width:8px;
		height:11px;
		margin:2px 0 -2px 5px;
		border:5px solid;
		border-radius:2px;
		box-shadow:1px 1px 2px rgba(0,0,0,0.5);
		background:#000 url(/i/snickers/sgg/prev-next-arrows-yellow.png) no-repeat -8px 0;
		content:"";
	}

	/* Ultra-obtrusive auto-dialog
================================================================================ Ultra-obtrusive auto-dialog */
	#dialogs {
		z-index:100000; /* Make dialogs appear on top of the fixed header on iPads */
	}
	.dialog.left-right-concept {
		max-width:none;
		width:948px;
		height:auto !important;
		margin-left:-474px;
		background:#ddd url(/i/snickers/sgg/concrete-pattern.jpg);
		background:url(/i/snickers/sgg/screwdriver.jpg) no-repeat 0 100%, #ddd url(/i/snickers/sgg/concrete-pattern.jpg);
		background-size:95%, auto;
		font:17px/24px "FranklinGothicFS", Arial, Helvetica, sans-serif;
	}
	.dialog.left-right-concept .content {
		padding:0 24px 24px;
	}
	/* Larger padding-bottom for browsers that handle multiple background images */
	.dialog.left-right-concept:first-of-type .content {
		padding-bottom:280px;
	}
	.dialog.left-right-concept .left-right span {
		display:inline;
	}
	.dialog.left-right-concept h1 {
		padding:8px 12px;
		background:#fcd736;
		font-weight:800;
		font-size:39px;
		font-family:"FranklinGothicFS", Arial, Helvetica, sans-serif;
		line-height:44px;
		text-transform:uppercase;
	}

	/* Button
 * Override button from main site.
-------------------------------------------------------------- */
	.left-right-concept .action {
		display:inline-block;
		margin-right:20px;
		margin-bottom:12px;
		padding:4px 14px;
		border-color:#b88535;
		font-size:23px;
		line-height:25px;
	}

	/* Left&Right concept text
-------------------------------------------------------------- */
	p.left-right {
		font-weight:800;
		font-size:23px;
		font-family:"FranklinGothicFS", Arial, Helvetica, sans-serif;
		text-transform:uppercase;
	}
	.left-right > span {
		display:block;
	}
	.left-right .left {
		float:none;
		margin:0;
		color:#d81f1f;
	}
	.left-right .right {
		float:none;
		margin:0;
		color:#1f9f37;
	}
	.left-right .amp {
		margin:0 2px;
		font-weight:normal;
	}

	/* Columns
-------------------------------------------------------------- */
	.left-right-concept .columns {
		margin-bottom:24px;
		-moz-column-count:2;
		-webkit-column-count:2;
		column-count:2;
		-moz-column-gap:24px;
		-webkit-column-gap:24px;
		column-gap:24px;
	}

	/* History slider (Startpage)
================================================================================ */
	.history-slider {
		padding:40px 30px;
		background-color:#262a2d;

		-webkit-font-smoothing:antialiased;
	}
	.js .history-items {
		overflow:hidden;
	}
	.history-items ul {
		margin:0 0 35px;
		list-style:none;
	}
	.js .history-items ul {
		width:9999px;
	}
	.history-items li {
		display:block;
		float:left;
		width:33%;
		margin:0;
	}
	.js .history-items li {
		box-sizing:border-box;
		width:427px;
		padding:0 10px;
	}
	.history-items li img {
		display:block;
		width:100%;
	}
	.history-items .caption {
		padding:20px;
		background-color:#fff;
	}
	.history-items .caption h3 {
		margin-bottom:10px;
		font-weight:normal;
		font-size:18px;
	}
	.history-items .caption h3 a {
		display:block;
		padding-right:15px;
		padding-right:15px;
		color:#222;
		text-decoration:none;
	}
	.history-items .caption h3 a:after {
		display:inline-block;
		width:15px;
		height:11px;
		margin-right:-15px;
		margin-left:3px;
		background:url(/i/snickers/arrows-sprite.png) no-repeat;
		background-position:50% -42px;
		content:"";
		vertical-align:-1px;
		-moz-transition:background-position 0.1s ease-in;
		-o-transition:background-position 0.1s ease-in;
		-webkit-transition:background-position 0.1s ease-in;
		transition:background-position 0.1s ease-in;
	}
	.history-items .caption h3 a:hover:after {
		background-position:100% -42px;
	}

	.history-timeline {
		margin:0 10px;
		text-align:center;
	}
	.history-timeline .start,
	.history-timeline .end,
	.history-timeline .bar,
	.history-timeline .handle {
		display:inline-block;
		line-height:8px;
	}
	.history-timeline .bar {
		width:100%;
		height:8px;
		margin:0;
		border-radius:8px;
		background:#4c4f52;
	}
	.history-timeline .handle {
		display:block;
		min-width:30px;
		width:20%;
		height:8px;
		border-radius:8px;
		background:#ffd500;
	}
	.history-timeline .start,
	.history-timeline .end {
		cursor:pointer;
	}

	/* Big image teaser (Startpage)
================================================================================ */

	a.teaser-button,
	a.teaser-button:hover {
		background:#ffd500;
		color:#101820;
	}
	a.teaser-button:after {
		display:inline-block;
		width:15px;
		height:11px;
		margin-left:3px;
		background:url(/i/snickers/arrows-sprite.png) no-repeat;
		background-position:50% 0;
		content:"";
		vertical-align:-1px;
		-moz-transition:background-position 0.1s ease-in;
		-o-transition:background-position 0.1s ease-in;
		-webkit-transition:background-position 0.1s ease-in;
		transition:background-position 0.1s ease-in;
	}
	a.teaser-button:hover:after {
		background-position:100% 0;
	}

	/* Image teaser (Startpage)
================================================================================ */
	.image-teaser {
		background:#f0efee;
		-webkit-font-smoothing:antialiased;
	}
	.image-teaser.dark {
		background:#262a2d;
	}
	.image-teaser.dark h2 {
		color:#fff;
	}
	.image-teaser.dark p {
		color:#ddd;
	}
	.image-teaser.image-teaser-profile {
		background:#ffd500;
	}
	.image-teaser.image-teaser-profile h2 {
		color:#000;
	}
	.image-teaser.image-teaser-profile p {
		color:#222;
	}
	.image-teaser .teaser-image {
		position:relative;
		width:50%;
		overflow:hidden;
	}
	.image-teaser .teaser-image img {
		display:block;
	}
	.image-teaser .teaser-image.image-left {
		float:left;
	}
	.image-teaser .teaser-image.image-left:after,
	.image-teaser .teaser-image.image-right:after {
		position:absolute;
		top:50%;
		right:0;
		bottom:0;
		width:0;
		height:0;
		margin-top:-15px;
		border-top:15px solid rgba(255, 255, 255, 0);
		border-right:15px solid #f0efee;
		border-bottom:15px solid rgba(255, 255, 255, 0);
		border-left:transparent;
		content:"";
	}
	.image-teaser .teaser-image.image-right:after {
		left:0;
		border-right:transparent;
		border-left:15px solid #f0efee;
		content:"";
	}

	.image-teaser.dark .teaser-image.image-left:after {
		border-right:15px solid #262a2d;
	}
	.image-teaser.dark .teaser-image.image-right:after {
		border-left:15px solid #262a2d;
	}
	.image-teaser.image-teaser-profile .teaser-image.image-left:after {
		border-right:15px solid #ffd500;
	}
	.image-teaser.image-teaser-profile .teaser-image.image-right:after {
		border-left:15px solid #ffd500;
	}
	.image-teaser .teaser-image.image-right {
		float:right;
	}
	.image-teaser .teaser-content {
		float:left;
		box-sizing:border-box;
		width:50%;
		padding:40px;
	}
	.image-teaser h2 {
		font-weight:normal;
		font-size:28px;
	}
	.image-teaser p {
		margin-bottom:20px;
	}
	.image-teaser a.teaser-button {
		background:#101820;
		color:#ccc;
	}
	.image-teaser a.teaser-button:after {
		background-position:50% -21px;
	}
	.image-teaser a.teaser-button:hover:after {
		background-position:100% -21px;
	}

/* Content teaser with solid color background (Sub page)
================================================================================ */
	.content-teaser {
		background-color:#ffd500;
		color:#101820;
	}
	.content-teaser h2,
	.content-teaser h3 {
		color:#101820;
	}
	.content-teaser a:link {
		color:#101820;
	}
	.content-teaser a:hover,
	.content-teaser a:focus,
	.content-teaser a:active,
	.content-teaser a:visited {
		color:#555;
	}
/* Quotation teaser with solid color background or background image (Sub page)
================================================================================ */
.quotation-teaser blockquote {
	border-color:#ffd500;
}
.quotation-teaser--brand-color {
	background-color:#ffd500;
}
.quotation-teaser.quotation-teaser--black blockquote {
	border-color:#ffd500;
}
.quotation-teaser--brand-color blockquote,
.quotation-teaser.quotation-teaser--image-light blockquote {
	color:#101820;
	border-color:#101820;
}
.quotation-teaser.quotation-teaser--brand-color blockquote h2,
.quotation-teaser.quotation-teaser--brand-color blockquote h3,
.quotation-teaser.quotation-teaser--image-light blockquote h2,
.quotation-teaser.quotation-teaser--image-light blockquote h3 {
	color:#101820;
}
.quotation-teaser.quotation-teaser--image-dark blockquote h2,
.quotation-teaser.quotation-teaser--image-dark blockquote h3 {
	color:#fff;
}
.quotation-teaser.quotation-teaser--image-light {
	box-shadow:inset 0 0 0 1000px rgba(255,255,255,0.2);
}
.quotation-teaser.quotation-teaser--image-light:hover {
	box-shadow:inset 0 0 0 1000px rgba(255,213,0,0.7);
}
	/* Instagram teaser (Startpage)
================================================================================ */
	.instagram-teaser {
		background-color:#ffd500;

		-webkit-font-smoothing:antialiased;
	}
	.instagram-teaser .teaser-content {
		float:left;
		box-sizing:border-box;
		width:35.390947%;
		padding:40px;
	}
	.instagram-teaser a.teaser-button {
		background:#101820;
		color:#ccc;
	}
	.instagram-teaser a.teaser-button:after {
		background-position:50% -21px;
	}
	.instagram-teaser a.teaser-button:hover:after {
		background-position:100% -21px;
	}
	.instagram-teaser .instagram-photos {
		float:left;
		box-sizing:border-box;
		width:64.609053%;
		padding:8px 8px 8px 0;
	}
	.instagram-teaser h2 {
		margin-bottom:5px;
		font-size:22px;
		text-transform:uppercase;
	}
	.instagram-teaser h2:before {
		display:block;
		width:70px;
		height:70px;
		margin-bottom:20px;
		background:url(/i/snickers/instagram-icon.png);
		content:"";
	}
	.instagram-teaser p,
	.instagram-teaser a {
	  color: #88761d;
	}
	.instagram-teaser .instagram-photos ul {
		margin:0;
		padding:0;
		list-style:none;
		text-align:right;
	}
	.instagram-teaser .instagram-photos li {
		display:block;
		float:left;
		width:20%;
		margin:0;
		padding:0;
		list-style:none;
	}
	.instagram-teaser .instagram-photos li a {
		display:block;
	}
	.instagram-teaser .instagram-photos li img {
		display:block;
		width:100%;
		height:auto;
	}

	/* HTML5 video (Startpage)
================================================================================ */
	.video-container {
		position:relative;
		background:url("/temp/snickers/temp-video-poster.jpg") no-repeat;
		background-size:cover;
		-webkit-font-smoothing:antialiased;
	}
	.video-controls {
		top:0;
		bottom:0;
		left:50%;
	}
	.video-container video {
		display:block;
		max-width:100%;
		height:auto;
	}
	.video-container button {
		position:absolute;
		top:0;
		right:0;
		bottom:0;
		left:0;
		z-index:2;
		width:80px;
		height:80px;
		margin:auto;
		outline:none;
		border:none;
		border-radius:50%;
		background-color:rgba(255,255,255,0.8);
		background-image:url("/i/snickers/play-icon.png");
		background-position:center center;
		background-repeat:no-repeat;
		transition:background-color 0.5s ease;
	}
	.video-container button.playing,
	.video-container button.playing.pause {
		visibility:visible;
		top:auto;
		bottom:10px;
		width:50px;
		height:50px;
		background-image:url("/i/snickers/pause-icon.png");
		opacity:1;
		transition:opacity 1.2s ease-in;
	}
	.video-container button.playing.pause {
		background-image:url("/i/snickers/play-icon.png");
		background-size:20px;
	}
	.video-container button:hover {
		background-color:#fff;
		cursor:pointer;
	}
	.video-info {
		position:absolute;
		right:0;
		bottom:0;
		left:0;
		z-index:1;
		padding:40px;
		background:#000;
		background:-moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
		background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
		background:-webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
		background:-o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
		background:-ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
		background:linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C */
		color:#fff;
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
		transition:opacity 1.2s ease-in;
	}
	.video-info h2 {
		margin-bottom:5px;
		color:#fff;
		font-weight:normal;
		font-size:28px;
	}
	.video-info p {
		margin:0;
		color:#fff;
		font-weight:bold;
		font-size:14px;
		text-transform:uppercase;
	}
	.hide {
		visibility:hidden;
		opacity:0;
	}

		/* Product page
	-------------------------------------------------------------- */
	.product-page #product-search {
		border-top: 4px solid #101820;
	}

	.product-page #m-product h2.collapse-trigger-container {
		color: #101820;
	}

	.product-listing .dialog.quickview .flex-viewport span.active{
		color:inherit;
		text-decoration:underline;
	}

	.product-listing .quickview .colors,
	.product-page #m-product  .colors{
		position: absolute;
		bottom: -20px;
		left: 40px;
	}

	.product-listing .quickview .colors{
		bottom: 0;
	}

	.product-listing .quickview .colors strong,
	.product-page #m-product  .colors strong{
		font-size:0;
	}

	.product-listing .quickview .colors li,
	.product-page #m-product  .colors li {
		display: inline;
		margin-left: 5px;
		float: left;
	}

	.quickview.dialog .social-links li a, .product-page .social-links li a{
		background-color: #ffd500;
	}

	.product-page .collapse-trigger-container{
		border-bottom: #dedede 1px solid;
	}

	.product-page .plus-minus-icon .icon:before, .product-page .plus-minus-icon .icon:after{
		background:#101820;
	}

	.product-page #m-product .m-c .p-c li:before{
		background-color: #101820;
	}

	.quickview.dialog .social-links li a:before, .product-page .social-links li a:before{
		background: url("/i/icons/facebook-black.svg");
	}

	.quickview.dialog .social-links li .twitter:before, .product-page .social-links li .twitter:before {
		background: url("/i/icons/twitter-black.svg");
	}

	.quickview.dialog .social-links li .google:before, .product-page .social-links li .google:before {
		background: url("/i/icons/google-black.svg");
	}

	.quickview.dialog .social-links li .linkedin:before, .product-page .social-links li .linkedin:before {
		background: url("/i/icons/linkedin-black.svg");
	}

	.quickview.dialog .social-links li .mail:before, .product-page .social-links li .mail:before {
		background: url("/i/icons/mail-black.svg");
	}
/*	.product-page #m-product .m-c .p-i .img a.zoom,
	.product-page #m-product .m-c .p-i .img a.threesixty,
	.product-page .image-tools a{
		background: #ffd500;
	}*/

/*	.product-page .image-tools a:before{
		background: url("/i/icons/play-black.svg");
	}

	.product-page .image-tools a.threesixty:before{
		background: url("/i/icons/360-black.svg");
	}

	.product-page .image-tools a.zoom:before{
		background: url("/i/icons/zoom-black.svg");
	}
*/
	.quickview-footer{
		background:#ffd500;
	}

	.quickview.dialog .favorite-link:after, .quickview.dialog .product-link:after{
		background: url('/i/icons/arrow-black.svg');
	}

	.quickview.dialog .favorite-link, .quickview.dialog .product-link{
		color:#101820;
	}

	.product-page #m-product .m-c .p-data .tab-nav{
		background:#ffd500;
	}

	.product-page #m-product .m-c .p-data .tab-nav .sel a{
		color:#101820;
	}

	.product-page .flex-viewport span.active + span{
		color:#101820;
		text-decoration:underline;
	}

	.prod-list .flex-viewport li a:hover{
		color:#101820;
		text-decoration:underline;
	}
	.quickview.dialog .social-links,
	.quickview.dialog .product-link {
		border-left:1px solid #e7c203;
	}

	.quickview.dialog .social-links li a{
		background: #e7c203;
	}

	/* END @media screen, projection */
}

@media screen and (max-width: 739px){
	#m-product .m-c .p-data .tab-nav li{
		background:#e7c203;
		margin: 4px;
	}
}

@media screen and (max-width:540px) {
	#size-configurator img,
	#size-configurator .size-form {
		float:none;
	}
	#size-configurator .size-form {
		width:100%;
	}
	#size-configurator .size-form .col {
		padding:0 20px;
	}
}

/* Custom checkboxes and radio buttons
 * In effect only when images are determined to be available
 * Wrapped in a media query to hide from IE8- due to lack of support for :checked
-------------------------------------------------------------- */
@media only screen {
	.view-as input[type="radio"]:checked + .icon::before {
		background-color:#ffcd00;
	}
}

/* For tablet devices */
@media screen and (max-width:971px) {
	/* Ultra-obtrusive auto-dialog
	-------------------------------------------------------------- */
	.dialog.left-right-concept {
		width:716px;
		margin-left:-358px;
	}
	/* Larger padding-bottom for browsers that handle multiple background images */
	.dialog.left-right-concept:first-of-type .content {
		padding-bottom:26.967285587975%; /* 305 / 1131 (background image height/width) */
	}

	/* Columns
	-------------------------------------------------------------- */
	.dialog.left-right-concept .columns {
		-moz-column-count:1;
		-webkit-column-count:1;
		column-count:1;
	}

	/* New startpage teasers
	-------------------------------------------------------------- */
	.background-image {
		max-width:740px;
	}
	.instagram-teaser .instagram-photos {
		padding-top:40px;
		padding-bottom:40px;
	}
	.video-info {
		padding:20px 40px;
	}
	.video-info h2 {
		font-size:22px;
	}
	.video-container button {
		width:60px;
		height:60px;
	}
}



/* For mobile devices */
@media screen and (max-width:739px) {
	html,
	body {
		background-color:#000;
	}
	#header {
		border-bottom-color:#ffcd00;
	}
	#nav-main li a {
		background:none;
	}
	#splash .splash-roll {
		background:#fff;
	}
	#splash .splash-m {
		background:#fff;
	}
	#nav-main li .drop-down h3,
	#nav-main li.sel .drop-down h3 {
		color:#fff;
	}
	#nav-main li.sel.ddmenu .drop-down a,
	#nav-main li .drop-down a {
		color:#940;
	}

	#nav-sub .categories {
		border-top:5px solid #444;
	}

	#webapp-hint {
		background-image:url(/i/bubbletip.png);
	}
	#product-search {
		margin-bottom:0;
	}

	/* Ultra-obtrusive auto-dialog
	-------------------------------------------------------------- */
	.dialog.left-right-concept {
		top:46px !important;
		right:12px;
		left:12px;
		width:auto;
		margin-left:0;
	}

	.background-image,
	.image-teaser .teaser-image img {
		display:block;
		position:relative;
		width:100%;
	}
	.big-image-teaser {
		width:100% !important;
		height:auto !important;
		background-color:#262a2d;
		opacity:1;
	}
	.big-image-teaser .teaser-content,
	.image-teaser .teaser-content {
		float:none;
		width:100%;
		padding:20px 20px 40px;
	}
	.big-image-teaser .teaser-content h2,
	.image-teaser .teaser-content h2 {
		font-size:22px;
	}
	.big-image-teaser .teaser-content p.intro,
	.image-teaser .teaser-content p.intro {
		font-size:18px;
	}
	.image-teaser .teaser-image {
		float:none !important;
		width:100%;
	}
	.image-teaser .teaser-image.image-left:after,
	.image-teaser .teaser-image.image-right:after {
		display:none;
		visibility:hidden;
	}
	.instagram-teaser .instagram-photos,
	.instagram-teaser .teaser-content {
		float:none;
		width:100%;
		padding:20px;
	}
	.instagram-teaser .teaser-content {
		padding:20px 20px 0;
	}
	.instagram-teaser .instagram-photos {
		padding:8px;
	}
	.instagram-teaser h2:before {
		float:left;
		width:50px;
		height:50px;
		margin-right:20px;
		background-size:50px;
		background-repeat:no-repeat;
	}
	.video-info {
		padding:20px 20px 10px;
		background:-moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
		background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
		background:-webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
		background:-o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
		background:-ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
		background:linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
	}
	.video-info h2 {
		margin-bottom:0;
		font-weight:bold;
		font-size:16px;
	}
	.video-info p {
		margin-bottom:0;
		font-size:12px;
	}
	.video-container button {
		width:40px;
		height:40px;
		background-size:15px;
	}
}

@media screen and (max-width:580px) {
	/* Country/region selector
	================================================================================ Country/region selector */
	.lb-lang .lb-panel .choose-lang a {
		background:#ffcd00;
	}
	.collection-page .big-image-teaser.hero .teaser-content {
		padding-bottom:20px;
	}
	.collection-page .big-image-teaser.hero .teaser-content h1 {
		font-size:32px;
		line-height:32px;
	}
}

/* Grid */
.half-page-block {
	background-color: #ffd500;
}
.half-page-block .teaser-content.dark,
.half-page-block .teaser-content.dark h2 {
	color: #fff;
}
.half-video {
	background-color: #101820;
}
.third-page-block {
	background-color: #ffd500;;
}
.third-page-block.dark {
	background: #262a2d;
}
.half-page-block a.teaser-button,
.third-page-block a.teaser-button {
	background: #101820;
	color: #ccc;
}
.third-page-block .teaser-content.dark,
.third-page-block .teaser-content.dark h2 {
	color: #fff;
}
.third-video {
	background-color: #101820;
}
.half-page-block .teaser-content,
.third-page-block .teaser-content {
	color: #000;
}
.half-page-block .teaser-content h2,
.third-page-block .teaser-content h2 {
	color: #000;
}
.half-page-bg-image .teaser-content h2,
.half-page-bg-image .teaser-content {
	color:#fff;
}
.dark {
	background: #262a2d;
}

/* Social media */

.social-media--facebook::before {
	background-image:url(/i/icons/social-media/facebook.svg);
}
.social-media--instagram::before {
	background-image:url(/i/icons/social-media/instagram.svg);
}
.social-media--twitter::before {
	background-image:url(/i/icons/social-media/twitter.svg);
}
.social-media--linkedin::before {
	background-image:url(/i/icons/social-media/linkedin.svg);
}
.social-media--pinterest::before {
	background-image:url(/i/icons/social-media/pinterest.svg);
}
.social-media--youtube::before {
	background-image:url(/i/icons/social-media/youtube.svg);
}
.social-media a.teaser-button {
	color:#000;
	background:transparent;
}
.social-media a.teaser-button::after {
	background-position:4px -42px;
}
.social-media a.teaser-button:hover::after {
	background-position:100% -42px;
}