/*Estilos generales*/
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  text-decoration: none;
}

.layout-column {
  display: flex;
  flex-direction: column;
}

.layout-row {
  display: flex;
  flex-direction: row;
}

.width-50 {
  width: 50%;
}

.width-100 {
  width: 100%;
}

.text-big {
  color: #707e95;
  font-size: 23px;
  line-height: 30px;
  font-family: "Roboto", sans-serif;
}

.text-logo {
  font-family: "Rubik", sans-serif;
  font-size: 35px;
  color: #2b4ac7;
}

.text-grey {
  font-family: "Roboto", sans-serif;
  color: #707e95;
}
.text-blue {
  font-family: "Roboto", sans-serif;
  color: #2b4ac7;
}

.margin {
  padding: 40px 100px;
}

.padding-l20 {
  padding-left: 20px;
}

.padding-r20 {
  padding-right: 20px;
}

.margin-g {
  margin: 3%;
}

.margin-top {
  margin-top: 20px;
}

.margin-right {
  margin-right: 25px;
}

.title {
  font-family: "Roboto", sans-serif;
  color: #1f3e72;
  font-size: 40px;
  margin-bottom: 25px;
}

/*
nav bar
*/
#cabecero {
  display: flex;
  position: fixed;
  align-items: center;
  flex-direction: row;
  background-color: rgba(255, 255, 255, 0.9);
  height: 120px;
  z-index: 1;
}

.logo {
  flex-grow: 10;
  font-weight: bold;
  text-decoration: none;
}
#menu {
  height: 100%;
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  flex-grow: 2;
}

#menu > ul {
  display: flex;
  position: relative;
  flex-direction: row;
  flex-wrap: wrap;
  list-style: none;
  height: 100%;
  margin-right: 10px;
  align-content: center;
}


#menu a {
  padding: 20px;
  color: #707e95;
}

.button {
  font-family: "Roboto", sans-serif;
  background-color: #2b4ac7;
  border: 0;
  padding: 15px 25px;
  border-radius: 5px;
  font-size: 15px;
  color: #f1f5ff;
  transition-duration: .5s;
}

.button:hover {
  background-color: #f1f5ff;
  color: #2b4ac7;
}
/*body images*/

.home-image {
  height: 700px;
  width: 50%;
}

#text-home-image {
  position: absolute;
  top: 20%;
  left: 9%;
}

.icon-container {
  display: flex;
  margin-top: 20px;
  font-family: "Roboto", sans-serif;
  color: #1f3e72;
  align-items: center;
}

.icon-container-down {
  display: flex;
  align-items: center;
  padding-top: 95px;
}

.rectangle-box {
  padding: 15px;
  border-radius: 10px;
  display: flex;
  position: absolute;
  margin-top: 20px;
  background-color: rgba(255, 255, 255, 0.9);
  height: 130px;
  width: 900px;
  top: 100%;
}

table {
  display: flex;
  flex-direction: row;
  width: 81%;
}

th {
  display: inline-flex;
  padding: 20px 92px 17px 15px;
}
td {
  display: inline-flex;
  padding: 0px 84px 20px 57px;
  align-items: center;
}

.container-button {
  order: 2;
  width: 20%;
  margin-top: 12px;
}

.rectangle-button {
  font-family: "Roboto", sans-serif;
  background-color: #2b4ac7;
  border: 0;
  margin: 9% 0% 0% 9%;
  padding: 15px 40px;
  border-radius: 5px;
  color: #f1f5ff;
  transition-duration: .5s;

}

.rectangle-button:hover {
  color: #2b4ac7;
  background-color: #f1f5ff;
}

/*images vaccine*/

.container-vaccines {
  display: flex;
  justify-content: space-around;
}

.logo-vaccines {
  height: 100px;
  width: 300px;
  margin-right: 50px;
}

/*sección why should i vaccine*/

#box-container {
  display: flex;
  justify-content: space-between;
  padding-right: 5%;
}

.box {
  display: flex;
  flex-direction: column;
  padding: 2% 2%;
  height: 300px;
  width: 250px;
  border-radius: 10px;
  box-shadow: 12px 12px 16px 0 rgba(0, 0, 0, 0.25),
    -8px -8px 12px 0 rgba(255, 255, 255, 0.3);
  transition-duration: s;
}
.box:hover {
  box-shadow: 12px 12px 16px 0 rgba(255, 255, 255, 0.3) inset,
    -8px -8px 12px 2px rgba(0, 0, 0, 0.25) inset;
}
.title-box {
  margin: 5% 0 5% 0;
  color: #1f3e72;
  font-size: 20px;
  font-family: "Roboto", sans-serif;
}

.text-box {
  margin: 5% 0 5% 0;
  color: #707e95;
  font-size: 16px;
  font-family: "Roboto", sans-serif;
}

/*Preparations Before Vaccine*/

.requeriments-info {
  order: 2;
  margin-left: 50px;
}

#requerimets-img {
  order: 1;
  width: 50%;
}

.rectangle {
  border-radius: 10px;
  padding-left: 2%;
  display: flex;
  box-shadow: 2px 2px 5px rgb(31 62 114 / 22%);
  height: 60px;
  margin: 5%;
  width: 500px;
  align-items: center;
}
.rectangle-icon-title-mini {
  font-size: 15px;
  padding-left: 35px;
  flex-basis: 89%;
  font-family: "Roboto", sans-serif;
  color: #707e95;
}

#rectangle-info {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 500px;
  height: 125px;
  border-radius: 10px;
  margin: 5%;
  padding: 2% 0% 0% 2%;
  box-shadow: 2px 2px 5px rgb(31 62 114 / 22%);
}

.text-info-table {
  padding-right: 1%;
  margin: 1% 0% 1% 0%;
  margin-top: 1%;
  color: #707e95;
  font-size: 16px;
  font-family: "Roboto", sans-serif;
}

#selector-inv {
  transform: rotate(180deg);
}

/* sección Emergency contact*/

.botton-grid {
  display: flex;
  margin-top: 50%;
  margin-right: 20%;
  box-shadow: 2px 2px 5px rgb(31 62 114 / 22%);
  padding: 20px 20px 20px 20px;
  flex-direction: column;
  flex-wrap: wrap;
  border-radius: 10px;
  align-content: center;
}

.container-svg {
  display: flex;
  align-items: self-start;
  flex-direction: row;
  align-content: center;
  flex-wrap: wrap;
  height: 150px;
  width: 250px;
  justify-content: center;
}
.svg-text {
  padding-left: 2%;
}

.box-botton-large {
  font-family: "Roboto", sans-serif;
  background-color: #f1f5ff;
  border: 0;
  margin-top: 10px;
  padding: 15px 55px;
  border-radius: 5px;
  color: #2b4ac7;
  transition-duration: 0.5s;
}

.box-botton-large:hover {
  background-color: #2b4ac7;
  color: #f1f5ff;
}

.button-down {
  position: relative;
}

.box-contacts {
  width: 30%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.cont-text {
  flex-basis: 50%;
}

/*Footer*/

footer {
  background-color: #eef3ff;
  display: flex;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  flex-basis: 50%;
}

.footer-more-info {
  display: flex;
  flex-direction: column;
  flex-basis: 50%;
}

.footer-row {
  display: flex;
  flex-direction: row;
}

.box-1 {
  height: 50%;
}

.footer-brand-terms {
  display: flex;
  flex-direction: column;
  flex-basis: 50%;
}
.terms {
  display: flex;
  height: 50%;
  justify-content: flex-end;
  align-items: flex-end;
}

.footer-column {
  display: flex;
  flex-direction: column;
  flex-basis: 50%;
}