/**Stylesheet for Digital Drams.*/
@font-face{
  font-family: icomoon;
  src: url('../Fonts/icomoon.woff') format('woff'),
     url('../Fonts/icomoon.ttf') format('truetype');
  font-display: swap;  
}

@font-face{
  font-family: outfit;
  src: url('../Fonts/Outfit-Regular.woff2') format('woff2'),
     url('../Fonts/Outfit-Regular.ttf') format('truetype');
  font-display: swap;  
}

@font-face{
  font-family: outfitbold;
  src: url('../Fonts/Outfit-ExtraBold.woff2') format('woff2'),
     url('../Fonts/Outfit-ExtraBold.ttf') format('truetype');
  font-display: swap;  
}

@font-face{
  font-family: outfitlight;
  src: url('../Fonts/Outfit-Light.woff2') format('woff2'),
     url('../Fonts/Outfit-Light.ttf') format('truetype');
  font-display: swap;  
}

html, body {
  height: 100%;

}

body{
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  font-family: outfitlight, sans-serif;
  color: #F5F5F5;
  background: #0B0E10;
  padding-bottom: 2em;
}

/**Basic Styles*/
#wrapper{
  position: relative;
  width: 100%;
  background: #020407;
  background: linear-gradient(to left, #020407, #161616, #020407);
  padding-bottom: 2em;
  box-sizing: border-box;
}

.pagewrapper{
  padding-top: 5em;
}

.margins{
  position: relative;
  padding: 0em 1em;
  box-sizing: border-box;
}

.headers h1, .headers h2{
  font-family: outfitbold, sans-serif;
  font-size: 2.5em;
  text-align: center;
  text-transform: uppercase;
  line-height: 1.1em;
  font-weight: normal;
}


.subheader h2{
  font-family: outfitbold, sans-serif;
  font-size: 1.7em;
  text-align: center;
  text-transform: uppercase;
  line-height: 1.1em;
  font-weight: normal;
  margin: 0em 0em .5em 0em;
}

.orange{
  color: #FA731C;
}





/**Header Styles*/
#masthead{
  position: absolute;
  top: 0em;
  left: 0em;
  width: 100%;
  height: 3.5em;
  background: #0B0E10;
  z-index: 7;
}

.site-title{
  display: none;
}

#logo{
  position: absolute;
  top: .8em;
  left: 1em;
  width: 12em;
}

#logo img{
  width: 100%;
  height: auto;
}





/**Header Account*/
#header_account, #header_profile{
  position: absolute;
  top: .1em;
  right: 0em;
  width: 9em;
  padding: 0em .5em;
  z-index: 7;
}

#account_icon, #account_icon_out{
  font-size: 2.25em;
  width: 1em;
  color: #FFF;
  text-decoration: none;
}

#header_account_buttons, #account_profile{
  display: none;
  background-color: #161616;
  padding: 0em .5em;
  margin-top: -.25em;
}

#header_account_buttons a, #account_profile li a{
  display: block;
  font-family: outfit, sans-serif;
  color: #F5F5F5;
  text-transform: uppercase;
  text-decoration: none;
  padding: .4em 0em;
}

#account_profile ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

#account_icon:hover, #account_icon_out:hover, #header_account_buttons a:hover, #account_profile li a:hover{
  color: #FA731C;
}

#header_account:hover  #header_account_buttons, #header_profile:hover  #account_profile{
  display: block;
}





/**Navigation Menu*/
.menu-toggle{
  position: absolute;
  top: -1.25em;
  right: .5em;
  font-size: 2.2em;
  color: #FFF;
  z-index: 8;
}

.menu-toggle:hover, #site-navigation .menu-item a:hover, #nav_book_button a:hover, #cart_header:hover{
    color: #FA731C;
}

.navigation {
  display: block;
  width: 100%;
}

.navigation ul {
  display: none;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

#site-navigation{
  position: relative;
  background: #0B0E10;
  margin-top: 3.5em;
  width: 100%;
  box-sizing: border-box;
}

#site-navigation .menu-item a{
  font-family: outfit, sans-serif;
  font-size: 1em;
  color: #F5F5F5;
  width: 100%;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  padding: .2em 0em .2em 0em;
  margin: 0;
  box-sizing: border-box;
}


/**Landing Styles*/
#landing{
  position: relative;
  width: 100%;
  height: 100%;
  height: 100vh;
  min-height: 38em;
  background-image: url('https://digitaldrams.inksplat.dev/wp-content/uploads/2024/09/background-2.png');
  background-image: url('https://digitaldrams.inksplat.dev/wp-content/uploads/2024/10/digital-drams-background.png');
  background-size: cover;
  background-position: left bottom;
}

#landing_holder{
  display: flex;
  flex-wrap: wrap;
  justify-content: justify;
  position: relative;
  width: 90%;
  left: 50%;
  height: 100%;
  transform: translateX(-50%);
}

#landing_left{
  position: relative;
  width: 100%;
}

#landing_right{
  position: relative;
  display: none;
}

#landing_center{
  position: relative;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
}

#landing_content{
  position: relative;
  width: 100%;
  text-align: center;
}

#landing_content h1{
  font-size: 2.3em;
  font-family: outfitbold, sans-serif;
  font-weight: normal;
  text-transform: uppercase;
  line-height: 1.1em;
  margin: 0em 0em .5em 0em;
}

#landing_content p{
  font-size: 1.1em;
  line-height: 1.2em;
  margin: 0;
  padding: .1em 0em .5em 0em;
}

.cta_buttons{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: .5em 0em 0em 0em;
  background: none;
}

.cta_buttons a{
  font-family: outfit, sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  margin: .5em 1em;
  padding: .5em 1em;
  box-sizing: border-box;
}

#landing_cta .cta_buttons a{
  font-size: 1.2em; 
  width: 10em;
}

.cta_buttons .primary{
  color: #010B13;
  background: #FA731C;
  border: 1px solid #FA731C;
}

.cta_buttons .secondary{
  color: #FA731C;
  border: 1px solid #FA731C;
}

#landing_cta h4{
  font-family: outfit, sans-serif;
  font-weight: normal;
  font-size: 1em;
  text-transform: capitalize;
  margin: .7em 0em 0em 0em;
}

#landing_cta h4 a{
  color: #FA731C;
}

.cta_buttons .primary:hover{
  color: #0B0E10;
  background: #F5F5F5;
  border: 1px solid #F5F5F5;
}

.cta_buttons .secondary:hover{
  color: #F5F5F5;
  border: 1px solid #F5F5F5;
}

#landing_cta h4 a:hover{
  color: #F5F5F5;
}

#landing_social{
  display: none;
  position: absolute;
  bottom: 1.5em;
  right: 1em;
}

#landing_social a{
  display: inline-block;
  font-size: 1.3em;
  color: #0B0E10;
  background: #F5F5F5;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  line-height: 2.1em;
  text-decoration: none;
  text-align: center;
  margin: .3em; 
}

#landing_social a:hover{
  background: #FA731C;
}

#landing_numbers{
  display: none;
  position: absolute;
  left: 2.5em;
  bottom: 2em;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 30em;
}

.landing_figure{
  position: relative;
  width: 33.3%;
  text-align: center;
  padding: 0em 1em;
  background: -webkit-linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,.8));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  opacity: 0;
  transform: translateY(200px);
  transition: all .3s;
}

.landing_figure h3{
  font-family: outfitbold, sans-serif;
  line-height: 1em;
  font-size: 2em;
  margin: 0em 0em .2em 0em;
}

.landing_figure h5{
  text-transform: uppercase;
  line-height: 1em;
  margin: 0;
}

.landing_figure:nth-of-type(2){
  border-left: 1px solid #F5F5F5;
  border-right: 1px solid #F5F5F5;
}


/**Landing Page Headers*/
.highlight_header{
  padding: 2em 0em;
}

.highlight_header h2{
  font-size: 1.7em;
  font-family: outfitbold, sans-serif;
  font-weight: normal;
  text-transform: uppercase;
  line-height: 1.5em;
  text-align: center;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.highlight_header .line{
   transform: translateY(200%);
   opacity: 0;
   transition: all .5s;
}




/**Marketplace Styles.*/
#marketplace{
  position: relative;
  padding-top: 2em;
  z-index: 2;
}

#marketplace_holder{
  margin-bottom: 1em;
  width: 100%;
  overflow: scroll;
}

#marketplace_content{
  position: relative;
  width: 182em;
  padding: 0em 1em;
}

#marketplace_holder::-webkit-scrollbar, #benefits_holder::-webkit-scrollbar{
  display: none;
}

#marketplace_holder, #benefits_holder{
  -ms-overflow-style: none; 
  scrollbar-width: none;
}

#marketplace_flex{
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
}

.marketplace_item{
  position: relative;
  width: 18em;
  padding: 2.5em 1.5em;
}

.mpi_inner{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 1em;
  background-image: radial-gradient(#343434, #0B0E10);
  border: 1px solid #1B1B1B;
  box-shadow: 0 0 10px #000;
}


/**Marketplace Item Image*/
.mpi_top{
  position: relative;
  padding: 3em 1em;
  height: 24em;
  overflow: hidden;
}

.mpi_img{
  position: relative;
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
}

.mpi_img img{
  width: 100%;
  height: auto;
  transition: all 1s;
}

.rarity_badge{
  position: absolute;
  top: 1em;
  left: 1em;
  font-family: outfitbold, sans-serif;
  font-size: 1.3em;
  color: #020407;
  background: #FA731C;
  width: 3em;
  padding: .3em;
  text-align: center;
  border-radius: .5em;
  box-sizing: border-box;
}

.rare_item .rarity_badge{
 /* border-radius: 0em;
  width: 3em;
  height: 3em;
  margin-top: -.5em;
  line-height: 2.5em;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  */
}


/**Marketplace Item Info*/
.mpi_bottom{
  position: relative;
  width: 100%;
  padding: 1em;
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
  background: #0B0E10;
  margin-top: -2em;
  border-top: 2px solid #0B0E10;
}

.rare_item .mpi_inner{
 /*  background-image: radial-gradient(#F0A06E, #EE7629);*/
}

.rare_item .mpi_bottom{
 /*  border-top: 2px solid #FA731C;
  /* background: #FA731C;*/
}

.mpi_bottom h3{
  font-family: outfit, sans-serif;
  font-weight: normal;
  font-size: 1.1em;
  line-height: 1.3em;
  text-transform: uppercase;
  margin: 0em;
}

.mpi_bottom p{
  color: #FAF9F6;
}

/**Marketplace Buy Buttons*/
.mpi_buy{
  position: relative;
  height: 3em;
}

.mpi_buy h4{
  position: absolute;
  top: 50%;
  left: 50%;
  font-family: outfit, sans-serif;
  font-size: 1.4em;
  color: #F5F5F5;
  text-transform: uppercase;
  text-align: center;
  margin: 0em;
  background: #343434;
  padding: .2em;
  border: .5px solid #CCC;
  transform: translate(-50%, -50%);
}

.mpi_buy a{
  display: none;
  top: 50%;
  left: 50%;
  position: relative;
  font-family: outfit, sans-serif;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  padding: .5em 1em;
  width: 80%;
  color: #0B0E10;
  margin-top: 1.3em;
  background: #FA731C;
  border: 1px solid #F5F5F5; 
  box-sizing: border-box;
  transform: translate(-50%, -50%);
}

.mpi_buy a:hover{
  opacity: .8; 
}

.mpi_inner:hover .mpi_buy h4{
  display: none;
}

.mpi_inner:hover .mpi_buy a{
  display: block;
}

.mpi_inner:hover img{
  transform: scale(1.1);
}

#hh3{
  margin-top: -4em;
}

#hh3 strong{
  font-size: 2.4em;
  font-weight: normal;
  line-height: 1.1em;
  margin-bottom: .5em;
}


#marketplace .cta_buttons, #hh3 .cta_buttons{
  justify-content: center;
  animation: pulse 3s infinite;
}


@keyframes pulse {
  0%{
  transform: scale(1);
  }
  30%{
  transform: scale(1.1);
  }     
  50% {
  transform: scale(1);
  }
  70% {
  transform: scale(1);
  } 
  90% {
  transform: scale(1);
  }
} 







/**Features Styles*/
#features{
  position: relative;
  box-sizing: border-box;
}

#features_grid {
  display: grid;
  width: 100%;
  max-width: 80em;
  grid-gap: 3em;
  height: auto;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: auto;
  grid-template-areas:
    "one"
    "two"
    "three"
    "five"
    "four"
    "six";
}


.feature_block {
    position: relative;
    background: #0B0E10;
    border-radius: 2em;
    border: 1px solid #343434;
    box-shadow: 0 0 10px #000;
}

#features_grid .feature_block:nth-child(1) {
  grid-area: one;
}
#features_grid .feature_block:nth-child(2) {
  grid-area: two;
}

#features_grid .feature_block:nth-child(3) {
  grid-area: three;
}

#features_grid .feature_block:nth-child(4) {
  grid-area: four;
}

#features_grid .feature_block:nth-child(5) {
  grid-area: five;
}

#features_grid .feature_block:nth-child(6) {
  grid-area: six;
}

.fb_img_block{
  position: relative;
  width: 100%;
  height: 10em;
}

.feature_block .fb_info{
  padding: .5em 2em;
  background: linear-gradient(to bottom, rgba(11,14,16, 0), rgba(11,14,16, 1) 3.5em);
  border-bottom-left-radius: 2em;
  border-bottom-right-radius: 2em;
}

.feature_block .fb_info h3{
  font-family: outfitbold, sans-serif;
  font-size: 1.5em;
  font-weight: normal;
  text-transform: uppercase;
  line-height: 1.2em;
  max-width: 80%;
}

/**Featured Block*/
#fb_1{
    background-image: url("https://digitaldrams.inksplat.dev/wp-content/uploads/2024/07/temps.jpg");
    background-size: cover;
    background-position: top center;
}

#fb_2{
    background-image: url("https://digitaldrams.inksplat.dev/wp-content/uploads/2024/07/temps3.jpg");
    background-size: cover;
    background-position: top center;
}

#fb_3{
    background-image: url("https://digitaldrams.inksplat.dev/wp-content/uploads/2024/07/temps2.jpg");
    background-size: cover;
    background-position: top center;
}

#fb_4 .fb_img_block{
    width: 100%;
    background-image: url("https://digitaldrams.inksplat.dev/wp-content/uploads/2024/07/wallets.png");
    background-size: cover;
    background-position: top left;
    border-bottom-left-radius: 2em;
    border-bottom-right-radius: 2em;
}

#fb_4 .fb_info h3{
    position: relative;
    left: 50%;
    text-align: center;
    line-height: 1.2em;
    transform: translateX(-50%);
}

#fb_5{
    background-image: url("https://digitaldrams.inksplat.dev/wp-content/uploads/2024/07/temps.jpg");
    background-size: cover;
    background-position: top center;
}

#fb_6 div{
  position: relative;
  left: 50%;
  width: 80%;
  max-width: 16em;
  transform: translateX(-50%);
  padding: 1em 0em .5em 0em;
}

#fb_6 div img{
  width: 100%;
  height: auto;
}






/**Benefits Styles*/
#benefits{
  position: relative;
  z-index: 2;
}

#benefits_holder{
  position: relative;
  margin: -1.5em 0em 0em 0em;
  width: 100%;
  overflow: scroll;
}

#benefits_content{
  position: relative;
  width: 110em;
  padding: 0em 1em;
}

#benefits_flex{
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
}

.benefits_block{
  position: relative;
  width: 18em;
  padding: 2.5em .7em;
  margin-top: 2.5em;
  opacity: 0;
  transform: translateY(200px);
  transition: all .3s;
}

.bb_inner{
  position: relative;
  width: 100%;
  height: 100%;
  background: #0B0E10;
  border-radius: .5em;
  border: 1px solid #1B1B1B;
  border-top: 1px solid #FA731C;
  box-shadow: 0 0 10px #000;
  box-sizing: border-box;
}

.bb_icon_holder{
  position: absolute;
  top: -4em;
  left: 2em;
  background: #0B0E10;
  width: 6em;
  height: 6em;
  border-radius: 50%;
  border: 1px solid #FA731C;
  box-shadow: 0 0 10px #000;
}

.bb_icon{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4em;
  height: 4em;
  background: #0B0E10;
  line-height: 0%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.bb_icon img{
  display: block;
  width: 100%;
  height: auto;
}

.bb_info{
  padding: 1em 2em;
  z-index: 2;
}

.bb_info h3{

}





/**Marketplace Styles.*/
#marketplace{
  position: relative;
  padding-top: 2em;
  z-index: 2;
}

#marketplace_holder{
  margin-bottom: 1em;
  width: 100%;
  overflow: scroll;
}

#marketplace_content{
  position: relative;
  width: 182em;
  padding: 0em 1em;
}


#marketplace_flex{
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
}

.marketplace_item{
  position: relative;
  width: 18em;
  padding: 2.5em 1.5em;
}







/**Discover Marketplace Styles.*/
#discover_marketplace_holder{
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
}

.discover_marketplace_item{
  position: relative;
  width: 100%;
  padding: 1.5em;
}

.discover_marketplace_item:hover{
  cursor: pointer;
}



/**Footer Styles*/
#colophon{
  position: relative;
  padding: 1.5em 2em .5em 2em;
  background: #0B0E10;
  text-align: center;
  z-index: 3;
  box-sizing: border-box;
}

#colophon h4{
  font-family: outfit, sans-serif;
  font-size: 1.2em;
  text-transform: uppercase;
  margin: 2em 0em .3em 0em;
}

.footer_nav_links ul, #footer_nav_legal ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer_nav_links ul a, #footer_nav_legal ul a{
  color: #F5F5F5;
  text-decoration: none;
  margin: 0em .5em;
}

#footer_contact a{
  color: #F5F5F5;
  text-decoration: none;  
}

.footer_nav_links ul a:hover, #footer_nav_legal ul a:hover, #footer_contact a:hover{
  color: #0B0E10;
  background: #FA731C;
}

#footer_social{
  padding-top: 1em;
}

#footer_social a{
  display: inline-block;
  font-size: 1.3em;
  color: #0B0E10;
  background: #F5F5F5;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  line-height: 2.1em;
  text-decoration: none;
  text-align: center;
  margin: .5em; 
}

#footer_social a:hover{
  background: #FA731C;
}

#footer_logo{
  position: relative;
  left: 50%;
  width: 7em;
  transform: translateX(-50%);
}

#footer_logo img{
  width: 100%;
  height: auto;
}

#footer_bottom{
  font-size: .9em;
  padding-top: 1.3em;
  margin-top: 2em;
  border-top: 1px solid #F5F5F5;
}

#sitedesign a{
  color: #FFF;
  text-decoration: none;
}


/**Discover/Marketplace Styles.*/
/**Sticky Filter Buttons*/
#display_filters{
  position: -webkit-sticky; 
  position: sticky;
  top: 0em;
  background: #020407;
  background: linear-gradient(to left, #020407, #161616, #020407);
  padding: .5em 0em;
  z-index: 6;
}

#display_filters .margins{
  display: flex;
  flex-wrap: wrap;
  justify-content: right;
  align-items: center;
}

#filter_button{
  position: relative;
  background: #0B0E10;
  width: 7em;
  text-align: center;
  text-transform: uppercase;
  padding: .5em;
  border-radius: .5em;
  border: 1px solid #F5F5F5;
  box-sizing: border-box;
  margin: 0em .7em 0em 0em;
}

.filter_active{
  background: #FA731C !important;
  color: #0B0E10 !important;
}

#filter_button:hover{
  cursor: pointer;
  border: 1px solid #FA731C;
}

#sort_dropdown select{
  font-family: outfit, sans-serif;
  color: #F5F5F5;
  text-transform: uppercase;
  border: none;
  background: #0B0E10;
  outline: none;
  appearance: none;
  width: 12em;
  padding: .5em;
  border-radius: .5em;
  border: 1px solid #F5F5F5;
  box-sizing: border-box;
  margin: 0em .7em;
}

/**Discovery Filter Styles*/
#marketplace_filters{
  display: none;
  position: fixed;
  top: 0em;
  left: 0em;
  width: 100%;
  height: 100%;
  height: 100vh;
  background: rgba(0,0,0,.5);
  z-index: 7;
}

#marketplace_filters_content{
  display: none;
  position: relative;
  left: 0%;
  width: 100%;
  height: 100%;
  height: 100vh;
  max-width: 30em;
  padding: 2em 1em;
  background: #0B0E10;
  overflow: scroll;
}

#menu_filter_button{
    display: block;
    position: absolute;
    top: 1em;
    left: 1em;
    width: 2em;
    height: 2em;
    text-align: center;
    line-height: 2em;
    color: #0B0E10;
    background: #FA731C;
    z-index: 7;
}

#menu_filter_button:hover{
    cursor: pointer;
    background-color: #F5F5F5;
}

.show_filter_menu{
  display: block !important;
}

#marketplace_filters_content h3{
  font-family: outfitbold, sans-serif;
  font-size: 1.8em;
  font-weight: normal;
  text-transform: uppercase;
}

.discover_form_block {
  padding: 0em 1em;
  border-top: 1px solid #F5F5F5;
  margin-bottom: 2em;
}

.discover_form_block h4{
  font-family: outfit, sans-serif;
  font-size: 1.3em;
  text-transform: uppercase;
  margin: 1em 0em .5em 0em;
}

.discover_form_block h4 span{
  position: relative;
  font-size: .4em;
  top: -.5em;
}

.discover_form_block input[type="text"]{
  font-family: outfit, sans-serif;
  color: #F5F5F5;
  text-transform: uppercase;
  border: none;
  background: none;
  outline: none;
  appearance: none;
  width: 100%;
  padding: .5em;
  border-radius: .5em;
  border: 1px solid #F5F5F5;
  box-sizing: border-box;
}

.discover_form_block input::placeholder{
  color: #F5F5F5;
}

.form_checkboxes span{
  margin-left: .5em;
}



/**NEW SORT STYLES*/
#filter_distillery_block, #filter_distillery_block ul{
  padding: 0;
  margin: 0;
  list-style: none;
}

#filter_distillery_block li{
  border-top: 1px solid #1B1B1B;
}

.fdb_top{
  padding-left: 1em;
}

#filter_distillery_block h5{
  font-size: 1.1em;
  margin: .5em 0em;
}

.fdb_down, .fdb_right{
  display: inline-block;
  width: 1.5em;
}

.fdb_down{
  display: none;
}

#filter_distillery_block h5:hover, #filter_distillery_block ul li:hover{
  cursor: pointer;
  color: #FA731C;
  opacity: 1 !important;
}

#filter_distillery_block ul{
  display: none;
  padding: 0;
  margin: 0;
  list-style: none;
  padding-bottom: .5em;
}

.show_fdb_sub{
  display: block !important;
}

#filter_distillery_block ul li{
  display: block;
  position: relative;
  margin-left: 2em;
  margin-bottom: .5em;
  border: none;
}

.fdb_count{
  position: absolute;
  right: 0em;
  top: .1em;
  font-size: .9em;
  font-style: italic;
}






#discover_Form_rarity_block{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

#discover_Form_rarity_score{
  font-size: 1.3em;
  width: 5em;
  text-align: center;
}

.slider{
  position: relative;
  width: calc(100% - 7em);
  -webkit-appearance: none;  
  appearance: none;
  outline: none;
  height: .3em; 
  background: #343434;
  outline: none;
}

input[type='range'], input[type='checkbox']{ 
  accent-color: #FA731C; 
}





/**Landing Page Styles*/
#landing_cover{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 100;
  background-color: red;
  animation: landing_cover_animation 10s forwards;
}

#landing_cover_logo{
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  animation: landing_cover_logo_animation 10s forwards;
}

#landing_cover_glass{
  position: fixed;
  top: 50%;
  left: 50%;
  width: 3.5%;
  transform: translate(-50%, -50%);
  animation: landing_cover_glass 10s forwards;
}

#landing_cover_logo img, #landing_cover_glass img{
  display: block;
  width: 100%;
  height: auto;
}




@keyframes landing_cover_animation {
  0%{
    display: block;
    background: rgba(0,0,0,1);
  }
  15%{
     display: block;
     background: rgba(0,0,0,1);
  }     
  30% {
     display: block;
     background: rgba(0,0,0,0);
  }
  99% {
     display: block;
     background: rgba(0,0,0,0);
  } 
  100% {
     display: none;
     background: rgba(0,0,0,0);
  }
} 


@keyframes landing_cover_logo_animation {
  0%{
    transform: translate(-50%, -50%) scale(1);
  }
  20%{
     transform: translate(-50%, -50%) scale(1);
  }  
  100% {
    transform: translate(-50%, -50%) scale(40);
  }
} 



@keyframes landing_cover_glass {
  0%{
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg);
  }
  19%{
    opacity: 1;
    transform: translate(-50%, -50%) rotate(360deg);
  }   

  20% {
     opacity: 1;
     transform: translate(-50%, -50%) rotate(360deg);
  }  
  25% {
     opacity: 0;
     transform: translate(-50%, -50%) rotate(360deg);
  }   
  100% {
     opacity: 0;
     transform: translate(-50%, -50%) rotate(720deg);
  }
} 






/**Media Queries*/

@media only screen and (min-width: 18.75em){


}


@media only screen and (min-width: 20em){

    
}


@media only screen and (min-width: 22em){

  
}
  

@media only screen and (min-width: 25.625em){


}


@media only screen and (min-width: 28em){ 



}




@media only screen and (min-width: 30.313em){



      
}


@media only screen and (min-width: 33.125em){

  /**Sticky Filter Buttons*/
  #filter_button{
    width: 10em;
  }

}



@media only screen and (min-width: 36.875em){
  
    /**Masthead Styles*/
    #logo{
      top: .6em;
      left: 2em;
      width: 15em;
    }

    /**Navigation Styles*/
    .menu-toggle{
      right: 1em;
    }

    /**Header Account*/
    #header_account, #header_profile{
      right: .5em;
    }



    /**Landing Styles*/  
    #landing_left{
      position: relative;
      left: 50%;
      width: 90%;
      transform: translateX(-50%);
    }  
       
/*    
    #landing_left{
      width: 50%;
      min-width: 35em;
      max-width: 50em;
    }  

  #landing_content{
      text-align: left;
    }  

    .cta_buttons{
      justify-content: left;
    }
    
    .cta_buttons a{
      margin-left: 0em;
    }
    */

    /**Marketplace Styles*/
    #marketplace_content{
      width: 252em;
    }

    .marketplace_item{
      width: 25em;
    /*  min-height: 38em;*/
    }

    .mpi_top{
      position: relative;
      padding: 1em;
    }

    .mpi_bottom_left{
      width: calc(100% - 6em);
    }

    .mpi_bottom_right{
      width: 5.5em;
      padding-left: .5em;
    }

    .mpi_bottom{
      padding-top: 2em;
    }

    .mpi_bottom_flex{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center
    }

    .mpi_buy a{
      margin-top: 0em;
    }


    /**Discovery Filter Styles*/
    #marketplace_filters{
      display: none;
      position: fixed;
      top: 0em;
      left: 0em;
      width: 100%;
      height: 100%;
      height: 100vh;
      background-color: rgba(0,0,0,0);
      z-index: 7;
    }

    #marketplace_filters_content{
      padding: 3.5em 2.5em;
    }


    /**Featured Block*/
    #fb_4 .fb_info h3{
        font-size: 1.7em;
    }


}




@media only screen and (min-width: 38.5em){ 



}

  
@media only screen and (min-width: 41em){ 

     /**Discover Marketplace Styles.*/
    .discover_marketplace_item{
      width: 50%;
    }
  
  
  
}


@media only screen and (min-width: 44em){ 

    /**Features Styles*/
    #features_grid {
      display: grid;
      width: 100%;
      max-width: 80em;
      grid-gap: 2.5em;
      height: auto;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: auto;
      grid-template-areas:
        "one three"
        "one three"
        "one five"
        "two five"
        "two five"
        "two four"
        "six four";
    }

    .feature_block {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
    }

}




@media only screen and (min-width: 48em){
  
    /**Basic Styles*/
    #wrapper{
      padding-bottom: 3.5em;
    }

    .margins{
      left: 50%;
      width: 90%;
      padding: 0;
      transform: translateX(-50%);
    }

    .headers h1, .headers h2{
      font-size: 3em;
    }

    .subheader h2{
      font-size: 2em;
    }

   /**Landing Page Headers*/
    .highlight_header{
      position: relative;
      left: 50%;
      padding: 2em 0em;
      max-width: 90%;
      transform: translateX(-50%);
    }

    .highlight_header h2{
      font-size: 2.1em;
    }

}




@media only screen and (min-width: 50em){

  /**Landing Styles*/
 /* #landing_left{
    width: 35em;
  }

  #landing_right{
    display: block;
    width: calc(100% - 35em);
  }
  */

  #landing_image{
    position: relative;
    left: 3em;
    width: 20em;
    height: 100%;
    background-image: url('https://digitaldrams.inksplat.dev/wp-content/uploads/2024/10/digital-drams-landing.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left bottom;
  }


}






@media only screen and (min-width: 54em){
  
    /**Header Account*/
    #header_account{
      top: .7em;
      right: 7em;
      width: 18em;
      padding: 0;
    }

    #header_account #account_icon, #header_account #account_icon_out{
      display: none;
    }

    #header_account_buttons{
      display: flex;
      flex-wrap: wrap;
      justify-content: right;
      margin: 0;
      padding: 0;
      background: none;
    }

    #header_account_buttons a{
      margin: 0em 0em 0em 1em;
      padding: .3em 1em;
      box-sizing: border-box;
      border: 1px solid #FA731C;
    }

     #custom_login a{
      color: #0B0E10;
      background: #FA731C;
    }

    #custom_signup a{
      color: #FA731C;
    }

    #custom_login a:hover{
      color: #0B0E10;
      background: #F5F5F5;
      border: 1px solid #F5F5F5;
    }

    #custom_signup a:hover{
      color: #F5F5F5;
      border: 1px solid #F5F5F5;
    }

    #header_account:hover  #header_account_buttons{
      display: flex;
    }

    #header_profile{
      top: .1em;
      right: 5.5em;
      width: 6em;
    }

    #header_account_buttons, #account_profile{
      margin-left: -7em;
    }

    /**Marketplace Styles*/
    #marketplace{
      padding-top: 3em;
    } 

    #marketplace_content{
      position: relative;
      width: 250em;
      width: calc(250em + 10%);
      padding: 0em 5%;
    }

    .marketplace_item{
      position: relative;
      width: 25em;
    }

    .mpi_bottom h3{
      font-size: 1.2em;
    }

    /**Discover Marketplace styles*/
    .discover_marketplace_item{
      width: 100%;
      padding: .7em;
    }

    /**Features Styles*/
    #features{
      padding: 1em 0em;
    }





  
    /**Footer Styles*/
    #colophon{
      position: relative;
      padding: 2em 5% .5em 5%;
      text-align: left;
    }

    #colophon h4{
      margin: 0em 0em .3em 0em;
    }

    #footer_top{
      display: grid;
      grid-template-columns: auto auto auto auto;
      grid-column-gap: 1em;
    }

    .footer_nav_links ul{
      display: block;
    }

    .footer_nav_links a{
      margin: 0;
    }

    #footer_social a{
      font-size: 1.3em;
      margin: .2em .5em 0em 0em;  
    }

    #footer_bottom{
      display: grid;
      grid-template-columns: 50% 50%;
      margin-top: 2em;
      border-top: 1px solid #F5F5F5;
      padding-top: .6em;
    }

    #copyright{
      order: 1;
      text-align: left;
    }

    #footer_nav_legal{
      order: 2;
    }

    #footer_nav_legal ul{
      justify-content: right;
    }

    #footer_nav_legal a{
      margin: 0em 1em 0em 0em;  
    }   

    /**Discovery Filter Styles*/
    #marketplace_filters{
      display: block;
      position: relative;
      top: auto;
      left: 0em;
      width: 20em;
      height: auto;
      z-index: 2;
    }

    #marketplace_filters_content{
      display: block;
      position: relative;
      left: auto;
      width: 100%;
      height: auto;
      transform: none;
      padding: 1em;
      margin: 0em 0em 0em 1em;
      border: 1px solid #1B1B1B;
    }

    #menu_filter_button, #filter_button{
        display: none
    }

    #marketplace_display{
      width: calc(100% - 20em);
    }



}

@media only screen and (min-width: 59em){

  
}


@media only screen and (min-width: 64em){
    

    /**Landing Styles*/
/*    #landing_left{
      width: 40em;
    }

    #landing_right{
      width: calc(100% - 40em);
    }
*/
    #landing_content h1{
      font-size: 3em;
    }

    #landing_content p{
      padding: .2em 0em 1.5em 0em;
    }

    #landing_content h4{
       margin: 1em 0em 0em 0em;
    }

    #landing_numbers{
      display: flex;
    }

    #landing_social{
      display: block;
    }

    /**Marketplace Styles*/
    #marketplace_content{
      position: relative;
      width: 250em;
      width: calc(250em + 10%);
      padding: 0em 5%;
    }

    .marketplace_item{
      position: relative;
      width: 25em;
    } 
    
    /**Discover Marketplace styles*/
    .discover_marketplace_item{
       width: 50%;
    }

    /**Features Styles*/
     #features_grid {
      grid-template-columns: repeat(3, 1fr);
      grid-template-areas:
        "one two three"
        "one two three"
        "one two three"
        "one two three"
        "one five three"
        "one five four"
        "six five four"
        "six five four";
    }

    /**Benefits Styles*/
    #benefits_content{
      position: relative;
      width: calc(138em + 10%);
      padding: 0em 5%;
    }

    .benefits_block{
      position: relative;
      width: 23em;
      padding: 2.5em .7em;
    }
 
}



@media only screen and (min-width: 67em){

} 



@media only screen and (min-width: 70em){
  
  /**Basic Styles*/
  .headers h1, .headers h2{
      font-size: 3.2em;
  }


  .subheader h2{
    font-size: 2.2em;
  }


  /**Landing Styles*/
  #landing{
    background-position: center bottom;
  }



  /**Landing Styles*/

  #landing_image{
    left: 50%;
    width: 20em;
    margin-top: -3em;
    transform: translateX(-30%);
  }



  /**Landing Page Headers*/
  .highlight_header{
    padding: 3em 0em;
  }

  .highlight_header h2{
    font-size: 2.5em;
    line-height: 1.5em;
  }  

  #highlight_text_3, #highlight_text_3 h2{
    line-height: 1.2em;
  }

  /**Marketplace Styles*/
  #marketplace{
    padding-top: 4.5em;
  } 
  /**Sticky Filter Buttons*/
  #display_filters{
    top: 3.5em;
  }


  /**Footer Styles*/
    #copyright_bar{
      display: flex;
      flex-wrap: wrap;
      justify-content: left;
      flex-direction: row-reverse;
    }

    #sitedesign{
      padding-left: 2em;
    }
}




@media only screen and (min-width: 74em){

  /**Masthead Styles*/
  #masthead{
    position: fixed;
  }

  /**Header Account*/
  #header_account{
    right: 4em;
  }
   
  #header_profile{
      right: -2em;
  }



  /**Navigation Styles*/
  #site-navigation{
      position: absolute;
      top:  -2.6em;
      left: 50%;
      float: none;
      background: none;
      width: 40em;
      transform: translateX(-50%);
  } 

  #site-navigation ul{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

  #site-navigation .menu-item{
      margin: 0em .7em;
      padding: 0em;
  } 

  #site-navigation .menu-item a{
    font-size: .9em;
  } 

}


@media only screen and (min-width: 80em){
  
  /**Navigation Styles*/
  #site-navigation{
     width: 54em;
  } 

  #site-navigation .menu-item{
      margin: 0em 1.5em;
      padding: 0em;
  } 


  
  #landing_image{
    left: 50%;
    width: 24em;
    margin-top: -3.5em;
  }



  /**Landing Page Headers*/
  .highlight_header{
      padding: 4em 0em;
  }

  /**Discover Marketplace styles*/
  .discover_marketplace_item{
      width: 33%;
  }

    
  
}


@media only screen and (min-width: 95em){


}

@media only screen and (min-width: 105em){

  
}

@media only screen and (min-width: 115em){

  
}