h1,h4 {
  font-size: 2vw;
	font-family: 'Play', sans-serif;
	color: #3c2415;
}

h3 {
  font-size: 3vw;
	font-family: 'Play', sans-serif;
	color: #f9c651;
}

h5 {
  font-size: 1.5vw;
	font-family: 'Play', sans-serif;
	color: #3c2415;
}

h6 {
  font-size: 1.5vw;
	font-family: 'Play', sans-serif;
	color: #f9c651;
}

h2 {
  font-size: 2vw;
	font-family: 'Play', sans-serif;
}

/****************
NAVIGATION BUTTONS
****************/

#wrapper {
	width: auto;
	margin-right: auto;
	margin-left: auto;
}
 #Logo
  {
    display: block;
    width: 19.8%;
    height: 8.4%;
	position: fixed;
    left: 9.33%;
    top: 0.6%;
	z-index: 903;
	background-size: 100% 100%;
  }

  #Logo:hover
  { 
    position: fixed;
    transition: .5s ease;
    left: 9.33%;
    top: 0.6%;
	z-index: 903;
    background: url("images/Logo_Mouseover.png") no-repeat 0 0;
	background-size: 100% 100%;
  }
  #Logo:active
  { 
    position:fixed;
    transition: .5s ease;
    left: 9.35%;
    top: 0.6%;
	z-index: 903;
    background: url("images/Logo_Normal.png") no-repeat 0 0;
	background-size: 100% 100%;
  }
 #About
  {
    display: block;
    width: 10.9%;
    height: 7.4%;
	position: fixed;
    left: 34.6%;
    top: 4.3%;
	z-index: 903;
	background-size: 100% 100%;
  }

  #About:hover
  { 
    position: fixed;
    transition: .5s ease;
    left: 34.6%;
    top: 4.3%;
	z-index: 903;
    background: url("images/About_Mouseover.png") no-repeat 0 0;
	background-size: 100% 100%;
  }
  #About:active
  { 
    position:fixed;
    transition: .5s ease;
    left: 34.6%;
    top: 4.3%;
	z-index: 903;
    background: url("images/About_Click.png") no-repeat 0 0;
	background-size: 100% 100%;
  }
  #Brushes
  {
    display: block;
    width: 14.5%;
    height: 8.7%;
	position:fixed;
    left: 51.7%;
    top: 6.2%;
	z-index: 903;
    background-size: 100% 100%;
  }

  #Brushes:hover
  { 
    position:fixed;
    transition: .5s ease;
    left: 51.7%;
    top: 6.2%;
	z-index: 903;
    background: url("images/Brushes_mouseover.png") no-repeat 0 0;
	background-size: 100% 100%;
  }
  #Brushes:active
  { 
    position:fixed;
    transition: .5s ease;
    left: 51.7%;
    top: 6.2%;
	z-index: 903;
    background: url("images/Brushes_Click.png") no-repeat 0 0;
	background-size: 100% 100%;
  }
  #Team
  {
    display: block;
    width: 14.2%;
    height: 8.3%;
	position:fixed;
    left: 70.8%;
    top: 8.9%;
	z-index: 903;
	background-size: 100% 100%;
  }

  #Team:hover
  { 
    position:fixed;
    transition: .5s ease;
    left: 70.8%;
    top: 8.9%;
	z-index: 903;
    background: url("images/team_hover.png") no-repeat 0 0;
	background-size: 100% 100%;
  }
  #Team:active
  { 
    position:fixed;
    transition: .5s ease;
    left: 70.8%;
    top: 8.9%;
	z-index: 903;
    background: url("images/team_click.png") no-repeat 0 0;
	background-size: 100% 100%;
  }
  #Inovation
  {
    display: block;
    width: 12.4%;
    height: 6%;
	position:fixed;
    left: 37.3%;
    top: 19.1%;
	z-index: 903;
	background-size: 100% 100%;

  }

  #Inovation:hover
  { 
    position:fixed;
    transition: .5s ease;
    left: 37.3%;
    top: 19.1%;
	z-index: 903;
    background: url("images/Custom_State_Mouseover.png") no-repeat 0 0;
	background-size: 100% 100%;
  }
  #Inovation:active
  { 
    position:fixed;
    transition: .5s ease;
    left: 37.3%;
    top: 19.1%;
	z-index: 903;
    background: url("images/Custom_State_Click.png") no-repeat 0 0;
	background-size: 100% 100%;
  }
  #Contacts
  {
    display: block;
    width: 10.42%;
    height: 5.37%;
	position:fixed;
    left: 51.2%;
    top: 21.25%;
	z-index: 903;
	background-size: 100% 100%;

  }

  #Contacts:hover
  { 
    position:fixed;
    transition: .5s ease;
    left: 51.2%;
    top: 21.25%;
	z-index: 903;
    background: url("images/Contacts_Mouseover.png") no-repeat 0 0;
	background-size: 100% 100%;
  }
  #Contacts:active
  { 
    position:fixed;
    transition: .5s ease;
    left: 51.2%;
    top: 21.25%;
	z-index: 903;
    background: url("images/Contacts_Click.png") no-repeat 0 0;
	background-size: 100% 100%;
  }
    #Facebook
  {
    display: block;
    width: 5.8%;
    height: 9%;
	position:fixed;
    left: 91.5%;
    top: 10.8%;
	z-index: 903;
	background-size: 100% 100%;

  }

  #Facebook:hover
  { 
    position:fixed;
    transition: .5s ease;
    left: 91.5%;
    top: 10.8%;
	z-index: 903;
    background: url("images/Facebook_State_MouseOver.png") no-repeat 0 0;
	background-size: 100% 100%;
  }
  #Facebook:active
  { 
    position:fixed;
    transition: .5s ease;
    left: 91.5%;
    top: 10.8%;
	z-index: 903;
    background: url("images/Facebook_State_Click.png") no-repeat 0 0;
	background-size: 100% 100%;
  }
#Shop
  {
    display: block;
    width: 10.84%;
    height: 6.39%;
	position:fixed;
    left: 22.16%;
    top: 16.28%;
	z-index: 903;
	background-size: 100% 100%;

  }

  #Shop:hover
  { 
    position:fixed;
    transition: .5s ease;
    left: 22.16%;
    top: 16.28%;
	z-index: 903;
    background: url("images/shop_hover.png") no-repeat 0 0;
	background-size: 100% 100%;
  }
  #Shop:active
  { 
    position:fixed;
    transition: .5s ease;
    left: 22.16%;
    top: 16.28%;
	z-index: 903;
    background: url("images/shop_active.png") no-repeat 0 0;
	background-size: 100% 100%;
  }
  #Brush
  {
    display: block;
    width: 23.22%;
    height: 12%;
	position:fixed;
    left: 60.5%;
    top: 54.35%;
	z-index: 801;
	background-size: 100% 100%;

  }

  #Brush:hover
  { 
    position:fixed;
    transition: .5s ease;
    left: 60.5%;
    top: 54.35%;
	z-index: 801;
    background: url("images/Brush_Blue.png") no-repeat 0 0;
	background-size: 100% 100%;
  }
  #Brush:active
  { 
    position:fixed;
    transition: .5s ease;
    left: 60.5%;
    top: 54.35%;
	z-index: 801;
    background: url("images/Brush_Green.png") no-repeat 0 0;
	background-size: 100% 100%;
  }
  
  #Close_About
  {
    display: block;
    width: 1.7%;
    height: 3%;
	position:absolute;
	z-index: 999;
    left: 73.6%;
    top: 37.5%;
	background-size: 100% 100%;

  }

  #Close_About:hover
  { 
    position:fixed;
    transition: .5s ease;
    left: 73.6%;
    top: 37.5%;
	z-index: 999;
	background-size: 100% 100%;
  }
  #Close_About:active
  { 
    position:fixed;
    transition: .5s ease;
    left: 73.6%;
    top: 37.5%;
	z-index: 999;
	background-size: 100% 100%;
  }
  #Close_Brushes
  {
    display: block;
    width: 2.8%;
    height: 4%;
	position:absolute;
	z-index: 999;
    left: 91.7%;
    top: 17%;
	background-size: 100% 100%;

  }

  #Close_Brushes:hover
  { 
    position:fixed;
    transition: .5s ease;
    left: 91.7%;
    top: 17%;
	z-index: 999;
	background-size: 100% 100%;
  }
  #Close_Brushes:active
  { 
    position:fixed;
    transition: .5s ease;
    left: 91.7%;
    top: 17%;
	z-index: 999;
	background-size: 100% 100%;
  }

#Close_Team
  {
    display: block;
    width: 2.8%;
    height: 4%;
	position:absolute;
	z-index: 999;
    left: 91.7%;
    top: 17%;
	background-size: 100% 100%;

  }

  #Close_Team:hover
  { 
    position:fixed;
    transition: .5s ease;
    left: 91.7%;
    top: 17%;
	z-index: 999;
	background-size: 100% 100%;
  }
  #Close_Team:active
  { 
    position:fixed;
    transition: .5s ease;
    left: 91.7%;
    top: 17%;
	z-index: 999;
	background-size: 100% 100%;
  }

 #Close_Innovation
  {
    display: block;
    width: 2.8%;
    height: 4%;
	position:absolute;
	z-index: 999;
    left: 91.7%;
    top: 17%;
	background-size: 100% 100%;
  }

  #Close_Innovation:hover
  { 
    position:fixed;
    transition: .5s ease;
    left: 91.7%;
    top: 17%;
	z-index: 999;
	background-size: 100% 100%;
  }
  #Close_Innovation:active
  { 
    position:fixed;
    transition: .5s ease;
    left: 91.7%;
    top: 17%;
	z-index: 999;
	background-size: 100% 100%;
  }

	#Close_Contacts
  {
    display: block;
    width: 1.3%;
    height: 2.8%;
	position:absolute;
	z-index: 999;
    left: 56.1%;
    top: 40.3%;
	background-size: 100% 100%;

  }

  #Close_Contacts:hover
  { 
    position:fixed;
    transition: .5s ease;
    left: 56.1%;
    top: 40.3%;
	z-index: 999;
	background-size: 100% 100%;
  }
  #Close_Contacts:active
  { 
    position:fixed;
    transition: .5s ease;
    left: 56.1%;
    top: 40.3%;
	z-index: 999;
	background-size: 100% 100%;
  }

 /****************
CONTENT AREA
****************/


#Dreamtime_Name {
    width:3%;
    height:1%;
    position:fixed;
    z-index: 999;
    left:19.3%;
    top:22%;
	}
	
#Confession_Name {
    width:3%;
    height:1%;
    position:fixed;
    z-index: 999;
    left:43.7%;
    top:22%;
	}
#ActionDirect_Name {
    width:20%;
    height:1%;
    position:fixed;
    z-index: 999;
    left:64%;
    top:22%;
	}
#Chaos_Name {
    width:3%;
    height:1%;
    position:fixed;
    z-index: 999;
    left:21%;
    top:52%;
	}
#Karma_Name {
    width:3%;
    height:1%;
    position:fixed;
    z-index: 999;
    left:46%;
    top:52%;
	}
#ConfessionColor_Name {
    width:20%;
    height:1%;
    position:fixed;
    z-index: 999;
    left:64%;
    top:52%;
	}

/***About Content***/ 

#AboutContent {
    width:79%;
    max-height:75.5%;
    position:absolute;
    z-index: 902;
    left:0;
    right:0;
    top:0;
    bottom:0;
	margin-left:1%;
    margin-right:auto;
    margin-top:auto;
    margin-bottom:1%;
	height: 491px;
    background-image: url("new_area.png");
    background-repeat: no-repeat;
	background-size: 100% 100%;
	opacity: 1;
    filter: alpha(opacity=40); /* For IE8 and earlier */
	}

.scrollbar{
    width:84%;
    max-height:66.8%;
    position:absolute;
    z-index:999;
    left:0;
    right:0;
    top:0;
    bottom:0;
	margin-left:6%;
    margin-right:auto;
    margin-top:auto;
    margin-bottom:6.3%;
	overflow-y:scroll;
	opacity: 1;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}
#ex3::-webkit-scrollbar{
width:20px;
}

#ex3::-webkit-scrollbar-thumb{
background-image: url("hammer.png");
background-repeat: no-repeat;
background-size: 20px 20px;
}
#ex3::-webkit-scrollbar-thumb:hover{
background-image: url("hammer.png");
background-repeat: no-repeat;
background-size: 20px 20px;
}
#ex3::-webkit-scrollbar-thumb:active{
background-image: url("hammer.png");
background-repeat: no-repeat;
background-size: 20px 20px;
} 
#ex3::-webkit-scrollbar-track{

} 
	
#Content_inner {
    width:84%;
    max-height:86.8%;
    position:absolute;
    z-index:999;
    left:0;
    right:0;
    top:0;
    bottom:0;
	font-size: 18px;
	margin-left:6%;
    margin-right:auto;
    margin-top:auto;
    margin-bottom:4.3%;
	opacity: 1;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

/***Brush Content***/
/*******************/

/***Brush Content***/ 

#Brushcontent {
    width:99%;
    max-height:99%;
    position:absolute;
    z-index: 944;
    left:0;
    right:0;
    top:0;
    bottom:0;
	margin-left:1%;
    margin-right:auto;
    margin-top:auto;
    margin-bottom:1%;
    background-image: url("content_area.png");
    background-repeat: no-repeat;
	background-size: 100% 100%;
	opacity: 1;
    filter: alpha(opacity=40); /* For IE8 and earlier */
	}

.scrollbar1{
    width:84%;
    max-height:66.8%;
    position:absolute;
    z-index:999;
    left:0;
    right:0;
    top:0;
    bottom:0;
	margin-left:6%;
    margin-right:auto;
    margin-top:auto;
    margin-bottom:6.3%;
		overflow-y:scroll;
	opacity: 1;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}
#ex4::-webkit-scrollbar{
width:20px;
}

#ex4::-webkit-scrollbar-thumb{
background-image: url("hammer.png");
background-repeat: no-repeat;
background-size: 20px 20px;
}
#ex4::-webkit-scrollbar-thumb:hover{
background-image: url("hammer.png");
background-repeat: no-repeat;
background-size: 20px 20px;
}
#ex4::-webkit-scrollbar-thumb:active{
background-image: url("hammer.png");
background-repeat: no-repeat;
background-size: 20px 20px;
} 
#ex4::-webkit-scrollbar-track{

} 
 
	
#Brush_inner {
    width:84%;
    max-height:96.8%;
    position:absolute;
    z-index:1001;
    left:0;
    right:0;
    top:0;
    bottom:0;
	font-size: 18px;
	margin-left:9%;
    margin-right:auto;
    margin-top:auto;
    margin-bottom:4.3%;
	opacity: 1;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

/***Tabs Content***/ 

#TabsContent {
    width:99%;
    max-height:99%;
    position:absolute;
    z-index: 944;
    left:0;
    right:0;
    top:0;
    bottom:0;
	margin-left:1%;
	z-index: 902;
    margin-right:auto;
    margin-top:auto;
    margin-bottom:1%;
    background-image: url("content_area.png");
    background-repeat: no-repeat;
	background-size: 100% 100%;
	opacity: 1;
    filter: alpha(opacity=40); /* For IE8 and earlier */
	}

.scrollbar{
    width:84%;
    max-height:66.8%;
    position:absolute;
    z-index:999;
    left:0;
    right:0;
    top:0;
    bottom:0;
	margin-left:6%;
    margin-right:auto;
    margin-top:auto;
    margin-bottom:6.3%;
	overflow-y:scroll;
	opacity: 1;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}
#ex3::-webkit-scrollbar{
width:20px;
}

#ex3::-webkit-scrollbar-thumb{
background-image: url("hammer.png");
background-repeat: no-repeat;
background-size: 20px 20px;
}
#ex3::-webkit-scrollbar-thumb:hover{
background-image: url("hammer.png");
background-repeat: no-repeat;
background-size: 20px 20px;
}
#ex3::-webkit-scrollbar-thumb:active{
background-image: url("hammer.png");
background-repeat: no-repeat;
background-size: 20px 20px;
} 
#ex3::-webkit-scrollbar-track{

} 
	
#Tabs_inner {
    width:84%;
    max-height:96.8%;
    position:absolute;
    z-index:944;
    left:0;
    right:0;
    top:0;
    bottom:0;
	font-size: 18px;
	margin-left:6%;
    margin-right:auto;
    margin-top:auto;
    margin-bottom:4.3%;
	opacity: 1;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

/***Team Content***/

#Teamcontent {
    width:99%;
    max-height:99%;
    position:absolute;
    z-index: 904;
    left:0;
    right:0;
    top:0;
    bottom:0;
	margin-left:1%;
    margin-right:auto;
    margin-top:auto;
    margin-bottom:1%;
    background-image: url("content_area.png");
    background-repeat: no-repeat;
	background-size: 100% 100%;
	opacity: 1;
    filter: alpha(opacity=40); /* For IE8 and earlier */
	}

.scrollbar{
    width:84%;
    max-height:66.8%;
    position:absolute;
    z-index:999;
    left:0;
    right:0;
    top:0;
    bottom:0;
	margin-left:6%;
    margin-right:auto;
    margin-top:auto;
    margin-bottom:6.3%;
	overflow-y:scroll;
	opacity: 1;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}
#ex3::-webkit-scrollbar{
width:20px;
}

#ex3::-webkit-scrollbar-thumb{
background-image: url("hammer.png");
background-repeat: no-repeat;
background-size: 20px 20px;
}
#ex3::-webkit-scrollbar-thumb:hover{
background-image: url("hammer.png");
background-repeat: no-repeat;
background-size: 20px 20px;
}
#ex3::-webkit-scrollbar-thumb:active{
background-image: url("hammer.png");
background-repeat: no-repeat;
background-size: 20px 20px;
} 
#ex3::-webkit-scrollbar-track{

}  
	
#Team_inner {
    width:84%;
    max-height:96.8%;
    position:absolute;
    z-index:1001;
    left:0;
    right:0;
    top:0;
    bottom:0;
	font-size: 18px;
	margin-left:6%;
    margin-right:auto;
    margin-top:auto;
    margin-bottom:4.3%;
	opacity: 1;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

#Barbara_name {
    width:17%;
    height:1%;
    position:fixed;
	text-align: left;
    z-index: 999;
    left:19.3%;
    top:22%;
	}
	
	#Barbara
  {
    display: block;
    width: 20%;
    height: 24%;
	position: fixed;
    left: 15%;
    top: 27%;
	background: url("team/LarcherJacopo-0831.jpg") no-repeat 0 0;
	background-size: 100% 100%;
  }

  #Barbara:hover
  { 
    position: fixed;
    transition: .5s ease;
    left: 15%;
    top: 27%;
    background: url("team/LarcherJacopo-0871.jpg") no-repeat 0 0;
	background-size: 100% 100%;
  }
  #Barbara:active
  { 
    position:fixed;
    transition: .5s ease;
    left: 15%;
    top: 27%;
    background: url("team/LarcherJacopo-0871.jpg") no-repeat 0 0;
	background-size: 100% 100%;
  } 
  
  #Markus_name {
    width: 10%;
    height: 1%;
    position: fixed;
    z-index: 999;
    left:43.7%;
    top:22%;
	}
	
	#Markus
  {
    display: block;
    width: 20%;
    height: 24%;
	position: fixed;
    left: 39%;
    top: 27%;
	background: url("team/Faza_Auswahl_scharfer_Markus.jpg") no-repeat 0 0;
	background-size: 100% 100%;
  }

  #Markus:hover
  { 
    position: fixed;
    transition: .5s ease;
    left: 39%;
    top: 27%;
    background: url("team/Faza_Auwahl_scharfe_Burste.jpg") no-repeat 0 0;
	background-size: 100% 100%;
  }
  #Markus:active
  { 
    position:fixed;
    transition: .5s ease;
    left: 39%;
    top: 27%;
    background: url("team/Faza_Auwahl_scharfe_Burste.jpg") no-repeat 0 0;
	background-size: 100% 100%;
  } 
  
    #Alex_name {
    width: 10%;
    height: 1%;
    position: fixed;
    z-index: 999;
    left:67.3%;
    top:22%;
	}
	
	#Alex
  {
    display: block;
    width: 20%;
    height: 24%;
	position: fixed;
    left: 63%;
    top: 27%;
	background: url("team/Alex_Megos_brush1.jpg") no-repeat 0 0;
	background-size: 100% 100%;
  }

  #Alex:hover
  { 
    position: fixed;
    transition: .5s ease;
    left: 63%;
    top: 27%;
    background: url("team/Alex_Megos_brush.jpg") no-repeat 0 0;
	background-size: 100% 100%;
  }
  #Alex:active
  { 
    position:fixed;
    transition: .5s ease;
    left: 63%;
    top: 27%;
    background: url("team/Alex_Megos_brush.jpg") no-repeat 0 0;
	background-size: 100% 100%;
  } 
  
  #Akiyo_name {
    width:17%;
    height:1%;
    position:fixed;
	text-align: left;
    z-index: 999;
    left:19.3%;
    top:55%;
	}
	
	#Akiyo
  {
    display: block;
    width: 20%;
    height: 24%;
	position: fixed;
    left: 15%;
    top: 60%;
	background: url("team/Akiyo_1.jpg") no-repeat 0 0;
	background-size: 100% 100%;
  }

  #Akiyo:hover
  { 
    position: fixed;
    transition: .5s ease;
    left: 15%;
    top: 60%;
    background: url("team/Akiyo_2.jpg") no-repeat 0 0;
	background-size: 100% 100%;
  }
  #Akiyo:active
  { 
    position:fixed;
    transition: .5s ease;
    left: 15%;
    top: 60%;
    background: url("team/Akiyo_2.jpg") no-repeat 0 0;
	background-size: 100% 100%;
  } 

/***Custom Content***/

#Custom {
	cursor: pointer;
    width:21%;
    max-height:26%;
    position:absolute;
    z-index:906;
    left:0;
    right:0;
    top:0;
    bottom:0;
	margin-left:10%;
    margin-right:auto;
    margin-top:auto;
    margin-bottom:15%;
    background-image: url("new_area.png");
    background-repeat: no-repeat;
	background-size: 100% 100%;
	opacity: 1;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}
#Custom1 {
	cursor: pointer;
    width:21%;
    max-height:26%;
    position:absolute;
    z-index:906;
    left:0;
    right:0;
    top:0;
    bottom:0;
	margin-left:36%;
    margin-right:auto;
    margin-top:auto;
    margin-bottom:19.9%;
    background-image: url("new_area.png");
    background-repeat: no-repeat;
	background-size: 100% 100%;
	opacity: 1;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

.scrollbar{
    width:84%;
    max-height:66.8%;
    position:absolute;
    z-index:999;
    left:0;
    right:0;
    top:0;
    bottom:0;
	margin-left:6%;
    margin-right:auto;
    margin-top:auto;
    margin-bottom:6.3%;
	overflow-y:scroll;
	opacity: 1;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}
#ex3::-webkit-scrollbar{
width:20px;
}

#ex3::-webkit-scrollbar-thumb{
background-image: url("hammer.png");
background-repeat: no-repeat;
background-size: 20px 20px;
}
#ex3::-webkit-scrollbar-thumb:hover{
background-image: url("hammer.png");
background-repeat: no-repeat;
background-size: 20px 20px;
}
#ex3::-webkit-scrollbar-thumb:active{
background-image: url("hammer.png");
background-repeat: no-repeat;
background-size: 20px 20px;
} 
#ex3::-webkit-scrollbar-track{

} 
 
	
#Custom_inner {
    width:77%;
    max-height:96.8%;
    position:absolute;
    z-index:999;
    left:0;
    right:0;
    top:0;
    bottom:0;
	font-size: 18px;
	margin-left:13%;
    margin-right:auto;
    margin-top:	22%;
    margin-bottom:auto;
	opacity: 1;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

#Custom_inner1 {
    width:77%;
    max-height:96.8%;
    position:absolute;
    z-index:999;
    left:0;
    right:0;
    top:0;
    bottom:0;
	font-size: 18px;
	margin-left:16%;
    margin-right:auto;
    margin-top:	14%;
    margin-bottom:auto;
	opacity: 1;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

/***Custom Brushes for Your Business***/

#forBusinessContent {
    width:99%;
    max-height:99%;
    position:absolute;
    z-index: 904;
    left:0;
    right:0;
    top:0;
    bottom:0;
	margin-left:1%;
    margin-right:auto;
    margin-top:auto;
    margin-bottom:1%;
    background-image: url("new_area.png");
    background-repeat: no-repeat;
	background-size: 100% 100%;
	opacity: 1;
    filter: alpha(opacity=40); /* For IE8 and earlier */
	}

.scrollbar{
    width:84%;
    max-height:66.8%;
    position:absolute;
    z-index:999;
    left:0;
    right:0;
    top:0;
    bottom:0;
	margin-left:6%;
    margin-right:auto;
    margin-top:auto;
    margin-bottom:6.3%;
	overflow-y:scroll;
	opacity: 1;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}
#ex3::-webkit-scrollbar{
width:20px;
}

#ex3::-webkit-scrollbar-thumb{
background-image: url("hammer.png");
background-repeat: no-repeat;
background-size: 20px 20px;
}
#ex3::-webkit-scrollbar-thumb:hover{
background-image: url("hammer.png");
background-repeat: no-repeat;
background-size: 20px 20px;
}
#ex3::-webkit-scrollbar-thumb:active{
background-image: url("hammer.png");
background-repeat: no-repeat;
background-size: 20px 20px;
} 
#ex3::-webkit-scrollbar-track{

} 

	
#forBusinessContent_inner {
    width:93%;
    max-height:96.8%;
    position:absolute;
    z-index:999;
    left:0;
    right:0;
    top:0;
    bottom:0;
	font-size: 18px;
	margin-left:6%;
    margin-right:auto;
    margin-top:auto;
    margin-bottom:4.3%;
	opacity: 1;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}


/***Contacts Content***/
 
	#ContactsContent{
    width:60%;
    max-height:70%;
    position:absolute;
    z-index:906;
    left:0;
    right:0;
    top:0;
    bottom:0;
	margin-left:1%;
    margin-right:auto;
    margin-top:auto;
    margin-bottom:1%;
    background-image: url("new_area.png");
    background-repeat: no-repeat;
	background-size: 100% 100%;
	opacity: 1;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

#Contacts_inner {
    width:84%;
    max-height:85%;
    position:absolute;
    z-index:997;
    left:0;
    right:0;
    top:0;
    bottom:0;
	font-size: 16px;
	margin-left:6%;
    margin-right:auto;
    margin-top:auto;
    margin-bottom:6%;
	opacity: 1;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}
	
	
/****************
BRUSHES IMAGES
****************/

#Dreamtime
  {
    display: block;
    width: 22%;
    height: 22%;
	position: fixed;
    left: 13%;
    top: 27%;
	background: url("brushes/Dreamtime_predna.jpg") no-repeat 0 0;
	background-size: 100% 100%;
  }

  #Dreamtime:hover
  { 
    position: fixed;
    transition: .5s ease;
    left: 13%;
    top: 27%;
    background: url("brushes/Dreamtime_zadna.jpg") no-repeat 0 0;
	background-size: 100% 100%;
  }
  #Dreamtime:active
  { 
    position:fixed;
    transition: .5s ease;
    left: 13%;
    top: 27%;
    background: url("brushes/Dreamtime_zadna.jpg") no-repeat 0 0;
	background-size: 100% 100%;
  }  
  
 #Confession
  {
    display: block;
    width: 22%;
    height: 22%;
	position: fixed;
    left: 38%;
    top: 27%;
	background: url("brushes/Confession_predna.jpg") no-repeat 0 0;
	background-size: 100% 100%;
  }

  #Confession:hover
  { 
    position: fixed;
    transition: .5s ease;
    left: 38%;
    top: 27%;
    background: url("brushes/Confession_zadna.jpg") no-repeat 0 0;
	background-size: 100% 100%;
  }
  #Confession:active
  { 
    position:fixed;
    transition: .5s ease;
    left: 38%;
    top: 27%;
    background: url("brushes/Confession_zadna.jpg") no-repeat 0 0;
	background-size: 100% 100%;
  }
  
  #Action_Direct
  {
    display: block;
    width: 22%;
    height: 22%;
	position: fixed;
    left: 63%;
    top: 27%;
	background: url("brushes/Action_direct_predna.jpg") no-repeat 0 0;
	background-size: 100% 100%;
  }

  #Action_Direct:hover
  { 
    position: fixed;
    transition: .5s ease;
    left: 63%;
    top: 27%;
    background: url("brushes/Action_direct_zadna.jpg") no-repeat 0 0;
	background-size: 100% 100%;
  }
  #Action_Direct:active
  { 
    position:fixed;
    transition: .5s ease;
    left: 63%;
    top: 27%;
    background: url("brushes/Action_direct_zadna.jpg") no-repeat 0 0;
	background-size: 100% 100%;
  }
  
  #Chaos
  {
    display: block;
    width: 22%;
    height: 22%;
	position: fixed;
    left: 13%;
    top: 57%;
	background: url("brushes/CHAOS_front.jpg") no-repeat 0 0;
	background-size: 100% 100%;
  }

  #Chaos:hover
  { 
    position: fixed;
    transition: .5s ease;
    left: 13%;
    top: 57%;
    background: url("brushes/CHAOS_back.jpg") no-repeat 0 0;
	background-size: 100% 100%;
  }
  #Chaos:active
  { 
    position:fixed;
    transition: .5s ease;
    left: 13%;
    top: 57%;
    background: url("brushes/CHAOS_back.jpg") no-repeat 0 0;
	background-size: 100% 100%;
  }
  
  #Karma
  {
    display: block;
    width: 22%;
    height: 22%;
	position: fixed;
    left: 38%;
    top: 57%;
	background: url("brushes/karma_front.jpg") no-repeat 0 0;
	background-size: 100% 100%;
  }

  #Karma:hover
  { 
    position: fixed;
    transition: .5s ease;
    left: 38%;
    top: 57%;
    background: url("brushes/karma_back.jpg") no-repeat 0 0;
	background-size: 100% 100%;
  }
  #Karma:active
  { 
    position:fixed;
    transition: .5s ease;
    left: 38%;
    top: 57%;
    background: url("brushes/karma_back.jpg") no-repeat 0 0;
	background-size: 100% 100%;
  }
  
  #Confessionincolors
  {
    display: block;
    width: 22%;
    height: 22%;
	position: fixed;
    left: 63%;
    top: 57%;
	background: url("brushes/colors_front.jpg") no-repeat 0 0;
	background-size: 100% 100%;
  }

  #Confessionincolors:hover
  { 
    position: fixed;
    transition: .5s ease;
    left: 63%;
    top: 57%;
    background: url("brushes/colors_back.jpg") no-repeat 0 0;
	background-size: 100% 100%;
  }
  #Confessionincolors:active
  { 
    position:fixed;
    transition: .5s ease;
    left: 63%;
    top: 57%;
    background: url("brushes/colors_back.jpg") no-repeat 0 0;
	background-size: 100% 100%;
  }
  
/****************
****************/

#body {
		width:100%;
    max-height:100%;
    position:absolute;
    z-index: 10;
    left:0;
    right:0;
    top:0;
    bottom:0;
	  margin-left:0%;
    margin-right:auto;
    margin-top:auto;
    margin-bottom:0%;
	  overflow:hidden;
		background-image: url("images/backgroundZ.jpg");
    background-repeat: no-repeat;
	  background-size: 100% 100%;
	  opacity: 1;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

#BWbody {
		width:100%;
    max-height:100%;
    position:absolute;
    z-index: 10;
    left:0;
    right:0;
    top:0;
    bottom:0;
	  margin-left:0%;
    margin-right:auto;
    margin-top:auto;
    margin-bottom:0%;
	  overflow:hidden;
		background-image: url("images/bw.jpg");
    background-repeat: no-repeat;
	  background-size: 100% 100%;
	  opacity: 1;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}


section {
	float: left;
	width: auto;
	height: 300px;
}
aside {
	float: right;
	width: auto;
	height: 300px;
}
footer {
	
}

/* ===========================
   ======= Body style ======== 
   =========================== */

body {
	text-align: center;
	padding: 5px 5px;
	font-size: 13px;
	font-style: Verdana, Tahoma, sans-serif;
}

h2 {
	margin-bottom: 1px;
	color: #474E69;
}

/* ===========================
   ====== Contact Form ======= 
   =========================== */

input, textarea {
	padding: 5px;
	border: 1px solid #E5E5E5;
	width: 60%;
	color: #999999;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
	-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;		
}

textarea {
	width: 60%;
	height: 70%;
	max-width: 80%;
	line-height: 100%;
}

input:hover, textarea:hover,
input:focus, textarea:focus {
	border-color: 1px solid #C9C9C9;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
	-moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;	
}

.form label {
	margin-left: 10px;
	color: #999999;
}

/* ===========================
   ====== Submit Button ====== 
   =========================== */

.submit input {
	width: 60%; 
	height: 30%;
	background-color: #474E69; 
	color: #FFF;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;		
}

.submit {
        display: block;
        width: 150px;
        height: 61px;
	position: fixed;
	z-index: 999;
	background: url("saw4.png") no-repeat 0 0;
	background-size: 100% 100%;
}

/********************
TEST
********************/

/********
REDLIGHT
******/


* {    margin: 0;
  padding: 0;}

.bg {
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}

li
{  list-style:none;
   }

.menu
    { display:none 
	width:2%;
    max-height:3%;
    position:absolute;
    z-index: 10;
    left: 28.5%;
    top: 34.6%;
	opacity: 1;
    filter: alpha(opacity=40); /* For IE8 and earlier */}
       



.menu li:first-child:hover ~ .bg {
  background-image: url("redlight_3.jpg");
    background-repeat: no-repeat;
	  background-size: 100% 100%;
}

/************
DUST
**********/


* {    margin: 0;
  padding: 0;}

.dust {
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}

li
{  list-style:none;
   }

.dust_menu
    { display:none 
	width:2%;
    max-height:3%;
    position:absolute;
    z-index: 10;
    left: 86.5%;
    top: 33%;
	opacity: 1;
    filter: alpha(opacity=40); /* For IE8 and earlier */}
       



.dust_menu li:first-child:hover ~ .dust {
  background-image: url("dust_2.jpg");
    background-repeat: no-repeat;
	  background-size: 100% 100%;
}

/************
STEAM
**********/


* {    margin: 0;
  padding: 0;}

.steam {
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}

li
{  list-style:none;
   }

.steam_menu
    { display:none 
	width:2%;
    max-height:3%;
    position:absolute;
    z-index: 10;
    left: 6.5%;
    top: 68.6%;
	opacity: 1;
    filter: alpha(opacity=40); /* For IE8 and earlier */}
       



.steam_menu li:first-child:hover ~ .steam {
  background-image: url("steam_2.jpg");
    background-repeat: no-repeat;
	  background-size: 100% 100%;
}

/********TEST Responsive Brushes.html***********/
* {
    box-sizing: border-box;
}

.container {
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 1rem;
}

  .responsive-image {
  max-width: 100%;
.cell img {
}
  display: block;
}
@media screen and (min-width: 600px) {
  .grid {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
  }
  .cell {
    width: 50%;
  }
}
@media screen and (min-width: 1000px) {
  .cell {
    width: calc(100% / 3);
  }
}
.cell {
  margin: 1rem;
}
@media screen and (min-width: 600px) {
  .cell {
    width: calc(50% - 2rem);
  }
}

@media screen and (min-width: 1000px) {
  .cell {
    width: calc(33.3333% - 2rem);
  }
}