html, body {
    margin: 0;
    padding: 0;
    overflow:hidden;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
	height:100%;
	font-family:"Arial Unicode MS";
}
.foot,.head{
		position:fixed;
		display:block;
		width: 100%;
		background:#333333;
		background:rgba(0,0,0,0.6); 
		
		z-index:9;
		text-align:center;
		color: #f2f2f2;
		padding: 1px 0 0 0;
}
.head{
	top:0px;
	height:8%;
	-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;	
	min-height: 50px;
	min-width: 900px;
}
.foot {
	bottom:0px;
	height: 5%;
	-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;	
}
.foot a{
text-decoration:none;
color:#FFFFFF;
}
.copy{
float:left;
padding:5px;
font-size:12px;
text-shadow: 0 2px 3px rgba(0,0,0,0.9); 
}
.provid{
float:right;
padding:5px;
font-size:12px;
text-shadow: 0 2px 3px rgba(0,0,0,0.9); 
}
#container {
    height: 100%;
    position: relative;

    /* Touch detection for Windows 8 */
    -ms-touch-action: none;

    /* IE 11 on Windows Phone 8.1*/
    touch-action: none;
	background:#99ff00;
	background-image:url(../imgs/mbg.jpg);
	top:0;
	overflow:inherit;
	background-size: cover;
	padding: 0 0 0 0;
	background-position:50% 50%;
}
.page_m {
background:#666666;
	background:rgba(0, 0, 0, 0.7);
	width:95%;
	height:80%;
	display:block;
	position: relative;
	margin:auto;
    -webkit-box-sizing: border-box; /* Safari<=5 Android<=3 */
    -moz-box-sizing: border-box; /* <=28 */
	box-sizing: border-box;
	overflow:inherit;
	color: #FFFFFF;
	top:13%;
	bottom:13%;
	border: solid 4px #009933;
}
.pic_m{
background:#666666;
display:block;
position:relative;
float:left;
width:250px;
height:300px;
top:13%;
left:5%;
background-image:url(../imgs/matasunderiji.jpg);
background-size: cover;
	padding: 0 0 0 0;
	background-position: 0 0;
	border: solid 3px #009933;
	-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset; 
	
}
.pic_m div{
background:rgba(256,256,256,.8);
display:block;
position:relative;
width:236px;
top:262px;
padding:7px;
font-size:18px;
text-align:center;
}
.info{
padding:7px;
}
.heading{
color:#FFFF00;
font-size:48px;
font-weight:bolder;
text-shadow: 1px 2px 4px rgba(0,0,0,0.9);
}
.des{
	font-size:26px;
	text-shadow: 1px 2px 4px rgba(0,0,0,0.9);
	text-align: justify;
}
.msgbox{
background:#FFFFFF;
border: solid 2px #666666;
display:block;
position:fixed;
top:45%;
left:40%;
padding:2px 15px 5px 15px;
z-index:1000;
font-size:16px;
}
nav
{
	float: right;
}

nav ul
{
	padding: 10px 0 0 0;
	margin: 0;
	list-style: none;  	
}

nav li
{
	float: left;
}

nav a
{
	float: left;
	height:17px;
    color: #eee;
    margin: 0 5px;
    padding: 9px 15px;
    text-decoration: none;
	border: 1px solid #000000;
	font: bold 14px Arial, Helvetica;
	background:#666666;
    background-color: rgba(0, 0, 0, 0.7);
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    text-shadow: 0 -1px 0 rgba(0,0,0,.8);    
}

nav a:hover
{
    background-color: #bb413b;
    background-image: -moz-linear-gradient(#831608, #bb413b);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#831608), to(#bb413b));      
    background-image: -webkit-linear-gradient(#831608, #bb413b);
    background-image: -o-linear-gradient(#831608, #bb413b);
    background-image: -ms-linear-gradient(#831608, #bb413b);
    background-image: linear-gradient(#831608, #bb413b);
}
.sitename
{
	float: left;
	padding: 5px 0 0 10px;
	margin: 0;
	font-size: 32px;
	font-weight: bolder;
	color: #FFFFFF;
	text-shadow: 0 2px 3px rgba(0,0,0,0.9);  
}
.slide_m {
	width:100%;
	height:100%;
	display:table;
    position: relative;
}
.slide_s {
    display:table-cell;
    vertical-align: middle;
	text-align:center;
	font-size:18px;
    width: 100%;;
	height:100%;
	position:relative;
	-webkit-box-sizing: border-box; /* Safari<=5 Android<=3 */
    -moz-box-sizing: border-box; /* <=28 */
    box-sizing: border-box;
}
.controlArrow {
    position: absolute;
    z-index: 4;
    top: 50%;
    cursor: pointer;
    width: 0;
    height: 0;
    border-style: solid;
    margin-top: -38px;
}
.controlArrow.prev {
    left: 15px;
    width: 0;
    border-width: 38.5px 34px 38.5px 0;
    border-color: transparent #fff transparent transparent;
}
.controlArrow.next {
    right: 15px;
    border-width: 38.5px 0 38.5px 34px;
    border-color: transparent transparent transparent #fff;
}
.pic{
background-size: cover;
padding: 0 0 0 0;
background-position:50% 50%;
}
.pic1{
background-size: cover;
background-image: url(../imgs/bg2.jpg);
padding: 0 0 0 0;
background-position:50% 50%;
}
.pic2{
background-size: cover;
background-image: url(../imgs/bg4.jpg);
padding: 0 0 0 0;
background-position:50% 50%;
}
.pic3{
background-size: cover;
background-image: url(../imgs/bg3.jpg);
padding: 0 0 0 0;
background-position:50% 50%;
}
.pic4{
background-size: cover;
background-image: url(../imgs/bg1.jpg);
padding: 0 0 0 0;
background-position:50% 50%;
}
.boxl{
background:#333333;
background-color: rgba(0, 0, 0, 0.7);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding:10px;
margin:10px;
text-align:center;
}
.boxl .heading{
font-weight:bold;
font-size:24px;
text-align:left;
}
.btback{
width:100px;
display:block;
position:absolute;
top:0px;right:120px;
padding:5px;
background:#333333;
background-color: rgba(0, 0, 0, 0.7);
text-align:center;
}
.btnext{
width:100px;
display:block;
position:absolute;
top:0px;right:0px;
padding:5px;
background:#333333;
background-color: rgba(0, 0, 0, 0.7);
text-align:center;
}
.btback a, .btnext a{
color:#FFFFFF;
}
.picframe{
background:#F6F6f6;
display:block;
position:relative;
float:left;
margin:4px;
margin-left:30px;
width:250px;
height:200px;
background-size: cover;
border: solid 3px #009933;
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
font-size:16px;
}
.fpic{
width:100%;
height:150px;
background-size: cover;
background-repeat:no-repeat;
padding: 0 0 0 0;
background-position:50% 50%;
}
.picframe .des{
color:#666666;
text-shadow:none;
font-size:16px;
text-align:center;
font-weight:bold;
height:22px;
overflow:hidden;
}
.picframe .des:hover{
color:#FFFFFF;
display:block;
position:absolute;
background:#333333;
background-color: rgba(0, 0, 0, 0.7);
height:100px;
width:100%;
overflow:hidden;
z-index:40000;
bottom:0px;
}
.picframe .info{
color:#666666;
text-shadow:none;
font-size:14px;
text-align:center;
}
.picflink{
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
}
.picframe:hover{
-moz-box-shadow: 0 0 3px rgba(256, 256, 256, 0.7);
-webkit-box-shadow: 0 0 3px rgba(256, 256, 256, 0.7);
box-shadow: 0 0 3px rgba(256, 256, 256, 0.7);
-webkit-transform: scale(1.03);
  	-moz-transform: scale(1.03);
  	-o-transform: scale(1.03);
}
.ffpic{
width:600px;
height:400px;
display:block;
position:relative;
float:left;
overflow:hidden;
border:solid 3px #FFFFFF;
}
.ffpicdes{
width:550px;
height:450px;
display:block;
position:relative;
float:right;
font-size:16px;
}
.ffpicdes a{
color:#FFFFFF;
text-decoration:none;
}