@charset "UTF-8";
#myBtn,#myBtn2,#myBtn3 {
    transition: 0.3s;
    border: 1px rgba(255, 255, 255, 0) solid;
}

#myBtn:hover,#myBtn2:hover,#myBtn3:hover {
    opacity: 0.7;    
    border: 1px white solid;
    cursor: pointer;
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 5; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: #000000c7;
}

.modal-content {
    background-color: rgb(20, 58, 56);
    margin: auto;
    padding: 20px;
    border: 1px solid rgba(20, 58, 56, 0.8901960784313725);
    width: 50%;
    position:  relative;
    top: 50%;
    margin-top: -10%;
    color:  #fff;
}
.modal-text{
  font-size: 17px;
  margin:  40px;
}

.modal-text a{
      text-decoration: none;
      color: #fff;
}
.more{
    border: 1px #fff solid;
    display: inline-block;
    padding: 5px 10px;
    font-size: 15px;
}

.close ,.close2,.close3 {
    color: #fff;
    float: none;
    font-size: 32px;
    position:  absolute;
    right: 26px;
    font-weight: bold;
    cursor: pointer;
    text-shadow:  none;
    opacity: 1;
}

.close:hover,.close:focus,.close2:hover,.close2:focus,.close3:hover,.close3:focus {
    color: #fff;
    text-decoration: none;
    opacity: .75;
}

@media (max-width: 991px) {
.modal-content{
    width: 90%;
    margin-top: 0;
    top: 20%;
}
.modal-text {
    font-size: 32px;
    margin: 40px;
}
.modal-text h2{
    font-size: 42px;
    line-height:  3.6rem;
}
}

/*******M***B**********/

#myBtn-mb,#myBtn2-mb,#myBtn3-mb {
    transition: 0.3s;
    border: 1px rgba(255, 255, 255, 0) solid;
}

#myBtn-mb:hover,#myBtn2-mb:hover,#myBtn3-mb:hover {
    opacity: 0.7;    
    border: 1px white solid;
    cursor: pointer;
}