@font-face {
    font-family: harabara;
    src: url(../font/harabara.otf);
}

@media screen and (max-width: 1920px) {
    #header div {
        max-width: 1040px;
        justify-content: center;
    }
    #header .container {
        margin-bottom: -15%;
    }
    #hero #myVideo {
        width: 100%;
        margin-top: 5%;
    }
    #hero .container-fluid #desktop {
        display: block!important;
        margin-top: 0%;
    }
    #hero .container-fluid #mobile {
        display: none!important;
    }
    .hero .container-fluid {
        padding: 0px;
        height: 1200px!important;
        display: grid;
        align-content: center;
        justify-content: center;
    }
    .hero .container-fluid .contain {
        padding: 0px;
        height: 900px!important;
        display: grid;
        align-content: center;
        justify-content: center;
        margin-top: -10%;
    }
    .heroin {
        margin: 0;
        padding: 0;
    }
    .heroin .container {
        height: 700px!important;
        margin-top: 0%;
        align-items: center;
        display: flex;
        ;
    }
    .heroin .container .sobre {
        text-align: left!important;
        height: 900px!important;
        margin-top: 0%;
        padding: 0;
    }
    #sobre .container-fluid {
        margin-top: -0%;
        height: 700px!important;
    }
    .pin-sobre {
        display: block;
    }
    .pin-sobre .sobre {
        display: block;
        margin-top: -10%;
        margin-bottom: -11%!important;
    }
    #novidades .imagem-fun {
        height: 100%;
        width: 100%;
        min-height: 200px!important;
    }
    #novidades .carousel-caption .texto {
        height: 200px!important;
    }
    #novidades .carousel-caption {
        text-align: left;
        margin-left: -10%;
    }
    #novidades #desktop {
        display: block;
    }
    #novidades #mobile {
        display: none;
    }
    #blog {
        margin: auto;
    }
    #blog .container-fluid {
        margin: auto;
    }
    #blog .container-fluid .row {
        margin-top: 30%;
        margin-bottom: 30%;
    }
    #blog .container-fluid .btn-mais {
        margin-top: 2%;
        margin-bottom: 0%;
    }
    
    #conteudo-banner #desktop {
        display: block!important;
    }
    #conteudo-banner #mobile {
        display: none!important;
    }
}

@media screen and (max-width: 1682px) {
    #header div {
        max-width: 1040px;
        justify-content: center;
    }
    #header .container {
        margin-bottom: -10%;
    }
    #hero #myVideo {
        width: 100%;
        margin-top: -10%;
        margin-bottom: -30%;
    }
    #hero .container-fluid #desktop {
        display: block!important;
        margin-top: 8%;
    }
    #hero .container-fluid #mobile {
        display: none!important;
    }
    .hero .container-fluid {
        padding: 0px;
        height: 900px!important;
        display: grid;
        align-content: center;
        justify-content: center;
    }
    .hero .container-fluid .contain {
        padding: 0px;
        height: 700px!important;
        display: grid;
        align-content: center;
        justify-content: center;
        margin-top: -15%;
    }
    .heroin .container .sobre {
        text-align: left!important;
        height: 900px!important;
    }
    .heroin {
        margin: 0;
        padding: 0;
    }
    .heroin .container {
        height: 500!important;
        margin-top: 0%;
    }
    #blog .btn-mais {
        margin-top: 30%;
    }
    .pin-sobre {
        display: block;
    }
    .pin-sobre .sobre {
        display: block;
        margin-bottom: -13%!important;
    }
    #novidades .imagem-fun {
        height: 100%;
        width: 100%;
        min-height: 200px!important;
    }
    #novidades .carousel-caption .texto {
        height: 50px!important;
    }
    #novidades #desktop {
        display: block;
    }
    #novidades #mobile {
        display: none;
    }
    
    #conteudo-banner #desktop {
        display: block!important;
    }
    #conteudo-banner #mobile {
        display: none!important;
    }
}

@media screen and (max-width: 1536) {
    #novidades #desktop {
        display: none;
    }
    #novidades #mobile {
        display: block;
    }
    #hero .container-fluid #desktop {
        display: block!important;
        margin-top: 38%;
    }
    #hero .container-fluid #mobile {
        display: none!important;
    }
    #blog .btn-mais {
        margin-top: 30%;
    }
    
    #conteudo-banner #desktop {
        display: block!important;
    }
    #conteudo-banner #mobile {
        display: none!important;
    }
}

@media screen and (max-width: 1440px) {
    #header div {
        max-width: 1040px;
        justify-content: center;
    }
    #header .container {
        margin-bottom: -10%;
    }
    #hero #myVideo {
        width: 100%;
        margin-top: -10%;
        margin-bottom: -30%;
    }
    .heroin {
        margin: 0;
        padding: 0;
    }
    #hero .container-fluid #desktop {
        display: block!important;
        margin-top: -5%;
    }
    #hero .container-fluid #mobile {
        display: none!important;
    }
    .hero .container-fluid {
        padding: 0px;
        height: 900px!important;
        display: grid;
        align-content: center;
        justify-content: center;
    }
    .hero .container-fluid .contain {
        padding: 0px;
        height: 700px!important;
        display: grid;
        align-content: center;
        justify-content: center;
        margin-top: -15%;
    }
    .pin-sobre {
        display: block;
    }
    .pin-sobre .sobre {
        display: block;
        margin-bottom: -15%!important;
    }
    #novidades .imagem-fun {
        height: 100%;
        width: 100%;
        min-height: 200px!important;
    }
    #novidades .carousel-caption .texto {
        height: 50px!important;
    }
    #novidades #desktop {
        display: block;
    }
    #novidades #mobile {
        display: none;
    }
    #blog .btn-mais {
        margin-top: 30%;
    }
    .footer .footer-newsletter input[type=email] {
        border: 0;
        padding: 8px;
        width: 100%;
        min-width: 250px!important;
        height: 40px;
        margin-right: 10px;
    }
    
    #conteudo-banner #desktop {
        display: block!important;
    }
    #conteudo-banner #mobile {
        display: none!important;
    }
}

@media screen and (max-width: 1366) {
    #novidades #desktop {
        display: none;
    }
    #novidades #mobile {
        display: block;
    }
    #hero .container-fluid #desktop {
        display: block!important;
        margin-top: 38%;
    }
    #hero .container-fluid #mobile {
        display: none!important;
    }
    #blog .btn-mais {
        margin-top: 30%;
    }
    
    #conteudo-banner #desktop {
        display: block!important;
    }
    #conteudo-banner #mobile {
        display: none!important;
    }
}

@media screen and (max-width: 1024px) {
    #hero #myVideo {
        width: 100%;
        margin-top: 25%;
    }
    .heroin {
        margin: 0;
        padding: 0;
    }
    #hero .container-fluid #desktop {
        display: block!important;
        margin-top: 0%;
    }
    #hero .container-fluid #mobile {
        display: none!important;
    }
    .hero .container-fluid {
        padding: 0px;
        height: 900px!important;
        display: grid;
        align-content: center;
        justify-content: center;
    }
    .hero .container-fluid .contain {
        padding: 0px;
        height: 900px!important;
        display: grid;
        align-content: center;
        justify-content: center;
        margin-top: 15%;
    }
    #agro .container-fluid .container .titulo {
        margin-top: 15%;
    }
    #hero .container-fluid {
        margin-top: -36%;
    }
    #heroin .container h2 {
        margin: 5%;
    }
    #novidades .contain {
        margin-top: -30%;
        margin-bottom: 0%;
    }
    #novidades .imagem-fun {
        height: 100%;
        width: 100%;
        min-height: 200px!important;
    }
    #novidades .carousel-caption .texto {
        height: 50px!important;
    }
    #blog .container-fluid {
        height: 900px;
        margin-top: 10%;
    }
    #blog .container-fluid {
        height: 2000px!important;
    }
    #blog .container-fluid .row {
        width: 100%;
    }
    #blog .container-fluid .row .col-lg-4 {
        width: 100%;
    }
    #blog .btn-mais {
        margin-top: 30%;
    }
    #segmentos .container-fluid .row .col-lg-4 {
        width: 100%!important;
    }
    #footer .row .col-lg-4 {
        width: 100%;
    }
    .footer .footer-newsletter input[type=email] {
        border: 0;
        padding: 8px;
        width: 100%;
        min-width: 180px!important;
        height: 40px;
        margin-right: 10px;
    }
    .pin-sobre {
        display: block;
    }
    .pin-sobre .sobre {
        display: block;
        margin-bottom: -20%!important;
    }
    #novidades #desktop {
        display: none;
    }
    #novidades #mobile {
        display: block;
    }
    .back-to-top {
        margin-right: 5%;
    }

    #conteudo-banner #desktop {
        display: block!important;
    }
    #conteudo-banner #mobile {
        display: none!important;
    }
}

@media screen and (max-width: 821px) {
    #hero .container-fluid #desktop {
        display: block!important;
        margin-top: 38%;
    }
    #hero .container-fluid #mobile {
        display: none!important;
    }
    #agro .container-fluid .container .titulo {
        margin-top: 15%;
    }
    #hero .container-fluid {
        margin-top: -36%;
    }
    #novidades .contain {
        margin-top: -36%;
        margin-bottom: -19%;
    }
    #novidades .imagem-fun {
        height: 100%;
        width: 100%;
        min-height: 200px!important;
    }
    #novidades .carousel-caption .texto {
        height: 50px!important;
    }
    #blog .container-fluid {
        height: 900px;
    }
    #blog .container-fluid {
        height: 2000px!important;
    }
    #blog .container-fluid .row {
        width: 100%;
    }
    #blog .container-fluid .row .col-lg-4 {
        width: 100%;
    }
    #blog .btn-mais {
        margin-top: 30%;
    }
    #segmentos .container-fluid .row .col-lg-4 {
        width: 100%!important;
    }
    #footer .row .col-lg-4 {
        width: 100%;
    }
    .pin-sobre {
        display: block;
    }
    .pin-sobre .sobre {
        display: block;
        margin-bottom: -20%!important;
    }
    #novidades #desktop {
        display: none;
    }
    #novidades #mobile {
        display: block!important;
    }
    #blog .btn-mais {
        margin-top: 30%;
    }

    #conteudo-banner #desktop {
        display: none;
    }
    #conteudo-banner #mobile {
        display: block!important;
    }
}

@media screen and (max-width: 414px) {
    #agro .container-fluid .container .titulo {
        margin-top: 15%;
    }
    #hero div #myVideo {
        width: 100%;
        display: block!important;
        height: 600px!important;
        margin-top: -22%;
    }
    #hero .container-fluid {
        margin-bottom: -10%;
        margin-top: -45%;
    }
    #hero .container-fluid #desktop {
        display: none!important;
    }
    #hero .container-fluid #mobile {
        display: block!important;
        margin-top: 38%;
    }
    #heroin .container {
        height: 300px!important;
    }
    #heroin .container .h2,
    h2 {
        font-size: 30px!important;
    }
    #hero .container-fluid {
        margin-bottom: -0%!important;
        height: 400px!important;
    }
    #hero div {
        width: 100%;
        display: block!important;
    }
    header div {
        display: none;
    }
    #header .contain {
        display: flex!important;
        justify-content: space-between!important;
    }
    #heroin .container .sobre .h2,
    h2 p {
        font-size: 18px!important;
        text-align: left;
        line-height: 30px;
    }
    #testimonials .container .swiper-wrapper {
        height: 400px;
    }
    #testimonials .container .section-header {
        height: 50px;
        margin-bottom: -10%;
        text-align: center!important;
    }
    #testimonials .container .section-header .h2,
    h2 {
        display: block;
        font-size: 52px!important;
    }
    #testimonials .container img {
        height: 200px;
    }
    #novidades .container-fluid {
        margin-top: -100%!important;
    }
    #novidades .contain {
        margin-top: -100%;
        margin-bottom: -79%;
    }
    #novidades #mobile {
        margin-left: -1px;
    }
    #novidades .imagem-fun {
        height: 100%;
        width: 100%;
        min-height: 200px!important;
    }
    #novidades .carousel-caption .texto {
        height: 50px!important;
    }
    #blog .container-fluid {
        height: 500px;
    }
    #blog .container-fluid {
        height: 2200px!important;
    }
    #blog .container-fluid .row {
        width: 100%;
    }
    #blog .container-fluid .row .col-lg-4 {
        width: 100%;
    }
    #blog .btn-mais {
        margin-top: 30%;
    }
    #blogPage .box-blog {
        display: none!important;
    }
    #blogPag .container-fluid .container .container-box .text {
        margin-top: 10%!important;
    }
    #blogPag .container-fluid .container .container-box .text {
        margin-top: 10%!important;
    }
    #segmentos .titulo {
        display: flex;
        justify-content: center;
        justify-items: center;
    }
    #segmentos .container-fluid .row .col-lg-4 {
        width: 100%!important;
    }
    #sobre .container-fluid {
        font-size: 15px!important;
    }
    #footer .container {
        text-align: left;
        justify-content: start;
        justify-items: start;
    }
    #footer .row .col-lg-3 {
        width: 100%;
        text-align: left;
    }
    .pin-sobre {
        display: block;
    }
    .pin-sobre .sobre {
        display: block;
        margin-bottom: -49%!important;
    }
    .pin-sobre .sobre p {
        font-size: 16px;
    }
    .pin-sobre .sobre strong {
        font-size: 40px!important;
    }
    .pin-sobre .sobre h1,
    .h1 {
        font-size: 30px!important;
    }
    #novidades #desktop {
        display: none;
    }
    #novidades #mobile {
        display: block!important;
    }
    #conteudo .section-header h2 {
        font-size: 20px!important;
    }
    #conteudo .section-header p {
        font-size: 17px!important;
    }

    #conteudo-banner #desktop {
        display: none!important;
    }
    #conteudo-banner #mobile {
        display: block!important;
    }

    
}

@media screen and (max-width: 389px) {
    #hero div #myVideo {
        width: 100%;
        display: block!important;
        height: 600px!important;
        margin-top: -22%;
    }
    #hero .container-fluid {
        margin-bottom: -10%;
        margin-top: -50%;
    }
    #hero .container-fluid #desktop {
        display: none!important;
    }
    #hero .container-fluid #mobile {
        display: block!important;
        margin-top: 38%;
    }
    #heroin .container h2 {
        font-size: 20px!important;
    }
    #heroin .container {
        height: 300px!important;
    }


    .heroin .sobre {
        max-height: 700px;
        margin-left: auto;
        margin-right: 0%;
    }

    .heroin .sobre.texto {
        width: 100%;
        max-width:100%;
        margin-bottom: 5%;
        font-size: 20px;
    }
    
    .heroin .sobre .sobre #capitulo-texto {
        color: #fff;
        margin: 0px 0 0 0;
        font-size: 40px!important;
        text-align: justify;
        font-weight: 400;
        font-family: harabara!important;
    }
    
    .heroin .sobre .sobre #capitulo-texto-2 {
        color: #fff;
        margin-top: -5px;
        margin-bottom: 30px;
        font-size: 10px;
        text-align: justify;
        font-weight: 400;
        font-style: italic;
        font-family: Montserrat, Helvetica, sans-serif!important;
    }
    
    .heroin .sobre .sobre #capitulo-texto-3 {
        color: #fff;
        margin-top: -15px;
        margin-bottom: 30px;
        font-size: 2rem!important;
        text-align: justify;
        font-weight: 400;
        font-style: normal;
        text-transform: none;
        font-family: Montserrat, Helvetica, sans-serif!important;
    }



    #sobre .container-fluid .container {
        font-size: 15px!important;
    }
    #testimonials .container .swiper-wrapper {
        height: 400px;
    }
    #testimonials .container .section-header {
        height: 50px;
        margin-bottom: 10%;
    }
    #testimonials .container img {
        height: 200px;
    }
    #novidades .container-fluid {
        margin-top: -100%!important;
    }
    #novidades .imagem-fun {
        height: 100%;
        width: 100%;
        min-height: 200px!important;
    }
    #novidades .carousel-caption .texto {
        height: 50px!important;
    }
    #novidades .contain {
        margin-top: -115%;
        margin-bottom:0;
    }
    #blog .container-fluid {
        height: 500px;
        margin-top: -10%;
    }
    #blog .container-fluid {
        height: 2200px!important;
    }
    #blog .container-fluid .row {
        width: 100%;
    }
    #blog .container-fluid .row .col-lg-4 {
        width: 100%;
    }

    #segmentos .titulo h2,
    .h2 {
        display: flex;
        justify-content: center;
        justify-items: center;
        font-size: 20px!important;
    }
    #segmentos .container-fluid .row .col-lg-4 {
        width: 100%!important;
    }
    #sobre .container-fluid {
        font-size: 15px!important;
    }
    #footer .container {
        text-align: left;
        justify-content: start;
        justify-items: start;
    }
    #footer .row .col-lg-3 {
        width: 100%;
        text-align: left;
    }
    .pin-sobre {
        display: block;
    }
    .pin-sobre .sobre {
        display: block;
        margin-bottom: -52%!important;
    }
    .pin-sobre .sobre p {
        font-size: 16px;
    }
    .pin-sobre .sobre strong {
        font-size: 40px!important;
    }
    .pin-sobre .sobre h1,
    .h1 {
        font-size: 30px!important;
    }
    #novidades #desktop {
        display: none;
    }
    #novidades #mobile {
        display: block!important;
        margin-bottom: -60%;
      
    }
    #novidades #mobile .flip-slide img{
      width: 80%;
      margin-right: 20px;
      
    }
    #novidades #mobile .carousel-inner .carousel-item .carousel-caption {
        text-align: center;
        margin-bottom: 40%;
    }
    #conteudo .titulo {
        text-align: center!important;
        justify-content: center;
        margin-top: 5%;
    }
    
    #conteudo .titulo h2 {
        color: #722873;
        font-size: 50px!important;
        font-weight: 100;
        font-family: Montserrat;
        text-transform: uppercase;
    }
    
    #conteudo .titulo p {
        color: #722873;
        font-size: 15px;
        font-weight: 700;
    }

    #conteudo-banner #desktop {
        display: none!important;
    }
    #conteudo-banner #mobile {
        display: block!important;
    }
}