/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

* {
    margin: 0;
    padding: 0;
    font-size: 100%;
	word-wrap: break-word;
	box-sizing: border-box;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}


audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}


/* game section */

#spin-to-win-container {
    width: 950px;
    height: 100%;
    text-align: center;
    box-sizing: border-box;
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: -200px auto;
}

#spin-to-win-container-2 {
  width: 950px;
  height: 100%;
  text-align: center;
  box-sizing: border-box;
  position: relative;
  top: 35px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: -200px auto;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body { background: url(../images/background.png) no-repeat; background-size: cover; overflow-x: hidden; }
.main-container { position: relative; z-index: 10; overflow: visible; }
video { /*width: 100%; position: fixed;*/ width: 100vw; /* Could also use width: 100%; */
    height: 100vh;
    object-fit: cover;
    position: fixed; /* Change position to absolute if you don't want it to take up the whole page */
    left: 0px;
    top: 0px;
    z-index: -1;}
.header { display: block; margin: 30px auto 100px; }
.bottom { display: block; margin: 110px auto 0; max-width: 100%; }

.pointer { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 1; width: 200px; top: 121px;}
.power { position: fixed; left: 20px; top: 20px; }

.shadow { position: absolute; left: 50%; bottom: -50px; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: -10; width: 800px;}

.coins { position: absolute; left: 50%; bottom: -80px; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: -10;}
.coins-mobile { display: none; width: 100%; position: absolute; bottom: 0; z-index: -11;}
.bottom-mobile { display: none; width: 90%; margin: 200px auto 0; }

@media only screen and (max-width: 1920px) { 

  #spin-to-win-container { width: 800px; }
  #spin-to-win-canvas { width: 800px; }
  .pointer { top: 100px; }

}

@media only screen and (max-width: 1024px) { 

    .power { display: none; }

}

@media only screen and (max-width: 1000px) {
    .shadow-top { width: 130%; }
    .header { margin: 10px auto 110px }
    .bottom { margin: 100px auto 0; display: none;}
    .bottom-mobile { display: block; margin-top: 130px; }
    .coins { width: 150%; display: none; }
    .coins-mobile { display: block; }

}

@media only screen and (max-width: 820px) { 
    .coins { width: 100%; bottom: -30px; }
}

@media only screen and (max-width: 800px) { 

    #spin-to-win-container { width: 700px; }
    .shadow { width: 90%; top: 20px; }
    .pointer { top: 88px; width: 150px; }

}

@media only screen and (max-width: 768px) { 

    .header { width: 90%; }
    #spin-to-win-container { width: 600px; }
    .shadow { width: 600px; top: 0px; }
    .pointer { top: 77px; width: 120px; }
    .bottom-mobile { margin: 150px auto 0; }

}

@media only screen and (max-width: 700px) { 

    #spin-to-win-container { width: 600px; }

}

@media only screen and (max-width: 600px) { 

    #spin-to-win-container { width: 500px; }
    .header {  margin-bottom: 130px; }
    .pointer { top: 64px; width: 100px; }
    .shadow { width: 100%; top: 0; }
    .bottom-mobile { margin: 170px auto 0; }
    .coins { display: none; }
}


@media only screen and (max-width: 500px) {  

    #spin-to-win-container { width: 400px; }
    .header {  margin-bottom: 150px; }
    .pointer { top: 52px; width: 70px; }

}


@media only screen and (max-width: 400px) {   

   #spin-to-win-container { width: 360px; }
    .header {  margin-bottom: 150px; }
    .pointer { top: 47px; width: 70px; }

}

@media only screen and (max-width: 360px) {  

    #spin-to-win-container { width: 300px; }
    .header { margin-bottom: 160px; }
    .pointer { top: 41px; width: 40px; }
    .bottom-mobile { margin: 180px auto 0; }

}