/* Country Page */

.row-padding {
    max-width: 800px; /* it was "width: 80%" */
}

.smallpic {
    margin: 10px;
    display: inline-block;
    width:200px;
    padding: 5px;
    background-color: #ffffff;
    border: 1px solid #c1c1c1; /* #808080 */
    box-shadow: 5px 5px 10px #c1c1c1;
}

.hover-opacity:hover {
    opacity:0.60;
    filter:alpha(opacity=60);
    -webkit-backface-visibility:hidden;
}

.modal{
    z-index:3;
    display:none;
    padding-top:140px;
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    overflow:auto;
    background-color:rgb(1,1,0);
    background-color:rgba(0,0,0,0.5);
}

.modal-content {
    margin:auto;
    background-color:rgb(1,1,0);
    background-color:rgba(0,0,0,0.0);
    position:relative;
    padding:10px;
    outline:0;
    width:700px;
/*    border: 1px solid #000000; /* I added */
    border-radius: 10px; /* I added */
}


@media (max-width:600px){.modal-content{margin:0 10px;width:auto!important}.modal{padding-top:30px}}

@media (max-width:768px){.modal-content{width:80%}.modal{padding-top:50px}}

@media (min-width:993px){.modal-content{width:70%}} /* Size of the pic in the motal - changed from 900px to 700px */

#img01 {
    width: 700px;
    border-radius: 10px; /* I added */
}

.textbox {
    margin: 20px;
    max-width: 600px;
    border: 1px solid #808080;
    border-radius: 0px;
    padding: 0px;
    background-color: inherit;
}

.textbox > p {
    text-align: justify;
}

.textbox > p > a {
    text-decoration: none;
    color: 3b5998;
}

.textbox > p > a:hover {
    text-decoration: none;
    color: ff8c00;
}

.pic {
/*    max-width: 550px;
    border: 1px solid #808080;
    border-radius: 0px;
    padding: 0px; 
    background-color: #ffffff; 
    box-shadow: 3px 3px 3px #c1c1c1; */
}

.pic > img {
    border-radius: 0px;
}

.text {
    padding: 0px 20px 20px 20px;
    text-align: justify;
}