@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');

body {font-family: 'Open Sans', sans-serif; font-size: 14px; color: #848484; line-height: 28px; font-weight: 400;}
* {margin: 0; padding: 0; box-sizing: border-box;}
.container {display: block; margin: 0 auto; width: 92%;}
.container::after {display: block; clear: both; content: '';}
.txtC {text-align: center;}

.topNav {display: block; width: 100%; position: fixed; top: 0; left: 0; padding: 10px 0; z-index: 1; background: rgba(226,226,226, 0); transition: all ease-in-out .2s;}
.topNav .logo {float: left;}
.topNav .logo img {transition: all ease-in-out .2s; height: 50px; float: left;}
.topNav nav {float: right; width: calc(100% - 108px - 4px); text-align: right;}
.topNav nav ul {display: block;}
.topNav nav ul li {display: inline-block; margin: 0 2%;}
.topNav nav ul li a {display: block; line-height: 50px; color: rgba(255,255,255,.7); text-decoration: none;}

header.home {display: block; width: 100%; height: 680px; background: url(../images/homeBanner.jpg) center no-repeat; background-size: cover; position: relative;}
header.home::before {content: ''; display: block; width: 100%; height: 100%; background: rgba(0,0,0,.6);}
header.home .container {position: absolute; top: 50%; left: 50%; transform: translate(-50%, calc(-50% + 50px)); text-align: center; color: #fff;}
header.home .container h1 {font-weight: 300; font-size: 46px; text-transform: uppercase; letter-spacing: 10px; margin: 0 0 56px;}
header.home .container p {font-weight: 300; font-size: 14px; letter-spacing: 4px; margin: 0 0 46px;}
header.home .container .btnBan {display: inline-block; line-height: 32px; color: #fff; text-decoration: none; padding: 0 20px; border: 1px solid #fff; border-radius: 16px;}
header.home .scrollIcon {display: inline-block; width: 28px; height: 50px; border: 1px solid #fff; position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); border-radius: 12px;}
header.home .scrollIcon::before {content: ''; display: block; width: 2px; height: 6px; position: absolute; left: 50%; transform: translateX(-50%); background: #fff;
    animation-name: scrollanim;
    animation-duration: 1s;
    animation-iteration-count: infinite;}

@keyframes scrollanim {
    0%   {top: 4px; opacity: 0;}
    50%  {top: calc(60px / 2 - 4px); opacity: 1;}
    100% {top: calc(60px / 2 - 2px ); opacity: 0;}
}

.hIntro {display: block; padding: 44px 0;}
.hIntro h2 {font-weight: 400; font-size: 32px; text-transform: uppercase; margin: 0 0 32px; text-align: center; color: rgba(50, 58, 69, 0.95);}
.hIntro .col2 {}
.hIntro .col2 ul {display: block;}
.hIntro .col2 ul li {display: inline-block; vertical-align: top; width: calc(50% - 4px); margin: 0 0 40px;}
.hIntro .col2 ul li:nth-child(2n+1) {padding-right: 20px;}
.hIntro .col2 ul li:nth-child(2n) {padding-left: 20px;}
.hIntro .col2 ul li .icon {display: inline-block; width: calc(20% - 4px); vertical-align: top;}
.hIntro .col2 ul li .icon img {max-width: 80%;}
.hIntro .col2 ul li .desc {display: inline-block; width: calc(100% - 20% - 4px); vertical-align: top;}
.hIntro .col2 ul li .desc strong {display: block; margin: 0 0 10px; font-weight: 600; font-size: 18px;}

.solutions {display: table; width: 100%; background: #3d444f;}
.solutions .leftbox {display: table-cell; width: 30%; color: rgba(255,255,255,.7); padding: 0 2% 0 4%; vertical-align: top;}
.solutions .leftbox h3 {margin: 40px 0 10px; font-weight: 600; font-size: 18px;}
.solutions .rightbox {display: table-cell; width: 70%;}
.solutions .rightbox .tbl {display: table; width: 100%;}
.solutions .rightbox .tbl .row {display: table-row;}
.solutions .rightbox .tbl .row .col {display: table-cell; border: 1px solid #fff; position: relative; cursor: pointer;}
.solutions .rightbox .tbl .row .col img {width: 100%; float: left;}
.solutions .rightbox .tbl .row .col::before {content: ''; display: block; width: calc(100% - 4px); height: calc(100% - 4px); position: absolute; top: 0; left: 0; border: 2px solid #fff; opacity: 0; transition: all ease-in-out .2s;}
.solutions .rightbox .tbl .row .col:hover::before {width: calc(100% - 40px); height: calc(100% - 40px); top: 20px; left: 20px; opacity: 1; transform: .2s;}

.brands {display: block; padding: 32px 0;}
.brands h2 { font-weight: 400; font-size: 32px; text-transform: uppercase; margin: 0 0 32px; text-align: center; color: rgba(50, 58, 69, 0.95);}

.leavemess {display: block; background: #3d444f; color: #fff; padding: 46px 0;}
.leavemess h2 { font-weight: 400; font-size: 32px; text-transform: uppercase; margin: 0 0 46px; text-align: center;}
.leavemess .leftbox {display: inline-block; width: calc(50% - 4px); vertical-align: top; padding-right: 4%;}
.leavemess .leftbox .form {display: block;}
.leavemess .leftbox .form ul {display: block;}
.leavemess .leftbox .form ul li {display: block; margin: 0 0 12px;}
.leavemess .leftbox .form ul li input[type=text] {display: block; height: 44px; border: 1px solid rgba(255,255,255,.4); background: none; width: 100%; padding: 0 10px; color: rgba(255,255,255,.4); font-size: 14px; font-weight: 300; font-family: 'Open Sans', sans-serif;}
.leavemess .leftbox .form ul li input[type=submit] {display: inline-block; height: 38px; border: 1px solid rgba(255,255,255,.4); background: none; padding: 0 20px; color: #fff; border-radius: 19px; font-size: 14px; font-weight: 400; font-family: 'Open Sans', sans-serif; cursor: pointer;}
.leavemess .rightbox {display: inline-block; width: calc(50% - 4px); vertical-align: top; padding-left: 4%; text-align: right;}
.leavemess .rightbox h3 {margin: 0px 0 32px; font-weight: 400; font-size: 32px; text-transform: uppercase;}
.leavemess .rightbox p {margin: 0px 0 32px; font-weight: 400; font-size: 22px; color: #8F8F8F;}

footer {display: block; padding: 32px 0;}
footer .tbl {display: table; width: 100%;}
footer .tbl .col4 {display: table-cell; width: 25%; padding-right: 20px; font-size: 12px; line-height: 18px;}
footer .tbl .col4 h4 {font-size: 16px; text-transform: uppercase; font-weight: 600; margin: 0 0 10px;}

.topNav.fix .logo img {height: 40px;}
.topNav.fix {background: rgba(226,226,226, 1);}
.topNav.fix nav ul li a {line-height: 40px; color: rgba(15,90,136,1);}