/*************************************
FONTS
************************************/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;900&display=swap');


html,
body {
	font-family: 'Montserrat', sans-serif;
	font-weight:400 !important;
	
}

/*************************************
WHILE I DESIGN
************************************/
/*WARPPER*/
#promo_wrapper,
#content {
	_overflow: visible;
}

/*************************************
PAGE COLORS and BKG
************************************/
html{
	background-color:#000000 !important;
}
#main_nav {
 display: none !important; /*DG: remove navigation*/
}
/*************************************
WRAPPER
************************************/
#promo_wrapper {
    margin: 0 auto 0 auto; /*DG: remove top/bottom margin*/
}

/*************************************
PAGE FADE IN
************************************/
/*#root*/
#page_wrapper{
 opacity: 0; /*set to transparent*/
 -webkit-animation-name: pagefadein;
          animation-name:pagefadein;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-duration: .25s;
          animation-duration: .25s;
 animation-delay: .25s;
 
  
}
/*fade in*/
@-webkit-keyframes pagefadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes pagefadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*************************************
RESIZE ELEMENTS: BOTH DESKTOP AND MOBILE ARE THE SAME
************************************/

/*DG: MOBILE AND DESKTOP ARE THE SAME SIZE - THE MOBILE SIZE*/

#promo_wrapper {
    width: 410px;
}
#content {
 width: 410px !important; 
 height: 980px !important; 
 background-color: #000000 !important; 
}

.page-visual img, 
.page-content img,
.view-mobile img,
.view-phone img,
.view-desktop img {
	width: 410px;
}

@media only screen and (max-width : 767px) {
 #promo_wrapper {
    width: 410px;
}
#content {
 /*specify to avaoid the flash*/
 width: 410px !important; 
 height: 980px !important; 
 background-color: #000000 !important; 
}
.page-visual img, 
.page-content img,
.view-mobile img,
.view-phone img,
.view-desktop img {
	width: 410px;
}
}

/*************************************
BOTTOM NAV
************************************/
/*bottom nav styling*/
#bottom_nav {
    width: 410px;
 font-size: 11px !important; 
 line-height: 13px;
 color: #ffffff;
 text-align: center;
 background: rgba(0, 0, 0, .65);
 margin-top: -250px;
 position: relative !important; 
 z-index: 999999 !important;
 padding: 10px 0px 10px 0px !important;
}


#bottom_nav p {
    font-size: 11px !important; 
    line-height: 14px;
    padding: 0px 20px 10px 20px;
}

#bottom_nav hr {
border: 0;
    height: 1px;
    background: rgba(255, 255, 255, .5);
 padding: 0;
 margin: 0px 10px 10px 10px;
}

#bottom_nav #links {
    width: 410px;
    padding: 0px 0px 5px 0px;
 
 font-size: 10px !important; 
    line-height: 12px;
 text-decoration: none !important;
}

#bottom_nav a:link, 
#bottom_nav a:active, 
#bottom_nav a:visited {
    color: #ffffff;
 text-decoration: none !important;
}

#bottom_nav #links ul li{
 border-right: solid 1px #ffffff; 
 margin-right: 0px !important;
 padding-right: 0px !important;
}

#bottom_nav #links ul li:last-child {
    border-right: none; 
 
 margin-right: 0px;
}

#poweredby,
#administeredby {
 display: none !important;
}

@media only screen and (max-width : 767px) {
#bottom_nav {
    width: 410px !important;
}
}




/************************************************
Dollar General: GAME - THERE ARE NO OTHER PAGES IN THIS 
*************************************************/
/*size and position of the game board*/
#game_cards {
    position: absolute;
    top: 340px;
    left: 15px;
 padding: 10px;
    width: 360px;
    height: 370px;
 height: auto; /*making this auto as to match*/
 /*z-index: 999999 !important; NOT SURE I NEED THIS make the cards on top*/
 -webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
 
}

.card {
 width: 105px !important;
    height: 105px !important;
    
 float: left !important;
}

.card-wrapper {
    width: 105px;
    height: 105px;
    perspective: 600px;
    float: left;
    padding-top: 7.5px !important;
    padding-left: 7.5px !important;
    padding-bottom: 7.5px !important;
    padding-right: 7.5px !important;

    display: block !important;
    transform-style: preserve-3d;
}

.card-wrapper img {
  width: 105px !important;
    height: 105px !important;
 
}


.card-front {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
 
}

/*NO SHADOW ON BASKETBALL*/
.card-back {
    webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0) !important;
    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0) !important;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0) !important;
    transition: transform .5s ease 0s;
}

/*SHADOW ON CARD*/
.card-front {
    webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .5) !important;
    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .5) !important;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,.5) !important;
    transition: transform .5s ease 0s;
}

/*ADD BORDER TO CARD*/
/*.card-front img {
 border: solid 4px #7d5c56;
 width: 105px !important;
    height: 105px !important;
 -webkit-border-radius: 10px !important;
-moz-border-radius: 10px !important;
border-radius: 10px !important;
 
}
*/

.card-front img{

 border: solid 0 aqua;
 -webkit-border-radius: 8px !important;
-moz-border-radius: 8px !important;
border-radius: 8px !important;
}



.win-flash img{
  animation-name: __blink; /*NOT FLASHING*/
  animation-duration: 1s;
  animation-iteration-count: 5;
 box-sizing: border-box;
 /**/
 animation-delay: 1s;
 
}

@keyframes blink { 
 50% {
  border: 6px solid #0d9087;
  }
}


@media only screen and (max-width: 767px) {
    #game_cards {
        position: absolute;
        top: 340px;
    left: 15px;
        transform: scale(1);
        -webkit-transform: scale(1);
        transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
    }
}

/*************************************
PLAY SCREEN
************************************/


#game_match .page-content #match_game_content {
    position: absolute;
    top: 0 !important;
    left: 0 !important;
    height: 2000px !important;
    width: 410px !important;
    padding: 0;
    display: block;
}
/*********************************
Brand LOGO
*********************************/
#game_match .page-content #match_game_content #title_copy div:nth-child(1) {
width: 410px;
 height: 55px;
 display: block;
 position: absolute;
 top: 0;
 z-index: 99999;
 /*ANIMATE IN*/
  animation-name: brandLogoFlyIn;
  animation-duration: .5s;
  animation-fill-mode: both;
 animation-delay: .5s;
 /**/
 _border: solid 1px red;
}
@keyframes brandLogoFlyIn {
   0% {
   top: -100px;
  }
  100% {
   top: 0;
 
  }
}
/*********************************
PlayToWin LOGO
*********************************/
#game_match .page-content #match_game_content #title_copy div:nth-child(2) {
 width: 410px;
 height: 273px;
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 z-index: 99999;
 /*ANIMATE IN*/
  animation-name: playLogoFlyIn;
  
  animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: .75s;
 /**/
 _border: solid 1px blue;
}
@keyframes playLogoFlyIn {
   0% {
   top: -273px;
  }
  100% {
   top: 0;
 
  }
}

/*********************************
Play Instructions
*********************************/
#game_match .page-content #match_game_content #title_copy div:nth-child(3) {
 background: rgba(255, 255, 255, .5); 
position: absolute;
    top: 245px !important;
    left: 0 !important;
    height: 90px;
    width: 410px;
    padding: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
 /*FADE COPY IN*/
 opacity: 0; /*set to transparent*/
          animation-name: instructionsFadeIn;
          animation-timing-function: ease-out;
          animation-fill-mode: both;
          animation-duration: .5s;
 animation-delay: 1s;
 /**/
 _border: solid 1px yellow;
}

@keyframes instructionsFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


#game_match .page-content #match_game_content #title_copy h1 {
 font-size: 20px;
 font-weight: 400;
 text-align: center;
}
#game_match .page-content #match_game_content #title_copy h1 strong{
 font-weight: 600;
}


/*************************************
WIN SCREENS
************************************/

#game_match .page-content #win_app_integration {
    height: auto !important;
    width: 410px;
    padding: 0;
 background-color: aqua;
}
/*********************************
Win Message
*********************************/
#game_match .page-content #win_app_integration #ai_win_screen_result_copy div:nth-child(1) {
    position: absolute;
    top: 65px;
    width: 100%;
 /**/
 _border: solid 1px red;
}
/*********************************
Prize Message
*********************************/
#game_match .page-content #win_app_integration #ai_win_screen_result_copy div:nth-child(2) {
background: rgba(255, 255, 255, .5); 
position: absolute;
  top: 165px;
    height: 150px;
    width: 410px;
    padding: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
 /**/
 _border: solid 1px pink;
}
/*********************************
Call To action
*********************************/
#game_match .page-content #win_app_integration #ai_win_screen_result_copy div:nth-child(3) {
    margin: 0px;
    position: absolute;
    top: 500px;
    width: 100%;
 /**/
 _border: solid 1px aqua;
}

#game_match .page-content #win_app_integration  #ai_win_screen_button_1 {
 position: absolute;
    top: 570px;
    width: calc(100% - 66px);
    margin: 10px 20px 10px 20px;
    text-align: center;
 background-color: #000000 !important;
 color: #ffffff;
 padding: 15px;
    border: solid 1px #ffffff !important;
 -webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
 font-weight: 600;
}

/*STYLES*/
#game_match .page-content #win_app_integration #ai_win_screen_result_copy h1 {
 font-size: 70px;
 text-transform: uppercase;
 font-weight: 900;
}

#game_match .page-content #win_app_integration #ai_win_screen_result_copy h2 {
 margin-bottom: 20px;
 font-size: 52px;
 font-weight: 900;
}

/*OUTLINE COPY*/
#win_app_integration #ai_win_screen_result_copy h1,
#win_app_integration #ai_win_screen_result_copy h2
{
 text-shadow: rgb(255, 255, 255) 4px 0px 0px, rgb(255, 255, 255) 3.87565px 0.989616px 0px, rgb(255, 255, 255) 3.51033px 1.9177px 0px, rgb(255, 255, 255) 2.92676px 2.72656px 0px, rgb(255, 255, 255) 2.16121px 3.36588px 0px, rgb(255, 255, 255) 1.26129px 3.79594px 0px, rgb(255, 255, 255) 0.282949px 3.98998px 0px, rgb(255, 255, 255) -0.712984px 3.93594px 0px, rgb(255, 255, 255) -1.66459px 3.63719px 0px, rgb(255, 255, 255) -2.51269px 3.11229px 0px, rgb(255, 255, 255) -3.20457px 2.39389px 0px, rgb(255, 255, 255) -3.69721px 1.52664px 0px, rgb(255, 255, 255) -3.95997px 0.56448px 0px, rgb(255, 255, 255) -3.97652px -0.432781px 0px, rgb(255, 255, 255) -3.74583px -1.40313px 0px, rgb(255, 255, 255) -3.28224px -2.28625px 0px, rgb(255, 255, 255) -2.61457px -3.02721px 0px, rgb(255, 255, 255) -1.78435px -3.57996px 0px, rgb(255, 255, 255) -0.843183px -3.91012px 0px, rgb(255, 255, 255) 0.150409px -3.99717px 0px, rgb(255, 255, 255) 1.13465px -3.8357px 0px, rgb(255, 255, 255) 2.04834px -3.43574px 0px, rgb(255, 255, 255) 2.83468px -2.82216px 0px, rgb(255, 255, 255) 3.44477px -2.03312px 0px, rgb(255, 255, 255) 3.84068px -1.11766px 0px, rgb(255, 255, 255) 3.9978px -0.132717px 0px;
}

#game_match .page-content #win_app_integration #ai_win_screen_result_copy h3{
 font-size: 22px;
 font-weight: 600;
}

#game_match .page-content #win_app_integration #ai_win_screen_result_copy h4{
 font-size: 17px;
 padding: 8px 10px 0 10px;
 font-weight: 400;
}

/*************************************
LOSE SCREENS
************************************/

#game_match .page-content #lose_app_integration {
    height: auto !important;
    width: 410px;
    padding: 0;
 background-color: yellow;
}



#game_match .page-content #lose_app_integration #ai_lose_screen_result_copy div:nth-child(1) {
    position: absolute;
    top: 320px;
    width: 100%;
 /**/
 _border: solid 1px red;
}

#game_match .page-content #lose_app_integration #ai_lose_screen_result_copy div:nth-child(2) {
   background: rgba(255, 255, 255, .5);
    position: absolute;
    top: 395px !important;
    left: 0 !important;
    height: 115px;
    width: 410px;
    padding: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
 /**/
 _border: solid 1px blue;
}

#game_match .page-content #lose_app_integration #ai_lose_screen_button_1 {
 position: absolute;
    top: 530px;
    width: calc(100% - 66px);
    margin: 10px 20px 10px 20px;
    text-align: center;
 background-color: #000000 !important;
 color: #ffffff;
 padding: 15px;
    border: solid 1px #ffffff !important;
 -webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
 font-weight: 600;
}

/*STYLES*/
#game_match .page-content #lose_app_integration #ai_lose_screen_result_copy h1 {
    
    font-size: 43px;
    font-weight: 700;
    color: #000000;
 text-shadow: rgb(255, 255, 255) 4px 0px 0px, rgb(255, 255, 255) 3.87565px 0.989616px 0px, rgb(255, 255, 255) 3.51033px 1.9177px 0px, rgb(255, 255, 255) 2.92676px 2.72656px 0px, rgb(255, 255, 255) 2.16121px 3.36588px 0px, rgb(255, 255, 255) 1.26129px 3.79594px 0px, rgb(255, 255, 255) 0.282949px 3.98998px 0px, rgb(255, 255, 255) -0.712984px 3.93594px 0px, rgb(255, 255, 255) -1.66459px 3.63719px 0px, rgb(255, 255, 255) -2.51269px 3.11229px 0px, rgb(255, 255, 255) -3.20457px 2.39389px 0px, rgb(255, 255, 255) -3.69721px 1.52664px 0px, rgb(255, 255, 255) -3.95997px 0.56448px 0px, rgb(255, 255, 255) -3.97652px -0.432781px 0px, rgb(255, 255, 255) -3.74583px -1.40313px 0px, rgb(255, 255, 255) -3.28224px -2.28625px 0px, rgb(255, 255, 255) -2.61457px -3.02721px 0px, rgb(255, 255, 255) -1.78435px -3.57996px 0px, rgb(255, 255, 255) -0.843183px -3.91012px 0px, rgb(255, 255, 255) 0.150409px -3.99717px 0px, rgb(255, 255, 255) 1.13465px -3.8357px 0px, rgb(255, 255, 255) 2.04834px -3.43574px 0px, rgb(255, 255, 255) 2.83468px -2.82216px 0px, rgb(255, 255, 255) 3.44477px -2.03312px 0px, rgb(255, 255, 255) 3.84068px -1.11766px 0px, rgb(255, 255, 255) 3.9978px -0.132717px 0px;
}


#game_match .page-content #lose_app_integration #ai_lose_screen_result_copy h3 {
    font-size: 18px;
 padding: 0 30px 0 30px;
    font-weight: 600;
}

/************************************************
WHEN THE GAME IS DONE: class .result-game-done added to the main container #game_match
*************************************************/

/*********************************
GAME pieces
*********************************/

/*ANYTHING GAME RELATED IS INSIDE THE SPECIFIC CSS*/




/*********************************
PlayToWin LOGO
*********************************/
#game_match.result-game-done .page-content #match_game_content #title_copy div:nth-child(2) {
 /*ANIMATE OUT*/
  animation-name: playLogoFlyOut;
 animation-duration: .5s;
 animation-delay: 0s;
 /**/
 _border: solid 1px blue;
}
@keyframes playLogoFlyOut {
   0% {
   top: 0px;
  }
  100% {
   top: -273px;
 
  }
}
/*********************************
Play Instructions
*********************************/
#game_match.result-game-done .page-content #match_game_content #title_copy div:nth-child(3) {
 /*FADE COPY IN*/
          animation-name: instructionsFadeOut;
          animation-fill-mode: both;
          animation-duration: .5s;
 animation-delay: .5s;
 /**/
 _border: solid 1px yellow;
}

@keyframes instructionsFadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


/*********************************
Win Message
*********************************/
#game_match.result-game-done .page-content #win_app_integration #ai_win_screen_result_copy div:nth-child(1) {
 /*ANIMATE IN*/
  animation-name: winMsgFlyIn;
  animation-duration: .5s;
  animation-fill-mode: both;
 animation-delay: .5s;
 /**/
 _border: solid 1px red;
}
@keyframes winMsgFlyIn {
   0% {
   top: -100px;
  }
  100% {
   top: 65px;
 
  }
}
/*********************************
Prize Message
*********************************/
#game_match.result-game-done .page-content #win_app_integration #ai_win_screen_result_copy div:nth-child(2) {
/*FADE COPY IN*/
 opacity: 0; /*set to transparent*/
          animation-name: prizeFadeIn;
          animation-timing-function: ease-out;
          animation-fill-mode: both;
          animation-duration: .5s;
 animation-delay: 1s;
}

@keyframes prizeFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*********************************
Call To action
*********************************/
#game_match.result-game-done .page-content #win_app_integration #ai_win_screen_result_copy div:nth-child(3) {
 /*ANIMATE IN*/
  animation-name: callActionFlyIn;
  animation-duration: .5s;
  animation-fill-mode: both;
 animation-delay: .5s;
}
@keyframes callActionFlyIn {
   0% {
   top: 2000px; /*FROM BELOW*/
  }
  100% {
   top: 500px;
 
  }
}
/*********************************
Win Btn One
*********************************/
#game_match.result-game-done .page-content #win_app_integration #ai_win_screen_button_1 {
 /*ANIMATE IN*/
  animation-name: winBtnOneFlyIn;
  animation-duration: .5s;
  animation-fill-mode: both;
 animation-delay: .5s;
}
@keyframes winBtnOneFlyIn {
   0% {
   top: 2000px; /*FROM BELOW*/
  }
  100% {
   top: 570px;
 
  }
}


/*********************************
Lose Result Screen
*********************************/
#game_match.result-game-done .page-content #game_results_screen {
 /*ANIMATE IN*/
  animation-name: resultScreenIn;
  animation-duration: .5s;
  animation-fill-mode: both;
 animation-delay: 0;
 /**/
 _border: solid 1px red;
 left: 0px; /*Set the form off the page*/
}
/*fade in*/
@-webkit-keyframes resultScreenIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*********************************
Lose Message
*********************************/
#game_match.result-game-done .page-content #lose_app_integration #ai_lose_screen_result_copy div:nth-child(1) {
 /*ANIMATE IN*/
  animation-name: loseMsgFlyIn;
  animation-duration: .5s;
  animation-fill-mode: both;
 animation-delay: .5s;
 /**/
 _border: solid 1px red;
}
@keyframes loseMsgFlyIn {
   0% {
   top: -100px;
  }
  100% {
   top: 320px;
 
  }
}

/*********************************
NoPrize Message
*********************************/
#game_match.result-game-done .page-content #lose_app_integration #ai_lose_screen_result_copy div:nth-child(2) {
/*FADE COPY IN*/
 opacity: 0; /*set to transparent*/
          animation-name: noPrizeFadeIn;
          animation-timing-function: ease-out;
          animation-fill-mode: both;
          animation-duration: .5s;
 animation-delay: 1s;
}

@keyframes noPrizeFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*********************************
Lose Btn One
*********************************/
#game_match.result-game-done .page-content #lose_app_integration #ai_lose_screen_button_1 {
 /*ANIMATE IN*/
  animation-name: loseBtnOneFlyIn;
  animation-duration: .5s;
  animation-fill-mode: both;
 animation-delay: .5s;
}
@keyframes loseBtnOneFlyIn {
   0% {
   top: 2000px; /*FROM BELOW*/
  }
  100% {
   top: 530px;
  }
}