/* AB1 */

.ab {
	background-size: cover;
	height: 100vh;
	position: relative;
}

#ab1 {
	background-image: url(../img/ab1.jpg);
	background-position: center center;
}

	.ab-cont {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
		z-index: 2;
	}

	#ab-cont1 {
		background: rgba(0, 0, 0, 0.6);
	}
		
#ab2 {
	background-image: url(../img/ab2.jpg);
	background-position: center center;
}

	#ab-cont2 {
		background: rgba(144, 39, 142, 0.6);
	}
	
#ab3 {
	background-image: url(../img/ab3.jpg);
	background-position: center center;
}

	#ab-cont3 {
		background: rgba(132, 195, 65, 0.6);
	}
	
#ab4 {
	background-image: url(../img/ab4.jpg);
	background-position: left center;
}

	#ab-cont4 {
		background: rgba(0, 173, 238, 0.6);
	}
	
#ab5 {
	background-image: url(../img/ab5.jpg);
	background-position: left top;
}

	#ab-cont5 {
		background: rgba(236, 41, 123, 0.6);
	}
	
#ab6 {
	background-image: url(../img/ab6.jpg);
	background-position: center center;
}

	#ab-cont6 {
		background: rgba(254, 238, 0, 0.6);
	}
	
#ab7 {
	background-image: url(../img/ab7.jpg);
	background-position: center center;
}

	#ab-cont7 {
		background: rgba(132, 195, 65, 0.6);
	}
	
		#cult-cont {
			width: 700px;
			color: white;
			text-shadow: 3px 3px 7px #333;
			font-size: 24px;
			letter-spacing: 4px;
		}
	
			#cult-cont h3 {
				display: block;
				width: 100%;
				text-align: center;
				margin: 0;
			}
	
				.cult-item {
					width: 100%;
					display: block;
				}
			
			.cult-cont:after {
			  content: "";
			  display: table;
			  clear: both;
			}
		
				.cult-item ul {
					list-style: none;
					line-height: 1.4;
					float: left;
					margin-top: -20px;
					margin-bottom: 40px;
				}
		
					#val ul li {
						list-style: disc;
					}
			
					.cult-item ul li {
						font-size: 16px;
					}
			
		.ab-blurb {
			width: 750px;
			color: white;
			text-shadow: 3px 3px 7px #333;
			font-size: 24px;
			text-align: center;
			letter-spacing: 4px;
			line-height: 1.5;
		}
		
	#lego-1 {
		position: absolute;
		width: 40%;
		right: -20%;
		bottom: -5%;
		z-index: 1;
	}

	#lego-2 {
		position: absolute;
		width: 10%;
		left: -2%;
		bottom: 15%;
		z-index: 1;
	}

	#lego-3 {
		position: absolute;
		width: 20%;
		top: -10%;
		left: 15%;
		z-index: 1;
	}
	
	#conf-1 {
		position: absolute;
		width: 200%;
		bottom: -60%;
		left: -50%;
		z-index: 1;
	}
	
	#bub-1 {
		position: absolute;
		width: 30%;
		top: 15%;
		right: -5%;
		z-index: 1;
	}

	#bub-2 {
		position: absolute;
		width: 20%;
		bottom: -40%;
		right: -10%;
		z-index: 1;
	}

	#bub-3 {
		position: absolute;
		width: 10%;
		top: -5%;
		right: 15%;
		z-index: 1;
	}

	#bub-4 {
		position: absolute;
		width: 5%;
		top: 50%;
		left: 55%;
		z-index: 1;
	}
	
	#leav-1 {
		position: absolute;
		width: 40%;
		top: -50%;
		left: -5%;
		z-index: 1;
	}

	#leav-2 {
		position: absolute;
		width: 60%;
		bottom: -50%;
		right: -20%;
		z-index: 1;
	}
	

/* 481 - 768 */

@media screen and (min-width: 481px) and (max-width: 768px) {
	#ab7 {
		height: auto;
	}
		
			.ab-blurb {
				width: 480px;
				font-size: 20px;
				line-height: 1.4;
			}
			
		#cult-cont {
			width: 480px;
			font-size: 24px;
			letter-spacing: 4px;
		}
		
			#cult-cont h3 {
				margin-top: 20px;
			}
	
			.cult-item {
				width: 480px;
				height: auto;
			}
			
				.cult-item p {
					margin: 20px 0;
				}
		
				.cult-item ul {
					line-height: 1.4;
				}
				
				#val ul {
					width: 200px;
					display: block;
					margin-top: 0;
					float: left;
				}

					#val ul:last-of-type {
						margin-top: 0px;
					}

					.cult-item ul li {
						font-size: 16px;
					}
}


/* =< 450 on height */

@media screen and (max-height: 450px) {
			.ab-blurb {
				width: 480px;
				font-size: 14px;
				line-height: 1.4;
			}
}


/* 320 - 480 */

@media screen and (min-width: 320px) and (max-width: 480px) {
	#ab7 {
		height: auto;
	}

			.ab-blurb {
				width: 300px;
				font-size: 14px;
				letter-spacing: 2px;
				line-height: 1.6;
			}
			
		#cult-cont {
			width: 320px;
			font-size: 14px;
			letter-spacing: 4px;
		}
		
			#cult-cont h3 {
				margin-top: 20px;
			}
	
			.cult-item {
				width: 300px;
				height: auto;
				margin-left: 10px;
			}
			
				.cult-item p {
					margin: 20px 0;
				}
		
				.cult-item ul {
					line-height: 1.6;
				}
				
				#val ul {
					width: 300px;
				}

					#val ul:last-of-type {
						margin-top: -40px;
					}

					.cult-item ul li {
						font-size: 14px;
					}
					
		#lego-1 {
			width: 80%;
		}
	
		#lego-2 {
			width: 20%;
		}
	
		#lego-3 {
			width: 40%;
		}
		
		#conf-1 {
			width: 500%;
			bottom: -60%;
		}
		
	#bub-1 {
		width: 30%;
		top: 45%;
		right: -15%;
	}

	#bub-2 {
		width: 30%;
		bottom: -40%;
		right: 50%;
	}

	#bub-3 {
		width: 30%;
		top: -30%;
		right: -15%;
	}

	#bub-4 {
		width: 15%;
		top: 75%;
		left: 60%;
	}
	
	#leav-1 {
		width: 120%;
		left: -80%;
	}

	#leav-2 {
		width: 80%;
		bottom: -25%;
		right: -40%;
	}
					
}

/* =< 319 */

@media screen and (max-width: 319px) {
	.ab {
		min-width: 319px;
	}
		.ab-cont {
			min-width: 319px;
		}

			.ab-blurb {
				width: 250px;
				font-size: 18px;
			}
	#ab7 {
		height: auto;
	}

			.ab-blurb {
				width: 300px;
				font-size: 14px;
				letter-spacing: 2px;
				line-height: 1.6;
			}
			
		#cult-cont {
			width: 319px;
			font-size: 14px;
			letter-spacing: 4px;
		}
		
			#cult-cont h3 {
				margin-top: 20px;
			}
	
			.cult-item {
				width: 300px;
				height: auto;
				margin-left: 10px;
			}
			
				.cult-item p {
					margin: 20px 0;
				}
		
				.cult-item ul {
					line-height: 1.6;
				}
				
				#val ul {
					width: 300px;
				}

					#val ul:last-of-type {
						margin-top: -40px;
					}

					.cult-item ul li {
						font-size: 14px;
					}
					
		#lego-1 {
			width: 80%;
		}
	
		#lego-2 {
			width: 20%;
		}
	
		#lego-3 {
			width: 40%;
		}
		
		#conf-1 {
			width: 500%;
			bottom: -60%;
		}
		
	#bub-1 {
		width: 30%;
		top: 45%;
		right: -15%;
	}

	#bub-2 {
		width: 30%;
		bottom: -40%;
		right: 50%;
	}

	#bub-3 {
		width: 30%;
		top: -30%;
		right: -15%;
	}

	#bub-4 {
		width: 15%;
		top: 75%;
		left: 60%;
	}
	
	#leav-1 {
		width: 120%;
		left: -80%;
	}

	#leav-2 {
		width: 80%;
		bottom: -25%;
		right: -40%;
	}
					
}