* {
  margin: 0;
  padding: 0;}


  
    body {
        /*background-image: url('rua3.jpg');
       
       
       font-family: Arial ;*/
       background: linear-gradient(to top, rgb(99, 99, 247), rgb(68, 67, 67));
       /*overflow:hidden;*/
      
    }

    div#interface {
      width: 300px;
      margin:15px auto 0px auto;
      padding-top: 10%;
      
    }
    section#corpo { /*img pequenas*/
       
      width: 300px;
      display: block;
      margin-top: -2%;
      float: left;
      margin-left: 4%;
      
    }
    .container {
        width: 180px;
        padding: 3px25px 3px 10px;
        font: 8pt Arial;
        color: rgb(170, 169, 169);
        border: px solid rgb(170, 169, 169);
        margin-left: 15px;
        margin-top: -335px;
        margin-bottom: 30px;
        border-radius: 2px;
       
      }
    
    img.img-2 { /*logo merc*/
      width:350px;
      margin-left: 5%;
      position: absolute;
      margin-top: -304px;
    
    }
    
    img.img-3 {
        width:160px ;
        height:90px ;
        margin-top: 2%; /*espaçamento entre uma imagem e outra*/
        margin-left: 9%;
        border-top-left-radius: 70%;
        border-bottom-right-radius: 50% ;
        padding-top: 0px;
        box-shadow: 0 0 5px 0 rgb(170, 169, 169);
        transition: 0.2s linear;
    }
    
    img.img-4 {
        
        float: right;
        margin-right: 45%;
        width:670px ;
        height:377px ;
        border-top-left-radius: 70%;
        border-bottom-right-radius: 50% ;
        margin-top: -125%;
        padding-top:  1px;
        box-shadow: 0 0 6px 0 rgb(170, 169, 169);
        transition: 0.4s linear;
        
       
    }
    
    .btn:hover .img-3 {
        transform: scale(1.4);
        color:#f1f1f1;
        
    }
    .btn:hover .img-4 {
        transform: scale(1.2);
        color:#f1f1f1 ;
    }
    
    aside#lateral {
      display: block;
      width:300px ;
      float: right;
      margin-top: 32px;
    }
    h5 {
      color: #cecece;
      /*margin-left: 27%;*/
      text-align: justify;
      /*margin-left: -35%;*/
      padding-top: 5%;
      font: 10pt Arial;
      margin-top: 6px;
      text-align: center;
    }
    h6 {
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif ;
      color: #727070;
    }
    footer#rodape {
        clear: both;
        border-top: px  solid whitesmoke;
        padding-top: 30px;
    }
    
    /*=================================================*/
    
    .middle { /*deslocamento dos bottons para a direita ou esquerda*/
        position: absolute;
        top: 95.7%;
        transform: translateY(-50%);
        width: 100%;
        text-align: center;
    }
    
     img.img-5 { /*bottons de rodapé*/
        padding-top: 6px;
        padding-right: 10px;
        padding-left: 10px;
        line-height: 40px;
        font-size: 26px;
        transition: 0.2s linear;
        width:27px;
        height:27px;
    }
    .btn-1:hover img { /*hover dos bottond de rodapé*/
        transform: scale(1.6);
        color:#f1f1f1f1;
    
    }
    
    /* Styles do MENU */
    #toggle {
        display: block;
        width: 28px;
        height: 30px;
        margin: 30px auto 10px;
        margin-top: 3%;
        margin-right: 100px;/*controla o humburger p direita e esquerda*/
      }
      
      #toggle span:after,
      #toggle span:before {
        content: "";
        position: absolute;
        left: 0;
        top: -9px;
      }
      #toggle span:after{
        top: 9px;
      }
      #toggle span {
        position: relative;
        display: block;
      }
      
      #toggle span,
      #toggle span:after,
      #toggle span:before {
        width: 100%;
        height: 5px;
        background-color: rgb(248, 248, 248); /*cor do humburger*/
        transition: all 0.3s;
        backface-visibility: hidden;
        border-radius: 2px;
      }
      
      /* on activation */
      #toggle.on span {
        background-color: transparent;
      }
      #toggle.on span:before {
        transform: rotate(45deg) translate(5px, 5px);
      }
      #toggle.on span:after {
        transform: rotate(-45deg) translate(7px, -8px);
      }
      #toggle.on + #menu {
        opacity: 1;
        visibility: visible;
      }
      
      /* menu appearance*/
      #menu {
        position: relative;
        color: rgb(48, 48, 48);
        width: 90px;
        padding: 10px;
        margin: auto;
        top: 20px; /*a caixinha branca desce*/
        margin-right: 64px;/*coloca a cx branca para a direita*/
        font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
        text-align: center;
        border-radius:2px;
      
        background: rgb(20, 20, 20);
        box-shadow: 0 1px 8px rgba(0,0,0,0.05);
        /* just for this demo */
        opacity: 0;
        visibility: hidden;
        transition: opacity .1s;
      }
      #menu:after {
        position: absolute;
        top: -15px;
        left: 45px;
        content: "";
        display: block;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 20px solid rgb(194, 27, 27); /*cor do triangulo*/
      }
      ul, li, li a {
        list-style: none;
        display: block;
        margin: 0;
        padding: 0;
      }
      li a {
        padding: 5px;
        color: rgb(134, 98, 98);/*cor das palavras dentro da cxinha*/
        text-decoration: none;
        transition: all .2s;
      }
      li a:hover,
      li a:focus { /*cor das palavras mudam ao passar o mouse*/
        background: rgb(129, 136, 243);
        color: rgb(126, 50, 50);
        border-radius: 3px;
      }
      /* demo styles */
    
    /*===============================================================================================*/
  @media (max-width:360px) {
      body {
          /*background-image: url('rua3-mob.jpg');
          background-attachment: fixed;
          background-size: cover;*/
          background: linear-gradient(to top, rgb(99, 99, 247), rgb(68, 67, 67));
          padding: 0;
          margin: 0;
          }

      *{
          margin: 0;
          padding: 0;}
        
            section#corpo { /*img pequenas*/
               
              width: 300px;
              display: block;
              margin-top: -2%;
              /*float: left;*/
              margin-left: 4%;
              
            }
            
            .container {
                width: 180px;
                padding: 3px25px 3px 10px;
                font: 8pt Arial;
                color: rgb(170, 169, 169);
                border: px solid rgb(170, 169, 169);
                margin-left: 15px;
                margin-top: -295px;
                margin-bottom: 30px;
                border-radius: 2px;
                
            }
            
            img.img-2 { /*logo merc*/
              width: 230px;
              height:60px ;
             margin-left: 9%;
             position: absolute;
             margin-top: -285px;
            
            }
            
            img.img-3 {
                width:140px ;
                height:79px ;
                margin-top: 3%; /*espaçamento entre uma imagem e outra*/
                margin-left: 9%;
                border-top-left-radius: 70%;
                border-bottom-right-radius: 50% ;
                padding-top: 0px;
                box-shadow: 0 0 5px 0 rgb(170, 169, 169);
                transition: 0.2s linear;
            }
            
            img.img-4 {
                
             /* float: right;*/
                margin-right: 11%;
                width:300px ;
                height:169px ;
                border-top-left-radius: 70%;
                border-bottom-right-radius: 50% ;
                margin-top: -10%;
                padding-top:  0px;
                box-shadow: 0 0 6px 0 rgb(170, 169, 169);
                transition: 0.2s linear;
                
               
            }
            
            .btn:hover .img-3 {
                transform: scale(1.1);
                color:#f1f1f1;
                
            }
            .btn:hover .img-4 {
                transform: scale(1.1);
                color:#f1f1f1 ;
            }
            img.img-5 { /*bottons de rodapé*/
              padding-top: -80%;
                margin-top: 58%;
                padding-right: 10px;
                padding-left: 10px;
                line-height: 40px;
                font-size: 26px;
                transition: 0.2s linear;
                width:35px;
                height:35px;
            }
            
            /*aside#lateral {
              display: block;
              width:300px ;
              float: right;
              margin-top: 32px;
            }*/
            /*p {
              margin-left:-4% ;
              margin-top:2% ;
              color: #cecece;
              font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif 6pt;
            }*/
           
            h6 {
              font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif ;
              color: #727070;
             margin-left: 2%;
            }
            
            footer#rodape { /*copy */
                clear: both;
                border-top: px  solid whitesmoke;
                padding-top:1%;
              
            }
            h5 {
              font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif ;
              float: left;
              color: #cecece;
              font-size: 9pt;
              margin-top: 13px;
              margin-left: 60px;
              
            }
            
            /*=================================================*/
            
            .middle { /*deslocamento dos bottons para a direita ou esquerda*/
                position: absolute;
                top: 105%;
                transform: translateY(-50%);
                width: 100%;
                text-align: center;
                margin-left: -2%;
            }
            
            
            .btn-1:hover img { /*hover dos bottond de rodapé*/
                transform: scale(1.5);
                color:#f1f1f1f1;
            
            }
            
            /* Styles do MENU */
            #toggle {
                display: block;
                width: 28px;
                height: 30px;
                margin: 30px auto 30px;
                margin-top: 10%;
                margin-right: 40px;/*controla o humburger p direita e esquerda*/
              }
              
              #toggle span:after,
              #toggle span:before {
                content: "";
                position: absolute;
                left: 0;
                top: -9px;
              }
              #toggle span:after{
                top: 9px;
              }
              #toggle span {
                position: relative;
                display: block;
                
              }
              
              #toggle span,
              #toggle span:after,
              #toggle span:before {
                width: 100%;
                height: 5px;
                background-color: rgb(248, 248, 248); /*cor do humburger*/
                transition: all 0.3s;
                backface-visibility: hidden;
                border-radius: 2px;
               
               
              }
              
              /* on activation */
              #toggle.on span {
                background-color: transparent;
              }
              #toggle.on span:before {
                transform: rotate(45deg) translate(5px, 5px);
              }
              #toggle.on span:after {
                transform: rotate(-45deg) translate(7px, -8px);
              }
              #toggle.on + #menu {
                opacity: 1;
                visibility: visible;
              }
              
              /* menu appearance*/
              #menu {
                position: relative;
                color: rgb(48, 48, 48);
                width: 90px;
                padding: 0px;
                margin: auto;
                top: 5px; /*a caixinha branca desce*/
                margin-right: 34px;/*coloca a cx branca para a direita*/
                font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
                text-align: center;
                border-radius:2px;
              
                background: rgb(20, 20, 20);
                box-shadow: 0 1px 8px rgba(0,0,0,0.05);
                /* just for this demo */
                opacity: 0;
                visibility: hidden;
                transition: opacity .1s;
              }
              #menu:after {
                position: absolute;
                top: -15px;
                left: 57px;
                content: "";
                display: block;
                border-left: 15px solid transparent;
                border-right: 15px solid transparent;
                border-bottom: 20px solid rgb(194, 27, 27); /*cor do triangulo*/
              }
              
  }
  /*Mobile Horizontal*/
  @media (max-width:640px) and (orientation:landscape){
    body {
    background:linear-gradient(to top, rgb(99, 99, 247), rgb(68, 67, 67));
    padding: 0;
    margin: 0;
    }
    *{
    margin: 0;
    padding: 0;}
  
      section#corpo { /*img pequenas*/
        width: 100px;
        
        display: block;
        margin-top: -4%;
        float: left;
        margin-left: 4%;
      }
      .container {
          width: 180px;
          
          padding: 3px 25px 3px 10px;
          font: 8pt Arial;
          color: rgb(170, 169, 169);
          border: px solid rgb(170, 169, 169);
          margin-left: 15px;
          margin-top: -305px;
          margin-bottom: 30px;
          border-radius: 2px;
        }
      img.img-2 { /*logo merc*/
        width: 230px;
        height:60px ;
       margin-left: 5%;
       position: absolute;
       margin-top: -295px;
      }
      img.img-3 {
          width:90px ;
          height:51px ;
          margin-top: 5%; /*espaçamento entre uma imagem e outra*/
          margin-left: 9%;
          border-top-left-radius: 70%;
          border-bottom-right-radius: 50% ;
          padding-top: 0px;
          box-shadow: 0 0 5px 0 rgb(170, 169, 169);
          transition: 0.2s linear;
          display: inline;
          
      }
      img.img-4 {
          /* float: right;*/
          margin-right: 11%;
          width:400px ;
          height:225px ;
          border-top-left-radius: 70%;
          border-bottom-right-radius: 50% ;
          margin-top: -109%;
          padding-top:  0px;
          box-shadow: 0 0 6px 0 rgb(170, 169, 169);
          transition: 0.2s linear;
        }
      .btn:hover .img-3 {
          transform: scale(1.1);
          color:#f1f1f1;
      }
      .btn:hover .img-4 {
          transform: scale(1.1);
          color:#f1f1f1 ;
      }
      img.img-5 { /*bottons de rodapé*/
        padding-top: -80%;
          margin-top: 8%;
          padding: 10px;
          line-height: 40px;
          font-size: 26px;
          transition: 0.2s linear;
          width:35px;
          height:35px;
      }
      p {
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif 6pt;
        margin-left:-4% ;
        margin-top:2% ;
        
        color: #cecece;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
      }
      h6 {
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif ;
        color: #727070;
        margin-left: 2%;
      }
      footer#rodape { /*copy */
          clear: both;
          border-top: px  solid whitesmoke;
          padding-top:0%;
      }
      h5 {
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif ;
        float: left;
        color: #cecece;
        font-size: 9pt;
        margin-top: -35px;
        margin-left: 60px;
        
      }
      
      /*=================================================*/
      
      .middle { /*deslocamento dos bottons para a direita ou esquerda*/
          position: absolute;
          top: 150%;
          transform: translateY(-50%);
          width: 100%;
          text-align: center;
          margin-left: -2%;
      }
      .btn-1:hover img { /*hover dos bottond de rodapé*/
        transform: scale(1.5);
        color:#f1f1f1f1;
    }
    /* Styles do MENU */
    #toggle {
      display: block;
        width: 28px;
        height: 30px;
        margin: 30px auto 30px;
        margin-top: 5%;
        margin-right: 40px;/*controla o humburger p direita e esquerda*/
        
      }
      #toggle span:after,
      #toggle span:before {
        content: "";
        position: absolute;
        left: 0;
        top: -9px;
        
        
      }
      #toggle span:after{
        top: 9px;
        
      }
      #toggle span {
        position: relative;
        display: block;
        
      }
      
      #toggle span,
      #toggle span:after,
      #toggle span:before {
        width: 100%;
        height: 5px;
        background-color: rgb(248, 248, 248); /*cor do humburger*/
        transition: all 0.3s;
        backface-visibility: hidden;
        border-radius: 2px;
        
      }
      
      /* on activation */
      #toggle.on span {
        background-color: transparent;
      }
      #toggle.on span:before {
        transform: rotate(45deg) translate(5px, 5px);
      }
      #toggle.on span:after {
        transform: rotate(-45deg) translate(7px, -8px);
      }
      #toggle.on + #menu {
        opacity: 1;
        visibility: visible;
      }
      /* menu appearance*/
      #menu {
        position: relative;
        color: rgb(48, 48, 48);
        width: 90px;
        padding: 0px;
        margin: auto;
        top: 5px; /*a caixinha branca desce*/
        margin-right: 34px;/*coloca a cx branca para a direita*/
        font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
        text-align: center;
        border-radius:2px;
      
        background: rgb(20, 20, 20);
        box-shadow: 0 1px 8px rgba(0,0,0,0.05);
        /* just for this demo */
        opacity: 0;
        visibility: hidden;
        transition: opacity .1s;
      }
      #menu:after {
        position: absolute;
        top: -15px;
        left: 57px;
        content: "";
        display: block;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 20px solid rgb(194, 27, 27); /*cor do triangulo*/
      }
  /*===========================
  
  }