/* --- Copyright digitalmercury.co.uk 2024 --- */

body, html  {
  height:  100%;
  margin:                 0%;
  background-color:       rgb(220,220,220); /* Fallback color if no opacity support*/
  background-color:       rgba(220,220,220, 0.6); /* Black w/opacity/see-through */
  /* font-family:            Verdana, Geneva, Arial, sans-serif; 
  font-size:              small; */
  /* font-family: "Aboreto"; font-size: small; */
    /* font-family: 'Calibri Light', 'Calibri', 'Arial', 'Sans-Serif'; */
  /* font-family: 'Zen Maru Gothic Antique', 'Calibri Light', 'Arial', 'Sans-Serif'; font-size: small; */
  
  /* Google Fonts */
  /* font-family: "Aboreto", 'Calibri Light', 'Arial', 'sans-serif'; */

  font-family: "Ysabeau Infant", "Urbanist", "Calibri Light", "Arial", "sans-serif";
  font-optical-sizing: auto;
  font-weight: 0.5;
  font-style: Thin 100;
  }

  .fonty-A {
    font-family: "Arimo", "Urbanist", "Calibri Light", "Arial", "sans-serif";
  }

  .fonty-B {
    font-family: "Ysabeau Infant", "Urbanist", "Calibri Light", "Arial", "sans-serif";
  }

  * {
    box-sizing:  border-box;
    overflow-wrap:  break-word;
    text-overflow:  ellipsis;
  }

  .dark {
    z-index: 9;
    color:              rgb(50,45,49);
    color:                rgba(50,45,49,1);
  }

/* --- Format divs and images for scrolling background --- */

/* NB: Opacity settings for these Divs will affect child content */
/* opacity for each content type as well */

/* Background Div Type A */
.div-bg-a {
  height:   100%;
  opacity:  1;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: rgb(50,45,49);
  border-color: rgb(50,45,49,0.8);
  border-top: 6px;
  border-bottom: 6px;
  overflow:  hidden;
}

/* Background Scroll */
.div-bg-plus {
  Height:  100%;
  overflow:  scroll;
  background-attachment:  fixed;
}

.div-bg-plus-copy {
  Height:  100%;
  overflow:  hidden;
  background-size: 100% 100%;
  background-attachment:  fixed;
}

/* Background Div Type B */
.div-bg-b {
  height:   10%;
  opacity:  1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top:  1%;
}

.div-divider {
  text-align:          center;
  margin-top:          0%;
  border-bottom: solid 1px rgba(50, 45, 49, 0.4);
}

/* These are the scrolling backround images */
.noimg { background-image: linear-gradient(rgb(160,155,159), whitesmoke) }
.grad-A { background-image: linear-gradient(rgb(200,195,199), whitesmoke) }
.grad-B { background-image: linear-gradient(to bottom right, rgb(200,195,199), whitesmoke) }
.img1 { background-image: url("img/bg-01f.jpg"); }
.img2 { background-image: url("img/bg-02f.jpg"); }
.img3 { background-image: url("img/bg-03f.jpg"); }
.img4 { background-image: url("img/bg-04f.jpg"); }
.img5 { background-image: url("img/bg-05f.jpg"); }
.img6 { background-image: url("img/bg-06f.jpg"); }
.img7 { background-image: url("img/bg-07f.jpg"); }
.img8 { background-image: url("img/div-01.jpg"); }

.bg-tex-01 {
  background-image: url("img/bg-tex-01.jpg");
  background-repeat:  repeat;
}

/* --- End format scrolling BG --- */

/* --- Format Content Types --- */

.txtbox-A {
  /* White on grey - Centred */
  opacity: 1; /* Because the BG Div may be feint */
  background-color: rgb(50,45,49); /* Fallback colour */
  background-color: rgba(50,45,49, 0.7); /* Black with opacity */
  color: white; /* Fallback colour */
  color: rgba(255,255,255,1); /* Colour with opacity */
  border: 2px solid;
  position: relative;
  z-index: 1;

  padding: 4%;
  text-align: center;
}

.txtbox-B {
  /* White on grey - Centred - No Border */
  opacity: 1; /* Because the BG Div may be feint */
  background-color: rgb(50,45,49); /* Fallback colour */
  background-color: rgba(50,45,49, 0.7); /* Black with opacity */
  color: white; /* Fallback colour */
  color: rgba(255,255,255,1); /* Colour with opacity */
  border: 2px solid;
  /* border-color: rgba(50,45,49, 0.9); */
  border-color: white;
  position: relative;
  z-index: 1;
  padding: 4%;
  text-align: center;
}

.txtbox-C {
  opacity: 1; /* Because the BG Div may be feint */
  background-color: rgb(255,255,255); /* Fallback colour */
  background-color: rgba(255,255,255, 0.9); /* With opacity */
  color: rgb(50,45,49); /* Fallback colour */
  color: rgba(50,45,49,0.8); /* With opacity */
  border: 2px solid;
  border-color: white;
  position: relative;
  z-index: 1;
  padding: 23px;
  padding-top:  10px;
  text-align: left;
}

.txtbox-D {
  opacity: 1; /* Because the BG Div may be feint */
  background-color: rgb(255,255,255); /* Fallback colour */
  background-color: rgba(255,255,255, 0); /* With opacity */
  color: rgb(50,45,49); /* Fallback colour */
  color: rgba(50,45,49,0.8); /* With opacity */
  position: relative;
  padding: 18px;
  text-align: left;
  display: contents;
  overflow: scroll;
}

.combobox-A {
  display: flex;
  flex-wrap:  wrap;
  flex-direction:  row;
  justify-content:  center;
  position: relative;
  min-width:  300px;
  max-width:  400px;
  margin: 2%;
  padding: 0px;
  opacity: 1; /* Because the BG Div may be feint */
  background-color: rgb(255,255,255); /* Fallback colour */
  background-color: rgba(255,255,255, 1); /* With opacity */
  color: rgb(50,45,49); /* Fallback colour */
  color: rgba(50,45,49,0.8); /* With opacity */
  border: 2px solid whitesmoke;
  border-top:  0px;
  border-radius:  0 0 20px 0;
}

.comboimg-A {
  flex-shrink:  1;
  max-width:  400px;
  margin:  0px;
  padding:  0px;
  border-style:  none;
  overflow:  clip;
}

.combotxt-A {
  z-index:  9;
  flex-shrink:  1;
  flex-basis:  70%;
  width:  300px;
  max-height:  200px;
  margin-left:  10px;
  border-style:  none;
  padding:      0.7rem;
  text-align:   center;
  overflow-wrap: break-word;
  /* Only add scroll bars for mobile, and if nec.
  overflow: scroll;
  */
}

.combobox-B {
  display:  flex;
  justify-content:  center;
  position: relative;
  max-width:  300;
  margin: 2%;
  padding: 0;
  opacity: 1; /* Because the BG Div may be feint */
  background-color: rgb(255,255,255); /* Fallback colour */
  background-color: rgba(255,255,255, 1); /* With opacity */
  color: rgb(50,45,49); /* Fallback colour */
  color: rgba(50,45,49,0.8); /* With opacity */
  border: 1px solid;
  border-radius:  20px 0 0 0;
  overflow:  clip;
}

.comboimg-B {
  flex-shrink:  1;
  margin: 0;
  max-width: 250px;
  border-style:             none;
  overflow:  clip;
}

.combotxt-B {
  flex-shrink:  1;
  display:  block;
  max-width:  400px;
  margin:  0px;
  border-style:  none;
  padding:      0.7rem;
  padding-bottom:  70%;
  background-repeat:  no-repeat;
  background-size:  100%;
  background-color: rgba(255,255,255,1); /* Transparent BG for the text */
  text-align:   center;
  overflow-wrap: break-word;
}

.combobox-C {
  display: flex;
  flex-wrap:  wrap;
  flex-direction:  row;
  justify-content:  center;
  position: relative;
  min-width:  300px;
  max-width:  400px;
  margin: 2%;
  padding: 0px;
  opacity: 1; /* Because the BG Div may be feint */
  background-color: rgb(255,255,255); /* Fallback colour */
  background-color: rgba(255,255,255, 1); /* With opacity */
  color: rgb(50,45,49); /* Fallback colour */
  color: rgba(50,45,49,0.8); /* With opacity */
  border: 1px solid;
  border-top:  0px;
  border-radius:  0 0 20px 0;
  overflow:  clip;
}

.comboimg-C {
  flex-shrink:  1;
  background-repeat:  no-repeat;
  background-attachment:  fixed;
  background-size:  100%;
  margin:  0px;
  padding:  0px;
  border-style:  solid 2px;
  overflow:  clip;
}

.comboimg-C img {
  /* Because there is a .img style in w3.css */
  object-fit:               contain;
  border-style:  solid;
  border-width:             1px 1px 0px 1px;
  display:                  block;
}

.combotxt-C {
  z-index:  9;
  width:  100%;
  margin:  0px;
  border-style:  none;
  padding:      0.5rem;
  padding-top:  75%;
  background-repeat:  no-repeat;
  background-size:  100%;
  background-color: rgba(255,255,255,1); /* Transparent BG for the text */
  text-align:   center;
  overflow-wrap: break-word;
  /* Only add scroll bars for mobile, and if nec.
  overflow: scroll;
  */
}

.imgbox-A {
  opacity: 1; /* Because the BG Div may be feint */
  background-color: rgb(255,255,255); /* Fallback colour */
  background-color: rgba(255,255,255, 0.9); /* With opacity */
  color: rgb(50,45,49); /* Fallback colour */
  color: rgba(50,45,49,0.8); /* With opacity */
  border: 2px solid;
  border-color: white;
  position: relative;
  z-index: 1;
  padding: 0;
  text-align: top, left;
  overflow: clip;
}

.imgbox-A img {
  object-fit:               contain;
  border-style:             none;
  display:                  block;
}

.imgbox-B {
  opacity: 1; /* Because the BG Div may be feint */
  background-color: rgb(255,255,255); /* Fallback colour */
  background-color: rgba(255,255,255, 0.6); /* With opacity */
  color: rgb(50,45,49); /* Fallback colour */
  color: rgba(50,45,49,0.8); /* With opacity */
  border: 0px solid;
  border-color: white;
  border-radius:  30px 0 30px 0;
  position: relative;
  z-index: 1;
  margin: 14px;
  padding: 20px;
  text-align: top, left;
  overflow: clip;
}

.imgbox-B img {
  object-fit:               contain;
  border-style:             none;
  display:                  block;
}


/* For large solitary flexible combo */
.txtbox-E {
  position: relative;
  max-width:  400px;
  min-width: 300;
  height:  344px;
  opacity: 1; /* Because the BG Div may be feint */
  background-color: rgb(255,255,255); /* Fallback colour */
  background-color: rgba(255,255,255, 0.9); /* With opacity */
  color: rgb(50,45,49); /* Fallback colour */
  color: rgba(50,45,49,0.8); /* With opacity */
  border:  2px solid white;
  border-radius:  0 0 30px 0;
  margin-top:  18px;
  padding: 16px;
  padding-top:  0px;
  text-align: left;
  font-size:  large;
  overflow-wrap: break-word;
  overflow: clip;
}

/* To go with txtbox-E for large solitary flexible combo */
.imgbox-E {
  opacity: 1; /* Because the BG Div may be feint */
  background-color: rgb(255,255,255); /* Fallback colour */
  background-color: rgba(255,255,255, 0.9); /* With opacity */
  color: rgb(50,45,49); /* Fallback colour */
  color: rgba(50,45,49,0.8); /* With opacity */
  border: 2px solid;
  border-color: white;
  border-radius:  30px 0 0 0;
  position: relative;
  z-index: 1;
  margin-top: 18px;
  padding: 20px;
  text-align: top, left;
  overflow: clip;
}


/* --- For the Testimonials section --- */

.flex-con-testi {
  display:             flex;
  flex-direction:      row;
  flex-wrap:           wrap;
  justify-content:     center;
  width:               100%;
  padding:             1%;
  margin:              0;
  background-color:    white;
}

.card-testi-title {
  text-align:          center;
  justify-content:     center !important;
  margin-top:          10px;
  font-size:           x-large;
}

.card-testi-text {
  display:              inline-flex;
  flex-direction:       row;
  flex-wrap:            wrap;
  flex-basis:           100%;
  justify-content:      center !important;
  overflow-wrap:        break-word;
  width:                50%;
}

.txtwrap-A {
  display:            flex !important;
  flex-direction:     column;
  flex-basis:         38%;
  margin:             2%;
  min-width:          340px;
  padding:            8px;
  background-color:   transparent;
  border-style:       solid;
  border-width:       1px;
  border-color:      rgba(50,45,49,0.6);
  border-radius:      8px;
  background-clip:    border-box;
}

.txtwrap-A p {
  Height:  50%;
}

.txtwrap-B {
  margin-bottom:  2rem !important;
  display: flex   !important;
  height:  50%;
}

.txtwrap-C {
  position:  relative;
  margin-top:  20px;
  top:  45%;
  justify-content:    left;
  font-size:          large;
}

/* Cute display pictures button (Testimonials). */
.imgwrap-B {
  display:  block;
  width:  50px;
  height:  50px;
  border-radius:  50%;
  margin-top:  30px;
  margin-right:  1rem;
  overflow:  visible;
  background-color: #87ceb4;
  position:  relative;
  top:  45%;
}

.imgwrap-B img {
  width:  50px;
  height:  50px;
}

.picsIcon{
  transition:  scale 3s;
}

.picsIcon:hover{
  scale:  1.5;
  rotate:  -30deg;
}

.slides-T1 {
  margin:  8px;
  margin-left:  16px;
}

.slides-T1-img {
  border:  solid  1px;
  padding:  8px;
  margin-top:  3%;
  margin-left:  auto;
  margin-right:  auto;
  width:  92%;
}

.slides-T2 {
  margin:  8px;
  margin-left:  16px;
}

.slides-T2-img {
  border:  solid  1px;
  padding:  8px;
  margin-top:  3%;
  margin-left:  auto;
  margin-right:  auto;
  width:  92%;
}

.slides-T3 {
  margin:  8px;
  margin-left:  16px;
}

.slides-T3-img {
  border:  solid  1px;
  padding:  8px;
  margin-top:  3%;
  margin-left:  auto;
  margin-right:  auto;
  width:  92%;
}

.slides-T4 {
  margin:  8px;
  margin-left:  16px;
}

.slides-T4-img {
  border:  solid  1px;
  padding:  8px;
  margin-top:  3%;
  margin-left:  auto;
  margin-right:  auto;
  width:  92%;
}

/* --- End Testimonials stuff ---*/


.flex-con-title {
  display:                  flex;
  flex-direction:           row;
  flex-wrap:                wrap;
  justify-content:          center;
  padding: 5%;
  padding-top: 11%;
  overflow:  hidden;
}

.flex-con-row-a {
  display:                  flex;
  flex-direction:           row;
  flex-wrap:                wrap;
  width:                    100%;
  margin:                   0 auto;
  margin-top:               8%;
  justify-content:          center;
  padding: 2%;
}

.flex-con-row-b {
  display:                  flex;
  flex-direction:           row;
  flex-wrap:                wrap;
  width:                    100%;
  margin:                   0 auto;
  
  justify-content:          center;
  padding: 2%;
}

.flex-con-col {
  display:                  flex;
  flex-direction:           column;
  flex-wrap:                wrap;
  width:                    50%;
  justify-content:          center;
  padding: 30px;
}


.ico-img {
  border-style:             solid;
  border-color:             rgb(50, 45, 49);
  border-width:             3px;  
  -moz-border-radius:       8px;
  -webkit-border-radius:    8px;
  border-radius:            8px;
}

h1 {
  font-family:  "Arimo", "Calibri Light", "Arial", "sans-serif";
  font-size:    1.8em;
  font-weight:  412;
}

h2 {
  font-family: "Ysabeau Infant", "Urbanist", "Calibri Light", "Arial", "sans-serif";
  font-size:    1.2em;
  font-weight:  400;
}

h3 {
  font-family: "Ysabeau Infant", "Urbanist", "Calibri Light", "Arial", "sans-serif";
  font-size:     1em;
  font-weight:   400;
}

h4 {
  font-family: "Ysabeau Infant", "Urbanist", "Calibri Light", "Arial", "sans-serif";
  font-size:     0.8em;
  font-weight:   400;
}

p {
  font-family: "Ysabeau Infant", "Urbanist", "Calibri Light", "Arial", "sans-serif";
}

.div-fg  {
  background-color:         #white;
  padding:                  10px 10px 10px 10px;
  border-style:             solid;
  border-color:             rgb(50, 45, 49);
  border-width:             1px;
  -moz-border-radius:       8px;
  -webkit-border-radius:    8px;
  border-radius:            8px;
  margin:                   20px 20px 10px 20px; 
  }


/* --- W3.CSS Slider Stuff */

.slides-title{
  display:  flex;
  width:  92%;
  flex-direction:           row;
  flex-wrap:                wrap;
  margin-left:  auto;
  margin-right:  auto;
  margin-top:  2%;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 10%;

  justify-content:          center;
  overflow:  hidden;
}


.slides-1 {
  display: none;
  margin:  0 auto;
  font-family: "Ysabeau Infant", "Urbanist", "Calibri Light", "Arial", "sans-serif";
  font-size: 1.2em;
  opacity: 1; /* Because the BG Div may be feint */
  background-color: rgb(50,45,49); /* Fallback colour */
  background-color: rgba(50,45,49, 0.5); /* Black with opacity */
  color: white; /* Fallback colour */
  color: rgba(255,255,255,1); /* Colour with opacity */
  border:  2px solid white;
  border-radius:  8px;
  position: relative;
  z-index: 1;
  text-align: center;
  overflow:  hidden;
}

.slides-1-plus {
  width: 800;
  height: 533px;
  border:  2px solid white;
  border-radius:  6px;
  padding:  3.8em;
}

.slides-1-img {
  margin-top:  3%;
  margin-left:  auto;
  margin-right:  auto;
  width:  92%;
}

.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0}

.slide-txt-hidden{
  color: rgba(0,0,0,0);
}

/* --- End of W3 slider stuff --- */

/* --- Start -- Adaptive header and dropdown menu --- */
/*     Uses media query and JS to alter between DT and mobile formats */ 
/*     From w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp */

/* Add a black background color to the top navigation */
.topnav {
  background-color:   rgb(50,45,49); /* Fall back */
  background-color: rgba(50,45,49,0.8);
  overflow: hidden;
  position:                 fixed; /* Stay fixed... */
  top:                   0px; /* ...to the top of the window */
  width:                    100%;
  z-index:                  101;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Add an active class to highlight the current page */
.active {
  background-color: #87ceb4;
  color: white;
}

.notactive {
  background-color: rgba(50,45,49,0.8);
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #ddd;
  color: white;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one 
("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float:  right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the
icon. This class makes the topnav look good on small screens (display the links vertically 
instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: fixed; top: 0;}
  .topnav.responsive a.icon {
    position: fixed;
    top:  0;
    right: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: center;
  }
  .topnav.responsive .dropdown {position: fixed; top: 0;}
  .topnav.responsive .dropdown-content {position: fixed; top: 0;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    text-align: left;
    width:  100%;
  }
}

/* --- End of header and dropdown menu stuff. */


#footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color:       rgb(160,160,160); /* Fallback color if no opacity support*/
  background-color:       rgba(50,45,49, 0.3); /* Black w/opacity/see-through */
  color:  whitesmoke;
  text-align:               center;
}

/* --- Trade Page Stuff ---*/

.tBG-01 {
  Height:  30%;
  background-image: url("img/bg-trade-001.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size:  cover;
}

.tBG-02 {
  background-image: src="img/bg-trade-001.jpg";
}