/* 
    Created on : 24.07.2022, 15:27:57
    Author     : Alexander Lang
*/


/* Farbe Slogan1 = 0e518d */
/* Farbe Slogan2 = 5a91c7 */

* {box-sizing: border-box}


/* Main-body - background-image */
body { 
    font-family: Calibri; 
    font-size: 14pt;
	position:absolute;
	top:0px;
	width:100%;
}


/* MArkierte Texte schwarz statt blau */
::-moz-selection { background: #111; color: #fff; }
::selection { background: #111; color: #fff; }



/* ******************* */
/* common links */
/* ******************* */
a:link { 
    text-decoration:none; 
	color: black;
	text-shadow:1px 1px 1px #0000cc;
} 
a:hover { 
    text-decoration:none; 
	color: black;
	text-shadow:2px 2px 4px #ff0000;
} 
a:active { 
    text-decoration:none; 
	color: black;
	text-shadow:1px 1px 1px #0000cc;
} 
a:visited { 
    text-decoration:none; 
	color: black;
	text-shadow:1px 1px 1px #0000cc;
}


img.scaleimg {
    transition:all 2.5s ease-in-out;  
}

img.scaleimg:hover  {
    transform:scale(1.4); 
}


img.scaleimg_25_r {
    transition:all 2.5s ease-in-out;  
}

img.scaleimg_25_r:hover  {
	position: sticky; /* any position is need for z-index! - sticky is a workaround ;-) */
	z-index: 3;
    transform:scale(2.5); 
	transform-origin: right;  /* keep right pos */
}

img.scaleimg_25_l {
    transition:all 2.5s ease-in-out;  
}

img.scaleimg_25_l:hover  {
	position: sticky; /* any position is need for z-index! - sticky is a workaround ;-) */
	z-index: 3;
    transform:scale(2.5); 
	transform-origin: left; /* keep left pos */
}


/* ******************* */
/* Main-content */
/* ******************* */

.banner {
	z-index: 0;
	position: relative;
    max-height: 390px;
    width: 60%;
    max-width: 1600px;
	top: 110px; 
	left: 0px; 
    display: block;
    visibility: visible;
	margin-bottom:200px;
	border-radius: 0 0 0 40px ;
/*	box-shadow: 0 0 15px 15px rgba(255,255,255,0.5); white */

	box-shadow: 0 15px 15px 15px rgba(0,0,0,0.6); 	/* black */
	animation: fadeIn 1.5s;						/* Change opacity */
	-moz-animation: fadeIn 1.5s; 				/* Für Firefox */
	-webkit-animation: fadeIn 1.5s; 			/* Für Safari und Chrome */
	-o-animation: fadein 1.5s; 					/* Für Opera */

/*	animation: zoomInBanner 1.0s linear;			/* banner from topleft to position */
/*	-moz-animation: zoomInBanner 1.0s linear; 		/* Für Firefox */
/*	-webkit-animation: zoomInBanner 1.0s linear; 	/* Für Safari und Chrome */
/*	-o-animation: zoomInBanner 1.0s linear; 		/* Für Opera */	
}

.pagetitle { 
    color: #000000; 
    padding: 2px 2px;
    font-variant-caps: petite-caps;
    font-weight: bolder;
	font-size: 25pt;
}             

.pagetitleadd {
    color: #444444; 
    padding: 2px 2px;
    font-style: italic;
    font-variant-caps: petite-caps;
    font-weight: lighter;
}             

.scontent {
	margin-top:150px;
    float: right;
    background-color: transparent;
	width: 100%;

	animation: fadeIn 1.0s;      		/* = change opacity */
	-moz-animation: fadeIn 1.0s; 		/* Für Firefox */
	-webkit-animation: fadeIn 1.0s; 	/* Für Safari und Chrome */
	-o-animation: fadein 1.0s; 			/* Für Opera */
}

.scontent_box_right {
	opacity: inherit;
	position: relative;
	right: 0px;
    float: right;
    width: 80%;
	font-size: 16pt;
    background-color: #f3f3f3; 
    min-height: 80px;
	margin-top: 100px;
	border-radius: 50px 0px 0px 50px; 
	border: groove 1px  grey; 
    box-shadow: 0 15px 15px 15px rgba(0,0,0,0.6);

	animation: blurOut 1.5s linear 0s;			/* = black to normal */ 
	-moz-animation: blurOut 1.5s linear 0s; 	/* Für Firefox */
	-webkit-animation: blurOut 1.5s linear 0s; 	/* Für Safari und Chrome */
	-o-animation: blurOut 1.5s linear 0s; 		/* Für Opera */	
}

.scontent_box_left {
	opacity: inherit;
	position: relative;
	left: 0px;
    float: left;
    width: 80%;
	font-size: 16pt;
    background-color: #f3f3f3; 
    min-height: 80px;
	margin-top: 100px;
	border-radius: 0px 50px 50px 0px; 
	border: groove 1px  grey; 
    box-shadow: 15px 15px 15px 0 rgba(0,0,0,0.6);

	animation: blurOut 1.5s linear 0s;			/* = black to normal */ 
	-moz-animation: blurOut 1.5s linear 0s; 	/* Für Firefox */
	-webkit-animation: blurOut 1.5s linear 0s; 	/* Für Safari und Chrome */
	-o-animation: blurOut 1.5s linear 0s; 		/* Für Opera */
}

.scontent_box_right p.message { 
	padding-left: 40px;
	padding-right: 40px;
    color: #000000; 
    font-variant-caps: petite-caps;
    font-weight: bold;
	font-size: 20pt;
	font-style: italic;
	text-align: center;
	margint-top: 20px;
}             

.scontent_box_right i {
	font-size: 12pt;
}
.scontent_box_left i {
	font-size: 12pt;
}
.scontent_box_part i {
	font-size: 12pt;
}

.scontent_box_right b {
	font-size: 18pt;
}
.scontent_box_left b {
	font-size: 18pt;
}
.scontent_box_part b {
	font-size: 18pt;
}

.scontent_box_part {
	visibility: inherit;
    float: right;
    width: 50%;
    min-height: 400px;
}

.scontent_box_part p {
	padding-left: 40px;
	padding-right: 40px;
}

.scontent_box_part img {
	padding-top: 40px;
}

.scontent_box_part .ytframe {
	width: 550px;
	height: 310px;
	background: inherit;
	border: none;
}

.content_menu_entry {
	z-index:5;
	float: center;
    width: 90%;
    background-color: #333333;
    padding: 5px;
    margin: 5px;
    margin-top: 30px;
    right: 0px;
	opacity: 0.8;
}

.content_menu_entry_inner {
    width: 90%;
    background-color: #ffffff;
    padding-bottom: 20px;
}

.bottomfield_outer {
	float: center;
    width: 50%;
    background-color: #000000;
    padding: 0px;
    margin: 2px;
    margin-top: 280px; /* vom banner */
    right: 0px;
	opacity: 0.6;
    border-radius: 12px; 
}

.bottomfield {
    width: 70%;
    background-color: #ffffff;
    padding: 0px;
}


.ytframe {
	width: 800px;
	height: 450px;
	background: inherit;
	border: none;
}


/* ******************* */
/* Adjust for smaller screens
/* ******************* */
@media only screen and (max-width: 1600px) {

    .info { 
        font-size: 14pt;
    }    


    .banner {
        display: block;
        margin-top: -50px;
		margin-bottom:175px;
		max-height: 380px; 
		width: 60%;
	}

    img.scaleimg  {
        transform:scale(0.8); 
    }

	.scontent_box_right {
		margin-top: 80px;
		width: 90%;
		font-size: 13pt;
	}
	
	.scontent_box_left {
		margin-top: 80px;
		width: 90%;
		font-size: 13pt;
	}

	.scontent_box_part {
		float:none;
		width:auto;
		height:auto;
	}

	.scontent_box_right b {
		font-size: 15pt;
	}

	.scontent_box_left b {
		font-size: 15pt;
	}

	.scontent_box_part b {
		font-size: 15pt;
	}

	.scontent_box_right i {
		font-size: 11pt;
	}

	.scontent_box_left i {
		font-size: 11pt;
	}

	.scontent_box_part i {
		font-size: 11pt;
	}


}


/* ******************* */
/* Adjustment for mobiles
/* ******************* */
@media only screen and (max-width: 1000px) {
    
    .banner {
        display: block;
        margin-top: -50px;
		margin-bottom:150px;
		max-height: 320px; 
		width: 100%;
    }


	.pagetitle { 
		font-size: 18pt;
		margin-top: 50px;
	}
    .scontact {
        float: none;
        width: 100%;
    }
    
    li.dropdown {
        /**/ float: right;
    }

    .info { 
        font-size:12pt;
    }    
	
	.ytframe {
		width:500px;
		height:310px;
	}

	.scontent_box_part .ytframe {
		width: 500px;
		height: 310px;
	}
	.scontent_box_right b {
		font-size: 13pt;
	}
	.scontent_box_left b {
		font-size: 13pt;
	}
	.scontent_box_part b {
		font-size: 13pt;
	}

	.mover{
		top: 350px;
	}

	.bottomfield_outer {
		margin-top: 300px;/* vom banner */
		padding: 0px;
	}

	.content_menu_entry {
		margin-top: 20px;
		padding: 0px;
	}
}



/* **************************************************************** */
/* Features */

/* ******************* */
/* a fade in and out CSS/keyframe */
.fadeInAndOut {
    -webkit-animation: fadeinout 4s linear forwards;
    animation: fadeinout 4s linear forwards;
}
@-webkit-keyframes fadeinout {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@keyframes fadeinout {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-moz-keyframes fadeinout { /* Für Firefox */
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-webkit-keyframes fadeinout { /* Für Safari und Chrome */
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-o-keyframes fadeinout { /* Für Opera */
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}

/* a fade in CSS/keyframe */
.fadeIn {
    animation: fadeIn 3.5s;
    -moz-animation: fadeIn 3.5s; /* Für Firefox */
    -webkit-animation: fadeIn 3.5s; /* Für Safari und Chrome */
    -o-animation: fadeIn 3.5s; /* Für Opera */
}
@keyframes fadeIn {
    from { opacity:0; }
    to { opacity:0.9; }
}
@-moz-keyframes fadeIn { /* Für Firefox */
    from { opacity:0; }
    to { opacity:0.9; }
}
@-webkit-keyframes fadeIn { /* Für Safari und Chrome */
    from { opacity:0; }
    to { opacity:0.9; }
}
@-o-keyframes fadeIn { /* Für Opera */
    from { opacity:0; }
    to { opacity:0.9; }
}



/* CSS/keyframe : from black to bg-color*/
.blurOut {
    animation: blurOut 3.5s;
    -moz-animation: blurOut 3.5s; /* Für Firefox */
    -webkit-animation: blurOut 3.5s; /* Für Safari und Chrome */
    -o-animation: blurOut 3.5s; /* Für Opera */
}
@keyframes blurOut {	
    from { background-color: #000000; box-shadow: none; }
    to { background-color: #f3f3f3; box-shadow: 0 15px 15px 15px rgba(0,0,0,0.6); }
}
@-moz-keyframes blurOut { /* Für Firefox */
    from { background-color: #000000; box-shadow: none; }
    to { background-color: #f3f3f3; box-shadow: 0 15px 15px 15px rgba(0,0,0,0.6); }
}
@-webkit-keyframes blurOut { /* Für Safari und Chrome */
    from { background-color: #000000; box-shadow: none; }
    to { background-color: #f3f3f3; box-shadow: 0 15px 15px 15px rgba(0,0,0,0.6); }
}
@-o-keyframes blurOut { /* Für Opera */
    from { background-color: #000000; box-shadow: none; }
    to { background-color: #f3f3f3; box-shadow: 0 15px 15px 15px rgba(0,0,0,0.6); }
}
/* ******************* */

    


/* a zoom in (100%) CSS/keyframe */
.zoomIn {
    animation: zoomIn 1.5s;
    -moz-animation: zoomIn 1.5s; /* Für Firefox */
    -webkit-animation: zoomIn 1.5s; /* Für Safari und Chrome */
    -o-animation: zoomIn 1.5s; /* Für Opera */
}
@keyframes zoomIn {
    from { height:10%; width:10%; }
    to { height:100%;  width:100%; }
}
@-moz-keyframes zoomIn { /* Für Firefox */
    from { height:10%; width:10%; }
    to { height:100%;  width:100%; }
}
@-webkit-keyframes zoomIn { /* Für Safari und Chrome */
    from { height:10%; width:10%; }
    to { height:100%;  width:100%; }
}
@-o-keyframes zoomIn { /* Für Opera */
    from { height:10%; width:10%;  }
    to { height:100%;  width:100%; }
}



/* a zoom in (60%) CSS/keyframe */
.zoomInBanner {
    animation: zoomIn 1.0s;
    -moz-animation: zoomIn 1.0s; /* Für Firefox */
    -webkit-animation: zoomIn 1.0s; /* Für Safari und Chrome */
    -o-animation: zoomIn 1.0s; /* Für Opera */
}
@keyframes zoomInBanner {
    from { height:10%; width:60%; }
    to { height:400px;  width:60%; }
}
@-moz-keyframes zoomInBanner { /* Für Firefox */
    from { height:10%; width:60%; }
    to { height:400px;  width:60%; }
}
@-webkit-keyframes zoomInBanner { /* Für Safari und Chrome */
    from { height:10%; width:60%; }
    to { height:400px;  width:60%; }
}
@-o-keyframes zoomInBanner { /* Für Opera */
    from { height:10%; width:60%;  }
    to { height:400px;  width:60%; }
}


/* a zoom in CSS/keyframe */
.zoomInVertical {
    animation: zoomInVertical 3.5s;
    -moz-animation: zoomInVertical 3.5s; /* Für Firefox */
    -webkit-animation: zoomInVertical 3.5s; /* Für Safari und Chrome */
    -o-animation: zoomInVertical 3.5s; /* Für Opera */
}
@keyframes zoomInVertical {
    from { height:10%; }
    to { height:100%; }
}
@-moz-keyframes zoomInVertical { /* Für Firefox */
    from { height:10%; }
    to { height:100%; }
}
@-webkit-keyframes zoomInVertical { /* Für Safari und Chrome */
    from { height:10%; }
    to { height:100%; }
}
@-o-keyframes zoomInVertical { /* Für Opera */
    from { height:10%; }
    to { height:100%; }
}

/* a zoom in CSS/keyframe */
.zoomInHorizontal {
    animation: zoomInHorizontal 3.5s;
    -moz-animation: zoomInHorizontal 3.5s; /* Für Firefox */
    -webkit-animation: zoomInHorizontal 3.5s; /* Für Safari und Chrome */
    -o-animation: zoomInHorizontal 3.5s; /* Für Opera */
}
@keyframes zoomInHorizontal {
    from { width:10%; }
    to { width:100%; }
}
@-moz-keyframes zoomInHorizontal { /* Für Firefox */
    from { width:10%; }
    to { width:100%; }
}
@-webkit-keyframes zoomInHorizontal { /* Für Safari und Chrome */
    from { width:10%; }
    to { width:100%; }
}
@-o-keyframes zoomInHorizontal { /* Für Opera */
    from { width:10%; }
    to { width:100%; }
}
/* ******************* */

.moveRight{
	animation-delay: 1s;
	animation-duration: 5s;
	animation-timing-function: linear;
	animation: moveRight;
}
@keyframes moveRight {
  from 	{ left: -100px; }
  to 	{ left: 100px; }
}


.dronemove{
	z-index:10;
	float: center; 
	position: absolute;
	top: -220px;
	right: -100px;
	width: 240px;
	height: 160px; 
	opacity: 0;
	animation: dronemove 1.5s linear 3.0s;
}

/* bei dronemove 10s linear 3s;
@keyframes dronemove {
     0% { opacity:0; 	width:10px; 	height:3px; 	right:-100px;	top:700px; 	}
    10% { opacity:1; 	width:120px; 	height:80px; 	right: 300px;	top:600px;	}
	30%	{ 				width:240px; 	height:160px; 								}
	40%	{ 																top:500px; 	transform: rotateZ(0deg); }
	50%	{ 												right: 700px;	top:550px; 	transform: rotateZ(360deg); }
	60%	{ 												right: 800px;	top:500px; 	}
	80%	{ 												right: 1000px;			 	}
	99%	{ opacity: 1; 													top:100px;	}	
   100%	{ opacity: 0; 									right:2000px; 				transform: rotateZ(360deg); }	
}
*/

/* bei dronemove 10s linear 3s;
@keyframes dronemove {
     0% { opacity:0; 	width:10px; 	height:3px; 	right:-100px;	top:700px; 	transform: rotateZ( 45deg) rotateX( 22deg); }
	50%	{ opacity:1; 	width:240px; 	height:160px; 	right: 800px;	top:100px;	transform: rotateZ(-45deg) rotateX(-22deg);}	
   100%	{ opacity:0; 									right:2000px;	top:900px;}	
}
*/

@keyframes dronemove {
      1%  { opacity:1; width:10px; 		height:3px; 	left:200px;	top:200px; }
     50%  { 																	transform: rotateZ(0deg); }
     60%  { opacity:1; width:1000px;	height:302px; 							}
     70%  { 																	transform: rotateZ(360deg); }
    100%  { opacity:0; width:2000px; 	height:600px; 	left:600px;	top:600px; 	transform: rotateZ(360deg); }
 




/* ******************* */
/* setting a mask for images*/

.masklogo {
  -webkit-mask-image: url(../images/logo_transparent.png);
  mask-image: url(../images/logo_transparent.png);
  -webkit-mask-size: 70%;
  mask-size: 70%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;    
}
/* ******************* */


/* **************************************************************** */