#loginForm { margin-top:50px!important; }

/* common */

.main-title { padding: 5px 80px; border:2px solid #000; display:inline-block; font-size:27px; margin:0px 0px 45px; font-weight:bold; text-align:center; }
#main-section1 { padding:60px 0 40px; }
#main-section1 hr { width:100px; margin-bottom:15px; margin-top:15px; border-top:2px solid #000;}
.ms-1-right-top2 hr, .ms-1-left-bottom1 hr { width:100px; margin-bottom:15px; margin-top:15px; border-top:2px solid #fff!important;}
#main-section1 .ms-1-right-top2 hr { margin-bottom:19px; }

.ms-1-left-top { width:100%; height:666px; background: url(../Images/introduce.png); background-position:center; background-size: 100% 100%; }
.main_indroduce { position:relative; top:15%; text-align:center; color:white; }
.main_indroduce h1 { color:#000; font-size:45px; font-weight:bold; margin:0 0 5px;}
.main_indroduce p { font-size:22px; color:#000; margin:0; font-weight:bold; }
.main_indroduce a { display:inline-block; color:#000; font-size:17px; font-weight:bold; padding:5px 60px; border:2px solid #000; margin-top:20px; text-decoration:none; }
.main_indroduce a:hover { background:#fff; transition:0.2s all; }
.main_indroduce a span { font-weight:bold; position:relative; margin-left:10px; top:-3px;}

.ms-1-right-bottom h1 { color:#000; font-size:45px; font-weight:bold; margin:0 0 5px;}
.ms-1-right-bottom p { font-size:17px; color:#000; margin:0; font-weight:bold; }
.ms-1-right-bottom a { display:inline-block; color:#000; font-size:17px; font-weight:bold; padding:5px 60px; border:2px solid #000; margin-top:20px; text-decoration:none; }
.ms-1-right-bottom a:hover { background:#fff; transition:0.2s all; }
.ms-1-right-bottom a span { font-weight:bold; position:relative; margin-left:10px; top:-3px;}


.ms1-box { padding:0px;}
.ms-1-left-bottom1 { background: url(../Images/history.png); background-position:center; background-size: 100% 100%; padding: 40px 0px; height:320px; }
.ms-1-left-bottom1 h4 { text-align:center; color:#fff; margin:0px; font-weight:bold; font-size:19px; }
.ms-1-left-bottom1 h5 { color:#fff; font-size:17px; font-weight:normal; margin:20px 0 0; text-align:center; }
.ms-1-left-bottom1:hover { opacity:0.8; transition:0.3s;}
.ms-1-left-bottom2 { background: url(../Images/serving.png); background-position:center; background-size: 100% 100%; padding: 40px 0px; text-align:center; color:#000; text-decoration:none; height:320px;}
.ms-1-left-bottom2:hover { opacity:0.8; transition:0.3s;}
.ms-1-left-bottom2 h4 { text-align:center; color:#000; margin:0px; font-weight:bold; font-size:19px; }
.ms-1-left-bottom2 h5 { margin:0px; font-weight:normal; font-size:17px; line-height:25px;}
.ms-1-left-bottom2 h6 { margin-top:10px; font-weight:600; font-size:16px;}
.ms-1-right-bottom ul li img { float:left; margin-right:20px; }

.ms-1-right-top1 { background: url(../Images/greeting.png); background-position:center; background-size: 100% 100%; padding: 40px 0px; text-align:center; color:#fff; text-decoration:none; height:327px;}
.ms-1-right-top2 { background: url(../Images/donation.png); background-position:center; background-size: 100% 100%; padding: 40px 0px; text-align:center; color:#fff; text-decoration:none; height:327px;}
.ms-1-right-bottom { background: url(../Images/content.png); background-position:center; background-size: 100% 100%; padding: 70px 0; text-align:center; color:#fff; text-decoration:none; height:659px; clear:both;}
.ms-1-right-top1 h4 { text-align:center; color:#000; margin:0px; font-weight:bold; font-size:19px; }
.ms-1-right-top2 h4 { text-align:center; color:#fff; margin:0px; font-weight:bold; font-size:19px; }
.ms-1-right-top1 h5 { color:#000; font-size:17px; font-weight:normal; margin:20px 0 0; }
.ms-1-right-top2 h5 { color:#fff; font-size:17px; font-weight:normal; margin:20px 0 0; }
.ms-1-right-top1 p { font-size:15px; margin:0px 0px 3px; }
.ms-1-right-top2 p { font-size:12px; margin:0px 0px 3px; }
.ms-1-right-top1:hover, .ms-1-right-top2:hover { opacity:0.8; transition:0.3s;}
.ms-1-right-bottom h2 { font-size: 45px; font-weight:bold; margin-top:10px; margin-bottom:2px; }
.ms-1-right-bottom .sermon-box { padding: 5px 35px; border:1px solid #fff; display:inline-block; font-size:16px; margin-top:15px;}
.ms-1-right-bottom .sermon-box:hover { background-color:#fff; transition:0.2s; color:#000;}
.ms-1-right-bottom ul { margin-top:40px;}
.ms-1-right-bottom ul li { text-align:left; font-size:15px; margin-bottom:15px; margin-left:-40px; }

#main-section2 { background-color:#F3F4F6; padding:50px 0px; }
#main-section2 .container { text-align:center; }
#main-section2 a { color: #4e4e4f; text-decoration:none;}
#main-section2 .ms2-box { padding: 0px 30px;}
#main-section2 .ms2-box h4 { float:left; font-size:17px; font-weight:bold; }
#main-section2 .ms2-box h5 { float:right; font-size:17px; font-weight:bold; }
#main-section2 ul { clear:both; margin-top:50px;}
#main-section2 li { font-size: 15px; padding:10px 0px 0px; border-bottom:1px solid #d4d4d4; text-align:left;}
#main-section2 li:hover p { color:#906b00; transition:0.2s all; }
#main-section2 li p { display:inline-block; margin:0; width:74%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
#main-section2 li span{ float:right;}
.ms2-quick li { border:1px solid #000 !important; padding:14px!important; margin-bottom:10px;}
.ms2-quick li:hover { background:white; transition:0.3s; }

#main-section3 { padding:50px 0px; text-align:center; }
#main-section3 li { display:inline-block; border:1px solid #000; margin:0 6px; width:275px; }
#main-section3 li img { width:100%; max-height:270px; }
#main-section3 li img:hover { opacity:0.7; transition:0.3s;}

#main-section4 {
    padding: 50px 0px;
    text-align: center;
}
#main-section4 li {
    display: inline-block;
    border: 1px solid #000;
    margin: 0px 6px;
    width: 275px;
    max-height: 150px;
    overflow: hidden;
}
#main-section4 li img {
    width: 100%;
    /*max-height: 270px;*/
    /*margin-top:-30px;*/
}
#main-section4 li img:hover {
    opacity: 0.7;
    transition: 0.3s;
}

@media (min-width:1200px) and (max-width:1499px) {

}

@media (min-width:993px) and (max-width:1199px) {
    #main-section3 li { width:21%;}
    #main-section4 li { width: 21%; max-height:116px;}
    #main-section4 li img { /*margin-top:-18px;*/}
    #main-section2 li p { width:65%; }
    .main_indroduce h1 { font-size:35px; }
    .ms-1-right-bottom h1 { font-size:35px; }
}


@media (min-width:768px) and (max-width:992px) {
        #main-section3 li { width:48%; margin-bottom:20px; }
        #main-section4 li { width:48%; margin-bottom:20px; max-height:203px;}
        #main-section4 li img { /*margin-top:-34px;*/ }
        #main-section2 li p { width:50%; }
    .main_indroduce h1 { font-size:35px; }
    .ms-1-right-bottom h1 { font-size:35px; }

}

@media (max-width:767px) {
    .ms-1-left-bottom1 hr {
    width: 100px;
    margin-bottom: 15px;
    margin-top: 15px;
    border-top: 2px solid #fff!important;
}
    .ms-1-right-top1 hr, .ms-1-left-bottom2 hr {
    width: 100px;
    margin-bottom: 15px;
    margin-top: 15px;
    border-top: 2px solid #000;
}


    .ms-1-left { margin-bottom:15px!important; }
    .ms-1-rigth { margin:0!important; }
    #main-mobile > div > div { margin:0; }
    #main-section1 { padding:30px 15px;}
    .main-title { font-size:17px; }
    #main-section3 li { margin: 0 0 15px;}
    #main-section4 li { margin: 0 0 15px;}
    .main_indroduce h1 { font-size:25px;}
    .main_indroduce p { font-size:17px;}
    .main_indroduce a { font-size:15px; }
    .ms-1-right-bottom h1 { font-size:25px;}
    .ms-1-right-bottom p { font-size:14px; }
    .ms-1-right-bottom a { font-size:15px; }
    .ms1-box { margin-top:15px; }
    .ms-1-right-top2 { margin-bottom:15px; }
    .ms-1-left-top, .ms-1-right-bottom { height:390px; }
    #main-section2 li { font-size:13px; }
    #main-section2 ul { margin-bottom:25px;}
}