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

	Project:		Takkamies
	Version:		1.0
	Created:		September 1, 2016
	Modified:		September 7, 2016

		[Table of contents]
		1. Reset
		2. Typography
			2.1	Headings
			2.2	Text elements
			2.3	Buttons
			2.4	Lists
		3. Utility styles
		4. Structure
			4.1	Header
			4.2	Navigation
			4.3	Content
			4.4	Footer
			4.5	Media queries
		5. Clear floats

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


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

	RESET

----------------------------------------------------------- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

article, aside, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; }

nav ul 		{ list-style: none; margin: 0; padding: 0; }
nav ul li	{ display: inline; }

blockquote, q 		{ quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after 	{ content: ''; content: none; }

a 		{ margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
ins 	{ background-color: #ff9; color: #000; text-decoration: none; }
mark 	{ background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
del 	{ text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom: 1px dotted #000; cursor: help; }

/* tables still need cellspacing="0" in the markup */
table 			{ border-collapse: collapse; border-spacing: 0; }
hr 				{ display: block; height: 1px; border: 0; border-top: 1px solid #eee; margin: 20px 0px; padding: 0; }
input, select 	{ vertical-align: middle; }






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

	TYPOGRAPHY

----------------------------------------------------------- */
html	{ font-size: 62.5%; /* Set html font-size to 10px so: 1rem = 10px */ }
body	{ font-size: 150%; /* Set html font-size to 15px. Use em for font-size and change this to change scale */ color: #000; line-height: 1.6; font-family: "Raleway", Helvetica, Arial, sans-serif; font-weight: 300; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; }



/* HEADINGS
-------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6	{ font-weight: 700; color: #000; font-family: "Raleway", Helvetica, Arial, sans-serif; text-rendering: optimizeLegibility; }

h1					{ font-size: 2.2em; line-height: 1; margin-bottom: 0.5em; }
.page-hero h1		{ font-size: 3.2em; color: #fff; font-weight: 300; margin-bottom: 0; max-width: 800px /* 1200px - 2*200px */; margin-left: auto; margin-right: auto; }
h2					{ font-size: 1.733em; margin-bottom: 0.75em; }
.product-promo h2	{ font-size: 1.333em; margin-bottom: 0.65em; }
h3					{ font-size: 1.6em; line-height: 1; margin-bottom: 1em; }
h4					{ font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; height: 1.25em; }
h5					{ font-size: 1em; font-weight: bold; margin-bottom: 1.6em; }
h6					{ font-size: 1em; font-weight: bold; }



/* TEXT ELEMENTS
-------------------------------------------------------------- */
p			{ margin: 0 0 1.6em; }

a:hover, a:active 		{ outline: none; }
a, a:active, a:visited 	{  }
a:hover 				{  }

p a			{ color: #000; }
p a:hover	{  }

blockquote	{  }
strong		{ font-weight: 700; }
em,dfn		{ font-style: italic; }
dfn			{ font-weight: bold; }
sup, sub	{ line-height: 0; }

abbr,
acronym		{  }
address		{  }
del			{  }

pre,code	{ white-space: pre; }
pre,code,tt {  }
pre 		{ white-space: pre; white-space: pre-wrap; white-space: pre-line; word-wrap: break-word; }



/* BUTTONS
-------------------------------------------------------------- */
.btn					{  }
.btn:hover				{  }



/* LISTS
-------------------------------------------------------------- */
li ul,
li ol		{ margin: 0 1.6em; }
ul, ol		{ margin: 0 1.6em 1.6em 1.6em; }

ul			{ list-style-type: disc; }
ol			{ list-style-type: decimal; }

dl			{ margin: 0 0 1.6em 0; }
dl dt		{ font-weight: bold; }
dd			{ margin-left: 1.6em;}



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

	UTILITY STYLES

----------------------------------------------------------- */
.bg-video,
.bg-cover			{ background-position: center center; background-repeat: no-repeat; background-size: cover; }
.bg-video 			{ position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); }

.center-vertically	{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }

.flexbox						{ width: 100%; overflow: hidden; display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-content: stretch; align-content: stretch; }
.flexbox.two-col .item			{ width: 50%; }
.flexbox.three-col .item		{ width: 33.33%; }
.flexbox.three-col .item-x2		{ width: 66.66%; }
.flexbox.four-col .item		{ width: 25%; }
.flexbox.four-col .item-x2		{ width: 50%; }


.text-center	{ text-align: center; }
.text-right		{ text-align: right; }

.border-btm		{ border-bottom: 1px solid #cbcac9; }




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

	STRUCTURE

----------------------------------------------------------- */
*,
*:before,
*:after 			{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html				{ height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; }
body 				{ height: 100%; text-align: center; }

.page-wrapper		{ width: 100%; min-height: 100%; _height: 100%; margin: auto; position: relative; }
.page-header,
.page-content,
.page-footer,
.content-wrapper	{ width: 100%; overflow: hidden; clear: both; position: relative; }




/* CONTENT-WRAPPER WIDTH
-------------------------------------------------------------- */
.content-wrapper		 		{ max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 4rem; padding-right: 4rem; }
.page-header .content-wrapper	{  }
.page-hero .content-wrapper		{ padding-left: 8rem; padding-right: 8rem; }
.page-content .content-wrapper	{  }
.page-footer .content-wrapper	{  }



/* PAGE-HEADER
-------------------------------------------------------------- */
.page-logo a					{ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  }
.page-logo a img				{ display: block; }



/* NAVIGATION
-------------------------------------------------------------- */
.page-navigation 						{ text-align: justify; background-color: #000; color: #fff; }
.page-navigation .page-logo				{ float: left; height: 76px; }
.page-navigation .page-logo a			{ display: block; height: 100%; }
.page-navigation .page-logo img			{ max-height: 30px; top: 22px; position: relative; }
.page-navigation nav					{ float: right; }
.page-navigation nav a	 				{ padding: 0 1em; white-space: nowrap; display: inline-block; vertical-align: middle; line-height: 76px; color: #fff; }
.page-navigation nav li					{ display: inline-block; }
.page-navigation nav li:last-child a	{ padding-right: 0; }



/* PAGE-HERO OPTIONS
-------------------------------------------------------------- */
.page-hero-wrapper								{ position: relative; background-color: black; }
.page-hero										{ text-align: center; }
.page-hero ul									{ margin: 0; padding: 0; height: 100%; }
.page-hero ul li								{ width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; }

.fixed-h-hero .page-hero						{ height: 80vh; /* height of the hero is xx% of the viewport height */ }
.fixed-h-hero .page-hero .content-wrapper		{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }

.page-hero .slide-1		{ background-image: url(../img/takkamies-takka-1.jpg); }
.page-hero .slide-2		{ background-image: url(../img/takkamies-takka-2.jpg); }
.page-hero .slide-3		{ background-image: url(../img/takkamies-takka-3.jpg); }
.page-hero .slide-4		{ background-image: url(../img/takkamies-takka-4.jpg); }
.page-hero .slide-5		{ background-image: url(../img/takkamies-takka-5.jpg); }

.page-hero .slide-6		{ background-image: url(../img/takkamies-takka-6.jpg); }
.page-hero .slide-7		{ background-image: url(../img/takkamies-takka-7.jpg); }
.page-hero .slide-8		{ background-image: url(../img/takkamies-takka-8.jpg); }

.page-hero .slide-9		{ background-image: url(../img/takkamies-takka-9.jpg); }
.page-hero .slide-10		{ background-image: url(../img/takkamies-takka-10.jpg); }
.page-hero .slide-11		{ background-image: url(../img/takkamies-takka-11.jpg); }

.page-hero .slide-12		{ background-image: url(../img/takkamies-takka-12.jpg); }

.page-hero .slide-13		{ background-image: url(../img/takkamies-takka-13.jpg); }


/* SLIDER
-------------------------------------------------------------- */
.unslider 				{ overflow: auto; margin: 0; padding: 0; }
.unslider-wrap 			{ position: relative; }
.unslider-wrap.unslider-carousel>li { float: left; }
.unslider-vertical>ul 	{ height: 100%; }
.unslider-vertical li 	{ float: none; width: 100%; }
.unslider-fade 			{ position: relative; }
.unslider-fade .unslider-wrap li { position: absolute; left: 0; top: 0; right: 0; z-index: 8; }
.unslider-fade .unslider-wrap li.unslider-active { z-index: 10; }
.unslider li,.unslider ol,.unslider ul { list-style: none; margin: 0; padding: 0; border: none; }
.unslider-arrow 		{ position: absolute; left: 4rem; z-index: 2; cursor: pointer; }
.unslider-arrow.next 	{ left: auto; right: 4rem; }

.unslider-nav ol 		{ list-style: none; text-align: center; background-color: transparent; position: absolute; width: 100%; bottom: 1.5rem; z-index: 1000; }
.unslider-nav ol li 	{ display: inline-block; width: 14px; height: 14px; margin: 0 4px; background: transparent; border-radius: 50%; overflow: hidden; text-indent: -999em; border: 2px solid #fff; cursor: pointer; }
.unslider-nav ol li.unslider-active { background: #fff; cursor: default; }

a.unslider-arrow			{ position: absolute; top: 50%; margin-top: -41px; z-index: 1000; height: 81px; width: 42px; text-indent: -9999px; background-size: auto 100%; background-repeat: no-repeat; -webkit-transition: all .1s ease-in-out; transition: all .1s ease-in-out; -webkit-transform: translateZ(0); }
a.unslider-arrow.prev 		{ background-image: url(../img/arrow-left.png); background-position: center left; }
a.unslider-arrow.next 		{ background-image: url(../img/arrow-right.png); background-position: center right; }





/* CONTENT ELEMENTS
-------------------------------------------------------------- */
.intro						{ padding: 5rem 0; max-width: 800px /* 1200px - 2*200px */; margin-left: auto; margin-right: auto; }
.intro p					{ font-size: 1.067em; margin-bottom: 0; }

.product-promo									{ padding-bottom: 5rem; }
.product-promo.three-col .item					{ width: calc(33.33% - 1.6rem); }
.product-promo.three-col .item:nth-of-type(2)	{ margin-left: 2.4rem; margin-right: 2.4rem; }
.product-promo.four-col .item					{ width: calc(25% - 1.8rem); margin-left: 2.4rem; }
.product-promo.four-col .item:nth-of-type(1)    { margin-left: 0; }
.product-promo .item .img-wrapper				{ margin-bottom: 2.5rem; }
.product-promo .item .img-wrapper img			{ max-width: 100%; height: auto; display: block; }

.single-row-item					{ padding: 2rem 0 ; max-width: 1200px /* 1200px - 2*200px */; margin-left: auto; margin-right: auto; }
.single-row-item p					{ font-size: 1.067em; }
.single-row-item img				{ max-width: 100%; }
.single-row-item.remove-btm-padding	{ padding-bottom: 0 0; }





/* FOOTER
-------------------------------------------------------------- */
.page-footer					{ background-color: #000; color: #fff; text-align: left; padding-top: 5rem; padding-bottom: 5rem; }
.page-footer p					{ margin-bottom: 0; }
.page-footer a					{ color: #fff; text-decoration: none; }
.page-footer a:hover			{ text-decoration: underline; }
.page-footer .slogan			{ font-size: 1.467em; line-height: 1.36; }
.page-footer .slogan .break		{ display: block; }
.page-footer .right-padding		{ padding-right: 7.5%; }




/* MEDIA QUERIES
-------------------------------------------------------------- */
@media only screen and (max-width : 980px) {
	.page-hero .content-wrapper		{ padding-left: 7rem; padding-right: 7rem; }
	a.unslider-arrow				{ margin-top: -36px; height: 72px; width: 42px; }
}


@media only screen and (max-width : 720px) {
	.content-wrapper		 		{ padding-left: 2rem; padding-right: 2rem; }

	.page-hero .content-wrapper		{ padding-left: 6rem; padding-right: 6rem; }
	a.unslider-arrow				{ margin-top: -36px; height: 60px; width: 38px; }
	.unslider-arrow 				{ left: 2rem; }
	.unslider-arrow.next 			{ left: auto; right: 2rem; }

	.page-hero h1					{ font-size: 3.333em; }



	.flexbox.three-col .item						{ width: 100%; }
	.product-promo.three-col .item:nth-of-type(2)	{ margin-left: 0; margin-right: 0; }

	.flexbox.four-col .item						    { width: 100%; }
	.product-promo.four-col .item	                { margin-left: 0; margin-right: 0; }

	.product-promo									{ padding-bottom: 0; }
	.product-promo .item							{ margin-bottom: 2rem; }
	.product-promo .item .img-wrapper				{ height: 90rem; overflow: hidden; }
	.product-promo .item .img-wrapper img			{ position: relative; top: 0%; -webkit-transform: translateY(-0%); -ms-transform: translateY(-0%); transform: translateY(-0%); }

	.page-footer					{ padding-bottom: 0; }
	.page-footer .item				{ margin-bottom: 5rem; }
	.page-footer .right-padding		{ padding-right: 0; }
}


@media only screen and (max-width : 640px) {
	.content-wrapper		 				{ padding-left: 1rem; padding-right: 1rem; }

    h1					{ font-size: 1.5em; line-height: 1; margin-bottom: 0.5em; }
    .page-hero h1		{ font-size: 2.2em; color: #fff; font-weight: 300; margin-bottom: 0; max-width: 800px /* 1200px - 2*200px */; margin-left: auto; margin-right: auto; }
    h2					{ font-size: 1.733em; margin-bottom: 0.75em; }
    .product-promo h2	{ font-size: 1.2em; margin-bottom: 0.65em; }
    h3					{ font-size: 1.2em; line-height: 1; margin-bottom: 1em; }

	.page-hero .content-wrapper		{ padding-left: 5rem; padding-right: 5rem; }
	a.unslider-arrow				{ margin-top: -20px; height: 40px; width: 38px; }
	.unslider-arrow 				{ left: 1rem; }
	.unslider-arrow.next 			{ left: auto; right: 1rem; }

	.page-navigation						{ font-size: 0.8em; }
	.page-navigation nav a	 				{ padding: 0 0.25em; }
	.page-navigation .page-logo img			{ max-height: 18px; top: 23px; position: relative; }

	.product-promo .item .img-wrapper		{ height: 50rem; }

    .fixed-h-hero .page-hero { height: 60vh; }
}




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

	CLEAR FLOATS

----------------------------------------------------------- */
.clear: 		{ display: inline-block; }
.clear:after 	{ content: "."; display: block; height: 0; clear: both; visibility: hidden; }
* html .clear 	{ height: 1%; }
.clear 			{ display: block; }



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

	60fps scrolling
	http://www.thecssninja.com/javascript/pointer-events-60fps

----------------------------------------------------------- */
.disable-hover,
.disable-hover * {
	pointer-events: none !important;
}