/******************************************************************
Site Name: 
Author: 

Stylesheet: Main Stylesheet

Here's where the magic happens. Here, you'll see we are calling in
the seperate functions for each media query. The base mobile 
stylesheet is called in the header, so here we're working up from 
there. To edit the css, just find the corresponding LESS file.
******************************************************************/
/*
Base.css contains the main mobile styles and is called in the 
header. This way mobile devices get ONLY the styles that apply
to them. No muss, no fuss.

normalize.css and the mixins are also called within that base file 
*/
@media only screen and (min-width: 481px) {
  /* styles in 481up.scss */
  /******************************************************************
  Site Name: 
  Author: 
  
  Stylesheet: 481px and Up Stylesheet
  
  ******************************************************************/
  /*********************
  HEADER SYTLES
  *********************/
  #login .sign-up .frm_forms {
    max-width: none;
  }
  #login .sign-up .frm_form_fields {
    float: left;
    width: 77%;
    margin-right: 0;
    padding-right: 0;
  }
  #login .sign-up .frm_form_field {
    clear: none;
    float: left;
    margin: 0 2% .5em 0;
    width: 48%;
  }
  #login .sign-up .submit {
    clear: none;
    margin-left: 0;
  }

  /*********************
  HOMEPAGE STYLES
  *********************/
  .mejs-overlay-button {
    background: url("../images/play.png") no-repeat scroll 0 0 transparent;
    height: 80px;
    left: 50%;
    margin: -40px 0 0 -137px;
    top: 70%;
    width: 274px;
  }

  .mejs-overlay:hover .mejs-overlay-button {
    background-position: 0 -80px;
  }

  /*********************
  POSTS & CONTENT STYLES
  *********************/
  /* end .hentry */
  /* want to style individual post classes? Booya! */
  /* post by id (i.e. post-3) */
  /* general post style */
  /* general article on a page style */
  /* general style on an attatchment */
  /* sticky post style */
  /* hentry class */
  /* style by category (i.e. category-videos) */
  /* style by tag (i.e. tag-news) */
  /* post meta */
  /* post content */
  .post-content {
    /* at this larger size, we can start to align images */
  }
  .post-content .alignleft, .post-content img.alignleft {
    margin-right: 1.5em;
    display: inline;
    float: left;
  }
  .post-content .alignright, .post-content img.alignright {
    margin-left: 1.5em;
    display: inline;
    float: right;
  }
  .post-content .alignleft, .post-content img.alignleft {
    max-width: 50%;
  }
  .post-content .alignright, .post-content img.alignright {
    max-width: 50%;
  }
  .post-content .aligncenter, .post-content img.aligncenter {
    margin-right: auto;
    margin-left: auto;
    display: block;
    clear: both;
  }

  /* end .post-content */
  /*  Homepage Blocks  */
  .home #callouts .block {
    height: 320px;
  }
  .home #callouts .block > div {
    height: 278px;
  }
  .home #callouts .block > div .corner {
    font-size: 1.5em;
    width: 100px;
  }
  .home #callouts .block .detail h3 {
    font-size: 1.5em;
  }
  .home #callouts .block .detail p, .home #callouts .block .detail a {
    font-size: 1.25em;
  }

  /*********************
  FOOTER STYLES
  *********************/
  .footer-links ul {
    padding: 1em 0 .5em 0;
    text-align: center;
  }
  .footer-links ul li {
    display: inline;
    padding: 0 .6em .4em .6em;
  }

  /* end .footer-links */
}
/* end of media query */
@media only screen and (min-width: 768px) {
  /* styles in 768up.scss */
  /******************************************************************
  Site Name: 
  Author: 
  
  Stylesheet: Tablet & Small Desktop Stylesheet
  
  ******************************************************************/
  /*********************
  GENERAL STYLES
  *********************/
  /********************
  WORDPRESS BODY CLASSES
  style a page via class
  ********************/
  /*********************
  LAYOUT & GRID STYLES
  *********************/
  .wrap {
    max-width: 960px;
  }

  /* This is using the 1140 Grid System: http://cssgrid.net/ */
  .onecol {
    width: 4.85%;
  }

  /* grid_1  */
  .twocol {
    width: 13.45%;
  }

  /* grid_2  */
  .threecol {
    width: 22.05%;
  }

  /* grid_3  */
  .fourcol {
    width: 30.75%;
  }

  /* grid_4  */
  .fivecol {
    width: 39.45%;
  }

  /* grid_5  */
  .sixcol {
    width: 48%;
  }

  /* grid_6  */
  .sevencol {
    width: 56.75%;
  }

  /* grid_7  */
  .eightcol {
    width: 65.4%;
  }

  /* grid_8  */
  .ninecol {
    width: 74.05%;
  }

  /* grid_9  */
  .tencol {
    width: 82.7%;
  }

  /* grid_10 */
  .elevencol {
    width: 91.35%;
  }

  /* grid_11 */
  .twelvecol {
    width: 100%;
  }

  /* grid_12 */
  .onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol {
    float: left;
    position: relative;
    margin-right: 3.8%;
  }

  .twelvecol {
    float: left;
    position: relative;
  }

  .last {
    margin-right: 0;
    float: right;
  }

  /*********************
  HEADER SYTLES
  *********************/
  #inner-header {
    position: relative;
  }

  #logo {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
    width: 30.75%;
  }
  #logo a {
    padding: 24px 29px 18px 21px;
  }
  #logo a img {
    width: 100%;
    height: auto;
  }

  #login #mobile-menu {
    display: none;
  }
  #login .sign-up {
    padding: 1.5em 0 1.25em;
    width: 100%;
  }
  #login .sign-up h3 {
    margin: 0 2% 0 3%;
  }
  #login .sign-up .frm_form_fields {
    width: 49%;
  }

  /*********************
  NAVIGATION STYLES
  *********************/
  .nav .menu {
    display: block;
    float: right;
    margin-top: 15px;
  }

  .menu {
    /* end .menu ul */
  }
  .menu ul {
    /* end .menu ul li */
    /* highlight sub-menu current page */
    /* end current highlighters */
  }
  .menu ul li {
    float: left;
    position: relative;
    padding: 0 3px;
  }
  .menu ul li a {
    color: #fff;
    font-family: "ChronoWebMedium", Arial, sans-serif;
    font-size: 1.1em;
    padding: 0 0 12px;
  }
  .menu ul li a:hover, .menu ul li a:focus {
    color: #00364b;
    border-bottom: 6px solid #007daf;
  }
  .menu ul li.current-menu-item a,
  .menu ul li.current_page_item a,
  .menu ul li.current-page-ancestor a {
    border-bottom: 6px solid #007daf;
    color: #00364b;
  }

  /* end .menu */
  /* nav menu widget */
  /* subnav */
  #subnav {
    margin-bottom: 1em;
  }
  #subnav ul {
    margin: 0;
  }
  #subnav ul li {
    margin: 0;
  }
  #subnav ul li a {
    text-align: left;
    padding: 0.7em 5% 0.5em;
  }

  /*********************
  HOMEPAGE STYLES
  *********************/
  /* Homepage Video */
  #video {
    margin-bottom: 1em;
  }

  /*  Homepage Blocks  */
  .home #callouts .block {
    position: relative;
    overflow: hidden;
    padding: 1%;
    height: 210px;
    margin-bottom: 2em;
    width: 28.75%;
  }
  .home #callouts .block > div {
    height: 170px;
  }
  .home #callouts .block > div .corner {
    font-size: 1.25em;
  }
  .home #callouts .block img {
    height: 100%;
    width: auto !important;
  }
  .home #callouts .block .detail h3 {
    font-size: 1.25em;
  }
  .home #callouts .block .detail p, .home #callouts .block .detail a {
    font-size: .9em;
  }

  .home blockquote {
    padding: 1.75em 0 1.25em;
  }

  /*********************
  LANDING PAGE STYLES
  *********************/
  .product .flexslider-container {
    clear: none;
  }

  /*********************
  POSTS & CONTENT STYLES
  *********************/
  #content {
    min-height: 500px;
  }

  #main {
    margin-top: 2.2em;
  }

  /* end .hentry */
  /* want to style individual post classes? Booya! */
  /* post by id (i.e. post-3) */
  /* general post style */
  /* general article on a page style */
  /* general style on an attatchment */
  /* sticky post style */
  /* hentry class */
  /* style by category (i.e. category-videos) */
  /* style by tag (i.e. tag-news) */
  /* post meta */
  /* post content */
  .post-content {
    /* at this larger size, we can start to align images */
  }
  .post-content .alignleft, .post-content img.alignleft {
    max-width: 50%;
    height: auto !important;
  }
  .post-content .alignright, .post-content img.alignright {
    max-width: 50%;
    height: auto !important;
  }

  /* end .post-content */
  .wp-caption {
    width: auto !important;
    /* images inside wp-caption */
  }

  /* end .wp-caption */
  /* image gallery styles */
  /* end .gallery */
  /* gallery caption styles */
  /******************************************************************
  PAGE NAVI STYLES
  ******************************************************************/
  .bones_page_navi {
    /* current page link */
    /* end .bones_page_navi .bpn-current */
    /* common styles for page-navi links */
    /* remove the bg on end links */
    /* previous link */
    /* next page link */
    /* first page link */
    /* last page link */
  }
  .bones_page_navi li.bpn-current a {
    /* hovering on current page link */
  }

  /* end .bones_page_navi */
  /* fallback previous & next links */
  /* end .wp-prev-next */
  /******************************************************************
  COMMENT STYLES
  ******************************************************************/
  /* h3 comment title */
  #comments {
    /* number of comments span */
  }

  .commentlist {
    /* general comment classes */
    /* vcard */
    /* end .commentlist .vcard */
    /* comment meta */
    /* comment content */
    /* end .commentlist .comment_content */
    /* comment reply link */
    /* end .commentlist .comment-reply-link */
  }
  .commentlist li {
    /* end .commentlist li ul.children */
  }
  .commentlist li ul.children {
    /* variations */
    /* change number for different depth */
  }

  /* end .commentlist */
  /******************************************************************
  COMMENT FORM STYLES
  ******************************************************************/
  .respond-form form input[type=text],
  .respond-form form input[type=email],
  .respond-form form input[type=url],
  .respond-form form textarea {
    /* form validation */
  }

  /* comment submit button */
  /* comment form title */
  /* cancel comment reply link */
  /* logged in comments */
  /* allowed tags */
  /* no comments */
  /*********************
  SIDEBARS & ASIDES
  *********************/
  .sidebar {
    margin-top: 2.2em;
  }
  .sidebar #callouts {
    padding: 1.5em 10% 1em;
  }

  .widgettitle {
    border-bottom: 2px solid #444;
    margin-bottom: 0.75em;
  }

  .widget {
    margin: 0 0 1em;
  }
  .widget ul li {
    margin-bottom: 0.75em;
    /* deep nesting */
  }
  .widget ul li ul {
    margin-top: 0.75em;
    padding-left: 1em;
  }

  .page .widget {
    padding: 0;
  }

  /* nav menu widget */
  .widget_nav_menu {
    margin-bottom: 1em;
  }
  .widget_nav_menu ul li {
    margin: 0 0 1px 0;
  }
  .widget_nav_menu ul li a {
    padding: 0.7em 5% 0.5em;
  }

  /*********************
  FOOTER STYLES
  *********************/
}
/* end of media query */
@media only screen and (min-width: 930px) {
  .menu ul li a {
    font-size: 1.1em;
    padding: 0 0 10px;
  }

  .menu ul li {
    padding: 0 11px;
  }

  #callouts .block img {
    width: 100% !important;
    height: auto !important;
  }
}
/* end of media query */
@media only screen and (min-width: 1030px) {
  /* styles in 1030up.scss */
  /******************************************************************
  Site Name: 
  Author: 
  
  Stylesheet: Just larger than iPad
  
  This is the desktop size. It's larger than an iPad so it will only
  be seen on the Desktop. 
  
  ******************************************************************/
  .wrap {
    max-width: 960px;
  }

  #logo {
    margin: 0;
    width: 30.75%;
  }
  #logo a {
    padding: 20px 29px 22px 21px;
  }
  #logo a img {
    width: 100%;
    height: auto;
  }

  #login .sign-up .frm_form_fields {
    width: 59%;
  }

  .menu ul li {
    padding: 0 16px;
  }

  .footer {
    min-height: 144px;
    padding-top: 1.1em;
  }

  .home #callouts .block {
    height: 240px;
  }
  .home #callouts .block > div {
    height: 200px;
  }
  .home #callouts .block .detail p, .home #callouts .block .detail a {
    font-size: 1em;
  }

  #video {
    height: 438px;
    margin-bottom: 1em;
    overflow: hidden;
  }

  .mejs-overlay-button {
    top: 60%;
  }
}
/* end of media query */
/******************************************************************
PRINT STYLESHEET
******************************************************************/
@media print {
  * {
    background: transparent !important;
    color: black !important;
    text-shadow: none !important;
    filter: none !important;
    -ms-filter: none !important;
  }

  a, a:visited {
    color: #444 !important;
    text-decoration: underline;
    /* show links on printed pages */
    /* show title too */
  }
  a:after, a:visited:after {
    content: " (" attr(href) ")";
  }
  a abbr[title]:after, a:visited abbr[title]:after {
    content: " (" attr(title) ")";
  }

  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }

  pre, blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }

  tr, img {
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
  }

  @page {
    margin: 0.5cm;
}

  p, h2, h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }

  /* hide content people who print don't need to see */
  .sidebar,
  .page-navigation,
  .wp-prev-next,
  .respond-form,
  nav {
    display: none;
  }
}