@import url(css/style-guide.css);
@import url(css/font.css);

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poetsen One', sans-serif;
}

body, html {
    font-size: 4vw;
}

body {
    background-image: url('img/bg.svg');
    background-size: cover;
    background-color: #015DAA;
    min-height: 100vh;
}
body.single {
    background: #9ABEDD;
    /* padding: 0.625rem; */
}

span.movimentos {
    width: 100%;
    float: left;
    margin-top: 1.6875rem;
}
span.movimentos img {
    height: 1.25rem;
}

ul {
    width: 100%;
    float: left;
    padding: 0 2.0125rem;
    margin: 0;
    list-style: none;
    margin-bottom: 5rem;
}
ul.movimentos li {
    float: left;
    padding: 0 0.5rem;
    margin: 0.3125rem 0;
}
ul li .img {
    background-color: #0095DA;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    border-radius: 100%;
    position: relative;
}
ul li .img img {
    position: absolute;
    width: calc(100% - 0.875rem);
    height: calc(100% - 0.875rem);
    border-radius: 100%;
    object-fit: cover;
    margin: 0.4375rem;
    border: 0.1875rem solid white;
}
ul li span.name {
    background-color: #0095DA;
    width: 100%;
    height: 2.1875rem;
    float: left;
    position: relative;
    font-size: 0.9rem;
    color: white;
    text-align: center;
    line-height: 2.1875rem;
    border-radius: 0.3125rem;
    margin-top: -2rem;
    z-index: 2;
}

body.single div.movimento {
    padding: 0.625rem;
}
body.single div.movimento div.capa-img {
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 9.5rem;
    border: 0.25rem solid white;
    margin-top: 2rem;
}
body.single div.movimento span.title {
    background-color: #0095DA;
    width: 100%;
    float: left;
    border-radius: 0.5rem;
    font-size: 2rem;
    text-align: center;
    color: white;
    padding: 0.4rem 0;
    margin: 0.3125rem 0 0 0;
    z-index: 2;
    position: relative;
}
body.single div.movimento div.buttons {
    width: 100%;
    float: left;
}
body.single div.movimento div.buttons a {
    background-color: #91D8F7;
    width: calc(50% - 0.1563rem);
    float: left;
    margin-top: -0.4rem;
    margin-right: 0.1563rem;
    text-align: center;
    padding: 1.8rem 0 1.4rem;
    font-size: 1.25rem;
    color: #015DAA;
    text-decoration: none;
}
body.single div.movimento div.buttons a:last-of-type {
    margin-left: 0.1563rem;
    margin-right: 0;
}
body.single div.internal {
    background-color: #89AECD;
    width: 100vw;
    min-height: 100vh;
    float: left;
    padding: 0.5625rem;
}
body.single div.internal span.title {
    background-color: #0098DA;
    width: 100%;
    float: left;
    padding: 1.2rem 0;
    text-align: center;
    font-size: 2rem;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.single div.internal span.title svg {
    width: 1.8rem;
    float: right;
    margin-right: 2rem;
    position: absolute;
    right: 0;
}
body.single div.internal span.text {
    background-color: #91D8F7;
    width: 100%;
    min-height: calc(100vh - 6.6rem);
    float: left;
    padding: 2rem 1rem;
    color: #015DAA;
    font-size: 1.2rem;
    margin-top: 0.5rem;
}

ul.list {
    width: 100%;
    float: left;
    list-style: none;
    padding: 0;
}
ul.list li {
    background-color: #0098DA;
    width: 100%;
    height: 4.5rem;
    float: left;
    padding: 0.25rem;
    margin-top: 1rem;
    display: flex;
    align-items: center;
}
ul.list li .picture {
    background-position: center;
    background-size: cover;
    width: 4rem;
    height: 4rem;
    margin-right: 0.125rem;
    float: left;
    border: 0.125rem solid white;
}
ul.list li span.txt {
    flex: 2;
    font-size: 1.3rem;
    color: white;
    /* white-space: nowrap; */
    text-align: center;
}

body.single div.autor {
    width: 100%;
    float: left;
    padding: 0.625rem;
}
body.single div.autor .base {
    width: 100%;
    float: left;
    display: flex;
    justify-content: center;
}
body.single div.autor .base .img {
    background-color: black;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 10rem;
    height: 10rem;
}
body.single div.autor span.title {
    background-color: #0095DA;
    width: 100%;
    float: left;
    margin-top: 0.2rem;
    padding: 1rem 0;
    text-align: center;
    font-size: 1.7rem;
    color: white;
    border-radius: 1rem;
}
body.single div.internal.secao {
    background-color: #9ABEDD;
}
body.single div.internal.secao div.box {
    background-color: #0098DA;
    width: 100%;
    min-height: calc(100vh - 3rem);
    float: left;
    padding: 1rem;
}
body.single div.internal.secao div.box span.txt {
    background-color: #015DAA;
    width: 100%;
    float: left;
    padding: 0.5rem 0;
    text-align: center;
    font-size: 0.7rem;
    color: white;
}
body.single div.internal.secao div.box span.texto {
    width: 100%;
    float: left;
    padding: 1.3rem 0;
    text-align: left;
    font-size: 1rem;
    color: white;
}
body.single span.name {
    width: 100%;
    float: left;
    text-align: center;
    margin-bottom: 0.5rem;
    color: white;
}
body.single svg.back {
    position: absolute;
    top: 0;
    left: 0.2rem;
    width: 2.4rem;
    color: white;
}
body.single div.internal.secao div.box .picture {
    background-color: black;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 100%;
    height: 15rem;
    float: left;
}

div.footer {
    background-color: #0095DA;
    width: 100%;
    height: 3.5625rem;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 0 1rem;
    padding-bottom: 0.2rem;
    align-items: flex-end;
    z-index: 3;
}
div.footer a {
    color: white;
    text-decoration: none;
    float: left;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0 1rem;
}
div.footer a img {
    height: 1.675rem;
}
div.footer a:where(:nth-child(3), :nth-child(4)) img {
    height: 1.1875rem;
}
div.footer a span.name {
    width: 100%;
    float: left;
    color: white;
    text-align: center;
    margin-top: 0.2rem;
}


body.postid-23,
body.postid-23 div.internal,
body.postid-23 div.internal.secao { background: #D3ADC8; }
body.postid-23 div.internal.secao div.box span.txt,
body.postid-23 div.internal span.title,
body.postid-23 div.movimento div.buttons a { background-color: #585570;color: white; }
body.postid-23 ul.list li,
body.postid-23 div.movimento span.title,
body.postid-23 div.autor span.title,
body.postid-23 div.internal span.text,
body.postid-23 div.internal.secao div.box {
    background-color: #A8518A;
    color: white;
}

body:is(.postid-22,.postid-97),
body:is(.postid-22,.postid-97) div.internal,
body:is(.postid-22,.postid-97) div.internal.secao {
    background: #EBB9AA;
}
body:is(.postid-22,.postid-97) div.movimento span.title,
body:is(.postid-22,.postid-97) div.internal span.title,
body:is(.postid-22,.postid-97) div.internal.secao div.box span.txt {
    background-color: #B04625;
}
body:is(.postid-22,.postid-97) div.movimento div.buttons a,
body:is(.postid-22,.postid-97) ul.list li,
body:is(.postid-22,.postid-97) div.autor span.title,
body:is(.postid-22,.postid-97) div.internal span.text,
body:is(.postid-22,.postid-97) div.internal.secao div.box {
    background-color: #CC502A;
    color: white;
}

body.postid-72,
body.postid-72 div.internal.secao { background: #FCDAD6; }
body.postid-72 div.movimento span.title,
body.postid-72 div.internal.secao div.box span.txt { background-color: #E5815D; }
body.postid-72 div.movimento div.buttons a,
body.postid-72 ul.list li,
body.postid-72 div.autor span.title,
body.postid-72 div.internal.secao div.box {
    background-color: #F6A297;
    color: white;
}


body.postid-78,
body.postid-78 div.internal.secao { background: #C0E5E9; }
body.postid-78 div.movimento span.title,
body.postid-78 div.internal.secao div.box span.txt { background-color: #51A8B1; }
body.postid-78 div.movimento div.buttons a,
body.postid-78 ul.list li,
body.postid-78 div.autor span.title,
body.postid-78 div.internal.secao div.box {
    background-color: #5CC6D0;
    color: white;
}


body.postid-84,
body.postid-84 div.internal.secao { background: #E9C2AF; }
body.postid-84 div.movimento span.title,
body.postid-84 div.internal.secao div.box span.txt { background-color: #943A26; }
body.postid-84 div.movimento div.buttons a,
body.postid-84 ul.list li,
body.postid-84 div.autor span.title,
body.postid-84 div.internal.secao div.box {
    background-color: #C66737;
    color: white;
}


body.postid-104,
body.postid-104 div.internal.secao { background: #E6D1A9; }
body.postid-104 div.movimento span.title,
body.postid-104 div.internal.secao div.box span.txt { background-color: #BF8B28; }
body.postid-104 div.movimento div.buttons a,
body.postid-104 ul.list li,
body.postid-104 div.autor span.title,
body.postid-104 div.internal.secao div.box {
    background-color: #B47530;
    color: white;
}

body.postid-24,
body.postid-24 div.internal,
body.postid-24 div.internal.secao { background: #FFD8A0; }
body.postid-24 div.internal.secao div.box span.txt,
body.postid-24 div.internal span.title,
body.postid-24 div.autor span.title,
body.postid-24 div.movimento div.buttons a { background-color: #E85D40;color: white; }
body.postid-24 ul.list li,
body.postid-24 div.movimento span.title,
body.postid-24 div.internal span.text,
body.postid-24 div.internal.secao div.box {
    background-color: #FF9D11;
    color: white;
}

span.text p {
    width: 100%;
    float: left;
    margin-bottom: 1rem;
}

section.login {
    width: 100%;
    float: left;
    text-align: center;
    color: white;
    padding: 2rem 0;
}
section.login svg {
    width: 3rem;
}
section.login h2 {
    font-size: 2rem;
}
section.login form {
    width: 100%;
    float: left;
    padding: 2rem;
}
section.login input {
    width: 100%;
    height: 3rem;
    border: 0;
    outline: 0;
    margin: 0.5rem 0;
    border-radius: 1rem;
    padding: 0 1rem;
}
section.login input:nth-last-of-type(2) {
    margin-bottom: 0;
}
section.login input:nth-last-of-type(1) {
    margin-top: 1rem;
}
section.login span.policy {
    background-color: #015daac2;
    padding: 1rem;
    text-align: center;
    width: 100%;
    float: left;
    margin: 1rem 0 0;
    border-radius: 1rem;
}
section.login span a {
    color: white;
}

.btn {
    width: 100%;
    height: 3rem;
    float: left;
    background-color: #0095DA;
    border-radius: 1rem;
    border: 0;
    outline: 0;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    margin-top: 1rem;
}
hr {
    margin: 1.5rem 0 0.5rem;
    float: left;
    width: 100%;
    opacity: 0.5;
}

select {
    width: 100%;
    float: left;
    height: 3rem;
    border: 0;
    outline: 0;
    margin: 0.5rem 0;
    border-radius: 1rem;
    padding: 0 1rem;
}
.select2-container--default .select2-selection--single {
    border-radius: 1rem;
    height: 3rem;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    text-align: left;
    padding: 0 1rem;
}
.select2-results__option {
    width: 100%;
    float: left;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 3rem;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    margin-left: -0.625rem;
    margin-top: 1.35rem;
}
.select2-container .select2-selection--single {
    margin-top: 1rem;
}
.select2-container {
    /* margin: 0.5rem 0 0; */
}

body:is(.single-movimento, .single-autor) div.footer {
    display: none !important;
}

section.login .text {
    width: 100%;
    float: left;
    padding: 2rem 3rem;
    margin: 2rem 0 1rem;
    text-align: left;
    background-color: #015DAA;
}
section.login .text p {
    margin: 1rem 0;
}
section.login .text .emoji {
    font-size: 5rem;
    margin-right: 1rem;
}
body.page-template-quiz section.login .text {
    display: flex;
    align-items: center;
    padding: 2rem;
}
body.page-template-quiz section.login .text.status {
    display: none;
}
body.page-template-quiz section.login .answers {
    width: 100%;
    float: left;
    text-align: left;
    padding: 0 1.5rem;
}
body.page-template-quiz section.login .answers .item {
    background-color: #0095DA;
    width: 100%;
    float: left;
    display: flex;
    align-items: stretch;
    margin: 0.5rem 0;
}
body.page-template-quiz section.login .answers .item.active {
    background-color: #3bac24;
}
body.page-template-quiz section.login .answers .item.error {
    background-color: #b11f1f;
}
body.page-template-quiz section.login .answers .item span.letter {
    background-color: rgba(255, 255, 255, 0.203);
    color: white;
    width: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.page-template-quiz section.login .answers .item span.answer {
    padding: 1rem;
}

body.page-template-ranking section.login h2 {
    margin-bottom: 2rem;
}
body.page-template-ranking section.login div.rank {
    width: calc(100% - 2rem);
    float: left;
    background-color: #003765e0;
    margin: 0.2rem 1rem;
    display: flex;
    padding: 0.5rem;
    align-items: center;
}
body.page-template-ranking section.login div.rank span.num {
    width: 5rem;
    height: 100%;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-right: 0.5rem;
}
body.page-template-ranking section.login div.rank:nth-child(1) span.num {
    color: #ffd700;
}
body.page-template-ranking section.login div.rank:nth-child(2) span.num {
    color: silver;
}
body.page-template-ranking section.login div.rank:nth-child(3) span.num {
    color: #bb5a24;
}
body.page-template-ranking section.login div.rank div.right {
    width: 100%;
    float: left;
    font-size: 1.2rem;
    text-align: left;
}