/* GENERAL */
body { background-color: #5e5e5e; color: #3e3e3e; padding: 0; margin: 0 auto; line-height: 1.5; min-width: 320px; text-align: center; }
aside, section, body { font-size: 16px }
body, textarea { font-family: 'Open Sans', sans-serif; }
h1, h2, h3, h4, h5, h6, p, th, td, dd, dt, li, blockquote, aside { text-align: left; }
h2, h3, h4, h5, h6 { color: #343434; margin: 12px 0 }
h1 { font-size: 2em; margin-top: 0; color: #0C66A7 }
h2 { font-size: 1.5em }
h3 { font-size: 1.33em; }
h4 { font-size: 1.17em }
h5 { font-size: 1em }
h6 { font-size: .83em }
ul { padding: 0; margin: 0 }
img, iframe { max-width: 100%; border-radius: 3px;display:block;margin:0 auto }
iframe { margin: 15px 0; }
address { font-style: normal; }
img, iframe { border: none; }
a, a:hover { transition: ease-in-out .3s; }
a { text-decoration: none; color: #0b82da; }
a:hover, .top-nav a:hover, .blog a:hover h2 { color: #8cc63f; }
hr { border-width: 1px; border-color: #eee; border-style: none none solid; margin: 20px 0; }
.clear { clear: both; }
.imgLeft { float: left; margin: 5px 3% 10px 1%; }
.imgCenter { display: block; margin: 5px auto; }
.imgRight { float: right; margin: 5px 1% 10px 3%; max-width: 45% }
.btn, input[type=submit] { font-size: 16px; background-image: linear-gradient(#a2d164,#99cc55,#8dc642); border: 1px solid #8cc63f; border-radius: 5px; color: #fff; display: inline-block; padding: 18px 25px; font-weight: bold }
.btn:hover, input[type=submit]:hover { background: #13A89E; border-color: #13A89E; color: #fff; }
.container { background-color: #fff; font-size: 0 }
.wrap { max-width: 1080px; display: block; margin: 0 auto; position: relative; }
.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}
.grid { display: grid; grid-gap: 10px 20px; }
.mid { align-self: center; align-items: center; }
.grid.half { grid-template-columns: repeat(2,1fr); }
.table { display: table; width: 100%; table-layout: fixed }
.table > div { display: table-cell; position: relative; vertical-align: top; }
.table.half > div { width: 49%; }
.table.half > div:nth-of-type(odd) { padding-right: 1%; }
.table.half > div:nth-of-type(even) { padding-left: 1%; }
.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%; }
.table.fourth > div { width: 23.5%; padding: 0 1%; }
.table.fourth > div:nth-of-type(1) { padding-left: 0; }
.table.fourth > div:nth-of-type(4) { padding-right: 0; }
.nowrap { white-space: nowrap }
.hide { display: none !important }
.large { font-size: 120% }
/* HEADER and NAVS */
nav, .top-nav, nav ul ul, .services, body { background-color: #0B82DA; background-image: linear-gradient(90deg,#5090dc,#0B82DA,#0B82DA); background-size: 100%; background-repeat: no-repeat }
.top-nav { color: #fff;font-size:15px;margin:6px 0 }
.top-nav .grid{grid-gap:0 10px}
.top-nav a, nav a { color: #fff; display: block }
.top-nav ul:first-of-type{ text-align: left; }
.top-nav ul:last-of-type { text-align: right; }
.top-nav a { margin: 0 6px; padding: 6px }
.top-nav li,.top-nav a { display: inline-block; }
.top-nav li:after, footer .last li:after { content: "|"; display: inline }
.top-nav li:last-of-type:after, footer .last li:last-of-type:after { content: "" }
.login, .login a { color: yellow }
header { text-align: left; padding: 10px 0 }
.logo { padding: 10px 0; width: 200px }
.logo, header > div, header .phone, header .btn { display: inline-block; vertical-align: middle; }
header > div { width: calc(100% - 200px); text-align: right; }
.phone span, .phone strong { display: block; text-align: center; line-height: 1 }
.phone span { font-size: 27px; }
.phone strong { font-size: 33px }
.phone, .header .btn { margin: 15px 30px }
nav { z-index: 1; margin: 0; border-radius: 5px; font-size: 0; text-align: left; overflow: hidden }
nav ul { margin: 0; padding: 0; font-size: 15px;text-align: center; }
nav li { display: inline-block; vertical-align: top; text-align: center; }
nav a { padding: 15px;display: block; }
nav a:hover { background: #0c66a7; text-decoration: none; }
nav ul ul { box-shadow: 2px 2px 5px rgba(0,0,0,.1); margin: 0; padding: 0; position: absolute; display: none; width: 220px; border-radius: 0 0 5px 5px; overflow: hidden; z-index: 999 }
nav ul ul li { display: block; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.3); overflow: hidden; }
nav ul ul a { padding: 10px 20px }
nav li:hover ul { display: block; }


/* BANNER */
.banner { height: 600px; position: relative; z-index: 0; text-align: left; background-image: url(/images-content/clouds.jpg); background-position: center; background-size: cover; line-height: 1.25 }
.banner a:hover { color: #fff }
.overlay { width: 100%; height: 100%; background-color: rgba(60,120,255,.1); display: block; color: #fff; }
.banner .bannertext { top: 50%; transform: translateY(-50%); position: relative; padding: 0 2% }
.banner h1, .banner p { text-shadow: 1px 1px 1px #000,-1px -1px 1px #aaa }
.banner h1 span { display: block; text-align: center; letter-spacing: -1px }
.banner h1 { font-size: 36px; display: inline-block; margin: 0; color: #fff }
.banner h1 span:first-child { font-size: 80px; line-height: 1; letter-spacing: 0 }
.banner h1 span:last-child { font-size: 30px; letter-spacing: 0.5px }
.banner .btn { font-size: 24px }
.banner p { font-size: 34px; letter-spacing: -1.5px; line-height: 1.5 }
.banner .wrap { background: url(/images-content/polycom-vvx1500-d-lg-a.png) center right no-repeat; background-size: contain; position: relative; height: 100%; }
/*ASIDE*/
aside, section { vertical-align: top; padding: 20px 0 40px; }
aside { display: none; width: 25%; margin-right: 1% }
aside h3 { font-size: 18px; color: #343434; }
aside ul { margin: 0; padding: 0; }
aside li { list-style-type: none; padding: 5px 0; border-top: 1px solid #eee; }
aside li a { display: block; color: #3e3e3e; padding: 5px 0; }

/*SECTION*/
section p { text-align: justify; }
section p, section li { letter-spacing: .75px }
section, header, aside { padding-left: 1%; padding-right: 1% }
section ul, section ol { padding: 0 0 0 30px; margin: 0 }
section ul ul, section ol ul, section ol ol { margin-top: 5px; }
section li { margin: 0 0 6px 0; }
section address { text-align: left; }
.services { margin: 20px 0 }
.services h2, .services p { color: #fff; }
.services div { outline: 10px solid #fff; border-radius: 5px; padding: 25px 4% 100px !important; position: relative; }
.services img { margin: 0 auto; display: block; border-radius: 50%; }
.services i { display: block; margin: 0 auto; background: #FFF; border-radius: 500px; color: #aaa; padding: 50px; }
.services>div>span{display:block;position:relative;height:150px;width:150px;border-radius:500px;background-color:#fff;margin:0 auto}
.services svg{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}
.services h2, .services p { text-align: center; }
.services h2 { font-size: 24px; }
.services .btn, .catalog .btn { display: block; position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.info { position: relative; padding: 10px 2% }
.info h2, .info p { max-width: 630px; text-shadow: 1px 1px 4px #eee; }
.info .wrap { min-height: 430px; }
.info .offset { position: absolute; top: 50%; transform: translateY(-50%); }
.info { background: #f3f3f3 url('/images-content/about.jpg'); background-size: cover !important; background-position: center; }
.partners { padding: 20px 2%; }
.partners .grid{grid-template-columns:1fr 1fr 1fr;grid-gap:38px}
#map { width: 100%; min-height: 230px; }
.catalog .table { border-spacing: 10px; }
.catalog .table div { min-height: 360px; color: #3e3e3e; padding: 10px 20px 100px !important; background-color: #f3f3f3; position: relative; }
.catalog p { text-align: left; letter-spacing: normal }
.logos img { margin: 20px; }
.alpha { list-style-type: upper-alpha; }
.referral { border-collapse: collapse; margin-bottom: 20px; }
.referral td:nth-of-type(odd) { min-width: 200px; }
.referral td:nth-of-type(even) { text-align: right; }
.referral td { padding: 5px; border-bottom: 1px solid #eee; }
.referral tr:last-of-type td { border: none; }
.sales { width: 33%; padding: 2%; margin: 10px 0 0 4%; float: right; background-color: #f3f3f3; }
.tableib, div.special { display: inline-block; vertical-align: top; }
.tableib { width: calc(100% - 215px - 5%) }
table.special { font-style: italic; font-weight: bold; border-spacing: 10px; font-size: 22px; color: #3e3e3e; width: 100% }
.special div { display: inline-block; vertical-align: middle; width: calc(100% - 188px) }
div.special { margin: 20px 0 0; padding: .5% 2% 1%; background-color: #f3f3f3; }

.nyc { border-radius: 0;width:100% }
.yealink a { text-align: center; display: block; }
/*CONTACT FORM*/
form { margin: 40px 0; }
form input[type=text], form input[type=email], form input[type=tel], form textarea, form .formbox, form select { font-size: 14px; background-color: #f3f3f3; padding: 0 10px; margin-bottom: 15px; border: none; display: block }
form input[type=text], form input[type=email], form input[type=tel], form textarea, form .formbox { width: calc(100% - 20px); text-align: left; vertical-align: middle }
form select { width: 100% }
form input[type=text], form input[type=email], form input[type=tel], form select, form .formbox { height: 40px; }
form label input[type=file] { top: 50%; transform: translateY(-50%); position: relative }
form textarea { height: 150px; padding: 10px; }
form input[type=submit] { font-size: 16px; }
form input[type=submit]:hover { cursor: pointer; }
#contact, #support { text-align: left; }

/*FOOTER*/
footer .wrap{padding:0 1% 40px}
footer, footer h3 { color: #fff; }
footer ul { padding: 0; }
footer li { list-style: none; }
footer a { color: #fff; }
footer a:hover { color: #a2d164; }
footer h3 { font-size: 18px; }
footer address { text-align: left; }
.footer-top { padding: 30px 0; }
footer .last > div { vertical-align: middle; }
footer .last ul { text-align: left }
footer .last li { display: inline-block; }
footer .last ul a { display: inline-block; margin: 8px; padding: 8px }
footer .last address { font-size: 14px }

/* BLOG Page */
.blog a, .blog a:hover { display: block; color: #3e3e3e; }
.blog img { object-fit: cover; width: 100%; height: 280px; }
.blog h2 { font-size: 1.3em; }
.blog-article img { margin: 20px auto; }
.blog-article h1 { margin: 0 0 10px }

@media(max-width:999px) {
    nav ul ul{display:none !important}
    nav { border-radius: 0 }
    nav a{padding: 10px 15px;margin:5px;}
    footer .last li:after { display: none }
    footer .last ul { text-align: center }
    footer .last ul a { margin: 4px; padding: 4px }
    .special td { display: block; width: 100% }
    .special td:first-of-type p { text-align: right }
    .special .toshiba img { display: block }
    .special .toshiba em { margin-left: 100px }
    table.special { font-size: 30px }
    nav ul{display:grid;grid-template-columns:repeat(4,1fr);align-items:center }
    nav a{padding:5px}
    nav{padding:10px 0}
}

@media(max-width:767px) {
    section, footer .wrap, header, aside { padding-left: 10px; padding-right: 10px }
    aside, section { padding-bottom: 20px }
    aside { margin: 0; }
    aside li { display: inline-block; vertical-align: top; margin: 4px; width: calc(49% - 8px) }
    .top-nav .grid{grid-template-columns:1fr}
    .top-nav ul { text-align: center !important; }
    .tableib, div.special { display: block; width: auto; }
    .table.third.services > div { display: block; width: auto !important; }
    .info h2, .info p { max-width: none; }
    .info .offset { position: relative; top: auto; transform: none; padding: 20px 0 }
    footer { text-align: left }
    footer .table > div { display: inline; width: auto !important; padding: 0 !important; }
    footer .addy li { display: block; margin: 4px 0; width: auto; }
    .addy address, .addy ul { display: inline-block !important; vertical-align: middle; width: 48% }
    .footer-top div:nth-of-type(3) h3, .last address span { display: none !important }
    .footer-top ul { text-align: left; display: inline }
    .footer-top li { display: inline-block; vertical-align: middle; width: calc((100% / 3) - 16px); margin: 6px }
    .last address, .last div { text-align: center }
    .last .a8b { display: block; }
    footer .last li:after { display: inline }
    footer .last ul a { margin: 8px; padding: 8px }
    nav ul { text-align: center }
    .logo { display: block; margin: 0 auto }
    header > div { width: auto; margin: 12px auto; text-align: center }
    header { text-align: center }
    .overlay { background-color: rgba(0,0,0,.35) }
    .partners .grid{grid-template-columns:1fr 1fr}
    
}

@media(max-width:600px) {
    .banner h1 span:first-child { font-size: 70px }
    .banner h1 { font-size: 32px; }
    .banner h1 span:last-child, .banner p { font-size: 24px; }
    .banner { height: 500px }
    .grid.half { grid-template-columns: repeat(1,1fr); }
    .footer-top li { width: calc((100% / 2) - 16px); text-align: center }
    footer h3, .addy address, .addy ul, .addy li { text-align: center; display: block !important; width: auto }
}

@media(max-width:500px) {
    section > .imgRight, section .wrap > .imgRight { float: none; margin: 12px auto; max-width: 100%; }
    .banner, .banner h1, .banner p { text-align: center }
    .banner h1 span:first-child { font-size: 60px }
    .banner h1 { font-size: 28px; display: block; }
    .banner h1 span:last-child { font-size: 22px }
    .banner p { letter-spacing: normal }
    .table.half, .table.half > div, .catalog .table, .catalog .table > div, .table.list, .table.list > div { display: block; padding: 0 !important; width: auto; }
    .catalog .table > div { margin: 20px 0; padding: 10px 20px 40px !important }
    .partners .grid{grid-template-columns:1fr}
    .partners img{width:250px;height:84px}
    nav ul{grid-template-columns:1fr 1fr}
}


@media(max-width:400px) {
    .top-nav a { font-size: 14px; }
    table.special, .special .toshiba p { font-size: 18px }
    .special .toshiba img { margin: 0 auto 8px; }
    .special .toshiba em { margin-left: 40px; }
    .special .bgimg { width: 150px }
    .special div { width: calc(100% - 158px) }
    .banner h1 span:first-child { font-size: 48px }
    .banner h1 { font-size: 22px; }
    .banner p { font-size: 18px; font-weight: bold; }
    footer li { font-size: 14px }
    h1 { font-size: 1.8em }
    section p { text-align: left }
    .large { font-size: 100% }
    nav li span{display:block}
    .top-nav .grid{grid-template-columns:1fr 1fr}
    .top-nav li:after{content:""}
    .top-nav a{margin:6px}
}