/* =========================================================================
	Project - SGPools

	DEPENDENCIES
	----------------------------------------------------------------------
	_colors.scss
	_mixins.scss

	TABLE OF CONTENT
	----------------------------------------------------------------------
	01 768px and below (Ipad Mini and phone)
	02 1024px and above (Desktop)

========================================================================== */
/* =======================================================================
01 768px and below (Ipad Mini and phone)
========================================================================== */
/* ======================================================================
02 768px and above (Desktop)
========================================================================== */
@media only screen and (min-width: 768px) {
  .mobile-only {
    display: none !important; }

  .desktop-only {
    display: block; }

  body {
    border-top: 2px solid #c00; }

  /* *** Header *** */
  .header {
    position: relative;
    border: 0;
    box-shadow: none; }
    .header .branding {
      padding: 0; }
      .header .branding .site_logo {
        float: left;
        border-bottom: 0;
        width: auto; }
      .header .branding .site_region {
        float: left;
        border-left: 1px solid;
        margin: 1em; }
        .header .branding .site_region h4 {
          font-size: 1.4em;
          margin: 10px; }
      .header .branding .site_search {
        display: block;
        float: right;
        margin: 15px 0 0; }
        .header .branding .site_search #search {
          width: 150px; }
        .header .branding .site_search #search_submit {
          width: 50px; }
    .header .mobile-nav {
      display: none !important; }
    .header .quick-nav {
      display: none; }

  .main.primary {
    zoom: 1;
    /* For IE 6/7 (trigger hasLayout) */
    display: block;
    width: 100%;
    z-index: 10;
    float: left;
    margin-bottom: 0px;
    box-shadow: none;
    border-bottom: 1px solid #ddd; }
    .main.primary:before, .main.primary:after {
      content: "";
      display: table; }
    .main.primary:after {
      clear: both; }
    .main.primary ul {
      background: white;
      padding: 0;
      width: 100%;
      height: 26px;
      margin: 0; }
      .main.primary ul li {
        display: inline;
        padding: 0;
        position: relative;
        border: 0; }
        .main.primary ul li:first-child {
          padding-left: 0; }
          .main.primary ul li:first-child a {
            padding-left: 0; }
        .main.primary ul li:last-child a {
          border: 0; }
        .main.primary ul li a {
          color: #333;
          font-size: 12px;
          padding: 0 1.5%;
          display: inline-block;
          font-weight: bold;
          border-right: 1px solid #ccc;
          margin: 0;
          width: auto;
          line-height: inherit; }
        .main.primary ul li .lvl2 {
          display: none;
          position: absolute;
          top: 17px;
          left: -5px;
          z-index: 9999;
          width: 230px;
          padding: 0;
          margin: 0;
          border: 1px solid #ccc;
          text-align: left;
          height: auto; }
          .main.primary ul li .lvl2 li {
            width: 100%;
            background-color: #fff;
            border-top: 0; }
            .main.primary ul li .lvl2 li a {
              text-transform: none;
              width: 100%;
              border-bottom: 1px solid #ccc;
              line-height: 36px;
              border-right: 0px;
              padding: 0 7.5%; }
              .main.primary ul li .lvl2 li a:hover {
                background-color: #ddd; }
        .main.primary ul li:hover {
          background-color: #fff; }
          .main.primary ul li:hover a {
            text-decoration: none; }
          .main.primary ul li:hover .lvl2 {
            display: block; }
    .main.primary .close {
      display: none; }

  .swiper-container .swiper-wrapper .swiper-slide a {
    top: 0;
    height: 99.8%;
    width: 100%;
    display: block; }
    .swiper-container .swiper-wrapper .swiper-slide a img {
      width: 100%; }
  .swiper-container .swiper-wrapper .swiper-slide .overlay {
    color: white;
    padding: 13px 32px;
    background-color: rgba(0,0,0,0.8);
    height: 50%;
bottom: 0; 
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=80)";
width: 40%;
  position: absolute;
  }
    .swiper-container .swiper-wrapper .swiper-slide .overlay .title {
      margin: 3% 0; 
      font-size: 2em;
    }
     .swiper-container .swiper-wrapper .swiper-slide .overlay .desc {
    display:block;
    }
  .swiper-container .pagination {
    position: absolute;
    bottom: 0px;
    left: auto;
    right: 2%;
    margin: 20px 0;
    display: block; }

  .quick-link-options a:first-child .option {
    margin-left: 0px; }
  .quick-link-options a:hover title {
    text-decoration: underline; }
  .quick-link-options a .option {
    width: 33%;
    float: left;
    margin-left: 1%;
    background-position: 6% 50%;
    padding-left: 70px; }
    .quick-link-options a .option.quick-2 {
      width: 28%; }
      .quick-link-options a .option.quick-2 .title {
        padding-right: 10%; }
    .quick-link-options a .option.quick-1 {
      width: 37%; }
    .quick-link-options a .option .title {
      padding: 0.6em 8%;
      text-align: center;
      min-height: 57px; }

  .products {
    text-align: left; }
    .products .item-listing {
      margin-bottom: 10px;
      display: block !important; }
      .products .item-listing .item {
        width: 24.2%;
        margin-left: 1%;
        max-height: auto;
        margin-bottom: 0; }
        .products .item-listing .item:first-child {
          margin-left: 0px; }
        .products .item-listing .item .overlay {
          margin: 10% 0 0;
          background-color: rgba(15, 15, 15, 0.5);
          padding: 2% 5%; 
        }
        .products .item-listing .item a
        {
            text-decoration: none;
        }
        .products .item-listing .item img
        {
            height: auto;
            width: 100%;
        }

    .products .all {
      position: absolute;
      width: auto; }
    .products .more {
      position: absolute;
      display: none;
      width: auto; }

  .see-more {
    padding: 1px 10px; }

  .events {
    text-align: left;
    margin: 0; }
    .events .main-title {
      margin: 5px 5px 15px; }
    .events .event-listings {
      margin-bottom: 10px; }
      .events .event-listings .event-item {
        width: 24.2%;
        padding: 1.5%;
        margin-left: 1%;
        margin-bottom: 0; }
        .events .event-listings .event-item:first-child {
          margin-left: 0; }
        .events .event-listings .event-item .description {
          display: block; }
        .events .event-listings .event-item .read-more {
          margin-top: 12%; }

        .events .event-listings-4
    {
        clear: left;
        float: left;
        width: 100%;
        background: white;
        zoom: 1;
        /* For IE 6/7 (trigger hasLayout) */
        margin-bottom: 0;
        text-align: left; 
        overflow: hidden
    } 
   .events .event-listings-3
    {
        clear: left;
        float: left;
        width: 100%;
        position: relative;
        right: 25%;
        background: #eee;
        zoom: 1;
        /* For IE 6/7 (trigger hasLayout) */
        margin-bottom: 0;
        text-align: left; 
    }
    .events .event-listings-2
    {
        clear: left;
        float: left;
        width: 100%;
        position: relative;
        right: 25%;
        background: white;
        zoom: 1;
        /* For IE 6/7 (trigger hasLayout) */
        margin-bottom: 0;
        text-align: left; 
    }


  .events .event-listings {
        float: left;
        width: 100%;
        position: relative;
        right: 25%;
        background: #eee;
        zoom: 1;
        /* For IE 6/7 (trigger hasLayout) */
        margin-bottom: 0;
        text-align: left; 
  }
   .events .event-listings .event-item:nth-child(1)
    {
        width: 24%;
        left: 75%;
    }

    .events .event-listings .event-item:nth-child(2)
    {
         width: 24%;
        left: 75%;
    }

    .events .event-listings .event-item:nth-child(3)
    {
         width: 24%;
        left: 75%;
    }

    .events .event-listings .event-item:nth-child(4)
    {
         width: 24%;
        left: 75%;
    }

    .events .all {
      position: absolute;
      width: auto;
      top: 5px; }

  .content-body {
    margin-top: 0; }

  /* =======================================================================
   Search Page
  ========================================================================== */
  .search.inpage-search, .search.news-list {
    width: 100%; }

  /* =======================================================================
   Product Page
  ========================================================================== */
  .top-nav {
    display: block;
    margin: 10px 0;
    padding-top: 30px; }
    .top-nav span {
      margin-right: 1%; }
      .top-nav span a {
        font-weight: bold; }

  .page-title h1 {
    margin: 20px 0;
    font-size: 2.6em;
    border-bottom: 0;
    padding-bottom: 0; }

  .side-nav {
    display: block;
    float: left;
    border-top: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
    padding: 10px 0;
    width: 22%;
    margin-bottom: 20px; }
    .side-nav ul {
      list-style-type: none;
      font-weight: bold;
      font-size: 1em;
      padding: 0 4%;
      border: 0; }
      .side-nav ul li.active > a {
        color: #cc0000 !important;
        font-weight: bold !important; }
    .side-nav .primary li {
      line-height: 2.4em; }
      .side-nav .primary li.active > a {
        color: #cc0000 !important;
        font-weight: bold !important; }
      .side-nav .primary li a {
        color: #333; }
      .side-nav .primary li .secondary {
        list-style-type: none;
        padding: 0 5%; }
        .side-nav .primary li .secondary li a {
          color: #999; }

  .product-list {
    width: 75%;
    float: right;
    margin: 0; }
    .product-list .prod-item {
      zoom: 1;
      /* For IE 6/7 (trigger hasLayout) */
      margin-bottom: 30px; }
      .product-list .prod-item:before, .product-list .prod-item:after {
        content: "";
        display: table; }
      .product-list .prod-item:after {
        clear: both; }
      .product-list .prod-item .details {
        margin: 0 2%; }
        .product-list .prod-item .details .title {
          font-size: 1.6em;
          font-weight: bold;
          float: none;
          width: 100%;
          margin: 0; }
        .product-list .prod-item .details .desc {
          padding: 14px 0 24px 0;
          border-bottom: 1px solid #ccc; }
    .product-list a:hover {
      text-decoration: none; }
    .product-list .more-info {
      border-radius: 0;
      padding: 0.3em 0.5em;
      margin-top: 13px;
      box-shadow: 1px 1px 7px -2px #000;
      margin-bottom: 10px;
      position: relative;
      left: 0%;
      bottom: 0;
      width: 35%;
      text-align: center; }

  /* =======================================================================
  Enquiry/Forms
  ========================================================================== */
  .form-content {
    float: right;
    width: 75%;
    margin-bottom: 20px;
    margin-left: 0;
    margin-right: 0px;
    zoom: 1;
    /* For IE 6/7 (trigger hasLayout) */ }
    .form-content:before, .form-content:after {
      content: "";
      display: table; }
    .form-content:after {
      clear: both; }
    .form-content div.title {
      font-size: 20px;
      font-weight: bold;
      padding: 0 0 10px 0; }
    .form-content div.desc {
      padding-bottom: 15px;
      font-size: 14px; }
    .form-content .field {
      margin: 25px 1%;
      zoom: 1;
      /* For IE 6/7 (trigger hasLayout) */ }
      .form-content .field:before, .form-content .field:after {
        content: "";
        display: table; }
      .form-content .field:after {
        clear: both; }
      .form-content .field > label, .form-content .section-noborder .scfSectionBorderAsFieldSet .scfSectionLegend, .form-content .scfSectionContent span{
        float: left;
        width: 27%;
        font-size: 14px;
        padding-right: 2%; 
        margin-bottom: 5px;
      }
      .form-content .section-noborder .scfSectionContent span{
        display: inline-block;
        margin-bottom: 5px;
        font-weight: bold;
      }

        .form-content .scfSectionContent span.scfRequired,  .field .scfValidatorRequired 
        {
            float: none !important;
            display: inline !important;
        }

      .form-content .field .input-panel, .form-content .scfSingleLineGeneralPanel, .form-content .scfEmailGeneralPanel,.form-content .scfTelephoneGeneralPanel,.form-content .scfDropListGeneralPanel ,.form-content .scfMultipleLineGeneralPanel,.form-content .scfRadioButtonListGeneralPanel{
        float: left;
        width: 55%; }
        .form-content .field .input-panel .dropDownList {
          width: 100%;
          height: 30px;
          box-shadow: inset 0 1px 3px #ddd;
          border-radius: 4px;
          border: 1px solid #ccc; }
        .form-content .field .input-panel .input-field, .form-content .scfSingleLineGeneralPanel .scfSingleLineTextBox, 
        .form-content .scfEmailGeneralPanel .scfEmailTextBox,.form-content .scfTelephoneGeneralPanel .scfTelephoneTextBox,
        .form-content .scfMultipleLineGeneralPanel .scfMultipleLineTextBox
         {
          width: 100%;
          height: 30px;
          border: 1px solid #ccc;
          border-radius: 4px;
          box-shadow: inset 0 1px 3px #ddd;
          padding: 5px; }
        .form-content .field .input-panel textarea.input-field, .form-content .scfMultipleLineGeneralPanel .scfMultipleLineTextBox {
          height: 130px; 
          resize: vertical;
        }
        .form-content .field .input-panel .radio-option {
          float: left;
          margin-right: 10%;
          display: inline-block; }
          .form-content .field .input-panel .radio-option .radio-field {
            float: left;
            margin-right: 5px; }
          .form-content .field .input-panel .radio-option label{
            float: left;
            font-weight: normal; }
          


      .form-content .field.captcha, .form-content .scfCaptchaGeneralPanel  {
        padding-left: 27%;
        margin-top: 5px;
        width: 80%;
        margin-bottom: 5px; }
        .form-content .field.captcha .scfCaptchaLimitGeneralPanel {
          width: 210px; }
          .form-content .scfCaptchaLimitGeneralPanel .scfCaptchStrongTextPanel .scfCaptchaTextBox {
            width: 100%;
            height: 30px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-shadow: inset 0 1px 3px #ddd;
            padding: 5px;
            margin-bottom: 10px; }
    .form-content .scfCaptchaGeneralPanel .scfCaptchaLabelText
    {
        margin-top: 0px;
    }
          .form-content .field.captcha .scfCaptchaLimitGeneralPanel .scfValidator {
            color: #c00;
            display: none; }
        .form-content .field.captcha table, .form-content .scfCaptchaGeneralPanel table {
          border: 1px solid #cbcbcb;
          border-radius: 4px; }
          .form-content .field.captcha table td, .form-content .scfCaptchaGeneralPanel table td {
            border-left: 1px solid #cbcbcb;
            border-width: 0 0 0 1px;
            font-size: inherit;
            margin: 0;
            overflow: visible; }
           
    .scfCaptchaGeneralPanel table
    {
        margin-top: 0 !important;
    }
      .form-content .field.required .error {
        display: none;
        color: #c00;
        padding: 5px 2% 0; }
      .form-content .field.required .symbol {
        display: inline;
        float: none; }
    .form-content .submission, .form-content .scfSubmitButtonBorder {
      margin-left: 27%; }
      .form-content .submission .submit, .form-content .scfSubmitButtonBorder .scfSubmitButton {
        border-radius: 0;
        padding: 0.3em 0.5em;
        margin-top: 13px;
        box-shadow: 1px 1px 7px -2px #000;
        width: auto;
        margin-bottom: 10px;
        background-color: #c00;
        bordeR: 0;
        color: white;
        padding: 0.3em 7em; }
    .form-content .symbol, .form-content .scfSectionContent span.scfRequired {
      display: none;
      color: #c00;
      padding: 1%;
      font-weight: bold;
      font-size: 18px; }
    .form-content .error {
      float: left;
      display: none; }
    .form-content .delivery .field .input-panel .radio-option {
      margin-left: 11%;
      margin-right: 0; }
    .form-content .service section {
      margin-top: 50px; }
      .form-content .subsection legend{
        color: #c00; }
    .form-content .service .field.captcha {
      padding-left: 36%; }
    .form-content .service .field .input-panel .radio-option {
      margin-left: 11%;
      margin-right: 0; }
    .form-content .service .field > label {
      width: 37%; }
    .form-content .service .field.plaintext label {
      width: 100%; }
    .form-content .service .submission {
      margin-left: 37%; }
    .form-content .general .field .radio-option {
      margin-right: 5%;
      width: auto; }
    .form-content .empty {
      display: block; }
    .form-content.sales-enquiry .field .input-panel textarea {
      height: 130px; }

  /* =======================================================================
  	Product Detail
  ========================================================================== */
  .product-detail .prod-item .title {
    font-size: 1.4em; }
  .product-detail .prod-item .image {
    float: left;
    width: 25%;
    max-height: 150px;
    text-align: center;
    padding: 1em; }
    .product-detail .prod-item .image img {
      width: auto; }
  .product-detail .prod-item .details {
    float: left;
    width: 70%;
    margin: 0 2%; }
    .product-detail .prod-item .details .quick-link-options a .option {
      width: 48%;
      background-position: 8.5% 50%; }
      .product-detail .prod-item .details .quick-link-options a .option .title {
        font-size: 14px;
        padding: 6px 8.4%; }
      .product-detail .prod-item .details .quick-link-options a .option.dealer {
        margin-left: 3%; }
    .product-detail .prod-item .details .title {
      font-size: 1.4em; }
    .product-detail .prod-item .details .cta {
      float: left;
      background-color: #5F605A;
      margin-right: 3%;
      width: auto; }
      .product-detail .prod-item .details .cta:hover {
        background-color: #c00; }
  .product-detail .accordion {
    margin-bottom: 10px;
    margin-right: 1%; }
    .product-detail .accordion h3 {
      padding: 10px;
      margin-bottom: 0; }
    .product-detail .accordion .description {
      border: 1px solid #5F605A;
      padding: 10px 2%; }
      .product-detail .accordion .description h4 {
        margin-top: 0; }
      .product-detail .accordion .description span {
        padding-left: 3%; }
        .product-detail .accordion .description span.bold-text {
          font-weight: bold;
          font-size: 14px; }
      .product-detail .accordion .description .badges {
        zoom: 1;
        /* For IE 6/7 (trigger hasLayout) */
        margin-left: 3%;
        margin-bottom: 20px; }
        .product-detail .accordion .description .badges:before, .product-detail .accordion .description .badges:after {
          content: "";
          display: table; }
        .product-detail .accordion .description .badges:after {
          clear: both; }
        .product-detail .accordion .description .badges img {
          float: left;
          height: 31px; }
    .product-detail .accordion img {
      max-width: 100%; }
  .product-detail .tabs {
    margin-bottom: 10px;
    margin-right: 1%; }
    .product-detail .tabs h3 {
      padding: 10px;
      margin-bottom: 0; }
    .product-detail .tabs .description {
      border: 1px solid #5F605A;
      padding: 10px 2%; }
      .product-detail .tabs .description h4 {
        margin-top: 0; }
      .product-detail .tabs .description span.bold-text {
        font-weight: bold;
        font-size: 14px; }
      .product-detail .tabs .description .badges {
        zoom: 1;
        /* For IE 6/7 (trigger hasLayout) */
        margin-left: 3%;
        margin-bottom: 20px; }
        .product-detail .tabs .description .badges:before, .product-detail .tabs .description .badges:after {
          content: "";
          display: table; }
        .product-detail .tabs .description .badges:after {
          clear: both; }
        .product-detail .tabs .description .badges img {
          float: left;
          height: 31px; }
    .product-detail .tabs img {
      max-width: none; 
      height: auto !important;
    }

  .refrigerator .accordion span {
    padding-left: 0; }
  .refrigerator .accordion img {
    width: 40%;
    float: left;
    margin-right: 5%; }
  .refrigerator .accordion p:after {
    clear: both;
    display: table;
    content: ""; }

  /* =======================================================================
  Events
  ========================================================================== */
  .inpage-search {
    zoom: 1;
    /* For IE 6/7 (trigger hasLayout) */
    width: 75%;
    float: right;
    margin: 0;
    margin-bottom: 20px;
    padding: 1%; }
    .inpage-search:before, .inpage-search:after {
      content: "";
      display: table; }
    .inpage-search:after {
      clear: both; }
    .inpage-search .search-options {
      float: left;
      width: 55%;
      margin-bottom: 0; }
      .inpage-search .search-options .by-content {
        position: relative; }
        .inpage-search .search-options .by-content input {
          width: 100%; }
      .inpage-search .search-options .by-date {
        position: relative;
        zoom: 1;
        /* For IE 6/7 (trigger hasLayout) */ }
        .inpage-search .search-options .by-date:before, .inpage-search .search-options .by-date:after {
          content: "";
          display: table; }
        .inpage-search .search-options .by-date:after {
          clear: both; }
        .inpage-search .search-options .by-date .from-fields {
          float: left;
          width: 50%;
          margin-bottom: 0; }
          .inpage-search .search-options .by-date .from-fields input {
            width: 79%;
            cursor: pointer; }
        .inpage-search .search-options .by-date .to-fields {
          float: left;
          width: 50%;
          padding-left: 4%; }
          .inpage-search .search-options .by-date .to-fields input {
            width: 87%;
            cursor: pointer; }
    .inpage-search .search-by {
      float: left;
      width: 15%;
      clear: none;
      margin-bottom: 0; }
    .inpage-search .submit-button {
      float: left;
      width: 25%; }

  .event-list {
    width: 75%;
    float: right;
    margin: 0; }
    .event-list .event-item {
      zoom: 1;
      /* For IE 6/7 (trigger hasLayout) */
      margin-bottom: 15px; }
      .event-list .event-item:before, .event-list .event-item:after {
        content: "";
        display: table; }
      .event-list .event-item:after {
        clear: both; }
      .event-list .event-item .image {
        float: left; }
        .event-list .event-item .image img {
          width: 100%; }
      .event-list .event-item .details {
        float: left;
        margin: 0 2%;
        width: 70%; }
        .event-list .event-item .details .title {
          font-size: 1.6em;
          float: none;
          width: 100%;
          margin: 0;
          line-height: 1em; }
    .event-list .more-info {
      border-radius: 0;
      padding: 0.3em 0.5em;
      margin-top: 13px;
      box-shadow: 1px 1px 7px -2px #000;
      width: auto;
      margin-bottom: 10px;
      position: relative;
      left: 0%;
      bottom: 0;
      width: 30%;
      text-align: center; }
    .event-list .more-info:hover {
      text-decoration: none; }
    .event-list.employee-eng .event-item .details {
      width: auto; }

  /* =======================================================================
  Footer
  ========================================================================== */
  .footer {
    zoom: 1;
    /* For IE 6/7 (trigger hasLayout) */
    clear: both;
    position: relative;
    border-top: 1px solid #ddd;
    padding: 10px 0 0;
    background-color: #fff; }
    .footer:before, .footer:after {
      content: "";
      display: table; }
    .footer:after {
      clear: both; }
    .footer .links {
      list-style-type: none;
      display: table;
      padding: 0;
      width: 100%; }
      .footer .links li {
        display: inline-block;
        border-left: 1px solid #999;
        padding: 0 1%;
        float: none;
        height: 1.5em; }
        .footer .links li:first-child {
          padding-left: 0px; }
    .footer .left-links {
      float: left;
      width: 61%; }
    .footer .right-links {
      float: right;
      width: 233px; }
    .footer .icn2 {
      width: auto;
      padding-right: 20px !important;
      background-repeat: no-repeat;
      background-position: right; }

  .screen-icn {
    background: none !important; }

  .lt-ie9 .products .overlay {
    margin-top: 74% !important; }

  .article-content {
    float: right;
    width: 75%;
    margin: 0;
    font-size: 13px; }
    .article-content img {
      padding: 1% 0;
      margin: 0 2%; }
    .article-content ul li {
      padding: 5px; }
    .article-content h3 {
      margin-top: 0; } }
/* ======================================================================
02 768px and above (Desktop)
========================================================================== */
@media only screen and (min-width: 1240px) {
  .table-responsive {
    overflow-x: normal; } }