@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,300italic,400italic");

html{overflow-y:scroll;}

body{margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; color:#919191; background-color:#232323;}

.clear:after{content:"."; display:block; height:0; clear:both; visibility:hidden; line-height:0;}
.clear{display:block; clear:both;}
html[xmlns] .clear{display:block;}
* html .clear{height:1%;}

a{outline:none; text-decoration:none;}

code{font-weight:normal; font-style:normal; font-family:Georgia, "Times New Roman", Times, serif;}

.fl_left{float:left;}
.fl_right{float:right;}

img{margin:0; padding:0; border:none; line-height:normal; vertical-align:middle;}
.imgholder, .imgl, .imgr{padding:4px; border:1px solid #D6D6D6; text-align:center;}
.imgl{float:left; margin:0 15px 15px 0; clear:left;}
.imgr{float:right; margin:0 0 15px 15px; clear:right;}

/*----------------------------------------------HTML 5 Overrides-------------------------------------*/

address, article, aside, figcaption, figure, footer, header, nav, section{display:block; margin:0; padding:0;}

q{display:block; padding:0 10px 8px 10px; color:#979797; background-color:#ECECEC; font-style:italic; line-height:normal;}
q:before{content:'“ '; font-size:26px;}
q:after{content:' „'; font-size:26px; line-height:0;}

/* ----------------------------------------------Wrapper-------------------------------------*/
div.wrapper{display:block; width:100%; margin:0; padding:0; text-align:left;}

.row1, .row1 a{color:#C0BAB6; background-color:#333333;}
.row2{color:#979797; background-color:#FFFFFF;}
.row2 a{color:#017ED3; background-color:#FFFFFF;}
.row3, .row3 a{color:#919191; background-color:#232323;}

/*----------------------------------------------Generalise-------------------------------------*/

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

h1, h2, h3, h4, h5, h6{margin:0; padding:0; font-size:16px; font-weight:bold; font-style:normal; line-height:normal;}
h1, h2{text-transform:uppercase;}

address{font-style:normal;}

blockquote, q{display:block; padding:8px 10px; color:#979797; background-color:#ECECEC; font-style:italic; line-height:normal;}
blockquote:before, q:before{content:'“ '; font-size:26px;}
blockquote:after, q:after{content:' „'; font-size:26px; line-height:0;}

form, fieldset, legend{margin:10px; padding:0; border:none;}
legend{display:none;}
input, textarea, select{font-size:12px; font-family:Georgia,"Times New Roman",Times,serif;}
textarea{white-space: normal;text-align: justify;}

.label{float:none;clear:both;}
.email{float:none;clear:both;width:80%;height:25px; margin:10px 0;}
.longtext{float:none;clear:both;width:80%;height:5em; margin:10px 0;}
.sendbutton{float:left;height:30px;margin:10px 0;padding:5px;}


#topButton {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #555; /* Set a background color to grey */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
}

#topButton:hover {
    background-color: #017ED3; 
}

.one_quarter, .two_quarter, .three_quarter{display:block; float:left; height:165px; margin:20px 20px 0 0; padding-top:5px; padding-left:5px}
.four_quarter{overflow:auto; margin:20px 20px 0 0; padding-top:5px; padding-left:5px}

.one_third, .two_third, .three_third{display:block; float:left; margin:0 30px 0 0;}

.bg1{background-color: rgba(151, 151, 151, .1);}
.bg2{background-color: rgba(1, 126, 211, .1);}
.bg3{background-color: rgba(40, 165, 250, .1);}
.bg4{background-color: rgba(151, 151, 151, .1);}

.padded{margin-top:30px;}

.lastbox{margin-right:0;}
.firstbox{display:block; clear:both;}

.three_quarter{overflow:auto;}

/*----------------------------------------------Header-------------------------------------*/

#header{padding:15px 0;}

#header #hgroup{float:left; margin:0 0 20px 0;}
#header #hgroup h1, #header #hgroup h2{font-weight:normal; text-transform:none;}
#header #hgroup h1{font-size:36px;}
#header #hgroup h2{font-size:16px;}
#header #hgroup h1 > a { color:#017ED3 }

#header nav ul{padding:0 20px;}
#header nav li a{color:#C0BAB6; background-color:#232323;}
#header nav li a:hover{color:#017ED3; background-color:#232323;}
#header nav li.concert{margin-right:30; background-color:#E32323;}
#header nav li.last{margin-right:0;}

/*----------------------------------------------Content Area-------------------------------------*/

#container{padding:30px 0;}
#container .last{margin:0;}
#container .more{text-align:right;}

/* ------Slider-----*/

#container #slider{}
#container #slider figure{}
#container #slider figure figcaption{padding:20px 0; overflow:hidden; color:#989898; line-height:0.8em;}
#container #slider figure figcaption a{color:#017ED3;}
#container #slider figure footer{}

/* ------Main Content-----*/
#container #homepage #services{}
#container #homepage #services article{}
#container #homepage #services article h2{font-size:14px; margin-bottom:15px;}
#container #homepage #services article p{margin:0; padding:0;}
#container #homepage #services article img{float:left; width:80px; height:80px; margin:0 10px 10px 0; padding:4px; border:1px solid #DEDEDE;}
#container #homepage #services article footer{margin:10px 0 0 0;}

#container #homepage #source{}
#container #homepage #source article{margin-top: 12px;}
#container #homepage #source article h2{font-size:14px; margin-top: 5px;margin-bottom:15px;}
#container #homepage #source article p{margin:0; padding:0;}
#container #homepage #source article img{width:200px; height:115px; margin:0 10px 10px 0; padding:4px; border:1px solid #DEDEDE;}
#container #homepage #source article footer{margin:10px 0 0 0;}

#container #homepage #sound{}
#container #homepage #sound article{margin-top: 12px; height:225px;}
#container #homepage #sound article h2{font-size:14px; margin-top: 5px;margin-bottom:15px;}
#container #homepage #sound article p{margin:0; padding:0;}
#container #homepage #sound article img{width:200px; height:115px; margin:0 10px 10px 0; padding:4px; border:1px solid #DEDEDE;}
#container #homepage #sound article footer{margin:10px 0 0 0;}

#container #homepage #alu{}
#container #homepage #alu article{margin-top: 12px;}
#container #homepage #alu article h2{font-size:14px; margin-top: 5px;margin-bottom:15px;}
#container #homepage #alu article p{margin:0; padding:0;}
#container #homepage #alu article img{width:200px; height:115px; margin:0 10px 10px 0; padding:4px; border:1px solid #DEDEDE;}
#container #homepage #alu article footer{margin:10px 0 0 0;}

#container #homepage #latest{padding-bottom:80px}
#container #homepage #latest article{}
#container #homepage #latest article figure{}
#container #homepage #latest article figure img{margin:0 0 10px 0; padding:4px; border:1px solid #D6D6D6;}
#container #homepage #latest article figure figcaption{}
#container #homepage #latest article figure h2{font-size:14px;}
#container #homepage #latest article figure footer{}

#container #homepage #coord article{height:100%;}

/* ------Light------*/

#container #homepage #light article{display:block; width:100%; clear:both;}
#container #homepage #light br{clear:both;}

/* Desktop */                      

	@media screen and (min-width: 1060px) {
		
		#header, #container, #footer, video{display:block; width:1060px; margin:0 auto;}
		#header nav{display:block; float:right; margin:10px 0 0 0; padding:20px 0; color:#C0BAB6; background-color:#232323;}
		#header nav li{display:inline; margin-right:25px; text-transform:uppercase;}
		#container #homepage{display:block; width:100%; line-height:1.6em;}
		#container #slider figure figcaption{display:block; float:left; width:700px; height:278px;}
		#container #slider figure img{float:right; width:318px; height:318px;}
		#container #slider figure h2{font-size:42px; font-weight:normal; font-style:italic; text-transform:none;}
		#container #slider figure h4{font-size:18px; font-weight:normal; font-style:italic; text-transform:none;}
		#container section{display:block; width:100%; margin:0 0 40px 0; padding:0;}
		#container #homepage #services article{}
		#container #homepage article h2{font-size:14px;}
		#container #light article figure figcaption{display:block; float:left; width:400px; height:100px;margin: 10px 20px}
		#container #light article figure img{float: left; max-width:100px; max-height:100px;}
		#container #light article figure video{float: left; max-width:200px; max-height:300px;}

		.one_third{width:30%;}
		.two_third{width:60%;}
		.three_third{width:100%; float:none; margin-right:0; clear:both;}

		.one_quarter{width:245px;}
		.two_quarter{width:515px;}
		.three_quarter{width:770px;}
		.four_quarter{width:1055px; float:none; margin-right:0; clear:both;}	

		.icon {position: relative; float: left; padding: 2px 10px; text-decoration: none !important;}
		
		.subarea{font-size:18px;}

		.source_pic{width: 300px !important; height: 145px !important;}
		
		.tableft {
			float: left;
		}

		.tabright {
			float: right;
		}

		#topButton {
			bottom: 60px;
			right: 75px;
		}

	}
	
/* Tablet */

	@media screen and (min-width: 781px) and (max-width: 1059px) {
				
		#header, #container, #footer, video{display:inline-block; width:100%; margin:0 auto;}
		#header nav{display:block; float:right; margin:10px 0 0 0; padding:20px 0; color:#C0BAB6; background-color:#232323;}
		#header nav li{display:inline; margin-right:25px; text-transform:uppercase;}
		#container #homepage{display:list-item; width:100%;}
		#container #slider figure figcaption{display:block; float:left; width:480px; height:210px;}
		#container #slider figure img{float: right; width:250px; height:250px;}
		#container #slider figure h2{font-size:28px; font-weight:normal; font-style:italic; text-transform:none;}
		#container #slider figure h4{font-size:13px; font-weight:normal; font-style:italic; text-transform:none;}
		#container section{display:block; width:740px; margin:0 0 40px 0; padding:0;}
		#container #homepage #services article{}
		#container #homepage article h2{font-size:18px;}
		#container #light article figure figcaption{display:block; float:left; width:400px; height:100px;margin: 10px 20px}
		#container #light article figure img{float: left; max-width:100px; max-height:100px;}
		#container #light article figure video{float: left; max-width:150px; max-height:225px;}

		.one_third{width:30%;}
		.two_third{width:60%;}
		.three_third{width:100%; float:none; margin-right:0; clear:both;}
		
		.one_quarter{width:47.9%;margin-bottom:40px}
		.two_quarter, .three_quarter, .four_quarter{width:100%; float:none; margin-right:0; clear:both;}	
		.midlastbox{margin-right:0;}

		.icon {position: relative; float: left; padding: 0 10px; text-decoration: none !important;}

		.source_pic{width: 215px !important; height: 100px !important;}

		.tableft {
			float: left;
		}

		.tabright {
			float: right;
		}

		#topButton {
			bottom: 40px;
			right: 30px;
		}
		
	}

/* Mobile */

	@media screen and (max-width: 780px) {
		
		#header, #container, #footer, video{display:inline-block; width:100%; margin:0 auto;}
		#header nav{display:block; clear:both; margin:10px 0 0 0; padding:20px 0; color:#C0BAB6; background-color:#232323;}
		#header nav li{display:block; margin:10px; text-transform:uppercase;}
		#container #homepage{display:list-item; width:100%;}
		#container #slider figure figcaption{display:block; margin:auto; width:80%;}
		#container #slider figure img{display:block; margin:auto; width:50%;}
		#container #slider figure h2{font-size:42px; font-weight:normal; font-style:italic; text-transform:none;}
		#container #slider figure h4{font-size:18px; font-weight:normal; font-style:italic; text-transform:none;}
		#container section{display:block; width:100%; margin:0 0 40px 0; padding:0;}
		#container #homepage #services article{display:block; clear:both; margin-bottom:25px;}
		#container #homepage article h2{font-size:24px;}
		#container #light article figure figcaption{display:block; float:left; width:300px; height:80px;margin: 10px 20px}
		#container #light article figure img{float: left; max-width:80px; max-height:80px;}
		#container #light article figure video{float: left; max-width:100px; max-height:150px;}
		#container .more{display:none;}
		
		.one_third, .two_third, .three_third{width:80%; float:none; margin:35px auto; clear:both;}	
		.one_quarter, .two_quarter, .three_quarter, .four_quarter{width:80%; float:none; margin:45px auto; clear:both;}	

		.icon {position: relative; float: left; padding: 0 10px; text-decoration: none !important;}

		.source_pic{width: 300px !important; height: 145px !important;}
		
		.tableft {
			float: left;
		}

		.tabright {
			display: none;
		}

		#topButton {
			bottom: 10px;
			right: 10px;
		}

	}
		
/*----------------------------------------------Footer-------------------------------------*/

#footer{padding:20px 0;}
#footer p{margin:0; padding:0;}

/* Icons */

		.icon:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			color: #017ED3;
			font-size: 80px;
			text-transform: none !important;
		}

		.icon > .label {
			display: none;
		}

		.icon span {
			display: none;
		}
		
/*----------------------------------------------Popup--------------------------------------*/

/* Popup container - can be anything you want */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}