body {
	background-color: #fff;
	margin: 0px;
	padding: 0px;
	font-family: Calibri, Arial,sans-serif , sans;
}
img {
	border: 0;
	max-width: 100%;
	height: auto;
}
input, textarea, select {
	font-family: Calibri, Arial,sans-serif , sans;
	font-size: 15px;
	border-radius: 5px;
	padding: 7px;
	border: 2px solid #757761;
	background-color: #fff;
	max-width: 80vw;
	width: 250px; 
} 
a[href^="mailto:"]
{
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}
table{
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}
th{
	padding: 5px 3vw 5px 5px;
	vertical-align: top;
	text-align: left;
	background-color: #666666;
	color: #fff;
	font-size: 20px; 
}
td{
	padding: 5px 3vw 5px 5px;
	vertical-align: top;
}
td{
	padding: 5px 3vw 5px 5px;
	vertical-align: top;
}
tr:nth-child(odd){
    background-color: #f0f0f0 ;
}
tr:nth-child(even) {
    background-color: #fff;

}
.header {
	text-align:center;
	padding: 20px; 
}
.links{
	min-height: 60px;
	text-align:center;
	font-size: 20px;
	line-height: 60px;
    position: sticky;
    top: 0px;
	z-index: 90;
    display: block;
}
.links a{
	color: #fff;
	text-decoration:none;
	padding: 0 1vw ;
	display: inline-block;
	position: relative;
	z-index: 91;
	background-color: rgb(203,206,145);

}
.links a:hover{
	color: #fff;
	background-color: rgb(118,82,139);
	transition: 1s;

}
.nav {
	margin: auto;

}
.navigation{
	background-color: rgb(203,206,145);
	color: #fff;
	text-align:center;
}
.clearfix::after
{
	content: '';
	display: table;
	clear: both;
}
#nav
		{
			width: 60em; /* 1000 */
			font-weight: 400;
			width: 100%;
			position: relative;
			z-index: 1000;
		}

#nav > a
			{
				display: none;
			}
.page{
	background-position:center center;
	background-size: cover;
	background-attachment:fixed;
	background-repeat: no-repeat;
	position:relative; 
	min-height: 70vh; 
	display: flex;
	align-items: center;
	justify-content: center;
}
.page > div h1{
	font-size: 14vw;
	color: rgba(255,255,255,0.8); 
	line-height: 20vw;
	margin: 0; 
	padding: 3vw 1vw;
	letter-spacing: 10px; 
	font-weight:normal; 
}
.box {
	border-radius: 20px; 
	background-color: rgba(118,82,139,0.7); 
	padding: 30px; 
	margin: 40px 10px;
	min-width: 50%;
	color: #fff;
	backdrop-filter: grayscale(100%) blur(4px);
	webkit-backdrop-filter:  blur(4px);
}
.box ul {
	list-style: none;
	margin: 0; 
}
.box li {
	background-image: url('images/tick.png');
    background-repeat: no-repeat;
    background-position: left center;
    line-height: 50px;
    padding-left: 50px;
    
 }

.maintext{
	max-width: 1000px;
	margin: auto;
	padding: 50px;
	line-height: 180%;
	color: #444;  
	font-size: 17px; 
}
.maintext h2{
	font-size: 26px;
	font-weight: normal; 
	color: rgb(118,82,139);
}
.maintext h1{
	font-size: 34px;
	font-weight: normal; 
	color: rgb(118,82,139);
	margin-bottom: 36px; 
}
.maintext p a {
	text-decoration: none;
	color: #444;
	border-bottom: 1px dashed rgb(118,82,139);
}
.maintext p a:hover {
	text-decoration: none;
	color: #000;
	border-bottom: 0;
}
.flex {
	display: flex; 
}
.flex > div {
	min-width: 200px; 
	flex-flow: row wrap;

}
.flex img {
	width: 200px; 
	height: 300px; 
	padding: 0 20px; 
}
.footer {
	background-color: rgb(203,206,145);
	color: #222;
	line-height: 180%; 
}
.footer > div{
	max-width: 1100px; 
	margin: auto; 
	display: flex; 
	flex-flow: row wrap;
	padding: 50px;
}
.footer a{
	color: #222;
	text-decoration: none; 
}
.footer a:hover{
	color: #000;
}
.footer > div > div{
	width: 400px; 
	padding: 50px; 
}
.social{

	text-align: center; 
}
.social img{
	margin: 20px; 

}
.face{
	max-width: 80px; 
}
.contact table {
	table-layout: fixed;
}
.contact input, .contact textarea, .contact select{
	width: 300px; 
	margin: 3px;
} 
.contact {
	margin: auto
} 
.contact td {
	border-bottom: 1px #999 dashed;
}
.oops {
	font-size: 200px;
	float: right;
	line-hight: 250px;
	margin: 50px;
	font-style: italic;
}
.iw {
	font-size: 12px;
	padding: 10px 100px;
	text-align: right;
	background-color: rgb(203,206,145);

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

}





@media only screen and ( max-width: 1024px ) {
.header{
	margin-top: 50px; 
}
.links {
	text-align: left;
	line-height: 30px;
	position: relative; 
	animation: fadein 0.5s;	
}
.links a {
	display: block;
	padding: 15px 30px ;

}
.page {
	background-attachment: scroll; 
}
.nav {
	margin: 0;
	width: auto;
}
.navigation{
	height: auto;
	top: 0;
	width: 100%; 
	position: absolute;
}
		
#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: 20px; 
}
.header br{
    display: block;
}
.links a::after{
	height: 0;	
}
.footer {
	font-size: 20px; 
}
}


@media only screen and ( min-width: 1400px ) {
.box{
	column-count: 2;

}
}






@media only screen and ( max-width: 640px ) {
.contact td {
	display: block;
	width: auto; 
	border-bottom: 0; 
}
.contact table{
	table-layout: auto;
}
.flex {
	display: block; 
}
.flex img {
	width: 100%;
	height: auto; 

}
.box li {
    line-height: 30px;
    min-height: 60px;
    padding-bottom: 20px; 
    background-position: left top;
 }
}
