/* MOBILE STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (max-width: 767px){
	button {text-decoration: none !important}

	.Container{
		width:87.5%; /* 280 pixels at a 320 pixel screen width (iPhone 3 / 4 / 5) */
/*		background-color: blueviolet;*/
	}

	.mobilecontainer{
/*		left:4%;*/
		right:4%;
		top: 0;
		position: absolute;
	}


	.MobileFlexThis{
		display: flex;
	}

	.MobileMarginLeft3Percent{
		margin-left: 3%;
	}

	.blurBackground{
		backdrop-filter: blur(10px);
	}

	header{
		padding-top: 12px;
		height: 32px;
		background-color: rgba(255, 255, 255, .6);
		backdrop-filter: blur(10px);
	}


	/* Website Nav Bar */

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

	.navButton{
		margin-top: 2px;
		display: block;
		width: 40px;
		height: 40px;
/*		background-color: #0f0;*/
		position: absolute;
		right: 0;
		margin-right: 3%;
		top: 0;
		background-image: url(../images/Mobile/HamburgerIcon.png);
		background-size: contain;
		background-repeat: no-repeat;
	}


nav{
			position: absolute;
			width: 100%;
			top: 40px;
			left: 0px;
	/*		background-color: rgba(0,0,0,.25);*/
			display: none;
				background-color: rgba(255, 255, 255, .6);
			backdrop-filter: blur(10px) !important;
		}

		nav a{
			display: block;
			text-align: center;
			padding-top: 3%;
			font-size: 3.2vw;
			text-decoration: none;
		}

		.marginbottbottomThis{
			margin-bottom: 3%;
		}


		.ThisAboveBackground{
			margin-top: 10.5%;
			margin-left: 3%;
		}


	h1{
		font-size: 7.72372188vw;
	
	}



	h3{
			font-size: 5.5vw;
			line-height: 5vw;
	}

	p{
		font-size: 2.5vw;
    	line-height: 3.5vw;
	}

/*	.MobileTitleWidth{
		width: 60%;
	}
*/
	.tileSpan{
		font-size: 13.91vw;
	}

	.MobileHelloParagraph{
		padding-top: 3%;
/*		margin-left: 24%;*/
	}

	.WhoSeesPaddingTop{
		padding-top: .5%;
	}

	.WorkTitleSection{
		padding-top: 15%;
		margin-bottom: 1%;
	}

	.WorkTitle{
		font-size: 6vw;
	}

	.WorkCategoriyTitleLeftSide{
		margin-bottom: 5.5%;
		margin-left: 1%;
	}


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

	.BoldedTextIntro{
		font-size: 6.5vw;
		line-height: 6vw;
	}

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


		.SpinningButtonHolder{
			width: 25%;
			padding-top: 25%;
			margin-left: 65%;
			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 Sections  ////////////////////////////////////////////////////////////////////////////////////////////////*/	

.SpacingBetweenSections{
	margin-bottom: 30.5%;
}

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

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

		.ProjectTitleShown{
			position: absolute;
			width: 100%;
			background-color: rgba(234,241,251, .9);
			bottom: 0;
			border-radius: 0px 0px 50px 50px;	
		}	


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

		.TitleForProjects{
			display: block;
			padding-left: 7%;
			padding-top: 10%;
			padding-bottom: 9%;
			font-family: MonsterratSemiBold;
			font-size: 3vw;
			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;
		}


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


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

		}

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

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

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

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




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

			.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;
			}



		/* 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{
		width: 63.2%;
		background-repeat: no-repeat;
		padding-top: 55%;
		background-image: url(../images/profilepic.png);
		background-size: contain;
		opacity: 100%;

	}
*/

	.MarginBottomProfilePicandInfo{
		margin-bottom: 8%;
	}

	.bodyLinks{
		font-size: 2.5vw !important;
    	line-height: 3.5vw !important;
	}

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


.AboutParagraphTop{
		margin-bottom: 3%;
		top: 12%;
/*		left: 40%;*/
		width: 75%;
		margin-left: 3%;
		font-size: 2.5vw;
    	line-height: 3.5vw;

	}

	.AboutTitleText{
		top: 0;
		left: 47%;
		margin-bottom: 3.7%;
	}

	.AboutParagraphBottom{
		margin-bottom: 4.3%;
		font-size: 2.5vw;
    	line-height: 3.5vw;
		width: 75%;
		margin-left: 3%;
	}

	.AboutSection{
		margin-left: 1%;
	}

	.MobileAboutSectionHeaders{
		margin-bottom: 2% !important;
	}


	.AboutTitle{
		font-size: 3.07873211vw;
		margin-bottom: -.7%;
		margin-left: .5%;
	}

	.AboutSubTitle{
		margin-left: .9%;
		margin-bottom: 5%;
	}


	.MobileProfilePic{
		margin-left:auto;
		width: 60%;
		background-repeat: no-repeat;
		padding-top: 78%;
/*		 background-color: orange;*/
		background-image: url(../images/SelfPortrait.png);
		background-size: contain;
/*		margin-right: 5%;*/
		opacity: 100%;
	}

	.MobileMarginBottomProfilePicandInfo{
		margin-bottom: 8%;
	}



	.PaddingBottomForSkillsLists{
		padding-bottom: 4%;
	}

	.PaddingBottomForLanguageLists{
		padding-bottom: 1.5%;

	}

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

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

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

	.AwardsInformationSection{
		width: 80%;
		margin-bottom: 8.3%;
		margin-left: 1%;
	}

	.MarginLeftList{
		margin-left: 20%;
	}

	.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: osRegular;
		text-decoration: none;
	}

	.IconsDesktop{
		margin-left: 4%;
	}

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

/* BLOBS */

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

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

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

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

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


	.ThisbackgroundForBlobs{
		width: 100%;
		position: relative;
		overflow: hidden;
/*		background-color: orange;*/
		padding-top: 1315%;
}




		


	


	
}