body {margin: 0; background-color: black; overflow-x: hidden}
    section {background-color: white}
    section h2 {text-align: center; letter-spacing: 0.1em; text-transform: uppercase;font-weight: 400;font-family: "Montserrat", Helvetica, Arial, sans-serif;font-size: 30px;margin: 0;color: rgb(67, 67, 67); padding: 24px 0}

    .categoria {display: grid; grid-template-columns: 50% 50%; text-align: left; grid-template-areas: "de il"}
    .categoria:nth-child(even) {grid-template-areas: "il de";}
    .categoria .descricao {grid-area: de; padding: 0 15%; align-self: center}
    .categoria .descricao h3 {font-size: 36px; margin-bottom: 28px; font-weight: 200; line-height: 1.1; font-family: "Raleway", Helvetica, Arial, sans-serif;}
    .categoria .descricao p {font-family: "Raleway", Helvetica, Arial, sans-serif; font-weight: 300; }
    .categoria .ilustra {grid-area: il}
    .categoria .ilustra img {max-width: 100%; display: block}
    /*.categoria .descricao .botao {background-color: #08c9d5;border-color: #08c9d5;color: white;position: relative;font-family: "Montserrat", Helvetica, Arial, sans-serif;text-transform: uppercase;font-size: 11px;font-weight: 600;border-radius: 40px;padding: 13px 28px 15px;transition: all 0.2s ease-out;outline: none;margin-bottom: 3px;display: inline-block;line-height: 1.42857143;text-align: center;white-space: nowrap;vertical-align: middle;touch-action: manipulation;cursor: pointer;text-decoration: none;box-sizing: border-box;}*/

    .sobre {display: grid; grid-template-columns: 1fr 1fr; text-align: left; grid-template-areas: "de il"; background-color: white}
    .sobre .descricao {grid-area: de; padding: 0 20%; align-self: center; overflow: hidden}
    .sobre .descricao h1 {font-size: 48px; margin-bottom: 22px; font-weight: 200; line-height: 1.1; font-family: "Raleway", Helvetica, Arial, sans-serif; color: rgb(67, 67, 67);}
    .sobre .descricao p {font-family: "Raleway", Helvetica, Arial, sans-serif; font-weight: 300; }
    .sobre .descricao span {font-family: "Raleway", Helvetica, Arial, sans-serif; font-weight: 500; line-height: 1.1; letter-spacing: 0.2em; margin-bottom: 40px; color: rgba(0, 0, 0, 0.4); text-transform: uppercase;}
    .sobre .ilustra {grid-area: il; ; justify-self: end; animation: zooming 18s infinite both; overflow: hidden}
    .sobre .ilustra img {max-width: 100%; display: block; animation: scale 40s linear infinite; overflow: hidden}
    
    .botao {background-color: #08c9d5;border-color: #08c9d5;color: white;position: relative;font-family: "Montserrat", Helvetica, Arial, sans-serif;text-transform: uppercase;font-size: 11px;font-weight: 600;border-radius: 40px;padding: 13px 28px 15px;transition: all 0.2s ease-out;outline: none;margin-bottom: 3px;display: inline-block;line-height: 1.42857143;text-align: center;white-space: nowrap;vertical-align: middle;touch-action: manipulation;cursor: pointer;text-decoration: none;box-sizing: border-box;}

    @keyframes scale {50% {transform:scale(1.2)}}


    .inicio {background-image: url(agency_bg03.jpg);  background-size: 100%;  background-repeat: no-repeat; background-position: top center; animation-delay: 0.1s; min-height: 46.2vw; background-attachment: fixed;
        animation-duration: 1s; animation-fill-mode: both; animation-name: fadeInDown; box-sizing: border-box; color: rgb(255, 255, 255); display: block;
        font-family: "Montserrat", Helvetica, Arial, sans-serif; font-size: 30px; font-weight: 400; line-height: 33px; text-align: center; text-transform: uppercase;
        margin-bottom: 0; margin-top: 0}
    .inicio div {padding: 15em}

    nav {display: flex; font-family: "Montserrat", Helvetica, Arial, sans-serif; background-color: transparent; color: white; justify-content: center; position: fixed; z-index: 10; width: 100%; padding: 1em; box-sizing: border-box; background-image: url(agency_bg03.jpg); background-size: 100%; background-repeat: no-repeat; background-position: top center}
    nav::after {content: "";background-image: url(agency_bg03.jpg); opacity: .9; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1;background-position: top center; background-size: 100%}
    nav h1 {display: inline; margin: 0 auto 0 0; font-size: 34px; font-weight: 400}
    nav h1 a {text-decoration: none; padding: 1em; ; color: white}
    nav div {display: flex}
    nav div a {color: #08c9d5; font-size: 12px; font-weight: bold; text-transform: uppercase; text-decoration: none; padding: 1em}

    nav input[type=checkbox] {display: none}
    nav label {display: none}

    @media (max-width: 820px) {
        .categoria {display: flex; flex-direction: column; overflow: hidden}
        .categoria .descricao {padding-top: 8em; padding-bottom: 8em}
        .sobre {grid-template-columns: 1fr; grid-template-areas: "il" "de"; padding: 0 5%}
        .sobre .ilustra img {display: block; width: 90%; margin: 1em auto}
        nav {padding-left: 0; padding-right: 0}
        nav h1 {font-size: small; align-self: center}
        nav label {display: block; padding: 0em 1em 0em 1em; transform: rotate(90deg); font-weight: bold; font-size: 24px;}
        nav input[type=checkbox] ~ div {display: none; flex-direction: column; position: fixed; right: 0; height: 100%; top: 0; z-index: 20; background-color: black}
        nav input[type=checkbox]:checked ~ div {display: flex; margin-top: 61px; padding: 3em; overflow-y: scroll; opacity: .92}
        nav input[type=checkbox]:checked ~ div a {padding: 1em;  color: #08c9d5}
    }

    .galeria {padding-bottom: 12em}
    .galeria h2 {padding-bottom: 0; text-align: center}
    .galeria p {font-family: "Raleway", Helvetica, Arial, sans-serif; padding-bottom: 2em; text-align: center}
    .galeria .fotos {display: grid; grid-gap: 3%; grid-template-columns: 1fr 1fr 1fr  }
    .galeria .fotos a {background: black}
    .galeria .fotos a:focus {position: fixed; display: grid; background: rgba(0,0,0,0.8); z-index: 999; left: 50%; top: 50%; transform: translate(-50%, -50%)}
    .galeria .fotos img {max-width:100%; display: block; opacity: .6}
    .galeria .fotos img:hover {opacity: 1; background: black; transition: .5s; transform: scale(1.5); z-index: 1}
    @media (max-width: 820px) {
        .sobre .descricao {padding: 0 10%}
        .sobre .descricao h1 {font-size: 1.5em; font-style: italic}
        .lista-categorias {padding-top: 6em}
        .categoria .descricao {padding-top: 4em; padding-bottom: 4em}
        .lista-categorias h2 {margin: 0; padding: 0; font-size: normal; letter-spacing: 0;}
        .galeria h2 {margin: 0; padding: 0; font-size: normal; letter-spacing: 0;}
        .galeria .fotos {grid-template-columns: 1fr; grid-gap: 1em}
        .galeria .fotos a:focus {width: 90%; background: rgba(0,0,0,1);}
        .galeria .fotos img:hover {transition: .5s; transform: scale(1)}
    }
    
    .video {background-color: #434343; text-align: center; padding: 4em 16em; position: relative}
    .video h2 {color: white}
    .video div {position: relative; width: 100%; margin: 0 auto; height: 0;
        padding-bottom: 56.25%;}
    .video iframe {position: absolute; width: 100%;  height: 100%; top: 0; left: 0}
    @media (max-width: 820px) {
        .video {padding-left: 0; padding-right: 0}
        .video h2 {letter-spacing: 0; font-size: small}


    }
    .contato {font-size: 20px; background-color: rgb(44, 54, 55); padding: 10em; overflow: hidden}
    .contato div {display: grid; grid-template-columns: 1fr 1fr 1fr}
    .contato a {color: white; text-decoration: none}
    @media (max-width: 820px) {
        .contato {padding: 4em 0;}
        .contato div {grid-template-columns: 1fr; grid-gap: 5em}
    }
    .contato span {justify-self: center; align-self: end; color: white; font-family: 16px; font-family: "Montserrat", Helvetica, Arial, sans-serif;}
    .contato .telefone::before {display: block; text-align: center; content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAdCAYAAACqhkzFAAABzElEQVRIx+2VTShEURiG33NnmMsd8jtFQylqTJNZuTN2ykKKyUJWkh02spEIZWVFipSF/CwoklISo5Tys52yoMS4kXAxuDPXNTP3WqgZPzPlTJbz7k6d8/Se7z3n+4iNdwDwcPLMW0XIBGqp+dr7teA8tTZDAgBic2lNL6PoFjKVDCSq91sYzD39ZY7LDWLZ11ZPSpVSSOdSIVe+xVCydKJWKZiJSbvYYdE+UK1XGbAAoCvpWclxiuPU7rKOBvOWUX+fygJAasQQIWIooev6ECJflvpIcbFZ7FvPHqLl6bwwKzGBd+m1V0Shd1gCQIkBZEyBrcLbbCkRhz4L7M/4zCIKRJ2Q5cIkvcWjPnkb9ijnn5UEJoFJ4F8U+csh5YC/2WDmaQFEAifFAuI5aH9IxFJ6nPalM80umu8692h5hmmt4bELNeLP9kUw589ocBz+PuLhAmuyxRuMjsofqma6aEIZkCcuOUypvt5VqlDiagFLRTyqXu1ru3Qp+9sKgLnfOwSn2+iC2xiP0Ijcb0NK78UVW27Ie/O31h+7O3h9mOLJqGBUBsaworDgRA8DPBEbz3LBEXn4yQLrYxpSaFMOp+GFM5x5As6WMSsgfQAtPZcmUibbyQAAAABJRU5ErkJggg==)}
    .contato .instagram::before {display: block; text-align: center;  content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAdCAYAAAC9pNwMAAAFOUlEQVRIx62Xa1BUZRjH/+dwOOfsLuyywMKCKAEBATtgppzFvDZlo4zjjNo4KZNiWVFpKTaDYTaZoY1iU+SHxqnJ0nScTNN00rHxVuxu2RSKEuGVDYJd2GUX9vKeXc7pgwar3Fbo+Xbmfc7zey///3uhDIUCBsQSU053CR2DMYZft69DZ/y4abA2KhQsrTVXuKfgidZ4aCRCePwfQbkcmvimb7qN5btzAfE+cJ1KrPbtvp2HDBIgPCiPIyY+9kyUbQw8B9RBFfLbNdBIxMuDvtGAvS+8btiP9j6wtNH8edMM5AV8nTybaDoQNG6pDu3dWEJaZa6yF2O2PYIowRw7S8/d8WYuIDKAuaQ7H3kB4uWh37U3SzixfSyg3q2mGls+pQYAmUEwqH3/5IR1lb3SRm5OZ2DGLMayoxgCDtNYi+m2GABdlwDhxIGxjc801zOeKuyUyMROiUx0iGSy++fsSvxkfDu2ES5AA7GpfAkA0MEJiCeE8KCsDQbAOkYlsaAGb+Fu4SbHcX54tDn1gJaRaNxRr1ZsD6/4xXjfsd7M4N0vV5zQmDIVjrvgS4xHlqAOSVdFtAEAHLIYCQqE5QGAZcIWyRLzKz0L8fQ/KugDcojVOgPo+j5g1ep+OOgSPjqQ+6O8MrWEjwEASSeLLb4PGgerFwb4PquxxKFQqC/EOeGmvZTeAznPGQud07agHIez5tVbisoM84WGO/8aoRmiaj9Ymp7YdXTZpgEJ7chtSUVaqNUy+qwmQA0jEleZq+zFytl2xpCDSV981XX0kV8G1qG0Acj9asgyycf/Sicpw8+zDax+2ztZwm9HhszJNi1zbaJes6qJcthaHb8Cpevn9I+YttSmSjO/7OuRTebpXrx3I4lEgzl/dlgoADQW7dOcMhmdy7jCnu4rvGJ8TllCe0TfEHmLvPzvGXjUgztiDlljqxg9XzD1fWqxwbYfkSC3gEs1n4WlwD30zoTH5a97ktIQkBdMihaET/ralstLqRCv0UMWWYGHXDSANitQGa6/hZusB61ABIJNz00bLnNocBylIoTw8HbBADjDtR3joXwAADuVMzqwXxYjOM4PVomrQFTYezUrs/dsHA8MPoaWGABIHAdpKhLDw9apAlHQAwAKzp8eHbgOx6NbIIHLBD6ctzAs7jRfhTMdHKRbwGnTydGBYTQrr6MhklP60VZa0mRJLR4Wqjcvdpfhyc4A4eFotNKV+HOUYIDeolid1ijbKMV4P7m9tarZUvzMVYAdsK5TzaXuarzRrCZK9NT34FTV8yNdJEbYqws87OqIivRPpaqbael6t618I86sX9SmJL9z52Iuc7GYJiqQa49DEgkQHr7rjsiHX305ewpGPOnCOCQKryheUizN3Op715mhLLRzSOuw0TnIIf0psrdHqXMd8h5ZWZM9JTzrMYyfcgL+FDSrJ18F2MGnqMATucG4PgFA7GZLkZgsPyUmAFJC0E1w7YLTuOJy+ghTK2XSWg9kwNUBGnAy9H7pWvw2KrMjOS9KOofJmInaYXu6STAxMJpCT4Kkka9EszwpVIZMvDxddH5PLiDS+EO5PeYGvKDHAa27ttc/G65nw406lViD8uZk0PA1Qlpb+91dVRd4+M3YNcHNeRFliMKig9+2mitWDqbeB77alprWuPf5DjVlUwmyz8pzqdveMtTi+r0vCb15cXc1ypp1iJL/e0VwEQ5GYoIPCqRFsEEefN9rROroUerXVaULt48P+oQBAKnStMadTz3mZZDsVo1htEp4laBaWLbuYpfxxb33i/ZfRtwdvi0RkHsAAAAASUVORK5CYII=')}
    .contato .email::before {display: block; text-align: center;  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAWCAYAAADXYyzPAAAC9klEQVRIx73WX0hTURwH8O+9d3f3OjdxbUXhYiqmNCQpCFcR5IswkDDyQUwTR2OggqMSsdSHohIj6CF6SiHywRcpCF8KhB7Sq7M08U9T+uNG0Tbd1P1h1z9bD3Nzc5vaGv6ezj3nXj7nnPu79/yI/OHAwFwur8BBxaIRqLtdKojq3FhxyIRHzKm2SA/kS5mQ+3meDfVFwyR1yCXv7M8vfvMsZWoJ12pvwuVIFADIUIOihWY6TeZb+6PTzY2UN6YStVK8CALawjCMLwbe3Oz/njtOzKcMj0Rdo5aC18QPOt6KAR50C6sP4za97muyeAnXamtCeQjFZHMNze9479GXRZ4wzkh9G8ngW6iN4tkQWtgJZ0zCxT5Z5KFbiqvzRpPAo9AhC1nVXBkPTQBvJVtbcXXeGEwMHcRNXI1hBhAmut+v4dqDqJfFxvgsWdVaqQLcCT+x3RZA3VFfz/0cxNftVXUUV1MfD/druPZFPcqC6OQsecVwYzd0TziMfyHmKSY+vo3yLFwjlv2g+4JxlKvwKALZmzzPAiJE4v4a7r4thAIAIZdSRmTt62+2F7r6BAZzBi8B/9Ot/MZ8Em1tOzvAddmuonSR8rIQ2I3KJcYBcb54feFlj8mIguThIHorhNLKWq3EoNYqhzAtoqU+r58vCaITRlJTYZB04GHOEuMAky1e/93bM/UBJ/8d3kZFcM+5aWWttuAsTABA3VNrlYOYkDCMF7LZd6TmpkEFuGFWv09/RDTnWBkHyONiLPe+2A2PhQuGr61Eonm6MBpOuC61/thaQEueb7gblUim4rH0xxG4tbsvEU7GoB1Eo2UXNBTCsnOzKmAtZiAST8sDrN19U9yZU4lhcRmcYXTajSldZSJ0z9iJmxtereYQRHx4lb30K4zWVxY+gOW/TqcduPm096InYji6EFiegfREVluGeETheouUlEOCj8RzpSDQtCDjJYGEFUimCk47njrhS13dcyF45MZMiFzGoCLApB9UrbehOmy1AZ6/zIWKUsJRue8AAAAASUVORK5CYII=)}



.content{background-color: white; padding-top: 6em; padding-bottom: 1em}
.content h2 {text-align: center}

.box {margin: .5em; font-size: 15px; font-weight: normal; font-family: "Montserrat", Helvetica, Arial, sans-serif; padding: 7em}
@media (max-width: 820px) {
    .box {padding: 0}
}

.subscription {padding: .5em; margin: 0; overflow: auto; font-size: 12px; font-weight: bold; text-transform: uppercase; font-family: "Montserrat", Helvetica, Arial, sans-serif}
.subscription form {display: grid; grid-template-columns: auto 1fr; grid-gap: 1em; max-width: 30em; margin: 3em auto}
.subscription form div {align-self: center}
.subscription form div input {font-family: "Montserrat", Helvetica, Arial, sans-serif; font-size: 12px; padding: 1em}
.subscription form div input[name=nome] {width: 18em}

.login form {display: grid; grid-template-columns: auto 1fr; grid-gap: 1em; max-width: 30em; margin: 3em auto; font-family: "Montserrat", Helvetica, Arial, sans-serif; font-size: 16px; }
.login form div {align-self: center}
.login form label {font-weight: bold}
.login form div input { padding: 1em}
.login form div input[name=nome] {width: 18em}

/* Painel */
.painel-fotos {display: flex}
.painel-fotos div {width: 100px; background-color: lightgreen; margin: 4px}
.painel-fotos div img {display: block; object-fit: cover; height: 100px; width: 100%}

details {border-radius: 5px; border: solid 1px lightgrey; max-width: 50em; margin-bottom: 1em}
summary {background-color: lightgrey; padding: .5em; font-family: Verdana; font-size: 14px; font-weight: bold; display: block; position: relative}
summary::after {content: "\25BA"; position: absolute; right: 1em; transform: rotate(0deg); transition: transform .3s}
summary::-webkit-details-marker {display: none}
details[open] summary::after {transform: rotate(90deg); transition: transform .3s}
details p {margin-left: 1em; margin-right: 1em; text-align: justify}
details div {padding: .5em}
details div.acoes {padding: .5em; display: flex; flex-wrap: wrap}
details div.acoes a {display: block; border-radius: 5px; border: solid 1px grey; margin-right: 1em; margin-bottom: 1em; padding: 7px 13px; color: white; background-color: #4f4646; text-decoration: none}
.envio-foto label {color: blue; text-decoration: underline}
.envio-foto input[type=file] {display:none}
dl {margin: 0}
dt {font-weight: bold}

.patrocinadores {
    padding-top: 8em;
    padding-bottom: 8em;
}

.patrocinadores > div {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

@media (max-width: 820px) {
    .patrocinadores > div {
        flex-direction: column;
        align-items: center;
    }
    .patrocinadores > div img {
        margin-top: 2em;
        margin-bottom: 2em;
    }
}