/*@media @wide-screen-up -end*/ /*@media @desktop-up -end*/ /*@media @tablet-up -end*/ /*@media @phone-up -end*/ /*@media @small-phone-up -end*/ /*@media @wide-screen-down -end*/ /*@media @desktop-down -end*/ /*@media @tablet-down -end*/ /*@media @phone-down -end*/ /*@media @small-phone-down -end*/ @media (max-width: 767px) { .column-left-opened { overflow: hidden; position: relative; } .column-left-opened .shadow_bg { display: block; position: fixed; width: 100%; height: 100%; background: rgba(0,0,0,0.5); top: 0px; right: 0px; z-index: 1007; } #content #open_button { position: absolute; font-family: FontAwesome; top: 280px; width: 15px; height: 50px; background: #333E48; border: 1px solid #333E48; border-radius: 0px 5px 5px 0px; } #content #open_button:before { position: absolute; width: 15px; height: 50px; line-height: 50px; font-size: 20px; top: 0px; left: 0px; display: block; color: #fff; } #content #open_button.open_left { right: -15px; } #content #open_button.open_left:before { content: "\f0da"; } #content #column-left { position: fixed; background: #fff; border: 0px solid #333E48; border-radius: 0px; z-index: 1008; top: 0px; left: 0px; max-width: 300px; width: 300px; height: 100%; opacity: 1; margin-left: -300px; padding-top: 15px; padding-bottom: 15px; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } #content #column-left.column-left_Active { margin-left: 0px !important; overflow-x: hidden; overflow-y: auto; box-shadow: 0px 0px 12px 2px rgba(0,0,0,0.5); opacity: 1; } }