/**
* Webstaa Liefershop (https://webstaa.de)
* Copyright (c) K&G Webservice - Kraus & Guenther GbR (https://kg-webserivce.de)
* Jegliche Vervielfältigung bedarf der ausdrücklichen Erlaubnis von Kraus & Guenther GbR in schriftlicher Form!
* Die Nutzungsrechte liegen bei Kraus & Guenther GbR und dürfen ohne schriftliche Genehmigung von 
* Kraus & Guenther GbR nicht an Dritte weitergegeben werden.
*
* @copyright Copyright (c) K&G Webservice - Kraus & Guenther GbR (https://kg-webserivce.de)
* @link      https://webstaa.de Webstaa Liefershop
* @version   1.2.0
*/

 /* 
 * FRONTEND STYLE SHEETS 
 * Diese Styles beeinflussen sämtliche Elemente im FrontEnd Bereich
*/


 html {
     min-height: 100%;
     position: relative;
 }

 img {
     user-drag: none;
     user-select: none;
     -moz-user-select: none;
     -webkit-user-drag: none;
     -webkit-user-select: none;
     -ms-user-select: none;
 }

 .variation {
     margin: .05rem;
     transition: .25s ease;
     background-color: white;
     border-radius: .5em;
 }

 button.btn:hover:enabled {
     transform: scale(1.05);
     transition: .25s ease;
 }

 a.btn:hover {
     transform: scale(1.05);
     transition: .25s ease;
 }

 .variation a {
     color: black;
 }

 .variation:hover a.nav-link {
    text-decoration:none !important;
}

 .variation:hover {
     transform: scale(1.1);
 }

 .row {
     margin-right: 0px !important;
     margin-left: 0px !important;
 }

 #order-success,
 #add-adress,
 #check-order {
     background: rgba(255, 255, 255, .9);
     border-radius: 1rem;
 }

 .alert-success>[data-notify="message"] {
     font-weight: bold;
 }

 span.trash {
     transition: .3s ease;
 }

 span.trash:hover {
     color: red;
     cursor: pointer;
 }

 .cartFont {
     width: 100%;
 }

 .card {
     height: 100%;
 }

 header h1 {
     font-size: 2rem;
 }

 header {
     height: 50vh;
     width: 100%;
     background-color: gray;
     background-size: cover;
     background-position: center;
     border-radius: .25rem;
 }

 #homeSlider h5,
 #homeSlider p,
 .homeInfo h5,
 .homeInfo p,
 header h1,
 header p {
     background-color: rgba(255, 255, 255, .8);
     color: black;
     display: inline-block;
     padding: .5rem 1rem .5rem 1rem;
 }

 #homeHeader>div>header>h1 {
     width: 100%;
 }

 .container-fluid {
     padding-right: 20px;
     padding-left: 20px;
 }

 .productInfo p {
     font-size: 12px;
 }

 .productInfo span {
     font-size: 12px;
 }

 .productInfo h5,
 .productInfo p {
     margin-bottom: 0;
 }

 .productInfo {
     background-color: rgba(255, 255, 255, .8);
     padding: .5rem .5rem .5rem .5rem;
     max-width: 95%;
     display: inline-block;
     margin-bottom: .5rem;
 }

 #productInfoForm .ajaxLoading {
     width: 100%;
     height: 100%;
     background: rgb(255, 255, 255, .8);
     position: absolute;
     margin: 0;
     top: 0;
     left: 0;
 }

 #productInfoForm .ajaxLoading>div {
     position: relative;
     top: 30%;
 }


 /************************************************/
 /***************** FOOTER *******************************/
 /************************************************/

 footer {
     padding: 1rem 0;
     position: relative;
     bottom: 0;
     left: 0;
     right: 0;
 }

 .site-footer {
     padding: 45px 0 20px;
     font-size: 15px;
     line-height: 24px;
 }

 .site-footer h6 {
     font-size: 20px;
     text-transform: uppercase;
     margin-top: 5px;
     letter-spacing: 2px
 }

 .site-footer a {
     color: #737373;
 }

 .site-footer a:hover {
     text-decoration: none;
 }

 .footer-links {
     padding-left: 0;
     list-style: none
 }

 a.footer-link {
     font-size: 1.3rem;
     line-height: 2rem;
 }

 .footer-links li {
     display: block
 }

 .footer-links a:active,
 .footer-links a:focus,
 .footer-links a:hover {
     text-decoration: none;
 }

 .footer-links.inline li {
     display: inline-block
 }

 .site-footer .socialIcons a {
     width: 40px;
     height: 40px;
     line-height: 40px;
     margin-left: 6px;
     margin-right: 0;
     border-radius: 100%;
     background-color: #33353d;
     background-color: #eceeef;
     color: #818a91;
     font-size: 16px;
     display: inline-block;
     line-height: 44px;
     width: 44px;
     height: 44px;
     text-align: center;
     margin-right: 8px;
     border-radius: 100%;
     -webkit-transition: all .2s linear;
     -o-transition: all .2s linear;
     transition: all .2s linear;
 }

 .site-footer .paymentIcons span {
     background-color: #eceeef;
     color: #818a91;
     font-size: 16px;
     display: inline-block;
     line-height: 44px;
     width: 120px;
     height: 44px;
     border-radius: 5%;
     text-align: center;
     margin-right: 8px;
     -webkit-transition: all .2s linear;
     -o-transition: all .2s linear;
     transition: all .2s linear;
 }

 @media (max-width:991px) {
     .site-footer [class^=col-] {
         margin-bottom: 30px
     }
 }

 @media (max-width:767px) {
     .site-footer {
         padding-bottom: 0
     }

     .site-footer .copyright-text,
     .site-footer .socialIcons {
         text-align: center
     }
 }

 .socialIcons,
 .paymentIcons {
     padding-left: 0;
     margin-bottom: 0;
     list-style: none
 }

 .socialIcons li,
 .paymentIcons li {
     display: inline-block;
     margin-bottom: 4px
 }

 .socialIcons li.title,
 .paymentIcons li.title {
     margin-right: 15px;
     text-transform: uppercase;
     color: #96a2b2;
     font-weight: 700;
     font-size: 13px
 }

 .socialIcons a:active,
 .socialIcons a:focus,
 .socialIcons a:hover,
 .paymentIcons span:active,
 .paymentIcons span:focus,
 .paymentIcons span:hover {
     color: #fff;
     background-color: #29aafe
 }

 .socialIcons.size-sm a,
 .paymentIcons.size-sm span {
     line-height: 34px;
     height: 34px;
     width: 34px;
     font-size: 14px
 }

 .socialIcons a.facebook:hover {
     background-color: #3b5998;
 }

 .socialIcons a.twitter:hover {
     background-color: #00aced;
 }

 .socialIcons a.instagram:hover {
     background-color: #c13584;
 }

 .socialIcons a.whatsapp:hover {
     background-color: #25d366;
 }

 .socialIcons a.youtube:hover {
     background-color: #FF0000;
 }

 .paymentIcons span.paypal:hover {
     background-color: #0079C1;
 }

 .paymentIcons span.directPay:hover {
     background-color: #85bb65;
 }

 .paymentIcons span.ec-card:hover {
     background-color: #00c177;
 }

 .paymentIcons span.creditcard:hover {
     background-color: #faaa13;
 }

 @media (max-width:767px) {
     .socialIcons li.title {
         display: block;
         margin-right: 0;
         font-weight: 600
     }
 }

 div.shopStatus {
     background-color: rgb(244, 67, 54);
     color: white;
     bottom: 0;
     width: 100%;
     text-align: center;
     padding: 1rem;
 }

 div.shopStatusWarning {
     background-color: rgb(244, 162, 54);
     color: white;
     bottom: 0;
     width: 100%;
     text-align: center;
     padding: 1rem;
 }

 div.shopStatusInfo {
     /* background-color: #d1ecf1;
    color: #0c5460; */
     background-color: #ff9b00;
     color: #333;
     bottom: 0;
     width: 100%;
     text-align: center;
     padding: 1rem;
 }

 div.shopStatus p,
 div.shopStatusWarning p {
     margin: 0;
 }

 .adjustQauntity .quantity:hover {
     cursor: pointer;
 }

 .discountWrapper,
 .addressWrapper {
     border: 1px solid #c1c1c1;
     padding: 1rem;
     border-radius: .25rem;
 }

 .sliderPic {
     width: 100%;
     height: 40vh;
     background-position: center;
     background-size: cover;
 }

 s.oldPrice {
     color: red;
 }

 s.oldPrice small {
     font-size: 0.8rem;
 }

 .cartWrapper .warning {
     color: red;
 }

 .homeElements,
 .categoriesElements,
 .subsite-content {
     padding-bottom: 5%;
 }

 @media (min-width: 1200px) {
     footer {
         padding: 1rem 0;
         bottom: 0;
         left: 0;
         right: 0;
     }
 }

 .navbar-toggler:focus,
 .navbar-toggler:active,
 .navbar-toggler-icon:focus {
     outline: none;
     box-shadow: none;
 }

 .navbar-toggler {
     padding: .2rem;
     font-size: 1rem;
 }


 a.nav-link:hover {
     text-decoration: underline;
 }



 /************************************************/
 /***************** SLIDER ELEMENTE *******************************/
 /************************************************/

 .switch {
     position: relative;
     display: inline-block;
     width: 60px;
     height: 34px;
 }

 .switch input {
     display: none;
 }

 .switch span {
     display: inline-block;
 }

 .slider {
     position: absolute;
     cursor: pointer;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: #ccc;
     -webkit-transition: .4s;
     transition: .4s;
 }

 .slider:before {
     position: absolute;
     content: "";
     height: 26px;
     width: 26px;
     left: 4px;
     bottom: 4px;
     background-color: white;
     -webkit-transition: .4s;
     transition: .4s;
 }

 input:checked+.slider {
     background-color: #2196F3;
 }

 input:focus+.slider {
     box-shadow: 0 0 1px #2196F3;
 }

 input:checked+.slider:before {
     -webkit-transform: translateX(26px);
     -ms-transform: translateX(26px);
     transform: translateX(26px);
 }

 textarea:focus,
 input[type="text"]:focus,
 input[type="password"]:focus,
 input[type="datetime"]:focus,
 input[type="datetime-local"]:focus,
 input[type="date"]:focus,
 input[type="month"]:focus,
 input[type="time"]:focus,
 input[type="week"]:focus,
 input[type="number"]:focus,
 input[type="email"]:focus,
 input[type="url"]:focus,
 input[type="search"]:focus,
 input[type="tel"]:focus,
 input[type="color"]:focus,
 .uneditable-input:focus {
     border-color: #ffa200 !important;
     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.025) inset, 0 0 1px #ffa200 !important;
     outline: 0 none !important;
 }

 .slider.round {
     border-radius: 34px;
 }

 .slider.round:before {
     border-radius: 50%;
 }

 @media (min-width: 768px) {
     .sliderPic {
         width: 100%;
         height: 50vh;
         background-position: center;
         background-size: cover;
     }
 }

 /************************************************/
 /***************** NAVBAR *******************************/
 /************************************************/

 .nav-link {
     padding: .1rem 1rem;
 }

 #nav2 .nav-link {
     text-align: center;
 }

 @media (min-width: 1200px) {
     #nav2 .nav-link {
         text-align: right;
     }
 }

 #nav2 .navbar {
     padding: 0.5rem 0rem 0rem 0rem !important;
     display: block !important;
 }

 #nav2 hr {
     margin-top: 0rem;
     margin-bottom: 0rem;
 }

 #nav2 img {
     height: 75px;
     padding: 10px 0;
 }

 @media (min-width: 768px) {
     #nav2 .navbar {
         padding: .5rem 0 .5rem 1rem !important;
         display: flex !important;
     }

     #nav2 img {
         height: 110px;
     }

     #nav2 hr {
         margin-top: 1rem;
         margin-bottom: 1rem;
     }
 }

 .navbar-collapse {
     text-align: center;
     padding-top: 20px;
 }

 .icon-bar {
     width: 22px;
     height: 2px;
     background-color: #B6B6B6;
     display: block;
     transition: all 0.2s;
     margin-top: 4px
 }

 .navbar-toggler {
     border: none;
     background: transparent;
 }

 .navbar-toggler .top-bar {
     transform: rotate(45deg);
     transform-origin: 10% 10%;
 }

 .navbar-toggler .middle-bar {
     opacity: 0;
 }

 .navbar-toggler .bottom-bar {
     transform: rotate(-45deg);
     transform-origin: 10% 90%;
 }

 .navbar-toggler.collapsed .top-bar {
     transform: rotate(0);
 }

 .navbar-toggler.collapsed .middle-bar {
     opacity: 1;
 }

 .navbar-toggler.collapsed .bottom-bar {
     transform: rotate(0);
 }

 a#cartSymbol {
     cursor: pointer;
 }

 a#cartSymbol:hover {
     text-decoration: none;
 }

 .fixedImg img {
     position: fixed;
     z-index: 1021;
     right: 50%;
     height: 60px;
     top: 2px;
 }


 @media (min-width:576px) {
     .container-fluid {
         padding-right: 50px;
         padding-left: 50px;
     }

     .productInfo p {
         font-size: 16px;
     }

     #homeHeader>div>header>h1 {
         width: 50%;
     }
 }

 @media (min-width:991px) {
     .navbar-collapse {
         padding-top: 0px;
     }
 }

 @media (min-width:1200px) {
     #homeHeader>div>header>h1 {
         width: 25%;
     }
 }


 /************************************************/
 /***************** PRODUCT TABLE *****************/
 /************************************************/

 .rwd-table {
     margin-top: 5%;
     margin-bottom: 5%;
     min-width: 300px;
     width: 100%;
     background: #eee;
     color: #333;
     border-radius: 0.4em;
     overflow: hidden;
     box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
 }

 .table thead th {
     border-bottom: none;
 }

 .table td,
 .table th {
     border-top: none;
 }

 .rwd-table th {
     display: none;
 }

 .rwd-table td {
     display: block;
 }

 .rwd-table td:first-child {
     padding-top: 0.5em;
 }

 .rwd-table td:last-child {
     padding-bottom: 0.5em;
 }

 @media (min-width: 480px) {
     .rwd-table td:before {
         display: none;
     }
 }

 .rwd-table th,
 .rwd-table td {
     text-align: left;
 }

 @media (min-width: 480px) {

     .rwd-table th,
     .rwd-table td {
         display: table-cell;
         padding: 0.25em 0.5em;
     }
 }

 .rwd-table th,
 .rwd-table td {
     margin: 0.5em 1em;
 }

 @media (min-width: 480px) {

     .rwd-table th,
     .rwd-table td {
         padding: 1em;
     }
 }

 .rwd-table th {
     color: white;
     background: #343a40;
 }

 .table td {
     border-top: none;
 }

 .modal-header .close {
     color: white;
 }

 .card {
     overflow: hidden;
     box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
     transition: transform 0.1s ease-in-out, box-shadow 0.1s;
 }

 .card:hover {
     transform: translateY(-0.3rem) scale(1.0125);
     box-shadow: 0 0.5em 3rem -1rem rgba(0, 0, 0, 0.5);
 }

 /************************************************/
 /***************** BREADCRUMPS *******************************/
 /************************************************/

 .breadcrump {
     border-radius: 4px;
     overflow: hidden;
     font-size: 0;
     display: inline-block;
     padding: 0;
     width: 100%;
 }

 .breadcrump:before,
 .breadcrump:after {
     content: "";
     display: table;
 }

 .breadcrump:after {
     clear: both;
 }

 .breadcrump-item {
     float: left;
     width: 50.00%;
 }

 .breadcrump-link {
     padding: 0 10px 0 5px;
     font-size: 12px;
     height: 60px;
     padding-top: 10px;
     position: relative;
     display: block;
     background-color: #d1d1d1;
     color: #707070;
     margin-right: 22px;
     font-weight: bold;
     text-align: center;
 }

 .breadcrump-link.active {
     background-color: #fff3cd;
     color: #856404;
 }

 .breadcrump-link.done {
     background-color: #d4edda;
     color: #155724;
 }

 .breadcrump-link.failed {
     background-color: #f8d7da;
     color: #721c24;
 }

 .breadcrump-link:after,
 .breadcrump-link:before {
     content: '';
     position: absolute;
     top: 0;
     width: 0;
     height: 0;
     border: 1px solid white;
     border-width: 30px 10px;
 }

 .breadcrump-link:before {
     border-color: #d1d1d1;
     border-left-color: transparent;
     right: 100%;
 }

 .breadcrump-link:after {
     border-left-color: #d1d1d1;
     left: 100%;
 }

 .breadcrump-link.active:before {
     border-color: #fff3cd;
     border-left-color: transparent;
     right: 100%;
 }

 .breadcrump-link.active:after {
     border-left-color: #fff3cd;
     left: 100%;
 }

 .breadcrump-link.done:before {
     border-color: #d4edda;
     border-left-color: transparent;
     right: 100%;
 }

 .breadcrump-link.done:after {
     border-left-color: #d4edda;
     left: 100%;
 }

 .breadcrump-link.failed:before {
     border-color: #f8d7da;
     border-left-color: transparent;
     right: 100%;
 }

 .breadcrump-link.failed:after {
     border-left-color: #f8d7da;
     left: 100%;
 }

 .breadcrump-item:last-of-type .breadcrump-link:after {
     display: none;
 }

 .breadcrump-item:first-of-type .breadcrump-link:before {
     display: none;
 }

 .breadcrump-item:last-of-type .breadcrump-link {
     margin-right: 0;
 }

 @media (min-width: 1200px) {
     .breadcrump-link {
         height: 40px;
     }

     .breadcrump-link:after,
     .breadcrump-link:before {
         border-width: 20px 10px;
     }
 }

 .breadcrump {
     padding-top: 20px;
 }

 .animate__animated.animate__bounceIn {
     --animate-duration: 2s;
     --animate-delay: 10s;
 }


 /* PWA MODAL */

 #pwaDownloadChrome.alert {
     margin-bottom: 0;
 }

 #pwaDownloadModal h2 {
     font-weight: bold;
     margin-bottom: 15px;
     color: #000
 }

 #pwaDownloadModal .details {
     padding: 5%;
     text-align: center;
 }

 #pwaDownloadModal .modal-dialog {
     max-width: 47rem
 }

 #pwaDownloadModal .close {
     position: absolute;
     top: 15px;
     right: 15px;
     z-index: 1;
     font-size: 1.5rem;
     font-weight: bold;
     color: black;
     background: white;
     border-radius: 50%;
     width: 40px;
     height: 40px;
     text-align: center;
     vertical-align: middle;
     line-height: 40px;
 }

 #pwaDownloadModal .modal-content,
 #pwaDownloadModal .modal-body {
     border-radius: .75rem;
 }

 #pwaDownloadModal img {
     border-radius: .75rem .75rem 0 0;
     object-fit: cover;
     width: 100%;
     height: auto;
 }


 @media (min-width:599px) {
     #pwaDownloadModal .details {
         padding: 5%;
         text-align: center;
     }

     #pwaDownloadModal .details {
         text-align: left;
     }

     #pwaDownloadModal small.para {
         font-weight: bold;
         font-size: 14px;
         color: #63686c
     }

     #pwaDownloadModal img {
         height: 100%;
     }
 }


 .jumpingArrow i {
     font-size: 1.5em;
     animation-name: jumpingArrow;
     animation-duration: 2s;
     animation-iteration-count: infinite;
 }


 @keyframes jumpingArrow {
     0% {
         transform: translateY(-2px);
     }

     50% {
         transform: translateY(4px);
     }

     100% {
         transform: translateY(-2px);
     }
 }

 .workingHours td {
     padding: 5px;
 }


 .overlay-div {
     height: 100%;
     width: 100%;
     position: absolute;
     background-color: #000;
     opacity: .7;
 }

 #nav2 ul,
 #nav1 ul {
     list-style: none;
 }

 #nav2 ul li,
 #nav1 ul li {
     display: inline-block;
     padding: 0 7px;
     position: relative;
 }

 #nav1 ul.navbar-nav li:not(:last-child)::after,
 #nav2 ul.navbar-nav li:not(:last-child)::after {
     content: "";
     border: none;
     border-width: 0;
     position: absolute;
     right: -3px;
     top: 0;
     height: 100%;
 }

 #cartPreviewWrapper {
    position: absolute;
    background: white;
    z-index: 4000;
    right: 1rem;
    top: 1rem;
    margin: 3.75rem 1rem;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    border-radius: .7em;
 }

 #cartPreviewWrapper.nav1,  #cartPreviewWrapper.nav2{
    right: 1rem;
    top: 1rem;
 }

 #cartPreview {
     float: right;
     padding: 1.25rem;
     position: static;
     cursor: default !important;
     overflow-y: auto;
     width: 90vw;
     max-height: 80vh;
 }

 #cartPreview::after {
     bottom: 100%;
     right: 8rem;
     border: solid transparent;
     content: "";
     height: 0;
     width: 0;
     position: absolute;
     pointer-events: none;
     border-bottom-color: white;
     border-width: 8px;
     margin-left: -8px;
 }


 #cartPreview #closeCart {
    position: relative;
    left: 98%;
    top: -5px;
    cursor: pointer;
}

#cartPreviewFooter #closeCart {
    position: absolute;
    right: 1rem;
    top: 4rem;
    cursor: pointer;
}

 .cartButton {
     position: relative !important;
     display: inline-block !important;
 }



    
 @media (min-width:576px) {
    .nav2 #cartPreview::after {
        bottom: 100%;
        right: 10rem;
    }
}

 @media (min-width:768px) {

    #cartPreviewWrapper.nav2{
       right: 2.5rem;
       top: 13rem;
    }
    .nav2 #cartPreview::after {
        bottom: 100%;
        right: 8.5rem;
    }

}

 @media (min-width:992px) {

    #cartPreviewWrapper.nav2{
        right: 6.5rem;
        top: 7rem;
     }

     .nav2 #cartPreview::after {
        bottom: 100%;
        right: 4.5rem;
    }
    

     #cartPreview{
         width: 50vw;
         height: auto;
     }

     #cartPreview::after {
        bottom: 100%;
        right: 4rem;
    }
    
    #nav1 ul.navbar-nav li:not(:last-child)::after,
    #nav2 ul.navbar-nav li:not(:last-child)::after {
        border: 1px solid #e2e2e2;
        border-width: 1px 1px 0 0;
    }
 }

 @media (min-width:1200px) {

     #cartPreview {
         width: 30vw;
         height: auto;
     }
     #cartPreviewWrapper.nav2{
        right: 1.5rem;
        top: 7rem;
     }
 }

 header {
     overflow: hidden;
     position: relative;
 }

 .backgroundImg {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100vw;
    height: 100%;
    object-fit: cover;
}

 header h1 {
     position: relative;
 }

 #cartPreviewFooter {
     transition: all 0.5s;
     position: fixed;
     display: block;
     z-index: 1030;
     background-color: white;
     height: 100vh;
     width: 100%;
     overflow-y: auto;
     opacity: 0;
     visibility: hidden;
     bottom: -100vh;
     left: 0;
     padding: 4rem 1rem 2rem;
 }

 #cartPreviewFooter.show {
     opacity: 1;
     transform: rotateY(0deg);
     transform-origin: right;
     visibility: visible;
     transition-delay: 0.5s;
     transition: bottom 0.5s;
     bottom: 0;
 }

 #backToTop {
     display: inline-block;
     width: 45px;
     height: 45px;
     text-align: center;
     border-radius: 4px 0 0 4px;
     position: fixed;
     bottom: 30px;
     right: 0;
     transition: 0.2s;
     opacity: 0;
     visibility: hidden;
     z-index: 1000;
     font-size: 2rem;
     line-height: 45px;
     transform: rotateY(90deg);
     transform-origin: right;
 }

 #backToTop.show {
     opacity: 1;
     transform: rotateY(0deg);
     transform-origin: right;
     visibility: visible;
     transition: 0.3s;
 }

 #backToTop:hover {
     cursor: pointer;
     width: 48px;
     height: 48px;
     line-height: 48px;
 }

 #stickyFooterCart {
     transition: transform 0.5s;
     opacity: 0;
     visibility: hidden;
     transform: rotateX(90deg);
     transform-origin: bottom;
     padding: .5rem 0;
     cursor: pointer;
 }


 #stickyFooterCart.show {
     opacity: 1;
     transform: rotateY(0deg);
     visibility: visible;
     transition: transform 0.5s;
 }

 summary {
     outline: none;
 }

 legend {
    border-bottom: .15rem solid #000000;
 }