/*
Kitname: Visiscope Theme Core Kit
Author: Visiscope
Author URL : https://visiscope.fr
Description: Visiscope frontend toolkit core theme to build and customize Dwebz with grid system and components. 
Version: 1.0
*/

:root {
  --accent-col: #1381FF;
  --b-col: #000;
  --w-col: #fff;
  --grey-col: #787878;
  --extra-col1: #C6C6C6;
  --extra-col2: #C6C6C6;
  --primary-font: "Source Sans 3", Helvetica, Arial, serif;
  --secondary-font: "Noto Sans", Helvetica, Arial, sans-serif;
  --fs-xxxs: 10px;
  --fs-xxs: 12px;
  --fs-xs: 14px;
  --fs-s: 16px;
  --fs-n: 21px;
  --fs-m: 24px;
  --fs-l: 27px;
  --fs-xl: 51px;
  --fs-xxl: 61px;
  --fs-xxxl: 81px;
  --lh-s: 14px;
  --lh-n: 24px;
  --lh-m: 31px;
  --lh-l: 38px;
  --lh-xl: 51px;
  --space-xxs: 4px;
  --space-xs: 9px;
  --space-s: 20px;
  --space-n: 30px;
  --space-m: 48px;
  --space-l: 58px;
  --space-xl: 78px;
  --space-xxl: 88px;
  --space-xxxl: 128px;
  --br-s: 4px;
  --br-n: 6px;
  --br-m: 11px;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
::selection {
  background-color: var(--w-col);
  color: var(--accent-col);
  -webkit-text-fill-color: var(--accent-col);
}
::-moz-selection {
  background-color: var(--w-col);
  color: var(--accent-col);
  -webkit-text-fill-color: var(--accent-col);
}
::-webkit-selection {
  background-color: var(--w-col);
  color: var(--accent-col);
  -webkit-text-fill-color: var(--accent-col);
}

/*** GLOBAL ***/
body {
  background: var(--w-col);
  font-family: var(--primary-font);
  font-size: var(--fs-n);
  line-height: var(--lh-n);
}
a {
  color: var(--b-col);
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
  transition: all 0.3s ease;
}
a:hover {
  color: var(--accent-col);
  text-decoration: none;
}
img {
  max-width: 100%;
  height: auto;	
}

/*** FONTS ***/
@font-face {
  font-family: 'hndr';
  src: url('assets/fonts/hndr.woff2') format('woff2'),
   url('assets/fonts/hndr.woff') format('woff'),
   url('assets/fonts/hndr.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'hndm';
  src: url('assets/fonts/hndm.woff2') format('woff2'),
   url('assets/fonts/hndm.woff') format('woff'),
   url('assets/fonts/hndm.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'hndb';
  src: url('assets/fonts/hndb.woff2') format('woff2'),
   url('assets/fonts/hndb.woff') format('woff'),
   url('assets/fonts/hndb.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}
p {}
strong {}
h1 {
  font-family: var(--primary-font);
  font-size: 5.4rem;
  font-weight: normal;
  line-height: 6.1rem;
}
h2 {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 3.9rem;
}
h3 {
  font-size: 2.1rem;
  font-weight: 400;
  line-height: 2.9rem;
}
h4 {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: var(--lh-m);
}
h5 {
  font-size: 1.3rem;
  font-weight: normal;
  line-height: 2.4rem;
}
h6 {
  font-size: 1.1rem;
  font-weight: normal;
  line-height: 1.8rem;
}
small {
  font-size: 12px;
}
figcaption {
  font-size: var(--fs-s);
  color: var(--grey-col);
}
.tal {text-align: left;}
.tac {text-align: center;}
.tar {text-align: right;}

/*** CONTAINER ***/
.container {
  background: var(--w-col);
  margin: 0 auto;
  padding: 0 20px;
}
.container-fluid {
  margin: 0 auto;
  padding: 0;
  width: 100%;
}
.content {
  position: relative;
  padding: 0;
}
.content a {}
.content a:hover {}

/*** GRID ***/
.grid {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 40px;
}
.ih {align-items: start;}
.sh {align-items: stretch;}
.top {align-self: start;}
.middle {align-self: center;}
.bottom {align-self: end;}
.center {justify-self: center;}
.nopl {padding-left: 0; margin-left: -8.6%;}
.nopr {padding-right: 0;margin-right: -8.6%;}
.col-1 {grid-column: span 1;}
.col-2 {grid-column: span 2;}
.col-3 {grid-column: span 3;}
.col-4 {grid-column: span 4;}
.col-5 {grid-column: span 5;}
.col-6 {grid-column: span 6;}
.col-7 {grid-column: span 7;}
.col-8 {grid-column: span 8;}
.col-9 {grid-column: span 9;}
.col-10 {grid-column: span 10;}
.col-11 {grid-column: span 11;}
.col-12 {grid-column: span 12;}
.col-13 {grid-column: span 13;}
.col-14 {grid-column: span 14;}
.col-15 {grid-column: span 15;}
.col-16 {grid-column: span 16;}
.grid.threecol {grid-template-columns: repeat(3, 1fr);}
.grid.fourcol {grid-template-columns: repeat(4, 1fr);}
.offset-1 {margin-left: calc((100% / 16) * 1);}
.offset-2 {margin-left: calc((100% / 16) * 2);}
.offset-3 {margin-left: calc((100% / 16) * 3);}
.offset-4 {margin-left: calc((100% / 16) * 4);}
.offset-5 {margin-left: calc((100% / 16) * 5);}
.offset-6 {margin-left: calc((100% / 16) * 6);}
.offset-7 {margin-left: calc((100% / 16) * 7);}
.offset-8 {margin-left: calc((100% / 16) * 8);}

/*** SPACING ***/
/** Margins **/
.m-xxs {margin: var(--space-xxs);}
.m-xs {margin: var(--space-xs);}
.m-s {margin: var(--space-s);}
.m-n {margin: var(--space-n);}
.m-m {margin: var(--space-m);}
.m-l {margin: var(--space-l);}
.m-xl {margin: var(--space-xl);}
.m-xxl {margin: var(--space-xxl);}
.m-xxxl {margin: var(--space-xxxl);}
/** Margins top **/
.mt-xxs {margin-top: var(--space-xxs);}
.mt-xs {margin-top: var(--space-xs);}
.mt-s {margin-top: var(--space-s);}
.mt-n {margin-top: var(--space-n);}
.mt-m {margin-top: var(--space-m);}
.mt-l {margin-top: var(--space-l);}
.mt-xl {margin-top: var(--space-xl);}
.mt-xxl {margin-top: var(--space-xxl);}
.mt-xxxl {margin-top: var(--space-xxxl);}
/** Margins bottom **/
.mb-xxs {margin-bottom: var(--space-xxs);}
.mb-xs {margin-bottom: var(--space-xs);}
.mb-s {margin-bottom: var(--space-s);}
.mb-n {margin-bottom: var(--space-n);}
.mb-m {margin-bottom: var(--space-m);}
.mb-l {margin-bottom: var(--space-l);}
.mb-xl {margin-bottom: var(--space-xl);}
.mb-xxl {margin-bottom: var(--space-xxl);}
.mb-xxxl {margin-bottom: var(--space-xxxl);}
/** Margins left **/
.ml-xxs {margin-left: var(--space-xxs);}
.ml-xs {margin-left: var(--space-xs);}
.ml-s {margin-left: var(--space-s);}
.ml-n {margin-left: var(--space-n);}
.ml-m {margin-left: var(--space-m);}
.ml-l {margin-left: var(--space-l);}
.ml-xl {margin-left: var(--space-xl);}
.ml-xxl {margin-left: var(--space-xxl);}
.ml-xxxl {margin-left: var(--space-xxxl);}
/** Margins right **/
.mr-xxs {margin-right: var(--space-xxs);}
.mr-xs {margin-right: var(--space-xs);}
.mr-s {margin-right: var(--space-s);}
.mr-n {margin-right: var(--space-n);}
.mr-m {margin-right: var(--space-m);}
.mr-l {margin-right: var(--space-l);}
.mr-xl {margin-right: var(--space-xl);}
.mr-xxl {margin-right: var(--space-xxl);}
.mr-xxxl {margin-right: var(--space-xxxl);}
/** Padding **/
.p-xxs {padding-right: var(--space-xxs);}
.p-xs {padding-right: var(--space-xs);}
.p-s {padding-right: var(--space-s);}
.p-n {padding-right: var(--space-n);}
.p-m {padding-right: var(--space-m);}
.p-l {padding-right: var(--space-l);}
.p-xl {padding-right: var(--space-xl);}
.p-xxl {padding-right: var(--space-xxl);}
.p-xxxl {padding-right: var(--space-xxxl);}
/** Padding top **/
.pt-xxs {padding-top: var(--space-xxs);}
.pt-xs {padding-top: var(--space-xs);}
.pt-s {padding-top: var(--space-s);}
.pt-n {padding-top: var(--space-n);}
.pt-m {padding-top: var(--space-m);}
.pt-l {padding-top: var(--space-l);}
.pt-xl {padding-top: var(--space-xl);}
.pt-xxl {padding-top: var(--space-xxl);}
.pt-xxxl {padding-top: var(--space-xxxl);}
/** Padding bottom **/
.pb-xxs {padding-bottom: var(--space-xxs);}
.pb-xs {padding-bottom: var(--space-xs);}
.pb-s {padding-bottom: var(--space-s);}
.pb-n {padding-bottom: var(--space-n);}
.pb-m {padding-bottom: var(--space-m);}
.pb-l {padding-bottom: var(--space-l);}
.pb-xl {padding-bottom: var(--space-xl);}
.pb-xxl {padding-bottom: var(--space-xxl);}
.pb-xxxl {padding-bottom: var(--space-xxxl);}
/** Padding left **/
.pl-xxs {padding-left: var(--space-xxs);}
.pl-xs {padding-left: var(--space-xs);}
.pl-s {padding-left: var(--space-s);}
.pl-n {padding-left: var(--space-n);}
.pl-m {padding-left: var(--space-m);}
.pl-l {padding-left: var(--space-l);}
.pl-xl {padding-left: var(--space-xl);}
.pl-xxl {padding-left: var(--space-xxl);}
.pl-xxxl {padding-left: var(--space-xxxl);}
/** Padding right **/
.pr-xxs {padding-right: var(--space-xxs);}
.pr-xs {padding-right: var(--space-xs);}
.pr-s {padding-right: var(--space-s);}
.pr-n {padding-right: var(--space-n);}
.pr-m {padding-right: var(--space-m);}
.pr-l {padding-right: var(--space-l);}
.pr-xl {padding-right: var(--space-xl);}
.pr-xxl {padding-right: var(--space-xxl);}
.pr-xxxl {padding-right: var(--space-xxxl);}

/*** MISC - ELEMENTS ***/
.dvdr-xxs {margin: 20px 0;}
.dvdr-xs {margin: 20px 0;}
.dvdr-s {margin: 40px 0;}
.dvdr-n {margin: 40px 0;}
.dvdr-m {margin: 40px 0;}
.dvdr-l {margin: 60px;}
.dvdr-xl {margin: 80px;}
.dvdr-xxl {margin: 120px;}
.ontop {z-index: 999999;}
.hidden-desktop {display:none;}
.hidden {display: none;}
.show {display: block;}

/*** HEADER ***/
header {
  color: var(--b-col);
  padding: 1.8rem 40px;
}
.site-header {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  position: relative;
}
.site-name a {
  color: var(--b-col);
  font-weight: bold;
}
.header-left {
  display: flex;
  align-items: center;
}
.main-nav {}
.main-nav ul {
  display: inline-block;
  list-style: none;
  padding: 0;
  margin: 0;
}
.main-nav li, .right-nav li {
  display: inline-block;
  margin-left: 1.5rem;
}
.main-nav a, .right-nav a {
  color: var(--b-col);
}
.main-nav a:hover, .right-nav a:hover {
  color: var(--accent-col);
}
.main-nav .current-menu-item a, .right-nav .current-menu-item a {
  color: var(--accent-col);
}
.main-right-nav {
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.mobile-nav {
  display: none;
}

/*** FOOTER ***/
footer {
  font-size: var(--fs-s);
  color: var(--b-col);
  padding: 2rem 0;
  margin:  0;
}
footer p {
  font-size: var(--fs-s);
}
footer a {
  color: var(--b-col);
  text-decoration: none;
}
footer a:hover {
  color: var(--accent-col);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/*** BUTTONS & LINKS ***/
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--accent-col);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--w-col);
  text-align: center;
  text-decoration: none;
  text-transform: initial;
  border: 1px solid var(--blue-col);
  border-radius: var(--br-s);
  padding: var(--space-xs) var(--space-n);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.btn:hover {
  background-color: var(--b-col);
  color: var(--w-col);
  border-color: var(--grey-col);
}
.btn.fw {
  width: 100%;
}
.btn.s {
  padding: var(--space-xxs) var(--space-s);
  font-size: var(--fs-xs);
}
.btn.m {
  padding: var(--space-s) var(--space-n);
  font-size: var(--fs-s);
}
.btns {
  display: flex;
  gap: var(--space-xs);
}
.btn.w {
  background-color: var(--w-col);
  color: var(--grey-col);
  border: 1px solid var(--w-col);
}
.btn.w i {
  background-color: var(--blue-col);
  color: var(--w-col);
}
.btn.w:hover {
  background-color: var(--w-col);
  color: var(--blue-col);
  border: 1px solid var(--w-col);
}
.btn.w:hover i {
  background-color: var(--grey-col);
  color: var(--w-col);
  transform: translateX(8px);
}
.btn.w-bstrk {
  background-color: transparent;
  color: var(--accent-col);
  border: 1px solid var(--accent-col);
}
.btn.w-bstrk:hover {
  background-color: var(--accent-col);
  color: var(--w-col);
  border: 1px solid var(--accent-col);
}
.link {
  font-size: var(--fs-s);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--grey-col);
  transition: color 0.3s ease;
  text-decoration: none;
}
.link:hover {
  color: var(--blue-col);
}

/*** BLOCKS ***/
.blck {
  overflow: hidden;
  border-radius: var(--br-m);
}
.blck.n {
  padding: var(--space-n);
}
.blck.m {
  padding: var(--space-m);
}
.blck.l {
  padding: var(--space-l);
}
.blck.blue {
  background-color: var(--blue-col);
  color: var(--w-col);
}
.blck.blue p {
  color: var(--blue-d-col);
}
.blck.w {
  background-color: var(--w-col);
  border: 1px solid var(--xtra-col3);
  color: var(--prim-col);
}
.blck.w p {
  font-size: var(--fs-s);
  color: var(--sec-col);
}