/*##################################################################
#	Netbike Framework - general css 26.11.2020
##################################################################*/
/*############################## RESET #############################*/
html{font-family:sans-serif;}
*{text-decoration-skip-ink: none; margin:0; padding:0; box-sizing:border-box;}
body{background-attachment: fixed; margin:0; font-size:15px; }
pre, code, tt {font: 15px monospace; }
input, textarea, select, button, textarea{font-family: inherit; font-size:13px;}
h1,h2,h3,h4,h5,h6{font-weight:normal; line-height:1.35; padding-bottom:0; margin:0;}
p{margin:0; line-height:1.5; padding: 0;}
a{text-decoration-skip-ink: none;}
a:link, a:visited{color:inherit;}
a:hover{color:#f00; cursor:pointer;}
ul, li{list-style:none;}
img{border:none;}
/*############################## GENERAL ###########################*/
div.wrapper{
	clear:both;
}
#headbar, #header, #top_menu, #footer, #footbar, body > .container, div.wrapper > .container{
	width:1000px;
	margin: 0 auto;
}
.container{
	width:auto;
	margin: 10px 0;
}
.container:first-child{margin-top:0px;}
.container:last-child{margin-bottom:0px;}
.page-wrapper > .container:first-child{margin-top:0px;}
.page-wrapper > .container:last-child{margin-bottom:0px;}
.container.top, .container.bottom{width:100%;}
.container.page{
	overflow:hidden;
	padding: 10px 0;
    background-color: #fff;
    min-height: 600px;	
}
.page-wrapper{
	overflow:hidden;
	padding:10px;
}
/*############################## ELEMENTS ##########################*/
/***** image block *****/
div.image{
	width:100%;
	overflow:hidden;
}
div.image > a{
	display:block;
	width:inherit;
	height:inherit;
}
div.image img{
	display:block; 
	max-width:100%;
	max-height:100%;
	margin: 0 auto;
	user-select: none;
}
div.image.square, div.image.prop{
	position:relative;
	height:auto!important;
}
div.image.square img, div.image.prop img{
	position:absolute;
	top:0;
	bottom:0; 
	left:0;
	right:0;
	margin: auto;
}
div.image.square:before, div.image.prop:before{
	content: "";
	padding-top:100%;
	float:left;
}




div.circle div.image img{border-radius:50%;}
/***** buttons *****/
input[type='button'], input[type='submit'], a.button:link, a.button:visited{
	display:inline-block;
	border:none;
	text-decoration:none;
	height:40px;
	line-height:40px;
	padding:0 40px;
	user-select:none;
	font-size:16px;
	color:#fff;
	background-color:#4F737D;
	cursor:pointer;
}
input[type='button']:focus, input[type='submit']:focus, a.button:focus{
	outline:none;
	border:none;
}
input[type='button']:hover, input[type='submit']:hover, a.button:hover{
	background-color:#6c8b94;
	color:auto;
}
input[type='button']:active, input[type='submit']:active, a.button:active{
	position:relative; 
	top:1px; 
	left:1px; 
	border:none;
}
input[type='button']:disabled, input[type='submit']:disabled{
	background-color:#d8d8d8!important;
}

/** button-light **/
a.button.button-light:link, a.button.button-light:visited, a.button.button-light:focus{ 
	color:#4F737D;
	background-color:transparent;
	border:solid 1px #4F737D;
	line-height:38px;
}
a.button.button-light:hover{
	background-color:#4F737D;
	color:#fff;
}
/** button-inv **/
a.button.button-inv:link, a.button.button-inv:visited, a.button.button-inv:focus{ 
	color:#fff;
	background-color:transparent;
	border:solid 1px #fff;
}
a.button.button-inv:hover{
	background-color:#fff;
	color:#000;
	color:auto;
}

/***** tablestyle *****/
.tablestyle, #top_menu ul{
	width:100%;
	height:100%;
	display:table;
	box-sizing:border-box;
	margin-bottom:0;
}
.tablestyle > div.block, ul.tablestyle > li, #top_menu > ul > li {
	display:table-cell;
	height:100%;
	position:relative;
	box-sizing:border-box;
}
.tablestyle .block{vertical-align:top;}
.tablestyle .top{vertical-align:top;}
.tablestyle .bottom{vertical-align:bottom;}
.tablestyle .middle{vertical-align:middle;}
.tablestyle .pre{white-space:pre-wrap;}
/***** forms *****/
form label{
	display:block;
	margin-bottom:20px;
}
form label:last-child{margin-bottom:0;}
input, textarea{
	display:block;
	border:solid 1px #b7b7b7;
}
input:focus, textarea:focus{
	border:solid 1px #a86;
	outline:none;
}
textarea{
	width:100%;
	min-height:100px;
	resize:none;
	padding:10px;
}

input[type='text'], input[type='password'], input[type='email'], input[type='date'], input[type='number']{
	width:100%;
	padding:10px;
}
input[type='radio'], input[type='checkbox']{
	display:inline-block; padding-right:0.5em;
}
select{padding:10px; height:40px;}
.form-group{margin-bottom:20px;}
form .form-group label{
	margin-bottom:0;
	line-height:1.5;
}

/***** tables *****/
table{
	border-collapse:collapse;
}
table tr td, table tr th{
	border:solid 1px #999;
	padding:10px;
	vertical-align: top;
	}
table thead tr td, table thead tr th{
	background-color:#e0e0e0;
	vertical-align: middle;
}

/***** pagination *****/
.pagination{
	font-size:15px;
	line-height:1.15;
	padding: 0;
	color:#888;	
	font-weight:bold;
	padding-bottom:10px;
	text-align:center;
}
.pagination a, .pagination span{
	box-sizing:border-box;
	display:inline-block;
	min-width:35px;
	border-radius:4px;
	text-align:center;
	background:#eee;
	padding:9px; margin-bottom:10px;
}
.pagination .active{
	background:#bbb;
	color:#000;
}
.pagination i.fa{
	font-weight:bold;
}
.pagination a{
	text-decoration:none;
	color:#333;
}
.pagination a:hover{
	text-decoration:none;
	color:#000;
	background:#ddd;
}
.pagination a:hover.active{background:#bbb;}
/***** breadcrumbs *****/
.breadcrumbs{
	font-size:15px;
	line-height:1.15;
	padding: 10px 20px 10px;
	color:#555;
}
.breadcrumbs a:link, .breadcrumbs a:visited{text-decoration:none; color:inherit;}
.breadcrumbs a:hover{text-decoration:underline; color:red;}
/***** gallery *****/
.gallery{
	clear:both;
	overflow:hidden; 
}
.gallery a{
	display:block;
	position: absolute;
    top: 0;
    bottom: 0;
	border:solid 1px #fff;
}
.gallery a:hover{
	border:solid 1px #888888;
}
.gallery a:focus{
	outline:none;
}
.gallery a img{
	max-width:100%;
	height:auto;
	display:block;
}
.gallery div.image:before {padding-top:75%;}
/***** tabs *****/
.tabs, .tabs > ul {
	padding:0!important;
}
.tabs > ul li{
	min-width:100px;
	height:40px;
    text-align: left;
    vertical-align: middle;
    overflow: hidden;
}
.tabs > ul li a{
	display: block;
    text-decoration: none;
    padding: 13px 40px;
    margin: -13px 0;	
}
.tabs > ul li:last-child a{
    border-right: none;
}
.tabs > .tab{
	display:none;
	padding:10px;
	height:100px;
}
.tabs > .tab.active{
	display:block;
}
/***** auto complete *****/
.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: normal; color: #e21a1a; }
.autocomplete-group { padding: 2px 5px; }
.autocomplete-group strong { display: block; border-bottom: 1px solid #000; }
/*############################## HEADER ############################*/
#header{
	position:relative; padding:0 0 10px;
	}
#header .block{
	line-height:20px; padding:10px;
	}
#header .block.logo{
	width:160px;
	height:110px;	
	box-sizing:content-box;
}	
#header .block.logo a{
	display:block;
	height:inherit;
	background-image: url(/images/logo.png);
	background-repeat:no-repeat;
	background-size:auto 100px;
}	
.block.logo a:focus{outline:none;}
#headbar{
	padding: 0.5em 20px;
	font-size:13px;
}
/*############################## FOOTER ############################*/
#footer{
	position:relative;
	padding:10px 0 0;
	clear:both;
}

#footer .block {
    line-height: 20px;
    padding: 10px;
}
#footbar{
	font-size:12px; 
	text-align:center; 
	line-height:1.15; 
	padding: 4px 20px;
}
/*############################## MENU ##############################*/
/***** top_menu *****/
#top_menu{
	clear:both; overflow:hidden;
}
#top_menu > ul li{
	min-width:166px;
	height:40px;
    text-align: left;
    vertical-align: middle;
    overflow: hidden;
} 
#top_menu > ul li a{
	user-select:none;
	display: block;
    text-decoration: none;
    padding: 13px 20px;
    margin: -13px 0;
} 
#top_menu > ul li:last-child a{border-right:none;}
/***** left_menu *****/
#left_menu{
	float:left;
	width:220px;
	background:#fff;
}
#left_menu h3{
	padding: 0 10px;
	margin:0; 
	line-height:1.15;
}
#left_menu ul{
	padding:10px;
	
}
#left_menu ul li a{user-select:none;}

/***** bottom_menu *****/

/*############################## BLOCKS ############################*/
.container{clear:both; overflow:hidden;}
.container .content{overflow:hidden; position:relative;}
.block-wrapper{
	width:100%;
	padding:10px;
	float:left;
}
/* container - nopadding */
.nopadding{
	margin-left:-20px;
	margin-right:-20px;
}
.nopadding.block3, .nopadding.block6{margin-right:-21px;}
/***** square *****/
.square .content{height:auto!important;}
.square .content:before{
	content: "";
	padding-top:100%;
	float:left;
}	
/***** prop *****/
.prop .content{height:auto!important;}
.prop .content:before{
	content: "";
	padding-top:75%;
	float:left;
}	
/* container - prop */
div.prop-1x1 .content:before, div.image.prop-1x1:before{padding-top:100%;}
div.prop-4x3 .content:before, div.image.prop-4x3:before{padding-top:75%;}
div.prop-3x2 .content:before, div.image.prop-3x2:before{padding-top:66.66667%;}
div.prop-16x9 .content:before, div.image.prop-16x9:before{padding-top:56.25%;}
div.prop-2x1 .content:before, div.image.prop-2x1:before{padding-top:50%;}
div.prop-3x1 .content:before, div.image.prop-3x1:before{padding-top:33.33333%;}
div.prop-3x4 .content:before, div.image.prop-3x4:before{padding-top:133.333334%;}
div.prop-9x16 .content:before, div.image.prop-9x16:before{padding-top:177.77777%;}

/**** blocks 2-6 *****/
.block2 .block-wrapper{width:50%;}
.block3 .block-wrapper{width:33.33334%;}
.block4 .block-wrapper{width:25%;}
.block5 .block-wrapper{width:20%;}
.block6 .block-wrapper{width:16.66666%;}

/***** block2 half-width *****/
.block2.half-width{
	width:50%;
	float:left;
	clear:none;
}
.block2.half-width .block-wrapper{
	width:100%;
}
/***** block title *****/
/*
p.title{
	line-height:20px; 
	overflow:hidden;
}

p.title.name{ 
	margin: 0;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.5);
    padding: 10px 0;
    position: absolute;
    bottom: 0px;
    width: 100%;
} 
*/

p.title > a{display:block;}

/*############################## CONTENT ###########################*/
/***** article *****/
.content{
	padding:10px;
	overflow:hidden;
}
.content.text{
	line-height:1.5;
}
.content.text > p{
	padding:10px;
	line-height:1.5;
}
.content ul, .content ol{
	padding: 0.5em 10px 0.5em 30px;
} 
.content li{
	list-style:initial;
}
.content ol li{list-style:decimal;}
.content table{
	line-height:1.15; 
	width:100%!important;
	border:none!important;
	font-size:16px;
}
/***** category *****/
.page-wrapper > .content.categories ul{
	line-height:2; font-size:16px;
}
/***** blog *****/

/* details */
details{
	margin: 10px 0;
	border: solid 1px #e8e8e8;
}
details summary{
	font-size:30px;
	color:#404040;
	background-color:#e8e8e8;
	overflow:hidden;
	line-height:1.15;
	padding:15px 20px;
	user-select:none;
	font-weight:400;
}
details summary:hover{
	cursor:pointer;
}
details summary:focus{
	background-color:#eee;
	outline:none;
	
}
details summary h2{
	display:inline; 
	padding:0;
}
details .content p:first-child{padding-top:0;}
details .content p:last-child{padding-bottom:0;}
/*############################## MOBILE ###########################*/

/***** ALL MOBILE (<1024) *****/
@media screen and (max-width: 999px){
	.block-portable-only{display:block;}
	.block-pc-only{display:none;}
	.page-wrapper > .content > table{display:block; width:100%; overflow-x:auto;}
}
/***** SMARTPHONE (<480) *****/
@media screen and (max-width: 480px){
	.block-mobile-only{display:block;}
	.block-pc-tablet{display:none;}
	.tablestyle, .tablestyle .block{display:block; width:auto;}

}
/***** TABLET COMPUTER (480 - 1024) *****/
@media screen and (min-width: 480px) and (max-width: 999px){
	.block-tablet-only{display:block;}
}
/***** PRINT *****/
@media print{
	#header, #headbar, #footbar, #footer, #left_menu, #top_menu, .breadcrumbs, .pagination, .gallery{display:none;}
	.tabs{border:none;}
	.tabs > .tab{display:block; border:none; border-bottom:solid 2px #000;}
	.tabs > .tab:last-child{border:none;}
	.tabs > ul li a{color:#000; background-color:#fff;}	
	form{display:none;}
	.page-wrapper > p{display:none;}
}