@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,700,900');

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
}

li, ul {
    list-style-type: none;
}

a {
    color: red;
}

a, li, ul {
    text-decoration: none;
}

body {
    background-color: #fff;
    color: #fff;
    margin: 0;
    font-family: "Roboto", sans-serif;
    font-family: 'Montserrat', sans-serif;
    min-width: 320px;
}

.top_featured {
    height: 100vh;
    background: #8B0000;
    background: white;
}

.featured {
    height: 100vh;
}

.featured--vertical {
    width: inherit;
    height: inherit;
    background: linear-gradient(0deg, black 0%, transparent 70%);
    /*   border-bottom: .5rem solid red; */
}

.featured--horizontal {
    width: 100%;
    height: inherit;
    background: linear-gradient(15deg, black 0%, transparent 70%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 	padding-left: 30px; */
    padding-bottom: 150px;
    padding-top: 70px
}

.coin {
    margin: 0.5rem 0;
    margin-right: .5rem;
}

.skyline {
    bottom: -2px;
    position: absolute;
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
}

.city--adjust {
    bottom: -1px;
    position: inherit;
}

.skyline--mobile {
    bottom: -200px;
}

.value--coin {
    font-weight: bolder;
    /*font-size: 4rem;*/
}

.call--conversor {
    font-weight: bolder;
    font-size: 1rem;
}

.title_move {
    position: fixed;
    z-index: 0;
    top: 200px;
    left: 0;
    right: 0;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 30px;
    background: transparent;
    transition: all .5s ease;
    width:100%;
    font-family: 'Montserrat', sans-serif;
    font-size: 3em;
    flex-direction: column;
    text-align: center;
}

.title--horizon {
    top: 100px;
}

.change--title {
    /*background-color: red;*/
    display: none;
    /*z-index: 99999990;*/
}

.arrownDown {
    position: fixed;
    position: relative;
    z-index: 0;
    /*top: 260px;*/
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 30px;
    background: transparent;
    transition: all .5s ease;
    width:100%;
    visibility: visible;
    opacity: 1;
    /*transition: all 1s ease;*/
    font-size: 3rem;
    cursor: pointer;
}

.arrownDown--hidden {
    visibility: hidden;
    opacity: 0;
}

.arrow:hover {
    transform: translateY(15px);
    color: red;
    font-size: 6rem;
}

.quotation {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    top: -30px;
    visibility: hidden;
    opacity: 0;
    transition: all 1s ease;
    text-align: center;
}

.quotation--show {
    visibility: visible;
    opacity: 1;
}

.quotation h2{
    margin-bottom: 0.5rem;
    color: red;
    font-size: 2rem;
}

.quotation fieldset {
    border: none;
    width: 90%;
    margin: auto;
}

.input-container input,
.input-container .label_email {
    width: 270px;
}

.input-container {
    float: left;
    position: relative;
    /*width: 100%;*/
}

.input-container:nth-child(2) {
    float: right;
}

.input-container input {
    border: 0;
    border-bottom: 2px solid red;
    outline: none;
    transition: .2s ease-in-out;
    box-sizing: border-box;
    background-color: transparent;
    color: black;
    font-weight: bolder;
    text-align: center;
}

.label_email {
    top: 0;
    left: 0; right: 0;
    color: red;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    position: absolute;
    font-size: 0.8rem;
    font-weight: bolder;
    cursor: text;
    transition: .2s ease-in-out;
    box-sizing: border-box;
}

.input-container input,
.input-container .label_email {
    width: 200px;
    height: 2.5rem;
    font-size: 1rem;
}

.input-container .label_email {
    height: 3.5rem;
    font-size: 1rem;
}

/* Interation */
.input-container input:valid,
.input-container input:focus {
    padding-top: 20px;
    border-bottom: 2px solid black;
}

.input-container input:valid + .label_email,
.input-container input:focus + .label_email {
    color: black;
    text-transform: uppercase;
    font-size: .8rem;
    top: -20px;
    pointer-events: none;
}

.box__script {
    color: red;
    border-radius: 5px;
    border: 1px solid red;
    font-size: small;
    padding: 1em;
    max-width: 500px;
    /*word-wrap: break-word;*/
}

.box__script:hover {
    color: white;
    background-color: red;
    /*font-weight: bold;*/
}

.box__script:active {
    color: red;
    background-color: white;
}

header {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    background: transparent;
    transition: all .5s ease
}

header.color {
    /*background: linear-gradient(to right, #c5131c 50%, #622d36 100%);*/
    /*opacity: 0.8;*/
    background-color: rgba(243, 6, 6, 0.8);
}

.header--logo {
    /*height: 25px*/
}

.header--logo img {
    height: 100%
}

.header--user {
    height: 35px
}

.header--user img {
    height: 100%;
    border-radius: 3px
}

.logo_img {
    width: 200px;
    height: 40px;
    cursor: pointer;
}

.logo_canada {
    width: 200px;
    height: 60px;
    cursor: pointer;
}

/*LOGO COLORS*/

.new--hover--color,
.logo_simples,
.logo_bars {fill: whitesmoke; }

.logo_coisa,
.logo_circle { fill: white;}

.logo_shadownUp { fill: #787474;}
.logo_shadownDown { fill: #413e3e;}

.logo_simples:hover,
.logo_bars:hover { fill: red; }



.new--hover--color:hover {
    fill: #fa8484;
}

.mapple {
    fill: red;
}

.mapple--test {
    fill: darkred;
}

.mapple--softred {
    fill: #fa8484;
}

.mapple--white {
    fill: whitesmoke;
}

.page_topic {
    background-color: rgba(243, 6, 6, 0.8);
    width: 100%;
    height: 10em;
    /*margin-top: -1em;*/
    margin-bottom: 2em;
    display: flex;
    align-items: center;
    padding: 3.5em 2em 0em 2em;
}

/* CONTENT */

.banner--loja {
    margin: auto auto;
    text-align: center;
}

.banner600 {
    margin: auto auto;
}

.banner300 {
    display: none;
}

.publ--box {
    background: red;
    width: 90%;
    max-width: 700px;
    margin: auto;
    padding: 0em 1em 1em 1em;
    transition: all 2s;
}

.publ--box:hover {
    background: darkred;
}

.publ--box a {
    color: white;
}

.publ--box h3 {
    font-size: 1.4em;
    border-left: 7px solid white;
    padding-left: .7em;
    margin-bottom: 0;
}

.publ--box p {
    font-size: small;
}

.publ--box button {
    width: 150px;
    border: none;
    background: white;
    font-size: 0.7em;
    text-transform: uppercase;
    color: darkred;
    font-weight: bolder;
    text-align: center;
    padding: .5em 2em;
    transition: all 2s;
    cursor: pointer;
}

.publ--box button:hover {
    width: 100%;
    text-align: right;
    background: darkred;
}

.publ--box button {
    width: 180px;
    border: 0.5px solid white;
    background: red;
    font-size: 0.7em;
    text-transform: uppercase;
    color: white;
    font-weight: bolder;
    text-align: center;
    padding: .5em 2em;
    transition: all 2s;
    cursor: pointer;
}

.publ--box button:hover {
    width: 100%;
    border: 0.5px solid darkred;
    text-align: right;
    background: white;
    color: darkred;
}

.main_info {
    width: 100%;
    max-width: 1000px;
    margin: auto;
    justify-content: center;
    /*min-width: 375px;*/
    order: 1;
    align-self: flex-start
}

.inform_content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.box_inform {
    display: block;
    /*background-color: pink;*/
    width: 90%;
    margin: 1rem auto;
    /*mudar para apartir de certa largura adicionar rolagem*/
    /*overflow-x: auto;*/
}

.box_inform_space {
    padding-left: 2.5em;
}

.box_inform ul {
    word-break: break-word;
}

.title_inform {
    display: inline-flex;
    align-items: center;
    width: 100%;
    margin: 0;
}

.title_inform i {
    font-size: 3rem;
    /*color: white;*/
}

.title_inform h1 {
    margin: 0;
    margin-bottom: 10px;
    heigth: 100%;
}

/* FOOTER */
.arrownDownFooter {
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 30px;
    clip-path: polygon(0% 0%, 20% 100%, 100% 0, 100% 100%, 0% 100%);
}

.main_footer {
    padding: 20px;
}

.gradient-primary {
    background: red;
}

.footer_home,
.footer_logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer_logo img {
    max-width: 100%;
    /*margin-top: 10%;*/
}
/*copia*/


.footer_contact {
    margin-bottom: 1rem;
    padding: 1rem;
    border-bottom: 1px solid;
    border-color: whitesmoke;
    opacity: 50%;
    display: flex;
    justify-content: space-evenly;
    width: 100%;

    /*test-flex*/
    flex-flow: row wrap;
    justify-content: space-around;
    padding: 0;
    margin: 0;
}

.footer_contact div {
    width: 25%;
    min-width: 150px;
}

.footer_home,
.footer_social,
.footer_main_menu,
.footer_section_menu{
    padding: 1rem;
}

.footer_social,
.footer_main_menu,
.footer_section_menu{
    /*border-left: 1px solid whitesmoke;*/
    padding-left: 2rem;
}

.footer_box {
    background: tomato;
    width: 200px;
}

.footer_logo {
    width: 70% !important;
    max-width: 217px !important;
    margin: auto
}

.footer_social ul,
.footer_main_menu ul {
    padding-left: 0;
}

.footer_social li i {
    padding-right: 0.5rem;
}

.footer_contact a {
    color: whitesmoke;
    text-decoration: none;
    /*text-transform: uppercase;*/
    font-weight: bolder;
    font-size: small;
}

.footer_contact h2 {
    white-space: nowrap;
    text-transform: uppercase;
    font-size: medium;
    border-bottom: 2px dotted whitesmoke;
    width: fit-content;
    margin-bottom: 0.5rem;
    padding-bottom: 0.2rem;
}

.footer_descr{
    text-align: center;
    color: whitesmoke;
    opacity: 50%;
    font-size: small
}


/*TEXT COLORS*/

.text-primary {
    /*color: var(--palette-primary) !important;*/
    color: red;
}

.text-dark-gray {
    /*color: var(--palette-dark-gray) !important;*/
    color: black;
}

/*ADSBOARD SECTION*/

    /*.adsBoard {*/
    /*    position: relative;*/
    /*    width: 800px;*/
    /*    display: flex;*/
    /*    margin: 0 auto;*/
    /*    top: -80px;*/
    /*    border-bottom: .5rem solid #800000;*/
    /*}*/

    /*.adsBoard a {*/
    /*    width: 25%;*/
    /*    text-decoration: none;*/
    /*    color: white;*/
    /*}*/

    /*.adsBoard a > div {*/
    /*    display: flex;*/
    /*    flex-direction: column;*/
    /*    justify-content: center;*/
    /*    align-items: center;*/
    /*    width: 100%;*/
    /*    width: 96%;*/
    /*    border-radius: .5rem;*/
    /*    height: 120px;*/
    /*    background: #800000;*/
    /*    text-align: center;*/
    /*}*/

    /*.adsBoard a:nth-child(1) > div {*/
    /*    background: #800000;*/
    /*    background: #000080;*/
    /*}*/

    /*.adsBoard a:nth-child(2) > div {*/
    /*    background: #b30000;*/
    /*    background: #9999ff;*/
    /*}*/

    /*.adsBoard a:nth-child(3) > div {*/
    /*    background: red;*/
    /*    background: #ffcc00;*/
    /*}*/

    /*.adsBoard a:nth-child(4) > div {*/
    /*    background: #ff3333;*/
    /*    background: #ff3333;*/
    /*}*/


@media (max-width:700px) {
    .quotation {
        visibility: visible;
        opacity: 1;
    }
}

@media (max-width:760px) {
    .featured {
        height: 100vh
    }
}

@media (max-width:690px) {

    .footer_home,
    .footer_social,
    .footer_main_menu,
    .footer_section_menu{
        padding: 0.5rem;
        padding-left: 0rem;
        padding-right: 0rem;
        min-width: 50vw;
        min-width: 300px;
    }

    .footer_social,
    .footer_main_menu,
    .footer_section_menu{
        padding-left: 1rem;
    }

    .footer_contact {
        padding-right: 0rem;
        padding-left: 0rem;
    }
}

@media (max-width:620px) {
    .banner600 {
        display: none;
    }

    .banner300 {
        margin: auto auto;
        display: flex;
    }
}

@media (max-width:510px) {
    .quotation fieldset {
        display: flex;
        flex-direction: column;
    }

    .input-container {
        padding-bottom: 0.7rem;
    }

    .input-container input {
        width: 100%;
    }

    .logo_canada {
        width: 100px;
        height: 40px;
        cursor: pointer;
    }
}

@media (max-width: 360px) {
    .box_inform_space {
        padding-left: 0.3em;
    }
}