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


.drs-about-01 {
    * { .fx(); }
    .box {
        h2 {
            text-align: center;
            font-size: 2em;
            + p {
                text-align: center;
                padding: 20px 10%;
                font-size: 1.3em;
                color: ~"@{textoHtml}DD";
            }
        }
        > div {
            margin-top: 20px;            
            img {
                display: block;
                width: 50%;
                float: left;
                margin: 0 30px 10px 0;
                border-radius: 3px;
            }
            .paragraph-generate {
                text-align: justify;
                font-size: 1.1em;
                color: ~"@{textoHtml}DD";
                &.center {
                    text-align: center;
                }
                p {
                    line-height: 24px;
                }
            }
            &.grid {
                .grid(1fr 1fr; 20px; start);                
                img {
                    width: 100%;
                }
            }

            .configBGbtn(){
                background-size: 20px;
                background-repeat: no-repeat;
                background-position: center;
                right: 0;
                top: 0;
                width: 50px;
                height: 100%;                
            }
            .btn-tel,
            .btn-email,
            .btn-site {
                position: relative;
                display: inline-block;
                text-align: center;
                width: 330px;
                padding: 10px 45px 10px 10px;
                color: #FFF;
                font-size: .9em;
                margin: 2px 0;                
                &:hover {
                    opacity: 80%;
                }
                &::after {
                    content: "";
                    position: absolute;
                }
            }
            .button-2 {
                .botao2(#123);
                pointer-events: none;
            }
            .btn-tel {
                background: #00A587;
                &::after {
                    background: #0003 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==);
                    .configBGbtn();
                }
            }
            .btn-email {
                background: #B272A3;
                &::after {
                    background: #0003 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==);
                    .configBGbtn();
                }
            }
            .btn-site {
                background: #D36251;
                &::after {
                    background: #0003 url(data:image/png;base64,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);
                    .configBGbtn();
                }
            }
        }
    }
}

@media screen and ( max-width: 950px ){
    .drs-about-01 .box > div {
        img {
            float: none;
            width: 100%;
            margin: 20px 0;
        }
        .paragraph-generate {
            text-align: left;
        }
        &.grid {
            .grid(1fr; 20px);
        
        }
    }
}

@media screen and ( max-width: 850px ){
    .drs-about-01 .box {
        padding: 0 15px;
        h2 {
            text-align: left;
            + p {
                text-align: left;
                padding: 20px 0 5px 0;
            }
        }
        > div.grid {
            .grid(1fr; 10px);
            .paragraph-generate {
                text-align: justify;
            }
        }
    }
}

@media screen and ( max-width: 600px ){
    .drs-about-01 .box > div.grid {
        .grid(1fr; 30px);
        .paragraph-generate {
            text-align: left;
        }
    }
}

@media screen and ( max-width: 500px ){
    .drs-about-01 {
        .box {
            padding: 0;
            > div {
                .btn-tel,
                .btn-email,
                .btn-site {
                    width: 100%;
                }
            }
        }
    }
}