@font-face {
    font-family: Grotta-Regular;
    src: url(../fonts/Grotta-Regular.woff2);
}

:root {
    --varVh: 1vh;
    --vh: 1vh;
    /* --contactsSize: 22px;
    --contactsLineHeight: 22px; */
    --contactsSize: 13px;
    --contactsLineHeight: 13px;
    --margineEsterno: 15px;
}

@media screen and (min-width: 768px) {
    :root {
        --contactsSize: 15px;
        --contactsLineHeight: 15px;
        --margineEsterno: 20px;
    }
}

@media screen and (min-width: 1025px) {
    :root {
        --contactsSize: 19px;
        --contactsLineHeight: 19px;
    }
}

@media screen and (min-width: 1536px) {
    :root {
        --contactsSize: 22px;
        --contactsLineHeight: 22px;
    }
}

@media screen and (min-width: 1920px) {
    :root {
        --contactsSize: 27px;
        --contactsLineHeight: 27px;
    }
}

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

*::-moz-selection {
    background-color: #000;
    color: white;
}

*::selection {
    background-color: #000;
    color: white;
}

body {
    position: relative;
}

.wrapper {
    padding: var(--margineEsterno); 
    background-color: #fff;
    height: calc(100 * var(--varVh));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
}

.contacts {
    font: normal var(--contactsSize) 'Grotta-Regular', sans-serif;
    line-height: var(--contactsLineHeight);
    width: 100%;
    text-align: left;
}

.contacts a {
    color: #000;
    text-decoration: none;
}

.contacts::before,
.contacts::after {
    content: '';
    display: block;
    height: 0;
    width: 0;
}

.contacts::before {
    margin-top: -3px;
}

.contacts::after {
    margin-bottom: -2px;
}

@media screen and (min-width: 768px) {
    .contacts::before {
        margin-top: -6px;
    }

    .contacts::after {
        margin-bottom: -4px;
    }
}

@media screen and (min-width: 1025px) {
    .contacts::before {
        margin-top: -7px;
    }

    .contacts::after {
        margin-bottom: -6px;
    }
}

@media screen and (min-width: 1536px) {
    .contacts::before {
        margin-top: -9px;
    }

    .contacts::after {
        margin-bottom: -7px;
    }
}

@media screen and (min-width: 1920px) {
    .contacts::before {
        margin-top: -12px;
    }

    .contacts::after {
        margin-bottom: -8px;
    }
}



.due {
    width: 102%;
    transform: translateX(-1%);
    margin-top: var(--margineEsterno);
}

.dues {
    display: none;
}

.duestd {
    display: none;
}

.duestd1 {
    display: none;
}

.duestudio {
    display: none;
}

@media screen and (orientation: landscape) {
    .due {
        display: none;
    }

    .duestudio {
        display: block;
        width: 100%;
        margin-top: var(--margineEsterno);
    }

    .wrapper {
        padding: var(--margineEsterno) var(--margineEsterno) calc(var(--margineEsterno) - 0.3vw) var(--margineEsterno);
    }
}

@media screen and (min-width: 768px) {
    .due {
        display: none;
    }

    .dues {
        display: block;
        width: 100%;
        margin-top: var(--margineEsterno);
    }

    .duestudio {
        display: none;
    }

    .wrapper {
        padding: var(--margineEsterno);
    }
}

@media screen and (min-width: 1025px) {
    .dues {
        display: none;
    }

    .duestd {
        display: block;
        width: 100%;
        margin-top: var(--margineEsterno);
    }
}

@media screen and (min-width: 1536px) {
    .duestd {
        display: none;
    }

    .duestd1 {
        display: block;
        width: 100%;
        margin-top: var(--margineEsterno);
    }

    .wrapper {
        padding: var(--margineEsterno) var(--margineEsterno) calc(var(--margineEsterno) - 0.3vw) var(--margineEsterno);
    }
}

@media screen and (min-width: 1920px) {
    .duestd1 {
        display: none;
    }

    .duestudio {
        display: block;
        width: 100%;
        margin-top: var(--margineEsterno);
    }
}