/************************************************* Imports *************************************************/
@import url(https://fonts.googleapis.com/css?family=Roboto:100,400);
@import url(https://fonts.googleapis.com/css?family=Satisfy:100,400);
@import url(https://fonts.googleapis.com/css?family=Raleway:100,400,700);


/************************************************* Global *************************************************/
body
{
	font-family: 'Raleway', 'Open-Sans', sans-serif;
	overflow-x: hidden;
	font-size: 14px;
	background-color: #e1ebef;
}

.halign-center {
	text-align: center;
}

.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
  outline: none; 
}

.btn {
  border-radius: 0; 
  letter-spacing: 2px; 
}

.btn:hover {
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
}

.btn-middle {
	background-color: transparent;
	padding: 15px 30px;
	border: 1px solid #333333;
	color: #5c9233;
	margin: 25px 0px;
}

.btn-middle:hover {
	background-color: #333333;
	color: #fff;
	box-shadow: 0px 2px 5px #948E8E;
}

.btn-send,
.btn-reservation {
	background-color: #a7a7b1;
	padding: 10px 50px;
	box-shadow: 0px 2px 5px #948E8E;
	color: #fff;
	margin: 20px 0px;
}

.btn-send:hover,
.btn-reservation:hover {
	background-color: #333333;
	color: #eee;

}

.btn-reservation {
	width: 100%;
	margin: 0px;
}

.section-content-title
{
	font-family: 'Roboto';
	font-weight: 100;
	font-size: 60px;
}
.section-content-para
{
	margin: 30px 0px;
}
.section-content
{
	padding: 7% 12% 7% 10%;
}
.section-bg
{
	background-size: cover;
	background-repeat: no-repeat;
    background-position: center;
}
.section-icon
{
	position: absolute;
	left: 47%;
	margin-left: -21px;
	margin-top: 58px;
	z-index: 999;
}
.section-spacer {
	padding-top: 0px;
}
.dis-table
{
	display: table;
	/*width: 100vw;*/
}
.dis-table .dis-table-cell
{
	display: table-cell;
	padding: 0;
	float: none;
	/*width: 50vw;*/
	/*position: relative;*/
}
.color-bg
{
	background: #B3BFDC; /*#46464f;*/
}

.form-control {
	border-radius: 0px;
	margin-bottom: 25px;
}
input.empty, textarea.empty {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}
.white-text
{
	color: #ffffff;
}

.going-to-heaven-main {
	width: 80%; 
	overflow: hidden; 
	margin: auto; 
	border-top: 1px black solid; 
	border-bottom: 1px black solid;
	background: url('../images/GoingToHeavenBG.jpg'); 
	background-position: bottom right; 
	background-repeat: no-repeat;
	background-size: cover;
	font-weight: bold;
	height: 300px;
}

a.salvation-link {
	color: #000000;
	text-shadow: -1px -1px 5px #A7A49D, 
				  1px -1px 5px #A7A49D, 
				 -1px  1px 5px #A7A49D, 
				  1px  1px 5px #A7A49D;
}

/************************************************* Pastor's Note *************************************************/
.pastors-note-main {
	width: 80%; 
	overflow: hidden; 
	margin: auto; 
	border-top: 1px black solid; 
	border-bottom: 1px black solid;
	background-color: #ffffff;
}

.pastors-note {
	float: left; 
	padding: 0px; 
	width: 70%;
}

.pastors-face {
	float: left; 
	padding: 30px 20px 20px 20px; 
	text-align: right; 
	width: 30%; 
	min-width: 140px;
}

.pastors-note-start { 
	margin: 30px 0px 30px 20px;
	padding: 0px 40px; 
	background: url('../images/QuoteStart.png'); 
	background-position: top left; 
	background-repeat: no-repeat;
}

.pastors-note-end { 
	margin: 30px 0px 30px 20px;
	padding: 0px 40px;
	background:url('../images/QuoteEnd.png'); 
	background-position: bottom right; 
	background-repeat: no-repeat;
}

/************************************************* Salvation  *************************************************/
.highlight {
	background-color:#ffffff; 
	padding: 20px; 
	margin: 20px 0px; 
	border: solid #D2A620; 
	border-width: 1px 0px;
}

.question {
	background-image: url('../images/QuestionBG.png');
	background-position: top left;
	background-repeat: no-repeat;
	padding-left: 70px;
}

h4.bible-ref {
	padding: 20px;
	font-style: italic;
}



/************************************************* Navigation *************************************************/
.home-navbar-default
{
	background-color: transparent;
	border: 0px;
	margin: 0px;
	border-radius: 0px;
	color: #333333;
	padding: 0px;
}

.other-navbar-default
{
	background:url('../images/HeaderBG_small.jpg'); 
	background-position: top; 
	background-size: cover;
	border: 0px;
	margin: 0px;
	border-radius: 0px;
	color: #333333;
	box-shadow: 0px 2px 7px #666666; /*rgb(139, 195, 74)*/
	height: 200px;
}

.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover
{
	color: #ffffff;
}
.navbar-default .navbar-nav>li>a
{
	color: #333333;
	text-transform: uppercase;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	margin: 0px;
	padding: 15px 10px;
	font-size: 15px;
	text-align: right;
	text-shadow: 0 0 8px #ffffff;
}
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover
{
	color: #D2A620;
}
.navbar-default
{
	border-color: #333333;
}
.navbar-default .icon-bar
{
	background-color: #333333;
}
.navbar-default .navbar-default
{
	background-color: transparent;
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
	background-color: transparent;
	color: #000000;
}

.navbar-brand {
  	width: 260px;
	margin-top: 0px;
	padding: 0px 30px;
}

.nav-tile-image {
	margin: 7px;
	border: 2px solid #ffffff;
	box-shadow: 2px 4px 8px rgba(0, 0, 0, .5);
}

.first-section-other {
	width: 100%;
	padding: 200px 0px 0px 0px;
}


/************************************************* navbar shrinking *************************************************/
nav.navbar.shrink {
	max-height: 62px;
  	padding: 12px 0px;
  	transition: all 0.3s ease-in-out;
  	-webkit-transition: all 0.3s ease-in-out;
  	-moz-transition: all 0.3s ease-in-out;
  	-ms-transition: all 0.3s ease-in-out;
  	-o-transition: all 0.3s ease-in-out;
}
/*
nav.shrink a {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
	font-size: 15px;
}
*/
nav.shrink .navbar-brand {
	margin-top: -15px;
	width: 215px;
}

nav.shrink .navbar-toggle {
	padding: 4px 5px;
	margin: 8px 15px 8px 0;
}

.navbar-default.shrink {
	background-color: #ffffff;
}

.navbar-collapse.collapse.in {
	background-color: #ffffff;
}


/************************************************* mobile nav button animation *************************************************/
.navbar-toggle {
  border: none;
  background: transparent !important;
}

.navbar-toggle:hover {
background: transparent !important;
}

.navbar-toggle .icon-bar {
	width: 22px;
	transition: all 0.2s;
}
.navbar-toggle .top-bar {
	transform: rotate(45deg);
	transform-origin: 10% 10%;
}
.navbar-toggle .middle-bar {
	opacity: 0;
}
.navbar-toggle .bottom-bar {
	transform: rotate(-45deg);
	transform-origin: 10% 90%;
}


.navbar-toggle.collapsed .top-bar {
	transform: rotate(0);
}
.navbar-toggle.collapsed .middle-bar {
	opacity: 1;
}
.navbar-toggle.collapsed .bottom-bar {
	transform: rotate(0);
}


/************************************************* Header *************************************************/
.owl-carousel
{
	margin-top: 0px;
}
.owl-carousel .owl-wrapper, .owl-carousel .owl-item .item
{
	height: 50vh;
	background-repeat: no-repeat;
}
.owl-carousel .owl-wrapper, .owl-carousel .owl-item:nth-child(1) .item
{
	background: url('../images/HeaderBG.jpg');
	background-size: cover;
	background-position: bottom;
}
.owl-image
{
	height: 40vh;
	margin-top: 50px;
}
.header-content
{
	margin-top: 10vh;
	/*margin-left: 3vw;*/
	display: inline-block;
}
.header-title, .header-sub-title
{
	font-family: 'Roboto', sans-serif;
	text-transform: uppercase;
	color: #333;
}
.header-title
{
	font-size: 90px;
	font-weight: 100;
	margin-bottom: 0px;
	line-height: 1;
}
.header-sub-title
{
	font-size: 24px;
	margin-left: 10px;
}
.header-service-times>div {
	padding: 7px 0px;
	text-align: center;
}
.welcome-big {
	padding: 20px 0px;
	text-align:center; 
	font-size: 30px;
}
.welcome-small {
	padding: 20px 0px;
	text-align:center; 
	font-size: 20px;
}
.welcome-div {
	padding-left: 0px;
	padding-right: 0px;
	background-color:#ffffff;
}



/************************************************* Messages *************************************************/
.message-list-header {
	margin-top: 30px;
    background-color: #D2A620;
    padding: 10px;
    color: #ffffff;
}

.message-list-row {
	background-color: #ffffff;
    padding: 5px 10px 5px 10px;
}



/************************************************* Ministries *************************************************/
.oneway-bg {	
	background: url('../images/OneWayBGColour.jpg');
}

.mums-minis-bg {
	background-color: #ffffff;
	background: url('../images/HandPrint.jpg');
	background-size: contain;
	background-position: right;
	background-repeat: no-repeat;
}




/************************************************* Contact us *************************************************/
.contact .section-content
{
	color: #fff;
}
.contact .section-title 
{
	padding: 10% 20%;
}
#map-canvas {
	width: 100%;
	height: 500px;
}

.form-group {
  position: relative;
  margin-bottom: 1.5rem;
}

.form-control-placeholder {
  position: absolute;
  top: 0;
  padding: 7px 0 0 13px;
  transition: all 200ms;
  opacity: 0.5;
}

.form-control:focus + .form-control-placeholder,
.form-control:valid + .form-control-placeholder {
  font-size: 75%;
  transform: translate3d(0, -100%, 0);
  opacity: 1;
}


/************************************************* Footer *************************************************/
.footer-verse-container {
	width: 100%;
	padding: 0px;
}
.footer-verse-div {
	padding: 7px 20px;
	background-color:#ffffff; 
	text-align: center;
}
.footer-verse {
	background-color:#ffffff; 
	color:#D2A620; 
	font-size: 18px;
}
.footer-service-times {
	color: #ffffff;
	float: left;
	padding: 20px 0px;
}
#page-footer
{
	background-color: #233543;
	color: #A7A7B1;
	padding: 30px 0px;
}

#page-footer a
{
	color: #A7A7B1;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
		-mz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		 -o-transition: all 0.3s ease-in-out;
}

#page-footer a:hover
{
	color: #ffffff;
	text-decoration: none;
}

/************************************************* Statement of Faith *************************************************/
.statement-link {
	padding: 10px 15px;
}
.statement-bookmark {
	position: relative;
	top: -100px;
}
#backToTop {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: transparent; /* Set a background color */
  color:  #DBBC58; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  font-size: 50px; /* Increase font size */
}
#backToTop:hover {
  color: #D2A620; /* Add a dark-grey background on hover */
}


/************************************************* Media Query *************************************************/
/*************************************************  - for wide screen *************************************************/
@media (min-width: 1500px) {
	.section-icon {
		left: 48%;
		margin-left: -25px;
	}

	.section-title {
		padding: 20% 10% 20% 25%;
	}

	.section-content {
		padding: 2% 10%;
	}

	.bread .section-bg,
	.beer .section-bg {
		background-position-x: 62%, 80%;
		background-size: 330px, 264px;
	}

	nav.shrink .navbar-brand {
		width: 300px;
	}
	
	.navbar-brand {
		width: 300px;
	}
	
	.owl-carousel .owl-wrapper, .owl-carousel .owl-item:nth-child(1) .item {
		background-position: center;
		height: 70vh;
	}
	
	.owl-image
	{
		height: 35vh;
	}

	.header-service-times>div {
		font-size: 18px;
	}
	.welcome-big {
		font-size: 36px;
	}
	.welcome-small {
		font-size: 24px;
	}
	.nav-tile-image {
		width: 250px;
	}
	.going-to-heaven-main {
		width: 40%; 
	}
	.pastors-note-main {
		width: 40%; 
	}
	.statement-bookmark {
		top: -140px;
	}
	.youtube-iframe {
		width: 1120px;
		height: 630px;
	}
}



/*************************************************  - for extra-large screen *************************************************/
@media (max-width: 1499px) and (min-width: 1366px){
	.section-title
	{
		/*padding: 190px 0px;
		margin: 0px 90px 0px 140px;*/
		font-size: 60px;
	}

	nav.shrink .navbar-brand {
		width: 300px;
	}
	
	.navbar-brand{
		width: 300px;
	}
	
	.owl-carousel .owl-wrapper, .owl-carousel .owl-item:nth-child(1) .item {
		background-position: center;
		height: 60vh;
	}
	
	.owl-image
	{
		height: 27vh;
	}

	.header-service-times>div {
		font-size: 18px;
	}
	.welcome-big {
		font-size: 36px;
	}
	.welcome-small {
		font-size: 24px;
	}
	.nav-tile-image {
		width: 250px;
	}
	.going-to-heaven-main {
		width: 60%; 
	}
	.pastors-note-main {
		width: 60%; 
	}
	.statement-bookmark {
		top: -140px;
	}
	.youtube-iframe {
		width: 980px;
		height: 551px;
	}
}



/*************************************************  - for large screen *************************************************/
@media (max-width: 1365px) and (min-width: 992px){
	.section-content {
		padding: 5% 10%;
	}
	
	.other-navbar-default
	{
		height: 180px;
	}
	
	.first-section-other {
		padding-top: 180px;
	}
	
	.section-title
	{
		/*padding: 190px 0px;
		margin: 0px 90px 0px 140px;*/
		font-size: 60px;
	}
	.owl-carousel
	{
		margin-top: 0px;
	}

	.owl-carousel .owl-wrapper, .owl-carousel .owl-item:nth-child(1) .item {
		margin-top:0px;
		background-position: center;
		height: 50vh;
	}
	.owl-image
	{
		height: 24vh;
	}
	.header-service-times>div {
		font-size: 14px;
	}
	.nav-tile-image {
		width: 200px;
	}
	
	#map-canvas {
		height: 350px;
	}
	.statement-bookmark {
		top: -100px;
	}
	.youtube-iframe {
		width: 740px;
		height: 416px;
	}
}



/*************************************************  - for small (tab) screen *************************************************/
@media (max-width: 991px) and (min-width: 768px){
	.other-navbar-default
	{
		height: 180px;
	}
	
	.first-section-other {
		padding-top: 180px;
	}
	
	.navbar-default .navbar-nav>li>a {
		font-size: 12px;
	}
	
	nav.shrink .navbar-brand {
		font-size: 22px;
	}
	
	.owl-carousel {
		margin-top: 0px;
	}

	.owl-carousel .owl-wrapper, .owl-carousel .owl-item:nth-child(1) .item {
		margin-top:0px;
		background-position: center;
		height: 50vh;
	}
	.owl-image
	{
		height: 20vh;
	}

	.owl-theme .owl-controls .owl-buttons .owl-prev {
		right: 20%;
	}

	.owl-theme .owl-controls .owl-buttons .owl-next {
		right: 12%;
	}

	.about-bg {
		background-size: 98%;
  		background-position-x: 100%;
  		background-position-y: 68%;
	}

	.header-content
	{
		margin-top: 60px;
	}

	.header-title {
		font-size: 49px;
	}
	.header-service-times>div {
		font-size: 14px;
	}

	.section-header {
		padding-top: 0px;
	}

	.dances-title {
		margin-bottom: 15px;
		font-size: 25px;
	}

	#filter-list li {
		font-size: 14px;
	}

	.section-title {
		font-size: 45px;
		padding: 20% 15%;
	}

	.contact .section-title {
		padding: 10% 20% 20% 20%;
	}

	.section-content {
		padding: 5% 10%;
	}

	.section-content-title {
		font-size: 45px;
	}

	.btn-reservation {
		padding: 10px;
	}
	.welcome-big {
		font-size: 30px;
	}
	.welcome-small {
		font-size: 20px;
	}
	.nav-tile-image {
		width: 200px;
	}
	
	#map-canvas {
		height: 350px;
	}
	.statement-bookmark {
		top: -100px;
	}
	.youtube-iframe {
		width: 560px;
		height: 315px;
	}
}



/*************************************************  - for extra-small (mobile) screen *************************************************/
@media (max-width: 767px) {	
	.other-navbar-default
	{
		height: 150px;
	}
	
	.first-section-other {
		padding-top: 150px;
	}
	
	.navbar-default .navbar-brand {
		font-size: 30px;
	}
	
	.navbar-brand {
		width: 215px;
	}
	
	nav.shrink .navbar-brand {
		margin-top: -5px;
	}
	
	.owl-carousel {
		margin-top: 0px;
	}
	.owl-carousel .owl-wrapper, .owl-carousel .owl-item:nth-child(1) .item {
		margin-top: 0px;
		background-position: center;
		height: 70vh;
	}
	.owl-image
	{
		height: 24vh;
		margin-top: 60px;
	}
	.owl-theme .owl-controls .owl-buttons .owl-prev {
		right: 20%;
	}
	.owl-theme .owl-controls .owl-buttons .owl-next {
		right: 5%;
	}
	.header-content
	{
		margin-top: 30px;
		margin-left: 0vw;
		display: inline-block;
	}
	.header-title {
		font-size: 30px;
		font-weight: bold;
		margin-bottom: 0px;
	}
	.header-sub-title {
		margin-left: 3px;
		font-weight: normal;
		margin-bottom: 0px;
	}	
	.header-service-times>div {
		font-size: 14px;
	}
	.section-content {
		padding: 5% 6%;
	}
	.section-content-title {
		font-size: 40px;
	}
	.section-header {
		padding-top: 0px;
	}
	.section-spacer {
		padding-top: 80px;
	}
	.dances-title {
		margin-bottom: 15px;
		font-size: 25px;
	}
	#filter-list li {
		font-size: 14px;
	}
	#menu-dances .item {
		width: 100%;
	}
	#menu-dances .item h2 {
		margin: 0px;
		padding: 0px;
		font-size: 27px;
	}
	.menu-dance li a:hover .menu-desc span {
		padding: 0px;
		line-height: 18px;
		font-size: 12px;
	}
	.menu-dance li a .menu-desc span h3 {
		font-size: 19px;
		margin-bottom: 12px;
	}
	.section-title {
		font-size: 40px;
  		padding: 18% 10%;
	}
	.contact .section-title {
		padding: 10% 20% 20% 20%;
	}
	.menu {
		text-align: center;
	}
	.half {
		width: 100%;
	}
	.per-head, .dance {
		float: none;
	}
	.opening-time {
		margin-top: 25px;
	}
	.contact .section-content {
		padding: 70px 0px;
	}
	.g-map img {
		height: 137px;
	}
	.btn-reservation {
		padding: 10px;
	}
	.footer-verse {
		font-size: 14px;
	}
	.welcome-big {
		font-size: 24px;
	}
	.welcome-small {
		font-size: 18px;
	}
	.nav-tile-image {
		width: 200px;
	}
	.pastors-note {
		width: 100%;
	}
	.pastors-face {
		width: 100%;
		text-align: center;
	}
	
	#map-canvas {
		height: 350px;
	}
	.statement-bookmark {
		top: -50px;
	}
	.youtube-iframe {
		width: 300px;
		height: 168px;
	}
}