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

@media only screen and (max-width: 900px) {
	.logo {
		width: 70%;
		margin: 0;
		margin-left: 25vw;
		margin-top: -15vw;
		height: 50vw;
		padding: 0;
		text-align: center;	
	}
	.logo2 {
		width: 45%;	
		margin-left: 39vw;
		margin-top: 8vw;
	}
	
	.welcome {
		display: block;	
	}
	
	.welcome h1 strong {
		font-size: 12vw;
	}
	
	.column {
		width: 90%;	
	}
	
	footer .column {
		display: block;	
		text-align: center;
		margin: auto;
	}
	
	.footer {
		width: 100%;	
	}
	.footer2 {
		width: 100%;
		display: block;
		text-align: center;	
	}
	.footer3 {
		width: 100%;
		display: block;
		text-align: center;	
	}
	
	.about {
		display: block;
		width: 80%;	
		padding: 4vw;
	}
	
	.about img {
		width: 30%;	
	}
	
	header {
		display: none;	
	}
	
	.animallist {
		display: block;
		text-align: center;	
		width: 90%;
	}
	#animal {
		width: 60%;	
		margin: auto;
		padding-top: 5vw;
	}
	
	#animal a {
		font-size: 3vw;	
	}
	.columns h1 {
		font-size: 9vw;	
	}
	
	.columns {
		padding-bottom: 5vw;	
	}
	.columns h1 strong{
		font-size: 6vw
}
	.salesandevents #inner {
		width: 80%;	
	}
	
	#inner h1 {
		font-size: 8vw;	
	}
	
	#inner h1 strong {
		font-size: 5vw;	
	}
	
	.gallery {
		width: 90%;	
	}
	
	.gallery {
		flex-wrap: wrap;	
	}
	
	#galiamge {
		width: 40%;	
	}
	.top {
	 width: 80%;	
}

	.animalpage {
		width: 90%;	
		display: block;
	}
	
	.animalleft {
		width: 100%;	
	}
	
	.ped {
		font-size: 2vw;	
		width: 65%;
		margin: auto;
		margin-top: 4vw;
	}
	
	ul.nav li {
		display: none;	
	}
	.opener {
		display: block;
		position: fixed;
		font-size: 5vw;
		color: #200602;
		background-color: rgba(255,255,255,0.5);
		padding: 2vw;
		border-radius: 10px;	
		margin: 3vw;
		
	}
	.mobilenav {
		background-color: #200602;
	display: none;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	height: 100vh;
	position: fixed;
	width: 100vw;
	z-index: 12;
	}
	
	.mobilenav a {
		color: white;
		font-size: 3vw;	
		padding: 1vw;
		text-decoration: none;
		width: 100%;
		text-align: center;
	}
	
	.mobilenav a:hover {
		background-color: white;
		color: #200602; 
	}
	
	.dropdownmobile1,  .dropdownmobile2, .dropdownmobile3 {
		display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: white;
	width: 50%;
	}
	
	.dropdownmobile1 a, .dropdownmobile2 a, .dropdownmobile3 a  {
		color: #200602; 	
	}
	
	.dropdownmobile a:hover {
		background-color: #200602; 
		color: white;	
	}
	.show {
		display: flex;	
	}
	
	.opener:hover {
		cursor: pointer;	
	}
}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
	  
	  .contact div{
		  width: auto;
		  font-size: 3vw;
	  }
	  
	  .contact{
		  flex-direction: column;
	  }
	  
	.news h1 {
    	font-size: 18vw;
	}
    .bullsalenews {
    	width: 90%;
	}
    #animal img {
    	height: auto;
	}
	.logo {
		width: 70%;
		margin: 0;
		margin-left: 25vw;
		margin-top: -15vw;
		height: 50vw;
		padding: 0;
		text-align: center;	
	}
	.logo2 {
		width: 45%;	
		margin-left: 39vw;
		margin-top: 8vw;
	}
	
	.welcome {
		display: block;	
	}
	
	.welcome h1 strong {
		font-size: 12vw;
	}
	
	.column {
		width: 90%;	
	}
	
	footer .column {
		display: block;	
		text-align: center;
		margin: auto;
	}
	
	.footer {
		width: 100%;	
	}
	.footer2 {
		width: 100%;
		display: block;
		text-align: center;	
	}
	.footer3 {
		width: 100%;
		display: block;
		text-align: center;	
	}
	
	.about {
		display: block;
		width: 80%;	
		padding: 4vw;
	}
	
	.about img {
		width: 30%;	
	}
	
	header {
		/*display: none;	*/
	}
	
	.animallist {
		display: block;
		text-align: center;	
		width: 90%;
	}
	#animal {
		width: 60%;	
		margin: auto;
		padding-top: 5vw;
	}
	
	#animal a {
		font-size: 3vw;	
	}
	.columns h1 {
		font-size: 9vw;	
	}
	
	.columns {
		padding-bottom: 5vw;	
	}
	.columns h1 strong{
		font-size: 6vw
}
	.salesandevents #inner {
		width: 80%;	
	}
	
	#inner h1 {
		font-size: 8vw;	
	}
	
	#inner h1 strong {
		font-size: 5vw;	
	}
	
	.gallery {
		width: 90%;	
	}
	
	.gallery {
		flex-wrap: wrap;	
	}
	
	#galiamge {
		width: 40%;	
	}
	.top {
	 width: 80%;	
}

	.animalpage {
		width: 90%;	
		display: block;
	}
	
	.animalleft {
		width: 100%;	
	}
	
	.ped {
		font-size: 2vw;	
		width: 65%;
		margin: auto;
		margin-top: 4vw;
	}
	
	ul.nav li {
		display: none;	
	}
	.opener {
		display: block;
		position: fixed;
		font-size: 5vw;
		color: #200602;
		background-color: rgba(255,255,255,0.5);
		padding: 2vw;
		border-radius: 10px;	
		margin: 3vw;
		
	}
	.mobilenav {
		background-color: #200602;
	display: none;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	height: 100vh;
	position: fixed;
	width: 100vw;
	z-index: 12;
	}
	
	.mobilenav a {
		color: white;
		font-size: 3vw;	
		padding: 1vw;
		text-decoration: none;
		width: 100%;
		text-align: center;
	}
	
	.mobilenav a:hover {
		background-color: white;
		color: #200602; 
	}
	
	.dropdownmobile1,  .dropdownmobile2, .dropdownmobile3 {
		display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: white;
	width: 50%;
	}
	
	.dropdownmobile1 a, .dropdownmobile2 a, .dropdownmobile3 a  {
		color: #200602; 	
	}
	
	.dropdownmobile a:hover {
		background-color: #200602; 
		color: white;	
	}
	.show {
		display: flex;	
	}
	
	.opener:hover {
		cursor: pointer;	
	}
}