@font-face {
    font-family: 'IBMPlexSans-Bold';
    src: url('../fonts/IBMPlexSans-Bold.ttf')  format('truetype');
}

@font-face {
    font-family: 'IBMPlexSans';
    src: url('../fonts/IBMPlexSans-Regular.ttf')  format('truetype');
}

/* --- FONT --- */
html{
    height: 100%;
}

body {
    overflow: hidden;
    height: 100%;
}

#ContentDesktop {
    display: block;
}

#ContentMobile {
    display: none;
}

* {
    cursor: url('../img/IconNormal.svg') 11 11, auto;
    font-family: 'IBMPlexSans';
}

h1 {
    font-size: 6rem;
    text-transform: uppercase;
    color: #000;
}

h2 {
    font-size: 0.8rem;
    text-transform: uppercase;
}

a,
a * {
    color: #000;
    text-decoration: none;
    cursor: url('../img/IconHover.svg') 11 11, auto;
}

a:hover,
a:hover * {
    color: #00ff67;
    text-decoration: none;
    cursor: url('../img/IconHover.svg') 11 11, auto;
}

a:active,
a:active *{
    color: #00ff67;
    text-decoration: none;
    cursor: url('../img/IconClick.svg') 23 17, auto;
}

.textExtraLarge {
    font-size: 10rem;
    text-transform: uppercase;
    /* width: 100%; */
    color: #000;
}

.bombIcon {
    margin: 6px 5px 6px 0px;
    height: 16px;
}

.animEnter {
    position: relative;
    left: -100%;
}

.paddingLeft-30{
    padding-left: 30px;
}

.paddingRight-30{
    padding-right: 30px;
}

.paddingLeft-4{
    padding-left: 4px;
}
.paddingRight-4{
    padding-right: 4px;
}

.paddingTopBottom-4{
    padding-top: 4px;
    padding-bottom: 4px; 
}
.marginTopBottom-8{
    margin-top: 8px;
    margin-bottom: 8px; 
}
/* --- BORDER --- */

.border-right-2 {
    border-right: 2px solid black;
}

.border-left-2 {
    border-left: 2px solid black;
}

.border-top-2 {
    border-top: 2px solid black;
}

.border-bottom-2 {
    border-bottom: 2px solid black;
}


.border-right-2-w {
    border-right: 2px solid #fff;
}

.border-left-2-w {
    border-left: 2px solid #fff;
}

.border-top-2-w {
    border-top: 2px solid #fff;
}

.border-bottom-2-w {
    border-bottom: 2px solid #fff;
}

.part-body-skill .row,
.part-body-work .row{
    font-size: 0.8rem;
    line-height: 28px;
}

/* --- NAVBAR --- */

.part-navbar {
    background-color: #000;
    color: #fff;
    padding: 10px 30px;
}

.part-navbar * {
    color: #fff;
}

/* --- FOOTER --- */

.part-footer {
    position: fixed;
    bottom: 0px;
    height: 32px;
    border-top: 2px solid #fff;
    background-color: #000;
    color: #fff;
}

.footer-xs {
    width: 32px;
    max-width: fit-content;
}

.part-footer .col {
    min-height: 32px;
    top: 2px;
}

.overflow-hidden{
    overflow: hidden;
}

.homeBtn{
    font-size: 20px;
    line-height: 28px;
    margin: 4px;
    font-family: 'IBMPlexSans-Bold';
    color: #fff;
}

/* --- LOADING --- */

.part-loading {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 1000;
    background: #fff;
}

.centerLecter {
    color: #000;
    font-size: 10rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-transform: uppercase;
}

/* --- BODY HOME--- */

.part-body-home {
    height: calc(100vh - 76px);
    /* 24px(header) + 32px(footer)*/
    position: fixed;
    top: 45px;
    left: 0px;
    /* z-index: -1000; */
    padding: 0;
}

.background-image-home {
    height: 100%;
    width: 100%;
    background: url("../img/immaginiBitmappateSfondo/FacciaLeo.png") no-repeat bottom center fixed;
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-size: 100% auto;
}

.titleText {
    /* height: 7rem; */
    padding: 10px;
}

.titleText img{
    width: calc(100% - 100px);
    height: 100%;
}

.cookieAlert{
    position: fixed;
    bottom: 64px;
    right: 32px;
}

.cookieAlertImage{
    background: #fff;
    border-radius: 20px;
    border: 2px solid black; 
    padding: 10px;
    margin: 8px 0px;
}

.cookieAlertText{
    background: #fff;
    border-radius: 10px;
    border: 2px solid black; 
    padding: 5px;
    margin: 4px;
}

/* --- BODY SKILL--- */

.part-body-skill {
    height: calc(100vh - 76px);
    /* 24px(header) + 32px(footer)*/
    position: fixed;
    top: 45px;
    left: 0px;
    /* z-index: -1000; */
    padding: 0;
    text-transform: uppercase;
}

.background-image-skill {
    height: 100%;
    width: 100%;
    background: url("../img/immaginiBitmappateSfondo/3DPrint.png") no-repeat bottom center fixed;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
}

/* --- BODY about--- */

.part-body-about {
    height: calc(100vh - 76px);
    /* 24px(header) + 32px(footer)*/
    position: fixed;
    top: 45px;
    left: 0px;
    /* z-index: -1000; */
    padding: 0;
}

.background-image-about {
    height: 100%;
    width: 100%;
    background: url("../img/immaginiBitmappateSfondo/ManiLeo.png") no-repeat bottom center fixed;
    -webkit-background-size: auto 80%;
    -moz-background-size: auto 80%;
    -o-background-size: auto 80%;
    background-size: auto 80%;
}

.background-image-about>div {
    font-size: 6rem;
    line-height: 5.5rem;
    text-transform: uppercase;
    overflow-y: scroll;
    max-height: 100%;
    padding: 0 30px;
    -webkit-text-stroke: 1px #fff;
    font-family: 'IBMPlexSans-bold';
}

.background-image-about>div *{
    font-family: 'IBMPlexSans-bold';
}

#DownloadBtn{
    height: 3.5rem;
}

.dropBomb{
    height: 2rem;
    line-height: 4rem;
    vertical-align: baseline;
}
/* --- BODY WORK--- */

.part-body-work {
    height: calc(100vh - 76px);
    /* 24px(header) + 32px(footer)*/
    position: fixed;
    top: 45px;
    left: 0px;
    /* z-index: -1000; */
    padding: 0;
    text-transform: uppercase;
}

.background-image-work {
    height: 100%;
    width: 100%;
    background: url("../img/immaginiBitmappateSfondo/Works.png") no-repeat bottom center fixed;
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-size: 100% auto;
}

/* --- BODY CONTACT--- */

.part-body-contact {
    height: calc(100vh - 76px);
    position: fixed;
    top: 45px;
    left: 0px;
    text-align: center;
    align-items: center;
    padding: 0;
    text-transform: uppercase;
}

.part-body-contact .textExtraLarge{
    width: 100%;
    margin: 0;
    font-family: 'IBMPlexSans-Bold';
}


.part-body-ContactMobile {
    height: 100%;
    position: fixed;
    left: -20%;
    padding: 0;
    text-transform: uppercase;
    top: 0px;
    width: 140%;
}

.part-body-ContactMobile, 
.part-body-ContactMobile *{
    font-family: 'IBMPlexSans-Bold';
}


/* --- MYMARQUEE --- */
.marquee {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    top: 0px;
    overflow-y: hidden;
}

.marquee div {
    position: absolute;
    white-space: nowrap;
    left: 0%;
    height: 100%;
}


.marquee-reversed {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    top: 0px;
    overflow-y: hidden;
}

.marquee-reversed div {
    position: absolute;
    white-space: nowrap;
    right: 0%;
    height: 100%;
}

table td, table td * {
    vertical-align: top;
    line-height: 28px;    
}

.bodyTextFont *{
    font-size: 0.8rem;
}

/* --- phonePopupContainer --- */
.phonePopupContainer{
    position: fixed;
    width: 100vw;
    height: 100vh;
}

.phonePopupNumber{
    font-size: 8rem;
    background-color: #fff;
    border: 2px solid black;
    width: fit-content;
    padding: 30px;
    line-height: 8rem;
    font-family: 'IBMPlexSans-Bold';
    margin: auto;
    position: relative;
}