/* GENERICS */
html, body, div, p{
	padding:0px;
	margin:0px;
}
.singleProjectWhole
{
	/* animation: scaleUp 0.5s; */
	/* animation: fadein 0.5s; */
}

body{
	overflow-x:hidden;
	display:flex;
	flex-direction:row;
	justify-content:flex-start;
}
a{
	color:#f8bbd0;
}
.pre, pre{
	white-space: pre-line;
}
.flexColumns{
	display:flex;
	justify-content:space-around;
	flex-direction:row;
	flex-wrap: wrap;
}
details > summary{
  list-style: none;	
}
details > summary::-webkit-details-marker {
  display: none;
}
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes scaleUp {
    0% {
        transform: scale(100%, 0%);
    }
    100% {
        transform: scale(100%, 100%);
    }
}
summary:focus {outline:0;}

/* FONT FACING */
@font-face{
	src:url('res/titanium_bold1.ttf');
	font-family: 'Titanium Bold';
}
@font-face{
	src:url('res/titanium_light1.ttf');
	font-family: 'Titanium Light';
}
@font-face{
	src:url('res/titanium_medium1.ttf');
	font-family: 'Titanium Regular';
}
.tb{
	font-family: 'Titanium Bold';
}
.tl{
	font-family: 'Titanium Light';
}
.tr{
	font-family: 'Titanium Regular';
}
/*
@font-face{
	src:url('res/seguiemj.ttf');
	font-family: 'Segoe Emoji';
}
*/

/* CLASSES */
.skills div{
	margin-top:0px !important;
	width:100%;
	flex-grow:1;
}
.bigHeader{
	background-color:BACKCOLOR;
	color:#ecf0f1;
	text-align:right;
	padding:80px;
	padding-left:30px;
	position:relative;
	cursor: crosshair;
	user-select: none;
	height:100%;
	max-width: 300px;
	position:fixed;
}
.bigHeader .name{
	font-family: 'Titanium Bold';
	font-weight:bold;
	font-size:72px;
	position:relative;
	z-index:1;
}
.bigHeader .subtext{
	font-family: 'Titanium Light';
	font-size:24px;
	position:relative;
	z-index:1;
}
.mainPartParent{
	padding-left:480px;
	display:flex;
	justify-content:flex-start;
	background-color:#ecf0f1;
	color:BACKCOLOR;
	padding-bottom:64px;
	width:100%;
}
.mainPart{
	height:100%;
	max-width:calc(100% - 80px);
	min-width:950px;
	display:flex;
	flex-direction:column;
	justify-content:center;
    line-height: 1.6;
}
.biography{
	text-align:right;
	padding-bottom:18px;
}
.detailFilmElement{
	cursor:pointer;
	padding-bottom:0px !important;
	margin:6px;
	padding:6px;
	width:192px;
	height:96px;
}
.detailFilmElementPreview{
	overflow: hidden;
    max-width: 100%;
    max-height: 100%;
    height: auto;
}
iframe.detailFilmElementPreview{
	width:100%; 
	height:100%;
}
.projectDetailZoom{
	height:530px;
	min-width:950px;
   text-align:center;
}
.detailFilmElement iframe{
  pointer-events: none;
}
.projectFilmContainer{
	text-align:center;
	margin-top:0px !important;
	padding-top:12px;
	padding-bottom:12px;
    background-color:#ecf0f1;
}
.projectFilmContainer img, .projectFilmContainer video{
	border:1px solid BACKCOLOR;
}
.projectDetailsContainer, .projectDetailsContainer div, .projectDetailsContainer p, .detailFilmElement{
    transition: background 0.25s ease-in-out;
}
.projectDetailsContainer:hover, .detailFilmElement:hover{
    background-color:#d3dcde;
	color:BACKCOLOR;
}
.projectClickHint{
	font-family:'Titanium Bold';
	font-size:18px;
	background-color:BACKCOLOR;
	color:#ecf0f1;
	border-top-left-radius:20px;
	border-top-right-radius:20px;
	position:absolute;
	left:0%;
	bottom:0px;
	width:100%;
	opacity:0;
    transition: opacity 0.2s ease-in-out;
}
.projectDetailsContainer:hover .projectClickHint{
	background-color:HIGHLIGHTCOLOR;
	color:BACKCOLOR;
	opacity:1;
    transition: opacity 0.2s ease-in-out;
}
.singleProjectWhole{
	margin-bottom:24px;
}
.singleProject{
	display:flex;
	flex-direction:row;
	justify-content:space-between;
}
.mainPart div{
	margin-top:16px;
}
.projectImg{
	margin:0px	!important;
	width:192px;
	height:192px;
	border:1px solid BACKCOLOR;
    flex-shrink: 0;
	font-family: 'Titanium Light';
	font-size:18px;
	text-align:center;
	position:relative;
}
.projectText, .projectDetails{
	font-family: 'Titanium Light';
	margin:0px !important;
	padding:6px;
	padding-left:16px;
	flex-grow:1;
	position:relative;
	background:rgba(0,0,0,0.05);
}
.projectSubtitle{
	margin:0px	!important;
	font-family: 'Titanium Light';
	font-size:18px;
}
.projectType{	/* Small blue box */
	position:absolute;
	right:0;
	bottom:0;
	text-align:right;
	font-weight:bold;
	font-family:'Titanium Bold';
	color:#ecf0f1;
	background-color:BACKCOLOR;
	padding:8px;
	padding-top:1px;
	padding-bottom:1px;
}
.projectFlag{
	margin:0px !important;
	position:absolute;
	right:0;
	top:0;
	text-align:right;
	display:flex;
	height:20px;
	flex-direction:row;
	justify-content:flex-end;
	border-left:1px solid BACKCOLOR;
	border-bottom:1px solid BACKCOLOR;
	padding-bottom:8px;
	padding-left:8px;
}
.projectFlag img, .projectFlag div{
	margin-top:0px;
	font-family: 'Titanium Light';
	font-size:18px;
	margin-right:8px;
}
.projectFlag img{
	width:16px;
	height:12px;
}
.projects .title{
	font-size:48px;
	border-bottom:1px dotted BACKCOLOR;	
}
.projectText .title{
	font-size:32px;
	border:0;
}
.title{
	font-family: 'Titanium Bold';
	font-weight:bold;
	font-size:32px;
	line-height:normal;
}
.text, ul{
	font-family: 'Titanium Light';
	font-size:18px;
	flex-grow:1;
}
ul{
	list-style-type:cjk-ideographic;
	line-height:250%;
}
.download{
	margin:0px !important;
	position:absolute;
	bottom:0;
	right:0;
	text-align:right;
	height:38px;
}
.download button{
	height:38px;
}
.projectPreviewImg{
	position:absolute;
	top:0;
	left:0;
	height:100%;
}
.projectPreviewImgWide{
	position:absolute;
	opacity:0.25;
	top:0;
	left:0;
	height:100%;
	 -webkit-mask-image:-webkit-gradient(linear, left top, right top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))
}


/*	Download Anim	*/
.downloadButton{
	padding-left:32px;
	padding-right:32px;
	font-family:'Titanium Bold';
	font-size:24px;
	background-color:inherit;
    transition: linear 0.25s;
	color:#ecf0f1;
	background-color:BACKCOLOR;
	z-index:3;
	border:0;
	align-items: safe center;
	text-transform: uppercase;
	letter-spacing: 2px;
}
.downloadButton:hover{
	cursor:pointer;
	color:inherit;
	color:#ecf0f1;
	background-color:HIGHLIGHTCOLOR;
}

.bigHeader div, .bigHeader .downloadButton{
	z-index: 1;
	position:relative;
}

.bigHeader .downloadButton{
	color:BACKCOLOR;
	background-color:#ecf0f1;
}

.downloadLinks{
	z-index:2;
	margin:0px !important;
	width:100%;
	text-align:left;
	position:absolute;
	left:0;
	top:100%;
	color:#ecf0f1;
	background-color:BACKCOLOR;
}
.downloadLink{
	font-family: 'Titanium Light';
	word-wrap: break-word;
	padding-left:8px;
	padding-right:8px;
	padding-top:4px;
	padding-bottom:4px;
}
.downloadLink a:hover{
	color:HIGHLIGHTCOLOR;
}
div.imadethis {
	position: fixed;
	left: 0px;
	bottom: 0;
	padding: 8px;
	text-align: left;
}
details[open] summary.downloadButton ~ * {
  animation: openAnimation 0.3s LINEAR;
}

@keyframes openAnimation {
  0%    {opacity: 0; margin-bottom: -16px}
  100%  {opacity: 1; margin-bottom: 0px}
}

/*	Filterer	*/
.projectsFilterer{
	margin-top:0px 				!important;
	justify-content:flex-start;
	margin-bottom:12px;
}
.projectsFiltererButton{
	flex-grow:0;
	margin-right:12px;
	border:1px solid BACKCOLOR	;
	background-color:#ecf0f1 	;
	color:BACKCOLOR 				;
    transition: linear 0.25s	;
}
.projectsFiltererButton:hover{
	cursor:pointer;
	color:#ecf0f1	!important;
	background-color:HIGHLIGHTCOLOR	!important;
}
.brightOnDark
{
	color:#ecf0f1;
	background-color:BACKCOLOR;
}
.darkOnBright
{
	color:BACKCOLOR;
	background-color:#ecf0f1;
}

/*	CONTACT */
.contactInfos{
	position:fixed;
	top:0px;
	right:0px;
	text-align:right;
	background-color:BACKCOLOR;
	color:#ecf0f1;
	font-family:"Verdana", "Ms Sans serif";
	font-size:10px;
	padding:10px;
	margin:5px;
	border-radius:10px;
	background-color:BACKCOLOR;
}

.imadethis, .contactInfos{
	text-align:right;
	color:#ecf0f1;
	font-family:"Verdana", "Ms Sans serif";
	font-size:10px;
}

/*FOOTER*/
.footer{
	text-align:center;
	background-color:BACKCOLOR;
	/*BACKGROUND: linear-gradient(to bottom, #ecf0f1, BACKCOLOR);	this gradient is ugly 	*/
	color:#ecf0f1;
	font-family:"Verdana", "Ms Sans serif";
	font-size:10px;
	padding:10px;
	margin:0px;
}
.projectDetailsSubContainer{
	padding-left:15px;
	padding-right:15px;
}

/* Phones */
@media (max-aspect-ratio: 9/16)
{
	.bigHeader{
		text-align:center;
		max-width:none;
		height:auto;
		top:0;
		left:0;
		right:0;
		bottom:auto;
		position:absolute;
	}
	
	.mainPartParent{
		padding: 0;
		padding-top:480px;
		padding-bottom:480px;
	}

	.bigHeader .biography
	{
		position: initial;
	}

	.biography ul
	{
		position: absolute;
		bottom:0;
		left:0;
		right:0;
		padding:20px;
		margin:0;
		background-color: BACKCOLOR;
		list-style-type:none;
		line-height:150%;
	}
}