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


.drs-council-01 {
    * { .fx(); }
    position: relative;
    overflow: hidden;
    padding-top: 0;
    header {
        display: block;
        text-transform: uppercase;
        font-weight: bold;
        font-size: 1.25em;
        margin-bottom: 40px;
        border-bottom: 2px solid #1238;
        padding-bottom: 3px;
    }
    .conselho {
        .representacao {
            .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; 10px; stretch);
            padding: 30px 0 50px 0;
            .membro {
                .card(20px);
                .nome {
                    font-size: 1.15em;
                }
                span {
                    display: block;
                    font-style: italic;
                    font-size: .9em;
                    opacity: 70%;
                    margin-bottom: 10px;
                }

                .configBTNcontato(){
                    content: "";
                    display: inline-block;
                    width: 35px;
                    height: 25px;
                    margin-right: 10px;
                    background-size: 16px;
                    background-position: center;
                }
                .email:empty {
                    display: none;
                }
                .email:not(:empty) {
                    background: #1231;
                    max-width: 350px;
                    &: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();
                    }
                }
                .mandato:before {
                    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNS4yLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FtYWRhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNjAgNDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDYwIDQwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojRkZGRkZGO30NCgkuc3Qxe2ZpbGw6IzAxMDEwMTt9DQo8L3N0eWxlPg0KPHBhdGggZD0iTTYwLDR2MzJjMCwyLjItMS44LDQtNCw0SDRjLTIuMiwwLTQtMS44LTQtNFY0YzAtMi4yLDEuOC00LDQtNGg1MkM1OC4yLDAsNjAsMS44LDYwLDR6Ii8+DQo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDguMiw0LjZjMCwxLjEtMS4xLDEuNy0yLjksMS43Yy0xLjcsMC0yLjYtMC42LTIuNi0xLjhjMC0xLDAtMiwwLTIuOWMwLTAuNSwwLTEuMSwwLTEuNmg1LjYNCglDNDguMiwxLjUsNDguMiwzLjEsNDguMiw0LjZ6Ii8+DQo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTcuOSw0LjZjMCwxLjEtMSwxLjctMi43LDEuN2MtMS44LDAtMi44LTAuNS0yLjktMS43YzAtMS42LDAtMy4xLDAtNC43aDUuNmMwLDAuNiwwLDEuMSwwLDEuNw0KCUMxNy45LDIuNiwxNy45LDMuNiwxNy45LDQuNnoiLz4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0yOS45LDEwLjljNy44LDAsMTUuNiwwLDIzLjQsMGMxLDAsMS4yLDAuMiwxLjIsMWMwLDguMSwwLDE2LjIsMCwyNC4yYzAsMC43LTAuMywwLjktMS4yLDAuOQ0KCWMtMTUuNiwwLTMxLjIsMC00Ni43LDBjLTAuOSwwLTEuMi0wLjEtMS4yLTAuOWMwLTguMSwwLTE2LjIsMC0yNC4zYzAtMC43LDAuMy0wLjksMS4yLTAuOUMxNC4zLDEwLjksMjIuMSwxMC45LDI5LjksMTAuOXoiLz4NCjxnPg0KCTxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0zNS41LDE5LjNjLTEsMC0yLDAtMi45LDBjLTAuNywwLTEtMC4yLTEtMC43YzAtMS4yLDAtMi41LDAtMy43YzAtMC42LDAuMy0wLjcsMS4xLTAuN2MxLjksMCwzLjksMCw1LjgsMA0KCQljMC43LDAsMSwwLjEsMSwwLjdjMCwxLjMsMCwyLjUsMCwzLjhjMCwwLjUtMC4zLDAuNy0xLDAuN0MzNy41LDE5LjIsMzYuNSwxOS4zLDM1LjUsMTkuM3oiLz4NCgk8cGF0aCBjbGFzcz0ic3QxIiBkPSJNNDYuOCwxOS4zYy0xLDAtMiwwLTMsMGMtMC43LDAtMC45LTAuMi0wLjktMC43YzAtMS4zLDAtMi42LDAtMy45YzAtMC40LDAuMy0wLjYsMC45LTAuNmMyLjEsMCw0LjEsMCw2LjIsMA0KCQljMC42LDAsMC44LDAuMiwwLjgsMC42YzAsMS4zLDAsMi42LDAsMy45YzAsMC41LTAuMywwLjctMC45LDAuNkM0OC44LDE5LjIsNDcuOCwxOS4zLDQ2LjgsMTkuM3oiLz4NCgk8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMTMsMjEuM2MxLDAsMiwwLDMsMGMwLjcsMCwxLDAuMiwwLjksMC43YzAsMS4yLDAsMi41LDAsMy43YzAsMC42LTAuMywwLjctMS4xLDAuN2MtMS45LDAtMy45LDAtNS44LDANCgkJYy0wLjgsMC0xLTAuMi0xLTAuOGMwLTEuMiwwLTIuNCwwLTMuNmMwLTAuNiwwLjMtMC44LDEuMS0wLjhDMTEuMSwyMS40LDEyLjEsMjEuMywxMywyMS4zeiIvPg0KCTxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0yNC4zLDI2LjVjLTEsMC0yLDAtMi45LDBjLTAuNywwLTEuMS0wLjEtMS4xLTAuN2MwLTEuMiwwLTIuNSwwLTMuN2MwLTAuNSwwLjItMC43LDEtMC43YzIsMCw0LDAsNiwwDQoJCWMwLjcsMCwxLDAuMSwxLDAuN2MwLDEuMywwLDIuNSwwLDMuOGMwLDAuNi0wLjMsMC43LTEsMC43QzI2LjMsMjYuNSwyNS4zLDI2LjUsMjQuMywyNi41eiIvPg0KCTxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0zNS42LDIxLjNjMSwwLDIsMCwzLDBjMC42LDAsMC44LDAuMiwwLjgsMC42YzAsMS4zLDAsMi42LDAsNGMwLDAuNC0wLjMsMC42LTAuOCwwLjZjLTIuMSwwLTQuMiwwLTYuMywwDQoJCWMtMC41LDAtMC44LTAuMi0wLjgtMC42YzAtMS4zLDAtMi42LDAtNGMwLTAuNCwwLjMtMC42LDAuOS0wLjZDMzMuNSwyMS4zLDM0LjUsMjEuMywzNS42LDIxLjN6Ii8+DQoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTQ2LjgsMjYuNWMtMSwwLTIsMC0zLDBjLTAuNiwwLTAuOS0wLjItMC45LTAuN2MwLTEuMywwLTIuNSwwLTMuOGMwLTAuNSwwLjMtMC43LDEtMC43YzIsMCw0LDAsNiwwDQoJCWMwLjcsMCwxLDAuMiwxLDAuN2MwLDEuMiwwLDIuNSwwLDMuN2MwLDAuNi0wLjMsMC44LTEsMC43QzQ4LjcsMjYuNSw0Ny43LDI2LjUsNDYuOCwyNi41eiIvPg0KCTxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0xMy4xLDMzLjdjLTEsMC0yLDAtMywwYy0wLjcsMC0xLTAuMS0xLTAuN2MwLTEuMywwLTIuNSwwLTMuOGMwLTAuNSwwLjMtMC43LDAuOS0wLjdjMiwwLDQuMSwwLDYuMSwwDQoJCWMwLjcsMCwwLjksMC4yLDAuOSwwLjdjMCwxLjIsMCwyLjUsMCwzLjdjMCwwLjUtMC4zLDAuNy0xLDAuN0MxNSwzMy43LDE0LjEsMzMuNywxMy4xLDMzLjd6Ii8+DQoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTI0LjMsMzMuN2MtMSwwLTIsMC0zLDBjLTAuNywwLTEtMC4xLTEtMC43YzAtMS4zLDAtMi41LDAtMy44YzAtMC41LDAuMy0wLjcsMC45LTAuN2MyLDAsNC4xLDAsNi4xLDANCgkJYzAuNywwLDAuOSwwLjIsMC45LDAuN2MwLDEuMiwwLDIuNSwwLDMuN2MwLDAuNS0wLjMsMC43LTEsMC43QzI2LjMsMzMuNywyNS4zLDMzLjcsMjQuMywzMy43eiIvPg0KCTxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0zNS42LDI4LjZjMSwwLDEuOSwwLDIuOSwwYzAuNywwLDEsMC4yLDEsMC43YzAsMS4yLDAsMi41LDAsMy43YzAsMC41LTAuMiwwLjctMC45LDAuN2MtMiwwLTQuMSwwLTYuMSwwDQoJCWMtMC42LDAtMC45LTAuMi0wLjktMC42YzAtMS4zLDAtMi41LDAtMy44YzAtMC41LDAuMy0wLjcsMS0wLjdDMzMuNiwyOC42LDM0LjYsMjguNiwzNS42LDI4LjZ6Ii8+DQoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTQ2LjgsMjguNmMxLDAsMS45LDAsMi45LDBjMC43LDAsMSwwLjIsMSwwLjdjMCwxLjIsMCwyLjUsMCwzLjdjMCwwLjUtMC4yLDAuNy0wLjksMC43Yy0yLDAtNC4xLDAtNi4xLDANCgkJYy0wLjYsMC0wLjktMC4yLTAuOS0wLjdjMC0xLjMsMC0yLjUsMC0zLjhjMC0wLjUsMC4zLTAuNywxLTAuN0M0NC44LDI4LjYsNDUuOCwyOC42LDQ2LjgsMjguNnoiLz4NCjwvZz4NCjwvc3ZnPg0K);
                }
                .email, .mandato {
                    .flex();
                    font-size: .9em;
                    &:before {
                        content: "";
                        display: inline-block;
                        width: 20px;
                        height: 13px;
                        margin-right: 10px;
                        background-size: cover;
                        background-position: center;
                        opacity: 50%;
                    }
                }
                .email {
                    color: @corLink;
                    cursor: pointer;
                    margin-bottom: 3px;
                    &:hover {
                        color: @corLinkHover;
                    }
                }
                .mandato {
                    color: #888;
                }
                &.hide {
                    opacity: 0;
                }
            }
            &:last-child {
                padding-bottom: 0;
            }
        }
    }
}

@media screen and ( max-width: 850px ){
    .drs-council-01 .conselho {
        .representacao {
            .grid(40px auto 1fr; 20px);
            font-size: 1.1em;
        }
        .grid {
            .grid(1fr; 10px);
            .membro .nome {
                font-size: 1.05em;
            }
        }
    }
}

@media screen and ( max-width: 600px ){
    .drs-council-01 .conselho .representacao {
        .grid(1fr 240px 1fr; 10px);
        text-align: center;
    }
}