/* Responsives Main Menu Style */
@media screen and (min-width:100px) and (max-width:780px) {
.topmenu {
	width:50%;
	cursor: pointer !important;
	margin:0;
}
.topmenu nav {
	border: 4px red;
}
	
.topmenu li {
    width: 100%;
	padding-left:8px;
	margin:0;
	
}
.topmenu li a {
padding:5px 16px !important;
font-weight:400 !important;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
border:none !important;
margin:0px !important;
position:relative !important;
width:100% !important;
display:block !important;
font-size:1em !important;
height:auto !important;
line-height:34px !important;
margin-bottom:6px !important;
border-bottom:none !important;
background:#2F3137 !important;
color:#FFFFFF !important;
}
.topmenu li a:hover {
background:#222428 !important;
color:#FFFFFF !important;
}
.topmenu ul {
 display: none;
}
.topmenu nav::before,
.topmenu::after {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  display: block;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAwCAMAAAA8VkqRAAAABlBMVEUAAAAAAAClZ7nPAAAAAXRSTlMAQObYZgAAAE5JREFUeAFjwAkYcQC6SFAKBt4fo/6AaMMUQTUQIYJpFaqrMIICzkATR2Hi5uDUjmkh7tDAHUq4Qw8ujl+CsFEEHDVowg1n1OJKDLiTDwBLrgJ9vkuXOwAAAABJRU5ErkJggg==);
  cursor: pointer;
  height: 24px;
  width: 24px;
}
.topmenu nav::before,
.topmenu::after {
  background-color: #1F6BB2;
  border: 9px solid #1F6BB2;
}
.topmenu::after {
  background-position: -24px -24px;
  z-index: 1;

}
.topmenu nav::before {
  z-index: 3;
}
.topmenu nav:focus::before {
  z-index: 1;
}
.topmenu nav:focus ul,
.topmenu ul:hover {
  display: block;
}
}