@import url(https://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: url(../imgs/midHeader.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover;}

.socialContainer{position: absolute; left: 10px; top: 10px; color: rgba(26,38,50,0.7); font-size: 17px; z-index: 100000000}
.socialContainer a{color: rgba(26,38,50,0.7); font-size: 17px; font-weight: normal;}
.socialContainerRight{position: absolute; right: 10px; top: 10px; text-align: right; color: rgba(26,38,50,0.7); font-size: 17px; z-index: 100000000}
.socialLinks{padding-right: 5px; color: rgba(26,38,50,0.7); font-size: 23px !important}
.socialContainerRight a{padding-right: 5px; color: rgba(26,38,50,0.7); font-size: 15px; font-weight: normal}
.socialContainerRight a:hover{color: rgba(26,38,50,1.0); text-decoration: none}
.socialContainer a:hover, .socialLinks a:hover{color: rgba(26,38,50,1.0);}

.bodyContainer{background-color: white; margin-top: 10px; border-top: solid 7px rgba(64,197,225,1.0); -webkit-box-shadow: 0px 0px 18px 3px rgba(0,0,0,0.38);
-moz-box-shadow: 0px 0px 18px 3px rgba(0,0,0,0.38); box-shadow: 0px 0px 18px 3px rgba(0,0,0,0.38); padding-left: 50px; padding-right: 50px; margin-bottom: 40px}
.logo{cursor: pointer; margin-top: 30px; margin-bottom: 70px; max-width: 400px; -webkit-transition: 400ms; -moz-transition-duration: 400ms; transition-duration: 400ms; position: relative; z-index: 50000}
.logo:hover{opacity:0.7;}
.badgeIcon{margin-top: 9px}

/*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: 0px}
.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: left; margin-top: 41px}
.navbar .navbar-nav{display: inline-block; float: none; vertical-align: top;}
.navbar .navbar-collapse{text-align: left; padding: 0px}
.navbar-default{background-color: rgba(64,197,225,1.0); border: none;}
.navbar{margin-bottom: 0px;}
.navbar-header{float: none !important}
.navbar-default .navbar-nav > .dropdown > a .caret {border-top-color: rgba(0,0,0,0.8); border-bottom-color: rgba(0,0,0,0.8);}
.navbar-default .navbar-brand {color: rgba(0,0,0,0.8);}
.navbar-default .navbar-brand:hover,.navbar-default .navbar-brand:focus {color: rgba(0,0,0,0.8);}
.navbar-default .navbar-nav > li > a {
	font-family: 'Raleway';
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	color: rgba(0,0,0,0.8);
	padding: 17px 22px;
	background-color: transparent;
	border-bottom: solid 1px transparent;
}
.navbar-default .navbar-toggle {border-color: rgba(64,197,225,1.5);}
.navbar-default .navbar-toggle:hover,navbar-default .navbar-toggle:focus {background-color: rgba(64,197,225,1.2);}
.dropdown .dropdown-toggle{padding-right: 16px !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*/}

/* active navbar*/
.navbar-default .navbar-nav > li > a:hover,.navbar-default .navbar-nav > li > a:focus {color: rgba(255,255,255,1.0);background-color: rgba(26,38,50,1.0);}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {color: rgba(255,255,255,1.0);background-color: rgba(26,38,50,1.0);}
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus {color: rgba(255,255,255,1.0);background-color: rgba(26,38,50,1.0);}
.nav .open>a, .nav .open>a:focus, .nav .open>a:hover{border-color: transparent}

/* caret */
.active > a .caret{border-top-color: rgba(255,255,255,1.0) !important; border-bottom-color: rgba(255,255,255,1.0) !important;}
.caret{margin-right: 10px}
.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 .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(64,197,225,1.0); color: rgba(0,0,0,0.8)}
.navvy .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{background-color: rgba(64,197,225,1.0); color: rgba(0,0,0,1.0)}
.navbar-default .navbar-collapse{border-color: #c4b19d;}


.topButtonHolder{margin-top: -25px; position: relative; z-index: 100000}
.toTheTop{display: inline-block; background-color: rgba(64,197,225,1.0); border-radius: 50%; padding: 20px 25px; color: white; border: solid 4px white; text-align: center; cursor: pointer}
.toTheTop:hover{background-color: rgba(26,38,50,1.0); color: white; text-decoration: none;}

.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-bottom: solid 7px rgba(64,197,225,1.0); margin-bottom: 30px}
.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 */
.contentRow{margin-top: 40px}
.allContent{padding-bottom: 100px; margin-bottom: 300px}
.contentContainer{margin-top: 40px;}

/* 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(26,38,50,1.0); color: rgba(26,38,50,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(26,38,50,1.0); color: white !important; text-decoration: none;}
.sermonSelect{text-align: right;}

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

.mainContent{line-height: 29px; position: relative}
.pic{float: right; border: solid 7px 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, a{color: rgba(0,0,0,.9); font-size: 16px; font-weight: 500;}
div a:hover, div p a:hover, p a:hover, a:hover{color: rgba(0,0,0,1.0); text-decoration: underline;}

/* buttons */
.buttons{position: relative; z-index: 10000; background-color: rgba(0,0,0,.05); border-top: solid 1px rgba(0,0,0,.1); margin: 50px -50px 0px -50px; padding: 20px 50px 40px 50px}
.calButton{display: inline-block; width: 100%; text-decoration: none; padding: 15px 20px; background-color: rgba(0,0,0,.1); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -khtml-border-radius: 5px}
.calButton b{display: block}
.calButton span{color: rgba(0,0,0,.7)}


/*Footer*/
.footerRow{background-color: #1f1f1f; margin: -50px -50px 0px -50px}
.footerContainer{padding: 40px}
.footerContainer h2{color: white; border-bottom: solid 1px rgba(64,197,225,0.2); padding-bottom: 14px; margin-bottom: 20px}
.theMap{border: solid 7px rgba(255,255,255,.1)}
.theMap:hover{border: solid 7px rgba(255,255,255,.2)}
.footMid{color: rgba(255,255,255,.5); line-height: 30px}
.footRight{color: rgba(255,255,255,.5); line-height: 30px}
.footRight b{color: rgba(255,255,255,.8); display: block; margin-top: 10px}
.footRight a, .footMid a{color: rgba(255,255,255,.5); text-decoration: underline}
.footRight a:hover, .footMid a:hover{color: rgba(255,255,255,.9); text-decoration: none}

.bottomRow{background-color: rgba(40,40,40,1.0); margin: 0px -50px 0px -50px; padding: 15px 40px}
.bottomRow a{color: rgba(255,255,255,.6); font-weight: normal; text-decoration: none}
.bottomRow a:hover{color: rgba(255,255,255,.9); text-decoration: underline}


.tagline{text-align: center; margin: 10px 0px 25px 0px; color: rgba(68,68,68,0.75); font-size: 30px; font-weight: 300}
.tagline span{display: block; color: rgba(0,0,0,0.6); font-size: 16px}

.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: 96%}
	.usefulInfo{text-align: center; float: none}
	.navbar-header{float: none !important}
	.theButtons{padding: 0px 20px 0px 20px}
	.navbar-default .navbar-nav > li > a{font-size: 15px; padding: 17px}
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
	.navbar-collapse{padding: 0px}
	.item img{height: auto !important}
	.theContactInfo{text-align: center; margin-top: 20px}
	
	.theButtons{margin-bottom: 50px}
	.buttons{padding:60px 0px 40px 0px}
}


@media (max-width: 1080px) {
	.navbar-header {float: none;}
	.navbar-left,.navbar-right {float: none !important;}
	.navbar-toggle {display: block;}
	.navbar-collapse {border-top: none;}
	.navbar-fixed-top {top: 0; border-width: 0 0 1px;}
	.navbar-collapse.collapse {display: none!important;}
	.navbar-nav {float: none!important; margin-top: 10px; width: 100%}
	.navbar-nav>li {float: none;}
	.navbar-nav>li>a {padding-top: 10px;padding-bottom: 10px;}
	.collapse.in{display:block !important;}
	.navbar-default .navbar-toggle:hover, navbar-default .navbar-toggle:focus{background-color: rgba(255,255,255,.2)}
	.navvy .dropdown-menu{width: 100.2%}
	.navbar-default .navbar-toggle{float: none; margin-left: 48%}
	.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{background-color: rgba(255,255,255,.0)}
	.calButton{margin-bottom: 20px}
}

/* 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: 90%}
	.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn){width: 100% !important;}
	.item img{height: auto !important}
	.carouselContainer{margin: 40px 0px}
	.navbar-default .navbar-nav .open .dropdown-menu>li>a{color: rgba(255,255,255,0.6)}
	.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%}
	
	.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, .footMid{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 20px 20px 20px}
	.theButtons:nth-of-type(2){padding: 0px 20px 20px 20px}
	.theButtons:nth-of-type(3){padding: 0px 20px 20px 20px}
	.theButtons:nth-of-type(4){padding: 0px 20px 20px 20px}
	
	.topNav{padding-bottom: 280px}
	.buttons{margin:50px -26px 0px -26px}
	.footerRow{margin: -50px -26px 0px -26px}
	.bottomRow{margin: 0px -26px 0px -26px}
	
	.badgeIcon{margin: 0 auto; margin-bottom: 15px}
	
	.bgMid, .bgMidFoot, .bgMidAlt{background-attachment: scroll}
	.bgMidFoot, .bgMidAlt{background-position: 0, 0}
	
	.navbar-default .navbar-nav .open .dropdown-menu>.active>a, .navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus, .navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover{background-color: rgba(0,0,0,0.1); color: rgba(99,10,31,1.0)}
	.serviceTimes{margin-top: 30px}
	.footerContainer h2{margin-top: 45px; text-align: center}
	.bodyContainer{padding: 0px 25px}
	
	.navbar-default .navbar-toggle{float: none; margin-left: 44%}
}

/* 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{margin-top: 52px}
	img{display: inline-block; width: 100%; height: auto}
	.tagline{font-size: 30px}
	.testimonialContent h1{text-align: center}
	.btn-testimonial{margin-top: 30px}
	.navbar-default .navbar-toggle{float: none; margin-left: 44%}	
}

/* 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}
}