/*
   =====================================================

   MAGAZINE STYLE SHEET
   
   Steve Beeston - July 2020

   =====================================================
*/

body {
   background-color: #aaa;
}

div.banner-image-wrapper {
   position: relative;
}

.feature-row {
   position: relative;
   float: left;
   width: 100%;
   background-color: #333;
}

.feature-row img {
   width: 100%;
   text-align: center;
}

.feature-container {
   background-color: #333;
   color: white;
   /* max-width: 100%;
   padding-left: 25%;
   padding-right: 25%;
   */
   width: 100%;
   max-width: 680px;
   margin: 40px auto;
   text-align: center;
}

/* Modification */
.feature-container {
   max-width: 800px;
   background-color: #2a2a2a;
   padding: 40px 60px;
   padding: 30px 50px; /* SRB 10/10/24 00747 */
   margin: 0px auto;
}


.feature-container p,
figcaption {
   margin: 0;
   padding: 10px 0;
   padding: 5px 0 12px 0; /* SRB 30/8/22 */
   padding: 5px 10px 12px 10px; /* SRB 28/12/24 */
   text-align: left;
}

.feature-container img {
   max-width: 100%;
   margin: 10px auto;
   border-radius: 20px;
}


.feature-row h1,
.fw-main-row h1 {
   margin: 0;
   padding: 0;
   font-size: 70px;
   font-weight: 400;
   text-align: center;
   text-transform: uppercase;
   text-shadow: 0 0 8px #000; 
   color: white; 
   letter-spacing: 3px;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 100%;
}

.feature-container h2,
.feature-container h3 {
   color: white;
   margin-top: 0; /* SRB 17/3/23 */
}

.feature-container h2 {
   margin: 0;
   padding: 0 10px;
   font-size: 30px;
   padding-bottom: 20px;
   letter-spacing: 0px;
   text-align: center;
}


.magazine-panel {
   width: 680px; 
   margin: 30px auto 30px auto; 
   padding: 40px; 
   text-align: center;
   background-color: rgba(40,40,40,0.92);
   border-radius: 20px; 
   max-width: 100%;
   margin-bottom: 30px;
}


.magazine-panel p {
   color: white;
}

.breakout-box {
   background-color: rgba(40,40,40,0.5); 
   padding: 30px; 
   width: 250px; 
   position: absolute; 
   top: 100px; 
   right: 50px;
   border-radius: 10px;
   backdrop-filter: blur(3px);
   -webkit-backdrop-filter: blur(3px);
}

.breakout-box p {
   color: white;
   margin-bottom: 0px;
}

p.highlight {
   border-left: 2px solid silver; 
   padding-left: 20px;
}


.box-container {
   /* height: 500px; */
   position: relative;
   max-width: 800px;
   background-color: #333;
   max-width: 800px;
   background-color: #333;
   margin: 0px auto;
   /* border: 1px solid red; */
}

.box-container p,
.box-container h1,
.box-container h2,
.box-container h3 {
   color: white;
   margin-top: 0; /* SRB 17/3/23 */
   line-height: 25px; /* SRB 30/4/23 */
}

.boxpair-wrapper {
   position: relative;
   float: left;
   width: 100%;
   margin-top:40px;
   margin-bottom: 40px;
}

.boxpair-image {
   position: relative;
   float: left;
   /*
   top: 60px;
   left: 0;
   */
   width: 425px;
   z-index: 1;
   margin-right: -70px;
   margin-top: 40px;
}

.boxpair-image img {
   max-width: 400px;
}

.boxpair-text {
   /*
   position: relative;
   float: right;
   top: 20px;
   right: 0px;
   */
   width: 445px;
   /* height: 450px; */
   padding: 35px 20px 15px 70px;
   overflow: hidden;
}

.boxpair-text {
   background-color: #2c2c2c;
}

.white,
.breakout-box h3 {
   color: white;
}

.box {
   position: relative;
   float: left;
   width: 50%;
   background-color: #2c2c2c;
}

.padded-box {
   padding: 20px;
}

.box-wrapper {
   position: relative;
   float: left;
   background-color: #2c2c2c;
}

.spacer {
   float: left;
   height: 30px;
   width: 100%;
   background: #333;
}

.background-blur {
   filter: blur(8px);
   position: absolute;
   width: 100%;
   height: 100%;
}

figure {
   max-width: 1000px;
   /* padding: 20px 20px 0; SRB 5/11/23 */
   margin: 5px 20px;
   margin: 0px auto;
   color: #e4e4e4;
   margin: 20px auto;
   text-align: center;
   border: 1px solid #555;
   line-height: 22px;
}

figure, figcaption {
   background-color: #2c2c2c;
}

figcaption,
figcaption h3 {
   color: #e4e4e4;
}

figcaption {
   border-width: 0;
   font-style: normal;
   text-align: center;
   font-size: 13px;
   line-height: 26px;
   line-height: 22px; /* SRB 14/8/22 */
   font-size: 14px; /* SRB 1/12/22 */
}

figcaption h3 {
   color: #e4e4e4;
   font-size: 1.15rem;
   /* SRB 1/12/22 */
   font-size: 1.3rem;
   line-height: initial;
   padding: 5px 0;
}

figcaption h3 {
   margin: 0;
}

/*
   =============================
   TYPOGRAPHY
   =============================
*/

h3.subtitle {
   font-family: 'open sans',  arial, sans-serif;
   font-size: 1.1em;
   letter-spacing: 0px;
   color: #e4e4e4;
}



/*
   =============================
   EXPERIMENTAL FIXED BACKGROUND
   SRB December 2020
   Source: https://gist.github.com/zakirsajib/c43efa1eccc801a2d09c9cbe498da7e7
   =============================
*/

.parallax-parent-section {
   position: relative;
   float: left;
   width: 100%;
   height: 900px;
}
.parallax-child-section {
   clip: rect(0, auto, auto, 0);
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 900px;
}

#frontlashID{
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateZ(0);
    will-change: transform;
    z-index: 1;
}
.fw-main-row{
    background-attachment:scroll;
    background-image: url(img/lussmanns_background.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}





/*
   =========
   MODAL BOX
   SRB December 2020
   Source: https://www.w3schools.com/howto/howto_css_modals.asp
   =========

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 10%; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
   background-color: #f8f8f8;
   margin: auto;
   padding: 20px;
   border: 4px solid #888;
   border-radius: 10px;
   width: 80%;
   max-width: 750px;
}

/* The Close Button */
.modal-close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.modal-close:hover,
.modal-close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-content p,
.modal-content h1,
.modal-content h2 {
   color: #444;
}

#modalLink,
#modalLink:hover {
   color: white;
   text-decoration: underline;
}

















@media all and (max-width: 1300px) {
   .breakout-box {
      top: 50px;
   }
}

@media all and (max-width: 1023px) {

   .breakout-box {
      top: 30px;
   }

   .feature-row h1 {
      font-size: 50px;
   }

}


@media all and (max-width: 900px) {
   .breakout-box {
      top: 0;
      bottom: 0;
      right: 0;
      border-radius: 0;
   }

   .boxpair-wrapper {
      margin-top: 0px;
   }

   .boxpair-image {
      width: auto;
      margin-left: 20px;
      margin-right: 20px;
   }

   .boxpair-image img {
      max-width: 100%
   }

   .boxpair-text {
      margin-right: 20px;
      margin-left: 20px;
      width: auto;
      padding-top: 10px;
      padding-left: 20px;
   }

}


@media all and (max-width: 839px) {
   .box-wrapper {
      margin-left: 20px;
      margin-right: 20px;  
   }

   .box {
      width: 100%;
   }

 }



@media all and (max-width: 639px) {

   .feature-row h1 {
      font-size: 40px;
   }

   figcaption {
      font-size: 1rem;
      line-height: 26px;
      line-height: 22px; /* SRB 14/8/22 */
   }

   figcaption h3 {
      font-size: 1.4rem;
      padding: 8px 0 8px 0;
   }

   .box-container h1,
   .box-container h2,
   .box-container h3 {
      text-align: center;
   }

   .feature-container {
      padding: 20px 30px;
   }

   figure {
      padding: 0;
   }

}

@media all and (max-width: 479px) {

   .feature-container {
      padding: 20px 30px;
		padding: 20px 20px; /* SRB 29/5/25 */
   }

   /* Titles on Parallax sections
      SRB 6/5/23 */
   .fw-main-row h1 {
      font-size: 46px;
   }


}