img, iframe {max-width: 100%; height: auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} body { min-width: 320px; font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-size: 14px; background-color: #000; color: #4d4d4d; line-height: 1.6; text-align: center; } h1, h2, h3, h4, h5, h6, p, th, td, dd, dt, li, blockquote { text-align: left; } body, nav ul { padding: 0; margin: 0; } footer ul { padding: 0 } img, iframe { max-width: 100%; height: auto; } a img, iframe { border: none; } a, nav a:hover, .contact a:hover, footer a:hover, footer a:hover { text-decoration: none; color: #f47321; transition: all .3s linear .01s; } a:hover { text-decoration: underline; transition: all .3s linear .01s; } nav a:hover, .cycle-slideshow a:hover, .featured a:hover, .cta a:hover, .solutions a:hover, .support a:hover { text-decoration: none; } hr { border-width: 1px; border-color: #eee; border-style: none none solid; margin: 30px 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%; } .clear { clear: both; } .hide { display: none; } .center { text-align: center; } .container { background-color: #fff; } .wrap { max-width: 1200px; display: block; margin: 0 auto; position: relative; } .table { display: table; width: 100%; } .table.nofix { table-layout: auto } .table > div { display: table-cell; vertical-align: top; } .table.half > div { width: 50%; } .table.half > div:first-of-type { padding-right: 2%; } .table.half > div:last-of-type { padding-left: 2%; } .table.third > div { width: 33%; } .table.third > div:nth-of-type(1) { padding-right: 2%; } .table.third > div:nth-of-type(2) { padding: 0 1%; } .table.third > div:nth-of-type(3) { padding-left: 2%; } .table.quad > div { width: 25%; } .mid { vertical-align: middle; align-content: center; align-items: center } .grid { display: grid; grid-gap: 10px 20px } .grid.half { grid-template-columns: 1fr 1fr } .nowrap { white-space: nowrap } header, nav, nav ul, footer .table > div { vertical-align: middle; } nav li, .featured a, footer li { display: inline-block; vertical-align: top; } .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 } header .grid { grid-template-columns: 250px 1fr } header .grid a img { display: block; padding: 10px } nav { display: flex; flex-wrap: wrap; align-items: center } nav ul { margin: 0 auto } nav ul:first-of-type { flex: 1 0 580px } nav ul:last-of-type { text-align: right; flex: 0 0 140px } nav ul:last-of-type li:last-of-type a { padding-right: 0; } nav a { color: #fff; padding: 5px; margin: 5px; display: block } nav i { display: block; width: 24px; height: 14px } nav #menu a { padding: 4px 12px; margin: 5px } .cycle-slideshow { height: 600px; position: relative; overflow: hidden; } .cycle-slideshow .wrap, .banner .wrap { top: 50%; transform: translateY(-50%); } .cycle-slideshow a { display: block; width: 100%; height: 100%; background-size: cover; background-attachment: fixed; background-position: center; } .cycle-slideshow p { max-width: 700px; font-size: 24px; font-weight: 600; color: #4d4d4d; margin: 0; padding: 0 50px; text-shadow: 0 0 10px #fff } .cycle-slideshow .light p { color: #FFF; text-shadow: #000 0 0 10px; } .cycle-slideshow strong { font-size: 42px; } .cycle-slideshow span, .button { display: inline-block; font-size: 18px; background-color: rgba(255, 255, 255, 0.3); color: #f47321; padding: 10px 30px; margin-top: 50px; border: 2px solid #f47321; } .cycle-slideshow a span, .cta a:hover .button { background-color: #f47321; color: #fff; transition: all .3s linear .01s; } .cycle-prev, .cycle-next { position: absolute; top: 0; width: 50px; z-index: 888; height: 100%; cursor: pointer; background-position: 50% 50%; background-repeat: no-repeat; opacity: 0.5; } .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: 0.9; transition: all .3s linear .01s; } .slide1 { background-image: url(/images-design/slides/see-what-we-offer.jpg); } .slide2 { background-image: url(/images-design/slides/leading-edge-phone-systems.jpg); } .slide3 { background-image: url(/images-design/slides/comprehensive-project-management.jpg); } .slide4 { background-image: url(/images-design/slides/proactive-services.jpg); } .cycle-slideshow a.slide5 { background-image: url(/images-design/slides/dependable-it-services-and-support.jpg); background-position: 74% 50%; } .slide6 { background-image: url(/images-design/slides/easy-financing.jpg); } .slide7 { background-image: url(/images-design/slides/dark-web-protection.jpg); } .banner { height: 350px; background-size: cover; } .banner p { max-width: 550px; font-size: 30px; font-weight: 600; text-align: center; color: #fff; margin: 0 auto; text-shadow: 1px 1px 3px #000; padding: 0 10px } .banner.solutions { background-image: url(/images-design/banners/cloud-phone-systems.jpg); background-position: center; } .banner.cybersecurity { background-image: url(/images-design/banners/dark-web.jpg); background-position: center; } .banner.environmental { background-image: url(/images-design/banners/environmental.jpg); background-position: center; } .banner.namechange { background-image: url(/images-design/banners/cloud-communication-integrations.jpg); background-position: center; } .banner.namechange p { max-width: 100%; } .banner.about { background-image: url(/images-design/banners/namechange.jpg); background-position: center; } .banner.support { background-image: url(/images-design/banners/support.jpg); background-position: center; } .banner.itsolutions { background-image: url(/images-content/it-solutions.jpg); background-position: center; } .banner.managedit { background-image: url(/images-design/banners/managed-it.jpg); background-position: center; } .banner.security { background-image: url(/images-design/banners/security.jpg); background-position: center; } .banner.contact { background-image: url(/images-design/banners/contact.jpg); background-position: center; } .banner.why { background-image: url(/images-design/banners/total-tech-solutions.jpg); background-position: top; } .story { padding: 0 10px } .story img { max-height: 40px; display: block; margin: 0 auto; } .story p { text-align: center; margin: 5px 0 0 0; padding: 0; } .story strong { font-weight: 600; color: #f47321; } .name, .cta { background-color: #f7f7f7; padding: 30px 0; } .name { background-image: url(/images-design/name-bg.jpg); background-size: cover; background-position: center; background-attachment: fixed } .featured { margin: 10px 0 50px; } .featured a h2, .featured a p { color: #fff; text-shadow: 0 0 10px #000 } .featured .grid { grid-gap: 10px } .featured a { height: 300px; background-size: cover; color: #4d4d4d; } .featured a > div { z-index: 1; position: relative } .featured a:nth-of-type(1) > img { object-position: bottom } .featured a:nth-of-type(1) h2, .featured a:nth-of-type(1) p { padding-left: 47%; padding-right: 4%; } .featured a:nth-of-type(2) > img { object-position: right } .featured a:nth-of-type(2) h2, .featured a:nth-of-type(2) p { padding-left: 5%; padding-right: 40%; } .featured a:nth-of-type(3) > img { object-position: bottom; } .featured a:nth-of-type(3) h2, .featured a:nth-of-type(3) p { color: #ffffff; padding-left: 5%; padding-right: 40%; } .featured a:nth-of-type(4) > img { object-position: bottom; } .featured a:nth-of-type(4) h2, .featured a:nth-of-type(4) p { padding-left: 4%; padding-right: 40%; } .featured a:nth-of-type(5) > img { object-position: center; } .featured a:nth-of-type(5) h2, .featured a:nth-of-type(5) p { padding-left: 55%; padding-right: 4%; } .featured a:nth-of-type(6) > img { object-position: center; } .featured a:nth-of-type(6) h2, .featured a:nth-of-type(6) p { padding-left: 4%; padding-right: 40%; } #vendors { height: 50px; overflow: hidden; border-bottom: 20px solid #fff } #vendors img { height: 50px; margin: 0 100px 0 0; display: inline-block; box-sizing: border-box; width: auto } p#vendors img { margin: 0 25px 40px 0; } #sidebar ul { margin: 0; padding: 0; } #sidebar ul li { list-style-type: none; margin: 0; padding: 0; } #sidebar ul li a { display: block; border-bottom: 1px dotted #ccc; border-right: 1px dotted #ccc; color: #f47321; padding: 15px 0 15px 5px; } #sidebar ul li a:hover { background: #f47321; color: #fff; border-bottom: 1px dotted #fff; border-right: 1px dotted #fff; text-decoration: none; } #sidebar ul ul { display: none; } #sidebar ul ul li a { padding-left: 40px; } #sidebar { width: 350px; display: inline-block; text-align: left; vertical-align: top; } #sidebar-content { display: inline-block; width: calc(100% - 350px - 66px - 4px); padding-left: 66px; vertical-align: top; } #sidebar > .wrap { text-align: left; } .cta h2, .featured h1 { font-size: 24px; } .flair:after { content: ""; display: block; width: 100%; height: 1px; background-image: linear-gradient(to right, #fff, #ddd,#f47321,#ddd, #fff) } .cta { background-image: url(/images-design/cta-bg.jpg); background-size: cover; background-position: center; padding: 0; } .cta h2, .cta p { text-align: center; margin: 20px 4%; } .cta .button { width: 180px; font-size: 16px; text-align: center; color: #f47321; } .featured h1 { font-size: 34px; text-align: center; color: #f47321; margin: 15px 0 10px; } .cta p { color: #4d4d4d; } .servicearea { background-image: url(/images-design/cloud-bg.jpg); background-size: cover; margin-top: 0; background-attachment: fixed; padding: 50px 0 } .servicearea .table.half > div:first-of-type, .table.half.solutions > div:first-of-type, .table.half.support > div:first-of-type { padding-right: 5px; } .servicearea .table.half > div:last-of-type, .table.half.solutions > div:last-of-type, .table.half.support > div:last-of-type { padding-left: 5px; } .servicearea .black, .contact .white { min-height: 450px; padding: 10px 4%; } .servicearea .black { background-color: rgba(0,0,0,0.7); color: #fff; line-height: 25px; } .servicearea .white { background-color: #fff; } .servicearea ul { list-style: none; color: #fff; margin: 60px 30px; } .servicearea li { margin-bottom: 10px; } .servicearea a { color: #fff; } .servicearea .bgimg { background-image: url(/images-content/service-map.png); background-repeat: no-repeat; background-size: contain; background-position: right } .servicearea h3 { color: #FFF; font-size: 26px; } .servicearea p:first-of-type { max-width: 340px } .pad { padding-left: 10px; padding-right: 10px } section { padding: 10px } section h1, section h2 { color: #f47321; } section h3, section h4, section h5, section h6, .why-partner h2 { color: #4d4d4d } section h2 { font-size: 18px; } section h3 { font-size: 16px; } section h4 { font-size: 14px; } section ul, section ol { padding-left: 30px; } section li { margin: 5px 0; } .table.half.solutions ul { margin: 0; padding: 0; } .table.half.solutions li { list-style-type: none; padding: 20px 0; min-height: 205px; } .table.half.solutions li a { font-size: 18px; } .table.half.solutions > li a { background-image: url(/images-content/commercial.jpg); display: block; width: 100px; height: auto; } .table.half.solutions > div h2 { display: block; background-size: cover; padding: 100px 0; margin-top: 20px; } .table.half.solutions > div:first-of-type h2 { background-image: url(/images-content/commercial.jpg); } .table.half.solutions > div:last-of-type h2 { background-image: url(/images-content/ovationav.jpg); } .solutions h2, .support h2 { font-size: 20px; text-align: center; color: #fff; text-shadow: 1px 1px 3px #000; } .solutions li a { display: block; } .support a { display: block; background-size: cover; margin: 20px 0; } .support > div:first-of-type a { background-image: url(/images-content/join-a-meeting.jpg); } .support > div:last-of-type a { background-image: url(/images-content/create-service-ticket.jpg); } .support h2 { background-color: rgba(0,0,0,.3); padding: 115px 0; } #leadership a { display: inline-block; width: 250px; margin-right: 150px; text-align: center; } #leadership a strong { display: block; } #why-partner div { padding: 0 10px; text-align: left; } .why-partner img { display: block } .why-partner h2 { margin: 5px 0; padding: 0; } .why-partner p { margin: 0 0 50px 0; } .why-partner > div { display: inline-block; width: auto; margin: 10px; width: calc(33% - 24px); vertical-align: top } form { margin: 20px 0; } form .table.half > div:first-of-type { padding-right: 5px; } form .table.half > div:last-of-type { padding-left: 5px; } form input[type=text], form input[type=email], form input[type=tel], form input[type=submit], form textarea { font-family: 'Montserrat', sans-serif; font-size: 14px; } form input[type=text], form input[type=email], form input[type=tel] { margin-bottom: 10px; } form input[type=text], form input[type=email], form input[type=tel], form textarea { background-color: #f3f3f3; padding: 0 10px; border: none; } form input[type=text], form input[type=email], form input[type=tel], form textarea { width: calc(100% - 20px); } form input[type=text], form input[type=email], form input[type=tel], form select { height: 40px; } form textarea { height: 150px; padding: 10px; } form input[type=submit] { background-color: #f47321; color: #fff; padding: 11px 40px; margin-top: 5px; border: none; border-radius: 3px; } form input[type=submit]:hover, .button:hover { cursor: pointer; text-decoration: none; color: #fff; transition: all .3s linear .01s; } .member img { max-height: 100px; } footer h3 { font-size: 14px; color: #f47321; } footer ul { list-style: none; margin-bottom: 40px; } footer li { margin-bottom: 10px; } footer a { color: #4d4d4d; } footer .wrap { padding: 10px } footer, footer a { color: #fff; } footer .table.tri > div:nth-of-type(2) p { text-align: center; } footer .table.tri > div:nth-of-type(3) p { text-align: right; } footer li { line-height: 1; border-right: 1px solid #fff; } footer li:last-of-type { border: none; } footer li a { padding: 10px; } footer img { max-height: 40px; } @media(max-width:999px) { .featured a h2, .featured a p { padding: 10px !important; text-align: center; margin: 0; } .featured a h2, .featured a p, .servicearea p { text-shadow: -1px -1px 4px #000, 1px 1px 4px #000, -1px 1px 4px #000, 1px -1px 4px #000 } .featured a p { font-size: 15px } .featured a .offset { position: relative; top: 66px } .featured img { filter: brightness(.7) } nav ul:first-of-type { width: auto; display: block } header .grid { grid-template-columns: 160px 1fr } } @media(max-width:767px) { #sidebar, #sidebar-content { display: block; width: auto; padding: 0 } .table.half.solutions li { min-height: 230px; } header .grid { grid-template-columns: 1fr } header { padding: 10px } header a img { margin: 0 auto } header nav, header nav ul { display: block; margin: 0 auto; text-align: center !important; flex: unset !important } } @media(max-width:700px) { .table.third > div, .table.half > div { display: block; width: auto; padding: 0 !important; } .story .table > div { margin: 10px 0 20px } .why-partner > div { width: calc(50% - 24px) } .table.half.solutions { display: inline-block; } } @media(max-width:600px) { .grid.half { grid-template-columns: 1fr } .featured a { height: auto } .featured a .offset { padding: 50px 0; top: 0 } nav { width: 100% } #menu { display: grid; grid-template-columns: 1fr 1fr 1fr; } #menu a { text-align: center } } @media(max-width:500px) { section > .imgRight, #sidebar-content > .imgRight { float: none; margin: 1em auto; max-width: 100% } .why-partner > div { width: auto; display: block } footer .table > div { display: block; } footer p { text-align: center !important } .banner p { font-size: 28px; } .cycle-next, .cycle-prev { display: none } .cycle-slideshow p { padding: 0 10px } .cycle-slideshow strong { font-size: 36px } } @media(max-width:400px) { #menu { grid-template-columns: 1fr 1fr; } }