/* Declaracao das fontes externas*/
@font-face {
    font-family: 'MuseoSans-100';
    src: url('/fonts/MuseoSans-100.ttf');
}
@font-face {
    font-family: 'MuseoSans-300';
    src: url('/fonts/MuseoSans-300.ttf');
}
@font-face {
    font-family: 'MuseoSans-500';
    src: url('/fonts/MuseoSans-500.ttf');
}
@font-face {
    font-family: 'MuseoSans-700';
    src: url('/fonts/MuseoSans-700.ttf');
}
@font-face {
    font-family: 'MuseoSans-900';
    src: url('/fonts/MuseoSans-900.ttf');
}

/* estilo do corpo do site */
body {
    background-color: #396089;
    margin: 0;
}

/* estilo do cabecalho */
header {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* estilo do fundo da pagina */
.bg-home {
    background-image: url("/images/background_image_home.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
}

/* estilo altura da pagina */
.bg-height {
    height: 5037px; /* Ajusta a altura da página */
}


/* cabecalho ##########################################################################################################*/

/* estilo do container do cabecalho */
.container-header {
    display: flex;
    justify-content: center;
    width: 1200px;
}

/* estilo do botao home */
.home-button {
    display: flex;
    text-align: center;
    display: block;
    margin-top: 10px;
    margin-left: 15px;
}

/* estilo da imagem do botao home*/
.home-img {
    position: relative; /* Para o botao ficar a frente do main-menu*/
    width:  150px;
    height: 150px;
    z-index: 2;
}

/* estilo botao de menu layout mobile */
.open-nav {
    display: none !important;
}

/* estilo do menu principal */
.main-menu {
    position: absolute;
    width: 1200px;
    top: 11.5%;
    z-index: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

/* estilo da lista do menu */
.main-menu li {
    list-style-type: none;
    text-decoration: none;
}

/* estilo do item do menu principal */
.menu-item {
    list-style-type: none;
    text-decoration: none;
    font-family: 'MuseoSans-300', verdana;
    text-transform: uppercase;
    color: #dcdcda;
    width: 180px;
    height: 30px;
    margin: 10px;
    padding: 10px;
    font-size: 18px;
    text-align: center;
    z-index: 1;
}

/* botoes download ##########################################################################################################*/

.body-download-buttons {
    position: absolute;
    width: 100%;
    top: 680px;
    display: flex;
    justify-content: center;
}

.buttons-download-container {
    width: 1200px;
    left: 50%;
}

.download-buttons{
    margin-left: 65%;
    display: flex;
    justify-content: space-around;
    width: 270px;
}

.app-store-button{
    position: relative;
    width: 115px;
    height: 36px;
    border-radius: 5px;
    background: #000000; /*#000000*/
    
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.app-store-img{
    width: 105px;
}

.google-play-button{
    position: relative;
    width: 115px;
    height: 36px;
    border-radius: 5px;
    background: #000000; /*#000000*/
    
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.google-play-img{
    width: 105px;
}

/* texto intro ##########################################################################################################*/

.body-intro-text{
    position: absolute;
    width: 100%;
    top: 830px;
    display: flex;
    justify-content: center;
}

.container-intro{
    width: 1200px;
    z-index: 1;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.container-l-intro{
    width: 50%;
    margin-right: 10%;
    
    text-align: right;
}

.container-r-intro{
    width: 40%;
    margin-right: 15%;
    text-align: justify;
}

.container-l-intro h1{
    color: #72ecb7;
    text-transform: uppercase;
    font-family: 'MuseoSans-100', calibri;
    font-size: 40px;
    width: 250px;
    padding-left: 270px;
}

.container-l-intro h1 b{
    color: #72ecb7;
    text-transform: uppercase;
    font-family: 'MuseoSans-900', verdana;
    font-weight: bold;
    font-size: 40px;
}

.container-l-intro h2{
    color: #aeb6bf;
    text-transform: uppercase;
    font-family: 'MuseoSans-100', calibri;
    font-size: 20px;
}

.container-l-intro h2 b{
    color: #aeb6bf;
    text-transform: uppercase;
    font-family: 'MuseoSans-500', verdana;
    font-weight: bold;
    font-size: 20px;
}

.container-r-intro p{
    color: #aeb6bf;
    font-family: 'MuseoSans-300', calibri;
    font-size: 16px;
}

.container-r-intro p b{
    color: #aeb6bf;
    font-family: 'MuseoSans-300', verdana;
    font-weight: bold;
    font-size: 16px;
}

/* texto recursos ##########################################################################################################*/

.body-resources {
    position: absolute;
    width: 100%;
    top: 1350px;
    display: flex;
    justify-content: center;
}

.container-resources {
    width: 1200px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.resources-img {
    width:  150px;
    height: 150px;
}

.text-container-h {
    width: 260px;
    display: flex;
}

.text-container-p {
    width: 260px;
}

.text-container-p p {
    color: #707070;
    text-align: justify;
    font-family: 'MuseoSans-300', calibri;
    font-size: 16px;
}

.text-container-h h1 {
    color: #1c3851;
    text-transform: uppercase;
    font-weight: bold;
    font-family: 'MuseoSans-900', verdana;
    font-size: 16px;
}

/* texto recurso 1 ##########################################################################################################*/

.body-resource-1 {
    width: 100%;
    left: 200px;
    display: flex;
    justify-content: center;
}

.body-resource-1 .body-container-resources-img {
    text-align: right;
    display: block;
    width: 29%;
}

.body-resource-1 .body-container-resources-txt {
    width: 71%;
    margin-left: 3%;
}

.body-resource-1 .text-container-h {
    justify-content: left;
}

.body-resource-1 .container-l {
    width:  20px;
    height: 60px;
    background-color: #27e5ff;
}

.body-resource-1 .container-r {
    padding-left: 5px;
}

/* texto recurso 2 ##########################################################################################################*/

.body-resource-2 {
    width: 100%;
    left: 200px;
    display: flex;
    justify-content: center;
}

.body-resource-2 .body-container-resources-img {
    text-align: left;
    display: block;
    width: 29%;
}

.body-resource-2 .body-container-resources-txt {
    width: 71%;
    margin-right: 3%;
    margin-left: auto;
}

.body-resource-2 .text-container-h {
    margin-left: auto;
}

.body-resource-2 .text-container-p {
    margin-left: auto;
}

.body-resource-2 .container-l {
    margin-left: auto;
    text-align: right;
    padding-right: 5px;
}

.body-resource-2 .container-r {
    width:  20px;
    height: 60px;
    background-color: #d94fe8;
}

/* texto recurso 3 ##########################################################################################################*/

.body-resource-3 {
    width: 100%;
    left: 200px;
    display: flex;
    justify-content: center;
}

.body-resource-3 .body-container-resources-img {
    text-align: right;
    display: block;
    width: 29%;
}

.body-resource-3 .body-container-resources-txt {
    width: 71%;
    margin-left: 3%;
}

.body-resource-3 .text-container-h {
    justify-content: left;
}

.body-resource-3 .container-l {
    width:  20px;
    height: 60px;
    background-color: #73edb8;
}

.body-resource-3 .container-r {
    padding-left: 5px;
}

/* texto recurso 4 ##########################################################################################################*/

.body-resource-4 {
    width: 100%;
    left: 200px;
    display: flex;
    justify-content: center;
}

.body-resource-4 .body-container-resources-img {
    text-align: left;
    display: block;
    width: 29%;
}

.body-resource-4 .body-container-resources-txt {
    width: 71%;
    margin-right: 3%;
    margin-left: auto;
}

.body-resource-4 .text-container-h {
    margin-left: auto;
}

.body-resource-4 .text-container-p {
    margin-left: auto;
}

.body-resource-4 .container-l {
    margin-left: auto;
    text-align: right;
    padding-right: 5px;
}

.body-resource-4 .container-r {
    width:  20px;
    height: 80px;
    background-color: #27e5ff;
}

/* texto recurso 5 ##########################################################################################################*/

.body-resource-5 {
    width: 100%;
    left: 200px;
    display: flex;
    justify-content: center;
}

.body-resource-5 .body-container-resources-img {
    text-align: right;
    display: block;
    width: 29%;
}

.body-resource-5 .body-container-resources-txt {
    width: 71%;
    margin-left: 3%;
}

.body-resource-5 .text-container-h {
    justify-content: left;
}

.body-resource-5 .container-l {
    width:  20px;
    height: 60px;
    background-color: #d94fe8;
}

.body-resource-5 .container-r {
    padding-left: 5px;
}

/* texto recurso 6 ##########################################################################################################*/

.body-resource-6 {
    width: 100%;
    left: 200px;
    display: flex;
    justify-content: center;
}

.body-resource-6 .body-container-resources-img {
    text-align: left;
    display: block;
    width: 29%;
}

.body-resource-6 .body-container-resources-txt {
    width: 71%;
    margin-right: 3%;
    margin-left: auto;
}

.body-resource-6 .text-container-h {
    margin-left: auto;
}

.body-resource-6 .text-container-p {
    margin-left: auto;
}

.body-resource-6 .container-l {
    margin-left: auto;
    text-align: right;
    padding-right: 5px;
}

.body-resource-6 .container-r {
    width:  20px;
    height: 60px;
    background-color: #73edb8;
}

/* texto recurso 7 ##########################################################################################################*/

.body-resource-7 {
    width: 100%;
    left: 200px;
    display: flex;
    justify-content: center;
}

.body-resource-7 .body-container-resources-img {
    text-align: right;
    display: block;
    width: 29%;
}

.body-resource-7 .body-container-resources-txt {
    width: 71%;
    margin-left: 3%;
}

.body-resource-7 .text-container-h {
    justify-content: left;
}

.body-resource-7 .container-l {
    width:  20px;
    height: 60px;
    background-color: #27e5ff;
}

.body-resource-7 .container-r {
    padding-left: 5px;
}

/* texto recurso 8 ##########################################################################################################*/

.body-resource-8 {
    width: 100%;
    left: 200px;
    display: flex;
    justify-content: center;
}

.body-resource-8 .body-container-resources-img {
    text-align: left;
    display: block;
    width: 29%;
}

.body-resource-8 .body-container-resources-txt {
    width: 71%;
    margin-right: 3%;
    margin-left: auto;
}

.body-resource-8 .text-container-h {
    margin-left: auto;
}

.body-resource-8 .text-container-p {
    margin-left: auto;
}

.body-resource-8 .container-l {
    margin-left: auto;
    text-align: right;
    padding-right: 5px;
}

.body-resource-8 .container-r {
    width:  20px;
    height: 60px;
    background-color: #d94fe8;
}

/* botoes download 2 ##########################################################################################################*/

.body-download-buttons-2 {
    position: absolute;
    top: 2850px;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

.download-buttons-2{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 280px;
    padding-left: 10px;
}

.app-store-button-2{
    width: 115px;
    height: 36px;
    border-radius: 5px;
    background: #000000;
    
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.app-store-img-2{
    width: 105px;
}

.google-play-button-2{
    width: 115px;
    height: 36px;
    border-radius: 5px;
    background: #000000;
    
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.google-play-img-2{
    width: 105px;
}

/* junte-se a nos ##########################################################################################################*/

.body-join-us{
    position: absolute;
    top: 3200px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.container-join-us{
    width: 1200px;
    margin-left: 100px;
}

.body-join-us p{
    color: #aeb6bf;
    font-family: 'MuseoSans-300', calibri;
    font-size: 22px;
    width: 560px;
}

.body-join-us b{
    color: #aeb6bf;
    font-family: 'MuseoSans-900', verdana;
    font-weight: bold;
    font-size: 22px;
    width: 560px;
}

/* midia ##########################################################################################################*/

.body-media {
    position: absolute;
    top: 3400px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.container-media {
    width: 1200px;
}

.buttons-media{
    margin-left: 112px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 182px;
}

.button-instagram{
    width: 56px;
    height: 56px;
    background: #2c567c;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.instagram-img{
    width: 54px;
}

.button-facebook{
    width: 56px;
    height: 56px;
    background: #2c567c;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.facebook-img{
    width: 54px;
}

/* sobre nos ##########################################################################################################*/

.body-about-us{
    position: absolute;
    width: 100%;
    top: 3730px;
    display: flex;
    justify-content: center;
}

.container-about-us{
    width: 1200px;
    z-index: 1;
}

.body-about-us h1 {
    color: #18293d;
    text-transform: uppercase;
    font-weight: bold;
    font-family: 'MuseoSans-900', verdana;
    font-size: 20px;
    margin: 12px;
}

.body-about-us p {
    color: #aeb6bf;
    text-align: justify;
    font-family: 'MuseoSans-300', calibri;
    font-size: 18px;
    margin: 12px;
}

.body-about-us h2 {
    color: #18293d;
    font-family: 'MuseoSans-300', calibri;
    font-size: 16px;
    margin: 12px;
}

.body-about-us h2 b{
    font-family: 'MuseoSans-900', verdana;
    font-weight: bold;
    margin: 12px;
}

/* sobre nos 1 ##########################################################################################################*/

.body-about-us-1 {
    background-image: url("/images/about-us-1.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    padding: 6% 6.5% 2.5% 6.5%;
    width: 25%;
    margin-left: 130px;
}

/* sobre nos 2 ##########################################################################################################*/

.body-about-us-2 {
    background-image: url("/images/about-us-2.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    padding: 8% 3% 4% 3%;
    margin-top: -290px;
    margin-left: 590px;
    width: 25%;
}

/* sobre nos 3 ##########################################################################################################*/

.body-about-us-3 {
    background-image: url("/images/about-us-3.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    padding: 7% 2% 5.5% 4%;
    margin-top: -30px;
    margin-left: 340px;
    width: 24%;
}

/* sobre nos 4 ##########################################################################################################*/

.body-about-us-4 {
    background-image: url("/images/about-us-4.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    padding: 7% 2% 7% 8%;
    width: 23%;
    margin-top: -130px;
    margin-left: 700px;
}

/* sobre nos 5 ##########################################################################################################*/

.body-about-us-5 {
    background-image: url("/images/about-us-5.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    padding: 5% 9% 3% 3.5%;
    width: 32%;
    margin-top: -180px;
    margin-left: 100px;
}

/* rodape ##########################################################################################################*/
/* estilo do rodape */
.body-footer {
    position: absolute;
    width: 100%;
    top: 4960px;
    display: flex;
    justify-content: center;
}

/* estilo do container do rodape */
.container-footer {
    text-align: center;
    width: 1200px;
}

/* estilo do copyright*/
.copy-right {
    font-size: 14px;
    color: #3e5e7f;
}