.p-0 { padding:0; }
.p-1 { padding:0 8px; }

#main-1 { padding:50px 0; }
#sermon { background:url(/userdata/ganamhp/layouts/ganamnew_layout/Images/sermon_bg.png) no-repeat; background-position:center; height:350px; background-size: 100% 100%; padding:25px 40px;}
#sermon .pastor { font-size:18px; color:#fff; margin:0px 0px 10px; display:inline-block;    vertical-align: middle;}
#sermon .title { font-size: 25px; color: #fff;margin: 0px 0px 30px;            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3; 
            -webkit-box-orient: vertical;}
#sermon .bible { font-size:18px; color:#fff; margin:0}
#sermon .date { font-size:20px; color:#fff; margin:0 0 20px; }
#sermon{position:relative;text-align:left; }
#sermon a {text-decoration:none; color:#fff; }
#sermon a:hover { font-weight:bold; transition:0.3s all ease;}
#sermon .sermon-div{position:absolute;top:80px;width:65%; cursor:default;}
#sermon .sermon-div h5 a { display: inline-block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sermon .sermon-play-img { padding-left: 50px; }
#board{ position:relative; background:#03529D; background-position:center; height:350px; background-size: 100% 100%; padding:25px 40px; }
#board .board-div{position: absolute;left:0;top:0; width:100%;cursor: default; height:100%; }
#board .board-sermon{font-size:20px;color:white;margin-bottom:30px;}
.board-title .left-title{ font-size: 18px; float: left;  text-decoration: none; color: white; display: inline-block; width: 350px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-title .right-date{ font-size:18px; float:right; text-decoration:none; 	color:white;}
.board-title{ line-height:2.5; }
#board ul { height:100%; }
#board li { overflow:hidden; height:25%; padding:15px 0; text-align:center; border-bottom:1px solid #fff; }
#board li div { max-width:200px; text-align:left; margin:0 auto; }
#board .li1 { background:#7ABDFF;  }
#board .li1 img { position:relative; top:2px;}
#board .li1 p { position:relative; top:7px; }
#board .li1:hover { background-image:linear-gradient(45deg,#7ABDFF,#9779FF); transition:0.2s all; }
#board .li2 { background:#5fd2f7;  }
#board .li2 img { position:relative; top:4px;}
#board .li2 p { position:relative; top:7px; }
#board .li2:hover { background-image:linear-gradient(45deg,#5fd2f7,#9779FF); transition:0.2s all; }
#board .li3 { background:#00b2b4;  }
#board .li3 img { position:relative; top:4px;}
#board .li3 p { position:relative; top:7px; }
#board .li3:hover { background-image:linear-gradient(45deg,#00b2b4,#9779FF); transition:0.2s all; }
#board .li4 { background:#98ca3a;  }
#board .li4 img { position:relative; top:4px;}
#board .li4 p { position:relative; top:7px; }
#board .li4:hover { background-image:linear-gradient(45deg,#98ca3a,#9779FF); transition:0.2s all; }
#board li img { position:relative; }
#board li p { font-size:20px; color:#fff; display:inline-block; margin-left:20px; }


#main-2 { padding:50px 0; background-color: #f0f0f0; }
#main-2 h1 { margin:0 0 30px; font-size:25px; font-weight:bold; display:inline-block;}
#main-2 .plus { float:right; }
.gallery-box { position:relative; overflow:hidden; }
.gallery-box img { height:200px; width:100%; }
.gallery-box img:hover { transform:scale(1.1); transition:0.3s all; }
.gallery-bottom { position:absolute; bottom:0; padding:15px; background:rgba(0,0,0,0.7); width:100%; }
.gallery-bottom p { color:#fff; margin:0; }
.gallery-bottom .title { float:left; font-size:15px; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;  width:150px; text-align:left; }
.gallery-bottom .date { float:right; font-size:15px; }
.box-title { position:absolute; top:0; right:0; display:inline-block; padding:5px 15px; font-size:15px; color:#fff; background:#03529D;}
.board-title .left-title:hover { font-weight:bold; }

#main-3 { padding:50px 0; }
.main3-img { width:100%; }
.main3-img:hover { opacity:0.7; transition:0.3s all; }
.main3-box h2 { font-size:18px; display:inline-block; float:left; margin:25px 0 15px; clear:both; font-weight:bold; }
.main3-box .plus { float:right; margin:25px 0 15px;}
.main3-box ul { clear:both; padding-top: 20px; border-top: 1px solid #eee;}
.main3-box li { clear:both; padding:8px 8px; overflow:hidden; }
.main3-box li:hover { background:#f2f2f2; transition:0.2s all; }
.main3-box ul a { color:#333; text-decoration:none; }
.main3-box li p { font-size:15px; float:left; margin:0; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;  width:150px; text-align:left; }
.main3-box li span { font-size:15px; float:right;}

.main3-top { overflow:hidden; padding:20px 0; }
.main3-top li { float:left; width:33.333%; text-align:center; border-right: 1px solid #979797;}
.main3-top li img { margin:0 0 5px; }
.main3-top li p { font-size:17px; font-weight:bold; color:#333; margin:15px 0; }
.main3-top li h5 { margin:0; color:#333; line-height:25px; font-size:15px; }
.main3-top a { text-decoration:none; }
.main3-top a:hover { color:red; transition:0.3s all; }
.main3-bottom ul { margin-top:35px; text-align:center; width:100%; overflow:hidden; padding:0 10px; }
.main3-bottom ul li { display:inline-block; float:left; height:120px;  }
.main3-bottom ul li h4{ color:white; margin:0 0 8px; }
.main3-bottom p { font-size:14px; color:#fff; margin:5px 0; }
.main3-bottom ul a { text-decoration:none;}
.main3-bottom ul li:nth-child(1) { background:url(../Images/banner1.jpg); background-position:center; background-repeat:no-repeat; background-size:100% 100%; width:230px; padding:10px 0px;}
.main3-bottom ul li:nth-child(2) { background-color:#5fd2f7; background-position:center; background-repeat:no-repeat; background-size:100% 100%; width:110px;}
.main3-bottom ul li:nth-child(3) { background-color:#00b2b4; background-position:center; background-repeat:no-repeat; background-size:100% 100%; width:110px;}
.main3-bottom ul li:nth-child(4) { background-color:#98ca3a; background-position:center; background-repeat:no-repeat; background-size:100% 100%; width:110px;}
.main3-bottom ul li:nth-child(2) img { margin:22px 0px 15px;}
.main3-bottom ul li:nth-child(3) img { margin:28px 0px 15px;}
.main3-bottom ul li:nth-child(4) img { margin:28px 0px 15px;}
.main3-bottom h5 { color:#fff; margin:0px 0px 10px; font-size:17px;}



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

@media (min-width:993px) and (max-width:1199px) {
    .main3-bottom ul li:nth-child(1) {  background-position:center; background-repeat:no-repeat; background-size:100% 100%; width:225px; padding:10px 0px;}
    .main3-bottom ul li:nth-child(2) { background-color:#5fd2f7; background-position:center; background-repeat:no-repeat; background-size:100% 100%; width:80px;}
.main3-bottom ul li:nth-child(3) { background-color:#00b2b4; background-position:center; background-repeat:no-repeat; background-size:100% 100%; width:80px;}
.main3-bottom ul li:nth-child(4) { background-color:#98ca3a; background-position:center; background-repeat:no-repeat; background-size:100% 100%; width:80px;}
.main3-box li p { width:100px; }
.gallery-bottom .title { width:100px; }
#sermon .sermon-div { width:50%; }
}


@media (min-width:768px) and (max-width:992px) {
    #main-2 .row { margin:0; }
    .gallery-box { margin-bottom:15px; }
    .main3-top { margin-top:30px; }
    .main3-bottom ul { width:580px; margin:35px auto 0; }
}

@media (max-width:767px) {
	#sermon { height:230px; }
	#sermon .sermon-div { top:40px; }
	#sermon .title { font-size:20px; width:150px; }
	#sermon .date { font-size:18px; }
	.main3-top li h5 { font-size:13px; }
    #board .board-sermon { margin-bottom:15px; }
    #board { height:auto; overflow:hidden; padding:0; }
    #board .board-div { position:relative; }
    .board-title .left-title { font-size:16px; }
    .board-title { line-height:2;}
    #board .board-div { padding:0; overflow:hidden; }
    .board-title .left-title {width:100%; }
    #sermon .sermon-div { width:100%; }
    .p-0 { padding:0 15px; }
    .p-1 { padding:0 15px; }
    #main-2 h1 { font-size:20px;}
    #main-2 .row { margin:0; }
    .gallery-box { margin-bottom:15px; }
    .main3-top { margin-top:30px; }
    .main3-bottom ul { margin:35px auto 0; }
    .main3-box { margin-bottom:15px; }
    .main3-top li { width:33.333%; border-right:0; margin-bottom:15px; }
    .main3-bottom ul li:nth-child(1) {width:100%; }
    .main3-bottom ul li:nth-child(2) { background-color:#5fd2f7; background-position:center; background-repeat:no-repeat; background-size:100% 100%; width:33.333%;}
    .main3-bottom ul li:nth-child(3) { background-color:#00b2b4; background-position:center; background-repeat:no-repeat; background-size:100% 100%; width:33.333%;}
    .main3-bottom ul li:nth-child(4) { background-color:#98ca3a; background-position:center; background-repeat:no-repeat; background-size:100% 100%; width:33.333%;}
}