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

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


	
		.DisplayNoneThis{
			display: none;
		}

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



	.TitleSection{
		width: 100%;
		padding-top: 55%;
		background-image: url(../images/WhirlWindProject/Cover_whirlwindImage.jpg);
		background-size: cover;
		background-position: center;
		margin-bottom: 5%;
		border-style: solid;
		border-bottom-width: 8px;
		border-color: rgba(72,51,74, 1.0);
	}

	.TitleInformation{
		width: 50%;

	}

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

		.RightSideInformation{
			margin-left: 10%;
		}




		.SpacingBetweenSections{
			margin-bottom: 4%;
		}

		.ProcessImageSection{
			width: 50%;
			padding-top: 50%;
			margin-bottom:5%;
/*			background-color: darkred;*/
		}

		.ProblemImage{
			background-image: url(../images/WhirlWindProject/Statistic.svg);
			background-size: cover;
			background-position: center;
		
		}

		.ResearchImage{
			background-image: url(../images/WhirlWindProject/Braille.png);
			background-size: cover;
			background-position: center;
		
		}

		.SketchesImage{
			background-image: url(../images/WhirlWindProject/Sketches.png);
			background-size: cover;
			background-position: center;
		}

		.TypefaceGIF{
			background-image: url(../images/WhirlWindProject/TypefaceGIF.gif);
			background-size: cover;
			background-position: center;
		}
		
		.PreviousandNextButtonsMobile{
			font-size: 1.3vw;
		}

		.WhirlSlider{
			width: 90%;
			padding-top: 60%;
			background-image: url(../images/WhirlWindProject/Slider/WhirlWindProject5.jpg);
			background-size: contain;
			background-repeat: no-repeat;
			margin-left: auto;
			margin-right: auto;
		}

};