/* === MEDIA QUERIES === */
  
  @media only screen and (min-width: 1000px) {
    
    .descr_top{
      background-image: url('/images/header-creolen.jpg');
      
       
    }
 
    
  }
  @media (max-width: 1300px){
    
  }
  @media (max-width: 1000px){
    .search input[type=text]{          
      width:100%;
      margin:0px;
      padding:5px;  
      background:none ;
      font-family: inherit;
      font-size:20px;
      color:#000000;
      -moz-box-sizing:unset;
      -webkit-box-sizing:unset;
      box-sizing:unset;   
      border:0px;
      border-radius: 0px;
      -moz-border-top-left-radius: 0px;
      -moz-border-bottom-left-radius: 0x;
      -webkit-border-top-left-radius: 0px;
      -webkit-border-bottom-left-radius: 0px;
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px;
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
      -webkit-transition: all .9s;
      -moz-transition: all .9s;      
      transition: ease-in 0.4s;      
    }
    .header{
      min-height:180px;
    }
    .menu-search{      
      top:7px;
      right:0%;       
      padding:0px;
  
    }
    .search{        
      position: absolute;
      top:-75px;
      right:20%; 
      padding:0px;
  }

 
  }
  




  @media (max-width: 720px){
    .header{
      min-height:1rem;
    }    
    .search{        
      position: absolute;
      top:-60px;
      right:30%; 
      width:50%;
  }
  .menu-search{      
    top:4px;
    right:0%;       
    padding:0px;

  }  
 
    img{
      max-width: 100%;
    }

    .header_search{      
      position: absolute;
  }
    
    .header_topbar .top_display{
        display:none;
        padding:0px;
        margin:0px;
    }
   
    .header #sample-menu{
        display:inline;        
    }
    .header .menu-cart{        
        right:0%;
        padding-right:15px; 
        
                
    }
    .header .menu-heart{        
      right:12%; 
      
  }
 
    .header img.logo{
        position: relative;
        width:130px;
        right:10%;
        padding:0px;
    }
    #nav_oben{
      
    }

    /* Navigation */
    .navigation{               
        position:relative;
        top:0px;
        left:0px;
        z-index:2;
        text-align: left;
      }

      #menuToggle
      {                
        display: block;
        position:absolute;
        top: -53px;
        left: 20px;        
        z-index: 2;        
        -webkit-user-select: none;
        user-select: none;
      }
      

      
      
      #menuToggle input
      { 
        padding:5px;
        display: block;
        width: 40px;
        height: 40px;
        position: absolute;
        top: -15px;
        left: -12px;
        
        cursor: pointer;
        
        opacity: 0; /* hide this */
        z-index: 5; /* and place it over the hamburger */
        
        -webkit-touch-callout: none;
      }
      
      /*
       * Just a quick hamburger
       */
      #menuToggle span
      {
        display: block;
        width: 33px;
        height: 4px;
        margin-bottom: 5px;
        position: relative;        
        background:black;
        border-radius: 3px;
        z-index: 2;        
        transform-origin: 4px 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%;
      }
      
      /* 
       * Transform all the slices of hamburger
       * into a crossmark.
       */
      #menuToggle input:checked ~ span
      {
        opacity: 1;
        transform: rotate(45deg) translate(-2px, -1px);
        background: #232323;
      }
      
      /*
       * But let's hide the middle one.
       */
      #menuToggle input:checked ~ span:nth-last-child(3)
      {
        opacity: 0;
        transform: rotate(0deg) scale(0.2, 0.2);
      }
      
      /*
       * Ohyeah and the last one should go the other direction
       */
      #menuToggle input:checked ~ span:nth-last-child(2)
      {
        transform: rotate(-45deg) translate(0, -1px);
      }

#menu
{  
  position: absolute;
  left:-25px;
  top:30px;
  background:#ffffff;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);  
  box-shadow: 1px 2px 2px 1px rgba(0,0,0,.14);        
  border-radius: 2rem;   
  z-index: 2;
}

#menu ul{
  
  
}

#menu li{  
  min-width:100%;  
  margin:0px;
  padding: 10px 0px 20px 12px;
  text-align: left;
}
#menu a.t0::after {
  content: " Startseite";   
}
#menu a.t1::before {
  content: "für "; 
}
#menu a.t2::before {
  content: "für "; 
}
#menu a.t3::before {
  content: "für "; 
}
#menu a.t4::after {
  content: " bei Creolen"; 
}
#menu a.t5::after {
  content: " Ohrringe"; 
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{  
  transform: none;   
}

   




    .zr{
      float:right;
      max-width: 30%;    
      border-radius: 1rem;
      margin:auto;
      border: 1px solid transparent;
      padding: 0.5rem;
      
    }
    img.img_b, img.zr{
      float:right;
      max-width: 30%;    
      border-radius: 1rem;
      margin:auto;
      border: 1px solid transparent;
      padding: 0.5rem;
    
    }

  .ptop {    
    padding: 125px 0 0 0;
    position: relative;
    z-index: 0 !important;
  }
  .a_descr_btn{
    min-width:40%;
  }
  .divlink img.bild{  
    display: block; 
 margin: auto; 
 min-width: 70%; 
 height: auto;
  }
  .div_button_red{
    text-align: center;
  }
  .button-red span.icon {
    background: url(/images/cart-shopping-white.svg) no-repeat;    
    width: 27px;
    height: 27px;
    margin:0% 0% 0% 5%;
    }


.button-red {
            white-space: nowrap;
            color: white;            
            border-radius: 4px;          
            background-color:#C32828;           
            border: 1px solid #8E0202;
            margin: 2%;
            padding: 10px 40px 10px 10px;
            font-size:1.05rem;
            font-weight:bold;    
            text-align: left;        
            transition-duration: 0.4s;
            box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.1);                        
        }


  li.level0{
    list-style: none;

  }

  li.level0 a{
    border-radius: 0.3rem;
    padding:0.4rem 1rem 0.4rem 1rem;
    min-width:80%;
    margin:0.5%;
    white-space: nowrap;
    display: inline-block;
    text-align: center;
    
    
    font-size: 1.1rem;
    font-weight: 200;
    background: transparent;
    border: 1px solid gray;    
    cursor: pointer;  
    transition: all 0.3s ease;
    outline: none;
  }


  }