.sidebar {
    
    background-image: url('icon/bkg_1.jpg');
    background-repeat:no-repeat;
    background-size:100% 100%;
    font-family: Arial;
    font-size: 25px;
    font-weight: normal;
    background-color: #334;
    padding: 10px 10px;
    position: relative;
    width: 100%;
    height:70px;
    z-index:2;
}

#mark_mnu:hover {
    cursor:pointer;
    opacity: 0.9;
    filter:contrast(50%) brightness(400%);
    }

.card {
    width: 150px;
    height: 45px;
    position: absolute;
    display: inline-block;
    margin: 0px;
    }
    
.card .img-top {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
}

.card:hover .img-top {
    cursor:pointer;
    display: inline;
}  

#openmnu {
	color:orange; 
	text-align:center; 
	position:absolute;
	right:0px;
	top:0px;
	float:right; 		
	display:block; 
	padding:16px 20px; 
	cursor:pointer; 
	max-width:70px;
}

#openmnu:hover {color:#ddd; text-shadow: 7px 1px 12px #feb;}

#menupr {
	transition: top 0.5s;
	z-index:1;
	position:absolute;
	top:-272px;
}

@media screen and (max-width: 768px) {
	#menupr {top:-272px;}
	#header_text {visibility:hidden;}
	.sidebar {background-image:none;}
}

@media screen and (min-width: 768px) {
	#menupr {top:-65px;}
	#header_text {visibility:visible;}
}