@import url(http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold);


/* --------------------------------------------
  My style
-------------------------------------------- */

html {
	font:62.5%/1 Museo, Cabin, "Droid Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	background: url(../images/bg.png);
}

body {
	margin: 0 auto;
	text-align: center;
}
strong {
	font-weight: bold;
}

a { text-decoration: none; color: #4e72be;}
a:active { outline: none; color: #314a7f;}
a#close_btn{margin:auto;font-size: 1.5em; }
a#close_btn:hover{color: #314a7f;}

a.remote, #twitter-icon, #linkedin-icon{ -moz-transition:all 150ms ease-in;-webkit-transition:all 150ms ease-in;-o-transition:all 150ms ease-in;}

h1, h2 {
	text-shadow: rgba(255,255,255,0.6) 0 1px 0, rgba(0,0,0,0.2) 0 .12em .15em;
}
h1 {
	font-size: 3.2em;
	text-align: center;
	font-weight: lighter;
	margin-top: .9em;
	margin-bottom: .9em;	
}
h2 {
	font-size: 1.8em;
}
h2, p {
	margin-bottom: 1em;
	line-height: 1.6em;
}
p{
	font-size: 1.3em;
	color: #333;
}

/* article */

article {
	position: relative;
	padding: 30px 0px 0px 0px;
	text-shadow: hsla(0,0%,100%,.7) 0 1px 0;
	text-align: left;
	background: url(../images/middleFocusedMath.png) no-repeat;
	border: 0;
	max-width: 800px;
	margin: auto;
	/* transition setup */
	pointer-events: none;
	opacity: 0;
	
	-webkit-transform: translateY(-100px);
	   -moz-transform: translateY(-100px);
	     -o-transform: translateY(-100px);
	        transform: translateY(-100px);

	-webkit-transition: -webkit-transform .6s cubic-bezier(.3, 0, 0, 1), opacity .6s cubic-bezier(.3, 0, 0, 1);
	   -moz-transition:    -moz-transform .6s cubic-bezier(.3, 0, 0, 1), opacity .6s cubic-bezier(.3, 0, 0, 1);
	     -o-transition:      -o-transform .6s cubic-bezier(.3, 0, 0, 1), opacity .6s cubic-bezier(.3, 0, 0, 1);
	        transition:         transform .6s cubic-bezier(.3, 0, 0, 1), opacity .6s cubic-bezier(.3, 0, 0, 1);
}
article a { color: #4e72be; font-weight: 500; }
article a:hover { opacity: 0.6; }
article a:active {
	position: relative;
	top: 1px;
	opacity: 0.3;
	outline: none;
}


/* toggle */

.toggle {
	position: relative;
	display: block;
	width: 150px;
	height: 150px;
	border-radius: 100px;
	margin: auto;
	
	background: -webkit-gradient(radial, center top, 300, center top, 120, from(hsla(0,0%,50%,0)), to(hsla(0,0%,100%,.6)));
	background: -moz-radial-gradient(50% 0% 180deg, circle cover, hsla(0,0%,100%,.6) 50%, hsla(0,0%,80%,0) 100%);
	background:   -o-radial-gradient(50% 0% 180deg, circle cover, hsla(0,0%,100%,.6) 50%, hsla(0,0%,80%,0) 100%);
	background:      radial-gradient(50% 0% 180deg, circle cover, hsla(0,0%,100%,.6) 50%, hsla(0,0%,80%,0) 100%);
	
	-webkit-box-shadow: inset rgba(0,0,0,0.05) 0 -4px 5px, inset rgba(252,254,255,0.4) 0 4px 3px, rgba(0,0,0,0.1) 0 2px 1px;
	   -moz-box-shadow: inset rgba(0,0,0,0.05) 0 -4px 5px, inset rgba(252,254,255,0.4) 0 4px 3px, rgba(0,0,0,0.1) 0 2px 1px;
	     -o-box-shadow: inset rgba(0,0,0,0.05) 0 -4px 5px, inset rgba(252,254,255,0.4) 0 4px 3px, rgba(0,0,0,0.1) 0 2px 1px;
	        box-shadow: inset rgba(0,0,0,0.05) 0 -4px 5px, inset rgba(252,254,255,0.4) 0 4px 3px, rgba(0,0,0,0.1) 0 2px 1px;
	
	
	/* transition setup */
	-webkit-transform: translateY(-60px);
	   -moz-transform: translateY(-60px);
	     -o-transform: translateY(-60px);
	        transform: translateY(-60px);
	
	-webkit-transition: -webkit-transform .6s cubic-bezier(.3, 0, 0, 1);
	   -moz-transition:    -moz-transform .6s cubic-bezier(.3, 0, 0, 1);
	     -o-transition:      -o-transform .6s cubic-bezier(.3, 0, 0, 1);
	        transition:         transform .6s cubic-bezier(.3, 0, 0, 1);
}
.toggle:hover {
	padding: 1px;
	margin: auto;
}
.toggle:active {
	padding: 0px;
	margin: auto;
	
	background: -webkit-gradient(radial, center top, 300, center top, 120, from(hsla(0,0%,50%,0)), to(hsla(0,0%,100%,.3)));
	background: -moz-radial-gradient(50% 0% 180deg, circle cover, hsla(0,0%,100%,.3) 50%, hsla(0,0%,80%,0) 100%);
	background:   -o-radial-gradient(50% 0% 180deg, circle cover, hsla(0,0%,100%,.3) 50%, hsla(0,0%,80%,0) 100%);
	background:      radial-gradient(50% 0% 180deg, circle cover, hsla(0,0%,100%,.3) 50%, hsla(0,0%,80%,0) 100%);
}
#click_here{
	background: url(../images/click_here.png) no-repeat;
	width: 150px;
	height: 160px;
	position: absolute;
	top: 280px;
	left: 58%;
}
.toggle a {
	position: absolute;
	width: 150px;
	height: 150px;
	
	-webkit-transition: -webkit-transform .6s cubic-bezier(.3, 0, 0, 1);
	   -moz-transition:    -moz-transform .6s cubic-bezier(.3, 0, 0, 1);
	     -o-transition:      -o-transform .6s cubic-bezier(.3, 0, 0, 1);
	        transition:         transform .6s cubic-bezier(.3, 0, 0, 1);
}
.toggle .top {
	background: url(../images/logo.png) no-repeat;
	margin: auto;	
	left:0;
	-webkit-transform: rotate(0deg);
	   -moz-transform: rotate(0deg);
	     -o-transform: rotate(0deg);
	        transform: rotate(0deg);
}

/* :target - this makes it possible to have different "states" */
#what-am-i-doing{
	-webkit-transition: opacity .2s ease-out;
	   -moz-transition: opacity .2s ease-out;
	     -o-transition: opacity .2s ease-out;
	        transition: opacity .2s ease-out;
	
	-webkit-transition: -webkit-transform .6s cubic-bezier(.3, 0, 0, 1);
	   -moz-transition:    -moz-transform .6s cubic-bezier(.3, 0, 0, 1);
	     -o-transition:      -o-transform .6s cubic-bezier(.3, 0, 0, 1);
	        transition:         transform .6s cubic-bezier(.3, 0, 0, 1);
}
#box:target #what-am-i-doing{
	pointer-events: auto;
	opacity: 0.01;
	
	-webkit-transform: translateY(60px);
	   -moz-transform: translateY(60px);
	     -o-transform: translateY(60px);
	        transform: translateY(60px);
}

#box:target #click_here{
	pointer-events: auto;
	opacity: 0.01;
	
	-webkit-transform: translateY(60px);
	   -moz-transform: translateY(60px);
	     -o-transform: translateY(60px);
	        transform: translateY(60px);
}


#box:target article {
	pointer-events: auto;
	opacity: 1;
	
	-webkit-transform: translateY(0);
	   -moz-transform: translateY(0);
	     -o-transform: translateY(0);
	        transform: translateY(0);
}
#box:target .toggle {
	-webkit-transform: translateY(0) scale(.8);
	   -moz-transform: translateY(0) scale(.8);
	     -o-transform: translateY(0) scale(.8);
	        transform: translateY(0) scale(.8);
}

#box:target .toggle .top {
	pointer-events: none;	/* this let's you click trough elements that are overlapping */

	-webkit-transform: rotate(180deg);
	   -moz-transform: rotate(180deg);
	     -o-transform: rotate(180deg);
	        transform: rotate(180deg);
}
#box:target .toggle .bot {

	-webkit-transform: rotate(0deg);
	   -moz-transform: rotate(0deg);
	     -o-transform: rotate(0deg);
	        transform: rotate(0deg);
}

a#twitter-icon{
	background: url('../images/bg_socialicons.png') no-repeat;
	background-position: -90px 0px;
}
a#twitter-icon:hover{
	background-position: -90px -26px;
}

a#carbonmade-icon{
	background: url('../images/bg_socialicons.png') no-repeat;
	background-position: -60px 0px;
}
a#carbonmade-icon:hover{
	background-position: -60px -26px;
}

a#linkedin-icon{
	background: url('../images/bg_socialicons.png') no-repeat;
	background-position: -30px 0px;
}
a#linkedin-icon:hover{
	background-position: -30px -26px;
}

a#flickr-icon{
	background: url('../images/bg_socialicons.png') no-repeat;
	background-position: -150px 0px;
}
a#flickr-icon:hover{
	background-position: -150px -26px;
}

a#contact-icon{
	background: url('../images/bg_socialicons.png') no-repeat;
	background-position: -207px 0px;
}
a#contact-icon:hover{
	background-position: -207px -26px;
}


a#map-icon{
	background: url('../images/bg_socialicons.png') no-repeat;
	background-position: -177px 0px;
}
a#map-icon:hover{
	background-position: -177px -26px;
}

/****************************************************************************/

#target-slider{
	background: url('../images/bg-scuro.png');
	width: 100%;
	overflow:hidden;
	margin-top: 20px;
	-webkit-box-shadow: inset rgba(0,0,0,0.05) 0 -4px 5px, rgba(0,0,0,0.1) 0 2px 1px;
	   -moz-box-shadow: inset rgba(0,0,0,0.05) 0 -4px 5px, rgba(0,0,0,0.1) 0 2px 1px;
	     -o-box-shadow: inset rgba(0,0,0,0.05) 0 -4px 5px, rgba(0,0,0,0.1) 0 2px 1px;
	        box-shadow: inset rgba(0,0,0,0.05) 0 -4px 5px, rgba(0,0,0,0.1) 0 2px 1px;
}
.ei_menu{
	width: 200%;
	height: 500px;
	overflow: hidden;
}
.ei_menu ul{
	height:350px;
}
.ei_menu ul li{
	float:left;
	height: 500px;
	position: relative;
	overflow: hidden;
	border-right: 2px solid #666;
}
.ei_menu ul li .background-works{
	position: absolute;
	width: 175px;
}
.ei_menu li .small-photo{
	float: left;
	margin: 10px;
	margin-top: 80px;
}

.pos1 span{
	background-position:0px 0px;
}
.pos2 span{
	background-position:-75px 0px;
}
.pos3 span{
	background-position:-152px 0px;
}
.pos4 span{
	background-position:-227px 0px;
}
.pos5 span{
	background-position:-302px 0px;
}
.pos6 span{
	background-position:-377px 0px;
}
.slideshow{
	position: absolute;
	height: 500px;
	border-right: 7px solid #f0f0f0;
	left:175px;
	top:0px;
	background:#fff;
}
.slideshow ul{
	margin: 0;
	padding: 0;
	float: left;
	height: auto;
	background: #eee;
}
.slideshow ul li{
	height: auto;
	border-bottom: 3px solid #eee;
}

/* For the index_3 demo */
ul.trigger_list{
	position:absolute;
	right:20px;
	top:145px;
}
ul.trigger_list li{
	float:left;
	line-height:53px;
	color:#ddd;
	font-style:italic;
}
ul.trigger_list li a{
	display:block;
	background:#000;
	color:#ddd;
	line-height:35px;
	padding:5px 10px;
	margin:3px;
	border-radius:5px 5px 5px 5px;
	text-shadow:1px 1px 1px #000;
}
ul.trigger_list li a:hover{
	background:#222;
	color:#fff;
}


/**** CONTACT ME */

.contact{
	margin: auto;
	background: url('../images/post-box.png') no-repeat;
	width: 658px; 
	height: 303px;
}
.contact p{
	width: 400px;
	padding-right: 40px;
	float: right;
	text-align: left;
}
.contact_large{
	background: transparent url('../images/post-box.png') no-repeat;
	width: 600px;
	border: 1px solid #ddd;
	padding: 0px 5px 10px 15px;
	margin: 3em auto;
	text-align: left;
}
.contactus {
    line-height: 1;
	font-size: 18px;
	margin: auto;
}
.contactus ul.social {
    margin: 0;
    float: right;
}
.contactus ul.social li {
    float: left;
    padding: 0;
    margin: 0 0 0 5px;
    background: none;
}
.contactus ul.social li a{
	padding: 6px 13px 0px 14px;
}