/* Reset */
* {padding: 0; margin: 0;}
html {font-size: 62.5%; -webkit-font-smoothing: antialiased !important;}
html, body {height: 100%;}
ol, ul {list-style: none;}
img {border: none; height: auto;}
aside {float: left;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}

/* Clearfix */
.clear:before, .clear:after {display: table; content: '';  }
.clear:after {clear: both;}

/* Main Styles */
body {background: #C8C8C8 !important; color: #000000 font-family: Arial; }
.container {width:1056px; margin: 0 auto; background: #eee; -webkit-box-shadow: 0 0 20px 0 rgba(0,0,0,0.6); box-shadow: 0 0 20px 0 rgba(0,0,0,0.6);}
 
/* Header Styles */

header aside {
	margin-left: 39px; 
	padding: 52px 1px;
	background: #d10000; /* Old browsers */
	background: -moz-linear-gradient(top,  #d10000 0%, #f80000 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d10000), color-stop(100%,#f80000)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #d10000 0%,#f80000 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #d10000 0%,#f80000 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #d10000 0%,#f80000 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #d10000 0%,#f80000 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d10000', endColorstr='#f80000',GradientType=0 ); /* IE6-9 */
	-webkit-box-shadow: 0 0 2px 0 rgba(0,0,0,0.3);
			box-shadow: 0 0 2px 0 rgba(0,0,0,0.3);
}
h1.logo {background-image: url(../../images/imagemap.png); background-position: 0 0; display: block; width: 180px; height: 28px; text-indent: -10000px; margin: 0;}

/* Feature */

.feature {padding: 40px 40px 20px 40px; background-color: #333E42; }
.feature div {overflow: hidden; min-height: 209px; position: relative; color: #000; padding-left: 0;}
.feature div h2 {position: absolute; top: 20px; left: 20px; font-size: 22px; line-height: 24px;}
.feature div h3 {position: absolute; bottom: 20px; left: 20px; font-size: 42px; line-height: 46px;}
.feature div h3 span {font-size: 30px; line-height: 46px;}

#header-text { background-color: #333E42; padding:0 60px 0 39px; font-family:Arial, Helvetica, sans-serif; font-size: 18px; line-height: 23px; color:#ffffff; height: 44px; }

/* Gradient */

.grad {
	width: 100%; 
	height: 40px; 
	display: block;
	background: #3f3f3f; /* Old browsers */
	background: -moz-linear-gradient(top,  #3f3f3f 0%, #4f4f4f 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3f3f3f), color-stop(100%,#4f4f4f)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #3f3f3f 0%,#4f4f4f 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #3f3f3f 0%,#4f4f4f 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #3f3f3f 0%,#4f4f4f 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #3f3f3f 0%,#4f4f4f 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f3f3f', endColorstr='#4f4f4f',GradientType=0 ); /* IE6-9 */
}

/* Tiles Top */

.tiles-top {background: #333E42; padding: 2% 2% 0;}
.tiles-top a {margin-right: 2%; width: 49%; -webkit-box-shadow: 0 0 6px 0 rgba(0,0,0,0.3); box-shadow: 0 0 6px 0 rgba(0,0,0,0.3); background: #fff; overflow: hidden; float: left; color: #3f5b8b; text-decoration: none; transition: 0.5s all ease;}
.tiles-top a:nth-child(2n) {margin-right: 0;}
.tiles-top a  .icon { width : 50px; height:30px; line-height: 30px; position: absolute; left: 185px; top: 7px; font-size: 12px; }
.tiles-top a .icon.play { background: url(../images/play.png) left 0 no-repeat; width:25px; height:20px; padding-left: 22px; left: 118px; top:4px;  }
/* Tiles */

.tiles {background: #333E42; padding: 20px 0 40px 39px;}
.tiles a {margin-right: 9px; margin-bottom: 9px; width: 32%; -webkit-box-shadow: 0 0 6px 0 rgba(0,0,0,0.3); box-shadow: 0 0 6px 0 rgba(0,0,0,0.3); background: #fff; overflow: hidden; float: left; color: #3f5b8b; text-decoration: none; transition: 0.5s all ease;}
.tiles .sheet-1 { width:344px; }
.tiles .visual-2 { width:308px; }
.tiles .video-1 { width: 308px; }
.tiles .sheet-2 { width: 308px; }
.tiles .sheet-3 { width: 308px; }
.tiles .sheet-5 { width: 344px; }
.tiles .sheet-4 { width: 308px; }
.tiles .visual-3 { width: 308px; }
.tiles .visual-1 { width: 344px; }
.tiles a:hover {transition: 0.5s all ease; -webkit-box-shadow: 0 0 12px 0 rgba(0,0,0,0.6); box-shadow: 0 0 12px 0 rgba(0,0,0,0.6);}
.tiles a:nth-child(3n) {margin-right: 0;}
.tiles a:nth-child(3n+1) {clear: both;}
.tiles a img {-webkit-box-shadow: 0 0 6px 0 rgba(0,0,0,0.3); box-shadow: 0 0 6px 0 rgba(0,0,0,0.3);}
.tiles a .info, .tiles-top a .info {padding: 15px; margin-top:-89px; position: relative; box-sizing: border-box; height: 90px;  font-size: 19px; text-decoration: none; font-size: 22px;  line-height: 26px;  background-color: #efefef; background-color: rgba(239,239,239,0.9); color: #1f1f1f; padding:10px 7px; left:0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";  }
.tiles a .info2, .tiles-top a .info2 {padding: 15px; margin-top:-103px; position: relative; box-sizing: border-box; height: 97px;  font-size: 19px; text-decoration: none; font-size: 22px;  line-height: 26px;  background-color: #efefef; background-color: rgba(239,239,239,0.9); color: #1f1f1f; padding:10px 7px; left:0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";  }
.tiles a .info3, .tiles-top a .info3 {padding: 15px; margin-top:-65px; position: relative; box-sizing: border-box; height: 65px;  font-size: 19px; text-decoration: none; font-size: 22px;  line-height: 26px;  background-color: #efefef; background-color: rgba(239,239,239,0.9); color: #1f1f1f; padding:10px 7px; left:0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";  }

.tiles a .info div, .tiles-top a .info div {
	bottom: 15px;
	left: 16px;
}

.tiles a .info2 div, .tiles-top a .info2 div {
	position: absolute;
	bottom: 15px;
	left: 8px;
	top: 5px;
}

.tiles a .info3 div, .tiles-top a .info2 div {
	position: absolute;
	bottom: 15px;
	left: 8px;
	top: 5px;
}

.tiles a .info h2, .tiles-top a .info h2 { font-size: 22px; line-height: 24px; margin-bottom: 2px; color: #1F4F82;}
.tiles a .info p, .tiles-top a .info p {font-size: 17px; line-height: 20px; margin-bottom: 0; color: #1F4F82;}

.tiles a .info2 h2, .tiles-top a .info2 h2 { font-size: 22px; margin-bottom: 2px; color: #1F4F82;}
.tiles a .info2 p, .tiles-top a .info2 p {font-size: 17px; line-height: 20px; margin-bottom: 0; color: #1F4F82;}

.tiles a .info3 h2, .tiles-top a .info2 h2 { font-size: 22px; margin-bottom: 2px; color: #1F4F82;}
.tiles a .info3 p, .tiles-top a .info2 p {font-size: 17px; line-height: 20px; margin-bottom: 0; color: #1F4F82;}


.tiles a:hover .info p { text-decoration: underline !important; }
.tiles a:hover .info2 p { text-decoration: underline !important; }
.tiles a:hover .info3 p { text-decoration: underline !important; }
.tiles-top a:hover .info2 p { text-decoration: underline !important; }  

/*
.tiles a .info3 h2, .tiles-top a .info3 h2 { font-size: 23px; line-height: 24px; margin-bottom: 10px; color: #3F3F3F;}
.tiles a .info3 p, .tiles-top a .info3 p {font-size: 16px; line-height: 20px; margin-bottom: 12px; color: #1F4F81;}
*/