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

@media screen and (max-width: 980px) and (orientation: portrait) 
{
	HTML
	{
		font-family: var(--fn-default),Arial,sans-serif;
		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: 720px;
		width: 720px;
		max-width: 720px;
		box-sizing: border-box; 
	}
	
	BODY
	{
		margin: 0px; height: 100%; padding: 0px;
		height: 100%;
		background-color: var(--co-background);
		font-size: 22px;
		color: var(--co-text);
		text-align: left;
		max-width: 720px;
	}

	H1, .fn_h1
	{
		font-family: var(--fn-default),Arial,sans-serif;
		font-size: 36px;
		font-weight: 900;
		line-height: 42px;
		letter-spacing: 0em;
	}

	H2, .fn_h2 
	{
		font-family: var(--fn-default),Arial,sans-serif;
		font-size: 24px;
		font-weight: 700;
		line-height: 28px;
		letter-spacing: 0em;
		text-transform: uppercase;
	}

	H3, .fn_h3
	{
		font-family: var(--fn-default),Arial,sans-serif;
		font-size: 20px;
		font-weight: 700;
		line-height: 23px;
		letter-spacing: 0em;
		text-transform: uppercase;
				}

	P, DIV
	{
		font-family: var(--fn-default),Arial,sans-serif;
		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: var(--fn-default),Arial,sans-serif;
		font-size: 22px;
		font-weight: 400;
		line-height: 37px;
		letter-spacing: 0em;
		text-align: left;
		text-transform: none;
	}

	.small, .fn_size_small
	{
		font-family: var(--fn-default),Arial,sans-serif;
		font-size: 18px;
		font-weight: 400;
		line-height: 21px;
		letter-spacing: 0em;
	}
	
	#style_used
	{
		background-color: #ff0000; min-height: 2px; width: 720px;
	}
	
	INPUT						{ font-size: 29px; border-radius: 0px; box-sizing: border-box; height: 47px; width: 272px; padding-left: 10px; padding-right: 10px; color: var(--co-text); background: var(--co-background); border: 1px solid var(--co-middle);}
	INPUT.field					{ border-radius: 0px; box-sizing: border-box; height: 40px; width: 540px; padding-left: 10px; padding-right: 10px; color: var(--co-text); background: var(--co-background); border: 1px solid var(--co-middle);}
	INPUT.search				{ font-size: 29px; border-radius: 0px; box-sizing: border-box; height: 40px; width: 150px; color: var(--co-text); background: var(--co-background); border: none;}
	INPUT:focus					{ outline: none; }
	TEXTAREA					{ font-size: 29px; padding: 10px; border-radius: 0px; box-sizing: border-box; height: 47px; width: 272px; color: var(--co-text); background: var(--co-background); border: 1px solid var(--co-middle);}
	TEXTAREA:focus				{ outline: none; }
	SELECT						{ font-size: 29px; border-radius: 0px; box-sizing: border-box; height: 40px; width: 250px; color: var(--co-dark); border: 1px solid var(--co-middle); padding-left: 10px; background: url("/filer/icons/middle/dropdown.svg") no-repeat right 7px top 12px var(--co-background); -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: var(--co-dark); border: 1px solid var(--co-middle); padding-left: 10px; background: url("/filer/icons/middle/dropdown.svg") no-repeat right 7px top 12px var(--co-background); -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); }
	.di_leading_icon			{ display: block; margin-bottom: 20px; }

	.bu_normal 					{ border-radius: 6px; cursor: pointer; text-transform: uppercase; height: 47px; border: 2px solid var(--co-dark); box-sizing: border-box; padding-top: 9px; padding-left: 12px; padding-right: 12px; }
	.bu_normal:hover			{ opacity: var(--bu-hover); }
	.bu_normal_inactive			{ border-radius: 6px; opacity: 0.2; text-transform: uppercase; height: 47px; border: 2px solid var(--co-dark); box-sizing: border-box; padding-top: 9px; padding-left: 12px; padding-right: 12px; }
	.bu_normal_inactive:hover	{ opacity: 0.2; text-transform: uppercase; height: 47px; border: 2px solid var(--co-dark); box-sizing: border-box; padding-top: 9px; padding-left: 12px; padding-right: 12px; }
	.bu_circel_small			{ width: 47px; height: 47px; border-radius: 20px; }
	.bu_circel_small:hover		{ opacity: var(--bu-hover); }
	.bu_circel_big				{ width: 53px; height: 53px; border-radius: 30px; }
	.bu_circel_big:hover		{ opacity: var(--bu-hover); }
	.bu_radius_add				{ border-radius: 23px; }
	
	.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: var(--co-accent1) }

	.margin_content				{ width: 720px; margin: auto;}
	.padding_content			{ padding-left: 20px; padding-right:20px; }
	.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: var(--co-background); 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: var(--co-text); border: 0px solid var(--co-background); border-bottom: 5px solid var(--co-background); cursor: pointer; }

	.top_menu_active			{ padding-bottom: 10px; margin-right: 20px; color: var(--co-accent1); border: 0px solid var(--co-background); border-bottom: 5px solid var(--co-accent1); cursor: pointer; }

	.box_dropdown				{ z-index: 65001; background: var(--co-background); border: 1px solid var(--co-middle); position: absolute; }
	.box_dropdown_marker		{ z-index: 65002; background: var(--co-background); width: 16px; height: 16px; border: 0px solid var(--co-background); border-left: 1px solid var(--co-middle); border-top: 1px solid var(--co-middle); 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: var(--co-text); border: 1px solid var(--co-middle); background: url("/filer/icons/middle/dropdown.svg") no-repeat right 10px top 16px var(--co-background); background-size: 25px 25px; -webkit-appearance:none; -moz-appearance:none; appearance:none; }
	.box_dropdown .bu_normal	{ height: 60px; padding-top: 14px;  }

	.quicksearch				{ width: 220px; height: 40px; border: 1px solid var(--co-middle); 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_50_popup				{ width: 520px; }
	.co_margin_bottom			{ margin-bottom: 15px; }
	.co_margin_bottom_big		{ margin-bottom: 25px; }
	.p100						{ width: 100% }



	#mainbody
	{
		margin-top: 130px;
	}

	#mainbody_no_margin 
	{
		margin-top: 100px;
	}

	/* ========== CHECKBOX & RADIOBUTTON =========== */
       /* The container */
        .in_checkbox
        {
			display: block;
			position: relative;
			padding-left: 50px;
			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: 40px;
			background-image: var(--svg-checkbox-desktop-inactive);
        }

        /* 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
        {
			position: absolute;
			top: 0;
			left: 0;
			height: 20px;
			width: 40px;
 			background-image: var(--svg-checkbox-desktop-active);
        }


         /* Customize the label (the container) */
        .in_radiobutton
        {
          display: block;
          position: relative;
          padding-left: 50px;
          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: 20px;
			width: 40px;
			background-image: var(--svg-radiobutton-desktop-inactive);
        }

        /* 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
        {
			position: absolute;
			top: 0;
			left: 0;
			height: 20px;
			width: 40px;
 			background-image: var(--svg-radiobutton-desktop-active);
        } 

    /* ========== 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
	{
		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;
	}

	.special_price {font-size: 24px; position: absolute; width: 50px; height:50px; top: -275px; left: -15px;}

	.slider_piclayer
	{
			height: 206px;
			width: 100%;
			position: absolute;
			color: var(--co-font-on-accent1);
			font-size: 22px;
			text-shadow: var(--co-dark) 0px 0px 8px;
			text-align: left;
	}

	.slider_piclayer H1
	{
			color: var(--co-font-on-accent1);
			font-size: 26px;
	}

	.slider_piclayer A
	{
			color: var(--co-font-on-accent1);
			text-decoration: none;
			cursor: pointer;
	}

	.slider_piclayer A:hover
	{
			color: var(--co-font-on-accent1);
			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: var(--co-accent1);
			text-decoration: none;
	}

	.slider_active A
	{
			color: var(--co-middle);
			text-decoration: none;
	}

	.slider_direct
	{
			overflow: hidden; 
			height: 35px; 
			margin: auto; 
			width: 600px; 
			text-align: left;
			font-size: 14px;
			padding-left: 1px;
			text-shadow: var(--co-dark) 0px 0px 1px, var(--co-dark) 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%;
	}
	
/* Account popup */
	
	#AccountInfo
	{
		width: 550px; right: 550px;
	}
	
/* header-class */	

	#header 
	{
		top: 0px;
		position: fixed;
		background: var(--co-background);
		box-shadow: 0 0 7px 0 rgba(0,0,0,.2);
		z-index: 20000;
		height: 100px;
		width: 100%;
		text-align: center;
	}

	#header IMG.logo
	{
		max-height: 100px;
		max-width: 320px;
		position: relative;
		top: +30px;
	}

	#header .fn_big
	{ 
		font-size: 16px; 
	}

	#header .fn_icon
	{ 
		font-size: 46px; 
		color: var(--co-accent1);
		transition: all .3;
	}

	#header .fn_icon:hover
	{ 
		font-size: 46px; 
		color: var(--co-accent2);
		transform: scale(1.2);
	}

/* footer-class */	
	
	#page_footer
	{
		margin-top: 40px;
	}

	#page_footer A
	{
		color: var(--co-font-on-accent1);
	}

	#page_footer A:hover
	{
		color: var(--co-light);
	}
	
	.page_footer_headline
	{
		opacity: 0.3;
	}
	
	#page_footer_menus
	{
		background-color: var(--co-dark);
		color: var(--co-light);
		min-height: 200px;
		padding-top: 20px;
		padding-bottom: 20px;
	}

	#page_footer_partner
	{
		margin-top: 20px;
		width: 100%px;
		display: flex;
		text-align: center;
	}

	.page_footer_partner_logo
	{
		flex: 1 0 auto;
		padding: 0px;
		width 100%;
		padding-left: 20px;
		padding-right: 20px;
	}

	#page_footer_basemenu
	{
		margin-top: 20px;
		width: 100%;
		display: flex;
		text-align: center;
	}

	.page_footer_basemenu_entry
	{
		flex: 1 0 auto;
		padding: 0px;
		width 100%;
		padding-left: 20px;
		padding-right: 20px;
	}

	.page_footer_partner_logo IMG
	{
		max-width: 80px;
		max-height: 40px;
		filter: grayscale(.7) brightness(1.2);
	}

	
	#page_footer_infoblock
	{
		background-color: var(--co-black);
		color: var(--co-light);
		min-height: 70px;
		padding-top: 25px;
	}

	#page_footer_infoblock_content
	{
		width: 100%;
		display: block;
		text-align: center;
		padding: 0px;
		padding-left: 40px;
		padding-right: 40px;
	}

	#page_footer_infoblock_content A
	{
		color: var(--co-light);
	}

	#page_footer_infoblock_content A:hover
	{
		color: var(--co-superlight);
	}

	#page_footer_infoblock_content .flex_col
	{
		text-align: center;
		flex: 1 0 auto;
	}

	#page_footer_infoblock_content .flex_col:nth-child(1)
	{
		text-align: left;
	}

	#page_footer_infoblock_content .flex_col:nth-last-child(1)
	{
		text-align: right;
	}

	#page_footer_languages_select
	{
		display: inline-block;
		cursor: pointer;
		position: relative; 
		top: -4px; 
		padding-left: 10px;
	}
	
	#page_footer_languages_select #page_footer_languages
	{
		display: none;
		opacity: 0.0;
		left: +1px;
		z-index: 65000;
		position: absolute;
		background-color: var(--co-black);
		border: 1px solid var(--co-light);
		border-radius: 3px;
		padding-top: 4px;
		padding-bottom: 4px;
	}

	#page_footer_languages_select:hover #page_footer_languages
	{
		display: block;
		opacity: 1.0;
	}

	#page_footer_languages .language
	{
		background-color: var(--co-black);
		margin-left: 4px;
		margin-right: 4px;
		padding-left: 6px;
		padding-right: 6px;
		padding-top: 2px;
		padding-bottom: 2px;
		border-radius: 2px;
	}

	#page_footer_languages .language:hover
	{
		color: var(--co-dark);
		background-color: var(--co-light);
		margin-left: 4px;
		margin-right: 4px;
		padding-left: 6px;
		padding-right: 6px;
		border-radius: 2px;
	}
		
	.list_body {
		list-style-type: none;
		padding: 0px;
		margin: 0px;
	}
	
	.list_line:nth-child(odd)	{
		background-color: var(--co-white);
		color: var(--co-dark);
		border-bottom: 1px solid var(--co-dark);
		cursor: pointer;
		margin: 0px;
		padding: 0px 0px 15px 0px;
		max-height: 42px;
	}
	
	.list_line:nth-child(even)	{
		background-color: var(--co-light);
		color: var(--co-dark);
		border-bottom: 1px solid var(--co-dark);
		cursor: pointer;
		margin: 0px;
		padding: 0px 0px 15px 0px;
		max-height: 42px;
	}
	
	.list_line DIV {
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.list_body {
		border: 1px solid var(--co-dark);
	}

}