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

	.workTitleIcon {
		width: 25px;
		height: 25px;
		vertical-align: middle;
	}

	#gallery li {
		float: left;
		width: 98.5%;
		margin: 1.5% 1.5% 1.5% 0;
		background-color: #ebebeb;
		color:  #ebebeb;
	}
		
	.headerText1 {
		font-size: 1.5rem;
	}

	.headerText2 {
		font-size: 1.0rem;
	}
	
	.intro {
		font-size: 1.0rem;
	}
	
	.workIntro {
	font-size: 1.0rem;
	}

	#header {
		text-align:center;
		margin: 0 0 20px 0;
		padding: 0px 0 0px 0;
		width: 100%;
		height:100px;
		background: url('../img/HeroSVG.svg') no-repeat center;
		background-size: cover;
	}

	.arrow {	
		width: 30px;
		margin-top: 20px;
	}
}



@media screen and (min-width:480px) {
	/*480px breakpoint is the common landscape mode size for the small smart phones*/

	.workTitleIcon {
		width: 40px;
		height: 40px;
		vertical-align: middle;
	}
	
	.headerText1 {
		font-size:2rem;
	}

	.headerText2 {
		font-size:1.5rem;
	}
	
	.intro {
		font-size: 1.1rem;
	}
	
	.workIntro {
		font-size: 1.0rem;
	}

	#header {
		text-align:center;
		margin: 0 0 20px 0;
		padding: 45px 0 45px 0;
		width: 100%;
		height:90px;
		background: url('../img/HeroSVG.svg') no-repeat center;
		background-size: cover;
	}

	.arrow {
		width: 30px;
		margin-top: 20px;
	}
}


@media screen and (min-width:640px) {
	/*660px breakpoint for large tablet to normal size laptop*/

	.workTitleIcon {
		width: 50px;
		height: 50px;
		vertical-align: middle;
	}

	#gallery li {
		float: left;
		width: 31.8%;
		margin: 1.5% 1.5% 1.5% 0;
		background-color:  #ebebeb;
		color: #ebebeb;
		border-radius:5px
	}
	
	.headerText1 {
		font-size: 3rem;
	}

	.headerText2 {
		font-size:2rem;
	}
	
	.intro {
		font-size: 1.2rem;
	}
	
	.workIntro {
		font-size: 1.2rem;
	}

	#header {
		text-align:center;
		margin: 0 0 20px 0;
		padding: 75px 0 65px 0;
		width: 100%;
		height:120px;
		background: url('../img/HeroSVG.svg') no-repeat center;
		background-size: cover;
	}

	.arrow {
		width: 50px;
		margin-top: 60px;
	}
}

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

	.workTitleIcon {
		width: 64px;
		height: 64px;
		vertical-align: middle;
	}
			
	.headerText1 {
		font-size: 3rem;
	}

	.headerText2 {
		font-size:2.6rem;
	}
	
	.intro {
		font-size: 1.2rem;
	}
	
	.workIntro {
		font-size: 1.2rem;
	}

	#header {
		text-align:center;
		margin: 0 0 30px 0;
		padding: 40px 0 0px 0;
		width: 100%;
		height:320px;
	background-image: url('../img/HeroSVG.svg'), url('../img/HeroSVG.svg');
    background-position: center, center;
  	background-size: inherit, cover;
    background-repeat: no-repeat, no-repeat;
	}

	.arrow {
		width: 50px;
		margin-top: 65px;
	}
}