/*
================================================================================
    RESET
================================================================================
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

table { border-collapse: collapse; border-spacing: 0; }

html, body {
    height: 100%;
    -webkit-text-size-adjust: 100%; /* Per impedire dimensioni strane del testo su ipad e iphone */ 
    -webkit-font-smoothing: antialiased; /* Per impedire comportamenti strani di Safari */
    -moz-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -ms-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    font-smoothing: antialiased;
}

html { overflow: -moz-scrollbars-vertical;  overflow-y: scroll; }

body { line-height: 1; background-color: rgba(250, 250, 250, 1); }

/*
================================================================================
    FONTS
================================================================================
*/

@font-face {
    font-family: h_roman;
    src: url("../fonts/h_roman.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: h_roman;
    src: url("../fonts/h_italic.otf") format("opentype");
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

/*
================================================================================
    SVG
================================================================================
*/

svg.gv_logo { width: 20%; }

svg.ve_logo
{
    position: relative;
    top: -0.6rem;
    width: 58%;
    transition: fill 0.6s ease-in-out;
    fill: rgba(200, 200, 200, 1);
}

svg.ve_logo:hover { fill: rgba(0, 132, 212, 1); }

svg.ui_logo { width: 68%; transition: fill 0.6s ease-in-out; fill: rgba(200, 200, 200, 1); }

svg.ui_logo circle { transition: fill 0.6s ease-in-out; fill: rgba(200, 200, 200, 0.6);}

svg.ui_logo:hover { fill: rgba(210, 38, 48, 1); }

svg.ui_logo:hover circle { fill: rgba(1, 33, 105, 1); }

svg.ai_logo { width: 65%; transition: fill 0.6s ease-in-out; fill: rgba(200, 200, 200, 1); }

svg.ai_logo > path { transition: fill 0.6s ease-in-out; }

svg.ai_logo:hover { fill: rgba(99, 102, 106, 1); }

svg.ai_logo:hover > path { fill: rgba(254, 80, 0, 1);}

/*
================================================================================
    CONTENT
================================================================================
*/

html { overflow: hidden; }

div.section_1 {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    position: fixed;
    top: 20%;
}

div.section_2 {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    position: fixed;
    bottom: 30%;
    padding: 0 20% 0 20%;
}

div.section_2 div {
    width: 33%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

div.section_2 div a {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

div.copy {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    position: fixed;
    bottom: 0;
    padding: 0.5rem;
    background-color: rgba(0, 0, 0, 1);
}

div.copy p {
    font-family: h_roman, Helvetica, Arial, sans-serif;
    font-size: 0.7rem;
    font-style: italic;
    color: rgba(255, 255, 255, 1);
}

/*
================================================================================
    RESPONSIVE
================================================================================
*/

@media screen and (max-width: 1024px) {
    div.section_1 { top: 14%; }
    svg.gv_logo { width: 40%; }
    div.section_2  { flex-direction: column; bottom: 18%; }
    div.section_2 div { width: 100%; margin-bottom: 18%; }
    div.section_2 div:last-child { margin-bottom: 0;}
    svg.ve_logo { width: 48%; }
    svg.ui_logo { width: 58% ;}
    svg.ai_logo { width: 55% ;}
}

@media screen and (max-width: 768px) {
    div.section_1 { top: 14%; }
    svg.gv_logo { width: 50%; }
    div.section_2  { flex-direction: column; bottom: 18%; }
    div.section_2 div { width: 100%; margin-bottom: 18%; }
    div.section_2 div:last-child { margin-bottom: 0;}
    svg.ve_logo { top: 0;}
}