/*------------------------------------------------------------------------------------------Overall Side Content-------------------------------------------------------------------------------*/

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



    body, html {
        font-size: 0.8em;
    }

    .para {
        width: 90vw !important;
    }
    #parallax_00 {
        grid-area: 1/1/1/3 !important;
        background-position-x: 0em;
    }
    #parallax_01 {
        grid-area: 2/1/2/3 !important;
    }
    #parallax_02 {
        grid-area: 3/1/3/3 !important;
    }
    
    .member-container {   
        width: 34vw !important;
    }

    
}
@media only screen and (max-width : 600px) {
  
    #parallax_00 {
      
        background-position-x: -29em;
    }
  

    .member-container {
        width: 35vh !important;

    }
    
}




body, html {
    font-family: 'Oswald', sans-serif;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    scroll-behavior: smooth;

}

.body_animated{
    animation:FadeOut;
    animation-duration:2s;
}


@keyframes FadeOut {
    from {
        opacity:1;
    }

    to {
        opacity:0;
       
    }
}


@keyframes FadeIn {
    from {
        opacity: 0;
    
    }

    to {
        opacity: 1;
   
    }
}

body p{
    font-size:16px;
}

.p_ora{
    color:#ff9900;
}

body{

  animation:FadeIn;
  animation-duration:2s ;
}



@font-face {
    font-family: "t1";
    src: url(../Fonts/28Days.ttf)format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: Arimo-Bold,sans-serif;
    src: url(../Fonts/Arimo-Bold.ttf)format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Arimo-Regular";
    src: url(../Fonts/Arimo-Regular.ttf)format('truetype');
    font-weight: normal;
    font-style: normal;
}



/*------------------------------------------------------------------------------------------Side Layout-Grids----------------------------------------------------------------------------------------*/
.side-layout {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 100%;
    grid-template-areas: "title" "header" "content" "footer";
}


.content {
    grid-area: content;
    background-color: #404040;
    color: white;
    padding: 2vw 10vw 5vw 19vw;
}

.content a{
    color: white;
}

.content p{
  word-break:break-all;
}

.footer {
    grid-area: footer;
    background-color: #666;
    

}




/*---------------------------------------------------------------------------------------Footer--------------------------------------------------------------------------------------------*/
.footer_wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.footer_header {
    margin: 4em auto 4em auto;
    color: white;
}

.footer_header h1{
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 2px;
}

.impress{
    height:50px;
    background-color:white;
}


.footer_impress{
    display: inline-block;
    margin: auto;
}







/*-----------------------------Social Media Styling---------------------------------*/
.fa-facebook {
    color: white;
   
}

.fa-xing-square {
    color: white;
}


/*-----------------------------Side Navbar Navigation-------------------------------*/

.firmen-logo img {
    width: 4.8rem;
    display: block;
    margin: auto;
    padding-top: .3rem;
}

.menu-toggle {
    background: #f90;
    position: absolute;
    top: 0;
    cursor: pointer;
    width: 3rem;
    height: 3rem;
    left:14rem;
}

.sidenav {
    height: 100%;
    width: 14rem;
    position: fixed;
    z-index: 3;
    top: 0;
    left: -14rem;
    background-color: rgba(42, 42, 42, .9);
    transition: 0.8s;
    box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5);
}

.sidenav a {
    padding: 0.5rem 0.5rem 0.5rem 2rem;
    text-decoration: none;
    font-size: 1.562rem;
    color: #818181;
    display: block;
    transition: 0.5s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

.hamburger,
.hamburger:before,
.hamburger:after {
    content: '';
    display: block;
    background-color: white;
    height: 0.1875rem;
    width: 1.5rem;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    transition: .5s;
}

.hamburger:before{
    transform: translateY(-0.4em);
}

.hamburger:after{
    transform: translateY(0.4em);
}

.menu-toggle.active .hamburger{
    background:rgba(0,0,0,0);
}

.menu-toggle.active .hamburger:before {
    transform: rotate(45deg);
}

.menu-toggle.active .hamburger:after {
    transform: rotate(-45deg);

}



.firmen-logo {
    width: 100%;
    background-color: white;
    height: 3rem;
    margin-bottom: 3rem;
}