@font-face{font-family:'Poppins'; src:url("../css/fonts/Poppins-Regular.ttf") format("truetype"); font-weight:normal; font-style:normal;}
@font-face{font-family:'Poppins'; src:url("../css/fonts/Poppins-SemiBold.ttf") format("truetype"); font-weight:600; font-style:normal;}
@font-face{font-family:'Poppins'; src:url("../css/fonts/Poppins-Bold.ttf") format("truetype"); font-weight:bold; font-style:normal;}

html{font-size:20px;background:url('../images/slot_bg1.jpg') no-repeat center/cover;background-attachment:fixed;font-family: Poppins,sans-serif;color:#fff;margin:0;padding:0;min-height:100%;overflow:hidden;}
.content{overflow:hidden;}
.image-wrap{position:absolute;bottom:0;top:0;width:45%;animation: imageIn .8s ease-in, floatingBig 3s .8s ease-in-out infinite;right:10%;}
.image-wrap img{position:absolute;bottom:0;right:0;max-width:100%; max-height:90%;min-height:70%;/*transform:translateX(-50%);left:50%;*/}
.image-wrap .image-animate{animation: fade 3s ease-in-out infinite;}
.content-wrap{z-index:999;position:absolute;left:10%;width:40%;transform:translateY(-50%);top:50%;line-height:1.1}
.logo{width:100%; max-height:20vh;animation: textIn .5s ease-in;/*, floating 5s ease-in-out infinite;*/}
h2{font-size:4vw;margin:0 0 10px;color:#fde741;text-shadow:2px 2px 5px #000000;/*background: #fcfae3;background: linear-gradient(to bottom, #d8c345 0%, #fcfae3 25%, #bcad44 26%, #d3c03b 50%, #d8c345 51%, #fcfae3 75%, #bcad44 76%, #d3c03b 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;*/animation: textIn .7s ease-in/*, blink1 2s 1s ease-in-out infinite;*/}
a{color:#fff; transition:.5s; font-size:.8rem; text-decoration:none;display:inline-block;text-align:center;margin-top:35px;}
a + a{margin-left:30px;}
a:hover{color:#d8c343;}
a img{display:block;width:90px;animation: floating 1s ease-in-out infinite;margin:0 auto 30px;transition:.3s;border-radius:50%;box-shadow:0 20px 20px -10px #000000bb;}
a:hover img{box-shadow:0 0 10px #ad792e;}
a + a img{animation: floating 1s .5s ease-in-out infinite;}
p{animation: textIn 1s ease-in;}
@keyframes fade {
	25% {opacity:.5; transform:scale(.95)}
	50% {opacity:1; transform:scale(1)}
	60% {opacity:.5; transform:scale(.95)}
	70% {opacity:1; transform:scale(1)}
	80% {opacity:.5; transform:scale(.95)}
	100% {opacity:1; transform:scale(1)}
}
@keyframes floating {
    from { transform: translate(0,  0px)}
    50%  { transform: translate(0, 15px)}
    to   { transform: translate(0, -0px)}    
}

@keyframes floatingBig {
    from { transform: translate(0,  0px)}
    50%  { transform: translate(0, 20px)}
    to   { transform: translate(0, -0px)}    
}
@keyframes imageIn {
    from { transform: translate(0, 100%);opacity:0;}
    to  { transform: translate(0, 0);opacity:1;}   
}
@keyframes textIn {
    from { transform: translate(-100%,0);opacity:0;}
    to  { transform: translate(0, 0);opacity:1;}   
}
@media (max-width:1439px){
	.content-wrap{left:5%;width:50%;}
	.image-wrap{right:5%;width:50%;}
}
@media (max-width:991px){
	h2{font-size:2rem;}
	.image-wrap{right:5%;width:55%;}
}
@media (max-width:767px){
	html{font-size:16px;overflow:auto;background-position:left center;}
	h2{font-size:2.5rem;max-width:500px;margin:0 auto 10px;}
	.content-wrap{position:relative;right:0;left:0;width:auto;text-align:center;transform:translate(0);padding:0 20px;max-width:600px;margin:0 auto;}
	.image-wrap{position:relative; width:80%;margin:0 auto;padding:15px 0 0;max-height:554px;overflow:hidden;box-sizing:border-box;}
	.image-wrap img{display:block;position:relative;width:100%;max-width:400px;min-height:auto;top:0;bottom:auto;margin:0 auto;}
}