/* CSS Document */
/* Banner */

	#banner {
		background-color: #7a1c78;
		color: rgba(255, 255, 255, 0.75);
		padding: 10em 0 6em 0 ;
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;
		background-attachment: fixed;
		background-image: url("/VMS/PublicFiles/image/crm.jpg");
		background-position: bottom left;
		background-size: cover;
		border-top: solid 15px #7a1c78;
		min-height: 75vh;
		position: relative;
		text-align: center;
		width: 100%;
	}

		#banner input, #banner select, #banner textarea {
			color: #ffffff;
		}

		#banner a {
			color: #ffffff;
		}

		#banner strong, #banner b {
			color: #ffffff;
		}

		#banner h1, #banner h2, #banner h3, #banner h4, #banner h5, #banner h6 {
			text-align:left;
			color: #ffffff;
			margin-bottom: 10em;
		}

		#banner blockquote {
			border-left-color: rgba(255, 255, 255, 0.25);
		}

		#banner code {
			background: rgba(255, 255, 255, 0.075);
			border-color: rgba(255, 255, 255, 0.25);
		}

		#banner hr {
			border-bottom-color: rgba(255, 255, 255, 0.25);
		}

		#banner input[type="submit"],
		#banner input[type="reset"],
		#banner input[type="button"],
		#banner button,
		#banner .button {
			background-color: #7a1c78;
			box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75);
			color: #ffffff !important;
		}

			#banner input[type="submit"]:hover,
			#banner input[type="reset"]:hover,
			#banner input[type="button"]:hover,
			#banner button:hover,
			#banner .button:hover {
				background-color: rgba(255, 255, 255, 0.075);
			}

			#banner input[type="submit"]:active,
			#banner input[type="reset"]:active,
			#banner input[type="button"]:active,
			#banner button:active,
			#banner .button:active {
				background-color: rgba(255, 255, 255, 0.2);
			}

			#banner input[type="submit"].icon:before,
			#banner input[type="reset"].icon:before,
			#banner input[type="button"].icon:before,
			#banner button.icon:before,
			#banner .button.icon:before {
				color: rgba(255, 255, 255, 0.5);
			}

			#banner input[type="submit"].special,
			#banner input[type="reset"].special,
			#banner input[type="button"].special,
			#banner button.special,
			#banner .button.special {
				box-shadow: none;
				background-color: #ffffff;
				color: #7a1c78 !important;
			}

				#banner input[type="submit"].special.icon:before,
				#banner input[type="reset"].special.icon:before,
				#banner input[type="button"].special.icon:before,
				#banner button.special.icon:before,
				#banner .button.special.icon:before {
					color: #7a1c78 !important;
				}

		#banner > .inner {
			-moz-transition: -moz-transform 0.75s ease-in-out, opacity 0.75s ease-in-out;
			-webkit-transition: -webkit-transform 0.75s ease-in-out, opacity 0.75s ease-in-out;
			-ms-transition: -ms-transform 0.75s ease-in-out, opacity 0.75s ease-in-out;
			transition: transform 0.75s ease-in-out, opacity 0.75s ease-in-out;
			position: relative;
			width: 60em;
			max-width: calc(100% - 6em);
			z-index: 1;
		}

		#banner .icon {
			display: inline-block;
			background-color: white;
			border-radius: 100%;
			color: #7a1c78;
			font-size: 3.75em;
			height: 1.6em;
			line-height: 1.5em;
			margin-bottom: 0.75em;
			width: 1.6em;
		}

		#banner h1 {
			margin-bottom: 0.825em;
		}

		#banner p {
			font-size: 1.5em;
			margin-bottom: 1.75em;
		}

		#banner .actions {
			border-top: solid 1px rgba(255, 255, 255, 0.25);
			padding-top: 3.5em;
		}

		#banner:before {
			-moz-transition: opacity 1s ease-in-out;
			-webkit-transition: opacity 1s ease-in-out;
			-ms-transition: opacity 1s ease-in-out;
			transition: opacity 1s ease-in-out;
			-moz-transition-delay: 0.75s;
			-webkit-transition-delay: 0.75s;
			-ms-transition-delay: 0.75s;
			transition-delay: 0.75s;
			content: '';
			display: block;
			background: #202020;
			height: 100%;
			left: 0;
			opacity: 0.25;
			position: absolute;
			top: 0;
			width: 100%;
		}

		body.is-loading #banner > .inner {
			-moz-transform: translateY(0.75em);
			-webkit-transform: translateY(0.75em);
			-ms-transform: translateY(0.75em);
			transform: translateY(0.75em);
			opacity: 0;
		}

		body.is-loading #banner:before {
			opacity: 1;
		}

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

			#banner {
				min-height: 75vh;
			}

		}

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

			#banner {
				padding: 6em 0 3em 0 ;
				background-attachment: scroll;
			}

		}

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

			#banner {
				padding: 10em 0 6em 0 ;
			}

				#banner .icon {
					margin-bottom: 0.5em;
				}

		}

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

			#banner {
				padding: 5em 0 2em 0 ;
			}

				#banner > .inner {
					max-width: calc(100% - 3em);
				}

				#banner .icon {
					font-size: 3.25em;
				}

				#banner .actions {
					padding-top: 2em;
				}

		}

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

			#banner {
				padding: 4em 0 1em 0 ;
			}

		}