body{background-color:#fff;font-size: 16px;font-weight: 400;color:#262830;font-family: 'Mulish', sans-serif;}
a {text-decoration: none;transition: all 0.3s linear;}

/* navibar **/
.navwrap {background-color: rgba(45, 54, 87, 0.6);}
.logo {position: absolute;top:0px;left: 0px;padding:8px 14px;background-color: #434962;border-radius: 0px 0px 5px 5px;}

.logo img{max-height:120px;transition: all 0.3s linear;}

.navibar {display: block;margin:14px 0px;transition: all .3s linear}
.navibar .sptr{margin: 0 14px;}
.navibar a {font-family: "Sansation", sans-serif;color:rgba(255,255,255,0.7);margin-left:18px;font-size: 14px;font-weight: 400;position: relative;text-transform: uppercase;letter-spacing: 1px;}
.navibar a:hover {color:#fff}
.navibar a.lang {font-size: 14px;}
.navibar a.act, .navibar a.act:hover {color:#fff}

.srink  {background-color: rgb(67, 73, 98);box-shadow: 0px 1px 3px 2px rgba(0,0,0,0.1);}
.srink .logo img {max-height: 80px;}
.srink .navibar {margin:11px 0px;}
.srink .navibar a {margin-left: 12px;}

.heroslider {background-color: rgb(78, 85, 112);position: relative;overflow:hidden;width: 100%;height: 700px;}
.heroslider .imgone {background: url(../images/hero/a.jpg) no-repeat center center;background-size: cover;}
.heroslider .imgtwo {background: url(../images/hero/b.jpg) no-repeat center center;background-size: cover;}
.heroslider .imgtre {background: url(../images/hero/c.jpg) no-repeat center center;background-size: cover;}

.heroslider .slide {position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;transform: translateY(100px);transition: opacity 1s ease, transform 1s ease;background-size: cover;background-position: center;z-index: 0;}
.heroslider .slide.active {opacity: 1;transform: translateY(0);z-index: 1;}

.heroslider .slidepad {padding-top:280px;} 
.heroslider .slide h1 {font-family: "Sansation", sans-serif;color:#fff;font-size:44px;font-weight:700;text-shadow: 1px 1px 2px rgba(0,0,0,0.5);line-height: 54PX;}
.heroslider .slide p {color:#fff;font-size:22px;font-weight:400;}
.heroslider .slide a {display: inline-block;margin-top: 90px;color:rgba(255,255,255,1);font-size:16px;font-weight:400;padding:8px 0px 9px 0px;border-radius: 3px;text-transform: uppercase;letter-spacing: 1px;}

a.animated-border {position: relative;border-bottom:solid 1px rgba(255,255,255,0.4);}
a.animated-border::before {content: "";position: absolute;bottom: 0px;left: 0;height: 1px;width: 100%;background:rgba(255,255,255,0.4);}
a.animated-border:hover::after {content: "";position: absolute;bottom: 0px;left: 0;height: 1px;width: 0;background: white;animation: slideLine 750ms linear infinite;}

@keyframes slideLine {
  0% {width: 0;left: 0;}
  50% {width: 50%;left: 0;}
  100% {width: 0;left: 100%;}
}

h1 {font-family: "Sansation", sans-serif;font-size: 32px;line-height: 40px;font-weight: 700;color:#262830;}
h2 {font-family: "Sansation", sans-serif;font-size: 24px;line-height: 30px;font-weight: 400;color:#262830;}
h3 {font-family: "Sansation", sans-serif;font-size: 20px;line-height: 30px;font-weight: 400;color:#262830;}
p {font-size: 16px;font-weight: 400;line-height:26px;color:#3b3b3d;}
a {display: inline-block;font-size:16px;font-weight:400;}

/* Animated UL LI Radio */
ul { list-style: none; padding: 0; max-width: 700px; margin-top:20px;margin-left: 16px;}
li { display: flex; align-items: center; font-size: 16px; margin-bottom: 12px; color: #3b3b3d; }
.circle { width: 20px; height: 20px; margin-right: 16px; flex-shrink: 0; }
.circle circle { fill: none; stroke: #434962; stroke-width: 2; }
.circle .fill { fill: #434962; opacity: 0; }
@keyframes show { 0%, 14.2%, 100% { opacity: 0; } 7.1% { opacity: 1; }}
@keyframes scaleUp { 0%, 14.2%, 100% { transform: scale(1); }  7.1% { transform: scale(1.5); }}

li:nth-child(1) .fill { animation: show 7s linear infinite; animation-delay: 0s; } li:nth-child(1) .circle { animation: scaleUp 7s linear infinite; animation-delay: 0s; }
li:nth-child(2) .fill { animation: show 7s linear infinite; animation-delay: 1s; } li:nth-child(2) .circle { animation: scaleUp 7s linear infinite; animation-delay: 1s; }
li:nth-child(3) .fill { animation: show 7s linear infinite; animation-delay: 2s; } li:nth-child(3) .circle { animation: scaleUp 7s linear infinite; animation-delay: 2s; }
li:nth-child(4) .fill { animation: show 7s linear infinite; animation-delay: 3s; } li:nth-child(4) .circle { animation: scaleUp 7s linear infinite; animation-delay: 3s; }
li:nth-child(5) .fill { animation: show 7s linear infinite; animation-delay: 4s; } li:nth-child(5) .circle { animation: scaleUp 7s linear infinite; animation-delay: 4s; }
li:nth-child(6) .fill { animation: show 7s linear infinite; animation-delay: 5s; } li:nth-child(6) .circle { animation: scaleUp 7s linear infinite; animation-delay: 5s; }
li:nth-child(7) .fill { animation: show 7s linear infinite; animation-delay: 6s; } li:nth-child(7) .circle { animation: scaleUp 7s linear infinite; animation-delay: 6s; }


.wbox {display: block;padding:30px 36px;background-color: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); border-radius: 5px; transition: box-shadow 0.3s ease; }
.wbox:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); }
 
.section-about  {background:#ededee;}
.section-about h1 {font-weight:400;font-size: 28px;line-height: 36px;}
.section-about h1 span, .section-about h2 span {font-weight:700;}

.section-why {background:#ededee}
.section-why h1 {font-weight:400;}
.section-why h1 span {font-weight:700;}
.section-why h3 span {font-weight:700;}

.section-brands {background:#363c52}
.section-brands .branditem {padding:12px 6px;background-color: rgba(255,255,255,0.1);;overflow: hidden;transition: all 0.3s linear;border-radius: 3px;border: solid 1px #4e546b;}
.section-brands .branditem img{max-width: 90%;transition: all 0.3s linear;margin: auto;}
.section-brands .branditem:hover {background-color: rgba(255,255,255,0.6);}
.section-brands .branditem:hover img {opacity: 1;filter: grayscale(0%);transform: scale(1.25);}
.section-brands .slick-slide {margin: 0 10px;}
.section-brands .slick-list { margin: 0 -10px;}
.section-brands h2 {color:#dedede;text-shadow: 1px 1px 2px rgba(0,0,0,0.5);}
.section-brands p {color:#bcbcbc;}

.section-explore {background:#363c52}
.section-explore h1 {color:#ccc;font-weight:400;text-shadow: 1px 1px 2px rgba(0,0,0,0.5);}
.section-explore h1 span {font-weight:700;color:#dedede;}
.section-explore h3 {color:#dedede;text-shadow: 1px 1px 2px rgba(0,0,0,0.5);}
.section-explore p {color:#bcbcbc;}

.section-explore ul { margin-left: 0px;}
.section-explore li {color: #bcbcbc;position: relative;padding-left: 36px;transition: all 500ms linear;}
.section-explore li::before {left: 0px;top:50%;left:0px;width:18px;height: 1px;background-color: #bcbcbc; position: absolute;content: '';transition: all 500ms linear;}

.section-explore li:hover {color: #ddd;}
.section-explore li:hover::before {width:30px;}

.section-explore-dark {background-color: #33384b}
.section-explore-gray {background-color: #464a5b}

.prodbox {display: block;position: relative;overflow: hidden;box-shadow: 0px 1px 3px 2px rgba(0,0,0,0.1);border-radius: 3px;margin-bottom: 30px;}
.prodbox .imgbx {display: block;overflow: hidden;border-radius: 3px;}
.prodbox .imgbx img {width: 100%;transition: all 0.3s linear;}
.prodbox:hover .imgbx img {transform: scale(1.1);}
.prodbox .tbx {left: 0px;bottom: -100%; padding: 20px 16px 20px 16px;position: absolute;content: '';background-color: rgba(255, 255, 255, 0.9);width: 100%;transition: all 0.2s linear;}
.prodbox .tbx p {color:#262830;font-size: 18px;font-weight: 500;}
.prodbox:hover .tbx {bottom: 0px;}

.section-service {background:#ededee}

.section-contact {background:#434962}
.section-contact p {color:#bcbcbc;}
.section-contact h2 {color:#dedede;text-shadow: 1px 1px 2px rgba(0,0,0,0.5);}
.section-contact h3 {color:#dedede;text-shadow: 1px 1px 2px rgba(0,0,0,0.5);}
.section-contact a {color:#bcbcbc;padding-bottom: 5px;}

.copybg  {background-color: rgb(38, 44, 68)}
.copy {font-size: 14px;font-weight:300;color:rgba(255,255,255,0.4);}