@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
      @import url("http://fonts.googleapis.com/css?family=Arial,Helvetica,Helvetica,sans-serif");
      @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
      @import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
      * {
          margin: 0;
          padding: 0px 0px 0px 0px;
      }
      
      body {
          font-family: Helvetica;
      }
      
      h1 {
          font-size: max(25px, 1vw);
          letter-spacing: -.03em;
      }
      
      h2 {
          font-size: max(18px, 1vw);
          letter-spacing: -.035em;
      }
      
      h3 {
        font-size: max(14px, 1vw);
        letter-spacing: -.035em;
        text-transform: uppercase;
      }

      p {
          font-size: max(14px, 1vw);
          letter-spacing: -.035em;
      }
      
      i {
          top: 6px;
          font-size: max(15px, 1vw);
          letter-spacing: -.035em;
      }
      
      .icone-slice {
          font-size: 40px;
          color: whie;
      }
      
      a:link,
      a:visited {
          color: white;
          text-decoration: none;
      }
      
      a:hover {
          color: #25d366;
          text-decoration: none;
      }
      
      main {
          display grid;
          grid: auto.flow 1fr / 100vw;
      }
      
      section {
          display: table;
          width: 100%;
          text-align: center;
      }
      /* TOPO */
      
      header {
          background: #009688;
          height: 10vh;
          color: #FFFFFF;
          display: table-cell;
          vertical-align: middle;
          padding-left: 7%;
      }
      
      .company {
        float: center;
        text-transform: uppercase;

    }
      .logo {
          float: center;
      }
      
      .menu {
          float: left;
      }

      .home {
        float: right;
        padding-right: 7%;
    }
      
      .slice-01 {
          background: #f0f0f0;
          height: 80vh;
      }
      
      .slice-02 {
          background: #801336;
          height: 80vh;
      }
      
      .slice-03 {
          background: #510a32;
          height: 80vh;
      }
      
      .slice-04 {
          background: #2d142c;
          height: 80vh;
      }
      
      .footer {
          background: #043b35;
          height: 20vh;
      }
      
      .site-footer-base-link {
          font-size: 12px;
          font-weight: 600;
          padding-right:5px;
      }
      
      .content {
          color: #222;
          display: table-cell;
          vertical-align: middle;
          padding-left: 9%;
          padding-right: 10%;
      }
         
      .content-footer {
          color: white;
          display: table-cell;
          vertical-align: middle;
      }
      
      input[type=text] {
          width: 250px;
          font-size: max(17px, 1vw);
          background-color: transparent;
          border: none;
          border-bottom-style: outset;
          border-bottom-color: white;
          border-bottom-width: 1px;
          color: ;
          text-align: center;
          margin-top: 35px;
      }
      
       ::-webkit-input-placeholder {
          /* Chrome */
          color: #222;
          opacity: 0.5;
          transition: opacity 250ms ease-in-out;
      }
      
       :focus::-webkit-input-placeholder {
          opacity: 0.2;
          text-align: center;
      }
      
       :-ms-input-placeholder {
          /* IE 10+ */
          color: #222;
          transition: opacity 250ms ease-in-out;
      }
      
       :focus:-ms-input-placeholder {
          opacity: 0.2;
      }
      
       ::-moz-placeholder {
          /* Firefox 19+ */
          color: rwhite;
          opacity: 1;
          transition: opacity 250ms ease-in-out;
      }
      
       :focus::-moz-placeholder {
          opacity: 0.2;
      }
      
       :-moz-placeholder {
          /* Firefox 4 - 18 */
          color: #222;
          opacity: 1;
          transition: opacity 250ms ease-in-out;
      }
      
       :focus:-moz-placeholder {
          opacity: 0.2;
      }
      
      .no-outline:focus {
          outline: none;
      }
      
      .button {
          padding: 15px 24px;
          cursor: pointer;
          font-size: max(15px, 1vw);
          background-color: #128C7E;
          color: #ffffff;
          border: 2px solid #128C7E;
          height: auto;
          line-height: 1.3;
          display: inline-block;
          font-family: "Helvetica";
          font-weight: 500;
          letter-spacing: .75px;
          margin-top: 50px;
          margin-bottom: 50px;
          transition: color .15s linear, background-color .15s linear;
          vertical-align: middle;
      }

      .list {
        padding: 15px 24px;
        cursor: pointer;
        font-size: max(15px, 1vw);
        background-color: #128C7E;
        color: #ffffff;
        border: 2px solid #128C7E;
        width: 300px;
        height: auto;
        line-height: 1.3;
        display: inline-block;
        font-family: "Helvetica";
        font-weight: 500;
        letter-spacing: .75px;
        margin-top: 5px;
        margin-bottom: 5px;
        transition: color .15s linear, background-color .15s linear;
        vertical-align: middle;
    }

    .button-back {
        background-color: #666666;
        color: #000000;
        border: 2px solid #666666;

    }
      
      .button:hover {
          background-color: #999;
          border: 2px solid transparent;
          color: #fff;
      }

      .list:hover {
        background-color: #999;
        border: 2px solid transparent;
        color: #fff;
    }

/* Collapse*/
    .collapsible {
        background-color: #128C7E;
        color: white;
        cursor: pointer;
        padding: 18px;
        width: 97%;
        border: none;
        text-align: center;
        outline: none;
        font-size: 15px;
        margin-top: 5px;
        margin-bottom: 5px;
    }
  
    .active, .collapsible:hover {
        background-color: #128C7E;
    }
  
    .collapsible:after {
        content: '\002B';
        color: white;
        font-weight: bold;
        float: right;
        margin-left: 5px;
        background-color: #128C7E;
    }
  
    .active:after {
        content: "\2212";
    }
  
    .content-collapse {
        padding: 0 18px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
        background-color: #f1f1f1;
    }

    /*menu*/
    .sidebar {
        height: 100%;
        /*width: 0;*/
        width: 250px;
        position: fixed;
        z-index: 1;
        top: 0;
        /*left: 0;*/
        left: -250px;
        background-color: #fff;
        overflow-x: hidden;
        transition: 0.5s;
        padding-top: 60px;
      }
      
      .sidebar a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 15px;
        color: #818181;
        display: block;
        transition: 0.3s;
      }
      
      .sidebar a:hover {
        color: #25d366;
      }
      
      .sidebar .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 26px;
        margin-left: 50px;
      }
      
      .openbtn {
        font-size: 15px;
        font-weight: 900;
        cursor: pointer;
        background-color: transparent;
        color: #FFFFFF;
        padding: 2px 4px;
        border: none;
      }
      
      .openbtn:hover {
        background-color: #444;
      }
      
      #main {
        transition: margin-left .5s;
        padding: 16px;
      }
      
      /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
      @media screen and (max-height: 450px) {
        .sidebar {padding-top: 15px;}
        .sidebar a {font-size: 18px;}
      }

/*Form de email*/
      #contato_form{
        width:500px;
        min-height:175px;
        color:#999;
        margin:auto;
      }
      .asteristico{
        color:#F00;
      }