@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&family=Zen+Dots&display=swap');

*,
*::after,
*::before{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

/*FONT DIDACT SEMPRE 1.2EM*/

/* font-family: 'Didact Gothic', sans-serif;
font-family: 'Zen Dots', cursive; */

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
  }

img{
    width: 100%;
    height: auto;
}

body{
    font-family: 'Didact Gothic', sans-serif;
    overflow-x: hidden;
    background-color: white;
    font-size: 1.2em;
}

h1{
    font-family: 'Zen Dots', cursive;
    text-transform: uppercase;
}

h2{
    font-family: 'Zen Dots', cursive;
    text-transform: uppercase;
    color: #e9511d;
    letter-spacing: .1em;
}

h3{
    font-family: 'Zen Dots', cursive;
    text-transform: uppercase;
    color: #e9511d;
    letter-spacing: .1em;
}

a{
    color: white;
    text-decoration: none;
    font-family: 'Didact Gothic', sans-serif;
}

.container{
    width: min(90%, 110em);
    margin-left: auto!important;
    margin-right: auto!important;
}

.menu-fixed{
    position: fixed;
    left: 50%;
    transform: translate(-50%,0);
    background-color: #121212;
    border: 2px solid #e9511d;
    border-radius: 0 0 15px 15px;
    border-top: none;
    width: fit-content;
    display: flex;
    gap: 4em;
    align-items: center;
    margin: auto;
    padding: 1.5em 2em;
    z-index: 99;
}

.menu-fixed > a{
    transition: 300ms ease-in-out;
}

.menu-fixed > a:hover{
    color: #e9511d;
    transition: 300ms ease-in-out;
}

.logo-menu{
    width: 8em;
}

.active-menu{
    border-bottom: 3px solid #e9511d;
}

.webp .hero-home{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-image: url(../images/main-hero.webp);
    background-size: cover;
    background-position: center;
    height: 100vh;
    gap: 2em;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
}

.no-webp .hero-home{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-image: url(../images/main-hero.png);
    background-size: cover;
    background-position: center;
    height: 100vh;
    gap: 2em;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
}

.main-title{
    color: white;
    font-size: 5em;
    font-weight: 500;
    letter-spacing: .1em;
}

.main-subtitle{
    color: white;
    font-size: 2.1em;
    text-transform: uppercase;
}

.fabricamos-section{
    display: flex;
    margin: 10em auto;
    gap: 15em;
}

.fabricamos-section > *{
    flex-basis: 100%;
}

.soldador-image{
    max-width: 35em;
    border-left: 3em solid #e9511d;
    border-radius: 15px;
}

.fabricamos-right{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2em;
}

.fabricamos-right > p{
    text-align: justify;
}

.grid-fabricamos{
    display: grid;
    grid-template-columns: repeat(3, 12em);
    gap: 2em;
    justify-items: center;
}

.icon-fabricamos{
    width: 6em;
}

.grid-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1em;
    border: 3px solid #e9511d;
    border-radius: 15px;
    width: 12em;
    height: 12em;
}

.grid-item > p{
    text-align: center;
    font-weight: bold;
}

.ferro-aluminio-inox{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2em;
    margin: 10em auto;
}

.ferro-aluminio-inox > p{
    text-align: justify;
}

.ver-projetos{
    color: #e9511d;
    border: 2px solid #707070;
    padding: 1.5em 2.5em;
    border-radius: 15px;
    font-weight: 600;
    transition: 300ms ease-in-out;
}

.ver-projetos:hover{
    transform: translateY(5px);
    -moz-box-shadow:    inset 0 0 5px #707070;
    -webkit-box-shadow: inset 0 0 5px #707070;
    box-shadow:         inset 0 0 5px #707070;
    transition: 300ms ease-in-out;
}

.webp .iniciar-projeto{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70vh;
    background: url(../images/bg-iniciarprojeto.webp);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.no-webp .iniciar-projeto{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70vh;
    background: url(../images/bg-iniciarprojeto.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.iniciar-projeto > h2{
    color: white;
    font-size: 2em;
}

.contactos-upper{
    display: flex;
    justify-content: space-around;
    margin-top: 5em;
}

.gmaps{
    height: 32em;
    max-width: 32em;
}

.contactos-list{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3em;
    width: 32em;
}

.contactos-list > a{
    width: 20em;
    display: flex;
    align-items: center;
    gap: 3em;
}

.icon-contactos{
    font-size: 3em;
    border: 1px solid #707070;
    border-radius: 50%;
    padding: 15px;
    color: #e9511d;
    padding: 15px;
    transition: 300ms ease-in-out;
}

.icon-contactos:hover{
    transform: translateY(5px);
    -moz-box-shadow:    inset 0 0 5px #707070;
    -webkit-box-shadow: inset 0 0 5px #707070;
    box-shadow:         inset 0 0 5px #707070;
    transition: 300ms ease-in-out;
}

.detail-contactos{
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.detail-contactos > p{
    color: #121212;
}

.detail-contactos > h3{
    font-size: 1em;
    color: #121212;
}

.contactos-bottom{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10em;
    margin-bottom: 5em;
    gap: 3em;
}

form{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2em;
}

.form-inner{
    display: flex;
}

.form-inner-left{
    display: flex;
    flex-direction: column;
}

.form-inner-right{
    display: flex;
    flex-direction: column;
}

input{
    width: 50em;
    height: 5em;
    border: 1px solid #e9511d;
    margin: 1em;
    padding: 1em;
    background: white;
    border-radius: 10px;
}

textarea{
    width: 50em;
    height: 12em;
    border: 1px solid #e9511d;
    margin: 1em;
    padding: 1em;
    background: white;
    border-radius: 10px;
}

.submit-button{
    width: 20em;
    text-transform: uppercase;
    cursor: pointer;
    color: #e9511d;
    border: 1px solid #707070;
    font-weight: 600;
    transition: 300ms ease-in-out;
}

.submit-button:hover{
    transform: translateY(5px);
    -moz-box-shadow:    inset 0 0 5px #707070;
    -webkit-box-shadow: inset 0 0 5px #707070;
    box-shadow:         inset 0 0 5px #707070;
    transition: 300ms ease-in-out;
}

.enviar-form{
    display: flex;
    align-items: center;
    width: 95%;
    margin: auto;
}

.enviar-form > *{
    flex-basis: 100%;
}

.enviar-form > p{
    text-align: left;
}

.enviar-form > p > a{
    color: #e9511d;
}

#recapthca{
    text-align: right;
}

footer{
    background: #121212;
    border-top: 2px solid #e9511d;
    display: flex;
    justify-content: space-between;
    padding: 1em 2em;
}

footer > div{
    max-width: 15em;
}

.footer-left{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}

.footer-left > a > i{
    margin-right: 15px;
    color: #e9511d;
    font-size: 1.2em;
    padding: 10px;
}

.socials-footer > a > i{
    margin-right: 15px;
    color: #e9511d;
    font-size: 1.2em;
    padding: 10px;
}

.socials-header{
    display: flex;
    gap: 1.5em;
}

.enviar-form > p{
    width: 20em;
}

.footer-middle{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2em;
}

.contact-footer{
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-footer > .bx{
    font-size: 1.2em;
    border: none;
    padding: 10px;
    color: #e9511d;
    margin-right: 10px;
}

.footer-right{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2em;
}
.gmaps-footer-div{
    width: 25em;
    height: 10em;
}

.gmaps-footer-div > iframe{
    border-radius: 5px;
}

.footer-right > p{
    color: white;
}

.logo-footer{
    width: 10em;
    margin-top: 1em;
}

::placeholder{
    text-transform: lowercase;
    font-size: 1.5em;
}

.hero-sobrenos{
    display: flex;
    height: 100vh;
    border-radius: 15px;
}

.hero-sobrenos > *{
    flex-basis: 100%;
}

.hero-sobrenos > div{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2em;
}

.hero-sobrenos > div > h1{
    color: #e9511d;
}

.hero-sobrenos > div > p{
    max-width: 80%;
    text-align: justify;
}

.webp .hero-sobrenos-right{
    background-image: url(../images/hero-sobrenos.webp);
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
}

.no-webp .hero-sobrenos-right{
    background-image: url(../images/hero-sobrenos.jpg);
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
}

.section-sobrenos{
    display: flex;
    gap: 5em;
    margin: 10em auto;
}

.section-sobrenos > *{
    flex-basis: 100%;
}

.areas-de-atuacao{
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 2em;
    align-items: flex-end;
}

.areas-de-atuacao > h2{
    text-align: right;
}

.areas-de-atuacao > p{
    text-align: justify;
}

.accordion-atuacao{
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: 300ms ease-in-out;
}

.webp .ferro{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: url(../images/ferro.webp);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 10em;
    border-radius: 15px 15px 0 0;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: 300ms ease-in-out;
}

.no-webp .ferro{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: url(../images/ferro.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 10em;
    border-radius: 15px 15px 0 0;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: 300ms ease-in-out;
}

.ferro > h2{
    font-size: 2em;
    color: white;
    z-index: 1;
    transition: 300ms ease-in-out;
}

.ferro > p{
    max-width: 90%;
    color: white;
    opacity: 0;
    font-size: 0em;
    z-index: 1;
    text-align: justify;
    transition: 300ms ease-in-out;
}

.webp .aco-inox{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: url(../images/aco-inox.webp);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 10em;
    border-radius: 0 0 15px 15px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: 300ms ease-in-out;
}

.no-webp .aco-inox{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: url(../images/aco-inox.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 10em;
    border-radius: 0 0 15px 15px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: 300ms ease-in-out;
}

.aco-inox > h2{
    font-size: 2em;
    color: white;
    z-index: 1;
    transition: 300ms ease-in-out;
}

.aco-inox > p{
    max-width: 90%;
    color: white;
    opacity: 0;
    font-size: 0em;
    z-index: 1;
    text-align: justify;
    transition: 300ms ease-in-out;
}

.webp .aluminio{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: url(../images/aluminio.webp);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 10em;
    border-radius: 0 0 15px 15px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: 300ms ease-in-out;
}

.no-webp .aluminio{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: url(../images/aluminio.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 10em;
    border-radius: 0 0 15px 15px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: 300ms ease-in-out;
}

.aluminio > h2{
    font-size: 2em;
    color: white;
    z-index: 1;
    transition: 300ms ease-in-out;
}

.aluminio > p{
    max-width: 90%;
    color: white;
    opacity: 0;
    font-size: 0em;
    z-index: 1;
    text-align: justify;
    transition: 300ms ease-in-out;
}

.active-accordion{
    height: 18em!important;
    gap: 1em;
    transition: 300ms ease-in-out;
}

.active-accordion > p{
    opacity: 1;
    font-size: 1em;
    transition: 300ms ease-in-out;
}

.active-accordion > h2{
    border-bottom: 3px solid white;
    padding-bottom: 10px;
    transition: 300ms ease-in-out;
}

.opacity{
    position: absolute;
    width: 100%;
    height: 100%;
    background: #e9511d;
    opacity: 0.5;
    overflow: hidden;
    transition: 300ms ease-in-out;
}


.active-opacity{
    position: absolute;
    width: 100%;
    height: 100%;
    background: #121212;
    opacity: 0.5;
    overflow: hidden;
    transition: 300ms ease-in-out;
}

.parceiros{
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 80%;
    gap: 5em;
    margin: 5em 5em 10em 5em;
}

.parceiros-inner{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 8em;
}

.parceiro-logo{
    width: 20em;
}

.webp .hero-projetos{
    background-image: url(../images/hero-projetos.webp);
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.no-webp .hero-projetos{
    background-image: url(../images/hero-projetos.png);
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-projetos > h1{
    color: white;
    font-size: 3em;
    text-align: center;
}

.projetos{
    display: grid;
    grid-template-columns: repeat(3, 25em);
    justify-content: center;
    justify-items: center;
    gap: 5em;
    margin: 5em auto;
}

.categoria-square{
    width: 25em;
    height: 22em;
    /* background: red; */
    display: flex;
    justify-content: center;
    align-items: flex-end;
    border-radius: 15px;
    position: relative;
    transition: 300ms ease-in-out;
}

.categoria-square:hover{
    transform: translateY(5px);
    -moz-box-shadow:    inset 0 0 5px #707070;
    -webkit-box-shadow: inset 0 0 5px #707070;
    box-shadow:         inset 0 0 5px #707070;
    transition: 300ms ease-in-out;
}

.categoria-square > a{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.line-projeto{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10em;
}

.line-projeto > a{
    height: 35em;
    max-width: 35em;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border-radius: 15px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: 300ms ease-in-out;
}

.line-projeto > a:hover{
    transform: translateY(5px);
    -moz-box-shadow:    inset 0 0 5px #707070;
    -webkit-box-shadow: inset 0 0 5px #707070;
    box-shadow:         inset 0 0 5px #707070;
    transition: 300ms ease-in-out;
}

.line-projeto > *{
    flex-basis: 100%;
}

.title-projeto{
    color: #121212;
    text-align: center;
    font-size: 1.2em;
    font-weight: 100;
    background: white;
    border: 1px solid #e9511d;
    border-bottom: none;
    border-radius: 15px 15px 0 0;
    width: 80%;
    height: 3em;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4em;
}

#estrutura-esplanada > h2{
    padding: 0 3em;
}

.webp #coberturas{
    background-image: url('../images/coberturas/1.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.no-webp #coberturas{
    background-image: url('../images/coberturas/1.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.webp #escadarias{
    background-image: url('../images/escadarias/1.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.no-webp #escadarias{
    background-image: url('../images/escadarias/1.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.webp #estruturas{
    background-image: url('../images/estrutura_metalica.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.no-webp #estruturas{
    background-image: url('../images/estrutura_metalica.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.webp #fachadas{
    background-image: url('../images/fachadas/1.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.no-webp #fachadas{
    background-image: url('../images/fachadas/1.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.webp #gradeamento{
    background-image: url('../images/gradeamentos/1.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.no-webp #gradeamento{
    background-image: url('../images/gradeamentos/1.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.webp #portoes{
    background-image: url('../images/portoes/1.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.no-webp #portoes{
    background-image: url('../images/portoes/1.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.contactos-new{
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
}

.gmaps-contactos{
    max-width: 50vw;
    height: 100vh;
}

.contactos-list-contactos{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3em;
    width: 32em;
    margin: auto;
}

.contactos-list-contactos > a{
    width: 20em;
    display: flex;
    align-items: center;
    gap: 3em;
}

.menu-mobile{
    display: none!important;
    background-color: #121212;
    border: 2px solid #e9511d;
    border-radius: 0 0 15px 15px;
    border-top: none;
    width: 30em;
    display: flex;
    gap: 0em;
    align-items: center;
    margin: auto;
    padding: 1em;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
    flex-direction: column;
}   

.logo-menu-mob{
    width: 8em;
}

.inner-menu-mobile{
    display: flex;
    flex-direction: column;
    top: 0em;
    width: 100%;
    gap: 0em;
    text-align: center;
    font-size: 0em;
    align-items: center;
    transition: ease-in-out 300ms;
}

.menu-mobile-top{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 50%;
    transition: ease-in-out 300ms;
}

.inner-menu-mobile > a{
    width: fit-content;
    text-transform: uppercase;
    transition: ease-in-out 300ms;
}

.afterMenu{
    gap: 1em;
    transition: ease-in-out 300ms;
}

.afterMenuInner{
    gap: 1em;
    font-size: 1.1em;
    margin-top: 0.5em;
    margin-bottom: 1em;
    transition: ease-in-out 300ms;
}

.menu-mobile-top > .bx{
    border: none;
    font-size: 2.5em;
    color: white;
}

.facebook-button{
    position: fixed;
    z-index: 99;
    color: white;
    border-radius: 15px 0 0 15px;
    border: 1px solid #e9511d;
    right: 0;
    top: 15%;
    background: #121212;
}

.facebook-button > a > .bx{
    color: white;
    border: none;
}

.webp #estruturas-metalicas{
    background-image: url('../images/estrutura_metalica.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 20em;
    border-radius: 15px;
}

.no-webp #estruturas-metalicas{
    background-image: url('../images/estrutura_metalica.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 20em;
    border-radius: 15px;
}

.webp #coberturas-slider{
    background-image: url('../images/coberturas/1.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 20em;
    border-radius: 15px;
}

.no-webp #coberturas-slider{
    background-image: url('../images/coberturas/1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 20em;
    border-radius: 15px;
}

.webp #escadarias-slider{
    background-image: url('../images/escadarias/1.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 20em;
    border-radius: 15px;
}

.no-webp #escadarias-slider{
    background-image: url('../images/escadarias/1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 20em;
    border-radius: 15px;
}

.webp #estruturas-slider{
    background-image: url('../images/estruturas/1.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 20em;
    border-radius: 15px;
}

.no-webp #estruturas-slider{
    background-image: url('../images/estruturas/1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 20em;
    border-radius: 15px;
}

.webp #fachadas-slider{
    background-image: url('../images/fachadas/1.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 20em;
    border-radius: 15px;
}

.no-webp #fachadas-slider{
    background-image: url('../images/fachadas/1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 20em;
    border-radius: 15px;
}

.webp #gradeamentos-slider{
    background-image: url('../images/gradeamentos/1.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 20em;
    border-radius: 15px;
}

.no-webp #gradeamentos-slider{
    background-image: url('../images/gradeamentos/1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 20em;
    border-radius: 15px;
}


.webp #portoes-slider{
    background-image: url('../images/portoes/1.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 20em;
    border-radius: 15px;
}

.no-webp #portoes-slider{
    background-image: url('../images/portoes/1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 20em;
    border-radius: 15px;
}

#to-contactos{
    width: fit-content;
}

.privacy-policy{
    margin:10em auto;
}

.privacy-policy > div > h1{
    text-align: center;
    margin-bottom: 2em;
    text-decoration: underline;
    font-size: 3em;
}

.privacy-policy > div > h2{
    text-align: left;
    margin-bottom: 0.5em;
    margin-top: 2em;
    text-decoration: underline;
    font-size: 1em;
}

#bn-404{
    color: white;
    background-color: #e9511d;
    padding: 1em;
    border: 1px solid #707070;
    border-radius: 5px;
    margin: auto;
    text-align: center;
}

.page-not-found > img{
    width: 50vw; 
    margin: auto; 
    display: flex; 
    align-items: center; 
    justify-content: center;
}

.page-not-found{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2em;
}

.page-not-found > h1{
    margin-bottom: 1em!important;
}

.mostrar-cookie{
    display: flex!important;
}

.cookie-bar{
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 10px;
    gap: 15px;
    background: rgba(255, 255, 255, 0.5);
    z-index: 999999;
}

.cookie-bar > *{
    color: black;
}

.cookie-bar > button{
    padding: 5px 10px;
    background: none;
    border: none;
    border-bottom: 2px solid black;
}

.cookie-bar > button:nth-child(3){
    transform: scale(0.8);
    background: none;
}

@media only screen and (max-width: 767px){
    .cookie-bar{
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .cookie-bar > p{
        margin-bottom: -25px;
    }
 }

 @media only screen and (max-width: 685px){
    .cookie-bar > p{
        margin-bottom: unset;
        text-align: center;
    }

    .cookie-bar{
        justify-content: center;
    }
 }