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

	p{
		font-size: 1.3vw;
    	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: 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: -3%;
		}

		.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: 12.5%;
		}

		.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: 53%;
	background-image: url(../images/BannerAdsProcess/BannerAdsCover.png);
	background-size: cover;
	background-position: left;
	background-color: rgba(171, 223, 230, .5);
	margin-bottom: 5%;
	border-style: solid;
	border-bottom-width: 6px;
	border-color: rgba(72,51,74, 1.0);
}

.TitleInformation{
	width: 50%;

}

.TitleSpacingSection{
	margin-bottom: 10%;
}


.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%;
		margin-left: auto;
		margin-right: auto;
	}

	.MobileShowcaseImage{
		display: none;
	}

	.ProblemImage{
		background-image: url(../images/BannerAdsProcess/BannerAds.gif);
		background-size: contain;
		background-position: center;
	
	}

	.ResearchImage{
		background-image: url(../images/PCOSWebsiteProject/MoodboardPCOS.png);
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
	
	}

	.WireframesImg{
		background-image: url(../images/PCOSWebsiteProject/WireframesNoBG.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		background-color: rgba(171, 223, 230, .5);
	}

	.VisualDesignImg{
		background-image: url(../images/PCOSWebsiteProject/VisualDesignNoBG.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		background-color: rgba(171, 223, 230, .5);
	}

	.PreviousandNextButtonsMobile{
		font-size: 1.3vw;
	}


}