@charset "UTF-8";
/* CSS Document */

body {background:#f9f9f9;}
div#home {width:100%; min-width:1200px; height:100%; position:absolute; z-index:999; opacity:0; background:#f9f9f9 url(../images/ss-team.png) no-repeat center center; text-align:center;}
div#home:target {display:none;}
div#home a {width:50px; height:50px; background:url(../images/closebtn.png) no-repeat; position:absolute; bottom:40px;}

a#logo {width:44px; height:44px; background:url(../images/logo.png) no-repeat top; margin:22px 0 22px 48px; background-size:100%; float:left;}
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); border-left:2px solid rgba(255, 255, 255, 0); border-right:2px solid rgba(255, 255, 255, 0); -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s;}

/* css on scroll */
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; transition:ease 0.4s; -webkit-transition:ease 0.4s; -moz-transition:ease 0.4s;}
a#blog:hover {background:#000000;}
div#nav {height:auto; padding:20px 0 0 50px;}
a.navitem {height:90px; clear:both; font-size:90px; letter-spacing:-0.04em; line-height:90px; text-transform:uppercase; font-family:'Bebas', Arial, Helvetica, sans-serif; color:#333333; position:relative; float:left; text-decoration:none;}
a.navitem span.back {transition:ease 0.4s; -webkit-transition:ease 0.4s; -moz-transition:ease 0.4s;}
a.navitem:hover span.back {margin:0 0 0 30px;}
a.navitem span.arrow {display:block; opacity:0; width:20px; height:20px; background:transparent url(../images/slide-arrow.png) no-repeat; position:absolute; top:45px;}
/* arrow position */
a.navitem span.latest {position:absolute; top:0; left:-15px; width:40px; height:40px; background:#c51648; font-size:16px; color:#ffffff; line-height:40px; text-align:center; font-family:Arial, Helvetica, sans-serif; font-weight:bold; border-radius:20px;}
a.navitem span.about {left: 55px;}
a.navitem span.info {left: 155px;}
a.navitem span.illo {left: 145px;}
a.navitem span.brand {left: 238px;}
a.navitem span.web {left: 162px;}
a.navitem span.app {left: 54px;}
a.navitem span.editorial {left: 145px;}
a.navitem span.blog {left: 100px;}
a.navitem:hover span.arrow {opacity:1; transition: ease 0.4s 0.2s; -moz-transition: ease 0.4s 0.2s; -webkit-transition: ease 0.4s 0.2s;}
div#alt-version {position:fixed; bottom:10px; right:10px; font-size:11px; font-family:Arial, Helvetica, sans-serif; color:#999999;}
div#alt-version a{color:#22C1F2;}
div#alt-version a:hover {color:#222222;}
/* keyframe animation, first define the animation (state to state) then apply animation on elements */
@keyframes fadein {from {opacity:0;} to{opacity:1;}}
@-moz-keyframes fadein {from {opacity:0;} to{opacity:1;}}
@-webkit-keyframes fadein {from {opacity:0;} to{opacity:1;}}
div#home {animation:fadein 1s ease-in-out 0.5s; -webkit-animation:fadein 1s ease-in-out 0.5s; -moz-animation:fadein 1s ease-in-out 0.5s; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards;}