@import url(https://fonts.googleapis.com/css?family=Kanit:100,300,400,700,800);

@import "home.css";
@import "about.css";
@import "area.css";
@import "contacts.css";
@import "mobile.css";
@import "header.css";

/* styling here */
@media (min-width: 769px) {
	.spacer150 {height: 150px;}
	.spacer120 {height: 120px;}
	.spacer90 {height: 90px;}
	.spacer60 {height: 60px;}
	.spacer30 {height: 30px;}
	.spacer15 {height: 15px;}
	.spacer5 {height: 5px;}

	.block150 {display: inline-block; width: 150px;}
	.block120 {display: inline-block; width: 120px;}
	.block90 {display: inline-block; width: 90px;}
	.block60 {display: inline-block; width: 60px;}
	.block30 {display: inline-block; width: 30px;}
	.block15 {display: inline-block; width: 15px;}

	.taleft {text-align: left;}
	.tacenter {text-align: center;}
	.taright {text-align: right;}
	.tajustify {text-align: justify;}
}

@media (max-width: 768px) {
	.mb-spacer150 {height: 150px;}
	.mb-spacer120 {height: 120px;}
	.mb-spacer90 {height: 90px;}
	.mb-spacer60 {height: 60px;}
	.mb-spacer30 {height: 30px;}
	.mb-spacer15 {height: 15px;}
	.mb-spacer5 {height: 5px;}

	.mb-block150 {display: inline-block; width: 150px;}
	.mb-block120 {display: inline-block; width: 120px;}
	.mb-block90 {display: inline-block; width: 90px;}
	.mb-block60 {display: inline-block; width: 60px;}
	.mb-block30 {display: inline-block; width: 30px;}
	.mb-block15 {display: inline-block; width: 15px;}

	.mb-taleft {text-align: left;}
	.mb-tacenter {text-align: center;}
	.mb-taright {text-align: right;}
	.mb-tajustify {text-align: justify;}
}


.c#df0110 {
    color: #df0110;
}

.ttupercase {
    text-transform: uppercase;
}

.cf28a48 {
    color: #f28a48;
}

.bgf28a48 {
    background-color: #f28a48;
}

.c6c577c {
    color: #6c577c;
}

.bg6c577c {
    background-color: #6c577c;
}

.ca5cd84 {
    color: #a5cd84;
}

.bga5cd84 {
    background-color: #a5cd84;
}

.bgf3f3f3 {
    background-color: #f3f3f3;
}

img {
    max-width: 100%;
    max-height: 100%;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 300;
    font-family: "Kanit", sans-serif;
}

body {
    font-size: 14px;
    font-family: "Kanit", sans-serif;
    font-weight: 300;
}

body .home {
    background-image: url(../images/bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
}

@media (max-width: 991px) {
	header {
        background-image: none !important;
    }

	header .menu {
		background-color: transparent !important;
	}
}

@media (min-width: 768px) {
    header {
        font-size: 14px;
        background-color: #f3f3f3;
        box-shadow: 0 0 3px rgba(0,0,0,0.5);
        background-image: url(../images/header-bg.jpg);
        background-repeat: no-repeat;
        background-size: 55% 100px;
    }

    header .navbar-default {
        background-color: transparent;
        border-width: 0;
        margin-bottom: 0px;
    }

    header .navbar-brand {
        min-height: 100px;
        padding: 30px 15px;
    }

    header .nav.navbar-nav {
        min-height: 100px;
        border-radius: 0 0 25px 0;
    }

    header .nav.navbar-nav li {
            padding-top: 20px;
    }

    header .products {}

        header .products .item,
        header .products a .item-1,
        header .products a .item-2,
        header .products a .item-3,
        header .products a .item-4 {
            position: relative;
            left: 0;
            top: 0;
            display: inline-block;
            vertical-align: middle;
            width: 30px;
            height: 30px;
        }

    header .products a .item-1 {
        background-image: url(../images/adb-1.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    header .products a:hover > .item-1,
    header .products a:focus > .item-1,
	header .products div.col-md-3.active a > .item-1 {
        background-image: url(../images/adb-2.png);
    }

    header .products a .item-2 {
        background-image: url(../images/cdd-1.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    header .products a:hover > .item-2,
    header .products a:focus > .item-2,
	header .products div.col-md-3.active a > .item-2 {
        background-image: url(../images/cdd-2.png);
    }

    header .products a .item-3 {
        background-image: url(../images/ud-1.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    header .products a:hover > .item-3,
    header .products a:focus > .item-3,
	header .products div.col-md-3.active a > .item-3 {
        background-image: url(../images/ud-2.png);
    }

	header .products a .item-4 {
        background-image: url(../images/boat.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    header .products a:hover > .item-4,
    header .products a:focus > .item-4,
	header .products div.col-md-3.active a > .item-4 {
        background-image: url(../images/boat2.png);
	    }

    header .products .col-md-3 {
        font-size: 14px;
        font-weight: 300;
    }

    header .menu {
        background-color: #FFF;
        position: relative;
        z-index: 10;
    }

    header .menu li {
        padding-top: 22px !important;
        padding-left: 25px;
        padding-right: 25px;
        text-transform: uppercase;
        font-weight: 700;
    }

    header .menu li a {
        color: #333 !important;
    }

    header .menu li a:hover, header .menu li a:focus {
        color: #df0110!important;
    }

	header .menu li.active a
    {
		text-decoration: none !important;
		color: #df0110 !important;
        pointer-events: none!important;
		background-color: transparent !important;
	}

	header .products div.col-md-3.active a.btn
    {
		background-color: #df0110 !important;
		color: #FFF !important;
	}


    header .other-menu {}

    header .other-menu .icon {
        background-color: #dcdcdc;
        padding-bottom: 28px;
        padding-top: 22px !important;
        padding-left: 20px;
        margin-left: -20px;
        border-radius: 0 0 15px 0;
    }

    header .other-menu .icon a {
        color: #df0110 !important;
    }

    header .other-menu .auth-menu {}

    header .other-menu .auth-menu span {
        color: #000;
        cursor: pointer;
    }

    header .other-menu .auth-menu a:hover,
    header .other-menu .auth-menu a:focus {
        text-decoration: none;
        color: #df0110;
    }

    header .other-menu .languages {
        text-transform: uppercase;
    }

    header .other-menu .languages i {
        color: #df0110;
    }

    header .other-menu .languages .dropdown-menu {
        min-width: 100%;
        margin-left: -15px;
    }

    header .other-menu .languages .dropdown-menu a {
        padding: 0;
		padding-top:20px !important;
        text-align: center;
    }

    header .open > .dropdown-menu {
        left: 15px;
        min-width: 180px;
        border-radius: 0;
        padding-top: 0;
    }

    header .dropdown-menu > li > h5 {
        padding: 3px 20px;
        background-color: #ccc;
        line-height: 30px;
        margin: 0;
        text-transform: uppercase;
        color: #fff;
    }

    header .dropdown-menu > li > a {
        padding-top: 7px;
        padding-bottom: 7px;
    }
}

@media (max-width: 767px) {
    .mb-taleft {text-align: left;}
    .mb-tacenter {text-align: center;}
    .mb-taright {text-align: right;}
    .mb-tajustify {text-align: justify;}

    header .products .col-md-3 {
        padding-left: 0;
        padding-right: 0;
    }
    .nav > li.divider {
        border-top: 1px solid rgba(0,0,0,.1);
    }
}

header .products .col-md-3 .btn-default {
    border-width: 0;
    background-color: transparent;
    padding: 15px 0;
    border-radius: 0;
    text-transform: uppercase;
    font-weight: 700;
}

header .products .col-md-3 .btn-default:hover,
header .products .col-md-3 .btn-default:focus {
    background-color: #df0110;
    color: #FFF;
}

/* FOOTER */
footer {
    background-color: #f3f3f3;
    border-top: 1px solid rgba(100,100,100,0.1);
}

footer h4 {
    font-weight: 400;
}

/* COMMON */
.btn-#df0110 {
    border-color: #df0110 !important;
    background-color: #df0110 !important;
    color: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);

    -webkit-transition: all 200ms ease 0s; /* Safari */
    transition: all 200ms ease 0s;
}

.btn-#df0110:hover,
.btn-#df0110:focus {
    background-color: white;
    border-color: white;
    color: #df0110;
}

.form-control:focus {
    border-color: rgba(255,0,0,0.3);
    box-shadow: 0 0 3px rgba(255,0,0,0.3);
}

a {
    -webkit-transition: all 200ms ease 0s; /* Safari */
    transition: all 200ms ease 0s;
    color: #df0110;
}

a:hover,
a:focus {
    text-decoration: none;
    color: rgba(255,0,0,0.5);
}

.fixed
{
    position: fixed;
    top: 0;
    z-index: 999;
    width: 100%;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}



.fixed .spacer15 {
	height: 0px;
}
.fixed .spacer30 {
	height: 5px;
}
.fixed .spacer60 {
	height: 15px;
}


footer a
{
    color: #000;
}


.shadow
{
    box-shadow: 0 4px 4px -2px #232323;
    -moz-box-shadow: 0 4px 4px -2px #232323;
    -webkit-box-shadow: 0 4px 4px -2px #232323;
}


.red-txt
{
    color: #df0110;
    font-weight: 500;
}

.bold-a
{
    color: #000 !important;
    font-weight: 600 !important;
}

.black-a
{
    color: #000 !important;
}

.lg-toggle
{
    margin-top: 5px !important;
    font-weight: 600 !important;
}

a.lg-toggle
{
    color: #000 !important;
}

.clone {
    display: none;
}

.clone.down {
    display: block;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2000;
}

.spacer250
{
    height: 250px;
}

.shadow-menu
{
    box-shadow: -14px 15px 7px -14px;
    padding-left: 0px;
    margin-left: 15px;
}

.shadow-menu2
{
    box-shadow: 0px 5px 10px -5px;
    padding-left: 0px;
    margin-left: 0px;
}

.affixed-menu.fixed.jaben-afixed
{
    height: 200px !important;
}

.jaben-afixed.h200
{
    height: 185px !important;
}

.jaben-afixed2.h80 {
	height: 80px !important;
}

.no-padding-h
{
	padding-left: 0px;
	padding-right: 0px;
}

.btn .caret {
    margin-left: 10px !important;
}

.import-img
{
	width: 75%;
}

#import .btn.btn-primary {
    background-color: #c00017 !important;
    width: 250px !important;
    height: 50px !important;
    border: 0px !important;
    border-radius: 7px !important;
    padding-top: 15px !important;
    padding-left: 20px;
    text-align: left;
    position: relative;
}

#import a.btn.btn-primary {
    text-transform: uppercase !important;
    font-weight: 600 !important;

}

#import a.btn.btn-primary span {
    margin-left: 40px;
    font-weight: 300;
    padding-right: 15px;
    position: absolute;
    right: 0;
    top: 18px;
}