: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'); */

@font-face {
    font-family: "Big Shoulders Display";
    src: url("../fonts/BigShouldersDisplay-Bold.ttf") format("ttf"), 
    url("../fonts/BigShouldersDisplay-Regular.ttf") format("ttf");
}

.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;
}

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: 1.25rem 1.25rem 0;
}

.container {
    background: var(--gray-light);
    line-height: 130%
}

.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-position-y: bottom;
    background-repeat: no-repeat;
    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)
    }
}

.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; */
    max-width: 30rem;
    min-width: 15rem;
    width: 100%;
}

.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__bncc-comp .header__cc {
    animation: AnimationName 11s ease infinite;
    background: var(--theme-comp-gradient);
    background-size: 400% 400%
}

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

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

.theme__bncc-comp a :hover {
    text-decoration: underline
}

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

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

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

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

.card__container {
    width: 100%;
}
.card__container img {
    width: 100%;
    max-width: 16rem;
}

.text__copyright a {
    color: var(--white);
    text-decoration: underline;
}

body {
    height: 100vh;
}