img, iframe {max-width: 100%; height: auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} body { font-family: 'Lato', sans-serif; font-size: 14px; background-color: #2a6aac; color: #6b7e8c; line-height: 1.5; text-align: center; min-width: 320px; } h1, h2, h3, h4, h5, h6, p, th, td, dd, dt, li, blockquote, .left { text-align: left; } body, header ul, nav ul, section ul, footer ul { padding: 0; margin: 0; } img, iframe { max-width: 100%;display:block;margin:0 auto } a img, iframe { border: none; } a, h1, h2, h3, nav .connect li a:hover { color: #2a6aac; text-decoration: none; } a:hover { text-decoration: underline; } header a:hover, nav a:hover, .cycle-slideshow a:hover, .featured a:hover, .solutions h3 a:hover, .banner a:hover, .products a:hover, .btn:hover, footer a:hover { text-decoration: none; } hr { border-width: 1px; border-color: #eee; border-style: none none solid; margin: 30px 0; } .products {margin-bottom:10%;} .hide { display: none } .table { display: table; width: 100%; } .table > div { display: table-cell; position: relative; vertical-align: top; } .table.half > div { width: 49%; } .table.half > div:nth-of-type(odd) { padding-right: 2%; } .table.half > div:nth-of-type(even) { padding-left: 2%; } .table.third > div { width: 32%; } .table.third > div:nth-of-type(1) { padding-right: 2%; } .table.third > div:nth-of-type(2) { padding-left: 1%; padding-right: 1% } .table.third > div:nth-of-type(3) { padding-left: 2%; } .grid{display:grid;grid-gap:10px 20px} .mid{align-content:center;align-items:center;vertical-align:middle} .nowrap { white-space: nowrap; } .imgRight, .imgLeft { max-width: 50%; border-radius: 3px; } .imgLeft { float: left; margin: 5px 4% 1% 1%; } .imgCenter { display: block; margin: 0 auto; } .imgRight { float: right; margin: 5px 1% 1% 4%; } .clear { clear: both; } .center { text-align: center; } .container { background-color: #fff; } .wrap {max-width: 1020px; margin: 0 auto; position: relative; } .bgimg{position:relative} .bgimg>img:first-of-type{position:absolute;width:100%;height:100%;left:0;right:0;top:0;bottom:0;object-fit:cover;z-index:0} .top { font-size: 0; } .top:after { content: ""; width: 50%; height: 42px; position: absolute; top: 46px; right: 0; background-color: #2a6aac;z-index:0 } nav ul, nav li, .featured a, .products a, .halfCol, .triCol, .quadCol { display: inline-block; vertical-align: top; } header { z-index:999;position:relative } header a{display:block} header .wrap{background-color: #fff;} header .grid{grid-template-columns:256px 1fr;grid-gap:10px 40px} nav { font-size: 12px; font-weight: bold; text-transform: uppercase;padding-bottom:40px} nav li{vertical-align:middle} nav .connect { font-size: 14px; text-transform: none; margin: 8px 0 7px; text-align: right; } nav .connect i{display:block;width:18px;height:14px} nav .connect li:nth-of-type(1), nav .connect li:nth-of-type(2) { padding-right: 10px; margin: 0 5px; border-right: 1px solid #6b7e8c; } nav .connect li:nth-of-type(2) { display: none; } nav .connect li a { color: #6b7e8c;margin:5px } nav .menu { background-color: #2a6aac;display:flex;justify-content:space-between;padding-left:20px } nav .menu li a { color: #fff; padding: 6px;margin:6px;display:block } nav .menu a:hover, .cycle-slideshow a:hover span, .featured a:hover h2, footer a:hover, #quick .btn:hover { color: #ddd; } .chat { position: relative; font-weight: bold; text-transform: uppercase; z-index: 999; } .chat a { position: fixed; top: 50%; right: 0; background-color: rgba(54,137,222,.95); color: #fff; padding: 15px 50px 15px 20px; box-shadow: -2px 2px 5px rgba(0,0,0,.3); animation: 2s chat-in } .chat a:hover { text-decoration: none; background-color: rgba(60,152,247,.95); transition: all .3s linear .01s; } .chat i { margin-right: 10px; } .cycle-slideshow { min-height: 375px; display: block; overflow: hidden; position: relative; } .cycle-slideshow a { height: 375px; display: block; color: #fff; background-position: 75% 50% } .cycle-slideshow .wrap { text-align: left; padding: 0 60px; } .cycle-slideshow h1, .cycle-slideshow p { max-width: 400px; text-shadow: 1px 1px 1px rgba(0,0,0,.8); } .cycle-slideshow h1 { font-size: 32px; color: #fff; margin: 0; padding-top: 100px; } .cycle-slideshow p { font-size: 20px; line-height: 110%; margin-bottom: 20px; } .cycle-slideshow .btn { font-size: 16px; text-transform: uppercase; color: #fff; padding: 15px 60px; border: 1px solid #fff; } .cycle-slideshow a:hover span, #quick .btn:hover { border: 1px solid #ddd; } .cycle-prev, .cycle-next { position: absolute; top: 0; width: 6%; opacity: .8; z-index: 800; height: 100%; cursor: pointer; display: none; } .cycle-prev { left: 0; background: url(/images-design/previous.png) 50% 50% no-repeat; } .cycle-next { right: 0; background: url(/images-design/next.png) 50% 50% no-repeat; } .cycle-prev:hover { background: url(/images-design/previous-hover.png) 50% 50% no-repeat; } .cycle-next:hover { background: url(/images-design/next-hover.png) 50% 50% no-repeat; } .cycle-slideshow > div { width: 100%; height: 100%; background-repeat: no-repeat; } .slide1 { background-image: url(/images-design/slides/1.jpg); background-size: cover; } .featured a { width: 32%; height: 200px; margin-top: 20px; margin-bottom: 20px; position: relative; background-size: cover } .featured h2 { font-size: 18px; text-align: center; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,.8); position: absolute; bottom: 0; text-align: center; width: 100%; } .featured .feat1 { background-image: url(/images-content/feat1.jpg); background-position: 47% 10%; } .featured .feat2 { background-image: url(/images-content/feat2.jpg); margin: 20px 1.5%; background-position: 70% 55% } .featured .feat3 { background-image: url(/images-content/feat3.jpg); background-position: 75% 100%; } .solutions, .news { margin: 30px 0; } .solutions li a, .news { font-size: 16px; } .solutions h2, .news h2 { font-size: 24px; text-align: center; } .solutions h2 span, .news h2 span { display: block; font-size: 16px; color: #6b7e8c; margin-top: 5px; } .solutions h2 span:before, .news h2 span:before { content: ""; position: absolute; left: 0; width: 100%; height: 1px; background-image: linear-gradient( to right, #eee, transparent, transparent, #eee ); } .solutions, .solutions h3 { color: #6b7e8c; } .solutions .table > div { background-color: #f7f7f7; color: #6b7e8c; padding: 40px 4% 60px !important } .solutions .table > div:nth-of-type(1) { border-right: 10px solid #fff } .solutions .table > div:nth-of-type(2) { border-left: 10px solid #fff } .solutions h3 { font-size: 20px; text-align: center; text-transform: uppercase; margin-top: 0; } .solutions ul { margin: 20px 0 40px; } .solutions li { list-style: none; margin: 0 0 15px 0; } .solutions li i { margin-right: 5px;display:inline-block;width:28px;height:16px } .solutions li a { font-weight: bold; display: block; margin-bottom: 5px; } .solutions .btn { color: #2a6aac; position: absolute; bottom: 30px; right: 40px; border: 1px solid #2a6aac; } .news table { padding: 20px 40px; border: 1px solid #ddd; } .news td:first-of-type { width: 32%; min-width: 220px; border-right: 1px solid #ddd; } .news td:last-of-type { padding-left: 40px; } .news h3 { color: #2a6aac; text-transform: uppercase; line-height: 140%; padding-right: 2%; } .news a:hover { text-decoration: none; } .news h3 span { display: block; font-weight: normal; text-transform: none; color: #6b7e8c; } .news .more { margin-top: 60px; } .banner { height: 350px; text-align: left; background-image: url(/images-design/banner.jpg); background-color: #222; background-position: center; background-repeat: no-repeat; padding: 0 1%; } .banner a { height: 350px; } .banner a:hover span { color: #ddd; border: 1px solid #ddd; } .banner p, .banner strong, .banner span, footer .best { color: #fff; } .banner strong, .banner p { max-width: 310px; } .banner strong { display: block; font-size: 24px; margin-top: 0; padding-top: 80px; } .banner p { font-size: 16px; margin-bottom: 30px; } .banner .btn { border: 1px solid #fff; } section h1 { margin-bottom: 40px; } section { padding: 20px 1% 40px } .pad{padding-left:1%;padding-right:1%} section h1:after { content: ""; display: block; width: 100%; height: 1px; background-image: linear-gradient( to right, transparent, #eee, #ddd ); } section h2, section h3 { margin-top: 25px; } section li { margin: 0 0 5px 20px; } h1 { font-size: 24px; } h2 { font-size: 18px; } h3 { font-size: 16px; } .halfCol { width: 49%; } .triCol { width: 33%; } .quadCol { width: 24%; } .btn { display: inline-block; text-transform: uppercase; color: #2a6aac; padding: 10px 50px; margin-top: 10px; border: 1px solid #2a6aac; } .btn:hover, .solutions h3 a:hover, .products a:hover h2 { color: #3484d6; } .btn:hover { cursor: pointer; border: 1px solid #3484d6; } .btn:hover, form input[type=submit]:hover { cursor: pointer; } .products a { width: 47%; color: #6b7e8c; margin-top: 20px; margin-bottom: 20px; } .products a:nth-of-type(odd) { margin-right: 2%; } .products a:nth-of-type(even) { margin-left: 2%; } .products h2 { padding-bottom: 10px; margin: 10px 0; border-bottom: 1px solid #eee; } .products p { margin-top: 0; } iframe.map { width: 100%; height: 495px; margin-top: 14px; } iframe.zultys { width: 100%; height: 572px; } iframe.ctap { width: 534px; height: 300px; } form { margin: 20px 0 0; } form input[type=text], form input[type=email], form input[type=tel], form input[type=submit], form textarea { font-family: 'Lato', sans-serif; font-size: 14px; display: block } form input[type=text], form input[type=email], form input[type=tel], form textarea { width: calc(100% - 22px); padding: 10px; margin-bottom: 15px; border: 1px solid #eee; } input[type=submit] { width: 100%; padding: 10px; text-align: center; } form textarea { height: 65px; padding-top: 10px; } form .btn { background-color: #fff; border: 1px solid #2a6aac; } form dd { padding-bottom: 20px } #quick { text-align: right; } #quick .btn { color: #fff; background-color: #2a6aac; border: 1px solid #fff; } #contact { text-align: left; } footer, footer a { color: #fff; } footer .wrap { padding: 40px 0; } footer strong { font-size: 16px; } footer .quadCol:first-of-type { text-align: left; } footer li { list-style: none; line-height: 190%; margin: 0; } footer hr { border: none; border-bottom: 1px solid #3079c4; } footer .halfCol:last-of-type p { text-align: right; } .a8bmark img{margin-right:0} .company .table.half, .company .table.half > div { display: block; width: auto } .company a.map { height: 100px; width: 92%;object-position: 70% 40%;display:block;object-fit:cover } .company a.map span { position: absolute; bottom: -20px } form label { text-align: left; display: block; } form select { text-align: left; display: block; margin-bottom: 15px; font-family: 'Lato', sans-serif; font-size: 14px; } .tri-ed ul { padding-left: 30px } .bestit h2 { clear: both } section > h1 { background-color: #fff; z-index: 999; position: relative } section h1:after { z-index: 888 } .bestit a { width: 250px } .define:hover { cursor: pointer } .define { text-decoration: underline #2A6AAC } div.news h6.pr { display: none; } div.news div.table.half div p.more { margin-left: 25%; } .subnav { margin-bottom: 40px; } .videohalf { width: 480px; height: 270px; } .margintop{margin-top: 20px;} @media(max-width:999px) { .top:after { display: none; } nav .menu ul:last-child li:last-child { margin-right: 4px; } } @media(max-width:767px) { .chat { display: none; } nav .connect li:nth-of-type(2) { display: inline-block; } } @media(max-width:700px) { header .grid{grid-template-columns:1fr} nav .connect{text-align:center} header{padding-top:10px} nav{padding-bottom:0} nav .menu{padding-left:0;} nav .menu ul:first-of-type{width:100%;display:flex;justify-content:space-evenly} } @media(max-width:600px) { nav .connect { text-align: center; margin: 12px 0 } footer .wrap, section,.pad { padding-left: 2%; padding-right: 2%; } footer .wrap{ padding-top: 20px; padding-bottom: 20px; } footer .quadCol { display: block; width: auto; margin-bottom: 30px } .footnav { text-align: left; } .footnav li { display: inline-block; width: 32% } .footnav a { display: block; } .featured a { display: block; height: 225px; width: auto; margin: 20px 0 !important; } .featured h2 { font-size: 26px } .table.half, .table.half > div { display: block; width: auto; padding: 0; margin: 12px 0 } .solutions .table > div { border: none !important; margin: 20px 0 } .news table, .news td { display: block; width: auto !important; border: none !important; padding: 0 2% !important } .news .more { margin-top: 1em } .cycle-slideshow .wrap, .banner .wrap { padding: 0 2%; top: 50%; transform: translateY(-50%) } .cycle-slideshow h1 { padding-top: 0; } .company .table.half { display: table; width: 100%; } .company .table.half > div { display: table-cell; width: 49% } iframe.map { height: 300px } .company a.map { height: 125px; } .company a.map span { bottom: 0; } .banner h2 { padding-top: 0; } .banner { height: 250px; background-position: 73% 0; } .banner h2, .banner p,.banner strong { text-shadow: 0 0 4px #000,0 0 20px #000 } .products a { width: 100%; margin: 12px auto !important; } .solutions .btn{left:50%;transform:translateX(-50%);right:unset} div.news div.table.half div p.more{margin:1em auto;text-align:center} } @media(max-width:500px) { h1 ~ .imgRight, .bestit a { float: none; max-width: 100%; margin: 12px 0 } .bestit { padding: 0; margin: 0; list-style-type: none } .bestit li { margin: 5px 0 } .bestit a { display: block; width: auto } .featured .bgimg>img:first-of-type{height:225px} } @media(max-width:400px) { .cycle-slideshow h1 { font-size: 28px } .cycle-slideshow .wrap, .cycle-slideshow p, .cycle-slideshow h1 { text-align: center; } .banner h2, .banner p,.banner strong { max-width: none; text-align: center; } footer .halfCol p{text-align: center !important} .company p strong span { display: block; } .company a.map span { bottom: 12px; } .footnav li { width: 49%; } footer .halfCol{display:block;width:auto} nav ul{display:block} nav .connect li{border:none !important;text-align:center;padding:0 !important;margin:0 !important} nav .connect li:first-of-type,nav .menu ul,nav .menu{display:block !important} nav .menu li{display:inline-block;width:49%;text-align:center} .a8bmark img{margin:0 auto} }