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

/*---main Super Hero---*/
.heroContainer{
	background-image: url("../img/main/hero_sml.jpg");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top;
	width: 100vw; 
    height: 100vh;
}
@media (min-width: 640px){
	.heroContainer{
	background-image: url("../img/main/hero_md.jpg");
}	
}
@media (min-width: 1081px){
	.heroContainer{
	background-image: url("../img/main/hero_lrg.jpg");
}	
}
@media (min-width: 1921px){
	.heroContainer{
	background-image: url("../img/main/hero_xlrg.jpg");
}	
}

.carousel-item .img-fluid {
  width:100%;
}

/* 
anchors are inline so you need ot make them block to go full width
*/
.carousel-item a {
  display: block;
  width:100%;
}

/*---section page Hero---*/
#sectionScene{
	align-content: center;
}

.heroBanner{
	background-image: url("../img/main/bph_banner_sml.jpg");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top;
	margin-top: 0px;
	margin-bottom: -30%;
	width: 100vw; 
    height: 100vh;
}
@media (min-width: 576px){
	.heroBanner{
	margin-top: 0px;	
	background-image: url("../img/main/bph_banner_md.jpg");
}	
}
@media (min-width: 1080px){
	.heroBanner{
	background-image: url("../img/main/bph_banner_lrg.jpg");
}	
}
@media (min-width: 1920px){
	.heroBanner{
	background-image: url("../img/main/bph_banner_xlrg.jpg");	
}	
}

/*----DOWN Section----*/
	#downSection{
		align-content: center;
		text-align: center;
		margin: 15px 0px;
	}	

	.downHolder{
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;	
	height: 100px;	
	margin: 7.5px;	
	transition: 0.5s;	
	}
	
	.downHolder:hover {
		transform: translate(0, -10px);
	}		

	.downCSNA{
	background-image: url("../img/downloads/cs_na.jpg");
	}
	
	.downCSEU{
	background-image: url("../img/downloads/cs_eu.jpg");
	}

/*--ABOUT---*/
.aboutHolder{
	align-content: center;
	background-repeat: no-repeat;
  	background-size: contain;
  	background-position: center;
	height: 200px;
	margin: 10px ;
}

.aboutImg{
	background-image: url("../img/characters/about_sub.png");
}


.stepHolder{
	align-content: center;
	background-repeat: no-repeat;
  	background-size: contain;
  	background-position: center;
	height: 120px;
	margin: 10px ;
}

@media (min-width: 768px){
	.stepHolder{
	height: 220px;
	margin: 10px ;
}
}

.imgStep1{
	background-image: url("../img/misc/step1.png");
}
.imgStep2{
	background-image: url("../img/misc/step2.png");
}
.imgStep3{
	background-image: url("../img/misc/step3.png");
}

/*---BRANDS--------*/
.brandBanner{
		align-content: center;
		background-repeat: no-repeat;
  		background-size: contain;
  		background-position: center;
		height: 100px;
		margin: 7.5px;
		transition: 0.5s;
	}	
	
.brandBanner:hover {
		transform: translate(0, -10px);
	}	
	
.bannerFoamies{
	background-image: url("../img/logos/foamies.png")
}		
@media (min-width: 768px){
	.bannerFoamies{
	background-image: url("../img/characters/banner-foamies.png");
	}
}
	
.bannerFidgies{
	background-image: url("../img/logos/fidgies.png")
}		
@media (min-width: 768px){	
	.bannerFidgies{
	background-image: url("../img/characters/banner-fidgies.png");
	}
}
	
.bannerGemmies{
	background-image: url("../img/logos/gemmies.png")
}
@media (min-width: 768px){
	.bannerGemmies{
	background-image: url("../img/characters/banner-gemmies.png");
	}
}

.bannerGellies{
	background-image: url("../img/logos/gellies.png")
}	
@media (min-width: 768px){
	.bannerGellies{
	background-image: url("../img/characters/banner-gellies.png");
	}
}
	
.bannerStuffies{
	background-image: url("../img/logos/stuffies.png")
}	
@media (min-width: 768px){
	.bannerStuffies{
	background-image: url("../img/characters/banner-stuffies.png");
	}	
}
	
.bannerSquishies{
	background-image: url("../img/logos/squishies.png")
}	
@media (min-width: 768px){
	.bannerSquishies{
	background-image: url("../img/characters/banner-squishies.png");
	}
}

/*-------RETAIL----*/

#retailPage {
  background-color: #ffa810 !important;
}

.boxImg{
	background-image: url("../img/retail/retail_sub.png");
}

.retailHolder{
	align-content: center;
	background-repeat: no-repeat;
  	background-size: contain;
  	background-position: center;
	height: 75px;
	margin: 10px ;
}

.retailHT{
	background-image: url("../img/logos/HotTopic.svg");
}

.retail5B{
	background-image: url("../img/logos/five.svg");
}

.retailMR{
	background-image: url("../img/logos/meijer.svg");
}

.retailTG{
	background-image: url("../img/logos/target.svg");
}

.retailWM{
	background-image: url("../img/logos/wm.svg");
}


/*--RESPONSIVE MATRIX--*/
@media screen and (min-width: 360px) and (min-height: 640px) {
  .heroContainer{margin-bottom: -110%;}
  .heroBanner{margin-bottom: -145%;}	
  .downHolder{height: 120px;margin: 20px;}
  .brandBanner{height: 120px;margin: 15px;}
  .aboutHolder{height: 200px;margin: 10px;}
  .retailHolder{height: 75px;margin: 10px;}
}

@media screen and (min-width: 360px) and (min-height: 800px) {
  .heroContainer{margin-bottom: -15%;}
  .heroBanner{margin-bottom: -188%;}
  .downHolder{height: 120px;margin: 20px;}
  .brandBanner{height: 120px;margin: 15px;}
  .aboutHolder{height: 200px;margin: 10px;}
  .retailHolder{height: 75px;margin: 10px;}
}

@media screen and (min-width: 375px) and (min-height: 667px) {
  .heroContainer{margin-bottom: -110%;}
  .heroBanner{margin-bottom: -145%;}
  .downHolder{height: 120px;margin: 20px;}
  .brandBanner{height: 120px;margin: 15px;}
  .aboutHolder{height: 200px;margin: 10px;}
  .retailHolder{height: 75px;margin: 10px;}
}

@media screen and (min-width: 414px) and (min-height: 736px) {
  .heroContainer{margin-bottom: -110.5%;}
  .heroBanner{margin-bottom: -145%;}
  .downHolder{height: 150px;margin: 20px;}
  .brandBanner{height: 150px;margin: 15px;}
  .aboutHolder{height: 200px;margin: 10px;}
  .retailHolder{height: 75px;margin: 10px;}
}

@media screen and (min-width: 414px) and (min-height: 896px) {
  .heroContainer{margin-bottom: -150%;}
  .heroBanner{margin-bottom: -180%;}	
  .downHolder{height: 150px;margin: 20px;}
  .brandBanner{height: 150px;margin: 15px;}
  .aboutHolder{height: 200px;margin: 10px;}
  .retailHolder{height: 75px;margin: 10px;}
}

@media screen and (min-width: 480px) and (min-height: 800px) {
  .heroContainer{margin-bottom: -105%;}
  .heroBanner{margin-bottom: -135%;}
  .downHolder{height: 150px;margin: 20px;}
  .brandBanner{height: 150px;margin: 15px;}
  .aboutHolder{height: 200px;margin: 10px;}
  .retailHolder{height: 75px;margin: 10px;}
}

@media screen and (min-width: 600px) and (min-height: 960px) {
  .heroContainer{margin-bottom: -94%;}	
  .heroBanner{margin-bottom: -132%;}
  .downHolder{height: 200px;margin: 20px;}
  .brandBanner{height: 200px;margin: 15px;}
  .aboutHolder{height: 200px;margin: 10px;}
  .retailHolder{height: 75px;margin: 10px;}
}

@media screen and (min-width: 600px) and (min-height: 1024px) {
  .heroContainer{margin-bottom: -105%;}	
  .heroBanner{margin-bottom: -142%;}
  .downHolder{height: 200px;margin: 20px;}
  .brandBanner{height: 200px;margin: 15px;}
  .aboutHolder{height: 200px;margin: 10px;}
  .retailHolder{height: 75px;margin: 10px;}
}

@media screen and (min-width: 640px) and (min-height: 360px) {
  .heroContainer{margin-bottom: -15%;}}

@media screen and (min-width: 667px) and (min-height: 375px) {
  .heroContainer{margin-bottom: -15%;}
  .heroBanner{margin-bottom: -30%;}
  .downHolder{height: 200px;margin: 20px;}
  .brandBanner{height: 200px;margin: 15px;}
  .aboutHolder{height: 200px;margin: 10px;}
  .retailHolder{height: 75px;margin: 10px;}
}

@media screen and (min-width: 735px) and (min-height: 414px) {
  .heroContainer{margin-bottom: -15%;}
  .heroBanner{margin-bottom: -30%;}
  .downHolder{height: 200px;margin: 20px;}
  .brandBanner{height: 200px;margin: 15px;}
  .aboutHolder{height: 200px;margin: 10px;}
  .retailHolder{height: 75px;margin: 10px;}
}

@media screen and (min-width: 768px) and (min-height: 1024px) {
  .heroContainer{margin-bottom: -93%;}
  .heroBanner{margin-bottom: -109%;}
  .downHolder{height: 120px;margin: 20px;}
  .brandBanner{height: 120px;margin: 15px;}
  .aboutHolder{height: 400px;margin: 10px;}
  .retailHolder{height: 100px;margin: 10px;}
}

@media screen and (min-width: 800px) and (min-height: 360px) {
  .heroContainer{margin-bottom: -10%;}
  .heroBanner{margin-bottom: -22%;}
  .downHolder{height: 150px;margin: 20px;}
  .brandBanner{height: 150px;margin: 15px;}
  .aboutHolder{height: 400px;margin: 10px;}
  .retailHolder{height: 100px;margin: 10px;}
}

@media screen and (min-width: 800px) and (min-height: 480px) {
  .heroContainer{margin-bottom: -20%;}
  .heroBanner{margin-bottom: -35%;}
  .downHolder{height: 120px;margin: 20px;}
  .brandBanner{height: 120px;margin: 15px;}
  .aboutHolder{height: 400px;margin: 10px;}
  .retailHolder{height: 100px;margin: 10px;}
}

@media screen and (min-width: 800px) and (min-height: 1280px) {
  .heroContainer{margin-bottom: -120%;}
  .heroBanner{margin-bottom: -138%;}	
  .downHolder{height: 120px;margin: 20px;}
  .brandBanner{height: 120px;margin: 15px;}
  .aboutHolder{height: 400px;margin: 10px;}
  .retailHolder{height: 100px;margin: 10px;}
}

@media screen and (min-width: 810px) and (min-height: 1080px) {
  .heroContainer{margin-bottom: -92%;}
  .heroBanner{margin-bottom: -110%;}	
  .downHolder{height: 120px;margin: 20px;}
  .brandBanner{height: 120px;margin: 15px;}
  .aboutHolder{height: 400px;margin: 10px;}
  .retailHolder{height: 100px;margin: 10px;}
}

@media screen and (min-width: 896px) and (min-height: 414px) {
  .heroContainer{margin-bottom: -7%;}
  .heroBanner{margin-bottom: -24%;}	
  .downHolder{height: 150px;margin: 15px;}
  .brandBanner{height: 150px;margin: 15px;}
  .aboutHolder{height: 400px;margin: 10px;}
  .retailHolder{height: 100px;margin: 10px;}
}

@media screen and (min-width: 960px) and (min-height: 600px) {
  .heroContainer{margin-bottom: -22%;}
  .heroBanner{margin-bottom: -38%;}	
  .downHolder{height: 150px;margin: 20px;}
  .brandBanner{height: 150px;margin: 15px;}
  .aboutHolder{height: 400px;margin: 10px;}
  .retailHolder{height: 100px;margin: 10px;}
}

@media screen and (min-width: 1024px) and (min-height: 600px) {
  .heroContainer{margin-bottom: -18%;}
  .heroBanner{margin-bottom: -34%;}	
  .downHolder{height: 180px;margin: 20px;}
  .brandBanner{height: 180px;margin: 5px;}
  .aboutHolder{height: 400px;margin: 10px;}
  .retailHolder{height: 100px;margin: 10px;}
}

@media screen and (min-width: 1024px) and (min-height: 768px) {
  .heroContainer{margin-bottom: -34%;}
  .heroBanner{margin-bottom: -49%;}
  .downHolder{height: 180px;margin: 20px;}
  .brandBanner{height: 180px;margin: 10px;}
  .aboutHolder{height: 400px;margin: 10px;}
  .retailHolder{height: 100px;margin: 10px;}
}

@media screen and (min-width: 1024px) and (min-height: 1366px) {
  .heroContainer{margin-bottom: -92%;}
  .heroBanner{margin-bottom: -110%;}
  .downHolder{height: 180px;margin: 20px;}
  .brandBanner{height: 180px;margin: 10px;}
  .aboutHolder{height: 400px;margin: 10px;}
  .retailHolder{height: 100px;margin: 10px;}
}

@media screen and (min-width: 1024px) and (min-height: 1400px) {
  .heroContainer{margin-bottom: -99%;}
  .heroBanner{margin-bottom: -115%;}	
  .downHolder{height: 180px;margin: 20px;}
  .brandBanner{height: 180px;margin: 10px;}
  .aboutHolder{height: 400px;margin: 10px;}
  .retailHolder{height: 100px;margin: 10px;}
}

@media screen and (min-width: 1080px) and (min-height: 810px) {
  .heroContainer{margin-bottom: -35%;}
  .heroBanner{margin-bottom: -52%;}	
  .downHolder{height: 200px;margin: 20px;}
  .brandBanner{height: 200px;margin: 15px;}
  .aboutHolder{height: 400px;margin: 10px;}
  .retailHolder{height: 100px;margin: 10px;}
}

@media screen and (min-width: 1280px) and (min-height: 800px) {
  .heroContainer{margin-bottom: -22%;}
  .heroBanner{margin-bottom: -39%;}
  .downHolder{height: 200px;margin: 20px;}
  .brandBanner{height: 200px;margin: 15px;}
  .aboutHolder{height: 400px;margin: 10px;}
  .retailHolder{height: 100px;margin: 10px;}
}

@media screen and (min-width: 1366px) and (min-height: 768px) {
  .heroContainer{margin-bottom: -16%;}
  .heroBanner{margin-bottom: -33%;}	
  .downHolder{height: 200px;margin: 20px;}
  .brandBanner{height: 200px;margin: 15px;}
  .aboutHolder{height: 400px;margin: 10px;}
  .retailHolder{height: 100px;margin: 10px;}
}

@media screen and (min-width: 1366px) and (min-height: 1024px) {
  .heroContainer{margin-bottom: -34%;}	
  .heroBanner{margin-bottom: -52%;}
  .downHolder{height: 200px;margin: 20px;}
  .brandBanner{height: 200px;margin: 15px;}
  .aboutHolder{height: 400px;margin: 10px;}
  .retailHolder{height: 100px;margin: 10px;}
}

@media screen and (min-width: 1400px) and (min-height: 900px) {
  .heroContainer{margin-bottom: -22%;}	
  .heroBanner{margin-bottom: -38%;}	
  .downHolder{height: 200px;margin: 20px;}
  .brandBanner{height: 200px;margin: 15px;}
  .aboutHolder{height: 400px;margin: 10px;}
  .retailHolder{height: 100px;margin: 10px;}
}

@media screen and (min-width: 1440px) and (min-height: 1024px) {
   .heroContainer{margin-bottom: -30%;}	
   .heroBanner{margin-bottom: -48%;}
   .downHolder{height: 200px;margin: 20px;}
   .brandBanner{height: 200px;margin: 15px;}
   .aboutHolder{height: 400px;margin: 10px;}
   .retailHolder{height: 100px;margin: 10px;}
}

@media screen and (min-width: 1600px) and (min-height: 900px) {
  .heroContainer{margin-bottom: -15%;}	
  .heroBanner{margin-bottom: -33%;}	
  .downHolder{height: 200px;margin: 20px;}
  .brandBanner{height: 200px;margin: 15px;}
  .aboutHolder{height: 400px;margin: 10px;}
  .retailHolder{height: 100px;margin: 10px;}
}

@media screen and (min-width: 1680px) and (min-height: 1050px) {
  .heroContainer{margin-bottom: -22%;}
  .heroBanner{margin-bottom: -38%;}	
  .downHolder{height: 200px;margin: 20px;}
  .brandBanner{height: 200px;margin: 15px;}
  .aboutHolder{height: 400px;margin: 10px;}
  .retailHolder{height: 100px;margin: 10px;}
}

@media screen and (min-width: 1730px) and (min-height: 880px) {
  .heroContainer{margin-bottom: -9%;}	
  .heroBanner{margin-bottom: -27%;}}

@media only screen and (min-width: 1920px) and (min-height: 1080px) {
  .heroContainer{margin-bottom: -15%;}	
  .heroBanner{margin-bottom: -36%;}	
  .downHolder{height: 200px;margin: 20px;}
  .brandBanner{height: 200px;margin: 15px;}
  .aboutHolder{height: 400px;margin: 10px;}
  .retailHolder{height: 100px;margin: 10px;}
}

@media only screen and (min-width: 1920px) and (min-height: 1200px) {
  .heroContainer{margin-bottom: -21%;}	
  .heroBanner{margin-bottom: -42%;} 	
  .downHolder{height: 200px;margin: 20px;}
  .brandBanner{height: 200px;margin: 15px;}
  .aboutHolder{height: 400px;margin: 10px;}
  .retailHolder{height: 100px;margin: 10px;}
}