﻿#body { top:25px; } 

@media only screen and (max-width: 980px) {
    
    #header { width:250px; top:50px; left: -250px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out; }
    
    #body { width:auto; /*left:250px;*/ left:0;
            -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out; top:50px;  }
    
    #optionBar 
    {
    height: 50px;
    line-height: 50px;
    position: fixed;
    right: 0;
    left: 0;
    z-index: 10;
        }
    
    #menu-button {
    width: 30px;
    position: absolute;
    top:12px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
    margin-left:25px;
    }

    #menu-button span {
      display: block;
      position: absolute;
      height: 6px;
      width: 100%;
      background: #FFF;
      border-radius: 6px;
      opacity: 1;
      left: 0;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: .25s ease-in-out;
      -moz-transition: .25s ease-in-out;
      -o-transition: .25s ease-in-out;
      transition: .25s ease-in-out;
    }

    #menu-button span:nth-child(1) {
      top: 0px;
    }

    #menu-button span:nth-child(2),#menu-button span:nth-child(3) {
      top: 10px;
    }

    #menu-button span:nth-child(4) {
      top: 20px;
    }

    #menu-button.open span:nth-child(1) {
      top: 10px;
      width: 0%;
      left: 50%;
    }

    #menu-button.open span:nth-child(2) {
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
    }

    #menu-button.open span:nth-child(3) {
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }

    #menu-button.open span:nth-child(4) {
      top: 9px;
      width: 0%;
      left: 50%;
    }
}