.bg-model{
    width:100%;
    height:100%;
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4);
    position:fixed;
    justify-content:center;
    align-items:center;
    display:none;
    overflow: auto;
    z-index: 1;
    padding-top: 40px; 
    left: 0;
    top: 0;
}
.modal-content{
    width: 40%;
    background:#fff;
    border-radius:4px;
    padding: 0 10px 10px;
    box-sizing:border-box;
    text-align:center;
    position:absolute;
}
.close{
    color: #aaaaaa;
    font-size: 28px;
    font-weight: bold;
    text-align: right;
}
.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
.bg-model .modal-content img{
    margin: 0 auto;
    width: 100px;
    height: 100px;
    border-radius: 50%;
}
.bg-model .modal-content p{
    text-align: left;
    margin: 0;
}

/*== model 2 ==*/
.bg-model-2{
    width:100%;
    height:100%;
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4);
    position:fixed;
    justify-content:center;
    align-items:center;
    display:none;
    overflow: auto;
    z-index: 1;
    padding-top: 40px; 
    left: 0;
    top: 0;
}
.modal-content-2{
    width: 40%;
    background:#fff;
    border-radius:4px;
    padding:10px;
    box-sizing:border-box;
    text-align:center;
    position:absolute;
}



.bg-model-2 .modal-content-2 .close-2{
     color: #aaaaaa;
     font-size: 28px;
     font-weight: bold;
     text-align: right;
}
.bg-model-2 .modal-content-2 .close-2:hover,
.bg-model-2 .modal-content-2 .close-2:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
.bg-model-2 .modal-content-2 img{
    margin: 0 auto;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid gray;
}
.bg-model-2 .modal-content-2 p{
    text-align: left;
    margin: 0;
}





/*== model 3 ==*/
.bg-model-3{
    width:100%;
    height:100%;
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4);
    position:fixed;
    justify-content:center;
    align-items:center;
    display:none;
    overflow: auto;
    z-index: 1;
    padding-top: 40px; 
    left: 0;
    top: 0;
}
.modal-content-3{
    width: 40%;
    background:#fff;
    border-radius:4px;
    padding: 0 10px 10px;
    box-sizing:border-box;
    text-align:center;
    position:absolute;
}
.bg-model-3 .modal-content-3 .close-3{
     color: #aaaaaa;
    font-size: 28px;
    font-weight: bold;
    text-align: right;
}
.bg-model-3 .modal-content-3 .close-3:hover,
.bg-model-3 .modal-content-3 .close-3:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
.bg-model-3 .modal-content-3 img{
    margin: 0 auto;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid gray;
}
.bg-model-3 .modal-content-3 p{
    text-align: left;
    margin: 0;
}



/*== model 4 ==*/
.bg-model-4{
    width:100%;
    height:100%;
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4);
    position:fixed;
    justify-content:center;
    align-items:center;
    display:none;
    overflow: auto;
    z-index: 1;
    padding-top: 40px; 
    left: 0;
    top: 0;
}
.modal-content-4{
    width: 40%;
    background:#fff;
    border-radius:4px;
    padding: 0 10px 10px;
    box-sizing:border-box;
    text-align:center;
    position:absolute;
}



.bg-model-4 .modal-content-4 .close-4{
    
    color: #aaaaaa;
    font-size: 28px;
    font-weight: bold;
    text-align: right;
}
.bg-model-4 .modal-content-4 .close-4:hover,
.bg-model-4 .modal-content-4 .close-4:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
.bg-model-4 .modal-content-4 img{
    margin: 0 auto;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid gray;
}
.bg-model-4 .modal-content-4 p{
    text-align: left;
    margin: 0;
}



/*== model 5 ==*/
.bg-model-5{
    width:100%;
    height:100%;
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4);
    position:fixed;
    justify-content:center;
    align-items:center;
    display:none;
    overflow: auto;
    z-index: 1;
    padding-top: 40px; 
    left: 0;
    top: 0;
}
.modal-content-5{
    width: 40%;
    background:#fff;
    border-radius:4px;
    padding: 0 10px 10px;
    box-sizing:border-box;
    text-align:center;
    position:absolute;
}
.bg-model-5 .modal-content-5 .close-5{
     color: #aaaaaa;
  font-size: 28px;
  font-weight: bold;
  text-align: right;
}
.bg-model-5 .modal-content-5 .close-5:hover,
.bg-model-5 .modal-content-5 .close-5:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
.bg-model-5 .modal-content-5 img{
    margin: 0 auto;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid gray;
}
.bg-model-5 .modal-content-5 p{
    text-align: left;
    margin: 0;
}



/*== model 6 ==*/
.bg-model-6{
    width:100%;
    height:100%;
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4);
    position:fixed;
    justify-content:center;
    align-items:center;
    display:none;
    overflow: auto;
    z-index: 1;
    padding-top: 40px; 
    left: 0;
    top: 0;
}
.modal-content-6{
    width: 40%;
    background:#fff;
    border-radius:4px;
    padding: 0 10px 10px;
    box-sizing:border-box;
    text-align:center;
    position:absolute;
}
.bg-model-6 .modal-content-6 .close-6{
    color: #aaaaaa;
    font-size: 28px;
    font-weight: bold;
    text-align: right;
}
.bg-model-6 .modal-content-6 .close-6:hover,
.bg-model-6 .modal-content-6 .close-6:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
.bg-model-6 .modal-content-6 img{
    margin: 0 auto;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid gray;
}
.bg-model-6 .modal-content-6 p{
    text-align: left;
    margin: 0;
}



/*== model 7 ==*/
.bg-model-7{
    width:100%;
    height:100%;
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4);
    position:fixed;
    justify-content:center;
    align-items:center;
    display:none;
    overflow: auto;
    z-index: 1;
    padding-top: 40px; 
    left: 0;
    top: 0;
}
.modal-content-7{
    width: 40%;
    background:#fff;
    border-radius:4px;
    padding: 0 10px 10px;
    box-sizing:border-box;
    text-align:center;
    position:absolute;
}
.bg-model-7 .modal-content-7 .close-7{
    color: #aaaaaa;
    font-size: 28px;
    font-weight: bold;
    text-align: right;
}
.bg-model-7 .modal-content-7 .close-7:hover,
.bg-model-7 .modal-content-7 .close-7:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
.bg-model-7 .modal-content-7 img{
    margin: 0 auto;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid gray;
}
.bg-model-7 .modal-content-7 p{
    text-align: left;
    margin: 0;
}



/*== model 8 ==*/
.bg-model-8{
    width:100%;
    height:100%;
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4);
    position:fixed;
    justify-content:center;
    align-items:center;
    display:none;
    overflow: auto;
    z-index: 1;
    padding-top: 40px; 
    left: 0;
    top: 0;
}
.modal-content-8{
    width: 40%;
    background:#fff;
    border-radius:4px;
    padding: 0 10px 10px;
    box-sizing:border-box;
    text-align:center;
    position:absolute;
}
.bg-model-8 .modal-content-8 .close-8{
    color: #aaaaaa;
    font-size: 28px;
    font-weight: bold;
    text-align: right;
}
.bg-model-8 .modal-content-8 .close-8:hover,
.bg-model-8 .modal-content-8 .close-8:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
.bg-model-8 .modal-content-8 img{
    margin: 0 auto;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid gray;
}
.bg-model-8 .modal-content-8 p{
    text-align: left;
    margin: 0;
}



/*== model 9 ==*/
.bg-model-9{
    width:100%;
    height:100%;
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4);
    position:fixed;
    justify-content:center;
    align-items:center;
    display:none;
    overflow: auto;
    z-index: 1;
    padding-top: 40px; 
    left: 0;
    top: 0;
}
.modal-content-9{
    width: 40%;
    background:#fff;
    border-radius:4px;
    padding: 0 10px 10px;
    box-sizing:border-box;
    text-align:center;
    position:absolute;
}
.bg-model-9 .modal-content-9 .close-9{
    color: #aaaaaa;
    font-size: 28px;
    font-weight: bold;
    text-align: right;
}
.bg-model-9 .modal-content-9 .close-9:hover,
.bg-model-9 .modal-content-9 .close-9:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
.bg-model-9 .modal-content-9 img{
    margin: 0 auto;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid gray;
}
.bg-model-9 .modal-content-9 p{
    text-align: left;
    margin: 0;
}



/*== model 10 ==*/
.bg-model-10{
    width:100%;
    height:100%;
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4);
    position:fixed;
    justify-content:center;
    align-items:center;
    display:none;
    overflow: auto;
    z-index: 1;
    padding-top: 40px; 
    left: 0;
    top: 0;
}
.modal-content-10{
    width: 40%;
    background:#fff;
    border-radius:4px;
    padding: 0 10px 10px;
    box-sizing:border-box;
    text-align:center;
    position:absolute;
}
.bg-model-10 .modal-content-10 .close-10{
    color: #aaaaaa;
    font-size: 28px;
    font-weight: bold;
    text-align: right;
}
.bg-model-10 .modal-content-10 .close-10:hover,
.bg-model-10 .modal-content-10 .close-10:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
.bg-model-10 .modal-content-10 img{
    margin: 0 auto;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid gray;
}
.bg-model-10 .modal-content-10 p{
    text-align: left;
    margin: 0;
}



/*== model 11 ==*/
.bg-model-11{
    width:100%;
    height:100%;
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4);
    position:fixed;
    justify-content:center;
    align-items:center;
    display:none;
    overflow: auto;
    z-index: 1;
    padding-top: 40px; 
    left: 0;
    top: 0;
}
.modal-content-11{
    width: 40%;
    background:#fff;
    border-radius:4px;
    padding: 0 10px 10px;
    box-sizing:border-box;
    text-align:center;
    position:absolute;
}
.bg-model-11 .modal-content-11 .close-11{
    color: #aaaaaa;
    font-size: 28px;
    font-weight: bold;
    text-align: right;
}
.bg-model-11 .modal-content-11 .close-11:hover,
.bg-model-11 .modal-content-11 .close-11:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
.bg-model-11 .modal-content-11 img{
    margin: 0 auto;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid gray;
}
.bg-model-11 .modal-content-11 p{
    text-align: left;
    margin: 0;
}



/*== model 12 ==*/
.bg-model-12{
    width:100%;
    height:100%;
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4);
    position:fixed;
    justify-content:center;
    align-items:center;
    display:none;
    overflow: auto;
    z-index: 1;
    padding-top: 40px; 
    left: 0;
    top: 0;
}
.modal-content-12{
    width: 40%;
    background:#fff;
    border-radius:4px;
    padding: 0 10px 10px;
    box-sizing:border-box;
    text-align:center;
    position:absolute;
}
.bg-model-12 .modal-content-12 .close-12{
    color: #aaaaaa;
    font-size: 28px;
    font-weight: bold;
    text-align: right;
}
.bg-model-12 .modal-content-12 .close-12:hover,
.bg-model-12 .modal-content-12 .close-12:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
.bg-model-12 .modal-content-12 img{
    margin: 0 auto;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid gray;
}
.bg-model-12 .modal-content-12 p{
    text-align: left;
    margin: 0;
}