@charset "utf-8";

*,
*::before,
*::after {   margin: 0;  padding: 0; }

body:before {  display: none;}

@media all and (max-width: 1024px) {
  body:before {
    content: 'tablet';
  }
}

@media all and (min-width: 640px) {
  body:before {    content: 'mobile';  }}

a { text-decoration:none;}

body {  color:#000;	}

.mnutxt {position:absolute;right:50px; font-family:'Helvetica Neue';font-size: 30px; font-weight:bold;  color:#fff;  }
.menu__toggler {   position: absolute;  top: 50px;  right: 30px;  height: 25px;  width: 35px;  outline: none;  cursor: pointer;  display: flex;
  align-items: center; z-index: 999;}
.menu__toggler span,
.menu__toggler span::before,
.menu__toggler span::after {   position: absolute;  content: "";  width: 28px;  height: 2.5px;  background: #ffffff;  border-radius: 20px;  transition: 500ms cubic-bezier(0.77, 0, 0.175, 1);}
.menu__toggler span::before {  top: -8px;}
.menu__toggler span::after {  top: 8px;}
.menu__toggler.active > span {  background: transparent;}
.menu__toggler.active > span::before, .menu__toggler.active > span::after {  background: #fff;  top: 0px;}
.menu__toggler.active > span::before {  transform: rotate(-225deg);}
.menu__toggler.active > span::after {  transform: rotate(225deg);}

/*
 * SLIDING MENU PANEL
 */
.menu {  position: absolute;  top:0px;  right: -130%;  z-index: 900;  color: #005c9c;  background: rgba(255, 0, 0, 1);  -webkit-clip-path: circle(35% at 100%  52% );  clip-path: circle(35% at 100% 52% );   width: 100%;  height: 100%;  padding: 20% 50px 50px 50px;  display: flex;  flex-direction: column;  justify-content: right;  transition: 800ms right cubic-bezier(0.50, 0, 0.14, 1); font-family:'Bebas Neue';}

.menu:hover{	animation-name: mymenu;	animation-duration: 3s;	animation-delay:100ms;    animation-fill-mode:backwards;} 

@keyframes mymenu {	
    from {     clip-path: circle(35% at 100% 52%);}
    to   {      clip-path: circle(100% at 52% 35%);} 
	} 
	
.menu {	display:none;	}	
.menu.active { display:flex; right: 0;}
.mnuitem { position:absolute; display:block; top:30%; text-align: right;  right:30px; font-size:56px; font-weight:bold;  width:20%; line-height:56px; font-family:'Bebas Neue';}
.mnuitem ul {list-style:none;}
.mnuitem ul {position:relative;display:block; text-align-last:right;line-height: normal;width:350px; }
.menu li a:hover {position: relative; display:block; color:#000;font-size:56px; line-height:56px;font-weight: bolder;}
.menu li:hover{list-style:disc;  direction: rtl; color:#fff; }
/*.menu a::after, a::before{  color:#fff;  font-size: 24px;	}*/
.logo img{position:absolute;display:block;left:100px;top:30px; padding-top:10px; z-index: 999;	}

 
@media screen and (min-width: 320px) {

#logo{width:50px;height:auto;left:10px;top:5px;}
.menu__toggler{width:20px;height:auto;right:10px;top:20px;font-size:10px;width:35px;}
.menu__toggler span,
.menu__toggler span::before,
.menu__toggler span::after { width: 20px;  height: 2.5px; border-radius: 20px; }
.menu__toggler span::before {  top: -6px;}
.menu__toggler span::after {  top: 6px;}
	
.mnutxt{font-size:16px;width:40px;top:-10px;right:60px;}
	
.menu {  height:300px;right: -130%; -webkit-clip-path: circle(48% at 100%  35% );  clip-path: circle(48% at 100% 35% );transition: 800ms right cubic-bezier(0.25, 0, 0.14, 1); }

.menu:hover{	animation-name: mymenu;	animation-duration: 3s;	animation-delay:100ms;    animation-fill-mode:backwards;} 

@keyframes mymenu {	
    from {     clip-path: circle(48% at 100% 35%);}
    to   {      clip-path: circle(100% at 48% 35%);} 
	} 
	
.menu {	display:none;	}	
.menu.active { display:flex; right: 0;}
.mnuitem {top:20%; text-align: right; right:70px; font-size:16px; font-weight:bold;  width:20%; line-height:18px; font-family:'Bebas Neue';}
.mnuitem ul {list-style:none;}
.mnuitem ul {position:relative;display:block; text-align-last:right;line-height: normal;width:100px; }
.menu li a:hover {font-size:16px; line-height:18px;font-weight: bolder;}


@media screen and (min-width: 360px) {


.menu { height:350px; right: -110%; -webkit-clip-path: circle(48% at 100%  35% );  clip-path: circle(48% at 100% 35% );transition: 800ms right cubic-bezier(0.25, 0, 0.14, 1); }
.mnuitem {top:20%; text-align: right; right:70px; font-size:20px; font-weight:bold;  width:18%; line-height:20px; font-family:'Bebas Neue';}
.menu li a:hover {font-size:20px; line-height:20px;font-weight: bolder;}
	
}
@media screen and (min-width: 375px){
	.menu {  right: -110%; -webkit-clip-path: circle(48% at 100%  35% );  clip-path: circle(48% at 100% 35% );transition: 800ms right cubic-bezier(0.25, 0, 0.14, 1); }
.mnuitem {top:20%; text-align: right; right:70px; font-size:20px; font-weight:bold;  width:18%; line-height:22px; font-family:'Bebas Neue';}
.menu li a:hover {font-size:20px; line-height:22px;font-weight: bolder;}

	}
	
@media screen and (min-width: 411px){
.menu {  right: -110%; -webkit-clip-path: circle(48% at 100%  35% );  clip-path: circle(48% at 100% 35% );transition: 800ms right cubic-bezier(0.25, 0, 0.14, 1); }
.mnuitem {top:20%; text-align: right; right:70px; font-size:20px; font-weight:bold;  width:15%; line-height:22px; font-family:'Bebas Neue';}
.menu li a:hover {font-size:20px; line-height:22px;font-weight: bolder;}
	}

@media screen and (min-width: 480px) {
	
#logo{width:70px; height:auto; left:10px;top:10px; }
.menu__toggler{width:35px;height:auto;right:10px;top:20px;font-size:10px;}
.mnutxt{font-size:20px;width:40px;top:-11px;right:70px;}
.menu {  right: -110%; -webkit-clip-path: circle(48% at 100%  35% );  clip-path: circle(48% at 100% 35% );transition: 800ms right cubic-bezier(0.25, 0, 0.14, 1); }
.mnuitem {top:20%; text-align: right; right:70px; font-size:22px; font-weight:bold;  width:15%; line-height:24px; font-family:'Bebas Neue';}
.menu li a:hover {font-size:22px; line-height:24px;font-weight: bolder;}

}

@media only screen and (min-width: 533px) {
	
.menu {  right: -110%; -webkit-clip-path: circle(45% at 100%  35% );  clip-path: circle(45% at 100% 35% );transition: 800ms right cubic-bezier(0.25, 0, 0.14, 1); }
.mnuitem {top:20%; text-align: right; right:70px; font-size:24px; font-weight:bold;  width:15%; line-height:24px; font-family:'Bebas Neue';}
.menu li a:hover {font-size:24px; line-height:24px;font-weight: bolder;}
}

@media screen and (min-width: 640px) {
.mnutxt{right:85px;}
#logo{width:80px; height:auto; left:15px;top:10px; }
.menu__toggler{width:40px;height:auto;right:10px;top:20px;font-size:10px;}
.menu {  right: -110%; -webkit-clip-path: circle(41% at 100% 45% );  clip-path: circle(41% at 100% 45% );transition: 800ms right cubic-bezier(0.77, 0, 0.14, 1); }
.mnuitem {top:30%; text-align: right; right:70px; font-size:24px; font-weight:bold;  width:12%; line-height:24px; font-family:'Bebas Neue';}
.menu li a:hover {font-size:24px; line-height:24px;font-weight: bolder;}
	
}

@media only screen and (min-width: 720px) {
.menu { height:450px;  right: -110%; -webkit-clip-path: circle(40% at 100%  35% );  clip-path: circle(40% at 100% 35% );transition: 800ms right cubic-bezier(0.25, 0, 0.14, 1); }
.mnuitem {top:30%; text-align: right; right:70px; font-size:24px; font-weight:bold;  width:10%; line-height:24px; font-family:'Bebas Neue';}
.menu li a:hover {font-size:24px; line-height:24px;font-weight: bolder;}
 	
}
@media screen and (min-width: 768px) {

.menu { height:450px;  right: -110%; -webkit-clip-path: circle(35% at 100%  35% );  clip-path: circle(35% at 100% 35% );transition: 800ms right cubic-bezier(0.25, 0, 0.14, 1); }
.mnuitem {top:20%; text-align: right; right:40px; font-size:24px; font-weight:bold;  width:15%; line-height:24px; font-family:'Bebas Neue';letter-spacing:1px;}
		.menu ul {width:120px;}
	.menu li a:hover {font-size:24px; line-height:24px;font-weight: bolder;letter-spacing:1px;}
} 


@media screen and (min-width: 800px) {
	.menu { height:550px;  right: -110%; -webkit-clip-path: circle(35% at 100%  35% );  clip-path: circle(35% at 100% 35% );transition: 800ms right cubic-bezier(0.25, 0, 0.14, 1); }
   .mnuitem {top:25%; text-align: right; right:65px; font-size:24px; font-weight:bold;  width:12%; line-height:24px; font-family:'Bebas Neue'; letter-spacing:1px; }
.menu ul {width:120px;}
.menu li a:hover {font-size:24px; line-height:24px;font-weight: bolder;letter-spacing:1px; }

}
@media screen and (min-width: 900px) and (max-width: 1024px) {
.mnutxt{right:85px;top:10px;}
#logo{width:100px; height:auto; left:25px;top:20px; }
.menu__toggler {width:40px;height:auto;right:10px;font-size:10px;}
.menu__toggler span{top:20px;}
.menu { height:650px;  right: -110%; -webkit-clip-path: circle(42% at 100%  35% );  clip-path: circle(42% at 100% 35% );transition: 800ms right cubic-bezier(0.25, 0, 0.14, 1); }
.mnuitem {top:27%; text-align: right; right:95px; font-size:36px; font-weight:bold;  width:15%; line-height:36px; font-family:'Bebas Neue';}
.menu ul {width:200px;}
.menu li{line-height: 40px; }	
.menu li a:hover {font-size:36px; line-height:40px;font-weight: bolder;}
}


@media  screen and (min-width: 1080px) {

 #logo{width:100px;height:auto;}
.menu__toggler { top: 10px;  right: 10px;  height: 35px;  width: 45px; }
.menu__toggler span,
.menu__toggler span::before,
.menu__toggler span::after {   position: absolute;  content: "";  width: 30px;  height: 2.5px;  background: #ffffff;  border-radius: 30px;  transition: 500ms cubic-bezier(0.77, 0, 0.175, 1);}
.menu__toggler span::before {  top: -8px;}
.menu__toggler span::after {  top: 8px;}

.menu { height:650px;  right: -110%; -webkit-clip-path: circle(42% at 100%  35% );  clip-path: circle(42% at 100% 35% );transition: 800ms right cubic-bezier(0.25, 0, 0.14, 1); }
.mnutxt {font-size:26px;right:60px;top:4px;font-weight: 100;width:85px;}
.mnuitem {top:27%; text-align: right; right:95px; font-size:36px; font-weight:bold;  width:15%; line-height:36px; font-family:'Bebas Neue';}
.menu ul {width:200px;}
.menu li{line-height: 40px; }	
.menu li a:hover {font-size:36px; line-height:40px;font-weight: bolder;}
}


@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1080px) ,
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1080px) ,
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1080px) ,
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1080px) ,
only screen and (                min-resolution: 192dpi) and (min-width: 1080px) ,
only screen and (                min-resolution: 2dppx)  and (min-width: 1080px)  { 
	 #logo{width:100px;height:auto;}
.menu__toggler { top: 10px;  right: 10px;  height: 35px;  width: 45px; }
.menu__toggler span,
.menu__toggler span::before,
.menu__toggler span::after {   position: absolute;  content: "";  width: 30px;  height: 2.5px;  background: #ffffff;  border-radius: 30px;  transition: 500ms cubic-bezier(0.77, 0, 0.175, 1);}
.menu__toggler span::before {  top: -8px;}
.menu__toggler span::after {  top: 8px;}

.menu { height:650px;  right: -110%; -webkit-clip-path: circle(42% at 100%  35% );  clip-path: circle(42% at 100% 35% );transition: 800ms right cubic-bezier(0.25, 0, 0.14, 1); }
.mnutxt {font-size:26px;right:60px;top:4px;font-weight: 100;width:85px;}
.mnuitem {top:27%; text-align: right; right:95px; font-size:36px; font-weight:bold;  width:15%; line-height:36px; font-family:'Bebas Neue';}
.menu ul {width:200px;}
.menu li{line-height: 40px; }	
.menu li a:hover {font-size:36px; line-height:40px;font-weight: bolder;}

	}
@media screen and  (min-width: 1200px) {
 #logo{width:100px;height:auto;}
.menu__toggler { top: 10px;  right: 10px;  height: 35px;  width: 45px; }
.menu__toggler span,
.menu__toggler span::before,
.menu__toggler span::after {   position: absolute;  content: "";  width: 30px;  height: 2.5px;  background: #ffffff;  border-radius: 30px;  transition: 500ms cubic-bezier(0.77, 0, 0.175, 1);}
.menu__toggler span::before {  top: -8px;}
.menu__toggler span::after {  top: 8px;}

.menu { height:760px; top:0px;  right: -110%; -webkit-clip-path: circle(40% at 100%  48% );  clip-path: circle(40% at 100% 48% );transition: 800ms right cubic-bezier(0.75, 0, 0.14, 1); }
.mnutxt {font-size:26px;right:60px;top:4px;font-weight: 100;width:85px;}
.mnuitem {top:30%; text-align: right; right:50px; font-size:36px; font-weight:bold;  width:15%; line-height:36px; font-family:'Bebas Neue';}
.menu ul {width:200px;}
.menu li{line-height: 40px; }	
.menu li a:hover {font-size:36px; line-height:40px;font-weight: bolder;}
	
	@keyframes mymenu {	
    from {     clip-path: circle(40% at 100% 48%);}
    to   {      clip-path: circle(100% at 48% 40%);} 
	} 
}

	
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1200px) ,
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1200px) ,
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1200px) ,
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1200px) ,
only screen and (                min-resolution: 192dpi) and (min-width: 1200px) ,
only screen and (                min-resolution: 2dppx)  and (min-width: 1200px)  { 
 #logo{width:100px;height:auto;}
.menu__toggler { top: 10px;  right: 10px;  height: 35px;  width: 45px; }
.menu__toggler span,
.menu__toggler span::before,
.menu__toggler span::after {   position: absolute;  content: "";  width: 30px;  height: 2.5px;  background: #ffffff;  border-radius: 30px;  transition: 500ms cubic-bezier(0.77, 0, 0.175, 1);}
.menu__toggler span::before {  top: -8px;}
.menu__toggler span::after {  top: 8px;}

.menu { height:760px; top:0px;  right: -110%; -webkit-clip-path: circle(40% at 100%  48% );  clip-path: circle(40% at 100% 48% );transition: 800ms right cubic-bezier(0.75, 0, 0.14, 1); }
.mnutxt {font-size:26px;right:60px;top:4px;font-weight: 100;width:85px;}
.mnuitem {top:30%; text-align: right; right:50px; font-size:36px; font-weight:bold;  width:15%; line-height:36px; font-family:'Bebas Neue';}
.menu ul {width:200px;}
.menu li{line-height: 40px; }	
.menu li a:hover {font-size:36px; line-height:40px;font-weight: bolder;}
	
	@keyframes mymenu {	
    from {     clip-path: circle(40% at 100% 48%);}
    to   {      clip-path: circle(100% at 48% 40%);} 
	} 
	}
@media screen and  (min-width: 1280px) {
 #logo{width:100px;height:auto;}
.menu__toggler { top: 10px;  right: 10px;  height: 35px;  width: 45px; }
.menu__toggler span,
.menu__toggler span::before,
.menu__toggler span::after {   position: absolute;  content: "";  width: 30px;  height: 2.5px;  background: #ffffff;  border-radius: 30px;  transition: 500ms cubic-bezier(0.77, 0, 0.175, 1);}
.menu__toggler span::before {  top: -8px;}
.menu__toggler span::after {  top: 8px;}

.menu { height:760px; top:0px;  right: -110%; -webkit-clip-path: circle(38% at 100%  50% );  clip-path: circle(38% at 100% 50% );transition: 800ms right cubic-bezier(0.25, 0, 0.14, 1); }
.mnutxt {font-size:26px;right:60px;top:4px;font-weight: 100;width:85px;}
.mnuitem {top:30%; text-align: right; right:50px; font-size:36px; font-weight:bold;  width:15%; line-height:36px; font-family:'Bebas Neue';}
.menu ul {width:200px;}
.menu li{line-height: 40px; }	
.menu li a:hover {font-size:36px; line-height:40px;font-weight: bolder;}
	
	@keyframes mymenu {	
    from {     clip-path: circle(38% at 100% 50%);}
    to   {      clip-path: circle(100% at 50% 38%);} 
	} 
}
	
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1280px) ,
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1280px) ,
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1280px) ,
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1280px) ,
only screen and (                min-resolution: 192dpi) and (min-width: 1280px) ,
only screen and (                min-resolution: 2dppx)  and (min-width: 1280px) { 
	
	#logo{width:100px;height:auto;}
.menu__toggler { top: 10px;  right: 10px;  height: 35px;  width: 45px; }
.menu__toggler span,
.menu__toggler span::before,
.menu__toggler span::after {   position: absolute;  content: "";  width: 30px;  height: 2.5px;  background: #ffffff;  border-radius: 30px;  transition: 500ms cubic-bezier(0.77, 0, 0.175, 1);}
.menu__toggler span::before {  top: -8px;}
.menu__toggler span::after {  top: 8px;}

.menu { height:760px; top:0px;  right: -110%; -webkit-clip-path: circle(38% at 100%  50% );  clip-path: circle(38% at 100% 50% );transition: 800ms right cubic-bezier(0.25, 0, 0.14, 1); }
.mnutxt {font-size:26px;right:60px;top:4px;font-weight: 100;width:85px;}
.mnuitem {top:30%; text-align: right; right:50px; font-size:36px; font-weight:bold;  width:15%; line-height:36px; font-family:'Bebas Neue';}
.menu ul {width:200px;}
.menu li{line-height: 40px; }	
.menu li a:hover {font-size:36px; line-height:40px;font-weight: bolder;}
	
	@keyframes mymenu {	
    from {     clip-path: circle(38% at 100% 50%);}
    to   {      clip-path: circle(100% at 50% 38%);} 
	} 
	}
	
	
@media screen and  (min-width: 1366px) {
 #logo{width:100px;height:auto;}
.menu__toggler { top: 10px;  right: 10px;  height: 35px;  width: 45px; }
.menu__toggler span,
.menu__toggler span::before,
.menu__toggler span::after {   position: absolute;  content: "";  width: 30px;  height: 2.5px;  background: #ffffff;  border-radius: 30px;  transition: 500ms cubic-bezier(0.77, 0, 0.175, 1);}
.menu__toggler span::before {  top: -8px;}
.menu__toggler span::after {  top: 8px;}

.menu { height:760px; top:0px;  right: -110%; -webkit-clip-path: circle(38% at 100%  50% );  clip-path: circle(38% at 100% 50% );transition: 800ms right cubic-bezier(0.25, 0, 0.14, 1); }
.mnutxt {font-size:26px;right:60px;top:4px;font-weight: 100;width:85px;}
.mnuitem {top:30%; text-align: right; right:50px; font-size:36px; font-weight:bold;  width:15%; line-height:36px; font-family:'Bebas Neue';}
.menu ul {width:200px;}
.menu li{line-height: 40px; }	
.menu li a:hover {font-size:36px; line-height:40px;font-weight: bolder;}
	
	@keyframes mymenu {	
    from {     clip-path: circle(38% at 100% 50%);}
    to   {      clip-path: circle(100% at 50% 38%);} 
	} 

}
	
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1366px) ,
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1366px) ,
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1366px) ,
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1366px) ,
only screen and (                min-resolution: 192dpi) and (min-width: 1366px) ,
only screen and (                min-resolution: 2dppx)  and (min-width: 1366px) { 

#logo{width:100px;height:auto;}
.menu__toggler { top: 10px;  right: 10px;  height: 35px;  width: 45px; }
.menu__toggler span,
.menu__toggler span::before,
.menu__toggler span::after {   position: absolute;  content: "";  width: 30px;  height: 2.5px;  background: #ffffff;  border-radius: 30px;  transition: 500ms cubic-bezier(0.77, 0, 0.175, 1);}
.menu__toggler span::before {  top: -8px;}
.menu__toggler span::after {  top: 8px;}

.menu { height:760px; top:0px;  right: -110%; -webkit-clip-path: circle(38% at 100%  50% );  clip-path: circle(38% at 100% 50% );transition: 800ms right cubic-bezier(0.25, 0, 0.14, 1); }
.mnutxt {font-size:26px;right:60px;top:4px;font-weight: 100;width:85px;}
.mnuitem {top:30%; text-align: right; right:50px; font-size:36px; font-weight:bold;  width:15%; line-height:36px; font-family:'Bebas Neue';}
.menu ul {width:200px;}
.menu li{line-height: 40px; }	
.menu li a:hover {font-size:36px; line-height:40px;font-weight: bolder;}
	
	@keyframes mymenu {	
    from {     clip-path: circle(38% at 100% 50%);}
    to   {      clip-path: circle(100% at 50% 38%);} 
	} 
}

@media screen and  (min-width: 1600px) {
 #logo{width:100px;height:auto;}
.menu__toggler { top: 10px;  right: 10px;  height: 35px;  width: 45px; }
.menu__toggler span,
.menu__toggler span::before,
.menu__toggler span::after {   position: absolute;  content: "";  width: 30px;  height: 2.5px;  background: #ffffff;  border-radius: 30px;  transition: 500ms cubic-bezier(0.77, 0, 0.175, 1);}
.menu__toggler span::before {  top: -8px;}
.menu__toggler span::after {  top: 8px;}

.menu { height:900px;  right: -110%; -webkit-clip-path: circle(38% at 100%  50% );  clip-path: circle(38% at 100% 50% );transition: 900ms right cubic-bezier(0.50, 0, 0.14, 1); }
.mnutxt {font-size:26px;right:60px;top:3px;font-weight: 100;width:85px;}
.mnuitem {top:30%; text-align: right; right:30px; font-size:36px; font-weight:bold;  width:13%; line-height:36px; font-family:'Bebas Neue';}
.menu ul {width:200px;}
.menu li{line-height: 40px; }	
.menu li a:hover {font-size:36px; line-height:40px;font-weight: bolder;}

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1600px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1600px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1600px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1600px),
only screen and (                min-resolution: 192dpi) and (min-width: 1600px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1600px){ 
	
	 #logo{width:100px;height:auto;}
.menu__toggler { top: 10px;  right: 10px;  height: 35px;  width: 45px; }
.menu__toggler span,
.menu__toggler span::before,
.menu__toggler span::after {   position: absolute;  content: "";  width: 30px;  height: 2.5px;  background: #ffffff;  border-radius: 30px;  transition: 500ms cubic-bezier(0.77, 0, 0.175, 1);}
.menu__toggler span::before {  top: -8px;}
.menu__toggler span::after {  top: 8px;}

.menu { height:650px;  right: -110%; -webkit-clip-path: circle(42% at 100%  60% );  clip-path: circle(42% at 100% 60% );transition: 800ms right cubic-bezier(0.25, 0, 0.14, 1); }
.mnutxt {font-size:26px;right:60px;top:4px;font-weight: 100;width:85px;}
.mnuitem {top:27%; text-align: right; right:95px; font-size:36px; font-weight:bold;  width:15%; line-height:36px; font-family:'Bebas Neue';}
.menu ul {width:200px;}
.menu li{line-height: 40px; }	
.menu li a:hover {font-size:36px; line-height:40px;font-weight: bolder;}

 }

@media  screen and (min-width: 1920px) {
	
#logo{width:10%;height:auto;left:50Px;top:50px;}
.mnutxt {position:absolute;right:70px; top:-5px; font-family:'Helvetica Neue';font-size: 30px; font-weight:bold;  color:#fff;  }
.menu__toggler {   position: absolute;  top: 50px;  right: 30px;  height: 25px;  width: 35px;  outline: none;  cursor: pointer;  display: flex;
  align-items: center; z-index: 999;}
.menu__toggler span,
.menu__toggler span::before,
.menu__toggler span::after {   position: absolute;  content: "";  width: 28px;  height: 2.5px;  background: #ffffff;  border-radius: 20px;  transition: 500ms cubic-bezier(0.77, 0, 0.175, 1);}
.menu__toggler span::before {  top: -8px;}
.menu__toggler span::after {  top: 8px;}
.menu__toggler.active > span {  background: transparent;}
.menu__toggler.active > span::before, .menu__toggler.active > span::after {  background: #fff;  top: 0px;}
.menu__toggler.active > span::before {  transform: rotate(-225deg);}
.menu__toggler.active > span::after {  transform: rotate(225deg);}

/*
 * SLIDING MENU PANEL
 */
.menu {  position: absolute;  top:0px;  right: -130%;  z-index: 900;  color: #005c9c;  background: rgba(255, 0, 0, 1);  -webkit-clip-path: circle(30% at 100%  45% );  clip-path: circle(30% at 100% 45% );   width: 100%;  height: 100%;  padding: 20% 50px 50px 50px;  display: flex;  flex-direction: column;  justify-content: right;  transition: 800ms right cubic-bezier(0.77, 0, 0.14, 1); font-family:'Bebas Neue';}

.menu:hover{	animation-name: mymenu;	animation-duration: 3s;	animation-delay:100ms;    animation-fill-mode:backwards;} 

@keyframes mymenu {	
    from {     clip-path: circle(30% at 100% 45%);}
    to   {      clip-path: circle(100% at 45% 30%);} 
	} 
	
.menu {	display:none;	}	
.menu.active { display:flex; right: 0;}
.mnuitem { position:absolute; display:block; top:30%; text-align: right;  right:30px; font-size:56px; font-weight:bold;  width:20%; max-height:400px; line-height:60px; font-family:'Bebas Neue';}
.mnuitem ul {list-style:none;}
.mnuitem ul {position:relative;display:block; text-align-last:right;line-height: normal;width:350px;height:400px; }
.mnuitem li{line-height: 60px;}
.menu li a:hover {position: relative; display:block; color:#000;font-size:56px; line-height:60px;font-weight: bolder;}
.menu li:hover{list-style:disc;  direction: rtl; color:#fff; }
/*.menu a::after, a::before{  color:#fff;  font-size: 24px;	}*/
.logo img{position:absolute;display:block;left:100px;top:30px; padding-top:10px; z-index: 999;	}

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1920px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1920px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1920px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1920px),
only screen and (                min-resolution: 192dpi) and (min-width: 1920px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1920px){ 
	
#logo{width:10%;height:auto;left:50Px;top:50px;}
.mnutxt {position:absolute;right:70px; top:-3px; font-family:'Helvetica Neue';font-size: 30px; font-weight:bold;  color:#fff;  }
.menu__toggler {   position: absolute;  top: 50px;  right: 30px;  height: 25px;  width: 35px;  outline: none;  cursor: pointer;  display: flex;
  align-items: center; z-index: 999;}
.menu__toggler span,
.menu__toggler span::before,
.menu__toggler span::after {   position: absolute;  content: "";  width: 28px;  height: 2.5px;  background: #ffffff;  border-radius: 20px;  transition: 500ms cubic-bezier(0.77, 0, 0.175, 1);}
.menu__toggler span::before {  top: -8px;}
.menu__toggler span::after {  top: 8px;}
.menu__toggler.active > span {  background: transparent;}
.menu__toggler.active > span::before, .menu__toggler.active > span::after {  background: #fff;  top: 0px;}
.menu__toggler.active > span::before {  transform: rotate(-225deg);}
.menu__toggler.active > span::after {  transform: rotate(225deg);}

/*
 * SLIDING MENU PANEL
 */
.menu {  position: absolute;  top:0px;  right: -130%;  z-index: 900;  color: #005c9c;  background: rgba(255, 0, 0, 1);  -webkit-clip-path: circle(38% at 100%  52% );  clip-path: circle(38% at 100% 52% );   width: 100%;  height: 100%;  padding: 20% 50px 50px 50px;  display: flex;  flex-direction: column;  justify-content: right;  transition: 800ms right cubic-bezier(0.77, 0, 0.14, 1); font-family:'Bebas Neue';}

.menu:hover{	animation-name: mymenu;	animation-duration: 3s;	animation-delay:100ms;    animation-fill-mode:backwards;} 

@keyframes mymenu {	
    from {     clip-path: circle(38% at 100% 52%);}
    to   {      clip-path: circle(100% at 52% 38%);} 
	} 
	
.menu {	display:none;	}	
.menu.active { display:flex; right: 0;}
.mnuitem { position:absolute; display:block; top:38%; text-align: right;  right:30px; font-size:56px; font-weight:bold;  width:20%; max-height:400px; line-height:60px; font-family:'Bebas Neue';}
.mnuitem ul {list-style:none;}
.mnuitem ul {position:relative;display:block; text-align-last:right;line-height: normal;width:350px;height:400px; }
.mnuitem li{line-height: 60px;}
.menu li a:hover {position: relative; display:block; color:#000;font-size:56px; line-height:60px;font-weight: bolder;}
.menu li:hover{list-style:disc;  direction: rtl; color:#fff; }
/*.menu a::after, a::before{  color:#fff;  font-size: 24px;	}*/
.logo img{position:absolute;display:block;left:100px;top:30px; padding-top:10px; z-index: 999;	}
}