@font-face {
   font-family: 'Futura Std';
   src: url('./../fonts/FuturaStd-BoldOblique.woff2') format('woff2');
   font-weight: bold;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: 'Futura Std';
   src: url('./../fonts/FuturaStd-Book.woff2') format('woff2');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Futura Std';
   src: url('./../fonts/FuturaStd-Medium.woff2') format('woff2');
   font-weight: 500;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Futura Std';
   src: url('./../fonts/FuturaStd-ExtraBoldOblique.woff2') format('woff2');
   font-weight: bold;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: 'Futura Std';
   src: url('./../fonts/FuturaStd-Bold.woff2') format('woff2');
   font-weight: bold;
   font-style: normal;
   font-display: swap;
}

:root {
   --primary: #e9521d;
   --secondary: #e84138;
   --secondary-rgba-30: rgb(232, 65, 56, .30);
   --third: #ef7925;
}

body {
   font-family: 'Futura Std' !important;
}

.text-primary {
   color: var(--primary) !important;
}

.bg-primary {
   background-color: var(--primary) !important;
}

.text-secondary {
   color: var(--secondary) !important;
}

.bg-secondary {
   background-color: var(--secondary) !important;
}

header {
   position: relative;
   height: 60px;

   img {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, 0);
      width: 180px;
   }
}

/* Thank You */
body.thank-you-page {
   background: rgb(233, 82, 29);
   background: radial-gradient(circle, rgba(233, 82, 29, 1) 50%, rgba(239, 121, 37, 1) 86%);
   background-size: cover;
   margin: 0;
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;

   .img-logo {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, 0);
      width: 160px;
      z-index: 9999;
   }

   main {
      z-index: 999;
   }

   .bg-thank-you {
      clip-path: polygon(40% 0, 100% 0, 100% 50%, 60% 100%, 0 100%, 0 50%);
      background: white;
      width: 100%;
      height: 100vh;
      position: absolute;
      top: 0;
      left: 0;
   }
}

@media screen and (width < 768px) {
   header {
      height: 45px;

      img {
         left: -3px;
         transform: translate(0, 0);
         width: 120px;
      }
   }

   .bg-thank-you {
      clip-path: polygon(50% 0, 100% 0, 100% 75%, 50% 100%, 0 100%, 0 25%);
   }
}

input[type=text],
input[type=email],
input[type=checkbox] {
   border: 1px solid var(--secondary);
}

input[type=text],
input[type=email] {
   border-radius: 25px;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=date]:focus {
   box-shadow: 0 0 0 0.25rem var(--secondary-rgba-30);
   border-color: var(--secondary);
}

label {
   font-size: 14px;
   color: #000;
}

.cursor-pointer {
   cursor: pointer;
}

.form-check-input:checked {
   background-color: var(--primary);
   border-color: var(--primary);
}