/*
Imigrantes digitais
*/

/* geral */

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

/* scrollbar */

::-webkit-scrollbar {
    width: 10px;
    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: #180032; /* roxo */
    background-color: transparent;
    font-style: normal;
}

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

/* fonts */

@font-face {
   font-family: 'Proxima Nova';
   src: url('https://s3.glbimg.com/v1/AUTH_e179b208e56946d3a19ef0cfac2dd20b/portal/static/imigrantes-digitais/assets/_fonte/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/imigrantes-digitais/assets/_fonte/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/imigrantes-digitais/assets/_fonte/Proxima-Nova-Black.woff') format('woff');
   font-weight: 900;
   font-style: normal;
}

/* fonts sizes */
a {
    color: #b818f6;
    text-decoration: none; 
}

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

.bg a, #banner a {
    color: #51fffe;
}

.bg a:hover, #banner a:hover {
    color: #180032;
    background-color: #51fffe;
}

.gente-link a:hover {
    background-color: transparent;
}

strong {
    font-weight: 700;
}

.font-black { font-weight: 900; }

.font-light { font-weight: 400; }

.font-big {
    font-size: 5rem;
}

.uppercase {
    text-transform: uppercase;
}

mark {
    background-color: #51fffe;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans', sans-serif;
    margin-bottom: 30px;
    margin-top: 60px;
}

.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Open Sans', sans-serif;
}

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

/* colors */

.azul {
    color: #51fff3!important;
}

.rosa {
    color: #b818f6!important;
}

.violeta {
    color: #4a119e!important;
}

.roxo {
    color: #180032!important;
}

.branco {
    color: #fff!important;
}

/* cores de fundo */

.bg {
    margin-left: -15px;
    margin-right: -15px;
}

.bg-gradiente {
    background: rgb(24,0,50);
    background: linear-gradient(45deg, rgba(24,0,50,1) 0%, rgba(74,17,158,1) 33%, rgba(184,24,246,1) 66%, rgba(81,255,254,1) 100%);
}

.bg-ondas-full {
    background-image: url(../images/bg-ondas-full.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-ondas-right {
    background-image: url(../images/bg-ondas-right.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.bg-ondas-left {
    background-image: url(../images/bg-ondas-left.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

@media only screen and (max-width: 500px) {
    .bg-ondas-right {
        background-position: left;
    }
    
    .bg-ondas-left {
        background-position: right;
    }
}

/* divisores */

.divisor {
    content: '';
    display: block;
    position: relative;
    margin: 40px auto;
    width: 100%;
    height: 80px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.divisor-rosa {
    background-image: url(../images/divisor-rosa.svg);
}

.divisor-azul {
    background-image: url(../images/divisor-azul.svg);
}

/* botões */

.btn {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    color: inherit;
}

.btn:focus {
    box-shadow: none; 
}

.btn-outline-roxo {
    background-color: transparent;
    color: #180032;
    border: 1p solid #180032;
}

.btn-outline-roxo:hover {
    color: #fff;
    background-color: #180032;
}

.btn-outline-branco {
    background-color: transparent;
    color: #fff;
    border: 1p solid #fff;
}

.btn-outline-branco:hover {
    color: #180032;
    background-color: #fff;
}

/* alinhamentos */

.mobile {
    display: none;
}

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

.position-relative {
    position: relative!important;
}

.text-align-center {
    text-align: center!important;
}

.text-align-right {
    text-align: right!important;
}

.text-align-left {
    text-align: left!important;
}

.margin-bottom {
    margin-bottom: 5%;
}

.margin-bottom-bottom {
    margin-bottom: 10%;
}

.margin-top {
    margin-top: 5%;
}

.margin-top-top {
    margin-top: 10%;
}

.padding-bottom {
    padding-bottom: 5%;
}

.padding-top {
    padding-top: 5%;
}

.padding-top-top {
    padding-top: 10%;
}

.justify-flex-end {
    justify-content: flex-end!important;
}

@media only screen and (max-width: 2600px) and (min-width: 1900px) {
    .padding-top-top {
        padding-top: 5%;
    }
    
    .margin-bottom-bottom {
        margin-bottom: 5%;
    }
}

@media only screen and (max-width: 900px) {
    .padding-top {
        padding-top: 10%;
    }
}

@media only screen and (max-width: 500px) {
    .margin-top {
        margin-top: 10%;
    }
    
    .margin-top-top {
        margin-top: 20%;
    }
    
    .margin-bottom {
        margin-bottom: 10%;
    }
    
    .margin-bottom-bottom {
        margin-bottom: 20%;
    }
    
    .padding-bottom {
        padding-bottom: 10%;
    }

    .padding-top {
        padding-top: 15%;
    }
    
    .padding-top-top {
        padding-top: 20%;
    }
    
    .desktop {
        display: none;
    }
    
    .mobile {
        display: block;
    }
}

/* estruturas */
.destacado {
    margin: 60px auto;
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
    padding: 20px 150px;
}

.bg .destacado {
    padding: 40px;
}

.destacado h1 {
    margin-bottom: 0;
    margin-top: 0;
    font-weight: 700;
}

.destacado p {
    font-weight: 700;
}

.destacado small {
    background-color: #180032;
    color: #fff;
}

.card {
    background-color: transparent;
    border: 2px solid #180032;
    margin: 60px auto;
}

.card-rosa {
    border-color: #b818f6;
}

.card-branco {
    border-color: #fff;
}

.card-azul {
    border-color: #51fffe;
}

.card-violeta {
    border-color: #4a119e;
}

.card-body {
    padding: 2rem;
}

.image-box {
    margin: 60px auto;
}

@media only screen and (max-width: 900px) {
    .destacado {
        padding: 20px;
    }
}

/* menu */
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background-color: #b818f6;
}

.progress {
    background-color: #f8f9fa;
}

.progress-bar {
    background-color: #b818f6;
}

/* conteúdo */
#main {
    position: relative;
    height: auto;
    overflow-y: scroll;
}

#banner {
    padding-top: 5%;
    height: 100vh;
}

#resumo, #nativos, #educar, #comportamento, #mudanca, #conclusao {
    padding: 120px 15px;
}

#educar .row {
    margin-left: 100px;
}

#mudanca .row {
    margin-right: 100px;
}

@media only screen and (max-width: 500px) {
    #menu {
        height: 30px;
    }
    
    #banner {
        padding: 10px;
    }
    
    #banner .display-2 {
        font-size: 3rem;
    }
    
    #educar .row {
        margin-left: 0;
    }

    #mudanca .row {
        margin-right: 0;
    }
    
    .destacado {
        background-position: center;
        background-size: cover;
    }
    
    span.mobile {
        display: inline;
    }
    
    .nuvem-texto {
        text-align: center;
        margin: 40px 0;
    }
    
    .nuvem-texto .display-3 {
        font-size: 2.5rem;
    }
    
    .nuvem-texto .display-4 {
        font-size: 2rem
    }
}