/* ----- CLASSES ----- */
.last { margin: 0; }
.intro, p .intro { font-size: 24px; line-height: 30px; font-style: italic; }
.quote { font-size: 20px; line-height: 24px; font-style: italic; }
.table { display: table; }
.table-row { display: table-row; }
.table-cell { display: table-cell; }
.hide { display: none; }
/* ----- GENERAL ----- */
html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
body { color: #d9d9d9; background: #16150f none; font: 13px/20px 'proxima-nova', "Helvetica Neue", Helvetica, Arial, sans-serif; overflow-x: hidden; }
a:link, p a, a:visited { color: #0063dc; text-decoration: none; }
a:hover,
.desc h3 a:hover { color: #d9d9d9; 
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
a,
input:focus,
select:focus,
textarea:focus,
button:focus {
	outline: none !important;
}
input[type=text]:focus { opacity: 1; -o-transform:translate(0,-10px);
-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out; }
p { margin: 0 0 20px 0; }
ul, ol { margin: 0; padding: 0; }
blockquote { margin: 0 0 10px 0; padding: 0; font-size: 18px; line-height: 22px; }
small, blockquote small { font-size: 13px; line-height: 22px; }
strong, blockgoute strong { font-family:'proxima-nova', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold; }
blockgoute strong { font-size: 16px; line-height: 20px; }
h1, h2, h3 { font-weight: normal; font-family:'proxima-nova', "Helvetica Neue", Helvetica, Arial, sans-serif; }
hr { width: 100%; height: 1px; background-color: #e9e9e9; border: 0; padding: 0; margin: 40px 0; display: block; clear: both; }
h1 { font-size: 130px; line-height: 120px; color: white; font-weight: bold; text-shadow: 0 0 59px rgba(0,0,0, 0.6); }
h2 { font-size: 14px; line-height: 20px; margin: 0 0 20px 0; }
h3 { font-size: 16px; line-height: 20px; margin: 0 0 20px 0; }
input[type=text] { border: 0; opacity: 0.8; }
input[type=text],
input[type=submit] { font-family: 'proxima-nova', "Helvetica Neue", Helvetica, Arial, sans-serif; }
*::-moz-selection {
    background: black;
    color: white;
}
*::-webkit-selection {
    background: black;
    color: white;
}
*::selection {
    background: black;
    color: white;
}
input::-webkit-input-placeholder { color: #d9d9d9; }
/* ----- LAYOUT ----- */
#wrapper { width: 100%; height: 100%; margin: 0; padding: 0; background: /*white url('../img/bg.jpg') 0 0 repeat*/ transparent; position:relative; }

#toolbar { float: right; background-color: #1a171b; width: 106px; height: 100%; position: relative; z-index: 10; }
#toolbar-inner { padding: 48px 23px; }
#toolbar-inner a { display: block; text-align: center; }
#icons { position: absolute; /*top: 18%;*/ bottom: 50px;  width: 37px; padding: 0 12px; }
#icons a { opacity: 0.3; }
#icons a:hover { opacity: 1; 
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out; }
#be { margin-bottom: 43px; }
#facebook { margin-bottom: 50px; }
#twitter { margin-bottom: 50px; }
#cloud { margin-bottom: 50px; }
#mail { margin-bottom: 40px; }
#blog { color: white; font-size: 14px; line-height: 37px; text-transform: uppercase; margin-bottom: 40px; }
#settingx { position: absolute; bottom: 65px; left: 39px; opacity: 0.8; }
#settingx:hover { opacity: 1; 
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out; }
#logo { font-size: 20px; line-height: 19px; text-transform: uppercase; color: white; text-align: center; }
#logo strong, #logo span { display: block; width: 100%; text-align: center; }
#logo strong { font-size: 20px; font-weight: 700; }
#logo span { font-weight: 300; font-size: 22px; position: relative; left: 2px; }

#middle {  width: 80%; margin: 0 auto; z-index: 8; }

#middle h1 { 
	z-index: 3; 
	text-align: center; 
	font-weight: 800; 
	text-transform: uppercase;
	padding: 24% 106px 0 0;
	}
	

#info { margin: 13px 0 0 10px; position: relative; z-index: 5; width: 94%; background-color: white; overflow: hidden; height: 0; }
#info.on #info-inner { display: block; }
#info.on { height: 58px; }
#info-inner { display: none; padding: 20px 30px 20px 30px;  overflow: hidden; font-size: 12px; line-height: 17px; color: black; text-transform: uppercase; }
#info-inner a { text-decoration: underline; color: black; }
#info-inner a:hover { text-decoration: none; }
.tool { float: left; margin-right: 27px; }
.close { float: right; margin-left: 27px; }
#info-inner p { margin: 0; }

#bottom { position: absolute; left: 0; bottom: 34px; width: 100%; height: 92px; overflow: hidden; z-index: 9;}
.action-icon { width: 92px; height: 92px; background-color:#fff; -moz-border-radius: 50px; border-radius: 50px; overflow: hidden; }
.action-icon .trigger { display: block; width: 92px; height: 92px; float: left; }
.trigger img { display: block; }
#refresh { float: left; margin-left: 65px; }
#refresh img { margin: 20px 0 0 21px; }
#link { position: relative; float: left; margin-left: 20px; }
#link img { margin: 26px 0 0 25px; }
.detail { display: none; float: left; }
#link .detail { padding-right: 20px; width: auto; margin-top: 3px; overflow: hidden; }
#link.on { /*width: auto;*/ background-color:#fff; -moz-border-radius: 50px; border-radius: 50px; }
#link.on .detail{ width: auto; display: block; font-size: 13px; line-height: 92px; color: #666666; text-transform: uppercase; }
#link.on .detail a { color: black;  }
#cup { float: right; margin-right: 171px; }
#cup img { margin: 26px 0 0 30px; }
#cup.on, #cup:hover { width: 490px; }
#cup.on .trigger, #cup:hover .trigger { float: right; }
#cup.on .detail, #cup:hover .detail { display: block; float: left; width: 360px; padding: 24px 0 0 38px; text-align: right; font-size: 13px; line-height: 22px; color: black; text-transform: uppercase; }
#cup.on .detail a, #cup:hover .detail a { color: black; text-decoration: underline; }
#cup.on .detail a:hover, #cup:hover .detail a:hover { text-decoration: none; }
#website { position: absolute; top: 40px; left: 180px; font-size: 13px; letter-spacing: 3px; line-height: 18px; color: white; text-transform: uppercase; white-space: nowrap; }
.project-link { min-width: 64px; }

#kaleidos {
  position: fixed;
  top: 0; left: 0;
  cursor: pointer;
  width: 100%;
  z-index: -100;
}

.info-text {
  display: none; 
}

#wrapper {
  /* cursor: pointer; */
}

#wrapper div {
  cursor: default;   
}

.transition {
    -moz-transition: height 0.3s ease-in-out, width 0.3s ease-in-out;
	-webkit-transition: height 0.3s ease-in-out, width 0.3s ease-in-out;
	-o-transition: height 0.3s ease-in-out, width 0.3s ease-in-out;
	-ms-transition: height 0.3s ease-in-out, width 0.3s ease-in-out;
	transition: height 0.3s ease-in-out, width 0.3s ease-in-out;
}



@media screen and (max-width:29.9999em) {
	h1 { font-size: 35px; line-height:30px; }
	#middle h1 {
padding: 40% 106px 0 0;
	}
	
	#website {
		display:none;
	}
	
	#refresh {
		margin-left:95px;}

}

/* phone and portrait tablet (< 960px) */
@media screen and (max-width:59.9999em) {
	
		h1 { font-size: 35px;line-height:30px; }
		#middle h1 {
padding: 40% 106px 0 0;
	}
	
	#website {
		display:none;
	}
	
	#refresh {
		margin-left:95px;}
		
		
}
/* landscape phone and portrait tablet (>= 480px < 960px) */
@media screen and (min-width:30em) and (max-width:59.9999em) {

  	h1 { font-size: 40px; }
  
}




/* landscape tablet & normal monitor (>= 480px < 800px) */
@media screen and (min-width:800px) and (max-width:1024px) {
		
			h1 { font-size: 60px; }
		
}


/* landscape tablet & normal monitor (>= 960px < 1440px) */
@media screen and (min-width:60em) and (max-width:89.9999em) {
	
	h1 { font-size: 90px; line-height: 80px;}

  
}