@font-face {
	font-family: 'Circular Std Book';
	src: url('../assets/fonts/CircularStd-Book.eot');
	src: url('../assets/fonts/CircularStd-Book.eot?#iefix') format('embedded-opentype'),
		 url('../assets/fonts/CircularStd-Book.woff') format('woff'),
		 url('../assets/fonts/CircularStd-Book.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Circular Std Medium';
	src: url('../assets/fonts/CircularStd-Medium.eot');
	src: url('../assets/fonts/CircularStd-Medium.eot?#iefix') format('embedded-opentype'),
		 url('../assets/fonts/CircularStd-Medium.woff') format('woff'),
		 url('../assets/fonts/CircularStd-Medium.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Circular Std Bold';
	src: url('CircularStd-Bold.eot');
	src: url('../assets/fonts/CircularStd-Bold.eot?#iefix') format('embedded-opentype'),
		 url('../assets/fonts/CircularStd-Bold.woff') format('woff'),
		 url('../assets/fonts/CircularStd-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}


body, html {
	margin: 0px;
	padding:0px;
	font-family: 'Circular Std Book', sans-serif;
	height: 100%;
    font-variant-ligatures: none;
	font-display: swap;
}

a {
	-webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

body {
	animation-duration: 2s;
  	animation-delay: 0.5s;

}

@media screen and (max-width: 500px) { 
    /*
	.BackgroundMobile {
		background-image: url('../assets/img/header/circle.png') !important;
		background-size: 800px !important;
		background-position: left 0px top -250px !important;
		background-repeat: no-repeat !important;
	}
    */
}

.Wrapper {
	max-width: 1350px;
	margin: 0px auto;
	overflow-x: hidden !important;
}

.WrapperMargin {
	position: relative;
	top: 130px;
	margin: 120px 0px 0px 0px;
}

@media screen and (max-width: 1399px) {
	.WrapperMargin {
		margin: 120px 30px 0px 30px;
	}
}

@media screen and (max-width: 770px) {
	.WrapperMargin {
		margin: 50px 30px 0px 30px;
	}
}

@media screen and (max-width: 500px) {
	.WrapperMargin {
		margin: 120px 22px 0px 22px;
		top: 0;
	}
}

@media screen and (max-width: 320px) {
	.WrapperMargin {
		margin: 120px 18px 0px 18px;
	}
}
/*--Nav*/
header > nav {
    z-index: 99;
    width: 100%;
    height: 80px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    -webkit-transition: all .3s ease-out 0.1s;
	-moz-transition: all .3s ease-out 0.1s;
	-o-transition: all .3s ease-out 0.1s;
	transition: all .3s ease-out 0.1s;
	background-color: rgba(255,255,255,0);
}

.NavFixedBackground {
	-webkit-transition: all .3s ease-in 0.1s;
	-moz-transition: all .3s ease-in 0.1s;
	-o-transition: all .3s ease-in 0.1s;
	transition: all .3s ease-in 0.1s;
	background-color: rgba(255,255,255,1);
}

.NavFixedWrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 16px;
    color: #111213;
    max-width: 1350px;
    margin: 0px auto;
    padding: 0px 30px;
    height: 80px;
    z-index: 100;
}

@media screen and (max-width: 1399px) {
	.NavFixedWrapper {
		max-width: 1345px;
		padding: 0px 30px;
        height: 70px;
	}
}

@media screen and (max-width: 500px) {
	.NavFixedWrapper {
		padding: 0px 22px;
	}
}

@media screen and (max-width: 500px) {
	header > nav {
		font-size: 16px;
		color: #111213;
		height: 70px;
		align-items: center;
	}
}

@media screen and (max-width: 320px) {
	.NavFixedWrapper {
		padding: 0px 18px;
	}
}

.HeaderNavLeft > a {
	text-decoration: none;
	color: #111213;
  	transition: all .5s ease;
}

.HeaderNavLeft > h3 {
    font-size: 20px;
    font-family: 'Circular Std Bold', sans-serif;
}

.HeaderNavLeft > a:hover {
	color: #fa3800;
}

.HeaderNavRight > ul  {
	display: flex;
	font-family: 'Circular Std Bold', sans-serif;
	padding: 0px;
}

.HeaderNavRight > ul > li > a {
	text-decoration: none;
	color: #111213;
	transition: all 0.3s ease-out;
}

.HeaderNavRight > ul > li > a:hover {
	color: #fa3800;
}

.HeaderNavRight > ul > li {
	padding-right: 40px;
}

@media screen and (max-width: 500px) {
	.HeaderNavRight > ul > li {
		padding-right: 20px;
	}
}

@media screen and (max-width: 320px) {
	.HeaderNavRight > ul > li {
		padding-right: 10px;
	}
}

.HeaderNavRight > ul > li:last-child {
	padding-right: 0px;
}

.Anchor {
	opacity: 0;
	position: absolute;
}

@media screen and (max-width: 500px) {
	.Anchor {
		height: 1px;
		display: block;
		margin-top: -30px;
	}
}
/*--Nav*/

/*--Header*/
.Intro {
	position: relative;
	margin-left: 80px;
}

@media screen and (max-width: 960px) {
	.Intro {
		margin-left: 0px;
	}
}

@media screen and (max-width: 735px) {
	.Intro {
		margin-top: 80px;
	}
}

@media screen and (max-height: 500px) {

	.Intro > h1 > br {
		display: none;
	} 
}

.Intro > img {
	position: absolute;
	top: -120px;
	left: -140px;
    width: 300px;
	z-index: -1;
}

@media screen and (max-width: 500px) { 
	.Intro > img {
		display: none;
	}
}


.Intro > h1 {
	font-size: 72px;
    font-family: 'Circular Std Bold', sans-serif;
    font-feature-settings: "ss01";
    letter-spacing: -.01em;
	line-height: 88px;	
	color: #111213;
	max-width: 1000px;
	padding-left: 150px;
	margin:0;
	justify-content: space-between;
    animation-duration: 1.5s;
  	animation-delay: 0s;
}

@media screen and (max-width: 1024px) {
	.Intro	> h1 {
		padding-left: 0px;
	}
}

@media screen and (max-width: 960px) {
	.Intro > h1 {
		padding-left: 50px;
		max-width: 100%;
	}
}

@media screen and (max-width: 735px) {
	.Intro > h1 {
		padding-left: 0px;
		font-size: 11vw;
		line-height: 12.8vw;
		text-align: left;
	}
}

@media screen and (max-width: 500px) {
	.Intro > h1 {
		padding-left: 0px;
		font-size: 10vw;
		line-height: 12vw;
		text-align: left;
	}
}

@media screen and (max-width: 375px) {
	.Intro > h1 {
		font-size: 9.7vw;
		line-height: 11.5vw;
		text-align: left;
	}
}


@media screen and (max-width: 320px) {
	.Intro > h1 {
		font-size: 9.5vvw;
		line-height: 11.3vw;
		text-align: left;
	}
}

/*--Header*/

/*-- Project*/
.FullCaseLink {
	height: 100%;
	width: 100%;
	position: absolute;
	background-color: transparent;
	display: block;
	z-index: 10;
}


.ProjectsInfos {
	display: flex;
	margin-top: 200px;
	margin-bottom: 30px;
}

@media screen and (max-width: 960px) {
	.ProjectsInfos {
		margin-top: 120px;
	}
}

.AnchorProjectsMobile {
	display: none;
}

.AnchorProjectsDesk {
	opacity: 0;
}

@media screen and (max-width: 500px) { 
	.ProjectsInfos {
		margin-top: 80px;
		margin-bottom: 20px;
	}
}

.ProjectsInfos > div > h2 {
	font-size: 17px;
	line-height: 20px;
	font-weight: 400;
	margin: 0px;
}

.ProjectsInfos > div > p {
	font-size: 17px;
	line-height: 20px;
	font-weight: 300;
	color: #7A7A7A;
	margin: 0px;
}

.ProjectsInfos > div {
	width: 50%;
	display: flex;
}
/*ONLY TEMPLATE*/
@media screen and (max-width: 816px) {
	.ProjectsInfos > div > p > br {
		display: none;
	}
} 

/*ONLY TEMPLATE*/

.ProjectsInfos > div:first-child {
	display: flex;
	justify-content: flex-end;
	margin-right: 24px;
}

@media screen and (max-width: 735px) { 
	.ProjectsInfos > div:first-child {
		justify-content: flex-start;
	}

	.ProjectInfosDescription {
		display: none !important;
	}
}

.ProjectsListing {
	display: flex;
	margin-bottom: 24px;
}

@media screen and (max-width: 960px) { 
	.ProjectsListing {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 0px;
	}
}

.ProjectTemplate {
	width: 100%;
	height: 660px;
	position: relative;
}

@media screen and (max-width: 1024px) { 
	.ProjectTemplate {
		height: 660px;
	}
}

@media screen and (max-width: 1024px) { 
	.ProjectTemplate {
		height: 580px;
    }
}

@media screen and (max-width: 960px) { 
	.ProjectTemplate {
		height: 600px;
	}
}

@media screen and (max-width: 500px) { 
	.ProjectTemplate {
		height: 420px;
	}
}

@media screen and (max-width: 375px) { 
	.ProjectTemplate {
		height: 400px;
	}
}


.ProjectInfosWrapper {
	position: absolute;
	bottom: 0;
	padding: 0px 0px 50px 50px;
}

@media screen and (max-width: 500px) { 
	.ProjectInfosWrapper {
		position: absolute;
		bottom: 0;
		padding: 0px 0px 25px 25px;
	}
}

.TagsWrapper {
	display: flex;
}

.ProjectTypeWrapper {
	display: flex;
}

.ProjectType {
    padding: 0 8px;
    background-color: #fff;
    font-size: 12px;
    letter-spacing: 0em;
    font-family: 'Circular Std Medium', sans-serif;
    font-feature-settings: "ss01";
    color: #121212;
    line-height: 20px;
    border-radius: 3px;
    text-align: center;
}

.BlackTag {
	background-color: #111213 !important;
	color: #fff !important;
}

.BlackColor {
	color: #111213 !important;
}

.DarkTag {
	background-color: #111213 !important;
	color: #232323 !important;
}
.DarkColor {
	color: #232323 !important;
}

.ProjectType:first-child {
	margin-right: 10px;
}

.ProjectName {
	font-family: 'Circular Std Bold', sans-serif;
    font-feature-settings: "ss01";
	color: #FFFFFF;
    letter-spacing: -.02em;
	font-size: 46px;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	transition: all 0.3s ease-out;
	cursor: pointer;	
}

.ProjectName:hover {
	opacity: 0.5;
}

@media screen and (max-width: 500px) { 
	.ProjectName {
		font-size: 9vw;
		margin: 5px 0px 0px 0px;
	}
}

.ProjectDescription {
	color: #FFFFFF;
	font-size: 15px;
	margin: 25px 0px 0px 0px;
	padding: 0px;	
}

.ProjectTemplate:first-child {
	margin-right: 24px;
}

@media screen and (max-width: 960px) { 
	.ProjectTemplate {
		margin-bottom: 20px;
	}

	.ProjectTemplate:first-child {
		margin-right: 0px;
	}
}


.ProjectTemplateImgDesc {

	 background-repeat: no-repeat; 
	 width: 100%; 
	 height: 100%;
	 background-position: top;
	 background-size: cover;
	 image-rendering: -webkit-optimize-contrast !important;

}

/**/

.EmpowerLocal > .ProjectTemplateImgDesc {
	background-image: url('../assets/img/projects/empowerlocal/home.jpg');
}
/**/

.MSPride > .ProjectTemplateImgDesc {
	background-image: url('../assets/img/projects/mspride/home.jpg');
}

/**/

.MSStore > .ProjectTemplateImgDesc {
	background-image: url('../assets/img/projects/msstore/home.jpg');
}

/**/

.LaunchPlan > .ProjectTemplateImgDesc {
	background-image: url('../assets/img/projects/launchplan/home.jpg');
}

/**/

.Armstrong > .ProjectTemplateImgDesc {
	background-image: url('../assets/img/projects/armstrong/home.jpg');
}

/**/

.MSCareers > .ProjectTemplateImgDesc {
	background-image: url('../assets/img/projects/mscareers/home.jpg');
}

/**/

/**/

.GS > .ProjectTemplateImgDesc {
	background-image: url('../assets/img/projects/gs/home.jpg');
}

/**/

/**/

.Wannado > .ProjectTemplateImgDesc {
	background-image: url('../assets/img/projects/wannado/home.jpg');
}

/**/

.MR > .ProjectTemplateImgDesc {
	background-image: url('../assets/img/projects/msmr/home.jpg');
}

/**/

/**/

.Imperative > .ProjectTemplateImgDesc {
	background-image: url('../assets/img/projects/imperative/home.jpg');
}

/**/

@media screen and (max-width: 500px) {
	.ProjectTemplateImgDesc {
		background-size: cover;
	}
}

.NewProject {
	background-color: #F9F9F9;
}


.NewProjectLink {
	text-decoration: none;
	color: #111213;
	background: #F1F1F1;
  	transition: background-color 0.3s ease !important;
  	border-radius: 32px;
  	font-weight: 400;
  	padding: 20px;
}

.NewProjectLink:hover {
	background: #FFFFFF;
}


.NewProjectLink > span {
	padding-right: 5px;
}

.NewProjectLink > img {
	padding-left: 10px;
}

.NewProjectWrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}
/*-- Project*/

/*--AboutMe*/
.AboutMe {
	margin: 150px 0px;
}

@media screen and (max-width: 755px) { 
	.AboutMe {
		margin: 70px 0px;
	}
}

@media screen and (max-width: 500px) { 
	.AboutMe {
		margin: 60px 0px;
	}
}

.AboutMeContent2Row {
	align-items: center;
	display: flex;
	margin-bottom: 10px;
}

.AboutMeContent2Row > h4 {
	margin: 0px 0px 0px 0px;
    font-size: 20px;
    font-family: 'Circular Std Bold', sans-serif;
    font-feature-settings: "ss01";
	display: flex;
	font-size: 20px;
	letter-spacing: 0px;
}

.AboutMeContent2Row > img {
	margin-left: 10px;
	width: 25px;
}

.AboutMe > p {
	font-weight: 300;
	font-size: 40px;
	line-height: 50px;
	margin: 0px;
	max-width: 990px;
}

@media screen and (max-width: 1024px) { 
	.AboutMe > p {
		max-width: 860px;	
	}
}

.AboutMe > p:last-child {
	margin-top: 25px;
}

@media screen and (max-width: 500px) { 
	.AboutMe > p {
		font-size: 7vw;
		line-height: 9vw;
		width: 100%;
		max-width: 400px;
	}
}

@media screen and (max-width: 414px) { 
	.AboutMe > p {
		max-width: 340px;
	}
}

@media screen and (max-width: 375px) { 
	.AboutMe > p {
		font-size: 7vw;
		line-height: 9vw;
		width: 100%;
		max-width: 305px;
	}
}
/*--AboutMe*/

/*--AboutUs*/
.AboutUs {
	background-color: #ffffff;
	overflow: hidden;
	box-sizing: border-box;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.AboutUsTitle2Row > h4 {
    font-size: 20px;
    font-family: 'Circular Std Bold', sans-serif;
    font-feature-settings: "ss01";
	display: inline-block;
	letter-spacing: 0px;
}

.AboutUsWrapper {
	position: relative;
	max-width: 1350px;
	margin: 150px auto;
}


@media screen and (max-width: 755px) {
	.AboutUsWrapper {
		margin: 70px auto;
	}
}

@media screen and (max-width: 500px) { 
	.AboutUsWrapper {
		margin: 60px auto;
	}
}

.AboutUsTitle2Row {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.AboutUsTitle2Row > .PictoFullTeamDesktop {
	width: 40px;
	margin-left: 10px;
}

.AboutUsTitle2Row > .PictoFullTeamMobile {
	width: 40px;
	margin-left: 10px;
}

@media screen and (max-width: 1345px) {
	.AboutUsContent {
		margin: 0px 30px;
	}
}

@media screen and (max-width: 500px) {
	.AboutUsContent {
		margin: 0px 22px;
	}
}

@media screen and (max-width: 320px) {
	.AboutUsContent {
		margin: 0px 18px;
	}
}

.AboutUsContent2Row {
	max-width: 65%;
}

@media screen and (max-width: 1025px) {
	.AboutUsContent2Row {
		max-width: 850px;
	}
}

.AboutUsContentDescription {
	color: #8792a8;
	font-family: 'Circular Std Bold', sans-serif;
    font-feature-settings: "ss01";
	font-size: 46px;
	line-height: 56px;
	margin: 0px;
	height: 100%;
	display: initial;
    z-index: 111;
}

@media screen and (max-width: 500px) { 
	.AboutUsContentDescription{
		font-size: 7vw;
		line-height: 9vw;
		width: 100%;
	}
}

.BrAboutUsMobile {
	display: none;
}

@media screen and (max-width: 500px) { 
	.BrAboutUsMobile {
		display: block
	}
}

.PictoFullTeamMobile {
	opacity: 0;
	transition: all 0.3s ease-out;
}

@media screen and (max-width: 860px) {
	.AboutUsContentCircles {
		display: none;
	}

	.PictoFullTeamDesktop {
		opacity: 0;
		display: none;
	}

	.PictoFullTeamMobile {
		opacity: 1;
	}
    
}

.AboutUsContentLarge {
	position: absolute;
    right: 180px;
    top: 30%;
    transform: translate(0%,-50%);
    z-index: 0;
}

.AboutUsContentSmall {
	position: absolute;
    right: 100px;
    top: 80%;
    transform: translate(0%,-50%);
    z-index: 0;
}

@media screen and (max-width: 860px) {
    .AboutUsContentLarge {
		display: none;
	}
	.AboutUsContentSmall {
		display: none;
	}
}

.AboutUsContentSmall > div > img {
	width: 70px;
	max-width: 100%;
}

.AboutUsContentLarge > div > img {
	width: 160px;
	max-width: 100%;
}

.AboutUsContentCircles > div > img {
	width: 600px;
	max-width: 100%;
}

@media screen and (max-width: 1000px) {
	.AboutUsContentCircles > div > img {
		width: 600px;
	}
}

.AboutUsContentCircles > div > img:nth-child(2) {
	position: absolute;
	left: 0;
}

.AboutUsContentCircles > div > img:nth-child(2) {
	position: absolute;
	left: 50;
}

.AboutUsContentCircles > div > img:nth-child(3) {
	position: absolute;
	left: 100;
}

.ProfilsWrapper {
	margin-top: 100px;
	display: flex;
}

@media screen and (max-width: 600px) { 
	.ProfilsWrapper {
		margin-top: 80px;
		flex-direction: column;
	}
}

.Profil {
	width: 288px;
	position: relative;
	z-index: 2;
}

@media screen and (max-width: 600px) { 
	.Profil:nth-child(2) {
		margin-top: 100px;
	}
}

.Profil > p {
	margin: 0px;
	font-weight: 300;
	font-size: 17px;
}

.Profil > span {
	margin-top: 05px;
	display: block;
}

@media screen and (max-width: 414px) { 
	.Profil > span {
		margin-top: 5px;
		display: block;
	}
}


.TagLinkAboutUs {
	padding: 5px 18px;
    font-size: 13px;
	font-family: 'Circular Std Bold', sans-serif;
    font-feature-settings: "ss01";
    line-height: 32px;
    border-radius: 30px;
    text-align: center;
    display: inline-flex;
    margin-top: 30px;
    z-index: 80;
    position: relative;
}

.TagLinkAboutUs {
	transition: all 1s ease-out;
}


.Profil:first-child {
	margin-right: 50px;
}

.CircleProfil {
	position: absolute;
	top: -90;
	left: -10px;
	z-index: -3;
}
/*--AboutUs*/

/*--Footer*/

footer {
	padding-top: 40px;
	padding-bottom: 40px;
}

.FooterColumnWrapper {
	display: flex;
	margin: 0 auto;
	width: 100%;
	justify-content: left;
    overflow-x: hidden !important;
}

.FlexContainer {
    background: linear-gradient(90deg, #FFFBE8 0%, #FFDEDE 100%);
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    padding: 50px 0px 50px 0px;
}
    
.FlexItem {
    padding: 30px 50px 0px 50px;
}


.FlexItem > p {
	font-size: 37px;
    font-family: 'Circular Std Bold', sans-serif;
    font-feature-settings: "ss01";
	margin-top: 0px;
    
    
}

.Copyright {
    font-size: 14px;
    line-height: 22px;
    font-family: 'Circular Std Bold', sans-serif;
    text-align: left;
	margin-top: 30px;
    margin-bottom: 0px;
}

@media screen and (max-width: 1920px) {
    .FlexContainer {
        flex-wrap: wrap;
        padding: 50px 0px 50px 0px;
    }
}

@media screen and (max-width: 1350px) {
    footer {
	   padding-bottom: 30px;
    }   
    .FlexContainer {
        flex-wrap: wrap;
        padding: 50px 0px 50px 0px;
    }
}

@media screen and (max-width: 960px) {
    .FlexContainer {
        flex-wrap: column;
        margin: 0px;
        padding: 30px 0px 30px 0px;
    }
    .FlexItem {
        padding: 20px 40px 20px 40px;
    } 
}

@media screen and (max-width: 768px) {
    footer {
	   padding-top: 70px;
	   padding-bottom: 20px;
    }
    
    .FlexContainer {
        flex-wrap: column;
        padding: 30px 0px 30px 0px;
    }
    
	.FlexItem > p {
		font-size: 30px;
	}	
    .FlexItem {
        padding: 20px 40px 20px 40px;
    }  
}


@media screen and (max-width: 580px) {
    footer {
	   padding-top: 70px;
	   padding-bottom: 20px;
    }
    
    .FlexContainer {
        padding: 30px 0px 30px 0px;
    }
    
	.FlexItem > p {
		font-size: 30px;
	}	
    
    .FlexItem {
        padding: 20px 40px 20px 40px;
    }  
}

@media screen and (max-width: 414px) {
    
    footer {
	   padding-top: 70px;
	   padding-bottom: 20px;
    }
    
    .FlexContainer {
        padding: 30px 0px 30px 0px;
    }
    
	.FlexItem > p {
		font-size: 30px;
	}	
    
    .FlexItem {
        padding: 20px 20px 20px 20px;
    }   
}

.ColumnTxtCompany {
    font-family: 'Circular Std Bold', sans-serif;
    font-feature-settings: "ss01";
    line-height: 24px;
    font-size: 18px;
	margin-bottom: 0px;
	width: 320px;
}


.ColumnTxtLight {
    font-size: 16px;
    font-family: 'Circular Std Medium', sans-serif;
    font-feature-settings: "ss01";
    margin-top: 4px;
    margin-bottom: 36px;
	line-height: 20px;
    color: #5B667C;
    width: 320px;
}

.ColumnTxtLightMed {
    font-size: 16px;
    font-family: 'Circular Std Medium', sans-serif;
    font-feature-settings: "ss01";
    margin-top: 4px;
    margin-bottom: 36px;
	line-height: 22px;
    color: #5B667C;
    width: 320px;
}

.ColumnTxtLightMed > a:link {
	color: #5B667C;
}

.ColumnTxtLightMed > a:active {
	color: #5B667C;
}

.ColumnTxtLightMed > a:visited {
	color: #5B667C;
}

.ColumnTxtLightMed > a:hover {
	color: #ff2765;
}

.ColumnTxtBrand {
    font-size: 18px;
	margin-bottom: 0px;
}

.ColumnInfos {
    width: 100%;
}

.SocialLinks > a {
	text-decoration: none;
	color: #111213;
	transition: all 0.3s ease-out;
	background: #fff;
	border-radius: 30px;
	padding: 10px 16px;
	margin-right: 12px;
    margin-bottom: 12px;
    font-family: 'Circular Std Bold', sans-serif;
	font-size: 15px;
	display: inline-flex;
}

.SocialLinks > a:hover {
	text-decoration: none;
	color: #ff2765;
}

.Border {
	display: block;
	width: 30px;
	height: 2px;
	background-color: #00D405;
	margin-right: 10px;
}


.SpanTxtStrong {
	display: flex;
	align-items: center;
	margin-bottom: 5px;
}

@media screen and (max-width: 660px) {
    /*
    .FooterMobileWrapper {
        width: 100%;
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        flex-direction: column;
	}
    */
}

@media screen and (max-width: 728px) {
    .ColumnTxtLight {
        margin-bottom: 10px;
    }
    .ColumnTxtLightMed {
        margin-bottom: 10px;
    }
}

.BlackColor {
	color: #111213 !important;
}

.MarginBottom {
	margin-bottom: 30px;
}

.MarginBottomShort {
	margin-bottom: 12px;
}



/*--Footer*/

/*----------------------------------------------------------------------------------------------------*/

/*--Project Template*/

.ProjectBodyLight {
	background: #f8f8f8;
}

.ProjectBody {
	background: #eaedf0;
}

.ProjectHeaderLight {
	background-color: #f8f8f8;
	overflow: hidden;
	box-sizing: border-box;
    width: 100vw;
    height: 650px;
    margin-left: calc(-50vw + 50%);
}

.ProjectHeader {
	background-color: #eaedf0;
	overflow: hidden;
	box-sizing: border-box;
    width: 100vw;
    height: 650px;
    margin-left: calc(-50vw + 50%);
}

@media screen and (max-width: 505px) {
	.ProjectHeader {
		height: auto;
		margin-bottom: 60px;
	}
    .ProjectHeaderLight {
		height: auto;
		margin-bottom: 60px;
	}
}

.ProjectHeaderWrapper {
	position: relative;
	max-width: 1350px;
	margin: 150px auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

@media screen and (max-width: 1150px) {
	.ProjectHeaderWrapper {
		margin: 150px 30px;
	}
}

@media screen and (max-width: 505px) {
	.ProjectHeaderWrapper {
		margin: 100px 22px 0px;
	}
}

@media screen and (max-width: 320px) {
	.ProjectHeaderWrapper {
		margin: 100px 18px 0px;
	}
}

@media screen and (max-width: 1150px) {
	.ProjectContentWrapper {
		margin: 0px 30px;
	}
}

@media screen and (max-width: 505px) {
	.ProjectContentWrapper {
		margin: 0px 22px;
	}
}

@media screen and (max-width: 320px) {
	.ProjectContentWrapper {
		margin: 0px 18px;
	}
}

.ProjectNameTemplate {
    color: #111213;
	text-align: center;
    font-family: 'Circular Std Bold', sans-serif;
    font-feature-settings: "ss01";
	font-size: 80px;
    letter-spacing: -.02em;
	margin: 0px;
}

@media screen and (max-width: 505px) {
	.ProjectNameTemplate  {
		text-align: left;
	}
}

@media screen and (max-width: 770px) {
	.ProjectNameTemplate {
		font-size: 12vw;
	}
}

@media screen and (max-width: 505px) {
	.ProjectHeaderWrapper {
		align-items: flex-start;
	}
}

.ProjectDescriptionTemplate {
    color: #8792a8;
	font-family: 'Circular Std Book', sans-serif;
    font-feature-settings: "ss01";
	text-align: center;
	max-width: 660px;
	font-size: 20px;
	line-height: 25px;
	font-weight: 100;
	margin: 30px 0px 0px 0px;
}

@media screen and (max-width: 505px) {
	.ProjectDescriptionTemplate {
		text-align: left;
		margin-top: 20px;
	}
}

@media screen and (max-width: 414px) {
	.ProjectDescriptionTemplate {
		font-size: 4.7vw;
		line-height: 6vw;
		max-width: 360px;
	}
}


@media screen and (max-width: 320px) {
	.ProjectDescriptionTemplate {
		font-size: 5.7vw;
		line-height: 7vw;
		max-width: 360px;
	}
}



.ProjectTemplateTagsWrapper {
	display: flex;
	margin-top: 30px;
}

.ProjectTemplateTag {
	padding: 10px 16px;
    font-family: 'Circular Std Medium', sans-serif;
    font-feature-settings: "ss01";
    background: #0085FF;
    font-size: 15px;
    color: #FFF;
    border-radius: 30px;
    text-align: center;
    margin: 0px;
}

.ProjectTemplateTag:first-child {
	margin-right: 13px;
}

.ProjectContent {
	position: relative;
	display: flex;
	flex-direction: column;
	max-width: 1350px;
	margin: 0 auto;
	margin-top: -120px;
}

@media screen and (max-width: 505px) {
	.ProjectContent {
		margin-top: 0px;
	}
}

.ProjectContentImg {
	width: 100%;
}

@media screen and (max-width: 505px) {
	.IphoneImgMobile {
		width: 109%;
		margin-left: -5%;
	}
}

.ProjectImgHeader {
	overflow: hidden;
   	box-sizing: border-box;
   	width: 100vw;
   	margin-left: calc(-50vw + 50%);
}

@media screen and (max-width: 505px) {
	.ProjectImgHeader {
		overflow: hidden;
    	box-sizing: border-box;
    	width: 100vw;
    	margin-left: calc(-50vw + 50%);
	}
}

.CTA {
	display: inline-flex;
	margin-top: 20px;
	text-decoration: none;
	color: #000;
	background-color: #f1f1f1;
  	border-radius: 32px;
  	font-weight: 400;
  	padding: 18px 20px;
  	transition: background-color 0.3s ease-out !important;
}

.CTA:hover {
	background-color: #DEDEDE;
}

.ArrowCta {
	width: 20px;
	margin-left: 10px;
}

.ProjectContentTxtWrapper {
	margin: 120px 0px;
	margin-left: 100px;
}

@media screen and (max-width: 505px) {
	.ProjectContentTxtWrapper {
		margin: 80px 0px;
	}
}

@media screen and (max-width: 414px) {
	.ProjectContentTxtWrapper {
		margin: 70px 0px;
	}
}

@media screen and (max-width: 870px) {
	.ProjectContentTxtWrapper {
		margin-left: 0px;
	}
}

.ProjectContentTxtTitle {
    color: ##111213;
	font-family: 'Circular Std Bold', sans-serif;
    font-feature-settings: "ss01";
	font-size: 42px;
    letter-spacing: -.01em;
	margin: 0px;
}

@media screen and (max-width: 414px) {
	.ProjectContentTxtTitle {
		font-size: 8vw;
		line-height: 8vw;
	}
}

.ProjectContentTxtP {
    color: #8792a8;
	font-family: 'Circular Std Book', sans-serif;
    font-feature-settings: "ss01";
	font-size: 20px;
	line-height: 28px;
	max-width: 700px;
}

.BrProjectContentTxtP {
	display: block;
}

@media screen and (max-width: 505px) {
	.BrProjectContentTxtP {
		display: none;
	}
}

@media screen and (max-width: 414px) {
	.ProjectContentTxtP {
		font-size: 4.7vw;
		line-height: 6vw;
	}
}

@media screen and (max-width: 320px) {
	.ProjectContentTxtP {
		font-size: 5.7vw;
		line-height: 7vw;
	}
}

.TxtBigSize {
	font-size: 50px;
	line-height: 60px;
	max-width: 100% !important;
}

.StrongProjectTxt {
	color: #555EFF; 
}

.NextProject {
	background: linear-gradient(60.55deg, #319CFF -25.51%, #D6FFD6 102.27%);
	font-family: 'Circular Std Bold', sans-serif;
    font-feature-settings: "ss01";
	overflow: hidden;
	box-sizing: border-box;
    width: 100vw;
    height: 400px;
    margin-left: calc(-50vw + 50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

@media screen and (max-width: 414px) {
	.NextProject {
		height: 250px;
	}
}

.CTANextProject {
	background-color: rgba(255, 255, 255, 1);
	margin-top: 0px !important;
}