/* - GLOBAL - */

html { 
  font-size: 100%;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
	font-family: Helvetica, Arial;
	margin: 0px;
	padding: 0px;
	background: #fff;
}

a {
	font-weight: bold;
}

a:hover, a:active { outline: 0; }


::-moz-selection{ background: #333333; color:#fff; text-shadow: none; }
::selection { background:#333333; color:#fff; text-shadow: none; }




/* - GLOBAL - */

#main {
	width: 900px;
	margin: 0 auto;
}

/* - HEADER - */

#header {
	z-index: 0;
	position:relative;
	width:220px;
	height:150px;
	margin: 0 auto;
	padding-top:50px;
	padding-bottom:50px;
	margin-bottom:35px;
	font-size: 12px;
	line-height: 12px;
	font-style: normal;
	color: #999;
	text-align: center;
	-webkit-transition: all .1s ease;
	-moz-transition: all .1s ease;
	-ms-transition: all .1s ease;
	-o-transition: all .1s ease;
	transition: all .1s ease;
}
#header a {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	font-weight: normal;
	color: #333;
}
#header p {
	margin-top:24px;
}
#header h1 {
	font-family: Helvetica, Arial;
	letter-spacing: normal;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	color: #333;
	font-style: normal;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
	background:#fff;
	width:126px;
	margin:0 auto;
	padding-bottom:8px;
	position:relative;
	left:1px;
}
#header #line {
	height: 1px;
	width:100%;
	background:#ddd;
	position:relative;
	top:6px;
	z-index:-1;
}

#header_picca {
	position:relative;
	width:130px;
	height:130px;
	margin: 0 auto;
	background: url("../images/site/face.png") 23px -4px;
}
#header_picca_bg {
	z-index: -1;
	position: absolute;
	top: 1px;
	left: 0px;
	width: 130px;
	height: 130px;
	margin: 0 auto;
	background: #333333;
	-webkit-border-radius: 80px;
	-moz-border-radius: 80px;
	-o-border-radius: 80px;
	border-radius: 20px;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
	background-color: #333333;
}

#header:hover h1 {
	color: #333333;
}
#header:hover #header_picca {
	background: url("../images/site/face.png") -79px -4px;
}
#header:hover #header_picca_bg {
	width: 140px;
	height: 140px;
	left: -5px;
	top: -5px;
	-webkit-border-radius: 80px;
	-moz-border-radius: 80px;
	-o-border-radius: 80px;
	border-radius: 80px;
	background-color: #333333;
}

#header:active {
	filter: alpha(opacity=50);
  -khtml-opacity: 0.5;
  -moz-opacity: 0.5;
  opacity: 0.5;
}

.no-csstransforms #header #header_picca_bg {
  background: #fff url("../images/site/header_ie.jpg") 0px 0px;
}
.no-csstransforms #header:hover #header_picca_bg {
  background: #fff url("../images/site/header_ie.jpg") -140px 0px;
  width:130px;
	height:130px;
	left:0px;
	top:0px;
}

/* - PROJECT THUMBNAILS - */

#content {
	position:relative;
	width:900px;
	left:0px;
	margin:0 auto;
	margin-bottom: 80px;
	font-size: 0; /* removes spacing between projects (because of display:inline-block) */
}
.thumb {
	display:inline-block;
	margin:0px 5px 10px 5px;
	padding: 0;
	width:290px;
	height:200px;
	position:relative;
	-webkit-transition: all .1s ease;
  -moz-transition: all .1s ease;
  -ms-transition: all .1s ease;
	-o-transition: all .1s ease;
	transition: all .1s ease;
	border-radius: 8px;
}

.no-opacity .thumb { /* <IE8 project thumbnail fix */
	overflow:hidden;
	float:left; /* and <IE8 project thumbnail positioning fix: */
}

.thumb:active {
	filter: alpha(opacity=50);
  -khtml-opacity: 0.5;
  -moz-opacity: 0.5;
  opacity: 0.5;
}

.thumb img {
	position:relative;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}
.thumb:hover img {
	filter: alpha(opacity=0);
  -khtml-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
}

.no-opacity .thumb:hover img { /* <IE8 project thumbnail fix */
  left: -300px;
}

.thumb:hover .description h1 {
	filter: alpha(opacity=100);
  -khtml-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}
.thumb:hover .description h2 {
	filter: alpha(opacity=50);
  -khtml-opacity: 0.5;
  -moz-opacity: 0.5;
  opacity: 0.5;
}
.thumb .description {
	position:absolute;
	top:76px;
	width:290px;
}
.thumb .description h1 {
	font-family: Helvetica, Arial;
	letter-spacing: normal;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	color: #fff;
	font-style: normal;
	text-align: center;
	filter: alpha(opacity=0);
  -khtml-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;	
}
.thumb .description h2 {
	font-size: 12px;
	line-height: 12px;
	font-style: normal;
	color: #fff;
	font-weight:normal;
	text-align: center;
	filter: alpha(opacity=0);
  -khtml-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}

.thumb a {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration:none;
}

.thumb a img {
	border: 0;
}


/* - PROJECT - */

#project {
  position:relative;
  width:890px;
  left: 5px;
	font-size: 12px;
  text-align:center;
}

#project #info {
  margin:0 auto;
  margin-bottom:40px;
  position:relative;
  width:100%;
  max-width:1190px;
  text-align:left;
  display: table;
  border-collapse: collapse;
}

#project #info #left {
	display: table-cell;
	width: auto;
	line-height: 20px;
	text-align: left;
}

#project #info .right {
  display: table-cell;
  padding-left:30px;
  line-height: 20px;
}

.no-csstransforms #project #info .right  { /* <IE8 display-table fix */
  padding-left:0px;
  margin-top:20px;
}
.no-csstransforms #project #info h2  { /* <IE8 display-table fix */
  margin-bottom:0px;
}

#project #info div {
	display: inline-block;
	font-size: 14px;
	font-style: normal;
	font-weight: normal;
	color: #666666;
}

#project #info h1 {
	margin: 0px;
	position: relative;
	top: -4px;
	font-family: Helvetica, Arial;
	letter-spacing: normal;
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
	font-style: normal;
	color: #333;
}

#project #info h2 {
	margin: 0px;
	position: relative;
	top: -4px;
	margin-bottom: -1px;
	font-family: Helvetica, Arial;
	letter-spacing: normal;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	font-style: normal;
	color: #333;
}

#project #info a {
	font-weight: normal;
	color: #00baff;
	border-bottom: 1px solid #fff;
	text-decoration: none;
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	-ms-transition: all .2s ease;
	-o-transition: all .2s ease;
	transition: all .2s ease;
}
#project #info a:hover {
  border-bottom: 1px solid #00baff;
}

#project #info .right .projectlink {
  border-bottom: 1px solid #fff;
  color: #00baff;
}
#project #info .right .projectlink:hover {
  border-bottom: 1px solid #00baff;
}

#project hr {
  border: 0;
  background: #dedede;
  height:1px;
  margin-bottom:40px;
}

#project img {
  position:relative;
  width:100%;
  max-width:890px;
  display:block;
  margin: 0 auto;
  margin-bottom:50px;
}

#project .white {
  border: 1px solid #e7e7e7;
}

/* - MOBILE FORMATTING - */

#about_mobile {
	position:relative;
	left:5px;
	width:290px;
	color: #444;
	top:-20px;
}

#contact_mobile {
	position:relative;
	right:-5px;
	color: #444;
	text-align:center;
}
#contact_mobile .button {
	position: relative;
	display:inline-block;
	top:0px;
	left:0px;
	margin-left: 2px;
	margin-right: 9px;
	float:none;
	margin-bottom: 40px;
}
#contact_mobile p {
  position:relative;
	left:0px;
	top:0px;
}

#dancedancedance_mobile {
  position:relative;
	float:left;
	top:-35px;
	height:178px;
}

/* ------------------------------- MEDIA QUERIES ------------------------------- */

.mobile {
  display:none;
}

.ipad {
  display:none;
}

@media (max-width: 940px) { /* ------- 2 columns (ipad) ------- */
	#content {
  	width: 600px;
  }
  #main {
  	width: 600px;
  }
  #project {
    width:590px;
  }
  .ipad {
    display:inline;
    left:260px;
  }
  #dancedancedance {
    display:none;
  }
  #project #info .right {
    display: table-cell;
    padding-left:0px;
    padding-right:30px;
  }
  #project #info #left {
    display: block; 
    width: 100%;
    margin-bottom:30px;
  }
  #project #info {
    display:inline-block;
  }
}

@media (max-width: 640px) { /* ------- 1 column (mobile) ------- */
	#content {
  	width: 300px;
  }
  #main {
  	width: 300px;
  }
  #project {
    width:290px;
  }
  .mobile {
    display:inline-block;
  }
  .ipad {
    display:inline-block;
    left:100px;
  }
  #backtotop {
    display:none;
  }
  #project img {
    margin-bottom:10px;
  }
  #project hr {
    margin-top:30px;
  }
  #project #info .right {
    padding-left:0px;
    padding-right:0px;
    padding-bottom:20px;
    display:block;
  }
  #project #info #left {
    display: block; 
    width: 100%;
    margin-bottom:20px;
  }
  #project #info {
    display:block;
    margin-bottom:0px;
  }
  #project #info h2 {
	position: relative;
	top: 0px;
	margin-bottom: 4px;
	font-family: Helvetica, Arial;
	letter-spacing: normal;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	font-style: normal;
	color: #333;
  }
}