/* Place your CSS styles in this file */

body {
    font-family: "Libre Franklin", sans-serif;
    font-optical-sizing: auto;
    font-size: 15px;
    color: #000;
    background: #41957b;
    margin: 20px;
}

html .cog-cognito, :root:root:root:root:root .cog-cognito { font-family: "Libre Franklin", sans-serif; }
button.el-button.cog-button--has-status.cog-button--primary.cog-button--navigation.cog-button--submit.el-button--default.cog-button { font-family: "Libre Franklin", sans-serif !important; font-weight: bold !important; }
.cog-abuse.cog-wrapper, .cog-branding.cog-branding--minimal { display: none !important; }
html .cog-form__container, :root:root:root:root:root .cog-form__container { margin: 0 !important; }

.page {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    background: #fff;
    padding: 30px 30px 30px 30px;
    border-radius: 10px;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

.head {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    width: 100%;
}

.head .menu {
    line-height: 60px;
    margin-top: 10px;
}

.head .menu span { padding: 20px; font-weight: bold; }

.head .menu span a { text-decoration: none; color: #223050; }
.head .menu span a:hover { color: #41957b; }

.head .logo img {
    width: 200px;
}

.foot { text-align: center; background: #f0f0f0; padding: 20px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }

.foot p span { padding: 20px; }

h1 {
    text-align: center;
    margin-top: 0;
    font-weight: bold;
    padding: 20px 0;
}
h2 {
    text-align: center;
    margin-top: 0;
    font-weight: bold;
    padding: 20px 0;
    color: #215948;
}
h3 { padding-top: 20px; }
h4 {
    text-transform: uppercase;
    margin-bottom: 4px;
    font-size: 14px;
    color: #aac974;
}

p, ul li, ol li { line-height: 24px; }

ul li, ol li { padding-bottom: 10px; padding-right: 30px; }

ol { padding: 0; }

a { color: #41957b; }

div.dark { margin: 0 auto; background: #215948; color: #fff; padding: 20px; }
div.light { margin: 0 auto; padding: 20px; }

.voteinfo { text-align: center; padding-bottom: 20px; margin-bottom: 30px; background: #215948; color: #fff; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
.voteinfo p { margin-top: 0; }
.voteinfo p span { padding: 0 20px 20px 20px; }
.voteinfo a { color: #fff; }
.voteinfo p span strong { color: #aac974; }

#hero { text-align: center; padding: 30px 30px 10px 30px; background: #215948; color: #fff;  margin-top: 30px; border-top-left-radius: 8px; border-top-right-radius: 8px; }

#shero { display: flex; flex-wrap: nowrap; padding: 40px 20px; background: #215948; color: #fff; margin-top: 30px; border-top-left-radius: 8px; border-top-right-radius: 8px; }
#shero>div { width: 50%; padding: 0 20px; }
.beatem { width: 100%; max-width: 600px; padding-left: 16px; margin: 0 auto; }
.beatem a { color: #fff; }

.regularrow { padding: 0 20px; }

.xes { text-align: left; max-width: 500px; margin: 20px auto 40px auto; padding: 10px 20px; border-radius: 10px; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; }
.xrow {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin-bottom: 0px;
    font-weight: bold;
    min-height: 60px;
    padding: 10px 0;
    border-top: #ccc 1px solid;
    line-height: 24px;
}
.xrow:first-child { border-top: none; }
.xrow div:first-child { font-family: "Sriracha", cursive; color: #EC1F27; font-size: 40px; line-height: 48px; }
.xrow div:last-child { margin-left: 8px !important; }
.xrow span { color: #EC1F27; text-transform: uppercase; }



.election-info { display: flex; flex-wrap: nowrap; align-items: center; column-gap: 10px; border: 1px solid #ccc; padding: 10px; }
.election-info>div>p { margin: 4px 0; }


.big { text-align: center; font-size: 36px; font-weight: bold; color: #223050; margin-bottom: 8px;
}
.big span, .arguments h2 span, .arguments p span { color: #41957b; }
.arguments h2 { text-align: center; }
.arguments p span { font-weight: bold; }
.required { font-size: 13px; text-align: center; margin: 20px 0; font-style: italic; }

.ballotquestion { padding: 20px; background: #f0f0f0; }
.note { padding: 20px 30px; margin: 20px 0 30px 0; background: #f0f0f0; font-size: 14px; }
.footnotes { margin-top: 30px; font-size: 13px; line-height: 20px; }
sup {font-size: 10px;}
.voteno { padding: 20px; background: #215948; color: #fff; margin: 50px 0 30px 0; }
.voteno h2 { color: #fff; }
ul.votenoif { list-style: none; }
ul.votenoif li { position: relative;  padding-left: 2em; font-size: 18px;  }
ul.votenoif li:before { content:'\2714 \fe0e'; position: absolute; left: 0; width: 1.5em; height: 1.5em; font-size: 24px; color: #aac974; -webkit-text-fill-color: rgb(170,201,116); -webkit-opacity: 1;  }
.vision { padding: 20px 40px; background: #223050; color: #fff; margin: 50px 0 30px 0; }
.theysay { font-weight: normal; text-align: center; line-height: 26px; }
.morequestions { text-align: center; margin-bottom: 40px; font-size: 16px;  }
.morequestions a { color: #215948; }
.partners a { text-align: center; }

@media only screen and (max-width: 600px) { 
   body { margin: 0px; }
   .election-info { flex-wrap: wrap; text-align: center; justify-content: center; } 
   .breakspan { display: none; }
   div.container { padding: 0; border: none; }
   .page { padding: 0; }
   ul.votenoif { padding: 0; padding: 20px; list-style: disc; }
   ul.votenoif li:before { display: none; }
   ul.votenoif li { padding-left: 10px; padding-right: 0; }
   .head { flex-wrap: wrap; }
   .head .menu { display: flex; flex-wrap: wrap; justify-content: center; line-height: 0; }
   .head .logo { margin-top: 10px; }
   .regularrow { padding: 0 40px; }
   #hero { padding: 30px 20px 10px 20px; margin-top: 30px; border-radius: 0; }
   #hero>div>strong { line-height: 24px; }
   #shero { flex-wrap: wrap; border-radius: 0; }
   #shero>div { width: 100%; padding: 0 20px; }
   #shero>div:last-child { padding-top: 20px; }
   .morequestions a { display: block; }
   .foot p, .voteinfo p {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%; }
    .foot p span { padding: 10px; display: block; }
    .partners { display: block; text-align: center; }
    .partners a { display: block; padding-bottom: 10px; }
}
@media only screen and (min-width: 600px) { 
   .breakspan { display: block }
   .partners { display: flex; flex-wrap: no-wrap; justify-content: center; align-items: center; column-gap: 20px }
}