/*
 .sl_panel
*/
.sl_panel { position: fixed; }
.sl_panel .sl_switch { position: relative; display: block; cursor: pointer; }
.sl_panel .sl_wrap {
	position: fixed;
	display: table;
	z-index: 100;
}

/* .sl_switch_origin */
.sl_panel .sl_switch_origin {
	width: 40px;
	height: 23px;
	-webkit-transition: .2s; transition: .2s;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	position: relative;
}

.sl_panel:before {
	content:none;
	display:inline-block;
	font-size:16px;
	line-height:1.4em;
	position: absolute;
	left: -70px;
	top: 0px;
	font-weight: 100;
	color: #000000;
}

.sl_panel .sl_switch_origin:hover { opacity: 1; }
.sl_panel .sl_switch_origin:before, .sl_panel .sl_switch_origin:after { content: ''; }
.sl_panel .sl_switch_origin:before, .sl_panel .sl_switch_origin:after, .sl_panel .sl_switch_origin span { display: block; position: absolute; left: 50%; margin-left: -20px; width: 40px; height: 3px; background-color: #fff; -webkit-transition: -webkit-transform .3s, background-color .3s; transition: transform .3s, background-color .3s; }

.second .sl_panel .sl_switch_origin:before, .second .sl_panel .sl_switch_origin:after, .second .sl_panel .sl_switch_origin span { background-color: #000;}
.fixed .sl_panel .sl_switch_origin:before, .fixed .sl_panel .sl_switch_origin:after, .fixed .sl_panel .sl_switch_origin span { background-color: #000;}
.fixed .third .sl_panel .sl_switch_origin:before, .fixed .third .sl_panel .sl_switch_origin:after, .fixed .third .sl_panel .sl_switch_origin span { background-color: #fff;}

.sl_panel .sl_switch_origin:before { top: 0px; -webkit-transform-origin: center left; -ms-transform-origin: center left; transform-origin: center left; }
.sl_panel .sl_switch_origin:after {
	bottom: 0px;
	-webkit-transform-origin: center right;
	-ms-transform-origin: center right;
	transform-origin: center right;
}
.sl_panel .sl_switch_origin span {
	top: 11px;
	margin-top: -1px;
	-webkit-transform-origin: center center;
	-ms-transform-origin: center center;
	transform-origin: center center;
}
.sl_panel .sl_switch_origin.active:before, .sl_panel .sl_switch_origin.active:after, .sl_panel .sl_switch_origin.active span { background-color: #fff; }

.fixed .sl_panel .sl_switch_origin.active:before, .fixed .sl_panel .sl_switch_origin.active:after, .fixed .sl_panel .sl_switch_origin.active span { background-color: #fff;}

.sl_panel .sl_switch_origin.active:before { -webkit-transform: rotate(45deg) translate(0px, -8px); -ms-transform: rotate(45deg) translate(3px, -4px); transform: rotate(45deg) translate(0px, -8px);}
.sl_panel .sl_switch_origin.active:after { -webkit-transform: rotate(45deg) translate(0px, 6px); -ms-transform: rotate(45deg) translate(0px, 6px); transform: rotate(45deg) translate(0px, 6px); }
.sl_panel .sl_switch_origin.active span { -webkit-transform: rotate(135deg)translate(-1px, 0px); -ms-transform: rotate(135deg)translate(-1px, 0px); transform: rotate(135deg)translate(-1px, 0px); }

/* wrap */
.sl_panel .sl_wrap { background: rgba(19,84,164,0.95); }

/* wrap_right */
.sl_panel .sl_wrap_right { width: 100%; height: 100%; left: -100%; top: 0;
-webkit-transition:all .3s cubic-bezier(.19,1,.22,1);
	-moz-transition:all .3s cubic-bezier(.19,1,.22,1);
	transition:all .3s cubic-bezier(.19,1,.22,1);
}
.sl_panel .sl_switch.active + .sl_wrap_right { left: 0; }

#menu_r {
    position: absolute;
	top: 43px;
    left: 60px;
	 -webkit-transition: -webkit-transform .2s, background-color .2s; transition: transform .2s, background-color .2s;
}

@media screen and (max-width: 860px) {
@media all and (orientation: landscape) { 

.sl_panel .sl_switch_origin:before, .sl_panel .sl_switch_origin:after, .sl_panel .sl_switch_origin span { background-color: #000;}

}
}

@media screen and (max-width: 860px) {
	.sl_panel:before {
	    font-size:14px;
	    left: -60px;
	    top: 5px;
    }
	.sl_panel .sl_wrap_right { width: 100%!important; height: 115%; right: -100%; top: 0; -webkit-transition: right .3s; transition: right .3s; }
	.sl_panel .sl_switch_origin { width: 30px; height: 19px;top:4px;}
    .sl_panel .sl_switch_origin:before, .sl_panel .sl_switch_origin:after, .sl_panel .sl_switch_origin span {left: 50%; margin-left: -15px; width: 30px; height: 3px;}
    .sl_panel .sl_switch_origin:before { top: 0px;}
    .sl_panel .sl_switch_origin:after { bottom: 0px; }
    .sl_panel .sl_switch_origin span { top: 8px; margin-top: 0px;}
	
	.sl_panel .sl_switch_origin.active:before { -webkit-transform: rotate(45deg) translate(1px, -5px); -ms-transform: rotate(45deg) translate(1px, -5px); transform: rotate(45deg) translate(1px, -5px);}
    .sl_panel .sl_switch_origin.active span { -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg) ; }
	.sl_panel .sl_switch_origin.active:after { -webkit-transform: rotate(45deg) translate(-1px, 5px); -ms-transform: rotate(45deg) translate(-1px, 5px); transform: rotate(45deg) translate(-1px, 5px); }
	
	#menu_r {
        top: 17px;
        left: 20px;
    }
}