@import url('//fonts.googleapis.com/css?family=Bellefair');

/************ 

Gemini 
Rotator Size: 1200x501 -- 2.39:1 (super wide)
30% black overlay on rotator
Drop shadow on rotator text to help legibility - 2px 2px 1px rgba(0,0,0,1)

Rotator text is the same on every slide: Trusting God in Profound Humility and Joy

--------------------------------------------------------------------------

** Fonts **
Script:Pinyon Script (rotator, headlines)
Serif: Bellefair Regular (rotator & footer)
Sans Serif: Lato

--------------------------------------------------------------------------
** Colors **

Gold: #D3B981, rgb(211,185,129)
Brown: #362317, rgb(54,35,23)

Homepage menu & body - transparent white - rgba(255,255,255,0.4)

They would like the body on the subpages to be a light cream: #EADDC5, rgb(234,221,197); could also try #E5D5B3, rgb(229,213,179); see which one looks better with the menu and header on subpages 

Quicklinks - rgba(54,35,23,0.5); hover rgba(54,35,23,0.8)

************/

body {color: #333; line-height: 1.3; } 

h1, h2, h3, h4, h5, h6 { margin: .75rem 0; line-height: 1.3; font-weight: normal;}
p { line-height: 1.3;}

h1 {color: #362317; font-size: 4rem; font-family: Bellefair, serif;}
h2, .page-header h2 { color: #362317; font-size: 3rem; border-bottom: none;  line-height: 1.3; margin: 0; padding: 0;}
h3 {color: #362317; font-size: 2.5rem; font-family: Bellefair, serif; margin: 0;}
h4 {background: #362317; font-size: 1.75rem;color: white; border-radius: .2rem; padding: .1rem .4rem; font-family: Bellefair, serif;}
h5 {color: #362317; font-size: 1.5rem; text-transform: none;}
h6 {color: #362317; font-size: 1.6rem; font-style: italic;}
a { color: #BE8858; }
.g-social a { color: #362317; }
.g-social a:hover { color: #988a59 !important; }
a:hover { color: #000; }
hr { border-bottom: 1px #362317 solid; padding: 0; margin: 5px 0;}

#g-footer a{ color: #362317;  }
#g-footer a:hover{ color: #000;  }

blockquote {
	color: #333;     
	padding: 0 0 0 15px;
	margin: 0 0 20px;
	border-left: 5px solid #d5d5d5;
	font: italic 16px/22px Georgia, Serif;
	line-height: 1.2;
	font-size: 1.3rem;
}

address {
	font-style: italic;
	font-weight: bold;
	font-size: 1.2rem;
	line-height: 1.2;
}

/************ BUTTONS  ************/
.readon, .button, .btn, p.readmore .btn   { 
  color: white; 
  font-size: 1rem;
  text-transform: none;
  font-weight: normal;
  background: #362317; 
  padding: .7rem 1.3rem; 
  border-radius: .5rem; 
  margin: 0;
  display: inline-block;
  font-weight: 500;
  line-height: 1.125rem;
  border: none;
  transition: all .2s ease-in;
}
#g-bottom a.button { background: #203B71;  }
.readon:hover, .button:hover, .btn:hover,  p.readmore .btn:hover {background: #777; color: white;}

.btn .icon-chevron-right { display: none;}

/************ TABLES  ************/
.fancytable th {color: white; background: #362317; border: 1px solid #362317;}
.fancytable td { border: 1px solid #362317;}

/************ ALERT ************/
.alert .g-content {padding: 0; margin: 0;}
.alert {border: none; padding: 0; margin: 0; background-color: #FFCFCF; color: #FF0000;}
.alert h1, .alert h2, .alert h3, .alert h4, .alert h5, .alert h6, .alert p { margin-left: 20px; color: red; background: transparent; }
.alert h1, .alert h2, .alert h3, .alert h4, .alert h5, .alert h6 { font-family: Bellefair, san-serif; }

/************ BACKGROUNDS  ************/
body #g-page-surround { background: #D3B981 url(../images/template/pattern.png) 0 0 repeat; }
#g-slideshow > .g-grid { background: rgba(255,255,255,0.4); border-radius: 5px 5px 0 0; } 
#g-above > .g-grid, #g-container-main > .g-grid, #g-feature > .g-grid { background: rgba(255,255,255,0.4); }
#g-feature > .g-grid {  border-radius: 0 0 5px 5px;}
#g-feature:before { display: none; }

/************ LOGO  ************/
.g-logo { text-align: center; display: block; }

/************ HOME  ************/
.page-header h2 { text-align: center; }
#g-slideshow > .g-grid {border-bottom: 1px #362317 solid;} 
.homelayout #g-slideshow > .g-grid {border: none; } 

/************ BASIC MENU FIXES  ************/
.g-main-nav .g-toplevel > li:hover > .g-menu-item-container, .g-main-nav .g-toplevel > li.active > .g-menu-item-container { color: #8c7d48; }
.g-main-nav .g-standard > .g-dropdown.g-dropdown-right, .g-main-nav .g-fullwidth > .g-dropdown.g-dropdown-right { margin-top: 5px;}
.g-main-nav .g-sublevel > li:hover > .g-menu-item-container, .g-main-nav .g-sublevel > li.active > .g-menu-item-container { background: rgba(255,255,255,.2); border-radius: 5px;}
#g-navigation { padding-bottom: 0px; }

#g-slideshow .size-5 { display: flex; align-items: center; justify-content: center; }
#g-slideshow .size-5 > div { flex: 1;  }
#g-slideshow > .g-grid .g-content, #g-header > .g-grid .g-content { padding: 0; margin: 0; }
.g-main-nav ul { padding: 5px 0;}

.g-main-nav .g-toplevel > li > .g-menu-item-container { font-size: 1.2rem; font-weight: bold;}

.g-main-nav .g-toplevel > li.g-parent .g-menu-parent-indicator {display: none; }
.g-main-nav .g-toplevel > li > .g-menu-item-container, .g-main-nav .g-sublevel > li > .g-menu-item-container {font-size: 1rem; }

.g-main-nav ul.g-toplevel {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
}
.g-main-nav .g-standard .g-fade.g-dropdown { z-index: 10;}
.g-main-nav .g-dropdown { border-radius: 0 0 6px 6px;}

.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-dropdown { background: #362317 url(../images/template/pattern.png) 0 0 repeat; }
.g-main-nav .g-dropdown {  box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.5); }


@media only screen and (max-width: 767px) { 
	.g-logo img { width: 70%;} 
	.g-offcanvas-toggle {
		top: 20px;
		left: 20px;
	}
}


/************ SIDE MENU  ************/
.nav.menu { background: #362317;  } 
#g-aside .moduletable[class*="box"] { padding: 0; }
#g-aside .g-content { padding-left: 0; padding-right: 0px;}
.moduletable .nav.menu li a { width: 100%; border-radius: 0; padding: 10px 20px; color: white; font-weight: normal;}
.moduletable .nav.menu li{ transition: all .2s ease-in; border-radius: 3px; width: 100%; padding: 0; margin: 0;}
.moduletable .nav.menu, .moduletable .unstyled { border: none; padding: 0; margin: 0; display: block;}
.moduletable .nav.menu li:last-child {  padding-bottom: 0;  margin-bottom: 30px;}
.moduletable .nav.menu .nav-child li:last-child {  margin-bottom: 0px;}
.moduletable .nav .nav-child { margin-top: 0px;}
.moduletable .nav.menu .nav-child li { border: none; margin-left: 20px; padding-right: 20px;}

.moduletable .nav.menu li.current.active a, .moduletable .nav.menu li a:hover { 
	color: #362317;
	background: #D3B981;
	font-weight: normal;
}

/************ ROTATOR - FULL WIDTH ************/

.sprocket-features-list h3, .sprocket-features-list h2 { color: white;  text-shadow: 2px 2px 1px rgba(0,0,0,1); }
.sprocket-features-list h3 { font-size: 3rem; line-height: 1;}
.sprocket-features-list h2  { line-height: 1;}

.sprocket-features-list li .sprocket-features-container { width: 100%; height: 33vw; overflow: hidden; position: relative; }
.arrows-active .sprocket-features-list { margin-left: 0px; margin-right: 0px;}
.sprocket-features-list li .sprocket-features-container .sprocket-features-img-container { position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 1; }
.sprocket-features-list li .sprocket-features-container .sprocket-features-content {  
	position: absolute; 
	z-index: 2; 
	top: 0%;
	right: 0%;
	bottom: 0%;
	left: 0%; 
	background: rgba(0,0,0,.3);
	padding: 30px;
	overflow: hidden; 
	display: flex;
	align-items: flex-end;
	justify-content: center; 
}

.layout-showcase .sprocket-features-img-container img { float: none; width: 100%;  height: 33vw; object-fit: cover; object-position: center; }
.layout-showcase .sprocket-features-pagination li { padding: 8px;}
.pagination-active .sprocket-features-pagination { bottom: 15px; } 

@media only screen and (max-width: 767px) {
	.sprocket-features-list li .sprocket-features-container { height: 54vw;}
	.sprocket-features-list li .sprocket-features-container .sprocket-features-img-container { position: relative; }
	.sprocket-features-list li .sprocket-features-container .sprocket-features-content { top: 33vw; right: 0; bottom: 0; left: 0; padding: 15px; }
    .sprocket-features-list li .sprocket-features-container .sprocket-features-content {  overflow: auto; background: none; }
	.sprocket-features-list h3 { font-size: 8vw;}
	.sprocket-features-list h2  { font-size: 7vw;}
}

/************ BIGGER ARROWS ON SLIDESHOW ************/
.sprocket-features.layout-showcase.arrows-active.arrows-onhover .sprocket-features-arrows .arrow { 	background: none; box-shadow: none; color: white;}
.sprocket-features.layout-showcase.arrows-active.arrows-onhover .sprocket-features-arrows .arrow { font-size: 5rem; }
.arrows-active .sprocket-features-list {margin: 0px; }
.arrows-onhover .sprocket-features-arrows .arrow.prev { margin-left: 0;}
.arrows-onhover .sprocket-features-arrows .arrow.next { margin-right: 0;}

@media only screen and (max-width: 767px) {
	.sprocket-features-pagination, .sprocket-features-arrows { display: none;}
}

/************ QUICKLINK PICS  ************/
.quicklinkpics {display: flex;}
.quicklinkpics > div {
	flex: 1; 
	height: 200px; 
	position: relative; 
	transition: all .35s ease-in-out;
	margin: 0 20px;
}
.quicklinkpics > div:first-child { margin-left: 0px;}
.quicklinkpics > div:last-child { margin-right: 0px;}
.quicklinkpics > div > a { 
  position: absolute; 
  top: 0; bottom: 0; right: 0; left: 0; 
  font-size: 1.6rem; 
  background: rgba(54,35,23,0.5);
  color: white;
  transition: all .35s ease-in-out;
}
.quicklinkpics > div > a > div { 
	position: absolute; 
	top: 0; bottom: 0; right: 0; left: 0; 
	border: 1px white solid; 
	margin: 5%; 
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;	
	transition: all .35s ease-in-out;
	font-family: 'Pinyon Script', serif;
	font-size: 2.5vw;
	line-height: 1.1;
}

.quicklinkpics > div:hover > a > div { margin: 0; border: 1px rgba(255,255,255,.1) solid; }


.quicklinkpics > div:hover {
}
.quicklinkpics > div:hover > a {background: rgba(54,35,23,0.8);}

.quicklinkpics > div > div > img {
  object-fit: cover; 
  object-position: center;
  height: 200px;
  width: 100%;
}

@media only screen and (max-width: 767px) {
	.quicklinkpics { display: block; border: none;}
	.quicklinkpics > div > a, .quicklinkpics > div > a > div { position: relative; }
	.quicklinkpics > div > div > img { height:  90px; width:  120px;}
	.quicklinkpics > div > a > div img { max-height: 90px; padding: 10px 0; }
	.quicklinkpics > div { display: flex; }
	.quicklinkpics > div { background: #362317;  }
	.quicklinkpics > div > a { background: none; flex:1; }
	.quicklinkpics > div { height: auto; border-bottom: 1px #ffffff solid;}
	.quicklinkpics > div > a > div { border: none; }
	.quicklinkpics > div > a { display: flex;  align-items: center; justify-content: flex-start; }
	.quicklinkpics > div > a > div {  margin: 0 0 0 20px; font-size: 6.5vw;}
	.quicklinkpics > div:hover > a > div {margin: 0 0 0 20px; border: none; }
	.quicklinkpics > div, .quicklinkpics > div:first-child, .quicklinkpics > div:last-child { margin: 10px;}
}

/************ FOOTER  ************/
#g-footer { border: none;}

/************ TOP PICTUES  ************/
#g-header .moduletable  p { padding: 0; margin: 0; }
#g-header .moduletable  img { width: 100%; }

#g-slideshow > .g-grid { border: none;}

blockquote { border-left: none;}