<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);
}
