@charset "UTF-8";
/* CSS Document */
html{
	width:100%;
	height:100%;
}
body{ /*+mobile*/
	font-family: 'Inter', sans-serif;
	font-weight:400;
	font-size:1em;
	color:#222222;
    background: #f4f7f6;
	margin:0;
	padding:0;
	line-height:1.7;
	letter-spacing:0em;
  	-ms-text-size-adjust:100%;
  	-webkit-text-size-adjust:100%;
  	-webkit-font-smoothing:antialiased;
  	-moz-osx-font-smoothing:grayscale;
  	text-rendering:optimizeLegibility;
}
input,
textarea,
label{
	font-family: 'Inter', sans-serif;
	font-weight:400;
	font-size:1em;
	color:#222222;
    line-height: 1.7;
    border-radius: 0;
    -webkit-appearance: none;
}
label{
	font-family: 'Inter', sans-serif;
	font-weight:600;
	font-size:1em;
	color:#222222;
    line-height: 1.7;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
a{
    text-decoration: none;
}
#clear{
    clear: both;
}
p{
    margin: 0;
    padding: 0;
}
h1 {
    margin: 0px 0px 20px 0px;
    padding: 0;
    font-size: 2.3em;
    line-height: 1.2;
    font-weight: 700;
}


.btn-index-title{
    width: 120px;
    margin-top: 18px;
}


header{
    width: 100%;
    height: 70px;
    background: #f4f7f6;
    position:fixed;
    top:0;
	z-index:2000;
}
#header-menu-container{
    width: 110px;
    height: 70px;
    position: absolute;
    left: 0;
    border-right: 1px #d7dddd solid;
    border-bottom: 1px #d7dddd solid;
    font-size: 0.8em;
    transition: background-color .3s, color .3s ease-in-out;
    -webkit-transition: background-color .3s, color .3s ease-in-out;
    z-index: 1000;

}
#header-menu-container:hover{
    cursor: pointer;
    color: #666;
}
#header-menu-container:hover span{
    background: #777;
}
#header-menu-id{
    width: auto;
    float: left;
    line-height: 70px;
    margin-left: 8px;
}
#header-logo-container{
    width: 100%;
    height: 70px;
    float: left;
    text-align: center;
    position: relative;
    border-bottom: 1px #d7dddd solid;
}
#header-logo-container img{
    height: 40px;
    margin-top: 15px;
    border: 0;
}
#header-enquiry-container{
    width: 180px;
    height: 70px;
    line-height: 70px;
    position: absolute;
    right: 0;
    text-align: center;
    font-size: 0.8em;
    text-transform:uppercase;
    font-weight: 600;
    color: #fff;
    transition: background-color .3s ease-in-out, border-color .3s ease-in-out;
    -webkit-transition: background-color .3s ease-in-out, border-color .3s ease-in-out;
}
#header-enquiry-container-m{
    display: none;
}
#header-enquiry-container.dealer-logged-out{
    background: #1683c3;
    border-bottom: 1px #1683c3 solid;
}
#header-enquiry-container.dealer-logged-out:hover{
    background: #1a6fb8;
    border-bottom: 1px #1a6fb8 solid;
}
#header-enquiry-container.dealer-logged-in{
    background: #22958c;
    border-bottom: 1px #22958c solid;
}
#header-enquiry-container.dealer-logged-in:hover{
    background: #228481;
    border-bottom: 1px #228481 solid;
}
#m-menu-btn{
  float: left;
  margin-top:27px;
  margin-left: 23px;
  /*display:block;
  position: absolute;*/
  width: 15px;
  height: 15px;
  z-index:2000;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
/*  -webkit-transition: .4s ease-in-out;
  -moz-transition: .4s ease-in-out;
  -o-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
  -webkit-tap-highlight-color: rgba(0,0,0,0);*/
    transition: background-color .3s ease-in-out;
    -webkit-transition: background-color .3s ease-in-out;
}
#m-menu-btn span{
  /*display: block;*/
  position: absolute;
  width: 100%;
  background: #222222;
  height: 2px;
  border-radius: 2px;
  opacity: 1;
  left: 0;
  margin-top:2px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
 /* -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out;*/
    transition: background-color .3s ease-in-out;
    -webkit-transition: background-color .3s ease-in-out;
}
#m-menu-btn span:nth-child(1){
  top: 0px;
}
#m-menu-btn span:nth-child(2),#m-menu-btn span:nth-child(3){
  top: 4px;
}
#m-menu-btn span:nth-child(4), #m-menu-btn-4 span:nth-child(4) {
  top: 8px;
}
#m-menu-btn.open span:nth-child(1){
  top: 4px;
  width: 0%;
  left: 50%;
}
#m-menu-btn.open span:nth-child(2){
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
#m-menu-btn.open span:nth-child(3){
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#m-menu-btn.open span:nth-child(4){
  top: 4px;
  width: 0%;
  left: 50%;
}
#menu-cover{
    display: none;
    width: 100%;
    height: 100px;
    position:fixed;
    background: rgba(0,0,0,0.70);
    z-index: 2001;
}
#menu-container{
    width: 320px;
    min-width: 320px;
    position: fixed;
    background: #f4f7f6;
    z-index: 2010;
}
.menu-container-slide{
	-webkit-transform:translateX(-320px);
	transform:translateX(-320px);
	opacity:1;
	-webkit-transition:opacity 0.6s ease,-webkit-transform 0.5s cubic-bezier(0.9, 0, 0.175, 1);
	transition:opacity 0.6s ease,-webkit-transform 0.5s cubic-bezier(0.9, 0, 0.175, 1);
	transition:opacity 0.6s ease,transform 0.5s cubic-bezier(0.9, 0, 0.175, 1);
	transition:opacity 0.6s ease,transform 0.5s cubic-bezier(0.9, 0, 0.175, 1),-webkit-transform 0.5s cubic-bezier(0.9, 0, 0.175, 1)
}
.menu-container-slide-active{
	-webkit-transform:translateX(0);
	transform:translateX(0);
	opacity:1;
	-webkit-transition:opacity 0.6s ease,-webkit-transform 0.6s cubic-bezier(.41,0,0,1);
	transition:opacity 0.6s ease,-webkit-transform 0.6s cubic-bezier(.41,0,0,1);
	transition:opacity 0.6s ease,transform 0.6s cubic-bezier(.41,0,0,1);
	transition:opacity 0.6s ease,transform 0.6s cubic-bezier(.41,0,0,1),-webkit-transform 0.6s cubic-bezier(.41,0,0,1)
}
#menu-close-container{
    height: 70px;
}
#menu-close{
    width: 70px;
    height: 70px;
    float: right;
     -webkit-tap-highlight-color: rgba(0,0,0,0);
    z-index: 2100;
}
#menu-close:hover{
    cursor: pointer;
}
#menu-close:hover span{
    background: #777;
}
#menu-content-container{
    width: 100%;
    margin: auto;
    border-top: 1px #d7dddd solid;
    overflow:auto;
    -webkit-overflow-scrolling: auto;
}
#menu-content-container ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#menu-content-container ul>a{
    color: #222222;
    text-decoration: none;
}
#menu-content-container ul>a:hover{
    color: #444444;
}
#menu-content-container>ul>a>li{
    font-weight: 600;
    font-size: 1em;
    padding: 16px 0px 16px 25px;
    border-bottom: 1px #d7dddd solid;
    -webkit-transition: .2s ease-in-out;
    -moz-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
}
#menu-content-container ul>a>li:hover,
.menu-active{
    background: #fafafa;
    cursor: pointer;
}
#menu-content-container>ul>ul>a>li{
    font-weight: 400;
    font-size: 0.85em;
    padding: 10px 0px 10px 35px;
    border-bottom: 1px #d7dddd solid;
    -webkit-transition: .2s ease-in-out;
    -moz-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
}
#menu-content-container>ul>ul>a>li span{
    font-weight: 600;
}
.sub-product-menu{
    display: none;
}
.sub-product-menu-open{
	display: inherit;
}

#index-header-gap{
    height: 71px;
}
#index-banner-containers{
    height: 600px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("img/index-cover.jpg") center no-repeat;
    background-size: cover;
    color:#f8f8f8;
}
#index-banner-content{
    width: 70%;
    margin: auto;
}
#index-banner-content p{
    width: 60%;
    text-align: center;
    margin: auto;
}
#index-banner-content button{
    margin: auto;
    margin-top: 2em;
}
#index-title-content{
    max-width: 850px;
    margin-left: 5%;
    padding: 70px 0px 80px 0px;
}
#index-title-content-dashed{
    width: 80px;
    float: left;
    padding-right: 30px;
    position: relative;
}
#index-title-content-header{
    width: calc(100% - 110px);
    float: left;
}
#index-title-content-header button{
    margin-top: 1.5em;
}
.hr-subtitle{
    margin-top: 21px;
    margin-bottom: 10px;
	height:3px;
	width:100%;
	background:#222222;
	border:0;
}
/*-------- index block ads -------*/
#index-block-container{
    width: 100%;
    min-height: 300px;
    background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url("img/index-cover-draka.jpg") center center no-repeat;
    background-size: cover;
    background-position: center 60%;
}
#index-block-content{
    width: 650px;
    padding: 70px 5% 70px 30px;
    float: right;
    color: #f8f8f8;
}
#index-block-content img{
    width: 320px;
    margin-bottom: 1em;
}
#index-block-content button{
    margin-top: 1.5em;
}
.hr-index-block{
    width: 80px;
    float: right;
    height: 3px;
    background: #f8f8f8;
    border: 0;
    margin-top: 160px;
}
/*-------- index block ads -------*/
#index-solution-container{
    width: 100%;
    padding: 70px 0px;
    border-bottom: #ddd 1px solid;
}
#index-solution{
    width: 90%;
    margin: auto;
}
#index-solution h1{
    width: 100%;
    text-align: center;
    margin-bottom: 1.5em;
}
#index-solution-left{
    width: 50%;
    float: left;
}
#index-solution-right{
    width: calc(50% - 1.5em);
    float: left;
    padding-left: 1.5em;
}
#index-solution-right ul{
    margin-left: -20px;
}
#enq-container{
    max-width: 1000px;
    margin: auto;
    margin-top: 71px;
    padding: 70px 2em 80px 2em;
}
#enq-title{
    text-align: center;
    margin-bottom: 3em;
}
#enq-content{
    background: #fff;
    padding: 2em;
}
#enq-content-label{
    width: 27%;
    float: left;
    line-height: 3.6em;
    margin-bottom: 1em;
}

#enq-content-fill,
#enq-content-recaptcha{
    width: calc(73% - 2px);
    float: left;
    margin-bottom: 1em;
}
#enq-content-fill input{
    width: calc(100% - 2em - 2px);
    border: #ccc 1px solid;
    padding: 0.9em 1em;
    border-radius: 0;
    -webkit-transition: border-color .3s ease-in-out;
    -moz-transition: border-color .3s ease-in-out;
    -o-transition: border-color .3s ease-in-out;
    transition: border-color .3s ease-in-out;
}
#enq-content-fill input:focus{
    outline: none;
    border: #777 1px solid;
}
#enq-content-fill textarea{
    width: calc(100% - 2em - 2px);
    height: 250px;
    border: #ccc 1px solid;
    padding: 0.9em 1em;
    border-radius: 0;
    -webkit-transition: border-color .3s ease-in-out;
    -moz-transition: border-color .3s ease-in-out;
    -o-transition: border-color .3s ease-in-out;
    transition: border-color .3s ease-in-out;
}
#enq-content-fill textarea:focus{
    outline: none;
    border: #777 1px solid;
}
#enq-content-fill select{
    font-family: Inter;
	font-size: 1em;
	color: #252525;
	width: 100%;
    line-height: 1.7;
	box-sizing: border-box;
    border: #ccc 1px solid;
    padding: 0.9em 1em;
	box-shadow: 0;
	border-radius: 0;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
    background-image: url('data:image/svg+xml,%3Csvg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 14 9" style="enable-background:new 0 0 14 9;" xml:space="preserve"%3E%3Cstyle type="text/css"%3E .st0%7Bfill:%23666666;%7D%0A%3C/style%3E%3Cpolygon class="st0" points="7,8 1,1 13,1 "/%3E%3C/svg%3E');
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
    cursor: pointer;
    -webkit-transition: border-color .3s ease-in-out;
    -moz-transition: border-color .3s ease-in-out;
    -o-transition: border-color .3s ease-in-out;
    transition: border-color .3s ease-in-out;
}
.form-group select{
    font-family: Inter;
	font-size: 1em;
	color: #252525;
	width: 100%;
    line-height: 1.7;
	box-sizing: border-box;
    border: #ccc 1px solid;
    padding: 0.7em 0.8em;
	box-shadow: 0;
	border-radius: 0;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
    background-image: url('data:image/svg+xml,%3Csvg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 14 9" style="enable-background:new 0 0 14 9;" xml:space="preserve"%3E%3Cstyle type="text/css"%3E .st0%7Bfill:%23666666;%7D%0A%3C/style%3E%3Cpolygon class="st0" points="7,8 1,1 13,1 "/%3E%3C/svg%3E');
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
    cursor: pointer;
    -webkit-transition: border-color .3s ease-in-out;
    -moz-transition: border-color .3s ease-in-out;
    -o-transition: border-color .3s ease-in-out;
    transition: border-color .3s ease-in-out;
}
#enq-content-fill select::-ms-expand,
.form-group select::-ms-expand{
	display: none;
}
#enq-content-fill select:focus,
.form-group select:focus{
    outline: none;
    border: #777 1px solid;
}
#enq-content-submit{
    text-align: center;
    padding-top: 2em;
}
#button-dark{
    min-width: 120px;
    padding: 4px 20px;
    line-height: 1.7;
    color: #f8f8f8;
    border: #f8f8f8 1px solid;
    text-align: center;
    border-radius: 200px;
    font-size: 0.85em;
    font-weight: 600;
    text-decoration: none;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-transition: border-color .2s ease-in-out, color .2s ease-in-out;
    -moz-transition: border-color .2s ease-in-out, color .2s ease-in-out;
    -o-transition: border-color .2s ease-in-out, color .2s ease-in-out;
    transition: border-color .2s ease-in-out, color .2s ease-in-out;
	font-family: 'Inter', sans-serif;
}
#enq-content-submit input.enq-submit,
#button-light{
    min-width: 120px;
    padding: 4px 20px;
    line-height: 1.7;
    color: #222;
    border: #222 1px solid;
    text-align: center;
    border-radius: 200px;
    font-size: 0.85em;
    font-weight: 600;
    text-decoration: none;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-transition: border-color .2s ease-in-out, color .2s ease-in-out;
    -moz-transition: border-color .2s ease-in-out, color .2s ease-in-out;
    -o-transition: border-color .2s ease-in-out, color .2s ease-in-out;
    transition: border-color .2s ease-in-out, color .2s ease-in-out;
	font-family: 'Inter', sans-serif;
}
#enq-content-submit input.enq-submit:hover,
#button-light:hover{
    color: #1683c3;
    border: 1px #1683c3 solid;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    outline: none;
}
#button-dark:hover{
    color:#46A8FF;
    border: 1px #46A8FF solid;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    outline: none;
}
#enq-content-submit input.enq-submit:focus,
#button-light:focus,
#button-dark:focus{
    outline: none;
}
#msg-status-success{
    width: 100%;
    line-height: 3em;
    text-align: center;
    background:rgba(0,255,24,0.30);
    font-weight: 600;
    position: fixed;
    z-index: 1500;
    top: 71px;
    font-size: 0.9em;
}
#msg-status-error{
    width: 100%;
    line-height: 3em;
    text-align: center;
    background:rgba(255,0,4,0.30);
    font-weight: 600;
    position: fixed;
    z-index: 1500;
    top: 71px;
    font-size: 0.9em;
}
#contact-container{
    width: 90%;
    max-width: 1300px;
    margin: auto;
    margin-top: 71px;
    padding: 70px 0px;
}
#contact-content-title{
    margin-bottom: 2em;
}
.contact-em{
    margin-top: 70px;
}
#contact-content-title-before{
    width: 20px;
    float: left;
    font-size: 1.2em;
    line-height: 1.3em;
    font-weight: 700;
}
#contact-content-title>h3{
    width: calc(100% - 20px);
    font-size: 1.2em;
    margin: 0;
    padding: 0;
    line-height: 1.3em;
    float: left;
}
#contact-content-title>h3>span{
    font-weight: 400;
}
#contact-content-box{
    width: calc(32% - 2.8em - 2px);
    float: left;
    background: #fff;
    margin-bottom: 1.5em;
    padding: 1.8em 1.4em 1.4em 1.4em;
    font-size: 0.9em;
    border: #fff 1px solid;
    position: relative;
    -webkit-transition: border-color .2s ease-in-out, color .2s ease-in-out;
    -moz-transition: border-color .2s ease-in-out, color .2s ease-in-out;
    -o-transition: border-color .2s ease-in-out, color .2s ease-in-out;
    transition: border-color .2s ease-in-out, color .2s ease-in-out;   
}
#contact-content-box:hover{
    border: #ccc 1px solid;
}
.contact-content-gap{
    margin-right: 2%;
}
#contact-content-b-title{
    text-align: center;
    font-weight: 700;
    font-size: 1.1em;
}
#contact-content-b-title>hr{
    width: 60px;
    margin: auto;
    background: #333;
    height: 2px;
    margin-top: 0.7em;
    margin-bottom: 1.5em;
    border: 0;
}
#contact-content-address{
    margin: 1em 0;
    font-size: 0.95em;
    min-height: 95px;
}
#contact-content-address a{
    color: #222;
    text-decoration: none;
    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out; 
}
#contact-content-address a:hover{
    color: #1683c3;
}
#contact-content-number{

}
#contact-icon{
    width: 25px;
    height: 25px;
    line-height: 27px;
    font-size: 1.1em;
    float: left;
    text-align: center;
    border: #333 1px solid;
    border-radius: 40px;
    margin-bottom: .5em;
}
#contact-icon>i{
    text-decoration: none;
}
#contact-number{
    width: auto;
    float: left;
    margin-left: .7em;
    line-height: 27px;
    margin-bottom: .5em;
    text-decoration: none;
}
#contact-number a{
    color: #222;
    text-decoration: none;
}
#contact-color-tab{
    width: 40%;
    height: 10px;
    margin-left: calc(50% - 20% - 1.3em);
    position: absolute;
    border-radius: 0 0 6px 6px;
    top: -1px;
}
.contact-color-1{
    background: #ee2400;
}
.contact-color-2{
    background: #ff6400;
}
.contact-color-3{
    background: #ffc800;
}
.contact-color-4{
    background: #bce300;
}
.contact-color-5{
    background: #64e300;
}
.contact-color-6{
    background: #00d8c9;
}
.contact-color-7{
    background: #0089e0;
}
.contact-color-8{
    background: #0048db;
}
.contact-color-9{
    background: #8517db;
}
.contact-color-10{
    background: #ec44db;
}
#about-title-container{
    width: 100%;
    margin-top: 71px;
}
#about-cover{
    width: 100%;
    height: 350px;
    background: url("img/about-cover1.jpg") center bottom no-repeat;
    background-size: cover;
}
#about-specialized{
    width: 90%;
    margin: auto;
    padding: 70px 0;
}
#about-specialized-title{
    text-align: center;
}
#about-specialized-box-container{
    width: 86%;
    margin: auto;
    margin-top: 3.5em;
}
#about-specialized-box-container>ul{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	width:100%;
	list-style-type:none;
	padding:0;
	margin:0;
/*	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;*/
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between
}
#about-specialized-box-container>ul>li{
    width: 26%;
    min-width: 200px;
    max-width: 800px;
    padding: 1em;
    background: #fff;
    margin-bottom: 3.5em;
    position: relative;
    border: #e8e8e8 1px solid;
    border-radius: 16px;
}
#about-color-tab{
    width: 50%;
    height: 10px;
    margin-left: calc(50% - 25% - 1em);
    position: absolute;
    border-radius: 0 0 6px 6px;
    top: 0;
}
.about-color-red{
    background:#C10000;
}
.about-color-orange{
    background:#FAB100;
}
.about-color-blue{
    background:#006BF1;
}
.about-color-green{
    background: #00AF3C;
}
.about-color-purple{
    background: #7B00F1;
}
.about-color-grey{
    background:#414147;
}
#about-content-bg1{
    height: 170px;
    background:url("img/icon-cctv.svg") center no-repeat;
    background-size: 140px;
}
#about-content-bg2{
    height: 170px;
    background:url("img/icon-fiber.svg") center no-repeat;
    background-size: 170px;
}
#about-content-bg3{
    height: 170px;
    background:url("img/icon-copper.svg") center no-repeat;
    background-size: 170px;
}
#about-content-bg4{
    height: 170px;
    background:url("img/icon-ac.svg") center no-repeat;
    background-size: 170px;
}
#about-content-bg5{
    height: 170px;
    background:url("img/icon-alarm.svg") center no-repeat;
    background-size: 170px;
}
#about-content-bg6{
    height: 170px;
    background:url("img/icon-integrated.svg") center no-repeat;
    background-size: 120px;
}
#about-content-subtitle{
    text-align: center;
    font-weight: 700;
    margin-bottom: 1em;
}
#about-content-subtitle h3{
    font-size: 1.3em;
    margin: 0;
    padding: 0;
    line-height: 1.4;
}
#about-specialized-box-container>ul>li>ul{
    margin-left: 0;
    list-style-type: disc;
    padding-left: 1.4em;
    padding-bottom: 1.2em;
    font-size: 0.9em;
}
#about-committed{
    width: 100%;
    background: url("img/about-cover2.jpg") center no-repeat;
    background-size: cover;
}
#about-committed-content{
    max-width: 800px;
    padding: 90px 5% 90px 200px;
    float: right;
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.93) 16%, rgba(255,255,255,0.93) 100%);
}
#about-committed-content p{
    margin-bottom: 1em;
}
#about-partner{
    width: 90%;
    margin: auto;
    margin: 80px 5%;
}
#about-partner-items{ /*+mobile*/
	width:12.5%;
	float:left;
	text-align:center;
}
#about-partner-items img{ /*+mobile*/
	height:44px;
	opacity:1;
	border:0;
}
#about-partner-block{ /*+mobile*/
	display:none;
}
#support-title-container{
    width: 100%;
    margin-top: 71px;
    height: 380px;
    background: url("img/support-cover1.jpg") center no-repeat;
    background-size: cover;
}
#support-download-container{
    padding: 70px 0;
    width: 90%;
    margin: auto;
    text-align: center;
}
#support-download-container a#support-a-content{
    color: #222;
    text-decoration: none;
    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out; 
}
#support-download-container a#support-pages{
    text-decoration: none;
}
#support-download-container a#support-a-content:hover,
#support-download-container a#support-pages:hover{
    color: #1683c3;
}
/*#support-download-container p{
    width: 34px;
    line-height: 34px;
    display:inline-block;
    text-align: center;
    border: #bbb 1px solid;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-right: 5px;
    -webkit-transition: border-color .2s ease-in-out;
    -moz-transition: border-color .2s ease-in-out;
    -o-transition: border-color .2s ease-in-out;
    transition: border-color .2s ease-in-out;
}
#support-download-container p:hover{
    border: #1683c3 1px solid;
}
.no-curPage{
    color: #222;
}
.curPage{
    font-weight: 700;
    color: #1683c3;
}*/
#pagination-container p{
    width: 34px;
    line-height: 34px;
    display:inline-block;
    text-align: center;
    border: #bbb 1px solid;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-right: 5px;
    -webkit-transition: color 0.2s, border-color 0.2s;
    -moz-transition: color 0.2s, border-color 0.2s;
    -o-transition: color 0.2s, border-color 0.2s;
    transition: color 0.2s, border-color 0.2s;
}
#pagination-container p.no-curPage{
    border: #252525 1px solid;
    color: #252525;
}
#pagination-container p.no-curPage:hover{
    border: #1683c3 1px solid;
    color: #1683c3;
}
#pagination-container p.curPage{
    font-weight: 700;
    color: #1683c3;
    border: #1683c3 1px solid;
}
#support-download-container h1{
    margin: auto;
    text-align: center;
    max-width: 800px;
    margin-bottom: 1.7em;
}
#support-download{
    width: calc(100% - 4em);
    margin: auto;
    padding: 0.8em 2em;
    background: #fff;
    margin-bottom: 0.6em;
    
}
#support-download-content{
    width: calc(100% - 100px);
    min-height: 32px;
    background: url("img/support-pdf.svg") left center no-repeat;
    background-size: 28px;
    padding-left: 100px;
    position: relative;
}
#support-download-table{
    height: 32px;
    display: table-cell;
    vertical-align: middle;
    text-align: left;
}


footer{
    width: 100%;
    padding: 70px 0px;
    background: #ffffff;
}
#footer-content-container{
    width: 90%;
    margin: auto;
}
#footer-content-left{
    width: calc(100% - 90px);
    float: left;
}
#footer-content-address p{
    margin: 0;
    font-size: 0.85em;
}
#footer-content-address-link{
    list-style-type: none;
    padding: 0;
    margin: 16px 0px 0px 0px;
    font-size: 0.85em;
    font-weight: 700;
    line-height: 2;
}
#footer-content-address-link>li{
    float: left;
    margin-right: 20px;
}
#footer-content-right{
    width: 80px;
    float: right;
}
#footer-content-right img{
    width: 100%;
    border: none;
}
#footer-bottom-left{
    width: auto;
    float: left;
}
#footer-bottom-right{
    width: auto;
    float: right;
    margin:  16px 0px 0px 0px;
    font-size: 0.85em;
    text-align: right;
}
#footer-followus{
    list-style-type: none;
    padding: 0;
    margin: 16px 0px 0px 0px;
    font-size: 0.85em;
}
#footer-followus>li{
    float: left;
    margin-right: 12px;
}
#footer-content-address>p>a{
    color: #222222;
    text-decoration:underline;
    transition: color .3s ease-in-out;
    -webkit-transition: color .3s ease-in-out;
}
#footer-followus>li>a,
#footer-content-address-link>li>a{
    color: #222222;
    text-decoration: none;
    transition: color .3s ease-in-out;
    -webkit-transition: color .3s ease-in-out;
}
#footer-followus>li>a:hover,
#footer-content-address-link>li>a:hover,
#footer-content-address>p>a:hover{
    color: #555555;
}

/* ---- Dealer login ----*/
#login-container{
    width: 90%;
    margin: auto;
    margin-top: 141px;
    margin-bottom: 70px;
}
#login-container h1{
    text-align: center;
    max-width: 700px;
    margin: auto;
    margin-bottom: 1.8em;
}
#login-container h1.dealer-h1{
    margin-bottom: 0.7em;
}
#login-container span{
    display: block;
}
#login-content{
    max-width: 380px;
    margin: auto;
    background: #fff;
    padding: 2em;
}
#login-content h3{
    font-size: 1.6em;
    line-height: 1;
    margin: 0 0 1em 0;
    padding: 0;
    text-align: center;
}
#login-content p{
    font-size: 0.85em;
    text-align: center;
    margin-top: 0.6em;
}
#login-content a{
    color: #252525;
    text-decoration: none;
    font-weight: 600;
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    -o-transition: color 0.3s;
    transition: color 0.3s;
}
#login-content a:hover{
    color: #1683c3;
}
.form-group input,
div.acc-info{
    width: calc(100% - 1.6em);
    border: #ccc 1px solid;
    padding: 0.6em 0.8em;
    -webkit-transition: border-color .3s ease-in-out;
    -moz-transition: border-color .3s ease-in-out;
    -o-transition: border-color .3s ease-in-out;
    transition: border-color .3s ease-in-out;
}
#enq-content-fill input#catalog{
    border: none;
    padding-left: 0;
}
input[type=file]::-webkit-file-upload-button{
    background: none;
    padding: 4px 20px;
    color: #222;
    line-height: 1.7;
    font-size: 0.85em;
    font-weight: 600;
    border: #222 1px solid;
    border-radius: 100px;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-transition: color 0.3s, border-color 0.3s;
    -moz-transition: color 0.3s, border-color 0.3s;
    -o-transition: color 0.3s, border-color 0.3s;
    transition: color 0.3s, border-color 0.3s;
}
input[type=file]::-webkit-file-upload-button:hover{
    color: #1683c3;
    border: #1683c3 1px solid;
}
input[type=file]::-webkit-file-upload-button:focus{
    outline: none;
}
div.acc-info{
    color: #777;
}
.form-group input:focus{
    outline: none;
    border: #777 1px solid;
}
.form-group label{
    display: block;
    margin: 1.1em 0 0.2em 0;

}
.form-group span{
    color: #a94442;
}
#register-content-container{
    background: #fff;
}
#register-content-container>#login-content{
    max-width: 500px;
}
/*--- dealer page --*/
#login-dealer-control{
    text-align: center;
    margin-bottom: 0em;
}
#login-dealer-control button{
    width: 130px;
    margin-bottom: 2.5em;
}
#login-dealer-contents{
    width: 75%;
    min-width: 700px;
    margin: auto;
    text-align: center;
}
#login-dealer-logged{
    display: flex;
    align-items: center;
    margin-bottom: 0.5em;
    background: #fff;
    padding: 1em;
    text-align: left;
}
#login-dealer-logged-1{
    width: 6%;
    margin-left: 2%;
    float: left;
    font-weight: 600;
}
#login-dealer-logged-2{
    width: calc(90% - 130px);
    float: left;
}
#login-dealer-logged-button{
    width: 130px;
    float: right;
    text-align: right;
}
#login-dealer-logged-2-left{
    width: 100px;
    float: left;
    font-weight: 600;
}
#login-dealer-logged-2-right{
    width: auto;
    float: left;
}
#login-msg{
    max-width: 380px;
    margin: auto;
    color: #009f4c;
    font-weight: 600;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 1em;
}
#login-msg-err{
    max-width: 380px;
    margin: auto;
    color: #a94442;
    font-weight: 600;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 1em;
}

/*---- verification ----*/
#acc-verify-container{
    margin: auto;
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
#acc-verfiy{
    max-width: 600px;
}
#acc-verify h1{
}
#acc-verfiy img{
    height: 40px;
    margin-bottom: 1em;
}
#acc-verfiy a{
    color: #252525;
    font-weight: 600;
    text-decoration: none;
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    -o-transition: color 0.3s;
    transition: color 0.3s;
}
#acc-verfiy a:hover{
    color: #1683C3;
}
#acc-verfiy span{
    font-weight: 600;
}
#verify-cp{
    margin-top: 1.5em;
}
.direct-contact{
    padding: 4em 0;
    background: #eee;
    text-align: center;
}
.direct-contact>div{
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}
.direct-contact>div div{
    color: #888;
    box-sizing: border-box;
}
.direct-contact>div div:nth-child(1){
    width: calc(50% - 3em);
    box-sizing: border-box;
    text-align: right;
    margin-right: 3em;
}
.direct-contact>div div:nth-child(2){
    width: 50%;
    text-align: left;
}
.direct-contact>div div span{
    font-weight: bold;
    font-size: 1.3em;
    color: #252525;
}
.apc-menu{
	display: none;
}