/*
 * Styles
 * 
 */

/* ==========================================================================
   Base styles and resets
   ========================================================================== */

html{color:#000;background:#FFF;}body,div,dl,dt,dd,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}caption,th{text-align:left;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}
html{-webkit-text-size-adjust: none;}
strong{ font-weight:bold;}
img{ vertical-align:top;}
.cl{ clear:both; font-size:0;}

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: sans-serif; color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.4; }

a { color: #222; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

/* ==========================================================================
   General styles
   ========================================================================== */
html { background:#c9c9c9 url(/Images/bg.jpg) center top repeat-y; }
body { font-family: sans-serif; color:#414042; font-size:12px; }

#wrapper { width:941px; margin:0 auto; position:relative; min-height: 300px; }
#wrapper:before, #wrapper:after { content: ""; display: table; }
#wrapper:after { clear: both; }
#wrapper { *zoom: 1; }

a { outline:none!important; }
	a:hover { text-decoration: none; }



* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { /* WebKit browsers */
	opacity:1;
    color:#fff;
}
input:-moz-placeholder, textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	opacity:1;
}
input::-moz-placeholder, textarea::-moz-placeholder { /* Mozilla Firefox 19+ */
	opacity:1;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder { /* Internet Explorer 10+ */
	opacity:1;
}

.col12 {
    width: 100%;
    float: left;
}
.col11 {
    width: 91.66666666666666%;
    float: left;
}
.col10 {
    width: 83.33333333333334%;
    float: left;
}
.col9 {
    width: 75%;
    float: left;
}
.col8 {
    width: 66.66666666666666%;
    float: left;
}
.col7 {
    width: 58.333333333333336%;
    float: left;
}
.col6 {
    width: 50%;
    float: left;
}
.col5 {
    width: 41.66666666666667%;
    float: left;
}
.col4 {
    width: 33.33333333333333%;
    float: left;
}
.col3 {
    width: 25%;
    float: left;
}
.col2 {
    width: 16.666666666666664%;
    float: left;
}
.col1 {
    width: 8.333333333333332%;
    float: left;
}

@font-face {
    font-family: 'AlteHaasGroteskBold';
    src: url('fonts/altehaasgroteskbold.eot');
    src: url('fonts/altehaasgroteskbold.eot') format('embedded-opentype'),
         url('fonts/altehaasgroteskbold.woff') format('woff'),
         url('fonts/altehaasgroteskbold.ttf') format('truetype'),
         url('fonts/altehaasgroteskbold.svg#AlteHaasGroteskBold') format('svg');
}

/* ==========================================================================
   Home
   ========================================================================== */
header { width: 100%; height: 245px; z-index: 1000; position: relative; }
#menu { height: 120px; background-color: #fff; text-align: center; }
#menu ul { text-align: center; margin-top: 21px; padding:0; }
#menu li { display: inline-block; border-right: 1px solid #b5b5b5; line-height: 1.1em; position: relative; }
#menu li:last-child { border: 0 none; }
#menu li:last-child a { padding-right: 0; }
#menu li a { font-family: "chaparral-pro",serif; padding: 0 18px; display: block; line-height: 1.1em;  font-size: 17px; color: #969595; text-decoration: none;
font-style:italic; }
#menu li.on a, #menu li a:hover  { color: #ffd600; }
#menu li ul { display: none; position: absolute; top: 30px; left: -15px; z-index: 101; background: url(/Images/bg-menu.png); padding: 20px 25px 10px;
overflow: hidden; margin: 0;  }
#menu li ul li { padding: 0; border: 0 none; display: block; float: none; margin-bottom: 10px; }
#menu li ul li a { color: #fff; display: inline-block; padding: 0; position: relative; }
#menu li ul li a:hover { color: #fff;  }
#menu li ul li a:hover:after { position: absolute; content: ">"; top: 0; left: -14px; color: #fff; font-family: "chaparral-pro",serif; font-size: 14px; }
#menu li ul li a:hover:before { position: absolute; content: "<"; top: 0; right: -14px; color: #fff; font-family: "chaparral-pro",serif; font-size: 14px; }
#menu-toggle { display: none; }

#logo { width: 100%; height: 180px; background: url(/Images/logo.png); display: block; text-indent: -999999px;
position: absolute; bottom: 0; }
#logo:before { width: 14px; height: 119px; content: ""; background: url(/Images/logo-left.png); position: absolute; top: 36px; left: -14px; display: block; }
#logo:after { width: 13px; height: 119px; content: ""; background: url(/Images/logo-right.png); position: absolute; top: 36px; right: -13px; display: block; }

#slider { margin-top: -35px; position: relative; height: 378px; }
#slider .slide { position: absolute; top: 0; left: 0; width: 100%; }
#slider .slide p { position: absolute; width: 100%; bottom:15px; left: 0; text-align: center; font-family: "chaparral-pro",serif; font-style:italic; font-size: 18px;
color: #fff; line-height: 1.2em; }
.cycle-pager { position: absolute; bottom: 66px; left: 0; width: 100%; text-align: center; z-index: 101; }
.cycle-pager span { display: inline-block; width: 13px; height: 13px; border-radius: 15px; text-indent: -99999px; background-color: #e3dcd1; margin: 0 5px;
cursor: pointer; } 
.cycle-pager span.cycle-pager-active { background-color: #e5bf18; }

#home-boxes { background-color: #fff; padding-bottom: 50px; padding-top: 20px; }
.row { margin: 0 -10px; }
.row>div { padding: 0 10px; }

.box { background-color: #e7e6e2; height:300px;  }
.title { line-height: 42px; background: url(/Images/bg-title.png); text-align: center; font-family:"AlteHaasGroteskBold"; letter-spacing: 1px;
font-size: 27px; color: #b89a00; text-shadow: -1px -1px 0px rgba(0,0,0,0.4); position: relative; }
.corner:before { width: 13px; height: 54px; content: ""; background: url(/Images/corner-left.png); position: absolute; top: 0; left: -13px; display: block; }
.corner.corner-right:before { background: url(/Images/corner-right.png); width: 12px; left: auto; right: -11px; }
.box-cont { position: relative; background-color: #e7e6e2; padding: 20px 20px 30px 95px; }
.box-cont img { position: absolute; top: 20px; left: 25px; }
.box-cont p { font-size: 12px; color: #414042; line-height: 1.3em; margin-bottom: 6px; }
.box-cont p a { color: #414042; text-decoration: underline; }
.box-cont p a:hover { text-decoration: none; }
.box-banner { padding: 4px 10px 10px 100px; background: url(/Images/bg-title2.png); height: 67px; position: relative; }
.box-banner:before { width: 13px; height: 79px; content: ""; background: url(/Images/corner-left2.png); position: absolute; top: 0;
left: -13px; display: block; }
.box-banner img { position: absolute; top: 8px; left: 25px; }
.box-banner h3 { line-height: 1em; margin-bottom: 4px; margin-top:5px; color: #796c5a; font-size: 27px; font-family:"AlteHaasGroteskBold"; letter-spacing: 1px;
text-shadow: -1px -1px 0px rgba(0,0,0,0.4); }
.box-banner a { font-size: 12px; font-weight: bold; text-decoration: underline; color: #fff; }
.box-banner a:hover { text-decoration: none; }
.box .row { margin: 6px 3px; }
.box .row>div { padding: 0 3px; }
.box .row>div img { width: 100%; height: auto; }
.box-cont.alt { padding: 10px 20px 10px 95px }
.box-cont.alt img { top: 10px; }
.news-list { height: 303px; padding: 0px 0px 0 30px; display: block; overflow: hidden; }
.news-list ul { height: 283px; left: 1px; position: relative; }
.news-list li { margin-top: 15px; color: #414042; display: block; padding-right: 20px; }
.news-list li h4 { font-size: 12px; font-weight: bold; margin-bottom: 5px; }
.news-list li h4 span { font-weight: normal; }
.news-list li p { font-size: 12px; margin-bottom: 2px; }
.news-list li a { font-size: 12px; display: inline-block; color: #414042; text-decoration: underline; }
.news-list li a:hover { text-decoration: none; }
.box-news { height: auto; }
.big-banner { width: 100%; height: 93px; background: url(/Images/bg-title3.png); margin-top: 40px; position: relative;
padding-top: 7px; padding-left: 40px; padding-right: 20px; }
.big-banner:before { width: 13px; height: 104px; content: ""; background: url(/Images/corner-left3.png); position: absolute; top: 0;
left: -13px; display: block; }
.big-banner h2 { color: #92887b; line-height: 1em; margin-bottom: 10px; font-size: 22px; font-family:"AlteHaasGroteskBold"; text-transform: uppercase;
 letter-spacing: 1px; }
.big-banner p { color: #92887b; line-height: 1em; font-size: 18px; font-family:"AlteHaasGroteskBold"; text-transform: uppercase; letter-spacing: 1px; }
.big-banner a { color: #92887b; }

/* ==========================================================================
   Footer
   ========================================================================== */
footer { padding: 20px 0 40px; }
footer a { float: right; }
footer p a { float: none; color: #808180; }
footer p { float: left; color: #808180; font-size: 12px; }

/* ==========================================================================
   Inner
   ========================================================================== */
#page-img { height: 150px; width: 100%; position: relative; background: url(/Images/bg-inner.jpg) center top no-repeat;
margin-top: -38px; }
#main { background-color: #fff; }
#main .wrap { margin-top: -22px; position: relative; }
#content { width:620px; float: left; padding: 0 60px; }
#sidebar { width:300px; float: right;  }
#content p { font-size: 14px; line-height: 1.2em; margin-bottom: 25px; }
.person { margin-bottom: 30px; }
.person:last-child { margin: 0; } 
.person img { float: left; margin-right: 30px; }
#content h1 {
    margin:0 -60px;
    margin-bottom:25px;
}

.widget-events { background-color: #e7e6e2; margin-bottom: 7px; margin-top:-22px;  }
.widget-events .title { background-image: url(/Images/bg-title4.png); color: #736758; }
.widget-events .title:before { background-image: url(/Images/corner-right2.png); }
.widget-events p.info { font-size: 12px; color: #414042; line-height: 1.3em; padding:20px 30px; }
.widget-events p.info a { color: #414042; text-decoration: underline; }
.widget-events .row { margin: 6px -3px; }
.widget-events .row>div { padding: 0 3px; }
.widget-events .row>div img { width: 100%; height: auto; }
.widget-events .inner { padding: 0 6px; }

.box-banner:before { left: auto; right: -13px; background-image: url(/Images/corner-right3.png); background-repeat: no-repeat; }

.quote { height: 191px; background: url(/Images/bg-widget.jpg); padding: 30px; text-align: center; margin: 7px 0; }
.quote p { padding: 12px 0; font-size: 22px; color: #5d633e; font-family: "chaparral-pro",serif; font-style:italic; line-height: 1em;
border-bottom: 1px solid #4d5425; border-top: 1px solid #4d5425; }
.quote span { font-family: "chaparral-pro",serif; font-style:italic; line-height: 1em; padding-top: 9px; font-size: 14px; color: #5d633e; display: inline-block; }

.banner-img { margin-bottom: 7px; display: block; }



/* ==========================================================================
   Responsive
   ========================================================================== */
@media only screen and (max-width: 966px) {
    #wrapper { width: 748px; }
    
    /* Header */
    #logo { background-size: contain; background-repeat: no-repeat; }
    #logo:before { background-size: contain; background-repeat: no-repeat; height: 96px; left: -11px; top:28px;  }
    #logo:after { background-size: contain; background-repeat: no-repeat; height: 96px; right: -12px; top:28px;   }
    
    /* Homepage */
    #slider { margin-top:-65px; height: auto; }
    .big-banner h2 { font-size: 18px; letter-spacing: 0; }
    .big-banner p { font-size: 16px; letter-spacing: 0; }
    .box-cont { padding-bottom: 10px; }
    .box-banner h3, .title { font-size: 24px; letter-spacing: 1px; }
    
    /* Inner */
    #content { width:428px; float: left;  }
    #sidebar { width:300px; float: right;  }
    #page-img { margin-top: -65px; }
    #content .text { padding: 30px; }
    
    /* Footer */
    footer p { font-size: 11px; }

}

@media only screen and (max-width: 760px) {
    #wrapper { width: 100%; overflow: hidden; }
    .col12-mobile { width: 100%; }
    
    header { height: 230px; }
    #menu-toggle { display: block; line-height: 1em; font-size: 20px; font-family: "chaparral-pro",serif; font-style:italic; display: block; color: #969595;
    text-decoration: none; padding: 19px 0 0; }
    #menu>ul { max-height: 0; overflow: hidden; position: absolute; top: 30px; left: 0; width: 100%; background-color: #fff; z-index: 101; padding:0; margin:0;
    transition: all 400ms ease; -webkit-transition: all 400ms ease; }
    #menu>ul.active { max-height: 100em; }
    #menu>ul>li { display: block; padding: 0; margin: 7px 0; border: 0 none; }
    #menu>ul>li>a { padding: 0; }
    #menu>ul>li>ul { background: none; position: relative; top: 0; padding: 10px 0 0; border-top:1px solid #eeeeee; border-bottom:1px solid #eeeeee; left: 0; }
    #menu>ul>li>ul a { color: #969595; font-size: 16px; }
    #menu>ul>li>ul a:hover { color: #ffd600; }

    #slider { margin-top:-20%; }
    #home-boxes { padding: 0; }
    .corner:before, .box-banner:before, #logo:before, #logo:after { display: none; }
    .box, .big-banner { height: auto; }
    .big-banner { padding: 10px 20px; margin: 0; }
    .big-banner h2 { font-size: 16px; margin-bottom: 8px; }
    .big-banner p { font-size: 13px; }
    .box img { display:block; margin: 0 auto; }
    .cycle-pager { display: none; }
    
    footer { padding: 20px 10px; }
    footer a, footer p { float: none; }
    footer img { padding-top: 10px; }
    
    /* Inner */
    #content { width:100%; float: none;  }
    #sidebar { width:100%; max-width: 300px; margin: 0 auto; float: none;  }
    #page-img { margin-top: -20%; }    
    
}

@media only screen and (max-width: 480px) {
    .col12-xmobile { width: 100%; }
    
    #menu { height: 90px; }
    #slider { margin-top:-40%; }
    #slider .slide p { font-size: 11px; }
    
    #page-img { margin-top: -40%; }   
    
}

/* ==========================================================================
   Custom Scroll
   ========================================================================== */
.jspContainer{overflow:hidden;position:relative;}
.jspPane{position:absolute;}
.jspVerticalBar{position:absolute;top:0;right:0;width:8px;height:100%;background:red;}
.jspHorizontalBar{position:absolute;bottom:0;left:0;width:100%;height:16px;background:red;}
.jspCap{display:none;}
.jspHorizontalBar .jspCap{float:left;}
.jspTrack{background:#cccac7;position:relative;}
.jspDrag{background:#b6b5b2;position:relative;top:0;left:0;cursor:pointer;}
.jspHorizontalBar .jspTrack,.jspHorizontalBar .jspDrag{float:left;height:100%;}
.jspArrow{background:#50506d;text-indent:-20000px;display:block;cursor:pointer;padding:0;margin:0;}
.jspArrow.jspDisabled{cursor:default;background:#80808d;}
.jspVerticalBar .jspArrow{height:16px;}
.jspHorizontalBar .jspArrow{width:16px;float:left;height:100%;}
.jspVerticalBar .jspArrow:focus{outline:none;}
.jspCorner{background:#eeeef4;float:left;height:100%;}
* html .jspCorner{margin:0 -3px 0 0;}



#standardSermonsObject {
    margin-top:25px;
}

#standardEventItemsObject {
    margin-top:25px;
}

#standardNewsItemsObject {
    margin-top:25px;
}

.events img {
    margin-bottom:7px;
}