@import url("https://fonts.googleapis.com/css?family=Baloo+Paaji|Open+Sans:300,300i,400,400i,600,600i,700,700i");

.speakerCloseMed {
  position: absolute;
  width: 50px;
  height: 50px;
  background: url(../imgs/sclose.png) center center no-repeat;
  top: 20px;
  right: 20px;
  z-index: 5000000;
  cursor: pointer;
}

html
{
  background-color: #695aa6;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

#spin-the-wheel {
  width: 600px;
  height: 600px;
  overflow: hidden;
  margin: 50px auto;
  position: relative;
  background-color: #695aa6;
  margin-top: calc(18% - 200px);
}

#pointer-container {
  width: 100%;
  height: 100%;
  position: absolute;
}

#pointer {
  width: 10%;
  height: 10%;
  border-radius: 10% 50% 50% 50%;
  transform: rotate(225deg);
  margin: 0 45%;
  position: absolute;
  border: 5px solid #28204d;
  background-color: #ffffff;
  z-index: 1000;
  -webkit-box-shadow: -1px -6px 6px 3px rgba(0,0,0,0.43);
  -moz-box-shadow: -1px -6px 6px 3px rgba(0,0,0,0.43);
  box-shadow: -1px -6px 6px 3px rgba(0,0,0,0.43);

}

#wheel-outer {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #50428e;
  position: absolute;
  border: 3px solid #786dad !important;
}

#wheel-inner {
  width: 85%;
  height: 85%;
  margin: 7.5%;
  border-radius: 50%;
  position: absolute;
  -webkit-box-shadow: 0px 0px 34px -2px rgba(0,0,0,0.42);
  -moz-box-shadow: 0px 0px 34px -2px rgba(0,0,0,0.42);
  box-shadow: 0px 0px 34px -2px rgba(0,0,0,0.42);
  border: 3px solid #28204d !important;
}

#diameter-container {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 200;
}

.diameter {
  width: 50%;
  height: 100%;
  transform-origin: calc(100% - 2px) 50%;
  position: absolute;
  border-right: 4px solid #28204d !important;
}

#cirlce-light-container {
  width: 100%;
  height: 100%;
  position: absolute;
}

.cirlce-light {
  width: 8%;
  height: 8%;
  border-radius: 50%;
  margin: 7%;
  position: absolute;
  transform-origin: 537.5% 537.5%;
  border: 6px solid #50428e;
  box-sizing: border-box;
}

.cirlce-light-color-1 {
  background-color: #85cdff;
}

.cirlce-light-color-2 {
  background-color: orange;
}

#price-item-container {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 200;
}

.price-item {
  width: 100%;
  height: 50%;
  position: absolute;
  display: flex;
  justify-content: center;
  transform-origin: bottom;

}

.price-item-content {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  margin-top: 3%;
  writing-mode: vertical-lr;
}

#start-btn-container {
  width: 100%;
  height: 100%;
  position: absolute;

}

#start-btn {
  width: 30%;
  height: 30%;
  position: absolute;
  border-radius: 50%;
  margin: 35%;
  background-color: #fff;
  background-image: url(../imgs/gcstart.png);
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}



.btn-click-await {
  border-style: outset;
}

.btn-clicked {
  border-style: inset;
}

#start-btn-content-1 {
  font-size: 1.5rem;
  font-weight: 900;
}

#start-btn-content-2 {
  font-size: 2.5rem;
  font-weight: 900;
}

#sector-container {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 100;
  transform: rotate(-45deg);
}

.sector-opacity {
  opacity: 0.6;
}

.sector-opacity-win {
  opacity: 0.3;
}

.sector-hidden {
  width: 100%;
  height: 50%;
  border-radius: 50%/100% 100% 0% 0%;
  transform-origin: bottom;
  position: absolute;
  overflow: hidden;/
}

.sector-display {
  width: 100%;
  height: 100%;
  border-radius: 50%/100% 100% 0% 0%;
  transform-origin: bottom;
  transform: rotate(135deg);
  position: absolute;
}


* {

}

#price-item-1
{
  background: url(../imgs/gc1.png) center center no-repeat;
}
#price-item-2
{
  background: url(../imgs/gc2.png) center center no-repeat;
}
#price-item-3
{
  background: url(../imgs/gc3.png) center center no-repeat;
}
#price-item-4
{
  background: url(../imgs/gc4.png) center center no-repeat;
}
#price-item-5
{
  background: url(../imgs/gc5.png) center center no-repeat;
}
#price-item-6
{
  background: url(../imgs/gc6.png) center center no-repeat;
}
#price-item-7
{
  background: url(../imgs/gc7.png) center center no-repeat;
}
#price-item-8
{
  background: url(../imgs/gc8.png) center center no-repeat;
}


@media (max-width: 990px) {


  #spin-the-wheel {
    margin-top: 200px;
  }

  }


  @media (max-width: 724px) {


    #spin-the-wheel {
      width: 360px;
      height: 360px;
      overflow: hidden;
      margin: 50px auto;
      position: relative;
      background-color: #695aa6;
      margin-top: calc(80% - 180px);
    }
  
    #start-btn {
      background-image: url(../imgs/gcstartM.png);
    }
  
  
  
    #price-item-1
    {
      background: url(../imgs/gc1M.png) center center no-repeat;
    }
    #price-item-2
    {
      background: url(../imgs/gc2M.png) center center no-repeat;
    }
    #price-item-3
    {
      background: url(../imgs/gc3M.png) center center no-repeat;
    }
    #price-item-4
    {
      background: url(../imgs/gc4M.png) center center no-repeat;
    }
    #price-item-5
    {
      background: url(../imgs/gc5M.png) center center no-repeat;
    }
    #price-item-6
    {
      background: url(../imgs/gc6M.png) center center no-repeat;
    }
    #price-item-7
    {
      background: url(../imgs/gc7M.png) center center no-repeat;
    }
    #price-item-8
    {
      background: url(../imgs/gc8M.png) center center no-repeat;
    }
    
    }

    .carkText
    {
      text-align: center; 
      font-size: 2.5em; 
      margin-top: 20px;
      color: #fff;
      font-family: 'Baloo Paaji';
      line-height: 1;
      width: 90%;
      margin-left: 5%;
    }