html,body {
    margin: 0;

    background: #f8f8f8;

    font-size: 18px;
    font-family: Arial;
}

body {
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga=1";
    -moz-font-feature-settings: "liga";
    -ms-font-feature-settings: "liga" 1;
    -o-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

* {
    box-sizing: border-box;
}

.article .logo {
    display: block;
    text-align: right;

    margin: 0.85rem 0;
}

.article .logo a {
    text-decoration: none;
    box-shadow: none;
}

.article .logo img {
    display: inline-block;
    margin: 0;
    max-width: 220px;
    border: 0 none;
    box-shadow: none;
}

.brand {
    border: 4px solid currentColor;
    padding: 2% 3%;
    margin: 10% 7% 0;
}

.brand img {
    display: block;
    max-width: 100%;
    opacity: 0;
}

.content {
    position: relative;

    max-width: 1024px;
    margin: 5% auto;
}


@media screen and (max-width: 767px) {
	.content {
		margin: 0 auto;
	}
}

.sidebar {
    position: absolute;
    top: 0;
    left: 0;

    background: #505050;
    color: #f8f8f8;

    width: 295px;
    padding-bottom: 5%;

    box-shadow: 0 0 36px rgba(31, 31, 31, 0.13);
    margin-bottom: 5%;
}

.menu-button {
	display: none;
}

@media screen and (max-width: 767px) {
	.menu-button {
		position: fixed;
		right: 0;
		bottom: 0;

		display: block;

		margin: 1rem;
		padding: 3.5% 3% 3%;
	    color: #f8f8f8;

	    text-transform: uppercase;
	    text-decoration: none;

	    font-weight: 600;
	    font-size: 1.2rem;
		border-radius: 0;

		background: #166f45;
		font-weight: bold;
		font-family: inherit;
		-webkit-appearance: none;
		appearance: none;

		z-index: 13;
	}

	.sidebar-isActive ~ .menu-button {
		background-color: #f8f8f8;
		color: #505050;
	}

	.sidebar {
	    position: fixed;
		right: 0;
		bottom: 0;

		display: none;
		width: 100%;
		margin: 0;

		z-index: 12;

		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}

	.sidebar-isActive {
		display: block;
	}
}

.nav {
    padding: 7%;
}

.nav .link {
    display: block;
    // max-width: 260px;
    width: 100%;
    border-bottom: 4px solid currentColor;
    padding: 3.5% 3% 4%;
    color: #b3b2b2;

    text-transform: uppercase;
    text-decoration: none;

    font-weight: 600;
    font-size: 1.3rem;
}

.nav .link.current {
  color: #fff;
}

.nav a.link:hover {
    color: #505050;
    background-color: #b3b2b2;
    border-color: #b3b2b2;
}

.nav a.link.current:hover {
  color: #fff;
  border-color: #fff;
  background-color: transparent;
}

.article-wrapper {
    position: relative;
    z-index: 5;

    top: 30px;
    margin-left: 220px;
}

@media screen and (max-width: 767px) {
	.article-wrapper {
		top: 0;
		margin: 0.5rem;
	}
}

.article {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    box-shadow: 0 0 36px rgba(31, 31, 31, 0.13);
    transition: 0.3s transform;
}

.article a {
    text-decoration: none;
    box-shadow: 0 3px 0 rgba(22, 111, 69, 0.45);
    color: #000;
}

.article a:hover {
    box-shadow: 0 3px 0 #166f45;
}

.article-0 {
    transform: translate(-2.5rem, 2.5rem);
    background: #F3F3F3;
    bottom: 10%;
}

.sidebar:hover ~ .article-wrapper .article-0 {
	transform: translate(1rem, 3.8rem);
}

.article-1 {
    transform: translate(2.5rem, -2.5rem);
    background: #166f45;
    margin-left: 5%;
    right: 5%;
}

.sidebar:hover ~ .article-wrapper .article-1 {
		transform: translate(5.5rem, -2.5rem);
}

.article-2 {
    position: relative;
    margin-left: 0;
    margin-right: 5%;
    min-height: 70vh;
    padding: 3% 5% 10%;
    background: white;
}

.sidebar:hover ~ .article-wrapper .article-2 {
		transform: translate(3.3rem, 0);
}

@media screen and (max-width: 767px) {
	.article-wrapper {
		top: 0;
		margin: 0.5rem;
	}

	.article-0 {
		display: none;
	}

	.article-1 {
		transform: none;
		top: -0.5rem;
		right: -0.5rem;
		left: -0.5rem;
		bottom: -0.5rem;

    	margin: 0;
	}

	.article-2 {
		margin: 0;
		overflow: hidden;
	}

	.sidebar:hover ~ .article-wrapper .article {
		transform: none;
	}
}

.bolder {
    font-weight: 700;
}

.bold {
    font-weight: 600;
}

.regular {
    font-weight: 400;
}

.article img {
    display: block;
    border: 1.7rem solid #FFF;
    margin: 5% 0;

    box-shadow: 0 0 19px rgba(31, 31,31, 0.05);
    max-width: 100%;
		height: auto;
}

.article img.right {
    float: right;

    width: 70%;
    margin: 3%;
    margin-right: -18%;
    margin-left: 1rem;
}

.article img.left {
    float: left;
    width: 70%;
    margin: 3%;
    margin-left: -18%;
    margin-right: 1rem;
}