/*--------- HOME SPECIFIC STYLE ----------*/

/** home navigation **/

#homenavigation {
	background: url(../images/separators.png) no-repeat;
}

#homenavigation {
	float: left;
	background-position: right 0;
	width: 640px;
	margin: 0 20px 30px 0;
	padding: 0 10px 40px 0;
}

/* Home navigation > what you can find in this site */

#whatyoufind {
	display: block;
	width: 360px;
	float: left;
}
#whatyoufind h3 {
	display: block;	
	text-align: left;
	color: #888;
	text-transform: uppercase;
	padding: auto 5px;
	border: none;
}
#whatyoufind ul {
	display: block;
	color: #606060;
	list-style: none;
	margin: 0;
	padding: 0;
}
#whatyoufind li {
	display: inline-block;
	font-size: 13px;
	margin: 0px 0px 20px auto;
	padding: 0px;
	border-right: 1px solid #606060;
}
#whatyoufind li:last-child {
	border-right: 0px solid #606060;
}
#whatyoufind li a {
	display: inline-block;
	line-height: 24px;
	padding-right: 10px;
	color: #606060;
	text-decoration: none;
	
}
#whatyoufind li a:hover {
	color: #000000;
}

/* Home navigation > who I am */

#whoiam {
	display: block;	
}
#whoiam > img {
	vertical-align:text-top;
}


/** FLIP IMAGE: from tutorial http://www.webtutorialplus.com/css-3d-trasform-image-flip-effect/ **/

.flipcontainer {   
    width: 500px;
    margin: 50px auto;
}

#flip {
    margin-top: 50px;
    position: absolute;   
    perspective: 900px;  
    transform-style: preserve-3d;
}

#flip .picture, #flip .description
{ 
    background-color: #f6f6f6; /* #F2F2F2; */
    padding: 25px 0px 0px 10px;
    width: 170px;
    height: 230px;
    position: absolute;
	left: 330px;
	top: -100px;
    transition: transform 1s ease-in-out;   
    backface-visibility: hidden;
    box-shadow: 25px 10px 25px -24px #646464;   /* h-offset v-offset blur-radius spread-radius colour */
}

#flip .description
{   
    transform: rotateY(-180deg);
}
#flip .description > a {
	display: block;
	color: #606060;
	font-size: 13px;
	padding: 40px 25px;
	line-height: 24px;
	text-decoration: none;
	font-style: italic;
	text-align: left;
}
#flip:hover .description
{  
    transform: rotateY(0deg);
}
#flip:hover .picture
{   
    transform: rotateY(180deg);   
}


/* Home contact */

#homecontact ul {
	color: #606060;
	list-style: none;
	margin: 0;
	padding: 0;
}
#homecontact li {
	font-size: 13px;
	line-height: 24px;
	margin-bottom: 26px;
}
#homecontact li a {
	color: #606060;
	text-decoration: none;
}
#homecontact li a:hover {
	text-decoration: underline;
}
#homecontact li span.time {
	display: inline-block;
	float: left;
	font-family: "Muli";
	font-size: 13px;
	line-height: 24px;
	width: 72px;
	margin-bottom: 6px;
	margin-right: 10px;
}