@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
.vyroba-page {
font-family: "Roboto", sans-serif !important;
background-color: white;
width: 100%;
margin: 0;
max-width: 100%;
padding-top: 4rem;
padding-bottom: 4rem;
border-top: 1px solid #66ccff;
border-bottom: 1px solid #66ccff;
overflow: hidden;
}
.vyroba-timeline {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
max-width: 71.25rem;
margin: 0 auto;
margin-bottom: 2.5rem;
overflow-x: scroll;
touch-action: none;
}
.vyroba-timeline::-webkit-scrollbar {
width: 0px;
background: transparent;
}
.vyroba-timeline-item {
text-align: center;
position: relative;
flex: 1;
min-width: 125px;
}
.vyroba-timeline-item.visited .vyroba-timeline-title:hover, .vyroba-timeline-item.visited .vyroba-timeline-circle:hover{
cursor: pointer;
}
.vyroba-timeline-item:not(
.vyroba-timeline-item[data-index="6"]
)::before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 8px;
background-color: #d2d7d7;
}
.vyroba-timeline-title {
margin-bottom: 10px;
font-size: 14px;
color: #d2d7d7;
font-weight: 500;
}
.vyroba-timeline-item.visited .vyroba-timeline-title,
.vyroba-timeline-item.active .vyroba-timeline-title {
color: #000;
}
.vyroba-timeline-circle {
width: 20px;
height: 20px;
background-color: #d2d7d7; border-radius: 50%;
margin: 0 auto;
position: relative;
z-index: 2;
}
.vyroba-timeline-item.active .vyroba-timeline-circle {
background-color: #0066cc; }
.vyroba-timeline-item.visited .vyroba-timeline-circle {
background-color: #66ccff; }
.vyroba-timeline-item.visited::after {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 8px;
background-color: #66ccff;
}
.vyroba-section {
display: none;
}
.vyroba-navigation {
margin-top: 20px;
display: flex;
justify-content: space-between;
}
.vyroba-navigation .navi {
font-size: 1.25rem;
font-weight: 300;
display: inline-flex;
align-items: center;
gap: 1.25rem;
}
.vyroba-navigation .arrow-btn {
padding: 0.625rem 1.25rem;
background-color: #00aee8;
border-radius: 1.25rem;
display: inline-flex;
justify-content: center;
align-items: center;
color: white;
}
.vyroba-navigation .arrow-btn:hover {
cursor: pointer;
background-color: #0066cc;
}
.vyroba-navigation .navi.disabled .arrow-btn {
background-color: #aaafaf;
}
.vyroba-navigation .navi.disabled .arrow-btn:hover {
cursor: default;
}
.vyroba-navigation .arrow-btn.reverse svg {
transform: rotate(180deg);
}
#sib-form {
max-width: 100%;
width: 100%;
max-width: 71.25rem;
margin: 0 auto;
}
.vyroba-section {
display: flex;
flex-flow: column;
gap: 2.6875rem;
padding: 3.75rem 5.125rem;
border: 1px solid #d2d7d7;
border-radius: 1.25rem;
position: relative;
}
.vyroba-section.last {
display: grid;
gap: 1.875rem;
grid-template-columns: auto 25rem;
padding: 0;
border: 0;
}
.vyroba-section.last > div {
padding: 2.5rem;
border: 1px solid #d2d7d7;
border-radius: 1.25rem;
}
.vyroba-section.last h4 {
font-size: 2rem;
font-weight: bold;
text-align: center;
margin: 0;
font-family: "Roboto", sans-serif !important;
}
.vyroba-section.last .contact-info h4 {
margin-bottom: 5rem;
}
.vyroba-section.last .contact-info .contact-info-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
margin-bottom: 1.25rem;
}
.vyroba-section.last .contact-info .contact-info-row-full {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 1.25rem;
margin-bottom: 1.25rem;
}
.vyroba-section.last .contact-info .contact-info-row-terms {
margin-bottom: 1.25rem;
}
.vyroba-section.last .contact-info .contact-info-row-terms > div {
display: flex;
align-items: flex-start;
gap: 0.625rem;
}
.vyroba-section.last .contact-info .contact-info-row-terms > div input {
margin: 0;
margin-top: 0.25rem;
}
.vyroba-section.last
.contact-info
.contact-info-row-terms
> div
input:focus {
outline: 0;
}
.vyroba-section.last .contact-info .contact-info-row-terms > div label {
font-size: 0.75rem;
font-weight: 300;
cursor: pointer;
}
.vyroba-section.last .contact-info .contact-info-row-last {
display: flex;
justify-content: center;
align-items: center;
}
.vyroba-section.last .contact-info .contact-info-row-last button {
font-size: 1rem;
font-weight: bold;
color: white;
background-color: #00aee8;
text-transform: uppercase;
border-radius: 1.25rem;
padding: 0.625rem 2.1875rem;
transition: all 0.15s;
border: 0;
}
.vyroba-section.last .contact-info .contact-info-row-last button:hover {
background-color: #0066cc;
cursor: pointer;
outline: 0;
}
.vyroba-section.last .contact-info .contact-info-row-last button:focus {
outline: 0;
}
.vyroba-section.last .contact-info .contact-info-row > div,
.vyroba-section.last .contact-info .contact-info-row-full > div {
display: flex;
flex-flow: column;
gap: 0.25rem;
}
.vyroba-section.last .contact-info .contact-info-row > div label,
.vyroba-section.last .contact-info .contact-info-row-full > div label {
font-size: 0.75rem;
font-weight: 300;
margin-left: 1.5rem;
}
.vyroba-section.last .contact-info .contact-info-row > div input {
font-size: 0.875rem;
padding: 0.9375rem;
border: 1px solid #d2d7d7;
border-radius: 1.5rem;
}
.vyroba-section.last .contact-info .contact-info-row > div input:hover {
border: 1px solid #00aee8;
}
.vyroba-section.last .contact-info .contact-info-row > div input:focus {
outline: 0;
border: 1px solid #0066cc;
}
.vyroba-section.last .contact-info .contact-info-row-full > div textarea {
font-size: 0.875rem;
padding: 0.9375rem;
border: 1px solid #d2d7d7;
border-radius: 1.5rem;
resize: vertical;
}
.vyroba-section.last
.contact-info
.contact-info-row
> div
label
span.form-required {
color: #ff1d25;
}
.vyroba-section h3.vyroba-section-title {
font-size: 2.25rem;
font-weight: bold;
margin: 0;
text-align: center;
font-family: "Roboto", sans-serif !important;
}
.vyroba-section-items {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12.5rem, 15rem));
gap: 20px;
justify-content: center;
align-items: flex-end;
}
.vyroba-section-items.big {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(8.75rem, 10rem));
gap: 1.125rem;
justify-content: center;
align-items: flex-end;
}
.vyroba-item {
display: flex;
justify-content: center;
}
.vyroba-item label {
width: 100%;
}
.vyroba-item label:hover {
cursor: pointer;
}
.vyroba-item label span {
font-size: 1.125rem;
font-weight: 300;
text-align: center;
display: block;
margin-bottom: 1.25rem;
line-height: normal;
}
.vyroba-item label .thumb {
border-radius: 0.9375rem;
background-color: #f3f3f3;
aspect-ratio: 1/1;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
}
.vyroba-item label .thumb .description {
background-color: #66ccff;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
border-radius: 0.9375rem;
overflow: auto;
transition: 0.2s ease-in-out;
scrollbar-width: thin;
scrollbar-color: #0066cc #66ccff;
}
.vyroba-item label .thumb .description p {
font-size: 0.75rem;
font-weight: 300;
padding: 1.25rem;
line-height: 1.55;
margin: 0;
}
.vyroba-item label .thumb.hover-description:hover .description {
height: 100%;
}
.vyroba-item label .thumb img {
width: auto;
max-width: 100%;
}
.vyroba-item label input {
margin: 0 auto;
margin-top: 1.25rem;
display: block;
}
.vyroba-item label input:focus {
outline: 0 !important;
} #vyroba-summary-content {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2.5rem;
align-items: start;
margin-top: 3.75rem;
}
.summary-item-thumb {
width: 100%;
height: auto;
aspect-ratio: 1/1;
background-color: #f3f3f3;
border-radius: 0.9375rem;
display: flex;
justify-content: center;
align-items: center;
max-height: 6rem;
}
.summary-item-thumb img {
max-width: 100%;
display: block;
width: auto;
height: 100%;
object-fit: contain;
}
.summary-item-section {
font-size: 0.875rem;
font-weight: 500;
font-family: "Roboto", sans-serif !important;
display: block;
margin-top: 0.5625rem;
text-align: center;
}
.summary-item-value {
font-size: 1rem;
font-weight: 300;
color: #0066cc;
text-align: center;
display: block;
margin-top: 0.125rem;
word-break: break-word;
}
.vyroba-thank-box {
max-width: 71.25rem;
margin: 0 auto;
display: grid;
grid-template-columns: 12.5rem auto;
align-items: start;
gap: 3.75rem;
}
.vyroba-thank-box p {
font-size: 3.75rem;
font-weight: bold;
line-height: 1.25;
margin: 0;
margin-bottom: 1.0625rem;
}
.vyroba-thank-box span {
font-size: 1.25rem;
font-weight: 300;
line-height: 1.25;
margin: 0;
}
.vyroba-footer {
max-width: 71.25rem;
margin: 0 auto;
padding: 0 1rem;
margin-top: 3.9375rem;
margin-bottom: 4.375rem;
font-size: 1.25rem;
font-weight: 300;
line-height: 1.25;
text-align: center;
}
.section-maskot {
position: absolute;
right: -7.8125rem;
bottom: 1.875rem;
}
.summary-maskot {
position: absolute;
top: -1.875rem;
right: -10rem;
}  @media only screen and (min-width: 1801px) {
} @media only screen and (min-width: 1560px) and (max-width: 1800px) {
} @media only screen and (min-width: 1403px) and (max-width: 1559px) {
} @media only screen and (min-width: 1323px) and (max-width: 1402px) {
html {
zoom: 0.8;
}
} @media only screen and (min-width: 1135px) and (max-width: 1322px) {
html {
zoom: 0.9;
}
} @media only screen and (min-width: 915px) and (max-width: 1134px) {
html {
zoom: 0.8;
}
.section-maskot {
right: -4.8rem;
}
.summary-maskot {
display: none;
}
} @media only screen and (min-width: 804px) and (max-width: 914px) {
.vyroba-page {
padding-top: 0rem;
padding-bottom: 0;
overflow: initial;
}
.vyroba-timeline{
position: sticky;
top: 72px;
background: white;
z-index: 5;
padding-top: 1rem;
border-bottom: 1px solid #66ccff;
padding-bottom: 1rem;
margin-bottom: 0;
}
.vyroba-timeline-line {
right: 0;
}
.section-maskot {
right: -4.8rem;
}
.summary-maskot {
display: none;
}
.vyroba-section.last {
display: flex;
flex-direction: column-reverse;
}
.vyroba-section,
.vyroba-section.last {
border: none;
border-top: 0;
border-bottom: 0;
border-radius: 0;
}
.vyroba-section.last > div {
border: none;
}
.vyroba-navigation {
border-top: 1px solid #00aee8;
margin: 0 auto;
position: sticky;
bottom: 0;
background: white;
padding: 1.3rem;
}
} @media only screen and (min-width: 685px) and (max-width: 803px) {
.vyroba-page {
padding-top: 0rem;
padding-bottom: 0;
overflow: initial;
}
.vyroba-timeline{
position: sticky;
top: 72px;
background: white;
z-index: 5;
padding-top: 1rem;
border-bottom: 0;
padding-bottom: 1rem;
margin-bottom: 0;
border-bottom: 1px solid #66ccff;
}
.vyroba-timeline-line {
right: 0;
left: 9%;
}
.vyroba-timeline-line-fill {
left: 9%;
}
.section-maskot {
right: -4.8rem;
}
.summary-maskot {
display: none;
}
.vyroba-section.last {
display: flex;
flex-direction: column-reverse;
}
.vyroba-section,
.vyroba-section.last {
border: none;
border-top: 0;
border-bottom: 0;
border-radius: 0;
}
.vyroba-section.last > div {
border: none;
}
.vyroba-navigation {
border-top: 1px solid #00aee8;
margin: 0 auto;
position: sticky;
bottom: 0;
background: white;
padding: 1.3rem;
}
#vyroba-summary-content {
gap: 1.5rem;
}
} @media only screen and (min-width: 541px) and (max-width: 684px) {
.vyroba-page {
padding-top: 0rem;
padding-bottom: 0;
overflow: initial;
}
.vyroba-timeline{
position: sticky;
top: 72px;
background: white;
z-index: 5;
padding-top: 1rem;
border-bottom: 0;
padding-bottom: 1rem;
margin-bottom: 0;
border-bottom: 1px solid #66ccff;
}
.vyroba-timeline-line {
right: 0;
left: 10%;
}
.vyroba-timeline-line-fill {
left: 10%;
}
.section-maskot,
.summary-maskot {
display: none;
}
.vyroba-section.last {
display: flex;
flex-direction: column-reverse;
}
.vyroba-section,
.vyroba-section.last {
border: none;
border-top: 0;
border-bottom: 0;
border-radius: 0;
padding: 3.5rem 1.5rem;
}
.vyroba-section.last > div {
border: none;
padding: 0;
}
.vyroba-navigation {
border-top: 1px solid #00aee8;
margin: 0 auto;
position: sticky;
bottom: 0;
background: white;
padding: 1.3rem;
}
.vyroba-section.last .contact-info h4 {
margin-top: 5rem;
margin-bottom: 3rem;
}
.vyroba-section.last h4 {
font-size: 1.5rem;
}
.vyroba-section h3.vyroba-section-title {
font-size: 1.5rem;
}
.vyroba-item label span {
font-size: 0.875rem;
margin-bottom: 1rem;
}
.vyroba-section-items {
grid-template-columns: repeat(auto-fit, minmax(3.5rem, 14rem));
row-gap: 1.5rem;
}
#vyroba-summary-content {
gap: 1.5rem;
}
} @media only screen and (min-width: 440px) and (max-width: 540px) {
.vyroba-page {
padding-top: 0rem;
padding-bottom: 0;
overflow: initial;
}
.vyroba-timeline{
position: sticky;
top: 72px;
background: white;
z-index: 5;
padding-top: 1rem;
border-bottom: 0;
padding-bottom: 1rem;
margin-bottom: 0;
border-bottom: 1px solid #66ccff;
}
.vyroba-timeline-line {
right: 0;
left: 13%;
}
.vyroba-timeline-line-fill {
left: 13%;
}
.section-maskot,
.summary-maskot {
display: none;
}
.vyroba-section.last {
display: flex;
flex-direction: column-reverse;
}
.vyroba-section,
.vyroba-section.last {
border: none;
border-top: 0;
border-bottom: 0;
border-radius: 0;
padding: 3.5rem 1.5rem;
}
.vyroba-section.last > div {
border: none;
padding: 0;
}
.vyroba-navigation {
border-top: 1px solid #00aee8;
margin: 0 auto;
position: sticky;
bottom: 0;
background: white;
padding: 1.3rem;
}
.vyroba-section.last .contact-info .contact-info-row {
grid-template-columns: 1fr;
}
.vyroba-section.last .contact-info h4 {
margin-top: 5rem;
margin-bottom: 3rem;
}
.vyroba-section h3.vyroba-section-title {
font-size: 1.5rem;
}
.vyroba-item label span {
font-size: 0.875rem;
margin-bottom: 1rem;
}
.vyroba-section.last h4 {
font-size: 1.5rem;
}
.vyroba-navigation .navi {
font-size: 0.875rem;
gap: 0.75rem;
}
.vyroba-section-items {
grid-template-columns: repeat(auto-fit, minmax(3.5rem, 11rem));
row-gap: 1.5rem;
}
#vyroba-summary-content {
gap: 1.5rem;
}
.vyroba-footer {
font-size: 0.875rem;
}
} @media only screen and (min-width: 380px) and (max-width: 439px) {
.vyroba-page {
padding-top: 0rem;
padding-bottom: 0;
overflow: initial;
}
.vyroba-timeline{
position: sticky;
top: 72px;
background: white;
z-index: 5;
padding-top: 1rem;
border-bottom: 0;
padding-bottom: 1rem;
margin-bottom: 0;
border-bottom: 1px solid #66ccff;
}
.vyroba-timeline-line {
right: 0;
left: 15%;
}
.vyroba-timeline-line-fill {
left: 15%;
}
.section-maskot,
.summary-maskot {
display: none;
}
.vyroba-section.last {
display: flex;
flex-direction: column-reverse;
}
.vyroba-section,
.vyroba-section.last {
border: none;
border-top: 0;
border-bottom: 0;
border-radius: 0;
padding: 3.5rem 1.5rem;
}
.vyroba-section.last > div {
border: none;
padding: 0;
}
.vyroba-navigation {
border-top: 1px solid #00aee8;
margin: 0 auto;
position: sticky;
bottom: 0;
background: white;
padding: 1.3rem;
}
.vyroba-section.last .contact-info .contact-info-row {
grid-template-columns: 1fr;
}
.vyroba-section.last .contact-info h4 {
margin-top: 5rem;
margin-bottom: 3rem;
}
.vyroba-section h3.vyroba-section-title {
font-size: 1.5rem;
}
.vyroba-item label span {
font-size: 0.875rem;
margin-bottom: 1rem;
}
.vyroba-section.last h4 {
font-size: 1.5rem;
}
.vyroba-navigation .navi {
font-size: 0.875rem;
gap: 0.75rem;
}
.vyroba-section-items,
.vyroba-section-items.big {
grid-template-columns: repeat(auto-fit, minmax(3.5rem, 9rem));
row-gap: 1.5rem;
}
#vyroba-summary-content {
gap: 1.5rem;
}
.vyroba-footer {
font-size: 0.875rem;
}
} @media only screen and (max-width: 379px) {
.vyroba-page {
padding-top: 0rem;
padding-bottom: 0;
overflow: initial;
}
.vyroba-timeline{
position: sticky;
top: 72px;
background: white;
z-index: 5;
padding-top: 1rem;
border-bottom: 1px solid #66ccff;
padding-bottom: 1rem;
margin-bottom: 0;
}
.vyroba-timeline-line {
right: 0;
left: 18%;
}
.vyroba-timeline-line-fill {
left: 18%;
}
.section-maskot,
.summary-maskot {
display: none;
}
.vyroba-section.last {
display: flex;
flex-direction: column-reverse;
}
.vyroba-section,
.vyroba-section.last {
border: none;
border-top: 0;
border-bottom: 0;
border-radius: 0;
padding: 3.5rem 1.5rem;
}
.vyroba-section.last > div {
border: none;
padding: 0;
}
.vyroba-navigation {
border-top: 1px solid #00aee8;
margin: 0 auto;
position: sticky;
bottom: 0;
background: white;
padding: 1.3rem;
}
.vyroba-section.last h4 {
font-size: 1.5rem;
}
.vyroba-section.last .contact-info .contact-info-row {
grid-template-columns: 1fr;
}
.vyroba-section.last .contact-info h4 {
margin-top: 5rem;
margin-bottom: 3rem;
}
.vyroba-section h3.vyroba-section-title {
font-size: 1.5rem;
}
.vyroba-item label span {
font-size: 0.875rem;
margin-bottom: 1rem;
}
.vyroba-navigation .navi {
font-size: 0.875rem;
gap: 0.75rem;
}
#vyroba-summary-content {
gap: 1.5rem;
}
.vyroba-footer {
font-size: 0.875rem;
}
}