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, main { display: block; } audio, canvas, video { display: inline-block; } audio:not([controls]) { display: none; } [hidden], .hide { display: none; } html { font-size: 100%; overflow-y: scroll; } img, iframe { border: none; display: block } img { margin: 0 auto } iframe { aspect-ratio: 16 / 9 auto; width: 100%; margin: 1em auto; } .clear { clear: both; } body { background: #22211d; font-size: 15px; color: #606060; font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Arial, Helvetica, sans-serif; margin: 0; min-width: 320px; text-align: center; } body, button, input, select, textarea { font-family: sans-serif; } a { color: #00aded; text-decoration: none; } a:hover, a:active { color: #ef393e; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } blockquote { margin: 0 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 30px; } dd { margin: 0 0 0 40px; } nav ul, nav ol, header li, footer li { list-style: none; list-style-image: none; } img { border: 0; } .starcon { float: left; margin-right: 30px; } .imgLeft, .imgRight { max-width: 50%; } .imgRight { float: right; margin: 5px 0 10px 20px; } .imgLeftcenter { float: left; margin: 110px 20px 10px 0; } .imgcenter { margin: 70px 20px 10px 10px; } .borderright { border-right: solid; } .imgLeft { float: left; margin: 5px 20px 10px 0; } svg:not(:root) { overflow: hidden; } figure { margin: 0; } table { border-collapse: collapse; border-spacing: 0; } .table { display: table; width: 100%; } .table > div, .logo { display: table-cell; vertical-align: top; } .table.mid > div { vertical-align: middle } .table.half > div { width: 50%; } .table.half > div:first-of-type { padding-right: 1%; } .table.half > div:last-of-type { padding-left: 1%; } .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%; } .table ul { margin: 0 } .grid { display: grid; grid-gap: 10px 20px } .grid.mid { align-items: center } .grid.half { grid-template-columns: repeat(2,1fr); } .grid.third { grid-template-columns: repeat(3,1fr); } .grid.fourth { grid-template-columns: repeat(4,1fr); } .grid.fifth { grid-template-columns: repeat(5,1fr); } .outline { border: solid; border-color: #000; } .center { text-align: center; } .strcenter { display: block; text-align: center; } .wrap { position: relative; display: block; margin: 0 auto; max-width: 1024px; } .container { background: #fff; } .grid.content { grid-template-columns: 1fr 230px; grid-gap: 10px 30px } .button, .btn { width: 47%; max-width: 200px; text-align: center; font-weight: bold; display: inline-block; padding: 10px 0; margin: 10px 1.5% 10px 0; background: #00aded; color: #fff; border-radius: 4px; } .buttonStyle2 { width: 75%; max-width: 400px; text-align: center; font-weight: bold; display: inline-block; padding: 10px 0; margin: 10px 1.5% 10px 0; background: #00aded; color: #fff; border-radius: 4px; } .button:hover, .btn:hover { background: #ef393e; color: #fff; } hr { border: none; border-bottom: 1px solid #ccc; } #bbb { margin: 20px 3% 0 5%; display: block; width: 200px; } .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 } h1, h2, h3, h4, h5, h6, p, li, dt, td, address { text-align: left; line-height: 1.4; } img, iframe, video { max-width: 100%; } .ib { display: inline-block; vertical-align: top; } ul.right li { text-align: right; } .nowrap { white-space: nowrap; } header .grid { display: grid; grid-gap: 20px; grid-template-columns: 320px 1fr 3fr; align-items: center } .review { width: 116px; height: 48px; overflow: hidden; margin: 0 auto } .review > div { display: inline-block; width: 140px; height: 50px !important; overflow: hidden } header { background: #fff; color: #4d4d4d; font-weight: bold; } header .right, header .right li, .mark { text-align: right; } header .right a, .box a, h2, h3, h4 { color: #4d4d4d; } header .right a:hover, footer a:hover { color: #00aded; } header ul { padding: 0 } header a, nav ul ul li, nav ul ul a, nav li:hover > ul { display: block; } header .social li { display: inline-block; } .social a { display: inline-block; width: 28px; height: 28px; margin-left: 5px; } .blog { background: url(/images-design/social.png) no-repeat 0 0; } .facebook { background: url(/images-design/social.png) no-repeat -30px 0; } .twitter { background: url(/images-design/social.png) no-repeat -60px 0; } .linkedin { background: url(/images-design/social.png) no-repeat -90px 0; } .gplus { background: url(/images-design/social.png) no-repeat -120px 0; } header .social, .box, .disc1, .disc2, .disc3, .disc4, footer .col { display: inline-block; vertical-align: top; } .ipvt { padding: 20px 10px; } .ipvt h2 { margin-bottom: 30px; } .ipvt .table > div:first-of-type { width: 200px; padding-right: 40px; } .ipvt .table > div:last-of-type { width: calc(100% - 240px); } .ipvt .table > div { vertical-align: middle; } .ipvt li { margin: 10px 0; } .ipvt hr { border-bottom: 1px solid #eee; margin: 20px 0 40px; } .ipvt .start { font-size: 20px; text-align: center; } .borderleft { border-left: 3px outset #e2b1b1; } .review iframe { margin: 0 } nav { background: #ef393e; font-weight: bold; text-transform: uppercase; } nav ul { margin: 0; padding: 0; } nav li { display: inline-block; vertical-align: middle; } nav li a { color: #fff; display: block; text-align: center; padding: 16px 8px; margin: 0 8px; font-size: 14px } nav li a:focus, nav li a:hover { background: #b32b2e; color: #fff } nav ul ul { display: none; min-width: 200px; line-height: 1.4; position: absolute; padding-bottom: 5px; z-index: 999; background: #ef393e; } nav ul ul a { padding: 5px 8px; margin: 5px 0 0 0; } .banner { background: #22211d; } .cycle-slideshow { position: relative; max-width: 1024px; display: block; height: 350px; margin: 0 auto; overflow: hidden; text-align: right; } .cycle-slideshow a { width: 100%; height: 100%; text-decoration: none; position: relative; } .cycle-slideshow div { width: 90%; max-width: 400px; min-width: 310px; height: 350px; position: relative; display: inline-block; text-align: left; } .cycle-slideshow strong, .cycle-slideshow p, .cycle-slideshow span { color: #fff; text-transform: uppercase; text-shadow: 0 0 20px #22211d; position: relative; } .cycle-slideshow strong { color: #ef393e; font-size: 34px; top: 65px; } .cycle-slideshow p { font-weight: bold; top: 50px; font-size: 28px; } .cycle-slideshow span { position: absolute; background: linear-gradient( #f6f6f6, #d6d6d6); bottom: 45px; font-weight: bold; color: #606060; text-align: center; text-transform: capitalize; width: 200px; height: 35px; line-height: 1; border: 1px outset #eee; border-radius: 5px; text-shadow: none; } .cycle-slideshow a:hover span { color: #00aded; } .out-pager { text-align: center; z-index: 500; position: relative; top: 0; font-size: 0; cursor: pointer; height: 22px; } .out-pager span { width: 28px; height: 22px; display: inline-block; background: url(/images-design/bullets.png) no-repeat; } .out-pager span.cycle-pager-active { background: url(/images-design/bullets.png)no-repeat 0 -22px; color: #fff; } a[class^=slide] { background-repeat: no-repeat; } .slide1 { background: url(/images-design/slides/1.jpg); } .slide2 { background: url(/images-design/slides/2.jpg); } .slide3 { background: url(/images-design/slides/3.jpg); } .slide4 { background: url(/images-design/slides/4.jpg); } .box { width: 49%; padding: 20px 0; text-align: center; } .box strong, .improve strong { display: block; font-size: 20px; color: #4d4d4d; padding: 20px 0 10px; } .box a:hover strong { color: #00aded; } .box p { margin: 0 auto; text-align: center; } .box img { max-height: 180px; border-radius: 500px } .home .video { margin-top: 0; } .team { font-size: 18px; padding: 20px 0; background: #00aded; color: #fff; } .team img { border: 5px solid #fff; margin: 20px 1% 0; } .team .ib { width: 46%; margin: 0 1%; } .home > div { font-size: 18px; padding: 1%; } .home > div:nth-of-type(1) { background: #000 url(/images-design/slides/1.jpg) no-repeat center center; background-size: cover; width: auto; min-height: 350px; margin-bottom: 12px } .home > div:nth-of-type(1) h2, .home > div:nth-of-type(1) p { color: #fff; text-align: right; } .home > div:nth-of-type(1) .wrap { position: relative; } .home > div:nth-of-type(1) .wrap div { padding: 4% 3%; width: 50%; position: absolute; right: 10px; top: 0px; } .home > div:nth-of-type(2) div:nth-of-type(2) h2 { background: #ef393e; padding: 20px; border-radius: 0 0 10px 0; color: #fff; margin: 0; } p.cursive { font-family: 'Kaushan Script', cursive; font-size: 24px; } .home > div:nth-of-type(2) div:nth-of-type(2) h2 a { color: #fff; } .home > div:nth-of-type(2) div:nth-of-type(2) h2 a:hover { color: #eee; } .home > div:nth-of-type(3) { background: #eee; } .home > div:nth-of-type(3) h2 span { color: #ef393e; } .circle { display: inline-block; background: #ef393e; border-radius: 50%; color: #fff; padding: 20px; height: 90px; width: 90px; text-align: center; } .home > div:nth-of-type(3) div #image-container { position: relative; } .home > div:nth-of-type(3) div #image-container p { font-size: 1.1em; position: absolute; bottom: 3%; left: 11%; transform: rotate(-25deg); } .home > div:nth-of-type(4) div:nth-of-type(1) > .half div:nth-of-type(2) { width: 80%; } .home > div:nth-of-type(4) { border-top: 5px solid #ef393e; border-bottom: 5px solid #ef393e; } .home > div:nth-of-type(4) ol { list-style: none; counter-reset: benefits; margin: 0; padding: 0; } .home > div:nth-of-type(4) ol li { margin: 0 0 10px 0; } .home > div:nth-of-type(4) ol li::before { content: counter(benefits); counter-increment: benefits; border: 2px solid #ef393e; padding: 5px; font-weight: bold; display: inline-block; width: 30px; height: 30px; margin: 0 10px 0 0; border-radius: 100%; text-align: center; } .home > div:nth-of-type(4) div h3 { color: #ef393e; } .home > div:nth-of-type(4) div h2:nth-of-type(2) { background: #ef393e; padding: 20px; border-radius: 0 10px 0 0; color: #fff; margin: 0; } .home > div:nth-of-type(4) div h2:nth-of-type(2) a { color: #fff; } .home > div:nth-of-type(4) div h2:nth-of-type(2) a:hover { color: #eee; } .benefitscontainer { margin-top: 5%; } .benefitscontainer h2 { color: #ef393e; } .home > div:nth-of-type(5) { } .home > div:nth-of-type(5) div h2 { color: #ef393e; } .sidebg { background-image: url(/images-content/outsidebg.jpg); background-position: bottom } .improve { margin: 30px 0; } .improve strong { text-align: center; } div[class^=disc] { width: 160px; height: 160px; margin: 15px 45px; border-radius: 150px; } div[class^=disc] strong { color: #fff; margin-top: 40px; } .disc1 { background: #00aded; } .disc2 { background: #ef393e; } .disc3 { background: #f7941d; } .disc4 { background: #39b54a; } aside { margin: 40px 0; padding: 0 10px; text-align: center; } aside ul { text-align: left; margin: 0; padding: 0; } aside ul li, summary { border-radius: 10px; list-style-type: none; margin-bottom: 10px; } aside ul li a, summary { position: relative; background: #767676; color: #fff; display: block; font-size: 16px; border-radius: 4px; padding: 8px 6%; } aside ul li a:hover, summary:hover { background: #00aded; color: #fff; cursor: pointer } aside i { position: absolute; top: 35%; right: 5%; } aside .hvoip { display: none; } aside details summary { margin-bottom: 0; } aside details ul { margin-top: 15px; width: 100%; box-sizing: border-box; padding-left: 10px } main { padding: 20px 0; } main li { margin: 8px 0 } .nolist { list-style: none; padding-left: 0; } .noframe { border: none; } .grandstream h1 span { display: block; font-size: 18px; } .grandstream ul { padding-left: 20px; } .grandstream li strong { font-size: 15px; } .grandstream li p { margin-top: 5px; } .grandstream .prodimgs { text-align: left; } .grandstream .prodimgs img { max-height: 100px; margin: 15px; } .appFeatGraph { padding: 5% 0; } .appFeatGraphContent { display: grid; grid-gap: 0; grid-template-columns: repeat(2,1fr); } .appFeatGraphContent div { padding: 5%; } .appFeatGraphContent div:nth-child(odd) { border-right: 1px solid #ddd; } .appFeatGraphContent div:nth-child(1), .appFeatGraphContent div:nth-child(2) { border-bottom: 1px solid #ddd; } .appFeat { grid-template-columns: repeat(4,1fr); text-align: center; grid-gap: 30px; padding: 5% 0; } .appFeat p { text-align: center; } .appFeatDescrip { grid-template-columns: 1fr 3fr; } #specSheet { border-collapse: collapse; width: 100%; } #specSheet td, #specSheet th { border: 1px solid #ddd; padding: 8px; text-align: center; } #specSheet tr:nth-child(even) { background-color: #f2f2f2; } #specSheet tr:hover { background-color: #ddd; } #specSheet tr td:nth-child(1) { text-align: right; font-weight: bold; } #specSheet th { padding-top: 12px; padding-bottom: 12px; text-align: center; background-color: #00aded; color: #fff; } .remotePlans { grid-template-columns: repeat(5,1fr); grid-gap: 0; } .remotePlans div { border: 1px solid #f2f2f2; } .remotePlans div:hover, .addOnPlansContent div:hover { background-color: #ddd; } .remotePlans div ul { padding: 0 5%; } .remotePlans ul { margin: 0; padding: 0; } .remotePlans ul li { list-style-type: none; padding: 5% 0; } .remotePlans h3 { background: #00aded; color: #fff; text-align: center; padding: 5% 3%; } .remotePlansEmp { color: #ef393e; } .addOnPlans { padding: 5% 0; } .addOnPlansContent { grid-template-columns: repeat(3, 1fr); } .addOnPlansContent div { padding: 5%; border: 1px solid #f2f2f2; } .sectContent { grid-template-columns: repeat(2,1fr); padding: 5% 0; } .allInOne { display: grid; grid-gap: 0; grid-template-columns: 1fr 3fr; } .allInOne div { border-bottom: 1px solid #eee; padding: 5% 0; } .appFeatAndroid { grid-template-columns: repeat(3,1fr); text-align: center; grid-gap: 30px; } .appFeatAndroid h3 { text-align: center; color: #4d4d4d; } .newSign { color: #ef393e; } .productCompare { grid-template-columns: repeat(6,1fr); grid-gap: 0; } .productCompare div { border: 1px solid #f2f2f2; } .productCompare div:hover { background-color: #ddd; } .productCompare div ul { padding: 0 5%; } .productCompare ul { margin: 0; padding: 0; } .productCompare ul li { list-style-type: none; padding: 5% 0; } .productCompare h3 { background: #00aded; color: #fff; text-align: center; padding: 5% 3%; } .productCompareEmp { color: #ef393e; } .androidProductsPic { display: grid; align-content: center; } footer { background: #2b2823; color: #fff; clear: both; } footer > .wrap { padding: 0 0 20px; } footer .col { width: 24%; padding: 20px 0 0; } footer strong { font-size: 14px; display: block; text-transform: uppercase; margin: 0 auto 20px; width: 80%; border-bottom: 1px solid #555; height: 38px; border-left: 3vw solid #2b2823; border-right: 3vw solid #2b2823; } footer ul { padding-left: 10px; } footer li { margin-bottom: 5px; } footer a, .copy { color: #fff; } footer .address { margin-bottom: 20px; } .subfoot { background-color: #22211d; padding: 2px 10px } .subfoot .grid { grid-template-columns: 1fr 150px; padding: 5px 0 } .landCall { text-align: center; font-style: italic; font-size: 1.2em; } form { margin-top: 20px; } form .grid { grid-gap: 10px } form input, form textarea { box-sizing: border-box; font-family: sans-serif; font-size: 14px; padding: 6px; display: block; width: 100%; margin-bottom: 10px } form .grid input, form .grid textarea { margin-bottom: 0 } form #submit { background: #ef393e; color: #fff; font-size: 14px; font-weight: bold; border: none; border-radius: 3px; padding: 8px } form #submit:hover { cursor: pointer; background: #b32b2e; } #contact textarea { height: 55px; } #contact #submit, #demoForm #submit { width: 100%; } #social { position: relative; left: 145px; } #social a { display: inline-block; width: 30px; height: 30px; margin-left: 5px; } #social #email { background: url(/images-design/social-bar.png) 0 0 no-repeat; } #social #facebook { background: url(/images-design/social-bar.png) -40px 0 no-repeat; } #social #twitter { background: url(/images-design/social-bar.png) -80px 0 no-repeat; } #social #linkedin { background: url(/images-design/social-bar.png) -120px 0 no-repeat; } #social #gplus { background: url(/images-design/social-bar.png) -160px 0 no-repeat; } #social #blog { background: url(/images-design/social-bar.png) -200px 0 no-repeat; } .ccpaNotice { background-color: #22211d !important } .ccpaNotice, .ccpaNotice a { color: #999 !important } .youtube { outline: 1px solid #eee } @media(max-width:999px) { div[class^=disc] { width: 150px; height: 150px; margin: 15px 2vw; } div[class^=disc] strong { margin-top: 30px; } nav li { width: 24%; } nav ul ul { display: none !important } .grid.fifth { grid-template-columns: repeat(3,1fr); } main, .team, .improve, header { padding-left: 10px; padding-right: 10px; } .sidebg { background-image: none } .home > div:nth-of-type(1) .wrap div, .home > div:nth-of-type(2) .half div, .home > div:nth-of-type(4) .half div { display: block; width: auto !important; padding: 0 !important } .pink .grid.fourth { grid-template-columns: repeat(1,1fr); } .pink ul { padding-left: 150px !important; } } @media(max-width:767px) { nav ul ul li, nav ul ul a, nav li:hover > ul { display: none; } } @media(max-width:700px) { .grid.content { grid-template-columns: 1fr; } footer .col { width: 49%; } div[class^=disc] { width: 35vw; height: 35vw; margin: 15px 5vw; } div[class^=disc] strong { margin-top: 8vw; } .ipvt .table > div { display: block; width: auto !important; padding: 0 !important; } .home > div:nth-of-type(1) .wrap div { display: block; width: auto !important; padding: 0 !important } .home > div:nth-of-type(1) .wrap div h2, .home > div:nth-of-type(1) .wrap div p { text-align: center; } header h1 { grid-area: logo; margin: 0 } header .review { grid-area: review } header .right { grid-area: right } header .grid { grid-template-areas: "logo logo logo" "review right right"; grid-template-columns: 1fr 2fr; grid-gap: 0 } header h1, .review { text-align: center } header h1 a, header img { display: block } header img { margin: 0 auto; padding: 10px 0 } header .right ul { margin: .5em 0 } .appFeat { grid-template-columns: repeat(2,1fr); } .cloud-platform.grid.half { grid-template-columns: repeat(1,1fr) !important; } .cloud-platform.grid.half div:last-of-type div, h4 { margin-left: auto; } } @media(max-width:600px) { .table.half > div { display: block; padding: 0 !important; width: auto !important } .table.half ol, .table.half ul { margin: 0 } .table.half div:first-of-type ul, .table.half div:first-of-type ol { margin-top: 1em } .table.half div:last-of-type ul, .table.half div:last-of-type ol { margin-bottom: 1em } .team img.ib { display: inline-block; width: auto; max-width: 94%; } .team div.ib { display: block; width: auto; } aside ul { padding: 0; width: auto; display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 10px; grid-auto-rows: 1fr } aside ul li { background-color: #767676; margin: 0 } aside ul li a { padding-right: 30px } aside details { display: none; } aside .hvoip { display: block; } .appFeatDescrip, .remotePlans, .productCompare, .sectContent { grid-template-columns: 1fr; } .remotePlans h3, .productCompare h3 { text-align: left; padding: 1% 3%; } .remotePlans div, .productCompare div { border: none; } .remotePlans ul li, .productCompare ul li { padding: 0; list-style-type: disc; } .grid.half, .adv .grid.half { grid-template-columns: repeat(1,1fr) !important; } .grid.half.check ul, li:last-of-type { margin-bottom: 0; } .grid.half.check ul { margin-top: 0; } .grid.third { grid-template-columns: repeat(2,1fr); } .grid.third ul, li:last-of-type { margin-bottom: 0; } .grid.third ul:last-of-type { margin-bottom: 5px; } .grid.third ul, li:first-of-type { margin-top: 0; } .grid.fourth, .grid.fifth { grid-template-columns: repeat(2,1fr); } .attendant div:first-of-type { border-right: none !important; border-bottom: 1px solid black; } .attendant div:last-of-type img { margin: auto !important; } .grid.third.interactions { grid-template-columns: repeat(1,1fr); } .interactions div:first-of-type { border-right: none !important; border-bottom: solid 1px; border-color: #767676; padding-bottom: 5px; } .interactions div:last-of-type { border-left: none !important; border-top: solid 1px; border-color: #767676; padding-top: 5px; } .grid.half.enterprise div:first-of-type { border-right: none !important; } .grid.half.enterprise table:first-of-type { border-right: none !important; } .table.half ol { margin: 6px 0 } .acd svg, .sip svg, .cases svg { margin: 0 auto; padding: 20px; height: 100px; width: 100px; } .acd p, .sip p, .cases p { text-align: center; } } @media(max-width:500px) { h2 + .imgRight, main > a > .imgRight, main > .imgRight { float: none; margin: 0 auto; } nav ul, nav li a { text-align: left; } nav li { width: 49%; } footer .col { width: auto; display: block; } footer ul { text-align: left; } footer li { display: inline-block; width: 32%; vertical-align: middle; margin: 8px 0; } footer li:nth-of-type(odd) a { margin-right: 12px; } footer strong { height: auto; } footer .col:last-of-type li { display: block; width: auto; } div[class^=disc] { width: 35vw; height: 35vw; margin: 15px 5vw; } div[class^=disc] strong { margin-top: 8vw; } .box { display: block; width: auto; clear: both; } .box p { min-width: 300px; } main, .team, .improve, aside, .home > div, header { padding-left: 2%; padding-right: 2%; } .out-pager { display: none; } .ipvt .imgRight { float: none; display: block; max-width: 100%; margin: 0 auto; } .imgRight { display: block; max-width: 100%; } .home > div:nth-of-type(1) { height: 450px; } .grid.third, .subfoot .grid { grid-template-columns: 1fr; } .subfoot p { text-align: center } .pink ul { padding-left: 40px !important; } } @media(max-width:400px) { footer li { width: 49%; } div[class^=disc] { width: 200px; height: 200px; } div[class^=disc] strong { margin-top: 50px; } .copy, .mark { display: block; width: auto; text-align: center; } header .grid { grid-template-areas: "logo" "review" "right"; grid-template-columns: repeat(1, 1fr); grid-gap: 10px } header .right, header .right li { text-align: center } header .right li { margin: 5px 0 } .grid.fourth { grid-template-columns: repeat(1,1fr); } .appfeat { grid-template-columns: repeat(1, 1fr) !important; } }