/* Too slow */
/*
@font-face {
    font-family: "TrajanProForButton"; 
    src: 
    url("//db.onlinewebfonts.com/t/b11f35f77210c651367969365f87af24.woff2") format("woff2"), 
    url("//db.onlinewebfonts.com/t/b11f35f77210c651367969365f87af24.woff") format("woff"); 
}
*/
@font-face {
    font-family: "Trajan Pro Button"; 
    src: url("font/TrajanPro.woff2") format("woff2"), 
    url("font/TrajanPro.woff") format("woff"); 
}

.enterButtonContainer {
    /*position: absolute;*/
    transition: filter 0.5s linear; 
    filter: brightness(1);
}
.enterButtonContainer:hover {
    filter: brightness(1.3);
    -webkit-filter: brightness(1.3);
    -moz-filter: brightness(1.3);
    -o-filter: brightness(1.3);
    -ms-filter: brightness(1.3);
    cursor: pointer;    
}
.redDiamondButton:hover {
    filter: brightness(1.4);
    -webkit-filter: brightness(1.4);
    -moz-filter: brightness(1.4);
    -o-filter: brightness(1.4);
    -ms-filter: brightness(1.4);
    cursor: pointer;    
}
.yellowDiamondButton:hover {
    filter: brightness(1.15);
    -webkit-filter: brightness(1.15);
    -moz-filter: brightness(1.15);
    -o-filter: brightness(1.15);
    -ms-filter: brightness(1.15);
    cursor: pointer;    
}

.enterButtonImage {
    position: absolute;
    width: 100%;
    height: 100%;
    
    background-position-x: center;
    background-position-y: top;
    background-repeat: no-repeat;

    background-size: 100% !important;
	-webkit-background-size: 100% !important;

    border: 0px;
    outline: none;
    filter: drop-shadow(1px 1px 0 black)
            drop-shadow(-1px 1px 0 black)
            drop-shadow(1px -1px 0 black)
            drop-shadow(-1px -1px 0 black)
            drop-shadow(0px 5px 5px black);
}
.blueDiamondButton .enterButtonImage {
    filter: hue-rotate(110deg)
            drop-shadow(1px 1px 0 black)
            drop-shadow(-1px 1px 0 black)
            drop-shadow(1px -1px 0 black)
            drop-shadow(-1px -1px 0 black)
            drop-shadow(0px 5px 5px black);
}
.deepBlueDiamondButton .enterButtonImage {
    filter: hue-rotate(120deg)
            drop-shadow(1px 1px 0 black)
            drop-shadow(-1px 1px 0 black)
            drop-shadow(1px -1px 0 black)
            drop-shadow(-1px -1px 0 black)
            drop-shadow(0px 5px 5px black);
}
.purpleDiamondButton .enterButtonImage {
    filter: hue-rotate(160deg)
            drop-shadow(1px 1px 0 black)
            drop-shadow(-1px 1px 0 black)
            drop-shadow(1px -1px 0 black)
            drop-shadow(-1px -1px 0 black)
            drop-shadow(0px 5px 5px black);
}
.pinkDiamondButton .enterButtonImage {
    filter: hue-rotate(210deg)
            drop-shadow(1px 1px 0 black)
            drop-shadow(-1px 1px 0 black)
            drop-shadow(1px -1px 0 black)
            drop-shadow(-1px -1px 0 black)
            drop-shadow(0px 5px 5px black);
}
.redDiamondButton .enterButtonImage {
    filter: hue-rotate(260deg)
            saturate(2)
            contrast(1.2)
            drop-shadow(1px 1px 0 black)
            drop-shadow(-1px 1px 0 black)
            drop-shadow(1px -1px 0 black)
            drop-shadow(-1px -1px 0 black)
            drop-shadow(0px 5px 5px black);
}
.orangeDiamondButton .enterButtonImage {
    filter: hue-rotate(310deg)
            saturate(3)
            drop-shadow(1px 1px 0 black)
            drop-shadow(-1px 1px 0 black)
            drop-shadow(1px -1px 0 black)
            drop-shadow(-1px -1px 0 black)
            drop-shadow(0px 5px 5px black);
}
.yellowDiamondButton .enterButtonImage {
    filter: hue-rotate(315deg)
            brightness(1.3)
            drop-shadow(1px 1px 0 black)
            drop-shadow(-1px 1px 0 black)
            drop-shadow(1px -1px 0 black)
            drop-shadow(-1px -1px 0 black)
            drop-shadow(0px 5px 5px black);
}

.greenDiamondButton1 {
    background-image: url(images/greenDiamondButton100x39.png);
}
.greenDiamondButton2 {
    background-image: url(images/greenDiamondButton150x58.png);
}
.greenDiamondButton3 {
    background-image: url(images/greenDiamondButton200x78.png);
}
.greenDiamondButton4 {
    background-image: url(images/greenDiamondButton300x117.png);
}
.greenDiamondButton5 {
    background-image: url(images/greenDiamondButton486x189.png);
}

.enterButtonText {
    position: absolute;    
    left: 15%;
    height: 100%;
    width: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: white;
    text-transform: uppercase;
    font-family: 'Trajan Pro Button';
    font-weight: bold;
	letter-spacing: normal;
}
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

