@charset "UTF-8";
/* CSS Document */

@font-face {
  font-family: 'Decay White Alt';
  src: url(../fonts/Decay-White-Std.otf);
}
@font-face {
  font-family: 'Forme Grotesque Pro Medium';
  src: url(../fonts/FormeGrotesquePro-Medium.ttf);
}
@font-face {
  font-family: 'Open';
  src: url(../fonts/FormeGrotesquePro-Medium.ttf);
}
@font-face {
  font-family: 'Relative';
  src: url(../fonts/Relative-Book.ttf);
}
/****************** Base ******************/
p {
  margin: 0;
}
a {
  text-decoration: none;
}
Body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: black;
}
/****************** Infos ******************/
.infos_sub_container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  gap: 10px;
  padding: 0px 20px 0px 20px;
}
.up {
  padding-top: 20px;
}
.down {
  padding-bottom: 20px;
	bottom: 50vh;
}
.down_phone {
  display: none;
	position: fixed;
}
.infos {
  font-family: "Forme Grotesque Pro Medium";
  font-size: 14px;
  color: white;
  transition: color 0.3s ease-out;
}
#infos_container {
  display: flex;
  width: 100vw;
  height: 100vh;
  flex-flow: column;
  justify-content: space-between;
}
#about_me_phone {
  font-family: "Forme Grotesque Pro Medium";
  font-size: 30px;
  position: fixed;
  top: 100px;
  left: 0px;
  padding-left: 20px;
  width: 80vw;
  display: none;
}

#about {display: none;}

#about_me {
  font-family: "Forme Grotesque Pro Medium";
  font-size: 30px;
  position: fixed;
  top: 100px;
  left: 0px;
  padding-left: 20px;
  width: 967px;
  display: block;
}
#dk {
  grid-column-start: 1;
  grid-column-end: 2;
}
#about-work {
  grid-column-start: 3;
  grid-column-end: 4;
}
#copyright {
  grid-column-start: 12;
  grid-column-end: 12;
}
#year {
  grid-column-start: 1;
  grid-column-end: 2;
}
#work_description {
  grid-column-start: 3;
  grid-column-end: 6;
}
#field {
  grid-column-start: 12;
  grid-column-end: 12;
}

/****************** About phone ******************/


/****************** Slider buttons ******************/
#slider_button_container {
  display: flex;
  height: 100%;
}
.slider_button {
  width: 50%;
  height: 100%;
}
#slider_left {
  cursor: url("../img/new/left_b.png")16 16, auto;
}
#slider_right {
  cursor: url("../img/new/right_b.png")16 16, auto;
}
/****************** Slider ******************/
#slider_container {
  position: fixed;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
.sliders_phone {
  display: none;
  position: fixed;
  height: 50vh;
  width: 100vw;
  z-index: -1;
}

#slider_container_phone_down {
  bottom: 0;
  object-fit: cover;
  z-index: -1;
}

#slider_container_phone_down img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 100%;
  transition: left 2s ease-in;
}
#slider_container_phone_down img.active {
  left: 0;
}

#slider_container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 100%;
  transition: left 2s ease-in;
}
#slider_container img.active {
  left: 0;
}
/********************************************/
/* FADE */
/*
#slider_container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease-in;
}

#slider_container img.active {
  opacity: 1;
}
*/
/***************** Responsiv tablet *****************/
@media screen and (max-width: 980px) {
  #about_me {
    display: none;
  }
  #about_me_phone {
    display: block;
  }
  .infos {
    font-size: 12px;
  }
  .infos_sub_container {
    grid-template-columns: repeat(8, 1fr);
  }
  #dk {
    grid-column-start: 1;
    grid-column-end: 2;
  }
  #about-work {
    grid-column-start: 3;
    grid-column-end: 5;
  }
  #copyright {
    grid-column-start: 8;
    grid-column-end: 8;
  }
  #year {
    grid-column-start: 1;
    grid-column-end: 2;
  }
  #work_description {
    grid-column-start: 3;
    grid-column-end: 6;
  }
  #field {
    grid-column-start: 8;
    grid-column-end: 8;
  }
}
/***************** Responsiv phone *****************/
@media screen and (max-width: 720px) {
	
	/*#about {
		display: block;
    grid-column-start: 3;
    grid-column-end: 5;
		cursor: pointer;
  }*/
	
	/*#about-work {display: none;}*/
	
	#infos_container {
		height: 50vh;
		padding-bottom: 10px;
	}
  .infos_sub_container {
    grid-template-columns: repeat(7, 1fr);
    padding: 0px 10px 0px 10px;
  }
  .up {
    padding-top: 10px;
  }
  .down {
    padding-bottom: 10px;
  }
  .down_phone {
    display: grid;
	  position: fixed;
    padding: 0px 10px 10px 10px;
	
	width: 100vw;
	bottom: 0;
  }
  #about_me_phone {
    display: none;
  }
  .infos {
    font-size: 12px;
  }
  #year2 {
    grid-column-start: 1;
    grid-column-end: 2;
  }
  #work_description {
    grid-column-start: 3;
    grid-column-end: 6;
  }
  #work_description2 {
    grid-column-start: 3;
    grid-column-end: 6;
  }
  #field {
    grid-column-start: 7;
    grid-column-end: 8;
  }
  #field2 {
    grid-column-start: 7;
    grid-column-end: 8;
  }
  #copyright {
    grid-column-start: 7;
    grid-column-end: 8;
  }
  .sliders_phone {
    display: block;
  }
  #slider_container {
    height: 50vh;
    width: 100vw;
    top: 0;
  }
  #slider_container_phone_down {
    background-color: red;
    bottom: 0;
  }
  #slider_button_container {
    display: none
  }
}