/* STYLE CSS */

/* FONTS */
/* -------------- */
/* Font Google Josefin Sans */
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:700);
/* Font Face Klinck Slab */
@font-face {
	font-family: 'klinicslab';
	src:url('../fonts/KlinicSlab/klinicslablight-webfont.eot');
	src:url('../fonts/KlinicSlab/klinicslablight-webfont.eot?#iefix') format('embedded-opentype'),
		url('../fonts/KlinicSlab/klinicslablight-webfont.woff') format('woff'),
		url('../fonts/KlinicSlab/klinicslablight-webfont.ttf') format('truetype'),
		url('../fonts/KlinicSlab/klinicslablight-webfont.svg#klinicslablight-webfont') format('svg');
	font-weight: 300;
	font-style: normal;
}
@font-face {
	font-family: 'klinicslab';
	src:url('../fonts/KlinicSlab/klinicslabbook-webfont.eot');
	src:url('../fonts/KlinicSlab/klinicslabbook-webfont.eot?#iefix') format('embedded-opentype'),
		url('../fonts/KlinicSlab/klinicslabbook-webfont.woff') format('woff'),
		url('../fonts/KlinicSlab/klinicslabbook-webfont.ttf') format('truetype'),
		url('../fonts/KlinicSlab/klinicslabbook-webfont.svg#klinicslabbook-webfont') format('svg');
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'klinicslab';
	src:url('../fonts/KlinicSlab/klinicslabmedium-webfont.eot');
	src:url('../fonts/KlinicSlab/klinicslabmedium-webfont.eot?#iefix') format('embedded-opentype'),
		url('../fonts/KlinicSlab/klinicslabmedium-webfont.woff') format('woff'),
		url('../fonts/KlinicSlab/klinicslabmedium-webfont.ttf') format('truetype'),
		url('../fonts/KlinicSlab/klinicslabmedium-webfont.svg#klinicslabmedium-webfont') format('svg');
	font-weight: 600;
	font-style: normal;
}
@font-face {
	font-family: 'klinicslab';
	src:url('../fonts/KlinicSlab/klinicslabboldit-webfont.eot');
	src:url('../fonts/KlinicSlab/klinicslabbold-webfont.eot?#iefix') format('embedded-opentype'),
		url('../fonts/KlinicSlab/klinicslabbold-webfont.woff') format('woff'),
		url('../fonts/KlinicSlab/klinicslabbold-webfont.ttf') format('truetype'),
		url('../fonts/KlinicSlab/klinicslabbold-webfont.svg#klinicslabbold-webfont') format('svg');
	font-weight: 700;
	font-style: normal;
}
/* Font Face Klinck Slab Italic */
@font-face {
	font-family: 'klinicslab';
	src:url('../fonts/KlinicSlab/klinicslablightit-webfont.eot');
	src:url('../fonts/KlinicSlab/klinicslablightit-webfont.eot?#iefix') format('embedded-opentype'),
		url('../fonts/KlinicSlab/klinicslablightit-webfont.woff') format('woff'),
		url('../fonts/KlinicSlab/klinicslablightit-webfont.ttf') format('truetype'),
		url('../fonts/KlinicSlab/klinicslablightit-webfont.svg#klinicslablightit-webfont') format('svg');
	font-weight: 300;
	font-style: italic;
}
@font-face {
	font-family: 'klinicslab';
	src:url('../fonts/KlinicSlab/klinicslabbookit-webfont.eot');
	src:url('../fonts/KlinicSlab/klinicslabbookit-webfont.eot?#iefix') format('embedded-opentype'),
		url('../fonts/KlinicSlab/klinicslabbookit-webfont.woff') format('woff'),
		url('../fonts/KlinicSlab/klinicslabbookit-webfont.ttf') format('truetype'),
		url('../fonts/KlinicSlab/klinicslabbookit-webfont.svg#klinicslabbook-webfont') format('svg');
	font-weight: 400;
	font-style: italic;
}
@font-face {
	font-family: 'klinicslab';
	src:url('../fonts/KlinicSlab/klinicslabmediumit-webfont.eot');
	src:url('../fonts/KlinicSlab/klinicslabmediumit-webfont.eot?#iefix') format('embedded-opentype'),
		url('../fonts/KlinicSlab/klinicslabmediumit-webfont.woff') format('woff'),
		url('../fonts/KlinicSlab/klinicslabmediumit-webfont.ttf') format('truetype'),
		url('../fonts/KlinicSlab/klinicslabmediumit-webfont.svg#klinicslabmediumit-webfont') format('svg');
	font-weight: 600;
	font-style: italic;
}
@font-face {
	font-family: 'klinicslab';
	src:url('../fonts/KlinicSlab/klinicslabboldit-webfont.eot');
	src:url('../fonts/KlinicSlab/klinicslabboldit-webfont.eot?#iefix') format('embedded-opentype'),
		url('../fonts/KlinicSlab/klinicslabboldit-webfont.woff') format('woff'),
		url('../fonts/KlinicSlab/klinicslabboldit-webfont.ttf') format('truetype'),
		url('../fonts/KlinicSlab/klinicslabboldit-webfont.svg#klinicslabboldit-webfont') format('svg');
	font-weight: 700;
	font-style: italic;
}
/* -------------- */



/* GLOBAL STYLES */
/* -------------- */
html{
	font-size: 10px;
	color:#282828;
}
html, body {
    height: 100%;
	font-family: "klinicslab", "Trebuchet MS", Arial, sans-serif;
	font-weight: 400;
	font-style: normal;
	
	text-rendering: optimizeLegibility;
}
body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;

	font-size: 100%;
	overflow-x: hidden;
}
body.show {
	display: flex !important;
}

/* 
   This for problem with delay effect on Chrome and Safari
   No good -> transition: width .3s ease, height .3s ease, left .3s linear, font-size .3s ease, transform .3s ease, color .3s ease, opacity .3s ease; 
   No good -> , *:before, *:after
*/
*:not(.menu):not(.brand):not(.page-title):not(.panel-collapse):not(.panel-heading):not(.form-control):not(.fa){
	user-select: none;
	
	/*transition: all .3s ease;*/
}

h1,h2,h3,h4,h5,h6{
	margin: 0;
}
h2{
	margin-bottom: 0.2em;
}

p{
	color: #282828;
}
p strong{
	display: inline-block;
	/*position: relative;*/
}
/*p strong:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	height: 0;
	width: 100%;
	background: transparent;

	transition: all ease 0.5s;
}
p strong:hover:after {
	height: 0.3em;
	background: #282828;
}*/

a, a:hover, a:focus{
	color: currentColor;
	text-decoration: none;
}

/*== disabilita light-blue focus di bootstrap ==*/
a:focus, .btn:focus,.btn:active:focus,.btn.active:focus,
.btn.focus,.btn:active.focus, .btn.active.focus {
    outline: none;
	color: currentColor;
}
.btn:active, .btn.active{
	box-shadow: none;
}
/* == */

form {
    padding-top: 1em;
}

/*== disabilita css per input di bootstrap ==*/
.form-control{
	border: none;
	border-radius: 0;
	box-shadow: none;
	color: currentColor;
	height: auto;
}
.form-control:focus{
	box-shadow: none;
}
/* == */

/* For wow default effect */
.wow{
	visibility: hidden;
}

/* body class for page color */
.red{
	color: #d32f2f;
}
.green{
	color:#8bc34a;
}
.yellow{
	color:#ffd600;
}
.light-blue{
	color:#03a9f4;
}
/* -------------- */



/* LOADER */
/* -------------- */
body > *:not(#loader) {
	/* display: none; */
	opacity: 0;
	transition: opacity 1s ease-in-out 1s;
}
body.show > *:not(#loader) {
	/* display: block; */
	opacity: 1;
}
body.show > #loader {
	opacity: 0;
	visibility: hidden;
}
#loader {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 999999;
	width: 20vw;
	height: 20vw;
	max-width: 100px;
	max-height: 100px;
	transform: translate(-50%, -50%);
	opacity: 1;
	visibility: visible;
	transition: opacity 1s ease-in-out, visibility 0s linear 1s;
}
#loader svg {
	width: 100px;
	height: 100px;
}
#loader svg rect:first-child {
	animation: moveRect 0.6s infinite linear;
}
#loader svg rect {
	animation: moveRect 0.6s infinite linear 0.2s;
}
#loader svg rect:last-child {
	animation: moveRect 0.6s infinite linear 0.4s;
}
@keyframes moveRect {
	0% {transform: translateY(0px);}
	50% {transform: translateY(20px);}
	100% {transform: translateY(0px);}
}
/* -------------- */

/* ACCORDION */
/* -------------- */
.btn-navbar + *,
.panel-heading + * {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease-out;
}
/* -------------- */


/* HEADER */
/* -------------- */
.header:before {
  content: "";
  width: 100%;
  height: 100%;
  box-shadow: 0px -10px 40px rgba(0,0,0,0.2);
  position: absolute;
  top: -100%;
}

/* nav */
nav.navbar {
	margin:0;
}

/* btn menu toggle */
.btn-navbar {
    position: relative;
    margin-top: 20px;    
    left: 50%;
    height: 40px;
	background: transparent;
	transform:translateX(-50%);
	
	transition: color .3s ease;
}

.btn-navbar .bars {
    display: block;
    width: 30px;
    height: 5px;    
    background-color: currentColor;
    margin-bottom:5px;
	opacity: 1;
	
	transform: rotate(0deg);
	transition: transform .3s ease, opacity .3s ease;
}

/*== for old Safari 6/7 mobile iphone4 ==*/
.red .btn-navbar .bars{
	color: #d32f2f;
}
.green .btn-navbar .bars{
	color:#8bc34a;
}
.yellow .btn-navbar .bars{
	color:#ffd600;
}
.light-blue .btn-navbar .bars{
	color:#03a9f4;
}
/* == */

.btn-navbar .bars:last-child{
	margin:0;
}
.btn-navbar .bars.closeMenu:first-child{
	transform: rotate(135deg);
}
.btn-navbar .bars.closeMenu:nth-child(2){
	opacity: 0;
}
.btn-navbar .bars.closeMenu:last-child{
	transform: rotate(-135deg);
	margin-top: -20px;
	
}
/* -------------- */



/* MENU */
/* -------------- */
.menu { 
	position: relative;
    width: 100%;
    padding: 0;
    margin: 0 auto;
    text-align: center;
}
.menu ul {
    margin-bottom: 0;
	padding-top: 10px;
}
.menu li{
	margin: 0 35px;
    position: relative;
}
.menu li a {
    color:currentColor;
	font-size: 3em;
	font-style: italic;
	font-weight:300;
	
	transition: color .3s ease;
}
.menu li a:hover, .menu li a:active, .menu li a:focus, .menu li a.active {
	color: #282828;
	text-decoration: none;
}

/* menu li a -> line-trought effect in media query min-width > 480 */

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



/* LOGO */
/* -------------- */
.brand {
    width: 100%;
    position: relative;
    text-align: center;
    margin-top: 20px;
	color: currentColor;
	
	overflow:hidden;
}

/*== for old Safari 6/7 mobile iphone4 =*/
.red .brand{
	color: #d32f2f;
}
.green .brand{
	color:#8bc34a;
}
.yellow .brand{
	color:#ffd600;
}
.light-blue .brand{
	color:#03a9f4;
}
/* == */

.brand:before {
    content: "";
    display: block;
    background: currentColor;
    height: 15px;
    width: 45px;

    position: absolute;
    bottom: 0;
	left:0;
}
.brand:after {
    content: "";
    display: block;
    background: currentColor;

    position: absolute;
    bottom: 0;
	right:0;
}
.brand a.brand-link{
	color: currentColor;
}
.brand svg{
	width: 200px;
	height: 200px;
	
	/* for svg container equal height */
	transform: scale(1.04);
}
.brand svg path {
  fill: currentColor;
  
  transition: color .3s ease;
}
/* -------------- */



/* TITLE PAYOFF */
/* -------------- */
.title h1{
	font-size: 9.2em;
	
	display: inline-block;
}

/*.title h1 span{
	text-shadow:0px 0px 0px #fff;
	
	transition: all .3s ease;
}
.title h1:hover span{
	text-shadow:1px 1px 0 #fff, 2px 2px 0 #fff, 3px 3px 0 #787878, 4px 4px 0 #787878, 5px 5px 0 #787878;
}*/

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



/* PAGE TITLE NAME */
/* -------------- */
h2.page-title{
	position: relative;
	font-size: 8.2em;
	font-weight: 700;
	font-style: italic;
	
	overflow:hidden;
}
h2.page-title:after{
    content: "";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
	
	position: absolute;
	right: 0;
	font-size: inherit;
	
	animation: flipIcon 2s infinite linear;
}
@keyframes flipIcon {
    from {transform: rotateY(0deg);}
    to {transform: rotateY(360deg);}
}
/* -------------- */



/* SECTIONS */
/* -------------- */
.section {
    padding: 5em 0;
}
.page {
	flex: 1;
}

/* section first-child */
.section:first-child{
	padding: 5em 0 0;
}

/* footer */
footer{
	padding: 5em 0;
	background:currentColor;
	box-shadow: 0px -10px 40px rgba(0,0,0,0.2);
	
	position: relative;
	z-index: 3;
}
footer .next{
	position: relative;
}
footer p{
	color:#fff;
	left:0;
	
	transition: left .5s linear;
}
footer:hover p{
	color:#fff;
	left:10px;
}
/* read next */
footer p.read-next{
	position: absolute;
	
    font-size: 3.6em;
    font-style: italic;
    font-weight: 300;
}
/* next page name */
footer p.next-page{
	position: relative;
	margin: 0;
	font-size: 7em;
	font-weight: 700;
	font-style: italic;
	transform: translateY(20%);
}
/* link dx next [>] */
footer a.next-arrow{
	position: relative;
	color: #fff;
	
	background: transparent;
	border: 0.3em solid currentColor;
	border-radius: 0;
	margin-top: 0.1em;
	padding: 0.2em 0.44em;

	font-size: 4em;
	left:0;
	transition: left .5s linear, transform .3s ease;
}
footer:hover a.next-arrow{
	left:-10px;
}
footer a.next-arrow{
	transform: rotate(90deg);
}
footer a.next-arrow:hover,
footer a.next-arrow:active,
footer a.next-arrow:focus{
	transform: rotate(0deg);
	background: transparent;
	border: 0.3em solid currentColor;
}

/*footer a.next-arrow:hover{
	box-shadow: -3px 3px 0 #c52b2b , -4px 4px 0 #c52b2b , -5px 5px 0 #c52b2b , -6px 6px 0 #c52b2b , -7px 7px 0 #c52b2b , -8px 8px 0 #c52b2b , -9px 9px 0 #c52b2b , -10px 10px 0 #c52b2b , -11px 11px 0 #c52b2b , -12px 12px 0 #c52b2b , -13px 13px 0 #c52b2b , -14px 14px 0 #c52b2b , -15px 15px 0 #c52b2b , -16px 16px 0 #c52b2b , -17px 17px 0 #c52b2b , -18px 18px 0 #c52b2b , -19px 19px 0 #c52b2b , -20px 20px 0 #c52b2b ;
}*/

footer a.next-arrow i{
	font-size: inherit;
}
/* -------------- */



/* -------------- */
/* --- HOME --- */
/* -------------- */
/* .red .page{
	overflow: hidden;
} */

.red .brand:before{
    height: 15px;
    width: 45px;
	
	animation: redRectL 4s ease infinite;
}
.red .brand:after{
    height: 15px;
    width: 45px;
	
	animation: redRectR 4s ease infinite;
}

.red .title{
	position: relative;
	z-index: 3;
}
.red .title h1 span:first-child{
	font-weight: 600;
	font-style: italic;
}
.red .title h1 span:nth-child(2){
	font-weight: 400;
	font-style: normal;
}
.red .title h1 span:last-child{
	font-weight: 700;
	font-style: normal;
	letter-spacing:20px;
}

.img-profile{
	padding-bottom:5em;
}
/* .img-profile .filter {
	position: relative;
}
.img-profile .filter::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
	background: url(/images/profile.jpg), 50%/cover, radial-gradient(circle, #000, #fff) 0 0/6px 6px space;
	background-blend-mode: screen;
	filter: contrast(19);
  content: "";
} */
.img-profile .figure{
	position: relative;
	display:block;
	overflow: hidden;
}
.img-profile .figure:before {
	content:"";
	position: absolute;
	width: 95%;
	height: 95%;
	top: 2.5%;
	left: 2.5%;
	border: 2.5em solid #fff;
	opacity: 0.2;
	
	animation: figureBorderBef 10s infinite linear;
}
.img-profile .figure:after {
	content:"";
	position: absolute;
	width: 95%;
	height: 95%;
	top: 2.5%;
	left: 2.5%;
	border: 2.5em solid #fff;
	opacity: 0.2;
	
	animation: figureBorderAft 10s infinite linear;
}
.img-profile .figure img{
	box-shadow: 0px -10px 40px rgba(0,0,0,0.2);
}
.red .img-profile p{
	position: absolute;
	width:100%;
	top:76%;
  left: 0;
	
	color: white;
	font-size: 8.2em;
	font-weight: 300;
	font-style: italic;
	letter-spacing: 40px;
}
.red .img-profile p span{
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 700;
	font-style: normal;
}

.red h2.page-title:after{
    content: "\f1da";
}
.red p{
	font-size: 2.8em;
	font-weight: 400;
	font-style: normal;
}
/* -------------- */



/* -------------- */
/* --- ABOUT --- */
/* -------------- */
.green .brand:before{
    height: 45px;
    width: 15px;
	
	animation: greenRectL 2s ease infinite;
}
.green .brand:after{
    height: 45px;
    width: 15px;
	
	animation: greenRectL 2s ease infinite;
}

.green .title h1 span:first-child{
	font-weight: 300;
	font-style: normal;
}
.green .title h1 span:nth-child(2){
	font-weight: 700;
	font-style: italic;
}
.green .title h1 span:nth-child(2) span{
	color:#787878;
}
.green .title h1 span:nth-child(3){
	font-weight: 400;
	font-style: normal;
}
.green .title h1 span:last-child{
	font-weight: 700;
	font-style: italic;
}
.green .title h1 span:last-child span {
    font-style: italic;
    font-weight: 200;
    text-decoration: underline;
}

/*.green .section:nth-child(2){
	padding: 5em;
}*/

.green .section:nth-child(2) .container .skills{
	background: #282828;
	padding: 5em;
	box-shadow: 0px -10px 40px rgba(0,0,0,0.2);
}

.green h2.page-title{
	margin-bottom: 0.5em;
}
.green h2.page-title:after{
    content: "\f0ae";
}

.green h3{
	font-weight: 700;
	font-style: normal;
	font-size: 5.6em;
	color: #787878;
}

.green h4{
	font-weight: 300;
	font-style: normal;
	font-size: 5.6em;
	color: #787878;
	text-align: right;
	padding-top: 0.5em;
}

.green p{
	font-weight: 400;
	font-style: normal;
	font-size: 4.6em;
	color:#fff;
	margin: 0;
}
.green .section:nth-child(2) > a{
	margin: 1em auto 0;
	padding: 0.5em;
	background: #fff;
	color:#8bc34a;
	display: block;
	font-size: 5em;
	border: 5px solid #8bc34a;
	
	transition: color .3s ease, background .3s ease;
}
.green .section:nth-child(2) > a:hover{
	background: #8bc34a;
	color: #fff;
}
.green .progressbar {
	position: relative;
  height: 3em;
	margin-bottom: 20px;
  border: 1px solid #8bc34a;
	background-color: transparent;
}
.green .progressbar:after {
	content: "";
	position: absolute;
	width: calc(var(--prog) * 1%);
	height: 100%;
	left: 0;
	top: 0;
	background-color: rgba(139,195,74,0.3);
}
/* -------------- */



/* -------------- */
/* --- WORK --- */
/* -------------- */
.yellow .brand:before{
    height: 15px;
    width: 45px;
	
	animation: yellowRectL 4s ease 1s infinite;
}
.yellow .brand:after{
    height: 45px;
    width: 15px;
	
	animation: yellowRectR 2s ease infinite;
}

.yellow .title h1 span:first-child{
	font-weight: 600;
	font-style: italic;
}
.yellow .title h1 span:nth-child(2){
	font-weight: 400;
	font-style: normal;
}
.yellow .title h1 span:nth-child(3){
	font-weight: 600;
	font-style: italic;
	
	display: inline-block;
	position: relative;
}
.yellow .title h1 span:nth-child(3):after {
	content: '';
	position: absolute;
	bottom: 38%;
	left: 0;
	height: 0.05em;
	background: currentColor;
	width: 100%;
}
.yellow .title h1 span:last-child{
	font-weight: 300;
	font-style: normal;
	
	display: inline-block;
	position: relative;
}
.yellow .title h1 span:last-child:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	height: 0.05em;
	background: currentColor;
	width: 100%;
}

.yellow .cont-page-title{
	padding: 5em 5em 3em;
	margin-bottom: 5em;
	background: #ffd600;
}
	
.yellow h2.page-title{
	color: #fff;
}
.yellow h2.page-title:after{
    content: "\f06e";
	right: 0;
}

.yellow .cont-page-text p{
	font-size: 4em;
	font-weight: 600;
	font-style: italic;
	text-transform: uppercase;
	margin-bottom:0em;
}
.yellow .cont-page-text p:last-child{
	margin-bottom:2em;
}
.yellow .cont-page-text p span{
	font-size: 5em;
	font-weight: 800;
	font-style: italic;
	color: #ffd600;
}

.cont-page-text h3 {
    font-size: 8em;
    text-align: right;
    margin: 1em 0;
}

/* accordion */
.yellow .panel-group {
	margin: 0;
}
.yellow .panel-group .panel{
	border-radius: 0;
	border: 0;
	margin: 0;
	box-shadow: none;
}
.yellow .panel-group .panel-heading{	
	border-radius: 0;
	padding: 5em;
	margin-top: 0;
	
	border-top: 1px solid #282828;
	background: transparent;
	color: #282828;
	
	transition: background-color .3s ease, margin-top 1s ease;
}
.yellow .panel-group .panel:last-child .panel-heading{
	border-bottom: 1px solid #282828;
}

/* animation .panel-heading */
.yellow .panel.panel-open .panel-heading{
	border-top: 1px solid #ffd600;
	color: #fff;
	background: #ffd600;
}
.yellow .panel-open + .panel-open .panel-heading{
	margin-top: 5em;
}

.yellow .panel-title{
	font-size: 4.6em;
}
.yellow .panel-title a{
	position: relative;
	font-weight: 400;
	font-style: italic;
	display: block;
	padding-right: 2em;
	
	transition: margin-left .5s linear;
}

/* specific animation property for not causes problem with animation delay in Chrome e Safari */
.yellow .panel-title a span{
	color: #282828;
	
	transition: color .3s ease;
}
.yellow .panel.panel-open .panel-title a span{ 
	color: #fff;
}

.yellow .panel-title a i{
    font-size: 1em;
    /*line-height: 2.2em;*/
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

.yellow .panel-group .panel .panel-body{
	background: #282828;
	padding: 5em;
	border: 0;
}
.yellow .panel-body h4{
	font-size: 4.6em;
	font-weight: 400;
	font-style: italic;
	margin-bottom: 0.5em;
}
.yellow .panel-body .border {
	border: 1em solid rgba(255,255,255,0.3);
	padding: 1em;
	margin-bottom: 3rem;
}
.yellow .panel-body .border:hover,
.yellow .panel-body .border:focus {
	border-color:rgba(255,255,255,1);
	transition: border-color .3s ease;
}
.yellow .panel-body .images {
	position: relative;
	overflow: hidden;
}
.yellow .panel-body .img-project {
	position: absolute;
	top: 25.5%;
	left: 48.7%;
	transform: translateX(-50%);
	width: 34%;
	height: 28.5%;
	margin: 0;
	overflow: hidden;
}
.yellow .panel-body .img-project .project {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
/* 1s = 50% */
/* freedompro */
.yellow .panel-body .img-project .project.freedompro {
	transition: top 1s ease-in-out;
}
.yellow .panel-body .images:hover .img-project .project.freedompro {
	transition: top 6.8s ease-in-out;
	top: -345%;
}
/* generali */
.yellow .panel-body .img-project .project.generali {
	transition: top 1s ease-in-out;
}
.yellow .panel-body .images:hover .img-project .project.generali {
	transition: top 24.7s ease-in-out;
	top: -1257%;
}
/* ray-ban */
.yellow .panel-body .img-project .project.rayban {
	transition: top 1s ease-in-out;
}
.yellow .panel-body .images:hover .img-project .project.rayban {
	transition: top 18s ease-in-out;
	top: -900.8%;
}
/* h&m */
.yellow .panel-body .img-project .project.hm {
	transition: top 1s ease-in-out;
}
.yellow .panel-body .images:hover .img-project .project.hm {
	transition: top 7s ease-in-out;
	top: -356%;
}
/* prada */
.yellow .panel-body .img-project .project.prada {
	transition: top 1s ease-in-out;
}
.yellow .panel-body .images:hover .img-project .project.prada {
	transition: top 9.9s ease-in-out;
	top: -496.5%;
}
/* marchesi */
.yellow .panel-body .img-project .project.marchesi {
	transition: top 1s ease-in-out;
}
.yellow .panel-body .images:hover .img-project .project.marchesi {
	transition: top 5.5s ease-in-out;
	top: -274%;
}

.yellow .panel-body .images .zoom {
	transform: scale(1.01);
	transition: transform 30s ease-out;
}
.yellow .panel-body .images:hover .zoom {
	transform: scale(1.4);
}

.yellow .panel-body p{
	font-weight: 400;
	font-style: normal;
	font-size: 2.8em;
	color:#fff;
	margin: 2rem 0 0;
}
.yellow .panel-body p.company{
	font-weight: 300;
	font-style: italic;
}
.yellow .panel-body ul{
	padding: 0;
	list-style: none;
	column-count: 2;
	column-gap: 2rem;
}
.yellow .panel-body ul li{
	font-size: 2.6em;
	color: #787878;
	
	transition: color .3s ease;
}
.yellow .panel-body ul li:hover, .yellow .panel-body ul li:focus{
	color: #ffd600;
}
.yellow .panel-body hr{
	color: #787878;
	margin: 3rem 0;
}
.yellow .panel-body a.linkSite{
	display: block;
	font-size: 2.6em;
	font-style: italic;
	letter-spacing: 1px;
	
	transition: all .3s ease;
}
.yellow .panel-body a.linkSite:hover,.yellow .panel-body a.linkSite:focus{
	letter-spacing: 5px;
}
/* -------------- */



/* -------------- */
/* --- CONTACT --- */
/* -------------- */
.light-blue .brand:before{
    height: 45px;
    width: 15px;
	
	animation: lightBlueRectL 2s ease infinite;
}
.light-blue .brand:after{
    height: 15px;
    width: 45px;
	
	animation: lightBlueRectR 4s ease 1s infinite;
}

.light-blue .title h1 span:first-child{
	font-weight: 400;
	font-style: normal;
}
.light-blue .title h1 span:nth-child(2){
	font-weight: 600;
	font-style: italic;
}
.light-blue .title h1 span:last-child{
	font-weight: 700;
	font-style: normal;
}
.light-blue .cont-page-title{
	padding: 5em 5em 0;
	margin-bottom: 5em;
}
.light-blue h2.page-title:after{
    content: "\f135";
}

.light-blue .section:nth-child(2) .container{
	padding-top: 5em;
}

.light-blue .section:nth-child(2) .container p{
	font-size: 4em;
}

/* PERSONAL LINK */
/* -------------- */
.light-blue .section:nth-child(2) .container .personal-link {
	overflow: hidden;
}
.light-blue .section:nth-child(2) .container .personal-link a {
	position: relative;
    display: inline-block;
	width: 23.5%;
    margin: 1%;
    padding-bottom: 22.5%;
	
	border: 5px solid currentColor;
	background: currentcolor;
	transition: all .3s ease;
}
.light-blue .section:nth-child(2) .container .personal-link a:hover {
	background: #fff;
}
.light-blue .section:nth-child(2) .container .personal-link > a:first-child {
	margin-left: 0;
}
.light-blue .section:nth-child(2) .container .personal-link > a:last-child {
	margin-right: 0;
}

.light-blue .section:nth-child(2) .container .personal-link a i{
	position: absolute;
	left: 50%;
	top:50%;
	transform: translate(-50%,-50%);
	
	font-size: 8em;
	color: #fff;
	transition: color .3s ease;
}
.light-blue .section:nth-child(2) .container .personal-link a:hover i {
	color: #03a9f4;
}
/* -------------- */

.black .brand:before {
	height: 15px;
	width: 45px;
	animation: redRectL 4s ease infinite;
}
.black .brand:after {
	height: 15px;
	width: 45px;
	animation: redRectR 4s ease infinite;
}

/* 404 Page Styles */
.error-404 {
    font-size: 8em;
}

/* Footer Styles */
/* footer {
    margin: 50px 0;
} */

/* Browsehappy for ie < 8 */
.browsehappy{
	text-align: center;
	font-size: 6em;
	padding: 1em 2em;
	color: #282828;
}
.browsehappy a{
	text-decoration: underline;
	color: #d32f2f;
}

/* ANIMATIONS 
============================================================================= */
.yellow .panel-heading:hover .panel-title a{
	margin-left:10px;
}

@keyframes figureBorderBef {
	0% {
		transform: skew(10deg, -10deg);
	}
	25% {
		transform: skew(20deg, 10deg);
	}
	50% {
		transform: skew(-10deg, 10deg);
	}
	75% {
		transform: skew(-20deg, -10deg);
	}
	100% {
		transform: skew(10deg, -10deg);
	}
}

@keyframes figureBorderAft {
	0% {
		transform: skew(-10deg, 10deg);
	}
	25% {
		transform: skew(10deg, 20deg);
	}
	50% {
		transform: skew(10deg, -10deg);
	}
	75% {
		transform: skew(-10deg, -20deg);
	}
	100% {
		transform: skew(-10deg, 10deg);
	}
}

@keyframes redRectL {
	0% {
		left: 0;
		transform: translateX(-150%);
	}
	50% {
		left: 100%;
		transform: translateX(100%);
	}
	100% {
		left: 0;
		transform: translateX(-150%);
	}
}
@keyframes redRectR {
	0% {
		right: 0;
		transform: translateX(150%);
	}
	50% {
		right: 100%;
		transform: translateX(-100%);
	}
	100% {
		right: 0;
		transform: translateX(150%);
	}
}

@keyframes greenRectL {
	0% {
		bottom: 0;
		transform: translateY(150%);
	}
	50% {
		bottom: 100%;
		transform: translateY(-100%);
	}
	100% {
		bottom: 0;
		transform: translateY(150%);
	}
}
@keyframes greenRectR {
	0% {
		bottom: 0;
		transform: translateY(150%);
	}
	50% {
		bottom: 100%;
		transform: translateY(-100%);
	}
	100% {
		bottom: 0;
		transform: translateY(150%);
	}
}

@keyframes yellowRectL {
	0% {
		left: 0;
		transform: translateX(-150%);
	}
	50% {
		left: 100%;
		transform: translateX(100%);
	}
	100% {
		left: 0;
		transform: translateX(-150%);
	}
}
@keyframes yellowRectR {
	0% {
		bottom: 0;
		transform: translateY(150%);
	}
	50% {
		bottom: 100%;
		transform: translateY(-100%);
	}
	100% {
		bottom: 0;
		transform: translateY(150%);
	}
}

@keyframes lightBlueRectL {
	0% {
		bottom: 0;
		transform: translateY(150%);
	}
	50% {
		bottom: 100%;
		transform: translateY(-100%);
	}
	100% {
		bottom: 0;
		transform: translateY(150%);
	}
}
@keyframes lightBlueRectR {
	0% {
		right: 0;
		transform: translateX(150%);
	}
	50% {
		right: 100%;
		transform: translateX(-100%);
	}
	100% {
		right: 0;
		transform: translateX(150%);
	}
}


/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/


  /*==========  Mobile First Method  ==========*/

	@media only screen and (min-width : 260px) {
		body{font-size:30%;}
	}

  /* Custom, iPhone Retina */ 
  @media only screen and (min-width : 320px) {
		body{font-size:40%;}
  }

  /* Extra Small Devices, Phones */ 
  @media only screen and (min-width : 480px) {
		body{font-size:60%;}

		.red .title h1 span:last-child{letter-spacing:14px;} 
  }

  /* Small Devices, Tablets */
  @media only screen and (min-width : 768px) {
		body{font-size:70%;}
		
		.menu li a:before {
			content: '';
			display: block;
			position: absolute;
			left: 0;
			bottom: 41%;
			height: 1px;
			width: 0;
			
			transition: width 0s ease, background .5s ease;
		}
		.menu li a:after {
			content: '';
			display: block;
			position: absolute;
			right: 0;
			bottom: 41%;
			height: 1px;
			width: 0;
			background: #282828;
			
			transition: width .5s ease;
		}
		.menu li a:hover:before {
			width: 100%;
			background: #282828;
			
			transition: width .5s ease;
		}
		.menu li a:hover:after {
			width: 100%;
			background: transparent;
			
			transition: all 0s ease;
		}
		
		.red .title h1 span:last-child{letter-spacing:18px;} 
		
		.green a.resume {width:720px;}

		.yellow .panel-body ul { column-count: 3;}
		
  }

  /* Medium Devices, Desktops */
  @media only screen and (min-width : 992px) {
		body{font-size:80%;}
		
		.red .title h1 span:last-child{letter-spacing:20px;}
		
		.green a.resume {width:940px;} 
  }

  /* Large Devices, Wide Screens */
  @media only screen and (min-width : 1200px) {
		body{font-size:100%;}
		
		.green a.resume {width:1140px;}
  }



  /*==========  Non-Mobile First Method  ==========*/

  /* Large Devices, Wide Screens */
  @media only screen and (max-width : 1200px) {
		/*.red .img-profile p {letter-spacing:30px;font-size:7.2em;}*/
		.red .img-profile p {letter-spacing:35px;font-size:8.2em;}
  }

  /* Medium Devices, Desktops */
  @media only screen and (max-width : 992px) {
		/*.red .img-profile p {letter-spacing:20px;font-size:7.2em;}*/
		.red .img-profile p {letter-spacing:30px;font-size:8.2em;}
  }

  /* Small Devices, Tablets */
  @media only screen and (max-width : 768px) {
		.menu li{margin:0 20px;}
		
		.brand svg {width:150px;height:150px;}
		
		.red .brand:before, .red .brand:after {width:30px;height:10px;}
		
		.green .brand:before, .green .brand:after {height:30px;width:10px;}
		.green h4 {margin-bottom:10px;}
		
		.yellow .brand:before {width:30px;height:10px;}
		.yellow .brand:after {height:30px;width:10px;}
		.yellow .panel-body hr {margin: 2rem 0;}
		
		.light-blue .brand:before {height:30px;width:10px;}
		.light-blue .brand:after {width:30px;height:10px;}
		
		.red .img-profile p {letter-spacing:13px;font-size:7.2em;}
		
		.green .section:nth-child(2) a.resume{margin:1em 15px 0;}

		.red .title h1 span:last-child{letter-spacing:8px;}  
		.red p {font-size: 4.8em;}
		.yellow .panel-title {font-size: 6em;}
		.yellow .panel-body p {font-size: 4.8em;}
		.yellow .panel-body ul li {font-size: 4.6em;}
		.yellow .panel-body a.linkSite {font-size: 4.6em;}
		footer p.read-next {font-size: 3.4em;}
		
  }

  /* Extra Small Devices, Phones */ 
  @media only screen and (max-width : 480px) {
		/*.btn-navbar{margin-bottom:10px;}*/
		.btn-navbar .bars {
			width: 20px;
    height: 3px;
		margin-bottom: 3px;
		}
		.btn-navbar .bars.closeMenu:last-child {
			margin-top: -12px;
		}

		.menu li {margin:0 12px; display:block;}
		.menu li a {font-size:5.5em;}
		
		.brand svg {width:70px;height:70px;}
		
		.red .brand:before, .red .brand:after {width:22.5px;height:5px;}
		
		.green .brand:before, .green .brand:after {height:22.5px;width:5px;}
		
		.yellow .brand:before {width:22.5px;height:5px;}
		.yellow .brand:after {height:22.5px;width:5px;}
		
		.light-blue .brand:before {height:22.5px;width:5px;}
		.light-blue .brand:after {width:22.5px;height:5px;}
		
		.red .img-profile p {letter-spacing:8px;font-size:6.2em;}	
  }

  /* Custom, iPhone Retina */ 
  @media only screen and (max-width : 320px) {
		.red .title h1 span:last-child {letter-spacing:normal;}
		
		.red .img-profile p {letter-spacing:5px;font-size:5.2em;}
  }