:root {
  --clrYouRed: rgb(254, 0, 26);
  --clrYouGreen: #0b7c63;
  --clrYouGold: rgb(145, 104, 2)
}

* {
  box-sizing: border-box;
  font-family: sans-serif
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0;
  padding: 0;
}

main {
  display: block
}

section {
  display: flex;
  column-gap: .5em;
  row-gap: .5em;
  flex-wrap: wrap;
  margin-left: 0 auto;
  text-align: center;
  justify-content: space-around
}

footer {
  padding-top: .5em;
  color: white;
  background-color: var(--clrYouGold)
}

h1 {
  font-size: 2em;
  margin: .67em 0
}

a {
  color: inherit;
  text-decoration: none
}

b,
strong {
  font-weight: bolder
}

small {
  font-size: 80%
}

img {
  border-style: none
}

button {
  text-align: center;
  cursor: pointer;
  border: none
}

button:hover {
  filter: contrast(200%);
  color: yellow
}

button,
input,
optgroup,
select,
textarea {
  font-size: 100%;
  line-height: 1.15;
  margin: 0
}

button,
input {
  overflow: visible
}

button,
select {
  text-transform: none
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  appearance: button
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0
}

[hidden] {
  display: none
}

.footerDiv {
  height: 50px;
  line-height: 50px;
  width: 33.33%;
  float: left;
  background-color: inherit;
  padding: 3px 0 3px 10px
}

.footerTxt {
  line-height: 2em
}

.floatLeft {
  float: left !important
}

.clearFix {
  clear: both !important
}

.mt0 {
  margin-top: 0 !important
}

.mt05 {
  margin-top: .5 !important
}

.m0 {
  margin: 0 !important
}

.mr1 {
  margin-right: 1em !important
}

.mr2 {
  margin-right: 2em !important
}

.mt05 {
  margin-top: .5em !important
}

.mt1 {
  margin-top: 1em !important
}

.mt2 {
  margin-top: 2em !important
}

.mb05 {
  margin-bottom: .5em !important
}

.txtWhite {
  color: white !important
}

.txtGreen {
  color: var(--clrYouGreen) !important
}

.fs1-2 {
  font-size: 1.2em !important
}

.fs1-5 {
  font-size: 1.5em !important
}

.txtCenter {
  text-align: center !important
}

.Phrase1 {
  font-size: 3.5em;
  margin: .5em 4em .1em 4em;
  text-align: center
}

.btnSmall {
  color: white;
  font-size: 1.5px;
  letter-spacing: 1px;
  font-weight: 500;
  padding: .25em 2em;
  background-color: var(--clrYouGreen) !important
}

.icon {
  height: 34px;
  width: auto;
  margin: 3px .5em 3px 0
}

.card {
  border: 3px solid var(--clrYouGreen);
  width: 49.5%;
  max-width: 49.5%;
  background-color: var(--clrYouGreen);
  text-align: center;
  color: white
}

.cardHeader {
  font-size: 1.5em
}

.cardFooter {
  font-size: 1.2em
}

.card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9
}

#mainHeader {
  width: 100%;
  z-index: 9;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 80px
}

#logoTop {
  text-align: right;
  margin-right: 2em
}

#whatsTop {
  font-size: 2.5em;
  color: #128C7E;
  padding-top: 20px;
  font-weight: 500;
  letter-spacing: 1px
}

#img01 {
  animation-name: fromLeft;
  animation-duration: 1s
}

#img02 {
  animation-name: fromRight;
  animation-duration: 1s;
}

#btnCalc {
  font-weight: bold;
  color: white;
  background-color: var(--clrYouGold);
  font-size: 2.5em;
  letter-spacing: 3px;
  padding: .25em 1em;
}

#partner {
  color: white;
  text-align: center;
  margin-top: 1em;
  padding-bottom: 1em
}

#partner p {
  font-size: 1.5em;
  margin: 0 .5em .5em .5em;
  border-bottom: 1px solid darkgoldenrod
}

#partner img {
  height: 80px !important;
  width: auto;
  padding: 5px;
  margin: .5em 4em;
  border-radius: 5px;
  background-color: white
}

#Modum {
  border-top: 1px solid darkgoldenrod;
  padding-top: .5em;
  margin: 0 .5em;
  display: table;
  width: 100%;
  text-align: center
}

#Modum div {
  vertical-align: middle;
  display: table-cell
}

#Modum img {
  background-color: black;
  margin: 0 .5em;
  height: 24px
}

@media (max-width:1509px) {
  .Phrase1 {
    margin: .5em 1em
  }
}

@media (max-width:1400px) {
  #partner img {
    margin: .5em 2.75em
  }

  .Phrase1 {
    font-size: 3em
  }
}

@media (max-width:1200px) {
  #partner img {
    margin: .5em 2em
  }

  .cardHeader {
    font-size: 1.35em
  }

  .cardFooter {
    font-size: 1.15em
  }
}

@media (max-width:1080px) {
  #partner img {
    margin: .5em 1.5em
  }

  .footerDiv {
    width: 50%
  }

  .Phrase1 {
    font-size: 2.75em
  }

  .cardHeader {
    font-size: 1.2em
  }

  .cardFooter {
    font-size: 1.105em
  }
}

@media (max-width:1024px) {
  #partner img {
    margin: .5em 1em
  }

  .Phrase1 {
    font-size: 2.7em
  }

  .cardHeader {
    font-size: 1.15em
  }

  .cardFooter {
    font-size: 1em
  }
}

@media (max-width:960px) {
  #partner img {
    margin: .5em .4em
  }

  .footerDiv {
    width: 100%
  }

  .Phrase1 {
    font-size: 2.65em
  }

  .cardHeader {
    font-size: 1.1em
  }
}

@media (max-width:896px) {
  #partner img {
    margin: .5em 2.5em
  }

  .Phrase1 {
    font-size: 2.55em;
    margin: .25em .15em
  }

  .cardHeader {
    font-size: 1.05em
  }

  .cardFooter {
    font-size: .95em
  }
}

@media (max-width:797px) {
  #partner img {
    margin: .5em 1.25em
  }

  .Phrase1 {
    font-size: 2.35em;
    margin: .2em 0
  }

  .card {
    width: 100%;
    max-width: 100%
  }

  .cardHeader {
    font-size: 1.5em
  }

  .cardFooter {
    font-size: 1.2em
  }

  #btnCalc {
    padding: .25em .5em
  }
}

@media (max-width:713px) {
  #partner img {
    margin: .5em .25em
  }

  .Phrase1 {
    font-size: 2.05em
  }

  #btnCalc {
    padding: .25em .5em;
    font-size: 2.05em
  }

  #mainHeader {
    grid-template-columns: 19fr 20fr;
    grid-template-rows: 75px
  }

  #whatsTop {
    font-size: 2.2em
  }
}

@media (max-width:641px) {
  #partner img {
    margin: .1em .05em
  }
}

@media (max-width:624px) {
  .Phrase1 {
    font-size: 2em
  }

  #btnCalc {
    padding: .25em;
    font-size: 2.0
  }

  #mainHeader {
    grid-template-columns: 19fr 20fr;
    grid-template-rows: 70px
  }

  #whatsTop {
    font-size: 2em;
    padding-top: 15px
  }
}

@media (max-width:607px) {
  .Phrase1 {
    font-size: 1.9em
  }

  #btnCalc {
    font-size: 1.9em
  }
}

@media (max-width:576px) {
  .Phrase1 {
    font-size: 1.75em
  }

  #btnCalc {
    font-size: 1.75em
  }

  #whatsTop {
    font-size: 1.8em
  }
}

@media (max-width:530px) {
  footer {
    font-size: 15px
  }

  #mainHeader {
    grid-template-columns: 17fr 20fr;
    grid-template-rows: 60px
  }

  #whatsTop {
    font-size: 1.4em
  }

  .Phrase1 {
    font-size: 1.65em
  }

  #whatsTop {
    font-size: 1.7em
  }

  .cardHeader {
    font-size: 1.25em
  }

  .cardFooter {
    font-size: 1em
  }

  #btnCalc {
    font-size: 1.65em
  }
}

@media (max-width:450px) {
  #partner img {
    margin: .5em
  }

  footer {
    font-size: 14.5px
  }

  .Phrase1 {
    font-size: 1.4em
  }

  #btnCalc {
    font-size: 1.4em
  }

  .cardHeader {
    font-size: 1.2em
  }
}

@media (max-width:430px) {
  footer {
    font-size: 14px
  }

  .footerDiv h1 {
    font-size: 1.8em
  }

  .Phrase1 {
    font-size: 1.25em
  }

  #btnCalc {
    font-size: 1.2em
  }

  #whatsTop {
    font-size: 1.25em
  }

  .cardHeader {
    font-size: 1.1em
  }

  .cardFooter {
    font-size: .9em
  }
}

@media (max-width:388px) {
  footer {
    font-size: 13.5px
  }

  .footerDiv h1 {
    font-size: 1.6em
  }

  #whatsTop {
    font-size: 1.2em
  }

  .cardHeader {
    font-size: 1em
  }

  .cardFooter {
    font-size: .85em
  }
}

@media (max-width:320px) {
  #partner img {
    margin: .5em .1em
  }

  #mailTxt {
    font-size: 1.2em !important
  }

  #mainHeader {
    grid-template-columns: 15fr 20fr;
    grid-template-rows: 50px
  }

  #whatsTop {
    font-size: 1em
  }

  .cardHeader {
    font-size: .85em
  }

  .cardFooter {
    font-size: .65em
  }

  #btnCalc {
    font-size: 1.1em
  }
}

@keyframes toHeight {
  from {
    height: 0
  }

  to {
    height: 100%
  }
}

@keyframes fromLeft {
  from {
    transform: translateX(-100%);
    height: 0
  }

  to {
    transform: translateX(0);
    height: 100%
  }
}

@keyframes fromRight {
  from {
    transform: translateX(200%);
    height: 0
  }

  to {
    transform: translateX(0);
    height: 100%
  }
}