@import url(//fonts.googleapis.com/css2?family=Alexandria:wght@400;700);

html, body { height: 100%; }
html { font-size: 62.5%; -webkit-text-size-adjust: 100%; }
body { font-family: Alexandria, sans-serif; font-size: 2rem; line-height: normal; margin: 0; color: #7c5e36; background-color: #f8e2aa; cursor: default; }
a { text-decoration: underline; color: inherit; }
ol { text-align: justify; margin: 0; padding: 0; list-style: none; counter-reset: number; }
ol:after { content: ""; display: inline-block; width: 100%; }
ol li { display: inline-block; vertical-align: top; width: 45%; padding-top: 2rem; }
ol li:before { counter-increment: number; content: counter(number); font-size: 4rem; text-align: center; display: inline-block; width: 8rem; line-height: 8rem; color: #f8e2aa; background-color: #7c5e36; border-radius: 4rem; position: absolute; }
ol h3, ol p:first-child { display: table-cell; vertical-align: middle; height: 8rem; padding: 0 0 2rem 10rem; }
h1 { height: 15rem; margin: 0; margin-top: -4rem; background: url(../images/logo.svg) no-repeat center top/contain; text-indent: 110%; white-space: nowrap; overflow: hidden; }
h2 { font-size: 4.5rem; text-align: center; line-height: 1.1; margin: 0 0 4rem; }
h3 { font-size: 2.5rem; text-align: left; margin: 6rem 0 2rem; }
h4 { font-size: 4rem; text-align: center; margin: 6rem 0 2rem; }
h4 a { text-decoration: none; display: inline-block; padding: 2rem 6rem; color: #7c5e36; background-color: #f8e2aa; border-radius: 4rem; box-shadow: 0 0 2rem #f8e2aa; transition: all 0.3s; }
h4 a:hover { box-shadow: 0 0 4rem #f8e2aa; }
h5 { font-size: 2.5rem; margin: 0; }
h1, h2, h3, h4, h5 { text-transform: uppercase; }
p { text-align: justify; line-height: 1.4; margin: 0 0 2rem; }
p.small { font-size: 1.5rem; }
img { display: block; margin: auto; }
hr { margin: 6rem 0; border: 0; border-top: 2px dotted #a27d4b; }
* { -webkit-tap-highlight-color: transparent; }

.wrap { min-width: 36rem; max-width: 102rem; margin: 0 auto; padding: 8rem; box-sizing: border-box; overflow: hidden; }
.section-1 { min-height: 100%; background: white url(../images/hero.jpg) no-repeat center bottom/cover; }
.section-2 { background-color: #f8e2aa; }
.section-3 { background-color: #7bbc8d; }
.section-4 { color: #f8e2aa; background-color: #49945f; }
.section-5 { color: #f8e2aa; background-color: #a27d4b; }
.section-6 { color: #f8e2aa; background-color: #7c5e36; }
.section-1, .section-2, .section-3, .section-4, .section-5, .section-6 { position: relative; }
input { display: none; }
label { text-align: center; display: block; margin-top: 1rem; }
label span { display: inline-block; padding: 2rem 4rem; color: #f8e2aa; background-color: #7c5e36; border-radius: 4rem; cursor: pointer; }
label span:after { content: "▲"; margin-left: 1rem; }
input:checked + label span:after { content: "▼"; }
.events { display: none; margin: 1rem 0 2rem; }
input:checked + label + .events { display: block; }
.event { margin-bottom: 0.5rem; padding: 1.5rem 4rem; color: black; background-color: #f8e2aa; }
.event p { font-size: 1.5rem; margin-bottom: 0.5rem; }
.full::before { content: "PLNO"; float: right; margin-left: 2rem; padding: 0.5rem 2rem; color: #f8e2aa; background-color: #49945f; }
.activities { text-align: center; margin: 0; padding: 0; list-style: none; }
.activities li { font-weight: 700; text-transform: uppercase; display: inline-block; margin: 0.5rem; padding: 2rem 4rem; color: #49945f; border: 2px solid #7bbc8d; border-radius: 4rem; }
.wordcloud { width: 100%; max-width: 72rem; height: auto; }
.button { font-size: 2.5rem; color: #f8e2aa; background-color: #7c5e36; box-shadow: none; }
.social { text-align: center; }
.social img { display: inline-block; height: 8rem; margin: 2rem 1rem; }

@media screen and (max-width: 760px) {
	ol li { width: 100%; }
	.wrap { padding-left: 4rem; padding-right: 4rem; }
}