:root{
	--bRed:#7f80dd ;
    --bWhite: white;
    --bGrey: #222222;
    --bLightGrey: #888888;
	--bBbBlue: #f4789f;
	/* --bRed: #f4789f;
    --bWhite: white;
    --bGrey: #333333;
    --bLightGrey: #888888;
    --bBbBlue:#5dc5ee; */
}

body {
	margin: 0;
	font-family: "Roboto", sans-serif;
    text-rendering: optimizeLegibility;
    color: var(--bGrey);
	min-width: 320px;
}

.scroll-container {
	scroll-snap-type: y mandatory;
	position: relative;
	height: 100vh;
	overflow-y: scroll;
	/* transition: 1s cubic-bezier(0.5, 0, 0.5, 1); */
}

.panel {
	scroll-snap-align: center;
	scroll-snap-stop: always;
	position: relative;
	height: 100vh;
	overflow: hidden;
	font-size: 10vmin;
	padding: 1em;
	margin: 0;
	box-sizing: border-box;
	cursor: default;
}

.hp-3col a{
	position:relative;
	top:0;
	transition: top ease 0.3s;
}
.hp-3col a:hover{
	top:10px;
}

a h4{
	color: var(--bLightGrey);
}

/* Inverted Colour Sections */
.design-proj.panel {
	color: var(--bWhite);
	background-color: var(--bRed);
}

 .design-proj h1, .design-proj h2, .design-proj h4{
	color: var(--bWhite);
	background: var(--bRed);
}


/* SHOUTERS (Headlines) Styles */
.headlines {
	max-width: 60vw;
	color: var(--bRed);
	padding-left: 3px;
}

/* HOMEPAGE Flexbox */
.hp-3col{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
}

.col-cont{
	width: 23vw;
	min-width: 250px;
	padding-right: 40px;
}


#about-me .col-cont{
	width: 30vw;
	padding-right: 40px;
	min-width:250px;
}

#about-me h2{
	display: block;
}

#about-me h4{
	display: none;
}

#footer{
	background-color: var(--bGrey);
	position: relative;
}

#footer h2{
	color: var(--bWhite);
}

#contact{
	position: absolute;
	bottom: 10vh;
}

/* Home Home style */
#home{
	height: 100vh;
}


#home .headlines{
    padding-top: 20vh;
}



/* Desktop Background Content */
.mr-bg{

}

#making-reality{
	background: linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0.85)),url("backgrounds/FCAT Folder Blog Photos-5.jpg");
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
}

#storyteller{
	background: linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0.85)),url("backgrounds/202_spring18_lightingWorkshop.JPG");
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
}

.mr-bg .headlines{
	padding-left: 0;
}

.mr-bg .col-cont, .mr-bg h1, .mr-bg h2{
	display: inline-block;
	padding-left: 10px;
	padding-right: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	margin: 0;
}
.mr-bg h4{
	color: white;
}

#other-things{
	background:linear-gradient(rgba(127,126,221,0.9),rgba(127,126,221,0.9)), url("backgrounds/Jeep.jpg");
	background-size: cover;
	background-position:center;
}

#other-things h2, #other-things h4{
	background: none;
}
/* Mobile Background Content */
.image-panel{
	min-height: 40vh;
	display: none;
	background: none;
}

#design-img-A {
	background-image: url("backgrounds/FCAT Folder Blog Photos-5.jpg");
	background-position: center;
	background-size: cover;
	/* background-attachment: fixed; */
}

#design-img-B {
	background-image: url("backgrounds/Jeep.jpg");
	background-size: cover;
	background-position: center;
	height: 50vh;
}

#media-img{
	background-image: url("backgrounds/202_spring18_lightingWorkshop.JPG");
	background-size: cover;
	background-position: center top;
	/* background-attachment: fixed; */
}
/* Media Queries */
@media(max-width:1800px){
    
}

@media(max-width:1366px){
	#making-reality, #storyteller{
		background-attachment: unset;
	}
}

@media(max-width:1279px){
	.col-cont, .mr-bg .col-cont{
		width: 20vw;
		padding-top:1.0vh;
		padding-bottom: 0.5vh;
	}
}

@media(max-width:800px){
	html, body, .scroll-container{
		scroll-snap-type:none;
		overflow: visible;
	}

	#making-reality, #storyteller{
		background-image: none;
	}

	.mr-bg h4{
		color: var(--bGrey);
	}

	#home{
		height:100vh;
	}

	#other-things{
		background: var(--bRed);
	}

	.panel{
		padding-left: 0.5em;
		padding-right:0.5em;
		padding-bottom: 0.5em;
		padding-top: 0.5em;
		height: auto;
	}
	#footer{
		min-height: 100vh;
	}
	.headlines{
		max-width: 85vw;
	}

	#home .headlines{
		padding-top: 40vh;
	}
	.col-cont, .mr-bg .col-cont{
		width: 90%;
		padding-top:0.5vh;
		padding-bottom: 0.5vh;
	}	

	#about-me .col-cont{
		width: 90%;
	}
	.image-panel{
		display: block;
	}
}

@media(max-width:350px){

}

@media(max-height:800px){
	html, body, .scroll-container{
		scroll-snap-type:none;
		overflow: visible;
	}

	#making-reality, #storyteller{
		background-image: none;
	}

	#home{
		height:100vh;
	}

	#other-things{
		background: var(--bRed);
	}

	.panel{
		padding-left: 0.5em;
		padding-right:0.5em;
		padding-bottom: 0.5em;
		padding-top: 0.5em;
		height: auto;
	}
	#footer{
		min-height: 100vh;
		height: 120%;
	}
	.headlines{
		max-width: 85vw;
	}

	#home .headlines{
		padding-top: 15vh;
	}
	.col-cont, .mr-bg .col-cont{
		width: 90%;
		padding-top:0.5vh;
		padding-bottom: 0.5vh;
	}	

	#about-me .col-cont{
		width: 90%;
	}
	.image-panel{
		display: block;
		min-height: 60vh;
	}
}