@charset "utf-8";
/* CSS Document */
*{
	margin:0;
	padding:0;
	-webkit-font-smoothing: antialiased;
}

html{
	 height:100%;
 	min-height:100%;
	font-size:10px
}

.main{
	width:100%;
	margin:0 auto;
}

.clearfix:after,
.main:after, main2.after{
	content:'';
	display:block;
	overflow:hidden;
	visibility:hidden;
	width:0;
	height:0;
	clear:both;
	}

.main{
	zoom:1;
}

.blok{
	float:left;
	clear:both;
	width:100%;
	
	box-sizing:border-box;
    -moz-box-sizing: border-box;
	}
	
.boxsize{box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; -webkit-box-sizing:border-box; }







										/* universal*/
										html{ font-size:10px}
									
									
									  	#fileupload{ display:none}
									 	.input_label{ cursor:pointer}
									 
									 	.bar_frame{ font-size:0px}
									 	.bar{ display:inline-block; width:auto}
									 
										 .column{
											float:left;
											
											text-align:center;
											
											box-sizing:border-box;
											-moz-box-sizing: border-box;
										
										}
										
										.fld{ background-color:#fff}
										.cart{ padding:2rem}
										.title1{font-size:1.6rem}
									
									/*tables*/
									table{width:100%; border:0px; border-collapse: collapse;}
									td{ font-size:12px; color:#000; padding:5px 10px 5px 10px; border:0px}
									.table_header{background-color:#F96; color:#FFF}	
									
										
									/*alignment*/
										.xlleft{ text-align:left}
										.xlright{ text-align:right}	
										.xlcenter{ text-align:center}
										
								     /*floats*/
									 .xlfleft{ float:left}
									 .xlfright{ float:right}
									 
									 /*depend scr_size*/
									    
										.xlhide	{ display:none}
										.xlshow	{display:block}
										.xlshowi	{ display:inline-block}
									 
									 /*column class*/
									 	.xl1		{ width:8.33% }
										.xl2		{ width:16.66% }
										.xl3		{ width:25% }
										.xl4		{ width:33.33% }
										.xl5		{ width:41.66% }
										.xl6		{ width:50% }
										.xl7		{ width:58.33% }
										.xl8		{ width:66.66% }
										.xl9		{ width:75% }
										.xl10		{ width:83.33% }
										.xl11		{ width:91.66% }
										.xl12		{ width:100% }
										
										.xl20		{ width:20% }
										.xlp5		{ width:20% }
										.xlp7		{ width:14.285% }
										.xlp8		{ width:12.5% }
										.xlp9		{ width:11.111% }
										.xlp10		{ width:10% }
										.xlinline		{ width:auto }
										
									 /*forms*/
									 
									 /*admin forms default*/
									 input, select, textarea{ width:100%; padding:5px; background-color:transparent; border:1px rgba(0,0,0,.2) solid; letter-spacing:.1rem; font-size:1.2rem
									 	-moz-box-shadow:    inset 0 0 5px rgba(0,0,0,.1);
									   -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,.1);
									   box-shadow:         inset 0 0 5px rgba(0,0,0,.1);
									   
									   box-sizing:border-box;
									   -moz-box-sizing:border-box;
									   -webkit-box-sizing:border-box;
									 }
									 
									 .input_reset {width:auto; box-shadow:none}
									 
									 .f-element{ padding-top:15px}
									 .f-label{ text-align:left; font-size:12px; padding-bottom:3px; color:#333}
									 .f-field{ color:#555; background-color:transparent; border:1px rgba(0,0,0,.2) solid; padding:0.5rem; font-size:1.2rem; height:2.6rem; letter-spacing:.1rem; width:100%}
									 textarea{font-family:Arial, Helvetica, sans-serif}
									 
									 /*ovals*/
									  .xlcircle{
											-webkit-border-radius: 100%;
											-moz-border-radius: 100%;
											border-radius: 100%;
										}
										
									/*btns*/
									.btn_big{ text-decoration:none; display:inline-block; cursor:pointer; color:#fff; font-size:12px; text-align:center;  letter-spacing:1px; background-color:#FC0; padding:12px 20px; border:0px #fff solid;
	
										-webkit-border-radius: 2px;
										-moz-border-radius: 2px;
										border-radius: 2px;
										
										transition: 			background-color .5s;
										-webkit-transition: 	background-color .5s;
										-moz-transition: 		background-color .5s;
										-o-transition: 			background-color .5s;
										-ms-transition: 		background-color .5s;
									
									}
									
									.btn_big:hover{ background-color:#F90; color:#FFF; }
									
									.btn {display:inline-block; padding:5px 12px 5px 12px; font-size:1.2rem; background-color:#FF8B3F; color:#fff; text-decoration:none; letter-spacing:1px; box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.2);
										-webkit-border-radius: 5px;
										-moz-border-radius: 5px;
										border-radius: 5px;
										transition: background-color .3s;
									}
									
									.btn:hover{cursor:pointer}
									
									.btn_flat {display:inline-block; padding:5px 12px 5px 12px; font-size:1.2rem; background-color:#eee; color:#777; text-decoration:none; letter-spacing:1px;
										     
									}
									
									.btn_flat:hover{background-color:#ddd;}
									
									
									
									/*modal*/
									.f-curtain{
                                        position:fixed;
                                        top:0px;
										left:0px;
                                        background-color:rgba(0,0,0,.9);
                                        width:100%;
                                        height:100%;
                                        /*display:none;*/
                                        /*pointer-events:none;*/
                                        
                                        background-position:center;
                                        background-repeat:no-repeat;
                                        z-index:2000;
                                        
                                        
                                        
                                        -webkit-transition: opacity 1s;
                                        -moz-transition: opacity 1s;
                                        -o-transition: opacity 1s;
                                        -ms-transition: opacity 1s;
                                        transition: opacity 1s;
    
                                    }
									
									.f-curtain-content{
                                        pointer-events:auto;
                                        background-color:#FFF;
                                        padding:0px;
                                        position:absolute;
                                        top:10%;
                                        max-height:80%;
                                        left:10%;
                                        width:80%;
                                        overflow-y:auto; 
                                    }
									
									.f-curtain-content.width20{ left:40%; width:20%; }
									.f-curtain-content.width30{ left:35%; width:30%; }
									.f-curtain-content.width40{ left:30%; width:40%; }
									.f-curtain-content.width50{ left:25%; width:50%; }
									.f-curtain-content.width60{ left:20%; width:60%; }
									.f-curtain-content.width70{ left:15%; width:70%; }
									.f-curtain-content.width80{ left:10%; width:80%; }
									.f-curtain-content.width90{ left:5%; width:90%; }
									.f-curtain-content.width100{ left:0%; width:100%; top:0%; max-height:100%; height:100%}
									
									.f-curtain-content-header{background-color:#eee; color:#333}
                                    .f-curtain-content-footer{background-color:#eee; color:#333}
									
									.f-preload_bar{ display:none; position:absolute; bottom:30%; left:30%; width:40%; background-color:#fafafa; height:2px;}
									.f-preload_stripe{ position:absolute; top:0px; left:0px; width:0%; height:100%; background-color:#FF8B3F}
									
									
									/*slider checkbox*/
									.sc-switch {
									  position: relative;
									  display: inline-block;
									  width: 3rem;
									  height: 1.7rem;
									  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
									}
									.sc-switch:focus{
										outline: none;
									}
									
									.sc-switch input { 
									  opacity: 0;
									  width: 0;
									  height: 0;
									}
									
									.sc-slider {
									  position: absolute;
									  cursor: pointer;
									  top: 0;
									  left: 0;
									  right: 0;
									  bottom: 0;
									  background-color: #ccc;
									  -webkit-transition: .4s;
									  transition: .4s;
									}
									
									.sc-slider:before {
									  position: absolute;
									  content: "";
									  height: 1.3rem;
									  width: 1.3rem;
									  left: 0.2rem;
									  bottom: 0.2rem;
									  background-color: white;
									  -webkit-transition: .4s;
									  transition: .4s;
									}
									
									input:checked + .sc-slider {
									  background-color: #FF8B3F;
									}
									
									input:focus + .sc-slider {
									  box-shadow: 0 0 0px #FF8B3F;
									}
									
									input:checked + .sc-slider:before {
									  -webkit-transform: translateX(1.3rem);
									  -ms-transform: translateX(1.3rem);
									  transform: translateX(1.3rem);
									}
									
									/* Rounded sliders */
									.sc-slider.round {
									  border-radius: 1.7rem;
									}
									
									.sc-slider.round:before {
									  border-radius: 50%;
									}

									
									 @media only screen and (max-width:750px){
										 
										 /*alignment*/
										.lleft{ text-align:left}
										.lright{ text-align:right}	
										.lcenter{ text-align:center}
										
										/*floats*/
									 	.lfleft{ float:left}
									 	.lfright{ float:right}
										 
										 .lhide		{ display:none}
										 .lshow		{display:block}
										 .lshowi	{ display:inline-block}
										 
										 .l1		{ width:8.33% }
										 .l2		{ width:16.66% }
										 .l3		{ width:25% }
										 .l4		{ width:33.33% }
										 .l5		{ width:41.66% }
										 .l6		{ width:50% }
										 .l7		{ width:58.33% }
										 .l8		{ width:66.66% }
										 .l9		{ width:75% }
										 .l10		{ width:83.33% }
										 .l11		{ width:91.66% }
										 .l12		{ width:100% }
										 
										 .l20		{ width:20% }
										 .lp5		{ width:20% }
										 .lp7		{ width:14.285% }
										 .lp8		{ width:12.5% }
										 .lp9		{ width:11.111% }
										 .lp10		{ width:10% }
										 
										 /*forms*/
										 .f-element{ padding-top:15px}
										 .f-label{ text-align:left; font-size:12px; padding-bottom:3px; color:#333}
										 .f-field{ font-size:1.6rem; height:3rem; width:100%}
										 textarea{font-family:Arial, Helvetica, sans-serif}
										 
										 /*modal*/
										 .f-curtain-content{
											pointer-events:auto;
											background-color:#FFF;
											padding:0px;
											position:absolute;
											top:0%;
											max-height:100%;
											left:0%;
											width:100%;
											overflow-y:auto; 
										}
										
										.f-curtain-content.width20,.f-curtain-content.width30,.f-curtain-content.width40,.f-curtain-content.width50{ left:0%; width:100%; }
										.f-curtain-content.width60,.f-curtain-content.width70,.f-curtain-content.width80,.f-curtain-content.width90{ left:0%; width:100%; }
										
										.f-curtain-content.half-content{
											
											left:10%;
											width:80%;
											top:10%;
											max-height:80%;
										   
										}
										 
}

/*ELEMENTS*/

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

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

/* Create a custom checkbox */
.chk_checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 14px;
  width: 14px;
  background-color: #aaa;
}

/* On mouse-over, add a grey background color */
.chk_container:hover input ~ .chk_checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.chk_container input:checked ~ .chk_checkmark {
  background-color: #2196F3;
}

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

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

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