body{
    background: #222;
}
.logo{
    position: relative;
    width: auto;
    height: 20rem;
}
.header{
    width: 100%;
    height: 100vh;
    background: #870000; /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #870000, #290c04); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #870000, #290c04); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

hr{
    background-color: white !important;
}
.butn {
    background: none;
    border: 0;
    box-sizing: border-box;
    box-shadow: inset 0 0 0 2px #fff;
    font-size: inherit;
    font-weight: 700;
    position: relative;
    vertical-align: middle;
}
.butn::before, .butn::after {
    box-sizing: inherit;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
}

.btn {
    background: none;
    border: 0;
    box-sizing: border-box;
    box-shadow: inset 0 0 0 2px #fff;
    font-size: inherit;
    font-weight: 700;
    position: relative;
    vertical-align: middle;
}
.btn:hover{
    color: black !important;
    background-color: white !important;
}
.btn::before, .btn::after {
    box-sizing: inherit;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
}

.draw {
    transition: color 0.15s;
}
.draw::before, .draw::after {
    border: 2px solid transparent;
    width: 0;
    height: 0;
}
.draw::before {
    top: 0;
    left: 0;
}
.draw::after {
    bottom: 0;
    right: 0;
}
.draw:hover {
}
.draw:hover::before, .draw:hover::after {
    width: 100%;
    height: 100%;
}
.draw:hover::before {
    border-top-color: black;
    border-right-color: black;
    transition: width 0.15s ease-out, height 0.15s ease-out 0.15s;
}
.draw:hover::after {
    border-bottom-color: black;
    border-left-color: black;
    transition: border-color 0s ease-out 0.5s, width 0.15s ease-out 0.5s, height 0.20s ease-out 0.75s;
}


.meet:hover {
}
.meet::after {
    top: 0;
    left: 0;
}
.meet:hover::before {
    border-top-color: black;
    border-right-color: black;
}
.meet:hover::after {
    border-bottom-color: black;
    border-left-color: black;
    transition: height 0.15s ease-out, width 0.15s ease-out 0.15s;
}

.link:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: white;
}

hr {
    opacity: 0.3;
}

.card {
    box-sizing: border-box;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important;
    font-size: inherit;
    font-weight: 700;
    position: relative;
    vertical-align: middle;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 0;
    border: none;
    text-align: center;
}

.card-title {
    color: white;
}

.card-text {
    color: rgba(255, 255, 255, 0.5);
}

.card::before, .card::after {
    box-sizing: inherit;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
}
.card-icon-top{
    height: 12rem;
    background: #870000; /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #870000, #290c04); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #870000, #290c04); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.clicky-card {
    transition: 200ms;
    margin-bottom: 0; /* smd */
}

.clicky-card:hover {
    margin-top: -10px;
    margin-bottom: 10px;
}

a.scard {
    margin-bottom: 25px;
    display: block;
    text-decoration: none !important;
}
a{
    text-decoration: none !important;
}
.servertxt {
    font-weight: 300;
    line-height: 1;
}

.drawcard {
    transition: color 0.25s;
}
.drawcard::before, .drawcard::after {
    border: 3px solid transparent;
    width: 0;
    height: 0;
}
.drawcard::before {
    top: 0;
    left: 0;
}
.drawcard::after {
    bottom: 0;
    right: 0;
}
.drawcard:hover {
}
.drawcard:hover::before, .drawcard:hover::after {
    width: 100%;
    height: 100%;
}
.drawcard:hover::before {
    border-top-color: #870000;
    border-right-color: #870000;
    transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.drawcard:hover::after {
    border-bottom-color: #870000;
    border-left-color: #870000;
    transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}


.drawmeet:hover {
}
.drawmeet::after {
    top: 0;
    left: 0;
}
.drawmeet:hover::before {
    border-top-color: #870000;
    border-right-color: #870000;
}
.drawmeet:hover::after {
    border-bottom-color: #870000;
    border-left-color: #870000;
    transition: height 0.25s ease-out, width 0.25s ease-out 0.25s;
}