img, iframe {max-width: 100%; height: auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} :root { --main-bg: #fff; --light: #e8ebef; --light-comp: #333; --dark: #023a51; --dark-comp: #fff; --primary: #396f8f; --primary-comp: #fff; --secondary: #186fdf; --secondary-comp: #fff; } body { font-family: 'Montserrat', Verdana, Geneva, Tahoma, sans-serif; font-size: 18px; line-height: 1.6; text-align: center; min-width: 320px; overflow-x: hidden } body, footer a, .reviews .grid p, .staff svg { color: var(--light-comp); } body, header ul, .hero h1, .hero p, .reviews iframe, .staff ul, .practice ul { padding: 0; margin: 0; } h1, h2, h3, h4, h5, h6, p, th, td, dd, dt, li, blockquote { text-align: left; } h1, h2, h3, h4, h5, h6, .staff a:hover svg { color: var(--dark); } h1, h2, h3, h4, h5, h6 { font-weight: 400; line-height: 1.4; } img, iframe, svg { max-width: 100%; height: auto; display: block; margin: 0 auto } main img{outline:1px solid #eee} iframe { aspect-ratio: auto 16 / 9; width: 100%; margin: 1em auto; } a img, iframe { border: none; } a, form input[type=submit]:hover, .btn:hover, .staff .flex a:before, .blog a:before { transition: linear .3s; } a, header a:hover, form input[type=submit]:hover, .btn:hover, footer a:hover, .staff .flex a:hover, .blog a:hover { text-decoration: none; } a, header a, header svg, footer a:hover, .staff .flex a:hover h2, .blog a:hover h2 { color: var(--primary); } a:hover { text-decoration: underline; } hr { border-width: 1px; border-color: var(--light); border-style: none none solid; margin: 40px 0; } .imgLeft, .imgRight { max-width: 45%; } .imgLeft { float: left; margin: 10px 20px 15px 0; } .imgRight { float: right; margin: 10px 0 15px 20px; } .clear { clear: both; } .nowrap, a[href^=tel] { white-space: nowrap; } sup { line-height: 0; } .hide { display: none !important; } .center, footer p, .hero h1, .hero p, .intro h1, .staff .flex h2,.contact :is(h2, li, .grid p) { text-align: center; } .wrap { display: block; max-width: 1200px; margin: 0 auto; position: relative; } .bg-dark, .bg-primary { color: var(--dark-comp); } .bg-dark { background-color: var(--dark); } .bg-primary { background-color: var(--primary); } .bg-light, nav ul ul a:hover { background-color: var(--light); color: var(--dark); } .mid { align-items: center; align-self: center; } .grid { display: grid; grid-gap: 10px 40px; } .grid.half { grid-template-columns: repeat(2,1fr); } .grid.third { grid-template-columns: repeat(3,1fr); } .grid.fourth { grid-template-columns: repeat(4,1fr); } header, footer, .reviews p, .reviews .btn, .staff .flex h2 span { font-size: 16px; } header, .hero { position: relative; } header .wrap { padding: 0 10px; } header .grid { grid-template-columns: 300px 1fr; } nav ul{ text-align: right; } header img { margin: 10px auto; max-width: 400px; width: 100% } header svg, main svg { vertical-align: middle; } nav svg, .reviews svg { display: inline } nav > ul:first-of-type, main strong, main b { font-weight: 600; } nav > ul:last-of-type { text-transform: uppercase; padding-top: 15px; margin-top: 15px; border-top: 1px solid var(--light); } nav li { display: inline-block; position: relative; } nav a { display: block; padding: 5px; margin: 5px; } nav svg { top: 13px; position: absolute } .main-nav svg { right: 0 } .main-nav li:has(svg) { padding-right: 15px } .top-nav li:has(svg) { padding-left: 15px } .top-nav svg { left: 0 } nav a:hover { color: var(--dark); } nav ul ul li, nav ul ul a, nav li:hover > ul { display: block; } nav ul ul, nav ul ul li:last-of-type a:hover { border-radius: 0 0 10px 10px; } nav ul ul { display: none; min-width: 200px; text-transform: capitalize; background-color: var(--main-bg); border-top: 2px solid var(--primary); position: absolute; z-index: 999; border-color: var(--light); border-width: 1px; border-style: none solid solid } nav ul ul li { margin: 0; } nav ul ul a { padding: 10px 20px; margin: 0 } nav .mobile-nav { display: none; } .mobile-nav a{margin:5px 10px} .hero { background-size: cover; background-position: center; position: relative; } .hero:before { content: ""; width: 100%; height: 100%; background-color: rgba(2,58,81,.6); position: absolute; top: 0; left: 0; z-index: 1; } .hero { width: 100%; height: 400px; } .hero > .wrap { top: 50%; transform: translateY(-50%); z-index: 2; } .hero h1, .hero p { color: var(--dark-comp); } .hero h1, .hero p { padding: 0 10px; text-shadow: 0 0 5px rgba(0,0,0,.3); } .hero h1, .hero p, .intro h1 { font-size: 48px; } .hero .btn { margin-top: 20px; } .bgimg { position: relative; } .bgimg > img:first-of-type { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; z-index: 0; } .hero > img { object-position: 50% 35% } .intro .wrap, .reviews .wrap { padding: 0 10px; } .intro h1 { font-weight: 300; line-height: 1; } .intro img { margin: 20px 0 50px; } .reviews { padding: 50px 0; } .reviews svg { color: #ffb542; } .reviews .grid div { text-align: left; background-color: var(--main-bg); padding: 20px; } .reviews .grid p { margin: 0; } .reviews div.leave { padding: 30px 20px ; margin-right: 2vw; border-radius: 10px; } .leave, .leave p { text-align: center !important; } .leave img { width: 25px; display: block; margin: 0 auto; } .leave .btn { line-height: 1.6; padding: 10px 40px; } form { text-align: left; margin: 20px 0; } form .grid, .reviews .grid { grid-gap: 0 10px; } form label { display: block; } form input[type=text], form input[type=email], form input[type=tel], form input[type=file], form input[type=submit], form select, form textarea, form input[type=password], .btn { font-family: 'Montserrat', Verdana, Geneva, Tahoma, sans-serif; font-size: 18px; } form input[type=text], form input[type=email], form input[type=tel], form select, form textarea, form input[type=password] { background-color: var(--main-bg); margin-bottom: 10px; padding: 0 10px; border: 1px solid var(--main-bg); border-radius: 5px; } form input[type=text], form input[type=email], form input[type=tel], form select, form input[type=password] { height: 55px; } form input[type=text], form input[type=email], form input[type=tel], form textarea, form input[type=password] { width: calc(100% - 20px); } form select { width: 100%; } form input[type=file] { margin-left: 10px; border-radius: 0; } form textarea { height: 150px; padding: 15px 10px; } form input[type=submit], .btn { display: inline-block; text-align: center; line-height: 1.4; background-color: var(--primary); color: var(--primary-comp); padding: 15px 50px; border: none; border-radius: 50px; transition: ease-in-out .3s;border:1px solid var(--primary) } form input[type=submit]:hover, .btn:hover { cursor: pointer; background-color: var(--dark); color: var(--primary-comp);border:1px solid var(--dark) } .btn { margin: 10px 0; } footer { border-top: 2px solid var(--dark); clear: both } footer .wrap, .practice .bg-light .wrap { padding: 40px 10px; } .contact .bg-light { margin: 20px 0; } footer .logo { max-width: 300px; filter: brightness(0) invert(1); margin: 20px auto 40px } footer .a8bmark { margin: 40px auto 10px;filter:invert(1) } .ccpaNotice { text-align: center !important; } main { padding: 40px 10px 50px; } main img { border-radius: 10px; } main h1, .row2 h3, .about h3, .solutions h3, .contact h2, .fs30 { font-size: 30px; } main h2, .contact .grid.third h2 { font-size: 24px; } main h3, .practice .bg-light { font-size: 20px; } main h4 { font-size: 18px; } main ul, main ol { padding-left: 25px; } main li, footer li { margin: 5px 0; } .nolist, footer ul, .contact ul { list-style: none; padding-left: 0; } .practice .bg-light { margin-bottom: 40px; } .practice li { display: inline-block; line-height: 1; margin: 10px 0; padding: 0 10px; border-right: 1px solid var(--dark); } .practice li:last-of-type { border: none; } .practice .grid { padding: 20px 10px; } .practice .grid:nth-of-type(even) div:first-of-type { order: 1; } .staff .flex { display: flex; flex-wrap: wrap; grid-gap: 20px 10px; margin: 40px auto; } .staff .flex > * { flex: 1; } .staff .flex > div { flex: 0 2 calc(33% - 10px); } .staff .flex a, .staff .flex img, .blog a, .blog img { display: block; } .staff .flex a, .blog a { position: relative; } .staff .flex a:before, .blog a:before { content: ""; width: 100%; height: 100%; border-radius: 10px; position: absolute; top: 0; left: 0; } .staff .flex img {margin-bottom: 80px;} .staff .flex div > a:hover:before, .blog a:hover:before { background-color: rgba(57,111,143,.3); } .staff .flex img, .blog img { object-fit: cover; width: 100%; height: auto; } .staff .flex > div { flex: 0 1 calc(33% - 10px); } .staff .flex > div:nth-last-child(1), .staff .flex > div:nth-last-child(2) { margin: 0 auto; } .staff .flex h2, .blog h2 { width: 100%; margin: 0; position: absolute; top: 101%; } .staff .flex h2 span { display: block; } .staff .flex li { display: inline-block; margin: 0 5px; } .faq h2 { margin-bottom: 30px; } .blog { margin: 20px 0; } .faq details { text-align: left; margin-top: 20px; position: relative; } .faq details ::marker { content: none; } .faq summary { margin-left: 30px; } .faq summary:hover { cursor: pointer; color: var(--primary); } .faq summary:before { content: "＋"; font-size: 24px; font-weight: bold; color: var(--primary); position: absolute; top: -5px; left: 0; } .faq details[open] summary:before { content: " – "; font-size: 28px; top: -10px; left: 4px; } .faq li { margin: 15px 0; } .blog .grid { padding-bottom: 80px; } .blog h2 { width: 100%; margin-top: 10px; text-align: center; } .blog a:before, .blog img { min-height: 386px; } .full { width: 100%; margin: 20px 0; } .contact .wrap { padding: 20px 10px; } .contact .bg-light { padding-bottom: 20px; } @media(forced-colors:active) { footer .a8bmark { filter: unset } footer .logo{filter:invert(0)} } @media(max-width: 999px) { nav ul ul { display: none !important; } header .grid { grid-template-columns: 1fr; } nav ul{ text-align: center; } nav .main-nav{ display: none; } nav .mobile-nav { display: block; } footer img { margin: auto 0; } .top-nav li{margin:0 10px} .staff .flex { gap: 20px; } .staff .flex > * { flex: 0 1 calc(50% - 10px); max-width: calc(50% - 10px); } .staff .flex > div { flex-basis: calc(50% - 10px); position: relative; } .staff .flex img { width: 100%; height: auto; object-fit: cover; margin-bottom: 40px; border-radius: 10px; } .staff .flex h2, .blog h2 { position: static !important; width: 100%; margin: 8px 0 6px; text-align: center; } .staff .flex ul { display: block; text-align: center; margin-top: 6px; padding: 0; } .staff .flex li { display: inline-block; margin: 0 6px; } } @media(max-width: 767px) { .contact .grid.third { grid-template-columns: 1fr; } .grid.fourth, .grid.third { grid-template-columns: 1fr 1fr; } .grid.third > *:last-of-type:nth-of-type(odd) { grid-column: 1 / -1 } .hero p { text-align: center !important; max-width: 100% !important; } .reviews div:has(p) { margin: 5px 0; } .reviews div.leave{margin-right:unset} footer .grid > div:first-of-type { grid-column: unset; } footer h3, footer li, footer .social, footer h2, footer p { text-align: center; } } @media(max-width:700px) { .practice li { text-align: center; } .blog .grid.half { grid-template-columns: 1fr; } .blog .grid.half a { margin: 15px; } .blog .grid.half a:first-of-type { margin-bottom: 7vh; } } @media(max-width:600px) { .imgRight, .imgLeft { float: none; margin: 0; max-width: 100% } .grid.half, .grid.third{ grid-template-columns: 1fr; } header .grid > div { text-align: center } } @media(max-width:500px) { .grid.fourth { grid-template-columns: 1fr } } @media(max-width:400px) { .hero h1 { font-size: 40px; } .blog .grid.half a:first-of-type { margin-bottom: 13vh; } }