:root {
  --site-primary-color: #5A8DA8;
  --site-secondary-color: #DC7352;
  --site-secondary-alpha-color: #DC735266;
  --site-tertiary-color: #E1A94A;
}

.header { max-width: 1000px; min-width: 1000px; height: auto; margin: 40px auto 0; display: grid; align-items: center; justify-content: space-between; max-width: 1000px; grid-template-columns: 2fr 5fr 2fr; width: 70%; }
.header .faq-mobile { display: none; }
.header .logo-link { justify-self: center; }
.language { text-decoration: none; font-family: "Montserrat"; font-size: 18px; font-weight: 600; color: white; width: 100px; height: 40px; background-color: #5B8EA9; display: flex; align-items: center; justify-content: center; border-radius: 25px;}
.faq {  text-decoration: none; font-family: "Montserrat"; font-size: 18px; font-weight: 600; color: white; padding: 0 10px; height: auto; display: flex; align-items: center; justify-content: center; border-radius: 0;}
.faq img { width: 45%; }
.header_background { max-width: 1250px; min-width: 1000px; height: 105px; background-image: url("../images/header_background.b1e2c0a8063b.png"); margin: 0 auto; display: none;}

/* html:has(.framing_page) .header { display: none; }
html:has(.framing_page) .header_background { display: none !important; }
html:has(.framing_page) .mobile_header_buttons { display: none !important; } */


@font-face {
    font-family: 'Rubik';
    src: url("/static/fonts/Rubik.6d3102fa3319.ttf") format('truetype');
}

.logo { width: 512px; }
.logo img { width: 100%; height: auto; }

.marked-span { 
  color: white;
  stroke: black;
  background: #DC7352;
  outline: 2px solid #DC7352;
  border-radius: 5px;
  font-size: 1.45em;
}

.swiper-button-prev, .swiper-button-next { color: #DC7352 !important; }

article { max-width: 1250px; min-width: 1000px; margin: 40px auto 40px; display: grid; grid-template-columns: 1fr auto; justify-content: space-between; align-items: center; column-gap: 20px;}

.title-bigger-number-span { font-size: 4.25rem; margin: 0 0.05em; }

.mask{
  position: fixed;
  background: #000000;
  opacity: 0.7;
  width: 100%;
  height: 300%;
  margin-top: -50%;
  z-index: 10 !important;  
  display: inline-block;

}
.mask-block-show{
  z-index: 11;
  position: fixed;
  left: 50%;
  width: 60%;
  margin-top: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 15px;
  background: #ffffff;
  opacity: 1;
  padding: 15px;
  text-align: center;
}

.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 {
  /* outline: 1px solid black; */
  text-align: center;
  font-size: 24px;
  color: #f8b26a;
  font-weight: 800;
  font-family: "Alegreya Sans SC";
  position: absolute;
  bottom: -100px;
  height: 100px;
}

.loading-pdf{
	display: inline-block;
	width: 24px;
	position: relative;
	margin-top: -10px;
	top: 5px;
	margin-left: 10px;
}
.none{
  display: none !important;
}
.hidden{
  visibility: hidden !important;
  position: absolute; 
  top: -9999px; 
  left: -9999px;
}


#foto_wrapper img{
  image-rendering: pixelated;
  z-index: 100;
}


.images {max-width: 578px; width: 100%; grid-column: 2; background-image: url("../images/images_background.4377ab898aa9.png"); background-position: 0 0; background-repeat: no-repeat; background-size: cover; display: grid; grid-template-columns: auto auto; justify-self: end; align-self: start;}
.images .image1 { height: 100%; width: 100%; grid-column: 1; grid-row: 1;  }
.images .image2 { height: 100%; width: 100%; grid-column: 2; grid-row: 2;  }
.images .image3 { height: 100%; width: 100%; grid-column: 1; grid-row: 3;  }
.images-mobile {display: none;}

.swiper-images {max-width: 578px; width: 100%; grid-column: 2; background-position: 0 0; background-repeat: no-repeat; background-size: cover; justify-self: end; column-gap: 45px; align-self: start;}
.swiper-slide img {
  width: 217px;
  height: auto;
  display: block;
  object-fit: cover;
}

.swiper-cubes{
  display: inline-block !important;
  width: 289px;
  padding: 0 !important;
  margin: -3px !important;
}
.swiper-cube-shadow{
  display: none;
}
.swiper-cubes-modile{
  display: none;
}





.left_side { grid-column: 1; grid-row: 1;}

.title { font-size: 3.75rem; font-weight: 800; font-family: "Alegreya Sans SC"; margin: 0; text-align: left; color: var(--site-primary-color); width: 90%; }
.red { color: #DC7352; }
.description { font-size: 2rem; font-weight: 800; font-family: "Alegreya Sans SC"; margin: 0; text-align: left; color: #DC7352; width: 95%; }

.button { width: 85%; margin: 30px 0; height: 80px; background-color: #DC7352; display: flex; align-items: center; justify-content: center; user-select: none; cursor: pointer; }
.button-shop { width: 85%; margin: 10px 0; height: 55px; background-color: #DC7352; border-radius: 50px; display: flex; align-items: center; justify-content: center; }
.button-shop-back { margin-top: 0px; }
.button p { font-size: 1.25rem; font-weight: 500; font-family: "Inter"; color: white; text-align: center; }
.button img { margin-right: 5px; }
.extra-button { background-color: unset; outline: .1em solid var(--site-primary-color); }
.extra-button p { color: var(--site-primary-color); }

.form input { width: 83%; margin: 30px 0; height: 70px; background-color: white; border: 5px solid #DC7352; border-radius: 0.7em; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 500; font-family: "Fira Code", serif; font-optical-sizing: auto; color: #DC7352;  text-align: center;}
.form input::placeholder { font-size: 20px; font-weight: 500; font-family: "Fira Code", serif; font-optical-sizing: auto; color: #DC7352;  text-align: center;}
.code-span { font-family: 'Fira Code', serif; }


.footer { width: 100%; display: grid; grid-template-columns: auto auto; align-items: center; justify-content: space-between; margin: 50px 0 50px; align-self: end;}
.contact { grid-column: 1; font-size: 16px; font-weight: 700; font-family: "Inter"; }
.year { grid-column: 2; font-size: 16px; font-weight: 700; font-family: "Inter"; }

.orange_back { height: 434px; background-color: rgba(241, 206, 152, 1); border-radius: 15px; }

.notice { text-align: center; font-size: 15px; font-weight: 600; font-family: "Montserrat"; margin-top: 10px; width: 83%; color: #a50202; }

.mobile_image_1, .mobile_image_2, .mobile_image_3, .mobile_header_buttons { display: none; }




/* html:has(article.index) header { display: none; } */
.header-zebra { display: none; }
html:has(article.index) .header-zebra { max-width: 1250px; min-width: 1000px; margin: 40px auto 0; display: grid; grid-template-columns: 3fr 3fr; align-items: center; justify-content: space-between; }
.index .title { text-align: center; }
.index { grid-template-columns: 1fr 1fr; }
.index .right_side { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2em; }
.zebra-banner { max-width: 600px; display: block; overflow: hidden; background-color: #ed0783; }
.zebra-banner-mobile { display: none; background-color: #ed0783; }
.zebra-banner img { width: 100%; animation: zebraBannerAnim 5s linear infinite; }
.full-color-banner { width: 100%; animation: zebraBannerAnim 5s ease-in-out infinite; }
@keyframes zebraBannerAnim {
  0% { transform: translateX(0px); }
  50% { transform: translateX(10px); }
  100% { transform: translateX(0px); }
}
.index .swiper-images { align-self: center; }
.index .buttons { display: flex; flex-direction: column; gap: 1em; }
.index .buttons .button { justify-content: left; margin: 0; }
.index .buttons .button img { justify-content: left; margin: 0 3em; height: 60%; }
.index .buttons .button.mosaic-button { width: 90%; }
.index .buttons .button.shop-button { width: 82%; background-color: var(--site-primary-color); }
.index .buttons .button.shop-button .discount { display: none; }

.index { grid-template-columns: 7fr 6fr; }
.index .full-color { display: flex; flex-direction: column; gap: 0; overflow: hidden; }
.index .full-color .label { display: flex; justify-content: center; align-items: center; width: 100%; height: 2em; font-family: 'Rubik'; font-weight: 500; font-size: 1rem; flex-direction: column; padding: 0.3em; z-index: 7; }
.index .full-color .label:not(label:first-child) { margin-top: -0.05em; }
.index .full-color .label p { color: #fff; }
.index .full-color .primary-label { background-color: var(--site-primary-color); width: 70%; font-size: 1.6rem; }
.index .full-color .primary-label-shorter { width: 63%; font-size: 1rem; }
.index .full-color .secondary-label { background-color: var(--site-secondary-color); margin-left: 1.5em; width: 35%; height: 1.5rem; }
.index .full-color .secondary-label-longer { width: 65%; }
.index .full-color .tertiary-label { background-color: var(--site-tertiary-color); margin-left: 1em; width: 55%; }
.index .full-color .tertiary-label-longer { width: 71%; font-size: 1.3rem; }
.index .full-color .preview-image-box { position: relative; }
.index .full-color .preview-image-box .circular-label { position: absolute; top: 50%; left: 3%; transform: translateY(-50%); background-color: var(--site-primary-color); font-family: 'Rubik'; font-weight: 500; border-radius: 99em; width: 6em; aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.index .full-color .preview-image-box .circular-label { color: #fff; }
.index .full-color .preview-image-box .circular-label .huge-number { font-size: 2.9rem; }




.main_page { grid-template-columns: 7fr 6fr; }
.main_page .buttons { margin-top: 2em; display: flex; flex-direction: column; gap: 1em; width: 85%; }
.main_page .buttons .button { width: 100%; margin: 0; }
.main_page .title { text-align: center; }
.main_page .footer { margin-top: 150px; }
.main_page .full-color { display: flex; flex-direction: column; gap: 0; justify-self: center; align-self: start; justify-content: center; align-items: center; }
.main_page .full-color .label { display: flex; justify-content: center; align-items: center; width: 100%; height: 2em; font-family: 'Rubik'; font-weight: 500; font-size: 1rem; flex-direction: column; padding: 0.3em; z-index: 7; }
.main_page .full-color .label:not(label:first-child) { margin-top: -0.15em; }
.main_page .full-color .label p { color: #fff; }
.main_page .full-color .primary-label { background-color: var(--site-primary-color); width: 70%; font-size: 1.6rem; z-index: 777; }
.main_page .full-color .primary-label-shorter { width: 63%; font-size: 1rem; }
.main_page .full-color .secondary-label { background-color: var(--site-secondary-color); margin-left: 1.5em; width: 35%; height: 1.5rem; }
.main_page .full-color .secondary-label-longer { width: 65%; }
.main_page .full-color .tertiary-label { background-color: var(--site-tertiary-color); margin-left: 2.1em; width: 55%; z-index: 778; }
.main_page .full-color .tertiary-label-longer { width: 61%; font-size: 1.3rem; }
.main_page .full-color .preview-image-box { position: relative; max-width: 500px; }
.main_page .full-color .preview-image-box img { width: 100%; }
.main_page .full-color .preview-image-box .circular-label { position: absolute; top: 50%; left: 3%; transform: translateY(-50%); background-color: var(--site-primary-color); font-family: 'Rubik'; font-weight: 500; border-radius: 99em; width: 6em; aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.main_page .full-color .preview-image-box .circular-label { color: #fff; }
.main_page .full-color .preview-image-box .circular-label .huge-number { font-size: 2.9rem; }

.img-comp-container { position: relative; overflow: hidden; }
.img-comp-img, .img-comp-overlay img { width: 100%; height: auto; display: block; }
.img-comp-img-cover { width: 500px; position: absolute; }
.img-comp-overlay { position: absolute; top: 0; left: 0; width: 68%; height: 100%; overflow: hidden; animation: img-comp-anim-image 1.5s ease-in-out; }
.img-comp-slider { position: absolute; z-index: 10; top: 0; left: 68%; width: 5px; height: 100%; background: #fff; cursor: ew-resize; user-select: none; animation: img-comp-anim-slider 1.5s ease-in-out; }
.img-comp-slider-square { position: absolute; width: 1.5em; aspect-ratio: 1/1; background-color: #fffb; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 99em; }

@keyframes img-comp-anim-slider {
  0% { left: 30%; }
  50% { left: 90%; }
  100% { left: 68%; }
}
@keyframes img-comp-anim-image {
  0% { width: 30%; }
  50% { width: 90%; }
  100% { width: 68%; }
}






.upload { background-color: #E1A94A; background-color: unset; display: flex; align-items: center; justify-content: center; width: 85%; height: 200px; border-radius: 15px; margin-top: 50px}
.upload .inner_upload { width: 98%; height: 160px; display: flex; align-items: center; justify-content: center; border: 1px dashed white; border-radius: 15px; 


width: 78%; height: 140px; border: 3px dashed white; box-shadow: 10px 10px #00000047; background-color: #E1A94A;

}
.upload .inner_upload p { font-family: "Montserrat"; font-size: 16px; font-weight: 800; color: white; margin-right: 20px; }
.upload_page .notice { font-family: "Montserrat"; font-size: 14px; font-weight: 500; text-align: center; width: 85%; margin-top: 15px;}
.upload_page .description { margin: 1.5em auto; color: var(--site-secondary-color); }
.upload_page:has(.horizontal-step-indicator) .description { margin: 3.5em auto -0.7em; }
.upload_page .footer { margin-top: 100px; }
.upload_page #post-form .photo-load-button { display: none; cursor: pointer; user-select: none; }




.itog_page .description { margin-top: 20px; }
.itog_page .buttons { margin-top: 120px; }
.itog_page .footer { margin-top: 150px; }
.itog_page #pdf { animation: glow 1s ease-in infinite; animation-direction: alternate; }
@keyframes glow {
  0% {
    box-shadow: 0 0 5px rgba(206, 130, 0, 0.5);
  }
  50% {
    box-shadow: 0 0 30px rgba(206, 130, 0, 1);
  }
  100% {
    box-shadow: 0 0 5px rgba(206, 130, 0, 0.5);
  }
}



.code_page .title { font-size: 52px; }
.code_page .description { font-style: italic; }
.code_page .footer { margin-top: 60px; }
.code_page .form { margin: 80px auto; }




.email_page .title { font-size: 63px; }
.email_page .description { display: flex; flex-direction: column; gap: 0.45em; font-style: italic; text-transform: lowercase; }
.email_page .footer { margin-top: 80px; }
.email_page .form { margin: 130px auto 80px; }
.email_page .marked-span { margin: 0 0.1em; padding: 0 0.1em; }



.error_page .error { width: 95%; height: auto; margin-top: -60px; z-index: -1; position: relative;}
.error_page .buttons { margin-top: 80px; }
.error_page .footer { margin-top: 80px; }




.framing_page { grid-template-columns: 1fr 1fr; margin-bottom: 0; }
.framing_page .title { width: 80%; margin: 0 auto; }
.framing_page .images { background-image: none; grid-template-columns: auto; grid-template-rows: auto auto auto;  width: 100%; max-width: unset; }
.framing_page .images .main_image { height: 500px; aspect-ratio: 1 / 1; justify-self: center; }
		
.framing_page .images .main_image #image { display: block; max-width: 100%; }
.framing_page .images .horizontal_background_mobile { display: none; width: 100%; justify-self: center; }
.framing_page .footer { margin-top: 80px; }
.framing_page .buttons { margin-top: 3em; display: flex; flex-direction: column; gap: 0.8em; align-items: center; }
.framing_page .buttons .button { margin: 0; }

.framing_page .options { display: flex; justify-content: center; justify-items: center; align-items: center; margin: 0; column-gap: 10px; user-select: none; }
.framing_page .options.options-aspect-rotation { column-gap: 0; width: 70%; margin: 0 auto; }
/* .framing_page .options.options-aspect-rotation #vertical { border-radius: 50px 0 0 50px; }
.framing_page .options.options-aspect-rotation #horizontal { border-radius: 0 50px 50px 0; } */
.framing_page .options.options-buttons { margin-top: 2em; }
.framing_page .options .option-button { margin: 5px; width: 70px; height: 70px; border: 1px dashed var(--site-secondary-color); border-radius: 35px; background-color: white; }
.framing_page .options .option-button img { width: 35px; height: 35px; margin: 18px auto 0; display: block; }
.framing_page .options #turn_left { transform: scale(-1, 1); }
.framing_page .options .button p { font-size: 1.1rem; margin: 1.1em; user-select: none; }
.framing_page .options .option-button-filled { background-color: unset; outline: 0.15em solid var(--site-secondary-color); }
.framing_page .options .option-button-filled p { color: var(--site-secondary-color); }
.framing_page .options .option-button-filled-selected { background-color: var(--site-secondary-color); }
.framing_page .options .option-button-filled-selected p { color: white; }

.framing_page .footer-2 { width: 100%; }





.framing_instruction_page .images { background-image: unset; /*url("../images/framing_instruction_background.34f8445392fc.png");*/ grid-template-columns: auto auto; grid-template-rows: auto auto;  width: 100%; row-gap: 1em; column-gap: 1em; background-position: center center;}
.framing_instruction_page .images img { width: 100%; height: 100%; }
.framing_instruction_page .description { margin-top: 20px; }
.framing_instruction_page .buttons { margin-top: 0px; }
.framing_instruction_page .footer { margin-top: 80px; }



.framing_select_size { display: block; }
.framing_select_size .title { margin: 0 auto; width: 50%; text-align: center; }
.framing_select_size .images { background-image: unset; grid-template-columns: auto auto; grid-template-rows: auto auto;  width: 100%; row-gap: 1em; column-gap: 1em; background-position: center center;}
.framing_select_size .images img { width: 100%; height: 100%; }
.framing_select_size .description { margin-top: 20px; }
.framing_select_size .buttons { width: 50%; margin: 0 auto; display: flex; flex-direction: column; gap: 1em; margin-top: 3em; }
.framing_select_size .buttons .button { width: 100%; margin: 0 auto; }
.framing_select_size .buttons .button:last-child { margin-top: 1.5em; }
.framing_select_size .footer { margin-top: 80px; }
.framing_select_size .footer-2 { width: 40%; margin: 4em auto; }



.result_page .images { background-image: none; grid-template-columns: auto; grid-template-rows: auto auto auto;  width: 100%;}
.result_page .images img { width: 100%; height: auto; }
.result_page .footer { margin-top: 80px; }
.result_page .options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 90%; margin-top: 30px;}
.result_page .options a { display: flex; align-items: center; justify-content: center; width: 70px; height: 70px; border: 5px solid #E1A94A; border-radius: 40px; }
.result_page .options a img { width: 35px; height: 35px; }
.result_page .buttons { margin-top: 150px; }




.try_again_page .images { background-image: none; grid-template-columns: auto; grid-template-rows: auto auto auto;  width: 100%;}
.try_again_page .images img { width: 100%; height: auto; }
.try_again_page .left_side { min-width: 445px; }
.try_again_page .description { margin-top: 20px; }
.try_again_page .wrapper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 85%; column-gap: 15px; margin-top: 30px;}
.try_again_page .wrapper a img { width: 100%; height: auto; }
.try_again_page .footer { margin-top: 80px; }
.try_again_page .buttons { margin-top: 40px; }




.choose_page .images { background-image: none; grid-template-columns: auto; grid-template-rows: auto auto auto; width: 70%; justify-self: center;}
.choose_page .images.images-rotated { width: 90%; }
/* .choose_page .images .main_image { border: 50px solid; border-image: url("/static/images/border.049c298568e6.png") 500; border-image-repeat: round; } */
.choose_page .images img { width: 100%; height: auto; }
.choose_page .left_side { min-width: 445px; }
.choose_page .title { width: 95%; }
.choose_page .wrapper { display: grid; grid-template-columns: 1fr repeat(3, minmax(0, auto)) 1fr; column-gap: 15px; margin-top: 30px; align-items: center; justify-items: center; width: 100%; margin: 0em auto; }
.choose_page .wrapper a img { width: 100%; height: auto; }
.choose_page .wrapper .wrapper_button { display: flex; align-items: center; justify-content: center; width: 40px; height: 100px; background-color: #DC7352; }
.choose_page .wrapper .wrapper_button img { width: 21px; height: auto; }
.choose_page .wrapper .active { outline: 3px solid rgba(225, 169, 74, 1); outline-offset: -3px}
.choose_page .wrapper .mobile_image { display: none; }
.choose_page .footer { margin-top: 80px; }
.choose_page .buttons { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 1em; width: 90%; }
.choose_page .buttons .button { margin: 0; width: 100%; }
.choose_page .buttons .button:last-child { grid-column: span 2; width: 50%; justify-self: center; }




.demo_page { grid-template-columns: 1fr 1fr; }
.demo_page .description { margin-top: 30px; }
.demo_page .left_side { min-width: 460px; margin-right: 30px;}
.demo_page .right_side { display: flex; justify-content: center; align-items: center; flex-direction: column; max-width: 674px;  /* `max-width` is important! Otherwise carousel screws the markup (it will have infinite height). */ }
.demo_page .right_side .buttons { display: grid; width: 90%; margin-top: 2em; flex-direction: row; grid-row-gap: 0.7em; grid-column-gap: 0.7em; grid-template-columns: repeat(3, 1fr); }
.demo_page .right_side .buttons .button { margin: 0; }
.demo_page .right_side .buttons .button-not-selected { background-color: unset; outline: 0.15em solid #DC7352; }
.demo_page .right_side .buttons .button-not-selected p { color: #DC7352; }
.demo_page .right_side .carousel-container-container { display: flex; width: 100%; max-width: 674px; margin: 0 auto; gap: 1em; position: relative; }
.demo_page .right_side .carousel-container { width: 474px; margin: 0 auto; gap: 1em; }
.demo_page .images .image2 { height: 104%; margin-top: -3px; }
.demo_page .images .image3 { align-self: end; height: 98%;}
.demo_page .images #sn_1 { height: 50%; border-width: 5px 5px 0 0; border-style: solid; border-image: linear-gradient(to right, #5a8da8, #e3714f) 1; margin-left: 0; }
.demo_page .images #sn_2 { height: 53%; border-width: 0 0 0 5px; border-style: solid; border-image: linear-gradient(to right, #5a8da8, #e3714f) 1;margin-left: 0;  }
.demo_page .images #sn_3 { height: 58%; border-width: 0 5px 0 0; border-style: solid; border-image: linear-gradient(to right, #5a8da8, #e3714f) 1;margin-left: 0;  }
.demo_page .images .style_name { display: flex; align-items: center; justify-content: center;}
.demo_page .images .style_name p { font-size: 40px; font-weight: 700; font-family: "Inter"; background: linear-gradient(to right, #5a8da8, #e3714f); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; }
.demo_page .buttons { margin-top: 100px; max-width: 500px;}
.demo_page .buttons .button { width: 100%; }
.demo_page .footer { margin-top: 80px; }




.assembly_page { column-gap:0; }
.assembly_page .swiper { width: 350px; }
.assembly_page .swiper-slide { user-select: none; cursor: pointer; }

.assembly_page .left_side { min-width: 535px; margin-right: 30px;}
.assembly_page .right_side { grid-column: 2; grid-row: 1; }

.assembly_page .colors { margin: 30px auto 0; display: flex; justify-content: center; justify-items: center; align-items: center; max-width: 370px; flex-wrap: wrap;}
.assembly_page .colors a { user-select: none; cursor: pointer; }
.assembly_page .colors a .color { width: 40px; height: 40px; border-radius: 3px; margin: 0 3px;}
.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 .bricks { border-collapse: separate; border-spacing: 5px; width: 535px; margin: 15px auto 0;}
.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: 0px; width: 40px; height: 40px; user-select: none; cursor: pointer; }
.assembly_page .bricks .brick .brick_word { font-family: "Inter"; color: white; font-size: 24px; position: absolute; width: 40px; margin: 15px 0 0 0; text-align: right; }
.assembly_page .bricks .brick .brick_num { width: 10px; font-family: "Inter"; color: white; font-size: 12px;  margin: 3px 0 0 2px; position: absolute; text-align: right;}

.assembly_page .buttons { margin: 10px auto 0; width: 215px; display: grid; grid-template-columns: repeat(2, auto); justify-content: center; justify-items: center; align-items: center; }
.assembly_page .buttons a .onTheMainButton { width: 167px; height: 35px; margin: 0 auto; }
.assembly_page .buttons a .reloadButton { width: 35px; height: 35px; background-color: rgba(217, 217, 217, 1); border-radius: 5px;}

.assembly_page .pages { display: grid; justify-content: center; justify-items: center; align-items: center; display: flex; gap: 35px; outline: #CD2222; height: 100px;}
.swiper-slide img { width: 100%; height: auto; }
.result-img-active {
	outline: 8px solid #ffff00bb;
	outline-offset: -7px;
}
.assembly_page .pages .swiper .swiper-wrapper .page {  display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; outline-offset: -3px; border-radius: 40px; outline: 3px solid #DC7352; }
.assembly_page .pages .page p{ font-family: "Arial Black"; font-weight: 900; font-size: 25px; color: white; color: #DC7352; }
.assembly_page .pages .swiper .swiper-wrapper .current-page {  box-sizing: border-box; background-color: #DC7352; outline: 3px solid #DC7352; }
.assembly_page .pages .current-page p{ color: white; }

.assembly_page .buttons-page-20 { display: flex; gap: 10px; margin: 0 auto; grid-column: 2; grid-row: 1; border-radius: 5px; align-items: center; justify-content: center; user-select: none; cursor: pointer; }
.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 #DC7352; box-sizing: border-box; }
.assembly_page .buttons-page-20 .page p { font-family: "Arial Black"; font-weight: 900; font-size: 25px; color: #DC7352; }
.assembly_page .pages .swiper-button-prev,
.assembly_page .pages .swiper-button-next { 
  position: relative; top: auto; margin-top: 0; color: #DC7352;
}

.assembly_page .buttons { justify-content: center; width: 85%; display: flex;}
.assembly_page .footer { margin-top: 80px; width: 95%;}

.assembly_page .options { grid-column: 2; grid-row: 1; margin-top: 30px; align-self: start; height: 70px;}
.assembly_page .options p { font-size: 36px; font-weight: 800; font-family: "Alegreya Sans SC"; color: #DC7352; float: left; margin-top: 15px;}
.assembly_page .options .reload { display: flex; width: 60px; height: 60px; border: 5px solid #DC7352; border-radius: 40px; align-items: center; justify-content: center; float: right; margin-right: 30px;}
.assembly_page .options .question { display: flex; width: 60px; height: 60px; border: 5px solid #DC7352; border-radius: 40px; align-items: center; justify-content: center; float: right; cursor: pointer; }

.assembly_page .images { align-self: end; background-image: unset; width: 100%; height: auto; display: flex; align-items: center; justify-content: center; justify-self: center; margin-top: 3em; }
.assembly_page .images img { width: 100%; height: auto; margin: 0 5em; }

.assembly_page #mobile_button { display: none;}
.assembly_page .rotate90deg { transform: rotate(90deg); }


.all_gen_page .description { margin-bottom: 2em; }
.all_gen_page .left_side { min-width: 460px; margin-right: 30px;}
.all_gen_page .images { background-image: url(""); grid-template-columns: repeat(2, minmax(0, 1fr)); background-position: center center; position: relative;}
.all_gen_page .images img {z-index: 2; }
.all_gen_page .images .image2 { height: 100%; }
.all_gen_page .images .image3 { align-self: end; height: 100%;}
.all_gen_page .images .image-test { width: 100%; height: auto; }
.all_gen_page .images #sn_1 { width: 98.5%; height: 75%; border-width: 5px 5px 0 0; border-style: solid; border-image: linear-gradient(to right, #5a8da8, #e3714f) 1; }
.all_gen_page .images #sn_1 .code-bg-img { padding-left: 193px; padding-bottom: 5px; }
.all_gen_page .images #sn_2 { width: 100%; height: 66%; border-width: 0 0 0 5px; border-style: solid; border-image: linear-gradient(to right, #5a8da8, #e3714f) 1;margin-left: 0; }
.all_gen_page .images #sn_2 .code-bg-img { padding-right: 26px; }
.all_gen_page .images #sn_3 { width: 98.5%; height: 68%; border-width: 0 5px 0 0; border-style: solid; border-image: linear-gradient(to right, #5a8da8, #e3714f) 1;margin-left: 0;  }
.all_gen_page .images #sn_3 .code-bg-img { padding-right: 190px; }
.all_gen_page .images .style_name { width: 230px; height: 100% !important; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.all_gen_page .images .style_name .text-container { flex: 2; display: flex; justify-content: center; align-items: center; }
.all_gen_page .images .style_name .text-container p { font-size: 38px; font-weight: 700; font-family: "Inter"; z-index: 777; background: linear-gradient(to right, #5a8da8, #e3714f); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; }
.all_gen_page .generation .generation-header { display: flex; justify-content: space-between; align-items: center; margin-top: 1em; }
.all_gen_page .generation .generation-header .generation_title { font-family: "Inter"; font-weight: 700; color: #5B8EA9; font-size: 1.8rem; }
.all_gen_page .generation .generation-header .generation-date { font-family: "Inter"; font-size: 1.25rem; font-weight: 500; color: #5B8EA9; }
.all_gen_page .generation .buttons { margin-top: 10px; display: grid; column-gap: 20px; grid-template-columns: repeat(3, 1fr); }
.all_gen_page .generation .buttons .button { width: 100%; margin: 10px auto; }
.all_gen_page .generation .buttons .button:nth-child(2) { background-color: var(--site-tertiary-color); }
/* a.button:nth-child(3) { grid-column: 2 / span 2; background-color: unset; outline: 2px solid; outline-color: currentcolor; outline-color: #5B8EA9; border-radius: 50px; } */
.all_gen_page #free .buttons .button { background-color: #5B8EA9; grid-column: 2 / span 2; }
.all_gen_page .footer { margin-top: 80px; }
.all_gen_page .generation .buttons { grid-template-columns: repeat(4, 1fr); }
.all_gen_page .generation .buttons .button { grid-column: span 2; }
.all_gen_page .generation .buttons .extra-button { grid-column: 2 / span 2; }













.code-bg-img{
  flex: 1;
  /* position: absolute; */
  overflow:hidden;
  z-index: 1 !important;
  /* margin-top: 381px; */
  margin-top: 0 !important;
}

.purchase_page .buttons { margin-top: 70px; }


.create_new_page .buttons { margin-top: 70px; }




@media screen and (width < 1037px) {
  .assembly_page .pages { grid-template-columns: repeat(7, 1fr); }
  .assembly_page .pages #page6 { display: none; }
  .assembly_page .pages #next { grid-column: 7; grid-row: 1; }
}


.error-message { color: #ca0000; font-size: 32px; display: flex; justify-content: center; font-family: 'Alegreya Sans SC'; width: 561px; font-weight: 600; }


.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; margin-left: 60px; }
.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; /* Stay in place */
  top: 0;
  left: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: rgba(0, 0, 0, 0.7); /* Black background with transparency */
  z-index: 1000; /* Sit on top */
  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: white; 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: #DC7352; 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; }

.error_page_503 .description { width: 95%; margin-top: 40px; grid-column-end: 3; }



.footer-2 { width: 85%; margin-top: 40px; display: flex; flex-direction: column; gap: 10px; font-family: "Alegreya Sans SC"; text-align: center; color: #5B8EA9; }
.error_page .footer-2 { width: 500px; justify-self: center; text-align: left; margin-top: 60px; }
.error_page_503 .footer-2 { justify-self: left; margin-top: 40px; }
.all_gen_page .left_side .footer-2 { width: 100%; }
.footer-2 .footer-2--title { font-size: 24px; font-weight: 800; text-align: center; width: 100%; }
.error_page .footer-2 .footer-2--title {text-align: left; }
.footer-2 .container { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.footer-2 a { color: #5B8EA9; }
.footer-2 .container .link { display: flex; justify-content: center; align-items: center; gap: 5px; }
.error_page .container .link { justify-content: left; }
.footer-2 .container .link .text { font-weight: 400; font-size: 22px; }
.footer-2 .container .link img { width: 6%; height: auto; }

.demo_page .footer-2 { width: 80%; }


.support_panel_page {
  width: 60%;
  margin: 40px auto;
}
.support_panel_page input.query-input { width: 100%; }
.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; }

.index_page_container { outline: 2px solid; outline-color: #5B8EA9; width: 70%; margin-bottom: 10px; align-self: center; }
.index_page_container .link { display: contents; }
.index_page_container .link .link--text { padding: 15px 0; color: #5B8EA9; }




.horizontal-step-indicator { display: flex; align-items: center; margin: 2em auto 3.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-secondary-color); border: 3px solid var(--site-secondary-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: "Alegreya Sans SC"; }
.horizontal-step-indicator .step .step-p-description { position: absolute; margin-top: 6.3em; color: var(--site-secondary-color); font-size: 1.2rem; 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-secondary-color); }
.horizontal-step-indicator .step-active p { color: var(--site-secondary-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-secondary-alpha-color); }
.horizontal-step-indicator .step-inactive p { color: var(--site-secondary-alpha-color); }
.horizontal-step-indicator .step-inactive .step-p-description { color: var(--site-secondary-alpha-color); }

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

.upload_page .horizontal-step-indicator { margin-bottom: 5em; }
.framing_page .horizontal-step-indicator { margin-bottom: 6.5em; }


.pdf-loading-animation { aspect-ratio: 1 / 1; height: 50%; margin-right: 1em; }
.pdf-loading-animation img { width: 100%; }