body {
color: #0c0c17;
overflow-x: hidden;
font: 300 14px/21px 'Open Sans', sans-serif, Helvetica, Arial, sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch;
}

.actv{font-weight: bold;color:#000;}
body ::-moz-selection {
background: #35e9f1;
color: #ffffff;
}
body ::selection {
background: #35e9f1;
color: #ffffff;
}
p {
margin: 0 0 21px;
}
/* 
Links
-------------------------
*/
a {
color: #35e9f1;
text-decoration: none;
}


@media screen and (min-width: 768px) {
a {
-webkit-transition: all 0.27s cubic-bezier(0, 0, 0.58, 1);
transition: all 0.27s cubic-bezier(0, 0, 0.58, 1);
}
}
a:hover,
a:focus {
color: #0ec3cb;
text-decoration: none;
outline: 0;
}
p a {
border-bottom: 1px solid #35e9f1;
}
p a:hover {
border-bottom: 1px solid #0ec3cb;
}
ul,
ol {
margin: 0 0 1.5em 0;
}
/* 
Headings
------------------------- 
*/
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.2;
margin-top: 10.5px;
font-weight: 700;
text-transform: capitalize;
}
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small,
h1 .small,
h2 .small,
h3 .small,
h4 .small,
h5 .small,
h6 .small {
font-size: 75%;
color: #757a86;
}
h1,
h2,
h3 {
margin-bottom: 7px;
}
h4,
h5,
h6 {
margin-bottom: 10.5px;
}
/* Body Content */
h1 {
font-size: 1.571em;
/* 1.571x body copy size = 22px */
}
h2 {
font-size: 1.428em;
/* 1.428x body copy size = 20px */
}
h3 {
font-size: 1.214em;
/* 1.214x body copy size = 17px */
}
h4 {
font-size: 1.142em;
/* 1.142x body copy size = 16px */
}
h5 {
font-size: 1em;
/* 1x body copy size = 14px */
}
h6 {
font-size: 1em;
/* 1.125x body copy size = 18px */
}
blockquote {
font-size: 1.2em;
/* 20px / 16px */
margin: 3em 0;
line-height: 1.25;
/* 25px / 20px */
border: 0;
}
blockquote p {
margin-bottom: 30px;
}
blockquote footer {
font-size: 13px;
text-transform: capitalize;
font-weight: 400;
}
cite {
font-weight: 300;
}
input:focus,
textarea:focus {
outline: none;
}
hr {
margin-top: 0;
margin-bottom: 0;
border-top: 1px solid #eeeef7;
}
/*  Bootstrap Useful Text Classes
.text-left           { text-align: left; }
.text-right          { text-align: right; }
.text-center         { text-align: center; }
.text-justify        { text-align: justify; }
.text-nowrap         { white-space: nowrap; }


.text-lowercase      { text-transform: lowercase; }
.text-uppercase      { text-transform: uppercase; }
.text-capitalize     { text-transform: capitalize; }
*/
/*  
======================
Modules styles
--------------
Contents
========
Animations
|__ Ripple effect
|__ Animated Navicon
|__ Loaders
Generic Layout Classes --( set 01 )--
|__ Home Section Texts
|__ Sections Titles
|__ Emphasis & misc
|__ Columns Of Same Height
|__ Sections Layout
Buttons
|__ Animated buttons
|__ Split Button
|__ Slide Button
|__ Play Button

Navbar
|__ Sticky Navbar
|__ Transparent Sticky Navbar

Carousel
|__ Owl Carousel
|__ Genaral Controls Modifications
|__ Carousel arrows
|__ Carosel indicators
|__ Making Bootstrap carousel fade instead of sliding
|__ Falling Carousel Indicators Style
|__ Filling Carousel Indicators Style

Animate Slider Styles
Skill Bars
*/
/*
========================================
Animations
========================================
*/
@-webkit-keyframes fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes fadeInOutDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -20%, 0);
transform: translate3d(0, -20%, 0);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, 20%, 0);
transform: translate3d(0, 20%, 0);
}
}
@keyframes fadeInOutDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -20%, 0);
transform: translate3d(0, -20%, 0);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, 20%, 0);
transform: translate3d(0, 20%, 0);
}
}
/*-------------------------------------*/
@-webkit-keyframes zoom-outy {
0% {
opacity: 0;
-webkit-transform: scale3d(1.6, 1.6, 1);
transform: scale3d(1.6, 1.6, 1);
}
50% {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
100% {
opacity: 1;
}
}
@keyframes zoom-outy {
0% {
opacity: 0;
-webkit-transform: scale3d(1.6, 1.6, 1);
transform: scale3d(1.6, 1.6, 1);
}
50% {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
100% {
opacity: 1;
}
}
.zoom-outy {
-webkit-animation-name: zoom-outy;
animation-name: zoom-outy;
}
/*-------------------------------------*/
@-webkit-keyframes zoomOutIn {
0% {
opacity: 0;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale3d(1.3, 1.3, 1);
transform: scale3d(1.3, 1.3, 1);
}
100% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes zoomOutIn {
0% {
opacity: 0;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale3d(1.3, 1.3, 1);
transform: scale3d(1.3, 1.3, 1);
}
100% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.zoomOutIn {
-webkit-animation-name: zoomOutIn;
animation-name: zoomOutIn;
}
/*-------------------------------------*/
@-webkit-keyframes zoomInOut {
0% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
100% {
opacity: 0;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale3d(1.2, 1.2, 1);
transform: scale3d(1.2, 1.2, 1);
}
}
@keyframes zoomInOut {
0% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
100% {
opacity: 0;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale3d(1.2, 1.2, 1);
transform: scale3d(1.2, 1.2, 1);
}
}
.zoomInOut {
-webkit-animation-name: zoomInOut;
animation-name: zoomInOut;
}
/*-------------------------------------*/
@-webkit-keyframes zoomOutSm {
0% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
100% {
opacity: 0;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale3d(0.9, 0.9, 1);
transform: scale3d(0.9, 0.9, 1);
}
}
@keyframes zoomOutSm {
0% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
100% {
opacity: 0;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale3d(0.9, 0.9, 1);
transform: scale3d(0.9, 0.9, 1);
}
}
.zoomOutSm {
-webkit-animation-name: zoomOutSm;
animation-name: zoomOutSm;
}
/*-------------------------------------*/
@-webkit-keyframes foldUp {
0% {
-webkit-transform: perspective(500px) translate3d(0, 25px, 0) rotate3d(1, 0, 0, 80deg) translate3d(0, 0, -50px);
transform: perspective(500px) translate3d(0, 25px, 0) rotate3d(1, 0, 0, 80deg) translate3d(0, 0, -50px);
opacity: 0;
}
100% {
-webkit-transform: perspective(500px) rotate3d(1, 0, 0, 0deg) translate3d(0, 0, 0);
transform: perspective(500px) rotate3d(1, 0, 0, 0deg) translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes foldUp {
0% {
-webkit-transform: perspective(500px) translate3d(0, 25px, 0) rotate3d(1, 0, 0, 80deg) translate3d(0, 0, -50px);
transform: perspective(500px) translate3d(0, 25px, 0) rotate3d(1, 0, 0, 80deg) translate3d(0, 0, -50px);
opacity: 0;
}
100% {
-webkit-transform: perspective(500px) rotate3d(1, 0, 0, 0deg) translate3d(0, 0, 0);
transform: perspective(500px) rotate3d(1, 0, 0, 0deg) translate3d(0, 0, 0);
opacity: 1;
}
}
.foldUp {
-webkit-animation-name: foldUp;
animation-name: foldUp;
-webkit-transform-origin: 50% 20%;
-ms-transform-origin: 50% 20%;
transform-origin: 50% 20%;
}
/*-------------------------------------*/
@-webkit-keyframes foldOut {
0% {
-webkit-transform: perspective(500px) rotate3d(1, 0, 0, 0deg) translate3d(0, 0, 0);
transform: perspective(500px) rotate3d(1, 0, 0, 0deg) translate3d(0, 0, 0);
opacity: 1;
}
100% {
-webkit-transform: perspective(500px) translate3d(0, -40px, 0) rotate3d(1, 0, 0, 90deg) translate3d(0, -100px, 25px);
transform: perspective(500px) translate3d(0, -40px, 0) rotate3d(1, 0, 0, 90deg) translate3d(0, -100px, 25px);
opacity: 0;
}
}
@keyframes foldOut {
0% {
-webkit-transform: perspective(500px) rotate3d(1, 0, 0, 0deg) translate3d(0, 0, 0);
transform: perspective(500px) rotate3d(1, 0, 0, 0deg) translate3d(0, 0, 0);
opacity: 1;
}
100% {
-webkit-transform: perspective(500px) translate3d(0, -40px, 0) rotate3d(1, 0, 0, 90deg) translate3d(0, -100px, 25px);
transform: perspective(500px) translate3d(0, -40px, 0) rotate3d(1, 0, 0, 90deg) translate3d(0, -100px, 25px);
opacity: 0;
}
}
.foldOut {
-webkit-animation-name: foldOut;
animation-name: foldOut;
-webkit-transform-origin: 50% 20%;
-ms-transform-origin: 50% 20%;
transform-origin: 50% 20%;
}
/*-------------------------------------*/
@-webkit-keyframes fadeInUpScale {
0% {
opacity: 0;
-webkit-transform: perspective(400px) translate3d(0, 200px, 400px);
transform: perspective(400px) translate3d(0, 200px, 400px);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInUpScale {
0% {
opacity: 0;
-webkit-transform: perspective(400px) translate3d(0, 200px, 400px);
transform: perspective(400px) translate3d(0, 200px, 400px);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInUpScale {
-webkit-animation-name: fadeInUpScale;
animation-name: fadeInUpScale;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-animation-duration: .8s;
animation-duration: .8s;
}
/*-------------------------------------*/
@-webkit-keyframes fadeInUpLeftScale {
0% {
opacity: 0;
-webkit-transform: perspective(400px) translate3d(-300px, 200px, 400px);
transform: perspective(400px) translate3d(-300px, 200px, 400px);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInUpLeftScale {
0% {
opacity: 0;
-webkit-transform: perspective(400px) translate3d(-300px, 200px, 400px);
transform: perspective(400px) translate3d(-300px, 200px, 400px);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInUpLeftScale {
-webkit-animation-name: fadeInUpLeftScale;
animation-name: fadeInUpLeftScale;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-animation-duration: .8s;
animation-duration: .8s;
}
/*-------------------------------------*/
@-webkit-keyframes fadeInUpRightScale {
0% {
opacity: 0;
-webkit-transform: perspective(400px) translate3d(300px, 200px, 400px);
transform: perspective(400px) translate3d(300px, 200px, 400px);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInUpRightScale {
0% {
opacity: 0;
-webkit-transform: perspective(400px) translate3d(300px, 200px, 400px);
transform: perspective(400px) translate3d(300px, 200px, 400px);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInUpRightScale {
-webkit-animation-name: fadeInUpRightScale;
animation-name: fadeInUpRightScale;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-animation-duration: .8s;
animation-duration: .8s;
}
/*--------------------------------------*/
@-webkit-keyframes cloudLoop {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
}
}
@keyframes cloudLoop {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
}
}
/*-------------------------------------*/
@-webkit-keyframes shine {
0% {
background-position: top left;
}
100% {
background-position: top right;
}
}
@keyframes shine {
0% {
background-position: top left;
}
100% {
background-position: top right;
}
}
.shine {
background: #222222 -webkit-gradient(linear, left top, right top, from(#222222), to(#222222), color-stop(0.5, #ffffff)) 0 0 no-repeat;
-webkit-background-size: 125px;
color: rgba(255, 255, 255, 0.1);
-webkit-background-clip: text;
-webkit-animation-name: shine;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
}
/*-------------------------------------*/
.animsition .init-animation-1,
.animsition .init-animation-2,
.animsition .init-animation-3,
.animsition .init-animation-4,
.animsition .init-animation-5 {
opacity: 0;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
/* 
Ripple Effect
-------------------------
*/
@-webkit-keyframes ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
0% {
opacity: 1;
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
opacity: 0;
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
}
@keyframes ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
0% {
opacity: 1;
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
opacity: 0;
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
}
.ripple-group-parent,
.ripple-alone {
position: relative;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
/* Fixing a Webkit browsers bug*/
}
.ink {
display: block;
position: absolute;
background: rgba(53, 233, 241, 0.5);
border-radius: 100%;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
z-index: 10;
}
/*animation effect*/
.ink.animate {
-webkit-animation: ripple 0.5s ease-out;
animation: ripple 0.5s ease-out;
}
/* 
Animated Navicon
-------------------------
*/
#animated-navicon .icon-bar {
position: relative;
top: 0;
-webkit-transition: top 0.14s linear 0.22s, -webkit-transform 0.22s ease-out, opacity 0.22s ease-out 0.22s;
transition: top 0.14s linear 0.22s, transform 0.22s ease-out, opacity 0.22s ease-out 0.22s;
}
#animated-navicon.opened .icon-bar:nth-child(3) {
opacity: 0;
-webkit-transition: opacity 0.14s ease-in;
transition: opacity 0.14s ease-in;
}
#animated-navicon.opened .icon-bar:nth-child(2) {
top: 6px;
-webkit-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg);
-webkit-transition: top 0.14s ease-in, -webkit-transform 0.22s ease-in-out 0.14s;
transition: top 0.14s ease-in, transform 0.22s ease-in-out 0.14s;
}
#animated-navicon.opened .icon-bar:nth-child(4) {
top: -6px;
-webkit-transform: rotate(225deg);
-ms-transform: rotate(225deg);
transform: rotate(225deg);
-webkit-transition: top 0.14s ease-in, -webkit-transform 0.22s ease-in-out 0.14s;
transition: top 0.14s ease-in, transform 0.22s ease-in-out 0.14s;
}
/* 
Loaders
-------------------------
*/
@-webkit-keyframes load1 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load1 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes load2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/* loader1 */
.loader1 {
display: block;
position: relative;
width: 50px;
height: 50px;
margin: 25px auto;
box-shadow: inset 0 0 0 1px #171724;
border-radius: 50%;
font-size: 11px;
text-indent: -99em;
-webkit-animation: load2 3s infinite linear;
animation: load2 3s infinite linear;
}
.loader1:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 25px;
height: 50px;
border-style: solid;
border-radius: 50px 0 0 50px;
border-width: 1px 0 1px 1px;
-webkit-animation: load1 1.2s infinite ease-in-out 0.4s;
animation: load1 1.2s infinite ease-in-out 0.4s;
-webkit-transform-origin: 25px 25px;
-ms-transform-origin: 25px 25px;
transform-origin: 25px 25px;
}
.loader1:after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 25px;
height: 50px;
border-style: solid;
border-radius: 0 50px 50px 0;
border-width: 1px 1px 1px 0;
-webkit-animation: load1 1.2s infinite ease-in-out;
animation: load1 1.2s infinite ease-in-out;
-webkit-transform-origin: 0 25px;
-ms-transform-origin: 0 25px;
transform-origin: 0 25px;
}
/* loader2 */
.loader2 {
display: block;
position: relative;
width: 50px;
height: 50px;
margin: 25px auto;
box-shadow: inset 0 0 0 1px #171724;
border-radius: 50%;
font-size: 11px;
text-indent: -99em;
-webkit-animation: load2 3s infinite linear;
animation: load2 3s infinite linear;
}
.loader2:before {
content: '';
position: absolute;
top: -3px;
left: -3px;
width: 28px;
height: 56px;
border-radius: 56px 0 0 56px;
-webkit-animation: load1 1.2s infinite ease-in-out 0.4s;
animation: load1 1.2s infinite ease-in-out 0.4s;
-webkit-transform-origin: 28px 28px;
-ms-transform-origin: 28px 28px;
transform-origin: 28px 28px;
}
.loader2:after {
content: '';
position: absolute;
top: -3px;
right: -3px;
width: 28px;
height: 56px;
border-radius: 0 56px 56px 0;
-webkit-animation: load1 1.2s infinite ease-in-out;
animation: load1 1.2s infinite ease-in-out;
-webkit-transform-origin: 0 28px;
-ms-transform-origin: 0 28px;
transform-origin: 0 28px;
}
/* loader3 */
.loader3 {
display: block;
position: relative;
width: 50px;
height: 50px;
margin: 25px auto;
border-radius: 50%;
border-style: solid;
border-width: 1px;
font-size: 10px;
text-indent: -99em;
-webkit-animation: load2 1.1s infinite linear;
animation: load2 1.1s infinite linear;
}
/*
========================================
Generic Layout Classes --( set 01 )--
========================================
*/
.font-second {
font-family: 'Krub', sans-serif;
text-transform: capitalize;
}
/* 
Home Section Texts
-------------------------
*/
.hs-text-1 {
position: relative;
margin-top: 0;
font-size: 30px;
letter-spacing: 33px;
margin-right: -33px;
font-weight: 400;
color: #fff;
opacity: .9;
}
.hs-text-2 {
position: relative;
margin-top: 0;
font-size: 36px;
letter-spacing: .1em;
margin-right: -0.1em;
line-height: 1.2;
font-weight: 900;
text-transform: uppercase;
color: #fff;
opacity: 1;
}
.hs-text-3 {
position: relative;
margin-top: 0;
font-size: 14px;
letter-spacing: 3px;
margin-right: -3px;
font-weight: 400;
text-transform: uppercase;
color: #fff;
opacity: .85;
}
.hs-text-4 {
position: relative;
margin-top: 0;
font-size: 32px;
line-height: 1.2;
letter-spacing: .2em;
margin-right: -0.2em;
font-weight: 900;
text-transform: uppercase;
}
.hs-text-5 {
position: relative;
margin-top: 0;
font-size: 21px;
line-height: 1.2;
font-weight: 300;
text-transform: uppercase;
}
.hs-text-6 {
position: relative;
margin-top: 0;
font-size: 14px;
letter-spacing: .35em;
margin-right: -0.35em;
line-height: 1.2;
font-weight: 400;
text-transform: uppercase;
}
.hs-text-7 {
position: relative;
margin-top: 0;
font-size: 32px;
line-height: 1.3;
letter-spacing: .6em;
margin-right: -0.6em;
font-weight: 400;
text-transform: capitalize;
}
.hs-text-8 {
position: relative;
margin-top: 0;
display: inline-block;
padding: 15px 24px;
background: #ffffff;
font-size: 12px;
letter-spacing: 2px;
margin-right: -2px;
font-weight: 400;
color: #171724;
}
.hs-text-8 > span {
margin: 0 10px;
}
.hs-text-8.highlight {
background: #e41919;
opacity: .65;
}
.hs-text-8.transparent {
background: none;
color: #ffffff;
padding: 0;
}
.hs-text-9 {
position: relative;
margin-top: 0;
font-size: 30px;
letter-spacing: .5em;
margin-right: -0.5em;
line-height: 1.8;
font-weight: 100;
opacity: .9;
}
.hs-text-10 {
position: relative;
margin-top: 0;
font-size: 36px;
line-height: 1.2;
letter-spacing: .1em;
margin-right: -0.1em;
font-weight: 100;
}
.hs-text-10 span:not(.cd-words-wrapper) {
font-weight: 900;
}
.hs-text-11 {
position: relative;
margin-top: 0;
font-size: 35px;
line-height: 1;
letter-spacing: .1em;
margin-right: -0.1em;
font-weight: 700;
}
.hs-text-11 span em {
text-transform: lowercase;
}
.hs-text-11 span i:first-child em {
text-transform: uppercase;
}
.hs-text-11 span:not(.cd-words-wrapper) {
font-weight: 100;
}
.hs-text-12 {
position: relative;
margin-top: 0;
font-size: 42px;
line-height: 1.2;
font-weight: 100;
text-transform: capitalize;
}
.hs-text-12 span {
font-weight: 700;
}
.hs-text-13 {
position: relative;
margin-top: 0;
font-size: 48px;
line-height: 1.4;
letter-spacing: .2em;
margin-right: -0.2em;
font-weight: 400;
}
.hs-text-14 {
position: relative;
margin-top: 0;
font-size: 22px;
line-height: 2;
letter-spacing: 1.1em;
margin-right: -1.1em;
font-weight: 400;
text-transform: uppercase;
}
.hs-text-detail {
display: inline-block;
position: relative;
text-transform: capitalize;
font-weight: 500;
letter-spacing: 10px;
margin-right: -10px;
font-size: 11px;
padding-left: 10px;
margin-bottom: 0;
}
/* 
Sections Titles
-------------------------
*/
.section-title {
position: relative;
padding-bottom: 40px;
text-align: center;
}
.section-title-heading {
display: inline-block;
font-family: 'Krub', sans-serif;
text-transform: capitalize;
letter-spacing: 0;
line-height: 1.4;
font-weight: 300;
font-size: 32px;
margin-top: 0;
}
.section-title-heading span {
font-weight: 700;
}
.section-title-more {
display: inline-block;
position: relative;
font-family: 'Krub', sans-serif;
text-transform: uppercase;
font-weight: 500;
letter-spacing: .65em;
margin-right: -0.65em;
font-size: 8px;
}
.section-title-more p {
position: relative;
margin: 0;
padding: 0 10px;
z-index: 2;
}
.section-title-small {
text-align: left;
}
.section-title-small .section-title-heading {
font-size: 28px;
margin-top: 0;
padding: 10px 0 10px 20px;
border-left: 2px solid #ffffff;
}
.section-title-small .section-title-heading:after {
content: none;
}
/* 
Emphasis & misc
-------------------------
*/
small,
.small {
font-size: 85%;
}
.section-text {
margin-bottom: 10.5px;
font-size: 16px;
font-weight: 300;
color: #000;
line-height: 1.7;
}
.presentation {
font-size: 27px;
font-weight: 100;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-thin {
font-weight: 100;
}
.text-normal {
font-weight: 300;
}
.text-strong {
font-weight: 700 !important;
}
.uppercase {
text-transform: uppercase;
}
.letter-space {
letter-spacing: 1em;
margin-right: -1em;
}
.italic {
font-style: italic;
}
.highlight {
color: #35e9f1;
}
.text-white {
color: #fff !important;
}
.black {
color: #000 !important;
}
.font-size-16 {
font-size: 16px;
}
.font-size-24 {
font-size: 24px;
}
.font-size-36 {
font-size: 36px;
}
.font-size-48 {
font-size: 48px;
}
.font-size-64 {
font-size: 64px;
}
.clearlist,
.clearlist li {
list-style: none;
padding: 0;
margin: 0;
background: none;
}
.no-transp {
opacity: 1 !important;
}
.perspect {
-webkit-perspective: 700px;
perspective: 700px;
}
.fullwidth-galley-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 25;
}
/* Columns Of Same Height */
.row-same-height {
display: table;
}
.col-xs-height {
display: table-cell;
float: none !important;
}
@media (min-width: 768px) {
.col-sm-height {
display: table-cell;
float: none !important;
}
}
@media (min-width :320px) and (max-width :992px) {
	.fact-text {
	font-size: 10px !important;}
}
@media (min-width :768px) and (max-width :992px) {
#services-section { 
	background-size: 16%;
	background-position: center 10px;
}
#packages-section { 
	background-size: 16%;
	background-position: center 10px;
}
#process-section { 
    background-size: 25%;
    background-position: center -52px;
}
} 
@media (min-width :426px) and (max-width :768px) {
#services-section { 
    background-size: 40% !important;
    background-position: center 20px !important;
}
#packages-section { 
    background-size: 40% !important;
    background-position: center 20px !important;
}
 
#process-section { 
    background-size: 55% !important;
    background-position: center -60px !important;
}
#services-section .section-title {
padding-bottom: 90px;padding-top: 120px;
}
#packages-section .section-title {
padding-bottom: 90px;padding-top: 120px;
}
 
#process-section .section-title {
padding-bottom: 90px;padding-top: 120px;
}
}
@media (min-width :376px) and (max-width :425px) {
#services-section { 
    background-size: 40% !important;
    background-position: center 20px !important;
}
#packages-section { 
    background-size: 40% !important;
    background-position: center 20px !important;
}
 
#process-section { 
    background-size: 70% !important;
    background-position: center -30px !important;
}
#services-section .section-title {
padding-bottom: 90px;padding-top: 90px;
}
#packages-section .section-title {
padding-bottom: 90px;padding-top: 90px;
}
 
#process-section .section-title {
padding-bottom: 90px;padding-top: 95px;
}
}
@media (min-width :300px) and (max-width :375px) {
#services-section { 
    background-size: 50% !important;
    background-position: center 20px !important;
}
#packages-section { 
    background-size: 50% !important;
    background-position: center 20px !important;
}
 
#process-section { 
    background-size: 80% !important;
    background-position: center -30px !important;
}
#services-section .section-title {
padding-bottom: 90px;padding-top: 90px;
}
#packages-section .section-title {
padding-bottom: 90px;padding-top: 90px;
}
 
#process-section .section-title {
padding-bottom: 90px;padding-top: 95px;
}
}


@media (min-width: 992px) {
.col-md-height {
display: table-cell;
float: none !important;
}
}
@media (min-width: 1200px) {
.col-lg-height {
display: table-cell;
float: none !important;
}
}
.col-middle {
vertical-align: middle;
}
/* 
Sections Layout
-------------------------
*/
.section {
padding-top: 40px;
padding-bottom: 40px;
overflow: hidden;
}
@media (min-width: 768px) {
.section {
padding-top: 60px;
padding-bottom: 60px;
}
}
@media (min-width: 992px) {
.section {
padding-top: 90px;
padding-bottom: 90px;
}
}
@media (min-width: 1200px) {
.section {
padding-top: 120px;
padding-bottom: 120px;
}
}
.small-section {
padding-top: 40px;
padding-bottom: 40px;
}
@media (min-width: 768px) {
.small-section {
padding-top: 50px;
padding-bottom: 50px;
}
}
@media (min-width: 992px) {
.small-section {
padding-top: 60px;
padding-bottom: 60px;
}
}
@media (min-width: 1200px) {
.small-section {
padding-top: 70px;
padding-bottom: 70px;
}
}
/* The difference between padding-top and padding-bottom of .sticky-nav-here element and marging-top of .sticky-visible-here must be the height of the .navbar in normal state -not transarent-. */
.sticky-nav-here {
padding-top: 100px;
padding-bottom: 40px;
overflow: hidden;
}
@media (min-width: 768px) {
.sticky-nav-here {
padding-top: 120px;
padding-bottom: 60px;
}
}
@media (min-width: 992px) {
.sticky-nav-here {
padding-top: 150px;
padding-bottom: 90px;
}
}
@media (min-width: 1200px) {
.sticky-nav-here {
padding-top: 180px;
padding-bottom: 120px;
}
}
.sticky-visible-here {
margin-top: -60px;
/* must be the height of navbar */
}
.overlay {
position: relative;
}
.overlay:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
/*
========================================
   Buttons
========================================
*/
.btn {
display: inline-block;
line-height: 1.5;
min-width: 162px;
max-width: 270px;
padding: 8px 20px;
border-radius: 0;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 400;
-webkit-transition: color 0.27s ease-out, background 0.27s ease-out, border 0.27s ease-out 0s;
transition: color 0.27s ease-out, background 0.27s ease-out, border 0.27s ease-out 0s;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus {
outline: 0;
}
.btn:hover,
.btn:focus {
text-decoration: none;
}
.btn:active,
.btn.active {
box-shadow: none;
}
.btn-small {
display: inline-block;
line-height: 1.5;
min-width: 117px;
max-width: 160px;
padding: 4px 10px;
border-radius: 0;
font-size: 10px;
}
/*
Animated buttons
-------------------------
*/
.btn-animated {
position: relative;
z-index: 1;
-webkit-backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: all 0.35s ease-out;
transition: all 0.35s ease-out;
}
.btn-animated > span:not(.ink) {
vertical-align: middle;
}
/* Split Button */
.btn-split {
overflow: hidden;
margin-top: 0;
margin-bottom: 0;
}
.btn-split::before,
.btn-split::after {
content: attr(data-text);
position: absolute;
width: 100%;
height: 50%;
left: 0;
overflow: hidden;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.btn-split::before {
top: 0;
padding-top: 8px;
}
.btn-split::after {
bottom: 0;
line-height: 0;
}
.btn-split > span:not(.ink) {
display: block;
-webkit-transform: scale3d(0.2, 0.2, 1);
transform: scale3d(0.2, 0.2, 1);
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.btn-split .btn-icon {
position: relative;
height: 16px;
}
.btn-split .btn-icon:before {
position: absolute;
margin: 0;
font-size: 20px;
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.btn-split:hover::before {
-webkit-transform: translate3d(0, -105%, 0);
transform: translate3d(0, -105%, 0);
}
.btn-split:hover::after {
-webkit-transform: translate3d(0, 105%, 0);
transform: translate3d(0, 105%, 0);
}
.btn-split:hover > span:not(.ink) {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
/* Slide Button */
.btn-slide {
overflow: hidden;
-webkit-transition: background-color 0.3s, border-color 0.3s, color 0.3s;
transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.btn-slide > span:not(.ink) {
display: inline-block;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.btn-slide .btn-icon {
line-height: 37.5px;
position: absolute;
height: 100%;
top: 0;
right: 8px;
font-size: 24px;
-webkit-transform: translate3d(50px, 0, 0);
transform: translate3d(50px, 0, 0);
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.btn-slide.btn-small .btn-icon {
line-height: 24px;
font-size: 18px;
}
.btn-slide:hover > span:not(.ink) {
-webkit-transform: translate3d(-8px, 0, 0);
transform: translate3d(-8px, 0, 0);
}
.btn-slide:hover .btn-icon {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/* Play Button */
.btn-play {
display: inline-block;
position: relative;
height: 73px;
width: 73px;
border: 1px solid #ffffff;
border-radius: 50%;
vertical-align: middle;
-webkit-transition: background .20s;
transition: background .20s;
}
.btn-play:after,
.btn-play:before {
content: "";
position: relative;
display: block;
height: 1px;
width: 20px;
background: #ffffff;
top: 34.5px;
left: 26.5px;
}
.btn-play:after {
-webkit-transform: rotateZ(35deg);
transform: rotateZ(35deg);
-webkit-transform-origin: 100% -100%;
-ms-transform-origin: 100% -100%;
transform-origin: 100% -100%;
}
.btn-play:before {
-webkit-transform: rotateZ(-35deg);
transform: rotateZ(-35deg);
-webkit-transform-origin: 100% 200%;
-ms-transform-origin: 100% 200%;
transform-origin: 100% 200%;
}
.btn-play:hover {
background-color: rgba(255, 255, 255, 0.2);
}
/*
========================================
Navbar 
========================================
*/
.navbar {
position: relative;
border: 0;
box-shadow: none;
border-bottom: 1px solid #757a86;
min-height: 60px;
margin-bottom: 0;
}
.navbar-collapse {
position: relative;
padding-right: 0;
padding-left: 0;
box-shadow: none;
}
.navbar-fixed-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
max-height: 250px;
}
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
}
.navbar-fixed-top {
border-width: 1px;
}
.navbar-fixed-bottom {
border-width: 0;
}
.navbar-header {
position: relative;
}
.navbar-brand {
position: relative;
font-size: 18px;
line-height: 21px;
padding: 0 11.25px;
height: 100%;
}
.navbar-brand:hover,
.navbar-brand:focus {
text-decoration: none;
}
.navbar-brand p {
padding: 19.5px 0 19.5px 10px;
margin: 0;
height: 60px;
vertical-align: middle;
letter-spacing: .4em;
font-size: 14px;
text-transform: uppercase;
/*The line-height here and your logo height should be the same, so type the height of your logo in front of line-height below */
line-height: 30px;
padding: 15px 0 15px 10px;
-webkit-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.navbar-logo {
margin: 0 auto;
padding: 19px 0 0 0;
cursor: pointer;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#logo-svg-navbar {
width: 60px;
height: 30px;
}
.nav > li > a {
padding-left: 10px;
padding-right: 10px;
}
.navbar-nav {
width: 100%;
margin: 0;
}
@media screen and (min-width: 768px) {
.navbar-nav {
width: auto;
position: absolute;
top: 50%;
right: 0;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
}
.navbar-nav > li > a {
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
line-height: 21px;
text-align: center;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 400;
}
.navbar-toggle {
position: absolute;
right: 0;
top: 50%;
margin-right: 11.25px;
padding: 25px 0;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
margin-top: 0;
margin-bottom: 0;
}
.navbar-toggle .icon-bar {
display: block;
width: 28px;
height: 2px;
border-radius: 1px;
}
.navbar-toggle .icon-bar + .icon-bar {
margin-top: 4px;
}
/* Sticky Navbar */
.sticky-navbar {
top: 0;
position: absolute;
z-index: 2000;
width: 100%;
padding-top: 60px;
}
.sticky-navbar #nav {
position: relative;
width: 100%;
top: -60px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.sticky-navbar #nav.affix {
visibility: visible;
position: fixed;
-webkit-transform: translate3d(0, 60px, 0);
transform: translate3d(0, 60px, 0);
width: 100%;
opacity: 0.9;
-webkit-transition: -webkit-transform .5s;
transition: transform .5s;
background: #f7f6f6;
}
/* Transparent Sticky Navbar */
.transp-nav.sticky-navbar #nav {
position: absolute;
width: 100%;
top: auto;
bottom: 0;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.transp-nav.sticky-navbar #nav.affix {
visibility: visible;
position: fixed;
top: -60px;
bottom: auto;
width: 100%;
opacity: 0.9;
-webkit-transform: translate3d(0, 60px, 0);
transform: translate3d(0, 60px, 0);
-webkit-transition: -webkit-transform .5s;
transition: transform .5s;
}
.sticky-visible {
padding-top: 0;
}
.navbar-nav-elastic {
margin-top: 103px;
}
/*
========================================
Carousel
========================================
*/
/* Owl Carousel */
.owl-controls {
margin-top: 10px;
text-align: center;
-webkit-tap-highlight-color: transparent;
}
/* owl carousel dots customization */
.owl-nav .disabled {
opacity: .5;
cursor: default;
}
.owl-dots {
margin: 15px auto;
text-align: center;
}
.owl-dot {
display: inline-block;
zoom: 1;
width: 11px;
height: 7px;
margin: 7px;
}
.owl-dot span {
/*background: #d6d6d6;*/
display: block;
/*border-radius: 50%*/
width: 11px;
height: 7px;
margin: 0;
border-radius: 3px;
background: rgba(255, 255, 255, 0.5);
-webkit-backface-visibility: visible;
-webkit-transition: background 0.27s ease-out;
transition: background 0.27s ease-out;
/*border-radius: 50%*/
}
.owl-dot.active span {
background: #35e9f1;
/*border-radius: 50%*/
}
.dots-over .owl-dots {
position: absolute;
width: 100%;
bottom: 0;
}
/* 
Genaral Controls Modifications
-------------------------
*/
/* Carousel arrows */
.carousel-control {
width: 100px;
border: none;
padding: 0 !important;
margin: 0 !important;
text-shadow: none;
opacity: 1;
}
.carousel-control.left,
.carousel-control.right {
background: 0;
-webkit-filter: 0;
filter: 0;
opacity: .9;
cursor: pointer;
z-index: 6;
}
.carousel-control.left:hover,
.carousel-control.right:hover {
background: 0;
opacity: 1;
}
.carousel-control .icon-prev,
.carousel-control .icon-next,
.carousel-control .arrow-left,
.carousel-control .arrow-right {
position: absolute;
top: 50%;
width: 30px;
height: 96px;
background: rgba(23, 23, 36, 0.15);
border: 1px solid rgba(255, 255, 255, 0.1);
-webkit-transition: -webkit-transform 0.27s ease-out, opacity 0.27s ease-out;
transition: transform 0.27s ease-out, opacity 0.27s ease-out;
z-index: 7;
}
.carousel-control .icon-prev::before,
.carousel-control .icon-next::before,
.carousel-control .arrow-left::before,
.carousel-control .arrow-right::before {
content: '';
display: block;
width: 12px;
height: 12px;
position: absolute;
top: 50%;
-webkit-transition: -webkit-transform 0.2s ease-out;
transition: transform 0.2s ease-out;
}
.carousel-control .icon-prev,
.carousel-control .arrow-left {
left: -1px;
-webkit-transform: translateX(-30%) translateY(-50%);
-ms-transform: translateX(-30%) translateY(-50%);
transform: translateX(-30%) translateY(-50%);
opacity: 0;
}
.carousel-control .icon-prev::before,
.carousel-control .arrow-left::before {
left: 50%;
border-top: 2px #ffffff solid;
border-left: 2px #ffffff solid;
border-top-left-radius: 2px;
-webkit-transform: translateX(-30%) translateY(-50%) rotate(-45deg);
-ms-transform: translateX(-30%) translateY(-50%) rotate(-45deg);
transform: translateX(-30%) translateY(-50%) rotate(-45deg);
}
.carousel-control .icon-next,
.carousel-control .arrow-right {
right: -1px;
-webkit-transform: translateX(30%) translateY(-50%);
-ms-transform: translateX(30%) translateY(-50%);
transform: translateX(30%) translateY(-50%);
opacity: 0;
}
.carousel-control .icon-next::before,
.carousel-control .arrow-right::before {
left: 50%;
border-top: 2px #ffffff solid;
border-right: 2px #ffffff solid;
border-top-right-radius: 2px;
-webkit-transform: translateX(-80%) translateY(-50%) rotate(45deg);
-ms-transform: translateX(-80%) translateY(-50%) rotate(45deg);
transform: translateX(-80%) translateY(-50%) rotate(45deg);
}
.carousel:hover .icon-prev,
.carousel:hover .arrow-left {
-webkit-transform: translateX(0) translateY(-50%);
-ms-transform: translateX(0) translateY(-50%);
transform: translateX(0) translateY(-50%);
opacity: 1;
}
.carousel:hover .icon-next,
.carousel:hover .arrow-right {
-webkit-transform: translateX(0) translateY(-50%);
-ms-transform: translateX(0) translateY(-50%);
transform: translateX(0) translateY(-50%);
opacity: 1;
}
/* 
Carosel indicators
-------------------------
*/
.carousel-indicators li {
margin: 3px;
width: 8px;
height: 8px;
border-radius: 50%;
-webkit-transition: background .5s ease;
transition: background .5s ease;
}
.carousel-indicators .active {
margin: 3px;
width: 8px;
height: 8px;
}
/* 
Making Bootstrap carousel fade instead of sliding
-------------------------
*/
.carousel-fade .carousel-inner .item {
opacity: 0;
-webkit-transition: opacity .8s;
transition: opacity .8s;
}
.carousel-fade .carousel-inner .active {
opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
opacity: 0;
z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}
.carousel-fade .carousel-control {
z-index: 2;
}
/* 
Falling Carousel Indicators Style
-------------------------
*/
.dotstyle-fall li,
.dotstyle-fall div {
position: relative;
border-width: 0;
background: 0;
background: transparent !important;
}
.dotstyle-fall li:after,
.dotstyle-fall div:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 3px;
background: rgba(53, 233, 241, 0.3);
visibility: hidden;
opacity: 0;
}
.dotstyle-fall li a,
.dotstyle-fall div a,
.dotstyle-fall li span,
.dotstyle-fall div span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 3px;
background: rgba(53, 233, 241, 0.3);
outline: none;
text-indent: -999px;
/* make the text accessible to screen readers */
direction: ltr;
cursor: pointer;
}
.dotstyle-fall li a:focus,
.dotstyle-fall div a:focus,
.dotstyle-fall li.active a,
.dotstyle-fall div.active a,
.dotstyle-fall li span:focus,
.dotstyle-fall div span:focus,
.dotstyle-fall li.active span,
.dotstyle-fall div.active span {
background: #35e9f1;
}
.dotstyle-fall li.active,
.dotstyle-fall div.active {
background: 0 !important;
}
.dotstyle-fall li.active:after,
.dotstyle-fall div.active:after {
opacity: 1;
visibility: visible;
background: rgba(53, 233, 241, 0.8);
}
.dotstyle-fall li.active a,
.dotstyle-fall div.active a,
.dotstyle-fall li.active span,
.dotstyle-fall div.active span {
opacity: 0;
}
/* 
Filling Carousel Indicators Style
-------------------------
*/
.dotstyle-fillup li,
.dotstyle-fillup div {
position: relative;
border: 0;
}
.dotstyle-fillup li a,
.dotstyle-fillup div a,
.dotstyle-fillup li span,
.dotstyle-fillup div span {
position: absolute;
top: 0;
left: 0;
width: 11px;
height: 11px;
outline: none;
cursor: pointer;
background-color: rgba(255, 255, 255, 0.3);
overflow: hidden;
}
.dotstyle-fillup li a:after,
.dotstyle-fillup div a:after,
.dotstyle-fillup li span:after,
.dotstyle-fillup div span:after {
background-color: #fff;
bottom: 0;
content: "";
width: 0;
left: 0;
position: absolute;
height: 100%;
}
.dotstyle-fillup li.active a:after,
.dotstyle-fillup div.active a:after,
.dotstyle-fillup li.active span:after,
.dotstyle-fillup div.active span:after {
width: 100%;
}
/*=============================================
=            Animate Slider Styles            =
=============================================*/
.animate-slider {
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}
.animate-slider .slide {
position: absolute;
top: 0;
left: 0;
z-index: 1;
opacity: 0;
}
.as-background {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
-webkit-transition: opacity 0s ease-out 0.57s;
transition: opacity 0s ease-out 0.57s;
}
.as-overlay .as-background:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(34, 34, 34, 0.3);
}
.active-as-background {
-webkit-transition: opacity 0.57s ease-out 0s;
transition: opacity 0.57s ease-out 0s;
z-index: 3;
}
.as-indicators {
position: absolute;
bottom: 40px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
height: 5px;
width: 150px;
margin: 0 auto;
font-size: 0;
z-index: 6;
text-align: center;
}
.as-indicator {
float: left;
position: relative;
height: 100%;
padding: 0;
margin: 0;
border-radius: 2px;
margin-right: 5px;
background: rgba(255, 255, 255, 0.4);
cursor: pointer;
}
.as-indicator:last-child {
margin-right: 0;
}
.as-load-bar {
position: absolute;
height: 100%;
background: #ffffff;
display: block;
border-radius: 2px;
}
.single-loadbar .as-indicator {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
cursor: default;
}
.single-loadbar .as-indicator.active {
opacity: 1;
}
.single-loadbar .as-load-bar {
-webkit-transition: width 0s;
transition: width 0s;
}
.show-indicators .as-indicators {
bottom: 40px;
padding: 10px;
}
.show-indicators .as-indicator {
display: inline-block;
float: none;
width: 11px;
height: 7px;
margin: 7px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.5);
}
.show-indicators .as-indicator.active {
background: #ffffff;
}
.show-indicators .as-load-bar {
height: 0;
}
.show-indicators .dotstyle-fall .as-load-bar {
height: 100%;
width: 100% !important;
}
.active .as-load-bar {
-webkit-transition: width 0s;
transition: width 0s;
}
.as-arrow {
z-index: 6;
}
/*=============================================
=             Background Slideshow            =
=============================================*/
.bg-slideshow-wrapper {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
.bg-slideshow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
/*animation*/
-webkit-animation: slideShow 24s linear infinite 0s;
animation: slideShow 24s linear infinite 0s;
}
.bg-slide-1 {
opacity: 1;
}
.bg-slide-2 {
-webkit-animation-delay: 8s;
animation-delay: 8s;
}
.bg-slide-3 {
-webkit-animation-delay: 16s;
animation-delay: 16s;
}
/* keyframes*/
@-webkit-keyframes slideShow {
0% {
opacity: 0;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
5% {
opacity: 1;
}
33% {
opacity: 1;
}
41% {
opacity: 0;
-webkit-transform: scale3d(1.3, 1.3, 1);
transform: scale3d(1.3, 1.3, 1);
}
100% {
opacity: 0;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes slideShow {
0% {
opacity: 0;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
5% {
opacity: 1;
}
33% {
opacity: 1;
}
41% {
opacity: 0;
-webkit-transform: scale3d(1.3, 1.3, 1);
transform: scale3d(1.3, 1.3, 1);
}
100% {
opacity: 0;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
/*
========================================
Home Section Text Mask
========================================
*/
.text-mask-light {
background-position: 50% 50%;
background-size: cover;
text-align: center;
}
.text-mask {
margin: 50px auto 0;
padding: 0 25px;
display: inline;
border-radius: 700px;
background: #fff;
color: #000;
mix-blend-mode: lighten;
}
.text-mask b {
margin-left: .1em;
}
/*
========================================
Skill Bars
========================================
*/
.skillbar-container {
position: relative;
margin-bottom: 20px;
font-size: 13px;
}
.skillbar-container:last-child {
margin-bottom: 0;
}
.skillbar-title {
font-size: 15px;
font-weight: 300;
color: #000;
line-height: 1.7;
text-transform: capitalize;
margin-bottom: 6px;
}
.skillbar-title span {
float: right;
}
.skillbar {
width: 100%;
height: 3px;
border-radius: 0 2px 2px 0;
overflow: hidden;
}
.skillbar-bar {
height: 3px;
width: 0;
border-radius: 0 2px 2px 0;
}
/* 
=========================
Layout styles
--------------
Contents
========

General Styles
Page Loader
Scroll Progress Bar
Home Section
About Section
Facts Section
Services Section
Works Section
Project Order
Team Section
Process Section
Testimonials
Prices Section
Blog Section
Contact Section
Google Map
Footer Section

Blog Pages Styles
Works Pages Styles
Blog and Work pages background images

Generic Layout Classes --( set 02 )--

*/
/*
========================================
General Styles
========================================
*/
body {
overflow-x: hidden;
}
#page {
position: relative;
overflow-x: hidden;
overflow-y: hidden;
width: 100%;
}
#page-2 {
position: relative;
overflow-x: hidden;
width: 100%;
z-index: 999;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 950px;
}
}
@media (min-width: 1200px) {
.container {
width: 1053px;
}
}
/*
========================================
Page Loader
========================================
*/
.animsition-loading .loader1,
.animsition-loading .loader2,
.animsition-loading .loader3 {
top: calc(50% - 50px);
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.page-loader-text {
position: absolute;
top: calc(50% + 50px);
width: 100%;
margin: 0 auto;
padding-left: 7px;
text-align: center;
font-family: 'Krub', sans-serif;
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .4em;
}
/*
========================================
Scroll Progress Bar
========================================
*/
#scroll-progressbar {
display: none;
}
/*============================
= Home Section               =
============================*/
.home-section {
position: relative;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.hs-content {
position: absolute;
top: 0;
left: 0;
display: table;
height: 100%;
width: 100%;
color: #ffffff;
}
.hs-content-inner {
position: relative;
display: table-cell;
vertical-align: middle;
text-align: center;
width: 100%;
padding: 0 15px;
z-index: 5;
}
.hs-content-inner > div {
display: table;
margin-left: auto;
margin-right: auto;
}
.scroll-down-arrow {
position: absolute;
bottom: 0;
left: calc(50% - 13px);
width: 26px;
height: 50px;
-webkit-animation-name: fadeInOutDown;
animation-name: fadeInOutDown;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-duration: 1.2s;
animation-duration: 1.2s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
z-index: 6;
}
.scroll-down-arrow a {
font-size: 28px;
text-align: center;
}
.hero-clouds {
position: absolute;
top: 0;
left: 0;
width: 250.625em;
height: 43.75em;
background: url(../img/backgrounds/clouds.png) 0px 100% repeat-x;
-webkit-animation: cloudLoop 80s linear infinite;
animation: cloudLoop 80s linear infinite;
}
.particles,
.fss,
.fss-solid {
position: absolute;
top: 0;
left: 0;
width: 100vw !important;
height: 100%;
overflow: hidden;
}
.particles {
opacity: .5;
}
.fss {
opacity: .15;
}
.particles-js {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
width: 40%;
height: 30vh;
overflow: hidden;
opacity: 0.8;
}
.video-background,
.youtube-bg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 2;
}
.video-background:before,
.youtube-bg:before {
z-index: 4;
}
.parallax-hero,
.zoom-hero {
position: fixed;
top: 0;
left: 0;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
.parallax-section-bg {
position: absolute;
height: 120vh !important;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
.mobile .parallax-section-bg {
height: 100% !important;
}
.fixed-bg {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.zoom-hero {
background-attachment: fixed;
}
.scaled-up {
-webkit-transform: scale3d(1.4, 1.4, 1);
transform: scale3d(1.4, 1.4, 1);
}
.owl-hs-slider {
height: 100%;
width: 100%;
}
.owl-hs-slider .owl-dots {
position: absolute;
bottom: 25px;
width: 100%;
}
.owl-hs-slider .owl-stage-outer,
.owl-hs-slider .owl-stage,
.owl-hs-slider .owl-item,
.owl-hs-slider .owl-hs-slide {
height: 100%;
}
.owl-hs-slide {
position: relative;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
#logo-svg-hs {
width: 400px;
}
.home-bg {
background-image: url(../img/backgrounds/home-background-01.html);
}
/* 
Home section Owl slider Backgrounds
-------------------------
*/
.owl-hs-slide-01 {
background-image: url(../img/backgrounds/home-background-01.html);
}
.owl-hs-slide-02 {
background-image: url(../img/backgrounds/home-background-02.html);
}
.owl-hs-slide-03 {
background-image: url(../img/backgrounds/home-background-03.html);
}
.retina-support .owl-hs-slide-01 {
background-image: url("../img/backgrounds/home-background-01.html");
}
@media only screen and (min-device-width: 320px) {
.retina-support .owl-hs-slide-01 {
background-image: url("../img/backgrounds/home-background-01.html");
}
}
@media only screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2.4), (min--moz-device-pixel-ratio: 2.4), (-webkit-min-device-pixel-ratio: 2.4), (min-resolution: 2.4dppx) {
.retina-support .owl-hs-slide-01 {
background-image: url("../img/backgrounds/home-background-01%402x.html");
}
}
@media only screen and (min-device-width: 1200px) {
.retina-support .owl-hs-slide-01 {
background-image: url("../img/backgrounds/home-background-01%40lg.html");
}
}
@media only screen and (min-device-width: 1200px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
.retina-support .owl-hs-slide-01 {
background-image: url("../img/backgrounds/home-background-01%40lg2x.html");
}
}
.retina-support .owl-hs-slide-02 {
background-image: url("../img/backgrounds/home-background-02.html");
}
@media only screen and (min-device-width: 320px) {
.retina-support .owl-hs-slide-02 {
background-image: url("../img/backgrounds/home-background-02.html");
}
}
@media only screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2.4), (min--moz-device-pixel-ratio: 2.4), (-webkit-min-device-pixel-ratio: 2.4), (min-resolution: 2.4dppx) {
.retina-support .owl-hs-slide-02 {
background-image: url("../img/backgrounds/home-background-02%402x.html");
}
}
@media only screen and (min-device-width: 1200px) {
.retina-support .owl-hs-slide-02 {
background-image: url("../img/backgrounds/home-background-02%40lg.html");
}
}
@media only screen and (min-device-width: 1200px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
.retina-support .owl-hs-slide-02 {
background-image: url("../img/backgrounds/home-background-02%40lg2x.html");
}
}
.retina-support .owl-hs-slide-03 {
background-image: url("../img/backgrounds/home-background-03.html");
}
@media only screen and (min-device-width: 320px) {
.retina-support .owl-hs-slide-03 {
background-image: url("../img/backgrounds/home-background-03.html");
}
}
@media only screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2.4), (min--moz-device-pixel-ratio: 2.4), (-webkit-min-device-pixel-ratio: 2.4), (min-resolution: 2.4dppx) {
.retina-support .owl-hs-slide-03 {
background-image: url("../img/backgrounds/home-background-03%402x.html");
}
}
@media only screen and (min-device-width: 1200px) {
.retina-support .owl-hs-slide-03 {
background-image: url("../img/backgrounds/home-background-03%40lg.html");
}
}
@media only screen and (min-device-width: 1200px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
.retina-support .owl-hs-slide-03 {
background-image: url("../img/backgrounds/home-background-03%40lg2x.html");
}
}
/* 
Home section SlideShow Backgrounds
-------------------------
*/
.bg-slide-1 {
opacity: 1;
background: url(../img/backgrounds/home-background-01.html) no-repeat center center;
background-size: cover;
}
.bg-slide-2 {
-webkit-animation-delay: 8s;
animation-delay: 8s;
background: url(../img/backgrounds/home-background-02.html) no-repeat center center;
background-size: cover;
}
.bg-slide-3 {
-webkit-animation-delay: 16s;
animation-delay: 16s;
background: url(../img/backgrounds/home-background-03.html) no-repeat center center;
background-size: cover;
}
.retina-support .bg-slide-1 {
background-image: url("../img/backgrounds/home-background-01.html");
}
@media only screen and (min-device-width: 320px) {
.retina-support .bg-slide-1 {
background-image: url("../img/backgrounds/home-background-01.html");
}
}
@media only screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2.4), (min--moz-device-pixel-ratio: 2.4), (-webkit-min-device-pixel-ratio: 2.4), (min-resolution: 2.4dppx) {
.retina-support .bg-slide-1 {
background-image: url("../img/backgrounds/home-background-01%402x.html");
}
}
@media only screen and (min-device-width: 1200px) {
.retina-support .bg-slide-1 {
background-image: url("../img/backgrounds/home-background-01%40lg.html");
}
}
@media only screen and (min-device-width: 1200px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
.retina-support .bg-slide-1 {
background-image: url("../img/backgrounds/home-background-01%40lg2x.html");
}
}
.retina-support .bg-slide-2 {
background-image: url("../img/backgrounds/home-background-02.html");
}
@media only screen and (min-device-width: 320px) {
.retina-support .bg-slide-2 {
background-image: url("../img/backgrounds/home-background-02.html");
}
}
@media only screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2.4), (min--moz-device-pixel-ratio: 2.4), (-webkit-min-device-pixel-ratio: 2.4), (min-resolution: 2.4dppx) {
.retina-support .bg-slide-2 {
background-image: url("../img/backgrounds/home-background-02%402x.html");
}
}
@media only screen and (min-device-width: 1200px) {
.retina-support .bg-slide-2 {
background-image: url("../img/backgrounds/home-background-02%40lg.html");
}
}
@media only screen and (min-device-width: 1200px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
.retina-support .bg-slide-2 {
background-image: url("../img/backgrounds/home-background-02%40lg2x.html");
}
}
.retina-support .bg-slide-3 {
background-image: url("../img/backgrounds/home-background-03.html");
}
@media only screen and (min-device-width: 320px) {
.retina-support .bg-slide-3 {
background-image: url("../img/backgrounds/home-background-03.html");
}
}
@media only screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2.4), (min--moz-device-pixel-ratio: 2.4), (-webkit-min-device-pixel-ratio: 2.4), (min-resolution: 2.4dppx) {
.retina-support .bg-slide-3 {
background-image: url("../img/backgrounds/home-background-03%402x.html");
}
}
@media only screen and (min-device-width: 1200px) {
.retina-support .bg-slide-3 {
background-image: url("../img/backgrounds/home-background-03%40lg.html");
}
}
@media only screen and (min-device-width: 1200px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
.retina-support .bg-slide-3 {
background-image: url("../img/backgrounds/home-background-03%40lg2x.html");
}
}
/*=============================
=  About Section              =
=============================*/
.about-section-img {
margin: 10px auto;
}
.skillbars {
margin-top: 11px;
}
.skill-bars {
padding-bottom: 400px;
}
.about-quote {
font-family: 'Krub', sans-serif;
font-size: 20px;
margin-bottom: 20px;
margin-top: 0;
padding: 10px 0 0 0;
font-weight: 300;
line-height: 1.2;background: #fff;
}
.about-quote p {
margin-bottom: 16px;
}
.about-quote footer {
font-size: 14px;
}
.about-section-tips {
padding-top: 40px;
}
.about-section-tips:hover .about-section-item-icon {
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
.about-item-title {
font-weight: 300;
}
.about-section-item {
position: relative;
overflow: visible;
}
.about-section-item:nth-child(2) .about-section-item-text {
margin-left: -50%;
}
.about-section-item:nth-child(3) .about-section-item-text {
margin-left: -165%;
}
.about-section-item:nth-child(4) .about-section-item-text {
margin-left: -278%;
}
.about-section-item:hover {
z-index: 4;
}
.about-section-item:hover .about-section-item-text {
opacity: 1;
}
.about-section-item-icon {
-webkit-transform: translateY(45px);
-ms-transform: translateY(45px);
transform: translateY(45px);
cursor: pointer;
-webkit-transition: -webkit-transform 0.37s ease-in-out;
transition: transform 0.37s ease-in-out;
}
.about-section-item-icon:hover {
color: #35e9f1;
}
.about-section-item-icon i {
font-size: 42px;
}
.about-section-item-text {
margin-left: 60%;
width: 320%;
padding-top: 40px;
opacity: 0;
-webkit-transition: opacity .27s;
transition: opacity .27s;
}
.about-section-btn .btn-default {
border: 1px solid #0c0c17;
}
.dropshadow:after {
content: '';
position: absolute;
z-index: -1;
bottom: -3px;
width: 94%;
left: 50%;
margin-left: -47%;
height: 30px;
box-shadow: 0 16px 30px -5px #000000;
-webkit-transform: perspective(800px) rotateY(0deg) rotateX(45deg);
-ms-transform: perspective(800px) rotateY(0deg) rotateX(45deg);
transform: perspective(800px) rotateY(0deg) rotateX(45deg);
}
/*=============================
= Facts Section               =
=============================*/
.fact-item {
position: relative;
}
.fact-icon {
font-size: 39px;
line-height: 80px;
vertical-align: middle;
}
.fact-number {
font-weight: 300;
font-size: 36px;
line-height: 1;
}
.fact-number p {
margin-bottom: 10px;
}
.fact-number .fa{color:#14b2b5 !important}
.fact-number p::after{content:"+";}
.outsource p::after{content:"%";}
.fact-text {
font-size: 11px;
line-height: 1.5;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 400;
}
.fact-text p {
margin-bottom: 0;
}
/*===================================
= Services Section                  =
===================================*/
.services-section-item {
-webkit-perspective: 300px;
perspective: 300px;
text-align: center;
}
.services-item-title {
margin-bottom: 15px;
margin-top: 15px;
font-weight: 300;
}
.services-section-item-icon {
margin: 0 auto;
font-size: 44px;
}
.services-section-item-text {
font-size: 14px;
}
.services-section-item-text p{
height:60px
}
/*=============================
= Works Section               =
=============================*/
.portfolio-section .section-text {
margin-top: 12px;
}
.portfolio-filters {
text-align: center;
display: inline-block;
margin-bottom: 40px;
}
.portfolio-filters .btn {
margin: 0;
min-width: 250px;
display: inline-block;
}
.portfolio-filters .btn::before,
.portfolio-filters .btn::after {
height: 49%;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.portfolio-filters .btn::before,
.portfolio-filters .btn::after {
height: 50%;
}
}
.portfolio-filters .selected::before {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
.portfolio-filters .selected::after {
-webkit-transform: translate3d(0, 105%, 0);
transform: translate3d(0, 105%, 0);
}
.portfolio-filters .selected > span:not(.ink) {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
.portfolio-container {
margin-right: -4px;
margin-left: 0;
overflow: hidden;
}
.portfolio-container.container {
margin-right: auto;
margin-left: auto;
}
.portfolio-container.no-transition,
.portfolio-item.no-transition {
-webkit-transition-duration: 0s;
transition-duration: 0s;
}
.portfolio-item {
position: relative;
overflow: hidden;
float: left;
margin: 0 auto;
padding: 0;
text-align: center;
margin-right: -1px;
}
.portfolio-item-img {
overflow: hidden;
}
.portfolio-item-img img {
width: 100%;
height: auto;
-webkit-transform: scale(1.07);
-ms-transform: scale(1.07);
transform: scale(1.07);
}
.portfolio-item-img:after {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
right: 0;
opacity: 0;
}
.video-work {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
right: 0;
overflow: hidden;
}
.video-work:after {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
right: 0;
opacity: 0;
z-index: 4;
}
.video-work .video-background {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
right: 0;
-webkit-transform: scale(1.07);
-ms-transform: scale(1.07);
transform: scale(1.07);
}
.gapped {
margin-left: -20px;
margin-right: -26px;
padding-bottom: 20px;
}
.gapped .portfolio-item {
padding: 20px;
margin-right: -2px;
}
.gapped .portfolio-item-img:after,
.gapped .video-work {
margin: 20px;
width: calc(100% - 40px);
height: calc(100% - 40px);
}
.real-gapped {
margin-left: -20px;
margin-right: -20px;
padding-bottom: 20px;
}
.real-gapped .portfolio-item {
padding: 20px;
}
.real-gapped .portfolio-item-img:after,
.real-gapped .video-work {
margin: 20px;
width: calc(100% - 40px);
height: calc(100% - 40px);
}
.portfolio-item-info {
position: absolute;
width: 80%;
overflow: visible;
margin: auto;
top: 50%;
left: 0;
right: 0;
z-index: 5;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.portfolio-item-title {
margin-bottom: 25px;
font-weight: 300;
letter-spacing: 2px;
opacity: 0;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
.portfolio-item-detail {
opacity: 0;
-webkit-transform: translate3d(0, 20px, 0) scale(1.15);
transform: translate3d(0, 20px, 0) scale(1.15);
}
.portfolio-item-detail p {
margin-bottom: 25px;
font-size: 14px;
line-height: 1.2;
letter-spacing: 1px;
}
.portfolio-item-detail a {
font-size: 28px;
display: inline-block;
height: 60px;
width: 80px;
line-height: 60px;
}
.portfolio-item:hover .portfolio-item-img img {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.portfolio-item:hover .portfolio-item-img:after {
opacity: 1;
}
.portfolio-item:hover .video-work:after {
opacity: 1;
}
.portfolio-item:hover .video-background {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.portfolio-item:hover .portfolio-item-title {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.portfolio-item:hover .portfolio-item-detail {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
}
/*=====================================
= Project Order                       =
=====================================*/
.project-order-section {
margin-top: -1px;
}
.project-order-section a {
font-weight: 700;
}
/*=============================
= Team Section                =
=============================*/
.team-carousel {
cursor: col-resize;
}
.team-carousel .owl-grab {
cursor: col-resize;
}
.team-items .owl-item img {
display: inline-block;
width: auto;
height: 380px;
margin: 20px 0;
}
.team-items .owl-dots {
position: static;
margin: 40px auto 0;
}
.team-item {
position: relative;
margin-bottom: 70px;
}
.team-item-img {
text-align: center;
}
.team-item-img img {
display: inline-block;
width: 79%;
height: auto;
margin: 20px auto 20px auto;
}
.team-item-info {
position: absolute;
height: calc(100% + 10px);
width: 100%;
bottom: -10px;
left: 0;
padding: 50px 30px 0 30px;
opacity: 0;
-webkit-transition: opacity 0.27s ease-out;
transition: opacity 0.27s ease-out;
}
.team-item-name {
position: absolute;
width: 100%;
left: 0;
bottom: -50px;
text-align: center;
z-index: 3;
}
.team-item-name h4 {
margin-bottom: 5px;
margin-top: 0;
font-weight: 300;
}
.team-item-name span {
font-size: 19px;
line-height: 1.5;
font-weight: 700;
}
.team-item-text {
text-align: center;
padding-top: 20px;
font-size: 16px;
font-weight: 300;
color: #000;
}
.team-item-text h3 {
padding-bottom: 20px;
font-weight: 300;
}
.team-item-text h3 span {
font-weight: 700;
}
.team-item-social {
padding: 30px 0;
text-align: center;
}
.team-item-social li {
display: inline-block;
margin: 0 10px;
height: 35px;
width: 35px;
line-height: 35px;
font-size: 18px;
border-radius: 50%;
}
/* Hover effects */
.team-item:hover .team-item-info {
opacity: 1;
}
/*===============================
= Process Section               =
===============================*/
.process-section .owl-stage-outer {
overflow: hidden;
}
.process-section p {
font-weight: 300;
}
.process-section .owl-controls {
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translatex(-50%);
-ms-transform: translatex(-50%);
transform: translatex(-50%);
}
@media screen and (max-width: 767px) {
.process-section .owl-controls {
width: 100%;
}
}
.process {
cursor: col-resize;
}
.process .owl-grab {
cursor: col-resize;
}
.owl-stage-outer {
width: 100%;
}
/* Process Lables */
.process-labels {
position: relative;
left: 50%;
width: 80%;
margin: 0;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.process-labels li {
display: inline-block;
position: absolute;
bottom: 0;
}
.process-labels i {
position: absolute;
bottom: 40px;
left: 50%;
padding: 10px;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
font-size: 44px;
}
.process-labels .icon-shade {
max-width: 0;
left: 10px;
padding: 10px 0;
bottom: 0;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
overflow: hidden;
color: #35e9f1;
}
.process-labels span {
bottom: 0;
height: 55px;
overflow: hidden;
line-height: 55px;
opacity: 0;
font-size: 15px;
text-transform: capitalize;
font-weight: 300;
}
.process-labels span:before {
content: attr(data-active);
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
max-width: 0;
overflow: hidden;
text-transform: capitalize;
}
.process-labels .process-label-active span {
opacity: 1;
}
.process-labels .process-label-active span:before {
max-width: 100%;
}
.process-labels .process-label-active .icon-shade {
max-width: 100%;
}
/* Process Line */
.line-process-parent {
position: relative;
left: 50%;
width: 80%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
height: 1px;
background-color: #f5f5fa;
}
.line-process {
position: absolute;
width: 0;
height: 100%;
background: #35e9f1;
z-index: 3;
-webkit-transition: width 0.5s ease-in-out;
transition: width 0.5s ease-in-out;
}
/* Process Dots */
.line-process-mood {
position: absolute;
width: calc(80% - 30px);
top: -56px;
left: calc(10% + 15px);
height: 30px;
z-index: 4;
}
.line-process-mood .owl-dot {
position: absolute;
height: 120px;
width: 90px;
-webkit-transform: translateX(-30px) translateY(-90px);
-ms-transform: translateX(-30px) translateY(-90px);
transform: translateX(-30px) translateY(-90px);
margin: 0 0 0 -12.5px;
}
.line-process-mood .owl-dot:first-child {
margin-left: -12px;
}
.line-process-mood .owl-dot:last-child {
margin-left: -12px;
}
.line-process-mood .owl-dot span {
height: 1px;
width: 25px;
-webkit-transform: translateX(30px) translateY(90px);
-ms-transform: translateX(30px) translateY(90px);
transform: translateX(30px) translateY(90px);
border-radius: 0;
background-color: #cccce6;
}
.line-process-mood .owl-dot span:after {
border-radius: 0;
background-color: #35e9f1;
}
.line-process-mood .owl-dot .process-active-dot:after {
width: 100%;
}
.process-item {
margin: 0 auto;
padding-top: 20px;
font-size: 14px;
}
/*==============================
= Testimonials                 =
==============================*/
.client-testimonials {
position: relative;
overflow: hidden;
}
.quote-icon {
position: relative;
font-size: 44px;
text-align: center;
color: #35e9f1;
padding-bottom: 44px;
}
.client-testimonials-bg {
background-image: url(../img/backgrounds/testimonials-background.html);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
.retina-support .client-testimonials-bg {
background-image: url('../img/backgrounds/testimonials-background.html');
}
@media only screen and (min-device-width: 320px) {
.retina-support .client-testimonials-bg {
background-image: url('../img/backgrounds/testimonials-background.html');
}
}
@media only screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2.4), (min--moz-device-pixel-ratio: 2.4), (-webkit-min-device-pixel-ratio: 2.4), (min-resolution: 2.4dppx) {
.retina-support .client-testimonials-bg {
background-image: url("../img/backgrounds/testimonials-background%402x.html");
}
}
@media only screen and (min-device-width: 1200px) {
.retina-support .client-testimonials-bg {
background-image: url("../img/backgrounds/testimonials-background%40lg.html");
}
}
@media only screen and (min-device-width: 1200px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
.retina-support .client-testimonials-bg {
background-image: url("../img/backgrounds/testimonials-background%40lg2x.html");
}
}
.testimonials .animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
.testimonials .owl-item {
margin-bottom: 10px;
text-align: center;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.testimonials .owl-item .testimo-img {
width: 60px;
height: 60px;
margin: 10px auto;
border-radius: 50%;
}
.testimonials .owl-item .testimo-logo {
height: 30px;
width: auto;
margin: 20px auto;
}
.testimonials .owl-dots {
width: 100%;
margin: 50px auto 0;
text-align: center;
}
.testimo-item {
margin: 0 auto;
}
.testimo-item blockquote {
font-weight: 300;
margin: 0;
padding: 0;
}
.testimo-item blockquote p {
margin-bottom: 30px;
font-family: 'Krub', sans-serif;
font-size: 22px;
font-weight: 300;
line-height: 1.5;
}
.testimo-item blockquote footer {
font-family: 'Krub', sans-serif;
}
.testimo-img {
height: 50px;
width: 50px;
border-radius: 50%;
}
.client-image {
width: 80px;
height: 80px;
margin: 0 auto;
overflow: hidden;
margin-bottom: 50px;
border-radius: 50%;
}
.client-image img {
height: 100%;
width: auto;
border-radius: 50%;
}
.client-logos .container {
padding-right: 25px;
padding-left: 25px;
}
.client-logos i {
display: block;
text-align: center;
font-size: 60px;
}
#client-logos img{border-radius:6px; -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);}
#client-logos img:hover{-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
filter: grayscale(0%);}

/*==============================
= Prices Section               =
==============================*/
.pricing-table {
position: relative;
border: 1px solid #f5f5fa;
}
.pricing-header {
position: relative;
z-index: 1;
height: 80px;
padding: 14px;
pointer-events: none;
background-color: #757a86;
}
.pricing-header h3 {
margin-top: 0;
}
.currency,
.value {
font-size: 3rem;
font-weight: 300;
}
.duration {
font-weight: 600;
font-size: 1.3rem;
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
}
.duration::before {
content: '/';
margin-right: 2px;
}
.pricing-body {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.pricing-features {
width: 700px;
margin-bottom: 0;
list-style: none;
}
.pricing-features:after {
content: "";
display: table;
clear: both;
}
.pricing-features li {
width: 100px;
float: left;
padding: 1.6em 14px;
font-size: 1.4rem;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pricing-features em {
display: block;
margin-bottom: 5px;
font-weight: 600;
}
.pricing-footer {
position: absolute;
z-index: 1;
top: 0;
left: 0;
/* on mobile it covers the .pricing-header */
height: 80px;
width: 100%;
}
.pricing-footer::after {
/* right arrow visible on mobile */
content: '';
position: absolute;
right: 14px;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
height: 20px;
width: 20px;
}
.select {
position: relative;
z-index: 1;
display: block;
height: 100%;
/* hide button text on mobile */
overflow: hidden;
white-space: nowrap;
color: transparent;
}
.select .icon {
position: absolute;
right: 0;
height: 80px;
margin-right: 5px;
line-height: 80px;
font-size: 30px;
text-align: right;
}
@media only screen and (min-width: 768px) {
.pricing-header {
height: auto;
padding: 1.9em 0.9em 1.6em;
pointer-events: auto;
text-align: center;
}
.value {
font-size: 5rem;
font-weight: 300;
line-height: 1;
}
.currency {
display: inline-block;
margin-top: 10px;
vertical-align: top;
font-size: 2rem;
font-weight: 700;
}
.duration {
font-size: 1.4rem;
}
.pricing-body {
overflow-x: visible;
}
.pricing-features {
width: auto;
padding: 0;
margin-bottom: 30px;
}
.pricing-features li {
float: none;
width: auto;
padding: 8px;
}
.pricing-features em {
display: inline-block;
margin-bottom: 0;
font-style: normal;
}
.pricing-footer {
position: relative;
height: auto;
padding: 0;
text-align: center;
}
.pricing-footer::after {
display: none;
}
.pricing-footer .btn {
margin-left: 0;
width: 100%;
max-width: 100%;
}
}
/*==============================
= Blog Section               =
==============================*/
.blog-post-preview-link {
display: block;
}
.blog-post-preview-img {
position: relative;
height: 180px;
overflow: hidden;
margin-bottom: 20px;
}
.blog-post-preview-img img {
width: 100%;
height: auto;
}
.blog-post-preview-date {
margin-bottom: 8px;
margin-top: 3px;
padding-left: 3px;
font-size: 9px;
line-height: 1.5;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 400;
color: #757a86;
}
.blog-post-preview-title {
margin-top: 0;
margin-bottom: 4px;
-webkit-transition: color .25s;
transition: color .25s;
color: #171724;
font-weight: 300;
}
.blog-post-preview-title span {
font-weight: 700;
}
.blog-post-preview-text {
margin-top: 13px;
font-weight: 300;
}
.blog-post-preview-text p {
margin-bottom: 0;
}
/*=======================================
= Contact Section                       =
=======================================*/
.contact-item {
text-align: center;
}
.contact-item p {
margin-top: 25px;
margin-bottom: 0;
font-size: 13px;
}
.contact-item i {
font-size: 28px;
}
.input {
position: relative;
display: inline-block;
vertical-align: top;
z-index: 1;
}
.input-field {
position: relative;
display: block;
padding: 8px 20px;
line-height: 1.5;
width: 100%;
border: 1px solid transparent;
border-radius: 0;
background: transparent;
-webkit-transition: border-color 0.25s;
transition: border-color 0.25s;
-webkit-appearance: none;
/* for box shadows to show on iOS */
}
.textarea-label {
display: block;
}
.textarea {
height: 8em;
}
.input-label,
.textarea-label {
display: inline-block;
width: 100%;
margin-bottom: 2px;
padding: 0 14px;
overflow: hidden;
text-align: left;
font-weight: normal;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
}
.input-label {
position: absolute;
bottom: 100%;
margin-bottom: 0;
-webkit-transform: translate3d(0, 3em, 0);
transform: translate3d(0, 3em, 0);
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
z-index: 3;
cursor: text;
}
.input-label-content {
position: relative;
display: block;
margin-bottom: 12px;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
}
.input-label-content::after {
content: attr(data-content);
position: absolute;
bottom: 100%;
left: 0;
height: 110%;
width: 100%;
}
.input-field:focus + .input-label,
.input--filled .input-label {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.input-field:focus + .input-label .input-label-content,
.input--filled .input-label-content {
-webkit-transform: translate3d(0, 140%, 0);
transform: translate3d(0, 140%, 0);
}
.input-field:focus + .input-field,
.input--filled .input-field {
background-color: transparent;
border-color: rgba(0, 0, 0, 0.5);
}
.btn-contact {
overflow: hidden;
}
.btn-contact::before,
.btn-contact::after {
content: attr(data-text);
position: absolute;
width: 100%;
height: 50%;
left: 0;
overflow: hidden;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
background: #ffffff;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.btn-contact::before {
top: 0;
padding-top: 8px;
}
.btn-contact::after {
bottom: 0;
line-height: 0;
}
.btn-contact > span:not(.ink) {
display: block;
-webkit-transform: scale3d(0.2, 0.2, 1);
transform: scale3d(0.2, 0.2, 1);
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.btn-contact .btn-icon {
position: relative;
height: 16px;
}
.btn-contact .loader-parent {
position: absolute;
margin: 0;
font-size: 28px;
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.btn-contact .loader3 {
-webkit-animation: none;
animation: none;
height: 20px;
width: 20px;
}
.btn-contact.btn-loading::before {
-webkit-transform: translate3d(0, -105%, 0);
transform: translate3d(0, -105%, 0);
}
.btn-contact.btn-loading::after {
-webkit-transform: translate3d(0, 105%, 0);
transform: translate3d(0, 105%, 0);
}
.btn-contact.btn-loading > span:not(.ink) {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
.btn-contact.btn-loading .loader3 {
-webkit-animation: load2 .5s infinite linear;
animation: load2 .5s infinite linear;
}
.form-message {
padding: 0;
line-height: 36px;
text-align: center;
}
/*==================================
= Google Map                       =
==================================*/
.map-section {
height: 100px;
overflow: hidden;
position: relative;
-webkit-transition: height 0.2s ease-out;
transition: height 0.2s ease-out;
}
.map-mask {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
cursor: pointer;
z-index: 4;
}
.map-mask .row {
position: relative;
}
.map-mask .row > div {
position: relative;
top: 50%;
}
.map-opener {
position: absolute;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -200px;
width: 400px;
height: 50px;
overflow: hidden;
line-height: 50px;
text-align: center;
font-weight: 400;
}
.map-opener div {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
}
.map-opener div:first-child {
opacity: 1;
}
.map-opener div:nth-child(2) {
margin-top: -50px;
opacity: 0;
}
.map-opener i {
font-size: 28px;
vertical-align: middle;
}
.map-opener i:before {
display: inline;
}
.map-opened {
height: 450px;
}
.map-opened .map-mask {
height: 100px;
}
.map-opened .map-opener div:first-child {
opacity: 0;
}
.map-opened .map-opener div:nth-child(2) {
opacity: 1;
}
#google-map {
position: relative;
}
#map-canvas {
position: relative;
height: 450px;
cursor: -webkit-grab;
cursor: grab;
}
#map-zoom-in,
#map-zoom-out {
height: 32px;
width: 32px;
cursor: pointer;
margin-left: 10px;
background-repeat: no-repeat;
background-size: 32px 64px;
background-position: 1px 1px;
background-image: url("../img/google-map-assets/map-icon-controller.svg");
}
#map-zoom-in {
background-position: 50% 0;
margin-top: 120px;
margin-bottom: 1px;
}
#map-zoom-out {
background-position: 50% -32px;
}
.gmap-popup {
max-width: 204px;
min-height: 150px;
}
/*======================================
= Footer Section                       =
======================================*/
#logo-svg {
height: 70px;
width: 100%;
}
.footer-section {
overflow-x: hidden;
}
.footer-logo {
width: 320px;
margin: 0 auto;
}
.footer-logo p {
font-size: 17px;
text-align: center;
text-transform: uppercase;
letter-spacing: .4em;
padding-left: 16px;
padding-top: 14px;
}
.footer-social {
padding: 51px 0;
margin: 0 auto;
text-align: center;
padding-bottom: 100px;
}
.footer-social a {
margin: 0 10px;
height: 35px;
width: 35px;
border-radius: 50%;
line-height: 37px;
font-size: 16px;
}
/* 
Go Top Button
-------------------------
*/
.go-top {
position: relative;
overflow: visible;
}
.go-top div {
position: absolute;
}
.circle1,
.circle2 {
height: 80px;
width: 80px;
border-radius: 50%;
left: 50%;
bottom: 0;
z-index: 3;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.circle1 {
margin-left: -90.42857143px;
-webkit-transform: translateX(60px);
-ms-transform: translateX(60px);
transform: translateX(60px);
}
.circle1:after {
content: "";
position: absolute;
height: 40px;
width: 240px;
right: 40px;
bottom: 0;
}
.circle2 {
margin-left: 11.42857143px;
-webkit-transform: translateX(-60px);
-ms-transform: translateX(-60px);
transform: translateX(-60px);
}
.circle2:after {
content: "";
position: absolute;
height: 40px;
width: 240px;
left: 40px;
bottom: 0;
}
.square {
position: absolute;
height: 80px;
width: 80px;
left: 50%;
bottom: -61.6px;
margin-left: -40px;
border-radius: 20%;
-webkit-transform: rotate(45deg) translateY(40px) translateX(40px);
-ms-transform: rotate(45deg) translateY(40px) translateX(40px);
transform: rotate(45deg) translateY(40px) translateX(40px);
z-index: 2;
}
.square span {
position: absolute;
height: 13.33333333px;
width: 13.33333333px;
left: 13.33333333px;
top: 13.33333333px;
border-top-left-radius: 0;
}
.rectangle {
height: 40px;
width: 240px;
left: 50%;
bottom: -30px;
margin-left: -120px;
-webkit-transform: translateY(16px);
-ms-transform: translateY(16px);
transform: translateY(16px);
}
.go-top-out .square {
position: absolute;
cursor: pointer;
-webkit-transform: rotate(45deg) translateY(0) translateX(0);
-ms-transform: rotate(45deg) translateY(0) translateX(0);
transform: rotate(45deg) translateY(0) translateX(0);
}
.go-top-out .rectangle {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.go-top-out .circle1 {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.go-top-out .circle2 {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.footer-bottom {
position: relative;
z-index: 5;
padding: 60px;
text-align: center;
font-weight: 400;
}
.footer-bottom-text {
display: inline-block;
padding-bottom: 6px;
text-transform: uppercase;
font-size: 11px;
letter-spacing: .23em;
margin-right: -0.23em;
padding: 14px 0;
}
.footer-made {
display: inline-block;
font-size: 10px;
}
/*

===============================================
===============================================
===========(( Blog Pages Styles  ))============
===============================================
===============================================

*/
.page-header {
position: relative;
padding-bottom: 0;
margin: 0;
border-bottom: 0;
height: 400px;
width: 100%;
background-position: 50% 100%;
background-size: cover;
background-attachment: fixed;
}
.page-header .table {
height: 100%;
}
.page-header .page-header-title-middle {
margin: 0;
text-align: center;
}
.page-header .page-header-title-left {
margin: 0;
text-align: center;
}
.page-header .page-header-title-left span {
font-weight: 700;
}
.page-header .breadcrumb {
margin-bottom: 0;
padding: 0;
line-height: 100px;
text-align: center;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 400;
}
.blog-page-title {
margin-bottom: 30px;
padding-bottom: 10px;
}
/* Blog Item */
.sidebarfixed {
position: fixed!important;
top: 0;
}
.blog-item {
position: relative;
margin-bottom: 60px;
border: 1px solid #f5f5fa;
border-bottom: 0;
}
.blog-media {
overflow: hidden;
height: 200px;
display: block;
position: relative;
opacity: 1;
-webkit-transition: opacity 0.27s ease-out;
transition: opacity 0.27s ease-out;
}
.blog-media:hover {
opacity: .85;
}
.blog-media .carousel {
max-height: 400px;
}
.blog-media .blog-item-slider {
max-height: 600px;
}
.blog-page-media {
position: relative;
max-height: 600px;
overflow: hidden;
}
.parallax-img {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.blog-media img,
.blog-media .video,
.blog-media .carousel {
padding: 0;
}
.blog-item-q {
background: #f5f5fa;
margin: 1em 0;
padding: 20px 15px;
}
.blog-item-detail {
position: relative;
box-shadow: 0 8px 3px -9px #706f83;
padding: 10px 0;
margin: 0 10px;
text-transform: capitalize;
font-weight: 300;
font-size: 13px;
}
.blog-item-detail a {
padding-right: 15px;
}
.blog-item-detail i {
padding-right: 5px;
}
.blog-item-detail .no-padding-right {
padding-right: 0;
}
.btn-blog-more {
text-transform: uppercase;
letter-spacing: 0;
font-size: 11px;
padding-right: 0;
letter-spacing: 2px;
margin-right: -22px;
}
.btn-blog-more .btn-icon {
font-size: 18px;
vertical-align: middle;
line-height: 0;
padding-left: 10px;
padding-right: 0;
opacity: 0;
-webkit-transform: translateX(10px);
-ms-transform: translateX(10px);
transform: translateX(10px);
-webkit-transition: -webkit-transform 0.2s ease-out, opacity 0.2s ease-out;
transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}
.btn-blog-more:hover .btn-icon {
opacity: 1;
padding-left: 10px;
-webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
}
.blog-item-title-wrapper {
padding-top: 40px;
margin: 0 10px;
}
.blog-item-title h1 {
margin-top: 0;
font-weight: 300;
}
.blog-item-title span {
font-weight: 700;
}
.post-date {
margin: 15px 0;
text-transform: uppercase;
font-size: 11px;
letter-spacing: 2px;
font-weight: 300 !important;
}
.blog-item-body {
font-size: 16px;
font-weight: 300;
line-height: 1.8;
}
.blog-item-body blockquote {
padding-left: 40px;
}
.blog-page-post-title {
font-weight: 300;
margin: 30px 0 0 0;
}
.blog-page-post-title span {
font-weight: 700;
}
.blog-post {
margin-bottom: 80px;
}
.blog-post .blog-item-body {
margin: 30px 0;
}
.blog-post .blog-item-detail {
padding: 15px 0;
}
.article-nav {
text-align: center;
margin: 30px 0;
border-top: 1px solid #ebebf5;
border-bottom: 1px solid #ebebf5;
}
.article-nav-link {
display: inline-block;
padding: 30px 0;
font-size: 18px;
text-transform: capitalize;
}
.article-nav-link p {
display: inline-block;
margin: 0;
}
.article-nav-link span {
font-weight: 700;
}
.article-nav-link i {
font-size: 32px;
}
.widget {
margin-bottom: 60px;
}
.widget-title {
margin-bottom: 15px;
margin-top: 0;
padding: 10px;
background-color: #f5f5fa;
font-weight: 300;
letter-spacing: .05em;
}
.widget-body {
font-size: 13px;
padding: 10px;
}
.widget-body .post-date {
margin: 0;
}
.widget-body a {
text-transform: capitalize;
color: #171724;
font-size: 1.1em;
font-weight: 300;
}
.widget-text {
line-height: 1.7;
}
.search-wrap {
position: relative;
}
.search-button {
position: absolute;
top: 50%;
right: 1px;
overflow: hidden;
width: 42px;
height: 40px;
line-height: 38px;
margin-top: -20px;
border: none;
outline: none;
font-size: 14px;
cursor: pointer;
z-index: 2;
}
/* Recent Posts */
.widget-posts-recent ul li {
position: relative;
margin: 0;
padding: 8px 0;
line-height: 1.5em;
}
.widget-posts-recent ul li span {
display: block;
padding-top: 3px;
opacity: 0.85;
}
.widget-posts-recent ul i {
position: absolute;
top: 9px;
left: -4px;
font-size: 20px;
opacity: 0.85;
}
.widget-posts-img {
float: left;
margin: 0 7px 0 0;
width: 70px;
height: auto;
}
.widget-posts-descr {
overflow: hidden;
text-transform: capitalize;
}
.widget-categories {
font-size: 13px;
}
.widget-categories li {
line-height: 1.5em;
padding: 8px 0;
position: relative;
}
.widget-categories li a {
padding-bottom: 2px;
border-bottom: 1px solid transparent;
}
.widget-categories li small {
font-size: 10px;
color: #757a86;
}
.widget-categories li i {
position: absolute;
top: 9px;
left: -4px;
font-size: 20px;
opacity: 0.5;
}
.tags a {
display: inline-block;
margin: 0 2px 5px 0;
padding: 5px 7px;
border: 1px solid #b8b7cb;
font-size: 10px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 1px;
}
.default-tabs > li > a {
border-radius: 0;
font-size: 14px;
font-weight: 400;
text-transform: capitalize;
letter-spacing: .05em;
}
.default-tabs-cont {
padding: 30px 0 0;
line-height: 1.8;
}
/* Comments */
.widget-comments li {
padding: 8px 0;
border-bottom: 1px solid #f5f5fa;
}
/* Comments */
.blog-comment-section {
margin: 80px 0;
}
.blog-comment-section .form-message {
margin: 0 auto;
}
li.comment-item {
padding: 30px 0;
border-bottom: 1px solid #ebebf5;
margin-bottom: 5px;
}
.comment-item {
padding: 30px 0 0 0;
font-size: 14px;
overflow: hidden;
}
.comment-item:first-child {
padding-top: 0;
}
.comment-item p {
margin-bottom: 10px;
}
.comment-item a {
opacity: 1;
-webkit-transition: opacity 0.27s ease-out;
transition: opacity 0.27s ease-out;
}
.comment-item a:hover {
opacity: .8;
}
.comment-item i {
padding-top: 9px;
}
.comment-item-data {
margin: 0 0 10px;
text-transform: capitalize;
font-size: 13px;
}
.comment-author {
display: inline-block;
margin-right: 20px;
font-weight: 700;
}
.comment-avatar {
height: 50px;
width: 50px;
margin-right: 10px;
font-size: 50px;
line-height: 50px;
border-radius: 50%;
overflow: hidden;
text-align: center;
}
.comment-reply {
color: #757a86;
font-size: 13px;
}
/* Pagination */
.pagination {
font-size: 13px;
}
.pagination a {
display: inline-block;
min-width: 30px;
margin: 2px;
padding: 7px 15px;
border: 1px solid #b8b7cb;
font-size: 13px;
font-weight: 400;
text-align: center;
vertical-align: middle;
text-transform: uppercase;
}
.pagination a.active,
.pagination a.active:hover {
cursor: default;
}
.pagination a i {
vertical-align: middle;
}
.pagination .fa,
.pagination .icon {
line-height: 21px;
font-size: 18px;
}
/*

===============================================
===============================================
===========(( Works Pages Styles  ))===========
===============================================
===============================================

*/
.project-header {
position: relative;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 50%;
}
.portfolio-nav {
position: relative;
border-top: 1px solid #e4e4f2;
border-bottom: 1px solid #e4e4f2;
}
.portfolio-nav a {
display: inline-block;
height: 60px;
line-height: 60px;
color: #0c0c17;
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
text-align: center;
}
.portfolio-nav a:hover {
background: #f5f5fa;
}
.portfolio-nav a i {
display: inline-block;
font-size: 24px;
line-height: 60px;
height: 60px;
vertical-align: bottom;
}
.all-works {
border-left: 1px solid #e4e4f2;
border-right: 1px solid #e4e4f2;
}
.all-works i {
display: none !important;
}
.work-category-title {
border-bottom: 1px solid #e4e4f2;
}
.category-item {
padding: 10px 0;
border-bottom: 1px solid #e4e4f2;
}
.middle-poster {
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: fixed;
}
.middle-poster .table {
height: 100%;
}
.related-projests li {
padding: 30px;
}
.related-projests .video-work {
width: calc(100% - 60px);
height: calc(100% - 60px);
top: 30px;
right: 30px;
}
/*
========================================
Blog and Work pages background images
========================================
*/
.blog-background {
background-image: url(../img/blog/blog-background.html);
}
.blog-post01-bg {
background-image: url(../img/blog/blog-post01-bg.html);
}
.blog-post02-bg {
background-image: url(../img/blog/blog-post02-bg.html);
}
.work01-bg {
background-image: url(../img/portfolio/work01_lg.jpg);
}
.work02-bg {
background-image: url(../img/portfolio/work02_lg.jpg);
}
.work03-bg {
background-image: url(../img/portfolio/work03_lg.jpg);
}
.work04-bg {
background-image: url(../img/portfolio/work04_lg.jpg);
}
.work05-bg {
background-image: url(../img/portfolio/work05_lg.jpg);
}
.work06-bg {
background-image: url(../img/portfolio/work06_lg.jpg);
}
.work-preview02 {
background-image: url(../img/portfolio/work-preview02.jpg);
}
.work-preview03 {
background-image: url(../img/portfolio/work-preview03.html);
}
.retina-support .blog-background {
background-image: url("../img/blog/blog-background.html");
}
@media only screen and (min-device-width: 320px) {
.retina-support .blog-background {
background-image: url("../img/blog/blog-background.html");
}
}
@media only screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2.4), (min--moz-device-pixel-ratio: 2.4), (-webkit-min-device-pixel-ratio: 2.4), (min-resolution: 2.4dppx) {
.retina-support .blog-background {
background-image: url("../img/blog/blog-background%402x.html");
}
}
@media only screen and (min-device-width: 1200px) {
.retina-support .blog-background {
background-image: url("../img/blog/blog-background%40lg.html");
}
}
@media only screen and (min-device-width: 1200px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
.retina-support .blog-background {
background-image: url("../img/blog/blog-background%40lg2x.html");
}
}
.retina-support .blog-post01-bg {
background-image: url("../img/blog/blog-post01-bg.html");
}
@media only screen and (min-device-width: 320px) {
.retina-support .blog-post01-bg {
background-image: url("../img/blog/blog-post01-bg.html");
}
}
@media only screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2.4), (min--moz-device-pixel-ratio: 2.4), (-webkit-min-device-pixel-ratio: 2.4), (min-resolution: 2.4dppx) {
.retina-support .blog-post01-bg {
background-image: url("../img/blog/blog-post01-bg%402x.html");
}
}
@media only screen and (min-device-width: 1200px) {
.retina-support .blog-post01-bg {
background-image: url("../img/blog/blog-post01-bg%40lg.html");
}
}
@media only screen and (min-device-width: 1200px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
.retina-support .blog-post01-bg {
background-image: url("../img/blog/blog-post01-bg%40lg2x.html");
}
}
.retina-support .blog-post02-bg {
background-image: url("../img/blog/blog-post02-bg.html");
}
@media only screen and (min-device-width: 320px) {
.retina-support .blog-post02-bg {
background-image: url("../img/blog/blog-post02-bg.html");
}
}
@media only screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2.4), (min--moz-device-pixel-ratio: 2.4), (-webkit-min-device-pixel-ratio: 2.4), (min-resolution: 2.4dppx) {
.retina-support .blog-post02-bg {
background-image: url("../img/blog/blog-post02-bg%402x.html");
}
}
@media only screen and (min-device-width: 1200px) {
.retina-support .blog-post02-bg {
background-image: url("../img/blog/blog-post02-bg%40lg.html");
}
}
@media only screen and (min-device-width: 1200px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
.retina-support .blog-post02-bg {
background-image: url("../img/blog/blog-post02-bg%40lg2x.html");
}
}
.retina-support .work01-bg {
background-image: url("../img/portfolio/work01_lg.jpg");
}
@media only screen and (min-device-width: 320px) {
.retina-support .work01-bg {
background-image: url("../img/portfolio/work01_lg.jpg");
}
}
@media only screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2.4), (min--moz-device-pixel-ratio: 2.4), (-webkit-min-device-pixel-ratio: 2.4), (min-resolution: 2.4dppx) {
.retina-support .work01-bg {
background-image: url("../img/portfolio/work01_lg%402x.html");
}
}
@media only screen and (min-device-width: 1200px) {
.retina-support .work01-bg {
background-image: url("../img/portfolio/work01_lg%40lg.html");
}
}
@media only screen and (min-device-width: 1200px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
.retina-support .work01-bg {
background-image: url("../img/portfolio/work01_lg%40lg2x.html");
}
}
.retina-support .work02-bg {
background-image: url("../img/portfolio/work02_lg.jpg");
}
@media only screen and (min-device-width: 320px) {
.retina-support .work02-bg {
background-image: url("../img/portfolio/work02_lg.jpg");
}
}
@media only screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2.4), (min--moz-device-pixel-ratio: 2.4), (-webkit-min-device-pixel-ratio: 2.4), (min-resolution: 2.4dppx) {
.retina-support .work02-bg {
background-image: url("../img/portfolio/work02_lg%402x.html");
}
}
@media only screen and (min-device-width: 1200px) {
.retina-support .work02-bg {
background-image: url("../img/portfolio/work02_lg%40lg.html");
}
}
@media only screen and (min-device-width: 1200px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
.retina-support .work02-bg {
background-image: url("../img/portfolio/work02_lg%40lg2x.html");
}
}
.retina-support .work03-bg {
background-image: url("../img/portfolio/work03_lg.jpg");
}
@media only screen and (min-device-width: 320px) {
.retina-support .work03-bg {
background-image: url("../img/portfolio/work03_lg.jpg");
}
}
@media only screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2.4), (min--moz-device-pixel-ratio: 2.4), (-webkit-min-device-pixel-ratio: 2.4), (min-resolution: 2.4dppx) {
.retina-support .work03-bg {
background-image: url("../img/portfolio/work03_lg%402x.html");
}
}
@media only screen and (min-device-width: 1200px) {
.retina-support .work03-bg {
background-image: url("../img/portfolio/work03_lg%40lg.html");
}
}
@media only screen and (min-device-width: 1200px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
.retina-support .work03-bg {
background-image: url("../img/portfolio/work03_lg%40lg2x.html");
}
}
.retina-support .work04-bg {
background-image: url("../img/portfolio/work04_lg.jpg");
}
@media only screen and (min-device-width: 320px) {
.retina-support .work04-bg {
background-image: url("../img/portfolio/work04_lg.jpg");
}
}
@media only screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2.4), (min--moz-device-pixel-ratio: 2.4), (-webkit-min-device-pixel-ratio: 2.4), (min-resolution: 2.4dppx) {
.retina-support .work04-bg {
background-image: url("../img/portfolio/work04_lg%402x.html");
}
}
@media only screen and (min-device-width: 1200px) {
.retina-support .work04-bg {
background-image: url("../img/portfolio/work04_lg%40lg.html");
}
}
@media only screen and (min-device-width: 1200px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
.retina-support .work04-bg {
background-image: url("../img/portfolio/work04_lg%40lg2x.html");
}
}
.retina-support .work05-bg {
background-image: url("../img/portfolio/work05_lg.jpg");
}
@media only screen and (min-device-width: 320px) {
.retina-support .work05-bg {
background-image: url("../img/portfolio/work05_lg.jpg");
}
}
@media only screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2.4), (min--moz-device-pixel-ratio: 2.4), (-webkit-min-device-pixel-ratio: 2.4), (min-resolution: 2.4dppx) {
.retina-support .work05-bg {
background-image: url("../img/portfolio/work05_lg%402x.html");
}
}
@media only screen and (min-device-width: 1200px) {
.retina-support .work05-bg {
background-image: url("../img/portfolio/work05_lg%40lg.html");
}
}
@media only screen and (min-device-width: 1200px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
.retina-support .work05-bg {
background-image: url("../img/portfolio/work05_lg%40lg2x.html");
}
}
.retina-support .work06-bg {
background-image: url("../img/portfolio/work06_lg.jpg");
}
@media only screen and (min-device-width: 320px) {
.retina-support .work06-bg {
background-image: url("../img/portfolio/work06_lg.jpg");
}
}
@media only screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2.4), (min--moz-device-pixel-ratio: 2.4), (-webkit-min-device-pixel-ratio: 2.4), (min-resolution: 2.4dppx) {
.retina-support .work06-bg {
background-image: url("../img/portfolio/work06_lg%402x.html");
}
}
@media only screen and (min-device-width: 1200px) {
.retina-support .work06-bg {
background-image: url("../img/portfolio/work06_lg%40lg.html");
}
}
@media only screen and (min-device-width: 1200px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
.retina-support .work06-bg {
background-image: url("../img/portfolio/work06_lg%40lg2x.html");
}
}
/*
========================================
Generic Layout Classes --( set 02 )--
========================================
*/
.position-relative {
position: relative;
}
.position-fixed {
position: fixed;
}
.inline-block {
display: inline-block !important;
}
.table {
display: table;
}
.table-cell {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.full-screen {
height: 100vh;
width: 100%;
/* Foloowing hacks are due to buggy behavior of the "vh" unit in iOS7 */
/* iPad in portrait*/
/* iPad in landscape */
/* iPhone 5 & 5S in portrait */
/* iPhone 5 & 5S in landscape */
/* iPhone 2G-4S in portrait */
/* iPhone 2G-4S in landscape */
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
.full-screen {
height: 1024px;
}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.full-screen {
height: 768px;
}
}
@media only screen and (device-aspect-ratio: 40/71) and (orientation: portrait) {
.full-screen {
height: 568px;
}
}
@media only screen and (device-aspect-ratio: 40/71) and (orientation: landscape) {
.full-screen {
height: 320px;
}
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (device-aspect-ratio: 2/3) and (orientation: portrait) {
.full-screen {
height: 480px;
}
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (device-aspect-ratio: 2/3) and (orientation: landscape) {
.full-screen {
height: 320px;
}
}
.half-height {
height: 78vh !important;
width: 100%;
/* iPad in portrait*/
/* iPad in landscape */
/* iPhone 5 & 5S in portrait */
/* iPhone 5 & 5S in landscape */
/* iPhone 2G-4S in portrait */
/* iPhone 2G-4S in landscape */
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
.half-height {
height: 799px;
}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.half-height {
height: 600px;
}
}
@media only screen and (device-aspect-ratio: 40/71) and (orientation: portrait) {
.half-height {
height: 444px;
}
}
@media only screen and (device-aspect-ratio: 40/71) and (orientation: landscape) {
.half-height {
height: 250px;
}
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (device-aspect-ratio: 2/3) and (orientation: portrait) {
.half-height {
height: 374px;
}
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (device-aspect-ratio: 2/3) and (orientation: landscape) {
.half-height {
height: 250px;
}
}
/*************************************************************/
/*********************** Generic Styles **********************/
/*************************************************************/
.no-margin {
margin: 0;
}
.no-margin-left {
margin-left: 0;
}
.no-margin-top {
margin-top: 0;
}
.no-margin-right {
margin-right: 0;
}
.no-margin-bottom {
margin-bottom: 0;
}
.margin-5 {
margin: 5px;
}
.margin-left-5 {
margin-left: 5px;
}
.margin-top-5 {
margin-top: 5px;
}
.margin-right-5 {
margin-right: 5px;
}
.margin-bottom-5 {
margin-bottom: 5px;
}
.margin-10 {
margin: 10px;
}
.margin-left-10 {
margin-left: 10px;
}
.margin-top-10 {
margin-top: 10px;
}
.margin-right-10 {
margin-right: 10px;
}
.margin-bottom-10 {
margin-bottom: 10px;
}
.margin-15 {
margin: 15px;
}
.margin-left-15 {
margin-left: 15px;
}
.margin-top-15 {
margin-top: 15px;
}
.margin-right-15 {
margin-right: 15px;
}
.margin-bottom-15 {
margin-bottom: 15px;
}
.margin-20 {
margin: 20px;
}
.margin-left-20 {
margin-left: 20px;
}
.margin-top-20 {
margin-top: 20px;
}
.margin-right-20 {
margin-right: 20px;
}
.margin-bottom-20 {
margin-bottom: 20px;
}
.margin-30 {
margin: 30px;
}
.margin-left-30 {
margin-left: 30px;
}
.margin-top-30 {
margin-top: 30px;
}
.margin-right-30 {
margin-right: 30px;
}
.margin-bottom-30 {
margin-bottom: 30px;
}
.margin-40 {
margin: 40px;
}
.margin-left-40 {
margin-left: 40px;
}
.margin-top-40 {
margin-top: 40px;
}
.margin-right-40 {
margin-right: 40px;
}
.margin-bottom-40 {
margin-bottom: 40px;
}
.margin-50 {
margin: 50px;
}
.margin-left-50 {
margin-left: 50px;
}
.margin-top-50 {
margin-top: 50px;
}
.margin-right-50 {
margin-right: 50px;
}
.margin-bottom-50 {
margin-bottom: 50px;
}
.margin-60 {
margin: 60px;
}
.margin-left-60 {
margin-left: 60px;
}
.margin-top-60 {
margin-top: 60px;
}
.margin-right-60 {
margin-right: 60px;
}
.margin-bottom-60 {
margin-bottom: 60px;
}
.margin-70 {
margin: 70px;
}
.margin-left-70 {
margin-left: 70px;
}
.margin-top-70 {
margin-top: 70px;
}
.margin-right-70 {
margin-right: 70px;
}
.margin-bottom-70 {
margin-bottom: 70px;
}
.margin-80 {
margin: 80px;
}
.margin-left-80 {
margin-left: 80px;
}
.margin-top-80 {
margin-top: 80px;
}
.margin-right-80 {
margin-right: 80px;
}
.margin-bottom-80 {
margin-bottom: 80px;
}
.margin-90 {
margin: 90px;
}
.margin-left-90 {
margin-left: 90px;
}
.margin-top-90 {
margin-top: 90px;
}
.margin-right-90 {
margin-right: 90px;
}
.margin-bottom-90 {
margin-bottom: 90px;
}
.margin-100 {
margin: 100px;
}
.margin-left-100 {
margin-left: 100px;
}
.margin-top-100 {
margin-top: 100px;
}
.margin-right-100 {
margin-right: 100px;
}
.margin-bottom-100 {
margin-bottom: 100px;
}
@media (max-width: 767px) {
.no-margin-xs {
margin: 0;
}
.no-margin-xs-left {
margin-left: 0;
}
.no-margin-xs-top {
margin-top: 0;
}
.no-margin-xs-right {
margin-right: 0;
}
.no-margin-xs-bottom {
margin-bottom: 0;
}
.margin-xs-5 {
margin: 5px;
}
.margin-left-xs-5 {
margin-left: 5px;
}
.margin-top-xs-5 {
margin-top: 5px;
}
.margin-right-xs-5 {
margin-right: 5px;
}
.margin-bottom-xs-5 {
margin-bottom: 5px;
}
.margin-xs-10 {
margin: 10px;
}
.margin-left-xs-10 {
margin-left: 10px;
}
.margin-top-xs-10 {
margin-top: 10px;
}
.margin-right-xs-10 {
margin-right: 10px;
}
.margin-bottom-xs-10 {
margin-bottom: 10px;
}
.margin-xs-15 {
margin: 15px;
}
.margin-left-xs-15 {
margin-left: 15px;
}
.margin-top-xs-15 {
margin-top: 15px;
}
.margin-right-xs-15 {
margin-right: 15px;
}
.margin-bottom-xs-15 {
margin-bottom: 15px;
}
.margin-xs-20 {
margin: 20px;
}
.margin-left-xs-20 {
margin-left: 20px;
}
.margin-top-xs-20 {
margin-top: 20px;
}
.margin-right-xs-20 {
margin-right: 20px;
}
.margin-bottom-xs-20 {
margin-bottom: 20px;
}
.margin-xs-30 {
margin: 30px;
}
.margin-left-xs-30 {
margin-left: 30px;
}
.margin-top-xs-30 {
margin-top: 30px;
}
.margin-right-xs-30 {
margin-right: 30px;
}
.margin-bottom-xs-30 {
margin-bottom: 30px;
}
.margin-xs-40 {
margin: 40px;
}
.margin-left-xs-40 {
margin-left: 40px;
}
.margin-top-xs-40 {
margin-top: 40px;
}
.margin-right-xs-40 {
margin-right: 40px;
}
.margin-bottom-xs-40 {
margin-bottom: 40px;
}
.margin-xs-50 {
margin: 50px;
}
.margin-left-xs-50 {
margin-left: 50px;
}
.margin-top-xs-50 {
margin-top: 50px;
}
.margin-right-xs-50 {
margin-right: 50px;
}
.margin-bottom-xs-50 {
margin-bottom: 50px;
}
.margin-xs-60 {
margin: 60px;
}
.margin-left-xs-60 {
margin-left: 60px;
}
.margin-top-xs-60 {
margin-top: 60px;
}
.margin-right-xs-60 {
margin-right: 60px;
}
.margin-bottom-xs-60 {
margin-bottom: 60px;
}
.margin-xs-70 {
margin: 70px;
}
.margin-left-xs-70 {
margin-left: 70px;
}
.margin-top-xs-70 {
margin-top: 70px;
}
.margin-right-xs-70 {
margin-right: 70px;
}
.margin-bottom-xs-70 {
margin-bottom: 70px;
}
.margin-xs-80 {
margin: 80px;
}
.margin-left-xs-80 {
margin-left: 80px;
}
.margin-top-xs-80 {
margin-top: 80px;
}
.margin-right-xs-80 {
margin-right: 80px;
}
.margin-bottom-xs-80 {
margin-bottom: 80px;
}
.margin-xs-90 {
margin: 90px;
}
.margin-left-xs-90 {
margin-left: 90px;
}
.margin-top-xs-90 {
margin-top: 90px;
}
.margin-right-xs-90 {
margin-right: 90px;
}
.margin-bottom-xs-90 {
margin-bottom: 90px;
}
.margin-xs-100 {
margin: 100px;
}
.margin-left-xs-100 {
margin-left: 100px;
}
.margin-top-xs-100 {
margin-top: 100px;
}
.margin-right-xs-100 {
margin-right: 100px;
}
.margin-bottom-xs-100 {
margin-bottom: 100px;
}
}
@media (min-width: 768px) {
.no-margin-sm {
margin: 0;
}
.no-margin-sm-left {
margin-left: 0;
}
.no-margin-sm-top {
margin-top: 0;
}
.no-margin-sm-right {
margin-right: 0;
}
.no-margin-sm-bottom {
margin-bottom: 0;
}
.margin-sm-5 {
margin: 5px;
}
.margin-left-sm-5 {
margin-left: 5px;
}
.margin-top-sm-5 {
margin-top: 5px;
}
.margin-right-sm-5 {
margin-right: 5px;
}
.margin-bottom-sm-5 {
margin-bottom: 5px;
}
.margin-sm-10 {
margin: 10px;
}
.margin-left-sm-10 {
margin-left: 10px;
}
.margin-top-sm-10 {
margin-top: 10px;
}
.margin-right-sm-10 {
margin-right: 10px;
}
.margin-bottom-sm-10 {
margin-bottom: 10px;
}
.margin-sm-15 {
margin: 15px;
}
.margin-left-sm-15 {
margin-left: 15px;
}
.margin-top-sm-15 {
margin-top: 15px;
}
.margin-right-sm-15 {
margin-right: 15px;
}
.margin-bottom-sm-15 {
margin-bottom: 15px;
}
.margin-sm-20 {
margin: 20px;
}
.margin-left-sm-20 {
margin-left: 20px;
}
.margin-top-sm-20 {
margin-top: 20px;
}
.margin-right-sm-20 {
margin-right: 20px;
}
.margin-bottom-sm-20 {
margin-bottom: 20px;
}
.margin-sm-30 {
margin: 30px;
}
.margin-left-sm-30 {
margin-left: 30px;
}
.margin-top-sm-30 {
margin-top: 30px;
}
.margin-right-sm-30 {
margin-right: 30px;
}
.margin-bottom-sm-30 {
margin-bottom: 30px;
}
.margin-sm-40 {
margin: 40px;
}
.margin-left-sm-40 {
margin-left: 40px;
}
.margin-top-sm-40 {
margin-top: 40px;
}
.margin-right-sm-40 {
margin-right: 40px;
}
.margin-bottom-sm-40 {
margin-bottom: 40px;
}
.margin-sm-50 {
margin: 50px;
}
.margin-left-sm-50 {
margin-left: 50px;
}
.margin-top-sm-50 {
margin-top: 50px;
}
.margin-right-sm-50 {
margin-right: 50px;
}
.margin-bottom-sm-50 {
margin-bottom: 50px;
}
.margin-sm-60 {
margin: 60px;
}
.margin-left-sm-60 {
margin-left: 60px;
}
.margin-top-sm-60 {
margin-top: 60px;
}
.margin-right-sm-60 {
margin-right: 60px;
}
.margin-bottom-sm-60 {
margin-bottom: 60px;
}
.margin-sm-70 {
margin: 70px;
}
.margin-left-sm-70 {
margin-left: 70px;
}
.margin-top-sm-70 {
margin-top: 70px;
}
.margin-right-sm-70 {
margin-right: 70px;
}
.margin-bottom-sm-70 {
margin-bottom: 70px;
}
.margin-sm-80 {
margin: 80px;
}
.margin-left-sm-80 {
margin-left: 80px;
}
.margin-top-sm-80 {
margin-top: 80px;
}
.margin-right-sm-80 {
margin-right: 80px;
}
.margin-bottom-sm-80 {
margin-bottom: 80px;
}
.margin-sm-90 {
margin: 90px;
}
.margin-left-sm-90 {
margin-left: 90px;
}
.margin-top-sm-90 {
margin-top: 90px;
}
.margin-right-sm-90 {
margin-right: 90px;
}
.margin-bottom-sm-90 {
margin-bottom: 90px;
}
.margin-sm-100 {
margin: 100px;
}
.margin-left-sm-100 {
margin-left: 100px;
}
.margin-top-sm-100 {
margin-top: 100px;
}
.margin-right-sm-100 {
margin-right: 100px;
}
.margin-bottom-sm-100 {
margin-bottom: 100px;
}
.margin-sm-110 {
margin: 110px;
}
.margin-left-sm-110 {
margin-left: 110px;
}
.margin-top-sm-110 {
margin-top: 110px;
}
.margin-right-sm-110 {
margin-right: 110px;
}
.margin-bottom-sm-110 {
margin-bottom: 110px;
}
}
@media (min-width: 992px) {
.no-margin-md {
margin: 0;
}
.no-margin-md-left {
margin-left: 0;
}
.no-margin-md-top {
margin-top: 0;
}
.no-margin-md-right {
margin-right: 0;
}
.no-margin-md-bottom {
margin-bottom: 0;
}
.margin-md-5 {
margin: 5px;
}
.margin-left-md-5 {
margin-left: 5px;
}
.margin-top-md-5 {
margin-top: 5px;
}
.margin-right-md-5 {
margin-right: 5px;
}
.margin-bottom-md-5 {
margin-bottom: 5px;
}
.margin-md-10 {
margin: 10px;
}
.margin-left-md-10 {
margin-left: 10px;
}
.margin-top-md-10 {
margin-top: 10px;
}
.margin-right-md-10 {
margin-right: 10px;
}
.margin-bottom-md-10 {
margin-bottom: 10px;
}
.margin-md-15 {
margin: 15px;
}
.margin-left-md-15 {
margin-left: 15px;
}
.margin-top-md-15 {
margin-top: 15px;
}
.margin-right-md-15 {
margin-right: 15px;
}
.margin-bottom-md-15 {
margin-bottom: 15px;
}
.margin-md-20 {
margin: 20px;
}
.margin-left-md-20 {
margin-left: 20px;
}
.margin-top-md-20 {
margin-top: 20px;
}
.margin-right-md-20 {
margin-right: 20px;
}
.margin-bottom-md-20 {
margin-bottom: 20px;
}
.margin-md-30 {
margin: 30px;
}
.margin-left-md-30 {
margin-left: 30px;
}
.margin-top-md-30 {
margin-top: 30px;
}
.margin-right-md-30 {
margin-right: 30px;
}
.margin-bottom-md-30 {
margin-bottom: 30px;
}
.margin-md-40 {
margin: 40px;
}
.margin-left-md-40 {
margin-left: 40px;
}
.margin-top-md-40 {
margin-top: 40px;
}
.margin-right-md-40 {
margin-right: 40px;
}
.margin-bottom-md-40 {
margin-bottom: 40px;
}
.margin-md-50 {
margin: 50px;
}
.margin-left-md-50 {
margin-left: 50px;
}
.margin-top-md-50 {
margin-top: 50px;
}
.margin-right-md-50 {
margin-right: 50px;
}
.margin-bottom-md-50 {
margin-bottom: 50px;
}
.margin-md-60 {
margin: 60px;
}
.margin-left-md-60 {
margin-left: 60px;
}
.margin-top-md-60 {
margin-top: 60px;
}
.margin-right-md-60 {
margin-right: 60px;
}
.margin-bottom-md-60 {
margin-bottom: 60px;
}
.margin-md-60 {
margin: 60px;
}
.margin-left-md-60 {
margin-left: 60px;
}
.margin-top-md-60 {
margin-top: 60px;
}
.margin-right-md-60 {
margin-right: 60px;
}
.margin-bottom-md-60 {
margin-bottom: 60px;
}
.margin-md-80 {
margin: 80px;
}
.margin-left-md-80 {
margin-left: 80px;
}
.margin-top-md-80 {
margin-top: 80px;
}
.margin-right-md-80 {
margin-right: 80px;
}
.margin-bottom-md-80 {
margin-bottom: 80px;
}
.margin-md-90 {
margin: 90px;
}
.margin-left-md-90 {
margin-left: 90px;
}
.margin-top-md-90 {
margin-top: 90px;
}
.margin-right-md-90 {
margin-right: 90px;
}
.margin-bottom-md-90 {
margin-bottom: 90px;
}
.margin-md-100 {
margin: 100px;
}
.margin-left-md-100 {
margin-left: 100px;
}
.margin-top-md-100 {
margin-top: 100px;
}
.margin-right-md-100 {
margin-right: 100px;
}
.margin-bottom-md-100 {
margin-bottom: 100px;
}
}
.no-padding {
padding: 0;
}
.no-padding-left {
padding-left: 0;
}
.no-padding-top {
padding-top: 0;
}
.no-padding-right {
padding-right: 0;
}
.no-padding-bottom {
padding-bottom: 0;
}
.padding-5 {
padding: 5px;
}
.padding-left-5 {
padding-left: 5px;
}
.padding-top-5 {
padding-top: 5px;
}
.padding-right-5 {
padding-right: 5px;
}
.padding-bottom-5 {
padding-bottom: 5px;
}
.padding-10 {
padding: 10px;
}
.padding-left-10 {
padding-left: 10px;
}
.padding-top-10 {
padding-top: 10px;
}
.padding-right-10 {
padding-right: 10px;
}
.padding-bottom-10 {
padding-bottom: 10px;
}
.padding-15 {
padding: 15px;
}
.padding-left-15 {
padding-left: 15px;
}
.padding-top-15 {
padding-top: 15px;
}
.padding-right-15 {
padding-right: 15px;
}
.padding-bottom-15 {
padding-bottom: 15px;
}
.padding-20 {
padding: 20px;
}
.padding-left-20 {
padding-left: 20px;
}
.padding-top-20 {
padding-top: 20px;
}
.padding-right-20 {
padding-right: 20px;
}
.padding-bottom-20 {
padding-bottom: 20px;
}
.padding-30 {
padding: 30px;
}
.padding-left-30 {
padding-left: 30px;
}
.padding-top-30 {
padding-top: 30px;
}
.padding-right-30 {
padding-right: 30px;
}
.padding-bottom-30 {
padding-bottom: 30px;
}
.padding-40 {
padding: 40px;
}
.padding-left-40 {
padding-left: 40px;
}
.padding-top-40 {
padding-top: 40px;
}
.padding-right-40 {
padding-right: 40px;
}
.padding-bottom-40 {
padding-bottom: 40px;
}
.padding-50 {
padding: 50px;
}
.padding-left-50 {
padding-left: 50px;
}
.padding-top-50 {
padding-top: 50px;
}
.padding-right-50 {
padding-right: 50px;
}
.padding-bottom-50 {
padding-bottom: 50px;
}
.padding-60 {
padding: 60px;
}
.padding-left-60 {
padding-left: 60px;
}
.padding-top-60 {
padding-top: 60px;
}
.padding-right-60 {
padding-right: 60px;
}
.padding-bottom-60 {
padding-bottom: 60px;
}
.padding-70 {
padding: 70px;
}
.padding-left-70 {
padding-left: 70px;
}
.padding-top-70 {
padding-top: 70px;
}
.padding-right-70 {
padding-right: 70px;
}
.padding-bottom-70 {
padding-bottom: 70px;
}
.padding-80 {
padding: 80px;
}
.padding-left-80 {
padding-left: 80px;
}
.padding-top-80 {
padding-top: 80px;
}
.padding-right-80 {
padding-right: 80px;
}
.padding-bottom-80 {
padding-bottom: 80px;
}
.padding-90 {
padding: 90px;
}
.padding-left-90 {
padding-left: 90px;
}
.padding-top-90 {
padding-top: 90px;
}
.padding-right-90 {
padding-right: 90px;
}
.padding-bottom-90 {
padding-bottom: 90px;
}
.padding-100 {
padding: 100px;
}
.padding-left-100 {
padding-left: 100px;
}
.padding-top-100 {
padding-top: 100px;
}
.padding-right-100 {
padding-right: 100px;
}
.padding-bottom-100 {
padding-bottom: 100px;
}
@media (max-width: 767px) {
.no-padding-xs {
padding: 0;
}
.no-padding-xs-left {
padding-left: 0;
}
.no-padding-xs-top {
padding-top: 0;
}
.no-padding-xs-right {
padding-right: 0;
}
.no-padding-xs-bottom {
padding-bottom: 0;
}
.padding-xs-5 {
padding: 5px;
}
.padding-left-xs-5 {
padding-left: 5px;
}
.padding-top-xs-5 {
padding-top: 5px;
}
.padding-right-xs-5 {
padding-right: 5px;
}
.padding-bottom-xs-5 {
padding-bottom: 5px;
}
.padding-xs-10 {
padding: 10px;
}
.padding-left-xs-10 {
padding-left: 10px;
}
.padding-top-xs-10 {
padding-top: 10px;
}
.padding-right-xs-10 {
padding-right: 10px;
}
.padding-bottom-xs-10 {
padding-bottom: 10px;
}
.padding-xs-15 {
padding: 15px;
}
.padding-left-xs-15 {
padding-left: 15px;
}
.padding-top-xs-15 {
padding-top: 15px;
}
.padding-right-xs-15 {
padding-right: 15px;
}
.padding-bottom-xs-15 {
padding-bottom: 15px;
}
.padding-xs-20 {
padding: 20px;
}
.padding-left-xs-20 {
padding-left: 20px;
}
.padding-top-xs-20 {
padding-top: 20px;
}
.padding-right-xs-20 {
padding-right: 20px;
}
.padding-bottom-xs-20 {
padding-bottom: 20px;
}
.padding-xs-30 {
padding: 30px;
}
.padding-left-xs-30 {
padding-left: 30px;
}
.padding-top-xs-30 {
padding-top: 30px;
}
.padding-right-xs-30 {
padding-right: 30px;
}
.padding-bottom-xs-30 {
padding-bottom: 30px;
}
.padding-xs-40 {
padding: 40px;
}
.padding-left-xs-40 {
padding-left: 40px;
}
.padding-top-xs-40 {
padding-top: 40px;
}
.padding-right-xs-40 {
padding-right: 40px;
}
.padding-bottom-xs-40 {
padding-bottom: 40px;
}
.padding-xs-50 {
padding: 50px;
}
.padding-left-xs-50 {
padding-left: 50px;
}
.padding-top-xs-50 {
padding-top: 50px;
}
.padding-right-xs-50 {
padding-right: 50px;
}
.padding-bottom-xs-50 {
padding-bottom: 50px;
}
.padding-xs-60 {
padding: 60px;
}
.padding-left-xs-60 {
padding-left: 60px;
}
.padding-top-xs-60 {
padding-top: 60px;
}
.padding-right-xs-60 {
padding-right: 60px;
}
.padding-bottom-xs-60 {
padding-bottom: 60px;
}
.padding-xs-70 {
padding: 70px;
}
.padding-left-xs-70 {
padding-left: 70px;
}
.padding-top-xs-70 {
padding-top: 70px;
}
.padding-right-xs-70 {
padding-right: 70px;
}
.padding-bottom-xs-70 {
padding-bottom: 70px;
}
.padding-xs-80 {
padding: 80px;
}
.padding-left-xs-80 {
padding-left: 80px;
}
.padding-top-xs-80 {
padding-top: 80px;
}
.padding-right-xs-80 {
padding-right: 80px;
}
.padding-bottom-xs-80 {
padding-bottom: 80px;
}
.padding-xs-90 {
padding: 90px;
}
.padding-left-xs-90 {
padding-left: 90px;
}
.padding-top-xs-90 {
padding-top: 90px;
}
.padding-right-xs-90 {
padding-right: 90px;
}
.padding-bottom-xs-90 {
padding-bottom: 90px;
}
.padding-xs-100 {
padding: 100px;
}
.padding-left-xs-100 {
padding-left: 100px;
}
.padding-top-xs-100 {
padding-top: 100px;
}
.padding-right-xs-100 {
padding-right: 100px;
}
.padding-bottom-xs-100 {
padding-bottom: 100px;
}
}
@media (min-width: 768px) {
.no-padding-sm {
padding: 0;
}
.no-padding-sm-left {
padding-left: 0;
}
.no-padding-sm-top {
padding-top: 0;
}
.no-padding-sm-right {
padding-right: 0;
}
.no-padding-sm-bottom {
padding-bottom: 0;
}
.padding-sm-5 {
padding: 5px;
}
.padding-left-sm-5 {
padding-left: 5px;
}
.padding-top-sm-5 {
padding-top: 5px;
}
.padding-right-sm-5 {
padding-right: 5px;
}
.padding-bottom-sm-5 {
padding-bottom: 5px;
}
.padding-sm-10 {
padding: 10px;
}
.padding-left-sm-10 {
padding-left: 10px;
}
.padding-top-sm-10 {
padding-top: 10px;
}
.padding-right-sm-10 {
padding-right: 10px;
}
.padding-bottom-sm-10 {
padding-bottom: 10px;
}
.padding-sm-15 {
padding: 15px;
}
.padding-left-sm-15 {
padding-left: 15px;
}
.padding-top-sm-15 {
padding-top: 15px;
}
.padding-right-sm-15 {
padding-right: 15px;
}
.padding-bottom-sm-15 {
padding-bottom: 15px;
}
.padding-sm-20 {
padding: 20px;
}
.padding-left-sm-20 {
padding-left: 20px;
}
.padding-top-sm-20 {
padding-top: 20px;
}
.padding-right-sm-20 {
padding-right: 20px;
}
.padding-bottom-sm-20 {
padding-bottom: 20px;
}
.padding-sm-30 {
padding: 30px;
}
.padding-left-sm-30 {
padding-left: 30px;
}
.padding-top-sm-30 {
padding-top: 30px;
}
.padding-right-sm-30 {
padding-right: 30px;
}
.padding-bottom-sm-30 {
padding-bottom: 30px;
}
.padding-sm-40 {
padding: 40px;
}
.padding-left-sm-40 {
padding-left: 40px;
}
.padding-top-sm-40 {
padding-top: 40px;
}
.padding-right-sm-40 {
padding-right: 40px;
}
.padding-bottom-sm-40 {
padding-bottom: 40px;
}
.padding-sm-50 {
padding: 50px;
}
.padding-left-sm-50 {
padding-left: 50px;
}
.padding-top-sm-50 {
padding-top: 50px;
}
.padding-right-sm-50 {
padding-right: 50px;
}
.padding-bottom-sm-50 {
padding-bottom: 50px;
}
.padding-sm-60 {
padding: 60px;
}
.padding-left-sm-60 {
padding-left: 60px;
}
.padding-top-sm-60 {
padding-top: 60px;
}
.padding-right-sm-60 {
padding-right: 60px;
}
.padding-bottom-sm-60 {
padding-bottom: 60px;
}
.padding-sm-70 {
padding: 70px;
}
.padding-left-sm-70 {
padding-left: 70px;
}
.padding-top-sm-70 {
padding-top: 70px;
}
.padding-right-sm-70 {
padding-right: 70px;
}
.padding-bottom-sm-70 {
padding-bottom: 70px;
}
.padding-sm-80 {
padding: 80px;
}
.padding-left-sm-80 {
padding-left: 80px;
}
.padding-top-sm-80 {
padding-top: 80px;
}
.padding-right-sm-80 {
padding-right: 80px;
}
.padding-bottom-sm-80 {
padding-bottom: 80px;
}
.padding-sm-90 {
padding: 90px;
}
.padding-left-sm-90 {
padding-left: 90px;
}
.padding-top-sm-90 {
padding-top: 90px;
}
.padding-right-sm-90 {
padding-right: 90px;
}
.padding-bottom-sm-90 {
padding-bottom: 90px;
}
.padding-sm-100 {
padding: 100px;
}
.padding-left-sm-100 {
padding-left: 100px;
}
.padding-top-sm-100 {
padding-top: 100px;
}
.padding-right-sm-100 {
padding-right: 100px;
}
.padding-bottom-sm-100 {
padding-bottom: 100px;
}
.padding-sm-150 {
padding: 150px;
}
.padding-left-sm-150 {
padding-left: 150px;
}
.padding-top-sm-150 {
padding-top: 150px;
}
.padding-right-sm-150 {
padding-right: 150px;
}
.padding-bottom-sm-150 {
padding-bottom: 150px;
}
}
@media (min-width: 992px) {
.no-padding-md {
padding: 0;
}
.no-padding-md-left {
padding-left: 0;
}
.no-padding-md-top {
padding-top: 0;
}
.no-padding-md-right {
padding-right: 0;
}
.no-padding-md-bottom {
padding-bottom: 0;
}
.padding-md-5 {
padding: 5px;
}
.padding-left-md-5 {
padding-left: 5px;
}
.padding-top-md-5 {
padding-top: 5px;
}
.padding-right-md-5 {
padding-right: 5px;
}
.padding-bottom-md-5 {
padding-bottom: 5px;
}
.padding-md-10 {
padding: 10px;
}
.padding-left-md-10 {
padding-left: 10px;
}
.padding-top-md-10 {
padding-top: 10px;
}
.padding-right-md-10 {
padding-right: 10px;
}
.padding-bottom-md-10 {
padding-bottom: 10px;
}
.padding-md-15 {
padding: 15px;
}
.padding-left-md-15 {
padding-left: 15px;
}
.padding-top-md-15 {
padding-top: 15px;
}
.padding-right-md-15 {
padding-right: 15px;
}
.padding-bottom-md-15 {
padding-bottom: 15px;
}
.padding-md-20 {
padding: 20px;
}
.padding-left-md-20 {
padding-left: 20px;
}
.padding-top-md-20 {
padding-top: 20px;
}
.padding-right-md-20 {
padding-right: 20px;
}
.padding-bottom-md-20 {
padding-bottom: 20px;
}
.padding-md-30 {
padding: 30px;
}
.padding-left-md-30 {
padding-left: 30px;
}
.padding-top-md-30 {
padding-top: 30px;
}
.padding-right-md-30 {
padding-right: 30px;
}
.padding-bottom-md-30 {
padding-bottom: 30px;
}
.padding-md-40 {
padding: 40px;
}
.padding-left-md-40 {
padding-left: 40px;
}
.padding-top-md-40 {
padding-top: 40px;
}
.padding-right-md-40 {
padding-right: 40px;
}
.padding-bottom-md-40 {
padding-bottom: 40px;
}
.padding-md-50 {
padding: 50px;
}
.padding-left-md-50 {
padding-left: 50px;
}
.padding-top-md-50 {
padding-top: 50px;
}
.padding-right-md-50 {
padding-right: 50px;
}
.padding-bottom-md-50 {
padding-bottom: 50px;
}
.padding-md-60 {
padding: 60px;
}
.padding-left-md-60 {
padding-left: 60px;
}
.padding-top-md-60 {
padding-top: 60px;
}
.padding-right-md-60 {
padding-right: 60px;
}
.padding-bottom-md-60 {
padding-bottom: 60px;
}
.padding-md-70 {
padding: 70px;
}
.padding-left-md-70 {
padding-left: 70px;
}
.padding-top-md-70 {
padding-top: 70px;
}
.padding-right-md-70 {
padding-right: 70px;
}
.padding-bottom-md-70 {
padding-bottom: 70px;
}
.padding-md-80 {
padding: 80px;
}
.padding-left-md-80 {
padding-left: 80px;
}
.padding-top-md-80 {
padding-top: 80px;
}
.padding-right-md-80 {
padding-right: 80px;
}
.padding-bottom-md-80 {
padding-bottom: 80px;
}
.padding-md-90 {
padding: 90px;
}
.padding-left-md-90 {
padding-left: 90px;
}
.padding-top-md-90 {
padding-top: 90px;
}
.padding-right-md-90 {
padding-right: 90px;
}
.padding-bottom-md-90 {
padding-bottom: 90px;
}
.padding-md-100 {
padding: 100px;
}
.padding-left-md-100 {
padding-left: 100px;
}
.padding-top-md-100 {
padding-top: 100px;
}
.padding-right-md-100 {
padding-right: 100px;
}
.padding-bottom-md-100 {
padding-bottom: 100px;
}
}
.index01 {
background-image: url(../img/backgrounds/home-bg-01.html);
}
.index02 {
background-image: url(../img/backgrounds/home-bg-02.jpg);
}
.index03 {
background-image: url(../img/backgrounds/home-bg-03.jpg);
}
.index04 {
background-image: url(../img/backgrounds/home-bg-04.jpg);
}
.index05 {
background-image: url(../img/backgrounds/home-bg-05.jpg);
}
.index06 {
background-image: url(../img/backgrounds/home-bg-06.jpg);
}
.index07 {
background-image: url(../img/backgrounds/home-bg-07.jpg);
}
.index08 {
background-image: url(../img/backgrounds/home-bg-08.jpg);
}
.index09 {
background-image: url(../img/backgrounds/home-bg-09.jpg);
}
.index10 {
background-image: url(../img/backgrounds/home-bg-10.jpg);
}
.index11 {
background-image: url(../img/backgrounds/home-bg-11.jpg);
}
.index12 {
background-image: url(../img/backgrounds/home-bg-12.jpg);
}
.index13 {
background-image: url(../img/backgrounds/home-bg-13.jpg);
}
.index14 {
background-image: url(../img/backgrounds/home-bg-14.html);
}
.index15 {
background-image: url(../img/backgrounds/home-bg-15.jpg);
}
.index16 {
background-image: url(../img/backgrounds/home-bg-16.jpg);
}
.index17 {
background-image: url(../img/backgrounds/home-bg-17.jpg);
}
.index18 {
background-image: url(../img/backgrounds/home-bg-18.jpg);
}
.index19 {
background-image: url(../img/backgrounds/home-bg-19.html);
}
.index20 {
background-image: url(../img/backgrounds/home-bg-20.jpg);
}
.index21 {
background-image: url(../img/backgrounds/home-bg-21.html);
}
.index22 {
background-image: url(../img/backgrounds/home-bg-22.jpg);
}
.index23 {
background-image: url(../img/backgrounds/home-bg-23.html);
}
.index24 {
background-image: url(../img/backgrounds/home-bg-24.jpg);
}
.index25 {
background-image: url(../img/backgrounds/home-bg-25.html);
}
.index26 {
background-image: url(../img/backgrounds/home-bg-26.jpg);
}
.index27 {
background-image: url(../img/backgrounds/home-bg-27.jpg);
}
.index28 {
background-image: url(../img/backgrounds/home-bg-28.jpg);
}
.index29 {
background-image: url(../img/backgrounds/home-bg-29.html);
}
.index30 {
background-image: url(../img/backgrounds/home-bg-30.html);
}
.index31 {
background-image: url(../img/backgrounds/home-bg-31.html);
}
.index32 {
background-image: url(../img/backgrounds/home-bg-32.jpg);
}
.index33 {
background-image: url(../img/backgrounds/home-bg-33.jpg);
}
.index34 {
background-image: url(../img/backgrounds/home-bg-34.jpg);
}
.index35 {
background-image: url(../img/backgrounds/home-bg-35.html);
}
.index36 {
background-image: url(../img/backgrounds/home-bg-36.jpg);
}
.index37 {
background-image: url(../img/backgrounds/home-bg-37.html);
}
.index38 {
background-image: url(../img/backgrounds/home-bg-38.jpg);
}
.index39 {
background-image: url(../img/backgrounds/home-bg-39.jpg);
}
.index40 {
background-image: url(../img/backgrounds/home-bg-40.html);
}
.index41 {
background-image: url(../img/backgrounds/home-bg-41.jpg);
}
.index42 {
background-image: url(../img/backgrounds/home-bg-42.jpg);
}
.index43 {
background-image: url(../img/backgrounds/home-bg-43.jpg);
}
.index45 {
background-image: url(../img/backgrounds/home-bg-45.jpg);
}
.index46 {
background-image: url(../img/backgrounds/home-bg-46.html);
}
.index47 {
background-image: url(../img/backgrounds/home-bg-47.jpg);
}
.index48 {
background-image: url(../img/backgrounds/home-bg-48.html);
}
.index49 {
background-image: url(../img/backgrounds/home-bg-49.jpg);
}
.index50 {
background-image: url(../img/backgrounds/home-bg-50.html);
}
.index51 {
background-image: url(../img/backgrounds/home-bg-51.html);
}
.index52 {
background-image: url(../img/backgrounds/home-bg-52.html);
}
.index53 {
background-image: url(../img/backgrounds/home-bg-53.html);
}
.index54 {
background-image: url(../img/backgrounds/home-bg-54.html);
}
.index55 {
background-image: url(../img/backgrounds/home-bg-55.html);
}
.index56 {
background-image: url(../img/backgrounds/home-bg-56.html);
}
.index57 {
background-image: url(../img/backgrounds/home-bg-57.jpg);
}
.index58 {
background-image: url(../img/backgrounds/home-bg-58.html);
}
.index59 {
background-image: url(../img/backgrounds/home-bg-59.html);
}
.index60 {
background-image: url(../img/backgrounds/home-bg-60.jpg);
}
.index61 {
background-image: url(../img/backgrounds/home-bg-61.jpg);
}
.index62 {
background-image: url(../img/backgrounds/home-bg-62.jpg);
}
.index63 {
background-image: url(../img/backgrounds/home-bg-63.jpg);
}
.index64 {
background-image: url(../img/backgrounds/home-bg-64.jpg);
}
.csswinner-badge {
position: fixed;
top: 200px;
right: 0;
z-index: 800;
}
/*  
Responsive styles
--------------
Contents
========
min-width: 481px
max-width: 767px
min-width: 768px
min-width: 992px
min-width: 1200px
max-width: 480px
Blended
Animation delays
*/
/*
min-width: 481px
-------------------------
*/
@media (min-width: 481px) {
.hs-text-2 {
font-size: 60px;
line-height: 1.3;
}
.hs-text-4 {
font-size: 36px;
line-height: 1.3;
}
.hs-text-7 {
font-size: 48px;
line-height: 1.4;
}
.hs-text-10 {
font-size: 50px;
line-height: 1.2;
}
.hs-text-11 {
font-size: 55px;
line-height: 1;
}
.hs-text-12 {
font-size: 54px;
line-height: 1.2;
}
.hs-text-14 {
font-size: 32px;
line-height: 1.3;
}
.process-labels span {
opacity: 1;
}
.line-process-mood .owl-dot {
height: 120px;
width: 120px;
-webkit-transform: translateX(-60px) translateY(-90px);
-ms-transform: translateX(-60px) translateY(-90px);
transform: translateX(-60px) translateY(-90px);
}
.line-process-mood .owl-dot span {
-webkit-transform: translateX(60px) translateY(90px);
-ms-transform: translateX(60px) translateY(90px);
transform: translateX(60px) translateY(90px);
}
}
/*
max-width: 767px
-------------------------
*/
@media (max-width: 767px) {
.navbar-nav {
overflow: hidden;
}
.navbar-nav > li > a {
line-height: 21px;
}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
background-image: none;
}
.navbar-nav > li:first-child > a {
padding-top: 30px;
}
.navbar-nav > li:last-child > a {
padding-bottom: 30px;
}
.navbar-nav .open .dropdown-menu > li > a,
.navbar-nav .open .dropdown-menu .dropdown-header {
padding: 5px 15px 5px 25px;
}
}
/*
min-width: 768px
-------------------------
*/
@media screen and (min-width: 768px) {
h1 {
font-size: 1.785em;
/* 1.785x body copy size = 25px */
}
h2 {
font-size: 1.571em;
/* 1.571x body copy size = 22px */
}
h3 {
font-size: 1.357em;
/* 1.357 body copy size = 19px */
/* 25px / 22px */
}
h4 {
font-size: 1.214em;
/* 1.214x body copy size = 17px */
}
h5 {
font-size: 1.0714em;
/* 1.0714x body copy size = 15px */
}
h6 {
font-size: 1em;
/* 1.x body copy size = 14px */
}
.hs-text-2 {
font-size: 75px;
line-height: 1.3;
}
.hs-text-10 {
font-size: 80px;
line-height: 1.2;
}
.hs-text-11 {
font-size: 75px;
line-height: 1;
}
.hs-content-inner {
padding: 0 70px;
}
.hs-content-inner.text-left > div {
margin-left: 0;
}
.hs-content-inner.text-right > div {
margin-right: 0;
}
.as-indicators {
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
/* scroll progress bar */
#scroll-progressbar {
display: block;
position: absolute;
top: 0;
height: 2px;
width: 100%;
z-index: 99999;
}
#scroll-progressbar div {
position: relative;
height: 100%;
width: 0;
-webkit-transition: width 0.3s ease-out;
transition: width 0.3s ease-out;
}
#scroll-progressbar .scroll-shadow {
position: absolute;
right: 0;
width: 100px;
height: 100%;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
}
/*navbar*/
.navbar {
border-radius: 0;
-webkit-transition: padding 0.21s ease-out, background 0.21s ease-out, border 0.21s ease-out;
transition: padding 0.21s ease-out, background 0.21s ease-out, border 0.21s ease-out;
}
.navbar .ink.animate {
-webkit-animation: ripple 0.7s ease-out;
animation: ripple 0.7s ease-out;
}
.navbar-brand {
padding: 0 0 0 45px;
}
.navbar-toggle {
margin-right: 45px;
}
.navbar-default .navbar-toggle:hover > .navbar-header,
.navbar-default .navbar-toggle:focus .container > .navbar-header,
.container-fluid > .navbar-header,
.navbar-default .navbar-toggle:hover > .navbar-collapse,
.navbar-default .navbar-toggle:focus .container > .navbar-collapse,
.container-fluid > .navbar-collapse {
margin-right: 0;
margin-left: 0;
}
.navbar > .container .navbar-brand,
.navbar > .container-fluid .navbar-brand {
margin-left: -45px;
}
.navbar-nav > li > a {
padding-top: 19.5px;
padding-bottom: 19.5px;
}
.navbar-nav.navbar-right:last-child {
margin-right: -15px;
}
/* Navigation links falling effect */
.cl-effect-5 > li {
padding-top: 19.5px;
padding-bottom: 19.5px;
}
.cl-effect-5 > li > a {
position: relative;
padding-top: 0;
padding-bottom: 0;
overflow: hidden;
}
.cl-effect-5 > li > a span[data-hover] {
position: relative;
display: inline-block;
-webkit-transition: -webkit-transform .4s;
transition: transform .4s;
}
.cl-effect-5 > li > a span[data-hover]:before {
position: absolute;
top: 100%;
font-weight: 700;
color: #171724;
content: attr(data-hover);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: color .4s;
transition: color .4s;
}
.cl-effect-5 > li > a:hover span[data-hover] {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
.cl-effect-5 > .active > a span[data-hover],
.cl-effect-5 > .active > a:focus span[data-hover],
.cl-effect-5 > .active > a:hover span[data-hover] {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
/* 
Falling Carousel Indicators Style
-------------------------
*/
.dotstyle-fall li:after,
.dotstyle-fall div:after {
-webkit-transform: translate3d(0, -200%, 0);
transform: translate3d(0, -200%, 0);
-webkit-transition: -webkit-transform .3s ease, opacity .5s ease, visibility 0s .5s;
transition: transform .3s ease, opacity .5s ease, visibility 0s .5s;
}
.dotstyle-fall li a,
.dotstyle-fall div a,
.dotstyle-fall li span,
.dotstyle-fall div span {
-webkit-transform: translate3d(0, 0%, 0);
transform: translate3d(0, 0%, 0);
-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease, background-color 0.5s ease 0s;
transition: transform 0.5s ease, opacity 0.5s ease, background-color 0.5s ease 0s;
}
.dotstyle-fall li.active:after,
.dotstyle-fall div.active:after,
.dotstyle-fall li.current:after,
.dotstyle-fall div.current:after {
-webkit-transition: -webkit-transform .5s ease, opacity .5s ease;
transition: transform .5s ease, opacity .5s ease;
-webkit-transform: translate3d(0, 0%, 0);
transform: translate3d(0, 0%, 0);
}
.dotstyle-fall li.active a,
.dotstyle-fall div.active a,
.dotstyle-fall li.current a,
.dotstyle-fall div.current a,
.dotstyle-fall li.active span,
.dotstyle-fall div.active span,
.dotstyle-fall li.current span,
.dotstyle-fall div.current span {
-webkit-transform: translate3d(0, 200%, 0);
transform: translate3d(0, 200%, 0);
}
/* 
Filling Carousel Indicators Style
-------------------------
*/
.dotstyle-fill li a,
.dotstyle-fill div a,
.dotstyle-fill li span,
.dotstyle-fill div span {
-webkit-transition: box-shadow 0.5s ease-out;
transition: box-shadow 0.5s ease-out;
}
.dotstyle-fill li.active a,
.dotstyle-fill div.active a,
.dotstyle-fill li.current a,
.dotstyle-fill div.current a,
.dotstyle-fill li.active span,
.dotstyle-fill div.active span,
.dotstyle-fill li.current span,
.dotstyle-fill div.current span {
-webkit-transition: box-shadow 0.5s 0.2s ease-in;
transition: box-shadow 0.5s 0.2s ease-in;
}
.dotstyle-fillup li a,
.dotstyle-fillup div a,
.dotstyle-fillup li span,
.dotstyle-fillup div span {
-webkit-transition: background 0.3s ease 0s;
transition: background 0.3s ease 0s;
}
.dotstyle-fillup li a:after,
.dotstyle-fillup div a:after,
.dotstyle-fillup li span:after,
.dotstyle-fillup div span:after {
-webkit-transition: width 0.27s ease-out 0s;
transition: width 0.27s ease-out 0s;
}
.dotstyle-fillup.from-bottom li a:after,
.dotstyle-fillup.from-bottom div a:after,
.dotstyle-fillup.from-bottom li span:after,
.dotstyle-fillup.from-bottom div span:after {
-webkit-transition: height 0.27s ease-out 0s, opacity 0.27s ease-out 0s;
transition: height 0.27s ease-out 0s, opacity 0.27s ease-out 0s;
}
.team-item-img {
-webkit-filter: blur(0px);
filter: blur(0px);
}
.team-item:hover .team-item-img {
-webkit-filter: blur(12px);
filter: blur(12px);
}
.section-title {
padding-bottom: 90px;
}
/* Works buttons */
.portfolio-filters .btn {
min-width: 130px;
}
.portfolio-container {
-webkit-transition: height .5s;
transition: height .5s;
}
.portfolio-container.no-transition {
-webkit-transition-duration: 0s;
transition-duration: 0s;
}
.portfolio-item-img {
overflow: hidden;
}
.portfolio-item-img img {
-webkit-transition: -webkit-transform 0.25s ease-out;
transition: transform 0.25s ease-out;
}
.portfolio-item-img:after {
-webkit-transition: opacity 0.25s ease-out;
transition: opacity 0.25s ease-out;
}
.video-work:after {
-webkit-transition: opacity 0.25s ease-out;
transition: opacity 0.25s ease-out;
}
.portfolio-item .video-background {
-webkit-transition: -webkit-transform 0.25s ease-out;
transition: transform 0.25s ease-out;
}
.portfolio-item-title {
-webkit-transition: opacity 0.25s, -webkit-transform 0.40s;
transition: opacity 0.25s, transform 0.40s;
}
.portfolio-item-detail {
-webkit-transition: opacity 0.25s, -webkit-transform 0.25s;
transition: opacity 0.25s, transform 0.25s;
}
.portfolio-item-detail a {
padding: 0 10px;
font-size: 28px;
display: inline;
line-height: 1.2;
}
.portfolio-item:hover .portfolio-item-detail {
-webkit-transition: opacity 0.15s, -webkit-transform 0.25s;
transition: opacity 0.15s, transform 0.25s;
}
/* Process Lables */
.process-labels span {
-webkit-transition: opacity 0.3s ease-in;
transition: opacity 0.3s ease-in;
}
.process-labels span:before,
.process-labels .icon-shade {
-webkit-transition: max-width 0.3s ease 0s;
transition: max-width 0.3s ease 0s;
}
.process-labels .process-label-active span:before,
.process-labels .process-label-active .icon-shade {
-webkit-transition: max-width 0.3s ease 0.5s;
transition: max-width 0.3s ease 0.5s;
}
.line-process-mood .owl-dot {
height: 120px;
width: 192px;
-webkit-transform: translateX(-96px) translateY(-90px);
-ms-transform: translateX(-96px) translateY(-90px);
transform: translateX(-96px) translateY(-90px);
}
.line-process-mood .owl-dot span {
-webkit-transform: translateX(96px) translateY(90px);
-ms-transform: translateX(96px) translateY(90px);
transform: translateX(96px) translateY(90px);
}
.line-process-mood .owl-dot span:after {
-webkit-transition: width 0.3s ease 0s;
transition: width 0.3s ease 0s;
}
.line-process-mood .owl-dot.active span:after {
-webkit-transition: width 0.3s ease 0.5s;
transition: width 0.3s ease 0.5s;
}
/* skill bars */
.skillbar-bar {
-webkit-transition: width 2000ms cubic-bezier(0.26, 0.765, 0.07, 1.095);
transition: width 2000ms cubic-bezier(0.26, 0.765, 0.07, 1.095);
}
/*  Services Section */
.services-section-item {
margin-bottom: 40px;
}
.no-touch.cssanimations .services-section-item {
margin-bottom: 0;
}
.no-touch.cssanimations .services-section-item-icon {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform 0.7s cubic-bezier(0.26, 0.86, 0.44, 0.985) 0s, opacity 0.3s cubic-bezier(0.26, 0.86, 0.44, 0.985) 0s;
transition: transform 0.7s cubic-bezier(0.26, 0.86, 0.44, 0.985) 0s, opacity 0.3s cubic-bezier(0.26, 0.86, 0.44, 0.985) 0s;
}
.no-touch.cssanimations .services-item-title {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform 0.7s cubic-bezier(0.26, 0.86, 0.44, 0.985) 0s;
transition: transform 0.7s cubic-bezier(0.26, 0.86, 0.44, 0.985) 0s;
}
.no-touch.cssanimations .services-section-item-text {
opacity: 0;
-webkit-transform: rotate3d(1, 0, 0, -90deg) translate3d(0, 50px, 0);
transform: rotate3d(1, 0, 0, -90deg) translate3d(0, 50px, 0);
-webkit-transition: -webkit-transform 0.7s cubic-bezier(0.26, 0.86, 0.44, 0.985) 0s, opacity 0.2s cubic-bezier(0.26, 0.86, 0.44, 0.985) 0.3s;
transition: transform 0.7s cubic-bezier(0.26, 0.86, 0.44, 0.985) 0s, opacity 0.2s cubic-bezier(0.26, 0.86, 0.44, 0.985) 0.3s;
}
.no-touch.cssanimations .services-section-item:hover .services-section-item-icon {
opacity: 0;
-webkit-transform: rotate3d(1, 0, 0, 80deg) translate3d(0, -50px, 50px);
transform: rotate3d(1, 0, 0, 80deg) translate3d(0, -50px, 50px);
-webkit-transition: -webkit-transform 0.7s cubic-bezier(0.26, 0.86, 0.44, 0.985) 0s, opacity 0.3s cubic-bezier(0.26, 0.86, 0.44, 0.985) 0.2s;
transition: transform 0.7s cubic-bezier(0.26, 0.86, 0.44, 0.985) 0s, opacity 0.3s cubic-bezier(0.26, 0.86, 0.44, 0.985) 0.2s;
}
.no-touch.cssanimations .services-section-item:hover .services-item-title {
-webkit-transform: translate3d(0, -75px, 0);
transform: translate3d(0, -75px, 0);
}
.no-touch.cssanimations .services-section-item:hover .services-section-item-text {
opacity: 1;
-webkit-transform: translate3d(0, -70px, 0);
transform: translate3d(0, -70px, 0);
-webkit-transition: -webkit-transform 0.7s cubic-bezier(0.26, 0.86, 0.44, 0.985) 0s, opacity 0.3s cubic-bezier(0.26, 0.86, 0.44, 0.985) 0s;
transition: transform 0.7s cubic-bezier(0.26, 0.86, 0.44, 0.985) 0s, opacity 0.3s cubic-bezier(0.26, 0.86, 0.44, 0.985) 0s;
}
/* testimonials */
.blog-post-preview-img {
opacity: .9;
-webkit-transition: opacity .27s;
transition: opacity .27s;
}
.blog-post-preview:hover .blog-post-preview-img {
opacity: 1;
}
/* map*/
.map-mask {
-webkit-transition: background 0.16s ease-in, height 0.4s cubic-bezier(0.57, 1.27, 0.85, 1.13) 0.2s;
transition: background 0.16s ease-in, height 0.4s cubic-bezier(0.57, 1.27, 0.85, 1.13) 0.2s;
}
#map-zoom-in,
#map-zoom-out {
margin-left: 50px;
}
#map-zoom-in {
margin-top: 228px;
}
/* go top pop up*/
.rectangle,
.square,
.circle1,
.circle2 {
-webkit-transition: -webkit-transform 0.6s cubic-bezier(0.565, 0.375, 0.43, 1.475) 0.3s;
transition: transform 0.6s cubic-bezier(0.565, 0.375, 0.43, 1.475) 0.3s;
}
/* page header */
.page-header .breadcrumb {
text-align: right;
}
.page-header .page-header-title-left {
text-align: left;
}
.navbar-nav-elastic {
margin-top: 100px;
}
/* blog*/
.blog-item {
margin-bottom: 180px;
}
.blog-media {
height: 300px;
}
.blog-comment-section .btn {
margin-left: 0;
}
/* Works */
.prev-proj:hover,
.next-proj:hover {
letter-spacing: 4px;
}
.all-works i {
display: inline-block !important;
-webkit-transform: translate3d(37px, 0, 0) rotateZ(-90deg);
transform: translate3d(37px, 0, 0) rotateZ(-90deg);
-webkit-transition: -webkit-transform 0.6s cubic-bezier(0.08, 0.96, 0.62, 1.49);
transition: transform 0.6s cubic-bezier(0.08, 0.96, 0.62, 1.49);
}
.all-works span {
opacity: 0;
-webkit-transition: opacity 0.2s ease-out 0s;
transition: opacity 0.2s ease-out 0s;
}
.all-works:hover i,
.all-works:focus i {
-webkit-transform: translate3d(0, 0, 0) rotateZ(0deg);
transform: translate3d(0, 0, 0) rotateZ(0deg);
}
.all-works:hover span,
.all-works:focus span {
opacity: 1;
-webkit-transition: opacity 0.2s cubic-bezier(0.08, 0.96, 0.62, 1.49) 0.6s;
transition: opacity 0.2s cubic-bezier(0.08, 0.96, 0.62, 1.49) 0.6s;
}
}
/*
max-width: 480px
-------------------------
*/
@media (max-width: 480px) {
.team-item-social {
padding: 10px 0;
}
.team-item-social li {
margin: 0 5px;
}
}
@media (min-width: 992px) {
.hs-text-2 {
font-size: 90px;
line-height: 1.3;
}
.hs-text-9 {
font-size: 90px;
line-height: 1.8;
}
.hs-text-11 {
font-size: 96px;
line-height: 1;
}
.hs-text-12 {
font-size: 54px;
line-height: 1.2;
}
.hs-content-inner {
padding: 0 110px;
}
.text-mask {
font-size: 72px !important;
}
.line-process-mood .owl-dot {
height: 120px;
width: 240px;
-webkit-transform: translateX(-120px) translateY(-90px);
-ms-transform: translateX(-120px) translateY(-90px);
transform: translateX(-120px) translateY(-90px);
}
.line-process-mood .owl-dot span {
-webkit-transform: translateX(120px) translateY(90px);
-ms-transform: translateX(120px) translateY(90px);
transform: translateX(120px) translateY(90px);
}
}
@media (min-width: 1200px) {
.hs-content-inner {
padding: 0 180px;
}
.hs-text-10 {
font-size: 100px;
}
}
/*
Blended
-------------------------
*/
@media screen and (min-height: 375px) {
.navbar-fixed-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
max-height: 380px;
}
}
.team-section {
padding-bottom: 40px;
}
@media (min-width: 768px) {
.team-section {
padding-bottom: 80px;
}
}
@media (min-width: 992px) {
.team-section {
padding-bottom: 120px;
}
}
@media (min-width: 1200px) {
.team-section {
padding-bottom: 150px;
}
}
@media (min-width: 668px) and (max-width: 767px) {
.team-carousel .team-item-info {
padding: 90px 40px 0 40px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.team-carousel .team-item-info {
padding: 50px 30px 0 30px;
}
}
@media (min-width: 992px) {
.team-carousel .team-item-info {
padding: 40px 80px 0 80px;
}
}
@media (min-width: 992px) {
#team-carousel-3 .team-item-info {
padding: 40px 20px 0 20px;
}
#team-carousel-3 .owl-item img {
display: inline-block;
width: auto;
height: 350px;
margin: 20px 0;
}
}
.services-section {
padding-bottom: 0;
}
@media (min-width: 768px) {
.services-section {
padding-bottom: 0px;
}
}
@media (min-width: 992px) {
.services-section {
padding-bottom: 10px;
}
}
@media (min-width: 1200px) {
.services-section {
padding-bottom: 50px;
}
}
@media (min-width: 992px) {
.client-logos .container {
padding-right: 55px;
padding-left: 45px;
}
}
@media (min-width: 1200px) {
.client-logos .container {
padding-right: 85px;
padding-left: 75px;
}
}
/*
========================================
Animation & Transition Delay Classes
========================================
*/
.delay0-05s {
-webkit-animation-delay: .05s;
animation-delay: .05s;
-webkit-transition-delay: .05s;
transition-delay: .05s;
}
.delay0-1s {
-webkit-animation-delay: .1s;
animation-delay: .1s;
-webkit-transition-delay: .1s;
transition-delay: .1s;
}
.delay0-2s {
-webkit-animation-delay: .2s;
animation-delay: .2s;
-webkit-transition-delay: .2s;
transition-delay: .2s;
}
.delay0-15s {
-webkit-animation-delay: .15s;
animation-delay: .15s;
-webkit-transition-delay: .15s;
transition-delay: .15s;
}
.delay0-3s {
-webkit-animation-delay: .3s;
animation-delay: .3s;
-webkit-transition-delay: .3s;
transition-delay: .3s;
}
.delay0-4s {
-webkit-animation-delay: .4s;
animation-delay: .4s;
-webkit-transition-delay: .4s;
transition-delay: .4s;
}
.delay0-5s {
-webkit-animation-delay: .5s;
animation-delay: .5s;
-webkit-transition-delay: .5s;
transition-delay: .5s;
}
.delay0-6s {
-webkit-animation-delay: .6s;
animation-delay: .6s;
-webkit-transition-delay: .6s;
transition-delay: .6s;
}
.delay0-7s {
-webkit-animation-delay: .7s;
animation-delay: .7s;
-webkit-transition-delay: .7s;
transition-delay: .7s;
}
.delay0-8s {
-webkit-animation-delay: .8s;
animation-delay: .8s;
-webkit-transition-delay: .8s;
transition-delay: .8s;
}
.delay0-9s {
-webkit-animation-delay: .9s;
animation-delay: .9s;
-webkit-transition-delay: .9s;
transition-delay: .9s;
}
.delay1-0s {
-webkit-animation-delay: 1s;
animation-delay: 1s;
-webkit-transition-delay: 1s;
transition-delay: 1s;
}
.delay1-1s {
-webkit-animation-delay: 1.1s;
animation-delay: 1.1s;
-webkit-transition-delay: 1.1s;
transition-delay: 1.1s;
}
.delay1-2s {
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
-webkit-transition-delay: 1.2s;
transition-delay: 1.2s;
}
.delay1-3s {
-webkit-animation-delay: 1.3s;
animation-delay: 1.3s;
-webkit-transition-delay: 1.3s;
transition-delay: 1.3s;
}
.delay1-4s {
-webkit-animation-delay: 1.4s;
animation-delay: 1.4s;
-webkit-transition-delay: 1.4s;
transition-delay: 1.4s;
}
.delay1-5s {
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
-webkit-transition-delay: 1.5s;
transition-delay: 1.5s;
}
.delay1-6s {
-webkit-animation-delay: 1.6s;
animation-delay: 1.6s;
-webkit-transition-delay: 1.6s;
transition-delay: 1.6s;
}
.delay1-7s {
-webkit-animation-delay: 1.7s;
animation-delay: 1.7s;
-webkit-transition-delay: 1.7s;
transition-delay: 1.7s;
}
.delay1-8s {
-webkit-animation-delay: 1.8s;
animation-delay: 1.8s;
-webkit-transition-delay: 1.8s;
transition-delay: 1.8s;
}
.delay1-9s {
-webkit-animation-delay: 1.9s;
animation-delay: 1.9s;
-webkit-transition-delay: 1.9s;
transition-delay: 1.9s;
}
.delay2s {
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-transition-delay: 2s;
transition-delay: 2s;
}
.delay2-5s {
-webkit-animation-delay: 2.5s;
animation-delay: 2.5s;
-webkit-transition-delay: 2.5s;
transition-delay: 2.5s;
}
.delay3s {
-webkit-animation-delay: 3s;
animation-delay: 3s;
-webkit-transition-delay: 3s;
transition-delay: 3s;
}
.delay3-5s {
-webkit-animation-delay: 3.5s;
animation-delay: 3.5s;
-webkit-transition-delay: 3.5s;
transition-delay: 3.5s;
}
.delay4s {
-webkit-animation-delay: 4s;
animation-delay: 4s;
-webkit-transition-delay: 4s;
transition-delay: 4s;
}
.delay4-5s {
-webkit-animation-delay: 4.5s;
animation-delay: 4.5s;
-webkit-transition-delay: 4.5s;
transition-delay: 4.5s;
}
.delay5s {
-webkit-animation-delay: 5s;
animation-delay: 5s;
-webkit-transition-delay: 5s;
transition-delay: 5s;
}
.delay5-5s {
-webkit-animation-delay: 5.5s;
animation-delay: 5.5s;
-webkit-transition-delay: 5.5s;
transition-delay: 5.5s;
}
.delay6s {
-webkit-animation-delay: 6s;
animation-delay: 6s;
-webkit-transition-delay: 6s;
transition-delay: 6s;
}
.delay6-5s {
-webkit-animation-delay: 6.5s;
animation-delay: 6.5s;
-webkit-transition-delay: 6.5s;
transition-delay: 6.5s;
}
.slide-out {
-webkit-animation-delay: 0s !important;
animation-delay: 0s !important;
}
#about-section {
    height: 100%;
    position: relative;
    width: 100%;
    top: 0;
    left: 0;
    padding: 100px 0px;
    padding-bottom: 0px; 
    background-size: cover;
    background-position: 0% 0%;
}
#about-section::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.9);
    top: 70px;
    left: 0;
    z-index: -1;
    background-image: url(../img/conback.png);    opacity: 0.9;
}
#style-changer .available-pointer {
    background: #41c4c8 none repeat scroll 0 0;
    position: relative;
    display: inline-block;
    float: left;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    margin-right: 32px;
    margin-top: 7px;
    border-radius: 50%;
    float: left;
    -webkit-animation-name: flash;
    animation-name: flash;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    content: ' ';
}
#style-changer .available-pointer:before {
    background-color: #41c4c8;
    content: ' ';
    position: absolute;
    top: -8px;
    left: -8px;
    display: inline-block;
    width: 30px;
    height: 30px;
    opacity: 0.2;
    border-radius: 50%;
}
#process-section{background: url(../img/process.gif) no-repeat;
    background-size: 16%;
background-position: center top;}#services-section{background: url(../img/creative-services.png) no-repeat;    background-size: 11%;background-position: center 40px;}
#packages-section{background: url(../img/webdesign-packages.gif) no-repeat;
    background-size: 8%;
background-position: center 40px;    background-color: #fff;    padding-bottom: 1%;}#packages-section .section-title {    padding-bottom: 20px;}.shadow3 {    background: url(../img/shadow3.png) no-repeat top center;    height: 60px;    margin-bottom: -60px;}/* packages */ .pricing {  @include translate(-49%, -49.1%);  position: absolute;  left: 50%;  top: 50%;  width: 100%;  font-size: 0;  opacity: 1;  transition: opacity .2s ease;}.price-option {  display: inline-block;  /*width: 6.25em;*/  vertical-align: middle;  margin-bottom: 1.3125em;  font-size: 16px;  opacity: 1;  transition: opacity .2s ease;} .pricing:hover .price-option { opacity: 0.6; }.pricing:hover .price-option:hover { opacity: 1; }.price-option__detail {  padding: 2em 0;  background: white;  text-align: center;}.price-option--low .price-option__detail  { border-radius: .25em .25em 0 0; }.price-option--mid .price-option__detail  { border-radius: .25em .25em 0 0; }.price-option--high .price-option__detail { border-radius: .25em .25em 0 0; }.price-option__cost,.price-option__type {  display: block;}.price-option__cost {  font-size: 1.5em;  color: #383838;font-weight: bold;}.price-option__type {  font-size: .7em;  text-transform: uppercase;  color: #545151;}a.price-option__purchase:hover{color:#fff}.price-option__purchase {  position: relative;  display: block;  padding: .6em;  font-size: .875em;  font-weight: bold;  text-align: center;  text-transform: uppercase;  text-decoration: none;  color: rgba(0,0,0,0.6);}.c1 .price-option__purchase  { background: #ffcdd2; border-radius: 0 0 .25em .25em; }.c2 .price-option__purchase  { background: #e1bee7; border-radius: 0 0 .25em .25em; }.c3 .price-option__purchase { background: #f8bbd0; border-radius: 0 0 .25em .25em; }.c4 .price-option__purchase { background: #d1c4e9; border-radius: 0 0 .25em .25em; }.c5 .price-option__purchase  { background: #bbdefb; border-radius: 0 0 .25em .25em; }.c6 .price-option__purchase  { background: #b3e5fc; border-radius: 0 0 .25em .25em; }.c7 .price-option__purchase { background: #b2dfdb; border-radius: 0 0 .25em .25em; }.c8 .price-option__purchase { background: #dcedc8; border-radius: 0 0 .25em .25em; }.c9 .price-option__purchase  { background: #f0f4c3; border-radius: 0 0 .25em .25em; }.c10 .price-option__purchase  { background: #fff9c4; border-radius: 0 0 .25em .25em; }.c11 .price-option__purchase { background: #ffe0b2; border-radius: 0 0 .25em .25em; }.c12 .price-option__purchase { background: #ffccbc; border-radius: 0 0 .25em .25em; }.c13 .price-option__purchase  { background: #d7ccc8; border-radius: 0 0 .25em .25em; }.c14 .price-option__purchase  { background: #b1bace; border-radius: 0 0 .25em .25em; }.c15 .price-option__purchase { background: #d7ccc8; border-radius: 0 0 .25em .25em; }.c16 .price-option__purchase { background: #b1bace ; border-radius: 0 0 .25em .25em; }.price-option__purchase:before {  content: '';  position: absolute;  bottom: 100%;  left: 50%;  display: block;  width: 0;  height: 0;  margin-left: -5px;  border-width: 0 5px 5px;  border-style: solid;} .c1 .price-option__purchase:before  {border-color: transparent transparent #ffcdd2;}.c2 .price-option__purchase:before  {border-color: transparent transparent #e1bee7;}.c3 .price-option__purchase:before {border-color: transparent transparent #f8bbd0;}.c4 .price-option__purchase:before {border-color: transparent transparent #d1c4e9;}.c5 .price-option__purchase:before  {border-color: transparent transparent #bbdefb;}.c6 .price-option__purchase:before  {border-color: transparent transparent #b3e5fc;}.c7 .price-option__purchase:before {border-color: transparent transparent #b2dfdb;}.c8 .price-option__purchase:before {border-color: transparent transparent #dcedc8;}.c9 .price-option__purchase:before  {border-color: transparent transparent #f0f4c3;}.c10 .price-option__purchase:before  {border-color: transparent transparent #fff9c4;}.c11 .price-option__purchase:before {border-color: transparent transparent #ffe0b2;}.c12 .price-option__purchase:before {border-color: transparent transparent #ffccbc;}.c13 .price-option__purchase:before  {border-color: transparent transparent #d7ccc8;}.c14 .price-option__purchase:before  {border-color: transparent transparent #b1bace;}.c15 .price-option__purchase:before {border-color: transparent transparent #d7ccc8;}.c16 .price-option__purchase:before {border-color: transparent transparent #b1bace ;}