@charset "utf-8";
/* CSS Document */

/* Preloader */

#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#f5f5f5; /* change if the mask should have another color then white */
    z-index:99; /* makes sure it stays on top */
}

#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:50%; /* centers the loading animation vertically one the screen */
    background-image:url(../images/status.gif); /* path to your loading animation */
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px; /* is width and height divided by two */
}

/* BORDER */
#top, #bottom, #left, #right {
	background: #ffffff;
	position: fixed;
}
#left, #right {
	top: 0; 
	bottom: 0;
	width: 25px;
}
#left { 
	left: 0; 
}
#right { 
	right: 0; 
}
#top, #bottom {
	left: 0; right: 0;
	height: 20px;
}
#top { 
	top: 0; 
}
#bottom { 
	bottom: 0; 
}

/* NAVIGATION */
#nav {
/*	max-width:500px;
	margin:0 auto; */
	overflow:hidden;
}
#nav .inner {
	position:relative;
	width:90%;
	margin:0 auto;
}
#nav .inner .logo {
	width:50%;
	float:left;
	padding-top:44px;
}
#nav .inner .menu {
	width:50%;
	float:left;
	padding-top:80px;	
	text-align:right;
}
#nav .inner .menu a {
	text-transform:uppercase;
	font-size:0.8em;
	font-weight:300;
	padding:0px 20px;
	color:#fdfdfd;
	text-decoration:none;
}
#nav .inner .menu a:hover {
	color:#EC980F;
	text-decoration:none;
}

/* FOOTER */
#footer {
	background:#333333;
	padding:30px 0px 50px;
	text-align:center;
	color:#acacac;
	font-size:0.7em;
}

@media all and (max-width: 1400px) {

/* NAVIGATION */
#nav {
/*	max-width:1250px; */
}

}


@media all and (max-width: 1366px) {


/* NAVIGATION */
#nav {
/*	max-width:1200px; */
}

}

@media all and (max-width: 1280px) {

/* BORDER */
#left, #right {
	width: 20px;
}
#top, #bottom {
	height: 20px;
}

/* NAVIGATION */
#nav {
/*	max-width:1100px; */
}

}


@media all and (max-width: 1024px) {

/* BORDER */
#left, #right {
	width: 20px;
}
#top, #bottom {
	height: 20px;
}

/* NAVIGATION */
#nav {
/*	max-width:900px; */
}

}

@media all and (max-width: 800px) {

/* BORDER */
#left, #right {
	width: 0px;
}
#top, #bottom {
	height: 0px;
}

/* NAVIGATION */
#nav {
/*	max-width:720px; */
}
#nav .inner .logo {
	width:40%;
	padding-top:36px;
}
#nav .inner .logo img {
	width:80%;
}
#nav .inner .menu {
	width:60%;
	padding-top:60px;	
}

}

/* MOBILE */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 736px) {

/* BORDER */
#top, #bottom, #left, #right {
	display:none;
}

/* NAVIGATION */
#nav {
	max-width:100%;
}
#nav .inner .logo {
	width:100%;
	float:none;
	padding:10px;
}
#nav .inner .logo img {
	width:90%;
}
#nav .inner .menu {
	width:100%;
	float:none;
	padding-top:0px;	
	text-align:center;
}
#nav .inner .menu a {
	font-size:0.8em;
	font-weight:700;
	padding:10px 0px;
	background:rgba(0,0,0,0.7);
	display:block;
}

/* FOOTER */
#footer {
	padding:20px;
	text-align:center;
	font-size:0.9em;
}

}