*/
[data-popOver] {
cursor: help;
}
.popOverContentBox {
position: absolute;
padding: var(--unit_x10);
display: flex;
flex-direction: column;
align-items: flex-start;
max-width: 600px;
color: var(--col_white);
font-size: var(--unit_x12);
text-align: left;
background-color: var(--col_black);
border: 1px var(--col_pl50_50a) solid;
border-radius: var(--unit_x5);
z-index: 10000;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
}
/* PopOver Drowpdown */
/*
icons['Share'];?>Teilen
icons['Copy'];?>
Link kopieren
icons['Message'];?>
Whatsapp
*/
.popOverDrowpdown {
cursor: pointer;
}
.popOverDrowpdown .label {
cursor: help;
display: flex;
align-items: center
}
.popOverDrowpdown .bodyBx {
display: none;
}
.popOverDrowpdownContentBox {
position: absolute;
padding: 0px;
display: flex;
flex-direction: column;
align-items: flex-start;
max-width: 600px;
color: var(--col_white);
font-size: var(--unit_x12);
text-align: left;
background-color: var(--col_black);
border: 1px var(--col_pl50_50a) solid;
border-radius: var(--unit_x5);
z-index: 10000;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
}
.popOverDrowpdownContentBox .elm {
width: 100%;
padding: var(--unit_x12) var(--unit_x14);
cursor: pointer;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.popOverDrowpdownContentBox .elm:first-child {
border-top-left-radius: var(--unit_x5);
border-top-right-radius: var(--unit_x5);
}
.popOverDrowpdownContentBox .elm:last-child {
border-bottom-left-radius: var(--unit_x5);
border-bottom-right-radius: var(--unit_x5);
}
.popOverDrowpdownContentBox .elm:hover {
background-color: var(--col_pr60);
}
.popOverDrowpdownContentBox .elm > * {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.popOverDrowpdownContentBox .elm .icon {
display: flex;
}
/* Info Icon */
.infoIcon {
color: var(--col_warmGray);
fill: var(--col_warmGray);
width: var(--unit_x14);
height: var(--unit_x14);
position: absolute;
align-items: center;
}
.infoIcon svg {
width: var(--unit_x16);
height: var(--unit_x16);
fill: var(--col_warmGray);
}
/* Info Icon */
.attentionIcon {
color: var(--col_warmGray);
fill: var(--col_warmGray);
width: var(--unit_x16);
height: var(--unit_x16);
}
.attentionIcon svg {
width: var(--unit_x16);
height: var(--unit_x16);
fill: var(--col_warmGray);
}
/* Buttons */
.button {
font-family: 'Roboto';
background-color: var(--col_white);
color: var(--col_pd100);
border-radius: var(--unit_x5);
height: var(--unit_x44);
font-size: var(--unit_x12);
/*min-width: var(--unit_x250);*/
text-transform: uppercase;
letter-spacing: calc(var(--unit_x1)*1.5);
border: none;
width: auto;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
font-weight: 500;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
cursor: pointer;
}
.button > * { cursor: pointer; }
.button:not(.noline)::before {
content: '';
background-color: var(--col_pd100);
height: var(--unit_x1);
width: 0px;
margin-right: var(--unit_x5);
z-index: 1;
-webkit-transition: width 0.25s ease-in-out;
-moz-transition: width 0.25s ease-in-out;
-ms-transition: width 0.25s ease-in-out;
-o-transition: width 0.25s ease-in-out;
transition: width 0.25s ease-in-out;
}
.button .label {
font-size: var(--unit_x12);
letter-spacing: calc(var(--unit_x12)*0.15);
height: 100%;
z-index: 2;
white-space: nowrap;
display: flex;
align-items: center;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.button:not(.disabled):hover {
color: var(--col_pd100);
background-color: var(--col_pr60);
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.button:not(.disabled):active {
opacity: 0.75;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.button:not(.disabled):not(.noline):hover::before {
width: var(--unit_x16);
margin-right: var(--unit_x5);
background-color: var(--col_pd100);
-webkit-transition: width 0.25s ease-in-out;
-moz-transition: width 0.25s ease-in-out;
-ms-transition: width 0.25s ease-in-out;
-o-transition: width 0.25s ease-in-out;
transition: width 0.25s ease-in-out;
}
.button.disabled, .button.disabled > * {
opacity: 0.5;
cursor: not-allowed;
}
.button.loading::before {
background-color: transparent !important;
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M13 5.08c3.06.44 5.48 2.86 5.92 5.92h3.03c-.47-4.72-4.23-8.48-8.95-8.95v3.03zM18.92 13c-.44 3.06-2.86 5.48-5.92 5.92v3.03c4.72-.47 8.48-4.23 8.95-8.95h-3.03zM11 18.92c-3.39-.49-6-3.4-6-6.92s2.61-6.43 6-6.92V2.05c-5.05.5-9 4.76-9 9.95 0 5.19 3.95 9.45 9 9.95v-3.03z'/%3E%3C/svg%3E");
display: block;
width: 25px;
height: 25px;
transform-origin: 50%;
animation: buttonLoadingRotationFrames ease-in-out 1.5s;
animation-iteration-count: infinite;
transform-origin: 50% 50%;
-webkit-animation: buttonLoadingRotationFrames ease-in-out 1.5s;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: 50% 50%;
-moz-animation: buttonLoadingRotationFrames ease-in-out 1.5s;
-moz-animation-iteration-count: infinite;
-moz-transform-origin: 50% 50%;
-o-animation: buttonLoadingRotationFrames ease-in-out 1.5s;
-o-animation-iteration-count: infinite;
-o-transform-origin: 50% 50%;
-ms-animation: buttonLoadingRotationFrames ease-in-out 1.5s;
-ms-animation-iteration-count: infinite;
-ms-transform-origin: 50% 50%;
}
@keyframes buttonLoadingRotationFrames {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
.buttonGhost {
font-family: 'Roboto';
background-color: transparent;
color: var(--col_pl10);
border-radius: var(--unit_x5);
height: var(--unit_x48);
font-size: var(--unit_x12);
min-width: var(--unit_x250);
text-transform: uppercase;
border: 1px var(--col_pl10) solid;
letter-spacing: calc(var(--unit_x1)*1.5);
width: auto;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
font-weight: 500;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
cursor: pointer;
}
.buttonGhost > * { cursor: pointer; }
.buttonGhost::before {
content: '';
background-color: var(--col_pl10);
height: var(--unit_x1);
width: 0px;
margin-right: var(--unit_x5);
z-index: 1;
-webkit-transition: width 0.25s ease-in-out;
-moz-transition: width 0.25s ease-in-out;
-ms-transition: width 0.25s ease-in-out;
-o-transition: width 0.25s ease-in-out;
transition: width 0.25s ease-in-out;
}
.buttonGhost:not(.disabled):hover::before {
width: var(--unit_x16);
margin-right: var(--unit_x5);
background-color: var(--col_pr60);
-webkit-transition: width 0.25s ease-in-out;
-moz-transition: width 0.25s ease-in-out;
-ms-transition: width 0.25s ease-in-out;
-o-transition: width 0.25s ease-in-out;
transition: width 0.25s ease-in-out;
}
.buttonGhost .label {
font-size: var(--unit_x12);
height: 100%;
z-index: 2;
white-space: nowrap;
display: flex;
align-items: center;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-ms-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
transition: all 0.1s linear;
}
.buttonGhost:not(.disabled):hover {
color: var(--col_pr60);
border-color: var(--col_pr60);
-webkit-transition: all 0.05s linear;
-moz-transition: all 0.05s linear;
-ms-transition: all 0.05s linear;
-o-transition: all 0.05s linear;
transition: all 0.05s linear;
}
.buttonGhost:not(.disabled):hover label {
color: var(--col_pr60);
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-ms-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
transition: all 0.1s linear;
}
.buttonGhost:not(.disabled):active {
opacity: 0.75;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.buttonGhost.disabled, .buttonGhost.disabled > * {
opacity: 0.5;
cursor: not-allowed;
}
.buttonGhost.loading::before {
background-color: transparent !important;
color: red;
fill: red;
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='var(--col_pr60)'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M13 5.08c3.06.44 5.48 2.86 5.92 5.92h3.03c-.47-4.72-4.23-8.48-8.95-8.95v3.03zM18.92 13c-.44 3.06-2.86 5.48-5.92 5.92v3.03c4.72-.47 8.48-4.23 8.95-8.95h-3.03zM11 18.92c-3.39-.49-6-3.4-6-6.92s2.61-6.43 6-6.92V2.05c-5.05.5-9 4.76-9 9.95 0 5.19 3.95 9.45 9 9.95v-3.03z'/%3E%3C/svg%3E");
display: block;
width: 25px;
height: 25px;
/*animation: buttonLoadingRotation 2s infinite linear;
transform-origin: 50%;*/
}
.buttonClean {
background-color: transparent;
color: var(--col_white);
height: var(--unit_x54);
min-width: var(--unit_x224);
text-transform: uppercase;
letter-spacing: calc(var(--unit_x1)*1.5);
border: none;
position: relative;
font-weight: 600;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.buttonClean .label {
font-size: var(--unit_x14);
letter-spacing: calc(var(--unit_x14)*0.2);
height: 100%;
z-index: 2;
white-space: nowrap;
display: flex;
align-items: center;
}
.buttonClean > * { cursor: pointer; }
/* Textlink */
.link {
cursor: pointer;
text-decoration: underline;
font-size: var(--unit_x14);
}
.redLnk {
cursor: pointer;
text-decoration: underline;
font-size: var(--unit_x14);
color: var(--col_pr60) !important;
}
.buttonSquare_outer {
border: 1px transparent solid;
padding: var(--unit_x5);
--angle: 98deg;
border-image: conic-gradient( from var(--angle), var(--col_white) 0deg 6deg, transparent 1deg 159deg, var(--col_white) 164deg 163deg, transparent 159deg 187deg, var(--col_white) 180deg 188deg, transparent 180deg 337deg, var(--col_white) 343deg 312deg, transparent 60deg 283deg) 1;
}
.buttonSquare_outer:hover {
-webkit-animation: 1s buttonSquare_outerAniFrames linear 1;
-moz-animation: 1s buttonSquare_outerAniFrames linear 1;
-o-animation: 1s buttonSquare_outerAniFrames linear 1;
-ms-animation: 1s buttonSquare_outerAniFrames linear 1;
animation: 1s buttonSquare_outerAniFrames linear 1;
}
@keyframes buttonSquare_outerAniFrames {
0% {
--angle: 98deg;
}
100% {
--angle: 278deg;
}
}
.buttonSquare {
font-family: 'RobotoMono';
background-color: var(--col_pl0);
color: var(--col_pd100);
border-radius: 0;
height: var(--unit_x48);
font-size: var(--unit_x12);
position: relative;
/*min-width: var(--unit_x250);*/
text-transform: uppercase;
letter-spacing: calc(var(--unit_x1)*1.5);
border: none;
width: auto;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
font-weight: 500;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
cursor: pointer;
}
.buttonSquare span {
z-index: 1;
}
.buttonSquare::before {
content: ' ';
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 0%;
background-color: var(--col_pr60);
z-index: 0;
transition: 100ms 0s width ease-in-out;
}
.buttonSquare:hover::before {
width: 100%;
}
.buttonSquare:focus::before {
background-color: var(--col_pr70);
}
.buttonSquareGhost {
font-family: 'RobotoMono';
background-color: transparent;
border: 1px var(--col_pl0) inset;
color: var(--col_pl0);
border-radius: 0;
height: var(--unit_x48);
font-size: var(--unit_x12);
position: relative;
/*min-width: var(--unit_x250);*/
text-transform: uppercase;
letter-spacing: calc(var(--unit_x1)*1.5);
width: auto;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
font-weight: 500;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
cursor: pointer;
}
.buttonSquareGhost span {
z-index: 1;
}
.buttonSquareGhost::before {
content: ' ';
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 0%;
background-color: var(--col_pr60);
z-index: 0;
transition: 100ms 0s width ease-in-out;
}
.buttonSquareGhost:hover {
border: 1px var(--col_pr60) inset;
}
.buttonSquareGhost:hover::before {
width: 100%;
}
.buttonSquareGhost:focus::before {
background-color: var(--col_pr70);
}
/* Input Text */
/*
*/
.input_text {
height: var(--unit_x48);
}
.input_text .inputArea {
display: grid;
grid-template-rows: var(--unit_x10) repeat(3,minmax(0,1fr)) var(--unit_x10);
grid-template-columns: var(--unit_x10) 1fr;
border-radius: 0px;
border-radius: var(--unit_x5);
background-color: var(--col_pd60);
height: 100%;
align-items: center;
position: relative;
cursor: text;
}
.input_text .inputArea:hover {
background-color: var(--col_pd50);
}
.input_text .inputArea:hover .placeholderLabel {
color: var(--col_pl50);
}
.input_text .inputArea:focus-within {
background-color: var(--col_pd70);
}
.input_text .inputArea .trailingIcon {
grid-row: 3/3;
grid-column: 3/3;
margin-right: var(--unit_x10);
opacity: 0;
}
.input_text .inputArea > .trailingIcon svg {
width: var(--unit_x18);
height: var(--unit_x18);
}
.input_text .inputArea:hover > .trailingIcon svg,
.input_text .inputArea:focus-within > .trailingIcon svg {
color: var(--col_pl50);
}
.input_text .inputArea:focus-within > .trailingIcon,
.input_text .inputArea:hover > .trailingIcon {
opacity: 1;
}
.input_text .inputArea input {
width: 100%;
height: 100%;
font-family: 'Roboto';
font-size: var(--unit_x14);
padding-left: var(--unit_x10);
background: none;
color: var(--col_pl10);
border: none;
/*border-radius: 0px;
border-bottom: var(--unit_x1) solid var(--col_pl50);*/
grid-row: 3/6;
grid-column: 1/4;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
.input_text .inputArea input::after {
display: inline-block;
color: red;
content: 'Pseudo Element Text ';
margin-right: 0.5em;
}
.input_text .inputArea input + .placeholderLabel {
text-align: left;
font-size: var(--unit_x12);
color: var(--col_pl50);
left: 0;
grid-row: 2/5;
grid-column: 2/3;
align-items: center;
align-items: center;
justify-content: left;
}
.input_text .suffixLabel {
text-align: left;
font-size: var(--unit_x10);
margin-top: var(--unit_x3);
left: 0;
opacity: 1;
color: var(--col_pl50);
display: flex;
justify-content: space-between;
flex-direction: row;
align-items: center;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.input_text .suffixLabel .left {
padding-left: var(--unit_x8);
text-align: left;
}
.input_text .suffixLabel .right {
padding-right: var(--unit_x8);
text-align: right;
}
.input_text .inputArea input:focus + .placeholderLabel, .input_text .inputArea input:not(:empty) + .placeholderLabel {
color: var(--col_pl50);
font-size: var(--unit_x10);
grid-row: 2/3 !important;
}
.input_text .inputArea input:focus ~ .suffixLabel, .input_text .inputArea input:not(:empty) ~ .suffixLabel {
grid-row: 3/6 !important;
}
.input_text .inputArea input:not(:placeholder-shown) + .placeholderLabel {
font-size: var(--unit_x10);
grid-row: 2/3 !important;
}
.input_text .inputArea input:not(:placeholder-shown) ~ .suffixLabel {
grid-row: 3/6 !important;
}
.input_text .inputArea input.error + .placeholderLabel, .input_text .inputArea input.error ~ .suffixLabel {
color: var(--col_pr60);
}
.input_text .inputArea input.success {
border-color: var(--col_success);
}
.input_text.design2 {
border-radius: var(--unit_x5);
border: 1px var(--col_pd50) solid;
background-color: transparent;
align-items: center;
position: relative;
}
.input_text.design2 .inputArea {
border-radius: var(--unit_x5);
background-color: transparent;
}
.input_text.design2 input {
border-bottom: 0px;
}
.input_text.design2 .suffixLabel {
margin-top: var(--unit_x4);
}
.input_text.design2.error {
border-color: var(--col_error);
}
/* Textbox with Suggestions */
.input_text_suggestions {
height: var(--unit_x48);
}
.input_text_suggestions .inputArea {
display: grid;
grid-template-rows: var(--unit_x10) repeat(3,minmax(0,1fr)) var(--unit_x10);
grid-template-columns: var(--unit_x10) 1fr;
border-radius: 0px;
border-top-left-radius: var(--unit_x5);
border-top-right-radius: var(--unit_x5);
background-color: var(--col_pd100);
height: 100%;
align-items: center;
position: relative;
cursor: text;
}
.input_text_suggestions .inputArea:hover,
.input_text_suggestions .inputArea:hover .suggestionList {
background-color: var(--col_pd80);
}
.input_text_suggestions .inputArea:hover .placeholderLabel {
color: var(--col_pl50);
}
.input_text_suggestions .inputArea:focus-within,
.input_text_suggestions .inputArea:focus-within .suggestionList {
background-color: var(--col_pd70);
}
.input_text_suggestions .inputArea .trailingIcon {
grid-row: 3/3;
grid-column: 3/3;
margin-right: var(--unit_x10);
opacity: 0;
}
.input_text_suggestions .inputArea > .trailingIcon svg {
width: var(--unit_x18);
height: var(--unit_x18);
}
.input_text_suggestions .inputArea:hover > .trailingIcon svg,
.input_text_suggestions .inputArea:focus-within > .trailingIcon svg {
color: var(--col_pl50);
}
.input_text_suggestions .inputArea:focus-within > .trailingIcon,
.input_text_suggestions .inputArea:hover > .trailingIcon {
opacity: 1;
}
.input_text_suggestions .inputArea input {
width: 100%;
height: 100%;
font-family: 'Roboto';
font-size: var(--unit_x14);
padding-left: var(--unit_x10);
background: none;
color: var(--col_pl10);
border: none;
/*border-radius: 0px;
border-bottom: var(--unit_x1) solid var(--col_pd50);*/
grid-row: 3/6;
grid-column: 1/4;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
.input_text_suggestions .inputArea input + .placeholderLabel {
text-align: left;
font-size: var(--unit_x12);
color: var(--col_pl50);
left: 0;
grid-row: 2/5;
grid-column: 2/3;
align-items: center;
align-items: center;
justify-content: left;
}
.input_text_suggestions .suffixLabel {
text-align: left;
font-size: var(--unit_x10);
margin-top: var(--unit_x3);
left: 0;
opacity: 1;
color: var(--col_pl50);
display: flex;
justify-content: space-between;
flex-direction: row;
align-items: center;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.input_text_suggestions .suffixLabel .left {
padding-left: var(--unit_x8);
text-align: left;
}
.input_text_suggestions .suffixLabel .right {
padding-right: var(--unit_x8);
text-align: right;
}
.input_text_suggestions .inputArea input:focus + .placeholderLabel, .input_text_suggestions .inputArea input:not(:empty) + .placeholderLabel {
color: var(--col_pl50);
font-size: var(--unit_x10);
grid-row: 2/3 !important;
}
.input_text_suggestions .inputArea input:focus ~ .suffixLabel, .input_text_suggestions .inputArea input:not(:empty) ~ .suffixLabel {
grid-row: 3/6 !important;
}
.input_text_suggestions .inputArea input:not(:placeholder-shown) + .placeholderLabel {
font-size: var(--unit_x10);
grid-row: 2/3 !important;
}
.input_text_suggestions .inputArea input:not(:placeholder-shown) ~ .suffixLabel {
grid-row: 3/6 !important;
}
.input_text_suggestions .inputArea input.error + .placeholderLabel, .input_text_suggestions .inputArea input.error ~ .suffixLabel {
color: var(--col_pr60);
}
.input_text_suggestions .inputArea input.success {
border-color: var(--col_success);
}
.input_text_suggestions .suggestionList {
display: none;
border-top: none;
border-bottom-left-radius: var(--unit_x5);
border-bottom-right-radius: var(--unit_x5);
position: absolute;
top: calc(100% - 1px);
left: 0px;
width: 100%;
text-align: left;
background-color: var(--col_pd100);
z-index: 50000;
max-height: 200px;
overflow-x: hidden;
overflow-y: scroll;
font-size: var(--unit_x12);
}
.input_text_suggestions .suggestionList > div {
color: var(--col_white);
padding: var(--unit_x8);
cursor: pointer;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-start;
align-items: center;
}
.input_text_suggestions .suggestionList > div .img {
margin-right: var(--unit_x8);
}
.input_text_suggestions .suggestionList > div .txt {
;
}
/* Input Text SM */
/*
Anzahlung
*/
.input_text_sm {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr var(--unit_x25);
border-radius: 0px;
border-top-left-radius: var(--unit_x5);
border-top-right-radius: var(--unit_x5);
background-color: var(--col_white_5a);
height: var(--unit_x40);
align-items: center;
position: relative;
}
.input_text_sm input {
width: 100%;
height: 100%;
font-family: 'Roboto';
font-size: var(--unit_x14);
padding-left: var(--unit_x8);
padding-right: var(--unit_x22);
background: none;
color: var(--col_white);
border: none;
border-radius: 0px;
border-bottom: var(--unit_x1) solid var(--col_white);
grid-row: 1/1;
grid-column: 1/3;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
.input_text_sm input + .placeholderLabel {
text-align: left;
font-size: var(--unit_x10);
left: 0;
color: var(--col_warmGray);
grid-row: 1/2;
grid-column: 1/1;
align-items: center;
align-items: center;
justify-content: left;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.input_text_sm .suffixLabel {
text-align: center;
font-size: var(--unit_x14);
left: 0;
color: var(--col_white);
grid-row: 2/3;
grid-column: 2/3;
align-items: center;
align-items: center;
justify-content: left;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.input_text_sm input.error {
border-color: var(--col_error);
}
.input_text_sm input.success {
border-color: var(--col_success);
}
.input_text_sm.design2 {
font-size: var(--unit_x14);
height: var(--unit_x40);
background-color: transparent;
align-items: center;
position: relative;
}
.input_text_sm.design2 input {
border-radius: var(--unit_x5);
height: var(--unit_x24);
grid-row: 2/2;
background-color: transparent;
border: 1px var(--col_warmGray) solid;
}
.input_text_sm.design2.error {
border-color: var(--col_error);
}
/* Textarea */
.input_textarea {
display: flex;
border-radius: 0px;
border-top-left-radius: var(--unit_x5);
border-top-right-radius: var(--unit_x5);
background-color: var(--col_pd100);
height: 150px;
align-items: center;
position: relative;
}
.input_textarea textarea {
width: 100%;
height: 100%;
font-family: 'Roboto';
padding-bottom: var(--unit_x10);
padding-top: var(--unit_x10);
padding-left: var(--unit_x10);
font-size: var(--unit_x14);
background: none;
color: var(--col_pl10);
border: none;
border-radius: 0px;
border-bottom: var(--unit_x1) solid var(--col_pd50);
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
.input_textarea textarea::-webkit-input-placeholder {
color: #0bf;
}
.input_textarea textarea:-moz-placeholder { color: var(--col_pl50); }
.input_textarea textarea::-moz-placeholder { color: var(--col_pl50); }
.input_textarea textarea:-ms-input-placeholder { color: var(--col_pl50); }
.input_textarea textarea::placeholder { color: var(--col_pl50); }
.input_textarea:hover {
background-color: var(--col_pd80);
}
.input_textarea:focus-within {
background-color: var(--col_pd70);
}
.input_textarea input:not(:placeholder-shown) + .placeholderLabel {
;
}
.input_textarea textarea.error:-moz-placeholder { color: var(--col_pr60); }
.input_textarea textarea.error::-moz-placeholder { color: var(--col_pr60); }
.input_textarea textarea.error:-ms-input-placeholder { color: var(--col_pr60); }
.input_textarea textarea.error::placeholder { color: var(--col_pr60); }
.input_textarea textarea.success {
border-color: var(--col_success);
}
/* Textarea (Design2) */
.input_textarea.design2 {
border-radius: var(--unit_x5);
}
.input_textarea.design2 textarea {
border-bottom: 0;
}
/* Select Fields (DropDown) */
/*
a
b
Standort auswählen
*/
.input_select {
display: grid;
grid-template-rows: var(--unit_x10) 1fr 1fr 1fr var(--unit_x10);
grid-template-columns: var(--unit_x10) 1fr;
border-radius: 0px;
background-color: var(--col_pd60);
border-radius: var(--unit_x5);
height: var(--unit_x48);
align-items: center;
position: relative;
}
.input_select:hover {
background-color: var(--col_pd50);
}
.input_select.active {
background-color: var(--col_pd70);
}
.input_select * {
cursor: pointer;
}
.input_select select {
width: 100%;
height: 100%;
-webkit-appearance:none;
border-radius: 0px;
padding-top: var(--unit_x18);
padding-left: var(--unit_x10);
font-size: var(--unit_x14);
background: none;
color: var(--col_white);
border: none;
position: absolute;
font-weight: 500;
grid-row: 1/6;
grid-column: 1/3;
z-index: 2;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
.input_select select option {
color: #000;
}
.input_select select optgroup {
color: black !important;
}
.input_select .placeholderLabel {
text-align: left;
font-size: var(--unit_x12);
line-height: 0;
color: var(--col_pl50);
left: 0;
grid-row: 3/3;
grid-column: 2/3;
align-items: center;
align-items: center;
justify-content: center;
}
.input_select .arrowDownElm {
width: var(--unit_x16);
height: var(--unit_x16);
right: var(--unit_x12);
fill: var(--col_pr60);
position: absolute;
z-index: 1;
}
.input_select:hover .arrowDownElm, .input_select.active .arrowDownElm {
fill: var(--col_pr60);
}
.input_select select.error + .placeholderLabel {
color: var(--col_pr60);
}
.input_select select.success {
border-color: var(--col_success);
}
/*
.input_select select ~ option[value=""],
.input_select select:focus + .placeholderLabel {
color: var(--col_pl50);
font-size: var(--unit_x10);
}
*/
.input_select select option:checked:not([value=""]) ~ .placeholderLabel {
color: red;
font-size: var(--unit_x10);
}
/* Design2 */
.input_select.design2 {
border-radius: var(--unit_x5);
border: 1px var(--col_pd50) solid;
background-color: transparent;
height: var(--unit_x48);
align-items: center;
position: relative;
}
.input_select.design2 select {
width: 100%;
height: 100%;
-webkit-appearance:none;
border-radius: 0px;
font-size: var(--unit_x14);
background: none;
color: var(--col_white);
border: none;
position: absolute;
z-index: 2;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
/* Custom Select Fields (DropDown) */
/*
*/
.input_select2 {
height: var(--unit_x48);
cursor: pointer;
}
.input_select2 .inputArea {
display: grid;
grid-template-rows: var(--unit_x10) repeat(3,minmax(0,1fr)) var(--unit_x10);
grid-template-columns: var(--unit_x10) 1fr;
border-radius: 0px;
border-radius: var(--unit_x5);
background-color: var(--col_pd60);
height: 100%;
align-items: center;
position: relative;
}
.input_select2.active .inputArea,
.input_select2 .inputArea:hover {
background-color: var(--col_pd50);
}
.input_select2 .inputArea:hover .placeholderLabel {
color: var(--col_pl50);
}
.input_select2 .inputArea:focus-within {
background-color: var(--col_pd50);
}
.input_select2 .inputArea .trailingIcon {
grid-row: 3/3;
grid-column: 3/3;
margin-right: var(--unit_x10);
opacity: 0;
}
.input_select2 .inputArea > .trailingIcon svg {
width: var(--unit_x18);
height: var(--unit_x18);
}
.input_select2 .inputArea:hover > .trailingIcon svg,
.input_select2 .inputArea:focus-within > .trailingIcon svg {
color: var(--col_pl50);
}
.input_select2 .inputArea:focus-within > .trailingIcon,
.input_select2 .inputArea:hover > .trailingIcon {
opacity: 1;
}
.input_select2 .inputArea .options {
position: absolute;
top: calc(100% + var(--unit_x7));
background-color: var(--col_pd50);
border-radius: var(--unit_x5);
overflow: hidden;
overflow-y: scroll;
left: 0px;
width: 100%;
height: 0px;
max-height: var(--unit_x184);
z-index: 10;
}
.input_select2 .inputArea .options > .option {
padding: var(--unit_x10);
}
.input_select2 .inputArea .options > .option:hover {
background-color: var(--col_pr60);
}
.input_select2 .inputArea input {
width: 100%;
height: 100%;
font-family: 'Roboto';
font-size: var(--unit_x14);
padding-left: var(--unit_x10);
background: none;
color: var(--col_pl10);
border: none;
/*border-radius: 0px;
border-bottom: var(--unit_x1) solid var(--col_pl50);*/
grid-row: 3/6;
grid-column: 1/4;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
.input_select2 .inputArea input + .placeholderLabel {
text-align: left;
font-size: var(--unit_x12);
color: var(--col_pl50);
left: 0;
grid-row: 2/5;
grid-column: 2/3;
align-items: center;
align-items: center;
justify-content: left;
}
.input_select2 .arrowDownElm {
width: var(--unit_x16);
height: var(--unit_x16);
right: var(--unit_x12);
fill: var(--col_pr60);
position: absolute;
grid-row: 2 / 3;
font-size: var(--unit_x10);
z-index: 1;
}
.input_select2:hover .arrowDownElm, .input_select2.active .arrowDownElm {
fill: var(--col_pr60);
}
.input_select2 .suffixLabel {
text-align: left;
font-size: var(--unit_x10);
margin-top: var(--unit_x3);
left: 0;
opacity: 1;
color: var(--col_pl50);
display: flex;
justify-content: space-between;
flex-direction: row;
align-items: center;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.input_select2 .suffixLabel .left {
padding-left: var(--unit_x8);
text-align: left;
}
.input_select2 .suffixLabel .right {
padding-right: var(--unit_x8);
text-align: right;
}
.input_select2 .inputArea input:focus + .placeholderLabel, .input_select2 .inputArea input:not(:empty) + .placeholderLabel {
color: var(--col_pl50);
font-size: var(--unit_x10);
grid-row: 2/3 !important;
}
.input_select2 .inputArea input:focus ~ .suffixLabel, .input_select2 .inputArea input:not(:empty) ~ .suffixLabel {
grid-row: 3/6 !important;
}
.input_select2 .inputArea input:not(:placeholder-shown) + .placeholderLabel {
font-size: var(--unit_x10);
grid-row: 2/3 !important;
}
.input_select2 .inputArea input:not(:placeholder-shown) ~ .suffixLabel {
grid-row: 3/6 !important;
}
.input_select2 .inputArea input.error + .placeholderLabel, .input_select2 .inputArea input.error ~ .suffixLabel {
color: var(--col_pr60);
}
.input_select2 .inputArea input.success {
border-color: var(--col_success);
}
/* DropDown */
/*
*/
.input_dropdown {
position: relative;
z-index: 50000;
}
.input_dropdown .inputSearch {
width: 100%;
height: var(--unit_x53);
background-color: var(--col_pd50);
border-radius: var(--unit_x5);
}
.input_dropdown .inputSearch input {
height: 100%;
width: calc(100% - var(--unit_x40));
background-color: transparent;
color: var(--col_pl0);
margin: 0px var(--unit_x20);
font-size: var(--unit_x14);
border: none;
}
.input_dropdown .inputSearch input::placeholder {
color: var(--col_pl0);
font-size: var(--unit_x10);
opacity: 0.5;
}
.input_dropdown .inputSearch input:-ms-input-placeholder {
color: var(--col_pl0);
font-size: var(--unit_x10);
opacity: 0.5;
}
.input_dropdown .inputSearch input::-ms-input-placeholder {
color: var(--col_pl0);
font-size: var(--unit_x10);
opacity: 0.5;
}
.input_dropdown .options[data-foldingoutdirection="up"] {
margin-bottom: var(--unit_x4);
bottom: var(--unit_x53);
}
.input_dropdown .options[data-foldingoutdirection="down"] {
margin-top: var(--unit_x4);
top: var(--unit_x53);
}
.input_dropdown .options {
position: absolute;
left: 0px;
width: 100%;
display: none;
overflow-x: hidden;
max-height: var(--unit_x237);
overflow-y: scroll;
background-color: var(--col_pd50);
border-radius: var(--unit_x5);
}
.input_dropdown .options .elm {
cursor: pointer;
padding: 0px var(--unit_x35);
height: var(--unit_x79);
display: flex;
align-content: center;
align-items: center;
justify-content: flex-start;
flex-direction: row;
flex-wrap: nowrap;
}
.input_dropdown .options .elm:hover {
cursor: pointer;
background-color: var(--col_pr60);
}
/* Checkbox */
/*
*/
.input_checkbox {
display: flex;
text-align: left;
align-items: flex-start;
flex-direction: row;
cursor: pointer;
}
.input_checkbox > * {
cursor: pointer;
}
.input_checkbox input[type="checkbox"] {
display: none;
}
.input_checkbox div:nth-child(2) {
max-width: 80%;
}
.input_checkbox .tickBox {
position: relative;
width: var(--unit_x14);
min-width: var(--unit_x14);
height: var(--unit_x14);
min-height: var(--unit_x14);
display: table;
border: var(--outline) var(--col_white) solid;
border-radius: var(--unit_x2);
margin-right: var(--unit_x8);
display: flex;
justify-content: center;
align-items: center;
}
.input_checkbox.active .tickBox {
background-color: transparent;
}
.input_checkbox .tickBox svg {
display: none;
}
.input_checkbox.active .tickBox svg {
display: block;
position: absolute;
width: 70%;
height: 70%;
fill: var(--col_red);
stroke: var(--col_red);
stroke-width:0.5px;
}
.input_checkbox .subLabel {
flex-grow: 1;
text-align: right;
}
.input_checkbox label {
font-size: var(--unit_x14);
line-height: calc(var(--unit_x14)*1.125);
margin-top: calc(var(--unit_x1)*-1);
}
.input_checkbox:hover:not(.disabled) .pulseRing {
width: var(--unit_x40);
height: var(--unit_x40);
background-color: var(--col_white_50a);
border-radius: var(--unit_x20);
margin: 0px auto;
position: absolute;
left: calc(50% - var(--unit_x20));
top: calc(50% - var(--unit_x20));
}
.input_checkbox:hover:not(.disabled) .pulseRing {
border-radius: var(--unit_x3);
transform-origin: 50%;
animation: checkBoxPulseRingFrames ease-in-out 1.5s;
animation-iteration-count: infinite;
transform-origin: 50% 50%;
-webkit-animation: checkBoxPulseRingFrames ease-in-out 1.5s;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: 50% 50%;
-moz-animation: checkBoxPulseRingFrames ease-in-out 1.5s;
-moz-animation-iteration-count: infinite;
-moz-transform-origin: 50% 50%;
-o-animation: checkBoxPulseRingFrames ease-in-out 1.5s;
-o-animation-iteration-count: infinite;
-o-transform-origin: 50% 50%;
-ms-animation: checkBoxPulseRingFrames ease-in-out 1.5s;
-ms-animation-iteration-count: infinite;
-ms-transform-origin: 50% 50%;
}
.input_checkbox.colorCircle .tickBox {
width: var(--unit_x14);
height: var(--unit_x14);
border-radius: var(--unit_x14);
border: 0;
}
.input_checkbox.colorCircle.active .tickBox svg {
display: block;
position: absolute;
width: 70%;
height: 70%;
fill: var(--col_white);
stroke: var(--col_white);
stroke-width:0.5px;
}
.input_checkbox.colorCircle:hover:not(.disabled) .pulseRing {
border-radius: var(--unit_x40);
}
.input_checkbox input.error + label {
color: var(--col_pr60);
}
@keyframes checkBoxPulseRingFrames{
0% { transform: scale(0.35); opacity: 0; }
50% { transform: scale(0.35); opacity: 0.5; }
100% { transform: scale(1); opacity: 0.01; border-radius: var(--unit_x20); }
}
@-moz-keyframes checkBoxPulseRingFrames{
0% { transform: scale(0.35); opacity: 0; }
50% { transform: scale(0.35); opacity: 0.5; }
100% { transform: scale(1); opacity: 0.01; border-radius: var(--unit_x20); }
}
@-webkit-keyframes checkBoxPulseRingFrames {
0% { transform: scale(0.35); opacity: 0; }
50% { transform: scale(0.35); opacity: 0.5; }
100% { transform: scale(1); opacity: 0.01; border-radius: var(--unit_x20); }
}
@-o-keyframes checkBoxPulseRingFrames {
0% { transform: scale(0.3); opacity: 0; }
50% { transform: scale(0.35); opacity: 0.5; }
100% { transform: scale(1); opacity: 0.01; border-radius: var(--unit_x20); }
}
@-ms-keyframes checkBoxPulseRingFrames {
0% { transform: scale(0.35); opacity: 0; }
50% { transform: scale(0.35); opacity: 0.5; }
100% { transform: scale(1); opacity: 0.01; border-radius: var(--unit_x20); }
}
/* Radio */
/*
*/
.input_radio {
display: flex;
text-align: left;
align-items: flex-start;
flex-direction: row;
cursor: pointer;
}
.input_radio > * {
cursor: pointer;
}
.input_radio input[type="radio"] {
display: none;
}
.input_radio .tickBox {
position: relative;
width: var(--unit_x14);
height: var(--unit_x14);
display: table;
border: 1px var(--col_white) solid;
border-radius: var(--unit_x7);
margin-right: var(--unit_x8);
}
.input_radio label + .tickBox {
margin-left: var(--unit_x8);
margin-right: 0;
}
.input_radio.active .tickBox .inner {
display: block;
position: absolute;
width: 60%;
height: 60%;
left: 20%;
top: 20%;
border-radius: var(--unit_x7);
background-color: var(--col_red);
}
.input_radio .subLabel {
flex-grow: 1;
text-align: right;
}
.input_radio label {
font-size: var(--unit_x14);
max-width: 80%;
line-height: 1.2;
}
.input_radio:hover .pulseRing {
width: var(--unit_x40);
height: var(--unit_x40);
background-color: var(--col_white_50a);
border-radius: var(--unit_x20);
margin: 0px auto;
position: absolute;
left: calc(50% - var(--unit_x20));
top: calc(50% - var(--unit_x20));
}
.input_radio:hover:not(.disabled) .pulseRing {
transform-origin: 50%;
animation: radioPulseRingFrames ease-in-out 1.5s;
animation-iteration-count: infinite;
transform-origin: 50% 50%;
-webkit-animation: radioPulseRingFrames ease-in-out 1.5s;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: 50% 50%;
-moz-animation: radioPulseRingFrames ease-in-out 1.5s;
-moz-animation-iteration-count: infinite;
-moz-transform-origin: 50% 50%;
-o-animation: radioPulseRingFrames ease-in-out 1.5s;
-o-animation-iteration-count: infinite;
-o-transform-origin: 50% 50%;
-ms-animation: radioPulseRingFrames ease-in-out 1.5s;
-ms-animation-iteration-count: infinite;
-ms-transform-origin: 50% 50%;
}
@keyframes radioPulseRingFrames{
0% { transform: scale(0.3); opacity: 0; }
50% { transform: scale(0.3); opacity: 0.5; }
100% { transform: scale(1); opacity: 0.01; }
}
@-moz-keyframes radioPulseRingFrames{
0% { transform: scale(0.3); opacity: 0; }
50% { transform: scale(0.3); opacity: 0.5; }
100% { transform: scale(1); opacity: 0.01; }
}
@-webkit-keyframes radioPulseRingFrames {
0% { transform: scale(0.3); opacity: 0; }
50% { transform: scale(0.3); opacity: 0.5; }
100% { transform: scale(1); opacity: 0.01; }
}
@-o-keyframes radioPulseRingFrames {
0% { transform: scale(0.3); opacity: 0; }
50% { transform: scale(0.3); opacity: 0.5; }
100% { transform: scale(1); opacity: 0.01; }
}
@-ms-keyframes radioPulseRingFrames {
0% { transform: scale(0.3); opacity: 0; }
50% { transform: scale(0.3); opacity: 0.5; }
100% { transform: scale(1); opacity: 0.01; }
}
/* Step Indikator Box (With Ticks) */
.stepIndicatorBox {
margin-top: 3vh;
display: grid;
grid-template-columns: repeat(4,1fr);
grid-template-rows: 1px var(--unit_x4) 1px;
}
.stepIndicatorBox .middleLine {
height: 100%;
border-radius: var(--unit_x4);
background-color: var(--col_darkRed);
grid-column-start: 1;
grid-column-end: 5;
grid-row-start: 2;
grid-row-end: 2;
display: grid;
grid-template-columns: repeat(4,1fr);
grid-template-rows: 1px;
}
.stepIndicatorBox .middleLine div.active, .stepIndicatorBox .middleLine div:first-child {
height: var(--unit_x4);
border-radius: var(--unit_x4);
background-color: var(--col_red);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.stepIndicatorBox .dots {
grid-column-start: 1;
grid-column-end: 5;
grid-row-start: 2;
grid-row-end: 2;
display: grid;
grid-template-columns: repeat(4,1fr);
grid-template-rows: 1fr;
justify-items: end;
}
.stepIndicatorBox .dots div {
height: var(--unit_x16);
width: var(--unit_x16);
margin-top: calc(var(--unit_x6)*-1);
border-radius: var(--unit_x10);
background-color: var(--col_darkRed);
display: flex;
color: var(--col_black);
}
.stepIndicatorBox .dots div.active, .stepIndicatorBox .dots div:first-child {
background-color: var(--col_red);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
/* Step Indikator Box 2 (Without Ticks) */
.stepIndicatorBox2 {
margin-top: 3vh;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: var(--unit_x10);
}
.stepIndicatorBox2 .middleLine {
height: 100%;
border-radius: var(--unit_x4);
background-color: var(--col_darkRed);
}
.stepIndicatorBox2 .middleLine div {
height: 100%;
border-radius: var(--unit_x4);
background-color: var(--col_red);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.progressBarSteps {
position: relative;
display: flex;
align-content: center;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
flex-direction: row;
}
.progressBarSteps .line, .progressBarSteps .lineBG, .progressBarSteps .lineDots {
position: absolute;
left: 0px;
background-color: var(--col_pd50);
width: 100%;
height: var(--unit_x4);
border-radius: var(--unit_x4);
display: flex;
justify-content: space-between;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
align-items: center;
}
.progressBarSteps .lineBG {
background-color: var(--col_pl10);
width: 0%;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.progressBarSteps .lineDots {
background-color: transparent;
}
.progressBarSteps .dot {
background-color: var(--col_pl50);
width: var(--unit_x4);
height: 100%;
border-radius: var(--unit_x4);
}
.progressBarSteps .dot:first-child, .progressBarSteps .dot:last-child { opacity: 0;}
.progressBarSteps .thumb {
position: absolute;
left: 0px;
width: var(--unit_x20);
height: var(--unit_x11);
font-size: var(--unit_x8);
font-weight: bold;
border-radius: var(--unit_x5);
color: var(--col_pd50);
background-color: var(--col_pl10);
display: flex;
align-content: center;
justify-content: center;
align-items: center;
flex-direction: row;
flex-wrap: nowrap;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
/* *************************************************************************************
****************************************************************************************
****************************************************************************************
*********************************** Bausteine ******************************************
****************************************************************************************
****************************************************************************************
****************************************************************************************
************************************************************************************* */
/* Big Text Block */
.bigTxtBlock {
display: grid;
grid-template-columns: 2px 1fr;
color: var(--col_white);
}
.bigTxtBlock > .colorLines {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
width: var(--unit_x2);
height: var(--unit_x230);
}
.bigTxtBlock > .colorLines > div:nth-child(1) {
background-color: var(--col_red);
}
.bigTxtBlock > .colorLines > div:nth-child(2) {
background-color: var(--col_white);
}
.bigTxtBlock > .colorLines > div:nth-child(3) {
background-color: var(--col_c1);
}
.bigTxtBlock > div:nth-child(2) {
margin-left: var(--unit_x24);
}
.bigTxtBlock .headline {
font-size: var(--unit_x47);
line-height: calc(var(--unit_x47) * 1.125);
margin-bottom: var(--unit_x4);
font-family: 'Good Times';
}
.bigTxtBlock .subHeadline {
font-weight: bold;
font-size: var(--unit_x20);
line-height: calc(var(--unit_x20) * 1.25);
margin-bottom: var(--unit_x4);
}
.bigTxtBlock .body {
font-size: var(--unit_x16);
line-height: calc(var(--unit_x16) * 1.5);
margin-bottom: var(--unit_x36);
}
@media only screen and (max-width: 768px) {
.bigTxtBlock {
padding-left: var(--unit_x18);
padding-right: var(--unit_x18);
}
}
/* Big Text Block (right) */
.bigTxtBlock_r {
display: grid;
grid-template-columns: 1fr 2px;
max-width: 450px;
color: var(--col_white);
}
.bigTxtBlock_r > .colorLines {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
width: var(--unit_x2);
height: var(--unit_x129);
}
.bigTxtBlock_r > .colorLines > div:nth-child(1) {
background-color: var(--col_red);
}
.bigTxtBlock_r > .colorLines > div:nth-child(2) {
background-color: var(--col_white);
}
.bigTxtBlock_r > .colorLines > div:nth-child(3) {
background-color: var(--col_c1);
}
.bigTxtBlock_r > div:nth-child(1) {
margin-right: var(--unit_x24);
}
.bigTxtBlock_r > div:nth-child(2) {
;
}
.bigTxtBlock_r .headline {
font-size: var(--unit_x47);
line-height: calc(var(--unit_x47) * 1.125);
margin-bottom: var(--unit_x4);
font-family: 'Good Times';
}
.bigTxtBlock_r .subHeadline {
font-weight: bold;
font-size: var(--unit_x20);
line-height: calc(var(--unit_x20) * 1.25);
margin-bottom: var(--unit_x4);
}
.bigTxtBlock_r .body {
font-size: var(--unit_x16);
line-height: calc(var(--unit_x16) * 1.5);
margin-bottom: var(--unit_x36);
}
@media only screen and (max-width: 768px) {
.bigTxtBlock_r {
padding-left: var(--unit_x18);
padding-right: var(--unit_x18);
}
}
/* Clean Box */
.cleanBox {
width: 100%;
max-width: var(--contentMaxWidth_half);
color: var(--col_white);
padding: var(--unit_x10);
border-radius: var(--unit_x8);
border-width: 1px;
border-style: solid;
border-color: transparent;
display: flex;
flex-direction: column;
text-align: center;
}
.cleanBox > * {
margin-bottom: var(--unit_x8);
}
.cleanBox > * {
/*margin-bottom: var(--unit_x2);*/
}
.cleanBox .headline {
font-size: var(--unit_x20);
margin-bottom: var(--unit_x8);
font-weight: bold;
grid-area: header2;
text-align: center;
}
.cleanBox .formFields {
font-size: var(--unit_x25);
margin-bottom: var(--unit_x12);
grid-area: body;
display: grid;
grid-column-gap: var(--unit_x18);
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
}
.cleanBox .subtxt {
font-size: var(--unit_x12);
grid-area: footer;
}
.cleanBox .lines {
grid-area: header;
max-width: 30%;
width: 170px;
height: var(--unit_x2);
margin: 0 auto var(--unit_x12) auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.cleanBox .lines > div:nth-child(1) {
grid-column-start: 1;
grid-column-end: 2;
background-color: var(--col_red);
}
.cleanBox .lines > div:nth-child(2) {
grid-column-start: 2;
grid-column-end: 3;
background-color: var(--col_white);
}
.cleanBox .lines > div:nth-child(3) {
grid-column-start: 3;
grid-column-end: 4;
background-color: var(--col_c1);
}
@media only screen and (max-width: 768px) {
.cleanBox .formFields {
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
grid-row-gap: var(--unit_x18);
}
}
.cleanBox.selected {
border-width: 1px;
border-style: solid;
border-color: var(--col_white);
}
/* Reservation Form */
.reservationFormBox {
width: 95%;
max-width: var(--contentMaxWidth_half);
color: var(--col_white);
background-color: var(--col_c2);
padding: var(--unit_x24);
border-radius: var(--unit_x8);
display: grid;
grid-template-areas: 'header header header header'
'header2 header2 header2 header2'
'body body body body'
'footer footer footer footer';
margin: 0px auto;
text-align: center;
}
.reservationFormBox .headline {
font-size: var(--unit_x20);
margin-bottom: var(--unit_x16);
font-weight: bold;
grid-area: header2;
text-align: center;
}
.reservationFormBox .formFields {
font-size: var(--unit_x25);
margin-bottom: var(--unit_x16);
grid-area: body;
display: grid;
grid-column-gap: var(--unit_x18);
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
}
.reservationFormBox .subtxt {
font-size: var(--unit_x12);
grid-area: footer;
}
.reservationFormBox .lines {
grid-area: header;
max-width: 30%;
width: 170px;
height: var(--unit_x2);
margin: 0 auto var(--unit_x16) auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.reservationFormBox .lines > div:nth-child(1) {
grid-column-start: 1;
grid-column-end: 2;
background-color: var(--col_red);
}
.reservationFormBox .lines > div:nth-child(2) {
grid-column-start: 2;
grid-column-end: 3;
background-color: var(--col_white);
}
.reservationFormBox .lines > div:nth-child(3) {
grid-column-start: 3;
grid-column-end: 4;
background-color: var(--col_c1);
}
@media only screen and (max-width: 768px) {
.reservationFormBox .formFields {
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
grid-row-gap: var(--unit_x18);
}
}
/* Stepping Contact Form */
.steppingContactForm .stepElms > div:nth-child(n+2) {
display: none;
}
/* Contact Form */
.contactFormBox {
color: var(--col_white);
padding: var(--unit_x27);
border-radius: var(--unit_x10);
max-width: 800px;
margin: 0px auto;
display: grid;
grid-template-areas: 'header header header header'
'body body body body'
'footer footer footer footer';
padding-left: var(--unit_x18);
padding-right: var(--unit_x18);
}
.contactFormBox .headline {
font-size: var(--unit_x25);
margin-bottom: var(--unit_x16);
grid-area: header;
}
.contactFormBox .formFields {
font-size: var(--unit_x25);
margin-bottom: var(--unit_x16);
grid-area: body;
display: grid;
grid-column-gap: var(--unit_x18);
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
grid-row-gap: var(--unit_x18);
}
.contactFormBox .subtxt {
font-size: var(--unit_x12);
grid-area: footer;
}
/* Centered Textblock */
.centeredTxtBlock {
margin: 0px auto;
color: var(--col_white);
text-align: center;
max-width: var(--contentMaxWidth_half);
}
.centeredTxtBlock .lines {
max-width: 150px;
height: var(--unit_x2);
margin: var(--unit_x15) auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.centeredTxtBlock .lines > div:nth-child(1) {
grid-column-start: 1;
grid-column-end: 2;
background-color: var(--col_red);
}
.centeredTxtBlock .lines > div:nth-child(2) {
grid-column-start: 2;
grid-column-end: 3;
background-color: var(--col_white);
}
.centeredTxtBlock .lines > div:nth-child(3) {
grid-column-start: 3;
grid-column-end: 4;
background-color: var(--col_c1);
}
.centeredTxtBlock .headline {
font-size: var(--unit_x42);
line-height: calc(var(--unit_x47) * 1.125);
margin-bottom: var(--unit_x15);
font-family: 'Good Times';
}
.centeredTxtBlock .subHeadline {
font-weight: bold;
font-size: var(--unit_x20);
line-height: calc(var(--unit_x20) * 1.25);
margin-bottom: var(--unit_x10);
}
.centeredTxtBlock .body {
line-height: calc(var(--unit_x16) * 1.5);
font-size: var(--unit_x16);
margin-left: auto;
margin-right: auto;
margin-bottom: var(--unit_x17);
max-width: 860px;
}
@media only screen and (max-width: 768px) {
.centeredTxtBlock {
padding-left: var(--unit_x18);
padding-right: var(--unit_x18);
}
}
/* Image Slider */
.imgSlider {
height: auto;
width: 100%;
}
.imgSlider .steerings {
height: auto;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: var(--unit_x20);
}
.imgSlider .steerings div:nth-child(1) {
width: 50px;
cursor: pointer;
}
.imgSlider .steerings div:nth-child(2) {
width: 50px;
cursor: pointer;
}
.imgSlider .images {
height: auto;
position: relative;
}
.imgSlider .images > * {
width: 40vw;
z-index: 1;
height: 26.6666vw;
transform: scale(0.5);
transform-origin: center;
left: calc(50% - 20vw);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.imgSlider .images img { /* In Backstack */
width: 40vw;
height: auto;
border-radius: var(--unit_x10);
position: absolute;
opacity: 1.0;
}
.imgSlider .images img.center {
width: 100%;
max-width: var(--contentMaxWidth_half);
z-index: 4;
height: auto;
transform-origin: center;
left: 50%;
margin-left: var(--imageSLiderCenterImgMarginleft);
transform: scale(0.9);
}
.imgSlider .images img.left {
width: 100%;
max-width: var(--contentMaxWidth_half);
z-index: 3;
height: auto;
transform: scale(0.6);
transform-origin: left;
left: 0%;
top: 0px;
opacity: 0.5;
}
.imgSlider .images img.right {
width: 100%;
max-width: var(--contentMaxWidth_half);
z-index: 3;
height: auto;
transform: scale(0.6);
transform-origin: right;
left: 100%;
margin-left: var(--imageSLiderRightImgMarginleft);
top: 0px;
opacity: 0.5;
}
.imgSlider .images img.back {
width: 100%;
max-width: var(--contentMaxWidth_half);
z-index: 4;
height: auto;
transform-origin: center;
left: 50%;
top: 0px;
margin-left: var(--imageSLiderCenterImgMarginleft);
transform: scale(0.3);
opacity: 0;
}
@media only screen and (max-width: 768px) {
.imgSlider {
height: auto;
}
.imgSlider .images img {
}
.imgSlider .images img.center {
left: 0%;
margin-left: 0px !important;
position: relative;
}
.imgSlider .images img.right {
}
.imgSlider .images img.back {
left: 0%;
margin-left: 0px !important;
}
}
/* Car Slider */
.carSlider {
height: auto;
width: 100%;
}
.carSlider .steerings {
height: auto;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: var(--unit_x20);
}
.carSlider .steerings .leftChevron {
width: 50px;
cursor: pointer;
}
.carSlider .steerings .rightChevron {
width: 50px;
cursor: pointer;
}
.carSlider .steerings .infoBox {
position: relative;
background-color: var(--col_c2);
border-radius: var(--unit_x8);
width: 100%;
max-width: var(--unit_x306);
margin: 0px var(--unit_x24);
text-align: center;
color: var(--col_white);
padding: var(--unit_x18);
display: flex;
flex-direction: column;
-webkit-transition: height 2.75s ease-in-out;
-moz-transition: height 2.75s ease-in-out;
-ms-transition: height 2.75s ease-in-out;
-o-transition: height 2.75s ease-in-out;
transition: height 2.75s ease-in-out;
}
.carSlider .steerings .infoBox .discountLabel {
position: absolute;
color: #fff;
font-size: var(--unit_x15);
padding: var(--unit_x3);
right: 0px;
background-color: var(--col_red);
border-top-left-radius: var(--unit_x3);
border-bottom-left-radius: var(--unit_x3);
border-width: 1px;
border-style: solid;
border-color: transparent;
}
.carSlider .steerings .infoBox .head {
width: 100%;
display: flex;
flex-direction: column;
border-bottom: 0.5px var(--col_warmGray) solid;
padding-bottom: var(--unit_x9);
}
.carSlider .steerings .infoBox .head.left {
text-align: left;
}
.carSlider .steerings .infoBox .head.right {
text-align: right;
}
.carSlider .steerings .infoBox .head div:nth-child(1) {
font-size: var(--unit_x20);
font-weight: bold;
}
.carSlider .steerings .infoBox .head div:nth-child(2) {
font-size: var(--unit_x12);
color: var(--col_warmGray);
font-weight: normal;
}
.carSlider .steerings .infoBox .head .right {
width: 5%;
text-align: right;
font-size: var(--unit_x12);
}
.carSlider .steerings .infoBox .body {
width: 100%;
display: flex;
flex-direction: row;
padding-bottom: var(--unit_x9);
justify-content: space-between;
align-items: center;
align-content: center;
margin-top: var(--unit_x9);
}
.carSlider .steerings .infoBox .body .left {
width: 50%;
border-right: 0.5px var(--col_warmGray) solid;
}
.carSlider .steerings .infoBox .body .right {
margin-left: var(--unit_x9);
width: 50%;
}
.carSlider .steerings .infoBox .body .left div:nth-child(1) {
font-size: var(--unit_x12);
font-weight: normal;
text-align: left;
color: var(--col_warmGray);
}
.carSlider .steerings .infoBox .body .left div:nth-child(2) {
font-size: var(--unit_x20);
font-weight: bold;
text-align: left;
color: var(--col_white);
}
.carSlider .steerings .infoBox .body .right div:nth-child(1) {
font-size: var(--unit_x12);
font-weight: normal;
text-align: left;
color: var(--col_warmGray);
}
.carSlider .steerings .infoBox .body .right div:nth-child(2) {
font-size: var(--unit_x20);
font-weight: bold;
text-align: left;
color: var(--col_white);
}
.carSlider .steerings .infoBox .foot {
width: 100%;
display: flex;
flex-direction: row;
text-align: left;
padding-top: var(--unit_x9);
}
.carSlider .steerings .infoBox .foot .left {
display: flex;
flex-direction: column;
width: 50%;
border-right: 1px white solid;
}
.carSlider .steerings .infoBox .foot .left div:nth-child(1) {
font-size: var(--unit_x12);
}
.carSlider .steerings .infoBox .foot .left div:nth-child(2) {
font-size: var(--unit_x20);
font-weight: bold;
}
.carSlider .steerings .infoBox .foot .right {
width: 50%;
padding-left: var(--unit_x9);
}
.carSlider .steerings .infoBox .foot .right div:nth-child(1) {
font-size: var(--unit_x12);
}
.carSlider .steerings .infoBox .foot .right div:nth-child(2) {
font-size: var(--unit_x20);
font-weight: bold;
}
.carSlider .actions {
width: 100%;
max-width: var(--unit_x306);
height: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: var(--unit_x24) auto 0 auto;
}
.carSlider .actions button, .carSlider .actions a {
width: 100%;
}
.carSlider .actions button:nth-child(1) {
margin-bottom: var(--unit_x21);
}
.carSlider .footerTexts {
width: 95%;
margin: var(--unit_x20) auto 0px auto;
font-size: var(--unit_x12);
text-align: center;
}
.carSlider .images {
height: auto;
position: relative;
}
.carSlider .images > * {
width: 40vw;
z-index: 1;
height: 26.6666vw;
transform: scale(0.5);
transform-origin: center;
left: calc(50% - 20vw);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.carSlider .images img { /* In Backstack */
width: 40vw;
height: auto;
border-radius: var(--unit_x10);
position: absolute;
opacity: 1.0;
}
.carSlider .images img.center {
width: 100%;
max-width: var(--contentMaxWidth_half);
z-index: 4;
height: auto;
transform-origin: center;
left: 50%;
margin-left: var(--carSLiderCenterImgMarginleft);
transform: scale(0.9);
}
.carSlider .images img.left {
width: 100%;
max-width: var(--contentMaxWidth_half);
z-index: 3;
height: auto;
transform: scale(0.475);
transform-origin: left;
left: 0%;
top: 0px;
opacity: 0.5;
}
.carSlider .images img.right {
width: 100%;
max-width: var(--contentMaxWidth_half);
z-index: 3;
height: auto;
transform: scale(0.475);
transform-origin: right;
left: 100%;
margin-left: var(--carSLiderRightImgMarginleft);
top: 0px;
opacity: 0.5;
}
.carSlider .images img.back {
width: 100%;
max-width: var(--contentMaxWidth_half);
z-index: 4;
height: auto;
transform-origin: center;
left: 50%;
top: 0px;
margin-left: var(--imageSLiderCenterImgMarginleft);
transform: scale(0.3);
opacity: 0;
}
@media only screen and (max-width: 768px) {
.carSlider {
height: auto;
}
.carSlider .images img {
}
.carSlider .images img.center {
left: 50%;
/*margin-left: 0px !important;*/
position: relative;
}
.carSlider .images img.left {
left: -60%;
}
.carSlider .images img.right {
left: 160%;
}
.carSlider .images img.back {
left: 0%;
margin-left: 0px !important;
}
}
/* Car Slider2 */
.carSlider2 {
height: auto;
width: 100%;
overflow: hidden;
position: relative;
}
.carSlider2 .steerings {
height: auto;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
top: calc(var(--unit_x40)*-1);
position: relative;
z-index:100;
}
}
.carSlider2 .steerings .leftChevron {
width: var(--unit_x30);
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
}
.carSlider2 .steerings .rightChevron {
width: var(--unit_x30);
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
}
.carSlider2 .steerings .leftChevron svg,
.carSlider2 .steerings .rightChevron svg {
width: var(--unit_x30);
height: var(--unit_x30);
}
.carSlider2 .steerings .actShwonImg {
font-size: var(--unit_x14);
font-weight: bold;
}
.carSlider2 .headerBox {
text-align: center;
font-size: var(--unit_x20);
font-weight: bold;
text-transform: uppercase;
position: relative;
top: var(--unit_x25);
z-index: 50;
}
.carSlider2 .headerBox svg {
display: none;
}
.carSlider2 .headerBox .infoIcon {
display: inline-block;
margin-left: var(--unit_x8);
}
.carSlider2 .headerBox .infoIcon svg {
display: inherit;
}
.carSlider2 .infoBox {
position: absolute;
left: 55%;
top: 10%;
z-index: 6;
/*left: calc(50% - var(--unit_x89));*/
background-color: #48505C;
border-radius: var(--unit_x65);
width: var(--unit_x130);
height: var(--unit_x130);
margin: 0px var(--unit_x24) 0px var(--carSLiderCenterImgMarginleft);
text-align: left;
color: #fff;
padding: var(--unit_x20);
display: flex;
justify-content: space-around;
align-items: flex-start;
align-content: flex-start;
flex-wrap: nowrap;
flex-direction: column;
-webkit-box-shadow: 0px var(--unit_x3) var(--unit_x9) 0px var(--col_dropShadow_50a);;
-webkit-box-shadow: 0px var(--unit_x3) var(--unit_x9) 0px var(--col_dropShadow_50a);
box-shadow: 0px var(--unit_x3) var(--unit_x8) 0px var(--col_dropShadow_50a);
-webkit-transition: height 2.75s ease-in-out;
-moz-transition: height 2.75s ease-in-out;
-ms-transition: height 2.75s ease-in-out;
-o-transition: height 2.75s ease-in-out;
transition: height 2.75s ease-in-out;
}
.carSlider2 .infoBox .label {
font-size: var(--unit_x10);
color: var(--col_sg50);
}
.carSlider2 .infoBox .content {
font-size: var(--unit_x20);
font-weight: bold;
}
.carSlider2 .infoBox2 {
position: absolute;
width: var(--unit_x71);
height: var(--unit_x71);
border-radius: var(--unit_x36);
background-color: var(--col_pr60);
padding: var(--unit_x10);
z-index: 7;
display: flex;
justify-content: space-around;
align-items: center;
align-content: flex-start;
flex-wrap: nowrap;
flex-direction: column;
left: calc(55% + var(--unit_x80));
top: calc(10% + var(--unit_x90));
margin: 0px var(--unit_x24) 0px var(--carSLiderCenterImgMarginleft);
-webkit-box-shadow: 0px var(--unit_x3) var(--unit_x9) 0px var(--col_dropShadow_50a);;
-webkit-box-shadow: 0px var(--unit_x3) var(--unit_x9) 0px var(--col_dropShadow_50a);
box-shadow: 0px var(--unit_x3) var(--unit_x8) 0px var(--col_dropShadow_50a);
-webkit-transition: height 2.75s ease-in-out;
-moz-transition: height 2.75s ease-in-out;
-ms-transition: height 2.75s ease-in-out;
-o-transition: height 2.75s ease-in-out;
transition: height 2.75s ease-in-out;
}
.carSlider2 .infoBox2 .label {
font-size: var(--unit_x10);
color: #fff;
}
.carSlider2 .infoBox2 .content {
font-size: var(--unit_x20);
font-weight: bold;
color: #fff;
}
.carSlider2 .infoBox3 {
position: absolute;
width: var(--unit_x10);
height: var(--unit_x10);
padding: var(--unit_x10);
z-index: 6;
display: flex;
justify-content: space-around;
align-items: center;
align-content: flex-start;
flex-wrap: nowrap;
flex-direction: column;
left: calc(55% + var(--unit_x130));
top: calc(10% + var(--unit_x15));
margin: 0px var(--unit_x24) 0px var(--carSLiderCenterImgMarginleft);
-webkit-transition: height 2.75s ease-in-out;
-moz-transition: height 2.75s ease-in-out;
-ms-transition: height 2.75s ease-in-out;
-o-transition: height 2.75s ease-in-out;
transition: height 2.75s ease-in-out;
}
.carSlider2 .actions {
width: 100%;
max-width: var(--unit_x306);
height: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: var(--unit_x24) auto 0 auto;
}
.carSlider2 .actions button, .carSlider2 .actions a {
width: 100%;
}
.carSlider2 .actions button:nth-child(1) {
margin-bottom: var(--unit_x21);
}
.carSlider2 .footerTexts {
width: 95%;
margin: var(--unit_x20) auto 0px auto;
font-size: var(--unit_x12);
text-align: center;
}
.carSlider2 .images {
height: auto;
position: relative;
}
.carSlider2 .images > * {
width: 40vw;
z-index: 1;
height: 26.6666vw;
transform: scale(0.5);
transform-origin: center;
left: calc(50% - 20vw);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.carSlider2 .images img { /* In Backstack */
width: 40vw;
height: auto;
border-radius: var(--unit_x10);
position: absolute;
opacity: 1.0;
}
.carSlider2 .images img.center {
width: 100%;
max-width: var(--contentMaxWidth_half);
z-index: 5;
height: auto;
transform-origin: center;
left: 50%;
margin-left: var(--carSLiderCenterImgMarginleft);
transform: scale(1);
}
.carSlider2 .images img.left {
width: 100%;
max-width: var(--contentMaxWidth_half);
z-index: 3;
height: auto;
transform: scale(0.475);
transform-origin: left;
left: 0%;
top: 0px;
opacity: 1;
}
.carSlider2 .images img.right {
width: 100%;
max-width: var(--contentMaxWidth_half);
z-index: 3;
height: auto;
transform: scale(0.475);
transform-origin: right;
left: 100%;
margin-left: var(--carSLiderRightImgMarginleft);
top: 0px;
opacity: 1;
}
.carSlider2 .images img.back {
width: 100%;
max-width: var(--contentMaxWidth_half);
z-index: 4;
height: auto;
transform-origin: center;
left: 50%;
top: 0px;
margin-left: var(--imageSLiderCenterImgMarginleft);
transform: scale(0.3);
opacity: 0;
}
@media only screen and (max-width: 768px) {
.carSlider2 {
height: auto;
}
.carSlider2 .images img {
}
.carSlider2 .images img.center {
left: 50%;
/*margin-left: 0px !important;*/
position: relative;
}
.carSlider2 .images img.left {
left: -60%;
}
.carSlider2 .images img.right {
left: 160%;
}
.carSlider2 .images img.back {
left: 0%;
margin-left: 0px !important;
}
}
/* PopUp */
.tri_popUp {
position: fixed;
left: 50%;
top: 50%;
width: 90%;
max-width: calc((var(--contentMaxWidth_half)*0.75) + var(--unit_x25));
height: 90%;
max-height: 500px;
z-index: 50000;
display: none;
color: var(--col_white);
padding-top: 0px;
}
.tri_popUp .content {
width: 100%;
height: 100%;
max-height: 100%;
padding: var(--unit_x18);
background-color: var(--col_pd80);
border-radius: var(--unit_x8);
overflow-y: scroll;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
-webkit-box-shadow: 0px var(--unit_x3) var(--unit_x9) 0px var(--col_dropShadow_50a);
box-shadow: 0px var(--unit_x3) var(--unit_x8) 0px var(--col_dropShadow_50a);
}
.tri_popUp .content::-webkit-scrollbar { display: none; }
.tri_popUp .closeCrossBx {
position: absolute;
/*right: calc(var(--unit_x20) * -1);
top: calc(var(--unit_x20) * -1);*/
right: var(--unit_x3);
top: var(--unit_x3);
width: var(--unit_x25);
height: var(--unit_x25);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.tri_popUp .closeCross {
width: var(--unit_x10);
height: var(--unit_x10);
fill: #fff;
}
.triPopUp_darkenbg {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 49999;
display: none;
background-color: var(--col_pd90_50a);
}
@media only screen and (max-width: 768px) {
.tri_popUp {
left: 0px;
top: 0px;
width: 100%;
height: 100%;
margin: 0px !important;
max-height: inherit !important;
}
.tri_popUp .content {
max-height: inherit !important;
}
}
.triChip_darkenbg {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 49999;
display: none;
background-color: var(--col_pd90_50a);
}
/* QuickForm Boxes */
.quickFormBox {
width: 100%;
max-width: var(--contentMaxWidth);
margin: 0px auto;
text-align: center;
color: var(--col_white);
-webkit-transition: height 2.75s ease-in-out;
-moz-transition: height 2.75s ease-in-out;
-ms-transition: height 2.75s ease-in-out;
-o-transition: height 2.75s ease-in-out;
transition: height 2.75s ease-in-out;
}
.quickFormBox .subHeadline {
font-family: 'RobotoMono';
max-width: var(--contentMaxWidth);
color: var(--col_pl10);
text-transform: uppercase;
font-weight: normal;
letter-spacing: calc(var(--unit_x28)*0.15);
font-size: var(--unit_x28);
line-height: calc(var(--unit_x28) * 1.25);
margin: 0px auto;
margin-bottom: var(--unit_x8);
}
.quickFormBox .body {
/*max-width: 470px;*/
font-size: var(--unit_x14);
line-height: calc(var(--unit_x14) * 1.25);
margin: 0px auto;
margin-bottom: var(--unit_x14);
}
.quickFormBox .stepElms .input_select,
.quickFormBox .stepElms .input_text,
.quickFormBox .stepElms .input_textarea,
.quickFormBox .nextStepBtn,
.quickFormBox .progressBarSteps {
max-width: var(--unit_x350);
margin: 0px auto;
}
.quickFormBox .button {
width: 100%;
font-size: var(--unit_x16);
line-height: calc(var(--unit_x16) * 1.25);
margin: 0px auto;
margin-top: var(--unit_x16);
margin-bottom: var(--unit_x16);
}
/* jUQery Datepicker Style */
.jquery-datepicker__panel {
background-color: rgb(240,242,242);
}
.jquery-datepicker__panel .jquery-datepicker__title span {
color: rgb(15,23,32);
}
.jquery-datepicker__panel span {
color: rgb(15,23,32);
}
.jquery-datepicker__day {
cursor: pointer;
}
.jquery-datepicker__day.-is--disabled {
opacity: 0.3;
}
.jquery-datepicker__prev .fa-chevron-left,
.jquery-datepicker__next .fa-chevron-right { line-height: 1em; cursor: pointer; }
.jquery-datepicker__prev .fa-chevron-left::after {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E");
}
.jquery-datepicker__next .fa-chevron-right::after {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E");
}
/* Header */
.headerElement {
position: fixed;
width: 100%;
z-index: 1000;
top: 0px;
left: 0px;
height: var(--unit_x56);
display: flex;
justify-content: space-between;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
align-items: center;
padding-left: var(--unit_x26);
padding-right: var(--unit_x26);
/*background-color: var(--col_headerBG);*/
/*box-shadow: 0px 3px 6px var(--col_headerShadow);*/
/*background: var(--col_headerBG);*/
}
.headerElement > div {
}
.headerElement .left, .headerElement .right {
width: 33%;
height: 100%;
}
.headerElement .left {
display: flex;
align-content: center;
align-items: center;
justify-content: flex-start;
}
.headerElement .middle {
flex-grow: 1;
}
.headerElement .lightMode_switch_box {
display: flex;
align-items: center;
justify-content: flex-start;
}
.headerElement .lightMode_switch_box .colorModeLabelTxt {
margin-right: var(--unit_x10);
}
.headerElement .lightMode_switch_box .thumb {
display: flex;
justify-content: center;
align-items: center;
}
.headerElement .lightMode_switch_box .svgOuter {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.headerElement .lightMode_switch_box .svgOuter svg {
color: var(--col_pd100);
}
.headerElement .lightMode_switch_box .svgOuter:nth-child(2) {
display:none;
}
@media only screen and (max-width: 768px) {
.headerElement .lightMode_switch_box label {
display: none;
}
.headerElement .lightMode_switch_box svg {
display: inline-block;
}
}
.switchColorModeWaitingScreen {
position: fixed;
left: -10%;
top: -10%;
width: 120%;
height: 120%;
background-color: var(--col_pd90);
z-index: 50100;
display: none;
}
.headerElement > div:nth-child(3) {
display: flex;
align-items: center;
justify-content: flex-end;
}
.headerElement .logoContainer {
height: 100%;
/*background-image: url(../img/logo.png);*/
background-size: var(--unit_x132); auto;
background-repeat: no-repeat;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
}
.headerElement .logoContainer svg {
height: var(--unit_x29);
width: auto;
}
.headerElement .languageSelector {
;
}
.headerElement .header_mode_icon_r {
display: none;
}
.headerElement .mainMenuHitbox {
height: 100%;
display: flex;
align-content: center;
align-items: center;
flex-direction: row;
}
.headerElement .toggleMainMenu {
display: flex;
align-items: center;
justify-content: flex-start;
text-align: left;
width: 20%;
cursor: pointer;
}
.headerElement .toggleMainMenu .threebar {
cursor: pointer;
}
.headerElement .toggleMainMenu .threebar .bar {
width: 30px;
height: 2px;
background: var(--col_pr60);
margin-bottom: 7px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.headerElement .toggleMainMenu .threebar .bar:nth-child(1) {
transform-origin: 50% !important;
}
.headerElement .toggleMainMenu .threebar .bar:nth-child(2) {
transform-origin: 50% !important;
}
.headerElement .toggleMainMenu .threebar .bar:nth-child(3) {
margin-bottom: 0px;
}
.headerElement .toggleMainMenu .threebar.cross .bar:nth-child(1) {
transform: translateY(12px) rotate(45deg) !important;
}
.headerElement .toggleMainMenu .threebar.cross .bar:nth-child(2) {
opacity: 0 !important;
margin-left: -1000%;
}
.headerElement .toggleMainMenu .threebar.cross .bar:nth-child(3) {
transform: translateY(-6px) rotate(-45deg) !important;
}
.headerElement .toggleMainMenu .label {
display: inline;
font-size: var(--unit_x12);
color: var(--col_pl10);
}
.headerElement .toggleMainMenu .threebar .bar:nth-child(1) {
transform-origin: 50% !important;
}
.headerElement .toggleMainMenu .threebar .bar:nth-child(3) {
margin-bottom: 0px;
}
.headerElement .toggleMainMenu .label {
display: inline;
margin-right: 10px;
}
.headerElement .toggleMainMenu .threebar {
cursor: pointer;
}
/* Own Scroll Bar */
.triScrollBar {
/*border: 1px orange solid;
position: relative;
padding-right: 15px;*/
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.triScrollBar::-webkit-scrollbar {
display: none;
}
.triScrollBar::after {
/*border: 1px red solid;
width: 5px;
height: 100%;
content:'';
position:absolute;
right: 0px;
top: 0px;*/
}
/* Footer */
.footerElement {
position: relative;
width: 100%;
z-index: 1000;
bottom: 0px;
left: 0px;
padding: 0px var(--unit_x9);
margin: var(--unit_x80) auto 0vh auto;
color: var(--col_footerGray);
font-size: var(--unit_x14);
background-color: var(--col_pd90);
/*box-shadow: 0px -3px 6px var(--col_headerShadow);*/
padding-left: var(--unit_x18);
padding-right: var(--unit_x18);
z-index: 3;
}
.footerElement .footTexts {
max-width: var(--contentMaxWidth);
font-size: var(--unit_x10);
line-height: calc(var(--unit_x10) * 1.125);
margin: 0px auto;
}
.footerElement .footerMenu {
font-size: var(--unit_x14);
margin-top: var(--unit_x44);
margin-bottom: var(--unit_x44);
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
}
.footerElement .footerMenu .block {
margin-bottom: var(--unit_x25);
break-inside: avoid-column;
}
.footerElement .footerMenu .block .main {
font-size: var(--unit_x12);
line-height: calc(var(--unit_x12) * 1.125);
font-weight: bold;
margin-bottom: var(--unit_x12);
}
.footerElement .footerMenu .block .elm {
font-size: var(--unit_x10);
line-height: calc(var(--unit_x12) * 1.125);
margin-bottom: var(--unit_x8);
font-weight: 300;
}
@media only screen and (min-width: 768px) {
.footerElement .footerMenu {
font-size: var(--unit_x14);
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
}
}
.footerElement .hr {
width: 100%;
background-color: var(--col_footerGray_20a);
height: var(--unit_x1);
/*max-width: 1500px;*/
margin: var(--unit_x18) auto;
}
.footerElement .lastLine {
max-width: var(--contentMaxWidth);
margin: 0px auto;
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: 1fr;
padding-bottom: var(--unit_x18);
}
.footerElement .lastLine > div:first-child {
text-align: left;
}
.footerElement .lastLine > div:last-child {
text-align: right;
}
.footerElement .lastLine .lastLineLinks {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
@media only screen and (max-width: 1350px) {
.footerElement {
padding: 1vh var(--unit_x18);
}
.footerElement .lastLine {
max-width: var(--contentMaxWidth);
margin: 0px auto;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
justify-items: center;
}
.footerElement .lastLine > div:first-child {
grid-row-start: 2;
grid-row-end: 3;
text-align: center;
margin-bottom: 2vh;
}
.footerElement .lastLineLinks {
width: 100%;
max-width: 600px;
grid-row-start: 1;
grid-row-end: 2;
}
.footerElement .lastLine > div:last-child {
display: none;
}
}
/* Footline Nav Scroller */
.nav_scrollElm {
position: fixed;
width: auto;
bottom: 0px;
left: 50%;
text-align: center;
text-transform: uppercase;
font-size: var(--unit_x10);
letter-spacing: calc(var(--unit_x10)*0.4);
color: var(--col_pl0);
cursor: pointer;
display: none;
}
.nav_scrollElm .bg {
padding: 5px 10px;
border-radius: 15px;
border: 1px var(--col_white) solid;
/*color: #f2f4f4;*/
/*background-color: var(--col_pd80);*/
background: transparent;
font-family: 'RobotoMono';
display: flex;
justify-content: center;
align-items: center;
align-content: center;
flex-wrap: nowrap;
flex-direction: row;
}
.nav_scrollElm .line {
position: relative;
width: var(--unit_x3);
display: flex;
flex-wrap: wrap;
flex-direction: row;
height: var(--unit_x50);
margin: 15px auto 0px auto;
overflow: hidden;
}
.nav_scrollElm .line .block {
width: var(--unit_x3);
height: var(--unit_x3);
background-color: var(--col_pl0);
animation: blinkNavScrollBlock ease-in-out 3.5s;
-webkit-animation: blinkNavScrollBlock ease-in-out 3.5s;
-moz-animation: blinkNavScrollBlock ease-in-out 3.5s;
-o-animation: blinkNavScrollBlock ease-in-out 3.5s;
-ms-animation: blinkNavScrollBlock ease-in-out 3.5s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
}
.nav_scrollElm .line .block:nth-child(1) {
opacity: 0;
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-o-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
}
.nav_scrollElm .line .block:nth-child(2) {
opacity: 0;
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
-o-animation-delay: 0.5s;
-ms-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.nav_scrollElm .line .block:nth-child(3) {
opacity: 0;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
-ms-animation-delay: 1s;
animation-delay: 1s;
}
.nav_scrollElm .line .block:nth-child(4) {
opacity: 0;
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
-o-animation-delay: 1.5s;
-ms-animation-delay: 1.5s;
animation-delay: 1.5s;
}
.nav_scrollElm .line .block:nth-child(5) {
opacity: 0;
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
-ms-animation-delay: 2s;
animation-delay: 2s;
}
.nav_scrollElm .line .block:nth-child(6) {
opacity: 0;
-webkit-animation-delay: 2.5s;
-moz-animation-delay: 2.5s;
-o-animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
animation-delay: 2.5s;
}
@media (max-height: 720px) and (max-width: 628px) {
.nav_scrollElm {
display: none !important;
}
}
@keyframes blinkNavScrollBlock {
0% { opacity: 0; }
20% { opacity: 1; }
50% { opacity: 0.5; }
80% { opacity: 0; }
100% { opacity: 0; }
}
/* Nav Speedometer */
#nav_speedometer {
display: flex;
position: fixed;
left: -100px;
top: 50%;
margin-top: -40px;
color: var(--col_white);
width: auto;
height: 60px;
text-transform: uppercase;
align-items: center;
justify-content: space-between;
flex-direction: row;
transform: rotate(-90deg);
z-index: 998;
}
#nav_speedometer div {
margin-right:20px;
width: 120px;
}
#nav_speedometer div:last-child {
margin-right: 0px;
}
#nav_speedometer .line {
background-color: var(--col_white);
width: 80px;
height: 1px;
}
#nav_speedometer .imgElm {
height: 50px;
width: 50px;
min-height: 40px;
min-width: 40px;
transform: rotate(90deg);
}
#nav_speedometer .note {
font-weight: normal;
font-size: var(--unit_x10);
letter-spacing: calc(var(--unit_x10)*0.4);
color: var(--col_pl0);
white-space: nowrap;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
#nav_speedometer .note.active {
transform: scaleY(0);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
#nav_speedometer #speedometerArrow {
transform: rotate(-130deg);
transform-origin: 51% 54%;
-webkit-transition: all 1.5s ease;
-moz-transition: all 1.5s ease;
-o-transition: all 1.5s ease;
transition: all 1.5s ease;
}
#nav_speedometer #speedometerArrow.active {
transform: rotate(30deg);
animation: none;
-webkit-animation: none;
-moz-animation: none;
-o-animation: none;
-ms-animation: none;
-webkit-transition: all 1.5s ease;
-moz-transition: all 1.5s ease;
-o-transition: all 1.5s ease;
transition: all 1.5s ease;
}
#nav_speedometer #speedometerGearOuter {
transform-origin: 50% 50%;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#nav_speedometer #speedometerGearOuter.active {
transform: scale(0.01);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
@media only screen and (max-width: 1400px) {
#nav_speedometer {
display: none;
}
}
@keyframes nav_speedometer_arrow_IdleThrottle_frames {
0% { transform: rotate(-30deg); }
50% { transform: rotate(-35deg); }
100% { transform: rotate(-30deg); }
}
@-moz-keyframes nav_speedometer_arrow_IdleThrottle_frames {
0% { transform: rotate(-30deg); }
50% { transform: rotate(-35deg); }
100% { transform: rotate(-30deg); }
}
@-webkit-keyframes nav_speedometer_arrow_IdleThrottle_frames {
0% { transform: rotate(-30deg); }
50% { transform: rotate(-35deg); }
100% { transform: rotate(-30deg); }
}
@-o-keyframes nav_speedometer_arrow_IdleThrottle_frames {
0% { transform: rotate(-30deg); }
50% { transform: rotate(-35deg); }
100% { transform: rotate(-30deg); }
}
@-ms-keyframes nav_speedometer_arrow_IdleThrottle_frames {
0% { transform: rotate(-30deg); }
50% { transform: rotate(-35deg); }
100% { transform: rotate(-30deg); }
}
/* Background Tiles */
.backgroundTilesContainer {
position: fixed;
display: inline-flex;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
}
.backgroundTilesContainer .backgroundTile {
margin: var(--unit_x4);
width: var(--unit_x24);
height: var(--unit_x24);
border-radius: var(--unit_x2);
background-color: transparent;
opacity: 0;
}
.backgroundTilesContainer .backgroundTile.animation {
animation: backgroundTileAnimation_frames ease-in-out 2s;
-webkit-animation: backgroundTileAnimation_frames ease-in-out 2s;
-moz-animation: backgroundTileAnimation_frames ease-in-out 2s;
-o-animation: backgroundTileAnimation_frames ease-in-out 2s;
-ms-animation: backgroundTileAnimation_frames ease-in-out 2s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
}
@keyframes backgroundTileAnimation_frames {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
@-moz-keyframes backgroundTileAnimation_frames {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
@-webkit-keyframes backgroundTileAnimation_frames {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
@-o-keyframes backgroundTileAnimation_frames {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
@-ms-keyframes backgroundTileAnimation_frames {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
/* HeadlineAnimation */
.headlineAnimation text {
display: block;
opacity: 0.0001;
fill: var(--col_white);
fill-opacity: 0;
/*opacity: 0.0001
border: 1px red solid;*/
/*
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 3s ease-in-out forwards, filling 1s 1s ease-in-out forwards;
*/
}
.headlineAnimation.active text {
opacity: 1;
display: block;
stroke-dasharray: 670;
stroke-dashoffset: 670;
animation: dash 3s 0s ease-in-out forwards, filling 1s 1s ease-in-out forwards;
-webkit-animation: dash 3s 0s ease-in-out forwards, filling 1s 1s ease-in-out forwards;
-moz-animation: dash 3s 0s ease-in-out forwards, filling 1s 1s ease-in-out forwards;
-o-animation: dash 3s 0s ease-in-out forwards, filling 1s 1s ease-in-out forwards;
-ms-animation: dash 3s 0s ease-in-out forwards, filling 1s 1s ease-in-out forwards;
/* Special handling for dafary becaus not supported shorthand definition */
/*-webkit-animation-name: dash;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: forwards;*/
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
@keyframes filling {
from {
fill: var(--col_white);
fill-opacity: 0;
}
to {
fill: var(--col_white);
fill-opacity: 1;
}
}
@-webkit-keyframes dash {
to {
stroke-dashoffset: 0;
}
}
@-webkit-keyframes filling {
from {
fill: var(--col_white);
fill-opacity: 0;
}
to {
fill: var(--col_white);
fill-opacity: 1;
}
}
@-moz-keyframes dash {
to {
stroke-dashoffset: 0;
}
}
@-moz-keyframes filling {
from {
fill: var(--col_white);
fill-opacity: 0;
}
to {
fill: var(--col_white);
fill-opacity: 1;
}
}
@-o-keyframes dash {
to {
stroke-dashoffset: 0;
}
}
@-o-keyframes filling {
from {
fill: var(--col_white);
fill-opacity: 0;
}
to {
fill: var(--col_white);
fill-opacity: 1;
}
}
@-ms-keyframes dash {
to {
stroke-dashoffset: 0;
}
}
@-ms-keyframes filling {
from {
fill: var(--col_white);
fill-opacity: 0;
}
to {
fill: var(--col_white);
fill-opacity: 1;
}
}
/* IE Disable Screen */
#ieDisableScreen {
background-color: #000;
color: #fff;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 10000;
text-align: center;
}
#ieDisableScreen .arghhTxt {
margin-top: 15%;
}
@media only screen and (min-width: 1920px) {
.maxWidth_u1 {
max-width: 66.66666666667% !important;
}
.maxWidth_u1_inner { /* When its Inner Cotnainer with --contentMaxWithh */
max-width: 88.88888888889% !important;
}
.maxWidth_u2 {
max-width: 56.25% !important;
}
.maxWidth_u2_inner {
max-width: 75% !important;
}
}
.boxesBox {
height: 100%;
display: flex;
align-items: center;
align-content: center;
flex-wrap: wrap;
gap: var(--boxGapps); /* Not working in Safari... */
}
.dNone {
display: none;
}
.dNoneImp {
display: none !important;
}
.opac0 {
opacity: 0;
}
.opac0Imp {
opacity: 0 !important;
}
@-webkit-keyframes pulseBorder_blue {
0% { -webkit-box-shadow: 0 0 0 0 var(--col_tb60_40a); }
70% { -webkit-box-shadow: 0 0 0 10px var(--col_tb60_0a); }
100% { -webkit-box-shadow: 0 0 0 0 var(--col_tb60_0a); }
}
@keyframes pulseBorder_blue {
0% { -moz-box-shadow: 0 0 0 0 var(--col_tb60_40a); box-shadow: 0 0 0 0 var(--col_tb60_40a); }
70% { -moz-box-shadow: 0 0 0 10px var(--col_tb60_0a); box-shadow: 0 0 0 10px var(--col_tb60_0a); }
100% { -moz-box-shadow: 0 0 0 0 var(--col_tb60_0a); box-shadow: 0 0 0 0 var(--col_tb60_0a); }
}
@-webkit-keyframes pulseBorder_green {
0% { -webkit-box-shadow: 0 0 0 0 var(--col_tg60_40a); }
70% { -webkit-box-shadow: 0 0 0 10px var(--col_tg60_0a); }
100% { -webkit-box-shadow: 0 0 0 0 var(--col_tg60_0a); }
}
@keyframes pulseBorder_green {
0% { -moz-box-shadow: 0 0 0 0 var(--col_tg60_40a); box-shadow: 0 0 0 0 var(--col_tg60_40a); }
70% { -moz-box-shadow: 0 0 0 10px var(--col_tg60_0a); box-shadow: 0 0 0 10px var(--col_tg60_0a); }
100% { -moz-box-shadow: 0 0 0 0 var(--col_tg60_0a); box-shadow: 0 0 0 0 var(--col_tg60_0a); }
}
@-webkit-keyframes pulseBorder_red {
0% { -webkit-box-shadow: 0 0 0 0 var(--col_pr60_40a); }
70% { -webkit-box-shadow: 0 0 0 10px var(--col_pr60_0a); }
100% { -webkit-box-shadow: 0 0 0 0 var(--col_pr60_0a); }
}
@keyframes pulseBorder_red {
0% { -moz-box-shadow: 0 0 0 0 var(--col_pr60_40a); box-shadow: 0 0 0 0 var(--col_pr60_40a); }
70% { -moz-box-shadow: 0 0 0 10px var(--col_pr60_0a); box-shadow: 0 0 0 10px var(--col_pr60_0a); }
100% { -moz-box-shadow: 0 0 0 0 var(--col_pr60_0a); box-shadow: 0 0 0 0 var(--col_pr60_0a); }
}
@-webkit-keyframes pulseBorder_orange {
0% { -webkit-box-shadow: 0 0 0 0 rgba(255,109,54,0.4); }
70% { -webkit-box-shadow: 0 0 0 10px rgba(255,109,54,0); }
100% { -webkit-box-shadow: 0 0 0 0 rgba(255,109,54,0); }
}
@keyframes pulseBorder_orange {
0% { -moz-box-shadow: 0 0 0 0 rgba(255,109,54,0.4); box-shadow: 0 0 0 0 rgba(255,109,54,0.4); }
70% { -moz-box-shadow: 0 0 0 10px rgba(255,109,54,0); box-shadow: 0 0 0 10px rgba(255,109,54,0); }
100% { -moz-box-shadow: 0 0 0 0 rgba(255,109,54,0); box-shadow: 0 0 0 0 rgba(255,109,54,0); }
}
@-webkit-keyframes pulseBorder_gold {
0% { -webkit-box-shadow: 0 0 0 0 rgba(174,161,151,0.4); }
70% { -webkit-box-shadow: 0 0 0 10px rgba(174,161,151,0); }
100% { -webkit-box-shadow: 0 0 0 0 rgba(174,161,151,0); }
}
@keyframes pulseBorder_gold {
0% { -moz-box-shadow: 0 0 0 0 rgba(174,161,151,0.4); box-shadow: 0 0 0 0 rgba(174,161,151,0.4); }
70% { -moz-box-shadow: 0 0 0 10px rgba(174,161,151,0); box-shadow: 0 0 0 10px rgba(174,161,151,0); }
100% { -moz-box-shadow: 0 0 0 0 rgba(174,161,151,0); box-shadow: 0 0 0 0 rgba(174,161,151,0); }
}
/* Raster Sizing (For Mobile) */
@media only screen and (max-width: 768px) {
.visNotOnMob {
display: none !important;
}
}
.mt-8-OnMob {
margin-top: var(--unit_x8);
}
.mt-12-OnMob {
margin-top: var(--unit_x12);
}
.bx1of1, .bx6of6, .bx12of12, .bx24of24 {
width: 100%;
}
.bx3of4, .bx9of12 {
width: calc(75% - (var(--boxGapps)));
}
.bx2of3, .bx8of12 {
width: calc(66% - (var(--boxGapps)));
}
.bx3of5 {
/*width: calc((60%) - (var(--boxGapps)));*/
width: 60%;
}
.bx1of2, .bx3of6, .bx6of12, .bx12of24 {
width: calc((50%) - calc(var(--boxGapps)/2));
}
.bx2of5 {
width: calc((40%) - (var(--boxGapps)));
}
.bx1of3, .bx2of6, .bx4of12, .bx8of24 {
width: calc(33% - (var(--boxGapps)/2));
}
.bx3of12, .bx6of24 {
width: calc(25% - (var(--boxGapps)));
}
.bx2of10, .bx1of5 {
width: calc((20%) - (var(--boxGapps)));
}
.bx3of24 {
width: 12.5%;
}
.bx2of12, .bx1of6 {
width: calc((8.334%*2) - (var(--boxGapps)));
}
.px2of12 {
padding-left: calc(8.334%);
padding-right: calc(8.334%);
}
/* Raster Sizing (For Tablet / Small Desktop) */
@media only screen and (min-width: 768px) {
.mt-8-OnMob {
margin-top: initial;
}
.mt-12-OnMob {
margin-top: initial;
}
.bx1of1_md, .bx6of6_md, .bx12of12_md, .bx24of24_md {
width: 100%;
}
.bx3of4_md, .bx9of12_md {
width: calc(75% - (var(--boxGapps)));
}
.bx16of24_md {
width: calc(67.13% - calc(var(--boxGapps)/2));
}
.bx1of3_md, .bx4of12_md, .bx8of24_md {
width: calc(31% - calc(var(--boxGapps)/2));
}
.bx2of10_md, .bx1of5_md {
width: calc((20%) - (var(--boxGapps)));
}
.bx2of12_md, .bx1of6_md {
width: calc((8.334%*2) - (var(--boxGapps)));
}
.bx2of5_md {
width: calc((40%) - (var(--boxGapps)));
}
.bx3of12_md, .bx6of24_md {
width: calc(25% - (var(--boxGapps)));
}
.bx1of3_md, .bx2of6_md, .bx4of12_md, .bx8of24_md {
width: calc(33% - (var(--boxGapps)/2));
}
.bx7of12_md {
width: calc(58.3333333333% - (var(--boxGapps)));
}
.bx8of12_md {
width: calc(66% - (var(--boxGapps)));
}
.bx3of5_md {
/*width: calc((60%) - (var(--boxGapps)));*/
width: 60%;
}
.bx1of2_md, .bx3of6_md, .bx6of12_md, .bx12of24_md {
width: 50%;
}
.px2of12_md {
padding-left: calc(8.334%);
padding-right: calc(8.334%);
}
}
/* Raster Sizing (For Normal Desktop) */
@media only screen and (max-width: 1300px) {
.visNotOnD {
display: none !important;
}
}
@media only screen and (min-width: 1300px) {
.bx1of1_d, .bx6of6_d, .bx12of12_d, .bx24of24_d {
width: 100%;
}
.bx3of4_d, .bx9of12_d {
width: calc(75% - (var(--boxGapps)));
}
.bx16of24_d {
width: calc(67.13% - calc(var(--boxGapps)/2));
}
.bx1of3_d, .bx4of12_d, .bx8of24_d {
width: calc(33% - (var(--boxGapps)/2));
}
.bx2of10_d, .bx1of5_d {
width: calc((20%) - (var(--boxGapps)));
}
.bx2of12_d, .bx1of6_d {
/*width: calc((8.334%*2) - (var(--boxGapps)));*/
width: calc((8.45%*2) - (var(--boxGapps)));
}
.bx2of5_d {
width: 40%;
}
.bx3of12_d, .bx6of24_d {
/*width: calc(25% - (var(--boxGapps)));*/
width: calc(25.35% - (var(--boxGapps)));
}
.bx8of12_d, .bx16of24_d {
width: calc(66% - (var(--boxGapps)));
}
.bx3of5_d {
/*width: calc((60%) - (var(--boxGapps)));*/
width: 60%;
}
.bx1of2_d, .bx3of6_d, .bx6of12_d, .bx12of24_d {
width: calc((50%) - (var(--boxGapps)/2));
}
.px2of12_d {
padding-left: calc(8.334%);
padding-right: calc(8.334%);
}
}
/* Raster Sizing (For Big Desktop) */
@media only screen and (min-width: 1920px) {
.bx1of1_bd, .bx6of6_bd, .bx12of12_bd, .bx24of24_bd {
width: 100%;
}
.bx3of4_bd, .bx9of12_bd {
width: calc(75% - (var(--boxGapps)));
}
.bx1of3_bd, .bx4of12_bd, .bx8of24_bd {
width: calc(33% - (var(--boxGapps)/2));
}
.bx2of10_bd, .bx1of5_bd {
width: calc((20%) - (var(--boxGapps)));
}
.bx2of12_bd, .bx1of6_bd {
width: calc((8.334%*2) - (var(--boxGapps)));
}
.bx2of5_bd {
width: calc((40%) - (var(--boxGapps)));
}
.bx3of12_bd, .bx6of24_bd {
width: calc(25% - (var(--boxGapps)));
}
.bx3of5_bd {
/*width: calc((60%) - (var(--boxGapps)));*/
width: 60%;
}
.bx1of2_bd, .bx3of6_bd, .bx6of12_bd, .bx12of24_bd {
width: calc((50%) - (var(--boxGapps)/2));
}
.px2of12_bd {
/*padding-left: calc(8.334%);
padding-right: calc(8.334%);*/
}
.fz42_bd {
font-size: var(--unit_x42);
}
}