html,
body {
	margin: 0px;
	padding: 0px;
	font-family: 'Din', Arial;
	color: #333;
}

@font-face {
	font-family: 'Lite';
	src: url('/stuff/font/Lite.woff');
}

@font-face {
	font-family: 'Din';
	src: url('/stuff/font/Din.woff');
}

@font-face {
	font-family: 'Med';
	src: url('/stuff/font/Med.woff');
}

#container {
   min-height: 100%;
   position: absolute;
   width: 100%;
}

#head {
	margin: 0px;
	width: auto;
	height: 80px;
	background-image: url('/stuff/img/bg_digital_green.png');
	
	padding: 0px 0px 0px 10px;
	text-shadow: 2px 2px 2px rgba(6, 0, 0, 0.25);
    
    line-height: 90%;
    
}

#head table {
		border-spacing: 0px 0px;
}

#head tr {
        vertical-align: bottom;
                              /*      background: blue;*/
}

h1 {
	font-size: 131%;
	padding-top: 20px;
    
}

h1::before {
  content: "/// ";
}    


h2 {
	font-size: 125%;
    color: darkgreen;
    /*text-decoration: underline;    */
}
h2::before {
  content: "/// ";
}    


ul { padding: 0px; margin: 0px; }

p {
	font-size: 94%; 
    padding: 10px 0px 5px 0px; 
    margin: 0px;
}

img {
	outline:none;
	border:0;
}

a {
	font-family: 'Din';
	color: #446e5a;
	text-decoration: underline;
	font-size: 100%;
}

a:hover {
	text-decoration: underline;
}

li {
    	font-size: 94%; 
}


/* ================================*/
/* Header */

.logo {
	width: 200px;
	height: 50px;
	/*padding: 15px 0px 15px 0px;*/
	padding: 0px 0px 10px 0px;
                          /*  background: orange;*/
}

#title {
	padding: 0px 20px 10px 20px;
	margin: 0px;
	text-align: left;
    vertical-align: bottom;
                       /*     background: red;*/
}

.name {
	font-size: 225%;
	color: #eff1ee;
	font-family: 'Med';
}

.desc {
	font-size: 88%;
	color: white; 
}


/*@media only screen and (max-width: 850px) {*/
@media (max-width: 660px) {
    #head {
	    height: 90px;
    }

    .logo {
    }
    
    .desc {
        vertical-align: top;
        font-size: 81%;
    }
}


    
.translate {
	text-align: right;
	padding: 0px 30px 0 0px;
}
@media (max-width: 850px) {
/*@media only screen and (max-width: 850px) {*/
    .translate {
        display: none;
    }
}


/* Menu */

#menu {
	height: 30px;
	background-image: url('/stuff/img/bg_digital_green.png');
	margin: 0px;
	padding: 0 0 0 15px;
	box-shadow: 0px 14px 12px -8px grey;
    width: inherit;
}


#menu li {
	display: inline-block;
	padding: 5px 10px 25px 10px;
}

/*@media only screen and (max-width: 850px) {*/
@media (max-width: 660px) {

	#menu {
		height: 60px;
	}
    
    #menu li {
        display: inline-block;
        padding: 5px 10px 3px 10px;
    }
    #menu td {
        vertical-align: bottom;
    }
}



#menu a {
	text-decoration: none;
}

#menu li a {
	color: #eff1ee;
	font-family: 'Din';
	font-size: 106%;
	letter-spacing: 0.5px;
}

#menu li a:hover {
	color: limegreen;
}

#menu li.active {
	background: white; /*#eff1ee;*/
	border-radius: 4px;
	color: #446e5a;
	font-family: 'Din';
	font-size: 106%;
	letter-spacing: 0.5px;
}


/* Sub-Menu */

#nav {
	height: 35px;
	background: white; /*#eff1ee;*/
	margin: 0 0 0 76px;
	padding: 0 0 0 5px;
	box-shadow: 0px 10px 20px #dddddd;
	border-radius: 4px;
		
}

#nav li {
	display: inline-block;
	padding: 9px 5px 9px 5px;
}

#nav a {
	text-decoration: none;
}

#nav li a {
	color: #446e5a;
	font-family: 'Din';
	font-size: 94%;
}

#nav li a:hover {
	color: limegreen;
	
}

#nav li.unactive {
	color: #333;
	font-family: 'Din';
	font-size: 94%;
}



/* Sub-Sub-Menu / Utils */
#subnavutils {
	height: 35px;
	background: white; /*#eff1ee;*/
	margin: 0 0 0 453px;
    box-shadow: 0px 10px 20px #dddddd;
	border-radius: 4px;
	padding: 0 0 0 5px;
}
#subnavutils li {
	display: inline-block;
	padding: 9px 5px 9px 5px;
}

#subnavutils a {
	text-decoration: none;
}

#subnavutils li a {
	color: #446e5a;
	font-family: 'Din';
	font-size: 94%;
}

#subnavutils li a:hover {
	text-decoration: underline;
}

#subnavutils li.unactive {
	color: #333;
	font-family: 'Din';
	font-size: 94%;
}

#subnav_active {
    background: #777777;
    color: #FFFFFF; 
    padding: 2px 3px 0px 3px;
}

/* ================================*/
/* Index page*/

#index_content_navi_title {
    font-weight: bold;
    color: darkgreen;
}


/* Two main blocks in the index-page, responsive, depending on avail. width */
.index_blockWrap { width: 100%; }

.index_block_left {
  display: inline-block;
  box-sizing: border-box;
  width: calc(100% - 290px);    
  padding: 10px 20px 10px 20px;
  vertical-align: top;
}


.index_table_left {
  display: inline-block;
  box-sizing: border-box;
  width: calc(100% - 290px);    
  padding: 10px 20px 10px 20px;
  vertical-align: top;
    
}

.index_table_left a {
   text-decoration: none;
   color: black;
}
.index_table_left a:hover {
    text-decoration: none;
    color: forestgreen; /*limegreen; */
}

.index_table_left_small a {
    font-size: 88%;
    color: grey;
}


.index_block_right {
    z-index: 1; 
    position: absolute; 
    top: 130px; 
    right: 0px;  
    width: 310px; /* 290 deducted from the left block */
}

/*@media only screen and (max-width: 850px) {*/
@media (max-width: 660px) {

    
    .index_block_left {
        display: block;
        width: 100%;
    }
    
    .index_table_left {
      display: inline-block;
      box-sizing: border-box;
      width: 100%;    
      padding: 10px 20px 10px 20px;
      vertical-align: top;
    }    
    
    .index_block_right {
        display: block;
        width: 50%;
        z-index: 0;;
        position: relative;
        top: 0px;
		margin: auto;
    }
}

#illumination {
    margin-right: 280px;
}
/*@media only screen and (max-width: 850px) {*/
@media (max-width: 660px) {

	#illumination {
        margin-right: 0px;
	}
}

/* ================================*/
/* Main */

#main {
	padding: 25px 30px 25px 30px;
	font-family: 'Din';
}

#xsmall {
	font-family:'Lite';
	font-size: 81%;
}


.info {
	margin: 0px 300px 0px 20px;
}

.pro {
	background-repeat:no-repeat; 
	padding-right:150px;
}

#layer img{
	padding:8px;
	box-shadow: 0px 10px 20px #dddddd;
}

#layer2 img{
	padding:5px;
	box-shadow: 0px 10px 20px #dddddd;
}


#tabletext {
	font-size: 94%;
}

#option1, #option2 {
	color: #333333;
}




/* Footer */
.logo_footer {
	width: 160px;
	height: 40px;
	padding: 15px 0px 15px 0px;
}

#prefooter {    
	height: 300px; /*the height here must be the same as the height in the #footer*/
}
#footer {
}

#footer_variant_wide {
	display: initial;

	position: absolute;
	height: 300px;
    bottom: 0px;
    width: 100%;
	color: white;
	font-size: 94%;
	background-image: url('/stuff/img/bg_digital_green.png');
	background-repeat: repeat;
	margin: 0;
	text-align:center;
	box-shadow: 10px 0px 10px 10px #dddddd;
    z-index: 2;
}
#footer_variant_narrow {
	display: none;

	position: absolute;
    bottom: 0px;
    width: 100%;
	color: white;
	font-size: 94%;
	background-image: url('/stuff/img/bg_digital_green.png');
	background-repeat: repeat;
	
	margin: 0;
	text-align: center;
	box-shadow: 10px 0px 10px 10px #dddddd;
    z-index: 2;
}

/*@media only screen and (max-width: 850px) {*/
@media (max-width: 660px) {

    
    .info {
    	margin: 0px 0px 0px 20px;
    }
    
    #prefooter {    
	    height: 500px; /*the height here must be the same as the height in the #footer*/
    }
	
	#footer_variant_wide {
		display: none;
	}
	#footer_variant_narrow {
		display: initial;
	}
	
}


#foot {
	padding: 20px 0px 0px 0px;
}

#foot table tr td { font-size: 94%; }


#foot a {
	/*color: #eff1ee;*/
	color: antiquewhite;
	text-decoration: none;
/*	font-size: 94%;*/
	font-family: 'Din';
}

#foot a:hover {
	text-decoration: underline;
}

#foot h1 {
    	color: greenyellow;
        font-size: 105%;
}

#foot h1::before {
        content: "";
}    


#foot table {
	text-align: left; 
	border-spacing: 30px 0px;
}



audio { 
	width: 180px; 
}
a.image-popup-no-margins img:hover {
       cursor: zoom-in;
}

label.buychoise {
    cursor: pointer;
}

label.buychoise:hover {
    color: #446e5a;
}


.fade_rule {
        height: 1px;
        background-color: #E6E6E6;
        width: 95%;
        margin: 0 auto;
        background-image: linear-gradient(to left , white 2%, #E6E6E6 50%, white 98%);
        background-image: -o-linear-gradient(left , white 2%, #E6E6E6 50%, white 98%);
        background-image: -moz-linear-gradient(left , white 2%, #E6E6E6 50%, white 98%);
        background-image: -webkit-linear-gradient(left , white 2%, #E6E6E6 50%, white 98%);
        background-image: -ms-linear-gradient(left , white 2%, #E6E6E6 50%, white 98%);
        background-image: -webkit-gradient( linear, left bottom, right bottom, color-stop(0.02, white), color-stop(0.5, gray), color-stop(0.98, white) );
}






/* blinking text on the main page*/

.blinkme1 {
  animation: blinker1 6.5s cubic-bezier(.5, 0, 1, 1) infinite alternate;  
}
@keyframes blinker1 { to { opacity: 0; } }

.blinkme2 {
  animation: blinker2 6.0s cubic-bezier(1, 0, 0, 1) infinite alternate;  
}
@keyframes blinker2 { to { opacity: 0; } }

.blinkme3 {
  animation: blinker3 5.1s cubic-bezier(1, 0, 0, 1) infinite alternate;  
}
@keyframes blinker3 { to { opacity: 0; } }


.blinkme4 {
  animation: blinker4 5.4s cubic-bezier(1, 0, 0, 1) infinite alternate;  
}
@keyframes blinker4 { to { opacity: 0; } }


.blinkme5 {
  animation: blinker5 9.6s cubic-bezier(1, 0, 0, 1) infinite alternate;  
}
@keyframes blinker5 { to { opacity: 0; } }


.blinkme6 {
  animation: blinker6 4.0s cubic-bezier(1, 0, 0, 1) infinite alternate;  
}
@keyframes blinker6 { to { opacity: 0; } }

.blinkme7 {
  animation: blinker7 7.1s cubic-bezier(1, 0, 0, 1) infinite alternate;  
}
@keyframes blinker7 { to { opacity: 0; } }

.blinkme8 {
  animation: blinker8 4.7s cubic-bezier(1, 0, 0, 1) infinite alternate;  
}
@keyframes blinker8 { to { opacity: 0; } }

.blinkme9 {
  animation: blinker9 5.7s cubic-bezier(1, 0, 0, 1) infinite alternate;  
}
@keyframes blinker9 { to { opacity: 0; } }

.blinkme10 {
  animation: blinker10 3.6s cubic-bezier(1, 0, 0, 1) infinite alternate;  
}
@keyframes blinker10 { to { opacity: 0; } }

.blinkme11 {
  animation: blinker11 4.95s cubic-bezier(1, 0, 0, 1) infinite alternate;  
}
@keyframes blinker11 { to { opacity: 0; } }

.blinkme12 {
  animation: blinker12 5.13s cubic-bezier(1, 0, 0, 1) infinite alternate;  
}
@keyframes blinker12 { to { opacity: 0; } }

.blinkme13 {
  animation: blinker13 4.17s cubic-bezier(1, 0, 0, 1) infinite alternate;  
}
@keyframes blinker13 { to { opacity: 0; } }

.blinkme14 {
  animation: blinker14 4.4s cubic-bezier(1, 0, 0, 1) infinite alternate;  
}
@keyframes blinker14 { to { opacity: 0; } }

.blinkme15 {
  animation: blinker15 5.1s cubic-bezier(1, 0, 0, 1) infinite alternate;  
}
@keyframes blinker15 { to { opacity: 0; } }

.blinkme16 {
  animation: blinker16 5.1s cubic-bezier(1, 0, 0, 1) infinite alternate;  
}
@keyframes blinker16 { to { opacity: 0; } }

.blinkme3 {
  animation: blinker3 9.1s cubic-bezier(1, 0, 0, 1) infinite alternate;  
}
@keyframes blinker3 { to { opacity: 0; } }



/* icon image on the "use cases" page*/
#use_case_icon {
    padding: 0px 20px 20px 20px;
}