﻿#sermon { padding:200px 0; background:#fff; }
#sermon h2 { font-size:18px; font-weight:normal; color:#333; margin:25px 0 140px; }
.sermon-1 { background:url(../Images/sermon_bg.png) no-repeat; background-size:cover; height:371px; width:687px; float:left; display:inline-block; position:relative;}
.sermon-2 { background-color:#114672; height:365px; display:inline-block; float:left; width:513px; position:relative; top:45px; padding:55px 40px; }
.sermon-2 h3 { margin:0; color:#fff; font-size:24px; display:inline-block; }
.sermon-2 .sermon-plus { float:right; font-size:32px; color:#fff; font-weight:bold; clear:both; position:relative; top:-10px; }
.sermon-2 ul { clear:both; margin-top:60px;}
.sermon-2 ul li { overflow:hidden; padding:10px 0; }
.sermon-2 ul li span { float:right; font-size:17px; color:#fff; }
.sermon-2 ul li p { font-size:17px; color:#fff; text-overflow: ellipsis; margin:0; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block; width:200px; float:left; }
#sermon hr { position:absolute; bottom:80%; border-bottom:3px solid #fff; left: 55%; top: 90px; z-index:100; width:50px;}
#sermon .sermon-desc { color: #fff; position: absolute; top: 26%; display: inline-block; right: 10%; width: 300px; }
#sermon .sermon-desc a { color:#fff; text-decoration:none; }
#sermon .sermon-desc a:hover { color:#3e75ab; transition:0.1s all; }
#sermon .sermon-desc h4 { margin:0; color:#fff; font-size:24px; display:inline-block; margin-bottom:5px;}
.sermon-date {  display:inline-block; font-size:17px; margin:0; }
#sermon .sermon-desc img { float:right; }
#sermon .sermon-desc img:hover { opacity:0.7; transition:0.3s all; }
.sermon-title { clear:both; font-size:25px; font-weight:bold; margin:30px 0; }
.sermon-cont { font-size:19px; line-height:30px; }
.sermon_new { position:absolute; width:100%;  bottom:-68px ;  left:0;  }
.sermon_new > a > div { float:left; width:50%;  text-align:center;  font-size:20px; color:#fff;  padding:20px 0;  border-top:1px solid #fff ;}
.sermon_new > a > div.new_left { background:#2F6066;  border-right:1px solid #fff; }
.sermon_new > a > div.new_left:hover { background:#2B5D90; transition:0.2s all; }
.sermon_new > a > div.new_right { background:#2B5D90;  }
.sermon_new > a > div.new_right:hover { background:#2F6066; transition:0.2s all; }


#main1 { padding:200px 0; background:#E9EEF4; }
#main1 > div > div > div { padding:0 50px;}
#main1 h2 { font-size:18px; font-weight:normal; color:#333; margin:25px 0 140px; }
#main1 .main1-box { background:#fff; padding:50px; position:relative; }
#main1 .main1-box .plus { position:absolute; top:45px; right:50px; }
#main1 .main1-box h3 { margin:0; font-weight:bold; font-size:19px; border-bottom:2px solid #000; padding-bottom:15px;}
#main1 .main1-box ul { margin-top:40px;}
#main1 .main1-box a li { overflow:hidden; padding:0 0 20px; }
#main1 .main1-box a:last-child li { padding:0; }
#main1 .main1-box a:hover { color:#114672; transition:0.2s all; }
#main1 .main1-box a li p { font-size:17px; float:left; margin:0; color:#333; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display:block; width:180px; }
#main1 .main1-box a li:hover p { color:#114672; transition:0.2s all; font-weight:bold; } 
#main1 .main1-box a li:hover span { color:#114672; transition:0.2s all; font-weight:bold; } 
#main1 .main1-box a li span { float:right; font-size:17px; color:#333;}

#main2 { background:url(../Images/gallery_bg.png) no-repeat; background-size:100% 100%; height:980px; padding:240px 0; }
#main2 h2 { font-size:18px; font-weight:normal; color:#fff; margin:25px 0 140px; }
#main2 > div > div > a > div { padding:0 8px; }
#main2 > div > div > a > div img:hover { opacity:0.7; transition:0.2s all; }
#main2 a img { width:100%; margin-bottom:20px; }
#main2 a { color:#fff; }
#main2 a:hover { font-weight:bold; transition:0.2s all; }
#main2 a p { margin:3px 0; font-size:15px; }
#main2 > div > div > a > div img { height:189px; }

#main3 { padding:120px 0; background:#E9EEF4; }
#main3 .row2 { margin-bottom: 60px; }
#main3 img { width:100%; }
#main3 .main3-box { padding:0 90px;}
#main3 h2 { font-size:27px; margin:10px 0 15px; font-weight:bold; }
#main3 h2 span { font-size:20px; }
#main3 .main3-box2 { padding-top:75px;  }
#main3 ul { border-top:1px solid #333; margin-top:15px; margin-bottom:15px;  }
#main3 ul li:first-child { margin:15px 0 0; }
#main3 ul li { overflow:hidden; padding:5px 0;  }
#main3 ul li p { float:left; font-size:17px; margin:0; color:#666666; }
#main3 ul li span { float:right; display:inline-block; font-size:17px;  color:#666666;}

@media (min-width:1200px) and (max-width:1499px) {
    .sermon-1 { width:657px; }
}

@media (min-width:993px) and (max-width:1199px) {
    .sermon-1 { width:575px; }
    .sermon-2 { width:395px; }
    #main3 .main3-box { padding:0 55px; }
    #main3 h2 { font-size:24px;}
    #main3 ul li p { font-size:16px; }
    #main3 ul li span { font-size:16px; }
}

@media (min-width:768px) and (max-width:992px) {
    #sermon hr { position:absolute; bottom:80%; border-bottom:3px solid #fff; left: 55%; top: 90px; z-index:100; width:50px; display:none; } 
    #main3 .main3-box { padding:0; }
    #main3 h2 { font-size:20px;}
    #main3 h2 span { font-size:18px; }
    #main3 ul li p { font-size:16px; }
    #main3 ul li span { font-size:16px; }
    #main3 .row2 { margin-bottom:20px;}
    #main2 { height:auto; }
    #main2 > div > div > a > div { margin-bottom:15px; }
    #main2 { padding:120px 0; }
    #main1 .main1-box { padding: 30px 15px;}
    #main1 > div > div > div { padding:0 15px; }
    #main1 .main1-box .plus { position: absolute; top: 30px; right: 20px; }
    .sermon-1 { width:100%; }
    .sermon-2 { width:100%; top:0; }
}



@media (max-width: 767px) {
    .sermon_new { bottom:-54px; }
    .sermon_new > a > div { font-size:17px; padding:15px 0; }
		    .sermon-1 { width:100%; height:260px; }
	    .sermon-mobile {     background: url(../Images/bg.png) no-repeat; position:realtive; }
	    .mob-img { z-index:0; position: absolute;     max-width: 260px; display:block!important;
    bottom: 0;
    left: 0;}
	
	
	#main2 > div > div > a > div img { height:auto; }
	.navbar-nav { width:100%; top:0; }
	.navbar-default .navbar-nav>li>a { font-size:16px; }
	#main1 .main1-box a li p { font-size:15px; }
	#main1 .main1-box a li span { font-size:15px; }
		#main1 .main1-box a li { padding: 0 0 10px; }
		#main1 .main1-box ul { margin-top:20px; }
    .sermon-2 { height:auto;   }
    .sermon-2 ul { margin-top:30px; }
    .sermon-2 ul li p { font-size:15px; }
    .sermon-2 ul li span { font-size:15px; }
    .sermon-2 h3 { font-size:20px; }
    #sermon .sermon-desc h4 { font-size:18px; }
    .sermon-cont { font-size:16px; line-height:25px;}
    #sermon .sermon-desc { top:15%; text-align:right; }
    .sermon-title { font-size:20px; margin:20px 0; }
    #main1 h2 { margin:25px 0 50px; }
    #main2 h2 { margin:25px 0 50px; }
    #main1 { padding:50px 0; }
    #main1 .main1-box { margin-bottom:15px; }
    #sermon hr { position:absolute; bottom:80%; border-bottom:3px solid #fff; left: 55%; top: 90px; z-index:100; width:50px; display:none; } 
    #sermon { padding:50px 0 130px; }
    .text-center { padding:0 15px; }
    #sermon h2 { font-size:17px; margin:25px 0 80px; }
    .text-center > img { max-width:150px;  }
    #main2 > div > div > a > div { padding:0 15px; }
    #main3 .main3-box { margin:30px 0; }
        #main3 .main3-box { padding:0; }
    #main3 h2 { font-size:20px;}
    #main3 h2 span { font-size:18px; }
    #main3 ul li p { font-size:16px; }
    #main3 ul li span { font-size:16px; }
    #main3 .row2 { margin-bottom:20px;}
    #main2 { height:auto; }
    #main2 > div > div > a > div { margin-bottom:15px; }
    #main2 { padding:80px 0; }
    #main1 .main1-box { padding: 30px 15px;}
    #main1 > div > div > div { padding:0 15px; }
    #main1 .main1-box .plus { position: absolute; top: 30px; right: 20px; }
    
    .sermon-2 { width:100%; top:0; }
}


@media (max-width: 500px) {
	
}