// .scss files will get core functions and variables automatically from build script

// science promotion

.science-row {
	background-image: url('/_resources/img/science-banner-bg-small.jpg');
	
	@media (min-width: 768px){
		background-image: url('/_resources/img/science-banner-bg-large.jpg');
	}
	
	background-position: center center;
	background-size: cover;
	
	color: white;

	position: relative;
	
	
	.container {
		z-index: 100;
		position: relative;
	}

	
	h1 { 
		color: white;
		font-weight: bold;
		text-transform: uppercase;
		text-shadow: 1px 1px 3px black;
		font-size: rem(48);
	}
	
	p { 
		color: white; 
		font-size: rem(18);
		padding: 0 0 1rem 0;
		line-height: 1.2em;
		text-shadow: 1px 1px 3px black;
		
		&:last-of-type {
			padding-bottom: 0;
		}
	}
	
	p.intro {		
		font-weight: bold;
	}
	
	img {
		border: 4px solid white;
	}
	
	&::after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(black,0.3);
	}
	
	@media (min-width: 768px){
		
		h1 { font-size: rem(56); }
		p { font-size: rem(21); }
	}
}