/* 
========================
  GRIDINATOR CSS v0.4.1
  http://gridinator.com/
  
  GRIDINATOR CSS is a very basic framework to create
  grid-based layouts. The content of this file is 
  provided as-is, without support.
  
  If you would like to contact GRIDINATOR to suggest
  improvements, to ask for help or to file a bug report, 
  please feel free to email: gridinator@steff.me
  
  Your grid settings:
  	columns: 6
  	column width: 220px
  	column margin: 10px
  	container margin: 10px
    
=========================
*/
* { /* quick reset */
	margin: 0;	
}

body {
	background-image: url(bg.png);
	background-repeat: repeat-x;
	background-color: #000;
	font-size: 20px;
	font-family: Cairo;
	line-height: 1.7;
	color: #493932;
	margin: 0;
	padding: 0;
	text-align: center;
	height: 100%;
	width: 100%;
}

span {
	display: none;
}

h1 {
	font-family: Rock Salt ; 
	font-size: 28px;
	color: #e8dcc6;
	letter-spacing: 3px;
	line-height: 1.7;
	text-align: center;
	/*text-transform: uppercase;*/
	top: 50%;
	position: relative;
	transform: translateY(-50%);
}
h1 a {
	color: #e8dcc6;
}

h1 a:hover {
	color: #ffffff;
}

h2 {
	font-family: Rock Salt ; 
	font-size: 20px;
	color: #3d241a;
	letter-spacing: 3px;
	line-height: 1.7;
	text-align: center;
}

h3 {
	font-family: Cairo ; 
	font-size: 12px;
	color: #919191;
	letter-spacing: 0.6px;
	line-height: 1.7;
	text-align: center;
	font-weight: 400;
}

h3 a {
	color: #676767;
}

h3 a:hover {
	color: #ffffff;
}

a {
	text-decoration:none;
	color: #e8dcc6;
}

li a:hover {
	color: #ffffff;
}

ul {
	list-style: none;
	padding: 0px 20px;	
}


.wrapper {
	margin: 0 auto; /* This centers the grid. Remove this line to place the grid on the left of the page. */
	text-align: left;
	width: 1400px;
}

.inner-wrapper {
	background: url(gridinator.png) repeat-y 0 0; /* The file gridinator.png is a grid background; delete this line to remove it. If you did not generate a background image, you can still do so by going to http://gridinator.com/ and entering the details found at the top of this CSS file. You will then be given a grid image to match your original grid.  */
	clear: both;
	display: inline;/* IE double margin fix. Feel free to move this to your IE specific stylesheets. */
	float: left;
	padding: 0 10px 0 10px;
	position: relative;
	width: 1380px;
}




.container {
	clear: both;
	float: left;
	padding: 0 20px;
	text-align: justify;
}
.one-col, .two-col, .three-col, .four-col, .five-col, .six-col {
	clear: none;
	display: inline;/* IE double margin fix. Feel free to move this to your IE specific stylesheets. */
	float: left;
	margin: 0 0px 0 0;
	padding: 0;
	position: relative;
	/*background: #9fcdf6;  Delete this line to remove the blue colour on columns. */
}
.one-col {
	width: 230px;
}

.two-col {
	width: 460px;
}

.three-col {
	width: 690px;
}

.four-col {
	width: 920px;
}

.five-col {
	width: 1150px;
}

.six-col {
	width: 1380px;
	margin-right: 0;
}

.prefix-one {
	margin-left: 230px;
}

.prefix-two {
	margin-left: 460px;
}

.prefix-three {
	margin-left: 690px;
}

.prefix-four {
	margin-left: 920px;
}

.prefix-five {
	margin-left: 1150px;
}

.suffix-one {
	margin-right: 230px;
}

.suffix-two {
	margin-right: 460px;
}

.suffix-three {
	margin-right: 690px;
}

.suffix-four {
	margin-right: 920px;
}

.suffix-five {
	margin-right: 1150px;
}

.clear { /* Useful generic clearing class. */
	clear: both;
}
.last-col {
	margin-right: 0;
}







/* Bird */

.header {
	
	height: 204px;
}

#btn_screenshot_prev  {
	width: 58px;
	height: 132px;
	background: transparent url('btn_prev.png') no-repeat bottom;
	display: block;
	margin-top: 190px;
	margin-left: 60px;
}
#btn_screenshot_prev:hover {
   background-image: url('btn_prev_over.png');
}

#btn_screenshot_next {
	width: 58px;
	height: 132px;
	background: transparent url('btn_next.png') no-repeat bottom;
	display: block;
	margin-top: 190px;
	margin-left: 110px;
}
#btn_screenshot_next:hover {
   background-image: url('btn_next_over.png');
}

.btn_blog_more {
	top: 193px;
	left: 364px;
	text-align: center;
	width: 169px;
	height: 31px;
	background: transparent url('btn_blog_more.png') no-repeat;
	position: absolute;
}

.btn_blog_more p {
	font-size: 18px;
	top: 45%;
	position: relative;
	transform: translateY(-50%);	
}


.btn_blog_more:hover {
	background-image: url('btn_blog_more_over.png');	
}

.content-bg {
	background-image: url(content_bg.png);
	background-repeat: repeat-y;
	background-position: top center;
}


.prev {
	height: 597px;
	background-image: url(bg_screenshots_prev.png);
}

.next {

	height: 597px;
	background-image: url(bg_screenshots_next.png);

}

.center {

	height: 597px;
	background-image: url(bg_screenshots_center.jpg);

}

.blog-container {
	height: 250px;
}

.content-margin {
	margin: 20px;
}

.content-margin10 {
	margin: 10px;
}

.features-margin {
	padding-left: 65px;
}

.bg-blog-left {
	height: 224px;
	background-image: url(bg_blog_left.png);
	background-repeat: no-repeat;
	background-position: right;
}

.bg-blog-center {
	height: 224px;
	background-image: url(bg_blog_center.png);
	background-repeat: no-repeat;
}

.bg-blog-center h1 {
	padding-right: 100px;

}

.bg-blog-right {
	height: 224px;
	background-image: url(bg_blog_right.png);
	background-repeat: no-repeat;
	background-position: left;
}

.mainmenu-container {
	height: 65px;
}

.bg-mainmenu-left	{ background-image: url(btn_mainmenu_left.png); background-position: right; }
.bg-mainmenu-right	{ background-image: url(btn_mainmenu_right.png); background-position: left; }

.bg-mainmenu-left, .bg-mainmenu-right {
	height: 65px;
	background-repeat: no-repeat;
	margin-bottom: 12px;
}

.mainmenu-inner-img {
	width: 46px;
	display: block;
}
.mainmenu-inner-btn {
	width: 276px;
	display: block;
}

.mainmenu-inner-left	{ background: transparent url(btn_mainmenu.png) no-repeat scroll 0px 0px; }
.mainmenu-inner-right	{ background: transparent url(btn_mainmenu.png) no-repeat scroll -874px 0px; }
.mainmenu-inner-left, .mainmenu-inner-right {
	display: block;
	width: 46px;
	height: 65px;
	float: left;
}

.btn-mainmenu-home			{ background: transparent url(btn_mainmenu.png) no-repeat scroll -46px 0px; }
.btn-mainmenu-home:hover	{ background: transparent url(btn_mainmenu.png) no-repeat scroll -46px -65px; }
.btn-mainmenu-dlc 			{ background: transparent url(btn_mainmenu.png) no-repeat scroll -322px 0px; }
.btn-mainmenu-dlc:hover		{ background: transparent url(btn_mainmenu.png) no-repeat scroll -322px -65px; }
.btn-mainmenu-news 			{ background: transparent url(btn_mainmenu.png) no-repeat scroll -598px 0px; }
.btn-mainmenu-news:hover	{ background: transparent url(btn_mainmenu.png) no-repeat scroll -598px -65px; }
.btn-mainmenu-home, .btn-mainmenu-news, .btn-mainmenu-dlc {
	display: inline-block;
	height: 53px;
	width: 276px;
	text-align: center;
	padding-top: 12px;
	float: left;
	font-family: Rock Salt;
	text-shadow: 2px 2px 6px black;
}

.bg-steam-left {
	height: 137px;
	background-image: url(steam_available_left.png);
	background-repeat: no-repeat;
	background-position: right;
}

.bg-steam-center {
	height: 137px;
	background-repeat: no-repeat;
}

.bg-steam-center a{
	display: block;
	float: left;
	width: 460px;
	height: 137px;
}

.bg-steam-right {
	height: 137px;
	background-image: url(steam_available_right.png);
	background-repeat: no-repeat;
	background-position: left;
}

.steam-center{
	height: 137px;
	background-image: url(steam_avilable_center.png);
	background-repeat: no-repeat;
	background-position: center;
}
.available-steam				{ background: transparent url(available_steam.png) no-repeat scroll 0px 0px; }
.available-steam:hover			{ background: transparent url(available_steam.png) no-repeat scroll -460px 0px; }
.available-macappstore			{ background: transparent url(available_macappstore.png) no-repeat scroll 0px 0px; }
.available-macappstore:hover	{ background: transparent url(available_macappstore.png) no-repeat scroll -460px 0px; }

.bg-title-left {
	height: 78px;
	background-image: url(bg_title_left.png);
	background-repeat: no-repeat;
	background-position: right;
}

.bg-title-center {
	height: 78px;
	background-image: url(bg_title_center.png);
	background-repeat: repeat-x;
}

.bg-title-right {
	height: 78px;
	background-image: url(bg_title_right.png);
	background-repeat: no-repeat;
	background-position: left;
}

.bg-title-twitter {
	height: 78px;
	background-image: url(bg_title_twitter.png);
	background-repeat: no-repeat;
	background-position: left;
}

.bg-twitter-right-center {
	height: 400px;
	background-image: url(bg_title_twitter_right-center.png);
	background-repeat: repeat-y;
	background-position: left;
}

.bg-twitter-container {
	height: 400px;
	background-color: #634c42;
}

.bg-title-twitter h1{
	padding-left: 60px;
}

.bg-title-twitter-right {
	height: 78px;
	background-image: url(bg_title_twitter_right.png);
	background-repeat: no-repeat;
	background-position: left;
}

.bg-twitter-right-bottom {
	height: 17px;
	background-image: url(bg_title_twitter_right-bottom.png);
	background-repeat: no-repeat;
	background-position: left top;
}

.bg-twitter-center-bottom {
	height: 6px;
	background-image: url(bg_title_twitter_center_bottom.png);
	background-repeat: no-repeat;
	background-position: top;
}

.video-bg-first {
	height: 226px;
	background-image: url(btn_vhs_01.png);
}

.video-bg-second {
	height: 226px;
	background-image: url(bg_vhs.png);
	background-repeat: repeat-x;
}

.anim-nosignal {
	top: 60px;
	margin:auto;
	position:absolute;
	width:164px;
	height:108px;
	overflow: hidden;
}

.video {
	display: block;
	width: 162px;
	height: 106px;
}

.trailer { background-image: url("video_thumb_trailer.png") } 
.trailer:hover { background-image: url("video_thumb_trailer_over.png") }

.tutorial { background-image: url("video_thumb_tutorial.png") }
.tutorial:hover { background-image: url("video_thumb_tutorial_over.png") }

.job { background-image: url("video_thumb_job.png") }
.job:hover { background-image: url("video_thumb_job_over.png") }

.nosignal1 {
	left: 34px;
}
.nosignal2 {
	left: 264px;
}
.nosignal3 {
	left: 494px;
}

.li-features {
	padding: 0px 0px 0px 0px;
	line-height: 22px;
	margin-bottom: 12px;
	height: 68px;
	display: flex;
  	align-items: center;
}
.li-features-1 {
	background: url(ico_key_car.png) no-repeat left center;
}

.li-features-2 {
	background: url(ico_key_rust.png) no-repeat left center;
}

.li-features-3 {
	background: url(ico_key_component.png) no-repeat left center;
}

.li-features-4 {
	background: url(ico_key_paint.png) no-repeat left center;
}

.li-features-9 {
	background: url(ico_key_build.png) no-repeat left center;
}

.li-features-5 {
	background: url(ico_key_map.png) no-repeat left center;
}
.li-features-6 {
	background: url(ico_key_race.png) no-repeat left center;
}
.li-features-7 {
	background: url(ico_key_challenge.png) no-repeat left center;
}
.li-features-8 {
	background: url(ico_key_mechanic.png) no-repeat left center;
}
.li-features-10 {
	background: url(ico_key_money.png) no-repeat left center;
}

.li-flag-1 {
	background: url(ico_flag_eng.png) no-repeat left center;
}

.li-flag-2 {
	background: url(ico_flag_dan.png) no-repeat left center;
}

.li-flag-3 {
	background: url(ico_flag_trk.png) no-repeat left center;
}

.li-flag-4 {
	background: url(ico_flag_czh.png) no-repeat left center;
}

.li-flag-5 {
	background: url(ico_flag_ukr.png) no-repeat left center;
}

.li-flag-6 {
	background: url(ico_flag_hun.png) no-repeat left center;
}

.lang_div {
	width: 920px;
	text-align: center;
}

.flag {
	margin: 4px;
}


.li-faq {
	padding: 0px 5px 20px 0px;
	height: 352px;
}

.two-columns-list {
	background: #634c42;
	columns: 3;
	text-align: center;
	-webkit-columns: 3;
	-moz-columns: 3;
}


.footer {
	text-align: center;
}

.logo_bottom_icons {
	width: 880px;
	height: 104px;
	margin: auto;
}

.dlc_bottom_icons {
	width: 368px;
	height: 104px;
	margin: auto;
}

.logo_steam {
	display: block;
	float: left;
	width: 204px;
	height: 90px;
	background: transparent url('logo_bottom_steam.png') no-repeat center;
}

.logo_macappstore {
	display: block;
	float: left;
	width: 204px;
	height: 90px;
	background: transparent url('logo_bottom_macappstore.png') no-repeat center;
}

.logo_xbox_series {
	display: block;
	float: left;
	width: 276px;
	height: 90px;
	background: transparent url('logo_bottom_xboxseriesxs.png') no-repeat center;
}

.logo_xbox_one {
	display: block;
	float: left;
	width: 185px;
	height: 90px;
	background: transparent url('logo_bottom_xboxone.png') no-repeat center;
}

.logo_windows {
	display: block;
	float: left;
	width: 245px;
	height: 90px;
	background: transparent url('English_get-it-from-MS.png') no-repeat center/80%;
}

.socmedia_divider {
	width: 920px;
	height: 1px;
	background: transparent url('bottom_divider.png') no-repeat center;
	display: block;
}

.socmedia {
	height: 60px;
}

.socmedia_icons {
	width: 510px;
	height: 55px;
	display: block;
	margin: auto;
}

.socmedia_icons a {
	display: block;
	float: left;
	width: 45px;
	height: 45px;
	margin-top: 10px;
	margin-left: 20px;
	margin-bottom: 10px;
	margin-right: 20px;
}

.gamepedia {
	text-align: center;
	height: 60px;
	margin: 15px 0;
}

.cp				{ background: transparent url(icons_social.png) no-repeat scroll 0px 0px; }
.cp:hover		{ background: transparent url(icons_social.png) no-repeat scroll -45px 0px; }
.twitter		{ background: transparent url(icons_social.png) no-repeat scroll -90px 0px; }
.twitter:hover	{ background: transparent url(icons_social.png) no-repeat scroll -135px 0px; }
.facebook		{ background: transparent url(icons_social.png) no-repeat scroll -180px 0px; }
.facebook:hover	{ background: transparent url(icons_social.png) no-repeat scroll -225px 0px; }
.youtube		{ background: transparent url(icons_social.png) no-repeat scroll -270px 0px; }
.youtube:hover	{ background: transparent url(icons_social.png) no-repeat scroll -315px 0px; }
.discord		{ background: transparent url(icons_social.png) no-repeat scroll -360px 0px; }
.discord:hover	{ background: transparent url(icons_social.png) no-repeat scroll -405px 0px; }
.tiktok			{ background: transparent url(icons_social.png) no-repeat scroll -450px 0px; }
.tiktok:hover	{ background: transparent url(icons_social.png) no-repeat scroll -495px 0px; }


.cp_logo {
	position: relative;
}

.cp_logo a{
	width: 345px;
	height: 76px;
	display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    margin-bottom: 15px;
}

.cp_logo_img		{ background: transparent url(cp_logo.png) no-repeat scroll 0px 0px; }
.cp_logo_img:hover	{ background: transparent url(cp_logo.png) no-repeat scroll 0px -76px; }

/* TRAILER */
iframe#trailer {
	border: 0px;
}

/* news */

.news {
	font-size: 15px;
}

.news p {
	padding-left: 122px;
	padding-right: 20px;
	padding-bottom: 12px;
}

.news h2 {
	font-family: Cairo;
	letter-spacing: normal;
	text-align: left;
	padding-left: 120px;
	font-size: 18px;
}

.news .readmore {
	margin-top: -12px;
	text-align: right;
}

.news .readmore a {
	color: #bd3900;
}

.news .readmore a:hover {
	color: #ad2900;
}

.news ul {
	list-style: disc;
	padding: 0px 20px 12px 170px;
	padding-bottom: 12px;
}

.news-title {
	height: 72px;
}

.news-date-left {
	height: 72px;
	background-image: url(bg_news_date_left.png);
	background-repeat: no-repeat;
	background-position: right;
}

.news-date {
	top: 0px;
	left: 0px;
	width: 105px;
	height: 72px;
	background-image: url(bg_news_date.png);
	background-repeat: no-repeat;
	position: absolute;
}

.news-date h1 {
	font-family: Cairo;
	font-size: 12px;
	letter-spacing: normal;
	color: #fdf5e5;
	text-align: center;
	padding-right: 10px;
	text-transform: uppercase;
}

.news-title-text {
	font-family: Cairo;
	font-size: 22px;
	line-height: 1.7;
	padding-left: 120px;
	top: 50%;
	position: relative;
	transform: translateY(-50%);
}

.news-title-text a {
	color: #bd3900;
}

.news-title-text a:hover {
	color: #ad2900;
}

.news .allnews {
	color: #bd3900;
	padding-left: 120px;
	font-size: 17px;
}

.news .allnews:hover {
	color: #ad2900;
}

.news p > a {
	color: #bd3900;
}

.news p > a:hover {
	color: #ad2900;
}


/* dlc */
.dlc p {
	padding-left: 60px;
	padding-right: 60px;
}

.dlc ul {
	padding: 0px 20px 12px 120px;
}

/* blog */
.blog-title {
	height: 112px;
}

.blog-title-text {
	font-family: Cairo ; 
	font-size: 34px;
	line-height: 1.7;
	padding-left: 120px;
	top: 50%;
	position: relative;
	transform: translateY(-50%);
}

.blog-title-text a 			{ color: #bd3900; }
.blog-title-text a:hover	{ color: #ad2900; }

.blog-content {
	padding-left: 120px;
	padding-right: 20px;
}

.blog-date-left {
	height: 112px;
	background-image: url(bg_blog_date_left.png);
	background-repeat: no-repeat;
	background-position: right;
}

.blog-date {
	top: 0px;
	left: 0px;
	width: 105px;
	height: 112px;
	background-image: url(bg_blog_date.png);
	background-repeat: no-repeat;
	position: absolute;
}

.blog-date-month {
	font-size: 12px;
	color: #fdf5e5;
	text-align: center;
	padding-top: 22px;
	padding-right: 10px;
	text-transform: uppercase;
}

.blog-date-day {
	font-size: 50px;
	color: #fdf5e5;
	text-align: center;
	padding-right: 10px;
	line-height:1;
	text-transform: uppercase;
}

.blog-separator {
	height: 80px;
	background-image: url(bg_blog_separator.png);
	background-repeat: no-repeat;
	background-position: center;
	text-align: center;
}

.btn-blog-separator-readmore {
	top: 41px;
	left: 364px;
	width: 169px;
	height: 31px;
	position: absolute;
	background: transparent url('btn_blog_more.png') no-repeat;

}

.btn-blog-separator-readmore p {
	font-size: 18px;
	top: 45%;
	position: relative;
	transform: translateY(-50%);	
}


.btn-blog-separator-readmore:hover {
	background-image: url('btn_blog_more_over.png');	
}

.navbar {
	height: 60px;
	left: 50%;
	position: relative;
	transform: translateX(-50%);
}

.navbar-btns {
	width: 920px;
	height: 55px;
	display: block;
	margin: auto;
	text-align: center;
	font-size: 18px;
}

.navbar-btns a {
	display: block;
	float: left;
	height: 32px;
	margin-top: 10px;
	margin-left: 5px;
	margin-bottom: 10px;
	margin-right: 5px;
}

.navbar-prevnext {
	width: 116px;
	background-image: url(btn_navbar_prevnext_normal.png);
}

.navbar-prevnext:hover {
	background-image: url(btn_navbar_prevnext_over.png);
}

.navbar-number {
	width: 32px;
	background-image: url(btn_navbar_normal.png);
}

.navbar-number:hover {
	background-image: url(btn_navbar_over.png);
}

div#birthday-badge {
	float: left;
	display: block;
	position: absolute;
	left: 980px;
	top: 50px;
	z-index: 100;
}

div#buy-now {
	float: left;
	display: block;
	position: absolute;
	left: 970px;
	top: 100px;
	z-index: 100;
}