#loader-wrapper {
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        z-index:1000;
      }
      #loader {
        display:block;
        position: relative;
        top:50%;
        left:50%;
        width:180px;
        height:180px;
        margin:-75px 0 0 -75px;
        border: 6px solid transparent;
        border-top-color:rgb(231, 231, 231);
        border-radius:100%;
        -webkit-animation: spin 2s linear infinite, colorSpin3 6s linear infinite;
                animation: spin 2s linear infinite, colorSpin3 6s linear infinite;
        z-index:1001;
      }
      #loader:before {
        content:"";
        position: absolute;
        top:8px;
        left:8px;
        right:8px;
        bottom:8px;
        border:6px solid transparent;
        border-top-color: #cecece;
        border-radius:100%;
        -webkit-animation: spin 3s linear infinite, colorSpin2 6s linear infinite;
                animation: spin 3s linear infinite, colorSpin2 6s linear infinite;
      }
      #loader:after {
        content:"";
        position: absolute;
        top:22px;
        left:22px;
        right:22px;
        bottom:22px;
        border:6px solid transparent;
        border-top-color: #9b9b9b;
        border-radius:100%;
        -webkit-animation: spin 1.5s linear infinite, colorSpin 6s linear infinite;
                animation: spin 1.5s linear infinite, colorSpin 6s linear infinite;
      }
    
      
      @-webkit-keyframes spin {
        0%   { 
          -webkit-transform: rotate(0deg); 
            -ms-transform: rotate(0deg); 
                transform: rotate(0deg);
        }
        100% { 
          -webkit-transform: rotate(360deg); 
            -ms-transform: rotate(360deg); 
                transform: rotate(360deg);
        }
      }
      @keyframes spin {
        0%   { 
          -webkit-transform: rotate(0deg); 
            -ms-transform: rotate(0deg); 
                transform: rotate(0deg);
        }
        100% { 
          -webkit-transform: rotate(360deg); 
            -ms-transform: rotate(360deg); 
                transform: rotate(360deg);
        }
      }
    
    
      
    
      /*
      @-webkit-keyframes colorSpin {
        0%   { 
                border-top-color: #EB2128;
        }
        33% { 
                border-top-color: #009527;
        }
        66% { 
                border-top-color: #0082FF;
        }
        100%   { 
                border-top-color: #EB2128;
        }
      }
    
      @keyframes colorSpin {
        0%   { 
                border-top-color: #EB2128;
        }
        33% { 
                border-top-color: #009527;
        }
        66% { 
                border-top-color: #0082FF;
        }
        100%   { 
                border-top-color: #EB2128;
        }
      }
      
      @-webkit-keyframes colorSpin2 {
        0%   { 
                border-top-color: rgba(235,33,40, 0.4);
        }
        33% { 
                border-top-color: rgba(0,149,39, 0.4);
        }
        66% { 
                border-top-color: rgba(0,130,255, 0.4);
        }
        100%   { 
                border-top-color: rgba(235,33,40, 0.4);
        }
      }
      @keyframes colorSpin2 {
        0%   { 
                border-top-color: rgba(235,33,40, 0.4);
        }
        33% { 
                border-top-color: rgba(0,149,39, 0.4);
        }
        66% { 
                border-top-color: rgba(0,130,255, 0.4);
        }
        100%   { 
                border-top-color: rgba(235,33,40, 0.4);
        }
      }
      @-webkit-keyframes colorSpin3 {
        0%   { 
                border-top-color: rgba(235,33,40, 0.1);
        }
        33% { 
                border-top-color: rgba(0,149,39, 0.1);
        }
        66% { 
                border-top-color: rgba(0,130,255, 0.1);
        }
        100%   { 
                border-top-color: rgba(235,33,40, 0.1);
        }
      }
      @keyframes colorSpin3 {
        0%   { 
                border-top-color: rgba(235,33,40, 0.1);
        }
        33% { 
                border-top-color: rgba(0,149,39, 0.1);
        }
        66% { 
                border-top-color: rgba(0,130,255, 0.1);
        }
        100%   { 
                border-top-color: rgba(235,33,40, 0.1);
        }
      }*/
      
      #loader-wrapper .loader-section {
        position:fixed;
        top:0;
        background:#F3F6F8;
        width:51%;
        height:100%;
        z-index:1000;
      }
      
      #loader-wrapper .loader-section.section-left {
        left:0
      }
      #loader-wrapper .loader-section.section-right {
        right:0;
      }
      
      /* Loaded Styles */
      .loaded #loader-wrapper .loader-section.section-left {
        transform: translateX(-100%);
        /* transition: all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1.000); */
      }
      .loaded #loader-wrapper .loader-section.section-right {
        transform: translateX(100%);
        /* transition: all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1.000); */
      }
      .loaded #loader {
        opacity: 0;
        /* transition: all 0.3s ease-out; */
      }
      .loaded #loader-wrapper {
        visibility: hidden;
        transform:translateY(-100%);
        /* transition: all 0.3s 1s ease-out; */
      }