*{
    box-sizing: border-box;
}
html {
	height: 100%;
	width: 100%;
	
}
body {
	font: 14px/18px Arial, Tahoma, Verdana, sans-serif;
min-height: 100%; /* Mindesthöhe für moderne Browser */
height:auto !important; /* Important Regel für moderne Browser */
height:100%; /* Mindesthöhe für den IE */
	overflow: scroll;
	width: 100%;
position: absolute;
margin-bottom: -1px;
background-position: center center;
}
a {

	outline: none;
	text-decoration: none;
	font-size: 30px; 
}
p{
	padding-top: 10px;
	padding-bottom: 10px;
	margin: 0 0 14px;
	line-height: 30px;
}
img {
	border: none;
}

#header {
	font: 28px/32px Arial, Tahoma, Verdana, sans-serif;
	color: white;
	    top:0px; left:0px; right:0px;

   
    height: 40px;

    text-align:left;
}
 .floating-menu {
    font-family: sans-serif;
    background: green;
    padding: 5px;;
    width: 160px;
    z-index: 100;
    position: fixed;
  }
  .floating-menu a {
    font-size: 16px;
    text-decoration: blink;
    display: block;
    margin: 0 0.5em;
    color: white;
  }
  .floating-menu a:hover {
    font-size: 16px;
    text-decoration: blink;
    display: block;
    margin: 0 0.5em;
    color: black;
  }
   @media screen 
  and (device-width: 2560px) 
  and (device-height: 1440px) 
  and (-webkit-device-pixel-ratio: 1) 
  and (orientation: potrait) {
  	img {
	width: 20%;
	height: 20%;
}
h3{
font-size: 32px;
}
p{
font-size: 30px; 
}
}
@media screen and (min-width:320px) and (max-width:1440px) {
/* Making the headings Black targeting PC Users */
img {
	width: 20%;
	height: 20%;
}
h3{
font-size: 36px;
}
 p{
font-size: 32px; 
line-height: 26px;
}
input{
    font-size: 26px;
}
}

  @media screen 
  and (device-width: 1440px) 
  and (device-height: 2560px) 
  and (-webkit-device-pixel-ratio: 1) 
  and (orientation: potrait) {
  	img {
	width: 40%;
	height: 40%;
}
h3{
font-size: 32px;
}
p{
font-size: 30px; 
}
}
 @media screen 
  and (device-width: 1440px) 
  and (device-height: 2560px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: potrait) {
  	img {
	width: 40%;
	height: 40%;
}
h3{
font-size: 48px;
}
p{
font-size: 30px; 
}
}
 @media screen 
  and (device-width: 1440px) 
  and (device-height: 2560px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: potrait) {
  	img {
	width: 40%;
	height: 40%;
}
h3{
font-size: 36px;
}
p{
font-size: 30px; 
}
}
@media screen 
  and (device-width: 1440px) 
  and (device-height: 2560px) 
  and (-webkit-device-pixel-ratio: 4) 
  and (orientation: potrait) {
  	img {
	width: 40%;
	height: 40%;
}
h3{
font-size: 36px;
}
p{
font-size: 30px; 
}
}
@media screen 
  and (device-width: 1440px) 
  and (device-height: 2560px) 
  and (-webkit-device-pixel-ratio: 1) 
  and (orientation: landscape) {
  	img {
	width: 40%;
	height: 40%;
}
h3{
font-size: 30px;
}
p{
font-size: 30px; 
}
}
@media screen 
  and (device-width: 1440px) 
  and (device-height: 2560px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: landscape) {
  	img {
	width: 40%;
	height: 40%;
}
h3{
font-size: 36px;
}
p{
font-size: 30px; 
}
}
@media screen 
  and (device-width: 1440px) 
  and (device-height: 2560px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
  	img {
	width: 40%;
	height: 40%;
}
h3{
font-size: 36px;
}
p{
font-size: 30px; 
}
}
/* Portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
  	img {
	width: 50%;
	height: 50%;
}
h3{
font-size: 36px;
}
p{
font-size: 30px; 
}
}

@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
img {
	width: 30%;
	height: 30%;
}
h3{
font-size: 36px;
}
p{
font-size: 30px; 
}
}
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) {
  	img {
	width: 30%;
	height: 30%;
}
h3{
font-size: 36px;
}
p{
font-size: 30px; 
}
}
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) 
  and (orientation: portrait) {
  	img {
	width: 50%;
	height: 50%;
}
h3{
font-size: 36px;
}
p{
font-size: 30px; 
}
}
h1 {
font-size: 10vw;
}
@media screen and (min-width:481px) and (max-width:1280px) {
/* Making the headings Black targeting PC Users */
img {
	width: 40%;
	height: 40%;
}
h3{
font-size: 30px;
}
 p{
font-size: 30px; 
}
}

@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) 
  and (orientation: landscape) {
  	img {
	width: 50%;
	height: 50%;
}
h3{
font-size: 30px; 
} 
p{
font-size: 30px; 
}

}
@media screen and (min-width:481px) and (max-width:1280px) {
/* Making the headings Black targeting PC Users */
img {
	width: 20%;
	height: 20%;
}
h3{
font-size: 30px; 
}
 p{
font-size: 30px; 
}
}
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
  	img {
	width: 50%;
	height: 50%;
}
h3{
font-size: 30px; 
} p{
font-size: 30px; 
}
input{
    font-size: 24px;
}
}

@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
  	img {
	width: 50%;
	height: 50%;
}
h3{
font-size: 30px; 
}
p{
font-size: 30px; 
}
}
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) {
  	img {
	width: 30%;
	height: 30%;
}
h3{
font-size: 30px; 
}
p{
font-size: 30px; 
}
}

}
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) 
  and (orientation: landscape) {
  	img {
	width: 50%;
	height: 50%;
}
h3{
font-size: 30px; 
} 
p{
font-size: 30px; 
}

}

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
img {
	width: 30%;
	height: 30%;
}
p{
font-size: 30px; 
}
}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
img {
	width: 30%;
	height: 30%;
}
h3{
font-size: 28px;
}
p{
font-size: 20px;
}
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
img {
	width: 30%;
	height: 30%;
}
p{
font-size: 30px; 
}
}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */



/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
img {
	width: 30%;
	height: 30%;
}
p{
font-size: 30px; 
}
}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

img {
	width: 30%;
	height: 30%;
}
p{
font-size: 30px; 
}
}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
img {
	width: 30%;
	height: 30%;
}
p{
font-size: 30px; 
}
}

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
img {
	width: 30%;
	height: 30%;
}
p{
font-size: 30px; 
}
}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 
img {
	width: 30%;
	height: 30%;
}
p{
font-size: 30px; 
}
}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) {
  	p{
font-size: 30px;   	
  	} 
  }