@font-face {
  font-family: 'Universalis ADF Std Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Universalis ADF Std Regular'), url('UniversalisADFStd-Regular.woff') format('woff');
}
    
    
@font-face {
  font-family: 'Universalis ADF Std Cond';
  font-style: normal;
  font-weight: normal;
  src: local('Universalis ADF Std Cond'), url('UniversalisADFStd-Cond.woff') format('woff');
}

@font-face {
  font-family: 'Universalis ADF Std Bold';
  font-style: normal;
  font-weight: normal;
  src: local('Universalis ADF Std Bold'), url('UniversalisADFStd-Bold.woff') format('woff');
}


@font-face {
  font-family: 'Universalis ADF Std Bold Cond';
  font-style: normal;
  font-weight: normal;
  src: local('Universalis ADF Std Bold Cond'), url('UniversalisADFStd-BoldCond.woff') format('woff');
}



:root{
  --spectra-dark-color:#0052cc;
  --spectra-light-color:#00ccff;
}

 html {
  font-size: 12pt;
 }

html, body{
    margin: 0;
    padding: 0;
    min-width: 100%;
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    height: 100%;
    max-height: 100%;
}
body {
  --text-color: #222;
  --bkg-color: #fff;
  display:grid;
  grid-template-rows: 100px auto 100px;
}
body.dark-theme {
  --text-color: #ddd;
  --bkg-color: #121212;
}

@media (prefers-color-scheme: dark) {
  body {
    --text-color: #ddd;
    --bkg-color: #121212;
  }
  img {
    filter: brightness(.8) contrast(1.2);
  }
  body.light-theme {
    --text-color: #222;
    --bkg-color: #ddd; 
  }
  body.light-theme img {
  filter: none;
}
  
}

* {
  font-family: 'Universalis ADF Std Regular', Arial, Helvetica, sans-serif;
}

body {
  background: var(--bkg-color);
    background-image: url('../img/vect-dot.svg');
    background-repeat: no-repeat;
    background-position: top right;
    background-blend-mode: soft-light;
    background-clip: content-box;
            
}


h1,h2,h3,h4,h5,li,
p {
  color: var(--text-color);
}

h1,h2,h3,h4,h5,strong{
  font-family:'Universalis ADF Std Bold Cond';
}

main {
 margin: 0px 3rlh;
}

.container{
  display: grid;
  row-gap: 2rlh;;
}

.inline { 
  display: inline-grid;
  border-radius: 2px;
  column-gap: 1rlh;

  box-shadow:
 inset 0em -0.2em 0.0em #0052cc60, 
 0 0 0 0px #0052cc20, 
 0em 0em 0.0em rgba(255, 255, 255, 0.7);
}

 body.light-theme .inline{
  background: linear-gradient(45deg, rgba(0, 90, 255, 0.2), 
  rgba(255, 255, 255, 0.2),
  rgba(255, 255, 255, 0.9));
   box-shadow:
 inset 0em -0.2em 0.0em #0052cc60, 
 0 0 0 1px #0052cc70, 
 0em 0em 0.2em rgba(20, 20, 20, 0.7);
 }

.item{
 vertical-align: bottom
}


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

.item-text {
  grid-area: text;
}
.item-img {
  grid-area: img;
}

.img-clouds{
  width: 100%;
  min-height: 250px;
background: linear-gradient(#000, rgba(255, 255, 255, 0.1))
    ,url(../img/clouds.jpg);
background-size: cover;

box-shadow:

  inset 1em -1em 1em rgba(2, 2, 2, 0.9), 
  0 0 0 1em #000, 
  inset 1em -1em 4em rgba(2,2, 2, 0.8);
}

.sectioncols{
  grid-template-columns: auto 300px;
  grid-auto-flow: row;
  grid-template-areas:  "text" "img";
  background:  linear-gradient(45deg, rgba(30, 75, 115, 0.3), rgba(0, 0, 0, 0.9));
  
  background-position: left;

}

@media only screen and (min-width: 455px) {
  .sectioncols{
    grid-template-columns: auto 300px;
    grid-template-areas:
    "text" "img";
  }
}

.section-text {
 padding: 0.5rlh;
 margin-left: 1rlh;
 grid-area: text;
}

.section-img{
  clip-path: border-box xywh(0 -4px 300px 100% round 0 2px 2px 0);
  grid-area: "img";
}
.section-img img{
  height: 100%;
  width: 300px;
  object-fit: cover;
  object-position: center;
}

.fourcol{
  grid-template-columns: repeat(4, 1fr);
}

.innerlist h3 {
  display:inline;
  padding: 0px 0.5rem;
}

header{
  display:grid;
  grid-template-columns:350px auto 200px;
  padding: 0 1rem;
}

header nav{
  display:grid;
  grid-auto-flow:column dense;
  grid-auto-columns: auto;
}

.nav-elem{
  align-self: center;
}
.nav-elem p{
  margin: 0.3rem 0;
}

header .spectra-logo {
    background-image: url('../img/logo-spectra-data.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 90px;
    justify-content: flex-end;    
}

@media only screen and (min-width: 450px) {
  
  .flow-text {
    font-size: 1.372rem;
  }
  .card-content h4{font-size:1.48rem;}
  
}
@media only screen and (max-width: 450px) {
  main {
    margin: 0px 1rlh;
  }
 .sectioncols{
    grid-template:
    [row1-start] "img" 200px [row1-end]
    [row2-start] "text" auto [row2-end]
    / auto;
 }
.section-img{
  clip-path: border-box xywh(0 0px 100% 100% round 10px 10px  0 0);
  grid-area: img;
  overflow: hidden;

}
.section-img img{
    height: auto;
    width: 100%;
    object-fit: cover;
    object-position: center;
  position: relative;
    top: calc(-337px/2);
    left: 0px;

  }
  header{
     grid-template-columns:250px auto 130px;
     padding:0px;
  }
  header .spectra-logo {
    justify-self: stretch;
  align-self: center;
    height: 80px;
      
}
  
}

@media only screen and (min-width: 601px) {
  html{
    font-size: 1.15rem;
  }

  .card-content h4{font-size:1.88rem;}
  .flow-text {
    font-size: 1.472rem;
  }
}

 @media only screen and (min-width: 993px) {
  html{
    font-size: 1.20rem;
  }
  .big {
    width: 90%;
    max-width: 80%;
  }
  .flow-text {
    font-size: 1.52rem;
  }
}

@media only screen and (min-width: 1201px) {
  html{
    font-size: 1.25rem;
  }
}
.btn-toggle{
  justify-self: end;
  align-self: center;
  width:48px;
  height:48px;
  margin-right: 1rem;
  background-image: url("../img/sun-fill.svg");
  background-color: #000; 
  background-repeat: no-repeat;
  background-size: 30px 30px;
  background-position: center;
  border-radius: 50%;
  border:none;
   box-shadow: 0 2px 4px darkslategray;
   cursor: pointer;
 transition: all 0.2s ease;
}
.btn-toggle:hover{
  background-color: #0052cc;
}

body.light-theme .btn-toggle{
  background-image: url("../img/moon-fill.svg");
  background-color: #ddd;
}
body.light-theme .btn-toggle:hover{
  background-color: var(--spectra-light-color);
}

.btn-lang{
  justify-self: end;
  align-self: center;
  width:48px;
  height:48px;
  background-image: url("../img/globe2.svg");
  background-color: #000; 
  background-repeat: no-repeat;
  background-size: 30px 30px;
  background-position: center;
  border-radius: 50%;
  border:none;
   box-shadow: 0 2px 4px darkslategray;
   cursor: pointer;
 transition: all 0.2s ease;
}
.btn-lang:hover{
  background-color: var(--spectra-dark-color);
}
body.light-theme .btn-lang{
  background-image: url("../img/globe1.svg");
  background-color: #ddd;
}
body.light-theme .btn-lang:hover{
  background-color: var(--spectra-light-color);
}

.text-pad{
  padding: 0 0.5em;
}

.icon-block {
  padding: 0 15px;
}
.icon-block .material-icons {
	font-size: inherit;
}

.section ul li{list-style-type: disc;
  list-style-position:outside;}
.section ul {
  padding-left: 50px;
}

.section strong{
  font-weight: 600;
}

.spectra-text-dark{
  color: var(--spectra-dark-color);
}
a{
  color: var(--spectra-dark-color);
}

.spectra-text-light{
  color: var(--spectra-light-color);
}
.spectra-text-shadow{
  color: #fff;
  text-shadow:
  1px 1px 2px #000,
  0 0 1em var(--spectra-dark-color),
  0 0 0.2em var(--spectra-dark-color);

}

body.light-theme .spectra-text-shadow{
  color: #000;
  text-shadow:none;
}

footer {
  display:grid;
  grid-template-columns: 20% 60% 20%;
  align-items: center;
  justify-items: center;
  background-color: #0052cc60;
  place-self: bottom stretch;
  height:100px;
  
}

.footer-nav{
  display: inline-grid;

  column-gap: 1rlh;
  grid-auto-flow: column;
  align-items: center;
  justify-items: center;
}

.info::before{
  content:"info@";
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
    justify-self: end;
  align-self: center;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    background-color: #333;
    border-radius: 24px;
    width: 100%;
    height: 100%;
    transition: background-color 0.3s;
}

body.light-theme .slider{
  background-color: #ccc;
  
}
.slider::before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 2px;
    background-color: #000;
    border-radius: 50%;
    transition: transform 0.3s;

}
body.light-theme .slider::before{
  background-color: #aaa;
  
}

.toggle-switch input:checked+.slider {
    background-color: #4caf50;
}

.toggle-switch input:checked+.slider::before {
    transform: translateX(26px);
    
}

.themeslider{
  background-image: url("../img/sun-fill.svg");
  background-repeat: no-repeat;
  background-size: auto 17px;
  background-position: 30px 3px;
}

.theme .color-switch:checked+.slider {
    background-color:#fff;
    background-image: url("../img/moon-fill.svg");
  background-repeat: no-repeat;
  background-size: auto 17px;
  background-position: 6px 3px;
}

.globe{
  margin: 10px auto 10px 18px;
  display: block;
  height: 1em;
}

.lang-switch{
  border:0px;
  background: transparent;
  margin:0px;
  padding: 0px;
  font-size: 1em;
  color: var(--spectra-light-color);
}

.lang-switch:hover{
   color: #fff;
  text-shadow:
  1px 1px 2px #000,
  0 0 1em var(--spectra-dark-color),
  0 0 0.2em var(--spectra-dark-color);

}

body.light-theme .lang-switch{
  color: var(--spectra-dark-color);
}

body.light-theme .lang-switch:hover{
  color: #fff;
}

body.light-theme .active{
  color: #666;
}
.active{
  color:#aaa;
}