body {
    background: #fff;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
    color: #545454;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 1220px;
    padding: 2em 2em 4em;
}
.container {
 margin: 0 auto;
 max-width: 95%;

}
                        
        }

header, .site-footer {
      background: #FF6400;
     
      border: 1px sold black;
    
     height: 200px;
    align:left;
   padding: 0 20px;
}
 h2, h3, h4, h5, h6 {
    color: #a0522d;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
}

 h1 {
   color: #FF9640;
  font-size: 40px;
  width:100%;
text-align: center;
  margin: 0;
  background: -webkit-linear-gradient(bottom, #008000, #ffffff);
  background: -moz-linear-gradient(bottom, #008000, #ffffff);
  background: -ms-linear-gradient(bottom, #008000, #ffffff);
  background: linear-gradient(bottom, #008000, #ffffff);
  text-shadow: 2px 2px 2px #FF00ff, 2px 2px 1px black;
}
h2 {
    margin-top: 1.3em;
}

a {
    color: black;
}

b, strong {
    font-weight: 600;
}

samp {
    display: none;
}


img {
    -webkit-animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1;
            animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1;
    background: transparent;
    border: 10px solid rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    display: block;
    margin: 1.3em auto;
    max-width:50%;
   float:right;

}

@-webkit-keyframes colorize {
    0% {
        -webkit-filter: grayscale(100%);
    }
    100% {
        -webkit-filter: grayscale(0%);
    }
}

@keyframes colorize {
    0% {
        filter: grayscale(100%);
    }
    100% {
        filter: grayscale(0%);
    }
}



.items_add{
           position: absolute;
           color: #ff00ff;
           font-size: 15px;
          height: 18px;
          width: 100px;
         font-weight: bold;
        z-index: -1;
          background: url('/Assets/Images/Donation/btn_stepf.gpg') no-repeat;


}


.item1 { grid-area: header; padding-bottom: 80px; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  display: grid;
  grid-template-areas:
    'header  header header header header header'
  'footer footer footer footer footer footer';
  grid-gap:10px;
  background-color: #2196F3;
  padding: 10px;
width:fullscreen;
position: relative;
}

.grid-container > div {
  background-color: #228b22;
  text-align: left;
  padding: 10px 0;
  font-size: 30px;
 overflow:auto;
}


.item2  {

background:red;}

.item1  {
color:blue;}
.item5  {
background-color:#b8860b ;
}

.item3  {
color:red;}
.flex-container {
  display: flex;
  height: auto;
  align-items: center;
  background-color:#b8860b ;
 border: 10px solid blue;
 text-decoration: none;
}

.flex-container3{
  display: flex;
  height: 400px;
  align-items: center;
  background-color:#b8860b ;
 border: 10px solid black;
}
.flex-container4{
  display: flex;
 align-items: center;
 border: 10px solid darkred;
  height: 565px;
background-color: #254441;
}
.flex-container2{
display: flex;
  height: auto;
  align-items: center;
width: auto;
 background-color:#b8860b ;
  border: 4px solid green;
}

.vimungi{
display: flex;
  height: 80px;
  align-items: center;
width: auto;
 background-color:#b8860b ;
  border: 4px solid green;
}



.flex-container >  ul  li {
  background-color: #f1f1f1;
  width: 300px;
  margin: 2px;
  text-align: center;
  line-height: 30px;
  font-size: 20px;
height:350px;
float:left;
list-style: none;
z-index:99;
}

.product-item-main{
background-color:#f1f1f1 ;
  padding: 10px;
}




.flex-container6 {
  background-color:#f1f1f1 ;
  width: 890px;
 height:400px;
  margin: 1px;
text-align: top;
 overflow:hidden;
  display: inline-block;
 padding:  8px;
 position:relative;
border-radius: 5px
  border: 3px solid #2e8b57;
color:black;
font-size: 16px;
 float:left;
z-index:99;
line-height:40px
text-overflow:auto;

}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}




.flex-container7 ul  li {
 background-color: #f1f1f1;
width: 300px;
height:300px;
margin: 5px;
text-align: top;
 overflow:hidden;
 display: inline-block;
 padding:  20px;
 position:relative;
border-radius: 10px
 border: 3px solid #2e8b57;
color:black;
font-size: 16px;
 float:left;
z-index:99;

}
.propertyFamily{
 padding: 0;

  margin: 0;

  list-style: none;

  position: relative;
font-size: 16px;
font-weight: bold;
text-shadow: none;
border: 5px ;
}

.flex-container7 {
display:flex;
  align-items: center;
  background-color:#b8860b ;
 border: 10px solid blue;
 text-decoration: none;

}


.flex-container7 div {
  clear: left;
}
#PropertyFamilyPosition-DisplayNameLabelPropertyFamily-clMainArticle-cl2018-cart-name-product  {
  display: block;
  padding: 0 20px;
  color: black;
  font-size: 20px;
  line-height: 5px;
  text-decoration: none;

}

.item_add {
  display: block;
  padding: 20px;
  color:darkcyan;
  font-size: 20px;
  line-height: 10px;
  text-decoration: none;
 float:left;
}

nav ul li {
  margin: 0px;
  display: inline-block;
  float: left;
padding:5px;
}

nav ul {
  float: left;
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}

nav a {
  display: block;
  padding: 0 20px;
  color: #fff;
  font-size: 20px;
  line-height: 10px;
  text-decoration: none;
}


* {
  box-sizing: border-box;
}

/* Style the search field */
form.example input[type=text] {
  padding: 10px;
  font-size: 17px;
  border: 1px solid grey;
align:center;
  width: 50%;
  background: #f1f1f1;
}

/* Style the submit button */
form.example button {
align:center;
  width: 5%;
  padding: 10px;
  background: #2196F3;
  color: white;
  font-size: 17px;
  border: 1px solid grey;
  border-left: none; /* Prevent double borders */
  cursor: pointer;
}

form.example button:hover {
  background: #0b7dda;
}

/* Clear floats */
form.example::after {
  content: "";
  clear: both;
  display: table;
}
.dm {
 background: #0b7dda;
  padding: 10px;
text-align: center;
  color: white;
}


#shelf{
  background-color:#f1f1f1 ;
  width: 300px;
 height:350px;
  margin: 1px;
text-align: top;
 overflow:hidden;
  display: inline-block;
 padding:  8px;
 position:relative;
border-radius: 5px
  border: 3px solid #2e8b57;
color:black;
font-size: 16px;
 float:left;
z-index:99;
line-height:10px
text-overflow:auto;
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
}