/*
color:
red :#AB0803

*/

@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html {
    scroll-behavior: smooth;
  }

body{
    font-family: 'Albert Sans', sans-serif;
    padding:0;
    background:#F6F6F6;
}

.menuBar{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    text-align:center;
    background:rgba(255,255,255,0.8);
    backdrop-filter: blur( 15px );
    padding-bottom:1em;
}

.logo{
    width:26%;
    height:auto;
    margin:1em 37% 1em 37%;
}

/**Menu****/

nav{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

nav div{
    float:left;
    background:#AB0803;
    -webkit-box-shadow: 2px 5px 15px 5px rgba(181,181,181,0.89); 
    box-shadow: 2px 5px 15px 5px rgba(181,181,181,0.89);
    border-radius: 1em;
    margin: 0 auto;
    padding: 0.5em;
}
nav a {
    color:white;
    
    padding:0.5em 1em 0.5em 1em;
    
    text-decoration:none;
    font-size:1.3em;
    
}



/**Menu END****/


.section{
   width:50%;
   margin-left:25%;
    background:white;
    padding:1em;
}

.section a{
    color:#AB0803;
}

.section svg{
    width:100%;
    height:auto;
}

.sectionInner{
    display: flex;
    align-items: center;
    justify-content: center;
}

.bg_cont{
    float:left;
    width:100%;
    margin-left:0;
    background:url(../img/kanzlei_oz.jpg);
    background-size: cover;
    margin:2em 0 2em 0;
}

#section-one{
    webkit-box-shadow: 4px 16px 42px 0px rgba(0,0,0,0.66);
-moz-box-shadow: 4px 16px 42px 0px rgba(0,0,0,0.66);
box-shadow: 4px 16px 42px 0px rgba(0,0,0,0.66);
border-radius:0 0 0.25em 0.25em;
}

#section-two{
    min-height:75vh;
    background:none;
}

.portrait{
    width:100%;
    height:auto;
}

.contBox{
    display:flex;
    
    align-items: center;
    justify-content: center;
    
}

.colum{
    float:left;
    width:100%;
}

.leftSide{
    width:33%;
}

.rightSide{
    width:67%;
    padding-left:2%;
}

.tileBox{
    width:100%;
}

.tile{
    float:left;
    width:31%;
    margin:1em 5% 1em 5%;
    padding:1em;
    font-size:1.25em;
    border:2px solid #AB0803;
    border-radius:0.5em;
    background:white;
    -webkit-box-shadow: 2px 5px 15px 5px rgba(181,181,181,0.89); 
    box-shadow: 2px 5px 15px 5px rgba(181,181,181,0.89);

}

#section-three{
    background:none;
    text-align:center;
    padding:2em 0 2em 0;
    
}
.footer{
    float:left;
    width:100%;
    border-top:2px solid #AB0803;
}

@media only screen and (min-width: 1025px) and (max-width: 1440px) {
    .section{
        width:75%;
        margin-left:12.5%;
    }
}

@media only screen and (min-width: 900px) and (max-width: 1024px) {
    .section{
        width:100%;
        margin-left:0%;
    }
}

@media only screen and (max-width: 899px) {

    .logo{
        width: 50%;
        height: auto;
        margin: 1em 25% 1em 25%;
    }


    .section{
        width:98%;
        margin-left:1%;
    }
    .menuBar{
        padding:1em;
    }
    .menuBar nav{
        width:80%;
        margin:10%;
    }
    .contBox{
        display: block;
        float:left;
    }
    .leftSide, .rightSide{
        float:left;
        width:100%;
    }

    .tile{
        width:75%;
    }

}