/* ---------------------
 * Home page - www.pgmusic.com - Sept 2018
 * Top area uses Grid layout.
 * Use the autoprefixed / minified
 * version for production.
 * https://autoprefixer.github.io
 * https://cssminifier.com/
 * ----------------- */

#main-content {
	max-width:1500px
}

.rowBlock {
	width:auto
}

/* -----------------
 * Grid layout  IE doesn't support the newer
 * grid syntax, and doesn't support
 * grid-template-areas at all, so prefixed values
 * should be added.  Autoprefixer is a useful tool:
 * https://autoprefixer.github.io/
 * Media queries for layout at the end of this file
 * ----------------- */

/* main-grid-outer */
.main-intro		{grid-area: main-intro}
.main-featured-1    {grid-area: main-featured-1}
.main-featured-2   {grid-area: main-featured-2}
.news-bb		{grid-area: news-bb}
.news-other		{grid-area: news-other}
.news-forums	{grid-area: news-forums}
.news-vids		{grid-area: news-vids}

/* main-grid-inner */
.main-img         {grid-area: main-img}
.main-special       {grid-area: main-special}
.main-title       {grid-area: main-title}
.main-badges      {grid-area: main-badges}
.main-mantra-1    {grid-area: main-mantra-1}
.main-mantra-2    {grid-area: main-mantra-2}
.main-lg-vid	   {grid-area: main-lg-vid}
.main-sm-vid-1    {grid-area: main-sm-vid-1}
.main-sm-vid-2    {grid-area: main-sm-vid-2}
.featured-img     {grid-area: featured-img}
.featured-title   {grid-area: featured-title}
.featured-vid     {grid-area: featured-vid}

/* grid container for all content above bbwin and bbmac boxes */
.main-grid-outer {
	display: grid;
	grid-gap: 1.5vw;
	padding: .8vw .3vw;
	/* using minmax(0, xx) to prevent problems with the cell trying to
	   be too large in certain cases, such as with the nowrap  newsbit lists.
	   This may not be the best solution. */
	grid-template-columns: minmax(0, 80%) minmax(0, 29%);
	/* Unfortunately Edge seems to not be able to handle row height
	   properly with units other than pixels, at this time */
	/* grid-template-rows: repeat(5, auto) */
	grid-template-rows: 480px 210px 210px 230px 225px;
	grid-template-areas:
	    "main-intro news-bb"
	    "main-intro news-other"
	    "main-intro news-forums"
	    "main-intro news-vids"
	    "main-featured-1 main-featured-2 ";
}

/* inner grid container for main intro section */
.main-grid-inner {
	display: grid;
	grid-gap: 1vw;
	position:relative;
	overflow:hidden;
	padding: 1vw;
	grid-template-columns: 42% 1fr;
	grid-template-rows: .2fr 0fr 1fr 0.8fr 0.7fr 0.7fr;
	/* grid-template-rows: repeat(5,minmax(50px, auto)); */
	grid-template-areas:
	    "main-title main-title"
	    "main-img main-img"
	    "main-special main-mantra-1"
	    "main-special main-mantra-2"
	    "main-lg-vid main-sm-vid-1"
	    "main-lg-vid main-sm-vid-2";
}
.main-grid-inner > .grid-item,
.featured-grid-inner > .grid-item {
	width:100%;
	box-sizing:border-box;
}

.featured-grid-inner {
	display: grid;
	grid-gap: 1vw; /* % of viewport width */
	padding: 1vw;
	position:relative;
	overflow:hidden;
	align-items:center;
	grid-template-columns: 36% 1fr;
	grid-template-rows: repeat(2,auto);
	grid-template-areas:
	    "featured-img featured-title"
	    "featured-img featured-vid";
}

.featured-grid-2-inner {
	display: grid;
	grid-gap: 1vw; /* % of viewport width */
	padding: 1vw;
	position:relative;
	overflow:hidden;
	align-items:center;
	grid-template-columns: 90% 1fr;
	grid-template-rows: repeat(2,auto);
	grid-template-areas:
	    "featured-title"
	    "featured-vid";
}

.large-viewport-bblogo {display: block;}
.small-viewport-bblogo {
	display: block;
	margin-top:18px;
}


/* -----------------
 * General text and Misc
 * Most rules are in general.x.x.css
 * ----------------- */


/* os badges on big bb boxes */
.bb>.os-badge {
	font-size:18px;
	border:2px solid #bbb;
}


/* -----------------
 * Section Main
 * ----------------- */

/* Main: Intro image */

.main-img img{
	object-fit: cover;
	width: 100%;
	max-width:300px;
}

/* Main: Mantra */

.intro-headline {
  	color:#272927;
  	max-width:100%;
  	font-size:32px;
  	margin: 0;
  	line-height:38px;
  	font-weight:normal;
}

.intro-headline-2 {
	color: #f5ca2d;
	max-width: 100%;
	font-size: 40px;
	margin: 8px 0 16px 0;
	line-height: 38px;
	font-weight: normal;
	text-shadow: 1px 1px 1px #000;
}

.intro-text {
	text-align:center;
}

.intro-text p {
	font-size: 16px;
	line-height: 30px;
	color: #f5ca2d;
	font-weight: normal;
	padding-top:20px;
}

.intro-text p a {
	color: #fef8e2;
      text-decoration: underline;
	border:none;
}


.intro-text p a:hover{
	color:#55A5F4;
}

.intro-text p.special {
	color: #f00;
	font-weight: normal;
	font-size: 16px;
	padding-top:0px;
	line-height:22px;
	background: radial-gradient(ellipse at center,  rgba(76,76,76,1) 0%,rgba(17,17,17,1) 88%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%);
}

.intro-text p.special info {
	color: #f00;
	font-weight: normal;
	font-size: 14px;
	padding-top:0px;
	line-height:22px;
	background: radial-gradient(ellipse at center,  rgba(76,76,76,1) 0%,rgba(17,17,17,1) 88%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%);
}

.intro-text .learnmore {
	text-align:center;
	color: #fff
}

.intro-text .learnmore strong,
.intro-text .learnmore a {
	color:inherit;
}

.intro-text .learnmore a {
	text-decoration: underline;
}

/* Main: Large vid */

.vid-container {
	padding:10px;
}

.lg-vid-cap {
	color: #f5ca2d;
	font-size: 15px;
	margin: 0 0 12px 0;
}

.lg-vid-cap strong {
	color:inherit;
	font-weight:bold;
}

.lg-vid-cap h4 {
	color: inherit;
	font-weight:bold;
	font-size: 18px;
	margin: 0 0 12px 0;

}

.main-lg-vid {
	text-align:center;

}


/* Main: Small vid */

.main-sm-vid-1,
.main-sm-vid-2 {
	text-align:left;
}

.sm-vid-cap {
	color: #f5ca2d;
	font-size: 14px;
	padding: 4px;
	line-height: 20px;
}

.sm-vid-cap strong {
	color:inherit;
	font-weight:bold;
}

.sm-vid-cap h4 {
	color: inherit;
	font-weight:bold;
	font-size: 15px;
	margin: 0 0 12px 0;
}


/* Main: Featured */

.featured-img img{
	width: 100%;
	max-width:355px;
	/*max-height: 100%;  ??*/
}


.main-featured .learnmore,
.main-featured-2 .learnmore {
	text-align: center;
	color: #fff;
}

.main-featured .learnmore a,
.main-featured-2 .learnmore a  {
	text-decoration: underline;
}

.featured-title {
	text-align:center;
	padding: 0 40px 0 0; /* allows space for New sticker */
}

.featured-headline {
	font-size: 16px;
	line-height: 20px;
	color: #f5ca2d;
	margin-bottom: 9px;
}

.featured-vid .sm-vid-cap {
	text-align: center;
	line-height: 20px;
	max-width: 335px;
}

/* -----------------
 * News
 * ----------------- */

.block.news .titleBar {
	border:none;
	font-size:14px;
}


.block.news .fa-plus {
	font-size: 12px;
	color: #B17905;
	margin: 0 4px 0 0;
}

.block .titleBar {
	opacity:1;
}
.block .titleBar a {
	color: inherit
}

.block .titleBar a:hover {
	text-decoration:underline
}

.news .content {
	padding:12px;
}

.block ul.newsbit {
	list-style: none;
	text-align:left;
}

.block ul.newsbit li {
	color: #271409;
	padding: 0 5px 6px 10px;
	font: bold 11px/14px arial,Helvetica,Utkal,sans-serif;
 	margin: 0;
	vertical-align: baseline;
	text-align: left;
	white-space: nowrap;
	overflow:hidden;
	position:relative;
}

.block ul.newsbit li a {
	color: #2A190F;
   	font-family: Arial;
    	font-size: 12px;
    	font-weight: bold;
      line-height: 15px;
	display:inline;
	position:relative;
}

.block ul.newsbit li .newspost-date-hidden {
	display:none;
}

.block ul.newsbit li .newspost-new {
	color: #0D98A2;
    	display: none;
    	font-size: 12px;
   	font-weight: bold;
    	padding-right: 4px;
	text-transform: uppercase;
}

.block ul.newsbit li a:hover {
	color: #844F00;
}

.block .more-news {
    	margin: 4px 0 5px 21px;
}

.block .more-news a {
	text-decoration: underline;
	font-weight:bold;
	color: #5A524D;
    	font-size: 12px;
	position: relative;
	top: -1px;
}

.block .more-news a:hover { color: #805500; }

/*This fades out the headline text if it is too long
  Note - the vendor prefixes seem to be required here */

.block ul.newsbit li::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 100%;
    background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 90%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(90%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 90%,rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 90%,rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 90%,rgba(255,255,255,1) 100%);
    background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 90%,rgba(255,255,255,1) 100%);
    pointer-events: none;
}

/*video testimonials*/

.videotestimonials {
	margin: 0 auto;
    	padding: 1px 4px;
	display: block;
}

.videotestimonials .vidsplash {
	width:50%;
}

.videotestimonials .video img {
	width:100%;
	max-width:200px;
	border:5px solid white;
	box-shadow: 1px 1px 3px 0 #333;
	border-radius:4px;
	box-sizing:border-box;
}

.videotestimonials .caption {
	color: #2A190F;
	font-size:12px;
	font-weight:bold;
	line-height:15px;
	display:block;
	margin: 4px 0;
	text-align:center;
}

.videotestimonials .more-vids {
    margin: 10px 0 0px 0px;
    text-align: left;
}

/* -----------------
 * News mouseovers (tips)
 * TODO - make new simpler ones
 * ----------------- */

#WzTtDiV {
-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
	-webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); -moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
	max-width:400px;
	border:1px solid grey;
}

#WzTtDiV .newstip {
	margin: 0 6px;
	color: #5A524D;
	font-family: Arial;
	line-height:14px;
}

#WzTtDiV .newstip-heading {
	margin-bottom: 5px;
}

#WzTtDiV .newstip-date {
	color: #895136;
	font-weight: bold;
	padding-right: 2px;
	text-transform: uppercase;
	font-size: 11px;
}

#WzTtDiV .newstip-title {
	font-weight:bold;
	color: #2D2927;
}

#WzTtDiV .newstip-body, #WzTtDiV .newstip-body p,
#WzTtDiV .newstip-more, #WzTtDiV .newstip-more p   {
	color: #4C4541;
	font-size:12px;
	line-height:16px;
	font-weight:normal;
}

#WzTtDiV .newstip-body, #WzTtDiV .newstip-body a,
#WzTtDiV .newstip-more, #WzTtDiV .newstip-more a  {
	color: #4C4541;
	font-weight:bold;
}

#WzTtDiV .newstip-body, #WzTtDiV .newstip-body strong,
#WzTtDiV .newstip-more, #WzTtDiV .newstip-more strong {
	color: #4C4541;
	font-weight:bold;
}

#WzTtDiV .newstip-more {
	margin-top:10px;
}

/* -----------------
 * BBWIN & BBMAC boxes
 * ----------------- */

.bb {
	position:relative; /* allows OS badge and sticker to be positioned. */
	overflow:hidden;
	padding:18px;
	font-size: 15px;
	font-weight: normal;
	line-height: 22px;
	margin: 8px 4px 8px 4px;
}

.bb h3 {
	text-align:center;
	font-size: 22px;
	text-shadow: 1px 0px 0px #888;
	margin: 0 0 6px 0;
	border:none;
	padding: 0 34px; /* prevents from colliding with stickers etc. */
}

.bb h3 a {
	border-bottom:none;
	color: inherit;
}

.bb .learnmore {
	color:#242424;
	text-align:center;
	margin: 0px 0 14px 0;
}

.bb .learnmore a {
	border-bottom: 1px dotted #1E4EBD;
	color: #1B46A9;
	font-weight:bold;
}

.bb .learnmore a:hover {
	color:red;
}

.bb .learnmore.big {
	font-size:17px;
	text-align:center;
}

.bb p {
	margin: 10px 0 15px 0px;
}

.bb a {
	color: #1B46A9;
}

.bb a:hover {
	color:red;
}

.bb .feature {
	line-height: 18px;
	font-size:13px;
	list-style: none;
	margin: 0 0 14px 5px;
}

.bb .feature .desc {
	flex: 0 1 auto;
	margin: 0 20px 0 0;
}

@media only screen and (max-width: 780px) {
	.mobile .bb .feature .desc {margin: 0 6px 0 0;} /*less space between desc and video */
}


.bb .feature .video {
	flex: 1 0 auto;
}

@media only screen and (max-width: 780px) {
	.mobile .bb .feature .video {align-self:center;} /* vertically center video beside description */
}

.bb .special {
	padding: 15px 15px 20px 15px;
	border-radius:4px;
	color:#F5DB82;
	padding: 15px 15px 20px 15px;
	line-height: 25px;
	font-size:15px;
}

.bb .special a {
	color: #fef8e2;
	text-decoration: underline;
	border: none;
}

.bb .special a:hover {
	color: #55A5F4;
}

.bb-vids-wide,
.bb-vids-narrow {
	flex-wrap:wrap;
	margin:18px 0;
}

.bb-vids-full {
	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.8);
	margin:30px 0 18px;
}

.bb .vid {
	margin:10px;
}

.bb-vids-wide .vid-cap {
	width:230px;
}

.bb-vids-narrow .vid-cap {
	width:175px;
}

.bb .vid-cap {
	max-width: 230px;
	text-align: center;
	line-height: 14px;
	font-size: 12px;
	margin-top: 6px;
	cursor:pointer;
}


/* -----------------
 * Responsivity for main layout elements.  There are other media queries
 * throughout the CSS, alongside the applicable base styles
 * ----------------- */

@media only screen and (min-width: 1400px) {
	.main-img img {
	    object-fit: cover;
	    width: 100%;
	    max-width: 400px;
	}
	.intro-text .learnmore a {
	    text-decoration: underline;
	    font-size: 18px;
	}

	.intro-text p {
	    font-size: 16px;
	    line-height: 36px;
	    color: #f5ca2d;
	    font-weight: normal;
	   padding-top: 31px;
	}
	.special-offers-bubble-1 ul li {
   	     margin: 9px 0;
	}
}


@media only screen and (max-width: 1225px) {
	/* main title becomes full width */
	.mobile .main-grid-inner {
		/* grid-gap must be present, to support IE, as autoprefixer
		   supports gaps by making them additional rows and columns. */
		grid-gap: 1vw;
		grid-template-rows: 20px 290px 290px 240px 130px 130px;
		grid-template-areas:
		    "main-title main-title"
		    "main-img main-img"
		    "main-special main-mantra-1"
		    "main-special main-mantra-2"
		    "main-lg-vid main-sm-vid-1"
		    "main-lg-vid main-sm-vid-2";
	}
	.mobile .intro-headline {font-size: 29px;}
	.mobile .sub-headline {font-size: 16px;}
}

@media only screen and (max-width: 1150px) {
	.mobile .main-grid-outer {grid-template-rows: 500px 230px 230px 230px 260px;}


	/* adjust inner grid row heights so there is less whitespace */
	/*.mobile .main-grid-inner {grid-template-rows: .3fr 1.6fr 1.4fr 1.5fr 1fr 1fr}	 	*/
	.mobile .main-grid-inner {grid-template-rows: 50px 300px 340px 195px 160px 140px;}
	/* add bottom part of bblogo image now that it fits */
	.mobile .small-viewport-bblogo {display: block;}
}


@media only screen and (max-width: 1050px) {
	.mobile .main-grid-outer {
		/* TODO Unfortunately Edge is making us use pixels.  This will need to be
		   fixed somehow.*/
		/* grid-gap: 1.5vw;
		 grid-template-rows: 300px 300px 240px 240px 210px;*/
	}
}


@media only screen and (max-width: 1030px) {
	.mobile .main-grid-outer {
		 grid-template-rows: 500px 300px 250px 280px 250px;
	}
	/* Hide the big image, full width mantra text, change background so text is legible. */
	.mobile .main-img {display:none}
	.mobile .main-intro.black-ltr-grad {background: linear-gradient(to right, #454141 1%,#0e0e0e 55%);}
	.mobile .main-grid-inner {
		grid-gap: 1vw;
		/*grid-template-rows: .5fr 1.8fr 1.9fr 1.5fr 1.5fr 1.5fr;*/
		grid-template-rows:  70px 355px 255px 130px 200px 140px 140px;
		grid-template-areas:
		    "main-title main-title"
		    "main-special main-special"
		    "main-mantra-1 main-mantra-1"
		    "main-mantra-2 main-mantra-2"
		    "main-lg-vid main-lg-vid"
		    "main-sm-vid-1 main-sm-vid-1"
		    "main-sm-vid-2 main-sm-vid-2";
	}
	/* widen newsbit */
	.mobile .main-grid-outer {
		grid-template-columns: minmax(0, 65%) minmax(0, 34%);
	}

}

@media only screen and (max-width: 1000px) {
	/* Hide the big image, left align text, change background so text is legible. */
	.mobile .featured-img {display:none}
	.mobile .main-featured.black-ltr-grad,
	.mobile .main-featured-2.black-ltr-grad {background: linear-gradient(to right, #454141 1%,#0e0e0e 55%);}
	.mobile .featured-grid-inner {
		grid-gap: 1vw;
		grid-template-areas:
		    "featured-title featured-title"
		    "featured-vid featured-vid";
	}
}


@media screen and (max-width: 700px) {
	/* resize and position outer grid so that newsbits are below the main intro */
	.mobile .main-grid-outer {
		grid-gap: 1.5vw;
		grid-template-columns: minmax(0, 50%) minmax(0, 50%);
		/*grid-template-rows: repeat(7, 200px);*/
		grid-template-rows: repeat(10, auto);
		grid-template-areas:
		    "main-intro main-intro"
		    "main-intro main-intro"
		    "main-intro main-intro"
		    "main-intro main-intro"
		    "main-featured-1 main-featured-1"
		    "main-featured-2 main-featured-2"
		    "news-bb news-bb"
		    "news-other news-other"
		    "news-forums news-forums"
		    "news-vids news-vids";
	}

	.mobile .main-grid-inner {grid-template-rows: 90px 320px 250px 250px 300px 300px;}
	/*  stack bbwin and bbmac boxes */
	.mobile .bb-container {flex-wrap:wrap}
}

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

	.mobile .main-grid-inner {grid-template-rows: 90px 400px 250px 250px 300px 300px;}

}

/* -----------------
 * IE 10-11 do not support conditional comments, however we can target them here.
 * This is necesary, for one because the grid layout is messed up when we try to
 * reconfigure it with media queries. */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)  {

		/* we're just not going to use grid layout. */
		#main-content {
			max-width:1100px;
		}

		.black-ltr-grad {
			background: linear-gradient(to right, #454141 1%,#0e0e0e 55%);
		}

		.main-img {
			display:none;
		}

		.main-grid-outer {
			display: block;

		}

		.main-grid-inner {
			display: block;

		}

		.featured-grid-inner {
			display: block;

		}

		/* no support for gradient text using this technique */
		.play::after {
			color:#EFB306;
			background: none;
		}

		.gold-grad-text {
			color:#EFB306;
			background:none;
		}

}