@charset "utf-8";
/* CSS Document */

html,
html * {
	padding: 0;
	margin: 0;
	box-sizing:border-box;
	font-family: "Georgia", Times New Roman, Times, serif
}

header { 
	background-color: #8BA0AF;
	width: 100%;
	z-index: 10;
	position:relative;
}

body {
	max-width: 100%;
}


/*----------------------------------------Header-----------------------------------*/
/*--------------------------------------------------------MOBILE VERSION------------------------------------------------*/
.style-logo {
	margin-left: auto;
	margin-right: auto;
	display: block;
	padding: 10px;
}

.style-logo-home {
	display: none;
}

.style-nav ul {
	list-style-type: none;
	
}

.style-nav ul li a {
	padding: 5px;
	text-decoration: none;
	color: #EBEAE8;
	text-transform: uppercase;
	font-size: 24px;
	letter-spacing: 3.5px;
	text-align:center;
	display:block;
}

.current {
	background-color: #4a6274;
}

.header-box-ribbon {
	display:none;
}

.style-logo-small {
	display: none;
}

.style-logo-small-text {
	display:none;
}

.home-text {
  display: none;
}

header {
	width:100%!important;
}

/*-------------------------------------------------DESKTOP VERSION-----------------------------------------------------*/
@media (min-width: 1000px) {
	header {
		position: fixed;
	}
	
	.style-logo {
		display:none;
    }
	
	.style-logo-small {
		float: left;
		padding: 3px;
		padding-left: 30px;
		display: inline-block;
	}
	
	.style-logo-small-text {
		display: inline-block;
		float:left;
		max-height: 50px;
		padding-top:3px;
		padding-left: 10px;
	}
	
	.style-logo-text {
		display:none;
	}
	
	.style-nav ul {
		text-align: right;
		padding-right: 2%;
	}
	
	.style-nav ul li {
		display:inline-block;
		padding: 10px;
	}
	
	.style-nav ul li a:hover {
	background-color: #ebeae8;
	background-size: 2px;
    }

	.style-nav ul li a:hover {
		color:#4a6274;
    }
	
	.header-box-ribbon {
		display:block;
		padding: 28px;
		
}

	.style-logo-home {
		float: left;
		display: inline-block;
		padding: 10px;
		position:absolute;
}

.home-text {
  display: none;
}

.style-logo-small-text:hover + .home-text {
  		display: inline-block;
		float:left;
		max-height: 50px;
		padding-top:3px;
		padding-left: 10px;
}

.style-logo-small-text:hover {
	display:none;
}
}

@media (min-width: 1000px) and (max-width: 1350px) {
	.style-logo-small-text {
		display: none;
}
}

@media (max-width: 485px) {
	.style-logo-large-bird {
		max-width: 40% !important;
	}

	.style-logo-text {
		max-width: 70% !important;	
	}
	
	.style-nav ul li a {
		font-size: 23px;
	}
}

@media (max-width: 800px) and (orientation: landscape){
	.style-logo-large-bird {
		display:none;
}
}


/*--------------------------------Home page main-----------------------------*/

.background {
	width: 100%;	
}

.background-image {
	z-index: -1;
	width: 100%;
	height:auto;
}


.wild-thing-title {
	display:block;
	position:absolute;
	float: right;
	top: 250px;
	right: 120px;
	text-transform:uppercase;
	font-size:100px;
	font-weight:700;
	color: #4a6274;
	text-shadow: 
		 3px  3px 0 #eBEAE8,
		-3px -3px 0 #eBEAE8,  
		 3px -3px 0 #eBEAE8,
		-3px  3px 0 #eBEAE8,
		 3px  3px 0 #eBEAE8;
	
}

.home-page-text {
	position:absolute;
	display:block;
	float: right;
	top: 375px;
	right: 120px;
	
}

.home-page-text-two {
	position:absolute;
	display:block;
	float: right;
	top: 425px;
	right: 120px;
}

.background-image-mobile {
	display:none;
}

.click-here {
	display: block !important;
	text-align: centre;
	text-transform: uppercase;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-right: 20%;
	margin-left: 20%;
	font-size: 36px;
}

/*-----------------------------------------------------mobile view-----------------------------------------------*/

@media (max-width: 1100px) {
.home-page-text {
	display: none;
		}
		
.home-page-text-two {
	display: none;
		}		
}

@media (max-width: 1000px) {
	.wild-thing-title {
	display: none;
		}
		
.background-image {
	display:none;
}

		
.background-image-mobile {
	display: block;
	z-index: -1;
	width: 100%;
}

.click-here {
	font-size: 18px !important;

}
}
/*-----------------------------------page formatting-----------------------------------------*/

h1 {
	display:block;
	font-size:76px;
	color: #4a6274;
	font-weight:bold;
	text-shadow: 3px 3px 0 #cdd5c4 ;
	text-align:center;
}

h2 {
	text-decoration:none;
	text-align: center;
	font-size:50px;
	color: #4a6274;
	padding-top: 10px;
	display:block;
	margin-right: 20%;
	margin-left: 20%;
}

h3 {
	display :block;
	color: #8ba0af;
	font-size:36px;
	text-transform: uppercase;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #ebeae8;
	
}

h4 {
	display: block;
	text-decoration: none;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	color: #c4d5c4;
	padding-top: 5px;
	padding-bottom: 5px;
	max-width: 100%;
	font-size: 36px;
}

@media (max-width: 1000px) {
	
	h1 {
		font-size: 30px !important;
	}
	
	h4 {
		font-size: 25px;
	}
}


h5 {
	display: block;
	color: #8ba0af;
	text-align: center;
	font-style: italic;
	margin-right: auto;
	margin-left: auto;
	text-wrap:normal;
	max-width: 90%;
	font-size:18px;
	font-weight: 100;
}

.poem {
	display: block;
	margin-right: auto;
	margin-left: auto;
	border:#8BA0AF solid 2px;
	border-radius: 15px;
	padding-top: 10px;
	padding-bottom: 10px;
	max-width: 60%;
}

h6 {
	text-decoration:none;
	text-align:center;
	font-size:50px;
	color: #4a6274;
	padding-top: 10px;
	display:block;
	padding-top: 60px;
}



p {
	display: block;
	color: #8ba0af;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	padding-top: 10px;
	padding-bottom: 35px;
	text-wrap:normal;
	width: 80%;
	font-size:18px;
}	

h7  {
	display: block;
	color: #EB0231;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	padding-top: 10px;
	padding-bottom: 35px;
	text-wrap:normal;
	width: 80%;
	font-size:18px;
}


.click-to-see-more {
	padding-bottom: 0px;
}
		
.button {
	text-align:center;
	font-size:36px;
	text-decoration:none;
	color: #4a6274;
	font-weight: bold;
	padding: 5px 40px;
	border-radius: 20px;
	border: solid 3px #8ba0af;
	background-color: #c4d5c4;
}

.button:hover {
	background-color: #ebeae8;
}

.button-sections{
	display:block;
	padding-left: 2%;
	padding-bottom: 2%;
	text-align:center;
}


.back {
	font-size:20px !important;
	position:absolute;
	margin-left: 2%;
	margin-top: 30px;
	z-index: 9;
}

.top {
	font-size:20px !important;
	position:fixed;
	margin-left: 2%;
	margin-top: -10px;
	z-index: 9;
}

.top2021 {
	font-size:20px !important;
	position:fixed;
	margin-left: 2%;
	margin-top: 10px;
	z-index: 9;
}


/*-------------------mobile view--------------------*/

@media (max-width: 1000px) {
	.back-button {
	display:none;
}

	.button {
		display:block;
		text-align:center;
		margin: 10px;
		padding-right: 5px;
		padding-left:5px;
	}
	
	p {
		width: 90%;
		color:#000000;
	}
	
	h2 {
		margin: 0;
	}

	.poem {
	 	max-width: 90%;	
	}
		
}

/*--------------------------------month-table-------------------------------*/

.month-selection {
	direction:ltr;
	text-align:center;
	padding: 10px;
	background-color: #c4d5c4;
}

.month {
	color: #4a6274;
	display:inline-block;
	padding: 5px;
	font-weight: bolder;
}

.month a {
	text-decoration: none;
	color: #4a6274;
}

.month a:hover {
	color: #ebeae8;
}

/*------------------------------------alphabet-table---------------------------------------*/

.letter-selection {
	direction:ltr;
	text-align:center;
	padding: 10px;
	background-color: #c4d5c4;
}

.letter {
	color: #4a6274;
	display:inline-block;
	padding: 5px;
	font-weight: bolder;
}

.letter a {
	text-decoration: none;
	color: #4a6274;
}

.letter a:hover {
	color: #ebeae8;
}

.selection-list {
		display:inline-block;
		margin-left:auto;
		margin-right:auto;
		width: 100%;
}
	
.small-link {
		display: block;
	text-decoration: none;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	color: #c4d5c4;
	padding-top: 5px;
	padding-bottom: 5px;
	max-width: 100%;
	font-size: 20px;

}
	

/*--------------------------------post----------------------------*/

.new-post-divider {
	background-color:#FFFFFF;
	margin-right: 30% !important;
	margin-left: 30% !important;
	padding-top: 10px;
	height: 15px;
}

.main-post-image {
	display:block;
	margin-left:auto;
	margin-right:auto;
	width: 45%;
	border: solid #000 3px;
}

.post-intro {
	padding-bottom: 35px;
}	

.real-photo {
	display:block;
	margin-left: auto;
	margin-right: auto;
	border: solid #000 3px;
	max-width: 85%;
	margin-top: 10px;
	margin-bottom: 10px;
}

.real-photo-p {
	display:block;
	margin-left: auto;
	margin-right: auto;
	border: solid #000 3px;
	max-width: 34%;
	margin-top: 10px;
	margin-bottom: 10px;
}




.page-break-birds {
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-top: 20px;
}

@media(max-width: 1000px) {
	.real-photo {
		max-width: 97% !important;
}

.real-photo-p {
		max-width: 97% !important;
}

	.main-post-image {
		width: 75%;
	}
}

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

.footer {
	background-color: #ebeae8;
	text-transform:uppercase;
	width: auto;
	color: #8BA0AF;
	padding: 10px;
	font-size:12px;
}

.footer-divider {
	background-color:#FFFFFF;
	margin-right: 30% !important;
	margin-left: 30% !important;
	padding-top: 10px;
	height: 400px;
}

@media (max-width: 1000px) {
	.footer {
		font-size: 10px;
	}
	
}
	
/*--------------------------------------photo grid---------------------------------------------*/

.row {
  display: inline-block;
  flex-wrap: wrap;
  padding: 0;
  clear: both;
  width: 100%;
  margin-left:auto;
  margin-right:auto;
}


.column {
  margin: 0 -1px;
}

.col-mob {
  display: inline-block;
  width: 50%;
  padding: 0px;
  float:left;
  vertical-align:top;
  margin: 0 -1px;
}

.column-img {
  padding: 4px;
  margin: auto;
  vertical-align: middle;
  max-width:98%;
}

.column-txt {
  alignment-adjust:central;
  max-width:100%;
  padding: 20px;
}



@media (min-width: 1000px) {
		.column {
			float:left;
			display:inline-block;		
  width: 50%;
  padding: px;
}

.col-mob {
  width: 50%;
  padding: 0px;
  display:inline-block;
  float:left;
  
}

}

.about-container {
	display: table;
}



.column-about {
	display: table-cell !important;
	max-width: 50%;
	flex: 50%;
}

/*2022*/

.sidebar {
	position: fixed;
	display: block;
	float:left;
	padding:10px;
	border:thin;
	background-color:#ebeae8;	
}

.title22 {
display:block;
	font-size:76px;
	
	color: #4a6274;
	font-weight:bold;
	text-shadow: 3px 3px 0 #cdd5c4 ;
	text-align:center;
	
}

.month22 {
	width: inherit;
	padding:4px;
	background-color: #c4d5c4;
	text-align:center;
	
}

.month22 a {
  display: block;
  width: inherit;
  color: #4a6274;
  text-decoration: none;
  font-weight: bolder;
}


.month22 a:hover {
	color: #ebeae8;
}

@media (max-width: 1000px) {
	.sidebar {
	
	position:inherit;
	float: none;
	padding:10px;
	border:none;
	background-color: #c4d5c4;
	direction:ltr;
	text-align:center;
	width: inherit;
}

	.title22 {
		display:none;
	}

	.month22 {
		display: inline-block;
		
	}
}

.month-selection {
	direction:ltr;
	text-align:center;
	padding: 10px;
	background-color: #c4d5c4;
}

.month {
	color: #4a6274;
	display:inline-block;
	padding: 5px;
	font-weight: bolder;
}

.month a {
	text-decoration: none;
	color: #4a6274;
}

.month a:hover {
	color: #ebeae8;
}