/*
* LH overrides for responsive design
* Media Queries change the settings for each size/format 
* COMMENT your changes (or suffer)!
*/

html {
    -webkit-box-sizing: border-box; /* Safari 3.0 - 5.0, Chrome 1 - 9, Android 2.1 - 3.x */
    -moz-box-sizing: border-box;    /* Firefox 1 - 28 */
    box-sizing: border-box;         /* Safari 5.1+, Chrome 10+, Firefox 29+, Opera 7+, IE 8+, Android 4.0+, iOS any */
}
*, *:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

/* PURE IO corrections for responsive */
.pure-g .login-form, .pure-g .login-signup {
        width:100% !important;
        padding:0 2em;
    }

.pure-g-r {
    display: flex;
    flex-flow: row wrap;
}
    
html#accountsgroup .createaccount{
        max-width: 500px;
        margin: 0 auto;
    }
    
.formright.panel{height:auto !important;}

#storegroup .dept-productentry-secondlevel .puregrid-unit-1 {margin:0 0 1em 0;}

/* desktop and standard format with set widths */
@media screen and (min-width: 1140px) {
    
    /* pure grid */
    .puregrid-unit-1{float:left;}
    
    #header {width:100%;max-width:1138px !important;}
    
    /* TEMPLATE PAGES */
    
    /* farmers profiles, galleries and info */
    #farmgroup.farmgallery #leftcontentwrapper {width:100%;}
    #farmgroup.farmgallery #leftcontentwrapper #content {width:100%;max-width:960px;}
    
    /* forms */
    html#accountsgroup .pure-g .login-form {
        border-right:1px solid #c7c7c7;
    }
    
    #container {
        width: 1140px;
    }
    
    select.locations{display:none;}
    select.dropdownnav{display:none;}
    select.sidebarnav{display:none;}
    
    label.searchwhat{display:none;}
    
    .searchbuttontext{display:none;}
    
    div.memberentriesblock{float:left;width:100%;max-width:580px;margin:2em 0 2em 4em;}
    div.reviewsblock{float:right;width:170px;}
    
    /* modal lightbox / colorbox */
    .cap-left figcaption { bottom: 0; left: -30%; }
    .cap-left:hover figcaption { left: 0; }

    .cap-right figcaption { bottom: 0; right: -30%; }
    .cap-right:hover figcaption { right: 0; }

    .cap-top figcaption { left: 0; top: -30%; }
    .cap-top:hover figcaption { top: 0; }

    .cap-bot figcaption { left: 0; bottom: -30%;}
    .cap-bot:hover figcaption { bottom: 0; }
    figure { 
    display: block; 
    position: relative; 
    overflow: hidden;
    margin:0 0 20px 0; /*purecss override*/
    }
    figcaption { 
    position: absolute; 
    background: rgba(0,0,0,0.75); 
    color: white; 
    padding: 10px 20px; 

    opacity: 0;
    bottom: 0; 
    left: -30%;
    -webkit-transition: all 0.6s ease;
    -moz-transition:    all 0.6s ease;
    -o-transition:      all 0.6s ease;
    }
    figcaption a {
    color:white;
    }
    figure:hover figcaption {
    opacity: 1;
    left: 0;
    }
}

/* under 1140 we remove set widths */
@media screen and (max-width: 1139px) {
    /* pure grid basic unit */
    .puregrid-unit-1{float:left;}
    
    /* TEMPLATE PAGES */
    /* photo gallery edit bar */
    .panel.panel-edit {
       padding-bottom: 1em;
    }
    
    /* log in and account creation */
    html#accountsgroup #leftcontentwrapper, html#membergroup #leftcontentwrapper{width:100%;}
    
    html#accountsgroup #leftcontentwrapper .content-inner-wrapper > div.createaccount, html#membergroup #leftcontentwrapper .content-inner-wrapper > div.createaccount{
        width:auto !important;
        max-width:400px;
    }
    
    .createlisting{
        margin:0 auto 1em auto;
        text-align:center;
    }
    
    /* logged in admin pages */
    html.admingroup #contentwrapper {
        padding-top:1em !important;
    }
    
    html.admingroup #container, html.admingroup #leftcontentwrapper, html.admingroup #content {
        width:100% !important;
        padding:0 !important;
    }
    
    html.admingroup #container > table, html.admingroup #content > table{
        width:100% !important;
        padding:1em !important;
        margin:0 !important;
    }
    
    html#accountsgroup .alert{
        max-width: 70%;
        margin: 1em auto !important;
        text-align: center;
    }
    
    /* store and departments */
    #storegroup .dept-levelonemenu {width:100%;margin-left:0;}
    
    /* forms */
    form.default input[type="submit"], #content form.default input[type="submit"]{margin:1em 0 !important;}
    
    html#accountsgroup .pure-g .login-form {
        border-right:1px solid #c7c7c7;
    }
    
    .pure-g .login-form input, .pure-g .login-form label {
        margin-left:0 !important;margin-right:0 !important;
    }
    
    .right,.left{float:none;}
    
    .right > .button a,.left > .button a{line-height:3em;}
    
    #header {
        position:fixed;
        width:100%;
        border-bottom:1px solid #ccc;
        box-shadow:0 2px 4px rgba(0,0,0,0.1);
    }
    
    label.searchwhat{display:none;}
    
    .searchbuttontext{display:none;}
    
    div.loginblock{float:none;position:absolute;top:1em;right:1em;}
    
    div#logo{float:left;}
    
    #search {
      margin: 0 auto 0.5em auto;
      padding-left: 230px;
      float: left;
      width: 100%;
    }
    
    div#nav{margin:1em auto 0 auto;}
    
    #container {
        width: 100% !important;
        margin:0;padding:0;
        border-left:none;border-right:none;
    }
    
    #contentwrapper {
        float: none;
        width: 100%;
        margin:0;
        padding: 10em 2em 0 2em;
    }
    
    #leftcontentwrapper {
        width: 100%;
        float: none;
    }

    #content {
        float: none;
        width: 100% !important;
        margin:0; padding:0;
    }
    
    .content-wide #content {
      width: inherit;
      padding: inherit;
    }

    .content-inner-wrapper {
        width: 100% !important;
    }
    
    .leftsidebar {
        width: 100%;
        padding: 0;
        margin: 0;
        float: none;
        
        display:none;/* remove left sidebar for pads and mobile for now */
    }
    
    ul.typenav{width:100% !important;text-align:center;padding-bottom:0.4em;}
    ul.typenav li:last-child{border:none !important;}
    
    #storegroup .sidebar, #newslettergroup .sidebar{width:100%;}
    
    .sidebar .sidenav li{width:auto;display:inline-block;}
    
    div.widget{margin:0 auto 3em auto;}
    
    #sidebar_inseason{overflow:hidden;max-height:200px;}
    
    .inseason img {width:100%;height:auto;}
    
    table.lhcalendar{margin:0 auto;width:100%;max-width:500px;}
    
    table.lhcalendar p, table.lhcalendar a, table.lhcalendar td {
      font-size: 18px;
    }
    
    table.lhcaldays td {
      text-align: center;
      height: 2em;
    }
    
    .newsletter-sidebar{margin:0 auto;width:100%;}
    
    #sidebar_connect .socialchicklets.padleft{margin:0 auto;padding:0;width: 76px;}
    
    html#home #content {
        width: 100%;
    }
    
    html#home #homecontent {
        padding: 0 1em 20px 1em;
    }
    
    div#map{
        margin:0 auto;
        width:100% !important;
        max-width:600px;
    }
    
    .search-map{
        margin:0 auto;
        width:100% !important;
        max-width:700px;
    }
    
    div.memberentriesblock{float:left;width:100%;max-width:60%;margin:2em 0 2em 4em;}
    div.reviewsblock{float:right;width:30%;}
    
    .rightsidebar{
        width:100%;
        float:none;
    }
    
    .sidebar.right,.sidebar.left{margin:0 auto 3em auto !important;width:100% !important;max-width:100% !important;}
    
    .pagination{width:100%;}
    #storegroup .pagination.right{width:auto;}
    
    #footer {
        width: 100% !important;
    }
    
    #footer div.socialchicklets{margin:0 auto;width:76px;}
    
    
    /*ul.locs, div#nav ul.nav, ul.sidenav, div.sidebar {display:none;}*/
    select.locations, select.dropdownnav, select.sidebarnav{display:none;}
    #accountsgroup select.sidebarnav {display:block;}
    #accountsgroup div.sidebar {display:none;}
    select.sidebarnav{width:auto;}
    
    /* modal lightbox / colorbox */
    /* SHOULD REMOVE */
    .cap-left figcaption { bottom: 0; left: -30%; }
    .cap-left:hover figcaption { left: 0; }

    .cap-right figcaption { bottom: 0; right: -30%; }
    .cap-right:hover figcaption { right: 0; }

    .cap-top figcaption { left: 0; top: -30%; }
    .cap-top:hover figcaption { top: 0; }

    .cap-bot figcaption { left: 0; bottom: -30%;}
    .cap-bot:hover figcaption { bottom: 0; }
    figure { 
    display: block; 
    position: relative; 
    overflow: hidden;
    margin:0 0 20px 0; /*purecss override*/
    }
    figcaption { 
    position: absolute; 
    background: rgba(0,0,0,0.75); 
    color: white; 
    padding: 10px 20px; 

    opacity: 0;
    bottom: 0; 
    left: -30%;
    -webkit-transition: all 0.6s ease;
    -moz-transition:    all 0.6s ease;
    -o-transition:      all 0.6s ease;
    }
    figcaption a {
    color:white;
    }
    figure:hover figcaption {
    opacity: 1;
    left: 0;
    }
}

/* mobile and small-scale format */
@media screen and (max-width: 767px) {
    body {width:100%; max-width:100%;}
    
    .leaderboardarea {width:100%; max-width:100%;}
    
    /*JqUI*/
    .ui-widget-content {
        width:100% !important; height:100% !important;
        position: fixed !important;
        left:0 !important; /*right:0 !important;*/ bottom:0 !important; top:inherit !important;
        max-width:50% !important; max-height:60% !important;
    }
    
    /* TEMPLATE PAGES */
    /* photo gallery edit bar */
    .panel.panel-edit a.button {
       line-height:2.5em;
       margin:0 auto;
    }
    
    .pswp_buttonmenu .admin-tools {float:none;margin:0 22px;}
    
    /* images */
    a.photo > img {
        width:100%;
        height:auto;
        min-height:180px;
    }

    /* forms */
    .captionEntry {max-width:90%;}
    
    html#accountsgroup .pure-g .login-form {
        border-right:none;
        border-bottom:1px solid #ccc;
        margin-bottom:2em;
    }
    
    html#accountsgroup div.profilenav{width:auto !important;}
    
    form.default input[type="submit"], #content form.default input[type="submit"]{margin:1em auto !important;}
    
    form.default .formright, p.formright, #content p.formright {
        margin: 2px auto;
        text-align: left;
    }
    
    form.default .formright.indnt{margin:0.5em 0 3em 0 !important;padding:0 !important;}
    
    form.default b{display:block;text-align:center;}
    
    form.default label, form.default input, form.default img{
        /*display: block !important;
        width: auto !important;
        margin: 0.2em auto !important;*/
        text-align: center !important;
    }
    
    form.default select, form.default input, form.default textarea, form.default p.inline, #content form.default select, #content form.default input, #content form.default textarea, form.default img, form.default label{
        display: block !important;
        margin: 0.2em auto !important;
        width: auto !important;
    }
    
    form.default .formright.radiocheck{
        display:block;
        margin-top:1em;margin-bottom:1em;
        border-top:1px solid #ccc;border-bottom:1px solid #ccc;
        padding-top:1em;
    }
    
    #content form.default p, form.default p{text-align:left;}
    
    img{max-width:100%;}
    
    #header{
        padding:1em 2em 1em 2em;
        background-color:rgba(255,255,255,0.8);
        width:100%;
        max-width:100%;
        float: none;
    }
    
    #headercontent{display:none;}
    
    #menu-toggle{display:block;}
    div#logo{width:100%;float:none;margin:0 auto;text-align:center;}
    div#logo a{background-position:center center;height:80%;float:none;display:block;}
    div#logo #slogan{margin-left:0;}
    
    div#nav{width:100%;float:none;margin:0 auto;}
    
    div#nav ul.nav{text-align:center;}
    div#nav ul.nav li{display:block;margin:1em auto;border-bottom:1px solid #ddd;}
    
    /* omnisearch */
    div#search{width:100%;float:none;margin:2em auto;padding-left:0;}
    div.loginblock{width:100%;float:none;margin:4em auto 3em auto;text-align:center;position: relative;}
    
    #search-dropdown{display:none;}
    
    label.searchwhat{display:block;text-align: center;}
    input.searchwhat{display:block;width:auto !important;margin:0.5em auto 1.5em auto;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;}
    
    label.searchwhere{display:block;text-align:center;position:relative;margin: 0;padding: 0;}
    input.searchwhere{display:block;width:auto !important;margin:0.5em auto 1.5em auto;padding-left:15px;}
    
    input.button-search{display:none;}
    
    .searchglasswrap{
        display: block;
        margin:2em auto;
        top:0;left:0;
        width:50%;height:3.5em;
        border: 1px solid #aaaaaa;
        border-radius:4px;
        -moz-border-radius:4px;
        -webkit-border-radius:4px;
        background: #178c59;
        background: -webkit-gradient(linear, left top, left bottom, from(#36cc8d), to(#178c59));
        background: -webkit-linear-gradient(top, #36cc8d, #178c59);
        background: -moz-linear-gradient(top, #36cc8d, #178c59);
        background: -ms-linear-gradient(top, #36cc8d, #178c59);
        background: -o-linear-gradient(top, #36cc8d, #178c59);
    }
    
    .searchglass{
        display: block;
        top: 0.85em;
        left: 45%;
    }
    
    .searchbuttontext{display:block;}
    
    #contentwrapper {
        padding-top: 7em;/* depends on height of header */
    }
    
    /* sidebars */
    .sidebar{margin:0 auto;width:100% !important;}
    
    .accountsidebar {
        width: 100%;
        padding: 2em 0;
        margin: 0;
        float: none;
    }
    
    .accountsidebar h3 {text-align:center;}
    
    .fullwidth{width:100% !important;}
    .panel,.panel.right,.panel.left{margin:0 auto !important;width:100% !important;max-width:100% !important;}
    
    /* page templates */
    
    #storegroup .sidebar h4, #newslettergroup .sidebar h4{text-align:center;}
    
    #bestsellers div.featuredproduct{float:none;width:100%;}
    
    .newsletter-content{max-width:300px;width:100%;}
    
    div.memberentriesblock{float:none;width:100%;max-width:100%;margin:2em auto;}
    div.reviewsblock{float:none;width:100%;}
    
    div.membercell{line-height:1.6em;}
    
    .pagination{width:100%;padding-left:0 !important;margin-top:1em;}
    
    /* footer */
    
    #footer .locs li {
        display: block;
        border-right: none;
    }
    
    #footer .footer-two {
      padding: 40px 0;
    }
    
    #footer p{text-align: center;}
    
    .footleft {
      display: block;
      padding-left: 0;
    }
    
    .footright {
      float: none;
      display: block;
      margin-top: 1em;
      padding-right: 0;
      text-align: center;
    }
    
    #footer div.socialchicklets{margin:0 auto;width:76px;}
    
    .socialchicklets ul{text-align:center;margin:0 auto;}
    
    select.locations, select.dropdownnav, select.sidebarnav {display:block;}
    ul.locs, div#nav ul.nav, ul.sidenav/*, div.sidebar*/ {display:none;} // might be too strong
    #farmgroup .right.sidebar {display:block !important;float:none !important;}
    select.sidebarnav{width:80%;}
    
    /* modal lightbox / colorbox */
    .cap-left figcaption { bottom: 0; left: 0; }
    .cap-right figcaption { bottom: 0; right: 0; }
    .cap-top figcaption { left: 0; top: 0; }
    .cap-bot figcaption { left: 0; bottom: 0;}

    figure { 
    display: block; 
    position: relative; 
    overflow: none;
    margin:0 0 20px 0; /*purecss override*/
    }
    figcaption { 
    position: relative; 
    background: rgba(0,0,0,1); 
    color: white; 
    padding: 10px 20px; 
    
    display:block;
    opacity: 1;
    bottom: 0; 
    left: 0;
    }
    figcaption a {
    color:white;
    }
}

/* header horizontal to vertical */
.custom-wrapper {
    height: 2em;
    overflow: hidden;
    -webkit-transition: height 0.5s;
    -moz-transition: height 0.5s;
    -ms-transition: height 0.5s;
    transition: height 0.5s;
}

.custom-wrapper.open {
    height: auto;
}

.custom-menu-3 {
    text-align: right;
}

.custom-toggle {
    width: 34px;
    height: 34px;
    display: block;
    position: absolute;
    top: 0;
    /*right: 0;*/
    left:2px;
    display: none;
}

.custom-toggle .bar {
    background-color: #07864f;
    display: block;
    width: 20px;
    height: 3px;
    border-radius: 100px;
    position: absolute;
    top: 18px;
    right: 7px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
}

.custom-toggle .bar:first-child {
    -webkit-transform: translateY(-6px);
    -moz-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    transform: translateY(-6px);
}

.custom-toggle .bar:last-child {
    -webkit-transform: translateY(6px);
    -moz-transform: translateY(6px);
    -ms-transform: translateY(6px);
    transform: translateY(6px);
}

.custom-toggle.x .bar {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.custom-toggle.x .bar:first-child {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

@media (max-width: 47.999em) {

    .custom-menu-3 {
        text-align: left;
    }

    .custom-toggle {
        display: block;
    }

}

@media (-webkit-min-device-pixel-ratio: 2), /* Retina on Webkit */
       (min-resolution: 192dpi)             /* Everyone else */ {
    html, body {max-width:100%;}
}

select.locations{width:100%;height:auto;padding:8px;margin:0 auto;}
select.dropdownnav{width:80%;height:auto;padding:10px;margin:0 auto 1em auto;}
select.dropdownnav option{min-height:1em;padding:60px 10px;border-bottom:1px solid #eee;}
select.sidebarnav{height:auto;padding:10px;margin:0 auto 1em auto;}

.morecities {line-height:2em;}

div#nav {clear:both;}

.storecatimg{padding:1em;}

.storecatimg img {
  max-width:134px;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  padding: 6px;
  margin: 10px auto;
  overflow: hidden;
  border: 1px solid #aaa;
  -webkit-box-shadow: 0 6px 8px -4px #888;
  -moz-box-shadow: 0 6px 8px -4px #888;
  box-shadow: 0 6px 8px -4px #888;
}

/* Menu Toggle for small screens */
#menu-toggle{background:url(../img/icon-menu.png) no-repeat 0 0;width:22px;height:22px;position:absolute;top:5px;right:5px;}

figure.cap-bot{text-align:center;}