html  {
height:100%;		/*+++++ Important 4 Elements height +++++*/
}
body {
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
background:url('../img/') no-repeat center;
background-size:100% 100%;	
height:100%;
position:relative;
color:#888;
}

li {list-style:none;}

noscript {
background:rgba(100,10,40,0.4);
position:fixed;
width:100%;
padding:2em;
height:100%;
color:#fff;
z-index:9999 !important;
}
noscript div {
background:rgba(0,0,0,0.9);
padding:2em;
max-width:700px;
max-height:92%;
margin:2em auto 0;
border:4px solid purple;
border-radius:15px;
overflow:auto;
line-height:1.7em;
box-shadow:0px 0px 15px #888;
}
noscript a {color:purple !important;}
noscript a:hover {color:#fff !important;}

#sc-share {
	z-index:9999;
}

footer {
	position:absolute; 
	bottom:1em; 
	width:100%; 
	font-size:0.7em;
	text-align:center;
	padding: 0.5em 3em;
}
h3, h5 {
font-variant:small-caps;
letter-spacing:0.1em;
}
/* ******************************************************************************************
							Vertical Sidenavigation
********************************************************************************************/
#myPage {	
height:100%;
}
#content {
#background:rgba(0,0,0,0.3);
#background:rgba(255,255,255,0.85);
}


#vb ul {
list-style:none;
margin:0;
padding:0;

}
#vb ul li a{
-webkit-transition: all 200ms ease !important;
transition: all 150ms ease !important;
text-decoration:none;
font-variant:small-caps;
font-size:1.5em;
letter-spacing:0.1em;
display:block;
background:#fff;
padding:13px 20px;
margin:1.2em 0.5em;
border:1px solid #d9d9d9;
border-radius:4px;
overflow:hidden;
}
#vb ul li a:hover {
background:purple;
color:#fff;
border-color:purple;
}
.w3-sidenav {
-webkit-transition: all 200ms ease !important;
transition: all 200ms ease !important;
line-height:1.2em;
margin-right:2em;
background:#fff;
font-size:115%;
z-index:1000;
color:#222;
}
.w3-sidenav .nav-close {
line-height:53px;
}
.w3-sidenav .nav-close:hover {
background:#;
border-bottom:0px solid #000;
opacity:1;
}
.w3-sidenav li a {	
padding:20px 1em;
}
.w3-sidenav li a:hover,
.w3-sidenav li a:focus {
background:purple;
color:#fff;
}

/*++++++++++++++ Sidenavigation UL Formats +++++++++++++++ */
.w3-sidenav ul {
font-size:100%;	
padding:0;
margin:0;
border:0;
}
.w3-sidenav ul li {
display:inline-block;
width:100%;
border-radius:0;
}
.w3-sidenav ul li a {
display:inline-block;
width:100%;
background:#333;
color:#fff; 
padding-right:1.5em;
white-space:normal;
}
.w3-sidenav ul li a:hover {
display:inline-block;
width:100%;
background:#fff;
color:#000; 
}
.seperator {
clear:both;
overflow:hidden;
height:3em;
}

/* ******************************************************************************************
							Zeit Bar JavaScript
********************************************************************************************/
#ZeitBox01 {
-webkit-transition: all .1s ease-in-out;
transition: all .3s 0.1s ease-in-out;
min-width:160px;
max-width:230px;
#height:5em;
font-size:0.8em;
text-align:center;
color:#fff;
color:purple;
padding:0.9em 1em;
margin:0 auto;
z-index:3000;
}
#clock-icon{
font-size:2.9em;
float:left;
margin:0px 0em;
}
#li-zeit {
#background:#999;
min-height:4em;
border-top:1px solid #ddd;
border-bottom:1px solid #ddd;
}

a {
-webkit-transition: all .15s ease-in-out;
transition: all .15s ease-in-out;
text-decoration:none !important;
}

a:link {color:#000;}
a:focus {color:#222;}
a:visited {color:#000;}
a:hover {color:rgba(255,255,255,0.5)}

.hidden-nav a:link {color:#ddd;}
.hidden-nav a:focus {color:#222;}
.hidden-nav a:visited {color:#ddd;}
.hidden-nav a:hover {color:rgba(120,120,120,0.7)}

.small-c {
font-variant:small-caps;
letter-spacing:2pt;
}
.round{
display:inline-block;
#border:4px solid #f9f9f9;
border-radius:0;
max-width:90%;
#padding:2em 2em 3em;
margin:5em auto;
}
table, tr, td {
margin:0;
padding:0;
border:0;
}
table.mid {
height:100%;
vertical-align:middle;
}
table.top {
height:100%;
vertical-align:top;
}
table.bottom {
height:100%;
vertical-align:bottom;
}
button {
margin-top:1em;
margin-bottom:1em;
}
p {
margin:0.5em 0 2em;
}
.img-round{
border-radius:100%;
}
.center {
text-align:center;
}
.xl {
font-size:2.8em;
}
.lg {
font-size:2.0em;
}
.overflow {
overflow:hidden;		
}
.logo {
-webkit-transition: all .15s ease-in-out;
transition: all .15s ease-in-out;
font-size:14em;
line-height:1.3em;
}
.social {margin-bottom:6em;}
/* ******************************************************************************************
							Main Classes
********************************************************************************************/
.full {
-webkit-transition: all .15s ease-in-out;
transition: all .15s ease-in-out;
height:100%;
}
.main-left {
background:url('../img/') no-repeat center;
background-size:100% 100%;	
z-index:10;
}
.main-center {
background:url('../img/bg1.jpg') no-repeat center;
}
.main-center-bg_left {
background:url('../img/bg1.jpg') no-repeat 65%;
}
.main-right {
background:url('../img/') no-repeat center;
background-size:100% 100%;
z-index:10;
}
#main-logo-header {
-webkit-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
background:rgba(0,0,0,0.6);
padding:0.5em 0;
letter-spacing:0.1em;
margin:1.5em -1em;
border-top:4px solid #ddd;
border-bottom:4px solid #ddd;
}
#main-nav {
width:100%;
padding:0em 0 em;
margin:0em auto;
align:center;
border-radius:4px;
}
#main-nav:hover {
}
.opac {
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
display:inline-block;
opacity:0.14;
}
.opac:hover {
opacity:1;
	
}
.top-bar {
position:absolute;
top:0;
border-bottom:4px solid transparent;
}
.bottom-bar {
position:absolute;
bottom:0;
border-top:4px solid transparent;
}
.top-bar, .bottom-bar {
height:3.5em;
width:100%;
text-align:left;
padding:1em 1em;
margin-left:-1em;
}

/* ******************************************************************************************
							Color Classes
********************************************************************************************/
.red {
background:#F44336;
border-color:#ddd ;
}
.red-t {
color:#F44336;
}
.green {
background:#4F8925;
color:#fff;
border-color:#ddd ;
}
.green-t {color:#4F8925;}

.w3-green {
color:#fff;
border-color:#ddd ;
}
.green1-t {color:#4F8925;}

.blue {
background:#673AB7;
border-color:#ddd ;
}
.blue-t {color:#673AB7;}

.blue1 {
background:#7C55F0;
border-color:#ddd ;
}
.blue1-t {color:#7C55F0}

.purple {
background:#9C27B0;
color:#fff;
border-color:#ddd ;
}
.purple-t {color:#9C27B0;}

.deep-purple {
background:#673AB7;
color:#fff;
border-color:#ddd ;
}
.deep-purple-t {color:#673AB7;}

.orange {
background:darkorange;
border-color:#ddd;
}
.orange-t {color:darkorange}

/* ******************************************************************************************
							Hidden Navbar Section
********************************************************************************************/
/*++++++++++++ NAVBAR TOP +++++++++++++*/
.hidden-nav {
	color:#999;
	font-size:1.4em;
	display:inline-block;
	width:100%;
	margin:0 auto 1em;
}
.hidden-nav a {
	margin:0 0.25em;
	font-size:0.8em;
}
/*++++++++++++ NAVBAR CENTER +++++++++++++*/
.hidden-bar-center {
background:#;
font-variant:small-caps;
margin:em -1em 0;
}
.hidden-bar-center a {
display:inline-block;
letter-spacing:0.2em;
color:#666;
padding:0.85em 1em;
margin:0 1em;
}
.hidden-bar-center a:hover{
color:#fff;
text-decoration:underline;
}

/* ******************************************************************************************
							Different Media Sizes
********************************************************************************************/
@media screen and (min-width: 768px) {
/* NAVBAR FORMAT */
.hidden-nav {
	display:none;
}
.hidden-bar-center {
	display:none;
}
}
@media screen and (min-height: 600px) and (max-width: 768px) {
/* NAVBAR FORMAT */
.main-left , .main-right {
#background:url('../img/bg1.jpg') no-repeat center;
	
}
.hidden-nav {
	color:#999;
	font-size:1.8em;
}
.logo {
font-size:11em;
line-height:1.4em;
}
.social {margin-bottom:0em;}
}
@media screen and (min-height: 900px) and (max-width: 800px) {
/* NAVBAR FORMAT */
.hidden-nav {
	color:#999;
	font-size:1.8em;
}
.logo {
font-size:10em;
line-height:1.6em;
}
.social {margin-bottom:0em;}
}
@media screen and (max-height: 590px) {
.logo {
font-size:9em;
line-height:1.6em;
}
.social {margin-bottom:0em;}
}	
@media screen and (max-height: 480px) {
/* NAVBAR FORMAT */
.hidden-nav {
	color:#999;
	font-size:1.2em;
}
.logo {
font-size:5em;
line-height:1em;
margin:0;
}
.social {margin-bottom:0em;}
}

@media screen and (max-height: 350px) {
/* NAVBAR FORMAT */
.hidden-nav {
	color:#999;
	font-size:1.2em;
}
.logo {
font-size:2.6em;
line-height:1em;
margin:0;
}
.social {margin-bottom:0em;}
}
@media screen and (min-height: 780px) {
/* NAVBAR FORMAT */
.logo {
margin-top:50%;
}
}

.video-container {
   position:relative;
   padding-bottom:56.25%;
   padding-top:10px;
   height:0;
   overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
   position:absolute;
   top:0;
   left:0;
   width:100%;
   height:100%;
   border-radius:0px;
}

/* ******************************************************************************************
							Hover FX & Animations
********************************************************************************************/
* {
-webkit-transition: all .5s ease-in-out;
transition: all .075s ease-in-out;
	
}
.shadow {
box-shadow:0px 0px 8px #bbb;
}
.t-shadow,
.logo:hover {
text-shadow:0px 0px 30px #ccc;
} 

#.main-right:hover {
	background:#7A2689;
	color:#fff;
}
#.main-right:hover .logo  {
	color:#fff;
}

#.main-center:hover  {
	background:darkorange;
	color:#fff;
}
#.main-center:hover .logo  {
	color:#fff;
}
#.main-left:hover  {
	background:#457223;
	color:#fff;
}
.main-left .logo:hover   {
	color:#fff;
}

.main-right .logo:hover{
	color:#fff;
	
}