.yellowText {
  color:#feb602;
  font-weight: bold;
}

.colorWhite {
  color: white;
}
#mobile {
  display:none;
 }
 #desktop {
  display:block;
 }
.modal {
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

/* Modal Content/Box */
.modal-content {
  background-color: #222222;
  /* border: 1px solid #888; */
  width: 60vw; /* Could be more or less, depending on screen size */
  padding-top: 0;
  font-size: small;
  color: white;
  border-radius: 1.5rem;
}

#closeModalPremium {
  position: relative;
    top: 0vw;
    right: 0.8vw;
    cursor: pointer;
    width: 2vw;
    height: 2vw;
}

.modal-content header {
  display:flex;

  margin: 0 5%;
  margin-top:1rem;
}
.modal-content header .description {
  width:70%;

}
.modal-content header .description  p{
  color: #cccccc;
}
.modal-content header .description  h1{
  color: #cccccc;
  font-size: 2.5rem;
  margin-bottom: 1rem;
}
.modal-content .modalImg {
  width:30%;
  display:none;
  height:100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-content .modalImg img {
  width:10rem;

}

/* The Close Button */
.close {
  color: white;
  width:min-content;
  float:right;
  font-size: 28px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

.modal .content {
  display:flex;
  justify-content: flex-start;
  margin: 0 5%;
}


.modal .todo {
  width:65%;
  display:flex;
  align-items: left;
}
.modal .todo ul li {
  display:flex;
  align-items: center;
  gap: 0.5rem;
  color: #cccccc;
}

.modal .todo ul li img {
  width:1.1rem;
  height:1.3rem;
}

.modal .box {
  background-color: #1b1b1b;
  border-radius:5px;
  padding:1.5rem 0.5rem;
  width:32%;
  border-radius: 1rem;
}

.modal .box h1 {
  text-align: center;
}

.modal .box hr {
  width:80%;
  margin: 0 auto;
  opacity: 0.3;
}

.modal .box .price {
  width:80%;
  margin:0 auto;
  margin-top:1rem;

}

.modal .box .price h3{
  color: white;
  font-weight: bold;
  text-align: left;
  
}
.modal .box .price h1{
  color: #feb602;
  text-align: left;
  font-weight: bold;
  font-size: 2rem;
  
}

.modal .box .price .priceByMonth {
  display:flex;
  align-items:center;
  justify-content: center;
  gap:0.2rem;
}

.modal .box .price .month {
  margin-top:0.8rem;
}

.modal .buttonSign {
  position: absolute;
  bottom: calc(11vw / 8.77);
  right: calc(63vw / 2.10);
  width: calc(40vw / 3.17);
}

.modal .buttonSign:hover {
  filter: brightness(0.8);
}

.modal .buttonSign a{
  display:flex;
  align-items: center;
  text-decoration: none;
  font-size: 1.4rem;
  background-color: #feb602;
  color: black;
  font-weight: bold;
  border-radius: 5px;
  padding:0.4rem 0.8rem;
  gap: 0.5rem;
  justify-content: center;
}

.modal .buttonCursos {
  position: absolute;
  bottom: calc(11vw / 8.77);
  right: calc(63vw / 4.10);
  width: calc(40vw / 3.0);
}

.modal .buttonCursos:hover {
  filter: brightness(1.8);
}

.modal .buttonCursos a{
  display:flex;
  align-items: center;
  text-decoration: none;
  font-size: 1.4rem;
  background-color: #282828;
  color: rgb(255, 255, 255);
  font-weight: bold;
  border-radius: 5px;
  padding:0.4rem 0.8rem;
  gap: 0.5rem;
  justify-content: center;
}

#imgModal {
  display: block;
}

#imgModalMobile {
  display: none;
}
.carrinhoImage {
  width:25px;
   height:25px;
}

#buttonDesk {
  display: block;
}
#buttonMobi {
  display: none;
}

.modal .buttonSignSimu {
  position: absolute;
  bottom: calc(11vw / 10.77);
  right: calc(63vw / 2.91);
  width: calc(40vw / 3.17);
}

.modal .buttonSignSimu a{
  display:flex;
  align-items: center;
  text-decoration: none;
  font-size: 1.4rem;
  background-color: #feb602;
  color: black;
  font-weight: bold;
  border-radius: 5px;
  padding:0.4rem 0.8rem;
  gap: 0.5rem;
  justify-content: center;
}

.modal .buttonSignSimu span{
  padding: 4px;
}

.modal .buttonSignSimu:hover {
  filter: brightness(0.8);
}

.modal .buttonSignDuv {
  position: absolute;
  bottom: calc(21vw / 8.77);
  right: calc(59vw / 2.10);
  width: calc(40vw / 3.17);
}

.modal .buttonSignDuv:hover {
  filter: brightness(0.8);
}

.modal .buttonSignDuv a{
  display:flex;
  align-items: center;
  text-decoration: none;
  font-size: 1.4rem;
  background-color: #feb602;
  color: black;
  font-weight: bold;
  border-radius: 5px;
  padding:0.4rem 0.8rem;
  gap: 0.5rem;
  justify-content: center;
}

.modal .buttonSup {
  position: absolute;
  bottom: calc(21vw / 8.77);
  right: calc(57vw / 4.10);
  width: calc(40vw / 3.0);
}

.modal .buttonSup:hover {
  filter: brightness(1.8);
}

.modal .buttonSup a{
  display:flex;
  align-items: center;
  text-decoration: none;
  font-size: 1.4rem;
  background-color: #282828;
  color: rgb(255, 255, 255);
  font-weight: bold;
  border-radius: 5px;
  padding:0.4rem 0.8rem;
  gap: 0.5rem;
  justify-content: center;
}

@media screen and (max-width:768px) {
  .modal .modal-content {
    overflow:visible;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin:0;
  }
  #button-sign-mobile {
    display: flex;
  }
  .modal .modal-content header {
    margin:0;
    padding:0;
    display:flex;
    align-items: center;
    justify-content: center;
    width:100%;
  }
  .modal .modal-content header .description {
    width:100%;
    text-align: center;
    padding:0;
    
 }
 .modal .modal-content header .modalImg {
  display:none;
 }

 .modal .modal-content header .description h1{
  font-size:1rem;
 }
 .modal .modal-content header .description p {
  display:none;
 }
 #desktop {
  display:none;
 }
 #mobile {
  display:block;
  color: white;
  font-size: 1.5rem;
 }
 
 .modal .content {
    display:flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin: 0 0;
  }
  .modal .content .todo {
    margin-top:1rem;
    width:100%;
  }
  .modal .content .box {
    margin-top:2rem;
    width:50%;
    border-radius:8px;
  }
  .modal .content .box #titleDesktop {
    display:none;
  }
  .modal .content .box hr {
    display:none;
  }
  .modal .box .price {
    margin-top: 0;
  }
  .close {

    width:100%;
    text-align: right;
  }
  .modal .buttonSign {
    display:none;
  }
  .modal .content .box .buttonSign {
    display:flex;
  }
  
  #imgModal {
    display: none;
  }

  #imgModalMobile {
    display: block;
  }

  #buttonDesk {
    display: none;
  }
  #buttonMobi {
    display: block;
  }

  .modal .buttonSign a{
    font-size: 0.5rem;
  }
  .modal .buttonSign {
    bottom: calc(0vh + 1rem);
    right: calc(25vw + 5rem);
    width: max-content;
  }
  .carrinhoImage {
    width:10px;
     height:10px;
  }
  .modal .buttonCursos {
    bottom: calc(0vh + 1rem);
    right: calc(5vw + 2rem);
    width: max-content;
  }
  .modal .buttonCursos a {
    font-size: 0.65rem;
  }

  .modal .buttonSignSimu {
    bottom: calc(1vh + 1rem);
    right: calc(34vw + 2rem);
    width: max-content;
  }

  .modal .buttonSignSimu a{
    font-size: 0.5rem;
  }

  .modal .buttonSignSimu .carrinhoImage {
    width:10px;
     height:10px;
  }

  .modal .buttonSignDuv a{
    font-size: 0.7rem;
  }

  .modal .buttonSup{
    display: none;
  }

  .modal .buttonSignDuv .carrinhoImage {
    width:10px;
     height:10px;
  }

  .modal .buttonSignDuv {
    position: absolute;
    bottom: calc(42vw / 8.77);
    right: calc(5vw / 2.10);
    width: fit-content;
  }
  #closeModalPremium {
    top: -5vw;
  }
}

@media screen and (max-width:425px) {
  .modal-content {
    width:85%;

    padding-top:0;
    padding-bottom:0;
    border-radius:0.5rem;
  }
  #button-sign-mobile {
    display: flex;
  }
  .modal .content .box {

    width:65%;
    margin:1rem;
    padding:0.8rem;
    border-radius:8px;
  }
  .modal .content .box h3{
    font-size: 0.6rem;
    margin-left:0.3rem;
  }
  .modal .content .box .priceByMonth h1{
    font-size:1.5rem;
  }
  .modal .content .box .priceByMonth{
    font-size:0.5rem;
  }
  .modal .content .box .buttonSign img {
    width:0.8rem;
    height:0.8rem;
  }
  .modal .content .box .buttonSign span {
    font-size:0.7rem;
  }
  .modal  .description #mobile {
    margin:0;
    font-size:1.05rem;
  }
  .modal .content .todo ul li img{
    width:0.7rem;
  }
  .modal .content .todo ul li span{
    font-size:0.6rem;
  }
}

@media screen and (max-width:320px) {
  
  .modal .content .box h3{
    margin-left:-0.4rem;
  }
  #button-sign-mobile {
    display: flex;
  }
}