'/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}
#
/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
@font-face {
  font-family: 'Messapia-Rg';
  src:url('/Messapia-Regular.ad70756b.woff') format('woff'),
        url('/Messapia-Regular.27b5d102.woff2') format('woff2'),
        url('/Messapia-Regular.295161e0.eot'),
        url('/Messapia-Regular.295161e0.eot?#iefix') format('embedded-opentype'),
        url('/Messapia-Regular.1afd0477.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
    font-family: 'NP-WideThin';
    src: url('/NeuePlakWideThin.22871ac3.eot');
    src: url('/NeuePlakWideThin.22871ac3.eot') format('embedded-opentype'),
         url('/NeuePlakWideThin.23b41e6d.woff2') format('woff2'),
         url('/NeuePlakWideThin.1622e1f6.woff') format('woff'),
         url('/NeuePlakWideThin.e2bb9fd3.ttf') format('truetype'),
         url('/NeuePlakWideThin.892e5042.svg#NeuePlakWideThin') format('svg');
}

@font-face {
    font-family: 'NP-Regular';
    src: url('/NeuePlakRegular.71b63eb7.eot');
    src: url('/NeuePlakRegular.71b63eb7.eot') format('embedded-opentype'),
         url('/NeuePlakRegular.476bc0b0.woff2') format('woff2'),
         url('/NeuePlakRegular.102d168c.woff') format('woff'),
         url('/NeuePlakRegular.1b3f4eaa.ttf') format('truetype'),
         url('/NeuePlakRegular.e3585885.svg#NeuePlakRegular') format('svg');
}

*{
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body{
  color: white;
  max-width: 100vw;
  overflow-x: hidden; 
}

body.noscroll{
  overflow: hidden;
}

:root{
  --highlight: rgb(206, 75, 57); 
}

h1, h2, h3, h4, h5{
  font-weight: normal;
}

h1{
  font-family: "Messapia-Rg";
  font-size: 5rem;
}

h2{
  font-family: "Messapia-Rg";
  font-size: 3rem;
}

svg{
  overflow: visible;
}


/* Header styles */ 

header{
  position: fixed;
  padding: 1rem 1.5rem;
  display: flex;
  align-items:center;
  justify-content: space-between;
  width: 100%;
  z-index: 140;
  top: 0;
}

header a{
  color: white;
  text-transform: none;
  text-decoration: none;
}

header a img{
  min-width: 1.8rem;
  height: auto;
  margin-top: .5rem;
}

header .logo-container{
  width: 1.8rem;
  margin-top: .5rem;
}

header svg path, header svg line, .loading-logo svg path, .loading-logo svg line{
  fill:none;
  stroke:#fff;
  stroke-miterlimit:10;
  stroke-width:20px
}

header .contact-trigger{
  line-height: 140%;
  position: relative;
  overflow: hidden;
}

header .contact-trigger a{
  display: inline-block;
}

header .contact-trigger #close-contact{
  position: absolute;
  top: 0;
  right: 0;
}

body{
  background-image: url(/noise-2.d72dd023.png);
  background-size: 100%; 
  background-color: #141414; 
  font-family: 'NP-Regular';
}

.loader{
  position: fixed;
  background: var(--highlight);
  z-index: 150;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.loader-2{
  position: fixed;
  background: rgba(0, 0, 0, 0.6);
  z-index: 140;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

section{
  min-height: 100vh;
  position: relative;
}

.bg-layer{
  width: 100%;
  position: fixed;
  height: 100%;
  z-index: -1;
  top: 0;
  left: 0;
  background-image: url(/noise-2.d72dd023.png);
  background-size: 100%;
}

/* Hero styles */

#hero{
  text-align: center;
  position: relative;
}

#hero .image-container{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 6;
 
}

#hero h1{
  top: 10%;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 10;
  padding-left: 2rem;
  padding-right: 2rem;
  min-height: 1em;
  overflow: hidden;
}

.pic-hero{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  transform-style: preserve-3d;
  overflow: hidden;
  transform-origin: center center;
}

.pic-hero img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#pic-hidden{
  position: absolute;
  top: 0;
}

#curve-container{
  z-index: 10;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%
}

#bottom-curve, #top-curve{
  position: absolute;
  left: 0;
}

#top-curve{
  bottom: 12%;
}

#bottom-curve{
  bottom: 7%;
}

#top-curve text, #selected-curve text, #projects-curve text, .next-project-curve text{
  font-family: 'NP-WideThin', sans-serif;
  font-size: 3rem;
  fill: var(--highlight);
}

#projects-curve text{
  fill: white;
}

.curve-selected, .projects-selected{
  position: absolute;
}


#bottom-curve text{
  font-family: 'NP-Regular', sans-serif;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .5em;
  color: black;
}

#top-curve text{
  fill: var(--highlight);
}

#bottom-curve text{
  fill: rgba(255, 255, 255, 0.3);
}

.doer{
  font-size: 0.875rem;
  text-transform: uppercase;
  color: white;
  letter-spacing: 0.1rem;
  position: absolute;
  left: 1.5rem;
  bottom: 1.5rem;
  text-align: left;
}

.doer .progress-1, .doer .progress-2{
  height: 1px;
  position: absolute;
  left: 0;
  bottom: -5px;
  background: white;
}

.doer .progress-2{
  background: var(--highlight);
}

.doer p{
  overflow: hidden;
  line-height: 100%;
  max-height: 1em;
  perspective: 1000;
}

.doer span{
  display: inline-block;
}

.doer .arrow{
  width: 1px;
  background: white;
  height: 40%;
  position: absolute;
  right: -5px;
  top:0;
  bottom: 0;
  margin: auto;
}

.doer .arrow:after{
  content: "";
  width: 8px;
  height: 8px;
  border-left: 1px solid white;
  border-top: 1px solid white;
  position: absolute;
  transform: rotate(225deg);
  left: -4px;
  bottom: 0;
  margin: auto;
}

/* ===== Styles intro section ===== */

#intro{
  position: relative;
  display: block;
  justify-content: space-between;
  align-items: center;
  padding: 4rem;
  z-index: 10;
  padding-bottom: 20rem;
  scroll-snap-align: end;
}

#intro h3{
  font-size: 1.5rem;
}

.separator{
  display: inline-block;
  background: rgba(0, 0, 0, 0.1);
  height: 1px;
}

#intro h2{
  z-index: 30;
  max-width: 80%;
  margin: auto;
  font-size: 7rem;
  line-height: 140%;
  cursor: default;
}

#intro h2 span{
  display: inline-block;
}

#intro h2 span .block{
  width: 150px;
  height: 100px;
  display: inline-block;
  margin: 0px 10px;
  background: rgba(0, 0, 0, 0.2);
}

#intro h2 > div{
  overflow: hidden;
}


/* ===== Styles how to section ===== */

#how-to > div{
  z-index: 30;
  display: flex;
}

.grid{
  display: flex;
  padding-left: 8rem; 
}

.rule{
  position: relative;
  padding: 2rem 2rem;
  max-width: 33.3333%;
}

.rule span{
  position: absolute;
  left: 35px;
  top: 0px;
}

.rule h3{
  color: var(--highlight);
  font-family: 'NP-WideThin';
  font-size: 2.3rem;
  margin-top: 0;
  margin-bottom: 1rem;
}

.rule p{
  opacity: .8;
  line-height: 180%;
  letter-spacing: 0.01rem;
  color: #cfcfcf;
}


/* ===== Selected projects curve styles ===== */ 


#projects{
  padding-top: 30vh;
}

.projects-pin{
  width: 100%;
  height: 100%;
  top: 0;
  bottom:0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
}

#projects-curve text{
  fill: white;
}

.curve-selected, .projects-selected{
  position: absolute;
}

/* ===== All projects styles ===== */

#all-projects .row-hm{
  display: flex;
  padding-bottom: 10em;
}


#all-projects{
  padding-bottom: 10vh;
}

.project-wrap a{
  color: white;
  text-decoration: none;
}

.project-wrap p{
  display: none;
}

.project-wrap{
  height: 70vh;
  width: 50%;
  padding: 6rem;
  cursor: pointer;
  position: relative;
  z-index: 10;
}

.project-wrap .project{
  overflow: hidden;
  background: rgb(0, 0, 0);
}

.project-wrap[data-cover="2"]{
  margin-top: 50vh;
}

.project-wrap[data-cover="3"]{
  margin-top: -50vh;
}

.project-wrap[data-cover="4"]{
  margin-top: 0vh;
}

.project-wrap img{
  width: 100%;
  height: auto;
  opacity: .9;
}

.project-wrap h2{
  position: absolute;
  top: 50%;
  left: 30px;
  pointer-events: none;
  /* bottom: 0; */
  margin: auto;
  line-height: 130%;
  /*text-transform: uppercase;*/
  font-size: 4rem;
  overflow: hidden;
  text-shadow: 0px 3px 10px rgba(0, 0, 0, .4);
}

.project-wrap span{
  text-transform: uppercase;
  font-size: .75rem;
  letter-spacing: 0.15em;
  color: gray;
  display: inline-block;
  padding-top: 5px;
}

.info-container{
  width: 100%;
}


/* contact and let's talk sections */

#lets-talk, #contact{
  background: var(--highlight);
  padding: 5rem;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: flex;
  align-items: center;
}

#contact{
  position: fixed;
  top:0;
  bottom: 0;
}

#lets-talk h1, #contact h1{
  overflow: hidden;
  line-height: 140%;
  cursor: pointer;
}

#lets-talk h1 span, #contact h1 span{
  display: inline-block;
}

#lets-talk h4, #contact h4{
  font-family: 'NP-WideThin';
  font-size: 2rem;
}

#lets-talk div.ext-links, #contact div.ext-links{
  display: flex;
  justify-content: space-between;
}

#lets-talk span.legal, #contact span.legal{
  position: absolute;
  display: block;
  font-size: .85rem;
  bottom: 4rem;
  opacity: .8;
  left: 5rem;
}

#lets-talk p a, #contact p a{
  color: white;
  text-decoration: none;
}

#close-contact{
  text-decoration: none;
}

/* ===== Custom cursor styles ===== */

.cursor-pointer{
  position: fixed;
  z-index: 500;
  pointer-events: none;
  width: 7.5rem;
  height: 7.5rem;
}

.custom-cursor{
  position: absolute;
  left: 0;
  top:0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 40px;
  height: 40px;
  border-width: 2px;
  border-color: #fff;
  border-style: solid;
  border-radius: 50%;
  opacity: .6;
  pointer-events: none;
  background-color: transparent;
  object-position: 50% 50%;
}

.custom-cursor > div{
  text-align: center;
  position: absolute;
  bottom: 45%;
  left: 0;
  right: 0;
  margin: auto;
}

.mail-me-button{
  display: inline-block;
  width: 200px;
  height: 200px;
  background: white;
  border-radius: 50%;
  color: var(--highlight);
  text-decoration: none;
  text-align: center;
  margin: auto;
  position: relative;
  box-shadow: 0px 5px 12px rgba(0, 0, 0, 0.1);
}

.mail-me-button span{
  position: absolute;
  bottom: 45%;
  left: 0;
  right: 0;
  margin: auto;
  display: inline-block;
  color: var(--highlight);
  font-size: 1.2rem;
}

/* ===== Projects background ===== */

.projects-bg{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.projects-bg.inside-project{
  z-index: -1
}

.projects-bg > div{
  position: absolute;
  background-size: cover;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.projects-bg div[data-project="1"]{
  background-image: url(/cover-1.206cf5c8.jpg);
}

.projects-bg div[data-project="2"]{
  background-image: url(/cover-2.cd8fafec.jpg);
}

.projects-bg div[data-project="3"]{
  background-image: url(/cover-3.eef40701.jpg);
}

.projects-bg div[data-project="4"]{
  background-image: url(/cover-4.b6657380.jpg);
}

.projects-bg div[data-project="5"]{
  background-image: url(/cover-5.c026fec7.jpg);
}

.hi-message{
  opacity: 0;
  visibility: hidden;
}

.hi-message h1{
  position: fixed;
  left: 0;
  right: 0;
  text-align: center;
  top: 0;
  bottom: 0;
  z-index: 200;
  margin: auto;
  perspective: 400;
  line-height: 1em;
  overflow: hidden;
  height: 1em;
}

.hi-message h1 div{
  opacity: 0;
  visibility: hidden;
}

.loading-logo{
  position: fixed;
  width: 2rem;
  height: 2rem;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 500;
}


/* ==== Projects styles ===== */

.mobile-rounded{
  border-radius: 40px;
  padding: .6rem;
  background: #222;
  position: relative;
}


.mobile-rounded:before{
  content: "";
  width: 50%;
  height: 30px;
  background: #222;
  border-radius: 0px 0px 20px 20px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin:auto;
  z-index: 200;
}

.mobile-rounded:after{
    content: "";
    position: absolute;
    bottom: 15px;
    width: 40%;
    height: 4px;
    background-color: rgba(150, 150, 150, 0.8);
    border-radius: 10px;
    left: 0;
    right: 0;
    margin: auto;
}


.mobile-rounded img{
  border-radius: 1.3rem;
}

.video-rounded video{
  border-radius: 36px;
}

.video-rounded-sm.desktop{
  padding: 1rem 1rem 3rem;
  background: black;
  border-radius: 20px;
}

.video-rounded-sm video{
  border-radius: 12px;
}

.video-rounded-xs.desktop{
  padding: 1.5rem 1.5rem 3rem;
  background: black;
  border-radius: 16px;
}

.video-rounded-xs video{
  border-radius: 8px;
}

#mobile-devices{
  position: relative;
  z-index: 100
}

.tablet{
  padding: 1rem;
  background: black;
  border-radius: 20px;
  z-index: 10;
  transform-origin: center bottom;
}

.tablet > *{
  border-radius: 8px;
}

.phone{
  border-radius: 30px;
  padding: .6rem;
  background: black;
  position: relative;
}

.phone > *{
  border-radius: 24px;
}

.phone:before{
  content: "";
  width: 50%;
  height: 30px;
  background: black;
  border-radius: 0px 0px 20px 20px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 200;
}

.bg-project-1{
  background-image: url(/cover-1.206cf5c8.jpg); 
}

.bg-project-2{
  background-image: url(/cover-2.cd8fafec.jpg); 
}

.bg-project-3{
  background-image: url(/cover-3.eef40701.jpg); 
}

.bg-project-4{
  background-image: url(/cover-4.b6657380.jpg); 
}

.bg-project{
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: .2; 
}


#project-hero{
  min-height: 100vh;
  padding: 0;
  max-width: 100%;
  overflow: hidden;
}

#project-hero > .row{
  min-height: 100vh;
}

#project-hero h2{
  font-size: 5rem;
  margin: 2.5rem 0;
  line-height: 130%;
}

#project-hero .category{
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.3rem;
  font-size: 0.875rem;
}

#project-hero h5{
  font-size: 2rem;
  margin: 1rem 0;
  font-family: 'NP-WideThin', sans-serif;
}

.img-container img{
  max-width: 100%;
}

.first-images{
  position: relative;
  z-index: 2;
}

.first-images{
  padding: 0.7rem;
  border-radius: 20px;
  background: rgba(100, 100, 100, .3);
}

.first-images img, .first-images video{
  border-radius: 12px;
} 

#project-about h3{
  font-family: 'Messapia-Rg', serif;
  font-size: 3.5rem;
}

#intro-screens{
  padding-top: 0;
}

.text-block{
  margin-top: 4rem;
}

.list-block ul{
  padding-left: 0;
  margin-left: 0;
  list-style: none;
}

.list-block ul li{
  position: relative;
  line-height: 180%;
  letter-spacing: 0.01rem;
  color: #cfcfcf;
  margin-bottom: 1rem;
}

.list-block ul li:before{
  position: absolute;
  content: "";
  left: -2.5rem;
  top: 1.2rem;
  height: 1px;
  width: 2rem;
  background: rgba(100, 100, 100, .6);
}

.text-block.ul-item{
  margin: 0;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  padding-left: 3rem;
  position: relative;
}

.text-block.ul-item h6:before{
  content: "a.";
  font-family: 'Messapia-Rg', serif;
  color: rgba(100, 100, 100, .6);
  position: absolute;
  top: -9px;
  left: -3rem;
  font-size: 2rem;
}

.text-block.ul-item-2 h6:before{
  content: "b.";
}

.text-block.ul-item-3 h6:before{
  content: "c.";
}

.text-block.no-margin{
  margin-top: 0;
}

.text-block p, .text-block ol, .text-block li, .text-block-tl p{
  line-height: 180%;
  letter-spacing: 0.01rem;
  color: #cfcfcf;
}


.project-container h4{
  font-family: 'NP-WideThin', sans-serif;
  font-size: 2rem;
  margin-bottom: 0;
}

#project-about{
  padding: 8rem 0;
}

.project-container h3{
  font-family: 'Messapia-Rg', serif;
  font-size: 3.5rem;
}

.left-negative{
  transform: translateX(-20%);
}

.text-block h6{
  font-family: 'NP-Regular', sans-serif;
  font-weight: bold;
  font-size: 1.25rem;
  margin: 0;
  position: relative;
}

#project-1-container #research{
  padding: 1rem 0;
  width: 100%;
  overflow-x: hidden;
}

.step-container span{
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.3rem;
  font-size: 0.875rem;
}

.step-container h4{
  margin-top: 0;
}

.project-container section{
  padding: 5rem 0rem;
  min-height: auto;
}

.project-container .img-container{
  overflow: hidden;
}

#project-1-container #ideating .container-fluid > .row{
  min-height: 100vh;
}

#project-1-container .screen-browser{
  width: 100%;
  background: #141414;
  border-radius: 12px 0px 0px 12px;
  position: relative;
  padding: 3% 0 7% 3%;
}

#project-1-container .screen-browser video{
  border-radius: 6px 0px 0px 6px;
}

#project-1-container .screen-browser .video-container{
  position: relative;
}

#project-1-container section#project-about{
  padding-top: 0 !important;
}

#project-1-container section:not(#project-hero){
  padding: 7rem 0;
}

#project-1-container section#light-trigger{
  padding-bottom: 0 !important;
}

#project-1-container section#visual{
  padding-top: 13rem;
  padding-bottom: 2rem;
}

.text-block h5, .text-block-tl h5{
  font-size: 1.25rem;
  line-height: 135%;
}

#project-1-container .color-container{
  height: 45px;
  width: 100%;
}

.design-assets p.washed{
  font-size: 0.875rem;
}

p.washed{
  color: rgba(255, 255, 255, 0.5);
}

#project-1-container .color-container[data-color="1"]{
  background: #8E15F5;
}

#project-1-container .color-container[data-color="2"]{
  background: #0079FF;
}

#project-1-container .color-container[data-color="3"]{
  background: #4FFFD0;
}

#project-2-container .color-container[data-color="1"]{
  background: #F7EFE7;
  height: 75px;
  border-radius: 20px;
  width: 75px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

#project-2-container .color-container[data-color="2"]{
  background: #F2633E;
  height: 90px;
  border-radius: 50%;
  width: 90px;
}

#project-2-container .color-container[data-color="3"]{
  width: 0; 
  height: 0; 
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 80px solid #78CDD2;
}

#project-2-container .color-container[data-color="4"]{
  background: #B1A9D1;
  margin-left: 2rem;
  height: 80px;
  border-radius: 20px;
  width: 80px;
}

h3.subtitle{
  margin-bottom: 1rem;
  line-height: 130%;
}

h3.subtitle > div{
  overflow: hidden;
}


#project-1-container .design-assets{
  margin: 3rem 0;
}

#project-1-container .sitemap-item.item-big{
  max-width: 16%;
  margin: auto;
  padding: 0.5rem 0;
  margin-bottom: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.25rem;
}

#project-1-container .sitemap-item.item-normal{
  padding: 0.25rem 0;
}

#project-1-container .sitemap-item.item-big{
  background: #E5E5E5;
  position: relative;
  color: #141414;
  margin-bottom: 3rem;
}

#project-1-container .sitemap-item.item-big:after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  height: 3rem;
  width: 1px;
  background: #686868;
  bottom: -3rem;
}

#project-1-container .sitemap-item.item-normal{
  background: #c2c2c2;
  color: #141414;
  margin-bottom: 1rem;
}

#project-1-container .sitemap-col{
  padding: 0 1rem;
}

#project-1-container .sitemap-item.item-outline p{
  border: 1px solid #DEDEDE;
  display: inline-block;
  padding: 0.5rem 1rem 0.6rem;
  margin-bottom: 1rem;
}

#project-1-container .sitemap-item.item-list{
  padding-left: 1.5rem;
  margin-top: -2rem;
}

#project-1-container .sitemap-item.item-list ul{
  list-style: none;
  padding-left: 0;
  padding-top: 1rem;
}

#project-1-container .sitemap-item.item-list ul li{
  position: relative;
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
  padding-left: 2rem;
}

#project-1-container .sitemap-item.item-list ul li:before{
  content: "";
  width: 1.5rem;
  height: 1px;
  background: #686868;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

#project-1-container .sitemap-item.item-list ul li:after{
  content: "";
  width: 1px;
  height: 100%;
  background: #686868;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

#project-1-container .sitemap-item.item-list ul li:last-child:after{
  height: 50%;
  bottom: 50%;
}

#project-1-container .sitemap-item.item-list ul li:first-child:after{
  height: 140%;
  top: auto;
}


#project-1-container #ui-elements{
  max-width: 100%;
  overflow-x:hidden;
}

#project-1-container .sitemap{
  padding-top: 7rem;
}

#project-1-container .sitemap .row .top-line{
  position: relative;
  padding-top: 1.5rem;
}

#project-1-container .sitemap .row .top-line:after{
  content: "";
  width: 1px;
  position: absolute;
  top: 0;
  right: 0;
  margin: auto;
  left: 0;
  height: 1.5rem;
  background: #686868;
}

#project-1-container .sitemap .row .top-line:before{
  content: "";
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 1px;
  background: #686868;
}

#project-1-container .sitemap .row .top-line:first-child:before{
  width: 50%;
  left: 50%;
}

#project-1-container .sitemap .row .top-line:last-child:before{
  width: 50%;
  right: 50%;
}

#project-1-container .row.special-row-3{
  width: 300vw;
}

#project-1-container .row.special-row-6{
  width: 600vw;
}

#project-1-container .shot-footer div{
  margin-top: 1.5rem;
  max-height: 1.2rem;
  line-height: 1.2;
  overflow: hidden;
}

#project-1-container .shot-footer ul{
  list-style: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
  margin: 0;
  padding: 0;
}

#project-1-container .shot-footer ul li{
  padding-bottom: .3rem;
}

#project-1-container .shot-footer ul li:first-child{
  color: transparent !important;
}

#project-1-container{
  max-width: 100%;
  overflow-x: hidden; 
}

#project-1-container section#ui-elements{
  padding-bottom: 0;
}

#project-1-container .final-title-wrapper{
  position: absolute;
  display: flex;
  width: 100vw;
  height: 100%;
  align-items: center;
  top: 0;
  left: 0;
}

#project-1-container .final-title-wrapper h3{
  text-align: center;
  width: 100vw;
}

#project-1-container section#next-project{
  padding-top: 12rem;
  position: relative;
}

#project-2-container section#next-project{
  padding-top: 12rem;
  position: relative;
}

.project-title, .category{
  overflow: hidden;
}

section#next-project .project-wrap{ 
  margin-top: -8rem;
  height: auto;
  width: 35%;
  margin-left: auto;
  margin-right: auto;
  padding: 0; 
} 

section#next-project:after{
  content: "";
  position: absolute;
  width: 100%;
  background: var(--highlight);
  height: 3px;
  bottom: 0;
  left: 0;
}

section.negative, section.negative span, section.negative p{
  color: #141414 !important;
}

.go-back-home{
  position: fixed;
  z-index: 160;
  margin-left: 6rem;
}

.go-back-home a{
  color: white;
  text-transform: none;
  text-decoration: none;
  position: relative;
}

.go-back-home:before{
  content: "";
  position: absolute;
  background: white;
  height: 1px;
  width: 20px;
  top: 0;
  bottom: 0;
  margin: auto;
  left: -2rem;
}

.go-back-home:after{
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-left: 1px solid white;
  border-top: 1px solid white;
  left: -2rem;
  transform: rotate(-45deg);
  top: 0;
  bottom: 0;
  margin: auto;
}

/* ===== Project 2 styles ===== */

#project-2-container .perspective-400{
  perspective: 400;
}

#project-2-container .persona{
  position: relative;
}

#project-2-container .persona ul{
  margin-left: 0;
  padding-left: 0;
}

#project-2-container .persona p, #project-2-container .persona ul li{
  line-height: 130%;
  letter-spacing: 0.01rem;
  color: #cfcfcf;
}

#project-2-container .persona ul li{
  padding-left: 1.5rem;
  list-style: none;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
  position: relative;
}

#project-2-container .persona ul li:before{
  content: "";
  width: 18px;
  top: 1rem;
  height: 1px;
  background: white;
  position: absolute;
  left: 0;
  opacity: .3
}

#project-2-container .persona img{
  max-width: 70%;
}

#project-2-container .persona h5{
  font-family: 'Messapia-Rg', serif;
  font-size: 2em;
  margin-bottom: 1rem;
}

.role-wrap h5{
  font-family: 'Messapia-Rg', serif;
  font-size: 2em;
  margin-bottom: 1rem;
}

.role-wrap img{
  max-width: 80%;
}

#project-3-container #user-isho{
  padding: 0;
}

#isho-heuristic .bar{
  border: 1px solid rgba(255, 255, 255, 0.2);
  min-height: 1.5rem;
  padding: 5px;
  position: relative;
  transform-origin: left bottom;
}

.bar .progress{
  background: rgba(255, 255, 255, 0.7);
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  min-width: 20px;
  transform-origin: left top;
}


.bar .progress[data-bar="20"]{
  width: 15%;
}

.bar .progress[data-bar="30"]{
  width: 25%;
}

.bar .progress[data-bar="25"]{
  width: 20%;
}

#project-3-container #visual{
  max-width: 100%;
  overflow: hidden;
}

#project-3-container .font-1{
  margin-top: 10rem;
}

#project-3-container .font-2{
  margin-bottom: 10rem;
}

#project-3-container p.dark{
  color: #282729;
}


#isho-ideation{
  padding-top: 20rem;
}

#isho-ideation .layout{
  width: 100%;
  height: 80vh;
  background: white;
  border-radius: 8px;
  position: relative;
  padding: 10px;
  margin: auto;
  transform-origin: top center;
}

#isho-ideation .layout .column-wrapper{
  height: 100%;
  width: 100%;
  position: relative;
}

.layout .column-wrapper > div{
  position: absolute;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.layout .column-wrapper > div span{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  text-align: center;
}

.layout .isho-project-header span, .layout .isho-secondary-navigation span, .layout .isho-project-content span{
  color: rgba(0, 0, 0, 0.6);
}

.layout .isho-main-navigation{
  left: 0;
  top: 0;
  height: 100%;
  width: 6%;
  background: #222;
  z-index: 10;
}

.layout .isho-project-header{
  left: 7%;
  width: 93%;
  height: 30%;
  top: 0;
  background: #FBEFE9;
}

.layout .isho-secondary-navigation{
  left: 7%;
  width: 25%;
  height: 68%;
  top: 32%;
  background: #E7B6AA;
}

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

.trigger-layout .device{
  max-height: 1.5rem;
  line-height: 100%;
  overflow: hidden;
}

.trigger-layout .device ul{
  padding-left: 0rem;
  margin: 0;
  list-style: none;
}

.trigger-layout ul li{
  text-align: right;
}

.layout .isho-project-content{
  left: 33%;
  width: 67%;
  height: 68%;
  top: 32%;
  background: #ddd;
} 

#trigger-tablet, #trigger-mobile{
  min-height: 90vh;
}


#project-2-container .persona-1 .quote{
  background: #F2633E;

}

#project-2-container .persona-2 .quote{
  background: #53C2C3;

}

#project-2-container .persona-3 .quote{
  background: #B1A9D1;

}

#project-2-container .persona p.quote{
  position: absolute;
  right: 5%;
  max-width: 50%;
  top: 12rem;
  padding: 1.5rem;
  line-height: 130%;
  color: white;
}

#project-2-container .persona p.description{
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.1rem;
}

#project-2-container .persona .quote:before{
  content: "";
  position: absolute;
  left: -20px;
  width: 10px;
  border-top: 20px solid white;
  height: 20px;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

#project-2-container .persona-1 .quote:before{
  border-top: 20px solid #F2633E;
}

#project-2-container .persona-2 .quote:before{
  border-top: 20px solid #53C2C3;
}

#project-2-container .persona-3 .quote:before{
  border-top: 20px solid #B1A9D1;
}

#project-2-container #app-intro{
  min-height: 100vh;
}

#user-journey{
  padding: 0;
}

#user-journey .journey-titles-wrapper{
  padding: 15vh 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

#user-journey .journey-wrap{
  min-height: 100vh;
}

#user-journey .journey-title.active{
  opacity: 1;
}

#user-journey .journey-title .pulse-journey{
  width: .5rem;
  height: .5rem;
  margin-bottom: 1px;
  display: inline-block;
  border-radius: 100%;
  background: white;
  margin-right: .6rem;
  position: relative;
}

#user-journey .journey-title .pulse-journey span{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: white;
  opacity: .6;
  border-radius: 100%;
  transform-origin: center;
}

#user-journey .timer{
  width: 11px;
  height: 1px;
  background: white;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  transform-origin: center;
}

#user-journey .journey-title:first-child .pulse-journey, #user-journey .journey-title:first-child .pulse-journey span{
  background: #F2633E;
}

#user-journey .journey-title:nth-child(2) .pulse-journey, #user-journey .journey-title:nth-child(2) .pulse-journey span{
  background: #53C2C3; 
}

#user-journey .journey-title:last-child .pulse-journey, #user-journey .journey-title:last-child .pulse-journey span{
  background: #B1A9D1; 
}

#user-journey > div.h-100{
  border-bottom: 1px solid rgba(100, 100, 100, 0.1);
}

#user-journey .journey-title h5{
  font-family: 'Messapia-Rg', serif;
  font-size: 2em;
  margin-bottom: 1rem;
  margin-top: 0;
}

#user-journey .timeline-wrapper{
  height: 100%;
  position: relative;
}

#user-journey .timeline-wrapper ul{
  padding: 15vh 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  margin: 0; 
}

#user-journey .timeline-wrapper .vertical-line{
  background: white;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 1px;
  height: 100%;
  z-index: 1;
  opacity: .6;
}

#user-journey .timeline-wrapper ul li{
  list-style: none;
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 0.1rem;
  padding: 0.2rem 0rem 0.35rem;
  border-style: solid;
  border-width: 1px;
  border-color: #646464;
  background: #1c1c1c;
  position: relative;
  z-index: 10;
}

#user-journey .timeline-wrapper ul li.active{
  background: white;
  color: black;
  border-style: solid;
  border-width: 1px;
  border-color: #1c1c1c;
}

#user-journey .journey-explanation h5{
  font-size: 1.25rem;
  line-height: 135%;
}

#user-journey .journey-explanation p{
  line-height: 180%;
  letter-spacing: 0.01rem;
  color: #cfcfcf;
}

#user-journey .screens-container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.journey-explanation-wrapper{
  display: flex;
  align-items: center;
  height: 100%;
}

.journey-explanation-wrapper .journey-explanation{
  position: relative;
}

.journey-explanation-wrapper .journey-explanation > div{
  position: absolute;
  left: 0;
  top: 0;
}

.journey-explanation-wrapper .journey-explanation > div:first-child{
  position: relative;
}

#user-journey .screens-container .img-container{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 80vh;
}

#user-journey .screens-container .img-container img:last-child{
  position: relative;
}

#user-journey .screens-container .img-container img, #user-journey .screens-container .img-container video{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  margin: auto;
  border-radius: 20px;
  max-width: 100%;
}

#user-journey .screens-container .img-container video#wireframe-1{
  top: 0px;
  left: 0px;
  z-index: 100;
}

#user-journey .screens-container .img-container video#wireframe-2{
  z-index: 90;
}

#user-journey .screens-container .img-container video#wireframe-3{
  z-index: 80;
}

#user-journey .screens-container .img-container video#wireframe-4{
  z-index: 70;
}

#user-journey .screens-container .img-container video#wireframe-5{
  z-index: 60;
}

#user-journey .screens-container .img-container video#wireframe-6{
  z-index: 50;
}

#user-journey .screens-container .img-container video#wireframe-7{
  z-index: 40;
}

#user-journey .screens-container .img-container video#wireframe-8{
  z-index: 30;
}

#user-journey .screens-container .img-container video#wireframe-9{
  z-index: 20;
}

.img-container.overflow-visible{
  overflow: visible;
}

.b-radius-video{
  border-radius: 20px;
}

.row.h-100{
  min-height: 100vh;
}

.h-100{
  min-height: 100vh;
}

#screens-grid{
  max-width: 100%;
  overflow: hidden;
}

#screens-grid .container-fluid{
  transform: rotate(-15deg);
}

#screens-grid figure{
  padding: 2rem 1rem;
  margin: 0;
}

#screens-grid img{
  border-radius: 30px;
}

.container-fluid.container-fluid-xl{
  width: 120%;
  margin-left: -10%;
  padding: 5rem 0;
}

#project-3-container #isho-grid{
  max-width: 100%;
  overflow: hidden;
  height: 320vh;
}

#project-3-container section#brief{
  padding-top: 0;
  max-width: 100%;
  overflow: hidden;
}


/* Project-4 container */

#project-4-container .color-container{
  transform-origin: top right;
}

#project-4-container .color-container[data-asset="1"]{
  background: linear-gradient(90deg, #FB926D -0.42%, #F46287 100.29%);
}

#project-4-container .color-container[data-asset="2"]{
  background: #2786EA;
}

#project-4-container .color-container[data-asset="3"]{
  background: #1D2744;
}

#project-4-container .color-container[data-asset="4"]{
  background: #eee;
}

#project-4-container #vector{
  padding: 0 0 6rem 0;
  max-width: 100%;
  overflow: hidden;
}

#project-4-container #vector .text-block{
  margin-top: -6rem;
}

#assistance img{
  border-radius: 12px;
}

#project-4-container section#illustrations{
  padding-top: 0 !important;
  max-width: 100%;
  overflow: hidden;
}

#project-4-container section#illustrations:after{
  content: "";
  bottom: 0;
  width: 100%;
  left: 0;
  position: absolute;
  background: #eee;
  height: 60%
}

#illustrations img.hidden-mobile{
  max-width: 250%;
  position: relative;
  z-index: 1;
}

#project-4-container #digital{
  background: #eee;
  padding-bottom: 12rem;
}

#website .img-container{
  transform-origin: center top;
}

#project-4-container section#website{
  padding-top: 8rem;
  padding-bottom: 0;
}

#social-media-screens img{
  border-radius: 30px;
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
}

.container-fluid-xxl{
  width: 400%;
  margin-left: -150%;
  padding: 5rem 0;
  transform-origin: center top;
}

.img-fluid{
  max-width: 100%;
  height: auto;
}

/* ===== Visibility and text helpers ===== */

.only-mobile{
  visibility: hidden;
  display: none;
}

#intro h2 span.only-mobile{
  visibility: hidden !important;
  display: none !important;
}

.hidden-mobile{
  display: block;
}

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

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

#project-1-wf-2, #project-1-wf-3{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

#lessons h3{
  margin-top: 2.5rem;
}

#next-project .project-wrap h2{
  left: -4rem;
}

.small{
  font-size: 0.75rem;
}

p.small{
  opacity: .7;
}

.h-100{
  height: 100% !important;
}

.auto-0{
  opacity: 0;
  visibility: inherit;
}



/* ====== Media queries ====== */

@media screen and (max-width: 550px) and (orientation: portrait){
  .hi-message h1{
    font-size: 2.5rem;
  }

  .home-page #hero .image-container{
    top: -2rem;
  }

  #hero h1{
    font-size: 2.5rem;
    line-height: 130%;
    padding-left: 0;
    padding-right: 0;
  }

  #top-curve text, .next-project-curve text{
    font-size: 2rem;
  }

  #selected-curve text, #projects-curve text{
    font-size: 2.4rem;
  }

  #bottom-curve text{
    font-size: .7rem;
    letter-spacing: 0.
  }

  #bottom-curve{
    bottom: 10%;
  }

  #top-curve{
    bottom: 15%;
  }

  .doer{
    left: 0;
    width: 100px;
    right: 0;
    margin: auto;
    text-align: center;
    z-index: 20;
    bottom: 7.5rem;
  }

  .doer.only-mobile{
    position: relative;
    margin-top: 1rem;
    margin-bottom: -2rem;
  }

  .doer.only-mobile p{
    overflow: visible;
  }

  .doer.only-mobile span:after{
    content: "";
    width: 100%;
    height: 1px;
    background: var(--highlight);
    position: absolute;
    bottom: -12px;
    left: 0
  }

  .doer .arrow{
    right: 0;
  }

  .doer p{
    display: inline-block;
    position: relative;
    perspective: 0;
  }

  /* ===== Styles intro section ===== */
  
  #intro{
    display: block;
  }

  #intro{
    padding: 7rem .5rem;
    background: var(--highlight);
  }

  #intro h2 span.only-mobile{
  visibility: visible !important;
  display: inline-block !important;
}

  #intro h2{
    max-width: 100%;
    font-size: 3.6rem;
    line-height: 120%;
    margin-top: 2rem;
  }

  /* ===== Styles how to section ===== */

  #how-to{
    padding-top: 12rem;
  }

  #how-to > div{
    display: block;
  }

  .grid{
    padding-left: 3.5rem;
  }

  .rule{
    max-width: 100%;
    padding: 1rem 2rem;
  }

  .rule h3{
    font-size: 2rem;
  }

  .rule span{
    left: 0;
    top: 24px;
  } 

  /* ===== Selected projects styles mobile ===== */

  #projects{
    min-height: 40vh;
    padding-top: 0;
  }

  .projects-selected{
    bottom: 0;
  }

  .curve-selected{
    bottom: -6rem;
  }

  /* ===== Projects section styles mobile ===== */

  .project-wrap h2{
    font-size: 2.5rem;
  }

  .project-wrap{
    padding: 2rem;
    width: 100%;
    margin-top: 2rem !important;
  }

  .project-wrap img{
    object-fit: cover;
    width: 100%;
    height: 100;
  }

  .project-wrap{
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  #all-projects .row-hm{
    padding-bottom: 0;
  }

  .project-wrap .project{
    padding-left: 4rem;
    background: transparent;
  }

  .project-wrap span{
    text-align: right;
    display: block;
  }

  .info-container{
    margin-top:-10vh;
  }

  #all-projects .row-hm{
    display: block;
  }

  /* contact and let's talk styles mobile */

  #lets-talk h4, #contact h4{
    font-size: 1.8rem;
    text-align: center;
  }

  .mail-me-button{
    display: inline-block;
    width: 200px;
    height: 200px;
    background: white;
    border-radius: 50%;
    color: var(--highlight);
    text-decoration: none;
    text-align: center;
    margin: auto;
    position: relative;
    box-shadow: 0px 5px 12px rgba(0, 0, 0, 0.1);
  }

  .mail-me-button span{
    position: absolute;
    bottom: 45%;
    left: 0;
    right: 0;
    margin: auto;
    display: inline-block;
    color: var(--highlight);
    font-size: 1.2rem;
  }

  #lets-talk, #contact{
    padding: 2rem;
  }

  .only-mobile{
    visibility: visible;
    display: block;
  }

  .hidden-mobile{
    display: none !important;
  }

  #lets-talk div.ext-links, #contact div.ext-links {
    display: block;
    text-align: center;
    margin-top: 1.5rem;
  }

  #lets-talk span.legal, #contact span.legal{
    left: 2rem;
    right: 2rem;
  }

  #project-hero h2{
    font-size: 2.8rem;
  }

  #second-image{
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  #project-hero h5{
    font-size: 1.3rem;
    padding: 0 1rem;
  }

  #project-1-container .row.special-row-3{
    width: 100vw;
    margin: 0;
  }

  .first-images{
    padding: 0.3rem;
    border-radius: 10px;  
  }

  #project-about h3{
    text-align: left;
    font-size: 2.5rem;
    margin-bottom: 0;
  }

  .left-negative{
    transform: translateX(0);
  }

  .text-block.no-margin-sm{
    margin-top: 0;
  }

  #project-1-container section:not(#project-hero){
    padding: 3rem 0;
  }

  .project-container h4{
    font-size: 1.7rem;
  }

  .project-container h3{
    font-size: 2rem;
  }

  #project-1-container #research{
    overflow-x: visible;
  }

  #ideating{
    background: #eee;
  }

  #project-1-container .screen-browser{
    padding: 3%;
    border-radius: 10px;
  }

  #ui-elements img{
    width: 300%;
    margin-left: -100%;
  }

  #project-1-container .row.special-row-6{
    width: 100vw;
  }

  #project-1-container .final-title-wrapper{
    position: relative;
    display: block;
    height: auto;
    align-items: auto;
  }

  #slideshow .img-container{
    margin-bottom: 2rem;
  }

  #lessons h3.text-right{
    text-align: center;

  }

  .list-block ul li{
    margin-left: 3rem;
  }

  #project-1-container .sitemap-item.item-big{
    max-width: 100%;
  }

  #project-1-container .sitemap .row .top-line:before{
    width: 50%;
  }

  #project-1-container .sitemap .row .top-line:nth-child(odd):before{
    right: 0;
    left: auto;
  }

  #project-1-container #how-intro h3{
    margin-bottom: -3.5rem;
  }

  #project-1-container .first-images img, #project-1-container .first-images video{
    border-radius: 6px;
  }

  #project-1-container section.intro-screens{
    padding-top: 0 !important;
  }


  section#next-project .project-wrap{
    width: 90%;
  }

  .next-project-curve svg{
    margin-top: 3rem;
    margin-bottom: -12rem;
  }
  
  #next-project .project-wrap h2{
    left: 0rem;
  }

  .mobile-rounded{
    border-radius: 22px;
  }

  .video-rounded video{
    border-radius: 15px;
  }

  .mobile-rounded:before{
    width: 40%;
    height: 25px;
    border-radius: 0px 0px 10px 10px;
  }

  .mobile-rounded:after{
    height: 2px;
    width: 30%;
  }

  .project-container section#parallax-screens{
    padding-top: 0;
    padding-bottom: 0;
  }

  #project-2-container #app-intro{
    min-height: auto;
    padding-top: 0;
    padding-bottom: 2.5rem;
  }

  .project-container section#app-intro{
    min-height: auto;
    padding-bottom: 0;
  }

  #project-2-container #project-about{
    padding: 0;
  }

  #user-journey .only-mobile video{
    max-width: 100%;
    border-radius: 20px;
  }

  #user-journey .journey-titles-wrapper{
    padding: 0;
  }

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

  #project-2-container .color-container[data-color="1"]{
    height: 55px;
    width: 55px;
    border-radius: 14px;
  }

  #project-2-container .color-container[data-color="2"]{
    height: 70px;
    width: 70px;
  }

  #project-2-container .color-container[data-color="3"]{
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 60px solid #78CDD2;
  }

  #project-2-container .color-container[data-color="4"]{
    width: 65px;
    height: 65px;
    margin-left: 1rem;
    border-radius: 14px;
  }

  #screens-grid figure{
    padding: 0 0 1rem;
  }

  #screens-grid img{
    border-radius: 12px;
  }

  #project-2-container .container-fluid.container-fluid-xl{
    width: 300%;
    margin-left: -50%;
  }

  .video-rounded-sm video{
    border-radius: 8px;
  }

  #hero .image-container{
    overflow: hidden;
  }

  #intro{
    overflow: hidden;
  }

  #intro h2 > div{
    overflow: visible;
  }

  #project-3-container .video-rounded-xs.desktop{
    padding: .5rem .5rem 1.5rem;
  }

  #about-isho h3 {
    text-align: left;
    font-size: 2.5rem;
    margin-bottom: 0;
  }

  #project-3-container .phone > * {
    border-radius: 12px;
  }

  #project-3-container .phone:before{
    width: 40%;
    height: 22px;
    border-radius: 0px 0px 8px 8px;
  }

  .project-container section.full-img-container{
    padding: 0;
  }

  #pin-element-1{
    padding-bottom: 2rem;
  }

  #isho-ideation{
    padding: 5rem 0;
  }

  #isho-heuristic{
    padding-bottom: 3rem; 
    padding-top: 3rem;
  }

  .layout .column-wrapper > div span{
    font-size: 9px;
  }

  #project-3-container section#isho-preview{
    padding: 0;
  }

  .text-block-tl h5{
    margin-top: 0;
    margin-bottom: 1rem;
  }

  #brief{
    padding-top: 0;
    text-align: center;
  }

  .project-container section#assistance, .project-container section#progress{
    padding-top: 0;
  }

  #project-3-container p.dark{
    color: #cfcfcf;
  }

  #isho-grid{
    padding-top: 0;
  }

  .container-fluid-xxl{
    width: 100%;
    margin-left: 0;
    padding: 0 .5rem;
  }

  #project-3-container .font-1{
    margin-top: 3rem;
  }

  #project-3-container .font-2{
    margin-bottom: 3rem;
  }

  #project-3-container #visual{
    padding-bottom: 0;
  }

  #project-3-container #isho-grid{
    height: auto;
    padding-bottom: 0;
  }

  #isho-ideation .layout{
    height: 260px;
    padding: 5px;
  }

  .layout .isho-main-navigation{
    width: 13%;
  }

  .layout .isho-project-header{
    left: 15%;
    width: 85%;
    height: 30%;
  }

  .layout .isho-secondary-navigation{
    left: 15%;
  }

  .layout .isho-project-content{
    left: 42%;
    width: 58%;
  }

  #progress{
    text-align: center;
  }

  .tablet{
    padding: 0.5rem;
  }

  .phone{
    border-radius: 20px;
  }

  #project-3-container section#screens-isho{
    padding-top: 0;
  }

  #project-4-container section#preview{
    padding-top: 4rem;
    padding-bottom: 1rem;
  }

  #project-4-container #project-about{
    padding-top: 0;
    padding-bottom: 3rem;
  }

  #project-4-container #vector{
    background: #1D2744;
    padding-top: 2rem;
    padding-bottom: 3rem;
  }

  #project-4-container #vector .text-block{
    margin-top: 0;
  }

  #project-4-container #vector img{
    max-width: 130%;
    transform: translateX(-15%);
    -webkit-transform: translateX(-15%);
  }

  #project-4-container section#illustrations{
    background: #1D2744;
    padding-bottom: 0;
  }

  #project-4-container #illustrations img.only-mobile{
    z-index: 1;
    position: relative;
  }

  #project-4-container section#illustrations:after{
    height: 70%;
  }

  #project-4-container #digital{
    padding-bottom: 4rem;
  }

  .project-container .full-img-container .img-container{
    padding: 0;
  } 

  #project-4-container section#website{
    padding-top: 4rem;
  }

  #thanks{
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
}


@media screen and (min-width: 1400px){
  /*html{
    font-size: 20px;
  }*/
}

@media screen and (min-width: 551px) and (max-width: 1270px){
  #lets-talk h1, #contact h1{
    font-size: 4rem;
  }
}

@media screen and (min-width: 551px){
  #project-4-container #website .text-block{
    margin-bottom: 10rem;
  }
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .sr-only class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  /*
   * Printing Tables:
   * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
   */
  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}

/* ===== Bootstrap grid helpers ===== */

/*!
 * Bootstrap Grid v5.0.0-beta1 (https://getbootstrap.com/)
 * Copyright 2011-2020 The Bootstrap Authors
 * Copyright 2011-2020 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  width: 100%;
  padding-right: var(--bs-gutter-x, 0.75rem);
  padding-left: var(--bs-gutter-x, 0.75rem);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container-sm, .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container-md, .container-sm, .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container-lg, .container-md, .container-sm, .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1320px;
  }
}
.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--bs-gutter-y) * -1);
  margin-right: calc(var(--bs-gutter-x) / -2);
  margin-left: calc(var(--bs-gutter-x) / -2);
}
.row > * {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) / 2);
  padding-left: calc(var(--bs-gutter-x) / 2);
  margin-top: var(--bs-gutter-y);
}

.col {
  flex: 1 0 0%;
}

.row-cols-auto > * {
  flex: 0 0 auto;
  width: auto;
}

.row-cols-1 > * {
  flex: 0 0 auto;
  width: 100%;
}

.row-cols-2 > * {
  flex: 0 0 auto;
  width: 50%;
}

.row-cols-3 > * {
  flex: 0 0 auto;
  width: 33.3333333333%;
}

.row-cols-4 > * {
  flex: 0 0 auto;
  width: 25%;
}

.row-cols-5 > * {
  flex: 0 0 auto;
  width: 20%;
}

.row-cols-6 > * {
  flex: 0 0 auto;
  width: 16.6666666667%;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
}

.col-1 {
  flex: 0 0 auto;
  width: 8.3333333333%;
}

.col-2 {
  flex: 0 0 auto;
  width: 16.6666666667%;
}

.col-3 {
  flex: 0 0 auto;
  width: 25%;
}

.col-4 {
  flex: 0 0 auto;
  width: 33.3333333333%;
}

.col-5 {
  flex: 0 0 auto;
  width: 41.6666666667%;
}

.col-6 {
  flex: 0 0 auto;
  width: 50%;
}

.col-7 {
  flex: 0 0 auto;
  width: 58.3333333333%;
}

.col-8 {
  flex: 0 0 auto;
  width: 66.6666666667%;
}

.col-9 {
  flex: 0 0 auto;
  width: 75%;
}

.col-10 {
  flex: 0 0 auto;
  width: 83.3333333333%;
}

.col-11 {
  flex: 0 0 auto;
  width: 91.6666666667%;
}

.col-12 {
  flex: 0 0 auto;
  width: 100%;
}

.offset-1 {
  margin-left: 8.3333333333%;
}

.offset-2 {
  margin-left: 16.6666666667%;
}

.offset-3 {
  margin-left: 25%;
}

.offset-4 {
  margin-left: 33.3333333333%;
}

.offset-5 {
  margin-left: 41.6666666667%;
}

.offset-6 {
  margin-left: 50%;
}

.offset-7 {
  margin-left: 58.3333333333%;
}

.offset-8 {
  margin-left: 66.6666666667%;
}

.offset-9 {
  margin-left: 75%;
}

.offset-10 {
  margin-left: 83.3333333333%;
}

.offset-11 {
  margin-left: 91.6666666667%;
}

.g-0,
.gx-0 {
  --bs-gutter-x: 0;
}

.g-0,
.gy-0 {
  --bs-gutter-y: 0;
}

.g-1,
.gx-1 {
  --bs-gutter-x: 0.25rem;
}

.g-1,
.gy-1 {
  --bs-gutter-y: 0.25rem;
}

.g-2,
.gx-2 {
  --bs-gutter-x: 0.5rem;
}

.g-2,
.gy-2 {
  --bs-gutter-y: 0.5rem;
}

.g-3,
.gx-3 {
  --bs-gutter-x: 1rem;
}

.g-3,
.gy-3 {
  --bs-gutter-y: 1rem;
}

.g-4,
.gx-4 {
  --bs-gutter-x: 1.5rem;
}

.g-4,
.gy-4 {
  --bs-gutter-y: 1.5rem;
}

.g-5,
.gx-5 {
  --bs-gutter-x: 3rem;
}

.g-5,
.gy-5 {
  --bs-gutter-y: 3rem;
}

@media (min-width: 576px) {
  .col-sm {
    flex: 1 0 0%;
  }

  .row-cols-sm-auto > * {
    flex: 0 0 auto;
    width: auto;
  }

  .row-cols-sm-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }

  .row-cols-sm-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }

  .row-cols-sm-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .row-cols-sm-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }

  .row-cols-sm-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }

  .row-cols-sm-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }

  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
  }

  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }

  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }

  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }

  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }

  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }

  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }

  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }

  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }

  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }

  .offset-sm-0 {
    margin-left: 0;
  }

  .offset-sm-1 {
    margin-left: 8.3333333333%;
  }

  .offset-sm-2 {
    margin-left: 16.6666666667%;
  }

  .offset-sm-3 {
    margin-left: 25%;
  }

  .offset-sm-4 {
    margin-left: 33.3333333333%;
  }

  .offset-sm-5 {
    margin-left: 41.6666666667%;
  }

  .offset-sm-6 {
    margin-left: 50%;
  }

  .offset-sm-7 {
    margin-left: 58.3333333333%;
  }

  .offset-sm-8 {
    margin-left: 66.6666666667%;
  }

  .offset-sm-9 {
    margin-left: 75%;
  }

  .offset-sm-10 {
    margin-left: 83.3333333333%;
  }

  .offset-sm-11 {
    margin-left: 91.6666666667%;
  }

  .g-sm-0,
.gx-sm-0 {
    --bs-gutter-x: 0;
  }

  .g-sm-0,
.gy-sm-0 {
    --bs-gutter-y: 0;
  }

  .g-sm-1,
.gx-sm-1 {
    --bs-gutter-x: 0.25rem;
  }

  .g-sm-1,
.gy-sm-1 {
    --bs-gutter-y: 0.25rem;
  }

  .g-sm-2,
.gx-sm-2 {
    --bs-gutter-x: 0.5rem;
  }

  .g-sm-2,
.gy-sm-2 {
    --bs-gutter-y: 0.5rem;
  }

  .g-sm-3,
.gx-sm-3 {
    --bs-gutter-x: 1rem;
  }

  .g-sm-3,
.gy-sm-3 {
    --bs-gutter-y: 1rem;
  }

  .g-sm-4,
.gx-sm-4 {
    --bs-gutter-x: 1.5rem;
  }

  .g-sm-4,
.gy-sm-4 {
    --bs-gutter-y: 1.5rem;
  }

  .g-sm-5,
.gx-sm-5 {
    --bs-gutter-x: 3rem;
  }

  .g-sm-5,
.gy-sm-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 768px) {
  .col-md {
    flex: 1 0 0%;
  }

  .row-cols-md-auto > * {
    flex: 0 0 auto;
    width: auto;
  }

  .row-cols-md-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }

  .row-cols-md-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }

  .row-cols-md-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .row-cols-md-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }

  .row-cols-md-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }

  .row-cols-md-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }

  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
  }

  .col-md-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }

  .col-md-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }

  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  .col-md-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .col-md-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }

  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .col-md-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }

  .col-md-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }

  .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }

  .col-md-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }

  .col-md-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }

  .col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }

  .offset-md-0 {
    margin-left: 0;
  }

  .offset-md-1 {
    margin-left: 8.3333333333%;
  }

  .offset-md-2 {
    margin-left: 16.6666666667%;
  }

  .offset-md-3 {
    margin-left: 25%;
  }

  .offset-md-4 {
    margin-left: 33.3333333333%;
  }

  .offset-md-5 {
    margin-left: 41.6666666667%;
  }

  .offset-md-6 {
    margin-left: 50%;
  }

  .offset-md-7 {
    margin-left: 58.3333333333%;
  }

  .offset-md-8 {
    margin-left: 66.6666666667%;
  }

  .offset-md-9 {
    margin-left: 75%;
  }

  .offset-md-10 {
    margin-left: 83.3333333333%;
  }

  .offset-md-11 {
    margin-left: 91.6666666667%;
  }

  .g-md-0,
.gx-md-0 {
    --bs-gutter-x: 0;
  }

  .g-md-0,
.gy-md-0 {
    --bs-gutter-y: 0;
  }

  .g-md-1,
.gx-md-1 {
    --bs-gutter-x: 0.25rem;
  }

  .g-md-1,
.gy-md-1 {
    --bs-gutter-y: 0.25rem;
  }

  .g-md-2,
.gx-md-2 {
    --bs-gutter-x: 0.5rem;
  }

  .g-md-2,
.gy-md-2 {
    --bs-gutter-y: 0.5rem;
  }

  .g-md-3,
.gx-md-3 {
    --bs-gutter-x: 1rem;
  }

  .g-md-3,
.gy-md-3 {
    --bs-gutter-y: 1rem;
  }

  .g-md-4,
.gx-md-4 {
    --bs-gutter-x: 1.5rem;
  }

  .g-md-4,
.gy-md-4 {
    --bs-gutter-y: 1.5rem;
  }

  .g-md-5,
.gx-md-5 {
    --bs-gutter-x: 3rem;
  }

  .g-md-5,
.gy-md-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 992px) {
  .col-lg {
    flex: 1 0 0%;
  }

  .row-cols-lg-auto > * {
    flex: 0 0 auto;
    width: auto;
  }

  .row-cols-lg-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }

  .row-cols-lg-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }

  .row-cols-lg-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .row-cols-lg-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }

  .row-cols-lg-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }

  .row-cols-lg-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }

  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
  }

  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }

  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }

  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }

  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }

  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }

  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }

  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }

  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }

  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }

  .offset-lg-0 {
    margin-left: 0;
  }

  .offset-lg-1 {
    margin-left: 8.3333333333%;
  }

  .offset-lg-2 {
    margin-left: 16.6666666667%;
  }

  .offset-lg-3 {
    margin-left: 25%;
  }

  .offset-lg-4 {
    margin-left: 33.3333333333%;
  }

  .offset-lg-5 {
    margin-left: 41.6666666667%;
  }

  .offset-lg-6 {
    margin-left: 50%;
  }

  .offset-lg-7 {
    margin-left: 58.3333333333%;
  }

  .offset-lg-8 {
    margin-left: 66.6666666667%;
  }

  .offset-lg-9 {
    margin-left: 75%;
  }

  .offset-lg-10 {
    margin-left: 83.3333333333%;
  }

  .offset-lg-11 {
    margin-left: 91.6666666667%;
  }

  .g-lg-0,
.gx-lg-0 {
    --bs-gutter-x: 0;
  }

  .g-lg-0,
.gy-lg-0 {
    --bs-gutter-y: 0;
  }

  .g-lg-1,
.gx-lg-1 {
    --bs-gutter-x: 0.25rem;
  }

  .g-lg-1,
.gy-lg-1 {
    --bs-gutter-y: 0.25rem;
  }

  .g-lg-2,
.gx-lg-2 {
    --bs-gutter-x: 0.5rem;
  }

  .g-lg-2,
.gy-lg-2 {
    --bs-gutter-y: 0.5rem;
  }

  .g-lg-3,
.gx-lg-3 {
    --bs-gutter-x: 1rem;
  }

  .g-lg-3,
.gy-lg-3 {
    --bs-gutter-y: 1rem;
  }

  .g-lg-4,
.gx-lg-4 {
    --bs-gutter-x: 1.5rem;
  }

  .g-lg-4,
.gy-lg-4 {
    --bs-gutter-y: 1.5rem;
  }

  .g-lg-5,
.gx-lg-5 {
    --bs-gutter-x: 3rem;
  }

  .g-lg-5,
.gy-lg-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 1200px) {
  .col-xl {
    flex: 1 0 0%;
  }

  .row-cols-xl-auto > * {
    flex: 0 0 auto;
    width: auto;
  }

  .row-cols-xl-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }

  .row-cols-xl-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }

  .row-cols-xl-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .row-cols-xl-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }

  .row-cols-xl-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }

  .row-cols-xl-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }

  .col-xl-auto {
    flex: 0 0 auto;
    width: auto;
  }

  .col-xl-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }

  .col-xl-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }

  .col-xl-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  .col-xl-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .col-xl-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }

  .col-xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .col-xl-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }

  .col-xl-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }

  .col-xl-9 {
    flex: 0 0 auto;
    width: 75%;
  }

  .col-xl-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }

  .col-xl-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }

  .col-xl-12 {
    flex: 0 0 auto;
    width: 100%;
  }

  .offset-xl-0 {
    margin-left: 0;
  }

  .offset-xl-1 {
    margin-left: 8.3333333333%;
  }

  .offset-xl-2 {
    margin-left: 16.6666666667%;
  }

  .offset-xl-3 {
    margin-left: 25%;
  }

  .offset-xl-4 {
    margin-left: 33.3333333333%;
  }

  .offset-xl-5 {
    margin-left: 41.6666666667%;
  }

  .offset-xl-6 {
    margin-left: 50%;
  }

  .offset-xl-7 {
    margin-left: 58.3333333333%;
  }

  .offset-xl-8 {
    margin-left: 66.6666666667%;
  }

  .offset-xl-9 {
    margin-left: 75%;
  }

  .offset-xl-10 {
    margin-left: 83.3333333333%;
  }

  .offset-xl-11 {
    margin-left: 91.6666666667%;
  }

  .g-xl-0,
.gx-xl-0 {
    --bs-gutter-x: 0;
  }

  .g-xl-0,
.gy-xl-0 {
    --bs-gutter-y: 0;
  }

  .g-xl-1,
.gx-xl-1 {
    --bs-gutter-x: 0.25rem;
  }

  .g-xl-1,
.gy-xl-1 {
    --bs-gutter-y: 0.25rem;
  }

  .g-xl-2,
.gx-xl-2 {
    --bs-gutter-x: 0.5rem;
  }

  .g-xl-2,
.gy-xl-2 {
    --bs-gutter-y: 0.5rem;
  }

  .g-xl-3,
.gx-xl-3 {
    --bs-gutter-x: 1rem;
  }

  .g-xl-3,
.gy-xl-3 {
    --bs-gutter-y: 1rem;
  }

  .g-xl-4,
.gx-xl-4 {
    --bs-gutter-x: 1.5rem;
  }

  .g-xl-4,
.gy-xl-4 {
    --bs-gutter-y: 1.5rem;
  }

  .g-xl-5,
.gx-xl-5 {
    --bs-gutter-x: 3rem;
  }

  .g-xl-5,
.gy-xl-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 1400px) {
  .col-xxl {
    flex: 1 0 0%;
  }

  .row-cols-xxl-auto > * {
    flex: 0 0 auto;
    width: auto;
  }

  .row-cols-xxl-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }

  .row-cols-xxl-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }

  .row-cols-xxl-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .row-cols-xxl-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }

  .row-cols-xxl-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }

  .row-cols-xxl-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }

  .col-xxl-auto {
    flex: 0 0 auto;
    width: auto;
  }

  .col-xxl-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }

  .col-xxl-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }

  .col-xxl-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  .col-xxl-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .col-xxl-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }

  .col-xxl-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .col-xxl-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }

  .col-xxl-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }

  .col-xxl-9 {
    flex: 0 0 auto;
    width: 75%;
  }

  .col-xxl-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }

  .col-xxl-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }

  .col-xxl-12 {
    flex: 0 0 auto;
    width: 100%;
  }

  .offset-xxl-0 {
    margin-left: 0;
  }

  .offset-xxl-1 {
    margin-left: 8.3333333333%;
  }

  .offset-xxl-2 {
    margin-left: 16.6666666667%;
  }

  .offset-xxl-3 {
    margin-left: 25%;
  }

  .offset-xxl-4 {
    margin-left: 33.3333333333%;
  }

  .offset-xxl-5 {
    margin-left: 41.6666666667%;
  }

  .offset-xxl-6 {
    margin-left: 50%;
  }

  .offset-xxl-7 {
    margin-left: 58.3333333333%;
  }

  .offset-xxl-8 {
    margin-left: 66.6666666667%;
  }

  .offset-xxl-9 {
    margin-left: 75%;
  }

  .offset-xxl-10 {
    margin-left: 83.3333333333%;
  }

  .offset-xxl-11 {
    margin-left: 91.6666666667%;
  }

  .g-xxl-0,
.gx-xxl-0 {
    --bs-gutter-x: 0;
  }

  .g-xxl-0,
.gy-xxl-0 {
    --bs-gutter-y: 0;
  }

  .g-xxl-1,
.gx-xxl-1 {
    --bs-gutter-x: 0.25rem;
  }

  .g-xxl-1,
.gy-xxl-1 {
    --bs-gutter-y: 0.25rem;
  }

  .g-xxl-2,
.gx-xxl-2 {
    --bs-gutter-x: 0.5rem;
  }

  .g-xxl-2,
.gy-xxl-2 {
    --bs-gutter-y: 0.5rem;
  }

  .g-xxl-3,
.gx-xxl-3 {
    --bs-gutter-x: 1rem;
  }

  .g-xxl-3,
.gy-xxl-3 {
    --bs-gutter-y: 1rem;
  }

  .g-xxl-4,
.gx-xxl-4 {
    --bs-gutter-x: 1.5rem;
  }

  .g-xxl-4,
.gy-xxl-4 {
    --bs-gutter-y: 1.5rem;
  }

  .g-xxl-5,
.gx-xxl-5 {
    --bs-gutter-x: 3rem;
  }

  .g-xxl-5,
.gy-xxl-5 {
    --bs-gutter-y: 3rem;
  }
}
.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-block {
  display: block !important;
}

.d-grid {
  display: grid !important;
}

.d-table {
  display: table !important;
}

.d-table-row {
  display: table-row !important;
}

.d-table-cell {
  display: table-cell !important;
}

.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

.d-none {
  display: none !important;
}

.flex-fill {
  flex: 1 1 auto !important;
}

.flex-row {
  flex-direction: row !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-row-reverse {
  flex-direction: row-reverse !important;
}

.flex-column-reverse {
  flex-direction: column-reverse !important;
}

.flex-grow-0 {
  flex-grow: 0 !important;
}

.flex-grow-1 {
  flex-grow: 1 !important;
}

.flex-shrink-0 {
  flex-shrink: 0 !important;
}

.flex-shrink-1 {
  flex-shrink: 1 !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

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

.justify-content-start {
  justify-content: flex-start !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.justify-content-around {
  justify-content: space-around !important;
}

.justify-content-evenly {
  justify-content: space-evenly !important;
}

.align-items-start {
  align-items: flex-start !important;
}

.align-items-end {
  align-items: flex-end !important;
}

.align-items-center {
  align-items: center !important;
}

.align-items-baseline {
  align-items: baseline !important;
}

.align-items-stretch {
  align-items: stretch !important;
}

.align-content-start {
  align-content: flex-start !important;
}

.align-content-end {
  align-content: flex-end !important;
}

.align-content-center {
  align-content: center !important;
}

.align-content-between {
  align-content: space-between !important;
}

.align-content-around {
  align-content: space-around !important;
}

.align-content-stretch {
  align-content: stretch !important;
}

.align-self-auto {
  align-self: auto !important;
}

.align-self-start {
  align-self: flex-start !important;
}

.align-self-end {
  align-self: flex-end !important;
}

.align-self-center {
  align-self: center !important;
}

.align-self-baseline {
  align-self: baseline !important;
}

.align-self-stretch {
  align-self: stretch !important;
}

.order-first {
  order: -1 !important;
}

.order-0 {
  order: 0 !important;
}

.order-1 {
  order: 1 !important;
}

.order-2 {
  order: 2 !important;
}

.order-3 {
  order: 3 !important;
}

.order-4 {
  order: 4 !important;
}

.order-5 {
  order: 5 !important;
}

.order-last {
  order: 6 !important;
}

.m-0 {
  margin: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.m-5 {
  margin: 3rem !important;
}

.m-auto {
  margin: auto !important;
}

.mx-0 {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.mx-1 {
  margin-right: 0.25rem !important;
  margin-left: 0.25rem !important;
}

.mx-2 {
  margin-right: 0.5rem !important;
  margin-left: 0.5rem !important;
}

.mx-3 {
  margin-right: 1rem !important;
  margin-left: 1rem !important;
}

.mx-4 {
  margin-right: 1.5rem !important;
  margin-left: 1.5rem !important;
}

.mx-5 {
  margin-right: 3rem !important;
  margin-left: 3rem !important;
}

.mx-auto {
  margin-right: auto !important;
  margin-left: auto !important;
}

.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.my-1 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

.my-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.my-3 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.my-4 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.my-5 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}

.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mt-1 {
  margin-top: 0.25rem !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

.mt-3 {
  margin-top: 1rem !important;
}

.mt-4 {
  margin-top: 1.5rem !important;
}

.mt-5 {
  margin-top: 3rem !important;
}

.mt-auto {
  margin-top: auto !important;
}

.me-0 {
  margin-right: 0 !important;
}

.me-1 {
  margin-right: 0.25rem !important;
}

.me-2 {
  margin-right: 0.5rem !important;
}

.me-3 {
  margin-right: 1rem !important;
}

.me-4 {
  margin-right: 1.5rem !important;
}

.me-5 {
  margin-right: 3rem !important;
}

.me-auto {
  margin-right: auto !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-1 {
  margin-bottom: 0.25rem !important;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

.mb-4 {
  margin-bottom: 1.5rem !important;
}

.mb-5 {
  margin-bottom: 3rem !important;
}

.mb-auto {
  margin-bottom: auto !important;
}

.ms-0 {
  margin-left: 0 !important;
}

.ms-1 {
  margin-left: 0.25rem !important;
}

.ms-2 {
  margin-left: 0.5rem !important;
}

.ms-3 {
  margin-left: 1rem !important;
}

.ms-4 {
  margin-left: 1.5rem !important;
}

.ms-5 {
  margin-left: 3rem !important;
}

.ms-auto {
  margin-left: auto !important;
}

.p-0 {
  padding: 0 !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.p-5 {
  padding: 3rem !important;
}

.px-0 {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.px-1 {
  padding-right: 0.25rem !important;
  padding-left: 0.25rem !important;
}

.px-2 {
  padding-right: 0.5rem !important;
  padding-left: 0.5rem !important;
}

.px-3 {
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}

.px-4 {
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
}

.px-5 {
  padding-right: 3rem !important;
  padding-left: 3rem !important;
}

.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.py-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.py-4 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.py-5 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pt-1 {
  padding-top: 0.25rem !important;
}

.pt-2 {
  padding-top: 0.5rem !important;
}

.pt-3 {
  padding-top: 1rem !important;
}

.pt-4 {
  padding-top: 1.5rem !important;
}

.pt-5 {
  padding-top: 3rem !important;
}

.pe-0 {
  padding-right: 0 !important;
}

.pe-1 {
  padding-right: 0.25rem !important;
}

.pe-2 {
  padding-right: 0.5rem !important;
}

.pe-3 {
  padding-right: 1rem !important;
}

.pe-4 {
  padding-right: 1.5rem !important;
}

.pe-5 {
  padding-right: 3rem !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.pb-1 {
  padding-bottom: 0.25rem !important;
}

.pb-2 {
  padding-bottom: 0.5rem !important;
}

.pb-3 {
  padding-bottom: 1rem !important;
}

.pb-4 {
  padding-bottom: 1.5rem !important;
}

.pb-5 {
  padding-bottom: 3rem !important;
}

.ps-0 {
  padding-left: 0 !important;
}

.ps-1 {
  padding-left: 0.25rem !important;
}

.ps-2 {
  padding-left: 0.5rem !important;
}

.ps-3 {
  padding-left: 1rem !important;
}

.ps-4 {
  padding-left: 1.5rem !important;
}

.ps-5 {
  padding-left: 3rem !important;
}

@media (min-width: 576px) {
  .d-sm-inline {
    display: inline !important;
  }

  .d-sm-inline-block {
    display: inline-block !important;
  }

  .d-sm-block {
    display: block !important;
  }

  .d-sm-grid {
    display: grid !important;
  }

  .d-sm-table {
    display: table !important;
  }

  .d-sm-table-row {
    display: table-row !important;
  }

  .d-sm-table-cell {
    display: table-cell !important;
  }

  .d-sm-flex {
    display: flex !important;
  }

  .d-sm-inline-flex {
    display: inline-flex !important;
  }

  .d-sm-none {
    display: none !important;
  }

  .flex-sm-fill {
    flex: 1 1 auto !important;
  }

  .flex-sm-row {
    flex-direction: row !important;
  }

  .flex-sm-column {
    flex-direction: column !important;
  }

  .flex-sm-row-reverse {
    flex-direction: row-reverse !important;
  }

  .flex-sm-column-reverse {
    flex-direction: column-reverse !important;
  }

  .flex-sm-grow-0 {
    flex-grow: 0 !important;
  }

  .flex-sm-grow-1 {
    flex-grow: 1 !important;
  }

  .flex-sm-shrink-0 {
    flex-shrink: 0 !important;
  }

  .flex-sm-shrink-1 {
    flex-shrink: 1 !important;
  }

  .flex-sm-wrap {
    flex-wrap: wrap !important;
  }

  .flex-sm-nowrap {
    flex-wrap: nowrap !important;
  }

  .flex-sm-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }

  .justify-content-sm-start {
    justify-content: flex-start !important;
  }

  .justify-content-sm-end {
    justify-content: flex-end !important;
  }

  .justify-content-sm-center {
    justify-content: center !important;
  }

  .justify-content-sm-between {
    justify-content: space-between !important;
  }

  .justify-content-sm-around {
    justify-content: space-around !important;
  }

  .justify-content-sm-evenly {
    justify-content: space-evenly !important;
  }

  .align-items-sm-start {
    align-items: flex-start !important;
  }

  .align-items-sm-end {
    align-items: flex-end !important;
  }

  .align-items-sm-center {
    align-items: center !important;
  }

  .align-items-sm-baseline {
    align-items: baseline !important;
  }

  .align-items-sm-stretch {
    align-items: stretch !important;
  }

  .align-content-sm-start {
    align-content: flex-start !important;
  }

  .align-content-sm-end {
    align-content: flex-end !important;
  }

  .align-content-sm-center {
    align-content: center !important;
  }

  .align-content-sm-between {
    align-content: space-between !important;
  }

  .align-content-sm-around {
    align-content: space-around !important;
  }

  .align-content-sm-stretch {
    align-content: stretch !important;
  }

  .align-self-sm-auto {
    align-self: auto !important;
  }

  .align-self-sm-start {
    align-self: flex-start !important;
  }

  .align-self-sm-end {
    align-self: flex-end !important;
  }

  .align-self-sm-center {
    align-self: center !important;
  }

  .align-self-sm-baseline {
    align-self: baseline !important;
  }

  .align-self-sm-stretch {
    align-self: stretch !important;
  }

  .order-sm-first {
    order: -1 !important;
  }

  .order-sm-0 {
    order: 0 !important;
  }

  .order-sm-1 {
    order: 1 !important;
  }

  .order-sm-2 {
    order: 2 !important;
  }

  .order-sm-3 {
    order: 3 !important;
  }

  .order-sm-4 {
    order: 4 !important;
  }

  .order-sm-5 {
    order: 5 !important;
  }

  .order-sm-last {
    order: 6 !important;
  }

  .m-sm-0 {
    margin: 0 !important;
  }

  .m-sm-1 {
    margin: 0.25rem !important;
  }

  .m-sm-2 {
    margin: 0.5rem !important;
  }

  .m-sm-3 {
    margin: 1rem !important;
  }

  .m-sm-4 {
    margin: 1.5rem !important;
  }

  .m-sm-5 {
    margin: 3rem !important;
  }

  .m-sm-auto {
    margin: auto !important;
  }

  .mx-sm-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .mx-sm-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }

  .mx-sm-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }

  .mx-sm-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }

  .mx-sm-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }

  .mx-sm-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }

  .mx-sm-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .my-sm-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .my-sm-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }

  .my-sm-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  .my-sm-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }

  .my-sm-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }

  .my-sm-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }

  .my-sm-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }

  .mt-sm-0 {
    margin-top: 0 !important;
  }

  .mt-sm-1 {
    margin-top: 0.25rem !important;
  }

  .mt-sm-2 {
    margin-top: 0.5rem !important;
  }

  .mt-sm-3 {
    margin-top: 1rem !important;
  }

  .mt-sm-4 {
    margin-top: 1.5rem !important;
  }

  .mt-sm-5 {
    margin-top: 3rem !important;
  }

  .mt-sm-auto {
    margin-top: auto !important;
  }

  .me-sm-0 {
    margin-right: 0 !important;
  }

  .me-sm-1 {
    margin-right: 0.25rem !important;
  }

  .me-sm-2 {
    margin-right: 0.5rem !important;
  }

  .me-sm-3 {
    margin-right: 1rem !important;
  }

  .me-sm-4 {
    margin-right: 1.5rem !important;
  }

  .me-sm-5 {
    margin-right: 3rem !important;
  }

  .me-sm-auto {
    margin-right: auto !important;
  }

  .mb-sm-0 {
    margin-bottom: 0 !important;
  }

  .mb-sm-1 {
    margin-bottom: 0.25rem !important;
  }

  .mb-sm-2 {
    margin-bottom: 0.5rem !important;
  }

  .mb-sm-3 {
    margin-bottom: 1rem !important;
  }

  .mb-sm-4 {
    margin-bottom: 1.5rem !important;
  }

  .mb-sm-5 {
    margin-bottom: 3rem !important;
  }

  .mb-sm-auto {
    margin-bottom: auto !important;
  }

  .ms-sm-0 {
    margin-left: 0 !important;
  }

  .ms-sm-1 {
    margin-left: 0.25rem !important;
  }

  .ms-sm-2 {
    margin-left: 0.5rem !important;
  }

  .ms-sm-3 {
    margin-left: 1rem !important;
  }

  .ms-sm-4 {
    margin-left: 1.5rem !important;
  }

  .ms-sm-5 {
    margin-left: 3rem !important;
  }

  .ms-sm-auto {
    margin-left: auto !important;
  }

  .p-sm-0 {
    padding: 0 !important;
  }

  .p-sm-1 {
    padding: 0.25rem !important;
  }

  .p-sm-2 {
    padding: 0.5rem !important;
  }

  .p-sm-3 {
    padding: 1rem !important;
  }

  .p-sm-4 {
    padding: 1.5rem !important;
  }

  .p-sm-5 {
    padding: 3rem !important;
  }

  .px-sm-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .px-sm-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }

  .px-sm-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }

  .px-sm-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }

  .px-sm-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }

  .px-sm-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }

  .py-sm-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .py-sm-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }

  .py-sm-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .py-sm-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .py-sm-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .py-sm-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .pt-sm-0 {
    padding-top: 0 !important;
  }

  .pt-sm-1 {
    padding-top: 0.25rem !important;
  }

  .pt-sm-2 {
    padding-top: 0.5rem !important;
  }

  .pt-sm-3 {
    padding-top: 1rem !important;
  }

  .pt-sm-4 {
    padding-top: 1.5rem !important;
  }

  .pt-sm-5 {
    padding-top: 3rem !important;
  }

  .pe-sm-0 {
    padding-right: 0 !important;
  }

  .pe-sm-1 {
    padding-right: 0.25rem !important;
  }

  .pe-sm-2 {
    padding-right: 0.5rem !important;
  }

  .pe-sm-3 {
    padding-right: 1rem !important;
  }

  .pe-sm-4 {
    padding-right: 1.5rem !important;
  }

  .pe-sm-5 {
    padding-right: 3rem !important;
  }

  .pb-sm-0 {
    padding-bottom: 0 !important;
  }

  .pb-sm-1 {
    padding-bottom: 0.25rem !important;
  }

  .pb-sm-2 {
    padding-bottom: 0.5rem !important;
  }

  .pb-sm-3 {
    padding-bottom: 1rem !important;
  }

  .pb-sm-4 {
    padding-bottom: 1.5rem !important;
  }

  .pb-sm-5 {
    padding-bottom: 3rem !important;
  }

  .ps-sm-0 {
    padding-left: 0 !important;
  }

  .ps-sm-1 {
    padding-left: 0.25rem !important;
  }

  .ps-sm-2 {
    padding-left: 0.5rem !important;
  }

  .ps-sm-3 {
    padding-left: 1rem !important;
  }

  .ps-sm-4 {
    padding-left: 1.5rem !important;
  }

  .ps-sm-5 {
    padding-left: 3rem !important;
  }
}
@media (min-width: 768px) {
  .d-md-inline {
    display: inline !important;
  }

  .d-md-inline-block {
    display: inline-block !important;
  }

  .d-md-block {
    display: block !important;
  }

  .d-md-grid {
    display: grid !important;
  }

  .d-md-table {
    display: table !important;
  }

  .d-md-table-row {
    display: table-row !important;
  }

  .d-md-table-cell {
    display: table-cell !important;
  }

  .d-md-flex {
    display: flex !important;
  }

  .d-md-inline-flex {
    display: inline-flex !important;
  }

  .d-md-none {
    display: none !important;
  }

  .flex-md-fill {
    flex: 1 1 auto !important;
  }

  .flex-md-row {
    flex-direction: row !important;
  }

  .flex-md-column {
    flex-direction: column !important;
  }

  .flex-md-row-reverse {
    flex-direction: row-reverse !important;
  }

  .flex-md-column-reverse {
    flex-direction: column-reverse !important;
  }

  .flex-md-grow-0 {
    flex-grow: 0 !important;
  }

  .flex-md-grow-1 {
    flex-grow: 1 !important;
  }

  .flex-md-shrink-0 {
    flex-shrink: 0 !important;
  }

  .flex-md-shrink-1 {
    flex-shrink: 1 !important;
  }

  .flex-md-wrap {
    flex-wrap: wrap !important;
  }

  .flex-md-nowrap {
    flex-wrap: nowrap !important;
  }

  .flex-md-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }

  .justify-content-md-start {
    justify-content: flex-start !important;
  }

  .justify-content-md-end {
    justify-content: flex-end !important;
  }

  .justify-content-md-center {
    justify-content: center !important;
  }

  .justify-content-md-between {
    justify-content: space-between !important;
  }

  .justify-content-md-around {
    justify-content: space-around !important;
  }

  .justify-content-md-evenly {
    justify-content: space-evenly !important;
  }

  .align-items-md-start {
    align-items: flex-start !important;
  }

  .align-items-md-end {
    align-items: flex-end !important;
  }

  .align-items-md-center {
    align-items: center !important;
  }

  .align-items-md-baseline {
    align-items: baseline !important;
  }

  .align-items-md-stretch {
    align-items: stretch !important;
  }

  .align-content-md-start {
    align-content: flex-start !important;
  }

  .align-content-md-end {
    align-content: flex-end !important;
  }

  .align-content-md-center {
    align-content: center !important;
  }

  .align-content-md-between {
    align-content: space-between !important;
  }

  .align-content-md-around {
    align-content: space-around !important;
  }

  .align-content-md-stretch {
    align-content: stretch !important;
  }

  .align-self-md-auto {
    align-self: auto !important;
  }

  .align-self-md-start {
    align-self: flex-start !important;
  }

  .align-self-md-end {
    align-self: flex-end !important;
  }

  .align-self-md-center {
    align-self: center !important;
  }

  .align-self-md-baseline {
    align-self: baseline !important;
  }

  .align-self-md-stretch {
    align-self: stretch !important;
  }

  .order-md-first {
    order: -1 !important;
  }

  .order-md-0 {
    order: 0 !important;
  }

  .order-md-1 {
    order: 1 !important;
  }

  .order-md-2 {
    order: 2 !important;
  }

  .order-md-3 {
    order: 3 !important;
  }

  .order-md-4 {
    order: 4 !important;
  }

  .order-md-5 {
    order: 5 !important;
  }

  .order-md-last {
    order: 6 !important;
  }

  .m-md-0 {
    margin: 0 !important;
  }

  .m-md-1 {
    margin: 0.25rem !important;
  }

  .m-md-2 {
    margin: 0.5rem !important;
  }

  .m-md-3 {
    margin: 1rem !important;
  }

  .m-md-4 {
    margin: 1.5rem !important;
  }

  .m-md-5 {
    margin: 3rem !important;
  }

  .m-md-auto {
    margin: auto !important;
  }

  .mx-md-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .mx-md-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }

  .mx-md-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }

  .mx-md-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }

  .mx-md-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }

  .mx-md-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }

  .mx-md-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .my-md-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .my-md-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }

  .my-md-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  .my-md-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }

  .my-md-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }

  .my-md-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }

  .my-md-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }

  .mt-md-0 {
    margin-top: 0 !important;
  }

  .mt-md-1 {
    margin-top: 0.25rem !important;
  }

  .mt-md-2 {
    margin-top: 0.5rem !important;
  }

  .mt-md-3 {
    margin-top: 1rem !important;
  }

  .mt-md-4 {
    margin-top: 1.5rem !important;
  }

  .mt-md-5 {
    margin-top: 3rem !important;
  }

  .mt-md-auto {
    margin-top: auto !important;
  }

  .me-md-0 {
    margin-right: 0 !important;
  }

  .me-md-1 {
    margin-right: 0.25rem !important;
  }

  .me-md-2 {
    margin-right: 0.5rem !important;
  }

  .me-md-3 {
    margin-right: 1rem !important;
  }

  .me-md-4 {
    margin-right: 1.5rem !important;
  }

  .me-md-5 {
    margin-right: 3rem !important;
  }

  .me-md-auto {
    margin-right: auto !important;
  }

  .mb-md-0 {
    margin-bottom: 0 !important;
  }

  .mb-md-1 {
    margin-bottom: 0.25rem !important;
  }

  .mb-md-2 {
    margin-bottom: 0.5rem !important;
  }

  .mb-md-3 {
    margin-bottom: 1rem !important;
  }

  .mb-md-4 {
    margin-bottom: 1.5rem !important;
  }

  .mb-md-5 {
    margin-bottom: 3rem !important;
  }

  .mb-md-auto {
    margin-bottom: auto !important;
  }

  .ms-md-0 {
    margin-left: 0 !important;
  }

  .ms-md-1 {
    margin-left: 0.25rem !important;
  }

  .ms-md-2 {
    margin-left: 0.5rem !important;
  }

  .ms-md-3 {
    margin-left: 1rem !important;
  }

  .ms-md-4 {
    margin-left: 1.5rem !important;
  }

  .ms-md-5 {
    margin-left: 3rem !important;
  }

  .ms-md-auto {
    margin-left: auto !important;
  }

  .p-md-0 {
    padding: 0 !important;
  }

  .p-md-1 {
    padding: 0.25rem !important;
  }

  .p-md-2 {
    padding: 0.5rem !important;
  }

  .p-md-3 {
    padding: 1rem !important;
  }

  .p-md-4 {
    padding: 1.5rem !important;
  }

  .p-md-5 {
    padding: 3rem !important;
  }

  .px-md-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .px-md-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }

  .px-md-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }

  .px-md-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }

  .px-md-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }

  .px-md-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }

  .py-md-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .py-md-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }

  .py-md-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .py-md-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .py-md-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .py-md-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .pt-md-0 {
    padding-top: 0 !important;
  }

  .pt-md-1 {
    padding-top: 0.25rem !important;
  }

  .pt-md-2 {
    padding-top: 0.5rem !important;
  }

  .pt-md-3 {
    padding-top: 1rem !important;
  }

  .pt-md-4 {
    padding-top: 1.5rem !important;
  }

  .pt-md-5 {
    padding-top: 3rem !important;
  }

  .pe-md-0 {
    padding-right: 0 !important;
  }

  .pe-md-1 {
    padding-right: 0.25rem !important;
  }

  .pe-md-2 {
    padding-right: 0.5rem !important;
  }

  .pe-md-3 {
    padding-right: 1rem !important;
  }

  .pe-md-4 {
    padding-right: 1.5rem !important;
  }

  .pe-md-5 {
    padding-right: 3rem !important;
  }

  .pb-md-0 {
    padding-bottom: 0 !important;
  }

  .pb-md-1 {
    padding-bottom: 0.25rem !important;
  }

  .pb-md-2 {
    padding-bottom: 0.5rem !important;
  }

  .pb-md-3 {
    padding-bottom: 1rem !important;
  }

  .pb-md-4 {
    padding-bottom: 1.5rem !important;
  }

  .pb-md-5 {
    padding-bottom: 3rem !important;
  }

  .ps-md-0 {
    padding-left: 0 !important;
  }

  .ps-md-1 {
    padding-left: 0.25rem !important;
  }

  .ps-md-2 {
    padding-left: 0.5rem !important;
  }

  .ps-md-3 {
    padding-left: 1rem !important;
  }

  .ps-md-4 {
    padding-left: 1.5rem !important;
  }

  .ps-md-5 {
    padding-left: 3rem !important;
  }
}
@media (min-width: 992px) {
  .d-lg-inline {
    display: inline !important;
  }

  .d-lg-inline-block {
    display: inline-block !important;
  }

  .d-lg-block {
    display: block !important;
  }

  .d-lg-grid {
    display: grid !important;
  }

  .d-lg-table {
    display: table !important;
  }

  .d-lg-table-row {
    display: table-row !important;
  }

  .d-lg-table-cell {
    display: table-cell !important;
  }

  .d-lg-flex {
    display: flex !important;
  }

  .d-lg-inline-flex {
    display: inline-flex !important;
  }

  .d-lg-none {
    display: none !important;
  }

  .flex-lg-fill {
    flex: 1 1 auto !important;
  }

  .flex-lg-row {
    flex-direction: row !important;
  }

  .flex-lg-column {
    flex-direction: column !important;
  }

  .flex-lg-row-reverse {
    flex-direction: row-reverse !important;
  }

  .flex-lg-column-reverse {
    flex-direction: column-reverse !important;
  }

  .flex-lg-grow-0 {
    flex-grow: 0 !important;
  }

  .flex-lg-grow-1 {
    flex-grow: 1 !important;
  }

  .flex-lg-shrink-0 {
    flex-shrink: 0 !important;
  }

  .flex-lg-shrink-1 {
    flex-shrink: 1 !important;
  }

  .flex-lg-wrap {
    flex-wrap: wrap !important;
  }

  .flex-lg-nowrap {
    flex-wrap: nowrap !important;
  }

  .flex-lg-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }

  .justify-content-lg-start {
    justify-content: flex-start !important;
  }

  .justify-content-lg-end {
    justify-content: flex-end !important;
  }

  .justify-content-lg-center {
    justify-content: center !important;
  }

  .justify-content-lg-between {
    justify-content: space-between !important;
  }

  .justify-content-lg-around {
    justify-content: space-around !important;
  }

  .justify-content-lg-evenly {
    justify-content: space-evenly !important;
  }

  .align-items-lg-start {
    align-items: flex-start !important;
  }

  .align-items-lg-end {
    align-items: flex-end !important;
  }

  .align-items-lg-center {
    align-items: center !important;
  }

  .align-items-lg-baseline {
    align-items: baseline !important;
  }

  .align-items-lg-stretch {
    align-items: stretch !important;
  }

  .align-content-lg-start {
    align-content: flex-start !important;
  }

  .align-content-lg-end {
    align-content: flex-end !important;
  }

  .align-content-lg-center {
    align-content: center !important;
  }

  .align-content-lg-between {
    align-content: space-between !important;
  }

  .align-content-lg-around {
    align-content: space-around !important;
  }

  .align-content-lg-stretch {
    align-content: stretch !important;
  }

  .align-self-lg-auto {
    align-self: auto !important;
  }

  .align-self-lg-start {
    align-self: flex-start !important;
  }

  .align-self-lg-end {
    align-self: flex-end !important;
  }

  .align-self-lg-center {
    align-self: center !important;
  }

  .align-self-lg-baseline {
    align-self: baseline !important;
  }

  .align-self-lg-stretch {
    align-self: stretch !important;
  }

  .order-lg-first {
    order: -1 !important;
  }

  .order-lg-0 {
    order: 0 !important;
  }

  .order-lg-1 {
    order: 1 !important;
  }

  .order-lg-2 {
    order: 2 !important;
  }

  .order-lg-3 {
    order: 3 !important;
  }

  .order-lg-4 {
    order: 4 !important;
  }

  .order-lg-5 {
    order: 5 !important;
  }

  .order-lg-last {
    order: 6 !important;
  }

  .m-lg-0 {
    margin: 0 !important;
  }

  .m-lg-1 {
    margin: 0.25rem !important;
  }

  .m-lg-2 {
    margin: 0.5rem !important;
  }

  .m-lg-3 {
    margin: 1rem !important;
  }

  .m-lg-4 {
    margin: 1.5rem !important;
  }

  .m-lg-5 {
    margin: 3rem !important;
  }

  .m-lg-auto {
    margin: auto !important;
  }

  .mx-lg-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .mx-lg-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }

  .mx-lg-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }

  .mx-lg-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }

  .mx-lg-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }

  .mx-lg-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }

  .mx-lg-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .my-lg-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .my-lg-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }

  .my-lg-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  .my-lg-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }

  .my-lg-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }

  .my-lg-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }

  .my-lg-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }

  .mt-lg-0 {
    margin-top: 0 !important;
  }

  .mt-lg-1 {
    margin-top: 0.25rem !important;
  }

  .mt-lg-2 {
    margin-top: 0.5rem !important;
  }

  .mt-lg-3 {
    margin-top: 1rem !important;
  }

  .mt-lg-4 {
    margin-top: 1.5rem !important;
  }

  .mt-lg-5 {
    margin-top: 3rem !important;
  }

  .mt-lg-auto {
    margin-top: auto !important;
  }

  .me-lg-0 {
    margin-right: 0 !important;
  }

  .me-lg-1 {
    margin-right: 0.25rem !important;
  }

  .me-lg-2 {
    margin-right: 0.5rem !important;
  }

  .me-lg-3 {
    margin-right: 1rem !important;
  }

  .me-lg-4 {
    margin-right: 1.5rem !important;
  }

  .me-lg-5 {
    margin-right: 3rem !important;
  }

  .me-lg-auto {
    margin-right: auto !important;
  }

  .mb-lg-0 {
    margin-bottom: 0 !important;
  }

  .mb-lg-1 {
    margin-bottom: 0.25rem !important;
  }

  .mb-lg-2 {
    margin-bottom: 0.5rem !important;
  }

  .mb-lg-3 {
    margin-bottom: 1rem !important;
  }

  .mb-lg-4 {
    margin-bottom: 1.5rem !important;
  }

  .mb-lg-5 {
    margin-bottom: 3rem !important;
  }

  .mb-lg-auto {
    margin-bottom: auto !important;
  }

  .ms-lg-0 {
    margin-left: 0 !important;
  }

  .ms-lg-1 {
    margin-left: 0.25rem !important;
  }

  .ms-lg-2 {
    margin-left: 0.5rem !important;
  }

  .ms-lg-3 {
    margin-left: 1rem !important;
  }

  .ms-lg-4 {
    margin-left: 1.5rem !important;
  }

  .ms-lg-5 {
    margin-left: 3rem !important;
  }

  .ms-lg-auto {
    margin-left: auto !important;
  }

  .p-lg-0 {
    padding: 0 !important;
  }

  .p-lg-1 {
    padding: 0.25rem !important;
  }

  .p-lg-2 {
    padding: 0.5rem !important;
  }

  .p-lg-3 {
    padding: 1rem !important;
  }

  .p-lg-4 {
    padding: 1.5rem !important;
  }

  .p-lg-5 {
    padding: 3rem !important;
  }

  .px-lg-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .px-lg-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }

  .px-lg-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }

  .px-lg-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }

  .px-lg-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }

  .px-lg-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }

  .py-lg-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .py-lg-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }

  .py-lg-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .py-lg-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .py-lg-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .py-lg-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .pt-lg-0 {
    padding-top: 0 !important;
  }

  .pt-lg-1 {
    padding-top: 0.25rem !important;
  }

  .pt-lg-2 {
    padding-top: 0.5rem !important;
  }

  .pt-lg-3 {
    padding-top: 1rem !important;
  }

  .pt-lg-4 {
    padding-top: 1.5rem !important;
  }

  .pt-lg-5 {
    padding-top: 3rem !important;
  }

  .pe-lg-0 {
    padding-right: 0 !important;
  }

  .pe-lg-1 {
    padding-right: 0.25rem !important;
  }

  .pe-lg-2 {
    padding-right: 0.5rem !important;
  }

  .pe-lg-3 {
    padding-right: 1rem !important;
  }

  .pe-lg-4 {
    padding-right: 1.5rem !important;
  }

  .pe-lg-5 {
    padding-right: 3rem !important;
  }

  .pb-lg-0 {
    padding-bottom: 0 !important;
  }

  .pb-lg-1 {
    padding-bottom: 0.25rem !important;
  }

  .pb-lg-2 {
    padding-bottom: 0.5rem !important;
  }

  .pb-lg-3 {
    padding-bottom: 1rem !important;
  }

  .pb-lg-4 {
    padding-bottom: 1.5rem !important;
  }

  .pb-lg-5 {
    padding-bottom: 3rem !important;
  }

  .ps-lg-0 {
    padding-left: 0 !important;
  }

  .ps-lg-1 {
    padding-left: 0.25rem !important;
  }

  .ps-lg-2 {
    padding-left: 0.5rem !important;
  }

  .ps-lg-3 {
    padding-left: 1rem !important;
  }

  .ps-lg-4 {
    padding-left: 1.5rem !important;
  }

  .ps-lg-5 {
    padding-left: 3rem !important;
  }
}
@media (min-width: 1200px) {
  .d-xl-inline {
    display: inline !important;
  }

  .d-xl-inline-block {
    display: inline-block !important;
  }

  .d-xl-block {
    display: block !important;
  }

  .d-xl-grid {
    display: grid !important;
  }

  .d-xl-table {
    display: table !important;
  }

  .d-xl-table-row {
    display: table-row !important;
  }

  .d-xl-table-cell {
    display: table-cell !important;
  }

  .d-xl-flex {
    display: flex !important;
  }

  .d-xl-inline-flex {
    display: inline-flex !important;
  }

  .d-xl-none {
    display: none !important;
  }

  .flex-xl-fill {
    flex: 1 1 auto !important;
  }

  .flex-xl-row {
    flex-direction: row !important;
  }

  .flex-xl-column {
    flex-direction: column !important;
  }

  .flex-xl-row-reverse {
    flex-direction: row-reverse !important;
  }

  .flex-xl-column-reverse {
    flex-direction: column-reverse !important;
  }

  .flex-xl-grow-0 {
    flex-grow: 0 !important;
  }

  .flex-xl-grow-1 {
    flex-grow: 1 !important;
  }

  .flex-xl-shrink-0 {
    flex-shrink: 0 !important;
  }

  .flex-xl-shrink-1 {
    flex-shrink: 1 !important;
  }

  .flex-xl-wrap {
    flex-wrap: wrap !important;
  }

  .flex-xl-nowrap {
    flex-wrap: nowrap !important;
  }

  .flex-xl-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }

  .justify-content-xl-start {
    justify-content: flex-start !important;
  }

  .justify-content-xl-end {
    justify-content: flex-end !important;
  }

  .justify-content-xl-center {
    justify-content: center !important;
  }

  .justify-content-xl-between {
    justify-content: space-between !important;
  }

  .justify-content-xl-around {
    justify-content: space-around !important;
  }

  .justify-content-xl-evenly {
    justify-content: space-evenly !important;
  }

  .align-items-xl-start {
    align-items: flex-start !important;
  }

  .align-items-xl-end {
    align-items: flex-end !important;
  }

  .align-items-xl-center {
    align-items: center !important;
  }

  .align-items-xl-baseline {
    align-items: baseline !important;
  }

  .align-items-xl-stretch {
    align-items: stretch !important;
  }

  .align-content-xl-start {
    align-content: flex-start !important;
  }

  .align-content-xl-end {
    align-content: flex-end !important;
  }

  .align-content-xl-center {
    align-content: center !important;
  }

  .align-content-xl-between {
    align-content: space-between !important;
  }

  .align-content-xl-around {
    align-content: space-around !important;
  }

  .align-content-xl-stretch {
    align-content: stretch !important;
  }

  .align-self-xl-auto {
    align-self: auto !important;
  }

  .align-self-xl-start {
    align-self: flex-start !important;
  }

  .align-self-xl-end {
    align-self: flex-end !important;
  }

  .align-self-xl-center {
    align-self: center !important;
  }

  .align-self-xl-baseline {
    align-self: baseline !important;
  }

  .align-self-xl-stretch {
    align-self: stretch !important;
  }

  .order-xl-first {
    order: -1 !important;
  }

  .order-xl-0 {
    order: 0 !important;
  }

  .order-xl-1 {
    order: 1 !important;
  }

  .order-xl-2 {
    order: 2 !important;
  }

  .order-xl-3 {
    order: 3 !important;
  }

  .order-xl-4 {
    order: 4 !important;
  }

  .order-xl-5 {
    order: 5 !important;
  }

  .order-xl-last {
    order: 6 !important;
  }

  .m-xl-0 {
    margin: 0 !important;
  }

  .m-xl-1 {
    margin: 0.25rem !important;
  }

  .m-xl-2 {
    margin: 0.5rem !important;
  }

  .m-xl-3 {
    margin: 1rem !important;
  }

  .m-xl-4 {
    margin: 1.5rem !important;
  }

  .m-xl-5 {
    margin: 3rem !important;
  }

  .m-xl-auto {
    margin: auto !important;
  }

  .mx-xl-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .mx-xl-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }

  .mx-xl-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }

  .mx-xl-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }

  .mx-xl-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }

  .mx-xl-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }

  .mx-xl-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .my-xl-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .my-xl-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }

  .my-xl-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  .my-xl-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }

  .my-xl-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }

  .my-xl-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }

  .my-xl-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }

  .mt-xl-0 {
    margin-top: 0 !important;
  }

  .mt-xl-1 {
    margin-top: 0.25rem !important;
  }

  .mt-xl-2 {
    margin-top: 0.5rem !important;
  }

  .mt-xl-3 {
    margin-top: 1rem !important;
  }

  .mt-xl-4 {
    margin-top: 1.5rem !important;
  }

  .mt-xl-5 {
    margin-top: 3rem !important;
  }

  .mt-xl-auto {
    margin-top: auto !important;
  }

  .me-xl-0 {
    margin-right: 0 !important;
  }

  .me-xl-1 {
    margin-right: 0.25rem !important;
  }

  .me-xl-2 {
    margin-right: 0.5rem !important;
  }

  .me-xl-3 {
    margin-right: 1rem !important;
  }

  .me-xl-4 {
    margin-right: 1.5rem !important;
  }

  .me-xl-5 {
    margin-right: 3rem !important;
  }

  .me-xl-auto {
    margin-right: auto !important;
  }

  .mb-xl-0 {
    margin-bottom: 0 !important;
  }

  .mb-xl-1 {
    margin-bottom: 0.25rem !important;
  }

  .mb-xl-2 {
    margin-bottom: 0.5rem !important;
  }

  .mb-xl-3 {
    margin-bottom: 1rem !important;
  }

  .mb-xl-4 {
    margin-bottom: 1.5rem !important;
  }

  .mb-xl-5 {
    margin-bottom: 3rem !important;
  }

  .mb-xl-auto {
    margin-bottom: auto !important;
  }

  .ms-xl-0 {
    margin-left: 0 !important;
  }

  .ms-xl-1 {
    margin-left: 0.25rem !important;
  }

  .ms-xl-2 {
    margin-left: 0.5rem !important;
  }

  .ms-xl-3 {
    margin-left: 1rem !important;
  }

  .ms-xl-4 {
    margin-left: 1.5rem !important;
  }

  .ms-xl-5 {
    margin-left: 3rem !important;
  }

  .ms-xl-auto {
    margin-left: auto !important;
  }

  .p-xl-0 {
    padding: 0 !important;
  }

  .p-xl-1 {
    padding: 0.25rem !important;
  }

  .p-xl-2 {
    padding: 0.5rem !important;
  }

  .p-xl-3 {
    padding: 1rem !important;
  }

  .p-xl-4 {
    padding: 1.5rem !important;
  }

  .p-xl-5 {
    padding: 3rem !important;
  }

  .px-xl-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .px-xl-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }

  .px-xl-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }

  .px-xl-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }

  .px-xl-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }

  .px-xl-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }

  .py-xl-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .py-xl-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }

  .py-xl-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .py-xl-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .py-xl-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .py-xl-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .pt-xl-0 {
    padding-top: 0 !important;
  }

  .pt-xl-1 {
    padding-top: 0.25rem !important;
  }

  .pt-xl-2 {
    padding-top: 0.5rem !important;
  }

  .pt-xl-3 {
    padding-top: 1rem !important;
  }

  .pt-xl-4 {
    padding-top: 1.5rem !important;
  }

  .pt-xl-5 {
    padding-top: 3rem !important;
  }

  .pe-xl-0 {
    padding-right: 0 !important;
  }

  .pe-xl-1 {
    padding-right: 0.25rem !important;
  }

  .pe-xl-2 {
    padding-right: 0.5rem !important;
  }

  .pe-xl-3 {
    padding-right: 1rem !important;
  }

  .pe-xl-4 {
    padding-right: 1.5rem !important;
  }

  .pe-xl-5 {
    padding-right: 3rem !important;
  }

  .pb-xl-0 {
    padding-bottom: 0 !important;
  }

  .pb-xl-1 {
    padding-bottom: 0.25rem !important;
  }

  .pb-xl-2 {
    padding-bottom: 0.5rem !important;
  }

  .pb-xl-3 {
    padding-bottom: 1rem !important;
  }

  .pb-xl-4 {
    padding-bottom: 1.5rem !important;
  }

  .pb-xl-5 {
    padding-bottom: 3rem !important;
  }

  .ps-xl-0 {
    padding-left: 0 !important;
  }

  .ps-xl-1 {
    padding-left: 0.25rem !important;
  }

  .ps-xl-2 {
    padding-left: 0.5rem !important;
  }

  .ps-xl-3 {
    padding-left: 1rem !important;
  }

  .ps-xl-4 {
    padding-left: 1.5rem !important;
  }

  .ps-xl-5 {
    padding-left: 3rem !important;
  }
}
@media (min-width: 1400px) {
  .d-xxl-inline {
    display: inline !important;
  }

  .d-xxl-inline-block {
    display: inline-block !important;
  }

  .d-xxl-block {
    display: block !important;
  }

  .d-xxl-grid {
    display: grid !important;
  }

  .d-xxl-table {
    display: table !important;
  }

  .d-xxl-table-row {
    display: table-row !important;
  }

  .d-xxl-table-cell {
    display: table-cell !important;
  }

  .d-xxl-flex {
    display: flex !important;
  }

  .d-xxl-inline-flex {
    display: inline-flex !important;
  }

  .d-xxl-none {
    display: none !important;
  }

  .flex-xxl-fill {
    flex: 1 1 auto !important;
  }

  .flex-xxl-row {
    flex-direction: row !important;
  }

  .flex-xxl-column {
    flex-direction: column !important;
  }

  .flex-xxl-row-reverse {
    flex-direction: row-reverse !important;
  }

  .flex-xxl-column-reverse {
    flex-direction: column-reverse !important;
  }

  .flex-xxl-grow-0 {
    flex-grow: 0 !important;
  }

  .flex-xxl-grow-1 {
    flex-grow: 1 !important;
  }

  .flex-xxl-shrink-0 {
    flex-shrink: 0 !important;
  }

  .flex-xxl-shrink-1 {
    flex-shrink: 1 !important;
  }

  .flex-xxl-wrap {
    flex-wrap: wrap !important;
  }

  .flex-xxl-nowrap {
    flex-wrap: nowrap !important;
  }

  .flex-xxl-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }

  .justify-content-xxl-start {
    justify-content: flex-start !important;
  }

  .justify-content-xxl-end {
    justify-content: flex-end !important;
  }

  .justify-content-xxl-center {
    justify-content: center !important;
  }

  .justify-content-xxl-between {
    justify-content: space-between !important;
  }

  .justify-content-xxl-around {
    justify-content: space-around !important;
  }

  .justify-content-xxl-evenly {
    justify-content: space-evenly !important;
  }

  .align-items-xxl-start {
    align-items: flex-start !important;
  }

  .align-items-xxl-end {
    align-items: flex-end !important;
  }

  .align-items-xxl-center {
    align-items: center !important;
  }

  .align-items-xxl-baseline {
    align-items: baseline !important;
  }

  .align-items-xxl-stretch {
    align-items: stretch !important;
  }

  .align-content-xxl-start {
    align-content: flex-start !important;
  }

  .align-content-xxl-end {
    align-content: flex-end !important;
  }

  .align-content-xxl-center {
    align-content: center !important;
  }

  .align-content-xxl-between {
    align-content: space-between !important;
  }

  .align-content-xxl-around {
    align-content: space-around !important;
  }

  .align-content-xxl-stretch {
    align-content: stretch !important;
  }

  .align-self-xxl-auto {
    align-self: auto !important;
  }

  .align-self-xxl-start {
    align-self: flex-start !important;
  }

  .align-self-xxl-end {
    align-self: flex-end !important;
  }

  .align-self-xxl-center {
    align-self: center !important;
  }

  .align-self-xxl-baseline {
    align-self: baseline !important;
  }

  .align-self-xxl-stretch {
    align-self: stretch !important;
  }

  .order-xxl-first {
    order: -1 !important;
  }

  .order-xxl-0 {
    order: 0 !important;
  }

  .order-xxl-1 {
    order: 1 !important;
  }

  .order-xxl-2 {
    order: 2 !important;
  }

  .order-xxl-3 {
    order: 3 !important;
  }

  .order-xxl-4 {
    order: 4 !important;
  }

  .order-xxl-5 {
    order: 5 !important;
  }

  .order-xxl-last {
    order: 6 !important;
  }

  .m-xxl-0 {
    margin: 0 !important;
  }

  .m-xxl-1 {
    margin: 0.25rem !important;
  }

  .m-xxl-2 {
    margin: 0.5rem !important;
  }

  .m-xxl-3 {
    margin: 1rem !important;
  }

  .m-xxl-4 {
    margin: 1.5rem !important;
  }

  .m-xxl-5 {
    margin: 3rem !important;
  }

  .m-xxl-auto {
    margin: auto !important;
  }

  .mx-xxl-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .mx-xxl-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }

  .mx-xxl-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }

  .mx-xxl-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }

  .mx-xxl-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }

  .mx-xxl-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }

  .mx-xxl-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .my-xxl-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .my-xxl-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }

  .my-xxl-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  .my-xxl-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }

  .my-xxl-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }

  .my-xxl-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }

  .my-xxl-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }

  .mt-xxl-0 {
    margin-top: 0 !important;
  }

  .mt-xxl-1 {
    margin-top: 0.25rem !important;
  }

  .mt-xxl-2 {
    margin-top: 0.5rem !important;
  }

  .mt-xxl-3 {
    margin-top: 1rem !important;
  }

  .mt-xxl-4 {
    margin-top: 1.5rem !important;
  }

  .mt-xxl-5 {
    margin-top: 3rem !important;
  }

  .mt-xxl-auto {
    margin-top: auto !important;
  }

  .me-xxl-0 {
    margin-right: 0 !important;
  }

  .me-xxl-1 {
    margin-right: 0.25rem !important;
  }

  .me-xxl-2 {
    margin-right: 0.5rem !important;
  }

  .me-xxl-3 {
    margin-right: 1rem !important;
  }

  .me-xxl-4 {
    margin-right: 1.5rem !important;
  }

  .me-xxl-5 {
    margin-right: 3rem !important;
  }

  .me-xxl-auto {
    margin-right: auto !important;
  }

  .mb-xxl-0 {
    margin-bottom: 0 !important;
  }

  .mb-xxl-1 {
    margin-bottom: 0.25rem !important;
  }

  .mb-xxl-2 {
    margin-bottom: 0.5rem !important;
  }

  .mb-xxl-3 {
    margin-bottom: 1rem !important;
  }

  .mb-xxl-4 {
    margin-bottom: 1.5rem !important;
  }

  .mb-xxl-5 {
    margin-bottom: 3rem !important;
  }

  .mb-xxl-auto {
    margin-bottom: auto !important;
  }

  .ms-xxl-0 {
    margin-left: 0 !important;
  }

  .ms-xxl-1 {
    margin-left: 0.25rem !important;
  }

  .ms-xxl-2 {
    margin-left: 0.5rem !important;
  }

  .ms-xxl-3 {
    margin-left: 1rem !important;
  }

  .ms-xxl-4 {
    margin-left: 1.5rem !important;
  }

  .ms-xxl-5 {
    margin-left: 3rem !important;
  }

  .ms-xxl-auto {
    margin-left: auto !important;
  }

  .p-xxl-0 {
    padding: 0 !important;
  }

  .p-xxl-1 {
    padding: 0.25rem !important;
  }

  .p-xxl-2 {
    padding: 0.5rem !important;
  }

  .p-xxl-3 {
    padding: 1rem !important;
  }

  .p-xxl-4 {
    padding: 1.5rem !important;
  }

  .p-xxl-5 {
    padding: 3rem !important;
  }

  .px-xxl-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .px-xxl-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }

  .px-xxl-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }

  .px-xxl-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }

  .px-xxl-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }

  .px-xxl-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }

  .py-xxl-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .py-xxl-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }

  .py-xxl-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .py-xxl-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .py-xxl-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .py-xxl-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .pt-xxl-0 {
    padding-top: 0 !important;
  }

  .pt-xxl-1 {
    padding-top: 0.25rem !important;
  }

  .pt-xxl-2 {
    padding-top: 0.5rem !important;
  }

  .pt-xxl-3 {
    padding-top: 1rem !important;
  }

  .pt-xxl-4 {
    padding-top: 1.5rem !important;
  }

  .pt-xxl-5 {
    padding-top: 3rem !important;
  }

  .pe-xxl-0 {
    padding-right: 0 !important;
  }

  .pe-xxl-1 {
    padding-right: 0.25rem !important;
  }

  .pe-xxl-2 {
    padding-right: 0.5rem !important;
  }

  .pe-xxl-3 {
    padding-right: 1rem !important;
  }

  .pe-xxl-4 {
    padding-right: 1.5rem !important;
  }

  .pe-xxl-5 {
    padding-right: 3rem !important;
  }

  .pb-xxl-0 {
    padding-bottom: 0 !important;
  }

  .pb-xxl-1 {
    padding-bottom: 0.25rem !important;
  }

  .pb-xxl-2 {
    padding-bottom: 0.5rem !important;
  }

  .pb-xxl-3 {
    padding-bottom: 1rem !important;
  }

  .pb-xxl-4 {
    padding-bottom: 1.5rem !important;
  }

  .pb-xxl-5 {
    padding-bottom: 3rem !important;
  }

  .ps-xxl-0 {
    padding-left: 0 !important;
  }

  .ps-xxl-1 {
    padding-left: 0.25rem !important;
  }

  .ps-xxl-2 {
    padding-left: 0.5rem !important;
  }

  .ps-xxl-3 {
    padding-left: 1rem !important;
  }

  .ps-xxl-4 {
    padding-left: 1.5rem !important;
  }

  .ps-xxl-5 {
    padding-left: 3rem !important;
  }
}
@media print {
  .d-print-inline {
    display: inline !important;
  }

  .d-print-inline-block {
    display: inline-block !important;
  }

  .d-print-block {
    display: block !important;
  }

  .d-print-grid {
    display: grid !important;
  }

  .d-print-table {
    display: table !important;
  }

  .d-print-table-row {
    display: table-row !important;
  }

  .d-print-table-cell {
    display: table-cell !important;
  }

  .d-print-flex {
    display: flex !important;
  }

  .d-print-inline-flex {
    display: inline-flex !important;
  }

  .d-print-none {
    display: none !important;
  }
}



.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    width: 20%;
}

.col-xs-5ths {
    width: 20%;
    float: left;
}

@media screen and (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}

@media screen and (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}

@media screen and (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}


/*# sourceMappingURL=/main.c52e0fe2.css.map */