/* Infografik
-------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, h7, #infografik {
	line-height: 1.0em;
	font-family: 'Open Sans', sans-serif;
	text-align: left;
}

ul, ol {
	padding-left: 2em;
	list-style: none;
}

ul.ca-menu2 {
	padding-left: 2em !important;
}

img {
max-width: 100%;
}

.ca-main, .h2 {

	font-size: 0.5em;
}
	
.ca-main2{
	font-size: 0.7em;
}	

#infografik{
-moz-font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
background: #efefef;
color: #555;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-smoothing: antialiased;
line-height: 1.5em;
text-rendering: optimizeLegibility;
}

*:focus
{
    outline: none;
}

body {
	text-align: justify;
	font-color: color: #003463 !important;
}	

h1, h2 {
	width: 100%;
}

#masse {
	background-color: white;
	table-layout:fixed;
	border: 2px solid black;
	font-size: 0.9em;
	margin: 0px;
	width: 100%;
}

#masse thead td {
	font-size: 1.1em;
	font-weight: bold;
	background-color: white;
	padding: 0.4em;
}

#masse tbody td {
	background-color: white;
	padding: 0.4em;
}

.t-first {
	width: 35%;
}

.tiny {
	font-size: 0.6em;
	font-weight: bold;
}

.up {
	font-size: 0.4em;
}

.no-bottom {
	border: 0px;
	border-top: 1px;
	border-left: 1px;
	border-right: 1px;
	border-bottom: 0px solid grey;
}

#infografik {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
	
 background:url(https://www.ebelingundsohn.de/wp-content/uploads/pure-water-background1.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#ig-first {
	width: 60%;
	height: 100%;
	float: left;
}

#ig-second {
	width: 35%;
	height: 100%;
	float: right;
	
}

#infografik a {
	color: black;
}

#ig-first {
	background-image: url(https://www.ebelingundsohn.de/wp-content/uploads/tmp/o60.png);
	height: 100%;
}

#ig-second {
	background-image: url(https://www.ebelingundsohn.de/wp-content/uploads/tmp/o60.png);
	height: 100%;
}

.ca-menu, .ca-menu2 {
	background-image: url(https://www.ebelingundsohn.de/wp-content/uploads/tmp/o60green.png);
}

#z-front, #z-beschichtung {
	position: fixed;
	top: 40%;
	left: 25%;
}

#z-front {
	z-index: 102;
}

#z-beschichtung {
	z-index: 101;
}

.second {
	width: 100%;
	display: none;
	padding: 5% 10%;
	max-width: 80%;
}

.third {
	height: 100%;
	width: 100%;
	display: none;
	padding: 50px;
	max-width: 500px;
}

.second ul {
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}

.second ul li {
	padding-left: 10%;
	padding-bottom: 8%;
	background-repeat: no-repeat;
	background-position: 0 .5em;
	background-image: url(https://www.ebelingundsohn.de/uploads/h.png);
}
#diagramm {
	/*padding: 50px;*/
	margin-top: 15px;
	margin-left: 50px;

}

.hidden{
	display: none;
}

.hiddenChild {
	visibility: hidden;
}

#z-holder {
	float: right;
	text-align: center;
	width: 60%;
	height: 100%;
}

.get {
	display:none;
}

/****************INFOGRAFIK ENDE *************************/

svg { width: 100%; height: 100%; }

#tip{
 position : absolute;
 border : 1px solid gray;
 background-color : #efefef;
 padding : 3px;
 z-index: 1000;
 /* set this to create word wrap */
 /*
 width: 400px;
 height: 400px;*/
 max-width: 200px;
}

.ca-content {

}

.ca-menu{
    padding: 0 0 0 0px;
    margin: 0px;
    width: 25%; 
    height: 100%;
    float: left;
}
.ca-menu li{
    width: 35%;
    height: 10%;
    border: 10px solid #f6f6f6;
    margin-top: 10%;
    margin-bottom: 10%;
    overflow: visible;
    position: relative;
    float:left;
    background: #fff;
    margin-left: 10%;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -webkit-border-radius: 75%;
    -moz-border-radius: 75%;
    border-radius: 75%;
    -webkit-transition: all 400ms linear;
    -moz-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    -ms-transition: all 400ms linear;
    transition: all 400ms linear;
}
.ca-menu li:last-child{
    margin-right: 0px;
}
.ca-menu li a{
    text-align: left;
    width: 100%;
    height: 100%;
    display: block;
    color: #333;
    position: relative;
    font-size: 1.2em;
}

.ca-icon{
	display: none;
}

.ca-main{
    font-size: 0.8em;
    position: absolute;
    top: 35%;
    left: 20%;
    margin-left: -17%;
    opacity: 0.8;
    text-align: center;
    color: #555;
}

.ca-sub{
    display: none;
}
.ca-menu li:hover{
    border-color: #333;
    z-index: 999;
   /* -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);*/
}
.ca-menu li:hover .ca-icon{
    color: #000;
    text-shadow: 0px 0px 1px #000;
    -webkit-animation: moveFromBottom 300ms ease;
    -moz-animation: moveFromBottom 300ms ease;
    -ms-animation: moveFromBottom 300ms ease;
}
/*.ca-menu li:hover .ca-main{
    color: #000;
    -webkit-animation: moveFromBottom 500ms ease;
    -moz-animation: moveFromBottom 500ms ease;
    -ms-animation: moveFromBottom 500ms ease;
}*/

.ca-menu li ul {
	width: 100%;
	margin-left: 0%;
	margin-top: -25%;
		overflow: visible;
		position: relative;
		top: -100%;
		left: 100%;
}

.ca-menu li ul li {
		width: 110% !important;
		height: 20%;
		margin-top: 20%;
		margin-left: 0%;
		padding-bottom: 10%;
		width: 100%;
		    -webkit-border-radius: 0%;
			-moz-border-radius: 0%;
			border-radius: 0%;
		border: 5px solid #f6f6f6;
}

.ca-menu li ul li a {
	padding-top: 5%;
	font-size: 0.9em;
	text-align: center !important;
}

.ca-menu li ul li a  h2{
	text-align: center !important;
}

.ca-main2 {
	font-size: 0.8em;
	margin-top: 0px;
	margin-bottom: 0px;
	position: absolute;
}

.ca-sub2 {
	display: none;
}


@-webkit-keyframes moveFromBottom {
    from {
        -webkit-transform: translateY(200%) scale(0.5);
        opacity: 0;
    }
    to {
        -webkit-transform: translateY(0%) scale(1);
        opacity: 1;        
    }
}
@-moz-keyframes moveFromBottom {
    from {
        -moz-transform: translateY(200%) scale(0.5);
        opacity: 0;
    }
    to {
        -moz-transform: translateY(0%) scale(1);
        opacity: 1;        
    }
}
@-ms-keyframes moveFromBottom {
    from {
        -ms-transform: translateY(200%) scale(0.5);
        opacity: 0;
    }
    to {
        -ms-transform: translateY(0%) scale(1);
        opacity: 1;        
    }
}

@media (max-width: 1650px) 
{
	#masse {
		font-size: 0.7em;
	}
	.second {
		font-size: 0.8em;
	}
}

@media (max-width: 1350px) 
{
	#masse {
		font-size: 0.7em;
	}
	.second {
		font-size: 0.7em;
	}
}

@media (max-width: 1150px) 
{
	#masse {
		font-size: 0.6em;
	}
}

@media (max-width: 1050px) 
{
	#masse {
		font-size: 0.5em;
	}
}

@media (max-width: 1024px) 
{
	.ig_picture
	{
		height: 50%;
	}
	
	#ig-first {
		width: 50%;
	}
	
	#ig-second {
		width: 48%;
	}
	
	.second ul li 
	{
		padding-left: 8%;
		padding-bottom: 2%;
		background-image: url(https://www.ebelingundsohn.de/uploads/h_klein.png);
	}
	
	#funksysteme2, #funk2 , #Fernauslesung2
	{
		font-size: 0.8em;
	}
	
	.ca-menu li
	{
		width: 65%;
		height: 12%;
	}
	
	.ca-main
	 {
		font-size: 0.6em !important;
	}
	
	#masse {
		border: 2px solid black;
		margin: 0px;
	}
}	
	
@media (max-width: 1800px) 
{
	.ca-main, .h2 {
		font-size: 0.7em !important;
	}
}

@media (max-width: 1660px) 
{
	.ca-main, .h2 {
		font-size: 0.6em !important;
	}
	
	.second ul li {
		padding-left: 15%;
	}
}

@media (max-width: 1444px) 
{
.second ul li 
{
	padding-left: 8%;
	padding-bottom: 2%;
	background-image: url(https://www.ebelingundsohn.de/uploads/h_klein.png);
}

#infografik{
	line-height: 1.4em;
}
	.ca-main, .h2 {
		font-size: 0.5em !important;
	}
	
	.ca-main2{
		font-size: 0.7em !important;
	}
}

@media (max-width: 1200px) 
{
	.ca-main, .h2 {
		font-size: 0.4em !important;
	}
	.ca-main2{
		font-size: 0.6em !important;
	}
}

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,figure,footer,header,hgroup,menu,nav,section,menu,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;cursor:default}article,aside,figure,footer,header,hgroup,nav,section{display:block}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;color:inherit;text-decoration:inherit}
html {
font-size: 16px;
}
/* Using a new pixel ratio of 6/5 */
/* Standard 7" 1024x600 tablet (KINDLE FIRE) */
@media
screen and (-webkit-device-pixel-ratio: 1) and (device-width: 1024px) and (max-device-height: 600px) and (orientation: landscape),
screen and (-webkit-device-pixel-ratio: 1) and (device-width: 600px) and (max-device-height: 1024px) and (orientation: portrait),
screen and (-o-device-pixel-ratio: 1) and (device-width: 1024px) and (max-device-height: 600px) and (orientation: landscape),
screen and (-o-device-pixel-ratio: 1) and (device-width: 600px) and (max-device-height: 1024px) and (orientation: portrait),
screen and (device-pixel-ratio: 1) and (device-width: 1024px) and (max-device-height: 600px) and (orientation: landscape),
screen and (device-pixel-ratio: 1) and (device-width: 600px) and (max-device-height: 1024px) and (orientation: portrait) {
html { font-size: 19.2px; } /* 16px x (6/5) */
}
 
/* 1024x600 tablet with pixel ratio of 3/2 (GALAXY TAB) */
/* Because we have a solid device-pixel-ratio we can avoid the device height */
@media
screen and (-webkit-device-pixel-ratio: 1.5) and (device-width: 683px) and (orientation: landscape),
screen and (-webkit-device-pixel-ratio: 1.5) and (device-width: 400px) and (orientation: portrait),
screen and (-o-device-pixel-ratio: 3/2) and (device-width: 683px) and (orientation: landscape),
screen and (-o-device-pixel-ratio: 3/2) and (device-width: 400px) and (orientation: portrait),
screen and (device-pixel-ratio: 1.5) and (device-width: 683px) and (orientation: landscape),
screen and (device-pixel-ratio: 1.5) and (device-width: 400px) and (orientation: portrait),
screen and (device-pixel-ratio: 3/2) and (device-width: 683px) and (orientation: landscape),
screen and (device-pixel-ratio: 3/2) and (device-width: 400px) and (orientation: portrait) {
html { font-size: 12.8px; } /* 16px x (2/3) x (6/5) */
}
h1, h2, h3 {
line-height: 2em;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.6em;
}
h3 {
font-size: 1em;
}