/* .size {width : 755px; margin-left : auto; margin-right : auto;} remove on live */


* {
    position : relative;
    margin : 0px;
    padding : 0px;
}

.container {
    width : 100%;
    background-color : #191917;
    overflow : hidden;
}

.rel {
  width : 100%;
  overflow : auto;

}

.rel img {
  width : 100%;
  height : auto;
  display : block;
}


.intro {
  position : absolute;
  top : 0px;
  left : 0px;
  width : 100%;
  height : 100%;
  z-index : 5;
  background-color : #191917;
}

.genuine {
  position : absolute;
  width : 100%;
  height : auto;
  top : 100%;
  left : 0px;
  opacity : 0;
}

.genuine img {
  width : 100%;
  height : auto;
  display : block;
}


.rising {
  position : absolute;
  width : 100%;
  height : auto;
  top : 100%;
  left : 0px;
  opacity : 0;
}

.rising img {
  width : 100%;
  height : auto;
  display : block;
}

.skip_intro {
  cursor : pointer;
}


.content {
  position : absolute;
  width : 100%;
  height : 100%;
  top : 0px;
  left : 0px;
  z-index : 3;
}


.slider {
  position : absolute;
  width : 100%;
  height : 100%;
  top : 0px;
  left : 0px;

  display : flex;
}


.gr_image {
  position : absolute;
  width : 100%;
  height : 100%;
  top : 0px;
  left : 0px;
}


.gr_image img {
  width : 100%;
  height : auto;
  display : block;
}


.un_image {
  position : absolute;
  width : 100%;
  height : 100%;
  top : 0px;
  left : 0px;
}


.un_image img {
  width : 100%;
  height : auto;
  display : block;
}


div.slider > div {
  display : none;
}


div.slider > div.active_slide {
  display : block;
}


.slider_controlls {
  position : absolute;
  width : 100%;
  height : 100%;
  top : 0px;
  left : 0px;
  display : none;
}

.content:hover .visible_controls {
  display : block;
}

.next, .prev {
  position : absolute;
  top : 0px;
  width : calc(100% / 24 * 2);
  height : 100%;
  background-color : rgba(255,255,255, 0.5);
  cursor : pointer;
  display : none;
  align-items : center;
  justify-content : center;
}

.show {
  display : flex;
}

.next:hover, .prev:hover {
  background-color : rgba(255,255,255, 0.9);
}

.next {
  right : 0px;
}

.prev {
  left : 0px;
}

.next > img, .prev > img {
  width : 80%;
  height : auto;
  display : block;
}

.bullets_container {
  width : calc(100% / 24 * 16);
  height : calc(100% / 24);
  position : absolute;
  bottom : calc(100% / 24);
  left : calc(100% / 24 * 4);

  display : flex;
  gap : calc(100% / 16);
  align-items : center;
  justify-content : center;
}

.bullet {
  height : 100%;
  width : calc(100% / 16);
}

.bullet_inside {
  background-color : rgba(255,255,255, 0.5);
  width : calc(100% - 2px);
  height : calc(100% - 2px);
  margin-top : 1px;
  margin-left : 1px;
  -webkit-border-radius: 50vw;
  -moz-border-radius: 50vw;
  border-radius: 50vw;
}


.active {
  width : calc(100% / 16 * 2);
}

.active > .bullet_inside {
  background-color : rgba(255,255,255, 0.9);
  -webkit-border-radius: 50vw;
  -moz-border-radius: 50vw;
  border-radius: 50vw;
}