@import 'https://fonts.googleapis.com/css?family=Arimo|Oswald';






body {
	background-color: #FFFFFF;
	margin: 0px;
	font-family: Arimo, Arial, Helvetica, sans-serif; 
	position: relative; 
}
img {
	max-width: 100%;
	border: 0; 
}
h1 {
	font-size: 28px;
	font-weight: 400;
	letter-spacing: 1px; 
	font-family:Oswald;
}
h2 {
	font-size: 24px;
	font-weight: 400;
	font-family:Oswald;

}
table {
	width: 100%; 
	border-collapse: collapse: 
	border: 0;
}
td {
	vertical-align: top;
	padding: 5px 30px 5px 5px;
	border-bottom: 1px #999 dashed;
}



.links {

}
.links a{
	padding: 21px 10px 19px 10px; 
	color: #fff;
	text-decoration:none; 
	white-space:nowrap;
}
.links a:hover{
	background-color: #68701a;
}
.header {
	text-align: right;
	padding: 10px 10vw;
	max-width: 800px;
	margin: 20px auto; 
}
.header img {
	width: 200px;
}
.page{
	height: 60vh;
	background-position:center center;
	background-size: cover;
	background-attachment:fixed;
	background-repeat: no-repeat;
	position:relative; 
	box-shadow: 0 0 100px rgba(0, 0, 0, 0.8) inset; 
}
.maintext {

    max-width: 1000px;
    padding: 2vw 5vw;
    font-size: 17px;
    line-height: 180%;
    color: #4C4C4C;
    margin: auto;

}
.maintext a{
	text-decoration: none;
	color:	#4c4c4c;
	border-bottom: 1px #999 dashed;
}
.footer {
	background-color: #a1ae2a;
	color: #fff;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	padding: 4vw 2vw;
	line-height: 180%; 
}
.footer > div {
	width: 300px; 
	padding: 20px; 
}
.footer a {
	text-decoration:none;
	color: #fff; 
}
.footer a:hover {
	color: #00AEEF; 
}
.iw {
	font-size: 10px;
	padding: 10px 5vw;
	text-align: right;
	background-color:#fff;

} 
.iw a{
	color: #888;
	text-decoration: none;

}
.logo {
	text-align: center;
	max-width: 1200px;
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-flow: row wrap;
}
.logo div{
	vertical-align:middle; 
	flex: 1 1 auto;
	width: 160px;
}
.logo img {
	max-width: 160px; 
}
.pictures{
	display: flex;
 	flex-flow: row wrap;
    justify-content: center;
	padding		: 4px;
	margin: 0 auto 50px auto;
	max-width: 1400px;
}
.pictures div {
	flex: 1 1 auto;
	width: 250px;
	height	: 250px;
	max-width: 600px;
	position: relative;
	margin	: 4px;
}

.pictures div img{
object-fit: cover ;
	width: 100%;
	height:  100%;

}
.pictures a, .pictures a:hover{
	border-bottom: 0; 
}
.nav {
	margin: auto;
	width: 990px;

}
.navigation{
	background-color: #a1ae2a;
	color: #fff;
	line-height:60px;
	text-align:center;
	position: sticky;
	top: 0;
	z-index: 3;
}
.clearfix::after
{
	content: '';
	display: table;
	clear: both;
}
#nav
		{
			width: 60em; /* 1000 */
			font-family: 'Open Sans', sans-serif;
			font-weight: 400;
			width: 100%;
			position: relative;
			margin: -16px 0 0 0;
			z-index: 1000;
		}

#nav > a
			{
				display: none;
			}
.grid {
	display: block;
	margin:auto;
	text-align: center; 
	max-width: 1200px;
	margin: auto;
	border: 4px white solid;
	}
.grid div:nth-child(2) {
	width: calc( 34%  );
}
.grid div {
	display: inline-block;
	width: calc( 33%  );
	height:  calc( 40vh );
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	margin: 0;
	padding: 0; 
	border: 4px white solid;
}
.grid div img {
	width: 100%;
	height: 100%;
}

@supports (display: grid) {
.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	grid-auto-rows: 50vh;
	grid-auto-flow: row dense;

}
.grid div:nth-child(2) {
	width: auto;
}
.grid div {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
  color: #fff;
  grid-column-start: auto;
  grid-row-start: auto;
  color: #fff;
  counter-increment: item-counter;

	width: auto;
	height: auto;
	background-size: cover;
	background-position: center;
  }
  }
.social{
	background-color: #a1ae2a;
	text-align: center; 
	padding: 1vw;
} 
.social img{
	margin: 10px; 
}





@media only screen and ( max-width: 1024px ) {
.links {
	text-align: left;
	line-height: 30px;
	position: relative; 	
}
.links a {
	display: block;
	padding: 15px 30px ;

}
.page {
	background-attachment: scroll; 
}
.nav {
	margin: 0;
	width: auto;
}
.navigation{
	height: auto;

	position: relative;
}
.grid div {
	display: block !important; 
	width: auto; 
	max-width: 300px; 
	height: 400px; 
	width: auto; 
	margin: auto;
}
 .grid {
	display: block !important; 
	width: auto; 
	height: auto;
}	
		
#nav
			{
				position: relative;
				top: auto;
				left: auto;
				margin: 0 0 0 0;
			}





#nav > a
				{
					width: 3.125em; /* 50 */
					height: 3.125em; /* 50 */
					text-align: left;
					text-indent: -9999px;
			
					position: relative;
					}
#nav > a:before,
#nav > a:after
					{
						position: absolute;
						border: 2px solid #fff;
						top: 35%;
						left: 25%;
						right: 25%;
						content: '';
					}
#nav > a:after
					{
						top: 60%;
					}

#nav:not( :target ) > a:first-of-type,
#nav:target > a:last-of-type
				{
					display: block;
				}

#nav .links
			{
		
				display: none;


			}
#nav:target > .links
				{
					display: block;
				}

.maintext {
	font-size: 18px; 
}
}




@media only screen and ( max-width: 640px ) {
.pictures div {
	width: 100%;
	height	: auto;
	max-width: none;
}
td {
	display: block;
	border-bottom: 0;
}
tr {
	border-bottom: 1px dashed #333;
}
}