/*
Copyright (C) Xantec Solutions <hello@xantec.com.my>
This file is part of BIGBROTHER, cannot be copied and/or 
distributed without the express permisson of Xantec Solutions
*/
/* 
    Created on : Jan 22, 2016, 2:01:26 PM
    Author     : Ping
*/

@media (max-width:1279px) {
    .container { padding: 0 15px; }
    .gst-benefit p { min-height: 135px; }
    
    .contact-info { padding: 60px 15px; }
    .contact-form { padding: 60px 15px; }
}

@media (max-width:1023px) {
    .gridL0 { display: none; }
    .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%; }

    .slide-left .header { left: -270px; }
    .slide-left .page { left: -270px; }

    .logo { float: none; }

    .bars { display: block; }

    .underline { display: none; }

    .nav {
        position: fixed;
        top: 0;
        bottom: 0;
        right: -270px;
        width: 270px;
        overflow-y: scroll;
        margin-right: 0;
        background: #333;
    }

    .slide-left .nav { right: 0; }

    .nav li {
        float: none;
        border-left: 5px #333 solid;
    }

    .nav li+li:after { display: none; }

    .nav a {
        text-align: left;
        font-weight: 400;
        color: #fff;
        line-height: 51px;
    }

    .nav li.hover { border-left: 5px #fff solid; }
    .nav li.active { border-left: 5px #56d8d1 solid; }

    .nav li.hover a { color: #fff; }
    .nav li.active a { color: #56d8d1; }

    .nav li div {
        position: static;
        display: none;
        padding: 0 0 15px;
    }

    .nav li.hover div { display: block; }

    .nav li div a {
        padding: 0 30px;
        line-height: 30px;
    }

    .nav li div a:before {
        content: '\f105';
        font-family: FontAwesome;
        margin-right: 15px;
    }

    .what-we-do .page-title {
        width: 66.666666%;
        top: 12.5%;
    }

    .gst-benefit p { min-height: auto; }

    .benefits-list .image { width: 45%; }

    .benefits-list .imageleft .paragraph {
        padding: 0 15px 0 45px;
        margin-left: 45%;
    }
    .benefits-list .imageright .paragraph {    
        padding: 0 45px 0 15px;
        margin-right: 45%;
    }
    
    .contact-info, .contact-form { height: 500px; }
    
    .map {
        position: static;
        width: 100%;
        height: 430px;
    }
}

@media (max-width:767px) {
    .gridM0 { display: none; }
    .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%; }

    .timer { display: none; }

    .slide { position: static; }

    .slide > .left, .slide.past > .left, .slide.present > .left, .slide.future > .left, .slide > .right, .slide.past > .right, .slide.present > .right, .slide.future > .right {
        visibility: visible;
        opacity: 1;
        filter: Alpha(Opacity=100);
        transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
    }

    .design-store { height: auto !important; }

    .design-store > div { width: 100%; }

    .design-store > .left { position: relative; }
    .design-store > .right { position: relative; }

    .design-store .left .first-layer { left: -100px; }
    .design-store .left .second-layer { left: -200px; }

    .responsive > .right { overflow: visible; }

    .slide table {
        opacity: 1;
        filter: Alpha(Opacity=100);
    }

    .design-store table { bottom: 12.5% !important; }

    .responsive table {
        bottom: 12.5% !important;
        width: 150%;
        left: -50%;
    }

    .slide h2 span { width: 200px; }

    .link {
        height: 50%;
        width: 100%;
        opacity: 1;
        filter: Alpha(Opacity=100);
    }

    .design-link { top: 0; }
    .ecommerce-link { top: 50%; }

    .link b { display: none; }

    .link span {
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        opacity: 0.9;
        filter: Alpha(Opacity=90);
    }

    .scrolldown { display: none; }
    .slide-nav { display: none; }
    .slide-pag { display: none; }

    .brands .page-title { display: block; }

    .what-we-do .page-title {
        position: relative;
        width: 100%;
        padding-top: 30px;
        margin: 0 0 30px;
    }

    .page-title h1 { font-size: 32px; }

    .testimonial .item { margin: 60px 15px; }

    .testimonial .item p {
        margin-right: 0;
        text-align: center;
    }

    .testimonial .item img {
        position: static;
        margin-top: 30px;
    }

    .testimonial .item em { text-align: center; }

    .benefits-list .image {
        width: 290px;
        border: none;
        border-radius: 0;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
    }

    .benefits-list .imageleft .image, .benefits-list .imageright .image {
        float: none;
        margin: 0 auto;
    }

    .benefits-list .imageleft .paragraph, .benefits-list .imageright .paragraph {
        padding: 0 15px;
        margin: 15px 0;
    }

    .benefits-list .paragraph h1 {
        text-align: center;
        padding-bottom: 10px;
    }

    .benefits-list .imageleft .paragraph h1:after, .benefits-list .imageright .paragraph h1:after {
        left: 0;
        right: 0;
    }

    .banner h1 { left: 15px; }

    .banner span { display: none; }
    
    .contact-info, .contact-form { height: auto; }
	
		
	.homepage_content{
		padding:20px 30px 20px 30px;
	}
}

@media (max-width:567px) {
    .gridS0 { display: none; }
    .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%; }
	
	.phone {
		display: none;
	}
	
    .footer .container > p a {
		display: inline-block;
		font-size: 10px;
	}
	
	.footer .container > p a {
		margin-top: 12px;
	}
	
	.footer .container > p a+a {
		margin-top: 0;
	}

    .responsive table {
        bottom: 12.5% !important;
        width: 200%;
        left: -100%;
    }

    .slide h2 { font-size: 20px; }
    .slide h4 { font-size: 14px; }

    .link h1 { font-size: 24px; }
    .link h1 i { font-size: 40px; }
    
    .map { height: 320px; left:0px; }
}