/*	###############################################################################
	##########################      TOP MENU STYLES      ##########################
	###############################################################################
*/


.watch_live_top
{
	display: block;
	height: 38px;
	margin-bottom: -15px;
	top: -14px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	z-index: -1;
}



#top_block
{
	width: 100%;
/*	background-color: rgba(19, 40, 78, 0.9);*/
	background-color: rgba(255, 255, 255, 0.80);
	position: fixed;
	z-index: 10;
	height: 65px;
	top: 0px;
	-webkit-transition: all 500ms ease-out 0s;-moz-transition: all 500ms ease-out 0s;-o-transition: all 500ms ease-out 0s;transition: all 500ms ease-out 0s;
	border-bottom: 2px solid #3bbaa9;
}


#hp_logo
{

	width: 164px;
	position: relative;
	margin-right: 5px;
}


#pinedale
{
	font-family: 'GraphieL';
	font-size: 19px;
	font-weight: 500;
	position: absolute;
	top: 50%;
	left: 24px;
	transform: translateY(-50%);
	cursor: pointer;
	color: #fff;
}

.church
{
	font-family: 'GraphieEL';
	font-size: .7em;

}


.top_bar_item
{
	font-size: 16px;
	font-weight: 500;
	position: relative;
	float: right;
	display: inline-block;
	padding-right: 25px;
	padding-top: 15px;
	color: #13284e;
	cursor: pointer;
	font-family: 'GraphieL';
	text-align: center;
	line-height: 1.2;

}

#menu_hamburgerXX
{
	font-size: 16px;
	font-weight: 500;
	position: relative;
	float: right;
	display: inline-block;
	padding-right: 10px;
	padding-top: 10px;
/*	position: absolute;
	top: 50%;
	right: 24px;
	transform: translateY(-50%);
*/	color: #fff;
	cursor: pointer;
	font-family: 'GraphieL';

}

#giveXX
{
	font-size: 16px;
	font-weight: 500;
	position: relative;
	float: right;
	display: inline-block;
/*	position: absolute;
	top: 50%;
	right: 124px;
	transform: translateY(-50%);
*/	color: #fff;
	cursor: pointer;
	font-family: 'GraphieL';

}











/*	###############################################################################
	##########################     SIDE MENU STYLES      ##########################
	###############################################################################
*/


.main_links a
{
	color: #0092c7;

}

.main_links a:hover
{
	color: #333;
	text-decoration: none;

}


.sub_menus a
{
	color: #ffffff;
}
.sub_menus a:hover
{
	color: #52d1ff;
	text-decoration: none;

}


#menu_screen
{
	width: calc(100% - 50px);
	float: right;
	height: 100%;
	position: fixed;
	display: none;
	top: 0;
	left: 0;
	cursor: pointer;
	background-color: rgba(0, 187, 255, 0.2);
	z-index: 10;
}

.scc_hint {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted black;
}

.scc_hint .hint_container {
	opacity: 0;
	width: 150px;
	background-color: #333;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px 15px;

	/* Position the tooltip */
	position: absolute;
	top: 50%;
	left: calc(50% - 100px);
	transform: translate(-50%, -50%);
	z-index: 9999999999;
	-webkit-transition: opacity 500ms ease-out 0s;-moz-transition: opacity 500ms ease-out 0s;-o-transition: opacity 500ms ease-out 0s;transition: opacity 500ms ease-out 0s;
}

.hint_text
{
/*	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
*/
	width: 100%;
	font-family: 'GraphieL';
	font-size: 18px;
	text-transform: uppercase;
	display: inline-block;
	padding: 15px 5px;
}

.scc_hint:hover .hint_container
{
	opacity: 1;
	-webkit-transition: opacity 300ms ease-out 0s;-moz-transition: opacity 300ms ease-out 0s;-o-transition: opacity 300ms ease-out 0s;transition: opacity 300ms ease-out 0s;
}




#main_menu
{
	width: 50% ;
	max-width: 175px;
	height: 100%;
	color: #898989;
	z-index: 99999;
	position: fixed;
	top: 0px;
	right: 0px;
	display: none;
/*	border-left: 7px solid #333;*/
	background-color: #ffffff;
	/*background-image: url('/assets/home-3/menu-bg4.png');*/
}

#main_menu_container
{
	display: none;
	margin-bottom: 20px;
	padding-top: 35px;
	width: 100%;
	height: 100%;
	background-color: #fff;
	float: right;
	position: relative;

}
.top_menu_button
{

}
.side_link
{
	cursor: pointer;
	color: #0e294d;
	margin-bottom: 10px;
	font-family: GraphieL;
	font-size: 15px;
	font-weight: 700;
	font-style: normal;
	text-transform: uppercase;
	line-height: 20px;
	padding: 5px;
	text-align: right;
	padding-right: 15px;
	-webkit-transition: all 800ms ease-out 0s;-moz-transition: all 800ms ease-out 0s;-o-transition: all 800ms ease-out 0s;transition: all 800ms ease-out 0s;


}

.top_menu_button:hover, .top_menu_button:active
{
	color: #39caff !important;
	text-decoration: none;

}


.sub_menus
{
	display: none;
	width: 50%;
	max-width: 195px;
	/* height: 100%; */
	background-color: #0e294d;
	position: fixed;
	top: 35px;
	right: 174px;
	padding: 30px 15px 20px 10px;
	font-family: GraphieR;
	font-size: 15px;
	font-weight: 300;
	font-style: normal;
	color: #fff;
	text-transform: uppercase;
	line-height: 15px;
	text-align: center;
	z-index: 11;
	border-bottom: 7px solid #2d7eea;
	border-left: 7px solid #2d7eea;
	border-top: 7px solid #2d7eea;
	border: 7px solid #2d7eea;
	border-radius: 15px 0px 0px 15px;

}




/*
.sub_menu_column
{
	display: none;
	width: 100%;
	height: 100%;
	background-color: #333;
	padding: 75px 20px 20px 20px;
	font-family: 'GraphieL';
	font-size: 16px;
	font-weight: 300;
	font-style: normal;
	color: #333;
	text-transform: uppercase;
	line-height: 20px;
	text-align: center;

	width: 30%;
	min-width: 200px;
	max-width: 250px;
	height: 100%;
	z-index: 99999;
	position: fixed;
	top: 0px;
	right: 35%;




}

*/









#main_menu_close
{
	font-size: 28px;
	position: absolute;
	top: 17px;
	right: 25px;
	cursor: pointer;
	z-index: 0;
	color: #333;
}

#main_menu_close:hover
{
	color: #39caff;
}

.sub_menu_x
{
	font-size: 28px;
	position: absolute;
	top: 7px;
	right: 10px;
	cursor: pointer;
	z-index: 5;
	color: #ffffff;
}

.slide_sub_menu
{
	cursor: pointer;
}

.sub_menu_arrow
{
	display: none;
	position: absolute;
	top: 70px;
	right: 0px;
	font-weight: 400;
	font-style: normal;
	color: #ffffff;
	font-size: 20px;
	text-transform: none;
	line-height: 18px;
	z-index: 4;
}

.sub_menu_arrow:hover
{
	color: #52d1ff;

}





.sub_menus div
{
	margin-bottom: 5px;
	padding: 5px;
}


.sub_menu_titles
{
	position: absolute;
	top: -4px;
	left: 50%;
	width: 100%;
	transform: translateX(-50%);
	font-family: 'GraphieL';
	font-weight: 400;
	font-style: normal;
	font-size: 26px;
	text-transform: none;
	line-height: 18px;
	text-transform: uppercase;
	text-align: center;
	padding: 15px;
	color: #fff;
	background-color: #333;
	z-index: 0;
}


.logoLeft
{
	position: absolute;
	top: 6px;
	left: 10px;
	cursor: pointer;
	z-index: 0;
	width: 28px;

}

.logoRight
{
	font-size: 28px;
	position: absolute;
	top: 7px;
	right: 10px;
	cursor: pointer;
	z-index: 5;
	width: 28px;

}


/*##################################################################
	STYLES APPLY ONCE YOU HIT:	THE SCREEN WIDTH SPECIFIED
								AND ALL SCREEN SIZES BELOW
								(until the next style def below)
##################################################################*/


 /* Large Devices, Wide Screens AND BELOW (UNTIL NEXT STYLE BELOW DEFINED)*/
@media only screen and (max-width : 1199px) {



}

/* Medium Devices, Desktops AND BELOW (UNTIL NEXT STYLE BELOW DEFINED)*/
@media only screen and (max-width : 991px) {



}

/* Small Devices, Tablets  AND BELOW (UNTIL NEXT STYLE BELOW DEFINED) */
@media only screen and (max-width : 767px) {

#main_menu
{
	width: 55%;


}

/* Extra Small Devices, Phones AND BELOW (UNTIL NEXT STYLE BELOW DEFINED)*/
@media only screen and (max-width : 480px) {



}

/* Custom, iPhone Retina AND BELOW (UNTIL NEXT STYLE BELOW DEFINED)*/
@media only screen and (max-width : 320px) {



}