/*
COLOURS
#383c59  navy
#d12194  pink
#68b580  green
#97dede  turquoise
#e4e2e3  light-grey
#c1c1c1  dark-grey

font-family: 'Roboto', sans-serif;

font-family: 'Roboto Condensed', sans-serif;
font-family: 'Roboto Slab', serif;


*/
html,body {
	height: 100%;
	position: relative;
}

#workContainer {
	width: 90%;
	margin: auto;
	padding-bottom: 150px;
	min-height:100%;
   	position:relative;
   	max-width: 1728px;
}


#footerBox{
   min-height:100%;
   position:relative;
}


#skillsContainer {
	padding-bottom: 120px;
	padding-top: 150px;
	width: 100%;
	max-width: 680px;
	margin: auto;
}

#aboutContainer {
	padding-top: 150px;
	padding-bottom: 210px;
	width: 100%;
	margin: auto;
	max-width: 680px;
}

/*
#privacyContainer {
	padding-top: 130px;
	padding-bottom: 210px;
	width: 70%;
	margin: auto;
}
*/

#termsContainer {
	padding-bottom: 165px;
	padding-top: 150px;
	width: 100%;
	max-width: 680px;
	margin: auto;
}





/* Navigation */
a {
	text-decoration: none;
}

nav {
	width: 100%;
	background-color: #2D3A4C;
	position: fixed;
	z-index: 100;
	box-shadow: 0px 2px 3px #000000;
}

.navigation {
	margin: auto;
	text-align: center;
	display: flex;
	padding-top: 25px;
	padding-bottom: 11px;
	width: 100%;
	max-width: 680px;
	justify-content: space-between;
}

.navigation li {
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	font-size: 16px;
}

.navigation li:first-child {
	width: 55%;
	text-align: left;
	margin-top: -10px;
}

.navigation li a {
	color: #ffffff;
}

.navigation li a:hover{
	color: #90CD76;
}

.navigation li a.active{
	color: #90CD76;
}

.logoNav {
	width: 58px;
}

/*
.logo {
	width: 150px;
	padding-top: 110px;
	padding-bottom: 60px;
	margin: auto;
}
*/

.titleText {
	width: 100%;
	max-width: 680px;
	padding-top: 160px;
	padding-bottom: 110px;
	margin:auto;
	text-align: center;
}

.titleTextH1 {
	font-size: 30px;
	font-weight: 300;
	font-family: 'Roboto Slab', serif;
	line-height: 1.5;
	padding-bottom: 20px;
}

.titleText div {
	font-size: 18px;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	line-height: 1.5;
}

mark {
	background-color: #94DBDB;
}




/* Work page square images */
.workContainer {
	display: flex;
	flex-wrap: wrap;
}

.imgSquare {
	text-align: center;
	width:33.3%;
	margin-bottom: 60px;
}

.imgSquareTitle {
	font-family: 'Roboto Slab', serif;
	font-weight: 300;
	font-size: 22px;
	padding-top: 10px;
	padding-bottom: 10px;
	display: inline-block;
	max-width: 350px;
	line-height: 1.3;
}

.imgSquareSub {
	color: #c1c1c1;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 15px;
}

.previewImage {
	width: 90%;
	max-width: 490px;
	transition:all .5s ease;
	-webkit-transition: all .5s ease; /* Safari */
}

.previewImage:hover {
	opacity: 0.5;
	filter: alpha(opacity=50);
}





/* Footer */
footer {
	position:absolute;
	bottom:0;
	width:100%;
	height:60px;/* Height of the footer */
	text-align: center;
}

.footerNav {
	width: 210px;
	display: flex;
	padding-bottom: 14px;
	margin: auto;
}

.footerNav li {
	flex-grow: 1;
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	font-size: 14px;
}

.footerNav li a {
	color: #000000;
}

.footerNav li a:hover{
	color: #90CD76;
}

.footerNav li a.active{
	color: #90CD76;
}

.copyright {
	font-size: 12px;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	padding-bottom: 18px;
}

.line1 { background-color: #E3E1E2; height: 14px; width: 100%; }
.line2 { background-color: #94DBDB; height: 14px; width: 100%; }
.line3 { background-color: #90CD76; height: 14px; width: 100%; }
.line4 { background-color: #2D3A4C; height: 14px; width: 100%; }
.line5 { background-color: #000000; height: 14px; width: 100%; }







/* Skills Page */
.artTitle {
	font-size: 30px;
	text-align: center;
	color: #000000;
	font-weight: 300;
	font-family: 'Roboto Slab', serif;
	line-height: 1.5;
	max-width: 480px;
	margin:auto;
}

.titleSub {
	font-size: 16px;
	color: #c1c1c1;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	text-align: center;
	padding-top: 15px;
	padding-bottom: 80px;
}

.skillTitle {
	font-size: 20px;
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	padding-bottom: 10px;
	color: #000000;
	/*border-bottom: solid #97dede 10px;*/
}

.skillTitleMargin {
	margin-top: 58px;
}

.skillTitleMargin2 {
	margin-top: 88px;
}

.skillSub {
	font-size: 18px;
	color: #000000;
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	/*border-left: solid #97dede 35px;
	padding-left: 5px;*/
	display: inline-block;
	margin-bottom: 10px;
}

.skillText {
	font-size: 18px;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	line-height: 1.5;
	margin-bottom: 80px;
}

.skillText2 {
	font-size: 18px;
	color: #000000;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	line-height: 1.5;
}

.skillTextul {
	margin-left: 35px;
	list-style-position: outside;
	list-style-type: circle;
}

.textImage1 {
	width: 100%;
	margin-top: 10px;
	margin-bottom: 10px;
	border: solid #c1c1c1 1px;
	box-sizing: border-box;
}

.textImage2Box {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	padding-top: 15px;
	margin-bottom: 90px;
}

.textImage2 {
	width: 46%;
	margin: auto;
	border: solid #c1c1c1 1px;
	box-sizing: border-box;
}

.wordSpacing {
	word-spacing: 0.5em;
}

.italic {
	font-style: italic;
}


.numberList {
	text-decoration: none;
	margin-bottom: 22px;
	margin-top: -16px;
}

.numberList li {
	font-size: 18px;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	line-height: 1.8;
	margin-left: 40px;
}








/* About Page */

.portraitBox {
	text-align: center;
	padding-bottom: 25px;
}

.portraitImg {
	width: 240px;
}

.aboutMeTitle {
	padding-bottom: 20px;
}

.buttonBox {
	text-align: center;
	width: 100%;
	margin-top: 20px;
}

.download {
	font-size: 16px;
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	text-align: center;
	background-color: transparent;
	padding: 15px 34px;
	border: solid #94DBDB 1px;
	box-sizing: border-box;
	color: #94DBDB;
}

.download:hover {
	color: #ffffff;
	background-color: #94DBDB;
	transition:all .5s ease;
	-webkit-transition: all .5s ease;
}









/* Terms & Privacy Pages */
.privacyText {
	font-size: 18px;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	line-height: 1.5;
	margin-bottom: 22px;
}

.privacyText2 {
	font-size: 18px;
	color: #000000;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	line-height: 1.5;
}

.privacyTitle {
	font-size: 30px;
	text-align: center;
	color: #000000;
	font-weight: 300;
	font-family: 'Roboto Slab', serif;
	line-height: 1.3;
	margin: auto auto 80px auto;
}

.privacySub {
	font-size: 20px;
	color: #000000;
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	padding-bottom: 10px;
	padding-top: 25px;
	line-height: 1.3;
}

/*
.privacySub2 {
	font-size: 18px;
	color: #000000;
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	margin-bottom: 10px;
	line-height: 1.3;
}
*/

.link a{
	color: #94DBDB;
	font-weight: 300;
}

.link a:hover {
	border-bottom: solid 1px #94DBDB;
}

.termsul {
	margin-left: 35px;
	list-style-position: outside;
	list-style-type: circle;
}


.bold {
	font-weight: 400;
}






/* Work Pages */

.bold {
	font-weight: 700;
}

.imgBorder {
	border: solid 1px #000000;
}

.videoMtv {
	margin-bottom: 22px;
}

video:focus {
	outline: none;
}

button:focus {
	outline: none;
}

.artTitle2 {
	font-size: 30px;
	color: #000000;
	text-align: center;
	font-weight: 300;
	font-family: 'Roboto Slab', serif;
	line-height: 1.3;
	max-width: 480px;
	margin: auto auto 70px auto;
}


.workImg2Box {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	margin-bottom: 35px;
}

.workImg2 {
	width: 44%;
	margin: auto;
	margin-top: 15px;
}

.workImg2BoxB {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	margin-bottom: 35px;
}

.workImg2B {
	width: 48%;
	margin: auto;
	margin-top: 15px;
}

.workImg1 {
	width: 100%;
	margin-top: 15px;
	margin-bottom: 28px;
}

.workImgSml {
	width: 64%;
	margin: auto;
}


.workImg4Box {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	margin-bottom: 35px;
}

.workImg4 {
	width: 22%;
	margin: auto;
}


.videoBox {
	margin-top: 15px;
	margin-bottom: 30px;
}

#videoBoxSpace {
	margin-top: 40px;
}

.buttonWork {
	width: 100%;
	padding-bottom: 30px;
}

.buttonWork a{
	float: left;
	font-size: 18px;
	color: #000000;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	margin-top: 20px;
}

.buttonWork a:hover {
	color: #90CD76;
}

.prev {
	width: 50%;
}

.next {
	width: 50%;
	text-align: right;
}












 







/* Media Queries */
@media only screen and (min-width: 300px) and (max-width: 735px) {
.pageContainer {
	width: 94%;
}

.imgSquare {
	width:100%;
}

.navigation {
	width: 84%;
}


#skillsContainer {
	width: 84%;
}


#termsContainer {
	width: 84%;
}

#aboutContainer {
	width: 84%;
}

.aboutMeTitle {
	padding-top: 30px;
}

.workImgSml {
	width: 86%;
	margin: auto;
}

.navigation li:first-child {
	width: auto;
}

.titleText {
	width: 80%;
}

#workContainer {
	width: 94%;
}

.workImg2 {
	width: 100%;
	max-width: 300px;
}

.workImg4 {
	width: 44%
}

.workImg4:first-child {
	margin-bottom: 20px;
}

.workImg2B {
	width: 100%;
}

.workImg2B:first-child {
	margin-bottom: 34px;
}


}



@media only screen and (min-width: 736px) and (max-width: 1024px) {
.pageContainer {
	width: 90%;
}

.imgSquare {
	width:50%;
}

#workContainer {
	width: 94%;
}

/*
#skillsContainer {
	width: 68%;
}


#termsContainer {
	width: 68%;
}

#aboutContainer {
	width: 68%;
}
*/


}



@media only screen and (min-width: 1281px) and (max-width: 3000px) {

/*
.pageContainer {
	width: 80%;
}



#skillsContainer {
	width: 40%;
	max-width: 680px;
}

#termsContainer {
	width: 40%;
	max-width: 680px;
}

#aboutContainer {
	width: 40%;
	max-width: 680px;
}
*/

}