* {
    font-family: 'Inconsolata', monospace;
    line-height: 1.25;
}

.u-box {
    margin-top: 2em;
}
.u4-box {
    margin-top: 4em;
}
.l-box {
    padding-left: 1em;
}
.b-box {
    padding-bottom: 1em;
}
.b4-box {
    padding-bottom: 4em;
}

#header {
    background-color: #1b1b1c;
    border-bottom: 3px solid #000;
}

#header a {
    text-decoration: None;
}

#banner {
    display: block;
    position: relative;
    background-image: url("../img/header.png");
    -webkit-animation: slide 45s linear infinite;
    -moz-animation: slide 45s linear infinite;
    animation: slide 45s linear infinite;
}
@keyframes slide {
	0% {
        background-position: 50% 0%;
	}
	50% {
        background-position: 100% 0%;
	}
	100% {
        background-position: -50% 0%;
	}
}

#hero-desc {
    background-color: #fff;
    margin-top: 40px;
    margin-bottom: 40px;
    padding-left: 20px;
    padding-right: 20px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

#header span#header-branding {
    color: #fff;
    font-size: 30px;
    line-height: 80px;
    font-weight:  700;
}
#header img {
    width: 60px;
    height: 60px; 
    margin-top: 5px;
    float: left;
}

.discord, .twitter {
    width: 32px !important;
    height: 32px !important;
    opacity: 0.5;
}

#menu {
    padding-top: 15px;
}

#header #discord-menu-link {
    background-color: transparent !important;
    background-image: url("../img/discord_white.png") !important;
    width: 20px !important;
    height: 35px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    opacity: 0.75;
}
#header #discord-menu-link:hover {
    opacity: 1.0;
}

.pure-menu-link {
    color: #fff;
    font-weight: bold;
}

.pure-menu-link:hover {
    color: #000;
    background-color: #fff;
}

img#hero-logo {
    margin-top: 30%;
    margin-left: 27%;
    width: 35%;
    z-index: 1;
    -webkit-animation:float 5s ease-in-out infinite;
    -moz-animation:float 5s ease-in-out infinite;
    animation:float 5s ease-in-out infinite;
}

@keyframes float {
	0% {
		transform: translatey(0px);
	}
	25% {
		transform: translatey(-8px);
	}
	100% {
		transform: translatey(0px);
	}
}

p.caption {
    color: #666;
    text-align:  center;
    margin-top: 5px;
}

.center {
  display: block;
  text-align: center; 
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

img#hero-img {
    margin-top: -60%;
    margin-left: -5%;
    z-index: 0;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

#saleStart {
    display: none;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    text-decoration: underline;
}
#up-next {
    border-top: 35px solid #111;
    background-color: #111;
    color: #fff;
}
#up-next .caption {
    color: #fff;
}

#saleProgress {
    display: none;
    text-align: center;
    font-size: 16px;
    padding: 0px;
    padding: 0px !important;
}
#remainingTime {
    display: none;
    text-align: center;
    font-size: 16px;
    padding: 0px !important;
}
#buy-expand {
    margin-top: 25px;
    display: none;
}
#eth-dildo {
}

#eth-dildo p {
    text-align:  center;
    padding-bottom: 3em;
}

#set-samples {
    border-top: 35px solid #111;
    background-color: #111;
    color: #fff;
}

#set-samples .caption {
    color: #fff;
}

#set-samples2 {
    background-color: #111;
    color: #fff;
    border-top: 35px solid #111;
}

#set-samples2 .caption {
    color: #fff;
}

#buy-info {
    display: block;
}
#buy-button {
    display:  none;
    cursor:pointer;

    background: none; 
    background-image: none; 
    word-break: keep-all;
    float: left;
    color: #fff;
    padding: 30px 28%;
    text-align: center;
    font-size: 22px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border: none;
    background-size: 400% 400%;
    -webkit-animation: shimmer 10s ease infinite;
    -moz-animation: shimmer 10s ease infinite;
    animation: shimmer 10s ease infinite;
}

#buy-button.ready {
    background-image: linear-gradient(213deg, #0AC0DB 10%, #19C800 90%);
    -webkit-animation: shimmer 10s ease infinite;
    -moz-animation: shimmer 10s ease infinite;
    animation: shimmer 10s ease infinite;
}

#buy-button.processing {
    background-image: linear-gradient(120deg, rgba(93,10,235,1) 25%, rgba(15,205,233,1) 100%);
    -webkit-animation: shimmer 3s ease infinite;
    -moz-animation: shimmer 3s ease infinite;
    animation: shimmer 3s ease infinite;
}

#buy-button.error {
    background-image: linear-gradient(120deg, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
    -webkit-animation: shimmer 3s ease infinite;
    -moz-animation: shimmer 3s ease infinite;
    animation: shimmer 3s ease infinite;
}

#buy-button:focus {outline:0;}
#buy-button:active {
    text-decoration: underline;
}
@keyframes shimmer {
	0% {
        background-position: 0% 50%;
	}
	50% {
        background-position: 100% 50%;
	}
	100% {
        background-position: 0% 50%;
	}
}

.progress-bar-color {
    position: absolute;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    margin-top: 2px;
    background: linear-gradient(90deg, rgba(93,10,235,1) 0%, rgba(10,192,219,1) 70%, rgba(25,200,0,1) 100%);

    width: 0%;
    display: block;
    padding-bottom: 8px;
    z-index: 99;
}

.progress-bar {
    font-size: 12px;
    border-right-width: 3px; 
    border-right-style: solid; 
    border-right-color: grey; 
    background-color: #ddd;
    background-position: initial initial; 
    background-repeat: initial initial;
    text-align: center;
    float: left;
    height: 12px;
    color: #2c2c2c;
    z-index: 0;
}

.progress-bar:last-of-type {
    border-right-width: 0px; 
}

.progress-bar span {
    font-size: 14px;
    display: block;
    height: 20px;
    line-height: 55px;
    text-align: center;
    position: relative;
    top: -40px;
    right: 0;
    color: #000;
}

table {
    text-align: center;
    margin-left:auto;
    margin-right:auto;
}
td {
  padding-bottom: 5px;
  padding-left: 5px;
}

#footer .pure-menu-link {
    color: #bbb; 
}

#footer .pure-menu-link:hover {
    color: #777; 
}

#footer .pure-menu-horizontal {
    text-align: right;
}

div.nft {
    display: inline-block;
    padding-left: 40px;
}
img.nft {
    border: 7px solid #111;
    border-bottom: 40px solid #111;
    padding: 5px;
}

p.nft {
    margin-top: -30px;
    color: #ddd;
    font-size: 20px;
    font-weight: bold;
}