img, iframe {max-width: 100%; height: auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} html, body { -webkit-text-size-adjust: 100%; text-size-adjust: 100% } body { font-family: 'Open Sans', sans-serif; font-size: 14px; color: #4d4d4d; line-height: 1.5; text-align: center; } h1, h2, h3, h4, h5, h6, p, th, td, dd, dt, li, blockquote { text-align: left; } h1, h2, h3, h4, h5, h6 { line-height: 1.2; } body, .top ul, header ul, nav ul, section ul, section ol { padding: 0; margin: 0; } img, iframe { max-width: 100%; height:auto; } a img, iframe { border: none; } a, a:hover, .featured p { transition: ease-in-out .3s; } a, .contact a:hover, .blue { text-decoration: none; color: #5064ad; } a:hover, .top a:hover, .featured a:hover p { color: #ff9a00; } hr { border: none; border-bottom: 1px solid #eee; margin: 20px 0; } .imgLeft, .imgRight { max-width: 45%; } .imgLeft { float: left; margin: 5px 4% 1% 1%; } .imgCenter { display: block; margin: 0 auto; } .imgRight { float: right; margin: 5px 1% 1% 4%; } .textalign { text-align: right; } .clear { clear: both; } .center { text-align: center; } .nowrap { white-space: nowrap; } .hide { display: none !important; } .wrap { max-width: 1020px; display: block; margin: 0 auto; position: relative; } .flex { display: flex; flex-wrap: wrap; } .flex > * { flex: 1 } .mid { align-self: center; align-items: center;vertical-align:middle } .grid { display: grid; grid-gap: 10px; } .grid.half { grid-template-columns: repeat(2,1fr); } .grid.third { grid-template-columns: repeat(3,1fr); } .grid.fourth { grid-template-columns: repeat(4,1fr); } .span2 { grid-column: span 2; } header li, .cta h3, .cta a, .contact a { display: inline-block; vertical-align: middle; } .top li, nav li, .halfCol, .triCol { display: inline-block; vertical-align: top; } h1, h2, h3, h4 { font-weight: 800; } .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: 1%; } .table.half > div:nth-of-type(even) { padding-left: 1%; } .table.third > div { width: 32%; } .table.third > div:nth-of-type(1) { padding-right: 1%; } .table.third > div:nth-of-type(2) { padding-left: .5%; padding-right: .5% } .table.third > div:nth-of-type(3) { padding-left: 1%; } .table.four > div { width: 23%; padding: 0 1%; } .top, .top a { color: #fff; } .top, nav { text-align: right; } .top { font-weight: bold; background-color: #5064ad; padding: 5px 0; } .top li a, nav li a { display: block; margin: 5px 0; } .top li a { border-right: 1px solid #fff; } .top li:last-of-type a, nav li:last-of-type a { border-right: none; } header a { padding: 0 10px; } header .grid { padding: 15px 0;grid-template-columns: 128px 1fr } header .grid > a:first-of-type { text-align: left; } nav { font-weight: bold; text-transform: uppercase; } nav a { color: #4d4d4d; } nav li a { border-right: 1px solid #4d4d4d; } .pagetitle { height: 200px; background-image: url(/images-content/banner.jpg); } .pagetitle h1, .hero .wrap { position: relative; top: 50%; transform: translateY(-50%); } .pagetitle h1 { font-size: 30px; margin: 0; } .hero, .featured a, .about { background-size: cover; background-position: center; } .hero { height: 550px; background-image: url(/images-content/main.jpg); } .hero h1, .hero p, .pagetitle h1 { text-align: center; color: #fff; padding: 0 10px; text-shadow: 2px 2px 4px #000; } .hero h1 { font-size: 30px; margin: 0; } .hero p { font-size: 18px; font-weight: 800; margin-bottom: 40px; } .hero .btn { font-weight: 600; } section { padding: 40px 10px; } section h1 { font-size: 20px; } section h2, section h3, section h4 { color: #4d94d0; } section h2 { font-size: 21px; } section h3 { font-size: 18px; } section h4 { font-size: 16px; } section ul, ol { padding-left: 25px; } section li { margin: 5px 0; } .halfCol { width: 49%; } .triCol { width: 33%; } .btn { display: inline-block; background-color: #ff9a00; color: #fff; padding: 10px 60px; margin-top: 10px; border-radius: 3px; } .btn:hover { cursor: pointer; background-color: #4d94d0; color: #fff; } .map { width: 700px; height: 300px; } .phone { margin-bottom: 40px; } .pressReleases { list-style: none; padding-left: 0; } .featured { margin: 50px 0; padding: 0 10px; } .featured a { min-height: 150px; } .featured h2, .featured p { text-align: center; color: #fff; margin: 0; text-shadow: 1px 1px 2px #000; position: relative; top: 40%; transform: translateY(-40%); } .featured h2 { font-size: 24px; } .feat1 { background-image: url(/images-content/feat1.jpg); } .feat2 { background-image: url(/images-content/feat2.jpg); } .feat3 { background-image: url(/images-content/feat3.jpg); } .feat4 { background-image: url(/images-content/feat4.jpg); } .cta { background-color: #5064ad; padding: 10px 0; } .cta h2, .cta a { font-size: 18px; margin: 10px; } .cta h2 { line-height: 140%; color: #fff; } .cta a { font-weight: 600; text-transform: uppercase; background-color: #fff; color: #4d4d4d; padding: 18px 0; } .about { min-height: 550px; background-image: linear-gradient(to right,rgba(0,0,0,.3) 50%,transparent 50%), url(/images-content/about.jpg); } .about .grid > div { position: relative; top: 40%; } .about h2, .about h3, .about p, .contact h2, .contact h3 { color: #fff; } .about h2, .about h3, .contact h2, .contact h3, .about p a { text-shadow: 1px 1px 2px #000; } .about h2, .about h3, .contact h2, .contact h3 { text-align: center; } .about h2, .about p { margin: 0 auto; padding: 10px; } .about h2, .contact h2 { font-size: 30px; margin: 0; } .about .btn { width: 125px; font-weight: 600; position: absolute; bottom: -60px; left: 50%; transform: translateX(-50%); } .about p { max-width: 420px; line-height: 160%; text-align: justify; } .cycle-slideshow { max-width: 100%; min-height: 420px; margin: 40px 10px; } .cycle-slideshow a { position: relative; overflow: hidden; } .cycle-slideshow h2, .cycle-slideshow h3 { text-align: center; color: #5064ad; } .cycle-slideshow h2 { font-size: 30px; margin: 0; } .cycle-slideshow p { color: #4d4d4d; } .cycle-prev, .cycle-next { position: absolute; top: 0; width: 5%; z-index: 999; height: 100%; cursor: pointer; background-position: 50% 50%; background-repeat: no-repeat; opacity: .1; } .cycle-prev { left: -6%; background-image: url(/images-design/arrow-prev.png); } .cycle-next { right: -6%; background-image: url(/images-design/arrow-next.png); } .cycle-prev:hover, .cycle-next:hover { opacity: .3; } form { margin: 20px 0; } form input[type=text], form input[type=email], form input[type=tel], form input[type=submit], form textarea { font-family: 'Open Sans', sans-serif; font-size: 14px; } form input[type=text], form input[type=email], form input[type=tel], form textarea { width: calc(100% - 22px); padding: 0 10px; margin-bottom: 15px; border: 1px solid #ddd; } form input[type=text], form input[type=email], form input[type=tel] { height: 36px; } form textarea { height: 90px; padding: 10px; } form input[type=submit] { background-color: #5064ad; color: #fff; padding: 10px 60px; border: none; border-radius: 3px; } form input[type=submit]:hover { cursor: pointer; background-color: #ff9a00; color: #fff; } #contact { text-align: left; } footer .contact, footer .contact a { color: #fff; } footer .contact { background-color: #ff9a00; padding: 150px 0; } footer .contact .triCol { margin-top: 80px; } footer .contact span { display: block; font-size: 16px; font-weight: 600; margin: 20px; } footer .contact .grid { margin-top: 80px; } footer .grid.half { font-size: 13px; font-weight: 600; vertical-align: middle; margin: 20px 0; padding: 0 10px; } footer .grid.half ul { list-style: none; padding: 0; } footer .grid.half > div:last-of-type p { text-align: right; } .team { padding: 40px 0; } .team p { text-align: center; } .team strong { display: block; } .productlist {margin:0; padding:0;} .productlist li {list-style-type: none;} @media(max-width:999px) { } @media(max-width:767px) { .cycle-slideshow .grid { grid-template-columns: repeat(1,1fr); grid-gap: 10px 0; } .about .grid > div { top: 20%; } } @media(max-width:600px) { header .grid, .cta .grid, .about .grid { grid-template-columns: 1fr !important; grid-gap: 10px 0; } header .grid > a:first-of-type, .top, nav, .cta h2 { text-align: center; } .grid.third, .grid.fourth { grid-template-columns: repeat(2,1fr); } .about { background-image: url(/images-content/about.jpg); } .about .grid > div, .about .btn { position: unset; } .about .grid > div { padding: 20px 0; } .about .btn { left: unset; bottom: unset; transform: unset; } } @media(max-width:500px) { .imgLeft, .imgRight { max-width: 100%; float: none; margin: 10px auto; } } @media(max-width:400px) { .grid.half, .grid.third, .grid.fourth { grid-template-columns: repeat(1,1fr); grid-gap: 10px 0; } .about { padding-bottom: 20px; } footer .contact { padding: 50px 0; } form input[type=submit] { width: 100%; } footer * { text-align: center !important; } }