html,body { height:100%; color: var(--primaryDark); font-family: 'Raleway', sans-serif; font-size: 14px; font-weight: 300; }

:root {
    --primaryDark: #3A3A4B;
    --primaryBright: #85b0b9;
    --primaryLight: #BFB5B2;
    --secondaryLight: #e6dedc;
    --tertiaryLight: #f2eeed;
    --notBlack: #222222;
}

.voucherBanner { background:#FFC300; padding:24px; border-radius:5px; color:#000; text-align:center; font-size:22px; margin-bottom:40px; } 
#c-cart-coupon-label + label { font-weight:700!important;background:#FFC300; padding:12px; margin-right:10px; display:inline-block; width:auto; border-radius:5px; }


.webBanner { width:100%; height:auto; }
.bannerDesktop { display:block; }
.bannerMobile { display:none; }

@media screen and (max-width:768px) {
.bannerMobile { display:block; }
.bannerDesktop { display:none; }

}

/* === notice ====== */

.notice { z-index:20;position:absolute; left:5%; bottom:0; text-align:center;width:90%; padding:30px; background:#FFC300;  color:#000; }
.notice a { color:#000; }
.notice p {font-size:18px; }
@media screen and (max-width:768px) {
.notice { bottom:unset;top:60px; padding:20px; }

}

/* === notice ====== */

.strike { color:red;text-decoration: line-through; }

header {transition:background-color 0.2s ease; position:fixed; background:none; top:0; left:0; width:100%; height:60px;   z-index:100; }
.scrolled header,
.template-17  header,
.template-18  header,
.template-20  header {background:var(--primaryDark);box-shadow:0 0 10px rgba(0,0,0,0.1);}
/* === product tempalte tweaks == */

.template-17 main,
.template-20 main { top:80px!important; }


/* === home Slider ====*/

  #all_slides {
            position: relative;
            height: 100vh;
            padding: 0;
            margin: 0;
            list-style-type: none
        }

        .slide {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            z-index: 1;
            -webkit-transition: opacity 1s;
            -moz-transition: opacity 1s;
            -o-transition: opacity 1s;
            transition: opacity 1s
        }

        .active {
            opacity: 1;
            z-index: 2
        }

        .controls {
            display: none;
        }

        .slide {
            font-size: 40px;
            padding: 0;
            box-sizing: border-box;
            color: #fff;
            background-size: cover
        }

        

        .controls {
            display: none;
            position: relative;
            top: 1rem;
            right: .5rem;
            border: none;
            outline: none;
            font-size: 20px;
            cursor: pointer;
            border: 2px solid #fff;
            border-radius: 1.5rem;
            background: gold;
            width: 3rem;
            height: 3rem;
            margin-left: .5rem
        }

        .controls:hover,
        .controls:focus {
            background: #eee;
            color: #333
        }

        .container {
            position: relative
        }

        .buttons {
            position: absolute;
            right: .5rem;
            top: 0;
            z-index: 10;
            font-size: 0
        }
        
        
        /* === animation ==== */
        
        @keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}
        
        
.animated {
    animation-duration: 2s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-delay:0s;
}
.animated2 {
    animation-duration: 2s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-delay:1.4s;
}

.fadeInUp {
    opacity: 0;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
}
/* === magnify ===== */

.magnify { transition:opacity 0.3s ease;pointer-events:none;width:80px; margin-left:5px; position:absolute; object-fit:contain;
right: 50%;
top: 50%;
transform: translate(50%,-50%);
opacity: 40%;
    
}
.thumbnail:hover .magnify { opacity:1; }



.galleryh3 { font-size:14px; text-transform:uppercase; letter-spacing:5px;position:relative; width:100%; top:0;text-align:center; padding:10px 5px; bottom:0; left:0;color:var(--primaryDark);pointer-events:none; }

/* logo ==== */

.index .logo { opacity:0; }
.index.scrolled .logo { opacity:1; }


@media screen and (max-width:767px) {
.logo { width:180px; position:absolute; left:50%; top:10px; transform:translate(-50%,0); opacity:1; transition:all 0.4s ease; }
}

@media screen and (min-width:767px) {
.logo { width:220px;position:absolute; left:20px; top:10px; transform:translate(0,0); opacity:1; transition:all 0.4s ease; }
.logoText {  width:220px; position:absolute; left:100px; top:50%; transform:translate(0,-50%); opacity:1; transition:all 0.4s ease; }
header { height:80px; }

.galleryh3 { font-size:16px; }

}

/* nav ==== */

@media screen and (max-width:767px) {
    
    

nav { transition:all 0.3s ease; display:flex; width:100%; height:100%; left:0; top:0; opacity:0; pointer-events:none; position:fixed; background:var(--primaryDark); background-size: 150%;
background-position: -200px -100px; z-index:200;padding:40px; }
nav ul { display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; height:100%; }
nav li a { color:#fff; display:block; text-decoration:none; font-size:24px; padding:10px; text-decoration:none;text-transform: uppercase;
letter-spacing: 3px;font-size: 12px; font-weight:400;}

.menuOpen nav { opacity:1; pointer-events:inherit; }

/* === burger ==== */

.burger { background:none; border:none; cursor: pointer; transition: all 0.3s ease; position: fixed; width:50px; height:50px;  left:10px; top:5px;  z-index: 300; }
.burger span {  transition: all 0.4s ease; display: block;  background: #fff;  width:60%;  height: 4px;  margin-top: -2px;  position: absolute;  left: 20%;  top: 50%; }
.scrolled .burger span,
.scrolled .burger:before,
.scrolled .burger:after { background: var(--primaryBright); }

.burger:before,
.burger:after {  content: "";  display: block;  background: #fff;  width: 60%;  height: 4px;  position: absolute;  left: 20%;
  transform-origin: center center;  transform: rotate(0deg);  transition: all 0.3s ease;}

.burger:before {  top: 30%;  margin-top: -2px;}
.burger:after {  bottom: 30%;  margin-bottom: -2px;}

/* == burger onclick ==== */

.menuOpen .burger span { left:100%; opacity: 0;  background: #fff;}
.menuOpen .burger:before {  top: 50%;  transform: rotate(45deg); background: #fff; }
.menuOpen .burger:after {  bottom: 50%;  transform: rotate(-45deg);  background: #fff;}



}
/* --
@media screen and (max-width:380px) {
    .logo { width:270px; position:absolute; right:20px; top:50%; transform:translate(0,-50%);}
}
*/

@media screen and (min-width:768px) {
    /*
    .logo { position:absolute; max-width:300px; left:40px; top:50%;transform:translate(0,-50%); }
*/
    .burger {  display:none; }
    nav ul { display:flex; justify-content:flex-end; padding:20px 80px 20px; }
    nav li { padding:2px 10px; }
    nav li a { color:#fff; padding:8px 0; display:block; line-height:24px; text-decoration:none;text-transform: uppercase;
letter-spacing: 3px;font-size: 12px; font-weight:400; }
    nav li a:after { content:""; display:block; width:0; height:1px; background:#fff; transition:width 0.3s; }
    nav li a:hover:after,
        nav li.active a:after { width:100%; }
        nav li.active a { color:#fff; }
        nav li a:hover { color:#fff; }
}
.slick-slide a { color:var(--primaryDark); text-decoration:underline;  }
.slick-slide a:after { display:none;}
.content { width:100%; max-width:1200px; margin:0 auto; padding:20px; }
h1,.h1 { font-size:40px;font-family:"Playfair Display", serif; color:var(--primaryDark); text-shadow:0 0 10px rgba(0,0,0,0.2); }
h2,.h2 { font-size:22px;font-family:"Playfair Display", serif; color:var(--primaryDark); }
h3,.h3 { font-size:20px; line-height:150%; color:var(--primaryDark); position:relative; top:-10px;  }
h4,.h4 { font-size:16px; font-family:"Playfair Display", serif; color:var(--primaryDark);}
p, .p { font-size: 16px;margin-bottom: 6px; line-height:150%; }
/* p a { text-decoration:none; display:inline-block; }
p a:after { content:""; display:block; width:0; height:1px; background:var(--notBlack); transition:width 0.3s; }
*/
p a, .content li a, h2 a { color:var(--primaryBright); }
p a:hover:after,
p a.highlight:after { width:100%; }
footer p a:after { background:#fff; }

.content  ul { padding-left:16px; }
.content li { list-style-type:disc; font-size:16px; line-height:150%; margin:0 0 10px 0; }

@media screen and (min-width:768px) {
.content {padding:40px; }
h1,.h1 { font-size:40px; }
h2,.h2 { font-size:30px;}
h3,.h3 { font-size:24px;}
h4,.h4 { font-size:18px; }
p, .p { font-size: 16px; }
}
/* === hero ==== */

.hero{ width:100%; height:160px; position:fixed; top:0; background:#0b071e;  }

.hero img { width:100%; height:100%; object-fit:cover; opacity:0.5; }
.hero h1 { font-size:30px;  line-height:120%; color:#fff; }
.hero .content { position:absolute; text-align:center; left:50%; top:50%; height:75%; transform:translate(-50%,-50%); display:flex; align-items: center; z-index:10;
flex-direction: column; justify-content: flex-end; }



.hero img.homeLogo {opacity:1; max-width:800px; width:100%;height:auto;object-fit:contain; display:block; margin:0 auto 30px auto; }

@media screen and (min-width:768px) {
    .hero{ height:400px;  }
.hero h1 { font-size:50px;  line-height:120%;  }
.hero .content {  justify-content: center;}
}
.homeHero { height:100vh; }

.scrollDownArrow { color:#fff; text-decoration:none; padding:10px 0; font-size:15px; text-transform:uppercase; letter-spacing:3px; text-shadow:0 0 5px rgba(0,0,0,0.3);}
.scrollDownArrow::after { content:""; width:14px; height:14px; border-top:2px solid #fff; border-right:2px solid #fff; position:absolute; left:calc(50% - 10px); top:40px; transform:rotate(135deg); }

.scrollDownArrow::after { 
-webkit-animation-name: bounce;
animation-name: bounce;
-moz-animation-name: bounce;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-moz-animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-moz-animation-fill-mode: both;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
}

@keyframes bounce {0, 20%, 50%, 80%, 100% { top:40px;}
	40% {top:36px;}
	60% {top:36px;}
    
}

main { position:relative; background:#fafafa; top:160px; }
@media screen and (min-width:768px) {
    main { top:400px; }
}
.index main { position:relative; background:#fafafa; top:100vh; }

/* === tables ===== */

table { width:100%; margin-bottom:20px;}
td { padding:20px 12px; }
tr { background:var(--secondaryLight); }
tr:nth-child(even) { background:var(--tertiaryLight); }
td p { margin:0;}


/* === forms ==== */

label { display:block; margin-bottom:3px; font-size:16px; }
input[type="text"], textarea { -webkit-appearance: none;  outline: none; width:100%; padding:10px; border:none; background:var(--tertiaryLight); margin-bottom:20px; }
.error { color:red; }


/* === reviews === */

.reviewsSection { background:var(--secondaryLight); padding:40px 0; margin:20px 0 0 0; }


.callout { background:var(--primaryBright); padding:20px; margin:20px 0;}
.btn { font-size:14px;-webkit-appearance: none;background:var(--primaryBright); cursor:pointer; margin-top:10px;  border:none;color:#fff; text-transform:uppercase; font-weight:600; letter-spacing:3px; padding:12px 32px; border-radius:40px; text-decoration:none; display:inline-block; }
.btn:hover { background:var(--primaryDark); }
.callout h3 { color:#fff; }
.callout .btn { background:#fff; color:#000; }
.callout .btn:hover { background:rgba(255,255,255,0.8);}



@media screen and (min-width:768px) {
.callout {padding:40px; }

}




/* ===== popup ===== */
  .popup { transition:all 0.3s ease; opacity:0; pointer-events:none;display:flex; align-items:center; justify-content:center; width:100%; height:100%; background:rgba(0,0,0,0.3); position:fixed; top:0; left:0; z-index:200; }
    .popupForm { position:relative;width:90%; max-width:600px; background:#fff; box-shadow:0 0 20px rgba(0,0,0,0.2); border-radius:20px; padding:40px 40px 40px; }
    .popupShow { opacity:1;pointer-events:all;}
    h2,h3 { color:#00; }
    .popupForm h2 { font-size:36px; }
    .popupForm li { font-size:14px; margin-bottom:4px; }
    .popupForm h3 { font-size:18px; margin-bottom:30px; letter-spacing:0;}
#popupClose { background:none; color:#000; font-size:33px; position:absolute; right:20px; top:20px; border:none;  cursor:pointer;}

#ingredientsBtn { color:#000; text-decoration:underline; cursor:pointer; }

/* ==== new shop (commerce) ====== */



.c-submit .c-button { text-transform:uppercase; font-weight:400!important; letter-spacing:3px; }



.productContainer { display:flex;flex-direction:column; overflow:hidden;position:relative; }
@media screen and (max-width:500px) {

.productInfo {padding:20px 0;}

.shopOptions { width:100%;margin-bottom:20px; }
.productCards .btn{ display:block; width:90%; text-align:center;font-size:13px; letter-spacing:1px; padding:6px 10px; margin: auto auto 10px auto; }
.productCards li div {}
}

@media screen and (min-width:501px) {
.productContainer { flex-direction:row;  }
.productImages { width:50%;}
.productInfo {width:50%; padding:0 40px;}
.shopOptions {  display: flex;flex-direction: column;max-width: 200px; margin-bottom:4px; }

}
.productInfo ul { list-style:disc; padding-left:14px; margin-bottom:20px; }
.productInfo li { margin-bottom:4px;}
.relatedProducts { padding:40px 0 0 0; }

.preorder { background:var(--orange); color:#fff; padding:20px; border-radius:10px; margin-bottom:20px; font-weight:bold; text-align:center; letter-spacing:3px; text-transform:uppercase; }

.width50percent { width:100%; }

@media screen and (min-width:500px) {
    .width50percent { width:50%; }
}
.product-price__old { color:red; }
h3 .product-price,
.productCards h3 { letter-spacing:0; }

.productCards { padding-left:0!important; display: grid; grid-template-columns: repeat(2, 1fr);gap: 20px; }
.productCards li div { width:100%; height:100%; padding: 20px 20px 10px; text-align:center; 
display: flex;    flex-direction: column; justify-content: space-between;}

@media screen and (min-width:500px) {
.productCards { display: grid; grid-template-columns: repeat(2, 1fr);grid-auto-rows: 1fr; }
.productCards li div { width:100%; padding: 20px 30px 20px; text-align:center; }
.productCards .btn {  margin:auto auto 30px auto;}

}

@media screen and (min-width:768px) {
.productCards { display: grid; grid-template-columns: repeat(3, 1fr); }

}
@media screen and (min-width:1024px) {
.productCards { display: grid; grid-template-columns: repeat(4, 1fr); }
}

.productCards li { position:relative;width:100%;display: flex; }
.productCards h3 { font-size:14px; color:#000; font-weight:400; }

.productCards li a {  width:100%; height:100%;  position: relative;  overflow: hidden;  display: flex;  flex-direction: column;  text-decoration: none;
  background: #fff;  box-shadow: 0 0 20px rgba(0,0,0,0.1);  border-radius: 10px;}
.productCards li img {    aspect-ratio:1/1;   object-fit: cover;width:100%; height:auto;   }
.productCards li p {  font-size: 14px;  color: #000; }

.productCards .recent:after { content:"NEW"; display:block; background:orange; padding:4px; position:absolute; right:-5px; box-shadow:0 2px 10px rgba(0,0,0,0.2);
border-radius:4px; top:5px; font-size:10px; font-weight:700; letter-spacing:2px; color:#fff;}
.productCards .preorderFlash:after { content:"PRE-ORDER";display:block; background:orange; padding:4px; position:absolute; right:-5px; box-shadow:0 2px 10px rgba(0,0,0,0.2);
border-radius:4px; top:5px; font-size:10px; font-weight:700; letter-spacing:2px; color:#fff; }

@media screen and (min-width:1024px) {
.productCards .recent:after {padding:4px;top:20px; right:-5px; font-size:10px;}
.productCards .preorderFlash:after {padding:4px;top:20px; right:-5px; font-size:10px;}
}

/* === other colours === */
.productInfo ul.otherColourCards { padding:0; }
.otherColourCards li { position:relative;width:100%;display: flex;  padding: 0; margin-right:10px; }

@media screen and (max-width:500px) {

}
.template-57 .B_crumbBox { justify-content:center;  }
.B_crumbBox { display:flex; padding:20px 0; width:100%; justify-content:flex-start; overflow:hidden; position:relative; }

.B_crumbBox li { list-style-type:none; font-size:13px; padding:0 10px; }
.B_crumbBox li a { color:#000; white-space:nowrap; }
.B_crumbBox li.B_firstCrumb { padding-left:0; }

.eight .B_crumbBox {justify-content:flex-start;}
.shopOptions label { padding:12px 0 6px 0; }
.shopQty { display: flex;flex-direction: column;max-width: 200px; padding-bottom:20px;}
.shopQty label { padding:12px 0 6px 0; }
.productImage { width:100%;}

.rolloverProductImage { transition:opacity 0.3s ease; position:absolute; left:0; top:0; opacity:0; }
.rolloverProductImage:hover { opacity:1; }

.product-details-module__content ul { list-style:disc; padding-left:20px; text-align:left; }
.product-details-module__content li { margin-bottom:6px; }

.product-details__product-description { padding-bottom:30px; }

.bag { position:fixed; right:40px;color:#fff; top:20px; width:30px; display:block; height:40px;font-size:16px; font-weight:700; line-height:42px; text-align:center; margin-left:20px; text-align:center;  text-decoration:none; fill:#fff; }
.bag svg { position:absolute; left:0; top:0; }
.product-discount { font-size:14px;font-weight:400; }
.productCards .product-discount { display:block; }
    li.cat-sale a:after { content:"SALE"; position:absolute; color:#fff; background:red;
    padding: 35px 20px 10px; display:block;
    top: -20px; transform:rotate(-45deg);
    left: -40px; width:60px; font-weight:bold; text-align:center;
    font-size: 12px;
  }
  

/* = checkout = */
.c-button { background:var(--primaryBright)!important;font-size:14px!important;color:#fff; padding:12px 24px!important;; border-radius:40px!important;; }
.c-cart-item-remove .c-button { background:none!important; width:25px; font-size:16px!important;color:#333;height:25px; border-radius:50%; text-align:center; padding:0 0 0 2px; line-height:25px; }
.c-cart-item-remove .c-button:hover { color:var(--primaryBright); }


.c-dimmed-link { background:#ccc!important; text-decoration:none!important;font-size:14px!important; }
.c-cart-item small { font-size:12px!important; }
.c-cart-message { padding:10px!important; border:none!important; background:var(--primaryBright)!important; }
.c-cart-message p { margin:0; color:#fff; }

.c-cart-summary { width:100%; padding-bottom:20px; }
.c-shipping, .c-billing { width:50%; }
.c-shipping h3, .c-billing h3 { font-size:14px; font-weight:700; }

.c-cart-summary-totals-label { padding:10px!important; }
.c-cart-summary-item-details small { font-size:12px!important; }

.c-checkout-mode { background:var(--primaryBright)!important; color:#fff!important;padding:10px!important; }
.c-checkout-mode p { margin:0; }

.c-step.active,
.c-step.active + .c-step::after { background:var(--primaryBright)!important;}
.c-step.active::after {box-shadow: 6px -6px 0 3px var(--primaryBright)!important;}

.c-step.active a { color:#fff!important; line-height:32px; }
.c-steps-indicator.c-steps-5 li { line-height:32px;}
.c-checkout label { font-size:14px; font-weight:400!important;}
.c-checkout input[type="text"], .c-checkout input[type="url"], .c-checkout input[type="email"], .c-checkout input[type="number"], .c-checkout select { margin-top:0!important; }
.c-checkout-step{ width:50%!important; }
.c-checkout-summary{ display:flex; flex-wrap:wrap;width:50%!important; margin-left:50%!important; }

.c-shipping-address,
.c-billing-address { padding:0!important; border:none!important; }

.c-cart-summary-item { background:#fff; }


@media screen and (max-width:500px) {
    .c-checkout-step,
    .c-checkout-summary  { width:100%!important; margin-left:0!important; }
}

/* ===== CART ===== */
.c-accept-terms { margin-bottom:10px; }

.c-method-radio:checked + .c-method-section { background:none!important; }
/* - hide radio button for payment method
.c-method-section > label,
c-payment-method-radio { display:none!important; }
 */
.c-cart-coupon-label { text-decoration:underline; margin-bottom:10px; }

@media screen and (max-width:500px) {
    
    .bag { position:fixed;top:10px;color:#fff; z-index:9999; width:30px;  line-height:40px; right:20px; padding-left:0; }
    #c-cart-coupon-label + label { width:100%; margin-bottom:20px; }
    .c-cart-totals-wrapper .btn,
    .c-cart-totals-wrapper button { width:100%; text-align:center; }

.c-cart-item-image { width:30%;}
.c-cart-item-name {width:70%;}
.c-cart-item-price { width:20%; }
.c-cart-item-quantity { width:20%; }
.c-cart-item-remove {width:20%;}
.c-cart-item-total {width:20%;}
}
@media screen and (min-width:501px) {
.c-cart-item-image { width:12%;}
.c-cart-item-name {width:40%;}
.c-cart-item-price { width:10%; }
.c-cart-item-quantity { width:20%; }
.c-cart-item-remove {width:10%;}
}
.c-cart-item-image img { width:100%; }
.c-cart-item { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; }
.c-cart-item > div {padding:10px; }

.c-cart-item-quantity { width:80px; padding:10px 0 0!important; }


/* =============== grid ================ */
.content { width:100%;max-width:1200px; margin:0 auto; position:relative; }
.row { width:100%;overflow:visible; margin:20px 0; display:flex; flex-wrap:wrap; }

.col { display: block;  margin: 1% 0 1% 4%; position:relative; }
.col:first-of-type { margin-left: 0; }

.twelve {    width: 100%;  }
.eleven {     width: 91.3333333333%; }
.ten     {     width: 82.6666666667%;}
.nine     {     width: 74.0%; }
.eight    {     width: 65.3333333333%;}
.seven     {      width: 56.6666666667%;}
.six     {      width: 48.0%; }
.five     {      width: 39.3333333333%; }
.four     {     width: 30.6666666667%; }
.three     {     width: 22.0%; }
.two     {    width: 13.3333333333%; }
.one     {    width: 4.66666666667%; }

@media screen and (max-width:980px) { 
    .three     {  width: 48%; }
    .three:nth-child(3n)     {  margin-left:0;}
    .cards li { width:48%; }
    .cards li:nth-child(3n) { margin-right:2%; }
}
@media screen and (max-width:500px) { 
    .row { flex-direction:column; }
    .cards li { width:100%; }

.col { margin: 1% 0 1% 0; }
.twelve,.eleven,.ten,.nine,.eight,.seven,.six,.five,.four,.three,.two,.one {    width: 100%;  }
}




/* ------- Lightbox ------- */

.lightbox {
  display: none;
  color: #fff;
}

.lightbox:target {
  position: fixed;
  top: 0; text-decoration:none;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  place-items: center;
  align-content: center;
  background: rgba(0,0,0,0.85);
  border: 0;
  z-index: 500;
}

.lightbox img {
  max-width: 90vw;
  z-index: 500;
}

.lightbox:target:before { /* Loading spinner */
  content:"";
  height: 2em;
  width: 2em;
  animation: spin .8s infinite linear;
  border: 1px solid;
  border-right-color: transparent;
  border-radius: 50%;
  display: block;
  position: absolute;
  transform: translateX(-50%);
  opacity: .25;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


.lightbox:target span {
font-size: 60px;
color: #fff;
font-weight: 200;
line-height: 30px;
max-width:90vw;
text-align:right; position:absolute;
z-index: 5; top:30px; right:30px;
display:block; width:100%;
}


/* === footer ====== */


footer { padding:40px; text-align:center; background:var(--primaryDark); color:#fff; }
footer h2, footer h3, footer a { color:#fff; }
.social a {  padding:10px;}