/*========================start=menu=on=top========================*/
.headerDiv {
	background: #000000;
	display: flex;
	width: 100%;
	justify-content: center;
	}
.mainMenuDiv{
	margin: 0;
	}

/*======================submenu desctop behaviour====================*/
/*==============hide and show when mouseOnDiv (hover)================*/
.subMenuDiv {
	display: none;
	background: #000000;
	}
.mainMenuDiv:hover .subMenuDiv {
	position: absolute;
	display: block;
	z-index: 10;
	transition: filter 0.3s ease-in-out;
	animation-name: desctopSubmenu;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
	}

@keyframes desctopSubmenu {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 0.9;
        transform: translateX(0);
    }
}
/*==================end of submenu desctop behaviour==================*/


@media (min-width: 1261px) {
	.mainLinkOnTopMenu {
		width: 210px;
	}
	.mainLinkOnLogo{
		width: 210px;
	}
}
@media (min-width: 1081px)and (max-width: 1260px) {
	.mainLinkOnTopMenu {
		width: 180px;
	}
	.mainLinkOnLogo{
		width: 180px;
	}
}
@media (min-width: 961px)and (max-width: 1080px) {
	.mainLinkOnTopMenu {
		width: 160px;
	}
	.mainLinkOnLogo{
		width: 160px;
	}
}
@media (max-width: 960px)  and (min-width: 801px){
	.mainLinkOnTopMenu {
		width: 133px;
	}
	.mainLinkOnLogo{
		width: 133px;
	}
}
@media (max-width: 340px){
	.mainLinkOnTopMenu {
		width: 154px;
		display: none;
		}
	.mainLinkOnTopMenuMob {
		width: 44px;
		}
	.mainLinkOnLogo{
			width: 154px;
		}
	}
@media (max-width: 800px) and (min-width: 341px){
	.mainLinkOnTopMenu {
		width: 210px;
		display: none;
		}
	.mainLinkOnTopMenuMob {
		width: 60px;
		}
	.mainLinkOnLogo{
		width: 210px;
		}
}

@media (max-width: 800px){
	.mainMenuMobLeft{
		display: block;
		margin: 0 auto 0 0;
	}
	.mainMenuMobRight{
		display: block;
		margin: 0 0 0 auto;
	}
}
@media (min-width: 801px){
	.mainMenuMobLeft{
		display: none;
		margin: 0 auto 0 0;
	}
	.mainMenuMobRight{
		display: none;
		margin: 0 0 0 auto;
	}
}


/*=============menu mobile behaviour===============*/
/*=======Hide And Show when press Gamburger========*/

.subMenuMobLevel1{
	display: none;
	position: absolute;
	z-index: 10;
}
#gamburgerChange:checked ~ .subMenuMobLevel1{
    display: block;
	opacity: 0.9;
	transition: filter 0.3s ease-in-out;
	animation-name: mobileMenuOn;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

@keyframes mobileMenuOn {
    from {
        opacity: 0;
        transform: translateX(-200px);
    }
    to {
        opacity: 0.9;
        transform: translateX(0);
    }
}

/*
#gamburgerChange:unchecked ~ .subMenuMobLevel1{
    display: block;
	opacity: 0.9;
	transition: filter 0.3s ease-in-out;
	animation-name: mobileMenuOff;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

@keyframes mobileMenuOff {
    from {
        opacity: 0.9;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-200px);
    }
}
*/

.subMenuMobLevel1Pic{
	display: block;
}
/*==========end of menu mobile behaviour===========*/


@media (min-width: 251px){
	.subMenuMobLevel1Pic{
		width: 250px;
	}	
}
@media (max-width: 250px){
	.subMenuMobLevel1Pic{
		width: 100%;
	}	
}
.subMenuMobLevel2{
	display: block;
}


@media (min-width: 801px){
	.menyDiv{
	background: #ffffff;
	width: 300px;
	margin: 0 auto;
	display: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: bold;
	color: #000000;
	}
}
@media (max-width: 800px){
	.menyDiv{
	background: #ffffff;
	width: 300px;
	margin: 0 auto;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: bold;
	color: #000000;
	}
}
/*========================end=of=menu=on=top========================*/