html {
	height: 100%;
	background-image: -webkit-repeating-linear-gradient(90deg, #aaa, #aaa 25%, transparent 25%, transparent 50%, #aaa 50%);
	background-image: -moz-repeating-linear-gradient(90deg, #aaa, #aaa 25%, transparent 25%, transparent 50%, #aaa 50%);
	background-image: -ms-repeating-linear-gradient(90deg, #aaa, #aaa 25%, transparent 25%, transparent 50%, #aaa 50%);
	background-image: -o-repeating-linear-gradient(90deg, #aaa, #aaa 25%, transparent 25%, transparent 50%, #aaa 50%);
	background-image: repeating-linear-gradient(90deg, #aaa, #aaa 25%, transparent 25%, transparent 50%, #aaa 50%);
	background-size: 8px 8px;
}

body { 
	height: 100%;
	font-family: "Rokkitt", sans-serif;
	background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 80%, rgba(255,255,255,0) 100%);
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 20%,rgba(255,255,255,1) 80%,rgba(255,255,255,0) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 20%,rgba(255,255,255,1) 80%,rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 );
}

header { text-align:center; }
header img { position: absolute; top: -1000px; left: -1000px; visibility: hidden; }

div.intro { width: 80%; margin:0 auto; }
div.intro p { margin-bottom: 15px; text-align: center; }

nav.main-nav { position: absolute; top:190px; left:50%; width:500px; margin-left:-250px; text-align: center; z-index:2;}
nav ul li { display: inline; position: relative; padding: 0 10px; }
nav ul li a { font-size: 22px; font-family: "Sirin Stencil", sans-serif; text-transform: uppercase; text-decoration: none; color: #515151;}
nav ul li a:hover { text-decoration: underline;}

nav ul li:after { content:''; display: block; position: absolute; left:50%; top: 80%; margin: -3px 0 0 -3px; width: 6px; height: 6px; border-radius: 100px; background: #000; opacity: 0; transition:all 0.2s ease-in-out;}
nav ul li.active:after { opacity: 1; top: 120%;}

div.contents { position: absolute; top: 240px; left: 50%; width: 1000px; height:600px; margin-left:-500px; z-index: 3; }
div.contents > div.content {  position:absolute; width:inherit; top:5%; left:0; opacity: 0; transition:all 0.6s ease-in-out; pointer-events: none;}
div.contents > div.content.displayed { top:0%; opacity: 1; pointer-events: all;}
div.contents > div.content.hide { display: none;}

.flashs { width: 500px; margin:0px auto 0 auto; }
.flashs .flash { width: 100%; padding: 5px 10px; background:#EEE; text-align: center; border-radius: 5px; }
.flashs .flash-success { background: #dbfddb; }
.flashs .flash-error { background: #fddbdb; }
.flashs .flash-info { background: #dbf3fd; }

nav.sub-nav { text-align: center; font-size: 15px;}
nav.sub-nav ul li a { font-size: 90%; }

nav.proj-nav { text-align: center; font-size: 15px;}
nav.proj-nav ul li a { font-size: 90%; text-transform: none }

div.project-container { position: relative; width: inherit; height: 570px; margin: 20px auto; overflow: hidden; display: flex; justify-content: center; }
section.project { width: inherit; height: inherit; position: absolute; top: -100%; left:0; padding-bottom: 40px;}
section.project div.infos { display: flex; flex-direction: row; justify-content: center; align-items: center;}
section.project div.infos img.logo { height: 80px; margin-right: 30px; }
section.project div.infos p { font-size: 12px; line-height: 130%;}
section.project div.screenshots { overflow: hidden; height: 470px;}


.pilling {width:inherit; height: inherit; overflow:hidden;}
.pilling div.section { text-align:center; }
.pilling div.section img { max-width: 100%; max-height: 500px;}
ul.pillup-menu { display: flex; width: inherit; flex-direction: row; justify-content: center; align-items: center; list-style-type:none;}
ul.pillup-menu li { padding: 10px; position: relative;}
ul.pillup-menu li:before { content:''; display: block; position: absolute; top:50%; left:50%; width: 10px; height:10px; margin:-5px 0 0 -5px; background: #FFF;
border: 1px solid black; border-radius: 100px; transition: all 0.2s;}
ul.pillup-menu li:not(.active):hover:before { background-color: #DDD; width:6px; height:6px; margin:-3px 0 0 -3px; }
ul.pillup-menu li.active:before { background-color: #000; }
ul.pillup-menu li a { opacity: 0;}
a.pillup-next { display: block; z-index: 1000; position: absolute; right: 0; height:100%; width: 100px; opacity: 0; transition:opacity 1.2s ease-in-out;
	background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(255,255,255,0.65) 100%);
	background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(255,255,255,0.65) 100%);
	background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(255,255,255,0.65) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6ffffff',GradientType=1 );
}
a.pillup-prev { display: block; z-index: 1000; position: absolute; left : 0; height:100%; width: 100px; opacity: 0; transition:opacity 1.2s ease-in-out;
	background: -moz-linear-gradient(left, rgba(255,255,255,0.65) 0%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(left, rgba(255,255,255,0.65) 0%,rgba(0,0,0,0) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0.65) 0%,rgba(0,0,0,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6ffffff', endColorstr='#00000000',GradientType=1 )
}
a.pillup-next:hover, a.pillup-prev:hover { opacity: 1; }


form.contact { display: flex; width: 500px; margin: 30px auto; flex-direction: column; justify-content: center; align-items: center;}
form.contact input, form.contact textarea { padding: 5px; margin: 5px ; width: 100%; border: 1px solid #AAA; font-size:14px; font-family: "Rokkitt", sans-serif;}
form.contact button[type=submit] { margin-top: 30px; padding: 5px 30px; background: #FFF; color:black; font-size: 20px; font-family: "Sirin Stencil", sans-serif; text-transform: uppercase; border: 4px solid black; cursor: pointer; transition:all 0.2s ease-in-out;}
form.contact button[type=submit]:hover { background:#000; color:white; }