@import url('https://fonts.googleapis.com/css?family=Cinzel:400,700');

/************ COLORS  *********
#721C19 - Dark Red
#ffba74 - Peach
***/

/* DEFAULT FOR ALL */
body, p, h6 { color: #666; }
h1, h2, h3, h4, h5, h6 { margin: .75rem 0; line-height: 1.3; font-weight: normal;}

/* SIZES */
h1 {font-size: 2.5rem; }

/* FONTS */
body, p, h6 {font-family: 'Lato', sans-serif; }
h1, h2, h3, h4, h5 { font-family: 'Cinzel', serif;}

/* STYLING */
h1 {color: #721C19; font-weight: bold; font-size: 2.5rem;}
h2 {color: #721C19; border-bottom: 1px solid #666666; font-size: 2.25rem;}
h3 {color: #721C19; font-weight: bold; font-size: 2rem;}
h4 {background: #721C19; color: white; border-radius: .2rem; padding: .1rem .4rem; font-size: 1.75rem}
h5 {color: #721C19; text-transform: uppercase; font-weight: bold; font-size: 1.5rem;}
h6 {font-weight: bold; font-size: 1.5rem;}
a { color: #721C19; text-decoration: none; font-size: 1.25rem;}
ul, ol, dl {margin-top: -0.75rem;}

a:hover {color: #ffba74;}
blockquote {
  color: #666666;     
  padding: 0 0 0 15px;
    margin: 0 0 20px;
    border-left: 5px solid #d5d5d5;
  font: italic 16px/22px Georgia, Serif;
}

/************ ALIGN IMAGES CORRECTLY  ************/
img[align="left"], img[style*="float:left"], img[style*="float: left"], .pull-left  {padding-right: 10px; padding-bottom: 5px; padding-top: 5px;}
img[align="right"], img[style*="float:right"], img[style*="float: right"], .pull-right {padding-left: 10px; padding-bottom: 5px; padding-top: 5px;}

.page-header h2 {line-height: 2.5rem;}

/************ ALERT ************/
#alert {background: pink;}
#alert h1, #alert h2, #alert h3, #alert h4, #alert h5, #alert h6, #alert p, #alert a {color: #6D1A1A; padding-left: 1rem;}


/************ BUTTONS  ************/
.readon, .button { 
  color: white; 
  background: #721C19; 
  padding: .7rem 1.3rem; 
  border-radius: .5rem; 
  display: inline-block;
  font-weight: 500;
  line-height: 1.125rem;
  border: none;
}
.readon a, .button a {color: white; }
.readon:hover, .button:hover {background: #ffba74; color: white;}

/************* HOMELAYOUT **************/
.homelayout #g-mainbar {display: none;}

/************ LOGO ************/
#g-navigation img {
    max-width: 65%;
    padding: 1rem .5rem;
    float: none;
    display: table;
    margin: auto;
}
.g-main-nav .g-toplevel > li > .g-menu-item-container > .g-menu-item-content {
    font-family: 'Cinzel', serif;
    color: white;
    font-size: 1rem;
    padding-bottom: 0;
}
.g-main-nav .g-toplevel > li > .g-menu-item-container .g-menu-parent-indicator:after {display: none;}
.g-main-nav .g-sublevel > li > .g-menu-item-container {font-size: .9rem;}

/********** MENU **********/
#g-navigation .g-main-nav {background: #721C19;}
/*****
.g-main-nav ul.g-dropdown {float: none;display: table;margin: auto; }
.g-main-nav ul {float: none;display: table;margin: auto; }*****/
ul.g-toplevel {text-align: center;}

.g-main-nav .g-toplevel > li.active > .g-menu-item-container > .g-menu-item-content,
.g-main-nav .g-toplevel > li:hover > .g-menu-item-container > .g-menu-item-content{
    border-bottom: none;
    color: #ffba74;
}
.g-main-nav .g-standard > .g-dropdown.g-dropdown-right, .g-main-nav .g-fullwidth > .g-dropdown.g-dropdown-right {left: 0;}

.g-main-nav .g-sublevel > li:hover > .g-menu-item-container, .g-main-nav .g-sublevel > li.active > .g-menu-item-container {background: #721C19;}

#g-offcanvas #g-mobilemenu-container ul > li:not(.g-menu-item-type-particle):not(.g-menu-item-type-module).active > .g-menu-item-container, #g-offcanvas #g-mobilemenu-container ul > li:not(.g-menu-item-type-particle):not(.g-menu-item-type-module):hover > .g-menu-item-container {background: black;}


/*********** MOBILE MENU **********/
.g-offcanvas-toggle {top: .5rem; left: .5rem; color: #721C19;}
.g-offcanvas-toggle:hover {color: #ccc;}
#g-offcanvas #g-mobilemenu-container ul > li.g-menu-item-link-parent > .g-menu-item-container > .g-menu-parent-indicator {background: transparent; border: none;}
#g-offcanvas #g-mobilemenu-container .g-toplevel > li {margin: 0;}

/************ ROTATOR  ************/
.layout-slideshow .sprocket-features-pagination li, .layout-slideshow .sprocket-features-arrows .arrow {background: transparent; box-shadow: none; font-size: 4rem;}

.layout-slideshow .sprocket-features-content {top: 50%; left: 35%; width: 65%; right: 0;}
.layout-slideshow .sprocket-features-title, .layout-slideshow .sprocket-features-desc {background: transparent; text-shadow: 0 2px 3px #000000; padding-right: 3rem; line-height:2rem; border-bottom: none;}
.sprocket-features-content {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.6+100 */
    background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#99000000',GradientType=1 ); /* IE6-9 */
    text-align: right;
}
.layout-slideshow .sprocket-features-title {margin: 0;}


@media only screen and (min-width: 768px) and (max-width: 959px) {
    .layout-slideshow .sprocket-features-title, .layout-slideshow .sprocket-features-desc {font-size: 2rem;}
}
@media only screen and (max-width: 767px) {
        .layout-slideshow .sprocket-features-title, .layout-slideshow .sprocket-features-desc {font-size: 1rem; line-height: 1.3rem;}
    
    .layout-slideshow .sprocket-features-content {top: 25%; left: 0; width: 100%; right: 0;}
}



/************ QUICKLINKS  ************/
.quicklinks {margin-top: -4rem; z-index: 20;}
.quicklinks .g-content {background: black; padding: .5rem; }
.quicklinks .readon {
    max-width: 100%; 
    width: 100%; 
    background: black; 
    border: 1px solid white; 
    border-radius: 0; 
    height: 4rem;
    text-align: center;
    font-family: 'Cinzel', serif;}
}
.quicklinks .readon:hover {background: #721C19;}


@media only screen and (max-width: 767px) {
    .quicklinks {margin-top: 0;}
    .quicklinks .readon {height: 3rem;}
    .quicklinks .g-content {margin: .2rem;}
}


/************ MODULES  ************/

/************ MISSION STATEMENT  ************/
#g-header .mission-statement .g-content {border: 1px solid white; margin-bottom: 3rem;}
#g-header p {color: white; font-size: 1.4rem; line-height: 1.6rem; margin: 0;}

/************ PAGE HEADERS  ************/
/*#g-feature, #g-feature .g-content {
	width: 100%;
	margin: 0px;
	padding: 0px;
}

.customtitlepagemod {
	height: 150px;
	background-repeat: no-repeat;
	background-size: cover;
	/*opacity: 0.5;
}

.customtitlepagemod img { opacity: 0.1; }*/


/*.customtitlepagemod  div {
	background: rgba(255,255,255,0.8) url(images/noise.png) 0 0 no-repeat;
	height: 100%;
	text-align: center;
	vertical-align: middle;
	line-height: 200px;
}*/

/************ ORIGINAL - SONG OF THE FIRE, ETC. SECTION IMAGES ************/
img.song {margin-top: -4%; padding: 0 0 20px -1px; }
img.become {margin-top: -4%; padding: 0 0 20px 120px; }
img.song2 {margin-top: -4%; }

@media only screen and (min-width: 768px) and (max-width: 959px) { img.song2 {margin-top: -39%;}}

@media only screen and (max-width: 767px) {img.song, img.song2, img.become {display: none;}}

/************ SECTION IMAGES - Will need to add page class to menu items to activate these rules ************/
/*.blogabout { background: url(../content/images/songfromthefire.png) 100% 4% no-repeat;}
.blogconsecration { background: url(../content/images/intothefire.png) 100% 4% no-repeat;}
.blogprayer { background: url(../content/images/becomingfire.png) 100% 4% no-repeat;}
/*.blogprayer { background: url(../content/images/becomingfire.png) 100% 4% no-repeat, url(../content/images/becomingfire.png) 50% 100% no-repeat ;}*/
/*.page-header h2 {margin-bottom: 3.75rem; }*/

/*********** FOOTER ************/
#g-footer a, #g-footer p, #g-footer h1, #g-footer h2, #g-footer h3, #g-footer h4, #g-footer h5, #g-footer h6 {color: white;}
#g-footer a .fa.fa-lock { color: #BFBFBF; }
#g-footer a:hover .fa.fa-lock, #g-footer a:hover { color: #771e18; }

/************ DISCERNMENT  ************/
img.extrarightpadding { padding-right: 25px; padding-bottom: 5px; padding-top: 5px;}

/************ COMMON LIFE GRID MODULE  ************/
.sprocket-grids-b-text {text-align: center;}

@media only screen and (max-width: 480px) {
	.sprocket-grids-b-text { display: block; font-size: 11px; margin: -10px;}
}