/*
* Groups CSS
*-------------------------------------
*
* Version: 150516A
*
* Author: Abundant Blessing Church Digital Team
*
* Notes: including all content structures of groups page
*
*/

#groups_main_intro{
	background:url(../img/groups/groups_bg01.jpg)no-repeat fixed;
	margin: 0 auto;
	padding: 0;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	overflow:hidden;
	}
.intro_content01{background:url(../img/groups/groups_title_large.png) no-repeat;}
.groups_index{
	height:300px;
	margin:200px auto;
	display:table;
	}
.index_pic01{
	background:url(../img/groups/index_pic01.png) no-repeat;
	float:left;
	opacity:0.8;
	}
.index_pic01 a{background:url(../img/groups/index_pic01_inv.png) no-repeat;}
.index_pic02{
	background:url(../img/groups/index_pic02.png) no-repeat;
	float:left;
	opacity:0.8;
}
.index_pic02 a{background:url(../img/groups/index_pic02_inv.png) no-repeat;}
.index_pic03{
	background:url(../img/groups/index_pic03.png) no-repeat;
	float:left;
	opacity:0.8;
}
.index_pic03 a{background:url(../img/groups/index_pic03_inv.png) no-repeat;}
.index_pic a{
	opacity:0;
	-webkit-transition: opacity .25s ease-in;
	-moz-transition: opacity .25s ease-in;
	-o-transition: opacity .25s ease-in;
	transition: opacity .25s ease-in;
}
.index_pic a:hover{opacity:0.6;}
.groups_index >div>a{
	display:block;
	overflow:hidden;
	height:102px;
	width:182px;
}
#groups_senior{
	background:url(../img/groups/bg01.jpg) no-repeat;
	padding:20px 0 0 0;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	-webkit-box-shadow:0 1px 4px 0px #111;
	-o-box-shadow:0 1px 4px 0px #111;
	-box-shadow:0 1px 4px 0px #111;
}
#groups_university{
	background:url(../img/groups/bg02.jpg) no-repeat fixed;
	padding:20px 0 0 0;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	-webkit-box-shadow:0 1px 4px 0px #111;
	-o-box-shadow:0 1px 4px 0px #111;
	-box-shadow:0 1px 4px 0px #111;
}
#groups_adult{
	background:url(../img/groups/bg03.jpg) fixed;
	padding:20px 0 0 0;
	-webkit-box-shadow:0 1px 4px 0px #111;
	-o-box-shadow:0 1px 4px 0px #111;
	-box-shadow:0 1px 4px 0px #111;
}
.group_content_wrap{margin:0 auto;display:table;overflow:scroll;}
.content_name{float:left;margin:0 30px;}
.senior_content{padding:20px 0 0 0;height:600px;}
.university_content{padding:20px 0 0 0;height:760px;}
.adult_content{padding:20px 0 0 0;height:760px;}
.lineh_b3p~p{padding:0 0 3px 0;}
.content_time{float:left;margin:0 30px;}
.content_add{float:left;margin:0 30px;}
/*
//===============================
// SCREEN (Smaller then 979)
//===============================
*/
@media (max-width: 979px) {
#groups_main_intro{height:700px;width:980px;overflow:hidden;}
#groups_senior,#groups_university,#groups_adult{width:980px;overflow:hidden;}
.senior_content{height:430px;}
.university_content{height:570px;}
.adult_content{height:540px;}
.intro_content01{height:150px;margin:80px auto 0;}
.index_pic01, .index_pic02, .index_pic03{background-size:160px auto; width:160px; height:90px; margin:0 60px;}
.groups_index >div>a{background-size:160px auto; width:160px; height:90px;}
}
/*
//===============================
// SCREEN (Between 980 to 1099)
//===============================
*/
@media (min-width: 980px) and (max-width: 1099px) {
#groups_main_intro{height: 700px;}
.senior_content{height:430px;}
.university_content{height:570px;}
.adult_content{height:540px;}
.intro_content01{height:150px;	margin:80px auto 0;}
.index_pic01, .index_pic02, .index_pic03{background-size:160px auto; width:160px; height:90px; margin:0 80px;}
.groups_index >div>a{background-size:160px auto; width:160px; height:90px;}
}
/*
//===============================
// SCREEN (Between 1100 to 1249)
//===============================
*/
@media (min-width: 1100px) and (max-width: 1249px) {
#groups_main_intro{height: 700px;}
.senior_content{height:460px;}
.university_content{height:610px;}
.adult_content{height:580px;}
.intro_content01{height:150px;	margin:80px auto 0;}
.index_pic01, .index_pic02, .index_pic03{background-size:160px auto; width:160px; height:90px; margin:0 80px;}
.groups_index >div>a{background-size:160px auto; width:160px; height:90px;}
}
/*
//===============================
// SCREEN (Between 1250 to 1366)
//===============================
*/
@media (min-width: 1250px) and (max-width: 1366px) {
#groups_main_intro{height: 700px;}
.senior_content{height:550px;}
.university_content{height:740px;}
.adult_content{height:660px;}
.intro_content01{height:150px;	margin:80px auto 0;}
.index_pic01, .index_pic02, .index_pic03{background-size:160px auto; width:160px; height:90px; margin:0 80px;}
.groups_index >div>a{background-size:160px auto; width:160px; height:90px;}
}
/*
//===============================
// SCREEN (Between 1367 to 1599)
//===============================
*/
@media (min-width: 1367px) and (max-width: 1599px) {
#groups_main_intro{height: 850px;}
.intro_content01{height:150px;	margin:60px auto 0;}
.index_pic01, .index_pic02, .index_pic03{width:182px; height:102px; margin:0px 120px 0;}
}
/*
//============================
// SCREEN (Bigger then 1600)
//============================
*/
@media (min-width: 1600px) {
#groups_main_intro{height: 1000px;}
.intro_content01{height:150px;	margin:60px auto 0;}
.index_pic01, .index_pic02, .index_pic03{height:102px;	width:182px; margin:40px 160px 0;}
}