/*************************************************************************************************************/
/* ************************************************* INIT ************************************************** */
/*************************************************************************************************************/


/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&subset=cyrillic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&subset=cyrillic&display=swap');


/* Global variables */
:root
{
  --color-main: #113266;
  --color-h: #525866;
  --color-link: #f24d00;
  --color-sidenav-bg: var(--color-main);
  --color-showcase: #0e2047cc;
  --color-footer-bg: #f0f4fa;
  --color-footer-h: var(--color-h);
  --color-footer-gray: var(--color-h);
  --color-footer-border: var(--color-h);
  --color-table-head: #dee8fc;
  --color-canvas-bg: #fff;
  --font-family-h: "Fira Sans", Arial, Helvetica, sans-serif;
  --font-family-p: "Open Sans", Arial, Helvetica, sans-serif;
  --link-line-thickness: 2px;
  --link-line-offset: 2px;
  --transition-time: 0.1s;
}


/* Reset state */
*{
  color: #444;
  margin: 0;
  padding: 0;
  box-sizing: border-box;  
  font-size: 18px;
  line-height: 1.8rem;
  font-weight: 600;   
  font-family: var(--font-family-p);
}
body
{
  background-color: #fff;
}
li 
{
  list-style: none;
}
a
{
  text-decoration: none;
}
h1, h2, h3, h4, h5, h6
{
  color: var(--color-h);
  font-weight: 800;
  font-family: var(--font-family-h);
}
em, span.ital, span.ital sup, span.ital sub
{
  font-style: italic;
}
strong, span.bol, span.bol sup, span.bol sub, p.math, p.math sup, p.math sub
{
  color:#333;
  font-weight: 700;
}
sup, sub
{   
  font-size: 0.8rem;
}


/* **************************************************************************************************** */
/* ********************************************** HEADER ********************************************** */
/* **************************************************************************************************** */
header 
{  
  background-color: #fff;
  border-bottom: 1px solid #eee;
}


/* ********************************************** Main Navigation ********************************************** */
nav 
{  
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr;
  align-items: center;  
  max-width: 1400px;
  min-height: 70px;
  margin: 0 auto;
}
.logo-header-container 
{
  grid-area: 1 / 1 / 2 / 2;
  margin-left: 30px;
}
.logo-header-container a
{  
  display: inline-block;
  width: 200px;
  font-weight: 400;
  line-height: 12px;
  margin-top: 9px;
}
.logo-header-container a img
{
  width: 200px;
  min-width: 170px;
}
.mainnav
{ 
  grid-area: 1 / 2 / 2 / 3;
  justify-self: end;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr;
  margin: 0 30px 0 10px;
  cursor: pointer;
}
.mainnav-text
{  
  grid-area: 1 / 1 / 2 / 2;
  font-size: 1.1rem;
  font-family: var(--font-family-h);
  font-weight: 500;
  padding: 1px 15px 0 0;
}
.mainnav-hamburger
{  
  grid-area: 1 / 2 / 2 / 3;
  justify-self: end;
  align-self: center;
  width: 30px;
}
.mainnav-hamburger div
{
  background-color: #444;
  height: 3px;
  margin: 5px 0;
  transition: var(--transition-time);
}
.mainnav-hamburger div:nth-of-type(2)
{
  width: 24px;
  margin-left: 6px;
  margin-right: 0;
}


/* ********************************************** Side Navigation ********************************************** */
.sidenav 
{
  background-color: var(--color-sidenav-bg);
  height: 100%;
  width: 100%;
  z-index: 200;
  padding-top: 60px;
  position: fixed;
  top: 0;
  right: 0;
  overflow: auto;
  display: none;
}
.sidenav-btn-close 
{
  position: absolute;
  top: 20px;
  right: 20px;
}
.sidenav-btn-close svg
{
  width: 32px;
  cursor: pointer;
}
.sidenav-btn-close svg polygon
{
  fill: #fff;
}
.sidenav a, .sidenav-node
{
  display: table;
  color: #fff;
  font-size: 1.2rem;
  font-family: var(--font-family-h);
  font-weight: 400;
  margin: 15px 0 15px 60px;
  cursor: pointer;
}
.sidenav-node svg
{
  height: 16px;
  margin-left: 4px;
}
.sidenav-node svg polygon
{
  fill: #fff;
}
.sidenav-node img
{
  width: 30px;
  margin: 0 4px -6px 0;
  border-radius: 50%;
}
.sidenav-dropdown
{
  display: none;
}
.sidenav-dropdown a
{
  margin: 15px 10px 15px 120px;
}
.sidenav-dropdown a img
{  
  width: 16px; 
  margin: 0 8px -1px 0; 
}


/* ********************************************** Showcase ********************************************** */
.showcase
{ 
  width: 100%;
  min-height: 600px;
  background-position: center;
  background-size: cover;
  margin-bottom: 150px;
  position: relative;
}
#showcase-home, #showcase-404
{
  min-height: 650px;
  background-image: url("../images/home/home-showcase-background.svg"); 
}
#showcase-about
{
  background-image: url("../images/about/about-showcase-background.webp");
}
#showcase-oscope
{
  background-image: url("../images/products/oscilloscopes/oscilloscopes-showcase-background.webp");
}
#showcase-mag
{
  background-image: url("../images/products/magnetometers/magnetometers-showcase-background.webp");
}
#showcase-rng
{
  background-image: url("../images/products/qrng/qrng-showcase-background.webp");
}
#showcase-mgrams
{
  background-image: url("../images/services/magnetograms/magnetograms-showcase-background.webp");
}
#showcase-tickets
{
  background-image: url("../images/services/tickets/tickets-showcase-background.webp");
}
#showcase-grats
{
  background-image: url("../images/services/gratings/gratings-showcase-background.webp");
}
.showcase img
{
  width: 240px;
  height: auto;
  position: absolute;
  top: 80px;
  right: 20%;
}
.showcase-container
{
  position: absolute;
  top: 160px;
  left: 20%;
  max-width: 600px;
  height: auto;
  padding: 40px;
  margin: 0 20px;
  z-index: 1;
}
#showcase-home .showcase-container, #showcase-404 .showcase-container
{
  background-color: var(--color-showcase);
}
#showcase-about .showcase-container
{
  top: 220px;
}
.showcase-container h1
{
  color: #fff;
  font-size: 2.4rem;
  line-height: 2.8rem;
  font-weight: 700;
  margin-bottom: 30px;
}
.showcase-container h2
{
  color: #fff;
  font-size: 1.0rem;
  line-height: 1.6rem;
  font-weight: 400;
  margin-bottom: 40px;
}
.showcase-container h3
{
  color: #fff;
  font-size: 1.4rem;
  line-height: 1.8rem;
  font-style: italic;
  font-weight: 700;
  margin-bottom: 30px;
}


/* ******************************************* Button ******************************************* */
.link-button
{
  padding: 10px 30px;
  font-size: 1.1rem;
  font-weight: 700;
  white-space: nowrap;
  transition: all var(--transition-time);
}
.link-button.positive.solid
{
  color: #fff;
  background-color: var(--color-main);
  border: 1px solid var(--color-main);
}
.link-button.positive.hollow
{
  color: var(--color-h);
  background-color: transparent;
  border: 1px solid var(--color-h);
}
.link-button.negative.solid
{
  color: var(--color-h);
  background-color: #fff;
  border: 1px solid #fff;
}
.link-button.negative.hollow
{
  color: #fff;
  background-color: transparent;
  border: 1px solid #fff;
}


/* ******************************************* Links ******************************************* */
.link-container
{
  max-width: 1200px;
  margin: 0 auto 90px auto;
}
.link-container p
{
  padding: 10px 20px;
}
.link-container a, .link-container a strong, .link-container a em
{
  color: var(--color-link);
  font-weight: 700;
}


/* ******************************************* Table ******************************************* */
table
{
  width: 100%;
  margin: 50px auto 0 auto;
  border-collapse: collapse;
}
table:first-of-type
{
  margin-top: 20px;
}
tbody tr:nth-child(even)
{
  background-color: #eee;
}
th
{
  background-color: var(--color-table-head);
  color: #222;
  font-weight: 700;
  text-align: left;
  padding: 5px 10px;
}
td
{
  padding: 5px 10px;
}



/* **************************************************************************************************** */
/* ********************************************** FOOTER ********************************************** */
/* **************************************************************************************************** */
footer 
{  
  background-color: var(--color-footer-bg);
  margin-bottom: 80px;
}
.footer-container
{
  display: grid;
  grid-template-columns: 0.7fr repeat(8, 1fr);
  grid-template-rows: auto auto;
  row-gap: 30px;
  column-gap: 20px;
  justify-items: start;  
  align-items: start;
  max-width: 1200px;
  padding: 50px 0 30px 0;
  margin: 0 auto;
  border-bottom: 1px solid var(--color-footer-border);
}
.footer-sub-container h2
{
  display: block;
  color: var(--color-footer-h);
  font-size: 1.4rem;
  padding-bottom: 15px;
}
.footer-sub-container a
{
  display: table;
  color: var(--color-footer-h);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.6rem;
}
.copyright-container
{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  align-items: center;
}
.copyright
{
  grid-area: 1 / 1 / 2 / 2;
  justify-self: start;
  color: var(--color-footer-gray);
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2rem;
  padding: 30px 0 30px 30px;
}
.legal
{
  grid-area: 1 / 2 / 2 / 3;
  justify-self: end;
  color: var(--color-footer-gray);
  padding-right: 30px;
}
.legal a
{
  color: var(--color-footer-gray);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2rem;
}
.legal span
{
  color: var(--color-footer-gray);
  padding: 0 10px;
}
.ft-logo img
{  
  width: 180px;
}
.footer-contact-container img
{  
  width: 20px;
}
.footer-social-container img
{  
  width: 30px;
}
.ft-logo
{
  grid-area: 1 / 2 / 3 / 4;
  align-self: center;
}
.ft-work
{
  grid-area: 1 / 4 / 2 / 6;
}
.ft-about
{
  grid-area: 1 / 6 / 3 / 8;
}
.ft-serv
{
  grid-area: 2 / 4 / 3 / 6;
}
.ft-contact
{
  grid-area: 1 / 8 / 2 / 10;
}
.ft-bg
{
  grid-area: 2 / 8 / 3 / 10;
  justify-self: center;
  align-self: center;
}
.ft-bg img
{
  width: 120px;
  height: auto;
}
.footer-contact-container
{
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 1fr;
  justify-content: start;
  align-items: center;
  column-gap: 10px;
}
.footer-social-container
{
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: 1fr;
  justify-content: start;
  align-items: center;
  column-gap: 10px;
  padding-top: 20px;
  margin-top: 10px;
  border-top: 1px solid var(--color-footer-border);
}
.footer-social-container a
{
  display: grid;
}


/* ************************************************************************************************************ */
/* ********************************************** RESPONSIVENESS ********************************************** */
/* ************************************************************************************************************ */
@media (hover: hover)
{
  /* Main Navigation */ 
  .mainnav-hamburger:hover div:nth-of-type(2)
  {
    margin-left: 0;
    margin-right: 6px;
  }

  /* Side Navigation */ 
  .sidenav a:hover, .sidenav-node:hover
  {
    text-decoration: underline;
    text-decoration-thickness: var(--link-line-thickness);
    text-underline-offset: var(--link-line-offset);
  }

  /* Button */
  .link-button.positive.solid:hover
  {
    color: var(--color-h);
    background-color: transparent;
    border: 1px solid var(--color-h);
  }
  .link-button.positive.hollow:hover
  {
    color: #fff;
    background-color: var(--color-main);
    border: 1px solid var(--color-main);
  }
  .link-button.negative.solid:hover
  {
    color: #fff;
    background-color: transparent;
    border: 1px solid #fff;
  }
  .link-button.negative.hollow:hover
  {
    color: var(--color-h);
    background-color: #fff;
    border: 1px solid #fff;
  }

  /* Links */
  .link-container a:hover
  {
    text-decoration: underline;
    text-decoration-thickness: var(--link-line-thickness);
    text-underline-offset: var(--link-line-offset);
  }

  /* Footer */
  .footer-sub-container a:hover
  {
    text-decoration: underline;
    text-decoration-thickness: var(--link-line-thickness);
    text-underline-offset: var(--link-line-offset);
  }
}
@media only screen and (max-width: 768px) 
{
  /* Showcase */
  .showcase img
  {
    top: 70px;
    right: 70px;
  }  
  .showcase-container
  {
    top: 180px;
    left: 40px;
  }  

  /* Footer */
  .footer-container
  {
    grid-template-columns: 1fr repeat(4, 1fr);
    grid-template-rows: repeat(3, auto);
  }
  .ft-logo
  {
    grid-area: 1 / 2 / 2 / 4;
  }
  .ft-work
  {
    grid-area: 2 / 2 / 3 / 4;
  }
  .ft-serv
  {
    grid-area: 3 / 2 / 4 / 4;
  }
  .ft-about
  {
    grid-area: 1 / 4 / 2 / 6;
  }
  .ft-contact
  {
    grid-area: 2 / 4 / 3 / 6;
  }  
  .ft-bg
  {
    grid-area: 3 / 4 / 4 / 6;
  }  
}
@media only screen and (max-width: 480px) 
{
  /* Main Navigation */  
  .mainnav-text
  {  
    display: none;
  }

  /* Showcase */
  .showcase img
  {
    width: 200px;
    top: 60px;
    right: 40px;
  }  
  .showcase-container 
  {
    top: 120px;
    left: 0;
    padding: 30px;
  }
  #showcase-home .showcase-container 
  {
    top: 220px;
  }  

  /* Footer */
  .footer-container
  {
    grid-template-columns: 0.5fr repeat(2, 1fr) 0.5fr;
    grid-template-rows: repeat(6, auto);
  }
  .ft-logo-footer
  {
    grid-area: 1 / 2 / 2 / 4;
    padding-top: 10px;
  }
  .ft-about
  {
    grid-area: 2 / 2 / 3 / 4;
  }
  .ft-work
  {
    grid-area: 3 / 2 / 4 / 4;
  }
  .ft-serv
  {
    grid-area: 4 / 2 / 5 / 4;
  }
  .ft-contact
  {
    grid-area: 5 / 2 / 6 / 4;
  } 
  .ft-bg
  {
    grid-area: 6 / 2 / 7 / 4;    
  }  
  .copyright-container
  {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .legal
  {
    grid-area: 1 / 1 / 2 / 2;
    justify-self: center;
    padding: 20px 20px 10px 20px;
    margin: 0;
  }
  .copyright
  {
    grid-area: 2 / 1 / 3 / 2;
    justify-self: center;
    padding: 10px 20px 20px 20px;
  }
}