/* /////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////////////////////////////////////// */


/* ON HOLD - UNUSED FOR NOw*/





.grad{
	/* background-image: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1), rgba(255,255,255,1),rgba(255,255,255,0)); */
	background-image: radial-gradient( rgba(0,0,0,1), rgba(0,0,0,.6),rgba(255,255,255,0), rgba(255,255,255,0)); 
	}

.grad-white{
		/* background-image: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1), rgba(255,255,255,1),rgba(255,255,255,0)); */
		background-image: radial-gradient( rgba(255,255,255,.6), rgba(255,255,255,0), rgba(255,255,255,0)); 
		}








/* /////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* BOX SHADOWS AS WELL*/




.shadow-strong{
	box-shadow: 20px 20px 10px -2px rgba(10,10,10,0.6);
}

.box-addon{
	box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.drop{
border-radius: 0px;
box-shadow:  13px 13px 26px #000a8f,
             -13px -13px 26px #0018ff;
}

.drop-top{
box-shadow: rgba(0, 0, 0, 0.35) 15px 35px -50px 10px ;
         }
.drop1{
box-shadow: rgba(50, 50, 93, 0.45) 20px 30px 50px -10px, rgba(0, 0, 0, 0.35) 15px 35px 50px -10px, rgba(10, 37, 64, 0.75) 0px -2px 6px 0px inset;
         }
.drop2{
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
         }
.drop3{
  /* border-radius: 10px;*/
  	border-radius: 0px;
	box-shadow:  10px 13px 28px -2px #000a8f,
      				-4px -4px 22px -8px #0018ff;
  background-color: rgba(24, 255, 0, 0.1);
	backdrop-filter: blur(7.3px);
	-webkit-backdrop-filter: blur(7.3px);
}
.drop4{
   /* margin:40px 10px;  */
	border-radius: 0px;
	box-shadow:  3px 13px 26px #000a8f,
       				-8px -8px 20px #0018ff;
 	background-color: rgba(24, 255, 0, 0.1);
	backdrop-filter: blur(7.3px);
	webkit-backdrop-filter: blur(7.3px);
}
.blur-box{
	/* From https://css.glass */
	background: rgba(24, 255, 0, 0.2);
	border-radius: 16px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(7.3px);
	-webkit-backdrop-filter: blur(7.3px);
	border: 1px solid rgba(24, 255, 0, 0.81);
}



/* /////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////////////////////////////////////// */


/* BOX SHADOWS USED ON MOST DOM ELEMENTS*/



.shadow{
	box-shadow: 0 0 0 5px black;

}
.box-shadow{
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

.box-shadow-a{
box-shadow: rgba(0, 0, 0, 0.6) 4px 12px 22px -2px, rgba(0, 0, 0, 0.5) -4px -4px 30px -6px;
}

.box-shadow-b{
box-shadow: rgba(0, 0, 0, 0.8) 8px 14px 30px -6px, rgba(0, 0, 0, 0.6) -4px -4px 28px -6px;
}

.box-shadow-c{
box-shadow: rgba(0, 0, 0, 0.8) 10px 10px 14px -5px, rgba(0, 0, 0, 0.7) -12px -10px 12px -10px;
}

.box-shadow-d{
box-shadow: rgba(0, 0, 0, 0.6) -12px -10px 10px -10px;
}

.box-shadow-e{
box-shadow: rgba(0, 0, 0, 0.3) -12px -10px 10px -10px;
}

.box-shadow1{
box-shadow: rgba(0, 0, 0, 0.8) 6px 16px 24px -2px, rgba(0, 0, 0, 0.5) -4px -4px 24px -6px;
}

.box-shadow1a{
box-shadow: rgba(0, 0, 0, 0.8) 4px 14px 20px -2px, rgba(0, 0, 0, 0.5) -4px -4px 24px -6px;
}

.box-shadow2{
box-shadow: rgba(0, 0, 0, 0.7) 10px 22px 34px -4px, rgba(0, 0, 0, 0.4) -2px -2px 24px -6px;
}

.box-shadow3{
box-shadow: rgba(0, 0, 0, 0.8) 12px 22px 28px -7px, rgba(0, 0, 0, 0.7) -4px -4px 22px -4px;
}

.box-shadow4{
box-shadow: rgba(0, 0, 0, 0.7) 4px 12px 10px -4px, rgba(0, 0, 0, 0.5) 0px 0px 12px -2px;
}

.box-shadow4a{
box-shadow: rgba(0, 0, 0, 0.3) 6px 14px 10px -2px, rgba(0, 0, 0, 0.3) 0px 10px 4px -4px, rgba(0, 0, 0, 0.3) -6px 12px 6px -6px, rgba(0, 0, 0, 0.5) 2px 2px 12px -2px;
}

.rainbow-box-shadow{
	box-shadow: blue 0px 0px 0px 2px inset, rgb(255, 255, 255) 10px -10px 0px -3px, rgb(31, 193, 27) 10px -10px, rgb(255, 255, 255) 20px -20px 0px -3px, rgb(255, 217, 19) 20px -20px, rgb(255, 255, 255) 30px -30px 0px -3px, rgb(255, 156, 85) 30px -30px, rgb(255, 255, 255) 40px -40px 0px -3px, rgb(255, 85, 85) 40px -40px;
width: auto;
height: auto;
}
.pink-block-shadow{
	width: auto;
	box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;
}


/* /////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* SHADOW FILTERS  - CAN BE APPLIED TO TRANSPARENTS GIF AND PNG IMAGES*/



.shadow-filter-frame{
	filter: drop-shadow(8px 14px 12px rgba(0, 0, 0, 0.9)) drop-shadow(-4px -1px 4px rgba(0, 0, 0, 0.2));

}


.shadow-filter-min{
	filter: drop-shadow(10px 12px 5px rgba(0, 0, 0, 0.7));
}


.shadow-filter-min2{
	filter: drop-shadow(8px 10px 4px rgba(0, 0, 0, 0.6));
}


.shadow-filter-small{
	filter: drop-shadow(6px 6px 4px rgba(0, 0, 0, 0.6));
}

.shadow-filter{
	filter: drop-shadow(12px 14px 2px rgba(0, 0, 0, 0.5));
}

.shadow-filter-computer2{
	filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.2)) drop-shadow(8px 6px 2px rgba(0, 0, 0, 0.6)) drop-shadow(-4px -4px 8px rgba(0, 0, 0, 0.3));
}

.shadow-filter-computer3{
	filter: drop-shadow(9px 7px 2px rgba(0, 0, 0, 0.6)) drop-shadow(7px 0px 6px rgba(0, 0, 0, 0.2)) drop-shadow(-4px -4px 8px rgba(0, 0, 0, 0.2));
}

.shadow-filter-computer{
	filter: drop-shadow(6px 4px 10px rgba(0, 0, 0, 0.1)) drop-shadow(6px 8px 3px rgba(0, 0, 0, 0.6)) drop-shadow(-4px -4px 8px rgba(0, 0, 0, 0.3));
}

.shadow-filter-subtle{
	filter: drop-shadow(8px 10px 2px rgba(0, 0, 0, 0.6));
}
.shadow-filter-soft{
	filter: drop-shadow(0px 18px 6px rgba(0, 0, 0, 0.8));
}

.shadow-filter-far{
	filter: drop-shadow(12px 22px 1px rgba(0, 0, 0, 0.6));
}

.shadow-filter-mid{
	filter: drop-shadow(-28px 48px 2px rgba(0, 0, 0, 0.5));
}
.shadow-filter-close{
	filter: drop-shadow(14px 20px 1px rgba(0, 0, 0, 0.7));
}
.shadow-filter-close2{
	filter: drop-shadow(16px 20px 2px rgba(0, 0, 0, 0.7));
}

.shadow-filter-close3{
	filter: drop-shadow(6px 6px 3px rgba(0, 0, 0, 0.6));
}

.shadow-filter-close4{
	filter: drop-shadow(10px 12px 2px rgba(0, 0, 0, 0.8));
}
.shadow-filter-close5{
	filter: drop-shadow(8px 8px 2px rgba(0, 0, 0, 0.7));
}

/*  The mobile Safari browser has a bug where it doesn't display the dashed sides of a box border if their dynamic value is a fraction of a pixel.
		The dash properties are hard coded to accountbreakpoint addresses
 */

					 

 @media screen and (max-width:500px){


.shadow-filter-mid{
	filter: drop-shadow(-22px 32px 2px rgba(0, 0, 0, 0.5));
}

.shadow-filter-soft{
	filter: drop-shadow(0px 10px 2px rgba(0, 0, 0, 0.8));
}

.shadow-filter-subtle{
	filter: drop-shadow(4px 5px 2px rgba(0, 0, 0, 0.6));
}
.shadow-filter-close{
	filter: drop-shadow(10px 14px 1px rgba(0, 0, 0, 0.7));
}
.shadow-filter-close2{
	filter: drop-shadow(16px 20px 2px rgba(0, 0, 0, 0.7));
}

}