@import url("https://fonts.googleapis.com/css?family=Titillium+Web:400,700&subset=latin,latin-ext");
@media screen and (max-width: 1044px) {
	.zone_ContentBoxContainer, .zone_GalleryGrid, .zone_data {
        margin-left: 2%;
        margin-right: 2%;
    }

	#wrapper {
		position: relative;
	}

    #header .logo {
        float: left;
        margin: 2%;
    }

	.home #wrapper {
		background-image: none;
	}

    .home #header {
        margin-left: -500px;
        position: relative;
        margin: 0;
        left: auto;
    }

	nav, .home nav {
        position: relative;
        width: auto;
        margin: 0 0 2%;
        top: 0;
        left: auto;
	}

    .nav {
        width: 100%;
    }

    .home nav li a {
    	padding-top: 50px;
    }

    .spanMenuDropdown {
    	width: 30%;
    	height: 100%;
    	margin: 0;
    	background: url(/themes/kafana/css/../images/navArrowSingle.png) 40% 57px no-repeat;
        cursor: pointer;
    }

    .spanMenuDropdown.active {
    	background-position: 40% -87px;
    }

    .dropdownToggle a {
        margin-right: 0;
    }

    nav li.dropdownToggle > a {
        padding-right: 30%
    }

    nav .nav li .dropdownSecondLevel {
        position: relative;
        left: 0;
    }

    #header, #pageContainer, .footerContainer, .powered {
		width: 100%;
	}

    #pageContainer {
        padding-bottom: 4%;
    }

    .carousel-control {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
        opacity: 1
    }

    .carousel-control.left {
        left: 20px;
    }

    .carousel-control.right, .carousel-control.right:hover {
        right: 20px;
    }

    .home #zone_1 {
        margin-top: 4%;
    }

    .home #zone_1, .home #zone_2 {
        margin-bottom: 4%;
    }

    #footer {
        width: 96%;
        padding-left: 2%;
        padding-right: 2%;
    }

    article.ab1 .zone_title, article.ab1 .zone_highlight, 
    article.ab1 .zone_text {
        margin-left: 2%
    }

    article.ab2 .zone_title, article.ab2 .zone_highlight, 
    article.ab2 .zone_text {
        margin-right: 2%
    }

    article.ab1 {
        padding-right: 2%;
    }

    article.ab2 {
        padding-left: 2%;
    }

    article.ab3 .zone_title, article.ab3 .zone_highlight, article.ab3 .zone_text,
    article.ab4 .zone_title, article.ab4 .zone_highlight, article.ab4 .zone_text,
    .contact-form, article.bi7 h2, article.bi7 .boxHighlight {
        padding-left: 2%;
        padding-right: 2%;
    }

    article.bi1, article.bi4, article.bi5, .product_1 .productsContainer,
    .product_2 .productsContainer, .product_3 .productsContainer,
    .product_4 .productsContainer {
        margin-left: 2%;
        margin-right: 2%;
    }

    article.bi7 .btn {
        margin-right: 2%;
    }

    .contact-form .iTxt, .contact-form .message-area {
        width: 98.5%;
        padding: 0.6%;
        -webkit-appearance: none;
    }

    .gallery_list li.gb3, .gallery_list li.gb4 {
        width: 31%;
    }

    .productItem.pi2 {
        width: 47.7%;
    }

    .productItem.pi3 {
        margin: 1% 0;
    }
}

@media screen and (max-width: 782px) {
    #header .logo {
        float: none;
    }

    .logo h1 {
        text-align: center;
    }

    .nav {
        display: none;
        margin-top: 1%;
    }

    nav {
        background-color: transparent;
    }

    #header .logo, nav, .home nav {
        margin-bottom: 3%;
    }

	nav li {
		width: 100%;
	}

    .home nav li a, .home .dropDownStyle li a, nav li a {
        padding: 30px 0 10px
    }

    nav li .dropDownStyle {
        position: relative;
    }

    nav li.dropdownToggle > a {
        padding-right: 1%;
    }

    .lowResHref {
        display: block;
        width: 52px;
        height: 32px;
        background: url(/themes/kafana/css/../images/lowResBg.png) center no-repeat;
        text-indent: -9999px;
        margin: 0 auto;
    }

    .spanMenuDropdown {
        width: 20%;
        background-position: 45% 38px
    }

    .spanMenuDropdown.active {
        background-position: 45% -105px
    }

    .carousel-caption h4 {
        font-size: 2em;
    }

    .carousel-caption p {
        font-size: 1.2em;
    }

    .home #zone_1 article.bi2 {
        margin-top: 1%
    }

    #footer {
        height: auto;
        width: 100%;
        padding: 0;
    }

    #footer .logo {
        float: none;
        height: auto
    }

    #footer .logo img {
        margin-bottom: 0
    }

    #footer .social {
        height: auto;
        border-right: none;
        float: none;
    }

    #footer .social ul {
        margin: 20px 0;
        text-align: center;
    }

    .contact-form .iTxt {
        height: 25px;
    }

    #wrapper .contact-form .btn {
        margin-bottom: 1% !important;
    }

    .gallery_list li.gb1, .gallery_list li.gb2 {
        width: 46.9%;
    }

    .gallery_list li.gb1 .imgLink, .gallery_list li.gb2 .imgLink {
        margin: 0 0 1em 0;
    }

    .gallery_list li.gb3, .gallery_list li.gb4 {
        width: 47%;
    }

    .gallery_list li.gb6 {
        width: 48.5%;
    }

    article.bi1 > a:first-child, article.bi4 > a:first-child {
        width: 40%;
    }

    article.bi1, article.bi4, article.bi5, article.bi6 {
        margin-top: 3%;
        margin-bottom: 3%;
    }

    article.bi2, article.bi3 {
        width: 46.9%;
    }

    .productItem.pi2 {
        width: 45.5%;
    }

    .productItem.pi3 {
        margin: 3% 0;
    }

    .pi3 > a:first-child {
        width: 25%
    }

    .productItem.pi4 {
        width: 22.5%;
        margin: 2% 1%;
    }
}

@media screen and (max-width: 500px) {
    h4 {
        text-align: left;
    }

    .powered {
        margin-bottom: 10px;
    }

    .dropDownStyle a {
        width: auto;
        margin: 0;
        padding-left: 1%;
        padding-right: 1%;
        text-align: center;
    }

    nav .nav li .dropdownSecondLevel {
        left: 0;
    }

    .carousel-caption h4 {
        font-size: 1.5em;
    }

    .carousel-caption p {
        font-size: 1em;
    }

    .carousel-control {
        bottom: 15px;
    }

    .home #zone_1 h2, .home #zone_1 .boxHighlight {
        margin-left: 2%;
        margin-right: 2%;
    }

    .home #zone_1 .btn {
        margin-right: 2%;
    }

    #footer {
        margin-top: 10px;
    }

    article.ab1 img, article.ab1 iframe, article.ab2 img, article.ab2 iframe {
        width: 50%;
    }

    article.ab1 img, article.ab1 iframe {
        margin-right: 2.8%;
        float: left;
    }

    article.ab2 img, article.ab2 iframe {
        margin-left: 2.8%;
        float: right;
    }

    .Contact3 #zone_1, .Contact4 #zone_1, .Contact6 #zone_1 {
        margin-top: 4%
    }

    .contact-form .iTxt {
        height: 30px;
    }

    #wrapper .contact-form .btn {
        margin-bottom: 2% !important;
    }

    .gallery_list li.gb1, .gallery_list li.gb2 {
        width: 46.7%;
    }

    article.bi2, article.bi3 {
        width: 100%;
        padding: 0;
        margin: 2% 0;
    }

    .pi1 .productItem, .productItem.pi2 {
        margin: 2% 1%;
    }

    .pi2 .productThumb {
        width: 28%;
    }

    .productItem.pi3 {
        margin: 5% 0;
    }

    .pi3 > a:first-child {
        width: 53%;
    }

    .productItem.pi4 {
        width: 46.7%;
        margin: 3% 1.4%;
    }
}