* {
    padding: 0; margin: 0;
}
body {
    font-family: Arial;
}
img {
    width: 40%;
    padding-left: 5%;
    float: left;
    position: absolute;
    padding-top: 2em;
}
p 
{
    font-size: 1em;
}
h3
{
line-height: 1.35;    
}
#sub-container-titel h2
{
text-align: center;
font-size: 1.7em;
padding: 0 1em 0.8em 1em;

}
.abstand
{
    height: 2.2em;
    width: 100%;
}
.abstand2
{
    width: 100%;
    height: 0em;
}

/* hier ist die Navigation und Titel*/
/*MEINE  NAVIGATION*/
#titel-container
{
    text-shadow: black 0.2em 0.2em 0.125em;
    font-family: Times;
    color: #fff;
    z-index: 3;
    text-decoration: none;
    background-color: hsla(0, 0%, 30%, 0.6);
    height: 7.5em;
    width: 39%;
    left: 0%;
    top: 0%;
    padding: 1em;
    position: absolute;
    text-align: center;
    overflow: auto;
    
    
}

#main-titel
{
    font-size: 3.9em;
}
#sub-titel
{
    font-size: 1.6em;
}
header

{
    width: 100%;
    background-color: #4C4CD7;
    border-bottom: 1px solid;
    float: left;
    position: absolute;
    z-index: 100;

}

    .cd-project-info
    {
    min-height: 1200px;
    }
    .text_content
    {

        padding: 6% 3% 0% 3%;
        margin-left: 48%;
        width: 45%;
        display: block;
        float: right;
        position: absolute;
    }

    .container_left
    {

        margin: 33% 0 0 5%; 
        border: 1px;
        border-color: #4C4CD7;
        border: thin;
        border-style: solid;
        width: 35%;
        text-align: center;
        float: left;
        position: absolute;
    }
        .container_left h5
    {
       font-size: 1.3em;
    }
.impressum img
{
    height: 45px;
    width: 45px;
    right: 12%;
    top: 1em;
}
.impressum
{
    text-align: center;
     margin: 2em 10% 5% 10%;
     background-color: hsla(0, 0%, 30%, 0.6);
    
    
}
.impressum p
{
 padding: 0em 10% 0 10%;
 


}
/*HIER BEGINNT DER SLIDER STATSEITE*/
.cyle-slideshow
{
    width: 100%;
    display: block;
    position: relative;


}
.cycle-prev, .cycle-next
{
    font-size: 300%;
    color: #fff;
    display: block;
    position: absolute;
    cursor: pointer;
    z-index: 99999;
    cursor: pointer;
    padding-top: 12%;
    text-align: center;



}
.cycle-prev { left: 10%;}
.cycle-next { right: 65%;}
.cycle-pager{
    width: 100%;
    position: absolute;
    display: block;
    z-index: 9999;
    cursor: pointer;
    padding-top: 21%;
    margin-left: -27%;
    text-align: center;
}
.cycle-pager span
{
width: 20px;
height: 20px;
display: inline-block;
border: 1px solid #fff;
border-radius: 50%;
margin: 0 1em 0 0;
text-indent: 100%;
white-space: nowrap;

}

.cycle-pager .cycle-pager-active {
    background-color: #fff;
}
@media only screen and (max-width: 45em)
  {
img {
    width: 100%;
    padding-left: 0;
    float: none;
    }
    .container_left 
    {
        margin: 0 0 0 0;
        position: static;
        float: none;
        width: 100%;
    }
    .text_content
    {
        position: static;
        float: none;
        margin: 5%;
        width: 90%;
    }
     .cycle-prev, .cycle-next
    {
    margin-top: -53%;
    }
    .cycle-prev { left: 10%;}
    .cycle-next { right: 10%;}
    .cycle-pager{
    top: 56.5%;
    margin-left: 0%;
    }
}
@media only screen and (max-width: 1024px)
  {
   #titel-container
{
    height: 2em;
    width: 40%;
    left: 33%;
    top: 1em;
    padding: 0.1em;
}
#main-titel
{
    font-size: 1.6em;
}
#sub-titel
{
    display: none;
} 
  }
  @media only screen and (max-width: 500px)
  {
   #titel-container
{
    width: 100%;
    left: 0%;
    top: 1em;
    padding: 0.1em;
}
  }