@charset "UTF-8";

html {
	-webkit-font-smoothing: antialiased;
}

body {
  font-family: 'Roboto', "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 32px;
  font-weight: 300;
  background-color: #fafafa;
  color: #000;
	min-width: 890px;
}

a:link {
	color:#1d8df2; text-decoration:none;
	-webkit-transition:color 300ms ease 0;
	-moz-transition:color 300ms ease 0;
	-o-transition:color 300ms ease 0;
	transition:color 300ms ease 0;
}
a:visited { color:#1d8df2; text-decoration:none; }
a:hover { color:#1d8df2; text-decoration:none; }
a:active { color:#1d8df2; text-decoration:none; }





/* IE6 */
* html body {
min-width:890px;
width:expression(document.documentElement.clientWidth < 890? "890px" : "auto");
font-size:75%;
}
/* IE7 */
*+html body { font-size:75%; }

.clearfix:after {
content:"."; 
display:block; 
clear:both; 
visibility:hidden;
height:0;
}
.clearfix {display:inline-block;}
* html .clearfix { height:1%; }
.clearfix {display:block;}


.mb1 {
	margin-bottom: 10px;
}
.mb2 {
	margin-bottom: 20px;
}
.mb3 {
	margin-bottom: 30px;
}
.mb4 {
	margin-bottom: 40px;
}
.mb5 {
	margin-bottom: 50px;
}
.mb6 {
	margin-bottom: 60px;
}

.col1 {
	color: #1d8df2;/* color: #14a0fd; */
}
.bgcol1 {
	background-color: #1d8df2;
}
.col2 {
	color: #999;
}

.opacity {
	opacity:0.8;
	filter: alpha(opacity=80);
	-ms-filter: "alpha(opacity=80)";
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
}

ul.mark {
	list-style-type: disc;
	list-style-position: inside;
}
ol.mark {
	list-style-type: decimal;
	list-style-position: inside;
}





a.btn {
	display: inline-block;
	margin-top: 50px;
	font-size: 18px;
	letter-spacing: 1px;
	font-weight: 200;
	text-decoration: none;
  box-shadow: inset 0px 0px 0px 2px #fff;
	border-radius: 6px;
	background-color:rgba(255,255,255,0.20);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#30ffffff,endColorstr=#30ffffff); 
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(StartColorStr=#30ffffff,EndColorStr=#30ffffff)";
}
a.btn:hover {
	background-color:rgba(255,255,255,0.10);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#10ffffff,endColorstr=#10ffffff); 
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(StartColorStr=#10ffffff,EndColorStr=#10ffffff)";
}
a.btn > span {
	display: inline-block;
	padding: 20px 30px 20px 30px;
	border-radius: 6px;
	color: #fff;
}



a.btnblue {
	margin-top: 0;
	background-color:rgba(29,141,242,1.0);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#901d8df2,endColorstr=#901d8df2); 
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(StartColorStr=#901d8df2,EndColorStr=#901d8df2)";
}
a.btnblue:hover {
	background-color:rgba(255,255,255,0.10);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#10ffffff,endColorstr=#10ffffff); 
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(StartColorStr=#10ffffff,EndColorStr=#10ffffff)";
	box-shadow: inset 0px 0px 0px 2px #1d8df2;
}
a.btnblue:hover > span {
	color: #1d8df2;
}









header {
	padding:0 30px 0 30px;
	position: fixed;
	z-index: 100;
	width: 100%;
	box-sizing: border-box;
	background-color: rgba(255, 255, 255, 0.90);
	-moz-box-shadow: 0px 2px 3px #eee;
	-webkit-box-shadow: 0px 2px 3px #eee;
}
header > h1 {
	float:left:
}
header > h1 > a.logo {
	margin-top:12px;
	height:36px;
	width:286px;
	background-image:url("../../img/site/logo.png");
	float:left;
}
header > h1 > a.logo:hover {
	opacity:0.8;
	filter: alpha(opacity=80);
	-ms-filter: "alpha(opacity=80)";
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
}
header > h1 > a.logo span { display:none; }



header > h1 > a.logo2 {
	margin-top:12px;
	height:36px;
	width:286px;
	background-image:url("../../img/site/logo2.png");
	float:left;
}
header > h1 > a.logo2:hover {
	opacity:0.8;
	filter: alpha(opacity=80);
	-ms-filter: "alpha(opacity=80)";
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
}
header > h1 > a.logo2 span { display:none; }




header > nav {
	/* border: 1px solid #ccc; */
	display: block;
	height: 60px;
	float:right;
	color: rgba(255, 255, 255, 0.26);
}
header > nav > ul > li {
	float:left;
}

header > nav > ul > li > a {
	text-decoration: none;
	display: block;
	height: 60px;
	padding: 0 20px 0 20px;
}

header > nav > ul > li > a > span {
	line-height: 60px;
}

header > nav > ul > li > a:link,
header > nav > ul > li > a:visited {
	text-decoration:none;
	color: #fff;
	
	opacity:0.5;
	filter: alpha(opacity=50);
	-ms-filter: "alpha(opacity=50)";
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
}


header > nav > ul > li > a:hover,
header > nav > ul > li > a:active {
	color:#fff;
	background-color: #000;
	text-decoration:none;

	opacity:1;
	filter: alpha(opacity=1);
	-ms-filter: "alpha(opacity=1)";
	-moz-opacity:1;
	-khtml-opacity: 1;
}

header > nav > ul > li > a.current {
	color:#fff;
	text-decoration:none;

	opacity:1;
	filter: alpha(opacity=1);
	-ms-filter: "alpha(opacity=1)";
	-moz-opacity:1;
	-khtml-opacity: 1;
}



header > nav > ul > li > a > span > svg.search {
	text-decoration: none;
	display: block;
	height: 22px;
	width: 22px;
	padding: 21px 10px 0 10px;
	fill:#fff;
}




header > nav > ul > li > .search-wrapper {
	text-align: center;
	display: none;
	z-index:100;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	color:#fff;
	background-color:rgba(0, 0, 0, 0.90);
}
header > nav > ul > li > .search-wrapper > .search-form {
  width:800px;
  height:200px;    
  position:absolute;
  top:50%;
  left:50%;
  margin:-100px 0 0 -400px;
}
header > nav > ul > li > .search-wrapper > .search-form > input[type="text"] {
	width: 70%;
	height: 160px;
	font-size: 260%;
	font-weight: 200;
	color:#fff;
	padding: 5px 40px 5px 40px;
	box-sizing: border-box;	
	background-color: transparent;
	border: 0px #000 solid;
	font-family: 'HelveticaNeue-UltraLight', helvetica, sans-serif;
	font-weight: 100;
}
header > nav > ul > li > .search-wrapper > .search-form > input[type="text"]:focus {
  outline: 0;
}

header > nav > ul > li > .search-wrapper > .search-form > svg.lupe {
	height: 40px;
	width: 40px;
	fill:#666;
}
header > nav > ul > li > .search-wrapper > .search-form > svg.close {
	cursor:pointer;
	height: 30px;
	width: 30px;
	fill:#fff;
}




/*
header > nav > ul > li.search {
	display:block;
	position:relative;
	height: 60px;
	padding: 20px;
	margin: 15px 0 0 20px;
}

header > nav > ul > li.search:before,
header > nav > ul > li.search:after {
	content:''; height:12px; display:block; position:absolute; top:6px; left:0;
}
header > nav > ul > li.search:before {
	width:12px; border:2px #fff solid; border-radius:100%;-webkit-border-radius:100%;-moz-border-radius:100%;color: rgba(204, 204, 204, 0.26);
}
header > nav > ul > li.search:after {
	width:2px; height:9px;background:#fff; transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg); top:17px; left:15px;color: rgba(204, 204, 204, 0.26);
}

header > nav > ul > li.search > input {
	display: none;
}




header > nav > ul > li.search:after:hover,
header > nav > ul > li.search:before:active {

	background-color: #000;

	opacity:1;
	filter: alpha(opacity=1);
	-ms-filter: "alpha(opacity=1)";
	-moz-opacity:1;
	-khtml-opacity: 1;
}
*/







section.contents {
	background-color: #fafafa;
	padding:0 30px 0 30px;
	/* border: 1px solid #000; */
}
section.contents > section {
  width: 100%;
	/* border: 1px solid #ccc; */
}

section.contents > section > h2 {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 40px;
	letter-spacing: -0.05em;
	color: #414141;
}

section.contents > section > p {
	margin-top: 0;
	margin-bottom: 30px;
	font-size: 100%;
	color: #414141;
	letter-spacing: -0.02em;
	font-family: helvetica, sans-serif;
	font-weight: 100;
	line-height: 1.5;
}
section.contents > section > p:last-child {
	margin-bottom: 0;
}




/* top */
.tophead {
	position: relative;
	min-width: 890px;
	/* text-align: center; */
}

.tophead-video {
	z-index: 0;
}

.tophead-overlay {
	background-color: #000;	
	
	opacity:0.6;
	filter: alpha(opacity=60);
	-ms-filter: "alpha(opacity=60)";
	-moz-opacity:0.6;
	-khtml-opacity: 0.6;
	
	position: absolute;
	top: 0; left: 0;
	bottom: 0; right: 0;
	width: 100%;
	height: 100%;
}


.tophead > h1 {
	position: absolute;
	width: 100%;
	font-family: 'HelveticaNeue-UltraLight', helvetica, sans-serif;
	font-weight: bold;
	font-size: 36px;
	/* text-align: center; */
	padding-left:65px;


	height: 200px;
	line-height: 1.2;
	top: 0;
	bottom: 0;
	margin: auto;
	color: #fff;

	opacity:0.5;
	filter: alpha(opacity=50);
	-ms-filter: "alpha(opacity=50)";
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
}

.tophead > h1 > span {
	display: block;
	letter-spacing: 3px;
	font-family: 'HelveticaNeue-Thin', sans-serif;
	font-weight: 100;
	padding-left: 10px;
}

.tophead > h1 > span.head {
	margin-left:-8px;
	margin-top: 10px;
	font-size: 40px;
}
.tophead > h1 > span.body {
	margin-left:-6px;
	font-size: 22px;
}




.tophead-arrow {
	position: absolute;
	bottom: 30px;
	left: 0;
	right: 0;
	margin: auto;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	width: 50px;
	height: 50px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	
	opacity:0.4;
	filter: alpha(opacity=40);
	-ms-filter: "alpha(opacity=40)";
	-moz-opacity:0.4;
	-khtml-opacity: 0.4;
}


	








/* Computing for Good */
section.contents > section.computing {
	text-align: center;
	padding-bottom:40px;
}
section.contents > section.computing > h2 {
	letter-spacing: -0.05em;
	font-family: 'HelveticaNeue-Thin', sans-serif;
	font-weight: 100;
	color: #1d8df2;
}
section.contents > section.computing > p {
	color:#999;
	margin-top:20px;
}

section.computing > h2:before {
	content: url("../../img/site/line-before.png");
	margin: 20px;
	position: relative;
	top: -6px;
}

section.computing > h2:after {
	content: url("../../img/site/line-after.png");
	margin: 20px;
	position: relative;
	top: -6px;
}

section.computing > ul.first {
	width: 100%;
	text-align: center;
	display: table;	
}
section.computing > ul.first > li {
	width: 33%;
	float:left;
	box-sizing: border-box;
	display: table-cell;	
}
section.computing > ul.first > li:nth-child(1),
section.computing > ul.first > li:nth-child(3) {
	background-color: #F3F3F3;
	padding: 40px 10px 40px 10px;
}

section.computing > ul.first > li:nth-child(1) {
  border-bottom-left-radius:9px;
  border-top-left-radius:9px;
}
section.computing > ul.first > li:nth-child(3) {
  border-bottom-right-radius:9px;
  border-top-right-radius:9px;
}

section.computing > ul.first > li:nth-child(2) {
	border: 2px #1d8df2 solid;
	background-color: #FFF;
	border-radius: 9px;
	padding: 50px 10px 50px 10px;
	margin-top: -10px;
}
section.computing > ul.first > li > h3 {
	font-size: 120%;
	font-weight: 200;
	padding: 10px;
}
section.computing > ul.first > li > span {
	color: #999;
}





section.computing > ul.second {
	width: 100%;
	text-align: center;
}
section.computing > ul.second > li {
	box-sizing: border-box;

	border: 2px #fff solid;
	text-align: left;
	display: inline-block;
	vertical-align: top;
	zoom: 1;
	width: 31%;
	margin:0 20px 40px 0;
	padding:20px;
	background-color: #fff;
	border-radius: 9px;

	-webkit-transition:border-color 300ms ease 0;
	-moz-transition:border-color 300ms ease 0;
	-o-transition:border-color 300ms ease 0;
	transition:border-color 300ms ease 0;
}
section.computing > ul.second > li:hover {
	border: 2px #1d8df2 solid;
}
section.computing > ul.second > li:nth-child(3),
section.computing > ul.second > li:nth-child(6) {
	margin:0 0 40px 0;
}

section.computing > ul.second > li > h3 {
	margin-bottom:20px;
}
section.computing > ul.second > li > p {
	margin-bottom:20px;
	color:#999;
}


section.foot {
	text-align: center;
	padding:30px;
	color:#fff;
	font-size: 170%;
}
section.foot > h2 {
	font-family: 'HelveticaNeue-UltraLight', helvetica, sans-serif;
	font-weight: bold;
}
section.foot > p.ready,
section.foot > h2.ready {
	font-family: helvetica, sans-serif;
	font-weight: 100;
	font-size: 150%;
}





h1.bg {
	padding: 70px;
	font-family: helvetica, sans-serif;
	font-weight: 100;
	font-size: 240%;
	color: #fff;
	text-align: center;
	margin-bottom: 60px;
}
section.contents > section.default,
section.contents > ol > li.default {
	margin: 30px 0 30px 0;
	box-sizing: border-box;
	border: 2px #fff solid;
	text-align: left;
	color:#000;
	
	font-size: 150%;
	line-height: 1.5;
	
	padding:30px 20px 30px 20px;
	background-color: #fff;
	border-radius: 9px;
	-webkit-transition:border-color 300ms ease 0;
	-moz-transition:border-color 300ms ease 0;
	-o-transition:border-color 300ms ease 0;
	transition:border-color 300ms ease 0;	
}
section.contents > section.default.pink,
section.contents > ol > li.default.pink {
	border: 2px #ffe4e5 solid;
	background-color: #ffe4e5;
}

section.contents > section.default:hover,
section.contents > ol > li.default:hover
 {
	border: 2px #1d8df2 solid;
}
section.contents > section.default.pink:hover,
section.contents > ol > li.default.pink:hover
 {
	border: 2px #FABCBE solid;
}

section.contents > section.default > p,
section.contents > section.default > ol > li,
section.contents > ol > li.default > p,
section.contents > ol > li.default > form > p,
section.contents > ol > li.default > ol > li
{
	font-size: 68%;
	color: #7E7E7E;
	font-family: helvetica, sans-serif;
	font-weight: 100;
	line-height: 1.5;
}


section.contents > ol > li.default > p,
section.contents > ol > li.default > form > p,
section.contents > ol > li.default > ol > li {
	margin-bottom: 30px;
}
section.contents > ol > li.default > p:last-child,
section.contents > ol > li.default > form > p:last-child,
section.contents > ol > li.default > ol > li:last-child {
	margin-bottom: 0;
}

section.contents > section.default > h2,
section.contents > ol > li.default > h2
 {
 	font-size: 100%;
 	color:#000;
	line-height: 1.5;
}

section.contents > ol > li.default > h3,
section.contents > ol > li.default > form > h3 {
	margin-top: 30px;
	font-size: 80%;
}
section.contents > ol > li.default > form > h3 > label {
	display: block;
	font-size: 80%;
	color: #7E7E7E;
}

section.contents > ol > li.default > form > input[type="text"] {
	width: 100%;
	height: 60px;
	font-size: 70%;
	font-weight: 200;

	padding: 5px 40px 5px 40px;
	box-sizing: border-box;	
	border: 2px #D6D6D6 solid;

	background-color: #F8F8F8;
	border-radius: 9px;
	-webkit-transition:border-color 300ms ease 0;
	-moz-transition:border-color 300ms ease 0;
	-o-transition:border-color 300ms ease 0;
	transition:border-color 300ms ease 0;	
}

section.contents > ol > li.default > form > input[type="text"]:focus {
  outline: 0;
  border-color: #B8B8B8;
  background-color: #E9E9E9;
}




section.contents > ol > li.default > ol > li > ul.osbtn {
	margin-top: 10px;
	/* background-color: #ccc; D8D8D8*/
}
section.contents > ol > li.default > ol > li > ul.osbtn > li {
	float: left;
	margin-right:25px;
}
section.contents > ol > li.default > ol > li > ul.osbtn >  li > a.btn {
	margin-top:0;
}

section.contents > ol > li.default > ol > li > ul.osbtn > li > a > span {
	padding: 15px 25px 15px 25px;
}
section.contents > ol > li.default > ol > li > ul.osbtn > li > a.col1 {
	background-color:rgba(169,169,169,0.90);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#30A9A9A9,endColorstr=#30A9A9A9); 
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(StartColorStr=#30A9A9A9,EndColorStr=#30A9A9A9)";
}
section.contents > ol > li.default > ol > li > ul.osbtn > li > a.col1 > span:hover {
	color: #A9A9A9;
}

section.contents > ol > li.default > ol > li > ul.osbtn > li > a.col2 {
	background-color:rgba(0,126,191,0.90);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#30007EBF,endColorstr=#30007EBF); 
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(StartColorStr=#30007EBF,EndColorStr=#30007EBF)";
}
section.contents > ol > li.default > ol > li > ul.osbtn > li > a.col2 > span:hover {
	color: #007EBF;
}

section.contents > ol > li.default > ol > li > ul.osbtn > li > a.col3 {
	background-color:rgba(0,195,157,0.90);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3000C39D,endColorstr=#3000C39D); 
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(StartColorStr=#3000C39D,EndColorStr=#3000C39D)";
}
section.contents > ol > li.default > ol > li > ul.osbtn > li > a.col3 > span:hover {
	color: #00C39D;
}

section.contents > ol > li.default > ol > li > ul.osbtn > li > a.col4 {
	background-color:rgba(229,68,0,0.90);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#30E54400,endColorstr=#30E54400); 
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(StartColorStr=#30E54400,EndColorStr=#30E54400)";
}
section.contents > ol > li.default > ol > li > ul.osbtn > li > a.col4 > span:hover {
	color: #E54400;
}

section.contents > ol > li.default > ol > li > ul.osbtn > li > a:hover {
  box-shadow: inset 0px 0px 0px 2px #1d8df2;
	background-color:rgba(255,255,255,0.10);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#10ffffff,endColorstr=#10ffffff); 
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(StartColorStr=#10ffffff,EndColorStr=#10ffffff)";
}












/* footer */

footer {
	background-color: #fff;
	padding:15px 20px 15px 20px;
	text-align: center;
	color: #777;
	font-weight: 100;
	letter-spacing: -0.05em;
}
footer > p {
	font-size: 75%;
}
footer > p.social > a {
  color: #777;
	text-decoration: none;
}
footer > p.social > a:hover {
	color: #1d8df2;
}



.error {
	color:#CC2A2A;
	margin-bottom: 0;
	font-size: 16px;
}
.err-bg {
	border:2px solid #FFADAD !important;
	background-color:#FFE9E9 !important;
}



table {
	width: 100%;
}
table, td, th {
	/* border: 1px solid #000; */
	border-collapse: collapse;
	border-radius: 9px;
}
td, th {
	padding: 24px 5px 24px 5px;
	width: 30px;
	height: 25px;
	text-align: center;
}
tr {
	background: #f3f3f3;
}
th {
	background: #f3f3f3;

}
td {
	padding: 20px 5px 20px 5px;
	font-size: 90%;
	color: #999;
}
tr:nth-child(2n) {
 background: #f6f6f6;
}