@font-face {
    font-family: 'RiksWeb';
    src: url('RiksWeb-Normal.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'brut';
    src: url('brut_grotesque-text-webfont.woff') format('woff');
    font-weight: thin;
    font-style: thin;
}

:root {
    --color: ;
    --color2: ;
    --white: #bfbfbf;
}

html {
    font-family: 'RiksWeb';
    color: var(--color);
    background: black;
    width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    display: none;
    max-width: 100%;
    width: 100%;
}

html,
body {
    height: 100vh;
    padding: 0;
    margin: 0;
}

.mobile {
    display: none
}

.topnav {
    display: none;
}

#changeLang {
    height: 100px;
}

.releases hr {
    color: var(--white);
}

.releases {
    color: var(--color2);
    border: solid var(--color) 2px;
    text-align: center;
}


/* //////////////////////////////////////////////////// */

header {
    font-size: 20vw;
    text-align: center;
    background-color: black;
    /* line-height: 17vw; */
    width: 100%;
    height: 100vh;
    z-index: 10;
    /* margin-top: -1vw; */
    position: relative;
    /* border: solid 1px blue; */
}


/* 
header i{
    font-family: 'Inter Thin', sans-serif;
    font-size: 15vw;
} */

header span {
    font-family: 'Courier New', Courier, monospace;
    font-size: 10vw;
    position: relative;
    bottom: 50%;
    left: 0;
    /* border: solid; */
    width: 90%;
    text-align: center;
    /* padding: 0 6vw; */
    display: none;
}

header svg {
    display: block;
    margin: auto;
    width: 90%;
    height: 100%;
    bottom: 10%;
    position: relative;
    /* border: solid 1px red; */
}

.a {
    fill: var(--color2)
}

.b {
    fill: var(--color)
}


/* //////////////////////////////////////////////////// */

.show {
    border: var(--white) 5px solid;
    width: 110%;
}

.show p {
    font-size: 5vw;
    margin: 0;
    text-align: center;
    -moz-animation: scroll-left 2s linear infinite;
    -webkit-animation: scroll-left 2s linear infinite;
    animation: scroll-left 20s linear infinite;
}

@-moz-keyframes scroll-left {
    0% {
        -moz-transform: translateX(99%);
    }
    100% {
        -moz-transform: translateX(-100%);
    }
}

@-webkit-keyframes scroll-left {
    0% {
        -webkit-transform: translateX(100%);
    }
    100% {
        -webkit-transform: translateX(-100%);
    }
}

@keyframes scroll-left {
    0% {
        -moz-transform: translateX(100%);
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    100% {
        -moz-transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}


/* //////////////////////////////////////////////////// */

.blocco {
    width: 86vw;
    margin-left: 5.5vw;
    /* margin-top: 50% ; */
    /* display: none; */
}

.grid-titolo {
    display: grid;
    clear: both;
    /* grid-template-columns: 86%; */
    /* padding: 0 5.5vw; */
    width: 86%;
}

.grid-titolo div {
    border: 3px solid var(--white);
    ;
    width: 88vw;
}

.grid-container {
    display: grid;
    clear: both;
    grid-template-columns: 45% 45%;
    /* margin: 0 5.5vw; */
    /* max-width: 86%; */
}

.grid-container div {
    border: 3px solid var(--white);
    font-size: 3vw;
    padding: 0 2vw;
    /* max-width: 86vw; */
}

.grid-titolo>div>h1:hover {
    /* transform: scale(1.4) translate(15%); */
    color: var(--white);
    width: 86%;
}

.grid-container h1 {
    font-size: 8vw;
    margin: 1vw 0;
    text-align: center;
}

.grid-titolo h1 {
    font-size: 8vw;
    margin: 1vw 0;
}

.grid-container h2 {
    font-size: 5vw;
    margin: 1vw 0;
    text-align: center;
}

.titolazzi {
    font-size: 10vw;
}

.mail {
    font-size: 5vw;
    text-decoration: none;
    color: var(--color);
    margin: 5%;
    padding: 3vw;
    border: solid 3px var(--white);
    text-align: center;
    display: inline-block;
    transition: all 0.4s ease-in-out;
}

.mail:hover {
    color: var(--white);
    border: dashed 3px var(--color);
    ;
    transform: rotate(-1turn) scale(0.5);
}

#mail-icon {
    text-align: center;
    font-size: 5vw;
    margin: 5vw;
}

#sidenavSx {
    height: 150vw;
    width: 6vw;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    overflow-x: hidden;
    border-right: solid var(--white) 3px;
    background-color: black;
}

#sidenavSx p {
    font-size: 3vw;
    text-align: center;
    height: 10%;
    transform: rotate(90deg);
    -moz-transform: translateY(100%);
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    -moz-animation: scrollTit 2s linear infinite;
    -webkit-animation: scrollTit 2s linear infinite;
    animation: scrollTit 5s ease-in-out infinite;
    line-height: 2.8vw;
}

@keyframes scrollTit {
    0% {
        -moz-transform: translateY(-120%);
        -webkit-transform: translateY(-120%);
        transform: translateY(-250%);
    }
    50% {
        -moz-transform: translateY(200%);
        -webkit-transform: translateY(200%);
        transform: translateY(250%);
    }
    100% {
        -moz-transform: translateY(-120%);
        -webkit-transform: translateY(-120%);
        transform: translateY(-250%);
    }
}

#sidenavDx {
    height: 100%;
    width: 6vw;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    overflow-x: hidden;
    padding-top: 10px;
    border-left: solid 3px var(--white);
    ;
    background-color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* #sidenavDx p{
    transform: rotate(90deg);
    font-size: 1.5vw;
    text-align: left;
} */

#sidenavDx a {
    text-align: center;
    text-decoration: none;
    font-size: 3vw;
    width: 100%;
    margin: 1vw 0;
    position: relative;
    bottom: 2vw;
    color: var(--color);
}

#sidenavDx a:nth-child(1) {
    color: var(--white);
}

#sidenavDx a:nth-child(9) {
    color: var(--white);
}

#sidenavDx a:nth-child(7) {
    color: var(--white);
}

#sidenavDx a:nth-child(8) {
    color: var(--white);
}

#sidenavDx a:hover {
    color: var(--color);
}

#sidenavSx a:hover {
    color: var(--color);
}

a {
    transition: all 0.3s ease-in;
    color: var(--color2);
}

a:hover {
    transform: scale(1.2);
    color: var(--white);
}


/*
.fa-instagram {
    color: white;
}

.fa-soundcloud {
    color:  #ff5500
  }

.fa-linkedin {
    color:  #007bb5;
  }

 


/* .fa-phone-square {
    color: white;
} */

.fa-envelope {
    color: var(--white);
}

.fa-comments {
    color: var(--white);
}


/* #titolo-sudinoi{
    width: 86vw;
    display: block;
   
    transition: height 1s, width 1s, padding 1s, visibility 1s, opacity 0.5s ease-out;  }
  #titolo-servizi{
    width: 86vw;
    display: block;
    transition: height 1s, width 1s, padding 1s, visibility 1s, opacity 0.5s ease-out; 
    padding: .5em;
    box-sizing: border-box;
    overflow: hidden; }
  #titolo-outs{
    width: 86vw;
    display: block;
    transition: height 1s, width 1s, padding 1s, visibility 1s, opacity 0.5s ease-out;  }
  #titolo-canali{
    width: 86vw;
    display: block;
    transition: height 1s, width 1s, padding 1s, visibility 1s, opacity 0.5s ease-out;} */


/* 
  #titolo-sudinoi  #sudinoi-out:hover{
    display: none;
  }
  #titolo-servizi:hover{
    display: none;
  }
*/

#outs-in {
    display: none;
}


/*
  #outs-outs{
      display:block;
  }

  #outs-in:hover{
    display: block;
}

#outs-outs:hover{
    display: none;
} */


/* 
  #titolo-outs #outs-outs:hover{
      display: block;
      word-wrap: none;
      flex-wrap: nowrap;
  }

  #titolo-outs #outs-out:hover{
    display: none;
    word-wrap: none;
} */

#titolo-canali:hover {}

#servizi {
    display: none;
    width: 100vw;
}

#outs {
    display: none;
    width: 100vw;
}

#sudinoi {
    display: none;
    width: 100vw;
}

#canali {
    display: none;
    width: 100vw;
}

.titolomobile {
    display: none;
}

#langITA {
    display: none;
}

#langITAm {
    display: none;
}

p {
    font-family: brut;
}

#changeLang {
    background: transparent;
    border: none;
    color: var(--white);
    font-size: 200%;
}

#changeLang:hover {
    color: var(--color);
    transform: scale(1.2);
    cursor: pointer;
}

a.fa-paper-plane-o {
    color: var(--white)!important
}

a.fa-paper-plane-o:hover {
    color: var(--color)!important
}

.news {
    display: block;
    width: 400%;
    text-align: left;
}

#loghino{
    display: none;
}

@media only screen and (max-width:800px) {
    body {
        max-width: 100%;
        margin: 0;
        padding: 0;
    }
    header {
        display: none;
    }
    #myLinks hr {
        size: 30px;
        width: 30px;
    }
    #sidenavSx {
        display: none;
    }
    #sidenavDx {
        display: none;
    }
    main {
        width: 100vw;
        position: absolute;
        height: 12vw;
        top: 25vw
    }


    .titolomobile{
        border-right:var(--white) 5px solid;
        width: 75%;
        margin: 0;
        height: 24vw;
      
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
      }
      
      #titolomobilep{
        position: absolute;
        width: 200%;
        font-size:13vw !important;
        -moz-animation: scrollMob 15s ease-in-out infinite;
        -webkit-animation: scrollMob 15s ease-in-out infinite;
        animation: scrollMob 15s ease-in-out infinite;  
  
      }
      
  
    /* .titolomobile {
        border-right: var(--white) 5px solid;
        width: auto;
        margin: 0;
        height: 24vw;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        
    }*/
    #titolomobilep {
        font-size: 20vw;
        /* width: 100%; 
        color: var(--color); */
          } 

    #loghino svg {
        width: 1000px;
        position: fixed;
        height: 35%;
        -moz-animation: scrollMob 10s linear infinite; 
        -webkit-animation: scrollMob 10s linear infinite; 
        animation: scrollMob 10s linear infinite; 
    }

    @keyframes scrollMob {
        0% {
            -moz-transform: translateX(100%);
            -webkit-transform: translateX(100%);
            transform: translateX(100%);
        }
        100% {
            -moz-transform: translateX(-100%);
            -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
        }
    }
    .show {
        border: var(--white) 3px solid;
        width: 100%;
        margin: 0;
        height: 16vw;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }
    .show p {
        font-size: 10vw;
        margin: 0;
        height: 90%;
        width: 10000%;
        -moz-animation: scrollMobNews 20s linear infinite;
        -webkit-animation: scrollMobNews 20s linear infinite;
        animation: scrollMobNews 20s linear infinite;
    }
    @keyframes scrollMobNews {
        0% {
            -moz-transform: translateX(100%);
            -webkit-transform: translateX(100%);
            transform: translateX(100%);
        }
        100% {
            -moz-transform: translateX(-100%);
            -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
        }
    }
    .blocco {
        width: 100%;
        margin-left: 0;
    }
    .grid-titolo {
        display: grid;
        clear: both;
        width: 100%;
    }
    .grid-titolo div {
        border: 3px solid var(--white);
        ;
        width: 100%;
        height: 20vw;
        overflow: hidden;
    }
    .grid-container.sx {
        width: 100vw;
        display: grid;
        clear: both;
        grid-template-columns: 90% 10%;
    }
    .grid-container.dx {
        width: 100vw;
        display: grid;
        clear: both;
        grid-template-columns: 10% 90%;
    }
    .grid-container div {
        border: 3px solid var(--white);
        font-size: 5vw;
        height: 220vw;
        position: sticky;
        /* overflow-y: scroll; */
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 4vw;
    }
    .grid-titolo>div>h1:hover {
        color: var(--white);
        width: 100%;
    }
    .grid-container h1 {
        font-size: 8vw;
        margin: auto;
        text-align: center;
        writing-mode: vertical-rl
    }
    .grid-container h2 {
        font-size: 8vw;
        margin: auto;
        text-align: center;
        writing-mode: vertical-rl
    }
    .grid-titolo h1 {
        font-size: 15vw;
        margin: 2vw;
    }
    .grid-container p {
        font-size: 8vw;
        /* overflow-y: scroll; */
        height: auto;
    }
    .titolazzi {
        /* height: 100%; */
        animation: titolazzi 2s ease-in-out infinite;
    }
    @keyframes titolazzi {
        0% {
            -moz-transform: translateY(10%);
            -webkit-transform: translateY(10%);
            transform: translateY(10%);
        }
        50% {
            -moz-transform: translateY(-10%);
            -webkit-transform: translateY(-10%);
            transform: translateY(-10%);
        }
        100% {
            -moz-transform: translateY(10%);
            -webkit-transform: translateY(10%);
            transform: translateY(10%);
        }
    }
    #clos {
        display: none;
    }
    .topnav {
        overflow: hidden;
        position: fixed;
        border: var(--white) 3px solid;
        width: 100%;
        display: table;
        background-color: black;
        z-index: 30
    }
    .topnav #myLinks {
        display: none;
        right: 0;
        z-index: 100;
        width: 20vw;
        height: 80%;
        justify-content: space-evenly;
        flex-direction: column;
        align-items: center;
        position: fixed;
        background-color: black;
        border: 3px solid var(--white);
    }
    .topnav a {
        color: var(--blank);
        text-decoration: none;
        font-size: 18vw;
        display: block;
        font-size: 14vw;
    }
    .topnav a.icon {
        width: 25vw;
        height: 25vw;
        display: flex;
        position: absolute;
        color: var(--blank);
        right: 0;
        top: 0;
        justify-content: center;
        align-items: center;
    }

    .blocco div{
        overflow-y: scroll;
    }

    .blocco p span{
        position: absolute;
        top: 0;
        left: 0;
        width: 90%;
        margin: 5%;     
    }

    /* .blocco p span{ */
        /* width: 2000%; */
    /* } */
    /* .blocco{
        top: 0;
    } */

    .grid-container div{
       flex-direction: column;
    }

    .blocco .show p span {
        width: 1000%;
    }

    #loghino{
        display: block;
    }
}