/*
Copyright (C) Xantec Solutions <hello@xantec.com.my>
This file is part of BRISKASIA, cannot be copied and/or 
distributed without the express permisson of Xantec Solutions
*/
/* 
    Created on : Sep 21, 2016, 2:29:23 PM
    Author     : Xantec
*/

@media (max-width: 1340px) {
    .productbrand {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        background: #000;
        background: rgba(0,0,0,.8);
        margin-left: 0;
        height: 123px;
    }

    .productbrand img {
        left: auto;
        right: 30px;
    }
}

@media (max-width: 1250px) {
    .header .leftblock { display: none; }

    .header .sociallink { padding: 10px 5px 0; }

    .toplink { right: 60px; }
    .productnav { right: 60px; }

    .productdesc > .wrap { background-position: 110% bottom; }
    .enquiryform:before { right: 19px; }
    .searchform { right: 60px; }
}

@media (max-width: 1220px) {
    .header .rightblock { display: none; }
    .toplink ul, .productnav ul { margin-right: 9px; }
    .toplink ul li a, .productnav ul li a { padding: 0 19px; }
}

@media (min-height: 800px) and (max-width:800px) {
    .background { bottom: 264px; }
}

@media (max-width:1023px) {
    .gridL0 { width: 0%; }
    .gridL1 { width: 8.333333%; }
    .gridL2 { width: 16.666666%; }
    .gridL3 { width: 25%; }
    .gridL4 { width: 33.333333%; }
    .gridL5 { width: 41.666666%; }
    .gridL6 { width: 50%; }
    .gridL7 { width: 58.333333%; }
    .gridL8 { width: 66.666666%; }
    .gridL9 { width: 75%; }
    .gridL10 { width: 83.333333%; }
    .gridL11 { width: 91.666666%; }
    .gridL12 { width: 100%; }

    .header {
        top: 0;
        background: #fff;
        box-shadow: 0 3px 5px rgba(0,0,0,.1);
        -webkit-box-shadow: 0 3px 5px rgba(0,0,0,.1);
    }

    .logo a { padding: 10px 0; }
    .logo a img { height: 50px; }

    .header .sociallink { position: absolute; right: 70px; padding: 10px; background: transparent; }
    .header .sociallink a { float: left; }
	.header .sociallink .shopping { display: block; }
    .header .sociallink a span { border: 1px #fff solid; background: #bc2021; color: #fff; }
    .header .sociallink a.callenquiry:before, .header .sociallink a.callenquiry:after, .header .sociallink a.callsearch:before, .header .sociallink a.callsearch:after { border: 1px solid #bc2021; }
    
    .searchform { right: 0; bottom: -50px; }
    .showsearch .searchform { left: 0; }
    .searchform button { right: 15px; }
    .enquiryform { top: 100%; }
    .enquiryform:before { right: 143px; }

    .mobilenav { display: block; }

    .toplink {
        position: fixed;
        top: 70px;
        bottom: 0;
        right: -240px;
        width: 240px;
        background: #fff;
        z-index: 1;
        opacity: 0;
        visibility: hidden;
        box-shadow: -3px 3px 3px rgba(0,0,0,.1);
        -webkit-box-shadow: -3px 3px 3px rgba(0,0,0,.1);
    }

    .header.level1 .toplink { right: 0; opacity: 1; visibility: visible; }
    .header.level2 .toplink { right: 240px; }
    .header.level3 .toplink { right: 480px; }

    .toplink ul {
        padding: 15px 0;
        overflow: visible;
        z-index: 1;
    }
    .toplink ul li { float: none; }
    .toplink ul li.hidefortablet { display: block; }

    .toplink ul li a {
        line-height: 1.14;
        padding: 15px 20px;
    }

    .toplink ul li+li a:before {
        content: "";
        position: absolute;
        top: 0;
        left: 30px;
        right: 30px;
        height: 1px;
        background: #eee;
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
    }

    .toplink ul li.hidefortablet a:after {
        content: "";
        position: absolute;
        top: 50%;
        right: 15px;
        width: 6px;
        height: 6px;
        margin-top: -3px;
        background: #fff;
        transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        border-top: 1px #000 solid;
        border-right: 1px #000 solid;
    }

    .header.level2 .toplink ul li.hidefortablet a:after {
        right: -17px;
        width: 12px;
        height: 12px;
        margin-top: -6px;
        border-top: 1px #bc2021 solid;
        border-right: 1px #bc2021 solid;
    }

    .productnav {
        position: fixed;
        top: 70px;
        bottom: 0;
        right: -240px;
        width: 240px;
        background: #fff;
    }

    .header.level2 .productnav { right: 0; }
    .header.level3 .productnav { right: 33.333333%; }

    .productnav ul {
        padding: 15px 0;
        overflow: visible;
    }

    .productnav ul:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 1px;
        background: #bc2021;
        border-radius: 0 0 50% 50%;
        -moz-border-radius: 0 0 50% 50%;
        -webkit-border-radius: 0 0 50% 50%;
    }

    .productnav ul li { float: none; }

    .productnav ul li > a {
        line-height: 1.14;
        padding: 15px 20px;
        font-weight: normal;
        z-index: 2;
    }

    .productnav ul li+li > a:before {
        content: "";
        position: absolute;
        top: 0;
        left: 30px;
        right: 30px;
        height: 1px;
        background: #eee;
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
    }

    .productnav ul li > a:after {
        content: "";
        position: absolute;
        top: 50%;
        right: 15px;
        width: 6px;
        height: 6px;
        margin-top: -3px;
        background: #fff;
        transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        border-top: 1px #000 solid;
        border-right: 1px #000 solid;
    }

    .productnav ul li.hover > a:after {
        content: "";
        right: -7px;
        width: 12px;
        height: 12px;
        margin-top: -6px;
        border-top: 1px #bc2021 solid;
        border-right: 1px #bc2021 solid;
    }

    .megamenu {
        top: 70px;
        bottom: 0;
        left: auto;
        right: -33.333333%;
        width: 33.333333%;
        overflow-y: auto;
        background: #fff;
        display: block;
    }

    .header.pinned .megamenu { top: 70px; }

    .header.level3 .megamenu { right: 0; }

    .megamenu .wrap {
        background: none;
        padding: 15px 0;
    }

    .megamenu .wrap:before {
        content: "";
        position: absolute;
        min-height: 294px;
        top: 0;
        left: 0;
        bottom: 0;
        width: 1px;
        background: #bc2021;
        border-radius: 0 0 50% 50%;
        -moz-border-radius: 0 0 50% 50%;
        -webkit-border-radius: 0 0 50% 50%;
    }

    .megamenu .space { display: none; }

    .megamenu .row > div.grid5 { display: none; }

    .megamenu a {
        line-height: 1.14;
        padding: 15px 20px;
        text-align: center;
    }

    .megamenu a:after { display: none; }

    .megamenu .row .row > div+div a:before {
        content: "";
        position: absolute;
        top: 0;
        left: 30px;
        right: 30px;
        height: 1px;
        background: #eee;
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
    }

    .homegrid > span {
        width: 50%;
        height: 50%;
    }

    .emaillist { padding-top: 0; }
    .emaillist .wrap { flex-wrap: wrap; }
    .emaillist .wrap div { min-width: 50%; max-width: 50%; padding-top: 20px; }
    .emaillist .wrap div+div { margin-left: 0; }

    .productlist .wrap > ul > li { width: 33.333333%; }

    .productdesc > .wrap { background: none; }

    .productdesc .wrap > ul > li { width: 100%; }

    .productlist2 > .wrap > ul > li { width: 25%; }
    .productlist2 > .wrap > ul > li.brand > a { padding: 0; }

    .banner .content { top: 70px; }

    .bannergap .block h2 {
        padding: 15px 0;
        text-align: center !important;
    }

    .productdesc .wrap > ul > li { min-height: 0; }
}

@media (max-width:767px) {
    .gridM0 { width: 0%; }
    .gridM1 { width: 8.333333%; }
    .gridM2 { width: 16.666666%; }
    .gridM3 { width: 25%; }
    .gridM4 { width: 33.333333%; }
    .gridM5 { width: 41.666666%; }
    .gridM6 { width: 50%; }
    .gridM7 { width: 58.333333%; }
    .gridM8 { width: 66.666666%; }
    .gridM9 { width: 75%; }
    .gridM10 { width: 83.333333%; }
    .gridM11 { width: 91.666666%; }
    .gridM12 { width: 100%; }
    
    .nosearchresults { text-align: center; }

    .copyright a { display: inline-block; }

    .background { bottom: -150px; }

    .background > div .content h1 { font-size: 24px; }
    .background > div .content h2 { font-size: 18px; }
    .background > div .content p { font-size: 12px; }

    .background > div .content h1 { padding-top: 85px !important; }

    .banner .content h1,
    .banner .content h2,
    .background > div .content h1,
    .background > div .content h2,
    .background > div .content p {
        max-width: none;
        min-width: 0;
        width: 100%;
        position: static;
    }
    .background > div.present .left h1,
    .background > div.present .left h2,
    .background > div.present .left p { left: 0; }

    .background > div.present .right h1,
    .background > div.present .right h2,
    .background > div.present .right p { right: 0; }

    .background > div .content.slide3 h1 { width: 100%; }
    .background > div .content.slide4 h2 {
        left: auto;
        right: 0;
        top: 70px;
        width: 100%;
        max-width: 325px;
        position: absolute;
    }

    .banner .content h4 { font-size: 18px; }
    .banner .content h5, .banner .content h6 {
        font-size: 12px;
        max-width: none;
        right: 15px;
        top: 60px;
    }

    .bannergap .block {
        height: 320px;
        float: none;
        width: 100%;
        display: block;
    }

    .clickablebanner { margin-top: 70px; }

    .generalproductimage { max-width: 100%; }
    .limitwidth { max-width: 100%; }

    .message p { font-size: 12px; }

    .contactinfo img { display: none; }

    .emaillist .wrap div { min-width: 100%; max-width: 100%; }

    .green .productgroup { background: #00b3aa; }

    .productgroup .dropdown { display: block; }

    .productgroup ul {
        padding-top: 45px;
        height: 45px;
        margin: 0 -15px;
    }

    .productgroup.active ul { height: auto; }

    .productgroup ul li {
        width: 100%;
        float: none;
        color: #fff;
    }

    .productgroup ul li.active {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        border-bottom: 1px #fff solid;
    }

    .productgroup ul li a { padding-left: 15px; }

    .productlist {
        padding: 0;
        z-index: 1;
        /*background: #f1f1f1;*/
    }

    .fulllist { display: block; }
    .productlist.active .fulllist i { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }

    /*.productlist .wrap { padding: 0; }*/

    .productlist .wrap > ul {
        position: relative;
        height: 45px;
        padding-top: 45px;
    }

    .productlist.active .wrap > ul { height: auto; }

    .productlist .wrap > ul > li { width: 100%; }

    .productlist .wrap > ul > li.active {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        border-bottom: 1px #e4e4e4 solid;
    }

    .productlist .wrap > ul > li a {
        padding: 15px;
        padding-right: 30px;
        line-height: 15px;
    }

    .productlist > .wrap > ul > li:hover a, .productlist > .wrap > ul > li.active a { color: #000 !important; }

    .productlist .wrap > ul > li a:before,
    .productlist .wrap > ul > li a:after { display: none; }

    .productlist > .wrap > ul > li:first-child > a {
        padding: 15px;
        padding-right: 30px;
        line-height: 15px;
        margin: 0;
        border: none !important;
        text-align: left;
        background: transparent !important;
    }

    .productdesc img { margin-bottom: 15px; }

    .productdesc .wrap > ul > li { width: 100%; }

    .accordion .grid6+.grid6 { border-left: none; }

    .accordion-body { height: 0; }
    .accordion .active .accordion-body { height: auto; }

    .accordion a {
        padding: 0 15px;
        text-align: left;
        position: relative;
    }

    .accordion a:after {
        content: "\f107";
        font-family: FontAwesome;
        position: absolute;
        width: 42px;
        line-height: 42px;
        font-size: 21px;
        text-align: center;
        top: 0;
        right: 0;
    }

    .accordion .active a:after { content: "\f106"; }

    .productlist2 .fulllist {
        background: #333;
        color: #fff;
    }

    .productlist.active .wrap > ul { padding-top: 60px; padding-bottom: 15px; }    
    .productlist2 > .wrap > ul > li.brand { width: 100%; }
    .productlist2 > .wrap > ul > li.brand > a { margin: 0; }
    .productlist2 > .wrap > ul > li > a {
        text-align: center;
        border-bottom: 1px #eee solid;
    }
    .productlist2 > .wrap > ul > li.brand > a img { height: 45px; }
    .fulllist span {
        float: left;
        margin-left: 15px;
    }
    .productlist2 .wrap > ul > li.active {
        position: static;
        border: none;
    }

    .industrieslist .item { height: auto !important; }

    .brandname { text-align: center; }

    .brandlogo { margin: 0 auto; }

    .allproduct {
        width: 100%;
        margin-bottom: 15px;
    }

    .productdesc table td:first-child { width: auto !important; }
    .productdesc table td {
        padding: 8px 15px;
        height: auto;
    }
}

@media (max-width:479px) {
    .gridS0 { width: 0%; }
    .gridS1 { width: 8.333333%; }
    .gridS2 { width: 16.666666%; }
    .gridS3 { width: 25%; }
    .gridS4 { width: 33.333333%; }
    .gridS5 { width: 41.666666%; }
    .gridS6 { width: 50%; }
    .gridS7 { width: 58.333333%; }
    .gridS8 { width: 66.666666%; }
    .gridS9 { width: 75%; }
    .gridS10 { width: 83.333333%; }
    .gridS11 { width: 91.666666%; }
    .gridS12 { width: 100%; }

    .logo a img { height: 30px; }
    .mobilenav { height: 50px; width: 50px; }
    .header .sociallink { padding: 0; right: 50px; }
	.header .sociallink a { width: 40px; }
    .searchform button { right: 5px; }
    .enquiryform:before { right: 123px; }
    
    .header.level1 .logo, .header.level1 .sociallink {
        visibility: hidden;
        opacity: 0;
        filter: Alpha(Opacity=0);
    }
    .header.level2 .backnav { width: 50px; }

    .toplink {
        top: 50px;
        right: -100%;
        width: 100%;
    }

    .header.level2 .toplink { right: 100%; }
    .header.level3 .toplink { right: 200%; }
    .header.level2 .toplink ul li.hidefortablet a:after { display: none; }

    .productnav {
        top: 50px;
        right: -100%;
        width: 100%;
    }

    .header.level3 .productnav { right: 100%; }

    .productnav ul:before {  display: none; }
    .productnav ul li.hover > a:after { display: none; }

    .megamenu {
        right: -100%;
        width: 100%;
    }

    .megamenu .wrap:before { display: none; }

    .keepintouch .row > div > span { display: none; }
    .keepintouch .row > div > i {
        display: inline-block;
        width: 15px;
        text-align: center;
        margin-right: 9px;
        color: #bc2021;
    }

    .background { bottom: 0; }

    .message img {
        float: none;
        height: 56px;
        margin: 0 auto;
    }

    .message p {
        padding-top: 10px;
        height: 30px;
        text-align: center;
    }

    .message .bar { display: none; }

    .message h1 { padding-top: 9px; }

    .homegrid > span {
        width: 100%;
        height: 25%;
    }

    .contactinfo a {
        display: block;
        width: 150px;
        margin: 0 auto;
        text-align: left;
    }

    .contactinfo a+a {
        margin: 0 auto;
        padding-top: 0;
    }

    .contactinfo a i {
        width: 20px;
        text-align: center;
    }

    .emaillist .wrap div+div { padding-top: 15px; }

    .emaillist .wrap div b {
        width: 100%;
        text-align: center;
        float: none;
    }

    .emaillist .wrap div a {
        text-align: left;
        width: 200px;
        margin: 0 auto;
    }
}