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; } .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;} }