/*
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 

let's now call the FUNCTIONS for these different stylesets. This
doesn't load the CSS, the CSS is loaded inside the media queries.
*/
/******************************************************************
Theme Name: Tang!
Theme URI: http://lemonslicedigital.com
Author: Simon MacDonald

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 

let's now call the FUNCTIONS for these different stylesets. This
doesn't load the CSS, the CSS is loaded inside the media queries.
*/
/******************************************************************
Theme Name: Tang!
Theme URI: http://lemonslicedigital.com
Author: Simon MacDonald

Stylesheet: 481px and Up Stylesheet

This stylesheet is loaded for larger devices. It's set to 
481px because at 480px it would load on a landscaped iPhone.
This will load on an Android HTC landscape

******************************************************************/
/* 
wrapping styles in a function so we can call it
inside of media queries. We also do this so we can
call this function in the ie.less file. Which means
IE will get all the styles without any hefty work.
*/
/* end of the function (DO NOT DELETE) *//******************************************************************
Theme Name: Tang!
Theme URI: http://lemonslicedigital.com
Author: Simon MacDonald

Stylesheet: Tablet Portrait & Small Desktop Stylesheet


******************************************************************/
/* 
wrapping styles in a function so we can call it
inside of media queries. We also do this so we can
call this function in the ie.less file. Which means
IE will get all the styles without any hefty work.
*/
/* end of the function (DO NOT DELETE) *//******************************************************************
Theme Name: Tang!
Theme URI: http://lemonslicedigital.com
Author: Simon MacDonald

Stylesheet:Just larger than iPad Seen on: Desktop and Samsung Tablet Landscape
******************************************************************/
/* 
wrapping styles in a function so we can call it
inside of media queries. We also do this so we can
call this function in the ie.less file. Which means
IE will get all the styles without any hefty work.
*/
/* end of the function (DO NOT DELETE) *//******************************************************************
Theme Name: Tang!
Theme URI: http://lemonslicedigital.com
Author: Simon MacDonald

Stylesheet: Super Large Monitor Stylesheet



******************************************************************/
/* 
wrapping styles in a function so we can call it
inside of media queries. We also do this so we can
call this function in the ie.less file. Which means
IE will get all the styles without any hefty work.
*/
/* end of the function (DO NOT DELETE) *//* Minify or not minify that is the reason*/
/******************************************************************
AVERAGE VIEWING SIZE 
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: 481px) {
  /* styles in 481up.less */
  /* DO NOT DELETE */
  #container {
    width: 100%;
  }
  .mobilemenu {
    display: none;
  }
  .menu {
    display: block !important;
    margin: 0;
    /*	z-index:100;*/
  
    /*end menu ul  li*/
  
  }
  .menu ul {
    position: relative;
    margin: 0 auto;
    padding: 0.4em 0 0 0;
    height: 1.85em;
    list-style-type: none;
    text-align: center;
    /*end menu li*/
  
  }
  .menu ul li {
    position: relative;
    display: inline;
    background-image: none !important;
    background-color: #000 !important;
    margin: 0;
    width: inherit;
    float: none;
    padding: 0.146em 1% /*1.618em*/ 0 0;
    font-size: 1em;
    border: none;
    /*start sub menu*/
  
    /* end submenu ul li */
  
  }
  .menu ul li ul {
    display: none  !important;
    width: 12.5em;
    position: absolute;
    margin: 0;
    top: 1.85em;
    left: 0;
    padding: 0;
    z-index: 100;
    /* end submenu li */
  
  }
  .menu ul li ul li {
    border: none;
    display: block;
    margin: 0;
    padding: 0.146em 1% /*1.618em*/ 0 0;
    background-image: none !important;
    background-color: #000;
    line-height: 1.85em;
    text-align: left;
  }
  .menu ul li ul li a {
    display: block;
    padding: 0.2em 0  .2em  2em;
    border-bottom: solid 1px #1a1a1a !important;
    width: 10.5em;
  }
  .menu ul li ul:first-child a {
    border-top: solid 1px #1a1a1a !important;
  }
  .menu ul li ul:last-child a {
    border-bottom: none;
  }
  .menu ul li:hover ul {
    display: block !important;
  }
  .menu ul li a {
    display: inline;
    border-bottom: none;
  }
  .menu ul:first-child a {
    border-top: none ;
  }
  /*********************
  Portfolio Grid
  *********************/
  .portfoliowrapper .portfolioimage {
    width: 47%;
  }
  .portfoliowrapper .portfoliotext {
    float: right;
    width: 47%;
    margin: 0 0 0 3%;
  }
}
/* end of media query */
/******************************************************************
TABLET & SMALLER LAPTOPS
This is the average viewing window. So Tablets, smaller 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: 768px) {
  /* styles in 768up.less */
  /* DO NOT DELETE */
  /*********************
  GENERAL STYLES
  *********************/
  #container {
    width: 100%;
  }
  /*********************
  LAYOUT & GRID STYLES
  *********************/
  /***** Grid Options down here, where they are usable ******/
  /* 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 */
  /* layout & column defaults */
  .onecol,
  .twocol,
  .threecol,
  .fourcol,
  .fivecol,
  .sixcol,
  .sevencol,
  .eightcol,
  .ninecol,
  .tencol,
  .elevencol {
    float: left;
    position: relative;
    margin-right: 3.8%;
  }
  /* adding float to large column */
  .twelvecol {
    float: left;
    position: relative;
  }
  /* default styles & fixes */
  .last {
    margin-right: 0;
    float: right;
  }
  /******************************************************************
  H1, H2, H3, H4, H5 STYLES
  ******************************************************************/
  h1,
  .h1 {
    font-size: 2.5em;
    line-height: 1.333em;
    text-align: left;
    margin-top: 0.45em;
    margin-bottom: 0;
    float: left;
    width: 100%;
  }
  h2,
  .h2 {
    font-size: 1.75em;
    line-height: 1.4em;
    margin-bottom: 0.375em;
  }
  h3,
  .h3 {
    font-size: 1.125em;
  }
  h4,
  .h4 {
    font-size: 1.1em;
    font-weight: 700;
  }
  h5,
  .h5 {
    font-size: 0.846em;
    line-height: 2.09em;
    text-transform: uppercase;
    letter-spacing: 2px;
  }
}
/* end of media query */
/******************************************************************
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: 1030px) {
  /* styles in 1030up.less */
  /* DO NOT DELETE */
  #container {
    max-width: 71.25em;
  }
  .mobilemenu {
    display: none;
  }
  .uk2ad {
    display: block;
  }
}
/* end of media query */
/******************************************************************
LARGE VIEWING SIZE 
This is for the larger monitors and possibly full screen viewers.
******************************************************************/
@media only screen and (min-width: 1240px) {
  /* styles in 1240up.less */
  /* DO NOT DELETE */
}
/* end of media query */
/******************************************************************
PRINT STYLESHEET
Feel free to customize this. Remember to add things that won't make
sense to print at the bottom. Things like nav, ads, and forms should
be set to display none.
******************************************************************/
@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;
  }
}