@import url("https://fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic,400,400italic");
      
	footer {
		padding-top: 1.5em;
	}

	br.clear {
		clear: both;
	}

	.featured {
		text-align: center;
	}

		.featured p {
			text-align: center;
		}

/* Container */

	.container {
		margin: 0 auto;
		max-width: 100%;
		width: 1360px;
	}

		.container.medium {
			width: 1020px;
		}

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

			.container {
				width: 1200px;
			}

				.container.medium {
					width: 900px;
				}

		}

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

			.container {
				width: 960px;
			}

				.container.medium {
					width: 720px;
				}

		}

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

			.container {
				width: 100% !important;
			}

		}


/* Sections/Article */

	section,
	article {
		margin-bottom: 3em;
	}

	section > :last-child,
	article > :last-child,
	section:last-child,
	article:last-child {
		margin-bottom: 0;
	}

	.row > section,
	.row > article {
		margin-bottom: 0;
	}


/* List */

	ul {
		list-style: disc;
		padding-left: 1em;
	}

		ul li {
			padding-left: 0.5em;
		}

	ol {
		list-style: decimal;
		padding-left: 1.25em;
	}

		ol li {
			padding-left: 0.25em;
		}

/* Icons */

	ul.icons {
		cursor: default;
		list-style: none;
		padding-left: 0;
	}

		ul.icons li {
			display: inline-block;
			padding-left: 0.75em;
		}

		ul.icons a {
			-moz-transition: background-color 0.25s ease-in-out;
			-webkit-transition: background-color 0.25s ease-in-out;
			-ms-transition: background-color 0.25s ease-in-out;
			transition: background-color 0.25s ease-in-out;
			display: inline-block;
			width: 2.75em;
			height: 2.75em;
			line-height: 2.8em;
			text-align: center;
			border: 0;
			box-shadow: inset 0 0 0 1px #e6e6e6;
			border-radius: 100%;
			color: #aaa;
		}

			ul.icons a:hover {
				background: rgba(0, 0, 0, 0.025);
			}

/* Menu */


.topnav {
	overflow: hidden;  text-align:right; padding-right:60px; 
  }
  
  @media screen and (max-width: 700px) { .topnav { display:none; } }

  
  
  /* Style the links inside the navigation bar */
  .topnav a {color: #fff; text-align: center; padding: 4px 6px; text-decoration: none; font-size: 0.65em; }
  
  /* Change the color of links on hover */
  .topnav a:hover {  background-color: aqua;  color: black; text-align: center; padding: 4px 6px; text-decoration: none; font-size: 0.65em;}
  
  
  /* Style the links inside the navigation bar */
  .topnav2 a {  color: #fff;  text-align: center;  padding: 4px 6px;  text-decoration: none;  font-size: 0.65em; }
  
  /* Change the color of links on hover */
  .topnav2 a:hover {  background-color: aqua;  color: black; }
  
  /* Add a color to the active/current link */
  .topnav2 a.active { }
  
	  /* mob menu */    	
	  
		  
  #menuToggle
  {
	display: block;  position: relative;  z-index: 1;  -webkit-user-select: none;  user-select: none; font-size: 0.65em;}
  
  #menuToggle a {  transition: color 0.3s ease; }
  
  #menuToggle a:hover {  color: #008CBA; }
  
  
  #menuToggle input
  {
	display: block;  width: 36px;  height: 34px;  position: absolute;  top: -15px;  left: -10px;  cursor: pointer;
	opacity: 1; /* hide this */
	z-index: 2; /* and place it over the hamburger */
	-webkit-touch-callout: none;
  }
  
  /*
   * quick hamburger
   */
  #menuToggle span
  {
	display: block;
	width: 33px;
	height: 4px;
	margin-bottom: 5px;
	position: relative;
	background: #ffffff;
	border-radius: 3px;
	z-index: 1;
	transform-origin: 4px 0px;
	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
				background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
				opacity 0.55s ease;
  }
  
  #menuToggle span:first-child
  {
	transform-origin: 0% 0%;
  }
  
  #menuToggle span:nth-last-child(2)
  {
	transform-origin: 0% 100%;
  }
  
  /* 
   * Transform all the slices of hamburger
   * into a crossmark.
   */
  #menuToggle input:checked ~ span
  {
	opacity: 1;
	transform: rotate(45deg) translate(-2px, -1px);
	background: #666;
  }
  
  /*
   * But let's hide the middle one.
   */
  #menuToggle input:checked ~ span:nth-last-child(3)
  {
	opacity: 0;
	transform: rotate(0deg) scale(0.2, 0.2);
  }
  
  /*
   * Ohyeah and the last one should go the other direction
   */
  #menuToggle input:checked ~ span:nth-last-child(2)
  {
	transform: rotate(-45deg) translate(0, -1px);
  }
  
  /*
   * Make this absolute positioned
   * at the top left of the screen
   */
  #menumob
  {
		font-size:1.4em;  color:#fff; 
		line-height:1.5;
		position: absolute;
		width: 160px;
		margin: -60px 0 0 -60px;
		padding-left: 45px;
		padding-top: 30px;
		background: #171515;
		list-style-type: none;
		-webkit-font-smoothing: antialiased;
	/* to stop flickering of text in safari */
  
	transform-origin: 0% 0%;
	transform: translate(-100%, 0);
	
	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  }
  
  #menumob a
  { 
	  color:#fff; 
	  padding: 10px 0px 10px 20px;
  }
  
  #menumob li
  {
	padding: 10px 0px 10px 10px;
	font-size: 18px;  
  }
  
  /*
   * And let's slide it in from the left
   */
  #menuToggle input:checked ~ ul
  {
	transform: none;
  }
		  
  /* end mob menu */
  
  
	 @media screen and (min-width: 500px) {
	 #menuToggle 
	 {display:none;	}
	   }
	   
	  @media screen and (max-width: 500px) {
	 #menuToggle 
	 {display:block;	}
	   }

	ul.menu {
		cursor: default;
		list-style: none;
		padding-left: 0;
	}

		ul.menu li {
			display: inline-block;
			line-height: 1em;
			border-left: solid 1px #e6e6e6;
			padding: 0 0 0 0.5em;
			margin: 0 0 0 0.5em;
		}

			ul.menu li:first-child {
				border-left: 0;
				padding-left: 0;
				margin-left: 0;
			}

/* Actions */


/* Table */

	table {
		width: 100%;
	}

		table.default {
			width: 100%;
			border-collapse: collapse;
		}


/* Button */

	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	button,
	.button {
		-moz-transition: all 0.25s ease-in-out;
		-webkit-transition: all 0.25s ease-in-out;
		-ms-transition: all 0.25s ease-in-out;
		transition: all 0.25s ease-in-out;
		position: relative;
		display: inline-block;
		background: #3d3d3d;
		padding: 0.85em 3em 0.85em 3em;
		border-radius: 0.25em;
		cursor: pointer;
		border: 0;
		color: #fff;
		text-align: center;
		text-decoration: none;
	}




/* Feature Icon */

	.feature-icon {
		display: inline-block;
		position: relative;
		padding-bottom: 5em;
		margin-bottom: 2.75em;
		cursor: default;
	}

		.feature-icon .icon {
			display: inline-block;
			width: 2em;
			height: 2em;
			font-size: 4.5em;
			border-radius: 100%;
			box-shadow: inset 0 0 0 1px #666;
			color: #666;
			line-height: 2em;
		}

		.feature-icon:before {
			content: '';
			background: #666;
			position: absolute;
			bottom: 0;
			left: 50%;
			margin-left: -0.325em;
			width: 0.65em;
			height: 0.65em;
			display: block;
			border-radius: 100%;
		}

		.feature-icon:after {
			content: '';
			position: absolute;
			left: 50%;
			bottom: 0.65em;
			width: 1px;
			height: 4.35em;
			background: #666;
			margin-left: -0.5px;
		}

/* Icons */

	.icon {
		text-decoration: none;
		text-decoration: none;
	}

		.icon:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			display: inline-block;
			font-style: normal;
			font-variant: normal;
			text-rendering: auto;
			line-height: 1;
			text-transform: none !important;
			font-family: 'Font Awesome 5 Free';
			font-weight: 400;
		}

		.icon:before {
			line-height: inhreit;
		}

		.icon > .label {
			display: none;
		}

		.icon.solid:before {
			font-weight: 900;
		}

		.icon.brands:before {
			font-family: 'Font Awesome 5 Brands';
		}


/* Header 	 */


	#header {
	background: linear-gradient(90deg, aqua, #081735, #0c1f3b, #081d22); background-size: 150% 150%; animation: gradient 10s ease infinite; margin: 0;	padding: 0.8em 0em 2em 0em;
	}

	@media screen and (min-width: 680px) {
		#header {height: 15em;	}
	}

/* Main Sections */

	.main {
		position: relative;
		margin: 0;
	}

		.main > header {
			background: #fff;
			text-align: center;
			padding: 5em 0 5em 0;
			margin: 0;
		}

			.main > header h2 {
				font-size: 2.25em;
				font-weight: 100;
				margin-bottom: 0;
			}

			.main > header p {
				margin: 2em 0 0 0;
				padding: 0;
				text-align: center;
			}

			.main > .content {
				padding: 4em 0 4em 0;
			}

			.main > .content h3 {
				font-size: 1.5em;
			}



/* Footer */

	#footer {
		position: relative;
		margin: 0;
		text-align: center;
		padding: 4em 0 8em 0;
		box-shadow: inset 0 1px 0 0 #e6e6e6;
	}

		#footer .copyright {
			margin-top: 3em;
			font-size: 0.8em;
			color: #aaa;
		}

			#footer .copyright a {
				color: inherit;
			}

		#footer ul.icons a {
			box-shadow: inset 0 0 0 1px #d6d6d6;
		}

/* Wide */

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

		/* Basic */

			body, input, textarea, select {
				font-size: 15pt;
				line-height: 1.75em;
			}

	}

/* Normal */

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

		/* Basic */

			body, input, textarea, select {
				font-size: 13pt;
				line-height: 1.65em;
			}

		/* Feature Icon */

			.feature-icon {
				margin-bottom: 2em;
			}

		/* Header */

		/* Main Sections */

			.main > header {
				padding: 4em 0 4em 0;
			}

			.main > .content {
				padding: 4em 0 4em 0;
			}

	}

/* Narrow */

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

		/* Basic */

			header, footer, h2, h3, h4, h5, h6, header > p {
				text-align: center;
			}

		/* Sections/Article */

			section, article {
				margin: 0 0 2.5em 0 !important;
			}

			.row > section, .row > article {
				margin: 0 0 2.5em 0 !important;
			}

		/* Table */

			.table-wrapper {
				width: 100%;
				overflow-x: scroll;
				padding-left: 1px;
				-webkit-overflow-scrolling: touch;
			}



		/* Main Sections */

			.main {
				margin: 0 !important;
			}

				.main > header {
					padding: 3.5em 2em 3.5em 2em;
				}

	
					.main > header br {
						display: none;
					}

					.main > header p {
						margin: 1.5em 0 0 0;
					}

				.main > .content {
					padding: 3.5em 20px 3.5em 20px;
				}

					.main > .content > .container > :last-child {
						margin-bottom: 0 !important;
					}

		/* Footer */

			#footer {
				margin: 0 !important;
				padding: 3em 0 3em 0;
			}

				#footer .copyright {
					margin-top: 2em;
				}

	}

/* Mobile */

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

		/* Basic */

			.main {
				font-size: 0.8em;
				line-height: 1.4em;
			}

		/* Sections/Article */

			section, article {
				margin: 0 0 1.5em 0 !important;
			}

			.row > section, .row > article {
				margin: 0 0 1.5em 0 !important;
			}

		/* Button */

			.button {
				padding-left: 0;
				padding-right: 0;
				width: 100%;
				max-width: 24em;
			}

		/* Icons */

			ul.icons li {
				padding-left: 0.35em;
			}

		/* Menu */

			ul.menu li {
				border: 0;
				padding: 0;
				display: block;
				margin: 1em 0 1em 0;
			}

		/* Header */



				#header > header {
					padding: 0 1em 0 1em;
				}

		/* Main Sections */

			.main > header {
				padding: 3em 20px 3em 20px;
			}

				.main > header h2 {
					font-size: 1.5em;
				}

			.main > .content {
				padding: 3em 20px 3em 20px;
			}

				.main > .content h3 {
					font-size: 1.25em;
				}

	}
	

@media screen and (max-width: 560px) { .gone { width:40%; } }


.gone3 {border:0px; height:auto; position:fixed; top:3px; right: 8px;}
@media screen and (min-width: 551px) { .gone3 { display:none; } }


@media screen and (max-width: 720px) and (min-width: 500px){ .gone5 { display:none; } }
@media screen and (max-width: 600px) { .shift {	padding-top: 25px 15px 0px 0px; } }
@media screen and (min-width: 501px) { .tdcel {width:40%; text-align: right; } }
@media screen and (max-width: 500px) { .tdcel {width:30%; text-align: right; } }
.tdcelleft {text-align: left; }
.bannertable {width:100%; }


/* Row */

.row {
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	align-items: stretch;
}

	.row > * {
		box-sizing: border-box;
	}

	.row {
		margin-top: -50px;
		margin-left: -50px;
	}

		.row > * {
			padding: 50px 0 0 50px;
		}

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

		.row {
			display: flex;
			flex-wrap: wrap;
			box-sizing: border-box;
			align-items: stretch;
		}

			.row > * {
				box-sizing: border-box;
			}

	}

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

		.row {
			display: flex;
			flex-wrap: wrap;
			box-sizing: border-box;
			align-items: stretch;
		}

			.row > * {
				box-sizing: border-box;
			}

	}

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

		.row {
			display: flex;
			flex-wrap: wrap;
			box-sizing: border-box;
			align-items: stretch;
		}

			.row > * {
				box-sizing: border-box;
			}

			.row {
				margin-top: -25px;
				margin-left: -25px;
			}

				.row > * {
					padding: 25px 0 0 25px;
				}


				}