/*********************
CLEARFIXIN'
*********************/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,600,600italic,300italic);
.clearfix {
  zoom: 1; }
  .clearfix:before, .clearfix:after {
    content: "";
    display: table; }
  .clearfix:after {
    clear: both; }

/*********************
TOOLS
*********************/
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

/*********************
PADDING
*********************/
/*********************
COLORS
*********************/
/*********************
TYPOGRAPHY
*********************/
.text-left {
  text-align: left; }

.text-center {
  text-align: center; }

.text-right {
  text-align: right; }

/*********************
TRANSITION
*********************/
/* USAGE: @include transition(all 0.2s ease-in-out); */
/*********************
CSS3 GRADIENTS
Be careful with these since they can
really slow down your CSS. Don't overdo it.
*********************/
/* @include css-gradient(#dfdfdf,#f8f8f8); */
/*
BASE (MOBILE) SIZE
This are the mobile styles. It's what people see on their phones. If
you set a great foundation, you won't need to add too many styles in
the other stylesheets. Remember, keep it light: Speed is Important.
*/
/* nav styles */
#mobilemenu {
  display: block;
  background-color: #0074C8;
  padding: 10px;
  color: #fff; }

nav.main {
  display: none;
  background-color: #0074C8;
  padding: 10px;
  font-size: 1.4em; }

nav.main ul {
  padding: 0;
  margin: 0;
  list-style: none;
  background-color: #0074C8; }

nav.main ul li a {
  display: block;
  color: #fff;
  text-decoration: none;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-weight: 300; }

nav.main ul ul {
  margin-left: 20px; }

.subnav {
  display: none; }

.subnav ul {
  list-style-type: none;
  margin: 0;
  padding: 0; }

.subnav ul li {
  background-image: url("images/arrow.png");
  background-position: left center;
  background-repeat: no-repeat;
  line-height: 1.8em;
  padding-left: 12px; }

/*
LARGER MOBILE DEVICES
This is for devices like the Galaxy Note or something that's
larger than an iPhone but smaller than a tablet. Let's call them
tweeners.
*/
/*
TABLET & SMALLER LAPTOPS
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*/
@media only screen and (min-width: 769px) {
  .subnav {
    display: block;
    float: left;
    margin-right: 40px; } }
/*
DESKTOP
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*/
@media only screen and (min-width: 1200px) {
  /* nav styles */
  #mobilemenu {
    display: none; }

  nav.main {
    display: block;
    position: absolute;
    z-index: 3;
    width: 1140px;
    margin: 0 30px;
    margin-top: 215px;
    padding: 0;
    -moz-opacity: 0.90;
    -khtml-opacity: 0.90;
    opacity: 0.90;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90); }

  .home nav.main {
    margin-top: 330px; }

  nav.main ul {
    position: relative; }

  nav.main ul:after {
    content: "";
    clear: both;
    display: block; }

  nav.main ul li {
    float: left; }

  nav.main ul ul {
    display: none;
    background-color: #008ED3; }

  nav.main ul li:hover > ul {
    z-index: 10;
    display: block; }

  nav.main ul li:hover > a, nav.main ul li.current_page_item > a, nav.main ul li.current_page_ancestor > a {
    color: #B9C2C6; }

  nav.main ul li a {
    display: block;
    padding: 30px 56px; }

  nav.main ul ul {
    position: absolute;
    top: 100%;
    padding: 10px 20px; }

  nav.main ul ul li {
    float: none;
    position: relative; }

  nav.main ul ul li a {
    white-space: nowrap;
    color: #fff;
    padding: 10px; }

  nav.main ul ul li:hover > a {
    color: #B9C2C6; }

  nav.main ul ul ul {
    position: absolute;
    left: 100%;
    top: 0;
    padding-top: 0; }

  .subnav {
    margin-right: 120px; } }