/* change navbar background on collapse */

#bubblePages{
	background-color: #1ef8eb !important;
}

#bubblePages2{
	background-color: #10b7fd !important;
}

#bagSection{
	background-color: #1ef8eb !important;
	
}

html {
  scroll-behavior: smooth; 
}
section {
  scroll-margin-top: 100px;	
}

#sectionHeader{
		margin-top: 40px;
	}	
@media (min-width: 600px){
	#sectionHeader{
		margin-top: 25px;
	}
}

.h1, h1 {
  font-family: 'rifficbold';
  font-size: 24px;
  color: #FFF;
  text-align: center;
  /*text-transform: uppercase;*/
  letter-spacing: 1px;
  margin-left: 10px;
  margin-top: 15px;
  margin-bottom: -25px;    
}

@media (min-width: 768px) {
  .h1, h1 { 
    font-size: 30px;
  }
}

@media (min-width: 992px) {
  .h1, h1 {

  }
}

h2 {
  font-family: 'rifficbold';
  font-size: 28px;
  color: #ffffff;
  text-align: center;
  margin: 25px 5px;
}

@media (min-width: 576px) {
  h2 {
    font-size: 36px;
  }
}
@media (min-width: 768px) {
  h2 {
    font-size: 40px;
  }
}

.h3, h3 {
  font-family: 'Raleway';
  font-weight: 600;	
  color: #FFFFFF;
  font-size: 24px;
  display: inline-block;
  text-align: center;    
}

.h4, h4 {
  font-family: 'rifficbold';
  font-size: 20px;
  color: #FFF;
  text-align: center;
  /*text-transform: uppercase;*/
  letter-spacing: 1px;

  margin: 25px 10px 0 10px;
	
      
}

@media (min-width: 768px) {
  .h4, h4 { 
    font-size: 28px;
  }
}

@media (min-width: 992px) {
  .h4, h4 {

  }
}

.h7, h7{
  font-family: 'Raleway';
  font-weight: 700;
  font-size: 18px;
  color: #FFF;
  text-align: left;
  line-height: 1.1;
  letter-spacing: 1px;
  word-spacing: 1.5px;
  margin: 20px 0;   
}

@media (min-width: 414px){
	.h7, h7{
	font-size: 20px;	
}
}

@media (min-width: 768px){
	.h7, h7{
	font-weight: 700;	
	font-size: 24px;	
}
}

.p, p {
  font-family: 'Raleway';
  font-weight: 700;
  font-size: 16px;
  color: #FFF;
  text-align: left;
  line-height: 1.1;
  letter-spacing: 1px;
  word-spacing: 1.5px;
  margin: 20px 30px;   
}

@media (min-width: 414px){
	.p, p{
	font-size: 17px;	
}
}

@media (min-width: 768px){
	.p, p{
	font-weight: 600;	
	font-size: 20px;
}
}

a, a:hover, a:focus, a:active {
      text-decoration: none;
      color: inherit;
}

.altIntro {
    padding-top: 20px;
    align-content: center;
    text-align: center;
}

@media (min-width: 768px){
    .altIntro {
    padding-top: 20px;
}
}

.altMode{
  font-family: 'Raleway';
  font-weight: 700;
  font-size: 16px;
  color: #FFF;
  text-align: center;
  line-height: 1.1;
  letter-spacing: 1px;
  word-spacing: 1.5px;
  margin: 20px 30px;   
}

@media (min-width: 414px){
	.altMode{
	font-size: 17px;	
}
}

@media (min-width: 768px){
	.altMode{
	font-weight: 600;	
	font-size: 20px;
	text-align: left;	
}
}

/*--Main Page Intro--*/
#aboutSection{
	
	margin: 100px;
}

.storyMode {
	margin-bottom: 15px;
	text-align: center;
}

#mainGrid {
    padding: 25px;
}

@media (min-width: 576px){
    #mainGrid {
    padding: 25px 0 50px 0;
}
}

@media (min-width: 992px){
    #mainGrid {
    padding: 50px 0 25px 0;
}
}

/*-----stripes---*/
#sectionStripe1{height: 0px;}
#sectionStripe2{height: 0px;}
#sectionStripe3{height: 0px;}

@media (min-width: 768px){
	#sectionStripe1{
	background-image: url("../../assets/img/bg/characterStripe2.svg");
	background-position: center;
	background-repeat: repeat;
	background-size: contain;	
	height: 100px;
}
	#sectionStripe2{
	background-image: url("../../assets/img/bg/characterStripe1.svg");
	background-position: center;
	background-repeat: repeat;
	background-size: contain;	
	height: 100px;
}
	
	#sectionStripe3{
	background-image: url("../../assets/img/bg/characterStripe3.svg");
	background-position: center;
	background-repeat: repeat;
	background-size: contain;	
	height: 100px;
}
}

.myPad{
	margin-top: 50px;
}
@media (min-width: 768px){
	.myPad{
	margin-top:25px;
}
}
	
#mediaSection {
    margin: 15px 0 0 0;
	position: relative;
}	

#bagPad{
	padding: 0 0;
}

@media (min-width: 768px){
	#bagPad{
	padding: 0 8%;
}
}

.bagMobile{
	margin-left: 50px;
}

@media (min-width: 768px){
	.bagMobile{
	margin-left: 0;
}
}

/*----------BRANDS PAGE-----------*/
	
#brandsTalk{
    align-content: center;
	margin-top:-10px;
}	
@media (min-width: 600px){
	#brandsTalk{
	margin-top:0px;
}
}

#brandsGrid {
  padding-top: 30px;
}	
/*---RETAIL---*/
	
#retailPage {
  background-color: #ffa810 !important;
}
/*-----FAQ---*/
	.extraBox{
		align-content: center;
		text-align: left;
	}	
	
	
/*----------MSIC PAGE--------*/


#miscPage{
align-content: center;
}


.miscHolder {
  height: 190px;
  margin: 24px 0 20px 0;    
}

@media (min-width: 576px){
 .miscHolder {
  height: 220px;
}
}

@media (min-width: 768px){
 .miscHolder {
  height: 300px;
}
}

.miaImg {
  background-image: url("../../assets/img/misc/404.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
	
	
/* Solid border */
hr {
  border-top: 3px solid #FFF;
}