:root {
	--white: #fff;
	--dark: #232323;
	--accent: #275ec7;
	--hover-main: #1a4087;
	--gray: #737373;
	--gray-light: #a4a4a4;
	--gray-extra-light: #e3e3e3;
	--background: #000521;
	--error: #ff5151;
	--disable: #698bcc;
	--blue: #5c8eec;
	--brand-colors-pantone-282: #0d2451;
	--brand-colors-pantone-2126: #275ec7;
	--brand-colors-pantone-2370: #4a39b4;
	--brand-colors-pantone-278: #98c1ff;
	--brand-colors-pantone-656: #e3eeff;
}

.about-link p {
  width: 186px;
}

/* BANNER */
.banner {
  height: 930px;
}
.banner__wrapper {
  position: relative;
  align-items: flex-start;
  padding-top: 0;
}
.banner__title {
  margin-top: 380px;
}
.banner__illustration {
  position: absolute;
  bottom: 0;
  right: -40px;
  display: none;
}
.banner__illustration img {
  display: block;
}
.banner__illustration .blur-round {
  display: none;
}
.banner__video {
	display: block;
	width: 100vw;
	height: 100%;
	position: absolute;
	right: -235px;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}
.banner__video video {
	width: 100%;
	height: 89%;
	position: absolute;
	bottom: -3px;
    object-fit: cover;
}

/* EACH */
.each__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  gap: 24px;
}
.each__cards * {
  color: var(--white)
}
.each__cards-item {
  padding: 32px;
  position: relative;
  height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 24px;
}
.each__cards-item .content {
  z-index: 1;
}
.each__cards-item .about-link {
  font-weight: 400;
  font-size: 24px;
  line-height: 120%;
  z-index: 1;
}
.each__cards-item > img {
  z-index: 1;
}
.each__cards-item .shadow-ellipse {
  width: 477px;
  height: 340px;
  border-radius: 50%;
  filter: blur(40px);
  position: absolute;
  bottom: 26px;
  right: 0;
  opacity: .8;
  transform: rotate(150deg);
  z-index: 0;
}
.each__cards-item:nth-child(1) .shadow-ellipse {
  background: #275EC7;
}
.each__cards-item:nth-child(2) .shadow-ellipse {
  background: #659AFF;
}

/* TIME */
.time {
  padding-top: 150px;
  border-radius: 32px 32px 0 0;
}
.time__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.time__grid-item {
  position: relative;
  height: fit-content;
  border-radius: 24px;
  overflow: hidden;
}
.time__grid-item .content {
  position: absolute;
  left: 32px;
  bottom: 32px;
  right: 32px;
  z-index: 2;
}
.time__grid-item img.web {
  display: block;
}
.time__grid-item img.mob {
  display: none;
}
#time-light {
  height: 600px;
}
#time-wash {
  height: 340px;
}
#time-on, #time-once {
  height: 520px;
}
#time-light, #time-wash {
  grid-column-start: 1;
  grid-column-end: 4;
} 
#time-on {
  grid-column-start: 1;
  grid-column-end: 3;
}
.time-pagination {
  display: none;
}

/* SAFETY */
.safety {
  padding-top: 150px;
}
.safety__grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(2, 403px);
  gap: 24px;
}
.safety__grid-item {
  position: relative;
  height: fit-content;
  border-radius: 24px;
  overflow: hidden;
  height: 100%;
}
#safety-water-sensor {
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-start: 1;
  grid-row-end: 3;
}
#safety-air-sensor {
  grid-column-start: 8;
  grid-column-end: 13;
  grid-row-start: 1;
  grid-row-end: 1;
}
#safety-smoke-sensor {
  grid-column-start: 8;
  grid-column-end: 13;
  grid-row-start: 2;
  grid-row-end: 2;
}
.safety__grid-item .content {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 32px;
}
.safety__grid-item img.web {
  width: 100%;
  display: block;
}
.safety__grid-item img.tab {
  display: none;
}

/* SECURITY */
.security {
  padding-top: 150px;
  padding-bottom: 150px;
  border-radius: 0 0 32px 32px;
}
.security__grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr 1.3fr;
  gap: 24px;
}
.security__grid-item {
  height: 100% !important;
  min-height: 460px;
  position: relative;
  height: fit-content;
  border-radius: 24px;
  overflow: hidden;
}
#security-move-sensor {
  grid-column-start: 1;
  grid-column-end: 6;
  grid-row-start: 1;
  grid-row-end: 1;
}
#security-open-sensor {
  grid-column-start: 6;
  grid-column-end: 13;
  grid-row-start: 1;
  grid-row-end: 1;
}
#security-camera {
  grid-column-start: 1;
  grid-column-end: 13;
  grid-row-start: 2;
  grid-row-end: 2;
}
.security__grid-item .content {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 32px;
  z-index: 2;
}
.security__grid-item img.web {
  width: 100%;
  display: block;
}
.security__grid-item img.tab {
  display: none;
}
.security-pagination {
  display: none;
}

/* CONNECT */
.connect__grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(2, 340px);
  gap: 24px;
}
.connect__grid-item {
  position: relative;
  padding: 32px;
  background-color: var(--brand-colors-pantone-2126);
  border-radius: 24px;
  overflow: hidden;
}
.connect__grid-item * {
  color: var(--white);
}
.connect__grid-item .content {
  position: relative;
  z-index: 1;
}
.connect__grid-item img {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
}
#connect-rosette img.web {
  right: -24px;
}
#connect-hub img.web, #connect-local img.web {
  right: 20px;
}
.connect__grid-item::after {
  content: '';
  display: block;
  position: absolute;
  background-color: #94B9FF;
  filter: blur(86px);
  border-radius: 50%;
  opacity: .8;
}
#connect-rosette {
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-start: 1;
  grid-row-end: 1;
}
#connect-rosette::after {
  width: 256px;
  height: 256px;
  right: 15%;
  bottom: 10%;
}
#connect-hub {
  grid-column-start: 8;
  grid-column-end: 13;
  grid-row-start: 1;
  grid-row-end: 1;
}
#connect-hub::after {
  width: 293px;
  height: 293px;
  right: 0;
  bottom: -10%;
}
#connect-local {
  grid-column-start: 1;
  grid-column-end: 6;
  grid-row-start: 2;
  grid-row-end: 2;
}
#connect-local::after {
  width: 293px;
  height: 252px;
  right: 5%;
  bottom: -20%;
}
#connect-router {
  grid-column-start: 6;
  grid-column-end: 13;
  grid-row-start: 2;
  grid-row-end: 2;
}
#connect-router::after {
  width: 326px;
  height: 326px;
  right: 5%;
  bottom: -15%;
}
.connect__grid-item img.tab {
  display: none;
}

/* CONTROL */
.control {
  padding-top: 150px;
  border-radius: 32px 32px 0 0;
}

/* APP */
.app {
  padding-top: 150px;
  padding-bottom: 150px;
  border-radius: 0 0 32px 32px;
}
.app-swiper .swiper-wrapper {
  align-items: center;
  height: 586px;
  position: relative;
  left: -50px;
}
.app-swiper .app-swiper-next, .app-swiper .app-swiper-prev {
  top: var(--swiper-navigation-top-offset, 5%) !important;
}
.app-cards-item {
  max-width: 586px;
  max-height: 586px;
  padding: 32px 32px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background-color: var(--brand-colors-pantone-282);
  border-radius: 24px;
  transition: all .4s ease;
  overflow: hidden;
}

.app-cards-item::before {
  content: '';
  display: block;
  width: 350px;
  height: 450px;
  background-color: #2D6FEC;
  border-radius: 50%;
  position: absolute; 
  bottom: -10%;
  z-index: 0;
  filter: blur(80px);
  opacity: .7;
  transform: translate3d(0, 0, 0);
  transition: all .2s ease;
}

.app-cards-item * {
  color: var(--white);
  text-align: center;
  transition: all .4s ease;
  user-select: none;
}
.app-cards-item .content {
	position: relative;
	z-index: 2;
}
.app-cards-item:not(.swiper-slide-active) {
  max-width: 464px;
  max-height: 464px;
  opacity: .7;
}
.app-cards-item:not(.swiper-slide-active)::before {
  width: 250px;
  height: 350px;
}
.app-cards-item img {
  height: 392px;
  transition: all .4s ease;
  position: relative;
  z-index: 1;
}
.app-cards-item:not(.swiper-slide-active) img {
  height: 252px;
}
.app-pagination {
  margin-top: 28px;
  width: fit-content !important;
}

.simple-buy .choice__markets {
	width: 304px;
}
.choice__markets.show.top {
	bottom: 78px;
}

footer {
  margin-top: 0 !important;
}

@media screen and (max-width:1440px) {
  .banner__illustration {
    width: 50%;
  }
  .banner__illustration img {
    width: 100%;
  }
  .banner__video {
    right: -158px;
  }
  .security__grid-item {
    min-height: 295px;
  }
  .safety__grid {
    grid-template-rows: repeat(2, 320px);
  }
  .each__cards-item > img {
    width: 80%;
  }
  .each__cards-item .shadow-ellipse {
    width: 400px;
    height: 265px;
  }
  .connect__grid {
    grid-template-rows: repeat(2, 380px);
  }

}
@media screen and (max-width:1200px) {
  .banner {
    height: 688px;
  }
  .banner__title {
    margin-top: 242px;
  }
  .banner__illustration {
    right: 0;
    display: block;
  }
  .banner__video {
		display: none;
	}
  #time-light {
    height: 400px;
  }
  #time-wash {
    height: 280px;
  }
  #time-on, #time-once {
    height: 320px;
  }
  .each__cards-item {
    height: 340px;
  }
  .each__cards-item > img {
    width: 65%;
  }
  .each__cards-item .shadow-ellipse {
    width: 281px;
    height: 173px;
  }
  .each__cards-item .about-link {
    font-weight: 600;
    font-size: 12px;
    line-height: 130%;
  }
  .each__cards-item .about-link img {
    margin-bottom: -2px;
  }
}
@media screen and (max-width:992px) {
  .banner {
    height: 688px;
    overflow: hidden;
    display: block;
  }
  .banner__illustration {
    right: 0;
  }
  #time-light,#time-wash,#time-on, #time-once {
    height: auto;
  }
  .each__cards {
    gap: 16px;
  }
  .each__cards-item {
    height: 300px;
    border-radius: 12px;
  }
  .time__grid {
    gap: 0;
    display: flex;
  }
  .time__grid-item {
    max-width: 320px;
    border-radius: 12px;
  }
  .time__grid-item .content {
    left: 16px;
    bottom: 16px;
    right: 16px;
  }
  .time__grid-item img.web {
    display: none;
  }
  .time__grid-item img.mob {
    /*display: block;*/
  }
	#time-light, #time-wash, #time-on, #time-once {
		height: 434px;
		background-size: cover;
	}
	#time-light {
		background-image: url('/local/assets/img/doma-new/time-ligth-mob.webp');
	}
	#time-wash {
		background-image: url('/local/assets/img/doma-new/time-wash-mob.webp');
	}
	#time-on {
		background-image: url('/local/assets/img/doma-new/time-on-mob.webp');
	}
	#time-once {
		background-image: url('/local/assets/img/doma-new/time-once-mob.webp');
	}
  .time-pagination {
    display: block;
    width: fit-content !important;
    margin-top: 8px;
  }
  .safety__grid {
    gap: 16px;
  }
  .safety__grid-item {
    border-radius: 12px;
  }
  .safety__grid-item .content {
    bottom: 16px;
    right: 16px;
    left: 16px;
  }
  .security__grid {
    gap: initial;
    display: flex;
  }
  .security__grid-item {
    border-radius: 12px;
    width: 100vw;
    max-width: 500px;
  }
  .security__grid-item .content {
    height: 113px;
  }
  .security__grid-item img.web {
    display: none;
  }
/*
  .security__grid-item img.tab {
    display: block;
    width: 100%;
  }
*/
	.security__grid-item img.tab {
		/*display: block;*/
		width: 100%;
	}
	.security__grid-item {
		height: 500px !important;
		background-size: cover;
	}
	#security-move-sensor {
		background-image: url('/local/assets/img/doma-new/security_move-tab.jpg');
	}
	#security-open-sensor {
		background-image: url('/local/assets/img/doma-new/security_open-tab.jpg');
	}
	#security-camera {
		background-image: url('/local/assets/img/doma-new/security_camera-tab.jpg');
	}
  .security-pagination {
    height: 0;
    display: block;
    position: relative;
    z-index: 2;
    width: fit-content !important;
    bottom: var(--swiper-pagination-bottom, 36px) !important;
  }
  .connect__grid {
    gap: initial;
  }
  .connect__grid-item {
    height: auto;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: space-between;
  }
  .connect__grid-item .content {
    width: 100%;
  }
  .connect__grid-item img.web {
    display: none;
  }
  .connect__grid-item img.tab {
    display: block;
    width: 60%;
    position: relative;
  }
  #connect-rosette img.tab {
    width: 80%;
	right: -12px;
  }
  #connect-local img.tab {
    width: 80%;
  }
  #connect-router img.tab {
    width: 100%;
  }
  .connect__grid {
    display: flex;
  }
  .connect-pagination {
    width: fit-content !important;
    margin-top: 8px;
  }
  .app-cards {
    gap: initial;
  }
  .app-cards-item {
    padding: 16px 16px 0;
    width: 100%;
    height: 400px;
  }
  .app-cards-item img {
    width: 180px;
	height: auto;
  }
  .app-cards-item .content {
    position: relative;
    z-index: 1;
  }
  .app-cards-item .content p {
    height: initial;
  }
  .app-swiper .swiper-wrapper {
    height: auto;
  }
  .app-swiper .app-swiper-next, .app-swiper .app-swiper-prev {
    display: none;
  }
	.app-cards-item:not(.swiper-slide-active) img {
		height: auto;
	}
}
@media screen and (max-width:768px) {
  .banner__title {
    margin-top: 102px;
  }
  .banner__illustration {
    width: 100%;
  }
  .each__cards {
    grid-template-columns: 1fr;
  }
  .each__cards-item > img {
    width: 50%;
  }
  .safety__grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    gap: 16px;
  }
  #safety-water-sensor, #safety-air-sensor, #safety-smoke-sensor {
    grid-column-start: auto;
    grid-column-end: auto;
    grid-row-start: auto;
    grid-row-end: auto;
  }
  .safety__grid-item img.web {
    display: none;
  }
  .safety__grid-item img.tab {
    display: block;
    width: 100%;
	height: 100%;
  }
}
@media screen and (max-width:480px) {
  .about-link p {
    width: auto;
  }
  .each__cards-item .about-link img {
    margin-top: -2px;
  }
  .banner {
    height: 594px;
    overflow: hidden;
  }
  .banner__illustration {
    width: 100%;
  }
  .banner__illustration .blur-round {
    display: block;
	width: 80%;
	top: auto;
	bottom: -40%;
  }
  .each__cards {
    gap: 8px;
  }
  .each__cards-item {
    padding: 16px;
    height: 160px;
  }
  .each__cards-item > img {
    width: 52%;
    right: 5px;
    bottom: -20px;
  }
  .each__cards-item:nth-child(2) > img {
    width: auto;
    height: 85%;
    bottom: -20px;
  }
  .each__cards-item .shadow-ellipse {
    width: 170px;
    height: 129px;
    filter: blur(30px);
    bottom: 1px;
    right: 19px;
  }
  .time {
    padding-top: 60px;
    border-radius: 24px 24px 0 0;
  }
  .time__grid-item {
	width: 100%;
	max-width: none;
  }
  .time__grid-item .content {
    height: 95px;
  }
	.time__grid-item img {
		width: 100%;
	}
	#time-light, #time-wash, #time-on, #time-once {
		height: 120vw;
	}
  .safety {
    padding-top: 60px;
  }
  .safety__grid {
    grid-template-columns: calc(100vw - 40px);
  }
	.safety__grid-item {
		width: 100%;
		height: auto;
		aspect-ratio: 1/1;
	}
  .security {
    padding-top: 60px;
    padding-bottom: 0;
    border-radius: 0;
  }
  .security .container {
    padding: 0;
  }
  .security__grid-item {
    border-radius: 0;
  }
  .security__grid-item .content {
    left: 16px;
    right: 16px;
    bottom: 16px;
    height: 113px;
  }
  .connect__grid-item {
    padding: 16px;
    border-radius: 12px;
    min-height: 260px;
  }
  .connect__grid-item::after {
    width: 150px !important;
    height: 150px !important;
    filter: blur(30px) !important;
    right: 50% !important;
    bottom: 5% !important;
    transform: translateX(50%);
  }
  .control {
    padding-top: 60px;
    border-radius: 24px 24px 0 0;
  }
  .app {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .app-swiper .swiper-wrapper {
    left: 0;
    height: auto;
  }
  .app-cards-item .content h3 {
    height: 18px;
    overflow: hidden;
  }
  .app-cards-item {
    height: auto;
    aspect-ratio: 1/1;
    border-radius: 12px;
  }
  .app-cards-item .content {
    position: relative;
    z-index: 1;
  }
  .app-cards-item .content p {
    height: 36px;
  }
  .app-cards-item::before {
    width: 180px;
    height: 250px;
    opacity: 1;
  }
  .app-cards-item img {
    width: 65.5%;
  }
  .app-pagination {
    margin-top: 8px;
  }

  .simple-buy .image-block > img {
    width: auto;
  }
}