@import url(http://fonts.googleapis.com/css?family=Raleway:500,600,800,700,900,400,300);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic);
@import url(https://fonts.googleapis.com/css?family=Shadows+Into+Light);

html {position: relative; min-height: 100%; -webkit-font-smoothing: antialiased; background-color: transparent;}
body {background-color: transparent; background-image: url('../imgs/repeat.png'); background-repeat: repeat}
.topNav{
	background: -moz-linear-gradient(top,  rgba(0,0,0,0.76) 60%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0.76) 60%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(0,0,0,0.76) 60%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
	padding-bottom: 350px;
}
.topNavAlt{
	background: -moz-linear-gradient(top,  rgba(0,0,0,0.66) 75%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0.66) 75%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(0,0,0,0.66) 75%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
	padding-bottom: 65px;
}
.socialContainer{position: absolute; left: 10px; top: 10px; color: rgba(255,255,255,0.5); font-size: 15px}
.socialContainerRight{position: absolute; right: 10px; top: 10px; text-align: right; color: rgba(255,255,255,0.5); font-size: 15px}
.socialContainer a, socialContainerRight a{padding-right: 5px; color: rgba(255,255,255,0.5); font-size: 18px}
.socialContainer a:hover, socialContainerRight a:hover{color: rgba(255,255,255,1.0);}

/* Top Header */
.social{padding-right: 5px}
.social:hover{color: rgba(0,78,151,1.0)}
.logo{cursor: pointer; margin-top: 24px; margin-bottom: 20px; max-width: 550px; -webkit-transition: 400ms; -moz-transition-duration: 400ms; transition-duration: 400ms; position: relative; z-index: 50000}
.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;}

.topNavHolder{font-size: 15px; color: rgba(0,0,0,.3); font-family: 'Raleway'; font-weight: 400; line-height: 21px}
.topNavHolder a{font-size: 15px; color: rgba(0,0,0,.3); font-family: 'Raleway'; font-weight: 400;}
.topNavHolder span{padding: 0px 5px}
.socialMan{text-align: right; margin-top: 30px}

.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: center; margin-top: 11px}
.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(255,255,255,0.73);
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
	color: rgba(255,255,255,0.73);
}

.navbar-default .navbar-nav > li > a {
	font-family: 'Raleway';
	font-size: 16px;
	font-weight: 800;
	text-transform: uppercase;
	color: rgba(255,255,255,0.65);
	padding: 15px 20px;
	background-color: transparent;
	border-bottom: solid 1px transparent;
}
.dropdown .dropdown-toggle{
	padding-right: 14px !important; /*Should always be six pixels less then the padding right of the file above*/
}

.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 {
	border-bottom: solid 1px rgba(255,255,255,0.56);
	color: rgba(255,255,255,1.0);
	background-color: transparent;
}
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
	border-bottom: solid 1px rgba(255,255,255,0.56);
	color: rgba(255,255,255,1.0);
	background-color: transparent;
}
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus {
	border-bottom: solid 1px rgba(255,255,255,0.56);
	color: rgba(255,255,255,1.0);
	background-color: transparent;
}
	/* caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
	border-top-color: rgba(255,255,255,0.55);
	border-bottom-color: rgba(255,255,255,0.55);
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
	border-top-color: rgba(255,255,255,1.0);
	border-bottom-color: rgba(255,255,255,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(255,255,255,1.0);
	border-bottom-color: rgba(255,255,255,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(255,255,255,1.0);
}
.dropdown-menu{
	margin-top: 0px !important;
	border-top: none;
}

.navbar-default .navbar-collapse{
	border-color: #c4b19d;
}


.navvy .dropdown-menu{margin-left: -1px !important; z-index: 100000; border-top: none; padding: 0px 0px 0px 0px; background-color: rgba(0,0,0,0.85); min-width: 175px}
.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(164,103,200,1.0); color: rgba(0,0,0,1.0)}
.navvy .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{background-color: rgba(164,103,200,1.0); color: rgba(0,0,0,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;
	-moz-box-shadow: inset  0  20px 20px -20px rgba(0,0,0,.85), inset  0 -20px 20px -20px rgba(0,0,0,.85);
	-webkit-box-shadow: inset  0  20px 20px -20px rgba(0,0,0,.85), inset  0 -20px 20px -20px rgba(0,0,0,.85);
	box-shadow: inset  0  20px 20px -20px rgba(0,0,0,.85), inset  0 -20px 20px -20px rgba(0,0,0,.85);}
.bgMidAlt{
	background: linear-gradient( rgba(0,0,0,0.65), rgba(0,0,0,0.65) ), url(../imgs/midHeader.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover;
	-moz-box-shadow: inset  0  20px 20px -20px rgba(0,0,0,.85), inset  0 -20px 20px -20px rgba(0,0,0,.85);
	-webkit-box-shadow: inset  0  20px 20px -20px rgba(0,0,0,.85), inset  0 -20px 20px -20px rgba(0,0,0,.85);
	box-shadow: inset  0  20px 20px -20px rgba(0,0,0,.85), inset  0 -20px 20px -20px rgba(0,0,0,.85);}
.midHeader{margin-top: -300px; margin-bottom: 0px}
.midContent{color: rgba(255,255,255,.85); font-size: 16px; line-height: 28px; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.68);}
.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 13px rgba(255,255,255,0.05); margin: 25px 0px 65px 0px}
.carousel-caption h2{color: white}
.item img{height: auto !important}
.carousel-control .icon-next, .carousel-control .icon-prev{font-size: 130px; margin-top: -65px}


.bottomButton{display: block; text-decoration: none; cursor: pointer; text-align: left; padding: 20px; color: rgba(126,10,13,1.0); font-size: 20px; text-transform: uppercase; font-weight: 400;}
.bottomButton i{padding-right: 5px}
.bottomButton:hover{color: rgba(0,0,0,.9); font-weight: 500; text-decoration: none}


/* Content Items */
.allContent{padding-bottom: 100px}
.contentContainer{margin-top: 40px;}

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

.content{padding: 15px;}
.mainContent{line-height: 29px; 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: 'Roboto'; color: rgba(0,0,0,.7); font-size: 16px; font-weight: 400;}
div b, div p b, b{color: rgba(0,0,0,.85);}
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 */
.buttonContainer{background-color: rgba(194,194,194,1.0); padding-bottom: 45px; margin-top: 85px; outline: solid 10px rgba(0,0,0,.45)}
.buttons{margin-top: 45px; padding-left: 7px; padding-right: 7px; margin-bottom: 25px}
.buttonAnchor{position: relative}
.buttonOver{position: absolute; z-index: 10; text-align: center; width: 100%; line-height: 168px; color: rgba(123,69,155,1.0); font-size: 35px; font-family: 'Shadows Into Light'; background-color: rgba(0,0,0,0.85); outline: solid 7px rgba(255,255,255,0.05)}
.buttonAnchor img{-webkit-filter: grayscale(100%); filter: grayscale(100%);}
.theButtons:nth-of-type(1){padding: 0px 31px 0px 0px}
.theButtons:nth-of-type(2){padding: 0px 20px 0px 10px}
.theButtons:nth-of-type(3){padding: 0px 10px 0px 20px}
.theButtons:nth-of-type(4){padding: 0px 0px 0px 30px}



/*Footer*/
.footer {position: absolute; bottom: 0; width: 100%; padding-top: 0px}
.footerContainer{background-color: rgba(0,0,0,0.8); padding-bottom: 15px; margin-top: 40px}
.footerContainer .row{padding-top: 20px}
.footContent{text-align: left; font-size: 15px; color: rgba(255,255,255,0.65); font-weight: 300; line-height: 29px;}
.footRight{text-align: right}

.footContent a{font-size: 15px; color: rgba(255,255,255,0.65); font-weight: 300; 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: 67%; margin-top: 10px; opacity:0.4; -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(123,69,155,1.0); color: rgba(123,69,155,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(123,69,155,1.0); color: white !important; text-decoration: none;}
.sermonSelect{text-align: right;}

.tagline{text-align: center; margin-top: 0px; color: white; font-size: 35px; font-family: 'Shadows Into Light'; padding-bottom: 30px; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.65);}
.tagline em{color: rgba(255,255,255,.5); font-style: normal}
.tagline span{width: 20px; display: inline-block}

.googleFrame{border: solid 7px rgba(255,255,255,.1)}
.theContactInfo{text-align: right; color: rgba(255,255,255,.8); line-height: 28px}
.theContactInfo b{color: white}



/* sermon player styling */
.img-right{float: right; margin: 0px 0px 7px 7px; border: solid 7px rgba(0,0,0,.1)}
.img-left{float: left; margin: 0px 7px 7px 0px; border: solid 7px rgba(0,0,0,.1)}
.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: 0px !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}
	.container{width: 100%}
	.theNavver{margin-top: 30px; margin-bottom: 30px; float: none !important; text-align: center}
	.usefulInfo{text-align: center; float: none}
	.logo{margin: 0 auto; margin-top: 20px}
	.navbar-header{float: none !important}
	.theButtons{padding: 0px 10px 0px 10px}
	.theButtons:first-of-type{padding: 0px 20px 0px 0px}
	.theButtons:last-of-type{padding: 0px 0px 0px 20px}	
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
	.navbar-default .navbar-collapse{margin-left: 5px;}
	.navbar-collapse{padding: 0px}
	.item img{height: auto !important}
	.container{width: 100%}
	.theContactInfo{text-align: center; margin-top: 20px}
	.logo{margin-top: 60px}
	
	.theButtons{margin-bottom: 30px}
	.navbar-default .navbar-nav > li > a{font-size: 15px; padding: 15px 10px}

}

/* 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}
	.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;}
	.item img{height: auto !important}
	.carouselContainer{margin: 40px 0px}
	.container{width: auto !important}
	.navbar-default .navbar-nav .open .dropdown-menu>li>a{color: rgba(255,255,255,0.5)}
	.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover{color: rgba(255,255,255,1.0)}
	.navbar-nav .open .dropdown-menu .dropdown-header, .navbar-nav .open .dropdown-menu>li>a{padding: 10px 15px 5px 20px}
	.navbar .navbar-nav{width: 96%}
	
	.logo{max-width: 100%; display: block; margin-right: auto; margin-left: auto}
	.pull-right{float: none !important}
	.theNavver, .usefulInfo{text-align: center}
	.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: 5px !important}
	.navbar-toggle{float: none; margin-right: 0px}
	.footRight{text-align: center}
	.topNav{height: auto}

	.theButtons{padding: 0px; text-align: center; display: block; margin: auto; margin-bottom: 20px}
	.theButtons:nth-of-type(1){padding: 0px; padding-bottom: 20px}
	.theButtons:nth-of-type(2){padding: 0px; padding-bottom: 20px}
	.theButtons:nth-of-type(3){padding: 0px; padding-bottom: 20px}
	.theButtons:nth-of-type(4){padding: 0px; padding-bottom: 20px}
	
	.topNav{padding-bottom: 280px}
}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 550px) {
	.item img{height: auto !important}
	.theButtons{padding: 0px; width: 100%; margin-bottom: 20px}
	.logo{display: block; margin-right: auto; margin-left: auto; margin-top: 64px}

}

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

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