@font-face {
	font-family: Raleway-Bold;
	src: url(fonts/Raleway-Bold.ttf);
}

@font-face {
	font-family: Raleway-Regular;
	src: url(fonts/Raleway-Regular.ttf);
}

@font-face {
	font-family: Raleway-SemiBold;
	src: url(fonts/Raleway-SemiBold.ttf);
}

* {
	padding: 0;
	margin: 0;
}

html {
	height: 100%;
	box-sizing: border-box;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

#preload {
	display: none;
}

body {
	position: relative;
	min-height: 100%;
	

	font-family: Raleway-Regular;
	font-size: 16px;
	min-width: 1034px;
	color: #FFF;
}

#background {
	height: 100%;
    width: 100%;
	position: fixed;
	background: url("../img-public/bg-gradient.png") repeat-y;
	background-size: 100% 1px;
	z-index: -1;
}
.background {
	background: url("../img-public/bg.jpg") no-repeat;
	background-size: 100% 1334px;
	min-height: 800px;
}

.contain {
	height: 100%;
	min-height: 100vh;
	padding-bottom: 104px;
}

h1 {
	font-size: 30px;
	font-weight: bold;
	color: #FFBD17;
	position: relative;
}

h1:first-child {
	padding-top: 43px;
}

h1, h2, header a {
	font-family: Raleway-SemiBold;
}

.about-page a {
	color: #FFBD17;
	font-family: "Raleway-Bold";
	text-decoration: none;
	font-size: inherit;
}

header {
	height: 154px;
}

header .content {
	position: relative;
	height: 100%;
	width: 1180px;
}

.content.wide {
	width: 1180px;
}

.contain .content.inner {
    background-color: #09153F;
	margin-top: 27px;
	position: relative;
}

footer {
	background: #FFF;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 84px;
}

footer .content {
	/* background: url(../img-public/camelot-logo-white.png) no-repeat 3% 48%; */
	height: 80px;
	width: 1180px;
}

footer .content span {
	position: relative;
	right: 30px;
	top: 30px;
	text-align: center;
	display: block;
}

#log-in {
	margin: 0 auto;
    width: 564px;
    height: 492px;
    padding: 42px 86px 44px 104px;
    border-radius: 50px;
    background: #09153F;
    position: relative;
    top: 23px;

	font-size: 25px;
	letter-spacing: -0.3px;
	color: #303030;
}

#log-in input[type="submit"] {
	border: none;
	cursor: pointer;
}

#log-in input {
	margin-bottom: 41px;
}

#log-in h1 {
	margin: 0 0 84px;
    padding: 0;
}

#log-in h1:after {
	width: 175px;
}

.content, section.policy-section div{
	width: 1034px;
	margin: 0 auto;
	max-width: 100%;
}

h1, #games, h2, p, .policy-section img, .contacts-grid {
	margin: 0 58px 0 58px;
}

#games {
	margin: 0 20px;
	padding-bottom: 20px;
}

h2 {
	margin-top: 26px;
	position: relative;
}

#games {
	display: grid;
	grid-template-columns: 20.4% 20.4% 20.4% 20.4% 20.4%;
	grid-row-gap: 2px;
}

#games img {
	max-width: 90%;
	display: block;
}

.game {
	font-size: 14px;
	letter-spacing: -0.2px;
	position: relative;
	padding-bottom: 200px;
}

.title {
	/* position: absolute;
	bottom: 186px; */
	display: none;
}

.main {
	font-size: 20px;
	line-height: 1.35;
	margin-bottom: 70px;
}

.main p {
	max-width: 900px;
}

p {
	margin-top: 25px;
	line-height: 26px;
}
.play-button {
	background: url(/catalog/img/button.png) no-repeat center center;
	background-size: contain;
	background-color: rgba(6, 53, 63, 0.8);
	height: 100%;
	width: 90%;
	position: absolute;
	bottom: 0;
	opacity: 0;

	text-decoration: none;
	color: #FFF;
	font-size: 20px;
	font-family: Raleway-Bold;
	text-transform: uppercase;
	text-align: center;
	line-height: 28px;
	padding: 10px;
}

.play-button>span {
	display: block;
	transform: translateY(-50%);
	top: 34%;
	position: relative;
}

.play-button span span{
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
}
.game .link {
	position: absolute;
	bottom: 0;
}

.game .container {
	position: relative;
	height: 100%;
}
.link:hover .play-button {
	opacity: 1;
}

.login #policy {
	display: none;
}

header a {
	display: inline-block;
	float: right;
	left: 592px;
	position: relative;
	top: 148px;
	font-size: 17px;
	font-weight: bold;
	color: #06353f;
	text-decoration: none;
}

a.catalog {
	display: inline-block;
	position: absolute;
	text-align: center;
	margin:0 auto;
	left: 506px;
	right:auto;
	float:none;
	transform: translate(-100%, -50%);
	left: 50%;
}

.catalog-page a.catalog {
	pointer-events: none;
	background-position: -523px -1px;
}

a#policy {
    position: absolute;
    transform: translate(0, -50%);
}

.about-page a#policy {
	background-position: -1px -1px;
	pointer-events: none;
}

#logo {
	pointer-events: none;
}


header a:hover {
	color: #001c26;
	text-decoration: underline;
}

h2 {
	font-size: 40px;
	font-weight: bold;
	color: #06353f;
}

.policy-section > div {
	display: grid;
	grid-template-columns: 50% 50%;
}

.policy-section {
	height: 375px;
}

.policy-section > div > div, .policy-section article {
	max-width: 100%;
}

.policy-section, .policy-section article {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.policy-section p {
	max-width: 420px;
	line-height: 1.63;
	letter-spacing: -0.2px;
}

.policy-section:nth-child(3n + 1) {
    background-color: #E7EDEF;
}

.policy-section:nth-child(3n + 1) img {
   border: solid 10px #e2ebed;
}

.policy-section:nth-child(3n + 2) {
    background-color: #F1EFE1;
}

.policy-section:nth-child(3n + 2) img {
    border: solid 10px #f0edd9;
}

.policy-section:nth-child(3n + 3) {
    background-color: #EFE1E4;
}

.policy-section:nth-child(3n + 3) img {
    border: solid 10px #eed9de;
}

.policy-section h2, .policy-section img {
	margin-top: 0;
}

/********** new styles *********/

a#policy {
    position: absolute;
    transform: translate(0, -50%);
	left: 50%;
}

.content #logo{
	background: url(../img-public/rg-logo.png) no-repeat 3% 58%;
	display: inline-block;
	position: absolute;
	top: 39px;
	left:26px;
	text-decoration: none;
	height:125px;
	width:294px;
}

.background2 {
	padding-bottom:99px;
	/* background: #F0F0F0 url("../img-public/arches.svg") 100% 100% no-repeat; */
	min-height: 800px;
	min-width: 1180px;
	color:#003B49;
}

.background2 #logo, .background #logo {
	top: 11px;
	left: 54px;
	width: 294px;
	height: 125px;
	background-size: contain !important;
}

.background2 .contain{
	min-height: auto;
	padding-bottom: 0px;
}

.background2 .content {
	min-width: 1180px;
}

.background2 footer .content, .background footer .content {
	text-align:right;
	line-height: 48px;
	position: relative;
	background: transparent;
}

.background2 footer .content span, .background footer .content span {
	cursor: default;
	font-size:16px;
	font-weight: normal;
	font-family: Raleway-Regular;
	top:21px;
	color:#08153F;
}

/* .background2 footer .content .logo, .background footer .content .logo{
	position: absolute;
	top:19px;
	left:40px;
	display: inline-block;
	width:120px;
	height:48px;
	background: url("../img-public/camelot-logo-white.svg") no-repeat;
} */

.background2 section {
	position: relative;;
	display:inline-block;
	border-radius: 50px;
	width:100%;
	padding-left:74px;
	padding-top:56px;
	padding-right:56px;
	background: #f6f6f6 url("../img-public/arches-white.png") no-repeat;
	background-position: right bottom;
	margin-top:70px;
	box-shadow: 1px 7px 30px rgba(206,206,206,.34);
}

.background2 section ul {
  list-style: none;
  font-size:20px;
  line-height: 31px;
  padding-left: 1em;
}

.background2 section ul li{
    font-size: 20px;
}

.background2 section li:before {
	content: "";
	display: inline-block;
	height: 22px;
	width: 1em;
	background-image: url(../img-public/special-list.svg);
	background-repeat: no-repeat;
	background-position: 7px 11px;
	margin-right: 14px;	
}

.background2 section h2{
	position: relative;	
	margin-top:16px;
	margin-bottom:43px;
}
h2:after {
	content:'';
	display:inline-block;
	position: absolute;
	bottom: -22px;
	left:0px;
	width:53px;
	height:2px;
	border:2px solid #05C3DE;
}

.background2 section strong{
	font-family: Raleway-Bold;
}

.background2 section:before{
	content: '';
	display: inline-block;
	position: absolute;
	height: 100px;
	width: 100px;
	background-repeat: no-repeat;
}

.background2 .inner {
	margin-left:66px;
	font-size: 24.2px;
}

.inner>h1 {
	position: relative;
	margin-bottom:62px;
}

.background2 .inner p{
	margin-left:31px;
	margin-top:19.8px;
}

.background2 .inner.strong p{
	font-family: Raleway-Bold;
	line-height: 30px;
}

.background2 .main p {
	max-width: 1000px;
}

/* red line below the headline */
h1:after{
	content:'';
	display:inline-block;
	position: absolute;
	bottom: -26px;
	left: 0;
	width:81px;
	height:6px;
	background: url(../img-public/title-underline.png);
	background-size: contain;
	/* border:2px dashed #FFBD17; */
}

.background2 section.ranking{
	min-height: 420px;
}

.background2 section.ranking:before {
	top:40px;
	right:23px;
	background-image: url(../img-public/ranknin-factor.svg);
}

.background2 .ranking h2{
	margin-top:26px;
}

.background2 .ranking p{
	margin-top:38px;
	letter-spacing: 0.06px;
	max-width: 735px;
}

.background2 section.seo{
	min-height:570px;
}

.background2 section.seo:before {
	top:49px;
	right:35px;
	background-image: url(../img-public/seo.svg);
}

.background2 .seo p{
	font-size:20px;
	max-width: 880px;
	line-height: 24px;
}

.background2 section.like{
	min-height:360px;
}

.background2 section.like:before {
	top:40px;
	right:23px;
	background-image: url(../img-public/like.svg);
}

.background2 section.like p {
	margin-top:20px;
	line-height:26px;
}

.background2 section.expertise:before {
	top:50px;
	right:23px;
	background-image: url(../img-public/expertise.svg);
}

.background2 section.expertise ul {
	margin-top: 48px;
	margin-bottom: 80px;
}

.background2 section.expertise ul span {
	margin-left: 34px;
}

.background2 section.case{
	min-height:1000px;
	background: rgba(250,250,250,0.88);
	box-shadow: 1px 7px 30px -7px rgba(202,198,198,.34);
	margin-top:82px;
}

.background2 section.case:before {
	top:27px;
	right:20px;
	background-image: url(../img-public/case.svg);
}

.background2 section.case h3{
	margin-left: 30px;
	font-size:20px;
	color: #003B49;
	font-family: 'Raleway-Bold';
} 

.background2 section.case h3 + ul{
	margin-top:10px;
	margin-bottom:40px;
}

.background2 section.case ul, section ul {
	margin-top:20px;
	margin-bottom:30px;
}

.background2 section.case h3.result{
	margin-top:-8px;
	margin-left:22px;
    color:#05C3DE;
    font-size:26px;
    font-family: 'Raleway-Bold';
}

.background2 section.case ul.result{
	line-height:36px;
}

.background2 section.case ul.result li{
	font-size:21px;
	color:#05C3DE;
    font-family: 'Raleway-Bold';
    position: relative;
    padding-left:44px;
}

.background2  section.case ul.result li:before {
  content: "";
  display: inline-block;
  position: absolute;
  top:5px;
  left:0px;
  width: 21px;
  width: 28px;
  height: 28px;
  background-image: url(../img-public/tick.svg);
  background-position: 7px 2px;
  background-repeat: no-repeat;
  margin-right: 22px;
}

body.login .our-capability,
.login .catalog {
	display:none;
}

input, .contact-form textarea {
	border: none;
	border-bottom: 5px solid #6393F9;
	padding: 16px;
	margin-bottom: 25px;
	width: 420px;
	max-width: 100%;
	font-size: 16px;
	font-family: Raleway-Regular;
	color: #6393F9;
}

input:-webkit-autofill {
    -webkit-text-fill-color: #6393F9;
}
input:-webkit-autofill:focus {
    -webkit-text-fill-color: #6393F9;
}

::placeholder {
	font-size: 16px;
	font-family: Raleway-Regular;
	color: #6393F9;
}

.contact-form textarea {
	height: 175px;
	resize: none;
}

input[type=submit] {
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
	outline: inherit;
}

.contact-form input[type=submit] {
	right: 37px;
    top: 5px;
	float: right;
	position: relative;
}

.contacts-grid {
	display: grid;
	grid-template-columns: 50% 50%;
	column-gap: 50px;
}

.contacts-grid p {
	margin-left: 0;
	margin-right: 0;
    padding-left: 36px
}

p.address {
	background: url(../img-public/address.png) no-repeat;
}

p.phone {
	background: url(../img-public/phone.png) no-repeat;
}

p.email {
	background: url(../img-public/email.png) no-repeat;
}

.email a {
	color: #FFF;
	text-decoration: none;
	font-family: "Raleway-Regular";
}



.address span, .phone span {
	display: inline-block;
	width: 50%;
}

.address span:nth-child(2), .phone span:nth-child(2) {
    padding-left: 20px;
}

#map-mobile {
	display: none;
}

.sprite {
	background-color: transparent;
}


#popup1 {
	color: #333;
}

#popup1 .box {
	width: 40%;
	margin: 0 auto;
	background: rgba(255,255,255,0.2);
	padding: 35px;
	border: 2px solid #fff;
	border-radius: 20px/50px;
	background-clip: padding-box;
	text-align: center;
}

#popup1 .button {
	/* font-size: 1em; */
	padding: 10px;
	color: #fff;
	border: 2px solid #06D85F;
	border-radius: 20px/50px;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.3s ease-out;
}
#popup1 .button:hover {
	background: #06D85F;
}

#popup1.overlay {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.7);
	transition: opacity 500ms;
	visibility: hidden;
	opacity: 0;
}
#popup1.overlay:target {
	visibility: visible;
	opacity: 1;
}

#popup1 .popup {
	margin: 40vh auto;
	padding: 20px;
	background: #fff;
	border-radius: 5px;
	width: 530px;
	position: relative;
	transition: all 5s ease-in-out;
}

#popup1 .popup h3 {
	margin-top: 0;
	color: #333;
	margin: 10px 0px;
}
#popup1 .popup .close {
	position: absolute;
	top: 20px;
	right: 30px;
	transition: all 200ms;
	font-size: 52px;
	font-weight: bold;
	text-decoration: none;
	color: #333;
	line-height: 30px;
}
#popup1 .popup .close:hover {
	color: #06D85F;
}
#popup1 .popup .content {
	max-height: 30%;
	overflow: auto;
}

@media screen and (max-width: 700px){
	.box{
		width: 70%;
	}
	.popup{
		width: 70%;
	}
}
/* Generated in ui-sprite.css */
.sprite {display:inline-block; overflow:hidden; background-repeat: no-repeat;background-image:url(/img-public/ui-sprite.png);}

.about {width:172px; height:66px; background-position: -349px -1px}
.about:hover {width:172px; height:66px; background-position: -175px -1px}
.about:active {width:172px; height:66px; background-position: -1px -1px}
.button {width:132px; height:66px; background-position: -1179px -1px}
.button:hover {width:132px; height:66px; background-position: -1045px -1px}
.games {width:172px; height:66px; background-position: -871px -1px}
.games:hover {width:172px; height:66px; background-position: -697px -1px}
.games:active {width:172px; height:66px; background-position: -523px -1px}
.send-button {width:123px; height:66px; background-position: -1438px -1px}
.send-button:hover {width:123px; height:66px; background-position: -1313px -1px}

@media (max-width: 830px) and (orientation: portrait) {
	.login footer{
		position: fixed;
	}
}
@media (max-width: 830px) {
	body {
		min-width: 667px;
		font-size: 30px;
	}

	#games {
		grid-template-columns: 31% 31% 31%;
		grid-auto-rows: 224px;
		grid-column-gap: 3.5%;
		grid-row-gap: 24px;
		padding-top: 40px;
		margin: 0;
		overflow: hidden;
	}

	#games .game img {
		max-width: 100%;
	}

	.play-button {
		width: 100%;
	}

	.background2 #logo, .background #logo {
		width: 600px;
		height: 150px;
		top: 8px;
		left: 0px;
	}

	#log-in {
		width: 607px;
		height: 604px;
		top: 62px;
		border-radius: 32px;
		padding: 45px 32px;
	}

	h1 {
		font-size: 40px;
	}

	h1:after {
		height: 3px;
	}

	h1:after {
		width: 195px;
	}

	input, .contact-form textarea {
		width: 100%;
		padding: 44px 48px 27px;
		line-height: 36px;
		font-size: 36px;
	}

	::placeholder {
		font-size: 36px;
	}

	#log-in h1 {
		margin: 0 0 55px;
	}

	input {
		margin-bottom: 61px;
	}

	#log-in input[type="submit"] {
		float: right;
	}

	#background {
		background: url("../img-public/bg-gradient-mob.png") repeat-y;
	}
	.background {
		background: url("../img-public/bg-mobile.jpg") no-repeat;
		background-size: 100% 1538px;
		
	}

	.login .background {
		height: 1538px;
	}

	.login body {
		overflow: hidden;
	}

	header {
		height: 206px;
	}

	/* overly specific selector to emphasize the importance of these rules */
	header .content #nav a {
		transform: unset;
		transform-origin: 0 0;
		transform: scale(1.14);
		top: 162px;
		left: 50%;
	}

	#nav a.catalog {
		transform: translateX(-100%) scale(1.14) !important;
		transform-origin: 100% 0 !important;
	}

	.content {
		max-width: 96%;
	}

	.contacts-grid {
		grid-template-columns: 100%;
	}

	h1, #games, h2, p, .policy-section img, .contacts-grid {
		margin: 0 26px 46px 26px;
		line-height: 50px;
	}

	.inner>h1 {
		margin-bottom: 78px;
	}

	.contacts-grid .col:first-child {
		grid-row: 2;
	}

	.contacts-grid .col img {
		width: 100%;
	}

	.contacts-grid p {
		padding-left: 78px;
		padding-bottom: 14px;
		font-size: 32px;
		line-height: 56px;
		background-size: 7%;
		background-position: 2px 12px;
	}

	.contacts-grid .col:nth-child(2) {
		margin-bottom: 71px;
	}

	.contact-form textarea {
		height: 380px;
	}

	.contact-form input[type=submit] {
		right: 0;
		transform: scale(1.14) translateX(-8px);
	}

	#map-mobile {
		display: block;
	}

	#map {
		display: none;
	}
}

@media (hover: none) {
	.link .play-button {
		display: block;
		opacity: 0;
	}
}