/* Foglio di stile di "Ing. Alessandro Negrini" (30 marzo 2022, v1.0) */

:root {

  /* Colori */

  --var-blu-acciaio:        #456D83; /* Blu acciaio */ 
  --var-blu-prussia:        #003153; /* Blu di Prussia */
  --var-grigio-giaccio:     #EBEBEB; /* Sikkens VN.00.86 */
  --var-grigio-azzurro:     #D8E3E9; /* Nippon Paint Soft Tendrils - NP OW 1055 P */
  --var-grigio-antracite:   #444444; /* Midnight Gray - Black Sea / P226-N7 */
  --var-grigio-ferro:       #B0B0B0; /* Caparol Schiefer 6 */
  --var-grigio-chiaro:      #D3D3D3; /* Lightgray  */
  --var-grigio-tenue:       #F7F7F7; /* Earthborn Bugle */
  --var-bianco:             #FEFEFE; /* Performance White */

  /* Caratteri */

  // --var-font-fam-human:     "Raleway", "Helvetica Neue", "Helvetica", "Arial", "Sans-Serif";
  --var-font-fam-human:     "Montserrat", "Helvetica Neue", "Helvetica", "Arial", "Sans-Serif";

  /* Contenuti e post */

  --var-carattere-piccolo:  0.8em;
  --var-border-radius:      0px;
}

html {
    height:                 100%;
}

body {
    font-family:            var(--var-font-fam-human);
    background-color:       var(--var-grigio-azzurro);
    margin:                 0;
}

h2 {
    color:                  var(--var-blu-prussia);
    font-size:              1em;
    line-height:            1.5;
}

div.riquadro-interno {
    padding-left:           1.5em;
    padding-right:          1.5em;
}

p, ul {
    color:                  var(--var-grigio-antracite);
    font-size:              1em;
    line-height:            1.5;
}

p.separatore {
    border:                 solid 1px var(--var-grigio-chiaro);
    border-width:           0 0 1px 0;
    line-height:            0.9;
}

p.indent1 {
    text-indent:            1.0em;
}

p.piccolo-grigio {
    color:                  var(--var-grigio-antracite);
    font-size:              var(--var-carattere-piccolo);
    line-height:            1.1;
}

p.centrato {
    margin:                 0 auto 0 auto;
    text-align:             center;
}

p.centrato_b {
    text-align:             center;
    line-height:            1.5;
}

p.a-destra {
    text-align:             right;
}

a.big-blue {
    color:              var(--var-blu-prussia);
    font-size:          300%;
    margin:             0.3em 0.3em 0.3em 0.3em;
    line-height:        1.5;
}

ul {
    display:                block;
    line-height:            1.55;
    list-style:             none;
    margin-left:            0;
    overflow:               auto;
    padding-left:           0;
}

li {
    padding-left:           1em;
    text-indent:            -1em;
}

li:before {
    content:                '–';
    padding-right:          0.5em;
}

/* Menù di navigazione. Impostazioni generali */

nav.menu-orizzontale-esteso {
    display:                none;
    grid-template-columns:  100%;
    gap:                    0;
    color:                  var(--var-grigio-giaccio);
    background-color:       var(--var-blu-prussia);
    // border:                 1px solid ghostwhite;
    margin:                 0 auto auto auto;
    max-width:              100%;
    padding:                0.7em 0 0.5em 0;
    align-items:            flex-start;
    vertical-align:         middle;
    text-align:             center;
}

nav.menu-orizzontale-compatto {
    display:                grid;
    grid-template-columns:  20% 60% 20%;
    gap:                    0;
    color:                  var(--var-grigio-giaccio);
    background-color:       var(--var-blu-prussia);
    margin:                 0 auto auto auto;
    max-width:              100%;
    padding:                0.7em 0 0.5em 0;
    align-items:            flex-start;
    vertical-align:         middle;
    text-align:             center;
}

nav.menu-verticale {
    display:                none;
    color:                  var(--var-grigio-giaccio);
    background-color:       var(--var-blu-prussia);
    // border:                 1px solid ghostwhite;
    margin:                 0 auto auto auto;
    max-width:              100%;
    overflow:               hidden;
    transition:             0.7s all ease;
    padding:                0.1em 0 0.3em 0;
    vertical-align:         middle;
    text-align:             center;
}

a.nav-white, a.nav-white-icons {
    // border:                 1px solid ghostwhite;
    color:                  var(--var-grigio-giaccio);
    font-size:              120%;
    padding:                0.15em 0 0 0;
    text-decoration:        none;
    vertical-align:         sub;
}

a.nav-white:hover:not(.active), a.nav-white:focus {
    opacity:            0.4;
    transition:         0.7s all ease;
    -moz-transition:    0.7s all ease;
    -webkit-transition: 0.7s all ease;
}

a.nav-white-icons:hover:not(.active), a.nav-white-icons:focus {
    opacity:            0.4;
    transition:         0.7s all ease;
    -moz-transition:    0.7s all ease;
    -webkit-transition: 0.7s all ease;
}

a.nav-white-icons {
    cursor:             pointer;
    font-size:          150%;
}

#nav-close-btn {
    display:            none;
}

p.nav-white {
    color:              var(--var-grigio-giaccio);
    font-size:          80%;
}

/* Body. Impostazioni generali del corpo-pagina */

section.contenitore-principale {
    display:                grid;
    grid-template-columns:  100%;
    gap:                    0;
    // border:                 1px solid ghostwhite;
    margin:                 0.7em auto 0.7em auto;
    padding:                0;
    overflow:               auto;
    align-items:            flex-start;
    vertical-align:         top;
    text-align:             center;
    width:                  100%;
    max-width:              100%;
}

section.colonna-sinistra, .colonna-destra {
    display:                block;
    margin:                 0;
    padding:                0;
    // border:                 1px solid ghostwhite;
    overflow:               hidden;
    vertical-align:         text-top;
    text-align:             center;
    max-width:              100%;
}

article.contenuto {
    display:                block;
    margin:                 0.3em auto 0.3em auto;
    background-color:       var(--var-bianco);
    border:                 solid 1px var(--var-grigio-ferro);
    border-radius:          var(--var-border-radius);
    -moz-border-radius:     var(--var-border-radius);
    box-shadow:             0.3em 0.3em 0.3em var(--var-grigio-ferro);
    overflow:               auto;
    padding:                0;
    text-align:             left;
    vertical-align:         top;
}

article.contenuto::after {
    content:                "";
    clear:                  both;
    display:                table;
}

img.photo-box {
    display:                block;
    height:                 auto;
    margin:                 0;
    max-width:              100%;
}

/* Pulsanti, call-to-action e call-out */

a.call-out {
    border:           solid 1px var(--var-blu-prussia);
    color:            var(--var-blu-prussia);
    display:          block;
    float:            none;
    font-size:        1.0em;
    margin:           0 auto 1.0em auto;
    min-width:        12.5em;
    max-width:        25.0em;
    padding:          0.5em 0.5em 0.5em 0.5em;
    text-decoration:  none;
    text-align:       center;
    text-transform:   uppercase;
}

a.call-out:hover {
    opacity:          0.7;
    text-decoration:  underline;
}

a.tag, span.tag {
    color:            var(--var-blu-acciaio);
    font-size:        var(--var-carattere-piccolo);
    line-height:      1.1;
    text-decoration:  none;
}

a.plain-link {
    color:              var(--var-blu-acciaio);
    text-decoration:    none;
}

a.plain-grey {
    color:              var(--var-grigio-antracite);
}

/* Footer. Impostazioni generali del piè di pagina */

footer.main-footer {
    color:              var(--var-grigio-giaccio);
    background-color:   var(--var-blu-prussia);
    margin:             1em auto auto auto;
    max-width:          100%;
    padding:            0.5em 0 1em 0;
    text-align:         center;
}

div.info-footer {
    margin:             0 auto 0 auto;
    // border:             1px solid white;
    max-width:          325px;
}

a.big-white {
    color:              var(--var-grigio-giaccio);
    font-size:          200%;
    margin:             0.3em 0.3em 0.3em 0.3em;
}

a.big-white:hover:not(.active), a.big-white:focus {
    opacity:            0.4;
    transition:         0.7s all ease;
    -moz-transition:    0.7s all ease;
    -webkit-transition: 0.7s all ease;
}

p.white-footer {
    color:              var(--var-grigio-giaccio);
    font-size:          80%;
}

a.white-footer {
    color:              var(--var-grigio-giaccio);
    text-decoration:    none;
}

a.white-footer:hover:not(.active), a.white-footer:focus {
    opacity:            0.4;
    transition:         0.7s all ease;
    -moz-transition:    0.7s all ease;
    -webkit-transition: 0.7s all ease;
}

/* Media Queries */

@media only screen and (max-width: 600px) {

/* Smartphone verticale */

}
 
@media only screen and (min-width: 601px) {

/* Tablet */

article.contenuto {
    width:                  480px;
    max-width:              480px;
    min-width:              480px;
}

}

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

/* Notebook */

}

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

/* Notebook wide-screen */

nav.menu-orizzontale-esteso {
    display:                grid;
    grid-template-columns:  25% 20% 15% 15% 15% 10%;
}

nav.menu-orizzontale-compatto {
    display:                none;
}

nav.menu-verticale {
    display:                none;
}

/* Se giro il dispositivo mentre il menù verticale è aperto, lo chiudo */

#menu-verticale {
    height:                 0;
}

section.contenitore-principale {
    grid-template-columns:  50% 50%;
}

section.colonna-sinistra, .colonna-destra {
    display:                inline-block;
}

section.colonna-sinistra {
    text-align:             right;
    padding-right:          10px;
}

section.colonna-destra {
    text-align:             left;
    padding-left:           10px;
}

article.contenuto {
    display:                inline-block;
}

}
 
@media only screen and (min-width: 1100px) {

/* Desktop */

}