﻿
/*---------------------------code cleanups---------------------------*/
.hr {
    height: 1px;
    width: 100%;
    background-color: Gray;
}

.link-list {
    width: 100%;
    text-align: center;
    padding-bottom: 20px;
}


.worktime {
    font-size: 14px;
    padding-top: 5px;
    padding-bottom: 5px;
    width: 95%;
    text-align: left;
    padding-left: 40px;
}

.Share {
    border: 0pt none;
    margin-left: 50px;
    margin-top: 1px;
}

.title {
    font-size: 22px;
    color: #ff9600;
    font-weight: bold;
    margin: 15px auto;
    overflow: hidden;
}

.Copyright {
    font-size: 11px;
    width: 88%;
}

.banner {
    background: url(/images/diy-pool-fence-header.jpg) left top;
    width: 100%;
    margin-top: 27px;
    margin-bottom: 1%;
    height: auto !important;
    height: 80px;
    min-height: 80px !important;
}

    .banner .logo {
        margin: auto;
        display: block;
        padding-top: 1%;
    }

ul#homepage-nav {
    background: transparent url(../images/diy-pool-sub-navigation.jpg) no-repeat top left;
    list-style-type: none;
    float: left;
    width: 28.5%;
    /*height: 200px;*/
    padding: 5px 0 0 0;
    background-size: cover;
}

    ul#homepage-nav li {
        list-style-type: none;
        display: block;
        /*min-height: 25px;*/
        padding-left: 10%;
        white-space: nowrap;
    }

        ul#homepage-nav li a {
            font-size: 0.75em;
            color: white;
            text-decoration: none;
            font-weight: normal;
        }

            ul#homepage-nav li a:hover {
                color: #FFFF00;
            }

.banner-img {
    width: 42.2%;
}

.table-safety {
    padding-left: 10px;
    font-size: 14px;
}

.table-zipcode {
    padding-left: 30px;
    padding-bottom: 100px;
}

.only-pc-testimonials {
    padding: 20px 120px 40px 10px;
    font-size: 14px;
}

.tablet-index {
    background: url("/images/index01.png") no-repeat;
    width: 75%;
    height: 290px;
    background-size: cover;
}

    .tablet-index ul {
        padding: 0;
        list-style: none;
        margin-left: 2%;
        font-size: 28px;
    }

        .tablet-index ul li {
            line-height: 41px;
        }

            .tablet-index ul li a {
                color: #fff;
            }
/*---------------------------Base---------------------------*/
.clearfix-pro {
    overflow: auto;
    _height: 1%;
}

.clearfix_li {
    width: 100% !important;
    clear: both;
}

.FL {
    float: left;
}

.FR {
    float: right;
}

.hide {
    display: none;
}

.text-center {
    text-align: center;
}

.position-r {
    position: relative;
}

.rwd-detail {
    width: 100%;
    padding: 0 2%;
    box-sizing: border-box;
    -moz-box-sizing: border-box; /* Firefox */
    -webkit-box-sizing: border-box; /* Safari */
}

.fix-rwd-content {
    padding-left: 20px;
}

.fix-table-Accessories {
    padding-left: 2%;
    padding-top: 1%;
}

.table-Accessories {
    padding-top: 1.5%;
}

.fix-font-14 {
    font-size: 14px;
}

.fix-pr-2 {
    padding-right: 2%;
}

.col-percent-83 {
    width: 83%;
}

.col-percent-16 {
    width: 16%;
}

.p-t-30-b-50 {
    padding: 30px 0 50px;
}


.color-fff {
    color: #fff;
}

div.homepage-paragraph {
    font-family: Arial;
    float: left;
    font-size: 12px;
    color: Black;
    width: 33%;
    padding: 0 2% 0 2%;
    text-align: left;
    box-sizing: border-box;
    margin-top: 2%;
    margin-bottom: 2%;
}



    div.homepage-paragraph p {
        text-indent: 2em;
        margin: 0;
        padding: 0;
    }

.hometitle {
    height: 35px;
    background: url(/images/do-it-yourself.jpg) no-repeat left top;
    background-size: cover;
    color: #fff;
    font-size: 1em;
    font-weight: bold;
    font-family: Trebuchet MS;
    padding-left: 5%;
    box-sizing: border-box;
    line-height: 35px;
}


.test-img1 {
    width: 26.7%;
}

.test-img2 {
    margin-left: 20px;
    margin-right: 20px;
    width: 25.7%;
}

.test-img3 {
    margin-right: 20px;
    width: 22.7%;
}

.test-img4 {
    width: 14.7%;
}

.m-t-10 {
    margin-top: 10px;
}
/*/////product_detail/////*/

.product_top {
    width: 760px;
}

    .product_top .img1 {
        width: 100% !important;
        height: auto;
    }

    .product_top .img2 {
        /*width: 59% !important;*/
        margin-top: 8%;
    }


/*---------------------------PC---------------------------*/
.tablet, .mobile, .platform_hide, .only-tablet {
    display: none;
}

.only-pc, .only-pc-tablet {
    display: block;
}

.fix-only-pc {
}

.header_top {
    display: none;
    height: 27px;
    background: #20719d;
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
}

    .header_top .header_menu {
        padding: 0 10px;
        width: 18px;
        height: 17px;
        display: inline;
    }

    .header_top .cart {
        float: right;
        margin-right: 30px;
        min-width: 20px;
        padding-left: 27px;
        padding-right: 5px;
        height: 27px;
        color: #20719d;
        line-height: 27px;
        background: url("rwdImage/cart.png") no-repeat #fff;
    }

    .header_top .tele {
        float: right;
        margin-right: 30px;
        min-width: 20px;
        padding-left: 27px;
        padding-right: 5px;
        height: 27px;
        color: #20719d;
        line-height: 25px;
    }

    .header_top .search_mobile {
        float: right;
        margin-right: 24px;
        width: 48px;
        height: 25px;
        position: relative;
        cursor: pointer;
    }

        .header_top .search_mobile .search-box {
            border: 2px solid #ccc;
            border-radius: 20px;
            width: 300px;
            height: 22px;
            z-index: 1;
            background: #fff;
            position: absolute;
            top: 115%;
            right: 1%;
        }

    .header_top .search-box {
        border: 0;
        height: 26px;
        z-index: 1;
        background: #fff;
        width: 100%;
        clear: both;
        margin-top: 0;
    }

.search-box-wrap {
    border: 2px solid #ccc;
    border-radius: 20px;
    height: 21px;
    float: right;
    margin-top: 1px;
    background: #fff;
}



.more-1, .more-2, .more-3, .more-4, .more-5 {
    font-size: 16px;
    cursor: pointer;
    padding: 12px 0;
}

.table-sepec {
    list-style: none;
    clear: both;
    overflow: hidden;
    margin-bottom: 2%;
    padding: 0;
}

    .table-sepec a {
        color: #000;
        text-decoration: underline;
        font-size: 15px;
    }

    .table-sepec li {
        float: left;
        width: 33%;
        box-sizing: border-box;
        padding: 1%;
    }

        .table-sepec li:nth-child(3n)::after {
            display: table;
            content: "";
            height: 1px;
            overflow: hidden;
        }

#homepage-nav {
    height: 195px;
}

ul#homepage-nav li {
    height: 24.375px;
    line-height: 24.375px;
}

.pc-margin-10 {
    margin-right: 10%;
}
/*---------------------------Tablet---------------------------*/
@media all and (max-width: 1026px) {
    body {
        max-width: 1026px;
        width: 100%;
        font-size: 0.8em;
    }

    .mobile, .only-pc, .fix-only-pc {
        display: none;
    }

    .tablet, .only-pc-tablet, .only-tablet {
        display: block;
    }
       .index-buy{
        width:50%;box-sizing:border-box;
        float:left;text-align:center;margin-bottom:1%;
    }
       .index-buy img{
           width:50%;
       }
    a, a:hover {
        text-decoration: none;
    }

    /*Header-start*/
    .header_top {
        position: fixed;
        display: block;
    }

        .header_top .cart {
            display: block;
            font-size: 19px;
            text-align: center;
            line-height: 30px;
        }

    .header_menu_dropdown {
        position: absolute;
        z-index: 10;
        background: #993333;
        width: 120px;
        top: 16px;
        left: 0px;
        box-shadow: -2px 0px 16px #333;
        /*border-left: 1px solid #fff;
        border-right: 1px solid #fff;*/
    }

        .header_menu_dropdown ul {
            margin: 0px;
            padding: 0px;
        }

        .header_menu_dropdown li {
            line-height: 30px;
            list-style: none;
            border-bottom: 1px solid #88bacd;
            text-align: center;
            font-size: 1.2em;
        }

            .header_menu_dropdown li a {
                color: #fff;
            }
    /*Header-end*/
    /*footer-stat*/
    #footer_rwd {
        height: 239px;
        width: 100%;
        background: #20719d;
        text-align: center;
        color: #fff;
        padding: 6px 0;
        line-height: 20px;
        font-size: 1em;
    }

    .footer-rights {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }
    /*footer-end*/

    /*Search box-start*/
    #searchImg_mobile, #searchKey_mobile {
        line-height: 20px;
        background: #fff;
        color: #ccc;
        font-size: 16px;
          position:absolute;
        height: 20px;box-sizing:border-box;padding-left:4px;
    }

    #searchImg_mobile {
        width: 75px;
        padding: 0;
        line-height: 22px;
        font-weight: 700;
        border-top-left-radius:20px;
        border-bottom-left-radius:20px;
  height: 24px;
  top: -2px;
  left: -2px;
   border: 0;
  outline: 0;  background-color: transparent;
    }

    #searchKey_mobile {
        width: 225px;
        margin: 0;
      top:0;right:0;
          background-color:transparent;
        border-right:0;
        border-top:0;
        border-bottom:0;
        border-left:1px solid #ccc;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
        -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
        box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
        -webkit-transition: border linear .2s,box-shadow linear .2s;
        -moz-transition: border linear .2s,box-shadow linear .2s;
        -o-transition: border linear .2s,box-shadow linear .2s;
        transition: border linear .2s,box-shadow linear .2s;
    }
    /*Search box-end*/
    .fix-rwd-content {
        width: 100%;
        padding: 0 2%;
        box-sizing: border-box;
        -moz-box-sizing: border-box; /* Firefox */
        -webkit-box-sizing: border-box; /* Safari */
    }

        .fix-rwd-content .title {
            font-size: 24px;
            -webkit-margin-before: 0em;
            -webkit-margin-after: 0em;
        }

    .table-safety {
        padding-left: 0;
        font-size: 1.4em;
    }

    .table-zipcode {
        padding-left: 0;
        font-size: 1.4em;
        padding-bottom: 18%;
    }

    .table-zipcode-center {
        margin: 0 auto;
        text-align: center;
    }

    .fix-safety-ul {
        padding-left: 4%;
    }

    .col-percent-83 {
        width: 100%;
    }

    .p-t-30-b-50 {
        padding: 0 0 8%;
    }

    .tablet-banner {
        width: 19%;
        float: right;
        margin: -29% 2% 0;
        text-align: center;
    }

        .tablet-banner a img, .tablet-banner img {
            width: 100%;
        }

    .banner-img {
        width: 48.2%;
    }

    ul.tablet-text {
        clear: left;
        width: 76%;
        overflow: hidden;
        list-style-type: none;
        float: left;
        padding-left: 0px;
        font-size: 1em;
        line-height: 1.2em;
        margin-top: 1%;
    }

        ul.tablet-text li {
            display: block;
        }

    div.homepage-paragraph {
        width: 49%;
    }

        div.homepage-paragraph p {
            text-indent: 0;
            font-size: 1.4em;
            width: 100%;
        }

    .link-list-tablet {
        text-align: center !important;
    }

        .link-list-tablet a img {
            margin: 2% auto;
            width: 63%;
        }

    .tablet-clear-left {
        float: left;
        clear: left;
    }

    .only-pc-testimonials {
        padding: 0;
        font-size: 1.4em;
    }

    .test-img1 {
        margin-top: 2%;
        width: 47.7%;
    }

    .test-img2 {
        margin-left: 2%;
        margin-right: 2%;
        margin-top: 2%;
        width: 45.7%;
    }

    .test-img3 {
        margin-top: 2%;
        margin-right: 2%;
        width: 47.7%;
        float: left;
    }

    .test-img4 {
        margin-top: 2%;
        margin-right: 2%;
        width: 25.7%;
        float: left;
    }

    table.otheruses tr td.left-img {
        width: 20.8%;
    }

    .otheruses2, .otheruses4 {
        width: 100%;
        font-size: 16px;
        overflow: hidden;
        box-sizing: border-box;
    }

    .otheruses2 {
        padding-top: 8px;
    }

    .otheruses4 {
        padding-top:10px;
    }

    .otheruses5, .otheruses1, .otheruses3 {
        height: auto !important;
        width: 100%;
        font-size: 16px;
        overflow: hidden;
        box-sizing: border-box;
    }

    .more-block-1, .more-block-2, .more-block-3, .more-block-4, .more-block-5 {
        display: none;
    }

    .table-sepec li {
        width: 50%;
    }

        .table-sepec li a img {
            width: 100%;
        }

    .catename a, .catename a:hover {
        padding-left: 3%;
        font-size: 16px;
        display: inline-block;
    }


    .table-Accessories {
        padding-top: 8%;
        padding-left: 3%;
    }

    .fix-font-14 {
        font-size: 20px;
    }

    .hometitle {
        text-align: center;
        padding-left: 0;
        font-size: 20px;
    }

    .product_top {
        width: 100%;
    }

    .tablet-index ul {
        width: 53.5%;
    }

        .tablet-index ul li {
            margin-top: 1px;
        }
    /*.tablet-index ul li{
   border-bottom:1px solid #fff;
    }
     .tablet-index ul li:last-child{
         border-bottom:none !important;
     }*/
    .tablet-mobile-W-100 {
        width: 100%;
    }
}


/*---------------------------Mobile---------------------------*/
@media all and (max-width: 480px) {
    .tablet-mobile-W-100 {
        width: 100%;
    }

    body {
        max-width: 480px;
    }

    .mobile {
        display: block;
    }

    .only-pc, .fix-only-pc, .only-pc-tablet, .only-tablet {
        display: none;
    }

    .header_top .search_mobile .search-box {
        width: 259px;
    }

    div.homepage-paragraph {
        width: 100%;
        clear: both;
    }
    .index-buy img{
           width:90%;
       }
    ul#homepage-nav {
        width: 37.1%;
    }

    .banner-img {
        width: 62.9%;
    }

    ul.tablet-text {
        width: 100%;
    }

    .tablet-banner {
        float: none;
        margin: 3% auto 0;
        width: 100%;
        overflow: hidden;
    }

        .tablet-banner a img, .tablet-banner img {
            float: left;
            width: 40%;
            margin: 0 3% 4%;
        }

    .mobile-ml-26 {
        margin-left: 26% !important;
    }

    .test-img1, .test-img3 {
        width: 99.7%;
    }

    .test-img2 {
        width: 97.7%;
    }

    .test-img4 {
        width: 50.7%;
    }

    table.otheruses tr td.left-img {
        width: 100%;
        margin-bottom: 4%;
    }

    .table-sepec li {
        clear: both;
        width: 100%;
    }

    .tablet-index {
        width: 100%;
    }

    .mobile_width_100 {
        width: 100%;
    }

    .fix-img1 {
        margin: auto;
        display: block;
    }

    .otheruses1, .otheruses2, .otheruses3, .otheruses4, .otheruses5 {
        padding-top: 7px;
    }

 
}
/*---------------------------Added by Marko---------------------------*/
@media(max-width:1024px) {
    .hide_1 {
        display: none !important;
    }

    .show_1 {
        display: block !important;
    }
}
