img, iframe {max-width: 100%; height: auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} body { min-width: 320px; font-family: 'Droid Sans', sans-serif; font-size: 14px; background-color: #323232; color: #606060; line-height: 1.5; text-align: center; } h1, .subnav, .cycle-slideshow, .featured h2, .content h2, aside h3, aside ul, footer h2 { font-family: 'Oswald', calibri, sans-serif; font-weight: normal; } h1 { text-transform: uppercase; color: #004265; } h2, h3, h4, h5, h6, .subnav li a { color: #323232; } h1, h2, h3, h4, h5, h6, p, th, td, dd, dt, li, blockquote { text-align: left; } body, nav ul, section ul, section ol { padding: 0; margin: 0; } img, iframe { max-width: 100%; height: auto; } a img, iframe { border: none; } a, .content a:hover, aside li a:hover, .pr a:hover { text-decoration: none; color: #c00020; } a:hover, .subnav a:hover { color: #004265; } hr { border-width: 1px; border-color: #fff; border-style: none none solid; margin: 20px 0; } .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:before { content: ""; width: 30%; height: 4px; display: block; position: absolute; top: 131px; left: 0; background-image: linear-gradient( to right, #014262 100%, transparent ); } .container, .container > .wrap { background-color: #fff; } .top { text-align: left; } .wrap { max-width: 1080px; display: block; margin: 0 auto; position: relative; } nav p, nav ul, nav li, .featured a, section, aside, .halfCol, .triCol, form div, footer ul { display: inline-block; vertical-align: top; } header, .subnav, .subfoot .halfCol, .subnav li { display: inline-block; vertical-align: middle; } .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%; } .grid { display: grid; grid-gap: 20px; } .mid { align-items: center; } .grid.half { grid-template-columns: repeat(2,1fr); } .grid.third, .grid.featured { grid-template-columns: repeat(3,1fr); } .grid.fourth { grid-template-columns: repeat(4,1fr); } .grid.fifth { grid-template-columns: repeat(5,1fr); } .nowrap { white-space: nowrap } .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 } nav { font-weight: bold; text-transform: uppercase; background-color: #c00020; } nav, nav a { color: #fff; } nav ul { width: calc(100% - 274px); padding-top: 5px; } nav p { margin: 0; width: 270px } nav ul { text-align: right; } nav li:first-of-type a { text-align: left; } nav a { padding: 10px; display: block; } nav a:hover, footer a:hover, .press a:hover { color: #ddd; } header { width: 250px; text-align: left; } header img { display: block; } .tel { font-size: 21px; } .subnav { width: calc(100% - 255px); font-size: 16px; text-align: right; } .subnav ul { margin: 20px 0; padding: 0 } .subnav a { padding: 5px 10px; display: block; margin: 5px } .cycle-slideshow { height: 500px; text-align: center; position: relative; overflow: hidden; } .cycle-slideshow .wrap { position: relative; top: 50%; transform: translateY(-50%); } .cycle-slideshow a { display: block; width: 100%; height: 100%; margin: 0 auto; position: relative; text-decoration: none; background-size: cover; background-position: center; } .cycle-slideshow h1, .cycle-slideshow p { max-width: 900px; font-weight: 400; line-height: 160%; color: #fff; text-align: center; margin: 0 auto; text-shadow: 1px 1px 1px #000; } .cycle-slideshow h1 { font-size: 34px; padding-bottom: 20px; } .cycle-slideshow p { font-size: 24px; } .cycle-prev, .cycle-next { position: absolute; top: 0; width: 40px; z-index: 999; height: 100%; cursor: pointer; background-position: 50% 50%; background-repeat: no-repeat; opacity: .2; } .cycle-prev { left: 0; background-image: url(/images-design/arrow-prev.png); } .cycle-next { right: 0; background-image: url(/images-design/arrow-next.png); } .cycle-prev:hover, .cycle-next:hover { opacity: .6; } .slide1 { background-image: url(/images-design/slides/1.jpg); } .slide2 { background-image: url(/images-design/slides/2.jpg); } .slide3 { background-image: url(/images-design/slides/3.jpg); } .banner { height: 300px; background-size: cover; background-position: center; } .about { background-image: url(/images-design/banners/about.jpg); } .services { background-image: url(/images-design/banners/services.jpg); } .technology { background-image: url(/images-design/banners/technology.jpg); } .relationship { background-image: url(/images-design/banners/relationship.jpg); } .cabling { background-image: url(/images-design/banners/cabling.jpg); } .phone { background-image: url(/images-design/banners/phone.jpg); } .managed { background-image: url(/images-design/banners/managed.jpg); } .video { background-image: url(/images-design/banners/video.jpg); } .philosophy { background-image: url(/images-design/banners/philosophy.jpg); } .national { background-image: url(/images-design/banners/national.jpg); } .refresh { background-image: url(/images-design/banners/refresh.jpg); } .news { background-image: url(/images-design/banners/news.jpg); } .contact { background-image: url(/images-design/banners/contact.jpg); } .featured { overflow: hidden } .featured ul { display: flex; flex-wrap: wrap; list-style: none; margin: 20px -4px } .featured li { flex: 1 0 208px; text-align: center; padding-bottom: 50px; position: relative; margin: 1em 4px } .featured a { display: block; text-align: center; } .featured i { font-size: 90px; color: #888; width: 116px; height: 90px; display: block; margin: 0 auto } .featured h2, .featured p { text-align: center; } .featured h2 { font-size: 17.5px; text-transform: uppercase; } .featured p { color: #606060; padding: 0 5px } .featured a > span { display: block; text-align: center; font-weight: bold; background-color: #004265; color: #fff; padding: 10px 0; position: absolute; bottom: 0; width: 100% } .featured a:hover > span { background-color: #c00020; } .content { background-color: #fafafa; margin-top: 20px } .content .table.half { padding: 40px 10px; width: calc(100% - 20px) } .content h2 { font-size: 24px; margin-bottom: 30px; } .content p { margin: 10px 0; } .articles h3 a { font-size: 14px; color: #323232; } .articles p a:last-of-type, .articles .posttags, .articles .postcats { display: none; } section { width: calc(70% - 10px); min-height: 500px; margin: 40px 0; padding: 0 3% 0 10px; border-right: 1px solid #eee; } section h1 { margin-bottom: 30px; } section h2 { font-size: 16px; margin-top: 25px; } section li { margin: 0 0 5px 20px; } .nolist li { list-style: none; margin: 0 0 10px; } .nolist li i { margin-right: 10px; } .halfCol { width: 46%; } .halfCol:first-of-type { margin-right: 3.7%; } .halfCol:last-of-type { margin-left: 3.7%; } .triCol { width: 31%; } .triCol:nth-of-type(2) { margin: 0 3%; } .map { width: 65%; height: 280px; float: right; } .pr h2 { display: none; } .pr a { color: #606060; padding-left: 5px; } .icon.fa { font-size: 50px; color: #888; padding: 22px 15px; border: 1px solid #888; border-radius: 100px; } .certifications td { vertical-align: middle; padding: 10px 0; } .certifications td:first-of-type { width: 75%; padding-right: 20px; } .certifications h2 { margin-top: 10px; } .certifications img { display: block; margin: 0 auto; } .nolist li { list-style: none; margin: 0 0 5px; } .nolist .fa-check-square-o { font-size: 20px; vertical-align: middle; color: #c00020; } .post:last-of-type { border: none; } aside { width: calc(23% - 20px); margin: 40px 0 40px 3%; padding: 0 10px; } aside h3 { font-size: 18px; color: #004265; } aside ul { font-size: 16px; padding: 0; list-style-type: none } aside li a { display: block; color: #323232; padding: 8px 0; } form { text-align: left; margin: 25px 0; } form div { width: 48%; } form div:first-of-type { margin-right: 1%; } form div:last-of-type { margin-left: 1%; } input[type=text], form input[type=email], form input[type=tel], form input[type=submit], form input[type=checkbox], form select, form textarea { font-family: 'Droid Sans', sans-serif; font-size: 14px; color: #606060; } form input[type=text], form input[type=email], form input[type=tel], [type=checkbox], form select, form textarea { background-color: #fafafa; padding: 0 20px; margin-bottom: 15px; border: none; } form input[type=text], form input[type=email], form input[type=tel], form textarea { width: calc(100% - 40px); } form input[type=text], form input[type=email], form input[type=tel], form select { height: 40px; } form select { width: calc(100%); } form input[type=text], form input[type=email], form input[type=tel], form textarea { width: calc(100% - 40px); } form textarea { height: 150px; padding: 15px 20px; } form input[type=submit] { width: 33%; min-width: 150px; font-weight: bold; background-color: #c00020; color: #fff; padding: 12px 0; border: none; } form input[type=submit]:hover { cursor: pointer; background-color: #004265; color: #fff; } #survey textarea { height: 100px; } #subscribe input[type=email], #subscribe input[type=submit] { display: inline-block; } #subscribe input[type=email] { width: calc(65% - 40px); margin-right: 1%; border: 1px solid #fafafa; } footer, footer h2, footer a, .subfoot, .press a { color: #fff; } .subfoot { padding: 0 10px } .subfoot p { display: block; text-align: center; } footer .grid { grid-template-columns: 1fr 1fr 1fr } .a8bmark img { margin: 0 0 0 auto } footer .wrap { padding: 20px 10px 30px; } .last, .last li { text-align: right; } .last h2 { display: inline-block } footer h2 { font-size: 18px; padding-bottom: 10px; } footer ul { width: 49%; padding: 0; } footer li { list-style: none; margin: 0 0 10px; } footer .social li { padding-left: 30px; position: relative } footer .social li:first-of-type { padding-left: 0 } footer i { background-color: #fff; color: #323232; padding: 4px 2px; margin-right: 10px; border-radius: 3px; display: block; width: 18px; height: 14px; position: absolute; left: 0 } .press h4 { display: none; } .press .pr { width: auto; } .press .pr a { color: #fff; } @media(max-width:999px) { .subnav { display: block; width: auto; text-align: center } .top { text-align: center; padding-bottom: 10px; } header { width: auto; } header:before { content: ""; width: calc(50% - 125px); height: 4px; display: block; position: absolute; top: 90px; left: 0; background-image: linear-gradient( to right, #014262 100%, transparent ); } .container:before { display: none } .subnav a { margin: 8px } .main section { margin-top: 20px } .banner { height: 200px } } @media(max-width:700px) { aside, section { display: block; width: auto; margin: 0; } section { min-height: 0 } aside { padding: 20px 10px } aside ul { list-style-type: disc; padding-left: 40px } .grid.fourth { grid-template-columns: repeat(2,1fr); } .cycle-slideshow p, .cycle-slideshow h1 { padding: 0 50px 20px } footer .halfCol { display: block !important; width: auto; margin: 0 !important } footer ul:nth-of-type(even) li { text-align: right } .a8bmark img { margin: 0 auto } } @media(max-width:600px) { nav p, nav ul { display: block; width: auto; text-align: center } .grid.half,.grid.third{grid-template-columns:1fr} footer .grid { grid-template-columns: 1fr } } @media(max-width:500px) { .subnav ul { display: grid; grid-template-columns: 1fr 1fr; align-items: center } .subnav a { text-align: center } footer h2 { text-align: center } footer .first ul { display: inline } footer .first li { display: inline-block; text-align: center; margin: 6px; padding: 6px } footer ul li:first-of-type { display: block; margin-left: 0 } footer .mobhide { display: none !important } footer .second ul { display: block; width: 240px; text-align: center; margin: 40px auto 0 } footer .social li { margin: 12px 0 12px 12px } .subfoot { padding-top: 20px } footer .last li { text-align: center !important } .social li:first-of-type, .last h3 { display: block; width: auto; } .table.half, .table.half > div, .halfCol { display: block; width: auto; margin: 12px 0 !important } .banner { height: 150px } .map { width: 50% } } @media(max-width:400px) { .cycle-next, .cycle-prev { display: none; } .cycle-slideshow h1, .cycle-slideshow p { padding-left: 10px; padding-right: 10px } nav li:first-of-type { display: none; } }