/*+++ Reset +++*/
.drawer_button * {
 margin: 0;
 padding: 0;
 outline: none;
 border: none;
 font: inherit;
 font-family: inherit;
 font-size: 100%;
 font-style: inherit;
 font-weight: inherit;
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 text-align: left;
 text-decoration: none;
 list-style: none;
}

.drawer_button {
 display: block;
 padding: 0;
 width: 25px;
 height: 15px;
 position: relative;
 background: none;
 border: none;
 text-align: center;
 letter-spacing: 0.1em;
 cursor: pointer;
 outline: none;
 margin-top: 20px;
}

.drawer_button .drawer_bar {
 display: block;
 width: 25px;
 height: 2px;
 transition: all 0.2s;
 transform-origin: 0% 0%;
 transform: translateY(-50%);
 position: absolute;
 left: 0;
}

.drawer_button .drawer_bar1 {
 top: 0;
}

.drawer_button .drawer_bar2 {
 top: 50%;
}

.drawer_button .drawer_bar3 {
 top: 100%;
}

.drawer_button.active .drawer_bar {
 width: 21.21px;
 left: 5px
}

.drawer_button.active .drawer_bar1 {
 transform: rotate(0.7853981633974483rad) translateY(-50%);
 top: 0px
}

.drawer_button.active .drawer_bar2 {
 opacity: 0;
}

.drawer_button.active .drawer_bar3 {
 transform: rotate(-0.7853981633974483rad) translateY(-50%);
 top: calc(100% - 0px)
}

.drawer_button.active .drawer_menu_text {
 display: none;
}

.drawer_button.active .drawer_close {
 display: block;
}

.drawer_text {
 width: 100%;
 position: absolute;
 bottom: -20px;
 left: 0;
 text-align: center;
 font-size: 10px;
}

.drawer_close {
 letter-spacing: 0.08em;
 display: none;
}

.drawer_button {
 color: #000;
}

.drawer_button .drawer_bar {
 background-color: #000;

}


.drawer_menu .drawer_button {
 /*+++ Hamburger Button Position +++*/
 position: fixed;
 top: 0px;
 right: 20px;
 z-index: 30;
}

.drawer_menu {
 height: 80px;
 padding: 10px;
 position: relative;
}

.drawer_menu.ex {
 height: 55px;
 padding: 10px;
 position: relative;
}



.drawer_menu a {
 color: inherit;
 text-decoration: none;
}

.drawer_menu a:hover {
 cursor: pointer;
}

.drawer_menu .drawer_bg {
 width: 100%;
 height: 100%;
 position: fixed;
 z-index: 10;
 background-color: rgba(51, 51, 51, 0.5);
 display: none;
 top: 0;
 left: 0;
}

.drawer_menu .drawer_nav_wrapper {
 width: 350px;
 height: 100%;
 transition: all 0.4s;
 transform: translate(350px);
 position: fixed;
 top: 0;
 right: 0;
 z-index: 20;
 background-color: #fff;
}

.drawer_menu .drawer_nav_wrapper.open {
 transform: translate(0);
}

.drawer_menu.left .drawer_button {
 right: auto;
 left: 32px;
}

.drawer_menu.left .drawer_nav_wrapper {
 transform: translate(-312px);
 right: auto;
 left: 0;
}

.drawer_menu.left .drawer_nav_wrapper.open {
 transform: translate(0);
}

/*+++ Default Navigation CSS +++*/
.drawer_menu .drawer_nav {
 padding: 40px;
}

.drawer_menu .drawer_nav li {
 font-size: 16px;
 font-weight: 500;
 margin-top: 30px;
}

.drawer_menu .drawer_nav li:first-child {
 font-size: 16px;
 font-weight: 500;
 margin-bottom: 60px;
}


.drawer_nav a:hover {
 cursor: pointer;
}

.drawer_menu .copyright {
 font-size: 13px;
 color: #666;
}

.drawer_menu .sub {
 font-weight: 600;
 display: block;
 margin-top: 10px;
}


.logo.small {
 position: absolute;
 top: 10px;
 left: 10px;
}