/* CSS reset {{{ */

            html, body, div, span, applet, object, iframe,
            h1, h2, h3, h4, h5, h6, p, blockquote, pre,
            a, abbr, acronym, address, big, cite, code,
            del, dfn, em, img, ins, kbd, q, s, samp,
            small, strike, strong, sub, sup, tt, var,
            b, u, i, center,
            dl, dt, dd, ol, ul, li,
            fieldset, form, label, legend,
            table, caption, tbody, tfoot, thead, tr, th, td,
            article, aside, canvas, details, embed,
            figure, figcaption, footer, header, hgroup,
            menu, nav, output, ruby, section, summary,
            time, mark, audio, video {
              margin: 0;
              padding: 0;
              border: 0;
              font-size: 100%;
              font: inherit;
              vertical-align: baseline;
            }

            /* HTML5 display-role reset for older browsers */
            article, aside, details, figcaption, figure,
            footer, header, hgroup, menu, nav, section {
              display: block;
            }

            body {
              line-height: 1;
            }

            ol, ul {
              list-style: none;
            }

            blockquote, q {
              quotes: none;
            }

            blockquote:before, blockquote:after,
            q:before, q:after {
              content: '';
              content: none;
            }

            table {
              border-collapse: collapse;
              border-spacing: 0;
            }

          /* CSS reset }}} */


          body, html {
            width: 100%;
            height: 100%;
            font-size: 14px;
            font-family: 'Roboto', sans-serif;
            color: rgba(0,0,0,.70);
          }

          div {
            box-sizing: border-box;
          }

          #page_wrapper {
            width: 100%;
            height: 100%;
            position: relative;
            /*
            background-image: url('images/sadra_bg.jpg');
            background-size: contain;
            */
            /*opacity: 0.05;*/
          }

          #header_menu {
            background-color: #c88719;
            width: 100%;
           /* opacity: 0.75;*/
            height: 80px;
            position: fixed;
            border-bottom: 1px solid #c66900;
           z-index: 10;
          }

          #header_top_bg {
            padding-top: 80px;
            width: 100%;
            /*height: 300px;*/
            /*
            background-image: url('images/bg1.jpg');
            background-size: contain;
            */
            background-color: #ffb74d;


          }

          .top_bg {
            width: 100%;
            height: 300px;
       /*     background-image: url('images/bg_top_1.jpg');
            background-size: cover;
            opacity: 0.5;*/
          }

          #footer {
            width: 100%;
            height: 100px;
            position: fixed;
            bottom: 0;
            background-color: #c88719;
            color: #FFFFFF;
            z-index: 10;
            padding-top: 20px;
          }

          #content {
            padding-bottom: 100px;
          }

          .content {
            width: 1000px;
            margin: 0 auto;
          }

          .columns {
            display: flex;
          }

          .content_left {
            flex: 1;
          }
          .content_right {
            flex: 1;
          }
          .content_hor_sep {
            width: 20px;
          }

          #header .content {
            display: flex;
          }

          h1 {
            font-size: 26px;
            color: #c88719;
            margin-bottom: 15px;
            border-bottom: 1px solid #DDDDDD;
            padding: 5px;
          }


          h2 {
            /*font-family: Arial;*/
            font-size: 22px;
            color: #c88719;
            margin-bottom: 15px;
            border-bottom: 1px solid #DDDDDD;
            padding: 5px;
          }

          p {
            text-align: justify;
            padding-top: 10px;
            padding-bottom: 10px;
            line-height: 130%;
            padding-left: 10px;
            padding-right: 10px;
          }

          .clear {
            clear: both;
          }

          #main_menu {
            text-align: right;

          }

          #main_menu .item {
            display: inline-block;
            padding: 15px;
            -webkit-transition: all 0.4s ease-in;
            transition: all 0.4s ease-in;
          }

          #main_menu .item a{
            font-size: 14px;
            color: #FFFFFF;
            cursor: pointer;
            text-decoration: none;
            width: 100%;
            height: 100%;
          }

          #main_menu .item:hover {
            background-color: ;
          }

          #main_menu .item:hover a{
            -webkit-stroke-width: 5.3px;
            -webkit-stroke-color: #FFFFFF;
            -webkit-fill-color: #FFFFFF;
            text-shadow: 1px 0px 20px #FFFFFF;
            color: #c88719;
          }


          .logo {
            font-family: 'Indie Flower', cursive;
            font-size: 50px;
            padding-top: 20px;
            padding-Left: 10px;
            float: left;
            color: #FFFFFF;
            cursor: pointer;

          }

          .logo_sub {
            display: inline-block;
            font-family: 'Indie Flower', cursive;
            font-size: 20px;
            margin-left: 10px;
            opacity: 0.8;
          }


          .home_cat_list {

            display: flex;

          }

          .home_cat_item {
            cursor: pointer;
            position: relative;
            flex: 1;

            height: 220px;
            display: inline-block;
            background-color: #FFFFFF;

            -webkit-transition: all 0.4s ease-in;
            transition: all 0.4s ease-in;

            border: 0px;
            background-size: 100% 100%;
            /*opacity: 0.6;*/
            border-right: 1px solid #ffb74d;
            border-left: 1px solid #ffb74d;
          }

          .home_cat_item:hover {
            background-size: 110% 110%;
            opacity: 1;
          }

          .home_cat_item:hover .name {
            opacity: 1;
            background-color: #c88719;

          }

          .home_cat_item .name {
            width: 100%;
            height: 60px;
            text-align: center;
            padding: 5px;
            background-color: #e49c21;
           /* opacity: 0.9;*/
            color: #FFFFFF;
            position: absolute;
            bottom: 0;
            -webkit-transition: all 0.4s ease-in;
            transition: all 0.4s ease-in;

            font-size: 18px;
            font-weight: bold;
            /* font-family: 'Roboto Slab', serif; */
            padding-top: 18px;
          }



          #content .content {
            padding-top: 20px;
            padding-bottom: 20px;
            padding-left: 10px;
            padding-right: 10px;
          }

          .contact_form {
            padding-left: 10px;
          }
          .contact_form .error {
            color: red;
            font-weight: bold;
            padding-bottom: 10px;
          }
          .contact_form .ok {
            color: green;
            font-weight: bold;
            padding-bottom: 10px;
          }
          .contact_form .label {
            font-weight: bold;
            padding-bottom: 5px;
          }
          .contact_form .input {
            margin-bottom: 20px;
          }
          .contact_form .input input {
            border: 1px solid #DDDDDD;
            font-size: 14px;
            padding: 5px;
            width: 200px;
          }
          .contact_form .input textarea {
            width: 100%;
            height: 100px;
            border: 1px solid #DDDDDD;
          }
          .contact_form .button button {
            background-color: #c88719;
            color: #FFFFFF;
            border: 1px solid #c88719;
            padding: 10px;
            font-weight: bold;
            cursor: pointer;
            border-radius: 3px;
          }
          .contact_form .button button:hover {
            background-color: #ffb74d;
          }
          .footer-content {
            display: inline-block;
          }

          .product-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
          }

          .product-item {
            width: 250px;
            height: 300px;
            margin: 10px;
            background-color: #e49c21;
            cursor: pointer;

          }

          .product-item .name {
            height: 50px;
            background-color: #e49c21;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #FFFFFF;
            font-weight: bold;
          }

          .product-item .img img{
            width: 250px;
            height: 250px;
          }

          .product-item:hover {
            background-color: #c88719;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
          }
          .product-item:hover .name{
            background-color: #c88719;
          }