@media only screen and (min-width:0px){#wrapper {max-width: 100%; margin: 0;padding: 0;} #topnav ul li{font-size:0.7em;} body{font-weight: 400;font-size: 1em;}}
@media screen and (min-device-width: 400px){#topnav ul li{font-size:0.9em;}}
@media screen and (orientation:landscape){#topnav ul li{font-size:0.9em;}}
@media only screen and (min-width:1168px){#wrapper {margin:0;padding:0;} #content{max-width:calc(50vw - 28px)} }
@media only screen and (min-width:2000px) {body{font-size: 1.5em;}}
/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media (max-width: 800px) {.box {flex: 100%;} #pict{margin-top:0;} #name{color:#000000;font-weight:700;line-height:0;padding-left:1%;} #surname{color:#000000;font-weight:700;line-height:0;font-size: 0.8em;padding-left:1%;}}
@media (min-width: 800px) {#pict{margin-top:-3em;} #name{color:#ffffff;font-weight:700;line-height:0;padding-left:1%;} #surname{color:#ffffff;font-weight:700;line-height:0;font-size: 0.8em;padding-left:1%;}}
@media screen and (orientation:portrait){.box {flex: 100%;} #pict{margin-top:0;} #name{color:#000000;font-weight:700;line-height:0;padding-left:1%;} #surname{color:#000000;font-weight:700;line-height:0;font-size: 0.8em;padding-left:1%;}}
html {min-height:100vh;min-width:100;}
body {
    min-height: 100vh;
    display:flex; 
    flex-direction: column;
    background-color: #faf8f5;
    color: #242424;
    font-family: "Avenir Next LT Pro",sans-serif;
    line-height: 1.5;
    margin:0;
    padding:0;
}
h1 .title{font-size: 170%;font-weight:700;text-align:center;}

#imp_content p.addresse {font-size:70%;}

#topnav	{width:100%;}
#topnav ul li	{display: inline-block;padding:0 1em;}
#topnav ul li a	{color: #000000;text-decoration:none;letter-spacing: normal;line-height: 1.2;}
#topnav ul li a img {height:1em;}
#topnav a:focus,a:hover,a:active {color:#5d4405;text-decoration:none;}
#topnav ul{width:100%;padding:0;text-align:center;}

h1 {font-size: 170%; text-align:center;}
h2 {font-size: 120%; text-align:left;}

#content ul {list-style-type: none;padding:0;text-align:justify;}
#content p {text-align:center;}
#content a {color: #5d4405;text-decoration:none;}

#imp_content {margin:0 10%;}
#imp_content p {text-align:left;}
#imp_content a {color: #5d4405;text-decoration:none;}
#wrapper {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
}

.box {
  width:calc(40vw - 28px);
  margin:0; 
}

.box1 {align-self: flex-end;line-height: 1.0;padding:0 5%;z-index: 2;}
.box2 {padding:0 5%;z-index: 1;}
.box3 {align-self: flex-end;margin:0 auto;}
.box4 {max-width:400px;margin:0 auto;}
#pict img {width:100%;}
#content video {display: block; margin:2% auto;width:400px;}