@charset "UTF-8";
/* CSS Document */
/*

.sp-btn {
    display:none;
}
*/

.sp-btn {
    display: inline;
    width: 45px;
    height: 40px;
    margin:0;
    padding:0;
    background-color: transparent;
}

#sidebarMenu {
    display: inline;
	width:50%;
	height:100%;
	position: fixed;
	right: 0;
	top:70px;
	transform: translateX(100%);
	transition: transform 250ms ease-in-out;
    background-color:rgba(6, 93, 68, 0.9);
	font-size:100%;
    z-index:5000;
}


@media screen and (max-width: 640px) {

#sidebarMenu {
    display: inline;
	width:100%;
	height:100%;
	position: fixed;
	right: 0;
	top:55px;
	transform: translateX(100%);
	transition: transform 250ms ease-in-out;
    background-color:rgba(6, 93, 68, 0.9);
	font-size:100%;
    z-index:5000;
}

}

.sidebarMenuInner {
    display: inline;
    margin:0;
    padding: 0;
    border-top: none;
}

ul.mmenu-sp {
    display: inline;
    width: 100%;
    margin:0;
    padding:0;
    position:relative;
    overflow: hidden;
    list-style: none;
}

ul.mmenu-sp li.mmenu-sp-item {
    width: 100%;
    margin:0;
    padding:0;
	background-color: transparent;
    border-bottom: solid 1px #FFFFFF;
	
   transition: .2s ease-in-out;
-moz-transition: .2s ease-in-out;
-webkit-transition: .2s ease-in-out;
-o-transition: .2s ease-in-out;
}

ul.mmenu-sp li.mmenu-sp-item:hover {
	background-color: #023e2d;
}

ul.mmenu-sp li.mmenu-sp-item a {
    width: 95%;
    height: 100%;
    margin:0 auto;
    padding:20px 2.5%;
    color: #FFFFFF;
    font-size: 110%;
    font-weight: bold;
	line-height: 120%;
    display: flex;
	align-items: center;
    text-decoration: none;
}

/*input[type="checkbox"]:checked ~ #sidebarMenu { transform: translateX(0); }*/
#openSidebarMenu:checked ~ #sidebarMenu { 
	transform: translateX(30%); 
}

input[type=checkbox] {
    transition: all 0.3s;
    box-sizing: border-box;
    display: none;
}

.sidebarIconToggle {
    display: inline;
    transition: all 0.3s;
    box-sizing: border-box;
    cursor: pointer;
    position: absolute;
    z-index: 99;
    height: 40px;
    width: 45px;
    top: 5px;
    right: 0;
}

@media screen and (max-width: 640px) {

.sidebarIconToggle {
	 top: 0px;
}

}

.spinner {
    transition: all 0.3s;
    box-sizing: border-box;
    position: absolute;
    height: 5px;
/*    width: 30%;*/
    margin: 5px auto 0;
    background-color: #065C44;
}

.horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
/*    width: 30%;*/
    margin-top: 8px;
}

.diagonal.part-1 {
    position: relative;
    transition: all 0.3s;
    box-sizing: border-box;
}

.diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    margin-top: 8px;
}

input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    opacity: 0;
}

input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(135deg);
    margin-top: 20px;
}

input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(-135deg);
    margin-top: -17px;
}