@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("../fonts/fa-solid-900.eot");
  src: url("../fonts/fa-solid-900.eot?#iefix") format("embedded-opentype"),
    url("../fonts/fa-solid-900.woff2") format("woff2"),
    url("../fonts/fa-solid-900.woff") format("woff"),
    url("../fonts/fa-solid-900.ttf") format("truetype"),
    url("../fonts/fa-solid-900.svg#fontawesome") format("svg");
}
body {
  padding: 0px;
  margin: 0px;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  font-size: 1.2em;
}
h1,
h2,
h3,
h4,
h4 {
  text-align: center;
  color: #d9e2f3;
  text-shadow: 1px 1px 2px rgb(105, 105, 105);
}
i {
  font-family: "icon";
}
h1 {
  font-size: 3em;
  margin: 0.3em 0px;
}
h2 {
  font-size: 2em;
  margin: 0px 0px 0.3em 0px;
}
h3 {
  font-size: 2em;
  margin: 0px 0px 0.2em 0px;
}
h4 {
  font-size: 1.5em;
  margin: 0px 0px 0.2em 0px;
}
button {
  cursor: pointer;
  border: transparent;
  background-color: transparent;
  font-size: 1.1em;
}
button:disabled {
  cursor: not-allowed;
}
input {
  min-height: 2em;
}
.prove {
  width: 100px;
  height: 100px;
  background-color: aqua;
  border: solid 1px #000;
}
.dis-n {
  display: none;
}
.dis-b {
  display: block;
}
.col-y {
  color: #d0ff01;
}
.col-w {
  color: white;
  fill: white;
}
.col-r {
  fill: red;
  color: rgb(196, 18, 18);
}
.col-o {
  fill: rgb(255, 153, 0);
  color: rgb(255, 153, 0);
}
.col-g {
  fill: #00f267;
  color: #00f267;
}
.col-g button {
  fill: #8ceb28;
  color: #8ceb28;
}
.col-r button {
  fill: red;
  color: red;
}
.col-gy {
  fill: gray;
  color: gray;
}
.col-b {
  color: #35c5cf;
}
.col-bd {
  color: #222f40;
}
.col-v {
  color: #be296c;
  fill: #be296c;
}
/*anchos*/
.hei-10v {
  height: 10vh;
}
.widHei-40p {
  width: 40px;
  height: 40px;
}
.wid-10w{
  width: 19vw;
}
.wid-100,
.wid-100-800-50 {
  width: 100%;
}
.wid-100v,
.wid-100v-800-50 {
  width: 99vw;
}
.wid-329-800 {
  width: 329px;
}
.wid-90 {
  width: 90%;
}
.wid-80,.wid-80-800 {
  width: 80%;
}
.wid-70,
.wid-70-800 {
  width: 70%;
}
.wid-60,
.wid-60-800 {
  width: 60%;
}
.wid-60w,
.wid-60w-800 {
  width: 60vw;
}
.wid-50,
.wid-50-800 {
  width: 50%;
}
.wid-55,
.wid-55-800 {
  width: 55%;
}
.wid-40 {
  width: 40%;
}
.wid-30 {
  width: 30%;
}
.wid-20 {
  width: 20%;
}
.wid-20p {
  width: 20px;
}
.wid-10 {
  width: 10%;
}
/*margin*/
.mar-y {
  margin: 1em 0px;
}
.mar-y-2 {
  margin: 2em 0px;
}
.mar-y-3 {
  margin: 3em 0px;
}
.mar-a {
  margin: auto;
}
.mar-0 {
  margin: 0px;
}
/*displays*/
*[class*="dis-g"] {
  display: grid;
}

.dis-ib,.dis-ib .ib {
  display: inline-block;
}
.dis-f,
.dis-f-800 {
  display: flex;
}
.dis-g-a{
  grid-template-columns: auto auto;
  column-gap: 2%;
}
.dis-g-20-60-20{
  grid-template-columns: 20% 60% 20%;
}

.dis-g-13{
  grid-template-columns: repeat(13, 7.5%);
}
.dis-g-a-15 {
  grid-template-columns: auto 15%;
}
.dis-g-6,.dis-g-6-800 {
  grid-template-columns: auto auto auto auto auto auto;
}
.dis-g-7,.dis-g-7-800 {
  grid-template-columns: repeat(7, 13%);
}
.dis-g-3-33-800 {
  grid-template-columns: 33% 33% 33%;
  column-gap: 1%;
}
.dis-g-3,
.dis-g-3-800 {
  grid-template-columns: 33% 33% 33%;
}
.dis-g-4,
.dis-g-4-800 {
  grid-template-columns: auto auto auto auto;
  row-gap: 0.1em;
  column-gap: 0.1em;
}
.dis-g-5,
.dis-g-5-800 {
  grid-template-columns: repeat(5,auto);
  row-gap: 0.58em;
  column-gap: 0.58em;
}
.dis-g-8,
.dis-g-8-800 {
  grid-template-columns: auto auto auto auto auto auto auto auto;
  row-gap: 0.1em;
  column-gap: 0.1em;
}
.dis-g-3-30 {
  grid-template-columns: auto 60% auto;
  column-gap: 1%;
}
.dis-g-20-a-20-800 {
  grid-template-columns: 20% auto 20%;
  column-gap: 1%;
}
.dis-g-70-a-800 {
  grid-template-columns: 70% auto;
  column-gap: 1%;
}
.dis-g-2-a,
.dis-g-2-a-800 {
  grid-template-columns: auto auto;
  column-gap: 2%;
}
.dis-g-2-30,
.dis-g-2-30-800 {
  grid-template-columns: 30% 30%;
  column-gap: 2%;
}
.dis-g-2,
.dis-g-2-800 {
  grid-template-columns: 49.5% 49.5%;
  column-gap: 1%;
}
.dis-g-2-80-800 {
  grid-template-columns: 80% auto;
  column-gap: 1%;
}
.dis-g-3-10-80-10 {
  grid-template-columns: 9% 59% 29%;
  column-gap: 1%;
}
.dis-g-3-a,
.dis-g-3-a-800 {
  grid-template-columns: auto auto auto;
  column-gap: 1%;
}

/*text*/
.text-a-c {
  text-align: center;
}
.text-a-r {
  text-align: right;
}
.text-a-l {
  text-align: left;
}
.fon-s-1d3 {
  font-size: 1.3em;
}
.fon-s-0d6 {
  font-size: 0.6em;
}
.fon-s-0d8,.fon-s-0d8-800 {
  font-size: 0.8em;
}
.fon-s-1 {
  font-size: 1em;
}
.fon-s-1d5 {
  font-size: 1.5em;
}
.fon-s-2 {
  font-size: 2em;
}
.fon-s-3 {
  font-size: 3em;
}
.fon-s-4 {
  font-size: 4em;
}
.fon-w-b {
  font-weight: 900;
}
.jus-c-c {
  justify-content: center;
}
.jus-c-e {
  justify-content: end;
}
.jus-i-c {
  justify-items: center;
}
.jus-i-fe {
  justify-items: flex-end;
}
.jus-i-r{
  justify-items: right;
}
.jus-c-sb {
  justify-content: space-between;
}
.jus-c-sa {
  justify-content: space-around;
}
.jus-s-s{
  justify-self: start;
}
.jus-s-e{
  justify-self: end;
}
.ali-i-c {
  align-items: center;
}
.ali-c-c {
  align-content: center;
}

label{
  cursor: pointer;
}
/*alls*/
.all-inptLabel-c-p input,
.all-inptLabel-c-p label {
  cursor: pointer;
}
.all-dis-ib * {
  display: inline-block;
}
.all-dis-b * {
  display: block;
}
.lef{
left: 0;
}

.rig{
right: 0;
  }

.bot{
bottom: 0;
  }
.bot-5v{
  bottom: 5vh;
}


/*clases base*/
.top-50v{
  top: 50vh;
}
.top-80v{
  top: 80vh;
}
.z-i-2{
  z-index: 2;
}
.onlyP{
  position: fixed;
  background-color: #ffffffcc;
  z-index: 4;
  width: 100vw;
  height: 100vh;
  display: none;
  top: 0px;
}
.window{
  background-color: rgba(255, 255, 255, 0.822);
  border-radius: 25px;
  box-shadow: 4px 8px 4px rgba(14, 14, 14, 0.438);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10vh;
  margin: auto;

}
.tarjeta{
  background-color: #ffffff;
  border-radius: 25px;
  box-shadow: 4px 8px 4px rgba(14, 14, 14, 0.438);
}
.z-ind-1 {
  z-index: 1;
}
.pos-r {
  position: relative;
}
.mart-20p {
  margin-top: 20px;
}
.mart--20p {
  margin-top: -20px;
}
.mar-l-50{
  margin-left: 44%;
}
.mar-b-1m {
  margin: 0px 0px 1em 0px;
}
.mar-b--10v {
  margin-bottom: -10vh;
}

.mar-t--40-800{
  margin-top: -40px;
}
.mar-x {
  margin: 0px 1em;
}
.defltBtn {
  color: white;
  background-image: linear-gradient(#8C844A, #bdb052);
  border-radius: 25px;
  font-size: 1em;
  transition: all 0.3s;
  padding: 0.4em 0.9em;
  color: white;
}
.defltBtn:hover {
  background-image: linear-gradient(#bdb052, #8C844A);
}
.div-bor-c-w div{
  border: 1px solid white;
  }
  .bor-c-w{
    border: 1px solid white;
    }
  .dis-g-4-1fr{
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  .pos-r {
    position: relative;
  }
  .pos-a {
    position: absolute;
  }
  .zin-2{
  z-index: 2;
  }
  .copy{
    position: absolute; top: 0px;
    z-index: 3;
  }

  .tra-a-6 {
    transition: all 2s;
    transition-timing-function: linear;
  }
  .tra-a-3 {
    transition: all 3s;
  }

  .topHead {
    position: absolute;
    top: 0px;
  }
  .bac-c-0{
    background-color: #F190AC;
    fill: #F190AC;
  }
  .bac-c-1{
    background-color:#AB4A9C ;
    fill:#AB4A9C ;
  }
  .bac-c-2{
    background-color: #00AEEF;
    fill: #00AEEF;
  }
  .bac-c-3{
    background-color:#ED1C24 ;
    fill:#ED1C24 ;
  }
  .bac-c-4{
    background-color:#2E3192 ;
    fill:#2E3192 ;
  }
  .bac-c-5{
    background-color:#2e9258 ;
    fill:#2e9258  ;
  }
  .bac-c-6{
    background-color:#FFF200 ;
    fill:#FFF200 ;
  }
  .bac-c-7{
    background-color:#F15A22 ;
    fill:#F15A22 ;
  }
  .bac-c-8{
    background-color: #86328C;
    fill: #86328C;
  }
  .bac-c-9{
    background-color: #0083CA;
    fill: #0083CA;
  }
  .bac-c-10{
    background-color: #BBD65B;
    fill: #BBD65B;
  }
  .bac-c-11{
    background-color: #F68A36;
    fill: #F68A36;
  }
  .bac-c-12{
    background-color: #AB3692;
    fill: #AB3692;
  }
  .bac-c-w{
    fill: white;
    background-color: white;
  }
  .bac-c-t{
    background-color: transparent;
    fill: transparent;
  }

  .bac-c-p{
    background-color: #A967AA;
    fill: #A967AA;
  }
  .bac-c-v{
    background-color:#E81A4B ;
    fill:#E81A4B ;
  }
  .bac-c-y{
    background-color: #FFC60B;
    fill: #FFC60B;
  }
  .bac-c-wO5{
    opacity:0.5;
    background-color: white;
    fill: white;
  }
  .bac-yt {
    background-color: #d4ed0533;
  }
  .bac-gyt {
    background-color: #9b9b9b33;
  }
.bac-gyl{
  background-color: #cccccca9;
}
  .bac-wt {
    background-color: #ffffff71;
  }
  .bac-w {
    background-color: white;
  }
  .col-bd{
    fill: #3467af;
    color:#253345
  }
  .col-y{
    fill: #afa334;
    color:#afa334
  }
  .bor-b{
    border: 1px solid #323232;
    stroke: #323232;
    stroke-width: 1;
  }
  .bor-b-c-r{
    border-bottom: 1px solid red;
  }
  .bor-b-c-n{
    border-bottom: 2px solid black;
  }
  .bor-das-c-n{
    border: 1px dashed #323232;
  }
.bor-c-dr{
  border: 3px solid transparent;
border-image: linear-gradient(to bottom, #f3f7bc,#918f2d);
border-image-slice: 1;
}
.bor-l-10-c-b {
  border-left: 10px solid rgb(55, 116, 173);
}
.bor-t-c-v {
  border-top: 1px solid #d3337b;
}
.pad {
  padding: 1em;
}
.pad-0d5 {
  padding: 0.5em;
}
.pad-x {
  padding: 5px 0.8em;
}
.pad-y-2 {
  padding: 2em 0px;
}
.pad-y-x3 {
  padding: 3em 0px;
}
.hei-40v {
  height: 40vh;
}
.hei-50v {
  height: 50vh;
}
.hei-60v {
  height: 60vh;
}
.hei-70v {
  min-height: 70vh;
}
.hei-80v {
  height: 80vh;
}
.hei-90v {
  height: 90vh;
}
.hei-95v {
  height: 97vh;
}
.hei-100v,.hei-100v-800 {
  height: 97.40vh;
}
.bac-c-yd {
  background-color: #e9ca52;
  fill: #e9ca52;
}
.bac-c-rl {
  background-color: #fbd0d9;
}
.bac-c-e {
  background-color: #188fa3;
  fill: #188fa3;
}
.bac-c-bd {
  background-color: #181aa3;
  fill: #181aa3;
}
.bac-c-b {
  background-color: #00A8DE;
  fill: #00A8DE;
}
.bac-c-r {
  background-color: #ee0b0b;
  fill: #ee0b0b;
}
.bac-c-gr{
  fill:#A39999;
  background-color: #A39999;
}
.bac-c-g {
  background-color: #99d620;
}
.bac-c-n {
  background-color: #000;
}
.bac-c-o {
  background-color: rgb(255, 136, 1);
  fill: rgb(255, 136, 1);
}
.ove-s{
  overflow-y: scroll;
}
.fon-w-b{
  font-weight: bold;
}
.lis-s-n{
  list-style: none;
}
.close{
  font-size: 1.5em;
  float: right;
  cursor: pointer;
}
.pop .popB{
background-color: rgba(0, 0, 0, 0.705);
width: 100vw;
height: 110vh;
position: fixed;
display: grid;
align-items: center;
top: -13px;
left: 0px;
margin-top: 2vh;
display: grid;
align-content: center;
    justify-items: center;
    z-index: 10;
}
.bor-r-10{
  border-radius: 10px;
  padding: 1px;
  margin: 1px;
}
.ali-s-fe {
  align-self: flex-end;
}
.ali-s-c {
  align-self: center;
}
.negro {
  width: 100vw;
  height: 100vh;
  display: flex;
  position: fixed;
  background-color: rgba(68, 68, 68, 0.466);
  left: 0px;
  top: 0px;
  z-index: 10;
  justify-content: center;
  align-items: center;
}
.blanco {
  width: 80%;
  padding: 25px;
  background-color: white;
  height: fit-content;
  text-align: center;
}

.blanco button {
  color: white;
  background-image: linear-gradient(#b8003b, #940432);
  border-radius: 25px;
  padding: 0.1em 1em;
  font-size: 1em;
  transition: all 0.3s;
}
.cur-p {
  cursor: pointer;
}
.cur-g {
  cursor: grabbing;
}
.ove-h {
  overflow: hidden;
}
.ove-x-h {
  overflow-x: hidden;
}
.opa-0d8 {
  opacity: 0.8;
}
.flo-r,.flo-r-800 {
  float: right;
}
.pdr-bor {
  border: 1px solid #7b7b4c;
}
/*clases*/
.bac-sea{
  background-color: #3374a2;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='18' viewBox='0 0 100 18'%3E%3Cpath fill='%235c84a6' fill-opacity='0.4' d='M61.82 18c3.47-1.45 6.86-3.78 11.3-7.34C78 6.76 80.34 5.1 83.87 3.42 88.56 1.16 93.75 0 100 0v6.16C98.76 6.05 97.43 6 96 6c-9.59 0-14.23 2.23-23.13 9.34-1.28 1.03-2.39 1.9-3.4 2.66h-7.65zm-23.64 0H22.52c-1-.76-2.1-1.63-3.4-2.66C11.57 9.3 7.08 6.78 0 6.16V0c6.25 0 11.44 1.16 16.14 3.42 3.53 1.7 5.87 3.35 10.73 7.24 4.45 3.56 7.84 5.9 11.31 7.34zM61.82 0h7.66a39.57 39.57 0 0 1-7.34 4.58C57.44 6.84 52.25 8 46 8S34.56 6.84 29.86 4.58A39.57 39.57 0 0 1 22.52 0h15.66C41.65 1.44 45.21 2 50 2c4.8 0 8.35-.56 11.82-2z'%3E%3C/path%3E%3C/svg%3E");
}
.menuBtn button{
  display: block;
  font-size: 1.2em;
  margin: 0.5em 0px;
  padding: 0.5em 0px;
  color: #ffe100;
  text-shadow: 2px 2px 2px rgb(56, 56, 56);
  font-weight: bold;
}
/*din clases*/

@media all and (orientation:portrait) and (max-width: 880px){
  .onlyP{
  display: block;
  }
}
@media only screen and (max-width: 880px) {
  .fon-s-0d8-800{
    font-size: 0.5em;
  }
  .wid-80-800{
    width: 100%;
  }
  .copy img{
    width:50%;
  }
  .dis-g-20-60-20{
    grid-template-columns: 100%;
  }
  .mar-l-50{
    margin-left: 38%;
  }
  .hei-800-50v {
    height: 50vh;
  }
  .ove-800-sy{
overflow-y: scroll;
  }
  .fondo-pat svg{
    width: 380%;
    height: 100vh;
    position: relative;
  }
  .dis-800-b{
    display: block;
  }
  .dis-800-n{
    display: none;
  }
  .hei-100v-800 {
    height: auto;
  }
  h1 {
    font-size: 1.5em;
  }
  h2 {
    font-size: 1.2em;
  }
 h3 {
    font-size: 1.1em;
  }

  .personCorner {
    position: inherit;
    margin-left: 0px;
  }
  .dis-g-20-a-20-800 {
    grid-template-columns: 100%;
    column-gap: 0%;
    row-gap: 1%;
  }
  .dis-g-2-a-800,
  .dis-g-2-800 {
    grid-template-columns: 100%;
    column-gap: 0%;
    row-gap: 1%;
  }
  .donante {
    width: 100%;
    overflow-x: scroll;
  }
  .imgCorner {
    position: inherit;
    margin: auto;
  }
  .dis-g-3-a-800,
  .dis-g-2-80-800 {
    grid-template-columns: auto;
    column-gap: 1%;
  }
  .dis-g-3-33-800 {
    grid-template-columns: auto;
    column-gap: 1%;
  }
  .transport img {
    width: 100%;
  }
  .mar-y-800 {
    margin: 1em 0px;
  }

  .wid-100-800,
  .wid-70-800,
  .wid-55-800 {
    width: 99%;
  }
  .mar {
    grid-template-columns: auto auto auto;
  }
  .navegantes {
    position: relative;
    margin-bottom: -50px;
    z-index: 1;
    margin-top: -0vh;
  }
  .wid-800-100,
  .wid-60-800 {
    width: 100%;
  }
  .wid-100-800-50 {
    width: 50%;
  }

  .dis-g-3-800 {
    grid-template-columns: 60%;
  }
  .solucion {
    position: relative;
    margin-top: -10vh;
  }
  .dis-f-800 {
    display: block;
  }
  .dis-g-4-800 {
    grid-template-columns: auto auto;
    row-gap: 0.1em;
    column-gap: 0.1em;
  }
  .codigos {
    grid-template-columns: auto auto;
  }
  .wid-50-800 {
    width: 100%;
  }
  .dis-g-a-15 {
    grid-template-columns: auto;
    text-align: center;
  }
  .dis-g-6-800 {
    grid-template-columns: auto auto auto;
  }
  .mar-t--40-800{
    margin-top: 0px;
  }
  .flo-r-800{
    float: inherit;
  }
  .dis-g-5-800 {
    grid-template-columns: auto auto;
    row-gap: 0.1em;
    column-gap: 0.1em;
  }
}