/* General Demo Style */
@import url('https://fonts.googleapis.com/css2?family=Julius+Sans+One&display=swap');

@font-face {
	font-family: 'Julius Sans One', sans-serif;
}

html {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent; 
}

body {
  background: url(../images/Rome.jpg) no-repeat center fixed; 
  z-index:2;
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
  font-family: 'Julius Sans One';
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.header-menu {
  display: block;
  position:absolute;                  
  top:0;                          
  left:0;  
  vertical-align: middle;
  height: 50px;
  width:100%;
  background: rgba(255,255,255,0.5);
  box-shadow: 2px 2px 2px 1px rgba(0,0,0,.1);
  align-items: center;
  padding: 5px 5px;
 }
.content {
  display: block;
  position:absolute;                  
  bottom:0;                          
  right:0;
  overflow: auto;
  vertical-align: middle;
  text-align: justify;
  vertical-align: middle; 
  font-family: 'Julius Sans One';
  font-size: 90%;
  font-weight: bold;
  color: rgba(255,255,255,0.7);
  background: rgba(22,22,22, 0.5);
  height: 32%; 
  width: 74%;
  line-height: 100%;
  border-radius: 10px;
  }
@media screen and (min-width: 1280px){
  .content {
  height: 22%;
  width: 74%;;
}
}
@media screen and (min-width: 1800px){
  .content {
  height: 22%;
  width: 74%;;
}
}
.content2 {
  display: block;
  position:absolute;                  
  top:15%;                          
  right:0;
  overflow: auto;
  height: 15%;
  width: 25%;
  vertical-align: middle;
  text-align: center; 
  font-family: 'Julius Sans One';
  font-size: 90%;
  font-weight: bold;
  color: rgba(255,255,255,0.8);
  line-height: 75%;
  background: rgba(22,22,22, 0.2);
  border-radius: 10px;
  }
@media screen and (min-width: 1280px){
  .content2 {
  height: 15%;
  width: 20%;;
}
}
@media screen and (min-width: 1800px){
  .content2 {
  height: 12%;
  width: 20%;;
}
}
.content3  {
  display: block;
  position:absolute;                  
  bottom:8px;                          
  left:0;
  vertical-align: middle;
  bottom-left: 5px;
  font-family: 'Julius Sans One';
  font-size: 80%;
  font-weight: bold;
  height: 20px;
  width: auto;
  color: rgba(255,255,255,0.8);
  background: rgba(22,22,22, 0.8);
  text-align:center;
  border-radius: 10px;
  }
.logo {
  display: block;
  position:absolute;                  
  top: 2%;               
  right:2%;
  border-radius: 50%;
  -webkit-box-shadow: 3px -1px 7px 0px rgba(0,0,0,0.63);
  -moz-box-shadow: 3px -1px 7px 0px rgba(0,0,0,0.63);
  box-shadow: 3px -1px 7px 0px rgba(0,0,0,0.63);
  border: 1px #ccc;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes flip {
  0% {
  -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
  transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  }
  40% {
  -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
  transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  }
  50% {
  -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
  transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  }
  80% {
  -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
  transform: perspective(400px) scale3d(.95, .95, .95);
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  }
  100% {
  -webkit-transform: perspective(400px);
  transform: perspective(400px);
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  }
  }
  @keyframes flip {
  0% {
  -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
  transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  }
  40% {
  -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
  transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  }
  50% {
  -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
  transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  }
  80% {
  -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
  transform: perspective(400px) scale3d(.95, .95, .95);
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  }
  100% {
  -webkit-transform: perspective(400px);
  transform: perspective(400px);
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  }
  } 

h1 { 
  vertical-align: middle;
  text-align: left;
  font-family: 'Julius Sans One';
  font-size: 250%;
  font-weight: bold;
  line-height: 125%;
  margin: 0;
  }
@media screen and (min-width: 1280px){
  h1 {
  vertical-align: middle;
  font-size: 300%;
  line-height: 115%;
}
}
@media screen and (min-width: 1800px){
  h1 {
  vertical-align: middle;
  font-size: 350%;
  line-height: 105%;
}
}
h2 { 
  vertical-align:middle;
  font-family: 'Julius Sans One';
  font-size: 130%;
  font-weight: bold;
  line-height: 75%;
  top: 0;
}
@media screen and (min-width: 1280px){
  h2 {
  font-size: 160%;
  line-height: 75%;
}
}
@media screen and (min-width: 1800px){
  h2 {
  vertical-align: middle;
  font-size: 230%;
  line-height: 75%;
}
}
@media screen and (min-width: 2100px){
  h2 {
  vertical-align: middle;
  font-size: 270%;
  line-height: 75%;
}
}
h3 { 
  vertical-align: middle;
  font-family: 'Julius Sans One';
  font-size: 70%;
  font-weight: bold;
  margin: 0;
}
@media screen and (min-width: 1280px){
  h3 {
  font-size: 90%;
  line-height: 115%;
}
}
@media screen and (min-width: 1800px){
  h3 {
  font-size: 110%;
  line-height: 105%;
}
}
a {
font-family: 'Julius Sans One', sans-serif;
font-size: 1em;
color: white;
font-weight: bold;
text-decoration: none; 
}
a:hover {
font-family: 'Julius Sans One', sans-serif;
font-size: 1em;
font-weight: bold;
text-decoration: none;
}

p {
  vertical-align:middle;
  font-family: 'Julius Sans One';
  font-size: 75%;
  width: 98%;
  max-width: auto;
  text-align: justify;
  margin: 0 auto;
}
@media screen and (min-width: 1280px){
  P {
  font-size: 110%;
  line-height: 115%;
}
}
@media screen and (min-width: 2100px){
  P {
  font-size: 160%;
  line-height: 115%;
}
}