:root {
	--maincolor: #bbcccc;
	--backgroundcolor: #232126;
	--linkcolor: #4397a4;
	--linkhovercolor: #fff;
	--specialcolor: #cbc49a;
	--boxshadow: 0 40px 30px -20px rgba(12,10,15,.8);
	--boxshadowhover: 0 35px 30px -20px rgba(12,10,15,.8);
	--displayfont: 'chaney', sans-serif;
	--regularfont: 'poppins', sans-serif;
	--fontsize: '16px';
	--smallfontsize: smaller;
	--radius: 6px;
}




/************************* FONTS *************************/
@font-face {
	font-family: 'chaney';
	src: url("fonts/chaney-wide.ttf");
	font-weight: bold;
}
@font-face {
	font-family: 'chaney';
	src: url("fonts/chaney-wide.ttf");
	font-weight: normal;
}
@font-face {
	font-family: 'poppins';
	src: url("fonts/poppins-medium.ttf");
	font-weight: normal;
}
@font-face {
	font-family: 'poppins';
	src: url("fonts/poppins-bold.ttf");
	font-weight: bold;
}




/************************* RESET *************************/
* {margin: 0; padding: 0; border: 0; outline: 0; box-sizing: border-box; text-decoration: none;}
a, a img {transition: .2s;}
.columnas {display: flex; flex-wrap: wrap; margin: 0 -15px;}
.columna {flex: 1 1 400px; padding: 0 15px;}




/************************* BODY *************************/
html {background: url('/images/background.jpg') no-repeat top center var(--backgroundcolor); background-attachment: fixed; background-size: cover;}
html {font-family: var(--regularfont); font-size: var(--fontsize); letter-spacing: .02em; line-height: 1.6; color: var(--maincolor);}
body {margin: 0 auto; overflow-x: hidden;}




/************************* HEADER *************************/
header {text-align: center;}
header a {display: block; width: 120px; perspective: 200px; padding: 30px; margin: 0 auto;}
header a:hover img {transform: rotateY(-180deg);}
header img {display: block; margin: 0 auto; transition: .8s;}
header strong {display: block; margin-top: 20px; font-family: var(--displayfont); font-size: 2rem; text-transform: uppercase; text-align: center; color: var(--maincolor); line-height: 1;}
header em {display: block; font-family: 'Georgia', serif; font-style: italic; letter-spacing: .025em; margin-top: .2em; text-transform: lowercase; text-align: center; color: var(--maincolor)}




/************************* MENU *************************/
.menu {display: block; clear: both; font-size: .75rem; letter-spacing: .5em; text-transform: uppercase; font-weight: bold; color: var(--maincolor); line-height: 35px;}
.menu a {display: block; padding: 0 1.2em 0 1.7em; margin: 0 1em; outline: 2px solid transparent; outline-offset: -3px; color: var(--maincolor);}
.menu a:hover, .menu a.current {outline-color: var(--maincolor); outline-offset: 0;}
.menu span {padding: 0;}

.left_menu, .right_menu {position: fixed; width: 600px; top: calc(50% - 25px); transform: rotate(270deg); display: flex; flex-direction: row-reverse; justify-content: center;}
.left_menu {left: -200px;}
.right_menu {right: -200px;}




/************************* MOBILE MENU *************************/
.mobile_menu {display: none; margin: 0 0 10px 0; font-family: var(--displayfont); font-size: larger; color: var(--maincolor); position: relative;}

.mobile_menu .mobile_menu_button {width: 24px; height: 24px; position: absolute; top: 30px; right: 0; z-index: 200; background: url('images/menu.svg') no-repeat left top; background-size: cover; cursor: pointer; transition: 0s;}
.mobile_menu .mobile_menu_button.opened {background-position: right top;}

.mobile_menu_links {display: flex; width: 100%; z-index: 100; position: fixed; top: 0; left: 101vw; padding: 80px 20px 30px; background: var(--backgroundcolor); font-size: 2.8rem; height: 100vh; flex-direction: column; justify-content: center; transition: .4s;}
.mobile_menu_links.opened {left: 0;}
.mobile_menu_links a {display: block;  line-height: 70px; text-align: center; color: var(--maincolor); cursor: pointer;text-transform: uppercase;}




/************************* ARTICLE *************************/
article {width: 90%; max-width: 800px; margin: 0 auto;}
article.wider {max-width: 1000px;}

article a {color: var(--linkcolor); cursor: pointer;}
article a:hover {color: var(--linkhovercolor);}

h1 {font-family: var(--regularfont); font-size: 1.0rem; text-transform: uppercase; margin: 0 0 30px 0; border-top: 2px solid; border-bottom: 2px solid; padding: 10px 0; text-align: center; line-height: 1.1; letter-spacing: .3em;}
h2 {font-family: var(--displayfont); font-size: 2.75rem; text-transform: uppercase; margin: 0 0 30px 0; line-height: 1; text-align: center; padding: 0 .5em;}
h3 {font-family: var(--displayfont); font-size: 1.3rem; text-transform: uppercase; margin: 0 0 30px 0; line-height: 1.2;}

hr {border-top: 2px solid var(--maincolor); margin: 30px 0;}

table {font-size: var(--smallfontsize); border-collapse: collapse;}
td img {margin: 0 5px 10px 0;} 
td {line-height: normal; vertical-align: top;}

article ul:not(:last-child) {margin-bottom: 2em; padding: 0; list-style: none;}
article li {list-style: '―'; margin: 0 0 0 1em; padding-left: .5em;}
article p:not(:last-child) {margin-bottom: 2em;}
article small {font-size: 10px;}
article img {max-width: 100%;}

del {text-decoration: line-through;}

.centered {display: flex; align-items: flex-start; padding: 15% 0;}
.centered h3 {flex: 0 0 calc(33.3333% - 5%); padding: .3em .6em; margin: .25em 5% 1em 0; color: var(--backgroundcolor); background: var(--maincolor);}
.centered + .centered:not(.box) {padding-top: 0;}

.fit {display: block; width: 100%; border-radius: var(--radius); text-align: center; font-style: italic; color: rgba(255,255,255,.4); box-shadow: var(--boxshadow);}




/************************* WELCOME *************************/
.welcome {display: flex; flex-wrap: wrap; align-items: center; padding: 30px 0; border-top: 2px solid;}
.welcome h1 {flex: 0 0 50%; font-family: var(--displayfont); font-size: 2.75rem; margin: 0; letter-spacing: normal; text-transform: uppercase; text-align: left; border: 0; color: var(--maincolor);}
.welcome p {flex: 0 0 50%; padding-left: 20px; line-height: 1.4em; word-break: keep-all;}




/************************* GAMES *************************/
.games {display: flex; flex-wrap: wrap; margin: 0 -20px; text-align: center;}
.games li {width: 25%; padding: 0 20px 40px; margin: 0; float: left; list-style: none; border: 0; font-size: 90%;}
.games a {width: 100%; overflow: auto;}
.games img {width: 100%; height: auto; display: block; color: var(--maincolor); background: black;}
.games figure {display: block; border-radius: var(--radius); color: var(--backgroundcolor); overflow: hidden; transition: .2s; box-shadow: var(--boxshadow);}
.games figure:hover {transform: scale(1.02); box-shadow: var(--boxshadowhover);}
.games figure:hover img {filter: brightness(1.05);}
.games figure a {color: var(--backgroundcolor);}
.games figcaption {display: block; padding: .9em 1.1em 1em; line-height: 1.3em; font-size: var(--smallfontsize); background: var(--maincolor);}
.games figcaption strong {font-family: var(--regularfont); font-weight: normal; text-transform: uppercase; letter-spacing: .1em;}




/************************* GAME DATA *************************/
.game_data {display: flex; font-size: var(--smallfontsize); line-height: normal; color: var(--backgroundcolor); background: var(--maincolor); border-radius: var(--radius); overflow: hidden; box-shadow: var(--boxshadow);}
.game_image {display: block; flex: 0 0 33.33%;}
.game_image img {display: block; width: 100%; height: auto; background: black;}
.game_credits {flex: 1 1 66.66%; padding: 5%;}
.game_credits h3 {padding-bottom: 30px; border-bottom: 2px solid; margin-bottom: 20px;}
.game_credits img {height: 30px; margin-top: 1.5rem; float: right;}




/************************* SCREENSHOTS *************************/
.screenshots {position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--boxshadow);}
.screenshots img {display: block; width: 100%; margin: 0;}
.screenshots span {display: inline-block; position: absolute; bottom: 10px; right: 10px;}
.screenshots span a {display: block; font-weight: bold; color: white; line-height: 40px; padding: 0 25px; background: rgba(23,35,34,.75); border-radius: 5px;}
.screenshots span a:hover {background: var(--linkcolor);}
.screenshots:after {content: ' '; display: table; clear: both;}

.lightboxOverlay {opacity: .9 !important;}
.lb-image {border: 0 !important;}
.lb-dataContainer {padding-top: 25px !important;}
.lb-data {padding: 0 !important;}
.lb-caption {font-family: var(--regularfont) !important; font-size: 1rem !important; line-height: 1.2em !important;}
.lb-number {color: #ccc !important;}




/************************* BOX *************************/
.box {display: block; padding: 8%; border-radius: var(--radius); margin-top: 15%; font-size: var(--smallfontsize); color: var(--backgroundcolor); background:var(--maincolor); box-shadow: var(--boxshadow);}
.box ul {border-top: 2px solid;}
.box ul li {display: block; padding: .4em 0; margin: 0; border-bottom: 2px solid;}
.box a {color: var(--linkcolor);}
.box .button:nth-last-child(2) {margin-bottom: 0;}
.box br:last-child {display: none;}




/************************* PHYLOSOPHY *************************/
.phylosophy {column-count: 2; column-gap: 30px; margin-top: 2rem;}
.phylosophy h3 {display: inline-block; padding: 5px 12px; margin: 15px 0; font-size: 1.15rem; color: var(--maincolor); background: var(--backgroundcolor);}
.phylosophy p {display: table; break-inside: avoid-column; line-height: 1.4;}




/************************* LOGOS *************************/
.logos {display: flex; flex-wrap: wrap; margin: 2rem -2px 0;}
.logos > * {display: block; flex: 0 0 25%; padding: 2px;}
.logos img {display: block; border-radius: 6px;}




/************************* VIDEO *************************/
.video {position: relative; width: 100%; height: 0; padding-bottom: 75%; margin: 0; background: black; border-radius: var(--radius); overflow: hidden; box-shadow: var(--boxshadow);}
.video.panoramic {padding-bottom: 56.25%;}
.video iframe {position: absolute; width: 100%; height: 100%; left: 0; top: 0;}




/************************* STORIES *************************/
.stories {column-count: 3; column-gap: 30px; margin-top: 30px;}
.stories figure {display: table; width: 100%; margin-bottom: 30px; border-radius: var(--radius); overflow: hidden; background: var(--maincolor); box-shadow: var(--boxshadow);}
.stories figcaption {display: table; padding: .9em 1.1em 1em; font-size: var(--smallfontsize); line-height: 1.3em; color: var(--backgroundcolor);}
.stories img {display: block; width: 100%;}
.stories a {white-space: nowrap; font-weight: bold;}



/************************* BUTTONS *************************/
.button {display: table; font-family: var(--displayfont); padding: .8em 2em; margin: 3rem auto 2rem; color: white !important; text-align: center; background: var(--backgroundcolor); border-radius: 99px; white-space: nowrap;}
.button:hover {background: var(--linkcolor);}
.button:before {content: ' '; display: inline-block; height: 20px; width: 20px; margin: -2px 12px 2px -7px; background: url('/images/icon_download.svg') no-repeat 0 0; vertical-align: middle;}
.button.small {display: inline-block; font-size: 1rem; padding: .5em 1.5em; margin: 0;}
.button.small:before {display: none;}
.button.win:after {content: ' — Windows';}




/************************* FEEDBACK *************************/
.feedback {width: 100%; border-collapse: collapse;}
.feedback td {padding: 3rem 2rem 3rem 0; border-bottom: 2px solid;}
.feedback td:last-child {padding-right: 0;}
.feedback strong {display: block; font-size: larger; margin-bottom: 1rem;}




/************************* FOOTER *************************/
footer {margin: 60px; font-size: var(--smallfontsize); text-align: center; color: var(--maincolor);}
footer a {color: var(--maincolor); padding-bottom: 8px; border-bottom: 2px solid transparent;}
footer a:hover {border-color: inherit;}

.spacer:before {content: '—'; display: inline-block; margin: 0 8px;}
.twitter img {margin-right: 5px; vertical-align: middle;}
.twitter:hover img {filter: brightness(2);}




/************************* ERROR 404 *************************/
.error404 {display: flex; flex-direction: column; justify-content: center; text-align: center; height: calc(100vh - 280px); perspective: 100vh;}
.error404 img {position: fixed; max-width: inherit; top: calc(50vh - 380px); left: calc(50% - 200px); z-index: -10; opacity: .1; animation: rotation 30s linear infinite;}
@keyframes rotation {from {transform: rotatey(0deg);} to {transform: rotatey(-360deg);}}





/************************* MEDIA QUERIES *************************/
@media (max-width: 1300px) {
	.menu {display: none;}
	.mobile_menu {display: block;width: 90%; max-width: 800px; margin: 0 auto;}
	.welcome h1 {flex: 0 0 100%; max-width: 700px; margin: 0 auto 15px; text-align: center;}
	.welcome p {flex: 0 0 100%; padding: 0; text-align: center;}
}
@media (max-width: 992px) {
	html {font-size: 14px;}
	h1 {font-size: 1rem;}
	.box h2 {font-size: 2rem !important; padding-left: 0; padding-right: 0;}
	.columns {flex-direction: column;}
	.games li {width: 33.3333%;}
	.centered {flex-direction: column;}
	.box {padding: 15% 10%;}
	footer a {display: block; margin: .5em; text-align: center;}
	footer span {display: none;}
}
@media (max-width: 768px) {
	.centered {flex-wrap: wrap;}
	.games li {width: 50%;}
	.game_data {flex-wrap: wrap;}
	.game_image {flex: 1 1 100%;}
	.game_credits {padding: 30px; line-height: normal;}
	.game_credits h3 {display: none;}
	.game_credits img {height: 24px;}
	.logos > * {flex: 0 0 33.3333%;}
	.stories, .phylosophy {column-count: 1;}
}
@media (max-width: 576px) {
	.welcome h1 {font-size: 2rem;}
	.box h2 {font-size: 1.8rem !important;}
	.games li {width: 100%;}
	.logos > * {flex: 0 0 50%;}
	.button.win:after {content: '';}
}