/*================================================== ###################### Base ######################## ===================================================*/ body{ background-color: #d1d1c7; background-image: url("../img/billie-holiday.png"); } .modal-content { background-color: #fffdf0; background-image: url("../img/billie-holiday.png"); } .navbar .logo-image img { width: 250px; } .btn-solid-reg, .btn-solid-sm { text-shadow: none; box-shadow: 0px 1px 1px #fff, inset 0 0 5px rgba(0,0,0,.5); margin-bottom:10px; } .courthouse-bg { background: url("../img/greenwood_courthouse.jpg"); background-size: cover; border-top: 165px solid #021c2bef; border-bottom: 10px solid #021c2bef; } .courthouse-foreground { background-color: #021c2b; } .fade-in { animation: fadeIn 5s; -webkit-animation: fadeIn 5s; -moz-animation: fadeIn 5s; -o-animation: fadeIn 5s; -ms-animation: fadeIn 5s; } @keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-moz-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-webkit-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-o-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-ms-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } .img-border { border: 5px solid rgba(11, 72, 110, .5); box-shadow: inset 0 0 5px rgba(0,0,0,.5), 1px 1px 1px #0b486e; } #practice { scroll-margin: 150px 0 0 0; } .legal-icons { font-size: 2rem; color:rgba(11, 72, 110, .7); text-shadow: 0px 1px 1px #fff, 0 0 1px #000; } .services { min-height: 490px; background-color: #fffdf0; background-image: url("../img/billie-holiday.png"); border-radius: 5px; } .card-title { font-weight:900; } .testimonial { background: none; color:#e3e7d9; } #attorneys { scroll-margin: 150px 0 0 0; } #contact .fas, .fab { color:#0B486E; } .franklin { display: block; font-family: 'Libre Franklin', sans-serif; color:#0b486e; text-shadow: 0px 1px 1px #fff, 0 0 1px #000; -webkit-background-clip: text; background-clip: text; } .franklin_dk { display: block; font-family: 'Libre Franklin', sans-serif; color:#dde0dc; text-shadow: 0 -1px 1px rgb(0, 0, 0); -webkit-background-clip: text; background-clip: text; } .neutral_bg { background-color: #d1d1c7; } .neutral_txt { color:#d1d1c7; } .blue_dk_bg { /* background-color:#051c2b; */ background: rgb(5,28,43); background: linear-gradient(0deg, rgba(5,28,43,0.8701855742296919) 0%, rgba(5,28,43,1) 100%); } .blue_bg { background-color: #0b486e; } .red_bg { background-color: #6d0000; } .red_txt { color: #6d0000; } .red_dk_bg { background-color: #360000; } .bg-paper { background-color: #fffdf0; background-image: url("../img/billie-holiday.png"); border-radius: 5px; } .p-really-small { font-size: 9px; color: #3d3d3d !important; } /*================================================== ###################### Base ######################## ===================================================*/ body, html { width: 100%; height: 100%; } h1 { color: #222222; font-weight: 700; font-size: 2.5rem; line-height: 3.25rem; letter-spacing: -0.4px; } h2 { color: #222222; font-weight: 700; font-size: 2rem; line-height: 2.625rem; letter-spacing: -0.4px; } h3 { color: #222222; font-weight: 700; font-size: 1.75rem; line-height: 2.25rem; letter-spacing: -0.2px; } h4 { color: #222222; font-weight: 700; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.2px; } h5 { color: #222222; font-weight: 700; font-size: 1.25rem; line-height: 1.625rem; } h6 { color: #222222; font-weight: 700; font-size: 1rem; line-height: 1.375rem; } .p-large { font-size: 1.5rem; line-height: 1.9rem; } .p-small { font-size: 0.875rem; line-height: 1.5rem; } .testimonial-text { font-style: italic; } .testimonial-author { font-weight: 700; font-size: 1.25rem; line-height: 1.75rem; } .li-space-lg li { margin-bottom: 0.5rem; } a { color: #6D0000; text-decoration: underline; } a:hover { color: #5e6576; text-decoration: underline; } .no-line { text-decoration: none; } .no-line:hover { text-decoration: none; } .blue { color: #0B486E; } .bg-gray { background-color: #f9f9f9; } .section-title { display: inline-block; margin-bottom: 0.75rem; padding: 0.125rem 1.75rem; border-radius: 30px; background-color: #ffe7eb; color: #ff5574; font-weight: 600; font-size: 0.875rem; } .btn-solid-reg { display: inline-block; padding: 1.375rem 2.25rem 1.375rem 2.25rem; border-radius: 30px; background-color: rgb(11, 72, 110); color: #ffffff; font-weight: 600; line-height: 0; text-decoration: none; transition: all 0.2s; } .btn-solid-reg:hover { background-color: transparent; color: #0B486E; /* needs to stay here because of the color property of a tag */ text-decoration: none; } .btn-solid-lg { display: inline-block; padding: 1.625rem 2.625rem 1.625rem 2.625rem; border: 1px solid #0976BA; border-radius: 30px; background-color: #0B486E; color: #ffffff; font-weight: 600; font-size: 22px; line-height: 0; text-decoration: none; transition: all 0.2s; } .btn-solid-lg:hover { background-color: transparent; color: #0976BA; /* needs to stay here because of the color property of a tag */ text-decoration: none; } .btn-solid-sm { display: inline-block; padding: 1rem 1.5rem 1rem 1.5rem; border-radius: 30px; background-color: #ff5574; color: #ffffff; font-weight: 600; font-size: 22px; line-height: 0; text-decoration: none; transition: all 0.2s; } .btn-solid-sm:hover { background-color: transparent; color: #ff5574; /* needs to stay here because of the color property of a tag */ text-decoration: none; } .btn-outline-reg { display: inline-block; padding: 1.375rem 2.25rem 1.375rem 2.25rem; border: 1px solid #5e6576; border-radius: 30px; background-color: transparent; color: #5e6576; font-weight: 600; font-size: 0.875rem; line-height: 0; text-decoration: none; transition: all 0.2s; } .btn-outline-reg:hover { background-color: #5e6576; color: #ffffff; text-decoration: none; } .btn-outline-lg { display: inline-block; padding: 1.625rem 2.625rem 1.625rem 2.625rem; border: 1px solid #5e6576; border-radius: 30px; background-color: transparent; color: #5e6576; font-weight: 600; font-size: 0.875rem; line-height: 0; text-decoration: none; transition: all 0.2s; } .btn-outline-lg:hover { background-color: #5e6576; color: #ffffff; text-decoration: none; } .btn-outline-sm { display: inline-block; padding: 1rem 1.5rem 1rem 1.5rem; border: 1px solid #5e6576; border-radius: 30px; background-color: transparent; color: #5e6576; font-weight: 600; font-size: 0.875rem; line-height: 0; text-decoration: none; transition: all 0.2s; } .btn-outline-sm:hover { background-color: #5e6576; color: #ffffff; text-decoration: none; } select { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; background-image: url('../images/down-arrow.png'); background-position: 98% 50%; background-repeat: no-repeat; outline: none; } /*================================================== ################### Navigation ##################### ===================================================*/ .navbar { font-weight: 600; font-size: 22px; line-height: 0.875rem; box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.05); background-color: #d1d1c7; background-image: url("../img/billie-holiday.png"); } .navbar .navbar-brand { padding-top: 0.25rem; padding-bottom: 0.25rem; } .navbar .logo-text { color: #222222; font-weight: 700; font-size: 1.875rem; line-height: 1rem; text-decoration: none; } .offcanvas-collapse { position: fixed; text-align:center; top: 135px; bottom: 0; left: 100%; width: 100%; padding-right: 1rem; padding-left: 1rem; overflow-y: auto; visibility: hidden; background-color: #d1d1c7; background-image: url("../img/billie-holiday.png"); transition: visibility .3s ease-in-out, -webkit-transform .3s ease-in-out; transition: transform .3s ease-in-out, visibility .3s ease-in-out; transition: transform .3s ease-in-out, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out; } .offcanvas-collapse.open { visibility: visible; -webkit-transform: translateX(-100%); transform: translateX(-100%); } .navbar .navbar-nav { margin-top: 0.75rem; margin-bottom: 0.5rem; } .navbar .nav-item .nav-link { padding-top: 0.625rem; padding-bottom: 0.625rem; color: #0B486E; text-decoration: none; transition: all 0.2s ease; } .navbar .nav-item.dropdown.show .nav-link, .navbar .nav-item .nav-link:hover, .navbar .nav-item .nav-link.active { color: #6d0000; } .navbar .navbar-toggler { padding: 0; border: none; font-size: 1.25rem; } .navbar .btn-solid-sm { border-color: #6d0000; background-color: #6d0000; } .navbar .btn-solid-sm:hover { background-color: transparent; color: #6d0000; } /*================================================== ##################### Header ####################### ===================================================*/ .header { padding-top: 8rem; padding-bottom: 40px; text-align: center; } .header .h1-large { margin-bottom: 1.25rem; } .header .p-large { margin-bottom: 2.75rem; } .header .btn-solid-lg { display: block; margin-bottom: 1.75rem; } .header .quote { display: block; color: #222222; } .header .quote i { margin-right: 0.5rem; color: #222222; } .header .text-container { margin-bottom: 5rem; } /*================================================== ################### Practice ####################### ===================================================*/ .cards-1 .card { margin-bottom: 5rem; padding: 3rem 2rem; border: 1px solid #00000020; } .cards-1 .card-icon { width: 90px; height: 90px; text-align: center; background-size: 90px 90px; } .cards-1 .card-icon .fas, .cards-1 .card-icon .far { margin-right: 0.75rem; color: #0B486E; font-size: 2rem; line-height: 98px; } .cards-1 .card-body { padding: 0; } .cards-1 .card-title { margin-bottom: 1.125rem; } .cards-1 .card-body p { margin-bottom: 1.125rem; } .cards-1 .list-unstyled { margin-bottom: 0; } .cards-1 .list-unstyled .fas { font-size: 0.875rem; line-height: 1.625rem; } .cards-1 .list-unstyled .flex-grow-1 { margin-left: 0.5rem; } .basic-1 .image-container { margin-bottom: 4rem; } .basic-1 h2 { margin-bottom: 1.875rem; } .basic-1 h2 span { font-weight: 400; } .basic-1 p:last-of-type { margin-bottom: 2rem; } .basic-1 .btn-solid-reg { cursor: pointer; } /*================================================== ###################### Modal ####################### ===================================================*/ .modal-dialog { max-width: 1150px; margin-right: 1rem; margin-left: 1rem; pointer-events: all; } .modal-content { padding: 2.75rem 1.25rem; } .modal-content .btn-close { position: absolute; right: 10px; top: 10px; } .modal-content .image-container { margin-bottom: 3rem; } .modal-content img { border-radius: 6px; } .modal-content h3 { margin-bottom: 0.5rem; } .modal-content hr { width: 44px; margin-top: 0.125rem; margin-bottom: 1.25rem; margin-left: 0; height: 2px; border: none; background-color: #53575a; } .modal-content h4 { margin-top: 2rem; margin-bottom: 0.625rem; } .modal-content .list-unstyled { margin-bottom: 2rem; } .modal-content .list-unstyled .fas { font-size: 0.75rem; line-height: 1.75rem; } .modal-content .list-unstyled .flex-grow-1 { margin-left: 0.5rem; } .modal-content .btn-solid-reg { margin-right: 0.75rem; } .modal-content .btn-outline-reg { cursor: pointer; } /*================================================== #################### Slider ####################### ===================================================*/ .slider-1 { /*padding-top: 9.75rem; padding-bottom: 4.5rem;*/ padding-top: 30px; padding-bottom: 30px; } .slider-1 .slider-container { position: relative; } .slider-1 .swiper-container { position: static; width: 86%; } .slider-1 .swiper-button-prev:focus, .slider-1 .swiper-button-next:focus { /* even if you can't see it chrome you can see it on mobile device */ outline: none; } .slider-1 .swiper-button-prev { left: -12px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2028%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23707375'%2F%3E%3C%2Fsvg%3E"); background-size: 18px 28px; } .slider-1 .swiper-button-next { right: -12px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2028%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23707375'%2F%3E%3C%2Fsvg%3E"); background-size: 18px 28px; } .slider-1 .card { border: none; } .slider-1 .card-body { padding: 0; } .slider-1 .quotes { margin-bottom: 3rem; width: 64px; } .slider-1 .testimonial-text { font-size: 1.1rem; line-height: 2rem; } .slider-1 .testimonial-image { display: inline-block; width: 70px; margin-bottom: 0.875rem; border-radius: 50%; } .slider-1 .testimonial-author { margin-bottom: 0.125rem; color: #222222; font-weight: 700; font-size: 1.125rem; } /*================================================== #################### Cards ######################### ===================================================*/ .cards-2 { padding-top: 5rem; padding-bottom: 2.25em; } .cards-2 .h2-heading { margin-bottom: 3.75rem; text-align: center; } .cards-2 .h2-heading span { font-weight: 400; } .cards-2 .card { margin-bottom: 5rem; padding: 4rem 1rem; border: 1px solid #5e6576; border-radius: 20px; background-color: transparent; text-align: center; } .cards-2 .card-body { padding: 0; } .cards-2 .card-title { margin-bottom: 2rem; } .cards-2 .card-title .decoration-lines { width: 30px; margin-bottom: 0.25rem; } .cards-2 .card-title .decoration-lines.flipped { transform: scaleX(-1); } .cards-2 .card-title span { margin-right: 0.75rem; margin-left: 0.75rem; color: #222222; font-weight: 700; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.2px; } .cards-2 .card-body .list-unstyled { margin-bottom: 3rem; } .cards-2 .card-body .list-unstyled li { margin-bottom: 0.625rem; } .cards-2 .card-body .price { margin-bottom: 3rem; color: #222222; font-weight: 700; font-size: 3rem; line-height: 2rem; letter-spacing: -0.2px; } /*================================================== #################### Footer ######################## ===================================================*/ .footer { position: relative; padding-top: 5rem; padding-bottom: 0; text-align: center; border-bottom: 3px solid #6D0000; } .footer div[class*="col"] { /* selects all elements which have classes starting with col */ /* needed so that the absolute positioned decoration stays behind */ position: relative; } .footer h4 { margin-bottom: 2rem; } .footer .fa-stack { width: 2em; margin-bottom: 1.25rem; margin-right: 0.375rem; font-size: 1.5rem; } .footer .fa-stack .fa-stack-1x { color: #ffffff; transition: all 0.2s ease; } .footer .fa-stack .fa-stack-2x { color: #ffffff; transition: all 0.2s ease; } .footer .fa-stack:hover .fa-stack-1x { color: #6D0000; } .footer .fa-stack:hover .fa-stack-2x { color: #222222; } .copyright { background-color:#021C2B; padding: 2rem 0 16rem; border-top: 7px solid #6E0000; text-align: center; color: #D1D1C7; } .copyright a { text-decoration: none; color:#D1D1C7 } .copyright .list-unstyled, .copyright .statement { opacity: 0.7; } .copyright .list-unstyled li { margin-bottom: 0.75rem; } /*================================================== #################### TOP ####################### ===================================================*/ #myBtn { position: fixed; z-index: 99; bottom: 20px; right: 20px; display: none; width: 52px; height: 52px; border: none; border-radius: 50%; outline: none; background-color: #44434a; cursor: pointer; } #myBtn:hover { background-color: #1d1d21; } #myBtn img { margin-bottom: 0.25rem; width: 18px; } /*================================================== #################### Queries ####################### ===================================================*/ .ex-header { padding-top: 12rem; padding-bottom: 5rem; } .ex-basic-1 .list-unstyled .fas { font-size: 0.375rem; line-height: 1.625rem; } .ex-basic-1 .list-unstyled .flex-grow-1 { margin-left: 0.5rem; } .ex-basic-1 .text-box { padding: 1.25rem 1.25rem 0.5rem 1.25rem; background-color: #f9f9f9; } .ex-cards-1 .card { border: none; background-color: transparent; } .ex-cards-1 .card .fa-stack { width: 2em; font-size: 1.125rem; } .ex-cards-1 .card .fa-stack-2x { color: #6168ff; } .ex-cards-1 .card .fa-stack-1x { width: 2em; color: #ffffff; font-weight: 700; line-height: 2.125rem; } .ex-cards-1 .card .list-unstyled .flex-grow-1 { margin-left: 2.25rem; } .ex-cards-1 .card .list-unstyled .flex-grow-1 h5 { margin-top: 0.125rem; margin-bottom: 0.5rem; } /*================================================== #################### Queries ####################### ===================================================*/ @media (max-width: 575.98px) { .navbar-brand { margin: 0 auto; } .navbar .logo-image img { width:200px; margin-left:30px; } .h1-large { font-size: 1.4rem; } .p-large { font-size: 1.125rem; } } @media (min-width: 576px) { .navbar-brand { margin: 0 auto; } } @media (min-width: 768px) { .header { padding-top: 9rem; } .counter .counter-container { text-align: left; } .counter .counter-cell { display: inline-block; margin-right: 3rem; vertical-align: top; } .form-1 .list-unstyled li { display: inline-block; margin-right: 1rem; } .ex-basic-1 .text-box { padding: 1.75rem 2rem 0.875rem 2rem; } } @media (min-width: 992px) { .h2-heading { width: 35.25rem; margin-right: auto; margin-left: auto; } .p-heading { width: 46rem; margin-right: auto; margin-left: auto; } .navbar { padding-top: 1.75rem; box-shadow: none; transition: all 0.2s; background-image: url("../img/billie-holiday.png"); } .navbar.extra-page { padding-top: 0.5rem; } .navbar.top-nav-collapse { padding-top: 0.5rem; padding-bottom: 0.5rem; background-image: url("../img/billie-holiday.png"); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.05); } .offcanvas-collapse { position: static; top: auto; bottom: auto; left: auto; width: auto; padding-right: 0; padding-left: 0; overflow-y: visible; visibility: visible; } .offcanvas-collapse.open { -webkit-transform: none; transform: none; } .navbar .navbar-nav { margin-top: 0; margin-bottom: 0; } .navbar .nav-item .nav-link { padding-right: 0.75rem; padding-left: 0.75rem; } .navbar .dropdown-menu { padding-top: 0.75rem; padding-bottom: 0.75rem; box-shadow: 0 3px 3px 1px rgba(0, 0, 0, 0.08); } .navbar .dropdown-divider { width: 90%; } .navbar .nav-item .btn-solid-sm { margin-top: 0; margin-left: 1rem; } .header { padding-top: 13rem; text-align: left; } .header .text-container { margin-bottom: 0; } .header .btn-solid-lg { margin-right: 1.5rem; margin-bottom: 0; } .header .btn-solid-lg, .header .quote { display: inline-block; } .cards-1 .card { display: inline-block; width: 298px; vertical-align: top; } .cards-1 .card:nth-of-type(3n+2) { margin-right: 1rem; margin-left: 1rem; } .basic-1 .image-container { margin-bottom: 0; } .basic-1 .text-container { margin-top: 1.25rem; } .basic-1 h2 { width: 23rem; } /* Details Modal */ /* Stops body and navbar shift on modal open */ body.modal-open { overflow-y: scroll !important; padding-right: 0 !important; } body.modal-open .navbar { padding-right: 0 !important; } .modal { padding-right: 0 !important; } .modal-dialog { margin-top: 120px; margin-right: auto; margin-left: auto; } .modal-content .image-container { margin-bottom: 0; } .counter .text-container { margin-bottom: 0; } .counter .counter-cell { display: inline-block; vertical-align: top; } .filter .button { margin-right: 0.25rem; margin-left: 0.25rem; } .filter .grid { max-width: 750px; } .filter .element-item { display: inline-block; width: 351px; margin-right: 0.625rem; margin-left: 0.625rem; vertical-align: top; } .slider-1 .swiper-container { width: 92%; } .slider-1 .swiper-button-prev { left: -16px; width: 22px; background-size: 22px 34px; } .slider-1 .swiper-button-next { right: -16px; width: 22px; background-size: 22px 34px; } .slider-1 .details { display: flex; align-items: flex-start; } .slider-1 .text { flex-direction: column; } .slider-1 .testimonial-author { margin-top: 0.625rem; } .slider-1 .testimonial-image { margin-right: 1.125rem; } .cards-2 .card { display: inline-block; width: 298px; vertical-align: top; } .cards-2 .card:nth-of-type(3n+2) { margin-right: 1rem; margin-left: 1rem; } .basic-2 .text-container { padding: 8rem; } .footer h4 { width: 46rem; margin-right: auto; margin-left: auto; } .copyright { text-align: left; } .copyright .list-unstyled li { display: inline-block; margin-right: 1rem; } .copyright .statement { text-align: right; } .ex-cards-1 .card { display: inline-block; width: 296px; vertical-align: top; } .ex-cards-1 .card:nth-of-type(3n+2) { margin-right: 1rem; margin-left: 1rem; } } @media (min-width: 1200px) { .container { max-width: 1140px; } .header { overflow: hidden; } .header .image-container { position: relative; } .header .image-container img { position: absolute; top: 0px; left: 0px; width: 100%; max-width: none; } .cards-1 .card { width: 342px; } .cards-1 .card:nth-of-type(3n+2) { margin-right: 2.5rem; margin-left: 2.5rem; } .basic-1 .image-container { margin-right: 3.5rem; } .basic-1 .text-container { margin-top: 5rem; margin-left: 2.75rem; } .modal-content { padding-right: 2rem; padding-left: 2rem; } .counter { overflow: hidden; padding-top: 9rem; } .counter .image-container { position: relative; } .counter .image-container img { position: absolute; top: -60px; left: 30px; width: 900px; max-width: none; } .filter .grid { max-width: 1120px; } .slider-1 .swiper-button-prev { left: -24px; } .slider-1 .swiper-button-next { right: -24px; } .cards-2 .card { width: 342px; } .cards-2 .card:nth-of-type(3n+2) { margin-right: 2.5rem; margin-left: 2.5rem; } .basic-2 .text-container { padding: 8rem 12rem; } .form-1 form { width: 860px; margin-right: auto; margin-left: auto; } .footer .decoration-circles { left: 0; } .ex-cards-1 .card { width: 336px; } .ex-cards-1 .card:nth-of-type(3n+2) { margin-right: 2.875rem; margin-left: 2.875rem; } }