img, iframe {max-width: 100%; height: auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} body { font-family: 'Montserrat', sans-serif; font-size: 15px; background-color: #18254f; color: #4d4d4d; line-height: 1.8; text-align: center; min-width: 320px; } * { scroll-behavior: smooth } h1, h2, h3, h4, h5, h6, p, th, td, dd, dt, li, blockquote { text-align: left; } body, header ul, nav ul { padding: 0; margin: 0; } section ul, section ol, footer ul { padding: 0; } section ol li { margin-left: 5%; } img, iframe { max-width: 100%; height: auto; } a img, iframe { border: none; } a, .top a:hover, footer a:hover { text-decoration: none; color: #5a97d1; } a:hover, .featured a:hover h2 { text-decoration: underline; } .top a:hover, .featured a:hover, .cta a:hover { text-decoration: none; } hr { border-width: 1px; border-color: #eee; border-style: none none solid; margin: 40px 0; } .imgLeft, .imgRight { max-width: 60%; } .imgLeft { float: left; margin: 5px 4% 1% 0; } .imgCenter { display: block; margin: 0 auto; } .imgRight { float: right; margin: 5px 0 1% 4%; } .imgMedium { max-width: 250px; } .clear { clear: both; } .center { text-align: center; } .container { background-color: #fff; width: 100% } .wrap { max-width: 1000px; display: block; margin: 0 auto; position: relative; } .table { display: table; width: 100%; } .table.pad { padding: 0 10px; width: calc(100% - 20px) } .table > div { display: table-cell; vertical-align: top; } .table.half > div { width: 50%; } .table.half > div:first-of-type { padding-right: 2%; } .table.half > div:last-of-type { padding-left: 2%; } .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 { padding: 0 !important; } .featured .table.quad .table > div { padding: 0 5px } header li, nav li, .sub li { display: inline-block; } nav a, footer, footer a { color: #fff; } .sub div:last-of-type p, .right { text-align: right; } .nowrap { white-space: nowrap } header { font-weight: 600; background-image: linear-gradient( #fff 75%, #18254f 25% ); } header a { color: #4d4d4d; } header p { margin-bottom: 0; font-size: 16px } header i.fa { display: block; width: 23px; height: 18px } nav { background-color: #18254f; } nav a { display: block; padding: 5px 15px 15px; font-family: 'Montserrat', Verdana, sans-serif; } .top nav a:hover { color: #84abd1 } header .table div:nth-of-type(2) { width: 200px; text-align: center } header ul a { display: block; font-size: 18px; margin: 0 5px; } header ul li:last-of-type a { margin-right: 0 } .back { display: none; margin: 0 } .back i { font-size: 30px; line-height: 1; opacity: 0.9; } .banner { height: 400px; background-image: url(/images-design/banner.jpg); background-size: cover; background-position: center; padding: 0 8px; background-color: #ddd } .banner .wrap { top: 50%; transform: translateY(-50%); } .banner h1, .banner strong { font-size: 24px; text-transform: uppercase; padding-bottom: 10px; margin: 0; border-bottom: 1px solid #ccc; display: block } .banner p { font-size: 18px; font-weight: bold; } .banner em { display: inline-block; padding: 0 4px 4px 0; border-bottom: 2px solid #3083d1; line-height: 1 } .home h1, .home p { max-width: 500px; text-align: center; color: #fff; margin: 0 auto; text-shadow: 1px 1px 1px rgba(0,0,0,0.5); } .home p { padding-top: 20px; } .featured { margin: 20px 0 40px; } .featured a { color: #4d4d4d; display: block } .featured h2 { font-size: 16px; font-weight: 600; color: #006dd5; } .featured h2, .featured p { margin: 0 10px; } .cta h2 { color: #fff; text-align: center; font-size: 36px; margin: 0 auto } .cta, .recent { background-color: #18254f; color: #fff; padding: 30px 10px 20px; } .cta p { max-width: 800px; text-align: center; margin: 1em auto } .btn { font-weight: bold; text-transform: uppercase; background-color: #fff; color: #4d4d4d; padding: 15px 60px; border-radius: 4px; white-space: nowrap; display: inline-block } .btn:hover { background-color: #65a9eb; color: #fff } .recent h2 { color: #fff } .recent a { color: #7cb5eb; font-weight: bold } .recent p a { font-style: italic } .recent .blogs .posts { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px 20px } .recent .post h3 + p { display: none } .about { padding: 30px 10px; } .about h2, .consult h2 { font-size: 24px; text-transform: uppercase; text-align: center; } .consult { background-color: #f3f3f4; padding: 40px 0 50px; } section { padding: 40px 10px 20px; } .hide { display: none } h1, h2, h3, h4, .fakeh1 { color: #18254f; } .fakeh1 { font-size: 1.5em; margin: .83em 0; font-weight: bold; text-align: left; display: block; } section h2 { font-size: 18px; } section h3 { font-size: 16px; } section h4 { font-size: 14px; } section ul { padding-left: 20px; } section li { margin-bottom: 5px; } .quote { font-size: 18px; font-weight: bold; } .quote hr:first-of-type { margin: 50px 0 30px; } .quote hr:last-of-type { margin: 30px 0 50px; } .quote p { text-align: center; } .quote i { vertical-align: middle; color: #ddd; margin: 0 20px; } .table.contact > div:first-of-type { width: 250px; padding-right: 4% } .contact i { margin-right: 10px; } form { margin: 20px 0; text-align: left } form .table.half > div:first-of-type { padding-right: 1%; } form .table.half > div:last-of-type { padding-left: 1%; } form input, form textarea, form select { font-family: 'Montserrat', sans-serif; font-size: 14px; display: block; background-color: #f3f3f4; padding: 0 20px; margin-bottom: 15px; border: none; border-radius: 4px } section form h3 { color: #4d4d4d } form input[type=checkbox] { width: 13px; padding: 0; margin: 0 } form input[type=checkbox], form label span { display: inline-block; vertical-align: middle; } form input, form textarea { width: calc(100% - 40px); } form select, form input[type=submit] { width: 100%; } form input[type=text], form input[type=email], form input[type=tel], form select { height: 45px; } form textarea { height: 100px; padding: 20px; } form input[type=submit] { padding: 14px 10px 13px; border: none; background-color: #5a97d1 } form input[type=submit]:hover { cursor: pointer; background-color: #65a9eb } form label { font-weight: bold; } form input[type=submit] { font-weight: 600; color: #fff; } form input[type=submit], .btn, form input[type=submit]:hover, .btn:hover { transition: all .5s ease-in-out } .checkboxes { margin-bottom: 15px } .checkboxes label { white-space: nowrap; margin: 0 15px; display: inline-block; } #contact { text-align: left; } #consult h3 { font-size: 14px; margin: 0 } #network textarea { height: 125px } footer .wrap { padding: 30px 10px; } footer ul, .contact ul { list-style: none; } footer .wrap > strong { font-size: 16px; color: #fff; display: block; text-align: left; margin: 1em 0 } footer hr { border-color: rgba(255, 255, 255, 0.5); margin: 20px 0; } footer .sub > div:nth-of-type(2) li { line-height: 1; } footer .sub > div:nth-of-type(2) li:first-of-type { padding-right: 5px; border-right: 1px solid #fff; } footer .sub > div:nth-of-type(2) a { padding: 5px; } .skyline { background-color: #fff; } .skyline img { display: block; width: 100% } .announce { background-color: #800000; color: #fff; margin-bottom: 10px; } .announce p { margin: 0; padding: .5em; text-align: center; font-size: 14px; font-family: Verdana, sans-serif } .announce a { color: #fff } .announce span { display: inline-block; } .top .announce a:hover { color: #fff } .announce:hover span:last-of-type { text-decoration: underline; font-style: italic } .announce .nowrap:first-of-type { margin-right: 10px } html { --12px: .75rem; --14px: 0.875rem; --15px: 0.9375rem; --16px: 1rem; --17px: 1.0625rem; --18px: 1.125rem; --19px: 1.1875rem; --20px: 1.25rem; --24px: 1.5rem; --32px: 2rem; --50px: 3.125rem; } *:focus-visible, *:focus, input[type=submit]:focus-visible { outline-style: solid; outline-width: 2px; outline-color: #000; outline-offset: 4px; border-radius: 3px; transition: all .3s linear .01s; } :is(nav a, h1):focus-visible, .hero .btn { outline-color: #fff; box-shadow: unset } .jump { text-decoration-line: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; position: absolute; background: #fff; right: 150px; top: 0; padding: 10px; color: var(--primary); border-width: 2px; border-color: var(--secondary); border-style: none solid solid; transform: translateY(-100%); font-weight: bold; font-size: var(--16px); outline-offset: 0 !important } .jump:focus { transform: translateY(0%); } @media(prefers-reduced-motion:reduce) { * { transition: all 0s !important; scroll-behavior: unset; animation: none } } @media(max-width:999px) { .featured .quad > div { display: block; width: auto; margin: 20px 0 } } @media(max-width:767px) { header { background-image: none; background-color: #fff; padding: 0 0 10px } header .table.pad { padding: 0; width: 100% } header .table > div { display: block; text-align: center; padding: 15px 10px } header .table > div:nth-of-type(2) { padding: 15px 0; background-color: #18254f; width: 100% } header .table > div:nth-of-type(2) a { display: block; width: 160px; margin: 0 auto } header p { margin: 0 } header p, header ul { text-align: center !important } header img { display: block } nav { padding: 10px 0 } nav a { padding: 5px 10px; margin: 5px } .back { display: block; } } @media(max-width:500px) { .recent .blogs .posts { grid-template-columns: 1fr } .table.half > div, .table.third > div, .table.contact > div { display: block; width: auto !important; padding: 0 !important } .checkboxes label { display: block; margin: 8px 0; white-space: normal } .featured .quad > div { margin: 0 } .featured .quad .table > div { margin-bottom: 30px } .featured { padding: 40px 0 10px; margin: 0 } footer h3, footer li, footer p, .sub div:last-of-type p { text-align: center } section > .wrap > .imgRight { float: none; max-width: 100% !important; margin: 20px auto; } } @media(max-width:400px) { .checkboxes span.special { display: block } .checkboxes input.special { vertical-align: top; margin-top: 6px } .table.contact img { margin: 0 auto; display: block } .cta .nowrap { white-space: normal } }