body {
   .loader {
     
      .dots {
         display:flex;
         position: relative;
         top:13px;
         left:-10px;
         
         width:100px;
         
         animation: dots 4s ease infinite 1s;
         div {
            position: relative;
            
            width:10px;
            height:10px;
            margin-right:10px;
            border-radius:100%;
            
            background-color:black;
            &:nth-child(1) {
               width:0px;
               height:0px;
               margin:5px;
               margin-right:15px;
               animation: show-dot 4s ease-out infinite 1s;
            }
            &:nth-child(4) {
               background-color:transparent;
               
               animation: dot-fall-left 4s linear infinite 1s;
               
               &:before {
                  position: absolute;
            
                  width:10px;
                  height:10px;
                  margin-right:10px;
                  border-radius:100%;

                  background-color:black;
                  
                  content: '';
               
                  animation: dot-fall-top 4s cubic-bezier(0.46, 0.02, 0.94, 0.54) infinite 1s;
               }
            }
         }
      }
   }
}

@keyframes dots {
   0% {
      left:-10px;
   }
   20%,100% {
      left:10px;
   }
}

@keyframes show-dot {
   0%,20% {
      width:0px;
      height:0px;
      margin:5px;
      margin-right:15px;
   }
   30%,100% {
      width:10px;
      height:10px;
      margin:0px;
      margin-right:10px;
   }
}

@keyframes dot-fall-left {
   0%, 5% {
      left:0px;
   }
   100% {
      left:200px;
   }
}

@keyframes dot-fall-top {
   0%, 5% {
      top:0px;
   }
   30%,100% {
      top:50vh;
   }
}

.loaded_hiding {
  transition: 0.7s opacity;
  opacity: 0;
}

.loaded {
  display: none !important;
}

// Color Variables
@green: #2ecc71;
@lightgray: lightgray;
@background: whitesmoke;

.inactiveMixin {
  content: "";
  position: absolute;
  display: block;
}

.beforeAnimation {
  transition: .2s cubic-bezier(.24, 0, .5, 1);
}

.afterAnimation {
  transition: .35s cubic-bezier(.54, 1.60, .5, 1);
  box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 0px 0 hsla(0, 0%, 0%, .04), 0 4px 9px hsla(0, 0%, 0%, .13), 0 3px 3px hsla(0, 0%, 0%, .05);
}

// Mobile Toggle Switch
.toggleWrapper {
  input {
    &.mobileToggle {
      opacity: 0; // hides checkbox
      position: absolute;
      & + label {
            position: relative;
			display: inline-block;
			user-select: none;
			transition: 0.4s ease;
			height: 17px;
			width: 33px;
			border: 2px solid #e4e4e4;
			border-radius: 60px;
        &:before {
          .inactiveMixin;
          .beforeAnimation;
          height: 17px;
		  width: 33px;
          top: 0;
          left: 0;
          border-radius: 30px;
        }
        &:after {
          .inactiveMixin;
          .afterAnimation;
          background: @background;
          height: 15px;
	      width: 15px;
          top: 1px;
          left: 0px;
          border-radius: 60px;
        }
      }
      // When Active
      &:checked {
        & + label:before {
          background: #89dfd2;
          transition: width .2s cubic-bezier(0, 0, 0, .1);
        }
        & + label:after {
          left: 17px;
        }
      }
    }
  }
}

/* radio */
fieldset {
	width: 100%;
    height: 100%;
    text-align: center;
    border-width: 0px;
}

input[class="radios"] {
	display: none;
	+label {
		position: relative;
		cursor: pointer;
		user-select: none;
		left: -15px;
		margin-right: 28px;
		margin-left: 15px;
		&::before {
			transition: all 250ms cubic-bezier(0.4, 0.25, 0.3, 1);
			content: "";
			width: 10px;
			height: 10px;
			border-radius: 50%;
			background-color: #dedede;
			border: 1px solid #6b6b63;
			font-size: 0;
			position: absolute;
			bottom: 50%;
			margin: 0 -14px;
			transform: translate(-50%, 50%);
		}
		
		&::after {
			transition: all 300ms cubic-bezier(0.4, 0.25, 0.3, 1);
			content: "";
			width: 12px;
			height: 12px;
			border-radius: 50%;
			background-color: #89dfd200;
			position: absolute;
			bottom: 50%;
			left: -14px;
			transform: translate(-50%, 50%);
		}
	}
	&:checked + label{
		&::before {
			background-color: transparent;
			width: 20px;
			height: 20px;
			border: 2px solid #89dfd2;
			margin: 0px -14px;
		}
		
		&::after {
			background-color: #89dfd2;
		}
	}
}

#loader_new{
	position:fixed;
	margin: auto;
	left:0;
	right:0;
	top:50%;
	width : 90px;
  
  ul {
    margin : 0;
    list-style:none;
    width:90px;
    position : relative;
    padding : 0;
    height:10px;
    
    li {
      position : absolute;
      width:2px;
      height : 0;
      background-color: #000;
      bottom : 0;
    }
  }
}
  

@keyframes sequence1 {
	0%{ height: 10px; }
	50%{ height:50px; }
	100%{ height: 10px; }
}

@keyframes sequence2 {
	0%{ height: 20px; }
	50%{ height: 65px; }
	100%{ height: 20px; }
}

#loader_new li:nth-child(1){
  left : 0;
  animation: sequence1 1s ease infinite 0;
}
#loader_new li:nth-child(2){
  left : 15px;
  animation: sequence2 1s ease infinite 0.1s;
}
#loader_new li:nth-child(3){
  left : 30px;
  animation: sequence1 1s ease-in-out infinite 0.2s;
}
#loader_new li:nth-child(4){
  left : 45px;
  animation: sequence2 1s ease-in infinite 0.3s;
}

#loader_new li:nth-child(5){
  left : 60px;
  animation: sequence1 1s ease-in-out infinite 0.4s;
}
#loader_new li:nth-child(6){
  left : 75px;
  animation: sequence2 1s ease infinite 0.5s;
}