/* JFR Banner Moods */
.bannerCenterJackPhoto
{
	display: inline-block;
	position: relative;
	width: 175px;
	height: 200px;
	overflow: hidden;
	border-radius: 50%;
	box-shadow: 0px 0px 250px #BF5FFF;
	border:2px solid #FFFFFF;
}

.bannerCenterLaptopIconPhoto
{
	display: inline-block;
	position: relative;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background-color: rgba(248, 247, 216, 0.225);
	box-shadow: 0px 0px 250px #BF5FFF;
	border:2px solid #FFFFFF;
}

.bannerCenterEducationGlobePhoto
{
	display: inline-block;
	position: relative;
	width: 150px;
	height: 150px;
	overflow: hidden;
	border-radius: 50%;
	background-image: radial-gradient(#ff2400 25%, transparent 90%, transparent 100%);
	box-shadow: 0px 0px 25px rgba(255, 36, 0, 0.6);
	border:0px solid #FFFFFF;
}

/* JFR Banner Moods */


#largeTopTextBanner
{
	font-family: verdana;
	font-size: 2vw;
	color: #000000;
	border: 2px solid;
	background-color: black;
	border-color: coral;
	display: inline-block;
	/*    height: 60px;    */
}

#largeBottTextBanner
{
	font-family: verdana;
	font-size: 2vw;
	color: #000000;
	border: 2px solid;
	background-color: black;
	border-color: coral;
	display: inline-block;
	/*    height: 60px;    */
}
/* Banner */

	#banner {
		padding: 4em 0 4em 0;																												/* TOP HEIGHT HERE */
		background-color: #1E2832;
		color: rgba(255, 255, 255, 0.75);
		background-attachment: fixed;
		/* Apply The Image in HTML File: background-image: url("../../images/banner-images/main-banner.png"); */
		background-size: cover;
		background-position: center; /* Center the image */
		text-align: center;
	}

		#banner input, #banner select, #banner textarea {
			color: #fff;
		}

		#banner a {
			color: #51BAA4;
		}

		#banner strong, #banner b {
			color: #fff;
		}

		#banner h1, #banner h2, #banner h3, #banner h4, #banner h5, #banner h6 {
			color: #fff;
		}

		#banner blockquote {
			border-left-color: transparent;
		}

		#banner code {
			background: rgba(255, 255, 255, 0.05);
			border-color: transparent;
		}

		#banner hr {
			border-bottom-color: transparent;
		}

		#banner input[type="submit"],
		#banner input[type="reset"],
		#banner input[type="buttonBanner"],
		#banner buttonBanner,
		#banner .buttonBanner {
			background-color: #fff;
			box-shadow: none;
			color: #1E2832 !important;
		}

			#banner input[type="submit"].icon:before,
			#banner input[type="reset"].icon:before,
			#banner input[type="buttonBanner"].icon:before,
			#banner buttonBanner.icon:before,
			#banner .buttonBanner.icon:before {
				color: #a5a9ad;
			}

			#banner input[type="submit"]:hover,
			#banner input[type="reset"]:hover,
			#banner input[type="buttonBanner"]:hover,
			#banner buttonBanner:hover,
			#banner .buttonBanner:hover {
				background-color: white;
			}

			#banner input[type="submit"]:active,
			#banner input[type="reset"]:active,
			#banner input[type="buttonBanner"]:active,
			#banner buttonBanner:active,
			#banner .buttonBanner:active {
				background-color: #f2f2f2;
			}

			#banner input[type="submit"].special,
			#banner input[type="reset"].special,
			#banner input[type="buttonBanner"].special,
			#banner buttonBanner.special,
			#banner .buttonBanner.special {
				background-color: #51BAA4;
				box-shadow: none;
				color: #fff !important;
			}

				#banner input[type="submit"].special:hover,
				#banner input[type="reset"].special:hover,
				#banner input[type="buttonBanner"].special:hover,
				#banner buttonBanner.special:hover,
				#banner .buttonBanner.special:hover {
					background-color: #63c1ae;
				}

				#banner input[type="submit"].special:active,
				#banner input[type="reset"].special:active,
				#banner input[type="buttonBanner"].special:active,
				#banner buttonBanner.special:active,
				#banner .buttonBanner.special:active {
					background-color: #45ad97;
				}

			#banner input[type="submit"].alt,
			#banner input[type="reset"].alt,
			#banner input[type="buttonBanner"].alt,
			#banner buttonBanner.alt,
			#banner .buttonBanner.alt {
				background-color: transparent;
				box-shadow: inset 0 0 0 2px #fff;
				color: #fff !important;
			}

				#banner input[type="submit"].alt:hover,
				#banner input[type="reset"].alt:hover,
				#banner input[type="buttonBanner"].alt:hover,
				#banner buttonBanner.alt:hover,
				#banner .buttonBanner.alt:hover {
					background-color: rgba(255, 255, 255, 0.05);
				}

				#banner input[type="submit"].alt:active,
				#banner input[type="reset"].alt:active,
				#banner input[type="buttonBanner"].alt:active,
				#banner buttonBanner.alt:active,
				#banner .buttonBanner.alt:active {
					background-color: rgba(255, 255, 255, 0.1);
				}

		#banner h2 {
			font-size: 2.5em;
			margin: 0 0 0.5em 0;
			padding: 0;
		}

		#banner p {
			color: #fff;
			font-size: 1.5em;
			margin-bottom: 1.75em;
			text-transform: uppercase;
		}

		#banner .icon {
			border-radius: 100%;
			border: solid 2px #fff;
			color: #fff;
			display: inline-block;
			font-size: 3em;																													/* ICON SIZEEEEE */
			height: 2.25em;
			line-height: 1.25em;
			margin-bottom: 0.5em;
			padding: 0.5em;
			width: 2.25em;
		}





		@media screen and (max-width: 1680px) {

			#banner {
				padding: 4em 0 4em 0;
			}

		}

		@media screen and (max-width: 1280px) {

			#banner {
				padding: 4em 0 4em 0;
			}

				#banner h2 {
					font-size: 2em;
				}

		}

		@media screen and (max-width: 980px) {

			#banner {
				padding: 4em 2em 4em 2em;
			}

		}

		@media screen and (max-width: 736px) {

			#banner {
				padding: 2em 2em 3em 2em;
			}

				#banner h2 {
					font-size: 1.5em;
				}

				#banner p {
					font-size: 1em;
				}

				#banner .icon {
					font-size: 2em;
				}

		}

		@media screen and (max-width: 480px) {

			#banner {
				padding: 2em 2em 3em 2em;
			}

				#banner .icon {
					font-size: 1.5em;
				}

		}



/* Actions */


				ul.actions {
					cursor: default;
					list-style: none;
					padding-left: 0;
				}

					ul.actions > li {
						display: inline-block;
						padding: 0 1em 0 0;
						vertical-align: middle;
					}

						ul.actions > li:last-child {
							padding-right: 0;
						}

					ul.actions.small > li {
						padding: 0 0.5em 0 0;
					}

					ul.actions.vertical > li {
						display: block;
						padding: 1em 0 0 0;
					}

						ul.actions.vertical > li:first-child {
							padding-top: 0;
						}

						ul.actions.vertical > li > * {
							margin-bottom: 0;
						}

					ul.actions.vertical.small > li {
						padding: 0.5em 0 0 0;
					}

						ul.actions.vertical.small > li:first-child {
							padding-top: 0;
						}

					ul.actions.fit {
						display: table;
						margin-left: -1em;
						padding: 0;
						table-layout: fixed;
						width: calc(100% + 1em);
					}

						ul.actions.fit > li {
							display: table-cell;
							padding: 0 0 0 1em;
						}

							ul.actions.fit > li > * {
								margin-bottom: 0;
							}

						ul.actions.fit.small {
							margin-left: -0.5em;
							width: calc(100% + 0.5em);
						}

							ul.actions.fit.small > li {
								padding: 0 0 0 0.5em;
							}

					@media screen and (max-width: 480px) {

						ul.actions {
							margin: 0 0 2em 0;
						}

							ul.actions > li {
								padding: 1em 0 0 0;
								display: block;
								text-align: center;
								width: 100%;
							}

								ul.actions > li:first-child {
									padding-top: 0;
								}

								ul.actions > li > * {
									width: 100%;
									margin: 0 !important;
								}

									ul.actions > li > *.icon:before {
										margin-left: -2em;
									}

							ul.actions.small > li {
								padding: 0.5em 0 0 0;
							}

								ul.actions.small > li:first-child {
									padding-top: 0;
								}

					}





/* OTHER TEST  */

/* ButtonBanner */

	input[type="submit"],
	input[type="reset"],
	input[type="buttonBanner"],
	buttonBanner,
	.buttonBanner {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		border-radius: 2.5em;
		border: 0;
		cursor: pointer;
		display: inline-block;
		font-weight: 700;
		height: 2.85em;
		line-height: 2.95em;
		min-width: 10em;
		padding: 0 1.5em;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		white-space: nowrap;
	}

		input[type="submit"].icon,
		input[type="reset"].icon,
		input[type="buttonBanner"].icon,
		buttonBanner.icon,
		.buttonBanner.icon {
			padding-left: 1.35em;
		}

			input[type="submit"].icon:before,
			input[type="reset"].icon:before,
			input[type="buttonBanner"].icon:before,
			buttonBanner.icon:before,
			.buttonBanner.icon:before {
				margin-right: 0.5em;
			}

		input[type="submit"].fit,
		input[type="reset"].fit,
		input[type="buttonBanner"].fit,
		buttonBanner.fit,
		.buttonBanner.fit {
			display: block;
			margin: 0 0 1em 0;
			width: 100%;
		}

		input[type="submit"].small,
		input[type="reset"].small,
		input[type="buttonBanner"].small,
		buttonBanner.small,
		.buttonBanner.small {
			font-size: 0.8em;
		}

		input[type="submit"].big,
		input[type="reset"].big,
		input[type="buttonBanner"].big,
		buttonBanner.big,
		.buttonBanner.big {
			font-size: 1.2em;
			height: 3.25em;
			line-height: 3.25em;
			padding: 0 2.5em;
		}

		input[type="submit"].disabled, input[type="submit"]:disabled,
		input[type="reset"].disabled,
		input[type="reset"]:disabled,
		input[type="buttonBanner"].disabled,
		input[type="buttonBanner"]:disabled,
		buttonBanner.disabled,
		buttonBanner:disabled,
		.buttonBanner.disabled,
		.buttonBanner:disabled {
			cursor: default;
			opacity: 0.25;
		}

		@media screen and (max-width: 980px) {

			input[type="submit"].big,
			input[type="reset"].big,
			input[type="buttonBanner"].big,
			buttonBanner.big,
			.buttonBanner.big {
				font-size: 1em;
			}

		}

		@media screen and (max-width: 480px) {

			input[type="submit"],
			input[type="reset"],
			input[type="buttonBanner"],
			buttonBanner,
			.buttonBanner {
				padding: 0;
			}

		}

	input[type="submit"],
	input[type="reset"],
	input[type="buttonBanner"],
	buttonBanner,
	.buttonBanner {
		background-color: #25383B;
		box-shadow: none;
		color: #fff !important;
	}

		input[type="submit"].icon:before,
		input[type="reset"].icon:before,
		input[type="buttonBanner"].icon:before,
		buttonBanner.icon:before,
		.buttonBanner.icon:before {
			color: #999;
		}

		input[type="submit"]:hover,
		input[type="reset"]:hover,
		input[type="buttonBanner"]:hover,
		buttonBanner:hover,
		.buttonBanner:hover {
			background-color: #2f474b;
		}

		input[type="submit"]:active,
		input[type="reset"]:active,
		input[type="buttonBanner"]:active,
		buttonBanner:active,
		.buttonBanner:active {
			background-color: #1b292b;
		}

		input[type="submit"].special,
		input[type="reset"].special,
		input[type="buttonBanner"].special,
		buttonBanner.special,
		.buttonBanner.special {
			background-color: #51BAA4;
			box-shadow: none;
			color: #fff !important;
		}

			input[type="submit"].special:hover,
			input[type="reset"].special:hover,
			input[type="buttonBanner"].special:hover,
			buttonBanner.special:hover,
			.buttonBanner.special:hover {
				background-color: #63c1ae;
			}

			input[type="submit"].special:active,
			input[type="reset"].special:active,
			input[type="buttonBanner"].special:active,
			buttonBanner.special:active,
			.buttonBanner.special:active {
				background-color: #45ad97;
			}

		input[type="submit"].alt,
		input[type="reset"].alt,
		input[type="buttonBanner"].alt,
		buttonBanner.alt,
		.buttonBanner.alt {
			background-color: transparent;
			box-shadow: inset 0 0 0 2px #51BAA4;
			color: #51BAA4 !important;
		}

			input[type="submit"].alt:hover,
			input[type="reset"].alt:hover,
			input[type="buttonBanner"].alt:hover,
			buttonBanner.alt:hover,
			.buttonBanner.alt:hover {
				background-color: rgba(144, 144, 144, 0.075);
			}

			input[type="submit"].alt:active,
			input[type="reset"].alt:active,
			input[type="buttonBanner"].alt:active,
			buttonBanner.alt:active,
			.buttonBanner.alt:active {
				background-color: rgba(144, 144, 144, 0.2);
			}
