
#bgimg	 			{
					background: url('images/homepage-image.jpg') no-repeat center center fixed;
					background-size: cover;
					-webkit-background-size: cover;
					-moz-background-size: cover;
					-o-background-size: cover;
					}



header				{
					height: 43px;
					}

.mainLinks 			{
					height: 43px;
					margin: 0px 0px 0px 170px;
					width: 552px;
					}

.pageLinks 			{
					font: 18px 'lato', helvetica, arial, sans-serif;
					float: left;
					margin: 12px 42px;
					}

.overlay-pageLinks 	{
					font: 45px 'lato', helvetica, arial, sans-serif;
					float: left;
					margin: 12px 42px;
					}

.first 				{
					margin-left: 118px;
					}

.subpageLinks 		{
					font: 18px 'lato', helvetica, arial, sans-serif;
					float: left;
					margin: 12px 42px;
					}

.one 				{
					margin-left: 16px;
					}

.pageLinks a,
.overlay-pageLinks a		{
					color: #c3c3c3;
					text-decoration: none;
					}

.pageLinks a:hover,
.overlay-pageLinks a:hover 	{
					color: #ffffff;
					text-decoration: none;
					}

.subpageLinks a		{
					color: #000000;
					text-decoration: none;
					}

.subpageLinks a:hover 	{
					color: #c3c3c3;
					text-decoration: none;
					}

.socialMedia 		{
					padding-left: 40px;
					}

.linkedin 			{
					background: url('images/linkedin-hover.png') no-repeat;
					width: 44px;
					height: 50px;
					}

.linkedin:hover 	{
					background: url('images/linkedin.png') no-repeat;
					cursor: pointer;
					}

.page-linkedin 		{
					background: url('images/linkedin-page.png') no-repeat;
					width: 44px;
					height: 50px;
					}

.page-linkedin:hover 	{
						background: url('images/linkedin.png') no-repeat;
						cursor: pointer;
						}


section.nameIntro 	{
					height: 218px;
					}

.mainTitle 			{
					font: 75px 'american_purposeregular', arial, sans-serif;
					color: #ffffff;
					text-align: center;
					}

hr.home 			{
					width: 530px;
					margin: 10px auto 0 auto;
					}

.subTitle			{
					font: 300 36px 'lato', arial, sans-serif;
					color: #ffffff;
					text-align: center;
					margin-bottom: 18px;
					}	

.menuIcon 			{
					color: #ffffff;
					cursor: pointer;
					font-size: 30px;
					}

.page-menuIcon 		{
					color: #000000;
					cursor: pointer;
					font-size: 30px;
					}

.center 			{
					margin-top: 15%;
					}

.logo, .logoHome 	{
					font: 32px 'american_purposeregular', arial, sans-serif;
					margin-top: 12px;
					width: 223px;
					}

.logoHome a 		{
					color: #ffffff;
					text-decoration: none;
					}

.logo a 			{
					color: #000000;
					text-decoration: none;
					}

.logo a:hover,
.logoHome a:hover 	{
					color: #c3c3c3;
					text-decoration: none;
					cursor: pointer;
					}

.hero 				{
					background: url('images/about-me.jpg') no-repeat center center;
					display: inline-block;
					background-size: cover;
					height: 508px;
					width: 100%;
					}

.lato-text 			{
					font: 300 19px 'lato', arial, sans-serif;
					color: #ffffff;
					}

.one 				{
					text-align: center;
					}

.twofonttop			{
					margin-top: 17%;
					}

.twofont-front 		{
					padding-top: 6px;
					margin-right: 7px;
					}

.twofont-back		{
					padding-top: 15px;
					margin-left: 7px;
					}

.twofontbig-front	{
					padding: 15px 0 0 27px;
					margin-right: 7px;
					}

.ampur-text 		{
					font: 35px 'american_purposeregular', arial, sans-serif;
					color: #ffffff;
					}

.ampur-textmed		{
					font: 53px 'american_purposeregular', arial, sans-serif;
					color: #000000;
					}

.ampur-textbig 		{
					font: 53px 'american_purposeregular', arial, sans-serif;
					color: #ffffff;
					text-align: center;
					}

.ampur-heading 		{
					font: 30px 'american_purposeregular', arial, sans-serif;
					color: #000000;
					margin: 20px 0 30px 0;
					}

.ampur-label 		{
					font: 30px 'american_purposeregular', arial, sans-serif;
					color: #000000;
					}

.pdtopten 			{
					padding-top: 10px;
					}

.centertext			{
					text-align: center;
					}

.mrgntop 			{
					margin-top: 70px;
					}

.mrgnbtm 			{
					margin-bottom: 70px;
					}

.lato-textbig 		{
					font: 300 24px 'lato', arial, sans-serif;
					color: #000000;
					}

.home a				{
					background-color: transparent;
					border: 2px solid #ffffff;
					color: #ffffff;
					}

.home a:hover 		{
					background-color: #c3c3c3;
					border: 2px solid #c3c3c3;
					color: #000000;
					}

hr 					{
					width: 100%;
					border-color: #777777;
					margin: 0;
					}

/****Design Background****/

.factset 			{
					background: url('images/factset.jpg') no-repeat;
					height: 53px;
					margin-top: 35px;
					}

.lizlogo 				{
					font: 35px 'american_purposeregular', arial, sans-serif;
					margin-top: 44px;
					}

.date 				{
					font: bold 16px 'lato', arial, sans-serif;
					color: #000000;
					}

.title 				{
					font: 300 italic 20px 'lato', arial, sans-serif;
					color: #000000;
					margin-bottom: 15px;
					}

.description 		{
					font: 300 16px 'lato', arial, sans-serif;
					color: #000000;
					}

.marginhr 			{
					margin: 40px 0;
					}

.fareportal 		{
					background: url('images/fareportal.jpg') no-repeat;
					height: 118px;
					}

.pop 				{
					background: url('images/pop.jpg') no-repeat;
					margin-top: 22px;
					height: 75px;
					}

p 					{
					margin: 0;
					}

.cta				{
					font: 24px 'american_purposeregular', arial, sans-serif;
					padding: 15px 15px 10px 15px;
					color: #000000;
					background-color: #ffffff;
					border: 2px solid #000000;
					border-radius: 6px;
					}

.cta:focus,
.cta:hover	 		{
					color: #ffffff;
					background-color: #000000;
					text-decoration: none;
					}

.cta a:hover 		{
					text-decoration: none;
					background-color: #000000;
					color: #ffffff;
					}

.mrgnbtn 			{
					margin: 40px 0 100px 0;
					}

.faiconpd 			{
					padding-left: 10px;
					}

.faiconpdrt 		{
					padding-right: 10px;
					}

.button2 			{
					margin-left: 25px;
					}


.canvas-holder		{
					width:20%;
					}

#canvas .circle,
#canvas-2 .circle,
#canvas-3 .circle,
#canvas-4 .circle,
#canvas-5 .circle 	{
					display: inline-block;
					margin: 1em;
					}

.circle-box 		{
					width: 167px;
					float: left;
					margin: 31px 54px 0 54px;
					}

.circle-first 		{
					margin: 31px 54px 0 182px;
					float: left;
					width: 192px;
					}

.circle-IA 		{
					margin: 31px 54px 0 182px;
					float: left;
					width: 167px;
					}

.pirate 			{
					background: url('images/pirate.jpg') no-repeat;
					height: 175px;
					}

.pdtop20 			{
					padding-top: 20px;
					}

footer 	 			{
					background-color: #e8e8e8;
					height: 45px;
					font: 400 12px 'lato', arial, sans-serif;
					width: 100%;
					padding-top: 15px;
					}

.mrgnright 			{
					margin-right: 15px;
					}

.marginskills 		{
					margin: 15px 0 15px 0;
					}

.hero-contact 		{
					background: url('images/contact.jpg') no-repeat center center;
					display: inline-block;
					background-size: cover;
					height: 508px;
					width: 100%;
					}

.hero-work 		{
					background: url('images/work.jpg') no-repeat center center;
					display: inline-block;
					background-size: cover;
					height: 508px;
					width: 100%;
					}

/**Work Page**/

.work 				{
					position: relative;
					background-color: #ffffff;
					}

.project1 			{
					background: url(images/formatter-ia.jpg) no-repeat center center;
					background-size: cover;
					border: 1px solid #c3c3c3;
					height: 202px;
					width: 100%;
					}

div.work:after 		 	{
				    content: ' ';
				    position: absolute;
				    left: 0;
				    right: 0;
				    top: 0;
				    bottom: 0;
				    background-color: rgba(0,0,0,0);
				    transition: background-color .7s;
					}

div.work:hover:after 	{
					background-color: #000000;
					opacity: 0.9;
					}

.project2 			{
					background: url(images/ic-ia.jpg) no-repeat center center;
					background-size: cover;
					height: 202px;
					border: 1px solid #c3c3c3;
					}

.project3 			{
					background: url(images/confirmation-page.jpg) no-repeat center center;
					background-size: cover;
					height: 202px;
					border: 1px solid #c3c3c3;
					}

.project4 			{
					background: url(images/north-shore.jpg) no-repeat center center;
					background-size: cover;
					height: 202px;
					border: 1px solid #c3c3c3;
					}

.project5 			{
					background: url(images/bowker.jpg) no-repeat center center;
					background-size: cover;
					height: 202px;
					border: 1px solid #c3c3c3;
					}

.project6 			{
					background: url(images/press-page.jpg) no-repeat center center;
					background-size: cover;
					height: 202px;
					border: 1px solid #c3c3c3;
					}

.project7 			{
					background: url(images/flight-page.jpg) no-repeat center center;
					background-size: cover;
					height: 202px;
					border: 1px solid #c3c3c3;
					}

.project8 			{
					background: url(images/personas.jpg) no-repeat center center;
					background-size: cover;
					height: 202px;
					border: 1px solid #c3c3c3;
					}

.center-project 	{
					margin-top: 7%;
					}

.mrgnbtm-project 	{
					margin-bottom: 35px;
					}

div.work a 			{		
					display: none;
					position: absolute;
					z-index: 9999;
				    transition: background-color .7s;
					}


div.work:hover a 	{
					display: block;
					}

div.work a.project-button 	{
							font: 24px 'american_purposeregular', arial, sans-serif;
							padding: 15px 15px 10px 15px;
							color: #ffffff;
							background-color: transparent;
							border: 2px solid #ffffff;
							border-radius: 6px;
							top: 45%;
							left: 32%;
							}

div.work a.project-button:hover {
								text-decoration: none;
								color: #000000;
								background-color: #c3c3c3;
								border: 2px solid #c3c3c3;
								}




/**Formatter Page**/
.hero-projects 		{
					width: 100%;
					height: 250px;
					background-color: #000000;
					}

.projectText		{
					margin: 0 auto 0 auto;
					}

.sample img			{
					width: 100%;
					margin: 0px auto;
					}

/**Contact Form**/

#bgimg-thanks 		{
					background: url(images/thankyou.jpg) no-repeat center center fixed;
					background-size: cover;
					-webkit-background-size: cover;
					-moz-background-size: cover;
					-o-background-size: cover;
					}

.contact label 		{
					display: inline-block;
					text-align: right;
					}

.contact_name,
.contact_email 		{
					width: 100%;
					height: 65px;
					font: 300 25px 'lato', arial, sans-serif;
					padding: 10px;
					box-sizing: border-box;
					-moz-box-sizing: border-box;
					-o-box-sizing: border-box;
					-webkit-box-sizing: border-box;
				  	}

.contact_message	{
					width: 100%;
					height: 333px;
					font: 300 25px 'lato', arial, sans-serif;
					padding: 10px;
					box-sizing: border-box;
					-moz-box-sizing: border-box;
					-o-box-sizing: border-box;
					-webkit-box-sizing: border-box;
					}

.contact div 		{
					margin-top: 1em;
					}

textarea 			{
					vertical-align: top;
					height: 5em;
					}

.required-text 		{
					font: 300 15px 'lato', arial, sans-serif;
					color: #000000;
					}


@media only screen and (min-width: 992px) and (max-width: 1199px) {

.first 				{
					margin-left: 57px;
					}

.center 			{
					margin-top: 17%;
					}

.mainLinks 			{
					margin: 0 0 0 82px;
					}

div.work a.project-button 	{
							top: 43%;
							left: 28%;
							}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {

.center 			{
					margin-top: 20%;
					}

div.work a.project-button 	{
							left: 35%;
							}

}

@media only screen and (min-width: 450px) and (max-width: 767px) {

.mainTitle 			{
					font-size: 55px;
					}

hr.home 			{
					width: 410px;
					}

.subTitle 			{
					font-size: 27px;
					}

.center 			{
					margin-top: 29%;
					}

div.work a.project-button 	{
							top: 43%;
							left: 34%;
							}

.ampur-textbig 		{
					font-size: 48px;
					}

.lato-text 			{
					font-size: 17px;
					}

}

@media only screen and (max-width: 449px) {
.mainTitle 			{
					font-size: 42px;
					}

hr.home 			{
					width: 282px;
					}

.subTitle 			{
					font-size: 24px;
					}

.center 			{
					margin-top: 36%;
					}

.menu-button 		{
					width: 2.5em;
					height: 2.25em;
					}

.ampur-textbig 		{
					font-size: 42px;
					}

}









					
