/************
## Toggler ##
************/


.middletoggle {
 opacity: 0; /* Hides checkbox*/
}


.middletoggle:focus ~ .middletogglelabel {
  border-color: #1fc08e;
  color: #1fc08e;
}


 .middletogglelabel .middletoggleicon {
  position: absolute;
  top: 30%;
  left: 50%;
  height: 67px;
  width: 45px;
  cursor: pointer;
  background: url(runamon.gif) 0 0;
  background-repeat: no-repeat;
  display: block;
  content: '';
  -webkit-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
  }

.middletogglelabel {
  /* display: flex; */
  ex; */
  cursor: pointer;
  display: flex;
  position: absolute;
  /* top: 1px; */
  z-index: 1027;
  color: #5d809d;
  width: 200px;
  height: 200px;
  -webkit-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}


.middletogglelabel:hover {
}


.middletoggleicon:hover .middletoggleicon
{

		  
}


.middletogglelabel:hover .middletoggleicon:before {

	
	
}


.middletogglelabel:hover .middletoggleicon:after {



}


.middletogglelabel:active {


}


.middleltogglelabel .middletoggleicon {
  transform: translate3d(-50%, -4px, 0);
  -webkit-transform: translate3d(-50%, -4px, 0);
}

.middletogglelabel .middletoggleicon:before {
  transform: translate3d(-50%, -14px, 0);
  -webkit-transform: translate3d(-50%, -14px, 0);
}

.middletogglelabel .middletoggleicon:after {
  transform: translate3d(-50%, 10px, 0);
  -webkit-transform: translate3d(-50%, 10px, 0);
}


.middletoggle:not:checked ~ .middletogglelabel {
animation: test-anim-1 2s 2 linear alternate-reverse,test-anim-2 1s 2 linear alternate-reverse;
 -webkit-animation: pulse 0.9s linear 1s 2;
	
	
	}

.middletoggle:checked ~ .middletogglelabel {
  /* height:440px; */
  width: 40vw;
  /* right: -25vw; */
  max-width: 410% !IMPORTANT;
  /*border-radius:1000px;  this controls the box around making it round*/
  box-shadow: 0 0 8px #54cc03, inset 0 0 8px #54cc03;
  cursor: pointer;
  -webkit-animation: pulse 0.9s linear 1s infinite;
  display: flex;
  content: '';
  background: url(testimage.png) 165px -14px;
  background-repeat: no-repeat;
  background-size: contain;
  background-size: contain;
  border-color: #1fc08e;
  color: #1fc08e;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
 
 
 
 
 
 /*****************THIS IS BOX 2********************/
 
 .middletoggle2{
 opacity: 0; /* Hides checkbox*/
}


.middletoggle2:focus ~ .middletogglelabel2{
  border-color: #1fc08e;
  color: #1fc08e;
}


 .middletogglelabel2 .middletoggleicon2 {position: absolute;
  top: 30%;
  left: 50%;
  height: 67px;
  width: 45px;
  cursor: pointer;
 background: url(runamon.gif) 0 0;
   background-repeat: no-repeat;

  display: block;
  content: '';
  -webkit-transition: all 500ms ease-in-out;
          transition: all 500ms ease-in-out;
		  }

.middletogglelabel2 {
  display: none;
  cursor: pointer;
  display: block;
  position: absolute;
top: 1px;
 /* z-index: 80; */
  color: #5d809d;
  width: 200px;
  height: 200px;
  -webkit-transition: all 400ms ease-in-out;
          transition: all 400ms ease-in-out;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}


.middletogglelabel2:hover {
}


.middletoggleicon2:hover .middletoggleicon2
{

		  
}


.middletogglelabel2:hover .middletoggleicon2:before {

	
	
}


.middletogglelabel2:hover .middletoggleicon2:after {



}


.middletogglelabel2:active {


}


.middleltogglelabel2 .middletoggleicon2 {
  transform: translate3d(-50%, -4px, 0);
  -webkit-transform: translate3d(-50%, -4px, 0);
}

.middletogglelabel2 .middletoggleicon2:before {
  transform: translate3d(-50%, -14px, 0);
  -webkit-transform: translate3d(-50%, -14px, 0);
}

.middletogglelabel2 .middletoggleicon2:after {
  transform: translate3d(-50%, 10px, 0);
  -webkit-transform: translate3d(-50%, 10px, 0);
}


.middletoggle2:not:checked ~ .middletogglelabel2 {
animation: test-anim-1 2s 2 linear alternate-reverse,test-anim-2 1s 2 linear alternate-reverse;
 -webkit-animation: pulse 0.9s linear 1s 2;
	
	
	}

.middletoggle2:checked ~ .middletogglelabel2 {
  height:440px;
  width:2000px;
	max-width: 410% !IMPORTANT;
  /*border-radius:1000px;  this controls the box around making it round*/
  box-shadow: 0 0 8px #fcff00, inset 0 0 8px #fcff00;
  cursor: pointer; 
  -webkit-animation: pulse 0.9s linear 1s infinite;
  display: block;
  content: '';
 background: url(testimage.png) 165px -14px;
	background-repeat: no-repeat;
		background-size: contain;
			background-size: contain;
 border-color: #fcff00;
  color: #fcff00;
  left: -200px;
}


/*************************************end button2*****************************/


 .middletoggle3{
 opacity: 0; /* Hides checkbox*/
}


.middletoggle3:focus ~ .middletogglelabel3{
  border-color: #1fc08e;
  color: #1fc08e;
}


 .middletogglelabel3 .middletoggleicon3 {position: absolute;
  top: 30%;
  left: 50%;
  height: 67px;
  width: 45px;
  cursor: pointer;
 background: url(runamon.gif) 0 0;
   background-repeat: no-repeat;

  display: block;
  content: '';
  -webkit-transition: all 500ms ease-in-out;
          transition: all 500ms ease-in-out;
		  }

.middletogglelabel3 {
  display: none;
  cursor: pointer;
  display: block;
  position: absolute;
top: 1px;
 /* z-index: 80; */
  color: #5d809d;
  width: 200px;
  height: 200px;
  -webkit-transition: all 400ms ease-in-out;
          transition: all 400ms ease-in-out;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}


.middletogglelabel3:hover {
}


.middletoggleicon3:hover .middletoggleicon3
{

		  
}


.middletogglelabel3:hover .middletoggleicon3:before {

	
	
}


.middletogglelabel3:hover .middletoggleicon3:after {



}


.middletogglelabel3:active {


}


.middleltogglelabel3 .middletoggleicon3 {
  transform: translate3d(-50%, -4px, 0);
  -webkit-transform: translate3d(-50%, -4px, 0);
}

.middletogglelabel3 .middletoggleicon3:before {
  transform: translate3d(-50%, -14px, 0);
  -webkit-transform: translate3d(-50%, -14px, 0);
}

.middletogglelabel3 .middletoggleicon3:after {
  transform: translate3d(-50%, 10px, 0);
  -webkit-transform: translate3d(-50%, 10px, 0);
}


.middletoggle3:not:checked ~ .middletogglelabel3 {
animation: test-anim-1 2s 2 linear alternate-reverse,test-anim-2 1s 2 linear alternate-reverse;
 -webkit-animation: pulse 0.9s linear 1s 2;
	
	
	}

.middletoggle3:checked ~ .middletogglelabel3 {
  height:440px;
  width:2000px;
	max-width: 410% !IMPORTANT;
  /*border-radius:1000px;  this controls the box around making it round*/
  box-shadow: 0 0 8px #b400ff, inset 0 0 8px #b400ff;
  cursor: pointer; 
  -webkit-animation: pulse 0.9s linear 1s infinite;
  display: block;
  content: '';
 background: url(testimage.png) 165px -14px;
	background-repeat: no-repeat;
		background-size: contain;
			background-size: contain;
 border-color: #b400ff;
  color: #b400ff;
  left: -400px;
}


/*****************3******************/


 .middletoggle4{
 opacity: 0; /* Hides checkbox*/
}


.middletoggle4:focus ~ .middletogglelabel4{
  border-color: #1fc08e;
  color: #1fc08e;
}


 .middletogglelabel4 .middletoggleicon4 {position: absolute;
  top: 30%;
  left: 50%;
  height: 67px;
  width: 45px;
  cursor: pointer;
 background: url(runamon.gif) 0 0;
   background-repeat: no-repeat;

  display: block;
  content: '';
  -webkit-transition: all 500ms ease-in-out;
          transition: all 500ms ease-in-out;
		  }

.middletogglelabel4 {
  display: none;
  cursor: pointer;
  display: flex;
  position: absolute;
  top: 1px;
  /* z-index: 80; */
  color: #5d809d;
  width: 200px;
  height: 200px;
  -webkit-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}


.middletogglelabel4:hover {
}


.middletoggleicon4:hover .middletoggleicon4
{

		  
}


.middletogglelabel4:hover .middletoggleicon4:before {

	
	
}


.middletogglelabel4:hover .middletoggleicon4:after {



}


.middletogglelabel4:active {


}


.middleltogglelabel4 .middletoggleicon4 {
  transform: translate3d(-50%, -4px, 0);
  -webkit-transform: translate3d(-50%, -4px, 0);
}

.middletogglelabel4 .middletoggleicon4:before {
  transform: translate3d(-50%, -14px, 0);
  -webkit-transform: translate3d(-50%, -14px, 0);
}

.middletogglelabel4 .middletoggleicon4:after {
  transform: translate3d(-50%, 10px, 0);
  -webkit-transform: translate3d(-50%, 10px, 0);
}


.middletoggle4:not:checked ~ .middletogglelabel4 {
animation: test-anim-1 2s 2 linear alternate-reverse,test-anim-2 1s 2 linear alternate-reverse;
 -webkit-animation: pulse 0.9s linear 1s 2;
	
	
	}

.middletoggle4:checked ~ .middletogglelabel4 {
  height:440px;
  width:2000px;
	max-width: 410% !IMPORTANT;
  /*border-radius:1000px;  this controls the box around making it round*/
  box-shadow: 0 0 8px #0009ff, inset 0 0 8px #0009ff;
  cursor: pointer; 
  -webkit-animation: pulse 0.9s linear 1s infinite;
  display: block;
  content: '';
 background: url(testimage.png) 165px -14px;
	background-repeat: no-repeat;
		background-size: contain;
			background-size: contain;
 border-color: #0009ff;
  color: #0009ff;
  left: -601px;
}


/**************4*****************/


 .middletoggle5{
 opacity: 0; /* Hides checkbox*/
}


.middletoggle5:focus ~ .middletogglelabel5{
  border-color: #1fc08e;
  color: #1fc08e;
}


 .middletogglelabel5 .middletoggleicon5 {position: absolute;
  top: 30%;
  left: 50%;
  height: 67px;
  width: 45px;
  cursor: pointer;
 background: url(runamon.gif) 0 0;
   background-repeat: no-repeat;

  display: block;
  content: '';
  -webkit-transition: all 500ms ease-in-out;
          transition: all 500ms ease-in-out;
		  }

.middletogglelabel5 {
  display: none;
  cursor: pointer;
  display: block;
  position: absolute;
top: 1px;
 /* z-index: 80; */
  color: #5d809d;
  width: 200px;
  height: 200px;
  -webkit-transition: all 400ms ease-in-out;
          transition: all 400ms ease-in-out;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}


.middletogglelabel5:hover {
}


.middletoggleicon5:hover .middletoggleicon5
{

		  
}


.middletogglelabel5:hover .middletoggleicon5:before {

	
	
}


.middletogglelabel5:hover .middletoggleicon5:after {



}


.middletogglelabel5:active {


}


.middleltogglelabel5 .middletoggleicon5 {
  transform: translate3d(-50%, -4px, 0);
  -webkit-transform: translate3d(-50%, -4px, 0);
}

.middletogglelabel5 .middletoggleicon5:before {
  transform: translate3d(-50%, -14px, 0);
  -webkit-transform: translate3d(-50%, -14px, 0);
}

.middletogglelabel5 .middletoggleicon5:after {
  transform: translate3d(-50%, 10px, 0);
  -webkit-transform: translate3d(-50%, 10px, 0);
}


.middletoggle5:not:checked ~ .middletogglelabel5 {
animation: test-anim-1 2s 2 linear alternate-reverse,test-anim-2 1s 2 linear alternate-reverse;
 -webkit-animation: pulse 0.9s linear 1s 2;
	
	
	}

.middletoggle5:checked ~ .middletogglelabel5 {
  height:440px;
  width:2000px;
	max-width: 410% !IMPORTANT;
  /*border-radius:1000px;  this controls the box around making it round*/
  box-shadow: 0 0 8px #ff0404, inset 0 0 8px #ff0404;
  cursor: pointer; 
  -webkit-animation: pulse 0.9s linear 1s infinite;
  display: block;
  content: '';
 background: url(testimage.png) 165px -14px;
	background-repeat: no-repeat;
		background-size: contain;
			background-size: contain;
 border-color: #ff0404;
  color: #ff0404;
  top: -222px;
    left: -6px;
}
/*****************************5******************************************/

 .middletoggle6{
 opacity: 0; /* Hides checkbox*/
}


.middletoggle6:focus ~ .middletogglelabel6{
  border-color: #1fc08e;
  color: #1fc08e;
}


 .middletogglelabel6 .middletoggleicon6 {position: absolute;
  top: 30%;
  left: 50%;
  height: 67px;
  width: 45px;
  cursor: pointer;
 background: url(runamon.gif) 0 0;
   background-repeat: no-repeat;

  display: block;
  content: '';
  -webkit-transition: all 500ms ease-in-out;
          transition: all 500ms ease-in-out;
		  }

.middletogglelabel6 {
  display: none;
  cursor: pointer;
  display: flex;
  position: absolute;
  top: 1px;
  /* z-index: 80; */
  color: #5d809d;
  width: 200px;
  height: 200px;
  -webkit-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}


.middletogglelabel6:hover {
}


.middletoggleicon6:hover .middletoggleicon6
{

		  
}


.middletogglelabel6:hover .middletoggleicon6:before {

	
	
}


.middletogglelabel6:hover .middletoggleicon6:after {



}


.middletogglelabel6:active {


}


.middleltogglelabel6 .middletoggleicon6 {
  transform: translate3d(-50%, -4px, 0);
  -webkit-transform: translate3d(-50%, -4px, 0);
}

.middletogglelabel6 .middletoggleicon6:before {
  transform: translate3d(-50%, -14px, 0);
  -webkit-transform: translate3d(-50%, -14px, 0);
}

.middletogglelabel6 .middletoggleicon6:after {
  transform: translate3d(-50%, 10px, 0);
  -webkit-transform: translate3d(-50%, 10px, 0);
}


.middletoggle6:not:checked ~ .middletogglelabel6 {
animation: test-anim-1 2s 2 linear alternate-reverse,test-anim-2 1s 2 linear alternate-reverse;
 -webkit-animation: pulse 0.9s linear 1s 2;
	
	
	}

.middletoggle6:checked ~ .middletogglelabel6 {
  height:440px;
  width:2000px;
	max-width: 410% !IMPORTANT;
  /*border-radius:1000px;  this controls the box around making it round*/
  box-shadow: 0 0 8px #e221b0, inset 0 0 8px #e221b0;
  cursor: pointer; 
  -webkit-animation: pulse 0.9s linear 1s infinite;
  display: block;
  content: '';
 background: url(testimage.png) 165px -14px;
	background-repeat: no-repeat;
		background-size: contain;
			background-size: contain;
 border-color: #e221b0;
  color: #e221b0;
    left: -200px;
    top: -232px;
}


/****************************6******************************************/




 .middletoggle7{
 opacity: 0; /* Hides checkbox*/
}


.middletoggle7:focus ~ .middletogglelabel7{
  border-color: #1fc08e;
  color: #1fc08e;
}


 .middletogglelabel7 .middletoggleicon7 {position: absolute;
  top: 30%;
  left: 50%;
  height: 67px;
  width: 45px;
  cursor: pointer;
 background: url(runamon.gif) 0 0;
   background-repeat: no-repeat;

  display: block;
  content: '';
  -webkit-transition: all 500ms ease-in-out;
          transition: all 500ms ease-in-out;
		  }

.middletogglelabel7 {
  display: none;
  cursor: pointer;
  display: block;
  position: absolute;
top: 1px;
 /* z-index: 80; */
  color: #5d809d;
  width: 200px;
  height: 200px;
  -webkit-transition: all 400ms ease-in-out;
          transition: all 400ms ease-in-out;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}


.middletogglelabel7:hover {
}


.middletoggleicon7:hover .middletoggleicon7
{

		  
}


.middletogglelabel7:hover .middletoggleicon7:before {

	
	
}


.middletogglelabel7:hover .middletoggleicon7:after {



}


.middletogglelabel7:active {


}


.middleltogglelabel7 .middletoggleicon7 {
  transform: translate3d(-50%, -4px, 0);
  -webkit-transform: translate3d(-50%, -4px, 0);
}

.middletogglelabel7 .middletoggleicon7:before {
  transform: translate3d(-50%, -14px, 0);
  -webkit-transform: translate3d(-50%, -14px, 0);
}

.middletogglelabel7 .middletoggleicon7:after {
  transform: translate3d(-50%, 10px, 0);
  -webkit-transform: translate3d(-50%, 10px, 0);
}


.middletoggle7:not:checked ~ .middletogglelabel7 {
animation: test-anim-1 2s 2 linear alternate-reverse,test-anim-2 1s 2 linear alternate-reverse;
 -webkit-animation: pulse 0.9s linear 1s 2;
	
	
	}

.middletoggle7:checked ~ .middletogglelabel7 {
  height:440px;
  width:2000px;
	max-width: 410% !IMPORTANT;
  /*border-radius:1000px;  this controls the box around making it round*/
  box-shadow: 0 0 8px #00a2ff, inset 0 0 8px #00a2ff;
  cursor: pointer; 
  -webkit-animation: pulse 0.9s linear 1s infinite;
  display: block;
  content: '';
 background: url(testimage.png) 165px -14px;
	background-repeat: no-repeat;
		background-size: contain;
			background-size: contain;
 border-color: #00a2ff;
  color: #00a2ff;
    left: -400px;
    top: -236px;
}

/****************************7******************************************/


 .middletoggle8{
 opacity: 0; /* Hides checkbox*/
}


.middletoggle8:focus ~ .middletogglelabel8{
  border-color: #1fc08e;
  color: #1fc08e;
}


 .middletogglelabel8 .middletoggleicon8 {position: absolute;
  top: 30%;
  left: 50%;
  height: 67px;
  width: 45px;
  cursor: pointer;
 background: url(runamon.gif) 0 0;
   background-repeat: no-repeat;

  display: block;
  content: '';
  -webkit-transition: all 500ms ease-in-out;
          transition: all 500ms ease-in-out;
		  }

.middletogglelabel8 {
  display: none;
  cursor: pointer;
  display: block;
  position: absolute;
top: 1px;
 /* z-index: 80; */
  color: #5d809d;
  width: 200px;
  height: 200px;
  -webkit-transition: all 400ms ease-in-out;
          transition: all 400ms ease-in-out;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}


.middletogglelabel8:hover {
}


.middletoggleicon8:hover .middletoggleicon8
{

		  
}


.middletogglelabel8:hover .middletoggleicon8:before {

	
	
}


.middletogglelabel8:hover .middletoggleicon8:after {



}


.middletogglelabel8:active {


}


.middleltogglelabel8 .middletoggleicon8 {
  transform: translate3d(-50%, -4px, 0);
  -webkit-transform: translate3d(-50%, -4px, 0);
}

.middletogglelabel8 .middletoggleicon8:before {
  transform: translate3d(-50%, -14px, 0);
  -webkit-transform: translate3d(-50%, -14px, 0);
}

.middletogglelabel8 .middletoggleicon8:after {
  transform: translate3d(-50%, 10px, 0);
  -webkit-transform: translate3d(-50%, 10px, 0);
}


.middletoggle8:not:checked ~ .middletogglelabel8 {
animation: test-anim-1 2s 2 linear alternate-reverse,test-anim-2 1s 2 linear alternate-reverse;
 -webkit-animation: pulse 0.9s linear 1s 2;
	
	
	}

.middletoggle8:checked ~ .middletogglelabel8 {
  height:440px;
  width:2000px;
	max-width: 410% !IMPORTANT;
  /*border-radius:1000px;  this controls the box around making it round*/
  box-shadow: 0 0 8px #1fc08e, inset 0 0 8px #1fc08e;
  cursor: pointer; 
  -webkit-animation: pulse 0.9s linear 1s infinite;
  display: block;
  content: '';
 background: url(testimage.png) 165px -14px;
	background-repeat: no-repeat;
		background-size: contain;
			background-size: contain;
 border-color:#1fc08e;
  color: #1fc08e;
    left: -600px;
    top: -236px;
}