html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}                 

.article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display:block;}


body {
 position:relative;
 height:100%;
 color:#FFF;
 text-align:left;
 margin:0;
 padding:0;
 font-weight:normal;
 font-family: 'AvantG';
 background:url(../img/bkg.gif) repeat top;
}

object, div, a {outline:none;}

ul, li, h1, h2, h3, h4, h5, h6, p {
	margin:0;
	padding:0;
	list-style:none;
}

.clear {clear:both;}


@font-face {
    font-family: 'AvantG';
    src: url('font/AvantG.eot');
    src: url('font/AvantG.eot?#iefix') format('embedded-opentype'),
         url('font/AvantG.woff') format('woff'),
         url('font/AvantG.ttf') format('truetype'),
         url('font/AvantG.svg#AvantG') format('svg');
    font-weight: normal;
    font-style: normal;
}


#nominee_dx {
	position:absolute;
	top:0;
	right:0;
	width:120px;
	height:120px;
	background:url(../img/css_nomineetag_black.png) no-repeat;
	z-index:100;
}

#nominee_dx a {display:block; width:120px; height:120px;}


#nominee_sx {
	position:absolute;
	top:0;
	left:0;
	width:164px;
	height:69px;
	background:url(../img/css-design-award-nominee-dark.png) no-repeat;
	z-index:100;
}

#nominee_sx a {display:block; width:164px; height:69px;}




/*### CONTENT ### */
#content {
	position:relative;
	width:990px;
	height:auto;
	margin:0 auto;
}

#content header h1 {
	position:absolute;
	top:0;
	left:195px;
	width:392px;
	height:196px;
	text-indent:-9000em;
	background:url(../img/logo_top.png) no-repeat;
	z-index:1;
}
#content header p {opacity:0;}


/* ########## SOCIAL ######## */
#content #social {
	position:absolute;
	top:0;
	right:0;
	width:57px;
	height:28px;
	z-index:100;
}

#content #social a {
	float:left;
	display:inline-block;
	width:27px;
	height:28px;
	background:url(../img/ico_social.png) no-repeat;
	text-indent:-9000em;
	margin-right:1px;
}

#content #social a.instagram {background-position:0 0;}
#content #social a.twitter {background-position:-28px 0;}




#content .logo_bottom {
	position:absolute;
	top:986px;
	right:5px;
	width:392px;
	height:197px;
	text-indent:-9000em;
	background:url(../img/logo_bottom.png) no-repeat;
	z-index:1;
}

#content .triangle_double01 {
	position:absolute;
	top:96px;
	left:95px;
	width:295px;
	height:199px;
	background: url(../img/triangle_double_01.png) no-repeat;
}

#content .triangle_double02 {
	position:absolute;
	top:396px;
	right:3px;
	width:198px;
	height:296px;
	background: url(../img/triangle_double_02.png) no-repeat;
}

#content .triangle_bottom {
	position:absolute;
	top:1182px;
	right:5px;
	width:196px;
	height:199px;
	background:url(../img/triangle_01_bottom.png) no-repeat;
	z-index:1;
}

#content .tangram01 {
	position:absolute;
	top:396px;
	left:-1px;
	width:394px;
	height:394px;
	background:url(../img/tangram_01.png) no-repeat;
	z-index:1;
}

#content .tangram02 {
	position:absolute;
	top:987px;
	left:197px;
	width:394px;
	height:394px;
	background:url(../img/tangram_02.png) no-repeat;
	z-index:1;
}


#content .square {
	position:absolute;
	width:394px;
	height:394px;
	background:url(../img/square.png) no-repeat;
	z-index:1;
}

#content .square h2 {
	position:absolute;
	top:180px;
	left:42px;
	width:320px;
	text-align:center;
	font-family:'AvantG', Tahoma, Geneva, sans-serif;
	font-size:32px;
	letter-spacing:10px;
	
}

#content .square h2 a {
	color:#FFF; 
	font-weight:normal; 
	text-decoration:none;
	-moz-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
#content .square h2 a:hover {color: #01bfdf;}


#content .square a.ico {
	position:absolute;
	top:240px;
	left:166px;
	display:block;
	width:66px;
	text-indent:-9000em;
	background:url(../img/icons.png) no-repeat;
	-moz-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}


/* ### BEHANCE ### */
#content .square.behance {top:0; left:393px; z-index:10;}
#content .square.behance a.ico {height:56px; background-position:0 0;}
#content .square.behance a.ico:hover {background-position:-84px 0;}


/* ### MOBILE ### */
#content .square.mobile {top:197px; left:195px;}
#content .square.mobile .ico {
	position:absolute;
	top:140px;
	left:137px;
	width:129px;
	height:108px;
	background:url(../img/ico_mobile.png) no-repeat;
	text-indent:-9000em;
}


/* ### PHOTOBEE ### */
#content .square.photobee {top:197px; left:591px; z-index:9;}
#content .square.photobee a.ico {height:56px; background-position:0 -82px;}
#content .square.photobee a.ico:hover {background-position:-84px -82px;}


/* ### DESKTOP ### */
#content .square.desktop {top:394px; left:393px;}
#content .square.desktop .ico {
	position:absolute;
	top:130px;
	left:97px;
	width:203px;
	height:162px;
	background:url(../img/ico_desktop.png) no-repeat;
	text-indent:-9000em;
}


/* ### LINKEDIN ### */
#content .square.linkedin {top:591px; left:195px; z-index:9;}
#content .square.linkedin a.ico {height:56px; background-position:0 -155px;}
#content .square.linkedin a.ico:hover {background-position:-84px -155px;}

/* ### CONTACT ### */
#content .square.contact {top:788px; left:393px; z-index:8;}
#content .square.contact a.ico {height:70px; background-position:0 -227px;}
#content .square.contact a.ico:hover {background-position:-84px -227px;}


/* ### FOOTER ### */
footer {
	position:absolute;
	top:1430px;
	left:0;
	width:auto;
	height:23px;
	background:#000;
	padding:7px 20px 0 10px;
	border-right:5px solid #01bfdf;
}

footer h5, footer h6 {
	font-family:'AvantG', Tahoma, Geneva, sans-serif;
	font-size:13px;
	color:#FFF;
	letter-spacing:4px;
	font-weight:normal;
}

footer h6 {display:none;}

footer p {opacity:0;}



/* ################################ MOBILE ################################### */
#content #mob {
	display:none;
	position:absolute;
	top:250px;
	left:10px;
}

#content #mob .ico_desktop {
	position:absolute;
	top:-251px;
	left:-82px;
	width:223px;
	height:224px;
}

#content #mob .ico_mobile {
	position:absolute;
	top:-251px;
	right:-76px;
	width:223px;
	height:224px;
}

#content #mob ul {margin-bottom:30px;}

#content #mob ul li {
	padding:10px 5px;
	background:#000;
	margin-bottom:1px;
}

#content #mob ul li a {
	display:block;
	font-size:25px;
	color:#FFF;
	font-weight:normal;
	letter-spacing:10px;
	padding-top:10px;
	text-decoration:none;
}

#content #mob ul li span.ico {
	float:left;
	display:inline-block;
	width:66px;
	height:56px;
	background:url(../img/icons.png) no-repeat;
	margin-right:10px;
}

#content #mob ul li.behance span.ico {background-position:0 0;}
#content #mob ul li.photobee span.ico {background-position:0 -82px;}
#content #mob ul li.linkedin span.ico {background-position:0 -155px;}
#content #mob ul li.contact span.ico {background-position:0 -308px;}