/* Bar defaults */
div.hamburger_wrapper{}
div.hamburger{position:relative;background:transparent;width:30px;}

span.burger_bar{position:absolute;height:3px;width:24px;top:0;background-color:#fff;opacity:1}
span.burger_bar:nth-child(2){top:10px;}
span.burger_bar:nth-child(3){top:20px;}

/* Rotations */
span.bar_rotate_clockwise{transform:rotate(-45deg);}
span.bar_rotate_counterclockwise{transform:rotate(45deg);}
span.bar_rotate_clockwise2{transform:rotate(-90deg);}
span.bar_rotate_counterclockwise2{transform:rotate(90deg);}
span.bar_rotate_clockwise3{transform:rotate(-135deg);}
span.bar_rotate_counterclockwise3{transform:rotate(135deg);}

/* Transform origins */
span.burger_bar.bar_to_tr{transform-origin:top right;width:26px;}
span.burger_bar.bar_to_tl{transform-origin:top left;width:26px;}
span.burger_bar.bar_to_br{transform-origin:bottom right;width:26px;}
span.burger_bar.bar_to_bl{transform-origin:bottom left;width:26px;}

/* Positioning */
span.burger_bar.bar_fade_out{opacity:0;}
span.burger_bar.bar_top{top:0;}
span.burger_bar.bar_center{top:10px;}
span.burger_bar.bar_bottom{top:20px;}

/* Transition sequences */
span.burger_bar.default_out{transition:.2s;}

span.burger_bar.centerrotate_out{transition:top .2s linear .3s, transform .2s, opacity .2s;}
span.burger_bar.centerrotate_in{transition:top .2s, transform .2s linear .3s, opacity .2s;}

span.burger_bar.centerrotate2_out{transition:top .2s linear .3s, transform .2s, opacity .2s;}
span.burger_bar.centerrotate2_in{transition:top .2s, transform .2s linear .3s, opacity .2s;}