@import url('http://fonts.googleapis.com/css?family=Poppins:regular,500,600');
  @font-face {
    font-family: 'myfont'; /* You can name it anything */
    src: url('fonts/Poppins-regular.ttf') format('truetype'); /* Ensure the correct path */
    font-weight:bolder;
    font-style: normal;
}



i{
    cursor:pointer;
}


*{
    font-family:
    Poppins;
   /* max-width:100%;*/

}


.center{
    display:flex;
    align-content: center;
    align-items: center;
    align-self: center;
    justify-content: center;
    flex-direction:
    column;
    width:100%;
    height:400px;
}

      body{

     /*background-color:hsla(45, 100%, 96%, 1); */
     color:black;
     width:100%;
     overflow-x:hidden;
     font-weight:8000;
     font-family:"poppins";
 }
.hiddenmenu{
    display:none;
    height:100vh;
    width:100vw;
    position:relative;
    overflow:hidden;
    left:0;
    top:0;
    z-index:80;
    background:hsla(30, 100%, 45%, 1);
    /*background-image:url(images/text-logo.jpg);
    background-repeat:no-repeat;
    background-size:contain;
    background-position:top;*/
     padding:10px 10px 10px;
}


.hiddenmenu .mobilemenu{
    width:90%;
     display:flex;
    align-content: center;
    align-items: center;
    align-self: center;
    justify-content: center;
    flex-wrap:wrap;
}

#menulist{
    display:flex;
    align-content: center;
    align-items: center;
    align-self: center;
    justify-content: center;
    flex-wrap:wrap;
}

#menulist li{
    list-style:none;
    padding:5px;
    margin:5px;
    background:hsla(30, 100%, 81%, 1);
    color:black;
    border-radius:10px;
    font-size:12px;
}


#menulist li a{
    color:black;
    text-decoration: none;
}

#menulist li i{
    margin:4px;
}


.close{
    position:absolute;
    height:35px;
    width:35px;
    background:#fff;
    border-radius:50%;
    top:10px;
    right:10px;
    display:flex;
    align-content: center;
    align-items: center;
    align-self: center;
    justify-content: center;
}


.mobilemenu{
    display:flex;
    align-content: center;
    align-items: center;
    align-self: center;
    justify-content: center;
    flex-direction: column;
    height:100%;
    width:100%;
    overflow-y:hidden;
    overflow-x:hidden;
    justify-content: center;

}


.mainwrapper{
              /*display:none;*/
              opacity:;
              background-color:hsla(45, 100%, 96%, 1);
          }

          .wrapperin{
              display:;
              opacity:1;
          }


          .spinwrapper{
              position:fixed;
              left:0;
              top:0;
              height:100vh;
              width:100vw;
              display:flex;
             align-content: center;
             align-items: center;
             align-self: center;
             justify-content:center;
             z-index: 10;
             background-color:hsla(45, 100%, 96%, 1);
             overflow-y:hidden;


          }

          .spin{
              height:40px;
              width:40px;
              padding:10px;
              font-weight:bold;
              border:20px solid black;
              border-radius:50%;
              display:flex;
              align-content: center;
              align-items: center;
              align-self: center;
              justify-content: center;
              /*background-image:url("images/text-logo.jpg");*/
              /*background:hsla(30, 100%, 81%, 1);*/
              background-position:center;
              background-size:contain;
              border-top-color:hsla(30, 100%, 52%, 1);
              border-left-color:hsla(30, 100%, 52%, 1);
              box-shadow:0px 0px 10px  inset rgba( 0 , 0 , 0 , 0.2);
              animation: loading 0.7s ease infinite;
          }

          @keyframes loading{
              from{
                  transform: rotate(0turn);
              }

              to{
                  transform: rotate(1turn);
              }

          }

/*  */

.advert{
    height:90px;
     display:flex;
      align-content: center;
      align-items: center;
       align-self: center;
       background-image:url(images/img-10.jpeg);
       background-size:cover;
       background-repeat:no-repeat;
       background-position:center;
      justify-content:center;
  /*  background:hsla(45, 100%, 96%, 1);*/
    width:100%;
    box-shadown:0px 0px 2px rgba( 0, 0 , 0 , 0.1);
    position:relative;
    margin:10px;
}


.advt{
    position:absolute;
    top:10px;
    left:10px;
    font-size:8px;
    opacity:.7;
    padding:3px;
    background:hsla(30, 100%, 81%, 1);
    color:black;
    border-radius:5px;
}

/* advert */
        .image{
            height:250px;
            width:100%;
            object-fit:cover;
            cursor:pointer;
        }



       .post-update{
           display:none;
          /* background:hsla(45, 100%, 84%, 1);*/
           padding:10px 10px 10px;
       }


       .flex{
           display:flex;
           margin:5px;
       }


    #social-sidebar li{
     /*border:1px solid black;*/
     background:#fff;
     /*padding:10px 10px 10px;*/
      display:flex;
      align-content: center;
      align-items: center;
       align-self: center;
      justify-content:center;
     margin:5px;
     color:black;
     font-size:15px;
     font-weight:bold;
     height:40px;
     width:40px;
     border-radius:px;
 }

 #social-sidebar{
      display:flex;
      align-content: center;
      align-items: center;
       align-self: center;
      justify-content:center;
     margin:5px;
     flex-wrap: wrap;

 }

 .search-wrapper{
      display:flex;
      align-content: center;
      align-items: center;
       align-self: center;
      justify-content:center;
     margin-top:10px;
     flex-wrap: wrap;
 }

#search-btn , #search-bar{
    padding:10px;
     background:hsla(45, 100%, 84%, 1);
    border:none;
}

#search-bar{
    width:150px;
}

 .hero #social-hero{
       display:flex;
      align-content: center;
      align-items: center;
       align-self: center;
      justify-content:center;
     margin-top:15px;
     flex-wrap: wrap;
    /* margin-right:20px*/;
     list-style:none;
 }

 .cta{
    /* background:#BA68C8;*/
     background:hsla(39, 100%, 51%, 1);
 }

 .brand{
      background:hsla(50, 100%, 50%, 1.0);
 }

 .primary{
      background:hsla(30, 100%, 81%, 1);
 }

 .secondary{
     background:hsla(45, 100%, 84%, 1);
 }

#categories li i{
    margin-left: 4px;
    margin:5px;
    font-size:10px;
}

 @media all and (max-width:768px){

 .out , .bigwrapper{
     display:none;
 }


  header{
/*    border:1px solid black;*/
    position: sticky;
    top:0px;
    z-index: 9999;
    background:#fff;
}

  .header{
/*    border:1px solid black;*/
    position: sticky;
    top:0px;
    z-index: 9999;
    background:#fff;
}



    .bottom-wrapper #postlink{
       font-weight:bold;
    text-decoration:none;
    font-size:17px;
    color:black;
}

/*.bottom-wrapper #postlink a{
    text-decoration:none;
    font-size:13px;
    color:black;
}*/


 .download-wrapper li{
     padding:7px;
     margin:5px;
     list-style:none;
     background:black;
     border-radius:10px;
     color:#fff;
     cursor:pointer;
 }
 .download-wrapper{
     display:flex;
     align-content: center;
     align-items: center;
     align-self: center;
     justify-content: center;
 }


.download i{
    margin:5px;
}

 .download{
      display:flex;
     align-content: center;
     align-items: center;
     align-self: center;
     justify-content: center;
     padding:10px;
     /*background:hsla(30, 100%, 81%, 1);*/
      border-radius:10px;
 }

      .hero-image{
     background-image:url(svg/swin.svg);
     background-repeat:no-repeat;
     background-size:contain;
     height:300px;
     background-position:center;
 }

 .button{
     /*background:#fff;*/
     /*border:2px solid #BA68C8;*/
     /*background:hsla(30, 100%, 52%, 1);*/
     /*background:hsla(30, 100%, 52%, 1); */
     box-shadow:0px 0px 2px rgba(0 , 0 ,3);
     color:black;
     font-weight:bold;
     border:none;
     cursor:none;
     margin:3px;
     opacity:.9;
     box-shadow: 0px 0px 10px rgba(0 , 0 , 0 , 0.3);
     padding:10px 10px 10px;

 }

         .hero #social-hero li{
     /*border:1px solid black;*/
    /* background:hsla(45, 100%, 84%, 1);*/
     background:#fff;
     /*padding:10px 10px 10px;*/
      display:flex;
      align-content: center;
      align-items: center;
       align-self: center;
      justify-content:center;
     margin:5px;
     color:black;
     font-size:12px;
     font-weight:bold;
     height:40px;
     box-shadow:0px 0px 2px rgba(0 , 0 ,3);
     width:40px;
     border-radius:10px;
 }


       .number{
           position:absolute;
           top:10px;
           left:50px;
           z-index:20;
           font-size:30px;
           font-weight:bold;
           text-shadow:0px 0px 10px rgba(0 , 0 , 0 , 0.3);
           /*border:1px solid black;
           padding:5px;*/
       }


       .number i{
           color:#fff;

       }


       .number h4{
           background:#fff;
           color:black;
           box-shadow: 0px 0px 10ppx rgba(0 , 0 , 0 , 0.2);
           display:flex;
           align-content: center;
           align-items: center;
           align-self: center;
           justify-content: center;
           height:30px;
           width:30px;
           border-radius:50%;
           font-size:17px;
       }





       .thumbnail{
           height:80px;
           width:125px;
           position:relative;
           /*border-radius:50%;*/
           flex-shrink: 0;
           background:hsla(45, 100%, 84%, 1);
       }



       .title-wrapper{
           margin-left:4px;
           margin-top:px;
           display:flex;
           width:50%;
           /*border:1px solid black;   */
           flex-direction: column;
       }

        .title-wrapper h4{
            margin-top:1px;
            line-height:16px;
        }


       .post-data{
           display:flex;
           margin-top:-20px;

       }

       .post-data li{
           list-style:none;
           padding:5px;
           font-size:8px;
       }



       .title-wrapper a{
           font-size:13px;
           color:black;
           text-decoration:none;
           font-weight:bold;
       }

  /*   .product-card{
    height:320px;
    width:100%;
    object-fit:top;*/
    /*border:2px solid red;*/
   /* background:hsla(45, 100%, 84%, 1);*/
  /*  position:relative;     */
/*}*/



 .siderbar h3{
     font-weight:bolder;
 }



 .top-area{
     background:#fff;
     padding:10px 10px 10px;
 }


     .mobile-nav{
         font-size:22px;
         margin;right:10px;
     }

     .mobile-nav i{
         padding:5px;
     }

 .container #links , .container #social , .hero-image , .advert{
     display:none;
 }

#categories{
     display:grid;
          grid-auto-flow:column;
          grid-gap:10px;
          overflow-x:auto;
          max-width:100%;
          scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
        /*border:.1px solid #ccc;*/
        padding:10px 10px 10px;
}

#categories::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

header .search-wrapper{
    display:none;
}

.logo{
    height:40px;
    width:90px;
   /* background-image:url(images/text-logo.jpg);*/
    display:flex;
    align-content: center;
    align-items: center;
    justify-content: center;
     background-position:center;
     background-origin: content-box;
     background-repeat: no-repeat;
     background-size: contain;
}


#categories li{
    padding:10px;
   /* background:hsla(30, 100%, 52%, 1);*/
    /* background:hsla(30, 100%, 81%, 1);*/
    /*border:1px solid hsla(30, 100%, 81%, 1);*/
    border:1px solid black;
    user-selection:none;
    display:flex;
    margin:5px;
    list-style:none;
    border-radius:5px;
    font-size:12px;
    opacity:.9;
    color:black;
    font-weight:bold;
    cursor:pointer;
    box-shadown: 0px 0px 5px rgba(0 , 0 , 0 , 0.3);
}

#categories i{
    margin-top:10px;
}


#categories li a{
    color:black;
    text-decoration: none;
}

#categories li:hover{
    border:1px solid black;
    opacity:1;
}


.sidebarlast , .cut{
    display:none;
}
.main-section .postcontent{
     padding:10px;
     font-size:13px;
     font-weight:thin;
 }
#heading{
    /*color:hsla(30, 100%, 52%, 1);*/
    color:black;
    font-weight:bold;
    padding:5px;
}
/*.bottom-wrapper{
    position:absolute;
    height:100px;
    width:100%;
    padding:10px;
    bottom:5px;
    background:#fff;
    margin-bottom:-30px;
    z-index:10;
    box-shadow:0px 10px 5px  rgba( 0 , 0, 0 , 0.1);
}*/
 .heading-label{
       display:flex;
       padding:7px 7px 7px;
     align-content: center;
    align-items: center;
    align-self: center;
    justify-content:space-between;
    position:
     sticky;
     top:5;
     /*background:#ff5733;*/
     background:hsla(46, 100%, 95%, 1);
     border-radius:10px;
     z-index:20;
     margin:10px;
 }
.flex-grid{
    display:grid;
    grid-template-columns:
    repeat(auto-fit,minmax(15rem,1fr));
    grid-gap:10px;
}


   .bottom-wrapper #postlink{
       font-weight:bold;
    text-decoration:none;
    font-size:18px;
    color:#fff;
    text-shadow:0px 0px 2px rgba(0 , 0 , 1);
}

.bottom-wrapper #postlink a{
    text-decoration:none;
    font-size:18px;
    color:#fff;
    text-shadow:0px 0px 2px rgba(0 , 0 , 1);
}

  .capitol{
    display:flex;
    align-content: center;
    align-items: center;
    align-self: center;
    justify-content:center;
    flex-direction: column;
}



#para{
    padding:5px;
    font-size:12px;
}

.btn-wrapper{
    display:flex;
    align-items: center;
    align-content: center;
    align-self: center;
    flex-wrap: wrap;

}

button{
    margin:5px;
}

.btn-wrapper a{
    color:black;
    text-decoration:none;
}



 }


 @media all and (min-width: 768px){

 .headout{
     display:none;
 }

    header{
        display:flex;
        justify-content: space-between;
/*    border:1px solid black;*/
    position: sticky;
    top:0px;
    z-index: 9999;
    background:#fff;
}
 .capitol{
    display:flex;
    align-content: center;
    align-items: center;
    align-self: center;
    justify-content:center;
    flex-direction: column;
}

 .search-wrapper input{
     border:none;
     padding:5px;
     border-radius:10px;
 }

 .search-wrapper #searchbtn{
     background-color:black;
     color:#fff;
     font-size:2;
 }

  .search-wrapper #search{
      /*border:1px solid #ccc; */
      font-size:12px;
  }

#para{
    padding:5px;
    font-size:12px;
    text-align: justify;
    display:none;
}

.btn-wrapper{
    display:flex;
    align-items: center;
    align-content: center;
    align-self: center;
    flex-wrap: wrap;
}

button{
    margin:5px;
}


.btn-wrapper a{
    color:black;
    text-decoration:none;
}
 .post-update{
     display:none;
 }

            .number{
           position:absolute;
           top:10px;
           left:50px;
           z-index:20;
           font-size:30px;
           font-weight:bold;
           text-shadow:0px 0px 10px rgba(0 , 0 , 0 , 0.3);
           /*border:1px solid black;
           padding:5px;*/
       }


       .number i{
           color:#fff;

       }


       .number h4{
           background:#fff;
           color:black;
           box-shadow: 0px 0px 10ppx rgba(0 , 0 , 0 , 0.2);
           display:flex;
           align-content: center;
           align-items: center;
           align-self: center;
           justify-content: center;
           height:30px;
           width:30px;
           border-radius:50%;
           font-size:17px;
       }





       .thumbnail{
           height:70px;
           width:120px;
           position:relative;
           /*border-radius:50%;*/
           flex-shrink: 0;
           background:hsla(45, 100%, 84%, 1);
       }



       .title-wrapper{
           margin-left:4px;
           margin-top:px;
           display:flex;
           width:50%;
           /*border:1px solid black;   */
           flex-direction: column;
       }

        .title-wrapper h4{
            margin-top:1px;
            line-height:16px;
        }


/*       .post-data{
           display:none;
           margin-top:-20px;

       }*/



       .post-data{
           display:flex;
           align-content: baseline;
           align-items: baseline;
           justify-content: ;
           margin-top:-2px;

       }

       .post-data li{
           list-style:none;
           padding:5px;
           font-size:8px;
       }



       .title-wrapper a{
           font-size:13px;
           color:black;
           text-decoration:none;
           font-weight:bold;
       }
      .download-wrapper li{
     padding:7px;
     margin:5px;
     list-style:none;
     background:black;
     border-radius:10px;
     color:#fff;
     cursor:pointer;
 }
 .download-wrapper{
     display:flex;
     align-content: center;
     align-items: center;
     align-self: center;
     justify-content: center;
 }


.download i{
    margin:5px;
}

 .download{
      display:flex;
     align-content: center;
     align-items: center;
     align-self: center;
     justify-content: center;
     padding:10px;
     /*background:hsla(30, 100%, 81%, 1);*/
      border-radius:10px;
 }
     .flex-grid{
    display:grid;
    grid-template-columns:
    repeat(auto-fit,minmax(15rem,1fr));
    grid-gap:10px;
}

.flex-grid .product-card:first-child{
    grid-column: span 2;
   /* grid-column: span 2;*/
}

.flex-grid .product-card:last-child{
    grid-column: span 2;
   /* grid-column: span 2;*/
}

/*body{
    background-image:url(images/img-2.jpg);
    background-size: cover;
}
*/
.main{
    margin-top:px;
    padding:20px;
    background-color:hsla(45, 100%, 96%, 1);
    /*background:#F2F2F2;*/
    /*border:1px solid black;*/
    box-shadow:0px 0px 2px #ccc;
}

   .bottom-wrapper #postlink{
       font-weight:bold;
    text-decoration:none;
    font-size:17px;
    color:black;
}

.bottom-wrapper #postlink a{
    text-decoration:none;
    font-size:20px;
    color:#fff;
    text-shadow:0px 0px 2px rgba(0 , 0 , 1);
}
      .heading-label{
       display:none;
       padding:7px 7px 7px;
     align-content: center;
    align-items: center;
    align-self: center;
    justify-content:space-between;
    position:
     sticky;
     top:5;
     /*background:#ff5733;*/
     background:hsla(46, 100%, 95%, 1);
     border-radius:10px;
     z-index:20;
     margin:10px;
 }




.bottom-wrapper .cut{
    padding:0px;
    margin:5px;
}

     .main-section .postcontent{
     padding:10px;
     font-size:16px;
     font-weight:thin;
 }
 #heading{
    /*color:hsla(30, 100%, 52%, 1);*/
    color:#fff;
    font-weight:bolder;
    padding:5px;
    font-size:50px;
}





 .number , .audio , .video{
     display:;
 }

      .hero-image{
     background-image:url(images/image6.png);
     background-repeat:no-repeat;
     background-size:contain;
     height:300px;
     background-position:center;
 }

 .button{
     background:#fff;
     /*border:2px solid #BA68C8;*/
     /*background:hsla(30, 100%, 52%, 1);*/
     /*background:hsla(30, 100%, 52%, 1); */
     box-shadow:0px 0px 2px rgba(0 , 0 ,3);
     color:black;
     font-weight:bold;
     border:none;
     cursor:none;
     margin:3px;
     opacity:.9;
     box-shadow: 0px 0px 10px rgba(0 , 0 , 0 , 0.3);
     padding:10px 10px 10px;

 }

 .hero #social-hero li{
     /*border:1px solid black;*/
     /*background:hsla(30, 100%, 52%, 1);*/
     background:#fff;
     /*padding:10px 10px 10px;*/
      display:flex;
      align-content: center;
      align-items: center;
       align-self: center;
      justify-content:center;
     margin:5px;
     color:black;
     font-size:12px;
     font-weight:bold;
     height:40px;
     width:40px;
     border-radius:10px;
 }



.advert-box{
    margin-top:20px;
    height:430px;
    border-radius:10px;
    width:100%;
    position:relative;
     background-image:url(images/image6.png);
     background-repeat:no-repeat;
     background-size:contain;
    bordern:1px solid black;
}








       .cut{
           font-size:12px;
       }





.mobile-nav{
    display:none;
}







 .top-area{
      /*background-image:url(svg/current.svg);*/
     /* background:hsla(30, 100%, 81%, 1);*/
    /* background:#E67300;  */
     /* padding:20px 20px 20px;   */
     background-repeat:no-repeat;
     background-size:cover;
     background-position:center;
 }

 .hero{
      background-image: url('$bg_image');
     background-repeat:no-repeat;
     background-size:cover;
     background-position:center;
     padding:30px;
     color:#fff;
     height:350px;
     display:flex;
     flex-direction: column;
     align-content: center;
     align-items: center;
     align-self: center;
     justify-content: center;
     text-align: center;
 }


 .hero .search-wrapper{
     display:none;
 }

 .hero .heading{
     color:#fff;
     font-size:16px;

 }

 .fa-bars{
     display:none;
 }

#categories{
    display:flex;
    flex-wrap: wrap;

}

.logo{
    height:60px;
    width:120px;
     display:flex;
    align-content: center;
    align-items: center;
    align-self: center;
    justify-content: center;
    color:black;
  /* background-image:url(images/);*//*  */
     background-position:center;
     background-origin: content-box;
     background-repeat: no-repeat;
     background-size: contain;
}


 #categories li{
    padding:5px;
/*  background:hsla(45, 100%, 84%, 1);*/
background:#ccc;
bordern:1px solid hsla(30, 100%, 70%, 1);
opacity:7;

  color:black;
  font-weight:bold;
    margin:5px;
    list-style:none;
    border-radius:5px;
    font-size:12px;
    cursor:pointer;
    text-decoration:none;
}


#categories li:hover{
    background-color:hsla(30, 100%, 70%, 1);
    opacity:.7;

}


.sidebarlast , .mainlast{
     background-color:hsla(45, 100%, 96%, 1);
     box-shadown:0px 0px 5px rgba( 0 , 0 , 0 , 0.1);
    padding:30px 30px 30px;
    margin-top:-10px;
}


 #categories li a{
    text-decoration:none;
    color:black;
}


.siderbarlast #categories a{
    text-decoration:none;
}

 }




 .footer{
         display:flex;
    align-content: center;
    align-items: center;
    align-self: center;
    flex-direction: column;
      background:#0F0F0F;

 }

 .footer .logo{
     background-image:url(images/text-logo.jpg);
     background-position:center;
     background-origin: content-box;
     background-repeat: no-repeat;
     background-size: contain;
 }


.social-area{
    display:flex;
    align-content: center;
    align-items: center;
    align-self: center;
    flex-direction: column;
    padding:10px 10px 10px;
    color:#fff;

}


.footer-links{
     display:flex;
    align-content: center;
    align-items: center;
    align-self: center;
    flex-direction: column;
    padding:10px 10px 10px;
    color:#fff;
}

.footer-links #links{
    display:flex;
    flex-wrap: wrap;
     align-content: center;
    align-items: center;
    align-self: center;
    justify-content: center;
    padding:10px;
    color:#fff;
    font-size:11px;
}


.footer-links #links li{
    padding:5px;
}


#social-footer{
    padding:10px;
    display:flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;

}


.footer #social-footer li{
    list-style:none;
    /*padding:10px;*/
     /*background:hsla(50, 100%, 42%, 1);*/
     background:#2B2B2B;
     margin:5px;
     display:flex;
    flex-wrap: wrap;
     align-content: center;
    align-items: center;
    align-self: center;
    justify-content: center;
    height:40px;
    width:40px;
    border-radius:5px;
    color:#fff;
}


#links-footer{
    list-style:none;
    padding:10px;
    display:flex;
     align-content: center;
    align-items: center;
    align-self: center;
    justify-content: center;
    flex-wrap:wrap;
}


#links-footer li{
    padding:10px;
    font-size:10px;
}

#links-footer li a{
    color:#fff;
    text-decoration:none;
}



.mainwrapper .container .col-md-12 .header{
    height:80px;
    width:100%;
    display:flex;
    align-content: center;
    align-items: center;
    align-self: center;
    justify-content: space-between;
    position:
    sticky;
    top:0px;
    z-index:99;
}

/*.capitol{
    display:flex;
    align-content: center;
    align-items: center;
    align-self: center;
    justify-content:center;
    flex-direction: column;
}



#para{
    padding:5px;
    font-size:12px;
}

.btn-wrapper{
    display:flex;
    align-items: center;
    align-content: center;
    align-self: center;
    flex-wrap: wrap;
}

button{
    margin:5px;
}

.btn-wrapper a{
    color:black;
    text-decoration:none;
}*/


.relative{
    color:#fff;
    margin:10px;
     display:flex;
     align-items:;
     align-self: ;
    align-content: ;
    align-items:
    baseline;
    flex-wrap: wrap;
    justify-content: space-between;
}

.postdata{
     position:absolutem;
    display:flex;
    bottom:3px;
    border-radius:4px;
    left:10px;
    color:#fff;
    opacity:.9;
    display:flex;
    z-index:30;
    align-content: center;
    align-items: center;
    align-self: center;
    justify-content: space-between;
    padding:px;
    /*background:hsla(30, 100%, 81%, 1);*/
}

.post-meta{
    flex-wrap: wrap;
    display:flex;
    align-content: flex-end;
    align-items: flex-end;
}

.post-meta li{
    list-style:none;
    font-size:9px;
    margin:5px;
}


.all-tile-wrapper .post-meta{
    margin-top:-17px;
    padding:5px;
}

.postdata li{
    list-style:none;
    font-size:9px;
    padding:5px;
    color:#fff;

}

.featured{
    position:absolute;
    top:10px;
    display:none;
    align-content: center;
    align-items: center;
    align-self: center;
    justify-content: center;
    left:10px;
     /*background:hsla(30, 100%, 81%, 1);*/
      background:hsla(30, 100%, 52%, 1);
      opacity:.9;
    padding:5px;
/*    display:none;*/

    font-size:10px;
    font-weight:bold;
    border-radius:5px;
}


#bookmark{
    position:absolute;
    display:flex;
    bottom:-10px;
    right:10px;
    /*opacity:.9;*/
    display:flex;
    z-index:30;
    align-content: center;
    align-items: center;
    align-self: center;
    background:hsla(30, 100%, 81%, 1);
    border-radius:3px;
    justify-content:center;
    padding:2px 2px 2px;
}


#comments{
     position:absolute;
    display:flex;
    bottom:-20px;
    right:10px;
    /*opacity:.9;*/
    display:flex;
    z-index:30;
    align-content: center;
    align-items: center;
    align-self: center;
    /*background:hsla(30, 100%, 81%, 1);*/
    border-radius:3px;
    justify-content:center;
    padding:2px 2px 2px;
}


.videowrapper{
    display:none;
}


#comments li{
     /*opacity:.3;*/
    borderm:1px solid black;
    border-radius:5px;
    padding:5px;
    list-style:none;
     display:flex;
    align-content: center;
    align-items: center;
    align-self: center;
    justify-content:center;
    color:black;
    cursor:pointer;
    font-size:10px;
}


#comments i{
    margin:5px;
    color:black
}

#bookmark li{
    /*opacity:.3;*/
    borderm:1px solid black;
    border-radius:5px;
    padding:5px;
    list-style:none;
     display:flex;
    align-content: center;
    align-items: center;
    align-self: center;
    justify-content:center;
    color:black;
    cursor:pointer;
    font-size:12px;
}


#bookmark li:hover{
    background:hsla(30, 100%, 52%, 1);
    opacity:1;
    border:none;
}

#bookmark li:first-child{
    background:hsla(30, 100%, 52%, 1);
    padding:5px;
    opacity:1;
}

.main{
    margin-top:px;
    padding:20px;
    /*background:#F2F2F2;
    bordern:1px solid black;*/
}


#links a{
    text-decoration: none;
    color:black;
}

#links{
    padding:5px 5px 5px;
    /*background:#fff;*/
    border-radius:10px;
    display:flex
}
#links li ,#social li{
    padding:10px;
    list-style:none;
    color:#fff;

}


 /* songle post section css */
 .single-image{
     height:350px;
     width:100%;
     background-color:#ccc;
     object-fit:cover;
 }


.main-section .single-post #social-footer{
     display:flex;
     align-content: center;
     align-items: center;
     align-self: center;
     justify-content: center;
 }


.main-section .single-post #social-footer li{
     list-style:none;
     padding:7px;
      background:#2B2B2B;
     margin:5px;
     display:flex;
    flex-wrap: wrap;
     align-content: center;
    align-items: center;
    align-self: center;
    justify-content: center;
    height:35px;
    width:35px;
    border-radius:5px;
    color:#fff;
 }



 /* publisher */

 .publisherimage{
     height:70px;
     width:70px;
         background-image:url(images/image6.png);
     background-position:center;
     background-origin: content-box;
     background-repeat: no-repeat;
     background-size: contain;
 }


.sidebarlast .publisher{
    width:80%;
      display:flex;
    flex-wrap: wrap;
     align-content: center;
    align-items: center;
    align-self: center;
    justify-content: center;
    flex-direction: column;
    padding:5px 5px 5px;
    font-size:12px;
    font-weight:thin;
 }

 #social-publisher{
     display:flex;
 }

 #social-publisher li{
     list-style:none;
     padding:5px;
     font-size:17px;
 }


 .audio , .video , .trending{
     font-weight:bold;
     cursor:pointer;
     font-size:15px;
     margin-top:10px;
     padding:10px 10px 10px;
     border-radius:10px;
     text-decoration: none;

    /* border-bottom:2px solid hsla(30, 100%, 52%, 1);*/
 }


 .trendingwrapper{
     display:none;
 }


 .audio{
     /*border-bottom:2px solid hsla(30, 100%, 52%, 1);*/
     background-color:hsla(46, 100%, 85%, 1);
 }


 .post-link a{
     line-height:7px;
     /*margin-top:10px; */
     text-decoration: none;
 }

   .last #categories li{
       display:flex;
   }

   .last #categories i{
       margin:px;
   }

 /*.last{
     display:flex;
     align-content: center;
     align-items: center;
     align-self: center;
     flex-direction: column;
     justify-content: center;
     background-color:hsla(45, 100%, 96%, 1);
 }
*/



         /* Scroll to Top Button styling */
#scrollToTopBtn {
    position: fixed;
    bottom: 50px;
    right: 40px;
    display: none; /* Initially hidden */
    background-color: #E67300;
    color: black;
    border: none;
    height:50px;
    width:50px;
    display:flex;
    align-content: center;
    align-items: center;
    align-self: center;
    justify-content: center;
    border-radius: 50%;
    padding: 10px 10px 10px;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    transition: opacity 0.3s ease-in-out;
}

#scrollToTopBtn:hover {
    background-color: #45a049;
}


.contentn{
     opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.content.visible {
    opacity: 1;
    transform: translateY(0);
}


.flex{
    display:flex;
    margin:8px;
}


.post-data .fa-user{
    padding:2px;
    font-size:5px;
    border:1px solid black;
    border-radius:50%;
}


.right{
    font-size:8px;
}

.right a{
    text-decoration:none;
    color:#ccc;
    font-weight: bold;

}

  .cut{
      display:flex;
      font-size:10px;
      color:#fff;
  }

  .product-card{
      position: relative;
      display:grid;


  }


  .product-card > *{
      position:relative;
      display:grid;
      grid-column: 1 / 1;
      grid-row: 1 / 1;
  }

/*div{
    border:1px solid black;
}*/

     .product-card{
    /*height:250px;*/
    width:100%;
   /* padding:10px 10px 10px; */
   /* box-shadow:0px 0px 3px rgba( 0 , 0 , 0 , 0.1);*/
   /* margin-bottom:30px;*/
    object-fit:top;
   /* border:2px solid red;*/
    position:relative;
}
   #cp-cate{
   /* background:hsla(30, 100%, 52%, 1);*/
     background:hsla(30, 100%, 52%, 1);
    color:black;
    padding:5px 5px 5px;
}
   .bottom-wrapper{
         display:flex;
         flex-direction: column;
         align-content: flex-start;
         align-items: flex-start;
         align-self: flex-end;
         justify-content: flex-start;
         padding:10px;
         margin-top:10px;
           background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)); /* Gradient overlay */
  /*  position:absolute;
    height:;
    width:92%;
    padding:10px;
    bottom:5px;*/
   /* background:#fff;*/
  /* background-color:hsla(45, 100%, 96%, 1);
    margin-bottom:-30px;
    z-index:10;
   box-shadow:0px 10px 5px  rgba( 0 , 0, 0 , 0.1);*/
}

  .author{
           /*color:hsla(30, 100%, 52%, 1);*/
           color:#fff;
           font-weight:bold;
            text-decoration: none;
       }



  .mainmm{
      padding:20px;
      background-color:#fff;
  }

  .imageout{
    background-image:url(images/image6.png);
     background-repeat:no-repeat;
     background-size:contain;
     background-position:center;
    display:;
    height:250px;
    width:100%;
}




#links a:hover{
    text-decoration: underline;
}

.headwrapper{
    position: relative;
    display:flex;
  /*  align-content: baseline;*/
     color:#FF850A;
    align-items: baseline;
    justify-content: inherit;
}

.first{
    height:1px;
    width:20%;
    background:#FF850A;
    positionn:relative;
    top:-4px;
    left:5px;
}

.last{
    display:none;
     height:1px;
    width:10%;
    background:orange;
    position:absolute;
    top:0px;
}


.icon{
    display:flex;
    height:70px;
    width:100px;
    position: relative;
    object-fit:contain;
    flex-shrink: 0;
    align-content: center;
    align-items: center;
    align-self: center;
    justify-content: center;
   /* background:#ccc; */
}


.icon .other-wrapper{
    display:flex;
    flex-shrink: 0;
    position:relative;
}


.icon .postdata #cp-cate{
    position:
    absolute;
    bottom:5px;
    left:0px;
}

.post-title-wrapper{
    /*margin-left:5px;*/
    line-height:17px;
    margin-top:px;
    text-decoration: none;
    /*color:blue;
     display:flex;
    padding:0px;
    margin:px;
    border-bottom:1px solid #ccc;
    font-size:15px;*/
    display:flex;
    align-content: baseline;
    align-items: baseline;
    align-self: flex-start;
}

  .all-tile-wrapper #postlink a{
      color:black;
        text-decoration: none;
      display:none;
      align-content: flex-start;
      align-items: flex-start;
      justify-content: flex-start;
      flex-grow: 1;
       line-height:16px;

  }

#number{
    position: absolute;
    top:20px;
    left:30px;
    display:flex;
    align-content: center;
    align-items: center;
    align-self: center;
    justify-content: center;
    background:hsla(30, 100%, 52%, 1);
    color:black;
    height:30px;
    width:30px;
   /* padding:10px; */
    z-index: 10;
    border-radius:50%;
    border:2px solid #fff;
    font-size:12px;
}

.image:hover{
    filter:grayscale(20px);
}

.meta_post li{
    list-style: none;
    font-size:10px;
    padding:5px;
}

.all-tile-wrapper{
    display:flex;
    flex-direction: column;
/*     text-align:
     start;*/
/*     align-content: flex-start;
     justify-content: flex-start;*/
     margin-left: 5px;
     margin-top:8px;
/*     align-self: flex-start; */
}

.all-tile-wrapper .post-link{
    margin-top:px;
}

.all-tile-wrapper #postlink{
    margin-top:px;
}
.all-tile-wrapper a{
    font-size:13px;
    color:black;
    line-height: 17px;
     display:flex;
     align-content: flex-start;
     justify-content: flex-start;
    font-weight:bold;
    margin-top:-15px;
     text-decoration: underline;
}

.all-tile-wrapper a:hover{
    text-decoration: underline;
}

  .all-tile-wrapper .meta_post{
    display:flex;
    flex-direction: row;
    margin-top:-15px;
    margin-left:5px;
     text-decoration: none;
}

.post_meta li{
    list-style:none;
    font-size:10px;
}

a:hover{
    text-decoration: underline;
    color:blue;
}

.icon i{
    color:#FF850A;
    text-decoration: none;
}


/* you-make-also-like */

.you-make-also-like{
    padding:10px;
}

/*.headwrapper{
    border-bottom:1px solid #ccc;
}*/


/* slide show */

  i{
      text-decoration: none;
  }

.pagination ul {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
}
.pagination li {
  margin: 0 4px;
}
.pagination a,
.pagination span {
  display: block;
  padding:10px;
  border: 1px solid #ddd;
  text-decoration: none;
  color: #333;
  font-size:12px;
}
.pagination .current {
  background-color: #333;
  color: #fff;
  border-color: #333;
}
.pagination a:hover {
  background-color: #f0f0f0;
}

.pagination{
    display:flex;
    align-content: center;
    align-items: center;
    align-self: center;
    justify-content: center;
    margin:10px;
    }



    #smallnav{
        display:flex;
        align-content: center;
        justify-content: space-between;
    }

      .button:hover{
      transition: 1s linear ;
      opacity:.7;
      background:#ccc;
      border-radius:10px;
  }

   .hero #social-hero li:hover{
      transition: 1s linear ;
      background:#ccc;
      border-radius:10px;
  }


 .flex-grid .image:hover{
      transition: 1s linear;
      cursor:pointer;
      border-radius:10px;
  }


  .single-post .author{
      color:black;
  }

    @media all and (max-width:768px){
    .notsmallview{
        display:none;
    }

    }