/*** Font Family ***/
@font-face {
  font-family: Sylvester;
  src: url(/styles/fonts/Sylvester.otf);
}
@font-face {
  font-family: RealLove;
  src: url(/styles/fonts/RealLove.otf);
}
@font-face {
  font-family: QuickScrawl;
  src: url(/styles/fonts/quick-scrawl.ttf);
}
@font-face {
  font-family: HamburgHand;
  src: url(/styles/fonts/HamburgHand-Regular.otf);
}

/*** Color Pallet ***/
:root {
    --neon-white: #e6ffff;
    --charcoal: #020202;
    --magnum-blue: #1192D9;
    --vape-orange: #FB4B01;
    --gear-yellow: #FCA026;
    --eats-green: #19AE56;
    --dab-red: #E0052C;
}

.vape-color {
  color: var(--vape-orange);
}

.eats-color {
  color: var(--eats-green);
}

.gear-color {
  color: var(--gear-yellow);
}

.flower-color, .magnum-blue {
  color: var(--magnum-blue);
}

.dabs-color {
  color: var(--dab-red);
}


html {
  background-color: var(--charcoal);
}
body {
  background-color: var(--charcoal);
  
}

/*** Under Construction CSS ***/
div.under-construction {
  padding-top: 30px;
  background-color: var(--magnum-blue);
  border: 3px solid var(--charcoal);
  border-radius: 15px;
}

div.under-construction h4, div.under-construction p {
  font-family: 'Baloo Bhaijaan 2', sans-serif;
  color: var(--charcoal);
  font-size: 80px;
  text-align: center;
}

div.under-construction p {
  color: yellow;
}

/*** End Under Construction CSS ***/

h1, h2, h3, h4 {
  font-family: 'Montserrat', sans-serif;
  color: var(--magnum-blue);
  text-shadow: 2px 2px var(--neon-white);
}
h5 {

}

h1 {
  
}

h2 {
  
}

h3 {
  
}

h4, h5 {
  
}

h1.navtitle a {
  
}  

h1.navtitle a:hover {
  
}  

.white-backdrop {
    background-color: rgba(255, 255, 255, 0.75);
    padding-top: 10px;
    border: 3px solid var(--charcoal);
    border-radius: 10px;
}

.item {
background-color: rgba(255, 255, 255, 0.75);
    padding-top: 10px;
    border: 3px solid var(--charcoal);
    border-radius: 10px;
  padding:10px;
  margin-bottom: 15px;
}

.black-line {
  border-color: black;
  background-color: black;
  height: 1px;
  border-width: 0;
}

p, a {
  font-size: 18px;
}

a:hover {
  
}



ul {
  
}

ul li {
  font-size: 18px;
  color: var(--neon-white);
}

img, a img {
  
}

img {
  
}

img.border {
  border-radius: 10px;
    border: 5px solid var(--charcoal);
    /* box-shadow: 0 0 0 6px var(--neon-white), 
                  0 0 0 10px var(--neon-white); */
    outline: 3px solid white;
}

a img {
  width: 100%;
}



#Main {
  margin: 25px;
}

#Main p, #Main p a, #Main ul li {
  font-family: 'Baloo Bhaijaan 2', sans-serif;
  color: var(--neon-white);
}

#Main p a:hover {
  /* text-decoration: underline; */
  color: white;
}

#Main form {
  background-image: url(/images/assets/diamondplate.png);
    display: block;
    padding: 15px;
    margin-bottom: 30px;
    border-radius: 10px;
    border: 5px solid var(--charcoal);
    outline: 3px solid white;
}



#Main form label {
    font-size: 20px;
    text-shadow: 2px 2px white;
    /* 
2px -2px white,
    -2px 2px white,
    -2px -2px white;
 */
    font-weight: bold;
    color: var(--charcoal);
}

#Main form button {
transition: all 0.3s ease;
background-color: red;
  display: block;
    padding: 15px;
    margin-bottom: 30px;
    border-radius: 10px;
    border: 5px solid var(--charcoal);
    outline: 3px solid white;
    font-weight: bold;
    font-size: 20px;
}

#Main form button:hover {
  transition: all 0.3s ease;
  border: 5px solid var(--gear-yellow);
  cursor: pointer;
}

#Main form button[type='submit'] {
  width: 100%;
}

#Main form #addItemButton {
background-color: var(--eats-green);
}

#Main form #removeItemButton {
background-color: var(--dab-red);
}

#Main form [type='submit'] {
  background-color: var(--magnum-blue);
}

#Main form input, #Main form select {
  background: var(--charcoal);
  color: white;
  border-radius: 5px;
}

header {
  padding: 0 0; 
}

header .home-navigation a:hover, header .navigation h3 a:hover {
  color: var(--neon-white);
  /* 
background-color: var(--magnum-blue);
  padding: 10px;
  border-radius: 15px;
 */
  text-shadow: 2px 2px 0 var(--magnum-blue) !important;
}

header h1, header h2, header h3, header h4 {
 
}

header h1 a, header h2 a, header h3 a, header h4 a, header a, header p {
  font-family: 'Baloo Bhaijaan 2', sans-serif;
  color: var(--neon-white);
  text-shadow: none !important;
}

header h3 {
  text-align: center;
}

header h3 a {
  font-size: 28px;
}

header div .image.module {
  
}

.module-content {
  color: white;
}

header div.row.navigation {
  padding-top: 15px;
}

header p.caption {
  font-family: 'Baloo Bhaijaan 2', sans-serif;
}

#homeheader {
/*  making the video fullscreen  */
  position: fixed;
  right: 0; 
  top: 0;
 
  min-width: 100%; 
  min-height: 100%;
  width: auto; 
  height: auto;
 
  /* z-index: -100;  */
}

.details {
  margin-bottom:20px;
}

#Main .single-merchandise p, .single-merchandise ul li, .single-merchandise a {
  font-size:24px;
  color: var(--neon-white);
}

#Main .single-merchandise p.hook {
  font-size: 40px;
  text-transform: uppercase;
  text-align: center;
}

#Main .single-merchandise p.tank {
    font-size: 24px;
    text-align: center;
    color: var(--charcoal);
    /* display: flex; */
    /* align-items: center; */
    padding-bottom: 5px;
    font-weight: bold;
}

#Main .single-merchandise a.weedmaps-link {
  text-align: center;
  display:block;
}

#Main .single-merchandise a:hover {
  text-shadow: 2px 2px 0 var(--magnum-blue) !important;
}

#Main .single-merchandise .details p, #Main .single-merchandise .details ul li {
  margin-bottom: 0;
}

#Main .single-merchandise .side-rail p, #Main .single-merchandise .side-rail ul li, #Main .single-merchandise .side-rail a {
  font-size:28px;
}

#Main .single-merchandise .side-rail p, #Main .single-merchandise .side-rail a {
  padding-left: 20px;
}

#Main .single-merchandise .side-rail ul {
  padding-left: 25px;
}

/******* Scroll Down Navigation *******/

.fixed {
  position: fixed;
  top:0;
  left:0;
  width: 100%;
}

.sticky {
  display:none;
  z-index: 10;
  padding: 1px 0;
}

.sticky.fixed {
  display: block;
  background-image: url(/images/assets/diamondplate.png);
  border-bottom: 1px solid var(--charcoal);
}

.sticky a {
  display: block;
  text-align: center;
  margin: 5px 0 5px 0;
  transition: all 0.3s ease;
  padding: 0 0 4px 0;
  font-family: 'Montserrat', sans-serif;
  color: var(--charcoal);
  font-weight: bold;
}

.sticky a:hover {
  transition: all 0.3s ease;
  color: var(--neon-white);
  background-color: var(--charcoal);
  
}

.sticky .mysocial a {
  display: inline-block;
  border: none;
  text-align: center;
  font-size:24px;
  margin: 1px 0 0 0;
  padding: 0 5px;
}

.sticky .mysocial a:hover {
  color: var(--neon-white);
}

#Panel, #Flip {
  text-align: center;
}

#Flip {
  color: var(--charcoal);
  font-size:30px; 
  cursor: pointer;
}

#Panel, #Flip-X {
  display: none;
}

/******* End Scroll Down Navigation *******/

footer {
  background-image: url(/images/assets/diamondplate.png);
  padding:15px 0;
}

footer p, footer a {
  font-family: 'Baloo Bhaijaan 2', sans-serif;
}

footer a {
  color: var(--royal-blue);
}

footer a:hover {
  text-decoration: underline;
}

.homepage p {
  
}

.row {
  position: relative;
}

.row.margin {
  margin-bottom: 15px;
}


.copyright {
  text-align: center;
}

#homeheader {

}

.flex-container {
  display: flex !important;
  flex-direction: column; /* Stacks children vertically */
  align-items: flex-start; /* Aligns children to the start of the cross axis (left in this case) */
  justify-content: space-between; /* Distributes space between items, pushing the last one to the bottom if there's enough space */
  /* border: 1px solid #ccc; */
}

.element-to-bottom {
  margin-top: auto; /* Pushes the element to the bottom within the flex container */
}

a.box {
    transition: all 0.3s ease;
    background-image: url(/images/assets/diamondplate.png);
    display: block;
    padding: 15px;
    margin-bottom: 30px;
    border-radius: 10px;
    border: 5px solid var(--charcoal);
    /* box-shadow: 0 0 0 6px var(--neon-white), 
                  0 0 0 10px var(--neon-white); */
    outline: 3px solid white;
}

a.box:hover {
  transition: all 0.3s ease;
  border: 5px solid var(--magnum-blue);
}

a.box p {
  color: var(--charcoal);
}

a.box h1, a.box h2, a.box h3,a.box h4, a.box h5, #Main a.box p {
 
 color: var(--charcoal);
}
a.box h1, a.box h2, a.box h3, a.box h4, a.box h5 {
  text-align: center;
  font-weight: bold;
  text-shadow:
 		    -2px -2px 0px white,
            2px -2px 0px white,
            -2px 2px 0px white,
            2px 2px 0px white;
}

a.box:hover h1 {

}

a.box .icon {
  font-size: 35px;
  text-align: center;
}



.alert.callout p {

}

a.social-icon, footer a.social-icon {
  font-size: 40px;
}

footer a.social-icon {
  color: var(--charcoal);
}

footer a.social-icon:hover {
  color: #f6d1dd;
  text-shadow: -1px 0 var(--charcoal), 
  				0 1px var(--charcoal), 
  				1px 0 var(--charcoal), 
  				0 -1px var(--charcoal);
}

a.social-icon:hover, footer a.social-icon:hover {

}

.is-reveal-open .reveal-overlay {
  z-index: 9999;
}

#ageModal {
  box-shadow: 0 0 15px;
  border-raduis: 10px;
}

/* Form Styles */

[type="text"], [type="password"], textarea {
  border: 1px solid black;
  background-color: rgb(244, 244, 244);
}

input::placeholder, textarea::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: gray;
  opacity: 1; /* Firefox */
}

/* Foundation Overwrite */

.tabs-title > a {
  font-size: 1.1rem;
}

img.orbit-image {
  border: none;
}

.button {
  background-color: #397999;
  border: 2px solid black;
}

/* Media Queries */

@media only screen and (max-width: 64em) {
   h1, h2 {
    font-size: 2rem;
  }
   
   p.caption {
     font-size: 24px;
   }
}

@media only screen and (max-width: 40em) {
  div.under-construction h4, div.under-construction p {
    font-size: 35px;
  }
  
  header {
    /* padding: 25px 0; */
  }
  header h1, header h3, header a {
    /* 
text-align: center;
    margin-bottom: 15px;
    font-size: 35px;
 */
  }
  
  p {
    /* font-size: 16px; */
  }
}