/*------------------------------------------*/

@font-face{
	font-family:Work Sans;
	src:url("fonts/WorkSans-Black.ttf");
	font-style: black;
}

@font-face{
	font-family:Work Sans;
	src:url("fonts/WorkSans-SemiBold.ttf");
	font-style: semibold;
}

body{
	font-family: monospace, monospace;
	margin:0 auto;
	padding:5px;
	font-size:1em;
	font-weight: bold;
	line-height:1.3;
	background-color:#121010;
	color:#f3f3f3;
}

.mainmenu{
	margin:auto;
	max-width: 50em;
	text-align: center;
}

.mainmenu ul{
	list-style: " ■ ";
	margin: 0;
	padding: 0;
}

.mainmenu ul li{
	padding: 16px auto;
	text-align: center;
	display: inline;
	transition: 0.3s;
}

.mainmenu ul li:hover{
	color: #fff;
}

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

.col-2pl{
	display:none;
}

.contentContainer{
	margin: 10px auto 32px;
	max-width: 95%;
	padding: 0 2% 0 2%;
}

@media only screen and (min-width: 768px) {
.col-1 {box-sizing: border-box; float: left; width: 100%;}
.col-2 {box-sizing: border-box; float: left; width: 100%;}
.col-3 {box-sizing: border-box; float: left; width: 100%;}
.col-4 {box-sizing: border-box; float: left; width: 100%;}
.col-5 {box-sizing: border-box; float: left; width: 100%;}
.col-6 {box-sizing: border-box; float: left; width: 100%;}
.col-7 {box-sizing: border-box; float: left; width: 100%;}
.col-8 {box-sizing: border-box; float: left; width: 100%;}
.col-9 {box-sizing: border-box; float: left; width: 100%;}
.col-10 {box-sizing: border-box; float: left; width: 100%;}
.col-11 {box-sizing: border-box; float: left; width: 100%;}
.col-12 {box-sizing: border-box; float: left; width: 100%;}
.contentContainer{
	margin: 10px auto 32px;
	max-width: 95%;
	padding: 0 10% 0 10%;
}
.col-2pl{
	display:none;
}
}


@media only screen and (min-width: 1200px) {
.col-1 {box-sizing: border-box; float: left; width: 8.33%;}
.col-2 {box-sizing: border-box; float: left; width: 16.66%;}
.col-3 {box-sizing: border-box; float: left; width: 25%;}
.col-4 {box-sizing: border-box; float: left; width: 33.33%;}
.col-5 {box-sizing: border-box; float: left; width: 41.66%;}
.col-6 {box-sizing: border-box; float: left; width: 50%;}
.col-7 {box-sizing: border-box; float: left; width: 58.33%;}
.col-8 {box-sizing: border-box; float: left; width: 66.66%;}
.col-9 {box-sizing: border-box; float: left; width: 75%;}
.col-10 {box-sizing: border-box; float: left; width: 83.33%;}
.col-11 {box-sizing: border-box; float: left; width: 91.66%;}
.col-12 {box-sizing: border-box; float: left; width: 100%;}
.contentContainer{
	margin: 10px auto 32px;
	max-width: 95%;
	padding: 0 10% 0 10%;
}
.col-2pl{
	box-sizing: border-box; float: left; width: 16.66%; display: inherit;
}
}

footer{
	font-size: .8em;
	position: fixed;
	bottom:0;
	left:0;
	width: 100%;
	padding-left: 16px;
	padding-right: 16px;
	padding-top: 16px;
	padding-bottom: 16px;
	background-color: rgba(0,0,0,0.8);
	word-wrap: break-word;
	z-index:10;
}

::selection {
	color: #000;
	background: #fff;
}

::-moz-selection {
	color: #000;
	background: #fff;
}

/*------------------------------------------*/

.content{
	margin: 10px auto;
	max-width: 50em;
}

.rowContent{
	box-sizing: border-box;
	margin: 0px auto;
	min-height: 1px;
	width: 95%;
}

.rowContent::after {
	box-sizing: border-box;
	content: "";
	clear: both;
	display: table;
}

.row1x8{
	box-sizing: border-box;
	min-height: 1px;
	width: 100%;
}
.row1x8::after {
	box-sizing: border-box;
	content: "";
	clear: both;
	display: table;
}
.col-1x8{
	box-sizing: border-box;
	float: left;
	width: 12.5%;
}
.col-1x8 img{
	box-sizing: border-box;
	padding:1% 2% 1% 2%;
	max-width: 100%;
	height: auto;
}
.col-1x8 a{
	line-height: 0;
}

#collectionitem{/*box-shadow: 2px 4px 20px 8px rgba(0,0,0,0.6);*/}

h1{
	padding:5px;
	font-family: 'Work Sans', sans-serif;
	text-transform: uppercase;
	font-size: 2.5em;
	line-height: 2;
}

h2{
	padding:5px;
	font-family: 'Work Sans', sans-serif;
	text-transform: uppercase;
	font-size: 1.5em;
	line-height: 1;
}

h3{
	padding:5px;
	font-family: monospace, monospace;
	font-size: 1.2em;
	line-height: 1;
}

h4{
	padding:5px;
	font-family: 'Work Sans', sans-serif;
	font-weight: semibold;
	text-transform: uppercase;
	font-size: 1.5em;
	line-height: 1;
}

p{
	padding:5px;
	font-family: monospace, monospace;
	font-size:1em;
	text-align: left;
}

img{
	max-width: 100%;
	height: auto;
}

a{
	text-decoration:none;
	color: #fff;
	background-color: rgba(0,0,0,0.0);
	transition: 0.3s;
	text-decoration-style: double;
	text-decoration:underline overline;
}

a:visited{
	color: rgb(190, 222, 216);
}

a:active{
	color: #202020;
	background-color: #fff;
	text-decoration-style: double;
	text-decoration:underline overline;
}

a:hover{
	color: #202020;
	background-color: #fff;
	text-decoration-style: double;
	text-decoration:underline overline;
}

.celstudiesgrid a:hover{
	background-color: #121010;
}

pre{
	margin:0 auto;
	padding:0;
	text-align: center;
	line-height:.625;
}

ul{
	list-style: "■ ";
}

.bidbutton {
	font-family: 'Work Sans', sans-serif;
  	background-color: #fff;
	font-weight: semibold;
  	border: solid 4px #fff;
 	color: black;
 	padding: 15px 28px 15px 32px;
 	text-align: center;
 	text-decoration: none;
 	display: inline-block;
	text-transform: uppercase;
	font-size: 1.2em;
	letter-spacing:4px;
	line-height: 1;
	transition:0.3s;
}

.bidbutton:hover {
  	background-color: #121010;
  	border: solid 4px #fff;
 	color: #fff;
 	padding: 15px 28px 15px 32px;
	cursor: pointer;
}

table{
	padding: 5px;
	border-collapse: collapse;
	border: none;
}
th{
	font-weight: bold;
	padding: 5px 10px;
	text-align: left;
	width:80px;
}
td{
	text-align: left;
	padding: 5px 10px;
	width:80px;
}

/*------------------------------------------*/

.responsive{
  	max-width: 100%;
  	padding: 2%;
	height: auto;
}

.responsiveimg{
  	max-width: 98%;
  	margin: 5px;
	height: auto;
}

#masthead h1{
	margin: 0 auto;
	line-height: 1;
	max-width: 50em;
	text-align: center;
	z-index: 10;
}

#masthead a{
	color: #fff;
	text-decoration:none;
	background-color: rgba(0,0,0,0.0);
	z-index: 10;
}

#masthead a:hover{
	color: #fff;
	background-color: rgba(0,0,0,0.0);
	text-decoration:none;
	animation: pulsate 2s linear infinite;
	z-index: 10;
}

@keyframes pulsate{
        0% {
          color: #fff;
        }
        50% {
          color: #121010;
        }
        100% {
          color: #fff;
        }
      }

#binary{
	position: fixed;
	top:0;
	width: 100%;
	text-align: center;
	line-height:.615;
	color: #fff;
	z-index: -1;
	/*color: #313030;
	z-index: -1;*/
}

.itemcontainer{
	margin: 10% auto;
	max-width: 70%;
}

.itemcontent{

    	margin-left: auto;
    	margin-right: auto;
}


/* TOOLTIP and SVG hover*/

.tooltip {
  position: relative;
  display: inline-block;
  fill: #505050;
  transition: 0.3s;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -75px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext{
  visibility: visible;
  opacity: 1;
  cursor: pointer;
  fill:#fff;
}


svg{

}

svg:hover{
	cursor: pointer;
}

#copysymbol{
	fill: #f2f2f2;
	transition: 0.3s;
}

#copysymbol:hover{
	fill: #f92672;
}


#test{
	font-size: .8em;
	position: fixed;
	top:0;
	right:0;
	z-index:-1;
}

#ethadress{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width:100px;
}