/*
Muito além da Black Friday 2020
*/

/* geral */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* scrollbar */

::-webkit-scrollbar {
    display: none;
}

/* smooth */

html {
    overflow-y: scroll;
    scroll-behavior: smooth;
}

/* main */

body {
    margin: 0;
    font-family: 'Proxima Nova', sans-serif;
    font-weight: 400;
    line-height: 1.8;
    color: #000; /* preto */
    font-style: normal;
    font-size: 1.15rem;
}

home,
image,
footer,
header,
main,
menu,
nav {
  display: block;
}

@media only screen and (max-width: 900px) {
    body {
        font-size: 1rem;
    }
}

/* fonts */

@font-face {
   font-family: 'Proxima Nova';
   src: url('https://s3.glbimg.com/v1/AUTH_e179b208e56946d3a19ef0cfac2dd20b/portal/static/estudo-music-trends/_fontes/Proxima-Nova-Regular.woff') format('woff');
   font-weight: 400;
   font-style: normal;
}

@font-face {
   font-family: 'Proxima Nova';
   src: url('https://s3.glbimg.com/v1/AUTH_e179b208e56946d3a19ef0cfac2dd20b/portal/static/estudo-music-trends/_fontes/Proxima-Nova-Bold.woff') format('woff');
   font-weight: 700;
   font-style: normal;
}

@font-face {
   font-family: 'Proxima Nova';
   src: url('https://s3.glbimg.com/v1/AUTH_e179b208e56946d3a19ef0cfac2dd20b/portal/static/estudo-music-trends/_fontes/Proxima-Nova-Black.woff') format('woff');
   font-weight: 900;
   font-style: normal;
}

@font-face {
   font-family: 'Nimbus';
   src: url('https://s3.glbimg.com/v1/AUTH_e179b208e56946d3a19ef0cfac2dd20b/portal/static/estudo-music-trends/_fontes/NimbusSanD-BlacRe.woff') format('woff');
   font-weight: 900;
   font-style: normal;
}

/* fonts sizes */
a {
    color: inherit;
    text-decoration: underline;
}

a:hover {
    color: #000;
    background-color: #fff;
    text-decoration: none;
}

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
    font-weight: 400;
    margin-bottom: 30px;
}

b, .b {
    font-weight: 700;
}

strong, .strong {
    font-weight: 900;
}

small, .small { opacity: .8; }

.up {
    text-transform: uppercase;
}

.nimbus {
    font-family: 'Nimbus';
}

@media only screen and (max-width: 900px) {
    h1, .h1 {
        font-size: 2rem;
    }
    
    h2, .h2 {
        font-size: 1.75rem;
    }
}

@media only screen and (max-width: 500px) {
    h1, h2, h3, .h1, .h2, .h3, .display-1, .display-2, .display-3, .display-4 {
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto; 
    }
    
    h1, .h1 {
        font-size: 1.5rem;
    }
    
    h2, .h2 {
        font-size: 1.25rem;
    }
    
    .display-1, .display-3, .display-2, .display-4 {
        font-size: 3rem;
    }
}

/* colors */

.branco {
    color: #fff;
}

.black {
    color: #000;
}

.orange {
    color: #fd754b;
}

.blue {
    color: #4fcfd8;
}

.yellow {
    color: #ffefbc;
}

.green {
    color: #5dc0a5;
}

.gold {
    color: #eabc36;
}

.ciano {
    color: #1d63d6;
}

.purple {
    color: #29296c;
}

.violeta {
    color: #99a1fe;
}

.pink {
    color: #f882a0;
}

.creme {
    color: #fece9f;
}

/* cores de fundo */

.bg-branco {
    background-color: #fff;
}

.bg-blue {
    background-color: #4fcfd8;
}

.bg-ciano {
    background-color: #1d63d6;
}

.bg-orange {
    background-color: #fd754b;
}

.bg-black {
    background-color: #000;
}

.bg-yellow {
    background-color: #ffefbc;
}

.bg-creme {
    background-color: #fece9f;
}

.bg-green {
    background-color: #5dc0a5;
}

.bg-gold {
    background-color: #eabc36;
}

.bg-purple {
    background-color: #29296c;
}

.bg-violeta {
    background-color: #99a1fe;
}

.bg-pink {
    background-color: #f882a0;
}

.bg-blue-black {
    background: rgb(90,207,242);
    background: -moz-linear-gradient(180deg, rgba(79,207,216,1) 20%, rgba(0,0,0,1) 80%);
    background: -webkit-linear-gradient(180deg, rgba(79,207,216,1) 20%, rgba(0,0,0,1) 80%);
    background: linear-gradient(180deg, rgba(79,207,216,1) 20%, rgba(0,0,0,1) 80%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#4fcfd8",endColorstr="#000000",GradientType=1);
}

.bg-ciano-purple {
    background: rgb(29,99,214);
    background: -moz-linear-gradient(180deg, rgba(29,99,214,1) 20%, rgba(41,41,108,1) 80%);
    background: -webkit-linear-gradient(180deg, rgba(29,99,214,1) 20%, rgba(41,41,108,1) 80%);
    background: linear-gradient(180deg, rgba(29,99,214,1) 20%, rgba(41,41,108,1) 80%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1d63d6",endColorstr="#29296c",GradientType=1);
}

.bg-black-purple {
    background: rgb(0, 0, 0);
    background: -moz-linear-gradient(180deg, rgba(0, 0, 0, 1) 20%, rgba(41,41,108,1) 80%);
    background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 1) 20%, rgba(41,41,108,1) 80%);
    background: linear-gradient(180deg, rgba(0, 0, 0, 1) 20%, rgba(41,41,108,1) 80%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#29296c",endColorstr="#000",GradientType=1);
}

.bg-purple-black {
    background: rgb(0, 0, 0);
    background: -moz-linear-gradient(180deg, rgba(41,41,108,1) 20%, rgba(0, 0, 0, 1) 80%);
    background: -webkit-linear-gradient(180deg, rgba(41,41,108,1) 20%, rgba(0, 0, 0, 1) 80%);
    background: linear-gradient(180deg, rgba(41,41,108,1) 20%, rgba(0, 0, 0, 1) 80%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000",endColorstr="#29296c",GradientType=1);
}

.bg-green-white {
    background: rgb(93,192,165);
    background: -moz-linear-gradient(120deg, rgba(93,192,165,1) 20%, rgba(255, 255, 255,1) 80%);
    background: -webkit-linear-gradient(120deg, rgba(93,192,165,1) 20%, rgba(255, 255, 255,1) 80%);
    background: linear-gradient(120deg, rgba(93,192,165,1) 20%, rgba(255, 255, 255,1) 80%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5dc0a5",endColorstr="#ffffff",GradientType=1);
}

.bg-pink-white {
    background: rgb(248,130,160);
    background: -moz-linear-gradient(240deg, rgba(248,130,160,1) 20%, rgba(255, 255, 255,1) 80%);
    background: -webkit-linear-gradient(240deg, rgba(248,130,160,1) 20%, rgba(255, 255, 255,1) 80%);
    background: linear-gradient(240deg, rgba(248,130,160,1) 20%, rgba(255, 255, 255,1) 80%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f882a0",endColorstr="#ffffff",GradientType=1);
}

.bg-borda {
    padding: .05rem .5rem .1rem;
    border: 1px solid #000;
    max-width: fit-content;
}

/* imagens de fundo */


/* alinhamentos */

.mobile, .tablet {
    display: none;
}

.desktop {
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
}

.display-none {
    display: none!important;
}

.p-relative {
    position: relative;
}

.p-absolute {
    position: absolute;
}

.w-80 {
    width: 80%;
}

.my-200 {
    margin-bottom: 200px;
    margin-top: 200px;
}

.mt-200 {
    margin-top: 200px;
}

.my-100 {
    margin-bottom: 100px;
    margin-top: 100px;
}

.mb-100 {
    margin-bottom: 100px;
}

.mt-100 {
    margin-top: 100px;
}

.my-60 {
    margin-bottom: 60px;
    margin-top: 60px;
}

.mb-60 {
    margin-bottom: 60px;
}

.mt-60 {
    margin-top: 60px;
}

.my-40 {
    margin-bottom: 40px;
    margin-top: 40px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mt-40 {
    margin-top: 40px;
}

.ml-40 {
    margin-left: 40px;
}

.mr-40 {
    margin-right: 40px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mt-20 {
    margin-top: 20px;
}

.mr-20 {
    margin-right: 20px;
}

.ml-20 {
    margin-left: 20px;
}

.ml-xd-auto {
    margin-left: auto;
}

.mt-md-40 {
    margin-top: 40px;
}

.mb-0 {
    margin-bottom: 0px;
}

.py-100 {
    padding-bottom: 100px;
    padding-top: 100px;
}

.py-60 {
    padding-bottom: 60px;
    padding-top: 60px;
}

.pt-40 {
    padding-top: 40px;
}

.px-40 {
    padding-left: 40px;
    padding-right: 40px;
}

.pt-20 {
    padding-top: 20px;
}

.o-30 {
    opacity: .3;
}

@media only screen and (min-width: 1950px) {
    .justify-xd-center {
        justify-content: center;
        -ms-flex-pack: center;
    }
    
    .mt-xd-100 {
        margin-top: -100px;
    }
    
    .ml-xd-0 {
        margin-left: unset!important;
    }
}

@media only screen and (max-width: 900px) {
    
    .mt-md-60 {
        margin-top: 60px;
    }
    
    .mb-md-60 {
        margin-bottom: 60px;
    }
    
    .mb-md-40 {
        margin-bottom: 40px;
    }
    
    .mt-md-40 {
        margin-top: 40px;
    }
    
    .desktop {
        display: none;
    }
    
    .tablet {
        display: flex;
        display: -ms-flexbox;
        display: -webkit-flex;
    }
    
    .w-md-80 {
        max-width: 80%;
    }
    
    .my-200 {
        margin-top: 100px;
        margin-bottom: 100px;
    }
    
    .mt-200 {
        margin-top: 100px;
    }
    
    .my-100 {
        margin-top: 80px;
        margin-bottom: 80px;
    }
    
    .mt-100 {
        margin-top: 80px;
    }
    
    .mb-100 {
        margin-bottom: 80px;
    }
    
}

@media only screen and (max-width: 500px) {
    
    .tablet {
        display: none;
    }
    
    .mobile {
        display: flex;
        display: -ms-flexbox;
        display: -webkit-flex;
    }
    
    .mb-sm-40 {
        margin-bottom: 40px;
    }
    
    .mt-sm-20 {
        margin-top: 20px;
    }
    
    .w-sm-100 {
        max-width: 100%;
    }
    
    .my-200 {
        margin-top: 80px;
        margin-bottom: 80px;
    }
    
    .mt-200 {
        margin-top: 80px;
    }
    
    .my-100 {
        margin-top: 60px;
        margin-bottom: 60px;
    }
    
    .mt-100 {
        margin-top: 60px;
    }
    
    .mb-100 {
        margin-bottom: 60px;
    }
    
    .ml-xd-auto {
        margin-left: unset;
    }
}

/* estruturas */

.quadrado {
    width: fit-content;
    padding: .05rem .5rem .1rem;
    border: 1px solid #000;
    box-shadow: 7px 7px 0px 2px #fff;
}

.bxs-down {
    box-shadow: 7px 7px 0px 2px #fff;
}

.bxs-up {
    box-shadow: 7px -7px 0px 2px #fff;
}

.bxp-down {
    box-shadow: 7px 7px 0px 2px #29296c;
}

.bxv-down {
    box-shadow: 7px 7px 0px 2px #99a1fe;
}

.txt-down {
    text-shadow: 2px 2px 0px #000;
}

.barra {
    content: '';
    height: 45px;
    width: 100%;
    display: block;
    background-color: inherit;
    margin-right: 20px;
}

.box-bolota {
    position: relative;
    height: 75px;
    width: 75px;
    padding-top: 15px;
}

.box {
    padding: 20px;
    border: 1px solid #000;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.bolota {
    content: '';
    height: 200px;
    width: 200px;
    border-radius: 50%;
    display: block;
    position: absolute;
    background-color: #fff;
    border: 1px solid #1d63d6;
}

.bolotinha {
    content: '';
    height: 50px;
    width: 50px;
    border-radius: 50%;
    display: block;
    position: absolute;
    border: 1px solid #1d63d6;
}

.b-black {
    border: 1px solid #000;
}

.b-white {
    border: 1px solid #fff;
}

.b-purple {
    border: 1px solid #29296c;
}

.b-blue {
    border: 1px solid #4fcfd8;
}

.b-redonda {
    padding: 0px 0px 0px 60px;
    border-radius: 100px;
    width: 100%;
}

.b-redonda-l {
    padding: 0px 60px 0px 0px;
    border-radius: 100px;
    width: 100%;
}

.bg-bola {
    height: 400px;
    width: 400px;
    border-radius: 200px;
    padding-top: 20%;
}

.l-250 {
    left: -250px;
}

.l-0 {
    left: 0;
}

.b-100 {
    bottom: 100px;
}

.b-0 {
    bottom: 0;
}

.t-250 {
    top: -250px;
}

.t-0 {
    top: 0;
}

.r-250 {
    right: -250px;
}

.r-100 {
    right: -100px;
}

.r-0 {
    right: 0px;
}

@media only screen and (max-width: 900px) {

}

@media only screen and (max-width: 500px) { 

}

/* conteúdo */
#main {
    position: relative;
    height: auto;
    margin: 0;
    overflow: hidden;
}

#main > .row {
    padding-top: 120px;
    padding-bottom: 120px;
}

#main #menu {
    padding-bottom: 0;
    padding-top: 0;
}

#menu a {
    text-decoration: none;
    line-height: 1;
}

#menu a div {
    width: fit-content;
    margin: auto;
    padding: .5rem .75rem;
    border: 1px solid transparent;
}

#menu a:hover div {
    background-color: #fff;
    border-color: #000;
    box-shadow: 7px 7px 0px 2px #fff;
}

.ghost {
    position: absolute;
    top: -100px;
    right: -30%;
}

#e-indiv.row, #e-colet.row {
    padding-top: 0;
}

.esfera-link, .esfera-link:hover {
    text-decoration: none;
    cursor: pointer;
}

@media only screen and (max-width: 900px) {
    #main > .row {
        padding-top: 100px;
        padding-bottom: 100px;
    }
}

@media only screen and (max-width: 500px) {
    #main > .row {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    
    .ghost {
        width: 200px;
    }
    
    .grafico h1 {
        font-size: 20px;
    }
    
    .b-redonda, .b-redonda-l {
        padding: 0px 40px 20px;
    }
    
    .b-redonda .p-relative, .b-redonda-l .p-relative {
        display: none;
    }
    
    .box-festa {
        margin-left: 15px;
        margin-right: 15px;
    }
    
    .box-festa .col-12 {
        padding-left: 0;
        padding-right: 0;
    }
    
    .bg-bola {
        height: 300px;
        width: 300px;
        padding-top: 20%!important;
    }
}