﻿<html>

<head>
    

    
    

    <meta charset="utf-8">
    <!--cor do tema android navegador-->
    <meta name="theme-color" content="#000">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--Sobre a tela do Browser responsividade e escala  recomendavel    -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <!-- Compiled and minified JavaScript -->

    <!--Let browser know website is optimized for mobile-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <link rel="stylesheet" href="https://m3rsistemas.com.br/style/animate.css">

    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
    <link rel="stylesheet" href="https://m3r.site/newclass/patternsm3r.css?269">
    <link rel="stylesheet" href="https://m3r.site/newclass/nc_house.css?269">
    <link rel="stylesheet" href="https://m3r.site/newclass/fwr/fwr.css?269">

    <link rel="stylesheet" href="https://m3r.site/newclass/hover.css?269">
    <link rel="stylesheet" href="https://m3r.site/newclass/vi.css?269">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <script src="https://www.m3rsistemas.com.br/cxa/js/push.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js"></script>

    <!--scripts-->
    <script src="/js/angular.min.js"></script>
    <script src="/js/angular-sanitize.min.js"></script>

    <script src="https://m3r.site/newclass/wow.js"></script>

    <script src="https://m3r.site/newclass/nc_house.js?269 "></script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <link rel="icon" href="/img/favico.png?v=1" sizes="32x32">
    <title>meu site</title>

    <!-- SEO -->
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="M3R Sistemas">
    <meta name="robots" content="index, follow">

<link rel="canonical" href="" />
<meta property="og:locale" content="pt_BR" />
<meta property="og:type" content="website" />
<meta property="og:title" content="meu site" />
<meta property="og:description" content="" />
<meta property="og:url" content="" />
<meta property="og:site_name" content="meu site" />
<meta property="og:image" content="" />
<meta property="og:image:secure_url" content="" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="150" /> 
<script type='application/ld+json' class='yoast-schema-graph yoast-schema-graph--main'> 
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "Organization",
      "@id": "#home",
      "name": "meu site",
      "url": "",
      "sameAs": [
        "",
        "",
        ""
      ]
    },
    {
      "@type": "WebSite",
      "@id": "#home",
      "url": "",
      "name": "meu site",
      "publisher": {
        "@id": "#home"
      },
      "potentialAction": {
        "@type": "SearchAction",
        "target": "?s=",
        "query-input": "required name=search_term_string"
      }
    },
    {
      "@type": "WebPage",
      "@id": "#home",
      "url": "",
      "inLanguage": "pt-BR",
      "name": "",
      "isPartOf": {
        "@id":  "#home"
      },
      "about": {
        "@id":  "#home"
      },
      "datePublished": "2019-10-02T17:19:24+00:00",
      "dateModified": "2019-11-18T17:58:15+00:00",
      "description": ""
    }
  ]
}
</script>
    <!--FIM FACEBOOK METADATA-->

    <script>
        new WOW().init();

        $(document).ready(function() {
            // the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
            // $('.modal').modal();
            // $('.parallax').parallax();
        });

        $('.dropdown-button').dropdown({
            inDuration: 300,
            outDuration: 225,
            constrainWidth: false, // Does not change width of dropdown to that of the activator
            hover: true, // Activate on hover
            gutter: 0, // Spacing from edge
            belowOrigin: false, // Displays dropdown below the button
            alignment: 'left', // Displays dropdown with edge aligned to the left of button
            stopPropagation: false // Stops event propagation
        });
        $(document).ready(function() {
            $('ul.tabs').tabs();
        });

        jQuery(document).ready(function($) {
            $(".scroll").click(function(event) {
                event.preventDefault();

                $('html,body').animate({
                    scrollTop: $(this.hash).offset().top - 74
                }, 1e3, "easeInOutExpo"); //top-60 altura 1200 velocidade do scroll
            });
        });
    </script>
    <link href="https://fonts.googleapis.com/css?family=Rubik&amp;display=swap" rel="stylesheet">

    
    
</head>

<body id="body" style="max-width: 100%; overflow: hidden scroll; background-color: rgb(255, 255, 255); height: unset !important;" onload="loaderOut()">

    <!-- preLoader -->
    <style>
#quemsomos{background-color: #eeeeee5e !important;}        
.flex.tbd {
    background: unset !important;    
}        
.parallax-container .parallax img {
    display: block !important;
}        
#home .col .row {
    margin-left: auto;
    margin-right: auto;
}        
.butuim {
    width: 60%;
    min-width: 290px;
    text-decoration: none;
    min-height: 80px;
    font-family: 'Open Sans', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    display: inline-block;
    text-align: center;
    position: relative;
    padding: 10px 10px !important;
    border-radius: 50px;
    text-transform: uppercase;
    margin-bottom: 15px;
    line-height: 30px;
    transition: all ease .2s;
    padding: 10px 10px;
    max-height: 60px;
    min-height: unset !important;
    background: #FFFFFF;
    color: #f05f40;
    cursor: pointer;
    box-shadow: 0px 3px 0px 0px #FFFFFF;
}          
#loader-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 186815;
        }
        
        #loader {
            display: block;
            position: relative;
            left: 50%;
            top: 50%;
            width: 150px;
            height: 150px;
            margin: -75px 0 0 -75px;
            border-radius: 50%;
            border: 1px solid transparent;
            border-top-color: rgb(55, 71, 79);
            -webkit-animation: spin 2s linear infinite;
            /* Chrome, Opera 15+, Safari 5+ */
            animation: spin 2s linear infinite;
            /* Chrome, Firefox 16+, IE 10+, Opera */
        }
        
        #loader:before {
            content: "";
            position: absolute;
            top: 5px;
            left: 5px;
            right: 5px;
            bottom: 5px;
            border-radius: 50%;
            border: 1px solid transparent;
            border-top-color: rgb(255, 255, 255);
            -webkit-animation: spin 3s linear infinite;
            /* Chrome, Opera 15+, Safari 5+ */
            animation: spin 3s linear infinite;
            /* Chrome, Firefox 16+, IE 10+, Opera */
        }
        
        #loader:after {
            content: "";
            position: absolute;
            top: 15px;
            left: 15px;
            right: 15px;
            bottom: 15px;
            border-radius: 50%;
            border: 1px solid transparent;
            border-top-color: rgb(55, 71, 79);
            -webkit-animation: spin 1.5s linear infinite;
            /* Chrome, Opera 15+, Safari 5+ */
            animation: spin 1.5s linear infinite;
            /* Chrome, Firefox 16+, IE 10+, Opera */
        }
        
        @-webkit-keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
                /* Chrome, Opera 15+, Safari 3.1+ */
                -ms-transform: rotate(0deg);
                /* IE 9 */
                transform: rotate(0deg);
                /* Firefox 16+, IE 10+, Opera */
            }
            100% {
                -webkit-transform: rotate(360deg);
                /* Chrome, Opera 15+, Safari 3.1+ */
                -ms-transform: rotate(360deg);
                /* IE 9 */
                transform: rotate(360deg);
                /* Firefox 16+, IE 10+, Opera */
            }
        }
        
        @keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
                /* Chrome, Opera 15+, Safari 3.1+ */
                -ms-transform: rotate(0deg);
                /* IE 9 */
                transform: rotate(0deg);
                /* Firefox 16+, IE 10+, Opera */
            }
            100% {
                -webkit-transform: rotate(360deg);
                /* Chrome, Opera 15+, Safari 3.1+ */
                -ms-transform: rotate(360deg);
                /* IE 9 */
                transform: rotate(360deg);
                /* Firefox 16+, IE 10+, Opera */
            }
        }
        .preloader-background {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #fff;
            position: fixed;
            z-index: 186816;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
                /*services*/
        
                .section-services .row {
            margin-left: 0px;
            margin-right: 0px;
        }
        
        .section-services div[class^="col"] {
            padding-left: 0px;
            padding-right: 0px;
        }
        
        .service-box {}
        
        .section-services-inner {
            padding-bottom: 40px;
        }
        
        .section-services-inner .service-box {
            margin-bottom: 30px;
        }
        
        .service-img {
            position: relative;
            overflow: hidden;
        }
        
        .service-img:after {
            content: "";
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            background: rgba(254, 237, 233, 0.6);
            opacity: 0;
            transition: all 0.8s ease 0s;
        }
        
        .service-img img {
            transition: all 0.8s ease 0s;
        }
        /*rnd**/
        
        .service-box:hover img {
            -webkit-transform: scale(1.2) rotate(5deg);
            transform: scale(1.1) rotate(5deg);
        }
        
        .service-box:hover .service-img:after {
            opacity: 1;
        }
        
        .service-contents {
            padding: 30px;
        }
        
        .service-contents h1 {
            text-transform: capitalize;
            font-size: 25px;
            position: relative;
        }
        
        .service-contents h1::after {
            content: "";
            display: block;
            height: 2px;
            width: 60px;
            background: #444;
            margin-bottom: 20px;
            margin-top: 5px;
        }
        
        .decor-text {
            font-style: italic;
        }
        
        .service-price {
            font-size: 18px;
        }
        
        .service-price span {
            display: inline-block;
            margin-right: 7px;
        }
        
        .service-color-one {
            /*background: rgba(233, 253, 254, 0.6);*/
        }
        
        .service-color-two {
            background: #e9ffea;
        }
        
        .service-color-three {
            background: #e9fdfe;
        }
        
        .service-color-one .service-img:after {
            background: rgba(255, 253, 254, 0.4);
        }
        
        .service-color-three .service-img:after {
            background: rgba(233, 253, 254, 0.6);
        }
        /**/
        nav {
            background-color: transparent;
        }
        /*nav ul a { color: rgb(33, 33, 33) !important }

        .hvr-underline-from-left:before {
            background: rgb(33, 33, 33) !important ;
        }
        .btn, .btn-large, .btn-small {
            background-color: rgb(255, 255, 255) !important ;
            color: rgb(33, 33, 33) !important ;
        }
        .pagination li.active {
            background-color: rgb(255, 255, 255) !important ;
            color: rgb(33, 33, 33) !important ;
        }        
        .pagination li.active a {
            background-color: rgb(255, 255, 255) !important ;
            color: rgb(33, 33, 33) !important ;
        }   */       
        footer input,
        footer textarea {
            color: #ffffff !important;
        } 
        footer{
            background : #1f1f1f !important;
            color: #ffffff !important;
        }  
        footer .btn, footer .btn-large, footer .btn-small{
            background : #ffffff !important;
            color: #1f1f1f !important;
        }                
        .texsectionone {
            color: #333333 !important;
        }    
        .hrdivo {
            width: 200px;
            height: 2px;
            background-color: #333333 !important;
        }  
        @media only screen and (max-width:800px){body td,th{width:100%!important;padding:15px 5px;display:block;text-align:left;vertical-align:middle;border-radius:2px}}
        #quemsomos tr {border-bottom: none;}  
        b, strong {
            font-weight: bolder !important;
        }
        /*.sidenav-trigger { color: rgb(33, 33, 33) !important }            */

         
        
        .mylogo {
            height: 80px;
            margin-top: -10px;
            margin-left: 35px;
            transition: all ease .9s;
        }
        
        .mitem {
            cursor: pointer;
        }
    </style>

    <div class="preloader-background" >
        <div class="preloader-wrapper big active" >
            <div id="loader-wrapper">
                <div id="loader"></div>
            </div>
        </div>
        <img class="mylogo" style="margin : 0px; position : absolute" src="/img/logo.jpg?v=1" alt="">
    </div>

    <script>      
        function loaderOut() {
            $('.preloader-background').delay(1700).fadeOut('slow');
            $('.preloader-wrapper').delay(1700).fadeOut();
            $('html,body').animate({
                scrollTop: $(location.hash).offset().top - 54
            }, 1e3, "easeInOutExpo");    
            //location.hash = "";      
            history.pushState("", document.title, window.location.pathname
                                                   + window.location.search);             
        }
    </script>
    </div>
        <script>
            M.AutoInit();
            $(document).ready(function () {
                $('.parallax').parallax();
                $('.sidenav').sidenav();
                $(".dropdown-trigger").dropdown();
            });

            $(document).ready(function () {
                $('select').formSelect();
            });

            $(document).ready(function () {
                $('.parallax').parallax();
            });
        </script>    
    <!-- /preLoader -->

    <div id="nc_topo"></div>
    <style>
        .nc_volta_topo {
            position: fixed;
            width: 60px;
            height: 60px;
            background-color: #fbd131;
            color: #fff;
            border-radius: 60px;
            bottom: 8px;
            right: 10px;
            cursor: pointer;
            display: none;
            z-index: 9999999
        }
        
        .nc_what {
            position: fixed;
            width: 60px;
            height: 60px;
            background-color: #13AF20;
            color: #fff;
            border-radius: 60px;
            bottom: 78px;
            right: 10px;
            cursor: pointer;
            font-size: 30px;
            z-index: 999999
        }
    </style>

    <a href="#nc_topo" class="scroll nc_volta_topo z-depth-4 animated bounceInRight flex" style="display: flex;">

        <i class=" material-icons ">arrow_drop_up</i>

    </a>
    
    <div id="sec1"></div>
    <link href="https://fonts.googleapis.com/css?family=Lexend+Deca&amp;display=swap" rel="stylesheet">
    <style>
        .miologo {
            height: 70px
        }
        
        .general-input2 {
            width: 53%!important;
            display: block!important;
            outline: 0!important;
            font-weight: 300!important;
            padding: 5px!important;
            font-size: 19px!important;
            margin-bottom: 8px!important;
            border: 1px solid #3b3b3b!important;
            -webkit-border-radius: 0px!important;
            -moz-border-radius: 0px!important;
            -ms-border-radius: 0px!important;
            -o-border-radius: 0px!important;
            border-radius: 0px!important;
            color: #222;
            text-transform: lowercase;
            background-color: rgba(255, 255, 255, 1.00)!important;
            border-right: transparent!important;
            border-left: transparent!important;
            border-bottom-right-radius: 0px!important;
            border-top-right-radius: 0px!important;
        }
        
        .icomail {
            border: 1px solid #3b3b3b!important;
            width: 50px;
            height: 57px;
            border-right: transparent!important;
            border-radius: 3px!important;
            border-bottom-right-radius: 0px!important;
            border-top-right-radius: 0px!important;
            color: #222;
            text-transform: lowercase;
            background-color: rgba(255, 255, 255, 1.00)!important;
            display: block!important;
            outline: 0!important;
            padding: 10px!important;
            font-size: 15px!important;
            margin-bottom: 8px!important;
            padding-top: 18px!important
        }
        
        .butaotopzera {
            cursor: pointer;
            min-width: 120px!important;
            display: block!important;
            outline: 0!important;
            font-weight: 900!important;
            padding: 10px!important;
            font-size: 19px!important;
            margin-bottom: 8px!important;
            border: 1px solid #222!important;
            -webkit-border-radius: 3px!important;
            -moz-border-radius: 3px!important;
            -ms-border-radius: 3px!important;
            -o-border-radius: 3px!important;
            border-radius: 3px!important;
            color: #fff;
            background-color: #2ecc71;
            height: 57px;
            border-left: transparent!important;
            border-bottom-left-radius: 0px!important;
            border-top-left-radius: 0px!important;
        }
        
        .butaotopzera:hover {
            background-color: #fff!important;
            color: #222!important;
            border-left: 1px solid #3b3b3b!important;
            font-weight: 700!important
        }
        
        @media screen and (max-width: 654px) {
            .miologo {
                height: 50px
            }
            .icomail {
                height: 54px!important;
                padding-top: 13px!important;
            }
            .general-input2 {
                min-width: 250px!important;
                width: 60%!important;
                display: block!important;
                outline: 0!important;
                font-weight: 300!important;
                padding: 5px!important;
                font-size: 15px!important;
                margin-bottom: 8px!important;
                border: 1px solid #3b3b3b!important;
                -webkit-border-radius: 0px!important;
                -moz-border-radius: 0px!important;
                -ms-border-radius: 0px!important;
                -o-border-radius: 0px!important;
                border-radius: 0px!important;
                color: #3b3b3b;
                text-transform: lowercase;
                background-color: rgba(255, 255, 255, 1.00)!important;
                border-left: transparent!important;
                border-right: #3b3b3b, solid!important;
                border-bottom-right-radius: 3px!important;
                border-top-right-radius: 3px!important;
            }
            .butaotopzera {
                min-width: 300px!important;
                width: 90%;
                outline: 0!important;
                padding: 10px!important;
                margin-bottom: 8px!important;
                border: 1px solid !important;
                -webkit-border-radius: 10px!important;
                -moz-border-radius: 10px!important;
                -ms-border-radius: 10px!important;
                -o-border-radius: 10px!important;
                border-radius: 10px!important;
                color: #fff;
                background-color: #2ecc71!important;
                height: 57px;
                text-transform: uppercase;
                border-left: #3b3b3b!important;
                border-bottom-left-radius: 10px!important;
                border-top-left-radius: 10px!important;
                margin-top: 20px
            }
            .butaotopzera center h6 {
                font-weight: 900!important;
                font-family: 'Lexend Deca', sans-serif;
                font-size: 15px!important;
            }
        }
    </style>

    <style>
        .corone {
            background-color: #fff;
        }
    </style>
    <style>
        .manimenui {
            width: 70%;
            justify-content: flex-end;
            padding-right: 20px
        }
        
        .mitem {
            height: 50px;
            color: #000;
            font-family: 'Rubik', sans-serif;
            font-size: 18px;
            border-radius: 10px;
            min-width: 100px;
            width: 120px;
            margin-left: 10px;
            transition: all ease 0.5s;
        }
        
        .mitem:hover {
            background-color: #fbd131;
            color: #fff;
        }
        
        .ativare {
            background-color: #000!important;
            color: #fff!important;
        }
        
        #ololo {
            background-color: transparent;
            position: absolute
        }
    </style>

    <style>
        body::-webkit-scrollbar-track {
            background-color: #2c3e50;
        }
        
        body::-webkit-scrollbar-track-piece {
            background-color: rgb(255, 255, 255);
            border-radius: 10px;
        }
        
        body::-webkit-scrollbar {
            width: 9px;
            background: #000;
        }
        
        /*body::-webkit-scrollbar-thumb {
            background: rgb(33, 33, 33);
            border-radius: 1px;
        }*/
        
        #modal-content::-webkit-scrollbar-track {
            background-color: #2c3e50;
        }
        
        #modal-content::-webkit-scrollbar-track-piece {
            background-color: rgb(255, 255, 255);
            border-radius: 10px;
        }
        
        #modal-content::-webkit-scrollbar {
            width: 9px;
            background: #000;
        }
        
        /*#modal-content::-webkit-scrollbar-thumb {
            background: rgb(33, 33, 33);
            border-radius: 1px
        }*/
        
        imen::-webkit-scrollbar-track {
            background-color: #2c3e50;
        }
        
        imen::-webkit-scrollbar-track-piece {
            background-color: #222;
            border-radius: 10px;
        }
        
        imen::-webkit-scrollbar {
            width: 9px;
            background: #000;
        }
        
        imen::-webkit-scrollbar-thumb {
            background: rgba(138, 26, 28, 1.00);
            border-radius: 1px
        }
        
        .qsomo::-webkit-scrollbar-track {
            background-color: #2c3e50;
        }
        
        .qsomo::-webkit-scrollbar-track-piece {
            background-color: #222;
            border-radius: 10px;
        }
        
        .qsomo::-webkit-scrollbar {
            width: 9px;
            background: #000;
        }
        
        .qsomo::-webkit-scrollbar-thumb {
            background: #fbd131;
            border-radius: 1px
        }
        
        @media screen and (max-width: 1116px) {
            .manimenui {
                display: none;
            }
            .alternativemenu {
                position: fixed;
                width: 40px;
                height: 40px;
                z-index: 999999;
                display: flex;
                flex-direction: column;
                left: 10px;
            }
            .hico {
                width: 40px;
                background-color: #000;
                height: 3px;
                transition: all ease 0.5s;
            }
        }
.hrdivo {
    width: 200px;
    height: 2px;
    background-color: #fbd131;
}        
    </style>
    <script>
        $(document).ready(function() {
            var contad = "0";

            $(".alternativemenu").click(function() {

                if (contad == "0") {

                    $(".hor").css({
                        "transform": "rotateZ(35deg)",
                        "margin-top": "10px"
                    });
                    $(".meiot").css({
                        "width": "0px"
                    });
                    $(".anth").css({
                        "transform": "rotateZ(-35deg)",
                        "margin-top": "-60px"
                    }, );

                    $(".submenu").css({
                        "margin-top": "0px"
                    }, );

                    contad = "1";

                } else if (contad == "1") {

                    $(".hor").css({
                        "transform": "rotateZ(0deg)",
                        "margin-top": "0px"
                    });
                    $(".meiot").css({
                        "width": "40px"
                    });
                    $(".anth").css({
                        "transform": "rotateZ(0deg)",
                        "margin-top": "0px"
                    }, );

                    $(".submenu").css({
                        "margin-top": "-200%"
                    }, );
                    contad = "0";
                }

            });

        });
    </script>

<!--Navbar-->

<!--/Navbar-->
    
    <link href="https://fonts.googleapis.com/css?family=Roboto&amp;display=swap" rel="stylesheet">
    <style>
        .letteri {
            width: 50%;
            margin-top: 0px;
            flex-direction: column;
            align-content: center;
            align-items: center;
            justify-content: center
        }
        
        .letteri h4 {
            font-family: 'Roboto', sans-serif;
            font-size: 47px;
            color: #fbd131;
            font-weight: 900;
            margin-top: 100px;
            text-align: center;
            min-width: 300px;
            max-width: 600px;
        }
        
        .nc_bg {
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        
        .nc_filter {
            background-image: url(filter4.png);
            background-size: contain;
        }
        
        .nc_filter::before {
            background: blur(2px)
        }
        
        .nc_filter img {
            position: absolute;
            height: 80%;
            bottom: 0;
            left: 50%;
            width: auto;
        }
        
        .aiaia {
            -webkit-font-weight: 100!important;
            -moz-font-weight: 100!important;
            -ms-font-weight: 100!important;
            -o-font-weight: 100!important;
            font-size: 3rem!important;
            -webkit-letter-spacing: .90rem;
            -moz-letter-spacing: .90rem;
            -ms-letter-spacing: .90rem;
            -o-letter-spacing: .90rem;
        }
        
        @media screen and (max-width: 500px) {
            .aiaia {
                font-weight: 100!important;
                font-size: 2rem!important;
                letter-spacing: .4rem;
            }
            .letteri {
                width: 100%;
                margin-top: 0px
            }
            .letteri h4 {
                font-family: 'Roboto', sans-serif;
                font-size: 40px;
                font-weight: 900;
                margin-left: 0%;
                margin-top: -20px;
                text-align: center;
                min-width: 50px;
                max-width: 290px;
            }
            .nc_filter img {
                position: absolute;
                height: 40%;
                bottom: 0;
                left: 15%;
            }
        }
        
        .startb {
            font-family: 'Roboto', sans-serif;
            font-size: 20px;
            font-weight: 900;
            margin-top: 10px;
            width: 250px;
            height: 60px;
            background-color: #fbd131;
            color: #fff;
            border: 1px solid transparent;
            ;
        }
        
        .startb:hover {
            background-color: transparent;
            color: #000;
        }
    </style>

    <style>
        /* as imagens responsivas*/
        
        .lofundilho {
            background-image: url(https://www.sejaincrivel.com.br/img/ccbg4.jpg);
        }
        
        @media screen and (max-width: 500px) {
            .lofundilho {
                background-image: url(https://www.sejaincrivel.com.br/img/ccbg.jpg);
            }
            .imageflix {
                display: none
            }
        }
        .select-wrapper {    height: 50px;}        
    </style>

        <!--Secoes conteudo-->
        <style>.m3r_cart_tools{display:none !important;}</style>
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="https://m3rsistemas.com.br/style/animate.css" rel="stylesheet" type="text/css" />
<link href="https://m3rsistemas.com.br/patterns/patternsm3r.css?c0000016" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css" />
<link href="https://m3rsistemas.com.br/inicial/style/materialize.min.css" rel="stylesheet" type="text/css" />
<link href="/style/3rocket-style.css" rel="stylesheet" type="text/css" />
<link href="https://m3rsistemas.com.br/js/ckeditor/plugins/copyformatting/styles/copyformatting.css" rel="stylesheet" type="text/css" />
<link href="https://m3rsistemas.com.br/js/ckeditor/plugins/tableselection/styles/tableselection.css" rel="stylesheet" type="text/css" /><!--body-->
<style type="text/css">/**/
section#main-slider {
    margin-top: 35px;
}
        /* #navframe {
            box-shadow: none !important;
            background-color: rgb(255, 255, 255) ; color: rgb(33, 33, 33);
            height: 110px;
        }
        nav ul li a { color: rgb(33, 33, 33) }
        .pagination li.active {
        background-color: rgb(33, 33, 33) !important ;
    }
        .hvr-underline-from-left:before {
            background: rgb(33, 33, 33) !important ;
        }  
        .hrdivo {
            width: 200px;
            height: 2px;
            background-color: rgb(33, 33, 33) !important ;
        }      
        .sidenav-trigger{
                color: rgb(33, 33, 33) !important;
        }
#menutodo {
    margin-top: 0px;    
}    
.hvr-underline-from-left:before {
    background: rgb(33, 33, 33) !important ;
}    
nav i.fa {
    color: rgb(33, 33, 33) !important;
}
.brand-logo {
    margin: 20px;
    margin-left: 3%;
}
#mylogo {    
    margin-left: 0px;
}
#menudeopcoes .fa{
    font-size: 24px;
} */

</style>
<!-- navbar -->
<div class="navbar-fixed" >
<nav id="navframe">
<div class="nav-wrapper" id="menutodo"><a class="brand-logo" href="#home"><img alt="" class="mylogo" src="/img/logo.jpg?v=11" style="    margin-top: 1px;     height: 60px;" /></a> <a class="sidenav-trigger" data-target="mobile-demo" href="#"><i class="material-icons">menu</i></a>
<ul class="right valign-wrapper" id="menudeopcoes" style="height: -webkit-fill-available;">
    
    
    
    
        
    
</ul>
<ul class="right valign-wrapper" id="menudeopcoes" style="height: -webkit-fill-available;">
	<li><a class="scroll hvr-underline-from-left" href="#home" style="color : rgb(33, 33, 33)!important;">Home</a></li>
	<li>&nbsp;</li>	
    <li><a class="scroll hvr-underline-from-left" href="#sec_serv">Produtos</a></li>
    <li><a class="scroll hvr-underline-from-left" href="#quemsomos">Quem Somos</a></li>    
    <li><a class="scroll hvr-underline-from-left" href="#sec_cont">Contato</a></li>    
    
</ul>


</div>
</nav>
</div>



<ul class="sidenav" id="mobile-demo" >
	<li style="
    background: url() no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-bottom: 15px;
    padding: 15px 0 0 15px;    height: 120px;">

	<div class="user-view">
	<div class="background"><!-- Insira a url da imagem do user --><img src="" /></div>
	<a><span class="white-text name">meu site </span></a></div>
	</li>
	<li><a class="scroll hvr-underline-from-left sidenav-close" href="#home" style="color : #c62828!important;">Home</a></li>


    <li><a class="scroll hvr-underline-from-left sidenav-close"href="#sec_serv">Produtos</a></li>    
    <li><a class="scroll hvr-underline-from-left sidenav-close" href="#quemsomos">Quem Somos</a></li>     
    <li><a class="scroll hvr-underline-from-left sidenav-close" href="#sec_cont">Contato</a></li>
</ul>
<!-- fim da navbar normal --><!--Efeito scroll--><script src="https://m3rsistemas.com.br//js/angular.min.js"></script><script src="https://m3rsistemas.com.br//js/angular-sanitize.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<style>



// RESTYLE OWL CAROUSEL NAVS WITH MATERIAL ICONS
// Reference: http://stackoverflow.com/a/36889571/2218697
.owl-carousel .owl-nav .owl-prev,
  .owl-carousel .owl-nav .owl-next,
  .owl-carousel .owl-dot {
    font-family: 'Material Icons';
    font-size: 4rem;
}
.owl-nav {height:0;margin:0;}
.owl-carousel .owl-nav .owl-prev:before{
    font-family: "Material Icons";
    content: "\E5CB";
    font-size: 4rem;
    margin-left:16px;
    position: absolute;
	  top: 40%;
    left: 0px;
    height: auto;
    text-shadow: 0px 0px 5px rgba(0,0,0,0.1),
                 0px 0px 8px rgba(0,0,0,0.05),
                 0px 0px 12px rgba(0,0,0,0.05);
}
.owl-carousel .owl-nav .owl-next:after{
    font-family: "Material Icons";
    content: "\E5CC";
    font-size: 4rem;
    margin-right: 16px;
    position: absolute;
	  top: 40%;
    right: 0px;
    height: 760px;
    text-shadow: 0px 0px 5px rgba(0,0,0,0.1),
                 0px 0px 8px rgba(0,0,0,0.05),
                 0px 0px 12px rgba(0,0,0,0.05);
}

	div.owl--text {
    position: absolute;
    text-align: center;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20%;
    margin-left: auto;
    margin-right: auto;
    margin: auto;
    width: 100%;
    height: 100%;
    /*background:rgba(140, 134, 134, 0.5)*/
		
	}
  #main-slider {
    margin-top: 46px !important;
}
   #ba.owl-theme .owl-dots .owl-dot:last-child {
  display: none;
}
.owl-carousel .owl-item img {min-height: 385px;}
@media only screen and (max-width: 600px) {
  .owl-carousel .owl-item img {
    display: block;
    width: 100%;
    height: auto;
  }
  .owl-carousel .owl-stage-outer {
    /*height: 600px;*/
  }
  .owl-carousel .owl-item img {min-height: unset;}
  div.owl--text {
    padding: 25% 5%;
  }
  #sec_serv{
    padding-top: 0px !important;
  }
}

</style>


<section id="main-slider" style="max-height: 800px; overflow: hidden;">
   <div id="home" class="owl-carousel owl-theme">
     
   </div>
</section>


<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<script>
$(document).ready(function(){
  var owl = $('#home'); 
  // OWL CAROUSEL - https://owlcarousel2.github.io/OwlCarousel2/
  owl.owlCarousel(
    {
      lazyLoad:true,
  loop:true,
  margin:0,
  navSpeed:500,
  nav:false,
  autoplay: true,
  rewind: true,
  items: 1,
  autoPlay: 3000,
  navigation: false,
  slideSpeed: 300,
  paginationSpeed: 400,
  items: 1,   
  dots: false,
  autoplayHoverPause:true,

      animateIn: 'fadeIn',
  singleItem: true  
    }
  );
  

  // owl.trigger('stop.owl.autoplay');
  // setTimeout(myFunction, 100); 
  // function myFunction() {
     
  //   owl.trigger('play.owl.autoplay',[50000,3000]);
  // }    
function FnOnInitialize(event){   
   var $currentItem = $('.owl-item', owl).eq(event.item.index);
   var $elemsToanim = $currentItem.find("[data-animation-out]");
   setAnimation ($elemsToanim, 'out');
}
function fnOnInitialized(event){
   var $currentItem = $('.owl-item', owl).eq(event.item.index);
   var $elemsToanim = $currentItem.find("[data-animation-in]");    
   setAnimation ($elemsToanim, 'in');
}
  // add animate.css class(es) to the elements to be animated
  function setAnimation ( _elem, _InOut ) {
    // Store all animationend event name in a string.
    // cf animate.css documentation
    var animationEndEvent = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

    _elem.each ( function () {
      var $elem = $(this);
      var $animationType = 'wow animated ' + $elem.data( 'animation-' + _InOut );

      $elem.addClass($animationType).one(animationEndEvent, function () {
        $elem.removeClass($animationType); // remove animate.css Class at the end of the animations
      });
    });
  }

// Fired before current slide change
  owl.on('change.owl.carousel', function(event) {
     
      var $currentItem = $('.owl-item', owl).eq(event.item.index);
      var $elemsToanim = $currentItem.find("[data-animation-out]");
      setAnimation ($elemsToanim, 'out');
  });
  owl.on('initialize.owl.carousel', function(event) {   
      var $currentItem = $('.owl-item', owl).eq(event.item.index);
      var $elemsToanim = $currentItem.find("[data-animation-out]");
      setAnimation ($elemsToanim, 'out');
  });

// Fired after current slide has been changed
  var round = 0;
  owl.on('changed.owl.carousel', function(event) {
   //alert(event.item.index);
   if (event.item.index == 2)  {
         //alert($('.owl-item .item').length);
         //alert(event.page.count);
         //owl.trigger('stop.owl.autoplay');
         //owl.trigger('to.owl.carousel',[1,50000]);
         // owl.trigger('refresh.owl.carousel');
         // owl.trigger('play.owl.autoplay',[1000]);

         //  owl.trigger('refresh.owl.carousel');
         //  owl.trigger('destroy.owl.carousel');
         //  owl.trigger('to.owl.carousel');
          
      }
      var $currentItem = $('.owl-item', owl).eq(event.item.index);
      var $elemsToanim = $currentItem.find("[data-animation-in]");
    
      setAnimation ($elemsToanim, 'in');
  })
  
  owl.on('translated.owl.carousel', function(event) {
    console.log (event.item.index, event.page.count);
    
      if (event.item.index == (event.page.count - 1))  {
        if (round < 1) {
          round++
          console.log (round);
        } else {
          owl.trigger('stop.owl.autoplay');
          var owlData = owl.data('owl.carousel');
          owlData.settings.autoplay = false; //don't know if both are necessary
          owlData.options.autoplay = false;
          owl.trigger('refresh.owl.carousel');
        }
      }
  });  
 
});

</script>

        <div class="container" id="sec_serv" ng-app="produtosApp" ng-controller="ProdutosCtrl">

    <div class="section">
        <style>
.card .card-action {
position: relative;
background-color: inherit;
border-top: 1px solid rgba(160,160,160,0.2);
padding: 16px 20px;
}                    
            .card .card-image img {
                width: 305px;
                height: 229px;
            }
            
            .card-image {
                /*width: 350px;*/
                height: 300px;
            }
            
            .pagination li.active {
                background-color: rgb(255, 255, 255) !important;"
                color: rgb(33, 33, 33) !important;"
            }
            
            .browser-default-uls {
                ul {
                    padding-left: 30px;
                    margin-top: 10px;
                    margin-bottom: 15px;
                    li {
                        list-style-type: disc!important;
                        ul {
                            li {
                                list-style-type: circle!important;
                            }
                        }
                    }
                }
            }
            
            .browser-default-uls {
                overflow: visible !important;
            }
            
            .preco {
                position: absolute;
                top: -10px;
                left: -10px;
                /*
                *  Styling only, the below can be changed or removed
                *  depending on your use case
                */
                height: 20px;
                padding: 10px 10px;
                z-index: 99;                
                background-color: rgb(255, 255, 255);"
                color: rgb(33, 33, 33);"
                background-color: #222;
                width: 105px;
                height: 105px;
                border-radius: 64px;
                border: 2px solid #fff;
            }
            
            .preco div {
                position: relative;
                left: -2px;
                top: 8px;
                width: 90px;
                height: 90px;
                color: white;
                text-align: left;
                size: 6
            }
            
            .card-image.materialboxed.active:hover {
                -ms-transform: scale(1.2);
                /* IE 9 */
                -webkit-transform: scale(1.2);
                /* Safari 3-8 */
                transform: scale(1.2);
            }
        </style>

        <div class="row">
            <div class="col s12">
                <div class="section" ng-if="datalen(0, 'maior')">

                    <div class="col s12">
                        <center>
                            <h3 class="texsectionone wow fadeInUp" style="font-family: 'Maven Pro', sans-serif;">Produtos</h3>
                        </center>
                        <center>
                            <div class="hrdivo"></div>
                        </center>
                    </div>

                    <div class="row">
                        <div class="col s12 m6 l4">
                            <div class="input-field col s12">
                                <i class="material-icons prefix">search</i>
                                <input ng-model="q" id="search" class="form-control" placeholder="Buscar Produto">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col s12 m6 l4" ng-repeat="item in data | filter:q | startFrom:currentPage*pageSize | limitTo:pageSize">

                            <div class="card browser-default-uls wow {{getAnimate(item)}}" id="card{{item.id}}">
                                <div class="row preco wow fadeInUp" id="preco{{item.id}}" ng-show="temPreco(item.de,item.por)">
                                    <div class="truncate"><font size="1" ng-show="temDe(item.de)">De <strike>R${{item.de}}</strike></font>
                                        <br>
                                        <font size="2" ng-show="temPor(item.por)">Por R${{item.por}}</font></div>
                                </div>
                                
                                <div class="card-image" style="background-image:url({{item.imagem}}); background-size:cover;background-position:top;">

                                    <!--img width="305" height="229" src="{{item.imagem}}" class="responsive-img wp-post-image" alt="Dispatch Coffee Saint-Laurent" title="Projetos Execultivos e Arquitetônicos"-->
                                    <span class="card-title home col m8 l8 truncate" style="opacity: 0.79; background-color: rgb(255, 255, 255); width:100%; color:#fff;">                                            
                                        {{item.nome}} 
                                    </span>

                                </div>
                                <div class="card-action" style="background-color: rgb(33, 33, 33);">
                                    <center>
                                        
                                        <a href="/produto/?item={{item.nome}}" style="color: rgb(255, 255, 255);margin-right: 8px;">
                                            <i class="fa fa-search" aria-hidden=" true"></i> Saiba mais</a>
                                    </center>

                                </div>
                                
                                <div class="card-reveal browser-default">
                                    <i class="material-icons right right listExpand card-title" ng-click="reval(false, item.id )">close</i>
                                    <span class="grey-text text-darken-4 card-title">{{item.nome}}</span>

                                    <p ng-bind-html=item.descricao style="list-style-type: inherit;"></p>
                                    <!--button ng-click="imagetop( item.imagem )"   data-target="modal1" class="btn modal-trigger">Ver Foto</button-->
                                    <!--a ng-click="selPagto(item);" class="waves-effect waves-light btn"><i class="material-icons left">add_shopping_cart</i>Pedir Item</a-->
                                    <p><a href="https://api.whatsapp.com/send?phone=&text=Olá,%20Estou%20entrando%20em%20contato%20para%20verificar%20a%20disponibilidade%20de%20{{item.nome}}"><i class="fa fa-whatsapp"></i> Verifique a disponibilidade</a></p>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>

                <!--div class="section" ng-if="datalen(2, 'igual')">

                    <div class="col s12">
                        <center>
                            <h3 class="texsectionone wow fadeInUp" style="font-family: 'Maven Pro', sans-serif;">Produtos</h3>
                        </center>
                        <center>
                            <div class="hrdivo"></div>
                        </center>
                    </div>

                    <div class="row">
                        <div class="col s12 m6 l4">
                            <div class="input-field col s12">
                                <i class="material-icons prefix">search</i>
                                <input ng-model="q" id="search" class="form-control" placeholder="Buscar Produto">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col s12 m6" ng-repeat="item in data | filter:q | startFrom:currentPage*pageSize | limitTo:pageSize">

                            <div class="card browser-default-uls wow {{getAnimate(item)}}" id="card{{item.id}}">
                                <div class="row preco wow fadeInUp" id="preco{{item.id}}" ng-show="temPreco(item.de,item.por)">
                                    <div class="truncate"><font size="1" ng-show="temDe(item.de)">De <strike>R${{item.de}}</strike></font>
                                        <br>
                                        <font size="2" ng-show="temPor(item.por)">Por R${{item.por}}</font></div>
                                </div>
                                
                                <div class="card-image" style="background-image:url({{item.imagem}}); background-size:cover;background-position:top; height: 450px;">

                                    
                                    <span class="card-title home col m8 l8 truncate" style="background:rgba(0, 0, 0, 0.79); width:100%; color:#fff;">                                            
                                        {{item.nome}} 
                                    </span>

                                </div>
                                <div class="card-action">
                                    <center>
                                        <a class="m3r_cart_tools" ng-click="add_cart( item.id )" style="cursor:pointer;color: #00845c;margin-right: 8px;"><i class="fa fa-cart-plus" aria-hidden="true"></i> Add Carrinho</a><a class="m3r_cart_tools" style="color: #00845c;margin-right: 8px;">|</a>
                                        <a href="/produto/?item={{item.nome}}" style="color: #00845c;margin-right: 8px;">
                                            <i class="fa fa-search" aria-hidden=" true"></i> Saiba mais</a>
                                    </center>

                                </div>
                                
                                <div class="card-reveal browser-default">
                                    <i class="material-icons right right listExpand card-title" ng-click="reval(false, item.id )">close</i>
                                    <span class="grey-text text-darken-4 card-title">{{item.nome}}</span>

                                    <p ng-bind-html=item.descricao style="list-style-type: inherit;"></p>

                                    <p><a href="https://api.whatsapp.com/send?phone=&text=Olá,%20Estou%20entrando%20em%20contato%20para%20verificar%20a%20disponibilidade%20de%20{{item.nome}}"><i class="fa fa-whatsapp"></i> Verifique a disponibilidade</a></p>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>
                <div ng-if="datalen(1, 'igual')">
                    <div ng-bind-html="getData()[0].descricao | trusted"></div>
                </div-->                        

            <form ng-if="datalen(0, 'igual')" id="cta_01"
                action="/controller/api/inscrito-site/set-inscritos/" method="post">
                <div class="w100 flex white" style="
  width: 100%;
  min-width: 290px;
  padding-top:20%; 
  ">
                    <div class="emailbox flex " style="
     width: 90%;
     min-width: 310px;
     border-bottom: 1px solid #fff;
     border-left: 1px solid #fff;
     border-right: 1px solid #fff;
     border-top: 1px solid #fff;
     background-color: #fff;
     min-height: 100px;
     margin-top: 20px;
     color: #000;
     z-index: 222;
     ">
                        <input type="hidden" name="_method" value="POST">
                        <input type="hidden" name="redirect" value="/obrigado/">
                        <div class="w40 flex" style="text-align: center;flex-direction: column;width: 40%;">
                            <h5 style="font-weight: 900;margin: 10px;font-family: 'Lexend Deca', sans-serif;">meu site</h5>
                            <h6 style="color:#000">Cadastre-se aqui para receber nossas novidades exclusivas no seu
                                e-mail.</h6>
                        </div>
                        <div class="w60 flex pomba" style="justify-content: center;width: 60%;">
                            <div class="icomail flex" style="
           border: 1px solid #3b3b3b!important;
           width: 50px;
           height: 57px;
           border-right: transparent!important;
           border-radius: 3px!important;
           border-bottom-right-radius: 0px!important;
           border-top-right-radius: 0px!important;
           color: #222;
           text-transform: lowercase;
           background-color: rgba(255, 255, 255, 1.00)!important;
           display: block!important;
           outline: 0!important;
           padding: 10px!important;
           font-size: 15px!important;
           margin-bottom: 8px!important;
           padding-top: 18px!important;
           "><i class="material-icons">mail_outline</i></div>
                            <input type="text" name="email" class="general-input2"
                                placeholder="Insira seu melhor e-mail" style="
           width: 53%!important;
           display: block!important;
           outline: 0!important;
           font-weight: 300!important;
           padding: 5px!important;
           font-size: 19px!important;
           margin-bottom: 8px!important;
           border: 1px solid #3b3b3b!important;
           -webkit-border-radius: 0px!important;
           -moz-border-radius: 0px!important;
           -ms-border-radius: 0px!important;
           -o-border-radius: 0px!important;
           border-radius: 0px!important;
           color: #222;
           text-transform: lowercase;
           background-color: rgba(255, 255, 255, 1.00)!important;
           border-right: transparent!important;
           border-left: transparent!important;
           border-bottom-right-radius: 0px!important;
           border-top-right-radius: 0px!important;
           width: 50%;
           ">
                            <a onclick="document.getElementById('cta_01').submit();" class="butaotopzera "
                                style="padding-bottom: 10px;cursor: pointer;min-width: 120px!important;display: block!important;outline: 0!important;font-weight: 900!important;padding: 10px!important;font-size: 19px!important;margin-bottom: 8px!important;border: 1px solid #222!important;-webkit-border-radius: 3px!important;-moz-border-radius: 3px!important;-ms-border-radius: 3px!important;-o-border-radius: 3px!important;border-radius: 3px!important;color: #fff;background-color: rgb(55, 71, 79);height: 57px;border-left: transparent!important;border-bottom-left-radius: 0px!important;border-top-left-radius: 0px!important;">
                                <center>
                                    <h6>Ir Para Lista Vip</h6>
                                </center>
                            </a>
                        </div>
                    </div>
                </div>
                <style>
                    .emailbox {
                        width: 90%;
                        min-width: 310px;
                        border-bottom: 1px solid #fff;
                        border-left: 1px solid #fff;
                        border-right: 1px solid #fff;
                        border-top: 1px solid #fff;
                        background-color: #fff;
                        min-height: 100px;
                        
                        color: #000;
                        z-index: 222;
                    }

                    @media screen and (max-width: 654px) {
                        .emailbox {
                            width: 98%;
                        }
                    }
                </style>
            </form>

                <div class="row"  ng-if="datalen()"> 
                    <center>
                        <ul class="pagination">
                            <li class="{}" ng-disabled="currentPage == 0" ng-click="goPage(currentPage-1)">
                                <a class="scroll" href="#sec_serv">
                                    <i class="material-icons">chevron_left</i></a>
                            </li>
                            <li class="{{getClass(p.page)}}" ng-repeat="p in pages"><a class="scroll" href="#sec_serv" ng-click="goPage(p.page-1)">{{p.page}}</a></li>

                            <li class="{}">
                                <a class="scroll" href="#sec_serv">
                                <i class = "material-icons" ng-disabled="currentPage >= numberOfPages()" ng-click="goPage(currentPage + 1)">chevron_right</i>
                            </a>
                            </li>
                        </ul>
                    </center>
                </div>
                <script>
                    var app = angular.module('produtosApp', ['ngSanitize']);

                    app.controller('ProdutosCtrl', ['$scope', '$filter', '$http', function($scope, $filter, $http) {
                        $scope.currentPage = 0;
                        $scope.pageSize = 8;
                        $scope.data = [];
                        $scope.pages = [];
                        $scope.q = '';
                        $scope.pgClassPrev = 'disabled';
                        $scope.pgClassnext = 'disabled';

                        $scope.index = -1;
                        $scope.datalen = function(n, compara){ 
                            if(n===undefined){return $scope.data.length > 0;}  
                            if(compara===undefined){return $scope.data.length == n;} 
                            if(compara==='maior'){return $scope.data.length > n;} 
                            if(compara==='menor'){return $scope.data.length < n;} 
                            if(compara==='igual'){return $scope.data.length == n;}                                                                       
                            return $scope.data.length == n;
                        }
                        $scope.getAnimate = function(item) {
                        $scope.index = $scope.data.indexOf(item) + 1;
                        
                            if ($scope.index % 3 == 0) {
                                return "fadeInRight";
                            }
                            if (($scope.index + 1) % 3 == 0) {
                                return "fadeInUp";
                            }
                            if (($scope.index + 2) % 3 == 0) {
                                return "fadeInLeft";
                            }							                                
                        }
                        $scope.getData = function() {
                            return $filter('filter')($scope.data, $scope.q)
                        }
                        $scope.numberOfPages = function() {
                            return Math.ceil($scope.getData().length / $scope.pageSize);
                        }
                        $scope.temPreco = function(de, por) {
                            return (de.trim().length > 0 || por.trim().length > 0)
                        }
                        $scope.temDe = function(de) {
                            return (de.trim().length > 0)
                        }
                        $scope.temPor = function(por) {
                            return (por.trim().length > 0)
                        }
                        $scope.reval = function(open, id) {
                            if (open) {
                                $("#preco" + id).hide();

                            } else {
                                $("#preco" + id).show();
                                $("#card" + id).css({
                                    "overflow": "visible"
                                });
                            }
                        }
                        $scope.imagetop = function($lifot) {
                            $('.fotog').css({
                                'background-image': 'url(' + $lifot + ')'
                            });
                        }
                        $scope.getClass = function(x) {
                            $scope.pgClassPrev = 'waves-effect';
                            $scope.pgClassNext = 'waves-effect';
                            if ($scope.currentPage == 0) {
                                $scope.pgClassPrev = 'disabled';
                            }
                            if ($scope.currentPage == ($scope.numberOfPages() - 1)) {
                                $scope.pgClassNext = 'disabled';
                            }
                            if ($scope.currentPage + 1 == x) {
                                return "active";
                            }
                            return "waves-effect";
                        }
                        $scope.goPage = function(n) {
                            if (n > ($scope.numberOfPages() - 1)) {
                                return $scope.currentPage = $scope.numberOfPages() - 1;
                            }
                            if (n < 0) {
                                return $scope.currentPage = 0;
                            }
                            $scope.pgClassPrev = 'waves-effect';
                            $scope.pgClassNext = 'waves-effect';
                            return $scope.currentPage = n;
                        }

                        $scope.selPagto = function(produto){
                           mbox.custom({message: 'Preencha os daddos e selecione a melhor forma de pagamento? <div class="row"><div class="input-field col l3 m3 s3"><input autofocus type="number" name="quantidade" id="quantidade" min="1" max="100" value="1"><label for="quantidade">Qtd.</label></div><div class="input-field col l12 m12 s12"><input type="text" name="nome" id="nome_cliente"><label for="nome">Nome Completo.</label></div><div class="input-field col l6 m6 s6"><input type="email" name="email" id="email_cliente" class="validate"><label for="email">e-maiil.</label></div><div class="input-field col l6 m6 s6"><input type="text" name="telefone" id="telefone" class="validate"><label for="telefone">Telefone</label></div></div>',
                                options: {}, // see Options below for options and defaults
                                buttons: [
                                    {
                                        label: '<i class="fa fa-money"></i> Dinheiro',
                                        color: 'orange darken-2',
                                        callback: function() {
                                            $.ajax({
                                                url: "index.php",
                                                type: "POST",
                                                data: {                
                                                    "nome_cliente" : document.getElementById('nome_cliente').value,
                                                    "produto" : produto.nome,
                                                    "email_cliente" : document.getElementById('email_cliente').value,
                                                    "telefone" : document.getElementById('telefone').value,
                                                    "quantidade" : document.getElementById('quantidade').value,
                                                    "forma_pagto" : "Dinheiro"
                                                },
                                                success: function (data) {                                                                  
                                                   mbox.alert('Pedido enviado com sucesso! Em breve um de nossos consultores entrará em contato.')                                       
                                                }
                                            });                        
                                        
                                        }
                                    },
                                    {
                                        label: '<i class="fa fa-credit-card"></i> Cartão',
                                        color: 'orange darken-2',
                                        callback: function() {
                                            $.ajax({
                                                url: "index.php",
                                                type: "POST",
                                                data: {                
                                                    "nome_cliente" : document.getElementById('nome_cliente').value,
                                                    "produto" : produto.nome,
                                                    "email_cliente" : document.getElementById('email_cliente').value,
                                                    "telefone" : document.getElementById('telefone').value,
                                                    "quantidade" : document.getElementById('quantidade').value,
                                                    "forma_pagto" : "Cartão"
                                                },
                                                success: function (data) {                                                                  
                                                   mbox.alert('Pedido enviado com sucesso! Em breve um de nossos consultores entrará em contato.')                                       
                                                }
                                            });                           

                                        }
                                    },
                                    {
                                        label: '<i class="fa fa-barcode"></i> Boleto',
                                        color: 'orange darken-2',
                                        callback: function() {                        
                                            $.ajax({
                                                url: "index.php",
                                                type: "POST",
                                                data: {                
                                                    "nome_cliente" : document.getElementById('nome_cliente').value,
                                                    "produto" : produto.nome,
                                                    "email_cliente" : document.getElementById('email_cliente').value,
                                                    "telefone" : document.getElementById('telefone').value,
                                                    "quantidade" : document.getElementById('quantidade').value,
                                                    "forma_pagto" : "Boleto"
                                                },
                                                success: function (data) {                                                                  
                                                   mbox.alert('Pedido enviado com sucesso! Em breve um de nossos consultores entrará em contato.')                                       
                                                }
                                            });   
                                        }
                                    },
                                    {
                                        label: 'X Sair',
                                        color: 'red darken-2',
                                        callback: function() {
                                            mbox.close();
                                        }
                                    }                                                
                                ]
                            });
                        }
                        $scope.add_cart = function($id) {
                            addQtd($id, 1); openModalCart();
                        }
                        $scope.valorFormatter = function(numero) {
                            var numero = parseFloat(numero);
                            numero = numero.toFixed(2).split('.');
                            numero[0] = "R$ " + numero[0].split(/(?=(?:...)*$)/).join('.');
                            return numero.join(',');
                        }  
                        $scope.data = [];

                        for (var i = 0; i < Math.ceil($scope.getData().length / $scope.pageSize); i++) {
                            $scope.pages.push({
                                "page": i + 1,
                                "class": "waves-effect"
                            });
                        }
                    }]);
                    app.filter('startFrom', function() {
                        return function(input, start) {
                            start = +start; //parse to int
                            return input.slice(start);
                        }
                    });
                    app.filter('trusted', function ($sce) {
                        return function (html) {
                            return $sce.trustAsHtml(html)
                        }
                    });                            
                </script>
<script>
    $("nav .scroll").click(function(event) {
        event.preventDefault();
        window.location.assign("/" + $(this).attr('href'));
    });
</script>                

            </div>

        </div>

    </div>

</div>
            <div id="contato" class="parallax-container" style="height: 200px">
        <div class="parallax"><img data-src=""></div>
        <div class="divando flex " style="height: 200px">
            <div class="flex" style="width: 100%;justify-content: center; height: -webkit-fill-available;"> <a href="#sec_cont"  style="margin:10px" class="scroll waves-effect waves-light btn-large btn modal-trigger">Fale Conosco</a> </div>
        </div>
    </div>
        <section id="quemsomos" class="flex" style="background-color: #fff ;">
    <div style="width: 100%">
        <br>
        <br>
        <center>
            <h3 class="texsectionone wow fadeInUp" style="font-family: 'Maven Pro', sans-serif;">Quem Somos</h3>
        </center>
        <center>
            <div class="hrdivo"></div>
        </center>
    </div>
    <!-- div geral -->
    <div class="flex ta row container" style="width: 100%;flex-wrap: wrap-reverse">
        <!-- Titulo -->

        <div class="tbe wow fadeInLeft col s12 m6" style="min-width: 300px;">
            <!-- div texto -->
            <div class="wpb_wrapper">
                <h3 style="text-align:center"><span style="color:null">Meu Site</span></h3>

<hr />
<p style="text-align:center">&nbsp;</p>

<h5 style="text-align:center"><strong><em>&quot;</em></strong>Slogan da empresa<strong><em>&quot;</em></strong></h5>

<p>&nbsp;</p>

<p>Aqui ser&aacute; inserido o texto institucional da sua empresa contendo de forma resumida o seu foco, princ&iacute;pios ou miss&atilde;o. O que oferece e qual o diferencial em rela&ccedil;&atilde;o aos concorrentes.</p>

                <div class="separator  transparent   " style="margin-top: 35px;margin-bottom: 0px;"></div>
                <div class="separator  transparent   " style="margin-top: 80px;margin-bottom: 0px;"></div>
            </div>
        </div>

        <!-- div metade direita -->
        <div class="flex tbd col s12 m6" style="min-width: 300px; background-color : #fff; padding : 5%">
            <!-- imagem da direita -->
            <div class="wpb_wrapper">
                <div class="wpb_single_image wpb_content_element vc_align_left  element_from_fade qode_image_hover_zoom_in element_from_fade_on">
                    <div style="-webkit-animation-delay:2.5s; animation-delay:2.5s; -webkit-transition-delay:2.5s; transition-delay:2.5s">
                        <div class="service-box service-color-one">
                            <div class="service-img center wow fadeInRight"><img width="100%" height="auto" src="/img/inst.jpg?v=1" class="vc_single_image-img attachment-full" alt=""></div>
                        </div>
                    </div>
                </div>
                <div class="separator  transparent" style="margin-top: 80px;margin-bottom: 8px;"></div>
            </div>

        </div>
    </div>
</section>

        
        <style>
#parallax-redes i.fa{
    font-size:48px; color: white; background-color: transparent;    border-color: #fff; margin-right: 16px;
}    
</style>    
    
    <div id="parallax-redes" class="parallax-container" style="height: 300px">
        <div class="parallax"><img src=""></div>
        <div class="divando flex " style="height: 100%;">
            <div class="flex" style="width: 100%">
                <center>
                    <h3 class="wow fadeInRight" style="color: #fff">Fale Conosco por e-mail, Telefone ou Redes Sociais </h3>
                    
                    
                    
                    
                </center>
            </div>
        </div>
    </div>
        
        
        
        <script>

$(document).ready(function() {
    "use strict";
            $(".scroll").click(function(event) {
                event.preventDefault();
                $('html,body').animate({
                    scrollTop: $(this.hash).offset().top - 54
                }, 1e3, "easeInOutExpo");
            });      
    var flag = '1';
    var scroll;
    var animationTipo = 'animated fadeInUpBig';
    var animationTipoOut = 'animated fadeOutDonwBig';
    var animationTipoa = 'animated fadeInDown';
    var animationTipob = 'animated fadeOutUp';
    $(window).scroll(function() {
        scroll = $(window).scrollTop();
        if (scroll > 80) {
            $(".mylogo").css({
                "margin-top": "1px",
                "height": "60px"
            });
            $("#menutodo").css({
                "margin-top": "0px"
            });
            /*$("nav ul a").css({
                "color": "rgb(33, 33, 33)"
            });*/          
            $("#navframe").addClass(animationTipoa);
            $("#navframe").css({
                "width": "100%", 
                /*"background-color": "rgb(255, 255, 255)",          */
                "height": "100px",
                "box-shadow": "0px 1px 3px grey",
            });                        
            flag = '2';
        } else {
            $(".mylogo").css({
                "margin-top": "1px",
                "height": "60px"
            });
            $("#menutodo").css({
                "margin-top": "0px"
            });
            /*$("nav ul a").css({
                "color": "rgb(33, 33, 33)"
            }); */              
            $("#navframe").css({
                "width": "100%",
                /*"background-color": "rgb(255, 255, 255)",   */ 
                "height": "110px",
                "box-shadow": "0px 0px 0px transparent" 
            });
            $("#navframe").removeClass(animationTipoa);
        }
    });
});
        
</script>
<script src="https://materializecss.com/docs/js/init.js"></script>
    
    
        
        
        
        
        
        
        <style>
    footer i.fa-facebook-square::after { 
      content: " Facebook";
      font-family: "Roboto", sans-serif;
      margin: 30px 10px;
    }
    footer i.fa-youtube-play::after { 
      content: " Youtube";
      font-family: "Roboto", sans-serif;
      margin: 30px 10px;
    }
    footer i.fa-instagram::after { 
      content: " Instagram";
      font-family: "Roboto", sans-serif;
      margin: 30px 10px;
    }   
    footer i.fa-twitter::after { 
      content: " Twitter";
      font-family: "Roboto", sans-serif;
      margin: 30px 10px;
    }   

   
    footer a{    color: #eee !important;}    
    .m3r_maps{ display: block;}.m3r_redes{ display: none;}  
    
    </style>
<footer id="sec_cont" class="page-footer" style="background-color: #222; margin-top: 0px; padding: 10px;">
    <div class="container" style="width: 100%;">
        <div class="row">

            <div class="col l3 s12" >
                <h5 >Contato</h5>
                <ul>
                                            
                                        
                    
                </ul>
            </div>
            <div class="col l6 s12 m3r_maps" >
                <h5 >Localização</h5>

                <ul>
                    <p><i class="fa fa-map-pin"></i> </p>
                    <center>
                        <li>
                            <a id="map-container-link" href="http://www.google.com/maps/place/-14.235004,-51.92527999999999" target="_blank" itemprop="hasMap" data-tracking-element-type="7">
                            <iframe data-src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDCHKdc689UYDHs3QyOqUXubabBeGopXs0&q=place_id:ChIJzyjM68dZnAARYz4p8gYVWik" width="90%" height="auto" frameborder="0" style="border:0" allowfullscreen></iframe>
                            </a>

                        </li>
                    </center>

                </ul>

            </div>
            <div class="col l3 s12 m3r_contato">
                <h5 >Fale Conosco</h5>
                <form method="POST" action="/site.php" accept-charset="UTF-8">
                    <div class="form-group98" style="width: 0; height: 0; overflow: hidden;">
                        <label class="coo" for="usr">Nome Completo:</label>
                        <input type="text" class="form-control" name="name" id="usr_name" placeholder="Insira Seu Nome" >
                    </div>
                    <div class="form-group">
                        <label class="coo" for="usr">Nome Completo:</label>
                        <input type="text" class="form-control" name="nome" id="usr" placeholder="Insira Seu Nome">
                    </div>
                    <div class="form-group">
                        <label class="coo" for="pwd">E-mail:</label>
                        <input type="email" class="form-control" name="email" id="pwd" placeholder="Insira Seu Melhor E-mail">
                    </div>

                    <div class="form-group">
                        <label class="coo" for="pwd">Mensagem</label>
                        <textarea class="form-control" name="msg" id="pwds"> </textarea>
                    </div>
                    <center>
                        <input type="submit" class="btn btn-default" style="margin-top:16px;">
                    </center>
                </form>

            </div>
            <div class="col l3 s12 m3r_redes" style="margin-left : 30px; ">
                <h5 class="white-text">Redes Sociais</h5>
                <ul>                    
                    
                    
                    
                    
                </ul>

            </div>            
        </div>
    </div>
    <div class="footer-copyright valign-wrapper">
        <div class="row container valign-wrapper" style="margin-bottom: 0px;">
            <div class="col l4 m4 s12">
                <div onclick="window.location.assign('/login')" style="cursor: pointer;">
                      <span class="fa-stack fa-lg">
                          <i class="fa fa-square-o fa-stack-2x"></i>
                          <i class="fa fa-lock  fa-stack-1x"></i>
                      </span>Acesso meu site
                  </div>
            </div>   
            <div class="col l4 m4 s12">            
                <a class="brown-text text-lighten-3" href="http://m3rsistemas.com.br"> By: M3R Sistemas</a>
            </div>   
            <div class="col l4 m4 s12">                   
                <a class="scroll" href="#home">Voltar para o Topo</a>
            </div>   
                            
        </div>
    </div>
</footer>
     
        

      

    <style>
        .emailbox {
            width: 90%;
            min-width: 310px;
            border-bottom: 1px solid #fff;
            border-left: 1px solid #fff;
            border-right: 1px solid #fff;
            border-top: 1px solid #fff;
            background-color: #fff;
            min-height: 100px;
            margin-top: -50px;
            color: #000;
            z-index: 555555;
        }
        
        @media screen and (max-width: 654px) {
            .emailbox {
                width: 98%;
            }
        }
    </style>

    <link href="https://fonts.googleapis.com/css?family=Barlow+Semi+Condensed|Poiret+One&amp;display=swap" rel="stylesheet">

    <style>
        .divop {
            position: absolute;
            color: #fff
        }
    </style>
    <script>
        $(document).ready(function() {
            $('.parallax').parallax();
        });
    </script>

    <style>
        .divop {
            height: 400px;
            margin-top: -400px;
            color: #fff;
            background-color: rgba(0, 0, 0, 0.86)
        }
    </style>

    <style>
        .nc_sec_imgtexto {
            flex-wrap: wrap-reverse
        }
        
        .nc_div_foto {
            width: 50%;
            min-width: 300px;
            background-color: #fff;
            min-height: 100%;
            justify-content: flex-start
        }
        
        .nc_div_foto img {
            width: 100%;
            margin-left: -50px
        }
        
        .nc_div_texto {
            width: 50%;
            min-width: 300px;
            background-color: #fff;
            min-height: 300px;
            padding-left: 50px;
            padding-right: 80px;
            padding-bottom: 50px;
            padding-top: 50px
        }
        
        @media screen and (max-width: 875px) {
            .nc_div_foto {
                width: 100%;
                min-width: 300px;
                justify-content: center;
            }
            .nc_div_texto {
                width: 100%;
                min-width: 200px;
                padding-left: 10px;
                padding-right: 10px;
                padding-bottom: 50px;
                padding-top: 50px
            }
            .nc_div_foto img {
                width: 70%;
                margin-left: 0px
            }
        }
        
        .qsomo {
            overflow-y: scroll;
            max-height: 400px!important;
            min-height: 400px!important;
            padding: 5px
        }
        
        .titlole {
            font-weight: 900;
            color: rgba(172, 102, 12, 1.00)
        }
    </style>

    <style>
        .treinamentos {
            width: 100%;
            min-width: 200px;
            min-height: 60px;
            padding-left: 25px;
            padding-right: 25px;
            background-color: #222;
            color: #fff;
            margin-top: 5px
        }
    </style>

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <!--Modal Confirm-->
    <link href="/controller/cadastro/style/mbox-0.0.5.min.css" rel="stylesheet">
    <script src="/controller/cadastro/js/mbox-0.0.5.min.js"></script>   
    <script src="/js/m3rfw.js"></script>
    <script src="https://materializecss.com/docs/js/init.js"></script>    

    <script>
        var maskBehavior = function(val) {
                return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009';
            },
            options = {
                onKeyPress: function(val, e, field, options) {
                    field.mask(maskBehavior.apply({}, arguments), options);
                }
            };
        $(".celular").mask(maskBehavior, options);

        function sendForm(form) {
            var email = document.getElementById(form).elements.namedItem("email").value;
            if (email.length <= 0 || !email.includes("@")) {
                swal("Falha ao enviar!", 'Preencha um email válido!', "error");
                document.getElementById(form).elements.namedItem("email").focus();
                return;
            }
            $("#" + form).submit();
        }
    </script>

<script src="https://cdn.jsdelivr.net/npm/intersection-observer@0.7.0/intersection-observer.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@15.1.1/dist/lazyload.min.js"></script>        
<script>
    (function() {
        function logElementEvent(eventName, element) {
            console.log(Date.now(), eventName, element.getAttribute("data-src"));
        }

        var callback_enter = function(element) {
            logElementEvent("🔑 ENTERED", element);
        };
        var callback_exit = function(element) {
            logElementEvent("🚪 EXITED", element);
        };
        var callback_loading = function(element) {
            logElementEvent("⌚ LOADING", element);
        };
        var callback_loaded = function(element) {
            logElementEvent("👍 LOADED", element);
        };
        var callback_error = function(element) {
            logElementEvent("💀 ERROR", element);
            element.src = "https://via.placeholder.com/440x560/?text=Error+Placeholder";
        };
        var callback_finish = function() {
            logElementEvent("✔️ FINISHED", document.documentElement);
        };

        var ll = new LazyLoad({
            container: document.getElementById("body"),
            // Assign the callbacks defined above
            callback_enter: callback_enter,
            callback_exit: callback_exit,
            callback_loading: callback_loading,
            callback_loaded: callback_loaded,
            callback_error: callback_error,
            callback_finish: callback_finish
        });
const lazyBackground = new LazyLoad({
elements_selector: "iframe"
// DON'T PASS use_native: true HERE
});                
    })();
</script>    

</body>

</html>