body {
    overflow: hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.clearfix {
    text-align: center;
    height: 100%;
}

.profile .avatar{
	width: 20vh;
	height: 20vh;
}

.tilecontent {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.tile {
    position: relative;
    display: inline-block;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    color: #FFFFFF;
    vertical-align: middle;
    height: 33.33vh;
    width: 50%;
    -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.tile-disabled {
    box-shadow: inset 0px 0px 400px 110px rgba(0, 0, 0, 0.7);
    color: #B0CCD4 !important;
}

.tile-disabled:hover {
    cursor: not-allowed !important;
}

.tile-full {
    width: 100% !important;
}

.tile::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    opacity: 0;
    -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.tile:hover {
    z-index: 1000;
    -webkit-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
    cursor: pointer;
}

.tile:hover::after {
    opacity: 1;
}

.tile.purple, .tile.blue, .tile.red, .tile.orange, .tile.green, .tile.yellow {
    color: #FFFFFF;
}

.tile.purple {
    background: #5133AB;
    /*background: rgb(81, 27, 142);*/
}

.tile.purple:hover {
    background: #3E2784;
}

.tile.red {
    background: #AC193D;
    /*background: rgb(142, 27, 27);*/
}

.tile.red:hover {
    background: #7F132D;
}

.tile.green {
    background: #00A600;
    /*background: rgb(27, 142, 56);*/
}

.tile.green:hover {
    background: #007300;
}

.tile.blue {
    background: #2672EC;
    /*background: rgb(27, 62, 142);*/
}

.tile.blue:hover {
    background: #125ACD;
}

.tile.orange {
    background: #DC572E;
    /*background: rgb(210, 70, 21);*/
}

.tile.orange:hover {
    background: #b8431f;
}

.tile.yellow {
    background: #DDDB2E;
    /*background: rgb(142, 134, 27);*/
}

.tile.yellow:hover {
    background: #B8B61F;
}

.tiletext {
    font-size: 3.5vh;
}

i.fa {
    font-size: 10vh;
    vertical-align: middle;
}