/* @import url(screen-reporter.css); */ @import url(vo-image.css); /* ----------RESET----------- */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; } body, html { color: #7b7b7b; font-family: "proxima-nova", Arial, Helvetica, Verdana, sans-serif; font-size: 15px; line-height: 1.5em; background: #191919 url(../../img/bg-dark.jpg); } .container { margin: 0 auto; padding: 0 50px; max-width: 950px; overflow: hidden; } .right { float: right; } .left { float: left; } p { margin-bottom: 15px; } h1 { font-size: 40px; line-height: 40px; font-weight: 300; margin-bottom: 38px; color: #191919; } h2 { font-size: 30px; line-height: 28px; font-weight: 300; margin-bottom: 17px; } h3 { font-size: 18px; text-transform: uppercase; color: #adadad; margin-bottom: 20px; } h4 { color: #585858; } input, textarea { font-family: "proxima-nova", Arial, Helvetica, Verdana, sans-serif; border: 1px solid #cecece; border-top: 1px solid #c2c2c2; border-bottom: 1px solid #dadada; font-size: 15px; height: 36px; line-height: 36px; padding: 0 10px; width: 100%; border-radius: 3px; color: #474747; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .article h2 { color: #585858; margin: 30px 0 13px 0; font-size: 18px; text-transform: uppercase; font-weight: bold;} .article h3 { color: #585858; margin: 30px 0 13px 0; text-transform: none; color: #6c6c6c; } .article ul li { margin-bottom: 15px; } .article ol li { margin: 0 0 15px 20px; list-style: decimal; } .article iframe { max-width: 100%; } a { color: #88c029; text-decoration: none; -webkit-transition: all 0.218s; -moz-transition: all 0.218s; -ms-transition: all 0.218s; -o-transition: all 0.218s; transition: all 0.218s; } a:hover { color: #1c8bcd; } button { font-family: "proxima-nova", Arial, Helvetica, Verdana, sans-serif; cursor: pointer; -webkit-transition: all 0.218s; -moz-transition: all 0.218s; -ms-transition: all 0.218s; -o-transition: all 0.218s; transition: all 0.218s; } @media only screen and (max-width: 500px) { .container { padding: 0 25px; } } /* ================================================================================== */ /* == HEADER ======================================================================== */ /* ================================================================================== */ #header { background: #191919 url(../../img/bg-dark.jpg); height: 65px; line-height: 65px; border-bottom: 1px solid #000; position: relative; } #header h1 { font-size: 20px; float: left; margin-top: 21px; } #header h1 a { display: block; width: 159px; height: 22px; text-indent: -9999px; background: url(../../img/sabramedia.png) no-repeat top; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } #header h1 a:hover { background-position: bottom; } ul#main-nav { float: right; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; } ul#main-nav li { display: inline; padding: 0 10px; } ul#main-nav li a { color: #7e7e7e; } ul#main-nav li a:hover { color: #88c029; } #header a#pull { display: none; } @media only screen and (max-width: 640px) { ul#main-nav { display: none; background: #191919 url(../../img/bg-dark.jpg); position: absolute; top: 66px; width: 100%; left: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} ul#main-nav li { float: left; width: 50%; padding: 0; text-align: center; border-bottom: 1px solid #000; border-right: 1px solid #000; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} ul#main-nav li a { display: block; } ul#main-nav li a:hover { background: #222; } #header a#pull { display: block; width: 45px; color: #dcdcdc; position: absolute; top: 25px; right: 25px; padding: 0 20px 0 0; height: 20px; line-height: 20px; } #header a#pull:after { content:""; background: url(../../img/nav-icon.png) no-repeat center; width: 20px; height: 20px; display: inline-block; position: absolute; right: 0px; top: 0px; } } /* ================================================================================== */ /* == FEATURE ======================================================================= */ /* ================================================================================== */ #feature { background: #88c029 url(../../img/feature-green.jpg) center top; height: 320px; } #feature h1 { color: #191919; font-weight: 700; background: #fff; padding: 12px 18px; font-size: 56px; line-height: 55px; float: left; text-transform: uppercase; margin: 95px 0 5px 0; letter-spacing: -1px; } #feature p { color: #adadad; background: #191919; padding: 12px 18px; clear: both; float: left; font-size: 18px;font-weight: 700; text-transform: uppercase; } /*#feature h1 { color: #fff; font-weight: 700; background: #191919; padding: 15px 20px 0 20px; font-size: 56px; line-height: 55px; display: inline-block; text-transform: uppercase; margin: 120px 0 0 0; } #feature p { color: #adadad; background: #191919; padding: 20px; margin: -10px 0 0 0; width: 500px; }*/ #bar { height: 75px; background: #111 url(../../img/bg-dark.jpg); font-size: 18px; border-top: 1px solid #000; border-bottom: 1px solid #000; } #bar ul { background: url(../../img/bar-dividers.png) repeat-y center; overflow: hidden; } #bar ul li { float: left; height: 75px; width: 237px; text-align: center; line-height: 75px; -webkit-transition: all 0.218s; -moz-transition: all 0.218s; -ms-transition: all 0.218s; -o-transition: all 0.218s; transition: all 0.218s; } #bar ul li:hover { background: rgba(255,255,255,0.07); } #bar ul li a { display: inline-block; padding-left: 45px; } #bar ul li a:hover { color: #88c029; } #bar ul li#serve a { background: url(../../img/icon-serve.png) no-repeat right; padding: 0 25px 0 0; } #bar ul li#businesses a { background: url(../../img/icon-businesses.png) no-repeat left; } #bar ul li#agencies a { background: url(../../img/icon-agencies.png) no-repeat left; } #bar ul li#newspapers a { background: url(../../img/icon-newspapers.png) no-repeat left; } @media only screen and (max-width: 450px) { #feature h1 { margin-top: 45px; } } /* ================================================================================== */ /* == CONTENT ======================================================================= */ /* ================================================================================== */ #content { background: #fff; padding: 50px 0; } .column200 { width: 21.052631578%; /*200/950*/ float: left; margin-right: 5.263157894%; /*50/950*/ } .column200.last { margin: 0; } .column225 { width: 23.684210526%; /*225/950*/ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .column450 { width: 47.368421052%; /*450/950*/ } .column675 { width: 71.052631578%; /*675/950*/ } .column225 .testimonial p { font-style: italic; } .column225 .testimonial p.name { font-style: normal; font-weight: 600; } .article ul { margin-left: 20px; list-style: disc; } /* ================================================================================== */ /* == HOMEPAGE ====================================================================== */ /* ================================================================================== */ h3 a.blog-link { color: #adadad; } h3 a.blog-link:hover { color: #88c029; } #content .who-we-are { width: 42.105263157%; /*400/950*/ background: #191919 url(../../img/bg-dark.jpg); padding: 25px; border-radius: 5px; } #content .who-we-are a { color: #adadad; border-bottom: 1px solid #585858; } #content .who-we-are a:hover { color: #88c029; border-color: #88c029; } #content .who-we-are a.more { color: #88c029; border: none; } #content .who-we-are a.more:hover { color: #1c8bcd; } ul#home-blog { margin: 30px 0 0 0; } ul#home-blog li { margin-bottom: 40px; } ul#home-blog li:last-child { margin-bottom: 0; } ul#home-blog li h2 a { color: #333; line-height: 33px; } ul#home-blog li h2 a:hover { color: #88c029; } ul#home-blog li span.date { display: block; color: #88c029; margin: -17px 0 10px 0; } ul#home-blog li .excerpt { margin-bottom: 15px; } a.read-more { background: url(../../img/read-more.png) no-repeat right center; padding-right: 11px; } #featured-project { background: url(../../img/bg-shadow-bottom.png) repeat-x 0 bottom, url(../../img/bg-shadow-top.png) repeat-x 0 top, url(../../img/bg-wt.jpg); background-color: #f0f0f0; padding: 50px 0;} #featured-project img { float: left; width: 47.368421052%; /*450/950*/ height: auto; border: 1px solid #dcdcdc; padding: 1px; background: #fff; } #featured-project #info { width: 47.368421052%; /*450/950*/ float: right;} #featured-project #info span.name { color: #88c029; display: block; margin: -20px 0 30px 0; } #featured-project #info p { font-style: italic; margin-bottom: 30px; } a.button { background: #88c029; color: #fff; font-weight: 700; text-transform: uppercase; padding: 13px 30px; border-radius: 3px; display: inline-block; } a.button:hover { background: #191919; color: #eee; } p.intro { font-size: 18px; font-weight: 600; line-height: 24px; margin-bottom: 30px; } @media only screen and (max-width: 740px) { .index .column450 { float: none; width: 100%; margin-bottom: 50px; } .who-we-are { float: none; width: 100% !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } @media only screen and (max-width: 480px) { #featured-project img { float: none; width: 100%; } #featured-project #info {float: none; width: 100%; } } /* ================================================================================== */ /* == PORTFOLIO ===================================================================== */ /* ================================================================================== */ .case { overflow: hidden;clear: both; border-bottom: 1px solid #dcdcdc; padding-bottom: 25px; margin-bottom: 75px; } .case:last-child { border-bottom: none; margin: 0; } .case .column675 { float: left; } .case .column675 img { width: 100%; height: auto ;margin-bottom: 50px; border: 1px solid #dcdcdc; } .case .column675 .testimonial { background: #88c029 url(../../img/quote-left.png) no-repeat 15px 15px; padding: 25px; color: #fff; font-style: italic; font-size: 14px; line-height: 19px; margin-bottom: 50px;} .case .column675 .testimonial p { background: url(../../img/quote-right.png) no-repeat right bottom; } .case .column675 .testimonial p.name { font-style: normal; color: #333; font-weight: 600; margin: 0; background: none;} .case .column225 { float: right; font-size: 14px; line-height: 19px; } .case .column225 h2 { font-size: 24px; text-transform: uppercase; font-weight: 700; color: #333; margin-bottom: 0; line-height: 22px;} .case .column225 a.link { display: block; margin-bottom: 12px; font-size: 15px; } @media only screen and (max-width: 768px) { .case .column225 { margin-bottom: 30px; } } /* ================================================================================== */ /* == SERVICE PAGE ================================================================== */ /* ================================================================================== */ ul#services-list li#design { padding-left: 92px; background: url(../../img/icon-design.png) no-repeat left 3px; } ul#services-list li#development { padding-left: 92px; background: url(../../img/icon-development.png) no-repeat left 3px; } ul#services-list li#evaluation { padding-left: 92px; background: url(../../img/icon-evaluation.png) no-repeat left 3px; } /*colors*/ #feature.services { background: #1c8bcd url(../../img/feature-blue.jpg) center center; } .services a { color: #1c8bcd; } .services a:hover { color: #88c029; } .services #footer ul.tweet_list li { background: #1c8bcd; text-shadow: 0px 1px 2px rgba(0,0,0,0.5); } .services #footer #twittered a#twitter-link { background: url(../../img/footer/twitter-comment-blue.png) no-repeat right top; color: #1c8bcd; } .services #header a:hover, .services #footer a:hover { color: #1c8bcd; } .services #footer ul#social li#twitter { background: url(../../img/footer/icon-twitter-blue.png) no-repeat left top; } .services #footer ul#social li#facebook { background: url(../../img/footer/icon-facebook-blue.png) no-repeat left top; } .services #footer ul#social li#google { background: url(../../img/footer/icon-google-blue.png) no-repeat left top; } .services #footer ul#social li#linkedin { background: url(../../img/footer/icon-linkedin-blue.png) no-repeat left top; } @media only screen and (max-width: 400px) { ul#services-list li#design, ul#services-list li#development, ul#services-list li#evaluation { padding: 100px 0 0 0; background-position: top; margin-top: 50px; } } /* ================================================================================== */ /* == TEAM PAGE ===================================================================== */ /* ================================================================================== */ .team .column200 h2 { text-align: center; } .team .column200 h3 { font-size: 17px; margin-top: 20px; text-align: center; border-bottom: 1px solid #e5e5e5; padding-bottom: 20px; } .team .column200 img { display: block; margin: 0 auto; max-width: 100%; } /*colors*/ #feature.team { background: #1c8bcd url(../../img/feature-blue.jpg) center center; } .team a { color: #1c8bcd; } .team a:hover { color: #88c029; } .team #footer ul.tweet_list li { background: #1c8bcd; text-shadow: 0px 1px 2px rgba(0,0,0,0.5); } .team #footer #twittered a#twitter-link { background: url(../../img/footer/twitter-comment-blue.png) no-repeat right top; color: #1c8bcd; } .team #header a:hover, .team #footer a:hover { color: #1c8bcd; } .team #footer ul#social li#twitter { background: url(../../img/footer/icon-twitter-blue.png) no-repeat left top; } .team #footer ul#social li#facebook { background: url(../../img/footer/icon-facebook-blue.png) no-repeat left top; } .team #footer ul#social li#google { background: url(../../img/footer/icon-google-blue.png) no-repeat left top; } .team #footer ul#social li#linkedin { background: url(../../img/footer/icon-linkedin-blue.png) no-repeat left top; } @media only screen and (max-width: 980px) { .team .column200 { float: none; width: 100%; margin: 0 0 50px 0; padding-bottom: 50px;overflow: hidden; border-bottom: 1px solid #e5e5e5; } .team .column200 img { float: left; margin: -40px 7% 8px 0; width: 25%; } .team .column200 h2 { text-align: left; margin-bottom: 25px; margin-left: 32%;} .team .column200 h3 { text-align: left; border: none; margin: 0; padding: 0 0 15px 0; } } @media only screen and (max-width: 330px) { .team .column200 img { float: none; margin: 25px auto; width: 70%; } .team .column200 h2 { text-align: center; margin: 0;} .team .column200 h3 { text-align: center; } } /* ================================================================================== */ /* == WORDPRESS PAGE ================================================================ */ /* ================================================================================== */ p.budget { font-style: italic; } /*colors*/ #feature.wordpress { background: #1c8bcd url(../../img/feature-blue.jpg) center center; } .wordpress a { color: #1c8bcd; } .wordpress a:hover { color: #88c029; } .wordpress #footer ul.tweet_list li { background: #1c8bcd; text-shadow: 0px 1px 2px rgba(0,0,0,0.5); } .wordpress #footer #twittered a#twitter-link { background: url(../../img/footer/twitter-comment-blue.png) no-repeat right top; color: #1c8bcd; } .wordpress #header a:hover, .wordpress #footer a:hover { color: #1c8bcd; } .wordpress #footer ul#social li#twitter { background: url(../../img/footer/icon-twitter-blue.png) no-repeat left top; } .wordpress #footer ul#social li#facebook { background: url(../../img/footer/icon-facebook-blue.png) no-repeat left top; } .wordpress #footer ul#social li#google { background: url(../../img/footer/icon-google-blue.png) no-repeat left top; } .wordpress #footer ul#social li#linkedin { background: url(../../img/footer/icon-linkedin-blue.png) no-repeat left top; } /* ================================================================================== */ /* == AGENCY PAGE =================================================================== */ /* ================================================================================== */ ul#agency-list li { padding-left: 92px; background: url(../../img/dot-big.png) no-repeat left 3px; } /*colors*/ #feature.agency { background: #c0293c url(../../img/feature-red.jpg) center center; } .agency-partnership a { color: #c0293c; } .agency-partnership a:hover { color: #1c8bcd; } .agency-partnership #footer ul.tweet_list li { background: #c0293c; text-shadow: 0px 1px 2px rgba(0,0,0,0.5); } .agency-partnership #footer #twittered a#twitter-link { background: url(../../img/footer/twitter-comment-red.png) no-repeat right top; color: #c0293c; } .agency-partnership #header a:hover, .agency-partnership #footer a:hover { color: #c0293c; } .agency-partnership #footer ul#social li#twitter { background: url(../../img/footer/icon-twitter-red.png) no-repeat left top; } .agency-partnership #footer ul#social li#facebook { background: url(../../img/footer/icon-facebook-red.png) no-repeat left top; } .agency-partnership #footer ul#social li#google { background: url(../../img/footer/icon-google-red.png) no-repeat left top; } .agency-partnership #footer ul#social li#linkedin { background: url(../../img/footer/icon-linkedin-red.png) no-repeat left top; } /* ================================================================================== */ /* == DEVELOPMENT PAGE ============================================================== */ /* ================================================================================== */ /*colors*/ #feature.development { background: #c0293c url(../../img/feature-red.jpg) center center; } .development a { color: #c0293c; } .development a:hover { color: #1c8bcd; } .development #footer ul.tweet_list li { background: #c0293c; text-shadow: 0px 1px 2px rgba(0,0,0,0.5); } .development #footer #twittered a#twitter-link { background: url(../../img/footer/twitter-comment-red.png) no-repeat right top; color: #c0293c; } .development #header a:hover, .development #footer a:hover { color: #c0293c; } .development #footer ul#social li#twitter { background: url(../../img/footer/icon-twitter-red.png) no-repeat left top; } .development #footer ul#social li#facebook { background: url(../../img/footer/icon-facebook-red.png) no-repeat left top; } .development #footer ul#social li#google { background: url(../../img/footer/icon-google-red.png) no-repeat left top; } .development #footer ul#social li#linkedin { background: url(../../img/footer/icon-linkedin-red.png) no-repeat left top; } /* ================================================================================== */ /* == GET STARTED PAGE ============================================================== */ /* ================================================================================== */ #evaluation-box { float: left; width: 42.105263157%; /*400/950*/ padding: 25px; background: #191919 url(../../img/bg-dark.jpg); color: #bdbdbd; position: relative; } #evaluation-box h3 { color: #88c029; margin-bottom: 13px; } #evaluation-box h3 span { color: #dcdcdc; font-size: 12px; } #evaluation-box ul li { background: url(../../img/list1.png) no-repeat left top; height: 33px; line-height: 28px; padding-left: 40px; margin-bottom: 5px; } #evaluation-box ul li#one { background: url(../../img/list1.png) no-repeat left top; } #evaluation-box ul li#two { background: url(../../img/list2.png) no-repeat left top; } #evaluation-box ul li#three { background: url(../../img/list3.png) no-repeat left top; } #evaluation-box ul li#four { background: url(../../img/list4.png) no-repeat left top; } #evaluation-box a#request { display: block; width: 100%; margin-top: 25px;padding: 0; background: #88c029; border: none; height: 57px; text-transform: uppercase; font-weight: 700; font-size: 18px; color: #fff; border-radius: 3px; line-height: 57px; text-align: center; } #evaluation-box a#request:hover { background: #474747; color: #eee; } #contact-box { float: right; width: 42.105263157%; /*400/950*/ padding: 25px; background: #88c029; color: #2b2b2b; position: relative; } #contact-box h3 { color: #2b2b2b; margin-bottom: 13px; } #contact-box legend { display: none; } #contact-box input, #contact-box textarea { padding: 5px; font-size: 15px; display: block; width: 100%; } #contact-box textarea { height: 100px; } #contact-box button.submit { display: block; width: 100%; margin-top: 25px;padding: 0; background: #191919; border: none; height: 57px; text-transform: uppercase; font-weight: 700; font-size: 18px; color: #fff; border-radius: 3px; line-height: 57px; text-align: center; } #contact-box button.submit:hover { background: #474747; color: #eee; } #contact-box .voForm .success-message, .evaluation-form .voForm .success-message { position: absolute; top: 140px; width: 100%; margin: 0 -25px; height: 310px; background: #191919; line-height: 310px; text-align: center; font-weight: bold; font-size: 24px; color: #eee; } .voForm .error-message { background: #191919; color: #eee; padding: 10px; margin-bottom: 15px; } @media only screen and (max-width: 768px) { #evaluation-box, #contact-box { float: none; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #evaluation-box { margin-bottom: 50px; } } /* ================================================================================== */ /* == EVALUATION PAGE =============================================================== */ /* ================================================================================== */ .evaluation-form { padding: 25px; background: #88c029; color: #2b2b2b; text-shadow: 0px 1px 0px rgba(255,255,255,0.35); margin-top: 50px; position: relative; } .evaluation-form legend { display: none; } .evaluation-form label { display: block; margin-bottom: 5px; font-weight: 600; } .evaluation-form input, .evaluation-form textarea { padding: 5px; font-size: 15px; display: block; width: 610px; } .evaluation-form textarea { height: 100px; } .evaluation-form button.submit { display: block; background: url(../../img/button-request2.png) no-repeat center top; width: 620px; height: 57px; text-indent: -9999px; margin-top: 25px; border: none; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } .evaluation-form button.submit:hover { background-position: bottom; } /* ================================================================================== */ /* == 404 PAGE ====================================================================== */ /* ================================================================================== */ #whoops h1 { width: 705px; } #whoops img { float: right; } #whoops a { display: block; } /* ================================================================================== */ /* == BLOG ========================================================================== */ /* ================================================================================== */ a.back-blog-link { display: block; font-size: 18px; text-transform: uppercase; color: #adadad; margin-bottom: 25px; font-weight: bold; background: url(../../img/icon-backarrow.png) no-repeat left 5px; padding-left: 15px;} a.back-blog-link:hover { color: #88c029; } .post-list { } .post-list .post-content { border-bottom: 1px solid #dcdcdc; padding-bottom: 40px;margin-bottom: 37px; overflow: hidden; } .post-content p#post-credits { color: #88c029; margin: -25px 0 50px 0; } .blog p.post-credits { color: #bababa; margin: -10px 0 15px 0; } .blog .social { margin: 40px 0 50px 0; background: #f5f5f5; padding: 16px 10px 10px 17px; border: 1px solid #e5e5e5; overflow: hidden; } .blog .social #retweet { float: left; margin-right: 12px; } .blog .social .fb-like { float: left; width: 450px; height: 20px; margin-top: -2px; } .column225 #more-posts h3 { margin-bottom: 10px; } .column225 #more-posts ul li { margin-bottom: 10px; } .post-title { overflow: hidden; display: table-cell; vertical-align: middle; padding-bottom: 40px; } .post-title .align { display: table-cell; vertical-align: middle; } .post-title h1, .post-title h2 { max-width: 580px; margin: 0; } .post-title h2 { line-height: 31px; font-size: 30px; font-weight: 300; text-transform: none; } .post-title span.post-date { float: left; background: #88c029; color: #fff; text-align: center; height: 75px; width: 75px; border-radius: 75px; margin: 0 20px 0 0; } .post-title span.post-date span.day { display: block; font-size: 36px; font-weight: 700; text-transform: uppercase; padding-top: 20px; } .post-title span.post-date span.month { display: block; text-transform: uppercase; margin-top: 1px; } #cms_blog_default_archive .post-title { padding: 0 0 15px 0; } #cms_blog_default_archive .post-title span.post-date { height: 65px; width: 65px; } #cms_blog_default_archive .post-title span.post-date span.day { font-size: 31px; padding-top: 15px; } #cms_blog_default_archive .post-title span.post-date span.month { font-size: 13px; margin: 0; } .blog .twitter-tweet { margin: 0 auto; } .blog .author-signature { margin-top: 62px; position: relative; font-style: italic; } .blog .author-signature:before { content: ""; height: 2px; width: 30px; background: #898989; position: absolute; top: -30px; left: 0; } /*Blog Code Snippets*/ .syntaxhighlighter { padding: 25px 0; } .post-content pre { margin-bottom: 20px; /*background: #f7f7f7; border: 1px solid #eee; padding: 25px; overflow: auto;*/} .post-content code { background: #f7f7f7; } .post-comments ul { border-top: 1px dotted #e5e5e5; padding-top: 15px; } .post-comments ul li { border-bottom: 1px dotted #e5e5e5; padding: 15px 0; margin-bottom: 15px; font-size: 14px; line-height: 18px; } .post-comments ul li h3.author { margin: 0 0 13px 0; } .post-comments ul li span.date { font-weight: 300; font-size: 15px; color: #88c029; } span.add-comment { display: block; font-size: 40px; line-height: 40px; font-weight: 300; margin-bottom: 38px; color: #191919; } #comments fieldset { margin-top: 50px; } #comments fieldset label { font-weight: bold; } #comments fieldset ul { padding-top: 20px; margin: 0; list-style: none; } #comments fieldset ul li { width: 325px; float: left; } #comments fieldset ul li#fullname { margin-right: 25px; } #comments fieldset ul li#message { float: none; clear: both; width: 100%; } #comments fieldset input, #comments fieldset textarea { padding: 5px; font-size: 15px; display: block; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #comments fieldset textarea { height: 120px; } #comments fieldset button.submit { width: 325px; padding: 0; background: #88c029; border: none; height: 57px; text-transform: uppercase; font-weight: 700; font-size: 18px; color: #fff; border-radius: 3px; line-height: 57px; text-align: center; } #comments fieldset button.submit:hover { background: #191919; color: #eee; } #comments.voForm { position: relative; } #comments.voForm .success-message { position: absolute; top: 134px; width: 100%; height: 155px; line-height: 155px; background: #88c029; color: #fff; font-weight: bold; text-align: center; font-size: 18px; } /*Facebook Connect*/ #comments .register-facebook { } #comments .register-facebook button { margin: 15px 0; background: #4160A0; height: 57px; text-transform: uppercase; font-weight: 700; font-size: 18px; color: #fff; border-radius: 3px; line-height: 57px; width: 100%; border: none; text-align: left; padding: 0 21px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #comments .register-facebook button:hover { background: #334C89; } #comments ul.commenter-profile li.picture { width: 50px; margin-right: 15px; } #comments ul.commenter-profile li.picture img { width: 100%; } #comments ul.commenter-profile li.name { line-height: 50px; font-size: 22px; } /*Newsletter Subscribe*/ #subscribe-to-newsletter { padding: 25px; background: #88c029; color: #2b2b2b; position: relative; margin: 25px 0; } #subscribe-to-newsletter h3 { color: #2b2b2b; margin-bottom: 13px; } #subscribe-to-newsletter p { font-size: 14px; line-height: 18px; } #subscribe-to-newsletter ul li { margin-bottom: 10px; } #subscribe-to-newsletter input { padding: 5px; font-size: 14px; display: block; } #subscribe-to-newsletter button.submit { display: block; width: 100%; height: 36px; margin-top: 15px; border: none; background: #2b2b2b; color: #fff; font-weight: 600; text-transform: uppercase; font-size: 15px; border-radius: 4px; } #subscribe-to-newsletter button.submit:hover { background: #444; } #subscribe-to-newsletter .success-message { background: #2b2b2b; color: #eee; padding: 15px; margin-bottom: 25px; border-radius: 4px; line-height: 18px;} @media only screen and (max-width: 768px) { .column675 { float: none; width: 100%; } .voImage.center { max-width: 100%; height: auto; } .voImage img { max-width: 100%; height: auto; } .column225 { float: none; width: 100%; } .column225 #more-posts { display: none; } .column225 #subscribe-to-newsletter { margin-top: 60px; } .column225 .testimonial-block { background: #f3f3f3; padding: 25px; margin-top: 50px; } } @media only screen and (max-width: 500px) { .post-title .align { display: block; margin-bottom: 25px; } .post-title span.post-date { display: block; float: none; background: #88c029; color: #fff; text-align: center; height: 75px; width: 75px; border-radius: 75px; margin: 0 auto; } } /* ================================================================================== */ /* == FOOTER ======================================================================== */ /* ================================================================================== */ #footer { clear: both; background: #191919 url(../../img/bg-dark.jpg); color: #bdbdbd; padding-top: 50px; } #footer a { color: #7b7b7b; } #footer a:hover { color: #88c029; } #footer .column { float: left; width: 21.052631578%; /*200/950*/ margin-right: 5.263157894%; /*50/950*/ } #footer h3 { color: #fff; } #footer ul li { margin-bottom: 10px; } #footer ul#social li { height: 24px; line-height: 24px; padding-left: 34px; } #footer ul#social li#twitter { background: url(../../img/footer/icon-twitter.png) no-repeat left top; } #footer ul#social li#facebook { background: url(../../img/footer/icon-facebook.png) no-repeat left top; } #footer ul#social li#google { background: url(../../img/footer/icon-google.png) no-repeat left top; } #footer ul#social li#linkedin { background: url(../../img/footer/icon-linkedin.png) no-repeat left top; } #footer #twittered.column { float: right; width: 47.368421052%; /*450/950*/ margin: 0; } #footer #twittered a#twitter-link { display: block; text-align: right; background: url(../../img/footer/twitter-comment.png) no-repeat right top; padding: 10px 83px 0 0; color: #88c029; } #footer #twittered a#twitter-link:hover { color: #fff; } #footer .tweet { position: relative; } #footer .tweet a.tweet_avatar { display: none; } #footer .tweet ul li { background: #88c029; color: #fff; padding: 25px; margin: 0; text-shadow: 0px 1px 2px #499107; } #footer .tweet ul .created_at { position: absolute; bottom: -33px; right: 180px; font-size: 13px; text-shadow: 0px 1px 2px rgba(0,0,0,0.5); } #footer .tweet ul a { /*color: #1f6f00;*/ color:#fff; border-bottom: 1px solid rgba(255,255,255,0.25);} #footer .tweet ul a:hover { border-color: #ddebc6; } .tweet ul a { color: #ddebc6; } .tweet ul a:hover { color: #fff; } #footer-bottom { background: #040404; color: #535353; font-size: 14px; line-height: 14px; padding: 20px 0; margin-top: 50px; margin-bottom: -22px; } #footer-bottom p { margin: 0; } #footer-bottom p { margin: 0; } @media only screen and (max-width: 768px) { #footer .column { width: 44%; margin-bottom: 50px; } #footer #twittered.column { float: none; width: 100%; clear: both; } } @media only screen and (max-width: 450px) { #footer .column { width: 100%; margin-bottom: 50px; } } /* ================================================================================== */ /* == Unsubscribe Page ============================================================== */ /* ================================================================================== */ .unsubscribe { } .unsubscribe .voListParentChildSelector { margin-left: 10px; } .unsubscribe .voListParentChildSelector li { line-height: 20px; list-style: none;} .unsubscribe .voListParentChildSelector input { width: 20px; height: 20px; margin: 0 10px 0 0; vertical-align: -3px; } .unsubscribe .submit { background: #191919; border: none; color: #fff; font-size: 15px; padding: 10px 20px; border-radius: 3px; }