/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
*, *::before, *::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html, body {
  height: 100%;
}
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
input, button, textarea, select {
  font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
#root, #__next {
  isolation: isolate;
}

.catamaran-regular {
  font-family: "Catamaran", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.catamaran-bold {
  font-family: "Catamaran", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.overpass-mono-light {
  font-family: "Overpass Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.overpass-mono-regular {
  font-family: "Overpass Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.overpass-mono-regular-italic {
  font-family: "Overpass Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: italic;
}

.overpass-mono-bold {
  font-family: "Overpass Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.overpass-mono-bold-italic {
  font-family: "Overpass Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: italic;
}

body {background-color: #222; color: #ddd; font-family: 'Overpass Mono', sans-serif;}

section {}
section article {width: 1120px; margin: 0 auto;}

header {}
header .logo {width: 180px; text-align: center; margin: 0 auto; padding: 40px 0;}

main {background-image: url("../img/background-page-symbol.png"); background-position: 0 0; background-size: 100% auto; background-repeat: no-repeat;}
.cta {display: flex; flex-direction: row; padding-top: 40px;}
.cta .item {}
.cta .headline {width: 55%; text-align: center; padding: 100px 0 0 0;}
.cta .headline p {font-size: 1.8em;}
.cta .headline h1 {font-size: 3em;}
.cta .info {background-color: rgba(69, 69, 69, 0.4); width: 40%; padding: 30px; border: 5px solid #444; border-radius: 5px;}
.cta .info h2 {font-size: 2em; font-weight: 700; padding-bottom: 30px;}
.cta .info .curr {color: #666; font-size: 0.9em;}
.cta .info .label {font-size: 1em; color: #aaa;}
.cta .info h3 {font-size: 2.4em;}
.cta .info p {padding-top: 20px;}
.cta .info .payment {padding-top: 40px; display: flex;}
.cta .info .icon {display: inline-block; width: 40px;}
.cta .info .blurb {display: inline-block; padding-left: 20px;}

.det {padding: 90px 0 0 0;}
.det .bundle {padding-bottom: 60px;}
.det .bundle h2 {padding-bottom: 30px;}
.det .bundle .tab {display: inline-block; font-size: 1.1em; font-weight: bold; padding: 2px 15px; border: 2px solid #444; border-radius: 30px; background-color: #333;}
.det .bundle .tab .icon-check::before {content: '\2714'; font-size: 1.6em;}
.det .bundle .tab .icon-file {border: 2px solid #555; border-radius: 3px; padding: 2px 5px; font-size: 1em;}
.det .options {padding-bottom: 120px;}
.det .options h2 {padding-bottom: 30px;}
.det .options .tiles {display: flex;}
.det .options .item {width: 25%; text-align: center;}
.det .options .item .icon {position: relative; width: 110px; height: 120px; margin: 0 auto;}
.det .options .item .icon.fleet_m {width: 140px;}
.det .options .item .icon img {position: absolute; bottom: 20px;}
.det .options .item .title {font-weight: bold; font-size: 1.3em;}

footer {height: 60px;}
footer .copyright {text-align: center;}