body.bg-blog{
background: #F2F2F7;
}
body.bg-article{
background: #fff;
}
.blog-header{
background: rgba(255, 255, 255, 0.7);
-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
z-index: 10000;position: sticky;
border-bottom: 1px solid rgba(0, 0, 0, 0.07); 
}
.blog-header .bh-container{
display: flex;align-items: center;padding: 0.6rem;justify-content: space-between;
}
.blog-header .bh-container .bh-right{
display: flex;align-items: center;
}
.blog-header .bh-container .bh-right img{
width: 40px;border-radius: 10px;
}
.blog-header .bh-container .bh-right .logonameblog{
margin-right: 10px;border-right: 2px solid #ddd;padding-right: 5px;
}
.blog-header .bh-container .bh-left{
display: flex;align-items: center;
}
.blog-header .bh-container .bh-left .bh-search{
width: 28px;height: 28px;margin-left: 10px;
}
.blog-header .bh-container .bh-left .bh-search svg{
width: 28px;height: 28px;
}
.blog-header .bh-container .bh-left .bh-menu{
width: 28px;height: 28px;
}
.blog-header .bh-container .bh-left .bh-menu .icon{
width: 28px;
height: 28px;
cursor: pointer;
transition: opacity 0.3s ease, transform 0.3s ease;
position: absolute;
}
.menu-icon {
opacity: 1;transform: rotate(0deg) scale(1);
}
.close-icon {
opacity: 0;transform: rotate(-90deg) scale(0.7);
}
.menu-toggle.active .menu-icon {
opacity: 0;transform: rotate(90deg) scale(0.7);
}
.menu-toggle.active .close-icon {
opacity: 1;transform: rotate(0deg) scale(1);
}
.dropdown-menu {
position: fixed;left: 0;top: 0;margin-top: 3.5rem;
z-index: 100;
width: 100%;max-height: 0px;
overflow: hidden;
transition: max-height 0.4s ease;
background: #fff;
}
.dropdown-menu.open {
position: fixed;left: 0;top: 0;
background: white;
z-index: 10;
max-height: 100%;
background: white;
transition: max-height 0.8s ease;
}
.dropdown-menu ul {margin: 0;
padding: 10px 0;
list-style: none;
}
.dropdown-menu ul li {padding: 10px;font-size: 14px;font-weight: bold;
}
.dropdown-menu ul li:hover{background: #c1c1c1;
}
.dropdown-menu ul li a {
text-decoration: none;color: #333;font-size: 14px;font-weight: bold;
}
.blog-container{
padding: 1rem 0;
display: flex;
flex-direction: column;
min-height: 100vh;
width: 100%;
position: relative;
}
.blogtitle{
padding: 15px 0;font-weight: Black;margin-right: 1rem;
}
.blogtitle.blogtitlecenter{
text-align: center;
}
.blog-hero-slider{
display: flex;flex-wrap: wrap;padding: 0px 1rem;
}
.blog-hero-slider .blog-slide-item{
overflow: hidden;border-radius: 10px;height: 205px;
width: 60%;
}
.blog-hero-slider .blog-slide-item .blog-slide-item-img{
width: 100%;height: 100%;transition: transform 0.3s ease;transition: transform 0.3s ease;
}
.blog-hero-slider .blog-slide-item .blog-slide-item-img:after{
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);z-index: 1;position: absolute;left: 0;top: 0;width: 100%;height: 100%;display: block;content: "";vertical-align: middle;object-fit: cover;
}
.blog-hero-slider .blog-slide-item .blog-slide-item-img img{
width: 100%;height: 100%;vertical-align: middle;object-fit: cover;transition: transform 0.3s ease;
}
.blog-hero-slider .blog-slide-item h3{
right: 0;bottom: 8px;margin: 15px 10px;color: white;z-index: 2;
}
.blog-hero-slider .blog-posts{
width: 40%;padding: 0rem;padding-right: 1rem;
}
.blog-hero-slider .blog-posts .blog-row .blog-post.row2{
width: calc(50% - 10px);margin: 0 5px;
}
.blog-hero-slider .blog-posts .blog-row .blog-post .blog-post-thumbnail{
height: 130px;
}
.blog-hero-slider .blog-posts .blog-row .blog-post-content .blog-post-meta{
display: none;
}
.blog-posts{
padding: 1rem;width: 100%;
}
.blog-posts .blog-title{
padding: 10px 0;
}
.blog-posts .blog-title.titlecenter{
padding: 10px 0;text-align: center;
}
.blog-posts .blog-title.titlecenter2{
padding: 10px 0;text-align: center;
}
.blog-posts .blog-row{
display: flex;flex-wrap: wrap;width: 100%;
}
.blog-posts .blog-row .blog-post.row2{
width: calc(50% - 10px);margin: 5px;
}
.blog-posts .blog-row .blog-post.row3{
width: calc(33.3333333333% - 10px);margin: 5px;
}
.blog-posts .blog-row .blog-post{
background: white;border-radius: 10px;overflow: hidden;
}
.blog-posts .blog-row .blog-post .blog-post-thumbnail{
width: 100%;height: 170px;vertical-align: middle;overflow: hidden;transition: transform 0.3s ease;position: relative;left: 0;top: 0;
}
.blog-posts .blog-row .blog-post .blog-post-thumbnail img{
width: 100%;height: 100%;vertical-align: middle;object-fit: cover;transition: transform 0.3s ease;overflow: hidden;
}
.blog-posts.blog-news .blog-row .blog-post{
display: flex;align-items: center;background: transparent;
}
.blog-posts.blog-news .blog-row .blog-post .blog-post-thumbnail{
height: 100px;
}
.blog-posts .blog-row .blog-post .blog-post-thumbnail:hover img{
transform: scale(1.1);transition: transform 0.3s ease;overflow: hidden;
}
.blog-posts.blog-news .blog-row .blog-post .blog-post-thumbnail{
border-radius: 10px;
}
.blog-posts .blog-row .blog-post .blog-post-thumbnail:hover img{
transform: scale(1.1);transition: transform 0.3s ease;overflow: hidden;
}
.blog-posts.blog-video .blog-row .blog-post .blog-post-thumbnail{
border-radius: 10px;
}
.blog-posts.blog-video .blog-row .blog-post .blog-post-thumbnail:before{
position: absolute;
left: 50%;top: 50%;display: block;content: "";width: 25px;height: 25px;z-index: 100;background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 256 256'%3e%3cpath d='M240,128a15.74,15.74,0,0,1-7.6,13.51L88.32,229.65a16,16,0,0,1-16.2.3A15.86,15.86,0,0,1,64,216.13V39.87a15.86,15.86,0,0,1,8.12-13.82,16,16,0,0,1,16.2.3L232.4,114.49A15.74,15.74,0,0,1,240,128Z'%3e%3c/path%3e%3c/svg%3e");transform: translate(-50%, -50%);background-size: contain;background-repeat: no-repeat;
}
.blog-posts.blog-video .blog-row .blog-post .blog-post-thumbnail:after{
position: absolute;left: 50%;top: 50%;display: block;content: "";width: 45px;height: 45px;z-index: 1;backdrop-filter: blur(15px);transform: translate(-50%,-50%);border-radius: 50%;
}
.blog-posts .blog-row .blog-post-content{
padding: 15px 8px;
}
.blog-posts .blog-row .blog-post-content .blog-post-meta{
padding-bottom: 10px;
}
.blog-posts .blog-row .blog-post-meta .blog-post-category{
background: #eee;padding: 2px 5px;border-radius: 5px;font-size: 11px;font-weight: 500;color: #333;
}
.blog-posts .blog-row .blog-post-meta .blog-post-date{
font-size: 11px;font-weight: 500;color: #333;
}
.blog-posts .blog-row .blog-post-content{
margin: 0;
}
.single-article{
padding: 1rem;
display: flex;flex-wrap: wrap;
}
.single-article .single-article-content{
width: 70%;
}
.single-article .blog-sidebar{
width: 30%;padding-right: 1rem;
}
.single-article .blog-sidebar .blog-posts{
margin: 0;padding: 0;
}
.single-article .blog-sidebar .blog-posts .blog-row .blog-post.row3{
width: 100%;margin-top: 1rem;
}
.single-article .blog-sidebar .blog-posts .blog-row .blog-post{
border: 1px solid #ddd;
}
.single-article .blog-sidebar .blog-posts .blog-row .blog-post .blog-post-thumbnail{
height: 140px;
}
.single-article header{
padding-bottom: 1rem;
}
.single-article header .article-thumbnail{
width: 100%;height: auto;border-radius: 10px;
}
.single-article header .article-thumbnail img{
width: 100%;height: 100%;border-radius: 10px;
}
.single-article header .article-title{
padding: 10px 0;line-height: 1.8;
}
.single-article header .article-excerpt{
line-height: 1.8;
}
.single-article header .article-meta{
display: flex;align-items: center;justify-content: space-between;
padding-top: 1rem;
}
.single-article header .article-meta .article-meta-new{
padding: 0;
}
.single-article header .article-meta .article-cat{
background: #ddd;padding: 2px 4px;margin-left: 2px;border-radius: 4px;
}
.single-article header .article-meta .article-date{
margin: 0 5px;
}
.single-article header .article-meta .article-share-buttons{
display: flex;align-items: center;justify-content: flex-end;
}
.single-article header .article-meta .article-share-buttons a{
width: 25px;height: 25px;color: #888;margin: 0 2px;
}
.single-article header .article-meta .article-share-buttons a svg{
width: 25px;height: 25px;color: #888;vertical-align: middle;object-fit: cover;
}
.single-article .article-content {
font-size: 16px;
line-height: 1.9;
color: #333;
margin-top: 20px;
}
.single-article .article-content h1,
.single-article .article-content h2,
.single-article .article-content h3,
.single-article .article-content h4,
.single-article .article-content h5,
.single-article .article-content h6 {
margin: 24px 0 12px;
font-weight: bold;
color: #222;
}
.single-article .article-content h1 { font-size: 28px; }
.single-article .article-content h2 { font-size: 24px; }
.single-article .article-content h3 { font-size: 20px; }
.single-article .article-content h4 { font-size: 18px; }
.single-article .article-content h5 { font-size: 16px; }
.single-article .article-content h6 { font-size: 14px; }
.single-article .article-content p {
margin: 0 0 20px;
}
.single-article .article-content a {
color: #007BFF;
text-decoration: underline;
}
.single-article .article-content a:hover {
text-decoration: none;
}
.single-article .article-content ul,
.single-article .article-content ol {
margin: 0 0 20px 30px;
padding: 0;
}
.single-article .article-content li {
margin-bottom: 10px;
line-height: 1.7;
}
.single-article .article-content img {
max-width: 100%;
height: auto;
margin: 20px 0;
border-radius: 8px;
display: block;
}
.single-article .article-content blockquote {
margin: 20px 0;
padding: 15px 20px;
background: #f9f9f9;
border-right: 4px solid #007BFF;
color: #555;
font-style: italic;
}
.single-article .article-content code {
background-color: #f4f4f4;
padding: 2px 6px;
font-family: monospace;
border-radius: 4px;
color: #d63384;
}
.single-article .article-content img{
width: 100%;height: 100%;overflow: hidden;margin: 0;
}
.single-article .article-content figure{
margin: 10px 0;
}
.single-article .article-content figure figcaption{
font-size: 12px;font-weight: 500;line-height: 1.8;text-align: center;color: #646464;
}
.glam-footer{
background: #1B1B1D;color: white;margin-top: auto;
}
.glam-footer .bf-container{
padding: 0rem;position: relative;left: 0;top: 0;
}
.glam-footer .bf-container:after{
position: absolute;left: 50%;top: 50%;display: block;content: "";width: 100%;height: 50%;z-index: 0;background: url("https://www.pngkey.com/png/full/456-4563351_at-full-capacity-dotted-world-map-vector-png.png");transform: translate(-50%,-50%);opacity: 0.2;
}
.glam-footer .bf-container p{
line-height: 1.8;text-align: center;color: #8E8E8E;
}
.glam-footer .bf-container .bf-logo{
display: flex;align-items: center;padding: 10px 0;
}
.glam-footer .bf-container .bf-logo img{
width: 40px;border-radius: 10px;
}
.glam-footer .bf-container .bf-logo .logonameblog{
margin-right: 10px;border-right: 2px solid #8E8E8E;padding-right: 5px;
}
.glam-footer .blog-f-items-row{
display: flex;flex-wrap: wrap;
}
.glam-footer .blog-f-items-row .col-lg-2{
width: 25%;padding: 1rem;text-align: center;z-index: 2;
}
.glam-footer .blog-f-items-row .col-lg-2:last-child{
width: 100%;
}
.glam-footer .blog-f-items-row .col-lg-2 h4{
padding-bottom: 1rem;
}
.glam-footer .blog-f-items-row .col-lg-2 ul{
list-style: none;
}
.glam-footer .blog-f-items-row .col-lg-2 ul li{
padding: 5px 0;
}
.glam-footer .blog-f-items-row .col-lg-2 ul a{
color: white;text-align: right;
}
.glam-footer .blog-f-items-row .col-lg-2 .bf-Symbol{
display: flex;flex-wrap: wrap;justify-content: center;
}
.glam-footer .blog-f-items-row .col-lg-2 .bf-Symbol a{
background: white;height: 50%;padding: 0.2rem;border-radius: 10px;width: calc(50% - 10px);margin: 5px;overflow: hidden;vertical-align: middle;
}
.glam-footer .blog-f-items-row .col-lg-2 .bf-Symbol img{
width: 100%;height: 100%;vertical-align: middle;
}
.glam-footer .Socialnetworks{
width: 100%;
text-align: center;
display: flex;justify-content: center;
}
.glam-footer .Socialnetworks .Socialnetworks-list{
display: flex;align-items: center;text-align: center;background: #2D2D2F;padding: .2rem;border-radius: 5px;width: 70%;max-width: 350px;justify-content: center;
}
.glam-footer .Socialnetworks a{
vertical-align: middle;width: 30px;height: 30px;color: #8E8E8E;width: 50%;
}
.glam-footer .Socialnetworks a svg{
vertical-align: middle;width: 30px;height: 30px;
}
.glam-footer .Copyright{
text-align: center;padding: 10px 5px;
}
@media(max-width: 768px){
.blog-hero-slider .blog-posts{
margin-top: 1rem;
}
.blog-hero-slider .blog-posts .blog-row .blog-post .blog-post-thumbnail{
height: 105px;
}
.blog-hero-slider .blog-posts .blog-row .blog-post.row2{
width: calc(50% - 10px);margin: 5px;
}
.glam-footer .blog-f-items-row .col-lg-2{
width: 33.3333333333%;
}
}

@media(max-width: 500px){
.blog-posts .blog-title.titlecenter2{
text-align: right;
}
.blog-hero-slider .blog-slide-item{
width: 100%;
}
.blog-hero-slider .blog-posts{
width: 100%;padding: 0rem;
}
.blog-hero-slider .blog-posts .blog-row .blog-post .blog-post-thumbnail{
height: 100px;
}
.blog-posts .blog-row .blog-post.row3{
width: calc(50% - 10px);margin: 5px;
}
.blog-posts .blog-row .blog-post .blog-post-thumbnail{
width: 100%;height: 100px;
}
.blog-posts .blog-row .blog-post-content .blog-post-meta{
display: none;
}
.blog-posts.blog-news .blog-row .blog-post.row2{
width: calc(100% - 5px);margin: 2.5px;
}
.blog-posts.blog-news .blog-row .blog-post .blog-post-thumbnail{
width: 100%;height: 90px;
}
.blog-posts.blog-news .blog-row .blog-post .blog-post-meta{
display: block;
}
.blog-posts.blog-news .blog-row .blog-post{
background: transparent;border-radius: 10px;overflow: hidden;
}
.glam-footer .blog-f-items-row .col-lg-2:first-child{
width: 100%;
}
.glam-footer .blog-f-items-row .col-lg-2{
width: 50%;padding: 1rem;text-align: center;
}
.glam-footer .blog-f-items-row .col-lg-2:nth-child(4){
width: 100%;
}
.glam-footer .blog-f-items-row .col-lg-2 .bf-Symbol{
display: flex;flex-wrap: wrap;
}
.glam-footer .blog-f-items-row .col-lg-2 .bf-Symbol a{
background: white;height: 25%;padding: 0.5rem;border-radius: 10px;width: calc(25% - 10px);margin: 5px;
}
.single-article .single-article-content{
width: 100%;
}
.single-article .blog-sidebar{
width: 100%;padding-right: 0rem;
}
.single-article .blog-sidebar .blog-posts{
margin: 0;padding: 0;
}
.single-article .blog-sidebar .blog-posts .blog-row .blog-post.row3{
width: calc(50% - 10px);margin: 5px;
}
.single-article .blog-sidebar .blog-posts .blog-row .blog-post .blog-post-thumbnail{
height: 100px;
}
}