@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
* { margin: 0; }
body { font-family: 'Poppins', sans-serif; font-size: 13px; background-color: #f4f4f4; color: #606060; }
.logo {
width: auto;
height: 100%;
max-height: 100px;
padding: 5px 10px;
}
.header {
height: auto;
background-color: #ffffff;
}
.content {
width: 80%;
max-width: 1200px;
padding: 15px 30px;
margin: 20px auto;
border-radius: 30px 30px 30px 30px;
font-size: 16px;
background-color: #ffffff;
color: #636363;
border: 1px solid #e0e0e0;
}
.main-title { color: #c1191f; }
.sub-title { color: #f23a3d; }
.image-left { float: left; margin: 0 15px 0 0; padding: 5px; overflow: auto; max-width: 100%; }
.image-right { float: right; margin: 0 0 0 15px; padding: 5px; overflow: auto;  max-width: 100%; }
.image-left::after { content: ""; clear: both; display: table; }
.list4box { display: flex; flex-direction: row; flex-wrap: wrap; justify-content:flex-start; }
.twobox {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
}
.twobox > div {
align-self: center;
width: 50%;
margin: 10px 0 10px 0;
padding: 0px;
text-align: center;
}
.twobox > div > img { width: 98%; max-width: 400px; }
.list4box > img { align-self: stretch; width: 25%; max-width: 150px; margin: 5px; padding: 5px; background-color: #ffffff; }
.footer {
padding: 20px 30px;
background-color: #2b2a2a;
color: #adadad;
}
.footer-bottom {
padding: 5px 10px;
font-size: 12px;
text-align: center;
background-color: #353433;
color: #7f7c7a;
}
.popupimg-overlay { display: none; position: fixed;  width: 100%; height: 100%; left: 0; top: 0; padding-top: 75px; z-index: 9; overflow: hidden; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.9); }
.popupimg-image {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
max-height: 90%;
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
.popupimg-close {
position: absolute;
top: 15px;
left: 50%;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
cursor: pointer;
}
.popimg { cursor: pointer; }
@-webkit-keyframes zoom { from {-webkit-transform:scale(0)} to {-webkit-transform:scale(1)} }
@keyframes zoom { from {transform:scale(0)} to {transform:scale(1)} }
.center-img { width: 100%; margin: 0 auto; }
.r-10 { border-radius: 10px; }
.r-15 { border-radius: 15px; }
.r-20 { border-radius: 20px; }
.r-25 { border-radius: 25px; }
.r-30 { border-radius: 30px; }
.p-5 { padding: 5px; }
.p-10 { padding: 10px; }
.p-15 { padding: 15px; }
.p-20 { padding: 20px; }
.p-25 { padding: 25px; }
.p-30 { padding: 30px; }
.left { text-align: left !important; }
.center { text-align: center !important; }
.right { text-align: right !important; }

.button {
background-color: #2a7da3;
color: #ffffff;
margin: 10px 0;
padding: 10px 20px;
border-radius: 15px;
border: 2px solid #ffffff;
outline: 0;
font-size: 16px;
cursor: pointer;
}

@media screen and (max-width: 600px) {
.logo { max-height: 50px; margin: 3px 0; }
.content { padding: 10px 20px; }
.twobox > div { width: 100%; }
.list4box > img { max-width: 100%; margin: 2px; padding: 2px; }
.content { border-radius: 15px; }
.mc { text-align: center !important; }
}