:root {
	--maincolor: #2c2c2c;
	--backgroundcolor: #eeeeee;
	--linkcolor: #534e94;
	--linkhovercolor: #018ba0;
	--specialcolor: #927c00;
	--displayfont: 'chaney', sans-serif;
	--regularfont: 'poppins', sans-serif;
	--fontsize: '16px';
	--smallfontsize: .8rem;
	--radius: 20px;
}




/* reset */
* {margin: 0; padding: 0; border: 0; outline: 0; box-sizing: border-box;}
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: no-repeat 0 0 var(--backgroundcolor); background-attachment: fixed;}
html {scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--maincolor) transparent;}
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: 20px; margin: 0 auto;}
header a 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; 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 */
.mobile_menu {display: none; position: absolute; top: 0; right: 5%; font-family: var(--displayfont); font-size: larger; color: var(--maincolor);}

.mobile_menu .mobile_menu_button {width: 30px; height: 30px; position: absolute; top: 20px; 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: 1100px;}

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

h1 {font-family: var(--regularfont); font-size: 1.0rem; margin: 0 0 20px 0; border-top: 2px solid; border-bottom: 2px solid; padding: 6px 0; text-align: center; line-height: 1.1; letter-spacing: .3em;}
h2 {font-family: var(--displayfont); font-size: 2.6rem; margin: 0 0 20px 0; line-height: 1.1; text-align: center; padding: 0 .5em;}
h3 {font-family: var(--displayfont); font-size: 1.3rem; 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;}
article li {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%; max-height: 50%}

del {text-decoration: line-through;}

.centered {display: flex; align-items: stretch; padding: 60px 0;}
.centered h3 {flex: 0 0 calc(33.3333% - 5%); padding: 10px 0 10px 0; margin: .25em 5% 7px 0; border-top: 2px solid;}
.centered + .centered:not(.box) {padding-top: 0;}

.fit {display: block; border-radius: var(--radius); text-align: center; font-style: italic; color: rgba(24, 24, 24, 1.0);}
.round {border-radius: var(--radius); text-align: center;}




/* welcome */
.welcome {display: flex; flex-wrap: wrap; align-items: center; padding: 30px; border-top: 2px solid;}
.welcome h1 {flex: 0 0 50%; font-family: var(--displayfont); font-size: 2.3rem; 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;}




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



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




/* story */
.stories {column-count: 3; column-gap: 50px; margin-top: 50px;}
.stories figure {display: table; width: 100%; margin-bottom: 50px; border-radius: var(--radius); overflow: hidden; background: var(--maincolor);}
.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(--linkcolor); border-radius: 99px; white-space: nowrap;}
.button:hover {background: var(--linkhovercolor);}
.button.small {display: inline-block; font-size: 1rem; padding: .5em 1.5em; margin: 0;}
.button.small:before {display: none;}
.button.win:after {content: ' — Windows';}
.button.disabled {pointer-events: none; opacity: .2;}
.button.disabled:before {display: none;}
.button + br {display: none;}
.button + br + .button {margin-top: 0;}


/* footer */
footer {margin: 60px; text-align: center; color: var(--maincolor);}
footer a {color: var(--maincolor); padding-bottom: 1px; border-bottom: 1px solid;}
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);}