footer {
    margin:3em 0 0 0; font-size:0.85em;
}

footer img { width:110px; margin-bottom:0.5em; }
footer .version { padding:1em 0 0.5em 0; }
footer a:hover { text-decoration:underline; }

.card {
    background:#fff; list-style:none; float:left; cursor: pointer;        
    width:23%; height: 290px; margin:10px 1%;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, .2);
}
.card:hover {
        
    background: #FFE;
    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
    
.cardImg { width: 100%; height: 122px; overflow: hidden; }    
.cardInfo { padding:10px 15px; text-align:left; }
.cardInfoTitle { color:#333; height: 45px; padding:0; font-weight: bold; }
.cardInfoPastorName { color:#999; padding:10px 0; font-size:14px; }
.cardInfoDate { color:#999; padding:0px 0; font-size:12px; }
.cardInfoPrice { float: right; padding:10px 0px; }    
.cardInfoPrice1 { color:#999; font-size: 14px; text-decoration: line-through; }
.cardInfoPrice2 { color:#222; font-size: 22px; padding-left:10px; }
    
.pastorCardTitle { color:#333; font-size: 18px; padding:0; font-weight: bold; }
.pastorCardInfo { color:#333; font-size: 14px; padding:0; }
    
.listCard { border:1px solid #ddd; cursor: pointer; }
    
.listCard:hover {
    background: #f4f4f4;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}    
.listCardInfo { padding:10px 15px; text-align:left; }
.listCardTitle { color:#333; padding:0; font-weight: bold; }
        
.ibText { border-top: 1px solid #ddd; padding: 20px 15px; font-size:14px; text-align: left; }
.ibInfo { padding:5px 10px 5px 5px; background:#fff; }
.ibimg {
	width: 100%; height: auto; cursor:pointer;
	border-top: 1px solid #ddd; padding: 0px; margin-bottom: 0px;
}

.bbkey { float:right; font-weight:none; color:#666; font-size:14px; line-height:35px; }

#pageName { font-size:40px; padding:0; }
#userName { font-size:20px; padding:0; }

.page { width: 100%; display: none; min-height: 800px; }

.pageData { float:left; color:#666;  font-size:14px; line-height:35px; }
.pageData img { height:35px; width:35px; margin:0; margin-right:10px; background:none; border:none; float:left; }    
.pageData span { font-weight:bold; line-height:35px; }
        
#searchBox {
	float:left; border-radius: 5px; 
	margin:4px 0 5px 200px; padding:0px 10px; border:none;
	background: rgba(220, 220, 220, .5);
}

#searchInput {
	height:35px; font-size:18px; background:none; padding:5px 10px; border:none; outline: none;
}
#searchInputActive {
	height:35px; float:left; font-size:20px;
	padding:5px 20px; border:none; background: rgba(220, 220, 220, 1);
}
        

#viewFrameoverlay { z-index: 2000; }  
#viewFrameoverlay { z-index: 2000; }  

#searchListBox { margin: 0; padding: 0;}    
    
#searchListBox ul { list-style: none; background: #000; }    
#searchListBox li {
    font-size:18px; background:none; padding:5px 10px;
    border-bottom: 1px solid #ccc; list-style:none; cursor: pointer;
}    
#searchListBox li:hover { background: #F4F4F4; }

#searchListBox a { cursor: pointer; }
#searchListBox a:hover { background: #F4F4F4; }
    
.searchTitle { color:var(--pri-lite); }
.searchTag { color:#222; font-size:14px; }
    
.listTitle { color:var(--pri-lite); font-size: 24px; text-align: center; margin:20px 0 5px 0; }
.container { width:1024px; display: block; text-align:left; }
/* .container ul { margin: 0; padding: 0; display: block; } */

.couseBox { float:left;  margin:20px 0;
    width:600px; text-align:left; padding:20px; font-size:18px; display: block; 
}
.listBox { padding:10px; margin:20px 0; background:#fff; }
    
.btn_ {
    cursor: pointer; padding:15px 30px; font-size:18px; line-height: 18px;
    -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
    display: inline-block;
}

.page { display: none; }
.btnA { color:#fff; background:var(--pri-color); }
.btnA:hover { background:var(--pri-color); }

#profilePic {
    background-size:cover; background-position:center center; margin:0 auto;
    width:100px; height:100px; overflow:hidden;
    /* Rounded Corners */ -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, .3);
    
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    
}

#profilePic:hover {
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 1);
}

.profileBox { float:left; padding:0; margin:20px; }
.porfileInfoBox { float:left; text-align:left; margin:20px; }

#pageName { font-size:40px; padding:0; color: var(--hl-color); }
#pageName:hover { opacity: 0.8; }
#userName { font-size:20px; padding:0; }
#userName:hover { color: var(--hl-color); }

#pastorContentBox { background: none; margin:20px 0; width: 924px; }

.pageBtn { cursor: pointer; }
.tabBtn { padding:10px 10px 7px 10px; border-bottom:3px solid #f4f4f4; cursor: pointer; }
.tabBtn:hover { color:var(--pri-lite); border-bottom:3px solid var(--pri-lite); }
.tabBtnActive { color:var(--pri-lite); border-bottom:3px solid var(--pri-lite) }
    
#shareDrop { width:280px; }
    
.homeLogoText { font-family: 'Montserrat',sans-serif; color:#fff; text-shadow: 2px 2px 9px rgba(84, 88, 88, 1); }
    
.lessonContainer { width:800px; text-align:left; padding:200px 0 60px 0; background: #fff; }
    
.screenContainer {
    position: fixed; top:50px; width:100%; padding:0; margin:0; background:#222; z-index: 1000;
}

.screenWrap { width:1024px; }
.screenFloat { position: fixed; float: right; top:5px; right:5px; }
.screenFull { width:800; height: 450px; }
.screenVideoFull { width:512; height:281.25;  }


.screenPip { position: absolute; margin-top:-130px; margin-right:-545px; width:200px; height:112.5px; }
.screenRight { float: right; width:512px; height:281.25px; background:#111; }
.screenLeft { float: left; width:512px; height:281.25px; background:#111; }

.ldInput { font-size: 16px; line-height: 24px; height: auto; padding:10px 20px; margin: 10px 0; background: #ffffee; border: 1px solid #ddd; }
.ipRes { width:30px; height:30px; float:right; margin: 7px 0 0 0; }
    
#lessonTitle { font-size:26px; line-height: 38px; font-weight: bold; margin:30px 0 0 0; color:var(--pri-color); padding-left: 10px; }
    
#lessonData { padding:0px; }
#lessonData ul { padding:0px; margin:0; }
#lessonData li { list-style: none; padding:5px 10px; font-size: 16px; line-height: 26px; }
#lessonData h2 { font-weight: bold; font-size: 22px; line-height: 38px; }
#lessonData h3 { font-weight: bold; font-size: 18px; line-height: 28px; }
#lessonData quote{ padding:10px; margin:20px 0;  display:block;  white-space:normal; background: #f4f4f4; border-left: 2px solid var(--pri-color); }
#lessonData quote2{ padding:10px 20px 0px 20px; display:block; white-space:normal; font-style: italic; }
    
.screenBtn {
    display: none; list-style: none; padding:5px 10px; border: 1px solid #ccc; margin: 3px;
    border-radius: 7px; cursor: pointer; background: #03A99D; color: #fff;
}

.screenBtn:hover { border: 1px solid #047791; background: #047791; }
.formBtnBox { display:none; margin:20px auto; z-index:5000; }
    
.floatBtn {
    list-style: none; padding:5px 10px; margin: 3px;
    border: 1px solid #ddd;
    color: #03A99D; background: #f4f4f4;
    cursor: pointer; border-radius: 7px;  text-align: center;
}

.floatBtnActive { background: #03A99D; color: #fff; border: 1px solid #03A99D; }
.floatBtn:hover { color:#fff; background: #03A99D; border: 1px solid #03A99D; }

.image { width: 100%; margin: 20px 0; }
.bibleTitle { font-weight: bold; }

[contenteditable=true]:empty:before{
    content: attr(placeholder); color: #999; display: block; /* For Firefox */    
}

[contenteditable]:focus { outline: 0px solid transparent; }

#topbarRes {
    position: fixed; top:14px; margin-left:auto; margin-right:auto; width:100%; position:fixed; z-index:5001; color:#f0f0f0; text-align: center; display: none;
}

/*#RecentAdded { background: #ccc; }*/

#topUserName { margin-top:15px; font-size:16px; color:#fff; }
#topUserName:hover { color:#fe0; }
.bodywrap { min-height: 500px; }
    
@media screen and (max-width: 1024px) {
    .container { width:100%; padding: 0; }
    /* .container ul { margin: 1%; padding: 0; } */
}
    
@media screen and (max-width: 768px) {
    #fv { margin: 0 30px; }
    .lessonContainer { width:100%; }
    .pageLessonList { margin:5%; }
    .couseBox { width: 90%; padding:0; margin: 5%; }
}
    
@media screen and (max-width: 415px) {
    
    #fv { margin: 0 2%; }
    
    #fv bible { padding-left: 0; padding-right: 0; }
    #fv question q_card { padding: 10; }
        
    .lessonContainer { width:100%; }
    #shareDrop { width:100%; }
        
    #pageName { font-size:30px; }
    #userName { font-size:20px; }
        
    .pageLessonList { margin:   5%; }
    #shareDrop { width:100%; }
    #profileBox { width:auto; margin: 5%; padding: 0; }
        
    .card { width:48%; height: 290px; margin:10px 1%; }

    .mtitle { display: none; }

}

@media screen and (max-width: 320px) {
    .card {
        width:96%; height: 290px; margin:10px 2%;
    }
}



.cardPlaceholder {
    list-style: none;    
}


.cardPh {
    background-color : var(--grey-lighten-4);
    border-radius : .25em;
    margin : .5em 0;
    width : 100%;
}
.cardPh .item {
    background-image : linear-gradient(92deg, rgba(85, 102, 119, .1), rgba(85, 102, 119, .17)15%, rgba(85, 102, 119, .1)30%);
    background-size : 450px 100%;
    animation : placeholder-anim 2s ease-in-out infinite
}
.cardPh .titlePh {
    height : 18px
}
.cardPh .textPh {
    height : 14px
}
.cardPh .smallPh {
    height : 12px
}
.cardPh .btnPh {
    height : 35px
}