/********************/
/*** Reset css ***/
/********************/
html{
    
    body {
        border: 0;
        line-height: 1.5;
        margin: 0;
        padding: 0;
    }    
    
    div, span, object, iframe, img, table, caption, thead, tbody,  tfoot, tr, tr, td, article, aside, canvas, details, figure, hgroup, menu,
    nav, footer, header, section, summary, mark, audio, video {
      border: 0;
      margin: 0;
      padding: 0;
    }

    h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code,
    del, dfn, em, ins, q, samp, small, strong, sub, sup, b, i, hr, dl, dt, dd,
    ol, ul, li, fieldset, legend, label {
      border: 0;
      font-size: 100%;
      vertical-align: baseline;
      margin: 0;
      padding: 0;
    }

    article, aside, canvas, figure, figure img, figcaption, hgroup,
    footer, header, nav, section, audio, video {
        display: block;
    }

    table {
      border-collapse: separate;
      border-spacing: 0;
      caption, th, td {
        text-align: left;
        vertical-align: middle;
      }
    }

    a, img {
      border: 0;
        text-decoration: none;
    }

    :focus {
      outline: 0;
    }    
    
}



body{
	font-family: Source Sans Pro;
}

@smc_gruen_transparent: rgba(167,200,25,0.9);

.textshadow {
    text-shadow: 1px 1px 1.5px rgba(0,0,0,0.5);
}

.bold{font-weight: 500}




.four-boxes{ 
    width: 33vw;
    height: 33vw;
    @media @desktopUltraWide{
        transform: scale(0.8);
    }
    @media @mobile{
        width: 90vw;
        height: 90vw;
    }
    color: white;
    margin: 0 auto;
    > a{
        cursor: default;
        text-decoration: none;
        width: 49%;
        height: 49%;
        color: white;
        background-color: @smc_gruen_transparent;
        float: left;
        text-align: center;
        font-size: 2em;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0.5%;
        box-sizing: border-box;
        >div{
            height: 60%;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            position: relative;
        }
        h4{
             font-size: 2rem;
            .textshadow;
            font-weight: 600;
            height: 30%;
            @media @mobile{
                font-size: 1.5rem;
            }
        }
        p{
            font-weight: 400;
            font-size: 1.3rem;
            padding: 0 0.5rem;
            height: 20%;
        }                
        .img{
            background-color: transparent;
            background-repeat: no-repeat;            
            background-position: center;
            width: 100%;
            height: 100%;
            &.start{
                background-image: url("img/start_1.svg");
                background-size: auto 60%;
            }
            &.transform{
                background-image: url("img/rescue_1.svg");
                background-size: auto 80%;
            }
            &.boost{
                background-image: url("img/boost_1.svg");
                background-size: auto 80%;
            }
            &.rescue2{
                background-image: url("img/transform_1.svg"); 
                background-size: auto 85%;
                position: absolute;
                top: 0.3vw;
                //fur intro height: 70%; 100% rescue1 - 30% h4
                height: 50%; ///* 100% rescue - 30% h4 - 20% p* /
            }

        } 
    }  

}        


.logo{
    width: auto;
    height: 3.5rem;
    align-self: flex-end;
    margin: 10px;
    @media @mobile{
        height: 2.5rem;
    }
    img{
            height: 100%;
    }
}

.content{
    display: flex;
}

#section-start{
    display: flex;
    flex-direction: column;
    height: 100vh;    
    .content{    
        display: flex;
        height: calc(100vh - 8rem);
        background-position: 0% 70%;
        background-size: cover;
        background-image: url("img/cologne-3771209_1920.jpg");          
        @media @mobile{
            flex-direction: column;
        }

        .slogan{
            font-weight: 100;
            height: auto;
            margin-left: 3vw; 
            color: white;
            text-align: left;
            @media @mobile{
                text-align: center;
            }
            align-self: center;
            white-space: nowrap;
            font-size: 6.7vw;
            line-height: 1.2; 
        }                

        .slogan-box{
            background-image: url(img/slogan-box-r.svg);
            @media @mobile{
                background-color: rgba(161,35,43,0.9);
                background-image: none;
                height: 25%;
                width: 100%;
                justify-content: center;
            }
            height: 100%;
            background-repeat: no-repeat;
            background-size: auto 100%;
            width: 50vw;
            background-position: right;
            display: flex;
            img{
                position: absolute;
                right: 5vh;
                top: 4.5vh;
                height: 27%;
            }
        }

        .fadeWrapper{
            width: 50vw;
            height: 100%;
            position: relative;
            -js-display: flex;
            display: flex;
            align-items: center;
            justify-content: center;
            clear:both;
            @media @mobile{
                width: 100vw;
            }
            >div{
                top: 0;   
                bottom: 0;
                left: 0;
                right: 0;
                &#slide2{
                    left: 0;
                    right: auto;
                }
            }
        
            .four-boxes{ 
                > a{
                    >div{
                        height: 50%;
                    }                
                    .img{
                        &.start{
                            background-size: auto 75%;
                        }
                        &.transform{
                            background-size: auto 80%;
                        }
                        &.boost{
                            background-size: auto 80%;
                        }
                        &.rescue, &.rescue2{
                            background-size: auto 80%;
                        }
                        &.rescue2{
                            background-size: auto 85%;
                            height: 70%;
                            top: 0vw;
                        }

                    } 
                }  

            }     
            
        }

        .placeholder{
            width: 3%;
        }
     }
}    

#section-impressum{
    display: flex;
    flex-direction: column;
    div.container{
        h1{font-size: 3rem;}
        width: 60%;
        margin: auto;
    }
}


.footer{
    white-space: nowrap;
    float: left;
    position: fixed;
    bottom: 0;
    left: 0;
    height: 4rem;
    width: 100vw;
    background-color: white;
    display: flex;
    padding-left: 2vh;
    font-size: 1.2rem;
    @media @mobile{ 
        font-size: 0.6rem;
        padding: 0;
    }
    ul{
        align-self: center;
        margin-top: 10px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;        
    }
    
    li { 
        display: inline-block; 
        margin: 5px;
        color: grey;
        &:not(:first-of-type) { 
            border-left:  1px solid #A1C519 }
        &:hover a{
            color: #A1C519;
        }
        &:nth-child(2){
            padding-left: 10px;
        }

        a{
            color: grey;
            margin-left: 10px;
        }
    }
}





/**********************************************/
/************* Media Queries ******************/
/**********************************************/

@HD:           ~"only screen and (min-width: 2399px) and (-webkit-min-device-pixel-ratio: 2)";
@widescreenL:   ~"only screen and (min-width: 2399px)";
@widescreen:    ~"only screen and (min-width: 1800px) and (max-width: 2399px) and (min-height: 1000px)";
@widescreen_wide:    ~"only screen and (min-width: 1800px) and (max-height: 999px)";
@desktopUltraWide:     ~"only screen and (min-aspect-ratio: 9/4)";
@desktop:       ~"only screen and (min-width: 1280px) and (max-width: 1799px)";
@mobile:       ~"only screen and (max-width : 880px)";