/* DESKTOP STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (min-width: 1025px){

	.tileSpan{
		font-size: 10.91vw;
	}

	h1{
		font-size: 3.72372188vw;
	}

	h2{
		font-size: 2.30122699vw;
		line-height: 3.71vw;
	}

	h3{
		font-size: 2.57873211vw;
		line-height: 3.71vw;
	}

	h4{
		font-size: 1.6vw;
		line-height: 1.5vw;
	}
	p{
		font-size: 1.1vw;
		line-height: 1.58vw;
	}

	span{
	font-family: ZainBlack;
}
	.ThisAboveBackground{
		margin-top: 7.5%;
		opacity: 100%;
	}


	.container{
		/*width:978px;*/
		width:90%;
		margin-left: auto;
		margin-right: auto;
		left:2%;
		right:2%;
		top: 0;
		position: absolute;
/*		background-color: blueviolet;*/

	}

	.HolderforInfoContent{
		margin-left: auto;
		margin-right: auto;
		padding-top: 3%;
		width: 95%;
		height: auto;
	/*	background-color: darkorange;*/
	}

	.FlexThis{
		display: flex;
	}





/* Navigation / Header Bar ////////////////////////////////////////////////////////////////////////////////////////////////*/	


	.FlexThisHeader{
		display: flex;
	}

	.ThisIsTheHeader{
		padding-top: 4.134969%;
		background-color: rgba(234,241,251, .6);
		backdrop-filter: blur(10px);
	  position: fixed;
	  top: 30px;  
	  left: 2%;
	  width: 95%;
	/*  background: rgba(255, 255, 255, .60);*/
	  display: flex;
	  border-radius: 30px 30px 30px 30px;
	  align-items: center;
	  backdrop-filter:blur(5px);
	  -webkit-backdrop-filter:blur(5px);
	  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	  z-index: 10;
	}

	.WebsiteTitle{
		padding-top: 1.3%;
	   font-size: 2vw;
	   margin-left: .7%;
		display: block;
		cursor: pointer;
		font-family: ZainBlack;
		text-decoration: none;
		color: rgba(72,51,74, 1.0);	
	}

	.navButton{
		display: none;
	}


	nav{
		margin-left: auto;
		display: flex;

	}
	
nav a{
		padding-top: 6%;
		font-size: 1vw;
		margin-left: 2.5vw;
		text-decoration: none;
		transition: 300ms;
	}

	nav a:hover{
		color:#feb284;
		transition: 500ms;
	}













/* Hero Section ////////////////////////////////////////////////////////////////////////////////////////////////*/	

	.IntroSection{
			margin-bottom: 15.5%;
	}

	.HelloParagraph{
			padding-top: 5%;
			height: 40%;
			margin-bottom:  4%;
	}

	.BoldedTextIntro{
		font-size: 4.5vw;
		line-height: 4vw;
	}

	.WhoSeesPaddingTop{
		padding-top: .5%;
		line-height: 2.75vw;
		font-size: 3vw;
	}

	.SpinningButtonHolder{
			width: 17%;
			padding-top: 17%;
			margin-left: 70%;
			display: block;
			background-image: url(../images/DesktopImages/ArrowButton.svg);
			background-size: contain;
			position: relative;
			animation: SpinningButtonHolder 2s infinite;
			animation-delay: 3s;
	}

		@keyframes SpinningButtonHolder {

			0%   {transform:translateY(0px) ;}
 			50%  {transform:translateY(10px);}
  		100%  {transform:translateY(0px);}

	}




/* Work Header Styles ////////////////////////////////////////////////////////////////////////////////////////////////*/	

.WorkTitle{
		font-size: 3.1vw;
		margin-bottom: -1%;
		margin-left: .5%;
	}

	.WorkCategoriyTitleLeftSide{
		margin-bottom: 3%;
		margin-left:1.2%;
	}
	
	


/* Work Sections  ////////////////////////////////////////////////////////////////////////////////////////////////*/	

.SpacingBetweenSections{
	margin-bottom: 15.5%;
}

.ProjectHolder{
	width: 92%;
	margin-left: 3%;
	margin-bottom: 3%;
}

.ProjectImage{
	display: block;
	margin-left: 3%;
	width: 100%;
	padding-top: 40%;
	border-radius: 50px 50px 50px 50px;
	cursor: pointer !important;
	overflow: hidden;
	background-color: blueviolet;	
}

		.ProjectTitleShown{
			position: absolute;
			width: 100%;
/*			padding-top: 10%;*/
			background-color: rgba(234,241,251, .9);
			bottom: 0;
			border-radius: 0px 0px 50px 50px;
			transition: 0.5s;
  		transform: translateY(120%);

		}	

		.ProjectTitlePopUp:hover .ProjectTitleShown {
  		transform: translateY(0);
		}

		.TitleForHighlightedProjects{
			display: block;
			padding-left: 3%;
			padding-top: 5%;
			padding-bottom: 5%;
			font-family: MonsterratSemiBold;
			font-size: 1.7vw;
			color: rgba(72,51,74, 1.0);
		}

		.TitleForProjects{
			display: block;
			padding-left: 7%;
			padding-top: 9%;
			padding-bottom: 9%;
			font-family: MonsterratSemiBold;
			font-size: 1.7vw;
			color: rgba(72,51,74, 1.0);
		}









		/* Interactive Work  ///////////////*/

		.PCOSWebsiteImage{
			background-image: url(../images/DesktopImages/PolycysticOvarianSyndromeAwarnessWebsite.png);
			background-size: cover;
		}

		.ProjectTitlePopUp{
			position: relative;
			transition: 0.5s;
		}


		.HubLifeChurchImage{
			background-image: url(../images/DesktopImages/HubLifeChurch.jpg);
			background-size: cover;
			background-position: center;

		}


		.CupcakeCreationWebsiteImage{
			background-image: url(../images/DesktopImages/CreationCupcakesWebsite.jpg);
			background-size: cover;
		}

		.ExploreUWImage{
			background-image: url(../images/DesktopImages/ExploreUWApp.jpg);
			background-size: cover;
		}


		.BannerAdsImage{
			background-image: url(../images/DesktopImages/BannerAds.jpg);
			background-size: cover;
		}




		/* Graphic Work  ///////////////*/	

			.TwrlCampaignImage{
				background-image: url(../images/DesktopImages/TwrlImage.jpg);
				background-size: cover;
				background-position: center;
			}

			.whirlwindImage{
				background-image: url(../images/DesktopImages/WhirlImage.jpg);
				background-size: cover;
				background-position: center;
			}

			.EncyclopediaImage{
				background-image: url(../images/DesktopImages/EncyclopediaImage.jpg);
				background-size: cover;
				background-position: center;
			}

			.TheViewMagazineImage{
				background-image: url(../images/DesktopImages/TheView.jpg);
				background-size: cover;
				background-position: center;
			}

			.SynthTypefaceImage{
				background-image: url(../images/DesktopImages/SynthTypefaceImage.jpg);
				background-size: cover;
				background-position: center;
			}

			.MarshfieldRebrandingImage{
				background-image: url(../images/DesktopImages/MarshfieldRebranding.jpg);
				background-size: cover;
				background-position: center;
			}



		/* Photography and Video  ///////////////*/


		.HeartShapedBoxProjectImage{
			background-image: url(../images/DesktopImages/HeartShapedBox.png);
			background-size: contain;
		}

		.EngagementImage{
			background-image: url(../images/DesktopImages/EngagementCover.jpg);
			background-size: cover;
		}

		.PortraitImage{
			background-image: url(../images/DesktopImages/PortraitCover.jpg);
			background-size: cover;
		}

		.NatureImage{
			background-image: url(../images/DesktopImages/NatureCover.jpg);
			background-size: cover;
		}

		.TenPrinciples{
			background-image: url(../images/DesktopImages/10PrinciplesDesignImage.jpg);
			background-size: cover;
		}




		




	
































	

	

	















/* ABOUT SECTION ////////////////////////////////////////////////////////////////////////////////////////////////*/

	.InfoHolderforPopup{
		width: 60%;
	}

	.SpacingUnderneathInfo{
		margin-bottom: 7%;
	}

	.ProfilePic{
		margin-left: 6%;
		width: 31%;
		background-repeat: no-repeat;
		padding-top: 46%;
/*		 background-color: orange;*/
		background-image: url(../images/SelfPortrait.png);
		background-size: contain;
/*		margin-right: 5%;*/
		opacity: 100%;

	}

	.MarginBottomProfilePicandInfo{
		margin-bottom: 8%;
	}

	.AboutSection{
		padding-top: 8.5%;
		width: 44%;
		margin-right: 6%;
		margin-left: 4.5%;

/*		background-color: orange;*/
	}


	.AboutTitle{
		font-size: 3.1vw;
	    margin-bottom: -1%;
	    margin-left: .5%;
	}

	.AboutSubTitle{
		font-size: 3.1vw;
		margin-left: 1%;

	}

	.AboutParagraphTop{
/*		width: 77%;*/
		margin-left: 3%;
		margin-bottom: 3%;
	}

	.AboutParagraphBottom{
/*		width: 77%;*/
		margin-left: 3%;
		margin-bottom: 4.3%;
	}

	.MarginLeftList{
		margin-left: 15%;
	}

	.PaddingBottomForSkillsLists{
		padding-bottom: 10%;
	}

	.PaddingBottomForSkillsLists_{
		padding-bottom: 5%;
	}

	.PaddingBottomForLanguageLists{
		padding-bottom: 1.5%;
	}
	
	.ResumeSection{
		width: 92%;
		margin-left: 5%;
	}

	.SkillsInformationSection{
		width: 60%;
		margin-left: 47.5%;
		margin-bottom: 8.3%;
	}

	.ProgramsInformationSection{
		width: 63%;
		margin-left: 39.5%;
		margin-bottom: 8.3%;
	}

	.AwardsInformationSection{
		width: 63%;
		margin-left: 49.75%;
		margin-bottom: 8.3%;
	}

	.InstagramD{
		width: 51.4px;
  		height: 40.9px;
  		/*width: 3.6vw;
  		height: 5.4vh;*/
   	background-size: contain;
    	background-repeat: no-repeat;
		background-image: url(../images/BehanceIcon.svg);
	}

	.EmailD{
		width: 50.4px;
  		height: 42.9px;
/*  	width: 3.6vw;
  		height: 5.8vh;*/
      background-size: contain;
      background-repeat: no-repeat;
		background-image: url(../images/emailIcon.svg);
	}

	.LinkedInWrap{
		margin-left: 10%;
		margin-bottom: 2%;
	}

	.LinkedInD{
 /* 	width: 3.6vw;
  	height: 5.6vh;*/
  	width: 50.4px;
  	height: 40.9px;
    background-size: contain;
     background-repeat: no-repeat;
		background-image: url(../images/linkedInIcon.svg);
	}

	.ResumeD{
/*		width: 3.6vw;*/
		width: 46px;
		height: 40.4px;
/*		padding-top:6vh;*/
	  	margin-right: 3%;
	    background-size: contain;
	    background-repeat: no-repeat;
		background-image: url(../images/resumeIcon.svg);
	}

	.ResumeWrap{
		margin-left: 7%;
	}

	.DesktopPaddingIconWord{
		padding-top: 8%;
	    margin-left: 8%;
	    color: black;
	    transition: 300ms;
	    font-size: 1.2vw;
		line-height: 1.7vw;
		font-family: MonsterratRegular;
		text-decoration: none;
	}

	.IconsDesktop{
		margin-left: 4%;
	}

	.DesktopPaddingIconWord:hover{color: #05d1ff;
		transition: 500ms;}

	.bodyLinks{
		font-size: 1.1vw;
	}






/* BLOBS */

.box1{
		width: 90%;
	/*	padding-top: 10%;*/
	/*	background-color: black;*/
		left: 40%;
		margin-bottom: 7%;
		position: absolute;
		top: -2%;
	}

	.box2{
		width: 125%;
	/*	padding-top: 20%;*/
	/*	background-color: black;*/
		left: -10%;
		margin-bottom: 7%;
		position: absolute;
		top: 16%;
	}

	.m3{
		width: 100%;
	/*	padding-top: 20%;*/
	/*	background-color: black;*/
		left: -20%;
		margin-bottom: 7%;
		position: absolute;
		top: 41%;
	}

	.m4{
		width: 110%;
	/*	padding-top: 20%;*/
	/*	background-color: black;*/
		left: 75%;
		margin-bottom: 7%;
		position: absolute;
		top: 65%;
	}

	.m5{
		width: 80%;
	/*	padding-top: 10%;*/
	/*	background-color: black;*/
		left: -50%;
		margin-bottom: 7%;
		position: absolute;
		top: 85%;
	}


.ThisbackgroundForBlobs{
			width: 100%;
		position: relative;
		overflow: hidden;
		padding-top: 432%;
}






};






/* Footer  ///////////////*/