@charset "UTF-8";
/* CSS Document */
body {background: #fff;font-family: 'Open Sans', sans-serif; color: #222;}
h1, h2, h3, h4, .nav-link {font-family: 'Mulish', sans-serif; font-weight:500;}
h1 {font-size: 36px; line-height: 39px; padding: 20px 0}
h3 {font-size: 18px}
img {max-width: 100%;}
.container {max-width: 1100px;}
.btn {text-decoration: none;}
.pl-4 {padding-left: 25px!important;}
.pr-4 {padding-right: 25px!important;}
.navbar-brand {margin:0 auto;}

#header {background:#fff; width: 100%; top: 0; left: 0; padding: 10px 0 15px; position: relative; z-index: 5;}
#header .logo img {width: 280px;}
.banner {padding: 0; position: relative; color: #C4C4C4;}
.banner-container {padding:20px 0 150px; position:relative;z-index:3;}
.banner:before {content: ''; display: block; position: absolute; z-index: 2;width: 100%; height: 100%; left: 0;bottom: 0;background: rgba(255,255,255,.4);}
.banner h1 {padding-bottom:0;}
.banner h3 {padding-bottom:15px;}
.banner h1, .banner h3 {color:#000;}
.nav-item {padding-left: 30px}
.nav-item a {color: #222;}
.nav-item .btn-sm {background: linear-gradient(-132deg,#d5a1fe,#7b8bf2); border-radius: 23px; color: #fff!important;}

.form {max-width: 600px;margin: 10px auto 40px;padding: 15px 30px 20px; position: relative;background: #f5f5f5; z-index:4;border:none;}
.form h1 {margin-bottom:25px;}
.tool-message {width:100%; margin:25px auto 10px; padding:6px 18px; background:#eee; border-radius:6px; color:#666; font-size:13px; border:solid 1px #ddd; opacity:0.7;}
.tool-message h4 {padding:0; margin:0 0 0px; color:#666; font-size:14px;}
.form-wrap {max-width:750px; margin:0 auto;}
.form-wrap h2 {font-size:21px; line-height:40px; margin-bottom:15px;}
.progress-quest {background:#ebf6e2; justify-content: flex-start; align-items: center; position: absolute; padding: 0; display: flex; height: 12px;width: 100%; top: 0px; left:0; margin: 0 auto; }
.progress-value {box-shadow: 0 10px 40px -10px #0f385a;  border-radius: 0;  background: #46900a;  height: 12px;  position:absolute; transition: all 1s ease; width:0;}
.progress-value.progress-10 { width:10%;}
.progress-value.progress-20 { width:20%;}
.progress-value.progress-30 { width:30%;}
.progress-value.progress-40 { width:40%;}
.progress-value.progress-50 { width:50%}
.progress-value.progress-60 { width:60%}
.progress-value.progress-70 { width:70%}
.progress-value.progress-80 { width:80%}
.progress-value.progress-90 { width:90%}

.lds-roller {
  /* change color here */
  color: #e01010
}
.lds-roller,
.lds-roller div,
.lds-roller div:after {
  box-sizing: border-box;
}
.lds-roller {
  display: block; margin: 0 auto;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 40px 40px;
}
.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 7.2px;
  height: 7.2px;
  border-radius: 50%;
  background: currentColor;
  margin: -3.6px 0 0 -3.6px;
}
.lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
  top: 62.62742px;
  left: 62.62742px;
}
.lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
  top: 67.71281px;
  left: 56px;
}
.lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
  top: 70.90963px;
  left: 48.28221px;
}
.lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
  top: 72px;
  left: 40px;
}
.lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
  top: 70.90963px;
  left: 31.71779px;
}
.lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
  top: 67.71281px;
  left: 24px;
}
.lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
  top: 62.62742px;
  left: 17.37258px;
}
.lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
  top: 56px;
  left: 12.28719px;
}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.plans {margin: -150px auto 60px;padding: 0px 5px; position: relative;z-index:4; max-width:900px; }
.terms {margin: -120px auto 60px;padding: 0px 5px; position: relative;z-index:4; max-width:700px; }
.plan {background: #fff; box-shadow:0 0 12px rgba(0,0,0,.2); position:relative; margin:35px 0 50px;display:flex;border-radius:8px;}

.feature-title {background:#9fc2ee; padding:6px 12px; color:#0c2f59; font-size:15px; border-top-left-radius: 8px; width:100%;}
.plan .plan-title {background: #4b6cb7;  background: -webkit-linear-gradient(to right, #182848, #4b6cb7); background: linear-gradient(to right, #182848, #4b6cb7);color:#fff; width:41%; border-top-left-radius: 8px; border-bottom-left-radius: 8px;  position:relative;}
.plan .plan-title .plan-excerpt {font-size:13px; padding:30px 20px 0px;}
.plan .plan-title .plan-name {font-family: 'Mulish', sans-serif; font-weight:500; font-size:24px; padding:5px 20px;}
.plan .plan-description {padding:20px 25px 15px; width:59%;border:solid 4px #9fc2ee; border-left:none;border-top-right-radius: 8px; border-bottom-right-radius: 8px;}
.plan .plan-description h3 {padding:0 10px;}
.plan .graybox {background:#f1f1f1; padding:10px 10px; text-align:center; height: 100%; align-items: center; justify-content: center; flex-direction: column; display: flex;}
.plan .graybox p {font-size:14px; color:#333; margin:0;line-height:16px;}
.plan .graybox .price {font-size:26px; color:#0d4cab; font-family: 'Mulish', sans-serif; font-weight:500;line-height:32px;}
.plan .graybox .discount {font-size:12px; text-decoration:line-through; color:#ef233c; line-height:10px;}
.plan .feature {margin:0 0 5px; padding:0 10px; display:flex; justify-content: space-between;}
.plan .feature h3 {font-size:13px; display:flex; margin:0; font-weight:400;}
.plan .feature svg {fill:green; display:flex; width:10px; height:10px;}
.plan .plan-footer {padding:5px; background: #abbaab; background: -webkit-linear-gradient(to bottom, #eff4f6, #abbaab); background: linear-gradient(to bottom, #eff4f6, #abbaab); position:absolute; bottom:0; left:0; width:100%;border-bottom-left-radius: 8px;}
.plan .seal-bronze, .plan .seal-silver, .plan .seal-gold, .plan .seal-platinum, .plan .seal-catastrophic {padding:4px 8px; display:flex; align-items:center; vertical-align:middle;}
.plan .seal-bronze img, .plan .seal-silver img, .plan .seal-gold img, .plan .seal-platinum img, .plan .seal-catastrophic img {width:18px; height:auto; display:inline-block; margin-right:0px;vertical-align:middle;}
.plan .seal-bronze .text-seal, .plan .seal-silver .text-seal, .plan .seal-gold .text-seal, .plan .seal-platinum .text-seal, .plan .seal-catastrophic .text-seal {vertical-align:middle;}
.plan .seal-bronze .rating, .plan .seal-silver .rating, .plan .seal-gold .rating, .plan .seal-platinum .rating, .plan .seal-catastrophic .rating  {display:flex; align-items:center; margin-left:6px;}

.plan .seal-silver svg.on {color:rgb(220,220,220);}
.plan .seal-bronze svg.on {color:rgb(116,86,28);}
.plan .seal-gold svg.on {color:#ddbc24;}
.plan .seal-platinum svg.on {color:#556e97;}
.plan .seal-catastrophic svg.on {color:#de189f;}
.plan .seal-bronze {color:#984a0a;}
.plan .seal-silver {color:#6e6e6e;}
.plan .seal-gold {color:#c49904;}
.plan .seal-platinum {color:#62718b;}
.plan .seal-catastrophic {color:#c63899;}

.plan .btn-order {margin-top:10px; font-size:16px; padding:6px 15px; color:#fff; background: #00c6ff;  background: -webkit-linear-gradient(to bottom, #0072ff, #00c6ff); background: linear-gradient(to bottom, #0072ff, #00c6ff); border:none; width:100%;}

.plan.plan-b .feature-title {position:absolute; border-top-right-radius: 8px; width:auto; top:-35px;}
.plan.plan-b .plan-title {border-top-left-radius: 0; border-top:solid 4px #9fc2ee; width:50%; padding-bottom:30px;}
.plan.plan-b .plan-description {width:50%;}
.plan-b .price-wrap {padding:10px 20px;}
.plan.plan-b .plan-excerpt {padding-top:10px;}
.plan.plan-b .plan-name {line-height:26px;}

.block-700 {max-width:700px; margin:0 auto;} 
.btn-styl {font-family: 'Mulish', sans-serif; font-weight: 600; background: linear-gradient(-132deg,#46900a,#2e5e07); border-radius: 3px; color: #fff!important; text-decoration: none; display: inline-block; padding: 8px 26px; cursor: pointer;transform-origin: bottom;animation-duration: 2s; animation-iteration-count:infinite; font-size: 18px; box-shadow: none; border:none;}
.btn-styl:hover {}
.back-btn {font-size: 14px; color: #888; margin-right: 5px; border-radius: 3px; padding: 8px 26px; font-family: 'Mulish', sans-serif; font-weight: 600; text-decoration: none; background: #E5E5E5; height: 43px; display: inline-block; vertical-align: top; line-height: 27px; transform-origin: bottom;animation-duration: 2s; animation-iteration-count:infinite; box-shadow: none;border:none;}
.btn-styl:hover {box-shadow: 0 0 12px rgba(0,0,0,.4);}
.back-btn:hover {box-shadow: 0 0 12px rgba(0,0,0,.2); color: #444;}
.off-quest {transform:scale(0); opacity: 0; display: none}
.bounce-4 {
        animation-name: bounce-4;
        animation-timing-function: ease;
    }
    @keyframes bounce-4 {
        0%   { transform: scale(1,1)    translateY(0); }
        10%  { transform: scale(1.02,.98) translateY(0); }
        30%  { transform: scale(.98,1.02) translateY(-5px); }
        50%  { transform: scale(1,1)    translateY(0); }
        100% { transform: scale(1,1)    translateY(0); }
    }
.form-check label {font-size: 12px; }
.iti {width:100%;}
.form-icome img {width: 350px;}
.form-group {padding-bottom:10px;}
.form-group label {font-size: 15px; color: #262626; font-weight:bold;display:block; padding: 5px 0;}
.label-checkgroup {display:block;}

.option {
    margin: 0 1% 12px;
    display: inline-block;
    height: 45px;
    border: solid 2px #262626;
    background: #fff;
    width: 47.5%;
    border-radius: 22px;
    text-align: center;
    line-height: 41px;
    transition: ease 0.5s all;
    cursor: pointer;
}

.option:hover {
    box-shadow: 0 0 22px rgba(0, 0, 0, .1);
    background: #f2f2f2;
}

.option.active {
    border: 2px solid #262626;
    box-shadow: 0 0 16px rgba(0, 0, 0, .12);
    color: #fff;
    background: #262626
}

.check-2 input {-webkit-box-align: center; -ms-flex-align: center; -ms-flex-negative: 0; align-items: center; -webkit-appearance: none; appearance: none; background-color: #fff;  border: 2px solid #262626;  border-radius: 0;  cursor: pointer; display: inline-block; flex-shrink: 0; height: 32px; width:32px; justify-items: center; margin: 0; place-content: center; position: relative; line-height: 34px;}
.check-2 input[type=radio] {border-color:#262626;accent-color:#35CB74;display: inline-grid; border-radius: 100%}
.check-2 input[type=checkbox] {border-color:#262626;accent-color:#35CB74;display: inline-grid; border-radius: 4px; width:24px; height:24px;}
.check-2 input[type=radio]:checked:before {border-radius: 100%; box-shadow: inset 0 0 4em 1em #046791; content:''; height: 22px; opacity:1; width:22px;}
.check-2 input[type=checkbox]:checked:before {border-radius:2px; box-shadow: inset 0 0 4em 1em #046791; content:''; height: 14px; opacity:1; width:14px;}
.check-2 label {vertical-align: top; display: inline-block; line-height: 18px; padding-bottom: 12px; width: 90%}
label small {font-size: 13px; font-weight: normal}
.check-2 label.form-check-label {font-size: 12px; line-height: 14px; width:89%}

.plans-check {max-width:410px; margin:0 auto;}
.plans-check .check-2 input {width:20px; height:20px; vertical-align:middle;}
.plans-check .check-2 input[type=radio]:checked:before {width:10px; height:10px; box-shadow: inset 0 0 4em 1em #46900a;}
.plans-check .check-2 label {font-weight:normal; line-height:12px; padding-bottom:10px;}
.check-2 input[type=checkbox]  {width:20px; height:20px; vertical-align:middle;}
.check-2 input[type=checkbox]:checked:before {width:10px; height:10px; box-shadow: inset 0 0 4em 1em #46900a;}

.form-control {border:2px solid #262626; border-radius: 2px; width: 100%}
.rounded-lg {border-radius:8px;} 
.h-20.overflow-y-auto {max-height:75px; overflow-y:auto;}
.check-container {
  display: inline-block!important;
  position: relative;
  padding: 0 30px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

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

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.check-container:hover input ~ .checkmark {
  background: #ccc;
}

/* When the radio button is checked, add a blue background */
.check-container input:checked ~ .checkmark {
  background: linear-gradient(-132deg,#d5a1fe,#7b8bf2);;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.check-container:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.check-container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.check-container .checkmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}   
input.form-control {height: 40px;}        

select.form-control {height:45px; background-image: linear-gradient(45deg, transparent 50%, gray 50%),
linear-gradient(135deg, gray 50%, transparent 50%),
linear-gradient(to right, #ccc, #ccc);
background-position: calc(100% - 15px) calc(1em + 3px),
calc(100% - 10px) calc(1em + 3px),
calc(100% - 2em) 0.6em;
background-size: 5px 5px,
5px 5px,
1px 1.5em;
background-repeat: no-repeat;}
.thanks {padding: 90px 0 120px; background: url("thanks.jpg") right bottom no-repeat; background-size: cover; text-align: center}
.thanks img {max-width: 200px;}
.signature-pad {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  font-size: 10px;
  width: 100%;
  height: 300px;
  max-width: 700px;
  max-height: 460px;
  border: 1px solid #e8e8e8;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset;
  border-radius: 4px;
  padding: 16px;
}

.signature-pad::before,
.signature-pad::after {
  position: absolute;
  z-index: -1;
  content: "";
  width: 40%;
  height: 10px;
  bottom: 10px;
  background: transparent;
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4);
}

.signature-pad::before {
  left: 20px;
  -webkit-transform: skew(-3deg) rotate(-3deg);
          transform: skew(-3deg) rotate(-3deg);
}

.signature-pad::after {
  right: 20px;
  -webkit-transform: skew(3deg) rotate(3deg);
          transform: skew(3deg) rotate(3deg);
}

.signature-pad--body {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  border: 1px solid #f4f4f4;
}

.signature-pad--body
canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
}

.signature-pad--footer {
  color: #C3C3C3;
  text-align: center;
  font-size: 1.2em;
  margin-top: 8px;
}

.signature-pad--actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 8px;
}

.iti__flag-container .iti__selected-flag {height:40px;}
input::-webkit-date-and-time-value {
    text-align: left!important;
}
.btn-red {background:#660c8b; color: #fff;}
.btn-red:hover {background:#a21c26; color: #fff;}
.content {padding:50px 55px; background:  #F3F3F3;}
.max-350 {max-width: 350px;}
.icons img {max-width: 200px;}
.bottom-section {padding:50px 55px;}

.no-list {list-style: none; padding: 0}
.no-list li {padding-bottom: 5px;}
.feature-list {list-style: none; padding: 0}
.feature-list li {padding: 20px 0}
.features {text-align: center;}
.features img {max-width: 100px; margin-bottom: 15px}
.features h3 {font-size: 20px;}
.feature {padding-top: 15%;}
.feature p {font-size: 18px; line-height: 28px;}

.small-bar {padding: 65px; color: #fff;}
.servicios {padding:120px 0 45px; color: #222;}

#footer {background:#0d0d0d; color:#666; padding:45px 0 25px 0; font-size: 14px; position: relative; margin-top: 0px;}

#footer img {max-width: 280px; margin-bottom: 10px;}
#footer .border-top {border-color:rgba(255,255,255,.1)!important }
#footer a {color: #fff; text-decoration: none;}
#footer .copy {font-size: 13px;}
#footer .menu {text-align: right;}

.row>* {padding-right: calc(var(--bs-gutter-x) * .2);
padding-left: calc(var(--bs-gutter-x) * .2);}

.overlay-thanks {width: 100%; height: 100%; position: fixed; z-index: 200; background: #fff; text-align: center; padding: 90px 50px 50px; } 
	  .lasd {margin:0 auto; width: 100%;font-size: 32px;max-width: 600px!important; font-weight: bold;}
	  
		.lds-facebook {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-facebook div {
  display: inline-block;
  position: absolute;
  left: 8px;
  width: 16px;
  background:  #A20508;
  animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.lds-facebook div:nth-child(1) {
  left: 8px;
  animation-delay: -0.24s;
}
.lds-facebook div:nth-child(2) {
  left: 32px;
  animation-delay: -0.12s;
}
.lds-facebook div:nth-child(3) {
  left: 56px;
  animation-delay: 0;
}
@keyframes lds-facebook {
  0% {
    top: 8px;
    height: 64px;
  }
  50%, 100% {
    top: 24px;
    height: 32px;
  }
}
.is-invalid {color:red; font-size:14px; font-weight:bold;}
.stp-qust {position:relative; padding:5px;}
.overlay-steps {position:fixed; display:none; width:100%; height:100%; padding:35vh 30px 0; background:rgba(255,255,255,.75); backdrop-filter: blur(12px);  -webkit-backdrop-filter: blur(12px);z-index:10;}
	  .overlay-steps .lasd {font-size:18px; font-weight:normal; text-align:center; padding:15px 0; margin-top: 20px; color:#222;}
	  .overlay-steps .lds-facebook {width: 50px; height: 50px;}
	  .overlay-steps .lds-facebook div {  left: 8px; width: 8px; background:#244ead;  animation: lds-facebook-steps 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;}
	  
	  .spinner::after {
  content: '';
  box-sizing: border-box;
  width: 60px;
  height: 60px;
  position: absolute;
  top: 30vh;
  left: calc(50% - 30px);
  border-radius: 50%;
}

.spinner.smooth::after {
  border-top: 4px solid rgba(26, 57, 172, 1.0);
  border-left: 4px solid rgba(26, 57, 172, 1.0);
  border-right: 4px solid rgba(26, 57, 172, 0.0);
  animation: spinner .6s linear infinite;
}


@keyframes spinner {
  to {transform: rotate(360deg);}
}

	  
	  
	  .overlay-steps .lds-facebook div:nth-child(1) {
  left: 8px;
  animation-delay: -0.24s;
}
.overlay-steps .lds-facebook div:nth-child(2) {
  left: 22px;
  animation-delay: -0.12s;
}
.overlay-steps .lds-facebook div:nth-child(3) {
  left: 36px;
  animation-delay: 0;
}

@keyframes lds-facebook-steps {
  0% {
    top: 4px;
    height: 32px;
  }
  50%, 100% {
    top: 12px;
    height: 16px;
  }
}
@media screen and (max-width: 991px) {
	.nav-link {text-align: right;}
	.nav-link.btn-sm {width:150px; text-align: center; margin-left: auto;}
}
@media screen and (max-width: 786px) {
    input[type="date"] {text-align:left!important;}
    .navbar-brand {margin:0 auto;}
	.banner .col-md-5>p {text-shadow: 0 0 12px rgba(0,0,0,.8);}
    h1 {font-size: 28px; line-height: 32px; padding: 20px 0 10px; text-align: center}
    h3 {font-size:16px; font-weight:normal; font-family: 'Open Sans'}
    h3.pb-2 {font-weight:bold;font-size:18px;}
	.banner p {text-align: center;}
	.couple-beach {padding: 35px 20px;}
	.stats-bar{background:#afafaf url("big-block.jpg") center bottom no-repeat; background-size:100% auto; padding-bottom: 120px;}
	.container {padding: 0 20px;}
	.banner .form-wrap form {margin: 0 auto;}
	#header .logo img {width: 220px;}
	.content {padding: 55px 0;}
	#footer {text-align: center}
	#footer .menu {text-align: center;}
	.banner .form {position: relative; top:0px; bottom:auto;}
	.servicios {padding:45px 0 45px;}
	.thanks {padding: 10px 0 420px;}
	.plan {display:block;}
	.plan .plan-description, .plan .plan-title, .plan.plan-b .plan-description, .plan.plan-b .plan-title {display:block; width:100%;}
	.plan .plan-footer {position:relative; border-radius:0;}
	.plan .plan-description {border-left:solid 4px #9fc2ee; border-top:none;border-top-right-radius: 0px; border-bottom-right-radius: 8px;border-bottom-left-radius: 8px;}
	.feature-title {border-top-right-radius: 8px;}
.plan .plan-title {border-top-right-radius: 8px; border-bottom-left-radius: 0px;}
.plan.plan-b .plan-title {padding-bottom:0;}
}
@media screen and (max-width: 520px) {
	.banner h1 {font-size:32px; line-height: 30px;}
	.option {width:47%;}
	.banner-container {padding-top:10px;}
}
@media screen and (max-width: 400px) {
	.option {width:100%; margin:0 0 10px;}
}
@media screen and (min-width:2000px) {
.banner:after {background:url("banner-footer.png") no-repeat bottom; background-size: 100% auto; height: 30% }
}

@media (min-aspect-ratio: 16/9) {
.banner .video-container iframe {
    /* height = 100 * (9 / 16) = 56.25 */
    height: 56.25vw;
  }
}
    
@media (max-aspect-ratio: 16/9) {
 .banner .video-container iframe {
    /* width = 100 / (9 / 16) = 177.777777 */
    width: 177.78vh;
  }
}