/*color palette:
https://coolors.co/e1eff6-ffffff-a5d7f9-b1defc-0e3b43-124a54-edae49-ba8838
*/

p {
    font-family: 'Inter', Tahoma, Arial, sans-serif;
    font-weight: normal;
	color: #0e3b43;
}

h1,h2,h3{
	font-family: 'Lexend', Tahoma, Arial, sans-serif;
	font-weight: normal;
	color: #0e3b43;
}
a{
    font-family: 'Inter', Tahoma, Arial, sans-serif;
	font-weight: normal;
}
body{
	background-color: #E1EFF6;
	margin: 0;
	overflow: auto;
    font-family: 'Inter', Tahoma, Arial, sans-serif;
}


/* ----------Hero Image----------*/
.hero-image {
    
    height: 500px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    margin:0; 
  }
  
  .hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgb(226, 237, 244);
    font-size: 30px;
    font-style: italic;
  }

  div.hero-text > h1 {
    color: #ffffff;
  }


/*--------------------BANNER /MENU STUFF--------------------*/
.header{
	position:sticky;
	top: 0%;
	right: 0px;
	width:100%;
	padding: 0px;

	display: block;
	z-index:100; /*so it lays on top of everything*/
}
#top_banner{
	display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
	height: max-content;
	background-color: #edae49;
	border-bottom: .5px solid #ba8838;
    padding: 6px;
}

/*----------------MENU CSS----------------*/
#menuIMG{
	display: none;
	cursor: pointer;
}
#logo{
	max-height: 62px;
	position: center;
	padding-left: 10px;
	padding-top: 4px;
}
/*--------HORIZONTAL MENU--------*/
#horizontal-menu {
    list-style-type: none;
    display: inline-flex;
    padding: 0;
    margin: 0;
    font-size: 2vw;
}


#horizontal-menu .itemMenu a{
	font-size: 70%;
	display: inline-block;
	text-decoration: none;
	padding:3px 6px;
	color: #ffffff;
	margin: 20px 6px;
	font-family: 'Inter', Tahoma, Arial, sans-serif;
	 
	text-align: center;


}
#horizontal-menu .itemMenu{
	margin:0px 5px;
}
#horizontal-menu .itemMenu a:hover{
	color: #76A9CB;
	background-color: #ffffff;
	border-radius: 5px;
}


/*--------VERTICAL MENU--------*/
#menu .itemMenu a{
	/* float:right; */

	display: block;
	padding: 10px 10px;

	background-color: #A5D7F9; 
	text-decoration: none;
	font-family: 'Inter', Tahoma, Arial, sans-serif;

	text-align: center;
	font-size: 70%;
	color: #ffffff;
	border-left: 3px solid #edae49;
	border-bottom: 3px solid #edae49;
	

}

/*hover effect*/
#menu .itemMenu a:hover{
	color:#76A9CB;
	background-color: #ffffff;
    
}

/*gives rounded edge to last child to make edge of menu look rounded */
#menu .itemMenu:last-child{ 
	a{border-bottom-left-radius: 3.5px;}
}

#menu {
    list-style-type: none;
    margin: 0;
    padding:0;
    top: 0;
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 0;
    top: 82px;
    visibility: collapse;

    /*border for vertical meny*/
    border-left: .5px solid #BA8838;
    border-bottom: .5px solid #BA8838;
    border-bottom-left-radius: 4px;
}

/*-----WINDOW SIZE CSS-----*/
/* this makes sure the dropdown menu is never visible when the horizontal menu
is visible, but doesn't completely fix the problem because when you make the
window smaller again, the dropdown should also not be visible */
@media (min-width: 920px) {
    #menu {
        visibility: collapse !important;
    }
}

@media (max-width: 920px) {
    #menuIMG {
	    display: inline-block;
	    max-height: 30px;
	    cursor: pointer;

    }
    #horizontal-menu {
        display: none;
    }
}

/*---------- END OF BANNER/MENU STUFF----------*/





/*--------------------FOOTER CSS--------------------*/
#footer{
position: static;
  left: 0;
  bottom: 0;
  width: 100%;
  max-height: 150px;
  background-color: transparent;
  padding: 0px;
  margin-top: 10vw;
}
#footer_print::before{/*adds background color to footer*/
	background-color: rgba(237, 174, 73, 0.63);
	display: block;
	content: '';
	position: absolute;
	height: inherit;
	width: inherit;
	z-index:-1;
	}

#footer_print{/* styling for foot print design in footer */
	width: 100%;
	margin: 0px;
	padding: 0px;
	height:150px;
	background: url('./images/footer.png') repeat-x;
}
/*styling for dog image in footer*/
#footer_dog{
	max-height: 140px;
	float: right;
	margin-top: 8px;
	margin-right: 6vw;
	z-index: 1;

}
/*------FOOTER LINKS------*/
.footer_links{/*links in footer*/
	list-style-type: none;
	position: relative;
	margin-top: 10vw;
	padding-left: 20px;
	z-index: 1;

}
.footer_links li{
	display: inline-block;
	cursor: pointer;

	background-color: #b1defc;
	border: 1px solid #76A9CB;

	border-radius: 3px;
	padding-top: .8vw;
	padding-bottom: .8vw;
	padding-left: 1.4vw;
	padding-right: 1.4vw;
	margin-top: 4vw;
	margin-left: 4vw;

	transition: opacity 0.3s ease;
}
.footer_links li a{
	text-decoration: none;
	color:  #ffffff;
	font-family: 'Inter', Tahoma, Arial, sans-serif;
}

/*------HOVER EFFECTS------*/
.footer_links li:hover{ /*hover effect for footer buttons*/
	background-color: #ffffff;
	border: 1px solid #E1EFF6;
}
.footer_links li:hover .my_footer_link{
	color:#A5D7F9;
}

/*------RESPONSIVE FOOTER STUFF------*/
@media (max-width: 800px) {/* makes dog go away and centers links in footer*/
	#footer_dog{
		display: none;
	} 
	.footer_links{
		text-align: center;
		padding-left: 0px;
		padding-right: 0px;
	}
	.footer_links li{
		margin-top: 10vw;
		margin-left:4vw;
		margin-right: 4vw;
	}
}
/*----------END OF FOOTER CSS----------*/



/*----------GENERIC LINK STYLING----------*/
.linkBlock{
	display: inline-block;
	padding: 10px 20px;
	text-decoration: none;
	color: #ffffff;
	background-color: #124A54;
	border: 2px solid #0E3B43;

	border-radius: 5px;
	transition: all 0.3s ease;
}
.linkBlock:hover{
	cursor: pointer;
	background-color: #edae49;
	border: 2px solid #BA8838
}
.linkBlock:after {
	display: inline-block;
	opacity: 0;
	transition: opacity 0.3s ease;
}
.linkBlock:hover:after {
	opacity: 1;
		}
/*----------END OF GENERIC LINK STYLING----------*/





/*BASIC TEXT BLOCK*/
/*this is just css for the generic text block that we use on a lot of our pages*/
.textblock1{
	background-color:#A5D7F9;
	margin-left: 4vw;
	margin-right: 4vw;
	margin-top: 3vw;
	margin-bottom: 3vw;
	padding-left: .7vw;
	padding-right: .7vw;
	padding-top: .1vw;
	padding-bottom: 1vw;

	border-radius: 1vw;
	border: 10px white ;

	
		p{
			color:  #124A54;
			padding-left: 1.5vw;
			padding-right: 1.5vw;

		 }
		 h2,h1{
		 	position: relative;
		 	text-align: center;
		 	color: #0E3B43;
		 	padding: 1.5vw;


		 	font-weight: normal;
		 }
		 .block1Title{
		 	margin-top: .5vw;
		 	margin-left: .75vw;
		 	margin-right: .75vw;
		 	margin-bottom: .5vw;

		 	position: relative;
/*		 	background-color: #edae49;*/
		 	max-width: max-content;
		 	text-align: center;
		 }
}
.title1{
	text-align: center;
	color: #0E3B43;
}

.imgBlock{
	display: flex;
	flex-wrap: wrap;
	background-color: #edae49;
	padding:  20px;
	margin: 20px;
	border-radius: 20px;


}
.right-imgBlock{
	flex: 50%;
	text-align: center;
	margin: 10px,20px,10px,20px;
		img{
		max-height: 400px ;
		width: max-content;
		border-radius: 10px;
		margin: auto;
	}
}
.left-imgBlock{
	flex: 50%;
	img{
		max-height: 400px ;
		border-radius: 10px;
	}
}
@media (max-width: 800px) { 
	.right-imgBlock, .left-imgBlock {
		flex: 100%;
	width: max-content;
margin: auto;}
}