img, iframe {max-width: 100%; height: auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} body { font-family: 'Roboto', sans-serif; font-size: 16px; background-color: #4d4d4d; color: #656565; line-height: 1.5; text-align: center; } * { scroll-behavior: smooth } h1, h2, h3, h4, h5, h6, p, th, td, dd, dt, li, blockquote { text-align: left; } body, header ul, nav ul, main ul, main ol { padding: 0; margin: 0; } img, iframe { max-width: 100%; max-height: 100%; display: block; margin: 0 auto } a img, iframe { border: none; } a, header .comments h2 a:hover, .solutions a:hover h2 { text-decoration: none; color: #cb0000; } .discount a:hover { color: #FF9900; } .phone a:hover { text-decoration: none; } a:hover { text-decoration: underline; } hr { border: none; border-bottom: 1px solid #eee; margin: 20px 0; } .imgLeft { float: left; margin: 5px 4% 15px 0; } .imgLeftSmall { width: 150px; height: 150px; float: left; margin: 5px 4% 15px 10px; padding: 10px; } .imgCenter { display: block; margin: 0 auto; } .imgRight { float: right; margin: 5px 0 15px 4%; max-width: 60%; } .nowrap { white-space: nowrap; } .clear { clear: both; } .center { text-align: center; } .container { background-color: #fff; width: 100% } .wrap { max-width: 1020px; display: block; margin: 0 auto; position: relative; } blockquote { margin: 1em 4%; } .socialicon li { display: inline-block; } .socialicon a { color: #fff; display: block; text-decoration: none; } .socialicon i { padding: 5px; border-radius: 3px; display: block; } .bgimg, .slideshow a { position: relative } .bgimg > img:first-of-type, .slideshow a > img:first-of-type { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; z-index: 0 } header .logo, header ul, header li, nav li, .solutions a, aside, main, .halfCol, .triCol, form div { display: inline-block; vertical-align: top; } header { padding: 10px 0 0; position: relative; z-index: 10; margin-bottom: -10px; } header .wrap { display: grid; grid-template-columns: 311px 1fr } header .phone { display: block; font-size: 18px; line-height: 14px; text-align: left; margin: 5px; } header .phone a { color: #cb0000; display: inline; } header .social .fa { color: #cb0000; } header .wrap div:nth-child(1) { display: grid; justify-content: left; } header .wrap div:nth-child(2) { display: grid; justify-content: right; padding: 3%; } .phone span { display: inline-block; line-height: 30px; width: 35px; height: 35px; text-align: center; vertical-align: middle; } nav { font-size: 0; text-align: right; background-color: #cb0000; padding: 0; position: relative; } nav li { position: relative; z-index: 999; font-size: 16px; } nav a { vertical-align: middle; color: #fff; padding: 15px 20px; border-right: 1px solid #b30000; display: block; border-width: 1px; } nav li:last-child a { border: none; } nav a:hover { text-decoration: none; background-color: #d90000; } .slideshow { height: 400px; position: relative; overflow: hidden; } .slideshow .overlay { height: 100%; background-image: radial-gradient( rgba(0,0,0,.8), transparent ); padding: 10px; box-sizing: border-box; z-index: 1; position: relative } .slideshow .wrap { top: 50%; transform: translateY(-50%); z-index: 2 } .banner { background-size: cover; background-position: center; } .slideshow a { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; z-index: 1; transition: opacity 2s; object-fit: cover; object-position: center; } .slideshow .showing { opacity: 1; z-index: 2; } .slideshow a, .slideshow a:hover { text-decoration: none; } .slideshow a:hover .wrap > span, .btn:hover, form input[type=submit]:hover { cursor: pointer; text-decoration: none; background-color: #cb0000; } .slideshow h1, .slideshow p, .slideshow span { text-align: center; color: #fff; } .slideshow h1, .slideshow p { max-width: 850px; margin: 0 auto; text-shadow: 1px 1px 3px rgba(0,0,0,.5); } .slideshow h1 { font-size: 36px; line-height: 1.3; } .slideshow p { font-size: 24px; } .slideshow em { font-style: normal; text-transform: uppercase; } .slideshow .wrap > span { display: inline-block; background-color: #cb0000; margin-top: 20px; padding: 10px 30px; border-radius: 2px; } .banner { height: 400px; display: none; } .banner.about { background-image: url(/images-design/banner-about.jpg); } .banner.services { background-image: url(/images-design/banner-services.jpg); } .banner.data { background-image: url(/images-design/banner-data.jpg); } .banner.alert { background-image: url(/images-design/banner-alert.jpg); } .banner.cabling { background-image: url(/images-design/banner-cabling.jpg); } .banner.cloud { background-image: url(/images-design/banner-cloud.jpg); } .banner.surveillance { background-image: url(/images-design/banner-surveillance.jpg); } .banner.fleet { background-image: url(/images-design/banner-fleet.jpg); } .banner.wireless { background-image: url(/images-design/banner-wireless.jpg); } .banner.network { background-image: url(/images-design/banner-network.jpg); } .banner.malware { background-image: url(/images-design/banner-malware.jpg); } .banner.threat { background-image: url(/images-design/banner-threat.jpg); } .banner.connect { background-image: url(/images-design/banner-connect.jpg); } .banner.security { background-image: url(/images-design/banner-security.jpg); } .banner.support { background-image: url(/images-design/banner-support.jpg); } .banner.contact { background-image: url(/images-design/banner-contact.jpg); } .banner.careers { background-image: url(/images-design/banner-careers.jpg); } .banner.access { background-image: url(/images-design/banner-access.jpg); } footer .wrap { padding: 20px 2% 40px; } footer, footer a { color: #fff; } footer .grid { grid-template-columns: 1fr 150px 1fr } footer li { margin: 5px 0; } footer a { display: block; padding: 5px 0 } footer ul { padding: 0; list-style-type: none; display: block; text-align: left; } footer img { margin: 0 auto } footer .social li { display: inline-block; margin: 0 } footer .social a { color: #fff; display: block; text-decoration: none; margin: 5px } footer .social i { padding: 5px; border-radius: 3px; display: block; } footer .fa-envelope { background-color: #007E24; } footer .fa-facebook { background-color: #3b5998; } footer .fa-twitter { background-color: #1da1f2; } footer .fa-linkedin { background-color: #0077b5; } footer .fa-rss { background-color: #464646; } footer .fa-google-plus { background-color: #dd4b39; } .comments { background-color: #fcfcfc; padding: 40px 0; font-size: 16px; } .comments .table div:first-of-type i.fa { margin: 20px 20px 0 0; } .comments .table div:last-of-type i.fa { margin: 20px 0 0 20px; } .comments h2 { font-size: 24px; text-align: center; margin-bottom: 40px; } .comments i { color: #eee; width: 55px; height: 42px; position: absolute; top: 0 } .comments .quotes { padding: 0 100px; position: relative } .comments i:first-of-type { left: 10px } .comments i:last-of-type { right: 10px } .comments cite { display: block; margin-right: 9%; text-align: right; } .testimonials p { font-style: italic; } .testimonials cite { display: block; font-style: normal; } .testimonials cite a { display: block; margin-top: 10px; } blockquote { border-bottom: 1px solid #eee; padding: 15px 1px; } blockquote:last-of-type { border-bottom: none; } form { margin: 20px 0; } form input[type=text], form input[type=email], form input[type=tel], form input[type=submit], form textarea { font-family: 'Roboto', sans-serif; font-size: 16px; display: block; } form input[type=text], form input[type=email], form input[type=tel], form textarea { width: calc(100% - 22px); padding: 0 10px; border: 1px solid #ddd; border-radius: 1px; } form textarea { padding: 10px !important; } form input[type=text], form input[type=email], form input[type=tel] { height: 35px; margin-bottom: 15px; } form textarea { height: 100px; padding-top: 10px; } form input[type=submit] { width: 100%; font-weight: bold; background-color: #cb0000; color: #fff; padding: 10px 0; margin-top: 15px; border: none; border-radius: 2px; } #apply { margin-top: 30px; } #apply label { display: block; width: calc(100% - 12px); margin: 0 0 15px; padding: 7px 0 7px 10px; border: 1px solid #ddd; border-radius: 1px; text-align: left; } #apply input[type=file] { margin-left: 10px; max-width: 245px } #quick { margin-top: 50px; } .maincontainer { grid-template-columns: 230px 1fr; grid-gap: 20px 0 } aside { padding: 25px 10px 30px 20px; } aside ul { padding: 0; } aside li { list-style: none; } aside li a { display: block; padding: 10px; border-bottom: 1px solid #eee; } aside li:first-child a { border-top: 1px solid #eee; } aside li a:hover { text-decoration: none; background-color: #fafafa; } main { padding: 20px 10px 40px 10px; order: 2 } main h1, main h2, main h3 { line-height: 1.4; } main h1 { font-size: 24px; color: #4d4d4d; } main h2 { font-size: 20px; } main h3 { font-size: 16px; } main li { margin: 0 0 6px 20px; } .btn { font-weight: bold; display: inline-block; background-color: #ff9900; color: #fff; margin: 10px auto; padding: 10px 40px; border: none; border-radius: 2px; } .halfCol, form div { width: 49%; } .halfCol.mid { vertical-align: middle; } .table { display: table; width: 100%; } .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%; } .triCol { width: 33%; } .right, .right li { text-align: right; } .grid { display: grid; grid-gap: 10px 20px; } .grid.third { grid-template-columns: repeat(3,1fr); } .grid.half { grid-template-columns: repeat(2,1fr); } .grid.fourth { grid-template-columns: repeat(4,1fr); } .grid.fifth { grid-template-columns: repeat(5,1fr); } .orange { background-color: rgb(235, 221, 195); padding: 10px; } .gray { background-color: #e9e3e3; padding: 10px; } .blue { background-color: rgb(8, 8, 218); padding: 20px; color: white; } .blue img { margin-top: 55px; } .solutions { padding: 3% 0; } .solutionsWrap { max-width: 800px; display: block; margin: 0 auto; position: relative; } .solutions a { color: #fff; } .solutions a div { border: 1px solid #eee; border-radius: 5px; } .solutions a:hover { text-decoration: none; } .solutions i { font-size: 55px; padding: 18px 10px; width: 60px; height: 60px; display: block; margin: 0 auto; color: #0F6398; } .solutions a:hover div { border: 1px solid #656565; } .solutions h2, .solutions p { text-align: center; } .solutions h2 { font-size: 16px; color: #656565; margin-bottom: 0; padding: 10px 5px } .solutions p { color: #656565; margin: 0; padding: 1em 5px } .about.grid { grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; text-align: left; } .nowrap { white-space: nowrap; } .nobull.indent { padding-left: 20px; } .nobull { list-style-type: none; padding-left: 0; } .nobull li { margin-left: 0; } .nobull li li { list-style: disc; margin: 0 0 5px 20px; } .nobull li li li { list-style: circle; } .style th { padding: 10px 2%; } .style td { padding: 5px 2%; } .time td, .time th, .style th:nth-of-type(2) { text-align: center; padding: 10px 20px; } .style { border: 1px solid gray; border-collapse: collapse; margin: 20px 0; } .style tr:nth-of-type(even) { background-color: #eee; } .time em { display: block; } .time tr td:first-of-type { font-weight: bold; } main > h1 span { display: block; font-size: 18px; } .common > div h2 { font-size: 16px; margin-bottom: 0; } .common > div p:nth-of-type(1) { margin-top: 0; } .common > div p:nth-of-type(1):before { content: "Problem\3A"; color: #b30000; font-weight: bold; margin-right: 5px; } .common > div p:nth-of-type(2):before { content: "Solution\3A"; color: #01571a; font-weight: bold; margin-right: 5px; } .common div { border-bottom: 1px solid #656565; margin-bottom: 30px; } .problem { color: #b30000; font-weight: bold; } .alphaList li { list-style-type: lower-alpha; } .instruction-list li { list-style-type: none; } .transfer-third { display: inline-block; width: 30%; margin: 10px; text-align: left; font-weight: bold; } #ringing td:first-child { width: 30%; vertical-align: top; font-weight: bold; } #ringing td { padding: 10px 2%; } #time-change td { padding-right: 20px; border-bottom: 1px solid gray; } .video { width: 100%; height: 42vw; max-height: 430px; } .map { width: 100%; height: 15vw; max-height: 230px; margin: 1em 0; } .disclaimer { font-size: 12px; font-style: italic; } .logos a { display: inline-block; vertical-align: middle } .logos img { margin: 0 40px; } .totop { display: none; opacity: .7 } .nec img { display: inline; padding: 1%; } .imgSmall { width: 500px; } .claud th { background-color: #0180E2; color: white; text-align: center; font-size: 14px; } main .claud tr td:nth-of-type(2) { background-color: #D6F0FF; text-align: center; color: #0180E2; } .claud tr:nth-child(odd) td { background-color: #F3F5F6; } .claud table { padding-bottom: 50px; } .claud td { padding-left: 5px; } @media(max-width:999px) { header { margin-bottom: -35px; } #apply .mob { display: none } #apply input[type=file] { max-width: 200px } footer { padding-top: 20px } .totop { display: inline-block } } @media(max-width:767px) { header .wrap { grid-template-columns: 1fr } .solutions .grid.fifth { grid-template-columns: 1fr 1fr 1fr } .logo img { margin: 0 auto } header { margin: 0; } header .logo, header .social, header .phone { display: block; width: auto; text-align: center; } .phone { display: inline-block; } header ul a { margin: 6px; } nav ul, nav li, nav a { text-align: center } nav li { flex: 1 0 150px } nav a { white-space: nowrap } nav ul { display: flex; flex-wrap: wrap } .banner { height: 62.5vw } .solutions.grid { grid-template-columns: 1fr 1fr } nav a { border: none; margin: 5px; padding: 10px 15px } header .wrap div:nth-child(1), header .wrap div:nth-child(2) { justify-content: center !important } header .phone { display: inline-block; } } @media(max-width:700px) { .solutions .grid.third { grid-template-columns: 1fr 1fr } .grid.maincontainer, footer .grid { grid-template-columns: 1fr } main { order: 1 } aside { order: 2; padding: 25px 0 } aside form { padding: 0 10px } aside ul { display: grid; grid-template-columns: 1fr 1fr } footer li, footer .right li, footer ul { text-align: center } footer .site ul:first-of-type { display: grid; grid-template-columns: repeat(6,1fr) } footer a { padding: 5px 10px; margin: 5px } } @media(max-width:600px) { .table.half, .table.half > div { display: block; width: auto !important; padding: 0 !important; margin: 12px 0; } .container > .wrap { display: grid } #apply .mob { display: inline } .about.grid, .grid.half { grid-template-columns: 1fr } .solutions.grid.half { grid-template-columns: 1fr 1fr } } @media(max-width:500px) { .solutions .grid.fifth { grid-template-columns: 1fr 1fr } .solutions .grid.fifth a:nth-of-type(odd):last-of-type { grid-column: 1/-1 } nav li { width: 33%; } main > .imgRight { float: none; margin: 12px auto; max-width: 100%; } .map { height: 250px; } .time { margin: 0 auto; } .comments .table i.fa-4x { font-size: 10vw; } .comments .table div:first-of-type i.fa { margin: 20px 8px 0 0; } .comments h2 { margin-bottom: 20px; } .comments .table div:last-of-type i.fa { margin: 20px 0 0 2px; } footer .site ul:first-of-type { grid-template-columns: 1fr 1fr 1fr } .claud td:nth-of-type(2) { font-size: 14px } .solutions h2 span { display: block; } .slideshow{height:500px} } @media(max-width:400px) { nav li, .site ul li { font-size: 15px; } nav li.mttc { flex: 1 0 300px } .slideshow h1 { font-size:30px } .slideshow p{font-size:20px} #apply .mob, .comments i { display: none } .comments .quotes { padding: 0 10px } aside ul { grid-template-columns: 1fr } aside li:first-of-type { grid-column: unset } .claud, .claud th, .claud td { display: block } .claud th, .claud td { padding: 5px } footer .social a { padding: 5px } .claud td { border-width: 1px; border-color: #999; padding: 10px } .claud td:nth-of-type(1) { border-style: solid solid none; margin-top: 10px } .claud td:nth-of-type(2) { border-style: none solid } .claud td:nth-of-type(3) { border-style: none solid solid; margin-bottom: 10px } }