body:not(.body_style_boxed) .side_button_wrapper{
display: none !important;
}
.side_button_wrapper{
z-index: 1000;
position: fixed;
top:0;
bottom:0;
}
.side_button_wrapper.opened{
z-index:1001;
}
.admin-bar .side_button_wrapper{
top: 32px;
}
.side_button_wrapper.left_side_button{
left:0;
}
.side_button_wrapper.right_side_button{
right:0;
}
.side_button_wrapper .caption_button{
font-size: 1.143rem;
font-weight: 700;
text-transform: uppercase;
position: fixed;
z-index: 1112;
right: 0;
top: 30%;
bottom: 30%;
min-height: 300px;
margin: 0;
width: 75px;
cursor: pointer;
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
flex-direction: row;
-webkit-flex-direction: row; -webkit-transition: opacity .7s ease;
-moz-transition: opacity .7s ease;
-ms-transition: opacity .7s ease;
-o-transition: opacity .7s ease;
transition: opacity .7s ease;
}
.side_button_wrapper.opened .caption_button{
opacity:0.3;
}
.side_button_wrapper.opened .caption_button:hover{
opacity:1;
}
.side_button_wrapper .caption_button .caption_button_item{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 50%;
-moz-transform-origin: 50%;
-o-transform-origin: 50%;
-ms-transform-origin: 50%;
transform-origin: 50%;
display: block;
white-space: nowrap;
letter-spacing: 0.2em;       }
.side_button_wrapper.left_side_button .caption_button .caption_button_item {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);          }
.side_button_wrapper .layouts_wrap {
position: absolute;
right: -53rem;
left: auto;
width: 52.4rem;
padding: 7rem 0;
top: 0;
bottom: 0;
margin: auto;
z-index: 1111;
box-sizing: border-box;
-webkit-transition: right .7s ease, left .7s ease;
-moz-transition: right .7s ease, left .7s ease;
-ms-transition: right .7s ease, left .7s ease;
-o-transition: right .7s ease, left .7s ease;
transition: right .7s ease, left .7s ease;
overflow: hidden;
}
.side_button_wrapper.opened .layouts_wrap {
right: 0;
}
.side_button_wrapper.left_side_button .layouts_wrap {
right: auto;
left: -53rem;
}
.side_button_wrapper .layouts_wrap .sc_layouts{
padding: 0 7rem;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
margin-right: -2rem;
}
.side_button_wrapper.right_side_button .layouts_wrap .sc_layouts{
padding-right: calc(75px + 3em);
}
.side_button_wrapper.left_side_button .layouts_wrap .sc_layouts{
padding-left: calc(75px + 3em);
}
.side_button_wrapper.left_side_button .caption_button {
right: auto;
left: 0;
}
.side_button_wrapper.left_side_button.opened .layouts_wrap {
left: 0;
}
.side_button_wrapper .mask {
position: fixed;
top: 0;
left: 0;
bottom: 0;
cursor: pointer;
z-index: 1001;
background-color: rgba(37, 37, 37, 0.56);
-webkit-transition: opacity .7s ease;
-moz-transition: opacity .7s ease;
-ms-transition: opacity .7s ease;
-o-transition: opacity .7s ease;
transition: opacity .7s ease;
opacity: 0;
}
.side_button_wrapper .mask.show {
display: block !important;
width: 100%;
opacity: 1;
}
@media (max-width: 1439px) {
.side_button_wrapper .caption_button{
width: 57px;
}
.side_button_wrapper .layouts_wrap{
padding:3rem 0;
}
}
@media (max-width: 1262px) {
.side_button_wrapper .caption_button{
width: 50px;
}
.side_button_wrapper .layouts_wrap {
right: -43rem;
left: auto;
width: 42.4rem;
}
.side_button_wrapper.opened .layouts_wrap {
right: 0;
}
.side_button_wrapper.left_side_button .layouts_wrap {
right: auto;
left: -43rem;
}
.side_button_wrapper.left_side_button.opened .layouts_wrap {
left: 0;
}
.side_button_wrapper .layouts_wrap{
padding:2rem 0;
}
}
@media (max-width: 1135px){
.side_button_wrapper{
display: none;
}
}
.side_button_wrapper .sc_item_title.sc_item_title_style_default{
padding-bottom: 0.7em;
margin-bottom: 0.7em;
}