@media screen and (min-width: 1001px) {
	.d-flex{background-color:transparent !important;width:110px;}
}
@media screen and (max-width: 1000px) {
	.d-flex{background-color:transparent !important;width:50px;}
}

#side-bar-container {
    position: fixed;
    background-color: #fff;
    z-index:1000;
}
#side-bar-container-reserve{position: fixed;z-index:1000;}
.d-flex-reserve{display: -ms-flexbox!important;display: flex!important;}


#side-bar-container.show {
    width: 100%;
    z-index:1000;
}
#side-bar-container-reserve.show {z-index:1000;}
/*===#side-bar-container-reserve.show {width: 100%;z-index:1000;}===*/

.side-bar {
    position:absolute;top:0px;left:0px;
}
.side-bar-reserve {position: relative;height:100vh;}

#side-nav.pointed {
    background-color: rgb(230, 230, 230);
}

#side-nav {width: 110px;height: 100vh;position:relative;}
.side-nav-reserve {width: 110px;height: 100vh;position:relative;}
.show #side-nav{background-color:#ffffff !important;}
@media screen and (min-width: 1001px) {
	#side-nav-reserve{width: 110px;height:auto;position:absolute;bottom:25px;left:0px;z-index:1100;}
	#side-nav-reserve p{width: 110px;height:auto;background:#e6e6e6;margin:0px auto;padding:10px 0px;cursor: pointer;}
}
@media screen and (max-width: 1000px) {
	#side-nav-reserve{width:50px;height:auto;position:absolute;bottom:25px;left:0px;}
	#side-nav-reserve p{width:50px;height:auto;background:#e6e6e6;margin:0px auto;padding:10px 0px;cursor: pointer;}
}
#side-nav-reserve p span{display:inline-block;width:100%;}

@media screen and (min-width: 1001px) {
	#overlay-reserve ul{width:95%;height:auto;margin:0px auto;padding-top:57px;}
	#overlay-reserve ul li:nth-of-type(1){width:65%;height:auto;margin:0px auto;padding:0px;display:inline-block;}
	#overlay-reserve ul li:nth-of-type(1) select{width:60%;height:36px;}
	#overlay-reserve ul li:nth-of-type(1) input[type="submit"]{width:35%;height:35px;margin:0px 0px 0px 6px;background:#bd788f;color:#ffffff;border:none;}
	#overlay-reserve ul li:nth-of-type(2){width:20%;height:auto;margin:0px 2%;padding-top:1px;display:inline-block;}
	#overlay-reserve ul li:nth-of-type(2) a{display:block;background:#7897bd;margin:0px auto;padding:8px;color:#ffffff;border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;}
}
@media screen and (max-width: 1000px) {
	#overlay-reserve ul{width:95%;height:auto;margin:0px auto;padding-top:37px;}
	#overlay-reserve ul li:nth-of-type(1){width:100%;height:auto;margin:0px auto;padding:0px;display:inline-block;}
	#overlay-reserve ul li:nth-of-type(1) select{width:60%;height:36px;}
	#overlay-reserve ul li:nth-of-type(1) input[type="submit"]{width:35%;height:35px;margin:0px 0px 0px 6px;background:#bd788f;color:#ffffff;border:none;}
	#overlay-reserve ul li:nth-of-type(2){width:97%;height:auto;margin:0px auto;padding-top:6px;display:inline-block;}
	#overlay-reserve ul li:nth-of-type(2) a{display:block;background:#7897bd;margin:0px auto;padding:8px;color:#ffffff;border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;}
}
.hide{display:none;}


#side-nav:hover {
    background-color: rgb(230, 230, 230, 0.8);
    cursor: pointer;
}

.side-bar #icon {
    margin: 36px;
    font-size: 60px;
    line-height: 60px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
}

#icon,
#icon span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
}

#icon {
    position: relative;
    width: 38px;
    height: 33px;
    cursor: pointer;
}

#icon span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #ffffff;
    border-radius: 1px;
    box-shadow: 0 0 5px rgb(0 0 0 / 30%);
}

#icon span.pointed {
    background-color: black;
}

#icon span:nth-of-type(1) {
    top: 0;
}

#icon span:nth-of-type(2) {
    top: 16px;
}

#icon span:nth-of-type(3) {
    bottom: 0;
}

#menu-line {
    -webkit-transition: -webkit-transform 400ms cubic-bezier(.165,.84,.44,1) 100ms;
    -moz-transition: -moz-transform 400ms cubic-bezier(.165,.84,.44,1) 100ms;
    -o-transition: -o-transform 400ms cubic-bezier(.165,.84,.44,1) 100ms;
    transition: transform 400ms cubic-bezier(.165,.84,.44,1) 100ms;
}

#menu-line.active {
    -webkit-transition: -webkit-transform 100ms linear;
    -moz-transition: -moz-transform 100ms linear;
    -o-transition: -o-transform 100ms linear;
    transition: transform 100ms linear;
    -webkit-transform: scale(0,1);
    -moz-transform: scale(0,1);
    -ms-transform: scale(0,1);
    -o-transform: scale(0,1);
    transform: scale(0,1);
}

#close {
    -webkit-transition: -webkit-transform 100ms linear;
    -moz-transition: -moz-transform 100ms linear;
    -o-transition: -o-transform 100ms linear;
    transition: transform 100ms linear;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    position: absolute;
    overflow: hidden;
    background: url(../img/close.svg) no-repeat center;
    background-size: contain;
    width: 38px;
    height: 33px;
    text-indent: -9999px;
    margin: 36px;
    top: 0;
    left: 0;
}

#close.active {
    -webkit-transition: -webkit-transform 400ms cubic-bezier(.165,.84,.44,1) 100ms;
    -moz-transition: -moz-transform 400ms cubic-bezier(.165,.84,.44,1) 100ms;
    -o-transition: -o-transform 400ms cubic-bezier(.165,.84,.44,1) 100ms;
    transition: transform 400ms cubic-bezier(.165,.84,.44,1) 100ms;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

#overlay {
    background: #ffffff;
    position: absolute;
    left: 110px;
    overflow: hidden;
    width: 0;
    height: 100vh;
    transition: .5s;
}
@media screen and (min-width: 1001px) {
	#overlay-reserve {
	    background: #e6e6e6;
	    position: absolute;
	    left: 110px;
	    bottom:25px;
	    overflow: hidden;
	    width: 0;
	    height: 100px;
	    transition: .5s;
	}
}
@media screen and (max-width: 1000px) {
	#overlay-reserve {
	    background: #e6e6e6;
	    position: absolute;
	    left: 50px;
	    bottom:25px;
	    overflow: hidden;
	    width: 0;
	    height: 100px;
	    transition: .5s;
	}
}


#overlay ul {
    margin: 17px 18px 64px 14px;
}

#overlay.show {
    width: 100%;
    height: 100vh;
}

#overlay-reserve.show {
    width: 100%;
    height: 153px;
}
@media screen and (min-width: 1001px) {
	#overlay-reserve.show {width: 500px;border-right:1px solid #333333;z-index:1100;}
}
@media screen and (max-width: 1000px) {
	#overlay-reserve.show {width: 263px;border-right:1px solid #333333;}
}

.link-item {
    list-style: none;
}

.link-item a,
.link-item a:hover {
    text-decoration: none;
    white-space: nowrap;
}


@media screen and (max-width: 992px) {
    .side-bar #icon,
    #close {
        margin: 18px;
        width: 20px;
        height: 21px;
    }

    #icon span:nth-of-type(2) {
        top: 9px;
    }

    #side-nav {
        width: 50px;
    }

    #overlay {
        left: 50px;
    }

}