@charset "UTF-8";
/* CSS Document */
html {
	background-color:#e7f0ce;
	font-family: 'Raleway', sans-serif;
	font-weight:300;
	font-size: 13px;
	line-height:18px;
	color:#000000;
	text-align:center;
	}
body{margin:0 auto; height:100%}

a {text-decoration:none; color: inherit;font-weight:600;}

#footer a {text-decoration:none;color:#FFFFFF;}

a:hover{color:#000000;}

em{font-style:normal; color:#000000; font-weight:600;}

h1{
	font-size:16px;
	font-weight:normal;
	line-height:20px;
	}
h2{
	font-size:16px;
	font-weight:normal;
	line-height:20px;
	text-transform: uppercase;
	letter-spacing:0.2em;
	}
hr.hrnarrow{
	border: 0;
    height: 1px;
	background: #ffffff;
	width:60px;
	}
hr.hrwide{
	border: 0;
    height: 1px;
	background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
	width:500px;
}
p {
	font-family: 'Raleway', sans-serif;
	font-weight:300;
	font-size: 13px;
	line-height:18px;
	color:#000000;
	text-align:center;
	}
#wrapper{
	/*max-width:1400px;*/
	width:100%;
	margin-left:auto;
	margin-right:auto;
	}

/*--------------------------header--------------------------*/
#mainpic{
	position:relative;
	overflow:hidden;
	/*max-width:1400px;*/
	width: 100%;
	height:auto;
	}
#mainpic img{
	width:100%;
	height:100%;
	object-fit: cover;
	}
#mnlogo{
	position:absolute;
	margin-left:5%;
	margin-right:auto;
	margin-top:5%;
	width:300px;
	height:127px;
	z-index: 200;
}
#eblogopage{
	z-index:10;
	position:relative;
	width:253px;
	height:24px;
	top:-20px;
	margin-left:auto;
	margin-right:auto;
	background:url(eblinks/ebpagelogob.png) no-repeat;
	background-size:100%;
}
/*#eblogopage{
	z-index:10;
	position:relative;
	width:295px;
	height:28px;
	top:40px;
	left:40px;
	background:url(eblinks/ebpagelogo.png) no-repeat;
	background-size:100%;
}*/
	
/*--------------------------pic slider--------------------------*/
#mainpicslider{
	position:relative;
	top:-28px;
	overflow:hidden;
/*	max-width:1400px;*/	
width:100%;
margin-bottom:-28px;
	}
#picslider{
	width: 700%;
	height:100%;
	}
.pic{
	float:left;
	width: 14.2857%;
	height:100%;
		}
.pic img{
	width:100%;
	height:100%;
}

#slidervideo{
	position:relative;
	padding-bottom: /*49.8%*/ 56.25%;
	padding-top:0px;
	/*max-width:1400px;*/
	Height:0;
	margin-top:-16%;
}
#slidervideo iframe{
	position:absolute;
	left:0;
	width:100%;
	height:100%;
	}
#sliderhostedvideo{
	position:relative;
	padding-bottom: /*49.8%*/ 56.25%;
	padding-top:0px;
	/*max-width:1400px;*/
	Height:0;
	margin-top:-18%;
}
#innervideo{
	position:absolute;
	left:0;
	width:100%;
	height:100%;
}
#controls{
	z-index:100;
	position:absolute;
	width:60px;
	height:60px;
	bottom:20px;
	margin-left:47%;
}
button{
	border:none;
	background:none;
	maergin:0px;
	paddding:0px;
	cursor:pointer;
	opacity:0.7;
}
button:hover{opacity:1;}
#picbuttons{
	z-index:10;
	position: relative;
	width: 160px;
	margin-left:auto;
	margin-right:auto;
	top:-40px;
	color: #FFFFFF;
	font-size:16px;
}
.picbutton{
	float:left;
	cursor:pointer;
	width:40px;
	height:20px;
	margin-left:0px;
	margin-right:0px;
	background:url(mnlinks/picbutton.png) no-repeat center;
	opacity:0.5;
	}
.picbuttonon{
	float:left;
	cursor:pointer;
	width:40px;
	height:20px;
	margin-left:0px;
	margin-right:0px;
	background:url(mnlinks/picbutton.png) no-repeat center;
	opacity:1;
	}
.picbutton:hover {opacity:1 !important;}
.picbuttonon:hover {opacity:1 !important;}


/*--------------------------mainmenu--------------------------*/

#mainmenu{
	position:relative;
	/*max-width:1400px;*/
	width:100%;
	top: -32px;
	background-color:#8fa650;
	height: auto;
	text-transform: uppercase;
	color: #FFFFFF;
	font-size:13px;
	font-weight:400;
	letter-spacing:0.1em;
	padding-top:8px;
	padding-bottom:5px;
	margin-left:auto;
	margin-right:auto;
	line-height:30px;
	}
#mainmenutext{
		width:auto;
		height:auto;
		margin-left:auto;
		margin-right:auto;
	}
#footertext2rows{
		width:320px;
		margin-left:auto;
		margin-right:auto;
		display:none;
	}
#catadownload{
	position: relative;
	float: right;
	top:-120px;
	right: 30px;
	width: 200px;
}
#saledownload{
	position: relative;
	float: left;
	top:-120px;
	left: 30px;
	width: 200px;
}
	
/*--------------------------sub menu--------------------------*/
#submenuwrapper{
	position:relative;
	width:360px;
	margin-left:auto;
	margin-right:auto;
	text-transform:uppercase;
}
#submenuwrapper2 > a {color: #888888;text-transform:uppercase;}
#submenuwrapper2 > a:hover {color: #000000;text-transform:uppercase;}

#submenuwrapper2{
	position:relative;
	width:480px;
	margin-left:auto;
	margin-right:auto;
	text-transform:uppercase;
	font-size:11px;
}
.submenu{
	position:relative;
	float:left;
	width:90px;
	height:40px;
	text-align:center;
	cursor:pointer;
	font-weight:400;
	font-size:11px;
	letter-spacing:0.05em;
	text-transform:uppercase;
	color: #888888;
}
.submenu2{
	position:relative;
	float:left;
	width:120px;
	height:40px;
	text-align:center;
	cursor:pointer;
	font-weight:400;
	font-size:11px;
	letter-spacing:0.05em;
	text-transform:uppercase;
	color: #888888;
}
.submenu3{
	position:relative;
	float:left;
	width:160px;
	height:40px;
	text-align:center;
	cursor:pointer;
	font-weight:400;
	font-size:11px;
	letter-spacing:0.05em;
	text-transform:uppercase;
	color: #888888;
}
#subon{color:#000000;}
	
.submenu:hover{color:#000000;}

.vtmenu{
	width:100%;
	height:20px;
	text-align:center;
	cursor:pointer;
	font-weight:400;
	letter-spacing:0.05em;
	color: #888888;
}
	
/*--------------------------content--------------------------*/
#content{
/*	max-width:900px;*/	
	width: 70%;
	min-width: 720px;
	margin: 30px auto 30px auto;
	}
#pagecontent{
	position:relative;
	float:left;
	width:100%;
	text-align:center;
}
#introtext{
	/*width:600px;*/
	width:85%;
	margin-top:-10px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:20px;
	}

.text{
	float:left;
	width:410px;
	margin-left:20px;
	margin-right:20px;
	text-align:left;
	display:inline-block;
}
#logintext{
	width:95%;
	margin-top:-10px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:20px;
	}
.logincontent{
	float:left;
	width:20%;
	min-width:140px;
	margin-top:60px;
}
	
.contactwrapper{
	width:600px;
	height:auto;
	display:inline-block;
}
.contacttext{
	float: left;
	width:280px;
	height:auto;
	margin-left:10px;
	margin-right:10px;
}

	
	/*------------ desktop screen <900px -------------------*/
	@media only screen and (max-width: 900px) {
	.text{float:none;}
	.contactwrapper{float:none;}
	}
	
	/*------------ iPhone 4 and 4s portrait and landscape -------------------*/
	@media only screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 480px)  {
	/*#eblogopage {width:100px; height:12px; top:15px; left:15px;}*/
	.picbutton:hover {opacity:0.6;}
	.picbuttonon:hover {opacity:0.6;}
	.text{float:none; width:280px;}
	#introtext{width:90%;}
	hr.hrwide{width:300px;}
	}
	
	/*------------ iPhone 4 and 4s portrait -------------------*/
	@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)  {
	#eblogohome {font-size:12px;margin-top:3%;}
	#ebfalcon {width:20px; height:26px;margin-bottom:5px;}
	#footer{height:50px;}
	#footertext{display:none;}
	#footertext2rows {display:block;}
	}
	
	/*------------ iPhone 4 and 4s landscape -------------------*/
	@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
	#eblogohome {font-size:14px;margin-top:3%;}
	#ebfalcon {width:30px; height:38px;margin-bottom:5px;}
	}
	
	/*------------ iPhone 6 portrait and landscape -------------------*/
	@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
	.picbutton:hover {opacity:0.6;}
	.picbuttonon:hover {opacity:0.6;}
	.text{float:none; width:330px;}
	#introtext{width:90%;}
	hr.hrwide{width:350px;}
	}
	
	/*------------ iPhone 6 portrait -------------------*/
	@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)  {
	
	/*#eblogopage {width:150px; height:17px; top:15px; left:15px;}*/
	#footer{height:50px;}
	#footertext{display:none;}
	#footertext2rows {display:block;}
	#submenuwrapper2{width: 240px;}
	}
	
	/*------------ iPhone 6 landscape -------------------*/
	@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape)  {

	#eblogohome {font-size:18px;margin-top:3%;}
	#ebfalcon {width:40px; height:51px;margin-bottom:5px;}
/*	#eblogopage {width:200px; height:22px; top:15px; left:15px;}
*/	
	}
	
	/*------------ iPhone 6+ portrait and landscape -------------------*/
		@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
	.picbutton:hover {opacity:0.6;}
	.picbuttonon:hover {opacity:0.6;}
	.text{float:none;}
	#introtext{width:90%;}
	hr.hrwide{width:400px;}
		}

	/*------------ iPhone 6+ portrait -------------------*/
	@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait)  {
	#eblogohome {font-size:18px;margin-top:3%;}
	#ebfalcon {width:40px; height:51px;margin-bottom:5px;}
	/*#eblogopage {width:200px; height:22px; top:15px; left:15px;}*/
	#footer{height:30px;}
	#footertext{display:block;}
	#footertext2rows {display:none;}
	}
	
	/*------------ iPhone 6+ landscape -------------------*/
	@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape)  {
	/*#eblogopage {width:200px; height:22px; top:15px; left:15px;}*/
	#eblogohome {font-size:26px;margin-top:3%;}
	#ebfalcon {width:50px; height:64px;margin-bottom:5px;}
	}
	
	/*------------ iPad 1 and 2 Portrait -------------------*/
	@media only screen and (min-device-width: 768px)  and (max-device-width: 1024px) and (orientation: portrait) {
	
	}
	/*------------ iPad 1 and 2 Portrait and Landscape -------------------*/
	@media only screen and (min-device-width: 768px)  and (max-device-width: 1024px) {
	.picbutton:hover {opacity:0.6;}
	.picbuttonon:hover {opacity:0.6;}
	}
/*------------ Matukituki mobile css -------------------*/

	@media only screen 
	and (orientation: portrait)
{
#mnlogo{
	transform: scale(0.5, 0.5);
	transform-origin: left top;
	margin-left:4%;
	margin-top:0%;
}
.pic img{
	width:170%;
	height:170%;
	}
#content{
	width: 75%;
	min-width: 300px;
	margin: 30px auto 30px auto;
	}
}


@media only screen 
	and (max-device-width: 480px)
{
#mnlogo{
	transform: scale(0.7, 0.7);
	transform-origin: left top;
	margin-left:4%;
	margin-top:1%;
}
.pic img{
	width:110%;
	height:110%;
	}
#mainmenu{
	font-size:10px;
}
#content{
	width: 75%;
	min-width: 300px;
	margin: 30px auto 30px auto;
	}
}