@font-face
  {
    font-display    : swap;
    font-family     : 'NunitoSans';
    font-style      : normal;
    font-weight     : normal;
    src             : local('NunitoSans'), url('NunitoSans.woff') format('woff');
  }

*,
*::before,
*::after
  {
    box-sizing      : border-box;background: transparent;
  }

/* ####################################################################################### */

/* ---------- STRUCTURE ---------------------------------------------------- */

/* ####################################################################################### */

body
  {
    width           : 100%;
    display         : flex;
    flex-wrap       : wrap;
    justify-content : center;
    padding         : 0;
    margin          : 0;
    color           : #445;
    font-family     : 'NunitoSans', sans-serif;
    font-size       : 1em;
    font-weight     : normal;
    line-height     : 1.5em;
  }

header
  {
    width           : 100%;
	padding         : 0;
    margin          : 0;
	position        : fixed;
  }

nav
  {
	width           : 10%;
	height          : 100vh;
	padding         : 2em 0 0 0;
    background      : #004b9b;
	color           : #fff;
  }

nav a
  {
	color           : #fff;
  }

main
  {
    width           : 90%;
	padding         : 0;
    margin          : 0 0 0 10%;
	background      : transparent;
  }

article
  {
 	padding         : 0 5em 0 1em;
    margin          : auto 0 0 10%;
    background      : transparent;
	font-size       : 1em;
  }

footer
  {
    width           : 10%;
	padding         : 1em;
    margin          : 0;
    line-height     : 1.2em;
	font-size       : 0.7em;
	position        : fixed;
	bottom          : 0;
	left            : 0;
	color           : #fff;
  }

footer a
  {
	color           : #fff;
  }

.c2grid {
    display              : grid;
    grid-template-columns: 33% auto;
    gap                  : 1em;
}

.c3grid {
    display              : grid;
    grid-template-columns: 32% auto 32%;
    gap                  : 1em;
}

/* ####################################################################################### */

/* ---------- ELEMENTS ----------------------------------------------------- */

/* ####################################################################################### */


h1
  {
    font-size       : 2em;
  }

h1#top
  {
    width           : 100%;
	height          : 80vh;
	padding         : 2em 0 0 0;
    margin          : 0;
    color           : #fff;
    text-align      : center;
    font-size       : 6vw;
	font-family     : "Arial Black", sans-serif;
	text-shadow     : 2px 2px 2px #336;
    line-height     : 1.25em;
    font-weight     : normal;
    background      : #fff url(../_img/gio-dagliano-head.jpg) no-repeat 50% 0%;
	background-size : auto 100%;
  }

h1#top span
  {
    display         : inline-block;
	background      : url(../_img/head.png) repeat;
	padding         : 0.5em 1em;
	margin          : 2em auto 0;
  }

h2
  {
    font-size       : 1.75em;
	padding-top     : 3em !important;
  }

h3
  {
    font-size       : 1.5em;
	line-height     : 2em;
  }

h4
  {
    font-size       : 1.25em;
  }

h5
  {
    font-size       : 1.15em;
  }

h6
  {
    font-size       : 1em;
  }

a
  {
    color           : #448;
    text-decoration : none;
	z-index         : 100 !important;
  }

a,
a:link,
a:visited,
a:hover,
a:active,
a:focus
  {
    border          : 0;
    outline         : 0;
  }

a:hover
  {
    color           : #1e90ff;
  }

img
  {
    max-width       : 100%;
  }

address
  {
    margin          : 1em auto;
    font-style      : normal;
	line-height     : 1.6em;
  }

p, li
  {
    line-height     : 1.6em;
  }

ul
  {
	list-style-type : none;
	padding         : 0;
	margin          : 0;
	text-indent     : 0;
  }

nav li
  {
	padding         : 1em;
  }

td
  {
     vertical-align : top;
  }

td:nth-child(2)
  {
     padding-left   : 1em;
  }

/* ####################################################################################### */

/* ---------- IDs & CLASSES ------------------------------------------------ */




/* ####################################################################################### */

/*##############################################################################################
IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG
################################################################################################*/

img
  {
    margin          : 1em auto;
    border          : 1px solid #eee;
    border-radius   : 5px;
    box-shadow      : 3px 3px 8px #669;
  }

/* ####################################################################################### */

/* ---------- Gallery ---------------------------- */

/* ####################################################################################### */

a.thumb
  {
    text-align      : center;
    border          : 0 !important;
  }

a.thumb img
  {
    display         : block;
    border          : 1px solid #eee;
    border-radius   : 8px;
    box-shadow      : 3px 3px 4px #888;
    padding         : 2px;
    margin          : 10px auto;
    width           : 100%;
	height          : 100%;
	max-height      : 500px;
    text-align      : center;
    object-fit      : cover;
  }

a#gio img
  {
    display         : block;
	float           : right;
    border          : 1px solid #eee;
    border-radius   : 8px;
    box-shadow      : 3px 3px 4px #888;
    padding         : 2px;
    margin          : -6em auto 0;
    width           : 300px;
	height          : 300px;
    text-align      : center;
    object-fit      : cover;
  }

.illustration
  {
    border          : 1px solid #eee;
    border-radius   : 8px;
    box-shadow      : 3px 3px 4px #888;
    padding         : 2px;
    margin          : 1em;
	height          : 400px;
    text-align      : center;
  }

.c2grid figure

  {
    text-align      : center;
  }


/* ####################################################################################### */

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

@media (max-width: 1260px)
{

h1#top
  {
    font-size       : 2em;
    line-height     : 1.2em;
	padding-top     : 8em;
  }

main
  {
    width           : 100%;
    margin          : 0;
  }

article
  {
 	padding         : 0 0.5em;
    margin          : auto 0;
  }

nav
  {
	width           : 100%;
	height          : 5em;
	padding         : 0.5em;
    background      : #004b9b;
	color           : #fff;
  }

li
  {
    line-height     : 1.4em;
	padding-left    : 0;
	margin-left     : 0;
  }

nav ul
  {
    display              : grid;
    grid-template-columns: 25% 25% 25% 25%;
    gap                  : 0;
  }

nav li
  {
	border          : 1px solid #011;
	text-align      : center;
  }

footer
  {
    width           : 100%;
	padding         : 0 1em;
    margin          : 0;
    line-height     : 1.2em;
	font-size       : 0.7em;
	position        : relative;
	bottom          : 0;
	left            : 0;
    background      : #004b9b;
	color           : #fff;
  }

}

@media (max-width: 600px)
{

h1#top
  {
	background-size : 100% auto;
	margin-top      : 4em;
	padding-top     : 3em;
  }

a#gio img
  {
	float           : none;
    width           : 200px;
	height          : 200px;
	margin-top      : 5em !important;
  }

.c2grid,
.c3grid
  {
    display         : block;
  }

#aktuell
  {
	margin-top: -10em !important;
  }




}

/* EOF#################################################################################### */