/* ========== STYLES MOBILE =========== */

@media (max-width: 768px) {

	HTML {
		font-family: Roboto;
		font-size: 22px;
		font-weight: 400;
		line-height: 26px;
		letter-spacing: 0em;
		text-align: left;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		height: 100%;
		min-width: 600px;
		box-sizing: border-box; 
	}
	
	BODY {
		margin: 0px; height: 100%; padding: 0px;
		height: 100%;
		background-color: #FFFFFF;
		font-size: 22px;
		color: #000000;
		text-align: left;
	}

	H1, .fn_h1
	{
		font-family: Roboto;
		font-size: 36px;
		font-weight: 900;
		line-height: 42px;
		letter-spacing: 0em;
	}

	H2, .fn_h2 
	{
		font-family: Roboto;
		font-size: 24px;
		font-weight: 700;
		line-height: 28px;
		letter-spacing: 0em;
		text-transform: uppercase;
	}

	H3, .fn_h3
	{
		font-family: Roboto;
		font-size: 20px;
		font-weight: 700;
		line-height: 23px;
		letter-spacing: 0em;
		text-transform: uppercase;
				}

	P, DIV
	{
		font-family: Roboto;
		font-size: 22px;
		font-weight: 400;
		line-height: 26px;
		letter-spacing: 0em;
		box-sizing: border-box; 
		text-align: left;
		text-transform: none;
	}

	.wide
	{
		font-family: Roboto;
		font-size: 22px;
		font-weight: 400;
		line-height: 37px;
		letter-spacing: 0em;
		text-align: left;
		text-transform: none;
	}

	.small
	{
		font-family: Roboto;
		font-size: 18px;
		font-weight: 400;
		line-height: 21px;
		letter-spacing: 0em;
		text-align: left;
	}
	
	INPUT						{ font-size: 29px; border-radius: 0px; box-sizing: border-box; height: 47px; width: 272px; padding-left: 10px; padding-right: 10px; color: #000000; background: #FFFFFF; border: 1px solid #9B9B9B;}
	INPUT.field					{ border-radius: 0px; box-sizing: border-box; height: 40px; width: 540px; padding-left: 10px; padding-right: 10px; color: #000000; background: #FFFFFF; border: 1px solid #9B9B9B;}
	INPUT.search				{ font-size: 29px; border-radius: 0px; box-sizing: border-box; height: 40px; width: 150px; color: #000000; background: #FFFFFF; border: none;}
	INPUT:focus					{ outline: none; }
	TEXTAREA					{ font-size: 29px; padding: 10px; border-radius: 0px; box-sizing: border-box; height: 47px; width: 272px; color: #000000; background: #FFFFFF; border: 1px solid #9B9B9B;}
	TEXTAREA:focus				{ outline: none; }
	SELECT						{ font-size: 29px; border-radius: 0px; box-sizing: border-box; height: 40px; width: 250px; color: #000000; border: 1px solid #9B9B9B; padding-left: 10px; background: url("/filer/icons/middle/dropdown.svg") no-repeat right 7px top 12px #FFFFFF; -webkit-appearance:none; -moz-appearance:none; appearance:none; }
	SELECT.ipp					{ font-size: 22px; border-radius: 0px; box-sizing: border-box; height: 40px; width: 250px; color: #000000; border: 1px solid #9B9B9B; padding-left: 10px; background: url("/filer/icons/middle/dropdown.svg") no-repeat right 7px top 12px #FFFFFF; -webkit-appearance:none; -moz-appearance:none; appearance:none; }
	SELECT:focus				{ outline: none; }
	BUTTON						{ padding-bottom: 12px}
	.di_desktop					{ display: none; }
	.di_mobile					{	}
	.di_mobile_heightspacer		{ height: 80px;	}
	.di_shadow					{ box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.1); }

	.bu_normal 					{ text-transform: uppercase; min-height: 47px; border: 0px solid #000000; box-sizing: border-box; padding-top: 11px; padding-left: 12px; padding-right: 12px; }
	.bu_normal:hover			{ opacity: 0.75; }
	.bu_circel_small			{ width: 47px; height: 47px; border-radius: 20px; }
	.bu_circel_small:hover		{ opacity: 0.75; }
	.bu_circel_big				{ width: 53px; height: 53px; border-radius: 30px; }
	.bu_circel_big:hover		{ opacity: 0.75; }
	
	.im_circle_small			{ width: 200px; height: 200px; border-radius: 120px; }
	.im_circle_medium			{ width: 196px; height: 196px; border-radius: 120px; }
	.im_circle_big				{ width: 350px; height: 350px; border-radius: 180px; }

	.fn_button					{ font-size: 27px; }
	.fn_number_products			{ font-size: 16px; font-weight: 700; color: #3D5B4E}

	.margin_content				{ width: 600px; margin: auto;}
	.padding_content			{ padding-left: 30px; padding-right:30px; }
	.padding_content_prod_mob	{ padding-left: 110px; padding-right:110px; }
	.padding_content_left		{ padding-left: 20px; }
	.padding_content_right		{ padding-right:20px; }

	.box_mobile_menu			{ z-index: 65000; background: #FFFFFF; position: absolute; width: 520px; height: 1000px; box-shadow: 10px 0px 30px rgba(0, 0, 0, 0.4); left: 0px; top: 0px; }

	.top_menu					{ padding-bottom: 10px; margin-right: 20px; color: #000000; border: 0px solid #FFFFFF; border-bottom: 5px solid #FFFFFF; cursor: pointer; }

	.top_menu_active			{ padding-bottom: 10px; margin-right: 20px; color: #3D5B4E; border: 0px solid #FFFFFF; border-bottom: 5px solid #3D5B4E; cursor: pointer; }

	.box_dropdown				{ z-index: 65001; background: #FFFFFF; border: 1px solid #9B9B9B; position: absolute; }
	.box_dropdown_marker		{ z-index: 65002; background: #FFFFFF; width: 16px; height: 16px; border: 0px solid #FFFFFF; border-left: 1px solid #9B9B9B; border-top: 1px solid #9B9B9B; position: absolute;  transform:rotate(45deg); top: -9px; }
	.box_dropdown	SELECT		{ padding-left: 10px; box-sizing: border-box; height: 60px; font-size: 22px; width: 250px; color: #000000; border: 1px solid #9B9B9B; background: url("/filer/icons/middle/dropdown.svg") no-repeat right 10px top 16px #FFFFFF; background-size: 25px 25px; -webkit-appearance:none; -moz-appearance:none; appearance:none; }
	.box_dropdown .bu_normal	{ height: 60px; padding-top: 14px;  }

	.special_price {font-size: 24px; position: absolute; width: 50px; height:50px; top: -275px; left: -15px;}
	
	.quicksearch				{ width: 220px; height: 40px; border: 1px solid #9B9B9B; font-size: 22px; }
	.wi_540px					{ width: 540px; }
	.wi_540						{ width: 540px; }
	.wi_374						{ width: 540px; }
	.wi_270						{ width: 270px; }
	.wi_400						{ width: 540px; }
	.wi_600						{ width: 380px; }
	.wi_800						{ width: 540px; }

	/* ========== COLUMNS =========== */
	
	.co_distance				{ width: 20px; }
	.co_1-1_full				{ width: 600px; position: relative; left: -20px; }
	.co_1-2_half				{ width: 560px; position: relative; left: -20px; }
	.co_40_60_shop				{ width: 560px; }
	.co_60_40_shop				{ width: 560px; }
	.co_1-3						{ width: 560px; }
	.co_1-3_33					{ width: 100%; }
	.co_2-3						{ width: 560px; }
	.co_2-3 .co_50				{ width: 270px; }
	.co_2-3 .co_distance		{ width: 20px; }
	.co_2-3_66					{ width: 66%; }							   
	.co_popup					{ width: 520px; }
	.co_50_popup				{ width: 520px; }
	.co_margin_bottom			{ margin-bottom: 15px; }
	.co_margin_bottom_big		{ margin-bottom: 25px; }
	.p100						{ width: 100% }

	/* ========== CHECKBOX & RADIOBUTTON =========== */

	/* The container */
	.in_checkbox {
	  display: block;
	  position: relative;
	  padding-left: 35px;
	  margin-bottom: 12px;
	  cursor: pointer;
	  -webkit-user-select: none;
	  -moz-user-select: none;
	  -ms-user-select: none;
	  user-select: none;
	}

	/* Hide the browser's default checkbox */
	.in_checkbox input {
	  position: absolute;
	  opacity: 0;
	  cursor: pointer;
	  height: 0;
	  width: 0;
	}

	/* Create a custom checkbox */
	.in_checkbox_checkmark {
	  position: absolute;
	  top: 0;
	  left: 0;
	  height: 20px;
	  width: 20px;
	  background-color: #FFFFFF;
	  border: #9B9B9B 1px solid;
	  border-radius: 4px;
	}

	/* On mouse-over, add a grey background color */
	.in_checkbox:hover input ~ .in_checkbox_checkmark {
	  background-color: #FFFFFF;
	  border: #9B9B9B 1px solid;
	}

	/* When the checkbox is checked, add a blue background */
	.in_checkbox input:checked ~ .in_checkbox_checkmark {
	  background-color: #3D5B4E;
	}

	/* Create the checkmark/indicator (hidden when not checked) */
	.in_checkbox_checkmark:after {
	  content: "";
	  position: absolute;
	  display: none;
	}

	/* Show the checkmark when checked */
	.in_checkbox input:checked ~ .in_checkbox_checkmark:after {
	  display: block;
	}

	/* Style the checkmark/indicator */
	.in_checkbox .in_checkbox_checkmark:after {
	  left: 6px;
	  top: 2px;
	  width: 5px;
	  height: 10px;
	  border: solid #FFFFFF;
	  border-width: 0 3px 3px 0;
	  -webkit-transform: rotate(45deg);
	  -ms-transform: rotate(45deg);
	  transform: rotate(45deg);
	}

	/* The container */
	.small .in_checkbox {
	  display: block;
	  position: relative;
	  padding-left: 22px;
	  margin-bottom: 12px;
	  cursor: pointer;
	  -webkit-user-select: none;
	  -moz-user-select: none;
	  -ms-user-select: none;
	  user-select: none;
	}

	/* Hide the browser's default checkbox */
	.small .in_checkbox input {
	  position: absolute;
	  opacity: 0;
	  cursor: pointer;
	  height: 0;
	  width: 0;
	}

	/* Create a custom checkbox */
	.small .in_checkbox_checkmark {
	  position: absolute;
	  top: 0;
	  left: 0;
	  height: 16px;
	  width: 16px;
	  background-color: #FFFFFF;
	  border: #9B9B9B 1px solid;
	  border-radius: 2px;
	}

	/* On mouse-over, add a grey background color */
	.small .in_checkbox:hover input ~ .in_checkbox_checkmark {
	  background-color: #FFFFFF;
	  border: #9B9B9B 1px solid;
	}

	/* When the checkbox is checked, add a blue background */
	.small .in_checkbox input:checked ~ .in_checkbox_checkmark {
	  background-color: #3D5B4E;
	}

	/* Create the checkmark/indicator (hidden when not checked) */
	.small .in_checkbox_checkmark:after {
	  content: "";
	  position: absolute;
	  display: none;
	}

	/* Show the checkmark when checked */
	.small .in_checkbox input:checked ~ .in_checkbox_checkmark:after {
	  display: block;
	}

	/* Style the checkmark/indicator */
	.small .in_checkbox .in_checkbox_checkmark:after {
	  left: 5px;
	  top: 1px;
	  width: 4px;
	  height: 11px;
	  border: solid #FFFFFF;
	  border-width: 0 2px 2px 0;
	  -webkit-transform: rotate(45deg);
	  -ms-transform: rotate(45deg);
	  transform: rotate(45deg);
	}

	 /* Customize the label (the container) */
	.in_radiobutton {
	  display: block;
	  position: relative;
	  padding-left: 30px;
	  margin-bottom: 12px;
	  cursor: pointer;
	  -webkit-user-select: none;
	  -moz-user-select: none;
	  -ms-user-select: none;
	  user-select: none;
	}

	/* Hide the browser's default radio button */
	.in_radiobutton input {
	  position: absolute;
	  opacity: 0;
	  cursor: pointer;
	  height: 0;
	  width: 0;
	}

	/* Create a custom radio button */
	.in_radiobutton_checkmark {
	  position: absolute;
	  top: 0;
	  left: 0;
	  height: 24px;
	  width: 24px;
	  background-color: #FFFFFF;
	  border: 1px solid #9B9B9B; 
	  border-radius: 50%;
	}

	/* On mouse-over, add a grey background color */
	.in_radiobutton:hover input ~ .in_radiobutton_checkmark {
	  background-color: #FFFFFF;
	  border: 1px solid #9B9B9B; 
	}

	/* When the radio button is checked, add a blue background */
	.in_radiobutton input:checked ~ .in_radiobutton_checkmark {
	  background-color: #3D5B4E;
	}

	/* Create the indicator (the dot/circle - hidden when not checked) */
	.in_radiobutton_checkmark:after {
	  content: "";
	  position: absolute;
	  display: none;
	}

	/* Show the indicator (dot/circle) when checked */
	.in_radiobutton input:checked ~ .in_radiobutton_checkmark:after {
	  display: block;
	}

	/* Style the indicator (dot/circle) */
	.in_radiobutton .in_radiobutton_checkmark:after {
	  top: 6px;
	  left: 6px;
	  width: 12px;
	  height: 12px;
	  border-radius: 50%;
	  background: #FFFFFF;
	} 

    /* ========== PRODUCT ITEMS =========== */

	.prod_item_flex {
	  width: 540px;
	  position: relative;
	  display: flex;
	  flex-wrap: wrap;
	  align-items:space-between;
	  column-gap: 20px;
	  row-gap: 30px;
	}

	.prod_item_flex .item {
	  width: 260px;
	  min-height: 430px;
	}

	.prod_item_flex .item .picture {
	  width: 260px;
	  height: 260px;
	}

	.prod_item_flex .item .picture .wishlist {
		position: relative; 
		left: 200px; 
		top: 10px;
	}

	.prod_item_wishlist {
		width: 540px;
		display: flex;
		flex-wrap: no-wrap;
	} 

	.prod_item_wishlist .item {
		min-height: 140px;
	}

	.prod_item_wishlist .item .picture {
		width: 140px;
		height: 140px;
		margin-bottom: 10px;
	}

	.prod_item_wishlist .item .picture .wishlist {
		position: relative; 
		left: 100px; 
		top: 10px;
	}
	
	.prod_item_wishlist .item .content {
	  width: 230px;
	  margin-top: 0px;
	  margin-bottom: 2px;
	}

	.prod_item_wishlist .item .content_header {
	  width: 230px;
	  height: 50px;
	  overflow: hidden;
	  margin-top: 0px;
	  margin-bottom: 2px;
	}

	.prod_item_wishlist .item .price {
	  width: 135px;
	  height: 180px;
	  font-size: 18px;
	  text-align: right;
	  
	}

	.prod_item_wishlist .item .close {
	  width: 20px;
	  padding-top: 3px;
	}
	.slider_slogan {
			width: 600px;
			position: absolute;
			text-align: right;
	}

	.slider_piclayer {
			height: 206px;
			width: 100%;
			position: absolute;
			color: #FFFFFF;
			font-size: 22px;
			text-shadow: #000000 0px 0px 8px;
			text-align: left;
	}

	.slider_piclayer H1 {
			color: #FFFFFF;
			font-size: 26px;
	}

	.slider_piclayer A {
			color: #FFFFFF;
			text-decoration: none;
			cursor: pointer;
	}

	.slider_piclayer A:hover {
			color: #FFFFFF;
			text-decoration: none;
			cursor: pointer;
	}

	.slider_text {
			position: relative;
			font-size: 22px;
			height: 140px;
			width: 300px;
			text-align: right;
			padding-right: 20px;
			padding-top: 10px;
			padding-bottom: 10px;
			padding-left: 10px;
			left: +260px;
			top: +85px;
			overflow:hidden;
			line-height: 30px;
	}

	.slider_inactive {
	}

	.slider_inactive A {
			color: #3D5B4E;
			text-decoration: none;
	}

	.slider_active A {
			color: #9B9B9B;
			text-decoration: none;
	}

	.slider_direct {
			overflow: hidden; 
			height: 35px; 
			margin: auto; 
			width: 600px; 
			text-align: left;
			font-size: 14px;
			padding-left: 1px;
			text-shadow: #000000 0px 0px 1px, #000000 0px 0px 1px ;
	}

	.slider_piclayer_outer {
		opacity: 0.25;  
		width: 100%; 
		height: 282px; 
		top: -30px; 
		position: relative;
	}

	.slider_piclayer_inner {
		width: 600px; 
		height: 250px; 
		top: -295px; 
		margin: auto;
		position: relative;
	}

	.slider_text_shadow {
		padding-top: 40px; 
		padding-right: 40px; 
		display: table-cell; 
		height: 100%; 
		display: table-cell; 
		width: 213px; 
		vertical-align: top;
	}

	.slider_bullets {
		position: relative; 
		text-align: center; 
		display: block; 
		width: 100%; 
		top: 227px;
	}

	.slider_bullet {
		display: inline-block;
		font-size: 80px; 
		width: 20px;
		margin-top: 6px;
	}

	.slider_container {
		position: relative;
		text-align: center;
		min-height: 250px;
		display: block;
		width: 100%;
	}

}