/*------------------------------------------------------------------------------
 initSite -CSS	:   RSW Homepage
 Autor		:   Dieter Hodes
 Copyright	:   (c)2022, Rio System Works
-------------------------------------------------------------------------------
Seitenaufbau
------------------------------------------------------------------------------*/
* {
        box-sizing: border-box;
}
html {
        margin-top:0px;
        padding:0;
}
body {
/*        border: 1px solid yellow; */  
        background: url("../img/ai_four2_cont.png"); 
        width: 100%; 
        height: auto; 
	background-repeat: no-repeat;
        margin: auto; 
        background-color: #d6d5d0;
/*        color:#251305; */
        color:white; 
        font: normal normal 15px "Calibri", Arial, sans serif;
}
.maint {
        border: 1px solid red;   
        width: 100%; 
        height: 100%; 
        padding: 25px 0 0 65px;
} 
.relnr {
/*     border: 1px solid green; */ 
       position: absolute;
       width: 50px;
       top: 0;
       left: 0;
       padding: 0 0 0 10px;
       color:#c0c0c0;
       opacity: 0.5;
       font: normal bold 12px "Times New Roman", Arial, sans serif;
}
.ucr div {
        width: 180px; 
        height: 60px; 
        margin: 0 0 0 10px;
}

/*------------------------------------------------------------------------------
Neue Zeile
------------------------------------------------------------------------------*/
.row::after {
        content: "";
        clear: both;
        display: table;
        text-decoration: none;
}
.row {
/*     border: 1px solid #bfbfbf; */ 
}

/*------------------------------------------------------------------------------
Service Line
------------------------------------------------------------------------------*/

#cont-last div {
        border: 2px solid #c0c0c0;  
        width: 150px; 
        height: 50px;
        margin: 2px 0 0 120px;
        padding: 0;
/*        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px; */
	position: relative;
        opacity: 0.7;
}

/*------------------------------------------------------------------------------
Services
------------------------------------------------------------------------------*/
.menu-service {
/*      border: 1px solid #c0c0c0; */  
        position: absolute;
        margin-left: 55%;
        top: 5%;
        width: 450px;
        height: 50px;
        color: #ffffff;
}
#cont-service div {
/*        border: 2px solid #c0c0c0;  */ 
        float: left; 
        width: 100px; 
        height: 45px;
        margin: 2px 12px 0 0;
        color: #ffffff;
        font: normal normal 18px "Times New Roman", Arial, sans serif;
        text-align: center;
	-webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
	opacity: 0.8;
}        
.notes {
        text-decoration: none;
}        
.whois {
        text-decoration: none;
}        
.crights {
        text-decoration: none;
}                
.imprint {
        text-decoration: none;
}
/*------------------------------------------------------------------------------
Menu 
------------------------------------------------------------------------------*/
ul.ul1 {
/*  border: 1px solid #c0c0c0; */ 
		list-style-type: none;
		margin: 20px 10.5% 0 0;
		padding: 0;
		overflow: hidden;
}
li {
		float: right;
}
li a {
		display: inline-block;
		color: #c0c0c0;
		text-align: left;
		padding: 14px 16px;
		font: normal normal 18px "Times New Roman", Arial, sans serif;
		text-decoration: none;
}
li.ligreen a {
		color: #00B120;
}
li a:hover {
		color: yellow;
}
/*
a {
      color: white;
      font: normal bold 30px "Times New Roman", Arial, sans serif;
      text-decoration: none;
}
a:link, a:visited {
      text-decoration: none;
}
a:hover {
      color: yellow;
      text-decoration:none;
}
*/        
a {
      color: white;
      font: normal bold 20px "Times New Roman", Arial, sans serif;
      text-decoration: none;
}
.txt a {
      color: white;
      font: normal bold 12px "Times New Roman", Arial, sans serif;
      text-decoration: none;
}
a:link, a:visited {
      text-decoration: none;
}
a:hover {
      color: yellow;
      text-decoration:none;
}

/*------------------------------------------------------------------------------
Startanzeige
------------------------------------------------------------------------------*/
.cont-start {
        position: relative;
}
.cont-start1 {
	position: absolute;
        border: 3px solid #c0c0c0; 
        width: 240px;
        height: 150px;
        margin: 20px 0 0 100px;
        padding: 0;
       -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px; 
}
.cont-start2 {
/*        border: 1px solid red; */  
        position: absolute;
        text-align: center;
        width: 240px;
        height: 40px;
        left: 100px;
        top: 10px;
        margin: 20px 0 0 0;
        color:#c0c0c0;
        font: normal 30px "Times New Roman", Arial, sans serif;
	opacity: 1.0;
}
.cont-start3 {
/*        border: 1px solid red; */ 
        position: absolute;
        text-align: center;
        width: 240px;
        height: 45px;
        top: 75px; 
        left: 100px;
        margin: 0;
        padding: 0;
        font: normal 15px "Times New Roman", Arial, sans serif;
        color:#c0c0c0;
	opacity: 0.8;
}
.cont-start4 {
/*        border: 1px solid yellow; */
        position: absolute;
        float: left; 
        text-align: center;
        width: 240px;
        height: 60px;
        top: 110px; 
        left: 100px;
        margin: 0;
        padding: 0; 15px 0 0; 
}

/*------------------------------------------------------------------------------
Sprachanzeige
------------------------------------------------------------------------------*/

#cont-lang div {
/*        border: 2px solid #c0c0c0; */
        float: left; 
        width: 44px; 
        height: 44px;
        margin: 5px 0 0 12px;
        padding: 0;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
}
.z-d {
        border: 2px solid #000005;
        background: url("../img/z-d-40.png");
	position: relative;
}
.z-uk {
        border: 2px solid yellow;
        background: url("../img/z-uk-40.png");
	position: relative;
}
.z-f {
        border: 2px solid #000005;
        background: url("../img/z-f-40.png");
        opacity: 0.4;
        filter: alpha(opacity=50); /* For IE8 and earlier */
}
.z-pl {
        border: 2px solid #000005; 
        background: url("../img/z-pl-40.png");
        opacity: 0.4;
        filter: alpha(opacity=50); /* For IE8 and earlier */
}
.z-lnk {
        position:absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
}


a {
      color: white;
      text-decoration: none;
}
a:link {
/*      color: red;
      border-bottom: 1px solid white; 
      text-decoration:none; */
}
a:visited {
/*      color: white;
      border-bottom: 1px solid #d0d0d0; 
      text-decoration:none; */
}
a:hover {
      color: yellow;
      text-decoration:none;
}

.sub_div {
                position: absolute;
                bottom: 0px;
            }

.menu-cond {
	border-top:1px solid #c0c0c0;
	border-right:1px solid #c0c0c0;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px; 
        position: absolute;
        left: 400px;
        bottom: 30px;
        float: left; 
        text-align: center;
        width: 185px;
        height: 55px;
        margin: 0;
        padding: 5px 0 0 0; 
}
#cond div {
        border: 2px solid #c0c0c0; 
        float: left; 
        width: 44px; 
        height: 44px;
        margin: 2px 0 0 0;
        padding: 0;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
}

.menu-media {
	border-top:1px solid #c0c0c0;
	border-right:1px solid #c0c0c0;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px; 
        position: absolute;
        left: 1000px;
        bottom: 25px;
        float: left; 
        text-align: center;
        width: 300px;
        height: 65px;
        margin: 0;
        padding: 10px 0 0 0; 
}
#cont-media div {
        border: 2px solid #c0c0c0; 
        float: left; 
        width: 44px; 
        height: 44px;
        margin: 2px 0 0 12px;
        padding: 0;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
}
.facebook {
        border: 1px solid #968C82;
    	position: relative;
        opacity: 0.6;
}
.facebook:hover {
        background: url(../img/facebook3.png);
}
.twitter {
        border: 1px solid #968C82;
		position: relative;
        opacity: 0.6;
}
.twitter:hover {
        background: url(../img/x_logo.png);
}
.linkedin {
        border: 1px solid #968C82;
		position: relative;
        opacity: 0.6;
}
.linkedin:hover {
        background: url(../img/linkedin3.png);
}
.email {
        border: 1px solid #968C82;
    	position: relative;
        opacity: 0.6;
}
.email:hover {
        background: url(../img/at3.png);
}
.spy {
        border: 1px solid lightgreen;
        background: url(../img/spy2.png);
		width: 44px;
		height: 43px;
        margin: 3px 0 0 12px;
    	position: relative;
        opacity: 0.9; 
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
}
.spy:hover {
        background: url(../img/spy3.png);
}
.cond-logo {
        position: absolute;
        left: 120px;
        bottom: 20px;
        float: left; 
        text-align: left;
        width: 150px;
        height: 80px;
        margin: 0;
        padding: 15px 0 0 0; 
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px; 
}
.pic-logo div {
        border: 1px solid #c0c0c0; 
        float: left; 
        width: 140px; 
        height: 70px; 
        margin: 20px 0 0 12px;
        padding: 0;
/*	border-top:1px solid green;
	border-left:1px solid green; */
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        opacity: 0.1;
	text-decoration:none;
}
.pic-logo img {
        opacity: 0.7;
}
.cond-intro {
        position: absolute;
        left: 280px;
        bottom: 35px;
        float: left; 
        text-align: left;
        width: 500px;
        height: 70px;
        margin: 0;
        padding: 5px 0 0 0; 
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px; 
}
#cond-txt div {
/*        border: 1px solid #c0c0c0; */
        float: left; 
        width: 80px; 
        height: 50px; 
        margin: 2px 0 0 12px;
        padding: 0;
/*	border-top:1px solid green;
	border-left:1px solid green; */
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        opacity: 0.8;
}.txt {
/*        border: 1px solid red; */
	position: relative;
        color:#c0c0c0;
        font: normal bold 12px "Times New Roman", Arial, sans serif;
	opacity: 0.9;
}
.txt a {
      color: white;
      font: normal bold 12px "Times New Roman", Arial, sans serif;
      text-decoration: none;
}

/*--------------------------------------------------------------------------------
Einblendungen
------------------------------------------------------------------------------*/
@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,700);
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);

figure.snip1477 {
/*  border: 1px solid #bfbfbf; */ 
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  overflow: hidden;
  margin-top: 120px;
  margin-left: 420px;
  min-width: 450px;
  max-width: 500px;
  width: 100%;
  color: #fbfbfb;
/*  opacity: 0.3; */
  text-align: center;
  font-size: 16px;
/*  background-color: #000000; */
}
figure.snip1477 *,
figure.snip1477 *:before,
figure.snip1477 *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.55s ease;
  transition: all 0.55s ease;
}
figure.snip1477 img {
  max-width: 100%;
  backface-visibility: hidden;
  vertical-align: top;
  opacity: 0.9;
}
figure.snip1477 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.w3-animate-fading{
    animation:fading 20s infinite;
}
@keyframes fading{
    0% {opacity:0}
   25% {opacity:1}
  100% {opacity:0}
}
w3-content {
    max-width:980px;
}
.w3-section,.w3-code {
    margin-top:16px!important;
    margin-bottom:16px!important;
}

/*--------------------------------------------------------------------------------
Spaltendefinitionen
------------------------------------------------------------------------------*/
/* ------------------------------------------ */
/* Mobile phones: */
/* ------------------------------------------ */
[class*="pos-"] {
        width: 100%;
}

@media only screen and (min-width: 600px) {
/* ------------------------------------------ */
/* Tablets: */
/* ------------------------------------------ */
        .pos-m-1 { width: 8.33%; } .pos-m-2 { width: 16.66%; } .pos-m-3 { width: 25%; } .pos-m-4 { width: 33.33%; } .pos-m-5 { width: 41.66%; } .pos-m-6 { width: 50%; }
        .pos-m-7 { width: 58.33%; } .pos-m-8 { width: 66.66%; } .pos-m-9 { width: 75%; } .pos-m-10 { width: 83.33%; } .pos-m-11 { width: 91.66%; } .pos-m-12 { width: 100%; }
        .pos-m-X { width: 25%; }
}

@media only screen and (min-width: 768px) {
/* ------------------------------------------ */
/* Others: */
/* ------------------------------------------ */ 
        .pos-1 { width: 8.33%; } .pos-2 { width: 16.66%; } .pos-3 { width: 25%; } .pos-m-4 { width: 33.33%; } .pos-5 { width: 41.66%; } .pos-6 { width: 50%; }
        .pos-7 { width: 58.33%; } .pos-8 { width: 66.66%; } .pos-9 { width: 75%; } .pos-10 { width: 83.33%; } .pos-11 { width: 91.66%; } .pos-12 { width: 100%; }
        .pos-X { width: 25%; }
}