/* * Template Name: Unify - Responsive Bootstrap Template * Description: Business, Corporate, Portfolio, E-commerce, Blog and One Page Template. * Version: 1.6 * Author: @htmlstream * Website: http://htmlstream.com */ /*Block Grid v1 ------------------------------------*/ .block-grid-v1 { background: #fff; padding: 15px 15px 5px; border-bottom: solid 2px #eee; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .block-grid-v1:hover { border-color: #72c02c; } .block-grid-v1 img { margin-bottom: 10px; } .block-grid-v1 img.block-grid-v1-img { width: 35px; height: 35px; margin-top: 8px; } .block-grid-v1.content-boxes-v1 img.pull-left { float: inherit !important; } .block-grid-v1 h3 a { font-size: 22px; font-weight: 200; margin-right: 10px; } .block-grid-v1.content-boxes-v1 h3 { margin-bottom: 0; } .block-grid-v1.content-boxes-v1 h3 a { color: #555; } /*Star Vote*/ .block-grid-v1 .star-vote { padding: 0; margin-bottom: 10px; vertical-align: middle; } .block-grid-v1 .star-vote li { padding: 0; font-size: 11px; display: inline-block; } /*Additional Info*/ .block-grid-v1-add-info { margin: 0; padding-top: 15px; border-top: solid 1px #eee; } .block-grid-v1-add-info li { padding: 0; margin-right: 3px; margin-bottom: 10px; } .block-grid-v1-add-info li a { font-size: 11px; padding: 4px 7px; text-decoration: none; border: solid 2px #eee; border-radius: 3px !important; } /*Block Grid v2 ------------------------------------*/ .grid-block-v2 { padding: 0; } .grid-block-v2 li { list-style: none; position: relative; -webkit-backface-visibility: hidden; /*For Chrome*/ } .grid-block-v2-info { padding: 15px; text-align: center; background: #f9f9f9; border-bottom: solid 3px #eee; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .grid-block-v2 li:hover .grid-block-v2-info { border-color: #72c02c; } .grid-block-v2-info h3 { font-size: 22px; font-weight: 200; margin-bottom: 10px; } .grid-block-v2-info .star-vote li { padding: 2px; font-size: 16px; } /*News Section ------------------------------------*/ .news-section { border-top: solid 1px #eee; border-bottom: solid 1px #eee; } .news-v1 .news-v1-in { background: #fafafa; } .news-v1 h3 { margin-bottom: 0; font-weight: 200; line-height: 28px; padding: 10px 15px 15px; } .news-v1 h3 a { color: #555; } .news-v1 h3 a:hover { color: #72c02c; } .news-v1 p { color: #555; padding: 0 15px; margin-bottom: 20px; } .news-v1 .news-v1-info { overflow: hidden; margin-top: 30px; padding: 8px 15px; border-top: solid 1px #eee; } .news-v1 .news-v1-info li { font-size: 12px; } .news-v1 .news-v1-info li a:hover { color: #72c02c; text-decoration: none; } /*Services Box v1 ------------------------------------*/ .service-box-v1 .service-block { background: #fff; padding-top: 30px; padding-bottom: 20px; } .service-box-v1 p { position: relative; margin-bottom: 50px; } .service-box-v1 p:after { content: " "; left: 50%; height: 1px; width: 50px; bottom: -15px; position: absolute; margin-left: -25px; background: #72c02c; } .service-box-v1 ul { padding: 0 40px; } .service-box-v1 li { margin: 8px 0; font-size: 15px; padding-top: 8px; border-top: dotted 1px #72c02c; } .service-box-v1 li:hover { color: #72c02c; } .service-box-v1 li:first-child { padding-top: 0; border-top: none; } /*Service Block v1 ------------------------------------*/ .service-block-v1 { margin-top: 20px; text-align: center; position: relative; padding: 45px 20px 20px; border: 1px solid #f2f2f2; } .service-block-v1 i { left: 50%; top: -30px; color: #fff; width: 60px; height: 60px; padding: 16px; font-size: 30px; margin-left: -30px; text-align: center; position: absolute; background: #72c02c; display: inline-block; } .service-block-v1 h3, .service-block-v1 p { margin-bottom: 20px; } /*Team v1 Section ------------------------------------*/ .team-v1 ul { position: relative; } /*Team Image*/ .team-v1 li > .team-img { position: relative; } .team-v1 li > .team-img:after { top: 0; left: 0; width: 100%; height: 100%; content: " "; position: absolute; background: transparent; transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; } .team-v1 li:hover > .team-img:after { background: rgba(0,0,0,0.5); } /*Team Socials*/ .team-v1 li > .team-img ul { left: 0; top: 45%; z-index: 1; padding: 0; width: 100%; height: 36px; list-style: none; margin-top: -18px; text-align: center; visibility: hidden; position: absolute; transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; } .team-v1 li:hover > .team-img ul { top: 50%; visibility: visible; } .team-v1 li > .team-img ul li { margin: 0 5px; text-align: center; display: inline-block; } .team-v1 li > .team-img li i { color: #eee; border-width: 2px; border-color: #eee; transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out; } .team-v1 li > .team-img li i.fa-twitter:hover { color: #fff; background: #3498db; border-color: #3498db; } .team-v1 li > .team-img li i.fa-facebook:hover { color: #fff; background: #4765a0; border-color: #4765a0; } .team-v1 li > .team-img li i.fa-google-plus:hover { color: #fff; background: #e74c3c; border-color: #e74c3c; } /*Team Discription*/ .team-v1 li > h3 { color: #000; font-size: 18px; line-height: 20px; margin: 15px 0 7px; text-transform: uppercase; } .team-v1 li > h4 { color: #999; font-size: 11px; line-height: 16px; text-transform: uppercase; } .team-v1 li > p { margin: 20px 0; position: relative; } .team-v1 li > p:before { left: 0; top: -10px; height: 1px; width: 40px; content: " "; position: absolute; background: #bbb; transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; } .team-v1 li:hover > p:before { width: 100%; background: #72c02c; } /*Call To Action v1 ------------------------------------*/ .call-action-v1 p { margin-top: 5px; font-size: 18px; font-weight: 200; margin-bottom: 0; } .call-action-v1 .call-action-v1-box { width: 100%; display: table; padding: 30px 0; vertical-align: middle; } .call-action-v1 .call-action-v1-in { display: table-cell; vertical-align: middle; } .call-action-v1 .call-action-v1-in.inner-btn { min-width: 250px; text-align: right; } @media (max-width: 992px) { .call-action-v1 .call-action-v1-in, .call-action-v1 .call-action-v1-in.inner-btn { display: block; text-align: center; } .call-action-v1 .call-action-v1-in p { margin-bottom: 20px; } } /*Portfolio Box ------------------------------------*/ /*Portfolio Box*/ .portfolio-box { margin-bottom: 100px; } @media (min-width: 991px) and (max-width: 1199px) { .portfolio-box { margin-bottom: 60px; } } @media (min-width: 768px) and (max-width: 992px) { .portfolio-box { margin-bottom: 0; } } @media (max-width: 768px) { .portfolio-box { margin-bottom: 60px; } } .portfolio-box a.zoomer { background: #fff; overflow: hidden; position: relative; -webkit-backface-visibility: hidden; /*For Chrome*/ } .portfolio-box a.zoomer:after { top: 0; left: 0; right: 0; width: 100%; height: 100%; content: " "; position: absolute; } .portfolio-box a.zoomer:hover:after { background: rgba(0,0,0,0.5); } .portfolio-box a.zoomer img { width: 100%; overflow: hidden; transition: all 500ms ease 0s; } .portfolio-box a.zoomer:hover img { transform: scale(1.1) rotate(0.1deg); } .portfolio-box .portfolio-box-in { left: 0; top: 50%; z-index: 1; width: 100%; min-height: 50px; margin-top: -25px; visibility: hidden; text-align: center; position: absolute; } .portfolio-box a.zoomer:hover .portfolio-box-in { visibility: visible; } .portfolio-box a.zoomer:after, .portfolio-box a.zoomer:hover:after, .portfolio-box a.zoomer:hover .portfolio-box-in i { transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } .portfolio-box .portfolio-box-in i { color: #fff; width: 50px; height: 50px; padding: 16px; font-size: 20px; text-align: center; background: #72c02c; display: inline-block; } /*Project Tag*/ .portfolio-box small.project-tag { display: block; font-size: 12px; margin-bottom: 5px; } .portfolio-box small.project-tag, .portfolio-box small.project-tag a { color: #999; } .portfolio-box small.project-tag i { margin-right: 5px; } .portfolio-box small.project-tag a:hover { color: #72c02c; } /*Portfolio Box v1 ------------------------------------*/ .portfolio-box-v1 { margin: 0; } .portfolio-box-v1 [class^="col-"] { padding: 0; overflow: hidden; } .portfolio-box-v1 li { background: #333; position: relative; -webkit-backface-visibility: hidden; /*For Chrome*/ } .portfolio-box-v1 li:after { top: 0; left: 0; width: 100%; height: 100%; content: " "; position: absolute; } .portfolio-box-v1 li:hover:after { background: rgba(0,0,0,0.7); } .portfolio-box-v1 li:after, .portfolio-box-v1 li:hover:after { transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } .portfolio-box-v1 li img { width: 100%; overflow: hidden; transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } .portfolio-box-v1 li:hover img { -transform: scale(1.1); -o-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); } .portfolio-box-v1 .portfolio-box-v1-in { left: 0; top: 50%; z-index: 1; width: 100%; visibility: hidden; min-height: 150px; margin-top: -75px; text-align: center; position: absolute; font-family: "Open Sans"; } .portfolio-box-v1 li:hover .portfolio-box-v1-in { visibility: visible; } .portfolio-box-v1 .portfolio-box-v1-in h3 { font-size: 22px; margin-top: 20px; position: relative; margin-bottom: 20px; text-transform: uppercase; } .portfolio-box-v1 .portfolio-box-v1-in h3:after { left: 50%; height: 1px; width: 40px; content: " "; bottom: -10px; background: #fff; margin-left: -20px; position: absolute; } .portfolio-box-v1 .portfolio-box-v1-in p, .portfolio-box-v1 .portfolio-box-v1-in h3 { color: #fff; } .portfolio-box-v1 .portfolio-box-v1-in p { font-size: 16px; margin-bottom: 20px; } .portfolio-box-v1 .portfolio-box-v1-in a.btn-u { font-weight: normal; -webkit-backface-visibility: hidden; /*For Chrome*/ } /*Portfolio Feature v2 ------------------------------------*/ .portfolio-box-v2 { margin: 0 0 60px; } .portfolio-box-v2 [class^="col-"] { padding: 0; overflow: hidden; } .portfolio-box-v2 li { background: #333; overflow: hidden; position: relative; -webkit-backface-visibility: hidden; /*For Chrome*/ } .portfolio-box-v2 li:after { top: 0; left: 0; width: 100%; height: 100%; content: " "; position: absolute; } .portfolio-box-v2 li:hover:after { background: rgba(255,255,255,0.6); } .portfolio-box-v2 li:after, .portfolio-box-v2 li:hover:after { transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } .portfolio-box-v2 li img { width: 100%; overflow: hidden; transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } .portfolio-box-v2 li:hover img { -transform: scale(1.1); -o-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); } .portfolio-box-v2 .portfolio-box-v2-in { left: 0; top: 50%; z-index: 1; width: 100%; visibility: hidden; min-height: 60px; margin-top: -30px; text-align: center; position: absolute; font-family: "Open Sans"; } .portfolio-box-v2 li:hover .portfolio-box-v2-in { visibility: visible; } .portfolio-box-v2 .portfolio-box-v2-in i { color: #fff; width: 60px; height: 60px; padding: 20px; font-size: 22px; cursor: pointer; margin-right: 5px; text-align: center; display: inline-block; background: rgba(114,192,44,0.8); } .portfolio-box-v2 .portfolio-box-v2-in i:hover { background: #72c02c; } /*Thumbnail v1 ------------------------------------*/ .thumbnails-v1 .thumbnail-img { margin-bottom: 12px; } .thumbnails-v1 h3 { margin-bottom: 5px; } .thumbnails-v1 h3 a { color: #555; font-size: 15px; text-transform: uppercase; } .thumbnails-v1 .read-more { color: #72c02c; font-size: 12px; text-transform: uppercase; } /*Image Backgrounds v1 ------------------------------------*/ .bg-image-v1 { width: 100%; height: auto; padding: 50px 0; position: relative; background: url(../img/bg/11.jpg) repeat fixed; } .bg-image-v1:before { top: 0; left: 0; width: 100%; height: 100%; content: " "; position: absolute; background: rgba(0,0,0,0.5); } /*Image Backgrounds v2 ------------------------------------*/ .bg-image-v2 { width: 100%; height: auto; padding: 50px 0; position: relative; background: url(../img/bg/15.jpg) repeat fixed; } .bg-image-v2:before { top: 0; left: 0; width: 100%; height: 100%; content: " "; position: absolute; background: rgba(255,255,255,0.6); } /*Parallax Backgrounds ------------------------------------*/ /*Parallax Counter Block*/ .parallax-counter { padding: 30px 0; background: url(../img/patterns/5.png) repeat fixed; } .parallax-counter .counters { color: #fff; padding: 15px 0; } .parallax-counter h4 { color: #999; font-size: 16px; text-transform: uppercase; } .parallax-counter span.counter { font-size: 48px; } /*Parallax Team*/ .parallax-team { background: url(../img/team/faces.jpg) 50% 0 repeat fixed; } .parallax-team, .parallax-team .title-box-v2 { position: relative; } .parallax-team:before { top: 0; left: 0; width: 100%; height: 100%; content: " "; position: absolute; background: rgba(255,255,255,0.9); } /*Parallax Quote*/ .parallax-quote { color: #fff; padding: 100px 0; position: relative; text-align: center; background: url(../img/contents/faces.jpg) 50% 0 repeat fixed; } .parallax-quote:after { top: 0; left: 0; width: 100%; height: 100%; content: " "; position: absolute; background: rgba(0,0,0,0.8); } .parallax-quote:before { top: 0; left: 0; width: 100%; height: 100%; content: " "; position: absolute; background: url(../img/patterns/gridtile.png) repeat; } .parallax-quote-in { z-index: 1; padding: 0 80px; position: relative; } .parallax-quote-in p { color: #fff; font-size: 28px; text-transform: uppercase; font-family: 'Open Sans', sans-serif; } .parallax-quote-in p:after, .parallax-quote-in p:before { content: ' " '; position: absolute; font-family: Tahoma; } .parallax-quote-in p:after { margin-left: 3px; } .parallax-quote-in p:before { margin-left: -15px; } .parallax-quote-in small { color: #bbb; font-size: 13px; font-weight: 400; text-transform: uppercase; } @media (max-width: 768px){ .parallax-quote-in { padding: 0 40px; } .parallax-quote-in p { font-size: 20px; } } /*Flat Background Block ------------------------------------*/ .flat-bg-block-v1 { padding: 40px 0; background: url(../img/patterns/16.png) repeat; } .flat-bg-block-v1 .checked-list.first-child { float: left; margin-right: 100px; } .flat-bg-block-v1 .checked-list li { color: #888; margin-bottom: 5px; } .flat-bg-block-v1 .checked-list i { color: #72c02c; margin-right: 5px; } /*Image Over*/ .flat-bg-block-v1 img.img-over { top: -70px; right: 10px; position: absolute; } @media (min-width: 991px) and (max-width: 1199px) { .flat-bg-block-v1 img.img-over { top: -18px; } } @media (max-width: 991px) { .flat-bg-block-v1 img.img-over { position: static; } } /*Flat Testimonials ------------------------------------*/ .flat-testimonials { padding: 50px 0; background-color: #333; } .flat-testimonials .flat-testimonials-in { padding: 30px; text-align: center; background: rgba(255,255,255,0.2); } .flat-testimonials .flat-testimonials-in img { width: 135px; height: 135px; margin: 0 auto 25px; } .flat-testimonials .flat-testimonials-in h3 { color: #fff; font-size: 22px; font-weight: 200; } .flat-testimonials .flat-testimonials-in span { display: block; margin-bottom: 5px; } .flat-testimonials .flat-testimonials-in p { color: #fff; font-weight: 200; position: relative; } .flat-testimonials .flat-testimonials-in p:before, .flat-testimonials .flat-testimonials-in p:after { top: 5px; font-size: 22px; line-height: 10px; position: relative; } .flat-testimonials .flat-testimonials-in p:before { content: "“"; padding-right: 5px; } .flat-testimonials .flat-testimonials-in p:after { content: "”"; padding-left: 5px; }