@import '../functions.less';
@import '../../../../files/config/colors.less';


.drs-team-01 {
    * { .fx(); }
    position: relative;
    overflow: hidden;
    .equipe {
        .area {
            .grid(60px auto 1fr; 20px);
            font-size: 1.3em;
            color: @fundoTopo1;
            hr {
                border: none;
                border-top: 1px solid #EEE;
                border-bottom: 1px solid @fundoTopo1;
            }
        }
        .grid {
            .grid(1fr 1fr 1fr; 2%; stretch);
            padding: 30px 0 60px 0;
            &:last-child {
                padding-bottom: 20px;
            }
            &:not(.grid-2){
                .pessoa{
                    .grid(140px 1fr; 10px 25px);
                    grid-template-areas: "img lin" "inf inf";
                    img {
                        width: 100%;
                    }
                    .links {
                        .grid(1fr; 2px);
                    } 
                }
            }
            .pessoa {
                .card(20px);
                img {
                    grid-area: img;
                    display: block;
                    margin-bottom: 10px;
                    border-radius: 5px;
                }
                .links {
                    grid-area: lin;
                }
                .info {
                    grid-area: inf;
                }
                .nome {
                    font-weight: bold;
                    font-size: 1.05em;
                }
                span {
                    font-style: italic;
                    font-size: .8em;
                    opacity: 70%;
                }
                .obs {
                    display: block;
                    margin-top: 3px;
                    animation: blink-team-01 infinite 1s;
                    span {
                        background: #D03;
                        color: #FFF;
                        font-size: 10px;
                        padding: 3px 10px;
                        border-radius: 3px;
                    }
                }
                .contato {
                    margin: 15px 0;
                    font-size: .9em;
                    a {
                        .flex();
                        margin-top: 3px;
                        color: @corLink;
                        cursor: pointer;
                        &:hover {
                            color: @corLinkHover;
                        }
                    }
                    .configBTNcontato(){
                        content: "";
                        display: inline-block;
                        width: 35px;
                        height: 25px;
                        margin-right: 10px;
                        background-size: 16px;
                        background-position: center;
                    }
                    .email:empty, .phone:empty {
                        display: none;
                    }
                    .email:not(:empty) {
                        background: #1231;
                        &:before {
                            background: #0005 no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB/0lEQVR4nO3YTYhNcRjH8b/3vCVvJUQUyWKKbKQkpWZFYWGBsrG1nOwsLGZriR2ZJDuUWEgpSlJS3sJGyEsh78N8dOq5dbpNY5q5Z+69/8637j2L8z/PyznneZ7f/6RUU1NTU9MOZEKSUSJ/ZJJILz7qXoZwvFEnK3BX9/EFuxtJbI7jLAzoHh5gTcS+sPgbRF+pix3Gb53NAGZHvBvwoty1zmBmnNyKtzqPwaabfgDfhmu/97AyFi3HHZ3DO2yP2GbgxP/myPumC05rP7ewNGJahtujHYjD1c0v7eEkppde+Tdjmeznim4WRrbgtYnjBw6F70k4MlITGo1EuY9VYXAxbqieZ+gJn3NwoVVa6wN2hOGp6FcdlzE/fK3Fw1aLxkKT9RWPOZzsx3etlRr9mBz2d+JTler3fNMwemn8FFqvN2xOwbFIrHIZ/wjrwvEiXDd2ihpcXbJ1baL3I5+xq3QXx1I3Z0tdceN4nm5q8Xu9D19Hcd3Pop2W5tTB8dZb0houYV4E1YPnI6x9VVLchXI41Wlb3SdYHwEuwNVh1tzEkiq0XFLRRiemcdGu/5akxrQ4t63V6jppPUPRPht1swd7S8kdreI7QVIdVxoTOpKYi4vd+jnoKTbF73GVjpJMSDIhyYQkE5JMSDIhyYQkE5JMSDIhyYRUU1NTU5PawD95ZgOCo89UiQAAAABJRU5ErkJggg==);
                            .configBTNcontato();
                        }
                    }
                    .phone:not(:empty){
                        background: #1231;
                        &:before {
                            background: #0005 no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAACGklEQVR4nO3ZzYtNYRzA8Z/xMkgpCXlZyMIfoFAWJquRZJJQZCO21vYSNlayE6XUNEkyFmTpbdQMUspL2ZGXBmFS8tHJVacx497n3u6Z52Y+69Otb/ec53nO70RMmzZ10Ivb+IQhbIxOgpk47W8fsSI6ARbgqskNRu6wDI/Utz9yhSV4qjHvsTRygzm1hzrFQOQGRzVnV+QEr5oMeVfckpELv/eJZl2MXGhspfqXvsgB+lsMeRg5wKEWQ75GDrASP1sIeRC5wK0WQg5ELtDXZMQIuiKzE++LJkJ6IjfY0/HHlAJm4F5CyN7IFTbgR4Mhr7E8coVTCf9KcWrujhyhG08SYq5gVuQI6zCWEHMhq2W4DIelORO5wrnEmGORI8zD3cSY48VSHrnBYjxLjDmb5TODNXibGHMJsyM32IQviTGDmD/Bb3UVp+baKHYMj7G9ypgticvynxPy6tJv9GB4kmv7i1u5qpht+J4YU9yW+3C5gWvfVDZqws4mYlINVDLRxFZ8a3PMaLExVxGzGZ+133WsqmI1+1BBzCjWtztmLV5WEHO/rSGlTxOpx5lUY20PKZ3Nzrcx5E4lIeNeAVI3znqKIWJvpSGll7NGv4I14mTlEaWYuTiRMNCYzLVi9jZlIeOmMymjprKhiQ6eUz03243nGjeMRZGj2hF+B27W+QpwAwujExQDPhysvYSN1D4DFhvrkSyeiWn/q1+br1OM+5ZqogAAAABJRU5ErkJggg==);
                            .configBTNcontato();   
                        }
                    }
                }
                .button-2 {
                    .botao2(@corLink, 4px 10px);
                }
            }
            &.grid-2 {
                .pessoa {
                    .card(30px 20px 20px 40px);
                    margin-left: 10px;
                    img {
                        position: absolute;
                        width: 55px;
                        height: 55px;
                        border-radius: 55px;
                        margin: -45px 0 0 -54px;
                        background: #FFF;
                        border: 1px solid #1234;
                        padding: 3px;
                    }
                    &:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)) {
                        margin-top: 25px;
                    }
                }
                .links {
                    font-size: 10px;
                    margin-top: 8px;
                    a {
                        display: inline-block;
                        padding: 3px 10px;
                        border-radius: 3px;
                        background: #07B;
                        color: #FFF;
                        &:hover {
                            background: #777;
                        }
                    }
                }
            }
        }
    }
}

@keyframes blink-team-01 {
    0% { opacity: 100% }
    50% { opacity: 50% }
    100% { opacity: 100% }
}

@media screen and ( max-width: 1250px ){
    .drs-team-01 .equipe .grid {
        .grid(1fr 1fr; 2%; stretch);
        &.grid-2 {
            .pessoa {
                &:nth-child(3) {
                    margin-top: 25px;
                }
            }
        }
    }
}

@media screen and ( max-width: 800px ){
    .drs-team-01 .equipe .grid {
        .grid(1fr; 2%; stretch);
        &:not(.grid-2) {
            max-width: 800px;
            margin: 0 auto;
        }
        .pessoa .nome {
            font-size: 1.2em;
        }
        &.grid-2 {
            .pessoa {
                &:nth-child(2) {
                    margin-top: 25px;
                }
                .nome {
                    font-size: 1.2em;
                }
            }
        }
    }
}

@media screen and ( max-width: 400px ){
    .drs-team-01 .equipe .grid:not(.grid-2) .pessoa {
        .grid(1fr; 10px);
        grid-template-areas: "img" "lin" "inf";
    }
}