#wrapper {
	min-height:100%;
	position:absolute; 
	left:0;
	top:0;
 	width:100vw;	
}

#header_menu {
    position: fixed;
    line-height: 40px;
    height: 120px;	
	top: 0px;
	left: 0px;
	width:100vw;	

	background-color:var(--color_emph2_alpha);
	
    z-index: 1000;

    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    transition: background 0.2s ease, height 0.3s; 
    text-align:center;

}


#header_menu.shrink  {
    height: 65px;
    line-height: 0px;
    background-color:var(--color_emph3);
    opacity: 1;	
	-webkit-transition: height 0.2s;
    -moz-transition: height 0.2s;
    transition: background 0.5s ease, height 0.2s; 

}

#mySubnav.ease-out  {
    opacity: 0;		
	transition-timing-function: ease-out;
	transition: 0.4s;
	transform: translateX(-100vw);
}

#header_menu a {
	text-decoration: none;
	border-bottom: 0px; 
	background-color: transparent;
	font-size: calc(16px + 5 * ((100vw - 320px) / 680));
	margin-left:50px;
	color:  var(--color_emph);
}
@media screen and (max-width: 1200px) {
  #header_menu a {
	margin-left: 30px;
  }
}
@media screen and (max-width: 800px) {
  #header_menu a {
	margin-left: 20px;
  }
}

#header_menu a.a_active, #header_menu a.a_active:hover {
	font-weight:700;
	color:  var(--color_ido_blue);

}
#mySubnav a {
	margin-left:20px;
}
#mySubnav a.a_active:before {
    content: "\2b9e \00a0\00a0";
}
#mySubnav a.a_active:after {
    content: "\00a0\00a0 \2b9c";
}

#header_menu a:hover {
	font-weight:600;
	color:  var(--color_ido_green);
}

#logo_motto {
	position: relative;
	top:6px;	
	background-image: url("../images/logo_idonus+slogan.png");
	background-repeat: no-repeat;	
	transition: background-image 0.1s ease;
	opacity: 1;	
}

#logo_motto.hide {
	position: relative;
	top:-10px;
	background-image: url("../images/logo_idonus.png");
	background-repeat: no-repeat;
	height:42px;

	opacity: 1;
	animation: blur 0.2s ease 0s;
	-webkit-animation: blur 0.2s ease 0s;
	-moz-animation: blur 0.2s ease 0s;
}

@keyframes blur {
  0%,
  90% {
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
  }
  50% {
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
  }
}


h1, h2 , h3{
	text-align: left;
}

h3 {
	font-size: calc(20px + 7 * ((100vw - 320px) / 680));
    font-weight: 100;
}
@media (max-width: 1200px) {
  h1, h2, h3 {
    display: block;
	margin-left: 0px;
  }
}
@media (max-width: 900px) {
  h3 {
	font-size:30px;
  }
}


.row {
	display: flex; 
    margin: 0 20px;
	text-align: left;
}
.span1 {
	width: 220px;
	max-width: 25vw;
	margin-right: 10px;	
}
.span2 {
	width: 480px;	
	max-width: 70vw;		
}

.span3 {
	width: 80px;
	max-width: 25vw;
	margin-right: 10px;	
}
.span4 {
	width: 300px;
    max-width: 70vw;
}


.span4,.span2, .span2 p {

	text-align: left;
	margin-right: 20px;		
}




.space_top,.space_top2 {
		height:0px;
}
@media screen and (max-width: 800px) {
	.space_top {
		height:65px;
	}
	.space_top2 {
		height:90px;
	}	
}

#home_bnnr{
	top: 10vw;
} 
@media screen and (max-width: 800px) {
	#home_bnnr  {
	top:60px;
	}
}

#contact_bnnr, #technol_bnnr {
	top:12vw;
}
@media screen and (max-width: 800px) {
	#contact_bnnr {
	top:65px;
	}
}
@media screen and (max-width: 800px) {
	 #technol_bnnr {
	top:165px;
	}
}
#solutions_bnnr {
	top: 10vw;
}
@media screen and (max-width: 800px) {
	#solutions_bnnr {
	top:170px;		
	}
}
#company_bnnr {
	top: 10vw;
}
@media screen and (max-width: 800px) {
	#company_bnnr {
	top:75px;		
	}
}

#UV-EXP_bnnr, #eng_bnnr, #ion_bnnr, #WEDC_bnnr, #Machining_bnnr {
		
}
@media screen and (max-width: 800px) {
	#UV-EXP_bnnr, #eng_bnnr, #ion_bnnr, #WEDC_bnnr, #Machining_bnnr {
	top:180px;		
	}
}

#VPE_bnnr {
	top:13vw;
}
#MAS_DIM_bnnr, #IR-M_bnnr {
	top:13.5vw;
}
@media screen and (max-width: 900px) {
	#MAS_DIM_bnnr, #IR-M_bnnr, #VPE_bnnr  {
	top:120px;
	}
}
@media screen and (max-width: 800px) {
	#MAS_DIM_bnnr, #IR-M_bnnr, #VPE_bnnr  {
	top:170px;
	}
}




@media screen and (max-width: 800px) {
	.row,.span1,.span2,.span3, .span3 p {
		display: block; 
		width: auto;
		text-align: left;
	}
	.span1{
    font-weight: 1000;
	}
	.span3 p {
	font-size: 16px;
	}
	.row {
	    margin: 0 0 0 10px;
	}
}


.topnav {
  overflow: hidden; 
  width: 100vw;
  display: block;
  margin-left: 140px;
}
@media screen and (max-width: 1200px) {
	.topnav{
		margin-left: 0px;
	}
}
 
.topnav a {
  float: left;
  margin-left: 140px;
  text-align: center;
  padding: 35px 15px;  
  text-decoration: none;
}

 
.topnav a:hover {
  background-color: #000;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav a.home, .topnav.responsive a.home {
  background-color: #ddd;
  padding: 15px 5px;  

}

.topnav .icon, .topnav.responsive .icon {
	display: none;
	position: absolute;
	text-align: right;
    top: 15px;
    right: 20px; 
	padding: 10px 40px;  	
}

	
#latest_news{
	margin-left:60px;
}
@media screen and (max-width: 900px) {
	#latest_news{
		margin-left:0px;
	}
}

#mySubnav {
  background-color: #FEFEFE;
  opacity: 1;	
  padding: 12px 15px;   
  text-align: left;  
  margin-top:-8px;  
  position: relative;
  border-bottom: 1px solid #C0C0C0;

  display: block;  
  line-height: 14px;
}

#mySubnav, #mySubnav a {
  text-decoration: none;
  font-size: 18px;
}

.span_subnav {
	margin-left: 182px;
}
.span_subnav2 {
	margin-left: 20px;
}

.span_subnav3 {
	height: 30px;
}
.span_subnav4 {
	height: 18px;
}
@media screen and (max-width: 800px) {
	.span_subnav3 {
		height: 24px;
	}	
	.span_subnav4 {
		height: 6px;
	}
}

@media screen and (max-width: 1200px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
  .span_subnav,.span_subnav2 {
	margin-left: 20px;
  }

}
@media screen and (max-width: 800px) {
  .span_subnav,.span_subnav2 {
	margin-left: 15px;
  }
  .span_subnav2 {
	height: 10px;	  
  }
}


@media screen and (max-width: 1200px) {
  .topnav.responsive {
	position: relative;
	display: block;

	background-color: #ddd;}
  .topnav.responsive .icon {
	display: block;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
	padding: 12px 0px 25px 26px;

  }

  #mySubnav, #mySubnav a {
	font-size: 16px;
  }
 
}
@media screen and (max-width: 800px) {
  #mySubnav, #mySubnav a {
	font-size: 16.5px;
  }
  #mySubnav a.a_active:before {
    content: "";
  }
  #mySubnav a.a_active:after {
	content: "";
  }
  #mySubnav {
    padding: 10px 1px;    
  }   
}

.menu {
  z-index: 100;
  position:fixed; 
  top: 300px;
  left:0px; 
  font-size: calc(18px + 3 * ((100vw - 320px) / 680));
  background-color:var(--color_emph2);
  opacity: 0.85;
  width: 160px;
  border: 1px solid var(--color_emph);
  border-left: 0px; 
  padding: 0px;
}

.menu.shrink {
  background-color:var(--color_emph3);
  opacity: 0.98;  
}


.menu a {
	text-decoration: none;
	border-bottom: 0px; 
	color: black;
	padding-left:0px;
}

.menu ul {
	padding-inline-start: calc(25px - 0.3*vw);
	margin: 0px;
}

.menu li {
	padding: 8px;
	padding-left: 5px;
	list-style-type:none;

}

@media screen and (max-width: 1500px) {
  .menu {visibility: hidden;}
}

@media screen and (max-height: 600px) {
  .menu {visibility: hidden;}
}

.active, .menu a:active {
  background-color:  var(--color_emph);
}
.active a,  .menu a:active {
 color: white;
   background-color: transparent;
   padding-left: 15px;	

}
.menu a:hover {
   	border-left: 1px solid; 
   	padding-left: 12px;	
	color: grey;
	background-color: transparent;
}

.progress-container {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 100;
  width: 100%;
  height: 9px;
  background: var(--color_emph2);
}
@media screen and (max-height: 800px) {
  .progress-container {width: 100vw;}
}

.progress-bar {
  height: 9px;
  background: var(--color_emph);
  width: 0%;
}

.content {
	position:absolute;
	top:0;
	left:0; 
	width:100%;
}



img {
	border:1px solid #000;
}

table.img_table {
	border: 0px solid #ccc;
	border-collapse: collapse;
	width: auto;
	table-layout: fixed;
	margin-left: auto;
	margin-right: auto;
	border-spacing: 0px;
}
table.img_table td {
	text-align:center;
	vertical-align: top;  
	padding: 15px;	
}
table.img_table td p {
	padding-top: 5px;
	padding-left: 5px;
	padding-right: 10px;
	text-align:left;
}
table.img_table td img{
    display: block;
    margin-left: auto;
    margin-right: auto;
	padding: 0px;
}



table.data_table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  padding: 0;
  width: 90%;
  table-layout: fixed;
}

table.data_table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
  text-align: left; 
}

table.data_table tr {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
}

table.data_table th, table.data_table td {
  padding: .5em;
  text-align: center;
   font-size: .75em; 
}

table.data_table th {
  font-size: .75em;
  letter-spacing: .1em;
}

@media screen and (max-width: 1200px) {

  table.image_table tr,td {
    display: block;
  }
  
  table.data_table {
    border: 1px;
	  width: 80%;
  }
  
  table.data_table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table.data_table caption {
	text-align: left;
    font-size: 1.2em;	
  }

  table.data_table tr {
    border-bottom: 1px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  
  table.data_table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: 0.8em;
    text-align: right;
  }
  
  table.data_table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }
  
  table.data_table td:last-child {
    border-bottom: 0;
  }
}


.zoom {
            width: 100%;
            height: 38vw;
            overflow: hidden;
            margin: 0 auto;
}
.zoom img {
            width: 100%;
            transition: 0.5s all ease-in-out;
			transform: translateY(-16vw) translateX(-1px);
}	
.zoom:hover img { 
	cursor: zoom-in;
	transform: scale(1.3) translateY(-14vw) translateX(11.4vw);
}

.zoom2 {
            width: 100%;
            height: 28vw;
            overflow: hidden;
            margin: 0 auto;
}
.zoom2 img {
            width: 100%;
            transition: 0.5s all ease-in-out;
			transform: translateY(-15vw) translateX(-1px);
}	
.zoom2:hover img { 
			cursor: zoom-in;
			transform: scale(1.3) translateY(-11.5vw) translateX(2vw);
}

.zoom3 {
            width: 100%;
            height: 28vw;
            overflow: hidden;
            margin: 0 auto;
}
.zoom3 img {
            width: 100%;
            transition: 0.5s all ease-in-out;
			transform: translateY(-23vw) translateX(-1px);
}	
.zoom3:hover img { 
			cursor: zoom-in;
			transform: scale(1.15) translateY(-11.5vw) translateX(3vw);
}

.zoom4 {
            width: 100%;
            height: 32vw;
            overflow: hidden;
            margin: 0 auto;
}
.zoom4 img {
            width: 100%;
            transition: 0.5s all ease-in-out;
			transform: translateY(-9.2vw) translateX(-1px); 
			
}	
.zoom4:hover img { 
			cursor: zoom-in;
			transform: scale(1.12) translateY(-18vw) translateX(-4vw);
}

.zoom5 {
            width: 100%;
            height: 34vw;
            overflow: hidden;
            margin: 0 auto;
}
.zoom5 img {
            width: 100%;
            transition: 0.5s all ease-in-out;
			transform: translateY(-10px) translateX(-1px); 
			
}	
.zoom5:hover img { 
			cursor: zoom-in;
			transform: scale(1.2) translateY(0.5vw) translateX(-7vw);
}

.footer_social {
	position: relative;	
	background: var(--color_emph2);
	width:100vw;
	height:120px;
}
@media screen and (max-width: 1100px) {
	.footer_social {
		height:200px;
	}
}
.row_social {
	display: flex; 
	flex-wrap: wrap;	
	position: relative;

	top: 24px;	
    text-align: left;	
	font-size:12px;
	margin-left:215px;
}
@media screen and (max-width: 800px) {
	.row_social {
		margin-left:40px;
	}
}
.row_social a { 
	color: #000000;
	border-bottom: 0px; 
	text-decoration: none;
	background-color: transparent;
}



.footer {
	position: relative;

	background: var(--color_emph);
	width:100%;
	height:40px;
	left:0;
	bottom: 9px;
}


/* -- Footer top -- */
#footer-top {
	position: relative;
 bottom:0px;
 height: 3px; background:var(--color_emph2) }
	
/* --  Footer Inner -- */
#footer-inner { 
	margin-left:auto; 
    margin-right:auto;
	padding: 5px; 
}
	
/* -- Footer Notes -- */
#footer-notes { 
	position: relative;
	
	margin-left:auto; 
    margin-right:auto;
	height: 26px; 


	color: #fff; 
	
	width:100%; 
	
}
#footer-notes a { color: #fff; text-decoration: none; font-weight:700; 	border-bottom: 0px; }
#footer-notes p, #footer-notes strong { color: #FFFFFF}

#footer-notes .copyright { 
	margin: 2px; 
	margin-left: 215px;
	text-align: left; 
	vertical-align: middle; 	
	font-size: 13px; 
}

@media screen and (max-width: 1200px) {
  #footer-notes .copyright  {
    font-size:12px;
	margin-left: 80px;
  }
}

@media screen and (max-width: 800px) {
  #footer-notes .copyright {  	
	font-size: 9px; 
	margin-left: 40px;	
}

#footer-notes-inner {  width: 100%; 	margin: 0px auto; }