
.title-section-inner {
	position:relative;
	max-width:500px;

}

.title-large {

	line-height:1.0;
	transform:scale(0.9);
	opacity:0.8;
	transition:transform 0.3s ease, opacity 0.3s ease;
	display:inline-block;
	
}

.title-large:hover{

	line-height:1.5;
	transform:scale(1.0);
	opacity:1.0;
	
}

.subtitle {
	
	font-weight:200;
	float:unset;
	color:lightgrey;
	display:inline-block;
	animation: fadeIn 3s ease;
	
}

.front-page-subheadings {
	
		display:none;
	
	}

.front-page-subheadings h2 {

	font-weight:200;
	color: lightgrey;
	font-size:1.4em;
	padding: 0 1em;
	transition: font .1s ease-out, color .1s ease-out;

}

.front-page-subheadings h2:hover {

	font-weight:400;
	color:white;
	font-size: 1.5em;
}


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

	.title-large {
		font-size:6rem;
		line-height:1.5;
		
	
	}

	.subtitle {
	
		float:right;
	}
}




.camera-shutter {

		display:inline;
		width:80px;
		height:80px;
		position:absolute;
		top:180px;

	}
	
	#shutter1 {

	animation:rolling 6s ease;
	left:calc(20% - 50px);

	}

	#shutter2 {

		animation:rolling 6s ease;
		left:calc(40% - 50px);

	}

	#shutter3 {

		animation:rolling 6s ease;
		left:calc(60% - 50px);

	}

	#shutter4 {

		animation:rolling 6s ease;
		left:calc(80% - 50px);

	}
	
	
@media screen and (min-width:992px) and (max-width:1199px) {
	
	
	.camera-shutter {

		display:inline;
		width:80px;
		height:80px;
		position:absolute;
		top:250px;

	}
	


}

@media screen and (max-width: 420px) {

	.camera-shutter {

		display:inline;
		width:60px;
		height:60px;
		height:60px;
		position:absolute;
		top:200px;

	}
	
	#shutter1 {

	animation:rolling 6s ease;
	left:calc(20% - 30px);

	}

	#shutter2 {

		animation:rolling 6s ease;
		left:calc(40% - 30px);

	}

	#shutter3 {

		animation:rolling 6s ease;
		left:calc(60% - 30px);

	}

	#shutter4 {

		animation:rolling 6s ease;
		left:calc(80% - 30px);

	}
	

}




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

	.title-section-inner {
		max-width:1200px;
		
	}
	
	.front-page-subheadings {

	display:flex; 
	flex-direction:row; 

	}

	.camera-shutter {

		display:inline;
		width:80px;
		height:80px;
		position:absolute;
		top:125px;

	}
	
	#shutter1 {

	animation:rolling 6s ease;
	left:250px;

	}

	#shutter2 {

		animation:rolling 6s ease;
		left:340px;

	}

	#shutter3 {

		animation:rolling 6s ease;
		left:430px;

	}

	#shutter4 {

		animation:rolling 6s ease;
		left:520px;

	}

}

#shutter1:hover {

	animation:rolling 6s ease;

}



/* 
 * 
 * Keyframes and animations 
 *
 * */


@keyframes rolling {


	0% {
		transform:translateY(-1200px);
		transform: translateX(0px);
		transform:rotate(0);
	}
	
	3% {
		transform:translateY(0px);
		transform: translateX(0px);
		transform:rotate(0);
	}
	
	4% {
		transform:translateY(4px);
		transform: translateX(0px);
		transform:rotate(0);
	}
	
	5% {
		transform:translateY(0px);
		transform: translateX(0px);
		transform:rotate(0);
	}
	 
	25% {
		transform: translateX(-200px);
		transform:rotate(180deg);
	}
	
	
	50% {
		transform: translateX(-400px);
		transform:rotate(360deg);
	
	}
	
	75% {
		
		transform: translateX(-500px);
		transform:rotate(540deg);
	
	}
	
	100% {
		transform: translateX(-600px);
		transform:rotate(720deg);
	
	}


}

@keyframes fadeIn {


	0% {
		opacity: 0;
	}
	
	100% {
		opacity:1;
	
	}


}
/*
img {

	transform:scale(1);
	transition: transform .3s ease;
}

img:hover {

	transform: scale(1.1);

}
* 
* */
