/*	
	Theme Name: Imunopure
	Theme URI: http://osplus.nl/	
	Author: Maurits-Jan Seriese
	Author URI: http://osplus.nl/	
	Description: De standaard website template voor Imunopure
	Version: 1
*/

*,
*:before,
*:after {
	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
	box-sizing:			border-box;
	outline:			0;
	-moz-appearance:		none;
	-webkit-appearance:		none;
} 

html
{
	-webkit-font-smoothing:		antialiased;
	-webkit-text-size-adjust:	100%;
}

@font-face {
	font-family:			'gothamlight';
	src:				url('font/gothamlight-webfont.woff2') format('woff2'),
					url('font/gothamlight-webfont.woff') format('woff');
	font-weight:			normal;
	font-style:			normal;
}

@font-face {
	font-family:			'MinionPro-Regular';
	src:				url('font/MinionPro-Regular.eot?#iefix') format('embedded-opentype'),
					url('font/MinionPro-Regular.otf')  format('opentype'),
					url('font/MinionPro-Regular.woff') format('woff'),
					url('font/MinionPro-Regular.ttf')  format('truetype'),
					url('font/MinionPro-Regular.svg#MinionPro-Regular') format('svg');
	font-weight:			normal;
	font-style:			normal;
}

html,
body
{
	font:			normal 1rem/1.5rem 'gothamlight', Verdana, Arial, Helvetica, sans-serif;
	width:			100%;
	height:			100%;
	color:			#aa9d74;
	background:		#fff;
	padding:		0;
	margin:			0;
	-webkit-tap-highlight-color: transparent;
}

a {
	color:			#aa9d74;
	text-decoration:	none;
}

h1 {
	font-size:		1.25rem;
	line-height:		2rem;
}


/*******************************************************************************************************
********************************************************************************************************


NAVIGATION


********************************************************************************************************
*******************************************************************************************************/


#menu_toggle {
	position:		absolute;
	left:			1.5rem;
	top:			46px;
	width:			2.5rem;
	height:			4rem;
	z-index:		13;
	cursor:			pointer;
}

#menu_toggle > div {
	display:		none;
}

#menu_toggle > span:after,
#menu_toggle > span:before
{
	content:		"";
	position:		absolute;
	left:			0;
	top:			-9px;
}

#menu_toggle > span:after
{
	top:			9px;
}

#menu_toggle > span
{
	position:		relative;
	display:		block;
	margin:			1.8rem 0 0 .375rem;
}

#menu_toggle > span,
#menu_toggle > span:after,
#menu_toggle > span:before
{
	width:			1.75rem;
	height:			2px;
	background-color:	#455d71;
	transition:		all .25s ease-in-out;
	backface-visibility:	hidden;
}

#menu_toggle.on
{
	position:		fixed;
}

#menu_toggle.on > span:before
{
	transform:		rotate(45deg) translate(7px, 8px);
}

#menu_toggle.on > span:after
{
	transform:		rotate(-45deg) translate(5px, -6px);
}

#menu_toggle.on > span {
	background:		transparent;
}

#menu_toggle.on > span:after,
#menu_toggle.on > span:before
{
	background-color:	#455d71;
}

header nav {
	display:		flex;
	flex-direction:		column;
 	position:		fixed;
	top:			0;
	left:			0;
	width:			100%;
	height:			100%;
	background:		#fff;
	visibility:		hidden;
	opacity:		0;
	transition:		all .15s ease-in-out;
	transform:		scale(.7);
	z-index:		11;
}

header #menu_toggle.on + nav {
	opacity:		1;
	visibility:		visible;
	overflow-y:		auto;
	transform:		scale(1.0);
}

header nav ul,
header nav li,
header nav li > a {
	list-style:		none;
	margin:			0;
	padding:		0;
}

header nav > ul {
	margin:			12rem 0 0;
	flex:			1;
}

header nav > ul > li {
	position:		relative;
}

header nav > ul > li:last-child {
	border:			0;
}

.menu {
	flex:			1;
	margin:			124px 0 0 4rem;
}

.menu > ul > li {
	font-size:		1.5rem;
	line-height:		1.5rem;
	text-transform:		uppercase;
}

.menu-item-has-children:before {
	position:		absolute;
	content:		">";
	top:			1rem;
	right:			1rem;
	width:			2.5rem;
	height:			2.5rem;
	line-height:		3.5rem;
	color:			#0e3b64;
	text-align:		center;
	border-radius:		.125rem;
	border:			1px solid #0e3b64;
	z-index:		3;
	transition:		background .2s ease-in-out,
				transform .2s ease-in-out;
}

.current-menu-item.menu-item-has-children:before {
	color:			#fff;
	background:		#003d58;
}

.menu-item-has-children.on:before {
	color:			#fff;
	background:		#0e3b64;
	transform:		rotate(90deg);
}

.children,
.sub-menu {
	display:		none;
}

.on .sub-menu,
.on .children {
	display:		block;
}

header nav > ul > li > a,
.sub-menu > li > a,
.children > li > a
{
	position:		relative;
	display:		flex;
	align-items:		center;
	padding:		.1rem .2rem;
	height:			2rem;
	color:			#465e72;
	font-size:		1.25rem;
	line-height:		2rem;
	text-decoration:	none;
	outline:		0;
	transition:		all .3s ease-in-out;
}

.sub-menu > li > a,
.children > li > a {
	padding:		1rem 4rem;
}

header nav > ul > li.current_page_item > a,
.current-submenu-item > a
{
	font-weight:		bold;
	color:			#465e72 !important;
}

header nav > ul > li.current_page_item > a:before,
.current-submenu-item > a:before {
	content:		" ";
	display:		inline-block;
	width:			1.5rem;
	height:			2rem;
	padding:		0;
	margin:			0;
	background:		url(images/heart.png) no-repeat left center;
	background-size:	1.125rem;
}

#menu-hider {
	display:		none;
}

#social-media-desktop {
	display:		none;
}

#social-media-home {
	position:		fixed;
	flex-direction:		column;
	bottom:			1rem;
	right:			1rem;
	z-index:		13;
}

#social-media,
#social-media-home {
	display:		flex;
	margin:			0 0 0 1rem;
}

#social-media > a,
#social-media-home > a {
	display:		block;
	width:			36px;
	height:			36px;
	padding:		0;
	text-align:		center;
}

#social-media > a:first-child,
#social-media-home > a:first-child,
#social-media-desktop > a:first-child {
	border:			0;
}

#social-media > a > img,
#social-media-home > a > img,
#social-media-desktop > a > img {
	width:			80%;
	height:			auto;
}

@media only screen and (min-width: 1024px) {
	::-webkit-scrollbar {
		display:		none;
	}

	#menu_toggle {
		top:			4.75rem;
		left:			2rem;
	}

	header nav {
		width:			100%;
	}

	header nav ul,
	header nav li,
	header nav li > a {
		width:			auto;
	}

	header nav > ul > li > a,
	.sub-menu > li > a,
	.children > li > a {
		padding:		.5rem 2rem;
		text-align:		left;
		height:			1.75rem;
		font-size:		1.25rem;
 		line-height:		1.25rem;
	}

	header nav > ul > li.current_page_item > a:before,
	.current-submenu-item > a:before {
		height:			2.75rem;
		background:		url(images/heart.png) no-repeat left center;
		background-size:	1.125rem;
	}
}

#woo-cart-button {
	display:			none;
}

#imuno-link {
	display:			none;
}

/*******************************************************************************************************
********************************************************************************************************


END NAVIGATION


********************************************************************************************************
*******************************************************************************************************/

header {
	position:		relative;
	width:			100%;
	height:			100%;
	overflow:		hidden;
}

#top_bar {
	position:		fixed;
	top:			0;
	left:			0;
	width:			100%;
	height:			100px;
	background:		transparent;
	z-index:		2;
}

.home #top_bar {
	border:			0;
}

#logo,
#logo-menu {
	position:		absolute;
	top:			10px;
	left:			calc(50% - 80px);
	width:			160px;
	height:			auto;
	z-index:		12;
}

#logo.on {
	position:		fixed;
}

#logo > img,
#logo-menu > img {
	width:			100%;
	height:			auto;
}

#slider,
#m_slider {
	position:		fixed;
	top:			0;
	left:			0;
	width:			100%;
	height:			100%;
	opacity:		1;
	z-index:		1;
	transition:		opacity .2s ease-in-out;
}

#m_slider {
	top:			30px;
	height:			calc(100% - 140px);
}

.home #m_slider {
	height:			calc(100% - 140px);
}

#slider {
	display:		none;
}

#slider.loading,
#m_slider.loading {
	opacity:		0;
	visibility:		hidden;
}

#slider > div,
#m_slider > div {
	position:		absolute;
	top:			0;
	left:			0;
	width:			100%;
	height:			100%;
	z-index:		1;
	transform:		translateX(100%);
}

#m_slider > div {
	background-size:	cover !important;
}

#slider > div.s_before,
#m_slider > div.s_before {
	transform:		translateX(-100%);
}

#slider > div.s_sel,
#m_slider > div.s_sel {
	transform:		translateX(0);
	z-index:		3;
}

#m_slider > div.s_before,
#m_slider > div.s_sel {
	transition:		transform .75s ease-in-out;
}

#slider_items {
	display:		flex;
	position:		fixed;
	justify-content:	center;
	align-items:		center;
	left:			0;
	right:			0;
	bottom:			178px;
	z-index:		2;
}

#slider_items span {
	width:			1.5rem;
	height:			1.5rem;
	padding:		.5rem 0 0 .5rem;
}

#slider_items span > img {
	width:			1rem;
	height:			1rem;
}

#our_brands {
	position:		fixed;
	left:			6px;
	right:			0;
	bottom:			150px;
	text-align:		center;
	z-index:		2;
}

#our_brands > span {
	display:		none;
}

#slider_logos {
	position:		relative;
	height:			54px;
	width:			100%;
}

#slider_logos > a {
	display:		flex;
	justify-content:	center;
	align-items:		center;
	position:		absolute;
	width:			100%;
	height:			36px;
	opacity:		0;
	visibility:		hidden;
}

#slider_logos > a.logo_sel {
	opacity:		1;
	visibility:		visible;
}

#slider_logos > a > img {
	width:			48%;
	height:			auto;
}

#s_previous_v,
#s_next_v {
	position:		fixed;
	bottom:			calc(50% - 1.25rem);
	left:			0;
	padding:		1.5rem;
	font-size:		2.5rem;
	line-height:		2.5rem;
	color:			#455d71;
	z-index:		4;
}

#s_next_v {
	left:			auto;
	right:			0;
}

.text-header {
	position:		absolute;
	left:			50%;
	bottom:			1.5rem;
	height:			1.75rem;
	font-size:		1.75rem;
	line-height:		1.75rem;
	text-align:		center;
	transform:		rotate(-90deg);
	transform-origin:	left center;
	z-index:		10;
	text-shadow:		0 0 4px #000;
	text-transform:		uppercase;
}

@media only screen and (min-width: 1024px) {
	#our_brands > span {
		display:		inline-block;
	}

	#slider {
		display:		block;
		top:			0;
		height:			100%;
	}

	#m_slider {
		display:		none;
	}

	#m_slider > div.s_before,
	#m_slider > div.s_sel {
		transition:		none;
	}

	#slider > div.s_before,
	#slider > div.s_sel {
		transition:		transform 1.75s ease-in-out;
	}

	#slider > div {
		width:			100%;
		height:			100%;
		background-size:	75% !important;
	}

	.text-header {
		font-size:		2rem;
		line-height:		2rem;
		bottom:			4rem;
	}

	#logo {
		top:			2rem;
		left:			calc(50% - 100px);
		width:			200px;
	}

	#logo-menu {
		top:			3rem;
	}

	#top_bar {
		height:			160px;
	}

	#s_previous_v,
	#s_next_v {
		font-size:		2.75rem;
		line-height:		2.75rem;
		bottom:			50%;
		cursor:			pointer;
	}

	#s_previous_v {
		left:			1rem;
	}

	#s_next_v {
		right:			1rem;
	}

	#slider_items {
		bottom:			154px;
	}

	#imuno-link {
		display:		flex;
		justify-content:	center;
		color:			#fff;
	}

	#imuno-link > a {
		color:			#fff;
	}
}


/*******************************************************************************************************
********************************************************************************************************


CONTENT


********************************************************************************************************
*******************************************************************************************************/

#bottom_logo {
	position:		fixed;
	left:			0;
	right:			0;
	bottom:			172px;
	z-index:		2;
}

#bottom_logo > img {
	display:		inherit;
	width:			14rem;
	height:			auto;
	margin:			0 auto;
}

#bottom_logo span {
	display:		none;
}

#bottom_gradient {
	position:		fixed;
	bottom:			0;
	left:			0;
	width:			100%;
	height:			148px;
	font-size:		.75rem;
	background:		rgb(255,255,255);
	background:		-moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(70,94,114,1) 98%);
	background:		-webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(70,94,114,1) 98%);
	background:		linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(70,94,114,1) 98%);
	filter:			progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#465e72',GradientType=0 );
	z-index:		12;
}

#contact-information {
	display:		flex;
	justify-content:	center;
	align-items:		flex-end;
	margin-top:		2rem;
}

#contact-information > a {
	padding:		.5rem .25rem;
	color:			#fff;
}

#to_shop_link {
	position:		absolute;
	left:			30%;
	top:			120px;
	width:			40%;
	padding:		.5rem;
	font-size:		1rem;
	line-height:		1rem;
	color:			#fff;
	background:		rgba(70, 94, 114, 1);
	border-radius:		1rem;
	text-align:		center;
	z-index:		4;
}

#shop-links {
	display:		flex;
	justify-content:	center;
}

#shop-links a {
	padding:		.5rem 1rem;
	color:			#fff;
}

#t_spacer {
	height:			0;
}

#main_content {
	position:		absolute;
	top:			100px;
	left:			0;
	width:			100%;
	height:			calc(100% - 192px);
	overflow-y:		auto;
	z-index:		5;
}

.home #main_content {
	height:			calc(100% - 240px);
}

#content {
	margin:			0;
	padding:		0 4.5rem;
	font-size:		.875rem;
	line-height:		1.125rem;
	color:			#465e72;
}

.page-id-17 #content > p,
.page-id-17 #content > ul,
.page-id-50 #content > p,
.page-id-50 #content > ul {
	display:		none;
}


#content > p:nth-of-type(2),
.page-id-17 #content > p:nth-of-type(2),
.page-id-50 #content > p:nth-of-type(2),
#content.show_all > p,
#content.show_all > ul {
	display:		block !important;
}

#content.show_all #show_all {
	display:		none;
}

#show_all {
	display:		none;
	font-weight:		bold;
	text-transform:		uppercase;
	cursor:			pointer;
}

.page-id-17 #show_all,
.page-id-50 #show_all {
	display:		block;
}

.m_spacer {
	height:			5rem;
}

.wp-image-47 {
	max-width:		100%;
	margin:			0 0 1rem;
	padding:		.5rem .25rem;
	-webkit-box-shadow:	4px 4px 5px 0px rgba(0,0,0,.3);
	-moz-box-shadow:	4px 4px 5px 0px rgba(0,0,0,.3);
	box-shadow:		4px 4px 5px 0px rgba(0,0,0,.3);
}

.blog-item {
	padding:		0 0 1rem;
	margin:			1.25rem 0 0;
	border-style:		dashed;
	border-width:		0 0 1px;
	border-color:		#455d71;
}

.blog_date {
	color:			#455d71;
}

.blog-item h1 {
	margin:			0;
}

.blog-item .info {
	text-transform:		uppercase;
}

@media only screen and (min-width: 1024px) {
	#main_content {
		left:			0;
		padding:		0 calc(50% - 375px);
		width:			100%;
	}

	#content {
		margin:			0;
		line-height:		1.25rem;
	}

	#t_spacer {
		height:			40px;
	}

	#bottom_logo > img {
		width:			18rem;
	}

	#slider_logos {
		display:		flex;
		justify-content:	center;
	}

	#slider_logos > a {
		width:			520px;
	}

	#social-media-home {
		bottom:			1rem;
		right:			3rem;
	}

	#bottom_gradient {
		font-size:		1rem;
	}

	#to_shop_link {
		left:			calc(50% - 100px);
		top:			160px;
		width:			200px;
	}
}