/*============================================================================================*/
#header{
    position: fixed;
    opacity: 1;
    top: 0px;
    margin: auto;
    width: 100%;
    background-color: #fffffe;
    /* background-image: linear-gradient(#fff, #eee); */
    box-shadow: 0px 1px 5px #999;
    box-shadow: 0 5px 10px 0 rgba(100, 100, 100, 0.1);
    /* border-bottom: 1px solid #ccc; */
    z-index: 9;
	
	font-family:'Oswald Light';
	
}

	#header #header_menu #logo{
		margin:18px 5px 18px 5px;
		position:relative;
		display:block;
		color:#000;
		font-family:'Optien';
		transition:0.5s all;
	}
		#header #header_menu #logo #image{
			width:70px;
			height:70px;
			background-image:url('img/logo_100x100.png');
			background-repeat:no-repeat;
			background-position:center left;
			background-size:contain;
			transition:0.5s all;
		}
		#header #header_menu #logo #title{
			position:absolute;
			width:74px;
			height:57px;
			top:0px;
			left:0px;
			transition:0.5s all;
		}
			#header #header_menu #logo #title #title_linki{
				font-size:34px;
				font-weight:bold;
				position:absolute;
				top:13px;
				left:74px;
				transition:0.5s all;
			}
			#header #header_menu #logo #title #title_communication{
				font-size:11px;
				position:absolute;
				top:47px;
				left:57px;
				transition:0.5s all;
			}


/*============================================================================================*/
/*                                         RESPONSIVE                                         */
/*============================================================================================*/
#header_menu #responsive_menu{
	top:10px;
	right:0px;
	float:right;
	min-width: 180px;
    max-width: 280px;
    width:calc(100% - 140px);
	min-height:100px;
}
	#header_menu #responsive_menu > #header_menu #button{
		background-image:url('../img/ico/32px/responsive/responsive_menu_333.png'), linear-gradient(#eee, #fff, #eee);
		font-size:13px;
		font-size:0.813rem;
	}
	#header_menu #responsive_menu > #select{
		font-size:14px;
		font-size:0.875rem;
	}
		#header_menu #responsive_menu > #select .optgroup,
		#header_menu #responsive_menu > #select .option{
			font-size:13px;
			font-size:0.813rem;
		}
		body.body_red #header_menu #responsive_menu > #select .optgroup{
			background-image:linear-gradient(#f44, #d00);
		}body.body_yellow #header_menu #responsive_menu > #select .optgroup{
			background-image:linear-gradient(#ff0, #fa0);
		}body.body_green #header_menu #responsive_menu > #select .optgroup{
			background-image:linear-gradient(#af0, #6c0);
		}body.body_blue #header_menu #responsive_menu > #select .optgroup{
			background-image:linear-gradient(#08f, #036);
		}body.body_purple #header_menu #responsive_menu > #select .optgroup{
			background-image:linear-gradient(#a8f, #75f);
		}
/*============================================================================================*/
/*                                           MEDIUM                                           */
/*============================================================================================*/
#header_menu #medium{
	display:inline-block;
	float:right;
}
	#header_menu #medium > .category{
		float:left;
		height:100%;
		width:110px;
		text-align:center;
	}
		#header_menu #medium > .category .title{
			display:inline-block;
			width:100%;
			text-align:center;
			height:100%;
			color:#777;
			line-height:70px;
			
		}
	#header_menu #medium > .category:hover.red{
		background-image: linear-gradient(#f44, #d00);
	}#header_menu #medium > .category:hover.yellow{
		background-image:linear-gradient(#ff0, #fa0);
	}#header_menu #medium > .category:hover.green{
		background-image:linear-gradient(#af0, #6c0);
	}#header_menu #medium > .category:hover.blue{
		background-image:linear-gradient(#08f, #036);
	}#header_menu #medium > .category:hover.purple{
		background-image:linear-gradient(#a8f, #75f);
	}
		#header_menu #medium > .category:hover .title{
			color:#fff;
		}
/*============================================================================================*/
/*                                           LARGE                                            */
/*============================================================================================*/
#header_menu #large{
	display:inline-block;
	float:right;
}
	#header_menu #large > .category{
		float:left;
		height: 100%;
		margin-left:30px;
		width:120px;
		padding: 10px 0px 10px 0px;
	}
		#header_menu #large > .category .title{
			display:inline-block;
			font-size: 15px;
			color:#777;
		}
		#header_menu #large > .category .band{
			width:100%;
			height:5px;
			margin: 5px 0px 0px 0px;
			
			font-size: 15px;
		}
		#header_menu #large > .category.red .band{
			background-color:#f00;
		}#header_menu #large > .category.yellow .band{
			background-color:#fe0;
		}#header_menu #large > .category.green .band{
			background-color:#af0;
		}#header_menu #large > .category.blue .band{
			background-color:#08f;
		}#header_menu #large > .category.purple .band{
			background-color:#86f;
		}
		#header_menu #large > .category .posts{
			display:block;
			
			font-size: 13px;
			margin-top: 5px;
		}
			#header_menu #large > .category .posts .post{
				    display:inline-block;
					width:100%;
					text-align:left;
					height:100%;
					color:#777;
			}
			
		#header_menu #large > .category.red  a:hover{
			color:#f00;
		}#header_menu #large > .category.yellow  a:hover{
			color:#fe0;
		}#header_menu #large > .category.green  a:hover{
			color:#af0;
		}#header_menu #large > .category.blue  a:hover{
			color:#08f;
		}#header_menu #large > .category.purple  a:hover{
			color:#86f;
		}
/*============================================================================================*/
/*                                         responsive                                         */
/*============================================================================================*/
@media screen and (max-width:700px){
	#header #header_menu{
		min-width:100%;
		width:100%;
	}
		#header #header_menu #logo{
			margin:6px;
		}
			#header #header_menu #logo #image{
				width:50px;
				height:50px;
			}
				#header #header_menu #logo #title #title_linki{
					font-size:27px;
					top:6px;
					left:55px;
				}
				#header #header_menu #logo #title #title_communication{
					font-size:9px;
					top:33px;
					left:40px;
				}
		#header #header_menu #large{
			display:none;
		}#header #header_menu #medium{
			display:none;
		}#header #header_menu #responsive_menu{
			display:block;
		}
		
}@media screen and (min-width:700px){
	#header #header_menu{
		min-width:600px;
		width:100%;
	}
		#header #header_menu #logo{
			margin:5px;
		}
			#header #header_menu #logo #image{
				width:60px;
				height:60px;
			}
				#header #header_menu #logo #title #title_linki{
					font-size:32px;
					top:9px;
					left:65px;
				}
				#header #header_menu #logo #title #title_communication{
					font-size:10px;
					top:41px;
					left:50px;
				}
		#header #header_menu #large{
			display:none;
		}#header #header_menu #medium{
			display:block;
		}#header #header_menu #responsive_menu{
			display:none;
		}
}@media screen and (min-width:1024px){
	#header #header_menu{
		min-width:1000px;
		width:calc(100% - 600px);
	}
		#header #header_menu #logo{
			margin:18px 5px 18px 5px;
		}
			#header #header_menu #logo #image{
				width:70px;
				height:70px;
			}
				#header #header_menu #logo #title #title_linki{
					font-size:34px;
					top:13px;
					left:74px;
				}
				#header #header_menu #logo #title #title_communication{
					font-size:11px;
					top:47px;
					left:57px;
				}
		#header #header_menu #large{
			display:block;
		}#header #header_menu #medium{
			display:none;
		}#header #header_menu #responsive_menu{
			display:none;
		}
}