:root {
    --kwprimary: #e85517;
    --kwsecondary: #e4281b;
    --kwtertiary: #00E1FF;
    --kwgrey: #f4f4f4;
    --kwdark: #010103;
    --kwbodyfontfamily: "sourcecode", "Arial", sans-serif;
    --kwprimaryfontfamily: "barlow_condensedbold", "Arial", sans-serif;
    --kwbodyfontsize: 18px;
    --kwbodylineheight: 1.55;
    --kwsmalltext: 0.8em;
    --kwbigtext: 1.2em;
    --kwmarginsmall: 15px;
    --kwmarginmedium: 25px;
    --kwmarginlarge: 80px;
    --kwpaddingtop: 0;
    --kwheaderheight: 175px;
    --kwlogoheaderheight: 120px;
    --kwwidthcontainer: auto;
    --kwmargincontainer: 15px;
}
body {
    font-family: var(--kwbodyfontfamily);
    font-size: var(--kwbodyfontsize);
    line-height: var(--kwbodylineheight);
    color: #fff;
    padding-top: var(--kwpaddingtop);
    margin: 0;
    text-align: center;
    background-image: url(/images/graphics/bg-mobile.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
:target {
    scroll-margin-top: var(--kwmarginmedium);
}
html {
    font-size: var(--kwbodyfontsize);
    scrollbar-color: #00E1FF #00071d;
    scrollbar-width: thin;
    scroll-behavior: smooth;
}
p, h1, h2, h3, h4, p + img, ul, ul + img, ol, ol + img, .kwMarginTop {
    margin-top: var(--kwmarginmedium);
    margin-bottom: 0;
}
p + p, h1 + p, h2 + p, h3 + p, ul + p, p + ul, h1 + ul, h2 + ul, h3 + ul, ul + ul, ol + p, p + ol, h1 + ol, h2 + ol, h3 + ol, ol + ol, .kwList > li + li, .kwMargin, .kwBigText + h1 {
    margin-top: var(--kwmarginsmall);
}
.kwMarginSection {
    margin-top: var(--kwmarginlarge);
}
.kw100 {
    width: 100%;
}

.kwImgInline {
    max-width: 100%;
    height: auto;
}
img {
    max-width: 100%;
    height: auto;
}

/* scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #080b3e;
}
::-webkit-scrollbar-thumb {
    background: #00E1FF;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #00071d;
    opacity: 0.8;
}

/* selection */
*::-moz-selection { background:#00E1FF; color:#080b3e; }
*::-webkit-selection { background:#00E1FF; color:#080b3e; }
*::selection { background:#00E1FF; color:#080b3e; }

/* fonts */
@font-face {
    font-family: 'barlow_condensedbold';
    src: url('fonts/barlowcondensed-bolditalic-webfont.eot');
    src: url('fonts/barlowcondensed-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
        url('fonts/barlowcondensed-bolditalic-webfont.woff2') format('woff2'),
        url('fonts/barlowcondensed-bolditalic-webfont.woff') format('woff'),
        url('fonts/barlowcondensed-bolditalic-webfont.ttf') format('truetype'),
        url('fonts/barlowcondensed-bolditalic-webfont.svg#barlow_condensedbold_italic') format('svg');
    font-weight: 700;
    font-style: italic;
}
@font-face {
    font-family: 'barlow_condensedbold';
    src: url('fonts/barlowcondensed-bold-webfont.eot');
    src: url('fonts/barlowcondensed-bold-webfont.eot?#iefix') format('embedded-opentype'),
        url('fonts/barlowcondensed-bold-webfont.woff2') format('woff2'),
        url('fonts/barlowcondensed-bold-webfont.woff') format('woff'),
        url('fonts/barlowcondensed-bold-webfont.ttf') format('truetype'),
        url('fonts/barlowcondensed-bold-webfont.svg#barlow_condensedbold') format('svg');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'sourcecode';
    src: url(fonts/SourceCodePro-VariableFont_wght.ttf);
    font-weight: 100 900;
    font-stretch: 100%;
    font-style: normal;
}
@font-face {
    font-family: 'sourcecode';
    src: url(fonts/SourceCodePro-Italic-VariableFont_wght.ttf);
    font-weight: 100 900;
    font-stretch: 100%;
    font-style: italic;
}
h1 {
    font-size: 2rem;
    line-height: 1.2;
    text-transform: uppercase;
    font-family: var(--kwprimaryfontfamily);
}
h2 {
    font-size: 1.8rem;
    line-height: 1.2;
    text-transform: uppercase;
    font-family: var(--kwprimaryfontfamily);
}
h3 {
    font-size: 1.5rem;
    line-height: 1.2;
    font-family: var(--kwprimaryfontfamily);
}

/* cta */
.kwCta {
    color: unset;
    padding: 10px 35px;
    text-transform: uppercase;
    margin: var(--kwmarginmedium) auto 0;
    transition: ease-out 0.2s;
    cursor: pointer;
    display: inline-block;
    text-shadow: none;
    background: none;
    font-weight: 700;
    position: relative;
    font-size: 1rem;
    border: 3px solid;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(255,255,255,.3);
}
.kwCta:hover, .kwCta:focus {
    background: var(--kwprimary);
    color: unset;
}

/* full section */
.kwFullSection {
    position: relative;
}
.kwFullImg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    height: 100vh;
    min-height: 100%;
    object-fit: cover;
    margin: 0;
    padding: 0;    
}
.kwTextAbs {
    width: 100%;
    min-height: 100vh;;
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
    color: #fff;
    background-color: rgba(0,0,0,.3);
    text-shadow: 0 0 5px rgba(0,0,0);
    filter: drop-shadow(0px 0px 20px rgba(0,0,0,.3));
}
a {
    color: var(--kwprimary);
    text-decoration: none;
}

/* atf */
.kwLogoLanding {
    max-width: 270px;
    height: auto;
    filter: drop-shadow(0 0 10px rgba(255,255,255,.3)); 
}
.kwTitleEdizione {
    display: inline-block;
    background: #fff;
    color: var(--kwdark);
    font-weight: 700;
    text-transform: uppercase;
    padding: 0 15px;
    font-size: 1.2rem;
    line-height: 1.5;
}
.kwLightImg {
    border: 2px solid #fff;
    filter: drop-shadow(0 0 10px rgba(255,255,255,.3));
}
.kwNoBorderImg {
    border: none;
}

/* footer */
footer.kwSection {
    padding-bottom: var(--kwmarginsmall);
    font-size: 0.6rem;
    text-transform: uppercase;
}

/* sezioni */
.kwSection {
    padding: var(--kwmarginlarge) var(--kwmargincontainer);
}
.kwSection + .kwSection {
    padding-top: 0;
}
.kw2ColSection {
    display: grid;
    grid-gap: var(--kwmarginlarge);
}
.kwYtVideo {
    position: relative;
    padding-bottom: 56.25%;
}
.kwVerticalYtVideo {
    padding-bottom: 177.77%;
}
.kwYtVideo > iframe {
    position: absolute;
    left: 0;
    top: 0;
}
.kwStrictArea {
    width: 100%;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

/* video */
section.vid {
    height: 600vh;
    position: relative;
}
section.vid::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(/images/graphics/bg-mobile.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    opacity: 0.5;
    mix-blend-mode: multiply;
}
section.vid div.holder {
    position: sticky;
    top: 0;
}
section.vid video {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}
section.vid div.story {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    color: var(--secondary-color);
}
.kwCellStory {
    height: 100vh;
    display: grid;
    align-content: center;
    position: relative;
    z-index: 2;
}
.kwCellStory.kwSection {
    padding-top: 0;
    padding-bottom: 0;
}
.kwLogoBand {
    margin-left: auto; 
    margin-right: auto; 
}
.kwLogoBand.kwLightImg {
    border: none;
}

/* animation */
.floating { 
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }   
}

@media screen and (max-width: 767px) {
    .kwLogo {
        width: 300px;
        height: auto;
    }
    h1 {
        font-size: 1.7em;
    }
    h2 {
        font-size: 1.6em;
    }
}

@media screen and (min-width: 768px) {
    :root {
        --kwbodyfontsize: 20px;
        --kwwidthcontainer: 720px;
    }
    body {
        background-image: url(/images/graphics/bg-desktop.jpg);
    }
    .kwSection {
        padding: var(--kwmarginlarge) calc((100% - var(--kwwidthcontainer))/2);
    }

    /* sezioni */
    .kw2ColSection {
        grid-template-columns: repeat(2,1fr);
        align-items: center;
    }
}

@media screen and (min-width: 992px) {

    .kwLogoLanding {
        max-width: 320px;
    }

    :root {
        --kwmarginlarge: 100px;
        --kwmarginsmall: 20px;
        --kwwidthcontainer: 940px;
    }
}

/* essential */
*:first-child {
    margin-top: 0;
}