/* Conditional Statements */
.mobile-only, .topmenu li.mobile-only, .mini-only{display: none}

/* Mid sized screen:  or ((max-device-width: 990px) and (orientation: landscape))*/
@media only screen and (max-width: 1012px) and (min-width: 20px){
	.topmenu, .footmenu, .container, .header{
		width: 100%;
		background-size: 100% auto;
	}
	.container{
		overflow:hidden;
		border-radius:0;
	}/*
	.header{
		height:auto;
		min-height:220px;
		margin-bottom:0;
	}*/
	/*.header .address{width:50%;float:left}*/
}

@media only screen and (max-width: 955px) and (min-width: 20px)
{
	.thumbp{
		display:inline;
		font-size: 0;
	}
	.gallery_link{width: calc(33% - 20px) !important}
	.thumbp a, .gallery_link{
		width: calc(33% - 20px);
		display: block;
		float: left;
		margin: 10px;
		font-size: 14px;
	}
	.thumbp a img{width: 100%}
	.thumbp a:last-child{margin: 10px}
	.rightcol{
		width:calc(66% - 20px);
		float: left;
		display: block;
	}
	.leftcol{
		width:calc(33% - 20px);
		float: left;
		display: block;
	}
	.leftcol img{
		width:100%;
		height: auto;
	}
	.article{
		height: inherit; 
		min-height:inherit;
	}
	.topmenu{display:none}
	
	/* Top Menu */
  	body .topmenu{
  		height: inherit;
		min-height: inherit;
  	}
  	.topmenu li ul{
  		position: absolute;
		top: 0;
		width: 100%;
		padding: 7px 0;
		z-index: 100;
		background-color: #000;
  	}
	.topmenu li a{display:block}
  	.topmenu li:not(.mobile-only){
		display: none;
		padding-bottom: 10px;
	}
  	#showMenu span{display: none}
  	#showMenu{
  		display: block;
		background-image: url(/images/menu-icon.png);
		background-repeat: no-repeat;
		width: 35px;
		height: 30px;
		margin: 12px;
		display: block;
		width: 95%;
		height: 30px;
  	}	
	#showMenu:hover{
		background-color: inherit;
		border-radius: 0;
	}
	.topmenu *:hover ul li:first-child {
		background-image: none;
    	padding-top: 0;
	}
	ul.topmenu li.litab:nth-last-child(2) a{padding-bottom: 34px}
  	ul.topmenu, .topmenu ul{height: auto}
  	.topmenu ul li.open{
  		display: list-item;
		width: 100%;
  	}
	.topmenu li, .topmenu ul{
  		display: block;
		text-align: left;
		float: none;
		width: calc(100% - 5px);
		list-style:none;
		padding:0;
  	}
  	.header .topmenu{
  		display:block;
		text-align:left;
  	}	
  	body .topmenu *:hover ul{top: 0}
  	
	.topmenu *:hover ul{background-image: inherit}
	.topmenu li li a, .topmenu ul a{color:#FFF}
	.topmenu li.menu{
		width: 100%;
		clear: left;
		font-size: 24px;
		text-align: left;
	}
	.mobile-only, .topmenu li.mobile-only{display:inherit}
	.topnavmenu{display:inline-block}
	.footnavmenu{display:none}
	.full-only{display:none}
	.homeban{height:290px}
	#slider{top: -5px} 
}

/* Reduce the size of menu icons */
@media only screen and (max-width: 870px) and (min-width: 20px)
{
	.header .logo{
		width: calc(50% - 20px);
		margin-left: 20px;
		background-size:contain;
	}
	.header .topRight{
		margin-right: 20px;
		width: calc(50% - 20px);
	}
	.main table{width:100% !important}
	.homeban{height: auto}
}

/* Switch to Mobile Menu */
@media all and (max-width: 750px) and (min-width: 20px){
	.mini-only{display:inherit}
	.logo, .logo a{
		width: 350px;
		height: 125px;
		background-size: 100% auto;
	}
	.contact{clear:both}
	.container .contact *{text-align:center}
	
	.header .wildlife {display:none}
	
	.thumbp a {
    	width: calc(50% - 20px);
		height: 200px;
	}
	.thumbp a img{height:190px}
	.rightcol, .leftcol{float: none}
	.rightcol{width: calc(100% - 20px)}
	.leftcol{width: 100%}
	.leftcol img{
		width:100%;
		height: auto;
	}
	.half{
		width:100%;
		padding:0;
		margin-bottom:20px;
	}
}

@media all and (max-width: 660px) and (min-width: 20px){
	p{
		font-size:1em;
		line-height:1.1em;
	}
	select, .copy p, .copy p a, .buttonlink a, .buttonlink input[type="submit"], .buttonlink input[type="button"], 
	.buttonlink button, input, button{font-size: 1em}
	.copy {
    	background-position: 100% -11px;
    	padding: 40px 0 9px;
	}
	.copy, .copy *{font-size:14px}
	input.inputBig, textarea.inputBig, select.inputBig{width: calc(100% - 20px) !important}
	#loginform .small{
		clear: both;
		display: block;
	}
	.rightcol h2, .rightcol h2.sub{font-size:28px}
	.leftcol h3{font-size:20px}
	.header .logo, .header .topRight{
		width:calc(100% - 20px);
		margin: 0 10px;
		text-align: center;
		height: auto;
	}
	.header{height:auto;margin-bottom:0}
	.header h3{margin:0}
	.header .topRight{padding-bottom: 10px}
}

/* Screen Size Below 536px: */
@media all and (max-width: 594px) and (min-width: 20px){
	#contactform .td{
		clear:both;
		float: left;
	}	
	#contactform input, #contactform textarea{width:100% !important}
	iframe{width: 100%}
}

@media all and (max-width: 500px) and (min-width: 20px){
	.header .address1{font-size:22px}
	.header .address2{font-size:18px}
	.header .address3, .header .address4{font-size:16px}
	.main{padding:10px}
	.main img{
    	width: calc(100% - 20px);
		height: auto;
		float:none !important;
	}
	.thumbp a img{height:250px}
	.footmenu ul{display:none}
	#recaptcha_widget_div{
		overflow: hidden;
		width: 100% !important;
	}
	#contactform .table{width: 100% !important}
	#contactform .table, #contactform .tr, #contactform .td{display:inherit}
}
@media all and (max-width: 385px) and (min-width: 20px){
	.whatson .td span,.whatson .tr span{display:none}
	.whatson .tr,.whatson .td{
		font-size:12px;
		padding:5px;
	}
	.available, .unavailable, .primroseav, .pineav{
		width:14px;
		height:14px;
		margin-bottom:2px;
	}
	.key{border:solid 1px #ddd}
	.key, .key .tr, .key .td{display:inherit;width:100%}
	.gallery_link {
		width: 100% !important;
		margin:0;
	}
	.header .email,.header h3{display:none}
	.header .address{padding:0}
}