html  {scroll-behavior: smooth;
}

body{
  padding: 0;
  margin: auto;
  width:100%; height:100%;
	background-image: url(../img/noise.png);
  font-family: asul;
  background-color: #f3ebd5;
  cursor:crosshair;}

}
@font-face{font-family:"asul"; src: url("style/font/asul-webfont.woff") format("woff");}


#scroll_to_top {
  position: fixed;
  width: 25px;
  height: 25px;
  bottom: 20px;
  right: 30px;}
#scroll_to_top img {
  width: 30px;}




  #homemenu_to_bottom {
    position: fixed;
    width: 25px;
    height: 25px;
    bottom: 20px;
    right: 780px;}
  #homemenu_to_bottom img {
    width: 30px;}


  .vitrine{width:100%; height:100%;}

.imagevitrine{max-width:75%;max-height:100%; background-color: black;  width:65%; height:100%;
margin-left:35%;position:relative;
overflow: hidden;display: inline-block;}

.imagevitrine1{max-width:75%;max-height:100%; background-color: white;  width:65%; height:100%;
margin-left:35%;position:relative;
overflow: hidden;display: inline-block;}


  .article {
    width:35%; height:100%;
    margin-top: -2%;
    padding: 2%;
  position:fixed;overflow: hidden;display: inline-block;}

  .soustitreprojet{   margin-top: -12%; }

  .description{
padding-right:19%;
  line-height:1.16;  margin-top: -2%; }

  .description1{
padding-right:19%;
  line-height:1.16;margin-top:-2%; font-size:9pt; }

  .info{
   border-color: black;  margin: 0%;
    ;line-height:1.16;font-size: 8pt;margin-left:-8%;margin-top:-1%; color: black;font-weight: lighter;}


      h4{
font-size: 40pt;font-style: italic;-webkit-text-stroke: 0.5px  black ;line-height: 1.1;}


    h5{
    font-size: 16pt;margin-top: -10%;
    font-weight: lighter;
    -webkit-text-stroke: 0.5px  black ;
    text-stroke: 0.5px  black ;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;font-style: italic;
    color: transparent; line-height: 1.1;}


    h6{
    font-size: 11pt;
    font-weight: lighter;  -webkit-text-stroke: 0.5px  black ;  font: black;font-style: italic;
      margin-top: -7%;
      text-stroke: 0.5px  black ;
      -webkit-text-fill-color: transparent;
      text-fill-color: transparent;font-style: italic;
      color: transparent; line-height: 1.1;}


.logo img{
  width:20%;
  position: absolute;
  margin-top: 45px ;
  margin-left: 50px;
z-index: 1;
overflow: none;}


.textepresentation{
  font-style: bold;
  font-family:Asul;
   line-height: 1.1;
  font-size: 25pt;
padding:2%; overflow: none;
 }

.presentation{
background-image:url(https://imagizer.imageshack.com/img923/2337/VFufkD.jpg);
margin-top:-0.5%;
width: 100%;}

.leithmotiv{
  width: 100%;
 font-family: georgia;
 line-height: 1.2;
 font-weight: bold;
 color:  #f3ebd5 ;
 font-size:80pt;
 margin-top: 15%;}

.page2{
width: 100%;
margin: auto;
 background-color:#151515;
margin-top: -0.5%;}

.dyn{  width: 100%;
 font-family: georgia;
 line-height: 1.2;
 font-weight: bold;
 color:  #f3ebd5 ;
 font-size:80pt;
 margin-top: -8%;
 margin-left: 0;
}

svg text {
  font-family: georgia;
  letter-spacing: 10px;
  stroke: #c29112;
  font-size: 100px;
  font-weight: 700;
  stroke-width: 3;
  margin-top: auto;
  animation: textAnimate 3s infinite alternate;}

@keyframes textAnimate {
  0% {
    stroke-dasharray: 0 50%;
    stroke-dashoffset:  20%;
    fill:hsl(189, 10%, 0%)}
100% {
    stroke-dasharray: 50% 0;
    stroke-dashoffstet: -20%;
    fill: hsla(200, 68%, 75%,0%)}}


#iconeinsta{width: 50%;margin-left: 25%;}
#iconelinkdin{width: 33%;margin-left: 32%;}
#iconemail{width: 40%;margin-left: 32%;}
#diapo{width: 100%;height: 100%;}


.pageacceuil{margin-top: 0%;width: 100%;overflow: auto;   margin: 0%;}

.fond{z-index: 0;width: 100%;
  mix-blend-mode:darken;opacity: 0.8;margin-top: 0%;}

.container {width:100%;margin-left: 2%;margin-top:2%;}
.container1 {width:100%;margin-left: 0%;margin-top:0%;padding:0%; }

input[type="radio"] {
    display:none;}
input[type="radio"][id="blue"]:checked + label {}
input[type="radio"][id="blue"]:checked ~ .red, input[type="radio"][id="blue"]:checked ~ .green {
  width:0;
  height:0;
  padding:0;
  margin:0;
  opacity:0;}
input[type="radio"][id="red"]:checked + label {}
input[type="radio"][id="red"]:checked ~ .blue, input[type="radio"][id="red"]:checked ~ .green {
  width:0;
  height:0;
  padding:0;
  margin:0;
  opacity:0;}
input[type="radio"][id="green"]:checked + label {}
input[type="radio"][id="green"]:checked ~ .blue, input[type="radio"][id="green"]:checked ~ .red {
  width:0;
  height:0;
  padding:0;
  margin:0;
  opacity:0;}

.tile{
  width: 400px;
  height: 400px;
  float:left;
  transition:all 1s;
  margin:1%;
  padding:3%;}

.green {background:transparent;}
.blue {background:transparent;}
.red{background:transparent;}

.nom{ margin-top:0%;position: absolute;
    z-index:1;color: #f3ebd5;line-height: 0.4;}

  h1{font-style: italic;margin-left: -1%;}

h2{
font-size: 15pt;
font-weight: lighter;
-webkit-text-stroke: 0.3px  #f3ebd5 ;
text-stroke: 0.3px  #f3ebd5 ;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
color: transparent;}

h3{
font-size: 10pt;
-webkit-text-stroke: 0.3px  #f3ebd5 ;
text-stroke: 0.3px  #f3ebd5 ;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
color: transparent;
font-weight: lighter;
margin-top:  -3%;}

  .zoom { width: 230px;height:300px;}
.imageprojet {width: 100%;height:100%;margin-left: -4%;}
.imageprojet {
  -webkit-transition: all 1s ease; /
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  }
  .imageprojet:hover {
  -webkit-transform:scale(1.25);
  -moz-transform:scale(1.25);
  -ms-transform:scale(1.25);
  -o-transform:scale(1.25);
  transform:scale(1.25);
  }


.menu {
	--marquee-width: 97vw;
	--offset: 40vw;
	--move-initial: calc(-25% + var(--offset));
	--move-final: calc(-50% + var(--offset));
	--item-font-size: 7vw;
	counter-reset: menu; margin-top: 3%;margin-bottom:  0%;}

.menu__item{cursor:default;position: relative;padding:0 2vw;}

.menu__item-link {
	display: inline-block;
  font-family: times new roman;
	cursor: crosshair;
	position: relative;
	-webkit-text-stroke: 1.5px black ;
	text-stroke: 1.5px black ;
	-webkit-text-fill-color: transparent;
	text-fill-color: transparent;
	color: transparent;}

.menu__item-link::before{
	all: initial;
	font-family: sofia-pro, sans-serif;
	counter-increment: menu;
	content:  counter(menu);
	position: absolute;
	bottom: 60%;
	left: 0;
	pointer-events: none;
  color: black;}

.menu__item-link:hover {
	transition-duration: 0.2s;
	opacity: 0;}

.menu__item-img {
	pointer-events: none;
	position: absolute;
	height: 50vh;
	max-height: 200px;
	opacity: 0;
	left: 100%;
	top: 40%;
	transform: translate3d(calc(-100% - 6vw),-30%,0) translate3d(0,20px,0);}

.menu__item-link:hover + .menu__item-img {
	opacity: 1;
	transform: translate3d(calc(-100% - 6vw),-30%,0) rotate3d(0,0,1,4deg);
	transition: all 0.4s;}

.marquee {
  position: absolute;
	top: 0;
	left: 0;
	width: var(--marquee-width);
	overflow: hidden;
	pointer-events: none;
  color: #151515 ;
	mix-blend-mode: color-burn;
}

.marquee__inner {
	width: fit-content;
	display: flex;
	position: relative;
	transform: translate3d(var(--move-initial), 0, 0);
	animation: marquee 5s linear infinite;
	animation-play-state: paused;
	opacity: 0;
  	mix-blend-mode: color-burn;
	transition: opacity 0.1s;}
.menu__item-link:hover ~ .marquee .marquee__inner {
	animation-play-state: running;
	opacity: 1;
	transition-duration: 0.4s;}
.marquee span {
	text-align: center;}
.menu__item-link,
.marquee span {
	white-space: nowrap;
	font-size: var(--item-font-size);
	padding: 0 1vw;
	font-weight: 900;
	line-height: 1.15;}
.marquee span {
	font-style: italic;}

@keyframes marquee {
	0% {
		transform: translate3d(var(--move-initial), 0, 0);}
	100% {
		transform: translate3d(var(--move-final), 0, 0);}}
@media screen and (min-width: 53em) {
	.frame {
		text-align: left;
		display: grid;
		align-content: space-between;
		width: 100%;
		padding: 2.5rem 6vw;
		pointer-events: none;
		grid-template-columns: 75% 25%;
		grid-template-rows: auto;}}

.boutons{
  margin: 0;
  height: 8vh;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;}

.background-one {background-color: #151515;}
.background-two {background-color: #151515;}
.background-three {background-color: #151515;}

.link-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  position: relative;
  z-index: 0;}


.link-one {
  color: #c75517;
  transition: color 1s cubic-bezier(0.32, 0, 0.67, 0);
  line-height: 1em;}
.link-one:hover {
  color: #111;
  transition: color 1s cubic-bezier(0.33, 1, 0.68, 1);}
.link-one::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  background-color: #c75517;
  clip-path: circle(0% at 50% calc(50%));
  transition: clip-path 1s cubic-bezier(0.65, 0, 0.35, 1);}
.link-one:hover::before {
  clip-path: circle(100% at 50% 50%);}
.link-one::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  background-color: #151515;
  clip-path: polygon(
    40% 0%,
    60% 0%,
    60% 0%,
    40% 0%,
    40% 100%,
    60% 100%,
    60% 100%,
    40% 100%);
  transition: clip-path 1s cubic-bezier(0.65, 0, 0.35, 1);}
.link-one:hover::after {
  clip-path: polygon(
    40% 10%,
    60% 10%,
    60% 35%,
    40% 35%,
    40% 90%,
    60% 90%,
    60% 65%,
    40% 65%);}

.link-two {
  color: #c29112;
  transition: color 1s cubic-bezier(0.32, 0, 0.67, 0);}
.link-two:hover {
  color: #111;
  transition: color 1s cubic-bezier(0.33, 1, 0.68, 1);}
.link-two::before {
  content: "";
  position: absolute;
  z-index: -2;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  clip-path: polygon(
    0% -20%,
    100% -30%,
    100% -10%,
    0% 0%,
    0% 130%,
    100% 120%,
    100% 100%,
    0% 110%);
background-color: #c29112;
transition: clip-path 1s cubic-bezier(0.25, 1, 0.5, 1);}
.link-two:hover::before {
  clip-path: polygon(
    0% 10%,
    100% 0%,
    100% 20%,
    0% 30%,
    0% 100%,
    100% 90%,
    100% 70%,
    0% 80%);}
.link-two::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 5ch;
  height: 5ch;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%) rotate(0deg) scale(0);
  transition: transform 1s ease;
  background-color: #c29112;}
.link-two:hover::after {
  transform: translate(50%, -50%) rotate(135deg) scale(1);}

.link-three {
  color: #ca2e19;}
.link-three::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 50%;
  height: 100%;
  top: 0%;
  left: 0%;
  transform: translate(0, -50%) scaleY(0);
  transition: transform 1s ease;
  mix-blend-mode: difference;
  clip-path: polygon(
    20% 60%,
    100% 60%,
    100% 40%,
    20% 40%,
    20% 0%,
    60% 0%,
    60% 20%,
    20% 20%);
  background-color: #ca2e19;}
.link-three:hover::after {
  transform: translate(0, 0%) scaleY(1);}
.link-three::before {
  content: "";
  position: absolute;
  z-index: 2;
  width: 50%;
  height: 100%;
  bottom: 0%;
  right: 0%;
  transform: translate(0, 50%) scaleY(0);
  transition: transform 1s ease;
  mix-blend-mode: difference;
  clip-path: polygon(
    80% 40%,
    0% 40%,
    0% 60%,
    80% 60%,
    80% 100%,
    40% 100%,
    40% 80%,
    80% 80%);
  background-color: #ca2e19;}
.link-three:hover::before {
  transform: translate(0%, 0%) scaleY(1);}

section{min-height: 15vh;display: flex;justify-content: center;align-items: center;}
section .text-container{
   display: flex;}

.reveal{position: relative;transform: translateY(80px);
opacity: 0;transition: 1s all ease;}

.reveal.active{transform: translateY(0);opacity: 1;}

@media (min-width: 200px) and (max-width: 900px){
body {padding: 0% 0% 0% 0%; margin: auto;}

.logo{margin-left: -8%;margin-top: -6%;}
.textepresentation{font-size: 15pt;}
.leithmotiv{font-size: 40pt; }
.dyn{width:100vw;
margin-left:-2%;
margin-top:-10%; }
.fond{margin-top: 0%;}

.description{flex: none;font-size:6pt;}
.description1{flex:none;font-size:7pt;margin-top:-10%; }

.imagevitrine{width:80vw;margin-top:0%; }
.imagevitrine img{flex:none;width:70vw;}
h4{flex:none;font-size:19pt;}
.info{ font-size: 6pt; margin-left:-22%;margin-top:0%;}
h5{font-size: 10pt;  margin-top: -20%}
h6{margin-top: -10%;font-size: 9pt;}

#homemenu_to_bottom img {
  width: 40px;}
  #scroll_to_top img {
    width: 40px;}
    #homemenu_to_bottom {
      position: fixed;
      width: 25px;
      height: 25px;
      bottom: 20px;
      right: 280px;}
}