.spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -50px; /* half width of the spinner gif */
    margin-top: -50px; /* half height of the spinner gif */
    text-align:center;
    z-index:1234;
    overflow: auto;
    width: 100px; /* width of the spinner gif */
    height: 102px; /*hight of the spinner gif +2px to fix IE8 issue */
}

.loading-container {
  position:fixed;
  background-color:#f9f9f9;
  z-index:9;
  top: 0;
  left: 0;
  height:100%;
  width:100%;
  cursor:wait;
}

.loading {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 0;
  left: 0;
  bottom:0;
  right:0;
  margin:auto;
  transform: rotate(45deg);  
}

.loading div {
  width: 16px;
  height: 16px;
  position: absolute;
}

.l1 div, .l2 div, .l3 div, .l4 div {
  width: 100%;
  height: 100%;
}

.l1 div{ background-color:#2ecc71;}
.l2 div{ background-color:#9b59b6;}
.l3 div{ background-color:#3498db;}
.l4 div{ background-color:#f1c30f;}

.l1 { transform: translate(0,0); }
.l2 { transform: translate(0,16px); }
.l3 { transform: translate(16px,0px); }
.l4 { transform: translate(16px,16px); }

@keyframes rot1 {
  0%{ transform: rotate(0deg); }
  40%{ transform: rotate(0deg); }
  50%{ transform: rotate(0deg); }
  60%{ transform: rotate(90deg); }
  100%{ transform: rotate(90deg); }
}

@keyframes rot2 {
  0%{ transform: rotate(0deg); }
  40%{ transform: rotate(0deg); }
  50%{ transform: rotate(0deg); }
  60%{ transform: rotate(-90deg); }
  100%{ transform: rotate(-90deg); }
}

@keyframes rot3 {
  0%{ transform: rotate(45deg); }
  35%{ transform: rotate(45deg); }
  65%{ transform: rotate(405deg); }
  100%{ transform: rotate(405deg); }
}

@keyframes l1-rise {
  0%{ transform: translate(0px,0px); }
  30%{ transform: translate(-4px, -4px); }
  70%{ transform: translate(-4px, -4px); }
  100%{ transform: translate(0px, 0px); }
}

@keyframes l2-rise {
  0%{ transform: translate(0,16px); }
  30%{ transform: translate(-4px, 20px); }
  70%{ transform: translate(-4px, 20px); }
  100%{ transform: translate(0,16px); }
}

@keyframes l3-rise {
  0%{ transform: translate(16px, 0px); }
  30%{ transform: translate(20px, -4px); }
  70%{ transform: translate(20px, -4px); }
  100%{ transform: translate(16px, 0px); }
}

@keyframes l4-rise {
  0%{ transform: translate(16px,16px); }
  30%{ transform: translate(20px, 20px); }
  70%{ transform: translate(20px, 20px); }
  100%{ transform: translate(16px,16px); }
}



.l1 { animation: l1-rise 3s ease 0s infinite; }
.l2 { animation: l2-rise 3s ease 0s infinite; }
.l3 { animation: l3-rise 3s ease 0s infinite; }
.l4 { animation: l4-rise 3s ease 0s infinite; }

.l1 div, .l4 div { animation: rot1 3s ease 0s infinite; }
.l2 div, .l3 div { animation: rot2 3s ease 0s infinite; }

@media screen and  (min-width: 1025px) {
    #menu2 {
        width:40%;
    }
}
@media screen and (max-width: 1024px) and (min-width: 780px) {
    #menu2 {
        width:60%;
    }
}
@media screen and (max-width: 779px)  {
    #menu2 {
        width:100%;
    }
}