materio_home/style/style.css

html,body{
  margin: 0;
  padding: 0;
  font-weight: normal;
  font-size: 1rem;
  height: 100%;
  /* color: #323232ff!important; */
}

html{
  background: #f7f4ed;
}

header{
  position: fixed;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  z-index: 999;
  background: #f7f4ed;
}

.logo{
  display: flex;
  align-items: baseline;
  padding: 10px 0 20px 50px;
}

h1{
  font-family: 'ubuntu-m-webfont';
  font-size: 36px;
  margin: 0;
}

h2{
  font-family: 'ubuntu-m-webfont';
  font-size: 14px;
  margin: 0;
}

nav{
  display: flex;
  height: 20px;
  font-size: 12px;
  padding-right: 50px;
}

ul, li{
  list-style: none;
}

nav li{
  margin: 0 10px;
  font-family: 'ubuntu-r-webfont';
}

nav li:nth-child(1){
  border-left: 1px solid black;
  border-right: 1px solid black;
  padding: 0px 10px;
}

nav li:last-child{
  background: #4d4b4bff;
  padding: 0 5px;
  color: #f7f4ed;
  border-radius: 3px;
  text-transform: uppercase;
  line-height: 1.9;
  font-size: 10px;
}

/* main */
h3{
  transition: all 1s ease;
  font-family: 'ubuntu-r-webfont';
  font-size: 10rem;
  line-height: 9rem;
}

p{
  font-family: 'ubuntu-m-webfont';
  font-size: 12px;
  line-height: 20px;
}

button{
  font-family: 'ubuntu-m-webfont'!important;
  font-size: 12px!important;
  border-radius: 5px!important;
  border: none!important;
  padding: 8px 12px!important;

}

button[name="join_us"]{
  background: #69cdcfff;
  color: #f7f4ed;
}

#ddb{
  background: #f7f4ed;
}

#ddb button[name="join_us"]{
  position: absolute;
}
/* ddb */
#ddb{
  height: 100vh;
}

#ddb h3{
  pointer-events: none;
  position: absolute;
  margin: 130px 0 200px 50px;
  z-index: 1;
}

#ddb .content{
  pointer-events: none;
  margin: 0 50px;
}

#ddb .txt{
  transition: left 1.5s ease;
  pointer-events: none;
  position: absolute;
  width: 500px;
  font-size: 12px;
  top: 460px;
  left: 730px;
  z-index: 1;
}

#ddb .txt img{
  transition: left 1.5s ease, top 1.5s ease;
  position: relative;
  top: -30px;
  left: -290px;
  z-index: 1;
}


#ddb .txt img:nth-of-type(2) {
  top: -230px;
  left: 150%;
}

#ddb .images{
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  height: 100%;
}

#ddb .images img{
  position: absolute;
  min-width: 100px;
  height: auto;
}

#ddb .images img:nth-child(1){
  top: 85%;
  left: 70%;
}

#ddb .images img:nth-child(2){
  top: 105%;
  left: 10%;
}

#ddb .images img:nth-child(3){
  width: 300px;
  height: auto;
  top: 200%;
  left: 2%;
}

#ddb .images img:nth-child(4){
  width: 150px;
  height: auto;
  top: 190%;
  left: 40%;
}

#ddb .images img:nth-child(5){
  width: 350px;
  top: 180%;
  left: 75%;
}

#ddb .images img:nth-child(6){
  top: 230%;
  left: 25%;
}

#ddb .images img:nth-child(7){
  top: 255%;
  left: 60%;
}

#ddb .images img:nth-child(8){
  width: 300px;
  height: auto;
  top: 300%;
  left: 7%;
}

#ddb .images img:nth-child(9){
  width: 10%;
  top: 320%;
  left: 35%;
}

.simplebar-track.simplebar-vertical{
  top: 100px;
  width: 0px;
  left: -20px;
}
/* scrollbar */

/* video */
#videos{
  background: #69cdcfff;
  height: auto;
}

.liste_movies{
  display: flex;
  flex-flow: column;
  align-content:center;
  padding-top: 65px;
}

.liste_movies ul{
  width: 65%;
  min-width: 800px;
  display: flex;
  margin: 15px auto 0 auto ;
  padding: 0;
}

.liste_movies ul li{
  width: 15%;
  min-width: 200px;
  height: auto;
  margin-right: 15px;
}


.liste_movies ul li img{
  width: auto;
  height: auto;
  filter: grayscale(1);
  transition: filter 0.2s;
}

.liste_movies li img:hover{
  filter: grayscale(0);
  transition: filter 0.2s;
}

.liste_movies > img:nth-child(1){
  width: 65%;
  min-width: 800px;
  height: auto;
  margin: auto;
}

/* showrooms */
#showroom{
  background: #f7f4ed;
  padding: 0px 50px;
}

#showroom .content{
  margin: 130px 0 200px 50px;
}

#showroom h3{
  margin: 0;
}

#showroom .txt{
  width: 500px;
}

#showroom .content img:nth-of-type(1){
  transition: all 1.5s ease;

  position: absolute;
  left: 1000px;
  top: 410px;
}

#showroom .content img:nth-of-type(2){
  transition: all 1.5s ease;

  position: absolute;
  top: 210px;
  left: 1500px;
}

#showroom{
  /* pointer-events: none; */
}