/* STYLESHEET FOR 48hBÜRO WEBSEITE */

*{
    font-family: 'Cern';
    letter-spacing: 0.8;
    line-height: 1.6;
    font-weight: 100;
    font-size: 15px;
}

/* GENERAL STYLING */

.full-height{height:100vh;}
.bg-image{
    background-size:cover;
    background-position: center;
    background-attachment:scroll;
    background-repeat: no-repeat;
}

.z-niedrig{z-index: 1;}
.z-mittel{z-index: 100;}
.z-hoch{z-index: 1000;}

.trans-90{transform: rotate(90deg)}
.trans-270{transform: rotate(270deg)}

/* TYPOGRAPHY */

h1{
    font-size: 120px;
    line-height: 110px;
}
p{font-size: 15px;}
.outline{
    font-weight: 800;
    color:rgba(0,0,0,0.0);
    -webkit-text-stroke-width: 1.5px;
    -webkit-text-stroke-color: white;
}
.text-white{color: white;}
.italic{font-style: italic;}

/* COLORS */

.pink{background-color: #F589B2}
.orange{background-color: #FF6C00}

/* ELEMENTS */

/* NAVBAR */

#topbar{transition:.3s;}
#bottombar{
    bottom:20px;
    transition:.3s;
}

/* BUTTONS */

.btn{
    background-color: rgba(0,0,0,0);
    border: .75px solid white;
    border-radius: 50px;
    padding: 7px 30px 5px 30px;
    font-weight: 100;
    transition: .3s;
}

.orange-btn:hover{
    background-color: #FF6C00;
    border: .75px solid #FF6C00;   
}

.orange-btn-active{
    background-color: rgba(0,0,0,0);
    border: .75px solid #FF6C00;
    border-radius: 50px;
    padding: 7px 30px 5px 30px;
    font-weight: 100;
    color: #FF6C00;  
}

.orange-btn-active:hover{
    background-color: rgba(0,0,0,0);
    border: .75px solid #FF6C00;
    border-radius: 50px;
    padding: 7px 30px 5px 30px;
    font-weight: 100;
    color: #FF6C00;
    cursor: default;
}

.rosa-btn:hover{
    background-color: #F589B2;
    border: .75px solid #F589B2;   
}

.rosa-btn-active{
    background-color: rgba(0,0,0,0);
    border: .75px solid #F589B2;
    border-radius: 50px;
    padding: 7px 30px 5px 30px;
    font-weight: 100;
    color: #F589B2;  
}

.rosa-btn-active:hover{
    background-color: rgba(0,0,0,0);
    border: .75px solid #F589B2;
    border-radius: 50px;
    padding: 7px 30px 5px 30px;
    font-weight: 100;
    color: #F589B2;
    cursor: default;
}

/* ANIMATION KEYFRAME */

@-webkit-keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} }
@-moz-keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} }
@keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} }

@-webkit-keyframes fadeInLeft { from {opacity: 0; transform: translate3d(-100%, 0, 0);} to {opacity: 1; transform: transform:translate3d(0, 0, 0);} }
@-moz-keyframes fadeInLeft { from {opacity: 0; transform: translate3d(-100%, 0, 0);} to {opacity: 1; transform: transform:translate3d(0, 0, 0);} }
@keyframes fadeInLeft { from {opacity: 0; transform: translate3d(-100%, 0, 0);} to {opacity: 1; transform:translate3d(0, 0, 0);} }

@-webkit-keyframes fadeInRight { from {opacity: 0; transform: translate3d(100%, 0, 0);} to {opacity: 1; transform: transform:translate3d(0, 0, 0);} }
@-moz-keyframes fadeInRight { from {opacity: 0; transform: translate3d(100%, 0, 0);} to {opacity: 1; transform: transform:translate3d(0, 0, 0);} }
@keyframes fadeInRight { from {opacity: 0; transform: translate3d(100%, 0, 0);} to {opacity: 1; transform:translate3d(0, 0, 0);} }


.fade-in{
    opacity:0;
    -webkit-animation:fadeIn ease-out 1;
    -moz-animation:fadeIn ease-out 1;
    animation:fadeIn ease-out 1;
    
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
}

.fade-in{
    -webkit-animation-delay:0.1s;
    -moz-animation-delay:0.1s;
    animation-delay: 0.1s;
}

.fade-inleft{
    opacity:0;
    -webkit-animation:fadeInLeft ease 1;
    -moz-animation:fadeInLeft ease 1;
    animation:fadeInLeft ease 1;
    
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
}

.fade-inleft{
    -webkit-animation-delay:0.2s;
    -moz-animation-delay:0.2s;
    animation-delay: 0.2s;
}

.fade-inright{
    opacity:0;
    -webkit-animation:fadeInRight ease 1;
    -moz-animation:fadeInRight ease 1;
    animation:fadeInRight ease 1;
    
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
}

.fade-inright{
    -webkit-animation-delay:0.2s;
    -moz-animation-delay:0.2s;
    animation-delay: 0.2s;
}