/*
 *	Name: 
 *	Package: 
 *	Version: 0.1.0
 *	@author: 
 *	@email: 
 *	@company: 
 *	Start Date: //
 *	Release Date: -
 *
*/

@font-face {
	font-family: 'IcoMoon';
	src: url('../fonts/IcoMoon-Free.ttf');
}

@font-face {
	font-family: 'ideologic';
	src: url('../fonts/ideologic-minimal.ttf');
	font-weight: bold;
}

*:focus {
	outline-color: transparent;
}

.hidden {
	display: none;
}

span.IcoMoon {
	font-family: 'IcoMoon';
	margin-left: 0.2em;
}

span.IcoMoon.orange {
	color: #F4C400;
}

span.mobile {
	display: none;
}

span.desktop {
	font-size: 0.78em;
	padding: 0.2em 0.4em;
	border: 1px solid #F4C400;
}

span.desktop:after {
	content: '\f078';
	font-family: 'FontAwesome';
	color: #F4C400;
	padding-left: 0.3em;
}

#navigation.no-transition {
	transition: none;
}

html, body {
	width: 100%;
	height: 100%;
	font-size: 14px;
	font-family: 'Lato', sans-serif;
	overflow: hidden;
}

#container {
	width: 100%;
	height: 100%;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-direction: column;
}

#top {
	background: #005587;
	height: 4em;
	line-height: 4em;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	color: white;
	white-space: nowrap;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex: 0 0 auto;
	flex-direction: row;
	-webkit-transition: height 0.5s;
	transition: height 0.5s;
}

#container.full #top {
	height: 0;
}

#container.hash #top,
#container.hash #navigation {
	-webkit-transition: none;
	transition: none;
}

#bottom {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-direction: row;
	-webkit-flex: 0 1 100%;
	-moz-flex: 0 1 100%;
	-ms-flex: 0 1 100%;
	-o-flex: 0 1 100%;
	flex: 0 1 100%;
	overflow: hidden;
	position: relative;
}

#logo {
	font-family: ideologic;
	font-size: 3em;	
	padding: 0.1em 0.33em;
	box-sizing: border-box;
	background: url('../images/ideologicweb-bright.svg') no-repeat 10% center content-box;
	background-size: contain;
	min-height: 0.33em;
	-webkit-transition: margin-right 0.5s;
	transition: margin-right 0.5s;
	flex: 0 0 6.67em;
}

/*#logo:after {
	content: '-';
	color: #f4c400;
	margin-left: -0.07em;
}*/

#container.full #logo {
	margin-right: -6.67em;
}

#container.full #content {
	width: 100%;
}

#content {
	flex: 1 1 auto;
	padding: 0 1em;
	box-sizing: border-box;
	position: relative;
	max-height: 100%;
	-webkit-transition: width 0.5s;
	transition: width 0.5s;
}

#content:after {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	padding-bottom: 9999em;
	margin-bottom: -9999em;
	z-index: 4;
	box-shadow: 0 0 30px 3px rgba(0,0,0,0.5);
}

#title-bar {
	width: 100%;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: space-between;
}

#title-bar button:hover,
#title-bar button:active {
	text-shadow: none;
}

#title-bar h1 {
	font-size: 1.5em;
}

#title-bar #desc:after {
	content: '\f078';
	font-family: 'FontAwesome';
}

#title-bar #desc.active:before,
#title-bar #desc.active:after,
#title-bar #desc:hover:after {
	color: #F4C400;
}

#title-bar #desc {
	box-sizing: border-box;
	cursor: default;
}

#title-bar #desc-label {
	padding-right: 0.3em;
}

#navigation scrollbox.smArth-hideV > .smArth-content {
	padding-right: 0;
}

#navigation.scrolled scrollbox.smArth-active:after {
	content: '';
	height: 3.6em;
	left: 0;
	top: 0;
	right: 0;
	display: block;
	position: absolute;
	z-index: 8;
	-webkit-transition: background 0.5s;
	transition: background 0.5s;
	background: -moz-linear-gradient(top,  rgba(0,85,135,1) 0%, rgba(0,85,135,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(0,85,135,1) 0%,rgba(0,85,135,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(0,85,135,1) 0%,rgba(0,85,135,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005587', endColorstr='#00005587',GradientType=0 ); /* IE6-9 */

}

#navigation scrollbox > .smArth-content {
	box-sizing: border-box;
	padding-right: 1em;
	transition: padding 0.2s ease 0s;
}

#navigation scrollbox.smArth-active {
	height: 100%;
	width: 100%;
}

#navigation scrollbox.smArth-active.smArth-modern-dark-gray {
	padding-right: 0;
}

#navigation scrollbox.smArth-active.smArth-modern-dark-gray > .smArth-scrollBar-v, 
#navigation scrollbox.smArth-active.smArth-modern-dark-gray > .smArth-scrollBar-h {
	background: #98caec;
	z-index: 10;
}

#navigation scrollbox.smArth-active.smArth-modern-dark-gray > .smArth-scrollBar-v > .smArth-scrollBar, 
#navigation scrollbox.smArth-active.smArth-modern-dark-gray > .smArth-scrollBar-h > .smArth-scrollBar {
	background: #005587;
	border: 3px solid #98caec;
	border-radius: 0;
}

#navigation scrollbox.smArth-active.smArth-modern-dark-gray > .smArth-scrollBar-v:hover > .smArth-scrollBar,
#navigation scrollbox.smArth-active.smArth-modern-dark-gray > .smArth-scrollBar-h:hover > .smArth-scrollBar {
	background: #109de0;
}

#navigation {
	height: 100%;
	flex: 0 0 20em;
	background: #005587;
	position: relative;
	-webkit-transition: margin-right 0.5s;
	transition: margin-right 0.5s, width 0.5s;
	box-sizing: border-box;
	margin-right: 0;
}

#container.full #navigation {
	margin-right: -20em;
}

#navigation ul li {
	position: relative;
}

#navigation ul li a {
	text-align: left;
	text-decoration: none;
	color: #ddd;
	box-sizing: border-box;
	border-top: 1px solid #98caec;
	color: #ffffff;
	display: block;
	padding: 1.3em 2em;
	position: relative;
	transform-origin: right top;
	transition: transform 0.2s;
}

#navigation ul li a:hover {
	background: #187aa8;
}

#navigation ul li.active + li > a {
	border-top-color: transparent;
}

#navigation ul li.active a {
	background-color: #f4c400;
	color: #005587;
	border-color: transparent;
	/*transform: skewY(0.5deg);*/
	z-index: 7;
}

#navigation ul li:before,
#navigation ul li:after {
	content: '';
	display: none;
	height: 1em;
	left: 0;
	right: 0;
	position: absolute;
	z-index: 6;
	transition: transform 0.2s;
}

#navigation ul li:before {
	bottom: 0;
	transform-origin: left bottom;
	box-shadow: 0 0.5em 1em rgba(0,0,0,0.5);
}

#navigation ul li:after {
	top: 0;
	transform-origin: left top;
	box-shadow: 0 0 1em rgba(0,0,0,0.5);
}

#navigation ul li.active:before {
	display: block;
	transform: skewY(-4deg);
}

#navigation ul li.active:after {
	opacity: 1;
	transform: skewY(4deg);
}

#navigation ul li:last-child a {
	border-bottom: 1px solid #98caec;
}

#view {
	position: relative;
	-webkit-transition: width 0.5s;
	transition: width 0.5s;
	border-top: 1px solid #f4c400;
	border-right: 2px solid #f4c400;
	/*overflow: hidden;*/
	z-index: 5;
	text-align: right;
	background: #FFFFFF;
	flex: 1 1 auto;
}

progressBar.smArth-active {
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -1.5em;
	padding: 0;
	width: 3em;
	height: 3em;
}

#container.full #view {
	width: 100%;
	border: none;
}

#iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	background: #FFFFFF;
	top: 0;
	left: 0;
}

#iframe.loaded {
	-webkit-transition: opacity 1s;
	transition: opacity 1s;
	opacity: 1;
}

.tutorialoff .tutorial.show {
	display: none;
}

.tutorial {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: none;
	background: rgba(255,255,255,0.9);
}

.tutorial.show {
	display: block;
}

.tutorial .mobile {
	display: none;
}

.tutorial .desktop .menu {
	position: absolute;
	min-width: 1em;
	min-height: 4.4em;
	margin: 0.2em;
	box-sizing: border-box;
	top: 0;
	bottom: 0;
	right: 0;
	padding: 0.5em 0 1.8em 0;
	font-size: 2.3em;
	opacity: 0.25;
	background: url('/resources/pictures/bracket-top.svg') right top / 1em 0.62em no-repeat padding-box,
				url('/resources/pictures/bracket-middle.svg') right center / 1em 100% no-repeat content-box,
				url('/resources/pictures/bracket-bottom.svg') right bottom / 1em 1.88em no-repeat padding-box;
}

.tutorial .desktop .menu-desc,
.tutorial .desktop .close-tut {
	position: absolute;
	right: 5em;
	width: 34.98em;
	opacity: 0.25;
	max-width: 50%;
}

.tutorial .desktop .menu-desc {
	bottom: 0;
	padding-bottom: 4em;
}

.tutorial .desktop .close-tut {
	bottom: 0;
	padding-bottom: 1em;
}

.tutorial .desktop .close-tut:before {
	content: 'Close Tutorial';
	display: block;
	padding: 0.5em 1em;
	line-height: 1em;
	float: left;
	background: #3d3d3d;
	border-radius: 0.2em;
	color: #FFFFFF;
	cursor: default;
}

.tutorial .desktop .close-tut.visible:hover:before {
	background: #000000;
}

.tutorial .desktop .summary {
	position: absolute;
	top: 1.5em;
	right: 5em;
	width: 36.5em;
	max-width: 50%;
}

.tutorial .desktop .title-desc{
	position: absolute;
	top: 1.5em;
	left: 5em;
	width: 14.36em;
	max-width: 25%;
}

.tutorial .desktop .menu.visible,
.tutorial .desktop .menu-desc.visible,
.tutorial .desktop .close-tut.visible {
	opacity: 1;
}

#change-screen-size:before {
	font-family: 'IcoMoon';
	font-size: 2em;
	color: #ffffff;
	cursor: default;
}

#change-screen-size {
	font-size: 0.75em;
	background: #005587;
	padding: 1em;
	position: fixed;
	top: 0;
	right: 0;
	margin: 0.5em 1.5em;
	border: 1px solid transparent;
	border-radius: 0.5em;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
	z-index: 2;
	min-width: 2em;
	text-align: center;
}

#change-screen-size:before {
	content: '\ea0f';
}

#container.full #change-screen-size:before {
	/*content: '\ea3f';*/
	content: 'i';
	font-family: ideologic;
}

#container.full #change-screen-size {
	opacity: 0.5;
}

#container.full #change-screen-size:hover {
	opacity: 1;
}

#change-screen-size:hover {
	border-color: rgba(255,255,255,0.5);
}

#info {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.9);
	color: white;
	line-height: 3em;
	height: 0;
	-webkit-transition: height 0.5s;
	transition: height 0.5s;
	overflow-y: scroll;
}

#info.open {
	height: 100%;
}

#info .center {
	max-width: 700px;
	height: 100%;
	margin: 0 auto;
	text-align: left;
}

#info .center h1 {
	font-size: 3em;
	margin: 1em 0;
}

#info .center .project-image {
	background-size: 100%;
	width: 100%;
	height: 15em;
}

#info .center .project-image:empty {
	display: none;
}

#info .center .project-details {
	font-size: 1.5em;
	margin: 1em 0;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

#info .center .project-description p {
	margin: 1em 0;
}

#info .center .project-details .client:before,
#info .center .project-details .duration:before,
#info .center .project-details .price:before  {
	font-family: "IcoMoon";
}

#info .center .project-details .client:before {
	content: '\e976';
}

#info .center .project-details .duration:before {
	content: '\e94e';
}

#info .center .project-details .price:before {
	content: '\e93c';
}

#info .center .project-description {
	line-height: 1.2em;
	font-size: 1.3em;
}

#info .center .project-skills {
	margin-top: 1em;
	font-size: 1.5em;
}

#info .center .project-skills h3:before {
	content: '\e936';
	font-family: 'IcoMoon';
	margin-right: 0.3em;
}

#info .center .project-skills h3 {
	margin: 0;
	margin-bottom: 0.5em;
}

#info .center .project-skills .skill-container{
	line-height: 1;
}

#info .center .project-skills span {
	background: #fff;
	color: #000;
	font-size: 0.75em;
	margin: 0 0.5em 0.5em 0;
	padding: 0.2em 0.5em;
	line-height: 1.2;
	display: inline-block;
}

#mobile-button-container {
	display: none;
}

.test-overflow {
	overflow: hidden;
}

@media only screen and (max-aspect-ratio: 4/3){

	span.mobile {
		display: inline;
	}

	span.desktop {
		display: none;
	}

	#iframe {
		font-size: 0.85em;
	}

	#container:not(.full) #top {
		flex-direction: column;
		height: auto;
	}

	#title-bar #desc {
		width: 2em;
		text-align: center;
	}

	#title-bar #desc.disabled {
		opacity: 0.5;
	}

	#title-bar #desc:after {
		content: '';
	}

	#title-bar #desc:before {
		content: '\ea0c';
		font-family: 'IcoMoon';
		cursor: default;
	}

	#desc-label {
		display: none;
	}

	#mobile-button:before {
		font-family: 'FontAwesome';
		color: #ffffff;
		cursor: default;
		-webkit-transition: all 0.5s;
		transition: all 0.5s;
	}

	#mobile-button:before {
		content: '\f0c9';
	}

	#mobile-button-container.active #mobile-button:before {
		content: '\f00d';
	}

	#mobile-button-container {
		display: block;
		width: 2em;
		text-align: center;
	}

	#logo {
		order: 1;
		width: 100%;
		background-position: center center;
		flex: 0 0 1.5em;
		margin-top: 0.3em;
	}

	#content {
		order: 2;
	}

	#title-bar {
		width: 100%;
	}

	#navigation {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 10;
		transform: translateX(-100%);
		-webkit-transition: transform 0.5s;
		transition: transform 0.5s;
	}

	#navigation.mobileview {
		transform: translateX(0);
	}

	#view {
		width: 100%;
		border-right: none;
		background: #005587;
	}

	#change-screen-size {
		display: none;
	}

	.tutorial .desktop {
		display: none
	}

	.tutorial .mobile {
		display: block;
	}

	.tutorial .mobile .svg {
		position: absolute;
		top: 0;
	}

	.tutorial .mobile .svg.menu {
		left: 0;
		opacity: 0.5;
	}

	.tutorial .mobile .svg.menu.visible {
		opacity: 1;
	}

	.tutorial .mobile .svg.summary {
		right: 0;
	}

	#info .center {
		width: 100%;
		padding: 1em;
		box-sizing: border-box; 
	}

	#info .center h1 {
		text-align: center;
	}

	#info .center .project-description {
		text-align: justify;
	}

	#navigation scrollbox.smArth-active.smArth-modern-dark-gray > .smArth-scrollBar-v > .smArth-scrollBar, 
	#navigation scrollbox.smArth-active.smArth-modern-dark-gray > .smArth-scrollBar-h > .smArth-scrollBar {
		border-width: 1px;
	}

	#navigation scrollbox.smArth-active.smArth-modern-dark-gray:not([scroll="horizontal"]) > .smArth-scrollBar-v {
		width: 0.5em;
	}

	#navigation scrollbox > .smArth-content {
		padding-right: 0.5em;
	}

}

@media only screen and (max-device-width: 20cm) and (min-aspect-ratio: 4/3){

	body {
		font-size: 0.6em;
	}

	#view .tutorial {
		font-size: 0.75em;
	}

	#iframe {
		font-size: 0.85em;
	}

	#info .center {
		width: 100%;
		padding: 1em;
		box-sizing: border-box; 
	}

	.tutorial .desktop .title-desc {
		left: 8%;
	}

	#navigation scrollbox.smArth-active.smArth-modern-dark-gray > .smArth-scrollBar-v > .smArth-scrollBar, 
	#navigation scrollbox.smArth-active.smArth-modern-dark-gray > .smArth-scrollBar-h > .smArth-scrollBar {
		border-width: 1px;
	}

	#navigation scrollbox.smArth-active.smArth-modern-dark-gray:not([scroll="horizontal"]) > .smArth-scrollBar-v {
		width: 0.5em;
	}

	#navigation scrollbox > .smArth-content {
		padding-right: 0.5em;
	}
}

@media only screen and (max-device-width: 10cm) and (orientation: portrait){
	#title-bar {
		font-size: 0.8em;
	}

	#title-bar #desc:before {
		font-size: 1.5em;
	}

	#mobile-button:before {
		font-size: 1.5em;
	}

	#logo {
		font-size: 2.5em;
	}

	#info .center {
		font-size: 0.7em;
	}

}