@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap');
html {
    --maintextColor:#525f7f;
    --headerColor:#0A2540;
    --accentColor:#635BFF;
    --altBgColor: #F5F7F7;
}
* { text-rendering: optimizeLegibility; }
h1, h2, h3, p { margin: 0; }
html, body { margin: 0; padding: 0; height: 100%; background-color: #ffffff; font-family: 'Montserrat', sans-serif; font-size: 16px; color: #525f7f; min-width: 320px; font-weight: 500; }
body { min-width: 320px; }
ul { margin: 0; }
a { color: #635BFF; transition: color 0.2s ease 0s; }
a:hover { color: var(--headerColor); }
h1 { color: var(--headerColor); font-size: 3rem; font-weight: 700; line-height: 1em; }
h2 { color: var(--headerColor); font-size: 2rem; font-weight: 600; margin-bottom: 0.5em; line-height: 1em; }
h3 { color: var(--headerColor); font-size: 1.2rem; font-weight: 700; margin-bottom: 0.5em; line-height: 1em; }
p { margin-bottom: 1rem; }

.b { font-weight: 700; }
.ta-c { text-align: center !important; }
.ta-r { text-align: right !important; }
.ta-l { text-align: left !important; }
.df { display: flex; }
.as-c { align-self: center; }
.ai-c { align-items: center; }
.jc-c { justify-content: center; }

.fs-s { font-size: 0.8rem; }
.fs-1 { font-size: 1rem; }
.fs-2 { font-size: 2rem; }
.fs-3 { font-size: 3rem; }

.accent { color: var(--accentColor); }

.app-root {  }
.app-header { display: flex; align-items: center; padding-top: 20px; padding-bottom: 20px; padding-left: 100px; padding-right: 100px; position: relative; z-index: 4; background-color: #ffffff; }
.app-header .logo { flex-basis: 150px; }
.app-header .nav { flex-grow: 1; }
.app-header .nav a, .app-header .nav span { text-decoration: none; color: #000000; }
.app-header .nav span { cursor: default; }
.app-header .nav a:hover { color: #635BFF; }
.nav-list { list-style-type: none; padding: 0; display: flex; margin-left: 50px; margin-right: 50px; font-size: 1rem; }
.nav-item { margin-left: 15px; margin-right: 15px; }
.popup-only { display: none; }
.nav-item-root-node { font-weight: 600; }
.app-header .contact { flex-basis: 150px; text-align: right; }

.toggle-nav { position: absolute; top: 50%; right: 20px; background: none; border: none; width: 1.1em; height: 1.1em; padding: 1.1em; margin-top: -1.2em; display: none; }
.toggle-nav .l { position: absolute; top: 50%; left: 50%; display: block; width: 1.5rem; height: 0.15rem; margin-left: -0.75rem; background-color: #000000; transition: transform .25s ease-in-out, opacity .1s ease-in-out 15ms; }
.toggle-nav .l:nth-child(1) { top: calc(50% - 0.4rem); }
.toggle-nav .l:nth-child(3) { top: calc(50% + 0.4rem); }
.toggle-nav.is-open .l:nth-child(1) { transform: translateY(.375rem) rotate(-45deg); }
.toggle-nav.is-open .l:nth-child(2) { transform: translateX(.5rem); opacity: 0; }
.toggle-nav.is-open .l:nth-child(3) { transform: translateY(-.375rem) rotate(45deg); }

.app-header-dropdown { position: absolute; left: 0; right: 0; background-color: #ffffff; border-top: 1px solid #F0F0F0; display: flex; padding-left: 100px; padding-right: 100px; overflow: hidden; height: 0; box-sizing: border-box; top: 100%; opacity: 0; transition: padding-bottom 0.2s ease-out 0s, padding-top 0.2s ease-out 0s, height 0.2s ease-out 0s, opacity 0.4s ease-out 0s; }
.app-header-dropdown.active { padding-top: 2rem; padding-bottom: 2rem; height: auto; opacity: 1; }
.app-header-dropdown a { color: #000000; text-decoration: none; }
.app-header-dropdown a:hover { color: #635BFF; }
.app-header-dropdown .item { flex: 0 0 25%; opacity: 0; transition: opacity 0.6s ease-out 0.2s; }
.app-header-dropdown.active .item { opacity: 1; }
.app-header-dropdown-shadow { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.2); z-index: 3; opacity: 0; visibility: hidden; transition: opacity 0.6s ease-out 0s, visibility 0.6s ease-out 0s; }
.app-header-dropdown-shadow.active { visibility: visible; opacity: 1; }


.app-workarea { position: relative; }
.app-footer { border-top: 1px solid #E3E3E3; margin-right: calc(150px - 1rem); margin-left: calc(150px - 1rem); padding-top: 2rem; padding-bottom: 2rem; display: flex; color: #999999; font-size: 0.7rem; }
.app-footer .info-1 { flex: 0 0 50%; }
.app-footer .info-1 ul { list-style: none; display: flex; padding: 0; }
.app-footer .info-1 ul li { padding-left: 30px; }
.app-footer .info-1 ul li::before { content: "|"; padding-right: 30px; }
.app-footer .info-1 ul li:first-child { padding-left: 0; }
.app-footer .info-1 ul li:first-child::before { content: ""; padding-right: 0px; }
.app-footer .info-2 { flex: 0 0 50%; text-align: right; }

.layout { position: relative; opacity: 1; transition: opacity 0.2s linear 0s; }
.layout.on {  }
.layout.off { position: absolute; opacity: 0; }

.layout-node { position: relative; }
.layout-node-wrapper { padding-left: calc(150px - 1rem); padding-right: calc(150px - 1rem); margin-top: 2rem; padding-top: 2rem; margin-bottom: 2rem; padding-bottom: 2rem; }
.layout-node .layout-node-mask-1 { margin-bottom: 8rem; }
.layout-node .layout-node-mask-2 { position: absolute; width: 100%; height: 100%; overflow: visible; }
.layout-node .layout-node-mask-bg { position: relative; height: 100%; width: 100%; top: 0; left: 0; transform-origin: 0% 0; transform: skewY(-5deg); background: var(--altBgColor); overflow: hidden; padding-top: 100px; }
.layout-node-masked { position: relative; z-index: 1; }
.layout-node-masked .layout-node-wrapper { margin-top: 8rem; }
.layout-node-short-caption { font-weight: 700; font-size: 0.8rem; color: #635BFF; text-align: center; margin-bottom: 0; }
.sticky-cnt { position: sticky; top: 1rem; }


.modal-layout { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: #ffffff; overflow-y: auto; z-index: 5; min-width: 320px; }
.modal-layout-wrapper { display: flex; min-height: 100%; }

/* Tooltops */
[data-title] { cursor: help; position: relative; }
[data-title]::after { content: attr(data-title); position: absolute; transition: all 0.3s cubic-bezier(0.15,1,0.8,0.85); display: block; text-align: center; width: 200px; font-size: 0.8em; background-color: #ffffff; box-shadow: 0 2px 10px rgba(0,0,0,0.3); z-index: 1; border-radius: 3px; padding: 10px; opacity: 0; visibility: hidden; transform: translateY(-50px) translateX(-50%); left: 50%; top: 100%; text-decoration: none; color: #666666; pointer-events: none; box-sizing: border-box; }
[data-title]:hover::after { opacity: 1; visibility: visible; transform:translateY(-0) translateX(-50%); }

/* Home page */
.header-hello { display: flex; height: 500px; margin-bottom: 100px; }
.header-hello-cnt-1 { display: flex; position: relative; flex: 0 0 40%; }
.header-hello-cnt-1 .wrapper { position: relative; left: 150px; align-self: center; flex: 0 0 130%; z-index: 2; }
.header-hello-cnt-1 .label { margin-bottom: 2rem; }
.header-hello-cnt-1 .label h1 { display: inline; background-color: #ffffff; font-size: 3rem; font-weight: 700; }
.header-hello-cnt-1 .label .synopsis { display: inline; background-color: #ffffff; font-size: 1.4rem; }
.header-hello-cnt-2 { flex: 0 0 60%; position: relative; }
.header-hello-cnt-2 img { width: 100%; border-top-left-radius: 1rem; border-bottom-left-radius: 1rem; object-fit: cover; height: 100%; position: relative; z-index: 1; }
.header-hello-cnt-2::after { content: ""; display: block; width: 100%; height: 100%; background-image: url(/static/images/angular-lines-pattern.jpg); background-repeat: no-repeat; background-position: bottom left; position: absolute; top: 50px; left: -50px; z-index: 0; border-top-left-radius: 1rem; border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; }

.stage-tile { display: block; position: relative; padding: 2rem; text-decoration: none; border: 1px solid #f0f0f0; border-radius: 6px; transition: border-color 0.3s ease-out 0s; height: 12rem; }
.stage-tile .bg { position: absolute; top: 0; left: 0; z-index: 0; bottom: 0; right: 0; }
.stage-tile .bg img { object-fit: cover; position: absolute; right: 0; top: 0; height: 100%; filter: grayscale(1) opacity(0.5); width: 50%; transition: filter 0.3s ease-out 0s; }
.stage-tile .title { font-size: 1.2rem; color: #635BFF; font-weight: 700; margin-bottom: 1rem; width: 50%; }
.stage-tile .description { color: #525f7f; font-size: 0.8rem; width: 50%; }
.stage-tile:hover { border-color: #635BFF; }
.stage-tile:hover .bg img { filter: none; }

.tech-logo { height: 50px; }

/* Contacts page */
.contacts-cnt-1 { flex: 0 0 60%; }
.contacts-cnt-1 .contacts-cnt-wrapper { padding-left: 10%; padding-right: 50px; padding-bottom: 50px; box-sizing: border-box; }
.contacts-header { display: flex; justify-content: space-between; align-items: center; padding-top: 40px; padding-bottom: 40px; }
.contacts-header .logo-cnt { width: 100px; }
.contacts-header .logo-cnt { width: 100px; text-align: right; }
.contacts-private-data-info { font-size: 0.7rem; color: #999999; margin-top: 1rem; text-align: center; }
.contacts-cnt-2 { flex: 0 0 40%; background-color: var(--altBgColor);  }
.contacts-cnt-2 .contacts-cnt-wrapper { padding-right: 10%; padding-left: 50px; box-sizing: border-box; }
.contacts-cnt-2 .quote { margin-top: 10rem; }
.contacts-cnt-2 .quote .icon { font-weight: 700; font-size: 6rem; height: 4rem; }
.contacts-cnt-2 .quote .text { font-weight: 600; font-size: 1.4rem;  }
.contacts-content .alt-contact { text-align: right; align-self: center; }

/* Prototyping and design */
.stages-timeline { position: sticky; top: 0; background-color: #ffffff; z-index: 1; padding-top: 0.6rem; padding-bottom: 1rem; }
.stages-timeline .stages { margin-left: 150px; margin-right: 150px; display: flex; }
.stages-timeline .stages .stage { flex: 0 0 20%; position: relative; z-index: 1; }
.stages-timeline .stages .stage .label { font-weight: 700; text-align: center; }
.stages-timeline .stages .stage .label a { color: var(--maintextColor); text-decoration: none; }
.stages-timeline .stages .stage .point { width: 1.2rem; height: 1.2rem; border-radius: 1.2rem; border: 1px solid #cccccc; transform: translateY(50%); background-color: #ffffff; transform: translateY(50%) translateX(-50%); left: 50%; position: relative; text-align: center; font-size: 0.8rem; line-height: 1.2rem; cursor: default; }
.stages-timeline .timeline { height: 3px; width: 100%; background-color: #E8E8E8; position: relative; top: -2px; z-index: 0; }

/* Other */
.header-top { display: flex; height: 500px; margin-bottom: 100px; position: relative; }
.header-top .txt { position: relative; margin-left: 150px; margin-right: 150px; z-index: 1; }
.header-top .bg { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 0; }
.header-top h1 { text-align: center; }
.header-top .bg img { width: 100%; height: 100%; object-fit: cover; }

.grecaptcha-badge { display: none !important; }

.icon-cnt { width: 90px; height: 90px; }
.icon-cnt .icon { object-fit: contain; width: 100%; height: 100%; }

.tiles-cnt { display: flex; flex-wrap: wrap; margin-left: -2rem; margin-right: -2rem; }

.tile-1 { display: block; box-sizing: border-box; flex: 0 0 100%; width: 100%; padding: 2rem; }

.tile-2 { display: block; box-sizing: border-box; flex: 0 0 50%; width: 50%; padding: 2rem; }
.tile-2 .icon-cnt { margin-bottom: 1rem; }
.tile-2 .icon-cnt img { margin-bottom: 1rem; }

.tile-3 { display: flex; align-items: center; flex: 0 0 50%; width: 50%; padding: 1rem;
    box-sizing: border-box; }
.tile-3 .icon-cnt { margin-right: 1rem; flex-shrink: inherit; }
.tile-3 .txt { font-weight: 700; flex: 1 1 0%; }

.tile-4 { display: block; width: 100%; margin-top: 3rem; margin-bottom: 3rem; background-color: var(--altBgColor); box-shadow: -10px 10px 55px rgba(0, 0, 0, 0.16); padding: 2rem; box-sizing: border-box; }
.tile-4 .logo-cnt { width: 100px; margin-bottom: 1rem; margin-left: auto; margin-right: auto; left: 0; right: 0; }
.tile-4 .logo-cnt .logo { width: 100%; }
.tile-4 .company { font-weight: 700; flex: 0 0 50%; width: 50%; color: var(--accentColor); }
.tile-4 .year { flex: 0 0 50%; width: 50%; text-align: right; }
.tile-4 .owners { margin-top: 1rem; margin-bottom: 1rem; }
.tile-4 .description { font-size: 0.8rem; }


.tile-5 { flex: 0 0 33.33%; width: 33.33%; display: flex; box-sizing: border-box; padding: 2rem;  }
.tile-5 .icon-cnt { flex: 0 0 90px; width: 90px; }
.tile-5 .text-cnt { padding-left: 20px; }
.tile-5 .text-cnt .title { font-weight: 600; font-size: 1.2rem; word-break: break-word; }
.tile-5 .text-cnt p { font-size: 0.8rem; }

.tile-6 { flex: 0 0 33.33%; width: 33.33%; padding: 2rem; box-sizing: border-box; }
.tile-6 .title { font-weight: bold; margin-bottom: 1rem; }

.tile-7 { display: block; box-sizing: border-box; flex: 0 0 50%; width: 50%; padding: 2rem; }
.tile-7 .icon-cnt { margin-bottom: 1rem; }

.accent-cnt { background-color: var(--altBgColor); box-shadow: -10px 10px 55px rgba(0, 0, 0, 0.16); padding: 2rem; }
.accent-image { width: 100%; vertical-align: middle; border-radius: 6px; }

.empty-cnt { height: 5.2rem; }

/* UI */
.ui-row { display: flex; flex-wrap: wrap; }
.ui-col { box-sizing: border-box; }
.ui-col-1 { width: 8.3333333333%; }
.ui-col-2 { width: 16.6666666667%; }
.ui-col-3 { width: 25%; }
.ui-col-4 { width: 33.3333333333%; }
.ui-col-5 { width: 41.6666666667%; }
.ui-col-6 { width: 50%; }
.ui-col-7 { width: 58.3333333333%; }
.ui-col-8 { width: 66.6666666667%; }
.ui-col-9 { width: 75%; }
.ui-col-10 { width: 83.3333333333%; }
.ui-col-11 { width: 91.6666666667%; }
.ui-col-12 { width: 100%; }

.ui-gap { padding-left: 1rem; padding-right: 1rem; padding-top: 1rem; padding-bottom: 1rem; }
.ui-gap2x { padding-left: 2rem; padding-right: 2rem; padding-top: 2rem; padding-bottom: 2rem; }
.ui-mb { margin-bottom: 0.5em; }
.ui-mb2x { margin-bottom: 1em; }
.ui-mb4x { margin-bottom: 2em; }

.ui-btn-o, .ui-btn-f { border: 2px solid #635BFF; cursor: pointer; display: inline-block; font-size: 1em; text-align: center; text-decoration: none; transition: background 0.3s ease 0s, color 0.3s ease 0s, border-color 0.3s ease 0s, transform 0.15s ease 0s; vertical-align: middle; font-family: 'Montserrat', sans-serif; box-sizing: border-box; padding: 0.5em 1em; margin: 0; outline: 0; font-weight: 500; user-select: none; border-radius: 6px; letter-spacing: -0.02em; box-shadow: 0 6px 12px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1); }
.ui-btn-o:hover, .ui-btn-f:hover {  transform: translateY(-1px); }
.ui-btn-o { color: #635BFF; background: transparent; }
.ui-btn-o:hover { background-color: #635BFF; color: #ffffff; }
.ui-btn-f { color: #ffffff; background-color: #635BFF; }
.ui-btn-f.preloader { background-image: url(/static/images/preloader.svg); background-repeat: no-repeat; background-position: center; }
.ui-btn-f:hover { border-color: #312CDE; background-color: #312CDE; color: #ffffff; }
.ui-btn-f:disabled { background-color: #ccc; border-color: #ccc; cursor: default; }

.ui-field { position: relative; margin-top: 1.5rem; }
.ui-textbox { font-family: inherit; font-size: 1rem; line-height: 1.7rem; margin: 0; box-sizing: border-box; width: 100%; padding: 5px 10px; border-radius: 6px; border: 2px solid #cccccc; }
.ui-textbox:focus { outline: none; border-color: #635BFF; }
.ui-textarea { font-family: inherit; font-size: 1rem; line-height: 1.7rem; margin: 0; box-sizing: border-box; width: 100%; padding: 5px 10px; border-radius: 6px; border: 2px solid #cccccc; resize: none; }
.ui-textarea:focus { outline: none; border-color: #635BFF; }
.ui-label { position: absolute; top: 0.7rem; left: 1rem; transition: font-size ease-out 0.1s 0s, top ease-out 0.1s 0s, color ease-out 0.1s 0s; color: #999999; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 90%; box-sizing: border-box; }
.ui-textbox:focus + .ui-label, .ui-textarea:focus + .ui-label { color: #635BFF; }
.ui-textbox:focus + .ui-label, .ui-textbox:not(:placeholder-shown) + .ui-label, .ui-textarea:focus + .ui-label, .ui-textarea:not(:placeholder-shown) + .ui-label { top: -0.4rem; font-size: 0.8rem; background-color: #ffffff; padding-left: 3px; padding-right: 3px; }

.ui-messagebox { margin-bottom: 20px; border-radius: 6px; overflow: hidden; color: #444444; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); }
.ui-messagebox .ui-success, .ui-messagebox .ui-notice, .ui-messagebox .ui-error { padding: 20px;  border-left-style: solid; border-left-width: 7px; }
.ui-success { background-color: #E7F4E7; border-left-color: #81C884; }
.ui-notice { background-color: #FFF2DB; border-left-color: #FDB74D; }
.ui-error { background-color: #FFE7E1; border-left-color: #FE8862; }


@media (max-width: 1300px) {
    .app-header { padding-left: 20px; padding-right: 20px; }
    .app-header .contact { flex-basis: 120px; }

    .header-hello-cnt-1 .wrapper { left: 50px; flex: 0 0 150%; }

    .layout-node-wrapper { padding-left: calc(50px - 1rem); padding-right: calc(50px - 1rem); }
    .app-footer { margin-left: calc(50px - 1rem); margin-right: calc(50px - 1rem); }

    .stages-timeline .stages { margin-left: 20px; margin-right: 20px; }
}

@media (max-width: 1140px) {
    .nav-list {  }
    .app-header .contact { font-size: 0.8rem; flex-basis: 90px; }

    .stages-timeline { display: none; }
}

@media (max-width: 1023px) {
    .app-header { border-bottom: 1px solid #E4E4E4; }
    .toggle-nav { display: block; }
    .popup-only { display: block; }
    .app-workarea { padding-top: 72px; }
    .app-header { position: fixed; left: 0; right: 0; }
    .app-header .contact { display: none; }
    .app-header .nav { background-color: #fff; position: fixed; top: 0; left: 0; bottom: 0; width: 100%; transform: translateY(-100%); padding-top: 71px; z-index: -1; border-top: 1px solid #E4E4E4; box-sizing: border-box; }
    .app-header .nav.is-open { transform: translateY(0); }
    .nav-list { margin-left: 20px; margin-right: 20px; flex-direction: column; }
    .nav-item { margin-left: 0; margin-right: 0; position: relative; }
    .nav-item a, .nav-item span { display: block; padding-top: 1em; padding-bottom: 1em; border-bottom: 1px solid #E4E4E4; }
    .app-header-dropdown { position: unset; display: block; padding-left: 20px; padding-right: 20px; }
    .app-header-dropdown.active { padding-top: 1rem; }

    .header-top .txt { margin-left: 50px; margin-right: 50px; }
    .header-hello-cnt-1 .wrapper { left: 20px; flex: 0 0 200%; }
    .layout-node-masked .layout-node-wrapper { margin-top: 6rem; }
    .layout-node-wrapper { padding-left: calc(20px - 0.5rem); padding-right: calc(20px - 0.5rem); }
    .tiles-cnt { margin-left: calc(20px - 0.5rem); margin-right: calc(20px - 0.5rem); }
    
    .stage-tile .title { width: 100%; }
    .stage-tile .bg img { object-fit: contain; object-position: bottom right; }

    .ui-mb4x { margin-bottom: 1rem; }
    .ui-gap { padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.5rem; padding-bottom: 0.5rem; }
    .ui-gap2x { padding-left: 1rem; padding-right: 1rem; padding-top: 1rem; padding-bottom: 1rem; }

    .app-footer .info-1 { flex-basis: unset; flex-grow: 1; }
    .app-footer .info-2 { flex-basis: 100px; }

    [data-title]::after { width: 140px; font-size: 0.7rem; }

    .modal-layout-wrapper { display: block; }
    .contacts-cnt-1 .contacts-cnt-wrapper { padding-left: 50px; }
    .contacts-cnt-2 .quote { margin-top: 1rem; }
    .contacts-cnt-2 .contacts-cnt-wrapper { padding-top: 1rem; padding-bottom: 1rem; }

    .tile-1 { padding-left: 1rem; padding-right: 1rem; }
    .tile-2 { width: 100%; flex: 0 0 100%; padding-left: 1rem; padding-right: 1rem; max-width: 320px; margin-left: auto; margin-right: auto; }
    .tile-5 { flex: 0 0 50%; width: 50%; padding: 1rem; }
    .tile-6 { padding-left: 1rem; padding-right: 1rem; flex: 0 0 50%; width: 50%; }
    .tile-7 { padding-left: 1rem; padding-right: 1rem; }

    .sticky-cnt { top: 5rem; }
       
}

@media (max-width: 767px) {

    html, body { font-size: 14px; }

    .header-hello { height: auto; flex-direction: column-reverse; margin-bottom: 50px; }
    .header-hello-cnt-1 { margin-top: -120px; }
    .header-hello-cnt-1 .wrapper { flex: unset; box-sizing: border-box; background-color: #ffffff; left: unset; width: 70%; margin: auto; text-align: center; padding-top: 2em; padding-left: 1em; padding-bottom: 2em; padding-right: 1em; box-shadow: 0 5px 10px rgba(0,0,0,0.05); border-radius: 6px; }
    .header-hello-cnt-1 .label h1 { font-size: 2em; background-color: unset; }
    .header-hello-cnt-1 .label .synopsis { display: block; margin-top: 1em; font-size: 1em; }
    .header-hello-cnt-2 img { border-top-left-radius: unset; border-bottom-left-radius: unset; }

    .layout-node-wrapper { padding-bottom: 0; }

    .contacts-cnt-1 .contacts-cnt-wrapper { padding-left: 20px; padding-right: 20px; }
    .contacts-cnt-2 .quote .text { font-size: 1.1rem; }
    .contacts-content .submit-btn { text-align: center; }
    .contacts-content .alt-contact { text-align: center; margin-top: 1rem; }

    .stage-tile { height: 8rem; }

    .tile-5 { width: 100%; flex-basis: 100%; max-width: 500px; margin-left: auto; margin-right: auto; }

    .wrap-reverse { flex-wrap: wrap-reverse; }

    /* UI */
    .ui-col-1 { flex: 0 0 100%; }
    .ui-col-2 { flex: 0 0 100%; }
    .ui-col-3 { flex: 0 0 100%; }
    .ui-col-4 { flex: 0 0 100%; }
    .ui-col-5 { flex: 0 0 100%; }
    .ui-col-6 { flex: 0 0 100%; }
    .ui-col-7 { flex: 0 0 100%; }
    .ui-col-8 { flex: 0 0 100%; }
    .ui-col-9 { flex: 0 0 100%; }
    .ui-col-10 { flex: 0 0 100%; }
    .ui-col-11 { flex: 0 0 100%; }
    .ui-col-12 { flex: 0 0 100%; }

}

@media (max-width: 600px) {
    .tile-3 { flex: 0 0 100%; width: 100%; }
}


@media (max-width: 480px) {

    html, body { font-size: 12px; }

    h2 { font-size: 1.5rem; }

    .header-top h1 { font-size: 2.4rem; }
    .header-top .txt { margin-left: 20px; margin-right: 20px; }

    .header-hello-cnt-1 { margin-top: -40px; }
    .header-hello-cnt-1 .wrapper { width: 90%; }

    .stage-tile { height: 13rem; padding-left: 1rem; padding-right: 1rem; }

    .layout-node-wrapper
    .layout-node-masked .layout-node-wrapper { margin-top: 2rem; }

    .fs-2 { font-size: 1.5rem; }

    .app-footer { display: block; margin-left: 10px; margin-right: 10px; }
    .app-footer .info-1 ul li { padding-left: 15px; }
    .app-footer .info-1 ul li::before { content: "|"; padding-right: 15px; }
    .app-footer .info-1 { margin-bottom: 1rem; }
    .app-footer .info-2 { text-align: left; }

    .tile-6 { padding-left: 1rem; padding-right: 1rem; flex: 0 0 100%; width: 100%; }
    .tile-7 { max-width: 320px; margin-left: auto; margin-right: auto; flex-basis: 100%; text-align: center; }
    .tile-7 .icon-cnt { margin-left: auto; margin-right: auto; }
}