body{
	text-align: center;
	font-family: montserrat;
	color: #ffffff;
}

@font-face {
  font-family: "DCCRegularBlack11"; 
  src: url("file:///https://nicepage.axisdigitalleap.com/Aromixx/bbq/dcc-sharp-distress-black.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* BACKGROUND IMAGE */
#background1 .background1{
	background-repeat: no-repeat;
	background-size: 68.5% 100%;
	background-position: center;
	position: relative;
	min-height: 881px;
    background-position: 50% 50%;
    width: 1200px;
}

#background2 .background2{
	background-repeat: no-repeat;
	background-size: 68.5% 100%;
	background-position: center;
	position: relative;
	min-height: 881px;
    background-position: 50% 50%;
    width: 1200px;
}

#background3 .background3{
	background-repeat: no-repeat;
	background-size: 68.5% 100%;
	background-position: center;
	position: relative;
	min-height: 881px;
    background-position: 50% 50%;
    width: 1200px;
}

#background4 .background4{
	background-repeat: no-repeat;
	background-size: 68.5% 100%;
	background-position: center;
	position: relative;
	min-height: 881px;
    background-position: 50% 50%;
    width: 1200px;
}

#background5 .background5{
	background-repeat: no-repeat;
	background-size: 68.5% 100%;
	background-position: center;
	position: relative;
	min-height: 881px;
    background-position: 50% 50%;
    width: 1200px;
}



/* CONTENTS IN EACH BACKGROUND */
#background1 .content9 {
    position: absolute;
    font-size: 40px;
    top: 9em;
    left: 20.8em;
    color: #FFFFFF;
    font-family: 'Montserrat', Black, sans-serif;
    font-style: normal;
    font-weight: 800;
    padding: 1px;
    text-align: left;
    z-index: 1;
    line-height: 1.2;
}

#background1 .content2 {
    position: absolute;
    font-size: 36px;
    top: 13em;
    left: 22.2em;
    transform: translate(50%, 0);
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 800;
    padding: 1px;
    text-align: left;
    z-index: 1;

}

#background1 .content3 {
    position: absolute;
    font-size: 34px;
    top: 15.7em;
    left: 20.7em;
    transform: translate(50%, 0);
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 800;
    padding: 1px;
    z-index: 1;

}

#background1 .content4 {
    position: absolute;
    font-size: 34px;
    top: 17.5em;
    left: 22.6em;
    transform: translate(50%, 0);
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 800;
    padding: 1px;
    z-index: 1;

}

#background1 .content5 {
    position: absolute;
    font-size: 30px;
    top: 2.3em;
    left: 7.3em;
    transform: translate(50%, 0);
    color: #FFFFFF;
    font-family: 'Montserrat Alternates', Bold, sans-serif;
    font-style: normal;
    font-weight: 700;
    padding: 1px;
    z-index: 1;
}

#background1 .content6 {
    position: absolute;
    font-size: 91px;
    top: 1.1em;
    transform: translate(33%, 0);
    color: #f8b828;
    font-family: "DCC-SharpDistressBlack";
    font-style: normal;
    font-weight: 700;
    padding: 1px;
    z-index: 1;
}

#background1 .content6 .highlight {
  color: #f03a16;
}

#background1 .content7 {
    position: absolute;
    font-size: 43px;
    top: 16.8em;
    left: 18.3em;
    transform: translate(50%, 0) rotate(10deg);
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 800;
    padding: 1px;
    line-height: 1;
    z-index: 1;
}

#background1 .content8 {
    position: absolute;
    font-size: 16px;
    top: 50.8em;
    left: 52.3em;
    transform: translate(50%, 0) rotate(10deg);
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 800;
    padding: 1px;
    line-height: 1;
    z-index: 1;
}

/* BACKGROUND2 */


#background2 .content1 {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: 14.2em;
    width: 100%;
    font-size: 67.3px;
    color: #000000;
    text-align: center;
    font-weight: 400; 
    /*padding: 20px;*/
    font-family: "DCCRegularBlack11", sans-serif;
    z-index: 1;
    font-style: normal;
}




#background2 .top2 {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: 34.5em;
    width: 100%;
    font-size: 33px;
    color: #000000;
    text-align: center;
    font-family: 'Montserrat', sans-serif; 
    font-weight: 900; 
    z-index: 1;
}


#background2 .first {
    position: absolute;
    transform: translate(26.8%, 0);
    top: 50.5em;
    width: 100%;
    font-size: 23.5px;
    color: #000000;
    font-weight: bold;
    font-style: italic;
    text-align: left;
    list-style-type: circle;
    font-family: 'Montserrat', sans-serif;
    z-index: 1;
}


#background2 .first .highlight1 {
    font-weight: bolder;
}

#background2 .top3 {
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
    top: 38.4em;
    width: 100%;
	font-size: 33px;
    color: #000000;
	font-weight: 900;
	text-align: center;
    font-family: 'Montserrat', sans-serif; 
    z-index: 1; /* Add this line to bring the element in front of the background image */

}

#background2 .second {
    position: absolute;
    transform: translate(23.3%, 0);
    top: 58.9em;
    width: 100%;
    font-size: 22.3px;
    color: #000000;
    font-weight: bold;
    font-style: italic;
    text-align: left;
    list-style-type: circle;
    font-family: 'Montserrat', sans-serif;
    z-index: 1;
}

#background2 .second .highlight2 {
    font-weight: bolder;
}

#background2 .top4 {
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
    top: 42.5em;
    width: 100%;
	font-size: 33px;
    color: #000000;
	font-weight: 900;
	text-align: center;
    font-family: 'Montserrat', sans-serif; 
    z-index: 1; 
}

#background2 .third {
  position: absolute;
  transform: translate(27.4%, 0);
  top: 65.8em;
  width: 100%;
  font-size: 22px;
  color: #000000;
  font-weight: bold;
  font-style: italic;
  text-align: left;
  list-style-type: circle;
  font-family: 'Montserrat', sans-serif;
  z-index: 1;
}

#background2 .top5 {
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
    top: 46.4em;
    width: 100%;
	font-size: 33px;
    color: #000000;
	font-weight: 900;
	text-align: center;
    font-family: 'Montserrat', sans-serif; 
    z-index: 1; 
}

#background2 .fourth {
    position: absolute;
    transform: translate(24.4%, 0);
    top: 70.8em;
    width: 100%;
    font-size: 22.3px;
    color: #000000;
    font-weight: bold;
    font-style: italic;
    text-align: left;
    list-style-type: circle;
    font-family: 'Montserrat', sans-serif;
    z-index: 1;
}

#background2 .fourth .highlight3 {
    font-weight: bolder;
}


#background2 .top6 {
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
    top: 50.4em;
    width: 100%;
	font-size: 33px;
    color: #000000;
	text-align: center;
    font-family: 'Montserrat', sans-serif; 
    font-weight: 900;   
    z-index: 1; 
}

#background2 .fifth {
    position: absolute;
    transform: translate(32.5%, 0);
    top: 81.6em;
    width: 100%;
    font-size: 21px;
    color: #000000;
    font-weight: bold;
    font-style: italic;
    text-align: left;
    list-style-type: circle;
    font-family: 'Montserrat', sans-serif;
    z-index: 1;
}


/* RESOLUTION */
@media (min-width: 481px) and (max-width: 768px) {
  #background1 .content1{
    top: 40.7em;
    left: 26em;
    transform: translate(254px, 0);
  }

  #background2 .top2 {
    left: 77%;
    transform: translate(-50%, 0);
    top: 52em;
    width: 100%;
  }

}

@media (min-width: 769px) and (max-width: 1023px) {

}

@media only screen and (max-width: 1024px) {
  #background2 .content1 {
    top: 58rem;
    left: -15%;
    transform: translate(50%, 0);
    white-space: nowrap; 
  }

  #background2 .top2 {
    left: 90%;
    transform: translate(-50%, 0);
    top: 33em;
    white-space: nowrap; 
  }

  #background2 .first {
    left: 90%;
    transform: translate(-50%, 0);
    top: 46.6em;
    white-space: nowrap; 

  }

  #background2 .top3 {
    left: 90%;
    transform: translate(-50%, 0);
    top: 37.5em;
    white-space: nowrap; 

  }

  #background2 .second {
    left: 84%;
    transform: translate(-50%, 0);
    top: 60.2em;
    white-space: nowrap; 

  }

  #background2 .top4 {
    left: 85%;
    transform: translate(-50%, 0);
    top: 41.5em;
    white-space: nowrap; 

  }

  #background2 .third {
    left: 90%;
    transform: translate(-50%, 0);
    top: 64.2em;
    white-space: nowrap; 

  }

  #background2 .top5 {
    left: 90%;
    transform: translate(-50%, 0);
    top: 45.9em;
    white-space: nowrap; 
  }

  #background2 .fourth {
    left: 90%;
    transform: translate(-50%, 0);
    top: 74.2em;
    white-space: nowrap; 

  }

    #background2 .top6 {
      left: 90%;
      transform: translate(-50%, 0);
      top: 49.9em;
      white-space: nowrap; 
  }

  #background2 .fifth {
    left: 90%;
    transform: translate(-50%, 0);
    top: 80.5em;
    white-space: nowrap; 

  }


  
    
}

@media (min-width: 1025px) and (max-width: 1439px) {
 #background1 .content1 {
    top: 45.85em;
    left: 33.2em;
    transform: translate(0, 0);
  }

  #background2 .top2 {
    left: 50%;
    transform: translate(-50%, 0);
    top: 52em;
    width: 100%;
  }

}

@media (min-width: 1440px) and (max-width: 1445px) {
 #background1 .content1 {
    top: 45.85em;
    left: 33.2em;
    transform: translate(0, 0);
  }

  #background2 .top2 {
    left: 50%;
    transform: translate(-50%, 0);
    top: 52em;
    width: 100%;
  }

}

@media (min-width:2560px) and (max-width: 2563px) {
   #background1 .content1 {
    top: 45.85em;
    left: 59.2em;
    transform: translate(0, 0);
  }

  #background2 .top2 {
    left: 50%;
    transform: translate(-50%, 0);
    top: 52em;
    width: 100%;
  }

}