/* =Header
-------------------------------------------------------------- */
header { width: 100%; height: 110px; position: fixed; top: 0; left: 0; z-index: 999;  -webkit-transition: height 0.3s; -moz-transition: height 0.3s; -ms-transition: height 0.3s; -o-transition: height 0.3s; transition: height 0.3s; }
header h1#logo { display: inline-block; line-height: 0px; float: left; font-family: "Oswald", sans-serif; font-size: 60px; color: white; font-weight: 400; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
header nav { display: inline-block; float: right; }
header nav a { line-height: 150px; margin-left: 10px; color: #9fdbfc; font-weight: 700; font-size: 18px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
header nav a:hover { color: white; }
#logo img { -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;width: 85%; }
#cssmenu > ul > li > a { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
header.smaller { height: 85px; background: #fff;}
header.smaller h1#logo { height: 75px; line-height: 75px; font-size: 30px; margin-top: -20px !important; }
header.smaller nav a { line-height: 75px; }
/*header.smaller #cssmenu > ul > li > a { font-size: 15px; padding: 15px 10px; margin-left:5px; }*/
header.smaller .menu_area { margin-top: -6px; }
header.smaller h1#logo img { width: 75%; --moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }
/* =Footer
-------------------------------------------------------------- */
/* =Extras
-------------------------------------------------------------- */
.clearfix:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; }

/* =Media Queries
-------------------------------------------------------------- */
@media all and (max-width: 660px) {
/* =Header
  -------------------------------------------------------------- */
header h1#logo { display: block; float: none; margin: 0 auto; height: 100px; line-height: 100px; text-align: center; }
header nav { display: block; float: none; height: 50px; text-align: center; margin: 0 auto; }
header nav a { line-height: 50px; margin: 0 10px; }
header.smaller { height: 75px; }
header.smaller h1#logo { height: 40px; line-height: 40px; font-size: 30px; }
header.smaller nav { height: 35px; }
header.smaller nav a { line-height: 35px; }
}

@media all and (max-width: 600px) {
.container { width: 100%; }
#info-bar a { display: block; }
#info-bar span.all-tutorials, #info-bar span.back-to-tutorial { width: 100%; }
#info-bar span.all-tutorials, #info-bar span.back-to-tutorial { float: none; text-align: center; }
#info-bar span.all-tutorials { border-bottom: solid 1px #0793e2; }
}