/*@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');*/
/*@import url('https://fonts.googleapis.com/css?family=Libre+Franklin:400,600');*/
/*@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');*/
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
/*@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');*/
/*@import url('https://fonts.googleapis.com/css?family=Domine:400,700');*/
/*@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,700');*/
/*@import url('https://fonts.googleapis.com/css?family=Oswald');*/
/*@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:400,700&display=swap');*/
/****************************************
FONT and FONT SIZES:
****************************************/
html,
body {
	/*font-family: 'Open Sans', sans-serif;*/
	/*font-family: 'Libre Franklin', sans-serif;*/
	/*font-family: 'Nunito', sans-serif;*/
	font-family: 'Roboto', sans-serif;
	/*font-family: 'Merriweather', serif;*/
	/*font-family: 'Domine', serif;*/
	/*font-family: 'Playfair Display', serif;*/
	/*font-family: 'Oswald', sans-serif;*/
	/*font-family: 'Domine', serif;*/
	/*font-family: 'Roboto Slab', serif !important;*/
}
#register_form h1 {
	font-size:15px;
	line-height:20px;
	font-weight:700;
}
.checkboxStyle {
  font-size: 12px;
  line-height:15px;
}
#msg_alreadyentered h1,
#msg_comingsoon h1,
#msg_promoended h1,
#msg_thankyou h1 {
	font-size:36px;
	line-height:40px;
}
#msg_alreadyentered h2,
#msg_comingsoon h2,
#msg_promoended h2,
#msg_thankyou h2 {
	font-size:18px;
	line-height:22px;
}

/****************************************
MAIN NAV:
*****************************************/
#main_nav {
	background-color:#982b31 !important;
}
#main_nav a:link, 
#main_nav a:visited, 
#main_nav a:hover, 
#main_nav a:active 
{
	color: #ffffff;
}

#main_nav {
    font-size: 13px;
    line-height: 13px;
  
}
/****************************************
WARAPPER and MAIN CONTENT:
*****************************************/
#promo_wrapper 
{
	background-color: #000000 !important;
	color:#000000;
 /**/
 -webkit-box-shadow: 0px 0px 18px 0px rgba(0,0,0,0);
    -moz-box-shadow: 0px 0px 18px 0px rgba(0,0,0,0);
    box-shadow: 0px 0px 18px 0px rgba(0,0,0,0);
}

a:link, 
a:visited, 
a:active 
{
	color:#ffffff;
}
/*CONTENT*/
#content {
	background-color:#ffffff;
}
#content a:link, 
#content a:visited, 
#content a:active 
{
	color:#4A88D5;
}
/*************************************
FORM REGISTRATION LAYOUT
************************************/
#register_form,
#msg_alreadyentered, 
#msg_comingsoon, 
#msg_promoended, 
#msg_thankyou,
#msg_gamewon,
#redeem_form {
	/*white with black letters*/
	background-color: rgba(255, 255, 255, .85); 
	border: 1px solid #999999;
	color:#000000;
	/*black with white letters*/
	/*background-color: rgba(0, 0, 0, 0.35);
    border: 1px solid #FFFFFF;
	color:#000000;*/
}

#msg_alreadyentered h1,
#msg_comingsoon h1,
#msg_promoended h1,
#msg_thankyou h1 {
	/*white with black letters*/
	border-bottom: 1px solid #000000;
	/*black with white letters*/
	/*border-bottom: 1px solid #ffffff;*/
}
/**CHECKBOXES**/
#checkboxes_all {
	color:#000000;
}

/*************************************
FORM REGISTRATION PIECES COLORS
************************************/
.select-wrapper:after {
  	color: #4A88D5;
}
/* When the checkbox is checked, add a blue background */
.checkboxStyle input:checked ~ .checkmark {
  background-color: #4A88D5;
}
/****************************************
FOOTER:
*****************************************/
#bottom_nav 
{
	background-color: #000000 !important;
	color: #ffffff !important;
}
#bottom_nav a:link, 
#bottom_nav a:active, 
#bottom_nav a:visited 
{
	color: #e8172b !important;
}

/***************************************
TEXT SHADOWS
***************************************/
#main_nav,
#content {
	/*text-shadow: 0 0 3px #000000;*/
}

/***************************************
HEINZ
***************************************/
#main_nav,
#main_nav ul,
#promo_wrapper,
#content {
   width: 1280px !important;
    
}

#bottom_nav {
 width: calc(100% - 20px) !important;
 
}
#promo_wrapper {
    margin: 0 auto 0 auto;
}
.page-visual .view-desktop img,
#game_results_screen .view-desktop img {
 width: 1280px !important;
 height: auto;
}

/*SLOT*/

#game_board {
    position: absolute;
    z-index: 9999;
    left: 610px;
    top: 0px !important;
    width: 450px;
    height: 520px;
}

html {
    background-repeat: no-repeat;
   background-size: 4000px 1000px !important;
 background-position: center top;
    background-image: url("../images/match/game-match-sunkist/all/pagebkg.jpg");
    background-color: #000000 !important;
 background-attachment: scroll;
}





@media only screen and (max-width : 767px) {
html {
    background-repeat: no-repeat;
   background-size: 4000px 1028px !important;
 background-position: center top;
    background-image: none !important;
    background-color: #000000 !important;
 background-attachment: scroll;
}

#main_nav,
#main_nav ul,
#promo_wrapper,
#content {
   width: 410px !important;
    
}

#bottom_nav {
 width: calc(100% - 20px) !important;
 
}
#promo_wrapper {
    margin: 0 auto 0 auto;
}

#game_board {
    left: -20px;
    top: 238px !important;
    
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    transform: scale(.75);
}
#button_spin {
    left: 30px;
    top: 170px;
}
#button_spin .view-mobile img{
    width: 350px;
}

#slot_mask {
    position: absolute;
    z-index: 99999999;
    left: 0px;
    top: 0px;
    width: 410px;
}
}

/*TICKER*/
/*
#promo_wrapper #main_nav{
  display: inline-block;
  height: 130px;
 background: url(../images/match/game-match-macaroniandcheese/all/ticker.jpg) repeat bottom center; 
 background-repeat: repeat-x;
 background-size: 1111px 103px;
 background-color: #013ea9 !important;
  
  
}


#promo_wrapper #main_nav:after{
 height: 100px !important;
 margin-top: 30px !important;
 line-height: 100px;
 display: block;
 content: "";
 background: url(../images/match/game-match-macaroniandcheese/all/ticker.jpg) repeat bottom center; 
 background-repeat: repeat-x;
 background-size: 1111px 103px;
 background-color: #013ea9 !important;
 
 -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: ticker;
  animation-name: ticker;
  -webkit-animation-duration: 300s;
  animation-duration: 600s;
 width: 40000px !important;

 
}

@media only screen and (max-width : 767px) {
 
 #promo_wrapper #main_nav{
  
  height: 80px;
 background: url(../images/match/game-match-macaroniandcheese/all/ticker.jpg) repeat bottom center; 
 background-repeat: repeat-x;
 background-size: 555px 52px;
  
  
  
}


#promo_wrapper #main_nav:after{
 height: 50px !important;
 margin-top: 30px !important;
 line-height: 50px;
 display: block;
 content: "";
 background: url(../images/match/game-match-macaroniandcheese/all/ticker.jpg) repeat bottom center; 
 background-repeat: repeat-x;
 background-size: 555px 52px;
 background-color: #013ea9 !important;
 
 
 -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: ticker;
  animation-name: ticker;
  -webkit-animation-duration: 300s;
  animation-duration: 600s;
 width: 40000px !important;

 
}
}

@-webkit-keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

*/

/****************************************
MAIN NAV:
*****************************************/
#main_nav {
	background: rgba(0, 0, 0, 0) !important;
 position: absolute;
 top:70px;
 left:730px;
 z-index: 9999 !important;
}
#main_nav,
#main_nav ul{
width: 500px !important;
}
#main_nav a:link, 
#main_nav a:visited, 
#main_nav a:hover, 
#main_nav a:active 
{
	color: #ffffff;
 text-shadow: 0px 0px 6px black;
 font-weight: 700;
}

#main_nav {
    font-size: 13px;
    line-height: 13px;
  
}