@import 'dist/jquery.fancybox.css';


body {
	background-position: center;
	margin: 0px;
	background-color: #262626;
	font-family: Arial, Helvetica, sans-serif;

}


img {
	max-width: 100%; 

}
#galleryheader{
	display: none; 

}
table{
	width: 100%;
	border-collapse: collapse;

}
td{
	padding: 3px 10px 10px 0;
}	

#green {
	padding-right: 45px;
	padding-left: 45px;
	padding-top: 10px;
	font-size: 14px;
	line-height: 150%;
	color: #FFFFFF;
	font-family: Calibri, Arial, Helvetica, sans-serif;
}

.title {
	padding: 50px;
	font-size: 14px;
	color: #ffffff;
	width:450px;
	font-family: Calibri, Arial, Helvetica, sans-serif;

}


a {
	color: #ffffff;
	text-decoration: none;
}

a:hover {
	color: #dddddd;
	text-decoration: underline;
}

.line  {
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: #FFFFFF;
}
li#links {
	list-style-type: none;
	margin-bottom:0px;
	margin-left:-5px
}
li#links a  {
	color: #ffffff;
	text-decoration: none;
	display: block;
	padding: 5px;
	padding-right: 10px;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #FFFFFF;

}
li#links a:hover  {

	color: #000;
	background-color: #6896B0;



}
h1 {
	font-size: 18px;
}
h2 {
	font-size: 16px;
}
#green h1, 
#green h2{
	color: #fff;
}

 input, textarea, select {
color: #606060;
font-family:  Calibri, Arial, Helvetica, Sans;
font-size: 8pt;
font-weight: normal;}

.withypool {
	font-family: Calibri, Arial, Helvetica, sans-serif;
	font-size: 14px;
	padding: 30px; 
	color: #fff;
}


li {
	margin-bottom:10px
}





.grid{
    display: flex;
    flex-wrap: wrap;
	clear: both; 
	margin: 50px auto; 
}
.grid > div{
    flex: 1 1 200px; 
    margin: 5px; 
}
.grid > div > img{
    width: 100%; 
    height: 100%;
}
@supports(display: grid) {
.grid{
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(calc(150px), 1fr));
    justify-items: center;
    gap: 28px; 
}
.grid.front{
	grid-template-columns: repeat(auto-fill,minmax(calc(225px), 1fr));
}
}

@supports(gap: 10px){
    .grid > div{
        margin: 0;
    }
}

@supports(object-fit: cover){
.grid > div > img,
.grid > div > a img{
    object-fit: cover;
	height: 100%;
	width: 100%;  
	border: 8px solid white;
}
.grid > div {
    height: 150px;
    width: 100%;
    max-height: 200px; 
}
.grid.front > div {
    height: 225px;
    max-height: 225px; 
}
} 

#map{
	height: 480px;
	width: 100%;
}



@media only screen and ( min-width: 1024px ) {
	body {
		background-image: url('images/bg.jpg');
		background-attachment: fixed;
		background-repeat: no-repeat;
	}

	#nav {
		width: 200px;
		padding-top: 40px;
		line-height: 160%;
	
	}
	.slant{
		float: right;
		margin: 100px 0 30px 30px;
		border: 8px solid white;
		transform: rotate(20deg);
		width: 300px; 
	}
	.slant.portrait{
		transform: rotate(15deg);
		width: 200px; 
	}
	#left {
		width: 300px;
	}
	#right {
		float: right;
	}
	#green {
		float: right;
		width: 640px;
		border-left-style: solid;
		border-left-color: #FFFFFF;
}
#container {
	width: 960px;
	margin-right: auto;
	margin-left: auto;
}
#alignright{
	float: right;
	padding-right:25px;
}
#galleryheader{
	display: block; 
	width: 960px;
	height: 202px;
	margin-right: auto;
	margin-left: auto;

}
.withypool {
	margin-left: 39px;
	margin-top: 60px;
	text-align:right
}
.mobile{
	display: none;
}
li#links{
	text-align:right;
}
#pinko {
	width: 100px;
	padding:5px;

}
#toryboy {
	padding:5px;	
	float: right;
	width:150px;

}
}



@media only screen and ( max-width: 1024px ) {
	#myGallery{
		display: none !important; 
	}
	li#links a  {
		padding: 15px;
	}
	.desktop{
		display: none;
	}

}



@media only screen and ( max-width: 640px ) {
	th,td{
		display: block;
	}

}