img, iframe {max-width: 100%; height: auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} body { min-width: 320px; font-family: 'Montserrat', sans-serif; font-size: 18px; background-color: #1b75bb; color: #4d4d4d; line-height: 1.6; text-align: center; } h1, h2, h3, h4, h5, h6, p, th, td, dd, dt, li, blockquote { text-align: left; } body, nav ul, footer ul { padding: 0; margin: 0; } img, iframe { max-width: 100%; display: block } a img, iframe { border: none; } a, nav ul a:hover, form input[type=submit]:hover, .btn:hover, .phone:hover, footer a:hover { text-decoration: none; color: #8bc541; transition: ease-out .3s; } a:hover { text-decoration: underline; transition: ease-in .3s; } .packages a:hover { text-decoration: none; } hr { border-width: 1px; border-color: #eee; border-style: none none solid; margin: 30px 0; } .imgLeft, .imgRight { max-width: 50%; } .imgLeft { float: left; margin: 10px 4% 2% 0; } .imgCenter { display: block; margin: 0 auto; } .imgRight { float: right; margin: 10px 0 2% 4%; } .clear { clear: both; } .nowrap { white-space: nowrap; } .hide { display: none !important; } .center { text-align: center; } .container { background-color: #fff; } .wrap { display: block; max-width: 1080px; margin: 0 auto; position: relative; } .table { display: table; width: 100%; } .table > div { display: table-cell; vertical-align: top; } .table.mid > div { vertical-align: middle } .table.half > div { width: calc(100% / 2); } .table.half > div:first-of-type { padding-right: 4%; } .table.half > div:last-of-type { padding-left: 4%; } .table.third > div { width: calc(100% / 3); } .table.third > div:nth-of-type(1) { padding-right: 4%; } .table.third > div:nth-of-type(2) { padding-left: 2%; padding-right: 2% } .table.third > div:nth-of-type(3) { padding-left: 4%; } .grid{display:grid;grid-gap:20px} .flex { display: flex } header .table > div, .banner .table > div, .table.address > div, footer .table.half > div { vertical-align: middle; } nav ul, nav li, footer .table.half li { display: inline-block; } header { padding: 20px 0; } header img { max-width: 200px; } header .table > div:first-of-type { width: 200px; padding-left: 10px; } header .table > div:last-of-type { width: calc(100% - 210px); } header .table > div:last-of-type, .banner .main .table > div:first-of-type p, footer .mark { text-align: right; } nav { font-size: 14px; font-weight: bold; text-transform: uppercase; } nav a { display: block; color: #1b75bb; padding: 5px 10px; margin: 5px } nav ul:last-of-type a { color: #4d4d4d; border: 1px solid #ddd; border-radius: 6px; } nav ul:last-of-type a:hover { border: 1px solid #8bc541; } blockquote { font-style: italic; padding: 1.2em 30px 1.2em 75px; border-left: 8px solid #1b75bb; line-height: 1.6; position: relative; background: #EDEDED; } blockquote::before { font-family: arial; content: "\201C"; color: #1b75bb; font-size: 4em; position: absolute; left: 10px; top: -10px; } blockquote::after { content: ''; } blockquote span { display: block; color: #4d4d4d; font-style: normal; font-weight: bold; margin-top: 1em; } .telephone { color: #4d4d4d; display: inline-block; font-size: 16px; font-weight: bold; padding: 5px 10px; } .telephone:hover { color: #8bc541; text-decoration: none; } .intro, .packages .table > div { background-size: cover; background-position: center; } .banner { height: 400px; background-image: url(/images-design/bg-banner.jpg); background-position: right; background-repeat: repeat-x; } .banner .wrap { top: 50%; transform: translateY(-50%); } .banner .table > div:last-of-type, footer .table > div { padding: 0 10px !important; } .banner .table > div:first-of-type { width: 45%; padding: 0 10px 0 0 !important } .banner .table > div:last-of-type { width: 55%; } .banner img { height: 400px; box-shadow: 2px 2px 5px rgba(0,0,0,.2); object-fit: cover } .banner p, footer, footer a { color: #fff; } .banner p, .banner .main strong { font-size: 30px; font-weight: 900; } .banner p { text-align: left; text-shadow: 2px 2px 3px rgba(0,0,0,.3); } .banner .main .overlay { height: 600px; background-color: rgba(0,0,0,.3); } .banner .main p { font-size: 22px; font-weight: 400; margin: 0 0 0 20px; } .banner .main .overlay p { text-align: left } .banner .main strong { text-transform: uppercase; line-height: 1.2; margin: 0; position: relative; } .title { position: relative; z-index: 888; } .title:before { content: ""; background-color: #fff; display: inline-block; height: 125px; width: 250px; margin: 0 1em 1em 0; border-top-left-radius: 250px; border-top-right-radius: 250px; position: absolute; } .intro { background-image: url(/images-design/perspective-grid-hexagonal-surface-vector-illustration.png); } .intro .flex { max-width: 860px; margin: 0 auto; padding: 80px 0 150px; align-items: center; flex-wrap: wrap; justify-content: center } .intro .flex > div:first-of-type { flex: 1 1 0; min-width: 300px; } .intro .flex > div:last-of-type { flex: 0 0 152px; text-align: center } .intro .flex div { padding: 0 20px } .intro .title:before { top: -75px; right: -15px; } .intro h2, .packages h2, .companies h2 { margin-top: 20px; } .intro h2, .packages h2, .packages h3, .packages p, .companies h2, .cta h2 { text-align: center; } .intro h2, .packages h2, .packages h3, .companies h2, .cta h2 { font-size: 24px; } .intro h2, .packages h2, .cta h2 { width: 250px; position: absolute; z-index: 999; } .intro h2 { top: -50px; right: 0; } .intro .btn, .cta h2 { margin: 0; } .packages .title:before { top: -95px; left: 0; } .packages .table {height:100%; min-height: 340px; position: relative; } .packages a, .packages h3 { color: #4d4d4d; } .packages h2 { top: -65px; } .packages h3 { margin-top: 0; padding-bottom: 10px; border-bottom: 1px solid #eee; } .packages p { width: 90%; margin: 15px auto; padding: 50px 0 40px; } .packages li { margin: 0; } .packages .grid, .packages .btn, .companies h2, .companies .carousel { position: relative; z-index: 999; } .packages .grid { display: grid; grid-template-columns: repeat(2, 1fr); margin-bottom: 30px; } .packages .grid a { display: block; background-color: #fff; margin: 10px; border-radius: 15px; box-shadow: 2px 2px 5px rgba(0,0,0,.2); } .packages .table p { padding: 0; } .packages .table > div:first-of-type { width: 40%; border-radius: 15px 0 0 15px; } .packages .table > div:last-of-type { width: 60%; padding: 20px 5% 80px; position: relative } .packages .security .table > div:first-of-type { background-image: url(/images-design/graphical-representation-of-computer-virus-infection-spreading-out-in-a-network-cyber-security.png); background-position-x: -100px; } .packages .table span.btn { position: absolute; left: 50%; transform: translateX(-50%); bottom: 40px } .packages .help .table > div:first-of-type { background-image: url(/images-content/voip-phone.jpg); background-position-x: -60px; } .packages .noc .table > div:first-of-type { background-image: url(/images-design/man-and-woman-working-in-data-center-with-laptop-it-engineer-technician-specialists-in-server-room.jpg); } .packages .projects .table > div:first-of-type { background-image: url(/images-design/startup-business-people-group-working-as-team-to-find-solution-to-problem.jpg); background-position-x: -50px; } .grey { background-image: linear-gradient(#fff 50%, #eee); } .grey:before { content: ""; background-color: #fff; width: 100%; height: 600px; border-radius: 100%; position: absolute; top: 750px; left: 0; z-index: 888; } .companies { padding: 80px 0 50px; } .companies .carousel { height: 96px; } .companies img { max-width: 150px; vertical-align: middle; margin: 20px 30px; } .comments { padding: 50px 0 80px; } .comments p { font-size: 16px; } .comments span { text-transform: uppercase; color: #1b75bb; } .comments .btn { margin-top: 40px; } .cta .title { background-color: #1b75bb; padding: 60px 0; } .cta .title:before, .cta h2 { left: 50%; transform: translateX(-50%); } .cta .title:before { top: 30px; z-index: -888; } .cta h2 { top: 85px; } section, footer .wrap { padding: 40px 0; } section h1, section h2, section h3, section h4 { color: #1b75bb; } section h2, section h3, section h4 { margin-top: 40px; } section h1 { font-size: 24px; } section h2 { font-size: 20px; } section h3, footer h3 { font-size: 18px; } section h4 { font-size: 16px; } section ul, section ol { padding-left: 25px; } section li, footer li { margin: 5px 0; } .nolist, .packages ul, .address ul, footer ul { list-style: none; padding: 0; } .btn { display: inline-block; min-width: 100px; font-size: 16px; background-color: transparent; color: #4d4d4d; padding: 10px 25px; margin-top: 20px; border: 1px solid #4d4d4d; border-radius: 10px; transition: ease-out .3s; text-align: center; } .phone { display: block; color: #4d4d4d; padding: 10px 0; margin: 40px 0 20px; border-radius: 10px; border: 1px solid #ddd; text-align: center } .phone:hover { border: 1px solid #8bc541; } .phone strong { display: block; font-size: 36px; } .address iframe, .address ul, .address #contact { border-radius: 10px; } .address iframe { width: 100%; height: 290px; } .address ul { background-color: #1b75bb; color: #fff; padding: 30px 40px 40px; margin: 5px 0 0; } .address #contact { padding: 40px; background-color: #eee; } .address > div:first-of-type { width: 335px; } .address > div:last-of-type { width: calc(100% - 350px); padding-left: 15px; } .news ul { list-style: none; padding: 0; } .news p { font-weight: bold; } .framework h2 { margin-top: 20px; } .grid.framework{grid-template-columns:repeat(4, 1fr);padding-right:10px} form { margin: 40px 0; } form .table.half > div:first-of-type { padding-right: 7px; } form .table.half > div:last-of-type { padding-left: 7px; } form input[type=text], form input[type=email], form input[type=tel], form input[type=file], form input[type=submit], form select, form textarea { font-family: 'Montserrat', sans-serif; font-size: 16px; } form input[type=text], form input[type=email], form input[type=tel], form select, form textarea { background-color: #f5f5f5; margin-bottom: 15px; padding: 0 20px; border: none; } form input[type=text], form input[type=email], form input[type=tel], form textarea { width: calc(100% - 40px); } form input[type=text], form input[type=email], form input[type=tel], form select { height: 50px; } form select { width: 100%; } form input[type=file] { margin-left: 10px; } form textarea { height: 150px; padding: 20px; } form input[type=submit] { min-width: 170px; font-size: 16px; background-color: transparent; color: #4d4d4d; padding: 15px; border: 1px solid #4d4d4d; border-radius: 10px; transition: ease-out .3s; } form input[type=submit]:hover, .btn:hover, .packages a:hover span { cursor: pointer; color: #8bc541; border: 1px solid #8bc541; transition: ease-in .3s; } .cta #contact { margin-top: 60px; } .address #contact input[type=text], .address #contact input[type=email], .address #contact input[type=tel], .address #contact textarea { background-color: #fff; } footer { font-size: 16px; } footer .table.mid { font-size: 14px; margin-top: 50px; } footer ul { margin: 30px 0; text-align: left } footer .mid li { display: inline-block } footer .mid li a { display: inline-block; line-height: 1; padding-left: 10px; margin-left: 10px; border-left: 1px solid rgba(255,255,255,.3); } footer .mark { width: 150px } footer .mark a { display: inline-block; margin: 5px auto } @media(max-width:999px) { section h1, section h2, section h3, section h4, section h5, section h6, section p,section .table { padding-left: 10px; padding-right: 10px } section .table{width:calc(100% - 20px)} .packages .table{width:100%;padding:0} section .table ol,section .table ul{padding-left:25px} section ol,section ul{padding-left:35px} .address p { padding: 0 } } @media(max-width:700px) { .packages .grid { display: block } .packages .table { height: auto;min-height:unset } .packages .table span.btn { position: relative; left: unset; transform: none; bottom: unset } .packages .table > div:last-of-type { padding: 20px 5% 40px } .banner p { text-align: center } .grid.framework{grid-template-columns:repeat(2,1fr)} } @media(max-width:600px) { .table.third > div, footer .table.mid > div, header .table > div,.table.address>div { display: block; width: auto !important; padding: 0 !important } footer h3, footer ul, footer li { text-align: center } footer .third div:nth-of-type(1) li, footer .third div:nth-of-type(2) li { display: inline-block } footer .third div:nth-of-type(1) li a, footer .third div:nth-of-type(2) li a { display: block; padding: 8px 16px; margin: 4px 8px; border: 1px solid #fff; border-radius: 10px } footer .mid li a { margin: 0; padding: 5px } footer ul { margin: 0 } footer h3 { margin-bottom: 0 } footer .mid li, header ul { display: block } footer .mid li a { border: none; } footer .mark, footer .mid li { text-align: center } header div { text-align: center !important } header a{display:block} header img{margin:0 auto 1em} .address ul,form{margin:1em 0} nav ul:last-of-type a{padding:10px 20px} .mark{margin-top:30px} } @media(max-width:500px) { .banner .main .table > div,section .table.half>div { display: block; padding: 0 !important; width: auto !important } .banner .main p { text-align: center !important; padding: 0 15px; margin: 1em auto } .intro .flex div { padding: 0 10px } .packages .grid a { margin: 10px 0 } .packages .table > div:first-of-type { background-image: none !important } .packages .table > div:last-of-type { background-color: rgba(255,255,255,.85);padding:20px 20px 40px;box-shadow: 2px 2px 5px rgba(0,0,0,.2); } .packages .grid .table { background-size: cover; border-radius: 15px;background-position:right;width:calc(100% - 30px);padding-right:30px } .packages .security .table { background-image: url(/images-design/graphical-representation-of-computer-virus-infection-spreading-out-in-a-network-cyber-security.png); } .packages .help .table { background-image: url(/images-content/voip-phone.jpg); } .packages .noc .table { background-image: url(/images-design/man-and-woman-working-in-data-center-with-laptop-it-engineer-technician-specialists-in-server-room.jpg); } .packages .projects .table { background-image: url(/images-design/startup-business-people-group-working-as-team-to-find-solution-to-problem.jpg); } .imgRight{float:none;margin:1em auto;max-width:100%} } @media(max-width:400px) { .packages .table > div:first-of-type { width: 70px } .packages .table > div:last-of-type { width: calc(100% - 110px); } .intro .title:before,.packages .title:before{left:50%;transform:translateX(-50%);right:unset} .intro .title,.packages .title{text-align:center} .intro h2,.packages h2{right:unset;left:unset;position:relative;width:auto;top:-50px} .intro .flex{padding:0 0 150px;margin-top:-30px} .intro .flex p{text-align:center} .packages p{margin-top:-30px;padding-top:0} .banner img{height:350px} .grid.framework{display:block} nav ul:first-of-type li{width:calc(50% - .25em)} nav li{text-align:center} .ccpaNotice{text-align:center !important;padding:5px 0 !important} }