* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: sans-serif;
  
}
.flex {
 /*   display: flex;  */
    
}

.ctr {
    margin: 0 auto;
       text-align: center; 
       display: block;
}

.width {
    width: 100%;
    Max-width: 1000px;
    margin: 0 auto;
    padding: 1em;
}

.width2 {
    width: 100%;
    height: auto;
    Max-width: 500px;
    margin: 0 auto;
    padding: 1em;
}

#new-top {
  display:  flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin:  0em auto 1em auto;
overflow: hidden;
 background: linear-gradient(to right, rgba(242,239,227,1) 0%,rgba(166,175,105,1) 8%,rgba(239,238,234,1) 27%,rgba(249,244,245,1) 55%,rgba(244,239,217,1) 71%,rgba(166,175,105,1) 93%,rgba(239,238,234,1) 100%,rgba(234,229,194,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}

.h1-top {
  padding:  .15em ;
  /*margin-top: -.5%;  */

  box-shadow: 0 4px 17px -2px rgba(0, 0, 0, 0.8);
  max-width: 90vw;
  position: relative;
  z-index: 55;
  margin: .5em auto .1em auto;
  color: black;
  font-weight: 500;
}
.h2-hdr {
    color: gray;
    font-weight: 500;
    letter-spacing: .05em;
    padding 0 1.25em;
}

.h3-hdr {
    color: gray;
    font-weight: 500;
    letter-spacing: .05em;
    padding .75em 1.25em;
    text-align: center;
    line-height: 2.75em;
    
    font-size: clamp(1.8rem, calc(7vw = 1rem), 5rem);
    
}

.max-400 {
    width: 100%;
    height: auto;
    display: block;
    max-width 400px;
    padding: 1em;
}

.max-500 img{
    width: 100%;
    height: auto;
    max-width 500px;
    padding: 1em;
    display: block;
}

.max-600 img{
    width: 100%;
    height: auto;
    max-width 500px;
    padding: 1em;
    display: block;
}

.bdr-wht {
    border: solid 2px white ;

}

.flex-group {

display: flex;

flex-wrap: wrap:

}


.flex-items {

flex-grow: 1;

flex-basis: 400;

}

.smart-pic{
   /* width: 100px;  */

    width: 100%;
    max-width: 700px;
    height: auto;

   /*  height: 100px; */
   /* background-color: red; */
    position: relative;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 1;
    /*Shorthand property of animation ~ animation: example 4s 1;*/
  }
  
  .soc-med-strip {
      display: flex;
     /* grid-template-colmuns: 1fr 3fr 1fr;  */
      Max-width: 500px; 
   /*  margin: -2em 2em 0 2em;  */
      padding: 0 0em;
      position: relative;
      z-index: 2;
  }
  
  .fb-btn {
  padding: 0 0 0em 0;
      width: 55px;
      height: auto;

  }
  
  .border {
     border: 1px solid beige;
  }
  
  /*-----.................------- */
  
  .grid-element {
      display: grid;
   grid-template-columns:
   repeat(auto-fit, 
   minmax(400px, 100%),
   1fr);
}



  .font-element {
       /*  display: grid;  */
   font-size: clamp(1.8rem, calc(7vw = 1rem), 5rem);clamp(1.8rem, calc(7vw = 1rem), 5rem);
  }


/*
#show-boxes {
          display: grid;
   grid-template-columns:
   repeat(auto-fit, 
   minmax(400px, 100%),
   1fr);
}


*/