img, iframe {max-width: 100%; height: auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} :root { --accent: #2961a6 } body, input, label, select, textarea { font-family: 'Open Sans', Arial, Helvetica, sans-serif !important; font-size: 16px } body { min-width: 320px; color: #4d4d4d; line-height: 1.5; text-align: center; } h1, h2, h3, h4, h5, h6, p, th, td, dd, dt, li, blockquote, address { text-align: left; } h1, h2, h3, h4, h5, h6 { color: var(--accent); } p, h2, h3, h4, h5, h6, .news li, address { padding-left: 10px; padding-right: 10px } h1 { margin: 0; padding: .83em 10px } body, nav ul { padding: 0; margin: 0; } img, iframe, .vidyard_player { max-width: 100%; display: block; margin: 0 auto; height: auto } video { display: block; width: 100%; aspect-ratio: 16 / 9 auto } a img, iframe { border: none; } iframe, .youtube { aspect-ratio: auto 16 / 9; width: 100%; } a, nav a:hover, .partners a:hover, .data-cloud:hover, .peripherals a:hover, footer a:hover, .infog .button { text-decoration: none; color: var(--accent); transition: all 0.3s linear 0.01s; } a:hover, nav a:hover { text-decoration: underline; color: var(--accent); transition: all 0.3s linear 0.01s; text-underline-offset: 3px } .banner a:hover, .button:hover, .infog a { text-decoration: none; } hr { border-width: 1px; border-color: #eee; border-style: none none solid; margin: 30px 0; } aside { display: none; } .imgLeft, .imgRight { max-width: 45%; } .imgLeft { float: left; margin: 5px 4% 1% 0; } .imgCenter { display: block; margin: 40px auto; } .imgRight { float: right; margin: 5px 0 1% 4%; } .clear { clear: both; } .center { text-align: center; } .wrap { max-width: 1200px; display: block; margin: 0 auto; position: relative; } .table { display: table; width: 100%; } .table > div, .logo, nav { display: table-cell; vertical-align: top; } .table.mid > div { vertical-align: middle } .table.half > div { width: 48%; } .table.half > div:first-of-type { padding-right: 2%; } .table.half > div:last-of-type { padding-left: 2%; } .table.third { width: calc(100% - 20px); padding: 0 10px } .table.third > div { width: calc(100% / 3); } .table.third > div:nth-of-type(1) { padding-right: 2%; } .table.third > div:nth-of-type(2) { padding-left: 1%; padding-right: 1%; } .table.third > div:nth-of-type(3) { padding-left: 2%; } .table.quad > div > .table > div { width: 50%; padding: 10px } .table.quad .table > div { width: 50% } .grid { display: grid; grid-gap: 10px } .grid.half { grid-template-columns: repeat(2, 1fr) } .grid.third { grid-template-columns: repeat(3, 1fr) } .grid.quad { grid-template-columns: repeat(4, 1fr) } .flex { display: flex; flex-wrap: wrap; } section .table ul { margin: 0 } .nowrap, a[href^=tel] { white-space: nowrap } .nolist { list-style: none; padding-left: 0; } .row5 { background-attachment: fixed; } .back { text-align: center; display: none; margin-bottom: 35px; } .small { font-size: 12px } .grid.solutionssidenav { grid-template-columns: 1fr; } .grid.solutionssidenav .sidenav { padding: 0 0 10px 5px; background-color: #eee; margin-top: -20px; display: none; } .grid.solutionssidenav div:nth-child(1) { padding-top: 5%; } .grid.solutionssidenav div:nth-of-type(odd) { order: 1; } .solutionssidenav div:nth-child(1) ul { margin: 0; } .solutionssidenav div:nth-child(1) ul li { margin: 25px 0 0 35px; vertical-align: middle; } nav .hiring:hover, .banner a:hover, .banner a:last-of-type:hover, .button:hover, form input[type=submit]:hover, .infog a:hover .button { background-color: var(--accent); color: #fff; } nav li, .subfoot li, .inline-block li { display: inline-block; vertical-align: middle; font-weight: bold; text-transform: uppercase; } .logo, nav, .subfoot .table > div { vertical-align: middle; } .overlay { position: relative; background-color: rgba(0,0,0,.3); } header { background-image: url(images-design/hex-bkg.jpg); background-size: cover; background-repeat: no-repeat; background-position: 0 -150px; z-index: 999; padding-bottom: 20px; } .top { background: var(--accent); color: #fff; font-size: 14px; letter-spacing: .5px; margin-bottom: 10px; padding: 0 5px } .top em { display: inline-block; padding-right: 8px; font-size: 18px } .top a { display: block; padding: 6px 0; color: #fff } .top a:hover { color: #fff; text-decoration: none } .logo { width: 310px; text-align: left; padding: 0 0 20px 0; } .logo img { display: inline-block; vertical-align: middle; max-width: 180px; } nav > ul { padding: 0 10px; display: grid; } nav ul ul li { display: block } nav li:hover > ul { display: block } nav ul ul li:hover a { background-color: #fff; } nav ul ul a { color: #fff } nav { width: calc(100% - 200px); text-align: right; } nav a { color: #4d4d4d; padding: 5px 10px; display: block; margin: 5px } nav a { color: #4d4d4d; padding: 5px 10px; display: block; margin: 5px } nav .phone { font-weight: bold; font-size: 20px } nav .hiring { color: var(--accent); padding: 10px; margin: 5px 0; border-radius: 50px; border: 2px solid var(--accent); width: 100px; display: inline-block; } nav ul, nav #search { display: inline-block } nav ul li.drop ul { display: none; } nav ul li.drop:hover ul { display: block; position: absolute; z-index: 9999; background-color: #fff; padding: 0; margin: 0; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,.3); } nav ul li.drop:hover ul li { width: 100%; padding: 0; margin: 0; } nav ul li.drop:hover ul li a { padding: 10px; margin: 0; color: #4d4d4d; } #search .grid { display: grid; grid-gap: 10px; margin-top: 5px; grid-template-columns: 1fr 50px; } #search #searchSubmit { width: 50px; padding: 5px; font-weight: bold; } #search #searchSubmit:hover { color: #fff; } #search input { height: 35px; margin-top: 10px; width: 80%; color: #4d4d4d; font-weight: normal; } #search input[type=submit] { width: 164px; height: 40px; margin-top: 10px; } nav form input[type=text] { width: 510%; display: inline-block; background: #fff; border-radius: 50px; border: 2px solid var(--accent); } nav form input[type=text]:focus { outline: none; } nav form { margin: 0; } nav form input[type=submit] { color: var(--accent); } .notice { display: block; background-color: #ce0018; color: #fff; padding: 10px 0; } .notice p { text-align: center; } .notice span { display: block; text-transform: uppercase; } .notice:hover { text-decoration: none; background-color: #e8001b; color: #fff; } .cycle-slideshow { height: clamp(360px, 60vw, 600px); position: relative; overflow: hidden; } .cycle-slideshow .slide { display: block; width: 100%; height: 100%; } .cycle-slideshow .overlay { height: 100%; } .slide h1 { color: #fff; text-transform: uppercase; text-align: center; max-width: 750px; margin: 0 auto; text-shadow: 2px 3px 5px rgba(0,0,0,0.7); } .slide p { font-weight: 400; } .slide a { display: inline-block; width: 180px; font-size: 18px; padding: 10px; margin: 50px 10px 0; } .slide a:hover { text-decoration: none } .slide a:first-of-type { color: #fff; border-radius: 50px; border: 2px solid var(--accent); background-color: var(--accent) } .slide a:first-of-type:hover { border-color: #fff } .slide a:last-of-type { background-color: #fff; color: var(--accent); border-radius: 50px; border: 2px solid #fff; } .slide a:last-of-type:hover { border: 2px solid var(--accent); } .cycle-prev, .cycle-next { position: absolute; top: 0; width: 50px; z-index: 888; height: 100%; cursor: pointer; background-position: 50% 65%; background-repeat: no-repeat; opacity: .1; } .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: .4; transition: all .3s linear .01s; } .slide.seminar { background-image: url(/images-design/banners/seminar.jpg); background-position-y: 15%; } .slide.seminar .overlay { background-color: rgba(0,0,0,.5); } .slide.one, .banner.remote { background-image: url(/images-design/slides/remote-work.jpg); } .banner.remote { background-position-y: 30%; } .cycle-slideshow .slide { position: absolute; width: 100%; height: 100%; top: 0 } .slide { opacity: 0; } .slide.one { opacity: 1; } .banner h1 { text-align: center; color: #fff; } .banner, .slide { background-size: cover; background-position: center; } .banner .overlay { height: 300px; } .banner .wrap, .slide .wrap { top: 50%; transform: translateY(-50%); } .banner p, .slide p { max-width: 650px; font-size: 24px; text-align: center; color: #fff; margin: 0 auto; text-shadow: 0 0 5px rgba(0,0,0,0.8); } .bnr-a { max-width: 650px; font-size: 24px; text-align: center; color: #b4d5eb; margin: 0 auto; text-shadow: 2px 3px 5px rgba(0,0,0,0.7); text-decoration: underline; } .banner p { max-width: 800px; font-weight: 600; padding: 0 } .bgimg { position: relative } .bgimg > img:last-of-type { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; z-index: 0 } .hero.bgimg > img { object-position: 50% 50% } .jQexpiring { display: none } .row1 { background-color: var(--accent); padding: 8px 0; color: #fff; font-size: 44px; font-weight: 800 } .row1 em { text-align: center; margin: 0; } .row1 h2 { text-align: center; margin: 0; color: #fff; } .row1 em, .row1 i { font-style: normal; } .row1 small { font-size: 20px; text-transform: uppercase; } .row1 span { display: block; font-size: 14px; font-weight: 700; color: #fff; } .row3 { overflow: hidden; font-size: 16px } .row3 i.fa-fw { width: 21px; height: 16px; } .row3 ul { list-style: none; } .icons { padding-top: 20px; } .icons li { position: relative } .icons summary { color: #1A3B64; font-size: 1em; font-weight: 400; } .icons summary a { color: #1A3B64; text-decoration: none; } .icons summary a:hover { color: #89c1e1; text-decoration: underline; } .icons i.fa-li { color: var(--accent); top: .25em } .icons h2, .icons h3, .icons summary { text-align: center; } .icons h2, .icons h3 { color: #4d4d4d; } .icons h2 { font-size: 60px; margin: 0; } .icons h2 em, .icons .button { color: #2961a6; } .icons .button:hover { color: #fff !important; } .icons h2 em { font-style: normal; } .icons h3 { font-size: 28px; letter-spacing: -0.6px; padding: 0; margin-top: 0; color: #fff; text-shadow: #000 0 0 5px; } .icons h3, .icons a { position: relative; z-index: 1; } .icons.flex { margin: 0 2.5px } .icons.flex > div { flex: 1 0 315px; margin: 5px; align-content: center; } .icons > div { height: auto; background-size: cover; background-repeat: no-repeat; background-position: center; padding: 100px 20px 100px; position: relative; } .icons > div::before { content: ""; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 30%, rgba(255,255,255,0.2) 60%, rgba(255,255,255,0.3) 100%); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .icons .security { background-image: url(/images-content/blog/cyber-data-security-concept-shield-on-digital-background-information-security.jpg); } .icons .consult { background-image: url(/images-content/consultation.jpg); } .icons .virtual { background-image: url(/images-design/cloud.jpg); } .icons .premise { background-image: url(/images-design/infrastructure.jpg); } .icons .voice { background-image: url(/images-design/support.jpg); } .icons .manage { background-image: url(/images-content/blog/data-backup.jpg); } .row4 { padding: 40px 0 50px; } .row4 .infog { margin-top: -50px; width: 250px; height: 400px; margin-right: 5px; } .row4 .certs img { display: block; max-width: 240px; max-height: 140px; margin: 76px auto 1em } .row5 { background-image: url(/images-design/row5-bg.jpg); background-size: cover; background-position: center; padding: 60px 0; clear: both } .row5 h2, .row5 p { text-align: center; color: #fff; } .row5 h2 { margin: 10px 0; } .row5 p { font-size: 18px; margin: 0 0 40px; } .row5 input[type=text], .row5 input[type=email], .row5 input[type=tel], .row5 textarea { background-color: rgba(255,255,255,.9); } .row6 { background-image: url(/images-design/banners/legion-of-downtime-1.jpg); margin-top: 20px; padding: 60px 0; background-size: cover; background-position: center; height: 400px; resize: both; overflow: hidden; } .row6:hover { text-decoration: none } .row6 > div { background-color: rgba(0,0,0,.6); padding: 15px; display: inline-block; margin: 0 auto; border-radius: 20px; border: 2px solid #fff; max-width: 800px } .row6 h2 { color: #fff; margin: 25px auto auto 10px; text-align: center; font-size: 30px; text-shadow: 2px 3px 5px rgba(0,0,0,0.7); } .row6 p { color: #fff; text-align: center; font-size: 20px; text-shadow: 2px 3px 5px rgba(0,0,0,0.7); } .row6 a:hover { text-decoration: none } section { padding: 20px 0 30px; } section h1 { font-size: 1.875em; text-align: center; } section h2 { font-size: 1.5em; } section h3, summary { font-size: 1.1875em } section ul, section ol { padding-left: 30px; padding-right: 10px } section ul ul { margin-top: 10px; } section li { margin: 10px 0; } .highlight { color: #ff0000 } .bg-dark { background-color: #1A3B64; padding: 50px; } .big { font-size: 125% } .nobull { padding: 0 10px; list-style-type: none } .video-guide { width: calc(100% - 10px); height: 54vw; max-height: 251px; margin-left: 10px; } blockquote { border-width: 10px; border-color: var(--accent); border-style: none solid; padding: 20px; margin: 1em clamp(10px, 4%, 40px); font-size: 125% } .team { margin-left: 10px; } .team h3 { text-align: center; color: #4d4d4d; } .values { grid-gap: 20px 10px; font-size: 18px; font-weight: bold; text-align: left; margin-left: 10px; } .values svg { vertical-align: middle; color: #fff; padding: 10px; margin-right: 5px; border-radius: 50px; } .values div:nth-of-type(1) svg, .values div:nth-of-type(6) svg, .values div:nth-of-type(11) svg { background-color: var(--accent); } .values div:nth-of-type(2) svg, .values div:nth-of-type(7) svg, .values div:nth-of-type(12) svg { background-color: #a4a4a4 } .values div:nth-of-type(3) svg, .values div:nth-of-type(8) svg { background-color: #0CA4EB } .values div:nth-of-type(4) svg, .values div:nth-of-type(9) svg { background-color: #5a9ad5 } .values div:nth-of-type(5) svg, .values div:nth-of-type(10) svg { background-color: #6F6F6F } .legal summary:hover { text-decoration: underline; color: var(--accent); transition: all 0.3s linear 0.01s; text-underline-offset: 3px } .inline-block { padding: 0; } .inline-block li { width: calc((100% / 4) - 26px); margin: 5px; } .what-we-do .icons.flex { margin-top: 50px; } .what-we-do .icons.flex > div { padding: 100px 20px 100px; } .section { background: #eee; padding: 20px; margin: 25px 50px 25px 0px; } .section .button { background: #fff; } .section .button:hover { background: #2961a6; color: #fff; } .logo50 { max-width: 200px; } .subnav { font-size: 0; margin: 40px 0 20px; } .subnav details, .subnav summary, .subnav a { background-color: #2961a6; color: #fff; } .subnav details { display: inline-block; width: calc((100% / 2) - 8px); font-size: 16px; vertical-align: top; margin: 4px; } .subnav summary { font-size: 18px; padding: 10px 20px; margin: 0; } .subnav ul { padding: 0 20px 10px 30px; } .subnav .fa { font-size: 18px; } .didyouknow h4 { font-size: 24px; } .didyouknow div { padding: 0 3%; } .didyouknow, .didyouknow div:nth-of-type(2) { border-width: 1px; border-color: #eee } .didyouknow { border-style: solid none; } .didyouknow div:nth-of-type(2) { border-style: none solid; } .didyouknow div h4, .didyouknow div p { text-align: center; } .FOP img, .FOP strong { display: inline-block; vertical-align: middle } .FOP li { margin: 0 0 10px 10px } .FOP strong { margin-left: 25px; width: calc(100% - 70px) } .proit-icons { margin: 0 0 50px; font-weight: bold; grid-template-columns: repeat(9, 1fr); grid-gap: 20px 10px } .proit-icons a { text-align: center; font-size: 14px; } .proit-icons img { display: block; margin: 0 auto; width: 80px; height: 80px } summary { text-align: left; margin: 1em 0 0; padding: 5px 10px; font-weight: bold; color: var(--accent) } summary:hover { cursor: pointer } .button { display: inline-block; margin-top: 10px; padding: 5px 20px; border-radius: 50px; border: 2px solid var(--accent); background: #fff; } .button.invert { background-color: var(--accent); color: #fff } .button.invert:hover { background-color: #fff; color: var(--accent) } .emphasis { background-color: var(--accent); margin: 40px 0 0; padding: 20px 0 40px; } .emphasis h2, .emphasis p { text-align: center; color: #fff; padding: 0 10% } .address { padding: 0 10px } .address .table.third { margin-bottom: 50px; } .address ul, .partners { list-style: none; padding-left: 0; } .address li { margin-bottom: 5px; } .address .emphasis { margin: 30px 0 60px; } .positions .button { margin-bottom: 40px; } .partners { font-size: 0; padding: 0 8px; grid-template-columns: repeat(3,1fr); grid-gap: 15px } .partners li { font-size: 16px; text-align: center; padding: 20px 8px 30px; background-color: #fafafa; vertical-align: top; } .partners img { display: block; margin: 0 auto 10px; height: 100px; width: auto } .partners a { color: #4d4d4d; } .service > div { font-size: 18px; padding: 10px 0; } .service img { width: 100%; max-height: 235px; object-fit: cover } .service { justify-items: left; grid-template-columns: repeat(2,1fr); } .service li { list-style-type: none; } .service .fa-4x { vertical-align: middle; padding-right: 10px; } .training { margin-bottom: 3%; } .training div:nth-of-type(1) { width: 28%; } .training div:nth-of-type(2) { width: 68%; } .video, .vidyard_player { width: 100%; height: 42vw; max-height: 510px; margin: 20px 0; border: 0; } .vidyard_player > span { width: auto !important; height: 100% !important } .video.half { width: 100%; height: 54vw; max-height: 324px; margin: 20px 0; } .data-cloud { display: inline-block; width: 300px; height: 100px; background-image: url(/images-content/data-cloud.png); font-size: 22px; text-align: center; color: #fff; padding-top: 62px; } .data-cloud span { display: block; font-size: 14px; } .dtchart h2 { background: var(--accent); padding: 25px 0; color: #fff; border-radius: 5px; text-align: center } .dtchart table { border-collapse: collapse; width: 100%; font-size: 16px; border: none; } .dtchart table td, .chart table th { width: calc(100% / 13); text-align: center; height: 20px } .dtchart th.box { background: var(--accent); color: #fff; font-size: 22px; letter-spacing: 1px; font-weight: normal; padding: 20px 10px } .dtchart .box { text-align: center; background: #eee; padding: 10px; color: #4d4d4d; border-radius: 5px; text-transform: uppercase } .dtchart a { color: var(--accent); font-weight: bold; } .dtchart a, .dtchart td > span { text-transform: none; } .dtchart .bottom { border-bottom: 2px solid #ccc; } .dtchart .right { border-right: 2px solid #ccc; } .equipment td:last-of-type { width: 150px; padding-left: 2%; } .equipment td { border-bottom: 1px solid #eee; } .equipment tr:last-of-type td { border: none; padding-bottom: 20px; } .table.peripherals:nth-of-type(3) { margin-bottom: 30px } .peripherals { background-color: #fafafa; } .peripherals a { color: #4d4d4d; } .peripherals > div { vertical-align: middle; padding: 20px; border: 5px solid #fff; } .peripherals img { display: block; margin: 0 auto 10px; } .peripherals strong { display: block; } .plans { margin: 40px 0 0; } .table.third.catalog > div:nth-of-type(1) { padding-right: 4%; } .table.third.catalog > div:nth-of-type(2) { padding: 0 2%; } .table.third.catalog > div:nth-of-type(3) { padding-left: 4%; } .table.half.plans > div { padding: 20px clamp(10px, 3%, 30px); } .platinum { background-color: rgba(229,228,226,.3); } .bronze { background-color: rgba(205, 127, 50, 0.2); } .pr ul { list-style: none; padding-left: 0; } .gsc-adBlock { display: none !important; } #searchresults, .left { text-align: left; } .remote { border-collapse: collapse; } .remote td { padding: 0; } .remote td:first-of-type { width: 150px; } .excerpt p { color: #aaa; } .about-section { background: #eee; padding: 20px; margin: 50px 50px 50px 0; } .about-section .button { background: #fff; } .about-section .button:hover { background: #2961a6; color: #fff; } #history .grid { max-width: 90%; grid-template-columns: repeat(4, 1fr); font-size: 14px; text-align: center; } #history .grid:first-of-type { align-items: end; margin: 40px 0 -30px -60px; } #history .grid:last-of-type { align-items: start; margin: -30px 0 0 20px; } #history .grid div { padding: 0 10px; } #history .grid strong { display: block; font-size: 18px; color: #1A3B64 } #history img { width: 800px; } form { margin: 20px 0; } ::placeholder { color: var(--accent) } form .table.half > div:first-of-type { padding-right: 10px; } form .table.half > div:last-of-type { padding-left: 10px; } form input[type=text], form input[type=email], form input[type=tel], form input[type=date], form label, form select { margin-bottom: 10px; } form input[type=text], form input[type=email], form input[type=tel], form input[type=date], form textarea, form label, form select { background-color: #f5f5f5; padding: 0 20px; border: none; } form input[type=text], form input[type=email], form input[type=tel], form input[type=date], form textarea { width: calc(100% - 40px); } form input[type=text], form input[type=email], form input[type=tel], form input[type=date], form select { height: 50px; } form input[type=file] { margin-left: 20px; } form input[type=checkbox] { width: 18px; height: 18px; vertical-align: middle; } form label { display: block; text-align: left; padding: 13px 20px; } form select { width: 100%; } form textarea { height: 150px; padding: 20px; } form input[type=submit], button { text-transform: uppercase; background-color: #fff; color: var(--accent); padding: 15px 60px; margin-top: 15px; padding: 10px 50px; border: 2px solid var(--accent); border-radius: 50px; font-weight: bold } form input[type=submit], form input[type=submit]:hover, .button:hover { cursor: pointer; transition: all 0.3s linear 0.01s; } button { font-size: 16px } .questions form input[type=submit] { padding: 10px; display: block; width: 100% } .section form input[type=text], form input[type=email], form input[type=tel], form input[type=date], form textarea, form label, form select { background-color: #fff; } #contact { padding: 0 10px; } #contact .grid { grid-gap: 0 10px; } .contactthree { padding: 0% 10%; } .contactthree div { display: grid; align-items: center; justify-items: center; border-right: 1px solid #eee; } .contactthree div:last-child { border: none; } .contactthree p { margin: 0; padding: 0; } #seminarsurvey { text-align: left; } #seminarsurvey label { display: inline-block; width: 100%; max-width: 200px; } #achauth { margin-top: 40px; } #achauth .table > div { text-align: left; } #achauth p { margin: 0 0 40px 0; } #achauth .transactions { margin-bottom: 10px; } #achauth textarea { height: 50px; margin-bottom: 15px; } #sidebar input[type=text], #sidebar input[type=email], #sidebar input[type=tel], #sidebar input[type=date], #sidebar textarea, #sidebar label, #sidebar select { background-color: #fff; } .footnav ul { margin: 10px 0; padding: 0 } .footnav li { display: inline-block; line-height: 1; border-right: 1px solid rgba(255,255,255,.3); } .footnav li:last-of-type { border: none; } .footnav li a { display: block; padding: 0 10px; } footer { background-color: var(--accent); clear: both } footer p, footer address { margin: .5em 0 } footer address { font-size: 14px } footer a:hover { color: #fff; text-decoration: underline } footer, footer a { color: #fff; } footer > .wrap { padding: 20px 0; } footer li { margin-bottom: 10px; } footer .table.quad > div:last-of-type { vertical-align: middle; } .subfoot { padding: 10px 10px 20px; background-color: #fff; color: #4d4d4d } .subfoot ul { text-align: center; padding: 0; } .subfoot li { margin: 0 10px; } .subfoot li a { color: #4d4d4d; } .subfoot .table > div:last-of-type { text-align: right; opacity: .8; } .gmap { width: 100% } .seminar .gmap { height: 400px } .sidecontent { width: calc(100% - 220px); padding: 20px 0 30px } .sidebar { background-color: #eee; padding: 60px 10px; font-size: 15px } .questions { padding: 0 5px } .sidebar strong { font-size: 20px; color: var(--accent); font-weight: bold; display: block; margin-top: 40px } .sidebar li a { display: block; margin: 10px 0; padding: 10px 0; border-bottom: 1px solid #ccc } .sidebar li:last-of-type a { border-bottom: none } .sidebar li a:hover { text-decoration: none; color: var(--accent) } .sidebar ul { list-style-type: none; padding: 0 10px; margin: 0 } .sidebar li a { padding-left: 30px } .sidebar i.fa-li { top: 14px; left: -10px } .sidebar form input, .sidebar form textarea { font-size: 15px !important; } .grid.masterside { grid-template-columns: 1fr } .grid.masterside .page { padding: 20px 0 30px } aside summary { padding-left: 30px; text-indent: -20px } .sidebar .infog { margin-top: 60px; } .sidebar .infog img { display: block; margin: 10px auto 20px; } .sidebar .infog .button { display: block; max-width: 240px; font-weight: bold; background-color: #fff; padding: 9px 0; margin: 0 auto; } section .postThumbnail:empty { display: none } section .postThumbnail img { float: none; display: block; width: 100% !important; height: 100% !important; max-width: 100%; margin: 0; padding: 0; object-fit: cover; object-position: 50% 35% } .newsblog.homepage .posts { display: grid; grid-template-columns: repeat(2, 1fr); } .newsblog .postThumbnail { height: 250px; padding: 0 10px } .newsblog .post > h2, section .post > h3 { grid-area: title } .newsblog .post > .postThumbnail { grid-area: img } .newsblog .post > p:nth-of-type(1) { grid-area: date } .newsblog .post > p:nth-of-type(2) { grid-area: p } .newsblog .post > p:nth-of-type(3) { grid-area: btn } .newsblog .post > .posttags { grid-area: tags } .newsblog .post > .postcats { grid-area: cats } .newsblog.homepage .post { display: grid; grid-template-areas: "img" "title" "p" "btn" } .post { background: #eee; padding: 20px; margin: 50px 50px 50px 0; } .flex.service { margin: 0 -15px } .flex.service > li { flex: 1 0 280px; list-style: none; margin: 15px; text-align: center } .flex.service a { display: block } .team img { border-radius: 200px; width: 200px; height: 200px; } @media(max-width: 1200px) { .about-section {margin: 50px auto ; width: 100%;} } @media(max-width: 999px) { .banner, .cycle-slideshow { margin-top: 0 !important } .mitelvids > div { display: block; width: auto !important; padding: 0 !important; } .mitelvids iframe { max-height: 540px !important } nav ul ul { display: none !important } nav #search { display: block; max-width: 320px; margin: 10px auto } #search input { width: auto } .video { height: 54vw } .logo, nav { display: block; width: auto !important; text-align: center } .logo img { width: 300px; height: 145px; } header { position: relative; width: auto; } header .table { width: 100% } .banner .wrap { top: 50%; transform: translateY(-50%); } .banner .overlay { height: 350px } .panel h2 span { display: block } footer .table li:first-of-type span { display: block; } footer .table li { text-align: center } footer .table span { white-space: nowrap } .proit-icons img { width: 60px; height: 60px } .proit-icons a { font-size: 13px } .partners { grid-template-columns: repeat(2,1fr) } #history .grid:first-of-type { align-items: unset; margin: 0 auto; } #history .grid:last-of-type { align-items: unset; margin: 0 auto; } #search .grid { margin: 0 10px } .grid.masterside { grid-template-columns: 1fr; grid-gap: 0; } .section { margin: 25px; } .flex.service > li { flex: 1 0 220px; } .icons .nowrap { white-space: normal; } .grid.quad.values { grid-template-columns: repeat(3, 1fr) } .banner .csa1, .banner .csa2 { display: block; width: 100%; height: 200px; } .banner .csa1 { bottom: 200px; } .banner .csa2 { bottom: 0; } .banner h1 { font-size: 60px !important } } @media(max-width: 900px) { .grid.third.values { grid-template-columns: repeat(2, 1fr) } .about-section { margin: 50px 0; } header { background-position: 0; } } @media(max-width: 767px) { .row1 .quad > div, .row3 .table.panel > div { display: block; width: auto !important; } .panel > div { border-color: var(--accent); border-width: 30px; border-style: none none solid } .panel h2 span { display: inline } .back { display: block } .address .grid { grid-template-columns: 1fr 1fr; grid-gap: 10px 20px } footer ul { margin: 20px 10px } footer .quad > div { display: inline-block; width: 33%; } footer .quad > div:last-of-type { width: 100%; } footer .quad > div:last-of-type img { margin: 20px 0; } .training > div { display: block; width: auto !important; margin: 3% 0; } .training p { text-align: center; } .imgRight.micloud { float: none; margin: 1em auto; max-width: 100% } .row3 details ul { grid-template-columns: 1fr 1fr } .proit-icons { grid-template-columns: 1fr 1fr 1fr } .proit-icons img { width: 80px; height: 80px } .proit-icons a { padding: 0 5px } .grid.third.team { grid-template-columns: repeat(2, 1fr) } .service, .grid.quad { grid-template-columns: 1fr; } .grid.solutionssidenav { grid-template-columns: 1fr; } .grid.solutionssidenav div:nth-child(1) { padding-top: 5px; } .grid.solutionssidenav div:nth-of-type(odd) { order: -1 } .solutionssidenav li, .solutions li i { text-align: center; margin: 20px auto !important; } .solutionssidenav i { position: unset; } } @media(max-width:700px) { .table.plans > div { display: block !important; width: auto !important; } footer .quad > .table:first-of-type { display: inline } footer .quad > .table:last-of-type { display: table } footer .table li:first-of-type span { display: inline } footer ul { margin: 20px 10px } .footnav li { border: none; } .footnav ul:last-of-type { margin: 0 } .footnav ul:last-of-type a { display: block; padding: 5px 25px; border: 1px solid var(--accent); border-radius: 25px; margin: 8px } .table.third > div { display: block; width: auto !important; padding: 0 !important } .table.third { padding: 0; width: 100% } .subfoot .table > div:last-of-type, .subfoot p, .address li, .subfoot address { text-align: center } .address div { margin-bottom: 30px } .banner { background-position-y: 0 !important } .didyouknow div:nth-of-type(2) { border-style: solid none } .didyouknow h4 { margin: 1em 0 } .section { margin: 25px 0; } .service > div { margin-bottom: 30px } .service > div:last-of-type { margin-bottom: 0 } .table > .sidecontent, .table > .sidebar { display: block; width: auto } .table .sidebar { border: none; padding: 60px 10px 20px } .table .sidebar > div { display: inline-block; width: 49%; vertical-align: top } .newsblog.grid, .newsblog .grid { grid-template-columns: 1fr } .newsblog .posts .postThumbnail { padding: 0 } .icons.flex > div { flex: 1 0 228px } .icons h3 span { display: block } .sidebar .flex { margin: 0 -10px } .sidebar .flex > div { flex: 1 0 220px; margin: 0 10px } .video, .vidyard_player { height: 55vw } .banner h1 { font-size: 50px !important; line-height: 1.1 !important; padding-bottom: .4em } } @media(max-width:600px) { footer .quad > div { width: 50% !important; vertical-align: middle; } .partners, .grid.half, .row4 .grid, .newsblog .posts, .grid.third.values { grid-template-columns: 1fr !important } #values h2 { text-align: center; } .values p { margin: 0 auto; padding: 0 0 0 0; text-align: center; } .values svg { margin: 10px 40vw 10px; } .newsblog .post { margin: 0 0 25px 0 !important; } .cta-services p { text-align: center; } .table.half > div { display: block; width: auto !important; padding: 0 !important } .table.plans > div { padding: 20px !important } .video-guide { max-height: none; margin-left: 0 } } @media(max-width:500px) { .phone { text-align: center; } .imgRight, .imgLeft { float: none; margin: 1em auto; max-width: 100% } .row4 .infog { width: 300px; height: 480px; margin: 0 auto } .banner.main .wrap { top: 0; transform: none } .banner .overlay { padding: 40px 10px } .banner.main .overlay { height: auto; min-height: 350px } .row4 > p:last-of-type { text-align: center } .equipment td, .equipment tr, .equipment { display: inline } .proit-icons a { font-size: 12px } .cycle-slideshow { padding-bottom: 15px; height: 560px } .slide a { margin: 25px auto; display: block; text-align: center } .posts .postThumbnail { float: none; margin: 0; max-width: unset; width: 100%; height: 250px } .row3 .icons details ul, .grid.third { grid-template-columns: 1fr } .icons h3 span { display: inline } .grid.quad.values, .grid.third.team { grid-template-columns: 1fr } .footnav ul:last-of-type { display: grid; grid-template-columns: 1fr 1fr 1fr } .footnav ul:last-of-type li:last-of-type { grid-column: span 3 } .footnav ul:last-of-type a { text-align: center } } @media(max-width:400px) { .banner h1 { font-size: 43px !important } footer .quad > div { width: 100% !important; } footer .quad > div ul { margin: 20px 0; } footer .footnav ul { margin-top: 20px } .row1 i, .top em { display: block } .banner.main h1 { font-size: 28px } .banner.main p { font-size: 20px } .cycle-slideshow { height: 605px } section .address .grid { grid-template-columns: 1fr } .about-section, .section { padding: 10px 0 10px 0; } .about-section h2, .about-section p, .section h2, .section p { padding: 0 20px 0 20px; } .proit-icons img { width: 60px; height: 60px } .values svg { margin: 10px 33vw 10px; } .footnav ul:last-of-type { display: grid; grid-template-columns: 1fr 1fr } .footnav ul:last-of-type li:last-of-type { grid-column: span 2 } }