@import url("menu.css");
@import url("footer.css");
@import url("index.css");
@import url("servizi.css");
@import url("serviziDettaglio.css");
@import url("carriere.css");
@import url("visione.css");
@import url("contatti.css");
@import url("videoTransition.css");

/* --------------   STILI CONDIVISI  --------------*/

/* space-mono-regular - latin */

@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/space-mono-v11-latin-regular.eot');

    src: local(''),
        url('../fonts/space-mono-v11-latin-regular.eot?#iefix') format('embedded-opentype'),

        url('../fonts/space-mono-v11-latin-regular.woff2') format('woff2'),

        url('../fonts/space-mono-v11-latin-regular.woff') format('woff'),

        url('../fonts/space-mono-v11-latin-regular.ttf') format('truetype'),

        url('../fonts/space-mono-v11-latin-regular.svg#SpaceMono') format('svg');

}

@font-face {
    font-family: 'Space Mono';
    font-style: bold;
    font-weight: 800;
    src: url('../fonts/SpaceMono-Bold.eot');

    src: local(''),
        url('../fonts/SpaceMono-Bold.eot?#iefix') format('embedded-opentype'),

        url('../fonts/SpaceMono-Bold.woff2') format('woff2'),

        url('../fonts/SpaceMono-Bold.woff') format('woff'),

        url('../fonts/SpaceMono-Bold.ttf') format('truetype'),

        url('../fonts/space-mono-v11-latin-regular.svg#SpaceMono') format('svg');

}


.mobileOnly {
    display: none;
}

.desktopOnly {
    display: block;
}




body {
    /* cursor: url('../img/arrow.png'), auto;*/
    font-family: 'Space Mono';
    padding: 0;
    margin: 0;
    background-color: #1c1c1e;
    overflow-x: hidden;
}


/*LINKS*/
a {
    color: #FF5FFF;
    /* cursor: url('../img/hand.png'), auto;*/
    text-decoration: none;
    padding: 2px 5px;

}

a:hover {
    color: #FF5FFF !important;

}

a.withArrow {
    text-transform: uppercase;
}

a.withArrow::after {
    content: " >";
}

@-webkit-keyframes blinker {
    from {
        opacity: 1.0;
    }

    to {
        opacity: 0.0;
    }
}

a.withArrow:hover {
    text-decoration: blink;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 0.05s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-direction: alternate;
}






/*SCROLLBAR*/
::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    /* box-shadow: inset 0 0 5px #ffffff;
    border-radius: 20px;*/
}

::-webkit-scrollbar-thumb {
    background: #FF5FFF;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #ff39ff;
}

/* ALLINEAMENTI */
.clearBoth {
    clear: both;
}

.alignLeft {
    text-align: left;
}

.alignCenter {
    text-align: center;
}

.floatLeft {
    float: left;
}

.floatRight {
    float: right;
}


/* DIMENSIONI VARIE*/
.minHeight100 {
    min-height: 100vh;
}

.spacer {
    height: 150px;
}

.paddingBottom {
    padding-bottom: 150px !important;
}

.marginSmall {
    margin-top: 20px;
}

/* COLORI */
.txtBlack {
    color: #1c1c1e;
}

.txtGrey {
    color: #333333;
}

.txtLightLightGrey {
    color: #c6c6c6;
}

.txtLightGrey {
    color: #999999
}

a.txtLightGrey {
    color: #929295;
}


.txtMediumGrey {
    color: #494949;
}

.txtWhite {
    color: #EFEFEF;
}

.bgGray {
    background-color: #333333;
}

.bgMediumGrey {
    background-color: #E6E6E6;
}

.bgWhite {
    background-color: #f8f8f8;
}

.bgLightGray {
    background-color: #efefef;
}

.bgBlack {
    background-color: #1c1c1c;
}

.bgNoise {
    background-image: url(../img/bg-noise-big.jpg);
    background-size: 100%;
}


/* TESTI */
h1,
h2 {
    font-size: 65px;
    padding: 0;
    margin: 30px 0 50px 0;
}

h3,
h4 {
    text-transform: uppercase;
    font-size: 32px;
    color: #FF5FFF;
    padding: 0;
    margin: 0;
}

h5 {
    font-size: 36px;
    padding: 0;
    margin: 120px 0 50px;
}

h5.big {
    font-size: 46px;
}

h6 {
    font-size: 28px;
    color: #EFEFEF;
}

p {
    font-size: 24px;
    color: #929295;
    padding: 0;
    margin: 0;
    padding-bottom: 50px;
}


/* CONTAINERS */
.flatSection {
    width: 100%;
    padding: 0 0 50px 0;
}

.pageMainContent {
    width: 950px;
    margin: auto;
    padding-top: 200px;
    position: relative;
}

.pageContent {
    width: 950px;
    margin: auto;
    position: relative;
}

.roundedRectangle {
    width: 92vw;
    margin: auto;
    margin-top: 50px;
    margin-bottom: 4vw;
    padding: 40px;
    border-radius: 40px;

}

.roundedRectangleNested {
    width: 95%;
    padding-bottom: 150px;
}

.detailSectionImgContainer {
    border-radius: 20px;
    overflow: hidden !important;
    margin-bottom: 20px;
    width: 400px;
    background-color: #efefef;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.imgNumber {
    width: 400px;
    height: 400px;
}




/* EFFETTI */



.titleTypewriterOver {
    position: absolute;
}

h1.txtBlack.titleTypewriterOver,
h1.txtWhite.titleTypewriterOver,
h1.txtMediumGrey,
h1.txtLightGrey,
h1.txtGrey,
h6.titleTypewriterOver,
h6.txtGrey {
    letter-spacing: 0.01em;
}






.btn {
    background-color: white;
}

.evidence {
    background-color: pink;
}

/*
.wrapper-page {
    overflow: hidden;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.mainPage-page {
    overflow: visible;
    width: 100%;
}
*/
.tv {
    border-radius: 5px;
    background-color: grey;

    margin: 25px 50px;
    overflow: hidden;
    transform-origin: center;
}

.tvPadding {
    padding: 50px;
}

.mouseLoading {
    cursor: url('../img/favicon.png'), auto;
}





/* CAROUSEL*/
.carousel .item {
    width: 100%;
    height: 500px;
}

#carouselForzaTecnica {
    width: 100%;
    margin: auto;
}

.carousel-indicators .active {
    background-color: #FF5FFF;

}

.carousel-indicators [data-bs-target] {
    width: 15px;
    height: 15px;
    border-radius: 15px;
    border: 2px solid #FF5FFF;
    background-clip: border-box
}

.carousel-indicators {
    margin-bottom: 0;
}






























/* glitching links*/
.glitch {
    text-decoration: none;
    text-transform: uppercase;
    transform: translate(-50%, -50%);
    margin: 0;
    color: #ff5fff;

}

.glitch:before,
.glitch:after {
    display: block;
    content: attr(data-glitch);
    text-transform: uppercase;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: .8;
}

.glitch:after {
    color: red;
    z-index: -2;
    padding-left: 5px;
}

.glitch:before {
    color: #0ff;
    padding-left: 5px;
    z-index: -1;
}

.glitch:hover:before {
    animation: glitch .6s cubic-bezier(.25, .46, .45, .94) both 5
}

.glitch:hover:after {
    animation: glitch .6s cubic-bezier(.25, .46, .45, .94) reverse both 5
}

@keyframes glitch {
    0% {
        transform: translate(0)
    }

    20% {
        transform: translate(-1px, 1px)
    }

    40% {
        transform: translate(-1px, -1px)
    }

    60% {
        transform: translate(1px, 1px)
    }

    80% {
        transform: translate(1px, -1px)
    }

    to {
        transform: translate(0)
    }
}

/* glitching links  2  */

.glitch2:hover {

    animation: glitch2 0.8s linear infinite;
}

@keyframes glitch2 {

    2%,
    64% {
        transform: translate(2px, 0) skew(0deg);
    }

    4%,
    60% {
        transform: translate(-2px, 0) skew(0deg);
    }

    62% {
        transform: translate(0, 0) skew(5deg);
    }
}

.glitch2:hover:before,
.glitch2:hover:after {
    content: attr(data-glitch);
    position: absolute;
    left: 0;
    padding-left: 6px;
}

.glitch2:hover:before {
    animation: glitch2Top 0.8s linear infinite;
    clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}

@keyframes glitch2Top {

    2%,
    64% {
        transform: translate(2px, -2px);
    }

    4%,
    60% {
        transform: translate(-2px, 2px);
    }

    62% {
        transform: translate(13px, -1px) skew(-13deg);
    }
}

.glitch2:hover:after {
    animation: glitch2Botom 0.8s linear infinite;
    clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}

@keyframes glitch2Botom {

    2%,
    64% {
        transform: translate(-2px, 0);
    }

    4%,
    60% {
        transform: translate(-2px, 0);
    }

    62% {
        transform: translate(-22px, 5px) skew(21deg);
    }
}

#mainpage-privacy ul {
    list-style-type: none;
    padding-left: 0;
}

#mainpage-privacy ul h4 {
    font-size: 24px;
    padding-bottom: 20px;
}

#mainpage-privacy ul p {
    font-size: 16px;
    color: #333333;
    padding-bottom: 20px;
}