/*
Theme: 24.7
*/

/*
@font-face {
    font-family: 'ABCDiatypeRegular';
    src: url('../assets/fonts/ABCDiatype-Regular.eot');
    src: url('../assets/fonts/ABCDiatype-Regular.eot?#iefix') format('embedded-opentype'),
        url('../assets/fonts/ABCDiatype-Regular.woff2') format('woff2'),
        url('../assets/fonts/ABCDiatype-Regular.woff') format('woff'),
        url('../assets/fonts/ABCDiatype-Regular.ttf') format('truetype'),
        url('../assets/fonts/ABCDiatype-Regular.svg#ABCDiatype-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}
*/

@font-face {
    font-family: 'TWKLausanne-800';
    src: url('../assets/fonts/TWKLausanne-800.woff2') format('woff2'),
        url('../assets/fonts/TWKLausanne-800.woff') format('woff'),
        url('../assets/fonts/TWKLausanne-800.ttf') format('truetype'),
    font-weight: normal;
    font-style: normal;
}


:root {
    --size-body: 0.9vw;
    --line-body: 1.2em;
    
    --size-quitemedium: 1.5vw;
    --line-quitemedium: 1.2em;
    
    --size-medium: 2.2vw;
    --line-medium: 1.2em;
    
    --size-big: 7vw;
    --line-big: 0.88em;
    
    --size-courier: 0.7vw;
    --line-courier: 1.2em;
    
    --color-accent: #FF0000;
    
}


html{
    overflow: auto;
    overflow-x: hidden;
}
body {
    font-family: 'TWKLausanne-800';
    font-size: var(--size-body);
    line-height: var(--line-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    background-color: var(--color-accent);
    letter-spacing: initial;
    text-transform: initial;
    text-align: initial;
}


body, select, input, textarea {
    color: #000;
}

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

/* Custom text-selection colors (remove any text shadows: http://twitter.com/miketaylr/status/12228805301) */
::-moz-selection{background: var(--color-accent); color: #000; text-shadow: none;}
::selection {background: var(--color-accent); color: #000; text-shadow: none;}

/*	j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: #000; color: #000;}

ins {background-color: #fff; color: #000; text-decoration: none;}
mark {background-color: #fff; color: #000; font-style: italic; font-weight: bold;}

/* Mozilla dosen't style place holders by default */
input:-moz-placeholder { color:#a9a9a9; }
textarea:-moz-placeholder { color:#a9a9a9; }

/*
p {
    margin-bottom: 1em;
}
*/

/*
#invertedcursor {
    position: fixed;
  border-radius: 50%;
  transform: translateX(-50%) translateY(-50%);
  pointer-events: none;
  left: -100px;
  top: 50%;
  mix-blend-mode: difference; 
  background-color: var(--color-accent);
  z-index: 10000;
  height: 35px;
  width: 35px;
}
*/

/*
-------------------------------------------------------------------------------*/

.h1 {
    font-size: var(--size-big);
    line-height: var(--line-big);
}

body {
    padding: 10px;
}
.hover-image {
    position: absolute;
    width: calc(100% - 20px);
    left: 10px;
    top: 10px;
    mix-blend-mode: lighten;
}

.text-intro {
    display: flex;
    flex-direction: row;
    padding: 0;
    position: fixed;
    z-index: 1000;
    width: calc(100% - 20px);
    top: calc(50vh - 0.6em);
}
.text-intro .column {
    
}
.text-intro .column:nth-of-type(1) {
    width: 50%;
}
.text-intro .column:nth-of-type(2) {
    width: 25%;
    padding-left: 5px;
}
.text-intro .column:nth-of-type(3) {
    width: 25%;
    text-align: right;
}

.image-first {
    display: block;
    width: 100%;
}

.main-content {
    margin: 2em 0;
}

.image-second {
    width: 100%;
    display: block;
}

.buy-link {
    font-size: var(--size-medium);
    line-height: var(--line-medium);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: absolute;
    width: calc(100% - 20px);
    margin-top: 48vh;
        z-index: 5000;
    
}
.buy-link:hover,
.buy-link:hover a {
    color: #d4d4d4;
    
}

.interni {
    width: 100%;
    display: block;
}

img.moto {
    position: absolute;
    width: 40%;
    left: 20%;
    margin-top: -10vw;
}

.multe {
    display: block;
    margin-left: -10px;
    width: 100vw;
    max-width: 100vw;
}
.footer-logo {
    margin-top: 2vw;
    display: block;
    width: 100%;
}

.fixed-footer {
    position: fixed;
    left: 0;
    width: 100%;
    padding: 0 10px;
    bottom: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}





@media screen and (max-width: 960px) {
    
    
    :root {
        --size-body: 3vw;
        --line-body: 1.2em;

        --size-quitemedium: 2.5vw;
        --line-quitemedium: 1.2em;

        --size-medium: 5vw;
        --line-medium: 1.2em;

        --size-big: 20vw;
        --line-big: 0.88em;

        --size-courier: 2.5vw;
        --line-courier: 1.2em;
    }
    
    
    .boockup {
        zoom: 50%;
    }
    .container {
        width: calc(100vw - 20px);
            height: 100vw;
    }
    
    .buy-link {
    margin-top: 48vw;
    }
    
    
}