/* App Font */
@font-face {
  font-family: 'LOS'; font-style: normal; font-weight: 300 900; font-display: swap; 
  font-named-instance: "Regular"; src: url('../fnt/nunitosans.woff2') format('woff2'); }

@font-face {
  font-family: 'LOS'; font-style: Italic; font-weight: 300 900; font-display: swap; 
  font-named-instance: "Italic"; src: url('../fnt/nunitosans-italic.woff2') format('woff2'); }

/* Base resets */
*, *::before,*::after { box-sizing: border-box; margin: 0; padding: 0; } 
html { overflow-y: scroll;	scroll-behavior: smooth; }
input, button, textarea, select, optgroup { font: inherit; }
button { overflow: visible; }  button, select { outline: none; text-transform: none; }
button, html input[type=button], input[type=reset], input[type=submit] { appearance: button; cursor: pointer; }
button[disabled], html input[disabled] { cursor: default; } textarea { overflow: auto; resize: vertical; }
ol { list-style: decimal; }  ul, li { list-style: none; } 
i { font-style: normal; }  q:before, q:after { content: ''; }
p { margin: 0 0 1.5rem 0; }  fieldset { border: 0; } .nd { display: none; }
img, picture { border: 0; max-width: 100%; height: auto; vertical-align: middle; font-style: italic; 
  background-repeat: no-repeat; background-size: cover; shape-margin: 0.75rem; } 

  
/* Root Vairables and Responsive Font Size defaults */
:root { 
  --bgScrollTrack: transparent;
  --bgScrollThumb: #0577c1;
  --custScroll: var(--bgScrollThumb) var(--bgScrollTrack);

  font-size: clamp(1rem, 0.8691rem + 0.5587vw, 1.1875rem);
  font-weight: 400; }

/* Custom Scrollbars */
::-webkit-scrollbar { margin-block: 2px; width: 0.42rem; }
::-webkit-scrollbar-track { background-color: var(--bgScrollTrack); }
::-webkit-scrollbar-thumb	{ background-color: var(--bgScrollThumb); border-radius: 0.5rem; border: 1px solid #ffffff; }

/* scrollbar for Firefox */
* { scrollbar-width: thin; scrollbar-color: var(--custScroll); }

/* selection */
::selection { background-color: rgba(210, 135, 235, 0.5); color: inherit; }

/* Global Defaults */
html, body {
  display: grid; position: relative; overflow: hidden; height: 100%; 
  color: #222d34; font-family: 'LOS', sans-serif; line-height: 1.5; 
  text-rendering: optimizeSpeed; font-variant-ligatures: normal; 
  background: rgb(159,211,253);
  background: linear-gradient(169deg, rgba(159,211,253,1) 0%, rgba(224,197,252,1) 100%); }

/* Links */
a {
  color: #0175bd; outline: none; transition: all 0.4s ease;
  text-decoration: none; background-color: transparent; }

a:active, a:hover {  
  color: #0395f0; outline: none; }

a:focus {
  outline: 0px dotted #22b0e8; }

/* Headings */
h1, h2 { color: #03415e; font-weight: 800; }
h3, h4 { color: #474747; font-weight: 600; }
h5, h6 { color: #474747; font-weight: 400; } 

h1 { font-size: 2.4rem; } h2 { font-size: 1.8rem; }
h3 { font-size: 1.5rem; } h4 { font-size: 1.2rem; }
h5 { font-size: 1rem; } h6 { font-size: 0.90rem; }

h1, h2, h3 { margin: 0 0 0.5rem; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }

/* Tables */
table { 
  width: 100%; border-collapse: collapse; border-spacing: 0; }

table tr th {
  font-weight: 400; text-align: left; background: #efefef; }

table th, table td {
  padding: 0.28rem; vertical-align: middle; border: 1px solid #ababab; }

tr:first-child th, tr:first-child td {
  border-top: 1px solid #e1f0e7; }  

tr:last-child th, tr:last-child td {
  border-bottom: 1px solid #e1f0e7; }

/* Zebra striping */
tr:nth-of-type(even) { 
  background: #e8fff2; }

/* Forms */
input[type="text"], input[type="password"], 
select, textarea {
  padding: 0.25rem; font-size: .92rem; color: #03415e;
  outline: 0; border: 0; border-radius: 0.25rem 0.25rem 0 0;
  transition: all 0.3s; border-bottom: 1px solid #d7dfe0; }

input:focus {
  border-bottom: 2px solid #24b59a; }

input[type="file"], input[type="file"]:focus {
  border: 0; }  

input[type=submit] {
  width: auto; overflow: visible; padding: 0.25rem 0.75rem; 
  color: #ebf0f2; font-weight: 400; text-transform: uppercase;  
  border-radius: 0.5rem; border: 0; cursor: pointer; background: #0064a4; }

input[type=button] {
  width: auto; overflow: visible; padding: 0.25rem 0.75rem; 
  color: #004342; font-weight: 400; border: 0; border-radius: 0.5rem; 
  cursor: pointer; background: #7cefed; }  

input::file-selector-button {
  padding: 0.25rem 0.5rem 0.3rem; margin: 0.25rem 0.5rem 0.25rem 0;
  color: #004342; font-size: 0.92rem; letter-spacing: 1px;
  cursor: pointer; border: 0; border-radius: 0.35rem; 
  background-color: #7cefed; }

select {
  padding-block: 0.25rem; width: auto; 
  color: #0064a5; background-color: #ffffff; }

abbr {
  padding: 0 0.5rem; color: #c0116b; font-weight: 500; 
  border-bottom: 1px dotted #086235; }

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
Apps layout & everything in it.. 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.grd-page {
  display: grid; margin: 8px; 
  grid-template-rows: 80px 1fr 48px;
  border-radius: 1rem; backdrop-filter: blur(5px);
  background-color: rgba(233, 238, 240, 0.60); 
}

header { 
  display: grid; margin: 8px 8px 0; padding: 0 16px;
  grid-template-columns: 135px 1fr; gap: 10px; 
  border-radius: 0.80rem 0.80rem 0 0; z-index: 3;
  background-color: rgba(255, 255, 255, 0.83);
}

.site-logo { display: grid; height: 72px;	}
.site-logo .los-logo {
  display: grid; align-content: center; 
  justify-content: center; font-size: 1.5rem;
}

.site-nav {
  display: grid; align-content: center; 
  justify-content: end;      
}

/* nav-header btn */
.site-nav .chk-top-nav { display: none; }
.site-nav .chk-top-nav:checked ~ .nav-header { max-height: 270px; }

/* nav-header icon */
.site-nav .cam-icon {
  display: none;

  @media (max-width: 767px) {
    display: grid; align-items: center; 
    justify-items: right; height: 71px; 
  }
}

@media (max-width: 767px) {
  .cam-icon label { display: block; padding: 18px 0 18px 16px; cursor: pointer; user-select: none; }
  .cam-icon .ico-menu {
    display: block; position: relative; 
    height: 3px; width: 30px; border-radius: 3px;
    transition: background 0.2s ease-out;
    background: #3c6e58;
  }

  .cam-icon .ico-menu:before,
  .cam-icon .ico-menu:after {
    display: block; position: absolute; 
    content: ""; height: 100%; width: 100%;		
    transition: all 0.2s ease-out; border-radius: 3px;		
    transition: all 0.2s ease-out; border-radius: 3px;		
    background: #3c6e58;
  }

  .cam-icon .ico-menu:before { top: 8px; }
  .cam-icon .ico-menu:after { top: -8px; }    
  .chk-top-nav:checked ~ .cam-icon .ico-menu:before,
  .chk-top-nav:checked ~ .cam-icon .ico-menu:after { top: 0; }
  .chk-top-nav:checked ~ .cam-icon .ico-menu { background: transparent; }
  .chk-top-nav:checked ~ .cam-icon .ico-menu:before { transform: rotate(-45deg); }
  .chk-top-nav:checked ~ .cam-icon .ico-menu:after { transform: rotate(45deg); }
}

/* top menu container */
.site-nav .nav-header {
  display: grid; max-height: none; overflow: hidden;
  grid-template-columns: repeat(5, auto);
  grid-template-rows: auto;
  gap: 20px; justify-content: right;     
  transition: max-height 0.2s ease-out;

  @media (max-width: 767px) {
    position: relative; top: -18px;
    grid-template-columns: auto; max-height: 0;
    grid-template-rows: repeat(5, auto); 
    gap: 9px; background-color: #faf6f2;
    box-shadow: 5px 5px 5px 0 rgba(199, 196, 193, 0.35); 
  }
}

.nav-header a {
  display: grid; padding: 3px 6px; justify-items: center; gap: 3px;
  color: #2f4858; font-weight: 650; font-size: 0.90rem; 

  @media (max-width: 767px) {
  width: 170px; grid-template-columns: 36px 1fr;
  gap: 6px; justify-items: start; align-items: center;
  }
}

@media (max-width: 767px) {      
.nav-header li { margin: 0 12px;}
.nav-header li:first-child { margin: 12px 12px 0;}
.nav-header li:last-child { margin: 0 12px 12px;}
}

.nav-header a i {
  text-align: center; width: 33px; height: 33px; 
  background-repeat: no-repeat; background-position: center center;
  background-size: 1.75rem; 
}

.ico-home { background-image: url(../uix/home.svg); }
.ico-los { background-image: url(../uix/los-ki.svg); }
.ico-solution { background-image: url(../uix/concept.svg); }
.ico-basis { background-image: url(../uix/prof.svg); }
.ico-contact { background-image: url(../uix/call.svg); }

.nav-header a:hover .ico-home { background-image: url(../uix/home.svg); }
.nav-header a:hover .ico-los { background-image: url(../uix/los-ki.svg); }
.nav-header a:hover .ico-solution { background-image: url(../uix/concept.svg); }
.nav-header a:hover .ico-basis { background-image: url(../uix/prof.svg); }
.nav-header a:hover .ico-contact { background-image: url(../uix/call.svg); }

.nav-header a:hover, .chk-top-nav:hover { background-color: #ffffff; }

.nav-header a.active { font-weight: bold; color: #8800b4; }

main {
  display: grid; overflow-y: scroll; margin: 0 8px;
  padding: 12px; height: calc(100svh - 144px);
  background-color: rgba(255, 255, 255, 0.72);
}

section {
  margin: 0 auto 1rem; padding: 12px;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, auto);
  grid-row-gap: 0.25rem; width: 85svw;

  @media (max-width: 1024px) {
    width: 90svw; padding: 0;
  }
}

section.active { 
  justify-content: start; align-content: start; 
  animation: fadeIn 0.3s ease-in-out; 
}

section h1 {
  padding: 1rem; text-wrap: balance;
 line-height: 1.3; border-radius: 1rem; 
 background-color: rgba(255, 255, 255, 0.5);
}

section h1 q {
  background: linear-gradient(to right, #30d08a 0%, #7732cd 100%);
  background-clip: text; -webkit-text-fill-color: transparent;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.hd-home { text-align: center; }

.sec-left {
  display: grid; padding: 1rem;  
  grid-template-columns: 35svw 1fr;
  grid-template-rows: 1fr;
  grid-gap: 1rem;
  border-radius: 1rem;
  background-color: rgba(255, 255, 255, 0.5);

  @media (max-width: 1024px) {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
}

.hd-home { text-align: center; }

.sec-right {
  display: grid; padding: 1rem;  
  grid-template-columns: 25svw 1fr;
  grid-template-rows: 1fr;
  grid-column-gap: 1rem;
  text-wrap: balance; border-radius: 1rem;
  background-color: rgba(255, 255, 255, 0.5);

  @media (max-width: 1024px) {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
}

.nav-buttons {
  margin-block: 0.75rem;
}

.nav-buttons a {
  display: inline-block; 
  padding: 0.5rem 1rem;
  color: #ffffff; font-weight: 600;
  border-radius: 1.5rem;
  background-color: #8800b4;
}



.img-left { text-align: left; 

  @media (max-width: 1024px) {
    text-align: center;
  }

}

.img-right { text-align: right; 

  @media (max-width: 1024px) {
    text-align: center;
  }

}

.sec-mid {
  padding: 1rem; text-wrap: balance; border-radius: 1rem;
  background-color: rgba(255, 255, 255, 0.5);
}

.lst-arrow li {
  margin-block-end: 0.5rem; padding-inline-start: 1.75rem;
  background-image:  url(../uix/los-arrow.svg);
  background-repeat: no-repeat;
  background-size: 1.25rem;
  background-position: 0 5px;
}

.lst-contact { margin-inline-start: 2rem; }

.lst-contact li {
  margin-block: 1rem; padding: 0 1.75rem;
  background-repeat: no-repeat;
  background-size: 1.25rem;
  background-position: 0 0;
}

li.ico-email {  background-image:  url(../uix/email.svg);  background-position: 0 4px;}
li.ico-map {  background-image:  url(../uix/map.svg);}
li.ico-call {  background-image:  url(../uix/call.svg);}


footer {
  display: grid; margin: 0 8px 8px; padding: 0 12px;
  grid-template-columns: 1fr 75px; gap: 10px;
  font-size: .84rem; align-items: center; 
  border-radius: 0 0 0.80rem 0.80rem;
  background-color: rgba(255, 255, 255, 0.83);
}

footer a { color: #6a3100; }
footer a:hover { color: #ec5524; }

.nav-footer {
  display: grid; gap: 10px; 
  grid-auto-flow: column;
}

.nav-footer li {
  padding: 2px; width: 32px; height: 32px; 
}

.nav-footer li a {
  position: relative; overflow: hidden; display: inline-block; 
  text-indent: -50rem; width: 28px; height: 28px; 
  background-repeat: no-repeat; background-position: center center;
  background-size: 1.45rem;
}

.lnk-home { background-image: url(../uix/home.svg); }
.lnk-phone { background-image: url(../uix/call.svg); }