/* 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;*/
		}


		.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;
		/*	height: 40px;
			line-height: 40px;*/
			text-align: center;
	/*		border-bottom: 1px solid;*/
			padding-top: 3%;
			font-size: 3.2vw;
	/*		margin-left: 2.5vw;*/
			text-decoration: none;
	
	/*		background-color: rgba(0,0,0,.25);*/
	/*		background-color: rgba(0,0,0,1);*/
		}


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

		h1{
				font-size: 7.72372188vw;
				line-height: 8.4vw;		
		}



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

		h4{
			font-size: 4.27873211vw;

		}

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


		.tileSpan{
			font-size: 16vw;
		}

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

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

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

		.WorkCategoriyTitleLeftSide{
			margin-bottom: 5.5%;
			width: 70%;
		}


		.accordion {
		  background-color: transparent;
		  cursor: pointer;
		  padding: 18px;
		  width: 100%;
		  padding-top: 5%;
		  padding-bottom: 5%;
		  margin-bottom: 15%;
		  border: none;
		  text-align: left;
		  outline: none;
		  font-size: 15px;
		  transition: 0.4s;
		  border-radius: 50px;
		}


	/* Title Section ////////////////////////////////////////////////////////////////////////////////////////////////*/	

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

		.TitleMarginBottoms{
			margin-bottom: 4.8%;
		}

		.WorkSubtitle{
			font-size: 6.1vw;
		}

		.WorkCategoriyTitleLeftSide{
			margin-left:1.2%;
		}

		.WorkCategoriyTitleRightSide{
			width: 70%;
			margin-left: auto;
			margin-right: 4%;
		}

		.FlexThisExtraSpace:nth-of-type(3){
			margin-left: 9%;
		}

		.Role_Date_Time_Margin{
			margin-left:1.2%;
			margin-right: 6.5%;
		}

		.RoleDateTime_Information{
			margin-right: 6%;
			margin-left: 1.2%;
		}

		.RoleDateTime_Information_LessSpace{
			margin-right: 3%;
			margin-left: 1.2%;
		}

		.OverviewMarginBottom{
			margin-bottom: 20%;
		}



	/* Information Section ////////////////////////////////////////////////////////////////////////////////////////////////*/	


	.MobileTitleSection{
		width: 100%;
		padding-top: 80%;
		background-image: url(../images/CreationCupcakes/cc_ProjectPreviewScreen2.png);
		background-size: cover;
		background-position: center;
		background-color: rgba(254, 178, 132, .5);			
		margin-bottom: 5%;
		border-style: solid;
		border-bottom-width: 8px;
		border-color: rgba(72,51,74, 1.0);
	}


	.InformationAboutProcessSection{
		width: 50%;
		padding-top: 3.5%;
	/*	background-color: orange;*/
	}


	.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: ZainBlack;
			font-size: 1.8vw;
			color: rgba(72,51,74, 1.0);
		}

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


		.MobileProcessImageSection{
			width: 80%;
			padding-top: 80%;
			margin-left:auto;
			margin-right:auto;
		}
		

		.MobileShowcaseImage{
			width: 96%;
		}

		.ShowcaseImage{
			display: none;
		}


		.ProblemImage{
			background-image: url(../images/CreationCupcakes/cc_WalkThrough.gif);
			background-size: cover;
			background-position: center;
		
		}


		.MobileMarginBottom{
			margin-bottom: 40%;
		}

		.MobileMarginBottom2{
			margin-bottom: 10%;
		}

		.MobileProblemMargin{
			margin-bottom: 10%;
		}

	.PreviousandNextButtonsMobile{
		font-size: 2.5vw;
	}

};