body .night, .day{box-sizing: border-box;}
ab{white-space: nowrap;display: inline-block}
.wrapper{display: flex;}
body{direction:rtl;text-align:right;font-family: arial;padding:0;margin:0;}
.fa-bars:active, .active{background:#0077dd;color:#FFF !important;}
.night{padding-top:450px;width:50%;min-height: 100vh;background:url(night.jpg) no-repeat left top; background-size: 200%;float:right;position:relative}    
.night .menu-item{float:right;padding-right:100px;padding-left:0}
.night .menu-item .fa{font-size:50px;position: absolute;top:50%;transform: translateY(-50%);right:10px;}
.day{width:50%;padding-top:450px;min-height: 100vh;background:url(day.jpg) no-repeat left top;;float:right;background-size: 200% ;position:relative;}            

.sub-name{padding:5px 20px; background: rgba(0,0,0, 0.5); color:#FFF;font-size:30px;position: absolute;top:30px;left:50%;transform: translateX(-50%);display:inline-block}
.menu {position: absolute;left:50%;transform: translateX(-50%);top:200px;}
.menu-item{position: relative;float:left;width:127px;background:rgba(0,0,0, 0.5);color:#EEE;font-size:15px;clear:both;margin:3px; padding:10px;padding-left:100px;min-height:80px;display:flex;flex-direction: column;justify-content: center;cursor:pointer}
.menu-item span{font-weight:bold;font-size:16px;}
.menu-item span b{font-size:14px}
.menu-item .fa{font-size:50px;position: absolute;top:50%;transform: translateY(-50%);left:10px;}
.title{position:absolute;right:50%;top:50%;transform: translate(50%,-50%);color:#FFF;background: rgba(0,0,0, 0.5);padding:10px 40px;font-size:22px;;font-family: arial;z-index:2 ;text-align: center}
.title .lama{font-size:0.5em}
.title .last{font-size: 0.8em;}
.title .after{content:"\"";font-size:40px;line-height: 22px;position: relative;top:25px}
.title .befor{content:"\"";font-size:40px;;line-height: 22px}
.title h2{font-size:40px;padding:0;margin:0;text-align: center;padding-bottom:20px;}

.header{height:350px;width:100%;;display: inline-block;position: relative;}
.home-wrapper{width:100%;margin: auto;position: relative;max-width:100%;height:100%}
.fa-home, .fa-arrow-left{ 
    font-size: 50px;
    color: #FFF;
    right: 0;
    position: absolute;
    background: rgba(0,0,0, 0.5);
    padding: 10px;
    text-decoration: none;
    top: calc(100% - 77px);
    transform: rotate(180deg);
}
.header-title{position: absolute;background: rgba(0,0,0, 0.5);color:#EEE;font-size:45px;padding:10px;top: 46px;right: 10%;width: 425px;}
.header-title span{font-weight:bold;font-size:50px;display: block;}
.header-title span b{font-size:45px}
.main{width:1000px;max-width:100%;margin: auto}
.right-menu{border-left:4px solid rgb(143, 182, 38);width:33%;min-height: calc(100vh - 350px) ;float:right}
.right-menu ul {list-style-type: none;}
.right-menu ul li{font-size:20px;display: flex;align-items: center;}
.right-menu ul li a{color:#333;padding:10px;text-decoration: none;width:100%;}
.main-content{width:66%;float:right;padding:40px 20px;box-sizing: border-box;font-size:16px}
.line{margin:4px 0}
input, textarea{width:100%;height:30px}
textarea{height:400px}
.fa-bars{display:none}
.paint {margin:10px 0}
.paint .desc{padding:10px 0;font-size:13px}
.paint img {width:100%}
@media (min-width: 1400px) {
    .header{height:450px}
    .right-menu{min-height: calc(100vh - 450px)}
}
@media (max-width: 500px) {
    .sub-name{font-size: 18px;position:static;transform: translateX(0);margin:10px 3px;width:calc(100% - 6px);box-sizing: border-box;}
    .menu {position:static;transform: translateX(0);margin:0;width:100%;}
    input,textarea{width:90%;height:20px}
    textarea{height:200px;}
    .fa-arrow-left {font-size:25px;top:0px;}
    .fa-bars{display:none}
    .header{height:150px;}
    .right-menu{min-height: calc(100vh - 150px)}
    .main-content{width:100%}
    .header-title{font-size:16px;width:150px;right:auto;left:5%;top:50px}
    .header-title span{font-weight:bold;font-size:18px;display: block;}
    .header-title span b{font-size:16px}
    .right-menu{display: none;}
    .right-menu.show{display:inline-block;position:fixed;top:150px;width:99%;background: #FFF;z-index: 2;height:calc(100vh - 120px)}
    .right-menu ul li{padding: 5px 0;font-size:16px;display: flex;align-items: center;height:auto;}
    .title{font-size:16px;min-width: 250px;top:0;transform: translate(50%, 0)}
    .title h2{font-size:16px}
    .title .after{content:"\"";font-size:25px;line-height: 10px;position: relative;top:15px}
    .title .befor{content:"\"";font-size:25px;;line-height: 10px}
    .menu-item{padding-left:50px;min-height: 100px;box-sizing: border-box;width:calc(100% - 6px)}
    .menu-item .fa{font-size:30px !important;}
    .night{background-position: top left;}
    .day{background-position: top right;}
    .night, .day{background-size: 600%;padding-top:300px;} 
    .night .menu-item{float:right;padding-right:60px;}
    
}