/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/
@media only screen and (max-width: 479px) {
    [class="wrap"] {width: 95%;}

    .col {margin: 10px 0;}
    .one_half, .one_halfbig, .one_halfsmall {width: 97%}       
    .one_third {width: 93%;}
    .one_fourth {width: 93%;}
    .one_fifth {width: 99%;}
    .one_sixth {width: 99%;}
    .one_seventh {width: 99%;}
    .texth1 { height: auto; }
    .texth2 { height: auto; }
    .texth3 { height: auto; }
    .texth4 { height: auto; }
       
    #topmenu {margin-top: 6px;}
       
    #top-container {height: 68px;}
    .topcontent-image{height:250px;}
    .topcontent-image h1 {
        font-size: 20px;
        margin: 5px 0 5px;
    }
    .topcontent-image h4 {font-size: 13px; font-weight: 500;}   
    .topcontent-overlaytext {width: 100%;}   

    .searchBlock {margin-left: 5px; width:71vw;}
    .divsearchtext {
        width:80%;       
    }
    .searchtext {        
        width: 95%;
        padding: 10.5px 3px;
        font-size: 11pt;
    }   

    .cat-content2 {
        width: 91vw !important;
    }
    .ListImageBlock img {
        width: 170px;
        height: 170px;       
    }
    .menubtn img {
        width: 50px;
        margin-right: 5px;
        margin-top: 5px;
    }
    .mobile-loginBlock img {
        width: 50px;
        margin-right: 5px;
        margin-top: 5px;
    }
    .mobile-cartBlock img {
        width: 50px;
        margin-top: 5px;
    }
    .catbtn img {width: 55px;}
    .catbtn2 img {width: 55px;}

    .menu-content {
        position: absolute;
        right: -105px;
        width: 91vw;
    }

    .txtMessage {
        Height: 150px;
        Width: 180px;
    }   

    .filter-content {
        position: absolute;
        right: -1px;
        width: 95vw;
    }      

    .cartRow {
        font-size: 12px;
    }
    .cartRow a, .cartRow a:link, .cartRow a:visited {
        color: #1C2997;
        font-size: 12px;
        font-weight: 700;
    }
    .cartColImage {       
        width: 20%;
    }
    .cartColDescription {       
        width: 80%;            
    }
    .cartAssociatedItem > table {
        border: 1px solid #a7a7a7;
        background-color: #d6d6df;
        color: #505050;
        font-size: 7pt;
        font-weight: normal;
    }
   
    .Linkbutton input, .Linkbutton > a, .Linkbutton > a:link, .Linkbutton > a:visited {
        width: 95%;
        height: auto;
        display: inline-block;
        font-size: 14px !important;
        padding: 5px 5px;
        -webkit-appearance: button !important;
        -moz-appearance: button !important;
        appearance: button !important;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        border: 2px solid #1C2997;
        margin: 10px 5px 5px 0;
        border-radius: 16px;
    }
    
}
/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
    [class="wrap"] {width: 90%;}

    .col {margin: 10px 0;}
    .one_half, .one_halfbig, .one_halfsmall {width: 97%}        
    .one_third {width: 97%;}
    .one_fourth {width: 45%; margin-right:10px;}
    .one_fifth {width: 97%;}
    .one_sixth {width: 97%;}
    .one_seventh {width: 97%;}
    .texth1 { height: auto; }
    .texth2 { height: auto; }
    .texth3 { height: auto; }
    .texth4 { height: auto; }
       
    #topmenu { margin-top: 2px;}
      
    #top-container {height: 73px;}
    .topcontent-image{height:300px;}
    .topcontent-image h1 {
        font-size: 22px;
        margin: 5px 0 5px;
    }
    .topcontent-image h4 {font-size: 13px; font-weight: 600;}   
    .topcontent-overlaytext {width: 80%;}
    
    .searchBlock {margin-left: 5px; }   
    .searchtext {
        width: 220px;
        padding: 10.5px 5px;
        font-size: 11pt;
    }   

    .ListImageBlock img {
        width: 170px;
        height: 170px;
    }

    .menubtn img {
        width: 50px;
        margin-right: 5px;
        margin-top: 5px;
    }
    .mobile-loginBlock img {
        width: 50px;
        margin-right: 5px;
        margin-top: 5px;
    }
    .mobile-cartBlock img {
        width: 50px;
        margin-right: 5px;
        margin-top: 5px;
    }
    .catbtn img {width: 60px;}
    .catbtn2 img {width: 60px;}

    .menu-content {
        position: absolute;
        right: -125px;
        width: 50vw;
    }    
       
    .filter-content {
        position: absolute;
        right: -1px;
        width: 88vw;
    }

    .Linkbutton input, .Linkbutton > a, .Linkbutton > a:link, .Linkbutton > a:visited {
        width: 27%;
        height: auto;
        display: inline-block;
        font-size: 14px !important;
        padding: 5px 5px;
        -webkit-appearance: button !important;
        -moz-appearance: button !important;
        appearance: button !important;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        border: 2px solid #1C2997;
        margin: 10px 10px 10px 0;
        border-radius: 16px;
    }
   
}

@media (max-width: 767px) {

    .div_title {
        display: inline-block;
        width: 215px;
        height: 64px;
        margin-top: 3px;
    }
        .div_title img {
            display: inline-block;
            width: auto;
            height: 100%;
        }
   /* #site_title {
        background: url(/images/styleImages/kanes_logo2-mobileFull.png) center center no-repeat;
        image-rendering: pixelated;
        -ms-interpolation-mode: nearest-neighbor;        
        background-size: cover;
        width: 100%;
        height: 64px;        
        margin-top: 12px;
    }*/

    #topmenu {width: auto;     }
        #topmenu a {
            border: 0;
            background: none;
            -webkit-appearance: none;
        }   

    .searchRow {
        height: auto; /*180px;*/
        display: inline-block !important;
    }
    .search-ImageBlock {
        width: 50%;
        float: left;
    }
    .search-ImageBlock img{ height:150px;}
    .search-TitleBlock {
        width: 50%;
        float: right;
    }
    .search-PriceBlock {
        width: 50%;
        float: left;
    }
    .search-ButtonBlock {
        width: 50%;
        float: right;
    }

    .linkPath a, .linkPath a:link {
        width: 100%;
        font-size: 9pt;
    }
    .detail-linkPath a, .detail-linkPath a:link {
        width: 100%;
        font-size: 8pt;
    }
    .detail-imageArea {width: 100%;}
    .detail-DescArea {width: 100%;}
    .detail-HireArea {width: 100%;}
    .detail-buttonArea {width: 100%; }
    .detail-AssoItemsArea {width: 100%;}
    .detail-AssoItemsArea table, a,a:link{width: 100%;}
    .modal-content {width: 95%;}

    .cartColLast {width: 100%;  }
    .cartQty {margin-left: 10px;}
    .cartRemove { margin-right: 10px;}
    
    .default-topcontent{display:none;}
    .default-bottomcontent{display:none;}
    .default2-topcontent{
        display:block;
        font-size:12pt;
        font-weight:600;
    }
        .default2-topcontent a:link, .default2-topcontent a:visited{           
            font-size: 12pt;
            font-weight: 600;
            text-decoration:underline;
        }
    .default2-bottomcontent{display:block;}
        .default2-bottomcontent > a > img {
            width: 100%;
        }
    .default2-img {
        position: relative;
        float: left;
        width: 30%;        
        margin-right: 5px;
        margin-bottom: 5px;
    }
        .default2-img img {
            width: 100%; 
            height:auto;
        }
    .imgcontainer {
        position: relative;
        width: 100%;
        max-width: 300px;
    }
    .overlay {
        position: absolute;
        bottom: 0;       
        background: rgba(0, 0, 0, 0.7); /* Black see-through */
        color: #f1f1f1;
        width: 100%;
        transition: .5s ease;
        opacity: 5;
        color: white;
        font-size: 14px;
        padding-top: 10px;
        padding-bottom: 10px;
        text-align: center;
    }
        
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    [class="wrap"] {width: 90%;}

    .col {margin: 10px 0;}
    .one_half, .one_halfbig, .one_halfsmall {width: 97%}
    .one_third {width: 45%; margin-right: 10px;}
    .one_fourth {width: 45%; margin-right: 10px;}
    .one_fifth {width: 45%}
    .one_sixth {width: 45%}
    .one_seventh {width: 45%}

    .texth1 {height: auto;}
    .texth2 {height: auto;}
    .texth3 {height: auto;}
    .texth4 {height: auto;}

    .topcontent-image {height: 350px;}
        .topcontent-image h1 {
            font-size: 24px;
            margin: 10px 0 10px;
        }
        .topcontent-image h4 {
            font-size: 14px;
            font-weight: 600;
        }
    .topcontent-overlaytext {width: 70%;}

    #topmenu {
        width: 205px;
        margin-top: 2px;
    }
        #topmenu a {
            border: 0;
            background: none;
            -webkit-appearance: none;
        }

    #top-container {height: 73px;}

    .menubtn img {
        width: 50px;
        margin-right: 5px;
        margin-top: 5px;
    }

    .mobile-loginBlock img {
        width: 50px;
        margin-right: 5px;
        margin-top: 5px;
    }
    .mobile-cartBlock img {
        width: 50px;
        margin-right: 5px;
        margin-top: 5px;
    }

    .catbtn img {width: 60px;}
    .catbtn2 img {width: 60px;}   

    .menu-content {
        position: absolute;
        right: -126px;
        width: 40vw;
    }

    .searchtext {
        font-size: 11pt;
        padding: 10.5px;
    }
}

    /* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) /*and (orientation: landscape)*/ {
    /* CSS */
    .searchRow {height: 130px;}
    .search-ImageBlock {
        width: 30%;
        float: left;
    }
        .search-ImageBlock img {height: 100px;}
    .search-TitleBlock {
        width: 30%;
        float: left;
    }
    .search-PriceBlock {
        width: 25%;
        float: left;
    }
    .search-ButtonBlock {
        width: 10%;
        float: right;
    }

    .filter-content {
        position: absolute;
        right: -1px;
        width: 55vw;
    }

    .Linkbutton input, .Linkbutton > a, .Linkbutton > a:link, .Linkbutton > a:visited {
        width: 27%;
        height: auto;
        display: inline-block;
        font-size: 14px !important;
        padding: 5px 5px;
        -webkit-appearance: button !important;
        -moz-appearance: button !important;
        appearance: button !important;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        border: 2px solid #1C2997;
        margin: 10px 10px 10px 0;
        border-radius: 16px;
    }
   
}

@media only screen and (max-width: 1024px) {
    /* For mobile phones: */

    [class*="desktop-"] {display: none;}
    [class*="mobile-"] {display: block;}

    body {
        font-size: 11pt;
        font-weight: normal;
        line-height: 1.3em;
    }

    .middlecontent {margin-left: 0;}

    .mobile-menuBlock {
        display: block;
        float: left;
    }

    .menu-dropdown {
        position: relative;
        display: inline-block;
    }
    .menu-content {
        background-color: #f1f1f1;
        border-bottom: 5px solid #1C2997;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 93;
        text-align: left;
        font-size: 12pt;
    }
        .menu-content a {
            float: left;
            width: 80%;
            height: 25px;
            color: #1C2997;
            font-weight: 500;
            padding: 10px 16px;
            text-decoration: none;
            display: block;
        }

    .listmenu {
        display: inline-flex;
        /*align-items: center;*/
        width: 100%;
        border-bottom: 1px solid #B5B9DB;
    }
        .listmenu:after {
            content: "\27A4";
            color: #1C2997;
            margin-top: 10px;
        }

    .mobile-loginBlock {
        display: block;
        float: left;
        position: relative;
    }
    .mobile-cartBlock {
        display: block;
        float: left;
        position: relative;
    }
    .mobile-catBlock {
        float: left;
    }

    #bottom {text-align: center;}
    #footer {font-size: 10pt; height: 35px;}

    .logo {width: 100%;}
        .logo img {width: 150px;}

    .topcontent-image {background-size: contain;}

    .cat-dropdown {
        position: relative;
        display: inline-block;
    }
    .catbtn img {
        margin-top: 5px;
        border-bottom: 4px solid black;
        border-top: 2px solid grey;
        border-left: 2px solid grey;
        border-right: 2px solid grey;
    }
    .cat-content {
        position: absolute;
        width: 85vw;
        background-color: #f1f1f1;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 92;
        text-align: left;
        border-bottom: 5px solid #1C2997;
    }
    .catbtn2 img {
        margin-top: 5px;
        border-bottom: 4px solid black;
        border-top: 2px solid grey;
        border-left: 2px solid grey;
        border-right: 2px solid grey;
    }
    .cat-content2 {
        position: absolute;
        width: 85vw;
        background-color: #f1f1f1;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 92;
        text-align: left;
        border-bottom: 5px solid #1C2997;
    }

    #Equipmentlist-content {width: 100%;}
    .ListEquipment .column { width: 50%;}

    details {
        width: 100%;
        border-bottom: 1px solid #B5B9DB;
    }

    summary {
        cursor: pointer;
        width: 90%;
        list-style: none;
    }

    details summary::-webkit-details-marker {display: none;}
    summary::marker {display: none;}
    .catmarker {
        float: right;
        font-size: 15pt;
        font-weight: 600;
        margin-right: -7%;
        margin-top: 20px;
    }
        .catmarker:after {
            background: url(/images/styleImages/arrow-down.png);
            background-size: cover;
            float: left;
            height: 15px;
            width: 15px;
            content: " ";
        }

    details[open] .catmarker:after {
        background: url(/images/styleImages/arrow-up.png);
        background-size: cover;
    }    

    .mobile-clickmore {
        font-size: 12pt;
        font-weight: 700;
        color: #1C2997;
    }
    .mobile-topcontent img {
        width: 100%;
    }
    .mobile-bottomcontent img {
        width: 100%;
    }
    .mobile-filterBlock {
        display: block;
        float: right;
        width:35%;
        height:20px;
    }

    .ClearAllfilter {
        float: left;
        color: #1C2997;
        text-decoration: underline;
        margin-right: 20px;
    }

    .filter-dropdown {
        position: relative;
        display: inline-block;
    }
   /* .filterbtn{float:right;}*/
    .filter-content {
        background-color: #f1f1f1;
        border-bottom: 5px solid #1C2997;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 93;
        text-align: left;
        font-size: 12pt;
        /*margin-right:-50px;*/
    }

    .listfilter {
        display: inline-flex;
        width: 100%;
        border-bottom: 1px solid #B5B9DB;
    }
        .listfilter a::before {
            background: url(/images/styleImages/mobile-checkBoxUnSelected30.png);
            background-size: cover;
            float: left;
            height: 20px;
            width: 20px;
            content: " ";
        }
        .listfilter a.filterselected::before {
            background: url(/images/styleImages/mobile-checkBoxSelected30.png);
            background-size: cover;
            float: left;
            height: 20px;
            width: 20px;
            content: " ";
        }

    .filter-content a {
        float: left;
        width: 80%;
        height: 25px;
        color: #1C2997;
        font-weight: 500;
        padding: 10px 16px;
        text-decoration: none;
        display: block;
    }

    li.listHire {
        display: inline-grid;
        width: 24%;
        height: 270px;
    }
    li.listSales {
        display: inline-grid;
        width: 24%;
        height: 130px;
    }
    .default-catmarker {
        float: left;
        margin-right: 14px;
        color: #1C2997;
        font-size: 8pt;
        /*font-weight: 100;*/
    }

    /*subcatbtn = summary tag*/
    .subcatbtn {
        width: 85%;
        height: 45px;
        text-transform: uppercase;
        text-decoration: none;
        color: #303030; /*#1C2997*/
        font-size: 14px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        padding-left: 20px;
    }
    /*subcat-content = P tag*/
    .subcat-content a {
        display: block;
        color: #1C2997;
        font-size: 12px;
        font-weight: 500;
        margin-left: 40px;
        text-transform: uppercase;
    }

    a.buttonNonSelect, input.buttonNonSelect {
        background-color: white;
        color: #1C2997 !important;
    }
    a.buttonSelect, input.buttonSelect {
        background-color: #1C2997;
        color: white !important;
    }
        input.buttonNonSelect:active, input.buttonNonSelect::selection, input.buttonSelect:active {
            text-decoration: none;
        }
}