:root {
    --blue: #8bacff;
    --white: #fff;
    --grey: #f5f5f5;
    --black1: #222;
    --black2: #999;
    --black3:rgb(118, 118, 118);
    --black4:rgb(209, 209, 209);
    --mint: #2afcc8;

}

body {
    font-family: 'Comfortaa', cursive !important;
    font-weight: 300;
    width:100%;
    
    
}

h1 {
    font-family: 'Comfortaa', cursive !important;

}

h2 {
    font-family: 'Comfortaa', cursive !important;
}

h3 {
    font-family: 'Comfortaa', cursive !important;
}

h4 {
    font-family: 'Comfortaa', cursive !important;
}

h5 {
    font-family: 'Comfortaa', cursive !important;
}

p {
    font-family: 'Comfortaa', cursive !important;
}

input:focus{
    border: none;
    outline: none;
}
.diocont {
    width: 100%;
    min-height: 100vh;
    background-color: var(--blue);
    

}
.dionav {
    position: fixed;
    width: 100%;
    height: 100%;
    left:0px;
    background-color: var(--white);
    transition: 0.5s;
   
}

.dionav ul {
    position: absolute;
    top: 20px;
    left: 0;
    width: 100%;
}
.dionav ul li {
    position: relative;
    width: 200%;
    list-style: none;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;

}
.dionav ul li:nth-child(1) {
    position: relative;
    margin-bottom: 40px;
    width: 100%;
    display: flex;
    pointer-events: none;
    color: var(--white);
}
.diomain {
   
    width: 100%;  
    background: var(--blue);
    transition: 0.5s;

}


.balance {
    color:var(--white);
    font-size: 1.7em;
    
}
.amount {
    position:relative;
    color:var(--white);
    font-size: 5em;
    font-weight: 600;
}

.subtext{
    font-size:0.7em;
    font-weight:600;
    color: var(--white);
}
.subtext1{
    font-size:0.7em;
    font-weight:600;
    
}
.subtext3{
    font-size:1em;
}
.subtext2{
    font-size:1.5em;
    margin-bottom:5px;
    
}
.mintbutton{
    background-color: var(--blue);
    color: var(--white);
    border:none;
    padding:10px 10px 10px 10px;
    font-weight: 600;
}
.mintbutton:hover{
    background-color: rgb(57, 126, 205);
    color: var(--white);
    border:none;
    padding:10px 10px 10px 10px;
    font-weight: 600;
}

.mintbutton2{
    background-color: var(--blue);
    color: var(--white);
    font-size:1.3em;
    border:solid;
    border-width:2px;
    border-color:white;
    padding: 10px 15px 10px 15px;
    font-weight: 600;
    margin-bottom: 8px;
    margin-top: 5px;
}
.mintbutton2:hover{
    background-color: rgb(57, 126, 205);
    color: var(--white);
    font-size:1.3em;
    border:none;
    padding: 10px 15px 10px 15px;
    font-weight: 600;
    margin-bottom: 8px;
    margin-top: 5px;
}

.campbutton {
    position: relative;
}

.scrollmenufv {
    overflow: auto;
     /* this will hide the scrollbar in mozilla based browsers */
    overflow: -moz-scrollbars-none;
    scrollbar-width: none;
    /* this will hide the scrollbar in internet explorers */
    -ms-overflow-style: none;
    border-radius: 20px;
   
}
.scrollmenufv2{
    overflow:auto;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right:10px;
}
.scrollmenufv::-webkit-scrollbar {
   /* visibility:hidden; */
    display:none;

    /* for Chrome, Safari, and Opera */
  }



.vimg{
    position:relative;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width:110%;
    object-fit:cover;
}
.mobilemenu{
    display:none;
}
.eplogo{
  position:absolute;
  top:20%;
  left:20%;
  width:100%;
}
.epbg{
  position:relative;
  width:100%;
  left:0px;
}

.bg1{
	opacity:37%;
  	position:relative;
  	left:-10px;
  	width:115%

}

@media (max-width:1280px){
.bg1{
	opacity:37%;
  	position:relative;
  	left:0px;
  	width:125%

}
  
}
@media (max-width:1024px){
.bg1{
	opacity:37%;
  	position:relative;
  	left:-20px;
  	width:135%

}
}
@media (max-width:912px){
.bg1{
	opacity:37%;
  	position:relative;
  	left:-500px;
  	width:300%

}
}
@media (max-width:770px){
.bg1{
	opacity:37%;
  	position:relative;
  	left:-480px;
  	width:300%

}
}

@media (max-width:540px){
.bg1{
	opacity:37%;
  	position:relative;
  	left:-450px;
  	width:350%

}
}
@media (max-width:430px){
.bg1{
	opacity:37%;
  	position:relative;
  	left:-450px;
  	width:400%

}
}

@media (max-width:414px){
.bg1{
	opacity:37%;
  	position:relative;
  	left:-450px;
  	width:400%

}
}
@media (max-width:375px){
.bg1{
	opacity:37%;
  	position:relative;
  	left:-320px;
  	width:350%

}
}
@media (max-width:344px){
.bg1{
	opacity:37%;
  	position:relative;
  	left:-520px;
  	width:500%

}
}


@media (max-width: 900px) {
    .desktopmenu{
        display:none;
    }
    .mobilemenu{
     display:block;
    }
  
    .eplogo{
       position:absolute;
  		top:20%;
  		left:30%;
  		width:100%;
  		
    }
  	.epbg{
  	  
      position:relative;
  	  width:100%;
      left:-200px;
  	}
  
    .vimg{
        position:relative;
    top: 0%;
    left: 0%;
    -ms-transform: translate(0%, 0%);
    transform: translate(0%, 0%);
    width:110%;
    object-fit:cover;
    }
    .campbutton {
        display:none;
    }

    .dionav {
        position: fixed;
        width: 0px;
        height:100%;
        left:-20px;
        background-color: var(--white);
        overflow: hidden;
        transition: 0.5s;
        
    }
    .diomain {
        position: absolute;
        width: 100%;  
        left:0px;
        background: var(--blue);
        transition: 0.5s;
    
    }

}

.slider {
    
    width: 300px;
    height: 55px;
    border:solid;
    border-color:#8bacff;
    border-radius:50px;
    background: lightgrey;
    padding:5px;
    outline: none;
   
  }
  
  .slider:hover {
    opacity: 1;
    border:solid;
    border-color:#8bacff;
  }
  
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 50px;
    height: 50px;
    background: white;
    border-radius:50px;
    border-color:#8bacff;
    cursor: pointer;
  }
  
  .slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: var(--blue);
    cursor: pointer;
  }
  .thv{
    text-align: center;
  }

/* Popup container */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
  }
  
  /* The actual popup (appears on top) */
  .popup .popuptext {
    visibility: hidden;
    width: 200px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
  }
  
  /* Popup arrow */
  .popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
  }
  
  /* Toggle this class when clicking on the popup container (hide and show the popup) */
  .popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
  }
  
  /* Add animation (fade in the popup) */
  @-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
  }
  
  @keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
  }
  .checked {
    color: orange;
    font-size:0.76em;
  }