img, iframe {max-width: 100%; height: auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; } audio:not([controls]) { display: none; } [hidden] { display: none; } html { font-size: 100%; overflow-y: scroll; } body { background-color: #512863; margin: 0; font-size: 16px; font-family: Verdana,Geneva,sans-serif; text-align: center; min-width: 320px; line-height: 1.5 } body, .latest .post h3 a { color: #636763; } .bg { background-color: #fff; background-image: linear-gradient(#fdfdfd,#ebebee,#dadae0,#dadae0,#ebebee, #fdfdfd,#fff,#fff); } p, h1, h2, h3, h4, h5, h6, li, td, dt, dd, address, #feed { text-align: left; } img, iframe, video { max-width: 100%; height: auto } iframe { border: none; display: block; aspect-ratio: auto 16 / 9; width: 100% } .video { aspect-ratio: auto 16 / 9; width: 100% } body, button, input, select, textarea { font-family: Verdana,Geneva,sans-serif; } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } a { color: #52aa8c; } h1 { font-size: 1.75em; } h2 { font-size: 1.5em } h3 { font-size: 1.1875em } h4 { font-size: 1.0em } h5 { font-size: 0.875em } h6 { font-size: 0.6875em } header a { display: block; padding: 10px 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } blockquote { margin: 1em 40px; } dfn { font-style: italic; } mark { background: #ff0; color: #000; } pre, code, kbd, samp { font-family: monospace,serif; font-size: 1em; } pre { white-space: pre; white-space: pre-wrap; } q { quotes: none; } q:before, q:after { content: ''; content: none; } small { font-size: 75%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } ul, ol { margin-left: 0; padding: 0 0 0 40px; } dd { margin: 0 0 0 40px; } nav ul, nav ol { list-style: none; list-style-image: none; } section li, footer li { margin: 6px 0 } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 0; } form { margin: 0; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; margin-left: -7px; } button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; vertical-align: middle; } button, input[type=submit] { border: none; border-radius: 3px; box-shadow: rgba(0,0,0,0.2) 0 1px 0 0; color: #636763; font-weight: bold; height: 25px; line-height: 25px; cursor: pointer; overflow: visible; text-transform: uppercase; width: 100px; } button:hover, input[type=submit]:hover { color: #ffffff; } textarea { overflow: auto; vertical-align: top; height: 50px; } table { border-collapse: collapse; border-spacing: 0; } hr { border: 0; height: 0; margin: 20px 0; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.3); } h1:after { content: ' '; display: block; border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding-bottom: 20px; } h2 a { text-decoration: none; color: #636763; } h2 a:hover { color: #6B427D; } .table{ display: table; width: 100%; table-layout: fixed } .table.pad { width: calc(100% - 32px) } .table.unfix { table-layout: auto } .table.nopad > div { padding: 0 !important } .table > div, .latest .post { display: table-cell; position: relative; vertical-align: top; } .table.half > div, .latest .post { width: 49%; } .table.half.nopad > div { width: 50% } .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%; } .button { font-weight: bold; margin: 1% 0; padding: 10px 30px; display: inline-block; text-decoration: none; background-color: #512863; color: #fff; text-transform: uppercase; transition: background-color 0.3s ease; } .button:hover { background-color: #6B427D; } .imgCenter { margin-left: auto; margin-right: auto; display: block; } .imgCenter, .imgRight, .imgLeft { border: 5px solid #fff; } .imgRight, .imgLeft { margin: 5px 1%; max-width: 45%; } .imgRight { float: right; } .imgLeft { float: left; } .imgRight.blog { max-width: 45%; } .bord { outline: 1px solid #ccc; } .ib.bord { margin: 10px; padding: 5px; max-width: 29%; } .subnav li, .homeside, footer > div > div, .col_contact, #imgCat, .contact-form, .ib, .social { display: inline-block; vertical-align: top; } header, nav { display: inline-block; vertical-align: bottom; } header { width: 28%; text-align: left; } nav { width: 71%; text-align: right; } .fipoweredby { max-width: 96%; } #banner { height: 450px; background-color: #8e948e; padding: 15px 0; margin-bottom: 30px; box-shadow: inset 5px 20px 30px -10px #555,inset 5px -20px 30px -10px #555; position: relative; } .cycle-slideshow { height: 100%; overflow: hidden; font-size: 1.2em; margin-bottom: 40px; } .cycle-slideshow h2 { text-transform: uppercase; } .cycle-slideshow h2, .cycle-slideshow p { text-align: center; } .cycle-slideshow a { color: #fff; display: block; width: 100%; height: 100%; text-decoration: none; position: relative; background-size: cover; } .cycle-slideshow .overlay { width: 96%; padding: 20px 2%; background: rgba(81,40,99,.9); margin: 0 auto; text-align: center; position: relative; top: 50%; transform: translateY(-50%); } .cycle-prev, .cycle-next { width: 40px; height: 100%; position: absolute; top: 0; background-position: center; background-repeat: no-repeat; opacity: .5; cursor: pointer; z-index: 999 } .cycle-prev { left: 0; background-image: url(/images-design/arrow-prev.png) } .cycle-next { right: 0; background-image: url(/images-design/arrow-next.png) } .slide0 { background-image: url(/images-design/banner/00.jpg); } .slide1 { background-image: url(/images-design/banner/01.jpg); background-position: 50% 50%; } .slide2 { background-image: url(/images-design/banner/02.jpg); background-position: 0% 30%; } .slide3 { background-image: url(/images-design/banner/03.jpg); background-position: 0% 40%; } .slide4 { background-image: url(/images-design/banner/04.jpg); background-position: 0% 10%; } .slide5 { background-image: url(/images-design/banner/05.jpg); background-position: 0% 50%; } .wrap { margin: 0 auto; max-width: 1000px; position: relative; } .bg > .wrap { padding-bottom: 50px; } nav ul { padding: 0; margin: 10px 0; } nav li { display: inline-block; } nav li a { display: block; color: #636763; font-size: 14px; text-decoration: none; padding: 5px; margin: 5px; } nav a:hover { color: #3a9e7b; } section { padding: 10px 1%; } aside { width: 300px; } #phone { display: block; text-align: right; } #phone a { font-size: 1.75em; text-decoration: none; color: #7e5092; } .clear { clear: both; } .nowrap { white-space: nowrap; } .center, .stats p { text-align: center; } .stats a, .latest .button { font-size: 11px; } .stats i { color: #7e5092; } .pathfinder { margin: 20px 0; } .solutions img { border: 5px solid #fff; outline: 1px solid #ccc; margin-top: 20px; max-width: calc(100% - 10px) } .solutions form { margin-top: 40px; } .solutions textarea { height: 195px; } .about iframe { height: 200px; } .latest .blogsidebar, .latest .posttags, .latest .postcats { display: none; } .latest .post h3 a { text-decoration: none; } .latest .post h3 a:hover { color: #6B427D } footer { background-color: #512863; clear: both; box-shadow: inset 0 8px 12px -5px #1a1a1a; font-size: 14px; color: #fff; } footer .wrap { padding: 30px 3% 60px } footer a { text-decoration: none; color: #a49ba8; } footer a:hover { color: #fff; } footer #lastRow { text-align: center; } footer div p { color: #a49ba8; } footer div:nth-of-type(2) { vertical-align: middle; } address { color: #a49ba8; padding: 10px 0px; } .social { padding: 3% 0; margin: 0; } .social li { display: inline-block; margin: 6px } .social a { display: inline-block; width: 30px; height: 30px; } .social a#contact_social { background: url(images-content/social-bar.png) 0 0 no-repeat; } .social a.facebook { background: url(images-content/social-bar.png) -40px 0 no-repeat; } .social a#twitter { background: url(images-content/social-bar.png) -80px 0 no-repeat; } .social a.linkedin { background: url(images-content/social-bar.png) -120px 0 no-repeat; } .social a#gplus { background: url(images-content/social-bar.png) -160px 0 no-repeat; } .social a#blog { background: url(images-content/social-bar.png) -200px 0 no-repeat; } .quote_cite_pair { display: block; border-width: 2px 0; border-style: solid; border-color: #eee; padding: 20px; margin-top: 20px; margin-bottom: 30px; font-style: italic; font-size: 16px; position: relative; } .quote_cite_pair:before { content: '\201C'; width: 40px; height: 50px; border-radius: 50%; background: #eee; font-size: 100px; line-height: 120px; padding-right: 15px; font-family: 'PT Sans', sans-serif; color: #666; text-align: center; top: 0; left: 50%; transform: translate(-50%, -50%); position: absolute; } .quote_cite_pair cite { font-size: 14px; } .subnav { margin: 0 auto; padding: 0; font-size: 0; font-weight: bold; } .subnav li { width: 24%; height: 100px; margin: 5px .5%; font-size: 18px; background-color: rgba(0,0,0,0.3); background-size: cover; } .subnav a { height: 100px; display: block; color: #fff; text-align: center; line-height: 100px; text-shadow: 1px 1px 5px #000; text-decoration: none; } .subnav a:hover { background-image: none; background-color: rgba(0,0,0,0.5); transition: background-color 0.5s ease; } .subnav .carrier { background-image: url(/images-content/carrier.jpg); } .subnav .cloud { background-image: url(/images-content/cloud.jpg); background-position: 0 30%; } .subnav .cabling { background-image: url(/images-content/cabling.jpg); } .subnav .security { background-image: url(/images-content/security.jpg); background-position: 0 30%; } #contact { display: block; margin: 0 auto; } input[type=text], input[type=email], input[type=tel], input[type=submit], textarea { border-radius: 2px } input[type=text], input[type=email], input[type=tel], textarea { width: calc(100% - 22px); padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; } textarea { height: 75px; padding-top: 10px; } form > strong { display: block; text-align: left; } input[type=submit] { width: 50%; min-width: 200px; height: 36px; cursor: pointer; background: #ddd; border: 1px solid #ddd } input[type=submit]:hover { color: #512863; } .contactContainerForm { margin: 3% 0 7%; } .test div { background: #fff; padding: 3%; } .homeside { width: 32%; border-left: 1px solid #eee; padding: 20px 0 20px 2%; margin-top: 20px; } .homeside #contact input, .homeside #contact textarea { padding: 10px; border: solid 4px #c9c9c9; transition: border 0.3s; } .homeside #contact input:focus, .homeside #contact textarea:focus { border: solid 4px #969696; } .homeside h1 { text-align: center; margin: 0 0 20px 0; } .homeside #contact #submit { margin: 0; padding: 0; height: 50px; } .col_contact { width: 28%; margin: 12px 1%; padding: 24px 1% 12px; background: #eff1ff; border: 1px solid #a2baf5; height: 200px; } .col_contact:nth-of-type(2) p:nth-of-type(2) strong { width: 65px; display: inline-block; } .contact-form { float: right; margin: 12px 2%; padding: 2em 1em 1em 1em; background: #eff1ff; border: 1px solid #a2baf5; } .contact-form h3 { font-size: 12pt; text-align: center; } #imgCat { float: left; background: none repeat scroll 0 0 White; border: 1px solid #BBBBBB; margin: 10px 20px 10px 10px; padding: 5px; } .halfCol { display: inline-block; vertical-align: top; width: 49%; } .imgblock img { margin: 8px 2px; border: none; } .contactContainer { background: #fff; } .contactContainer div { border-right: 1px solid #eee; } .contactContainer div:last-child { border: none; } .contactContainer p { text-align: center; } .youtube { aspect-ratio: auto 16 / 9; } .latest div {padding-left: 20px; padding-right: 20px;} .latest {border:double #c0c0c0; background: #f4f4f7;} @media(max-width:999px) { section { border-style: solid none none; } .bg > .wrap { padding-bottom: 30px; } .cycle-next, .cycle-prev { display: none } .youtube img { height: auto !important; } } @media(max-width:768px) { .cloudimg { float: none; } } @media(max-width:700px) { header, nav { display: block; width: auto; text-align: center; } #phone { text-align: center; } #banner { height: 550px; } .latest .post { display: block; width: 98%; } } @media(max-width:600px) { .table.half > div, .table.third > div { display: block; width: 98%; } .table.half > div, .table.third > div, footer ul { padding: 0 !important; } footer p { text-align: center; } footer li { display: inline-block; } .footnav a { padding: 5px; display: block; margin: 5px } #contact input, #contact textarea { width: 80%; } .contact-form { padding: 1em 1%; } .col_contact { width: 42%; height: auto; min-height: 130px; padding: 12px 2%; } #banner { height: 650px; } } @media(max-width:500px) { section { padding-left: 2%; padding-right: 2%; } .home { display: block; width: auto; margin-right: 0; } .homeside { display: block; width: auto; padding-left: 0; border-left: none; } #contact #submit { width: 86%; } .subnav li { width: 48%; margin: 5px 1%; } .out-pager span { margin: 0 12px; } .ib.bord { max-width: 92%; } .contact-form { width: 60%; min-width: 280px; float: none; } .contactContainer div { display: block; width: 100% !important; border-bottom: 1px solid #eee; border-right: none; } .contactContainer p { text-align: center; } #banner { height: 750px; } } @media(max-width:400px) { .contact-form { float: none; } .col_contact { width: 90%; min-height: unset; } h1 + img[class^=img] { float: none; } .stop400 { float: none; } .imgblock img { max-width: 46%; } #banner { height: 850px; } .subnav li { display: block; width: auto; height: 150px; margin: 4% 2% } .subnav a { line-height: 150px } }