:root {
  --dblue:#001a2e;
  --dblue2:#00203a;
  --lblue:#00a0d9;
  --red:#c80021;
  --red2:#f33018;
  --lgrey:#e8e8e8;
  --orange:#dca244;
  --yellow:#fdd23c;
}

::selection {
  background-color:var(--red);
  color:#fff;
}

.group:after {
  content: "";
  display: table;
  clear: both;
}

* {
    padding:0;
    margin:0;
    box-sizing: border-box;
	font-family:inherit;
	color:inherit;
}

img {
	display:block;
	max-width:100%;
}

.wrap {
  position:relative;
  width:1220px;
  padding:0 10px;
  max-width:100%;
  margin:0 auto;
}

#burger,
#mobnav {
  display:none;
}

body {
    font-size:62.5%;
    background-color:var(--dblue2);
    color:#fff;
    font-family: 'Saira Extra Condensed', sans-serif;
}

header {
  position: fixed;
  z-index:20;
	left:0;
  top:0;
  width:100%;
  background-color:var(--dblue);
  padding:2em 5%;
}

    nav {
      float:right;
    }
  
      nav ul {
        float:left;
        list-style: none;
      }

        nav li {
          float:left;
        }

          nav a {
            float:left;
            font-size:2.5em;
            padding:0 0.75em;
            text-decoration: none;
            text-transform: uppercase;
          }

          nav a:hover,
          nav button:hover,
          nav a.active {
            color:var(--red);
          }

          nav button {
            float:left;
            color:var(--lblue);
            background:none;
            outline:none;
            border:none;
            cursor: pointer;
            position: relative;
            margin:0 1em;
          }

            nav button img {
              height:1.8em;
              margin-top:0.5em;
            }

            .snipcart-items-count{
              position:absolute;
              top:-5px;
              right:-5px;
              font-size:1em;
            }

          .social {
            padding:0.75em 0 0;
            margin-left:1em;
          }

            .social a {
              display:inline-block;
              width:auto;
              clear:none;
              border:none;
              padding:0;
              margin-left:0.15em;
              width:25px;
            }

            .social a img {
              width:100%;
            }

            .social a img:last-of-type {
              display:none;
            }

            .social a:hover img:first-of-type {
              display:none;
            }

            .social a:hover img:last-of-type {
              display:block;
            }

    #logo {
		  float:left;
      width:250px;
    }
  
		#logo img {
			width:100%;
		}

.flex {
  display:-webkit-flex;
  display:flex;
  -webkit-flex-direction:row;
  flex-direction:row;
  -webkit-flex-wrap:wrap;
  flex-wrap:wrap;
}

.fcw {
  float:left;
  clear:left;
  width:100%;
}

h1,h2,h3,h4,h5,h6 {
	margin-bottom:1em;
	font-weight:normal;
}

main {
  float:left;
}

main p,
main li{
	font-size:1.4em;
	line-height:1.6;
	margin-bottom:1em;
}

  p a,
  li a,
  td a {
    color:var(--lblue);
  }

main ul,
main ol {
	margin:2em;
}

  main li {
    padding-left:1em;
  }

.align_left {
  float:left;
}

.align_right {
  float:right;
}

.align_center {
  text-align: center;
}

img.align_left {
  margin:0.5em 1em 1em 0;
}

img.align_right {
  margin:0.5em 0 1em 1em;
}

img.align_center {
  display:block;
  margin-left:auto;
  margin-right:auto;
}

.stroketext,
.popup h2 {
  font-family: 'Goth-Cond-Bold', sans-serif;
  font-weight: normal;
  text-transform: uppercase;
  -webkit-text-stroke: 0.015em var(--red);
  display:inline-block;
  margin:0 auto 0.5em;
  line-height:1.1;
  color:transparent;
  background-image:url('../img/text-texture3.jpg');
  background-size:cover;
  background-position: center top;
  -webkit-background-clip: text;
  -moz-background-clip: text;
      background-clip: text;
  filter:drop-shadow(0px 0.2em 0.1em #000);
  letter-spacing: -0.025em;
}

.red-btn {
  text-align: center;
  font-size:2em;
  letter-spacing: 0.05em;
  padding:0.5em 2.5em;
  border-radius:0.25em;
  background-color:var(--red);
  text-transform: uppercase;
  box-shadow:0px 0px 0px var(--red),0px 20px 25px #00000055;
  font-weight:Bold;
  text-decoration: none;
  transition: all 0.5s ease-in-out;
  min-width:300px;
  display:inline-block;

  /* testing */
  font-size:3.2em;
  background:none;
  background: linear-gradient(0deg, rgba(200,1,33,0) 0%, rgba(200,0,33,0) 40%, rgba(200,0,33,0.5) 100%);
  border:0.05em solid var(--red);
  padding:0.5em 1.5em;
  letter-spacing: -0.025em;
  color:#fff;
}

  .red-btn:hover {
    background-color:var(--red);
    /* color:var(--red); */
    box-shadow:0px 0px 30px var(--red),0px 20px 25px #000;
  }
  
footer {
  position:relative;
  clear:both;
  float:left;
  width:100%;
  margin-top:5em;
  padding:7.5% 5% 5% 5%;
  display:grid;
  grid-template-columns: 40fr 20fr 20fr 20fr;
  grid-gap:6em;
}

  footer .social {
    margin:1em 0 0 0;
  }

  footer .social a {
    width:40px;
    margin:0 0.25em 0 0;
  }

  footer .dots {
      position:absolute;
      top:0;
      left:5%;
      width:90%;
      border-top:2px dotted var(--lblue);
  }

  footer .contact {
    grid-gap:1em;
  }

  footer h4 {
    font-size:3em;
    color:var(--lblue);
    margin-bottom:0.5em;
    font-weight:bold;
  }

    .flinks a {
      float:left;
      clear:left;
      width:100%;
      font-size: 1.8em;
      text-decoration: none;
    }

      .flinks a:hover {
        color:var(--red);
      }

  footer p {
    font-size:1.8em;
  }

	.copyright {
		opacity:0.5;
    font-size:1em;
	}

.popup {
  position:fixed;
  width:100%;
  height:100%;
  z-index: 21;
  padding:5%;
  text-align: center;
  background-color:#000d;
  display:none;
}

  .showform {
    display:block;
  }

  .popup .inner {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    width:600px;
    background-color:var(--dblue);
    padding:2.5em;
    max-height:90%;
    max-width:90%;
    overflow-y:auto;
    box-shadow: 0 0 20px var(--lblue),0 0px 20px var(--lblue);
    border-radius:1em;
  }

  .popup form {
    margin-top:2em;
  }

  .popup h2 {
    font-size: 5em;
    margin-bottom:0.25em;
  }

  .popup p {
    font-size:1.8em;
  }

  input,
  textarea,
  select {
    font-size:1.5em;
    padding:0.5em;
    float:left;
    clear:left;
    width:100%;
    margin-bottom: 0.5em;
    color:var(--dblue);
    border:0;
    outline:0;
    border-radius:0.25em;
  }

   label {
    float:left;
    clear:left;
    width:100%;
    color:#fff;
    margin-bottom:0.5em;
    font-size: 1.4em;
    text-align: left;
    line-height: 1;
  }

    label span {
      color:var(--lblue);
    }

    label input {
      width:15px;
      float:left;
      margin-right:0.25em;
      border-radius:3px;
    }

  .popup .two-col {
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-gap:1.75em;
  }

  .errortext {
    color:var(--red);
    font-size:1.6rem;
    font-weight:bold;
  }

  .inputerror {
    border:2px solid var(--red);
  }

    .submit {
      background-color:var(--lblue);
      color:#fff;
      cursor: pointer;
      width:150px;
      max-width:100%;
      float:right;
      font-weight: bold;
      padding:0.5em 2em;
      text-transform: uppercase;
      border-radius: 0.25em;
    }

      .submit:hover {
        background-color:#fff;
        color:var(--dblue);
      }

  .close {
    position: absolute;
    right:1em;
    top:1em;
    background-color:var(--lblue);
    width:1.5em;
    height:1.5em;
    line-height: 1;
    color:var(--dblue);
    text-align: center;
    border-radius:100em;
    text-decoration: none;
    font-weight:bold;
    font-size: 2em;
    padding:0.25em;
  }

    .close:hover {
      background-color:#fff;
    }

@keyframes pulse_size {
  0%{
      filter: drop-shadow(0px 20px 15px #000);
      transform:scale(1);
  }
  100%{
      filter: drop-shadow(0px 25px 15px #000);
      transform:scale(1.01);
  }
}

@keyframes pulse_glow {
  0%{
    box-shadow: 0 10px 20px var(--lblue),0 10px 40px var(--lblue);
  }
  100%{
    box-shadow: 0 10px 30px var(--lblue),0 10px 50px var(--lblue);
  }
}

.fade-in-up {
  opacity:0;
  animation-name:fade_in_up;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes fade_in_up {
    0%{
        opacity:0;
        margin-top:5em;
    }
    100%{
        opacity:1;
        margin-top:0;
    }
}


.offer {
  position:fixed;
  inset:0;
  background-color:#000a;
  backdrop-filter: blur(12px);
  z-index:101;
  display:none;
}

  .offer .inner {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:800px;
    max-width:90%;
    max-height:90%;
    overflow:auto;
  }

  .offer .graphic {
    position:relative;
    width:100%;
    float:left;
  }

  .offer .btns {
    position:absolute;
    left:50%;
    top:65%;
    transform:translate(-50%,-50%);
    width:250px;
  }

  .offer .graphic a {
    float:left;
    clear:left;
    width:100%;
    text-align: center;
    background-color:var(--yellow);
    color:var(--dblue);
    padding:0.5em 1rem;
    font-size:1.8em;
    font-weight:bold;
    text-decoration: none;
    text-transform: uppercase;
    margin-bottom:0.5em;
  }

  .offer .graphic .yes {

  }
  .offer .graphic .no {
    background-color:var(--red2);
  }

    .offer .graphic a.close {
      width: 3rem;
      right: 1em;
      top: 1em;
      font-size: 1.4rem;
      padding: 0.6em 0.75em;
      height: 3rem;
    }

    .offer .graphic img {
      width:100%;
    }

    .offer .graphic a:hover {
      background-color:#fff;
      color:var(--dblue);
    }

    .offer .form-outer,
    .offer .success {
      background-color:var(--orange);
      color:var(--purple);
      display:none;
      padding:2rem;
    }

    .show,
    .form-outer.show {
      display:block;
    }

    .offer .success {
      display:block;
    }

    .offer :is(.text,.success) p {
      font-size:1.4rem;
      margin-bottom:1em;
      color:var(--dblue);
    }

    .offer-inner {
      display:grid;
      grid-gap:1rem;
      padding-bottom:2rem;
    }

    .offer label {
      font-size:0.9rem;
      color:var(--dblue);
    }

    .offer input,
    .offer select {
      float:left;
      clear:left;
      width:100%;
      padding:0.5rem;
      border-radius:0.25rem;
      outline:none;
      border: 1px solid #ABB0B2;
      color:var(--dblue);
    }

    .datefield {
			display: grid;
			grid-template-columns: 50px 50px;
			grid-gap: 0.5rem;
			float: left;
			clear: left;
		}

    .offer .submit {
      border-radius: 100em;
      background-color:Var(--dblue);
      color:#fff;
      cursor: pointer;
      width:200px;
      float:left;
      outline:none;
      border:none;
    }

      .offer .submit:hover {
        background-color:#fff;
        color:var(--dblue);
      }

    #mc_embed_signup h2 {
      margin:0 0 0.5em !important;
    }

    .two-col {
      display:Grid;
      grid-template-columns: 1fr 1fr;
      grid-gap:0.5rem;
    }

    #mc_embed_signup .button {
      background-color:var(--dblue) !important;
      color:#fff !important;
      border-radius:0 !important;
      text-transform: uppercase;
      font-weight:bold;
      padding:0.5em 1.5em;
    }

      #mc_embed_signup .button:hover {
        background-color:#fff !important;
        color:var(--dblue);
      }



@media screen and (max-width:1299px) {
  nav a,
  nav button {
    font-size:1.8em;
    padding:0.4em 0.7em;
  }
}

@media screen and (max-width:999px) {
  
  nav ul {
    display:none;
    float:left;
    clear:left;
    width:100%;
    background:none;
  }

    #burger {
      display:block;
      float:right;
      width:40px;
      margin-top:0.5em;
    }

    nav,
    nav li,
    nav a,
    .basket {
      float:left;
      clear:left;
      width:100%;
      text-align:center;
    }

    nav a,
    .basket {
      border-bottom:1px dotted #ffffff50;
    }

    nav button {
      float:none;
      display:block;
      margin:0 auto;
    }

      nav button img {
        margin:0;
      }

      .snipcart-items-count {
        top:50%;
        line-height:1;
        transform:translateY(-50%);
      }

    nav .social {
      text-align: center;
      margin:0;
    }

      nav .social a {
        width:40px;
        margin:0.5em 0.15em;
        clear:none;
        float:none;
        display:inline-block;
      }

      nav li:hover .subnav {
        display:none;
      }
  
    footer {
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap:5em;
    }

    .flogo {
      grid-column:1/4;
    }

    footer .links {
      padding-top:0;
    }

    footer .social {
      grid-column: 2/3;
      padding:0;
      margin:2em 0 0 0;
    }

    .copyright {
      grid-column:1/4;
    }

    .red-btn {
      min-width:175px;
    }
}

@media screen and (max-width:599px) {
  .main td {
    display:block;
  }

  footer {
    grid-template-columns: 1fr;
  }

    .copyright,
    .flogo {
      grid-column:1;
    }
}

@media screen and (max-width:499px) {
  footer {
    grid-template-columns:1fr;
    grid-gap:5%;
  }

    footer .social {
      grid-column:unset;
      text-align:center;
    }

    main p,
    main li,
    main td {
      font-size:2em;
      line-height:1.4;
    }

    p a {
      word-break: break-all;
    }

  .hero h1,
  main h2  {
    font-size:6em;
  }

  footer h4 {
    margin-bottom:0;
  }
}
@media screen and (max-width:399px) {

  #logo {
    width:200px;
  }

  #burger {
    margin:0;
  }

  footer .links {
    grid-template-columns:1fr;
    grid-gap:5%;
    text-align: center;
  }

  .red-btn {
    font-size: 3em;
  }
}