/* Main Style.css ! ________________________________________________________________________________________________ -REFER TO THE DOCUMENTATION TO LEARN MORE ABOUT PREMADE CLASSES. -PLEASE LET ME KNOW IF YOU FIND A BUG/CROSS-BROWSER ISSUE. -IF YOU HAVE ANY QUESTIONS ABOUT THIS TEMPLATE, FEEL FREE TO CONTACT ME: -http://themeforest.net/user/david-strada/ ________________________________________________________________________________________________ HTML template v1.1 | Copyright (c) 2012 - 2999 David Strada. All rights reserved. ________________________________________________________________________________________________ 01. GLOBAL/BASE STYLES 01.1 NAVIGATION 01.2 SLIDER 01.3 TAGLINES 01.4 EXPERTISE SECTION 01.5 FEATURE BLOG ARTICLES / PORTFOLIO 02. BASIC LAYOUT 02.1 FOOTER STYLES 02.2 PAGES GENERAL SHARE STYLES 03. GLOBAL/PAGE RELATED STYLES 03.1 BLOG 03.2 GALLERY / PORTFOLIO 03.3 PRICING TABLES 03.4 CONTACT PAGE 04. OPTIMIZATIONS FOR DIFFERENT SCREEN SIZES AND DEVICES __________________________________________________________________________________________________________*/ /*__________________________________________________________________________________________________________ [1.0] **************** -GLOBAL/BASE STYLES UTILITIES ________________________________________________________________________________________________________*/ /*__________________________________________________________________________________________________________ [1.1] **************** -NAVIGATION ________________________________________________________________________________________________________*/ ________________________________________________________ ________________________________________________________________________________________________________*/ .recent-articles { border: 10px solid #fff; overflow: hidden; position: relative; text-align: center; -webkit-box-shadow: 0 0 2px #e6e6e6; -moz-box-shadow: 0 0 2px #e6e6e6; box-shadow: 0 0 2px #e6e6e6; cursor: default; margin-top: 15px; } .recent-articles .mask { position: absolute; overflow: hidden; top: 0; left: 0; bottom: 0; right: 0; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; background-color: rgba(248, 148, 6, 0.6); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .recent-articles img { display: block; position: relative; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; } .recent-articles h2 { text-transform: uppercase; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; color: #fff; text-align: center; position: relative; font-size: 17px; padding: 5px; background: rgba(0, 0, 0, 0.8); margin: 20px 0 0 0; -webkit-transform: translateY(-100px); -moz-transform: translateY(-100px); -o-transform: translateY(-100px); -ms-transform: translateY(-100px); transform: translateY(-100px); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .recent-articles p { font-family: Georgia, serif; font-style: italic; font-size: 13px; position: relative; color: #fff; padding: 10px 20px 0; text-align: center; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -o-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; } .recent-articles a.info { display: inline-block; text-decoration: none; padding: 7px 14px; background: #111; color: #fff; text-transform: uppercase; -webkit-box-shadow: 0 0 1px #000; -moz-box-shadow: 0 0 1px #000; box-shadow: 0 0 1px #000; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; font-size: 12px; } .recent-articles a.info:hover { -webkit-box-shadow: 0 0 5px #000; -moz-box-shadow: 0 0 5px #000; box-shadow: 0 0 5px #000; } .recent-articles:hover img { -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } .recent-articles:hover .mask { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; } .recent-articles:hover h2, .recent-articles:hover p, .recent-articles:hover a.info { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .recent-articles:hover p { -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; -o-transition-delay: 0.1s; -ms-transition-delay: 0.1s; transition-delay: 0.1s; } .recent-articles:hover a.info { -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -ms-transition-delay: 0.2s; transition-delay: 0.2s; } #twitter-feed { margin: 0 0 50px 0; } #jtwt_text p { text-align: center; font-size: 28px; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #aaa; line-height: 34px; } #jtwt_text p a { display: block; text-align: center; margin: 0 auto; color: #5b5b5b; } #jtwt_text p a:hover { color: #F4773C; } #jtwt_text #jtwt_date { display: none; } /*__________________________________________________________________________________________________________ [2.0] **************** -FOOTER STYLES ________________________________________________________________________________________________________*/ /*__________________________________________________________________________________________________________ [2.1] **************** -PAGES GENERAL SHARE STYLES ________________________________________________________________________________________________________*/ /*__________________________________________________________________________________________________________ [3.1] **************** -NAVIGATION ________________________________________________________________________________________________________*/ /*__________________________________________________________________________________________________________ [3.2] **************** -PORTFOLIO STYLES ________________________________________________________________________________________________________*/ /*__________________________________________________________________________________________________________ [3.3] **************** -PRICING TABLES ________________________________________________________________________________________________________*/