.contains{ padding-left: 15px; padding-right: 15px; margin: 0 auto; width: 100%; } *{ box-sizing: border-box; } figure, figcaption{ margin: 0; padding: 0; } .contains a{ text-decoration: none; } .single_post a.read_more { color: #565656; } ul.post_meta{ margin: 0px; } ul.post_meta a { color: #a29c9c; } h1,h2,h3,h4,h5,h6{ margin: 0; } .col-md-12{ position: relative; } /*populat post 1*/ a.read_more.btn { margin: 0; line-height: 38px; border: 1px solid #ddd; padding: 0 20px; font-size: 12px; display: inline-block; color: #1cb9c8; border-radius: 32px; } .popular_1 .single_slider:hover{ -webkit-box-shadow: 0 2px 9px rgba(0,0,0,0.2); box-shadow: 0 2px 9px rgba(0,0,0,0.2); } .popular_1 .single_post{ border: 1px solid #ededed; } /* popular_2 */ .popular_2 figure{ position:relative; } .popular_2 figure figcaption { position: absolute; width: 100%; bottom: 0; padding: 25px 20px 15px; background: rgba(6, 1, 29, 0.7); z-index: 2; } .single_slider .tag{ position: absolute; top: 0; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: #1cb9c8; } .single_slider .tag p { color: #fff; text-transform: uppercase; margin: 0; padding: 5px 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.6px; } .popular_2 .post_img:before{ display: none; } .popular_2 .post_title{ color: #fff; } .popular_2 .post_title:hover{ color: #1cb9c8; } .popular_2 .single_post .post_meta li{ color: #c5c3c3; } .popular_2 .single_post .post_meta{ margin: 0; } /* popular slider3 */ .popular_3 .post_img::before{ opacity: 1; background: -moz-linear-gradient(top, rgba(6,1,29,0.12) 0%, rgba(6,1,29,0.12) 7%, rgba(6,1,29,0.83) 94%, rgba(6,1,29,0.83) 100%); background: -webkit-linear-gradient(top, rgba(6,1,29,0.12) 0%,rgba(6,1,29,0.12) 7%,rgba(6,1,29,0.83) 94%,rgba(6,1,29,0.83) 100%); background: linear-gradient(to bottom, rgba(6,1,29,0.12) 0%,rgba(6,1,29,0.12) 7%,rgba(6,1,29,0.83) 94%,rgba(6,1,29,0.83) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f06011d', endColorstr='#d406011d',GradientType=0 ); } .tags_wrap{ position: absolute; bottom: 20px; left: 0; z-index: 3; } .tags_wrap ul{ padding: 0; position: relative; margin: 0; background: #1cb9c8; padding: 0 15px; } .tags_wrap ul:after { content: ""; position: absolute; left: 100%; border-bottom: 31px solid transparent; top: 0; border-left: 16px solid #1cb9c8; } .blog_social{ position: absolute; z-index: 3; right: 15px; top: 15px; text-align: center; } .blog_social>span{ line-height: 40px; width: 40px; background: #fff; transform: scale(0.8); color: #1cb9c8; border-radius: 50%; margin-bottom: 10px; transition: 0.3s; } .blog_social:hover>span{ -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .blog_social ul{ margin: 0; padding: 0; } .blog_social ul li{ list-style: none; opacity: 0; visibility: hidden; transition: 0.4s; } .blog_social:hover ul li:nth-child(2){ transition-delay: 0.1s; } .blog_social:hover ul li:last-child{ transition-delay: 0.2s; } .blog_social:hover ul li{ visibility: visible; opacity: 1; } .blog_social ul li a{ line-height: 29px; font-size: 12px; margin-bottom: 5px; width: 30px; border-radius: 50%; background: #fff; text-align: center; color: #1cb9c8; display: inline-block; } .tags_wrap ul li{ display: inline-block; } .tags_wrap ul li a:after{ content: ","; } .tags_wrap ul li:last-child a:after{ } .tags_wrap ul li a { display: block; color: #fff; line-height: 30px; font-size: 13px; font-family: 'Source Sans Pro', sans-serif; } .standard .single_slider{ border: 1px solid #ededed; } .single_slider { background: #f9f9f9; } .single_slider figcaption { padding: 18px 10px; } figcaption a:hover h4.post_title { color: #333; } .single_slider figcaption p{ font-family: 'Source Sans Pro', sans-serif; color: #7d7777; font-size: 15px; line-height: 25px; font-weight: 400; } .post_title { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 20px; color: #565656; transition: 0.4s; } figcaption a:hover{ text-decoration: none; } .single_slider { background: #f9f9f9; margin-bottom: 12px; transition: 0.4s; } .with_video .overlay_icons ul li a{ background: transparent; font-size: 25px; width: 60px; line-height: 58px; border: 1px solid #ededed; color: #1cb9c8; } .material .single_slider{ box-shadow: 0 2px 10px rgba(0,0,0,.15); } .material .single_slider:hover{ box-shadow: 0 3px 20px rgba(0,0,0,.15); } .single_post .post_meta { padding: 5px 0; } .single_post .post_meta li { list-style: none; display: inline-block; color: #a29c9c; font-family: 'Source Sans Pro', sans-serif; margin-right: 10px; margin-left:0; } .single_post .post_meta li span { font-size: 15px; display: inline-block; margin-right: 7px; } .post_slider5 .post_img:before{ display: none; } a.read_more { font-size: 14px; font-weight: 700; margin-left: 7px; transition: 0.2s; color: #565656; font-family: 'Poppins',sans-serif; } a.read_more:hover{ letter-spacing: 0.3px; color: #333; } a.read_more span{ font-size: 14px; } .slider_navigation { position: absolute; top: calc(50% + 40px); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: calc(100% - 30px); z-index: 999; } .slider_navigation span{ line-height: 40px; text-align: center; color: #fff; border-radius: 50%; width: 40px; background: #1cb9c8; cursor: pointer; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 999; } .slider_navigation span.prev { left: -19px; } .slider_navigation span.next{ right: -20px; } /* side by side style*/ .side_by_side .single_slider{ border: 1px solid #ededed; } .side_by_side .post_img{ display: inline-block; width: 50%; margin-right: -4px; vertical-align: middle; } .side_by_side .post_img img{ width: 100%; } .side_by_side figcaption{ display: inline-block; vertical-align: middle; width: 50%; padding: 7px 25px; } .side_by_side a.read_more{ display: block; margin: 0; } .side_by_side .single_slider figcaption p{ margin: 0; } /* content_overlay */ .content_overlay .single_post figure { position: relative; overflow: hidden; } .content_overlay .post_img{ position: relative; } .content_overlay .single_post figure:before{ content: ""; width: 100%; height: 100%; position: absolute; transition: 0.4s; left: 0; top: 0; z-index: 1; background: rgba(6, 1, 29, 0.7); } .content_overlay .single_post:hover figure:before{ background: rgba(6, 1, 29, 0.9) } .content_overlay .single_post figure figcaption { position: absolute; height: 100%; width: 100%; bottom: -50%; left: 0; z-index: 1; transition: 0.5s; } .content_overlay .single_post:hover figure figcaption{ bottom: 0; } .content_overlay:hover figcaption a:hover h4.post_title{ color: #fff; } .content_overlay .post_title { color: #eae7e7; } .content_overlay .single_post .post_meta{ transition: 0.4s; } .content_overlay .single_post:hover .post_meta{ opacity: 0; visibility: hidden; height: 0; display: none; } .content_overlay .single_post .post_meta li{ color: #c5c3c3; } .content_overlay .single_slider figcaption p{ color: #c7c7c7; } .content_overlay a.read_more{ color: #eae7e7; } .blog_title{ padding-bottom: 20px; } .blog_title .slider_navigation{ position: initial; } .blog_title .slider_navigation span{ position: initial; -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); line-height: 35px; width: 35px; font-size: 12px; } .blog_title .slider_navigation { position: initial; width: initial; display: inline-block; transform: translate(0); } .blog_title h1 { display: inline-block; vertical-align: middle; font-weight: 700; font-family: 'Source Sans Pro', sans-serif; color: #3c3c3c; font-size: 28px; } .blog_title .slider_navigation { position: initial; width: initial; display: inline-block; vertical-align: middle; -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); float: right; padding-top: 15px; } /* related slider single slider */ .related_slider1 .single_slider, .related_slider2 .single_slider, .related_slider3 .single_slider{ background: none; padding: 0; } .related_slider1 .single_slider figcaption, .related_slider2 .single_slider figcaption, .related_slider3 .single_slider figcaption{ padding: 0; margin-top: 20px; } .related_slider1 .post_title, .related_slider2 .post_title{ font-size: 18px; margin: 0; } .related_slider1 .single_post .post_meta li, .related_slider2 .single_post .post_meta li, .related_slider3 .single_post .post_meta li{ font-size: 13px; } .related_slider1 .single_post .post_meta li span, .related_slider2 .single_post .post_meta li span, .related_slider3 .single_post .post_meta li span{ font-size: 12px; } .post_img{ position: relative; } .post_img:before{ content: ""; position: absolute; height: 100%; background: rgba(6, 1, 29, 0.9); opacity: 0; width: 100%; left: 0; top: 0; z-index: 1; transition: 0.4s; } .single_post:hover .post_img:before{ opacity: 1; } .overlay_icons{ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 2; } .overlay_icons ul{ text-align: center; padding: 0; margin: 0; } .overlay_icons ul li{ list-style: none; display: inline-block; } .overlay_icons ul li a{ display: block; font-size: 18px; line-height: 40px; margin-right: 5px; width: 40px; border-radius: 50%; background: #fff; color: #1cb9c8; opacity: 0; transition: 0.4s; } .overlay_icons ul li a:focus, .overlay_icons ul li a:active{ outline: none; } .single_post:hover .overlay_icons ul li:last-child a{ transition-delay: 0.4s; } .single_post:hover .overlay_icons ul li a{ opacity: 1; transition-delay: 0.3s; } /* slider style 2 */ .related_slider2 .single_slider figcaption { text-align: center; } .related_slider2 .post_title { font-size: 14px; line-height: 22px; text-transform: uppercase; } /*related slider 3 */ .related_slider3 figure{ position: relative; } .related_slider3 .single_slider figcaption { position: absolute; bottom: 0px; background: #fff; width: 100%; padding: 15px 20px 10px!important; z-index: 1; margin-top: 0; left: 0; display: block; } .related_slider3 .single_post .post_meta{ margin: 0; } .related_slider3 .single_post{ border: 1px solid #ededed; } .related_slider3 .post_img:before{ display: none; } .related_slider3 .post_title{ font-size: 16px; margin: 0; } /* Responsive CSS */ @media ( max-width: 991px ){ .side_by_side .post_img, .side_by_side figcaption{ width: 100%; display: block; } .side_by_side a.read_more{ margin-top: 10px; } .post_img img{ width: 100%; } } @media (max-width: 479px) and (min-width: 300px){ .post_title{ font-size: 16px; } .single_post .post_meta li{ font-size: 12px; } } @media screen and (max-width: 767px){ a.read_more{ margin-top: 12px; display: block; } .related_slider3 .single_slider figcaption{ position: initial; } .slider_navigation span{ line-height: 30px; width: 30px; font-size: 16px; } .related_slider2 .post_title{ font-size: 12px; line-height: 20px; } .related_slider3 .post_title{ line-height: 20px; font-size: 14px; } } @media (min-width: 480px) and (max-width: 767px){ .post_title{ font-size: 18px; } }