:root {
    --white: #fff;
    --gray-light: #F3F3F3;
    --gray-dark: #0c0c0c;
    --theme-comp-one: #7343C7;
    --theme-comp-two: #E96519;
    --theme-comp-three: #94C11F;
    --theme-comp-gradient: linear-gradient(270deg, var(--theme-comp-one), var(--theme-comp-two), var(--theme-comp-three));
}

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

.roboto-regular {
    font-family: "Roboto", system-ui;
    font-weight: 400;
    font-style: normal;
}

.roboto-bold {
    font-family: "Roboto", system-ui;
    font-weight: 700;
    font-style: normal;
}

.roboto-regular-italic {
    font-family: "Roboto", system-ui;
    font-weight: 400;
    font-style: italic;
}

.roboto-bold-italic {
    font-family: "Roboto", system-ui;
    font-weight: 700;
    font-style: italic;
}

.roboto-black-italic {
    font-family: "Roboto", system-ui;
    font-weight: 900;
    font-style: italic;
}

.big-shoulders-display-regular {
    font-family: "Big Shoulders Display", system-ui;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

* {
    font-family: "Roboto", system-ui;
    font-weight: 400;
    font-style: normal;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

/* html,
body {
height: 100%;
} */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Big Shoulders Display", system-ui;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

h1 {
    color: var(--white)
}

header h1 {
    align-self: center;
    margin: 0 auto;
}

.header__cc:before {
    content: none;
    margin-left: none;
    opacity: none;
    position: none;
    width: none
}

@media screen and (max-width:1024px) {
    .header__cc:before {
        margin-left: none
    }
}

@media screen and (max-width:760px) {
    .header__cc:before {
        margin-left: none
    }
}

@media screen and (max-width:562px) {
    .header__cc:before {
        margin-left: none
    }
}

.header__cc___content {
    align-items: center;
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: center;
}

.header__cc___content h1 {
    margin-bottom: 2rem;
}

.header__cc___content p {
    font-family: "Big Shoulders Display", system-ui;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
    display: flex;
    margin-bottom: 0.3rem;
    text-align: center;
}

main p {
    padding: 20px 20px 0;
}

.container {
    background: var(--gray-light);
}

.container__content div.cards div.card {
    border-width: 0;
}
@media screen and (min-width:0px) {
    .container.template__video .header__cc___content {
        background-size: auto
    }
}

@media screen and (min-width:761px) {
    .container.template__video .header__cc___content {
        background-size: auto
    }
}

.container.template__video .header__cc___content {
    /* background-image: none; */
    /* background-position-x: 8%; */
    background-image: url(../image/smartphone-hands.png);
    background-position-x: 50%;
    background-position-y: bottom;
    background-repeat: no-repeat;
    /* background-size: 8rem; */
    mix-blend-mode: lighten;
}
@media screen and (min-width:420px) {
    .container.template__video .header__cc___content {
        background-image: url(../image/smartphone-hands.png);
    }
}
@media screen and (min-width:960px) {
    .container.template__video .header__cc___content {
        /* background-position-x: calc(50% - 26rem) */
        background-position-x: 50%
    }
}

.container.template__video .container__content div.cards div.card {
    background: var(--white);
    box-shadow: 0px 0px 9px 1px rgba(0,0,0,0.24);
    -webkit-box-shadow: 0px 0px 9px 1px rgba(0,0,0,0.24);
    -moz-box-shadow: 0px 0px 9px 1px rgba(0,0,0,0.24);
    max-width: 45rem;
}

.logo-aprende-brasil-educacao_footer {
    align-items: center;
    display: flex;
    justify-content: center;
    margin: auto;
    max-width: 12rem;
    padding: 3% 0 2%;
    width: 100%;
}

.theme__edf .header__cc {
    animation: AnimationName 11s ease infinite;
    background: var(--theme-comp-gradient);
    background-size: 400% 400%
}

.theme__edf button.on-off {
    background: var(--theme-comp-one);
    border-color: var(--theme-comp-one)
}

.theme__edf a,
.theme__edf figcaption {
    color: var(--theme-comp-one)
}

.theme__edf a :hover {
    text-decoration: underline
}

.theme__edf .copyright {
    background: var(--theme-comp-one)
}

.theme__edf .container__content main div.card {
    border-color: var(--theme-comp-one)
}

.theme__edf .btn {
    background: var(--theme-comp-one)
}

.theme__ing .header__cc {
    animation: AnimationName 11s ease infinite;
    background: var(--theme-comp-gradient);
    background-size: 400% 400%
}

.theme__ing button.on-off {
    background: var(--theme-comp-one);
    border-color: var(--theme-comp-one)
}

.theme__ing a,
.theme__ing figcaption {
    color: var(--theme-comp-one)
}

.theme__ing a :hover {
    text-decoration: underline
}

.theme__ing .copyright {
    background: var(--theme-comp-one)
}

.theme__ing .container__content main div.card {
    border-color: var(--theme-comp-one)
}

.theme__ing .btn {
    background: var(--theme-comp-one)
}

.theme__art .header__cc {
    animation: AnimationName 11s ease infinite;
    background: var(--theme-comp-gradient);
    background-size: 400% 400%
}

.theme__art button.on-off {
    background: var(--theme-comp-one);
    border-color: var(--theme-comp-one)
}

.theme__art a,
.theme__art figcaption {
    color: var(--theme-comp-one)
}

.theme__art a :hover {
    text-decoration: underline
}

.theme__art .copyright {
    background: var(--theme-comp-one)
}

.theme__art .container__content main div.card {
    border-color: var(--theme-comp-one)
}

.theme__art .btn {
    background: var(--theme-comp-one)
}

.theme__geo .header__cc {
    animation: AnimationName 11s ease infinite;
    background: var(--theme-comp-gradient);
    background-size: 400% 400%
}

.theme__geo button.on-off {
    background: var(--theme-comp-one);
    border-color: var(--theme-comp-one)
}

.theme__geo a,
.theme__geo figcaption {
    color: var(--theme-comp-one)
}

.theme__geo a :hover {
    text-decoration: underline
}

.theme__geo .copyright {
    background: var(--theme-comp-one)
}

.theme__geo .container__content main div.card {
    border-color: var(--theme-comp-one)
}

.theme__geo .btn {
    background: var(--theme-comp-one)
}

.theme__his .header__cc {
    animation: AnimationName 11s ease infinite;
    background: var(--theme-comp-gradient);
    background-size: 400% 400%
}

.theme__his button.on-off {
    background: var(--theme-comp-one);
    border-color: var(--theme-comp-one)
}

.theme__his a,
.theme__his figcaption {
    color: var(--theme-comp-one)
}

.theme__his a :hover {
    text-decoration: underline
}

.theme__his .copyright {
    background: var(--theme-comp-one)
}

.theme__his .container__content main div.card {
    border-color: var(--theme-comp-one)
}

.theme__his .btn {
    background: var(--theme-comp-one)
}

.theme__cie .header__cc {
    animation: AnimationName 11s ease infinite;
    background: var(--theme-comp-gradient);
    background-size: 400% 400%
}

.theme__cie button.on-off {
    background: var(--theme-comp-one);
    border-color: var(--theme-comp-one)
}

.theme__cie a,
.theme__cie figcaption {
    color: var(--theme-comp-one)
}

.theme__cie a :hover {
    text-decoration: underline
}

.theme__cie .copyright {
    background: var(--theme-comp-one)
}

.theme__cie .container__content main div.card {
    border-color: var(--theme-comp-one)
}

.theme__cie .btn {
    background: var(--theme-comp-one)
}

.theme__mat .header__cc {
    animation: AnimationName 11s ease infinite;
    background: var(--theme-comp-gradient);
    background-size: 400% 400%
}

.theme__mat button.on-off {
    background: var(--theme-comp-one);
    border-color: var(--theme-comp-one)
}

.theme__mat a,
.theme__mat figcaption {
    color: var(--theme-comp-one)
}

.theme__mat a :hover {
    text-decoration: underline
}

.theme__mat .copyright {
    background: var(--theme-comp-one)
}

.theme__mat .container__content main div.card {
    border-color: var(--theme-comp-one)
}

.theme__mat .btn {
    background: var(--theme-comp-one)
}

.theme__por .header__cc {
    animation: AnimationName 11s ease infinite;
    background: var(--theme-comp-gradient);
    background-size: 400% 400%
}

@keyframes AnimationName {
    0% {
        background-position: 0 50%
    }
    
    50% {
        background-position: 100% 50%
    }
    
    to {
        background-position: 0 50%
    }
}

.theme__por button.on-off {
    background: var(--theme-comp-one);
    border-color: var(--theme-comp-one)
}

.theme__por a,
.theme__por figcaption {
    color: var(--theme-comp-one)
}

.theme__por a :hover {
    text-decoration: underline
}

.theme__por .copyright {
    background: var(--theme-comp-one)
}

.theme__por .container__content main div.card {
    border-color: var(--theme-comp-one)
}

.theme__por .btn {
    background: var(--theme-comp-one)
}

div.card  {
    border-color: white !important;
}

.container__content {
    max-width: 100%;
}

.container.template__video .container__content div.cards div.card {
    background: none;
    max-width: 100%;
    box-shadow: none;
    -moz-box-shadow: none;
}

.content-tl {
    background-color: var(--white);
}

.theme__por .timeline::after {
    background-color: var(--theme-comp-one);
}

.theme__por .container-tl::after {
    border-color: var(--theme-comp-one);
}

.content-tl {
    box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.24);
    -webkit-box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.24);
    -moz-box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.24);
}

@media (max-width: 420px) {
    .content-tl {
        padding: 3%;
    }
}

.content-tl img {
    cursor: pointer;
}

.content-tl img {
    max-width: 26rem;
}

.swal2-html-container img {
    max-width: 100%;
}