@charset "utf-8";

* {
    box-sizing: border-box;
}

.columns {
    width: 33.3%;
    padding: 8px;
}

.price {
    list-style-type: none;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.price .header {
    background-color: #111;
    color: white;
    font-size: 25px;
    transition: 0.3s;
}

.price:hover {
    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}

.price:hover .header {
	background-color: #f1a710;
}

.price:hover .header.visitor {
	background-color: #f1a710;
}

.price:hover .header.resident {
	background-color: #f1a710;
}

.price:hover .header.citizen {
	background-color: #f1a710;
}

.price:hover .header.irondonator {
	background-color: #BDBDBD;
}

.price:hover .header.golddonator {
	background-color: #FFC107;
}

.price:hover .header.lapisdonator {
	background-color: #1565C0;
}

.price:hover .header.diamonddonator {
	background-color: #03A9F4;
}

.price:hover .header.redstonedonator {
	background-color: #D50000;
}

.price:hover .header.obsidiandonator {
	background-color: #4A148C;
}

.price:hover .header.emeralddonator {
	background-color: #43A047;
}

.price:hover .header.quartzdonator {
	background-color: #FFFFFF;
    color: black;
}

.price:hover .header.bedrockdonator {
	background-color: #424242;
}

.overlay_bottom_container {
	position: relative;
}

.overlay_bottom {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0,0,0,0.6);
	overflow: hidden;
	width: 100%;
	height: 0;
	transition: .5s ease;
}

.price:hover .overlay_bottom {
  height: 100%;
}

.overlay_bottom_text {
	color: white;
	font-size: 20px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

.price li {
    padding: 20px;
    text-align: center;
	font-size: 18px;
}

.price .grey {
    background-color: #eee;
    font-size: 20px;
}

.price .details {
	height: 100px;
}

.paybutton {
    background-color: #f1a710;
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
}

@media only screen and (max-width: 600px) {
    .columns {
        width: 100%;
    }
}