/*ШАБЛОНЫ*/

:root {
  --site-primary-color: #DD2853;
  --site-primary-alpha-color: #DD285366;
  --site-secondary-color: #F6C306;
  --site-secondary-alpha-color: #F6C30666;
}

.marked-span { color: #fff; background-color: #DD2853; padding: 0.1em; border-radius: 0.5em; }

html { background-image: url("../images/bg.154394ff0b76.png"); background-position: top right; background-repeat: no-repeat; }

article { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: center; align-items: center; padding: 0 20px 20px; gap: 50px; margin: 0px auto; max-width: 1250px; }
article .right_side .main_image { width: 70%; }

.style-disabled { pointer-events: none; opacity: 0.6; }

.mobile_logo { display: none;}
.mobile_title { display: none;}
.mobile_discription { display: none; }
.mobile_dots { display: none;}

.logo { display: block; margin: 80px auto 0; width: 100%; max-width: 610px; }

.left_side { grid-column: 1; grid-row: 1; align-items: center; display: flex; flex-direction: column;}
.right_side { grid-column: 2; grid-row: 1;}

.title { font-size: 37px; font-weight: 800; font-family: "Inter"; margin-top: 20px; text-align: center; width: 90%}
.discription { font-size: 24px; font-weight: 500; font-family: "Montserrat"; margin-top: 10px ; text-align: center; width: 90%}

.dots { display: none; margin-top: 50px; }
.notice_dots { display: none !important; }
.notice > img:not(.circle) {
  display: none !important;
}
.notice > .menu > img { 
  display: none !important;
}

.markup { display: grid; column-gap: 20px; width: 90%; }

#first_button { grid-column: 1; grid-row: 2; }
#second_button { grid-column: 2; grid-row: 2; }
#third_button { grid-column: 3; grid-row: 2; }

.info { width: 100%; background-color: #F6C306; border-radius: 15px; margin-top: 70px;}
.info .title { font-size: 28px; text-align: left; margin: 20px auto; width: 90%;}

.notice { width: 80%; height: 170px; background-color: #F6C306; border-radius: 100px 0 100px 100px; position: relative; margin-top: 20px; display: grid; grid-template-columns: 45% 1fr; align-items: center; justify-content: start;}
.notice .circle { width: 65%; bottom: 0; right: -127px; position: absolute; outline: 12px solid #142129; outline-offset: -12px; border-radius: 250px;}
@media screen and (width < 1290px ){ .notice {border-radius: 100px 0 0 100px; }}

.menu { display: flex; margin: 0 auto; align-items: center; width: 60%;}
.menu .section { display: flex; flex-direction: column; align-items: center; color: black;}

.menu .section .span { width: 34px; height: 34px; background-color: #142129; border-radius: 20px; }
.notice p { width: 130px; text-align: center; font-size: 15px; font-weight: 500; font-family: "Montserrat"; margin-top: 10px;}

.menu #active .span { width: 46px; height: 46px; border-radius: 30px;}
.menu #active  p { font-size: 20px; font-weight: 800; }

/* .right_side .main_image { width: 70%; outline: 12px solid #142129; outline-offset: -12px; min-width: 400px;} */

.buttons { width: 100%; display: grid; column-gap: 20px; margin-top: 30px; justify-items: center;}
.button { width: 100%; height: 60px; background-color: #DD2853; border-radius: 25px; display: flex; align-items: center; justify-content: center; text-align: center; }
.button p { font-size: 20px; font-weight: 500; font-family: "Montserrat"; color: white; }

.form input { width: 97%; margin-bottom: 30px; height: 60px; background-color: white; outline: 3px solid #DD2853; outline-offset: -3px; border-radius: 25px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 500; font-family: "Inter"; color: #DD2853;  text-align: center;}
.form input::placeholder { font-size: 20px; font-weight: 500; font-family: "Inter"; color: rgba(144, 144, 144, 1);  text-align: center;}

footer { display: flex; align-items: center; width: 90%; justify-content: space-between; margin-top: 100px; height: 56px; border: 2px solid #47B5D6;}
.tablet_footer { display: none; }
.contact { font-size: 16px; font-weight: 700; font-family: "Inter"; }
.year { font-size: 16px; font-weight: 700; font-family: "Inter"; }

.options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 10px; margin-left: 20px;}
.hidden-options { visibility: hidden; }
.options a { display: flex; align-items: center; justify-content: center; width: 70px; height: 70px; border: 1px solid black; border-radius: 40px; }
.options a img { width: 35px; height: 35px; }





/*СТРАНИЦА ИНДЕКС*/
.index { display: flex; }
.index .title { width: 494px; }
.index .markup { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.index .info { display: flex; flex-direction: column; align-items: center; margin-top: 50px; padding: 20px 0; gap: 20px; }
.index .info .title { font-size: 20px; width: 80%; text-align: center; margin: 0; color: #000; }
.index .info .pictogram { width: 80%; }
.index .info .pictogram .pictogram--image { width: 100%; height: auto; }
.index .info p { display: none; font-size: 14px; font-weight: 500; font-family: "Montserrat"; width: 90%; margin: 20px auto; line-height: 18px;}
.index .button { margin-top: 30px; }
.index .right_side { display: flex; flex-direction: column; align-items: center; max-width: 674px; margin-top: 80px; display: none; }
.index .right_side .preview_image { width: 70%; }
.index .right_side .preview_image .main_image { width: 100%; height: auto; }
.index .right_side .notice { background-color: unset; width: 70%; }
.index .right_side .notice .menu { display: none; }
.index .right_side .notice .circle { width: 55%; right: 0; outline: unset; }





/*ОСНОВНЫЕ СТРАНИЦЫ*/
.main_page .markup { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 30px; }
.main_page .markup .info { display: flex; flex-direction: column; text-align: center; margin-top: 0; }
.main_page .markup .info .image { margin-top: 20px; }
.main_page .markup .info .title { font-size: 18px; text-align: center; margin-bottom: 30px; color: #000; }
.main_page .markup .info p { display: none; font-size: 14px; font-weight: 500; font-family: "Montserrat"; line-height: 18px; text-align: left; width: 75%; margin: 0px auto 20px auto; text-align: center; }
.main_page .back-button-container { width: 90%; }
.main_page .back-button-container .button { outline: 3px solid #DD2853; background-color: white; width: 18%; height: 50px; }
.main_page .back-button-container .button p { color: #DD2853; font-size: 18px;}
.main_page .button { margin-top: 30px; }
.main_page .menu .section p { width: auto; margin: 10px 10px 0;}
.main_page .right_side { display: flex; flex-direction: column; align-items: center; max-width: 674px; }
.main_page .right_side .preview_image { width: 80%; }
.main_page .right_side .preview_image .main_image { width: 100%; height: auto; }
.main_page .right_side .notice { display: none; background-color: unset; width: 70%; }
.main_page .right_side .notice .menu { display: none; }
.main_page .right_side .notice .circle { width: 55%; right: 0; outline: unset; }
.main_page .button p { font-size: 18px; text-align: center; }

@media screen and (max-width: 1345px) and (min-width: 1000px ) {.main_page .markup .info .title { font-size:14px; } .main_page .button p { font-size: 15px; }}





/*СТРАНИЦЫ ЗАГРУЗКИ*/
.upload_page { display: flex; }
.upload_page .right_side { display: none; }
.upload_page .info { display: flex; align-items: center; justify-content: center;  height: 200px;}
.upload_page .info .inner_upload { width: 95%; height: 160px; display: flex; align-items: center; justify-content: center; border: 1px dashed black; border-radius: 15px; }
.upload_page .info .inner_upload img { margin-left: 35px; }
.upload_page .info .inner_upload h1 { font-family: "Montserrat"; font-size: 20px; font-weight: 800; color: black; margin-right: 20px; }
.upload_page .buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.upload_page #mobile_button { display: none; }
.upload_page .menu { width: auto; }
.upload_page .menu img { margin-left: 10px; }
.upload_page .menu p { font-size: 28px; font-weight: 800; width: 190px; margin-left: 20px; margin-top: 0;}
.upload_page .upload-dropping { border: 1px solid black !important; }





/* СТРАНИЦА ОШИБКИ 4xx / 5xx */
.error_page { grid-template-columns: 1fr; }
.error_page .left_side > .title { width: 60%; }
.error_page .info { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 60%; }
.error_page .info .title { margin-top: 40px; }
.error_page .info p { text-align: left; margin-bottom: 30px; }
.error_page .info .discription { text-align: left; margin-bottom: 30px; }
.error_page .button { width: 435px; margin-top: 30px }
.error_page .menu p { font-size: 85px; font-weight: 800; width: 190px; margin-top: 0; }
.error_page .menu img { margin-left: 30px; }
.error_page .notice { display: none; }





/*СТРАНИЦЫ ИТОГА*/
.itog_page .right_side { display: flex; justify-content: center; }
.itog_page .info { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: unset; }
.itog_page .markup { margin-top: 30px; }
.itog_page .info .title { margin-top: 40px; }
.itog_page .info .discription { text-align: left; margin-bottom: 50px; }
.itog_page .buttons { display: flex; flex-direction: column; align-items: center; width: 100%; gap: 15px; }
.itog_page .buttons .button { width: 80%; }
.itog_page .buttons .button p { font-size: 18px; }
.itog_page .menu p { font-size: 28px; font-weight: 800; width: 190px; margin-top: 0; }
.itog_page .menu img { margin-left: 30px; }
.itog_page .right_side .main_image { width: 430px; height: calc(430px / 0.75); }
.itog_page .right_side .main_image img { width: 100%; height: auto; image-rendering: pixelated; outline: 12px solid #142129; outline-offset: -12px; }
.itog_page .right_side .main_image img.rotate90deg { transform: rotate(90deg); }
.itog_page .right_side .main_image_20x30 { height: calc(430px / 0.675); }
.itog_page .right_side .main_image_40x50 { height: calc(430px / 0.796875); }
.itog_page .extra-description { width: 80%; color: #dd2853; font-weight: 500; font-family: "Montserrat"; font-size: 1.3rem; text-align: center; }
.itog_page #pdf { animation: glow 1s ease-in infinite; animation-direction: alternate; }
.itog_page #pdf p { font-weight: 700; }

@keyframes glow {
  0% {
    box-shadow: 0 0 5px rgba(221, 40, 83, 0.5);
  }
  50% {
    box-shadow: 0 0 40px rgba(221, 40, 83, 1);
  }
  100% {
    box-shadow: 0 0 5px rgba(221, 40, 83, 0.5);
  }
}






/*СТРАНИЦЫ ИНСТРУКЦИИ КАДРИРОВНИЯ*/
.framing_instructions_page .markup { column-gap: unset; display: flex; flex-direction: column; margin-top: 30px; }
.framing_instructions_page .right_side { min-width: 600px; }
.framing_instructions_page .left_side .discription { margin-top: 30px; }
.framing_instructions_page .info { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: unset; }
.framing_instructions_page .info .title { display: none; margin-top: 40px; }
.framing_instructions_page .info .discription { margin: 40px auto; text-align: left; }
.framing_instructions_page .buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.framing_instructions_page .notice-container { width: 80%; }
.framing_instructions_page .notice { display: flex; border-radius: 100px; justify-content: center; width: 60%; height: unset; margin: 20px auto; }
.framing_instructions_page .notice p { font-size: 20px; font-weight: 800; width: auto; margin: 40px; }
.framing_instructions_page .notice--mobile { display: none; }
.framing_instructions_page .notice img { margin: auto 30px; }
.framing_instructions_page .images { width: 80%; display: block; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); column-gap: 20px; row-gap: 20px;}
.framing_instructions_page .images img { width: 100%; height: auto; }
.framing_instructions_page .info-desktop { margin-top: 1em; }
.framing_instructions_page .info-mobile { display: none; }






.framing_select_size { grid-template-columns: 1fr; }
.framing_select_size .info { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 3em auto 1.5em; }
.framing_select_size .title { width: 60%; }
.framing_select_size .info .title { margin: 1.5em auto; }
.framing_select_size .info .discription { text-align: left; margin-bottom: 50px; }
.framing_select_size .buttons { row-gap: 1em; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 auto; }
.framing_select_size .buttons .button:last-child { width: 60%; grid-column: span 3; background-color: #A91538; }
.framing_select_size .markup { width: 50%; }
.framing_select_size .menu { width: auto; }
.framing_select_size .menu img { margin-left: 10px; }
.framing_select_size .menu p { font-size: 28px; font-weight: 800; width: 190px; margin-left: 20px; margin-top: 0;}
.framing_select_size .images { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.25em; margin-top: 3em; }
.framing_select_size .images img { width: 100%; height: auto; }
.framing_select_size .main_image { display: none; }
.framing_select_size .images .span { text-align: center; font-size: 32px; font-weight: 800; font-family: "Montserrat"; margin-top: 10px;}
.framing_select_size .notice { display: none; }




/*СТРАНИЦЫ КАДРИРОВАНИЯ*/
.framing_page .right_side { min-width: 620px; }
.framing_page .info { display: flex; flex-direction: column; align-items: center; justify-content: center; height: unset; margin-top: 30px; }
.framing_page .info .title { display: none; margin-top: 40px; }
.framing_page .info .discription { text-align: left; margin: 30px; }
.framing_page .buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.framing_page .notice .options { background-color: #F6C306; border-radius: 100px; padding: 20px 40px; margin: 0 auto; }
.framing_page .notice .options .option-button { width: 60px; height: 60px; }
.framing_page .notice .options .option-button#turn_left { transform: scaleX(-100%); }
.framing_page .notice { display: flex; border-radius: 100px; justify-content: center; width: 80%; height: unset; background-color: unset; border-radius: unset; flex-direction: column-reverse; }
.framing_page .notice p { font-size: 28px; font-weight: 800; width: auto; margin-top: 0; }
.framing_page .notice .notice_dots { margin: auto 30px; }
.framing_page .right_side .main_image { width: 500px; height: 500px; }
.framing_page .buttons { display: flex; }

.framing_page .right_side .options.options-aspect-rotation { display: flex; flex-direction: column; gap: 1em; margin-top: 0.6em; }
.framing_page .options .option-button-filled { width: unset; height: unset; }

.framing_page .options .option-button-filled { background-color: unset; outline: 0.15em solid var(--site-primary-color); padding: 1em; }
.framing_page .options .option-button-filled p { color: var(--site-primary-color); }
.framing_page .options .option-button-filled-selected { background-color: var(--site-primary-color); }
.framing_page .options .option-button-filled-selected p { color: white; }



/*СТРАНИЦЫ С РЕЗУЛЬТАТОМ*/
.result_page .right_side { min-width: 620px; }
.result_page .info { display: flex; flex-direction: column; align-items: center; justify-content: center; height: unset; margin-top: unset; }
.result_page .info .title { display: none; margin-top: 40px; }
.result_page .info .discription { text-align: left; margin: 40px auto; }
.result_page .buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); display: flex; }
.result_page .notice { display: flex; border-radius: 100px; justify-content: center; width: 85%;}
.result_page .notice p { font-size: 28px; font-weight: 800; width: auto; margin-top: 0; }
.result_page .notice .notice_dots { margin: auto 30px; }
.result_page .right_side .main_image { width: 539px; height: calc(539px / 0.75); /*outline: 12px solid #142129; outline-offset: -12px;*/ }
.result_page .right_side .main_image #tmp-show-img { width: 100%; height: auto; image-rendering: pixelated; margin-bottom: 15px; }
.result_page .right_side .main_image_20x30 { height: calc(539px / 0.675); }
.result_page .right_side .main_image_40x50 { height: calc(539px / 0.796875); }
/* .result_page .left_side .markup .swiper */
.result_page .left_side .markup { display: flex; flex-direction: column; margin-top: 30px; }
.result_page .left_side .swiper-pre-wrapper { position: relative; }
.result_page .left_side .swiper { width: 80%; margin: 25px auto; }
.result_page .left_side .swiper-slide img { 
  width: 100%; 
  height: auto;  
  image-rendering: pixelated; 
  cursor: pointer; 
  user-select: none;
}
.result_page .left_side .result-img-active {
  outline: 7px solid #DD2853;
  outline-offset: -5px;
}
.result_page .left_side .swiper-pre-wrapper .swiper-button-prev,
.result_page .left_side .swiper-pre-wrapper .swiper-button-next { 
  position: absolute; color: #DD2853;
}
.result_page .left_side .swiper-pre-wrapper .swiper-button-prev { left: -5px }
.result_page .left_side .swiper-pre-wrapper .swiper-button-next { right: -5px }
.result_page .left_side .markup .slider-container { margin-bottom: 1.4em; }
.result_page .left_side .markup .slider-container .slider-text { font-size: 1.5rem; font-weight: 500; font-family: "Montserrat"; color: var(--site-primary-color); margin-bottom: 0.7em; }
.result_page .left_side .markup .slider-container input { width: 100%; }
.range-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}
.range-slider:hover {
  opacity: 1;
}
.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: var(--site-primary-color);
  cursor: pointer;
}
.range-slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: var(--site-primary-color);
  cursor: pointer;
}
.result_page .left_side .markup .swiper-pre-wrapper .swiper .swiper-wrapper .result-pixel-img { position: relative; }
.result_page .left_side .markup .swiper-pre-wrapper .swiper .swiper-wrapper .result-pixel-img .variant-image { filter: brightness(90%); }
.result_page .left_side .markup .swiper-pre-wrapper .swiper .swiper-wrapper .result-pixel-img .favourite { position: absolute; width: 3em; height: 3em; top: 0; left: 0; z-index: 99; }
.result_page .left_side .markup .swiper-pre-wrapper .swiper .swiper-wrapper .result-pixel-img .numerator { display: flex; justify-content: center; align-items: center; position: absolute; width: 3em; height: 3em; bottom: 1.8%; right: 0; z-index: 99; background-color: var(--site-primary-color); user-select: none; cursor: pointer; }
.result_page .left_side .markup .swiper-pre-wrapper .swiper .swiper-wrapper .result-pixel-img .numerator p { font-size: 1.3rem; font-family: "Montserrat"; color: white; }

.slider-blocks {
  display: flex;
  flex-direction: row;
  gap: 0.7em;
}
.slider-item {
  flex: 1;
  background-color: var(--site-primary-color);
  height: 1.3em;
  cursor: pointer;
  user-select: none;
}
.slider-item-active {
  position: relative;
  background-color: unset;
  outline: 0.1em solid var(--site-primary-color);
}
.slider-number {
  position: absolute;
  width: 50%;
  height: 200%;
  background-color: var(--site-primary-color);
  top: -50%;
  left: 50%;
  transform: translate(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
}
.slider-number > p {
  font-size: 1.3rem;
  font-family: "Montserrat";
  color: white;
}



/*СТРАНИЦЫ ДЕМО (ПОПРОБОВАТЬ ЕЩЕ РАЗ)*/
.try_again_page .right_side { min-width: 620px; display: flex; flex-direction: column;}
.try_again_page .info { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 240px;}
.try_again_page .info .title { margin-top: 40px; }
.try_again_page .info .discription { text-align: left; margin-bottom: 50px; }
.try_again_page .buttons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.try_again_page .menu { width: auto; }
.try_again_page .menu img { margin-left: 10px; }
.try_again_page .menu p { font-size: 28px; font-weight: 800; width: 190px; margin-left: 20px; margin-top: 0;}
.try_again_page .images { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 70px auto 400px; align-items: stretch;}
.try_again_page .images img { width: 100%; height: auto; }
.try_again_page .main_image { display: none; }






/*СТРАНИЦЫ ДЕМО*/
.demo_page { grid-template-columns: 2fr 3fr; }
.demo_page .right_side { min-width: 620px; display: flex; flex-direction: column;}
.demo_page .info { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 240px;}
.demo_page .info .title { margin-top: 40px; }
.demo_page .info .discription { text-align: left; margin-bottom: 50px; }
.demo_page .buttons { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1em; }
.demo_page .buttons .button:last-child { grid-column: span 3; background-color: #A91538; width: 60%; }
.demo_page .menu { width: auto; }
.demo_page .menu img { margin-left: 10px; }
.demo_page .menu p { font-size: 28px; font-weight: 800; width: 190px; margin-left: 20px; margin-top: 0;}
.demo_page .images { 
  display: grid; 
  grid-template-areas: 
    "original original coffee coffee  disco   disco "
    "empty1   amour    amour  crystal crystal empty2";
  column-gap: 1.25em; 
  row-gap: 2.65em;
  margin-top: 3em; 
}
.demo_page .images img { width: 100%; height: auto; }
.demo_page .main_image { display: none; }
.demo_page .images .span { text-align: center; font-size: 32px; font-weight: 800; font-family: "Montserrat"; margin-top: 10px;}
.demo_page #mobilePhotoContainer { display: none; }
.demo_page #desktopPhotoContainer .photo-wrapper .photo-wrapper__image {
  width: 100%; height: auto;
}
.demo_page #desktopPhotoContainer .photo-wrapper { position: relative; }
.demo_page #desktopPhotoContainer .photo-wrapper .photo-wrapper__label {
  display: block;
  position: absolute;
  bottom: -1em;
  left: 15%;
  width: 72%;
  padding: 1em 0;
  background-color: #F6C306;
  border-radius: 100px;
  font-size: 1.1rem;
}
.demo_page #desktopPhotoContainer .type-color-disco { grid-area: disco; }
.demo_page #desktopPhotoContainer .type-color-coffee { grid-area: coffee; }
.demo_page #desktopPhotoContainer .type-color-original { grid-area: original; }
.demo_page #desktopPhotoContainer .type-color-crystal { grid-area: crystal; }
.demo_page #desktopPhotoContainer .type-color-amour { grid-area: amour; }
.demo_page .notice { display: none; }







/*СТРАНИЦЫ ВЫБОРА ВАРИАНТА*/
.choose_page .right_side { min-width: 620px; display: flex; flex-direction: column;}
.choose_page .info { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 240px;}
.choose_page .info .title { margin-top: 40px; }
.choose_page .info .discription { text-align: left; margin-bottom: 50px; }
.choose_page .buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choose_page .menu { width: auto; }
.choose_page .menu img { margin-left: 10px; }
.choose_page .menu p { font-size: 28px; font-weight: 800; width: 190px; margin-left: 20px; margin-top: 0;}
.choose_page .images { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 70px auto 400px; align-items: stretch;}
.choose_page .images img { width: 100%; height: auto; }
.choose_page .main_image { display: none; }






/*СТРАНИЦЫ С КОДОМ*/
.code_page .info { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 0; }
.code_page .notice { height: unset; background-color: unset; border-radius: unset; margin-top: unset; height: unset; display: flex; width: 100%; }
.code_page .notice p { width: unset; }
.code_page .notice .circle { display: none; }
.code_page .right_side .main_image { width: 80%; }
.code_page .info .title { margin-top: 40px; font-size: 22px;}
.code_page .info .title .subtitle { display: block; margin-top: 0.25em; font-weight: normal; font-size: 20px; }
.code_page .info .form { grid-template-columns: 100%; grid-template-rows: auto auto; row-gap: 20px; width: 90%; }
.code_page .info .form input { margin: 0; margin-bottom: 40px; }
/* .code_page .info .form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center; column-gap: 20px; width: 100%;} */
.code_page .buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.code_page .menu { width: 50%; background-color: #F6C306; border-radius: 100px; margin: 20px auto; }
.code_page .menu img { margin-left: 10px; }
.code_page .menu p { font-size: 21px; font-weight: 800; text-align: center; margin: 30px auto;}
.code_page footer { margin-top: 50px;}
.code_page .markup { margin-top: 30px; }
.code_page .left_side .markup .info .form #form_code .code-input {
  font-family: "Fira Code", serif; font-optical-sizing: auto;
}
.code_page .left_side .markup .info .form #form_code .code-input::placeholder {
  font-weight: 500; font-family: "Fira Code", serif; font-optical-sizing: auto;
}
.code_page .left_side .markup .info .form #form_code .notice {
  width: 100%;
  font-family: "Inter";
  display: flex;
  color: #a80028;
  font-size: 16px;
  height: auto;
  margin: -20px 0 40px 0;
}

.code_page .left_side .markup .info .form #form_code .notice .exclamation-mark {
  font-family: "Inter"; 
  font-size: 64px;
  margin: 0 20px;
  font-weight: bolder;
}









.email_page .info { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 0; }
.email_page .notice { height: unset; background-color: unset; border-radius: unset; margin-top: unset; height: unset; display: flex; width: 100%; }
.email_page .notice p { width: unset; }
.email_page .notice .circle { display: none; }
.email_page .right_side .main_image { width: 80%; }
.email_page .info .title { margin-top: 40px; font-size: 22px; margin-bottom: 0; }
.email_page .info .title .subtitle { display: block; margin-top: 0.25em; font-weight: normal; font-size: 20px; }
.email_page .info .form { grid-template-columns: 100%; grid-template-rows: auto auto; row-gap: 20px; width: 90%; }
.email_page .info .form input { margin: 0; margin-bottom: 40px; }
/* .email_page .info .form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center; column-gap: 20px; width: 100%;} */
.email_page .buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.email_page .menu { width: 50%; background-color: #F6C306; border-radius: 100px; margin: 20px auto; }
.email_page .menu img { margin-left: 10px; }
.email_page .menu p { font-size: 21px; font-weight: 800; text-align: center; margin: 30px auto;}
.email_page footer { margin-top: 50px;}
.email_page .markup { margin-top: 30px; }
.email_page .left_side .markup .info .form #form_code .code-input {
  font-family: "Fira email", serif; font-optical-sizing: auto;
}
.email_page .left_side .markup .info .form #form_code .code-input::placeholder {
  font-weight: 500; font-family: "Fira email", serif; font-optical-sizing: auto;
}
.email_page .left_side .markup .info .form #form_code .notice {
  width: 100%;
  font-family: "Inter";
  display: flex;
  color: #a80028;
  font-size: 16px;
  height: auto;
  margin: -20px 0 40px 0;
}
.email_page .left_side .markup .info .form #form_code .notice .exclamation-mark {
  font-family: "Inter"; 
  font-size: 64px;
  margin: 0 20px;
  font-weight: bolder;
}
.email_page .markup__brief-info { margin: 1.9em auto; width: 60%; }
.email_page .markup__brief-info p { font-size: 1.0rem; font-weight: 600; text-align: center; width: 100%; color: #000; font-family: "Inter"; }
.email_page .description { display: flex; justify-content: center; margin: 1em 0; }
.email_page .description p { font-size: 1.0rem; text-align: center; width: 100%; color: #000; font-family: "Inter"; font-style: italic; line-height: 1.3rem; }








/*СТРАНИЦА СБОРКИ*/
.assembly_page .info { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 371px; height: fit-content; padding: 20px; }

.assembly_page .right_side { min-width: 700px; }
.assembly_page .colors { margin: 100px auto 0 155px; width: 370px; display: flex; justify-content: center; justify-items: center; align-items: center;}
.assembly_page .colors a .color { width: 40px; height: 40px; border-radius: 3px; margin: 0 3px; user-select: none; cursor: pointer;}
.assembly_page .colors a #color1 { background-color: rgba(255, 255, 255, 1); border: 1px solid rgba(175, 175, 175, 1);}
.assembly_page .colors a #color2 { background-color: rgba(231, 231, 231, 1); border: 1px solid rgba(175, 175, 175, 0);}
.assembly_page .colors a #color3 { background-color: rgba(203, 203, 203, 1); border: 1px solid rgba(175, 175, 175, 0);}
.assembly_page .colors a #color4 { background-color: rgba(140, 140, 140, 1); border: 1px solid rgba(175, 175, 175, 0);}
.assembly_page .colors a #color5 { background-color: rgba(88, 88, 88, 1); border: 1px solid rgba(175, 175, 175, 0);}
.assembly_page .colors a #color6 { background-color: rgba(18, 18, 18, 1); border: 1px solid rgba(175, 175, 175, 0);}
.assembly_page .colors a .color p{ font-family: "Arial Black"; font-weight: 900; font-size: 24px; margin: 14px 0 0 4px; color: black;}
.assembly_page .colors a #reload { display: none; }

.assembly_page .bricks { border-collapse: separate; border-spacing: 5px; width: 535px; margin: 15px auto 120px 70px;}
.assembly_page .bricks td { width: 38px; height: 38px; }
.assembly_page .bricks .lable p{ text-align: center; font-family: "Inter"; font-weight: 400; font-size: 12px; margin-top: 13px; color: rgba(108, 108, 108, 1);}
.assembly_page .bricks .lable_interactive p{ text-align: center; font-family: "Inter"; font-weight: 400; font-size: 12px; margin-top: 15px; color: rgba(108, 108, 108, 1);}
.assembly_page .bricks .brick { background-color: black; border-radius: 5px; width: 40px; height: 40px; user-select: none; cursor: pointer; }
.assembly_page .bricks .brick .brick_word { width: 20px; font-family: "Inter"; color: white; font-size: 24px; margin: 15px 0 0 5px; position: absolute;}
.assembly_page .bricks .brick .brick_num { width: 10px; font-family: "Inter"; color: white; font-size: 10px;  margin: 3px 0 0 25px; position: absolute; text-align: right;}

.assembly_page .buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.assembly_page .buttons a .reloadButton { width: 35px; height: 35px; background-color: rgba(217, 217, 217, 1); border-radius: 5px;}

.assembly_page .pages { display: grid; grid-template-columns: repeat(8, 1fr); justify-items: center; align-items: center; column-gap: 10px;}
.assembly_page .pages .page { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; outline: 3px solid #2b2a28; outline-offset: -3px; border-radius: 40px;}
.assembly_page .pages .page p{ font-family: "Arial Black"; font-weight: 900; font-size: 25px; color: black;}

.assembly_page .options {  grid-template-columns: repeat(2, minmax(0, 1fr)); width: 160px; display: flex; justify-content: center;}
.assembly_page .options a { outline: 3px solid black; outline-offset: -3px; display: flex; width: 50px; height: 50px;  border-radius: 40px; align-items: center; justify-content: center; cursor: pointer; }

.assembly_page .menu { width: auto; }
.assembly_page .menu img { margin-left: 10px; }
.assembly_page .menu p { font-size: 28px; font-weight: 800; width: 213px; margin-left: 20px; margin-top: 0;}
.assembly_page .notice { display: none; }
.assembly_page .notice .circle { max-width: 305px; }
.assembly_page footer { margin-top: 50px;}

.assembly_page .orange_back { max-width: 1256px; height: auto; margin: 30px auto 0; display: flex; flex-direction: column; }

.assembly_page .pages { margin-top: 15px; width: 471px; display: grid; grid-template-columns: repeat(auto-fit, minmax(30px, 105px)); justify-content: center; justify-items: center; align-items: center; display: flex; gap: 35px; outline: #CD2222; }
.assembly_page .pages .swiper .swiper-wrapper .current-page { background-color: white; box-sizing: border-box; background-color: #2b2a28; }
.assembly_page .pages .swiper .swiper-wrapper .current-page p { color: #f6c306; }
.assembly_page .pages .swiper-button-prev,
.assembly_page .pages .swiper-button-next { 
  position: relative; top: auto; margin-top: 0; color: #2B2A28;
}
.assembly_page .pages .page { height: 65px; border-radius: 40px; display: flex; justify-content: center; margin-top: 10px; margin-bottom: 10px; }

.assembly_page .buttons-page-20 { display: flex; border-radius: 5px; justify-content: center;  gap: 10px; }
.assembly_page .buttons-page-20 .page { width: 60px; height: 60px; border-radius: 40px; display: flex; align-items: center; justify-content: center; padding: 5px; user-select: none; cursor: pointer; outline: 3px solid #2b2a28; box-sizing: border-box; }
.assembly_page .buttons-page-20 .page p { font-family: "Arial Black"; font-weight: 900; font-size: 25px; color: #2b2a28; }





.purchase_page .markup { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-items: center; width: 900px; margin: 0 auto;}
.purchase_page .marketplace .info {width: 206px; height: 176px; background: rgba(246, 195, 6, 1); border-radius: 20px;}
.purchase_page .marketplace .info p { font-family: "Montserrat"; margin: 10px auto; color: black; text-align: left; font-size: 14px; font-weight: 500; width: 90%; overflow: hidden;}
.purchase_page .marketplace .info .info_bg { background-image: url("../images/marketplace_bg.37d95914cba0.png"); background-position: center -4px; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; height: 112px;}
.purchase_page .marketplace .info .info_bg p { margin: 0; text-align: center; font-size: 32px; font-weight: 800; color: #FDFCE5; }
.purchase_page .button { width: 206px; height: 44px; margin-top: 30px;}
.purchase_page footer { margin-top: 50px;}
@media screen and (width < 1800px) { .purchase_page .markup { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; justify-items: center; width: 450px; margin: 0 auto;} }


@media screen and (max-width: 1470px) and (min-width: 1000px ) { 
    .assembly_page .info .options { margin-bottom: 15px; } 
    .assembly_page .pages { column-gap: 25px; } 
}



.all_gen_page .right_side { min-width: 620px; display: flex; flex-direction: column;}
.all_gen_page .markup { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; width: 100%; margin: 0 auto; column-gap: 20px;}
.all_gen_page .generation { width: 100%; }
.all_gen_page .generation .image { display: none; }
.all_gen_page .info { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 106px;}
.all_gen_page .info .title { margin-top: 20px; }
.all_gen_page .info .discription { text-align: left; margin-bottom: 50px; }
.all_gen_page .generation .button { margin-top: 20px;}
.all_gen_page .buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center; margin-top: 50px;}
.all_gen_page .menu { width: auto; }
.all_gen_page .menu img { margin-left: 10px; }
.all_gen_page .menu p { font-size: 28px; font-weight: 800; width: 190px; margin-left: 20px; margin-top: 0;}
.all_gen_page .images { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1.5em;
}
.all_gen_page .images img { width: 100%; height: auto; }
.all_gen_page .main_image { display: none; }
.all_gen_page .images .span { text-align: center; font-size: 32px; font-weight: 800; font-family: "Montserrat"; margin-top: 10px;}
.all_gen_page .notice { display: none; }

/* wtf */
@media screen and (width < 1280px) { .all_gen_page .button p { font-size: 15px; } .all_gen_page .info .title { font-size: 18px; }}

.all_gen_page #mobilePhotoContainer { display: none; }
.all_gen_page .photo-wrapper { grid-row: span 1; align-self: center; }
.all_gen_page .photo-wrapper:nth-child(2) { grid-row: span 2; align-self: center; }
.all_gen_page .photo-wrapper .photo-wrapper__image { width: 100%; height: auto; }
.all_gen_page .photo-wrapper .photo-wrapper__label { display: flex; position: relative; justify-content: center; align-items: center; width: 72%; padding: 1em 0; margin: -1.25em auto 3em; background-color: #F6C306; border-radius: 100px; font-size: 1.1rem; }
.all_gen_page .photo-wrapper-near-gap { width: 200px; height: 200px;  }
.all_gen_page .markup .button p { font-size: 1.1rem; }






.faq_page { display: block; }
.faq_page .title { width: 100%; font-size: 60px; }
.faq_page .question_block { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; margin: 30px 20px 0; column-gap: 10px;}
.faq_page .question_span { position: absolute; }
.faq_page .answer_span { position: absolute; }
.faq_page .question_block .question .question_title { width: 90%; height: 100px; margin-left: 50px; display: flex; align-items: center; }
.faq_page .question_block .question .question_title h3 { font-family: Montserrat; font-size: 24px; font-weight: 700; line-height: 31px; }
.faq_page .question_block .answer p { margin-left: 50px; margin-top: 10px; font-family: Montserrat; font-size: 24px; font-weight: 500; line-height: 31px; }
.faq_page .question_block ul { font-family: Montserrat; font-size: 24px; font-weight: 500; line-height: 31px; list-style-type: disc; margin-left: 85px; margin-top: 10px; }
.faq_page .question_block ol { font-family: Montserrat; font-size: 24px; font-weight: 500; line-height: 31px; list-style: decimal; margin-left: 85px; margin-top: 10px;}
.faq_page .question_block .faq_img { width: 90%; height: auto; }
.faq_page .question_block a { font-family: Montserrat; font-size: 24px; font-weight: 500; line-height: 31px; text-decoration: underline; color: black;}
.faq_page .footer { margin-top: 50px; width: 50%;}
.faq_page .question_block #h_background { width: 100%; height: 120px; }


.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  display: flex;
  justify-content: center;
  justify-items: center;
}
.popup { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); z-index: 1001; }
.popup-x-button { display: flex; justify-content: right; margin-bottom: 20px; user-select: none; cursor: pointer; }
.popup-content { display: flex; justify-content: center; align-items: center; margin: 50px 0; overflow-y: auto; }
.help { width: 90%; background-color: #f6c306; border: solid 2px rgba(0, 0, 0, 0.25); }
.help img { width: 70%; height: auto; }
.help .close { text-decoration: none; font-family: "Montserrat"; font-size: 25px; font-weight: 600; color: white; width: 100px; height: 40px; background-color: #A91538; display: flex; align-items: center; justify-content: center; border-radius: 25px;}
.help #desktop_image { display: block; }
.help #tablet_image { display: none; }
.help #mobile_image { display: none; }


.popup_page .right_side { min-width: 620px; }
.popup_page .info { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 240px;}
.popup_page .info .title { margin-top: 40px; }
.popup_page .info .discription { text-align: left; margin-bottom: 50px; }
.popup_page .buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.popup_page .notice { display: flex; border-radius: 100px; justify-content: center; width: 85%;}
.popup_page .notice p { font-size: 28px; font-weight: 800; width: auto; margin-top: 0; }
.popup_page .notice .notice_dots { margin: auto 30px; }
.popup_page .main_image { width: 300px; height: 400px; }
.popup_page .right_side .main_image { width: 539px; height: calc(539px / 0.75); }
.popup_page .right_side .main_image #preview-img { width: 100%; height: auto; }


.failed_page { grid-template-columns: 1fr; max-width: 700px; }
.failed_page .right_side { min-width: 620px; display: none; }
.failed_page .info { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.failed_page .info .icon { width: 7em; }
.failed_page .info .icon img { width: 100%; height: auto; }
.failed_page .info .title { margin-top: 0px; }
.failed_page .info .discription { text-align: left; margin-bottom: 50px; }
.failed_page .buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.failed_page .notice { display: flex; border-radius: 100px; justify-content: center; width: 85%;}
.failed_page .notice p { font-size: 28px; font-weight: 800; width: auto; margin-top: 0; }
.failed_page .notice .notice_dots { margin: auto 30px; }
.failed_page .main_image { width: 300px; height: 400px; }




/* Custom ones */

.none {
  display: none !important;
}

.loading {
  margin-top: -100px;
  margin-left: -100px;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 12;
}
.loading{
  margin-top: -100px;
  margin-left: -100px;
  position: fixed;
  top: 50%;
  left: 50%; 
  z-index: 777;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.loading img {
  max-width: 100%;
}
.loading p {
  text-align: center;
  font-size: 24px;
  color: #fec900;
  font-weight: 800;
  font-family: "Inter";
  position: absolute;
  bottom: -100px;
  height: 100px;
}

.mask {
  position: fixed;
  background: #000000;
  opacity: 0.7;
  width: 100%;
  height: 200%;
  margin-top: -50%;
  z-index: 10;
}

.display_with_contents {
  display: contents;
}

.hidden {
  visibility: hidden !important;
  position: absolute; 
  top: -9999px; 
  left: -9999px;
}

.loading-pdf{
	display: inline-block;
	width: 24px;
	position: relative;
	margin-top: -10px;
	top: 5px;
	margin-left: 10px;
}


.footer-2 { width: 85%; margin-top: 40px; display: flex; flex-direction: column; gap: 10px; font-family: "Inter"; text-align: center; color: #DD2853; }
.all_gen_page .left_side .footer-2 { width: 100%; }
.footer-2 .footer-2--title { font-size: 20px; font-weight: 800; text-align: center; width: 100%; }
.footer-2 .container { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 10px; }
.footer-2 a { color: #DD2853; }
.footer-2 .container .link { display: contents; }
.footer-2 .container .link .image-container { width: 45px; height: 45px; }
.footer-2 .container .link .image-container img { width: 100%; height: auto; }



:root {
  --swiper-navigation-color: #dd2853;
  --swiper-pagination-color: #000;
  --swiper-pagination-bullet-inactive-color: #000;
}
.carousel-container { width: 90%; margin: 0 auto; display: flex; align-items: center; gap: 35px; }
.swiper-carousel {
  max-width: 1200px;
  margin-top: 30px;
  user-select:  none;
}
.swiper-carousel .swiper-slide {
  border-radius: 8px;
  background: #18212b;
}
.swiper-carousel .swiper-pagination-bullets {
  bottom: 0;
}
.swiper-carousel img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}
.carousel-container .swiper-button-next, 
.carousel-container .swiper-button-prev { 
  user-select: none; position: unset !important; 
}


.support_panel_page { width: 100%; margin: 40px auto; }
.support_panel_page .round-counter { margin: 0.3em 1em; text-align: center; display: inline-flex; justify-content: center; align-items: center; width: 1.6em; font-weight: bold; outline: 3px solid #0009; border-radius: 99em; aspect-ratio: 1 / 1; color: #0009; }
.support_panel_page input.query-input { width: 100%; }
.support_panel_page td img { width: 100%; height: auto; max-width: 10em; }



.horizontal-step-indicator { display: flex; align-items: center; margin: 0em auto 5em; }
.horizontal-step-indicator-desktop { display: flex; }
.horizontal-step-indicator-mobile { display: none; }

.horizontal-step-indicator  .step { display: flex; position: relative; justify-content: center; align-items: center; width: 3em; height: 3em; background-color: var(--site-primary-color); border: 3px solid var(--site-primary-color); outline-offset: -3px; border-radius: 99em; user-select: none; cursor: default; }
.horizontal-step-indicator .step p { color: #fff; font-size: 1.5rem; font-weight: 500; font-family: "Montserrat"; }
.horizontal-step-indicator .step .step-p-description { position: absolute; margin-top: 6.3em; color: var(--site-primary-color); font-size: 1.0rem; text-align: center; font-weight: 500; height: 1em; }

.horizontal-step-indicator .step-active { width: 3.5em; height: 3.5em; display: flex; justify-content: center; background-color: unset; border: 5px solid var(--site-primary-color); }
.horizontal-step-indicator .step-active p { color: var(--site-primary-color); font-size: 2rem; }
.horizontal-step-indicator .step-active .step-p-description { font-weight: 600; }

.horizontal-step-indicator .step-inactive { display: flex; justify-content: center; background-color: unset; border: 3px solid var(--site-primary-alpha-color); }
.horizontal-step-indicator .step-inactive p { color: var(--site-primary-alpha-color); }
.horizontal-step-indicator .step-inactive .step-p-description { color: var(--site-primary-alpha-color); }

.horizontal-step-indicator .step-line { width: 4em; height: 0.25em; background-color: var(--site-primary-color); }
.horizontal-step-indicator .step-line-inactive { background-color: var(--site-primary-alpha-color); }

.upload_page .horizontal-step-indicator { margin-top: 1.75em; margin-bottom: 1em; }

.framing_page .horizontal-step-indicator,
.result_page .horizontal-step-indicator,
.itog_page .horizontal-step-indicator { margin: 3em auto; }