:root {
  --esdlightblue: rgb(86, 155, 190);
  --esddarkblue: #3B668D;
  --esdyellow: rgb(253, 185, 19);
}

.eng {
  display: none;
}

.esp {
  display: none;
}

a {
  text-decoration: none;
}

h1 {
  color: rgb(101, 101, 238);
}

p {
  color: black;
}

h3 {
  color: var(--esddarkblue);
}

table {
  margin: 50px;
  width: 75%;
  border-spacing: 40px;
}

.col {
  width: 33%;
  height: fit-content;
  float: left;
}

.d-grid {
  padding-left: 5%;
  padding-right: 5%;
}

.desktopBody {
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  background-color: white;


}



.mobileBody {
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  background-color: white;


}


.optionsBody {
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  background-color: white;
}

.optionsFolder {
  padding-left: 5%;
  padding-right: 5%;

}

.customHeader {
  padding: 25px;
  border-bottom: 1px solid var(--esdyellow);
  margin-bottom: 10px;
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;

}



.headerLeft {
  float: left;
}

.logo {
  width: 150%;
  height: auto;
}

.headerRight {
  float: right;
}

.headerCenter {
  text-align: center;
}

.headerText {
  color: #C24700;
  font-size: 22px;
}

.language {
  padding: 10px;
  border-radius: 8px;
  font-size: 16px;
  border-style: none;
  border-color: var(--esddarkblue);

}

.engButton {
  padding: 10px;
  border-radius: 8px;
  font-size: 16px;
  border-style: none;
  border-color: var(--esddarkblue);
  background-color: rgb(253, 185, 19);
}

.espButton {
  padding: 10px;
  border-radius: 8px;
  font-size: 16px;
  border-style: none;
  border-color: var(--esddarkblue);
  background-color: rgb(224, 224, 224);
}

#footerFrame {
  height: 20%;
  width: 100%;
}

.choice {
  border-style: solid;
  border-radius: 8px;
  border-width: 3px;
  border-color: var(--esddarkblue);
  background-color: white;
  width: 100%;
  height: 250px;

}

.choiceJob {
  border-style: solid;
  border-radius: 8px;
  border-width: 3px;
  border-color: var(--esddarkblue);
  padding: auto;
  margin: 2%;
  background-color: white;
  width: 80%;
  height: 50%;
  text-align: center;

}

.choiceJobImage {
  float: left;
  width: auto;
  height: 90px;
  padding-right: 5px;
  vertical-align: middle;
}

.choiceHeader {
  color: var(--esddarkblue);
  text-align: center;
  font-size: 32px;
  display: middle;
  padding-top: 10px;

}

.jobHeader {
  color: var(--esddarkblue);
  text-align: center;
  font-size: 32px;
  display: middle;
  padding-top: 23px;

}

.choiceText {
  color: var(--esddarkblue);
  text-align: left;
  padding-left: 20px;
  font-size: 20px;
}

.choiceImage {
  float: center;
  vertical-align: middle;
  width: 120px;
  height: auto;
  image-rendering: smooth;


}

.unemploymentText{
  color: var(--esddarkblue);
  text-align: center;
  padding-left: 20px;
  font-size: 20px;
}

.flavorText {
  font-size: 30px;
  color: var(--esddarkblue);
  float: center;
  text-align: center;
}

.tabImage {
  float: left;
  width: auto;
  height: 50px;
}

.outgoingImage{
  width: auto;
  vertical-align: text-top;
  height: 33px;
  padding-left: 10px;
  color: var(--esddarkblue);
}

.customFooter {
  float: center;
  margin-top: 5%;
  border-bottom: 1px solid var(--esdyellow);
  border-top: 1px solid var(--esdyellow);
  text-align: center;
  color: black;
  font-size: 16px;
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}


.tablinks {
  border-style: solid;
  vertical-align: center;
  border-bottom-style: none;
  font-size: 24px;
  font-style: bold;
  color: var(--esddarkblue);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-color: var(--esddarkblue);
  background-color: white;
  border-width: 3px;
  padding-bottom: 0px;
}

.mobileTablinks {
  border-style: solid;
  vertical-align: center;
  border-bottom-style: none;
  font-size: 24px;
  font-style: bold;
  color: var(--esddarkblue);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-color: var(--esddarkblue);
  background-color: white;
  border-width: 3px;
  padding-bottom: 0px;
  width: 100%;
  height: 100%;
}

#mobilehomeImage {
  float: center;
  width: 40%;
  height: auto;
  image-rendering: smooth;
}

#tabJob {
  width: 18%;
}

#tabHome {
  width: 10%;
}

.tab button.active {
  background-color: var(--esddarkblue);
  color: white;
}

.tabcontent {
  text-align: left;
  border-style: solid;

  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border-width: 3px;
  border-color: var(--esddarkblue);
  background-color: white;
  width: 100%;
  height: fit-content;
  float: center;

  font-size: 22px;

}

.tabHeader {
  font-size: 32px;
  text-align: left;
}

.contentImage {
  width: 100%;
  height: 100%;
  padding-left: 10px;

}

@media screen and (max-width: 1547px) {
  .tabImage {
    height: 40px;
  }
}

/*Web small window css options*/
@media screen and (max-width: 1475px) {
  .choiceHeader {
    font-size: 25px;
  }

  .jobHeader {
    font-size: 25px;
  }

  .choiceImage {
    width: 90px;
    height: auto;
  }

  .choice {
    height: 250px;
  }

  .tablinks {
    width: 13.9%;
  }
}
@media screen and (max-width: 1985px) {
.choiceImage {
    width: 100px;
    height: auto;
  }

}
@media screen and (max-width: 1773px) {
.choiceImage {
    width: 90px;
    height: auto;
  }

}

@media screen and (max-width: 1473px) {
  .tablinks {
    font-size: 22px;
  }
  .choiceImage {
    width: 90px;
    height: auto;
  }
}

@media screen and (max-width: 1383px) {
  .tabImage {
    height: 35px;
  }
}

@media screen and (max-width: 1335px) {
  .tabImage {
    height: 30px;
  }
}

@media screen and (max-width: 1287px) {
  .tabImage {
    height: 25px;
  }
    .choiceImage {
    width: 70px;
    height: auto;
  }
}

@media screen and (max-width: 1239px) {
  .tabImage {
    height: 20px;
  }
}

/*Web smaller window css options*/
@media screen and (max-width: 1250px) {
  .choice {
    height: 300px;
  }
}

/*Mobile css options*/
@media screen and (max-width: 1000px) {

  .d-grid {
    padding-left: 2.5%;
    padding-right: 2.5%;
  }

  #headerFrame {
    height: 13%;
    width: 100%;
  }

  .engButton {
    padding: 10px;
    width: 100%;
    height: auto;
    border-radius: 8px;
    font-size: 25px;
    border-style: none;
    border-color: var(--esddarkblue);
  }

  .espButton {
    padding: 10px;
    width: 100%;
    height: auto;
    border-radius: 8px;
    font-size: 25px;
    border-style: none;
    border-color: var(--esddarkblue);
  }

  .desktopBody {
    display: none;

  }

  .mobileBody {
    display: block;
  }

  .col {
    width: 100%;
  }

  .choiceHeader {
    font-size: 37px;
  }

  .headerText {
    color: #C24700;
    font-size: 30px;
  }

  .jobHeader {
    font-size: 32px;
  }

  .choiceImage {
    width: 70px;
    height: auto;
  }

  .choice {
    height: 100%;
  }
}


/*Desktop css options*/
@media screen and (min-width: 1000px) {

  #headerFrame {
    height: 25%;
    width: 100%;
  }

  .desktopBody {
    display: block;

  }

  .mobileBody {
    display: none;
  }

  .choiceHeader {
    font-size: 32px;
  }

  .jobHeader {
    font-size: 32px;
  }



  .choice {
    height: 250px;
  }

}

/*Tab css options from shrinking*/
@media screen and (min-width: 1476px) {
  .tabLinks {
    font-size: 24px;
    width: 14%;
  }
}

@media screen and (min-width: 1548px) {
  .tabImage {
    height: 50px;
  }
}