"portfolio"
Bootstrap 3.3.0 Snippet by xrozix

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="tf-portfolio" class="content-area layout-two"> <div class="container"> <div class="row nomargin"> <div class="col-md-4 nopadding"> <a href="#inline-1" data-gal="prettyPhoto[pp_gal]"> <div class="portfolio-item"> <div class="hover-bg"> <div class="border"> <div class="hover-txt"> <i class="ion-ios-plus-empty"></i> <h4>Luka Mockup Design</h4> <span>Photoshop</span> </div> </div> </div> <img src="https://bufiles.blob.core.windows.net/co3521/paralax/marinsparty_paralax1.jpg" class="img-responsive" alt="..."> </div> </a> <a href="#inline-4" data-gal="prettyPhoto[pp_gal]"> <div class="portfolio-item"> <div class="hover-bg"> <div class="border"> <div class="hover-txt"> <i class="ion-ios-plus-empty"></i> <h4>Branding Design</h4> <span>AI</span> / <span>Illustrator</span> </div> </div> </div> <img src="http://ilmosys.com/html/luka/assets/img/portfolio/p02.jpg" class="img-responsive" alt="..."> </div> </a> <a href="#inline-10" data-gal="prettyPhoto[pp_gal]"> <div class="portfolio-item"> <div class="hover-bg"> <div class="border"> <div class="hover-txt"> <i class="ion-ios-plus-empty"></i> <h4>Luka Mockup Design</h4> <span>Photoshop</span> </div> </div> </div> <img src="assets/img/portfolio/10.jpg" class="img-responsive" alt="..."> </div> </a> </div> <div class="col-md-4 nopadding"> <a href="#inline-11" data-gal="prettyPhoto[pp_gal]"> <div class="portfolio-item"> <div class="hover-bg"> <div class="border"> <div class="hover-txt"> <i class="ion-ios-plus-empty"></i> <h4>Photography</h4> <span>Photos</span> / <span>Digital</span> </div> </div> </div> <img src="http://ilmosys.com/html/luka/assets/img/portfolio/11.jpg" class="img-responsive" alt="..."> </div> </a> <a href="#inline-10" data-gal="prettyPhoto[pp_gal]"> <div class="portfolio-item"> <div class="hover-bg"> <div class="border"> <div class="hover-txt"> <i class="ion-ios-plus-empty"></i> <h4>Luka Mockup Design</h4> <span>Photoshop</span> </div> </div> </div> <img src="http://ilmosys.com/html/luka/assets/img/portfolio/p02.jpg" class="img-responsive" alt="..."> </div> </a> <a href="#inline-3" data-gal="prettyPhoto[pp_gal]"> <div class="portfolio-item"> <div class="hover-bg"> <div class="border"> <div class="hover-txt"> <i class="ion-ios-plus-empty"></i> <h4>WordPress Themes</h4> <span>Web Design</span> </div> </div> </div> <img src="assets/img/portfolio/03.jpg" class="img-responsive" alt="..."> </div> </a> </div> <div class="col-md-4 nopadding"> <a href="#inline-3" data-gal="prettyPhoto[pp_gal]"> <div class="portfolio-item"> <div class="hover-bg"> <div class="border"> <div class="hover-txt"> <i class="ion-ios-plus-empty"></i> <h4>WordPress Themes</h4> <span>Web Design</span> </div> </div> </div> <img src="assets/img/portfolio/03.jpg" class="img-responsive" alt="..."> </div> </a> <a href="#inline-6" data-gal="prettyPhoto[pp_gal]"> <div class="portfolio-item"> <div class="hover-bg"> <div class="border"> <div class="hover-txt"> <i class="ion-ios-plus-empty"></i> <h4>Photography</h4> <span>Photos</span> / <span>Digital</span> </div> </div> </div> <img src="assets/img/portfolio/06.jpg" class="img-responsive" alt="..."> </div> </a> <a href="#inline-11" data-gal="prettyPhoto[pp_gal]"> <div class="portfolio-item"> <div class="hover-bg"> <div class="border"> <div class="hover-txt"> <i class="ion-ios-plus-empty"></i> <h4>Photography</h4> <span>Photos</span> / <span>Digital</span> </div> </div> </div> <img src="assets/img/portfolio/11.jpg" class="img-responsive" alt="..."> </div> </a> </div> </div> </div> </div>
/*===========================================*/ /* This is the Main Stylesheet for LUKA - Creative Multi-Purpose HTML Template /* Theme Author: ilmosys /* Theme URL: http://ilmosys.com/html/luka/ /* Version: 1.0 ============================================== CSS Style Structure - Imports - General - Menu/Navigation - Hero / Slider - Buttons - Page Body/Content - Sidebar - Footer Section - Single Page /*===========================================*/ /* ======================================= Imports ========================================*/ @import url(http://fonts.googleapis.com/css?family=Montserrat:400,700); @import url(http://fonts.googleapis.com/css?family=Inconsolata:400,700); @import url(http://fonts.googleapis.com/css?family=Montserrat+Alternates:400,700); @font-face { font-family: 'Montserrat Black'; src: url('../fonts/montserrat-black-webfont.eot'); src: url('../fonts/montserrat-black-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/montserrat-black-webfont.woff') format('woff'), url('../fonts/montserrat-black-webfont.svg') format('svg'); } @font-face { font-family: 'Montserrat Light'; src: url('../fonts/montserrat-light-webfont.eot'); src: url('../fonts/montserrat-light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/montserrat-light-webfont.woff') format('woff'), url('../fonts/montserrat-light-webfont.svg') format('svg'); } @font-face { font-family: 'Montserrat Bold'; src: url('../fonts/montserrat-bold-webfont.eot'); src: url('../fonts/montserrat-bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/montserrat-bold-webfont.woff') format('woff'), url('../fonts/montserrat-bold-webfont.svg') format('svg'); } @font-face { font-family: 'Inconsolata'; src: url('../fonts/inconsolata-webfont.eot'); src: url('../fonts/inconsolata-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/inconsolata-webfont.woff') format('woff'), url('../fonts/inconsolata-webfont.svg') format('svg'); } /* ======================================= General ========================================*/ html{ background-color: #F1F1F1;} body { -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale; overflow-y: auto; overflow-x: hidden; font-family: 'Inconsolata'; color: #757575; background-color: #F1F1F1; padding-top: 90px; } @media (min-width: 1200px) { .container { width: 1200px; } } h1, h2, h3{ font-family: 'Montserrat Black', sans-serif; letter-spacing: 2px; color: #000000; } h1{ font-size: 40px; font-weight: 800; } h2{ font-size: 36px; font-weight: 800; } h3 { font-size: 30px; font-weight: 500; margin-bottom: 40px; } h4{ font-family: 'Montserrat Bold', sans-serif; font-size: 18px; line-height: 26px; color: #000000; letter-spacing: 1px; } h5 { font-family: 'Montserrat Bold', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 1px; color: #000000; margin-bottom: 20px; } a { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; color: inherit; } a:hover, a:focus, a.active { color: #757575; text-decoration: none; } a:focus { outline: none; outline: none; outline-offset: 0; } p { font-family: 'Inconsolata'; margin-bottom: 30px; line-height: 24px; letter-spacing: 1px; } .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-block } * html .clearfix { height: 1% } .nopadding { padding: 0 } .nopaddingleft { padding-left: 0; margin-left: -20px; } .nomargin { margin: 0 } .highlight{ color: #A4A4A4} .spacer{ padding-top: 100px} .midspacer{ padding-top: 50px} span.lighter{ font-family: 'Montserrat Light'; font-weight: 100; } /* Navigation ========================*/ a.navbar-brand.logo { font-family: 'Montserrat Black', sans-serif; font-weight: 900; font-size: 30px; font-weight: bolder; letter-spacing: 1px; text-transform: uppercase; color: #000000; margin-left: 10px; } #tf-menu { padding: 0; background: transparent; border: 0; border-radius: 0; height: 90px; overflow: hidden; margin-bottom: 0; } #tf-menu-wide { padding: 0; border: 0; border-radius: 0; height: 90px; overflow: hidden; margin-bottom: 0; } #tf-menu-wide{ background: -moz-linear-gradient(left, #ffffff 0%, #ffffff 50%, #000000 50%, #000000 100%); background: -webkit-linear-gradient(left, #ffffff 0%,#ffffff 50%,#000000 50%,#000000 100%); background: linear-gradient(to right, #ffffff 0%,#ffffff 50%,#000000 50%,#000000 100%); } .navbrand-holder{ } .navbar-header { padding: 20px 25px; } .menu-wrapper { position: relative; background-color: #fff !important; display:inline-block; width: 100%; } a.menu-toggle { font-family: 'Montserrat', sans-serif; font-size: 14px; text-transform: uppercase; font-weight: 900; letter-spacing: 3px; width: 50%; background-color: #000000; display: inline-block; color: #ffffff; float: right; text-align: right; height: 100%; padding: 53px 40px 60px; margin: -20px 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .menu-pop > i.fa { margin-left: 10px !important; } /* Modal Popup Styles ===========================================*/ .modal-open { overflow: auto; padding-right: 0 !important; } #menuTwo .modal, #menuOne .modal{ -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateY(-350px); -moz-transform: translateY(-350px); -ms-transform: translateY(-350px); -o-transform: translateY(-350px); transform: translateY(-350px); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } #menuTwo .modal.fade.in, #menuOne .modal.fade.in { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } #menuOne .modal-ovelay{ position: fixed; background-color: #000000; opacity: 1 !important; width: 50%; margin-right: 0; top: 0; bottom: 0; left: auto; right: 0; } .fade, .modal, .fade.in { opacity: 1; background-color: transparent; } ul.menu-lists li { position: relative; font-family: 'Montserrat', sans-serif; text-transform: uppercase; font-size: 18px; font-weight: 900; line-height: 50px; letter-spacing: 2px; color: #FFFFFF; text-align: right; } ul.menu-lists li.active > a{ color: #757575} ul.menu-lists { position: absolute; top: 30%; left: 10%; } .close-text { font-family: 'Montserrat', sans-serif; text-transform: uppercase; font-weight: 900; font-size: 14px; cursor: pointer; line-height: 55px; letter-spacing: 1px; position: absolute; right: 30px; top: 30px; color: #ffffff; } /* Footer Style */ #tf-footer { background-color: #ffffff; padding: 80px 40px 60px; } #tf-footer ul li{ margin-top: 8px; margin-bottom: 8px; } #tf-footer ul.social-media{padding: 20px 0} ul.social-media > li >a >i.fa { padding: 13px; background-color: #000000; color: #ffffff; width: 40px; height: 40px; text-align: center; } ul.social-media > li >a >i.fa:hover{background: rgba(0, 0, 0, 0.69)} /* Portfolio ===========================================*/ .content-area{ padding: 6% 0; } .portfolio-item { position: relative; width: 100%; height: 100%; overflow: hidden; display: block; margin-bottom: 30px; } .portfolio-item h4 { font-weight: 900; text-transform: uppercase; font-size: 18px; letter-spacing: 1px; color: #ffffff; } .portfolio-item span{ text-transform: uppercase; letter-spacing: 2px; font-weight: 100; } .hover-bg { position: absolute; background-color: rgba(0, 0, 0, 0.3); width: 100%; height: 100%; opacity: 0; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .hover-txt { padding: 30px 30px 40px 30px; position: absolute; bottom: 0; color: #ffffff; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; -webkit-transform: translateY(-100px); -moz-transform: translateY(-100px); -ms-transform: translateY(-100px); -o-transform: translateY(-100px); transform: translateY(-100px); } .portfolio-item:hover .hover-bg{ opacity: 1; } .portfolio-item:hover .hover-bg .hover-txt{ -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } /* prettyPhoto .pp_pic_holder { } div.pp_default .pp_content, div.light_rounded .pp_content { background-color: #fff; height: auto !important; display: inline-block; padding-bottom: 30px; }*/ .pp_pic_holder { height: 100%; background: #ffffff; } .pp_pic_holder img{ border: 1px solid #000000;} .pp_inline p{letter-spacing: 1px;} .pp_inline h4{ font-family: 'Montserrat Bold', sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; margin-top: 40px; } .pp_top, .pp_bottom{ height: 0} .pp_pic_holder.light_rounded { width: auto !important; } .pp_content_container .pp_left { padding-left: 0; } .pp_content_container .pp_right { padding-right: 0; } .pp_inline h4, .pp_inline p { padding: 0 40px; } .prettyphoto-controls{ margin-top: -2px;} .prettyphoto-controls span{ background-color: #000000; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .prettyphoto-controls span:hover{ background-color: #363636; cursor: pointer; } span.p-next, span.p-prev { font-size: 18px; display: inline-block; color: #ffffff; width: 33.33333%; padding: 20px 0; height: 55px; text-align: center; } span.p-close { display: inline-block; color: #ffffff; width: 33.335%; padding: 23px 0; text-align: center; margin: 0 -7px; height: 55px; font-family: 'Montserrat', sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; } /* Buttons =======================*/ .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus { outline: none; outline: none; outline-offset: none; } .tf-btn { background-color: #000000; color: #ffffff; border: 0; border-radius: 0; padding: 15px 40px; letter-spacing: 2px; text-transform: uppercase; } .tf-btn:hover { color: #ffffff !important} .tf-btn:hover{ background: #363636; border-radius: 10px; } /* Page Title and Section =========================*/ #tf-page-header{ background: url('../../assets/img/bg01.jpg'); background-position: center !important; background-attachment: fixed !important; background-repeat: no-repeat !important; background-size: cover !important; } .section-header{ background: url('../../assets/img/bg02.jpg'); background-position: center !important; background-attachment: fixed !important; background-repeat: no-repeat !important; background-size: cover !important; } .section-header .overlay, #tf-page-header .overlay { background: rgba(0, 0, 0, 0.25); padding: 6% 5%; color: #ffffff; } .title h2{ font-family: 'Montserrat Black'; font-size: 40px; text-transform: uppercase; letter-spacing: 4px; color: #ffffff !important; } .title { padding-right: 60px; vertical-align: middle; clear: both; } .page-detail { position: relative; } .page-detail p { padding: 20px 0px 20px 80px; letter-spacing: 1px; } .vertical-line { position: absolute; height: 50px; left: 40px; top: 40px; border-left: 3px solid #ffffff; } /* About Page =========================*/ #tf-about.content-area { background: #ffffff; padding: 8% 3%; } /* Team Section */ #tf-team{ padding: 5%; background: #ffffff; } .team { position: relative; overflow: hidden; padding: 5px; text-align: center; margin-bottom: 30px; } .team hr { border-color: #000000; border-width: 4px; width: 60px; } .team h4{ font-family: 'Montserrat Bold'; color: #000000; letter-spacing: 1px; } .img-hover { position: relative; } .img-hover > img{ -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .img-hover ul.social-media { position: absolute; left: 0; top: 40%; width: 90%; margin: auto; right: 0; padding: 20px; background-color: #ffffff; opacity: 0; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .team:hover ul.social-media { opacity: 1; } .img-hover:hover > img{ margin-top: -10px; } /* Services Area */ #tf-services{ padding: 4% 0 2% 0} .service{ margin-bottom: 30px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .service:hover{ -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } .service .media-left { vertical-align: middle; } .service .media-left i { background-color: #000000; width: 110px; height: 110px; padding: 20px; text-align: center; font-size: 50px; color: #ffffff; display: block; } .service .media-body{ padding-left: 15px} .service .media-body h4{ margin-top: 50px; } /* Testimonial */ #tf-testimonials{ background: #ffffff; margin-bottom: 80px; overflow: hidden; height: 350px; } #testimony .item{ display: block; width: 100%; height: auto; padding: 40px; color: #000000; } #tf-testimonials i.ion-social-twitch-outline { position: relative; font-size: 40px; color: #000000; left: 40px; top: 30px; display: inline-block; padding-bottom: 10px; } .img-wrap, .text-wrap { display: inline-table; text-align: right; } .client-info p{ margin-top: -10px;} .client-info { float: right; clear: both; } .owl-theme .owl-controls .owl-page span { display: block; width: 12px; height: 12px; margin: 5px 7px; filter: Alpha(Opacity=50); opacity: 1; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 0; background: #000000; } .owl-theme .owl-controls .owl-page.active span { width: 10px !important; height: 10px !important; margin: 6px; } .owl-pagination { position: absolute; bottom: 0px; left: 40px; } /* Work Page ==================== */ #tf-page-header.work-page{ background: url('../../assets/img/bg03.jpg') } ul.cat-list { margin-bottom: 70px; } ul.cat-list li > a { font-family: 'Montserrat Bold', sans-serif; text-transform: uppercase; background-color: #ffffff; padding: 15px 30px; color: #000000; letter-spacing: 1px; } ul.cat-list li.active > a, ul.cat-list li > a:hover{ background: #000000; color: #ffffff; } /* Service Page ==================== */ #tf-page-header.service-page{background: url('../../assets/img/bg04.jpg');} #tf-services-list{ padding: 5% 5% 3% 5%; background: #ffffff } .service-list{ text-align: center; padding: 30px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .service-list:hover{ margin-top: -10px } .icon-block { position: relative; margin-bottom: 20px; } .icon-block i.icon { position: absolute; font-size: 35px; left: 45%; top: 32%; color: #ffffff; z-index: 10; } .icon-block i.icon:before { position: absolute; z-index: 10; } .icon-block i:after { content: ' '; width: 101px; height: 101px; background-color: #000000; position: absolute; border-radius: 50%; top: -33px; left: -37.5px; opacity: 0; z-index: 9; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); } .service-list:hover> .icon-block i:after{ opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /* Pricing Section */ #tf-pricing{ padding: 8% 0; } .section-header.pricing{ background: url('../../assets/img/bg05.jpg'); } .price { text-align: center; background-color: #ffffff; position: relative; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .price:hover{ margin-top: -10px;} .price h5 { padding: 15px; margin: 0; } .price:hover .cost h1 { letter-spacing: 4px;} .cost{ position: relative;} .cost h1 { font-size: 45px; letter-spacing: 2px; position: absolute; left: 0; right: 0; top: 25%; color: #ffffff; } ul.lists-block{ margin: 15px 0;} ul.lists-block li { text-transform: uppercase; letter-spacing: 1px; color: #000000; padding: 15px; } .btn-pricing { font-family: 'Montserrat Bold', sans-serif; text-transform: uppercase; background-color: #ffffff; border-radius: 0; border: 1px solid #000000; color: #000000; letter-spacing: 1px; padding: 10px 30px; position: relative; z-index: 2; } .price-button:after { position: absolute; content: ' '; padding: 10px; border-top: 1px solid #000000; width: 100%; left: 0; top: 22px; z-index: 1; } .price-button{ position: relative; bottom: -20px; } .price:hover .btn-pricing{ letter-spacing: 2px; border-top: 0; border-bottom: 0; background: #ffffff; color: #000000; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } /* Client Logos */ #tf-clients{ background: #000000; padding: 5% 0; margin-bottom: 80px; } ul.client-logos{ text-align: center;} ul.client-logos li{ margin: 40px 60px;} /* Blog Page =========================*/ .post-block { position: relative; overflow: hidden; } .post-detail { position: absolute; padding: 40px 50px; color: #ffffff; } .post-detail h4{ font-family: 'Montserrat Black', sans-serif; text-transform: uppercase; letter-spacing: 1px; color: #ffffff } .post-detail span.metas{ font-family: 'Inconsolata'; font-weight: 800; font-style: italic; line-height: 24px; } .page-control a, .post-block .post-detail span.metas, .post-block .post-detail h4, .post-block .post-detail, .post-block .post-detail p{ -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .post-block .post-detail { -webkit-transform: translateY(80px); -moz-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); -transform: translateY(80px); } .post-block:hover .post-detail{ -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); -transform: translateY(20px); } .post-block .post-detail p{ opacity: 0;} .post-block:hover .post-detail p{ opacity: 1} .post-block:hover .post-detail h4{ letter-spacing: 2px;} .post-block:hover .post-detail span.metas { line-height: 40px; letter-spacing: 1px; } /* pagination */ #tf-pagination{ padding-top: 70px; } .page-control a { font-family: 'Montserrat Bold', sans-serif; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: #ffffff; background-color: #000000; padding: 25px 30px; width: 33.33%; display: inline-block; text-align: center; margin: 0; } .page-control a:hover{ background-color: #ffffff; color: #000000; } a.back-control { margin: 0 -7px; background: transparent; color: #000000; } /* Blog Single Page ===================*/ #tf-blog-single p{ color: #000000; } h3.title{ text-transform: capitalize;} span.share-label { line-height: 15px; letter-spacing: 2px; color: #000000; font-family: 'Montserrat Bold'; text-transform: uppercase; background-color: #ffffff; padding: 11px 20px; margin-right: 80px; } .post-slider-img{ margin-bottom: 60px; } .post-slider-img .item img{ display: block; width: 100%; height: auto; } .post-slider-img.owl-theme .owl-controls .owl-page span { display: block; width: 14px; height: 14px; margin: 5px 7px; filter: Alpha(Opacity=50); opacity: 1; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 50%; background: #FFFFFF; } .post-slider-img.owl-theme .owl-controls .owl-page.active span { width: 14px !important; height: 14px !important; border: 3px solid #ffffff; background-color: #000000; } .post-slider-img .owl-pagination { position: absolute; bottom: 20px; left: 0; right: 0; } .share-post { margin: 80px 0 60px; } .post-pagination { position:relative; color: #000000; font-family: 'Montserrat Bold'; text-transform: uppercase; background-color: #ffffff; padding: 4%; } .old-post-btn { float: right; margin-right: 60px; } .prev-post-btn { margin-left: 60px; } span.divider-line { height: 55px; border-left: 1px solid #7B7B7B; position: absolute; left: 50%; top: 15px; } /* Contact Page ==================*/ #tf-contact-info{ background: #ffffff; padding: 6% 3%; } .contact-info .media-left{ vertical-align: middle;} .contact-info i { vertical-align: middle; font-size: 40px; color: #000000; } .contact-info p { font-size: 16px; font-weight: 500; color: #000000; margin-bottom: 0; margin-left: 20px; } /* Contact Form and Map */ .contact-form{ padding: 6% 0; } #contact-form textarea.form-control, #contact-form input.form-control { font-family: 'Montserrat Bold'; color: #000000; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; border: 0; background-color: transparent; -webkit-box-shadow: none; box-shadow: none; } #contact-form textarea.form-control, #contact-form input.form-control.luka-btn, .luka-btn{ border-bottom: 2px solid #7B7B7B !important; border-radius: 0; padding: 10px 0; height: 90px; } .form-btn { margin-top: 40px; font-family: 'Montserrat Bold'; color: #000000; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; padding: 15px 30px; border: 0; border-radius: 0; } .form-btn:hover, .form-btn:focus{ background: #000000; color: #ffffff; } ::-webkit-input-placeholder { color: #000000 !important; } :-moz-placeholder { color: #000000 !important; }/* Firefox 18- */ ::-moz-placeholder { color: #000000 !important; }/* Firefox 19+ */ :-ms-input-placeholder { color: #000000 !important;} .help-block ul { display: block; margin-top: 5px; margin-bottom: 10px; color: #a94442; list-style-type: none; padding: 0; } /* Layout Two ====================*/ /* Menu Style Two */ .layout-two a.menu-toggle { background-color: #ffffff; color: #000000; } #menuTwo .fade, #menuTwo .modal, #menuTwo .fade.in { opacity: 1; background-color: rgb(255, 255, 255); } #menuTwo ul.menu-lists li { color: #000000; margin: 0 15px; } #menuTwo ul.menu-lists { position: inherit; text-align: center; } #menuTwo .close-text { font-family: 'Montserrat Bold'; text-transform: uppercase; font-size: 14px; cursor: pointer; line-height: 35px; letter-spacing: 1px; position: relative; left: 45%; top: 0; text-align: center; color: #ffffff; background-color: #000000; display: inline-block; padding: 0px 30px; margin: 2% 0 19% 0; } #menuTwo .close-text:hover{ background: rgba(0, 0, 0, 0.69) } /* Index Style Two - Box Portfolio */ .layout-two .portfolio-item{ margin: 0; } .layout-two .portfolio-item i{ font-size: 60px; } .layout-two .hover-txt{ text-align: center; padding: 25% 0; position: inherit; } .layout-two .hover-bg{ padding: 20px;} .border { border: 4px solid #F0EBEB; display: block; height: 100%; width: 100%; } .layout-two .hover-txt, .layout-two .hover-txt h4, .layout-two .hover-txt span{ -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; -webkit-transform: translateY(-100px); -moz-transform: translateY(-100px); -ms-transform: translateY(-100px); -o-transform: translateY(-100px); transform: translateY(-100px); } .layout-two .hover-txt:hover, .layout-two .hover-txt:hover h4, .layout-two .hover-txt:hover span{ -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); }

Related: See More


Questions / Comments: