/* 	==========================================================================
	Template:	XTREME
	Version: 	3.0 for Joomla 2.5, 3+
	Created: 	April 2015

	Author: 	Magdonar Gonz�lez - @magdonar
	Copyright:	Kigune Internet Branding S.L - (C) 2015
	License:	Commertial

	Inspiration:
	Seth Warburton - Internet Inspired! - @nternetinspired
	https://github.com/h5bp/html5-boilerplate
	https://github.com/malarkey/320andup/
	https://github.com/csswizardry/inuit.css
	========================================================================== *

	* INTRODUCTION
	* ============
	*
	* Xtreme is an Object Orientated framework and so attempts to separate out
	* everything into re-usable modules. Unlike most other frameworks it tries
	* to abstract the 'design' away from the layout. The intention is that you
	* never have to do battle with the framework.
	*
	* Breaking everything down into maintainable, and easily digestible, chunks
	* makes it easy to find and change what you want and separating the basic
	* design constructs from their styling makes it possible to easily update
	* the framework without breaking your 'design'.
	*

/* 	==========================================================================
	Primary style
	========================================================================== */
	*, *::after, *::before {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;}
		*::after, *::before {
			content: '';}

	html, body{
		height: 100%}

	html {
		font-size: 100%;
		background-color: #ecf0f1;
		/* scrollbar fix (prevent ugly left pull for lower content sites) */
        overflow-x: hidden;
		overflow-y: scroll;
		-ms-overflow-style: -ms-autohiding-scrollbar;
        -webkit-overflow-scrolling: touch;}

	body {
		font-family: 'Lato', sans-serif;
		font-size: 18px;
		font-size: 1.097rem;
		font-weight: 300;
		line-height: 1.5;
		cursor: default;
		color: #333;
	    background-color: #f9f9f9;}

	/* Colour selected text. */
	::-moz-selection {
		background-color: #00cd57;
		color: white;
		text-shadow: none; }
		::selection {
			background-color: #00cd57;
			color: white;
			text-shadow: none; }

	a {
		color: #00cd57;
		text-decoration: none;}
		a:hover, a:focus {
			color: #00b05b;
			text-decoration: none;}
			a:focus {
				outline: none;
				text-decoration: none;}
	.link a{
		color: #00cd57; }
		.link a:hover{
			text-decoration: underline;}

/*  ==========================================================================
    GRID SYSTEM
    ========================================================================== */
    [class^="grid"],
    [class*="grid"]{
        padding-left: 0;
        margin: 0 auto;
        list-style: none;
        *zoom: 1}
        [class^="grid"]:before, [class*="grid"]:before,
        [class^="grid"]:after, [class*="grid"]:after{
            content: " ";
            display: table;}
            [class^="grid"]:after, [class*="grid"]:after{
              clear: both; }

    /* Columns */
    .column {
        float: left;
        width: 100%;
		padding: 0 0 1em;
        margin: 0 auto;
		list-style: none}
        .column.first,.column.last{
          margin-left: 0 !important; }

	.column.block{
		display: block;}

    /* Others */
    p.last, ul.last, ol.last, li.last, div.last {
        padding-bottom: 0;
        _width: auto !important;
        _float: none !important; }

    /* Responsive grid */
    .grid .item{
        float: left;
        padding: 0 0 1em;
        width: 100%;}

		/* min-width 640px, small screens */
		@media only screen and (min-width: 40em) {
			.grid .item{
				width: 50%;
				width: -webkit-calc(100% / 2);
				width: calc(100% / 2); }
		}

		/* min-width 768px */
		@media only screen and (min-width: 48em) {
			.grid .item{
				width: 33.333333%;
				width: -webkit-calc(100% / 3);
				width: calc(100% / 3); }
		}

		/* min-width 1024px, large screens */
		@media only screen and (min-width: 64em) {
			.grid .item{
				width: 25%;
				width: -webkit-calc(100% / 4);
				width: calc(100% / 4); }
		}

/* 	==========================================================================
   	FIGURES
	========================================================================== */
	figure {
		/*
		* Joomla's 'none' image alignment option defaults centering the image.
		* So we should center the caption, if it exists.
		* Crazy, but true.
		*/
		margin: 0 auto}
		figure img {
			margin-bottom: 0.809em; }
			figure.img-none figcaption {
				text-align: center; }
				figure p{
					margin-bottom: 0;}

/* ==========================================================================
    HEADINGS
   ========================================================================== */
	h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
        font-family: 'PT Sans Narrow', sans-serif;
		font-weight: normal;
		margin: 0 0 1em;
        color: inherit;
		line-height: 1.097;
		text-rendering: optimizelegibility;
		-moz-font-feature-settings: "liga=1, dlig=1";
		-ms-font-feature-settings: "liga" 1, "dlig" 1;
		-o-font-feature-settings: "liga" 1, "dlig" 1;
		-webkit-font-feature-settings: "liga" 1, "dlig" 1;
		font-feature-settings: "liga" 1, "dlig" 1; }

	/* Heading sizes are set with a mixin to maintain vertical rhythm. */
	h1, .h1 {
		font-weight: 600;
		font-size: 26.337px;
		font-size: 1.646rem; }

	h2, .h2 {
		font-size: 24px;
		font-size: 1.5rem; }

	h3, .h3,
	h4, .h4,
	h5, .h5{
		font-size: 18px;
		font-size: 1.097rem;}

	h6, .h6 {
		font-size: 16px;
		font-size: 1rem;
		font-weight: 600;
		line-height: 1.646; }

	h4, .h4,
	h5, .h5,
	h6, .h6{
		margin-top: 1em;}

	/* Extra style for set color of heading */
	.inverse h1, .inverse .h1,
	.inverse h2, .inverse .h2,
	.inverse h3, .inverse .h3{
		color: #fff;}

	/* 	The hyphens CSS property tells the browser how to go about
		splitting words to improve the layout of text when line-wrapping */
	.hyphens{
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		-ms-hyphens: auto;
		-o-hyphens: auto;
		hyphens: auto}

    .typo-sans-narrow{
        font-family: 'PT Sans Narrow', sans-serif;}

/* 	==========================================================================
    LISTS
	========================================================================== */
	ul, ol{
		margin: 0 0 1em; }

/* ==========================================================================
    FORMS
   ========================================================================== */
	/* Some form basics. */
	fieldset {
		min-width: 0;
		padding: 0;
		margin: 0;
		border: 0; }
	form input,
	form select,
	form textarea {
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-ms-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease; }
		form ul {
			list-style-type: none;
			margin-bottom: 0; }

	/* Allow only vertical resizing of textareas. */
	textarea {
		resize: vertical; }

	/* Make checkboxes and radio buttons display inline. */
	label {
		display: inline-block; }

	input[type="radio"],
	input[type="checkbox"] {
		display: inline-block;
		margin-left: 0.4045em;
		margin-right: 0.4045em; }

	select {
		width: 100%;
		height: 2em;
		border: 1px solid #ecf0f1; }

	progress, meter {
		display: block;
		width: 100%;
		height: 1.618em; }

    /* Set & reset some form style */
	form .radio,
	form .checkbox {
		margin-left: 1em; }

    .form-query{
        position: relative; }
        .form-query input{
            padding-right: 80px; }
            .form-query .btn-primary{
                position: absolute;
                top: 0;
                right: 0;
                height: 60px;}

	.form-control,
	.form-group input,
    .form-group select{
		border: 1px solid #e1e5e5;
		color: #999;
		font-family: "Lato", Helvetica, Arial, sans-serif;
		font-size: 16px;
		font-size: 1rem;
		padding: 0 1em;
        margin: 0 auto;
		height: 40px;
		border-radius: 6px;
		-webkit-appearance: none;
		-webkit-box-shadow: none;
		box-shadow: none;
		-webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
		transition: border .25s linear, color .25s linear, background-color .25s linear}

	.form-group.focus .form-control,
	.form-control:focus {
		border-color: #bdc3c7;
		outline: 0;
		-webkit-box-shadow: none;
		box-shadow: none}

	.form-control[disabled],
	.form-control[readonly],
	fieldset[disabled] .form-control {
		background-color: #f4f6f6;
		border-color: #d5dbdb;
		color: #d5dbdb;
		cursor: default}

	.form-control::-moz-placeholder {
		color: #b2bcc5; }
		.form-control:-ms-input-placeholder {
			color: #b2bcc5; }
			.form-control::-webkit-input-placeholder {
				color: #b2bcc5; }

	.form-control.medium{
		max-width: 70%;
	}
	.form-control.small{
		max-width: 24%;
	}

	textarea.form-control {
		padding: 1em;
		height: auto; }

	.control-label {
		display: block;
		width: 100%;}

		#jform_contact_email_copy{
			height: 1.407em;}

	.checkout-layout #main,
	.user-layout #main{
		margin-top: 81px;
		margin-bottom: 80px;
	    background-color: #f9f9f9;
	}
	.user-layout .form-action{
		width: 100%;
	}

/* 	==========================================================================
    AESTHETICS DESIGN
    ========================================================================== */
	.block{
		position: relative;
	}
	.img-border{
		border: 1px solid #2ecc71;
	}
	.img-overlay{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		background-color: #fff;
	}
	.img-thumb-small,
	.img-thumb-large{
		display: block;
	}
	.img-thumb-small{
		width: 60px;
		height: 60px;
		line-height: 0;
	}
	.img-thumb-large{
		width: 400px;
		height: 400px;
	}

	/* Flags icons */
	.flag-icon {
		background-size: contain;
		background-position: 50%;
		background-repeat: no-repeat;
		position: relative;
		display: inline-block;
		width: 1.33333333em;
		line-height: 1em;}
		.flag-icon:before {
			content: "\00a0";}

		.flag-icon.flag-icon-squared {
			width: 1em;}

		.flag-icon-pt {
			background-image: url(../images/pt.svg);}
			.flag-icon-es {
				background-image: url(../images/es.svg);}

/*  ==========================================================================
    NAVBAR DESIGN
    ========================================================================== */
	.navbar-header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 80px;
		z-index: 2;
        background-color: rgba(0, 0, 0, 0.325);}
        body.front .navbar-header,
        body#page-collection .navbar-header{
            position: absolute;
            background: none;}

    /* Primary navbar
    ========================================= */
	/* By default it's hidden */
	.navbar-primary {
		position: fixed;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		padding: 0 5%;
		z-index: 3;
		background-color: #89878c;
		/*overflow: auto;*/
		/* this fixes the buggy scrolling on webkit browsers - mobile devices only - when overflow property is applied */
		-webkit-overflow-scrolling: touch;
		visibility: hidden;
		opacity: 0;
		-webkit-transition: visibility 0s, opacity 0.3s;
		-moz-transition: visibility 0s, opacity 0.3s;
		transition: visibility 0s, opacity 0.3s;}

		/* Navigation visible at the end of the circle animation */
		.navbar-primary.fade-in {
			visibility: visible;
			opacity: 1; }

			.navbar-primary ul {
				list-style: none;
				margin: 0 auto;
				padding-left: 0}

	/* Item list - Fst level */
	.navbar-primary .nav-primary li {
		margin: 1.097em 0;
		text-align: center; }

		/*.navbar-primary .nav-primary li a + ul{
			margin-top: 1.097em; }*/

        .navbar-primary .nav-primary li:first-child {
            margin-top: 0;}

		.navbar-primary .nav-primary a {
			width: 100%;
			color: #eeeef0;
            padding: 0;
			font-size: 18px;
			font-size: 1.097rem;
            font-family: 'PT Sans Narrow', sans-serif;
            text-shadow: none;
            text-transform: uppercase;
			background: none;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			-webkit-transition: color 0.2s;
			-moz-transition: color 0.2s;
			transition: color 0.2s; }
			.no-touch .navbar-primary .nav-primary a:hover {
			  	color: #00cd57; }
				.navbar-primary .nav-primary > .active > a,
				.no-touch .navbar-primary .nav-primary > .active > a:hover,
				.navbar-primary .nav-primary > .active > a:focus,
				.navbar-primary .nav-primary > .active > a:active{
					color: #3e4359; }

		.navbar-primary .nav-primary > li > span {
			display: inline-block;
			padding-bottom: 0.217em;
			margin-bottom: 1em;
			color: #3e4359;
			border-bottom: 2px solid #3e4359}

	/* Item list - 2nd level  */
	.navbar-primary .nav-primary .nav-child > li {
		margin: 0 auto 0.667em;}
		.navbar-primary .nav-primary .active .nav-child .active > a,
		.no-touch .navbar-primary .nav-primary .active .nav-child .active > a:hover,
		.navbar-primary .nav-primary .active .nav-child .active > a:focus,
		.navbar-primary .nav-primary .active .nav-child .active > a:active{
			color: #3e4359; }

    /* Brand logo */
    .navbar-primary .valign{
        padding-top: 40px;}

    .navbar-primary .brand{
        display: none;
        position: absolute;
        top: 0.488em;
        left: 0;
        right: 0;
        margin: 0 auto;
        height: 60px;}

	/* Applying media queries */
	@media only screen and (min-width: 768px) {
	.navbar-primary .nav-primary li {
		margin: 2.107em 0; }
		.nav-primary .nav-primary a {
			font-size: 28px;
			font-size: 1.75rem;}
	}

	@media only screen and (min-width: 1170px) {
		.navbar-primary .nav-primary a {
			font-size: 29px;
			font-size: 1.646rem;}
	}

	/* Containers of the 2 main rounded backgrounds.
	   These containers are used to position the rounded bgs behind the menu icon */
	.nav-overlay,
	.nav-overlay-content {
		position: fixed;
		top: 1em;
		left: 3.3em;
		height: 4px;
		width: 4px;
		-webkit-transform: translateX(-20px) translateY(20px);
		-moz-transform: translateX(-20px) translateY(20px);
		-ms-transform: translateX(-20px) translateY(20px);
		-o-transform: translateX(-20px) translateY(20px);
		transform: translateX(-20px) translateY(20px); }

		/* Applying media queries */
		@media only screen and (min-width: 640px) {
			.nav-overlay,
			.nav-overlay-content {
				left: 4.1em;}
		}

		/* Applying media queries */
		@media only screen and (min-width: 768px) {
			.nav-overlay,
			.nav-overlay-content {
				left: 8.333%;}
		}

		.nav-overlay span,
		.nav-overlay-content span {
			display: inline-block;
			position: absolute;
			border-radius: 50%;
			/* Force Hardware Acceleration in WebKit */
			-webkit-transform: translateZ(0);
			-moz-transform: translateZ(0);
			-ms-transform: translateZ(0);
			-o-transform: translateZ(0);
			transform: translateZ(0);
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			will-change: transform;
			-webkit-transform-origin: 50% 50%;
			-moz-transform-origin: 50% 50%;
			-ms-transform-origin: 50% 50%;
			-o-transform-origin: 50% 50%;
			transform-origin: 50% 50%;
			-webkit-transform: scale(0);
			-moz-transform: scale(0);
			-ms-transform: scale(0);
			-o-transform: scale(0);
			transform: scale(0); }

		/* background fades out at the end of the animation */
		.nav-overlay.is-hidden,
		.nav-overlay-content.is-hidden {
			opacity: 0;
			visibility: hidden;
			-webkit-transition: opacity .3s 0s, visibility 0s .3s;
			-moz-transition: opacity .3s 0s, visibility 0s .3s;
			transition: opacity .3s 0s, visibility 0s .3s;}

		/* main rounded colored bg 1 */
		.nav-overlay {
			z-index: 2;}
			.nav-overlay span {
				background-color: #00cd57;}

		/* main rounded colored bg 2 */
		.nav-overlay-content {
			z-index: 4; }
			.nav-overlay-content span {
				background-color: #3e4359; }

    /* Navbar trigger
    ========================================= */
    .nav-trigger {
    	display: inline-block;
    	position: fixed;
    	top: 1em;
    	left: 5%;
    	height: 44px;
    	width: 44px;
    	z-index: 1020;
    	/* image replacement */
    	overflow: hidden;
    	text-indent: 100%;
    	white-space: nowrap; }

    /* icon created in CSS */
    .nav-trigger .nav-icon {
    	position: absolute;
    	left: 50%;
    	top: 50%;
    	bottom: auto;
    	right: auto;
    	display: inline-block;
    	width: 18px;
    	height: 3px;
    	background-color: #fff;
    	-webkit-transform: translateX(-50%) translateY(-50%);
    	-moz-transform: translateX(-50%) translateY(-50%);
    	-ms-transform: translateX(-50%) translateY(-50%);
    	-o-transform: translateX(-50%) translateY(-50%);
    	transform: translateX(-50%) translateY(-50%);
    	z-index: 10; }

    /* upper and lower lines of the menu icon */
    .nav-trigger .nav-icon::before,
    .nav-trigger .nav-icon:after {
    	position: absolute;
    	top: 0;
    	right: 0;
    	width: 100%;
    	height: 100%;
    	background-color: #fff;
    	/* Force Hardware Acceleration in WebKit */
    	-webkit-transform: translateZ(0);
    	-moz-transform: translateZ(0);
    	-ms-transform: translateZ(0);
    	-o-transform: translateZ(0);
    	transform: translateZ(0);
    	-webkit-backface-visibility: hidden;
    	backface-visibility: hidden;
    	/* apply transition to transform property */
    	-webkit-transition: -webkit-transform .3s;
    	-moz-transition: -moz-transform .3s;
    	transition: transform .3s;}
    	.nav-trigger .nav-icon::before {
    		-webkit-transform: translateY(-6px) rotate(0deg);
    		-moz-transform: translateY(-6px) rotate(0deg);
    		-ms-transform: translateY(-6px) rotate(0deg);
    		-o-transform: translateY(-6px) rotate(0deg);
    		transform: translateY(-6px) rotate(0deg);}
    		.nav-trigger .nav-icon::after {
    			-webkit-transform: translateY(6px) rotate(0deg);
    			-moz-transform: translateY(6px) rotate(0deg);
    			-ms-transform: translateY(6px) rotate(0deg);
    			-o-transform: translateY(6px) rotate(0deg);
    			transform: translateY(6px) rotate(0deg);}

    	/* 2 rounded colored backgrounds for the menu icon */
    	.nav-trigger::before,
    	.nav-trigger::after {
    		position: absolute;
    		top: 0;
    		left: 0;
    		border-radius: 50%;
    		height: 100%;
    		width: 100%;
    		/* Force Hardware Acceleration in WebKit */
    		-webkit-transform: translateZ(0);
    		-moz-transform: translateZ(0);
    		-ms-transform: translateZ(0);
    		-o-transform: translateZ(0);
    		transform: translateZ(0);
    		-webkit-backface-visibility: hidden;
    		backface-visibility: hidden;
    		-webkit-transition-property: -webkit-transform;
    		-moz-transition-property: -moz-transform;
    		transition-property: transform;}
    		.nav-trigger::before {
    			background-color: #00cd57;
    			-webkit-transform: scale(1);
    			-moz-transform: scale(1);
    			-ms-transform: scale(1);
    			-o-transform: scale(1);
    			transform: scale(1);
    			-webkit-transition-duration: 0.3s;
    			-moz-transition-duration: 0.3s;
    			transition-duration: 0.3s;
    			-webkit-transition-delay: 0.4s;
    			-moz-transition-delay: 0.4s;
    			transition-delay: 0.4s;}
    			.nav-trigger::after {
    				background-color: #3e4359;
    				-webkit-transform: scale(0);
    				-moz-transform: scale(0);
    				-ms-transform: scale(0);
    				-o-transform: scale(0);
    				transform: scale(0);
    				-webkit-transition-duration: 0s;
    				-moz-transition-duration: 0s;
    				transition-duration: 0s;
    				-webkit-transition-delay: 0s;
    				-moz-transition-delay: 0s;
    				transition-delay: 0s;}

    	/* user clicks on the .nav-trigger element - 1st rounded background disappears */
    	.nav-trigger.close-nav::before {
    	  -webkit-transform: scale(0);
    	  -moz-transform: scale(0);
    	  -ms-transform: scale(0);
    	  -o-transform: scale(0);
    	  transform: scale(0);}

    	/* user clicks on the .nav-trigger element - 2nd rounded background appears */
    	.nav-trigger.close-nav::after {
    	  -webkit-transform: scale(1);
    	  -moz-transform: scale(1);
    	  -ms-transform: scale(1);
    	  -o-transform: scale(1);
    	  transform: scale(1);
    	  -webkit-transition-duration: 0.3s;
    	  -moz-transition-duration: 0.3s;
    	  transition-duration: 0.3s;
    	  -webkit-transition-delay: 0.4s;
    	  -moz-transition-delay: 0.4s;
    	  transition-delay: 0.4s;}

    	/* user clicks on the .nav-trigger element - transform the icon */
    	.nav-trigger.close-nav .nav-icon {
    		background-color: rgba(255, 255, 255, 0);}
    		.nav-trigger.close-nav .nav-icon::before,
    		.nav-nav-trigger.close-nav .nav-icon::after {
    			background-color: white;}
    			.nav-trigger.close-nav .nav-icon::before {
    				-webkit-transform: translateY(0) rotate(45deg);
    				-moz-transform: translateY(0) rotate(45deg);
    				-ms-transform: translateY(0) rotate(45deg);
    				-o-transform: translateY(0) rotate(45deg);
    				transform: translateY(0) rotate(45deg);}
    				.nav-trigger.close-nav .nav-icon::after {
    					-webkit-transform: translateY(0) rotate(-45deg);
    					-moz-transform: translateY(0) rotate(-45deg);
    					-ms-transform: translateY(0) rotate(-45deg);
    					-o-transform: translateY(0) rotate(-45deg);
    					transform: translateY(0) rotate(-45deg);}

	/* Social media links
    ========================================= */
	.nav-social > li > a{
		padding: 0;
		line-height: 1;}
		.nav-social > li > a .icon{
			font-size: 2.105em; }
			.nav-social > li > a span{
				position: absolute;
				top: -999em;}

	/* Only for header panel */
	.navbar-header .nav-social{
		display: none;
		visibility: hidden;}

	/* Only for primary nav */
	.navbar-primary .nav-social{
		width: 100%;
		margin: 0.488em auto;
		text-align: center;}
		.navbar-primary .nav-social > li > a{
			padding: 0 0.325em;
			color: #fff;}
			.navbar-primary .nav-social > li > a:hover{
				color: #f0c000;}

			.navbar-primary .nav-social > li:last-child{
				display: none;
				visibility: hidden;}

		.navbar-primary .nav-footer{
			display: none;
			visibility: hidden;}

/*  ==========================================================================
    COMPONENTS
    ========================================================================== */
    /*body.front,
    body#page-collection {
        height: 10%;}*/

	.container,
	.container-fluid{
		width: 90%;
		margin-left: auto;
		margin-right: auto;}
		.container{
			max-width: 70em;}

	.box{
		position: relative;}

	.caption{
		position: relative;
		z-index: 1}

	.narrow{
        max-width: 840px;
        margin-right: auto;
        margin-left: auto;}
        .narrow-xs{
            max-width: 455.838px !important;}
            .narrow-sm{
                max-width: 623.077px !important;}
                .narrow-lg{
                    max-width: 683.762px !important;}

	.pagination > .active > a,
	.pagination > .active > span,
	.pagination > .active > a:hover,
	.pagination > .active > span:hover,
	.pagination > .active > a:focus,
	.pagination > .active > span:focus{
		 z-index: 0;
	 }

/*  ==========================================================================
    HEADER
    ========================================================================== */
	.brand{
		margin: 0 auto;
        width: 200px;
        height: 80px;
    	text-align: center;}

	.logo {
		display: block;
		margin: 0 auto;
        width: 187px;
        height: 100%;
		background-size: 100% auto;
        background: url(../images/logo_molnlycke_small.png) no-repeat center;}

/*  ==========================================================================
    FOOTER
    ========================================================================== */
	.footer-layout{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		font-size: 90%;
		padding-top: 1.5em;
		background-color: #ecf0f1;
		border-top: 1px solid rgba(0, 0, 0, 0.05);
		z-index: 1}

		.search-layout .footer-layout{
			position: relative;
		}

	/* Menu links */
	.nav-footer{
		width: 100%;
		text-align: center;}
		.nav-footer > li > a{
			font-weight: 400;
			padding: 0;
			padding-right: 1em;}
			.nav-footer > li:last-child > a{
				padding-right: 0;}

			.nav-footer > li > a span{
				display: block;}


	/* Copyright */
	.copyright,
	.copyright a{
		color: #888;}
		.copyright a:hover{
			text-decoration: underline}

/*  ==========================================================================
    CONTENT & PAGES
    ========================================================================== */
	.wrapper{
		width: 100%;
		min-height: 450px;
		padding-top: 80px;}
		.front .wrapper{
			height: 100%; }

	.spotlight{
		position: relative;
		width: 100%;
		height: 100%;
		background-color: #eeeef0;
		z-index: 1}
		.spotlight::before{
			position: absolute;
			width: 50%;
			height: 100%;
			content: " ";
			background-color: #3e4359;
			z-index: 0}
		.spotlight .billboard{
			position: relative;
			z-index: 2}

    .full-width{
        width: 100%; }

    #mxcpr{
        display: block;
        visibility: hidden;}

		.table-responsive{
			margin-bottom: 0;}

    /* Home page
    ========================================= */
    .front{
        background-image: url(../images/backround-cover.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;}

    .front .wrapper,
    .category-layout .wrapper{
        padding-top: 0;}

    .front .content-full,
    .category-layout .content-full{
        width: 100%;
        height: 100%}

    .front .navbar-header h1{
        visibility: hidden;
        display: none;}

        #page-default.category-layout .navbar-header h1{
            visibility: visible;
            display: inherit;}

			#page-product-list.category-layout .shop{
				margin-bottom: 80px}

    /* Billboard */
    .billboard{
		display: table;
		width: 100%;
        height: 100%;}
        .billboard .container{
			display: table-cell;
			vertical-align: middle;
            height: 100%;
            min-height: 100%;
            width: 100%;
            max-width: 100%; }

    .front .billboard .column{
        padding-top: 4.741em;
        padding-bottom: 4.741em;}
        .front .billboard .column.first{
            color: #fff;
            background-color: #3e4359;}
            .front .billboard .column.last{
                background-color: #eeeef0;}

    .billboard h2{
		margin-bottom: 0}
    .billboard h2 + p{
		display: none;
        width: 90%;
        margin: 0 auto;}
		/* 640up Applying media queries */
		@media only screen and (min-width: 40em) {
			.billboard h2{
				margin-bottom: .488em}
			.billboard h2 + p{
				display: block;}
		}

    .billboard .nav-links{
        margin-top: 2.25em;}
        .billboard .nav-links li + li{
            margin-left: 0.444em;}
            .billboard .nav-links li a{
                width: 120px;}

    .billboard .thumb{
        margin-bottom: 2.649em;}
        .billboard .thumb img{
            width: 260px;
            height: 260px;
            border-radius: 100%;}

    /* Headers */
    .content-full{
        padding-top: 0;}

    .header{
        position: relative;
        margin-left: -5%;
        margin-right: -5%;
        height: 80px;}
		.header-offset{
			margin-top: 4.5em;}

	.header-cover{
		background-color: rgba(255,34,34,.8);
		background-color: #fff;
	}

    /* Product collection */
    .category-layout #hero{
        padding-top: 4.741em;
        padding-bottom: 4.741em;
        color: #fff;
        background-color: #3e4359;}
        #page-default.category-layout #hero{
            padding: 0;
            color: inherit;
            background: none;}

        #page-default.category-layout .shop{
            margin: 0 auto;
            background: none;}

    /* Search page
    ========================================= */
    /* Module */
    .search-fixed-top{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1021;
		background: none}

		.search-fixed-top .collapse {
			width: 100%;
			padding-left: 5%;
			padding-right: 5%;
        	background-color: #BDC3C7;}
			.search-fixed-top .collapse.in {
		        -webkit-animation: bounceInDown 683ms;
		        animation: bounceInDown 683ms;}

        .search-fixed-top .form-group{
            padding: 0.732em 0;
            margin-bottom: 0}

        .search-fixed-top .form-control{
            height: 60px;
            padding-left: 60px;
            padding-right: 60px;
            color: #7F8C8D;
            font-family: 'PT Sans Narrow', sans-serif;
            font-size: 1.5em;
            text-transform: uppercase;
            border: none;
            background: none;}
			.search-fixed-top .form-control::-moz-placeholder {
				color: #7F8C8D; }
				.search-fixed-top .form-control:-ms-input-placeholder {
					color: #7F8C8D; }
					.search-fixed-top .form-control::-webkit-input-placeholder {
						color: #7F8C8D; }

        .search-fixed-top .toogle-collapse{
            position: fixed;
            top: 0.732em;
            right: 5%;
            color: #00cd57;
            z-index: 1022;}
            .search-fixed-top .toogle-collapse:hover{
                color: #3e4359;}

			.search-fixed-top .icon-search.is-active::before {
			    content: "\e043"}

				#page-home .search-fixed-top .toogle-collapse,
				#page-collection .search-fixed-top .toogle-collapse{
					color: #7F8C8D}

    .search-layout .result-view .qty input{
		text-align: center;
		padding-left: 0;
		padding-right: 0; }

    .splash-bordered{
        margin: 1.5em auto;
        padding: 1.5em;}


    /* User account page
    ========================================= */
    .user-layout .profile-data{
        padding-bottom: 1em;}

    .user-layout .nav-stacked > li + li{
        margin-top: 1em;}

    .user-layout .nav-stacked > li > a{
        padding: 1em 1.5em;
        border: 1px solid #00cd57;}

    .user-layout .nav-stacked > li > a:hover,
    .user-layout .nav-stacked > li > a:focus,
    .user-layout .nav-stacked > li > a:active{
        color: #fff;
        background-color: #00cd57;}

	/* Login page
    ========================================= */

	.login-layout .content-full{
		margin-top: 0;}
    .login-layout,
	.login-layout .content-full{
		height: 100%;}

	.remind-layout,
	.remind-layout .content-full{
		height: 100%;}

    .login-layout .footer-layout{
        position: fixed;
        left: 0;
        right: 0;
        bottom: -100%;
		z-index: 2;}
        .login-layout .nav-footer{
            visibility: hidden;}

        .login-layout .form-links{
            margin: 1em 0 0}

        .form-control.validate-username::before{
            display: block;
            color: red;
            width: 40px;
            border-right: 1px solid #b2bcc5;
            content: "\e674";
            speak: none;
            font-family: 'icomoon';
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            text-align: left;
            line-height: inherit;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;}

	.form-login label{
		display: block;
		font-size: 10px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 2px;
	}

	.form-login .form-group input{
		width: 90%
	}


    /* 640up Applying media queries */
    @media only screen and (min-width: 40em) {

		.login-layout .footer-layout{
			height: 80px;
	        bottom: 0}

		.login-layout .content-full{
			display: table;
			margin: 0 auto;
			width: 100%;
			height: 100%;
			padding-bottom: 80px;
			table-layout: fixed;}

		.login-layout .login-wrapper{
			display: table-cell;
			vertical-align: middle;}

	    .login-layout .caption{
	        padding-left: 3.375em;
	        padding-right: 3.375em;
	        background-color: rgba(255, 255, 255, 0.5);
	        -webkit-background-clip: padding-box;
	        background-clip: padding-box;
	        border: 1px solid #bdc3c7;
	        border: 1px solid rgba(0, 0, 0, .15);
	        border-radius: 0.325em;
	        -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
	        box-shadow: 0 6px 12px rgba(0, 0, 0, .175);}

	}

    .login-layout .form-control::-moz-placeholder {
        font-family: 'PT Sans Narrow', sans-serif;
        text-transform: uppercase;
        color: #b2bcc5; }
        .login-layout .form-control:-ms-input-placeholder {
            font-family: 'PT Sans Narrow', sans-serif;
            text-transform: uppercase;
            color: #b2bcc5; }
            .login-layout .form-control::-webkit-input-placeholder {
                font-family: 'PT Sans Narrow', sans-serif;
                text-transform: uppercase;
                color: #b2bcc5; }

	.login-layout img.img-logo{
		max-width: 200px
	}

/*  ==========================================================================
    SHOP LAYPOUT
    ========================================================================== */

	.codeprod{
		color: #bdc3c7;}

    /* Category bucket */
    .shopping-cart{
        position: fixed;
        top: 80%;
        right: 5%;
        width: 60px;
        height: 60px;
				z-index: 9}
        .shopping-cart a{
            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: 1em;
            line-height: 60px;
            border-radius: 100%;
            background-color: #BDC3C7;}
            .shopping-cart a .icon{
                font-size: 1.097em;}

    /* Checkout page
    ========================================= */
    .summary.table-responsive h3{
        margin-top: 1em;
        margin-bottom: 0;}
    .cart-layout .product-qty .center-block{
        max-width: 120px;}
    .cart-layout .cart-reload.pull-left{
        margin-left: 0.488em;}

    /* Product details page
    ========================================= */
	.product-layout .summary{
		text-align: center; }

    .product-layout .product-title,
    .product-layout .product-price {
        font-weight: bold; }

    .product-layout .product-price {
        font-size: 2.25em;
        font-family: 'PT Sans Narrow', sans-serif;
        margin: 0.488em auto;}

    .product-layout .product-image img{
        width: 100%;
		max-width: 80%;
		margin: 0 auto;}

	.product-layout .action-buttons{
		max-width: 60%;
		margin: 0 auto;}
		.product-layout .btn-qty {
			width: 48%;
			max-width: 100%;
			margin: 0 auto;}
			.product-layout .buttons{
				float: right;
				width: 48%;
				margin: 0 auto;}

		.product-layout .button_back{
			padding-bottom: 0 !important}

			.product-layout form{
				padding-bottom: 120px;}

    /* Category bucket
    ========================================= */
    .list-categories{
        height: 100%;}
        .list-categories .container{
            width: 90%;}

    .list-categories .bucket{
        float: left;
        width: 100%;
		font-size: 0.875em;
        margin: 1.5em auto;
        border-radius: 0.217em;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;}
		.list-categories .bucket.full-size .grid2col .column {
		    width: 100%;}

    /* Caption */
    .list-categories .bucket .content{
        display: table;
        width: 100%;
        min-height: 100%;
        padding: 10%;
        border: 1px solid #BDC3C7;
        border-top: none;
		border-bottom-left-radius: .325em;
		border-bottom-right-radius: .325em;
        margin: 0 auto;
	background-color: #fff}
	    .list-categories .bucket .content .card-category-nav{
			height: 100%;
			max-height: 300px;
			overflow-y: auto}

	.list-categories .bucket .list-overflow{
		position: relative;
		z-index: 1;}
		.list-categories .bucket .list-overflow .nav{
			margin-bottom: 1.5em}

	.list-categories .bucket .list-overflow::before{
		position: absolute;
		right: 0;
		left: 0;
		bottom: 0;
		width: 99%;
		height: 90px;
		margin: 0 auto;
		background: rgba(0, 0, 0, 0) linear-gradient(to top, #fff 24%, rgba(255, 255, 255, 0) 88%) repeat scroll 0 0;
	    pointer-events: none;
	    transition: opacity 500ms ease 0s;
		border-bottom-left-radius: .325em;
		border-bottom-right-radius: .325em;
		z-index: 3;}

        .list-categories .bucket .content h3{
            font-family: 'Lato', sans-serif;
            text-transform: uppercase;
            font-size: 1em;
            margin-bottom: 0.488em;
            padding-bottom: 0.488em;
            border-bottom: 1px solid #eeeef0;}

        .list-categories .bucket .content li + li{
            display: block;
            float: left;
            width: 100%;
            margin-top: 0.325em;
            padding-top: 0.325em;
            border-top: 1px solid #eeeef0;}

        .list-categories .bucket .content a{
            position: relative;
            display: block;
            width: 100%;
            color: #666;
            padding: 0;
			text-transform: lowercase;
            padding-right: 1em;}
            .list-categories .bucket .content a:hover,
            .list-categories .bucket .content a:focus,
            .list-categories .bucket .content a:active{
                color: #00cd57;
                background: none;
                text-decoration: none;}

    /* Glyph */
    .list-categories .bucket [class^="icon-"],
    .list-categories .bucket [class*=" icon-"]{
        position: absolute;
        top: 0;
        right: 0;
        width: 1em;
        height: 1em;
        line-height: 1.405em;
        margin: 0 auto;}

    /* Figure */
    .list-categories .bucket .thumb{
        height: 180px;
        margin: 0 auto;
		background-color: #BDC3C7;}
		.list-categories .bucket .thumb,
		.list-categories .bucket .thumb .image-cover,
		.list-categories .bucket .thumb img{
			border-top-left-radius: .325em;
	        border-top-right-radius: .325em}
        .list-categories .bucket .thumb img{
            width: 100%}

    /* Product list
    ========================================= */
    .list-products{
        /*height: 100%;*/
        color: #666;
		font-size: 0.875em;
        background-color: #f9f9f9; }
		.list-products.container-fluid{
			padding-left: 3%;
			padding-right: 3%;
			width: 100%; }
        .list-products .table > thead > tr > th,
        .list-products .table > tbody > tr > th,
        .list-products .table > tfoot > tr > th{
			font-size: 16px;
            font-size: 1rem;
            font-weight: 400;
            font-family: 'PT Sans Narrow', sans-serif;
            text-transform: uppercase;
			color: #333;
            padding-top: 2.107em;}

        .list-products .qty .form-control{
			text-align: center;
            max-width: 5.556em}

        .list-products .add-to-cart{
            font-weight: bold;
            font-family: 'PT Sans Narrow', sans-serif;
            color: #3e4359;
            padding: 0;
            box-shadow: none;
            background: none;}
            .list-products .add-to-cart .btn{
                float: right;
                padding: 0;
                border: none;
                color: #3e4359;margin-right: 0.444em;
                text-transform: uppercase;}
                .list-products .add-to-cart .btn:hover,
                .list-products .add-to-cart .btn:focus,
                .list-products .add-to-cart .btn:active{
                    color: #00cd57;
                    background: none;}
                .list-products .add-to-cart .icon{
                    font-size: 1.405em;
                    line-height: 1;}

					.list-products .add-to-cart .text{
						padding-top: 0.1em;
						margin-right: 0.667em;}

	/* Attr */
	.attributes{
		margin: 1em auto;
		padding: 1em 0;
		border-top: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
		clear: both;}

		.table .attributes{
			padding-top: 0;
			padding-bottom: 0;
			margin: 0 auto;
			border: none;}

	.attributes .attr-title{
		float: left;
		position: relative;
		top: .325em;}
		.attributes .attr-value{
			position: relative;
			float: right;
			min-width: 12.5em;
			width: auto;}
			.attributes .attr-value .inputbox{
				padding: 0.5em;}

		.attributes .prod_attr_img{
			display: none;}

		/* shared style for input elements */
		select.inputbox,
		.cd-filter-block .radio-label::before,
		.cd-filter-block .checkbox-label::before {
			background-color: #fff;
			-webkit-border-radius: 6px;
			-moz-border-radius: 6px;
			border-radius: 6px;
			border: 2px solid #ecf0f1;}

		select.inputbox  {
			position: relative;
			width: 100%;
			padding: .732em;
			padding-right: 40px;
			cursor: pointer;
			font-size: 14px;
			font-size: 0.875rem;
			-webkit-appearance: none;
			-moz-appearance: none;
			-ms-appearance: none;
			-o-appearance: none;
			appearance: none;
			box-shadow: none;}
			select.inputbox:focus {
				outline: 0;
				background-color: #fff;
				border-color: #bdc3c7;}

		/* switcher arrow for select element */
		select.inputbox::after,
		.attributes .prod_attr_img {
			display: block;
			content: "";
			position: absolute;
			right: 0;
			top: 0;
			width: 40px;
			height: 100%;
			margin: 0 auto;
			background: url("../images/cd-icon-arrow.svg") no-repeat center;
			pointer-events: none;
			border-left: 2px solid #ecf0f1;
			z-index: 1;}
		select.inputbox::-ms-expand {
			display: none;}

    /* Filter toolbar
    ========================================= */
    .navbar-filter{
        width: 100%;
        height: 60px;
        max-width: 100%;
        background-color: #fff;}

    /* Navbar category */
    .primary-category{
        height: 60px;
        width: 100%;
        max-width: 640px;
        text-align: center;
        margin: 0 auto;}
        .primary-category.fullsize{
            max-width: 100%;
            background-color: #fff;}

        .primary-category .nav > li{
            display: inline-block;
            _display: inline;
            _zoom:1;
            position: relative;
            height: 60px;}
			.primary-category .nav > li + li{
				margin-left: 1em;}
	            .nav-category .nav > .active{
	                z-index: 2;}

        .primary-category .nav > li > a,
        .primary-category .nav > li .block{
            display: table;
            height: 100%;
            color: #a6a6b2;
            font-family: 'PT Sans Narrow', sans-serif;
            font-size: 1em;
            text-transform: uppercase;}
            .primary-category .nav > li > a span,
            .primary-category .nav > li > .block span,
			.primary-category .nav > li > a .icon{
                display: none;
                vertical-align: middle;
                height: 100%;}

				.primary-category .nav > li > a .icon{
					display: table-cell;
				    font-size: 1.405em;}

                @media only screen and (min-width: 40em) {
					.primary-category .nav > li + li{
						margin-left: 0;}
					.primary-category .nav > li > a{
						background: none;}
	                .primary-category .nav > li > a span,
	                .primary-category .nav > li > .block span{
	                    display: table-cell;}
					    .primary-category .nav > li > a .icon{
							display: none;
							visibility: hidden;
						}
				}

        .no-touch .primary-category .nav > li > a:hover,
        .primary-category .nav > li > a:active{
			opacity: 0.732;
            color: #00cd57}

        .primary-category .nav > .active > a,
        .primary-category .nav > .active > a:focus,
        .primary-category .nav > .active > a:active,
        .no-touch .primary-category .nav > .active > a:hover,
        .primary-category .nav > .active > .block{
			opacity: 1;
            color: #3e4359;}

		/* Arrow indicator for active menu */
        .primary-category .nav > .active:after {
        	top: 100%;
        	left: 50%;
        	border: solid transparent;
        	content: " ";
        	height: 0;
        	width: 0;
        	position: absolute;
        	pointer-events: none;
        	border-color: rgba(255, 255, 255, 0);
        	border-top-color: #ffffff;
        	border-width: 18px;
        	margin-left: -18px;}

    /* Header */
    .header-category{
        width: 100%;
        height: 40px;
        background-color: #ecf0f1;}
        .header-category h4{
            font-size: 0.732em;
            text-transform: uppercase;
            line-height: 40px;
            margin: 0 auto;}

    /* Filter sidebar */
    .cd-filter {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        min-width: 280px;
        max-width: 450px;
        min-height: 450px;
        margin-top: 80px;
        padding-top: 60px;
        padding-bottom: 24px;
        background: #ffffff;
        box-shadow: 4px 4px 20px transparent;
        z-index: 2;
        /* Force Hardware Acceleration in WebKit */
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        transform: translateX(-100%);
        -webkit-transition: -webkit-transform 0.3s, box-shadow 0.3s;
        -moz-transition: -moz-transform 0.3s, box-shadow 0.3s;
        transition: transform 0.3s, box-shadow 0.3s; }

        .cd-filter .scrollable{
            position: relative;
            display: block;
            height: 100%;}

        /* top colored heading bar */
        .cd-filter::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            height: 60px;
            width: 100%;
            background-color: #3e4359;
            z-index: 2; }

		.cd-filter .container {
			max-width: 80%;
            margin-top: 1.405em;}

        /* Navigation */
        .cd-filter .nav {
            display: block;
            width: 100%;
            height: 100%;}
        .cd-filter .nav > li > a {
            color: #89878c;
            padding: 0 0 0.667em;
            font-size: 14px;
			font-size: 0.875rem;
            text-transform: uppercase;}
            .no-touch .cd-filter .nav > li > a:hover,
            .cd-filter .nav > li > a:focus,
            .cd-filter .nav > li > a:active {
                color: #3e4359;
                background: none;}
                .cd-filter .nav > .active > a,
                .cd-filter .nav > .active > a:focus,
                .cd-filter .nav > .active > a:active,
                .no-touch .cd-filter .nav > .active > a:hover {
                    color: #00cd57;}

		.cd-filter .nav > .level-2 > .category-title,
		.cd-filter .nav > .level-2.active > .category-title{
			display: block;
			font-family: "PT Sans Narrow",sans-serif;
			font-size: 18px;
			font-size: 1.097rem;
            color: #3e4359;
			padding-bottom: 0.488em;
			margin-bottom: 1em;
			border-bottom: 1px solid #e1e5e5}
			.cd-filter .nav > .level-2.active > a:focus,
			.cd-filter .nav > .level-2.active > a:active,
			.no-touch .cd-filter .nav > .level-2.active > a:hover {
				color: #3e4359;}

        .cd-filter .nav > .level-4 > a {
            display: block;
            padding-left: 2em;
            text-transform: none}

        /* Close button */
        .cd-filter .cd-close {
            position: absolute;
            top: 0;
            right: 0;
            width: 60px;
            height: 60px;
            line-height: 60px;
            color: #787e8c;
            font-size: 1.5em;
            text-align: center;
            background: none;
            border: none;
            opacity: 0;
            -webkit-transition: opacity 0.3s;
            -moz-transition: opacity 0.3s;
            transition: opacity 0.3s;
            z-index: 3;}
            .no-touch .cd-filter .cd-close:hover {
                color: #fff; }

        /* Activation */
        .cd-filter.filter-is-visible {
            -webkit-transform: translateX(0);
            -moz-transform: translateX(0);
            -ms-transform: translateX(0);
            -o-transform: translateX(0);
            transform: translateX(0);
            box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.2);}
            .cd-filter.filter-is-visible .cd-close {
                opacity: 1;}

            @media only screen and (min-width: 64em) {

				.filter-offset {
					padding-left: 300px;}

				.brand{
					position: relative;
					width: 100%;
					text-align: center;
					margin-right: 0;
				}

	            .cd-filter form {
	                    padding: 70px 10%;}

				.cd-filter .cd-filter-inner{
					padding-left: 18%;}
					.cd-filter .container {
						margin-left: 0;
						margin-right: 0;
						max-width: 88%;}

				.cd-filter,
				.cd-filter.filter-is-visible {
					-webkit-transform: translateX(0);
					-moz-transform: translateX(0);
					-ms-transform: translateX(0);
					-o-transform: translateX(0);
					transform: translateX(0);
					box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.1);}

					.cd-filter .cd-close,
					.cd-filter.filter-is-visible .cd-close {
						display: none;
						visibility: hidden;}

			/* Only for category level */
			.category-layout .cd-filter,
			.product-layout .cd-filter{
				top: -80px;
                width: 300px;
				padding-top: 80px;
			}
			.category-layout .cd-filter::before,
			.category-layout .cd-filter .cd-filter-trigger,
			.product-layout .cd-filter::before,
			.product-layout .cd-filter .cd-filter-trigger {
				height: 80px;
			}

			.category-layout .cd-filter .cd-filter-trigger,
			.product-layout .cd-filter .cd-filter-trigger{
				line-height: 80px
			}
			.category-layout .navbar-header,
			.product-layout .navbar-header {
				float: left;
				/*width: calc(100% - 300px);*/
				left: auto;
				right: 0;
			}

			#page-product-list .navbar-header,
			#page-product-list .navbar-header {
				width: calc(100% - 300px);
			}

			.category-layout .nav-trigger,
			.product-layout .nav-trigger{
				margin-left: 0
			}

			#page-product-list .nav-trigger,
			#page-product-list .nav-trigger{
				margin-left: 300px
			}
		}

        /* Trigger button */
        .cd-filter-trigger {
            position: absolute;
            top: 0;
            left: 0;
            height: 60px;
            line-height: 60px;
            width: 60px;
            border: none;
            margin-left: 5%;
            /* image replacement */
            overflow: hidden;
            text-indent: 100%;
            color: transparent;
            white-space: nowrap;
            background: transparent url("../images/cd-icon-filter.svg") no-repeat left center;
            z-index: 1;}
            .cd-filter-trigger.filter-is-visible {
                pointer-events: none;}
            .cd-filter .cd-filter-trigger.filter-is-visible {
                z-index: 2;
                margin-left: 16%;
                pointer-events: auto;}

                @media only screen and (min-width: 64em) {
                .cd-filter-trigger {
                    width: auto;
                    text-indent: 0;
                    color: #a6a6b2;
                    text-transform: uppercase;
                    font-size: 0.732em;
                    font-family: 'PT Sans Narrow', sans-serif;
                    padding-left: 2.25em;
                    -webkit-transition: color 0.3s;
                    -moz-transition: color 0.3s;
                    transition: color 0.3s;}
                    .no-touch .cd-filter-trigger:hover {
                        color: #3e4359;}

						.navbar-filter .cd-filter-trigger{
							visibility: hidden;}

						.cd-filter .cd-filter-trigger,
						.no-touch .cd-filter .cd-filter-trigger:hover,
                        .cd-filter .cd-filter-trigger.filter-is-visible,
                        .cd-filter .cd-filter-trigger.filter-is-visible:hover {
							z-index: 2;
							margin-left: 18%;
							pointer-events: auto;
							cursor: default;
                            color: #fff;} }

/* 	==========================================================================
	MEDIA QUERIES
	==========================================================================
	Extra small devices (phones, less than 768px)
	Mobile first strategy
	========================================================================== */

	/* max-width 640px, medium screens */
	@media only screen and (max-width: 40em) {

		/* Product list */
		.list-products.table-responsive .table > tbody > tr > th,
		.list-products.table-responsive .table > tbody > tr > td{
			border-top: none;}

		.list-products.table-responsive .table thead{
			display: none;}

		.list-products.table-responsive .table tr{
			display: block;
			padding-top: 1em;
			margin-top: 1.646em;
 			border-top: 2px solid #ecf0f1; }
			.list-products.table-responsive .table tr:first-child{
				margin-top: 0;
				border-top: none; }

				.list-products.table-responsive .table tr > td{
					display: block;
					text-align: center;}

		.list-products.table-responsive .table .block{
			margin: 0 auto;}

		.list-products.table-responsive .table .btn{
			float: none;
			padding: 0.325em 0.667em;}
			.list-products.table-responsive .table .btn .text {
			    display: block !important;}

	}

	/* Small devices (landscape smartphones, 410px and up) */
	@media (min-width: 25em) {

        .alert {
            border-top-left-radius: 0.444em;
            border-bottom-left-radius: 0.444em;}

	}

	/* Small devices (poltrait tablets, 640px and up) */
	@media only screen and (min-width: 40em) {

	}

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

	/* 	==========================================================================
		HEADINGS
		========================================================================== */
		h1, .h1 {
			font-size: 54px;
			font-size: 3.375rem; }

		h2, .h2 {
			font-size: 36px;
			font-size: 2.25rem; }

		h3, .h3 {
			font-size: 26.337px;
			font-size: 1.646rem; }

    /* 	==========================================================================
    	GRID SYSTEM
    	========================================================================== */
        .column{ padding: 0}
        .column.last{ float: right !important}

        /* Two columns */
        .grid2col .column { width: 48% }
        .grid2cola .column.first { width: 66% }
        .grid2cola .column.last { width: 34% }
        .grid2colb .column.first { width: 70% }
        .grid2colb .column.last { width: 24.9% }
        .grid2colc .column.first { width: 34% }
        .grid2colc .column.last { width: 66%; }
        .grid2cold .column.first { width: 24.5% }
        .grid2cold .column.last { width: 70% }
        .grid2cole .column.first { width: 79% }
        .grid2cole .column.last { width: 19% }
        .grid2colf .column.first { width: 19% }
        .grid2colf .column.last { width: 79% }
        .grid2cols .column { width: 50% }

        .grid2colp .column.first { width: 44% }
        .grid2colp .column.last { width: 53% }

        /* Column inside column */
        [class^="grid"] .grid2col .column,
        [class*="grid"] .grid2col .column,
        .grid3col .grid2col .column{
            width: 100% }

        /* More than column... */
        .grid3col .column {width: 32%; margin-left: 2%; }
        .grid4col .column {width: 23%; margin-left: 3%; }
        .grid5col .column {width: 18.4%; margin-left: 2%; }
        .grid6col .column {width: 15%; margin-left: 2%; }

	/* 	==========================================================================
		PAGE & CONTENT
		========================================================================== */

        .billboard .column{
            display: table-cell;
            vertical-align: middle;
            float: none !important;
            height: 100%;}
            .billboard .column{
                margin: 0 auto;}

        .billboard .text h2 + p{
            width: 80%;}

        /* Product collecion */
        .category-layout .wrapper{
            display: table;
            padding-top: 0;
			padding-bottom: 0}

        .category-layout #hero,
        .category-layout .shop{
            display: table-cell;
            vertical-align: middle;
            float: none !important;
            width: 50%;
            height: 100%; }

            #page-default.category-layout #hero,
            #page-default.category-layout .shop,
			#page-product-list.category-layout #hero,
			#page-product-list.category-layout .shop{
                display: inherit;
                float: inherit;
                width: 100%;
                height: auto;
            }
			#page-product-list.category-layout #hero{
				padding: 0;
				background: none;
			}

		/* Help
        ========================================= */
		#page-help .content-full h2{
			text-align: center;
		}
		#page-help .content-full h3{
			margin-top: 1em;
		}

        /* Search
        ========================================= */
        .search-layout .form-control{
            padding: 0;
            padding-left: 70px;
            padding-right: 0;}

            .search-layout .container-fluid.collapse {
                height: 80px;}

		/* Product detail
        ========================================= */
		.product-layout .summary.grid2col .column{
            width: 46%;}
			.product-layout .summary{
				text-align: left; }

		.product-layout .action-buttons{
			max-width: 80%;
			margin: 0;}


        /* Category bucket
        ========================================= */
        .shopping-cart{
            float: right;
            position: relative;
            top: auto;
            right: 12%;
            height: 80px;}
            .shopping-cart a{
                display: block;
                font-size: 1rem;
                line-height: 80px;
                border-radius: 0;
                background: none;}
                .shopping-cart a .icon{
                    font-size: 1.646em;}

	}

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

        /* Body & structure */
		.content-full{
			margin-left: auto;
			margin-right: auto;}

		.table{
			overflow: hidden;}

        /* Grid system */
        [class^="grid"] .grid2col .column,
        [class*="grid"] .grid2col .column,
        .grid3col .grid2col .column{
            width: 48% }

        /* Store layout */
        .list-categories .container{
            display: table;
            table-layout: fixed;
            width: 80%;
			padding-top: 90px;
            min-height: 100%}

        .list-categories .bucket{
            float: none;
            display: table-cell;
            vertical-align: top;
            width: 50%;}
			.list-categories .bucket.full-size{
				width: 100%;}
				.list-categories .bucket.full-size .grid2col .column{
					width: 46% }
            .list-categories .bucket.odd{
                padding-right: 0.488em}
                .list-categories .bucket.even{
                    padding-left: 0.488em;}

	}

	/* Large devices (large desktops, 1024px and up) */
	@media (min-width: 64em) {}

	/* for higher resolutions (android and retina) */
	@media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (max--moz-device-pixel-ratio: 1.5) {}