/*@import '~bootstrap/dist/css/bootstrap.min.css';*/

body {
  background-image: linear-gradient(180deg, rgb(255, 238, 238), #fff 100%, #fff);
  background-repeat: no-repeat;
  }

  a,
  a:visited,
  a:hover {
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
  }
  
  a:hover {
    color: #125699;
  }
    
    footer {
      margin-top: 8px;
      line-height: 20px;
    }
  
    footer a {
      
    }
  
    svg#clouds {
      position: fixed;
      bottom: -160px;
      left: -230px;
      z-index: -10;
    }
  
    a:hover {
      opacity:0.5;
    }
  
    /*menu*/
    #menuToggle {
      display: flex;
      flex-direction: column;
      position: absolute;
      top: 15px;
      left: 25px; 
      z-index: 1;
      -webkit-user-select: none;
      user-select: none;
    }
    
    #menuToggle input
    {
      display: flex;
      width: 40px;
      height: 32px;
      position: absolute;
      cursor: pointer;
      opacity: 0;
      z-index: 2;
    }
    
    #menuToggle span
    {
      display: flex;
      width: 29px;
      height: 2px;
      margin-bottom: 5px;
      position: relative;
      background: #ffffff;
      border-radius: 3px;
      z-index: 1;
      transform-origin: 5px 0px;
      transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                  background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                  opacity 0.55s ease;
    }
    
    #menuToggle span:first-child
    {
      transform-origin: 0% 0%;
    }
    
    #menuToggle span:nth-last-child(2)
    {
      transform-origin: 0% 100%;
    }
    
    #menuToggle input:checked ~ span
    {
      opacity: 1;
      transform: rotate(45deg) translate(-3px, -1px);
      background: #36383F;
    }
  
    #menuToggle input:checked ~ span:nth-last-child(3)
    {
      opacity: 0;
      transform: rotate(0deg) scale(0.2, 0.2);
    }
    
    #menuToggle input:checked ~ span:nth-last-child(2)
    {
      transform: rotate(-45deg) translate(0, -1px);
    }
    
    #menu
    {
      position: absolute;
      min-width: 315px;
      min-height: 100%;
      box-shadow: 0 0 10px #85888C;
      margin: -50px 0 0 -50px;
      padding: 50px;
      padding-top: 80px;
      background-color: #F5F6FA;
      border-radius: 3px;
      -webkit-font-smoothing: antialiased;
      transform-origin: 0% 0%;
      transform: translate(-100%, 0);
      transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    }
    
    #menu ul {
      padding: 1;
      list-style-type: none;
    }
  
    #menu li
    {
      list-style-type: none;
      padding: 10px 0;
      transition-delay: 2s;
    }
  
    #menu li a:hover {
      cursor: pointer;
    }
    
    #menuToggle input:checked ~ ul
    {
      transform: none;
    }
  /*navegacao*/
    nav {
      display: flex;
      background-color: #fcccf0;
      height: 50;
      border-radius: 3px;
    }
  
    .logo-maior {
      margin-left: 250px;
    }
  
    .form-search {
      margin-left: 1%;
      min-width: 300px;
      margin-bottom: 0.3%;
    }
  
    .form-search input:focus {
      border-style: solid;
      color: #380B61;
      border-color:#f3943c;
      border-width: 0.1px;
      -webkit-box-shadow: 0px 0px 15px 1px #f3943c;
      -moz-box-shadow: 0px 0px 15px 1px #f3943c;
      box-shadow: 0px 0px 5px 0px #f3943c;
      border:0.5px solid #f3943c;
      outline:none; 
    }
  
    .active {
      color:  #ffc2f2;
    }
  
  
    /*alerts*/
  
    .d-inline-flex-div {
      display: flex;
      height: 30px;
      margin-top: 1%;
      text-decoration: none;
    }
  
    .notification-text {
      width: 400px;
      display: flex;
      margin-left: 4%;
    }
  
    .alert-notiication {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      position: absolute;
      margin-left: 1%;
      margin-top: 0.3%;
      overflow: hidden;
      transition: 0.3s ease;
  /*background-color: #fff;*/
      color: rgb(255, 255, 255);
      font-weight: 800;
    }
  
    .alert-notiication a {
      color: rgb(255, 255, 255);
      position: absolute;
      margin-left: 30%;
    }
    
    .alert-cart {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      position: absolute;
      margin-left: 3.2%;
      margin-top: 0.3%;
      overflow: hidden;
      transition: 0.3s ease;
     /*background-color: #fff;*/
     color: rgb(255, 255, 255);
     font-weight: 800;
    }
    
    .alert-cart a {
      color: rgb(255, 255, 255);
      position: absolute;
      margin-left: 30%;
    }
    
    .logout {
    margin-right: 3%;
    margin-top: 0.7%;
    }
  
    .logout a:hover {
      cursor: pointer!important;
    }
  
    .logout a {
      cursor: pointer!important;
    }
  
    .avisos {
      display: block;
      width: 300px;
      height: auto;
      padding-bottom: 2%;
      border-radius: 3px;
      background-color: #ffc2f2;
    }
    
    .avisos button {
      width: 100px!important;
      margin-top: 2%;
      margin-left: 10%;
    }
  
    .noLog {
      position: sticky;
      top: 50;
      background-color: #E160B3;
      border-color:  #E160B3;
      padding-bottom: 1%;
      border-radius: 5px;
      width: 200px;
      margin-top: 50%;
    }
  
    .noLog button {
      background-color: #f3943c;
      border-color:  #f3943c;
      color: #ffffff;
      width: 100px;
      border-radius: 4px;
    }
  
    .noLog p {
      color: #ffffff;
    }
  
    @media (max-width: 1115px) {
    
  
    .logo-maior {
      margin-left: 10%;
      margin-top: 1%;
    }
      .d-inline-flex-div {
        margin-top: 1%;
        margin-left: 1%;
      }
  
      .alert-notiication {
        margin-top: 1%;
        margin-left: 1%;
      }  
  
      .alert-cart {
        margin-top: 1%;
        margin-left: 3%;
      }
  
      .notification-text {
        display: none;
      }
  
      .logout {
        margin-left: 5%;
        margin-top: 1%;
        }
    }
    
    @media (max-width: 768px) {
  
      #menuToggle {
        margin-top: -2%;
        margin-left: -3%;
      }
  
      .form-search {
        min-width: 60%;
        max-width: 60%;
      }
  
      .disable-item {
        display: none;
      }
  
      .d-inline-flex-div {
        display: none;
      }
  
      nav {
        display: flex;
        background-color: #fcccf0;
        padding-top: 0%;
        overflow-x: hidden;
        height: 50;
        width: 100%;
        border-radius: 3px;
      }
    
      .logo-maior {
        margin-left: 15%;
        margin-top: 2%;
      }
  
      .logout {
        display: none;
      }
      
      .footer {
        margin-top: 1%;
      }
      
      footer {
        margin-top: 10px;
        display: block;
        align-items: center;
        text-align: center;
        line-height: 20px;
      }
    }
    
    @media screen and (max-width: 575px) {
      svg#rocket-smoke {
        display: none;
        visibility: hidden;
      }
    }