/* DESKTOP STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (min-width: 1025px){

		.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.1vw;
		line-height: 1.58vw;
	}

	span{
	font-family: ZainBlack;
	}

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


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

	.WebsiteTitle{
		padding-top: 1.3%;
	   font-size: 2vw;
	   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: 6%;
		font-size: 1vw;
		margin-left: 2.5vw;
		text-decoration: none;
		transition: 300ms;
	}

	nav a:hover{
		color: #feb284;
		transition: 500ms;
	}









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

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

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

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

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

		.TitleSectionDescriptions{
			width: 60%;
			margin-bottom: 5.2%;
		}
		
		.RightSideInformation{
			margin-left: 10%;
		}

	.OverviewMarginBottom{
			margin-bottom: 10%;
		}

	


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



.TitleSection{
	width: 100%;
	padding-top: 56%;
	background-image: url(../images/TwrlAdvertisingCampaign/TwrlProjectCoverPhoto.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: right;
	background-color: rgba(244, 206, 196, .5);
	margin-bottom: 5%;
	border-style: solid;
	border-bottom-width: 8px;
	border-color: rgba(72,51,74, 1.0);
}

.TitleInformation{
	width: 60%;

}



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

}

	.ProblemImage{
		background-image: url(../images/TwrlAdvertisingCampaign/MerchBundle.png);
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
	
	}

	.ResearchImage{
		background-image: url(../images/TwrlAdvertisingCampaign/TwrlResearch.png);
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
/*		background-color: rgba(171, 223, 230, .5);*/
	
	}


	.TabAndDesktopNone{
		display: none;
	}

	.DisplayNoneThis{
		display: none;
	}

	
	.PreviousandNextButtonsMobile{
		font-size: 1.1vw;
	}

	.TWRLslider{
		width: 90%;
		padding-top: 50%;
		background-image: url(../images/TwrlAdvertisingCampaign/SliderImages/7.jpg);
		background-size: contain;
		background-repeat: no-repeat;
		margin-left: auto;
	}

	.ProjectButtons{
		width: 20%;
	}


};