@font-face {
  font-family: "icomoon";
  src: url("../fonts/icomoon/icomoon.eot?srf3rx");
  src: url("../fonts/icomoon/icomoon.eot?srf3rx#iefix") format("embedded-opentype"), url("../fonts/icomoon/icomoon.ttf?srf3rx") format("truetype"), url("../fonts/icomoon/icomoon.woff?srf3rx") format("woff"), url("../fonts/icomoon/icomoon.svg?srf3rx#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}
/* =======================================================
*
* 	Template Style 
*	Edit this section
*
* ======================================================= */
html, body {
  width: 100vw;
  height: 100vh;
}

body {
  font-family: "Prata", serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.6;
  color: #adaeb4;
  background: #26272c;
  position: relative;
}

a {
  color: #00f;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
a:hover, a:active, a:focus {
  color: #00f;
  outline: none;
}

p {
  margin-bottom: 1.5em;
}

h1, h2, h3, h4, h5, h6 {
  color: #f2fafe;
  font-family: "Open Sans", Arial, sans-serif;
  font-weight: 400;
  margin: 0 0 30px 0;
}

::-webkit-selection {
  color: #f2fafe;
  background: #eb2288;
}

::-moz-selection {
  color: #f2fafe;
  background: #eb2288;
}

::selection {
  color: #f2fafe;
  background: #eb2288;
}

#lawPay-bar {
  display: block;
  margin-top: 8.5rem;
}
#lawPay-bar .law-pay-btn {
  width: 17rem;
  margin-bottom: 0;
}
#lawPay-bar .law-pay-invoice {
  float: left;
}
#lawPay-bar .law-pay-retainer {
  float: right;
}

#home {
  display: block;
  position: absolute;
  background: no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-color: transparent;
  background-size: cover;
  background-attachment: fixed;
  background-image: url("../images/law_books_bw_v001.jpg");
  width: 100vw;
  height: 100vh;
  color: #fff;
}
#home .overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(38, 39, 44, 0.5);
}

#grid-container {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 0.5fr 0.5fr 2fr 0.5fr 0.5fr;
  grid-template-rows: 0.25fr 3fr 0.15fr;
  grid-template-areas: "header header header header header" "logo reviews center roadmap payment" "footer footer footer footer footer";
  gap: 10px 5px;
}
#grid-container header {
  grid-area: header;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #00f;
}
#grid-container header h1 {
  color: #f2fafe;
  margin-bottom: 0;
}
#grid-container #column-1 {
  grid-area: logo;
  display: grid;
}
#grid-container #column-1 .payBill {
  width: 56%;
  place-self: start center;
  margin-top: 3rem;
}
#grid-container #column-1 .payBill a.law-pay-link {
  margin: 0;
}
#grid-container #column-1 .payBill img.law-pay-bill {
  display: block;
  width: 100%;
}
#grid-container #column-1 .logo {
  width: 56%;
  place-self: end center;
  margin: 0 0 3rem 0;
}
#grid-container #column-1 .logo img.SteinfeldLawLogo {
  background-color: #00f;
  padding: 1.25rem;
  border-radius: 0.5rem;
}
#grid-container #column-2 {
  grid-area: center;
  display: grid;
  /*place-self: center;
    width: 100%;
  height: 80vh;*/
}
#grid-container #column-2 h1 {
  font-family: "Open Sans", Arial, sans-serif;
  text-align: center;
  margin: 2rem 0 1rem 0;
}
#grid-container #column-2 h2 {
  font-family: "Open Sans", Arial, sans-serif;
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}
#grid-container #column-2 h2.returnToHome {
  margin-top: 0rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
}
#grid-container #column-2 h2 a {
  color: #f2fafe;
  text-decoration: none;
}
#grid-container #column-2 h2 a:hover {
  text-decoration: underline;
  color: #91989F;
}
#grid-container #column-2 .splide {
  width: 100%;
  height: 100%;
}
#grid-container #column-2 #splide01-track {
  height: 100%;
}
#grid-container #column-2 .splide__pagination {
  bottom: 0em;
}
#grid-container #column-2 #paymentTypes {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
}
#grid-container #column-2 #paymentTypes .payBill {
  width: 22vw;
}
#grid-container #column-2 #paymentTypes .payBill a.law-pay-link {
  margin: 0;
}
#grid-container #column-2 #paymentTypes .payBill img.law-pay-bill {
  display: block;
  width: 100%;
}
#grid-container #column-2 #paymentTypes .payDeposit {
  width: 33vw;
  margin-top: 6rem;
}
#grid-container #column-2 #paymentTypes .payDeposit a.law-pay-link {
  margin: 0;
}
#grid-container #column-2 #paymentTypes .payDeposit img.law-pay-bill {
  display: block;
  width: 100%;
}
#grid-container #column-2 #paymentTypes .paymentTypes {
  width: 70%;
  margin-top: 6rem;
}
#grid-container #column-2 #paymentTypes .paymentTypes img.law-pay-bill {
  display: block;
  width: 100%;
}
#grid-container #column-3 {
  grid-area: payment;
  display: grid;
}
#grid-container #column-3 .payDeposit {
  width: 56%;
  place-self: start center;
  margin-top: 3rem;
}
#grid-container #column-3 .payDeposit a.law-pay-link {
  margin: 0;
}
#grid-container #column-3 .payDeposit img.law-pay-bill {
  display: block;
  width: 100%;
}
#grid-container #column-3 .logo {
  width: 56%;
  place-self: end center;
  margin: 0 0 3rem 0;
}
#grid-container #column-3 .logo img.LawPayLogo {
  background-color: #00f;
  padding: 1.25rem;
  border-radius: 0.5rem;
}
#grid-container #column-3 .payment {
  width: 76%;
  place-self: end center;
  margin: 0 0 3rem 0;
}
#grid-container #column-3 .payment .paymentLink {
  width: 100%;
  display: block;
  background-color: #00f;
  padding: 1.25rem;
  border-radius: 0.5rem;
}
#grid-container #column-3 .payment .paymentLink:hover > h1 {
  text-decoration: underline;
}
#grid-container #column-3 .payment .paymentLink h1 {
  text-align: center;
  padding: 0;
  margin: 0;
}
#grid-container #column-4 {
  grid-area: reviews;
  display: grid;
}
#grid-container #column-4 .readReviews {
  width: 56%;
  place-self: end center;
  margin: 0 0 3rem 0;
}
#grid-container #column-4 .readReviews img.reviewsBtn {
  width: 125%;
  background-color: #00f;
  padding: 1.25rem;
  border-radius: 0.5rem;
}
#grid-container #column-5 {
  grid-area: roadmap;
  display: grid;
}
#grid-container #column-5 .LawsuitRoadmap {
  place-self: end center;
  margin: 0 0 3rem 0;
}
#grid-container #column-5 .LawsuitRoadmap a.noButton img {
  width: 100%;
}
#grid-container #column-5 .LawsuitRoadmap a.download {
  display: block;
  background-color: #00f;
  border-radius: 4px;
  color: rgb(255, 255, 255);
  padding: 0.75rem;
  width: 75%;
  margin-left: auto;
  margin-right: auto;
}
#grid-container footer {
  grid-area: footer;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #00f;
  height: 5rem;
}

header,
section,
footer {
  position: relative;
  z-index: 3;
}

#homePage-video {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
#homePage-video .video-wrapper {
  width: 100%;
  height: auto;
  padding: 45% 0 0 0;
  position: relative;
}

.call-to-action {
  display: flex;
  justify-content: center;
  margin-top: 5rem;
  margin-bottom: auto;
}
.call-to-action a {
  display: inline-block;
  font-family: "Open Sans", Arial, sans-serif;
  background-color: #00f;
  border-radius: 4px;
  color: rgb(255, 255, 255);
  padding: 1.5rem;
}

/*Lawsuit Roadmap elements*/
.LawsuitRoadmap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
  flex-direction: column;
  flex-shrink: 2;
  /*height: 90%;*/
}
.LawsuitRoadmap .Lawsuit_download {
  display: inline-block;
  width: 100%;
  max-width: 100%;
  height: auto;
  padding-top: 24px;
  padding-bottom: 14px;
}
.LawsuitRoadmap a.download {
  display: inline-block;
  place-self: end center;
  font-family: "Open Sans", Arial, sans-serif;
  text-align: center;
  background-color: #00f;
  border-radius: 4px;
  color: rgb(255, 255, 255);
  padding: 1.5rem;
  width: 100%;
}
.LawsuitRoadmap a.noButton {
  width: 75%;
  background-color: transparent;
  border-radius: 0;
  color: #f2fafe;
  padding: 0;
  text-decoration: underline;
}

footer {
  color: #F2FAFE;
}
footer #siteseal {
  z-index: 41;
}
footer .contact-footer {
  font-family: "Open Sans", Arial, sans-serif;
  text-align: center;
}
footer .contact-footer a {
  color: #F2FAFE;
}

/* .section-heading {
	float: left;
	width: 100%;
	padding-bottom: 50px;
	margin-bottom: 0px;
	clear: both;
	h2 {
		margin: 0 0 0 0;
		font-size: 26px;
		font-weight: 400;
		color: $brand-white;
		position: relative;
		display: block;
		padding-bottom: 10px;
		line-height: 1.5;
		@media screen and (max-width: $screen-sm) {
			font-size: 28px;
		}
	}
	h3 {
		font-size: 16px;
		font-weight: 400;
		line-height: 1.8;
		color: lighten($brand-bg-color, 20%);
		position: relative;
		display: block;
		padding-bottom: 30px;
		font-family: $font-secondary;
		&:after {
			content: "";
			position: absolute;
			display: block;
			width: 50px;
			height: 2px;
			background: $brand-primary;
			left: 50%;
			margin-left: -25px;
			bottom: 0;
		}

		@media screen and (max-width: $screen-sm) {
			font-size: 16px!important;
			line-height: 28px;
		}
	}
} */
/*.btn {
	@include transition(.3s);
	font-family: $font-primary!important;
}*/
/*.btn {
	text-transform: uppercase;
	letter-spacing: 2px;
	@include transition(.3s);
	&.btn-primary {
		background: $brand-primary;
		color: $brand-white;
		border: none!important;
		border: 2px solid transparent!important;
		&:hover, &:active, &:focus {
			box-shadow: none;
			background: $brand-primary;
		}
	}
	&:hover, &:active, &:focus {
		background: #393e46!important;
		color: $brand-white;
		outline: none!important;
	}
	&.btn-default {
		&:hover, &:focus, &:active {
			border-color: transparent;
		}
	}
}*/
/*#logoWrapper {
	position: relative;
	bottom: 19.2vh;
	width: 100%;//13.5rem;
	height: 9vh;
	z-index: 100;

	#SteinfeldLawLogo {
		width: 12rem;
		float: left;
		border-radius: 3px;
		background-color: rgba(0, 0, 255, 1);
		padding: 1rem;
		margin: 0 0 0 4rem;
	}

	#LPLogo {
		width: 12rem;
		float: right;
		border-radius: 3px;
		background-color: rgba(0, 0, 255, 1);
		padding: 1rem;
		margin: 0 4rem 0 0;
	}
}*/
/* 16px @ 375px increasing to 40px and 46px @ 1440px */
@media (min-width: 375px) {
  #grid-container header h1 {
    font-size: calc(1rem + 8 * (100vw - 375px) / 1065);
    /* Note: The calc base value (1rem) MUST be stated in REM to maintain accessibility */
    /* Where: calc = min_font_size_in_rem + (max_font_size - min_font_size) * ((100vw - min_viewport_including_px_unit) / (max_viewport - min_viewport)) */
    /* Safari resize fix */
    min-height: 0vw;
  }

  #grid-container #column-2 h1 {
    font-size: calc(1rem + 32 * (100vw - 375px) / 1065);
    min-height: 0vw;
  }

  #grid-container #column-2 h2 {
    font-size: calc(0.75rem + 15 * (100vw - 375px) / 1065);
    min-height: 0vw;
  }

  #grid-container #column-2 .LawsuitRoadmap .download {
    font-size: calc(1rem + 5 * (100vw - 375px) / 1254);
    min-height: 0vw;
  }

  #grid-container #column-3 .payment .paymentLink h1 {
    font-size: calc(1rem + 20 * (100vw - 375px) / 1065);
    min-height: 0vw;
  }

  .call-to-action a {
    font-size: calc(1rem + 14 * (100vw - 375px) / 1065);
    min-height: 0vw;
  }

  footer .contact-footer {
    font-size: calc(0.75rem + 10 * (100vw - 375px) / 1065);
    min-height: 0vw;
  }
}
/*Styling for hover preview cards*/
.card {
  background: #eee;
  width: 15rem;
  height: 16rem;
  display: none;
  font-size: 1rem;
  color: black;
  position: absolute;
  z-index: 100;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.35);
}

.link-with-preview {
  position: relative;
}

.card img {
  width: 15rem;
}

.card-title {
  font-size: 1.25rem;
  margin-bottom: 0.5em;
  color: #00f;
}

.card-title,
.card-text {
  padding: 12px;
  font-family: "Open Sans", Arial, sans-serif;
}

@media (max-width: 600px) {
  :root {
    font-size: 10px;
  }

  h1 {
    font-size: 4rem;
  }
}
/* Prevent scaling beyond this breakpoint */
@media (min-width: 1440px) {
  #grid-container header h1 {
    font-size: 24px;
  }

  #grid-container #column-2 h1 {
    font-size: 48px;
  }

  #grid-container #column-2 h2 {
    font-size: 27px;
  }

  #grid-container #column-3 .payment .paymentLink h1 {
    font-size: 2.7rem;
  }

  .call-to-action a {
    font-size: 30px;
  }

  footer .contact-footer {
    font-size: 22px;
  }
}
@media (min-width: 1629px) {
  #grid-container #column-2 .LawsuitRoadmap .download {
    font-size: 11px;
  }
}
/*@media (max-width: 1359px) {
	#grid-container {
		grid-template-rows: 1fr 13fr 1fr;
	}
}*/
/*footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 9vh;
	z-index: 99;
	background-color: $brand-primary;
	padding-top: 1.75vh;
	color: $brand-white;
	font-family: $font-primary;
	text-align: center;

	a {
		color: $brand-white;

		&:hover {
			color: $brand-white;
		}
	}

	.container {
		display: block;
	}

	.text-muted {
		display: block;
		color: $brand-white;
		font-size: 2rem;
		padding-top: 0.75rem;
	}
}*/
/*Mange the smaller screen height for wider screens*/
@media (max-height: 760px) {
  #homePage-video .video-wrapper {
    width: 100%;
    height: auto;
    margin-top: -2rem;
  }

  #column-2 .call-to-action .download.flyoutContact {
    padding: 0.75rem;
    margin-top: -2.75rem;
  }

  .LawsuitRoadmap a.noButton img {
    width: 75%;
  }
  .LawsuitRoadmap a.noButton .Lawsuit_download {
    padding-top: 8px;
    padding-bottom: 7px;
  }
  .LawsuitRoadmap a.download {
    display: none;
  }
}
@media (max-width: 923px) {
  #home {
    height: auto;
  }

  #grid-container {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 0.35fr auto auto auto 0.35fr;
    grid-template-areas: "header" "center" "roadmap" "reviews" "payment" "logo" "footer";
    gap: 10px 0px;
  }
  #grid-container #column-1 .logo {
    width: 25%;
    margin-left: -0.75rem;
  }
  #grid-container #column-1 .logo img.SteinfeldLawLogo {
    width: 100%;
  }
  #grid-container #column-2 #homePage-video .video-wrapper {
    width: 60%;
    height: auto;
    margin-top: -2rem;
  }
  #grid-container #column-3 .payment {
    width: auto;
    /*margin-top: -.5rem;*/
  }
  #grid-container #column-4 .readReviews {
    width: 25%;
    margin-right: -0.75rem;
  }
  #grid-container #column-4 .readReviews img.reviewsBtn {
    width: 100%;
  }
  #grid-container #column-5 .LawsuitRoadmap a.noButton {
    width: 50%;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2025-1-31 14:52:8
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
/**
 * ----------------------------------------
 * animation scale-in-center
 * ----------------------------------------
 */
@-webkit-keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2025-1-31 14:57:12
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
/**
 * ----------------------------------------
 * animation shake-horizontal
 * ----------------------------------------
 */
@-webkit-keyframes shake-horizontal {
  0%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  10%, 30%, 50%, 70% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  20%, 40%, 60% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
  80% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }
  90% {
    -webkit-transform: translateX(-8px);
    transform: translateX(-8px);
  }
}
@keyframes shake-horizontal {
  0%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  10%, 30%, 50%, 70% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  20%, 40%, 60% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
  80% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }
  90% {
    -webkit-transform: translateX(-8px);
    transform: translateX(-8px);
  }
}
.scale-in-center {
  -webkit-animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 750ms 1 both;
  animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 750ms 1 both;
}

.shake-horizontal {
  -webkit-animation: shake-horizontal 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955) 2250ms 1 both;
  animation: shake-horizontal 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955) 2250ms 1 both;
}

.scale-in-center-and-shake-horizontal {
  -webkit-animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.5s 1 both;
  animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.5s 1 both;
  -webkit-animation: shake-horizontal 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955) 2.5s 1 both;
  animation: shake-horizontal 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955) 2.5s 1 both;
}

/*# sourceMappingURL=style.css.map */