*{
    margin:0;
    padding:0;
}



html {
    background-color:white;
}

a:link{
    text-decoration: none;
    color:#002060;
}
a:visited {
 text-decoration: none;
    color:#002060;
}

.menu_top {
    background-color:#d1d5e1;
    color:#002060;
    position:fixed;
    height: 50px;
    min-height:50px;
    width: 100%;
    box-shadow: 0px 0px 4px 2px grey;
    float:left;
    top:0px;
    z-index:50;
    
    
}


#cagentic {
    position:absolute;
    font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    margin-left:1%;
    text-decoration: none;
    color:#002060;
    height:80%;
    top:50%;
    transform:translate(0%,-50%);
    width:10%;
    text-align: center;
    font-size-adjust: auto;
    
    
    
}


.menu_top p {
    float:right;
    position:relative;
    box-sizing: border-box;
    font-size-adjust: auto;
    font-size:120%;
    font-weight:bold;
    font-family: Railway-Light, sans-serif;
    width:auto;
    margin-right:2%;
    transform:translate(0%,70%);

}

.menu_top form {
    position:relative;
    width:2%;
    height:50%;
    float:right;
    margin-right:2%;
    transform:translate(0%,50%);
}

#suche {
  width:2.5em;
  transition: width 0.5s ease-in-out;
  transition: translate 0.5s ease-in-out;
  border: 2px solid grey;
  border-radius: 0.5em;
  font-size: 130%;
  font-weight:bold;
  font-family: Railway-Light, sans-serif;
}

.menu_top form:focus {
    
}
#suche:focus {
    width:10em;
    transform:translate(-7.5em,0);
}


.topmenu_mobile {
    display:none;
}
#erster_banner{
    position:absolute;
    float:both;
    margin-left:0px;
    margin-right:0px;
    height:15%;
    z-index: 10;
    background-color: white;
    width:100%;
    display:flex;
    align-items:center;
    animation: erster_banner 5s;
    top:50px;
    
}

.erscheinende_buchstaben {
    margin-left:auto;
    margin-right:auto;
    color:#002060;
    height:auto;
    width:auto;
    font-family: Railway-Light, sans-serif;
    font-weight:bold;
    
    padding-left:0%;
    padding-right:0%;
    font-size:100%;
    
}

#wir {
    float:left;
    animation: wir 0.6s;
}
#führen {
    float:left;
    animation: fuehren 1.2s;
}
#zusammen {
    float:left;
    animation: zusammen 2.2s;
}

#sap_beratung {
    animation: sap_beratung 2.8s;
}

@keyframes wir {
    0% {
        opacity: 0;
    }
    70% {
        opacity: 0;
    }
    100% {
        opacity:1;
    }
}
@keyframes fuehren {
    0% {
        opacity: 0;
    }
    75% {
        opacity: 0;
    }
    100% {
        opacity:1;
    }
}
@keyframes zusammen {
    0% {
        opacity: 0;
    }
    80% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
@keyframes sap_beratung {
    0% {
        opacity: 0;
    }
    88%{
        opacity: 0;
    }
    100% {
        opacity:1;
    }
}

@keyframes erster_banner{
    0%{
        height:100%;
        font-size:200%;
    
    }
    90% {
        height:100%;
        font-size:200%;
        
    }
    100% {
        height:15%;
        font-size:100%;
        
        
    }
}

.zweiter_banner {
    position:absolute;
    float:both;
    margin-left:0px;
    margin-right:0px;
    z-index:5;
    top:20%;
    width:100%;
    height:65%;
    background-image: url(/Cagentic/Justitia.jpeg);
    background-size:100%;
    background-repeat:no-repeat;
    
}


.zweiter_banner h3 {
    margin-top:5%;
    margin-left: 1%;
    font-family: Railway-Light, sans-serif;
    color:white;
    font-size:200%;
    z-index:20;
    width:auto;
}

.zweiter_banner a {
    font-family: Railway-Light, sans-serif;
    font-size:200%;
    color:#002060;
    background-color:#d1d5e1;
    font-weight: normal;
    padding-left:0.75%;
    padding-top:0.25%;
    padding-bottom: 0.25%;
    padding-right:2%;
    margin-left:0%;
    width:auto;
}
.zweiter_banner h4 {
    margin-top:10%;
}

.zweiter_banner h2 {
    display:none;
}

#dritter_banner {
    position:absolute;
    float:both;
    top:85%;
    height:85%;
    width:100%;
    background-color:white;
   
}

#dritter_banner h1{
    margin-top:12%;
    text-align:center;
    font-family: Railway-Light, sans-serif;
    color:#002060;
    font-weight: normal;
    font-size:200%;
    
}

#dritter_banner h3{
    margin-top:3%;
    text-align:center;
    font-family: Railway-Light, sans-serif;
    color:#002060;
    font-weight:normal;
    margin-bottom:4%;
    font-size:150%;
}

#dritter_banner p{
    font-family: Railway-Light, sans-serif;
    text-align: justify;
    hyphens:auto;
    padding-left:10%;
    padding-right:10%;
    font-size:150%;
    font-weight: lighter;
}

#vierter_banner {
    position:absolute;
    float:both;
    top:177%;
    height:70%;
    width:100%;
    background-color:#F2F2F2;
}

#Leistungsteil {
    position:relative;
    float:left;
    width:20%;
    height: 70%;
    margin-top:4%;
    margin-left:20%;
    

}

#Leistungsteil img{
    width:80%;
    margin-bottom: 4%;
}

#Leistungsteil h4 {
    font-family: Railway-Light, sans-serif;
    color:#002060;
    margin-bottom:2%;
}

#Leistungsteil p{
   font-family: Railway-Light, sans-serif;
    width:70%;
    margin-bottom:10%;

}

#button_leistung {
    box-sizing: content-box;
    position:relative;
    border-color:#002060;
    border-style:solid;
    border-width: thin;
    border-radius:0.5em;
    padding:1.5%;
    width:auto;
    font-family: Railway-Light, sans-serif;
     color:#002060;
    margin-bottom:10%;
}

#button_leistung:hover {
    background-color: #002060;
    color:white;
}

#vierter_banner h1{
    margin-top:3%;
    text-align:center;
    font-family: Railway-Light, sans-serif;
    color:#002060;
    font-weight: normal;
    font-size:200%;
}

.fuenfter_banner {
    position:absolute;
    float:both;
    top:245%;
    height:65%;
    width:100%;
    background-color:white;
}
.fuenfter_banner h1{
    margin-top:3%;
    text-align:center;
    font-family: Railway-Light, sans-serif;
    color:#002060;
    font-weight: normal;
    font-size:200%;
}

#sechster_banner {
    position:absolute;
    float:both;
    top:320%;
    height:60%;
    width:100%;
    background-color: #002060;
    padding-bottom:5%;
}

#sechster_banner h1{
    margin-top:3%;
    text-align:center;
    font-family: Railway-Light, sans-serif;
    color:white;
    font-weight: normal;
    font-size:200%;
}

#mitglied {
    position:relative;
    float:left;
    margin-left:10%;
    margin-top:3%;
    width:13%;
   

}

#mitglied img{
    position:relative;
    opacity: 100%;
    width:100%;
    border-style:solid;
    border-color:white;
    
    

}


#mitglied:hover {
    width:16%;
    margin-right:2%;
    margin-left:2%;
    left:4%;
    border-style:solid;
    border-color:white;
    margin-top:1%;
}

#mitglied:hover img{
    border-style:none;
}
#mitglied p{
    position:absolute;
    float:left;
    bottom:0%;
    width:100%;
    margin-bottom:0%;
    opacity:0%;
    text-align: center;
    font-family: Railway-Light, sans-serif;
    color:white;
    font-size:80%;
    background-color: #424242;
    padding-bottom: 7%;
    height:35%;

}
#mitglied:hover p{
    opacity:100%;
}

#mitglied a{
    position:relative;
    float:left;
    height:10%;
    margin-top:20%;
    margin-left:3%;
    opacity:0%;
    bottom:100%;
}
#mitglied:hover a{
    opacity:100%;
}

.siebter_banner{
    
    position:absolute;
    float:both;
    top:400%;
    height:40%;
    width:100%;
    background-color: white;

}

#kontakt_zum_team {
    float:left;
    width:50%;
    height:70%;
    margin-bottom:5%;
    margin-left:25%;
    
   
}

#kontakt_zum_team h4{
    font-family: Railway-Light, sans-serif;
    font-weight: normal;
    color:#002060;
    margin-top:6%;
    margin-bottom:4%;
    text-align:center;
    font-size:200%;
    width:100%;
}

#kontakt_zum_team p{
    font-family: Railway-Light, sans-serif;
    font-weight:lighter;
    text-align: center;
    font-size:150%;
    margin-bottom:10%;
    width:100%;
}



#button_kontakt {
    box-sizing: content-box;
    position:relative;
    border-color:#002060;
    border-style:solid;
    border-width: thin;
    border-radius:0.5em;
    padding:1.5%;
    width:10%;
    font-family: Railway-Light, sans-serif;
    font-size: 150%;
    color:#002060;
    bottom:5%;
    text-align: center;
   margin-left:42.5%;
    margin-right:45%;
}



#button_kontakt:hover {
    background-color: #002060;
    color:white;
}

.footer {
    position:fixed;
    min-height:20px;
    bottom:0px;
    width:100%;
    background-color: white;
    z-index:30;
}

.menu_bottom {
    display:flex;
    align-items: center;
    justify-content: center;
    margin-left:auto;
    margin-right:auto;
    border-top-color:#002060 ;
    border-top-style:solid;
    border-top-width: thin;
    width:55%;
    height: 100%;
    padding-top:0.2%;
}

.menu_bottom p{
    
    position:relative;
    float:right;
    margin-left:3%;
    margin-right:3%;
    width:auto;
    color:#002060;
    font-family: Railway-Light, sans-serif;
    
    
}


.datenschutz{
    position:absolute;
    top:10%;
    font-family: Railway-Light, sans-serif;
    margin-left:10%;
    margin-right:10%;
    margin-bottom:10%;
}

.datenschutz h1,h2,h3 {
    color:#002060;
}

.datenschutz ol,ul {
    margin-left:6%;
}

.impressum{
    position:absolute;
    top:10%;
    font-family: Railway-Light, sans-serif;
    margin-left:10%;
    margin-right:10%;
    margin-bottom:10%;
}

.impressum h1,h2,h3 {
    color:#002060;
}

.kontakt {
    position:absolute;
    top: 15%;
    font-family: Railway-Light, sans-serif;
    margin-left:30%;
    margin-right:10%;
    margin-bottom:10%;
}

.kontakt h1{
    color:#002060;
    margin-bottom:8%;
    font-size:250%;
}

.kontakt p{
     font-size: 120%;
    font-style: oblique;
    color:#002060;
}

.inputc {
    border-radius:0.5em;
    margin-left:2%;
    padding:0.5%;
    width:100%;
    font-size:120%;
    
}
.kontakt table{
    width:100%;
  
}
.kontakt tr{
    width:100%;
    
}

.kontakt td{
    width:100%;
   
    padding-top:1%;
    padding-bottom:1%;
}
.button_kontakt {
    border-radius:0.5em;
    margin-left:2%;
    padding:2%;
    background-color:#d1d5e1;
    font-size:100%;
}

#leistungen_erster_banner_pc {
    position:absolute;
    top:50px;
    float:both;
    margin-left:0px; 
    margin-right:0px;
    height:60%;
    width:100%;
    background-image:url(/Cagentic/PC_gross.jpeg);
    background-size:100%;
    background-repeat: no-repeat;
    background-blend-mode:luminosity;
    text-align:center;
}

#leistungen_erster_banner_pc h1{
    color:#002060;
    font-size:400%;
    font-family: Railway-Light, sans-serif;
    margin-top:10%;
    font-weight:normal;
}

#leistungen_erster_banner_pc h3{
    color:#002060;
    font-family: Railway-Light, sans-serif;
    font-weight:lighter;
    margin-top:4%;
    font-size:250%;
}

#leistungen_zweiter_banner {
    position:absolute;
    top:70%;
    width:100%;
    margin-left:0px;
    margin-right: 0px;
    float:both;
    
}

#leistungen_zweiter_banner p{
    font-family: Railway-Light, sans-serif;
    font-weight:lighter;
    margin-top:5%;
    margin-left:5%;
    margin-right:5%;
    font-size:150%;
    text-align:justify;
}

#leistungen_zweiter_banner h3{
    font-family: Railway-Light, sans-serif;
    font-weight:normal;
    margin-top:3%;
    margin-bottom:2%;
    margin-left:5%;
    margin-right:5%;
    color:#002060;
    font-size:200%;
}

#leistungen_zweiter_banner ul{
    font-family: Railway-Light, sans-serif;
    font-weight:lighter;
    margin-left:7%;
    margin-right:5%;
    font-size:150%;
    margin-bottom:20%;
    line-height: 200%;
    list-style-type: none;
}

#leistungen_zweiter_banner li:before {
    content: "\2713" " " " ";
    color:#002060;
}

#leistungen_erster_banner_ac {
    position:absolute;
    top:50px;
    float:both;
    margin-left:0px;
    margin-right:0px;
    height:60%;
    width:100%;
    background-image:url(/Cagentic/AC_gross.jpeg);
    background-size:100%;
    background-repeat: no-repeat;
    background-blend-mode:luminosity;
    text-align:center;
}

#leistungen_erster_banner_ac h1{
    color:#002060;
    font-size:400%;
    font-family: Railway-Light, sans-serif;
    margin-top:10%;
    font-weight:normal;
}

#leistungen_erster_banner_ac h3{
    color:#002060;
    font-family: Railway-Light, sans-serif;
    font-weight:lighter;
    margin-top:4%;
    font-size:250%;
}

#leistungen_erster_banner_risiko {
    position:absolute;
    top:50px;
    float:both;
    margin-left:0px;
    margin-right:0px;
    height:60%;
    width:100%;
    background-image:url(/Cagentic/risiko_gross.jpeg);
    background-size:100%;
    background-repeat: no-repeat;
    background-blend-mode:luminosity;
    text-align:center;
}

#leistungen_erster_banner_risiko h1{
    color:#002060;
    font-size:400%;
    font-family: Railway-Light, sans-serif;
    margin-top:10%;
    font-weight:normal;
}

#leistungen_erster_banner_risiko h3{
    color:#002060;
    font-family: Railway-Light, sans-serif;
    font-weight:lighter;
    margin-top:4%;
    font-size:250%;
}

#leistungen_erster_banner_audit {
    position:absolute;
    top:50px;
    float:both;
    margin-left:0px;
    margin-right:0px;
    height:60%;
    width:100%;
    background-image:url(/Cagentic/lupe_gross.jpeg);
    background-size:100%;
    background-repeat: no-repeat;
    background-blend-mode:luminosity;
    text-align:center;
}

#leistungen_erster_banner_audit h1{
    color:#002060;
    font-size:400%;
    font-family: Railway-Light, sans-serif;
    margin-top:10%;
    font-weight:normal;
}

#leistungen_erster_banner_audit h3{
    color:#002060;
    font-family: Railway-Light, sans-serif;
    font-weight:lighter;
    margin-top:4%;
    font-size:250%;
}