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: 'Jost', sans-serif; font-size: 18px; padding: 0; margin: 0; line-height: 1.8; text-align: center; min-width: 320px; background-color: #F1F1F1; } h1, h2, h3, h4, h5, h6, p, th, td, dd, dt, li, blockquote, address, .left { text-align: left; } .right { text-align: right } img, iframe { max-width: 100%; height: auto; } .fullwidth { width: 100%; } a img, iframe { border: none; } iframe { margin: 15px 0; aspect-ratio: auto 16 / 9 } a, a:hover { text-decoration: none; } a { transition: ease-out .3s; } a:hover { transition: ease-in .3s; } hr { height: 0; border-width: 1px; border-style: solid none none; border-color: rgba(0,0,0,0.1); border-bottom: none; margin: 20px 0; } .bold, b, strong, h1, h2, h3, h4, h5, h6 { font-weight: 600; } .italic { font-style: italic; } .clear { clear: both; } .center { text-align: center; } .btnStyle1 { display: inline-block; background: #eee; padding: 10px 20px; border-radius: 3px; text-transform: uppercase; } .btnStyle2 { display: inline-block; background: #E8E8E8; padding: 10px 50px; border-radius: 3px; text-transform: uppercase; font-size: 16px; text-shadow: 0px 1px 0 rgba(255,255,255,1); font-weight: 600; } .btnStyle2:hover { background: #f1f1f1; } .imgLeft { float: left; margin: 5px 4% 1% 1%; } .imgCenter { display: block; margin: 0 auto; } .imgRight { float: right; margin: 5px 1% 1% 4%; max-width: 45%; } .container { background-color: #fff; padding-top: 133px; } .wrap { max-width: 1300px; display: block; margin: 0 auto; position: relative; } article, .article { border-bottom: 1px dotted #999; padding: 10px; margin: 10px; } .mid { align-items: center; align-self: center; } .flex { display: flex; flex-wrap: wrap; } .grid { display: grid; } .grid.half { grid-template-columns: repeat(2,1fr); } .grid.third { grid-template-columns: repeat(3,1fr); } .grid.quad { grid-template-columns: repeat(4,1fr); } .grid.fifth { grid-template-columns: repeat(5,1fr); } .table { display: table; width: 100%; } .table > div { display: table-cell; position: relative; vertical-align: top; } .table.half > div { width: calc((100% / 2) - 1%); } .table.half > div:nth-of-type(odd) { padding-right: 1%; } .table.half > div:nth-of-type(even) { padding-left: 1%; } .table.half span { font-weight: bolder } .table.third > div { width: calc((100% / 3) - 1%); } .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%; } .nowrap { white-space: nowrap; } .phones ul { list-style-image: url(/images-content/check-mark-lists.png); margin: auto; } blockquote { margin: 1em 4%; } .hide { display: none !important; } .height100 { max-height: 100px; } cite.awards { font-size: 11px; } .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 } body, .btnStyle2:hover, .request a, nav a, .banner h1 span, .product-scroll h2, .header-contact a, .quick-services h2, .quick-services .col-5:hover, .quick-services p, .team h2 em, .products h3, .glossary h3, ul.glossary li a p { color: #707070; } .quick-services i, .quick-services a:hover h2, .team:hover h2, a:hover, .request a:hover, .join:hover strong { color: #78a300 } .quick-services a:hover i, .call-to-action { background-color: #78a300 } .quick-services a:hover i, .call-to-action p, form input[type=submit] { color: #fff } .quick-services i { background-color: #fff } .quick-services .table > a, form input, select, textarea { background-color: #f1f1f1 } .quick-services i, form { border: 1px solid #f1f1f1 } .banner h1, a, header .fa, .header-contact a strong, .team h2, .products h2, .phones h2, .products i, ul.glossary li a h3, ul.glossary li a span { color: #0F7AC7 } form input[type=submit] { background-color: #0F7AC7; transition: ease-out .3s; } form input[type=submit]:hover, header .btn2:hover, .btn a:hover, .home .help .grid a:hover { background-color: #78a300; color: #fff; transition: ease-in .3s; } .special { line-height: 2; background-color: #78A300; } .special .grid{grid-template-columns:150px 1fr} .special a { color: #fff; padding: 4px } .special a:hover { color: #0F7AC7; } header { width: 100%; position: fixed; z-index: 999; font-size: 16px; line-height: 2; background-color: #fff; box-shadow: 0 0 10px rgba(0,0,0,.1); } header ul { padding: 0; margin: 0; } header li { display: inline-block; } header a { display: block } header li a { color: #707070; padding: 8px; } header .logo { padding: 5px } .special a { margin: 5px } header .btn1, header .btn2 { display: inline-block; padding: 5px 10px; border: 1px solid #0F7AC7; border-radius: 3px; } header .btn1 { color: #0F7AC7; } header .btn2, header .btn1:hover { background-color: #0F7AC7; color: #fff; } header .btn2:hover { color: #fff; border: 1px solid #fff; } .headbuttons a,.headbuttons a:hover{color:#fff !important} header i, header .table > div { vertical-align: middle; } header .grid { grid-template-columns: 150px 1fr; padding: 5px 0 } header .grid > div:first-of-type { text-align: left; } header .grid > div:last-of-type { text-align: right; } header .table { padding: 10px 0 5px; } header .table > div:nth-of-type(1) { width: 150px; padding-right: 30px; } header .table > div:nth-of-type(1) img { max-width: 150px; } header .table > div:nth-of-type(2) { width: calc(100% - 600px); text-align: left; } header .table > div:nth-of-type(3) { width: 430px; text-align: right; } nav a, nav strong, .navabout em, nav li:hover > ul, .mobile-nav li a, .mobile-nav2 li strong { display: block; } nav a { border-bottom: 5px solid #fff; margin-top: 5px } nav a:hover { border-bottom: 5px solid #0F7AC7; } nav a:hover, nav ul ul a:hover, .mobile-nav2 li span { color: #707070; } nav ul ul { display: none; min-width: 720px; font-size: 0; background-color: #fff; position: absolute; right: 0; z-index: 888; box-shadow: 0 5px 5px rgba(0,0,0,.1); padding: 0 10px 20px 10px; } nav ul ul li { display: inline-block; vertical-align: top; width: 50%; font-size: 14px; line-height: 1.6; } nav ul ul a, nav ul ul a:hover { padding: 10px; border: none; } nav ul ul a:hover strong, nav .navsub li a:hover em, .navabout strong, .navabout a:hover em, .navabout p a:hover { color: #0F7AC7; } nav .navsub li:nth-of-type(1) strong { color: #0F7AC7; padding: 10px; } nav .navsub li:nth-child(2), nav .navsub li:nth-of-type(3) { padding-top: 40px; } nav .navsub em { font-weight: bold; font-style: normal; display: block; } nav .navproducts { width: 1090px; } nav .navproducts li { width: calc(1090px / 3); } nav .navabout { width: 1007px; } nav .navabout li { width: calc(1007px / 3 - 5px); margin-right: 5px; border-right: 1px solid #f5f5f5; } nav .navabout li:last-of-type { margin-right: 0; border: none; } nav .navabout a { height: 44px; } nav .navabout p { margin: 0; } nav .navabout strong, .mobile-nav .navtest strong { padding: 10px; } nav .navabout em { font-weight: bold; font-style: normal; } nav .navtest { min-width: 360px; } nav .navtest li { width: 100%; } .mobile-nav { width: calc(100% + 20px); margin-left: -10px } .mobile-nav ul { font-size: 0; background-color: #f1f1f1; padding: 0; margin: 0; display: none } .mobile-nav li, div.mobile-nav ul.navabout li a { display: inline-block; font-size: 18px; } .mobile-nav li span, .mobile-nav .navabout strong, .mobile-nav .navabout p { display: none; } .mobile-nav li a { background-color: #f1f1f1; padding: 5px 10px; border: 2px solid #f1f1f1; } .mobile-nav li a:hover { background-color: #fff; color: #78a300; border: 2px solid #eee; } .mobile-nav li:last-of-type a { border: none; } .mobile-nav2 ul { list-style: none; padding: 0 10px; } .mobile-nav2 li { margin: 15px 0; } div.mobile-nav ul.navabout li { text-align: center; } div.mobile-nav ul.navabout li:nth-of-type(1n+2) { display: none } .hero { width: 100%; height: 650px; text-align: left; background-color: #f7faff; position: relative; } .hero .overlay { height: 100%; background-color: rgba(0,0,0,.4); position: relative } .hero .wrap { top: 60%; transform: translateY(-50%); } .hero p { max-width: 625px; color: #fff; font-size: 24px; line-height: 1.4; margin: 0 2%; } .hero strong { display: block; font-size: 42px; font-weight: 900; line-height: 1.1; margin-bottom: 50px; } .hero .btn i { margin-right: 10px; } .hero .btn { margin: 20px 40px; } .banner { height: 192px; background: #eee; background-size: cover; } .banner h1 { font-size: 60px; font-weight: 800; letter-spacing: -3px; margin: 0 4%; position: relative; top: 50%; transform: translateY(-50%); line-height: 1; text-shadow: 1px 1px 1px #000; } .banner h1 span { display: block; font-size: 24px; font-weight: normal; letter-spacing: -1px; margin: 12px 0 0 5px; text-shadow: none; line-height: 1.4; } .banner.plane { background-image: url(/images-content/banners/airplane.jpg); } .banner.plug { background-image: url(/images-content/banners/plug.jpg); } .banner.gear { background-image: url(/images-content/banners/gear.jpg); } .banner.bank { background-image: url(/images-content/banners/bank.jpg); } .banner.stretcher { background-image: url(/images-content/banners/stretcher.jpg); } .banner.phone { background-image: url(/images-content/banners/phone.jpg); } .banner.resourcesHeader { background-image: url(/images-content/banners/resources.jpg); } .banner.beforeAfterHeader { background-image: url(/images-content/banners/beforeAfter.jpg); } .banner.matrixHeader { background-image: url(/images-content/banners/matrix.jpg); } .banner.glossaryHeader { background-image: url(/images-content/banners/glossary.jpg); } .banner.hipaaHeader { background-image: url(/images-content/banners/hipaa.jpg); } .banner.partnerHighlightsHeader { background-image: url(/images-content/banners/partnerHighlight.jpg); } .banner.supportHeader { background-image: url(/images-content/banners/support.jpg); } .homebanner, .contactbanner, .voipbanner, .livebanner, .freebanner, .contestbanner, .resellbanner { height: 450px; text-align: left; background-size: cover; } .resellbanner .overlay { height: 100% } .homebanner { background-image: url(/images-design/banners/work-from-home.jpg); background-position: 80% 50% } .contactbanner { background-image: url(/images-design/banners/contact.jpg); background-position: 73% 20% } .livebanner { background-image: url(/images-design/banners/p360-live.png); background-position: 50%; } .voipbanner { background-image: url(/images-design/banners/hosted-voip.jpg); background-position: 10% 50%; } .resellbanner { background-image: url(/images-design/banners/homepage-reseller.jpg); background-position: 75% 50% } .homebanner .wrap, .contactbanner .wrap, .help .wrap, .contestbanner .wrap, .resellbanner .wrap { top: 50%; transform: translateY(-50%); } .homebanner p, .contactbanner p, .voipbanner p, .livebanner p, .resellbanner p { font-size: 24px; line-height: 1.4; margin: 0 0 0 100px; } .homebanner p, .contactbanner p, .voipbanner p, .livebanner p { color: #111; } .homebanner p { max-width: 605px; } .resellbanner .overlay { background-color: rgba(15,61,118,.3); } .resellbanner p { color: #fff; } .contactbanner .btn:hover, .voipbanner .btn:hover, .livebanner .btn:hover { background-color: #78a300; color: #fff; } .contactbanner p, .voipbanner p, .resellbanner p { max-width: 500px; } .homebanner strong, .contactbanner strong, .voipbanner strong, .livebanner strong, .resellbanner strong { display: block; font-size: 42px; font-weight: 900; line-height: 1.1; margin-bottom: 10px; } .homebanner a, .contactbanner a, .help a, .voipbanner .btn, .livebanner .btn { display: inline-block; font-size: 18px; background-color: #0F7AC7; color: #fff; padding: 10px 30px; border-radius: 5px; } .homebanner a, .contactbanner a, .voipbanner .btn, .livebanner .btn { margin: 30px 0 0 100px; } .homebanner i, .contactbanner i, .voipbanner .btn i, .livebanner i { font-size: 20px; margin-right: 10px; } .voipbanner .grid, .livebanner .grid { background-image: url(/images-design/banner-bg.png); background-position: left bottom; background-repeat: no-repeat; padding-bottom: 30px; } .livebanner .grid { background-image: url(/images-design/banner-bg2.png); } .voipbanner .grid > div:first-of-type { padding: 40px 0; } .livebanner .grid > div:first-of-type { padding: 80px 0; } .freebanner { background-image: url(/images-design/banners/free2flex.jpg); background-position: center; } .freebanner > .wrap { top: 50%; transform: translateY(-50%); } .freebanner p, .contestbanner p { max-width: 600px; font-size: 32px; line-height: 1.4; margin: 0 0 0 20px; } .freebanner strong, .contestbanner strong { display: block; font-size: 80px; line-height: 1; color: #343434; } .contestbanner { background-image: url(/images-design/banners/contest.jpg); background-position: center; } .notice { height: 200px; background-color: #eee; } .notice p { line-height: 1.4; color: #343434; margin: 0; } .notice .table > div:first-of-type { width: 45%; } .notice .table > div:last-of-type { width: 55%; } .notice .table > div:first-of-type p { text-align: right; } .notice .table > div { vertical-align: middle; padding-top: 25px; } .cycle-slideshow { width: 100%; height: 400px; position: relative; z-index: 0; overflow: hidden } .cycle-slideshow a { display: block; width: 100%; height: 100%; background-size: cover; padding: 5px 0 } .cycle-slideshow h1, .notice strong { font-size: 32px; } .cycle-slideshow p, .notice p { font-size: 18px; } .cycle-slideshow h1, .cycle-slideshow p { text-align: left; color: #fff; text-shadow: 1px 1px 3px #000; } .cycle-slideshow span, .notice span { display: block; color: #fff; padding: 10px 50px; border-radius: 3px; width: 140px; text-align: center; white-space: nowrap } .notice strong { display: block; } .notice span { font-size: 14px; margin-top: 20px; } .cycle-slideshow span { background-color: #343434; } .notice span { background-color: #0F7AC7; } .cycle-slideshow .wrap { top: 45%; transform: translateY(-50%); padding: 0 10%; } .cycle-prev, .cycle-next { position: absolute; top: 0; width: 5%; z-index: 888; 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: #1e3f6a url('/images-content/slides/01.jpg') no-repeat center; } .slide2 { background: #1e3f6a url('/images-content/slides/02.jpg') no-repeat center; } .slide3 { background: #018cbd url('/images-content/slides/03.jpg') no-repeat center; } .slide4 { background: #000 url('/images-content/slides/04.jpg') no-repeat center; } .slide5 { background: #78A300 url('/images-content/slides/05.jpg') no-repeat center; } .slide6 { background: #000 url('/images-content/slides/06.jpg') no-repeat center; } .slide7 { background: #0F7AC7 url('/images-content/slides/07.jpg') no-repeat center; } .slide8 { background: #0F7AC7 url('/images-content/slides/08.jpg') no-repeat center; } .slide9 { background: #1e3f6a url('/images-content/slides/09.jpg') no-repeat center right; } .slide10 { background: #1e3f6a url('/images-content/slides/10.jpg') no-repeat center; } .slide11 { background: #1e3f6a url('/images-content/slides/11.jpg') no-repeat center; } .slide12 { background: #0F7AC7 url('/images-content/slides/12.jpg') center; } .slide12 .imgRight { margin-top: -50px; } .slide13 { background: #333 url('/images-content/slides/13.jpg') center; } .slide13 h1 { line-height: 1.4; } .slide13 p { max-width: 450px; line-height: 1.6; } .slide13 span { width: 200px } .slide14 { background: #1e3f6a url('/images-content/slides/14.jpg') no-repeat center; } .slide14 img { max-width: 330px } .slide15 { background: #0F7AC7 url('/images-content/slides/15.jpg') center; } .slide15 h1 { line-height: 41px; } .slide15 span { text-transform: uppercase; background: #78A300; color: #fff; } .slide15:hover { cursor: default; } .slide16 { background: #0F7AC7 url('/images-content/slides/16.jpg') center; } .mainSlideStyle1 { line-height: 41px; max-width: 500px; } .mainSlideStyle1 i { font-size: 18px; } .mw350 { max-width: 350px; } .home { font-size: 20px; line-height: 1.6; } .home .grid p a, .intro a { font-weight: 500; border-bottom: 2px solid #0F3D76; } .home .grid p a:hover, .intro a:hover { color: #78a300; border-color: #78a300; } .home h1, .home h2, .contact h2, .collaboration h2, .collaboration h3 { font-size: 30px; line-height: 1.2; } .home h1, .home h2, .intro p, .collaboration h3, .contact h2 { color: #0F7AC7; } .home h1, .home h2, .intro p, .clients p, .contact h2, .p360 .bundle h2, .p360 h3, .p360 .earn h2, .p360 .earn p { text-align: center; } .home h1, .home h2, .home h3, .home p { padding: 0 10px; } .intro, .discover { background-color: #f7fbff; } .intro { padding: 50px 10px 40px; } .intro .grid { margin-top: 50px; } .intro h1, .intro p a, .collaboration h2, .collaboration a, .discover h2 { color: #0F3D76; } .intro h1 { max-width: 700px; margin: .67em auto } .intro p, .clients p { max-width: 500px; margin: 0 auto; } .intro .grid p { font-weight: bold; } .intro img { max-height: 98px; margin: 20px auto; } .intro p a, .collaboration a { display: inline-block; margin: 40px 0; } .collaboration h2 { margin: 50px 0; } .collaboration h3, .collaboration p { padding: 0 50px; } .collaboration h3, .home .testimonials h2, .help .table h2 { text-align: left; } .collaboration img { object-fit: cover; min-height: 400px; } .help .table h2 { color: #707070; } .solutions .table p { max-width: 400px; } .solutions .grid { align-items: center; } .solutions .grid img, .join { display: block; } .solutions .orderflip > div:first-of-type { order: 2; } .solutions .orderflip > div:last-of-type { order: 1; } .discover { padding: 50px 0 60px; margin-top: 60px; } .testimonials { text-align: left; background-color: #0F3D76; margin-top: 50px; } .testimonials .bgimg .mobile { display: none; opacity: .5 } .testimonials .bgimg > img:first-of-type { object-position: 70% 50% } .testimonials .grid { grid-gap: 0 100px; } .testimonials .grid > div:first-of-type { padding: 40px 0 } .testimonials, .home .testimonials h2, .testimonials a, .join p { color: #fff; } .testimonials h2, .testimonials a { margin: 40px 0; } .testimonials h2, .testimonials p { z-index: 200; position: relative } .join { line-height: 1.7; background-color: #001E45; padding: 30px 0; } .join strong { font-size: 24px; padding-right: 20px; } .join p { text-align: center; margin: 0; } .home .testimonials .grid a { display: inline-block; border-color: #fff; } .help, .contact .grid.half .coo.cbox { background-color: #f7fbff; } .awards { padding: 50px 0; } .awards img { max-height: 120px; vertical-align: middle; margin: 30px 4% 20px; max-width: 92%; } .homeblogs .posts { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px } .homeblogs .posts .post, .homeblogs .segment .post { position: relative; height: 400px; } .homeblogs .postThumbnail { z-index: 1; overflow: hidden } .homeblogs .postThumbnail:before { content: ""; background-color: rgba(0,0,0,.5); z-index: 2; } .homeblogs .postThumbnail img { object-fit: cover; height: 100%; width: 100%; } .homeblogs .postThumbnail, .homeblogs .postThumbnail:before, .homeblogs .post p:nth-of-type(3) { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .homeblogs .post p, .homeblogs .post h3, .homeblogs a { color: #fff; } .homeblogs .post h3, .homeblogs .post a, .homeblogs .post p { z-index: 888; position: relative } .homeblogs .post p { padding: 0; margin: 0 } .homeblogs .post p:nth-of-type(1) { position: absolute; top: 130px; left: 50%; transform: translateX(-50%); width: calc(100% - 80px); text-align: center; width: 200px; border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 10px; font-size: 18px } .homeblogs .post h3 { position: absolute; top: 180px; left: 50%; transform: translateX(-50%); padding: 0 30px; width: calc(100% - 60px); font-weight: normal; max-width: 300px; font-size: 20px; text-align: center } .homeblogs .post p:nth-of-type(2) { display: none } .homeblogs .post p:nth-of-type(3) a { display: block; height: 100%; width: 100%; } .homeblogs .post p span { display: block; padding: 10px 0; border-bottom: 1px solid #fff; position: absolute; left: 50%; transform: translateX(-50%); bottom: 40px; transition: ease-out .3s; text-align: center; font-size: 18px } .homeblogs .post h3, .homeblogs .post span, .homeblogs p { text-shadow: 0 2px 2px #000 } .homeblogs a:hover { color: #fff } .homeblogs .segment { display: grid; grid-template-columns: 2fr 1fr; grid-gap: 20px } .homeblogs .post:hover img { transform: scale(1.25); } .homeblogs .post:hover img, .homeblogs .post img { transition: all ease-in-out 0.5s } .help { height: 500px; overflow: hidden; } .home .help h2, .help p { max-width: 500px; text-align: right; color: #fff; } .home .help .grid a { margin-top: 20px; border: none; } .map { display: block; min-height: 400px; object-fit: cover; } .small { font-size: 14px; } .contact h1, .contact i, .voip h1, .voip h2, .voip h3, .p360 h1, .p360 h2, .p360 .solutions h2, .p360 h3 { color: #0F7AC7; } .contact i { font-size: 32px; } .contact ul { list-style: none; padding: 0; } .contact p, .contact li { line-height: 1.8; } .contact h1, .contact strong { display: block; line-height: 1.4; } .contact > .wrap > .grid { grid-template-columns: 1fr 1fr; grid-gap: 20px; padding: 40px 0; } .contact .grid.half { grid-gap: 20px; } .contact .grid.half .cbox, .contact > .wrap > .grid > div:last-of-type div { min-height: 350px; background-color: #F1F1F1; padding: 20px clamp(20px, 4vw, 40px); } .cbox { vertical-align: top } .voip h1, .voip h2, .voip h3, .voip p, .options th, .options td, .p360 .meet h1, .p360 .meet p { text-align: center; } .voip .grid, .p360 .earn .grid { grid-gap: 40px; padding: 0 10px; } .voip .grid.half a { color: #707070; } .voip .grid h2 { font-size: 18px; } .voip .fa-check, .earn .fa-check { color: #38B361; margin-right: 5px; } .p360 .meet { padding: 40px 10px 80px; } .p360 .meet p, .p360 .earn p { max-width: 850px; margin: 0 auto; } .p360 .bundle { padding: 80px 0 50px; } .p360 .bundle h2, .p360 .bundle h3 { line-height: 1.2; } .p360 .bundle h2, .p360 .earn h2 { font-size: 30px; } .p360 .bundle h2 { max-width: 950px; margin: 0 auto; } .p360 .bundle .flex { margin-top: 20px; justify-content: space-evenly; } .p360 .bundle .flex > div { width: 200px; padding: 10px; } .p360 .bundle p:last-of-type { margin: 0; } .p360 .earn { background-color: #0F3D76; background-image: url(/images-design/bg-wave.jpg); background-size: cover; background-position: center; padding: 60px 0 80px; margin-bottom: 50px; } .p360 .earn .grid { margin-top: 40px; } .p360 .earn h3, .p360 .earn p { text-align: left; } .p360 .earn, .p360 .earn h2, .p360 .earn h3, .p360 .earn p { color: #fff; } .p360 .bundle h2, .p360 .earn h2, .p360 .earn h3, .p360 .earn p, .p360 .earn ul { padding: 0 10px; } .p360 .earn h3 { max-width: 300px; } .options, .lists { padding: 40px 10px; margin: 40px 0; } .options { background-image: linear-gradient(#F7FBFF 300px, #fff 300px); } .options .grid h3, .options .grid p, .options .grid span { color: #fff; } .voip .options .grid, .voip .lists .grid { grid-gap: 0; } .voip .options .grid { margin-top: 40px; } .options .grid h3 { font-size: 20px; } .options .grid span { font-size: 16px; } .options .grid > div { padding: 20px 50px 50px; } .options .grid > div:nth-of-type(1) { background-color: #347ED0; } .options .grid > div:nth-of-type(2) { background-color: #1D5699; } .options .grid > div:nth-of-type(3) { background-color: #0F3D76; } .options table tr:nth-of-type(even), .lists, .start, .p360 .meet, .p360 .bundle { background-color: #F7FBFF; } .options table { width: 100%; border-collapse: collapse; margin-top: 40px; } .options th { width: 203px; padding: 10px; } .options th span { display: block; } .options th:nth-of-type(2) span { color: #347ED0; border-bottom: 3px solid #347ED0; } .options th:nth-of-type(3) span { color: #1D5699; border-bottom: 3px solid #1D5699; } .options th:nth-of-type(4) span { color: #0F3D76; border-bottom: 3px solid #0F3D76; } .options td:first-of-type, .lists h2 { text-align: left; } .options td:first-of-type { width: 50%; } .options td { padding: 5px 10px; } .lists img { float: left; margin: 20px 40px; } .lists h2, .lists ul, .earn ul { padding-left: 0; } .lists ul, .earn ul { list-style: none; } .start { padding: 40px 10px; margin-top: 40px; border-radius: 20px; } .start .btn { font-size: 16px; } .btn { display: inline-block; background-color: #0F7AC7; color: #fff; padding: 10px 30px; border-radius: 5px; } .btn:hover, #free2flex input[type=submit]:hover, #contest input[type=submit]:hover, #reseller input[type=submit]:hover { background-color: #78a300; color: #fff; } .free h1, .free h2, .free p { text-align: center; } .free h1 { padding-top: 60px; } .free h1 sup { font-size: 18px; font-weight: normal; } .free h2, .free em { color: #0F7AC7; } .free h2 { max-width: 700px; font-size: 48px; line-height: 1.2; margin: 50px auto 30px; } .free img { max-height: 50px; } .free em { font-size: 50px; font-style: normal; line-height: 1.2; } .free .grid { grid-gap: 50px; align-items: center; margin-top: -40px; } .free .grid > div:last-of-type { background-color: #f5f5f5; } .free .flex > div { width: calc((100% / 3) - 20px); padding: 10px; } .free a { display: inline-block; font-size: 24px; font-weight: bold; } .free .smaller { font-size: 14px; margin: 50px 0 60px; } .partner { background-color: #f7fbff; background-image: url(/images-design/bg-free2flex.jpg); background-size: cover; background-position: center; padding: 50px 0; } .partner .grid { grid-gap: 80px; } .partner h2 { color: #707070; } .partner h3 { margin-bottom: 0; } .partner p { margin-top: 0; } #free2flex, #contest { border: none; padding: 0 40px; margin: 0 0 40px; } #reseller { border: none; margin: 0 0 40px } #free2flex input, #contest input, #reseller input, #reseller textarea { font-size: 18px; background-color: #fff; } #free2flex input, #contest input, #reseller input { height: 50px; } #free2flex label, #contest label, #reseller label { display: block; font-size: 14px; text-align: left; margin-bottom: 10px; } #free2flex input[type=submit], #contest input[type=submit], #reseller input[type=submit] { width: 70%; min-width: 240px; text-transform: none; background-color: #0F7AC7; padding: 0; border-radius: 5px; } #contest input[type=submit], #reseller input[type=submit] { margin-top: 15px; } .reseller a, .reseller .models h2 { color: #0F3D76; } .reseller a { border-bottom: 2px solid #0F3D76; } .reseller a:hover { border-bottom: 2px solid #0F7AC7; } .reseller .grid { grid-gap: 40px; } .reseller .signup.grid > div:first-of-type h1, .reseller .signup.grid > div:first-of-type strong, .reseller .demo h2, .reseller .demo p a:hover, .reseller .tools h2, .reseller a:hover, .reseller .hear h2, .reseller .logos h2, .reseller .hear .grid > div > div strong { color: #0F7AC7; } .reseller .signup.grid > div:first-of-type h1, .reseller .signup.grid > div:first-of-type strong { display: block; margin-top: 50px; } .reseller .signup.grid > div:last-of-type { background-color: #0F3D76; margin-top: -50px; padding: 40px 40px 10px; } .reseller .signup.grid > div:last-of-type h2, .reseller .signup.grid > div:last-of-type p, .reseller .models h2, .reseller .models h3, .reseller .models p, .reseller .demo h2, .reseller .demo p, .reseller .tools h2, .reseller .tools p, .reseller .logos h2, .reseller .hear h2 { text-align: center; } .reseller .signup.grid > div:last-of-type, .reseller .signup.grid > div:last-of-type h2, .reseller .signup.grid > div:last-of-type p, .reseller .models .grid > div h3 { color: #fff; } .reseller .signup.grid > div:last-of-type h2 { font-size: 26px; margin: 0; line-height: 1.2; } .reseller .signup ul { text-align: left; padding-left: 70px; } .reseller .signup li { display: inline-block; vertical-align: middle; width: 160px; line-height: 1.2; margin: 10px 0 40px 10px; position: relative; } .reseller .signup li:nth-of-type(odd) { margin: 10px 100px 40px 10px; } .reseller .signup li img { background-color: #f7fbff; padding: 10px; border-radius: 10px; position: absolute; top: 50%; transform: translateY(-50%); left: -80px; } .reseller .models, .reseller .tools, .reseller .hear .grid > div > div { background-color: #f7fbff; } .reseller .models { padding: 40px 0 0; margin: 50px 0; } .reseller .models h2, .reseller .tools h2, .reseller .logos h2 { font-size: 32px; } .reseller .models h2, .reseller .tools h2 { line-height: 1.2; margin-bottom: 0; } .reseller .models .grid { grid-gap: 10; position: relative; bottom: -20px; } .reseller .models .grid > div { background-color: #fff; border-radius: 20px 0 20px 20px; } .reseller .models .grid > div h3, .reseller .tools h3 { font-size: 24px; } .reseller .models .grid > div h3 { margin-top: 0; padding: 20px 0; border-radius: 15px 0 0 0; } .reseller .models .grid > div { border: 2px solid #41b36f; } .reseller .models .grid > div h3 { background-color: #41b36f; } .reseller .models .grid ul { list-style: none; padding-left: 60px; margin: 20px 0 30px; } .reseller .models .grid li { line-height: 1.4; position: relative; margin: 15px 30px 15px 0; text-align: justify;} .reseller .models .grid li:before { content: "✔"; font-weight: bold; color: #41b36f; position: absolute; left: -25px; } .reseller .demo { padding: 20px 0 50px; } .reseller .demo h2 { font-size: 20px; } .reseller .demo p a { font-size: 20px; } .reseller .tools, .reseller .hear { padding: 40px 0; } .reseller .tools .grid { margin: 40px 0 10px; } .reseller .tools .grid p { text-align: left; } .reseller .hear { overflow: hidden } .reseller .hear .grid > div { min-height: 540px; } .reseller .hear .grid > div:last-of-type { background-image: url(/images-content/photo-man.jpg); background-size: cover; } .reseller .hear .grid > div > div { width: 70%; padding: 40px; margin: 40px auto; position: relative; } .reseller .hear .grid > div > div:before, .reseller .hear .grid > div > div:after { position: absolute; width: 50px; height: 50px; } .reseller .hear .grid > div > div:before { content: url(/images-content/icon-quoteleft.svg); top: -220px; left: -60px; } .reseller .hear .grid > div > div:after { content: url(/images-content/icon-quoteright.svg); top: 130px; right: 150px; } .reseller .hear .grid > div > div p:last-of-type { color: #ccc; margin-top: 50px; } .reseller .hear .grid > div > div strong { border-bottom: 1px solid #eee; } .carousel img { display: inline-block; vertical-align: middle; max-height: 150px; margin: 0 40px; } .logos { height: 150px; overflow: hidden; margin: 20px 0 } .logos .carousel { height: 150px } section { padding: 30px 10px } section h1, section h2, section h3, section h4, section h5 { color: #50586b; } section h1 { font-size: 32px; line-height: 1.3; } section h2 { font-size: 24px; } section h3 { font-size: 18px; } section h4 { font-size: 16px; } section h5 { font-size: 14px; } section ul, section ol { padding-left: 30px } .product-scroll { margin: 20px 0 40px; } .product-scroll h2 { font-size: 21px; } .product-scroll img { vertical-align: middle; padding: 0 4% 10px; max-width: 92% } .quick-services { padding: 40px 0 20px; display: table; border-spacing: 4px; } .quick-services .table > a { display: table-cell; width: 20%; text-align: center; padding: 0 2% 20px } .quick-services i { display: inline-block; height: 45px; width: 60px; padding: 10px; transition: .5s; margin-top: -40px } .quick-services a:hover i, .quick-services a:hover h2 { transition: .1s ease-out,background .2s ease-in; } .quick-services h2 { font-size: 18px; } .product-scroll h2, .quick-services h2, .quick-services p { text-align: center; } .call-to-action { font-size: 24px; padding: 20px 2% } .call-to-action p { text-align: center; } .call-to-action a { margin: 20px 20px 0; } form { margin: 30px 0; padding: 20px; } input[type=text], input[type=email], input[type=number], input[type=tel], textarea, input[type=submit], select { font-size: 14px; font-family: 'Jost', sans-serif; } input[type=text], input[type=email], textarea, input[type=number], input[type=tel], select { padding: 0 10px; margin-bottom: 15px; border: none; margin: 0 auto 16px; display: block; } input[type=text], input[type=email], textarea, input[type=number], input[type=tel] { width: calc(100% - 20px); } input[type=text], input[type=email], input[type=number], input[type=tel] { height: 36px; } textarea { height: 90px; padding: 10px; } input[type=submit] { height: 35px; text-transform: uppercase; padding: 0 40px; border: none; border-radius: 3px; width: 100%; } select { width: 100%; height: 36px; } form input[type=submit]:hover { cursor: pointer; } #glossary-filter input { border: 1px solid #ccc; max-width: 600px } #portability textarea { height: 150px; } #newsletter { max-width: 300px; text-align: left; padding: 0; margin: 0 0 20px 0; } #newsletter input[type=email] { display: inline-block; height: 35px; width: calc(100% - 110px); background-color: #fff; padding: 0 10px; border: none; } #newsletter input[type=submit] { padding: 8px 10px; width: 80px; } #mc_embed_signup form { margin: 0; padding: 0 } #contact input[type=text], #contact input[type=email], #contact input[type=number], #contact input[type=tel], #contact textarea, #contact select { font-size: 16px; background-color: #fff; } #contact input[type=text], #contact input[type=email], #contact input[type=number], #contact input[type=tel], #contact select { height: 40px; } #contact textarea { height: 150px; } #contact { border: none; padding: 0; margin: 40px 0; } #contact input[type=submit] { height: 50px; } .team a { width: calc((100% / 5) - 65px ); margin: 0 10px 2%; display: inline-block; vertical-align: top; padding: 20px; border: 1px solid #f1f1f1; } .team h2 { font-size: 18px; text-align: center; margin: 10px 0 0; } .team h2 em { display: block; font-size: 16px; font-weight: normal; font-style: normal } .products .table.third > div:nth-of-type(2) { border-width: 1px; border-color: #f1f1f1; border-style: none solid; } .products .table.third > div, .products .quad .table.half > div { padding: 20px 3% } .products .table.third, .p360 .quad.bord { border-width: 1px; border-color: #f1f1f1; border-style: solid none; } .products .table.third.center li { text-align: center } .products p.left { text-align: left } .products .table { margin-bottom: -1px; } .products h2 { text-align: center; margin: 40px 0 30px; } .products > .table.half > div { padding: 0 } .products .table .table > div { border-right: 1px solid #f1f1f1; padding: 0 3% } .products h3, .products p { text-align: center } .products h3 { font-size: 16px; margin: 10px 0; } .products p { margin-bottom: 10px; } .products ul { padding: 3%; } .products li { list-style: none; margin-bottom: 5px; } #sdWan { margin: 0 auto; } #sdWan li { display: inline-block; padding: 0 5px; } .bcdr .table.half > div:nth-of-type(2) { border-width: 1px; border-color: #f1f1f1; border-style: none solid; padding: 20px } .bcdr .table.half > div:first-of-type { border-width: 1px; border-color: #f1f1f1; border-style: none solid; padding: 20px } .bcdr .table.half > div { padding: 20px 3% } .bcdr h3 { text-align: center; font-size: 16px; margin: 10px 0; } .bcdr p { font-style: italic; margin-bottom: 10px } .quad > div:nth-of-type(2) .table > div:nth-of-type(2) { border: none } .zulu li span { font-weight: bolder } .zulu li { display: block; list-style: none; margin-bottom: 7px; } .zulu li i { color: #78A300; margin-right: 5px } .phones { margin-top: 20px } .phones img { display: block; margin: 0 auto; max-height: 225px; } .phones.clearlyip h3 { min-height: unset } .phones.clearlyip h2 { margin-bottom: 0 } .phones.clearlyip h2 + p.center { margin-top: 0; font-size: 15px } .phones h2, .phones h3, .phones p { text-align: center } .phones h3 { font-size: 15px; min-height: 75px; line-height: 1.5; padding: 0 5px; } .phones h3 span { font-size: 14px; } .phones p { width: 90%; font-size: 13px; margin: 15px auto } .phones .table.half span { display: block; font-weight: normal } .free2flex { background-image: url('/images-content/slides/13.jpg'); background-size: cover; padding: 20px 8% 30px; } .free2flex .table.half > div { vertical-align: middle; } .free2flex .table.half > div:first-of-type { text-align: left; } .free2flex strong { display: block; font-size: 24px; } .free2flex p { font-size: 16px; line-height: 1.6; color: #fff; text-shadow: 1px 1px 3px #000; } .free2flex .btn { display: inline-block; font-size: 14px; background-color: #343434; padding: 10px 50px; margin: 20px 0; border-radius: 3px; } .contest h1, .contest .grid > div:last-of-type h2 { text-align: center; } .contest h1 { margin-bottom: 50px; } .contest h2 { color: #0F7AC7; } .contest .grid > div:last-of-type h2 { font-size: 42px; line-height: 1.2; margin-top: 50px; padding: 0 40px; } .contest .grid { grid-gap: 50px; } .contest .grid > div:last-of-type { background-color: #f5f5f5; } .alpha, .glossary h2 { text-transform: uppercase; } .alpha { padding: 0; margin: 0; } .alpha li { display: inline-block; color: #999; padding: 0 5px; } .glossary li { list-style: none; border-bottom: 1px dotted #e3e3e3; } .glossary li:last-of-type { border: none; } .glossary ul { margin: 0; padding: 0; text-align: left; } .glossary li li { display: inline-block; padding-right: 15px; margin-bottom: 15px; border: none; } .glossary h2 { font-size: 36px; color: #0F7AC7; margin: 40px 0 20px; } .glossary h3, .glossary div { display: inline-block; vertical-align: top; } .glossary h3 { font-size: 14px; margin: 15px 0; padding-right: 20px; } cite { text-align: right; display: block; border-bottom: 1px solid gray; } cite:last-of-type { border-bottom: none; } .crm { margin: 40px 0; padding: 0 40px 20px; border: 1px solid #f1f1f1; } .crm h2, .crm p { text-align: center; } .crm h2 { text-transform: uppercase; color: #0F7AC7; } .crmicon { background-color: #0F7AC7; color: #fff; margin-right: 10px; padding: 8px 5px; border-radius: 100px; } .crm img { max-width: 140px; max-height: 90px; vertical-align: middle; margin: 20px 25px; } footer, footer a { color: #6d6d6d; } footer { font-size: 16px; } footer .cta { display: block; font-size: 24px; font-weight: 500; line-height: 1.7; background-color: #001E45; color: #fff; padding: 30px; } footer .cta span { color: #0F7AC7; } footer .cta:hover { color: #fff; } footer .cta:hover span { color: #78a300; } footer h3 { font-size: 20px; margin-top: 0; } footer ul { list-style: none; padding: 0; } .footnav { padding: 60px 0; } .footnav a { display: block; margin: 4px 0 } .footnav ul { margin-bottom: 0; } .footnav > div:last-of-type { padding-left: 40px; border-left: 2px solid rgba(0,0,0,.1); } footer .flex { justify-content: space-evenly; } footer .flex > div { flex-grow: 1; } footer .subfoot { font-weight: 500; padding-bottom: 10px; } footer .subfoot li { display: inline-block; margin-right: 10px; } footer .subfoot img { opacity: .6; transition: ease-out .3s; } footer .subfoot img:hover { opacity: 1; transition: ease-in .3s; } footer .subfoot > div { align-self: center; } footer .subfoot > div:first-of-type { text-align: left; } footer .subfoot > div:last-of-type { text-align: right; } .social { font-size: 26px; text-align: left; line-height: 1; padding: 0; margin: 0; } .social li { display: inline-block; vertical-align: middle; margin-right: 20px; } .social a { display: block; } .important { color: #dc6528; } .customers img { margin: .9%; border: 1px solid; padding: .9%; } #map { height: 400px; width: 100%; } .matrix { width: 100%; border-collapse: collapse; margin-bottom: 40px; font-weight: bold } .matrix tr:nth-child(even) { background: #dbdbdb; } .matrix tr:nth-of-type(3) { border-top: 2px solid #fff; } .matrix th, .matrix .top td, .matrix td:first-of-type { font-size: 15px } .matrix th, .matrix td { border: 1px solid #666; } .matrix th, .matrix .top td { color: #fff } .matrix th { background-color: #0F7AC7; text-transform: uppercase; padding: 14px 1% } .matrix td { width: 15%; text-align: center; font-size: 13px; padding: 10px 5px; line-height: 16px } .matrix td:first-of-type { width: 30%; padding: 5px 4% 5px 1%; text-align: left } .matrix .top, .matrix .top td:first-of-type { background: #fff !important; border: none } .matrix .top td { background-color: #78a300; border: none; outline: 1px solid #fff; line-height: 22px; padding: 15px } .scrolled .top td:first-of-type { width: 630px; } .scrolled .top:nth-of-type(1) td:nth-of-type(3) { padding: 15px 0; left: 945px } .scrolled .top td { width: 315px; padding: 15px 0; position: absolute } .scrolled .top td:nth-of-type(2) { left: 630px; } .scrolled .top:nth-of-type(2) td:nth-of-type(3) { left: 757px; } .scrolled .top { position: fixed; top: 0; display: block } .scrolled .top:nth-of-type(2) { top: 34px } .scrolled .top span { display: block; position: relative; top: 50%; transform: translateY(-50%) } .scrolled { margin-top: 93px } #before-after-chart { border-collapse: collapse; margin: 5% 0%; } #before-after-chart th, #before-after-chart td { padding: 0% 1%; border: 1px solid #eee; } #before-after-chart { width: 100%; } #before-after-chart th { color: #fff; background: #343434; text-align: center; } #before-after-chart tr:nth-child(even) { background: #eee; } .casestudies h2 { color: #0F7AC7; } .casestudies ul { list-style: none; } .casestudies li::before { content: "•"; color: #0F7AC7; display: inline-block; width: 1em; margin-left: -1em; } .clearfly-home { max-height: 325px; padding-bottom: 4% !important; } .clearfly { max-width: 325px; } .pad { padding-left: 10px; padding-right: 10px } .careers { text-align: left; } .careers .traits li:before { content: "✔"; font-weight: bold; color: #41b36f; position: absolute; left: -25px; } .careers .traits ul { list-style: none; padding-left: 60px; margin: 20px 0 30px; } .careers .traits li { line-height: 1.4; position: relative; margin: 15px 30px 15px 0; } .careers .job-posting ul { list-style: none; } .blogsidebar li { margin-right: 20px } #policy * { text-align: left } #policy .accordion-section { padding: 0 10px } #policy ol { padding-left: 40px } #policy article{margin:0;padding:0} .policies { padding: 0; margin:0 0 10px} .policies li { display: inline-block; margin: 0 } .policies a { margin: 5px; padding: 5px 10px } @media(max-width:1300px) { header .grid { grid-template-columns: 1fr } header .logo img { display: block; margin: 0 auto; max-width: 200px } .highlight { background-color: #ace0f5 !important; color: #0F7AC7 } nav { margin: 10px 0; } nav ul{text-align:center} nav ul ul { display: none !important } .mobile-nav ul { display: block; } nav li a { padding: 0 10px; margin: 5px } .container { padding-top: 205px; } footer .flex { justify-content: space-evenly; } footer .flex > div { padding: 0 10px !important; margin-bottom: 20px } footer .flex > div:last-of-type { border: none; } } @media(max-width:999px) { nav ul ul { display: none !important; } .contact h1 { text-align: center; } .contact > .wrap > .grid { display: block } .contact > .wrap > .grid > div:last-of-type { margin-top: 20px } .contact .grid.half .cbox { margin-right: 0; min-height: unset } footer .subfoot li { margin: 0 5px; } footer .subfoot > div { text-align: center !important; } section { margin-top: 0 } .quick-services h2 span, .products h3 span { display: block; } .quick-services .table > a { padding: 0 1% 20px } .header-contact strong { display: block; } .header-contact strong:after, nav i.fa { display: none } .team a { width: calc((100% / 5) - 35px); margin: 0 5px 2%; padding: 10px } .team a h2 span { display: block; } footer .a8b { text-align: center } .secnav li { padding: 0 } .secnav a { display: block; margin: 5px; padding: 5px } .alpha li { margin: 6px; padding: 6px } .customers img { max-width: 20% } .atamobile { display: none !important; } .table.quad, .table.quad > div { width: auto !important; display: block } .free2flex .table.half > div:last-of-type { display: none; } .navproducts a > * { display: none !important; } .navproducts strong { display: block !important; } .logos div.cycle-slide { width: 250px !important; height: 350px; padding: 20px 20px 0; vertical-align: top; border-right: 20px solid #fff; } .logos p { white-space: normal; } .voipbanner p, .livebanner p { margin-right: 20px; } .voipbanner p { max-width: 550px; } .livebanner p { max-width: 500px; } .voipbanner .grid, .livebanner .grid { grid-template-columns: repeat(1,1fr); } .contactbanner p, .homebanner p { margin: 0 50px; max-width: 350px } .freebanner p { max-width: 500px; } .freebanner strong { font-size: 70px; } .free .grid { margin-top: 0; } .homeblogs .post p:nth-of-type(1) { top: 50px; } .homeblogs .post h3 { top: 100px } } @media(max-width:767px) { body header { position: relative;background-image: none; background-color: #fff } body header li a { color: #707070 } header .grid { grid-template-columns: 1fr !important } header .grid > div { text-align: center !important } .container { padding-top: 0 !important } .solutions p, .help p { padding-left: 10px !important; padding-right: 10px !important; } .solutions .grid h2 { padding: 0 10px; } .quick-services .table { display: block; width: auto; } .quick-services h2 span { display: inline } .quick-services i { margin: 0 } .quick-services .table > a { display: inline-block; width: 46%; vertical-align: top; } .quick-services { background-color: #f1f1f1 } .team a { display: inline-block; width: auto; clear: both; margin: 10px } .team h2, .team img { display: inline-block; vertical-align: middle; } .team h2 { width: 200px } .team a h2 span { display: inline } .customers img { max-width: 28% } .education.table.third > div { display: block; width: auto; padding: 0 !important } .lists img { float: none; margin: 0; } .livebanner { background-position-x: 70%; } .bundle .grid { grid-template-columns: repeat(3,1fr); } .voipbanner { margin-left: -70px; } .freebanner { background-position-x: 1100px; } .free .grid, .partner .grid, .contest .grid { grid-template-columns: repeat(1,1fr); grid-gap: 40px; } .free .smaller, .partner > .wrap { padding: 0 20px; } .free h1 { padding-top: 30px; } .free h2 { margin: 30px auto; } .partner { background-image: none; padding: 30px 0 0; } .partner img { display: block !important; padding-top: 40px; } .contest h1 { margin-bottom: 20px; } .contestbanner p { max-width: 400px; font-size: 24px; } .contestbanner strong { font-size: 42px; } .reseller .signup.grid > div:last-of-type { order: 1; margin-top: 0 } .reseller .signup.grid > div:first-of-type { order: 2; } .reseller .grid { grid-template-columns: 1fr } .reseller .models .grid { grid-gap: 20px; } .reseller .models .grid > div { border-radius: 20px } .reseller .models .grid > div h3 { border-radius: 15px 15px 0 0 } .reseller .signup li { width: auto; margin: 40px 20px 80px 40px !important; display: block } .tools .grid { padding: 0 10px } .reseller .models { padding: 40px 20px 0 } .reseller .demo { padding: 20px 20px 50px } .reseller .tools { padding: 40px 20px } .signup .pad, .hear h2 { padding-left: 20px; padding-right: 20px } .reseller .demo h2 { font-size: 24px } .resellbanner p { margin: 0 20px } .help { height: 400px; } .hero { height: 500px } .hero .btn { margin: 20px auto } .help, .help h2, .help p, .hero p, .hero .wrap { text-align: center !important; } .testimonials h2, .testimonials p, .help h2, .help p { max-width: 100% !important; text-shadow: 1px 1px 3px rgba(0,0,0,.3); } .hero p { max-width: unset } .help a { text-shadow: none; } .testimonials { padding: 0; } .testimonials .bgimg .mobile { display: block } .testimonials .grid { background-color: rgba(15,61,118,.6); } .testimonials .grid, .help .grid { grid-template-columns: repeat(1,1fr); } .help { background-position: left; } .homeblogs .blogs .postThumbnail { height: auto; margin: 0 } } @media(max-width:700px) { .contactbanner, .homebanner { height: auto; position: relative; padding-top: 350px } .contactbanner p, .homebanner p { margin: 0 20px; max-width: unset } .contactbanner a, .homebanner a { display: inline-block; margin: 20px; } .contactbanner a, .homebanner a, .contactbanner i, .homebanner i { font-size: 30px; font-weight: 400 } .homebanner .wrap, .contactbanner .wrap { top: unset; transform: none; bottom: 0; padding-top: 100px; background-image: linear-gradient(transparent,rgba(255,255,255,.5) 80px,#fff,#fff) } .voipbanner .grid, .livebanner .grid { background-image: none; background-color: #fff; border-bottom-right-radius: 880px 300px } .voipbanner, .livebanner { padding-bottom: 250px; text-align: left; height: auto } .voipbanner { margin-left: 0; } .voipbanner { background-position: 75% 100px; } .livebanner { background-position: 85% 100px; } .voipbanner .grid > div:first-of-type, .livebanner .grid > div:first-of-type { padding: 40px 0 0 } .voipbanner p, .livebanner p { max-width: 550px; margin: 0 40px 0 20px; } .voipbanner .btn, .livebanner .btn { margin: 20px; } .p360 .earn .grid { grid-template-columns: repeat(1,1fr); grid-gap: 0; justify-content: space-between; margin-top: 20px; } .p360 .earn h3 { max-width: 100%; } .freebanner { background-position-x: 1000px; } .freebanner > .wrap { top: 70%; transform: translateY(-70%); } .freebanner p { max-width: 400px; font-size: 24px; } .freebanner strong { font-size: 55px; } .homeblogs .posts { grid-template-columns: 1fr } .homeblogs .posts .post { height: 300px; width: 100% } .homeblogs .post p:nth-of-type(1) { top: 30px; } .homeblogs .post h3 { top: 70px; max-width: 400px } .homeblogs .post p span { bottom: 30px } section .blogs .postThumbnail { float: none; max-width: calc(100% + 20px); width: calc(100% + 20px); margin: 0 -10px; height: 250px } .homeblogs .blogs .postThumbnail { max-width: 100%; width: 100% } .banner.hipaaHeader h1 { font-size: 9vw; letter-spacing: -3px } } @media(max-width:600px) { .homebanner a, .contactbanner a { margin: 20px; } .solutions img { width: 100%; height: 300px; } .contactbanner p { text-shadow: 0 0 20px #f7fbff, 0 0 10px #f7fbff; } .contact .grid { grid-template-columns: 1fr; } .contact > .wrap > .grid > div:last-of-type div { padding: 20px; } .products .table.half, .products .table.half > div { display: block; width: auto; padding: 0 !important; } .table.third, .table.third > div { display: block; width: auto; padding: 0 !important } .products div, .phones div { border: none !important; margin: 40px 0 } .quad .table.half { border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0 } .p360 .quad.bord { border: none } .request { text-align: center; padding: 0 } .header-contact strong:after { display: inline; } .glossary { padding: 0 } .glossary h3, .glossary div { display: block; width: auto; } .banner h1 { font-size: 10vw; letter-spacing: -3px } .banner h1, .banner h1 span { text-align: center } .voipbanner strong { font-size: 32px; } .voip .grid.third { grid-template-columns: repeat(1,1fr); } section > .wrap > .imgRight { max-width: calc(100% + 20px); width: calc(100% + 20px); margin: 1em 0 1em -10px; float: none } section > .wrap > * > .imgRight { max-width: 100%; width: auto; margin: 1em auto; float: none; display: block } .options table { width: calc(100% + 20px); margin-left: -10px } .freebanner { background-position-x: 920px; } .freebanner p { max-width: 350px; font-size: 20px; } .freebanner strong { font-size: 50px; } .hero strong { font-size: 32px; } .intro .grid { grid-template-columns: repeat(2,1fr); } .intro img { width: auto; height: auto; max-height: unset; } .collaboration .grid { display: block; } .collaboration h3 { padding: 0 10px; } .collaboration a { margin: 20px 0; } .join strong { padding: 0; } } @media(max-width:500px) { .table.half, .table.half > div { display: block; width: auto; padding: 0 !important; } footer .table p { text-align: center } .products .table.third i { float: left; margin: 0 8px 8px 0 } .products h3, .products p { text-align: left } .products .table.third, .products .table.third > div { border: none !important; } .quick-services h2 span, .products h3 span { display: inline; } .quick-services h2, .products h3 { margin-top: 20px } .products .table.third.center li { text-align: left; list-style: disc; margin-left: 40px } .quick-services.table > a { width: auto; } .customers img { max-width: 45% } .banner h1 span { font-size: 20px } .phones img { max-height: 300px; } .voip .grid.half { grid-template-columns: repeat(1,1fr); } .voip .grid { grid-gap: 20px; } .livebanner { background-position: 85% 150px; } footer .footnav.flex > div:nth-of-type(-n+4) { flex: 1 0 140px } footer .footnav.flex > div:nth-of-type(n+5) { flex: 1 0 300px } .subfoot.flex { display: block } footer .cta { padding: 40px 20px } .options table tr { display: block } .options table tr td:first-of-type, .options table tr th:first-of-type { display: block; width: auto; text-align: center } .options table tr td, .options table tr th { width: calc((100% / 3) - 20px - .25em); display: inline-block } .options table tr:first-of-type th { vertical-align: bottom } .freebanner { height: 500px; background-image: url(images-design/banners/free2flex-mobile.jpg); background-position: left; } .freebanner > .wrap { top: 50%; transform: translateY(-50%); } .contestbanner p, .contestbanner strong { color: #111; } .reseller .signup.grid > div:last-of-type { padding: 40px 20px 10px } .reseller .models .grid li:before { left: -35px } .special { line-height: 2; } .special .fa-phone{display:inline-block;width:21px;height:16px} .homeblogs .posts { grid-template-columns: 1fr } .homeblogs .posts .post { height: 300px } .solutions .grid.half { display: block; } } @media(max-width:425px) { .freebanner { background-position-x: -50px; } } @media(max-width:400px) { footer .cta { padding: 10px; } .quad .table.half, .quad .table.half div { border: none; } .quad .table.half div { border: none } .quad .table.half, .quad .table.half > div { display: block; width: auto !important; padding: 0; } .quad .table.half i.fa { float: left; margin: 0 8px 8px 0 } .products .quad h3 { margin-top: 0 } section h1 { font-size: 28px } section h2 { font-size: 22px } .quick-services { background: none } .quick-services .table > a { width: auto; margin: 8px 0; padding-top: 20px } .carousel div.cycle-slide { width: 200px !important; padding: 0 20px !important; } .contactbanner strong, .homebanner strong, .voipbanner strong { font-size: 32px } .contactbanner p, .homebanner p, .voipbanner p { font-size: 22px } .free h2 { width: 95%; } .free .flex > div { width: calc(100% - 20px); } #free2flex { padding: 0 20px; } #free2flex input[type=submit] { width: 100%; } .freebanner { background-position-x: -100px; } .freebanner p { font-size: 18px; } .freebanner strong { font-size: 40px; } .contestbanner { background-position-x: -400px; } .contestbanner p { margin: 0 10px; } .reseller .hear .grid > div { min-height: 140vw } .intro .grid { grid-template-columns: repeat(1,1fr); } .blogsidebar ul:first-of-type { grid-template-columns: 1fr } .hero strong { font-size: 28px; line-height: 1.5 } } @media(max-width:320px) { .cycle-slideshow span { width: auto; } .livebanner { background-position: 85% 300px; } .freebanner { background-position-x: -150px; } }