@import url('https://fonts.googleapis.com/css2?family=Spartan:wght@100;200;300;400;500;600;700;800;900&display=swap');
/* GLOBAL STYLING........... */
body {
  margin: 0;
  padding: 0;
  background-color: white;
  font-family: Arial, Helvetica, sans-serif;
  /* font-family:'Spartan', Arial, Helvetica, sans-serif;     background-color: rgba(112, 128, 144, 0.6);*/
}

* {
  box-sizing: border-box;
  /* The box-sizing property GLOBAL STYLING. */
}

/* index.html BELOW ...........*/

/* DEVICE BREAKPOINT */
.example {
  position:relative;
  width: 100%;
  height: 6px;
}

/* clear floats after the columns*/
.row::after {
  content: "";
  display: table;
  clear: both;
}
/* CREATE COLUMNS THAT FLOAT NEXT TO EACH OTHER */
.column1 {
  float: left;
  top:0px;
  width:50%;
  margin-top:0%;
  padding:0px;
  border: none;
  background-color: transparent;
}
.column2 {
  float: left;
  top:0px;
  width:50%;
  height:auto;
  margin-top:0%;
  padding:0px;
  border: none;
  background-color: transparent;
}

}
.column3 {
  float: left;
  top:0px;
  width:100%;
  height:auto;
  margin-top:0%;
  padding:0px;
  border: none;
  background-color: transparent;
}

.column4 {
  float: left;
  bottom:0px;
  width:100%;
  height:auto;
  margin-top:0%;
  padding:0px;
  border: none;
  background-color: rgba(112, 128, 144, 0.2);
}

/* SLIDE SHOW COLUMN .......... */
.slides-left {
  display: none;
}

.slides-right {
  display: none;
}

.slides-sml {
  display: none;
}

/* *****************use margin-left and margin-right to shift picture left or right*****************/
/* SLIDE SHOW IMG */
img {

}
/* ........................... */
/* Fading animation    *** */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 4;
  animation-name: fade;
  animation-duration: 4s;
}

@-webkit-keyframes fade {
  from {opacity: 1} to {opacity: 1}
}

@keyframes fade {
  from {opacity: 1} to {opacity: 1}
}

/* END OF COLUMNS....................................... */

/* LARGE BANNER 'ew' letters */
.centered-e {
  position: absolute;
  top: -282px;
  left: 52%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  font-size: 330px;
  color: slategray;
  opacity: 0.4;
  padding-right: 255px;
  text-shadow: 1px 1px 1px white;
  z-index: 50;
}

.centered-w {
  position: absolute;
  top: -284px;
  left: 48%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  font-size: 330px;
  color: slategray;
  opacity: 0.2;
  padding-left: 175px;
  text-shadow: 1px 1px 1px white;
  z-index: 50;
}
/* ..EW IMAGE ...................*/
.centered-ewimage {
  position: absolute;
  top: 95px;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.3;
}

#ewimage-sml{
  display: none;
}
#ewimage-lrg{
  display: none;
}

.centered-bagtxt {
  margin-top: 80px;
  position: absolute;
  text-align: center;
  font-weight: bold;
  color: white;
  letter-spacing: 4px;
  opacity: 0.5;
  text-shadow: 1px 1px 1px gray;
  width: 100%;
  z-index: 10;
}

/* ew-image */
.responsive-sml {
  max-width: 320px;
  height: 170px;
}

.responsive-lrg {
  max-width: 370px;
  height: 170px;
}
/* .............................*/

/* COMPANY NAME ................*/
.companyname {
  position: relative;
  top: 25px;
  width: 100%;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  color: #301934;
  letter-spacing: 1px;
  padding-right: 10px; /* shift name over to center */
  text-shadow: 1px 1px 1px gray;
  border-bottom: 1px solid white;
  opacity: 1;
}

hr {
  width: 70%;
  height: 0px;
  color: pink;
  background-color: pink;
}

/*    Join The Waiting List txt   */
.jointhelisttxt {
  font-size: 15px;
  color: orange;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 5px 0px 3px 0px;
  text-decoration: none;
  z-index: 5;
  font-family:'Spartan', Arial, Helvetica, sans-serif;
}

/*  end of COMPANY NAME .........*/

div.headerblock {
  position: absolute;
  text-align: center;
  z-index: 3;
  top: 0px;
  margin-top: 0px;
  width: 100%;
  margin: 0px ;
  background-color: none;
  padding: 8px 0px 0px 0px;
  opacity: 1;
}

/* ACCESS BUTTONS BELOW ....*/
table.signinbar-tbl {
  float: left;
  width: 100%;
  margin: 0px;
  padding: 0px;
  text-align: center;
  height: auto;
}

table.signinbar-tbl tr {
  height: auto;
  width: 50%;
  font-weight: 595;
  opacity: 1;
  letter-spacing: 2px;
  border: none;
}

table.signinbar-tbl td {
  height: auto;
  width: 50%;
  font-weight: 595;
  opacity: 1;
  letter-spacing: 2px;
  border: none;
}

#space-height {
  padding: 0px 0px 60px 0px;
}

/* ACCESS BUTTONS ............ */
/*  OPEN FORM BUTTON OPTIONS   */
/* ........................... */
#hidebutton1 {
  text-decoration: none;
  border: none;
  width: 45%;
  background-color: transparent;
  padding: 2px 0px 5px 5px;
  height: 5%;
}

/*  OPEN FORM BUTTON OPTIONS */
.button1 {
  position: absolute;
  right: 50%;
  color: white;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
  padding: 0px;
  margin: 0px 1px 0px 0px;
  border: none;
  text-shadow: 1px 1px 1px #303030;
  background-color: transparent;
  cursor: pointer;
  height: 5%;
  z-index: 10;
}

.button1:hover {
  background-color: none;
  font-weight: 600;
  opacity: 1;
  color: gold;
  transition: 0.5s ease;
}

.button1:active {
  transform: scale(0.85);
}

#hidebutton2 {
  text-decoration: none
  border:none;
  width: 45%;
  background-color: transparent;
  padding: 4px 5px 5px 0px;
  height: 5%;
}

.button2 {
  position: absolute;
  left: 50%;
  color: white;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
  padding: 0px;
  margin: 1px 0px 0px 1px;
  border:none;
  text-shadow: 1px 1px 1px #303030;
  background-color: transparent;
  cursor: pointer;
  height: 5%;
  z-index: 10;
}

.button2:hover {
  background-color: none;
  font-weight: 600;
  opacity: 1;
  color: gold;
  transition: 0.5s ease;
}

.button2:active {
  transform: scale(0.85);
}


/* LARGE SHOP TEXT */
#shop-txt {
  position: relative;
  color: #FFFFFF;
  font-size: 25px;
  font-weight: 900;
  text-align: center;
  padding-top: 100px;
  line-height: 1.2;
  text-shadow: 1px 1px 1px gray;
  z-index: 50;
}

/* SMALL APPAREL TEXT */
#retailcategories-txtsml {
  top: 0px;
  font-size: 16px;
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: 1px;
  padding-top: 30px;
  margin: 0px;
  text-align: center;
  line-height: 0;
  text-shadow: 1px 1px 1px #282828;
  opacity: 1;
  z-index: 2;
}

/* BAG APPAREL TEXT */
#retailcategories-txtlarge {
  top: 0px;
  font-size: 16px;
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: 1px;
  padding: 0px;
  margin: 0px;
  text-align: center;
  line-height: 0;
  text-shadow: 1px 1px 1px #282828;
  opacity: 1;
  z-index: 2;
}

#retailcontactxt {
  font-size: 16px;
  padding-top: 50px;
  padding-bottom: 25px;
}


/* 222..CONTACT TEXT */
.contactus {
  top: 0px;
  font-size: 15px;
  font-weight: 600;
  color: white;
  letter-spacing: 2px;
  padding: 10px 20px 20px 25px;
  margin: 0px;
  background-color: rgba(112, 128, 144, 0.4);
  text-align: center;
  line-height: 0;
  text-decoration: none;
  opacity: 1;
  z-index: 2;
  }

.contactus:hover {
  background-color: none;
  font-weight: 600;
  opacity: 1;
  color: black;
  text-shadow: none;
}
/* ...................*/

/* 333..CONTACT TEXT */
.contact-m {
  position: relative;
  font-weight: 600;
  letter-spacing: 3px;
  color: #FFFFFF;
  text-shadow: 1px 1px 1px darkgray;
  z-index: 5;
}

.contact-m:hover {
  background-color: none;
  font-weight: 600;
  opacity: 1;
  color: #000000;
  text-shadow: none;
}
/* ..........................*/

/*  444..CONTACT TEXT */
#contactform {
  position: relative;
  font-size: 14px;
  font-weight: 600;
  color: orange;
  letter-spacing: 1.5px;
  line-height: 2;
  text-shadow: 1px 1px 1px gray;
  padding: 30px 0px 40px 0px;
  background-color: none;
  opacity: 1;
  z-index: 4;
}

.contactform:hover {
  background-color: none;
  font-weight: 600;
  opacity: 1;
  color: #000000;
  text-shadow: none;
}
/* END OF ALL CONTACT/EMAIL US */
/* ........................*/

/* SCREEN OVERLAY sitting on top of page ........*/
.overlay {
  position: fixed;
  display: none;
  /* Must be ( display - none)  for buttons above to work
  which keeps the overlay hidden by default */ 
  width: 100%;
  height: 1500px;/* full coverage */
  top: 0px;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: transparent;  /* white overlay background with opacity  rgba(105, 105, 105, 0.4);*/
  z-index: 3; /*  specifies a stack order*/
  cursor: pointer;  /* add a pointer on hover */
  padding: 0px 0px 0px 0px; /* positions black box - (inner Modal)  up or down the first px */
  z-index: 50;
}

/* HIDDEN SIGNIN ACCESS BOX TRANSPARENT GREY.........*/
.overlay-contentainerbox {
  left: 0px;
  text-align: center;
  position: relative;
  width: 80%;
  height: auto;
  background-color: rgba(112, 128, 144, 0.4);
  border: 1px;
  border-color: slategray;
  border-style: solid;
  margin: -80px auto 0px auto;
  padding: 20px 10px 50px 10px;
  opacity: 1;
}

/* ERROR MESSAGE ...........*/
.inviteCodeRequiredErr1 {
  color: white;
  background-color: rgba(112, 128, 144, 0.4);
}

.inviteEmailRequiredErr2 {
  color: white;
  background-color: rgba(112, 128, 144, 0.4);
}

.inviteNameRequiredErr2 {
  color: white;
  background-color: rgba(112, 128, 144, 0.4);
}
/* .........................*/

/* ACCESS SIGNIN BOX CONTENTS ....... */
table.form-accesstype {
  width: 100%;
  height: 100px;
  padding: 0px 0px 0px 0px;
  margin: 0px auto 0px auto;
}

table.form-accesstype th {
  vertical-align: top;
  padding: 0px 0px 0px 0px;
  margin: 0px;
  border: none;
}

table.form-accesstype td {
  vertical-align: top;
  padding: 0px 0px 0px 0px;
  margin: 0px;
  border: none;
}

table.form-accesstype tr {
  vertical-align: top;
  padding: 0px 0px 0px 0px;
  margin: 0px; border:none;
  background-color: none; /* removed background-color: rgba(112, 126, 144, 0.3);...*/

  color: #FFFFFF;
  text-align: center;
  height: auto;
  font-weight: bold;
}

/* .....*/
.red-dot {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 30px;
  left: -20px;
  text-align: center;
  border: 1px solid gray;
  background-color: crimson;
  display: inline-block;
  border-radius: none;
  z-index: 3;
  opacity: 1;
}

/* X|CLOSE Form'a' overlay p-tag onclick off() */   
/*     -- border radius 50% creates an oval shape */
.red-close {
  position: relative;
  top: 24%;
  left: 0px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-align: center;
  color: #FFFFFF;
  padding: 0px;
  border: none;
  line-height: 0px;
  margin-left: auto;
  margin-right: auto;
  z-index: 3;
}

.red-close:hover {
  color: #FFFFFF;
  text-decoration: none;
  cursor: pointer;
  font-weight: 600;
}

.red-close:focus {
  color: #FFFFFF;
  text-decoration: none;
  cursor: pointer;
  font-weight: 600;
}

.layercontentheading-small1 {
  display: block;
}

.layercontentheading-medium1 {
  display: none;
}

.layercontentheading-large1 {
  display: none;
}

.layercontentheading-small2 {
  display: block;
}

.layercontentheading-medium2 {
  display: none;
}

.layercontentheading-large2 {
  display: none;
}

.membertxt {
  line-height: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 15px 0% 0px 10px;
  opacity: 1;
  letter-spacing: 0.5px;
}

.txtcomesee {
  position: relative;
  font-size: 12px;
  font-weight: bold;
  color: white;
  letter-spacing: 1.5px;
  line-height: 2;
  text-shadow: 1px 1px 1px gray;
  padding: 30px 0px 40px 0px;
  background-color: none;
  opacity: 1;
  z-index: 4;
}


/*........................ */
/*  Form SIGNIN is split into 3 sections with identified by id letters   |   fieldset a , fieldset b and fieldset c     */
#a, #b, #c {
  border: none;
}
/*........................ */
/*  REMOVES built in FOCUS BORDER HIGHLIGHT on an input text element */
input:focus, select:focus, button:focus {
  outline: none;
}
/*........................ */

/* FORM CSS .....CREATE MY OWN FOCUS BORDER...large border SIGNIN........ */
#input1:focus {
  border: 1px solid slategray;
  height: 35px;
}
#input3:focus {
  border: 1px solid slategray;
  height: 35px;
}
/* FORM CSS .....CREATE MY OWN FOCUS BORDER...large border NEW BOX........ */
.input1:focus {
  border: 1px solid slategray;
  height: 35px;
}
.input2:focus {
  border: 1px solid slategray;
  height: 35px;
}
.input3:focus {
  border: 1px solid slategray;
  height: 35px;
}
.input4:focus {
  border: 1px solid slategray;
  height: 35px;
}
/*........................ */


/* FORM CSS  ................ */
input[type=text], [type=email] {
  position: relative;
  border-radius: 3px;
  background-color: rgba(255,255,255,0.8);
  width: 200px;
  padding: 3px 1px 3px 0px;
  margin: 0px 0px 0px 0px;
  font-size: 14px;
  text-align: center;
  color: navy;
  font-weight: 600;
  letter-spacing: 1.7px;
  border: 1px solid #909090;
}

/* Form : Change autofill backgound color   */
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #FFFFFF inset;/* Change background color to any color here ;) */
  -webkit-text-fill-color: Black !important;/*Change text in autofill textbox*/
  display: inline-block;
  border: 1px solid gray;
}

/*  hide autofill safari icon in input field - For Safari 11 {visibility: hidden} is enough  */
input::-webkit-contacts-auto-fill-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  position: absolute;
  right: 0;
}

input[type=submit] {
  position: relative;
  border-radius: 3px;
  width: 200px;
  background-color: #000000;
  color: #FFFFFF;
  padding: 8px 20px 8px 25px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  border-bottom: 1px solid #CCC;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1.5px;
  font-family: Arial;
}

input[type=submit]:hover {
  background-color: #000000;
  font-weight: 900;
  opacity: 1;
  color: gold;
}

input[type=submit]:focus {
  background-color: #000000;
  font-weight: 900;
  opacity: 1;
  color: gold;
}

.submit-btn {
  position: relative;
  font-weight: 900;
  border-radius: 3px;
  width: 200px;
  height: 25px;
  background-color: #000000;
  color: #FFFFFF;
  padding: 8px 5px 25px 5px;
  margin: 30px 0px 20px 0px;
  border: 1px solid #000000;
  cursor: pointer;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1.5px;
  opacity: 1;
  font-family: Arial;
}

.submit-btn:hover {
  background-color: #000000;
  font-weight: 900;
  opacity: 1;
  color: gold;
  font-weight: bold;
}

.submit-btn:focus {
  background-color: #000000;
  font-weight: 900;
  opacity: 1;
  color: gold;
  font-weight: bold;
}

.submit-btn.ng-invalid {
  background-color: gold;
}

/* Set style for form cancel button */
.cancelbtn {
  border-radius: 3px;
  width: 200px;
  height: 25px;
  padding: 5px;
  background-color: #000000;
  color: #FFFFFF;
  border: 1px solid #000000;
  padding: 8px 5px 25px 5px;
  margin: 8px 0;
  cursor: pointer;
  opacity: 1;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.7px;
  align: center;
}

.cancelbtn:hover {
  background-color: #000000;
  font-weight: 500;
  opacity: 1;
  color: gold;
  font-weight: bold;
}

.cancelbtn:focus {
  background-color: #000000;
  font-weight: 500;
  opacity: 1;
  color: gold;
  font-weight: bold;
}

.cancelbtn.ng-invalid {
  background-color: gold;
}


/* .................................................................................  */
/* INPUT LABELS ....................................................................  */
.labelcode1  {
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: 3px;
  font-size: 12px;
  opacity: 1;
  margin-left: auto;
  margin-right: auto;
}

.labelname1 {
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: 3px;
  font-size: 12px;
  opacity: 1;
  margin-left: auto;
  margin-right: auto;
}

.labelemail1 {
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: 3px;
  font-size: 12px;
  opacity: 1;
  margin-left: auto;
  margin-right: auto;
}

.labelcountry1 {
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: 3px;
  font-size: 12px;
  opacity: 1;
  margin-left: auto;
  margin-right: auto;
}

.labelcode2  {
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: 3px;
  font-size: 12px;
  opacity: 1;
  margin-left: auto;
  margin-right: auto;
}

.labelemail2 {
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: 3px;
  font-size: 12px;
  opacity: 1;
  margin-left: auto;
  margin-right: auto;
}

/* SELECT STYLING ............. */
.styled-select {
  overflow: hidden;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  background-color: #FFFFFF;
}

/* this select below sits on top of the default select above */
.styled-select select {
  color: #000000;
  background-color: #FFFFFF;
  border: 1px solid gray;
  opacity: 1;
  letter-spacing: 1.5px;
  margin: 0px 0px 0px 0px;
  border: 1px solid gray;
  font-size: 10px;
  color: #000000;
  font-weight: 600;
  height: 30px;
  padding: 30%;
  /* If you add too much padding here, the options won't show in IE */ 
  width: 99%;
}

.styled-select select:hover {
  color: #000000;
  font-size: 11px;
  font-weight: 400;
  opacity: 0.8;
}

.styled-select select:focus {
  background-color: #FFFFFF;
  text-align: center;
  color: navy;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 4;
  opacity: 1;
}

/* Rounded Corners */
.rounded {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

/* Color: Background */
.black {
  background-color: transparent;
} /* color under select */

/* Colors: Text */
.black select {
  color: #navy;
} /* font color */

/* FOOTER SECTION ...........  transform: rotate(90deg);............................... */
/* top section ............................................. */

.topfooter {
  width: 80%;
  color: white;
  border: none;
  margin-left: auto;
  margin-right: auto;
  padding-top: 20px;
  background-color: black;
  opacity: 1;
  z-index: 20;
 }

.showheader {
  position: relative;
  font-size: 2vw;
  letter-spacing: 2px;
  line-height: 1.5;
  color: white;
}

.showdate {
  position: relative;
  font-size: 6vw;
  font-weight:700;
  letter-spacing: 3px;
  color: white;
}
/* small group txt ............... */
.footersmall {
  position: relative;
  background-color: none;
  margin-left: auto;
  margin-right: auto;
  font-size: 11px;
  width: 100%;
  margin-top: 0%;
  padding: 0px 8% 70px 8%;
}

.smalltxt {
  position: relative;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  color: #E8E8E8;
  font-size: 10px;
  font-weight: 600;
  line-height: 20px;
  padding-bottom: 4%;
  letter-spacing: 2px;
  text-align: center;
  height: auto;
  font-family:'Spartan', Arial, Helvetica, sans-serif;"
}

/* large group txt................ */
.footerlarge {
  background-color: none;
  margin-left: auto;
  margin-right: auto;
  padding: 20px 20px 50px 20px;
}


.footerheader {
  position: relative;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 4px;
  color: white;
  padding-top: 20px;
  text-align: center;
}
/* ...........................#64485c..... */
.thejourneytxtsml {
  position: relative;
  padding-top: 25px;
  padding-bottom: 110px;
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  color: lightgray;
  line-height: 30px;
  letter-spacing: 3px;
  border-top: none;
  background-color: black;
  margin-bottom: 0px;
  width: 100%;
}

.thejourneytxtlrg {
  position: relative;
  padding-top: 25px;
  padding-bottom: 110px;
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  color: lightgray;
  line-height: 30px;
  letter-spacing: 3px;
  border-top: none;
  background-color: black;
  margin-top: 0px;
  width: 100%;
}
/* footer ................. */
.footersml {
  position: fixed;
  height: 7%;
  left: 0;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #606060;
  background-color: #000000;
  padding: 10px 0px 0px 0px;
  z-index: 100;
}

.footerlrg {
  position: fixed;
  height: 7%;
  left: 0;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #606060;
  background-color: #000000;
  padding: 10px 0px 0px 0px;
  z-index: 100;
}

.companycom {
  position: relative;
  color: #FFFFFF;
  font-size: 12px;
  letter-spacing: 2px;
  text-align: center;
  font-weight: 100;
  margin: 0px;
  top: 0;
}

.copy {
  position: relative;
  color: #FFFFFF;
  font-size: 14px;
  letter-spacing: 2px;
  text-align: center;
  font-weight: 400;
  margin: 0px;
  text-shadow: 1px 1px 1px #909090;
}

.year {
  font-size: 9px;
}
/* END OF FOOTER SECTION .................... */
/* END OF FOOTER SECTION .................... */


/* .................................MEDIA DEVICE SCREEN.............................. */
/* .................................MEDIA DEVICE SCREEN.............................. */

/* YELLOW ..................................................................... YELLOW */
/* YELLOW ..................................................................... YELLOW */
/* Extra small devices (phones,  and down)                 my iphone*/
@media only screen and (max-width: 400px) {

.example {
  background: yellow;
  opacity: 1;
}

/* column */
.column1 {
  display: none;
  width: 50%;
  }

.column2 {
  display: none;
  width: 50%;
  }
  
.column3 {
  display: block;
  width: 100%;
  }
/* ......... */


/* LARGE BANNER 'ew' letters */
.centered-e {
  top: -211px;
  left: 60%;
  font-weight: bold;
  font-size: 280px;
  padding-right: 280px;
}

.centered-w {
  top: -210px;
  left: 38%;
  font-weight: bold;
  font-size: 280px;
  padding-left: 255px;
}

#ewimage-sml{
  display: block;
}
#ewimage-lrg{
  display: none;
}

/* COMPANY NAME .............*/
.companyname {
  font-size: 30px;
}

.jointhelisttxt {
  font-size: 1.6vw;
}
/* .............*/

/* Black Access Bar */
#hidebutton1, #hidebutton2 {
  width: 50%;
  height: 5%;
}

.button1, .button2{
  font-size: 16px;
}

#space-height {
  padding: 0px 0px 50px 0px;
}

/*  RIBBON BAND not controlled by overlay */
table#shop-band {
  margin-top: 0px;
  padding: 0px 0px 0% 0px;
  width: 100%;
}

#shop-txt {
  font-size: 25px;
  font-weight: 900;
  line-height: 1.2;
  padding-top: 100px;
  line-height: 1.2;
    text-align: center;

}

#retailcategories-txtsml {
  display: block;
  font-size: 16px;
  padding-top: 30px;
}

#retailcategories-txtlarge {
  display: none;
}

#retailcontactxt {
  font-size: 16px;
  padding-top: 50px;
  padding-bottom: 20px;
}


.space-side {
  padding-left: 40px;
}

.contactus {
  font-size: 15px;
  letter-spacing: 2px;
}
/* .............*/

/* FORM INPUT FOR CLIENT  */
/* */
table.form-accesstype {
}

.overlay {
  padding-top: 120px;
}

.overlay-contentainerbox {
  width: 80%;
  padding: 20px 10px 50px 10px;
}
/* .........................*/

.red-dot {
  width: 50px;
  height: 50px;
  top: 80px;
  left: 10px;
}

.red-close {
  font-size: 11px;
}

input[type=text], [type=email] {
  width: 80%;
  height: 30px;
  font-size: 14px;
}

input[type=submit] {
  width: 80%;
}

.submit-btn {
  width: 80%;
}

.cancelbtn {
  width: 80%;
}

.part1, .part2 {
  font-size: 35;
}

/* */
.layercontentheading-small1 {
  display: block;
}

.layercontentheading-medium1 {
  display: none;
}

.layercontentheading-large1 {
  display: none;
}
/* */

.layercontentheading-small2 {
  display: block;
}

.layercontentheading-medium2 {
  display: none;
}

.layercontentheading-large2 {
  display: none;
}

#spin1 {
  display: none;
}

#spin2 {
  display: none;
}

/* HIDE SHOW TOPFOOTER */
.footersmall {
  display: block;
  font-size: 11px;
}

.smalltxt {
  display: block;
  font-size: 9px;
}

.footerlarge {
  display: none;
}

.largeltxt {
  display: none;
}

.showheader {
  font-size: 2vw;
}
.showdate {
  font-size: 6vw;
  font-weight: 700;
}

.thejourneytxtsml {
  display: block;
}
.thejourneytxtlrg {
  display: none;
}

/* ............... */
.footersml {
  display: block;
}

.footerlrg {
  display: none;
}

/* ............... */
.companycom {
  font-size: 10px;
}
.copy {
  font-size: 8px;
}

.year {
  font-size: 7px;
}
/* .............*/

}
/* YELLOW .................................................................... YELLOW */

/* AQUA ........................................................................ AQUA */
/* AQUA ........................................................................ AQUA */
/* Small devices (portrait tablets and large phones,  and up)    ...................  */
@media only screen and (min-width: 400px) {

.example {
  background: aqua;
  opacity: 1;
}

/* column */
.column1 {
  display: none;
  width: 100%;
  }

.column2 {
  display: none;
  }
  
.column3 {
  display: block;
  width: 100%;
  }
/* ......... */

/* LARGE BANNER 'ew' letters */
.centered-e {
  top: -211px;
  left: 60%;
  font-weight: bold;
  font-size: 280px;
  padding-right: 280px;
}

.centered-w {
  top: -210px;
  left: 38%;
  font-weight: bold;
  font-size: 280px;
  padding-left: 255px;
}

#ewimage-sml{
  display: block;
}
#ewimage-lrg{
  display: none;
}

/* COMPANY NAME .............*/
.companyname {
  font-size: 30px;
}

.jointhelisttxt {
  font-size: 1.6vw;
}
/* .............*/


/* Black Access Bar */
#hidebutton1, #hidebutton2 {
  width: 50%;
  height: 5%;
}

.button1, .button2 {
  font-size: 16px;
}

#space-height {
  padding: 0px 0px 55px 0px;
}

/*  RIBBON BAND not controlled by overlay */
table#shop-band {
  margin-top: 0px;
  padding: 0px 0px 0% 0px;
  width: 100%;
}

#shop-txt {
  font-size: 325px;
  font-weight: 900;
  line-height: 1.2;
  padding-top: 100px;
  line-height: 1.2;

}

#retailcategories-txtsml {
  display: block;
  font-size: 16px;
  padding-top: 30px;
}

#retailcategories-txtlarge {
  display: none;
}

#retailcontactxt {
  font-size: 16px;
  padding-top: 50px;
  padding-bottom: 20px;
}


.space-side {
  padding-left: 40px;
}

.contactus {
  font-size: 15px;
  letter-spacing: 2px;
}
/* .............*/

/* FORM INPUT FOR CLIENT  */
table.form-accesstype {
}

.overlay {
  padding-top: 120px;
}

.overlay-contentainerbox {
  width: 80%;
  padding: 20px 10px 50px 10px;
}
/* .........................*/

.red-dot {
  width: 50px;
  height: 50px;
  top: 80px;
  left: 10px;
}

.red-close {
  font-size: 11px;
}

input[type=text], [type=email] {
  width: 80%;
  height: 30px;
  font-size: 14px;
}
input[type=submit] {
  width: 80%;
}

.submit-btn {
  width: 80%;
}

.cancelbtn {
  width: 80%;
}

.part1, .part2 {
  font-size: 35;
}

/* */
.layercontentheading-small1 {
  display: block;
}

.layercontentheading-medium1 {
  display: none;
}

.layercontentheading-large1 {
  display: none;
}
/* */
.layercontentheading-small2 {
  display: block;
}

.layercontentheading-medium2 {
  display: none;
}

.layercontentheading-large2 {
  display: none;
}

#spin1 {
  display: none;
}

#spin2 {
  display: none;
}

/* HIDE SHOW TOPFOOTER */
.footersmall {
  display: block;
  font-size: 11px;
}

.smalltxt {
  display: block;
  font-size: 9px;
}

.footerlarge {
  display: none;
}

.largeltxt {
  display: none;
}

.showheader {
  font-size: 2vw;
}
.showdate {
  font-size: 6vw;
  font-weight:700;
}

.thejourneytxtsml {
  display: block;
}
.thejourneytxtlrg {
  display: none;
}

/* ............... */
.footersml {
  display: block;
}

.footerlrg {
  display: none;
}

/* ............... */
.companycom {
  font-size: 10px;
}
.copy {
  font-size: 8px;
}

.year {
  font-size: 7px;
}
/* .............*/

}
/* AQUA ........................................................................ AQUA */

/* RED .......................................................................... RED */
/* RED .......................................................................... RED */
/* Extra small devices (phones, 600px and down)         my iphone  .................  */
@media only screen and (max-width: 600px) {

.example {
  background: red;
  opacity: 1;
}

/* column */
.column1 {
  display: none;
  width: 50%;
  }

.column2 {
  display: none;
  width: 50%;
  }

.column3 {
  display: block;
  width: 100%;
  }
/* ......... */

/* LARGE BANNER 'ew' letters */
.centered-e {
  top: -211px;
  left: 60%;
  font-weight: bold;
  font-size: 280px;
  padding-right: 280px;
}

.centered-w {
  top: -210px;
  left: 38%;
  font-weight: bold;
  font-size: 280px;
  padding-left: 255px;
}

#ewimage-sml{
  display: block;
}
#ewimage-lrg{
  display: none;
}

/* COMPANY NAME .............*/
.companyname {
  font-size: 30px;
}

.jointhelisttxt {
  font-size: 1.5vw;
  padding-top: 10px;
}

/* Black Access Bar */
#hidebutton1, #hidebutton2 {
  width: 50%;
  height: 6%;
}

/* Access Buttons */
.button1, .button2 {
  font-size: 16px;
}

#space-height {
  padding: 0px 0px 70px 0px;
}

/*  RIBBON BAND not controlled by overlay */
table#shop-band {
  margin-top: 0px;
  padding: 0px 0px 0% 0px;
  width: 100%;
}

#shop-txt {
  font-size: 25px;
  font-weight: 900;
  line-height: 1.2;
  padding-top: 100px;
  line-height: 1.2;

}

#retailcategories-txtsml {
  display: block;
  font-size: 15px;
  padding-top: 30px;
}

#retailcategories-txtlarge {
  display: none;
}

.space-side {
  padding-left: 50px;
}

#retailcontactxt {
  font-size: 16px;
  padding-top: 25px;
  padding-bottom: 25px;
}

.contactus {
  font-size: 15px;
  letter-spacing: 2px;
}
/* .............*/

/* FORM INPUT FOR CLIENT  */
table.form-accesstype {
}

.overlay {
  padding-top: 120px;
}

.overlay-contentainerbox {
  width: 80%;
  padding: 20px 10px 50px 10px;
}
/* .........................*/

.red-dot {
  width: 50px;
  height: 50px;
  top: 85px;
  left: 10px;
}

.red-close {
  font-size: 11px;
}
input[type=text], [type=email] {
  width: 80%;
  height: 30px;
  font-size: 14px;
}

input[type=submit] {
  width: 80%;
}

.submit-btn {
  width: 80%;
}

.cancelbtn {
  width: 80%;
}

.part1, .part2 {
  font-size: 35;
}

/* */
.layercontentheading-small1 {
  display: block;
}

.layercontentheading-medium1 {
  display: none;
}

.layercontentheading-large1 {
  display: none;
}
/* */
.layercontentheading-small2 {
  display: block;
}

.layercontentheading-medium2 {
  display: none;
}

.layercontentheading-large2 {
  display: none;
}

#spin1 {
  display: none;
}

#spin2 {
  display: none;
}

/* HIDE SHOW TOPFOOTER */
.footersmall {
  display: block;
  font-size: 12px;
}

.smalltxt {
  display: block;
  font-size: 9px;
}

.largeltxt {
  display: none;
}

.footerlarge {
  display: none;
}
.showheader {
  font-size: 2.2vw;
}
.showdate {
  font-size: 8vw;
  font-weight: 900;
}

.thejourneytxtsml {
  display: block;
}
.thejourneytxtlrg {
  display: none;
}

/* ............... */
.footersml {
  display: block;
}

.footerlrg {
  display: none;
}

/* ............... */
.companycom {
  font-size: 10px;
}
.copy {
  font-size: 8px;
}

.year {
  font-size: 7px;
}
/* .............*/

}
/* RED .......................................................................... RED */

/* GREEN ...................................................................... GREEN */
/* GREEN ...................................................................... GREEN */
/* Small devices (portrait tablets and large phones, 600px and up)     my ipad .....  */
@media only screen and (min-width: 600px) {

.example {
  background: green;
  opacity: 1;
}

/* column */
.column1 {
  display: none;
  width: 50%;
  }

.column2 {
  display: none;
  width: 50%;
  }

.column3 {
  display: block;
  width: 100%;
  }
/* ......... */

/* LARGE BANNER 'ew' letters */
.centered-e {
  top: -272px;
  left: 52%;
  font-size: 350px;
  padding-right: 255px;
}

.centered-w {
  top: -274px;
  left: 48%;
  font-size: 350px;
  padding-left: 175px;
}

#ewimage-sml{
  display: none;
}
#ewimage-lrg{
  display: block;
}

/* COMPANY NAME .............*/
.companyname {
  font-size: 35px;
}

.jointhelisttxt {
  font-size: 1.5vw;
}
/* .............*/

/* Black Access Bar */
#hidebutton1, #hidebutton2 {
  width:50%;
  height: 6%;
}
.button1, .button2 {
  font-size: 18px;
}

#space-height {
  padding: 0px 0px 65px 0px;
}

/*  RIBBON BAND not controlled by overlay */
table#shop-band {
  margin-top: 0px;
  padding: 30px 0px 0% 0px;
  width: 90%;
}

#shop-txt {
  font-size: 40px;
  font-weight: 900;
  line-height: 1.2;
  padding-top: 50px;
  line-height: 1.2;

}

#retailcategories-txtsml {
  display: none;
}

#retailcategories-txtlarge {
  display: block;
  font-size: 15px;
  padding-top: 30px;
}

.space-side {
  padding-left: 40px;
}

#retailcontactxt {
  font-size: 16px;
  padding-top: 50px;
  padding-bottom: 35px;
}


.contactus {
  font-size: 15px;
  letter-spacing: 2.5px;
}
/* .............*/

/* FORM INPUT FOR CLIENT  */
table.form-accesstype {
}

.overlay {
  padding-top: 120px;
}

.overlay-contentainerbox {
  width: 70%;
  padding: 50px 50px 50px 50px;
}
/* .........................*/

.red-dot {
  width: 50px;
  height: 50px;
  top: 90px;
  left: 10px;
}

.red-close {
  font-size: 12px;
}

input[type=text],[type=email] {
  width: 80%;
  height: 30px;
}

input[type=submit] {
  width: 80%;
}

.submit-btn {
  width: 80%;
}

.cancelbtn {
  width: 80%;
}

.part1, .part2 {
  font-size: 35;
}

/* */
.layercontentheading-small1 {
  display: block;
}

.layercontentheading-medium1 {
  display: none;
}

.layercontentheading-large1 {
  display: none;
}
/* */
.layercontentheading-small2 {
  display: block;
}

.layercontentheading-medium2 {
  display: none;
}

.layercontentheading-large2 {
  display: none;
}

#spin1 {
  display: none;
}

#spin2 {
  display: none;
}

/* HIDE SHOW TOPFOOTER */
.footersmall {
  display: block;
  font-size: 12px;
}

.smalltxt {
  display: block;
  font-size: 11px;
}

.footerlarge {
  display: none;
}

.largeltxt {
  display: none;
}

.showheader {
  font-size: 1.5vw;
}
.showdate {
  font-size: 5vw;
  font-weight:700;
}

.thejourneytxtsml {
  display: block;
}
.thejourneytxtlrg {
  display: none;
}

/* ............... */
.footersml {
  display: none;
}

.footerlrg {
  display: block;
}

/* ............... */
.companycom {
  font-size: 11px;
}
.copy {
  font-size: 9px;
}

.year {
  font-size: 8px;
}
/* .............*/

}
/* GREEN ...................................................................... GREEN */

/* BLUE ........................................................................ BLUE */
/* BLUE ........................................................................ BLUE */
/* ......................  */
/* Medium devices (landscape tablets, 768px and up)    my ipad*/
@media only screen and (min-width: 768px) {

.example {
  background: blue;
  opacity: 1;
}

/* column */
.column1 {
  display: none;
  width: 50%;
  }

.column2 {
  display: none;
  width: 50%;
  }

.column3 {
  display: block;
  width: 100%;
  }
/* ......... */

/* LARGE BANNER 'ew' letters */
.centered-e {
  top: -272px;
  left: 52%;
  font-size: 350px;
  padding-right: 255px;
}

.centered-w {
  top: -274px;
  left: 48%;
  font-size: 350px;
  padding-left: 175px;
}

#ewimage-sml{
  display: none;
}
#ewimage-lrg{
  display: block;
}

/* COMPANY NAME .............*/
.companyname {
  font-size: 35px;
}

.jointhelisttxt {
  font-size: 1.4vw;
}
/* ......... */

/* Black Access Bar */
#hidebutton1, #hidebutton2 {
  width:50%;
  height: 6%;
}
.button1, .button2 {
  font-size: 18px;
}

#space-height {
  padding: 0px 0px 70px 0px;
}

/*  RIBBON BAND not controlled by overlay */
table#shop-band {
  margin-top: 0px;
  padding: 30px 0px 0% 0px;
  width: 75%;
}

#shop-txt {
  font-size: 40px;
  font-weight: 900;
  line-height: 1.2;
  padding-top: 50px;
  line-height: 1.2;

}

#retailcategories-txtsml {
  display: none;
}

#retailcategories-txtlarge {
  display: block;
  font-size: 15px;
  padding-top: 30px;
}

.space-side {
  padding-left: 50px;
}

#retailcontactxt {
  font-size: 16px;
  padding-top: 50px;
  padding-bottom: 35px;
}

.contactus {
  font-size: 15px;
  letter-spacing: 2.5px;
}
/* .............*/

/* FORM INPUT FOR CLIENT  */
table.form-accesstype {
}

.overlay {
  padding-top: 120px;
}

.overlay-contentainerbox {
  width: 70%;
  padding: 50px 100px 100px 100px;
}
/* .........................*/

.red-dot {
  width: 50px;
  height: 50px;
  top: 85px;
  left: 10px;
}

.red-close {
  font-size: 12px;
}

input[type=text], [type=email] {
  width: 80%;
  height: 30px;
  font-size: 16px;
}

input[type=submit] {
  width: 80%;
}

.submit-btn {
  width: 80%;
}

.cancelbtn {
  width: 80%;
}

.part1, .part2 {
  font-size: 35;
}

/* */
.layercontentheading-small1 {
  display: block;
}

.layercontentheading-medium1 {
  display: none;
}

.layercontentheading-large1 {
  display: none;
}
/* */
.layercontentheading-small2 {
  display: block;
}

.layercontentheading-medium2 {
  display: none;
}

.layercontentheading-large2 {
  display: none;
}

#spin1 {
  display: none;
}

#spin2 {
  display: none;
}

/* HIDE SHOW TOPFOOTER */
.footersmall {
  display: block;
  font-size: 12px;
}

.smalltxt {
  display: block;
  font-size: 11px;
}

.largeltxt {
  display: none;
}

.footerlarge {
  display: none;
}
.showheader {
  font-size: 1.5vw;
}
.showdate {
  font-size: 4vw;
  font-weight: 700;
}

.thejourneytxtsml {
  display: none;
}
.thejourneytxtlrg {
  display: block;
}

/* ............... */
.footersml {
  display: none;
}

.footerlrg {
  display: block;
}

/* ............... */
.companycom {
  font-size: 11px;
}
.copy {
  font-size: 9px;
}

.year {
  font-size: 8px;
}
/* .............*/

}
/* BLUE ........................................................................ BLUE */

/* PINK ........................................................................ PINK */
/* PINK ........................................................................ PINK */
/* Large devices (laptops/desktops, 992px and up)    my ipad*/
@media only screen and (min-width: 900px) {

.example {
  background: pink;
  opacity: 1;
}

/* column */
.column1 {
  display: block;
  width: 50%;
  }

.column2 {
  display: block;
  width: 50%;
  }

.column3 {
  display: none;
  width: 100%;
  }
/* ......... */

/* LARGE BANNER 'ew' letters */
.centered-e {
  top: -272px;
  left: 52%;
  font-size: 350px;
  padding-right: 255px;
}

.centered-w {
  top: -274px;
  left: 48%;
  font-size: 350px;
  padding-left: 175px;
}

#ewimage-sml{
  display: none;
}
#ewimage-lrg{
  display: block;
}

/* COMPANY NAME ................*/
.companyname {
  font-size: 35px;
}

.jointhelisttxt {
  font-size: 1.3vw;
}
/* ......... */

/* Black Access Bar */
#hidebutton1, #hidebutton2 {
  width:50%;
  height: 7%;
}
.button1, .button2 {
  font-size: 18px;
}

#space-height {
  padding: 0px 0px 75px 0px;
}

/*  RIBBON BAND not controlled by overlay */
table#shop-band {
  margin-top: 0px;
  padding: 30px 0px 0% 0px;
  width: 70%;
}

#shop-txt {
  font-size: 40px;
  font-weight: 900;
  line-height: 1.2;
  padding-top: 70px;
  line-height: 1.2;

}

#retailcategories-txtsml {
  display: none;
}

#retailcategories-txtlarge {
  display: block;
  font-size: 16px;
  padding-top: 0px;
}

.space-side {
  padding-left: 80px;
}

#retailcontactxt {
  font-size: 16px;
  padding-top: 50px;
  padding-bottom: 35px;
}

.contactus {
  font-size: 16px;
  letter-spacing: 2.2px;
}

.red-dot {
  width: 50px;
  height: 50px;
  top: 85px;
  left: 10px;
}

.red-close {
  font-size: 12px;
}

input[type=text],[type=email] {
  width: 80%;
  height: 30px;
}

input[type=submit] {
  width: 80%;
}

.submit-btn {
  width: 80%;
}

.cancelbtn {
  width: 80%;
}

.part1, .part2 {
  font-size: 35;
}

/* */
.layercontentheading-small1 {
  display: block;
}

.layercontentheading-medium1 {
  display: none;
}

.layercontentheading-large1 {
  display: none;
}
/* */
.layercontentheading-small2 {
  display: block;
}

.layercontentheading-medium2 {
  display: none;
}

.layercontentheading-large2 {
  display: none;
}

#spin1 {
  display: none;
}

#spin2 {
  display: none;
}

/* .............*/
/* FORM INPUT FOR CLIENT  */
table.form-accesstype {
}

.overlay {
  padding-top: 120px;
}

.overlay-contentainerbox {
  width: 70%;
  padding: 50px 100px 100px 100px;
}
/* .........................*/

/* HIDE SHOW TOPFOOTER */
.footersmall {
  display: none;
}

.smalltxt {
  display: none;
}

.footerlarge {
  display: block;
  font-size: 15px;
}

.largeltxt {
  display: block;
  font-size: 15px;
}

.showheader {
  font-size: 1vw;
}
.showdate {
  font-size: 4vw;
  font-weight: 700;
}

.thejourneytxtsml {
  display: none;
}
.thejourneytxtlrg {
  display: block;
}

/* ............... */
.footersml {
  display: none;
}

.footerlrg {
  display: block;
}

/* ............... */
.companycom {
  font-size: 11px;
}
.copy {
  font-size: 9px;
}

.year {
  font-size: 8px;
}
/* .............*/

}
/* PINK ........................................................................ PINK */

/* GRAY ........................................................................ GRAY */
/* GRAY ........................................................................ GRAY */
/* Extra large devices (large laptops and desktops, 1000px and up)     my ipad*/
@media only screen and (min-width: 1000px) {

.example {
  background: gray;
  opacity: 1;
}

/* column */
.column1 {
  display: block;
  width: 50%;
  }

.column2 {
  display: block;
  width: 50%;
  }

.column3 {
  display: none;
    width: 100%;
  }
/* ......... */

/* LARGE BANNER 'ew' letters */
.centered-e {
  top: -272px;
  left: 52%;
  font-size: 350px;
  padding-right: 255px;
}

.centered-w {
  top: -274px;
  left: 48%;
  font-size: 350px;
  padding-left: 175px;
}

#ewimage-sml{
  display: none;
}
#ewimage-lrg{
  display: block;
}

/* COMPANY NAME .............*/
.companyname {
  font-size: 35px;
}

.jointhelisttxt {
  font-size: 1.2vw;
}
/* ......... */

/* Black Access Bar */
#hidebutton1, #hidebutton2 {
  width:50%;
  height: 7%;
}
.button1, .button2 {
  font-size: 18px;
}

#space-height {
  padding: 0px 0px 80px 0px;
}

/*  RIBBON BAND not controlled by overlay */
table#shop-band {
  margin-top: 0px;
  padding: 30px 0px 0% 0px;
  width: 70%;
}

#shop-txt {
  font-size: 60px;
  font-weight: 900;
  line-height: 1.2;
  padding-top: 30px;
  line-height: 1.2;

}

#retailcategories-txtsml {
  display: none;
}

#retailcategories-txtlarge {
  display: block;
  font-size: 18px;
  padding-top: 0px;
}

.space-side {
  padding-left: 80px;
}

#retailcontactxt {
  font-size: 16px;
  padding-top: 40px;
  padding-bottom: 35px;
}

.contactus {
  font-size: 18px;
  letter-spacing: 2.5px;
}/* .............*/

/* FORM INPUT FOR CLIENT  */
table.form-accesstype {
}

.overlay {
  padding-top: 120px;
}

.overlay-contentainerbox {
  width: 60%;
  padding: 50px 120px 120px 120px;
}
/* .........................*/

.red-dot {
  width: 50px;
  height: 50px;
  top: 110px;
  left: 10px;
}

.red-close {
  font-size: 12px;
}

input[type=text], [type=email] {
  width: 80%;
  height: 30px;
  font-size: 16px;
}

input[type=submit] {
 width: 80%;
}

.submit-btn {
  width: 80%;
}

.cancelbtn {
  width: 80%;
}

.part1, .part2 {
  font-size: 35;
}

/* */
.layercontentheading-small1 {
  display: none;
}

.layercontentheading-medium1 {
  display: none;
}

.layercontentheading-large1 {
  display: block;
}
/* */
.layercontentheading-small2 {
  display: none;
}

.layercontentheading-medium2 {
  display: none;
}

.layercontentheading-large2 {
  display: block;
}

#spin1 {
  display: none;
}

#spin2 {
  display :none;
}

/* HIDE SHOW TOPFOOTER */
.footersmall {
  display: none;
  font-size: 15px;
}

.smalltxt {
  display: none;
}

.footerlarge {
  display: block;
}
.largeltxt {
  display: block;
  font-size: 15px;
}

.showheader {
  font-size: 1vw;
}
.showdate {
  font-size: 3vw;
  font-weight: 700;
}

.thejourneytxtsml {
  display: none;
}
.thejourneytxtlrg {
  display: block;
}

/* ............... */
.footersml {
  display: none;
}

.footerlrg {
  display: block;
}

/* ............... */
.companycom {
  font-size: 11px;
}
.copy {
  font-size: 9px;
}

.year {
  font-size: 8px;
}
/* .............*/

}
/* GRAY ........................................................................ GRAY */

/* PURPLE .................................................................... PURPLE */
/* PURPLE .................................................................... PURPLE */
/* Extra large devices (large laptops and desktops, 1200px and up)  */
@media only screen and (min-width: 1200px) {

.example {
  background: purple;
  opacity: 1;
}

/* column */
.column1 {
  display: block;
  width: 50%;
  }

.column2 {
  display: block;
  width: 50%;
  }

.column3 {
  display: none;
  width: 100%;
  }
/* ......... */

/* LARGE BANNER 'ew' letters */
.centered-e {
  top: -272px;
  left: 52%;
  font-size: 350px;
  padding-right: 255px;
}

.centered-w {
  top: -274px;
  left: 48%;
  font-size: 350px;
  padding-left: 175px;
}

#ewimage-sml{
  display: none;
}
#ewimage-lrg{
  display: block;
}

/* COMPANY NAME .............*/
.companyname {
  font-size: 35px;
}

.jointhelisttxt {
  font-size: 1.2vw;
}

/* .............*/

/* Black Access Bar */
#hidebutton1, #hidebutton2 {
  width: 50%;
  height: 7%;
}

.button1, .button2 {
  font-size: 18px;
}

#space-height {
  padding: 0px 0px 85px 0px;
}

/*  RIBBON BAND not controlled by overlay */
table#shop-band {
  margin-top: 0px;
  padding: 30px 0px 0% 0px;
  width: 65%;
}

#shop-txt {
  font-size: 60px;
  font-weight: 900;
  line-height: 1.2;
  padding-top: 40px;
  line-height: 1.2;

}

#retailcategories-txtsml {
  display: none;
}

#retailcategories-txtlarge {
  display: block;
  font-size: 18px;
  padding-top: 50px;
}

.space-side {
  padding-left: 80px;
}

#retailcontactxt {
  font-size: 16px;
  padding-top: 50px;
  padding-bottom: 35px;
}

.contactus {
  font-size: 20px;
  letter-spacing: 2px;
}
/* .............*/

/* FORM INPUT FOR CLIENT  */
table.form-accesstype {
}

.overlay {
  padding-top: 120px;
}

.overlay-contentainerbox {
  width: 60%;
  padding: 50px 120px 120px 120px;
}
/* .........................*/

.red-dot {
  width: 50px;
  height: 50px;
  top: 110px;
  left: 10px;
}

.red-close {
  font-size: 12px;
}

input[type=text], [type=email] {
  width: 80%;
  height: 30px;
  font-size: 16px;
}

input[type=submit] {
  width: 80%;
}

.submit-btn {
  width: 80%;
}

.cancelbtn {
  width: 80%;
}

.part1, .part2 {
  font-size: 35;
}

/* */
.layercontentheading-small1 {
  display: none;
}

.layercontentheading-medium1 {
  display: none;
}

.layercontentheading-large1 {
  display: block;
}
/* */
.layercontentheading-small2 {
  display: none;
}

.layercontentheading-medium2 {
  display: none;
}

.layercontentheading-large2 {
  display: block;
}

#spin1 {
  display: none;
}

#spin2 {
  display: none;
}

/* HIDE SHOW TOPFOOTER */
.footersmall {
  display: none;
}

.smalltxt {
  display: none;
}

.footerlarge {
  display: block;
  font-size: 15px;
}
.largeltxt {
  display: block;
  font-size: 15px;
}

.showheader {
  font-size: 1vw;
}
.showdate {
  font-size: 3vw;
  font-weight: 700;
}

.thejourneytxtsml {
  display: none;
}
.thejourneytxtlrg {
  display: block;
}

/* ............... */
.footersml {
  display: none;
}

.footerlrg {
  display: block;
}

/* ............... */
.companycom {
  font-size: 11px;
}
.copy {
  font-size: 9px;
}

.year {
  font-size: 8px;
}
/* .............*/

}
/* PURPLE .................................................................... PURPLE */

/* GOLD ........................................................................ GOLD */
/* GOLD ........................................................................ GOLD */
/* Extra large devices (large laptops and desktops, 1200px and up)  */
@media only screen and (min-width: 1440px) {

.example {
  background: gold;
}

/* column */
.column1 {
  display: block;
  width: 50%;
  }

.column2 {
  display: block;
  width: 50%;
  }

.column3 {
  display: none;
  width: 100%;
  }
/* ......... */

/* LARGE BANNER 'ew' letters */
.centered-e {
  top: -272px;
  left: 52%;
  font-size: 350px;
  padding-right: 255px;
}

.centered-w {
  top: -274px;
  left: 48%;
  font-size: 350px;
  padding-left: 175px;
}

#ewimage-sml{
  display: none;
}
#ewimage-lrg{
  display: block;
}

/* COMPANY NAME .............*/
.companyname {
  font-size: 35px;
}

.jointhelisttxt {
  font-size: 1.2vw;
}

/* Black Access Bar */
#hidebutton1, #hidebutton2 {
  width: 50%;
  height: 7%;
}
.button1, .button2 {
  font-size: 18px;
}

#space-height {
  padding: 0px 0px 90px 0px;
}

/*  RIBBON BAND not controlled by overlay */
table#shop-band {
  margin-top: 0px;
  padding: 30px 0px 0% 0px;
  width: 60%;
}

#shop-txt {
  font-size: 70px;
  font-weight: 900;
  line-height: 1.2;
  padding-top: 40px;
  line-height: 1.2;

}

#retailcategories-txtsml {
  display: none;
}

#retailcategories-txtlarge {
  display: block;
  font-size: 18px;
  padding-top: 50px;
}

.space-side {
  padding-left: 80px;
}

#retailcontactxt {
  font-size: 16px;
  padding-top: 50px;
  padding-bottom: 35px;
}

.contactus {
  font-size: 22px;
  letter-spacing: 2px;
}
/* .............*/

/* FORM INPUT FOR CLIENT  */
table.form-accesstype {
}

.overlay {
  padding-top: 120px;
}

.overlay-contentainerbox {
  width: 60%;
  padding: 50px 130px 130px 130px;
}

/* .........................*/

.red-dot {
  width: 50px;
  height: 50px;
  top: 110px;
  left: 10px;
}

.red-close {
  font-size: 12px;
}

input[type=text], [type=email] {
  width: 80%;
  height: 30px;
  font-size: 16px;
}

input[type=submit] {
  width: 80%;
}

.submit-btn {
  width: 80%;
}

.cancelbtn {
 width: 80%;
}

.part1, .part2 {
  font-size: 35;
}

/* */
.layercontentheading-small1 {
  display: none;
}

.layercontentheading-medium1 {
  display: none;
}

.layercontentheading-large1 {
  display: block;
}
/* */
.layercontentheading-small2 {
  display: none;
}

.layercontentheading-medium2 {
  display: none;
}

.layercontentheading-large2 {
  display: block;
}

#spin1 {
  display: none;
}

#spin2 {
  display: none;
}


/* HIDE SHOW TOPFOOTER */
.footersmall {
  display: none;
}

.smalltxt {
  display: none;
}

.footerlarge {
  display: block;
  font-size: 15px;
}

.largeltxt {
  display: block;
  font-size: 15px;
}

.showheader {
  font-size: 1vw;
}
.showdate {
  font-size: 3vw;
  font-weight: 700;
}

.thejourneytxtsml {
  display: none;
}
.thejourneytxtlrg {
  display: block;
}

/* ............... */
.footersml {
  display: none;
}

.footerlrg {
  display: block;
}

/* ............... */
.companycom {
  font-size: 11px;
}
.copy {
  font-size: 9px;
}

.year {
  font-size: 8px;
}
/* .............*/

}
/* GOLD ........................................................................ GOLD */

/* end of css........................................................................ */


/* end of css........................................................................ */