#modal-content {

    display: none;

    position: fixed;

    z-index: 99999;

    background: #FFF;

    top: 50%;

    left: 50%;

    transform: translateX(-50%) translateY(-50%);

    max-width: 900px;

    width: 100%;

    text-align: center;

    padding: 10px 20px; 

    /* border: 4px solid rgba(255, 23, 68, 1); */

    box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);

}

#modal-close {

    display: inline-block;

    margin: 10px 6px 4px 6px;

    text-decoration: none;

    position: relative;

    font-size: 16px;

    padding: 8px 16px;

    color: #FFF;

    font-weight: bold;

    text-transform: uppercase; 

    background: rgba(255, 23, 68, 1);

}

#modal-close:hover {

    color: #FFF;

}

#modal-close:after,

#modal-close:before {

    position: absolute;

    height: 2px;

    left: 50%;

    background: rgba(255, 23, 68, 1);

    bottom: -6px;

    content: "";

    transition: all 280ms ease-in-out;

    width: 0;

}

#modal-close:before {

    top: -6px;

}

#modal-close:hover:after,

#modal-close:hover:before {

    width: 100%;

    left: 0;

}

.new-pic{

  

}

@media (max-width: 1024px){

    #modal-content {

    display: none;

    position: fixed;

    z-index: 99999;

    background: #FFF;

    top: 20%;

    left: 50%;

    transform: translateX(-50%) translateY(-50%);

    max-width: 900px;

    width: 100%;

    text-align: center;

    padding: 10px 20px;

     
    box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);


}

}





@media (max-width: 560px){

    .new-pic{

        width: ;

        height: ;

}

#modal-content {

    display: none;

    position: fixed;

    z-index: 99999;

    background: #FFF;

    top: 30%;

    left: 50%;

    transform: translateX(-50%) translateY(-50%);

    max-width: 700px;

    width: 100%;

    text-align: center;

    padding: 10px 20px;

    /* border: 4px solid rgba(255, 23, 68, 1); */

    box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);

}

}

@media (max-width: 415px){

    .new-pic{

        width: ;

        height: ;

}

#modal-content {

    display: none;

    position: fixed;

    z-index: 99999;

    background: #FFF;

    top: 30%;

    left: 50%;

    transform: translateX(-50%) translateY(-50%);

    max-width: 700px;

    width: 100%;

    text-align: center;

    padding: 10px 20px;

    /* border: 4px solid rgba(255, 23, 68, 1); */

    box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);

}

}





@media (max-width: 391px){

    .new-pic{

        width: ;

        height: ;

}

#modal-content {

    display: none;

    position: fixed;

    z-index: 99999;

    background: #FFF;

    top: 30%;

    left: 50%;

    transform: translateX(-50%) translateY(-50%);

    max-width: 700px;

    width: 100%;

    text-align: center;

    padding: 10px 20px;

    /* border: 4px solid rgba(255, 23, 68, 1); */

    box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);

}

}

@media (max-width: 361px){

    .new-pic{

        width: ;

        height: ;

}

#modal-content {

    display: none;

    position: fixed;

    z-index: 99999;

    background: #FFF;

    top: 30%;

    left: 50%;

    transform: translateX(-50%) translateY(-50%);

    max-width: 700px;

    width: 100%;

    text-align: center;

    padding: 10px 20px;

    /* border: 4px solid rgba(255, 23, 68, 1); */

    box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);

}

}