/**
*   team.css
**/

.team h4 {
    font-family: 'Avenir LT Std 65 Medium', sans-serif;
    font-size: 1em;
    color: #000;
    line-height: 1em;
    margin-top: 0.8em;
    margin-bottom: 0.5em;
}


.team .grid {
    margin-top: 2em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/** --- Stab (cdr & pr) --- **/

.intro {
    flex: 0 1 auto;
    padding-left: 1em;
}

.stab {
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 15em auto;
    padding-top: 12em;
    margin-bottom: 1em;
    width: 20em;
}

.grid.publicrelation .stab {
    margin-top: 1em;
}

.stab .description {
    background: #fff;
    padding-left: 5px;
    padding-bottom: 5px;
    border-top: 1px solid #aaa;
}

.cdr, .pr {
    flex: 0 1 auto;
}

.publicrelation h2 {
    flex: 1 100%;
    padding-bottom: 1em;
}

span.nickname {
    color: #666;
    letter-spacing: 0.05em;
}

@media screen and (min-width: 575px) {}

@media screen and (min-width: 768px) {
    .cdr {
        flex: 0 0 20em;
        margin-right: 0.5em;
    }

    .intro {
        flex: 1;
    }

    .pr {
        flex: 0 1 20em;
        margin-right: 0.5em;
    }

    .publicrelation .intro {
        flex: 1 100%;
        padding-top: 1em;
    }
}

@media screen and (min-width: 991px) {

    .grid.publicrelation {
        justify-content: flex-start;
    }

    .grid.publicrelation .stab {
        margin-bottom: 0;
    }

    .grid.publicrelation .intro {
        padding-left: 0;
    }

}

@media screen and (min-width: 1199px) {
    .publicrelation .intro {
        flex: 1 100%;
    }
}


/** --- Piloten --- */

.crewdiamond {
    width: 20em;
    margin: 4em auto 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.turbo {
    flex: 0 1 auto;
    background-position: 0.5em 0;
    background-size: 4em;
    background-repeat: no-repeat;
    padding-bottom: 2em;
    margin-bottom: 2em;
    border-bottom: 1px solid #eee;
}

/* inlined!
.turbouno {     background-image:  url('../../images/posi-uno.png'); }
.turbodue {     background-image:  url('../../images/posi-due.png'); }
.turbotre {     background-image:  url('../../images/posi-tre.png'); }
.turboquattro { background-image:  url('../../images/posi-quattro.png'); }
.turbocinque {  background-image:  url('../../images/posi-cinque.png'); }
.turbosexi {    background-image:  url('../../images/posi-sexi.png'); }
.turbosette {   background-image:  url('../../images/posi-sette.png'); }
.turbootto {    background-image:  url('../../images/posi-otto.png'); }
.turbonove {    background-image:  url('../../images/posi-nove.png'); }*/

.turbo .picture {
    height: 10em;
    width: 100%;
    background-repeat: no-repeat;
    background-position: 6em top;
    background-size: contain;
}

div.number {
    float: left;
    width: 5em;
    text-align: center;
}

span.type {
    display: block;
    font-size: 0.9em;
    color: #333;
    text-transform:uppercase;
    margin-bottom: 0.4em;
    padding-top: 0.8em;
}

span.number {
    display: block;
    line-height: 100%;
    font-size: 2.7em;
    font-family: 'Avenir LT Std 85 Heavy', sans-serif;
    color: #333;
    text-shadow: 1px 1px 1px #666;
}

.turbo .description {
    float: left;
    width: 15em;
    padding-left: 0.5em;
    border-top: 1px solid #aaa;
}

.turbo:last-of-type {
    border: 0;
}

@media screen and (min-width: 575px) {

    .crewdiamond {
        width: 36em;
    }

    .turbo {
        flex: 2 1 auto;
    }

    .turbo .picture {
        height: 8em;
    }

    div.number {
        width: 4em;
    }

    .turbo .description {
        width: 13em;
    }

    .turbo:nth-last-child(-n+2) {
        border: 0;
    }
}

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

    .crewdiamond {
        width: 40rem;
    }

    .turbo {
        flex: 3 1 auto;
    }

    .turbo .picture {
        height: 10em;
    }

    .turbo .description {
        width: 15em;
    }
}

@media screen and (min-width: 991px) {

    .crewdiamond {
        width: calc(100% - 2em);
    }

    .turbo {
        flex: 3 1 auto;
    }

    .turbo:nth-last-child(-n+3) {
        border: 0;
    }
}

@media screen and (min-width: 1199px) {
    .crewdiamond {

        display: block;
        position: relative;
        left: -3em;
        height: 1200px;
        /* inlined!
        background-image: url('../../images/smokebg.png');
         */
        background-repeat: no-repeat;
        background-position: 23px 355px;
        margin-top: 50px;
        /* https://stackoverflow.com/questions/4280886/can-a-background-image-be-larger-than-the-div-itself */
        margin-right: -60px;
        padding-right: 60px;

    }

    /* https://stackoverflow.com/questions/22666063/how-to-fade-the-edge-of-a-div-with-just-css */
    .crewdiamond:after {
        content  : "";
        position : absolute;
        z-index  : 1;
        bottom   : 0;
        left     : 0;
        pointer-events   : none;
        background-image : linear-gradient(to bottom,
        rgba(255,255,255, 0),
        rgba(255,255,255, 1) 90%);
        width    : 100%;
        height   : 4em;
    }

    .turbouno, .turbotre, .turbocinque, .turbosette, .turbonove,
    .turbodue, .turboquattro, .turbosexi, .turbootto {
        /* inlined!
        background-image: url('../../images/pc7icon.png');
         */
        background-position: top left;
        background-size: 80px auto;
    }

    /* TODO: replace that one?? */

    .turbo {
        width: 300px;
        position: absolute;
        display: inline-block;
        border: 0;
        padding: 0;
        margin: 0;
    }

    .turbo .picture {
        height: 10em;
    }

    div.turbouno     { left: 320px;    top: 20px;  }
    div.turbodue     { left: 555px;    top: 190px; }
    div.turbotre     { left: 155px;    top: 250px; }
    div.turboquattro { left: 405px;    top: 420px; }
    div.turbocinque  { left: 0;        top: 490px; }
    div.turbosexi    { left: 790px;    top: 360px; }
    div.turbosette   { left: 250px;    top: 670px; }
    div.turbootto    { left: 650px;    top: 590px; }
    div.turbonove    { left: 500px;    top: 840px; }
}