/* TABLET STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (min-width: 768px) and (max-width: 1024px){
		button {text-decoration: none !important}

				.tileSpan{
		font-size: 7.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: 2.1vw;
		line-height: 2vw;
	}

	

	span{
	font-family: ZainBlack;
	}

	.ThisAboveBackground{
		margin-top: 7.5%;
		opacity: 100%;
	}


	.container{
		/*width:978px;*/
		width:93.75%;
		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;
	}

	.ThisIsTheHeader{
		padding-top: 5%;
		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: .9%;
		font-size: 3vw;
		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: 5%;
		font-size: 1.5vw;
		margin-left: 2vw;
		text-decoration: none;
	}







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

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

		.TitleMarginBottoms{
			margin-bottom: 4.8%;
		}

		.WorkSubtitle{
			font-size: 3.1vw;
		}

		.WorkCategoriyTitleLeftSide{
			margin-left:1.2%;
		}

		.WorkCategoriyTitleRightSide{
			padding-left:5.2% ;
		}

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

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

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

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

		.TitleSectionDescriptions{
			width: 80%;
   			 margin-bottom: 6.2%;
		}

		.ProjectButtons{
		display: block;
		  width: 28.2%;
		  padding-left: 4.5%;
		  padding-top: 2.7%;
		  padding-bottom: 2.7%;
		  background-color: rgb(124, 101, 134);
		  font-family: MonsterratRegular;
		  color: rgb(255, 249, 243);
		  font-size: 1.3vw;
		  border-radius: 50px;
		  text-decoration: none;
		  transition: 300ms;
		}

		p{
			font-size: 1.3vw;
	    	line-height: 2vw;
		}

		
		.OverviewParagraph{
			margin-bottom: 3%;
		}



		.RightSideInformation{
			margin-left: 10%;
		}

	.OverviewMarginBottom{
			margin-bottom: 10%;
		}

	


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



.TitleSection{
	width: 100%;
	padding-top: 57%;
	background-image: url(../images/CreationCupcakes/cc_ProjectPreviewScreen.png);
	background-size: cover;
	background-position: right;
	background-color: rgba(254, 178, 132, .45);			
	margin-bottom: 5%;
	border-style: solid;
	border-bottom-width: 6px;
	border-color: rgba(72,51,74, 1.0);
}

.TitleInformation{
	width: 50%;

}


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



	.SpacingBetweenSections{
		margin-bottom: 4%;
	}

	.ProcessImageSection{
		width: 50%;
		padding-top: 50%;
		margin-bottom:5%;
	}

	.ShowcaseImage{
			width: 100%;
			/*padding-top: 50%;
			background-color: rgba(171, 223, 230, .5);
			margin-bottom:5%;*/
			margin-left: auto;
			margin-right: auto;
		}

		.MobileShowcaseImage{
			display: none;
		}

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

	.PreviousandNextButtonsMobile{
		font-size: 1.3vw;
	}


};