/*-----------------------------------------------
	
	G E N E R A L
	
	Colors
	
	#64ff87 (verde logo)
	#a2ffb7	(verde spento)
	#aaa	(grigio testo)
	#111	(grigio sfondo)

-------------------------------------------------*/
html {
    text-rendering: optimizeLegibility;
}
* {
	box-sizing: border-box;
}
::selection {
  background: #64ff87; /* WebKit/Blink Browsers */
  color: #111;
}
::-moz-selection {
  background: #64ff87; /* Gecko Browsers */
  color: #111;
}
body {
	color: #fff;
	background: #1C1C1C;
	font-family: 'Fira Mono', sans-serif;
	letter-spacing: .05em;
	display: block;
	line-height: 1.5;
	float: left;
}
img {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	max-width: 100%;
}
a {
	color: #aaa;
	text-decoration: none;
}
a:hover {
	color: #64ff87;
}
.sidebar, .content {
	float: left;
	box-sizing: border-box;
	margin-top: 3em;
}
#header{
	position: fixed;
	left: 0;
	top: 0;
	width: 250px;
}
.sidebar {
	width: 100%;
}
.content {
	width: 75%;
	overflow-y: auto;
	padding: 1em;
	min-height: 600px;
	margin-left: 250px;
}
.logo {
	display: block;
	margin-left: 3em;
	float: left;
	width: 100%;
}
.logo-img {
	width: 125px;
	height: 125px;
	float: left;
	background: url(../img/fd-logo.svg);
	background-repeat: no-repeat;
    background-size: cover;
}
.logo-img:hover {
	background: url(../img/fd-logo-hover.svg);
	background-repeat: no-repeat;
    background-size: cover;
}
h1 {
	display: none;
}
.nav {
	text-transform: uppercase;
	text-align: left;
	font-size: .7em;
	letter-spacing: .2em;
	font-weight: 400;
	margin-top: 3em;
}
.nav-item {
	display: inline-block;
	float: none;
}
.nav-item:hover {
	color: #64ff87;
}
.social-links, .social-link {
	width: 100%;
	float: left;
}
.nav-item {
	color: #aaa;
	line-height: 3;
}
.nav-active {
	color: #fff;
}
.welcome img {
	max-width: 800px;
	max-height: 800px;
}
.social-links {
	padding-top: 3em;
}
.social-link {
	float: left;
	margin-right: 1em;
}
.instagram, .behance, .facebook, .linkedin {
	width: 2em;
	height: 2em;
}
.instagram {
	background: url(../img/instagram.png);
	background-repeat: no-repeat;
    background-size: cover;
	display:block;
}
.instagram:hover {
	background: url(../img/instagram-hover.png);
	background-repeat: no-repeat;
    background-size: cover;
}
.behance {
	background: url(../img/behance.png);
	background-repeat: no-repeat;
    background-size: cover;
	display:block;
}
.behance:hover {
	background: url(../img/behance-hover.png);
	background-repeat: no-repeat;
    background-size: cover;
}
.facebook {
	background: url(../img/facebook.png);
	background-repeat: no-repeat;
    background-size: cover;
	display:block;
}
.facebook:hover {
	background: url(../img/facebook-hover.png);
	background-repeat: no-repeat;
    background-size: cover;
}
.linkedin {
	background: url(../img/linkedin.png);
	background-repeat: no-repeat;
    background-size: cover;
	display:block;
}
.linkedin:hover {
	background: url(../img/linkedin-hover.png);
	background-repeat: no-repeat;
    background-size: cover;
}
#back-top {
    position: fixed;
    bottom: 5em;
    display: none;
    margin-left: 2em;
}
.back-top-img {
	width: 1.25em;
	height: 1.25em;
	background: url(../img/back-top.png);
	background-repeat: no-repeat;
    background-size: cover;
	display:inline-block;
	margin: 1em;
}
#back-top:hover a .back-top-img, #back-top-2:hover a .back-top-img {
	width: 1.25em;
	height: 1.25em;
	display:inline-block;
	margin-right: .5em;
	background-image: url(../img/back-top-hover.png);
	background-repeat: no-repeat;
	background-size: cover;
}
#back-top:hover a {
	color: #64ff87;
}
#back-top-2 {
    display: none;
}
.goodbye-img{
	display: none;
}
#footer{
	display: block;
	float: left;
	margin-left: 3em;
	color: #aaa;
}
.credits {
	font-size: .5em;
	text-align: left;
	margin: 2em auto 2em 2em;
	/*display: none;*/
}
/*------------------------------------

	G A L L E R Y

-------------------------------------*/
.welcome-img {
	width: 100%;
	float: left;
}
.welcome-img img {
	position: absolute;
	right: 300px;
	bottom: 200px;
	max-width: 200px;
}
.gallery {
	line-height: 0;
	float: left;
	/*width: 80%;*/
	max-width: 1200px;
	margin-bottom: 5em;
}
.gallery-item {
	width: 24%;
    display: block;
    float: left;
    margin: 0;
    max-width: 600px;
    position: relative;
    padding: 1%;
}
.gallery-item:hover img {
	opacity: .75;
	background: #64ff87;
	-webkit-transition: background-color 0.2s ease, opacity 0.2s ease;
	-moz-transition: background-color 0.2s ease, opacity 0.2s ease;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}
.gallery-item img {
	width: 100%;
}
/*------------------------------------

	A B O U T

-------------------------------------*/
.about-photo {
	margin-bottom: 2em;
	max-width: 200px;
}
.cv {
	margin-top: 1em;
	display: inline-block;
	padding: .5em 1em;
	color: #111;
	background: #64ff87;
	font-weight: 800;
}
.cv:hover {
	background: #a2ffb7;
	color: #111;
}
.about-text h2 {
	font-size: 1em;
	font-weight: 800;
	margin-bottom: .5em;
	text-transform: uppercase;
}
.about-text h3 {
	font-size: .8em;
	font-weight: 100;
	margin-bottom: 1em;
}
.mail {
	color: #64ff87;
	letter-spacing: .1em;
}
.mail:hover {
	color: #a2ffb7;
}
/*------------------------------------

	C O N T A C T

-------------------------------------*/
.mail-text{
	font-size: .8em;
	margin-bottom: 2em;
}
.contact-form {
	max-width: 1000px;
}
.contact-form input, .contact-form textarea {
	background: #444;
	color: #aaa;
	padding: 1em 2em;
	border: none;
	margin-bottom: 2em;
	font-size: .75em;
	font-family: 'Fira Mono', sans-serif;
	width: 100%;
}
.contact-form textarea {
   min-height: 12em;
}
.contact-form input.noMarr {
	margin-right:0px;
}
.contact-form .submitBnt {
	background:#64ff87;
	color: #111;
	font-weight: 600;
	letter-spacing: .5em;
	display: inline-block;
	text-transform: uppercase;
	font-family: 'Fira Mono', sans-serif;
	width: auto;
	padding: 1em 2em;
	line-height: .75em;
}
.contact-form .submitBnt:hover {
	background:#a2ffb7;
	cursor: pointer;
}
.error_message {
    color: #ff675f;
    font-weight: 500;
    padding-bottom: 15px;
}
#success_page h3 {
    color: #5ed07b;
    font-size: 17px;
    font-weight: 700;
}
/*------------------------------------

	P R O J E C T

-------------------------------------*/
.project {
	margin-bottom: 10em;
	max-width: 1000px;
}
.project h1 {
	display: block;
	text-transform: uppercase;
	margin-bottom: 1em;
}
.project h2 {
	font-size: .85em;
	font-family: 'Fira Mono', sans-serif;
	color: #aaa;
	font-weight: 100;
}
.project h3 {
	font-size: .75em;
	font-weight: normal;
}
.project img {
	margin: 3em auto;
}
.project-goodbye {
	width: 7em;
	height: 100%;
	display: block;
}
.fancybox:hover {
	cursor: zoom-in;
}
.goodbye, .back {
	text-align: center;
	margin: auto;
}
.project-nav{
	margin-top: 3em;
	width: 100%;
	float: left;
	text-transform: uppercase;
	font-size: .75em;
	padding: 2em;
}
.back {
	float: left;
}
.prev {
	float: right;
}
.back-img {
	width: 1em;
	height: 1em;
	background: url(../img/back.png);
	background-repeat: no-repeat;
    background-size: cover;
	display:inline-block;
	margin-right: .5em;
}
.back:hover .back-img {
	width: 1em;
	height: 1em;
	display:inline-block;
	margin-right: .5em;
	background-image: url(../img/back-hover.png);
	background-repeat: no-repeat;
	background-size: cover;
}
.prev-img {
	float: right;
	width: 1em;
	height: 1em;
	background: url(../img/prev.png);
	background-repeat: no-repeat;
    background-size: cover;
	display:inline-block;
	margin-left: .5em;
}
.prev:hover .prev-img {
	width: 1em;
	height: 1em;
	display:inline-block;
	margin-left: .5em;
	background-image: url(../img/prev-hover.png);
	background-repeat: no-repeat;
	background-size: cover;
}
.back:hover a, .prev:hover a {
	color: #64ff87;
}
/*-----------------------------------------------
	
	G E N E R A L
	
	Colors
	
	#64ff87 (verde logo)
	#a2ffb7	(verde spento)
	#aaa	(grigio testo)
	#111	(grigio sfondo)

-------------------------------------------------*/