@import url(http://fonts.googleapis.com/css?family=Raleway:500,600,800,700,900,400,300);
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Amatic+SC:400,700);


html {position: relative; min-height: 100%; -webkit-font-smoothing: antialiased}
body {background-color: #ffffff; background-image: url('../imgs/repeat.png'); background-repeat: repeat;}


/* Top Header */
.socialContainer{position: absolute; left: 10px; top: 10px}
.social{padding-right: 5px; color: rgba(82,100,138,0.6)}
.social:hover{color: rgba(82,100,138,1.0)}
.logo{cursor: pointer; margin-top: 10px; margin-bottom: 20px; max-width: 530px; -webkit-transition: 400ms; -moz-transition-duration: 400ms; transition-duration: 400ms;}
.logo:hover{opacity:0.7;}

/*TOOLTIP*/
#ToolTipDiv{position: absolute;top: 100px;left: 100px;min-height: 20px;max-width: 350px;background-color: rgba(0,0,0,.85);display: none;padding: 7px 13px;line-height: 22px;z-index:99999999;
	font-weight: normal;color: #ffffff;}
#ToolTipDiv b{color: #ffffff;}

.serviceTimes{margin-bottom: 30px}
.serviceTimes span{float: right}
.serviceTimes b{display: block; color: rgba(0,0,0,.85)}
.serviceTimes a{color: rgba(0,0,0,.6)}

/* navbar */
.theNavver{text-align: right; margin-top: 0px}
.navbar .navbar-nav{
	display: inline-block;
	float: none;
	vertical-align: top;
}

.navbar .navbar-collapse{
	text-align: center;
}

.navbar-default{
	background-color: transparent;
	border: none;
}

.navbar{
	margin-bottom: 0px;
}

.navbar-header{float: none !important}

.navbar-default .navbar-brand {
	color: rgba(39,50,69,0.73);
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
	color: rgba(39,50,69,0.73);
}

.navbar-default .navbar-nav > li > a {
	font-family: 'Raleway';
	font-size: 19px;
	font-weight: 600;
	text-transform: uppercase;
	color: rgba(0,0,0,.3);
	padding-right: 10px;
}
.nav>li>a{padding: 0px 10px !important}
.dropdown .dropdown-toggle{
	padding-right: 10px !important;
}

.dropdown{
	padding-right: 0px !important; /*set padding right 5 less then padding for main nav button*/
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
	color: rgba(82,100,138,1.0);
}
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
	color: rgba(82,100,138,1.0);
	font-weight: 700;
	background-color: transparent;
}
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus {
	color: rgba(82,100,138,1.0);

	background-color: transparent;
}
	/* caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
	border-top-color: rgba(0,0,0,.4);
	border-bottom-color: rgba(0,0,0.4);
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
	border-top-color: rgba(82,100,138,1.0);
	border-bottom-color: rgba(82,100,138,1.0);
}
.navbar-default .navbar-nav > .open > a .caret, 
.navbar-default .navbar-nav > .open > a:hover .caret, 
.navbar-default .navbar-nav > .open > a:focus .caret {
	border-top-color: rgba(82,100,138,1.0);
	border-bottom-color: rgba(82,100,138,1.0);
}
	/* mobile version */
.navbar-default .navbar-toggle {
	border-color: rgba(255,255,255,0.73);
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
	background-color: rgba(255,255,255,0.13);
}
.navbar-default .navbar-toggle .icon-bar {
	background-color: rgba(136,173,25,1.0);
}

.navvy .dropdown-menu{margin-top: 22px !important;	margin-left: 14px !important; z-index: 100000; border-top: none; padding: 5px 0px 0px 0px; background-color: rgba(36,36,36,0.95);}
.navvy .dropdown-menu>li>a{text-decoration: none; padding: 6px 20px; color: rgba(255,255,255,1.0)}
.navvy .dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover{background-color: rgba(136,173,25,1.0); color: rgba(255,255,255,1.0)}
.navvy .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{background-color: rgba(82,100,138,1.0); color: rgba(255,255,255,1.0)}
.navbar-default .navbar-collapse{border-color: #c4b19d;}

/* Mid Header */
.bgMid{background: url(../imgs/midHeader.jpg) no-repeat center center fixed; -webkit-background-size: cover;	-moz-background-size: cover; background-size: cover;-webkit-box-shadow: inset 0px 38px 26px -32px rgba(0,0,0,0.53);
-moz-box-shadow: inset 0px 38px 26px -32px rgba(0,0,0,0.53);
box-shadow: inset 0px 38px 26px -32px rgba(0,0,0,0.53);}
.bgMidAlt{background: url(../imgs/midHeader.jpg) no-repeat center center fixed; -webkit-background-size: cover;	-moz-background-size: cover; background-size: cover; min-height: 100px;-webkit-box-shadow: inset 0px 38px 26px -32px rgba(0,0,0,0.53);
-moz-box-shadow: inset 0px 38px 26px -32px rgba(0,0,0,0.53);
box-shadow: inset 0px 38px 26px -32px rgba(0,0,0,0.53);}
.midHeader{margin-top: 50px; margin-bottom: 60px}
.midContent{color: rgba(255,255,255,.7); font-size: 16px; line-height: 28px}
.midContent h1{font-size: 30px; text-transform: uppercase; color: white; font-weight: 700; margin-top: 0px}

.carouselContainer{margin-top: 100px; margin-bottom: 100px;}
.img-full {min-width: 100%;	-webkit-filter: contrast(120%);	filter: contrast(120%);	-moz-filter: contrast(120%); -ms-filter: contrast(120%); -o-filter: contrast(120%);}
.carousel{border: solid 10px rgba(0,0,0,.2);}
.carousel-caption h2{color: white}
.item img{height: auto !important}
.carousel-control .icon-next, .carousel-control .icon-prev{font-size: 130px; margin-top: -65px}

/* Content Items */
.allContent{border-top: solid 10px rgba(133,149,183,1.0); -webkit-box-shadow: 1px -4px 16px -2px rgba(0,0,0,0.33);
-moz-box-shadow: 1px -4px 16px -2px rgba(0,0,0,0.33);
box-shadow: 1px -4px 16px -2px rgba(0,0,0,0.33); padding-bottom: 200px}
.contentContainer{margin-top: 40px;}

h1, h2, h3, h4, h5{margin: 0px 0px 4px 0px; padding: 0px; font-family: 'Raleway'; color: rgba(58,58,58,1.0); font-weight: 700; font-size: 31px;}
h2{color: rgba(58,58,58,0.95); font-size: 25px;}
h3{color: rgba(58,58,58,0.90); font-size: 22px;}
h4{color: rgba(58,58,58,0.85); font-size: 20px;}

.content{padding: 15px;}
.mainContent{line-height: 25px; position: relative; z-index: 10000;padding: 20px 25px; background-color: rgba(255,255,255,.3); border: solid 1px rgba(0,0,0,.1);}

div, div p, p{font-family: 'Raleway'; color: rgba(0,0,0,.6); font-size: 16px; font-weight: 500;}
div a, div p a, p a{color: rgba(0,0,0,.9); font-size: 16px; font-weight: 500;}
div a:hover, div p a:hover, p a:hvoer{color: rgba(0,0,0,1.0); text-decoration: underline;}


/* buttons */
.yallButtons{margin-top: 45px; padding-bottom: 200px}
.buttonContainer{border: solid 7px rgba(0,0,0,.1)}
.buttonContainer a{text-decoration: none}
.buttonContainer img{
	-webkit-filter: contrast(120%) grayscale(95%);
	filter: contrast(120%) grayscale(95%);
	-moz-filter: contrast(120%) grayscale(95%);
	-ms-filter: contrast(120%) grayscale(95%);
	-o-filter: contrast(120%) grayscale(95%);
	-webkit-transition: 500ms;
    -moz-transition-duration: 500ms;
    -o-transition-duration: 500ms;
    transition-duration: 500ms;	
}
.buttonContainer a:hover img{-webkit-filter: contrast(105%) grayscale(0%);filter: contrast(105%) grayscale(0%);-moz-filter: contrast(105%) grayscale(0%);-ms-filter: contrast(105%) grayscale(0%);}
.myButton:hover ~ .buttonText{max-height: 0px;}
.portfolio-item {margin-bottom: 25px;}
.buttonText{display: block; background-color: rgba(0,0,0,.85); margin-top: -40px; position: relative; z-index: 100; text-align: center; line-height: 40px; font-size: 20px; font-family: 'Raleway'; color: rgba(168,184,198,1.0); font-weight: 600;}

/*Footer*/
.footer {position: absolute; bottom: 0; width: 100%; padding-bottom: 15px; background-color: rgba(82,100,138,1.0);}
.footerContainer{box-shadow: 0px -7px 0px rgba(0,0,0,.1);}
.footerContainer .row{padding-top: 20px}
.footContent{text-align: right; font-size: 15px; color: rgba(255,255,255,0.72); line-height: 29px;}

.footContent a{font-size: 15px; color: rgba(255,255,255,0.72); text-decoration: underline; -webkit-transition: 400ms; -moz-transition-duration: 400ms; transition-duration: 400ms;}
.footContent a:hover{color: rgba(255,255,255,1.0); text-decoration: none;}

.footLogo{cursor: pointer; max-width: 260px; margin-top: 0px; opacity:0.9; -webkit-transition: 400ms; -moz-transition-duration: 400ms; transition-duration: 400ms;}
.footLogo:hover{-webkit-filter: grayscale(0%); opacity:1.0; filter:alpha(opacity=100);}

/* sermon container */
.sermonContainer{border-bottom: solid 1px rgba(0,0,0,.1); margin: 30px 0px 0px 0px; padding-bottom: 20px;}
.sermonLeft{padding-left: 0px;}
.sermonSeries{display: block; font-size: 1.4em; font-family: Helvetica Neue, sans-serif; font-weight: 700; text-transform: uppercase; color: rgba(22,22,34,0.7);}
.sermonLeft h1{font-size: 2.3em; margin-top: 6px;}
.sermonInfo{font-size: 1.2em; color: rgba(0,0,0,.55); font-weight: 500;}
.sermonButtons{padding-right: 0px; padding-left: 0px;}
.listen, .watch, .notes, .download{display: block; border: solid 3px rgba(82,100,138,1.0); color: rgba(82,100,138,1.0) !important; text-decoration: none; text-align: center; cursor: pointer; font-weight: 700 !important; padding: 7px 0px; margin-bottom: 8px;}
.listen:hover, listen:active, .watch:hover, watch:active, .notes:hover, notes:active, .download:hover, download:active{	background-color: rgba(82,100,138,1.0); color: white !important; text-decoration: none;}
.sermonSelect{text-align: right;}



/* sermon player styling */
.sermonPlayer{
	display: none;
}

.audiojs{
	background-image: none !important;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
	width: 100% !important;
	height: 45px !important;
	line-height: 45px !important;
	margin: 10px 0px !important;
}

.audiojs .play-pause{
	width: 6% !important;
	border-right: solid 1px rgba(255,255,255,.1) !important;
	margin: 0px 7px 0px 0px !important;
	text-align: center !important;
	line-height: 45px !important;
	padding: 12px !important;
	height: 100% !important;
}

.audiojs p{
	width: auto !important;
}

.audiojs .play, .audiojs .loading, .audiojs .pause, .audiojs .error{
	background-image: none !important;
	background: none !important;
	color: white !important;
}

.audiojs .scrubber{
	width: 70% !important;
	border: none !important;
	background: rgba(255,255,255,.1) !important;
	height: 18px !important;
	margin: 13px 10px !important;
}

.audiojs .loaded{
	border: none !important;
	background: rgba(255,255,255,.1) !important;
	background-image: none !important;
	height: 18px !important;
}

.audiojs .progress{
	border: none !important;
	background: rgba(255,255,255,.2) !important;
	background-image: none !important;
	-moz-border-radius: 0px !important; -webkit-border-radius: 0px !important; border-radius: 0px !important; -khtml-border-radius: 0px !important;
	height: 18px !important;
}

.audiojs .time{
	border-left: solid 1px rgba(255,255,255,.1) !important;
	font-size: 1em !important;
	line-height: 45px !important;
	padding: 0px 0px 0px 10px !important;
	height: 100% !important;
	text-align: center !important;	
	width: 12% !important;	
}

.audiojs .time em, .audiojs .time strong{
	font-size: 1em !important;
	text-shadow: none !important;
	font-family: Helvetica Neue !important;
}


/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
	.firstButton{margin-left: -20px}
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
	.navbar-default .navbar-collapse{margin-left: 5px;}
	.navbar-collapse{padding: 0px}
	.container{width: 100%}
	.navbar-default .navbar-nav > li > a{font-size: 14px}	
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
	.navbar-default .navbar-collapse{border-color: transparent; -webkit-box-shadow: none !important; box-shadow: none !important}
	.mainContent{margin-bottom: 14px;}
	.footLogo{margin: 0 auto; margin-bottom: 15px; max-width: 250px}
	.footContent{text-align: center}
	.sermonSelect{text-align: left}
	.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn){width: 100% !important;}
	.sermonContainer h1{font-size: 1.8em}
	.sermonSeries{font-size: 1.1em}
	.sermonInfo{font-size: 1.0em}
	.navbar-default .navbar-nav > .open > a{padding-bottom: 0px;}
	.carousel{margin-top: 20px; margin-bottom: 30px}
	.item img{height: auto !important}
	.carouselContainer{margin: 40px 0px}
	.container{width: auto !important}
	.navbar-default .navbar-nav .open .dropdown-menu>li>a{color: rgba(39,50,69,0.7)}
	.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover{color: rgba(39,50,69,1.0)}
	.yallButtons{padding-bottom: 400px}
	
	.logo{max-width: 100%; display: block; margin-right: auto; margin-left: auto}
	.pull-right{float: none !important}
	.theNavver{text-align: center; margin-top: 34px}
	.socialMan{text-align: center}
	.navbar-header{float: none !important}
	.navbar .navbar-collapse{text-align: left; margin-left: 5px}
	.navbar-nav{margin: 10px 5px}
	.nav>li{padding: 4px 0px}
	.open>.dropdown-menu{margin-top: 0px !important}
	.navbar-toggle{float: none; margin-right: 0px}
	.carousel-control .icon-next, .carousel-control .icon-prev{font-size: 80px;}
}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 550px) {
	.item img{height: auto !important}
	.socialContainer{position: relative; text-align: center}

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 450px) {
	.yallButtons{padding-bottom: 350px}
}

@media (min-width:768px){
	.navbar{border-radius:0px}
	.navbar-nav{margin: 7.5px -15px}	
}