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


/* NAVIGATION */
.navbar {
	overflow: hidden;
	background-color: #f2f2f2;
	display: flex;
	justify-content: center;
	top: 0; /* Position the navbar at the top of the page */
	margin: 0 auto;
	align-items: center;
	height: 100px;
}
/* Links inside the navbar */
.navbar li {
	display: inline-block;
	color: #81cbbe;
	vertical-align: middle;
	text-decoration: none;
	margin: 10px 16px 10px 16px;
}
.navbar a {
	display: inline;
	color: #81cbbe;

	padding: 10px;
	text-decoration: none;
}
/* Change background on mouse-over */
.navbar a:hover {
	background: #ddd;
	color: black;
	height: 100%;
}


/* MAIN */
.main {
	max-width: 100%;
	position: relative;
	margin: auto;
	text-align: center;
}
.mainindex p{
	font-family: arial, sans-serif;
	line-height: 2;
	width: 1000px;
	margin: auto;
	padding-top: 50px;
	padding-bottom: 150px;
	
}

.tada, .litters {
	background-color: #81cbbe;
	width: 100%;
}



.tada aside {
	display: flex;
	justify-content: space-around;
	padding: 2em 0; 

}


/*Typesetting*/
h1 {
	font-family:"Times New Roman", Times, serif;
	font-weight: bold;
	font-size: 40px;
	margin:auto;
}
h2 {
	font-family:"Times New Roman", Times, serif;
	font-weight: Bold;
	font-size: 20px;
}
h3{
	font-family: "Times New Roman", Times, serif;
	font-weight: bold;
	font-size: 16px;
}
p{
	font-family: arial, sans-serif;
	line-height: 1.5;
	width: 700px;
	margin: auto;
}

.button {
	background-color: #81cbbe;
	border: none;
	color: white;
	padding: 10px 34px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 20px;
	margin: 4px 2px;
	cursor: pointer; 
	}



.main section {
	display: inline-block;
	width: 100%;
}




/* Dog Pages*/

.maindogs {
	max-width: 700px;
	padding-top: 40px;
	position: relative;
	margin: 0 auto;
	text-align: center;
}

.maindogs h2 {
    text-align: left;
}
.maindogs img {
	float:left;
	padding-right: 20px;
	padding-bottom:50px;
}
.maindogs section {
	display: inline-block;
	width: 100%;
}
.maindogs p{
	text-align: left;
	margin-top: 20px;
}


/*Gallery*/

.gallery{
	margin: 0 auto;
	padding-top: 350px;
	width: 70%;
}
.gallery img{
	float: none;
	padding: 10px;
}


/*FACILITY*/
.facility{
	margin: 0 auto;
	padding-top: 50px;
	width: 80%;
}
.facility img{
	float: none;
	padding: 3px;
	max-width: 100%;
	height: auto;
}

.facility p {
		font-family: arial, sans-serif;
	line-height: 1.5;
	width: 700px;
	margin: auto;
}



/*AVAILABLE LITTERS*/
#alitters{
	width:700px;
	margin: 0 auto;
	display: block;
	text-align: center;
}

#alitters img{
    margin: 0 auto;
}

#alitters h1{
    margin-top: 40px;
}

#alitters h2 {
    margin-top: 20px;
}


#alitter p{
    margin: 0 auto;
    padding: 0 20px;
}




/*SLIDESHOW STUFFS*/
/*Slideshow*/
* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 400px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.sawyer {
  display: none;
}

.indigo {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev {
  left: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/*SLIDESHOW STUFFS END*/


.link img {
  border: 1px solid #ddd; /* Gray border */
  border-radius: 4px;  /* Rounded border */
  padding: 5px; /* Some padding */
  width: 300px; /* Set a small width */
}

/* Add a hover effect (blue shadow) */
.link img:hover {
  cursor:pointer;
}

.link h1{
font-size:30px;
padding:30px;
}




/*FAQ*/
#faq {
	width: 70%;
	margin: 0 auto;
	text-align: left;
}

#faq h1{
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

#faq p{
    font-size: 16px;
    width: 90%;
}
details{
  background-color: #fff;
  color: #000;
  font-size: 1.25rem;
}

summary {
  padding: .5em 1.3rem;
  list-style: none;
  display: flex;
  justify-content: space-between;  
  transition: height 1s ease;
}

summary::-webkit-details-marker {
  display: none;
}

summary:after{
  content: "\002B";
}

details[open] summary {
    background-color: #C3F1E8;
    margin-bottom: .5em;
}

details[open] summary:after{
  content: "\00D7";
}

details[open] div{
  padding: 1em 1em;
}





/* FOOTER*/
.footer {
	background-color: #f2f2f2;
	display: flex;
	margin-top: 20px;
	padding-top: 40px;

}
.footer section{
	width: 100%;
	text-align: center;
	padding-bottom: 50px;
}
.footer li {
	display: inline;
	
}
.footer a {
	list-style-type: none;
	text-decoration: none;
	color: black;
	
}
.footer a:visited{
	color: #00b7af;
	
}


/* CONTACT FORM */
/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: #45a049;
}
/* Add a background color and some padding around the form */
.container {
	margin: 100px auto;
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}




/*-------------------------------------------------------------------------------------------------------------------------*/




@media only screen and (max-width: 800px){
	
/* The navigation bar */
.navbar {
	overflow: hidden;
	background-color: #f2f2f2;
	display: flex;
	top: 0; /* Position the navbar at the top of the page */
	height: auto;
}
/* Links inside the navbar */
.navbar li {
	color: #000000;
	display: block;
	padding-bottom: 10px;
	text-align: center;
}
.navbar a {
	color: #000000;
}
/* Change background on mouse-over */
.navbar a:hover {
	background: #ddd;
	color: black;
}
	

/*Typesetting*/

h1 {
	padding-top: 20px;
	font-family: "Times New Roman", Times, serif;
	font-weight: bold;
	font-size: 2em;
	padding-bottom: .05em;
	line-height: 2;
	margin:auto;
}


h2 {

	font-family: "Times New Roman", Times, serif;
	font-weight: bold;
	font-size: 1.25em;
	padding-bottom: .5em;
	line-height: 2;
	
}


h3{
	font-family: "Times New Roman", Times, serif;
	font-weight: bold;
	font-size: 1em;
	padding-bottom: .05em;
	margin-top: .25em;
	line-height: 1.5;
	
}

	p{
	font-family: arial, sans-serif;
	line-height: 1.5;
	width: 80%;
	margin: auto;
	
}

img{
    width: 80%;
    display: block;
    margin: 0 auto;
}



	
/* Main content */
.main {
	max-width: 100%;
	position: relative;
	margin: auto;
	text-align: center;
}


.tada{
	background-color: #81cbbe;
	width: 100%;
}


.tada aside {
	display: flex;
	justify-content: space-around;
	padding: 2em 0; 

}
	
.tada aside img{
		width:80%;
	}
	
	
	
.maindogs{
    width: 100%;
	}	

	
.maindogs img{
    padding-bottom: .5em;
    float: none;
}
	
.maindogs h2{
	width: 80%;
	margin: auto;
	}
	
.maindogs p{
	font-family: arial, sans-serif;
	line-height: 1.5;
	width: 80%;
	margin: auto;
	padding-bottom: 2.5em;
	}
	
	
	
#alitters{
	width: 100%;
	margin: 0 auto;
	}



.button {
	background-color: #81cbbe;
	border: none;
	color: white;
	padding: 10px 34px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 20px;
	margin: 4px 2px;
	cursor: pointer; 
	}


.gallery{
	width: 90%;
	padding-top: 1em;
	margin: 0 auto;

		}

		
		
.mainindex p{
	font-family: arial, sans-serif;
	line-height: 1.5;
	width: 85%;
	margin: auto;
	padding-top: .6em;
	padding-bottom: 1em;
	text-align: center;
	
}

	
/* Footer*/
.footer {
	background-color: #f2f2f2;
	display: flex;
	margin-top: 20px;

}

.footer section{
margin: 0 auto;

}

.footer li {
	display: flex;
	
}

}