.container {
				position:relative;
				width:100%;
				height:100%;
				font-size: 100%;
				background-color:mediumseagreen;
				overflow:hidden;
				z-index:1;
			}

/* stop all text being selectable, doesn't seem to work too well!!*/
	* {
	  	-moz-user-select: -moz-none;
	  	-khtml-user-select: none;
	  	-webkit-user-select: none;
		-webkit-touch-callout: none;
	  	-ms-user-select: none;
	  	user-select: none;
	}

	p.MainPage
		{
			line-height: 25px;
			font-size: 110%;
		}
	.underconstruction
			{
			position:absolute;
			left:20%;
			top:30%;
			width:60%;
			height:20%;
			visibility:hidden; 
			z-index:6;
			}

	.debugwindow {

			position:absolute;
			top: 5px;
			width: 100%;
			height:10%;
		  	background-color: antiquewhite;
			display:none;

				z-index:6;
			}
	.listwindow {

			position:absolute;
			top: 5px;
			width: 50%;
			max-width:200px;
			left:5px;
			height:75%;
		  	background-color: white;
			border: 1px solid #000000;
			border-radius: 4px;
			z-index:6;
			}
	.interactionwindow{
			position:absolute;
			top: 5px;
			right: 10px;
			width: 73%;
			height:40%;
			font-size: 100%;
		  	background-color: antiquewhite;
			border-radius: 4px;
			border: 1px solid #000000;
			}
	.listdatawindow{
			position:absolute;
			width: 100%;
			height:95%;
			top:5%;
			overflow: scroll;
			font-size: 100%;
		  	background-color: antiquewhite;
			border-radius: 4px;
			border: 1px solid #000000;
			}

	.menuitemwindow{
			
			top: 5px;
			width: 94%;
			left:5px;
			height:5.5%;
			min-height:30px;
			max-height:300px;
			margin:4px;
			display:block;
			overflow: hidden;
		  	background-color: white;
			border: 1px solid #404040;
			border-radius: 4px;
			z-index:6.4;
			display:none;
		}
	

	.MediaTrackwindow{
			position:absolute;
			width: 90%;
			max-width: 400px;
			left:20%;
			height:50%;
			max-height: 400px;
			overflow: scroll;
			font-size: 100%;
		  	background-color: white;
			border-radius: 4px;
			border: 1px solid #000000;
			z-index:4.5;
			}


	.dataentrywindow {

			position:absolute;
			top: 1px;
			width: 100%;
			height:10%;
		  	background-color: antiquewhite;

				z-index:6;
			}

	.Inputformsize
			{
			position: absolute;
			border-radius: 5px;
			background-color: #f2f2f2;
			border: 1px solid black;
			padding: 10px;
			left: 10px;
			width: 95%;
			height:90%;
			overflow: scroll;
			z-index: 6;
			}
	.scrollingview
			{
			position: absolute;
			overflow: scroll;
			top: 5px;
			left: 10px;
			width: 95%;
			height:95%;
			border-radius: 5px;
			background-color: #f2f2f2;
			border: 1px solid black;
			padding: 5px;
			z-index: 6;
			}
	.deleteformsize
			{
			position: absolute;
			top:15px;
			left:10px;
			height:40%;
			border-radius: 5px;
			background-color: #f2f2f2;
			border: 1px solid black;
			padding: 5px;
			width:90%;
			z-index: 6;
			}
	.outerControlDiv
			{
			position:absolute;
			bottom: 1px;
			width: 100%;
			height:22%;
			max-height: 125px;	
			}

	.controls2 {

			position:absolute;
			margin:auto;
			width: 100%;
			max-width: 450px;
			left:0%;
			bottom:0%;
			height:115px;
		  	background-image: url("../Image-assets/system/AudioBar-1.png");
		 	background-size:cover;
			background-position: center;
			display: none;
			z-index:5;
			}
 	.iconbardiv {
			position:relative; 
			width: 98%; 
			max-width:440px;  
			margin-top:5px; 
			height:65px; 
			display:none; 
			text-align:center; 
			overflow-x:scroll; 
			overflow-y:hidden;
			}

	.icongrouping {
			text-align:center;
			width:auto;
			height:42px; 
			display:inline-block; 
			/*border: 1px solid lightseagreen; */
			/*border-radius: 4px; */
			padding-top: 4px; 
			margin-right: 2px;
			}
	.icongrouping2 {
			text-align:center;
			width:auto;
			min-width:30px;
			height:35px; 
			display:inline-block; 
			/*border: 1px solid lightseagreen; 
			border-radius: 4px; */
			padding-top: 4px; 
			margin-top: 2px;
			margin-right: 10px;
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			}
	.controls3 {

			position:absolute;
			margin:auto;
			width: 98%;
			left:0%;
			bottom:0%;
			height:18%;
			max-width: 450px;
			max-height: 125px;
		  	background-image: url("../Image-assets/system/AudioBar-1.png");
		 	background-size:cover;
			background-position: center;
			display: none;
			z-index:5;
			}
	.audiocontrols
			{
			position:absolute;
			left:20%;
			width:60%;
			max-width: 400px;
			z-index:6;
			}

	.SingleLineInfoDiv {
			position:absolute;
			bottom: 8%;
			width: 90%;
			left:4%;
			height:8%;
			font-size: 100%;
			text-align: center;
			color:lack;
			z-index:6;
			}		
			
	.AudioInfoDiv {
			position:absolute;
			Top: 4%;
			width: 90%;
			left:4%;
			text-align:center;
			height:8%;
			font-size: 80%;
			color:black;
			z-index:6;							
			}

	.SQLQueryResults {
			position:absolute;
			top: 10%;
			width: 100%;
			height:10%;
		  	background-color: antiquewhite;
			border:#010101;
			z-index:6;					
			}
		
	p.small{
				font-size: 100%;
				color: black;
			}
	p.smallest
			{
				font-size: 90%;
				color: black;
			}

	.formheader {
			font-weight: bold;
			font-size:120%;
			align-content: center;
			text-align: center;
			position:relative;
			width:100%;
			margin-bottom: 5px;
			}
	.map {
		  position: relative;
			width:100%;
		  border: 1px solid black;
			overflow: hidden;
				}
			
	.crosshairs {
			position:absolute;
			top: 0%;
			left: 0%;
			background-image: url("../Image-assets/system/CrossHairs.png");
			background-size: cover;
			background-position: center;
			transform-origin: center;
			z-index:5;
		
		}
		.GPSmarker 
			{
			position:absolute;
			top: 0%;
			left: 0%;
			background-image: url("../Image-assets/system/GPSpoint2.png");
			background-size: cover;
			background-position: center;
			transform-origin: center;
			z-index:5;				
			}
	.POI {
			position:absolute;
			background-image: url("../Image-assets/system/greenbutton2.png");
			background-size: cover;
			background-position: center;
			z-index:5;
		
		}
	.RedPOI {
			position:absolute;
			background-image: url("../Image-assets/system/RedPOI.png");
			background-size: cover;
			background-position: center;
			z-index:5;
		
		}
	.BluePOI {
			position:absolute;
			background-image: url("../Image-assets/system/BluePOI.png");
			background-size: cover;
			background-position: center;
			z-index:5;
		
		}
	.StartPOI {
			position:absolute;
			background-image: url("../Image-assets/system/Pship-3.png");
			background-size: cover;
			background-position: center;
			z-index:5;
		
		}
	.SplitPOI {
			position:absolute;
			background-image: url("../Image-assets/system/compass8.png");
			background-size: cover;
			background-position: center;
			z-index:5;
		
		}
	.DeadEndPOI {
			position:absolute;
			background-image: url("../Image-assets/system/SkullXbones.png");
			background-size: cover;
			background-position: center;
			z-index:5;
		
		}
	.TrailEndPOI {
			position:absolute;
			background-image: url("../Image-assets/system/Pship.png");
			background-size: cover;
			background-position: center;
			z-index:5;
		
		}
	.TreasurePOI {
			position:absolute;
			background-image: url("../Image-assets/system/Piratechest3.gif");
			background-size: cover;
			background-position: center;
			z-index:5;
		
		}
	.DiamondPOI {
			position:absolute;
			background-image: url("../Image-assets/system/Diamond.gif");
			background-size: cover;
			background-position: center;
			z-index:5;
		
		}
	.WalkPoint {
			position:absolute;
			background-image: url("../Image-assets/system/yellowPOI2.png");
			background-size: cover;
			background-position: center;
			z-index:4;	
		}

	.WalkPointDisc {
			position:absolute;
			background-color: yellow;
			visibility:hidden;
			border-radius: 50%;
			z-index:4;	
		}

	.GPSdisc {
			position:absolute;
			background-image: url("../Image-assets/system/greendisc.png");
			background-size: cover;
			background-position: center;
			z-index:4;
		
		}
	.Highlight {
			position:absolute;
			background-image: url("../Image-assets/system/Yellowoval.png");
			background-size: cover;
			background-position: center;
			z-index:4;
		
		}
	.Pudsey {
			position:absolute;
			background-image: url("../Image-assets/system/bearicon.png");
			background-size: cover;
			background-position: center;
			display: none;
			z-index:6;
		
		}


	.LabelPOI {
			position:absolute;
			background-position: center;
			z-index:5;
		
		}
	.walkwisemap {
				position: absolute;
				top:0%;
				left:0%;
				background-image: url("");
				background-size: cover;
				background-position: center;
				overflow: hidden;
				z-index:4;
			}
	.LowResMap {
				position: absolute;
				top:0%;
				left:0%;
				background-image: url("");
				background-size: cover;
				background-position: center;
				overflow: hidden;
				display: none;
				z-index:4;
			}
	canvas.mapcanvas {
				position: absolute;
				width:100%;
				height:100%;
				top:0%;
				left:0%;
				z-index:4.5;

				}
			
		.touchstate {
		touch-action: none;
		height:100%;
		width:100%;
	}	


		.button {
			position: absolute;
			right:2%;
			top:10%;
		  	border: none;
			width:75px;
			height:28px;
		  	padding: 1px;
			color: white;
		  	text-align: center;
		  	text-decoration: none;
		  	display: inline-block;
		  	font-size: 100%;
			border: 2px solid #000000;
			background-color: #555555;
			text-decoration-color: white;
			border-radius: 4px;
			transition-duration: 0s;
			cursor: pointer;
		}

		option {
			font-size:100%;

		}

		button.inputbutton {
			left:10px;
		  	border: none;
			width:75px;
			height:28px;
		  	padding: 1px;
			color: white;
		  	text-align: center;
		  	text-decoration: none;
		  	display: inline-block;
		  	font-size: 100%;
			border: 2px solid #000000;
			background-color: #555555;
			text-decoration-color: white;
			border-radius: 4px;
			transition-duration: 0s;
			cursor: pointer;
		}
		button.cancelbutton {
			
		  	border: none;
			width:75px;
			height:28px;
		  	padding: 1px;
			color: white;
		  	text-align: center;
		  	text-decoration: none;
		  	display: inline-block;
		  	font-size: 100%;
			border: 2px solid #000000;
			background-color: #555555;
			text-decoration-color: white;
			border-radius: 4px;
			transition-duration: 0s;
			cursor: pointer;
		}
		button.deletebutton{
			position: absolute;
			left:10px;
			bottom:5%;
		  	border: none;
			width:75px;
			height:28px;
		  	padding: 1px;
			color: white;
		  	text-align: center;
		  	text-decoration: none;
		  	display: inline-block;
		  	font-size: 100%;
			border: 2px solid #000000;
			background-color: #555555;
			text-decoration-color: white;
			border-radius: 4px;
			transition-duration: 0s;
			cursor: pointer;
		}
		button.mainmenu {
		  	border:none;
			margin: 5px;
			width:95%;
			color: white;
			background-color: black;
		  	text-align: left;
		  	text-decoration: none;
		  	display: block;
		  	font-size: 100%;
			border-radius: 5px;
			cursor: pointer;
		}
		button.submenu {
		  	border:none;
			margin: 5px;
			width:95%;
		  	padding-left: 10px;
			color: black;
		  	text-align: left;
		  	text-decoration: none;
		  	display: block;
		  	font-size: 100%;
			border-radius: 5px;
			transition-duration: 0s;
			cursor: pointer;
		}
			.button:hover {
			  background-color: white;
			  color: black;
			}
			.submenu:hover {
			  background-color: white;
			  color: black;
			}

		textarea.textarea1 {
			position:relative;
			right:5px;
			left:20%;
			width:65%;
		  	font-size: 110%;
		  	font-family: Cambria, "Times New Roman", "serif";
			padding: 4px;
			display:table-column;
			border: 1px solid #ccc;
			border-radius: 4px;
			box-sizing: border-box;
		}	
		input[type=text], select {
			position:relative;
			right:5px;
			left:20%;
			width:65%;
		  	font-size: 110%;
		  	font-family: Cambria, "Times New Roman", "serif";
			padding: 4px;
			display:table-column;
			border: 1px solid #ccc;
			border-radius: 4px;
			box-sizing: border-box;
		}

		input[type=text].smallbox, select {
			position:relative;
			right:5px;
			left:20%;
			width:40%;
		  	font-size: 110%;
		  	font-family: Cambria, "Times New Roman", "serif";
			padding: 4px;
			display:table-column;
			border: 1px solid #ccc;
			border-radius: 4px;
			box-sizing: border-box;
		}
		input[type=text].tinybox, select {
			position:relative;
			right:5px;
			left:20%;
			width:15%;
		  	font-size: 110%;
		  	font-family: Cambria, "Times New Roman", "serif";
			padding: 4px;
			display:table-column;
			border: 1px solid #ccc;
			border-radius: 4px;
			box-sizing: border-box;
		}
		input[type=file], select {
			position:relative;
			right:5px;
			left:30%;
			width:65%;
		  	font-size: 110%;
		  	font-family: Cambria, "Times New Roman", "serif";
			padding: 4px;
			display:table-column;
			border: 1px solid #ccc;
			border-radius: 4px;
			box-sizing: border-box;
		}
		input[type=text]:focus {
   		 background-color: #000000;
			text-decoration-color: white;
			color: white;
		}

		label{
			font-size:100%;
			font-family: Cambria, "Times New Roman", "serif";
			width:20%;
			position:absolute;
			vertical-align: middle; 
			left:5px;
			border-bottom: 5px;
			}
		label.forHalfWidthform
		{
			font-size:100%;
			font-family: Cambria, "Times New Roman", "serif";
			width:20%;
			vertical-align: middle; 
			left:5px;
			position:relative;
			border-bottom: 5px;
		}

		input[type=submit] {
			position:relative;
			left: 40%;
			background-color: #4CAF50;
			color: white;
			padding: 14px 20px;
			margin: 8px 0;
			border: none;
			border-radius: 4px;
			cursor: pointer;
		}


		input[type=submit]:hover {
		  background-color: #45a049;
		}
		
	.closeWindow
			
			{
				width:22px; 
				height:22px; 
				position:absolute; 
				display:inline-block; 
				top:1px;
				right:5px; 
				background-color: beige; 
				border: 1px grey solid; 
				cursor:pointer;			
				background-image: url("../Image-assets/system/cross.webp");
				background-size: cover;
				background-position: center;
				z-index:inherit;
			}
	.closeWindowWrapper
			
			{
				text-align: right; 
				left:80%;
				position: -webkit-sticky;
				position: sticky; 				
				top:1px;
				width:20%;
				height:22px;
				z-index:100;
			}

	.RightDirectionSmall
			{
				width:20px; 
				height:15px; 
				display:inline-block; 
				cursor:pointer;			
				background-image: url("../Image-assets/system/RightArrow.png");
				background-size: contain;
				background-position: center;
			}

	.RightDirection
			
			{
				width:30px; 
				height:30px; 
				position: sticky; 
				position: -webkit-sticky;
				display:block; 
				top:45%;
				left:90%; 
				z-index:30;
				background-color: none; 
				cursor:pointer;			
				background-image: url("../Image-assets/system/RightArrow.webp");
				background-size: cover;
				background-position: center;								
			}

	.AppPageDisplay
		{
			position:absolute; 
			margin-left:5px; 
			margin-right:5px; 
			background-color: white;
			width:100%;
			display:none;
		}

	.AppPageDisplay .PageHeader
		{
			width:98%; 
			height:auto; 
			text-align:center; 
			margin-left:auto; 
			margin-right:auto; 
			font-weight: 800;
			font-size:120%;
		}
	.AppPageDisplay .FlexColumn
		{
			height:auto; 
			width:100%; 
			margin-bottom: 50px;
		}
	.AppPageDisplay .FlexColumn .FloatImageLeft
		{
			height:auto;
			width: 45%; 
			max-width:150px; 
			text-align:center; 
			margin-top: 10px; 
			margin-right: 5px;
			float:left; 
			border: 1px solid;
		}
	.AppPageDisplay .FlexColumn .FloatImageRight
		{
			height:auto;
			width: 45%; 
			max-width:150px; 
			text-align:center; 
			margin-top: 10px; 
			float:right; 
			border: 1px solid;
		}
	.AppPageDisplay .FlexColumn .CenteredImage
		{
			height:auto;
			width: 60%; 
			text-align:center; 
			margin-top: 10px; 
			border: 1px solid;
			margin-left:auto;
			margin-right:auto;
		}

	.helpMultiPage
		{
			display:inline-block; 
			margin-top: 20px;
			vertical-align: top; 
			text-align:left; 
			width:calc(100vw - 15px); 
			margin-right:5px;
			margin-left:10px;
			max-width: 585px; 
			height:auto;
		}
	.helpMultiPage .FlexOverflowColumn
		{
			display:flex;
			flex-wrap:wrap; 
			height:100%; 
			width:100%; 
			margin-bottom: 20px; 
			overflow-y:scroll; 
			overflow-x:hidden
		}
	.helpMultiPage .FlexOverflowColumn .FlexColumn
		{
			height:auto; 
			width:100%; 
			margin-bottom: 50px;
		}
	.helpMultiPage .PageHeader
		{
			width:98%; 
			height:auto; 
			text-align:center; 
			margin-left:auto; 
			margin-right:auto; 
			font-weight: 800;
			font-size:120%;
		}
	.helpMultiPage .FlexOverflowColumn .returnToContentPage
		{
			font-size:110%; 
			margin-bottom:10px;
			font-style: italic;
			z-index:99;
			position:relative;
		}
	.helpMultiPage .TextOnlyPage
		{
			width:98%; 
			height:auto; 
			text-align:left;  
		}
	.helpMultiPage .FlexOverflowColumn .FloatText
		{
 			height:auto; 
			width:96%; 
			text-align: left;
		}
	.helpMultiPage .FlexOverflowColumn .FloatImageLeft
		{
			height:auto;
			width: 45%; 
			max-width:150px; 
			text-align:center; 
			margin-top: 10px; 
			margin-right: 5px;
			float:left; 
			border: 1px solid;
		}
	.helpMultiPage .FlexOverflowColumn .FloatImageRight
		{
			height:auto;
			width: 45%; 
			max-width:150px; 
			text-align:center; 
			margin-top: 10px; 
			float:right; 
			border: 1px solid;
		}
	.helpMultiPage .FlexOverflowColumn .CenteredImage
		{
			height:auto;
			width: 60%; 
			text-align:center; 
			margin-top: 10px; 
			border: 1px solid;
			margin-left:auto;
			margin-right:auto;
		}

	.HelpWindowClass
		{
			display:none;
			width: calc(100% - 15px);
			margin-left:10px;
			height:auto;  
			padding-bottom: 5px;
		}

	.clearfix::after {
	  content: "";
	  clear: both;
	  display: table;
	}
	
	.MenuWindow {

			position:absolute;
			top: -10%;
			right:4px;
			width: auto;
			max-width:170px;
			height:auto;
			max-height:200px;
		  	background-color: black;
			border: 1px solid #000000;
			visibility: hidden;
			border-radius: 4px;
			z-index:6;
			}		
		

		div.GPSStatusBar
		{
			position:absolute;
			height:25px;
			font-size:max(1em, 1.5vw);
			color: white;
			text-align: left;
			background-color: black; 
			border: 1px solid #000000;
			z-index:7;
			touch-action: none;
			visibility:hidden;
			display:none;

		}
		div.NotesinputBar
		{
			position:absolute;
			height:145px;
			width:90%;
			max-width: 500px;
			margin:auto;
			font-size:max(1em, 1.5vw);
			color: black;
			text-align: center;
			background-color: white; 
			border: 1px solid black;
			border-radius: 4px;
			z-index:7;
			touch-action: none;
			visibility:hidden;
			display:none;

		}
		div.aMazingTrailInputDiv
		{

			position: absolute; 
			height:auto;
			width:90%;
			max-width: 300px;
			margin-left:auto;
			margin-right:auto;
			margin:auto;
			font-size:max(1em, 1.5vw);
			color: black;
			text-align:justify;
			padding:5px;
			background-color: white; 
			border: 1px solid black;
			border-radius: 4px;
			z-index:97;
			touch-action: none;
			display:none;
			box-shadow: rgb(0 0 0 / 50%) 0px 8px 25px 10px;

		}
/* Selection switch - the box around the slider */
		.switch {
		  position: relative;
		  display: inline-block;
		  width: 50px;
		  height: 25px;
		}

		/* Hide default HTML checkbox */
		.switch input {
		  opacity: 0;
		  width: 0;
		  height: 0;
		}

		/* The slider */
		.slider {
		  position: absolute;
		  cursor: pointer;
		  top: 0;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  background-color: #ccc;


		}

		.slider:before {
		  position: absolute;
		  content: "";
		  height: 20px;
		  width: 20px;
		  left: 4px;
		  bottom: 3px;
		  background-color: white;


		}
		.slideranimation {
		  position: absolute;
		  cursor: pointer;
		  top: 0;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  background-color: #ccc;
		  -webkit-transition: .4s;
		  transition: .4s;

		}

		.slideranimation:before {
		  position: absolute;
		  content: "";
		  height: 20px;
		  width: 20px;
		  left: 4px;
		  bottom: 3px;
		  background-color: white;
		 -webkit-transition: .4s;
		  transition: .4s;

		}
		input:checked + .slider {
		  background-color: #2196F3;
		}

		input:focus + .slider {
		  box-shadow: 0 0 1px #2196F3;
		}

		input:checked + .slider:before {
		  -webkit-transform: translateX(20px);
		  -ms-transform: translateX(20px);
		  transform: translateX(20px);
		}

		/* Rounded sliders */
		.slider.round {
		  border-radius: 34px;
		}

		.slider.round:before {
		  border-radius: 50%;
		}
		a.link
			{
				font-size:100%;
				color: white;
				text-decoration: none;
				cursor: pointer;
			}
		a:hover 
			{
			background-color: white;
			}
		
		a.menulink:link
			{
				font-size:90%;
				color: black;
				text-decoration: none;
				cursor: pointer;				
			}
		a.menulink:visited
			{
				font-size:90%;
				color: black;
				text-decoration: none;
				cursor: pointer;				
			}
		a.menulink:hover
			{
				font-size:90%;
				color: black;
				text-decoration:underline;
				font-weight: bold;
				cursor: pointer;				
			}			

	label.cameraButton {
			left:10px;
			width: 90px;
			height:28px;
		  	padding: 1px;
			color: white;
		  	text-align: center;
		  	text-decoration: none;
		  	display: inline-block;
			position:relative;
		  	font-size: 100%;
			border: 2px solid #000000;
			background-color: #555555;
			text-decoration-color: white;
			border-radius: 4px;
			transition-duration: 0s;
			cursor: pointer;
	}

	/* This is the part that actually hides the 'Choose file' text box for camera inputs */
	label.cameraButton input[accept*="camera"] 
	{
	  display: none;
	}
/*
	div.zappar-placement-ui {
            position: absolute;
            bottom: 30px;
            width: 200px;
            left: calc(50% - 100px);
            background-color: rgba(0, 0, 0, 0.8);
            color: white;
            text-align: center;
            font-family: sans-serif;
            padding: 10px;
            border-radius: 5px;
            cursor: pointer;
			}
*/

/* Selection switch - the box around the slider */
		.switch {
		  position: relative;
		  display: inline-block;
		  width: 50px;
		  height: 25px;
		}

		/* Hide default HTML checkbox */
		.switch input {
		  opacity: 0;
		  width: 0;
		  height: 0;
		}

		/* The slider */
		.slider {
		  position: absolute;
		  cursor: pointer;
		  top: 0;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  background-color: #ccc;


		}

		.slider:before {
		  position: absolute;
		  content: "";
		  height: 20px;
		  width: 20px;
		  left: 4px;
		  bottom: 3px;
		  background-color: white;


		}
		.slideranimation {
		  position: absolute;
		  cursor: pointer;
		  top: 0;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  background-color: #ccc;
		  -webkit-transition: .4s;
		  transition: .4s;

		}

		.slideranimation:before {
		  position: absolute;
		  content: "";
		  height: 20px;
		  width: 20px;
		  left: 4px;
		  bottom: 3px;
		  background-color: white;
		 -webkit-transition: .4s;
		  transition: .4s;

		}
		input:checked + .slider {
		  background-color: #2196F3;
		}

		input:focus + .slider {
		  box-shadow: 0 0 1px #2196F3;
		}

		input:checked + .slider:before {
		  -webkit-transform: translateX(20px);
		  -ms-transform: translateX(20px);
		  transform: translateX(20px);
		}

		/* Rounded sliders */
		.slider.round {
		  border-radius: 34px;
		}

		.slider.round:before {
		  border-radius: 50%;
		}

@keyframes slideright
		{
			from {left:0px;}
			to {left: 100%}
		}