@charset "utf-8";

#hide {
	display:none;
}

@font-face {
	font-family: "roboto";
	src:url("../font/roboto.otf") format("opentype"),
	url("../font/roboto.ttf") format("truetype");
}

@font-face {
	font-family: "robotoitalic";
	src:url("../font/robotoitalic.otf") format("opentype"),
	url("../font/robotoitalic.ttf") format("truetype");
}

@font-face {
	font-family: "robotolight";
	src:url("../font/robotolight.otf") format("opentype"),
	url("../font/robotolight.ttf") format("truetype");
}

@font-face {
	font-family: "robotoblack";
	src:url("../font/robotoblack.otf") format("opentype"),
	url("../font/robotoblack.ttf") format("truetype");
}

body {
	background:#E3E3E3;
	color:#1B1B1B;
	font-family:"roboto", sans-serif;
	font-size:medium;
	padding:0px;
	margin:0px;
	padding-bottom:10px;
}

em {
	font-family: "robotoitalic", sans-serif;
}

a {
	color:inherit;
}

a img {
	border:none;
}

#toptab {
	width:auto;
	height:auto;
	background:#D17A7A;
	padding:4px;
	font-size:medium;
	padding-top:30px;
	position:fixed;
	right:0;
	top:0;
	margin-right:1%;
	color:white;
	z-index:9990;
	cursor:pointer;
}

#fader {
	width:100%;
	height:100%;
	display:block;
	position:fixed;
	top:0;
	left:0;
	z-index:9995;
	background:#000;
	opacity:0.8;
	cursor:pointer;
}

#mightybox {
	width:86%;
	height:88%;
	display:block;
	background:white;
	border:2px solid #DDD;
	padding:1% 2%;
	position:fixed;
	top:0;
	left:0;
	z-index:9999;
	overflow:auto;
}

.screen {
	width:100%;
	/*min-height:600px;*/
	float:left;
	position:relative;
}

.web {
	color:#8C4245;
}

.web_b {
	background:#8C4245;
}

.mobile {
	color:#50428A;
}

.mobile_b {
	background:#50428A;
}

.more {
	color:#4E8847;
}

.more_b {
	background:#4E8847;
}

.article {
	color:#009966;
}

.article_b {
	background:#009966;
}

#topbar {
	width:100%;
	height:5px;
	background:#D17A7A;
}

#wordmark {
	width:100%;
	height:auto;
	font-size:4.2em;
	color:#1B1B1B;
	text-transform:lowercase;
	text-align:center;
	margin-top:80px;
	cursor:default;
}

#introtext {
	/*width:900px;*/
	width:100%;
	height:auto;
	margin:auto;
	text-align:center;
	/*padding-left:100px;*/
	color:#686668;
	cursor:default;
	font-size:2.7em;
	margin-top:120px;
}

#introtext span {
	color:#EAEAEA;
}

#sectionlinks {
	width:100%;
	height:auto;
	font-size:2em;
	text-align:center;
	text-transform:uppercase;
	margin-top:80px;
}

#sectionlinks a {
	text-decoration:none;
}

.hc {
	width:1000px;
	display:block;
	margin:auto;
	margin-top:10px;
}

.heading {
	width:auto;
	display:inline-block;
	padding:2px 20px;
	font-size:3.4em;
	text-transform:uppercase;
	font-family:"robotoblack", "roboto", sans-serif;
	cursor:default;
	margin-left:40px;
}

.headbar {
	width:auto;
	height:auto;
	display:block;
	position:absolute;
	right:0;
	top:0;
	margin-top:10px;
}

@media screen and (max-width: 45em) {
	.hc {
		width:100%;
		display:block;
		margin:auto;
		margin-top:10px;
	}
	
	.heading {
		width:auto;
		display:inline-block;
		padding:2px 20px;
		font-size:3.4em;
		text-transform:uppercase;
		font-family:"robotoblack", "roboto", sans-serif;
		cursor:default;
		margin-left:10px;
	}
	
	#wordmark {
		width:100%;
		height:auto;
		font-size:3.2em;
		color:#1B1B1B;
		text-transform:lowercase;
		text-align:center;
		margin-top:80px;
		cursor:default;
	}
	
	#introtext {
		/*width:900px;*/
		width:100%;
		height:auto;
		margin:auto;
		text-align:center;
		/*padding-left:100px;*/
		color:#686668;
		cursor:default;
		font-size:2.2em;
		margin-top:120px;
	}
}

#web_area {
	width:1000px;
	height:auto;
	margin:auto;
}

#web_area .item {
	width:100%;
	height:auto;
	min-height:180px;
	display:inline-block;
	margin-top:25px;
}

#web_area .item .pic {
	width:176px;
	height:176px;
	display:block;
	margin-right:1%;
	margin-bottom:10px;
	background:#8C4245;
	border:2px solid #8C4245;
	position:relative;
	float:left;
}

#web_area .item .pic .ol {
	width:176px;
	height:176px;
	display:block;
	background:url(../img/web_overlay.png) no-repeat;
	position:absolute;
	top:0;
	left:0;
	z-index:99;
}

#web_area .item:hover .pic .ol {
	display:none;
}

#web_area .item .header {
	width:98%;
	height:auto;
	font-size:xx-large;
	font-family:"robotoblack", sans-serif;
	margin:0px 1%;
	padding:5px 0px;
	border-bottom:2px solid #8C4245;
	display:block;
}

#web_area .item span {
	width:98%;
	height:auto;
	display:block;
	font-size:medium;
	padding:8px 1%;
}

#web_area .item span h1 {
	display:none;
}

#web_area .item .linkarea {
	width:100%
	height:auto;
	display:block;
	margin:10px 0px;
}

#web_area .item .linkarea a {
	width:auto;
	height:auto;
	padding:4px 8px;
	margin-right:4px;
	display:inline-block;
	text-decoration:none;
	background:#D0D0D0;
}

#web_area .item .linkarea a:hover {
	background:#8C4245;
	color:white;
}

/* Mobile */
@media screen and (max-width: 45em) {
	#web_area {
		width:100%;
		height:auto;
		margin:auto;
		overflow:hidden;
	}
	
	#web_area .item {
		width:96%;
		height:auto;
		min-height:none;
		display:block;
		margin-top:25px;
		padding:0px 2%;
	}
	
	#web_area .item .pic {
		width:100%;
		height:176px;
		display:block;
		margin-right:1%;
		margin-bottom:10px;
		background:none;
		border:none;
		position:relative;
		float:none;
		text-align:center;
	}
	
	#web_area .item .pic img {
		background:#8C4245;
		border:2px solid #8C4245;
	}
	
	#web_area .item .pic .ol {
		display:none;
	}
	
	#web_area .item .header {
		width:98%;
		height:auto;
		font-size:xx-large;
		font-family:"robotoblack", sans-serif;
		margin:0px 1%;
		padding:5px 0px;
		border-bottom:2px solid #8C4245;
		display:block;
		text-align:center;
	}
	
	#web_area .item span {
		width:98%;
		height:auto;
		display:block;
		font-size:medium;
		padding:8px 1%;
	}
	
	#web_area .item .linkarea {
		width:100%
		height:auto;
		display:block;
		margin:10px 0px;
	}
	
	#web_area .item .linkarea a {
		width:94%;
		height:auto;
		margin:6px 3% 0px 3%;
		padding:12px 0px;
		display:inline-block;
		text-align:center;
		text-decoration:none;
		border-left:none;
	}
	
	#web_area .item .linkarea a:hover {
		background:#8C4245;
		color:white;
	}
}

/* Old Icons */
#web_icons {
	width:1000px;
	height:auto;
	margin:auto;
}

#web_icons .item {
	width:180px;
	height:auto;
	display:inline-block;
	margin:0px 32px;
	margin-top:60px;
	text-align:left;
	font-size:medium;
	cursor:pointer;
}

#web_icons .pic {
	width:176px;
	height:176px;
	display:block;
	margin-bottom:10px;
	background:#8C4245;
	border:2px solid #8C4245;
	position:relative;
}

#web_icons .pic .ol {
	width:176px;
	height:176px;
	display:block;
	background:url(../img/web_overlay.png) no-repeat;
	position:absolute;
	top:0;
	left:0;
	z-index:99;
}

#web_icons .item:hover .pic .ol {
	opacity:0.3;
}

/* Mobile */
@media screen and (max-width: 45em) {
	#web_icons {
		width:100%;
		height:auto;
		margin:auto;
	}
	
	#web_icons .item {
		width:40%;
		margin:20px 2.5%;
		font-size:x-large;
		text-align:center;
	}
	
	#web_icons .pic {
		width:100%;
		height:auto;
		border:none;
		background:none;
	}
	
	#web_icons .pic .ol {
		display:none;
	}
}

.mobile_wrap {
	width:900px;
	height:auto;
	min-height:382px;
	display:block;
	margin:auto;
	margin-top:60px;
	font-size:2.2em;
	padding-right:100px;
}

.mobile_wrap .app_pic {
	width:220px;
	height:382px;
	margin-top:-30px;
}

.mobile_wrap #app_capsul {
	background:url(../img/capsul.png);
	float:left;
	margin-left:140px;
	margin-right:20px;
}

.mobile_wrap #app_whisk {
	background:url(../img/whisk.png);
	float:right;
	margin-left:20px;
	margin-right:140px;
}

.mobile_wrap .big {
	width:100%;
	height:auto;
	display:block;
	margin-bottom:5px;
	font-size:1.6em;
	font-family:"robotolight", "roboto", sans-serif;
}

.ar {
	text-align:right;
}

@media screen and (max-width: 45em) {
	.mobile_wrap {
		width:98%;
		height:auto;
		min-height:none;
		display:block;
		margin:45px 1% 20px 1%;
		font-size:2.2em;
		padding-right:0px;
		text-align:center;
	}
	
	.mobile_wrap .app_pic {
		width:100%;
		height:382px;
		margin-top:0px;
	}
	
	.mobile_wrap #app_capsul {
		background:url(../img/capsul.png) no-repeat center;
		float:none;
		margin-left:0px;
		margin-right:0px;
	}
	
	.mobile_wrap #app_whisk {
		background:url(../img/whisk.png) no-repeat center;
		float:none;
		margin-left:0px;
		margin-right:0px;
	}
	
	.mobile_wrap .big {
		width:100%;
		height:auto;
		display:block;
		margin-bottom:5px;
		font-size:1.6em;
		font-family:"robotolight", "roboto", sans-serif;
	}
	
	.ar {
		text-align:center;
	}
}

#more_wrap {
	width:900px;
	height:auto;
	margin:auto;
}

#more_wrap .about_head {
	width:95%;
	padding-left:5%;
	font-size:xx-large;
	margin-top:20px;
	font-family:"robotoblack", sans-serif;
}

#more_wrap .about_content {
	width:92%;
	padding-left:8%;
	font-size:medium;
}

#more_wrap .about_content ol {
	width:100%;
	height:auto;
	display:block;
}

#more_wrap .about_content ol li {
	width:45%;
	height:auto;
	display:inline-block;
	padding:1% 2%;
	background:url(../img/more_dot.png) no-repeat left center;
}

@media screen and (max-width: 45em) {
	#more_wrap {
		width:96%;
		height:auto;
		margin:0px 2%;
		overflow:hidden;
	}
	
	#more_wrap .about_head {
		width:98%;
		padding:5px 1% 0px 1%;
		font-size:xx-large;
		margin-top:20px;
	}
	
	#more_wrap .about_content {
		width:94%;
		padding:5px 3%;
		font-size:medium;
		margin-bottom:30px;
	}
	
	#more_wrap .about_content ol li {
		width:80%;
		height:auto;
		display:block;
		padding:10px 10%;
		background:url(../img/more_dot.png) no-repeat left center;
	}
}

/* Old Lightbox */
#project_info {
	width:98%;
	height:auto;
	padding:0.5% 1%;
	float:left;
	position:relative;
}

#project_info .sidebar {
	width:98%;
	padding-right:1%;
	border-bottom:1px solid #AAA;
	float:left;
	padding-bottom:10px;
	margin-bottom:10px;
}

#project_info .sidebar .name {
	width:98%;
	padding-left:1%;
	font-size:xx-large;
	text-align:left;
	margin-bottom:10px;
	padding-top:10px;
	font-family:"robotolight", "roboto", sans-serif;
}

#project_info .sidebar .bigpic {
	width:176px;
	height:176px;
	display:block;
	margin:auto;
	background:#8C4245;
	margin-bottom:10px;
	padding:2px;
	float:left;
	margin-right:10px;
}

#project_info .sidebar a {
	width:auto;
	min-height:22px;
	padding:5px 0px;
	padding-top:10px;
	padding-right:10px;
	text-size:medium;
	display:block;
	background-position:left center;
	background:repeat:no-repeat;
	text-indent:36px;
	text-decoration:none;
	float:left;
}

#project_info .sidebar a:hover {
	background-color:#EEE;
}

#project_info .sidebar a .icon {
	width:32px;
	height:32px;
	display:block;
	float:left;
}

.icon_web {
	background:url(../img/icon_web.png) no-repeat center;
}

.icon_study {
	background:url(../img/icon_study.png) no-repeat center;
}

#project_info .main {
	width:96%;
	margin-left:2%;
	font-size:medium;
	float:left;
}

#project_info .main h1 {
	width:100%;
	height:auto;
	display:block;
	padding:0px;
	margin:5px 0px;
	font-size:x-large;
	color:#777;
}

.spinner {
	width:32px;
	height:32px;
	display:block;
	background:url(../img/load.gif) no-repeat;
	position:absolute;
	z-index:9999;
}