@import url("font/css/font-awesome.css");

*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


	/* General styles */
    body {
        margin:0;
        padding:0;
        border:0;			/* This removes the border around the viewport in old versions of IE */
        width:100%;
							/* The min-width property does not work in old versions of Internet Explorer */
	font-family: "Trebuchet MS", Verdana, Arial, sans-serif;  
	font-size: 13px;
    }


 table {
	font-size:13px;
	font-family: "Trebuchet MS", Verdana, Arial, sans-serif;  
}



	b {
	font-weight: 600;
	}

	img {
		border: 1px solid #808080;
	}

	a, a:visited {
	    	color:#000;
		text-decoration: none;
	}

	a:hover {
		color:#000;
		text-decoration:underline;
	}

	A img {
	        background:#FFF;  
		border: 1px solid #808080;
	}

	A img:hover {
/*		border: 1px solid #303030;*/
	}




	li {
	margin-left: 20px;
	}

    h1, h2, h3 {
        padding:0;
    }

    p {
        padding:0;
    }

    form {
	margin-bottom:0px;
	margin-top:0px;
	}

    text{
	width:200px;
    }
                
    textarea{
	width:98%;
    }

#header {
	clear:both;
	float:left;
        width:100%;				/* width of whole page */
	height: 107px;
	overflow:hidden;		/* This chops off any overhanging divs */

	/*background:#303030;*/	
	background: url(images/header_back_3.gif) repeat-x top; 
    }

#logo {
	position:relative;	
	display:block;
	clear:both;
	float:left;
	margin-top: 5px; 
	margin-bottom: 8px; 
	margin-left: 15px;
	width: 130px; 
	height: 71px;
	background: transparent url(images/os_logo20.gif) no-repeat top left;
}

#header h2 { 
	position:relative;
	display:block;
	float: left;
	margin-top: 30px; 
	margin-bottom:0px;
	margin-left: 10px;
	color: #005C30;
	text-transform:uppercase;
	font-family: "Trebuchet MS", Tahoma, Arial;
	font-size:16px; 
	font-weight: 600; 
	}


#language_bar {
	float: left; 
	height: 104px; 
	width: 80px;
	margin-top: 84px;
}

#header ul, .language_bar ul {
    clear:left;
    float:left;
    list-style:none;
    margin:0 0 0 15px;
    padding: 0 0 0 0;
   // height: 15px;	
}


#language_bar ul {
	width: 80px;
}

#header ul li, #language_bar ul li {
	    display:inline;
	    list-style:none;
	    margin:0;
	    padding:0;
}

#header ul li a, #language_bar ul li a {
	    display:block;
	    float:left;
	    border: 1px solid #ccc;
	    border-radius: 5px 5px 0px 0px;
	    color:#303030;
	    text-align:center;
	    margin:0 0 0 1px;
	    font-size: 100%;
	    font-weight:normal;		
	    text-decoration:none;
	}


#header ul li a {
	    padding: 3px 20px;
	    left:15px;
	
}

#language_bar ul li a {
	    padding:3px 7px;
	    left:5px;
}


	#header ul li a.active,
	#header ul li a.active:hover {
	    color:#fff;         
	    background:#303030;
	}

	#header ul li a span {
	    display:block;
	}


.subheader, subheader2 {
        clear:both;
	text-align:left;
	padding-left: 20px;
	min-height:23px;
	border-top:2px solid #808080;
	border-bottom:1px solid #ddd;
	font-weight: normal; 
	margin-bottom: 10px;
}

#footer {
	clear:both;
	float:left;
	width: 100%;
	overflow:hidden;		/* This chops off any overhanging divs */
	color: #888;
	margin:0;
	border-top: 2px solid #808080;
	font-size: 80%;
}

#footer a{
	color: #888;
}

#global_announce {
display: block;
background: #FE9528; 
width: 100%;
font-weight: 600; 
padding:5px;
text-align:center;
}

/*������ ������, ������� ����� ����� */

.olga_style_01 {
color: #000; 
font-family:"Tahoma"; 
font-size: 120%; 
line-height: 150%;
font-weight: 800; 
text-transform: uppercase;
}


.subheader span, #footer span {
	display:block;
	margin-bottom: 0px;
	margin-top: 3px;
	padding: 0 20px 0 0;
	}


/* 3 column */

#contentwrapper_dark, #contentwrapper_white {
float: left;
width: 100%;
}

#contentwrapper_dark{
background: #303030;
}

#contentwrapper_white{
background: #fff;
}

#contentcolumn{
margin: 0 200px 0 230px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 230px; /*Width of left column*/
margin-left: 0;
}

#rightcolumn{
float: left;
width: 200px; /*Width of right column*/
margin-left: -200px; /*Set left marginto -(RightColumnWidth)*/
}


.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}



/* End of column structure */


	
.hi_image { 
cursor: pointer; 
}


#title_added_text
{
display:block; 
margin-top:10px;
}

.menu {
position:relative;
float:left;
width:100%; 
left: 0px;
margin-top:0px;
margin-right:15px;
z-index:99;
} 

.menu ul, .page_menu ul  { /* remove bullets and list indents */
list-style: none;
margin: 0;
padding: 0;
}

.menu li {
	margin-left: 0px;
}


.menu a, .menu h2, .boxhead h2, .boxhead2 h2, .page_menu a {

font-weight: normal;
color: #000;
display: block;
margin: 0;
padding-top:7px;
padding-bottom:7px;
padding-left:20px;
padding-right:20px;

}



.menu h2, .boxhead h2, .boxhead2 h2 {
font-size: 100%;
}

.menu a {
border-top: 1px solid #808080;
}

.menu h2, .boxhead h2, .boxhead2 h2, .boxhead a {
color: #fff;
text-transform: uppercase;
}

.menu .menu_first h2, .boxhead h2 {
  background: #505050;
  border-radius: 5px 5px 0px 0px;
}

.boxhead2 h2 {
  background: #FE8528 
  font-weight: 600;	
}


.menu a, .page_menu a, .titlesubheader, .page_announce {
background: #e4e4e4;
font-weight: normal;
text-decoration: none;
color: #000;
}

.titlesubheader, .page_announce {
//clear:both;
padding:10px;
border: 1px solid #808080;
}

.titlesubheader{
font-weight:normal;
margin-bottom: 7px;
}

.page_announce {
background: #CEC;
//border: 1px solid #080;
}


.page_menu a {
	border-bottom:1px solid #FFF;
}

.menu a:hover, .page_menu a:hover {
color: #fff;
text-decoration:none;
}

.menu li a em, .page_menu li a em { 
display:block; 
float:left;
margin-right:10px;
width:20px; 
height:20px; 
}

.menu li a em.ts { 
background-image: url('images/icon_ts_01.gif'); 
background-repeat: no-repeat; 
background-position: center center; 
}

.menu li a em.sw { 
background-image: url('images/icon_sw_01.gif'); 
background-repeat: no-repeat; 
background-position: center center; 
}

.menu li {
/* make the list elements a containing block for the nested lists */
position: relative;
} 

.menu ul ul ul {
position:absolute;
top: 1px; 
left: 100%; /* to position them to the right of their containing block */
width: 550px; /* width is based on the containing block */
border-left:1px solid #eee;

}

.menu ul ul ul a {
background:#303030;
height:25px;
color: #fff;
font-weight: 600;
font-size: 100%;
white-space:nowrap;
}

div.menu ul ul ul,
div.menu ul ul li:hover ul ul
{display: none;}


div.menu ul ul li:hover ul,
div.menu ul ul ul li:hover ul
{display: block;}



.container_title {
//clear: both;
width: 100%;
float: left;
margin-bottom: 10px;
}

.prod_title, .prod_num {
  box-sizing: border-box;
  ms-box-sizing: border-box;
  webkit-box-sizing: border-box;
  moz-box-sizing: border-box;
  margin:0;
  display: inline-block;
  float:left;
  padding: 7px 5px;
  font-weight: 600;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
}

.prod_title{
  width: 80%;
    background: #505050;
//  background: #406040;
//  background: #005C30;
  border: 1px solid #505050;
  text-align: left;
  border-radius: 0px 5px 5px 0px;
}

.prod_num{
  width: 20%;
  background: #005C30;
  border: 1px solid #005C30;
  text-align: right;
  border-right: 1px solid #8c8;
  border-radius: 5px 0px 0px 5px;
  color: #8c8;
}

.productcard {
clear:both;
height:100%;
border: 1px solid #808080;
border-radius: 5px;
margin-top: 10px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding:5px;
padding-left:10px;
overflow:hidden;		/* This chops off any overhanging divs */
background: #eeeeee;

}

.productcard a {
  font-weight: 600;
}

.productcard li {
margin-left:15px;
}


.align_center
{
position: relative;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.align_center:after
{
content: '';
display: block;
clear: both;
}

.align_center_to_left
{
position: relative;
right: 50%;
float: right;
}

.productcard_small, .videocard_small {
float: left;
position: relative;
z-index: 1;
//right: -50%;
overflow: hidden;
text-align: center;
font-size: 90%;
margin-top: 6px;
margin-bottom: 0px;
margin-left: 3px;
margin-right: 3px;
padding:5px;
line-height: 1.1; 
}

.productcard_small{
border: none;
width: 170px;
height: 215px;

}

.videocard_small {
border: 1px solid #808080;
background: #000;
color: #ccc;
margin: 5px;
padding: 10px;
width: 190px;
height: 190px;
}

.videocard_small p {
margin-top: 5px;

}
.videocard_side {
float: left;
border: 1px solid #ccc;
margin: 4px;
font-size: 90%;
text-align: center;
color: #000;
background: #e4e4e4;
padding: 5px;
width: 160px;
}


.videocard_small a {
color: #ccc;
}

.video_main {
border: 1px solid grey;
margin: 5px;
//clear: both;
position: relative;
z-index: 1;
width: 97%;
text-align: center;
padding:10px;
color: #ccc;
background: #000;
}

.video_media {
width: 70%;
}


.video_title, .video_download  {
//Заголовок над видеофайлом
	display: block;
	padding-top: 10px;
	margin-bottom: 5px;
	font-weight: normal;
	overflow:hidden;		
	float: left;
}

.video_title {
	font-size: 120%;
	width: 69%;
	color: #fff;
	     }
.video_download {
	width: 29%;
	font-size: 80%;
	text-align: right;
	     }

.video_download a {
	color: #fff;
	}

.video_divider {
//clear:both;
border-bottom: 1px dotted #aaa;
}

.video_bottom_30px {
	margin-top: 32px;
}

.video_equip {
	text-align: left;
	border-top: 1px  dotted #888;
}

.video_equip a, .video_equip a:visited {
	font-size: 90%;
	color: #fff;
}


.container-description{
float: left;
width: 100%;
}

.description{
margin-right: 280px; /*Set right margin to RightColumnWidth*/
min-height: 300px;
}

.images{
float: left;
width: 280px; /*Width of right column in pixels*/
margin-left: -280px; /*Set left margin to -(RightColumnWidth) */
}

.right_images {
	float:left; 
	width: 250px; 
	padding-top:15px;
}

.list_images {
	float:left; 
	width: 250px; 
	overflow: hidden;
	border: 1px solid #ccc;
  	border-radius: 5px;
	margin: 5px;
	margin-left: 0;
	padding: 5px;
}






.text_only {
//	clear:both;
	position:relative;
	width:100%;
	font-size: 100%;
	line-height:1.7;
}

.text_only p {
	padding-right:10px;
}

.text_only a, .switchcontent a {
	color: #008030;
	font-weight: 600;
}

.text_only img {
	border: 0;
}

.text_only h2 {
	font-size: 100%;
	text-transform: uppercase;
}


.text_only h3 {
	font-size: 100%;
	font-weight: 600;
	padding: 2px;
	padding-left: 10px;	
	background: #f8f8f8;
	border-bottom: 1px solid #ddd;
}


.text_only td  {
 	vertical-align: top;
	padding: 0;
}


.switchcontent {
	display: none;
	border: 1px solid grey;
	border-left: 5px solid #82C58A;
	margin-left: 20px;
	padding: 10px;
	background: #f8f8f8;
}


.p_table {
	margin-top:5px;
	width:100%; 
	border-collapse:collapse; 
	COLOR: #000000; 
	vertical-align: center;
	word-wrap:break-word;
}

.p_table td {
	border:1px solid #808080; 
	padding:3px; 
	padding-left:5px;
	word-wrap:break-word;
}

.p_table th {
	border:1px solid #808080; 
	padding:3px; 
	background: #eee; 
	text-align:left; 
	word-wrap:break-word;
}

.p_table A:link {COLOR: #000000; TEXT-DECORATION: none}
.p_table A:visited {COLOR: #000000; TEXT-DECORATION: none}
.p_table A:hover {COLOR: #000000; text-decoration: underline}


.in_stock {
	background:#82C58A;
	text-align: center;
}

.sidebox {
margin-bottom:5px;
overflow:hidden;

}

.boxhead, .boxhead2 {
	text-align: center;
}

.boxhead h2, .boxhead2 h2 {
padding-left:5px;
padding-right:5px;
}

.boxsubhead {
	height:15px;
	display: block;
	background: #ccc;
	font-size: 90%;
	font-weight:normal;
	text-transform: uppercase;
	text-align:right;
	padding-right:10px;
}

.boxbody {
	color: #000;
	
	background: #eeeeee;
	text-decoration: none;
	margin: 0;
	padding-right:10px;
	padding-left:10px;
	padding-top:5px;
}
.boxbody p {
	padding-bottom: 5px;
	margin: 0;
	border-bottom: 1px solid #808080;
}

.form_container {
padding:10px;
background: #eee;	
border: 1px solid #808080;
}


.underlined {
	font-weight: 600; 
	padding: 3px;
	padding-left: 7px;
	border-bottom:1px solid #808080;
}

.underlined {
	text-align:right; 

}

h4 {
	font-weight: 600; 
	padding: 3px;
	padding-left:7px;
	border-bottom:1px solid #808080;
	text-align:left; 
}


.form_div {
	clear:both;
	text-align:left; 
	font-weight: 600; 
	padding-left: 15px;
	background: #e0e0e0;
	border-top:1px solid #808080;
}

.icon_box {
    	position: relative;
	margin-top: 15px; 
	margin-bottom: 10px; 
	float:left; 
	display: table-cell;
	height: 36px; 
	width: 250px; 
	font-size: 90%;
}

.icon_box span, .titlesubheader span {
    display: block;
    vertical-align: middle; 
}

.icon_box img, .titlesubheader img {
	border: 0px;
	padding-left: 7px;
	padding-right: 7px;
	vertical-align: middle; 
}
.titlesubheader img {
	border: 0px;
}

.icon_box A img:hover {
/*	border: 1px solid #eee; */
	}

.uppercase{
	text-transform: uppercase;
	margin-top: 0px;
	margin-bottom: 5px;
}

.doc_text {
	COLOR: #000000; 
	vertical-align: center;
	}

.doc_text img, .doc_text A img:hover {
	border: 1px solid #fff;
	}

.doc_text h2, h5 {
	font-size: 100%;
	font-weight: 600;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.doc_text h3 {
	font-size: 100%;
	font-weight: 600;
	padding: 2px;
	padding-left: 10px;	
	background: #82C58A;
	border-bottom: 1px solid #ddd;
}

.doc_text h5 {
	border-bottom:1px solid #808080;
}

.doc_text li {
	margin-left: 15px;
}

.d_table {width:100%; border-collapse:collapse;  
	 COLOR: #000000; 
	}

.d_table td, th {
 border:1px solid gray; 
 padding:7px
 text-align: center;
 vertical-align: middle; 
 }

.d_table td, .d_text {
	font-size: 150%; 
	font-weight: 600; 
	text-align: center; 

	color: #005C30;
//	color:#82C58A;

	}

.d_table th {
	font-size:90%; 
	background-color:#eee;
	}

.d_text {
	text-align:left;
	}

.announce{
	float: left; 
	position:relative;
	width:170px; 
	z-index:100;
}

.videoblock {
  	float: right; 
	border: 1px solid #ccc;
	height: 100px; 
	width: 150px; 
	margin-right: 3px; 
	margin-top: 3px;
	text-align: center;
}

.newsblock {
  	float: right; 
//	border: 1px solid #ccc;
	height: 100px; 
	margin-right: 3px; 
	margin-top: 3px;
	text-align: center;
	overflow:hidden;		
}


.newsblock img {
border: 0;
}

.header_block {
	float:left;
}

.header_block A img:hover, .header_block img {
	border: 0px;
}


.video_header{
	height: 108px; 
	overflow:hidden;
	padding-left:10px;
}

.video_header a:hover{
	text-decoration: none;
}


.videoblock a: hover  {
}

.videoblock span {
	display: block;
	color: #fff;
	font-size: 90%;
	background: #606060;
	line-height: 0.9; 
	padding-top: 1px;
	padding-bottom: 2px;
	border-bottom: 1px solid #ccc;
}


.maintext {
	width: 55%; 
	float: left; 
	margin-left: 20px; 
	padding-top: 20px;
}

.mainimages {
	width: 30%; 
	height: 150px; 
	float: left; 
	text-align: right;
}

.twocolumnscard {
	width: 47%; 
	height: 170px;
	overflow:hidden;		
	float: left; 
	padding: 5px;  
	border: 1px solid #ccc; 
	margin-right:5px; 
	margin-bottom: 5px;
}


.form_table {
	border-bottom:1px solid #ccc;
}

.form_table th {
	text-align: right;
	vertical-align: top;
	border:0;
}
.form_table td {
	text-align: left;
	vertical-align: top;
	padding-bottom: 10px;
}

.tag, .tag_selected, .tag_green, .button_order {
  display: inline-block;
  float:left;
  margin: 3px;
  padding: 3px 25px;
  font-weight: 400;
  text-align: center;
  color: #888;
  border: 1px solid #ccc;
  background: #f1f1f1;
  border-radius: 7px 7px 7px 7px;
}

.tag_selected, .button_order {
  background: #505050;
  border: 1px solid #505050;
}

.button_order {
  color: #fff;
  cursor:pointer;
  padding: 5px 5px;
}


.tag_selected a {
   color: #fff;
}

.tag_green {
  background: #8c8;
}


.tag_r, .tag_r_selected, .tag_r_green {
  display:block;
  height: 21px;
  width: 15px;
  float: left;
  background: url(images/tag_04r.gif) no-repeat top left; 
}
.tag_r_selected {
  background: url(images/tag_01r.gif) no-repeat top left; 
}
.tag_r_green {
  background: url(images/tag_04r.gif) no-repeat top left; 
}




/* form elements */

input {
 background-color: #FFF;
 border: 0px;
 color: #060;
 font-size: 100%;
 font-weight: 600;
}

textarea {
 background-color: #FFF;
 border: 0px;
 color: #060;
 font-size: 100%;
 font-weight: 600;
}

.button {
    border: 1px solid #080;
    background: #82C58A;
    color: #000;
}

.button:hover {
    background: #363;
    color: #FFF;
}

.seminar_description {

  float:left; 
  padding-left: 20px;
  width: 27%; 
}


.more_info {
font-weight:normal;
cursor: pointer; 
padding-bottom: 5px;
border-right-style:solid;
border-left-style:solid;
border-top-style:solid;
border-bottom-style:dotted;
}

.more_info_text {
border-right-style:solid;
border-left-style:solid;
border-bottom-style:solid;
border-top-style:dotted;
padding: 5px;
}

.more_info, .more_info_text {
margin-left:10px;
border-color: #ccc;
border-width:1px;
background: #eaeaea;
overflow: hidden;
}


.accordion {

	font-weight:bold;
	cursor: pointer; 
	padding-bottom: 5px;
	margin-left:10px;
        background-color: #eee;

	border: 1px solid rgba(255, 255, 255, 0);
	border-radius: 4px 4px 0px 0px;
	box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);


    	text-align: left;

    	transition: 0.25s;
}

.accordion.active, .accordion:hover {
        background-color: #eee;
}


.accordion:before {
    content: "";
    display: block;
    background: url(images/plus_info.png) no-repeat;
    width: 20px;
    height: 20px;
    float: left;
    margin: 0 6px 0 0;
    transition: 0.45s;
}



.accordion.active:before {
    background: url(images/minus_info.png) no-repeat;
//	transform: rotate(90deg);
}

.panel {
    background-color: #ffffff;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    margin-left:10px;
    margin-bottom:5px;

	padding: 5px;
    text-align: left;
	border: 1px solid rgba(255, 255, 255, 0);
	border-radius: 0px 0px 4px 4px;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
	transition: 0.45s;
	
}

.panel:hover {
	border: 1px solid rgba(96, 125, 139, 0.4);
}
 
.panel>div {
    padding: 6px 10px;
    text-align: justify;
}








.menu_button {
    cursor: pointer; 
    padding: 5px;
	margin-bottom: 10px;
   display: block;
    background-color: #505050;
    border-radius: 5px 5px 5px 5px;
    background: url(images/menu_button_02.png) no-repeat;
    width: 40px;
    height: 40px;
	min-width:40px;
    background-size: 40px;
	float:left;
}

.mobile_info {
    padding: 10px;
    margin-bottom: 10px;
    margin-left: 10px;

    display: flex;
    align-items: center;

    font-size:14px; 
    font-weight: 600; 
    vertical-align: middle;
    color: #fff;

    background-color: #505050;
    border-radius: 5px 5px 5px 5px;
    height: 40px;
    float:left;
}

.mobile_info a, .mobile_info a:visited {
color: #ffc;
}


#menu_0 {
    margin-bottom: 10px;
}

.mobile_header {
    display: block;
    margin-left: 10px;
    display: flex;
    align-items: center;
    clear: both;
}



/*Backgrounds*/

.productcard, .titlesubheader, .p_table th, .form_container, .d_table th, .twocolumnscard, {
	background: #f8f8f8;
}

.menu a, .page_menu a, .boxbody, #header ul li a, .language_bar span, 
{
	background: #e4e4e4;
}

#newgroup 
{
	background: #888;
}


.subheader, .subheader a, #footer {
	background: #e4e4e4;
	color: #000;
}


.menu a:hover, .page_menu a:hover, #header ul li a:hover, .language_bar ul li a:hover, #newgroup:hover 
{
	text-decoration: none;
	color: #FFF;
	background: #005C30;
}


#himenu a {
	text-decoration: none;
	color: #FFF;
	background: #763009;
}

#himenu a:hover {
	text-decoration: none;
	color: #FFF;
	background: #f5a700;
//	background: #FE8528;
}

#newgroup {
//	background: #e4e4e4 url(images/new_2.png) no-repeat bottom right;
	background: #f5a700;
}

.orange {
	background: #f5a700;
}


#newgroup:hover {
//	background: #005C30 url(images/new_2.png) no-repeat bottom right;
	background: #005C30;
}


.figures {
	clear: both;
	overflow:hidden;		/* This chops off any overhanging divs */
	border: 0px;
	background: #eee;
	margin: 10px;
	padding: 10px;
	font-size: 100%;
	font-variant: small-caps;
}

.img_large {
	width: 100%;
}


/* TABS */

/* Ѓ §®ўл© Є®­вҐ©­Ґа в Ў®ў */
.tabs {
  min-width: 320px;
  padding: 0px;
  margin: 0 auto; 
  margin-bottom: 10px;
}

/* бвЁ«Ё ᥪ権 б ᮤҐа¦ ­ЁҐ¬ */
section {
  display: none;
  padding: 15px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 0px 5px 5px 5px;
}

.tabs input {
  display: none;
}

.form_container input {
  display: inline-block;
}

.form_container input:hover {
  color: #000;
  background: #eee;
  cursor: pointer;
}


/* бвЁ«Ё ўЄ« ¤®Є (в Ў®ў) */
.tabs label {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 7px 25px;
  font-weight: 600;
  text-align: center;

//  color: #888;

  color: #ccc;

  border: 1px solid #ddd;

// ****

//  background: #f1f1f1;
  background: #505050;
  border-radius: 5px 5px 0 0;
}

.tabs label:before {
  font-family: fontawesome;
  font-weight: normal;
  margin-right: 10px;
}
.tabs label[for*="1"]:before {
  content: "\f249";
}
.tabs label[for*="2"]:before {
  content: "\f0f6";
}
.tabs label[for*="3"]:before {
  content: "\f256";
}
.tabs label[for*="4"]:before {
  content: "\f008";
}

.tabs label:hover {
  color: #fff;
  cursor: pointer;
}
/* бвЁ«Ё ¤«п  ЄвЁў­®© ўЄ« ¤ЄЁ */
.tabs input:checked + label {
  color: #000;
  border: 1px solid #ddd;
  border-top: 2px solid #005C30;
  border-bottom: 1px solid #fff;
  background: #fff;
}

/*  ЄвЁў жЁп ᥪ権 б Ї®¬®ймо ЇҐаҐЄ«оз вҐ«п :checked */
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
  display: block;
}



/* Image slider */

.slider{
	width: 300px; /*Same as width of the large image*/
	position: relative;
	/*Instead of height we will use padding*/
	padding-top: 300px; /*That helps bring the labels down*/
	
	margin: 20px auto;

	background: #ffc;

	/*Lets add a shadow*/
	/*box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75); */
}


/*Last thing remaining is to add transitions*/
.slider>img{
	position: absolute;
	left: 0; top: 0;
	transition: all 0.5s;
}

.slider input[name='slide_switch'] {
	display: none;
}

.slider label {
	/*Lets add some spacing for the thumbnails*/
	margin: 7px 0 0 7px;
	border: 1px solid #999;

	width: 90px;
	height: 90px;
		
	float: left;
	cursor: pointer;
	transition: all 0.5s;
display: flex;
	
	/*Default style = low opacity*/
	opacity: 0.6;
}

.slider label img{
	display: block;
}

/*Time to add the click effects*/
.slider input[name='slide_switch']:checked+label {
	border-color: #666;
	opacity: 1;
}
/*Clicking any thumbnail now should change its opacity(style)*/
/*Time to work on the main images*/
.slider input[name='slide_switch'] ~ img {
	opacity: 0;
	transform: scale(1.1);
}
/*That hides all main images at a 110% size
On click the images will be displayed at normal size to complete the effect
*/
.slider input[name='slide_switch']:checked+label+img {
	opacity: 1;
	transform: scale(1);
}
/*Clicking on any thumbnail now should activate the image related to it*/




/* ####### responsive layout CSS ####### */


@media  only screen and (max-width: 768px) { /* 2nd level responsive layout break point- drop left column down */

	#leftcolumn{
	float: none;
	width: 100%;
	clear: both;
	margin-left: 0;
	}
	
	#contentcolumn{
	margin-left: 0;
	margin: 0 0 0 0; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
	
	}

	#rightcolumn{
	display:none;
	}

	#menu_0 {
    	display: none;
	}


	.productcard_small, .videocard_small {
	padding:0px;
	}

	#header {
	display:none;
	}

	.videoheader {
	display:none;
	}
	
	.subheader {
	display:none;
	}

	
	.mobile_header {
	display:flex;
	}


	.description{
	margin-right: 0px; /*Set right margin to RightColumnWidth*/
	}


	.images{
	width: 100%;
	margin-left: 0px; 
	display:block;
  	clear:both;
	}


	.productcard_small {
	width: 154px;
	margin-left: 2px;
    	margin-right: 2px;
	
	}
}


@media (min-width: 769px){ /* 1st level responsive layout break point- drop right column down*/

	#leftcolumn{
	margin-left: 0;
	}

	#menu_0 {
    	display: block !important;
	}

	
	#rightcolumn{
	float: none;
	width: 100%;
	margin-left: 0;
	clear: both;
	}
	
	#contentcolumn{
	margin: 0 0 0 230px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
	}


	#header {
	display:block;
	}

	.videoheader {
	display:block;
	}

	
	.subheader {
	display:block;
	}
	
	.mobile_header {
	display:none;
	}

	.description{
	margin-right: 280px; /*Set right margin to RightColumnWidth*/
	min-height: 300px;
	}


	.images{
	float: left;
	width: 280px; /*Width of right column in pixels*/
	margin-left: -280px; /*Set left margin to -(RightColumnWidth) */
	}



}


/* END ####### responsive layout CSS ####### */