/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
}

html, body {
     margin:0;
     padding:0;
     width:100%;
     height:100%;
     box-sizing: border-box;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */

  body { width: 100%; }

  .wrapper {width:100%;}
  .container {width: 1140px; display:block; margin: 0 auto; padding: 0;}
  h1 {font-family: 'nilland-blackregular'; font-size: 45px; height:50px;color: rgb(182,32,37); text-align: left; margin:0;padding:20px 0 30px 0;clear:both;}
  h1 img {position:relative; width:220px; height:50px; margin:0; padding:0; top:-5px;}
  h2 {font-family: 'nillandbold'; font-size: 24px; color: rgb(182,32,37); text-align: left; margin:0 0 10px 0; padding:0; line-height: 110%;}
  h3 {font-family: 'nillandbold'; font-size: 38px; color: rgb(182,32,37); text-align: center; margin:0; padding:0; margin-top:50px;}
  p.copy {font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif; font-weight: 300; font-size: 18px; color: black; text-align: left; margin:0; padding:0;}
  p.vantage_copy {font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif; font-weight: 400; font-size: 18px; color: white; text-align: center; margin:0; padding:0;}

  .col_3 {position: relative; float:right; width: 250px; margin-left: 46px; /* height: 230px; */}
  .col_6 {position: relative; width: 550px; height: 300px;}
  .col_4 {position: relative; float: right; margin-left:42px; width: 350px;}
  .col_2 {position: relative; float: right; margin-left:46px; width: 150px; height:150px; margin-top: 46px; /* border:1px solid black; */}
  .last_col {margin-left:0;}

	#header {height: 100px; width:100%; top:0; z-index:100; background-color: white; border-bottom: 2px solid black;
		-moz-box-shadow:		0px 3px 10px #333333;
	  -webkit-box-shadow: 0px 3px 10px #333333;
	  box-shadow:         0px 3px 10px #333333;
	}
	#header_content {height:100px; font-family: 'nilland-blackregular'; font-size: 23px; color: rgb(182,32,37);}
	#df_logo {width: 351px; height: 100px; cursor: pointer;}
	#phone_label {font-family: 'nillandbold'; font-size: 22px;}
	#header_txt {position:relative; float:right; text-align: right; margin-top: 20px;}
	#header_content ul {position: relative; font-size: 23px; list-style: none; margin-top: 10px;}
	#header_content li {position:relative; float:left; zoom: 1; text-align: center; margin-left: 20px; cursor:pointer;margin-top: -2px;}

	#top_section {height: 500px; background-color: black; background-image: url('../img/top_section4.jpg'); background-repeat: no-repeat; background-position: center center;}
	#tagline {float:left; width:420px; margin: 90px 0 0 65px; font-family: 'nilland-blackregular'; font-size: 46px; color: white; text-shadow: 1px 1px 1px black; text-align: left;}
	#tagline p {margin:0; padding:0; line-height: 125%;}
	#intro_video {width: 474px; height: 400px; float:right; margin: 50px 65px 0 0; border: 1px solid white;
		-moz-box-shadow:		5px 5px 10px black;
	  -webkit-box-shadow: 5px 5px 10px black;
	  box-shadow:         5px 5px 10px black;
	}

	#markets_section {/* height: 350px; */ height: 200px; background-color: white;}
	#intro_text {width:100%; color: rgb(182,32,37); font-family: 'nilland-blackregular'; font-size: 29px; text-align: center;}
	#intro_text p {position:relative; top:25px;}

	#vantages_section {height: 2520px; background-color: black;}
	.vantage_left {float: left; margin-bottom:20px;}
	.vantage_right {float:right; margin-bottom:20px;}
	.vantage_text_block {margin-bottom:0;}
	.vantage_border {border:1px solid #4C4C4C; color:white;}
	.divider {position:relative; width: 100%; height:1px; margin:20px auto; margin-top:20px; clear: both; border-bottom: 1px dashed #4C4C4C;}

	#service_section {height: 550px;
	background-image: url(data:image/png;base64,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);
	 text-shadow: 1px 1px 1px black; background-color: #585858;}
	#service_section h1 {/* margin-top:0;padding-top: 20px; */ color:white;}
	#service_section h2 {color: white;} 
	#service_section p {color:white;}
	.service_img {width: 350px; height: 200px; margin: 0 auto; margin-bottom:5px; border: 1px solid black;}
	#service_statement {position:relative; width: 100%; top: 40px; text-align: center; clear:both; color:white;}
	#service_statement img {position:relative; top:-3px;}

	#photo_section {height: 470px; background-color: white;}
	#photos_left {float:left; width: 550px; padding-right: 20px; padding-bottom: 40px;/* border-right: 1px dashed black; */}
	#photos_right {float:right; width: 550px;}
	#photo_section h1 {margin-bottom:-50px;}
	#gallery_wrapper {width: 100%; margin:0 auto; margin-top:50px; text-align: center; padding-left:12px;}
	#photo_section a {width: 144px; height: 144px; display:inline-block; margin-right:25px; margin-bottom:35px; outline:none;}
	#photo_section img {width: 144px; height: 144px; display:inline-block; border: 4px double #BEBEBE;
	-moz-box-shadow:		0px 3px 5px #ccc;
  -webkit-box-shadow: 0px 3px 5px #ccc;
  box-shadow:         0px 3px 5px #ccc;}
  #cboxTitle {color:black!important;}
	
	#customer_section {height: 240px; 
		background-image: url(data:image/png;base64,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);
		background-color: #727272;}
	#customer_section h1 {margin-top:0;padding-top: 20px; color: white; text-shadow: 1px 1px 1px black;}
	.customer_logos {float:right; margin-left: 20px; width: 200px; height:80px; border: 1px solid black;}
	.rightest_logo {margin-right: 26px;}
	
	#contact_section {/* height: 470px; */ height: 410px; background-color: black;}
	#contact_section h1 {/* margin-top:0;padding-top: 20px; */}
	#contact_container {float:left; /* width: 450px; height: 200px; border: 1px solid red; */}
	#contact_container p {font-family: 'nilland-blackregular'; font-size: 24px; color: white; margin:0; padding:0; margin-bottom:10px;}
	#contact_container a {text-decoration: none; color:white;}
	.contact_label {display:inline-block; font-family: 'nillandbold'; width: 85px;}
	#contact_newsletter {float:right; width: 550px; height: 120px; color: white; border: 1px solid white;}
	#business_hours_temp {float:right; width: 550px; height: 120px; color: white;font-family: 'nilland-blackregular'; font-size: 24px; text-align: center;}
	#business_hours {position: relative; font-family: 'nilland-blackregular'; font-size: 20px; color: white; width: 620px; margin: 0 auto; clear: both; top: 35px; text-align: center;}
	#leaf {width: 63px; height: 65px; margin: 0 auto; margin-top: 20px;}
	#copyright {font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", sans-serif; font-weight: 600; font-size: 13px;}
	#credit {font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", sans-serif; font-weight: 600; font-size: 13px; color: #999999; /* margin-top:5px; */}
	#credit a {color: #999999;}
	
	#device_test {display:none;}


/* ==========================================================================
  Measuring Form
========================================================================== */

#measuring-button-link {
  text-decoration: none;
}

#measuring-button {
  height: 40px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 16px;
  margin-top: -4px;
  padding-left: 15px;
  padding-right: 15px;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.padding-h-15 {
  padding-left: 15px;
  padding-right: 15px;
}

.desktop-only {
  display: block;
}

.mobile-only {
  display: none;
}

button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 17px;
  padding-bottom: 19px;
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
  color: #fff;
  border-radius: 4px;
  background-color: #c3161c;
  border: solid 1px #c3161c;
  transition: 0.3s;
  cursor: pointer;
}

button:hover {
  background-color: #b0171c;
  border: solid 1px #b0171c;
}

button:focus {
  outline: none;
}

.button-link {
  text-decoration: none;
}

.medium-container {
  width: 860px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

#measuring-form {
  font-family: 'Noto Sans', sans-serif;
  overflow-x: hidden;
  font-weight: 400;
}

#measuring-form  * {
  box-sizing: border-box;
}

#measuring-form a {
  color: #389ae4;
}

.offwhite-bg {
  background-color: #fdfdfd;
  padding-bottom: 80px;
  height: 100%;
}

#measuring-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 43px;
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}

#measuring-header-contact {
  font-size: 18px;
  color: #929292;
  text-align: right;
}

a#measuring-email,
a#measuring-phone {
  color: #929292;
  text-decoration: none;
}

a#measuring-email-footer,
a#measuring-phone-footer {
  color: #929292;
}

.footer {
  color: #9b9b9b;
  text-align: center;
}

.measuring-contact-item.phone {
  margin-bottom: 10px;
}

.instagram-logo {
  width: 20px;
}

.full-width-red-banner {
  width: 100%;
  background-color: #c3161c;
  margin-top: 56px;
  height: 65px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.full-width-red-banner h1 {
  font-size: 26px;
  color: #fff;
  letter-spacing: 1.8px;
  font-weight: 900;
  height: auto;
  padding-top: 0;
  padding-bottom: 0;
}

.stepper {
  padding-top: 80px;
  margin-bottom: 70px;
  display: flex;
}

.stepper-step {
  flex: 1;
  margin-left: 2px;
  margin-right: 2px;
  text-align: center;
  padding-bottom: 19px;
  border-bottom: 4px solid #d8d8d8;
  transition: 0.3s;
}

.stepper-step.active {
  border-bottom: 4px solid #c3161c;
}

/* Form styles */

#form,
.white-container  {
  width: 1000px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 4px;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  padding: 40px 68px 60px 68px;
  background-color: #fff;
}

.white-container {
  margin-top: 40px;
}

.tab {
  display: none;
}

.form-header {
  font-family: 'Noto Sans', sans-serif;
  font-size: 24px;
  font-weight: bold;
  line-height: normal;
  margin-top: 0;
  margin-bottom: 30px;
  color: #c3161c;
  text-align: left;
}

#form p,
.white-container p {
  font-size: 16px;
  color: #000;
  margin-bottom: 40px;
}

.sub-para-text {
  font-size: 16px;
  color: #9b9b9b;
  width: 100%;
  display: block;
}

input,
select {
  width: 100%;
  height: 60px;
  padding: 20px 25px;
  color: #000;
  margin-top: 10px;
  margin-bottom: 40px;
  transition: 0.3s;
  border-radius: 4px;
  border: solid 1px #cccccc;
  background-color: #fff;
  font-size: 16px;
}

input::placeholder {
  color: #cccccc;
}

input:focus {
  outline: none;
  border: solid 1px #000;
}

input:active {
  border: solid 1px #000;
}

input.invalid {
  border: solid 1px #c3161c;
}

label {
  display: block;
  width: 100%;
  font-size: 16px;
  font-weight: 400;
  color: #333333;
}

.form-cols {
  display: flex;
  margin: 0 -15px;
}

.form-cols label {
  margin-left: 15px;
  margin-right: 15px;
}

/* Custom checkbox */

.checkbox-container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-top: 40px;
  margin-bottom: 20px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: -1px;
  left: 0;
  height: 24px;
  width: 24px;
  background-color: #eaeaea;
  border-radius: 4.8px;
}

.checkbox-container input:checked ~ .checkmark {
  background-color: #c3161c;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkbox-container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkbox-container .checkmark:after {
  left: 8px;
  top: 4px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* Rectangle selections */

#cab-styles,
#side-cutouts {
  margin-bottom: 30px;
}

#cab-styles .form-cols,
#side-cutouts .form-cols {
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
}

.cab-style-selection {
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 215px;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 30px;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  transition: 0.3s;
   cursor: pointer;
}

.side-cutouts-selection {
  display: flex;
  flex-direction: column;
  width: 345px;
  height: 371px;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 30px;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  transition: 0.3s;
  cursor: pointer;
}

.cab-style-selection.active,
.side-cutouts-selection.active {
  border: 1px solid #c3161c;
}

.cab-style-selection img {
  width: 147px;
  height: 134px;
  object-fit: none;
  object-position: bottom;
}

.side-cutouts-selection img {
  width: 235px;
  height: 223px;
}

.checkbox-container.cab-style,
.checkbox-container.side-cutouts {
  width: auto;
  margin-top: 18px;
  padding-left: 21px;
}

.checkbox-container.side-cutouts {
  margin-top: 48px;
}

/* Yes/No Checkboxes */

.checkbox-container.yes-no {
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  padding: 20px 17px 20px 63px;
  width: 120px;
  margin-top: 0;
}

.checkbox-container.yes-no.active {
  border: 1px solid #c3161c;
}

.yes-no .checkmark {
  top: 18px;
  left: 17px;
}

.yes-no-container {
  display: flex;
  width: 274px;
  justify-content: space-between;
  margin-bottom: 60px;
}

/* Measurements */

.cab-selection-measurement {
  width: 60%;
  padding-right: 30px;
  margin-bottom: 40px;
  padding-left: 15px;
}

.cab-selection-measurement-fields {
  padding-right: 15px;
}

.cab-selection-style-image-container {
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  width: 100%;
  margin-top: 8px;
  text-align: center;
  padding: 30px;
}

.cab-selection-style-image-container img {
  max-width: 100%;
  width: auto;
}

#mark-wall-letter {
  margin-bottom: 0;
}

.hint-text {
  font-size: 14px;
  color: #9b9b9b;
  margin-top: 8px;
  padding-left: 24px;
  display: block;
}

.step-3-text {
  color: #9b9b9b;
}

.extra-cutouts-needed-container {
  background-color: #f0f0f0;
  width: calc(100% + 136px);
  margin-left: -68px;
  margin-right: -68px;
  padding: 54px 68px;
  display: flex;
  align-items: center;
}

.extra-cutouts-text h3 {
  font-family: 'Noto Sans', sans-serif;
  font-size: 16px;
  font-weight: bold;
  font-style: italic;
  color: #000;
  margin-bottom: 8px;
  margin-top: 0;
  text-align: left;
}

.extra-cutouts-button {
  width: 100%;
  height: 60px;
  background-color: #fff;
  border: 1px solid #000;
  color: #000;
  margin-left: 40px;
}

.extra-cutouts-button:hover {
  border: 1px solid #000;
  color: #000;
  background: #f8f8f8;
}

.delete-cutout-button {
  width: 100%;
  height: 60px;
  background-color: #fff;
  border: 1px solid #c3161c;
  color: #c3161c;
  margin-left: 15px;
  margin-bottom: 40px;
}

.delete-cutout-button:hover {
  background-color: #fff;
  color: #b0171c;
  border: 1px solid #b0171c; 
}

/* Hide billing-name, honeypot to throw off bots */
#billing-name {
  position: absolute;
  top: -1000px;
}

#error-text {
  display: none;
  width: 100%;
  font-size: 16px;
  font-weight: 400;
  color: #c3161c;
}

.form-buttons {
  margin-left: auto;
  margin-top: 20px;
  display: flex;
  width: fit-content;
}

.form-buttons button {
  width: 200px;
}

.back-button {
  margin-right: 56px;
  background-color: #fff;
  color: #c3161c;
}

.back-button:hover {
  background-color: #fff;
  color: #b0171c;
  border: 1px solid #b0171c;
}

/* Modal */

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 300px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.3); /* Black w/ opacity */
}

.modal-content {
  background-color: #fff;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1), 0 0 24px 0 rgba(0, 0, 0, 0.18);
  margin: auto;
  padding: 40px 68px;
  width: 65%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
  max-width: 616px;
  border-radius: 4px;
}

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  margin-top: -30px;
  margin-right: -40px;
}

.modal-buttons {
  display: flex;
  margin-top: 50px;
}

.modal-buttons button {
  width: 100%;
}

.new-form-button {
  width: 261px;
  margin-top: 20px;
  margin-left: auto;
}


	
/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (max-width: 1100px) {
  #form,
  .white-container  {
    width: calc(100% - 80px);
    margin-left: 40px;
    margin-right: 40px;
    padding: 40px 40px 60px 40px;
  }

  .extra-cutouts-needed-container {
    width: calc(100% + 80px);
    margin-left: -40px;
    margin-right: -40px;
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media only screen and (max-width: 992px) {
  .side-cutouts-selection {
    width: 290px;
  }
}


@media only screen and (max-width: 767px) {
  .desktop-only {
    display: none;
   }

   .mobile-only {
    display: block;
   }

   #measuring-header {
    justify-content: center;
   }

   .full-width-red-banner {
    height: 98px;
   }

   .full-width-red-banner h1 {
    font-size: 24px;
    width: 350px;
    text-align: center;
   }

   #form,
   .white-container {
    width: 100%;
    padding: 0px 20px 60px 20px;
    margin-left: 0;
    margin-right: 0;
    box-shadow: none;
    background: #fdfdfd;
   }

   .form-cols {
    flex-direction: column;
    margin: 0;
    align-items: center;
   }

   .form-cols label {
    margin-left: 0;
    margin-right: 0;
   }

   .form-buttons {
      flex-direction: column-reverse;
      margin-right: auto;
      width: 100%;
   }

   .form-buttons button {
    width: 100%;
    margin-right:0;
    margin-bottom:16px;
   }

   .side-cutouts-selection {
    max-width: 100%;
    width: auto;
    height: auto;
    padding-bottom: 40px;
    padding-top: 40px;
   }

   .side-cutouts-selection img {
    max-width: 100%;
    width: auto;
    object-fit: contain;
    padding-left: 30px;
    padding-right: 30px;
   }

   .cab-selection-measurement {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
   }

   .extra-cutouts-needed-container {
    padding-left: 20px;
    padding-right: 20px;
    margin-left: -20px;
    margin-right: -20px;
    width: calc(100% + 40px);
    flex-direction: column;
   }

   .extra-cutouts-button {
    margin-left: 0;
   }

   .modal-content {
    padding: 40px;
    width: 80%;
   }

   .close {
    margin-right: -20px;
   }

   .modal-buttons {
    flex-direction: column-reverse;
   }

   #delete-cutout {
    margin-bottom: 20px;
   }

   .new-form-button {
    width: 100%;
   }
}

@media only screen and (min-device-width : 1224px) {

	#header {position:fixed; }
	#top_section {margin-top:100px;}
	#device_test {display:inline;}
}

@media only screen and (min-width: 35em) {

}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}