/* ==================================
C-C-C Family Assn. - 3rd generation website - style-banner.css
-------------------------------------
Fonts: Raleway & Open Sans
-------------------------------------
Colors:
Tan Hide:       	#f79256
Raw Sienna:			#c86e41
Colonial White:		#fee9ba
Water Leaf:			#a5edde
Patina:				#5ea089
Baby Blue:			#deffff
Hippie Blue:		#6590b5
White:				#fff
Black:				#000
====================================*/
	.header { 
		grid-column:1 /span3;
		grid-row:1;
		grid-area: header;}
		
	.menu1 { 
		grid-column:1 /span2;
		grid-row:2;
		grid-area: menu1;
	}
		
	.breadcrumb { 
		grid-column:1 /span2;
		grid-row:3;
		grid-area: breadcrumb;
	}
	
	.search { 
		grid-column:3;
		grid-row:2 /span2;
		grid-area: search;
	}	
	.slider { 
		grid-column:1 /span3;
		grid-row:4;
		grid-area: slider;
	}
	.left-nav { 
		grid-column:1;
		grid-row:5 /span3;
		grid-area: left-nav;
	}
	.article1 {
		grid-column:2 /span2;
		grid-row:5;
		grid-area: article1;
	}
	.article2 {grid-area: article2;
	}
	.footer {
		grid-column:1 /span3;
		grid-row:9;
		grid-area: footer;
		background-color:white;
		display:grid;
		grid-template-columns:1fr 2fr 1fr;
		grid-template-rows:auto auto;
		grid-template-areas:
		'hor-rule hor-rule hor-rule'	
		'footer-col-1 footer-col-2 footer-col-3';
	}
.footer .hor-rule {
	grid-column:1 /span3;
	grid-row:1;
	grid-area:hor-rule;
}
.footer .footer-col-1 {
	grid-column:1;
	grid-row:2;
	grid-area:footer-col-1;
}
.footer .footer-col-2 {
	grid-column:2;
	grid-row:2;
	grid-area:footer-col-2;
}
.footer .footer-col-3 {
	grid-column:3;
	grid-row:2;
	grid-area:footer-col-3;
}
	.grid-container {
  		display: grid;
  		grid-template-areas: 
		  'header 		header 		header '
		  ' menu1       menu1    	search'
  		  ' breadcrumb  breadcrumb	search'
		  ' slider 		slider 		slider '
		  ' left-nav  	article1 	article1 '
		  ' left-nav  	article2 	article2'
		  ' left-nav 	.  			.'
		  ' footer 		footer 		footer ';
		grid-gap: 1px;
		grid-template-columns: 250px auto 250px;
  		background-color: #fdd091;
  		padding: 0;
		grid-template-rows: 65px 27px 27px 140px auto auto auto auto auto;
	}
	.center-text {
		text-align:center;
	}
	*{
		box-sizing: border-box;
	}	
/* ==================================
Preloader
====================================*/
#preloader {
	background-color: white;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	
}
#status {
	background-image: url("../images/preloader/preloader.gif");
	background-repeat: no-repeat;
	width: 70px;
	height: 70px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -35px;
	margin-left: -35px;
	z-index: 9999;
}
.header{
	grid-column:1 /span3;
	grid-row:1;
	grid-area:header;
	margin-top:-5px;
	margin-left:4px;
}
	#title-panel{
	position: fixed;
	grid-area:header;
	display: grid;
	grid-template-columns:130px 1fr;
	grid-template-areas:"logo title";
	background-image:url('../images/ccc.jpg');
	background-repeat: yes;
	height: 65px;
	width: 100%;
	/*float:left;*/
	border:3px #5ea089 solid;
	background: cover;
	color: #5ea089;
	text-align: center;
	padding: 0;
	margin-left:-5px;
	margin-top:5px;
	z-index:25;
}
#ccc-logo {
	grid-area:logo;
	height:50px;
	width:auto;
	border:3px solid #5ea089;
	margin: 5px 0 0 4px;
	/*float: left;*/
	}
#title-bar-2 {
	grid-area:title;
	font-family: "Perpetua", "Times New Roman", serif;
	font-size: 3.4vw;
	line-height: 33px;
	font-weight: 500;
	margin-top:10px;
	text-align: center;
	z-index: 30;
}
	
/*=========================================*/
/*     Menu Bar
/*=========================================*/
#nav-bar {
	grid-column:1 /span2;
	grid-row:2;
	position: fixed;
	grid-area: menu1;
	/*display: flex;
	flex-direction:row;*/
	border: 1px black solid;
	background-color: #fbd1a2;
	color: #38cfde;
	height: 27px;
	margin-top:65px;
	margin-left:0px;
	/*margin-right: 20px;*/
	width: 87%;
	z-index: 30;
}
.nav-btns{
	list-style-type: none;
	display: flex;
	flex-direction:row;
	margin-left:10px;
	margin-top: -26px;
}
/*#nav-bar-w3-abt1 {
	position: fixed;
	border-bottom: 1px black solid;
	background-color: #94ffff;
	height: 27px;
	margin-top: 3px;
	margin-left:0px;
	margin-right: 20px;
	margin-bottom: 4px;
	z-index: 30;
}*/
.button1 .button-home {
	margin-top:5px;
	margin-left:5px;
	font-size: 12px;
	display: flex;
	background-color: aliceblue;
	border:1px solid black;
	border-radius:5px;
	font-weight:400;
	color: #006477;
	padding: 3px;
	-webkit-transition: all .5s;
	transition: all .5s;
}
.button1 {
	list-style-type: none;
	display: flex;
	flex-direction: row;
	color: #006477;
	text-decoration: none;
	font-size:12px;
	background-color: aliceblue;
	border-radius:6px;
	border:1px solid black;
	margin-top:2px;
	padding: 3px;
	margin-left:6px;
	font-weight: 400;
	-webkit-transition: all .5s;
	transition: all .5s;
}

.button-home:hover,
.button1:hover {
	color: white;
	background-color: #006477;
	text-decoration: none;
	-webkit-transition: all .5s;
	transition: all .5s;
}

#menu-bars {
	margin-right:230px;
	padding-bottom: 20px;
	overflow-y: hidden;
	z-index:50;
}
#menu-bars-button {
	position: fixed;
	border: 1px black solid;
	background-color: aliceblue;
	margin-top:-24px;
	margin-left:56px;
	margin-right: 20px;
	width:27px;
	padding:3px;
	height: 22px;
	-webkit-transition: all .5s;
	transition: all .5s;
	z-index: 50;
}
#menu-bars:hover {
	color: white;
}
.w3-overlay {
	position: fixed;
	display: block;
	width: 100%;
	height: 40%;
	top: 135px;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.6);
	z-index: 30;
	cursor: pointer;
}
#vertical-btns {
	background-color: none;
	width: 30%;
	/*height: 100%;*/
	position: fixed;
	top: 150px;
	left: 0;
	-webkit-transition: all .5s;
	transition: all .5s;
	z-index: 30;
}
.w3-bar-block > vertical-btns  a:hover,
.w3-bar-block > vertical-btns  a:focus{
	background-color:bisque;
	text-decoration: none;
	color:black;
	-webkit-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
	
}
	.grid-container .menu1 {
		grid-column: 1 / span 2;
		grid-row:2;
	}
	
	.breadcrumb {
		grid-area: breadcrumb;
		/*border:2px solid green;*/
		/*grid-column:1 / span2;*/
		grid-row:3;
		height:27px;
	}
	/*=========================================*/
/*     Breadcrumb
/*=========================================*/
.container-breadcrumb-lw {
	position:  fixed;
	/*grid-area: breadcrumb;*/
	background-color: #fdd091;
	border-bottom:1px solid black;
	height:27px;
	display:flex;
	flex-direction:row;
	margin-top:92px;
	margin-left: -40px;
	width: 89%;
	z-index: 15;
}

.bc-bar {
	/*list-style-type: none;*/
	/*background-color: #deffff;*/
	display:flex;
	flex-direction:row;
	/*background-color: none;*/
	/*margin:0px 0 0 -15px;*/
	/*padding:3px 3px 0 0;
	/*margin-left: 0px;*/
	z-index: 8;
}
	.bc-btn-home {
	/*style="float:left; padding-right: 3px; margin-left: 3px; margin-right: 3px;"*/
	list-style-type: none;
	text-decoration:none;
	display: flex;
	flex-direction:row;
	color: white;
	background-color: #deffff;
	margin:-6px 26px 0 -10px;
	font-size: 12px;
	height: 22px;
	border:1px solid black;
	border-radius: 5px;
	padding: 3px 8px 5px 3px;
	text-decoration: none;
	z-index: 30;
}

.bc-btn {
	/*style="float:left; padding-right: 3px; margin-left: 3px; margin-right: 3px;"*/
	list-style-type: none;
	text-decoration:none;
	display: flex;
	flex-direction:row;
	color: white;
	background-color: #deffff;
	margin:-6px 26px 0 -20px;
	font-size: 12px;
	height: 22px;
	border:1px solid black;
	border-radius: 5px;
	padding: 3px 8px 5px 3px;
	text-decoration: none;
	z-index: 30;
}

.bc-btn-home:hover,
.bc-btn:hover{
	text-decoration-color: white;
	
	background-color: #c86e41;
}
.bc-btn-home,
.bc-btn-home:hover,
.bc-btn,
.bc-btn:hover{	
	-webkit-transition: all .5s;
	transition: all .5s;
}
/*=========================================*/
/*     Search Box
/*=========================================*/
	.search {
		grid-area: search;
		border:2px solid red;
		grid-column:3;
		grid-row-start:2;
		grid-row-end:3;
		height:54px;
		width:250px;
		
	}
	.sb-container {
	border:1px solid black;
	/*background-attachment: fixed;*/
	position: fixed;
	border-radius: 5px;
	width:245px; 
	height: 54px;
	background-color: #fff8c9;
	padding:5px;
		padding-top:5px;
	right:0;
	margin-top:65px;
	/*overflow-y: hidden;*/
	z-index: 50;
}
	#search-row1 {
		
		font-family:Arial, Helvetica, sans-serif;
		font-size:14px;
	}
	#search-row1 form {
		
		margin:3px 0 0 2px;
		height: 25 px;
	}
	.sbtext1 {
		color: #13bcd1;
		font-size: 10px;
	}
	#search-btn {
		
	font-size:12px;
	}
	#search-form {
		margin-top:0;
		width:150px;
		height:25px;
		z-index: 50;
	}
	#text-box-input {
		width:150px;
		margin-top: 0px;
		margin-left:-5px;
	}
	
.sbtext3 {
	color: #c86e41;
	font-size: 10px;
}
.sbcolor60 {
	font-family: "Raleway", sans-serif;
	text-transform: uppercase;
	font-size: 10px;
	color: #c86e41;
}
.sbfont3 {
	font-family: "Raleway", sans-serif;
	text-transform: uppercase;
	font-size: 10px;
	color: #c86e41;
}
#search-btn:hover,
#search-btn:focus {
	background-color: #a5edde;
	color: black;
	font-weight: 400;
	/*-webkit-transition: all 300ms linear;
	transition: all 300ms linear;*/
}
#search-btn:hover,
#search-btn:focus {
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear;
}
/*=========================================*/
/*   Animated Heading
/*=========================================*/
.animate__animated.animate__slideInLeft {
	--animate-delay:2sec;
}
#anim-hdg {
	background-color: #fdd091;
	z-index: 20;
}
#slide-in {
	background-color: #fdd091;
	height:250px;
	z-index: 10;
}

.vertical-heading {
	margin-top:90px;
	font-size: 20px;
	background-color: #fdd091;
}

.vertical-heading h5 {
	color: #b05b36;
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	word-spacing: 9px;
	display: inline-block;
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
	/*position: relative;*/
	margin-top:50px;
	margin-left:200px;
}
.vertical-heading h2 {
	text-align: left;
	margin-left: 275px;
	margin-top: -60px;
}
/*=========================================*/
/*  Left Nav Column
/*=========================================*/
hr.med-green {
	border-top: 3px solid #5ea089;
	background-color: #fff;
	width: 100%;
	padding: 0;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	z-index: 10;
}
hr.med-green-ln {
	border-top: 3px solid #5ea089;
	background-color: #fff;
	width: 100%;
	padding: 0;
	margin-left: -13px;
	margin-right: 0px;
	margin-top: 0px;
	z-index: 10;
}


.left-nav #left-nav-col-2 {
	display:block;
	/*flex-wrap: wrap;*/
	position: relative;
	width: 220px;        /* This one controls the overall width of the menu  */
	margin-top: 300px;
	margin-left:  10px;
	z-index: 2;
}
#left-nav-col-2-abt1 {
	position: sticky;
	width: 220px;
	margin-top: 350px;
	margin-left: 40px;
	z-index: 5;
}
	#left-nav-container-abt1 {
		width: 230px;
		margin-top: 350px;
		z-index: 5;
}
#left-nav-container {
	width: 260px;       /* Controls the width of a container.  */
	margin-left: 0px;
	z-index: 8;
}
#left-column-bkgnd {
	position: sticky;
	background-color: #fee9ba;
	padding: 8px;
	/*max-width: 100%; */
	/*float: left; */
	/*margin-top: 10px; */
	border: 3px solid #5ea089;
	z-index: 8;
}		
#crest-box {
	position: sticky;
	/*width: 250px;*/
	max-height: 250px;
	z-index: 8;
}
#crest {
	position: sticky;
	margin: 15px 0px 0 10px;
	z-index: 8;
}
#crest:hover {
	opacity: 0.5;
}
/*=================================*/
/*transition: 500ms; */
/*=================================*/
#crest {
	-webkit-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}
#left-col-text {
	position:sticky;
	width: 205px;
	margin-left: 10px;
}
#left-col-text-abt1 {
	margin-left: 0px;
	width: 205px;
}
.center-font110pct {
	margin: 0 auto 0 auto;
	font-size: 20px;
}
.x-small {
	font-size: 13px;
	line-height: 16px;
}
.p125 {
	font-size: medium;
}
p.p125::first-letter {
	font-size: 125%;
}
.p150 {
	font-size: medium;
}
p.p150::first-letter {
	font-size: 150%;
}
.x-small {
	font-size: 13px;
	line-height: 16px;
}
.responsive {
	max-width:700px;
	height: auto;
	margin:0 auto;
}
	.article1 {
		grid-column:2 /span2;
		grid-row:5;
		grid-area:article1;
		margin-top:100px;
		display: grid;
		/*border:2px solid black;*/
		background-color: #fdd091;
		grid-template-columns:1fr;
		grid-template-rows:auto auto auto auto;
		grid-template-areas:
			'title1 '
			'text1' 
			'pic1'
			'text2';
		grid-gap:5px;
		margin-top:200px;
		z-index: 10;
	}
#back-btn{
	border:2px solid black;
	padding:10px 20px;
	color:black;
	background-color:#13bcd1;
	margin-top:100px;
	margin-left:40px;
}

#back-btn:hover {
	color:white;
	background-color:#8f6951;
}
#back-btn,
#back-btn:hover{
	transition:all .5s linear;
	-webkit-transition:all .5s linear;
}
.article1 .title1 {
		border:2px solid red;
		grid-column:1;
		grid-row:1;
		grid-area:title1;
		text-align:center;
		margin-top:0px;
		margin-bottom:30px;
		margin-right:15px;
		background-color:#fdd091;
		height:50px;
		z-index: 4;
	}
/*.title1 #back-btn{
	background-color:#13bcd1;
	border:2px solid black;
	margin:20px 0 0 20px;
}*/
/*	.article1 .text1 {
		/*border:2px solid green;*/
/*		grid-column:1;
		grid-row:2;
		grid-area:text1;
		font-size:19px;
		font-weight:500;
		background-color:#fdd091;
		text-align:justify;
		margin-left:15px;
		margin-top:0px;
		margin-right:20px;
	}
	
	.pic1 {
		border: 2px solid yellow;
		grid-column:4 /span2;
		grid-row:2;
		grid-area:pic1;
		max-width:500px;
		margin:0 auto 0 auto;
		border:thin black solid;
		box-shadow:2px 2px 3px 2px gray;
		border-radius:10px;
	}
	.text2 {
		/*border: 2px solid blue;*/
	/*	grid-column:1;
		grid-row:3;
		grid-area:text2;
	}
	.text2 p {
		text-align:justify;
		font-size:19px;
		font-weight:500;
		margin:0 20px 0 15px;
}		*/
.figcaption {
position:sticky;
margin:10px  auto 20px auto;
font-family: 'Marcellus SC', "Times New Roman", serif;
background-color: #94ffff;
font-size: 16px;
line-height: 35px;
font-weight: 600;
border-radius:5px;
max-width:500px;
text-align: center;
/*margin-top: 520px; */
}


p.p125cap-centered {
	margin-top: 10px;
	font-family: 'Marcellus SC', "Times New Roman", serif;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
}
.mw700-b-b {
	max-width:700px;
	border:thin black solid;
	box-shadow:2px 2px 3px 2px gray;
	border-radius:10px;
}
.mw500-b-b {
	max-width:500px;
	border:thin black solid;
	box-shadow:2px 2px 3px 2px gray;
	border-radius:10px;
}	
/*=========================================*/
/*  footer-3 parts
/*=========================================*/
.footer {
	clear: both;
	background-color: white;
	/*position: relative; */
	text-align: center;
	margin-top: 0px;
	margin-left: 0px;
	padding: 0;
	width: 100%;
	z-index: 8;
}
.footer .hor-rule {
	width:100%;
}

.footer-motto {
	font-size: 30px;
	font-family: serif;
	text-align: center;
	font-style: italic;
	margin-top: 0;
	color: #000;
}
.footer-update {
	text-align: center;
	font-size: 14px;
	margin-left: 14px;
	color: black;
}
.footer .footer-col-1 {
	margin:0px 15px 0 0px;
}
.footer .footer-col-1 .trees {
	margin-left:0px;
}
.footer .footer-col-2 {
	margin:40px 0 0 0px;
}
.fineprint {
	font-size:x-small;
	font-style:normal;
	margin:0 auto 0 auto;
	margin-top:-5px;
}
	.center-object{
		margin:0 auto 0 auto;
	}
.footer .footer-col-3 {
	margin:10px auto 0 auto;
}
	/*============================*/
/*			Back to Top
/*============================*/
#back-to-top {
	position: fixed;
	background-color: #f79256;
	color: #fff;
	top: 92%;
	left: 96%;
	width: 40px;
	height: 40px;
	z-index: 13;
}
#back-to-top:hover {
	background-color: #6590b5;
	color: #f79256;
}
#back-to-top:hover {
	-webkit-transition: all 400ms ease-in-out;
	transition: all 400ms ease-in-out;
}
	
	/*=======================================================*/
	/*			Media Queries
	/*=======================================================*/





	@media only screen and (max-width: 1050px){
		.grid-container{
		display:grid;
		
		grid-template-areas: 
	  'header 		header 		header '
	  ' menu1       menu1    	search'
  	  ' breadcrumb  breadcrumb	search'
	  ' slider 		slider 		slider '
	  ' article1  	article1 	pic1 '
	  ' article2  	article2 	article2'
	  ' left-nav    .    .'
	  ' left-nav    .    .'
	  ' footer 		footer 		footer ';
	}
		
}
	@media only screen and (max-width: 992px){
	.nav-btns {
		display:none;
	}
	.menu-bars {
		display:block;
	}
	.vertical-heading h2 {
	margin-left:240px;
	}
	.vertical-heading h5 {
		margin-left:150px;
	}
		.article1 {
			margin-top:70px;
		}
		.article1 .title1 h1{
			margin-left:30px;
		}
		.article1 .text1 p {
			margin-left: 30px;
		}
		.figcaption {
			width:300px;
			margin-left:30px;
		}
		.footer {
			display:grid;
			grid-template-columns:1fr;
			grid-template-rows:repeat(4, auto);
			grid-template-areas:
				'hor-rule'
				'footer-col-1'
				'footer-col-2'
				'footer-col-3';
		}
		.footer .hor-rule {
			
		}
		.footer-col-1{
			margin:0 auto;
		}
		.footer-col-2{
			margin:0 auto;
		}
		.footer-col-3{
			margin:0 auto;
		}
}
	@media only screen and (max-width: 800px){
		.header #title-panel #title-bar-2{
			margin:5px 20px 0 -30px;
			font-size:4.4vw;
		}
		.article1 {
		grid-column:2 /span2;
		grid-row:5;
		grid-area:article1;
		margin-top:20px;
		display: grid;
		/*border:2px solid black;*/
		background-color: #fdd091;
		grid-template-columns:1fr ;
		grid-template-rows:repeat(7,auto);
		grid-template-areas:
			'title1'
			'text1'
			'pic1 '
			'text2';
			
		grid-gap:5px;
		margin-top:200px;
		z-index: 10;
	}
		.title1 h1{
			grid-row:1;
			grid-column:1;
			grid-area:title1;
			margin-top:0px;
		}
		.vertical-heading h2 {
			margin-left:160px;
		}
		.vertical-heading h5{
			margin-left:85px;
		}
		.article1 .title1 {
			margin-top:50px;
		}
		.article1 .text1 {
			margin-top:90px;
			margin-right:-120px;
		}
		.pic1 {
			margin-right:200px;
			margin-top:50px;
		}
		
}
	@media only screen and (max-width: 768px){
	.header #title-panel #title-bar-2 {
			font-size: 4.0vw;
			margin-top:0px;
			margin-right:60px;
				
		}
}
	@media only screen and (max-width: 732px){
		.header #title-panel #title-bar-2 {
			margin-right: 100px;
		}
		.article1 #FamilyAssociationBanner {
			margin:0 20px 0 20px;
		}
}
	@media only screen and (max-width: 650px){
		.vertical-heading h2 {
			margin-left:180px;
		}
		.vertical-heading h5 {
			margin-left:80px;
		}
		.article1 .title1 {
			margin-right:80px;
		}
		.article1 .text1{
			margin-right:50px;
			
		}
		.article2 h2{
			margin-right:160px;
		}
		.article2 p{
			margin-right:230px;
			font-size:3vw;
			max-width:500px;
		}
		.footer {
			width:auto;
			margin-left:-260px;
		}
		
	}
	@media only screen and (max-width: 600px){
		#title-bar-2{
			margin-top:-5px;
		}
		.article1 .title1 {
			margin-right:120px;
			width:340px;
		}
		.article1 .text1 p{
			margin-right:50px;
		}
		.article2 h2{
			width:340px;
		}
		.article2 p{
			width:340px;
		}
		.footer-col-2  .footer-motto {
			font-size:18px;
			margin-left:-60px;
		}
	}
	@media only screen and (max-width: 500px){
		.header #title-panel #title-bar-2{
			font-weight:700;
			font-size:4vw;
			margin:1px 40px 0  -61px;
		}
		.left-nav{
			margin-left:40px;
		}
		.vertical-heading h2 {
			margin-left:120px;
		}
		.vertical-heading h5 {
			margin-left:30px;
		}
		.article1 .title1 {
			margin-left:30px;
		}
		.article1 .text1{
			margin-right:100px;
			width:340px;
			margin-left:30px;
		}
		
		.article1 text2 p{
			margin-left:30px; 
		}
		
		#pic1-figcap {
			margin-left:-30px;
		}
		
		.footer{
			margin-left:-350px;
		}
	}