/* stylesheet by SophieWeb - http://sophieweb.com - 2005-18 */

html {
	background: #0A0A0B;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
*,
*::before,
*::after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}
body {
	align-items: center;
	background: #0A0A0B;
	background: linear-gradient(to bottom, #333435 0%,#0A0A0B 100%);
	color: #333435;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	font-family: Transat, sans-serif;
	font-size: 1.1rem;
	justify-content: center;
	margin: 0;
	min-height: 100%;
	min-height: 100vh;
	padding: 0;
}
#iconsSVG {
	height: 0;
	position: absolute;
	width: 0;
}
.skipNav {
	display: flex;
	justify-content: center;
	list-style-type: none;
	margin: .5rem 0 -.5rem;
	padding: 0;
	width: 50rem;
}
main + .skipNav {
	margin: -.5rem 0 0;
}
.skipNav a {
	background: #000;
	color: #5C5D5D;
	display: block;
	margin: 0 .5rem;
	padding: 0 .5rem;
	text-decoration: none;
}
.skipNav a:hover,
.skipNav a:focus,
.skipNav a:active {
	color: #FFF;
	font-weight: bold;
}
main {
	background: #F1F1F1 url("../images/waves.jpg") no-repeat 100% 100%;
	background-size: 750px 500px, contain;
	box-shadow: 0 0 20px rgba(0,0,0,.5);
	min-height: 50rem;
	margin: .5rem;
	width: 50rem;
}
header h1 {
	background: #1244B5;
	color: #fff;
}
header h1 a,
header h1 span {
	color: #fff;
	display: block;
	display: flex;
	height: 5.5rem;
}
header h1 svg {
	fill: #fff;
	margin: auto;
	width: 20rem;
}
nav ul {
	background: #FFF;
	display: flex;
	justify-content: space-around;
	flex-wrap: nowrap;
	list-style-type: none;
	list-style-image: none;
	margin: 0;
	padding: 0;
}
nav li {
	height: 3.25rem;
	overflow: hidden;
	position: relative;
}
nav li svg {
	fill: #333435;
	left: 50%;
	position:absolute;
	z-index: 1;
}
nav li a {
	cursor: pointer;
	display: block;
	height: 3.25rem;
	text-decoration: none;
	white-space: nowrap;
}
nav li a span {
	display: block;
	font-variant: small-caps;
	position: absolute;
	text-align: center;
	text-shadow: 0 0 5px #FFF;
	width: 100%;
	z-index: 2;
}
nav li a:link {
	color: #333435;
}
nav li a:visited {
	color: #6B6B6C;
}
nav li a:hover,
nav li a:active,
nav li a:focus {
	background: linear-gradient(to bottom, #FFF 0%,#F1F1F1 100%);
}
#homePage #home a:after,
#projectsPage #projects a:after,
#clientsPage #clients a:after,
#aboutPage #about a:after,
#contactPage #contact a:after {
	animation: .5s .1s ease-in-out animCurrentNav;
	animation-fill-mode: forwards;
	bottom: 0;
	content: "";
	border-bottom: 1px solid #124485;
	display: block;
	position: absolute;
	z-index: 3;
}
@keyframes animCurrentNav {
	0% {
		left: 49%;
		right: 49%;
	}
	100% {
		left: 0;
		right: 0;
	}
}
nav > p {
	font-size: .9rem;
	margin: 1rem 0 -1rem;
}
nav > p a {
	text-decoration: none;
}
nav > p a:link {
	color: #0E3691;
}
nav > p a:visited {
	color: #5C5D5D;
}
nav > p a:hover,
nav > p a:focus,
nav > p a:active {
	color: #000;
	text-decoration: underline;
}

main section.infoBlock {
	background: rgba(255,255,255,.5);
	margin: 2rem;
	padding: .3em .6rem;
}
main section img {
	border: 1px solid #FFF;
	padding: 2px;
}
main section a {
	text-decoration: none;
}
main section a:link {
	color: #0E3691;
}
main section p a:link,
main section ul a:link {
	border-bottom: 1px solid #4169C4;
}
main section a:visited {
	color: #5C5D5D;
}
main section p a:visited,
main section ul a:visited {
	border-bottom: 1px solid #99999A;
}
main section a:hover,
main section a:active,
main section a:focus {
	color: #1244B5;
	background: rgba(255,255,255,.5);
	box-shadow: 0 0 4px #FFF;
}
main section p a:hover,
main section p a:active,
main section p a:focus,
main section ul a:hover,
main section ul a:active,
main section ul a:focus {
	border-bottom: 1px solid #FFF;
}
h1,
h2,
h3 {
	font-style: normal;
	font-weight: bold;
	margin: 0;
	padding: 0;
}
abbr {
	text-decoration: none;
}
main section h2 {
	color: #0E3691;
	font-size: 1.2rem;
	margin: 1rem 0 0;
}
main section h3 {
	color: #0E3691;
	font-size: 1rem;
	margin: .6rem 0 0;
}
main section h2 span {
	font-size: .7rem;
	font-weight: normal;
	color: #333435;
	vertical-align: super;
	padding: 0 0 0 .5em;
}
main section p {
	margin: .2em 0 1em;
}
main section h2 + p {
	margin-top: 0;
}
main section p:last-child {
	margin-bottom: 0;
}
main section .intro p {
	margin: .2em 0 1em;
	text-align: justify;
}
main section .intro svg {
	fill: #333435;
	float: left;
	height: 5rem;
	margin: 0 .5rem 0 0;
	opacity: .4;
	width: 5rem;
}
main section .intro.error {
	align-items: center;
	display: flex;
}
main section .intro.error p {
	margin: .5rem 0;
}
main section .floatingImg {
	border: 0 none;
}
main section .floatingImg.right {
	float: right;
	margin: 0 0 5px 5px;
}
main section .floatingImg.left {
	float: left;
	margin: 0 5px 5px 0;
}
main section > ul,
form > ul {
	list-style-type: none;
	margin: .2em 0 1em;
	padding: 0 0 0 1.1rem;
}
main section > ul li {
	padding-bottom: .25rem;
}
main section > ul li::before,
form > ul li::before {
	content: "";
	background: rgba(255,255,255,.5);
	border: 1px solid #0E3691;
	display: inline-block;
	height: .5rem;
	margin: 0 .6rem 0 -1.1rem;
	vertical-align: baseline;
	width: .5rem;
}
main section ul.errors li::before {
	border-color: #C00;
}
.hint {
	font-size:.8em;
}
form, fieldset {
	border:0 solid;
	padding:0;
	margin:0;
}
.formLabel {
	font-weight: bold;
	display: block;
	vertical-align: top;
}
form input,
form textarea {
	border: 1px solid #88A1DA;
	background: rgba(255,255,255,.5);
	color: #333435;
	font-family: Transat;
	font-size: 1.2rem;
	margin: 0 0 1rem;
	padding: .25rem;
}
form input:focus,
form textarea:focus {
	background: rgba(255,255,255,.75);
	box-shadow: 0 0 8px #FFF;
	outline: none;
}
form input:invalid,
form textarea:invalid,
form .error input,
form .error textarea {
	border-color: #C00;
	box-shadow: none;
}
form .error .formLabel::after {
	color: #C00;
	content: "\A0\26A0";
	display: inline-block;
}
fieldset > .formInput {
	display: block;
	margin-top: 1rem;
}
input[type="submit"],
button {
	background: #1244B5;
	border: 1px solid transparent;
	border-radius: 0;
	box-shadow: 0 0 10px #FFF;
	color: #FFF;
	cursor: pointer;
	font-size: 1.25rem;
	font-variant: small-caps;
	padding: .25rem 1rem;
	-webkit-appearance: none;
}
input[type="submit"]:hover,
input[type="submit"]:focus,
button:hover,
button:focus {
	background: #4169C4;
	border-color: #FFF;
	box-shadow: 0 0 20px #FFF;
	text-shadow: 0 1px 2px #1244B5;
}
input[type="submit"]:active,
button:active {
	background: #FFF;
	color: #1244B5;
	box-shadow: 0 0 10px #FFF;
}

footer {
	text-align: center;
}
footer p {
	margin: 0;
	padding: 2rem 0 .5rem;
	color: #5C5D5D;
	font-size: .8rem;
}
footer a {
	color: #5C5D5D;
}
footer a:hover,
footer a:focus,
footer a:active {
	text-decoration: none;
}
footer svg {
	fill: #5C5D5D;
	opacity: .33;
}
footer div {
	overflow: hidden;
}

#homePage main section[role="main"] .intro p {
	text-align: center;
}
#homePage section[role="main"] img {
	height: 100px;
	width: 100px;
}
#homePage section[role="main"] form {
	margin-top: 1rem;
	text-align: center;
}


#illusProject {
	text-align: center;
}
#illusProject ul {
	counter-reset: illusCount;
	height: calc( 250px + 5.3rem );
	list-style-type: none;
	list-style-image: none;
	margin: 0;
	overflow: hidden;
	padding: 0 0 4.7rem;
	position: relative;
	width: 641px;
}
#illusProject li {
	counter-increment: illusCount;
	display: block;
}
#illusProject a {
	background: none;
	bottom: 0;
	left: 0;
	position: absolute;
}
#illusProject a::after {
	background: #1244B5;
	bottom: 0;
	color: #FFF;
	content: counter(illusCount);
	cursor: pointer;
	display: block;
	font-size: 1.25rem;
	font-weight: bold;
	height: 3rem;
	line-height: 3.2rem;
	position: absolute;
	width: 3rem;
	z-index: 12;
}
#illusProject li:nth-child(1) a::after {
	left:0;
}
#illusProject li:nth-child(2) a::after {
	left: 3rem;
}
#illusProject li:nth-child(3) a::after {
	left: 6rem;
}
#illusProject li:nth-child(4) a::after {
	left: 9rem;
}
#illusProject li:nth-child(5) a::after {
	left: 12rem;
}
#illusProject li:nth-child(6) a::after {
	left: 15rem;
}
#illusProject li:nth-child(7) a::after {
	left: 18rem;
}
#illusProject li:nth-child(8) a::after {
	left: 21rem;
}
#illusProject img {
	border-color: #99999A;
	left: 1000px;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 0;
}
#illusProject li:nth-child(1) img {
	left: 0;
	z-index: 9;
}
#illusProject li:nth-child(2) img {
	z-index: 8;
}
#illusProject li:nth-child(3) img {
	z-index: 7;
}
#illusProject li:nth-child(4) img {
	z-index: 6;
}
#illusProject li:nth-child(5) img {
	z-index: 5;
}
#illusProject li:nth-child(6) img {
	z-index: 4;
}
#illusProject li:nth-child(7) img {
	z-index: 3;
}
#illusProject li:nth-child(8) img {
	z-index: 2;
}
#illusProject li em {
	bottom: 3.2rem;
	font-size: 1rem;
	position: absolute;
	left: -20000px;
}
#illusProject a:hover + img,
#illusProject a:active + img,
#illusProject a:focus + img {
	left: 0;
	z-index: 12;
}
#illusProject a:hover + img + em,
#illusProject a:focus + img + em {
	left: 0;
}
#illusProject a:active + img + em {
	left: -20000px;
}
#illusProject a:hover::after,
#illusProject a:focus::after {
	background: #4169C4;
}

.tableWrap {
	max-height: 35rem;
	overflow: auto;
}
table {
	background: rgba(255,255,255,.5);
	border-collapse: collapse;
	width: 100%;
}
th {
	color: #0E3691;
	background: #FFF;
	font-size: 1.2rem;
	height: 1.4rem;
	padding: .5rem .3rem .1rem;
	overflow: hidden;
	text-align:left;
}
td {
	padding: .1rem .3rem;
}
tr:nth-child(2n) td {
	background: rgba(236,236,237,.33);
}
table a {
	display: block;
	padding: .2rem 0;
	border-bottom: 1px solid transparent;
}
table a:hover,
table a:focus,
table a:active {
	border-bottom: 1px solid #4169C4;
}
th#sizeHeader,
td[headers="sizeHeader"] {
	width: 8rem;
}
th#dateHeader,
td[headers="dateHeader"] {
	width: 10rem;
}
th#nameHeader img,
td[headers="nameHeader"] img {
	display: inline-block;
	height: auto;
	margin-right: .25rem;
	vertical-align: middle;
	width: 5rem;
}

.listWrap {
	max-height: 37rem;
	overflow: auto;
}
.listWrap ul {
	background: rgba(255,255,255,.5);
	display: flex;
	flex-wrap: wrap;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.listWrap li {
	width: 33.3333%;
}
.listWrap a {
	border-bottom: 1px solid transparent;
	display: block;
	font-family: "Source Code Pro", monospace;
	padding: .3rem .6rem .3rem .3rem;
	font-variant: small-caps;
}
.listWrap li a:hover,
.listWrap li a:focus,
.listWrap li a:active {
	border-bottom: 1px solid #4169C4;
}
.listWrap a::first-letter {
	text-transform: uppercase;
}

@media ( max-width: 55em ) {
	body {
		justify-content: flex-start;
	}
	main {
		background-size: 100% auto;
		height: auto;
		min-height: 40em;
		width: 98%;
		width: calc( 100% - 1rem );
	}
	.skipNav {
		width: calc( 100% - 1rem );
	}
}
@media ( min-width: 600px ) {
	nav li svg {
		height: 5rem;
		margin-left: -2.5rem;
		opacity: .1;
		top: -.5rem;
		width: 5rem;
	}
	nav li a span {
		font-size: 1.1rem;
		line-height: 4.25rem;
		transition: line-height .5s ease-in-out;
	}
	nav li a:hover + svg,
	nav li a:active + svg,
	nav li a:focus + svg {
		margin-top: -.4rem;
		opacity: .4;
		transition: margin-top .5s ease-in-out, opacity .5s ease-in-out;
	}
	nav li a:hover span,
	nav li a:active span,
	nav li a:focus span {
		line-height: 5.5rem;
		text-shadow: 0 -1px 0 #FFF;
	}
	nav li {
		width: 16.6666%;
	}
	nav > p {
		padding: 0 2rem;
	}
	main section {
		padding: 2rem;
	}
	form > p,
	fieldset > .hint,
	form > ul {
		padding-left: 25%;
	}
	.formLabel {
		float: left;
		padding: .5rem .5rem 0 0;
		text-align:right;
		width: 25%;
	}
	.formInput {
		width: calc( 100% - 26% );
	}
	form input[type="text"],
	form input[type="email"],
	form textarea {
		width: 62.5%;
		min-width: 20rem;
	}
	fieldset > label {
		display: flex;
	}
	fieldset > .formInput {
		margin-left: 25%;
	}
	#homePage section[role="main"] > div h2 {
		margin-top: 0;
	}
	#homePage section[role="main"] > div:nth-child(n + 2) {
		align-items: center;
		display: flex;
		min-height: 110px;
	}
	#homePage section[role="main"] img {
		flex: 0 0 auto;
	}
	#homePage section[role="main"] > div:nth-child(2n) {
		padding-left: 110px;
	}
	#homePage section[role="main"] > div:nth-child(2n + 1):not(.intro) {
		padding-right: 110px;
	}
	#homePage section[role="main"] img {
		transition: all .5s;
	}
	#homePage section[role="main"] div:nth-child(2n) img {
		margin-left: 10px;
		order: 2;
		transform-origin: right center;
	}
	#homePage section[role="main"] div:nth-child(2n + 1) img {
		margin-right: 10px;
		transform-origin: left center;
	}
	#homePage section[role="main"] img:hover {
		padding: 0;
		transform: scale(2);
	}
	footer svg {
		height: 256px;
		width: 256px;
	}
	footer div {
		height: 192px;
		margin: -32px 0 0;
	}
}
@media ( max-width: 720px ) {
	#illusProject ul {
		height: auto;
		padding-bottom: 3rem;
		padding-top: calc( 40% + 2rem );
		width: 100%;
	}
	.listWrap li {
		width: 50%;
	}
}
@media ( max-width: 600px ) {
	main {
		margin: 0;
		min-height: 0;
		padding-bottom: 20px;
		width: 100%;
	}
	header h1 a,
	header h1 span {
		height: 4.5rem;
	}
	header h1 svg {
		width: 15rem;
	}
	nav li#home {
		display: none;
	}
	nav li {
		width: 20%;
	}
	nav li a {
		font-size: .7rem;
	}
	nav li svg {
		height: 3rem;
		margin-left: -1.5rem;
		opacity: .75;
		top: -.25rem;
		width: 3rem;
	}
	nav li a span {
		font-size: .7rem;
		line-height: 5.25rem;
	}
	nav > p {
		padding: 0 1rem;
	}
	main section {
		padding: 1rem;
	}
	form input[type="text"],
	form input[type="email"],
	form textarea {
		width: 100%;
	}
	#homePage #home svg,
	#projectsPage #projects svg,
	#clientsPage #clients svg,
	#aboutPage #about svg,
	#contactPage #contact svg {
		fill: #124485;
		opacity: 1;
	}
	#homePage section[role="main"] > div img {
		clear: right;
		float: right;
		margin-left: 10px;
	}
	#homePage section[role="main"] form {
		clear: right;
		text-align: left;
	}
	footer p {
		padding: .5rem 0;
		text-align: center;
	}
	footer svg {
		height: 128px;
		width: 128px;
	}
	footer div {
		height: 96px;
		margin: -16px 0 0;
	}
	.listWrap {
		max-height: initial;
	}
	.listWrap li {
		width: 100%;
	}
}
@media ( max-width: 500px ) {
	#illusProject ul {
		display: flex;
		margin-left: -1rem;
		margin-right: -1rem;
		overflow-x: auto;
		padding: 0;
		width: calc( 100% + 2rem );
	}
	#illusProject li {
		flex: 0 0 auto;
		width: 100%;
	}
	#illusProject img {
		position: static;
		width: 100%;
	}
	#illusProject a {
		position: static;
	}
	#illusProject a::after {
		display: none;
	}
	#illusProject li em {
		position: static;
	}
}

@media ( prefers-color-scheme: dark ) {
	body {
		color: #fff;
	}
	main {
		background-color: #2B2B2B;
		background-image: url("../images/waves-dark.jpg");
	}
	nav ul {
		background: #000;
	}
	nav li svg {
		fill: #D0D4D9;
	}
	nav li a:link {
		color: #D0D4D9;
	}
	nav li a:visited {
		color: #A8A8AB;
	}
	nav li a:hover,
	nav li a:active,
	nav li a:focus {
		background: linear-gradient(to bottom, #000 0%,#141414 100%);
	}
	nav > p a:link {
		color: #88A1DA;
	}
	nav > p a:visited {
		color: #B2B2B2;
	}
	nav > p a:hover,
	nav > p a:focus,
	nav > p a:active {
		color: #FFF;
	}
	main section.infoBlock {
		background: rgba(0,0,0,.5);
	}
	main section img {
		border-color: #000;
	}
	main section a:link {
		color: #88A1DA;
	}
	main section a:visited {
		color: #B2B2B2;
	}
	main section p a:visited,
	main section ul a:visited {
		border-color: #6C6C6C;
	}
	main section a:hover,
	main section a:active,
	main section a:focus {
		color: #5A81DC;
		background: rgba(0,0,0,.5);
		box-shadow: 0 0 4px #000;
	}
	main section p a:hover,
	main section p a:active,
	main section p a:focus,
	main section ul a:hover,
	main section ul a:active,
	main section ul a:focus {
		border-color: #000;
	}
	main section h2,
	main section h3 {
		color: #88A1DA;
	}
	main section h2 span {
		color: #D0D4D9;
	}
	main section .intro svg {
		fill: #D0D4D9;
	}
	main section > ul li::before,
	form > ul li::before {
		background: rgba(0,0,0,.5);
		border-color: #88A1DA;
	}
	form input,
	form textarea {
		border-color: #0E3691;
		background: rgba(0,0,0,.5);
		color: #D0D4D9;
	}
	form input:focus,
	form textarea:focus {
		background: rgba(0,0,0,.75);
		box-shadow: 0 0 8px #000;
	}
	input[type="submit"],
	button {
		box-shadow: 0 0 10px #000;
	}
	input[type="submit"]:hover,
	input[type="submit"]:focus,
	button:hover,
	button:focus {
		border-color: #000;
		box-shadow: 0 0 20px #000;
	}
	input[type="submit"]:active,
	button:active {
		box-shadow: 0 0 10px #000;
	}
	footer p {
		color: #B2B2B2;
	}
	footer svg {
		fill: #B2B2B2;
	}
	#illusProject a::after {
		background: #5A81DC;
		color: #000;
	}
	#illusProject img {
		border-color: #6C6C6C;
	}
	table {
		background: rgba(0,0,0,.5);
	}
	th {
		color: #88A1DA;
		background: #000;
	}
	tr:nth-child(2n) td {
		background: rgba(20,20,20,.33);
	}
	.listWrap ul {
		background: rgba(0,0,0,.5);
	}
}

@media ( prefers-color-scheme: dark ) and ( max-width: 600px ) {
	#homePage #home svg,
	#projectsPage #projects svg,
	#clientsPage #clients svg,
	#aboutPage #about svg,
	#contactPage #contact svg {
		fill: #5A81DC;
	}
}