@charset "utf-8";
/* CSS Document */
@media (min-width: 1200px) and (min-device-width: 1200px) {
	.card#references {
		width: 1150px;
		max-width: 1600px;
		height: 250px;
		flex-direction: row;
	}
	
	.card#references .topimg {
		width: 35%;
		height: 100%;	
	}
	
	.card#references .card_content {
		display: flex;
		flex-direction: column;
		width: 65%;
	}
}

@media (max-width: 1200px), (max-device-width: 1200px) {
	header {
		background: none;
		box-shadow: none;	
	}
	
	#logo:hover {
		padding-left: 20px;
	}
	
	#navicon {
		display: inline-block;
		width: 40px;
		height: 40px;
		position: relative;
		margin: 10px 0;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: .5s ease-in-out;
		-moz-transition: .5s ease-in-out;
		-o-transition: .5s ease-in-out;
		transition: .5s ease-in-out;
		cursor: pointer;
	}
	
	#navicon.open {
		margin-bottom: 15px;	
	}
	
	#navicon span {
		display: block;
		position: absolute;
		height: 2px;
		width: 100%;
		background: #666;
		opacity: 1;
		left: 0;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: .25s ease-in-out;
		-moz-transition: .25s ease-in-out;
		-o-transition: .25s ease-in-out;
		transition: .25s ease-in-out;
	}
	
	#navicon span:nth-child(1) {
		top: 8px;
		-webkit-transform-origin: left center;
		-moz-transform-origin: left center;
		-o-transform-origin: left center;
		transform-origin: left center;
	}
	
	#navicon span:nth-child(2) {
		top: 18px;
		-webkit-transform-origin: left center;
		-moz-transform-origin: left center;
		-o-transform-origin: left center;
		transform-origin: left center;
	}
	
	#navicon span:nth-child(3) {
		top: 28px;
		-webkit-transform-origin: left center;
		-moz-transform-origin: left center;
		-o-transform-origin: left center;
		transform-origin: left center;
	}
	
	#navicon.open span:nth-child(1) {
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
		top: 6px;
		left: 8px;
	}
	
	#navicon.open span:nth-child(2) {
		width: 0%;
		opacity: 0;
	}
	
	#navicon.open span:nth-child(3) {
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
		top: 34.3px;
		left: 8px;
	}
	
	nav {
		position: absolute;
		background: #F2F2F2;
		top: 0;
		right: 0;
		z-index: 98;
		width: 100%;
		box-shadow: 0 3px 5px rgba(0,0,0,0.3);
	}
	
	nav a {
		height: auto;
		max-height: 0;
		padding: 0;
		max-width: 0;
		display: flex;
		box-shadow: inset -4px 0 transparent;
		opacity: 0;
		justify-content: flex-end;
	}
	
	#navicon.open ~ a {
		max-width: 1200px;
		max-height: 45px;
		padding: 15px;
		transition: color .25s, background .25s, box-shadow .25s, padding-top .5s, padding-bottom .5s, max-height .5s, opacity .5s, margin .5s;
		opacity: 1;
	}
	
	nav a.current, nav:hover a.current:hover, nav:hover a:hover:active {
		box-shadow: inset -4px 0 #FF9100;
	}
	
	nav:hover a.current {
		box-shadow: inset -4px 0 #555;
	}
	
	nav:hover a:hover {
		box-shadow: inset -4px 0 #FF9100;
	}
	
	#navicon.open ~ a:last-child {
		margin-bottom: 20px;	
	}
	
	.boxed_list {
		max-width: 100%;
	}
	
	.img:hover div:not(.infobox) {
		transform: none !important;
	}
	
	.dark.em_exit {
		background: linear-gradient(to right,rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.3) 100%), url('/img/em_exit.jpg');
		background-size: cover;
		background-position: center center;
	}
}

@media (max-width: 800px), (max-device-width: 800px) {
	h1 {
		font-size: 28pt;
	}
	
	.text {
		margin: 25px 10px;
	}
	
	.img {
		flex-direction: column;
	}
	
	.img div:not(.infobox) {
		height: 250px;
	}
	
	.img .infobox {
		width: auto;
		padding: 40px;
		min-width: auto;
	}
	
	.img .infobox.left {
		order: 1;
	}
	
	.img .infobox.left::before {
		transform: skewY(3deg);
		transform-origin: 100% 100%;
	}
	
	.img .infobox.right::before {
		transform: skewY(-3deg);
		transform-origin: 0 0;
	}
}

@media (max-width: 500px), (max-device-width: 500px) {	
	h1 {
		font-size: 26pt;
		word-wrap: break-word;
	}
	
	.boxed_item	{
		min-width: 200px;
		max-width: 100%;
		word-wrap: break-word;
	}
	
	.boxed_item h3 {
		font-size: 16pt;
	}
	
	.card {
		min-width: 250px;
		margin: 0 10px 30px;
	}
	
	#logo {
		height: 34px;
		padding: 8px 8px 8px 10px;	
	}
	
	#logo:hover {
		padding-left: 10px;
	}
	
	#logo::after {
		border-width: 50px 10px 0 0;
		margin-right: -10px;
	}
	
	#logo img {
		height: 34px;
	}
	
	#navicon {
		margin: 0;
		transform: scale(0.625);
	}
	
	#navicon span {
		transform: scaleY(1.6);
	}
	
	.contact {
		min-width: 250px;
	}
}