@charset "UTF-8";
/* CSS Document */

body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}

body {
  height: 100%;
  line-height: 1.5;
  background-color: #f9f9f9;
  color: #303030;	
}

.top-border {
  background-image: url("../images/color-border.jpg");
  background-repeat: repeat-x;
  height: 15px;
}

a:link {
	color: #FFF;	
}
a:visited {	
	color: #FFF;	
}  
a:hover {	
	color: #ff5100;	
}  
a:active {
	color: #ff5100;	
}

A.blackLink {color: #303030;}
A.blackLink:link  {text-decoration: underline; color: #303030;}
A.blackLink:visited {text-decoration: underline; color: #303030;}
A.blackLink:hover {text-decoration: underline; color: #ff5100;}
A.blackLink:active {text-decoration: underline; color: #ff5100;}

A.invisLink {color: #303030;}
A.invisLink:link  {text-decoration: none; color: #303030;}
A.invisLink:visited {text-decoration: none; color: #303030;}
A.invisLink:hover {text-decoration: none; color: #303030;}
A.invisLink:active {text-decoration: none; color: #303030;}

.divider{
    width:20px;
    height:auto;
    display:inline-block;
}

div.topNavBg {
    margin-left: auto;
    margin-right: auto;
	min-height: 100%;
	background-color: #f9f9f9;
	white-space: nowrap;
	padding-top: 20px;
}

div.bottomNavBg {
    margin-left: auto;
    margin-right: auto;
	min-height: 100%;
	background-color: #f1f1f1;
	white-space: nowrap;
	padding-top: 5px;
	padding-bottom: 0px;
}

div.dropdownNavBg {
    margin-left: auto;
    margin-right: auto;
	min-height: 100%;
	background-color: #fcff00;
	white-space: nowrap;
	font-weight: bold;
}

div.headerBg {
    margin-left: auto;
    margin-right: auto;
	padding-top: 18px;
	padding-bottom: 22px;
}

div.moreInfoHeader {
    margin-left: auto;
    margin-right: auto;
	padding-top: 18px;
	padding-bottom: 0px;
}

div.productPagesHeaderBg {
    margin-left: auto;
    margin-right: auto;
	padding-top: 18px;
	padding-bottom: 0px;
	margin-bottom: -20px;
}


div.headerBgSmall {
    margin-left: auto;
    margin-right: auto;
	background-color: #00aeef;
	padding-top: 22px;
	padding-bottom: 22px;
}

div.pagesHeaderBg {
    margin-left: auto;
    margin-right: auto;
	background-color: #72bbf2;
	padding-top: 22px;
	padding-bottom: 22px;
}

div.BBheaderBg {
    margin-left: auto;
    margin-right: auto;
	background-color: #00aeef;
	padding-top: 22px;
	padding-bottom: 22px;
}

div.DDheaderBg {
    margin-left: auto;
    margin-right: auto;
	background-color: #ffee00;
	padding-top: 22px;
	padding-bottom: 22px;
}

div.LLheaderBg {
    margin-left: auto;
    margin-right: auto;
	background-color: #037fd8;
	padding-top: 22px;
	padding-bottom: 22px;
}

div.CFheaderBg {
    margin-left: auto;
    margin-right: auto;
	background-color: #b31528;
	padding-top: 22px;
	padding-bottom: 22px;
}

.footerSocial {
	margin-top: 7px;
	text-align:right;
}

.footerIcons {
	margin-right:-5px;	
}

.contactUsEmail {
	margin-top: -6px;
	padding-bottom: 10px;
	font-size:28px;	
	font-weight:200;
}

.contactUs {
	text-align:left;
}

.slideTextSmallScreens {
	background-color:#FFFFFF;
	color: #303030;	
	text-align:center;	
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	padding-right: 20px;
	margin-top: 0px;
	margin-bottom: 0px;
	font-size: 18px;
}

.topleft {
    position: absolute;
    top: 10px;
    left: 10px;
}

div.videoOverlay {
  position: absolute;
  bottom: 0;
  left: 50%;
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 900px;
  z-index: 2;
  padding-bottom: 0px;
  margin-bottom: -5px;
  text-align:center;
}

.textHeadlineA {
	font-size:40px;
	margin-top: 20px;
	padding-top: 25px;
	margin-bottom: 0px;
}

.textHeadlineB {
	font-size:30px;
	margin-top: 0px;
	margin-bottom: -2px;
	padding-bottom: -10px;
}

.textHeadlineASmall {
	font-size: 30px;
	margin-top: 0px;
	padding-top: 15px;
	margin-bottom: 0px;
	line-height: 1.25;
}

.textHeadlineBSmall {
	font-size:22px;
	margin-top: 0px;
	margin-bottom: -8px;
	padding-bottom: -10px;
}

.textHeader {
	font-size:20px;
	font-weight:bold;
}

.sideNav {
  background-color:#f9f9f9;
  color:#303030;	
  width:auto;
  right:0;
  padding-top:20px;
  padding-right:29px;
  padding-left:20px;
  text-align:right;
}

.headerRectangle {
  position: absolute;
  bottom: 0;
  left: 50%;
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  color: white;
  z-index: 1;
}


div.DMheaderBg {
    margin-left: auto;
    margin-right: auto;
	background-color: #9c27b0;
	padding-top: 22px;
	padding-bottom: 22px;
}

div.aboutUsHeaderBg {
    margin-left: auto;
    margin-right: auto;
	background-color: #2196F3;
	padding-top: 22px;
	padding-bottom: 22px;
}

div.storeHeaderBg {
    margin-left: auto;
    margin-right: auto;
	background-color: #4CAF50;
	padding-top: 22px;
	padding-bottom: 22px;
}

div.pageWidth {
	padding-left: 12px;
    padding-right: 12px;
    margin-left: auto;
    margin-right: auto;
	max-width: 960px;	
}

div.rulesWidth {
	padding-left: 12px;
    padding-right: 12px;
    margin-left: auto;
    margin-right: auto;
	max-width: 600px;	
}

div.centerBuyButton {
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	width: 33%;
}

.imageMaxHeightHowToPlay {
	width:100%;
	height:auto;	
}	

.centerHeaderText {
	font-size:30px;
	width: 70%;
	max-width: 700px;
	color: #303030;
	margin-left:auto;
	margin-right:auto;
	line-height:1.3;
	margin-top: 20px;
}

.centerExtraText {
	font-size:16px;
	width: 90%;
	max-width: 700px;
	color: #303030;
	margin-left:auto;
	margin-right:auto;
	margin-top: -5px;
	margin-bottom: -5px;
}

.centerParagraphText {
	font-size:16px;
	width: 70%;
	max-width: 700px;
	color: #303030;
	margin-left:auto;
	margin-right:auto;
	margin-top: -15px;
	padding-bottom: 4px;
}

.whereToBuyText {
	font-size:16px;
	width: 70%;
	max-width: 700px;
	color: #303030;
	margin-left:auto;
	margin-right:auto;
	margin-top: -15px;
	padding-bottom: 7px;
}

.centerStripText {
	font-size:18px;
	width: 70%;
	max-width: 700px;
	color: #303030;
	margin-left:auto;
	margin-right:auto;
}

.fullScreenText {
	font-size:21px;
}


.tingleText {
	font-size:22px;
}

.buyText {
	font-size:20px;
	padding-bottom:10px;
	width: 100%;
}


.textPadding {
	padding-left: 10px;
	padding-right: 10px;
}

.storeText {
	font-size:18px;
	font-style:italic;
}

.fixText {
	font-size:18px;
}
	
.headerText {
	font-size:medium;
}

.categoryHeader {
	margin-top:20px;
	color: #2F2F2F;
	font-size:20px;
	font-weight:200;
}

.standardButton {
  width: 100px;
}

.productBox {
  background-color: #fff;
  padding-top: 0px;	
}

.mailingListBox {
  background-color: #fff;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 10px;
}

.mailingListSmallBox {
  background-color: #fff;
  padding-top: 20px;
  padding-right: 10px;
  padding-bottom: 0px;
  padding-left: 16px;
}

div.productBoxText {
  padding-left:30px;
  padding-right:20px;
}

div.mailingListText {
  padding-left:26px;
  padding-right:26px;
}

div.smallScreensNews {
	margin-bottom: 22px;
	padding-bottom: 20px;
}

div.horizontalBorder {
	height: 1px;
	background-color: #9c9c9c;	
}

div.smallScreenFill{
	height: 98px;
}

div.smallSpace{
	display:block;
	height: 10px;
}

div.mediumSpace{
	display:block;
	height: 20px;
}

div.underBuyButtonSpace{
	display:block;
	height: 30px;
}

div.formSpace{
	display:block;
	height: 26px;
}

div.headerSpace{
	display:block;
	height: 38px;
}

div.underFormSpace{
	display:block;
	height: 36px;
}

div.underDDCommonCardSpace{
	display:block;
	height: 37px;
}

div.downloadButtonSpace{
	display:block;
	height: 10px;
}

.embed-container { 
	position: relative; 
	padding-bottom: 56.25%; 
	height: 0; 
	overflow: hidden; 
	max-width: 100%; 
} 

.embed-container iframe, 
.embed-container object, 
.embed-container embed { 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
}

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px; 
	height: 0; 
	overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.menuIconContainer {
    display: inline-block;
    cursor: pointer;
}

.menuIconContainer:hover > .bar1 { background-color: #ff5100; }
.menuIconContainer:hover > .bar2 { background-color: #ff5100; }
.menuIconContainer:hover > .bar3 { background-color: #ff5100; }

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #303030;
    margin: 6px 0;
	transition: 0.2s;
}

/* Rotate first bar */
.change .bar1 {
    -ms-transform: rotate(-45deg) translate(-9px, 6px) ;
	-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
}

/* Fade out the second bar */
.change .bar2 {
    opacity: 0;
}

/* Rotate last bar */
.change .bar3 {
    -ms-transform: rotate(45deg) translate(-8px, -8px) ;
	-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
}
	
.imageMaxHeight {
	width:100%;
	height:auto;	
}	

.smallImageMaxHeight {
	width:auto;
	height:200px;	
}	

.tinyImageMaxHeight {
	width:auto;
	height:65px;
	margin-top:10px;
	margin-bottom:10px;
}	

.ftwImageMaxHeight {
	width:100%;
	height:auto;	
}

.storeImageMaxHeight {
	width:100%;
	height:auto;	
}	

.disabledLink {
   pointer-events: none;
   cursor: default;
}

.specialH4 {
	display: block; 
	font-size: 20px;
	line-height: 1.08;
 	
 	margin-top: 17px; 
	margin-bottom: 15px; 
	margin-left: 0; 
	margin-right: 0; 	
}

.image2x{
	display: none;
}

.imageHighRes{
	display: none;
}


/*
.slide-fix-the-world {
  background-image: url("../images/fix-the-world-slide.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color:#F70004;

}

.slide-debatable {
  background-image: url("../images/debatable-slide.jpg");
  background-repeat: no-repeat;
  background-size: contain;
  height: 459px;
  width: auto; 
}

.slide-couch-potato {
  background-image: url("../images/couch-potato-slide.jpg");
  background-repeat: no-repeat;
  background-size: contain;
  height: 459px;
  width: auto; 
}

*/

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  position: relative;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: auto;
  padding: 16px;
  color: white;
  font-size: 30px;
  /*transition: 0.6s ease;*/
  border-radius: 0 3px 3px 0;
  user-select: none;
  z-index: 3;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev {
  left: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
  color: #ff5100;
}

.slideBackground {
  z-index: -1;
}


.slideText {
  position: absolute;
  bottom: 0;
  left: 0;
  padding-left: 30px;
  font-size: 22px;
  max-width: 450px;
  z-index: 2;
  text-align:left;

}

.slideRectangle {
  position: absolute;
  bottom: 0;
  left: 0;
  color: white;
  z-index: 1;
}



/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
	
@media 
(-webkit-min-device-pixel-ratio: 1.25), 
(min-resolution: 120dpi){ 
  
  	/*
	.image1x{
		display: none;
	}
	
	.image2x{
		display: block;
	}
	*/		 
 
	.imageNormalRes{
		display: none;
	}
	
	.imageHighRes{
		display: block;
	}

}


@media only screen and (min-width: 601px) {

  .onlyMediumScreens {
      display:none;
  }

}

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

	.tingleText {
		font-size:large;
	}
	
	.fixText {
		font-size:16px;
	}	
	
	.headerText {
		font-size:small;
	}
	
	.noMediumScreens {
		 display:none;
	}	
	
	.imageMaxHeight {
		max-width:500px;
		height:auto;
	}		

	.storeImageMaxHeight {
		max-width:400px;
		height:auto;
	}
	
	div.BBheaderBg {
		margin-top:22px;
	}	
	
	div.pagesHeaderBg {
		margin-top:22px;
	}		
	
	div.productBoxText {
		padding-bottom: 20px;
		padding-top: 3px;
		padding-left:16px;
		padding-right:10px;
	}
	
	div.mailingListText {
  		padding-left:6px;
  		padding-right:10px;
	}	
	
	.textPadding {
		padding-left: 0px;
		padding-right: 0px;
	}	
	
	.footerSocial {
		text-align:center;	
		padding-bottom: 10px;
		margin-top: -10px;
	}
	
	.socialIcons {
		margin-right:0px;
		margin-top:-5px;	
	}
	
	.contactUs {
		text-align:center;
	}	
	
	.contactUsEmail {
		text-align:center;
		margin-top:-15px;
	}		
	
	div.productPagesHeaderBg {
		margin-bottom: -8px;	
	}
	
}

@media only screen and (min-width: 801px) {

  .noBigScreens {
      display:none;
  }
	
  div.smallScreenFill{
      display:none;
  } 
  
}

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

	.noSmallScreens {
  		display:none;
  	}
  
	.storeImageMaxHeight {
		width:100%;
		height:auto;
	}

	div.BBheaderBg {
		margin-top:22px;
	}	
	
	div.pagesHeaderBg {
		margin-top:22px;
	}			
		
  .centerHeaderText {
	font-size:24px;
	padding-bottom:10px;
	width: 100%;
  }

  .centerParagraphText {
	width: 100%;
  }		
  
  .centerStripText {
	width: 100%; 
  }		
  
  .fullScreenText {
	font-size:21px;
  }
	
	.whereToBuyText {
		font-size:16px;
		width: 100%;
		max-width: 700px;
		color: #303030;
		margin-left:auto;
		margin-right:auto;
		margin-top: -15px;
		padding-bottom: 4px;
	}	
		
}

@media only screen and (max-width: 500px) {
	
	.imageMaxHeight {
		width:100%;
		height:auto;		
	}		

}