Difference between revisions of "Template:Hangzhou-H14Z/css/style"
| Line 1: | Line 1: | ||
| − | @import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic); | + | @import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic); |
body, | body, | ||
html { | html { | ||
| − | -webkit-font-smoothing: antialiased !important; | + | -webkit-font-smoothing: antialiased !important; |
| − | -moz-osx-font-smoothing: grayscale; | + | -moz-osx-font-smoothing: grayscale; |
| − | overflow-y: auto; | + | overflow-y: auto; |
| − | overflow-x: hidden; | + | overflow-x: hidden; |
| − | font-family: 'Lato', sans-serif; | + | font-family: 'Lato', sans-serif; |
| − | color: #6f6f6f;!important | + | color: #6f6f6f; |
| − | } | + | !important} |
| − | ::-webkit-scrollbar { width: 2px;!important }/* for vertical scrollbars */ | + | ::-webkit-scrollbar { width: 2px; !important}/* for vertical scrollbars */ |
| − | ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1);!important } | + | ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); !important} |
| − | ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.5);!important } | + | ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.5); !important} |
@media (min-width: 1200px) { | @media (min-width: 1200px) { | ||
| − | .container { width: 1100px } | + | .container { width: 1100px !important} |
| − | } | + | !important} |
h1 { | h1 { | ||
| − | font-weight: 900; | + | font-weight: 900; |
| − | text-transform: uppercase; | + | text-transform: uppercase; |
| − | font-family: adele; | + | font-family: adele; |
| − | font-size: 57px;!important | + | font-size: 57px; |
| − | } | + | !important} |
| − | h1 small { text-transform: lowercase } | + | h1 small { text-transform: lowercase !important} |
h2 { | h2 { | ||
| − | line-height: 24px; | + | line-height: 24px; |
| − | font-weight: 300;!important | + | font-weight: 300; |
| − | } | + | !important} |
h5 { | h5 { | ||
| − | font-size: 16px;!important | + | font-size: 16px; |
| − | } | + | !important} |
h10 { | h10 { | ||
| − | font-family: adele; | + | font-family: adele; |
| − | font-size: 25px; | + | font-size: 25px; |
| − | color: #00BAB9;!important | + | color: #00BAB9; |
| − | } | + | !important} |
h11 { | h11 { | ||
| − | font-size:10px;!important | + | font-size:10px; |
| − | } | + | !important} |
| − | p { font-size: 14px } | + | p { font-size: 14px !important} |
a { | a { | ||
| − | color: inherit; | + | color: inherit; |
| − | transition: all 0.5s;!important | + | transition: all 0.5s; |
| − | } | + | !important} |
a:hover, | a:hover, | ||
a:focus { | a:focus { | ||
| − | text-decoration: none; | + | text-decoration: none; |
| − | color: #00BAB9;!important | + | color: #00BAB9; |
| − | } | + | !important} |
| − | .highlight { color: #00BAB9 } | + | .highlight { color: #00BAB9 !important} |
.clearfix:after { | .clearfix:after { | ||
| − | visibility: hidden; | + | visibility: hidden; |
| − | display: block; | + | display: block; |
| − | font-size: 0; | + | font-size: 0; |
| − | content: " "; | + | content: " "; |
| − | clear: both; | + | clear: both; |
| − | height: 0;!important | + | height: 0; |
| − | } | + | !important} |
| − | .clearfix { display: inline-block } | + | .clearfix { display: inline-block !important} |
| − | * html .clearfix { height: 1% } | + | * html .clearfix { height: 1% !important} |
| − | .clearfix { display: block } | + | .clearfix { display: block !important} |
/* Navigation */ | /* Navigation */ | ||
#tf-menu { | #tf-menu { | ||
| − | margin-bottom: 0; | + | margin-bottom: 0; |
| − | background-color: #ffffff; | + | background-color: #ffffff; |
| − | padding: 10px 0; | + | padding: 10px 0; |
| − | height: auto;!important | + | height: auto; |
| − | } | + | !important} |
.navbar-brand img { | .navbar-brand img { | ||
| − | height: 30px; | + | height: 30px; |
| − | width: auto;!important | + | width: auto; |
| − | } | + | !important} |
| − | .navbar-brand { padding: 12px 15px } | + | .navbar-brand { padding: 12px 15px !important} |
.navbar-nav > li > a { | .navbar-nav > li > a { | ||
| − | font-size: 13px; | + | font-size: 13px; |
| − | font-weight: 700; | + | font-weight: 700; |
| − | border-bottom: 2px solid transparent; | + | border-bottom: 2px solid transparent; |
| − | padding: 5px 5px; | + | padding: 5px 5px; |
| − | margin: 8px 10px; | + | margin: 8px 10px; |
| − | text-transform: uppercase; | + | text-transform: uppercase; |
| − | transition: all 0.5s;!important | + | transition: all 0.5s; |
| − | } | + | !important} |
.navbar-default .navbar-nav > li > a.active, | .navbar-default .navbar-nav > li > a.active, | ||
.navbar-default .navbar-nav > li > a:hover, | .navbar-default .navbar-nav > li > a:hover, | ||
.navbar-default .navbar-nav > li > a:focus { | .navbar-default .navbar-nav > li > a:focus { | ||
| − | color: #333; | + | color: #333; |
| − | border-bottom: 4px solid #00BAB9;!important | + | border-bottom: 4px solid #00BAB9; |
| − | } | + | !important} |
| − | .navbar-default .navbar-toggle { border-color: transparent } | + | .navbar-default .navbar-toggle { border-color: transparent !important} |
.navbar-default .navbar-toggle:hover, | .navbar-default .navbar-toggle:hover, | ||
| − | .navbar-default .navbar-toggle:focus { background-color: transparent } | + | .navbar-default .navbar-toggle:focus { background-color: transparent !important} |
.navbar-default .navbar-toggle:hover>.navbar-default .navbar-toggle .icon-bar, | .navbar-default .navbar-toggle:hover>.navbar-default .navbar-toggle .icon-bar, | ||
| − | .navbar-default .navbar-toggle:focus>.navbar-default .navbar-toggle .icon-bar { color: #00BAB9 } | + | .navbar-default .navbar-toggle:focus>.navbar-default .navbar-toggle .icon-bar { color: #00BAB9 !important} |
/* Header Page */ | /* Header Page */ | ||
#tf-header { | #tf-header { | ||
| − | padding: 20px 0; | + | padding: 20px 0; |
| − | background: #00bab9; | + | background: #00bab9; |
| − | margin-top: 70px; | + | margin-top: 70px; |
| − | color: #ffffff;!important | + | color: #ffffff; |
| − | } | + | !important} |
#tf-header .breadcrumb { | #tf-header .breadcrumb { | ||
| − | padding: 8px 15px; | + | padding: 8px 15px; |
| − | margin-bottom: 20px; | + | margin-bottom: 20px; |
| − | list-style: none; | + | list-style: none; |
| − | background-color: transparent; | + | background-color: transparent; |
| − | border-radius: 4px; | + | border-radius: 4px; |
| − | margin-left: -10px; | + | margin-left: -10px; |
| − | margin-top: -10px;!important | + | margin-top: -10px; |
| − | } | + | !important} |
#tf-header .breadcrumb > li + li:before { | #tf-header .breadcrumb > li + li:before { | ||
| − | padding: 0 5px; | + | padding: 0 5px; |
| − | color: #FFF; | + | color: #FFF; |
| − | content: "/\00a0";!important | + | content: "/\00a0"; |
| − | } | + | !important} |
| − | #tf-header .breadcrumb > li a { color: #ffffff } | + | #tf-header .breadcrumb > li a { color: #ffffff !important} |
/* Home Style */ | /* Home Style */ | ||
#tf-home { | #tf-home { | ||
| − | background: url(https://static.igem.org/mediawiki/2015/6/64/H14zcmx01.jpg); | + | background: url(https://static.igem.org/mediawiki/2015/6/64/H14zcmx01.jpg); |
| − | background-size: cover; | + | background-size: cover; |
| − | background-position: center; | + | background-position: center; |
| − | background-attachment: fixed; | + | background-attachment: fixed; |
| − | background-repeat: no-repeat; | + | background-repeat: no-repeat; |
| − | color: #cfcfcf;!important | + | color: #cfcfcf; |
| − | } | + | !important} |
#tf-home .overlay { | #tf-home .overlay { | ||
| − | background: -moz-linear-gradient(top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.73) 17%, rgba(0,0,0,0.66) 35%, rgba(0,0,0,0.55) 62%, rgba(0,0,0,0.4) 100%); | + | background: -moz-linear-gradient(top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.73) 17%, rgba(0,0,0,0.66) 35%, rgba(0,0,0,0.55) 62%, rgba(0,0,0,0.4) 100%); /* FF3.6+ */ |
| − | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.8)), color-stop(17%,rgba(0,0,0,0.73)), color-stop(35%,rgba(0,0,0,0.66)), color-stop(62%,rgba(0,0,0,0.55)), color-stop(100%,rgba(0,0,0,0.4))); | + | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.8)), color-stop(17%,rgba(0,0,0,0.73)), color-stop(35%,rgba(0,0,0,0.66)), color-stop(62%,rgba(0,0,0,0.55)), color-stop(100%,rgba(0,0,0,0.4))); /* Chrome,Safari4+ */ |
| − | background: -webkit-linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); | + | background: -webkit-linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* Chrome10+,Safari5.1+ */ |
| − | background: -o-linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); | + | background: -o-linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* Opera 11.10+ */ |
| − | background: -ms-linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); | + | background: -ms-linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* IE10+ */ |
| − | background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); | + | background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* W3C */ |
| − | padding: 20% 0; | + | padding: 20% 0; |
| − | background-attachment: fixed;!important | + | background-attachment: fixed; |
| − | } | + | !important} |
#tf-home .overlay { | #tf-home .overlay { | ||
| − | } | + | !important} |
| − | #tf-home h1 { color: #0bab9b } | + | #tf-home h1 { color: #0bab9b !important} |
| − | .content-heading p.lead { margin-bottom: 80px } | + | .content-heading p.lead { margin-bottom: 80px !important} |
a.goto-btn { | a.goto-btn { | ||
| − | font-size: 18px; | + | font-size: 18px; |
| − | font-weight: 700; | + | font-weight: 700; |
| − | border-bottom: 2px solid transparent; | + | border-bottom: 2px solid transparent; |
| − | padding: 10px 0; | + | padding: 10px 0; |
| − | transition: all 0.5s;!important | + | transition: all 0.5s; |
| − | } | + | !important} |
a.goto-btn:hover { | a.goto-btn:hover { | ||
| − | color: #ffffff; | + | color: #ffffff; |
| − | border-bottom: 2px solid #00BAB9;!important | + | border-bottom: 2px solid #00BAB9; |
| − | } | + | !important} |
/* Home Section Style 2 - With Video*/ | /* Home Section Style 2 - With Video*/ | ||
#tf-home.video .overlay { | #tf-home.video .overlay { | ||
| − | padding: 0; | + | padding: 0; |
| − | padding-top: 10%;!important | + | padding-top: 10%; |
| − | } | + | !important} |
| − | .img-wrapper { position: relative } | + | .img-wrapper { position: relative !important} |
| − | .img-wrapper img.img-responsive { margin: 0 auto !important } | + | .img-wrapper img.img-responsive { margin: 0 auto !important !important} |
.img-wrapper i.fa { | .img-wrapper i.fa { | ||
| − | position: absolute; | + | position: absolute; |
| − | z-index: 10; | + | z-index: 10; |
| − | top: 50%; | + | top: 50%; |
| − | font-size: 25px; | + | font-size: 25px; |
| − | background: rgba(32, 22, 22, 0.29); | + | background: rgba(32, 22, 22, 0.29); |
| − | padding: 18px 23px; | + | padding: 18px 23px; |
| − | height: 60px; | + | height: 60px; |
| − | width: 60px; | + | width: 60px; |
| − | text-align: center; | + | text-align: center; |
| − | border-radius: 50%; | + | border-radius: 50%; |
| − | color: #ffffff; | + | color: #ffffff; |
| − | margin-left: -30px; | + | margin-left: -30px; |
| − | transition: all 0.3s;!important | + | transition: all 0.3s; |
| − | } | + | !important} |
| − | .img-wrapper i.fa:hover { background: #00BAB9 } | + | .img-wrapper i.fa:hover { background: #00BAB9 !important} |
/* Home Section Style 3 - Slider*/ | /* Home Section Style 3 - Slider*/ | ||
| − | #tf-home.slider { background: none } | + | #tf-home.slider { background: none !important} |
| − | #tf-home.slider .overlay { padding: 0 } | + | #tf-home.slider .overlay { padding: 0 !important} |
.carousel-caption { | .carousel-caption { | ||
| − | position: absolute; | + | position: absolute; |
| − | right: 15%; | + | right: 15%; |
| − | top: 28%; | + | top: 28%; |
| − | bottom: auto; | + | bottom: auto; |
| − | left: 15%; | + | left: 15%; |
| − | z-index: 10; | + | z-index: 10; |
| − | padding-top: 20px; | + | padding-top: 20px; |
| − | padding-bottom: 0; | + | padding-bottom: 0; |
| − | color: #fff; | + | color: #fff; |
| − | text-align: center; | + | text-align: center; |
| − | text-shadow: none;!important | + | text-shadow: none; |
| − | } | + | !important} |
.carousel-indicators li { | .carousel-indicators li { | ||
| − | display: inline-block; | + | display: inline-block; |
| − | width: 12px; | + | width: 12px; |
| − | height: 12px; | + | height: 12px; |
| − | margin: 1px; | + | margin: 1px; |
| − | text-indent: -999px; | + | text-indent: -999px; |
| − | cursor: pointer; | + | cursor: pointer; |
| − | background-color: rgba(0, 0, 0, 0); | + | background-color: rgba(0, 0, 0, 0); |
| − | border: 1px solid #fff; | + | border: 1px solid #fff; |
| − | border-radius: 10px;!important | + | border-radius: 10px; |
| − | } | + | !important} |
.carousel-indicators { | .carousel-indicators { | ||
| − | position: absolute; | + | position: absolute; |
| − | bottom: 60px; | + | bottom: 60px; |
| − | left: 50%; | + | left: 50%; |
| − | z-index: 15; | + | z-index: 15; |
| − | width: 60%; | + | width: 60%; |
| − | padding-left: 0; | + | padding-left: 0; |
| − | margin-left: -30%; | + | margin-left: -30%; |
| − | text-align: center; | + | text-align: center; |
| − | list-style: none;!important | + | list-style: none; |
| − | } | + | !important} |
.carousel-indicators .active { | .carousel-indicators .active { | ||
| − | width: 14px; | + | width: 14px; |
| − | height: 14px; | + | height: 14px; |
| − | margin: 0; | + | margin: 0; |
| − | background-color: #00BAB9;!important | + | background-color: #00BAB9; |
| − | } | + | !important} |
.carousel-fade .carousel-inner .item { | .carousel-fade .carousel-inner .item { | ||
| − | opacity: 0; | + | opacity: 0; |
| − | transition-property: opacity;!important | + | transition-property: opacity; |
| − | } | + | !important} |
| − | .carousel-fade .carousel-inner .active { opacity: 1 } | + | .carousel-fade .carousel-inner .active { opacity: 1 !important} |
.carousel-fade .carousel-inner .active.left, | .carousel-fade .carousel-inner .active.left, | ||
.carousel-fade .carousel-inner .active.right { | .carousel-fade .carousel-inner .active.right { | ||
| − | left: 0; | + | left: 0; |
| − | opacity: 0; | + | opacity: 0; |
| − | z-index: 1;!important | + | z-index: 1; |
| − | } | + | !important} |
.carousel-fade .carousel-inner .next.left, | .carousel-fade .carousel-inner .next.left, | ||
| − | .carousel-fade .carousel-inner .prev.right { opacity: 1 } | + | .carousel-fade .carousel-inner .prev.right { opacity: 1 !important} |
| − | .carousel-fade .carousel-control { z-index: 2 } | + | .carousel-fade .carousel-control { z-index: 2 !important} |
/* Home Section Style 4 - App Header Style*/ | /* Home Section Style 4 - App Header Style*/ | ||
| − | #tf-home.app .overlay { padding: 10% 0 5% 0 } | + | #tf-home.app .overlay { padding: 10% 0 5% 0 !important} |
#tf-home.app {background: url(../img/bg/02.jpg);!important} | #tf-home.app {background: url(../img/bg/02.jpg);!important} | ||
| − | a.goto-btn { margin-right: 30px } | + | a.goto-btn { margin-right: 30px !important} |
.ipad-wrapper .app-wrap { | .ipad-wrapper .app-wrap { | ||
| − | position: relative; | + | position: relative; |
| − | width: 395px;!important | + | width: 395px; |
| − | } | + | !important} |
.app-wrap { | .app-wrap { | ||
| − | position: absolute; | + | position: absolute; |
| − | background: url(../img/header4.png); | + | background: url(../img/header4.png); |
| − | width: 395px; | + | width: 395px; |
| − | height: 540px; | + | height: 540px; |
| − | background-repeat: no-repeat; | + | background-repeat: no-repeat; |
| − | z-index: 2; | + | z-index: 2; |
| − | left: 5%;!important | + | left: 5%; |
| − | } | + | !important} |
#owl-demo .item img { | #owl-demo .item img { | ||
| − | position: relative; | + | position: relative; |
| − | width: 305px; | + | width: 305px; |
| − | height: auto; | + | height: auto; |
| − | left: 12%; | + | left: 12%; |
| − | margin-top: 46px; | + | margin-top: 46px; |
| − | z-index: -1;!important | + | z-index: -1; |
| − | } | + | !important} |
| − | .app .content-heading.text-left { padding: 15% 0 } | + | .app .content-heading.text-left { padding: 15% 0 !important} |
#tf-home.app .owl-theme .owl-controls .owl-page span { | #tf-home.app .owl-theme .owl-controls .owl-page span { | ||
| − | width: 15px; | + | width: 15px; |
| − | height: 15px; | + | height: 15px; |
| − | margin: 5px; | + | margin: 5px; |
| − | background: #ffffff !important; | + | background: #ffffff !important; |
| − | border: 2px solid transparent; | + | border: 2px solid transparent; |
| − | opacity: 1;!important | + | opacity: 1; |
| − | } | + | !important} |
#tf-home.app .owl-theme .owl-controls { | #tf-home.app .owl-theme .owl-controls { | ||
| − | margin-top: 60px; | + | margin-top: 60px; |
| − | text-align: center;!important | + | text-align: center; |
| − | } | + | !important} |
#tf-home.app .owl-theme .owl-controls .owl-page.active span, | #tf-home.app .owl-theme .owl-controls .owl-page.active span, | ||
| − | #tf-home.app .owl-theme .owl-controls.clickable .owl-page:hover span { border: 2px solid #00BAB9 } | + | #tf-home.app .owl-theme .owl-controls.clickable .owl-page:hover span { border: 2px solid #00BAB9 !important} |
/* Home Parallax Effect */ | /* Home Parallax Effect */ | ||
.bcg { | .bcg { | ||
| − | background-position: center center; | + | background-position: center center; |
| − | background-repeat: no-repeat; | + | background-repeat: no-repeat; |
| − | background-attachment: fixed; | + | background-attachment: fixed; |
| − | background-size: cover; | + | background-size: cover; |
| − | height: 100%; | + | height: 100%; |
| − | width: 100%;!important | + | width: 100%; |
| − | } | + | !important} |
| − | #tf-home.parallax .bcg { background-image:url('../img/bg/slider03.jpg');!important } | + | #tf-home.parallax .bcg { background-image:url('../img/bg/slider03.jpg'); !important} |
.parallax .content-heading{ | .parallax .content-heading{ | ||
| − | padding: 20% 0; | + | padding: 20% 0; |
| − | text-align: center;!important | + | text-align: center; |
| − | } | + | !important} |
/* Intro Section */ | /* Intro Section */ | ||
#tf-intro { | #tf-intro { | ||
| − | background-color: #0bab9b; | + | background-color: #0bab9b; |
| − | padding: 5% 0; | + | padding: 5% 0; |
| − | color: #ffffff; | + | color: #ffffff; |
| − | text-align: center;!important | + | text-align: center; |
| − | } | + | !important} |
#tf-intro img.intro-logo { | #tf-intro img.intro-logo { | ||
| − | margin: 0 auto; | + | margin: 0 auto; |
| − | margin-bottom: 30px;!important | + | margin-bottom: 30px; |
| − | } | + | !important} |
/* Service Section */ | /* Service Section */ | ||
| − | #tf-services { padding: 60px 0 } | + | #tf-services { padding: 60px 0 !important} |
.section-header { | .section-header { | ||
| − | padding: 40px 0; | + | padding: 40px 0; |
| − | text-align: center;!important | + | text-align: center; |
| − | } | + | !important} |
| − | .section-header h2 { text-transform: uppercase } | + | .section-header h2 { text-transform: uppercase !important} |
| − | .section-header h5 { letter-spacing: 1px } | + | .section-header h5 { letter-spacing: 1px !important} |
.fancy { | .fancy { | ||
| − | line-height: 0.5; | + | line-height: 0.5; |
| − | text-align: center; | + | text-align: center; |
| − | margin-bottom: 40px; | + | margin-bottom: 40px; |
| − | margin-top: 20px;!important | + | margin-top: 20px; |
| − | } | + | !important} |
.fancy span { | .fancy span { | ||
| − | display: inline-block; | + | display: inline-block; |
| − | position: relative;!important | + | position: relative; |
| − | } | + | !important} |
.fancy span:before, | .fancy span:before, | ||
.fancy span:after { | .fancy span:after { | ||
| − | content: ""; | + | content: ""; |
| − | position: absolute; | + | position: absolute; |
| − | height: 5px; | + | height: 5px; |
| − | border-bottom: 1px solid #f1f1f1; | + | border-bottom: 1px solid #f1f1f1; |
| − | top: 15px; | + | top: 15px; |
| − | width: 400px;!important | + | width: 400px; |
| − | } | + | !important} |
.fancy span:before { | .fancy span:before { | ||
| − | right: 100%; | + | right: 100%; |
| − | margin-right: 10px;!important | + | margin-right: 10px; |
| − | } | + | !important} |
.fancy span:after { | .fancy span:after { | ||
| − | left: 100%; | + | left: 100%; |
| − | margin-left: 10px;!important | + | margin-left: 10px; |
| − | } | + | !important} |
/* service lists */ | /* service lists */ | ||
| − | .service { margin-bottom: 20px } | + | .service { margin-bottom: 20px !important} |
.service .media-right i.fa { | .service .media-right i.fa { | ||
| − | text-align: center; | + | text-align: center; |
| − | font-size: 30px; | + | font-size: 30px; |
| − | background-color: #00BAB9; | + | background-color: #00BAB9; |
| − | color: #ffffff; | + | color: #ffffff; |
| − | padding: 25px 0; | + | padding: 25px 0; |
| − | border-radius: 50px; | + | border-radius: 50px; |
| − | border-top-left-radius: 0; | + | border-top-left-radius: 0; |
| − | margin: 0 10px; | + | margin: 0 10px; |
| − | margin-right: 20px; | + | margin-right: 20px; |
| − | width: 82px; | + | width: 82px; |
| − | height: 80px; | + | height: 80px; |
| − | transition: background-color 0.5s;!important | + | transition: background-color 0.5s; |
| − | } | + | !important} |
.service .media-left i.fa { | .service .media-left i.fa { | ||
| − | text-align: center; | + | text-align: center; |
| − | font-size: 30px; | + | font-size: 30px; |
| − | background-color: #00BAB9; | + | background-color: #00BAB9; |
| − | color: #ffffff; | + | color: #ffffff; |
| − | padding: 25px 0; | + | padding: 25px 0; |
| − | border-radius: 50px; | + | border-radius: 50px; |
| − | border-top-right-radius: 0; | + | border-top-right-radius: 0; |
| − | margin: 0 10px; | + | margin: 0 10px; |
| − | margin-left: 20px; | + | margin-left: 20px; |
| − | width: 82px; | + | width: 82px; |
| − | height: 80px; | + | height: 80px; |
| − | transition: background-color 0.5s;!important | + | transition: background-color 0.5s; |
| − | } | + | !important} |
.process:hover i.fa, | .process:hover i.fa, | ||
| − | .service:hover i.fa { background-color: #333333 } | + | .service:hover i.fa { background-color: #333333 !important} |
h4.media-heading { | h4.media-heading { | ||
| − | margin-top: 0; | + | margin-top: 0; |
| − | margin-bottom: 5px; | + | margin-bottom: 5px; |
| − | font-size: 16px; | + | font-size: 16px; |
| − | font-weight: 400; | + | font-weight: 400; |
| − | text-transform: uppercase; | + | text-transform: uppercase; |
| − | color: #333; | + | color: #333; |
| − | line-height: 20px;!important | + | line-height: 20px; |
| − | } | + | !important} |
/* About Us */ | /* About Us */ | ||
| − | #tf-about { padding: 40px 0 } | + | #tf-about { padding: 40px 0 !important} |
| − | .gray-bg { background-color: #f3f3f3 } | + | .gray-bg { background-color: #f3f3f3 !important} |
.img-wrap .profile-img { | .img-wrap .profile-img { | ||
| − | position: relative; | + | position: relative; |
| − | margin-bottom: 40px;!important | + | margin-bottom: 40px; |
| − | } | + | !important} |
.profile-img .social { | .profile-img .social { | ||
| − | position: absolute; | + | position: absolute; |
| − | z-index: 1; | + | z-index: 1; |
| − | bottom: -10px; | + | bottom: -10px; |
| − | left: 50px;!important | + | left: 50px; |
| − | } | + | !important} |
| − | .about-right-content { padding: 40px 0 } | + | .about-right-content { padding: 40px 0 !important} |
| − | .about-left-content { padding-bottom: 60px } | + | .about-left-content { padding-bottom: 60px !important} |
.about-left-content h2, | .about-left-content h2, | ||
| − | .about-left-content h2 small { color: #333 } | + | .about-left-content h2 small { color: #333 !important} |
| − | .about-left-content h2 small { font-weight: 300 } | + | .about-left-content h2 small { font-weight: 300 !important} |
ul.social li a.fa { | ul.social li a.fa { | ||
| − | background: #00BAB9; | + | background: #00BAB9; |
| − | width: 50px; | + | width: 50px; |
| − | height: 50px; | + | height: 50px; |
| − | padding: 15px; | + | padding: 15px; |
| − | text-align: center; | + | text-align: center; |
| − | margin-right: -5px; | + | margin-right: -5px; |
| − | font-size: 20px; | + | font-size: 20px; |
| − | color: #ffffff; | + | color: #ffffff; |
| − | margin-bottom: 0;!important | + | margin-bottom: 0; |
| − | } | + | !important} |
| − | ul.social li a.fa:hover { background-color: #333333 } | + | ul.social li a.fa:hover { background-color: #333333 !important} |
/* Skills Progress Bar */ | /* Skills Progress Bar */ | ||
.progress { | .progress { | ||
| − | height: 12px; | + | height: 12px; |
| − | margin-bottom: 20px; | + | margin-bottom: 20px; |
| − | overflow: hidden; | + | overflow: hidden; |
| − | background-color: #999999; | + | background-color: #999999; |
| − | border-radius: 0; | + | border-radius: 0; |
| − | -webkit-box-shadow: none; | + | -webkit-box-shadow: none; |
| − | box-shadow: none;!important | + | box-shadow: none; |
| − | } | + | !important} |
.progress-bar { | .progress-bar { | ||
| − | float: left; | + | float: left; |
| − | width: 0; | + | width: 0; |
| − | height: 100%; | + | height: 100%; |
| − | font-size: 12px; | + | font-size: 12px; |
| − | line-height: 20px; | + | line-height: 20px; |
| − | color: #fff; | + | color: #fff; |
| − | text-align: center; | + | text-align: center; |
| − | background-color: #00BAB9; | + | background-color: #00BAB9; |
| − | -webkit-box-shadow: none; | + | -webkit-box-shadow: none; |
| − | box-shadow: none; | + | box-shadow: none; |
| − | -webkit-transition: width .6s ease; | + | -webkit-transition: width .6s ease; |
| − | -o-transition: width .6s ease; | + | -o-transition: width .6s ease; |
| − | transition: width .6s ease;!important | + | transition: width .6s ease; |
| − | } | + | !important} |
.skills { | .skills { | ||
| − | margin-top: 30px; | + | margin-top: 30px; |
| − | padding: 20px 0;!important | + | padding: 20px 0; |
| − | } | + | !important} |
.skillset p { | .skillset p { | ||
| − | font-size: 13px; | + | font-size: 13px; |
| − | margin-bottom: 5px;!important | + | margin-bottom: 5px; |
| − | } | + | !important} |
/* Counter */ | /* Counter */ | ||
#tf-counter { | #tf-counter { | ||
| − | border-top: 1px solid #D1D1D1; | + | border-top: 1px solid #D1D1D1; |
| − | border-bottom: 1px solid #D1D1D1;!important | + | border-bottom: 1px solid #D1D1D1; |
| − | } | + | !important} |
| − | .facts { padding: 0 } | + | .facts { padding: 0 !important} |
| − | .facts .count-box { position: relative } | + | .facts .count-box { position: relative !important} |
.count-box { | .count-box { | ||
| − | -webkit-backface-visibility: hidden; | + | -webkit-backface-visibility: hidden; |
| − | border-left: 1px solid #d3d3d3; | + | border-left: 1px solid #d3d3d3; |
| − | padding: 40px 0; | + | padding: 40px 0; |
| − | margin: 0; | + | margin: 0; |
| − | overflow: hidden; | + | overflow: hidden; |
| − | transition: all 0.5s; | + | transition: all 0.5s; |
| − | transform: translateX(0px) translateY(0%); | + | transform: translateX(0px) translateY(0%); |
| − | -webkit-transform: translateX(0px) translateY(0%); | + | -webkit-transform: translateX(0px) translateY(0%); |
| − | -moz-transform: translateX(0px) translateY(0%); | + | -moz-transform: translateX(0px) translateY(0%); |
| − | -ms-transform: translateX(0px) translateY(0%); | + | -ms-transform: translateX(0px) translateY(0%); |
| − | -o-transform: translateX(0px) translateY(0%);!important | + | -o-transform: translateX(0px) translateY(0%); |
| − | } | + | !important} |
/*.count-box .hover-bg{ | /*.count-box .hover-bg{ | ||
| − | position: absolute; | + | position: absolute; |
| − | display: block; | + | display: block; |
| − | background-color: #FFCC32; | + | background-color: #FFCC32; |
| − | width: 100%; | + | width: 100%; |
| − | height: 100%; | + | height: 100%; |
| − | z-index: -1; | + | z-index: -1; |
| − | transition: all 0.5s; | + | transition: all 0.5s; |
| − | transform: translateX(0px) translateY(150px); | + | transform: translateX(0px) translateY(150px); |
| − | -webkit-transform: translateX(0px) translateY(150px); | + | -webkit-transform: translateX(0px) translateY(150px); |
| − | -ms-transform: translateX(0px) translateY(150px); | + | -ms-transform: translateX(0px) translateY(150px); |
| − | -o-transform: translateX(0px) translateY(150px); | + | -o-transform: translateX(0px) translateY(150px); |
| − | opacity: 0;!important | + | opacity: 0; |
| − | } | + | !important} |
.count-box:hover .hover-bg{ | .count-box:hover .hover-bg{ | ||
| − | background: #FFCC32; | + | background: #FFCC32; |
| − | color: #fff !important; | + | color: #fff !important; |
| − | transform: translateX(0px) translateY(-40px); | + | transform: translateX(0px) translateY(-40px); |
| − | -webkit-transform: translateX(0px) translateY(-40px); | + | -webkit-transform: translateX(0px) translateY(-40px); |
| − | -moz-transform: translateX(0px) translateY(-40px); | + | -moz-transform: translateX(0px) translateY(-40px); |
| − | -ms-transform: translateX(0px) translateY(-40px); | + | -ms-transform: translateX(0px) translateY(-40px); |
| − | -o-transform: translateX(0px) translateY(-40px); | + | -o-transform: translateX(0px) translateY(-40px); |
| − | opacity: 1;!important | + | opacity: 1; |
| − | }*/ | + | !important}*/ |
.count-box:hover, | .count-box:hover, | ||
| − | .count-box:hover > i.fa { color: #ffffff } | + | .count-box:hover > i.fa { color: #ffffff !important} |
.count-box:hover { | .count-box:hover { | ||
| − | -webkit-backface-visibility: hidden; | + | -webkit-backface-visibility: hidden; |
| − | background-color: #00BAB9;!important | + | background-color: #00BAB9; |
| − | } | + | !important} |
.counter i.fa { | .counter i.fa { | ||
| − | font-size: 40px; | + | font-size: 40px; |
| − | color: #00BAB9;!important | + | color: #00BAB9; |
| − | } | + | !important} |
| − | .count-box.last { border-right: 1px solid #d3d3d3 } | + | .count-box.last { border-right: 1px solid #d3d3d3 !important} |
/* Portfolio / Works Sections */ | /* Portfolio / Works Sections */ | ||
| − | #tf-team { padding: 60px 0 } | + | #tf-team { padding: 60px 0 !important} |
#team .item { | #team .item { | ||
| − | padding: 30px 0px; | + | padding: 30px 0px; |
| − | margin: 5px 20px; | + | margin: 5px 20px; |
| − | -webkit-border-radius: 3px; | + | -webkit-border-radius: 3px; |
| − | -moz-border-radius: 3px; | + | -moz-border-radius: 3px; |
| − | border-radius: 3px;!important | + | border-radius: 3px; |
| − | } | + | !important} |
.item .hover-bg { | .item .hover-bg { | ||
| − | position: relative; | + | position: relative; |
| − | overflow: hidden;!important | + | overflow: hidden; |
| − | } | + | !important} |
.hover-bg .hover-text { | .hover-bg .hover-text { | ||
| − | position: absolute; | + | position: absolute; |
| − | display: block; | + | display: block; |
| − | bottom: 0; | + | bottom: 0; |
| − | width: 100%; | + | width: 100%; |
| − | height: 25%; | + | height: 25%; |
| − | padding: 20px; | + | padding: 20px; |
| − | color: #ffffff; | + | color: #ffffff; |
| − | transition: all 0.8s; | + | transition: all 0.8s; |
| − | -webkit-transition: all 08s; | + | -webkit-transition: all 08s; |
| − | -moz-transition: all 0.8s; | + | -moz-transition: all 0.8s; |
| − | -o-transition: all 0.8s;!important | + | -o-transition: all 0.8s; |
| − | } | + | !important} |
| − | .hover-bg .hover-text.on { opacity: 1 } | + | .hover-bg .hover-text.on { opacity: 1 !important} |
.hover-bg .hover-text.off { | .hover-bg .hover-text.off { | ||
| − | transition: all 0.3s; | + | transition: all 0.3s; |
| − | -webkit-transition: all 0.3s; | + | -webkit-transition: all 0.3s; |
| − | -moz-transition: all 0.3s; | + | -moz-transition: all 0.3s; |
| − | -o-transition: all 0.3s; | + | -o-transition: all 0.3s; |
| − | -webkit-transform: translateX(100%) translateY(-90%); | + | -webkit-transform: translateX(100%) translateY(-90%); |
| − | transform: translateX(100%) translateY(-90%); | + | transform: translateX(100%) translateY(-90%); |
| − | opacity: 1; | + | opacity: 1; |
| − | background: rgba(0, 0, 0, 0.70);!important | + | background: rgba(0, 0, 0, 0.70); |
| − | } | + | !important} |
.hover-bg:hover .hover-text.off { | .hover-bg:hover .hover-text.off { | ||
| − | -webkit-transform: translateX(0%) translateY(-90%); | + | -webkit-transform: translateX(0%) translateY(-90%); |
| − | transform: translateX(0%) translateY(-90%); | + | transform: translateX(0%) translateY(-90%); |
| − | opacity: 1;!important | + | opacity: 1; |
| − | } | + | !important} |
.owl-theme .owl-controls .owl-page span { | .owl-theme .owl-controls .owl-page span { | ||
| − | width: 15px; | + | width: 15px; |
| − | height: 15px; | + | height: 15px; |
| − | margin: 5px; | + | margin: 5px; |
| − | background: #bababa;!important | + | background: #bababa; |
| − | } | + | !important} |
/* Why Us or Features Section */ | /* Why Us or Features Section */ | ||
#tf-features, | #tf-features, | ||
| − | #feature { padding: 60px 0 } | + | #feature { padding: 60px 0 !important} |
| − | .features-content { padding: 0 30px 0 } | + | .features-content { padding: 0 30px 0 !important} |
.features-content h4 { | .features-content h4 { | ||
| − | text-transform: uppercase; | + | text-transform: uppercase; |
| − | margin-bottom: 20px; | + | margin-bottom: 20px; |
| − | color: #333333;!important | + | color: #333333; |
| − | } | + | !important} |
.nav.nav-pills > li > a { | .nav.nav-pills > li > a { | ||
| − | position: relative; | + | position: relative; |
| − | display: block; | + | display: block; |
| − | background-color: #ffffff; | + | background-color: #ffffff; |
| − | padding: 65px; | + | padding: 65px; |
| − | border-bottom: 3px solid #cccccc; | + | border-bottom: 3px solid #cccccc; |
| − | text-transform: uppercase; | + | text-transform: uppercase; |
| − | margin-bottom: 5px;!important | + | margin-bottom: 5px; |
| − | } | + | !important} |
.nav.nav-pills > li > a small { | .nav.nav-pills > li > a small { | ||
| − | text-transform: lowercase; | + | text-transform: lowercase; |
| − | font-style: italic;!important | + | font-style: italic; |
| − | } | + | !important} |
.nav.nav-pills > li > a:hover, | .nav.nav-pills > li > a:hover, | ||
.nav-pills > li.active > a, | .nav-pills > li.active > a, | ||
.nav-pills > li.active > a:hover, | .nav-pills > li.active > a:hover, | ||
.nav-pills > li.active > a:focus { | .nav-pills > li.active > a:focus { | ||
| − | color: #fff; | + | color: #fff; |
| − | background-color: #00BAB9; | + | background-color: #00BAB9; |
| − | padding: 25px; | + | padding: 25px; |
| − | border-bottom: 3px solid #996600;!important | + | border-bottom: 3px solid #996600; |
| − | } | + | !important} |
| − | .nav-pills > li > a { border-radius: 4px } | + | .nav-pills > li > a { border-radius: 4px !important} |
ul.features li span.fa { | ul.features li span.fa { | ||
| − | font-size: 35px; | + | font-size: 35px; |
| − | vertical-align: middle; | + | vertical-align: middle; |
| − | margin-right: 20px; | + | margin-right: 20px; |
| − | float: left; | + | float: left; |
| − | clear: both; | + | clear: both; |
| − | margin-top: 5px;!important | + | margin-top: 5px; |
| − | } | + | !important} |
/* Portfolio or works blocks */ | /* Portfolio or works blocks */ | ||
| − | #tf-works { padding: 60px 0 } | + | #tf-works { padding: 60px 0 !important} |
| − | ul.cat { margin: 30px 0 } | + | ul.cat { margin: 30px 0 !important} |
ul.cat li a { | ul.cat li a { | ||
| − | background: inherit; | + | background: inherit; |
| − | border: 1px solid; | + | border: 1px solid; |
| − | padding: 5px 10px; | + | padding: 5px 10px; |
| − | border-radius: 3px;!important | + | border-radius: 3px; |
| − | } | + | !important} |
ul.cat li a:hover, | ul.cat li a:hover, | ||
ul.cat li a:focus, | ul.cat li a:focus, | ||
ul.cat li a.active { | ul.cat li a.active { | ||
| − | background: #f1f1f1; | + | background: #f1f1f1; |
| − | border: 1px solid; | + | border: 1px solid; |
| − | padding: 5px 10px; | + | padding: 5px 10px; |
| − | border-radius: 3px; | + | border-radius: 3px; |
| − | color: inherit;!important | + | color: inherit; |
| − | } | + | !important} |
| − | .nopadding { padding: 0 } | + | .nopadding { padding: 0 !important} |
| − | .box a { margin: 2px } | + | .box a { margin: 2px !important} |
.box .hover-bg { | .box .hover-bg { | ||
| − | position: relative; | + | position: relative; |
| − | overflow: hidden;!important | + | overflow: hidden; |
| − | } | + | !important} |
.box .hover-bg .hover-text { | .box .hover-bg .hover-text { | ||
| − | height: 100%; | + | height: 100%; |
| − | bottom: 0; | + | bottom: 0; |
| − | -webkit-transform: translateX(0%) translateY(0%); | + | -webkit-transform: translateX(0%) translateY(0%); |
| − | transform: translateX(0%) translateY(0%); | + | transform: translateX(0%) translateY(0%); |
| − | background: transparent;!important | + | background: transparent; |
| − | } | + | !important} |
| − | .box:hover .hover-bg .hover-text { background-color: rgba(1, 1, 1, 0.5) } | + | .box:hover .hover-bg .hover-text { background-color: rgba(1, 1, 1, 0.5) !important} |
.box .hover-bg:hover .hover-text.off { | .box .hover-bg:hover .hover-text.off { | ||
| − | -webkit-transform: translateX(0%) translateY(0%); | + | -webkit-transform: translateX(0%) translateY(0%); |
| − | transform: translateX(0%) translateY(0%); | + | transform: translateX(0%) translateY(0%); |
| − | opacity: 1; | + | opacity: 1; |
| − | transition: all 0.3s; | + | transition: all 0.3s; |
| − | -webkit-transition: all 0.3s; | + | -webkit-transition: all 0.3s; |
| − | -o-transition: all 0.3s;!important | + | -o-transition: all 0.3s; |
| − | } | + | !important} |
.box .hover-text i.fa { | .box .hover-text i.fa { | ||
| − | font-size: 20px; | + | font-size: 20px; |
| − | background: #00BAB9; | + | background: #00BAB9; |
| − | padding: 13px; | + | padding: 13px; |
| − | position: relative; | + | position: relative; |
| − | top: 40%; | + | top: 40%; |
| − | border-radius: 50%; | + | border-radius: 50%; |
| − | width: 45px; | + | width: 45px; |
| − | height: 45px; | + | height: 45px; |
| − | transition: all 0.5s;!important | + | transition: all 0.5s; |
| − | } | + | !important} |
| − | .box .hover-text i.fa:hover { background: #333333 } | + | .box .hover-text i.fa:hover { background: #333333 !important} |
.box .hover-text i.fa.fa-expand { | .box .hover-text i.fa.fa-expand { | ||
| − | border-top-right-radius: 0; | + | border-top-right-radius: 0; |
| − | -webkit-transform: translateX(-400%) translateY(0%); | + | -webkit-transform: translateX(-400%) translateY(0%); |
| − | transform: translateX(-400%) translateY(0%); | + | transform: translateX(-400%) translateY(0%); |
| − | opacity: 0; | + | opacity: 0; |
| − | transition: all 0.5s;!important | + | transition: all 0.5s; |
| − | } | + | !important} |
.box:hover .hover-text i.fa.fa-expand { | .box:hover .hover-text i.fa.fa-expand { | ||
| − | -webkit-transform: translateX(0%) translateY(0%); | + | -webkit-transform: translateX(0%) translateY(0%); |
| − | transform: translateX(0%) translateY(0%); | + | transform: translateX(0%) translateY(0%); |
| − | opacity: 1;!important | + | opacity: 1; |
| − | } | + | !important} |
.box .hover-text i.fa.fa-chain { | .box .hover-text i.fa.fa-chain { | ||
| − | border-top-left-radius: 0; | + | border-top-left-radius: 0; |
| − | -webkit-transform: translateX(400%) translateY(0%); | + | -webkit-transform: translateX(400%) translateY(0%); |
| − | transform: translateX(400%) translateY(0%); | + | transform: translateX(400%) translateY(0%); |
| − | opacity: 0; | + | opacity: 0; |
| − | transition: all 0.5s;!important | + | transition: all 0.5s; |
| − | } | + | !important} |
.box:hover .hover-text i.fa.fa-chain { | .box:hover .hover-text i.fa.fa-chain { | ||
| − | -webkit-transform: translateX(0%) translateY(0%); | + | -webkit-transform: translateX(0%) translateY(0%); |
| − | transform: translateX(0%) translateY(0%); | + | transform: translateX(0%) translateY(0%); |
| − | opacity: 1;!important | + | opacity: 1; |
| − | } | + | !important} |
/* Style 2 - Not Fullwidth */ | /* Style 2 - Not Fullwidth */ | ||
#itemsWorkThree .box, | #itemsWorkThree .box, | ||
| − | #itemsWorkTwo .box { margin-bottom: 30px } | + | #itemsWorkTwo .box { margin-bottom: 30px !important} |
| − | #itemsWorkTwo .hover-bg .hover-text { padding: 30% 0 } | + | #itemsWorkTwo .hover-bg .hover-text { padding: 30% 0 !important} |
#itemsWorkTwo .box:hover .hover-bg .hover-text { | #itemsWorkTwo .box:hover .hover-bg .hover-text { | ||
| − | background-color: rgba(255, 223, 125, 0.70); | + | background-color: rgba(255, 223, 125, 0.70); |
| − | border: 10px solid rgba(185, 156, 72, 0.80);!important | + | border: 10px solid rgba(185, 156, 72, 0.80); |
| − | } | + | !important} |
#itemsWorkTwo .box .hover-bg .hover-text h5 small { | #itemsWorkTwo .box .hover-bg .hover-text h5 small { | ||
| − | text-transform: capitalize; | + | text-transform: capitalize; |
| − | color: #000000;!important | + | color: #000000; |
| − | } | + | !important} |
#itemsWorkTwo .box .hover-bg .hover-text h5 { | #itemsWorkTwo .box .hover-bg .hover-text h5 { | ||
| − | font-weight: 700; | + | font-weight: 700; |
| − | text-transform: uppercase; | + | text-transform: uppercase; |
| − | color: #000000; | + | color: #000000; |
| − | -webkit-transform: translateX(0%) translateY(400%); | + | -webkit-transform: translateX(0%) translateY(400%); |
| − | transform: translateX(0%) translateY(400%); | + | transform: translateX(0%) translateY(400%); |
| − | opacity: 0; | + | opacity: 0; |
| − | transition: all 0.5s;!important | + | transition: all 0.5s; |
| − | } | + | !important} |
#itemsWorkTwo .box:hover .hover-bg .hover-text.off h5 { | #itemsWorkTwo .box:hover .hover-bg .hover-text.off h5 { | ||
| − | -webkit-transform: translateX(0%) translateY(0%); | + | -webkit-transform: translateX(0%) translateY(0%); |
| − | transform: translateX(0%) translateY(0%); | + | transform: translateX(0%) translateY(0%); |
| − | opacity: 1;!important | + | opacity: 1; |
| − | } | + | !important} |
#itemsWorkTwo .box .hover-text i.fa { | #itemsWorkTwo .box .hover-text i.fa { | ||
| − | font-size: 20px; | + | font-size: 20px; |
| − | background: transparent; | + | background: transparent; |
| − | padding: 13px; | + | padding: 13px; |
| − | position: relative; | + | position: relative; |
| − | top: 40%; | + | top: 40%; |
| − | border-radius: 50%; | + | border-radius: 50%; |
| − | width: 45px; | + | width: 45px; |
| − | height: 45px; | + | height: 45px; |
| − | transition: all 0.5s; | + | transition: all 0.5s; |
| − | border: 1px solid #ffffff;!important | + | border: 1px solid #ffffff; |
| − | } | + | !important} |
| − | #itemsWorkTwo .box .hover-text i.fa:hover { background: #333333 } | + | #itemsWorkTwo .box .hover-text i.fa:hover { background: #333333 !important} |
/* Portfolio Style #3 */ | /* Portfolio Style #3 */ | ||
#itemsWorkThree .box h5 { | #itemsWorkThree .box h5 { | ||
| − | border: 1px solid #ddd; | + | border: 1px solid #ddd; |
| − | padding: 10px 0; | + | padding: 10px 0; |
| − | margin: 0;!important | + | margin: 0; |
| − | } | + | !important} |
/* Isotope Filter */ | /* Isotope Filter */ | ||
| − | .isotope-item { z-index: 2 } | + | .isotope-item { z-index: 2 !important} |
| − | .isotope-hidden.isotope-item { z-index: 1 } | + | .isotope-hidden.isotope-item { z-index: 1 !important} |
.isotope, | .isotope, | ||
.isotope .isotope-item { | .isotope .isotope-item { | ||
/* change duration value to whatever you like */ | /* change duration value to whatever you like */ | ||
| − | -webkit-transition-duration: 0.8s; | + | -webkit-transition-duration: 0.8s; |
| − | -moz-transition-duration: 0.8s; | + | -moz-transition-duration: 0.8s; |
| − | transition-duration: 0.8s;!important | + | transition-duration: 0.8s; |
| − | } | + | !important} |
.isotope-item { | .isotope-item { | ||
| − | margin-right: -1px; | + | margin-right: -1px; |
| − | -webkit-backface-visibility: hidden; | + | -webkit-backface-visibility: hidden; |
| − | backface-visibility: hidden;!important | + | backface-visibility: hidden; |
| − | } | + | !important} |
.isotope { | .isotope { | ||
| − | -webkit-transition-property: height, width; | + | -webkit-transition-property: height, width; |
| − | -moz-transition-property: height, width; | + | -moz-transition-property: height, width; |
| − | transition-property: height, width;!important | + | transition-property: height, width; |
| − | } | + | !important} |
.isotope .isotope-item { | .isotope .isotope-item { | ||
| − | -webkit-transition-property: -webkit-transform, opacity; | + | -webkit-transition-property: -webkit-transform, opacity; |
| − | -moz-transition-property: -moz-transform, opacity; | + | -moz-transition-property: -moz-transform, opacity; |
| − | transition-property: transform, opacity;!important | + | transition-property: transform, opacity; |
| − | } | + | !important} |
.nivo-lightbox-theme-default .nivo-lightbox-title { | .nivo-lightbox-theme-default .nivo-lightbox-title { | ||
| − | font-size: 14px; | + | font-size: 14px; |
| − | background: #f1f1f1; | + | background: #f1f1f1; |
| − | border: 1px solid #333; | + | border: 1px solid #333; |
| − | letter-spacing: 2px; | + | letter-spacing: 2px; |
| − | color: #333; | + | color: #333; |
| − | text-transform: uppercase; | + | text-transform: uppercase; |
| − | letter-spacing: 2px; | + | letter-spacing: 2px; |
| − | padding: 10px 35px; | + | padding: 10px 35px; |
| − | border-radius: 2px;!important | + | border-radius: 2px; |
| − | } | + | !important} |
.nivo-lightbox-theme-default.nivo-lightbox-overlay { | .nivo-lightbox-theme-default.nivo-lightbox-overlay { | ||
| − | background: #ffffff !important; | + | background: #ffffff !important; |
| − | background: rgba(255, 255, 255, 1) !important;!important | + | background: rgba(255, 255, 255, 1) !important; |
| − | } | + | !important} |
.nivo-lightbox-theme-default .nivo-lightbox-nav, | .nivo-lightbox-theme-default .nivo-lightbox-nav, | ||
| − | .nivo-lightbox-theme-default .nivo-lightbox-close { opacity: 1 } | + | .nivo-lightbox-theme-default .nivo-lightbox-close { opacity: 1 !important} |
.nivo-lightbox-error { | .nivo-lightbox-error { | ||
| − | color: #C59A6D !important; | + | color: #C59A6D !important; |
| − | text-shadow: 0 1px 1px rgba(0, 0, 0, 0) !important;!important | + | text-shadow: 0 1px 1px rgba(0, 0, 0, 0) !important; |
| − | } | + | !important} |
.nivo-lightbox-theme-default .nivo-lightbox-image img { | .nivo-lightbox-theme-default .nivo-lightbox-image img { | ||
| − | background: #fff; | + | background: #fff; |
| − | -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.4); | + | -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.4); |
| − | -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.4); | + | -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.4); |
| − | box-shadow: 0px 1px 1px rgba(0,0,0,0.4); | + | box-shadow: 0px 1px 1px rgba(0,0,0,0.4); |
| − | border-top: 4px solid #ffcc33;!important | + | border-top: 4px solid #ffcc33; |
| − | } | + | !important} |
/* Single Portfolio Detail */ | /* Single Portfolio Detail */ | ||
#work-detail-one, | #work-detail-one, | ||
#work-detail-two, | #work-detail-two, | ||
| − | #work-detail-three { padding: 60px 0 } | + | #work-detail-three { padding: 60px 0 !important} |
.work-detail .dl-horizontal dt { | .work-detail .dl-horizontal dt { | ||
| − | text-align: left; | + | text-align: left; |
| − | margin-bottom: 10px;!important | + | margin-bottom: 10px; |
| − | } | + | !important} |
| − | .work-related-thumb { margin-bottom: 30px } | + | .work-related-thumb { margin-bottom: 30px !important} |
.work-related-thumb .img-thumbnail { | .work-related-thumb .img-thumbnail { | ||
| − | display: inline-block; | + | display: inline-block; |
| − | max-width: 100%; | + | max-width: 100%; |
| − | height: auto; | + | height: auto; |
| − | padding: 0; | + | padding: 0; |
| − | line-height: 1.42857143; | + | line-height: 1.42857143; |
| − | background-color: transparent; | + | background-color: transparent; |
| − | border: 1px solid transparent; | + | border: 1px solid transparent; |
| − | border-radius: 0; | + | border-radius: 0; |
| − | -webkit-transition: all .2s ease-in-out; | + | -webkit-transition: all .2s ease-in-out; |
| − | -o-transition: all .2s ease-in-out; | + | -o-transition: all .2s ease-in-out; |
| − | transition: all .2s ease-in-out;!important | + | transition: all .2s ease-in-out; |
| − | } | + | !important} |
| − | .work-related-thumb .img-thumbnail:hover { opacity: 0.8 } | + | .work-related-thumb .img-thumbnail:hover { opacity: 0.8 !important} |
/* Process Section */ | /* Process Section */ | ||
| − | #tf-process { padding: 60px 0 } | + | #tf-process { padding: 60px 0 !important} |
.process i.fa { | .process i.fa { | ||
| − | text-align: center; | + | text-align: center; |
| − | font-size: 30px; | + | font-size: 30px; |
| − | background-color: #00BAB9; | + | background-color: #00BAB9; |
| − | color: #ffffff; | + | color: #ffffff; |
| − | padding: 25px 0; | + | padding: 25px 0; |
| − | border: 4px solid #ffffff; | + | border: 4px solid #ffffff; |
| − | border-radius: 50px; | + | border-radius: 50px; |
| − | border-top-left-radius: 0; | + | border-top-left-radius: 0; |
| − | margin: 0 10px; | + | margin: 0 10px; |
| − | margin-right: 20px; | + | margin-right: 20px; |
| − | width: 92px; | + | width: 92px; |
| − | height: 90px; | + | height: 90px; |
| − | transition: background-color 0.5s;!important | + | transition: background-color 0.5s; |
| − | } | + | !important} |
| − | #tf-process .gray-bg { position: relative } | + | #tf-process .gray-bg { position: relative !important} |
.gray-bg .vline { | .gray-bg .vline { | ||
| − | position: absolute; | + | position: absolute; |
| − | height: 100%; | + | height: 100%; |
| − | padding: 5px; | + | padding: 5px; |
| − | border-left: 3px solid #ffffff; | + | border-left: 3px solid #ffffff; |
| − | left: 20%;!important | + | left: 20%; |
| − | } | + | !important} |
| − | #process { padding: 60px 0 20px 0 } | + | #process { padding: 60px 0 20px 0 !important} |
| − | .process { margin-bottom: 40px } | + | .process { margin-bottom: 40px !important} |
/* Pricing Section */ | /* Pricing Section */ | ||
| − | #tf-pricing { padding: 60px 0 } | + | #tf-pricing { padding: 60px 0 !important} |
#tf-pricing {text-align:center;!important} | #tf-pricing {text-align:center;!important} | ||
| − | .price h1 { font-size: 50px } | + | .price h1 { font-size: 50px !important} |
| − | .price { text-align: center } | + | .price { text-align: center !important} |
| − | .price.panel-default { border-color: #333 } | + | .price.panel-default { border-color: #333 !important} |
.price.panel-default > .panel-heading { | .price.panel-default > .panel-heading { | ||
| − | font-size: 20px; | + | font-size: 20px; |
| − | text-transform: uppercase; | + | text-transform: uppercase; |
| − | font-weight: 600; | + | font-weight: 600; |
| − | color: #FFF; | + | color: #FFF; |
| − | background-color: #333333; | + | background-color: #333333; |
| − | border-color: inherit;!important | + | border-color: inherit; |
| − | } | + | !important} |
| − | .price .panel-heading { padding: 30px 15px } | + | .price .panel-heading { padding: 30px 15px !important} |
| − | .price .panel-body { border-bottom: 1px solid } | + | .price .panel-body { border-bottom: 1px solid !important} |
| − | .price ul.list-unstyled { padding: 20px } | + | .price ul.list-unstyled { padding: 20px !important} |
| − | .price ul.list-unstyled li { padding: 10px 0 } | + | .price ul.list-unstyled li { padding: 10px 0 !important} |
| − | .price ul.list-unstyled li small { margin-top: -10px } | + | .price ul.list-unstyled li small { margin-top: -10px !important} |
/* Featured */ | /* Featured */ | ||
.price.featured { | .price.featured { | ||
| − | -moz-box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.31); | + | -moz-box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.31); |
| − | -webkit-box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.31); | + | -webkit-box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.31); |
| − | box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.31);!important | + | box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.31); |
| − | } | + | !important} |
.price.featured.panel-default { | .price.featured.panel-default { | ||
| − | border-color: #00BAB9; | + | border-color: #00BAB9; |
| − | background-color: #ffffff; | + | background-color: #ffffff; |
| − | margin-top: -20px; | + | margin-top: -20px; |
| − | position: relative; | + | position: relative; |
| − | z-index: 1; | + | z-index: 1; |
| − | margin-left: -5px; | + | margin-left: -5px; |
| − | margin-right: -5px;!important | + | margin-right: -5px; |
| − | } | + | !important} |
| − | .price.featured.panel-default { border-color: #00BAB9 } | + | .price.featured.panel-default { border-color: #00BAB9 !important} |
| − | .price.featured.panel-default > .panel-heading { background-color: #00BAB9 } | + | .price.featured.panel-default > .panel-heading { background-color: #00BAB9 !important} |
| − | .featured .panel-body { margin-top: 20px } | + | .featured .panel-body { margin-top: 20px !important} |
.featured .panel-body, | .featured .panel-body, | ||
| − | .featured.panel-default > .panel-heading { border-color: #00BAB9 } | + | .featured.panel-default > .panel-heading { border-color: #00BAB9 !important} |
| − | .featured .tf-btn { margin-top: 20px } | + | .featured .tf-btn { margin-top: 20px !important} |
.btn:focus, | .btn:focus, | ||
.btn:active:focus, | .btn:active:focus, | ||
| Line 849: | Line 849: | ||
.btn:active.focus, | .btn:active.focus, | ||
.btn.active.focus { | .btn.active.focus { | ||
| − | outline: 0; | + | outline: 0; |
| − | outline: 0; | + | outline: 0; |
| − | outline-offset: 0;!important | + | outline-offset: 0; |
| − | } | + | !important} |
.btn:active, | .btn:active, | ||
.btn.active { | .btn.active { | ||
| − | background-image: none; | + | background-image: none; |
| − | outline: 0; | + | outline: 0; |
| − | -webkit-box-shadow: none; | + | -webkit-box-shadow: none; |
| − | box-shadow: none;!important | + | box-shadow: none; |
| − | } | + | !important} |
.tf-btn { | .tf-btn { | ||
| − | font-size: 12px; | + | font-size: 12px; |
| − | word-spacing: 2px; | + | word-spacing: 2px; |
| − | font-weight: 700; | + | font-weight: 700; |
| − | padding: 10px 20px; | + | padding: 10px 20px; |
| − | background-color: #333333; | + | background-color: #333333; |
| − | text-transform: uppercase; | + | text-transform: uppercase; |
| − | border-color: #333333; | + | border-color: #333333; |
| − | transition: all 0.5s;!important | + | transition: all 0.5s; |
| − | } | + | !important} |
.tf-btn:focus, | .tf-btn:focus, | ||
.tf-btn:hover { | .tf-btn:hover { | ||
| − | background-color: #333333; | + | background-color: #333333; |
| − | border-color: #00BAB9;!important | + | border-color: #00BAB9; |
| − | } | + | !important} |
.color { | .color { | ||
| − | background-color: #00BAB9; | + | background-color: #00BAB9; |
| − | border-color: #00BAB9;!important | + | border-color: #00BAB9; |
| − | } | + | !important} |
.color:focus, | .color:focus, | ||
.color:hover { | .color:hover { | ||
| − | border-color: #333333; | + | border-color: #333333; |
| − | background-color: #00BAB9;!important | + | background-color: #00BAB9; |
| − | } | + | !important} |
/* Blog Section */ | /* Blog Section */ | ||
#tf-blog, | #tf-blog, | ||
| − | #blog-post { padding: 60px 0 } | + | #blog-post { padding: 60px 0 !important} |
| − | #blog-post a.btn { margin: auto 0 } | + | #blog-post a.btn { margin: auto 0 !important} |
| − | .post-wrap { position: relative } | + | .post-wrap { position: relative !important} |
.media.post { | .media.post { | ||
| − | background: #fff; | + | background: #fff; |
| − | padding: 10px;!important | + | padding: 10px; |
| − | } | + | !important} |
.post-wrap { | .post-wrap { | ||
| − | position: relative; | + | position: relative; |
| − | margin-bottom: 30px; | + | margin-bottom: 30px; |
| − | transition: all 0.5s;!important | + | transition: all 0.5s; |
| − | } | + | !important} |
.post-meta { | .post-meta { | ||
| − | border-top: 1px solid #ebebeb; | + | border-top: 1px solid #ebebeb; |
| − | background-color: #ffffff; | + | background-color: #ffffff; |
| − | padding: 5px 10px; | + | padding: 5px 10px; |
| − | height: auto; | + | height: auto; |
| − | position: relative; | + | position: relative; |
| − | min-height: 35px;!important | + | min-height: 35px; |
| − | } | + | !important} |
ul.metas li:after { | ul.metas li:after { | ||
| − | content: ' / '; | + | content: ' / '; |
| − | margin-right: 3px; | + | margin-right: 3px; |
| − | margin-left: 3px;!important | + | margin-left: 3px; |
| − | } | + | !important} |
| − | ul.metas li:last-child:after { content: ' ' } | + | ul.metas li:last-child:after { content: ' ' !important} |
| − | ul.metas li a { color: #00BAB9 } | + | ul.metas li a { color: #00BAB9 !important} |
.meta-detail { | .meta-detail { | ||
| − | background: #f4f4f4; | + | background: #f4f4f4; |
| − | border-radius: 3px; | + | border-radius: 3px; |
| − | padding: 2px;!important | + | padding: 2px; |
| − | } | + | !important} |
/* Contact Section */ | /* Contact Section */ | ||
/********************************* | /********************************* | ||
/* Map Section | /* Map Section | ||
**********************************/ | **********************************/ | ||
| − | #tf-contact { padding: 60px 0 } | + | #tf-contact { padding: 60px 0 !important} |
#map { | #map { | ||
| − | position: relative; | + | position: relative; |
| − | width: 100%; | + | width: 100%; |
| − | height: 400px;!important | + | height: 400px; |
| − | } | + | !important} |
.contact-detail { | .contact-detail { | ||
| − | text-align: center; | + | text-align: center; |
| − | margin: 60px 0;!important | + | margin: 60px 0; |
| − | } | + | !important} |
.contact-detail i.fa { | .contact-detail i.fa { | ||
| − | text-align: center; | + | text-align: center; |
| − | font-size: 30px; | + | font-size: 30px; |
| − | background-color: #00BAB9; | + | background-color: #00BAB9; |
| − | color: #ffffff; | + | color: #ffffff; |
| − | padding: 25px 0; | + | padding: 25px 0; |
| − | border-radius: 50px; | + | border-radius: 50px; |
| − | border-top-left-radius: 0; | + | border-top-left-radius: 0; |
| − | margin: 0 10px; | + | margin: 0 10px; |
| − | margin-right: 20px; | + | margin-right: 20px; |
| − | width: 82px; | + | width: 82px; |
| − | height: 80px; | + | height: 80px; |
| − | transition: background-color 0.5s;!important | + | transition: background-color 0.5s; |
| − | } | + | !important} |
| − | .contact-detail:hover i.fa { background-color: #333333 } | + | .contact-detail:hover i.fa { background-color: #333333 !important} |
| − | form#contact-form { padding: 40px 0 } | + | form#contact-form { padding: 40px 0 !important} |
| − | .contact form#contact-form {padding: 0} | + | .contact form#contact-form {padding: 0!important} |
.form-control:focus { | .form-control:focus { | ||
| − | border-color: inherit; | + | border-color: inherit; |
| − | outline: 0; | + | outline: 0; |
| − | -webkit-box-shadow: none; | + | -webkit-box-shadow: none; |
| − | box-shadow: none;!important | + | box-shadow: none; |
| − | } | + | !important} |
.form-control { | .form-control { | ||
| − | display: block; | + | display: block; |
| − | width: 100%; | + | width: 100%; |
| − | height: 44px; | + | height: 44px; |
| − | padding: 10px 12px; | + | padding: 10px 12px; |
| − | font-size: 14px; | + | font-size: 14px; |
| − | line-height: 1.42857143; | + | line-height: 1.42857143; |
| − | color: #555; | + | color: #555; |
| − | background-color: #fff; | + | background-color: #fff; |
| − | background-image: none; | + | background-image: none; |
| − | border: 1px solid #ccc; | + | border: 1px solid #ccc; |
| − | border-radius: 4px; | + | border-radius: 4px; |
| − | -webkit-box-shadow: none; | + | -webkit-box-shadow: none; |
| − | box-shadow: none; | + | box-shadow: none; |
| − | -webkit-transition: none; | + | -webkit-transition: none; |
| − | -o-transition: none; | + | -o-transition: none; |
| − | transition: none;!important | + | transition: none; |
| − | } | + | !important} |
p.help-block.text-danger ul li { | p.help-block.text-danger ul li { | ||
| − | display: block; | + | display: block; |
| − | margin-left: -20px; | + | margin-left: -20px; |
| − | color: #00BAB9;!important | + | color: #00BAB9; |
| − | } | + | !important} |
#success .alert-danger { | #success .alert-danger { | ||
| − | color: #00BAB9; | + | color: #00BAB9; |
| − | background-color: #FDFDFD; | + | background-color: #FDFDFD; |
| − | border-color: #00BAB9; | + | border-color: #00BAB9; |
| − | margin-bottom: 10px;!important | + | margin-bottom: 10px; |
| − | } | + | !important} |
/* Footer */ | /* Footer */ | ||
#tf-footer { | #tf-footer { | ||
| − | padding: 3% 0 2% 0; | + | padding: 3% 0 2% 0; |
| − | background-color: #00BAB9; | + | background-color: #00BAB9; |
| − | color: #ffffff;!important | + | color: #ffffff; |
| − | } | + | !important} |
ul.social li a i { | ul.social li a i { | ||
| − | font-size: 18px; | + | font-size: 18px; |
| − | background: transparent; | + | background: transparent; |
| − | width: 32px; | + | width: 32px; |
| − | height: 32px; | + | height: 32px; |
| − | padding: 7px 0; | + | padding: 7px 0; |
| − | text-align: center; | + | text-align: center; |
| − | border-radius: 50%; | + | border-radius: 50%; |
| − | border-top-left-radius: 0; | + | border-top-left-radius: 0; |
| − | border: 1px solid transparent; | + | border: 1px solid transparent; |
| − | color: #ffffff; | + | color: #ffffff; |
| − | transition: all 0.5s;!important | + | transition: all 0.5s; |
| − | } | + | !important} |
| − | ul.social li a i:hover { border-color: #ffffff } | + | ul.social li a i:hover { border-color: #ffffff !important} |
/* Blog Page */ | /* Blog Page */ | ||
.blog .media.post { | .blog .media.post { | ||
| − | background: #fff; | + | background: #fff; |
| − | padding: 10px; | + | padding: 10px; |
| − | border: 1px solid #E9E9E9; | + | border: 1px solid #E9E9E9; |
| − | border-bottom-color: transparent; | + | border-bottom-color: transparent; |
| − | border-top-left-radius: 5px; | + | border-top-left-radius: 5px; |
| − | border-top-right-radius: 5px;!important | + | border-top-right-radius: 5px; |
| − | } | + | !important} |
.blog .post-meta { | .blog .post-meta { | ||
| − | border-top: 1px solid #ebebeb; | + | border-top: 1px solid #ebebeb; |
| − | background-color: #ffffff; | + | background-color: #ffffff; |
| − | padding: 5px 10px; | + | padding: 5px 10px; |
| − | height: auto; | + | height: auto; |
| − | position: relative; | + | position: relative; |
| − | min-height: 35px; | + | min-height: 35px; |
| − | border: 1px solid #ebebeb; | + | border: 1px solid #ebebeb; |
| − | border-bottom-left-radius: 5px; | + | border-bottom-left-radius: 5px; |
| − | border-bottom-right-radius: 5px;!important | + | border-bottom-right-radius: 5px; |
| − | } | + | !important} |
.pagination > li > a, | .pagination > li > a, | ||
.pagination > li > span { | .pagination > li > span { | ||
| − | position: relative; | + | position: relative; |
| − | float: left; | + | float: left; |
| − | padding: 6px 12px; | + | padding: 6px 12px; |
| − | margin-left: 0; | + | margin-left: 0; |
| − | line-height: 1.42857143; | + | line-height: 1.42857143; |
| − | color: #FFFFFF; | + | color: #FFFFFF; |
| − | text-decoration: none; | + | text-decoration: none; |
| − | background-color: #00BAB9; | + | background-color: #00BAB9; |
| − | border: 1px solid #00BAB9; | + | border: 1px solid #00BAB9; |
| − | margin: 3px 3px; | + | margin: 3px 3px; |
| − | font-weight: 700; | + | font-weight: 700; |
| − | text-transform: uppercase; | + | text-transform: uppercase; |
| − | border-radius: 5px;!important | + | border-radius: 5px; |
| − | } | + | !important} |
.pagination > li > a.active, | .pagination > li > a.active, | ||
.pagination > li > a:hover, | .pagination > li > a:hover, | ||
| Line 1,045: | Line 1,045: | ||
.pagination > li > a:focus, | .pagination > li > a:focus, | ||
.pagination > li > span:focus { | .pagination > li > span:focus { | ||
| − | color: #FFFFFF; | + | color: #FFFFFF; |
| − | background-color: #00BAB9; | + | background-color: #00BAB9; |
| − | border-color: #00BAB9;!important | + | border-color: #00BAB9; |
| − | } | + | !important} |
/* Sidebar */ | /* Sidebar */ | ||
.widget { | .widget { | ||
| − | margin-bottom: 40px; | + | margin-bottom: 40px; |
| − | padding: 0 20px;!important | + | padding: 0 20px; |
| − | } | + | !important} |
.comment h4, | .comment h4, | ||
.widget h4, | .widget h4, | ||
h4.text-uppercase { | h4.text-uppercase { | ||
| − | font-weight: 300; | + | font-weight: 300; |
| − | color: #00BAB9;!important!important | + | color: #00BAB9;!important |
| − | } | + | !important} |
| − | .comment h4 span.comments { color: #333333 } | + | .comment h4 span.comments { color: #333333 !important} |
/* Search */ | /* Search */ | ||
button.btn.btn-default { | button.btn.btn-default { | ||
| − | padding: 11px 15px; | + | padding: 11px 15px; |
| − | color: #ffffff; | + | color: #ffffff; |
| − | background: #00BAB9;!important | + | background: #00BAB9; |
| − | } | + | !important} |
/* Categories and Archive Widget */ | /* Categories and Archive Widget */ | ||
| − | ul.bullet-lists { margin-top: 20px } | + | ul.bullet-lists { margin-top: 20px !important} |
ul.list-unstyled.bullet-lists li span.fa.fa-circle { | ul.list-unstyled.bullet-lists li span.fa.fa-circle { | ||
| − | font-size: 8px; | + | font-size: 8px; |
| − | vertical-align: middle; | + | vertical-align: middle; |
| − | margin-right: 10px; | + | margin-right: 10px; |
| − | color: #00BAB9;!important | + | color: #00BAB9; |
| − | } | + | !important} |
| − | ul.list-unstyled.bullet-lists li { padding: 5px 0 } | + | ul.list-unstyled.bullet-lists li { padding: 5px 0 !important} |
| − | ul.list-unstyled.bullet-lists li:hover { color: #00BAB9 } | + | ul.list-unstyled.bullet-lists li:hover { color: #00BAB9 !important} |
/* Post Tab */ | /* Post Tab */ | ||
.post-tab .nav-tabs > li > a { | .post-tab .nav-tabs > li > a { | ||
| − | margin-right: -1px; | + | margin-right: -1px; |
| − | line-height: 1.42857143; | + | line-height: 1.42857143; |
| − | border: 1px solid #ddd; | + | border: 1px solid #ddd; |
| − | border-radius: 0px 0px 0 0;!important | + | border-radius: 0px 0px 0 0; |
| − | } | + | !important} |
.post-tab .list-group-item:first-child { | .post-tab .list-group-item:first-child { | ||
| − | border-top-left-radius: 0; | + | border-top-left-radius: 0; |
| − | border-top-right-radius: 0; | + | border-top-right-radius: 0; |
| − | margin-top: -1px;!important | + | margin-top: -1px; |
| − | } | + | !important} |
.post-tab .nav-tabs > li > a:hover, | .post-tab .nav-tabs > li > a:hover, | ||
.post-tab .nav-tabs > li > a:focus { | .post-tab .nav-tabs > li > a:focus { | ||
| − | color: #FFF; | + | color: #FFF; |
| − | background-color: #FC3; | + | background-color: #FC3; |
| − | border: 1px solid #ddd; | + | border: 1px solid #ddd; |
| − | border-bottom-color: transparent;!important | + | border-bottom-color: transparent; |
| − | } | + | !important} |
/* Tags */ | /* Tags */ | ||
| − | ul.list-inline.bullet-lists li a { color: inherit } | + | ul.list-inline.bullet-lists li a { color: inherit !important} |
ul.list-inline.bullet-lists li { | ul.list-inline.bullet-lists li { | ||
| − | background: #F8F8F8; | + | background: #F8F8F8; |
| − | padding: 5px 10px; | + | padding: 5px 10px; |
| − | margin-bottom: 5px; | + | margin-bottom: 5px; |
| − | margin-right: 2px; | + | margin-right: 2px; |
| − | border: 1px solid #F4F4F4; | + | border: 1px solid #F4F4F4; |
| − | border-radius: 3px; | + | border-radius: 3px; |
| − | transition: all 0.3s;!important | + | transition: all 0.3s; |
| − | } | + | !important} |
| − | ul.list-inline.bullet-lists li:hover { background: #00BAB9 } | + | ul.list-inline.bullet-lists li:hover { background: #00BAB9 !important} |
/* Single Blog Post */ | /* Single Blog Post */ | ||
.blog-post .post-wrap img, | .blog-post .post-wrap img, | ||
| − | .work-detail img.featured { margin: 20px 0 } | + | .work-detail img.featured { margin: 20px 0 !important} |
| − | ul.meta-tags li a { font-style: italic } | + | ul.meta-tags li a { font-style: italic !important} |
| − | ul.meta-tags li:after { content: ',' } | + | ul.meta-tags li:after { content: ',' !important} |
| − | ul.meta-tags li:last-child:after { content: ' ' } | + | ul.meta-tags li:last-child:after { content: ' ' !important} |
/* Author Box */ | /* Author Box */ | ||
.media.post-author { | .media.post-author { | ||
| − | background: #00BAB9; | + | background: #00BAB9; |
| − | padding: 20px; | + | padding: 20px; |
| − | margin-top: -1px;!important | + | margin-top: -1px; |
| − | } | + | !important} |
| − | .media.post-author a { content: inherit } | + | .media.post-author a { content: inherit !important} |
.blog-post .post-wrap { | .blog-post .post-wrap { | ||
| − | padding: 20px; | + | padding: 20px; |
| − | margin-bottom: 0; | + | margin-bottom: 0; |
| − | border: 1px solid #DDDDDD; | + | border: 1px solid #DDDDDD; |
| − | border-top-right-radius: 4px; | + | border-top-right-radius: 4px; |
| − | border-top-left-radius: 4px;!important | + | border-top-left-radius: 4px; |
| − | } | + | !important} |
/* Comment */ | /* Comment */ | ||
.media.comment-block { | .media.comment-block { | ||
| − | border: 1px solid #DDD; | + | border: 1px solid #DDD; |
| − | padding: 20px;!important | + | padding: 20px; |
| − | } | + | !important} |
| − | .comment { margin-top: 40px } | + | .comment { margin-top: 40px !important} |
| − | .comment form { margin-top: -30px } | + | .comment form { margin-top: -30px !important} |
.comment input, | .comment input, | ||
| − | .comment textarea { margin-bottom: 15px } | + | .comment textarea { margin-bottom: 15px !important} |
Revision as of 04:38, 17 September 2015
@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic); body, html { -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale; overflow-y: auto; overflow-x: hidden; font-family: 'Lato', sans-serif; color: #6f6f6f; !important}
- -webkit-scrollbar { width: 2px; !important}/* for vertical scrollbars */
- -webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); !important}
- -webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.5); !important}
@media (min-width: 1200px) { .container { width: 1100px !important} !important} h1 { font-weight: 900; text-transform: uppercase; font-family: adele; font-size: 57px; !important} h1 small { text-transform: lowercase !important} h2 { line-height: 24px; font-weight: 300; !important} h5 { font-size: 16px; !important} h10 { font-family: adele; font-size: 25px; color: #00BAB9; !important} h11 { font-size:10px; !important} p { font-size: 14px !important} a { color: inherit; transition: all 0.5s; !important} a:hover, a:focus { text-decoration: none; color: #00BAB9; !important} .highlight { color: #00BAB9 !important} .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; !important} .clearfix { display: inline-block !important}
- html .clearfix { height: 1% !important}
.clearfix { display: block !important} /* Navigation */
- tf-menu {
margin-bottom: 0; background-color: #ffffff; padding: 10px 0; height: auto; !important} .navbar-brand img { height: 30px; width: auto; !important} .navbar-brand { padding: 12px 15px !important} .navbar-nav > li > a { font-size: 13px; font-weight: 700; border-bottom: 2px solid transparent; padding: 5px 5px; margin: 8px 10px; text-transform: uppercase; transition: all 0.5s; !important} .navbar-default .navbar-nav > li > a.active, .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #333; border-bottom: 4px solid #00BAB9; !important} .navbar-default .navbar-toggle { border-color: transparent !important} .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: transparent !important} .navbar-default .navbar-toggle:hover>.navbar-default .navbar-toggle .icon-bar, .navbar-default .navbar-toggle:focus>.navbar-default .navbar-toggle .icon-bar { color: #00BAB9 !important} /* Header Page */
- tf-header {
padding: 20px 0; background: #00bab9; margin-top: 70px; color: #ffffff; !important}
- tf-header .breadcrumb {
padding: 8px 15px; margin-bottom: 20px; list-style: none; background-color: transparent; border-radius: 4px; margin-left: -10px; margin-top: -10px; !important}
- tf-header .breadcrumb > li + li:before {
padding: 0 5px; color: #FFF; content: "/\00a0"; !important}
- tf-header .breadcrumb > li a { color: #ffffff !important}
/* Home Style */
- tf-home {
background: url(
);
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
color: #cfcfcf;
!important}
- tf-home .overlay {
background: -moz-linear-gradient(top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.73) 17%, rgba(0,0,0,0.66) 35%, rgba(0,0,0,0.55) 62%, rgba(0,0,0,0.4) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.8)), color-stop(17%,rgba(0,0,0,0.73)), color-stop(35%,rgba(0,0,0,0.66)), color-stop(62%,rgba(0,0,0,0.55)), color-stop(100%,rgba(0,0,0,0.4))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* W3C */ padding: 20% 0; background-attachment: fixed; !important}
- tf-home .overlay {
!important}
- tf-home h1 { color: #0bab9b !important}
.content-heading p.lead { margin-bottom: 80px !important} a.goto-btn { font-size: 18px; font-weight: 700; border-bottom: 2px solid transparent; padding: 10px 0; transition: all 0.5s; !important} a.goto-btn:hover { color: #ffffff; border-bottom: 2px solid #00BAB9; !important} /* Home Section Style 2 - With Video*/
- tf-home.video .overlay {
padding: 0; padding-top: 10%; !important} .img-wrapper { position: relative !important} .img-wrapper img.img-responsive { margin: 0 auto !important !important} .img-wrapper i.fa { position: absolute; z-index: 10; top: 50%; font-size: 25px; background: rgba(32, 22, 22, 0.29); padding: 18px 23px; height: 60px; width: 60px; text-align: center; border-radius: 50%; color: #ffffff; margin-left: -30px; transition: all 0.3s; !important} .img-wrapper i.fa:hover { background: #00BAB9 !important} /* Home Section Style 3 - Slider*/
- tf-home.slider { background: none !important}
- tf-home.slider .overlay { padding: 0 !important}
.carousel-caption { position: absolute; right: 15%; top: 28%; bottom: auto; left: 15%; z-index: 10; padding-top: 20px; padding-bottom: 0; color: #fff; text-align: center; text-shadow: none; !important} .carousel-indicators li { display: inline-block; width: 12px; height: 12px; margin: 1px; text-indent: -999px; cursor: pointer; background-color: rgba(0, 0, 0, 0); border: 1px solid #fff; border-radius: 10px; !important} .carousel-indicators { position: absolute; bottom: 60px; left: 50%; z-index: 15; width: 60%; padding-left: 0; margin-left: -30%; text-align: center; list-style: none; !important} .carousel-indicators .active { width: 14px; height: 14px; margin: 0; background-color: #00BAB9; !important} .carousel-fade .carousel-inner .item { opacity: 0; transition-property: opacity; !important} .carousel-fade .carousel-inner .active { opacity: 1 !important} .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { left: 0; opacity: 0; z-index: 1; !important} .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1 !important} .carousel-fade .carousel-control { z-index: 2 !important} /* Home Section Style 4 - App Header Style*/
- tf-home.app .overlay { padding: 10% 0 5% 0 !important}
- tf-home.app {background: url(../img/bg/02.jpg);!important}
a.goto-btn { margin-right: 30px !important} .ipad-wrapper .app-wrap { position: relative; width: 395px; !important} .app-wrap { position: absolute; background: url(../img/header4.png); width: 395px; height: 540px; background-repeat: no-repeat; z-index: 2; left: 5%; !important}
- owl-demo .item img {
position: relative; width: 305px; height: auto; left: 12%; margin-top: 46px; z-index: -1; !important} .app .content-heading.text-left { padding: 15% 0 !important}
- tf-home.app .owl-theme .owl-controls .owl-page span {
width: 15px; height: 15px; margin: 5px; background: #ffffff !important; border: 2px solid transparent; opacity: 1; !important}
- tf-home.app .owl-theme .owl-controls {
margin-top: 60px; text-align: center; !important}
- tf-home.app .owl-theme .owl-controls .owl-page.active span,
- tf-home.app .owl-theme .owl-controls.clickable .owl-page:hover span { border: 2px solid #00BAB9 !important}
/* Home Parallax Effect */ .bcg { background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; height: 100%; width: 100%; !important}
- tf-home.parallax .bcg { background-image:url('../img/bg/slider03.jpg'); !important}
.parallax .content-heading{ padding: 20% 0; text-align: center; !important} /* Intro Section */
- tf-intro {
background-color: #0bab9b; padding: 5% 0; color: #ffffff; text-align: center; !important}
- tf-intro img.intro-logo {
margin: 0 auto; margin-bottom: 30px; !important} /* Service Section */
- tf-services { padding: 60px 0 !important}
.section-header { padding: 40px 0; text-align: center; !important} .section-header h2 { text-transform: uppercase !important} .section-header h5 { letter-spacing: 1px !important} .fancy { line-height: 0.5; text-align: center; margin-bottom: 40px; margin-top: 20px; !important} .fancy span { display: inline-block; position: relative; !important} .fancy span:before, .fancy span:after { content: ""; position: absolute; height: 5px; border-bottom: 1px solid #f1f1f1; top: 15px; width: 400px; !important} .fancy span:before { right: 100%; margin-right: 10px; !important} .fancy span:after { left: 100%; margin-left: 10px; !important} /* service lists */ .service { margin-bottom: 20px !important} .service .media-right i.fa { text-align: center; font-size: 30px; background-color: #00BAB9; color: #ffffff; padding: 25px 0; border-radius: 50px; border-top-left-radius: 0; margin: 0 10px; margin-right: 20px; width: 82px; height: 80px; transition: background-color 0.5s; !important} .service .media-left i.fa { text-align: center; font-size: 30px; background-color: #00BAB9; color: #ffffff; padding: 25px 0; border-radius: 50px; border-top-right-radius: 0; margin: 0 10px; margin-left: 20px; width: 82px; height: 80px; transition: background-color 0.5s; !important} .process:hover i.fa, .service:hover i.fa { background-color: #333333 !important} h4.media-heading { margin-top: 0; margin-bottom: 5px; font-size: 16px; font-weight: 400; text-transform: uppercase; color: #333; line-height: 20px; !important} /* About Us */
- tf-about { padding: 40px 0 !important}
.gray-bg { background-color: #f3f3f3 !important} .img-wrap .profile-img { position: relative; margin-bottom: 40px; !important} .profile-img .social { position: absolute; z-index: 1; bottom: -10px; left: 50px; !important} .about-right-content { padding: 40px 0 !important} .about-left-content { padding-bottom: 60px !important} .about-left-content h2, .about-left-content h2 small { color: #333 !important} .about-left-content h2 small { font-weight: 300 !important} ul.social li a.fa { background: #00BAB9; width: 50px; height: 50px; padding: 15px; text-align: center; margin-right: -5px; font-size: 20px; color: #ffffff; margin-bottom: 0; !important} ul.social li a.fa:hover { background-color: #333333 !important} /* Skills Progress Bar */ .progress { height: 12px; margin-bottom: 20px; overflow: hidden; background-color: #999999; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; !important} .progress-bar { float: left; width: 0; height: 100%; font-size: 12px; line-height: 20px; color: #fff; text-align: center; background-color: #00BAB9; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: width .6s ease; -o-transition: width .6s ease; transition: width .6s ease; !important} .skills { margin-top: 30px; padding: 20px 0; !important} .skillset p { font-size: 13px; margin-bottom: 5px; !important} /* Counter */
- tf-counter {
border-top: 1px solid #D1D1D1; border-bottom: 1px solid #D1D1D1; !important} .facts { padding: 0 !important} .facts .count-box { position: relative !important} .count-box { -webkit-backface-visibility: hidden; border-left: 1px solid #d3d3d3; padding: 40px 0; margin: 0; overflow: hidden; transition: all 0.5s; transform: translateX(0px) translateY(0%); -webkit-transform: translateX(0px) translateY(0%); -moz-transform: translateX(0px) translateY(0%); -ms-transform: translateX(0px) translateY(0%); -o-transform: translateX(0px) translateY(0%); !important} /*.count-box .hover-bg{ position: absolute; display: block; background-color: #FFCC32; width: 100%; height: 100%; z-index: -1; transition: all 0.5s; transform: translateX(0px) translateY(150px); -webkit-transform: translateX(0px) translateY(150px); -ms-transform: translateX(0px) translateY(150px); -o-transform: translateX(0px) translateY(150px); opacity: 0; !important} .count-box:hover .hover-bg{ background: #FFCC32; color: #fff !important; transform: translateX(0px) translateY(-40px); -webkit-transform: translateX(0px) translateY(-40px); -moz-transform: translateX(0px) translateY(-40px); -ms-transform: translateX(0px) translateY(-40px); -o-transform: translateX(0px) translateY(-40px); opacity: 1; !important}*/ .count-box:hover, .count-box:hover > i.fa { color: #ffffff !important} .count-box:hover { -webkit-backface-visibility: hidden; background-color: #00BAB9; !important} .counter i.fa { font-size: 40px; color: #00BAB9; !important} .count-box.last { border-right: 1px solid #d3d3d3 !important} /* Portfolio / Works Sections */
- tf-team { padding: 60px 0 !important}
- team .item {
padding: 30px 0px; margin: 5px 20px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; !important} .item .hover-bg { position: relative; overflow: hidden; !important} .hover-bg .hover-text { position: absolute; display: block; bottom: 0; width: 100%; height: 25%; padding: 20px; color: #ffffff; transition: all 0.8s; -webkit-transition: all 08s; -moz-transition: all 0.8s; -o-transition: all 0.8s; !important} .hover-bg .hover-text.on { opacity: 1 !important} .hover-bg .hover-text.off { transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transform: translateX(100%) translateY(-90%); transform: translateX(100%) translateY(-90%); opacity: 1; background: rgba(0, 0, 0, 0.70); !important} .hover-bg:hover .hover-text.off { -webkit-transform: translateX(0%) translateY(-90%); transform: translateX(0%) translateY(-90%); opacity: 1; !important} .owl-theme .owl-controls .owl-page span { width: 15px; height: 15px; margin: 5px; background: #bababa; !important} /* Why Us or Features Section */
- tf-features,
- feature { padding: 60px 0 !important}
.features-content { padding: 0 30px 0 !important} .features-content h4 { text-transform: uppercase; margin-bottom: 20px; color: #333333; !important} .nav.nav-pills > li > a { position: relative; display: block; background-color: #ffffff; padding: 65px; border-bottom: 3px solid #cccccc; text-transform: uppercase; margin-bottom: 5px; !important} .nav.nav-pills > li > a small { text-transform: lowercase; font-style: italic; !important} .nav.nav-pills > li > a:hover, .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { color: #fff; background-color: #00BAB9; padding: 25px; border-bottom: 3px solid #996600; !important} .nav-pills > li > a { border-radius: 4px !important} ul.features li span.fa { font-size: 35px; vertical-align: middle; margin-right: 20px; float: left; clear: both; margin-top: 5px; !important} /* Portfolio or works blocks */
- tf-works { padding: 60px 0 !important}
ul.cat { margin: 30px 0 !important} ul.cat li a { background: inherit; border: 1px solid; padding: 5px 10px; border-radius: 3px; !important} ul.cat li a:hover, ul.cat li a:focus, ul.cat li a.active { background: #f1f1f1; border: 1px solid; padding: 5px 10px; border-radius: 3px; color: inherit; !important} .nopadding { padding: 0 !important} .box a { margin: 2px !important} .box .hover-bg { position: relative; overflow: hidden; !important} .box .hover-bg .hover-text { height: 100%; bottom: 0; -webkit-transform: translateX(0%) translateY(0%); transform: translateX(0%) translateY(0%); background: transparent; !important} .box:hover .hover-bg .hover-text { background-color: rgba(1, 1, 1, 0.5) !important} .box .hover-bg:hover .hover-text.off { -webkit-transform: translateX(0%) translateY(0%); transform: translateX(0%) translateY(0%); opacity: 1; transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s; !important} .box .hover-text i.fa { font-size: 20px; background: #00BAB9; padding: 13px; position: relative; top: 40%; border-radius: 50%; width: 45px; height: 45px; transition: all 0.5s; !important} .box .hover-text i.fa:hover { background: #333333 !important} .box .hover-text i.fa.fa-expand { border-top-right-radius: 0; -webkit-transform: translateX(-400%) translateY(0%); transform: translateX(-400%) translateY(0%); opacity: 0; transition: all 0.5s; !important} .box:hover .hover-text i.fa.fa-expand { -webkit-transform: translateX(0%) translateY(0%); transform: translateX(0%) translateY(0%); opacity: 1; !important} .box .hover-text i.fa.fa-chain { border-top-left-radius: 0; -webkit-transform: translateX(400%) translateY(0%); transform: translateX(400%) translateY(0%); opacity: 0; transition: all 0.5s; !important} .box:hover .hover-text i.fa.fa-chain { -webkit-transform: translateX(0%) translateY(0%); transform: translateX(0%) translateY(0%); opacity: 1; !important} /* Style 2 - Not Fullwidth */
- itemsWorkThree .box,
- itemsWorkTwo .box { margin-bottom: 30px !important}
- itemsWorkTwo .hover-bg .hover-text { padding: 30% 0 !important}
- itemsWorkTwo .box:hover .hover-bg .hover-text {
background-color: rgba(255, 223, 125, 0.70); border: 10px solid rgba(185, 156, 72, 0.80); !important}
- itemsWorkTwo .box .hover-bg .hover-text h5 small {
text-transform: capitalize; color: #000000; !important}
- itemsWorkTwo .box .hover-bg .hover-text h5 {
font-weight: 700; text-transform: uppercase; color: #000000; -webkit-transform: translateX(0%) translateY(400%); transform: translateX(0%) translateY(400%); opacity: 0; transition: all 0.5s; !important}
- itemsWorkTwo .box:hover .hover-bg .hover-text.off h5 {
-webkit-transform: translateX(0%) translateY(0%); transform: translateX(0%) translateY(0%); opacity: 1; !important}
- itemsWorkTwo .box .hover-text i.fa {
font-size: 20px; background: transparent; padding: 13px; position: relative; top: 40%; border-radius: 50%; width: 45px; height: 45px; transition: all 0.5s; border: 1px solid #ffffff; !important}
- itemsWorkTwo .box .hover-text i.fa:hover { background: #333333 !important}
/* Portfolio Style #3 */
- itemsWorkThree .box h5 {
border: 1px solid #ddd; padding: 10px 0; margin: 0; !important} /* Isotope Filter */ .isotope-item { z-index: 2 !important} .isotope-hidden.isotope-item { z-index: 1 !important} .isotope, .isotope .isotope-item { /* change duration value to whatever you like */ -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; transition-duration: 0.8s; !important} .isotope-item { margin-right: -1px; -webkit-backface-visibility: hidden; backface-visibility: hidden; !important} .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; transition-property: height, width; !important} .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; transition-property: transform, opacity; !important} .nivo-lightbox-theme-default .nivo-lightbox-title { font-size: 14px; background: #f1f1f1; border: 1px solid #333; letter-spacing: 2px; color: #333; text-transform: uppercase; letter-spacing: 2px; padding: 10px 35px; border-radius: 2px; !important} .nivo-lightbox-theme-default.nivo-lightbox-overlay { background: #ffffff !important; background: rgba(255, 255, 255, 1) !important; !important} .nivo-lightbox-theme-default .nivo-lightbox-nav, .nivo-lightbox-theme-default .nivo-lightbox-close { opacity: 1 !important} .nivo-lightbox-error { color: #C59A6D !important; text-shadow: 0 1px 1px rgba(0, 0, 0, 0) !important; !important} .nivo-lightbox-theme-default .nivo-lightbox-image img { background: #fff; -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.4); -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.4); box-shadow: 0px 1px 1px rgba(0,0,0,0.4); border-top: 4px solid #ffcc33; !important} /* Single Portfolio Detail */
- work-detail-one,
- work-detail-two,
- work-detail-three { padding: 60px 0 !important}
.work-detail .dl-horizontal dt { text-align: left; margin-bottom: 10px; !important} .work-related-thumb { margin-bottom: 30px !important} .work-related-thumb .img-thumbnail { display: inline-block; max-width: 100%; height: auto; padding: 0; line-height: 1.42857143; background-color: transparent; border: 1px solid transparent; border-radius: 0; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; !important} .work-related-thumb .img-thumbnail:hover { opacity: 0.8 !important} /* Process Section */
- tf-process { padding: 60px 0 !important}
.process i.fa { text-align: center; font-size: 30px; background-color: #00BAB9; color: #ffffff; padding: 25px 0; border: 4px solid #ffffff; border-radius: 50px; border-top-left-radius: 0; margin: 0 10px; margin-right: 20px; width: 92px; height: 90px; transition: background-color 0.5s; !important}
- tf-process .gray-bg { position: relative !important}
.gray-bg .vline { position: absolute; height: 100%; padding: 5px; border-left: 3px solid #ffffff; left: 20%; !important}
- process { padding: 60px 0 20px 0 !important}
.process { margin-bottom: 40px !important} /* Pricing Section */
- tf-pricing { padding: 60px 0 !important}
- tf-pricing {text-align:center;!important}
.price h1 { font-size: 50px !important} .price { text-align: center !important} .price.panel-default { border-color: #333 !important} .price.panel-default > .panel-heading { font-size: 20px; text-transform: uppercase; font-weight: 600; color: #FFF; background-color: #333333; border-color: inherit; !important} .price .panel-heading { padding: 30px 15px !important} .price .panel-body { border-bottom: 1px solid !important} .price ul.list-unstyled { padding: 20px !important} .price ul.list-unstyled li { padding: 10px 0 !important} .price ul.list-unstyled li small { margin-top: -10px !important} /* Featured */ .price.featured { -moz-box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.31); -webkit-box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.31); box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.31); !important} .price.featured.panel-default { border-color: #00BAB9; background-color: #ffffff; margin-top: -20px; position: relative; z-index: 1; margin-left: -5px; margin-right: -5px; !important} .price.featured.panel-default { border-color: #00BAB9 !important} .price.featured.panel-default > .panel-heading { background-color: #00BAB9 !important} .featured .panel-body { margin-top: 20px !important} .featured .panel-body, .featured.panel-default > .panel-heading { border-color: #00BAB9 !important} .featured .tf-btn { margin-top: 20px !important} .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus { outline: 0; outline: 0; outline-offset: 0; !important} .btn:active, .btn.active { background-image: none; outline: 0; -webkit-box-shadow: none; box-shadow: none; !important} .tf-btn { font-size: 12px; word-spacing: 2px; font-weight: 700; padding: 10px 20px; background-color: #333333; text-transform: uppercase; border-color: #333333; transition: all 0.5s; !important} .tf-btn:focus, .tf-btn:hover { background-color: #333333; border-color: #00BAB9; !important} .color { background-color: #00BAB9; border-color: #00BAB9; !important} .color:focus, .color:hover { border-color: #333333; background-color: #00BAB9; !important} /* Blog Section */
- tf-blog,
- blog-post { padding: 60px 0 !important}
- blog-post a.btn { margin: auto 0 !important}
.post-wrap { position: relative !important} .media.post { background: #fff; padding: 10px; !important} .post-wrap { position: relative; margin-bottom: 30px; transition: all 0.5s; !important} .post-meta { border-top: 1px solid #ebebeb; background-color: #ffffff; padding: 5px 10px; height: auto; position: relative; min-height: 35px; !important} ul.metas li:after { content: ' / '; margin-right: 3px; margin-left: 3px; !important} ul.metas li:last-child:after { content: ' ' !important} ul.metas li a { color: #00BAB9 !important} .meta-detail { background: #f4f4f4; border-radius: 3px; padding: 2px; !important} /* Contact Section */ /********************************* /* Map Section
- /
- tf-contact { padding: 60px 0 !important}
- map {
position: relative; width: 100%; height: 400px; !important} .contact-detail { text-align: center; margin: 60px 0; !important} .contact-detail i.fa { text-align: center; font-size: 30px; background-color: #00BAB9; color: #ffffff; padding: 25px 0; border-radius: 50px; border-top-left-radius: 0; margin: 0 10px; margin-right: 20px; width: 82px; height: 80px; transition: background-color 0.5s; !important} .contact-detail:hover i.fa { background-color: #333333 !important} form#contact-form { padding: 40px 0 !important} .contact form#contact-form {padding: 0!important} .form-control:focus { border-color: inherit; outline: 0; -webkit-box-shadow: none; box-shadow: none; !important} .form-control { display: block; width: 100%; height: 44px; padding: 10px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: none; -o-transition: none; transition: none; !important} p.help-block.text-danger ul li { display: block; margin-left: -20px; color: #00BAB9; !important}
- success .alert-danger {
color: #00BAB9; background-color: #FDFDFD; border-color: #00BAB9; margin-bottom: 10px; !important} /* Footer */
- tf-footer {
padding: 3% 0 2% 0; background-color: #00BAB9; color: #ffffff; !important} ul.social li a i { font-size: 18px; background: transparent; width: 32px; height: 32px; padding: 7px 0; text-align: center; border-radius: 50%; border-top-left-radius: 0; border: 1px solid transparent; color: #ffffff; transition: all 0.5s; !important} ul.social li a i:hover { border-color: #ffffff !important} /* Blog Page */ .blog .media.post { background: #fff; padding: 10px; border: 1px solid #E9E9E9; border-bottom-color: transparent; border-top-left-radius: 5px; border-top-right-radius: 5px; !important} .blog .post-meta { border-top: 1px solid #ebebeb; background-color: #ffffff; padding: 5px 10px; height: auto; position: relative; min-height: 35px; border: 1px solid #ebebeb; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; !important} .pagination > li > a, .pagination > li > span { position: relative; float: left; padding: 6px 12px; margin-left: 0; line-height: 1.42857143; color: #FFFFFF; text-decoration: none; background-color: #00BAB9; border: 1px solid #00BAB9; margin: 3px 3px; font-weight: 700; text-transform: uppercase; border-radius: 5px; !important} .pagination > li > a.active, .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus { color: #FFFFFF; background-color: #00BAB9; border-color: #00BAB9; !important} /* Sidebar */ .widget { margin-bottom: 40px; padding: 0 20px; !important} .comment h4, .widget h4, h4.text-uppercase { font-weight: 300; color: #00BAB9;!important !important} .comment h4 span.comments { color: #333333 !important} /* Search */ button.btn.btn-default { padding: 11px 15px; color: #ffffff; background: #00BAB9; !important} /* Categories and Archive Widget */ ul.bullet-lists { margin-top: 20px !important} ul.list-unstyled.bullet-lists li span.fa.fa-circle { font-size: 8px; vertical-align: middle; margin-right: 10px; color: #00BAB9; !important} ul.list-unstyled.bullet-lists li { padding: 5px 0 !important} ul.list-unstyled.bullet-lists li:hover { color: #00BAB9 !important} /* Post Tab */ .post-tab .nav-tabs > li > a { margin-right: -1px; line-height: 1.42857143; border: 1px solid #ddd; border-radius: 0px 0px 0 0; !important} .post-tab .list-group-item:first-child { border-top-left-radius: 0; border-top-right-radius: 0; margin-top: -1px; !important} .post-tab .nav-tabs > li > a:hover, .post-tab .nav-tabs > li > a:focus { color: #FFF; background-color: #FC3; border: 1px solid #ddd; border-bottom-color: transparent; !important} /* Tags */ ul.list-inline.bullet-lists li a { color: inherit !important} ul.list-inline.bullet-lists li { background: #F8F8F8; padding: 5px 10px; margin-bottom: 5px; margin-right: 2px; border: 1px solid #F4F4F4; border-radius: 3px; transition: all 0.3s; !important} ul.list-inline.bullet-lists li:hover { background: #00BAB9 !important} /* Single Blog Post */ .blog-post .post-wrap img, .work-detail img.featured { margin: 20px 0 !important} ul.meta-tags li a { font-style: italic !important} ul.meta-tags li:after { content: ',' !important} ul.meta-tags li:last-child:after { content: ' ' !important} /* Author Box */ .media.post-author { background: #00BAB9; padding: 20px; margin-top: -1px; !important} .media.post-author a { content: inherit !important} .blog-post .post-wrap { padding: 20px; margin-bottom: 0; border: 1px solid #DDDDDD; border-top-right-radius: 4px; border-top-left-radius: 4px; !important} /* Comment */ .media.comment-block { border: 1px solid #DDD; padding: 20px; !important} .comment { margin-top: 40px !important} .comment form { margin-top: -30px !important} .comment input, .comment textarea { margin-bottom: 15px !important}