@font-face {
  font-family: 'Roboto-Regular';
  src: url(../Fonts/Roboto/Roboto-Thin.ttf) format("truetype");
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto-Regular';
  src: url(../Fonts/Roboto/Roboto-Light.ttf) format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto-Regular';
  src: url(../Fonts/Roboto/Roboto-Regular.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto-Regular';
  src: url(../Fonts/Roboto/Roboto-Medium.ttf) format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto-Regular';
  src: url(../Fonts/Roboto/Roboto-Black.ttf) format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Oswald';
  src: url(../Fonts/Oswald/static/Oswald-Light.ttf) format("truetype");
  font-weight: 300;
  font-style: normal;
}

html, body{
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
	font-family: 'Roboto-Regular';
}

#mainPage{
	/*background: #192026 url(../Images/bg.jpg) no-repeat;*/
	/*background: radial-gradient(ellipse at 5vw 40vh, #1c1816 0%, #1c1816 40%, #000 75%);*/
	background-color: #1a1a1a;
	position: relative;
	width: 100%;
	background-size:cover;
}

#lamp{
	position: absolute;
	width: 20vw;
	left: 0;
	top: -20px;
	z-index: 1001;
	width: 250px;
}

#mainPageContainer{
	/*max-width: 1400px;*/
	width: 100%;
}

#contentOuterContainer{
	width: calc(100% - 155px);
	margin-left: 155px;
}

#contentContainer{
	width: calc(100vw - 173px);
	max-width: 1400px;
	/*margin-left: 80px;*/
	/*margin-left: 155px;*/
	margin: 0 auto;
}

#policy UL LI{
	font-size: 20px;
	font-weight: 300;
}

#policy h3{
	font-size: 20px;
}

#policy A,
#careers A{
	color: #bcbec0;
}

	#policy A:hover{
		text-decoration: none;
	}

.page{
	/*height: 100vh;*/
	/*max-height: 720px;*/
	position: relative;
}
	
	.page .pageContent{
		/*padding-left: 121px;*/
		padding-left: 46px;
	}

	.page .titleArea{
		position:relative;
		/*height: 325px;*/
		height: 310px;
	}
	
	.page h2.title,
	.page h1.title{
		position: absolute;
		left: 0;
		top: 80px; 
		color: #f1f2f2;
		border-left: 1px solid #ecb047;
		margin: 0;
		padding: 0 0 0 14px;
		font-size: 40px;
		text-transform: uppercase;
		font-family: Oswald;
		font-weight: 300;
		line-height: 48px;
		text-shadow: 2px 2px #000;
	}

	.titleArea SPAN.date{
		position: absolute;
		color: #f1f2f2;
		top: 135px;
	}
	
	.page h2.paragraphTitle{
		color: #f1f2f2;
		font-size: 22px;
		font-weight: normal;
	}
	
	.page h2.about{
		color: #f1f2f2;
		border-left: 1px solid #ecb047;
		margin: 100px 0 0 0;
		padding: 0 0 0 14px;
		font-size: 40px;
		text-transform: uppercase;
		font-family: Oswald;
		font-weight: 300;
		line-height: 48px;
		text-shadow: 2px 2px #000;
	}
	
	.page .descriptionArea{
		/*height: 55vh;*/
		/*min-height: 391px;*/
		min-height: 300px;
		color: #bcbec0;
		padding-bottom: 100px;
	}
	
	.page .textContainer{
		width: 60%;
	}
	
	.blog .textContainer{
		width: 90%;
	}
	
	.page .descriptionArea P{
		font-weight: 300;
		font-size: 20px;
		line-height: 40px;
	}
	
	.page IMG.tree,
	.page IMG.frog{
		position: absolute;
		right: 0;
		top: 150px;
		width: 450px;
		z-index: -1;
	}
	
	.page IMG.frog{
		width: 350px;
		top: 200px;
	}
	
	.page .submenu{
		overflow: hidden;
	}
	
	.page .submenu UL{
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
	.page .submenu LI{
		float: left;
		margin-left: 50px;
	}
	
	.page .submenu LI.first{
		margin-left: 0;
	}
	
	.page .submenu LI A{
		float: left;
		font-weight: 300;
		text-decoration: none;
		color: #f1f2f2;
		font-size: 22px;
		transition: 0.3s;
	}
	
	.page .submenu LI .linkText{
		float: left;
		padding-top: 9px;
		padding-left: 10px;
	}
	
	
	.page .submenu LI .circle{
		float: left;
		width: 40px;
		height: 40px;
		border: 2px solid #f1f1f2;
		border-radius: 100%;
		transition: 0.3s;
	}
	
	.page .submenu LI .innerCircle{
		float: left;
		width: 10px;
		height: 10px;
		border-radius: 100%;
		background-color: #f1f1f2;
		margin-left: 15px;
		margin-top: 15px;
		transition: 0.3s;
	}
	
	.page .submenu LI.active .circle{
		border-color: #ebaf46;
	}
	
	.page .submenu LI.active .innerCircle{
		background-color: #ebaf46;
		width: 20px;
		height: 20px;
		margin-left: 10px;
		margin-top: 10px;
	}
	
	.page .submenu LI.active A{
		color: #ebaf46;
	}
	
	.page .submenu LI A:hover{
		color: #ebaf46;
	}
	
	.page .submenu LI A:hover .circle{
		border-color: #ebaf46;
	}
	
	.page .submenu LI A:hover .innerCircle{
		background-color: #ebaf46;
	}
	
	.page .leader{
		position: relative;
		padding-bottom: 50px;
	}
	
	.page .leaderPicture{
		position: absolute;
		width: 200px;
		border-radius: 100%;
	}
	
	.page .leaderText{
		padding-left: 215px;
		padding-right: 100px;
	}
	
	.page .leaderText h3{
		margin: 0;
		padding: 0;
		font-weight: 400;
		color: #f1f2f2;
		font-size: 25px;
	}
	
	.page .leaderText A.linkedinIco{
		position: absolute;
		left: 57px;
		top: 210px;
	}
	
	.page .leaderText A.twitterIco{
		position: absolute;
		left: 107px;
		top: 210px;
	}
	
		.page .leaderText A.linkedinIco IMG,
		.page .leaderText A.twitterIco IMG{
			width: 35px;
		}
	
	.page .leaderText p{
		line-height: 35px;
		text-align: justify;
	}
	
	.page .gameImage{
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 616px;
	}

	#games .titleArea{
		height: 200px;
	}

	#leadership .titleArea{
		height: 200px;
	}
	
	#contact .titleArea{
		height: 175px;
	}
	
	#services .titleArea{
		height: 296px;
	}
	
	#policy .titleArea{
		height: 175px;
	}
	
	#careers .titleArea{
		height: 200px;
	}
	
	#job .titleArea{
		height: 175px;
	}
	
	#partners .titleArea{
		height: 200px;
	}
	
.formContainer{
	width: 70%;
	margin: 0 auto;
}
	
.formContainer .row{
	overflow: hidden;
	font-size: 20px;
	font-weight: 300;
	margin: 25px 0;
	width: 100%;
}
	
	.formContainer .column{
		float: left;
		/*width: 250px;*/
		background-color: #222221;
		height: 30px;
		width: 31%;
	}
	
	.formContainer label{
		display: block;
		padding-left: 15px;
		padding-top: 2px;
	}
	
	.formContainer .inputColumn{
		width: 69%;
		background-color: #000;
	}
	
	.formContainer INPUT[type=text],
	.formContainer TEXTAREA{
		background-color: #000;
		border: none;
		height: 30px;
		color: #bcbec0;
		width: 100%;
		font-size: 20px;
		/*padding-left: 10px;*/
		font-family: 'Roboto-Regular';
	}
	
	.formContainer TEXTAREA{
		height: 300px;
	}
	
	.texareaRow .column{
		height: 300px;
	}
	
.formContainer .texareaRow{
	margin-bottom: 0;
	border: none;
}

.formContainer button{
	float: right;
	color: #bcbec0;
	background-color: #1b1c1b;
	border: none;
	width: 90px;
	height: 40px;
	font-size: 20px;
	margin-right: 10px;
	cursor: pointer;
}

.formContainer .btnRow{
	margin: 0;
	height: auto; 
	background-color: #222221;
}

.formContainer .btnRow .column{
	padding: 16px 0;
	height: auto;
}

.formContainer .btnRow .formAgreeArea{
	float: left; 
	font-size: 15px; 
	width: 70%;
}

.formContainer .btnRow .checkboxArea{
	float: left; 
}

.formContainer .btnRow .checkboxTxtArea{
	float: left;
	width: 90%;
}

.formContainer .btnRow .checkboxTxtArea label{
	margin: 0;
	padding: 0;
}

.formContainer .btnRow .checkboxTxtArea A{
	color: #bcbec0;
}

.formContainer .btnRow .checkboxTxtArea A:hover{
	text-decoration: none;
}

.jobItemContainer{
	padding-right: 20px;
}

.jobItem{
	background-color: #222221;
}
	.jobItem A{
		padding: 20px 0;
		display: block;
		width: 96%;
		height: 100%;
		text-decoration: none;
		overflow:hidden;
	}
	
	.jobItem H3{
		float: left;
		text-align: left;
		font-size: 20px !important;
		margin: 6px 1% 0 0px;
		padding: 0;
	}
	
	.jobItem A:hover H3{
		color: #ecb047;
		transition: 0.5s;
	}

	.jobItem .jobHighlight{
		width: 100%;
		margin: 0 auto;
		padding: 15px 0 0 0;
		overflow: hidden;
	}
	
		.jobItem .jobHighlight SPAN{
			font-size: 15px !important;
			display: block;
			float: left;
			padding: 3px 2% 0 0; 
			width: 25%;
			text-align: left;
		}
	
	.jobItem .circle{
		display: block;
		width: 30px;
		height: 30px;
		border: 2px solid #f1f1f2;
		border-radius: 100%;
		margin-top: 18px;
		margin-left: auto;
		margin-right: auto;
	}
	
	.jobItem .innerCircle{
		float: left;
		width: 8px;
		height: 8px;
		border-radius: 100%;
		background-color: #f1f1f2;
		margin-left: 11px;
		margin-top: 11px;
	}
	
	.jobItem A:hover .circle
	{
		border-color: #ecb047;
		transition: 0.5s;
	}
	
	.jobItem A:hover .innerCircle
	{
		background-color: #ecb047;
		transition: 0.5s;
	}
	
	.jobItem .circleContainer{
		float: left;
		width: 13%;
		padding: 0 1%;
	}
	
	.jobItem .jobItemInner{
		float: left;
		width: 85%;
	}

.jobDescriptionArea{
}
	
.jobDescriptionArea SPAN{
	display: block;
	float: left;
	padding: 3px 1%;
	width: 31%;
	text-align: left;
	font-size: 18px;
}

.jobDescriptionArea .jobHighlights{
	overflow: hidden;
}

.jobDescriptionArea H2.paragraphTitle{
	font-size: 23px;
}

.jobDescriptionArea H3.paragraphTitle{
	color: #f1f2f2;
	font-weight: normal;
	font-size: 22px;
}

.jobDescriptionArea P{
	font-size: 20px !important;
}

.jobDescriptionArea  UL LI{
	font-size: 20px;
	padding: 5px 0;
	font-weight: 300 !important;
}

.hide{
	display: none;
}	

.noMargin{
	margin: 0 !important;
}

.autoHeight{
	height: auto;
}

A.companyEmail{
	color: #bcbec0;
}

A.companyEmail:hover{
	text-decoration: none;
}

#formSubmitMessage{
	padding: 10px 0 0 0;
}

#contactUsForm{
	display: none;
}

#footer{
	padding: 20px 0;
	text-align: center;
	color: #bcbec0;
	font-size: 90%;
	font-weight: 300;
}	

	#footer A{
		color: #bcbec0;
	}
	
	#footer A:hover{
		text-decoration: none;
	}

#cookiesConsent{
	display: none;
	text-align: center;
	position: fixed;
	width: calc(100vw - 173px);
	bottom: 0;
	background-color:rgba(0, 0, 0, 1);
	padding: 15px 5px;
	color: #bdbec0;
	font-size: 15px;
	font-weight: 300;
}

#cookiesConsent A{
	color: #bdbec0;
	/*background-color: #1b1c1b;*/
}

	#cookiesConsent A:hover{
		text-decoration: none;
	}
	
#partners .descriptionArea{
	text-align: center;
	min-height: 100px;
}

.partnersLogos{
	display: inline-block;
	vertical-align: middle;
}

.partnersLogos IMG{
	 vertical-align: middle;
	 margin: 10px 30px;
}

IMG#RogueSun{
	width: 300px;
}

IMG#NaturalMotion{
	width: 150px;
}

/* Main menu */
#mainMenu{
	position: fixed;
	background-color:rgba(255, 255, 255, 0.03);
	color: #bdbec0;
	z-index: 1000;
	width: 156px;
	height: 100vh;
}	

	#mainMenu UL{
		position: absolute;
		display: block;
		overflow: hidden;
		margin: 0 auto;
		padding: 0;
		color: #939598;
		list-style: none;
		width: 125px;
		left: 15px;
		/*top: 150px;*/
		top: calc(100vh/2 - 135px);
	}
	
	#mainMenu LI{
		margin: 20px 0;
		padding: 0; 
	}
	
	#mainMenu LI A{
		display: block;
		color: #939598;
		text-decoration: none;
		font-weight: 300;
		font-size: 16px;
		transition: 0.5s;
	}
	
	#mainMenu LI A.active{
		border-bottom: 1px solid #ecb047;
		color: #ecb047;
	}
	
	#mainMenu LI A:hover{
		color: #ecb047;
	}
	
	.mainMenuIcon{
		display: none;
	}
	
	.topNav{
		width: auto;
		background: transparent;
	}
	
	#mainMenu .menuContainer{
		width: 100%;
	}
	
	#mainMenu .logo{
		position: absolute;
		left: 34px;
		top: 50px;
		width: 90px;
	}
	
	#mainMenu .socialLinks{
		position: absolute;
		bottom: 5px;
		margin-left: 38px;
	}
	
	#mainMenu .socialLinks IMG{
		width: 35px;
	}
	
	#mainMenu .socialLinks .twitterIco{
		margin-left: 5px;
	}
	
	.grecaptcha-badge { 
		bottom: 120px !important;
	}
	
@media only screen and (max-width: 1200px) {
	.page IMG.frog{
		width: 250px;
		top: 400px;
	}
	
	.page IMG.tree{
		width: 350px;
		top: 300px;
	}
	
	.formContainer{
		width: 90%;
		margin: 0 auto;
	}
	
	.page .leaderPicture{
		width: 150px;
	}
	
	.page .leaderText A.linkedinIco{
		left: 32px;
		top: 158px;
	}
	
	.page .leaderText A.twitterIco{
		left: 82px;
		top: 158px;
	}
	
	.page .leaderText{
		padding-left: 165px;
		padding-right: 20px;
	}
}

@media only screen and (max-width: 1000px) {
	.page IMG.tree{
		width: 300px;
		top: 340px;
	}
	
	#mainMenu .menuContainer{
	  display: none;
	  /*width: 0;*/
	}

	#mainMenu .showNav{
	  display: block;
	}

	#mainMenu LI{
	  float: none;
	  padding: 10px 0px;
	  font-size: 6vh;
	}
  
	#mainMenu{
		width: 100%;
		height: auto;
	}	
	
	.menuContainer{
		background-color:rgba(40, 40, 40, 0.95);
		height: 100vh;
	}
	
	#mainMenu UL{
		/*left: -100px;*/
	}
	
	.topNav{
		width: 100%;
		background-color:rgba(40, 40, 40, 0.95);
		padding: 10px 0;
	}
	
	#contentContainer{
		margin-left: 0;
		width: 100%;
	}
	
	#contentOuterContainer{
		margin-left: 0;
		width: 100%;
	}
	
	.page .pageContent{
		padding-left: 20px;
	}
  
	.mainMenuIcon{
		display: block;
		margin-left: 5px;
		width: 28px;
	}

	.mainMenuIconContainer{
		display: block;
		padding: 5px 4px;
	}

	.mainMenuBar{
		display: block;
		width: 28px;
		height: 4px;
		background-color: #FFF;  
	}

	.mainMenuIconContainer .middle{
		margin: 5px 0;
	}
	
	
	#cookiesConsent{
		width: 100vw;
	}
	
	.grecaptcha-badge { 
		/*bottom:90px !important;*/
	}
	
	#mainMenu .logo{
		position: absolute;
		left: calc(50% - 40px);
		top: 3px;
		width: 75px;
	}
	
	#mainMenu .socialLinks{
		position: absolute;
		bottom: 5px;
		right: 8px;
		margin-left: 38px;
	}
	
	#mainMenu .socialLinks IMG{
		width: 35px;
	}
	
	#mainMenu .socialLinks .twitterIco{
		margin-left: 5px;
	}

	.jobItemContainer{
		padding-right: 15px;
	}
	
	.jobHighlights .jobLabel{
		display: block;
		width: 100%;
	}

	.jobHighlights .jobProperty{
		margin-bottom: 10px;
	}
}

@media only screen and (max-width: 670px) {
	.page .pageContent{
		padding-left: 10px;
	}
	
	.page .leaderPicture{
		width: 100px;
	}
	
	.page .leaderText A.linkedinIco{
		position: absolute;
		/*left: 180px;*/
		/*top: 109px;*/
		top: 10px;
		left: 110px;
	}
	
	.page .leaderText A.twitterIco{
		top: 55px;
		left: 110px;
	}
	
	.page .leaderText{
		padding-left: 0;
		padding-right: 20px;
		padding-top: 110px;
	}
	
	.page IMG.frog,
	.page IMG.tree{
		display: none;
	}
	
	.page .textContainer{
		width: 100%;
	}
	
	.page .submenu LI{
		float: left;
		margin-left: 20px;
	}
	
	.page .submenu LI.first{
		margin-left: 0;
	}
	
	.page .submenu LI A{
		font-size: 18px;
	}
	
	.page .submenu LI .circle{
		float: none;
		display: block;
		width: 20px;
		height: 20px;
	}
	
	.page .submenu LI .innerCircle{
		width: 6px;
		height: 6px;
		margin-left: 7px;
		margin-top: 7px;
	}
	
	.page .submenu LI.active .innerCircle{
		width: 10px;
		height: 10px;
		margin-left: 5px;
		margin-top: 5px;
	}
	
	.page .submenu LI .linkText{
		padding-top: 2px;
		padding-left: 0px;
	}
	
	.page .submenu LI .portingLink .circle{
		margin-left: 15px;
	}
	
	.page .submenu LI .optimisationLink .circle{
		margin-left: 35px;
	}
	
	.page .submenu LI .developmentLink .circle{
		margin-left: 35px;
	}
	
	.formContainer{
		width: 99%;
		margin: 0 1% 0 0;
	}
	
	.formContainer .row{
		font-size: 18px;
	}
	
	.formContainer .column{
		float: left;
		background-color: #222221;
		height: 30px;
		width: 25%;
	}
	
	.formContainer label{
		padding-left: 1px;
		padding-top: 2px;
	}
	
	.formContainer .inputColumn{
		width: 75%;
		background-color: #000;
	}
	
	.texareaRow .column{
		height: 300px;
	}
	
	.formContainer INPUT,
	.formContainer TEXTAREA{
		font-size: 18px;
		font-family: 'Roboto-Regular';
	}
	
	.page h2.title{
		/*font-size: 30px;*/
	}
	
	.page .descriptionArea P{
		/*font-size: 16px;*/
	}
	
	.page .gameImage{
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 374px;
	}
	
	#services .titleArea{
		height: 310px;
	}
	
	#games .titleArea{
		height: 175px;
	}
	
	#leadership .titleArea{
		height: 198px;
	}
	
	#contact .titleArea{
		height: 175px;
	}
	
	.jobItemContainer{
		padding-right: 10px;
	}
	
	.jobDescriptionArea .jobHighlights SPAN{
		font-size: 16px;
	}
	
	.jobItem .jobHighlight SPAN{
		font-size: 14px !important;
	}
	
	.formContainer .btnRow .formAgreeArea{
		width: 100%;
		padding: 10px 0;
	}
	
	.grecaptcha-badge { 
		/*bottom:90px !important;*/
	}
	
	.jobItem A{
		margin: 0 auto;
		width: 95%;
	}
	
	.jobItem .jobHighlight SPAN{
		width: 100%;
	}
	
	.jobItem .circleContainer{
		float: left;
		width: 25%;
		padding: 0 0%;
	}
	
	.jobItem .jobItemInner{
		float: left;
		width: 75%;
	}
}

@media only screen and (max-width: 375px) {
	#job .titleArea{
		height: 210px;
	}
}


@media only screen and (max-width: 320px) {
	#job .titleArea{
		height: 190px;
	}
	
	.jobItem A{
		width: 100%;
	}
	
	.jobItem .jobHighlight SPAN{
		width: 100%;
	}
	
	.jobItem .circleContainer{
		float: left;
		width: 25%;
		padding: 0 0%;
	}
	
	.jobItem .jobItemInner{
		float: left;
		width: 75%;
	}
	
	.blog .titleArea{
		height: 220px !important;
	}
	
	.titleArea SPAN.date{
		top: 185px;
	}
}