.style1 .post-slide{ margin: 0 15px; } .style1 .post-slide .post-img{ overflow: hidden; } .style1 .post-slide .post-img img{ width: 100%; height: auto; transform: scale(1); transition: all 1s ease-in-out 0s; } .style1 .post-slide:hover .post-img img{ transform: scale(1.08); } .style1 .post-slide .post-content{ background: #fff; padding: 20px; } .style1 .post-slide .post-title{ font-size: 17px; font-weight: 600; margin-top: 0; text-transform: capitalize; } .style1 .post-slide .post-title a{ display: inline-block; color: #808080; transition: all 0.3s ease 0s; } .style1 .post-slide .post-title a:hover{ color: #3d3030; text-decoration: none; } .style1 .post-slide .post-description{ font-size: 15px; color: #676767; line-height: 24px; margin-bottom: 14px; padding-top: 10px; } .style1 .post-slide .post-bar{ padding: 0; margin-bottom: 15px; list-style: none; } .style1 .post-slide .post-bar li{ color: #676767; padding: 2px 0; } .style1 .post-slide .post-bar li i{ margin-right: 5px; } .style1 .post-slide .post-bar li a{ display: inline-block; font-size: 12px; color: #808080; transition: all 0.3s ease 0s; } .style1 .post-slide .post-bar li a:after{ content: ","; } .style1 .post-slide .post-bar li a:last-child:after{ content: ""; } .style1 .post-slide .post-bar li a:hover{ color: #3d3030; text-decoration: none; } .post-slide .wdo-read-more{ display: inline-block; padding: 10px 15px; font-size: 14px; font-weight: bold; color: #fff; background: #e7989a; border-bottom-right-radius: 10px; text-transform: capitalize; transition: all 0.30s linear; } .post-slide .wdo-read-more:hover{ background: #333; text-decoration: none; } .style2 .post-slide{ margin: 0 10px; } .style2 .post-slide .post-info{ padding: 5px 0; margin: 0; list-style: none; } .style2 .post-slide .post-info li{ display: inline-block; margin: 0 5px; } .style2 .post-slide .post-info li i{ margin-right: 8px; } .style2 .post-slide .post-info li a{ font-size: 11px; font-weight: bold; color: #7e828a; text-transform: uppercase; } .style2 .post-slide .post-info li a:hover{ color: #1dcfd1; text-decoration: none; } .style2 .post-slide .post-img{ position: relative; } .style2 .post-slide .post-img:before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; background: rgba(0, 0,0,0.6); transition: opacity 0.40s linear 0s; } .style2 .post-slide:hover .post-img:before{ opacity: 1; } .style2 .post-slide .post-img img{ width: 100%; height: auto; } .style2 .post-slide .read{ position: absolute; bottom: 30px; left: 50px; font-size: 14px; color: #fff; text-transform: capitalize; opacity: 0; transition: all 0.40s linear 0s; } .style2 .post-slide:hover .read{ opacity:1; } .style2 .post-slide .read:hover{ text-decoration: none; color: #1dcfd1; } .style2 .post-slide .post-content{ padding: 40px 0; position: relative; } .style2 .post-slide .post-author{ width: 75px; height: 75px; border-radius: 50%; position: absolute; top: -45px; right: 10px; overflow: hidden; border:4px solid #fff; } .style2 .post-slide .post-author img{ width: 100%; height: auto; } .style2 .post-slide .post-title{ font-size: 14px; font-weight: bold; color: #1dcfd1; margin: 0 0 10px 0; text-transform: uppercase; transition: all 0.30s linear 0s; } .style2 .post-slide .post-title:after{ content: ""; width: 25px; display: block; margin-top: 10px; border-bottom: 4px solid #333; } .style2 .post-slide .post-description{ font-size: 13px; color: #555; margin-bottom:20px; } .style3 .post-slide{ margin: 0 15px; border-bottom: 1px solid #dadada; box-shadow: 0 0 5px rgba(167, 197, 167, 0.8); transition: all 0.4s ease-in-out 0s; } .style3 .post-slide .post-img{ position: relative; overflow: hidden; } .style3 .post-slide .post-img:before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0); transition: all 0.4s linear 0s; } .style3 .post-slide:hover .post-img:before{ background: rgba(0, 0, 0, 0.6); } .style3 .post-slide .post-img img{ width: 100%; height: auto; } .style3 .post-slide .category { font-size: 16px; color: #fff; line-height: 11px; text-align: center; text-transform: capitalize; padding: 11px; background: #ff9412; position: absolute; bottom: 0; left: -50%; transition: all 0.5s ease-in-out 0s; } .style3 .post-slide:hover .category{ left: 0; } .style3 .post-slide .post-review{ padding: 25px 20px; background: #fff; position: relative; } .style3 .post-slide .post-title{ margin: 0; } .style3 .post-slide .post-title a{ display: inline-block; font-size: 16px; color: #ff9412; font-weight: bold; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 25px; transition: all 0.30s linear 0s; } .style3 .post-slide .post-title a:hover{ text-decoration: none; color: #555; } .style3 .post-slide .post-description{ font-size: 15px; color: #555; line-height: 26px; } .style3 .post-review .post-bar{ margin-top: 20px; } .style3 .post-bar span{ display: inline-block; font-size: 14px; } .style3 .post-bar span i{ margin-right: 5px; color: #999; } .style3 .post-bar span a{ color: #999; text-transform: uppercase; } .style3 .post-bar span a:hover{ text-decoration: none; color: #ff9412; } .style3 .post-bar span.comments{ float: right; } @media only screen and (max-width: 359px) { .style3 .post-slide .category{ font-size: 13px; } } .style4 .post-slide{ margin: 0 15px; background: #fff; border-bottom: 1px solid #dedde1; } .style4 .post-slide .post-header{ padding: 15px 20px; } .style4 .post-slide .wdo-title{ margin-bottom: 5px; } .style4 .post-slide .wdo-title a{ font-size: 15px; color: #333; font-weight: bold; text-transform: uppercase; transition: all 0.4s ease 0s; } .style4 .post-slide .wdo-title a:hover{ color: #fd6058; text-decoration: none; } .style4 .post-slide .post-bar{ margin: 15px 0 0 0; padding: 0; list-style: none; } .style4 .post-slide .post-bar li{ display: inline-block; margin-right: 20px; color: #808080; } .style4 .post-slide .post-bar li a{ font-size: 15px; color: #808080; text-transform: capitalize; } .style4 .post-slide .post-bar li a:hover{ text-decoration: none; color: #fd6058; } .style4 .post-slide .post-bar li img{ width: 35px; height: 35px; border-radius: 50%; } .post-slide .post-bar li i, .style4 .post-slide .post-bar li img{ margin-right: 5px; } .style4 .post-slide .pic{ overflow: hidden; position: relative; } .style4 .post-slide .pic:after{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(255,255,255,0); transition: all 0.9s ease 0s; } .style4 .post-slide:hover .pic:after{ background: rgba(255,255,255,0.2); } .style4 .post-slide .pic img{ width: 100%; height: auto; transform: rotate(0deg) scale(1,1); transition: all 0.6s ease-in-out 0s; } .style4 .post-slide:hover .pic img{ transform: rotate(10deg) scale(1.5,1.5); } .style4 .post-slide .post-category{ padding: 5px 15px; margin: 0; list-style: none; position: absolute; bottom: 0; left: 0; background: #fd6058; z-index: 1; } .style4 .post-slide .post-category li{ display: inline-block; text-transform: uppercase; } .style4 .post-slide .post-category li:after{ content: " ,"; color: #fff; } .style4 .post-slide .post-category li:last-child:after{ content: ""; } .style4 .post-slide .post-category li a{ color: #fff; } .style4 .post-slide .post-category li a:hover{ text-decoration: none; color: #333; } .style4 .post-slide .post-description{ font-size: 16px; color: #808080; padding: 15px; } @media only screen and (max-width: 480px) { .style4 .post-header .post-bar li{ margin-right: 5px; } } .style5 .post-slide{ margin: 0 10px; border-left: 8px solid #1dcfd1; border-bottom: 8px solid #1dcfd1; box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.2); } .style5 .post-slide .post-img{ position: relative; overflow: hidden; } .style5 .post-slide .post-img:before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0, 0,0,0.0); transition: all 0.40s linear 0s; } .style5 .post-slide:hover .post-img:before{ background: rgba(0, 0,0,0.6); } .style5 .post-slide .post-img img{ width: 100%; height: auto; } .style5 .post-slide .post-info{ width: 75%; position: absolute; bottom: -100%; left: 12.5%; background: #1dcfd1; text-align: center; line-height: 26px; padding: 15px; transition: bottom 0.40s ease-in-out 0s; } .style5 .post-slide:hover .post-info{ bottom:0; } .style5 .post-slide .category{ padding: 0; margin: 0; list-style: none; } .post-slide .category li, .style5 .post-slide .post-date{ display: inline-block; font-size: 16px; color: #fff; text-transform: capitalize; } .style5 .post-slide .category li:after{ content: " /"; } .style5 .post-slide .category li:last-child:after{ content: ""; } .style5 .post-slide .category li a{ color: #fff; transition: all 0.40s linear; } .style5 .post-slide .category li a:hover{ color: #555; text-decoration: none; } .style5 .post-slide .post-review{ padding: 35px 20px 25px; background: #fff; position: relative; } .style5 .post-slide .icons{ width: 90px; height: 90px; border: 4px solid #fff; border-radius: 50%; position: absolute; top: -45px; right: 10px; overflow: hidden; } .style5 .post-slide .icons img{ width: 100%; height: auto; } .style5 .post-slide .post-title{ margin: 0 0 25px 0; } .style5 .post-slide .post-title a{ font-size: 16px; font-weight: bold; letter-spacing: 2px; color: #1dcfd1; display: inline-block; text-transform: uppercase; transition: all 0.30s linear 0s; } .style5 .post-slide .post-title a:hover{ text-decoration: none; color: #555; } .style5 .post-slide .post-description{ color: #555; font-size: 15px; line-height: 26px; margin-bottom: 20px; } .style5 .post-slide .read,.style6 .post-slide .read{ font-size: 13px; color: #555; display: block; text-align: right; text-transform: uppercase; } .style5 .post-slide .read:hover,.style6 .post-slide .read:hover{ text-decoration:none; color: #1dcfd1; } .style6 .post-slide{ padding: 0 15px; } .style6 .post-slide .wdo-post-img{ overflow: hidden; } .style6 .post-slide .wdo-post-img img{ width: 100%; height: auto; filter: grayscale(100%); opacity: 0.9; transform: scale(1,1); transition:all 0.3s ease-in-out 0s; } .style6 .post-slide:hover .wdo-post-img img{ transform: scale(1.2,1.2); filter:none; opacity:1; } .style6 .post-slide .wdo-post-content{ padding: 20px 30px; position: relative; background: #fff; } .style6 .post-slide .wdo-post-date{ min-width:28px; min-height:28px; line-height: 28px; text-align: center; background: #556677; position: absolute; top: -30px; left: 30px; } .style6 .post-slide .wdo-month{ display: block; font-size: 14px; font-weight: bold; color: #fff; padding: 0 10px; background: #14bf9b;; text-transform: uppercase; } .style6 .post-slide .wdo-date{ color: #fff; font-size: 14px; } .style6 .post-slide .wdo-post-title{ margin: 20px 0; } .style6 .post-slide .wdo-post-title a{ color:#14bf9b; font-size:22px; text-transform:capitalize; transition: all 0.50s ease 0s; } .style6 .post-slide .wdo-post-title a:hover{ color:#333; text-decoration: none; } .style6 .post-slide .wdo-post-description{ color: #999; font-size: 16px; line-height: 30px; } .style6 .post-slide .post-bar{ padding: 15px 0; list-style: none; text-align: center; background: #14bf9b; } .style6 .post-slide .post-bar li{ display: inline-block; margin-right: 5px; } .style6 .post-slide .post-bar li a{ text-transform: capitalize; font-size: 12px; color: #fff; transition:0.2s ease; } .style6 .post-slide .post-bar li a:hover{ text-decoration: none; color:#333; } .style6 .post-slide .post-bar li i{ color:#fff; margin-right: 5px; } .style7 .post-slide{ background: #fff; margin: 0 15px; padding:27px 30px; border-bottom: 1px solid #dedde1; } .style7 .post-slide .post-header{ margin-bottom: 10px; } .style7 .post-slide .subtitle{ color:#0b99bc; font-size:14px; display: inline-block; margin-bottom:5px; text-transform: uppercase; transition: all 0.4s ease 0s; } .style7 .post-slide .subtitle:hover{ color:#333; text-decoration: none; } .style7 .post-slide .wdo-post-title{ margin: 0; } .style7 .post-slide .wdo-post-title a{ color:#333; font-size:18px; font-weight: bold; text-transform:capitalize; transition: all 0.4s ease 0s; } .style7 .post-slide .wdo-post-title a:hover{ color:#0b99bc; text-decoration: none; } .style7 .post-slide .wdo-pic{ overflow: hidden; position: relative; } .style7 .post-slide .wdo-pic img{ width: 100%; height: auto; transform: rotate(0deg) scale(1,1); transition: all 0.9s ease 0s; } .style7 .post-slide:hover img{ transform: rotate(-2deg) scale(1.1,1.1); } .style7 .post-slide .wdo-pic:after{ content: ""; position: absolute; top:0; left:0; width: 100%; height: 100%; background: rgba(255,255,255,0); transition: all 0.9s ease 0s; } .style7 .post-slide:hover .wdo-pic:after{ background: rgba(255,255,255,0.2); } .style7 .post-slide .post-bar{ list-style: none; padding:12px 0; margin: 0; } .style7 .post-slide .post-bar li{ display: inline-block; margin-right:3px; color:#aaa; } .style7 .post-slide .post-bar li:last-child{ margin-right: 0; } .style7 .post-slide .post-bar li a{ color:#aaa; transition:0.3s ease; } .style7 .post-slide .post-bar li a:hover{ text-decoration: none; color:#0b99bc; } .style7 .post-slide .wdo-post-description{ font-size: 14px; line-height: 24px; margin-bottom:15px; color:#767676; } .style7 .post-slide .read-more{ color:#0b99bc; font-size: 14px; font-style: italic; text-transform: capitalize; } .style7 .post-slide .read-more:hover{ color:#333; text-decoration:none; } @media only screen and (max-width: 479px) { .style7 .post-slide{ padding: 15px; } .style7 .post-slide .post-bar li{ margin-bottom: 5px; } .style7 .post-slide .post-bar li:last-child{ margin-bottom: 0; } } .style8 .post-slide{ margin: 0 15px; position:relative; background:#fff; } .style8 .post-slide .wdo-post-img{ position: relative; overflow: hidden; } .style8 .post-slide .wdo-post-img img{ width: 100%; height: auto; } .style8 .post-slide .wdo-over-layer{ position: absolute; top:0; left:0; width:100%; height:100%; opacity:0; background: rgba(0,0,0,0.6); transition: all 0.30s ease; } .style8 .post-slide:hover .wdo-over-layer{ opacity:1; } .style8 .post-slide .wdo-post-link{ margin:0; padding:0; position: relative; top:45%; text-align:center; } .style8 .post-slide .wdo-post-link li{ display: inline-block; list-style: none; margin-right:20px; } .style8 .post-slide .wdo-post-link li a{ color:#fff; font-size:20px; } .style8 .post-slide .wdo-post-link li a:hover{ color: #ff8b3d; text-decoration:none; } .style8 .post-slide .wdo-post-date{ position:absolute; top:10%; left:4%; } .style8 .post-slide .wdo-date{ display: inline-block; border-radius: 3px 0 0 3px; padding: 5px 10px; color: #fff; font-size: 20px; font-weight: bold; text-align: center; background:#333; float: left; } .style8 .post-slide .wdo-month{ display: inline-block; border-radius: 0 3px 3px 0; padding: 5px 13px; color: #111; font-size: 20px; font-weight: bold; background: #ff8b3d; } .style8 .post-slide .wdo-post-content{ padding:30px; } .style8 .post-slide .wdo-post-title{ margin:0 0 15px 0; } .style8 .post-slide .wdo-post-title a{ font-size:18px; font-weight:bold; color:#333; display: inline-block; text-transform:capitalize; transition: all 0.3s ease 0s; } .style8 .post-slide .wdo-post-title a:hover{ text-decoration: none; color:#ff8b3d; } .style8 .post-slide .wdo-post-description{ font-size: 14px; line-height:24px; color:#808080; } .style8 .post-slide .wdo-read{ color:#333; font-size:14px; font-weight:bold; text-transform:uppercase; display: block; margin-top: 10px; position: relative; transition: color 0.20s linear; } .style8 .post-slide .wdo-read:hover{ text-decoration:none; color:#ff8b3d; } .style8 .post-slide .wdo-read:after{ content:""; position: absolute; width:30%; display: block; border:1px solid #ff8b3d; transition: all 0.30s ease; } .style8 .post-slide .wdo-read:hover:after{ width:100%; } @media only screen and (max-width: 479px) { .style8 .post-slide .wdo-month{ font-size:14px; } .style8 .post-slide .wdo-date{ font-size:14px; } } .style9 .post-slide{ margin: 0 15px; } .style9 .post-slide .wdo-post-img{ position: relative; overflow: hidden; } .style9 .post-slide .wdo-over-layer:before{ content: ""; position: absolute; top:0; left:0; width: 100%; height: 100%; background:rgba(255, 255, 255,0); transition: all 0.50s ease 0s; } .style9 .post-img:hover .wdo-over-layer:before{ background:rgba(255, 255, 255,0.6); } .style9 .post-slide .wdo-post-img img{ width: 100%; height:auto; } .style9 .post-slide .wdo-post-content{ background:#fff; padding:25px 30px; } .style9 .post-slide .wdo-post-date{ display: block; color:#808080; font-size: 13px; text-transform: uppercase; } .style9 .post-slide .wdo-post-title{ margin: 15px 0 14px; font-size: 15px; font-weight: 600; text-transform: uppercase; } .style9 .post-slide .wdo-post-title > a{ color:#3c3c3c; transition:all 300ms linear 0s; } .style9 .post-slide .wdo-post-title > a:hover{ color:#c70034; text-decoration: none; } .style9 .post-slide .wdo-post-description{ color:#676767; font-size: 15px; line-height: 24px; } .style9 .post-slide .post-bar{ padding: 0; list-style: none; text-transform: uppercase; } .style9 .post-slide .post-bar li{ display: inline-block; font-size: 13px; color:#676767; } .style9 .post-slide .post-bar li a{ color:#c70034; font-weight: bold; } .style9 .post-slide .post-bar li a:hover{ text-decoration:none; color:#999; } @media only screen and (max-width: 650px){ .style9 .post-slide{ margin-left: 0; } } .style10 .post-slide{ position: relative; } .style10 .post-slide .wdo-post-date{ width: 80px; background: #a2397b; float: left; padding: 15px 0; } .style10 .post-slide:hover .wdo-post-date{ background:#3498db; } .style10 .post-slide .wdo-date{ font-size:30px; color:#fff; display: block; text-align:center; font-weight: bold; } .style10 .post-slide .wdo-month{ font-size: 14px; color:#fff; display: block; text-align:center; text-transform:uppercase; } .style10 .post-slide .wdo-post-content{ padding-left: 98px; } .style10 .post-slide .wdo-post-content img{ width: 100%; height: auto; } .style10 .post-slide .wdo-post-title{ margin:25px 0 15px 0; } .style10 .post-slide .wdo-post-title a{ font-size:15px; font-weight:bold; color:#333; display: inline-block; text-transform:uppercase; transition: all 0.3s ease 0s; } .style10 .post-slide .wdo-post-title a:hover{ color:#3498db; text-decoration: none; } .style10 .post-slide .wdo-post-description{ font-size: 14px; line-height:24px; color:#808080; margin-bottom:25px; } .style10 .post-slide .wdo-read-more{ display: inline-block; color:#fff; background: #3498db; padding:15px 13px; font-weight: bold; border-radius:2px; text-transform:uppercase; transition: color 0.20s linear; } .style10 .post-slide .wdo-read-more:hover{ text-decoration:none; background: #226595; } .style10 .post-slide .wdo-read-more i{ margin-left:10px; font-size:10px; } @media only screen and (max-width: 480px){ .style10 .post-slide .wdo-post-date{ width: 70px; } .style10 .wdo-post-content{ padding-left: 85px; } }