/*
------------------------------------------------------------------------------------ RESPONSIVE

------------------------------------------------------------------------------------------------
*/


/*
----------------------------------------------------------------------------------------- TABLET

------------------------------------------------------------------------------------------------
*/

@media screen and (max-width: 980px) {

  #container {width: 95%;}

  #header div.login {display: none;}
  #footer div.copy {width: 50%; float: left; margin-right: -159px;}
  #header div.signup {width: 170px; font-size: 12px; display: block; margin-right: 5px;}
  #footer div.cards {width: 50%; float: right; margin-left: -160px;}

  .nav ul li a, #footer ul li a {padding:0 1em;}

  .col {margin-left:1%;}

  .col_1 {width:32.6666666667%;}

  .col_2_split {width:49.5%;}
  .col_2 {width:66.3333333333%;}

  .col_3 {width:100%;}
  .col_lesser {margin-left: 0px!important;}

  #page_home .col {
    margin: 0 0 10px 0;
    border:0px solid rgba(0,0,0,0);
    float:left;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    -moz-background-clip:padding-box !important;
    -webkit-background-clip:padding-box !important;
    background-clip:padding-box !important;

    border-left-width:5px;
    border-right-width:5px;
  }

  #page_home .col_1 {width:20%;}
  #page_home .col_2 {width:40%;}
  #page_home .col_4 {width:80%;}

  .gallery_lrg {width:100%; height:auto;}
  .gallery_2col {width:100%; height:auto;}

  #masonry_grid {width:100%;}

  img { max-width: 100%; height: auto; width: auto\9; /* ie8 */}

  /* Fix Google map controls */
  #google_map img { max-width: none;}

  ul.shop_cols li {margin-bottom: 16px}
  ul.shop_cols li a.overlay {position: relative; background: none; text-align: left; font-size:13px; color:#333333;}
  ul.shop_cols li a.overlay:hover {color:#333333;}
  ul.shop_cols li a.overlay span {background:none; width:55%; float:left; padding: 0; line-height: 20px;}
  ul.shop_cols li a.overlay span.price {width:45%; float:right; text-align: right;}
  ul.shop_cols li img {margin-bottom: 4px;}

  #testimonial_list li {display: none;}
  #testimonial_list img {display: none;}
  #testimonial_list li.test_alt {display: block;}
  #testimonial_list li.test_alt p {display: block;}

}

@media screen and (max-width: 906px) {

  #google_map {width:100%;}

}

@media screen and (max-width: 840px) {

  .nav ul li a, #footer ul li a {padding:0 0.8em;}

}

@media screen and (max-width: 774px) {
  #page_home .col_2, #page_home .h_3 img {width:100%;}

  #page_home .col_2, #page_home .h_2 {width:50%;}
  #page_home .col_4 {width:100%;}

  #page_home .h_3 {width:25%;}

}


@media screen and (max-width: 650px) {


  #header {padding: 5px 0 0 0;}

  #header a.logo {margin-left: 0; float:left; width: 233px;}

  #header .mobile_header {display:block;}

  #footer div.copy, #footer div.cards {margin-top:70px;}

  .thin_col p {padding-left: 0px;}

  #google_map {height:350px;}

/*
  #testimonial_list li div p {font-size: 20px; line-height: 30px; width:80%; padding: 60px 0;}
  #testimonial_list li div p span {font-size: 14px; line-height: 18px;}*/
  .basket_discount, .discount {width:100%; clear:both; float:none;}
}

/*
----------------------------------------------------------------------------------------- MOBILE

------------------------------------------------------------------------------------------------
*/


@media screen and (max-width: 480px) {

  #footer div.copy, #footer div.cards {margin-top:70px;}

  .col {width:100%; margin-left:0;}
  .col, .flexslider {margin-bottom: 20px;}
  .text_cols .col {margin-bottom: 0;}
  .prod_cols .col {margin-bottom: 20px;}

  .img_cols li {display:none; width:100%;}
  .img_cols li.first {display:block;}

  img { width: 100%; height: auto; width: auto\9; /* ie8 */}

  .nav ul {text-align:left;}
  .nav ul li {line-height: 20px; float: none;}
  .nav ul li a {line-height: 20px; padding: 6px 15px; display: block; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
  .nav a:hover {color:#333333;}
  .nav > ul > li.active > a {background-color: #E5E5E5;}

  .nav ul li ul {width: 90%; margin-left: 5%; padding:0; display: none;}
  .nav ul li.active ul {display: block;}
  .nav ul li ul li.active a {background-color: #f0f0f0;}

  .nav .nav_title {font-size: 16px; line-height: 20px; padding: 0 0 14px 0; display:block; width:100%; background:url('../../images/site_images/bg_collapse.png') 100% 2px no-repeat; overflow: hidden;}
  .nav .open {background-position: 100% -42px;}

  .nav > ul {display: none;}

  #masonry_grid {width:480px;}


  .side_summary {width:100%; float:none; max-width:none; }

  .form .left, .form .right {float: left; width:100%; border-left-width:0; border-right-width:0;}

  .mob_action {display:block;}

  #page_home .h_3 {width: 50%;}

  #google_map {height:250px;}

  ul.shop_cols li a.overlay span {background:none; width:70%; float:left; padding: 0; line-height: 20px;}
  ul.shop_cols li a.overlay span.price {width:30%; float:right; text-align: right;}



}

@media screen and (max-width: 430px) {
  #header div.signup {width: 185px; font-size: 13px; margin-top: 0px; display: block; margin-right: 5px;}
}

@media screen and (max-width: 380px) {
  #header div.login, #footer div.copy {width: 49%;}
  #footer div.cards {width: 49%;}

  #masonry_grid {width:380px;}

}


/*
----------------------------------------------------------------------------------------- RETINA

------------------------------------------------------------------------------------------------
*/

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {

  a.social_fb, a.social_tw, a.social_in, a.shop_basket, a.shop_checkout, .btn {background-image: url('../images/bg_header_sprite.png');
  -webkit-background-size: 20px 320px;
       -moz-background-size: 20px 320px;
         -o-background-size: 20px 320px;
            background-size: 20px 320px;
  }

.btn_sub_inv {
background-image:none;
}


  #footer a.logo {background-image: url('../../images/site_images/hayford_logo_sm@2x.png');
  -webkit-background-size: 318px 40px;
       -moz-background-size: 318px 40px;
         -o-background-size: 318px 40px;
            background-size: 318px 40px;
  }


  .flex-direction-nav a {background-image: url('../../images/site_images/bg_direction_nav@2x.png');
  -webkit-background-size: 2200px 31px;
       -moz-background-size: 2200px 31px;
         -o-background-size: 2200px 31px;
            background-size: 2200px 31px;
  }

  .basket_delete {background-image: url('../../images/site_images/bg_cross_small@2x.png');
  -webkit-background-size: 8px 108px;
       -moz-background-size: 8px 108px;
         -o-background-size: 8px 108px;
            background-size: 8px 108px;
  }

  .form input.datepicker {background-image: url('../../images/site_images/bg_calendar_icon@2x.gif');
  -webkit-background-size: 25px 22px;
       -moz-background-size: 25px 22px;
         -o-background-size: 25px 22px;
            background-size: 25px 22px;
  }

  .form input.datepicker {background-image: url('../../images/site_images/bg_close@2x.png');
  -webkit-background-size: 30px 130px;
       -moz-background-size: 30px 130px;
         -o-background-size: 30px 130px;
            background-size: 30px 130px;
  }

  #footer div.cards {background-image: url('../../images/site_images/bg_payments@2x.png');
  -webkit-background-size: 180px 18px;
       -moz-background-size: 180px 18px;
         -o-background-size: 180px 18px;
            background-size: 180px 18px;
  }

}