/* @group --- BROWSER FIXES | IE 9-10 ---*/

@media screen and (min-width:0\0) {  

	#hero {
		background-image: url('/img/common/hero-People_1960px.png');
	}

	article {
		background: white;
	}

	blockquote q:before,
	blockquote q:after { font-size: 1.4rem !important; }



/* @group --- BASIC HTML ELEMENTS ---*/

body {
	color: hsl(214, 39%, 40%);
}

h1, h2, h3 {
	color: hsl(209, 51%, 70%);
}

hr {
	border-top: 1px solid hsl(209, 51%, 70%);
}

a:link {
	color: hsl(214, 39%, 40%);
}

	a:visited {
		color: hsl(214, 39%, 40%);
	}

		a:focus,
		a:hover {
			color: hsl(209, 51%, 70%);
		}
		
			a:active { color: hsl(200, 76%, 40%); }

/* @end */



/* @group --- STICKY FOOTER + WRAPPERS + RESPONSIVE TYPE ---*/

body {
	background: hsla(209, 51%, 70%, 0.2);
}

	footer {
		background: hsl(0, 0%, 100%);
		border-bottom: 0.5rem solid hsla(209, 51%, 70%, 0.2);
	}

header > div,
nav#menuTop,
article,
footer > div {
	max-width: 1400px;
}

/* @end */



/* @group --- HEADER ---*/

	header #logo {
		filter: drop-shadow(0px 0px 6px hsl(0, 0%, 100%));
	}

		header #logo > a {
			color: hsl(214, 39%, 40%);
		}
		
				header #logo:hover > a {
					color: hsl(200, 76%, 40%);
				}
			
					header #logo:active > a {
						color: hsl(200, 76%, 40%);
					}

/* @end */



/* @group --- CONTENT ---*/

main {
	background: hsl(0, 0%, 100%);
}

			article ul li::before {
				color: hsl(209, 51%, 70%);
			}
	
/* @end */



/* @group --- FOOTER ---*/

		footer .contact .iconCircle {
			background-color: hsl(214, 39%, 40%);
		}
	
		footer .address > span {
			color: hsl(200, 76%, 40%);
		}
	
/* @end */



/* @group --- CLASSES | Various ---*/
	
.note {
	color: hsl(214, 39%, 40%);
}


/*--- #Quotes ---*/

blockquote {
	background: hsla(209, 51%, 70%, 0.2);
}

	blockquote q:before,
	blockquote q:after {
		color: hsl(209, 51%, 70%);
	}
	
	blockquote cite {
		color: hsl(214, 39%, 40%);
	}

/*--- #Buttons ---*/

	input#submit,
	.buttonIcon,
	.button {
		background: hsl(209, 51%, 70%);
		color: hsl(0, 0%, 100%);
	}
	
		input#submit:hover,
		.buttonIcon:hover,
		.button:hover {
			background-color: hsl(200, 76%, 40%);
			color: hsl(0, 0%, 100%);
		}

			input#submit:active,
			.buttonIcon:active,
			.button:active {
				background-color: hsl(214, 39%, 40%);
				color: hsl(0, 0%, 100%);
			}

/* @end */



/* @group --- ICONS ---*/
	
.iconCircleMedium:link,
.iconCircleMedium:visited,
.iconCircleMedium,
.iconCircleBig:link,
.iconCircleBig:visited,
.iconCircleBig,
.iconCircle {
	background: hsl(209, 51%, 70%);
}

			a.iconCircleMedium:hover,
			.iconCircleMedium:hover,
			a.iconCircleBig:hover,
			.iconCircleBig:hover,
			.iconCircle:hover {
				background-color: hsl(200, 76%, 40%);
			}

			.iconCircleMedium:active,
			.iconCircleBig:active,
			.iconCircle:active {
				background-color: hsl(209, 51%, 70%) !important;
				color: hsl(200, 76%, 40%) !important;
			}

/* @end */



/*--- NAVIGATION ---*/

		nav#menuTop ul li a,
		nav#menuTop ul li a:visited {
			background-color: hsl(209, 51%, 70%);
		}

				nav#menuTop ul li a:hover {
					background-color: hsl(200, 76%, 40%);
				}
		
					nav#menuTop ul li a:active {
						color: hsl(200, 76%, 40%);
						box-shadow: inset 0px 0px 25px hsl(200, 76%, 40%);
					}

	#ScrollTop {
		background-color: hsla(209, 51%, 70%, 0.2);
	}

		#ScrollTop:hover {
			background-color: hsla(200, 76%, 40%, 1.0);
		}

/* @end */



/* @group --- FORMS ---*/

::-webkit-input-placeholder { color: hsl(209, 51%, 70%); }
::-moz-placeholder { color: hsl(209, 51%, 70%); }
:-moz-placeholder { color: hsl(209, 51%, 70%); }
:-ms-input-placeholder { color: hsl(209, 51%, 70%); }
::placeholder { color: hsl(209, 51%, 70%); }

section#Contact {
	background: hsl(0, 2%, 94%);
}

	form legend {
		color: hsl(209, 51%, 70%);
	}
	
	form label {
		color: hsl(209, 51%, 70%);
	}
	
	form input,
	form textarea,
	form select {
		border: 2px solid hsl(209, 51%, 70%);
		color: hsl(214, 39%, 40%);
	}
	
		form input:focus,
		form textarea:focus,
		form select:focus {
			border-color: hsl(200, 76%, 40%);
			color: hsl(200, 76%, 40%);
		}
	
			form input:focus + label,
			form textarea:focus + label { color: hsl(200, 76%, 40%); }

	.form_error:focus,
	.form_error {
		border: 2px solid hsl(0, 50%, 50%) !important;
	}
			
/* @end */



	/*--- DEBUG ---*/
/* 		body { border-top: 10px solid hsl(0, 50%, 50%); } */


}
/* @end */





/* @group --- BROWSER FIXES | IE 10-11 ---*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

	#hero {
		background-image: url('/img/common/hero-People_1960px.png'), linear-gradient(hsla(200, 70%, 100%, 0.0), hsla(200, 70%, 100%, 0.2) 15%, hsla(200, 70%, 100%, 0.2) 75%, hsla(200, 70%, 100%, 1.0) 85%);
	}

}
/* @end */