/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 *
 * Detailed information about this CSS: h5bp.com/css
 *
 * ==|== normalize ==========================================================
 */


/* =============================================================================
   HTML5 display definitions
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }


/* =============================================================================
   Base
   ========================================================================== */

/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 * 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
 */

html { font-size: 62.5%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; 

/* 1em = 10px approx */
}

html, button, input, select, textarea { font-family: sans-serif; color: #222; }

body { margin: 0;
background: #000;
color: #fff;
}




::-moz-selection { background: #fefac2; color: #0f0f0f; }
::selection { background: #fefac2; color: #0f0f0f; }


@-webkit-viewport { width : device-width; }
@-moz-viewport { width : device-width; }
@-ms-viewport { width : device-width; }
@-o-viewport { width : device-width; }
@viewport { width : device-width; }

/*  http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html  */
@media (max-width: 25em) { 
	@-ms-viewport {
		width: 320px;
	}
}
/* =============================================================================
   Links
   ========================================================================== */

a { color: #cc0000;
-webkit-transition:color 0.4s;
-moz-transition:color 0.4s;
-o-transition:color 0.4s;
-ms-transition:color 0.4s;
transition:color 0.4s;

 }
a:visited { color: #cc0000;}
a:hover, a:active, a:focus { color: #fff; }
a:focus { outline: thin dotted; }

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }



/* =============================================================================
   Typography
   ========================================================================== */

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

blockquote { margin: 1em 40px; }

dfn { font-style: italic; }

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

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }

/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }


/* =============================================================================
   Lists
   ========================================================================== */

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }

nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }


/* =============================================================================
   Embedded content
   ========================================================================== */

/*
 * 1. Improve image quality when scaled in IE7: h5bp.com/d
 * 2. Remove the gap between images and borders on image containers: h5bp.com/i/440
 */

img {
border: 0;
-ms-interpolation-mode: bicubic;
vertical-align: middle;

}


img {
/* for responsive images */
width: 100%;height:auto;
}

    img.nonResponsive {
    width: auto;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    display: block;
    }

iframe {border: none;}

/*
 * Correct overflow not hidden in IE9
 */

svg:not(:root) { overflow: hidden; }


/* =============================================================================
   Figures
   ========================================================================== */

figure { margin: 0; }


/* =============================================================================
   Forms
   ========================================================================== */

form { margin: 0; }


/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }

/*
 * 1. Correct color not inheriting in IE6/7/8/9
 * 2. Correct alignment displayed oddly in IE6/7
 */

legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }

/*
 * 1. Correct font-size not inheriting in all browsers
 * 2. Remove margins in FF3/4 S5 Chrome
 * 3. Define consistent vertical alignment display in all browsers
 */

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

/*
 * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
 */

button, input { line-height: normal; }

/*
 * 1. Display hand cursor for clickable form elements
 * 2. Allow styling of clickable form elements in iOS
 * 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
 */

button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }

/*
 * Re-set default cursor for disabled elements
 */

button[disabled], input[disabled] { cursor: default; }

/*
 * Consistent box sizing and appearance
 */

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
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-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/*
 * Remove inner padding and border in FF3/4: h5bp.com/l
 */

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/*
 * 1. Remove default vertical scrollbar in IE6/7/8/9
 * 2. Allow only vertical resizing
 */

textarea { overflow: auto; vertical-align: top; resize: vertical; }

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

/* Colors for form validity */
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }



/* hide placeholder text on focus, instead of starting to type: */
[placeholder]:focus::-webkit-input-placeholder {
  color: transparent;
}

/* hide placeholder text colour: */
::-webkit-input-placeholder {
   color: #CCC;
}

:-moz-placeholder { /* Firefox 18- */
   color: #CCC;
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #CCC;
}

:-ms-input-placeholder {  
   color: #CCC;
}


/* =============================================================================
   Tables
   ========================================================================== */

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }




canvas {
    -ms-touch-action: double-tap-zoom;
}




/* #Typography
================================================== */




h1, h2, h3, h4, h5, h6 {
font-family: MarsFont, "Mars Font",tahoma, sans-serif;
color: #fff;
margin-left: 5%;
margin-right: 5%;
font-weight: bold;
}

	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
	h1 {
	font-size: 35px; line-height: 30px; margin-bottom: 18px;
	
    	}


	
	h2 {
	font-size: 23px; line-height: 30px; margin-bottom: 5px;

	}
	
	h3 {
	font-size: 19px; line-height: 24px; margin-bottom: 5px;

	}
	
	h4 {
	font-size: 15px; line-height: 20px; margin-bottom: 4px;

	}
	
	h5 {
	font-size: 17px; line-height: 24px;

	}
	
	h6 {
	font-size: 14px; line-height: 21px;

	}


p, dl, ul {
color: #fef8ce;
font-family: Arial, helvetica, sans-serif;
font-size: 15px;
margin-left: 5%;
margin-right: 5%;
}

.vendor-header-container p{
    color: unset;
}

ul {
    padding-left: 4%;
}






/* set up a base for non-media query devices */









   textarea {
    resize: none;
    overflow: auto;
   }



.videoMargin {
width: 90%;
margin: 0 5%;
}
   
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.noMarginTop {
margin-top: 0;
}

.relative {
    position: relative;
}

   
   /* end generic stuff ============== */


#marsHistory #loadAjaxHistoryBeltBraces {
display: none;
}

#header a {
text-decoration: none;
}

#header h1 {
width: 25%;
float: left;
padding: 0 0 8.575% 0;
height: 0;
margin: 4% 5%;
color: #e2000c;
}

@media only all {
    #header h1 {
        background: url(../images/mars-bar.gif) no-repeat 50% 50%;
        -webkit-background-size: 100% auto;
        -moz-background-size: 100% auto;
        -ms-background-size: 100% auto;
        -o-background-size: 100% auto;
        background-size: 100% auto;
    }
}

.svg #header h1 {
/*background-image: url(../images/mars-bar.svg);*/
}


#supportLockup, #facebookLink, .hideSmallViewport {
display: none;
/* sorry brad */
}

.button:link, .button:visited {
font-family: MarsFont, "Mars Font",tahoma, sans-serif;
background: #cc0000;
width: 90%;
margin: 8% 5%;
padding: 3% 0 4% 0;
-webkit-border-radius: 4px;
border-radius: 4px;
font-size: 15px;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
color: #fef8ce;
display: block;
text-align: center;
-webkit-transition: background 0.4s;
-moz-transition: background 0.4s;
-o-transition: background 0.4s;
-ms-transition: background 0.4s;
transition: background 0.4s;

}

    .button:hover, .button:active, .button:focus {
        background: #aa0526;
        color: #fef8ce;
        outline: none;
    }




#navigation {
max-height: 999px;
overflow: hidden;
-webkit-transition: max-height 1s ease;
-moz-transition: max-height 1s ease;
-o-transition: max-height 1s ease;
-ms-transition: max-height 1s ease;
transition: max-height 1s ease;

 -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;

}

#navigation li:first-child + li {
    display: none;
}

    #navigation.immediate {
  
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-ms-transition-duration: 0s;
-o-transition-duration: 0s;
  transition-duration: 0s;
    }

#navigation.collapsed {
max-height: 1px;
}



    #navigation ul {
list-style: none;
margin: 0;
padding: 0 0 3% 0;
background: #000;
}

#navigation li a:link, #navigation li a:visited {
    background: #000;
    color: #fef8ce;
    font-size: 15px;
    display: block;
    text-transform: uppercase;
    width: 90%;
    padding: 3% 5%;
    font-family: MarsFont, "Mars Font",tahoma, sans-serif;
    text-decoration: none;
    font-weight: bold;
    -webkit-transition:background 0.4s;
-moz-transition:background 0.4s;
-o-transition:background 0.4s;
-ms-transition:background 0.4s;
transition:background 0.4s;
    }

   #navigation li a:hover, #navigation li a:active, #navigation li a:focus {
    background: #212121;
    }


#menuToggle {
float: right;
}

#menuToggle a {
    font-family: MarsFont, "Mars Font",tahoma, sans-serif;
        color: #fef8ce;
        font-weight: bold;
        text-decoration: none;
        text-transform: uppercase;
        font-size: 14px;
}

.no-js #menuToggle {
display: none;
}







    /* sections -------------- */

#proudToSupport {
    width: 100%;
    background: #FFF url(../images/just-play-football.jpg) no-repeat 50% top;
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -ms-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-size: 100% auto;
    padding: 61.74% 0 0 0;
}

#proudToSupport h2, #proudToSupport p {
text-align: center;
color: #0f0f0f;
margin-top: 5%;
}

    #proudToSupport h3 {
    color: #0f0f0f;
    font-size: 18px;
    line-height: 22px;
    }

    #proudToSupport p {
    margin-top: 0.5%;
    }


#faceBook {
    padding-top: 5%;
    width: 100%;
    background: url(../images/speech-bubbles.jpg) no-repeat 50% 0;
}
#faceBook h2, #faceBook p {
    text-align: center;
}

    /* ------------- */

#watchTVAd {
display: none;
background: #232323;
padding: 5% 0;
}

#watchTVAd h3, #watchTVAd p {
text-align: center;
}

    #watchTVAd p {
    margin-top: 0.5%;
    }

    #watchTVAd .videoMargin {
    padding-top: 6%;
     padding-bottom: 6%;
    }



        /* ------------- */


#justPlay {
background: #fff;
padding: 0 0 10px 0;
}

    #justPlay h3 {
    color: #000;
      padding-right: 12%;
    }

 #justPlay p {
    color: #131313;
    margin-top: 0.5%;
    line-height: 24px;
    padding-right: 12%;
    }

#justPlay h2 {
background: url(../images/just-play.png) no-repeat 50% 0;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-ms-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
width: 100%;
height: 0;
margin: 0;
padding: 0 0 24% 0;
}
 
 #justPlay .videoMargin {
    padding-top: 5%;
     padding-bottom: 2%;
    }

    #justPlay .button {
        -webkit-box-shadow: 0px 2px 0 rgba(217, 217, 217, 1);
        -moz-box-shadow: 0px 2px 0 rgba(217, 217, 217, 1);
        box-shadow: 0px 2px 0 rgba(217, 217, 217, 1);
    }




            /* ------------- */

#supportEngland, #supportScotland {
    background: #020202;
    background: -moz-linear-gradient(top, #282828 0%, #020202 11%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#282828), color-stop(11%,#020202));
background: -webkit-linear-gradient(top, #282828 0%,#020202 11%);
background: -o-linear-gradient(top, #282828 0%,#020202 11%);
background: -ms-linear-gradient(top, #282828 0%,#020202 11%);
background: linear-gradient(to bottom, #282828 0%,#020202 11%);
padding: 7% 0 0 0;
}

#supportScotland {
padding-bottom: 6%;
}

    #supportEngland h3, #supportScotland h3 {
    text-align: center;
    margin-top: 0;
    }

    #supportEngland p, #supportScotland p,#supportEngland ul,#supportScotland ul {
    line-height:24px;
   margin: 0 5% 6% 5%;
    }

#englandMarsLockup {
background: url(../images/england-mars.png) no-repeat 50% 0;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-ms-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
width: 70%;
height: 0;
margin: 6% 15% 12% 15%;
padding: 0 0 34% 0;
}

/*
.svg #englandMarsLockup {
    background-image: url(../images/england-mars.svg);
}
*/
#scotlandMarsLockup {
background: url(../images/scotland-mars.png) no-repeat 50% 0;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-ms-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
width: 70%;
height: 0;
margin: 6% 15% 12% 15%;
padding: 0 0 33.75% 0;
}
/*
.svg #scotlandMarsLockup {
    background-image: url(../images/scotland-mars.svg);
}
*/

#englandPlayers, #scotlandPlayers {
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-ms-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
width: 100%;
height: 0;
margin: 0;
padding: 0 0 31.8% 0;
}

#englandPlayers {
background: url(../images/players.jpg) no-repeat 50% 50%;
}

#scotlandPlayers {
background: url(../images/players-scotland.jpg) no-repeat 50% 50%;
}


            /* ------------- */


#marsHistory {
 background: #272727 url(../images/history-collage-top.jpg) no-repeat 50% 0;
 -webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-ms-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
 padding: 29.25% 0 0 0;
}

    #marsHistory h3 {
    text-align: center;
    }

       #marsHistory p {
    text-align: center;
    line-height: 24px;
    }

        #marsHistory .button {
        -webkit-box-shadow: 0px 3px 0 rgba(10, 10, 10, 1);
        -moz-box-shadow: 0px 3px 0 rgba(10, 10, 10, 1);
        box-shadow: 0px 3px 0 rgba(10, 10, 10, 1);
    }


    #collageBottom {
 background: #272727 url(../images/history-collage-bottom.jpg) no-repeat 50% 50%;
 -webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-ms-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
 padding: 0 0 23.12% 0;
 width: 100%;
 margin: 10% 0 0 0;
}

#firstEnergy {
background: url(../images/history-energy.png) no-repeat 50% 100%;
 -webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-ms-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
padding-bottom: 20%;
}


#historyTimeline img {
display: block;
margin: 3% auto;
width: 40%;
max-width: 300px;
}

#historyTimeline #thirdEnergy {
max-width: none;
width: 90%;
margin: 3% 5%;
}


#historyTimeline .energyBlock img {
width: 42.5%;
margin: 7% 5% 7% 2.5%;
float: left;

}
    #historyTimeline .energyBlock .two img, #historyTimeline .energyBlock .two img {
    margin: 7% 2.5% 7% 5%;
    }

#ourPromise {
clear: both;
}




#historyTimeline .fourWrapperList {
float: none;
}

#historyTimeline .fourWrapper {
margin: 0 2.5% 5% 2.5%;
width: 95%;
}

#historyTimeline .fourWrapper .column img {
width: 45%;
margin: 2.5%;
float: left;
}

          /* ------------- */

#healthyActive {
padding: 6% 0;
}

#healthyActive p {
    line-height: 24px;
}

    #healthyActive p.opening {
    font-weight: bold;
    margin-top: 5%;
    }

    #healthyActive .nonResponsive {

     margin-bottom: 12%;
    }

        #healthyActive #loadAjaxNutrition {
        margin-top: 6.1rem;
    }


              /* ------------- */

                        #healthySlider {
        background-position: 100% 0;
    }


#canWeHelp {
    background-image: url("../images/how_can_we_help_gradient.jpg");
    background-position: 0 0;
    background-repeat: repeat-x;
    background-size: auto 100%;
    width: 100%;
    padding-top: 3%;
}

    #canWeHelp h5 {
    color: #fef8ce;
font-family: Arial, helvetica, sans-serif;
font-size: 15px;
line-height: 24px;
font-weight: bold;
   margin-top: 0;
      margin-bottom: 0;
    }

#canWeHelp p {
    line-height: 24px;
   margin-top: 0;  margin-bottom: 0;
}



#faqListing {
list-style: none;
margin: 5% 0 0 0;
padding: 0;
}

#faqListing li {
    border-bottom: 1px solid #363636;
  padding: 0;
}

    #faqListing li:first-child {
    padding-top: 0;
    }

    #faqListing h5 {
    cursor: pointer;  padding: 4% 0;
    }

    #faqListing p {
 
  padding: 0 0 4% 0;
}

    .no-js #faqListing h5 {
    cursor: default;
    }


#canWeHelp dt {
font-weight: bold;
color: #fff;
width: 100%;
padding-bottom: 1%;
}

#canWeHelp dd {
margin: 0;
width: 100%;
padding-top: 1%;
padding-bottom: 4%;
}

#addressBlock h4 {
margin-top: 10%;
font-size:17px;
}

#addressBlock h5 {
margin-top: 4%;
margin-bottom: 3%;
}



    /* ------------- */


#ourPromise {
background: #212121;
padding: 2% 0;
}

   /* ------------- */

#historyTimeline {
background: #1b1b1b;
padding: 0 0 14% 0; margin: 0;
}

    #historyTimeline dl {
    margin: 0;
    clear: both;
width: 100%;
    }

    #historyTimeline dd {
    padding: 0; margin: 0;
    }

        #historyTimeline h3 {
        margin-top: 0;
        margin-bottom: 0;
        padding: 6% 0 2% 0;
        }

    #historyTimeline p {
    line-height: 24px;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0 0 4% 0;
    }

    #marsHistory .ajaxTarget > .arrowLeft,#marsHistory .ajaxTarget > .arrowRight {
        position:absolute;
        background:#e3000b;
        top:260px;
        text-decoration: none;
        color: #fef8ce;
        width: 60px;
        height: 60px;
    }
    #marsHistory .ajaxTarget > .arrowLeft:before, #marsHistory .ajaxTarget > .arrowRight:before {

        font-size: 56px
    }
    #marsHistory .ajaxTarget > .arrowLeft:hover,#marsHistory .ajaxTarget > .arrowRight:hover {
        background: #aa0526;
    }
    #marsHistory .ajaxTarget > .arrowLeft {
        left:0;
    }
    #marsHistory .ajaxTarget > .arrowRight {
        right:0;
    }









#nutritionListing {
list-style: none;
margin: 0;
padding: 0;
border-bottom: 1px solid #363636;
}
    #nutritionListing li {
    padding: 0;
    }

.nutritionDetail {
padding-bottom: 32px;
}

#nutritionPanelWrapper h2 {
padding-bottom: 3%;
}


     #nutritionListing h3 {
    cursor: pointer; 
    font-size: 17px; 
    }

    .no-js #nutritionListing h3 {
    cursor: default;
    }

.altRow, .altRow td {
background: #222;
}



#nutritionListing .prodName {
float: right;
text-align: left;
display: block;
width: 94%;
}
#nutritionListing li {
clear: both;
border-top: 1px solid #363636;
}
#nutritionListing h3 {
padding-top: 2%;
padding-bottom: 2%;
margin-top: 0;
margin-bottom: 0;
}

#nutritionListing h5 {
font-size: 13px;
font-weight: bold;
color: #fff;
font-family: Arial, helvetica, sans-serif;
margin-bottom: 1%;
}

#nutritionListing img {
max-width: 50%;
display: block;
margin: 0 auto;
}

.nutritionInfo {
width: 100%;
margin: 3% 0 10% 0;
}

#ingredientsTable {
margin-bottom: 4%;
}

.nutritionImage h3 {
display: none;
}

    .nutritionInfo th {
    background: #3a3a3a;
    color: #fffad1;
    font-weight: bold;
    font-size: 11px;
    padding: 2.5% 5%;
    text-align: left;
    white-space: nowrap;
    border-bottom: 3px solid #1b1b1b;
    }

 .nutritionInfo td {
    background: transparent;
    color: #fff;
    font-weight: normal;
    font-size: 11px;
      padding: 2% 5%;
    }


.allergen {
color: #fffad1;
margin-top: 0;
margin-bottom: 10%;
}
    .allergen span {
    color: #fff;
    }


.gdaTable {
width: 90%;
margin: 0 5%;
background: url(../images/gda-cards.png) no-repeat 50% 50%;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-ms-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
}

.svg .gdaTable {
background-image: url(../images/gda-cards.svg);
}



.gdaTable th {
    text-align: center;
    font-weight: normal;
   color: #C98E43;
   width: 20%;
   padding: 4% 0 1% 0;
   font-size: 11px;
    } 

    .gdaTable td {
    text-align: center;
    color: #000; width: 20%; padding: 1% 0 3% 0; font-size: 11px;
    } 

/*  mars digital footer ##################  */
/*    
Stage url: http://stage-footer-admin.mars.com/
Stage credentials (usr) JohnHoltRipley@linney.com


html source is in TFS in /digitalFooter/footer.html

*/


#mars-footer-panel ul {
list-style: none;
margin: 0;
padding: 0;
background: #212121;
}



#mars-footer-panel li {
border-top: 1px solid #363636;
}

    #mars-footer-panel li a:link, #mars-footer-panel li a:visited {
    background: #212121;
    color: #fff;
    font-size: 15px;
    display: block;
    width: 90%;
    padding: 3% 5%;
    font-family: MarsFont, "Mars Font",tahoma, sans-serif;
    text-decoration: none;
    font-weight: bold;
    -webkit-transition:background 0.4s;
-moz-transition:background 0.4s;
-o-transition:background 0.4s;
-ms-transition:background 0.4s;
transition:background 0.4s;
    }

    #mars-footer-panel li a:hover, #mars-footer-panel li a:active, #mars-footer-panel li a:focus {
    background: #363636;
    }

.mars-footer-legal p {
font-size: 11px;
line-height:16px;
margin-top: 6%;
}




#commentsQuestions {
padding-bottom: 36px;
padding-bottom: 3.6rem;
}


#contactIframe, #contactIframeWrapper {
margin: 20px auto;
    height: 1100px;
    width: 520px;
}







/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after, .row:before, .row:after { content: ""; display: table; }
.clearfix:after, .row:after { clear: both; }
.clearfix, .row { *zoom: 1; }
@media only all {

    .ir {
        display: block;
        border: 0;
        text-indent: -999em;
        overflow: hidden;
        background-color: transparent;
        background-repeat: no-repeat;
        text-align: left;
        direction: ltr;
        *line-height: 0;
    }

        .ir br {
            display: none;
        }
}
.visibleHide {
/* http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/ */
 position: absolute; 
  overflow: hidden; 
  clip: rect(0 0 0 0); 
  height: 1px; width: 1px; 
  margin: -1px; padding: 0; border: 0; 
}




.arrowLeft:before, .arrowRight:before, .arrowDown:before, .flex-prev:before, .flex-next:before, .PrimaryCTA:after {
	font-family: 'iconSet';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
    font-size: 1.3em;
	line-height: 1;
    margin: 0;
    position:relative;
   
	-webkit-font-smoothing: antialiased;
}

.button .arrowRight:before {
 margin: 0 0 0 4px;
  top: 3px;
}

.button .arrowLeft:before {
 margin: 0 4px 0 0;
  top: 3px;
}

#nutritionListing .arrowRight {
float: left;
text-align: left;
display: block;
width: 6%;
}



    #nutritionListing .arrowRight:before {
    left: -5px;
   top: 1px;
    }


#flexSlider, #sectionNav {
display: none;
}


.ajaxTarget {
display: none;
}







.arrowRight:before, .flex-next:before {
	content: "\25b8";
}
.arrowUp:before, #menuToggle .active .arrowDown:before {
	content: "\25b4";
}

.flex-prev:before, .arrowLeft:before {
content: "\25c2";
}

.active .arrowRight:before {
content: "\25be";
}

.arrowDown:before {
	content: "\25be";
    top: 3px;
}



input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}



@font-face {
    font-family: 'MarsFont';
    src: url('../font-face/mars_font-webfont.eot');
    src: url('../font-face/mars_font-webfont.eot?#iefix') format('embedded-opentype'),
          url('../font-face/mars_font-webfont.svg#MarsFont') format('svg'),
         url('../font-face/mars_font-webfont.woff') format('woff'),
         url('../font-face/mars_font-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}


@font-face {
    font-family: 'iconSet';
    src: url('../font-face/iconSet.eot');
    src: url('../font-face/iconSet.eot?#iefix') format('embedded-opentype'),
          url('../font-face/iconSet.svg#iconSet') format('svg'),
         url('../font-face/iconSet.woff') format('woff'),
         url('../font-face/iconSet.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.marsFooterIcon {
display: none;
}

#spgMarsLockup {
    background: url(../images/spg-mars.jpg) no-repeat 50% 0;
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -ms-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-size: 100% auto;
    width: 70%;
    height: 0;
    margin: 0 0 0 55%;
    padding: 0 0 12% 0;
}

#proudToSupport a:hover {
    color: #a5a4a4;
}


/* Competition */

#competition {
   
    overflow: hidden;


    background-image: url(/images/mars-bar-homepage-hero-narrow.jpg);
    background-repeat: no-repeat;
    -webkit-background-size: 115% auto;
    -moz-background-size: 115% auto;
    -ms-background-size: 115% auto;
    -o-background-size: 115% auto;
    background-size: 115% auto;
    padding-bottom: 0;
    background-color: #000;
    background-position: 50% 186%;
    padding-bottom: 102%;

    
}

 


#competition .videoMargin {
    margin: 20px 0;
    width: 100%;
}

.competitionForm {
    margin: 20px 5%;
    position: relative;
    z-index: 999;
}

#npnText {
position: relative;
    z-index: 999;
}

.shirtMsg {
    background-repeat: no-repeat;
    background-position: 50% 100%;
    position: absolute;
    right:0;
    height: 0;
    padding: 0 0 180% 0;
    width: 100%;
       margin: 0;
        -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -ms-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-size: 100% auto;
    
    background-repeat: no-repeat;
    background-position: 100% bottom;
        bottom: 0;
        z-index: 1;
}





    .shirtMsg.win {
  
        background-image: url(/images/win-personalised-shirt-players-grey-win.jpg);
    }

    .shirtMsg.winner {
        background-image: url(/images/congratulations-winner.jpg);
     
       
    }

    .shirtMsg.confirm {
        background-image: url(/images/congratulations-confirm.jpg);
      
      
    }

    .shirtMsg.facebook {
        background-image: url(/images/congratulations-facebook.jpg);

    
    }

    .shirtMsg.sorry {
        background-image: url(/images/sorry-facebook.jpg);
     
     
    }


.competitionForm > p,.competitionForm > h4 {
    margin-left: 0;
    margin-right: 0;
}

.competitionForm h3.comingsoon {
        font-size: 42px;
        line-height: 32px;
        font-size: 3.2rem;
        line-height: 3.6rem;
        text-align:center;
}

.competitionForm p.comingsoon {
        font-size: 20px;
        line-height:26px;
        font-size: 2rem;
        line-height: 2.6rem;
        font-family: MarsFont, "Mars Font",tahoma, sans-serif;
        color:#fefac2;
        text-align:center;
}

.competitionForm p span.yellow {color:#fef8ce;padding:0;}



#competition #holding span.icon {

    background: url(../images/facebook.gif) no-repeat 100% 50%;
    width: 19px;
    height: 19px;
    width: 1.9rem;
    height: 1.9rem;

    display: inline-block;
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -ms-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
    padding:5px 5px 0 0;
    margin-right:10px;

    float:left;


}

#competition #holding span.fbcopy {margin-top:5px;}


.competitionForm h3 {
    margin-left: 0;
    text-transform: uppercase;
    line-height: 100%;
   



}

.competitionForm h3 span {
    font-size: 44px;
}

#sorryMessage span {
display: block;
}

.competitionForm label {
    font-family: MarsFont, "Mars Font",tahoma, sans-serif;
    color: #fff;
    font-size: 20px;
    width: 100%;
    display: block;
    margin-top: 20px;
}

.competitionForm input {
    font-size: 16px;
    border: none;
    margin: 0;
    padding: 10px 0;
    border-radius: 3px;
    margin-top: 10px;
    width: 84%;
    display: inline-block;
    *display: inline;
    zoom: 1;
}

.competitionForm select {
    font-size: 16px;
    border: none;
    margin: 0;
    padding: 10px;
    border-radius: 3px;
    margin-top: 10px;
    width: 219px;
}

.competitionForm span.checkBox input {
    width: auto;
}

.competitionForm span.checkBox label {
    width: 90%;
    display: inline-block;
    margin-left: 20px;
    *display: inline;
    zoom: 1;
}

.competitionForm .radioButtons {
    width: 100%;
}

.competitionForm .radioButtons input {
    width: auto;
}

.competitionForm .radioButtons label {
    width: 86%;
    display: inline-block;
    margin-left: 20px;
    font-family: tahoma, sans-serif;
    color: #fef8ce;
    font-size: 15px;
}
/*
.competitionForm input.button, .competitionForm a.button {
    font-family: MarsFont, 'Mars Font', tahoma, sans-serif;
    border: none;
    padding: 20px 20px;
    margin: 40px auto 0;
    color: #000;
    font-size: 20px;
    border-radius: 3px;
    text-transform: uppercase;
    -webkit-box-shadow: 2px 2px 0px 0px #000;
    box-shadow: 2px 2px 0px 0px #000;
    background: #ba8e45;
    background: -moz-linear-gradient(left,  #ba8e45 1%, #f6db87 30%, #cd9f56 50%, #f6db87 71%, #ba8e45 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(1%,#ba8e45), color-stop(30%,#f6db87), color-stop(50%,#cd9f56), color-stop(71%,#f6db87), color-stop(100%,#ba8e45));
    background: -webkit-linear-gradient(left,  #ba8e45 1%,#f6db87 30%,#cd9f56 50%,#f6db87 71%,#ba8e45 100%);
    background: -o-linear-gradient(left,  #ba8e45 1%,#f6db87 30%,#cd9f56 50%,#f6db87 71%,#ba8e45 100%);
    background: -ms-linear-gradient(left,  #ba8e45 1%,#f6db87 30%,#cd9f56 50%,#f6db87 71%,#ba8e45 100%);
    background: linear-gradient(to right,  #ba8e45 1%,#f6db87 30%,#cd9f56 50%,#f6db87 71%,#ba8e45 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ba8e45', endColorstr='#ba8e45',GradientType=1 );
    width: auto;
    display: block;
    max-width: 100%;
}

.competitionForm input.button:hover {
    background: #7f5e27;
    color: #fff;
}
*/
.competitionForm .day {
    width: 30%;
}

.competitionForm .month {
    width: 26%;
    margin-left: 4%;
}

.competitionForm .year {
    width: 36%;
    margin-left: 4%;
}

.competitionForm .error {
    font-family: Tahoma, sans-serif;
    margin: 10px 0 0;
    font-size: 14px;
    color: #cc0000;
    display: block;
    font-weight: bold;
    position: relative;
}



.competitionForm .infoTip {
    border-radius: 9999px;
    background: #fef8ce;
    color: #000;
    font-size: 22px;
    text-decoration: none;
    padding: 6px 15px;
    display: inline-block;
    *display: inline;
    zoom: 1;
    font-family: MarsFont, "Mars Font",tahoma, sans-serif;
    margin-left: 2%;
    line-height: 126%;
}

.unique-code {
    background: #fefac2 url(../images/unique-code.jpg) 50% 50% no-repeat;
    display: block;
    width: 100%;
    height: 0;
    padding: 0 0 23.6% 0;
    -webkit-background-size: 100% 100%;
     -moz-background-size: 100% 100%;
      -ms-background-size: 100% 100%;
       -o-background-size: 100% 100%;
      background-size: 100% 100%;
}

#av-submit {
    text-align: center;
}

.competitionForm .infoTipDefinition {
    position: absolute;
    border-radius: 3px;
    width: 84%;
    z-index: 3;
}

.no-js .competitionForm .infoTipDefinition {
position: relative;
}

.tip {
    background: transparent url(../images/tip.png) 97% 100% no-repeat;
    height:10px;
    width: 100%;
    display: block;
}

.competitionForm .infoTipDefinition h4, .competitionForm .infoTipDefinition p {
    color:#000;
    padding: 3%;
    margin: 0;
    background: #fef8ce;
}

.competitionForm .blankShirt {
    background: url(../images/shirt-blank.jpg) no-repeat top center;
    overflow: hidden;
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -ms-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-size: 100% auto;
}

.competitionForm .blankShirt input, .competitionForm .blankShirt select  {
    width: 46%;
    display: block;
    margin: 0 auto;
}

.competitionForm .blankShirt input {
    margin-top: 25%;
    text-align: center;
    text-transform: uppercase;
}

.competitionForm .blankShirt select {
    margin-top: 15px;
    text-align: center;
    margin-bottom: 10%;
}

.competitionForm .yellow {
    padding-right: 20%;
    margin-top: 16%;
}
.competitionForm .yellowCard {
    background: url(../images/yellow-card.png) no-repeat top right;
    width: 100px;
    height: 120px;
    display: block;
    position: absolute;
    right: 0;
    top: -42px;
    float: right;
}

.competitionForm .hide {
    display: none;
}

.competitionForm dl {
    margin: 0;
}

.competitionForm dl dt {
    font-family: MarsFont, "Mars Font",tahoma, sans-serif;
    color: #FFF;
    font-size: 16px;
}

.competitionForm dl dd {
    margin: 8px 0 20px;
}

.competitionForm .back {
    font-family: MarsFont, "Mars Font",tahoma, sans-serif;
    border: none;
    padding: 20px 40px;
    margin: 30px 0 0;
    color: #e6282a;
    font-size: 22px;
    background: transparent;
    text-transform: uppercase;
    width: 100%;
}

.competitionForm .previewShirt {
    margin-top: 20px;
}

#terms  {
   margin: 3%;
}

#terms p,#terms h3,#terms h4, #terms ol {
   color: #FFFFFF;
   font-family: arial, Tahoma, sans-serif;
}

#terms h3 {
    text-transform: uppercase;
}
#terms ol {margin:3% 0 0 3%; padding:0;}
#terms ol li, #terms p {color:#FFFFFF; font-size:12px; margin-bottom:15px;}
#terms ol li ol li {list-style:lower-alpha;}



#competition .competitionForm {
/* preload (but hide) the ticked graphic: */
background:url(/images/checkbox-checked.gif) no-repeat -200px -200px;

}




#competition div .checkBox input {
float: left;
margin-top: 14px;
}

.competitionForm span.checkBox label {
width: 80%;
margin-top: 10px;
padding-top: 20px;
}


   

#competition div:not(#foo)>span input[type='checkbox']{opacity:0;float:right;width:49px;}
#competition div:not(#foo)>span input[type='checkbox']+label{clear:none;padding:4px 0 8px 42px;line-height:18px;display:block;cursor:pointer;background:url(/images/checkbox.gif) no-repeat left top;margin-left:0;margin-top: 20px;}
#competition div:not(#foo)>span input[type='checkbox']:checked+label{background:url(/images/checkbox-checked.gif) no-repeat left top;}



/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(../images/overlay.png) repeat 0 0;}
#colorbox{outline:0;}
    #cboxTopLeft{width:21px; height:21px;}
    #cboxTopRight{width:21px; height:21px;}
    #cboxBottomLeft{width:21px; height:21px; }
    #cboxBottomRight{width:21px; height:21px;}
    #cboxMiddleLeft{width:21px;}
    #cboxMiddleRight{width:21px;}
    #cboxTopCenter{height:21px;}
    #cboxBottomCenter{height:21px;}
    #cboxContent{background:#fff; overflow:hidden;border: 3px #5b5b5b solid;border-radius: 6px;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:28px;}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
        #cboxLoadingOverlay{background:url(../images/loading_background.png) no-repeat center center;}
        #cboxLoadingGraphic{background:url(../images/loading.gif) no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; bottom:0; left:0; background:url(../images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:-75px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; background:url(../images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext:hover{background-position:-50px -25px;}
        #cboxClose{position:absolute; top:0; right:0; background:url(../images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxClose:hover{background-position:-25px -25px;}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}

/* Admin Login */

.loginFrom {
    margin: 0 auto;
    font-family: MarsFont, "Mars Font",tahoma, sans-serif;
    font-size: 20px;
    margin-top: 5%;

}
.loginFrom input {
    font-size: 16px;
    border: none;
    margin: 0;
    padding: 10px 0;
    border-radius: 3px;
    margin-top: 10px;
    width: 100%;
    display: inline-block;
}

.loginFrom input[type=checkbox] {
    width: auto;
}

.loginFrom label {
    font-family: MarsFont, "Mars Font",tahoma, sans-serif;
    color: #fff;
    font-size: 20px;
    width: 125px;
    display: inline-block;
    margin-top: 20px;
    margin-right: 15px;
    margin-left: 30px;
}

.loginFrom label[for=Lg_RememberMe] {
    width: 225px;
}

.loginFrom input[type=submit], .downloadShirts .button {
    font-family: MarsFont, 'Mars Font', tahoma, sans-serif;
    border: none;
    padding: 20px 20px;
    margin: 40px auto 0;
    color: #000;
    font-size: 20px;
    border-radius: 3px;
    text-transform: uppercase;
    -webkit-box-shadow: 2px 2px 0px 0px #000;
    box-shadow: 2px 2px 0px 0px #000;
    /*background-image: url(/images/arrowRight.gif) 90% center no-repeat;*/
    background: #ba8e45;
    background: -moz-linear-gradient(left,  #ba8e45 1%, #f6db87 30%, #cd9f56 50%, #f6db87 71%, #ba8e45 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(1%,#ba8e45), color-stop(30%,#f6db87), color-stop(50%,#cd9f56), color-stop(71%,#f6db87), color-stop(100%,#ba8e45));
    background: -webkit-linear-gradient(left,  #ba8e45 1%,#f6db87 30%,#cd9f56 50%,#f6db87 71%,#ba8e45 100%);
    background: -o-linear-gradient(left,  #ba8e45 1%,#f6db87 30%,#cd9f56 50%,#f6db87 71%,#ba8e45 100%);
    background: -ms-linear-gradient(left,  #ba8e45 1%,#f6db87 30%,#cd9f56 50%,#f6db87 71%,#ba8e45 100%);
    background: linear-gradient(to right,  #ba8e45 1%,#f6db87 30%,#cd9f56 50%,#f6db87 71%,#ba8e45 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ba8e45', endColorstr='#ba8e45',GradientType=1 );
    width: auto;
    display: block;
    max-width: 100%;
}

/* Shirts Download */

.downloadShirts {
    overflow: hidden;
}

.downloadShirts p,.downloadShirts label {
    font-family: tahoma, sans-serif;
    color: #fff;
    font-size: 16px;
    width: 100%;
    display: block;
    margin-top: 20px;
}

    .downloadShirts label {
        margin-bottom: 20px;
    }

.downloadShirts .button {
    margin: 30px 0;
}

.cal {
    background: #FFF;
    color: #000;
    font-size:14px;
    font-family: tahoma, sans-serif;
}

    .cal a {
        color: #000;
        font-family: tahoma, sans-serif;
        font-size:14px;
    }




    #termsWrapper {
    display: none;
    }

    .no-js #termsWrapper {
    display: block;
    }

    /* SB 2015/7/7 The mars server has CSS not in source control relating to "END - WIN 1 OF 1 Million balls specific styles"
        This included a competitionForm label background which conflicted with that set in here for textToWin.
        This source controlled file needs updating with that.
    */


.believe-hero-wide {
    display: none;
    margin-top: 200px;
    margin-bottom: 100px;
}

img.evidon-consent-button-image {
   width: auto;
}