@charset "UTF-8";
/* CSS Document */
body {background:#f9f9f9;}

header {padding:22px 0 22px 48px; width:100%; height:44px; position:fixed; top:0; left:0; z-index:999; background:#f9f9f9; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s;}

/* css on scroll */
header.shadow {box-shadow:0 1px 4px rgba(0,0,0,0.2); -moz-box-shadow:0 1px 4px rgba(0,0,0,0.2); -webkit-box-shadow:0 1px 4px rgba(0,0,0,0.2);background:rgba(255,255,255,0.95); padding:8px 0 8px 48px;}

a#logo {display:block; width:44px; height:44px; background:url(../images/logo.png) no-repeat top; float:left; background-size:100%; border-radius:22px; -webkit-border-radius:22px; -moz-border-radius:22px;}
a#logo span#mouth {width:16px; /* width of the logo - margin - border thickness*/ height:34px; display:block; margin:1px 12px; border-bottom:2px solid rgba(51,51,51,1); -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; border-left:2px solid rgba(255, 255, 255, 0); border-right:2px solid rgba(255, 255, 255, 0);}

/* css on scroll */
header.shadow a#logo span#mouth, a#logo:hover span#mouth {width:34px; margin:3px 3px; border-radius:19px; -moz-border-radius:19px; -webkit-border-radius:19px; /*width/height+border/2*/}

a#blog {display:block; position:fixed; top:29px; right:50px; width:50px; height:30px; background:#444444; color:#ffffff; text-align:center; line-height:30px; font-family:Bebas, Arial, Helvetica, sans-serif; font-size:12px; text-decoration:none; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s;}
a#blog:hover {background:#000000;}

/* css on scroll */
header.shadow a#blog {top:-59px;}

div#nav {margin:7px auto; width:640px;}
a.navitem {font-size:14px; text-transform:uppercase; font-family:Bebas, Arial, Helvetica, sans-serif; color:#333333; float:left; text-decoration:none; margin:0 34px 0 0; display:block; height:30px; line-height:30px; padding:0 18px 0 12px; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; background-image: url(../images/dropdown-dark.png); background-repeat: no-repeat; background-size: 6px; background-position: right 8px bottom 8px;}
a#current {background:#333333; color:#ffffff; background-image: url(../images/dropdown-light.png); background-repeat: no-repeat; background-size: 6px; background-position: right 8px bottom 8px;}
a#selected {font-weight:bold;}
div#nav ul li {position:relative; float:left;}
div#nav ul li ul {display:none;}
div#nav ul li:hover ul {display:block; position:absolute; top:30px; left:0; z-index:999; width:200px; padding:15px 0 0 0;}
div#nav ul li:hover ul li a {display:block; width:184px; height:56px; background:rgba(249,249,249,0.94); font-family: Arial, Helvetica, sans-serif; font-size:12px; padding:0 12px; color:#333333; text-decoration:none; line-height:56px; margin:0; text-transform:capitalize; transition:opacity ease 0.4s; -webkit-transition:all ease 0.4s; -moz-transition:all ease 0.4s;}
div#nav ul li:hover ul li a.lock, div#nav ul li:hover ul li a.lock:hover {background: rgba(249,249,249,0.94) url(../images/lock.png) no-repeat right 12px center; background-size: 16px;}
div#nav ul li:hover ul.doublecol {width:416px;}
header.shadow div#nav ul li ul li a {background:rgba(255,255,255,0.94);}
div#nav ul li:hover ul li a.future {color:#999999;}
div#nav ul li:hover ul li a:hover {background:rgba(255,255,255,1); font-weight:bold; width:196px; margin-left:-6px;}
div#nav ul li ul li a.latest:hover {border-left:5px solid #c51648; transition:ease 0.4s; -webkit-transition:ease 0.4s; -moz-transition:ease 0.4s; opacity:1;}
div#nav ul li ul li a.future:hover {padding:0 12px; font-weight:normal; width:184px; margin-left:0;}
/*
div#nav ul li ul li a#unclick {border-left:1px solid #999999; text-decoration:line-through;}
*/

/* change nav structure when it's smaller than 1024px */
@media (max-width: 1024px) {
	/*header {padding:22px 0 22px 12px;}*/
	div#nav {display:block; height:30px; width:30px; background:url(../images/ic_more.png) no-repeat center center; background-size:50%; float:left; margin:7px 0 7px 48px;}
	div#nav ul{display:none;}
	div#nav:hover {cursor:pointer;}
	div#nav:hover ul {display:block; padding:45px 0 0 0;}
	div#nav:hover ul li {float:left;}
	div#nav:hover ul li a {background:rgba(255,255,255,0.9); display:block; height:24px; line-height:24px; padding:16px; margin:0; width:120px; border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; transition:opacity ease 0.4s; -webkit-transition:all ease 0.4s; -moz-transition:all ease 0.4s;}
	div#nav:hover ul li a:hover {background:#ffffff;}
	div#nav:hover ul li a#current {background:#333333;}
	div#nav:hover ul li a#current:hover {background:#444444;}
	div#nav:hover ul li ul {display:none;}
	div#nav:hover ul li:hover ul {display:block; position:absolute; left:152px; top:-15px;}
	div#nav:hover ul li:hover ul li {padding:0;}
}

div#content {margin:86px 0 40px 0; padding:15px 48px 0 48px; position:relative;}
div#centercontent {margin:86px auto 40px auto; padding:15px 12px 0 12px; width:1000px; position:relative;}
div#container {margin:86px 0 40px 0; padding:15px 0 0 0; position:relative;}
div.title {font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333333; padding:0 0 15px 0; }
span.highlight {font-weight:bold; color:#222222;}
div.page {margin:0 0 20px 0; border-bottom:1px solid #E0E0E0;}
div.page a:hover {background:#666666; transition:0.4s ease; -moz-transition:0.4s ease; -webkit-transition:0.4s ease;}
div.subpage video {margin:0 20px 0 0;}
div.subpage img {mix-blend-mode:darken; -webkit-mix-blend-mode:darken; -moz-mix-blend-mode:darken;}

header div#subnav a {display:block; width:24px; height:24px; background-repeat:no-repeat; background-position:center center; z-index:9999; top:92px; opacity:0.4; position:fixed; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s;}

div.widescreen, div.cards {width:100%; float:left;}
div.widescreen:first-child div.title {margin-top:0; padding-top:0;}
div.wrapper {width:1024px; margin:0 auto;}

/* css on scroll */
header.shadow div#subnav a {top:19px;}
div#subnav a.next {background-image:url(../images/next.png); right:50px;}
/* */

div#subnav a.prev {background-image:url(../images/prev.png); right:80px;}
div#subnav a:hover {opacity:1; transition:ease 0.4s; -webkit-transition:ease 0.4s; -moz-transition:ease 0.4s;}
div#subnav a.disable {opacity: 0.1;}

/* overlay absolute postioned elements, e.g. animation on top of static images, etc*/
div.overlay {position:relative;}
div.overlay span {position:absolute;}

/* links for more screens*/
div.title a {margin:0 0 0 10px; background:#333333; font-weight:bold; padding:1px 4px; color:#ffffff; text-decoration:none; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px;}
div.title a:hover {background:#666666; transition:0.4s ease; -moz-transition:0.4s ease; -webkit-transition:0.4s ease;}