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

/*
Junior Rangers
*/

.info-section {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
}

.info-box {
    flex: 1 1 100%;
	text-align: center;
  }

.info-box img {
  width: 100%;
  height: auto;
  border-radius: 16px;
}



/* The Modal (background) */
.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 5;/* Sit on top */
	left: 0;
	margin-top: -527px;
	width: 100%; /* Full width */
	height: 253vh; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
  }
  
  /* Modal Content */
  .modal-content {
	margin: auto;
	width: 100%;
	  top: 75%;
	  position: relative;
  }
  
  /* The Close Button */
  .close {
	color: white;
	float: right;
	font-size: 50px;
	  margin-top: -30px;
	font-weight: bold;
	  z-index: 6;
	  position: relative;
	  top: 16px;
	  right: 2%;
  }
  
  .close:hover{
	color: #000;
	text-decoration: none;
	cursor: pointer;
	  z-index:7;
}
	/* STICKERS **************************/
	
	#booklet {
		position: relative;
		height: 170px;
		margin-bottom: -76px;
		top: -58px;
	}
	
	/* STICKERS END **************************/
	#passport{
		width: 100%;
	}
	
	#landingTxt{
		grid-column: col-start 1/span 10;
		text-align: center;
		margin-bottom: 70px;
		margin-top: 60px;
	}
	#landingTxt2{
		grid-column: col-start 1/span 10;
		text-align: center;
	}
	#landingTxt3{
		grid-column: col-start 1/span 10;
		text-align: center;
	}
	#landingTxt5{
		grid-column: col-start 1/span 10;
	}
	#notepad{
		grid-column: col-start 1 / span 10;
        display: initial;
        margin-left: 20px;
        margin-right: 20px;
	}
	#tourDetail{
		grid-column: 1 / span 10;
	}
	.tourDetailH2 {
		font-size: 2.35em;
	}
	.tourDetailTxt {
		font-size: 1.1em;
	}
	#tourDetailH2{
		text-align: center;
		line-height: 100%;
	}
	.tourDesc1 {
  		grid-column: 1 / span 10;
		text-align: center;
	}
	.tourDesc2 {
  		grid-column: 1 / span 10;
		text-align: center;
	}
	.spacing-tour{
		margin-top: -295px;
	}
	#fullColumn {
		grid-column: col-start 1/span 10; 
		background: url('/wp-content/uploads/2024/07/2024_Discover_BarkRangers_Texture_1920x1186.png'); 
		background-size: cover;
		margin-top: 20px;
	}
	.sticker-container{
		grid-column: col-start 1/span 10;
		margin-top: 25px;
		letter-spacing: 10px;
		margin: auto;
	}
	.notepadNums {
        border-radius: 50%;
        width: 27px;
        height: 27px;
        color: white;
        text-align: center;
        font-size:1.12em;
        background-color: green;
      }
	#boxes{
		display: grid;
  		grid-template-columns: auto auto auto auto auto;
	}
	.box1 {
		grid-column: 1 / span 2;
	}
	.box2 {
		grid-column: 3 / span 2;
	}
	.box3 {
		grid-column: 5 / span 2;
	}
	.box4 {
		grid-column: 7 / span 2;
	}
	.box5 {
		grid-column: 9 / span 2;
	}
	#img1{
		width: 15px;
		height: auto;
		text-align: center;
		margin-top:5px;
		margin-bottom: 5px;
		visibility: hidden;
	}
	#img2{
		width: 15px;
		height: auto;
		text-align: center;
		margin-top:5px;
		margin-bottom: 5px;
		visibility: hidden;
	}
	#img3{
		width: 15px;
		height: auto;
		text-align: center;
		margin-top:5px;
		margin-bottom: 5px;
		visibility: hidden;
	}
	#img4{
		width: 15px;
		height: auto;
		text-align: center;
		margin-top:5px;
		margin-bottom: 5px;
		visibility: hidden;
	}
	#img5{
		width: 15px;
		height: auto;
		text-align: center;
		margin-top:5px;
		margin-bottom: 5px;
		visibility: hidden;
	}
	#sticker1{
		width: 90px; 
		height: auto;
	}
	#sticker2{
		width: 90px; 
		height: auto;
	}
	#sticker3{
		width: 90px; 
		height: auto;
	}
	#sticker4{
		width: 90px; 
		height: auto;
		display: none;
	}
	#sticker5{
		width: 90px; 
		height: auto;
		display: none;
	}
	#sticker4m{
		width: 90px; 
		height: auto;
	}
	#sticker5m{
		width: 90px; 
		height: auto;
	}	
	.arrow{
  		border: solid rgb(0, 128, 0);
  		border-width: 0 6px 6px 0;
  		display: inline-block;
  		padding: 8px;
	}
	.down {
  		transform: rotate(45deg);     
		display: initial;
	}
	.rotate{
		 -webkit-transform: rotate(180deg);
	}
	.up {
  		transform: rotate(-135deg);
	}
	
	.mLCol1 { grid-area: bp; }

	.mRCol1 { grid-area: data; }

	.notepadContainer2 {
 	 	display: grid;
  		grid-template-areas:
		'bp data';
	  	grid-gap: 10px;
	}

	.notepadContainer2 div {
		  text-align: left;
	}
	
	#notepadMobile {
		grid-column: 1/span 10;
	}
	#num1{
		margin-top: 80px;
	}
	
	#num2{
		margin-top: 41px;
	}
	#num3{
		margin-top: 72px;
	}
	#num4{
		margin-top: 72px;
	}
	#num5{
		margin-top: 55px;
	}
	#num6{
		margin-top: 55px;
	}
	/* Specific to notepad */
	.LCol1 { grid-area: bp1; grid-template-columns: 97%; display: grid;}
	.LCol2 { grid-area: bp2; }
	.LCol3 { grid-area: bp3; }
	.LCol4 { grid-area: bp4; grid-template-columns: 95%; display: grid;}
	.LCol5 { grid-area: bp5; }
	.LCol6 { grid-area: bp6; }
	.LCol7 { grid-area: bp7; }
	.LCol8 { grid-area: bp8; }
	

	.RCol1 { grid-area: content1; }
	.RCol2 { grid-area: content2; }
	.RCol3 { grid-area: content3; }
	.RCol4 { grid-area: content4; }
	.RCol5 { grid-area: content5; }
	.RCol6 { grid-area: content6; }
	.RCol7 { grid-area: content7; }
	.RCol8 { grid-area: content8; }


	.notepadContainer {
 	 	display: grid;
  		grid-template-areas:
		'bp1 content1'
		'bp2 content2'
		'bp3 content3'
		'bp4 content4';
	  	grid-gap: 10px;
		grid-template-columns: 7.5%;
		margin-bottom: 40px;
		margin-top: 55px;
	}

	.notepadContainer div {
		  text-align: center;
	}
	/* end of notepad */
	#desktopHead {
		display: none;
	}
	.landingColor {
		color: black;
	}
	#johnson {
		display: none;
	}
	#roosevelt {
		display: none;
	}
	#donaldson {
		display: none;
	}
	#thompson{
		display: none;
	}
	.emblem{
		width: 190px;
	}
	.barklandingH2{
		font-size: 1.5em !important;
	}
	h2{
		font-size: 1.25em !important;
	}
	.thompsonMobile{
		position: relative;
		width: 95px;
		top: 145px;
		left: -22px;
	}
	.donaldsonMobile{
		position: relative;
		width: 110px;
		top: 413px;
		left: 24%;
		margin-left: 44px;
	}
	#mcbark {
		margin-bottom: 60px;
	}
	.modalHeight {
		position: relative;
		top: 615px !important;
	}
	#mobileStickers {
		margin-bottom: -155px;
	}

	/* Form Settings */
	.form-container {
		background: url('/wp-content/uploads/2024/07/2024_Discover_BarkRangers_Email-PopOut_Texture_745x520.png');
		padding: 20px;
		border-radius: 10px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}
	#barkRangersForm {
		display: grid;
		grid-template-areas:
        'first first first first first first'
		'second second second second second second'
        'third third third third third third'
        'fourth fourth fourth fourth fourth fourth'
		'fifth fifth fifth fifth fifth fifth'
		'sixth sixth sixth sixth sixth sixth'
		'seventh seventh seventh seventh seventh seventh'
		'eighth eighth eighth eighth eighth eighth'
		'ninth ninth ninth ninth ninth ninth';
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 10px;
		width: 85%;
		margin: auto;
		margin-top: 30px;
	}
	#formTitle {
		margin-left: 20% !important;
		margin-right: 20% !important;
	}
	input[type="text"], input[type="email"], input[type="number"] {
		width: 100%;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 5px;
		margin-bottom: 0px !important;
		background-color: white !important;
		height: 44px;
		text-align: left;
	}
	#barkForm input[type="submit"] {
		padding: 10px;
		border: none;
		background-color: #5ef091;
		color: black;
		border-radius: 5px;
		cursor: pointer;
		font-size: 16px;
		margin: auto;
	}
	#barkForm input[type="submit"]:hover {
		-webkit-transition-property: all;
    	-o-transition-property: all;
    	transition-property: all;
    	-webkit-transition-duration: .35s;
    	-o-transition-duration: .35s;
    	transition-duration: .35s;
    	-webkit-transition-timing-function: ease-in-out;
    	-o-transition-timing-function: ease-in-out;
    	transition-timing-function: ease-in-out;
		background-color: white;
	}
	.radio-group {
		display: flex;
		align-items: center;
		grid-column: span 2;
	}
	.radio-group label {
		margin-right: 10px;
	}
	.radio-group input {
		margin-right: 5px;
	}
	.print-link {
		text-align: center;
		grid-column: span 2;
		margin-top: 10px;
	}
	.print-link a {
		color: white;
		text-decoration: none;
	}
	input::placeholder {
        color: black;
        opacity: .8; /* Firefox */
      }
      
      input:-ms-input-placeholder { /* Internet Explorer 10-11 */
       color: black;  
       opacity: .5; /* Firefox */
      }
      
      input::-ms-input-placeholder { /* Microsoft Edge */
       color: black;
       opacity: .8; /* Firefox */
      }

	.item1 { grid-area: first; }
	.item2 { grid-area: second; }
	.item3 { grid-area: third; }
	.item4 { grid-area: fourth; }
	.item5 { grid-area: fifth; }
	.item6 { grid-area: sixth; width: 100% !important; }
	.item7 { grid-area: seventh; width: 100%; margin-left: 0%;}
	.item8 { grid-area: eighth; }
	.item9 { grid-area: ninth; }
	/* Form Settings END */
	.captchaS{
		display: block;
	}
	.captchaL{
		display: none;
	}
	.captcha-container {
		position: relative;
        top: 50px;
        left: 20px;
        margin-top: 20px;
	}
	.bookletDiv {
		text-align: center;
	}
	#confirmation {
		display: none;
	}
	#tempBonus {
		margin-top: 204px;
	}
}

@media screen and (min-width: 350px) {
	.donaldsonMobile{
		position: relative;
		width: 110px;
		top: 373px;
		left: 35%;
		margin-left: 33px;
	}
}
@media screen and (min-width: 370px) {
	.donaldsonMobile{
		position: relative;
		width: 110px;
		left: 36%;
		top: 328px;
		margin-left: 37px;
		top: 143px;
	}
	.thompsonMobile{
		position: relative;
		width: 95px;
		top: 330px;
		left: -22px;
	}
}

@media screen and (min-width: 400px){
	#booklet {
		position: relative;
		height: 200px;
		margin-bottom: -76px;
		top: -58px;
	}
	.donaldsonMobile{
		left: 36%;
		margin-left: 58px;
		top: 308px;
	}
	.thompsonMobile {
        left: -29px;
		top: 290px;
	}
	#formTitle {
		margin-left: 25% !important;
		margin-right: 25% !important;
	}
}


@media screen and (min-width: 450px) {
	.donaldsonMobile{
		left: 36%;
		margin-left: 91px;
		top: 290px;
	}
	.thompsonMobile {
        left: -29px;
		top: 285px;
	}
	#formTitle {
		margin-left: 30% !important;
		margin-right: 30% !important;
	}
}

@media screen and (min-width: 500px){
	.donaldsonMobile{
		left: 36%;
		margin-left: 129px;
		top: 240px;
	}
	.thompsonMobile {
        left: -20px;
		top: 245px;
	}
}

@media only screen and (max-width: 539px) {
	#participate{
		margin-top: 45px;
		margin-bottom: 45px;
	}
	#participate div p {
		color: black;
	}
	.noteDesc {
		margin-left: 1% !important;
		line-height: 1.2;
		margin-right: 5% !important;
	}
	#mobileHead {
		margin-bottom: 30px;
		margin-top: 10px;
	}
}

@media screen and (min-width: 540px){
	.hamsa{
		grid-column: col-start 1/span 1;
		display: initial;
	}
	.folk{
		display: initial;
		grid-column: col-start 8/span 3;
	}
	.church{
		display: initial;
		grid-column: col-start 1/span 1;
	}
	.fan{
		grid-column: col-start 1/span 1;
	}
	.bagel{
		grid-column: col-start 3/span 1;
		display: initial;
	}
	#hamsa{
		position: relative;
    	top: -194px;
    	left: 30px;
    	width: 150%;
	}
	#folk {
    	position: relative;
    	top: -154px;
    	left: 8px;
    	width: 80%;
    	margin-bottom: -300px;
	}
	#church {
    	position: relative;
    	top: 605px;
    	left: 40px;
    	width: 200%;
    	margin-bottom: -300px;
	}
	#fan{
		position: relative;
    	top: -80px;
    	left: 19px;
    	width: 230%;
    	margin-bottom: -300px;
	}
	#bagel{
		position: relative;
    	top: 1464px;
    	left: -95px;
    	width: 150%;
    	margin-bottom: -300px;
	}
	.spacing-tour{
		margin-top: -250px;
	}
	.sticker-container{
		grid-column: col-start 1/span 10;
		margin: auto;
		margin-top: 25px;
		letter-spacing: 10px
	}
	
	#notepad{
		grid-column: col-start 2/span 8;
		display: initial;
	}
	#boxes{
		display: grid;
  		grid-template-columns: auto auto auto auto auto;
	}
	.box1 {
		grid-column: 1 / span 2;
	}
	.box2 {
		grid-column: 3 / span 2;
	}
	.box3 {
		grid-column: 5 / span 2;
	}
	.box4 {
		grid-column: 7 / span 2;
	}
	.box5 {
		grid-column: 9 / span 2;
	}
	#img1{
		width: 15px;
		height: auto;
		text-align: center;
		margin-top:5px;
		margin-bottom: 5px;
		visibility: hidden;
	}
	#img2{
		width: 15px;
		height: auto;
		text-align: center;
		margin-top:5px;
		margin-bottom: 5px;
		visibility: hidden;
	}
	#img3{
		width: 15px;
		height: auto;
		text-align: center;
		margin-top:5px;
		margin-bottom: 5px;
		visibility: hidden;
	}
	#img4{
		width: 15px;
		height: auto;
		text-align: center;
		margin-top:5px;
		margin-bottom: 5px;
		visibility: hidden;
	}
	#img5{
		width: 15px;
		height: auto;
		text-align: center;
		margin-top:5px;
		margin-bottom: 5px;
		visibility: hidden;
	}
	#sticker1{
		width: 90px; 
		height: auto;
	}
	#sticker2{
		width: 90px; 
		height: auto;
	}
	#sticker3{
		width: 90px; 
		height: auto;
	}
	#sticker4{
		width: 90px; 
		height: auto;
		display: initial;
	}
	#sticker5{
		width: 90px; 
		height: auto;
		display: initial;
	}	
	#sticker4m{
		width: 90px; 
		height: auto;
		display: none;
	}
	#sticker5m{
		width: 90px; 
		height: auto;
		display: none;
	}	
	#landingTxt{
		grid-column: col-start 2/span 8;
	}
	#notepadMobile {
		display:none;
	}
	#mobileHead {
		display: none;
	}
	#desktopHead {
		display: initial;
		line-height: 1.2em;
	}
	#img1{
		width: 50px;
		height: auto;
		text-align: center;
		margin-top:15%;
		margin-bottom: 15%;
		visibility: hidden;
	}
	#img2{
		width: 50px;
		height: auto;
		text-align: center;
		margin-top:15%;
		margin-bottom: 15%;
		visibility: hidden;
	}
	#img3{
		width: 50px;
		height: auto;
		text-align: center;
		margin-top:15%;
		margin-bottom: 15%;
		visibility: hidden;
	}
	#img4{
		width: 50px;
		height: auto;
		text-align: center;
		margin-top:15%;
		margin-bottom: 15%;
		visibility: hidden;
	}
	#img5{
		width: 50px;
		height: auto;
		text-align: center;
		margin-top:15%;
		margin-bottom: 15%;
		visibility: hidden;
	}
	#participate div p {
		color: black;
	}
	.noteDesc {
		margin-right: 20% !important;
		line-height: 1.2em;
	}
	.landingColor {
		color: #008445;
	}
	#booklet {
		position: relative;
		height: 250px;
		margin-bottom: -225px;
		top: -82px;
	}
	.barklandingH2{
		font-size: 2em !important;
	}
	h2{
		font-size: 1.5em !important;
	}
	.notepadNums {
        border-radius: 50%;
        width: 33px;
        height: 33px;
        color: white;
        text-align: center;
        font-size:1.32em;
        background-color: green;
    }
	#mcbark {
		margin-bottom: 60px;
	}
	#fullColumn {
		margin-top: 40px;
	}
	.modal-content {
		width: 520px;
	}
	.modalHeight {
		top: 700px !important;
	}
	#barkSubmit{
		margin-top: 20px;
	}
	.captchaS{
		display: none;
	}
	.captchaL{
		display: block;
	}
	.notepadContainer {
		margin-top: 35px;
	}
	.donaldsonMobile{
		left: 36%;
		margin-left: 110px;
		top: 300px;
	}
	.thompsonMobile {
        left: -50px;
		top: 310px;
	}
}
@media screen and (min-width: 584px) {
	.donaldsonMobile{
		margin-left: 110px;
		top: 275px;
	}
	.thompsonMobile {
        left: -50px;
		top: 285px;
	}
}
@media screen and (min-width: 655px) {
	.donaldsonMobile{
		margin-left: 155px;
		top: 250px;
	}
	.thompsonMobile {
        left: -50px;
		top: 255px;
	}
}
@media screen and (min-width: 563px) {
	#bagel{
		position: relative;
    	top: 1425px;
    	left: -95px;
    	width: 150%;
    	margin-bottom: -300px;
	}
}

@media screen and (min-width: 565px) {
	#bagel{
		position: relative;
    	top: 1406px;
    	left: -95px;
    	width: 150%;
    	margin-bottom: -300px;
	}
}

@media screen and (min-width: 573px) {
	#bagel{
		position: relative;
    	top: 1384px;
    	left: -95px;
    	width: 150%;
    	margin-bottom: -300px;
	}
}

@media screen and (min-width: 630px) {
	#bagel{
		position: relative;
    	top: 1298px;
    	left: -95px;
    	width: 150%;
    	margin-bottom: -300px;
	}
}

@media screen and (min-width: 640px) {
	#church {
    	position: relative;
    	top: 629px;
    	left: 40px;
    	width: 200%;
    	margin-bottom: -300px;
	}
}

@media screen and (min-width: 650px) {
	#bagel{
		position: relative;
    	top: 1269px;
    	left: -95px;
    	width: 150%;
    	margin-bottom: -300px;
	}
}

@media only screen and (max-width: 767px) {
    #landingTxt4 {
        display: none;
    }
	#XtraSpc{
		display: none;
	}
	#landingTxt {
		margin-left: 10%;
		margin-right: 10%;

	}
}

@media screen and (min-width: 768px) {
	/* STICKERS **************************/
	.hamsa{
		grid-column: col-start 1/span 1;
	}
	.folk{
		display: initial;
		grid-column: col-start 8/span 3;
	}
	.church{
		display: initial;
		grid-column: col-start 1/span 1;
	}
	.fan{
		grid-column: col-start 1/span 1;
	}
	.skull{
		display: initial;
		grid-column: col-start 2/span 1;
	}
	.bagel{
		grid-column: col-start 3/span 1;
	}
	.pizza{
		display: initial;
		grid-column: col-start 6/span 1;
	}
	.sitar{
		display: initial;
		grid-column: col-start 7/span 1;
	}
	#hamsa{
		position: relative;
    	top: -168px;
    	left: 34px;
    	width: 150%;
	}
	#folk {
    	position: relative;
    	top: -106px;
    	left: 23px;
    	width: 80%;
    	margin-bottom: -300px;
	}
	#church {
    	position: relative;
    	top: 739px;
    	left: 40px;
    	width: 200%;
    	margin-bottom: -300px;
	}
	#fan{
		position: relative;
    	top: -70px;
    	left: 81px;
    	width: 230%;
    	margin-bottom: -300px;
	}
	#skull{
		position: relative;
    	top: 710px;
    	left: 9px;
    	width: 150%;
    	margin-bottom: -300px;
		transform: rotate(-15deg);
	}
	#bagel{
		position: relative;
    	top: 1632px;
    	left: -57px;
    	width: 150%;
    	margin-bottom: -300px;
	}
	#pizza{
		position: relative;
    	top: 124px;
    	left: 155px;
    	width: 200%;
    	margin-bottom: -300px;
	}
	#sitar{
		position: relative;
    	top: 1233px;
    	left: 98px;
    	width: 300%;
    	margin-bottom: -300px;
	}
	/* STICKERS **************************/
	#passport{
    	position: relative;
    	top: -58px;
    	left: -25px;
    	width: 550%;
    	margin-bottom: -300px;
	}
	
	.tourDesc1 {
  		grid-column: 1 / span 10;
		text-align: center;
	}
	.tourDesc2 {
  		grid-column: 4 / span 4;
		text-align: center;
	}
	#landingTxt{
		grid-column: col-start 3/span 6;
		text-align: center;
		margin-left: 0px;
		margin-right: 0px;
	}
	#landingTxt2{
		grid-column: col-start 3/span 6;
		text-align: center;
	}
	#landingTxt3{
		grid-column: col-start 2/span 4;
		text-align: center;
	}
	#landingTxt4{
		grid-column: col-start 6/span 1;
		display: initial;
	}
	#landingTxt5{
		display: none;
	}
	#notepad{
		grid-column: col-start 3/ span 6;
	}
	h2{
		font-size: 2em;
	}
	#sticker1{
		width: 130px; 
		height: auto;
	}
	#sticker2{
		width: 130px; 
		height: auto;
	}
	#sticker3{
		width: 130px; 
		height: auto;
	}
	#sticker4{
		width: 130px; 
		height: auto;
	}
	#sticker5{
		width: 130px; 
		height: auto;
	}
	#landingTxt {
		margin-top: 110px;
	}
	.modal-content {
		width: 596px;
	}
	#formTitle {
		margin-left: 0px !important;
		margin-right: 0px !important;
	}
	.item6{
		width: 130% !important;
	}
	#barkRangersForm {
		display: grid;
		grid-template-areas:
        'first first second second second second'
        'third third third third third third'
        'fourth fourth fourth fourth fifth fifth'
		'sixth empty1 seventh seventh seventh seventh'
		'eighth eighth eighth eighth empty2 ninth';
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 10px;
		width: 85%;
		margin: auto;
		margin-top: 30px;
	}
	#barkForm input[type="submit"] {
		grid-column: span 2;
		padding: 10px;
		border: none;
		background-color: #5ef091;
		color: black;
		border-radius: 5px;
		cursor: pointer;
		font-size: 16px;
		margin-top: 40px;
		margin-left: 50px;
		margin: none;
	}
	.item7 { grid-area: seventh; width: 118%; margin-left: -18%;}
	.donaldsonMobile{
		margin-left: 124px;
		top: 275px;
	}
	.thompsonMobile {
        left: -50px;
		top: 290px;
	}
}

@media screen and (min-width: 900px){
	.donaldsonMobile{
		margin-left: 165px;
		top: 250px;
	}
	.thompsonMobile {
        left: -50px;
		top: 255px;
	}
}

@media screen and (min-width: 919px){
	#sitar{
		position: relative;
    	top: 1190px;
    	left: 93px;
    	width: 300%;
    	margin-bottom: -300px;
	}
	#skull {
    	position: relative;
    	top: 681px;
    	left: 16px;
    	width: 150%;
    	margin-bottom: -300px;
    	transform: rotate(-15deg);
}
}

@media screen and (min-width: 950px) {
	/* STICKERS **************************/
	.folk{
		grid-column: col-start 8/span 3;
	}
	.church{
		grid-column: col-start 1/span 1;
		display: initial;
	}
	#hamsa{
		position: relative;
    	top: -135px;
    	left: 21px;
    	width: 100%;
	}
	#folk {
    	position: relative;
    	top: -88px;
    	left: 45px;
    	width: 80%;
    	margin-bottom: -300px;
	}
	#church {
    	position: relative;
    	top: 652px;
    	left: 40px;
    	width: 200%;
    	margin-bottom: -300px;
	}
	#skull{
		position: relative;
    	top: 636px;
    	left: 15px;
    	width: 150%;
    	margin-bottom: -300px;
		transform: rotate(-15deg);
	}
	#pizza{
		position: relative;
    	top: 175px;
    	left: 174px;
    	width: 200%;
    	margin-bottom: -300px;
	}
	#bagel{
		position: relative;
    	top: 1415px;
    	left: -57px;
    	width: 150%;
    	margin-bottom: -300px;
	}
	/* STICKERS END **************************/
	
	#tourDetail{
		grid-column: 1 / span 3;
	}
	#tourDetailH2{
		text-align: left;
	}
	.tourDetailTxt {
		font-size: 1.1em;
	}
	.spacing-tour{
		margin-top: -70px;
	}	
}

@media screen and (min-width: 972px) {
	#bagel{
		position: relative;
    	top: 1356px;
    	left: -73px;
    	width: 150%;
    	margin-bottom: -300px;
	}
	#sitar{
		position: relative;
    	top: 1153px;
    	left: 108px;
    	width: 300%;
    	margin-bottom: -300px;
	}
}

@media screen and (min-width: 977px) {
	#church {
    	position: relative;
    	top: 616px;
    	left: 40px;
    	width: 200%;
    	margin-bottom: -300px;
	}
}

@media screen and (min-width: 991px) {
	#sitar{
		position: relative;
    	top: 1131px;
    	left: 110px;
    	width: 300%;
    	margin-bottom: -300px;
	}
}
@media screen and (min-width: 1002px) {
	
	#passport{
    	position: relative;
    	top: -74px;
    	left: -25px;
    	width: 530%;
    	margin-bottom: -300px;
	}
}
@media screen and (min-width: 1040px){
	.donaldsonMobile{
		margin-left: 210px;
		top: 245px;
	}
	.thompsonMobile {
        left: -50px;
		top: 250px;
	}
}

@media screen and (min-width: 1100px) {
	/* STICKERS **************************/
	.hamsa{
		grid-column: col-start 2/span 1;
	}
	.folk{
		grid-column: col-start 11/span 3;
	}
	.fan{
		
	}
	#hamsa{
		position: relative;
    	top: -90px;
    	left: -15px;
    	width: 150%;
	}
	#folk{
		position: relative;
    	top: 200px;
    	left: 38px;
    	width: 100%;
    	margin-bottom: -300px;
	}
	#church {
    	position: relative;
    	top: 855px;
    	left: 112px;
    	width: 300%;
    	margin-bottom: -300px;
	}
	#fan{
		position: relative;
    	top: -28px;
    	left: 153px;
    	width: 230%;
    	margin-bottom: -300px;
	}
	#skull{
		position: relative;
    	top: 733px;
    	left: 110px;
    	width: 150%;
    	margin-bottom: -300px;
		transform: rotate(-15deg);
	}
	#bagel{
		position: relative;
    	top: 1529px;
    	left: 19px;
    	width: 150%;
    	margin-bottom: -300px;
	}
	#pizza{
		position: relative;
    	top: 265px;
    	left: 379px;
    	width: 200%;
    	margin-bottom: -300px;
	}
	#sitar{
		position: relative;
    	top: 1345px;
    	left: 320px;
    	width: 300%;
    	margin-bottom: -300px;
	}

	/* STICKERS END **************************/
	#passport{
		position: relative;
    	top: -25px;
    	left: -125px;
    	width: 700%;
    	margin-bottom: -300px;
	}
	
	.tourDetailTxt {
		font-size: 1.2em;
	}
	.tourDesc1 {
  		grid-column: 1 / span 10;
	}
	.tourDesc2 {
  		grid-column: 3 / span 6;
	}
	#landingTxt{
		grid-column: col-start 4/span 8;
		text-align: center;
		margin-bottom: 60px;
		margin-top: 20px;
	}
	#landingTxt2{
		grid-column: col-start 5/span 6;
		text-align: center;
	}
	#landingTxt3{
		grid-column: col-start 3/span 4;
		text-align: center;
	}
	#landingTxt4{
		grid-column: col-start 8/span 1;
		text-align: center;
	}
	#notepad{
		grid-column: col-start 4/ span 8;
	}
	.spacing-tour{
		margin-top: -70px;
	}
	#fullColumn {
		grid-column: col-start 1/span 14; 
	}
	.sticker-container{
		grid-column: col-start 1/span 14;
		margin: auto;
		margin-top: 35px;
		letter-spacing: 20px
	}
	#sticker1{
		width: 160px; 
		height: auto;
	}
	#sticker2{
		width: 160px; 
		height: auto;
	}
	#sticker3{
		width: 160px; 
		height: auto;
	}
	#sticker4{
		width: 160px; 
		height: auto;
	}
	#sticker5{
		width: 160px; 
		height: auto;
	}
	#img1{
		width: 50px;
		height: auto;
		text-align: center;
		margin-top:15%;
		margin-bottom: 15%;
		visibility: visible;
	}
	#img2{
		width: 50px;
		height: auto;
		text-align: center;
		margin-top:15%;
		margin-bottom: 15%;
		visibility: visible;
	}
	#img3{
		width: 50px;
		height: auto;
		text-align: center;
		margin-top:15%;
		margin-bottom: 15%;
		visibility: visible;
	}
	#img4{
		width: 50px;
		height: auto;
		text-align: center;
		margin-top:15%;
		margin-bottom: 15%;
		visibility: visible;
	}
	#img5{
		width: 50px;
		height: auto;
		text-align: center;
		margin-top:15%;
		margin-bottom: 15%;
		visibility: visible;
	}
	#booklet {
		position: relative;
		height: 300px;
		margin-bottom: -285px;
		top: -64px;
		left: 60%;
	}
	#johnson {
		position: relative;
		height: 330px;
		margin-bottom: -240px ;
		top: 45px;
		left: -73%;
		display: initial;
	}
	#roosevelt {
		position: relative;
		height: 200px;
		margin-bottom: -230px ;
		top: -81px;
		left: -32%;
		display: initial;
	}
	#thompson {
		position: relative;
		height: 215px;
		margin-bottom: -230px ;
		top: -38px;
		left: -39%;
		display: initial;
	}
	#donaldson {
		position: relative;
		height: 190px;
		margin-bottom: -285px;
		top: -317px;
		left: 96%;
		display: initial;
	}
	.barklandingH2{
		font-size: 2.35em !important;
	}
	h2{
		font-size: 2em !important;
	}
	.notepadNums {
        border-radius: 50%;
        width: 49px;
        height: 47px;
        color: white;
        text-align: center;
        font-size:2.05em;
        background-color: green;
      }
	  .emblem{
		width: 215px;
	}
	.notepadContainer {
		margin: 40px;
	}
	.donaldsonMobile{
		display: none;
	}
	.thompsonMobile {
        display: none;
	}
	.modal-content {
		width: 640px;
	}
	#mobileStickers {
		margin-bottom: 0px;
	}
	.noteDesc {
		margin-right: 0% !important;
		line-height: 1.2em;
	}
	.modalHeight {
		top: 787px !important;
	}
	.bookletDiv {
		text-align: left;
	}
	#barkForm input[type="submit"] {
		grid-column: span 2;
		padding: 10px;
		border: none;
		background-color: #5ef091;
		color: black;
		border-radius: 5px;
		cursor: pointer;
		font-size: 16px;
		margin-top: 40px;
		margin-left: 43px;
	}
	#tempBonus {
		margin-top: 0px;
	}
	.info-box {
    flex: 1 1 calc(50% - 20px);
	text-align: center;
  }
}

@media screen and (min-width: 1137px){
	#skull{
		position: relative;
    	top: 698px;
    	left: 126px;
    	width: 150%;
    	margin-bottom: -300px;
		transform: rotate(-15deg);
	}
	#sitar{
		position: relative;
    	top: 1299px;
    	left: 303px;
    	width: 300%;
    	margin-bottom: -300px;
	}
	#bagel{
		position: relative;
    	top: 1482px;
    	left: 19px;
    	width: 150%;
    	margin-bottom: -300px;
	}
}
@media screen and (min-width: 1178px){
	#bagel{
		position: relative;
    	top: 1467px;
    	left: 19px;
    	width: 150%;
    	margin-bottom: -300px;
	}
}
@media screen and (min-width: 1200px) {
	.tourDetailTxt {
		font-size: 1.3em;
	}
}

@media screen and (min-width: 1223px) {
	#bagel{
		position: relative;
    	top: 1491px;
    	left: 19px;
    	width: 150%;
    	margin-bottom: -300px;
	}
}
@media screen and (min-width: 1227px) {
	#passport{
		position: relative;
    	top: -25px;
    	left: -125px;
    	width: 700%;
    	margin-bottom: -300px;
	}
	#sitar{
		position: relative;
    	top: 1283px;
    	left: 303px;
    	width: 300%;
    	margin-bottom: -300px;
	}
}
  
@media screen and (min-width: 1271px) {
	#bagel{
		position: relative;
    	top: 1454px;
    	left: 19px;
    	width: 150%;
    	margin-bottom: -300px;
	}
	#sitar{
		position: relative;
    	top: 1287px;
    	left: 303px;
    	width: 300%;
    	margin-bottom: -300px;
	}
}

@media screen and (min-width: 1300px) {
	#roosevelt {
		position: relative;
		height: 200px;
		margin-bottom: -230px ;
		top: -81px;
		left: -27%;
		display: initial;
	}
	#thompson {
		position: relative;
		left: -32%;
	}
	#barkForm input[type="submit"] {
		grid-column: span 2;
		padding: 10px;
		border: none;
		background-color: #5ef091;
		color: black;
		border-radius: 5px;
		cursor: pointer;
		font-size: 16px;
		margin-top: 40px;
		margin-left: 17px;
	}
	#johnson{
		left: -72%;
	}
}

@media screen and (min-width: 1400px) {
	.tourDetailTxt {
		font-size: 1.5em;
	}
	#booklet {
		position: relative;
		height: 340px;
		margin-bottom: -330px;
		top: -48px;
		left: 62%;
	}
}

@media screen and (min-width: 1450px) {
	#johnson{
		left: -70%;
	}
}

@media screen and (min-width: 1600px) {
	#roosevelt {
		position: relative;
		height: 200px;
		margin-bottom: -230px ;
		top: -81px;
		left: -23%;
		display: initial;
	}
	#thompson {
		position: relative;
		height: 250px;
		margin-bottom: -230px ;
		top: -38px;
		left: -31%;
		display: initial;
	}
	#johnson{
		left: -68%;
	}
}

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

	#johnson{
		top: 35px;
	}
}

@media screen and (min-width: 1700px) {
	#booklet {
		position: relative;
		height: 355px;
		margin-bottom: -345px;
		top: -48px;
		left: 62%;
	}
}

@media screen and (min-width: 1900px) {
	#donaldson {
		position: relative;
		height: 190px;
		margin-bottom: -285px;
		top: -317px;
		left: 97%;
		display: initial;
	}
	#johnson {
		left: -66%;
	}
}
@media screen and (min-width: 2027px) {
	#johnson {
		position: relative;
		height: 330px;
		margin-bottom: -240px ;
		top: 5px;
		display: initial;
	}
	#roosevelt {
		position: relative;
		height: 200px;
		margin-bottom: -230px ;
		top: -81px;
		left: -18%;
		display: initial;
	}
	#thompson {
		left: -25%;
		display: initial;
	}
	.landingTxt{
		margin-top: 30px;
	}
}

@media screen and (min-width: 2700px){
	#johnson {
		position: relative;
		height: 330px;
		margin-bottom: -240px ;
		display: initial;
	}
	#roosevelt {
		position: relative;
		height: 200px;
		margin-bottom: -230px ;
		top: -81px;
		left: -14%;
		display: initial;
	}
	#thompson {
		position: relative;
		height: 250px;
		margin-bottom: -230px ;
		top: -81px;
		left: -19%;
		display: initial;
	}
	#booklet {
		position: relative;
		left: 65%;
	}
	#donaldson {
		position: relative;
		height: 190px;
		margin-bottom: -285px;
		top: -317px;
		left: 99%;
		display: initial;
	}
}

@media screen and (min-width: 3195px) {
	#johnson {
		top: -17px;
	}
}