#menu{background:none;color:#eee;height:40px;float:right;border:0px solid green;margin-right:50px;margin-top:20px;}
#menu ul,#menu li{margin:0;padding:0px;list-style:none}
#menu ul{height:40px}
#menu li{border:0px solid #1283BF;float:left;display:inline;position:relative;font:18px Arial;}
#menu li a{color:white;}
#menu li:hover{border:2px solid #18AFFF;border-radius:20px;}
#menu a{display:block;line-height:40px;padding:0 20px;text-decoration:none;color:white;font-family:tahoma;font-size:20px;}
#menu li:hover > a,#menu li a:hover{color:white;}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}

#menu ul.menus{height:auto;overflow:hidden;width:220px;background:#fff;position:absolute;z-index:99;display:none;border:1px solid #ccc;border-top:none;color:#333}
#menu ul.menus a{color:#333}
#menu ul.menus li{display:block;width:100%;font:14px Arial;text-transform:none;}
#menu li:hover ul.menus{display:block}
#menu a.prett,#menu a.trigger2{padding:0 27px 0 14px}
#menu li:hover > a.prett,#menu a.prett:hover{background:#fff;color:#333}
#menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}
#menu ul.menus a:hover{background:gold;}
#menu a.trigger2::after{content:"";width:0;height:0;border-width:5px 6px;border-style:solid;border-color:transparent transparent transparent #eee ;position:absolute;top:13px;right:9px}


@media screen and (max-width: 1000px){
  #menu{position:relative;float:left;border:none;margin-right:none;margin-top:0px;width:100%;}
  #menu ul{background:#1493D6;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}
  #menu ul.menus{width:100%;position:static;border:none}
  #menu li{display:block;float:none;width:auto;text-align:left}
  #menu li a{color:#fff}
  #menu li a:hover{color:#333}
  #menu li:hover{background:#18AFFF;color:#333;border-radius:0px;}
  #menu li:hover > a.prett,#menu a.prett:hover{background:gold;color:#333;}
  #menu ul.menus a{background:gold;}
  #menu ul.menus a:hover{background:#fff;}
  #menu input,#menu label{
    position:absolute;
	 font-size:40px;  
    top:15px;
    right:0;
    left:auto;
    display:block;
    width:60px;   /* match span width */
    height:42px;  /* match span height */
    border:0px solid green;
  } /* move label to right */
  #menu input{z-index:4}
  #menu input:checked + label{color:white}
  #menu input:checked ~ ul{display:block}

  /* span stays aligned inside the label */
  #menu label span{
    font-size:85px;
    position:absolute;
    top:70%;                 
    right:30px;              
    transform:translateY(-60%);
    display:inline-block;
    width:130px;             
    height:120px;            
    line-height:100px;       
    box-sizing:border-box;
    padding:0 12px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    text-align:right;
  }

}
@media screen and (max-width: 768px){
  #menu{position:relative;float:left;border:none;margin-right:none;margin-top:0px;width:100%;}
  #menu ul{background:#1493D6;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}
  #menu ul.menus{width:100%;position:static;border:none}
  #menu li{display:block;float:none;width:auto;text-align:left}
  #menu li a{color:#fff}
  #menu li a:hover{color:#333}
  #menu li:hover{background:#18AFFF;color:#333;border-radius:0px;}
  #menu li:hover > a.prett,#menu a.prett:hover{background:gold;color:#333;}
  #menu ul.menus a{background:gold;}
  #menu ul.menus a:hover{background:#fff;}
  #menu input,#menu label{
    position:absolute;
	 font-size:40px;  
    top:9px;
    right:0;
    left:auto;
    display:block;
    width:45px;   /* match span width */
    height:42px;  /* match span height */
    border:0px solid green;
  } /* move label to right */
  #menu input{z-index:4}
  #menu input:checked + label{color:white}
  #menu input:checked ~ ul{display:block}

  /* span stays aligned inside the label */
  #menu label span{
    font-size:85px;
    position:absolute;
    top:70%;                 
    right:30px;              
    transform:translateY(-60%);
    display:inline-block;
    width:130px;             
    height:120px;            
    line-height:100px;       
    box-sizing:border-box;
    padding:0 12px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    text-align:right;
  }

}