/*
PURITY HTML Template
Author : Krafft
*/
/* ubuntu-300 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Ubuntu';
font-style: normal;
font-weight: 300;
src: url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-300.eot'); /* IE9 Compat Modes */
src: url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-300.woff') format('woff'), /* Modern Browsers */
url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-300.svg#Ubuntu') format('svg'); /* Legacy iOS */
}
/* ubuntu-300italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Ubuntu';
font-style: italic;
font-weight: 300;
src: url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-300italic.eot'); /* IE9 Compat Modes */
src: url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-300italic.woff') format('woff'), /* Modern Browsers */
url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-300italic.svg#Ubuntu') format('svg'); /* Legacy iOS */
}
/* ubuntu-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
src: url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-regular.eot'); /* IE9 Compat Modes */
src: url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-regular.svg#Ubuntu') format('svg'); /* Legacy iOS */
}
/* ubuntu-italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Ubuntu';
font-style: italic;
font-weight: 400;
src: url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-italic.eot'); /* IE9 Compat Modes */
src: url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-italic.woff') format('woff'), /* Modern Browsers */
url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-italic.svg#Ubuntu') format('svg'); /* Legacy iOS */
}
/* ubuntu-500 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Ubuntu';
font-style: normal;
font-weight: 500;
src: url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-500.eot'); /* IE9 Compat Modes */
src: url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-500.woff') format('woff'), /* Modern Browsers */
url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-500.svg#Ubuntu') format('svg'); /* Legacy iOS */
}
/* ubuntu-500italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Ubuntu';
font-style: italic;
font-weight: 500;
src: url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-500italic.eot'); /* IE9 Compat Modes */
src: url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */
url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-500italic.woff') format('woff'), /* Modern Browsers */
url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-500italic.svg#Ubuntu') format('svg'); /* Legacy iOS */
}
/* ubuntu-700 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
src: url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-700.eot'); /* IE9 Compat Modes */
src: url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-700.woff') format('woff'), /* Modern Browsers */
url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-700.svg#Ubuntu') format('svg'); /* Legacy iOS */
}
/* ubuntu-700italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Ubuntu';
font-style: italic;
font-weight: 700;
src: url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-700italic.eot'); /* IE9 Compat Modes */
src: url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-700italic.woff') format('woff'), /* Modern Browsers */
url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('../css/fonts/ubuntu-v20-latin/ubuntu-v20-latin-700italic.svg#Ubuntu') format('svg'); /* Legacy iOS */
}
/* --------------------------------------------------------------
Contents
1 - Reset
2 - Main Styles
3 - Header
3.1 - Header Fixed
4 - Sidebar
5 - perfect-scrollbar
6 - Portfolio
6.1 - Portolio style 1
6.2 - Portolio style 2
6.3 - Portolio style 3
6.4 - Portolio style 4
6.5 - Portolio style 5
6.6 - Portolio style 6
6.7 - Portolio style 7
7 - Buttons
8 - Client
9 - Blog
9.1 - Home Posts
9.2 - Blog Page
9.2.1 - Blog Page Comments
10 - Parallax Section
11 - Footer
12 - Layerslider Section Custom
13 - Services
14 - Isotope Custom
15 - Portfolio Single
15.1 - Portfolio Single Styles
16 - Magnific Popup CSS
17 - About Page
17.1 - About Style
17.2 - Skills
17.3 - Funfact
17.4 - Team Peoples
18 - Contact
19 - Load Animate
-------------------------------------------------------------- */
/* --------------------------------------------------------------
0 - Wordpress Styles
-------------------------------------------------------------- */
/** wordpress default styles **/
.alignnone {
margin: 0;
}
.aligncenter,
div.aligncenter {
display: block;
margin: 5px auto 5px auto;
}
.alignright {
float:right;
}
.alignleft {
float: left;
}
.aligncenter {
display: block;
}
a img.alignright {
float: right;
}
a img.alignnone {
}
a img.alignleft {
float: left;
}
a img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto
}
/* --------------------------------------------------------------
1 - Reset
-------------------------------------------------------------- */
body{
font-family: 'Ubuntu', sans-serif;
background: #f0f0f0;
}
*,
*:after,
*::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin:0;
padding:0;
text-decoration: none;
list-style-type: none;
outline: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* img val 0 */
img{
outline: none;
border: none;
display: inline;
vertical-align: middle;
}
h1 , h1 a , h1 span ,
h2 , h2 a , h2 span ,
h3 , h3 a , h3 span ,
h4 , h4 a , h4 span ,
h5 , h5 a , h5 span ,
h6 , h6 a , h6 span
{
color: #000000;
font-weight: 700;
text-decoration: none;
padding: 0px;
margin-top: 0px;
}
h1{
font-size: 36px;
}
h2{
font-size: 32px;
}
h3{
font-size: 28px;
}
h4{
font-size: 24px;
}
h5{
font-size: 20px;
}
h6{
font-size: 16px;
}
p{
color: #808080;
line-height: 24px;
font-size: 16px;
margin: 0 0 15px !important;
}
/* color and background */
.color-black{
color: #000 !important;
}
.background-black{
background-color: #000 !important;
}
.border-black{
border-color: #000 !important;
}
.color-white{
color: #fff !important;
}
.background-white{
background-color: #fff !important;
}
.border-white{
border-color: #fff !important;
}
.color-gray{
color: #808080 !important;
}
.background-gray{
background-color: #808080 !important;
}
.border-gray{
border-color: #808080 !important;
}
.color-body{
color: #f0f0f0 !important;
}
.background-body{
background-color: #f0f0f0 !important;
}
.border-body{
border-color: #f0f0f0 !important;
}
.color-aqua{
color: #1dbba3 !important;
}
.background-aqua{
background-color: #1dbba3 !important;
}
.border-aqua{
border-color: #1dbba3 !important;
}
.hidden{
display: none;
visibility: hidden;
}
.visible{
display: inherit !important;
visibility: visible;
}
/* --------------------------------------------------------------
2 - Main Styles
-------------------------------------------------------------- */
/* divider */
.divider-half {
width: 20px;
position: relative;
float: left;
clear: both;
height: 4px;
left:50%;
margin-top:8px;
margin-bottom:8px;
margin-left: -10px;
background: #000;
}
.divider {
width: 100%;
float: left;
clear: both;
height: 1px;
margin:15px 0;
background:#1dbba3;
}
.divider-star {
width: 100%;
position: relative;
float: left;
clear: both;
margin-top:8px;
margin-bottom:8px;
text-align: center;
}
.divider-star:before{
content: "";
width: 20px;
height: 1px;
background: #f0f0f0;
position: absolute;
right: 50%;
margin-right: 20px;
top: 10px;
}
.divider-star:after{
content: "";
width: 20px;
height: 1px;
background: #f0f0f0;
position: absolute;
left: 50%;
margin-left: 20px;
top: 10px;
}
.divider-star i{
font-size: 12px;
color: #1dbba3;
width: 30px;
}
.clear{
clear: both;
}
.transition5s{
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
}
.transition3s{
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
}
.middle{
width: 100%;
float: left;
-webkit-transform: translate(0, 0%);
-ms-transform: translate(0, 0%);
transform: translate(0, 0%);
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
padding-top:100px;
position: relative;
}
.slogan{
width: 100%;
float: left;
text-align: center;
font-weight: 700;
color: #010101;
font-size: 32px;
line-height: 42px;
letter-spacing: 1px;
position: relative;
padding:10.3333%;
text-transform: uppercase;
}
.slogan-small{
font-weight: 400;
font-size: 16px;
text-align: center;
color:#808080;
line-height: 30px;
float: left;
width: 100%;
margin-top: 10px;
letter-spacing: 0px;
z-index: 2;
position: relative;
text-transform: none;
}
body.sidebar-active .middle{
-webkit-transform: translate(-360px, 0%);
-ms-transform: translate(-360px, 0%);
transform: translate(-360px, 0%);
}
body.no-responsive .container{
width: 1200px !important;
}
input::-webkit-input-placeholder { /* WebKit browsers */
color: #808080;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #808080;
opacity: 1;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #808080;
opacity: 1;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #808080;
}
textarea::-webkit-input-placeholder { /* WebKit browsers */
color: #808080;
}
textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #808080;
opacity: 1;
}
textarea::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #808080;
opacity: 1;
}
textarea:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #808080;
}
.margin{
float: left;
clear: both;
width: 100%;
display: block;
margin-top: 15px;
margin-bottom: 15px;
}
.margin-half {
float: left;
clear: both;
width: 100%;
display: block;
margin-top: 8px;
margin-bottom: 8px;
}
.margin-top{
margin-top: 50px;
}
.margin-80-top{
margin-top: 80px;
}
.margin-bottom{
margin-bottom: 50px;
}
.margin-80-bottom{
margin-bottom: 80px;
}
.padding-top{
padding-top: 50px;
}
.padding-80-top{
padding-top: 80px;
}
.padding-bottom{
padding-bottom: 50px;
}
.padding-80-bottom{
padding-bottom: 80px;
}
.padding-left-right{
padding-left:15px;
padding-right:15px;
}
section,
.section,
.middle,
.sidebar{
width: 100%;
float: left;
display: block;
clear: both;
background: #fff;
}
.section-border{
border-top:1px solid #f0f0f0;
}
.section-header{
width: 100%;
float: left;
position: relative;
margin-bottom: 30px;
}
.section-header .title{
width: 100%;
float: left;
position: relative;
color: #000;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1px;
font-size: 18px;
}
.section-header .text{
width: 100%;
float: left;
position: relative;
font-size: 16px;
color: #808080;
font-weight: 400;
line-height: 24px;
margin-top: 10px;
}
.section-header span{
color: #808080;
}
.section-title{
font-size: 14px;
text-align: center;
color: #000000;
font-weight: 700;
float: left;
width: 100%;
margin-bottom: 5px;
text-transform: uppercase;
letter-spacing: 1px;
padding-left:10%;
padding-right:10%;
position: relative;
}
.section-big-title{
font-size: 24px;
text-align: center;
color: #000000;
font-weight: 700;
float: left;
width: 100%;
margin-bottom: 5px;
text-transform: uppercase;
letter-spacing: 1px;
padding-left:10%;
padding-right:10%;
position: relative;
}
.section-paragraph{
font-size: 16px;
color: #808080;
text-align: center;
font-weight: 400;
float: left;
width: 100%;
margin-top: 5px;
padding-left:10%;
padding-right:10%;
position: relative;
}
/* full width slider */
.FullWslider,
.FullWslider .slides{
width: 100%;
float: left;
position: relative;
}
.section .FullWslider{
margin:0;
}
.FullWslider{
background: #f0f0f0;
}
.FullWslider .slides{
overflow: hidden;
height: 600px;
}
.FullWslider .slides .slide{
position: absolute;
top:0;
left:0;
height: 100%;
width: 100%;
}
.FullWslider .slides .slide img{
max-width: 100%;
position: absolute;
left: 50%;
top: 50%;
height: auto;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.portfolio-single.section .FullWslider .slide-arrow{
color: #808080;
font-size: 24px;
background: transparent;
}
.section .FullWslider .slide-arrow{
color: #fff;
font-size: 20px;
background: rgba(0, 0, 0, .8);
}
.FullWslider .slide-arrow {
position: absolute;
top:50%;
width: 40px;
height: 40px;
margin-top:-20px;
line-height: 40px;
text-align: center;
font-size: 24px;
color: #808080;
cursor: pointer;
z-index: 10;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
}
.portfolio-single.section .FullWslider .slide-arrow:hover{
background: transparent;
color:#1dbba3;
}
.section .FullWslider .slide-arrow:hover{
background: rgba(0, 0, 0, 1);
}
.FullWslider .slide-arrow:hover{
background: rgba(255,255,255,1);
color: #808080;
}
.FullWslider .arrow-right.slide-arrow{
right: 15px;
}
.FullWslider .arrow-right.slide-arrow:hover{
right: 10px;
}
.FullWslider .arrow-left.slide-arrow{
left: 15px;
}
.FullWslider .arrow-left.slide-arrow:hover{
left: 10px;
}
.section .FullWslider .arrow-right.slide-arrow{
right: 30px;
}
.section .FullWslider .arrow-right.slide-arrow:hover{
right: 25px;
}
.section .FullWslider .arrow-left.slide-arrow{
left: 30px;
}
.section .FullWslider .arrow-left.slide-arrow:hover{
left: 25px;
}
.blog-post .FullWslider .arrow-right.slide-arrow{
right: 0;
background: rgba(0,0,0,0.6);
font-size: 18px;
color: #fff;
}
.blog-post .FullWslider .arrow-right.slide-arrow:hover{
background: rgba(0,0,0,1);
right: 0;
}
.blog-post .FullWslider .arrow-left.slide-arrow{
left: 0;
background: rgba(0,0,0,0.6);
font-size: 18px;
color: #fff;
}
.blog-post .FullWslider .arrow-left.slide-arrow:hover{
background: rgba(0,0,0,1);
left: 0;
}
/* --------------------------------------------------------------
3 - Header
-------------------------------------------------------------- */
header{
width: 100%;
float: left;
position: fixed;
top: 0;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transform: translate(0px,-103px);
-webkit-transform:translate(0px,-103px);
-moz-transform:translate(0px,-103px);
transform: translate(0px,-100px);
z-index: 100;
}
header.no-fixed{
-ms-transform: translate(0px,0px) !important;
-webkit-transform:translate(0px,0px) !important;
-moz-transform:translate(0px,0px) !important;
transform: translate(0px,0px) !important;
position: absolute !important;
}
.sidebar-active header.no-fixed{
-ms-transform: translate(-360px,0px) !important;
-webkit-transform:translate(-360px,0px) !important;
-moz-transform:translate(-360px,0px) !important;
transform: translate(-360px,0px) !important;
}
.sidebar-active header{
-ms-transform: translate(-360px,-103px);
-webkit-transform:translate(-360px,-103px);
-moz-transform:translate(-360px,-103px);
transform: translate(-360px,-100px);
}
.sidebar-active .header-visible{
-ms-transform: translate(-360px,0px);
-webkit-transform:translate(-360px,0px);
-moz-transform:translate(-360px,0px);
transform: translate(-360px,0px);
}
.header-visible{
-ms-transform: translate(0px,0px);
-moz-transform: translate(0px,0px);
-webkit-transform: translate(0px,0px);
transform: translate(0px,0px);
}
.header-content{
height: 103px;
border-bottom: 3px solid #f0f0f0;
position: relative;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
}
.header-content .logo{
float: left;
line-height: 100px;
padding:0 15px;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
}
.header-content .logo img{
max-height: 80px;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
}
.header-content .nav{
height: 100px;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
}
.header-content .nav,
.header-content .menu,
.header-content .nav .search,
.header-content .nav .sidebar-control{
float: right;
margin-bottom: 0;
position: relative;
z-index: 2;
}
.header-content .menu li,.header-content .menu li a{
float: left;
position: relative;
}
.header-content .menu li a{
border-bottom: 3px solid transparent;
}
.header-content .menu li a,
.header-content .nav .search{
line-height: 100px;
height: 100px;
padding:0 15px;
text-decoration: none !important;
text-transform: uppercase;
font-weight: 500;
font-size: 12px;
color: #000;
cursor: pointer;
}
.header-content .nav .sidebar-control{
height: 100%;
position: relative;
padding:0 15px;
cursor: pointer;
z-index: 1000;
}
.header-content .nav .sidebar-control .nav-icon{
float: left;
width: 13px;
height: 12px;
position: absolute;
top:50%;
margin-top:-6px;
z-index: 2;
}
.header-content .nav .sidebar-control .sidebar-close{
float: left;
width: 13px;
position: relative;
line-height: 100px;
color: #000;
text-align:center;
transition-delay:.8s;
-webkit-transition-delay:.8s;
-ms-transition-delay:.8s;
opacity: 0;
z-index: 1;
}
.header-content .nav .sidebar-control.active .sidebar-close{
opacity: 1;
z-index: 3;
}
.header-content .nav .sidebar-control .nav-icon span{
float: left;
width: 100%;
height: 2px;
margin:1px 0;
background: #000;
position: relative;
left:0;
}
.header-content .nav .sidebar-control .nav-icon span:nth-child(1){
transition-delay:.2s;
-webkit-transition-delay:.2s;
-ms-transition-delay:.2s;
}
.header-content .nav .sidebar-control .nav-icon span:nth-child(2){
transition-delay:.4s;
-webkit-transition-delay:.4s;
-ms-transition-delay:.4s;
}
.header-content .nav .sidebar-control .nav-icon span:nth-child(3){
transition-delay:.6s;
-webkit-transition-delay:.6s;
-ms-transition-delay:.6s;
}
.header-content .menu li a,
.header-content .nav .search,
.header-content .nav .sidebar-control .nav-icon span,
.header-content .nav .sidebar-control .sidebar-close{
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
}
.header-content .menu li:hover a,
.header-content .nav .search:hover,
.header-content .nav .sidebar-control:hover .sidebar-close{
color: #1dbba3;
}
.header-content .menu li:hover a{
border-bottom:3px solid #fff;
}
.header-content .nav .sidebar-control:hover .nav-icon span{
background: #1dbba3;
}
.header-content .nav .sidebar-control.active .nav-icon span{
left:-20px;
opacity: 0;
}
.header-content .menu li.have-drop a .icon{
padding-left: 6px;
font-weight: 700;
display: initial;
}
.header-content .menu li.have-drop .icon{
display: none;
}
.header-content .menu li.have-drop ul li a .icon{
display: none;
}
.header-content .menu li ul{
position: absolute;
top: 100px;
width: 190px;
display: none;
background: #fff;
border-top: 0;
border-right: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;
border-left: 1px solid #f0f0f0;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
}
.header-content .menu li ul li{
width: 100%;
}
.header-content .menu li ul li a{
line-height: 40px;
height: 40px;
color: #606060 !important;
width: 100%;
border-bottom:1px solid #f0f0f0 !important;
text-transform: none;
font-weight: 400;
}
.header-content .menu li ul li:first-child a {
border-top: 3px solid #1dbba3 !important;
}
.header-content .menu li ul li:last-child a {
border-bottom: 0 !important;
}
.header-content .menu li ul li a:hover{
background: #fff;
padding-left: 20px;
}
.header-content .menu li ul li:hover a{
color: #1dbba3 !important;
}
.header-content .search-box{
width: 100%;
position: absolute;
left:0;
top:-100%;
height: 100%;
background: transparent;
z-index: 5;
transition:.2s cubic-bezier(1,0,.5,1);
-webkit-transition:.2s cubic-bezier(1,0,.5,1);
-ms-transition:.2s cubic-bezier(1,0,.5,1);
overflow: hidden;
}
.header-content .search-box.search-box-active{
top:0;
background: #262626;
}
.header-content .search-box .search-inner-box form,
.header-content .search-box .search-inner-box{
height: 100%;
float: left;
width: 100%;
}
.header-content .search-box .search-inner-box button,
.header-content .search-box .search-inner-box input{
background: #262626;
height: 100%;
float: left;
border:none;
outline: none;
}
.header-content .search-box .search-inner-box button{
position: absolute;
left:-20px;
opacity: 0;
padding:0 30px;
color: #606060;
font-size: 16px;
width: 75px;
z-index: 5;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
transition-delay:.4s;
-webkit-transition-delay:.4s;
-ms-transition-delay:.4s;
}
.header-content .search-box.search-box-active .search-inner-box button{
left:0;
opacity: 1;
}
.header-content .search-box .search-inner-box input{
position: absolute;
left:0;
opacity: 0;
padding:0 30px 0 100px;
color: #606060;
font-size: 16px;
width: 100%;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
transition-delay:.2s;
-webkit-transition-delay:.2s;
-ms-transition-delay:.2s;
}
.header-content .search-box .search-inner-box input::-webkit-input-placeholder { /* WebKit browsers */
color: #606060;
}
.header-content .search-box .search-inner-box input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #606060;
opacity: 1;
}
.header-content .search-box .search-inner-box input::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #606060;
opacity: 1;
}
.header-content .search-box .search-inner-box input:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #606060;
}
.header-content .search-box.search-box-active .search-inner-box input{
padding:0 30px 0 75px;
opacity: 1;
}
.header-content .search-box .search-inner-box .search-box-close{
position: absolute;
right: -20px;
opacity: 0;
width: 75px;
left: inherit;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
transition-delay:1s;
-webkit-transition-delay:1s;
-ms-transition-delay:1s;
}
.header-content .search-box .search-inner-box button:hover{
transition-delay:0s;
-webkit-transition-delay:0s;
-ms-transition-delay:0s;
color: #fff;
}
.header-content .search-box.search-box-active .search-inner-box .search-box-close{
right: 0;
opacity: 1;
left: inherit;
}
.toggle{
position: absolute;
left:30px;
top:0;
line-height: 60px;
font-size: 18px;
color: #000000;
cursor: pointer;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
display: none;
}
.mobile-nav-active-logo{
position: absolute;
width: 50%;
left: 25%;
text-align: center;
line-height: 63px;
display: none;
z-index: 4;
}
/* --------------------------------------------------------------
3.1 - Header Fixed
-------------------------------------------------------------- */
header.header-fixed{
-ms-transform: translate(0px,-100px);
-webkit-transform:translate(0px,-100px);
-moz-transform:translate(0px,-100px);
transform: translate(0px,-100px);
}
.sidebar-active header.header-fixed{
-ms-transform: translate(-360px,-100px);
-webkit-transform:translate(-360px,-100px);
-moz-transform:translate(-360px,-100px);
transform: translate(-360px,-100px);
}
.sidebar-active header.header-visible{
-ms-transform: translate(-360px,0px);
-webkit-transform:translate(-360px,0px);
-moz-transform:translate(-360px,0px);
transform: translate(-360px,0px);
}
.header-fixed.header-visible{
-ms-transform: translate(0px,0px);
-moz-transform: translate(0px,0px);
-webkit-transform: translate(0px,0px);
transform: translate(0px,0px);
}
/* header fixed height 60px
.header-fixed .header-content{
height: 60px;
}
.header-fixed .header-content .logo{
line-height: 60px;
}
.header-fixed .header-content .logo img{
max-height: 40px;
}
.header-fixed .header-content .nav{
height: 60px;
}
.header-fixed .header-content .menu li a,
.header-fixed .header-content .nav .search,
.header-fixed .header-content .nav .sidebar-control .sidebar-close{
line-height: 60px;
height: 60px;
}
.header-fixed .header-content .menu li ul li a{
height: 40px;
line-height: 40px;
}
.header-fixed .header-content .menu li ul{
top:60px;
}
*/
/* --------------------------------------------------------------
4 - Sidebar
-------------------------------------------------------------- */
body.sidebar-active .sidebar .sidebar-wrapper{
-webkit-transform: translate(0, 0%);
-ms-transform: translate(0, 0%);
transform: translate(-0, 0%);
opacity: 1;
}
body.sidebar-active .sidebar{
width: 360px;
}
.sidebar{
width: 0;
height: 100%;
position: fixed;
right: 0px;
top:0;
overflow: hidden;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
z-index: 102;
}
/*.sidebar-overflow{
width: 100%;
height: 100%;
position: fixed;
top:0;
left:0;
z-index: 101;
display: none;
}*/
.sidebar-wrapper{
position: absolute;
top:0;
-webkit-transform: translate(360px, 0%);
-ms-transform: translate(360px, 0%);
transform: translate(360px, 0%);
right: 0;
width: 360px;
height: 100%;
background: #fff;
padding:45px;
opacity: 0;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
overflow: hidden;
z-index: 1;
}
.widgets-wrapper{
width: 100%;
float: left;
}
.widgets-wrapper .widget{
width: 100%;
float: left;
position: relative;
margin-bottom: 20px;
-webkit-transform: translate(100%, 0%);
-ms-transform: translate(100%, 0%);
transform: translate(100%, 0%);
opacity: 0;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
}
body.sidebar-active .sidebar .sidebar-wrapper .widget{
-webkit-transform: translate(-0%, 0%);
-ms-transform: translate(-0%, 0%);
transform: translate(-0%, 0%);
opacity: 1;
}
.widgets-wrapper .widget .widget-title,
.widgets-wrapper .widget h3{
width: 100%;
float: left;
padding-bottom: 15px;
font-size: 13px;
color: #000;
font-weight: 700;
text-transform: uppercase;
margin:0;
}
.widgets-wrapper .widget .widget-content,
.widgets-wrapper .widget .widget-content ul li,
.widgets-wrapper .widget .widget-content ul li a,
.widgets-wrapper .widget .widget-content .popular-post,
.widgets-wrapper .widget .widget-content .popular-post a,
.widgets-wrapper .widget .widget-content .popular-post a .title,
.widgets-wrapper .widget .widget-content .popular-post a .image{
float: left;
width: 100%;
}
.widgets-wrapper .widget .widget-content ul li a{
padding:13px 0;
color: #808080;
text-decoration: none !important;
border-bottom:1px solid #f0f0f0;
position: relative;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
}
.widgets-wrapper .widget .widget-content ul li:first-child a{
padding-top: 0;
}
.widgets-wrapper .widget .widget-content ul li:last-child a{
border-bottom:1px solid transparent;
}
.widgets-wrapper .widget .widget-content ul li a:before{
content: "\f0f6";
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
margin-right: 10px;
}
.widgets-wrapper .widget .widget-content ul li a:after{
content: "";
width: 0%;
height: 100%;
border-bottom:1px solid #1dbba3;
position: absolute;
top:1px;
left: 0;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
}
.widgets-wrapper .widget .widget-content ul li a:hover{
color: #1dbba3;
}
.widgets-wrapper .widget .widget-content ul li a:hover:after{
width: 100%;
}
.widgets-wrapper .widget .widget-content .popular-post{
margin:10px 0;
}
.widgets-wrapper .widget .widget-content .popular-post a{
height: 180px;
position: relative;
overflow: hidden;
color: #ffffff;
font-size: 14px;
line-height: 26px;
}
.widgets-wrapper .widget .widget-content .popular-post a .image{
position: relative;
height: 180px;
float: left;
}
.widgets-wrapper .widget .widget-content .popular-post a .image img{
position: absolute;
left: 50%;
top: 50%;
width: 104%;
height: auto;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.widgets-wrapper .widget .widget-content .popular-post a .title{
position: absolute;
bottom: 0;
left: 0;
padding:20px;
background: rgba(0,0,0,0.7);
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
}
.widgets-wrapper .widget .widget-content .popular-post a:hover .title{
background: rgba(0,0,0,0.9);
}
.widgets-wrapper .widget .widget-content .tweet{
width: 100%;
float: left;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom:1px solid #f0f0f0;
}
.widgets-wrapper .widget .widget-content .tweet p{
line-height: 24px;
color: #808080;
font-size: 14px;
}
.widgets-wrapper .widget .widget-content .tweet:last-child{
border-bottom:1px solid transparent;
padding-bottom: 0;
margin-bottom: 0;
}
.widgets-wrapper .widget .widget-content .tweet a{
color: #000000;
}
.widgets-wrapper .widget .widget-content .tweet span{
color: #1dbba3;
width: 100%;
float: left;
font-style: italic;
}
.widgets-wrapper .widget .widget-content .flickr-wrapper,
.widgets-wrapper .widget .widget-content .slides,
.widgets-wrapper .widget .widget-content .slider{
width: 100%;
float: left;
position: relative;
}
.widgets-wrapper .widget .widget-content .slider{
margin:10px 0;
}
.widgets-wrapper .widget .widget-content .slider .slides{
height: 210px;
overflow: hidden;
}
.widgets-wrapper .widget .widget-content .slider .slides .slide{
position: absolute;
top:0;
left:0;
height: 100%;
width: 100%;
}
.widgets-wrapper .widget .widget-content .slider .slides .slide img{
min-width: 100%;
position: absolute;
left: 50%;
top: 50%;
height: auto;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.widgets-wrapper .widget .widget-content .slider .slide-arrow {
position: absolute;
width: 40px;
height: 40px;
background: rgba(0,0,0,.8);
line-height: 40px;
text-align: center;
font-size: 18px;
color: #fff;
cursor: pointer;
z-index: 10;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
}
.widgets-wrapper .widget .widget-content .slider .slide-arrow:hover{
background: rgba(0,0,0,1);
}
.widgets-wrapper .widget .widget-content .slider .arrow-right.slide-arrow{
right: 0;
bottom:0;
}
.widgets-wrapper .widget .widget-content .slider .arrow-left.slide-arrow{
right: 42px;
bottom:0;
}
.widgets-wrapper .widget .recent-tab-widget{
overflow: hidden;
}
.widgets-wrapper .widget .recent-tab-widget,
.widgets-wrapper .widget .recent-tab-widget .recent-tab-nav,
.widgets-wrapper .widget .recent-tab-widget .recent-tab-contents{
width: 100%;
float: left;
position: relative;
}
.widgets-wrapper .widget .recent-tab-widget .recent-tab-nav div{
width: 33.333%;
float: left;
text-align: center;
line-height: 50px;
font-weight: 700;
font-size: 12px;
color: #808080;
border-left:1px solid #f0f0f0;
border-top:1px solid #f0f0f0;
border-bottom:1px solid #f0f0f0;
cursor: pointer;
}
.widgets-wrapper .widget .recent-tab-widget .recent-tab-nav div.active{
border-bottom:1px solid transparent;
color: #000;
}
.widgets-wrapper .widget .recent-tab-widget .recent-tab-nav div:last-child{
border-right:1px solid #f0f0f0;
}
.widgets-wrapper .widget .recent-tab-widget .recent-tab-contents{
position: relative;
width: 100%;
float: left;
left: 0;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transform: translate(0%, 0%);
-ms-transform: translate(0%, 0%);
transform: translate(0%, 0%);
}
.widgets-wrapper .widget .recent-tab-widget .recent-tab-contents .recent-tab-content{
width: 100%;
float: left;
position: absolute;
top:0;
left:0;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transform: translate(0%, 0%);
-ms-transform: translate(0%, 0%);
transform: translate(0%, 0%);
}
.widgets-wrapper .widget .recent-tab-widget .recent-tab-contents .recent-tab-content-posts,
.widgets-wrapper .widget .recent-tab-widget .recent-tab-contents .recent-tab-content-posts .recent-tab-content-post,
.widgets-wrapper .widget .recent-tab-widget .recent-tab-contents .recent-tab-content-comments,
.widgets-wrapper .widget .recent-tab-widget .recent-tab-contents .recent-tab-content-comments .recent-tab-content-comment,
.tags{
width: 100%;
float: left;
position: relative;
}
.widgets-wrapper .widget .recent-tab-widget .recent-tab-contents .recent-tab-content-posts .recent-tab-content-post{
padding:20px 0;
border-bottom:1px solid #f0f0f0;
overflow: hidden;
}
.widgets-wrapper .widget .recent-tab-widget .recent-tab-contents .recent-tab-content-posts .recent-tab-content-post:last-child{
padding:20px 0 0 0;
}
.widgets-wrapper .widget .recent-tab-widget .recent-tab-contents .recent-tab-content-posts .recent-tab-content-post:last-child,
.widgets-wrapper .widget .recent-tab-widget .recent-tab-contents .recent-tab-content-comments .recent-tab-content-comment:last-child{
border-bottom:0px solid #f0f0f0;
}
.widgets-wrapper .widget .recent-tab-widget .recent-tab-contents .recent-tab-content-posts .recent-tab-content-post .recent-tab-content-post-image{
width: 40%;
float: left;
padding-right: 10px;
position: absolute;
height: 80px;
overflow: hidden;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
top:20px;
}
/* Sidebar tab in post image hover
.widgets-wrapper .widget .recent-tab-widget .recent-tab-contents .recent-tab-content-posts .recent-tab-content-post:hover .recent-tab-content-post-image{
top:0;
width: 100%;
height: 100%;
}
.widgets-wrapper .widget .recent-tab-widget .recent-tab-contents .recent-tab-content-posts .recent-tab-content-post:hover .recent-tab-content-post-info{
background: rgba(0,0,0,0.8);
color: #fff;
text-decoration: none !important;
}
*/
.widgets-wrapper .widget .recent-tab-widget .recent-tab-contents .recent-tab-content-posts .recent-tab-content-post:hover .recent-tab-content-post-info{
color: #1dbba3;
text-decoration: none !important;
}
.widgets-wrapper .widget .recent-tab-widget .recent-tab-contents .recent-tab-content-posts .recent-tab-content-post .recent-tab-content-post-image img{
width: 100%;
position: absolute;
left: 50%;
top: 50%;
height: auto;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.widgets-wrapper .widget .recent-tab-widget .recent-tab-contents .recent-tab-content-posts .recent-tab-content-post .recent-tab-content-post-info{
float: right;
width: 60%;
padding-left: 10px;
position: relative;
color: #000000;
line-height: 24px;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
}
.widgets-wrapper .widget .recent-tab-widget .recent-tab-contents .recent-tab-content-posts .recent-tab-content-post .recent-tab-content-post-info .date{
width: 100%;
float: left;
color: #808080;
}
.widgets-wrapper .widget .recent-tab-widget .recent-tab-contents .recent-tab-content-comments .recent-tab-content-comment{
padding:10px 0 10px 10px;
margin-top:10px;
border-bottom: 1px solid #f0f0f0;
}
.widgets-wrapper .widget .recent-tab-widget .recent-tab-contents .recent-tab-content-comments .recent-tab-content-comment a{
color: #808080;
}
.widgets-wrapper .widget .recent-tab-widget .recent-tab-contents .recent-tab-content-comments .recent-tab-content-comment a:before{
content: "\f105";
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
position: absolute;
left:0;
top:12.5px;
}
.tags{
margin-top: 20px;
}
.tags .tag{
float: left;
margin-left:3px;
margin-top:3px;
padding:10px 14px;
background: #f0f0f0;
font-size: 12px;
color: #808080;
text-decoration: none !important;
transition:.1s linear;
-webkit-transition:.1s linear;
-ms-transition:.1s linear;
}
.tags .tag:hover{
background:#1dbba3;
color:#fff !important;
border:none !important;
}
/* --------------------------------------------------------------
5 - perfect-scrollbar
-------------------------------------------------------------- */
/* perfect-scrollbar v0.6.2 */
.ps-container {
overflow: hidden !important; }
.ps-container.ps-active-x > .ps-scrollbar-x-rail, .ps-container.ps-active-y > .ps-scrollbar-y-rail {
display: block; }
.ps-container.ps-in-scrolling {
pointer-events: none; }
.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
background-color: #eee;
opacity: 0.9; }
.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
background-color: #999; }
.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
background-color: #eee;
opacity: 0.9; }
.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
background-color: #999; }
.ps-container > .ps-scrollbar-x-rail {
display: none;
position: absolute;
/* plcubic-bezier(1,0,.5,1) don't change 'position' */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
opacity: 0;
-webkit-transition: background-color .2s linear, opacity .2s linear;
-moz-transition: background-color .2s linear, opacity .2s linear;
-o-transition: background-color .2s linear, opacity .2s linear;
transition: background-color .2s linear, opacity .2s linear;
bottom: 3px;
/* there must be 'bottom' for ps-scrollbar-x-rail */
height: 8px; }
.ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x {
position: absolute;
/* plcubic-bezier(1,0,.5,1) don't change 'position' */
background-color: #aaa;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
-webkit-transition: background-color .2s linear;
-moz-transition: background-color .2s linear;
-o-transition: background-color .2s linear;
transition: background-color .2s linear;
bottom: 0;
/* there must be 'bottom' for ps-scrollbar-x */
height: 8px; }
.ps-container > .ps-scrollbar-y-rail {
display: none;
position: absolute;
/* plcubic-bezier(1,0,.5,1) don't change 'position' */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
opacity: 0;
-webkit-transition: background-color .2s linear, opacity .2s linear;
-moz-transition: background-color .2s linear, opacity .2s linear;
-o-transition: background-color .2s linear, opacity .2s linear;
transition: background-color .2s linear, opacity .2s linear;
right: 3px;
/* there must be 'right' for ps-scrollbar-y-rail */
width: 6px; }
.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
position: absolute;
/* plcubic-bezier(1,0,.5,1) don't change 'position' */
background-color: #aaa;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
-webkit-transition: background-color .2s linear;
-moz-transition: background-color .2s linear;
-o-transition: background-color .2s linear;
transition: background-color .2s linear;
right: 0;
/* there must be 'right' for ps-scrollbar-y */
width: 6px; }
.ps-container:hover.ps-in-scrolling {
pointer-events: none; }
.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
background-color: #eee;
opacity: 0.9; }
.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
background-color: #999; }
.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
background-color: #eee;
opacity: 0.9; }
.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
background-color: #999; }
.ps-container:hover > .ps-scrollbar-x-rail, .ps-container:hover > .ps-scrollbar-y-rail {
opacity: 0.6; }
.ps-container:hover > .ps-scrollbar-x-rail:hover {
background-color: #eee;
opacity: 0.9; }
.ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x {
background-color: #999; }
.ps-container:hover > .ps-scrollbar-y-rail:hover {
background-color: #eee;
opacity: 0.9; }
.ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y {
background-color: #999; }
/* --------------------------------------------------------------
6 - Portfolio
-------------------------------------------------------------- */
.portfolio-section,
.portfolio-section .portfolio-works,
.portfolio-section .portfolio-works .portfolio-work .portfolio-work-assets,
.portfolio-section .portfolio-works .portfolio-work .portfolio-work-info,
.portfolio-section .portfolio-works .portfolio-work .portfolio-work-info .portfolio-work-info-in,
.portfolio-section .portfolio-works .portfolio-work .portfolio-work-info .portfolio-work-info-in .portfolio-work-info-title,
.portfolio-section .portfolio-works .portfolio-work .portfolio-work-info .portfolio-work-info-in .portfolio-work-info-title a,
.portfolio-section .portfolio-works .portfolio-work .portfolio-work-info .portfolio-work-info-in .portfolio-work-info-category,
.portfolio-section .portfolio-works .portfolio-work .portfolio-work-info .portfolio-work-info-in .portfolio-work-info-description,
.portfolio-section .portfolio-works .portfolio-work .portfolio-work-info .portfolio-work-info-in .portfolio-work-info-description a{
width: 100%;
float: left;
position: relative;
}
.portfolio-section{
overflow: hidden;
}
.portfolio-section .portfolio-works .portfolio-work{
width: 25%;
float: left;
position: relative;
overflow: hidden;
}
.grid-sizer{
width: 25%;
display: block !important;
}
.portfolio-section .portfolio-works .portfolio-work .portfolio-work-assets{
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
}
.portfolio-section .portfolio-works .portfolio-work .portfolio-work-assets img{
position: absolute;
left: 50%;
top: 50%;
width: auto;
min-width: 100%;
min-height: 100%;
max-height: 120%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
}
.portfolio-section .portfolio-works .portfolio-work:hover .portfolio-work-assets img{
filter: url("data:image/svg+xml;utf8,#grayscale");
-webkit-filter: grayscale(0%);
}
.portfolio-section .portfolio-works .portfolio-work:hover .portfolio-work-assets{
transform:scale(1.2) rotate(2deg);
-webkit-transform:scale(1.2) rotate(2deg);
-moz-transform:scale(1.2) rotate(2deg);
-ms-transform:scale(1.2) rotate(2deg);
}
.portfolio-section .portfolio-works .portfolio-work .portfolio-work-info{
position: absolute;
top:15px;
left: 15px;
text-align: center;
width: calc(100% - 30px);
height: calc(100% - 30px);
background: rgba(0,0,0,0.8);
padding: 0 10%;
letter-spacing: 1px;
color: #fff;
opacity: 0;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
transform:scale(.8) rotate(2deg);
-webkit-transform:scale(.8) rotate(2deg);
-moz-transform:scale(.8) rotate(2deg);
-ms-transform:scale(.8) rotate(2deg);
}
.portfolio-section .portfolio-works .portfolio-work:hover .portfolio-work-info{
opacity: 1;
transform:scale(1) rotate(0deg);
-webkit-transform:scale(1) rotate(0deg);
-moz-transform:scale(1) rotate(0deg);
-ms-transform:scale(1) rotate(0deg);
border-radius: 0%;
}
.portfolio-section .portfolio-works .portfolio-work .portfolio-work-info .portfolio-work-info-title{
font-size: 18px;
font-weight: 700;
color: #fff;
margin-top: 0px;
margin-bottom: 5px;
text-transform: uppercase;
}
.portfolio-section .portfolio-works .portfolio-work .portfolio-work-info .portfolio-work-info-category{
font-size: 12px;
color: #fff;
margin-bottom: 5px;
display: inline-block;
}
.portfolio-section .portfolio-works .portfolio-work .portfolio-work-info .portfolio-work-info-description{
display: none;
}
.portfolio-section .portfolio-works .portfolio-work.w50{
width: 50%;
}
.portfolio-section .portfolio-works .portfolio-work.w50 .portfolio-work-info .portfolio-work-info-description{
display: inline-block;
font-size: 14px;
color: #fff;
margin-top: 2px;
line-height: 24px;
}
.portfolio-section .portfolio-works .portfolio-work.w75{
width: 75%;
}
.portfolio-section .portfolio-works .portfolio-work.w75 .portfolio-work-info .portfolio-work-info-description{
display: inline-block;
font-size: 14px;
color: #fff;
margin-top: 2px;
line-height: 24px;
}
/* --------------------------------------------------------------
6.1 - Portolio style 1
-------------------------------------------------------------- */
/* Box Background */
.portfolio-section.portfolio-style-1 .portfolio-works .portfolio-work .portfolio-work-info,
.portfolio-section.isotope-style-1 .portfolio-works .portfolio-work .portfolio-work-info{
background: rgba(0,0,0,0.8);
color: #fff;
}
/* Box title text style */
.portfolio-section.isotope-style-1 .portfolio-works .portfolio-work .portfolio-work-info .portfolio-work-info-title,
.portfolio-section.portfolio-style-1 .portfolio-works .portfolio-work .portfolio-work-info .portfolio-work-info-title{
font-size: 18px;
font-weight: 700;
color: #fff;
}
/* Box category text style */
.portfolio-section.isotope-style-1 .portfolio-works .portfolio-work .portfolio-work-info .portfolio-work-info-category,
.portfolio-section.portfolio-style-1 .portfolio-works .portfolio-work .portfolio-work-info .portfolio-work-info-category{
font-size: 12px;
color: #fff;
}
/* Box description text style */
.portfolio-section.isotope-style-1 .portfolio-works .portfolio-work.w50 .portfolio-work-info .portfolio-work-info-description,
.portfolio-section.portfolio-style-1 .portfolio-works .portfolio-work.w50 .portfolio-work-info .portfolio-work-info-description{
font-size: 14px;
margin-top: 2px;
line-height: 24px;
color: #fff;
}
.portfolio-section.isotope-style-1 .portfolio-works .portfolio-work.w75 .portfolio-work-info .portfolio-work-info-description,
.portfolio-section.portfolio-style-1 .portfolio-works .portfolio-work.w75 .portfolio-work-info .portfolio-work-info-description{
font-size: 14px;
margin-top: 2px;
line-height: 24px;
color: #fff;
}
/* --------------------------------------------------------------
6.2 - Portolio style 2
-------------------------------------------------------------- */
/* Box Background */
.portfolio-section.isotope-style-2 .portfolio-works .portfolio-work .portfolio-work-info,
.portfolio-section.portfolio-style-2 .portfolio-works .portfolio-work .portfolio-work-info,
.portfolio-section.isotope-style-white .portfolio-works .portfolio-work .portfolio-work-info,
.portfolio-section.portfolio-style-white .portfolio-works .portfolio-work .portfolio-work-info{
background: rgba(255,255,255,0.9) !important;
}
/* Box title text style */
.portfolio-section.isotope-style-2 .portfolio-works .portfolio-work .portfolio-work-info .portfolio-work-info-title,
.portfolio-section.portfolio-style-2 .portfolio-works .portfolio-work .portfolio-work-info .portfolio-work-info-title,
.portfolio-section.isotope-style-white .portfolio-works .portfolio-work .portfolio-work-info .portfolio-work-info-title,
.portfolio-section.portfolio-style-white .portfolio-works .portfolio-work .portfolio-work-info .portfolio-work-info-title{
font-size: 18px !important;
font-weight: 700 !important;
color: #000000 !important;
}
/* Box category text style */
.portfolio-section.isotope-style-2 .portfolio-works .portfolio-work .portfolio-work-info .portfolio-work-info-category,
.portfolio-section.portfolio-style-2 .portfolio-works .portfolio-work .portfolio-work-info .portfolio-work-info-category,
.portfolio-section.isotope-style-white .portfolio-works .portfolio-work .portfolio-work-info .portfolio-work-info-category,
.portfolio-section.portfolio-style-white .portfolio-works .portfolio-work .portfolio-work-info .portfolio-work-info-category{
font-size: 12px !important;
color: #000000 !important;
}
/* Box description text style */
.portfolio-section.isotope-style-2 .portfolio-works .portfolio-work.w50 .portfolio-work-info .portfolio-work-info-description,
.portfolio-section.portfolio-style-2 .portfolio-works .portfolio-work.w50 .portfolio-work-info .portfolio-work-info-description,
.portfolio-section.isotope-style-white .portfolio-works .portfolio-work.w50 .portfolio-work-info .portfolio-work-info-description,
.portfolio-section.portfolio-style-white .portfolio-works .portfolio-work.w50 .portfolio-work-info .portfolio-work-info-description{
font-size: 14px !important;
margin-top: 2px !important;
line-height: 24px !important;
color: #000000 !important;
}
/* Box description text style */
.portfolio-section.isotope-style-2 .portfolio-works .portfolio-work.w75 .portfolio-work-info .portfolio-work-info-description,
.portfolio-section.portfolio-style-2 .portfolio-works .portfolio-work.w75 .portfolio-work-info .portfolio-work-info-description,
.portfolio-section.isotope-style-white .portfolio-works .portfolio-work.w75 .portfolio-work-info .portfolio-work-info-description,
.portfolio-section.portfolio-style-white .portfolio-works .portfolio-work.w75 .portfolio-work-info .portfolio-work-info-description{
font-size: 14px !important;
margin-top: 2px !important;
line-height: 24px !important;
color: #000000 !important;
}
/* --------------------------------------------------------------
6.3 - Portolio style 3
-------------------------------------------------------------- */
.portfolio-section.portfolio-style-3 .portfolio-works .portfolio-work,
.portfolio-section.isotope-style-3 .portfolio-works .portfolio-work,
.portfolio-section.isotope-style-3 .portfolio-works .grid-sizer{
width: 33.33334%;
}
/* Box Background */
.portfolio-section.isotope-style-3 .portfolio-works .portfolio-work .portfolio-work-info,
.portfolio-section.portfolio-style-3 .portfolio-works .portfolio-work .portfolio-work-info{
background: rgba(0,0,0,0.8);
color: #fff;
}
/* Box title text style */
.portfolio-section.isotope-style-3 .portfolio-works .portfolio-work .portfolio-work-info .portfolio-work-info-title,
.portfolio-section.portfolio-style-3 .portfolio-works .portfolio-work .portfolio-work-info .portfolio-work-info-title{
font-size: 18px;
font-weight: 700;
color: #fff;
}
/* Box category text style */
.portfolio-section.isotope-style-3 .portfolio-works .portfolio-work .portfolio-work-info .portfolio-work-info-category,
.portfolio-section.portfolio-style-3 .portfolio-works .portfolio-work .portfolio-work-info .portfolio-work-info-category{
font-size: 12px;
color: #fff;
}
/* Box description text style */
.portfolio-section.isotope-style-3 .portfolio-works .portfolio-work.w50 .portfolio-work-info .portfolio-work-info-description,
.portfolio-section.portfolio-style-3 .portfolio-works .portfolio-work.w50 .portfolio-work-info .portfolio-work-info-description{
font-size: 14px;
margin-top: 2px;
line-height: 24px;
color: #fff;
}
/* Box description text style */
.portfolio-section.isotope-style-3 .portfolio-works .portfolio-work.w75 .portfolio-work-info .portfolio-work-info-description,
.portfolio-section.portfolio-style-3 .portfolio-works .portfolio-work.w75 .portfolio-work-info .portfolio-work-info-description{
font-size: 14px;
margin-top: 2px;
line-height: 24px;
color: #fff;
}
/* --------------------------------------------------------------
6.4 - Portolio style 4
-------------------------------------------------------------- */
.portfolio-section.isotope-style-4,
.portfolio-section.portfolio-style-4{
padding:50px 2.5% 0 2.5%;
}
.portfolio-section.isotope-style-4 .portfolio-works .portfolio-work,
.portfolio-section.isotope-style-4 .portfolio-works .grid-sizer,
.portfolio-section.portfolio-style-4 .portfolio-works .portfolio-work{
width: 23.12555%;
}
.portfolio-section.isotope-style-4 .portfolio-works .gutter-sizer{
width: 2.5%;
}
/* Box Background */
.portfolio-section.isotope-style-4 .portfolio-works .portfolio-work .portfolio-work-info,
.portfolio-section.portfolio-style-4 .portfolio-works .portfolio-work .portfolio-work-info{
background: rgba(0,0,0,0.8);
color: #fff;
}
/* Box title text style */
.portfolio-section.isotope-style-4 .portfolio-works .portfolio-work .portfolio-work-info .portfolio-work-info-title,
.portfolio-section.portfolio-style-4 .portfolio-works .portfolio-work .portfolio-work-info .portfolio-work-info-title{
font-size: 18px;
font-weight: 700;
color: #fff;
}
/* Box category text style */
.portfolio-section.isotope-style-4 .portfolio-works .portfolio-work .portfolio-work-info .portfolio-work-info-category,
.portfolio-section.portfolio-style-4 .portfolio-works .portfolio-work .portfolio-work-info .portfolio-work-info-category{
font-size: 12px;
color: #fff;
}
/* Box description text style */
.portfolio-section.isotope-style-4 .portfolio-works .portfolio-work.w50 .portfolio-work-info .portfolio-work-info-description,
.portfolio-section.portfolio-style-4 .portfolio-works .portfolio-work.w50 .portfolio-work-info .portfolio-work-info-description{
display: none !important;
}
/* Box description text style */
.portfolio-section.isotope-style-4 .portfolio-works .portfolio-work.w75 .portfolio-work-info .portfolio-work-info-description,
.portfolio-section.portfolio-style-4 .portfolio-works .portfolio-work.w75 .portfolio-work-info .portfolio-work-info-description{
display: none !important;
}
/* --------------------------------------------------------------
6.5 - Portolio style 5
-------------------------------------------------------------- */
.portfolio-section.isotope-style-5,
.portfolio-section.portfolio-style-5{
padding:50px 2.5% 0 2.5%;
}
.portfolio-section.isotope-style-5 .portfolio-works .portfolio-work,
.portfolio-section.isotope-style-5 .portfolio-works .grid-sizer,
.portfolio-section.portfolio-style-5 .portfolio-works .portfolio-work{
width: 23.12555%;
}
.portfolio-section.isotope-style-5 .portfolio-works .gutter-sizer{
width: 2.5%;
}
/* Box Background */
.portfolio-section.isotope-style-5 .portfolio-works .portfolio-work .portfolio-work-info,
.portfolio-section.portfolio-style-5 .portfolio-works .portfolio-work .portfolio-work-info{
background: rgba(0,0,0,0.8);
color: #fff;
}
/* Box title text style */
.portfolio-section.isotope-style-5 .portfolio-works .portfolio-work .portfolio-work-info .portfolio-work-info-title,
.portfolio-section.portfolio-style-5 .portfolio-works .portfolio-work .portfolio-work-info .portfolio-work-info-title{
font-size: 18px;
font-weight: 700;
color: #fff;
}
/* Box category text style */
.portfolio-section.isotope-style-5 .portfolio-works .portfolio-work .portfolio-work-info .portfolio-work-info-category,
.portfolio-section.portfolio-style-5 .portfolio-works .portfolio-work .portfolio-work-info .portfolio-work-info-category{
font-size: 12px;
color: #fff;
}
/* Box description text style */
.portfolio-section.isotope-style-5 .portfolio-works .portfolio-work.w50 .portfolio-work-info .portfolio-work-info-description,
.portfolio-section.portfolio-style-5 .portfolio-works .portfolio-work.w50 .portfolio-work-info .portfolio-work-info-description{
display: none !important;
}
/* Box description text style */
.portfolio-section.isotope-style-5 .portfolio-works .portfolio-work.w75 .portfolio-work-info .portfolio-work-info-description,
.portfolio-section.portfolio-style-5 .portfolio-works .portfolio-work.w75 .portfolio-work-info .portfolio-work-info-description{
display: none !important;
}
.portfolio-section.isotope-style-5 .portfolio-works .portfolio-work .portfolio-work-info{
opacity: 1;
transform:scale(1) rotate(0deg);
-webkit-transform:scale(1) rotate(0deg);
-moz-transform:scale(1) rotate(0deg);
-ms-transform:scale(1) rotate(0deg);
border-radius: 0%;
}
.portfolio-section .portfolio-works .portfolio-work .portfolio-work-assets{
transform:scale(1.2) rotate(2deg);
-webkit-transform:scale(1.2) rotate(2deg);
-moz-transform:scale(1.2) rotate(2deg);
-ms-transform:scale(1.2) rotate(2deg);
}
.portfolio-section.isotope-style-5 .portfolio-works .portfolio-work:hover .portfolio-work-info{
opacity: 0;
transform:scale(.8) rotate(2deg);
-webkit-transform:scale(.8) rotate(2deg);
-moz-transform:scale(.8) rotate(2deg);
-ms-transform:scale(.8) rotate(2deg);
}
.portfolio-section .portfolio-works .portfolio-work:hover .portfolio-work-assets{
transform:scale(1) rotate(0deg);
-webkit-transform:scale(1) rotate(0deg);
-moz-transform:scale(1) rotate(0deg);
-ms-transform:scale(1) rotate(0deg);
}
/* --------------------------------------------------------------
6.6 - Portolio style 6
-------------------------------------------------------------- */
.portfolio-section.isotope-style-6,
.portfolio-section.portfolio-style-6{
padding:50px 2.5% 0 2.5%;
}
.portfolio-section.isotope-style-6 .portfolio-works .portfolio-work,
.portfolio-section.isotope-style-6 .portfolio-works .grid-sizer,
.portfolio-section.portfolio-style-6 .portfolio-works .portfolio-work{
width: 31.666667%;
}
.portfolio-section.isotope-style-6 .portfolio-works .gutter-sizer{
width: 2.5%;
}
/* Box Background */
.portfolio-section.isotope-style-6 .portfolio-works .portfolio-work .portfolio-work-info,
.portfolio-section.portfolio-style-6 .portfolio-works .portfolio-work .portfolio-work-info{
background: rgba(0,0,0,0.8);
color: #fff;
}
/* Box title text style */
.portfolio-section.isotope-style-6 .portfolio-works .portfolio-work .portfolio-work-info .portfolio-work-info-title,
.portfolio-section.portfolio-style-6 .portfolio-works .portfolio-work .portfolio-work-info .portfolio-work-info-title{
font-size: 18px;
font-weight: 700;
color: #fff;
}
/* Box category text style */
.portfolio-section.isotope-style-6 .portfolio-works .portfolio-work .portfolio-work-info .portfolio-work-info-category,
.portfolio-section.portfolio-style-6 .portfolio-works .portfolio-work .portfolio-work-info .portfolio-work-info-category{
font-size: 12px;
color: #fff;
}
/* Box description text style */
.portfolio-section.isotope-style-6 .portfolio-works .portfolio-work.w50 .portfolio-work-info .portfolio-work-info-description,
.portfolio-section.portfolio-style-6 .portfolio-works .portfolio-work.w50 .portfolio-work-info .portfolio-work-info-description{
display: none !important;
}
/* Box description text style */
.portfolio-section.isotope-style-6 .portfolio-works .portfolio-work.w75 .portfolio-work-info .portfolio-work-info-description,
.portfolio-section.portfolio-style-6 .portfolio-works .portfolio-work.w75 .portfolio-work-info .portfolio-work-info-description{
display: none !important;
}
/* --------------------------------------------------------------
6.7 - Portolio style 7
-------------------------------------------------------------- */
.portfolio-section.isotope-style-7,
.portfolio-section.portfolio-style-7{
padding:50px 2.5% 0 2.5%;
}
.portfolio-section.isotope-style-7 .portfolio-works .portfolio-work,
.portfolio-section.isotope-style-7 .portfolio-works .grid-sizer,
.portfolio-section.portfolio-style-7 .portfolio-works .portfolio-work{
width: 31.666667%;
}
.portfolio-section.isotope-style-7 .portfolio-works .gutter-sizer{
width: 2.5%;
}
/* Box Background */
.portfolio-section.isotope-style-7 .portfolio-works .portfolio-work .portfolio-work-info,
.portfolio-section.portfolio-style-7 .portfolio-works .portfolio-work .portfolio-work-info{
background: rgba(0,0,0,0.8);
color: #fff;
}
/* Box title text style */
.portfolio-section.isotope-style-7 .portfolio-works .portfolio-work .portfolio-work-info .portfolio-work-info-title,
.portfolio-section.portfolio-style-7 .portfolio-works .portfolio-work .portfolio-work-info .portfolio-work-info-title{
font-size: 18px;
font-weight: 700;
color: #fff;
}
/* Box category text style */
.portfolio-section.isotope-style-7 .portfolio-works .portfolio-work .portfolio-work-info .portfolio-work-info-category,
.portfolio-section.portfolio-style-7 .portfolio-works .portfolio-work .portfolio-work-info .portfolio-work-info-category{
font-size: 12px;
color: #fff;
}
/* Box description text style */
.portfolio-section.isotope-style-7 .portfolio-works .portfolio-work.w50 .portfolio-work-info .portfolio-work-info-description,
.portfolio-section.portfolio-style-7 .portfolio-works .portfolio-work.w50 .portfolio-work-info .portfolio-work-info-description{
display: none !important;
}
/* Box description text style */
.portfolio-section.isotope-style-7 .portfolio-works .portfolio-work.w75 .portfolio-work-info .portfolio-work-info-description,
.portfolio-section.portfolio-style-7 .portfolio-works .portfolio-work.w75 .portfolio-work-info .portfolio-work-info-description{
display: none !important;
}
.portfolio-section.isotope-style-7 .portfolio-works .portfolio-work .portfolio-work-info{
opacity: 1;
transform:scale(1) rotate(0deg);
-webkit-transform:scale(1) rotate(0deg);
-moz-transform:scale(1) rotate(0deg);
-ms-transform:scale(1) rotate(0deg);
border-radius: 0%;
}
.portfolio-section .portfolio-works .portfolio-work .portfolio-work-assets{
transform:scale(1.2) rotate(2deg);
-webkit-transform:scale(1.2) rotate(2deg);
-moz-transform:scale(1.2) rotate(2deg);
-ms-transform:scale(1.2) rotate(2deg);
}
.portfolio-section.isotope-style-7 .portfolio-works .portfolio-work:hover .portfolio-work-info{
opacity: 0;
transform:scale(.8) rotate(2deg);
-webkit-transform:scale(.8) rotate(2deg);
-moz-transform:scale(.8) rotate(2deg);
-ms-transform:scale(.8) rotate(2deg);
}
.portfolio-section .portfolio-works .portfolio-work:hover .portfolio-work-assets{
transform:scale(1) rotate(0deg);
-webkit-transform:scale(1) rotate(0deg);
-moz-transform:scale(1) rotate(0deg);
-ms-transform:scale(1) rotate(0deg);
}
/* --------------------------------------------------------------
7 - Buttons
-------------------------------------------------------------- */
.view-all,
.load-more{
width: 100%;
float: left;
text-align: center;
padding:50px 0;
}
a.button{
padding:0px 40px;
line-height: 50px;
font-size: 10px;
letter-spacing: 1px;
text-transform: uppercase;
color: #ffffff;
position: relative;
display: inline-block;
overflow: hidden;
text-decoration: none !important;
font-family: 'Ubuntu', sans-serif;
font-weight: 700;
outline: none;
border: none;
}
a.button.margin-top{
margin-top: 25px;
}
a.button.margin-bottom{
margin-bottom: 25px;
}
a.button.button-border{
border-width: 2px;
border-style: solid;
}
a.button span{
position: relative;
z-index: 2;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
color: #fff;
}
a.button i{
font-size: 16px;
margin-left: 40px;
color: #fff;
position: relative;
z-index: 2;
top: 1.5px;
}
a.button:before{
content: "";
width: 0%;
height: 100%;
position: absolute;
top: 0;
left:50%;
background: #1dbba3;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
transform:skew(-45deg);
-webkit-transform:skew(-45deg);
-moz-transform:skew(-45deg);
-ms-transform:skew(-45deg);
}
a.button.border-aqua:before{
background: #1dbba3;
}
a.button.border-aqua:hover span{
color: #fff !important;
}
a.button:hover:before{
width: 140%;
left:-20%;
}
/* --------------------------------------------------------------
8 - Client
-------------------------------------------------------------- */
.testimonials{
width: 100%;
float: left;
position: relative;
border-top: 1px solid #f0f0f0;
padding:50px 0 0 0;
}
.client-section .client-logos{
width: 100%;
float: left;
position: relative;
}
.client-section .client-logos img{
max-width: calc(100% - 30px);
max-height: calc(100% - 30px);
}
.client-section .client-logos .client-logo{
width: 20%;
height: 155px;
line-height: 155px;
float: left;
position: relative;
text-align: center;
border-right: 1px solid #f0f0f0;
border-top: 1px solid #f0f0f0;
}
.client-section .client-logos .client-logo:nth-child(5n+0){
border-right: none;
}
.client-section .clients_pictures{
width: 100%;
float: left;
text-align: center;
position: relative;
}
.client-section .clients_pictures .clients_picture{
display: inline-block;
margin:5px 5px;
filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
cursor: pointer;
width: 160px;
height: 220px;
overflow: hidden;
position: relative;
}
.client-section .clients_pictures .clients_picture img{
min-width: 100%;
min-height: 100%;
max-width: 130%;
max-height: 130%;
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%, -50%);
-webkit-transform:translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
-moz-transform:translate(-50%, -50%);
}
.client-section .clients_pictures .clients_picture:hover,.client-section .clients_pictures .clients_picture.active{
filter: url("data:image/svg+xml;utf8,#grayscale");
-webkit-filter: grayscale(0%);
}
.client-section .testimonial{
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
position: relative;
left:0;
}
.client-section .testimonial,
.client-section .testimonial .testimonial-in .testimonial-in-des,
.client-section .testimonial .testimonial-in .testimonial-in-author{
width: 100%;
float: left;
text-align: center;
position: relative;
}
.client-section .testimonial .testimonial-in .testimonial-in-des,
.client-section .testimonial .testimonial-in .testimonial-in-author{
margin-top:40px;
font-size: 16px;
line-height: 30px;
color: #000000;
}
.client-section .testimonial .testimonial-in{
position: absolute;
width: 100%;
padding-left:10%;
padding-right:10%;
opacity: 0;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
}
.client-section .testimonial .testimonial-in.active{
opacity: 1;
}
.client-section .testimonial .testimonial-in .testimonial-in-author{
font-weight: 700;
text-transform: uppercase;
font-size: 12px;
color: #808080;
margin-top:20px;
}
.client-section .testimonial .testimonial-in .testimonial-in-author b{
color: #000;
}
/* --------------------------------------------------------------
9 - Blog
-------------------------------------------------------------- */
/* --------------------------------------------------------------
9.1 - Home Posts
-------------------------------------------------------------- */
.blog-section,
.blog-section .blog-posts,
.blog-section .blog-posts .blog-post .blog-post-title,
.blog-section .blog-posts .blog-post .blog-post-summary,
.blog-section .blog-posts .blog-post .read-more{
width: 100%;
float: left;
position: relative;
}
.blog-section .blog-posts .blog-post{
width: 33.3334%;
height: 342px;
float: left;
padding:60px;
border-top:1px solid #f0f0f0;
border-right:1px solid #f0f0f0;
position: relative;
}
.blog-section .blog-posts .blog-post:before{
content: "";
width: 100%;
height: 100%;
position: absolute;
top:0;
left: 0;
background: #f0f0f0;
opacity: 0;
transition:.3s;
-webkit-transition:.3s ;
-ms-transition:.3s ;
}
.blog-section .blog-posts .blog-post:nth-child(3n+0){
border-right:none;
}
.blog-section .blog-posts .blog-post .blog-post-title{
max-height: 48px;
min-height: 48px;
overflow: hidden;
margin-bottom: 30px;
margin-top: 0px;
}
.blog-section .blog-posts .blog-post .blog-post-title a{
font-weight: 700;
color: #000000;
text-transform: uppercase;
font-size: 16px;
line-height: 24px;
transition:.3s;
-webkit-transition:.3s;
-ms-transition:.3s;
}
.blog-section .blog-posts .blog-post .blog-post-summary{
color: #808080;
font-size: 14px;
line-height: 24px;
max-height: 96px;
overflow: hidden;
margin-bottom: 30px;
}
.blog-section .blog-posts .blog-post .read-more{
font-weight: 700;
color: #000000;
font-size: 12px;
text-transform: uppercase;
transition:.3s;
-webkit-transition:.3s;
-ms-transition:.3s;
}
.blog-section .blog-posts .blog-post .read-more:after{
content: "\f178";
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
margin-left: 10px;
opacity: 0;
color: #1dbba3;
transition:.3s;
-webkit-transition:.3s;
-ms-transition:.3s;
transition-delay:.3s;
-webkit-transition-delay:.3s;
-ms-transition-delay:.3s;
}
.blog-section .blog-posts .blog-post:hover .read-more:after{
margin-left: 20px;
opacity: 1;
}
.blog-section .blog-posts .blog-post:hover:before{
border-radius: 0%;
opacity: 1;
transform:scale(1) rotate(0deg);
-webkit-transform:scale(1) rotate(0deg);
-moz-transform:scale(1) rotate(0deg);
-ms-transform:scale(1) rotate(0deg);
}
.blog-section .blog-posts .blog-post:hover .blog-post-title a{
color: #1dbba3
}
.blog-section .blog-posts .blog-post:hover .read-more{
color: #1dbba3
}
/* --------------------------------------------------------------
9.2 - Blog Page
-------------------------------------------------------------- */
.blog-page{
padding:130px 15px 30px 15px;
}
.blog-page .offsetbottom{
content: "";
bottom: 0;
position: absolute;
right: 0;
width: 0px;
height: 0px;
background: #000;
}
.blog-page-posts{
width: 66.66667%;
float: left;
padding:0 15px;
}
.blog-page-posts .blog-post,
.blog-page-posts .blog-post .asset,
.blog-page-posts .blog-post .info .author-picture,
.blog-page-posts .blog-post .info .meta-tags,
.blog-page-posts .blog-post .info .meta-tags .meta-tag,
.blog-page-posts .blog-post .post-frondend .post-title,
.blog-page-posts .blog-post .post-frondend .post-title a,
.blog-page-posts .blog-post .post-frondend .post-content,
.blog-page-posts .blog-post .post-quote,
.blog-page-posts .blog-post .post-quote-cite,
.blog-page-posts .blog-post.quote a{
position: relative;
width: 100%;
float: left;
}
.blog-page-posts .blog-post{
border-bottom: 3px solid #f0f0f0;
padding-bottom: 30px;
margin-bottom: 30px;
}
.blog-page-posts .blog-post .asset{
margin-bottom: 30px;
}
.blog-page-posts .blog-post .asset img,
.blog-page-posts .blog-post .asset iframe{
width: 100%;
float: left;
position: relative;
}
.blog-page-posts .blog-post .info{
width: 25%;
float: left;
position: relative;
text-align: right;
padding-right: 15px;
}
.blog-page-posts .blog-post .info .post-nav{
margin-top:10px;
text-align: right;
}
.blog-page-posts .blog-post .info .author-picture span{
float: right;
width: 68px;
height: 68px;
border-radius: 50%;
overflow: hidden;
position: relative;
margin-bottom: 30px;
}
.blog-page-posts .blog-post .info .author-picture span img{
max-width: 100%;
max-height: 100%;
min-height: 100%;
min-width: 100%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.blog-single .blog-page-posts .blog-post .info .meta-tags{
margin-bottom: 8px;
}
.blog-page-posts .blog-post .info .meta-tags{
padding-bottom: 8px;
}
.blog-page-posts .blog-post .info .meta-tags .meta-tag{
font-size: 13px;
color: #808080;
margin-bottom: 10px;
font-weight: 500;
position: relative;
}
.blog-page-posts .blog-post .info .meta-tags:before{
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 20px;
height: 4px;
background: #000;
}
.blog-page-posts .blog-post .info .meta-tags .meta-tag span{
color: #000;
}
.blog-page-posts .blog-post .post-frondend{
width: 75%;
float: right;
position: relative;
padding-left: 15px;
}
.blog-page-posts .blog-post .post-frondend .post-title{
margin:0;
}
.blog-page-posts .blog-post .post-frondend .post-title a{
font-size: 24px;
color: #000;
font-weight: 700;
line-height: 36px;
margin-bottom: 20px;
transition:.3s;
-webkit-transition:.3s;
-ms-transition:.3s;
}
.blog-page-posts .blog-post.quote a{
padding:80px 100px 100px 100px;
background: #1dbba3;
transition:.3s;
-webkit-transition:.3s;
-ms-transition:.3s;
}
.blog-page-posts .blog-post.quote a:hover{
opacity: .9;
}
.blog-page-posts .blog-post.quote .post-quote{
font-size: 24px;
font-weight: 700;
line-height: 36px;
margin-bottom: 20px;
color: #ffffff;
}
.blog-page-posts .blog-post.quote .post-quote-cite{
font-size: 16px;
font-weight: 400;
font-style: italic;
color: #ffffff;
}
.blog-page-posts .blog-post .post-frondend .post-content .reading{
color: #1dbba3;
font-style: italic;
border:none;
}
.blog-page-posts .blog-post .post-frondend .post-content a{
color: #000;
}
.blog-page-posts .blog-post .post-frondend .post-content a:hover{
border-bottom:1px dotted #000;
text-decoration: none;
}
.blog-page-posts .blog-post .post-frondend .post-content ul li{
list-style-type: disc;
color: #808080;
line-height: 24px;
font-size: 16px;
}
.blog-page-posts .blog-post .post-frondend .post-content ul{
padding-left: 15px;
}
.blog-page-posts .blog-post .post-frondend .post-content pre,
.blog-page-posts .blog-post .post-frondend .post-content code{
padding:15px 30px;
width: 100%;
float: left;
background: #f0f0f0;
color: #808080;
border-radius: 0;
border:none;
margin:0 0 20px;
}
.blog-page-posts .blog-post .post-frondend .post-content blockquote{
padding:50px;
width: 100%;
float: left;
background: #f0f0f0;
color: #808080;
border-radius: 0;
border:none;
margin:30px 0;
font-style: italic;
line-height: 30px;
font-weight: 700;
font-size: 18px;
}
.blog-page-posts .blog-post .post-frondend .post-content blockquote cite{
width: 100%;
float: left;
font-style: normal;
font-size: 14px;
font-weight: 400;
margin-top: 10px;
}
.blog-page-posts .blog-post .post-frondend .post-content .reading:hover{
color: #000;
text-decoration: none;
}
.blog-page-posts .blog-post:hover .post-frondend .post-title a{
color: #1dbba3;
}
.blog-page-posts .pagination{
width: 100%;
float: left;
position: relative;
}
.blog-page-posts .pagination .newer-posts a{
float: left;
height: 50px;
line-height: 50px;
background: #f0f0f0;
padding:0 40px;
color: #808080;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
}
.blog-page-posts .pagination .old-posts a{
float: right;
height: 50px;
line-height: 50px;
background: #f0f0f0;
padding:0 40px;
color: #808080;
font-size: 14px;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
}
.blog-page-posts .pagination .old-posts a:hover,
.blog-page-posts .pagination .newer-posts a:hover
{
background: #1dbba3;
color: #fff;
text-decoration: none;
}
.blog-sidebar{
width: 33.33334%;
float: right;
padding:0 15px;
position: relative;
}
.blog-sidebar .widgets-wrapper{
padding:40px;
background: #f9f9f9;
}
.blog-sidebar .widgets-wrapper .widget{
-webkit-transform: translate(0%, 0%);
-ms-transform: translate(0%, 0%);
transform: translate(0%, 0%);
opacity: 1;
}
/* --------------------------------------------------------------
9.2.1 - Blog Page Comments
-------------------------------------------------------------- */
.comments,
.comments .comment,
.comments .comment .reply span{
width: 100%;
float: left;
position: relative;
}
.comments{
overflow: hidden;
}
.comments .comment:last-child{
margin-bottom: 30px;
}
.comments .comment .comment:last-child{
margin-bottom: 0px;
}
.comments .comment .comment:last-child:before{
display: none;
}
.comments .comment:last-child:before{
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 3px;
width: 100%;
background: #f0f0f0;
}
.comments .comment .profil{
width: 12.5%;
float: left;
padding:0 15px;
position: relative;
}
.comments .comment .profil img{
width: 100%;
}
.comments .comment .info,
.comments .comment .comment-in,
.comments .comment .reply{
width: 87.5%;
float: right;
padding:0 15px;
position: relative;
}
.comments .comment .info{
color: #000;
font-weight: 500;
font-size: 14px;
margin-bottom: 10px;
}
.comments .comment .info span{
color: #808080;
}
.comments .comment .comment-in{
color: #808080;
font-size: 14px;
font-weight: 400;
line-height: 24px;
margin-bottom: 17px;
}
.comments .comment .reply{
margin-bottom: 50px;
}
.comments .comment .reply a{
padding:12px 17px;
background: #f0f0f0;
float: left;
text-transform: uppercase;
font-size: 10px;
color: #808080;
transition:300ms;
-webkit-transition:300ms;
-ms-transition:300ms;
}
.comments .comment:last-child .reply span{
border-bottom: none;
}
.comments .comment .comment:last-child .reply span{
border-bottom: 1px solid #f0f0f0;
}
.comments .comment .reply span{
border-bottom: 1px solid #f0f0f0;
padding-bottom: 20px;
}
.comments .comment .reply a:hover{
background: #1dbba3;
color: #fff;
text-decoration: none;
}
.comment-to-reply{
padding-left: 12.5%;
}
.comment-form,
.comment-to-reply{
position: relative;
width: 100%;
float: left;
}
.comment-form form,
.comment-form form div input,
.comment-form form div select,
.comment-form form div textarea{
position: relative;
width: 100%;
float: left;
font-family: "Open Sans" sans-serif;
}
.comment-col-50{
width: 50%;
float: left;
padding:5px 0;
}
.comment-col-100{
width: 100%;
float: left;
padding:5px 0;
}
.comment-form form div:first-child{
padding-top:0px;
}
.comment-col-100 .comment-col-50{
padding:0px 0;
}
.comment-form form input,
.comment-form form select{
border:2px solid #f0f0f0;
height: 50px;
padding:0 15px;
background: #f0f0f0;
color: #808080;
transition:.2s linear;
-webkit-transition:.2s linear;
-ms-transition:.2s linear;
}
.comment-form form textarea{
height: 200px;
max-height: 200px;
padding:15px;
color: #808080;
background: #f0f0f0;
border:2px solid #f0f0f0;
transition:.2s linear;
-webkit-transition:.2s linear;
-ms-transition:.2s linear;
}
.comment-form form button{
height: 50px;
background: #1dbba3;
color: #fff;
border:none;
padding:0 40px;
font-weight: 700;
font-size: 12px;
letter-spacing: 1px;
position: relative;
}
.comment-form form button span{
position: relative;
left: 0;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
}
.comment-form form button i{
position: absolute;
left:-100%;
top:0;
width: 100%;
height: 100%;
text-align: center;
line-height: 50px;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
}
.comment-form form button:hover span{
left: 300%;
}
.comment-form form button:hover i{
left: 0%;
}
.comment-form form textarea:focus,
.comment-form form input:focus{
border-color: #1dbba3;
background: #fff;
}
/* --------------------------------------------------------------
10 - Parallax Section
-------------------------------------------------------------- */
.parallax-section,
.parallax-section .parallax-in{
position: relative;
text-align: center;
overflow: hidden;
}
.parallax-section,
.parallax-section .parallax-image{
width: 100%;
float: left;
height: 500px;
}
.parallax-section .parallax-image{
position: absolute;
top:0;
overflow: hidden;
background: #000;
}
.parallax-section .parallax-in{
width: 100%;
float: left;
}
.parallax-section .parallax-image span{
width: 100%;
min-height: 100%;
position: absolute;
left: 0;
top:0;
background-position: 0px -130px;
background-repeat: no-repeat;
background-size:cover;
filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
opacity: 0.7;
}
.parallax-section .slogan,
.parallax-section .slogan .slogan-small{
color: #fff;
padding-top:0;
padding-bottom:0;
}
/* --------------------------------------------------------------
11 - Footer
-------------------------------------------------------------- */
footer#footer{
width: 100%;
float: left;
position: relative;
-webkit-transform: translate(0, 0%);
-ms-transform: translate(0, 0%);
transform: translate(0, 0%);
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
}
body.sidebar-active footer#footer{
-webkit-transform: translate(-360px, 0%);
-ms-transform: translate(-360px, 0%);
transform: translate(-360px, 0%);
}
footer#footer .copyright{
float: left;
font-weight: 500;
font-size: 12px;
color: #808080;
line-height: 120px;
}
footer#footer .social_icons{
float: right;
padding:40px 0;
}
footer#footer .social_icons div{
float: left;
margin:0 7.5px;
}
footer#footer .social_icons div:last-child{
margin-right: 0;
}
footer#footer .social_icons div a{
color: #808080;
float: left;
width: 40px;
line-height: 40px;
height: 40px;
text-align: center;
background: #fff;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
}
footer#footer .social_icons div a:hover{
color: #fff;
}
footer#footer .social_icons div.facebook a:hover{
background: #3c5a96;
}
footer#footer .social_icons div.twitter a:hover{
background: #1dadea;
}
footer#footer .social_icons div.pinterest a:hover{
background: #c9232d;
}
footer#footer.social_icons div.google-plus a:hover{
background: #db4c3f;
}
footer#footer .social_icons div.dribbble a:hover{
background: #e84f89;
}
footer#footer .social_icons div.linkedin a:hover{
background: #127cb4;
}
footer#footer .social_icons div.flickr a:hover{
background: #fc1685;
}
footer#footer .social_icons div.youtube a:hover{
background: #b90711;
}
footer#footer .social_icons div.rss a:hover{
background: #fc6621;
}
@media (max-width: 1024px){
footer#footer .social_icons{
width: 100%;
text-align: center;
padding:30px 0;
}
footer#footer .social_icons div{
display: inline-block;
float: none;
margin:2.5px;
}
footer#footer .copyright{
width: 100%;
text-align: center;
line-height: inherit;
margin-bottom: 30px;
}
}
/* --------------------------------------------------------------
12 - Layerslider Section Custom
-------------------------------------------------------------- */
.layerslider-section .slogan,
.layerslider-section .slogan-small{
padding:0;
width: 90% !important;
}
.layerslider-section .button{
display: inline-block !important;
}
.ls-shadow{
display: none !important;
}
@media (max-width: 1024px){
.layerslider-section .button{
line-height: inherit;
padding:0 20px;
}
}
/* --------------------------------------------------------------
13 - Services
-------------------------------------------------------------- */
.services-section,
.services-section .services-in,
.services-section .services-in .service .service-icon,
.services-section .services-in .service .service-title,
.services-section .services-in .service .service-description,
.services-section .services-in .service .learn-more{
float: left;
width: 100%;
position: relative;
}
.services-section .services-in .service{
width: 25%;
height: 300px;
float: left;
padding:60px 35px 60px 35px;
text-align: center;
background-color:rgba(29,187,163,1);
position: relative;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
}
.services-section .services-in .service:nth-child(1){
background-color:rgba(29,187,163,1);
}
.services-section .services-in .service:nth-child(2){
background-color:rgba(29,187,163,.88);
}
.services-section .services-in .service:nth-child(3){
background-color:rgba(29,187,163,.76);
}
.services-section .services-in .service:nth-child(4){
background-color:rgba(29,187,163,.64);
}
.services-section .services-in .service .service-icon{
font-size: 50px;
color: #fff;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
}
.services-section .services-in .service .service-title{
font-size:12px;
text-transform: uppercase;
letter-spacing: 1px;
color: #fff;
font-weight: 700;
margin-bottom:5px;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
line-height: 24px;
height: 24px;
overflow: hidden;
}
.services-section .services-in .service .service-description{
font-size: 14px;
color: #fff;
line-height: 24px;
height: 72px;
overflow: hidden;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
}
.services-section .services-in .service .learn-more{
font-size: 12px;
color: #1dbba3;
line-height: 24px;
text-transform: uppercase;
letter-spacing: 1px;
opacity: 0;
overflow: hidden;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
margin-top: 10px;
}
.services-section .services-in .service .learn-more:after{
content: "\f178";
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
margin-left: 0px;
opacity: 0;
color: #1dbba3;
transition:.3s;
-webkit-transition:.3s ;
-ms-transition:.3s ;
transition-delay:.3s;
-webkit-transition-delay:.3s ;
-ms-transition-delay:.3s;
}
.services-section .services-in .service:hover .learn-more:after{
margin-left: 10px;
opacity: 1;
}
.services-section .services-in .service:hover{
padding:50px 35px;
background: #fff;
}
.services-section .services-in .service:hover .service-icon{
color: #1dbba3;
}
.services-section .services-in .service:hover .service-title{
color: #808080;
}
.services-section .services-in .service:hover .service-description{
color: #808080;
}
.services-section .services-in .service:hover .learn-more{
opacity: 1;
}
/* --------------------------------------------------------------
14 - Isotope Custom
-------------------------------------------------------------- */
.portfolio-isotope .portfolio-works:after {
content: '';
display: block;
clear: both;
}
.filters{
position: relative;
left: 10%;
float: left;
width: 80%;
text-align: center;
line-height: 40px;
border-top:1px solid #f0f0f0;
border-bottom:1px solid #f0f0f0;
}
.filters button{
background: none;
border:none;
text-transform: uppercase;
font-weight: 700;
font-size: 12px;
color: #808080;
position: relative;
line-height: 40px;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
}
.filters button:after{
content: "";
width: 6px;
height: 6px;
background: #808080;
float: right;
border-radius: 50%;
position: relative;
top:17px;
margin:0 20px;
}
.filters button:last-child:after{
display: none;
}
.filters button.filter_current{
color: #000000;
}
.filters button:hover{
color: #1dbba3;
}
.isotope-filter-green .filters{
border-top:none;
border-bottom:none;
}
.isotope-filter-green .filters button:after{
display: none;
}
.isotope-filter-green .filters button{
padding:0 30px;
background: #1dbba3;
color: #fff;
font-weight: 400;
margin-bottom: 2px;
text-transform: none;
font-size: 12px;
}
.isotope-filter-green .filters button.filter_current,
.isotope-filter-green .filters button:hover{
background: #60cfbe;
color: #fff;
}
/* ADD ITEM */
.h300,
.h300 .portfolio-work-assets{
height: 300px !important;
}
.h300 .portfolio-work-info-in{
top:62px;
}
.h600,
.h600 .portfolio-work-assets{
height: 600px !important;
}
.h600 .portfolio-work-info-in{
top:249px
}
/* --------------------------------------------------------------
15 - Single
-------------------------------------------------------------- */
.single,
.post-nav,
.portfolio-single,
.portfolio-single .single-in,
.portfolio-single .single-title,
.portfolio-single .single-in .single-info,
.portfolio-single .single-in .single-info .single-title,
.portfolio-single .single-in .single-info .single-sub-title,
.portfolio-single .single-in .single-info .single-work-meta{
width: 100%;
float: left;
position: relative;
}
.portfolio-single .single-in .single-info{
padding:0 10%;
text-align: center;
}
.portfolio-single .single-title{
color: #000000;
font-weight: 700;
font-size: 24px;
margin:5px 0 5px 0;
text-transform: uppercase;
text-align: center;
letter-spacing: 1px;
}
.portfolio-single .single-in .single-info .single-sub-title{
color: #808080;
font-weight: 400;
font-size: 16px;
line-height: 30px;
margin:5px 0 40px 0;
}
.portfolio-single .single-in .single-info .single-work-meta{
line-height: 40px;
border-top:1px solid #f0f0f0;
border-bottom:1px solid #f0f0f0;
}
.portfolio-single .single-in .single-info .single-work-meta .meta{
position: relative;
display: inline-block;
font-weight: 700;
font-size: 12px;
color: #808080;
line-height: 40px;
letter-spacing: 1px;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
}
.portfolio-single .single-in .single-info .single-work-meta .meta:after{
content: "";
width: 5px;
height: 5px;
background: #808080;
float: right;
position: relative;
top: 18px;
margin: 0 20px;
border-radius: 50%;
}
.portfolio-single .single-in .single-info .single-work-meta .meta span{
color: #000;
margin-right: 2.5px;
}
.portfolio-single .single-in .single-info .single-work-meta .meta:last-child:after{
display: none;
}
.single .single-in .single-content .img-link{
position: relative;
float: left;
width: 100%;
}
.single .single-in .single-content img{
max-width: 100%;
}
.single .single-in .single-content .img-link img{
width: 100%;
height: auto !important;
}
.single .single-in .single-content .img-link.ImageW100{
width: 100%;
}
.single .single-in .single-content .img-link.ImageW50{
width: 50%;
}
.post-nav{
text-align: center;
margin-top: 40px;
}
.post-nav div{
position: relative;
display: inline-block;
margin:0 -1.7px;
height: 50px;
line-height: 50px;
width: 50px;
text-align: center;
color: #808080;
background: #f0f0f0;
transition:.3s ease;
-webkit-transition:.3s ease;
-ms-transition:.3s ease;
cursor: pointer;
}
.post-nav div:hover,
.post-nav div.active{
background: #fff;
color: #000;
}
.post-nav div.post-share.active .post-social-share{
top:50px;
}
.post-nav div.post-share .post-social-share{
position: absolute;
top:0px;
left: 0;
width: 100%;
height: 100%;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
}
.post-nav div.post-share.active .post-social-share a{
height: 100%;
top: 0;
opacity: 1;
}
.post-social-share a{
float: left;
width: 100%;
height: 0;
overflow: hidden;
color: #fff;
position: relative;
top:-20px;
opacity: 0;
z-index: 1;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
}
.post-social-share a:hover{
color: #fff;
text-shadow:
0px 0px 5px rgba(255,255,255,.25),
0px 5px 5px rgba(255,255,255,.25),
0px -5px 5px rgba(255,255,255,.25),
5px 0px 5px rgba(255,255,255,.25),
-5px 0px 5px rgba(255,255,255,.25)
;
}
.post-social-share a:nth-child(1){
transition-delay:.2s;
-webkit-transition-delay:.2s;
-ms-transition-delay:.2s;
}
.post-social-share a:nth-child(2){
transition-delay:.4s;
-webkit-transition-delay:.4s;
-ms-transition-delay:.4s;
}
.post-social-share a:nth-child(3){
transition-delay:.6s;
-webkit-transition-delay:.6s;
-ms-transition-delay:.6s;
}
.post-social-share a:nth-child(4){
transition-delay:.6s;
-webkit-transition-delay:.6s;
-ms-transition-delay:.6s;
}
.post-social-share a:nth-child(5){
transition-delay:.8s;
-webkit-transition-delay:.8s;
-ms-transition-delay:.8s;
}
.post-social-share a:nth-child(6){
transition-delay:1s;
-webkit-transition-delay:1s;
-ms-transition-delay:1s;
}
.post-social-share a:nth-child(7){
transition-delay:1.2s;
-webkit-transition-delay:1.2s;
-ms-transition-delay:1.2s;
}
.post-social-share a:nth-child(9){
transition-delay:1.4s;
-webkit-transition-delay:1.4s;
-ms-transition-delay:1.4s;
}
.post-social-share a.facebook{
background: #3c5a96;
}
.post-social-share a.twitter{
background: #1dadea;
}
.post-social-share a.pinterest{
background: #c9232d;
}
.post-social-share a.google-plus{
background: #db4c3f;
}
.post-social-share a.dribbble{
background: #e84f89;
}
.post-social-share a.linkedin{
background: #127cb4;
}
.post-social-share a.flickr{
background: #fc1685;
}
.post-social-share a.youtube{
background: #b90711;
}
.post-social-share a.rss{
background: #fc6621;
}
/* --------------------------------------------------------------
15.1 - Portfolio Single Styles
-------------------------------------------------------------- */
.portfolio-single-style-1 .single-in{
padding-left: 30px;
padding-right: 30px;
}
.portfolio-single-style-1 .single-in .single-content .img-link{
margin:15px 0;
}
.portfolio-single-style-3 .single-in .single-content .img-link,
.portfolio-single-style-3 .single-in .single-content .FullWslider{
margin-bottom:30px;
}
.portfolio-single .single-in .sticky{
width: 30%;
position: absolute;
left: 30px;
top: 30px;
z-index: 2;
background: #fff;
padding:30px;
transition:.3s transform cubic-bezier(1,0,.5,1);
-webkit-transition:.3s transform cubic-bezier(1,0,.5,1);
-ms-transition:.3s transform cubic-bezier(1,0,.5,1);
}
.portfolio-single .single-in .sticky .divider-half{
left: 10px;
}
.portfolio-single .single-in .sticky .single-title{
font-size: 18px;
text-align: left;
}
.portfolio-single .single-in .sticky .single-sub-title{
line-height: 24px;
font-size: 14px;
text-align: left;
margin:5px 0 20px 0;
}
.portfolio-single .single-in .sticky .single-work-meta{
border:none;
}
.portfolio-single .single-in .sticky .single-work-meta .meta{
width: 100%;
text-align: left;
border-top: 1px solid #f0f0f0;
}
.portfolio-single .single-in .sticky .single-work-meta .meta:last-child{
border-bottom: 1px solid #f0f0f0;
}
.portfolio-single .single-in .sticky .single-work-meta .meta:after,
.portfolio-single .single-in .sticky .single-work-meta .meta:before{
display: none;
}
.portfolio-single .single-in .sticky .single-work-meta .meta a{
color: #1dbba3;
font-weight: 700;
font-style: italic;
font-size: 12px;
}
.portfolio-single .single-in .sticky .post-nav{
margin-top:20px;
}
.portfolio-single .single-in .sticky .post-nav div{
float: left;
}
.portfolio-single-style-2 .single-in .single-content .text-area{
width: 67.5%;
float: right;
padding: 70px 8.3333% 70px 30px;
}
.portfolio-single-style-3 .single-in .single-content .text-area{
width: 100%;
float: right;
padding: 30px;
}
.portfolio-single-style-3 .single-content{
width: 67.5%;
float: right;
padding: 30px;
}
/* --------------------------------------------------------------
16 - Magnific Popup CSS
-------------------------------------------------------------- */
/* */
.mfp-bg {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1042;
overflow: hidden;
position: fixed;
background: #0b0b0b;
opacity: 0.8;
filter: alpha(opacity=80); }
.mfp-wrap {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1043;
position: fixed;
outline: none !important;
-webkit-backface-visibility: hidden; }
.mfp-container {
text-align: center;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
padding: 0 8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.mfp-container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle; }
.mfp-align-top .mfp-container:before {
display: none; }
.mfp-content {
position: relative;
display: inline-block;
vertical-align: middle;
margin: 0 auto;
text-align: left;
z-index: 1045; }
.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
width: 100%;
cursor: auto; }
.mfp-ajax-cur {
cursor: progress; }
.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
cursor: -moz-zoom-out;
cursor: -webkit-zoom-out;
cursor: zoom-out; }
.mfp-zoom {
cursor: pointer;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in; }
.mfp-auto-cursor .mfp-content {
cursor: auto; }
.mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none; }
.mfp-loading.mfp-figure {
display: none; }
.mfp-hide {
display: none !important; }
.mfp-preloader {
color: #cccccc;
position: absolute;
top: 50%;
width: auto;
text-align: center;
margin-top: -0.8em;
left: 8px;
right: 8px;
z-index: 1044; }
.mfp-preloader a {
color: #cccccc; }
.mfp-preloader a:hover {
color: white; }
.mfp-s-ready .mfp-preloader {
display: none; }
.mfp-s-error .mfp-content {
display: none; }
button.mfp-close, button.mfp-arrow {
overflow: visible;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
display: block;
outline: none;
padding: 0;
z-index: 1046;
-webkit-box-shadow: none;
box-shadow: none; }
button::-moz-focus-inner {
padding: 0;
border: 0; }
.mfp-close {
width: 44px;
height: 44px;
line-height: 44px;
position: absolute;
right: 0;
top: 0;
text-decoration: none;
text-align: center;
opacity: 0.65;
filter: alpha(opacity=65);
padding: 0 0 18px 10px;
color: white;
font-style: normal;
font-size: 28px;
font-family: Arial, Baskerville, monospace; }
.mfp-close:hover, .mfp-close:focus {
opacity: 1;
filter: alpha(opacity=100); }
.mfp-close:active {
top: 1px; }
.mfp-close-btn-in .mfp-close {
color: #333333; }
.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close {
color: white;
right: -6px;
text-align: right;
padding-right: 6px;
width: 100%; }
.mfp-counter {
position: absolute;
top: 0;
right: 0;
color: #cccccc;
font-size: 12px;
line-height: 18px; }
.mfp-arrow {
position: absolute;
opacity: 0.65;
filter: alpha(opacity=65);
margin: 0;
top: 50%;
margin-top: -55px;
padding: 0;
width: 90px;
height: 110px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.mfp-arrow:active {
margin-top: -54px; }
.mfp-arrow:hover, .mfp-arrow:focus {
opacity: 1;
filter: alpha(opacity=100); }
.mfp-arrow:before, .mfp-arrow:after, .mfp-arrow .mfp-b, .mfp-arrow .mfp-a {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 0;
top: 0;
margin-top: 35px;
margin-left: 35px;
border: medium inset transparent; }
.mfp-arrow:after, .mfp-arrow .mfp-a {
border-top-width: 13px;
border-bottom-width: 13px;
top: 8px; }
.mfp-arrow:before, .mfp-arrow .mfp-b {
border-top-width: 21px;
border-bottom-width: 21px;
opacity: 0.7; }
.mfp-arrow-left {
left: 0; }
.mfp-arrow-left:after, .mfp-arrow-left .mfp-a {
border-right: 17px solid white;
margin-left: 31px; }
.mfp-arrow-left:before, .mfp-arrow-left .mfp-b {
margin-left: 25px;
border-right: 27px solid #3f3f3f; }
.mfp-arrow-right {
right: 0; }
.mfp-arrow-right:after, .mfp-arrow-right .mfp-a {
border-left: 17px solid white;
margin-left: 39px; }
.mfp-arrow-right:before, .mfp-arrow-right .mfp-b {
border-left: 27px solid #3f3f3f; }
.mfp-iframe-holder {
padding-top: 40px;
padding-bottom: 40px; }
.mfp-iframe-holder .mfp-content {
line-height: 0;
width: 100%;
max-width: 900px; }
.mfp-iframe-holder .mfp-close {
top: -40px; }
.mfp-iframe-scaler {
width: 100%;
height: 0;
overflow: hidden;
padding-top: 56.25%; }
.mfp-iframe-scaler iframe {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: black; }
/* Main image in popup */
img.mfp-img {
width: auto;
max-width: 100%;
height: auto;
display: block;
line-height: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 40px 0 40px;
margin: 0 auto; }
/* The shadow behind the image */
.mfp-figure {
line-height: 0; }
.mfp-figure:after {
content: '';
position: absolute;
left: 0;
top: 40px;
bottom: 40px;
display: block;
right: 0;
width: auto;
height: auto;
z-index: -1;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: #444444; }
.mfp-figure small {
color: #bdbdbd;
display: block;
font-size: 12px;
line-height: 14px; }
.mfp-figure figure {
margin: 0; }
.mfp-bottom-bar {
margin-top: -36px;
position: absolute;
top: 100%;
left: 0;
width: 100%;
cursor: auto; }
.mfp-title {
text-align: left;
line-height: 18px;
color: #f3f3f3;
word-wrap: break-word;
padding-right: 36px; }
.mfp-image-holder .mfp-content {
max-width: 100%; }
.mfp-gallery .mfp-image-holder .mfp-figure {
cursor: pointer; }
.mfp-ie7 .mfp-img {
padding: 0; }
.mfp-ie7 .mfp-bottom-bar {
width: 600px;
left: 50%;
margin-left: -300px;
margin-top: 5px;
padding-bottom: 5px; }
.mfp-ie7 .mfp-container {
padding: 0; }
.mfp-ie7 .mfp-content {
padding-top: 44px; }
.mfp-ie7 .mfp-close {
top: 0;
right: 0;
padding-top: 0; }
/*Plugin style*/
.image-source-link {
color: #98C3D1;
}
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
opacity: 0;
-webkit-backface-visibility: hidden;
transition: all 0.23s ease-out;
}
.mfp-with-zoom.mfp-ready .mfp-container {
opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
opacity: 0.8;
}
.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
opacity: 0;
}
/* --------------------------------------------------------------
17 - ABOUT PAGE STYLE
-------------------------------------------------------------- */
/* --------------------------------------------------------------
17.1 - ABOUT STYLE
-------------------------------------------------------------- */
.our-section{
padding-bottom: 30px;
background-image: url(images/about-section-background.png);
background-size: 100% auto;
}
.our{
width: 50% !important;
float: left;
padding-top:60px;
padding-bottom:15px;
padding-left:15px;
padding-right:15px;
text-align: left;
}
.our .our-title{
width: 100%;
float: right;
font-size: 18px;
font-weight: 700;
color: #808080;
margin-bottom: 30px;
}
.our .our-title span{
color: #1dbba3;
}
.our .our-description{
width: 100%;
float: right;
color: #808080;
}
.our .our-description p{
font-size: 14px;
margin:20px 0;
}
.our .our-description ul{
float: left;
width: 50%;
}
.our .our-description ul:nth-child(even){
margin-left:-15px;
}
.our .our-description ul:nth-child(odd){
margin-right:-15px;
}
.our .our-description ul li{
float: left;
width: 100%;
padding:0 15px;
line-height: 32px;
font-size: 14px;
}
.our .our-description ul li:before{
content: "\f00c";
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
margin-right: 5px;
color: #1dbba3;
}
/* --------------------------------------------------------------
17.2 - Skills
-------------------------------------------------------------- */
.skills{
width: 33.33333333%;
float: left;
padding-top:60px;
padding-bottom:15px;
padding-left:15px;
padding-right:15px;
text-align: left;
}
.skills .skill,
.skills .skill .skill-title,
.skills .skill .skill-bar{
width: 100%;
float: left;
}
.skills .skill{
margin-bottom: 30px;
}
.skills .skill .skill-title{
color: #808080;
margin-bottom: 5px;
font-weight: 400;
font-size: 14px;
}
.skills .skill .skill-bar{
width: 0;
height: 4px;
background: #f0f0f0;
transition:1s cubic-bezier(1,0,.5,1);
-webkit-transition:1s cubic-bezier(1,0,.5,1);
-ms-transition:1s cubic-bezier(1,0,.5,1);
}
.skills.active .skill .skill-bar{
width: 100%;
}
.skills .skill .skill-bar span{
float: left;
width: 0%;
background: #1dbba3;
height: 4px;
position: relative;
transition:1s cubic-bezier(1,0,.5,1);
-webkit-transition:1s cubic-bezier(1,0,.5,1);
-ms-transition:1s cubic-bezier(1,0,.5,1);
transition-delay:1s;
-webkit-transition-delay:1s;
-ms-transition-delay:1s;
}
.skills .skill .skill-bar span b{
float: left;
width: 100%;
position: relative;
text-align: right;
opacity: 0;
transition:1s cubic-bezier(1,0,.5,1);
-webkit-transition:1s cubic-bezier(1,0,.5,1);
-ms-transition:1s cubic-bezier(1,0,.5,1);
font-size: 14px;
color: #808080;
font-weight: 400;
top: -22px;
}
/* --------------------------------------------------------------
17.3 - Funfact
-------------------------------------------------------------- */
.funfact{
width: 100%;
float: left;
position: relative;
padding:0 15px;
background-image:url(images/funfact-pattern.png);
background-size: 75% auto;
}
.funfact-div{
width: 25%;
float: left;
padding:80px 30px;
}
.funfact-div .number,
.funfact-div .title,
.funfact-div .description{
width: 100%;
float: left;
text-align: center;
}
.funfact-div .number{
color: #1dbba3;
font-weight: 700;
font-size: 36px;
letter-spacing: 1px;
margin-bottom: 5px;
}
.funfact-div .title{
color: #000000;
font-weight: 700;
font-size: 16px;
letter-spacing: 1px;
margin-bottom: 8px;
}
.funfact-div .description{
color: #808080;
font-weight: 400;
font-size: 13px;
line-height: 24px;
margin-top: 5px;
}
/* --------------------------------------------------------------
17.4 - Team Peoples
-------------------------------------------------------------- */
.team-section,
.team-section .team-peoples,
.team-section .team-peoples .team-people .image,
.team-section .team-peoples .team-people .info .position,
.team-section .team-peoples .team-people .info .name,
.team-section .team-peoples .team-people .info .social-icons{
width: 100%;
float: left;
position: relative;
}
.team-section .team-peoples{
padding:30px 15px;
}
.team-section .team-peoples .team-people{
width: 20%;
float: left;
position: relative;
height: 400px;
padding:15px;
margin-bottom: -15px;
}
.team-section .team-peoples .team-people .image:before{
content: "";
position: absolute;
top: 40px;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0px -120px 100px rgba(0,0,0,0.8) inset;
opacity: 0;
z-index: 2;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
}
.team-section .team-peoples .team-people .image{
height: 100%;
overflow: hidden;
}
.team-section .team-peoples .team-people .image img{
position: absolute;
top: 0;
left: 50%;
min-width: 100%;
max-width: 100%;
min-height: 100%;
-webkit-transform: translate(-50%, 0%);
-ms-transform: translate(-50%, 0%);
transform: translate(-50%, 0%);
filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
}
.team-section .team-peoples .team-people .info{
position: absolute;
bottom: 15px;
left: 0;
padding:0 15px;
width: 100%;
text-align: center;
z-index: 3;
overflow: hidden;
}
.team-section .team-peoples .team-people .info .position{
font-size: 12px;
color: #fff;
font-style: italic;
margin-bottom: 9px;
letter-spacing: 1px;
top: 10px;
opacity: 0;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
transition-delay:250ms;
-webkit-transition-delay:250ms;
-ms-transition-delay:250ms;
}
.team-section .team-peoples .team-people .info .name{
font-size: 18px;
font-weight: 700;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 7px;
top: 10px;
opacity: 0;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
transition-delay:500ms;
-webkit-transition-delay:500ms;
-ms-transition-delay:500ms;
}
.team-section .team-peoples .team-people .info .divider-half{
top: 10px;
opacity: 0;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
transition-delay:750ms;
-webkit-transition-delay:750ms;
-ms-transition-delay:750ms;
}
.team-section .team-peoples .team-people .info .social-icons{
margin-top: 15px;
top: 10px;
opacity: 0;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
transition-delay:1s;
-webkit-transition-delay:1s;
-ms-transition-delay:1s;
}
.team-section .team-peoples .team-people .info .social-icons a{
font-size: 14px;
color: #fff;
width: 40px;
height: 40px;
line-height: 40px;
display: inline-block;
text-align: center;
position: relative;
margin:0 -2px;
}
.team-section .team-peoples .team-people .info .social-icons a:before{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 5px;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
}
.team-section .team-peoples .team-people .info .social-icons a i{
position: relative;
z-index: 2;
color: #fff;
}
.team-section .team-peoples .team-people .info .social-icons a:hover:before{
height: 100%;
}
.team-section .team-peoples .team-people .info .social-icons a.facebook:before{
background: #3c5a96;
}
.team-section .team-peoples .team-people .info .social-icons a.twitter:before{
background: #1dadea;
}
.team-section .team-peoples .team-people .info .social-icons a.pinterest:before{
background: #c9232d;
}
.team-section .team-peoples .team-people .info .social-icons a.google-plus:before{
background: #db4c3f;
}
.team-section .team-peoples .team-people .info .social-icons a.dribbble:before{
background: #e84f89;
}
.team-section .team-peoples .team-people .info .social-icons a.linkedin:before{
background: #127cb4;
}
.team-section .team-peoples .team-people .info .social-icons a.flickr:before{
background: #fc1685;
}
.team-section .team-peoples .team-people .info .social-icons a.youtube:before{
background: #b90711;
}
.team-section .team-peoples .team-people .info .social-icons a.rss:before{
background: #fc6621;
}
.team-section .team-peoples .team-people:hover .image img{
filter: url("data:image/svg+xml;utf8,#grayscale");
-webkit-filter: grayscale(0%);
}
.team-section .team-peoples .team-people:hover .image:before,
.team-section .team-peoples .team-people:hover .info .position,
.team-section .team-peoples .team-people:hover .info .name,
.team-section .team-peoples .team-people:hover .info .social-icons,
.team-section .team-peoples .team-people:hover .info .divider-half{
top: 0px;
opacity: 1;
}
/* --------------------------------------------------------------
18 - CONTACT
-------------------------------------------------------------- */
.map-section{
width: 100%;
height: 600px;
filter: url("data:image/svg+xml;utf8,#grayscale");
filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%);
}
.contact-section{
padding:80px 8.33334%;
}
.contact-info{
position: relative;
width: 40%;
float: left;
padding:0 15px;
}
.contact-info .section-title{
text-align: left;
padding:0;
}
.contact-info .divider-half{
left: 10px;
margin-top:15px;
margin-bottom:30px;
}
.contact-info p{
font-size: 14px;
margin: 0 0 20px;
}
.contact-form{
position: relative;
width: 60%;
float: right;
padding:0 15px;
margin:0 -5px;
}
.contact-form form,
.contact-form form div input,
.contact-form form div select,
.contact-form form div textarea{
position: relative;
width: 100%;
float: left;
font-family: "Open Sans" sans-serif;
}
.contact-col-50{
width: 50%;
float: left;
padding:5px;
}
.contact-col-100{
width: 100%;
float: left;
padding:5px;
}
.contact-form form input,
.contact-form form select{
border:2px solid #f0f0f0;
height: 50px;
padding:0 15px;
background: #f0f0f0;
color: #808080;
transition:.2s linear;
-webkit-transition:.2s linear;
-ms-transition:.2s linear;
}
.contact-form form textarea{
height: 200px;
max-height: 200px;
padding:15px;
color: #808080;
background: #f0f0f0;
border:2px solid #f0f0f0;
transition:.2s linear;
-webkit-transition:.2s linear;
-ms-transition:.2s linear;
}
.contact-form form button{
height: 50px;
background: #1dbba3;
color: #fff;
border:none;
padding:0 40px;
font-weight: 700;
font-size: 12px;
letter-spacing: 1px;
position: relative;
}
.contact-form form button span{
position: relative;
left: 0;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
}
.contact-form form button i{
position: absolute;
left:-100%;
top:0;
width: 100%;
height: 100%;
text-align: center;
line-height: 50px;
transition:.3s cubic-bezier(1,0,.5,1);
-webkit-transition:.3s cubic-bezier(1,0,.5,1);
-ms-transition:.3s cubic-bezier(1,0,.5,1);
}
.contact-form form button:hover span{
left: 300%;
}
.contact-form form button:hover i{
left: 0%;
}
.contact-form form textarea:focus,
.contact-form form input:focus{
border-color: #1dbba3;
background: #fff;
}
.contact-form #form-messages.success{
width: 100%;
position: absolute;
height: 100%;
background: #fff;
text-align: center;
}
/* --------------------------------------------------------------
19 - Load Animate
-------------------------------------------------------------- */
.teamKraftt_load{
width: 100%;
background: #fff;
position:fixed;
top:0;
left:0;
bottom:0;
right:0;
z-index: 99999;
}
.teamKraftt_load .circle{
position: absolute;
left: 50%;
top: 50%;
margin-left: -15px;
margin-top: -15px;
width: 30px;
height: 30px;
border-radius: 50%;
background: #ecf0f1;
}
.teamKraftt_load .circle .arc{
position: absolute;
top: -1em;
right: 50%;
bottom: 50%;
left: -1em;
transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
overflow: hidden;
}
.teamKraftt_load .circle .arc-1{
z-index: 2;
-webkit-animation: rotate1 1s infinite cubic-bezier(1,0,.5,1);
-ms-animation: rotate1 1s infinite cubic-bezier(1,0,.5,1);
-moz-animation: rotate1 1s infinite cubic-bezier(1,0,.5,1);
animation: rotate1 1s infinite cubic-bezier(1,0,.5,1);
}
.teamKraftt_load .circle .arc-1:before{
border: solid .75em rgba(29, 187, 163, 0.8);
}
.teamKraftt_load .circle .arc-2{
z-index: 1;
-webkit-animation: rotate2 1s infinite cubic-bezier(1,0,.5,1);
-ms-animation: rotate2 1s infinite cubic-bezier(1,0,.5,1);
-moz-animation: rotate2 1s infinite cubic-bezier(1,0,.5,1);
animation: rotate2 1s infinite cubic-bezier(1,0,.5,1);
}
.teamKraftt_load .circle .arc-2:before{
border: solid .75em rgba(128, 128, 128, 0.8);
}
.teamKraftt_load .circle .arc:before{
box-sizing: border-box;
display: block;
width: 200%;
height: 200%;
border-radius: 50%;
transform: skewX(0deg);
-webkit-transform: skewX(0deg);
-ms-transform: skewX(0deg);
-moz-transform: skewX(0deg);
-o-transform: skewX(0deg);
content: '';
}
@keyframes rotate1{
0%{transform: rotate(45deg) skewX(0deg);}
100%{transform: rotate(405deg) skewX(0deg);}
}
@-webkit-keyframes rotate1{
0%{-webkit-transform: rotate(45deg) skewX(0deg);}
100%{-webkit-transform: rotate(405deg) skewX(0deg);}
}
@-ms-keyframes rotate1{
0%{-ms-transform: rotate(45deg) skewX(0deg);}
100%{-ms-transform: rotate(405deg) skewX(0deg);}
}
@-moz-keyframes rotate1{
0%{-moz-transform: rotate(45deg) skewX(0deg);}
100%{-moz-transform: rotate(405deg) skewX(0deg);}
}
@keyframes rotate2{
0%{transform: rotate(405deg) skewX(0deg);}
100%{transform: rotate(45deg) skewX(0deg);}
}
@-webkit-keyframes rotate2{
0%{-webkit-transform: rotate(405deg) skewX(0deg);}
100%{-webkit-transform: rotate(45deg) skewX(0deg);}
}
@-ms-keyframes rotate2{
0%{-ms-transform: rotate(405deg) skewX(0deg);}
100%{-ms-transform: rotate(45deg) skewX(0deg);}
}
@-moz-keyframes rotate2{
0%{-moz-transform: rotate(405deg) skewX(0deg);}
100%{-moz-transform: rotate(45deg) skewX(0deg);}
}