/*
Theme Name: KCHS THEME #1
Author: WACD Media
Author URI: http://wacdmedia.net
Description: A theme built for KCHS
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
This is a private theme owned by WACD Media
*/




/* Universal ----------------- */

body{
  font-family: Arial, Helvetica, sans-serif;
}

p{
  
}

body h1,
body h2,
body h3,
body h4,
body h5{
   font-family: Arial, Helvetica, sans-serif; 
}



body .serif{
   font-family: Arial, Helvetica, sans-serif;
}

#meet .person{
  font-family: Arial, Helvetica, sans-serif;	
}

#wordy .paras{
  font-family: Arial, Helvetica, sans-serif;		
}

.header-text{
  font-size: 5em;
}

.text-grey{
  color: grey;
}

#wordy .para{
	
	font-size:1.3em;
	margin-bottom:25px;
}
.btn-green{
  border-radius: 5px;
  padding: 15px 25px;
}

.btn-green:hover{
  text-decoration: none;

 
}

.btn-green-large{
  border-radius: 5px;
  padding: 25px 35px;
}

.btn-green-large:hover{
  text-decoration: none;

 
}

.white-outline-button{
  margin-top: 10px;
  border: 2px solid white;
  color: white;
  padding: 10px;
}

.white-outline-button:hover{
  background-color: white;
  border: 2px solid white;
  color: black;
  text-decoration: none;
}

.blue-link{
  text-decoration: none;
  font-size: 1em;
  color:#028c74;

}

.blue-link:hover{
  font-size: 1em;
  color:#028c74;
}

.margin-left{
  margin-left:10px;
}

.margin-right{
  margin-right:10px;
}

.top-margin-small{
  margin-top:25px;
}

.text-white{
  color:white;
}

.margin-large-top{
  margin-top: 185px;
}

.margin-top{
  margin-top: 35px;
}

.margin-medium-top{
  margin-top: 55px;
}

.margin-large-top{
  margin-top: 200px;
}

.bottom-spacing{
  margin-bottom: 20px;
}

.bottom-spacing-medium{
  margin-bottom: 40px;
}

.bottom-spacing-large{
  margin-bottom: 60px;
}


.row-spacing{
  margin: 0 0 40px;
  padding: 40px 0;
}

.letter-space{
  letter-spacing: 1px;
}

.bold{
  font-weight: 600;
}

.bold-title{
  font-weight: 700;
}

.full-width-img{
  width: 100%;
}

.title-indent{
  margin-left: 15px;
}

.clear{
  clear: both;
}

#body a:active,
#body a:visited,
#body a:hover{
  text-decoration: none;
}

#back-to-top{
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 10px;
  font-weight: 700;
  display: none;
}

.border-img{
  border-radius: 5px;
}

.paragraph{
  line-height: 24px;
  font-size: 16px;
  letter-spacing: .6px;
}

p{
  font-size: 16px;
}

.no-margin-top{
  margin-top: 0;
}

.hide-dropdown > ul{
  display: none;
}

.bottom-spacing{
	margin-bottom: 20px;
}

.bottom-spacing-medium{
	margin-bottom: 40px;
}

.white-link{
  color: white;
}

.white-link:hover{
  color: white;

}

.white-outline-btn{
  display: inline-block;
  font-size: 16px;
  padding: 10px 20px;
}

.white-outline-btn:hover{
  font-weight: bold;
  text-decoration: none;
}

.white-outline-btn-r{
  display: inline-block;

}

.white-outline-btn-r:hover{
  font-weight: bold;
  text-decoration: none;
}

.link-icon{
	border: 2px solid #94BDD9;
	border-radius: 50%;
	padding:10px;
	 
	/* width and height can be anything, as long as they're equal */
}

.top-spacing{
  margin-top: 30px;
}

.large-text{
  font-size: 1.7em;
}

/*color -------------*/

.white-text{
	color:white;
}


#footer{
	background-color: #686D73;
	color:white;
}

#footer a{
	color:white;
}

#white-text{
	color:white;
}

.btn-green{
	background-color:#028c74;
	color:white;
	font-size:1.3em;
}

.btn-green:hover{
	background-color:#028c74;
	color:#014d66;

}

.btn-green-large{
  background-color:#028c74;
  color:white;
  font-size:1.8em;
}

.btn-green-large:hover{
  background-color:#028c74;
  color:#014d66;

}

/* Navigation --------------*/
#navigation-collapse a:hover{
  background-color:  #94BDD9;
  color: white;
}

#navigation-collapse .dropdown-menu{
  background-color:white;

}

#navigation-collapse .dropdown-menu a:hover{
  background-color:  #028c74;
  color:white;
}

#navigation-front{

}



#logo{
	
	width: 200px;
	padding: 10px 0;
	
}

#main-menu>li>a{
	color:white;
	background-color:#014d66;
}

#main-menu>li>a:hover{
	color:white;
	background-color:#028c74;
}	



#nav{
	background-color:#014d66;
}

#navigation{
	display:block;
	color:white;
	
	border: none;
	border-radius: 0;
	margin-bottom: 0;
	
	
}

#navigation-front{
  border: none;
  border-radius: 0;
  margin-bottom: 0;
  

}


#navigation-collapse{
	
	padding-top: 30px;
	float:right;
}

#navigation-collapse a{
	border-radius: 5px;
	font-size: 16px;
	letter-spacing: 1px;
}

#navigation-collapse a{
		border-radius-bottom-right: 0;
		border-radius-bottom-left: 0;
}
	



	
/*home page----------*/

#parallax-banner{
  background: url("img/countyjail.jpg") no-repeat center;
  	padding:0;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	padding: 20% 0;
}

@media only screen and (max-width: 1215px){
  #parallax-banner{
    background: url("img/countyjail.jpg") no-repeat center;
    padding:0;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding: 25% 0;
  }
}

@media only screen and (max-width: 915px){
	#parallax-banner{
		background: url("img/countyjail2.jpg") no-repeat center;
		padding:0;
		background-repeat: no-repeat;
		background-size: cover;
		background-attachment: fixed;
    padding: 35% 0;
	}
}

@media only screen and (max-device-width: 1015px){
  #parallax-banner{
    background: url("img/countyjail2.jpg") no-repeat center;
    padding:0;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: initial;
    padding: 40% 0;
  }
}




#event-banner{
    background: url("img/events.jpg") no-repeat center;
    padding:0;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: initial;
    height: 500px;

}



@media only screen and (max-width: 915px){
  #event-banner{
    height: 700px;

  }
}






#event-button{
	
	display:block;
	float:left;
	height:500px;
	width:50%
}


@media only screen and (max-device-width: 915px){
  [class^='imghvr-fade'] > img,
  [class*=' imghvr-fade'] > img {
    opacity: 0.2;
   
  }
}

@media only screen and (max-width: 915px){


  [class^='imghvr-fade'] figcaption,
  [class*=' imghvr-fade'] figcaption {
   opacity: 1;
  }

  #event-button{

    display:block;
    float:left;
    height:500px;
    width:100%
  }


}

@media only screen and (max-width: 700px){
  #event-button{

    display:block;
    float:left;
    height:350px;
    width:100%
  }


}




#event-text{
	position: relative;
    top: 30px;
	left:30px;
}

@media only screen and (max-width: 890px){
	#event-text{

		top: 9px;

	}	
}

#event-image{ 
  margin-top:-65px;
  height: 105%;
  width:100%;
}

#places-banner{
	 background: url("img/courthouseblue.jpg") no-repeat center;
  	padding:0;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: initial;
	height:60vh;
}



#store-banner{
  background-color:white;
  	padding:0;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	height:60vh;

}



#contact-banner{
 background-color:#014d66;
}

#contact-info{
	margin-top:4px;
}

/* About Us ------------*/


#about-banner{
  background: url("img/about.jpg") no-repeat center;
  padding:0;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: initial;
  height:60vh;
}
@media only screen and (max-width: 915px){
  #about-banner{
    background: url("img/about.jpg") no-repeat center;
    padding:0;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: initial;
    height:60vh;
  }
}

#banner-contact{
  background-color:#014d66;
  padding-top: 10px;
  padding-bottom: 10px;
  color: white; 
}


/* genealogy page -----*/

#Genealogy-banner{
    background: url("img/gene.jpg") no-repeat center;
  padding:0;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: initial;
  height:60vh;
}

/* membership ---------*/

#membership-banner{
  background: url("img/membership.JPG") no-repeat center;
  padding:0;

  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: initial;
  height:60vh;

}

/* places--------------*/

#home-places-banner{
  background: url("img/bridge1.jpg") no-repeat center;
  padding:0;

  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: initial;
  padding: 20% 0;

}

#poundstore-banner{
  background: url("img/poundstore.JPG") no-repeat center;
  padding:0;

  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: initial;
  height:75vh;
}

#places-banner{
  background: url("img/bridge.jpg") no-repeat center;
  padding:0;

  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: initial;
  height:60vh;

}

#jail-banner{
  background: url("img/countyjail.jpg") no-repeat center;
  padding:0;

  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: initial;
  height:65vh;

}

#chinworth-banner{
  margin-top:-20px;

}



#box1{
  display:block;
  float:left;

  height:300px;

  background-color:#028c74;

}

#box2{
  display:block;
  float:left;

  height:300px;

  background-color:#014d66;
}

  
#box3{
  display:block;
  float:left;
  height:300px;

  background-color:#8bb23f;  
}

@media only screen and (max-width: 767px){
  #box1{
    height:200px;
  }

  #box2{
   height:200px;
  }

  
  #box3{
    height:200px;
  }
}

.read-btn{
  color: white;
  text-decoration: underline;
  font-size: 1.2em;
}

.text-margin{
  margin:1px;
}

/* Event page ---------*/

#event{
  display: block;
  height: 40vh;
  margin-bottom:20px;

}

#thaddeus{
  width: 100%;
}


/* footer--------------*/

#footer ul{
	padding-left: 0;
}

#footer li{
	list-style: none;
	
}

#footer a:hover{
	font-weight: 700;
	text-decoration: none;
	
}

#footer-links{
	border-bottom: 2px solid #f9f9f9;
	padding: 40px 0 20px 0;
	margin-bottom: 20px;
}



#legal li{
	display: inline;
	padding: 10px;
}


/* history ---------------------------*/

#history-banner{
  background: url("img/jailcell.JPG") no-repeat;
  padding:0;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: initial;
  height:60vh;
}



#gene-image{
  margin-top:-65px;
  width:100%;
  height:30vh;
}

#history-text{
  position: relative;
  background-color:#028c74;
  color:white;
  padding-left:20px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin:0px;
  
}



#history{
  width:100%;
  height:30vh;
  margin-top: 30px;
}

#history-button{
  display: block;
  float: left;
  width: 40%;
  height: 40%;
  margin-left:5%;
  margin-right:5%;
  margin-top:20px;
  margin-bottom: 20px;

}

#history-image{
  height:500px;
  width: 100%;
  -webkit-opacity: 0.0;
  -moz-opacity: 0.0;
  opacity: 0.0;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

#history-image:hover{
  -webkit-opacity: 0.6;
  -moz-opacity: 0.6;
  opacity: 0.6;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

 #history-figure{
    overflow: hidden;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: initial;
    background-position: center; 
    height: 400px;

  }

  #history-figure:hover{
   
  }

@media only screen and (max-width: 767px){
 #history-figure{
    overflow: hidden;
    height: auto;

  }

 




  #history-button{
    display: block;
    float: left;
    width: 100%;
    height: 30%;
    margin-left:5px;
    margin-right:5px;
    margin-top:20px;
    margin-bottom: 20px;

  }

 

}

@media only screen and (min-width: 992px){
 

 #history-figure{
  height: 400px;
 }

}




/* Typography ------------------------*/

body {
  font-size: 100%;
}

body p{
  font-size: 16px;
}

body a{
  font-size: 14px;
}

body li{
  font-size: 16px;
}

body, caption, th, td, input, textarea, select, option, legend, fieldset, h1, h2, h3, h4, h5, h6 {
  font-size-adjust: 0.5;
}

page {
  font-size: 1em;
  /* equivalent to 16px */
  line-height: 1.25;
  /* equivalent to 20px */
}

@media (min-width: 43.75em) {
  page {
    font-size: 1em;
    /* equivalent to 16px */
    line-height: 1.375;
    /* equivalent to 22px */
  }
}

h1 {
  font-size: 2em;
  /* 2x body copy size = 32px */
  line-height: 1.25;
  /* 45px / 36px */
}

@media (min-width: 43.75em) {
  h1 {
    font-size: 2.5em;
    /* 2.5x body copy size = 40px */
    line-height: 1.125;
  }
}

@media (min-width: 56.25em) {
  h1 {
    font-size: 3em;
    /* 3x body copy size = 48px */
    line-height: 1.05;
    /* keep to a multiple of the 20px line height and something more appropriate for display headings */
  }
}

h2 {
  font-size: 1.625em;
  /* 1.625x body copy size = 26px */
  line-height: 1.15384615;
  /* 30px / 26px */
}

@media (min-width: 43.75em) {
  h2 {
    font-size: 2em;
    /* 2x body copy size = 32px */
    line-height: 1.25;
  }
}

@media (min-width: 56.25em) {
  h2 {
    font-size: 2.25em;
    /* 2.25x body copy size = 36px */
    line-height: 1.25;
  }
}

h3 {
  font-size: 1.375em;
  /* 1.375x body copy size = 22px */
  line-height: 1.13636364;
  /* 25px / 22px */
}

@media (min-width: 43.75em) {
  h3 {
    font-size: 1.5em;
    /* 1.5x body copy size = 24px */
    line-height: 1.25;
  }
}

@media (min-width: 56.25em) {
  h3 {
    font-size: 1.75em;
    /* 1.75x body copy size = 28px */
    line-height: 1.25;
  }
}

h4 {
  font-size: 1.125em;
  /* 1.125x body copy size = 18px */
  line-height: 1.11111111;
}

@media (min-width: 43.75em) {
  h4 {
    line-height: 1.22222222;
    /* (22px / 18px */
  }
}



blockquote {
  font-size: 1.25em;
  /* 20px / 16px */
  line-height: 1.25;
  /* 25px / 20px */
}

@media (min-width: 43.75em) {
  blockquote {
    font-size: 1.5em;
    /* 24px / 16px = */
    line-height: 1.45833333;
    /* 35px / 24px */
  }
}
  
@-ms-viewport{
  width: device-width;
}