/******************************************************************
Theme Name: Sparrow Site Template
Description: Premium Multipurpose Site Template
Author: Muhammad Morshed
Author URI: http://pixelcoder.net
Version: 1.0
Last Update: 02/05/2016 -- Added New Home
******************************************************************/
/*
[Table of contents]
1. Common Styles
2. #preloader
3. .site-header
4. .site-banner
5. #team
6. #works
7. #services
8. #pricing
9. #twitter-feed
10. #blog
11. #client
12. #contact
12.1 .address
12.2 .contact-form
13. .footer
13.1 .copyright
13.2 .credits
------------------------------------------------------------------
[Color codes]
Background: #eee (gray)
Primary: #e6ae03 (light golden)
Content: #000 (light ash)
a (standard): #777 (light ash)
a (hover) : #e6ae03 (light golden)
-----------------------------------------------------------------------
[Typography]
Body : Raleway', sans-serif; 14px/26px
Ubuntu, sans-serif;
Oswald, sans-serif;
Poiret One, cursive;
Tulpen One, cursive;
title : hipstelveticalight";
-----------------------------------------------------------------------*/
/*==============================================
Variables
===============================================*/
/*==============================================
Mixins
===============================================*/
@font-face {
font-family: 'bebas_neuelight';
src: url('../fonts/bebas/bebasneue_light-webfont.eot');
src: url('../fonts/bebas/bebasneue_light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/bebas/bebasneue_light-webfont.woff2') format('woff2'), url('../fonts/bebas/bebasneue_light-webfont.woff') format('woff'), url('../fonts/bebas/bebasneue_light-webfont.ttf') format('truetype'), url('../fonts/bebas/bebasneue_light-webfont.svg#bebas_neuelight') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'bebas_neue_r';
src: url('../fonts/bebas/bebasneue_regular-webfont.eot');
src: url('../fonts/bebas/bebasneue_regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/bebas/bebasneue_regular-webfont.woff2') format('woff2'), url('../fonts/bebas/bebasneue_regular-webfont.woff') format('woff'), url('../fonts/bebas/bebasneue_regular-webfont.ttf') format('truetype'), url('../fonts/bebas/bebasneue_regular-webfont.svg#bebas_neue_r') format('svg');
font-weight: normal;
font-style: normal;
}
/*==============================================
Basic Style
===============================================*/
::-moz-selection {
/* Code for Firefox */
background-color: #e6ae03;
color: #fff;
}
::selection {
background-color: #e6ae03;
color: #fff;
}
body {
background-color: #ffffff;
font-family: "Roboto", sans-serif;
line-height: 26px;
font-size: 14px;
color: #000000;
font-weight: 300;
}
body.home:after {
background-color: #dddddd;
z-index: 0;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
height: 750px;
}
a {
color: #e6ae03;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
p {
margin-bottom: 20px;
}
iframe {
border: 0;
width: 100%;
}
a,
a:focus,
a:hover,
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn.focus:active,
.btn:active:focus,
.btn:focus {
box-shadow: none;
text-decoration: none;
outline: 0 none;
}
a:focus,
a:hover {
color: #e6ae03;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
margin: 0;
}
abbr[title] {
font-style: italic;
}
abbr[title] a {
color: ;
}
blockquote {
border-left-color: #e6ae03;
border-left-width: 3px;
font-style: italic;
line-height: 30px;
margin-left: 20px;
padding-bottom: 12px;
padding-top: 6px;
}
.list-none {
margin: 0;
padding: 0;
list-style: none;
}
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clear {
*zoom: 1;
}
.clear:before,
.clear:after {
content: " ";
display: table;
}
.clear:after {
clear: both;
}
/**
* Remove box-shadow
* and border radious from i device
**/
input,
textarea {
-webkit-appearance: none;
border-radius: 0;
}
/**
* Remove outline
* when focus on webkit browser
**/
input:focus,
button:focus,
textarea:focus {
outline: 0 none;
}
input[type="checkbox"] {
-webkit-appearance: checkbox;
}
input[type="radio"] {
-webkit-appearance: radio;
}
/**
* Reset input fields
* opacity and color
*
**/
::-webkit-input-placeholder {
opacity: 1;
color: inherit;
}
:-moz-placeholder {
/* Firefox 18- */
opacity: 1;
color: inherit;
}
::-moz-placeholder {
/* Firefox 19+ */
opacity: 1;
color: inherit;
}
:-ms-input-placeholder {
opacity: 1;
color: inherit;
}
.w100 {
width: 100%;
}
.display-table {
display: table;
vertical-align: middle;
width: 100%;
}
.tablecell {
display: table-cell;
vertical-align: middle;
}
.no-gutter {
margin-left: 0;
margin-right: 0;
}
.no-gutter > [class^="col-"] {
padding-left: 0;
padding-right: 0;
}
.section {
padding-top: 62.5px;
padding-bottom: 62.5px;
}
.section-full {
padding-top: 50px;
padding-bottom: 0px;
}
.top-only {
padding-top: 62.5px;
}
.bottom-only {
padding-bottom: 62.5px;
}
.top-full {
padding-top: 125px;
}
.bottom-full {
padding-bottom: 125px;
}
.no-padding-top {
padding-top: 0 !important;
}
.no-padding-bottom {
padding-bottom: 0 !important;
}
.killLast30 {
margin-bottom: -30px;
}
.left {
float: left;
}
.right {
float: right;
}
header,
section {
position: relative;
z-index: 2;
}
.raleway {
font-family: "Raleway", sans-serif;
}
.opensans {
font-family: "Open Sans", sans-serif;
}
.greatvibes {
font-family: "Great Vibes", cursive;
}
.text-dark {
color: #333333;
}
.section-head {
position: relative;
text-align: center;
}
.section-head.text-left {
text-align: left;
}
.section-head.text-left .separator {
margin-left: 0;
}
.section-head h2 {
color: #000000;
font-size: 35px;
font-weight: 900;
margin-bottom: 32px;
text-transform: uppercase;
}
.section-head.white h2,
.section-head.white p {
color: #ffffff;
}
.section-head .separator {
background-color: #c90119;
display: block;
height: 2px;
margin: 0 auto 44px;
width: 90px;
}
.section-head p {
border-bottom: 1px solid #d3d3d1;
font-weight: bold 100;
color: #000000;
font-size: 20px;
line-height: 28px;
margin-bottom: 20px;
padding-bottom: 37px;
}
.section-head.no-border p {
border-bottom: 0;
}
.section-head.style2 {
font-family: "Poiret One", cursive;
}
.section-head.style2 h2 {
font-size: 36px;
font-weight: 400;
text-transform: none;
}
.section-head.style3 {
font-family: "Raleway", sans-serif;
margin-bottom: 80px;
}
.section-head.style3 h2 {
font-size: 24px;
font-weight: 300;
text-transform: none;
}
.section-head.style4 {
font-family: "Raleway", sans-serif;
}
.section-head.style4 h2 {
font-size: 36px;
font-weight: 800;
margin-bottom: 24px;
}
.section-head.style4 p {
font-size: 14px;
font-weight: 300;
}
.section-head.style5 {
font-family: "Raleway", sans-serif;
}
.section-head.style5 h2 {
border-bottom: 1px solid;
border-top: 1px solid;
display: inline-block;
font-size: 36px;
font-weight: 400;
padding: 10px 0;
}
.section-head.style5 p {
font-size: 14px;
font-weight: 300;
}
.section-head.style6 .separator {
width: 150px;
height: 3px;
}
.section-head.style6 h2 {
color: #ffffff;
font-family: "Raleway", sans-serif;
font-size: 40px;
font-weight: 100;
}
.section-head.style6 h2 strong {
font-family: "Open Sans", sans-serif;
font-weight: 700;
}
.section-head.style6 p {
color: #ffffff;
font-family: "Open Sans", sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 30px;
}
.section-head.style7 span {
color: #333333;
font-family: "Open Sans", sans-serif;
font-weight: 600;
font-size: 24px;
letter-spacing: 3px;
text-transform: uppercase;
}
.section-head.style7 h2 {
color: #e6ae03;
font-family: "Merriweather", serif;
font-size: 42px;
font-weight: 700;
line-height: 50px;
margin-bottom: 15px;
text-transform: uppercase;
}
.section-head.style7 p {
color: #888;
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 30px;
letter-spacing: 2px;
}
.section-head.style8 .separator {
background-color: #e6ae03;
width: 150px;
height: 3px;
}
.section-head.style8 h2 {
color: #000;
font-family: "Raleway", sans-serif;
font-weight: 100;
font-size: 42px;
}
.section-head.style8 h2 b {
color: #e6ae03;
font-weight: 700;
}
.section-head.style8 p {
color: rgba(0, 0, 0, 0.54);
font-family: "Open Sans", sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 30px;
}
.section-head.style8 h4 {
font-family: "Open Sans", sans-serif;
font-size: 20px;
line-height: 30px;
margin-bottom: 7px;
}
.sub-heading {
position: relative;
padding-left: 30px;
}
.sub-heading:before {
background-color: #e1e1e1;
content: "";
height: 100%;
left: -16px;
position: absolute;
top: 0;
width: 2px;
}
.section-title {
color: #ffffff;
position: relative;
padding-bottom: 30px;
margin-bottom: 60px;
}
.section-title:before {
background-color: #959595;
bottom: 0;
content: "";
height: 3px;
left: 50%;
margin-left: -35px;
position: absolute;
width: 70px;
}
.section-title h2 {
font-family: hipstelveticaultralight;
font-size: 60px;
margin-bottom: 10px;
text-transform: uppercase;
}
.right-border {
border-right: 1px solid #e5e5e5;
}
.right-border:last-child {
border-right: 0 none;
}
/*
* Button Animation
*
*/
.btn-anim-left {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: relative;
z-index: 0;
-webkit-transform: translateZ(0px);
-moz-transform: translateZ(0px);
-ms-transform: translateZ(0px);
-o-transform: translateZ(0px);
transform: translateZ(0px);
}
.btn-anim-left::before {
content: "";
bottom: 0;
left: 0;
position: absolute;
top: 0;
z-index: -1;
right: 0;
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-o-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left center 0;
-moz-transform-origin: left center 0;
-ms-transform-origin: left center 0;
-o-transform-origin: left center 0;
transform-origin: left center 0;
-webkit-transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1) 0s;
-moz-transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1) 0s;
-ms-transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1) 0s;
-o-transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1) 0s;
}
.btn-anim-left:hover:before {
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
-o-transform: scaleX(1);
transform: scaleX(1);
}
/*
* Buttons
*/
.btn.no-radius {
border-radius: 0;
}
.icon-btn {
color: #ffffff;
display: inline-block;
}
.icon-btn:hover {
color: #ffffff;
}
.icon-btn:hover i {
background-color: #e6ae03;
}
.icon-btn:hover span {
background-color: #1c1c1c;
}
.icon-btn i {
background-color: #373737;
float: left;
font-size: 38px;
height: 60px;
line-height: 60px;
text-align: center;
width: 60px;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.icon-btn span {
background-color: #666666;
display: inline-block;
font-size: 20px;
font-weight: 300;
line-height: 60px;
min-height: 60px;
min-width: 158px;
text-align: center;
text-transform: uppercase;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.btn-dark {
background-color: #353535;
border-radius: 0;
color: #fff;
font-size: 12px;
font-weight: 700;
height: 40px;
letter-spacing: 2px;
line-height: 40px;
padding: 0;
text-transform: uppercase;
}
.btn-dark:hover {
color: #e6ae03;
}
.btn-dark-border {
border: 1px solid;
border-radius: 3px;
color: #333333;
height: 40px;
line-height: 39px;
padding: 0 25px;
text-transform: uppercase;
}
.btn-dark-border:hover,
.btn-dark-border:focus {
background-color: #e6ae03;
border-color: #e6ae03;
color: #fff;
}
.btn-white-border {
border: 1px solid #fff;
color: #fff;
font-size: 14px;
height: 45px;
line-height: 45px;
padding: 0 25px;
text-transform: uppercase;
}
.btn-white-border.btn-lg {
border-width: 2px;
font-size: 16px;
font-weight: 700;
height: 60px;
line-height: 60px;
padding: 0 43px;
}
.btn-white-border.btn-md {
border-color: rgba(255, 255, 255, 0.5);
border-radius: 0;
font-size: 18px;
font-weight: 700;
height: 66px;
line-height: 66px;
padding: 0 50px;
}
.btn-white-border.btn-md:hover,
.btn-white-border.btn-md:focus {
background-color: rgba(0, 0, 0, 0.1);
border-color: transparent;
color: #fff;
}
.btn-white-border:before {
background-color: #fff;
}
.btn-white-border:hover {
color: #333;
}
.btn-white-fade {
background-color: rgba(255, 255, 255, 0.25);
color: #fff;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.4px;
padding-bottom: 13px;
padding-top: 13px;
}
.btn-white-fade:hover {
background-color: #fff;
}
.btn-white-bg {
background-color: #fff;
color: #333;
}
.btn-fullwidth {
width: 100%;
}
.alignleft {
float: left;
margin: 11px 20px 0 0;
}
.alignright {
float: right;
margin: 11px 0 0 20px;
}
.aligncenter {
float: none;
margin: 20px 0;
}
.wp-caption-text {
color: #b2b2b1;
margin: 15px 15px 0;
}
.quote-half {
width: 50%;
}
.quote-left {
float: left;
}
.quote-right {
float: right;
}
.relative {
position: relative;
}
.inlineb {
display: inline-block;
}
.overflow-h,
.overflow-hidden {
overflow: hidden;
}
.parallax {
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.parallax .overlay {
background-color: rgba(51, 51, 51, 0.7);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
.cover {
background-repeat: no-repeat;
background-size: cover;
}
.center-center {
background-position: center center;
}
/* Icon Drop */
@-webkit-keyframes hvr-icon-drop {
0% {
opacity: 0;
}
50% {
opacity: 0;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
51%,
100% {
opacity: 1;
}
}
@keyframes hvr-icon-drop {
0% {
opacity: 0;
}
50% {
opacity: 0;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
51%,
100% {
opacity: 1;
}
}
.hvr-icon-drop i:before {
position: absolute;
left: 50%;
top: 50%;
opacity: 1;
-webkit-transform: translate3d(-50%, -50%, 0px);
-moz-transform: translate3d(-50%, -50%, 0px);
-ms-transform: translate3d(-50%, -50%, 0px);
-o-transform: translate3d(-50%, -50%, 0px);
transform: translate3d(-50%, -50%, 0px);
}
.hvr-icon-drop:hover i:before,
.hvr-icon-drop:focus i:before,
.hvr-icon-drop:active i:before {
opacity: 0;
-webkit-animation: hvr-icon-drop 0.3s cubic-bezier(0.52, 1.64, 0.37, 0.66) 0.3s forwards;
-moz-animation: hvr-icon-drop 0.3s cubic-bezier(0.52, 1.64, 0.37, 0.66) 0.3s forwards;
animation: hvr-icon-drop 0.3s cubic-bezier(0.52, 1.64, 0.37, 0.66) 0.3s forwards;
}
/* =================================== */
/* Color Switcher
/* =================================== */
.preview-wrapper {
background-color: #fff;
border: 1px solid #ddd;
border-right: 0;
color: #333;
height: 100%;
right: 0px;
position: fixed;
top: 0;
width: 260px;
z-index: 1200;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
.preview-wrapper.extend {
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}
.switcher-head {
color: #333;
font-size: 18px;
font-weight: 600;
height: 46px;
line-height: 46px;
position: relative;
}
.switcher-head span {
border-bottom: 2px solid #eeeeee;
display: block;
margin: 0 20px;
}
.switcher-trigger {
background-color: #fff;
border: 1px solid #ddd;
border-right: 0;
cursor: pointer;
font-size: 20px;
height: 48px;
left: -48px;
line-height: 46px;
position: absolute;
text-align: center;
top: 120px;
width: 48px;
}
.switcher-body {
background-color: #fff;
height: -webkit-calc(100% - 50px);
height: calc(100% - 50px);
left: 0;
padding: 20px;
position: fixed;
right: 0;
top: 47px;
outline: none;
}
.switcher-body h4 {
font-size: 16px;
margin-bottom: 10px;
}
.switcher-body select {
border: 1px solid #e5e5e5;
height: 40px;
margin-bottom: 20px;
width: 100%;
-webklit--appearance: none;
-moz-appearance: none;
appearance: none;
}
.color-options {
margin-bottom: 10px;
}
.color-options li {
display: inline-block;
background-color: #e6ae03;
height: 30px;
margin-bottom: 10px;
margin-right: 6px;
text-indent: -9999em;
width: 30px;
cursor: pointer;
}
.color-options li.c1 {
background-color: #4682b4;
}
.color-options li.c2 {
background-color: #66cdaa;
}
.color-options li.c3 {
background-color: #ff6347;
}
.color-options li.c4 {
background-color: #ffd600;
}
.color-options li.c5 {
background-color: #a0ce4e;
}
.color-options li.c6 {
background-color: #e9967a;
}
.color-options li.c7 {
background-color: #1abc9c;
}
.color-options li.c8 {
background-color: #9b59b6;
}
.color-options li.c9 {
background-color: #34495e;
}
.color-options li.c10 {
background-color: #e67e22;
}
.color-options li.c11 {
background-color: #c0392b;
}
.color-options li.c12 {
background-color: #336E7B;
}
.color-options li.c13 {
background-color: #3A539B;
}
.color-options li.c14 {
background-color: #019875;
}
.pattern-options li {
font-family: "Roboto", sans-serif;
border: 1px solid #cccccc;
cursor: pointer;
float: left;
height: 40px;
margin: 0 10px 10px 0;
text-transform: capitalize;
width: 50px;
}
.pattern-options li:last-child {
border: 0 none;
height: auto;
padding-top: 8px;
width: auto;
}
.pattern-options li img {
width: 100%;
height: 100%;
}
/*==============================================
Preloader
===============================================*/
#preloader {
background-color: #fff;
height: 100%;
position: fixed;
width: 100%;
z-index: 2000;
}
#global {
cursor: pointer;
height: 60px;
left: 50%;
margin: -30px 0 0 -35px;
position: absolute;
top: 50%;
width: 70px;
}
.mask {
position: absolute;
border-radius: 2px;
overflow: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
perspective: 1000;
}
.plane {
background-color: #e6ae03;
width: 400%;
height: 100%;
z-index: 100;
position: absolute;
-webkit-transform: translate3d(0px, 0, 0);
-moz-transform: translate3d(0px, 0, 0);
-ms-transform: translate3d(0px, 0, 0);
-o-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
perspective: 1000;
}
.animation {
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
#first .plane {
z-index: 2000;
-webkit-animation: trans1 1.3s ease-in infinite 0s backwards;
-moz-animation: trans1 1.3s ease-in infinite 0s backwards;
animation: trans1 1.3s ease-in infinite 0s backwards;
}
#middle .plane {
background-color: #e6ae03;
-webkit-transform: translate3d(0px, 0, 0);
-moz-transform: translate3d(0px, 0, 0);
-ms-transform: translate3d(0px, 0, 0);
-o-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
-webkit-animation: trans2 1.3s linear infinite 0.3s backwards;
-moz-animation: trans2 1.3s linear infinite 0.3s backwards;
animation: trans2 1.3s linear infinite 0.3s backwards;
}
#bottom .plane {
z-index: 2000;
-webkit-animation: trans3 1.3s ease-out infinite 0.7s backwards;
-moz-animation: trans3 1.3s ease-out infinite 0.7s backwards;
animation: trans3 1.3s ease-out infinite 0.7s backwards;
}
#first {
width: 53px;
height: 20px;
left: 20px;
z-index: 100;
-webkit-transform: skew(-15deg, 0);
-moz-transform: skew(-15deg, 0);
-ms-transform: skew(-15deg, 0);
-o-transform: skew(-15deg, 0);
transform: skew(-15deg, 0);
}
#middle {
width: 33px;
height: 20px;
left: 20px;
top: 15px;
-webkit-transform: skew(-15deg, 40deg);
-moz-transform: skew(-15deg, 40deg);
-ms-transform: skew(-15deg, 40deg);
-o-transform: skew(-15deg, 40deg);
transform: skew(-15deg, 40deg);
}
#bottom {
width: 53px;
height: 20px;
top: 30px;
-webkit-transform: skew(-15deg, 0);
-moz-transform: skew(-15deg, 0);
-ms-transform: skew(-15deg, 0);
-o-transform: skew(-15deg, 0);
transform: skew(-15deg, 0);
}
#global p {
left: -3px;
position: absolute;
text-transform: capitalize;
top: 55px;
}
@-webkit-keyframes trans1 {
from {
-webkit-transform: translate3d(53px, 0, 0);
-moz-transform: translate3d(53px, 0, 0);
-ms-transform: translate3d(53px, 0, 0);
-o-transform: translate3d(53px, 0, 0);
transform: translate3d(53px, 0, 0);
}
to {
-webkit-transform: translate3d(-250px, 0, 0);
-moz-transform: translate3d(-250px, 0, 0);
-ms-transform: translate3d(-250px, 0, 0);
-o-transform: translate3d(-250px, 0, 0);
transform: translate3d(-250px, 0, 0);
}
}
@-moz-keyframes trans1 {
from {
-webkit-transform: translate3d(53px, 0, 0);
-moz-transform: translate3d(53px, 0, 0);
-ms-transform: translate3d(53px, 0, 0);
-o-transform: translate3d(53px, 0, 0);
transform: translate3d(53px, 0, 0);
}
to {
-webkit-transform: translate3d(-250px, 0, 0);
-moz-transform: translate3d(-250px, 0, 0);
-ms-transform: translate3d(-250px, 0, 0);
-o-transform: translate3d(-250px, 0, 0);
transform: translate3d(-250px, 0, 0);
}
}
@keyframes trans1 {
from {
-webkit-transform: translate3d(53px, 0, 0);
-moz-transform: translate3d(53px, 0, 0);
-ms-transform: translate3d(53px, 0, 0);
-o-transform: translate3d(53px, 0, 0);
transform: translate3d(53px, 0, 0);
}
to {
-webkit-transform: translate3d(-250px, 0, 0);
-moz-transform: translate3d(-250px, 0, 0);
-ms-transform: translate3d(-250px, 0, 0);
-o-transform: translate3d(-250px, 0, 0);
transform: translate3d(-250px, 0, 0);
}
}
@-webkit-keyframes trans2 {
from {
-webkit-transform: translate3d(-160px, 0, 0);
-moz-transform: translate3d(-160px, 0, 0);
-ms-transform: translate3d(-160px, 0, 0);
-o-transform: translate3d(-160px, 0, 0);
transform: translate3d(-160px, 0, 0);
}
to {
-webkit-transform: translate3d(53px, 0, 0);
-moz-transform: translate3d(53px, 0, 0);
-ms-transform: translate3d(53px, 0, 0);
-o-transform: translate3d(53px, 0, 0);
transform: translate3d(53px, 0, 0);
}
}
@-moz-keyframes trans2 {
from {
-webkit-transform: translate3d(-160px, 0, 0);
-moz-transform: translate3d(-160px, 0, 0);
-ms-transform: translate3d(-160px, 0, 0);
-o-transform: translate3d(-160px, 0, 0);
transform: translate3d(-160px, 0, 0);
}
to {
-webkit-transform: translate3d(53px, 0, 0);
-moz-transform: translate3d(53px, 0, 0);
-ms-transform: translate3d(53px, 0, 0);
-o-transform: translate3d(53px, 0, 0);
transform: translate3d(53px, 0, 0);
}
}
@keyframes trans2 {
from {
-webkit-transform: translate3d(-160px, 0, 0);
-moz-transform: translate3d(-160px, 0, 0);
-ms-transform: translate3d(-160px, 0, 0);
-o-transform: translate3d(-160px, 0, 0);
transform: translate3d(-160px, 0, 0);
}
to {
-webkit-transform: translate3d(53px, 0, 0);
-moz-transform: translate3d(53px, 0, 0);
-ms-transform: translate3d(53px, 0, 0);
-o-transform: translate3d(53px, 0, 0);
transform: translate3d(53px, 0, 0);
}
}
@-webkit-keyframes trans3 {
from {
-webkit-transform: translate3d(53px, 0, 0);
-moz-transform: translate3d(53px, 0, 0);
-ms-transform: translate3d(53px, 0, 0);
-o-transform: translate3d(53px, 0, 0);
transform: translate3d(53px, 0, 0);
}
to {
-webkit-transform: translate3d(-220px, 0, 0);
-moz-transform: translate3d(-220px, 0, 0);
-ms-transform: translate3d(-220px, 0, 0);
-o-transform: translate3d(-220px, 0, 0);
transform: translate3d(-220px, 0, 0);
}
}
@-webkit-keyframes trans3 {
from {
-webkit-transform: translate3d(53px, 0, 0);
-moz-transform: translate3d(53px, 0, 0);
-ms-transform: translate3d(53px, 0, 0);
-o-transform: translate3d(53px, 0, 0);
transform: translate3d(53px, 0, 0);
}
to {
-webkit-transform: translate3d(-220px, 0, 0);
-moz-transform: translate3d(-220px, 0, 0);
-ms-transform: translate3d(-220px, 0, 0);
-o-transform: translate3d(-220px, 0, 0);
transform: translate3d(-220px, 0, 0);
}
}
@-moz-keyframes trans3 {
from {
-webkit-transform: translate3d(53px, 0, 0);
-moz-transform: translate3d(53px, 0, 0);
-ms-transform: translate3d(53px, 0, 0);
-o-transform: translate3d(53px, 0, 0);
transform: translate3d(53px, 0, 0);
}
to {
-webkit-transform: translate3d(-220px, 0, 0);
-moz-transform: translate3d(-220px, 0, 0);
-ms-transform: translate3d(-220px, 0, 0);
-o-transform: translate3d(-220px, 0, 0);
transform: translate3d(-220px, 0, 0);
}
}
@keyframes trans3 {
from {
-webkit-transform: translate3d(53px, 0, 0);
-moz-transform: translate3d(53px, 0, 0);
-ms-transform: translate3d(53px, 0, 0);
-o-transform: translate3d(53px, 0, 0);
transform: translate3d(53px, 0, 0);
}
to {
-webkit-transform: translate3d(-220px, 0, 0);
-moz-transform: translate3d(-220px, 0, 0);
-ms-transform: translate3d(-220px, 0, 0);
-o-transform: translate3d(-220px, 0, 0);
transform: translate3d(-220px, 0, 0);
}
}
/*==============================================
Site Main
===============================================*/
.boxed {
background-color: #eeeeee;
}
.boxed .site-main {
background-color: #fff;
width: 1200px;
margin: 0 auto;
}
.boxed .site-main .sticky-header.on {
left: auto;
right: auto;
}
.boxed .site-main .is-sticky .site-header {
width: auto !important;
}
/*==============================================
Site Header
===============================================*/
.site-header {
background-color: #ffffff;
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.06);
position: relative;
z-index: 30;
}
.site-header.navbar-fixed-top {
box-shadow: none;
position: fixed;
}
.site-header .navbar-nav > li {
position: relative;
}
.site-header .navbar-nav > li > a {
color: #959595;
font-family: "Raleway", sans-serif;
font-size: 12px;
font-weight: 600;
line-height: 120px;
padding: 0 20px;
text-transform: uppercase;
z-index: 1;
}
.site-header .navbar-nav > li > a:hover,
.site-header .navbar-nav > li > a:focus,
.site-header .navbar-nav > li > a.active {
color: #e6ae03;
}
.site-header .navbar-header {
left: 0;
position: absolute;
top: 61%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.site-header .navbar-brand {
height: auto;
padding: 0;
}
.site-header .navbar-brand img {
position: relative;
top: -4px;
width: 160px;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.site-header.no-shadow {
box-shadow: none;
}
.site-header.on .navbar-nav > li > a {
line-height: 70px;
}
.site-header.on .navbar-brand img {
top: 2px;
}
.colored-logo .navbar-header {
position: static;
transform: none;
}
.colored-logo .navbar-brand {
background-color: #e6ae03;
height: 120px;
padding: 0 23px;
position: relative;
}
.colored-logo .navbar-brand img {
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.colored-logo .navbar-brand:hover,
.colored-logo .navbar-brand:focus {
background-color: #e6ae03;
}
.colored-logo.on .navbar-brand {
height: 70px;
}
.colored-logo.on .navbar-brand img {
top: 50%;
}
.no-shadow.on {
box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.15);
}
.navbar-fixed-top .navbar-nav {
margin-right: 0;
}
.tp-header {
background-color: transparent;
box-shadow: none;
}
.tp-header .navbar-brand img {
top: 0;
}
.tp-header.white .navbar-nav > li > a {
color: #fff;
}
.tp-header.white .navbar-nav > li > a.active {
color: #e6ae03;
}
.tp-header,
.semi-dark {
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.tp-header.on,
.semi-dark.on {
background-color: #fff;
box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.15);
}
.tp-header.on.white .navbar-nav > li > a,
.semi-dark.on.white .navbar-nav > li > a {
color: #777777;
}
.tp-header.on.white .navbar-nav > li > a.active,
.semi-dark.on.white .navbar-nav > li > a.active {
color: #e6ae03;
}
.semi-dark {
background-color: rgba(0, 0, 0, 0.3);
}
.dark-header {
background-color: #19232e;
}
.header-top {
background-color: #353535;
font-family: "Roboto", sans-serif;
padding: 7px 0;
}
.header-top .support p {
color: rgba(255, 255, 255, 0.5);
margin: 0;
}
.header-top .support p a {
color: rgba(255, 255, 255, 0.5);
}
.header-top .support p a:hover {
color: #e6ae03;
}
.header-top .social-link li {
display: inline-block;
}
.header-top .social-link li a {
color: rgba(255, 255, 255, 0.5);
display: block;
padding: 0 5px;
}
.header-top .social-link li a:hover {
color: #ffffff;
}
.header-top.tp {
background-color: transparent;
padding: 0;
}
.site-logo .logo {
display: block;
text-align: center;
}
.center-nav {
position: relative;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.center-nav .navbar-nav {
display: block;
float: none;
text-align: center;
}
.center-nav .navbar-nav > li {
display: inline-block;
float: none;
}
.center-nav .navbar-nav > li > a {
color: #858585;
font-size: 14px;
font-weight: 700;
line-height: 80px;
padding: 0 20px;
}
.center-nav .sub-menu {
text-align: left;
}
.center-nav .sub-menu li a {
color: #e4e4e4;
font-weight: 700;
}
/* .on {
.center-nav .navbar-nav > li > a {
line-height: normal;
}
} */
.is-sticky .center-nav .navbar-nav > li > a {
line-height: 70px;
}
.sticky .center-nav {
background-color: #ffffff;
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.05);
}
.sticky .navbar-nav > li > a {
color: #777777;
line-height: 80px;
}
.sticky .navbar-nav > li > a.active {
color: #e6ae03;
}
.menu-sticky {
background-color: #fff;
}
.top-border {
border-top: 1px solid #e5e5e5;
}
.-logo {
display: inline-block;
}
.-logo img {
width: 150px;
}
/*-------------- g-header -----------*/
.g-header.dark {
background-color: #303030;
box-shadow: none;
}
.g-header.on .navbar-brand img {
top: -4px;
}
.g-header .container {
position: relative;
width: 100%;
}
.g-header .navbar-header {
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.g-header .navbar-nav > li > a {
color: #fff;
letter-spacing: 0.5px;
line-height: 70px;
}
.g-header .navbar-nav > li:first-child > a {
padding-left: 0;
}
.g-header .nav-social {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
}
.g-header .sub-menu .sub-menu {
left: 100%;
right: auto;
}
.nav-social li {
float: left;
}
.nav-social li a {
color: #fff;
display: block;
font-size: 16px;
padding: 0 15px;
}
.borders {
position: relative;
top: 110px;
z-index: 10;
}
.borders .container {
position: relative;
}
.borders .border {
background-color: #fff;
position: absolute;
display: block;
}
.borders .border:first-child,
.borders .border:last-child {
height: 170px;
left: 0;
top: 50%;
width: 1px;
}
.borders .border:nth-child(2),
.borders .border:nth-child(3) {
height: 1px;
left: 0;
margin-top: -0.5px;
top: 50%;
width: 134px;
}
.borders .border:nth-child(3),
.borders .border:last-child {
left: auto;
right: 0;
}
.borders.bottom {
bottom: 312px;
position: absolute;
top: auto;
width: 100%;
}
.borders.bottom .border:first-child,
.borders.bottom .border:last-child {
bottom: 0;
top: auto;
}
.borders.bottom .border:last-child {
height: 280px;
}
/*-------------- header-11 -----------*/
.header-11 {
background-color: rgba(255, 255, 255, 0.1);
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.header-11.on {
background-color: #fff;
}
.sub-menu {
background-color: #333333;
border-top: 2px solid #e6ae03;
padding: 0 0 5px;
box-shadow: 0 13px 42px 11px rgba(0, 0, 0, 0.05);
left: 0;
position: absolute;
top: 100%;
width: 220px;
z-index: 199;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.25s ease-in-out 0s;
-moz-transition: all 0.25s ease-in-out 0s;
-o-transition: all 0.25s ease-in-out 0s;
transition: all 0.25s ease-in-out 0s;
}
.sub-menu > li > a {
color: #ffffff;
display: block;
font-size: 13px;
font-weight: 500;
line-height: 45px;
padding: 0 20px;
text-transform: uppercase;
}
.sub-menu > li > a i {
float: right;
line-height: 45px;
}
.sub-menu > li:hover > a {
background-color: #e6ae03;
}
.sub-menu .sub-menu {
left: auto;
right: 100%;
top: -2px;
}
.sub-menu.style2 {
padding: 0;
}
.sub-menu.style2 li:hover > a {
background-color: transparent;
color: #e6ae03;
}
.sub-menu.style2 li a {
border-bottom: 1px dotted #a3a3a3;
}
.sub-menu.style2 li:last-child > a {
border-bottom: 0;
}
.sub-menu.style3 {
background-color: #1a1a1a;
border: 0 none;
}
.sub-menu.style3 li a {
position: relative;
overflow: hidden;
}
.sub-menu.style3 li a:before {
background: rgba(255, 255, 255, 0.5);
content: "";
display: block;
height: 1px;
left: -100%;
margin-top: -0.5px;
position: absolute;
top: 50%;
visibility: hidden;
width: 100%;
z-index: -1;
}
.sub-menu.style3 li a:hover {
background-color: transparent;
color: #e6ae03;
}
.sub-menu.style3 li a:hover:before {
animation: 0.9s ease 0s normal none 1 running menu_hover_8;
}
.sub-menu.style3 .sub-menu {
top: 0;
}
.navbar-nav ul {
margin: 0;
padding: 0;
list-style: none;
}
.navbar-nav li {
position: relative;
}
.navbar-nav li:hover > .sub-menu {
opacity: 1;
visibility: visible;
}
.navbar-nav > li:last-child ul {
left: auto;
right: 0;
}
/*+=+-=+-=+-=+-=+-=+=+-=+-=+-=+-=+-=+=+-=+-=+-=+-=+-=
Menu Hover
+=+-=+-=+-=+-=+-=+=+-=+-=+-=+-=+-=+=+-=+-=+-=+-=+-=+-*/
.site-header .nav-hover-one > li > a,
.site-header .nav-hover-9 > li > a {
margin-left: 20px;
margin-right: 20px;
padding-left: 0;
padding-right: 0;
}
.site-header .nav-hover-one > li > a:before,
.site-header .nav-hover-9 > li > a:before {
bottom: 40%;
bottom: -webkit-calc(50% + -15px);
bottom: calc(50% + -15px);
}
.nav-hover-one > li > a {
position: relative;
}
.nav-hover-one > li > a::before {
background-color: #333333;
bottom: 25px;
content: "";
height: 1px;
left: 0;
position: absolute;
width: 0;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.nav-hover-one > li > a:hover::before,
.nav-hover-one > li > a.active::before {
background-color: #e6ae03;
width: 100%;
}
/*
Color Variation required
*/
/* Menu Hover 2 */
.nav-hover-2 > li > a:before,
.nav-hover-2 > li > a:after {
font-weight: 600;
opacity: 0;
position: absolute;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.nav-hover-2 > li > a:before {
content: "[";
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
-ms-transform: translateX(20px);
-o-transform: translateX(20px);
transform: translateX(20px);
}
.nav-hover-2 > li > a:after {
content: "]";
-webkit-transform: translateX(-20px);
-moz-transform: translateX(-20px);
-ms-transform: translateX(-20px);
-o-transform: translateX(-20px);
transform: translateX(-20px);
}
.nav-hover-2 > li > a.active:before,
.nav-hover-2 > li > a:hover:before {
opacity: 1;
-webkit-transform: translateX(-15px);
-moz-transform: translateX(-15px);
-ms-transform: translateX(-15px);
-o-transform: translateX(-15px);
transform: translateX(-15px);
}
.nav-hover-2 > li > a.active:after,
.nav-hover-2 > li > a:hover:after {
opacity: 1;
-webkit-transform: translateX(15px);
-moz-transform: translateX(15px);
-ms-transform: translateX(15px);
-o-transform: translateX(15px);
transform: translateX(15px);
}
/* Menu hover 3 */
.nav-hover-3 > li > a:before {
background-color: #e6ae03;
content: "";
height: 35%;
left: 0;
position: absolute;
top: 50%;
width: 0;
z-index: -1;
-webkit-transform: translateY(-50%) skewX(-7deg);
-moz-transform: translateY(-50%) skewX(-7deg);
-ms-transform: translateY(-50%) skewX(-7deg);
-o-transform: translateY(-50%) skewX(-7deg);
transform: translateY(-50%) skewX(-7deg);
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.nav-hover-3 > li > a.active,
.nav-hover-3 > li > a:hover {
color: #fff !important;
}
.nav-hover-3 > li > a.active::before,
.nav-hover-3 > li > a:hover::before {
width: 100%;
}
/* Menu hover 4 */
.nav-hover-4 > li:last-child > a:after {
content: none;
}
.nav-hover-4 > li > a:before {
content: "";
height: 2px;
width: 0;
position: absolute;
left: 0;
top: 0;
background-color: #e6ae03;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.nav-hover-4 > li > a:after {
border-right: 1px solid #e5e5e5;
content: "";
height: 50%;
position: absolute;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.nav-hover-4 > li > a.active:before,
.nav-hover-4 > li > a:hover:before {
width: 100%;
}
/* Menu hover 5 */
.nav-hover-5 > li:last-child > a:after {
content: none;
}
.nav-hover-5 > li > a:before {
content: "";
height: 2px;
width: 0;
position: absolute;
left: 0;
top: 0;
background-color: #e6ae03;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.nav-hover-5 > li > a:after {
border-right: 1px dotted #e5e5e5;
content: "";
height: 20%;
position: absolute;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%) skewX(-12deg);
-moz-transform: translateY(-50%) skewX(-12deg);
-ms-transform: translateY(-50%) skewX(-12deg);
-o-transform: translateY(-50%) skewX(-12deg);
transform: translateY(-50%) skewX(-12deg);
}
.nav-hover-5 > li > a.active:before,
.nav-hover-5 > li > a:hover:before {
width: 100%;
}
/* Menu hover 6 */
.nav-hover-6 > li > a:before {
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.nav-hover-6 > li > a.active,
.nav-hover-6 > li > a:hover {
color: #fff !important;
}
.nav-hover-6 > li > a.active:before,
.nav-hover-6 > li > a:hover:before {
background-color: #e6ae03;
}
/* Menu hover 7 */
.nav-hover-7 > li:last-child > a {
margin-right: 0;
}
.nav-hover-7 > li > a {
margin-right: 1px;
}
.nav-hover-7 > li > a:before {
border-radius: 4px;
content: "";
height: 40%;
left: 0;
position: absolute;
top: 50%;
width: 100%;
z-index: -1;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.nav-hover-7 > li > a.active,
.nav-hover-7 > li > a:hover {
color: #fff !important;
}
.nav-hover-7 > li > a.active:before,
.nav-hover-7 > li > a:hover:before {
background-color: #e6ae03;
}
/* Menu hover 8 */
.nav-hover-8 > li:last-child > a:after {
content: none;
}
.nav-hover-8 > li > a {
overflow: hidden;
}
.nav-hover-8 > li > a:before {
background: rgba(51, 51, 51, 0.5);
content: "";
display: block;
height: 1px;
left: -100%;
margin-top: -0.5px;
position: absolute;
top: 50%;
visibility: hidden;
width: 100%;
z-index: -1;
}
.nav-hover-8 > li > a:after {
border-right: 1px dotted #e5e5e5;
content: "";
height: 20%;
position: absolute;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%) skewX(-12deg);
-moz-transform: translateY(-50%) skewX(-12deg);
-ms-transform: translateY(-50%) skewX(-12deg);
-o-transform: translateY(-50%) skewX(-12deg);
transform: translateY(-50%) skewX(-12deg);
}
.nav-hover-8 > li > a:hover:before {
animation: 0.9s ease 0s normal none 1 running menu_hover_8;
}
@-webkit-keyframes menu_hover_8 {
0% {
left: -100%;
visibility: hidden;
}
10% {
left: -100%;
opacity: 1;
visibility: visible;
}
65% {
opacity: 0.3;
}
80% {
left: 100%;
opacity: 0.1;
visibility: visible;
}
81% {
left: 100%;
visibility: hidden;
}
100% {
left: -100%;
visibility: hidden;
}
}
@keyframes menu_hover_8 {
0% {
left: -100%;
visibility: hidden;
}
10% {
left: -100%;
opacity: 1;
visibility: visible;
}
65% {
opacity: 0.3;
}
80% {
left: 100%;
opacity: 0.1;
visibility: visible;
}
81% {
left: 100%;
visibility: hidden;
}
100% {
left: -100%;
visibility: hidden;
}
}
/* Menu hover 10 */
.nav-hover-9 > li > a {
position: relative;
}
.nav-hover-9 > li > a::before {
background: -webkit-linear-gradient(30deg, #e6ae03 0%, #fdd352 100%);
background: linear-gradient(30deg, #e6ae03 0%, #fdd352 100%);
bottom: 25px;
content: "";
height: 2px;
left: 0;
position: absolute;
width: 0;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.nav-hover-9 > li > a:hover::before,
.nav-hover-9 > li > a.active::before {
background-color: #e6ae03;
width: 100%;
}
/* Menu hover 10 */
.nav-hover-10 > li > a:before {
content: "";
}
/*
* Mega Menu
*
*/
li.megamenu {
position: static !important;
}
li.megamenu > .sub-menu {
width: 100%;
}
li.megamenu > .sub-menu > li {
float: left;
}
li.megamenu > .sub-menu > li > a i {
display: none !important;
}
li.megamenu > .sub-menu li:hover a {
background-color: transparent;
}
li.megamenu > .sub-menu li li a {
color: #fff;
display: block;
font-size: 13px;
font-weight: 500;
line-height: 45px;
padding: 0 20px;
text-transform: uppercase;
}
li.megamenu > .sub-menu li li a:hover {
background-color: #e6ae03;
color: #fff;
}
li.megamenu > .sub-menu.style2 li:hover > a {
background-color: transparent;
color: #e6ae03;
}
li.megamenu > .sub-menu.style2 > li:hover > a {
color: #fff;
}
li.megamenu > .sub-menu.style2 > li:last-child > a {
border-bottom: 1px dotted #a3a3a3;
}
li.megamenu > .sub-menu.style3 li a:hover {
background-color: transparent;
color: #e6ae03;
}
li.megamenu .col-1 > li {
width: 100%;
float: none;
}
li.megamenu .col-2 > li {
width: 50%;
}
li.megamenu .col-3 > li {
width: 33.3333%;
}
li.megamenu .col-4 > li {
width: 25%;
}
[class^="mm-type-"] li a {
color: #777;
display: block;
line-height: 36px;
padding: 0 15px;
position: relative;
z-index: 0;
}
[class^="mm-type-"] > li {
margin-bottom: 5px;
}
[class^="mm-type-"].border > li {
border-right: 1px solid #e5e5e5;
}
[class^="mm-type-"].border > li:last-child {
border-right: 0;
}
.mm-type-1 {
background-color: #fff;
}
.mm-type-1 > li > a {
font-size: 13px;
font-weight: 500;
}
.mm-type-1 > li:hover > a {
background-color: transparent !important;
}
.mm-type-1 ul li a {
color: #777777;
font-size: 14px;
}
.mm-type-1 ul li a:before {
background-color: #f8f8f8;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 0;
z-index: -1;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.mm-type-1 ul li a:hover:before {
width: 100%;
}
.header-inner {
position: relative;
}
.if-has-search .navbar-collapse {
margin-right: 34px;
}
.header-search {
height: 100%;
position: absolute;
right: 0;
top: 0;
width: -webkit-calc(100% - 169px);
width: calc(100% - 169px);
display: flex;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.header-search .toggle {
background-color: transparent;
border: 1px solid #a9a9a9;
border-radius: 2px;
height: 41px;
line-height: 39px;
margin: -20px 0 0;
position: absolute;
right: 0;
top: 50%;
width: 41px;
text-align: center;
color: #a9a9a9;
font-size: 16px;
padding: 0;
}
.header-search .sclose {
display: none;
font-size: 41px;
position: relative;
text-align: center;
top: -2px;
}
.header-search .search-field {
border: 0 none;
opacity: 0;
padding: 0;
visibility: hidden;
width: 95%;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.if-has-search.active .header-search {
background-color: #fff;
z-index: 20;
}
.if-has-search.active .search-field {
font-size: 24px;
line-height: 40px;
opacity: 1;
padding-left: 30px;
visibility: visible;
}
.if-has-search.active .toggle i {
display: none;
}
.if-has-search.active .toggle .sclose {
display: inline-block;
}
.sticky-header.on {
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 110;
}
.sticky-header.on .semi-dark {
background-color: transparent;
}
.sticky-header.on .semi-dark .navbar-nav li a:not(:hover):not(.active) {
color: #777777;
}
.sticky-header.on .header-top.tp {
background-color: #333333;
}
/*---------------------------------
Header3
-----------------------------------*/
.header3 {
background-color: transparent;
font-family: "Raleway", sans-serif;
}
.header3.on {
background-color: rgba(0, 0, 0, 0.6);
}
.header3 .header-top {
background-color: transparent;
font-family: "Raleway", sans-serif;
padding: 0;
}
.header3 .inner-top > span {
border-left: 1px solid rgba(255, 255, 255, 0.3);
padding: 5px 10px;
}
.header3 .inner-top > span,
.header3 .inner-top > span a {
color: #fff;
display: inline-block;
font-family: "Roboto", sans-serif;
font-size: 12px;
letter-spacing: 0.3px;
}
.header3 .inner-top .top-menu,
.header3 .inner-top .social-link {
border-right: 1px solid rgba(255, 255, 255, 0.3);
float: left;
padding: 5px 10px;
}
.header3 .header-mid {
background-color: rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(255, 255, 255, 0.3);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.top-menu li {
float: left;
}
.top-menu li a {
color: #fff;
display: block;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.7px;
padding: 0 10px;
text-transform: uppercase;
}
.header-mid .navbar-brand {
display: block;
float: none;
height: auto;
padding: 0;
}
.header-mid .navbar-brand img {
max-width: 130px;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.header-mid .navbar-nav > li > a {
color: #fff;
font-size: 12px;
font-weight: 700;
line-height: 78px;
padding: 0 20px;
text-transform: uppercase;
}
.header-mid .navbar-nav > li:hover > a {
background-color: #e6ae03;
color: #fff;
}
/*---------------------------------
Header 4
-----------------------------------*/
.header-4-wrapper {
position: relative;
width: 100%;
z-index: 10;
}
.header4 {
box-shadow: none;
height: 100px;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
}
.header4 .container {
height: 100px;
position: relative;
}
.header4 .navbar-brand {
margin-left: 50px;
}
.header4 .navbar-collapse {
display: table;
left: 50px;
position: absolute;
top: 50%;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
-webkit-transform: translate(0%, -50%);
-moz-transform: translate(0%, -50%);
-ms-transform: translate(0%, -50%);
-o-transform: translate(0%, -50%);
transform: translate(0%, -50%);
}
.header4 .navbar-nav > li > a {
color: #333333;
font-family: "Poiret One", cursive;
font-size: 24px;
font-weight: 400;
line-height: 83px;
padding: 0;
margin: 0 8px;
text-transform: none;
}
.header4 .navbar-nav > li > a:before {
bottom: 25px;
}
.header4 .hire-us {
background-color: rgba(0, 0, 0, 0.02);
border: 1px solid #222;
color: #222;
display: inline-block;
font-family: "Poiret One", cursive;
font-size: 24px;
height: 60px;
line-height: 60px;
margin-top: -30px;
text-align: center;
padding: 0 50px;
position: absolute;
right: 50px;
top: 50%;
}
.header4 .hire-us:hover {
background-color: #000;
border-color: #000;
color: #fff;
}
/* firefox only */
@-moz-document url-prefix() {
.header4 .navbar-collapse {
width: -moz-max-content;
/* Firefox/Gecko */
}
}
.is-sticky .header4 {
background-color: #f7f7f7;
height: 100px;
margin: 0;
}
.is-sticky .header4 .navbar-header {
left: 0;
opacity: 1;
-webkit-transform: translate(0px, -50%);
-moz-transform: translate(0px, -50%);
-ms-transform: translate(0px, -50%);
-o-transform: translate(0px, -50%);
transform: translate(0px, -50%);
}
.is-sticky .header4 .navbar-collapse {
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.is-sticky .hire-us {
font-size: 20px;
height: 53px;
line-height: 53px;
margin-top: -26.5px;
}
.agency-home {
margin-top: 0;
}
.agency-home .header4 .navbar-header {
left: 50%;
opacity: 0;
-webkit-transform: translate(-50%, 150%);
-moz-transform: translate(-50%, 150%);
-ms-transform: translate(-50%, 150%);
-o-transform: translate(-50%, 150%);
transform: translate(-50%, 150%);
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.agency-home .is-sticky .navbar-header {
left: 0;
opacity: 1;
-webkit-transform: translate(0px, -50%);
-moz-transform: translate(0px, -50%);
-ms-transform: translate(0px, -50%);
-o-transform: translate(0px, -50%);
transform: translate(0px, -50%);
}
.header4.is-sticky {
background-color: #f7f7f7;
height: 100px;
left: 0;
margin: 0;
position: fixed;
right: 0;
top: 0;
}
.header4.is-sticky .navbar-brand {
opacity: 1;
visibility: visible;
}
.header4.is-sticky .navbar-collapse {
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.header4.is-sticky .hire-us {
position: absolute;
right: 50px;
top: 50%;
font-size: 20px;
height: 63px;
line-height: 63px;
margin-top: -32.5px;
}
.post-pagination h3 {
font-size: 18px;
font-weight: 700;
line-height: 30px;
margin-bottom: 10px;
}
.blog-link {
font-size: 34px;
left: 50%;
position: absolute;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.blog-link span {
background-color: #fff;
display: block;
height: 15px;
left: 3px;
position: relative;
top: 3px;
width: 15px;
}
.comment-author {
float: left;
padding-right: 20px;
}
.comment-author img {
max-width: 100px;
}
.comment-list {
margin-top: 30px;
}
.comment-thread {
margin-bottom: 50px;
}
.comment-thread:last-child {
margin-bottom: 0;
}
.comment-metadata h4 {
font-size: 14px;
font-weight: 700;
margin-bottom: 10px;
text-transform: uppercase;
}
.comment-metadata span {
font-size: 12px;
margin-left: 20px;
}
/*---------------------------------
Photography Header
-----------------------------------*/
.pg-header {
margin-top: 20px;
}
.pg-header .site-logo {
float: left;
}
.pg-header .site-logo a {
display: inline-block;
}
.pg-header .site-logo img {
width: 150px;
}
.pg-header .nav-toggle {
float: right;
position: relative;
z-index: 125;
}
.nav-toggle {
cursor: pointer;
height: 20px;
margin-top: 15px;
width: 30px;
}
.nav-toggle .toggle-bar {
background-color: #fff;
border: medium none;
cursor: pointer;
height: 2px;
left: 0;
position: absolute;
top: 0;
width: 100%;
-webkit-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
-moz-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
-ms-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
-o-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
}
.nav-toggle .toggle-bar:nth-child(2) {
left: auto;
right: 0;
top: 8px;
}
.nav-toggle .toggle-bar:nth-child(3) {
top: 16px;
}
.nav-toggle.active .toggle-bar:nth-child(1) {
-webkit-transform: translateY(8px) translateX(0px) rotate(45deg);
-moz-transform: translateY(8px) translateX(0px) rotate(45deg);
-ms-transform: translateY(8px) translateX(0px) rotate(45deg);
-o-transform: translateY(8px) translateX(0px) rotate(45deg);
transform: translateY(8px) translateX(0px) rotate(45deg);
}
.nav-toggle.active .toggle-bar:nth-child(2) {
width: 0;
}
.nav-toggle.active .toggle-bar:nth-child(3) {
-webkit-transform: translateY(-8px) translateX(0px) rotate(-45deg);
-moz-transform: translateY(-8px) translateX(0px) rotate(-45deg);
-ms-transform: translateY(-8px) translateX(0px) rotate(-45deg);
-o-transform: translateY(-8px) translateX(0px) rotate(-45deg);
transform: translateY(-8px) translateX(0px) rotate(-45deg);
}
.menu-inner {
background-color: rgba(0, 0, 0, 0.7);
height: 100%;
opacity: 0;
-webkit-visibility: hidden;
visibility: hidden;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 120;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.menu-inner .display-table {
height: 100%;
width: 100%;
}
.menu-inner.active {
opacity: 1;
-webkit-visibility: visible;
visibility: visible;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}
.fs-nav li {
left: -100px;
position: relative;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.fs-nav li:nth-child(2) {
-webkit-transition: all 0.2s ease-in-out 0.05s;
-moz-transition: all 0.2s ease-in-out 0.05s;
-o-transition: all 0.2s ease-in-out 0.05s;
transition: all 0.2s ease-in-out 0.05s;
}
.fs-nav li:nth-child(3) {
-webkit-transition: all 0.2s ease-in-out 0.1s;
-moz-transition: all 0.2s ease-in-out 0.1s;
-o-transition: all 0.2s ease-in-out 0.1s;
transition: all 0.2s ease-in-out 0.1s;
}
.fs-nav li:nth-child(4) {
-webkit-transition: all 0.2s ease-in-out 0.15s;
-moz-transition: all 0.2s ease-in-out 0.15s;
-o-transition: all 0.2s ease-in-out 0.15s;
transition: all 0.2s ease-in-out 0.15s;
}
.fs-nav li:nth-child(5) {
-webkit-transition: all 0.2s ease-in-out 0.2s;
-moz-transition: all 0.2s ease-in-out 0.2s;
-o-transition: all 0.2s ease-in-out 0.2s;
transition: all 0.2s ease-in-out 0.2s;
}
.fs-nav li:nth-child(6) {
-webkit-transition: all 0.2s ease-in-out 0.25s;
-moz-transition: all 0.2s ease-in-out 0.25s;
-o-transition: all 0.2s ease-in-out 0.25s;
transition: all 0.2s ease-in-out 0.25s;
}
.fs-nav li:nth-child(7) {
-webkit-transition: all 0.2s ease-in-out 0.3s;
-moz-transition: all 0.2s ease-in-out 0.3s;
-o-transition: all 0.2s ease-in-out 0.3s;
transition: all 0.2s ease-in-out 0.3s;
}
.fs-nav li:nth-child(8) {
-webkit-transition: all 0.2s ease-in-out 0.35s;
-moz-transition: all 0.2s ease-in-out 0.35s;
-o-transition: all 0.2s ease-in-out 0.35s;
transition: all 0.2s ease-in-out 0.35s;
}
.fs-nav li a {
color: #fff;
display: block;
font-size: 35px;
line-height: 40px;
padding: 15px 0;
position: relative;
}
.fs-nav li a span {
position: relative;
display: inline-block;
}
.fs-nav li a span:before {
background-color: #fff;
bottom: -16px;
content: "";
height: 1px;
left: 0;
position: absolute;
width: 0;
-webkit-transition: width 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
-moz-transition: width 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
-ms-transition: width 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
-o-transition: width 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
}
.fs-nav li a:hover span:before {
width: 100%;
}
.fs-nav.active li {
opacity: 1;
left: 0;
}
.fs-nav.style2 li {
left: auto;
opacity: 1;
-webkit-transition: all 0s ease-in-out 0s;
-moz-transition: all 0s ease-in-out 0s;
-o-transition: all 0s ease-in-out 0s;
transition: all 0s ease-in-out 0s;
}
/* fullscreen nav */
.nav-toggle2 {
border: 1px solid #fff;
cursor: pointer;
float: right;
height: 43px;
overflow: hidden;
position: relative;
width: 43px;
z-index: 130;
}
.nav-toggle2 span {
background-color: #fff;
display: block;
height: 2px;
left: 9px;
opacity: 0.8;
position: absolute;
width: 23px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: all 0.25s ease-in-out 0s;
-moz-transition: all 0.25s ease-in-out 0s;
-o-transition: all 0.25s ease-in-out 0s;
transition: all 0.25s ease-in-out 0s;
}
.nav-toggle2 span:nth-child(1) {
top: 15px;
}
.nav-toggle2 span:nth-child(2) {
top: 20px;
}
.nav-toggle2 span:nth-child(3) {
opacity: 0;
top: 20px;
}
.nav-toggle2 span:nth-child(4) {
top: 25px;
width: 13px;
-webkit-transition: all 0.25s ease-in-out 0s;
-moz-transition: all 0.25s ease-in-out 0s;
-o-transition: all 0.25s ease-in-out 0s;
transition: all 0.25s ease-in-out 0s;
}
.nav-toggle2.kulus:hover span:nth-child(1) {
animation: 0.4s cubic-bezier(0.19, 0.1, 0.91, 0.53) 0s normal forwards 1 running moveLeftToRightAndRightToLeft;
}
.nav-toggle2.kulus:hover span:nth-child(2) {
animation: 0.4s cubic-bezier(0.19, 0.1, 0.91, 0.53) 0.1s normal forwards 1 running moveLeftToRightAndRightToLeft;
}
.nav-toggle2.kulus:hover span:nth-child(4) {
animation: 0.4s cubic-bezier(0.19, 0.1, 0.91, 0.53) 0.2s normal forwards 1 running moveLeftToRightAndRightToLeft2;
}
.nav-toggle2.open span:nth-child(1),
.nav-toggle2.open span:nth-child(4) {
opacity: 0;
top: 20px;
}
.nav-toggle2.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition-delay: 0.25s;
-moz-transition-delay: 0.25s;
-ms-transition-delay: 0.25s;
-o-transition-delay: 0.25s;
}
.nav-toggle2.open span:nth-child(3) {
opacity: 1;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition-delay: 0.25s;
-moz-transition-delay: 0.25s;
-ms-transition-delay: 0.25s;
-o-transition-delay: 0.25s;
}
.nav-toggle2.dark {
border-color: #333333;
}
.nav-toggle2.dark span {
background-color: #333333;
}
@-webkit-keyframes moveLeftToRightAndRightToLeft {
0% {
left: 9px;
opacity: 0.8;
width: 23px;
}
50% {
left: 32px;
opacity: 1;
width: 0;
}
51% {
left: 9px;
opacity: 0;
width: 0;
}
52% {
left: 9px;
opacity: 1;
width: 0;
}
100% {
left: 9px;
opacity: 1;
width: 23px;
}
}
@-moz-keyframes moveLeftToRightAndRightToLeft {
0% {
left: 9px;
opacity: 0.8;
width: 23px;
}
50% {
left: 32px;
opacity: 1;
width: 0;
}
51% {
left: 9px;
opacity: 0;
width: 0;
}
52% {
left: 9px;
opacity: 1;
width: 0;
}
100% {
left: 9px;
opacity: 1;
width: 23px;
}
}
@keyframes moveLeftToRightAndRightToLeft {
0% {
left: 9px;
opacity: 0.8;
width: 23px;
}
50% {
left: 32px;
opacity: 1;
width: 0;
}
51% {
left: 9px;
opacity: 0;
width: 0;
}
52% {
left: 9px;
opacity: 1;
width: 0;
}
100% {
left: 9px;
opacity: 1;
width: 23px;
}
}
@-webkit-keyframes moveLeftToRightAndRightToLeft2 {
0% {
left: 9px;
opacity: 0.8;
width: 13px;
}
50% {
left: 22px;
opacity: 1;
width: 0;
}
51% {
left: 9px;
opacity: 0;
width: 0;
}
52% {
left: 9px;
opacity: 1;
width: 0;
}
100% {
left: 9px;
opacity: 1;
width: 23px;
}
}
@-moz-keyframes moveLeftToRightAndRightToLeft2 {
0% {
left: 9px;
opacity: 0.8;
width: 13px;
}
50% {
left: 22px;
opacity: 1;
width: 0;
}
51% {
left: 9px;
opacity: 0;
width: 0;
}
52% {
left: 9px;
opacity: 1;
width: 0;
}
100% {
left: 9px;
opacity: 1;
width: 23px;
}
}
@keyframes moveLeftToRightAndRightToLeft2 {
0% {
left: 9px;
opacity: 0.8;
width: 13px;
}
50% {
left: 22px;
opacity: 1;
width: 0;
}
51% {
left: 9px;
opacity: 0;
width: 0;
}
52% {
left: 9px;
opacity: 1;
width: 0;
}
100% {
left: 9px;
opacity: 1;
width: 23px;
}
}
.slick-slide:focus {
outline: 0 none;
}
.pg-slider #carousel .slick-list {
padding: 0 !important;
}
.pg-slider #carousel .slick-slide {
position: relative;
}
.pg-slider #carousel .slick-slide .overlay {
background-color: rgba(92, 76, 98, 0.4);
}
.pg-slider #carousel .slick-current .overlay {
opacity: 0;
}
.pg-meta-wrapper {
bottom: 135px;
left: 50px;
position: absolute;
z-index: 2;
}
.pg-meta-wrapper .toggle-meta {
border: 1px solid;
border-radius: 50%;
color: #ddd;
display: inline-block;
height: 30px;
line-height: 30px;
position: relative;
text-align: center;
width: 30px;
z-index: 1;
-webkit-transition: all 0s ease-in-out 0s;
-moz-transition: all 0s ease-in-out 0s;
-o-transition: all 0s ease-in-out 0s;
transition: all 0s ease-in-out 0s;
}
.pg-meta-wrapper.active .pg-img-meta {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.pg-img-meta {
background-color: rgba(0, 0, 0, 0.5);
bottom: 30px;
padding: 30px;
position: absolute;
width: 250px;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: left bottom 0;
-moz-transform-origin: left bottom 0;
-ms-transform-origin: left bottom 0;
-o-transform-origin: left bottom 0;
transform-origin: left bottom 0;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.pg-img-meta li {
color: #ddd;
font-family: "Dosis", sans-serif;
font-size: 16px;
font-weight: 500;
}
.pg-img-meta li + li {
margin-top: 5px;
}
.pg-img-meta li i {
display: inline-block;
margin-right: 10px;
text-align: center;
width: 30px;
}
.pg-img-meta li span {
display: inline-block;
}
.iso-icon::before {
border: 1px solid #b4b4b4;
bottom: 2px;
content: "iso";
display: inline-block;
font-family: Arial, sans-serif;
font-size: 9px;
font-style: normal;
line-height: normal;
padding: 2px 3px 1px;
position: relative;
text-transform: uppercase;
}
/*==============================================
Site Banner
===============================================*/
.site-banner {
position: relative;
clear: both;
}
.slider-content {
left: 15px;
margin: 0 auto;
position: absolute;
right: 15px;
top: 50%;
-webkit-filter: blur(0px);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.index-slider .primary-bg {
opacity: 0.85;
}
.index-slider [class^="col-"] {
height: 500px;
}
.index-slider .slider-content h2 {
font-size: 60px;
line-height: 63px;
color: #333333;
font-weight: 900;
}
.index-slider .slider-content p {
font-size: 22px;
font-weight: 400;
letter-spacing: 2px;
line-height: 32px;
margin: 17px 0 0;
}
.index-slider .slider-content .btn {
color: #333333;
font-weight: 300;
margin-top: 27px;
}
.index-slider .slider-content .btn.white {
color: #fff;
}
.index-slider .slider-content .btn.white:hover {
color: #333333;
}
.index-slider3 .slider-content h3,
.index-slider3 .slider-content h4 {
color: #a5a5a5;
font-family: "Roboto Slab", serif;
font-size: 52px;
font-weight: 700;
text-transform: uppercase;
}
.index-slider3 .slider-content h1 {
font-weight: 900;
font-family: "Raleway", sans-serif;
text-transform: uppercase;
color: #e6ae03;
font-size: 134px;
}
.index-slider3 .slider-content h4 {
color: #454545;
}
.index-slider3 .slider-content .btn {
margin-top: 42px;
}
.index-slider3 div.owl-controls .owl-prev,
.index-slider3 div.owl-controls .owl-next {
background-color: rgba(0, 0, 0, 0.3);
}
.index-slider3 div.owl-controls .owl-dot {
background-color: #e6ae03;
}
.index-slider3 div.owl-controls .owl-dot.active {
background-color: transparent;
border-color: #e6ae03;
}
.home-slider .slider-content {
right: auto;
}
.home-slider .item {
background-color: #fff;
background-repeat: no-repeat;
background-size: cover;
}
.home-slider .item .container {
height: 500px;
position: relative;
}
.home-slider .item img {
margin-bottom: 12px;
width: auto;
}
.home-slider .slider-content {
width: 100%;
left: 15px;
text-align: center;
}
.home-slider .item1 .slider-content h2 {
background-color: rgba(0, 0, 0, 0.5);
color: #ffffff;
display: inline-block;
font-family: "Roboto", sans-serif;
font-size: 36px;
font-weight: 900;
line-height: 40px;
padding: 16px 29px 23px 28px;
}
.home-slider .item2 .slider-content {
color: #ffffff;
}
.home-slider .item2 .slider-content h2 {
font-family: "Poiret One", cursive;
font-size: 110px;
font-weight: 900;
line-height: 100px;
margin-bottom: 40px;
}
.home-slider .item2 .slider-content h3 {
font-family: "Raleway", sans-serif;
font-size: 36px;
line-height: 42px;
font-weight: 100;
}
.home-slider .btn {
margin-top: 15px;
}
.btn-theme-color {
color: #ffffff;
font-family: "Roboto", sans-serif;
background-color: #e6ae03;
border: 0 none;
border-radius: 0;
font-size: 16px;
font-weight: 400;
padding: 13px 28px 13px 29px;
position: relative;
text-transform: uppercase;
z-index: 0;
}
.btn-theme-color:before {
background-color: rgba(0, 0, 0, 0.1);
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 0;
z-index: -1;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.btn-theme-color:hover {
background-color: rgba(230, 174, 3, 0.9);
color: #fff;
}
.btn-radius {
border-radius: 3px;
}
/* ----- home slider controls ---------*/
.home-slider .owl-controls .owl-prev,
.control-two .owl-controls .owl-prev,
.home-slider .owl-controls .owl-next,
.control-two .owl-controls .owl-next {
background-color: transparent;
color: #ffffff;
text-align: center;
opacity: 0;
width: 50px;
height: 95px;
font-size: 42px;
line-height: 95px;
position: absolute;
top: 50%;
z-index: 100;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.home-slider .owl-controls .slick-prev,
.control-two .owl-controls .slick-prev,
.home-slider .owl-controls .owl-prev,
.control-two .owl-controls .owl-prev {
left: 0;
}
.home-slider .owl-controls .slick-next,
.control-two .owl-controls .slick-next,
.home-slider .owl-controls .owl-next,
.control-two .owl-controls .owl-next {
right: 0;
}
.home-slider .slick-arrow,
.control-two .slick-arrow {
background-color: transparent;
border: 0 none;
color: #fff;
font-size: 42px;
height: 93px;
line-height: 50px;
padding: 0;
position: absolute;
text-align: center;
top: 50%;
opacity: 0;
width: 50px;
z-index: 20;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.home-slider .slick-arrow:focus,
.control-two .slick-arrow:focus {
border: 0 none;
outline: 0 none;
}
.home-slider .slick-prev,
.control-two .slick-prev {
left: 0;
}
.home-slider .slick-next,
.control-two .slick-next {
right: 0;
}
.home-slider:hover .slick-prev,
.control-two:hover .slick-prev,
.home-slider:hover .slick-next,
.control-two:hover .slick-next,
.home-slider:hover .owl-prev,
.control-two:hover .owl-prev,
.home-slider:hover .owl-next,
.control-two:hover .owl-next {
opacity: 1;
}
.home-slider:hover .slick-prev:hover,
.control-two:hover .slick-prev:hover,
.home-slider:hover .slick-next:hover,
.control-two:hover .slick-next:hover,
.home-slider:hover .owl-prev:hover,
.control-two:hover .owl-prev:hover,
.home-slider:hover .owl-next:hover,
.control-two:hover .owl-next:hover {
background-color: rgba(0, 0, 0, 0.2);
}
/* index 2 */
.banner-img {
height: 750px;
}
.banner-img img {
display: block;
height: auto;
left: 50%;
max-width: 100%;
position: absolute;
top: 30%;
-webkit-transform: translateX(-50%) translateY(-41%);
-moz-transform: translateX(-50%) translateY(-41%);
-ms-transform: translateX(-50%) translateY(-41%);
-o-transform: translateX(-50%) translateY(-41%);
transform: translateX(-50%) translateY(-41%);
}
.banner-img img:last-child {
top: 100%;
}
.banner-text {
padding-top: 270px;
z-index: 12;
}
.banner-text h2 {
color: #ffffff;
font-family: "hipstelveticalight";
font-size: 200px;
text-shadow: 0.5px 0.866px 7px rgba(0, 0, 0, 0.2);
text-transform: uppercase;
}
.banner-text h3 {
border-bottom: 1px solid #dddddd;
border-top: 1px solid #dddddd;
color: #ffffff;
display: inline-block;
font-family: "Tulpen One", cursive;
font-size: 60px;
letter-spacing: 5px;
margin-top: 20px;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
text-transform: uppercase;
}
/*==============================================
Creative home / home-slider2
===============================================*/
.home-slider2 .item {
background-color: #fff;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.home-slider2 .item .container {
position: relative;
}
.home-slider2 .item img {
margin-bottom: 12px;
width: auto;
}
.home-slider2 .slider-content {
font-family: "Raleway", sans-serif;
}
.home-slider2 .slider-content h1 {
font-size: 50px;
font-weight: 800;
}
.home-slider2 .slider-content h3 {
margin-top: 20px;
}
.home-slider2 .slider-content p {
font-size: 20px;
margin-top: 20px;
}
.home-slider2 .slider-content h1 span,
.home-slider2 .slider-content p span,
.home-slider2 .slider-content h3 span {
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
display: inline-block;
padding: 10px 20px;
}
/*==============================================
Creative Home 2
===============================================*/
.zIndex3 {
z-index: 3;
}
figure[class^="curv"] {
bottom: 1px;
left: 0;
position: absolute;
width: 100%;
z-index: 1;
}
figure[class^="curv"].white svg {
fill: #fff;
}
figure[class^="curv"].gray svg {
fill: #eeeeee;
}
figure[class^="curv"].dark svg {
fill: #333333;
}
figure.curve.top {
bottom: auto;
top: 9px;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
figure.curve.bottom {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
.safari5 figure[class^="curv"] {
height: 95px;
}
.safari5 figure[class^="curv"].bottom {
height: 77px;
}
/* Internet Explorer 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
figure[class^="curv"] {
bottom: 36px;
}
figure.curve.top {
top: 45px;
}
}
/* Internet Explorer 9-10 */
@media screen and (min-width: 0\0) {
figure[class^="curv"] {
bottom: 37px;
}
figure.curve.top {
top: 45px;
}
}
/*==============================================
Service- wrap
===============================================*/
.service-wrap {
font-family: "Roboto", sans-serif;
text-align: center;
}
.service-wrap .service-icon {
border-radius: 50%;
color: #e6ae03;
font-size: 48px;
height: 98px;
line-height: 98px;
margin: 0 auto 42px;
position: relative;
width: 98px;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.service-wrap .service-icon:before {
background-color: rgba(230, 174, 3, 0.1);
border-radius: 50%;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.service-wrap .service-icon:after {
border: 1px solid #e6ae03;
border-radius: 50%;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
.service-wrap:hover .service-icon:before {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
.service-wrap:hover .service-icon:after {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.service-wrap .service-desc {
border-bottom: 2px solid #eaeaea;
}
.service-wrap h3 {
color: #393c3f;
line-height: 30px;
margin-bottom: 12px;
}
.service-wrap p {
font-size: 16px;
color: #7f8488;
line-height: 28px;
margin-bottom: 34px;
}
.service-wrap.type2 {
background-color: transparent;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.service-wrap.type2:hover {
background-color: #eeeeee;
}
.service-wrap.type-3 .service-icon {
font-size: 30px;
height: 120px;
line-height: 120px;
width: 120px;
margin-bottom: 27px;
}
.service-wrap.type-3 .service-icon::before {
background-color: rgba(230, 174, 3, 0.3);
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
.service-wrap.type-3 .service-icon::after {
border-color: rgba(230, 174, 3, 0.2);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.service-wrap.type-3 .service-desc {
border: 0;
}
.service-wrap.type-3 h4 {
color: rgba(0, 0, 0, 0.87);
font-family: "Raleway", sans-serif;
font-weight: 500;
margin-bottom: 18px;
}
.service-wrap.type-3:hover .service-icon {
background-color: #e6ae03;
color: #fff;
}
.service-wrap.type-3:hover .service-icon::before {
-webkit-transform: scale(1.15);
-moz-transform: scale(1.15);
-ms-transform: scale(1.15);
-o-transform: scale(1.15);
transform: scale(1.15);
}
.service-wrap.type-4 {
background-color: #ffffff;
margin-bottom: 30px;
padding: 100px 30px 94px;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
}
.service-wrap.type-4 .service-icon {
margin-bottom: 89px;
line-height: 104px;
}
.service-wrap.type-4 .service-icon::before {
background-color: transparent;
}
.service-wrap.type-4 .service-icon::after {
border-color: rgba(0, 0, 0, 0.1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.service-wrap.type-4 .service-desc {
border: 0;
}
.service-wrap.type-4 h3 {
margin-bottom: 32px;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
}
.service-wrap.type-4 p {
margin-bottom: 0;
}
.service-wrap.type-4:hover {
box-shadow: 1.736px 9.848px 11.64px 0.36px rgba(0, 0, 0, 0.15);
}
.service-wrap.type-4:hover h3 {
color: #e6ae03;
}
.service-gray {
background-color: #f7f7f7;
}
.service-left-icon {
margin-bottom: 50px;
}
.service-left-icon:last-child {
margin-bottom: 0;
}
.service-left-icon .table-cell {
vertical-align: top;
}
.service-left-icon .icon {
color: #e6ae03;
font-size: 42px;
padding-right: 20px;
}
.service-left-icon h4 {
color: #333333;
font-family: "Merriweather", serif;
font-weight: 700;
margin-bottom: 13px;
text-transform: uppercase;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.service-left-icon p {
color: #778792;
font-family: "Open Sans", sans-serif;
line-height: 24px;
margin-bottom: 0;
}
.service-left-icon:hover h4 {
color: #e6ae03;
}
/*==============================================
video bg
===============================================*/
.video-bg {
padding: 275px 0;
position: relative;
}
.video-bg .video-overlay {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 0;
}
.video-bg .player.mb_YTPlayer {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.video-bg .player.mb_YTPlayer::before {
background-color: #000;
bottom: 0;
content: "";
left: 0;
opacity: 0.5;
position: absolute;
right: 0;
top: 0;
}
.video-bg .player.mb_YTPlayer .YTPOverlay {
background-color: rgba(0, 0, 0, 0.5);
}
.video-bg .section-head.style8 h4 {
color: #fff;
}
.video-bg .section-head.style8 h2,
.video-bg .section-head.style8 h2 b {
color: rgba(255, 255, 255, 0.8);
}
.video-bg .section-head.style8 p {
color: rgba(255, 255, 255, 0.4);
margin: 0;
padding: 0;
}
.video-control a {
border: 1px solid #fff;
border-radius: 22px;
bottom: 100px;
color: #fff;
display: block;
height: 36px;
position: absolute;
right: 100px;
text-indent: -999em;
width: 36px;
-webkit-transition: all none ease-in-out 0s;
-moz-transition: all none ease-in-out 0s;
-o-transition: all none ease-in-out 0s;
transition: all none ease-in-out 0s;
}
.video-control .video-pause:before,
.video-control .video-pause:after {
background-color: #fff;
content: "";
height: 14px;
position: absolute;
top: 50%;
width: 2px;
}
.video-control .video-pause::before {
left: 50%;
margin: -7px 0 0 -4px;
}
.video-control .video-pause::after {
margin: -7px -5px 0 0;
right: 50%;
}
.video-control .video-play {
display: none;
}
.video-control .video-play::before {
border-color: transparent transparent transparent #fff;
border-style: solid;
border-width: 7px 9px;
content: "";
left: 14px;
position: absolute;
top: 11px;
}
/*==============================================
Intro
===============================================*/
.intro-top {
background-color: #e6ae03;
}
.intro-top .intro-text {
background-color: transparent;
}
.intro-top .intro-text h2,
.intro-top .intro-text p {
color: #ffffff;
}
.intro-bottom {
background-color: #ecebeb;
}
.intro-text {
background-color: #ecebeb;
padding: 55px 70px;
}
.intro-text h2 {
font-family: "Poiret One", cursive;
color: #333333;
font-size: 60px;
margin-bottom: 16px;
}
.intro-text p {
font-family: "Roboto", sans-serif;
margin-bottom: 0;
font-size: 16px;
line-height: 26px;
}
.intro-thumb {
padding: 0;
}
.intro-thumb img {
height: 100%;
width: 100%;
}
/*==============================================
Team
===============================================*/
.team-wrap:nth-child(n+5) {
margin-top: 30px;
}
.team-mate {
border: 1px solid #e1e0e0;
padding: 30px;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
}
.team-mate:hover {
box-shadow: 1.736px 9.848px 11.64px 0.36px rgba(0, 0, 0, 0.15);
}
.member-thumb {
position: relative;
}
.member-thumb img {
width: 100%;
}
.member-info {
background-color: #333333;
}
.social-profile {
position: relative;
}
.social-profile > span {
background-color: #e6ae03;
border-right: 1px solid;
color: #fff;
cursor: pointer;
display: block;
float: left;
font-size: 16px;
height: 45px;
position: relative;
line-height: 45px;
text-align: center;
width: 45px;
z-index: 10;
}
.social-profile > span:hover + .social-links {
width: 100%;
}
.social-links {
background-color: #333333;
left: 0;
overflow: hidden;
padding-left: 45px;
position: absolute;
white-space: nowrap;
width: 0;
-webkit-transition: all 0.5s ease-in-out 0s;
-moz-transition: all 0.5s ease-in-out 0s;
-o-transition: all 0.5s ease-in-out 0s;
transition: all 0.5s ease-in-out 0s;
}
.social-links:hover {
width: 100%;
}
.social-links li {
display: inline-block;
}
.social-links li a {
color: #ffffff;
display: block;
line-height: 45px;
text-align: center;
width: 45px;
}
.social-links li a:hover {
background-color: #1c1c1c;
}
.member-name {
padding-left: 45px;
text-align: center;
}
.member-name h4 {
color: #ffffff;
font-family: "Raleway", sans-serif;
font-size: 14px;
letter-spacing: 2px;
padding-top: 15px;
text-transform: uppercase;
}
/*! Team Member */
.team-carousel2 .owl-stage-outer {
padding-top: 17px;
}
.team-carousel2 .control span {
color: #0b1621;
font-size: 60px;
position: absolute;
top: 50%;
cursor: pointer;
opacity: 0;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.team-carousel2 .control span:hover {
color: #fff;
}
.team-carousel2 .control .owl-prev {
left: -45px;
}
.team-carousel2 .control .owl-next {
right: -45px;
}
.team-member {
font-family: "Dosis", sans-serif;
color: #ccc;
}
.team-member .avatar {
position: relative;
}
.team-member .avatar img {
margin: 0 auto;
width: auto;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.team-member .avatar img + img {
opacity: 0;
left: 50%;
position: absolute;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.team-member .team-meta {
margin-top: 25px;
opacity: 0;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.team-member h2 {
font-size: 36px;
}
.team-member span {
display: block;
font-size: 24px;
line-height: normal;
margin-top: 5px;
}
.team-member li {
display: inline-block;
margin: 20px 10px 0;
}
.team-member li a {
display: block;
color: #ccc;
font-size: 24px;
}
.team-member li a:hover {
color: #e6ae03;
}
.team-member.style-2 img {
width: 100%;
position: absolute;
left: 0;
top: 0;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
}
.team-member.style-2 .social-profile {
background-color: #19232e;
bottom: 0;
position: absolute;
right: 0;
top: 0;
width: 49px;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
.team-member.style-2 .social-profile .ribbon {
background-color: transparent;
border-color: #eeeeee #eeeeee transparent transparent;
border-style: solid;
border-width: 25px;
height: 49px;
margin: 0;
position: absolute;
right: 0;
top: 0;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
}
.team-member.style-2 .social-profile ul {
margin-top: 75px;
}
.team-member.style-2 .social-profile li {
display: block;
margin: 0 0 2px;
}
.team-member.style-2 .social-profile li:last-child {
margin-bottom: 0;
}
.team-member.style-2 .social-profile li a {
color: #fff;
font-size: 14px;
}
.team-member.style-2 .social-profile li a:hover {
color: #e6ae03;
}
.team-member.style-2 .meta {
background-color: #19232e;
bottom: 0;
font-family: "Roboto", sans-serif;
height: 60px;
left: 0;
padding: 9px 0 10px;
position: absolute;
right: 0;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
}
.team-member.style-2 .meta .ribbon {
border-color: transparent transparent #eeeeee #eeeeee;
border-style: solid;
border-width: 30px 25px;
height: 60px;
left: 0;
margin: 0;
position: absolute;
top: 0;
width: 50px;
}
.team-member.style-2 .meta h4 {
color: #e6ae03;
font-weight: 700;
}
.team-member.style-2 .meta span {
font-size: 14px;
}
.team-member.style-2:hover img {
width: -webkit-clac(100% - 49px);
width: calc(100% - 49px);
}
.team-member.style-2:hover .social-profile {
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}
.team-member.style-2:hover .meta {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
.team-member.style-3 {
font-family: "Raleway", sans-serif;
}
.team-member.style-3 .avatar {
display: inline-block;
margin-bottom: 38px;
}
.team-member.style-3 .avatar img {
left: 0;
position: absolute;
top: 0;
-webkit-transform: scale(0.94);
-moz-transform: scale(0.94);
-ms-transform: scale(0.94);
-o-transform: scale(0.94);
transform: scale(0.94);
}
.team-member.style-3 span {
font-size: 18px;
margin-top: 12px;
}
.team-member.style-3 li {
display: inline-block;
float: none;
margin: 0;
}
.team-member.style-3 li a {
margin: 0;
}
.active.center .team-member img,
.active.center .team-member .team-meta {
opacity: 1;
}
.active.center .team-member .control span {
opacity: 1;
}
/*! Gray v1.4.5 (https://github.com/karlhorky/gray) | MIT */
.grayscale {
filter: url("data:image/svg+xml;utf8,#grayscale");
-webkit-filter: grayscale(1);
-moz-filter: grayscale(1);
-ms-filter: grayscale(1);
-o-filter: grayscale(1);
filter: grayscale(1);
filter: gray;
}
.grayscale-half {
filter: url("data:image/svg+xml;utf8,#grayscale");
-webkit-filter: grayscale(0.8);
-moz-filter: grayscale(0.8);
-ms-filter: grayscale(0.8);
-o-filter: grayscale(0.8);
filter: grayscale(0.8);
filter: gray;
}
.grayscale-half.grayscale-fade,
.grayscale.grayscale-fade {
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
/* Webkit hack until filter is unprefixed */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.grayscale-half.grayscale-fade,
.grayscale.grayscale-fade {
-webkit-transition: -webkit-filter 0.5s;
transition: -webkit-filter 0.5s;
}
}
.grayscale.grayscale-off,
.promo-block:hover .grayscale,
.grayscale-half.grayscale-fade:hover,
.grayscale.grayscale-fade:hover,
.team-single.style3:hover .grayscale {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
/* Background element */
.grayscale.grayscale-replaced {
-webkit-filter: none;
filter: none;
}
.grayscale.grayscale-replaced > svg {
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
opacity: 1;
}
.grayscale.grayscale-replaced.grayscale-off > svg,
.grayscale.grayscale-replaced.grayscale-fade:hover > svg {
opacity: 0;
}
/*==============================================
Team carousel
===============================================*/
.team-item {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.team-item .container {
min-height: 450px;
position: relative;
}
.team-item .member-details {
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
padding: 40px;
position: absolute;
right: 0;
top: 50%;
width: 40%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.team-item .member-details h2 {
margin-bottom: 15px;
}
.team-item .member-details ul {
padding-left: 0;
}
.team-item .member-details ul li a {
border-radius: 3px;
font-size: 14px;
height: 40px;
line-height: 40px;
margin-right: 3px;
width: 40px;
}
.team-item .member-details ul li:last-child a {
margin-right: 0;
}
/*==============================================
Team style 3
===============================================*/
.team-dark {
background-color: #19232e;
}
.team-single .avatar {
position: relative;
}
.team-single figcaption {
bottom: 0;
left: 0;
position: absolute;
right: 0;
}
.team-single .name {
background-color: rgba(25, 35, 46, 0.8);
height: 40px;
line-height: 40px;
font-weight: 700;
color: #e6ae03;
}
.team-single .designation {
background-color: rgba(25, 35, 46, 0.9);
display: block;
height: 40px;
line-height: 40px;
font-weight: 300;
color: #fff;
}
.team-single .social-links {
background-color: transparent;
margin: 12px 0 0;
padding: 0;
position: static;
width: auto;
overflow: visible;
}
.team-single .social-links li a {
color: #19232e;
line-height: normal;
margin: 0 8px;
width: auto;
}
.team-single .social-links li a:hover {
background-color: transparent;
color: #e6ae03;
}
.team-single .social-links.white li a {
color: #fff;
}
.team-single .social-links.white li a:hover {
color: #e6ae03;
}
.team-single.style2 {
position: relative;
}
.team-single.style2::before {
border: 20px solid #f2f2f2;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
-webkit-transition: all 0.25s ease-in-out 0s;
-moz-transition: all 0.25s ease-in-out 0s;
-o-transition: all 0.25s ease-in-out 0s;
transition: all 0.25s ease-in-out 0s;
}
.team-single.style2 figcaption {
background-color: #e6ae03;
bottom: 20px;
left: 20px;
right: 20px;
top: 20px;
z-index: 1;
-webkit-transform: scaleY(0);
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-o-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: center bottom 0;
-moz-transform-origin: center bottom 0;
-ms-transform-origin: center bottom 0;
-o-transform-origin: center bottom 0;
transform-origin: center bottom 0;
-webkit-transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
-moz-transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
-ms-transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
-o-transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}
.team-single.style2 .meta {
left: 35px;
position: absolute;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.team-single.style2 .meta li {
color: #fff;
font-size: 18px;
font-weight: 400;
line-height: 40px;
}
.team-single.style2 .social-links {
bottom: 45px;
left: 0;
margin: 0;
position: absolute;
right: 0;
}
.team-single.style2 .social-links:before {
background-color: #fff;
content: "";
height: 2px;
left: 50%;
margin-left: -47.5px;
position: absolute;
top: -10px;
width: 95px;
}
.team-single.style2 .social-links li a {
border-radius: 50%;
color: #222;
font-size: 24px;
height: 45px;
line-height: 49px;
margin: 0 1px;
position: relative;
text-align: center;
width: 45px;
z-index: 0;
}
.team-single.style2 .social-links li a::before,
.team-single.style2 .social-links li a::after {
background-color: #fff;
border-radius: 50%;
content: "";
height: 40px;
width: 40px;
left: 50%;
top: 50%;
z-index: -1;
position: absolute;
margin: -20px 0 0 -20px;
}
.team-single.style2 .social-links li a::after {
background-color: rgba(255, 255, 255, 0.3);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.team-single.style2:hover::before {
opacity: 0;
}
.team-single.style2:hover figcaption {
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
transform: scaleY(1);
}
.team-single.style3 h3 {
color: #333333;
}
.team-single.style3 span {
display: block;
margin-top: 5px;
}
.team-single.style3 .sep {
background-color: #333333;
margin-top: 42px;
height: 2px;
display: block;
width: 95px;
}
.team-single.style3 p {
padding-top: 15px;
position: relative;
}
.team-single.style3 p b {
display: block;
color: #555;
}
.team-single.style3 li a {
margin: 0 1px;
}
.team-single.style5 .hover {
background: url("../img/icons/cross.png") no-repeat scroll center center rgba(255, 255, 255, 0.6);
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
opacity: 0;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.team-single.style5 .team-info {
background-color: #f6f6f6;
padding-top: 22px;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.team-single.style5 .team-info h4 {
color: #333333;
font-family: "Merriweather", serif;
margin-bottom: 7px;
}
.team-single.style5 .team-info span {
color: #999999;
font-family: "Open Sans", sans-serif;
font-size: 15px;
font-weight: 400;
}
.team-single.style5 .social-links {
background-color: #e6ae03;
font-size: 0;
margin-top: 26px;
}
.team-single.style5 .social-links li a {
color: rgba(0, 0, 0, 0.5);
border: 0 none;
font-size: 14px;
height: auto;
line-height: 45px;
margin: 0 8px;
width: auto;
}
.team-single.style5 .social-links li a:hover {
color: #fff;
}
.team-single.style5:hover .hover {
opacity: 1;
}
.team-single.style5:hover .team-info {
background-color: #e6ae03;
}
.team-single.style5:hover .team-info h4 {
color: #fff;
}
.team-single.style5:hover .social-links {
background-color: #1f2122;
}
.team-single.style5:hover .social-links li a {
color: #6f6e6e;
}
.team-single.style5:hover .social-links li a:hover {
color: #fff;
}
.team-single.style-6 .team-info {
background-color: #fff;
position: relative;
padding: 24px 20px 25px;
}
.team-single.style-6 .team-info:after {
border-color: transparent #e6ae03 #e6ae03 transparent;
border-style: solid;
border-width: 52px;
content: "";
position: absolute;
right: 0;
top: 0;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.team-single.style-6 .team-info h4 {
font-family: "Merriweather", serif;
font-weight: 700;
line-height: 24px;
color: #333333;
}
.team-single.style-6 .team-info span {
font-family: "Open Sans", sans-serif;
font-size: 15px;
color: #999;
font-weight: 400;
display: block;
margin-top: 5px;
}
.team-single.style-6 .team-info .social-toggle {
background-color: #fff;
border-radius: 50px;
bottom: 12px;
color: #afafaf;
cursor: pointer;
font-family: "Raleway", sans-serif;
font-size: 52px;
font-weight: 100;
height: 32px;
line-height: 32px;
margin: 0;
padding: 1px 0 0 2px;
position: absolute;
right: 12px;
text-align: center;
width: 32px;
z-index: 1;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
}
.team-single.style-6 .team-info .social-links {
background-color: #e6ae03;
bottom: 0;
left: 0;
margin: 0;
position: absolute;
right: 0;
-webkit-transform: translateY(100%) scaleY(0);
-moz-transform: translateY(100%) scaleY(0);
-ms-transform: translateY(100%) scaleY(0);
-o-transform: translateY(100%) scaleY(0);
transform: translateY(100%) scaleY(0);
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
-webkit-transform-origin: 0 0 0;
-moz-transform-origin: 0 0 0;
-ms-transform-origin: 0 0 0;
-o-transform-origin: 0 0 0;
transform-origin: 0 0 0;
}
.team-single.style-6 .team-info .social-links a {
color: rgba(0, 0, 0, 0.3);
display: block;
font-size: 14px;
line-height: 45px;
margin: 0;
padding: 0 8px;
}
.team-single.style-6 .team-info .social-links a:hover {
color: #fff;
}
.team-single.style-6 .team-info:hover:after {
border-color: transparent #f3f3f3 #f3f3f3 transparent;
}
.team-single.style-6 .team-info:hover .social-toggle {
background-color: #e6ae03;
color: #fff;
}
.team-single.style-6 .team-info:hover .social-links {
-webkit-transform: translateY(100%) scaleY(1);
-moz-transform: translateY(100%) scaleY(1);
-ms-transform: translateY(100%) scaleY(1);
-o-transform: translateY(100%) scaleY(1);
transform: translateY(100%) scaleY(1);
}
/*==============================================
Works
===============================================*/
/* Portfolio filter */
.portfolio-filter {
margin: 0 0 50px;
}
.portfolio-filter li a {
border: 1px solid transparent;
color: #777777;
display: block;
font-size: 16px;
line-height: normal;
padding: 6px 12px;
text-transform: uppercase;
}
.portfolio-filter li a:hover {
border-color: #e5e5e5;
}
.portfolio-filter li a.active {
border-color: #e6ae03;
color: #e6ae03;
}
.portfolio-filter.type2 {
border-bottom: 1px solid #e5e5e5;
border-top: 1px solid #e5e5e5;
}
.portfolio-filter.type2 li {
padding: 0;
}
.portfolio-filter.type2 li a {
border: 0;
padding: 10px 20px;
}
.portfolio-filter.type2 li a:hover,
.portfolio-filter.type2 li a.active {
background-color: #e6ae03;
color: #fff;
}
.creative-item {
position: relative;
}
.creative-item img {
width: 100%;
}
.creative-item:hover .caption {
bottom: 75%;
opacity: 1;
}
.caption {
bottom: -100%;
opacity: 0;
position: absolute;
right: 15px;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.caption li {
display: inline-block;
}
.caption li a {
background-color: #ffffff;
border-radius: 50%;
margin: 0 1.5px;
text-align: center;
color: #777777;
display: block;
font-size: 15.6px;
line-height: 39px;
width: 39px;
}
.caption li a:hover {
background-color: #e6ae03;
border-color: #ffffff;
color: #ffffff;
}
.caption h4 {
bottom: 13px;
color: #fff;
font-family: "Oswald", sans-serif;
font-size: 16px;
font-weight: 300;
position: absolute;
text-transform: uppercase;
width: 100%;
}
.mfp-bg.white-bg {
background-color: #ffffff;
opacity: 1;
}
.popup-wrapper {
padding: 45px 0;
}
.popup-wrapper .post-media {
margin-bottom: 30px;
}
.popup-wrapper .post-media img {
width: 100%;
}
.project-info h3 {
color: #333333;
font-weight: 700;
margin-bottom: 25px;
text-transform: uppercase;
}
.project-info .heading {
margin-bottom: 25px;
}
.project-info .heading h3 {
font-weight: 400;
font-size: 24px;
}
.project-details {
font-family: "Roboto", sans-serif;
}
.project-details p {
border-bottom: 1px solid #eeeeee;
margin-bottom: 5px;
padding-bottom: 5px;
}
.project-details p:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: 0;
}
.project-details p span {
font-weight: 700;
}
.project-details .portfolio-share {
border-top: 0 none;
margin-top: 0;
padding-top: 0;
}
.project-details + .project-details {
margin-top: 30px;
}
#pf-slider .item {
height: 500px;
}
#pf-carousel {
margin-top: 30px;
}
#pf-carousel .slick-list {
padding: 0 !important;
}
#pf-carousel .item {
cursor: pointer;
height: 200px;
}
#pf-carousel .item img {
width: 100%;
}
#pf-carousel .slick-prev {
left: 0;
}
#pf-carousel .slick-next {
right: 0;
}
.detail-single {
color: #555;
font-size: 18px;
font-weight: 200;
line-height: 32px;
}
.detail-single h4 {
font-weight: 700;
line-height: 32px;
margin-bottom: 34px;
}
.detail-single .sep {
background-color: #333333;
display: block;
height: 3px;
margin-bottom: 45px;
width: 100px;
}
.detail-single + .detail-single {
margin-top: 60px;
}
.detail-single li {
font-weight: 400;
line-height: 40px;
}
.detail-single li a {
font-weight: 700;
color: #555;
}
.detail-single li a:hover {
color: #e6ae03;
}
.pf-pagination li {
display: inline-block;
}
.pf-pagination li:nth-child(2) a {
background-color: #454545;
border-color: #454545;
color: #999;
}
.pf-pagination li a {
border: 1px solid #e5e5e5;
color: #777777;
display: block;
font-weight: 500;
line-height: 50px;
text-transform: uppercase;
width: 130px;
}
.pf-pagination li a span {
display: inline-block;
margin: 0 10px;
}
.pf-pagination li a i {
display: inline-block;
font-size: 20px;
font-style: normal;
line-height: normal;
position: relative;
top: 2px;
}
.pf-pagination li a:hover {
background-color: #e6ae03;
border-color: #e6ae03;
color: #fff;
}
/*--------------- direction awere hover -----------------*/
.portfolio-heading {
margin-bottom: 65px;
}
.portfolio-heading .heading.type-two {
float: left;
margin-bottom: 0;
}
.portfolio-heading nav {
margin-top: 10px;
float: right;
}
.portfolio-heading nav .portfolio-filter {
margin-bottom: 0;
}
.page-breadcrumb ul {
background-color: #fdfbfc;
border-radius: 2px;
display: inline-block;
}
.page-breadcrumb ul li a {
color: #777777;
}
.page-breadcrumb ul li + li:before {
content: ">";
font-family: consolas;
}
/*==============================================
Services
===============================================*/
.text-block {
margin-bottom: 55px;
}
.text-block h2 {
color: #323232;
font-family: "Raleway", sans-serif;
font-size: 32px;
font-weight: 900;
margin-bottom: 13px;
text-transform: uppercase;
}
.text-block p {
font-family: "Roboto", sans-serif;
font-weight: 300;
margin-bottom: 0;
line-height: 24px;
}
.text-block.as-feature {
background-color: #23292e;
padding: 43px 28px 30px;
}
.text-block.as-feature h2 {
color: rgba(255, 255, 255, 0.5);
}
.text-block.as-feature p {
color: rgba(255, 255, 255, 0.2);
}
.service-block .service-icon {
background-color: #faf8f8;
color: #e6ae03;
font-size: 60px;
position: relative;
min-height: 296px;
text-align: center;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.service-block .service-icon i {
left: 50%;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
-moz-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
-o-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
}
.service-block .service-desc {
background-color: #efefef;
padding: 35px;
position: relative;
font-weight: 300;
}
.service-block .service-desc:before {
border: 1px solid transparent;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.service-block .service-desc h2 {
font-family: "Poiret One", cursive;
color: #333333;
text-transform: uppercase;
font-size: 28px;
margin-bottom: 13px;
}
.service-block .service-desc p {
font-family: "Roboto", sans-serif;
margin-bottom: 0;
}
.service-block:hover .service-icon {
background-color: #373737;
color: #676767;
}
.service-block:hover .service-desc:before {
border-color: #d4d4d4;
}
.dark-features {
background-color: #1d2226;
}
.dark-features .section-head h4 {
color: #fff;
}
.dark-features .section-head h2,
.dark-features .section-head h2 b {
color: rgba(255, 255, 255, 0.7);
}
.dark-features .section-head p {
color: rgba(255, 255, 255, 0.1);
}
/*==============================================
Pricing
===============================================*/
.price-table .price-head {
background-color: #eeeeee;
padding: 18px 47px 19px;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.price-table .price-head h2 {
color: #333333;
font-family: "Roboto", sans-serif;
font-size: 44px;
font-weight: 300;
line-height: 49px;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.price-table .price-head h2 strong {
display: block;
font-family: "Raleway", sans-serif;
font-weight: 900;
text-transform: uppercase;
}
.price-table .price-head h2 span {
font-size: 24px;
margin-left: -10px;
}
.price-table .price-body {
font-family: "Roboto", sans-serif;
padding-left: 50px;
padding-top: 70px;
}
.price-table .price-body p {
margin-bottom: 24px;
padding-right: 65px;
}
.price-table .price-body ul {
position: relative;
padding-bottom: 55px;
}
.price-table .price-body ul:before {
background-color: #373737;
bottom: 0;
content: "";
height: 2px;
left: 3px;
position: absolute;
width: 31px;
}
.price-table .price-body li {
line-height: 40px;
}
.price-table .price-foot {
background-color: #eeeeee;
margin-top: 60px;
padding: 40px 0;
}
.price-table:hover .price-head {
background-color: #e6ae03;
}
.price-table:hover .price-head h2 {
color: #ffffff;
}
.price-table:hover .price-head h2 strong {
color: #333333;
}
.price-table:hover .icon-btn i {
background-color: #e6ae03;
}
.price-table:hover .icon-btn span {
background-color: #373737;
}
/*==============================================
Twitter Feed
===============================================*/
.tweet-wrapper {
position: relative;
}
.tweet-wrapper .twitter-follow {
border: 1px solid;
color: #ffffff;
display: block;
font-size: 13px;
font-weight: 700;
line-height: normal;
padding: 7px 15px;
position: absolute;
right: 5px;
text-transform: uppercase;
top: -13px;
z-index: 999;
}
.tweet-wrapper .twitter-follow:hover {
background-color: #e6ae03;
border-color: #e6ae03;
}
.twitter-item {
display: table;
width: 100%;
}
.twitter-item > div {
display: table-cell;
vertical-align: top;
}
.twitter-item .twitter-pic {
padding-right: 20px;
}
.twitter-item .twitter-pic img {
width: auto;
}
.twitter-item .author-name {
font-size: 18px;
margin-right: 10px;
}
.twitter-item .author-username {
font-size: 13px;
}
.twitter-item .tweet-content {
color: #ffffff;
font-weight: 400;
position: relative;
top: -5px;
}
.twitter-item .tweet-content a {
font-weight: 400 !important;
}
.twitter-item .tweet-content a:hover {
color: #ffffff;
}
.twitter-item .tweet-content span {
display: inline-block;
}
.twitter-item .tweet-content .tweet-time {
float: left;
}
.twitter-feed .owl-dots {
text-align: center;
margin-top: 15px;
}
.twitter-feed .owl-dots .owl-dot {
background-color: #000;
border-radius: 50px;
display: inline-block;
height: 12px;
margin: 0 2px;
opacity: 0.5;
width: 12px;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.twitter-feed .owl-dots .owl-dot:hover {
opacity: 1;
}
.twitter-feed .owl-dots .owl-dot.active {
background-color: #e6ae03;
opacity: 1;
}
/*==============================================
NewsBlock
===============================================*/
.news-row {
position: relative;
}
.news-row.with-gutter [class^="col-"] {
padding-left: 5px;
padding-right: 5px;
}
.news-heading {
margin-bottom: 30px;
}
.news-heading h2 {
position: static;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
.news-block {
background-color: #eeeeee;
position: relative;
}
.news-block::before {
border: 1px solid transparent;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.news-block:hover:before {
border-color: #cccccc;
}
.news-block .post-entry {
border-bottom: 0 none;
margin-bottom: 0;
padding: 30px;
position: relative;
z-index: 1;
}
.news-block h2 {
color: #333333;
font-family: "Poiret One", cursive;
margin-bottom: 20px;
line-height: 36px;
text-align: center;
text-transform: uppercase;
}
.news-block p {
font-family: "Roboto", sans-serif;
}
.news-block .icon-btn {
margin-left: -30px;
padding-top: 10px;
}
.news-block .icon-btn span {
min-width: 198px;
font-size: 16px;
}
.news-block .post-thumb img {
width: 100%;
}
.news-block.type2 {
background-color: #fff;
}
.news-block.type2::before {
content: none;
}
.news-block.type2 .post-media img {
width: 100%;
}
.news-block.type2 .entry-content {
padding: 32px 44px 54px;
}
.news-block.type2 .entry-title {
font-family: "Open Sans", sans-serif;
font-weight: 600;
}
.news-block.type2 .entry-title a {
color: rgba(0, 0, 0, 0.7);
}
.news-block.type2 .entry-excerpt {
color: rgba(0, 0, 0, 0.54);
font-family: "Open Sans", sans-serif;
font-weight: 400;
}
.news-block.type2 .readmore {
color: #666666;
font-family: "Raleway", sans-serif;
display: inline-block;
font-size: 16px;
font-weight: 700;
padding-top: 29px;
text-transform: uppercase;
}
.news-block.type2 .readmore:hover {
color: #e6ae03;
}
.more-posts {
bottom: -9px;
left: 50%;
position: absolute;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.more-posts a {
color: #dcdada;
display: inline-block;
font-size: 42px;
font-weight: 700;
line-height: 48px;
text-transform: uppercase;
}
.more-posts a:hover {
color: #e6ae03;
}
.single-post {
background-color: #fff;
font-family: "Raleway", sans-serif;
}
.single-post .tablecell {
float: none;
}
.single-post .cat {
display: inline-block;
font-family: "Great Vibes", cursive;
font-size: 22px;
margin-bottom: 10px;
}
.single-post h3 {
border-bottom: 1px solid #e5e5e5;
border-top: 1px solid #e5e5e5;
font-weight: 800;
line-height: 1.4;
padding: 9px 0 13px;
}
.single-post .meta {
margin-top: 8px;
font-weight: 400;
}
.single-post .meta time {
margin-right: 20px;
}
.single-post.style2 h3 {
line-height: 36px;
border: 0;
padding: 0;
margin-top: 32px;
}
.single-post.style2 .post-meta {
border-bottom: 1px solid #e5e5e5;
border-top: 1px solid #e5e5e5;
margin-top: 20px;
padding: 2px 0 1px;
}
.single-post.style2 .post-meta li {
margin-right: 5px;
}
.single-post.style2 .post-meta li:last-child {
margin-right: 0;
}
.single-post.style2 .post-meta li i {
margin-right: 5px;
}
.single-post.style2 .post-meta li a {
color: #777777;
}
.single-post.style2 .post-meta li a:hover {
color: #e6ae03;
}
.single-post.style2 p {
margin-top: 23px;
}
.single-post.style2 .btn {
font-size: 13px;
font-weight: 600;
}
/*==============================================
Brand Carousel
===============================================*/
.brands {
margin-top: 30px;
}
.brands .item {
height: 100px;
position: relative;
}
.brands .item img {
bottom: 0;
left: 0;
margin: auto;
max-width: 100%;
position: absolute;
right: 0;
top: 0;
width: auto;
}
.page-slider .owl-item {
height: 600px;
position: relative;
}
.page-slider .owl-item img {
left: 50%;
opacity: 0;
position: absolute;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: all 0.9s ease-in-out 0s;
-moz-transition: all 0.9s ease-in-out 0s;
-o-transition: all 0.9s ease-in-out 0s;
transition: all 0.9s ease-in-out 0s;
}
.page-slider .owl-item:nth-child(2n) img {
-webkit-transform: translate(-50%, 10%);
-moz-transform: translate(-50%, 10%);
-ms-transform: translate(-50%, 10%);
-o-transform: translate(-50%, 10%);
transform: translate(-50%, 10%);
}
.page-slider .owl-item.active:nth-child(2n) img {
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.page-slider .owl-item.active img {
opacity: 1;
}
/*==============================================
Contact
===============================================*/
.contact-info {
font-family: "Roboto", sans-serif;
color: #333333;
font-size: 16px;
}
.contact-info a {
color: #333333;
}
.contact-info a:hover {
color: #e6ae03;
}
.contact-info img {
margin-bottom: 22px;
}
.contact-info span {
display: block;
margin-bottom: 25px;
}
.contact-info p {
font-weight: 700;
}
.contact-info p i {
margin-right: 12px;
}
.contact-info.white {
color: #fff;
}
.contact-info.white a {
color: #fff;
}
.contact-form {
margin-top: -28px;
}
.contact-form .form-group {
margin: 28px 0 0;
}
.contact-form .btn {
background-color: transparent;
}
.form2 .input-field,
.form2 .btn {
border-color: #888;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.form2 .btn {
background-color: transparent;
border-radius: 0;
font-size: 16px;
height: 52px;
line-height: 52px;
margin-top: 28px;
}
.form2 textarea.input-field {
height: 132px;
}
.form-group label.error {
color: #ff0000;
display: block;
font-weight: 400;
line-height: normal;
margin: 8px 0 0;
}
.input-field {
background-color: transparent;
border: 1px solid #ddd;
color: #777777;
height: 52px;
padding: 0;
text-indent: 20px;
width: 100%;
}
textarea.input-field {
text-indent: 0;
height: 248px;
padding: 13px 20px 20px;
resize: vertical;
vertical-align: top;
}
textarea.msg-half {
height: 100px;
}
.file-input {
border: 1px solid #e5e5e5;
height: 40px;
line-height: 40px;
padding: 0 20px;
position: relative;
}
.file-input i {
margin-right: 5px;
}
.file-input input[type="file"] {
left: 0;
opacity: 0;
position: absolute;
top: 0;
z-index: 1;
}
.cf-submit input {
background-color: transparent;
border: 1px solid #ddd;
color: #777777;
display: inline-block;
margin-top: 25px;
padding: 9px 29px;
text-transform: uppercase;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.cf-submit input:hover {
background-color: #333333;
color: #ffffff;
}
.msg-success,
.msg-failed {
display: none;
font-size: 20px;
font-weight: 700;
left: 15px;
letter-spacing: 1px;
position: relative;
top: -37px;
}
/*==============================================
Google Map
===============================================*/
.map-wrapper {
background-color: #e6ae03;
font-family: "Roboto", sans-serif;
font-size: 40px;
font-weight: 900;
text-align: center;
text-transform: uppercase;
}
.map-wrapper a {
color: #ffffff;
display: inline-block;
padding: 35px 0;
font-weight: 300;
position: relative;
}
.map-wrapper a i {
left: 50%;
opacity: 0;
position: absolute;
top: 50%;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.map-wrapper a:hover {
padding: 35px 0 50px;
}
.map-wrapper a:hover i {
top: 60%;
opacity: 1;
}
.map-toggle .fa-angle-down.up:before {
content: "\f106";
}
#map-canvas {
display: none;
height: 400px;
position: relative;
width: 100%;
z-index: 0;
}
/*==============================================
Footer
===============================================*/
.footer-top {
background: url("../img/patterns/footer.png") repeat scroll 0 0 transparent;
padding: 100px 0;
position: relative;
}
.footer-top:after {
background-color: #f1f1f1;
content: "";
height: 100%;
left: 0;
opacity: 0.8;
position: absolute;
top: 0;
width: 100%;
}
.ft-content {
position: relative;
z-index: 10;
}
.ft-content a {
display: inline-block;
}
.ft-content p {
font-family: "Poiret One", cursive;
font-size: 16px;
margin-bottom: 16px;
color: #424242;
}
.footer-social {
margin-top: 35px;
}
.footer-social li a {
color: #424242;
font-size: 20px;
}
.footer-social li a:hover {
color: #e6ae03;
}
.site-footer {
background-color: #222222;
border-top: 1px solid #303030;
padding: 42px 0;
text-transform: uppercase;
}
.site-footer .copyright {
font-family: "Poiret One", cursive;
font-size: 16px;
color: #757575;
}
.site-footer .copyright span a {
color: #f3f3f3;
}
.site-footer .copyright span a:hover {
color: #e6ae03;
}
.site-footer .credit a {
font-weight: 700;
}
.site-footer .credit a:hover {
text-decoration: underline;
}
.copyright.type-2 {
color: #e1e2e2;
font-family: "Open Sans", sans-serif;
font-size: 14px;
text-transform: none;
}
.footer-nav ul {
font-size: 0;
}
.footer-nav li {
display: inline-block;
}
.footer-nav li a {
color: #bababa;
display: block;
font-family: "Open Sans", sans-serif;
font-size: 14px;
font-weight: 400;
padding: 0 15px;
text-transform: none;
}
.footer-nav li a:hover {
color: #e6ae03;
}
.go-top {
background-color: #444;
bottom: 111px;
opacity: 0.4;
display: none;
font-size: 26px;
height: 45px;
line-height: 45px;
position: fixed;
right: 44px;
text-align: center;
width: 45px;
z-index: 90;
}
.go-top:hover {
opacity: 1;
}
/*==============================================
Footer 1
===============================================*/
.footer-top.style2 {
background-color: #3a3a3c;
background-image: none;
color: #999;
font-family: "Raleway", sans-serif;
font-weight: 500;
}
.footer-top.style2:after {
content: none;
}
.footer-top.style2 li a {
border-bottom: 1px solid #575758;
color: #999;
display: block;
font-size: 15px;
font-weight: 500;
text-transform: none;
}
.footer-top.style2 li a:hover {
color: #e6ae03;
}
.footer-top.style2 li:last-child a {
border-bottom: 0 none;
}
.footer-top.style3 {
background-color: #fff;
background-image: none;
}
.footer-top.style3:after {
content: none;
}
.footer-item.style2 {
margin-bottom: 30px;
}
.footer-item.style2 h3 {
color: #f2f2f2;
font-size: 16px;
font-weight: 600;
margin-bottom: 13px;
}
.footer-item.style2 h3:before {
content: none;
}
.footer-item.style2 .tweet-feed li a {
border: 0 none;
display: inline-block;
}
.footer-item.style3 {
font-family: "Raleway", sans-serif;
font-weight: 400;
}
.footer-item.style3 h3 {
color: #333333;
font: 400 24px/26px "Poiret One", cursive;
margin-bottom: 40px;
}
.footer-item.style3 h3:before {
content: none;
}
.footer-item.style3 p {
color: #555;
}
.footer-item.style3 li a {
color: #777777;
display: block;
font-weight: 700;
text-transform: none;
}
.footer-item.style3 li a:hover {
color: #333333;
}
.footer-item.style3 li a span {
display: block;
font-size: 11px;
line-height: normal;
margin-bottom: 4px;
margin-top: 2px;
}
.left-anim li a:hover {
padding-left: 5px;
}
.blogpost-widget {
background-color: #343436;
margin-bottom: 10px;
padding: 20px 25px;
position: relative;
z-index: 1;
}
.blogpost-widget:before {
background-color: #e6ae03;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 0;
z-index: -1;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.blogpost-widget:hover a,
.blogpost-widget:hover span {
color: #fff;
}
.blogpost-widget:hover:before {
width: 100%;
}
.blogpost-widget:last-child {
margin-bottom: 0;
}
.blogpost-widget a,
.blogpost-widget span {
display: block;
color: #999;
}
.blogpost-widget a {
font-size: 15px;
}
.blogpost-widget span {
font-family: "Roboto", sans-serif;
font-size: 13px;
}
.blogpost-widget span i {
margin-right: 3px;
}
.social-links.style2 {
background-color: transparent;
overflow: visible;
position: static;
white-space: inherit;
width: auto;
padding: 0;
}
.social-links.style2 li a {
background-color: #343436;
border: 0 none;
color: #999;
display: block;
font-size: 20px;
height: 45px;
line-height: 45px;
text-align: center;
width: 45px;
position: relative;
}
.social-links.style2 li a:hover {
color: #fff;
}
.social-links.style2 li.facebook a:hover {
background-color: #3765A3;
}
.social-links.style2 li.twitter a:hover {
background-color: #55ACEE;
}
.social-links.style2 li.gplus a:hover {
background-color: #DF4B38;
}
.social-links.style2 li.linkedin a:hover {
background-color: #0177B5;
}
.social-links.style2 li.instagram a:hover {
background-color: #125688;
}
.social-links.style2 li.pinterest a:hover {
background-color: #CB2027;
}
.social-links.style3 {
background-color: transparent;
overflow: visible;
position: static;
white-space: inherit;
width: auto;
}
.social-links.style3 li a {
border: 2px solid #e5e5e5;
color: #333333;
display: block;
font-size: 17px;
height: 44px;
line-height: 42px;
text-align: center;
width: 44px;
position: relative;
}
.social-links.style3 li a:hover {
background-color: transparent;
border-color: #333333;
color: #333333;
}
.subscription-form {
position: relative;
margin-top: -10px;
}
.subscription-form .input-field {
background-color: #313133;
border: 0 none;
padding-right: 55px;
}
.subscription-form > button {
background-color: #2c2c2e;
border: 0 none;
font-size: 20px;
height: 52px;
padding: 0;
position: absolute;
right: 0;
top: 0;
width: 52px;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.subscription-form > button:hover {
background-color: #e6ae03;
color: #fff;
}
.tweet-feed ul li {
border-bottom: 1px solid #575758;
margin-bottom: 15px;
padding-bottom: 15px;
line-height: 22px;
}
.tweet-feed ul li:last-child {
border-bottom: 0 none;
margin-bottom: 0;
padding-bottom: 0;
}
.tweet-feed ul li a {
line-height: 22px;
}
.tweet-feed .twieet-date {
display: block;
margin-top: 10px;
}
.instrgram-gallery li {
float: left;
width: 20%;
}
.instrgram-gallery li img {
width: 100%;
}
/*==============================================
contact page
===============================================*/
#map-canvas2 {
height: 571px;
width: 100%;
}
.map-absolute {
position: absolute !important;
width: 100%;
height: 100%;
}
.contact-block {
border-right: 1px solid #eeeeee;
margin: 0 0 22px;
padding: 70px 0;
position: relative;
text-align: center;
}
.contact-block:last-child {
border-right: 0;
}
.contact-block i {
font-size: 30px;
margin-bottom: 20px;
}
.contact-info-block {
margin-bottom: 60px;
}
.contact-info-block .icon {
border-right: 1px solid #e5e5e5;
color: #333333;
font-size: 30px;
text-align: center;
width: 90px;
}
.contact-info-block .mobile {
font-size: 45px;
}
.contact-info-block .info {
padding-left: 30px;
}
.contact-info-block h4 {
color: #333333;
font-weight: 700;
margin-bottom: 6px;
text-transform: uppercase;
}
.cf-on-map {
background-color: #fff;
padding: 22px 30px 50px;
}
.cf-on-map .contact-form {
margin: 0;
}
.cf-on-map .contact-form textarea.input-field {
height: 160px;
}
.nl-social li {
display: inline-block;
}
.nl-social li a {
color: #fff;
display: block;
font-size: 16px;
height: 52px;
line-height: 52px;
margin: 0;
text-align: center;
width: 52px;
}
.nl-social li a:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.newsletter-wrapper {
background-color: #e6ae03;
}
.newsletter-form {
display: table;
width: 100%;
}
.newsletter-form > * {
display: table-cell;
vertical-align: middle;
}
.newsletter-form .nl-title {
color: #fff;
font-size: 15px;
font-weight: 400;
padding-right: 15px;
}
.newsletter-form .input-wrapper {
width: 100%;
}
.newsletter-form .input-wrapper input {
font-weight: 400;
font-size: 15px;
border: 0;
color: #fff;
border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.newsletter-form button {
background-color: rgba(0, 0, 0, 0.1);
border: 0 none;
color: #fff;
font-size: 14px;
font-weight: 400;
height: 52px;
letter-spacing: 0.5px;
padding: 0;
text-transform: uppercase;
width: 130px;
}
.newsletter-form button span {
margin-right: 4px;
}
/*==============================================
Privacy
===============================================*/
.privacy h2 {
margin-bottom: 20px;
}
/*==============================================
404 error
===============================================*/
.error404 {
color: #000;
}
.error404 h3 {
font-weight: 100;
font-size: 42px;
margin: 91px 0 24px;
}
.error-title h2 {
font-size: 140px;
font-weight: 700;
margin-bottom: 30px;
}
.error-title h2 img {
max-width: 50%;
}
.error404 p {
font-size: 25px;
line-height: 45px;
margin-bottom: 0;
}
.error404 p a {
color: #777777;
display: inline-block;
font-size: 40px;
margin-top: 30px;
}
.error404 p a:hover {
color: #e6ae03;
}
/*==============================================
Coming Soon
===============================================*/
.top-left {
background-color: #eeeeee;
padding: 58.5px 30px;
}
.top-left img {
float: left;
padding-right: 30px;
}
.top-left p {
color: #333333;
font-size: 35px;
line-height: 45px;
margin: 12px 0 0;
}
.launch-date {
background-color: #e6ae03;
color: #ffffff;
font-family: "Roboto Condensed", sans-serif;
height: 311px;
padding: 20px 0;
position: relative;
text-align: center;
text-transform: uppercase;
}
.launch-date i {
color: #e6ae03;
font-size: 80px;
left: -25px;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.launch-date span {
display: block;
font-size: 30px;
font-weight: 300;
line-height: normal;
}
.launch-date strong {
font-size: 200px;
font-weight: 800;
line-height: 180px;
}
.launch-date p {
font-size: 45px;
font-weight: 700;
line-height: normal;
margin-bottom: 0;
}
.countdown-wrapper {
background-color: #333;
height: 100%;
height: 311px;
position: relative;
text-align: center;
width: 100%;
}
.countdown-wrapper .timer {
color: #fff;
font-family: "Roboto", sans-serif;
position: absolute;
top: 50%;
width: 100%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.countdown-wrapper .timer li {
padding: 0 15px;
}
.countdown-wrapper .timer li span:first-child {
display: block;
font-size: 88px;
font-weight: 300;
line-height: 80px;
}
.countdown-wrapper .timer li span:last-child {
color: #e6ae03;
display: inline-block;
font-size: 30px;
font-weight: 300;
margin-top: 15px;
}
.mailchimp-form {
color: #ffffff;
font-family: "Roboto", sans-serif;
background-color: #e6ae03;
padding: 30px;
}
.mailchimp-form p {
font-size: 16px;
margin-bottom: 25px;
}
.mailchimp-form h3,
.contact-info h3 {
margin-bottom: 30px;
}
.mc-field-group .input-field {
border-color: #ffffff;
color: #ffffff;
font-size: 18px;
font-weight: 300;
padding: 0;
}
.cf-submit .button {
border-color: #ffffff;
color: #ffffff;
margin-top: 15px;
}
.cf-submit .button:hover {
border-color: #333333;
}
.bottom-right {
background-color: #eeeeee;
padding: 30px;
}
.bottom-right p {
margin-bottom: 5px;
font-weight: 400;
}
.bottom-right p:last-child {
margin-bottom: 0;
}
.bottom-right .footer-social {
margin-top: 20px;
}
/*======================================================
Typhography
========================================================*/
.typography h1,
.typography h2,
.typography h3,
.typography h4,
.typography h5,
.typography h6,
.typography p {
font-weight: 300;
margin-bottom: 20px;
}
.highlight-text {
background-color: #e6ae03;
padding: 0 5px 1px;
color: #fff;
}
.table-typography {
margin-bottom: 50px;
}
.html-tags {
margin-top: 30px;
}
/*Latin Caracter set */
.caracter-set {
border-top: 1px solid rgba(51, 51, 51, 0.1);
border-left: 1px solid rgba(51, 51, 51, 0.1);
}
.caracter-set th,
.caracter-set td {
font-family: serif;
font-size: 25px;
padding: 15px 20px;
font-weight: normal;
text-align: center;
border: 1px solid rgba(51, 51, 51, 0.1);
}
.caracter-set td {
border-width: 0 1px 1px 0;
}
/*==============================================
Blog page
===============================================*/
.blog-banner {
background-color: #eeeeee;
padding: 51px 0 52px;
}
.blog-banner h1 {
color: #bdbaba;
font-size: 42px;
line-height: 48px;
margin-bottom: 4px;
}
.blog-banner p {
margin-bottom: 0;
font-weight: 500;
}
.entry-post {
border-bottom: 1px solid #ededed;
margin-bottom: 60px;
padding-bottom: 10px;
}
.entry-post:last-child {
margin-bottom: 0;
}
.entry-post .post-media {
margin-bottom: 33px;
}
.entry-post .post-media img {
max-width: 100%;
height: auto;
display: block;
}
.entry-post .post-meta {
display: table;
width: 100%;
margin-bottom: 28px;
}
.entry-post .post-title {
display: table-cell;
text-transform: uppercase;
}
.entry-post .post-title a {
color: #000;
}
.entry-post .post-title a:hover {
color: #e6ae03;
}
.entry-post .post-title span {
display: inline-block;
letter-spacing: 3.6px;
margin-bottom: 7px;
}
.entry-post .post-title h3 {
font-weight: 700;
text-transform: uppercase;
}
.entry-post .datetime {
display: table-cell;
text-align: right;
vertical-align: bottom;
}
.entry-post .post-excerpt h3 {
font-weight: 700;
color: #000;
font-size: 20px;
margin-bottom: 15px;
}
.post-excerpt img {
width: 100%;
}
.post-media.embed,
.post-media.link-post {
background-color: #eeeeee;
padding: 30px 0;
}
.post-media.link-post {
text-align: center;
font-size: 18px;
}
.post-media.link-post a {
display: inline-block;
color: #333333;
word-wrap: break-word;
}
.post-media.link-post a:hover {
color: #e6ae03;
text-decoration: underline;
}
.post-media .twitter-tweet {
margin: 0 auto;
}
.post-media .fb_iframe_widget {
display: block;
text-align: center;
}
.post-media .owl-nav > div {
background-color: rgba(0, 0, 0, 0.5);
color: #ffffff;
cursor: pointer;
font-size: 20px;
height: 45px;
line-height: 44px;
opacity: 0;
position: absolute;
text-align: center;
top: 50%;
width: 32px;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.post-media .owl-nav > div:hover {
background-color: rgba(255, 255, 255, 0.5);
color: #333333;
}
.post-media .owl-nav .owl-prev {
border-left: 0 none;
left: 0;
}
.post-media .owl-nav .owl-next {
border-right: 0 none;
right: 0;
}
.post-media:hover .owl-nav > div {
opacity: 1;
}
.post-footer {
display: table;
width: 100%;
}
.post-footer > * {
display: table-cell;
vertical-align: middle;
}
.post-footer .read-more a {
font-style: italic;
font-weight: 700;
color: #444;
}
.post-footer .read-more a:hover {
color: #e6ae03;
}
article.post-item .post-meta p {
color: #555;
font-family: "Poiret One", cursive;
font-size: 18px;
font-weight: 400;
margin: 0;
}
article.post-item .post-meta a {
color: #555;
}
article.post-item .post-meta a:hover {
color: #e6ae03;
}
article.post-item .post-meta .post-title {
color: #555;
font-weight: 700;
line-height: 36px;
}
article.post-item .post-media {
margin-top: 20px;
}
article.post-item .post-excerpt {
color: #555;
margin-top: 20px;
}
article.post-item .post-excerpt h3 {
font-weight: 700;
line-height: 36px;
}
article.post-item b p {
margin: 0;
}
article.post-item .more {
display: table;
font-family: "Poiret One", cursive;
font-size: 18px;
margin-top: -10px;
}
article.post-item + .post-item {
border-top: 1px solid #e5e5e5;
margin-top: 80px;
padding-top: 80px;
}
.dropcap {
background-color: #e6ae03;
color: #ffffff;
float: left;
font-size: 25px;
line-height: 35px;
margin-right: 10px;
padding: 3px 13px 5px;
}
.share-icon li {
padding: 0;
}
.share-icon li a {
border: 1px solid;
border-radius: 2px;
color: #ccc;
display: inline-block;
height: 29px;
line-height: 28px;
text-align: center;
width: 29px;
}
.share-icon li a:hover {
background-color: #e6ae03;
border-color: #e6ae03;
color: #ffffff;
}
.post-pagination {
position: relative;
}
.post-pagination li {
padding: 0 3.5px;
}
.post-pagination li a {
border: 1px solid #777777;
display: block;
height: 14px;
text-indent: -9999em;
width: 14px;
-webkit-transform: rotate(45deg) translateY(5px) translateX(5px);
-moz-transform: rotate(45deg) translateY(5px) translateX(5px);
-ms-transform: rotate(45deg) translateY(5px) translateX(5px);
-o-transform: rotate(45deg) translateY(5px) translateX(5px);
transform: rotate(45deg) translateY(5px) translateX(5px);
}
.post-pagination li a:hover,
.post-pagination li.active a {
background-color: #e6ae03;
border-color: #e6ae03;
}
.post-pagination span {
background-color: #eeeeee;
font-size: 18px;
height: 25px;
line-height: 25px;
position: absolute;
right: 0;
text-align: center;
top: 50%;
width: 25px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.post-pagination .prev-post {
right: 27px;
}
/*==============================================
Blog Widgets
===============================================*/
.widget {
margin-bottom: 30px;
}
.widget:last-child {
margin-bottom: 0;
}
/*---------------- Search --------------*/
.search-widget {
position: relative;
}
.search-widget .input-field {
height: 42px;
padding-right: 45px;
border-color: #eeeeee;
}
.search-widget button {
background-color: transparent;
border: 0 none;
font-size: 16px;
height: 42px;
line-height: 42px;
padding: 0;
position: absolute;
right: 0;
top: 0;
width: 42px;
border-left: 1px solid #eeeeee;
}
/*---------------- about me --------------*/
.about-author {
text-align: center;
}
.about-author img {
border: 1px solid #eeeeee;
border-radius: 50%;
display: block;
margin: 0 auto;
}
.about-author p {
margin-bottom: 8px;
}
.about-author span {
color: #444;
display: inline-block;
font-weight: 500;
margin-bottom: 12px;
}
/*---------------- instafeed --------------*/
.social-feed {
margin: -5px;
}
.social-feed li {
float: left;
margin: 5px;
width: 30%;
/* fallback for old browser */
width: -webkit-calc(33% - 10px);
width: calc(33% - 10px);
}
.social-feed li a {
display: block;
}
.social-feed li img {
width: 100%;
}
#lightcase-case .lightcase-info {
width: 100%;
}
#lightcase-case .lightcase-sequenceInfo {
float: right;
}
/*---------------- advertise --------------*/
.advertise img {
margin: 0 auto;
}
/*---------------- categories --------------*/
.border-anim li {
position: relative;
}
.border-anim li:before,
.border-anim li:after {
content: "";
position: absolute;
left: 0;
width: 0;
bottom: 0;
background-color: #eeeeee;
height: 1px;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.border-anim li:after {
height: 0;
left: auto;
right: 0;
width: 1px;
}
.border-anim li:hover:before {
width: 100%;
}
.border-anim li:hover:after {
height: 100%;
}
.categories li a {
color: #999;
display: block;
margin-bottom: 2px;
padding-bottom: 4px;
}
.categories li a:hover {
color: #e6ae03;
}
/*---------------- widget-posts --------------*/
.widget-posts li {
font-family: "Roboto", sans-serif;
display: table;
width: 100%;
padding-bottom: 25px;
}
.widget-posts li > * {
display: table-cell;
vertical-align: top;
}
.widget-posts li:last-child {
margin-bottom: 0;
}
.widget-posts li .post-thumb {
padding-right: 30px;
}
.widget-posts li .post-excrpt a {
color: #333333;
display: inline-block;
font-weight: 500;
line-height: 21px;
}
.widget-posts li .post-excrpt a:hover {
color: #e6ae03;
}
.widget-posts li .post-excrpt p {
margin-bottom: 2px;
}
.widget-posts li:last-child {
padding-bottom: 0;
}
.widget-posts.border-anim li {
margin-bottom: 25px;
}
.widget-posts.style2 .post-item {
border-bottom: 1px solid #e5e5e5;
}
.widget-posts.style2 .post-item:before,
.widget-posts.style2 .post-item:after {
content: none;
}
.widget-posts.no-border .post-item {
border: 0 none;
padding: 0;
}
.widget-posts.type-2 {
font-size: 14px;
line-height: 24px;
font-weight: 400;
}
.widget-posts.type-2 li {
font-family: "Open Sans", sans-serif;
}
.widget-posts.type-2 li .post-thumb {
padding-right: 20px;
}
.widget-posts.type-2 li .post-thumb img {
width: 50px;
height: 50px;
}
.widget-posts.type-2 .post-excrpt {
position: relative;
top: -5px;
}
.widget-posts.type-2 .post-excrpt a {
font-size: 16px;
color: #999;
}
.widget-posts.type-2 .post-excrpt a:hover {
color: #e6ae03;
}
.widget-posts.type-2 time {
color: #999;
font-size: 13px;
}
/*---------------- tag-cloud --------------*/
.tag-cloud a {
border: 1px solid #eeeeee;
border-radius: 3px;
color: #444;
display: inline-block;
font-size: 13px;
height: 40px;
line-height: 40px;
margin-bottom: 5px;
padding: 0 27px;
text-transform: uppercase;
}
.tag-cloud a:hover {
background-color: #e6ae03;
border-color: #e6ae03;
color: #ffffff;
}
/*---------------- Search --------------*/
/*==============================================
home business
===============================================*/
.light-gray {
background-color: #f9fafc;
}
.light-gray.top-boder {
border-top: 1px solid #eeeeee;
}
.light-gray.bottom-boder {
border-bottom: 1px solid #eeeeee;
}
.overview-text h2 {
color: #333333;
margin-bottom: 15px;
text-transform: uppercase;
}
.overview-text .lead {
font-size: 14px;
color: #e6ae03;
text-transform: uppercase;
}
.lead.greatvibes {
font-size: 25px;
margin-bottom: 10px;
text-transform: none;
}
.client-thumb {
text-align: center;
}
.client-thumb img {
border-radius: 50%;
}
.client-thumb .clien-info {
margin-top: 30px;
}
.client-quote {
border: 1px solid #e5e5e5;
border-radius: 3px;
font-family: "Raleway", sans-serif;
font-size: 14px;
font-style: normal;
line-height: 26px;
margin: 0;
padding: 23px 30px 30px;
}
.testimonial-slider .tm-carousel {
z-index: 5;
}
.testimonial-slider .tm-carousel .owl-stage-outer {
padding-bottom: 50px;
}
.testimonial-slider .tm-carousel .owl-nav > div {
top: 29%;
}
.testimonial-slider .tm-carousel .client-thumb {
display: block;
width: 100%;
position: relative;
cursor: pointer;
}
.testimonial-slider .tm-carousel .client-thumb img {
margin: 0 auto;
width: 170px;
height: 170px;
border-radius: 50%;
}
.testimonial-slider .tm-carousel .client-thumb.slick-center:before {
border-left: 1px solid #e5e5e5;
border-top: 1px solid #e5e5e5;
bottom: -65px;
content: "";
height: 30px;
left: 50%;
position: absolute;
width: 30px;
-webkit-transform: translateX(-50%) rotate(45deg);
-moz-transform: translateX(-50%) rotate(45deg);
-ms-transform: translateX(-50%) rotate(45deg);
-o-transform: translateX(-50%) rotate(45deg);
transform: translateX(-50%) rotate(45deg);
}
.testimonial-slider .tm-carousel .client-thumb.slick-center:after {
background-color: white;
bottom: -51px;
content: "";
height: 2px;
left: 50%;
margin-left: -20px;
position: absolute;
width: 40px;
z-index: 2;
}
.testimonial-slider .tm-text {
top: -1px;
}
.testimonial-slider .slick-list {
padding: 0 !important;
}
.testimonial-slider .slick-track {
padding-bottom: 50px;
}
.testimonial-slider .control-four .slick-arrow {
top: -webkit-calc(50% - 95px);
top: calc(50% - 95px);
}
/* Chrome + Safari + Opera */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.testimonial-slider .tm-carousel .owl-arrow .client-thumb:before {
bottom: -64px;
}
}
.control-four .owl-nav > div {
height: 30px;
position: absolute;
text-indent: -9999em;
top: 50%;
width: 30px;
}
.control-four .owl-nav .owl-prev {
border-bottom: 1px solid #eaeaea;
border-left: 1px solid #eaeaea;
left: -50px;
-webkit-transform: translateY(-50%) rotate(45deg);
-moz-transform: translateY(-50%) rotate(45deg);
-ms-transform: translateY(-50%) rotate(45deg);
-o-transform: translateY(-50%) rotate(45deg);
transform: translateY(-50%) rotate(45deg);
}
.control-four .owl-nav .owl-next {
border-bottom: 1px solid #eaeaea;
border-right: 1px solid #eaeaea;
right: -50px;
-webkit-transform: translateY(-50%) rotate(-45deg);
-moz-transform: translateY(-50%) rotate(-45deg);
-ms-transform: translateY(-50%) rotate(-45deg);
-o-transform: translateY(-50%) rotate(-45deg);
transform: translateY(-50%) rotate(-45deg);
}
.control-four .slick-arrow {
background-color: transparent;
border: 0 none;
color: #e5e5e5;
font-size: 65px;
padding: 0;
position: absolute;
top: 50%;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.control-four .slick-arrow:hover {
color: #aeaeae;
}
.control-four .slick-prev {
left: -50px;
}
.control-four .slick-next {
right: -50px;
}
.post-entry {
margin-bottom: 30px;
}
.post-entry .post-content {
border: 1px solid #eeeeee;
padding: 30px;
}
.post-entry .post-content h3 {
font-weight: 700;
margin-bottom: 10px;
text-transform: uppercase;
}
.post-entry .post-content h3 a {
color: #333333;
}
.post-entry .post-content h3 a:hover {
color: #e6ae03;
}
.post-entry .post-content .post-meta {
color: #bebebe;
margin-bottom: 15px;
}
.post-entry .post-content .post-meta span {
border-right: 1px solid #bebebe;
display: inline-block;
line-height: 12px;
margin-right: 5px;
padding-right: 8px;
}
.post-entry .post-content .post-meta span:last-child {
border-right: 0;
margin-right: 0;
padding-right: 0;
}
.post-entry .post-content p {
margin-bottom: 0;
}
.icon-block {
color: #fff;
border: 1px solid;
height: 220px;
position: relative;
text-align: center;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.icon-block:hover {
background-color: #e6ae03;
border-color: #e6ae03;
}
.icon-block .icon-block-inner {
left: 50%;
position: absolute;
top: 50%;
width: 100%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.icon-block .icon-block-inner i {
font-size: 50px;
margin-bottom: 20px;
}
.icon-block .icon-block-inner h3 {
font-size: 20px;
text-transform: uppercase;
}
.colored-social ul {
width: 100%;
}
.colored-social li {
float: left;
width: 12.5%;
text-align: center;
}
.colored-social li:nth-child(2n) a {
background-color: #444;
}
.colored-social li:nth-child(2n+1) a {
background-color: #333;
}
.colored-social li a {
color: #fff;
display: block;
font-size: 16px;
padding: 20px 0;
position: relative;
z-index: 0;
}
.colored-social li a:before {
background-color: rgba(0, 0, 0, 0.1);
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.colored-social li a:hover:before {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.colored-social li a i {
margin-right: 5px;
}
.colored-social .dribbble a:hover {
background-color: #f826ab;
}
.colored-social .twitter a:hover {
background-color: #2db7ff;
}
.colored-social .github a:hover {
background-color: #6c6c6c;
}
.colored-social .youtube a:hover {
background-color: #ea0943;
}
.colored-social .soundcloud a:hover {
background-color: #ff9a24;
}
.colored-social .instagram a:hover {
background-color: #4b8dca;
}
.colored-social .flickr a:hover {
background-color: #ff0084;
}
.colored-social .yahoo a:hover {
background-color: #7b0099;
}
/*==============================================
Home slider 3/ business 2
===============================================*/
.fullwidth-header > .container {
width: 100%;
padding: 0 50px;
}
.g-header .navbar-toggle {
border-color: #fff;
}
.g-header .navbar-toggle .icon-bar {
background-color: #fff;
}
.white-nav .navbar-toggle {
border-color: #fff;
}
.white-nav .navbar-toggle .icon-bar {
background-color: #fff;
}
.white-nav .navbar-nav > li > a {
color: #fff;
font-size: 15px;
font-weight: 700;
}
.white-nav .navbar-nav > li > a:hover,
.white-nav .navbar-nav > li > a.active {
color: #e6ae03;
}
.white-nav.on .navbar-toggle {
border-color: #ddd;
}
.white-nav.on .navbar-toggle .icon-bar {
background-color: #777777;
}
.white-nav.on .navbar-nav > li > a:not(.active):not(:hover) {
color: #777777;
}
.home-slider3 .item {
position: relative;
}
.home-slider3 .item .container {
position: relative;
}
.home-slider3 .slider-content {
font-family: "Raleway", sans-serif;
color: #fff;
}
.home-slider3 .slider-content h2 {
font-size: 68px;
font-weight: 700;
}
.home-slider3 .slider-content p {
font-size: 20px;
font-weight: 500;
line-height: 30px;
margin: 25px 0 30px;
}
.home-slider3 .slider-content .btn {
margin-right: 10px;
}
.overlay {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.overlay.dark-pattern {
background: rgba(0, 0, 0, 0.4) url("../img/icons/pattern.png") repeat scroll 0 0;
}
.overlay.dark.color {
background-color: rgba(0, 0, 0, 0.5);
}
.overlay.dark2 {
background-color: rgba(25, 35, 46, 0.85);
}
.overlay.dark.op20 {
background-color: rgba(0, 0, 0, 0.2);
}
.overlay.white {
background-color: #fff;
opacity: 0.4;
z-index: -1;
}
.about-us2 .container-fluid {
padding-left: 50px;
padding-right: 50px;
}
.about-us2 .text h3 {
color: #333;
margin-bottom: 20px;
text-transform: uppercase;
}
.hire-us-form {
font-family: "Raleway", sans-serif;
}
.hire-us-form h2 {
color: #fff;
font-size: 48px;
font-weight: 100;
}
.hire-us-form .form-field-item {
margin: 30px 0 0;
}
.hire-us-form .form-field-item label {
color: #fff;
display: block;
font-weight: 700;
margin-bottom: 7px;
text-transform: uppercase;
}
.hire-us-form .form-field-item span {
color: #ff0000;
}
.hire-us-form .form-field:not(textarea) {
height: 50px;
}
.right-half {
margin-right: -45px;
}
.service-title {
margin-bottom: 10px;
}
.service-title span {
background-color: #333333;
border-radius: 50px;
color: #fff;
display: inline-block;
float: left;
font-size: 18px;
height: 40px;
line-height: 40px;
margin-right: 15px;
text-align: center;
width: 40px;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.service-title h3 {
color: #333333;
font-size: 18px;
margin-top: 10px;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.icon-service:hover .service-title span {
background-color: #e6ae03;
}
.icon-service:hover .service-title h3 {
color: #e6ae03;
}
.icon-service:hover .read-more {
color: #333333;
}
.icon-service.style2 {
margin-bottom: 30px;
}
.icon-service.style2 .service-title span {
background-color: transparent;
color: #333;
font-size: 30px;
height: auto;
width: auto;
}
.icon-service.style2 .service-title h3 {
font-size: 20px;
margin-top: 6px;
}
.icon-service p {
margin-bottom: 0;
}
.icon-service2 {
display: table;
margin-bottom: 30px;
}
.icon-service2 > * {
display: table-cell;
vertical-align: top;
}
.icon-service2 .service-icon {
padding-right: 15px;
}
.icon-service2 .service-icon span {
background-color: #333;
border-radius: 30px;
color: #fff;
display: block;
font-size: 18px;
height: 40px;
line-height: 40px;
text-align: center;
width: 40px;
}
.icon-service2 .service-desc h3 {
color: #333;
margin-bottom: 10px;
}
.icon-service2 .service-desc p {
margin-bottom: 0;
}
.left-half {
left: 0;
position: absolute;
top: 0;
width: -webkit-calc(50% - 15px);
width: -moz-calc(50% - 15px);
width: calc(50% - 15px);
-webkit-background-size: cover;
}
.left-half img {
width: 100%;
}
.left1 h2 {
color: #ffffff;
font-family: "Open Sans", sans-serif;
font-size: 26px;
line-height: 50px;
text-transform: uppercase;
}
.left1 h1 {
color: #ffffff;
font-family: "Roboto Slab", serif;
font-weight: 700;
line-height: 50px;
margin-bottom: 25px;
text-transform: uppercase;
}
.right1 .iphone {
position: absolute;
right: 0;
top: -80px;
}
.service-wrap.boxed-service {
padding: 32px 25px 30px;
}
.boxed-service {
background-color: #fff;
border: 1px solid #eeeeee;
border-right: 0 none;
z-index: 1;
}
.boxed-service .service-icon:before {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
.boxed-service .service-icon:after {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.boxed-service .service-desc {
border-bottom: 0 none;
}
.boxed-service:last-child {
border-right: 1px solid #eeeeee;
}
.boxed-service .service-icon {
font-size: 25px;
height: 80px;
line-height: 82px;
margin-bottom: 35px;
width: 80px;
}
.boxed-service:hover .service-icon:before {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.boxed-service:hover .service-icon:after {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
.boxed-service p {
margin-bottom: 0;
}
.boxed-service.style2 {
background-color: #f5f7f8;
border: 0;
padding: 62px 25px 60px;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.boxed-service.style2:nth-child(2n) {
background-color: #f8fafc;
}
.boxed-service.style2 .service-icon {
background-color: transparent;
color: #444;
font-size: 70px;
border: 0;
}
.boxed-service.style2 .service-icon:before,
.boxed-service.style2 .service-icon:after {
content: none;
}
.boxed-service.style2 .service-desc {
font-family: "Raleway", sans-serif;
}
.boxed-service.style2 .service-desc p {
color: #a1b1bc;
}
.boxed-service.style2 h5 {
color: #2c3e50;
margin-bottom: 15px;
font-weight: 800;
text-transform: uppercase;
font-size: 16px;
padding-bottom: 25px;
letter-spacing: 0.5px;
position: relative;
}
.boxed-service.style2 h5:before,
.boxed-service.style2 h5:after {
background-color: #e6ae03;
content: "";
position: absolute;
left: 50%;
margin-left: -3px;
bottom: 0;
width: 6px;
height: 2px;
}
.boxed-service.style2 h5:after {
margin-left: 8px;
}
.boxed-service.style2:hover {
background-color: #444444;
}
.boxed-service.style2:hover .service-icon,
.boxed-service.style2:hover h5 {
color: #e6ae03;
}
.container-fluid.fullwidth {
padding-left: 0;
padding-right: 0;
}
/*==============================================
home-slider-4 / business 3
===============================================*/
.home-slider4 .container {
position: relative;
}
.home-slider4 .slider-content {
color: #fff;
}
.home-slider4 .slider-content h2 {
font-size: 60px;
font-weight: 800;
text-transform: uppercase;
-webkit-transition: all 0.3s ease-in-out 0.7s;
-moz-transition: all 0.3s ease-in-out 0.7s;
-o-transition: all 0.3s ease-in-out 0.7s;
transition: all 0.3s ease-in-out 0.7s;
}
.home-slider4 .slider-content h3 {
color: #e6ae03;
-webkit-filter: blur(0px);
filter: blur(0px);
font-size: 36px;
font-weight: 800;
margin: -7px 0 20px;
text-transform: uppercase;
-webkit-transition: all 0.3s ease-in-out 0.9s;
-moz-transition: all 0.3s ease-in-out 0.9s;
-o-transition: all 0.3s ease-in-out 0.9s;
transition: all 0.3s ease-in-out 0.9s;
}
.home-slider4 .slider-content ul {
-webkit-filter: blur(0px);
filter: blur(0px);
}
.home-slider4 .slider-content li:nth-child(1) {
-webkit-transition: all 0.3s ease-in-out 1.2s;
-moz-transition: all 0.3s ease-in-out 1.2s;
-o-transition: all 0.3s ease-in-out 1.2s;
transition: all 0.3s ease-in-out 1.2s;
}
.home-slider4 .slider-content li:nth-child(2) {
-webkit-transition: all 0.3s ease-in-out 1.25s;
-moz-transition: all 0.3s ease-in-out 1.25s;
-o-transition: all 0.3s ease-in-out 1.25s;
transition: all 0.3s ease-in-out 1.25s;
}
.home-slider4 .slider-content li:nth-child(3) {
-webkit-transition: all 0.3s ease-in-out 1.3s;
-moz-transition: all 0.3s ease-in-out 1.3s;
-o-transition: all 0.3s ease-in-out 1.3s;
transition: all 0.3s ease-in-out 1.3s;
}
.home-slider4 .slider-content span {
display: inline-block;
margin-top: 17px;
-webkit-transition: all 0.3s ease-in-out 1.7s;
-moz-transition: all 0.3s ease-in-out 1.7s;
-o-transition: all 0.3s ease-in-out 1.7s;
transition: all 0.3s ease-in-out 1.7s;
}
.home-slider4 .slider-content p {
font-size: 20px;
font-weight: 400;
margin-top: 15px;
-webkit-transition: all 0.3s ease-in-out 0.9s;
-moz-transition: all 0.3s ease-in-out 0.9s;
-o-transition: all 0.3s ease-in-out 0.9s;
transition: all 0.3s ease-in-out 0.9s;
}
.home-slider4 .slider-content h2,
.home-slider4 .slider-content h3,
.home-slider4 .slider-content li,
.home-slider4 .slider-content span,
.home-slider4 .slider-content p {
position: relative;
top: 30px;
opacity: 0;
}
.home-slider4 .active .slider-content {
color: #fff;
}
.home-slider4 .active .slider-content h2,
.home-slider4 .active .slider-content h3,
.home-slider4 .active .slider-content li,
.home-slider4 .active .slider-content span,
.home-slider4 .active .slider-content p {
opacity: 1;
top: 0;
}
.counter-item {
color: #fff;
text-align: center;
}
.counter-item.dark {
color: #333333;
}
.counter-item [data-to] {
font-size: 60px;
line-height: 50px;
font-weight: 700;
}
.counter-item span {
display: block;
font-weight: 400;
margin-top: 25px;
text-transform: uppercase;
}
.counter-item.style2 {
padding: 50px 0;
}
.counter-item.style2:nth-child(2n+1) {
background-color: rgba(0, 0, 0, 0.2);
}
.counter-item.style2 [data-to] {
font-size: 30px;
font-weight: 700;
}
.counter-item.style2 span {
font-size: 13px;
margin: 0;
text-transform: none;
}
.counter-item.style3 {
background-color: #19232e;
border-right: 1px solid #555;
padding: 100px 0;
}
.counter-item.style3:last-child {
border-right: 0;
}
.counter-item.type-4 {
font-family: "Open Sans", sans-serif;
padding: 50px 0;
}
.counter-item.type-4 [data-to] {
font-size: 30px;
font-weight: 400;
letter-spacing: 1px;
line-height: 30px;
}
.counter-item.type-4 span {
font-size: 14px;
margin-top: 0;
}
.content-box.white {
color: #fff;
}
.content-box h2 {
margin-bottom: 15px;
}
.hexagon {
overflow: hidden;
cursor: pointer;
height: 400px;
margin: -80px 0 0 20px;
width: 200px;
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg);
}
.hexagon .hexagon-in1 {
overflow: hidden;
width: 100%;
height: 100%;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.hexagon .hexagon-in2 {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 50%;
visibility: visible;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.actionbox.primary {
background-color: #e6ae03;
color: #fff;
}
.actionbox .actionbox-inner {
padding: 40px 0;
width: 100%;
}
.testimonial-carousel {
border-bottom: 1px solid #eeeeee;
border-right: 1px solid #eeeeee;
}
.testimonial-carousel:after {
background-color: #fff;
content: "";
height: 55px;
position: absolute;
right: -1px;
top: 0;
width: 1px;
}
.testimonial-carousel .owl-dots {
left: 0;
position: absolute;
right: 0;
}
.control-four .owl-dots .owl-dot {
width: 13px;
height: 13px;
border-radius: 30px;
display: inline-block;
margin: 0 2px;
}
.tm-item {
border-left: 1px solid #eeeeee;
border-top: 1px solid #eeeeee;
margin: 55px 0 0;
padding: 0 30px 30px;
text-align: center;
}
.tm-item .tm-author {
height: 110px;
margin: -55px auto 25px;
width: 110px;
}
.tm-item .tm-meta {
margin-bottom: 10px;
}
.tm-item .tm-meta h4 {
color: #333333;
}
.zigzag-up,
.zigzag-up-light,
.zigzag-down-light,
.zigzag-down {
background: url("../img/icons/zigzag-down.png") repeat-x scroll 0 0 transparent;
display: block;
height: 6px;
position: absolute;
left: 0;
top: 0;
width: 100%;
}
.zigzag-up,
.zigzag-up-light {
background-image: url("../img/icons/zigzag-up.png");
top: auto;
bottom: 0;
}
.zigzag-up-light {
background-image: url("../img/icons/zigzag-up-light.png");
}
.zigzag-down-light {
background-image: url("../img/icons/zigzag-down-light.png");
}
/*==============================================
home-business5
===============================================*/
.feature-item .feature-head {
background-color: #fafafa;
}
.feature-item .icon {
background-color: #eeeeee;
height: 130px;
width: 150px;
}
.feature-item .icon img {
display: block;
margin: 0 auto;
width: 40%;
}
.feature-item .text {
padding-left: 15px;
}
.feature-item h3 {
color: #333333;
font-weight: 700;
}
.feature-item .text-center {
border: 1px solid #e5e5e5;
border-top: 0;
padding: 50px 35px;
}
/*==============================================
home-slider5
===============================================*/
/*-------------------------
Horizontal Header
--------------------------*/
.nHeight80 .navbar-nav > li > a {
line-height: 80px;
}
.nHeight100 .navbar-nav > li > a {
line-height: 100px;
}
/*==============================================
home-slider6
===============================================*/
.home-slider6 .item img {
margin: 0 auto;
max-width: 50%;
backface-visibility: hidden;
}
.home-slider6 .item .btn {
border: 1px solid #fff;
color: #fff;
font-family: "Raleway", sans-serif;
font-size: 18px;
font-weight: 700;
height: 60px;
line-height: 60px;
margin-top: 70px;
padding: 0 70px;
text-transform: none;
}
.home-slider6 .item .btn::before {
background-color: #fff;
}
.home-slider6 .item .btn:hover {
color: #333333;
}
/*==============================================
home-slider7
===============================================*/
.home-slider7 .slider-content h2,
.home-slider7 .slider-content h3 {
color: #e6ae03;
font-family: "Roboto Slab", serif;
font-size: 52px;
font-weight: 700;
text-transform: uppercase;
}
.home-slider7 .slider-content h1 {
color: #ffffff;
font-family: "Raleway", sans-serif;
font-size: 120px;
font-weight: 900;
line-height: 1;
text-transform: uppercase;
}
.home-slider7 .slider-content h3 {
color: #24dee0;
}
.home-slider7 .slider-content .btn {
font-family: "Open Sans", sans-serif;
font-size: 18px;
font-weight: 700;
line-height: 65px;
margin-top: 42px;
padding: 0 50px;
}
.home-slider7 .slider-content .two-radious {
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
}
.home-slider7 .slider-content .two-radious:before {
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
}
.man img {
margin: -120px auto 0;
}
/*==============================================
Vertical home
===============================================*/
.minimal {
font-family: "Raleway", sans-serif;
font-size: 14px;
letter-spacing: .075em;
}
.minimal h1,
.minimal h2,
.minimal h3,
.minimal h4,
.minimal h5,
.minimal h6 {
letter-spacing: 2px;
}
.minimal .section-head h2 {
font-weight: 200;
}
.minimal .hexagon-service h4 {
font-weight: 500;
}
.minimal [data-to] {
font-family: "Dosis", sans-serif;
font-weight: 200;
letter-spacing: 0.1em;
}
.minimal .project-info h3 {
font-weight: 300;
text-transform: none;
}
.minimal .portfolio-filter li a {
font-size: 13px;
letter-spacing: 2px;
padding: 10px 15px;
text-transform: none;
}
.minimal .widget-title {
font-weight: 400;
}
.vertical-nav.icon-only + .vertical-content,
.vertical-content.icon-only {
padding-left: 70px;
}
.vertical-content {
padding-left: 257px;
}
.vertical-content.pos-right {
padding-left: 0;
padding-right: 257px;
}
.vertical-content .container {
max-width: 1170px;
width: 100%;
}
.vertical-content .hexagon-service.style2 {
margin-bottom: 20px;
}
.text p:last-child {
margin-bottom: 0;
}
.padding-10p {
padding: 9% 10%;
}
.darkbg {
background-color: #111;
}
.white {
color: #fff;
}
.fw300 {
font-weight: 300;
}
.fw400 {
font-weight: 400;
}
.fw500 {
font-weight: 500;
}
.fw600 {
font-weight: 600;
}
.fw700 {
font-weight: 700;
}
.fw800 {
font-weight: 800;
}
.fw900 {
font-weight: 900;
}
.fz16 {
font-size: 16px;
}
/*-------------------------
vertical Nav
--------------------------*/
.vertical-nav {
background-color: #A7A7A7;
font-family: "Raleway", sans-serif;
height: 100%;
left: 0;
padding: 30px 30px 0;
position: fixed;
top: 0;
z-index: 100;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.vertical-nav .logo {
display: block;
margin-bottom: 30px;
}
.vertical-nav .logo3 {
display: none;
}
.vertical-nav.tp {
background-color: transparent;
}
.vertical-nav.bdr-right {
border-right: 1px solid rgba(255, 255, 255, 0.5);
}
.vertical-nav.bdr-right.active {
border-right: 0;
}
.vertical-nav.bdr-left {
border-left: 1px solid rgba(255, 255, 255, 0.5);
}
.vertical-nav.bdr-left.active {
border-right: 0;
}
.vertical-nav.solid-light {
background-color: #fff;
}
.vertical-nav.solid-dark,
.vertical-nav.solid-dark.active {
background-color: #19232e;
}
.vertical-nav.pos-right {
left: auto;
right: 0;
}
.vertical-nav.icon-only {
padding: 30px 5px;
}
.vertical-nav.icon-only .logo img {
width: 60px;
}
.vertical-nav.icon-only .nav-list > li > a i {
width: auto;
}
.vertical-nav.active {
background-color: #333333;
}
.vertical-nav .nav-list > li > .sub-nav-list {
left: -webkit-calc(100% + 50px);
left: calc(100% + 50px);
}
.nav-list {
margin-bottom: 30px;
}
.nav-list li {
position: relative;
}
.nav-list li:hover > ul {
opacity: 1;
visibility: visible;
}
.nav-list > li > a {
color: #000;
display: block;
font-weight: 600;
line-height: 40px;
}
.nav-list > li > a i {
width: 35px;
}
.nav-list > li > a span {
position: relative;
}
.nav-list > li > a span:before {
border-radius: 10px;
bottom: -15px;
box-shadow: -9px 0 0 0 #ffffff, 9px 0 0 0 #ffffff;
content: "";
height: 6px;
left: 50%;
position: absolute;
width: 6px;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
-webkit-transform: translateX(-50%) scale(0);
-moz-transform: translateX(-50%) scale(0);
-ms-transform: translateX(-50%) scale(0);
-o-transform: translateX(-50%) scale(0);
transform: translateX(-50%) scale(0);
}
.nav-list > li > a span:after {
background-color: #fff;
border-radius: 6px;
bottom: -15px;
content: "";
height: 6px;
left: 50%;
margin-left: -3px;
position: absolute;
width: 6px;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
.nav-list > li > a:hover span:before {
-webkit-transform: translateX(-50%) scale(1);
-moz-transform: translateX(-50%) scale(1);
-ms-transform: translateX(-50%) scale(1);
-o-transform: translateX(-50%) scale(1);
transform: translateX(-50%) scale(1);
}
.nav-list > li > a:hover span:after {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.solid-dark .sub-nav-list {
background-color: #19232e;
}
.pos-right .nav-list > li > .sub-nav-list {
left: -webkit-calc(-100% + -93px);
left: calc(-100% + -93px);
}
.pos-right .sub-nav-list .sub-nav-list {
left: -100%;
}
.sub-nav-list {
background-color: #333;
list-style: outside none none;
min-width: 200px;
left: 100%;
opacity: 0;
padding: 0;
position: absolute;
text-align: left;
top: 0;
visibility: hidden;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.sub-nav-list > li > a {
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
color: #fff;
display: block;
font-size: 12px;
font-weight: 600;
line-height: 45px;
padding: 0 15px;
position: relative;
text-transform: uppercase;
white-space: nowrap;
z-index: 0;
}
.sub-nav-list > li > a:before {
background-color: rgba(0, 0, 0, 0.2);
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
-webkit-transform: scale(0, 0);
-moz-transform: scale(0, 0);
-ms-transform: scale(0, 0);
-o-transform: scale(0, 0);
transform: scale(0, 0);
}
.sub-nav-list > li > a i {
position: absolute;
right: 15px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.sub-nav-list > li:last-child a {
border-bottom: 0;
}
.sub-nav-list > li.active > a:before,
.sub-nav-list > li:hover > a:before {
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
.icon-only .nav-list > li > .sub-nav-list {
left: -webkit-calc(100% + 5px);
left: calc(100% + 5px);
}
.solid-light.active {
background-color: #fff;
}
.solid-light .nav-list > li > a,
.solid-light .cart-btn > li {
color: #333333;
border-color: #333333;
}
.solid-light .nav-list > li > a a,
.solid-light .cart-btn > li a {
color: #333333;
}
.cart-btn li {
float: left;
border: 1px solid #fff;
display: block;
font-size: 18px;
height: 40px;
line-height: 38px;
text-align: center;
width: 50px;
margin: 0 auto;
}
.cart-btn li:last-child {
margin-left: -1px;
line-height: 37px;
}
.cart-btn li a {
color: #fff;
}
.cart-btn li:hover {
background-color: #fff;
}
.cart-btn li:hover a {
color: #333333;
}
.cart-btn.vrtcl li {
display: block;
float: none;
margin: 0 auto;
}
.cart-btn.text-right li {
float: right;
}
.cart-btn.text-right li:first-child {
margin-left: -1px;
}
/* .active {
.cart-btn {
li {
display: block;
float: none;
.transition (0s, 0s);
&:last-child {
margin: -1px auto 0;
}
}
}
} */
.home-slider5 .item {
background-position: center top;
}
.home-slider5 .slider-content {
font-family: "Raleway", sans-serif;
color: #fff;
}
.home-slider5 .slider-content img {
display: block;
margin: 0 auto 20px;
width: 200px;
}
.home-slider5 .slider-content h2 {
font-size: 38px;
font-weight: 800;
text-transform: uppercase;
}
.home-slider5 .slider-content p {
font-size: 18px;
font-weight: 400;
line-height: 30px;
margin: 20px 0 0;
}
.home-slider5 .slider-content .sl-btn {
margin-top: 30px;
}
.home-slider5 .slider-content .btn {
font-weight: 500;
text-transform: none;
}
.home-slider5 .slider-content .btn + .btn {
margin-left: 15px;
}
/* hexagon service */
.hexagon-service {
color: #000000;
font-family: "Raleway", sans-serif;
line-height: 24px;
}
.hexagon-service.white {
color: #fff;
}
.hexagon-service h4 {
font-weight: 800;
text-transform: uppercase;
}
.hexagon-service p {
margin: 16px 0 0;
}
.hexagon-service.style2 {
margin-bottom: 30px;
}
.hexagon-service.style2 .tablecell {
vertical-align: top;
}
.hexagon-service.style2:last-child {
margin-bottom: 0;
}
.hexagon-service.style2 .hex-shape {
margin: 0 30px 0 0;
}
.hex-shape {
background: transparent url("../img/icons/hexagon.png") no-repeat scroll 0 0 contain;
font-size: 24px;
height: 78px;
line-height: 78px;
margin: 0 auto 40px;
text-align: center;
width: 70px;
}
.hex-shape.white {
background-image: url("../img/icons/hexagon-w.png");
}
.navyblue {
background-color: #19232e;
color: #fff;
}
.navyblue .cta-text h3 {
color: #fff;
line-height: 35px;
}
.overview-text.dark h2 {
color: #fff;
font-size: 36px;
font-weight: 800;
}
.overview-text.dark .lead {
color: #fff;
font-weight: 400;
}
.testimonial2 .avatar {
background-color: #fff;
border: 1px solid #e5e5e5;
border-radius: 50%;
height: 290px;
margin: 0 auto;
padding: 8px;
width: 290px;
}
.testimonial2 .info p {
margin: 32px 0 0;
}
.testimonial2 .info h5 {
color: #333333;
font-weight: 700;
margin-top: 32px;
}
.testimonial2 .info span {
display: inline-block;
margin-top: 3px;
}
.testimonial2-wrapper {
position: relative;
}
.testimonial2-wrapper .avatar-bg {
background-color: #eeeeee;
height: 100px;
position: absolute;
top: 96px;
width: 100%;
}
.control-five .owl-dots {
display: block;
margin-top: 40px;
text-align: center;
}
.control-five .owl-dot {
background: transparent url("../img/icons/bull.png") no-repeat scroll center center;
display: inline-block;
height: 21px;
margin: 0 1px;
position: relative;
width: 21px;
}
.control-five .owl-dot span {
background: transparent url("../img/icons/bull2.png") no-repeat scroll center center;
display: block;
height: 10px;
left: 50%;
margin: -5px 0 0 -6.5px;
position: absolute;
top: 50%;
width: 13px;
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-o-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 0 0;
-moz-transform-origin: 0 0 0;
-ms-transform-origin: 0 0 0;
-o-transform-origin: 0 0 0;
transform-origin: 0 0 0;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.control-five .owl-dot.active span {
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
-o-transform: scaleX(1);
transform: scaleX(1);
}
.control-six .owl-dots {
bottom: 0;
left: 0;
position: absolute;
right: 0;
text-align: center;
margin-bottom: 11px;
}
.control-six .owl-dot {
background-color: #fff;
border: 2px solid transparent;
border-radius: 15px;
display: inline-block;
height: 15px;
margin: 0 3px;
text-align: center;
width: 15px;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
}
.control-six .owl-dot.active {
background-color: transparent;
border: 2px solid #fff;
height: 17px;
position: relative;
top: 1px;
width: 17px;
}
.control-7 .owl-dots {
margin-top: 50px;
text-align: center;
}
.control-7 .owl-dot {
background: transparent url("../img/icons/bullet-up-stroke.svg") no-repeat scroll 0 0;
display: inline-block;
height: 13px;
margin: 0 -2px;
width: 20px;
}
.control-7 .owl-dot:nth-child(2n) {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
filter: blur(0px);
}
.control-7 .owl-dot.active {
background-image: url("../img/icons/bullet-up-fill.svg");
}
.team-sync-carousel {
background-color: #fff;
}
.team-sync-carousel .slick-slide {
position: relative;
}
.team-sync-carousel .slick-slide .overlay {
background-color: #19232e;
opacity: 0;
visibility: visible;
}
.team-sync-carousel .slick-current .overlay {
opacity: .9;
visibility: visible;
}
.team-overview .designation {
display: block;
font-weight: 600;
margin-bottom: 30px;
}
.team-sync-carousel .item {
cursor: pointer;
}
.process-item {
position: relative;
}
.process-item .svg-graphic {
height: 300px;
width: 100%;
}
.process-item .svg-graphic polygon {
fill: #000;
}
.process-item .svg-graphic image {
opacity: 0.5;
}
.process-item span {
color: #fff;
font-family: "Raleway", sans-serif;
font-size: 24px;
font-weight: 600;
left: 50%;
position: absolute;
top: 50%;
z-index: 10;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/*==============================================
About
===============================================*/
#about-slider2 {
margin-top: 10px;
}
#about-slider2 .item {
cursor: pointer;
padding: 0 5px;
}
/*==============================================
Blog Single comments
===============================================*/
/* single page post author */
.comments-title {
color: #000;
font-size: 20px;
font-weight: 700;
padding-bottom: 20px;
}
.post-author .media-left {
padding-right: 30px;
}
.post-author .media-heading {
margin-bottom: 10px;
}
.post-author li a {
border: 1px solid #d7d7d7;
border-radius: 30px;
color: #c7c7c7;
display: inline-block;
height: 30px;
text-align: center;
width: 30px;
}
.post-author li a:hover {
background-color: #333333;
border-color: #333333;
color: #ffffff;
}
.comments-post {
padding-bottom: 0;
}
.comment_author_thumb {
float: left;
width: 70px;
}
.single_comment {
border-top: 1px solid #ededed;
margin: 25px 0 0;
padding: 25px 0 0;
}
.single_comment .single_comment {
margin-left: 100px;
}
.comment_author_thumb a {
display: block;
}
.comment_author_thumb img:hover {
opacity: 0.8;
}
.comment_info {
margin: 10px 0 30px 90px;
}
.comment_info h4 {
color: #333333;
text-shadow: none;
}
.comment_info h4 a:not(.reply) {
color: #777777;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
}
.comment_info h4 a:not(.reply):hover {
color: #e6ae03;
}
.comment_info h4 .reply {
background-color: #ddd;
border-radius: 2px;
color: #333333;
display: inline-block;
float: right;
font-size: 13px;
margin-top: -3px;
padding: 5px 11px 6px;
text-decoration: none;
}
.comment_info h4 .reply:hover {
background-color: #e6ae03;
color: #ffffff;
}
.comment_info p a {
color: #b2b2b1;
display: inline-block;
text-decoration: underline;
}
.comment_form {
padding-top: 40px;
}
.comment_form h3 {
border-bottom: 1px solid #ededed;
color: #000;
font-size: 20px;
padding-bottom: 20px;
margin-bottom: 40px;
font-weight: 700;
}
/*==============================================
Agency Home
===============================================*/
.agency-home {
margin-top: 100px;
}
.site-intro {
font-family: "Poiret One", cursive;
margin: 0 auto 180px;
max-width: 100%;
text-align: center;
width: 810px;
}
.site-intro h2 {
color: #333333;
font-size: 48px;
}
.client-border {
border-right: 1px solid #e5e5e5;
height: 200px;
position: relative;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.client-border:nth-child(6),
.client-border:nth-child(12) {
border-right: 0;
}
.client-border:nth-child(n+7) {
border-top: 1px solid #e5e5e5;
}
.client-border img {
bottom: 0;
left: 0;
margin: auto;
opacity: .3;
position: absolute;
right: 0;
top: 0;
width: 80%;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.client-border:hover {
background-color: #e8e8e8;
}
.client-border:hover img {
opacity: 1;
}
.client-border.primary {
border-right-color: rgba(255, 255, 255, 0.4);
height: 133px;
}
.client-border.primary img {
opacity: 1;
}
.client-border.primary:hover {
background-color: transparent;
}
/*==============================================
Personal Home
===============================================*/
.personal-home {
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
}
.personal-content {
color: #fff;
left: 15px;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.personal-content h2 {
font-family: "Raleway", sans-serif;
font-size: 120px;
font-weight: 700;
}
.personal-content p {
font-size: 24px;
line-height: 38px;
margin: 20px 0 0;
}
.personal-content .btn {
margin-top: 30px;
}
.gray-bg {
background-color: #eeeeee;
}
.gray-bg-2 {
background-color: #f7f7f7;
}
.dark-bg {
background-color: #333333;
}
.no-gutter .portfolio-item {
margin: 0;
}
.portfolio-item {
position: relative;
margin-bottom: 30px;
overflow: hidden;
}
.portfolio-item.scale-img img {
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.portfolio-item.scale-img:hover img {
-webkit-transform: scale(1.1) rotate(2deg);
-moz-transform: scale(1.1) rotate(2deg);
-ms-transform: scale(1.1) rotate(2deg);
-o-transform: scale(1.1) rotate(2deg);
transform: scale(1.1) rotate(2deg);
}
.pf-hover {
background-color: #fff;
border-left: 5px solid #e6ae03;
bottom: 20px;
left: 20px;
opacity: 0;
overflow: hidden;
position: absolute;
right: 20px;
top: 20px;
width: 0;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.pf-hover.hover-three {
background-color: transparent;
border: 0 none;
bottom: 0;
left: 0;
opacity: 1;
right: 0;
top: 0;
width: 100% !important;
z-index: 0;
}
.pf-hover.hover-three:before {
background-color: transparent;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.pf-hover.hover-three p {
color: #fff;
font-size: 16px;
margin: 0 auto;
padding: 0 20px;
position: absolute;
text-align: center;
top: 50%;
opacity: 0;
width: 100%;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.pf-hover.hover-three .pf-hover-inner {
background-color: #fbfbfb;
bottom: 0;
left: 0;
padding: 25px;
right: 0;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
.pf-hover.hover-three .pf-hover-inner h4 {
float: left;
margin-bottom: 0;
-webkit-transition: all 0.3s ease-in-out 0.07s;
-moz-transition: all 0.3s ease-in-out 0.07s;
-o-transition: all 0.3s ease-in-out 0.07s;
transition: all 0.3s ease-in-out 0.07s;
-webkit-transform: translateY(200%);
-moz-transform: translateY(200%);
-ms-transform: translateY(200%);
-o-transform: translateY(200%);
transform: translateY(200%);
}
.pf-hover.hover-three .pf-hover-inner a {
color: #777777;
float: right;
-webkit-transform: translateY(200%);
-moz-transform: translateY(200%);
-ms-transform: translateY(200%);
-o-transform: translateY(200%);
transform: translateY(200%);
}
.pf-hover.hover-three .pf-hover-inner .img-popup {
-webkit-transition: all 0.3s ease-in-out 0.12s;
-moz-transition: all 0.3s ease-in-out 0.12s;
-o-transition: all 0.3s ease-in-out 0.12s;
transition: all 0.3s ease-in-out 0.12s;
}
.pf-hover.hover-three .pf-hover-inner .ajax-popup {
margin-left: 20px;
-webkit-transition: all 0.3s ease-in-out 0.18s;
-moz-transition: all 0.3s ease-in-out 0.18s;
-o-transition: all 0.3s ease-in-out 0.18s;
transition: all 0.3s ease-in-out 0.18s;
}
.pf-hover.hover-three a {
display: none;
}
.pf-hover .caption {
bottom: auto;
opacity: 1;
right: 20px;
top: 20px;
}
.pf-hover .caption li a {
border: 1px solid;
color: #b4b4b4;
height: 39px;
position: relative;
}
.pf-hover .caption li a:hover {
background-color: #e6ae03;
border-color: #e6ae03;
color: #fff;
}
.pf-hover .caption li:first-child a {
margin-right: -14px;
}
.pf-hover .caption li:first-child a:hover {
z-index: 1;
}
.pf-hover.hover-five {
background-color: #e6ae03;
border: 0 none;
text-align: center;
width: -webkit-calc(100% - 40px);
width: calc(100% - 40px);
}
.pf-hover.hover-five .icon {
border-radius: 50%;
color: #333333;
display: block;
font-size: 24px;
height: 60px;
line-height: 60px;
margin: 30px auto 0;
position: relative;
text-align: center;
width: 60px;
z-index: 0;
}
.pf-hover.hover-five .icon:before,
.pf-hover.hover-five .icon:after {
background-color: rgba(255, 255, 255, 0.3);
border-radius: 50%;
content: "";
height: 70px;
left: 50%;
margin: -35px 0 0 -35px;
position: absolute;
top: 50%;
width: 70px;
z-index: -1;
}
.pf-hover.hover-five .icon:after {
background-color: #fff;
height: 60px;
margin: -30px 0 0 -30px;
width: 60px;
}
.pf-hover.hover-five h4 {
bottom: 40px;
color: #333;
font-family: Poiret One;
font-size: 30px;
left: 0;
position: absolute;
right: 0;
}
.pf-hover.hover-five h4::before {
background-color: #fff;
bottom: -10px;
content: "";
height: 2px;
left: 50%;
margin-left: -48px;
position: absolute;
width: 95px;
}
.pf-hover.hover-six {
background-color: rgba(255, 255, 255, 0.9);
border: 0 none;
text-align: center;
width: -webkit-calc(100% - 40px);
width: calc(100% - 40px);
}
.pf-hover.hover-six .icon {
border-radius: 50%;
color: #fff;
display: block;
font-size: 24px;
height: 60px;
line-height: 60px;
margin: 30px auto 0;
position: relative;
text-align: center;
width: 60px;
z-index: 0;
}
.pf-hover.hover-six .icon:before,
.pf-hover.hover-six .icon:after {
background-color: rgba(0, 0, 0, 0.3);
border-radius: 50%;
content: "";
height: 70px;
left: 50%;
margin: -35px 0 0 -35px;
position: absolute;
top: 50%;
width: 70px;
z-index: -1;
}
.pf-hover.hover-six .icon:after {
background-color: #000;
height: 60px;
margin: -30px 0 0 -30px;
width: 60px;
}
.pf-hover.hover-six h4 {
bottom: 40px;
color: #333333;
font-family: "Poiret One", cursive;
font-size: 30px;
left: 0;
position: absolute;
right: 0;
}
.pf-hover.hover-six h4::before {
background-color: #777777;
bottom: -10px;
content: "";
height: 2px;
left: 50%;
margin-left: -48px;
position: absolute;
width: 95px;
}
.pf-hover.hover-seven {
background-color: rgba(25, 35, 46, 0.8);
border: 0 none;
bottom: 0;
color: #fff;
font-family: "Roboto", sans-serif;
left: 0;
opacity: 1;
padding: 30px 20px;
margin-top: 30px;
top: auto;
width: 100%;
overflow: visible;
z-index: 0;
-webkit-transform: translateY(115%);
-moz-transform: translateY(115%);
-ms-transform: translateY(115%);
-o-transform: translateY(115%);
transform: translateY(115%);
}
.pf-hover.hover-seven::before {
background: transparent url("../img/elements/pf-hover.png") no-repeat scroll 0 0 cover;
content: "";
height: 22px;
left: 0;
position: absolute;
top: 0;
width: 100%;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.pf-hover.hover-seven h4 a {
color: #fff;
}
.pf-hover.hover-seven h4 a:hover {
color: #e6ae03;
}
.pf-hover.hover-seven p {
font-size: 13px;
margin: 0;
}
.pf-hover.hover-8 {
background-color: transparent;
border: 0 none;
bottom: 0;
height: 100%;
left: 0;
opacity: 1;
right: 0;
text-align: center;
top: auto;
width: 100%;
}
.pf-hover.hover-8 .ajax-popup {
border-radius: 50%;
color: #fff;
font-size: 20px;
font-weight: 400;
height: 50px;
line-height: 50px;
left: 50%;
position: absolute;
top: 25%;
width: 50px;
z-index: 0;
-webkit-transform: translate(-50%, -50%) scale(0);
-moz-transform: translate(-50%, -50%) scale(0);
-ms-transform: translate(-50%, -50%) scale(0);
-o-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
}
.pf-hover.hover-8 .ajax-popup::before,
.pf-hover.hover-8 .ajax-popup::after {
background-color: #e6ae03;
border-radius: 50%;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.pf-hover.hover-8 .ajax-popup::after {
background-color: #000;
opacity: 0.15;
position: absolute;
z-index: -2;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.pf-hover.hover-8 .ajax-popup:hover::after {
-webkit-transform: scale(1.15);
-moz-transform: scale(1.15);
-ms-transform: scale(1.15);
-o-transform: scale(1.15);
transform: scale(1.15);
}
.pf-hover.hover-8 .pf-hover-inner {
background-color: rgba(0, 0, 0, 0.5);
bottom: 0;
color: #fff;
left: 0;
padding: 21px 0 17px;
right: 0;
text-align: center;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
.pf-hover.hover-8 .pf-hover-inner h4 {
font-weight: 500;
margin-bottom: 0;
text-transform: none;
-webkit-transform: translateY(200%);
-moz-transform: translateY(200%);
-ms-transform: translateY(200%);
-o-transform: translateY(200%);
transform: translateY(200%);
-webkit-transition: all 0.3s ease-in-out 0.07s;
-moz-transition: all 0.3s ease-in-out 0.07s;
-o-transition: all 0.3s ease-in-out 0.07s;
transition: all 0.3s ease-in-out 0.07s;
}
.pf-hover.hover-8 .pf-hover-inner span {
display: inline-block;
-webkit-transform: translateY(200%);
-moz-transform: translateY(200%);
-ms-transform: translateY(200%);
-o-transform: translateY(200%);
transform: translateY(200%);
-webkit-transition: all 0.3s ease-in-out 0.12s;
-moz-transition: all 0.3s ease-in-out 0.12s;
-o-transition: all 0.3s ease-in-out 0.12s;
transition: all 0.3s ease-in-out 0.12s;
}
.pf-hover.hover-9 {
background-color: #e6ae03;
color: #fff;
border: 0 none;
bottom: -1px;
font-family: "Open Sans", sans-serif;
font-weight: 400;
left: 0;
opacity: 1;
padding: 20px;
position: absolute;
right: 0;
top: auto;
width: 100% !important;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
.pf-hover.hover-9 .pf-cat {
display: block;
font-size: 12px;
opacity: 0;
-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
-ms-transform: translateY(20px);
-o-transform: translateY(20px);
transform: translateY(20px);
-webkit-transition: all 0.3s ease-in-out 0.1s;
-moz-transition: all 0.3s ease-in-out 0.1s;
-o-transition: all 0.3s ease-in-out 0.1s;
transition: all 0.3s ease-in-out 0.1s;
}
.pf-hover.hover-9 h5 {
opacity: 0;
-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
-ms-transform: translateY(20px);
-o-transform: translateY(20px);
transform: translateY(20px);
-webkit-transition: all 0.3s ease-in-out 0.2s;
-moz-transition: all 0.3s ease-in-out 0.2s;
-o-transition: all 0.3s ease-in-out 0.2s;
transition: all 0.3s ease-in-out 0.2s;
}
.portfolio-item .post-thumb {
position: relative;
}
.portfolio-item .post-thumb img {
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.portfolio-item .post-thumb .img-popup {
background: rgba(255, 255, 255, 0.3) url("../img/icons/cross2.png") no-repeat scroll center center;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
opacity: 0;
}
.portfolio-item:hover .post-thumb img {
-webkit-transform: translateY(-80px);
-moz-transform: translateY(-80px);
-ms-transform: translateY(-80px);
-o-transform: translateY(-80px);
transform: translateY(-80px);
}
.portfolio-item:hover .post-thumb .img-popup {
opacity: 1;
}
.portfolio-item:hover .hover-9 {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
.portfolio-item:hover .pf-cat,
.portfolio-item:hover h5 {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
.pf-hover-inner {
bottom: 15px;
left: 15px;
position: absolute;
}
.pf-hover-inner h4 {
margin-bottom: 10px;
text-transform: uppercase;
white-space: nowrap;
}
.portfolio-item.hover-four {
overflow: visible;
}
.portfolio-item.hover-four .pf-hover {
background-color: red;
border: 0 none;
opacity: 1;
position: static;
visibility: visible;
width: 100% !important;
}
.portfolio-item.hover-four .pf-hover h4 {
margin: 0;
float: left;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.portfolio-item.hover-four .pf-hover a {
color: #777777;
float: right;
line-height: normal;
}
.portfolio-item.hover-four .pf-hover .ajax-popup {
margin-left: 20px;
}
.portfolio-item.hover-four .pf-hover-inner {
background-color: #eeeeee;
padding: 30px;
position: static;
}
.portfolio-item.hover-four:hover h4,
.portfolio-item.hover-four:hover a {
color: #e6ae03;
}
.portfolio-item:hover .pf-hover {
opacity: 1;
width: -webkit-calc(100% - 40px);
width: calc(100% - 40px);
}
.portfolio-item:hover .hover-three:before {
background-color: rgba(0, 0, 0, 0.4);
}
.portfolio-item:hover .hover-three .pf-hover-inner {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
.portfolio-item:hover .hover-three .pf-hover-inner h4,
.portfolio-item:hover .hover-three .pf-hover-inner .img-popup,
.portfolio-item:hover .hover-three .pf-hover-inner .ajax-popup {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
.portfolio-item:hover .hover-three p {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
opacity: 1;
}
.portfolio-item:hover .hover-three a {
display: inline-block;
}
.portfolio-item:hover .portfolio-thumb:before {
opacity: 0.4;
}
.portfolio-item:hover .portfolio-thumb a {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.portfolio-item:hover .hover-seven {
width: 100%;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
.portfolio-item:hover .hover-8 {
width: 100%;
}
.portfolio-item:hover .hover-8 .pf-hover-inner {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
.portfolio-item:hover .hover-8 .pf-hover-inner h4,
.portfolio-item:hover .hover-8 .pf-hover-inner span {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
.portfolio-item:hover .hover-8 .ajax-popup {
-webkit-transform: translate(-50%, -50%) scale(1);
-moz-transform: translate(-50%, -50%) scale(1);
-ms-transform: translate(-50%, -50%) scale(1);
-o-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
}
.portfolio-item .aware-elem {
height: -webkit-calc(100% - 40px);
height: calc(100% - 40px);
display: none;
position: absolute;
-webkit-transition: all 0s ease-in-out 0s;
-moz-transition: all 0s ease-in-out 0s;
-o-transition: all 0s ease-in-out 0s;
transition: all 0s ease-in-out 0s;
}
.portfolio-item.bottom-border {
border-bottom: 1px solid #eeeeee;
margin-bottom: 50px;
padding-bottom: 60px;
}
.portfolio-thumb {
position: relative;
}
.portfolio-thumb:before {
background-color: #000;
content: "";
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.portfolio-thumb a {
border: 1px solid;
border-radius: 25px;
color: #fff;
display: inline-block;
height: 50px;
left: 50%;
margin: -25px 0 0 -25px;
line-height: 50px;
position: absolute;
text-align: center;
top: 50%;
width: 50px;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
.portfolio-desc h3 {
color: #454545;
margin-bottom: 15px;
}
.portfolio-meta a {
color: #777777;
height: 40px;
line-height: 39px;
padding: 0 25px;
}
.portfolio-meta a:first-child {
margin-right: 15px;
}
.portfolio-meta a i {
height: 38px;
line-height: 38px;
width: 38px;
}
.portfolio-meta .btn-icon-theme-bdr {
padding-left: 63px;
}
.portfolio-desc .social-5 {
border-top: 1px solid #eeeeee;
margin-top: 35px;
padding-top: 20px;
}
.social-5 li {
float: left;
margin-right: 5px;
}
.social-5 li:last-child {
margin-right: 0;
}
.social-5 li a {
border: 1px solid;
border-radius: 3px;
color: #ccc;
display: block;
height: 40px;
line-height: 40px;
text-align: center;
width: 40px;
}
.social-5 li a:hover {
background-color: #ccc;
border-color: #ccc;
color: #fff;
}
.logo-carousel .item img {
opacity: 0.5;
max-width: 75%;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.logo-carousel .item img:hover {
opacity: 0.9;
}
.parallax .logo-carousel .item img {
opacity: 1;
}
.logo-border [class^="col-"] {
border-right: 1px solid rgba(255, 255, 255, 0.4);
}
.logo-border [class^="col-"]:last-child {
border-right: 0;
}
.logo-border .logo-item {
height: 133px;
position: relative;
}
.logo-border .logo-item img {
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
}
.slider-wrapper {
height: 100%;
position: relative;
width: 100%;
}
#carousel {
bottom: 0;
left: 0;
position: absolute;
width: 100%;
}
#carousel .item {
cursor: pointer;
}
.feature-carousel .item {
position: relative;
}
.feature-carousel .item img {
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
/* ------- portfolio fade --------*/
#zoom_img {
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.zoom_img_main {
position: relative;
top: 0;
left: 0;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.custom_fancy.acitve {
background: #fff;
}
.custom_fancy {
display: none;
height: 100%;
left: 0;
opacity: 1;
visibility: visible;
position: fixed;
top: 0;
width: 100%;
z-index: 11000;
}
.fade-popup {
background-color: #fff;
/* height: 100%;
left: 0;
opacity:1;
visibility: visible;
position: fixed;
top: 0;
width: 100%;
z-index: 11000; */
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.fade-popup.active {
opacity: 1;
visibility: visible;
}
.fade-info {
left: 0;
padding-left: 20px;
padding-right: 20px;
position: absolute;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.fade-info .info-thumb {
float: left;
width: 48%;
}
.fade-info .info-text {
position: absolute;
right: 0;
top: 50%;
width: 48%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.close-popup {
background-color: red;
color: #fff;
font-family: consolas;
font-size: 22px;
height: 50px;
line-height: 50px;
position: absolute;
right: 20px;
text-align: center;
top: -60px;
width: 50px;
z-index: 1200;
}
/* ------- end portfolio fade --------*/
.about-me h2 {
margin-bottom: 20px;
text-transform: uppercase;
}
.about-me p {
font-family: "Raleway", sans-serif;
line-height: 30px;
margin-bottom: 0;
}
.aboutme-img {
background-repeat: no-repeat;
background-size: contain;
position: relative;
}
#about-me .skillset {
margin-top: 45px;
}
.tm-text blockquote {
border: 0 none;
font-style: normal;
margin: 0;
padding: 0 0 0 35px;
position: relative;
}
.tm-text blockquote:before {
content: "\f10d";
font-family: FontAwesome;
font-size: 24px;
left: 0;
position: absolute;
top: 3px;
}
.tm-text blockquote span {
display: block;
font-weight: 400;
text-align: right;
}
.tm-carousel li {
margin-right: 14px;
opacity: 0.7;
}
.tm-carousel li.flex-active-slide {
opacity: 1;
}
.tm-carousel li img {
width: 100%;
}
.tm-carousel .flex-direction-nav a {
background-color: #fff;
border: 1px solid #ccc;
color: #ccc;
font-size: 28px;
line-height: 40px;
opacity: 0;
text-align: center;
text-shadow: none;
}
.tm-carousel .flex-direction-nav a:before {
content: none;
}
.tm-carousel .flex-prev {
left: 15px;
}
.tm-carousel .flex-next {
right: 15px;
}
.tm-carousel:hover .flex-direction-nav a {
opacity: 1;
}
/*==============================================
Shop Page
===============================================*/
/*---------------- Header Cart ----------------*/
.site-header.cart-enable .navbar-collapse:not(.bottom-nav) {
margin-right: 70px;
}
.header-cart {
position: absolute;
right: 0;
top: 50%;
-webkit-transform: translate(50%, -50%);
-moz-transform: translate(50%, -50%);
-ms-transform: translate(50%, -50%);
-o-transform: translate(50%, -50%);
transform: translate(50%, -50%);
}
.header-cart > a {
display: inline-block;
height: 38px;
line-height: 38px;
position: relative;
text-align: center;
width: 38px;
}
.header-cart .cart-button {
background: transparent url("../img/icons/cart.png") no-repeat scroll center center;
margin-right: 5px;
text-indent: -9999em;
}
.header-cart .cart-item-count {
background-color: #000;
border-radius: 30px;
bottom: -10px;
color: #fff;
display: block;
font-size: 11px;
font-weight: 400;
height: 20px;
left: 50%;
line-height: 20px;
margin-left: -10px;
position: absolute;
text-align: center;
text-indent: 0;
width: 20px;
}
.header-cart .search-toggle {
background-color: #fff;
border-radius: 50px;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.06);
color: #777;
margin-right: 10px;
}
.header-cart .shop-sidebar {
background: #ffffff url("../img/icons/sidebar.png") no-repeat scroll center center;
border-radius: 50px;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.06);
right: 0;
text-indent: -9999em;
top: 0;
}
/* popup Search */
.search-active {
overflow: hidden;
}
.search-wrapper {
background-color: rgba(255, 255, 255, 0.95);
display: none;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1100;
}
.search-wrapper .close-search {
background: transparent url("../img/icons/popup_close@2x.png") no-repeat scroll center center / 100% auto;
display: inline-block;
height: 25px;
position: absolute;
right: 50px;
text-indent: -9999em;
top: 50px;
width: 25px;
}
.search-wrapper .search-form {
left: 50%;
max-width: 650px;
position: absolute;
top: 50%;
width: 100%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.search-wrapper .input-field {
font-size: 16px;
letter-spacing: 1px;
padding-right: 55px;
}
.search-wrapper .search-sub {
background-color: transparent;
border: 0 none;
color: #c5c5c5;
font-size: 18px;
height: 50px;
padding: 0;
position: absolute;
right: 1px;
top: 1px;
width: 50px;
}
.hc-sidebar-wrapper {
background-color: #e4e5e6;
height: 100%;
padding: 50px 0 0;
position: fixed;
right: 0;
top: 0;
width: 300px;
z-index: 200;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
.hc-sidebar-wrapper.active {
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}
.close-sidebar {
background: transparent url("../img/icons/close.png") no-repeat scroll center center;
display: block;
height: 14px;
position: absolute;
right: 25px;
text-indent: -9999em;
top: 35px;
width: 14px;
}
.hc-sidebar {
border-bottom: 1px solid #d8d9da;
font-family: "Raleway", sans-serif;
margin-bottom: 22px;
padding: 0 25px 35px;
}
.hc-sidebar:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: 0;
}
.hc-sidebar h4 {
color: #1b1b1b;
font-size: 16px;
margin: 0 0 55px;
text-align: center;
}
.hc-sidebar.registration {
text-align: center;
}
.hc-sidebar.registration h3 {
color: #000;
font-family: "Raleway", sans-serif;
font-weight: 300;
margin-bottom: 25px;
}
.hc-sidebar .widget-products,
.hc-sidebar .widget-product {
border: 0;
}
.hc-sidebar .widget-products {
position: relative;
border: 0;
}
.hc-sidebar .widget-products .product-thumb {
padding-right: 0;
}
.hc-sidebar .widget-products .product-desc a {
margin-bottom: 0;
}
.hc-sidebar .widget-products .product-desc strong {
display: block;
font-family: "Dosis", sans-serif;
margin-top: 15px;
}
.hc-sidebar .widget-products .remove {
background: transparent url("../img/icons/close.png") no-repeat scroll center center;
display: block;
height: 14px;
margin-top: -7px;
opacity: 0;
position: absolute;
right: 0;
text-indent: -9999em;
top: 50%;
width: 14px;
}
.hc-sidebar .widget-products:hover .remove {
opacity: 1;
}
.login-form input:not(.rememberme) {
background-color: transparent;
border: 0 none;
border-bottom: 1px solid #c7c8c9;
font-weight: 400;
height: 40px;
padding: 0;
width: 100%;
}
.login-form > span {
display: block;
font-weight: 500;
line-height: normal;
margin: 12px 0 36px;
text-align: right;
}
.login-form > span a {
color: #999999;
}
.login-form .remember-me label {
color: #000;
display: inline-block;
font-family: "Raleway", sans-serif;
font-size: 12px;
font-weight: 600;
}
.login-form input.login {
background-color: #fff;
border: 0;
color: #353535;
font-size: 12px;
font-weight: 700;
margin-top: 30px;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.login-form input.login:hover {
background-color: #353535;
color: #fff;
}
.registration .btn-dark {
background-color: #fff;
color: #353535;
border: 0;
}
.registration .btn-dark:hover {
background-color: #353535;
color: #fff;
}
.cb-custom {
left: 0;
position: absolute;
top: 0;
visibility: hidden;
}
.cb-custom + label {
cursor: pointer;
margin: 0;
padding: 0 0 0 33px;
position: relative;
}
.cb-custom + label:before {
border: 1px solid #333;
content: "";
height: 19px;
left: 0;
margin: -9.5px 0 0;
position: absolute;
top: 50%;
width: 19px;
}
.cb-custom:checked + label:after {
background: transparent url("../img/icons/check.png") no-repeat scroll center center;
content: "";
height: 19px;
left: 0;
position: absolute;
top: 4px;
width: 19px;
}
/*---------------- shop-slider1 ----------------*/
.item {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.shop-slider1 .item {
background-position: center center;
background-repeat: no-repeat;
background-color: #EBEBEB;
background-size: cover;
height: 520px;
}
.shop-slider1 .item .slide-img {
position: absolute;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.shop-slider1 .item img {
display: inline-block;
max-width: 240px;
width: auto;
}
.shop-slider1 .item .slide-content {
font-family: "Raleway", sans-serif;
padding-left: 50px;
position: absolute;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.shop-slider1 .item .slide-content h2 {
color: #333333;
font-size: 26px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
}
.shop-slider1 .item .slide-content span:not(.price) {
color: #757575;
display: block;
font-size: 18px;
font-weight: 300;
margin-bottom: 160px;
text-transform: uppercase;
}
.shop-slider1 .item .slide-content .price {
color: #757575;
display: block;
font: 400 30px/26px "Dosis", sans-serif;
margin: 0 0 14px;
}
.shop-slider1 .item2 {
background-position: right center;
background-repeat: no-repeat;
background-size: cover;
}
.shop-slider1 .item2 .slide-content {
right: auto;
}
.btn-round {
border-radius: 50px;
}
/*---------------- shop-slider2 ----------------*/
.shop-slider3 .item {
position: relative;
}
.shop-slider3 .item:after {
background-color: rgba(0, 0, 0, 0.4);
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.shop-slider3 .container {
position: relative;
height: 500px;
z-index: 2;
}
.shop-slider3 .slide-content {
font-family: "Raleway", sans-serif;
color: #fff;
left: 15px;
position: absolute;
top: 50%;
width: 100%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.shop-slider3 .slide-content p {
font-size: 18px;
font-weight: 400;
margin-bottom: 43px;
}
.shop-slider3 .slide-content h1 {
font-size: 55px;
font-weight: 800;
text-transform: uppercase;
}
.shop-slider3 .slide-content h2 {
font-size: 48px;
font-weight: 200;
margin-top: 15px;
text-transform: uppercase;
}
.shop-slider3 .slide-content .btn {
margin-top: 50px;
}
/*---------------- Products ----------------*/
.shop2-wrapper > .container-fluid {
padding-left: 50px;
padding-right: 50px;
}
.heading {
margin-bottom: 65px;
}
.heading h2 {
color: #353535;
display: inline-block;
font-size: 42px;
font-weight: 300;
position: relative;
text-transform: uppercase;
}
.heading h2:after {
background-color: #000;
content: "";
height: 3px;
margin-top: -1.5px;
position: absolute;
right: -70px;
top: 50%;
width: 44px;
}
.heading h3 {
font-size: 26px;
font-weight: 300;
}
.heading p {
color: #999;
font-family: "Raleway", sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 21px;
margin-bottom: 0;
}
.heading.type-two h2 {
font-family: "Raleway", sans-serif;
font-size: 26px;
font-weight: 700;
}
.heading.type-two h2:after {
content: none;
}
.heading.style-2 {
margin-bottom: 30px;
}
.product2-wrapper {
font-family: "Raleway", sans-serif;
margin-bottom: 100px;
position: relative;
}
.product2-wrapper.desc-left .product-desc {
bottom: 0;
margin-right: 15px;
max-width: 215px;
position: absolute;
right: 100%;
text-align: right;
width: 100%;
}
.product2-wrapper.desc-right .product-desc {
left: 100%;
margin-left: 15px;
max-width: 215px;
position: absolute;
top: 0;
width: 100%;
}
.product-thumb {
position: relative;
}
.product-thumb:before,
.product-thumb:after {
background-color: rgba(255, 255, 255, 0.15);
content: "";
height: 0;
left: 0;
position: absolute;
top: 0;
width: 0;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.product-thumb:after {
left: auto;
top: auto;
right: 0;
bottom: 0;
}
.product-thumb:hover .product-hover {
opacity: 1;
}
.product-item:hover .product-thumb:before,
.product-item:hover .product-thumb:after {
height: 100%;
width: 100%;
}
.product-hover {
background-color: rgba(87, 87, 87, 0.4);
height: 100%;
left: 0;
position: absolute;
top: 0;
opacity: 0;
width: 100%;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.product-hover .eye {
color: #fff;
font-size: 48px;
left: 50%;
position: absolute;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.product-desc h3 {
font-weight: 300;
line-height: 30px;
margin: 0 0 25px;
position: relative;
}
.product-desc h3 a {
color: #000;
}
.product-desc h3:before {
background-color: #777;
bottom: -15px;
content: "";
height: 2px;
left: 0;
position: absolute;
width: 40px;
}
.desc-left .product-desc h3:before {
left: auto;
right: 0;
}
.product-item .product-desc {
min-height: 135px;
max-height: 135px;
padding: 12px 0 15px 15px;
}
.product-item .product-desc > a {
color: #666;
display: block;
font-family: "Raleway", sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 1.5px;
line-height: normal;
text-transform: uppercase;
}
.product-item .product-desc > a:hover {
color: #e6ae03;
}
.product-item .product-desc .cat {
color: #9e9c9c;
display: block;
font-size: 14px;
letter-spacing: 2px;
line-height: normal;
margin-bottom: 3px;
text-transform: uppercase;
}
.product-item .product-desc .price {
color: #4e4e4e;
display: block;
font-family: "Dosis", sans-serif;
font-size: 24px;
font-weight: 700;
margin: 42px 0 0;
position: relative;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.product-item.style2 {
overflow: hidden;
}
.product-item.style2 .product-desc {
background-color: rgba(255, 255, 255, 0.8);
bottom: 0;
left: 0;
position: absolute;
width: 100%;
max-height: none;
min-height: auto;
padding: 20px 0 20px 30px;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
.product-item.style2 .product-desc .metas {
margin-top: 28px;
opacity: 1;
position: static;
visibility: visible;
}
.product-item.style2:hover .product-desc {
background-color: rgba(255, 255, 255, 0.8);
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
.product-item.style2:hover .price {
margin-bottom: 0;
top: 0;
}
.product-carousel .product-item.style2 .product-desc {
padding: 20px 0 20px 15px;
}
.product-carousel .owl-nav .owl-prev,
.product-carousel .owl-nav .owl-next {
top: 40%;
}
.product-desc {
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.product-desc .metas {
bottom: 15px;
margin-top: 7px;
overflow: hidden;
position: absolute;
visibility: hidden;
opacity: 0;
width: 100%;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.product-desc .metas a {
font-family: "Raleway", sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
background-color: #313131;
border-right: 1px solid #636363;
color: #fff;
display: block;
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
}
.product-desc .metas a:last-child {
border-right: 0;
}
.product-desc .metas a:hover {
background-color: #e6ae03;
}
.product-desc .metas a:not(:last-child) {
font-size: 12px;
}
.total-wrapper {
border-top: 1px solid #ccc;
font-family: "Roboto", sans-serif;
font-size: 15px;
margin-left: -25px;
margin-right: -25px;
padding: 25px;
}
.total-wrapper + .btn {
font-size: 12px;
height: 40px;
line-height: 40px;
}
.product-item:hover .price {
top: -40px;
margin-bottom: 5px;
}
.product-item:hover .product-desc {
background-color: #f0f0f0;
}
.product-item:hover .product-desc .metas {
visibility: visible;
opacity: 1;
}
.confirmation-wrapper {
background-color: rgba(255, 255, 255, 0.9);
display: none;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1100;
}
.confirmation {
background-color: #fff;
border: 1px solid #eaeaea;
left: 50%;
margin: 0 auto;
max-width: 655px;
padding: 100px 0;
position: absolute;
text-align: center;
top: 50%;
width: 100%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.confirmation .checkmark {
margin-bottom: 75px;
}
.confirmation a {
color: #777777;
display: inline-block;
font-family: "Raleway", sans-serif;
font-size: 16px;
font-weight: 700;
}
.confirmation a:hover {
color: #e6ae03;
}
.confirmation .checkout {
margin-bottom: 40px;
}
.confirmation .mfp-close {
background-color: #1d1d1d;
color: #fff;
font-size: 39px;
height: 60px;
width: 60px;
}
.confirmation .mfp-close:active {
top: 0;
}
.mfp-bg.white-bg.opacity5 {
opacity: 0.5;
}
.img-nav li {
border: 1px solid #eeeeee;
margin-bottom: 10px;
}
.img-nav li:last-child {
margin-bottom: 0;
}
.img-nav li.active {
border-color: #c8c8c8;
}
.img-nav li img {
cursor: pointer;
}
.single-image img {
display: block;
height: auto;
max-width: 100%;
}
.product-description {
font-family: "Raleway", sans-serif;
}
.product-description h2 a {
color: #777;
font-size: 30px;
}
.product-description .short-desc,
.product-description .price,
.product-description .color,
.product-description .sizes,
.product-description .btns {
margin-top: 30px;
}
.product-description .price {
font-family: "Dosis", sans-serif;
font-size: 26px;
font-weight: 400;
}
.product-description .price del {
margin-right: 10px;
opacity: 0.5;
}
.product-description .sizes > h4,
.product-description .color > h4 {
margin-bottom: 15px;
}
.product-description .sizes a {
border: 2px solid #eaeaea;
color: #999;
display: inline-block;
font-family: "Dosis", sans-serif;
font-size: 16px;
font-weight: 400;
height: 40px;
margin-right: 5px;
line-height: 38px;
padding: 0 20px;
text-transform: uppercase;
}
.product-description .sizes a.active {
border-color: #ccc;
}
.product-description .sizes a:last-child {
margin-right: 0;
}
.product-description .color a {
border: 2px solid #eaeaea;
display: inline-block;
padding: 8px 10px 1px;
margin-right: 5px;
}
.product-description .color a:last-child {
margin-right: 0;
}
.product-description .color a span {
background-color: red;
display: inline-block;
height: 20px;
text-indent: -9999em;
width: 30px;
}
.product-description .color a.active {
border-color: #ccc;
}
.product-description .btn {
font-weight: 500;
height: 40px;
line-height: 40px;
}
.product-description .btn:first-child {
margin-right: 10px;
}
.related-products h2 {
margin-bottom: 30px;
}
.related-products .product-item {
margin-bottom: 30px;
}
.control-one .owl-nav > div {
background-color: rgba(0, 0, 0, 0.5);
color: #ffffff;
cursor: pointer;
font-size: 20px;
height: 45px;
line-height: 44px;
opacity: 0;
position: absolute;
text-align: center;
top: 50%;
width: 32px;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.control-one .owl-nav > div:hover {
background-color: rgba(255, 255, 255, 0.5);
color: #333333;
}
.control-one .owl-nav .owl-prev {
left: 0;
}
.control-one .owl-nav .owl-next {
right: 0;
}
.control-one:hover .owl-nav > div {
opacity: 1;
}
.footer-top.dark {
background-color: #222222;
background-image: none;
}
.footer-top.dark:after {
content: none;
}
.footer-item h3 {
color: #fff;
font: 700 21px/26px "Raleway", sans-serif;
margin-bottom: 64px;
position: relative;
text-transform: uppercase;
}
.footer-item h3:before {
background-color: #e6ae03;
bottom: -34px;
content: "";
height: 3px;
left: 0;
position: absolute;
width: 36px;
}
.footer-item li a {
color: #fff;
font: 300 14px/36px "Raleway", sans-serif;
text-transform: uppercase;
}
.footer-item p {
color: #fff;
font: 300 14px/30px "Raleway", sans-serif;
}
.footer-item ul {
list-style: outside none none;
margin: 0;
padding: 0;
}
/*==============================================
shop 2
===============================================*/
/*---------------- Left Sidebar ----------------*/
.shop-widget {
font-family: "Raleway", sans-serif;
border-left: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5;
line-height: 21px;
padding: 0 20px 20px;
margin-bottom: 0;
}
.shop-widget:last-child {
margin-bottom: 0;
border-bottom: 1px solid #e5e5e5;
}
.shop-widget h4 {
background-color: transparent;
border-bottom: 1px solid #e5e5e5;
border-top: 1px solid #e5e5e5;
color: #6d6d6d;
font: 700 18px/70px "Raleway", sans-serif;
height: 70px;
margin: 0 -17px 33px;
padding: 0;
text-align: center;
text-transform: uppercase;
}
.shop-widget ul {
list-style: outside none none;
margin: 0;
padding: 0;
}
.shop-widget li a {
border-bottom: 1px solid #fafafa;
color: #6d6d6d;
display: block;
font: 600 14px/52px "Raleway", sans-serif;
height: 52px;
text-transform: uppercase;
}
.shop-widget li a i {
margin-right: 20px;
}
.shop-widget li:last-child a {
margin-bottom: 0;
}
.category-list li a.sub-cat {
background: transparent url("../img/icons/plus.png") no-repeat scroll right center;
margin-right: 20px;
}
.category-list li a.sub-cat i {
display: none !important;
}
.category-list li ul {
padding-left: 10px;
display: none;
}
.widget-products > div {
border-bottom: 1px solid #e5e5e5;
display: table;
margin: 0 0 20px;
padding: 0 0 20px;
width: 100%;
}
.widget-products > div:last-child {
margin-bottom: 0;
}
.widget-products > div > * {
display: table-cell;
vertical-align: middle;
}
.widget-products .product-thumb {
padding-right: 25px;
}
.widget-products .product-thumb img {
width: auto;
}
.widget-products .product-desc a {
color: #6d6d6d;
display: block;
font: 600 14px/21px "Raleway", sans-serif;
margin: 0 0 15px;
}
.widget-products .product-desc p {
margin-bottom: 10px;
}
.widget-products .product-desc .more {
margin-bottom: 0;
}
.widget-products .product-desc > span {
display: block;
font-family: "Dosis", sans-serif;
font-weight: 600;
line-height: 21px;
}
.widget-products .product-desc > span del {
color: #cccccc;
font-weight: 400;
}
.ospc-post-widget {
padding-left: 15px;
padding-right: 15px;
}
.sale-tag {
color: #fff;
font: 700 22px/24px "Raleway", sans-serif;
position: absolute;
right: 11px;
text-align: right;
top: 20px;
transform: rotate(45deg);
width: 40px;
z-index: 1;
}
.sale-tag:before {
border-color: transparent transparent transparent #e6ae03;
border-style: solid;
border-width: 65px;
content: "";
position: absolute;
right: -24px;
top: 150px;
z-index: -1;
-webkit-transform: translate(20px, -246px) rotate(-90deg);
-moz-transform: translate(20px, -246px) rotate(-90deg);
-ms-transform: translate(20px, -246px) rotate(-90deg);
-o-transform: translate(20px, -246px) rotate(-90deg);
transform: translate(20px, -246px) rotate(-90deg);
}
/*---------------- Products row ----------------*/
.products-right {
float: right;
}
.control-three .owl-dots {
text-align: right;
}
.control-three .owl-dots .owl-dot {
border: 1px solid #ccc;
display: inline-block;
height: 10px;
margin: 0 1.5px;
width: 10px;
}
.control-three .owl-dots .owl-dot.active {
border-color: #444444;
}
.shop-slider2 {
margin-bottom: 40px;
}
.shop-slider2 .item {
background-color: #eeeeee;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 450px;
padding: 50px 0 0;
}
.shop-slider2 .item img {
margin: 0 auto;
max-height: 100%;
max-width: 100%;
width: auto;
}
.filter-wrapper {
border-bottom: 1px solid #e5e5e5;
border-top: 1px solid #e5e5e5;
font-size: 15px;
margin-bottom: 40px;
padding: 15px 0;
}
.filter-wrapper label {
font-weight: 300;
}
.filter-wrapper a {
color: #777777;
}
.filter-wrapper a:hover,
.filter-wrapper a.active {
color: #e6ae03;
}
.product-item {
position: relative;
}
.product-item .product-thumb img {
width: 100%;
}
.products-row {
margin: 0;
}
.products-row [class^="col-"] {
margin-bottom: 40px;
padding-left: 0;
padding-right: 0;
}
/*==============================================
Shop 3
===============================================*/
.cart-enable .top-nav {
margin-right: 80px;
}
.top-nav {
float: right;
}
.top-nav.style2 {
float: none;
}
.top-nav ul {
list-style: outside none none;
margin: 0;
padding: 0;
}
.top-nav ul li {
display: inline-block;
position: relative;
}
.top-nav ul li a {
color: #777777;
display: block;
line-height: 80px;
padding: 0 12px;
}
.top-nav ul li ul {
background-color: #333333;
left: 0;
position: absolute;
top: 100%;
width: 120px;
opacity: 0;
visibility: hidden;
z-index: 20;
-webkit-transition: all 250ms cubic-bezier(0.77, 0, 0.175, 1) 0s;
-moz-transition: all 250ms cubic-bezier(0.77, 0, 0.175, 1) 0s;
-ms-transition: all 250ms cubic-bezier(0.77, 0, 0.175, 1) 0s;
-o-transition: all 250ms cubic-bezier(0.77, 0, 0.175, 1) 0s;
}
.top-nav ul li ul li {
display: block;
}
.top-nav ul li:hover ul {
opacity: 1;
visibility: visible;
}
.top-nav.style2 li a {
color: #fff;
line-height: 40px;
}
.top-nav.style2 li a:hover {
color: #e6ae03;
}
.top-nav.style2 a i + span {
margin-left: 5px;
}
.top-nav.style2 a span + i {
margin-left: 5px;
}
.bottom-nav-wrapper,
.bottom-nav-wrapper .sub-menu {
background-color: #54555e;
}
.bottom-menu .navbar-header {
display: none;
height: 70px;
position: relative;
top: 10px;
transform: none;
}
.bottom-menu .bottom-nav {
padding: 0;
}
.bottom-menu .bottom-nav > ul > li:first-child > a {
padding-left: 0;
}
.active .bottom-menu .navbar-header {
display: block;
}
.bottom-nav .navbar-nav > li > a {
color: #fff;
line-height: 70px;
}
.promo-block {
display: block;
position: relative;
}
.promo-block .promo-content {
background-color: rgba(0, 0, 0, 0.3);
bottom: 0;
color: #fff;
left: 0;
padding: 30px;
position: absolute;
right: 0;
text-align: right;
text-transform: uppercase;
top: 0;
}
.promo-block .promo-content:after {
content: "";
display: inline-block;
height: 100%;
vertical-align: bottom;
}
.promo-block .promo-content span {
display: block;
}
.promo-block .promo-content .promo-inner {
bottom: 30px;
position: absolute;
right: 30px;
width: -webkit-calc(100% - 60px);
width: calc(100% - 60px);
}
.promo-block .top-text {
font-size: 23px;
margin-bottom: 10px;
}
.promo-block .devider {
background-color: #fff;
height: 2px;
margin-bottom: 15px;
}
/*==============================================
Scroll home
===============================================*/
.vertical-nev2 {
height: 100%;
position: fixed;
width: 275px;
z-index: 110;
}
.vertical-nev2 [class^="menu-"] {
height: 100%;
position: absolute;
width: 100%;
left: 0;
}
.vertical-nev2 .right-border {
background-color: #333;
bottom: 0;
height: 100%;
position: absolute;
right: 0;
width: 1px;
z-index: 120;
-webkit-transform: scaleY(0);
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-o-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: center bottom 0;
-moz-transform-origin: center bottom 0;
-ms-transform-origin: center bottom 0;
-o-transform-origin: center bottom 0;
transform-origin: center bottom 0;
-webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
-moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
-ms-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
-o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
}
.vertical-nev2 .logo {
display: block;
}
.vertical-nev2 .logo img {
padding-top: 25px;
margin: 0 auto;
}
.vertical-nev2 .menu-right {
left: 0;
}
.vertical-nev2 .copyright {
bottom: 20px;
left: 20px;
position: absolute;
right: 20px;
}
.vertical-nev2 #menu {
left: 45px;
position: absolute;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
#menu li {
position: relative;
top: 0;
-webkit-transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
-moz-transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
-ms-transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
-o-transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
}
#menu li:nth-child(2) {
-webkit-transition-delay: 0.05s;
-moz-transition-delay: 0.05s;
-ms-transition-delay: 0.05s;
-o-transition-delay: 0.05s;
}
#menu li:nth-child(3) {
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
}
#menu li:nth-child(4) {
-webkit-transition-delay: 0.15s;
-moz-transition-delay: 0.15s;
-ms-transition-delay: 0.15s;
-o-transition-delay: 0.15s;
}
#menu li:nth-child(5) {
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
}
#menu li:nth-child(6) {
-webkit-transition-delay: 0.25s;
-moz-transition-delay: 0.25s;
-ms-transition-delay: 0.25s;
-o-transition-delay: 0.25s;
}
#menu li a {
color: #333333;
display: block;
font-family: "bebas_neue_r", sans-serif;
font-size: 16px;
padding-left: 45px;
position: relative;
}
#menu li a:hover .line2 {
-webkit-transform: scaleX(1) translateX(-100%);
-moz-transform: scaleX(1) translateX(-100%);
-ms-transform: scaleX(1) translateX(-100%);
-o-transform: scaleX(1) translateX(-100%);
transform: scaleX(1) translateX(-100%);
}
#menu li .line,
#menu li .line2 {
background-color: #333333;
height: 1px;
left: 0;
position: absolute;
top: 50%;
width: 25px;
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
-o-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: right center 0;
-moz-transform-origin: right center 0;
-ms-transform-origin: right center 0;
-o-transform-origin: right center 0;
transform-origin: right center 0;
-webkit-transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
-moz-transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
-ms-transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
-o-transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
}
#menu li .line2 {
width: 45px;
-webkit-transform: scaleX(0) translateX(-100%);
-moz-transform: scaleX(0) translateX(-100%);
-ms-transform: scaleX(0) translateX(-100%);
-o-transform: scaleX(0) translateX(-100%);
transform: scaleX(0) translateX(-100%);
-webkit-transform-origin: left center 0;
-moz-transform-origin: left center 0;
-ms-transform-origin: left center 0;
-o-transform-origin: left center 0;
transform-origin: left center 0;
}
#menu li .text {
display: inline-block;
opacity: 0;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
-moz-transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
-ms-transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
-o-transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
}
#menu li:nth-child(2) .text {
-webkit-transition-delay: 0.05s;
-moz-transition-delay: 0.05s;
-ms-transition-delay: 0.05s;
-o-transition-delay: 0.05s;
}
#menu li:nth-child(3) .text {
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
}
#menu li:nth-child(4) .text {
-webkit-transition-delay: 0.15s;
-moz-transition-delay: 0.15s;
-ms-transition-delay: 0.15s;
-o-transition-delay: 0.15s;
}
#menu li:nth-child(5) .text {
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
}
#menu li:nth-child(6) .text {
-webkit-transition-delay: 0.25s;
-moz-transition-delay: 0.25s;
-ms-transition-delay: 0.25s;
-o-transition-delay: 0.25s;
}
#menu li.active .line {
left: -45px;
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
-o-transform: scaleX(1);
transform: scaleX(1);
}
#menu li.active .line2 {
opacity: 0;
}
#menu li.active .text {
opacity: 0;
}
#menu:hover li .text {
opacity: 1;
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}
#menu:hover li.active .text {
opacity: 0;
}
.pp-viewing-home .vertical-nev2 .right-border {
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
transform: scaleY(1);
}
.pp-viewing-home .vertical-nev2 .menu-right {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
.pp-viewing-home #menu {
left: 0;
}
.pp-viewing-home #menu li .line {
left: -13px;
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-o-transform: scaleX(0);
transform: scaleX(0);
}
.pp-viewing-home #menu li .line2 {
opacity: 0;
}
.pp-viewing-home #menu li .text {
opacity: 1;
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}
.pp-viewing-home #menu li:hover .line,
.pp-viewing-home #menu li.active .line {
left: -13px;
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
-o-transform: scaleX(1);
transform: scaleX(1);
}
.pp-viewing-home #menu li a {
font-size: 25px;
line-height: 40px;
}
.pp-viewing-home #menu:hover li .text {
opacity: 1;
}
.pp-viewing-home .pp-section .line {
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-o-transform: scaleX(0);
transform: scaleX(0);
}
.pp-viewing-about #menu li {
top: 39px;
}
.pp-viewing-service #menu li {
top: 13px;
}
.pp-viewing-portfolio #menu li {
top: -13px;
}
.pp-viewing-blog #menu li {
top: -39px;
}
.pp-viewing-contact #menu li {
top: -65px;
}
.pp-section {
background-color: #fff;
padding: 0;
}
.pp-section .line {
background-color: #333333;
height: 1px;
left: 45px;
position: absolute;
top: 50%;
width: -webkit-calc(100% - 205px);
width: calc(100% - 205px);
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-o-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left center 0;
-moz-transform-origin: left center 0;
-ms-transform-origin: left center 0;
-o-transform-origin: left center 0;
transform-origin: left center 0;
-webkit-transition: all 0.9s cubic-bezier(0.165, 0.84, 0.44, 1) 1s;
-moz-transition: all 0.9s cubic-bezier(0.165, 0.84, 0.44, 1) 1s;
-ms-transition: all 0.9s cubic-bezier(0.165, 0.84, 0.44, 1) 1s;
-o-transition: all 0.9s cubic-bezier(0.165, 0.84, 0.44, 1) 1s;
}
.pp-section.active .line {
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
-o-transform: scaleX(1);
transform: scaleX(1);
}
#video-con {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
/*==============================================
vertical-nav3
===============================================*/
.vertical-nav3 {
background-color: #fff;
border-left: 1px solid #e5e5e5;
height: 100%;
position: fixed;
right: 0;
top: 0;
width: 550px;
z-index: 130;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
-moz-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
-ms-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
-o-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
}
.vertical-nav3 ul {
left: 90px;
position: absolute;
right: 100px;
text-align: left;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.vertical-nav3 li {
margin: 22.5px 0;
overflow: hidden;
}
.vertical-nav3 li a {
color: #333333;
display: block;
font-family: "bebas_neue_r", sans-serif;
font-size: 55px;
font-weight: 400;
line-height: 50px;
padding-left: 45px;
position: relative;
}
.vertical-nav3 li .text {
display: inline-block;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.35s;
-moz-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.35s;
-ms-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.35s;
-o-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.35s;
}
.vertical-nav3 li:nth-child(2) .text {
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-ms-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
}
.vertical-nav3 li:nth-child(3) .text {
-webkit-transition-delay: 0.45s;
-moz-transition-delay: 0.45s;
-ms-transition-delay: 0.45s;
-o-transition-delay: 0.45s;
}
.vertical-nav3 li:nth-child(4) .text {
-webkit-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
}
.vertical-nav3 li:nth-child(5) .text {
-webkit-transition-delay: 0.55s;
-moz-transition-delay: 0.55s;
-ms-transition-delay: 0.55s;
-o-transition-delay: 0.55s;
}
.vertical-nav3 li:nth-child(6) .text {
-webkit-transition-delay: 0.6s;
-moz-transition-delay: 0.6s;
-ms-transition-delay: 0.6s;
-o-transition-delay: 0.6s;
}
.vertical-nav3 li .border {
background-color: red;
opacity: 0.4;
display: block;
height: 1px;
position: absolute;
top: 50%;
left: 0;
width: 100%;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
-moz-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
-ms-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
-o-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
}
.vertical-nav3 li a:hover {
opacity: .4;
}
.vertical-nav3 li a:hover .border {
opacity: 1;
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
-webkit-transition: all 0s ease-in-out 0s;
-moz-transition: all 0s ease-in-out 0s;
-o-transition: all 0s ease-in-out 0s;
transition: all 0s ease-in-out 0s;
animation: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0s normal none 1 running linkAnim;
}
.vertical-nav3.active {
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}
.vertical-nav3.active li .text {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
@-webkit-keyframes linkAnim {
0% {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}
}
@-moz-keyframes linkAnim {
0% {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}
}
@keyframes linkAnim {
0% {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}
}
.sec-details {
background-color: #fff;
height: 100%;
padding: 110px 120px 60px 80px;
position: fixed;
right: 0;
text-align: left;
top: 0;
width: 550px;
z-index: 120;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
-moz-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
-ms-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
-o-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
}
.sec-details.active {
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}
.sec-title {
font-family: "bebas_neue_r", sans-serif;
margin-bottom: 25px;
padding-bottom: 15px;
position: relative;
}
.sec-title:before {
background-color: #333333;
bottom: -1px;
content: "";
height: 3px;
left: 0;
position: absolute;
width: 25px;
}
/*==============================================
Cart Page
===============================================*/
.checkout-wrapper {
font-family: "Raleway", sans-serif;
}
.cart-nav ul {
overflow: hidden;
}
.cart-nav li {
float: left;
width: 25%;
}
.cart-nav li:not(:last-child) a {
border-right: 0;
}
.cart-nav li a {
border: 1px solid #eeeeee;
color: #777;
display: block;
font-weight: 500;
height: 48px;
line-height: 48px;
text-align: center;
text-transform: uppercase;
}
.cart-nav li a:hover,
.cart-nav li a.active {
background-color: #e6ae03;
color: #ffffff;
}
.cartinfo-wrapper,
.payment-informations {
margin: 100px 0 0;
}
.cartinfo-wrapper > h3,
.payment-informations > h3 {
margin-bottom: 45px;
position: relative;
}
.cartinfo-wrapper > h3:before,
.payment-informations > h3:before {
background-color: #e6ae03;
bottom: -8px;
content: "";
height: 2px;
left: 0;
position: absolute;
width: 50px;
}
.shop_table {
font-family: "Raleway", sans-serif;
border-color: #eeeeee;
}
.shop_table .product-remove {
display: none;
}
.shop_table thead tr th {
border-bottom: 0 none;
}
.shop_table thead tr th,
.shop_table tbody tr td {
border-color: #eeeeee;
text-align: center;
vertical-align: middle;
}
.shop_table tbody tr .product-thumbnail {
position: relative;
}
.shop_table tbody tr .product-thumbnail .remove-product {
background-color: #eeeeee;
color: #777777;
display: block;
height: 30px;
line-height: 31px;
position: absolute;
right: 10px;
top: 10px;
width: 30px;
opacity: 0;
}
.shop_table tbody tr:hover .product-thumbnail .remove-product {
opacity: 1;
}
.shop_table tbody .product-name {
text-align: center;
vertical-align: middle;
}
.shop_table tbody .product-name a {
display: inline-block;
color: #777777;
font-weight: 300;
margin-bottom: 11px;
}
.shop_table tbody .product-name span {
display: block;
}
.shipping-btn {
margin: 50px 0 100px;
overflow: hidden;
}
.shipping-btn .update,
.shipping-btn .clear {
float: right;
margin-left: 15px;
}
.shipping-btn .update {
margin-left: 20px;
}
.btn-solid-dark {
background-color: #000;
border: 0 none;
color: #fff;
font-family: "Raleway", sans-serif;
font-weight: 500;
height: 50px;
line-height: 50px;
padding: 0 30px;
text-transform: uppercase;
}
.btn-solid-dark:hover,
.btn-solid-dark:focus {
background-color: #e6ae03;
color: #ffffff;
}
.btn-wide {
padding-left: 74px;
padding-right: 74px;
}
.btn-medium {
padding: 0 40px;
height: 40px;
line-height: 40px;
}
.shippingbox h3 {
color: #444444;
font-weight: 500;
text-align: center;
}
.shippingbox p {
color: #999;
line-height: 21px;
margin: 10px 0 0;
text-align: center;
}
.shippingbox .shippingboxinner {
background-color: #e7e7e7;
margin-top: 23px;
padding: 25px;
}
.shippingbox .selectize-control .selectize-input {
background-color: #fff;
background-image: none;
border: 0 none;
box-shadow: none;
color: #cccccc;
font-size: 12px;
height: 30px;
position: relative;
line-height: 30px;
padding: 0 0 0 20px;
}
.shippingbox .selectize-control .selectize-input:after {
border: 0 none;
content: "\f107";
font-family: FontAwesome;
font-size: 14px;
height: auto;
right: 22px;
top: 4px;
}
.shippingbox .selectize-control .selectize-input.dropdown-active:after {
content: "\f106";
}
.shippingbox input:not([type="submit"]) {
background-color: #fff;
border: 0 none;
border-radius: 4px;
height: 30px;
padding: 0 0 0 20px;
width: 100%;
}
.shippingbox input[type="submit"] {
height: 40px;
line-height: 42px;
margin-top: 25px;
}
.shippingbox .shippingboxinner [class^="pull-"] span {
display: block;
}
.shippingbox .shippingboxinner .grand-total {
border-top: 1px solid #999999;
font-weight: 700;
margin-top: 8px;
padding-top: 7px;
}
.shippingbox.box2 {
margin-top: 21px;
}
.shippingbox.box3 {
margin-top: 101px;
}
.shippingbox .selectize-control .selectize-input {
background-color: #fff !important;
}
.choose-shipping .input-wrapper label {
margin: 0;
}
.selectize-dropdown {
border: 0 none;
box-shadow: none;
margin-top: 0;
}
.cartinfo-wrapper {
display: none;
}
.cartinfo-wrapper.active {
display: block;
}
.cartinfo-wrapper .input-wrapper {
margin-top: 10px;
}
.cartinfo-wrapper .input-wrapper label {
font-weight: 300;
margin: 0 0 2px;
}
.cartinfo-wrapper .input-wrapper label span {
color: #ff0000;
}
.cartinfo-wrapper .input {
background-color: #eeeeee;
border: 0 none;
border-radius: 4px;
height: 40px;
padding: 0 0 0 20px;
width: 100%;
}
.cartinfo-wrapper .btn[type="submit"] {
margin-top: 20px;
}
.cartinfo-wrapper .selectize-control {
height: 40px;
}
.cartinfo-wrapper .selectize-control .selectize-input {
background-color: #eeeeee;
background-image: none;
box-shadow: none;
border: 0 none;
height: 40px;
line-height: 40px;
padding: 0 0 0 20px;
}
.shipping-info {
display: none;
margin-top: 20px;
}
.loginbox h3 {
font-weight: 700;
margin-bottom: 7px;
}
.loginbox form {
background-color: #fafafa;
padding: 50px;
}
.loginbox form .input-wrapper {
margin-top: 15px;
clear: both;
}
.loginbox form .input-wrapper:first-child {
margin-top: 0;
}
.loginbox form label {
margin-bottom: 10px;
}
.loginbox form input:not([type="submit"]) {
background-color: #fff;
}
.loginbox form .forgot-pass {
color: #999;
float: right;
position: relative;
top: -35px;
}
.loginbox .btn[type="submit"] {
height: 40px;
line-height: 40px;
padding: 0 37px;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.loginbox .registerform .input-wrapper {
margin-top: 0;
}
.loginbox .registerform p {
margin: 35px 0 2px;
}
.loginbox .registerform ul {
margin-bottom: 36px;
}
.loginbox .registerform li {
color: #cccccc;
padding-left: 15px;
}
.loginbox .registerform li i {
margin-right: 3px;
}
.custom-radio {
left: 0;
opacity: 0;
position: absolute;
top: 0;
visibility: hidden;
}
.custom-radio + label {
padding-left: 19px;
position: relative;
}
.custom-radio + label:before {
color: #999999;
content: "\f10c";
font-family: fontawesome;
left: 0;
position: absolute;
top: 0;
}
.custom-radio:checked + label:before {
content: "\f192";
}
.custom-check {
left: 0;
opacity: 0;
position: absolute;
top: 0;
visibility: hidden;
}
.custom-check + label {
padding-left: 19px;
position: relative;
}
.custom-check + label:before {
content: "\f096";
font-family: fontawesome;
left: 0;
position: absolute;
top: 0;
}
.custom-check:checked + label:before {
content: "\f14a";
}
.shipping-methods,
.payment-methods {
overflow: hidden;
}
.shipping-methods .input-wrapper a,
.payment-methods .input-wrapper a {
margin-top: 20px;
}
.shipping-methods .input-wrapper input[type="submit"],
.payment-methods .input-wrapper input[type="submit"] {
float: right;
}
.payment-methods .methodbox-label label {
font-size: 24px;
font-weight: 700;
}
.method-box {
float: left;
text-align: center;
width: 20%;
}
.method-box:first-child .methodbox-label {
border-left: 1px solid #eeeeee;
}
.methodbox-label {
border: 1px solid #eeeeee;
border-left: 0;
height: 150px;
margin-bottom: 8px;
position: relative;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.methodbox-label.active {
background-color: #e6ae03;
border-color: #e6ae03;
color: #ffffff;
}
.methodbox-label label {
cursor: pointer;
font-size: 18px;
font-weight: 500;
left: 0;
margin: 0;
position: absolute;
top: 50%;
padding: 0 20px;
width: 100%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.methodbox-label label span {
display: block;
}
.methodbox-input input[type="radio"] {
position: absolute;
left: 0;
top: 0;
opacity: 0;
visibility: hidden;
}
.methodbox-input input[type="radio"]:checked + span:before {
content: "\f192";
}
.methodbox-input span {
display: inline-block;
height: 12px;
position: relative;
width: 12px;
}
.methodbox-input span:before {
content: "\f10c";
font-family: fontawesome;
}
.payment-infobox h3 {
font-weight: 700;
margin-bottom: 45px;
position: relative;
}
.payment-infobox h3:before {
background-color: #e6ae03;
bottom: -8px;
content: "";
height: 2px;
left: 0;
position: absolute;
width: 50px;
}
.customerinfo-box:not(:last-child) {
margin-bottom: 50px;
}
.customerinfo-box h3 {
font-weight: 700;
margin-bottom: 15px;
text-transform: uppercase;
}
.customerinfo-box > div {
font-family: "Roboto", sans-serif;
}
.receipt_table {
margin: 0;
}
.receipt_table thead tr th {
font-weight: 400;
padding: 14px 10px;
}
.receipt_table tbody tr .product-name {
padding: 50px 0;
}
.grand-total:not(.clearfix) {
border: 1px solid #eeeeee;
border-top: 0;
padding: 25px;
}
.grand-total:not(.clearfix) span {
display: block;
}
.success-message {
background-color: #e6ae03;
color: #fff;
margin-bottom: 100px;
padding: 24px 0;
text-align: center;
}
.success-message h2 {
font-size: 36px;
font-weight: 300;
margin-bottom: 4px;
}
.success-message p {
margin: 0;
font-size: 18px;
}
.customerinfo-wrapper {
margin-top: 80px;
}
.customerinfo-wrapper .text-right {
margin-top: 10px;
}
.customerinfo-wrapper .text-right a:first-child {
margin-right: 10px;
}
.btn-solid-dark i {
margin-left: -10px;
padding-right: 10px;
}
/*==============================================
Elements
===============================================*/
/*==============================================
faq
===============================================*/
.faq-filter li {
float: left;
}
.faq-filter li a {
border: 1px solid #e5e5e5;
color: #777;
display: block;
line-height: normal;
margin: 0 5px 0 0;
padding: 10px 14px;
text-transform: capitalize;
}
.faq-filter li:last-child a {
margin-right: 0;
}
.faq-filter li.active a {
border-color: #e6ae03;
color: #e6ae03;
}
/*==============================================
Testimonials
===============================================*/
.testimonial3 .tablecell {
vertical-align: top;
}
.testimonial3 .tm-item {
border: 0;
margin: 0;
padding: 0;
text-align: left;
width: -webkit-calc(100% - 30px);
width: calc(100% - 30px);
}
.testimonial3 .tm-avatar {
float: left;
padding-right: 30px;
}
.testimonial3 .tm-avatar img {
max-width: 130px;
}
.testimonial3 .tm-text {
padding-right: 30px;
}
.testimonial3 .tm-text p {
color: #fff;
margin-bottom: 10px;
line-height: 24px;
margin-top: -4px;
}
.testimonial3 .tm-text h4 {
color: #fff;
font-size: 16px;
font-weight: 400;
margin-top: 10px;
}
.testimonial3 .tm-text a {
display: inline-block;
font-size: 13px;
line-height: normal;
}
.testimonial3 .owl-prev,
.testimonial3 .owl-next {
border: 1px solid #fff;
color: #fff;
height: -webkit-calc(50% - 2px);
height: calc(50% - 2px);
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 30px;
}
.testimonial3 .owl-prev i,
.testimonial3 .owl-next i {
font-size: 20px;
left: 50%;
position: absolute;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.testimonial3 .owl-next {
bottom: 0;
top: auto;
}
/*==============================================
testimonial4
===============================================*/
.tm-item4 .tablecell {
float: none;
padding: 0;
}
.tm-item4 .avatar {
border-left: 6px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
border-right: 6px solid rgba(0, 0, 0, 0.1);
display: inline-block;
position: relative;
z-index: 2;
}
.tm-item4 .avatar img {
background-color: #eeeeee;
margin: 0 auto;
position: relative;
border-radius: 50%;
padding: 10px;
width: auto;
z-index: 1;
}
.tm-item4 .control {
left: 0;
position: absolute;
right: 0;
top: 50%;
z-index: 1;
}
.tm-item4 .control span {
background-color: #19232e;
border-radius: 50%;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 36px;
height: 100px;
left: 0;
line-height: 100px;
margin: -50px 31px 0;
padding: 0 20px;
position: absolute;
text-align: left;
top: 50%;
width: 100px;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.tm-item4 .control span:hover {
background-color: #e6ae03;
}
.tm-item4 .control .next {
left: auto;
right: 0;
text-align: right;
}
.tm-item4 h3 {
color: #19232e;
}
.tm-item4 h4 b {
display: inline-block;
margin: 4px 0 6px;
}
.tm-item4 .quote p {
font-weight: 400;
line-height: 21px;
margin: 4px 0;
}
.tm-item4 .quote .ratings {
color: #19232e;
}
.tm-item4 .quote .ratings i {
margin-right: 8px;
}
.tm-item4 .quote .ratings i:last-child {
margin-right: 0;
}
.testimonial4 .owl-nav {
left: 0;
position: absolute;
right: 0;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
/*==============================================
testimonial5
===============================================*/
.testimonial5 .text {
background-color: #fff;
border: 1px solid #ccc;
padding: 50px 100px 115px;
}
.testimonial5 .text > i {
color: #19232e;
font-size: 60px;
margin-bottom: 30px;
}
.testimonial5 .text p {
font-family: "Roboto", sans-serif;
font-weight: 400;
font-size: 16px;
}
.testimonial5 .avatar {
border-radius: 50%;
border: 1px solid #ccc;
bottom: 0;
left: 50%;
position: absolute;
width: 170px;
-webkit-transform: translate(-50%, 50%);
-moz-transform: translate(-50%, 50%);
-ms-transform: translate(-50%, 50%);
-o-transform: translate(-50%, 50%);
transform: translate(-50%, 50%);
}
.testimonial5 .owl-nav span {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 50%;
color: #999;
cursor: pointer;
font-size: 18px;
height: 50px;
line-height: 50px;
position: absolute;
text-align: center;
top: 50%;
width: 50px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.testimonial5 .owl-nav .owl-prev {
left: -80px;
}
.testimonial5 .owl-nav .owl-next {
right: -80px;
}
.testimonial5 .meta {
margin-top: 105px;
}
.testimonial5 .meta span {
color: #999;
display: inline-block;
font-size: 16px;
font-weight: 300;
margin-top: 7px;
}
/*==============================================
testimonial6
===============================================*/
.tm-item6 .avatar {
display: inline-block;
}
.tm-item6 .avatar img {
border: 1px solid #fff;
max-width: 180px;
padding: 8px;
}
.tm-item6 .meta h5 {
color: #e6ae03;
}
.tm-item6 .meta a {
color: #fff;
}
.tm-item6 .meta a:hover {
color: #e6ae03;
}
.tm-item6 .text {
background: transparent url("../img/icons/tm-shape.svg") no-repeat scroll center top / cover;
border-bottom: 1px solid #fff;
border-radius: 4px;
margin: 22px auto 0;
padding: 63px 4% 34px;
position: relative;
width: 80%;
}
/*==============================================
Page Title
===============================================*/
.sprw-page-title {
color: #fff;
font-family: "Raleway", sans-serif;
padding-bottom: 83px;
padding-top: 188px;
}
.sprw-page-title h2 {
font-size: 72px;
font-weight: 100;
}
.sprw-page-title .overlay {
background-color: rgba(34, 34, 34, 0.8);
z-index: -1;
}
/*==============================================
Breadcrumbs
===============================================*/
.sprw-bc {
padding: 30px 0;
}
.bc-parallax {
padding: 100px 0;
position: relative;
z-index: 0;
color: #fff;
}
.bc-parallax .bc-nav li {
font-weight: 400;
}
.bc-parallax .bc-nav li a {
color: #fff;
}
.bc-title h2 {
font-size: 30px;
font-weight: 300;
}
.bc-nav li {
display: inline-block;
line-height: normal;
}
.bc-nav li:after {
content: "/";
display: inline-block;
padding: 0 7px 0 10px;
}
.bc-nav li:last-child:after {
content: none;
}
.bc-nav li.active {
color: #e6ae03;
}
.bc-nav li a {
color: #777777;
}
.bc-nav li a:hover {
color: #e6ae03;
}
/* tab elements */
.tab-default {
background-color: #f5f5f5;
padding: 50px 70px 70px;
position: relative;
margin-top: 29px;
}
.tab-default .tab-navs {
left: 80px;
position: absolute;
top: -30px;
}
.tab-default .tab-pane {
font-size: 18px;
line-height: 30px;
}
.tab-default .tab-pane .continue {
color: #777777;
display: inline-block;
font-size: 14px;
}
.tab-default .tab-pane .continue:hover {
color: #e6ae03;
}
.tab-navs li {
float: left;
}
.tab-navs li a {
border-bottom: 1px solid transparent;
color: #666;
display: inline-block;
font-size: 18px;
font-weight: 600;
padding: 12px 35px 11px;
z-index: 12;
}
.tab-navs li:before {
border-radius: 50px;
bottom: 5px;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.5);
content: "";
height: 10px;
left: 0;
opacity: 0;
position: absolute;
width: 100%;
z-index: -1;
}
.tab-navs li.active:before {
opacity: 1;
-webkit-transition: all 0.4s ease-in-out 0.4s;
-moz-transition: all 0.4s ease-in-out 0.4s;
-o-transition: all 0.4s ease-in-out 0.4s;
transition: all 0.4s ease-in-out 0.4s;
}
.tab-navs li.active {
position: relative;
z-index: 1;
}
.tab-navs li.active a {
background-color: #f5f5f5;
border-bottom-color: #e6ae03;
}
.tab-navs li:not(.active) a {
margin-top: -11px;
}
.tab-half {
padding: 30px 30px 20px;
}
.tab-half .tab-navs {
left: 0;
}
.tab-half li a {
font-size: 14px;
font-weight: 600;
padding: 12px 25px 11px;
}
.tab-half .tab-pane {
font-size: 16px;
}
/*--------------------------------------
Tab 2
---------------------------------------*/
.tab-flat {
font-family: "Raleway", sans-serif;
border: 1px solid #e5e5e5;
font-weight: 400;
}
.tab-flat.dark {
background-color: #333;
color: #ddd;
}
.tab-flat.dark ul {
border-bottom-color: #222;
}
.tab-flat.dark ul li a {
border-right-color: #222;
}
.tab-flat.dark ul li.active a {
box-shadow: none;
}
.tab-flat.dark ul li.active a:after {
background-color: #333;
}
.tab-flat ul {
border-bottom: 1px solid #e5e5e5;
}
.tab-flat ul li {
float: left;
}
.tab-flat ul li a {
display: block;
height: 50px;
line-height: 50px;
color: #777777;
padding: 0 25px;
border-right: 1px solid #e5e5e5;
font-weight: 700;
position: relative;
}
.tab-flat ul li:last-child a {
border-right: 0;
}
.tab-flat ul li.active a {
color: #e6ae03;
box-shadow: 2px 0px 3px 0px rgba(0, 0, 0, 0.2);
}
.tab-flat ul li.active a:before {
background-color: #e6ae03;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 4px;
content: "";
}
.tab-flat ul li.active a:after {
background-color: #fff;
width: 100%;
height: 3px;
content: "";
position: absolute;
left: 0;
bottom: -1px;
}
.tab-flat .tab-pane {
padding: 20px;
}
.tab-flat.type-two {
border: 0;
}
.tab-flat.type-two ul {
border-bottom: 0 none;
}
.tab-flat.type-two ul li.active a {
background-color: #fff;
border-color: #e5e5e5;
color: #333333;
box-shadow: none;
padding: 7px 35px;
margin-top: -4px;
}
.tab-flat.type-two ul li.active a:before {
content: none;
}
.tab-flat.type-two ul li:first-child a {
border-left: 1px solid #e5e5e5;
}
.tab-flat.type-two ul li:last-child a {
border-right: 1px solid #e5e5e5;
}
.tab-flat.type-two ul li a {
background-color: #a1a1a1;
border-color: transparent;
border-top: 1px solid;
color: #fff;
height: auto;
line-height: inherit;
padding: 5px 35px;
border-left: 1px solid;
}
.tab-flat.type-two .tab-content {
border: 1px solid #e5e5e5;
}
.tab-flat.type-three {
border: 0 none;
}
.tab-flat.type-three ul {
border-bottom: 0 none;
float: left;
margin-right: 0;
position: relative;
width: 20%;
z-index: 2;
}
.tab-flat.type-three ul li {
float: none;
display: block;
}
.tab-flat.type-three ul li.active a {
background-color: #fff;
border-left: 5px solid #e6ae03;
border-right: 0 none;
box-shadow: none;
}
.tab-flat.type-three ul li.active a:before,
.tab-flat.type-three ul li.active a:after {
content: none;
}
.tab-flat.type-three ul li a {
background-color: #f9fafb;
border: 1px solid #e5e5e5;
font-weight: 400;
border-bottom: 0;
height: 48px;
line-height: 48px;
padding: 0 20px;
}
.tab-flat.type-three ul li a i {
margin-right: 10px;
}
.tab-flat.type-three ul li:last-child a {
border-bottom: 1px solid #e5e5e5;
}
.tab-flat.type-three .tab-content {
border: 1px solid #e5e5e5;
float: right;
left: -1px;
padding: 20px;
position: relative;
width: 80%;
z-index: 0;
}
.tab-flat.type-three .tab-pane {
padding: 0;
}
/*------- Progress bars --------*/
.progress {
background-color: #eeeeee;
box-shadow: none;
height: 50px;
margin-bottom: 30px;
overflow: visible;
}
.progress:last-child {
margin-bottom: 0;
}
.progress.style2 {
border-radius: 40px;
height: 12px;
margin-bottom: 60px;
}
.progress.style2 .progress-bar {
border-radius: 40px;
height: 10px;
margin-top: 1px;
margin-left: 1px;
}
.progress.style2 .progress-bar span {
color: #e6ae03;
top: 14px;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
.progress.style2 .progress-bar .progress-value {
color: #1e1e1e;
font-family: "Roboto", sans-serif;
font-weight: 400;
}
.progress.style3 {
background-color: transparent;
border: 1px solid #fff;
border-radius: 5px;
height: 20px;
margin-top: 60px;
}
.progress.style3:first-child {
margin-top: 0;
}
.progress.style3 .progress-bar {
border-radius: 5px;
height: 12px;
margin-left: 4px;
margin-top: 3px;
}
.progress.style3 .progress-bar span {
color: #fff;
font-size: 14px;
font-weight: 500;
left: 0;
text-transform: none;
top: -28px;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
.progress.style3 .progress-bar .progress-value {
font-family: "Roboto", sans-serif;
left: auto;
right: 0;
}
.progress.style4 {
height: 2px;
margin: 60px 0 0;
}
.progress.style4 .progress-bar {
background-color: #333333;
}
.progress.style4 .progress-bar span {
color: #333333;
font-family: dosis;
font-size: 14px;
font-weight: 600;
left: 0;
letter-spacing: 1px;
top: -14px;
}
.progress.style4 .progress-bar .progress-value {
left: auto;
right: 0;
}
.progress.semi-tp {
background-color: rgba(250, 250, 250, 0.3);
}
.progress-bar {
background-color: #e6ae03;
box-shadow: none;
position: relative;
text-align: inherit;
border-radius: 4px;
}
.progress-bar span {
font-size: 18px;
font-weight: 700;
left: 20px;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.progress-bar .progress-value {
left: auto;
right: 20px;
}
.progress-default {
border: 1px solid #e5e5e5;
padding: 96px 40px;
}
/*--------------------------------------
Accordion
---------------------------------------*/
.progress-default {
border: 1px solid #e5e5e5;
padding: 96px 40px;
}
.panel-default {
border: 0 none;
box-shadow: none;
}
.panel-default .panel-heading {
background-color: transparent;
border: 1px solid #e5e5e5;
border-radius: 0;
padding: 13px 15px 14px 60px;
}
.panel-default .panel-heading.active {
border-bottom: 0 none;
border-color: #999999;
}
.panel-default .panel-heading.active h4 {
color: #e6ae03;
}
.panel-default .panel-heading.active h4:before {
background-color: #e6ae03;
}
.panel-default .panel-heading.active + .panel-collapse {
border: 1px solid #999999;
border-top: 0;
}
.panel-default .panel-heading.active i:before {
content: "\f106";
}
.panel-default .panel-heading i {
font-size: 24px;
left: -41px;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.panel-default .panel-body {
border-top: 0 !important;
padding-top: 33px;
}
.panel-default .panel-body p:last-child {
margin-bottom: 0;
}
.panel-title {
color: #666;
font-size: 16px;
font-weight: 300;
position: relative;
}
.panel-title:before {
background-color: transparent;
bottom: -14px;
content: "";
height: 1px;
left: 0;
position: absolute;
width: 50px;
}
.panel-title a {
display: block;
}
/*--------------------------------------
Accordion 2
---------------------------------------*/
.type-two .panel-heading,
.type-three .panel-heading {
background-color: transparent;
border-bottom-width: 0;
border-color: #e5e5e5 !important;
padding: 0;
}
.type-two .panel-heading.active + .panel-collapse,
.type-three .panel-heading.active + .panel-collapse {
border-color: #e5e5e5;
}
.type-two .panel-heading.active i:before,
.type-three .panel-heading.active i:before {
content: 'K';
}
.type-two .panel-heading i,
.type-three .panel-heading i {
border-left: 1px solid #e5e5e5;
float: right;
font-size: 16px;
height: 40px;
line-height: 40px;
position: static;
text-align: center;
width: 40px;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
.type-two .panel-title,
.type-three .panel-title {
border-bottom: 1px solid #e5e5e5;
color: #777;
font-size: 16px;
font-weight: 300;
height: 40px;
line-height: 40px;
}
.type-two .panel-title:before,
.type-three .panel-title:before {
content: none;
}
.type-two .panel-title a,
.type-three .panel-title a {
display: block;
padding-left: 15px;
}
.type-two .panel-body,
.type-three .panel-body {
padding: 20px;
}
.type-two.light ul li a,
.type-three.light ul li a {
background-color: #fff;
border-color: #e5e5e5;
color: #777777;
margin-right: -1px;
}
.type-two.light ul li.active a,
.type-three.light ul li.active a {
color: #e6ae03;
}
/*--------------------------------------
Accordion 3
---------------------------------------*/
.theme-default .nivoSlider {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
box-shadow: none;
margin-bottom: 0;
}
.panel-group .type-three + .type-three {
margin-top: 0;
}
.type-three .panel-heading {
border: 0 none;
}
.type-three .panel-heading + .panel-collapse {
border: 0 none;
}
.type-three .panel-heading.active .panel-title {
border-bottom: 0;
}
.type-three .panel-heading.active .panel-title i {
background-color: #e6ae03;
}
.type-three .panel-heading.active + .panel-collapse {
border-bottom: 1px solid #e5e5e5;
border-left: 0 none;
border-right: 0 none;
padding-bottom: 15px;
}
.type-three .panel-title {
height: 50px;
line-height: 50px;
}
.type-three .panel-title a {
padding-left: 0;
}
.type-three .panel-title i {
background-color: #333;
border-left: 0 none;
color: #fff;
float: left;
height: 30px;
line-height: 30px;
margin: 10px 15px 0 0;
width: 30px;
}
.type-three .panel-body {
padding: 0;
}
/*--------------------------------------
Tables
---------------------------------------*/
.table-bordered > thead > tr > th {
border-bottom: 0 none;
}
.dark-head > thead > tr > th {
background-color: #333;
border: 0 none;
color: #fff;
}
.dark-head > thead > tr > th:nth-child(2n) {
background-color: #666;
}
/*--------------------------------------
Pie Charts
---------------------------------------*/
.chart-item {
text-align: center;
}
.chart-item .percent {
display: block;
height: 170px;
line-height: 170px;
margin: 0 auto;
text-align: center;
width: 160px;
font-size: 30px;
}
.chart-item .percent:after {
content: "%";
}
.chart-item canvas {
left: 50%;
position: absolute;
top: 0;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.chart-item h4 {
color: #333333;
font-weight: 500;
margin-top: 25px;
}
.chart-item p {
font-size: 15px;
margin: 15px 0 0;
}
.chart-item.white h4 {
color: #fff;
}
.chart-two .percent {
font-size: 18px;
height: 200px;
line-height: 200px;
position: relative;
width: 200px;
}
.chart-two .percent:before {
background-color: #ecf0f1;
border-radius: 50%;
content: "";
height: 105px;
left: 50%;
margin: -53px 0 0 -53px;
position: absolute;
top: 50%;
width: 105px;
z-index: -1;
}
.chart-three:before {
background-color: #eeeeee;
border-radius: 50%;
content: "";
height: calc(100% - 8px);
left: 0;
position: absolute;
top: 0;
width: 100%;
-webkit-transform: scale(0.93);
-moz-transform: scale(0.93);
-ms-transform: scale(0.93);
-o-transform: scale(0.93);
transform: scale(0.93);
}
.chart-three .elements {
color: #fff;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.chart-three .elements:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.chart-three .elements div {
display: inline-block;
max-width: 100%;
vertical-align: middle;
}
.chart-three .elements span {
display: block;
height: auto;
line-height: normal;
}
.chart-three .elements .percent {
display: inline-block;
font-size: 36px;
font-weight: 700;
width: auto;
}
.chart-three .elements h4 {
margin-top: 9px;
color: #fff;
}
.chart-three .track {
border-radius: 50%;
height: -webkit-calc(100% - 8px);
height: calc(100% - 8px);
left: 0;
position: absolute;
top: 0;
width: 100%;
-webkit-transform: scale(0.815);
-moz-transform: scale(0.815);
-ms-transform: scale(0.815);
-o-transform: scale(0.815);
transform: scale(0.815);
}
.chart-three .gradient {
background: rgba(0, 0, 0, 0) url("../img/icons/chart-shadow.png") no-repeat scroll center 26px;
border-radius: 50%;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.chart-three canvas {
left: 0;
position: relative;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
.chart-4 {
text-align: center;
}
.chart-4 .chart-item {
margin-bottom: 19px;
}
.chart-4 canvas {
position: static;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
.chart-4 .percent {
background-color: rgba(255, 255, 255, 0.3);
border: 2px solid #ffffff;
border-radius: 100px;
color: #a1b1bc;
font-size: 15px;
font-weight: 400;
height: 66px;
left: 50%;
line-height: 62px;
margin: -56px 0 0 -33px;
position: absolute;
top: 50%;
width: 66px;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.chart-4 .percent:before {
border: 8px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
content: "";
height: 180px;
left: 50%;
margin: -89px 0 0 -90px;
position: absolute;
top: 50%;
width: 180px;
z-index: -1;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.chart-4 h4 {
font-family: "Open Sans", sans-serif;
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
color: #fff;
}
.chart-4:hover .percent {
background-color: #e6ae03;
color: #fff;
}
.chart-4:hover .percent:before {
border-color: #fff;
}
.contact-form2 {
padding: 15% 15% 15% 50px;
}
.contact-form2 .cb {
margin-bottom: 15px;
}
.contact-form2 .cb .tablecell:first-child {
vertical-align: top;
width: 0;
}
.contact-form2 .icon {
border: 1px solid #777777;
color: #888;
display: block;
font-size: 15px;
height: 35px;
line-height: 35px;
margin: 5px 30px 0 0;
text-align: center;
width: 35px;
}
.social-4 li {
display: inline-block;
}
.social-4 li a {
border: 1px solid #777777;
color: #888;
display: block;
height: 35px;
line-height: 35px;
text-align: center;
width: 35px;
}
.social-4 li a:hover {
background-color: #777777;
border-color: #777777;
color: #fff;
}
/*--------------------------------------
Home Agency
---------------------------------------*/
.agency .heading,
.agency .panel-title,
.agency .chart-item h4,
.agency .chart-two .percent::before,
.agency .service-title h3,
.agency .typography h1,
.agency .typography h2,
.agency .typography h3,
.agency .typography h4,
.agency .typography h5,
.agency .typography h6 {
font-family: "Poiret One", cursive;
}
.agency .typography {
font-family: "Raleway", sans-serif;
}
.agency .heading h3 {
font-family: "Raleway", sans-serif;
font-weight: 400;
}
.agency .panel-title {
font-size: 18px;
height: 50px;
line-height: 50px;
}
.agency .panel-heading a {
color: #222;
}
.agency .panel-heading i {
font-size: 24px;
height: 50px;
line-height: 50px;
width: 50px;
}
.agency .panel-heading.active a {
color: #e6ae03;
}
.agency .tab-flat ul li a {
color: #222;
font-family: "Poiret One", cursive;
font-size: 18px;
font-weight: 400;
}
.agency .tab-flat.active a {
color: #e6ae03;
}
.agency .tab-flat.dark ul li a {
color: #fff;
}
.agency .progress.style4 {
height: 5px;
}
.agency .progress.style4 span {
font-family: "Poiret One", cursive;
font-size: 20px;
font-weight: 500;
letter-spacing: 0;
line-height: 24px;
}
/*--------------------------------------
Price Tables
---------------------------------------*/
.price-wrap {
background-color: #fff;
border: 1px solid #e5e5e5;
border-radius: 4px;
padding: 50px 0;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.price-wrap .price-head {
background-color: #333;
border: 10px solid #ecf0f1;
border-radius: 50%;
color: #fff;
height: 150px;
margin: 0 auto 27px;
position: relative;
width: 150px;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.price-wrap .price-head p {
left: 50%;
line-height: 1;
margin: 0;
position: absolute;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.price-wrap .price-head .price {
font-size: 30px;
}
.price-wrap .price-head .period {
display: inline-block;
font-size: 18px;
margin-top: 6px;
}
.price-wrap .price-body {
font-family: "Raleway", sans-serif;
}
.price-wrap .price-body h3 {
color: #333333;
font-weight: 800;
margin-bottom: 39px;
letter-spacing: 3.2px;
position: relative;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.price-wrap .price-body h3:before {
background-color: #a1b1bc;
bottom: -17px;
content: "";
height: 2px;
left: 50%;
margin-left: -22px;
position: absolute;
width: 44px;
}
.price-wrap .price-body ul {
margin-bottom: 32px;
}
.price-wrap .price-body li {
margin-bottom: 14px;
}
.price-wrap .price-body li:last-child {
margin-bottom: 0;
}
.price-wrap:hover {
background-color: #333;
border-color: #333;
}
.price-wrap:hover .price-head {
background-color: #e6ae03;
}
.price-wrap:hover h3,
.price-wrap:hover li {
color: #fff;
}
.price-wrap.dark {
background-color: #333;
border-color: #333;
}
.price-wrap.dark .price-head {
border-width: 1px;
height: 132px;
width: 132px;
}
.price-wrap.dark h3,
.price-wrap.dark li {
color: #fff;
}
.price-wrap.dark h3:before {
background-color: #fff;
}
.price-wrap.dark:hover {
background-color: #e6ae03;
border-color: #e6ae03;
}
.price-one {
font-family: "Raleway", sans-serif;
background-color: #fff;
border-radius: 4px;
padding-bottom: 41px;
position: relative;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.price-one:before {
border-bottom: 1px solid #e5e5e5;
border-radius: 4px;
bottom: 4px;
content: "";
height: 1px;
left: 0;
position: absolute;
width: 100%;
}
.price-one .price-title {
background-color: #333;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
font-family: "Roboto", sans-serif;
color: #fff;
display: inline-block;
font-size: 24px;
font-weight: 800;
letter-spacing: 3.2px;
margin-bottom: 20px;
padding: 48px 37px 25px 39px;
text-transform: uppercase;
}
.price-one h5 {
color: #333333;
font-weight: 700;
letter-spacing: 3.2px;
text-transform: uppercase;
margin-bottom: 20px;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.price-one ul {
margin-bottom: 30px;
}
.price-one li {
border-top: 1px solid #e5e5e5;
height: 50px;
line-height: 50px;
}
.price-one:hover .price-title {
background-color: #e6ae03;
color: #fff;
}
.price-one:hover h5 {
color: #e6ae03;
}
.price-item .currency {
font-size: 16px;
line-height: normal;
vertical-align: top;
}
.price-item .period {
font-size: 16px;
}
/*--------- Price Two ---------*/
.price-item-two {
background-color: #fff;
border-radius: 5px;
padding-bottom: 50px;
position: relative;
border: 1px solid #e5e5e5;
border-top: 0;
}
.price-item-two .price-head {
background-color: #222;
padding: 50px 0 140px;
position: relative;
}
.price-item-two .pricing {
color: #fff;
font-family: "Dosis", sans-serif;
font-size: 48px;
font-weight: 700;
line-height: 40px;
}
.price-item-two .pricing .currency {
font-size: 16px;
line-height: normal;
vertical-align: top;
}
.price-item-two .pricing .period {
font-size: 15px;
margin-left: -5px;
}
.price-item-two .pricing h4 {
font-weight: 600;
letter-spacing: 3px;
margin-top: 10px;
text-transform: uppercase;
}
.price-item-two .price-wave {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
.price-item-two .price-layer {
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.price-item-two li {
line-height: 40px;
}
.price-item-two .btn {
margin-top: 30px;
}
.price-item-two:hover .price-layer--1 {
-webkit-transform: translate3d(20px, 0px, 0px);
-moz-transform: translate3d(20px, 0px, 0px);
-ms-transform: translate3d(20px, 0px, 0px);
-o-transform: translate3d(20px, 0px, 0px);
transform: translate3d(20px, 0px, 0px);
}
.price-item-two:hover .price-layer--2 {
-webkit-transform: translate3d(-20px, 0px, 0px);
-moz-transform: translate3d(-20px, 0px, 0px);
-ms-transform: translate3d(-20px, 0px, 0px);
-o-transform: translate3d(-20px, 0px, 0px);
transform: translate3d(-20px, 0px, 0px);
}
/*--------- Price three ---------*/
.price-item-three {
background-color: #222;
color: #fff;
padding: 50px;
}
.price-item-three.gray {
background-color: #f9fafc;
color: #333333;
}
.price-item-three h4 {
font-family: "Dosis", sans-serif;
font-size: 24px;
margin-bottom: 10px;
}
.price-item-three .price-head {
margin-bottom: 30px;
}
.price-item-three .pricing {
font-family: "Dosis", sans-serif;
font-size: 48px;
line-height: 40px;
margin-bottom: 30px;
}
.price-item-three .currency {
font-size: 18px;
line-height: normal;
vertical-align: top;
}
.price-item-three .period {
font-size: 18px;
margin-left: -5px;
}
.price-item-three li {
line-height: 35px;
}
.price-item-three .btn-circle {
background-color: #333333;
border-radius: 50%;
color: #fff;
display: block;
float: right;
font-size: 24px;
height: 50px;
line-height: 55px;
margin-top: 25px;
text-align: center;
width: 50px;
overflow: hidden;
}
.price-item-three .btn-circle:hover {
color: #e6ae03;
-webkit-animation: icon-from-left 0.6s;
-moz-animation: icon-from-left 0.6s;
animation: icon-from-left 0.6s;
}
.price-item-three.bordered {
border-bottom: 1px solid #444;
border-right: 1px solid #444;
}
.price-item-three.four {
position: relative;
}
.price-item-three.four:before {
border: 5px solid transparent;
content: "";
height: 100%;
left: -5px;
pointer-events: none;
position: absolute;
top: -5px;
width: 100%;
z-index: 5;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.price-item-three.four .price-head span {
display: inline-block;
font-size: 48px;
margin-bottom: 30px;
}
.price-item-three.four .btn {
color: #fff;
margin-top: 35px;
}
.price-item-three.four:hover:before {
border-color: #e6ae03;
}
.price-border {
border-left: 1px solid #444;
border-top: 1px solid #444;
}
@-webkit-keyframes icon-from-left {
0% {
text-indent: -40px;
-webkit-transition: all 0s ease-in-out 0s;
-moz-transition: all 0s ease-in-out 0s;
-o-transition: all 0s ease-in-out 0s;
transition: all 0s ease-in-out 0s;
}
100% {
text-indent: 0;
}
}
@-moz-keyframes icon-from-left {
0% {
text-indent: -40px;
-webkit-transition: all 0s ease-in-out 0s;
-moz-transition: all 0s ease-in-out 0s;
-o-transition: all 0s ease-in-out 0s;
transition: all 0s ease-in-out 0s;
}
100% {
z-index: 0;
}
}
@keyframes icon-from-left {
0% {
text-indent: -40px;
-webkit-transition: all 0s ease-in-out 0s;
-moz-transition: all 0s ease-in-out 0s;
-o-transition: all 0s ease-in-out 0s;
transition: all 0s ease-in-out 0s;
}
100% {
z-index: 0;
}
}
.gradient-price {
background: -webkit-linear-gradient(45deg, #f99404, #ffbd2d) repeat scroll 0 0;
background: -moz-linear-gradient(45deg, #f99404, #ffbd2d) repeat scroll 0 0;
background: linear-gradient(45deg, #f99404, #ffbd2d) repeat scroll 0 0;
}
/*--------- Price five ---------*/
.price-five {
background-color: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.4);
color: #fff;
padding: 32px;
}
.price-five:before {
content: none;
}
.price-five .price-head {
font-weight: 500;
margin-bottom: 50px;
}
.price-five h3 {
font-weight: 700;
margin-bottom: 62px;
position: relative;
}
.price-five h3:before {
background-color: #fff;
bottom: -32px;
content: "";
height: 1px;
left: 50%;
margin-left: -32px;
position: absolute;
width: 64px;
}
.price-five .pricing {
font-family: "Dosis", sans-serif;
font-size: 48px;
font-weight: 500;
line-height: 48px;
margin-bottom: 30px;
}
.price-five .currency {
font-size: 18px;
line-height: normal;
vertical-align: top;
}
.price-five .period {
display: block;
font-size: 18px;
}
.price-five li {
font-weight: 600;
position: relative;
}
.price-five li:before {
content: "$";
display: inline-block;
font-family: "ElegantIcons";
font-size: 20px;
font-weight: normal;
line-height: normal;
margin: 0 8px 0 0;
position: relative;
top: 5px;
}
.price-five .btn {
margin-top: 30px;
}
.price-five .btn:hover {
background-color: #fff;
border-color: #fff;
color: #e6ae03;
}
.btn-white {
color: #fff;
}
/*--------- Price Six ---------*/
.price-six {
background-color: #fff;
border-radius: 4px;
padding: 32px 48px;
}
.price-six:before {
content: none;
}
.price-six .price-head {
margin-bottom: 50px;
}
.price-six h3 {
color: #333;
font-size: 32px;
margin-bottom: 2px;
}
.price-six .pricing {
font-family: "Roboto", sans-serif;
font-size: 58px;
font-weight: 900;
line-height: 40px;
margin-bottom: 40px;
}
.price-six .currency {
display: inline-block;
font-size: 18px;
font-weight: 400;
line-height: normal;
margin-top: -5px;
vertical-align: top;
}
.price-six .period {
font-size: 16px;
font-weight: 400;
margin-left: -10px;
}
.price-six li i {
margin-right: 10px;
}
.price-six .btn {
margin-top: 30px;
}
/*--------- Price Seven ---------*/
.price-seven {
background-color: #fff;
border-radius: 4px;
border-right: 1px solid #e5e5e5;
padding: 32px 48px;
}
.price-seven .price-head {
margin-bottom: 50px;
}
.price-seven .price-head span {
display: inline-block;
font-size: 40px;
margin-bottom: 30px;
}
.price-seven .price-head p {
font-size: 16px;
font-weight: 500;
}
.price-seven h4 {
color: #333;
}
.price-seven .pricing {
font-family: "Dosis", sans-serif;
font-size: 38px;
font-weight: 700;
line-height: 40px;
margin-bottom: 40px;
overflow: hidden;
}
.price-seven .currency {
display: inline-block;
font-size: 18px;
font-weight: 400;
line-height: normal;
margin-right: -4px;
margin-top: 0;
vertical-align: top;
}
.price-seven .period {
font-size: 16px;
font-weight: 400;
margin-left: -10px;
}
.price-seven .price-anim {
display: inline-block;
position: relative;
}
.price-seven li i {
margin-right: 10px;
}
.price-seven .btn {
margin-top: 30px;
}
.price-seven:hover .price-anim {
-webkit-animation: 0.4s cubic-bezier(0.7, 0, 0.3, 1) 0s normal forwards 1 running move-up;
-moz-animation: 0.4s cubic-bezier(0.7, 0, 0.3, 1) 0s normal forwards 1 running move-up;
animation: 0.4s cubic-bezier(0.7, 0, 0.3, 1) 0s normal forwards 1 running move-up;
}
.price-seven:hover .anim-2 {
-webkit-animation-delay: 0.05s;
-moz-animation-delay: 0.05s;
animation-delay: 0.05s;
}
[class^="col-"]:last-child .price-seven {
border-right: 0;
}
@-webkit-keyframes move-up {
50% {
-webkit-transform: translate3d(0px, -100%, 0px);
-moz-transform: translate3d(0px, -100%, 0px);
-ms-transform: translate3d(0px, -100%, 0px);
-o-transform: translate3d(0px, -100%, 0px);
transform: translate3d(0px, -100%, 0px);
}
51% {
opacity: 0;
-webkit-transform: translate3d(0px, -100%, 0px);
-moz-transform: translate3d(0px, -100%, 0px);
-ms-transform: translate3d(0px, -100%, 0px);
-o-transform: translate3d(0px, -100%, 0px);
transform: translate3d(0px, -100%, 0px);
}
52% {
opacity: 1;
-webkit-transform: translate3d(0px, 100%, 0px);
-moz-transform: translate3d(0px, 100%, 0px);
-ms-transform: translate3d(0px, 100%, 0px);
-o-transform: translate3d(0px, 100%, 0px);
transform: translate3d(0px, 100%, 0px);
}
100% {
-webkit-transform: translate3d(0px, 0px, 0px);
-moz-transform: translate3d(0px, 0px, 0px);
-ms-transform: translate3d(0px, 0px, 0px);
-o-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
}
@-moz-keyframes move-up {
50% {
-webkit-transform: translate3d(0px, -100%, 0px);
-moz-transform: translate3d(0px, -100%, 0px);
-ms-transform: translate3d(0px, -100%, 0px);
-o-transform: translate3d(0px, -100%, 0px);
transform: translate3d(0px, -100%, 0px);
}
51% {
opacity: 0;
-webkit-transform: translate3d(0px, -100%, 0px);
-moz-transform: translate3d(0px, -100%, 0px);
-ms-transform: translate3d(0px, -100%, 0px);
-o-transform: translate3d(0px, -100%, 0px);
transform: translate3d(0px, -100%, 0px);
}
52% {
opacity: 1;
-webkit-transform: translate3d(0px, 100%, 0px);
-moz-transform: translate3d(0px, 100%, 0px);
-ms-transform: translate3d(0px, 100%, 0px);
-o-transform: translate3d(0px, 100%, 0px);
transform: translate3d(0px, 100%, 0px);
}
100% {
-webkit-transform: translate3d(0px, 0px, 0px);
-moz-transform: translate3d(0px, 0px, 0px);
-ms-transform: translate3d(0px, 0px, 0px);
-o-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
}
@keyframes move-up {
50% {
-webkit-transform: translate3d(0px, -100%, 0px);
-moz-transform: translate3d(0px, -100%, 0px);
-ms-transform: translate3d(0px, -100%, 0px);
-o-transform: translate3d(0px, -100%, 0px);
transform: translate3d(0px, -100%, 0px);
}
51% {
opacity: 0;
-webkit-transform: translate3d(0px, -100%, 0px);
-moz-transform: translate3d(0px, -100%, 0px);
-ms-transform: translate3d(0px, -100%, 0px);
-o-transform: translate3d(0px, -100%, 0px);
transform: translate3d(0px, -100%, 0px);
}
52% {
opacity: 1;
-webkit-transform: translate3d(0px, 100%, 0px);
-moz-transform: translate3d(0px, 100%, 0px);
-ms-transform: translate3d(0px, 100%, 0px);
-o-transform: translate3d(0px, 100%, 0px);
transform: translate3d(0px, 100%, 0px);
}
100% {
-webkit-transform: translate3d(0px, 0px, 0px);
-moz-transform: translate3d(0px, 0px, 0px);
-ms-transform: translate3d(0px, 0px, 0px);
-o-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
}
/*--------- Price Eight ---------*/
.price-eight {
background-color: #222;
color: #fff;
padding: 32px 48px;
}
.price-eight h4 {
font-family: "Dosis", sans-serif;
font-size: 48px;
margin-bottom: 15px;
}
.price-eight p {
color: #777777;
font-size: 16px;
}
.price-eight .pricing {
background-color: #1e1e1e;
font-family: "Dosis", sans-serif;
font-size: 48px;
line-height: 38px;
margin: 0 -48px 35px;
padding: 30px 0 20px;
position: relative;
z-index: 10;
}
.price-eight .pricing:before {
background-color: #1a1a1a;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 0;
z-index: -1;
-webkit-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
-moz-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
-ms-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
-o-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}
.price-eight .currency {
font-size: 16px;
font-weight: 500;
line-height: normal;
vertical-align: top;
}
.price-eight .period {
color: #777777;
display: block;
font-size: 16px;
font-weight: 500;
}
.price-eight .btn {
margin-top: 30px;
}
.price-eight:hover .pricing {
color: #e6ae03;
}
.price-eight:hover .pricing:before {
width: 100%;
}
/*--------- Price Nine ---------*/
.price-nine {
background-color: #eef0f3;
border-top: 5px solid transparent;
padding: 35px 48px;
position: relative;
}
.price-nine:before {
background-color: #e6ae03;
content: "";
height: 5px;
left: 0;
position: absolute;
top: -5px;
width: 0;
-webkit-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
-moz-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
-ms-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
-o-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}
.price-nine .pricing {
border-top: 3px solid rgba(139, 144, 157, 0.18);
font-family: "Dosis", sans-serif;
font-size: 24px;
padding: 16px 0 25px;
}
.price-nine h4 {
font-family: "Dosis", sans-serif;
font-size: 24px;
font-weight: 500;
margin-bottom: 10px;
}
.price-nine > p {
border-bottom: 3px solid rgba(139, 144, 157, 0.18);
font-weight: 600;
line-height: normal;
padding-bottom: 15px;
}
.price-nine .btn {
background-color: transparent;
border: 1px solid #bababa;
color: #777;
font-weight: 700;
height: auto;
line-height: normal;
margin-top: 30px;
padding: 13px 28px 13px 29px;
}
.price-nine .btn:hover {
background-color: #e6ae03;
border-color: #e6ae03;
color: #fff;
}
.price-nine:hover:before {
width: 100%;
}
.bg-10 {
background-color: #e6ae03;
}
.price-border-two {
border-top: 1px solid #fff;
border-left: 1px solid #fff;
}
/*--------- Price Ten ---------*/
.price-ten {
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
color: #fff;
padding: 32px 48px;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.price-ten h4 {
font-family: "Dosis", sans-serif;
font-size: 32px;
margin-bottom: 40px;
}
.price-ten .pricing {
background-color: rgba(0, 0, 0, 0.05);
border-radius: 50%;
font-family: "Dosis", sans-serif;
font-size: 28px;
height: 95px;
line-height: 95px;
margin: 0 auto 50px;
width: 95px;
}
.price-ten .currency {
display: inline-block;
line-height: 95px;
}
.price-ten > p {
font-size: 16px;
font-weight: 600;
}
.price-ten .btn {
background-color: rgba(255, 255, 255, 0.8);
color: #e6ae03;
}
.price-ten > span {
display: block;
opacity: 0;
padding-top: 35px;
position: relative;
top: -15px;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.price-ten:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.price-ten:hover > span {
opacity: 1;
top: 0;
}
/*--------- Price Eleven ---------*/
.price-eleven {
background-color: #2e2e2e;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05), 0 15px 30px -10px rgba(0, 0, 0, 0.3);
padding: 32px 48px;
color: #fff;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.price-eleven h4 {
border-bottom: 3px solid #333;
font-size: 32px;
font-weight: 500;
margin-bottom: 30px;
padding-bottom: 15px;
}
.price-eleven .pricing {
font-size: 32px;
margin-bottom: 30px;
}
.price-eleven > p {
font-weight: 700;
font-size: 16px;
}
.price-eleven:hover {
background-color: #222;
}
/*--------- Serivces ---------*/
.service-item {
text-align: center;
}
.service-item .service-icon {
background-color: #e7e7e7;
border-radius: 3px;
color: #555;
font-size: 48px;
height: 100px;
line-height: 100px;
margin: 0 auto 74px;
text-align: center;
width: 100px;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.service-item .service-icon:before {
background-color: #444;
bottom: -14px;
content: "";
height: 2px;
left: 100%;
margin-left: -10px;
position: absolute;
width: 48px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.service-item .service-icon i {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.service-item:hover .service-img:after {
background-color: #e6ae03;
}
.service-item:hover .service-icon {
background-color: #444444;
color: #ffffff;
}
.service-item h3 {
color: #666;
font-size: 24px;
font-weight: 700;
margin-bottom: 15px;
text-transform: uppercase;
}
.service-item p {
margin-bottom: 0;
}
.service-item.type-two {
background-color: #fff;
border: 1px solid #e5e5e5;
padding: 0 50px 35px;
position: relative;
}
.service-item.type-two:before {
background-color: transparent;
bottom: -3px;
content: "";
height: 2px;
left: -1px;
position: absolute;
width: -webkit-calc(100% + 2px);
width: calc(100% + 2px);
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.service-item.type-two .service-icon {
background-color: #f9fafb;
border: 1px solid #e5e5e5;
border-radius: 4px;
color: #fff;
font-size: 24px;
height: 73px;
line-height: 73px;
margin-bottom: 5px;
position: relative;
text-align: center;
width: 73px;
-webkit-transform: rotate(45deg) translate(-35%, -35%);
-moz-transform: rotate(45deg) translate(-35%, -35%);
-ms-transform: rotate(45deg) translate(-35%, -35%);
-o-transform: rotate(45deg) translate(-35%, -35%);
transform: rotate(45deg) translate(-35%, -35%);
}
.service-item.type-two .service-icon:before {
background-color: #333;
border-radius: 4px;
content: "";
height: 63px;
left: 50%;
margin: -31px 0 0 -31px;
position: absolute;
top: 50%;
width: 63px;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
.service-item.type-two .service-desc {
font-family: "Raleway", sans-serif;
}
.service-item.type-two .service-desc h3 {
color: #333333;
font-size: 18px;
text-transform: none;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.service-item.type-two .service-desc a {
color: #333333;
display: inline-block;
font-size: 16px;
font-weight: 600;
margin-top: 20px;
}
.service-item.type-two:hover:before {
background-color: #e6ae03;
}
.service-item.type-two:hover .service-icon {
background-color: #e6ae03;
border-color: #e6ae03;
}
.service-item.type-two:hover h3,
.service-item.type-two:hover a {
color: #e6ae03;
}
.service-item.type-3 {
padding: 30px 0 80px;
}
.service-item.type-3 .service-img {
margin-bottom: 60px;
padding-bottom: 20px;
position: relative;
}
.service-item.type-3 .service-img::after {
background: transparent url("../img/icons/s-curve.png") no-repeat scroll center center / contain;
height: 181px;
margin: 0;
opacity: 0;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
z-index: -1;
}
.service-item.type-3 h3 {
color: #333333;
font-family: "Dosis", sans-serif;
font-size: 30px;
text-transform: none;
}
.service-item.type-3:hover .service-img::after {
opacity: 1;
}
.service-item.type-4 {
border: 1px solid #e5e5e5;
padding: 40px 38px;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.service-item.type-4 .service-img {
margin-bottom: 37px;
}
.service-item.type-4 .service-img:after {
content: none;
}
.service-item.type-4 h3 {
color: #333333;
font-weight: 500;
text-transform: none;
}
.service-item.type-4:hover {
background-color: #eeeeee;
}
.service-item5 .service-icon {
background-color: rgba(255, 255, 255, 0.05);
color: #fff;
width: 120px;
height: 120px;
margin: 0 auto 26px;
line-height: 120px;
font-size: 30px;
border-radius: 50%;
border: 1px solid #fff;
position: relative;
z-index: 0;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.service-item5 .service-icon:before {
background-color: rgba(255, 255, 255, 0.3);
border-radius: 50%;
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: -1;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.service-item5 .service-desc {
color: #fff;
font-family: "Raleway", sans-serif;
}
.service-item5 .service-desc h4 {
font-weight: 600;
margin-bottom: 25px;
}
.service-item5 .service-desc p {
margin: 0;
}
.service-item5:hover .service-icon {
background-color: #fff;
color: #e6ae03;
}
.service-item5:hover .service-icon:before {
-webkit-transform: scale(1.15);
-moz-transform: scale(1.15);
-ms-transform: scale(1.15);
-o-transform: scale(1.15);
transform: scale(1.15);
}
/*------------- Service two / img icon service ----------*/
.service-img {
margin-bottom: 80px;
position: relative;
}
.service-img:after {
background-color: #444;
bottom: -42px;
content: "";
height: 2px;
left: 50%;
margin-left: -24px;
position: absolute;
width: 48px;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
/*------------- link service ----------*/
.service-link a {
color: #555;
display: block;
margin-bottom: 20px;
}
.service-link a:last-child {
margin-bottom: 0;
}
.service-link a:hover {
color: #e6ae03;
}
/*------------- list style ----------*/
.list-style li {
color: #444;
border-bottom: 1px solid #fff;
padding: 10px 20px 12px;
}
.list-style li:before {
color: #e6ae03;
display: inline-block;
font-family: FontAwesome;
font-feature-settings: normal;
font-kerning: auto;
font-language-override: normal;
font-size: inherit;
font-size-adjust: none;
font-stretch: normal;
font-style: normal;
font-synthesis: weight style;
font-variant: normal;
font-weight: normal;
line-height: 1;
text-rendering: auto;
}
.list-one li:before {
content: "\f105";
margin-right: 9px;
}
.list-two li:before {
content: "\f101";
margin-right: 9px;
}
.list-three li:before {
content: "\f061";
margin-right: 9px;
}
.list-four li:before {
content: "\f0a9";
margin-right: 9px;
}
.list-five li {
font-size: 16px;
font-weight: 400;
margin-bottom: 14px;
padding-left: 30px;
position: relative;
}
.list-five li:before {
content: "R";
font-size: 18px;
left: 0;
position: absolute;
top: 4px;
font-family: 'ElegantIcons';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.list-six li {
border: 0 none;
padding: 0 0 5px 20px;
position: relative;
}
.list-six li:before {
background-color: #777777;
content: "";
height: 5px;
left: 0;
margin-top: -2.5px;
position: absolute;
top: 50%;
width: 3px;
}
.list-7 li {
border: 0 none;
color: #ffffff;
font-family: "Open Sans", sans-serif;
font-size: 24px;
font-weight: 300;
line-height: 50px;
padding: 0;
}
.list-7 li:before {
background-color: #ffffff;
border-radius: 30px;
color: #333333;
content: "\f00c";
font-size: 16px;
height: 30px;
line-height: 30px;
margin-right: 20px;
text-align: center;
width: 30px;
}
.list-8 li {
border: 0 none;
line-height: 40px;
padding: 0;
}
.list-8 li span {
background-color: #a9a9a9;
border-radius: 50px;
color: #ffffff;
display: inline-block;
font-size: 13px;
height: 24px;
line-height: 25px;
margin-right: 15px;
position: relative;
text-align: center;
width: 24px;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.list-8 li span:before {
background-color: #a1b1bc;
border-radius: 20px;
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: -1;
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
-ms-transform: scale(1.25);
-o-transform: scale(1.25);
transform: scale(1.25);
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.list-8 li:hover span {
background-color: #e6ae03;
}
.list-9 li {
border-bottom-color: #dcdcdc;
font-size: 14px;
line-height: 40px;
padding: 0 0 0 10px;
position: relative;
}
.list-9 li:before {
background-color: #e6ae03;
content: "";
height: 5px;
margin-right: 10px;
position: relative;
top: -3px;
width: 5px;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.list-9 li:after {
background-color: #e6ae03;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 0;
z-index: -1;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.list-9 li:last-child {
border-bottom: 0;
}
.list-9 li:hover {
border-bottom-color: #e6ae03;
}
.list-9 li:hover:before {
background-color: #fff;
}
.list-9 li:hover:after {
width: 100%;
}
.list-9 li:hover a {
color: #fff !important;
}
.list-10 li {
border: 0 none;
line-height: 30px;
padding: 0;
}
.list-10 li:before {
content: "P";
font-family: "ElegantIcons";
font-size: 12px;
margin-right: 18px;
}
.list-bg li {
background-color: #f3f3f3;
}
.gray-border li {
border-bottom-color: #e7e7e7;
}
/*------------- Buttons ----------*/
.btn-group .btn-sprw {
margin-right: 25px;
margin-bottom: 25px;
}
.btn-group .btn-sprw:last-child {
margin-right: 0;
}
.btn-group + .btn-group {
margin-top: 60px;
}
.btn-sprw {
border-radius: 3px;
color: #ffffff;
display: inline-block;
font-weight: 300;
padding: 13px 25px 12px 74px;
position: relative;
text-transform: uppercase;
}
.btn-sprw i {
border-radius: 3px;
box-shadow: 4px 0 6px -5px rgba(0, 0, 0, 0.75);
height: 49px;
left: 1px;
line-height: 50px;
position: absolute;
text-align: center;
top: 1px;
width: 48px;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.btn-bold {
font-weight: 700;
}
.btn-icon-dark {
background-color: #444444;
}
.btn-icon-dark:hover,
.btn-icon-dark:focus {
color: #ffffff;
}
.btn-icon-dark:hover i,
.btn-icon-dark:focus i {
background-color: #ffffff;
color: #444;
}
.btn-icon-theme {
background-color: #e6ae03;
}
.btn-icon-theme:hover,
.btn-icon-theme:focus {
color: #444;
}
.btn-icon-theme:hover i,
.btn-icon-theme:focus i {
background-color: #ffffff;
color: #444;
}
.btn-icon-theme-bdr {
background-color: transparent;
border: 1px solid #e6ae03;
padding: 12px 25px 11px 74px;
color: #444;
}
.btn-icon-theme-bdr i {
background-color: #e6ae03;
border-radius: 2px;
color: #fff;
left: 0;
top: 0;
width: 50px;
}
.btn-icon-theme-bdr:hover,
.btn-icon-theme-bdr:focus {
border-color: #444;
color: #444;
}
.btn-icon-theme-bdr:hover i,
.btn-icon-theme-bdr:focus i {
background-color: #444;
}
.btn-icon-dark-bdr {
background-color: transparent;
border: 1px solid #444;
padding: 12px 25px 11px 74px;
color: #444;
}
.btn-icon-dark-bdr i {
background-color: transparent;
border-right: 1px solid #444;
left: 0;
top: 0;
}
.btn-icon-dark-bdr:hover,
.btn-icon-dark-bdr:focus {
border-color: #e6ae03;
}
.btn-icon-dark-bdr:hover i,
.btn-icon-dark-bdr:focus i {
border-right-color: #e6ae03;
}
.btn-theme {
background-color: #e6ae03;
padding: 13px 50px 12px;
color: #ffffff;
}
.btn-theme:hover,
.btn-theme:focus {
background-color: rgba(230, 174, 3, 0.8);
color: #ffffff;
}
.btn-half-dark {
background-color: rgba(0, 0, 0, 0.1);
border-radius: 0;
color: #ffffff;
font-family: "Open Sans", sans-serif;
font-size: 18px;
font-weight: 700;
line-height: 65px;
padding: 0 50px;
text-transform: uppercase;
}
.btn-half-dark:hover {
background-color: transparent;
border-color: #fff;
color: #fff;
}
.btn-theme-border {
background-color: transparent;
border: 1px solid #e6ae03;
padding: 13px 50px 12px;
color: #444;
}
.btn-theme-border:hover,
.btn-theme-border:focus {
border-color: #444;
color: #444;
}
.btn-theme-border2 {
background-color: transparent;
border: 1px solid #e6ae03;
padding: 13px 50px 11px;
color: #333333;
}
.btn-theme-border2:hover,
.btn-theme-border2:focus {
background-color: #e6ae03;
color: #fff;
}
.button-group {
margin-top: 60px;
}
.button-group .btn {
margin: 0 19px 20px 0;
vertical-align: bottom;
}
.no-border {
border: 0 none;
}
.btn-small {
height: 45px;
line-height: 41px;
padding: 0 37px;
}
.btn-mid {
font-size: 18px;
height: 55px;
line-height: 52px;
padding: 0 48px;
}
.btn-md {
font-size: 18px;
font-weight: 700;
height: 65px;
line-height: 65px;
padding: 0 50px;
}
.btn-large {
font-size: 26px;
height: 85px;
line-height: 85px;
padding: 0 95px;
}
.btn-xxlarge {
font-size: 36px;
height: 105px;
line-height: 105px;
padding: 0 102px;
}
.btn-3d,
.btn-3d:hover,
.btn-3d:focus {
box-shadow: 0 -5px 0 0 rgba(0, 0, 0, 0.2) inset;
}
.btn-small.btn-dark-border {
border-radius: 0;
font-weight: 700;
line-height: 44px;
}
.btn-mid.btn-dark-border {
border: 2px solid;
border-radius: 0;
font-weight: 700;
}
.btn-large.btn-dark-border {
border: 2px solid;
border-radius: 0;
font-weight: 700;
}
.btn-xxlarge.btn-dark-border {
border: 2px solid;
border-radius: 0;
font-weight: 700;
}
.btn-with-icon {
font-weight: 700;
height: auto;
padding: 0;
}
.btn-with-icon i {
border-right: 2px solid rgba(0, 0, 0, 0.2);
float: left;
font-size: 26px;
height: 80px;
line-height: 80px;
text-align: center;
width: 81px;
}
.btn-with-icon span {
font-size: 26px;
height: 80px;
line-height: 80px;
padding: 0 26px;
}
.btn-with-icon.right i {
border-left: 2px solid rgba(0, 0, 0, 0.2);
border-right: 0 none;
float: right;
}
.btn-icon-with-border {
border: 2px solid #333;
color: #e6ae03;
font-size: 26px;
font-weight: 700;
height: 80px;
line-height: 80px;
padding: 0 53px;
}
.btn-icon-with-border i {
margin-right: 10px;
}
.pricing-table {
border: 5px solid transparent;
font-family: "Lato", sans-serif;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.pricing-table .price-title {
background-color: #e6ae03;
color: #fff;
padding: 20px 0;
text-align: center;
position: relative;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.pricing-table .price-title h3 {
font-weight: 900;
letter-spacing: 1px;
line-height: 20px;
}
.pricing-table .price-value {
background-color: #ecf0f1;
color: #4e4e4e;
text-align: center;
font-weight: 700;
padding: 12px 0 10px;
line-height: 20px;
}
.pricing-table .price-value span {
display: inline-block;
}
.pricing-table .price-value .currency {
vertical-align: top;
}
.pricing-table .price-value .value {
font-size: 30px;
line-height: 30px;
}
.pricing-table .price-body {
border: 1px solid #e9edee;
}
.pricing-table .price-body li {
color: #a1b1bc;
line-height: 40px;
font-weight: 400;
border-bottom: 1px solid #e9edee;
}
.pricing-table .price-foot {
background-color: #f5f7f8;
padding: 15px 35px;
text-align: center;
}
.pricing-table .price-foot .btn {
border-radius: 3px;
display: block;
font-family: "Lato", sans-serif;
font-size: 16px;
font-weight: 900;
line-height: 45px;
padding: 0;
}
.pricing-table .price-foot .btn-3d,
.pricing-table .price-foot .btn-3d:hover,
.pricing-table .price-foot .btn-3d:focus {
box-shadow: -1px -3px 0 0 rgba(0, 0, 0, 0.2) inset;
}
.pricing-table .ribbon {
position: absolute;
right: -10px;
top: -10px;
z-index: 1;
overflow: hidden;
width: 75px;
height: 75px;
text-align: right;
}
.pricing-table .ribbon span {
background-color: #a1b1bc;
color: #fff;
display: block;
font-family: "Lato", sans-serif;
font-weight: 900;
line-height: 20px;
position: absolute;
right: -21px;
text-align: center;
text-transform: uppercase;
top: 19px;
width: 100px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.pricing-table .ribbon span:before {
content: "";
position: absolute;
left: 0px;
top: 100%;
z-index: -1;
border-left: 3px solid #1c2937;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #1c2937;
}
.pricing-table .ribbon span:after {
content: "";
position: absolute;
right: 0px;
top: 100%;
z-index: -1;
border-left: 3px solid transparent;
border-right: 3px solid #1c2937;
border-bottom: 3px solid transparent;
border-top: 3px solid #1c2937;
}
.pricing-table.active,
.pricing-table:hover {
border-color: #34495e;
}
.pricing-table.active .price-title,
.pricing-table:hover .price-title {
background-color: #2c3e50;
}
/*==============================================
Alert
===============================================*/
.alert {
position: relative;
font-weight: 400;
}
.alert.no-radius {
border-radius: 0;
}
.alert .close {
position: absolute;
right: 10px;
top: 10px;
opacity: 1;
}
.alert .close:hover,
.alert .close:focus {
color: inherit;
}
.alert-content {
line-height: normal;
}
.alert-content .alert-icon {
float: left;
font-size: 16px;
margin-right: 16px;
}
.alert-normal {
background-color: #eff5f7;
border-color: #dcdcdc;
color: #959595;
}
.alert-warning {
background-color: #fff4bb;
border-color: #ffcc66;
color: #e99b00;
}
.alert-success {
background-color: #c1faa8;
border-color: #89d368;
color: #6db74c;
}
.alert-border-only {
background-color: transparent;
}
.alert-large {
display: table;
padding: 35px 35px 35px 45px;
width: 100%;
}
.alert-large > * {
display: table-cell;
vertical-align: middle;
}
.alert-large .alert-icon {
font-size: 30px;
width: 70px;
}
.alert-large h4 {
font-weight: 700;
margin-bottom: 10px;
}
.alert-large p {
margin-bottom: 0;
}
/*==============================================
form Elements
===============================================*/
.select-box-item .select-box .selectize-input {
background-color: #fff;
background-image: none;
border-color: #e5e5e5;
box-shadow: none;
color: #777777;
padding: 10px 19px;
}
.select-box-item .select-box .selectize-input:after {
content: none;
}
.select-box-item .select-box .selectize-input:before {
background-color: transparent;
border-left: 1px solid #e5e5e5;
color: #d4d4d4;
content: "\f107";
font-family: FontAwesome;
font-size: 24px;
height: 40px;
line-height: 40px;
margin: 0;
position: absolute;
left: auto;
right: 0;
text-align: center;
top: 0;
width: 40px;
}
.select-box-item .select-box .selectize-input.dropdown-active {
border-color: #e6ae03;
}
.select-box-item .selectize-dropdown [data-selectable] {
border: 1px solid #e5e5e5;
border-top: 0;
height: 40px;
line-height: 40px;
padding: 0 20px;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.select-box-item .selectize-dropdown [data-selectable]:hover {
background-color: #e6ae03;
border-color: #e6ae03;
color: #fff;
}
/* -------- Select box two ---------- */
.select-box-two .select-box .selectize-input {
background-color: #ecf0f1;
border-color: #e5e5e5;
color: #a1b1bc;
}
.select-box-two .select-box .selectize-input.dropdown-active {
background-color: #ecf0f1 !important;
border-color: #e6ae03;
}
.select-box-two .selectize-dropdown [data-selectable] {
border-color: #e5e5e5;
}
.select-box-two .selectize-dropdown [data-selectable]:hover {
background-color: #ecf0f1;
border-color: #e5e5e5;
color: #777777;
}
/* -------- Custom radio one ---------- */
.custom-radio-one + label,
.custom-radio-two + label,
.custom-radio-three + label,
.custom-radio-four + label {
padding-left: 25px;
}
.custom-radio-one + label:before {
background-color: #e6ae03;
border-radius: 25px;
content: "";
height: 16px;
margin-top: -8px;
top: 50%;
width: 16px;
}
.custom-radio-one:checked + label:before {
background-color: #fff;
border: 4px solid #e6ae03;
content: "";
}
/* -------- Custom radio two ---------- */
.custom-radio-two + label:before {
background-color: transparent;
border: 1px solid #333333;
border-radius: 25px;
content: "";
height: 16px;
margin-top: -8px;
top: 50%;
width: 16px;
}
.custom-radio-two:checked + label:before {
content: "";
}
.custom-radio-two:checked + label:after {
background-color: #e6ae03;
border-radius: 25px;
content: "";
height: 10px;
left: 3px;
margin-top: -5px;
position: absolute;
top: 50%;
width: 10px;
}
/* -------- Custom radio three ---------- */
.custom-radio-three + label:before {
background: transparent url("../img/icons/radio3.png") no-repeat scroll 0 0;
border: 0 none;
border-radius: 0;
content: "";
height: 16px;
margin-top: -8px;
top: 50%;
width: 16px;
}
.custom-radio-three:checked + label:before {
background-image: url("../img/icons/radio3.png");
background-position: -25px 0;
content: "";
}
/* -------- Custom radio four ---------- */
.custom-radio-four + label:before {
background: transparent url("../img/icons/radio4.png") no-repeat scroll 0 0;
border: 0 none;
border-radius: 0;
content: "";
height: 16px;
margin-top: -8px;
top: 50%;
width: 16px;
}
.custom-radio-four:checked + label:before {
background-image: url("../img/icons/radio4.png");
background-position: -25px 0;
content: "";
}
/* -------- Custom radio five ---------- */
.custom-radio-five + label:before {
background: transparent url("../img/icons/radio5.png") no-repeat scroll 0 0;
border: 0 none;
border-radius: 0;
content: "";
height: 20px;
margin-top: -12px;
top: 50%;
width: 18px;
}
.custom-radio-five:checked + label:before {
background-image: url("../img/icons/radio5.png");
background-position: -25px 0;
content: "";
}
/* -------- Custom radio six ---------- */
.custom-radio-six + label:before {
background: transparent url("../img/icons/radio6.png") no-repeat scroll 0 0;
border: 0 none;
border-radius: 0;
content: "";
height: 16px;
margin-top: -8px;
top: 50%;
width: 16px;
}
.custom-radio-six:checked + label:before {
background-image: url("../img/icons/radio6.png");
background-position: -25px 0;
content: "";
}
/* -------- Custom checkbox ---------- */
.custom-check-one + label,
.custom-check-two + label,
.custom-check-three + label,
.custom-check-four + label {
padding-left: 30px;
}
/* -------- Custom checkbox one ---------- */
.custom-check-one + label:before {
background: transparent url("../img/icons/check-1.png") no-repeat scroll 0 0;
content: "";
height: 20px;
left: 0;
margin-top: -10px;
top: 50%;
width: 20px;
}
.custom-check-one + label:hover:before {
background-position: -30px 0px;
}
.custom-check-one:checked + label:before {
background-position: -60px 0;
content: "";
}
/* -------- Custom checkbox two ---------- */
.custom-check-two + label:before {
background: transparent url("../img/icons/check-2.png") no-repeat scroll 0 0;
content: "";
height: 20px;
left: 0;
margin-top: -10px;
top: 50%;
width: 20px;
}
.custom-check-two + label:hover:before {
background-position: -30px 0px;
}
.custom-check-two:checked + label:before {
background-position: -60px 0;
content: "";
}
/* -------- Custom checkbox three ---------- */
.custom-check-three + label:before {
background: transparent url("../img/icons/check-3.png") no-repeat scroll 0 0;
content: "";
height: 20px;
left: 0;
margin-top: -10px;
top: 50%;
width: 20px;
}
.custom-check-three + label:hover:before {
background-position: -30px 0px;
}
.custom-check-three:checked + label:before {
background-position: -60px 0;
content: "";
}
/* -------- Custom checkbox four ---------- */
.custom-check-four + label:before {
background: transparent url("../img/icons/check-4.png") no-repeat scroll 0 0;
content: "";
height: 20px;
left: 0;
margin-top: -10px;
top: 50%;
width: 20px;
}
.custom-check-four + label:hover:before {
background-position: -30px 0px;
}
.custom-check-four:checked + label:before {
background-position: -60px 0;
content: "";
}
/*==============================================
date picker
===============================================*/
.field-with-icon {
position: relative;
}
.field-with-icon input {
padding: 0 50px 0 20px;
}
.field-with-icon i {
color: #dadcde;
position: absolute;
right: 20px;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.ui-widget {
font-family: "Roboto", sans-serif;
font-size: 14px;
}
.ui-datepicker {
background-color: #fff;
background-image: none;
border-radius: 0;
padding: 0;
box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.078);
border: 0;
}
.ui-datepicker table {
font-size: 14px;
}
.ui-datepicker th {
font-weight: 400;
}
.ui-datepicker td {
padding: 0;
}
.ui-datepicker .ui-state-default {
background-color: transparent;
background-image: none;
border: 0 none;
color: #a1b1bc;
font-weight: 400;
text-align: center;
}
.ui-datepicker .ui-state-default:hover {
background-color: #e6ae03;
color: #fff;
}
.ui-datepicker .ui-state-highlight {
background-color: #e6ae03;
color: #fff;
}
.ui-datepicker-header {
border: 0 none;
border-radius: 0;
height: 50px;
line-height: 50px;
padding: 0 !important;
position: relative;
}
.ui-datepicker-header .ui-datepicker-title {
background-color: #2c3e50;
font-family: "Roboto", sans-serif;
height: 50px;
letter-spacing: 1px;
line-height: 50px;
margin: 0;
text-transform: uppercase;
}
.ui-datepicker-header > a {
cursor: pointer;
}
.ui-datepicker-header > a:before {
display: inline-block;
font-family: FontAwesome;
font-size: 16px;
font-weight: normal;
left: 50%;
position: absolute;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.ui-datepicker-header .ui-datepicker-prev,
.ui-datepicker-header .ui-datepicker-next {
background-color: #34495e;
border-radius: 0;
height: 50px;
left: 0;
top: 0;
width: 50px;
}
.ui-datepicker-header .ui-datepicker-prev span,
.ui-datepicker-header .ui-datepicker-next span {
background-image: none;
}
.ui-datepicker-header .ui-datepicker-prev:before {
content: "\f104";
}
.ui-datepicker-header .ui-datepicker-next {
left: auto;
right: 0;
}
.ui-datepicker-header .ui-datepicker-next:before {
content: "\f105";
}
.ui-datepicker-header .ui-state-hover {
background-image: none;
background-color: #e6ae03;
border: 0;
color: inherit;
font-weight: normal;
}
/*==============================================
Forms
===============================================*/
.form-field-item {
position: relative;
margin-top: 10px;
}
.form-field {
border: 1px solid #e5e5e5;
border-radius: 3px;
padding: 0 20px;
width: 100%;
box-shadow: none;
}
.form-field.no-radius {
border-radius: 0;
}
.form-field.no-border {
border: 0 none;
}
.form-field.field-hover {
background-color: #f5f7f8;
border-color: transparent;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.form-field.field-hover:hover {
background-color: #fff;
border-color: #e5e5e5;
}
textarea.form-field {
padding-top: 10px;
padding-bottom: 20px;
}
.form-field:not(textarea) {
height: 40px;
}
input[type="submit"] {
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
.field-with-icon.icon-left i {
left: 20px;
right: auto;
}
.field-with-icon.icon-left .form-field {
padding: 0 20px 0 45px;
}
.login-wrap.style2 {
background-color: #f5f7f8;
padding: 35px;
border-radius: 4px;
}
.login-wrap.style3 {
background-color: #1a1c27;
padding: 0 30px 40px;
border-radius: 4px;
}
.login-wrap.style3 .login-title {
background-color: #2d323f;
border-radius: 4px 4px 0 0;
color: #fff;
margin: 0 -30px 23px;
padding: 22px 0;
text-align: center;
}
.login-wrap.style3 .login-title h4 {
font-weight: 700;
}
.login-wrap.style3 .form-field {
background-color: #2d323f;
border-color: transparent;
color: #71798d;
height: 50px;
}
.login-wrap.style3 input[type="submit"] {
margin-top: 15px;
}
.login-wrap.style3 .clear {
margin-top: 15px;
}
.login-wrap.style3 .clear a {
color: #71798d;
}
.login-wrap.style3 .clear a:hover {
color: #e6ae03;
}
.login-wrap.style4 {
background-color: rgba(0, 0, 0, 0.3);
padding: 10%;
font-family: "Raleway", sans-serif;
}
.login-wrap.style4 .form-field-item label {
color: #fff;
font-size: 18px;
margin-bottom: 10px;
}
.login-wrap.style4 .form-field {
background-color: transparent;
color: #fff;
height: 50px;
}
.login-meta {
margin-top: 25px;
}
.login-meta li {
padding-left: 20px;
padding-right: 20px;
position: relative;
}
.login-meta li:before {
background-color: #a1b1bc;
border-radius: 10px;
content: "";
height: 5px;
left: 0;
margin-top: -2.5px;
position: absolute;
top: 50%;
width: 5px;
}
.login-meta li:first-child {
padding-left: 5px;
}
.login-meta li:first-child:before {
content: none;
}
.login-meta a {
color: #a1b1bc;
}
.form-field-item label,
.select-box-item label {
color: #2c3e50;
font-weight: 300;
line-height: normal;
margin: 0;
}
.cf-dark {
background-color: #333542;
}
.cf-dark .contact-info {
color: #fff;
}
.cf-dark .contact-info a {
color: #fff;
}
.cf-dark .contact-info a:hover {
color: #e6ae03;
}
/*==============================================
Deviders
===============================================*/
.sprw-devider {
position: relative;
width: 100%;
}
.sprw-devider .line {
display: block;
width: 100%;
}
.sprw-devider .solid {
border-bottom: 1px solid #dbe2e4;
}
.sprw-devider .double {
border-bottom: 4px double #dbe2e4;
}
.sprw-devider .dashed {
border-bottom: 1px dashed #dbe2e4;
}
.sprw-devider .dashed-double {
outline: 1px dashed #dbe2e4;
padding: 2px;
}
.sprw-devider .dashed-mid {
background: transparent url("../img/icons/dashed-mid.png") repeat-x scroll 0 0;
height: 1px;
}
.sprw-devider .solid-mid {
border-bottom: 3px solid #dbe2e4;
}
.sprw-devider .solid-with-primary {
border-bottom: 2px solid #dbe2e4;
position: relative;
}
.sprw-devider .solid-with-primary:before {
background-color: #e6ae03;
content: "";
height: 2px;
left: 0;
position: absolute;
top: 0;
width: 175px;
}
.sprw-devider .shadow {
background: transparent url("../img/icons/bdr-shadow.png") no-repeat scroll center center / cover;
height: 18px;
}
/*==============================================
Pagination
===============================================*/
.pagination > li > a {
color: #777777;
font-weight: 400;
}
.pagination > li > a:hover {
background-color: #e6ae03;
border-color: #e6ae03;
color: #fff;
}
.pagination.margin li a {
border-radius: 0;
margin: 0 2px;
}
.sprw-pagination li {
float: left;
}
.sprw-pagination li a {
border: 1px solid #e5e5e5;
border-radius: 4px;
color: #777777;
font-weight: 400;
display: block;
line-height: normal;
margin: 0 2px;
padding: 5px 9px;
}
.sprw-pagination li a:hover {
background-color: #e6ae03;
border-color: #e6ae03;
color: #fff;
}
.sprw-pagination.dark li:first-child a,
.sprw-pagination.dark li:last-child a {
background-color: #333333;
color: #fff;
}
.sprw-pagination.dark li:first-child a:hover,
.sprw-pagination.dark li:last-child a:hover {
background-color: #e6ae03;
}
.sprw-pagination.dark li a {
border: 0;
color: #333333;
}
.sprw-pagination.dark li a:hover {
background-color: #333333;
color: #fff;
}
.sprw-pagination.dark .active a {
background-color: #e6ae03;
color: #fff;
}
/*==============================================
Socials
===============================================*/
.sprw-social li {
float: left;
}
.sprw-social li a {
background-color: #ebeff0;
color: #777;
display: block;
font-size: 14px;
height: 40px;
line-height: 42px;
margin: 2px;
text-align: center;
width: 40px;
overflow: hidden;
position: relative;
z-index: 0;
}
.sprw-social li a:before {
background-color: #e6ae03;
bottom: 0;
content: "";
height: 100%;
left: 0;
position: absolute;
width: 100%;
z-index: -1;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: all 400ms cubic-bezier(0.77, 0, 0.175, 1) 0s;
-moz-transition: all 400ms cubic-bezier(0.77, 0, 0.175, 1) 0s;
-ms-transition: all 400ms cubic-bezier(0.77, 0, 0.175, 1) 0s;
-o-transition: all 400ms cubic-bezier(0.77, 0, 0.175, 1) 0s;
}
.sprw-social li a:hover {
color: #fff;
}
.sprw-social li a:hover:before {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
.sprw-social.round a {
border-radius: 30px;
}
.sprw-social.bordered a {
background-color: transparent;
border: 1px solid #e5e5e5;
}
.sprw-social.colored a {
color: #ffffff;
}
.sprw-social.colored a:before {
background-color: rgba(0, 0, 0, 0.18);
}
.sprw-social.center {
text-align: center;
}
.sprw-social.center li {
display: inline-block;
float: none;
}
.sprw-social.tp-social li a {
background-color: rgba(255, 255, 255, 0.01);
border: 2px solid rgba(255, 255, 255, 0.2);
color: #fff;
font-size: 17px;
width: 44px;
height: 44px;
margin: 0;
}
.sprw-social.tp-social li a:before {
content: none;
}
.sprw-social.tp-social li a:hover {
border-color: #fff;
}
.sprw-social .facebook a {
background-color: #3765a3;
}
.sprw-social .twitter a {
background-color: #55acee;
}
.sprw-social .gplus a {
background-color: #df4b38;
}
.sprw-social .linkedin a {
background-color: #0177b5;
}
.sprw-social .instagram a {
background-color: #125688;
}
.sprw-social .pinterest a {
background-color: #cb2027;
}
.sprw-social .dribbble a {
background-color: #ea4c89;
}
.sprw-social .rss a {
background-color: #ff9900;
}
/*==============================================
call to action
===============================================*/
.primary-bg {
background-color: #e6ae03;
}
.top-shape {
bottom: 0;
left: 0;
position: absolute;
right: 0;
z-index: -1;
-webkit-transform: translateY(calc(50% + -8px));
-moz-transform: translateY(calc(50% + -8px));
-ms-transform: translateY(calc(50% + -8px));
-o-transform: translateY(calc(50% + -8px));
transform: translateY(calc(50% + -8px));
}
.zigzag {
fill: #e6ae03;
stroke: none;
}
.cta-wide {
padding: 50px 0;
}
.cta-wide.section-full {
padding: 125px 0;
}
.cta-wide .cta {
padding: 0;
}
.cta-wide.no-border {
border: 0;
}
.cta-wide.cta-bdb {
border-bottom: 5px solid #e6ae03;
}
.cta-wide.cta-bdt {
border-top: 5px solid #e6ae03;
}
.cta-lg {
padding: 80px 0 70px;
}
.cta-lg .cta h2 {
color: #fff;
font-family: "Raleway", sans-serif;
font-size: 42px;
font-weight: 100;
}
.cta-lg .cta .btn {
margin-top: 42px;
}
.cta-gray {
background-color: #e8e8e8;
border: 0 none;
font-family: "Poiret One", cursive;
}
.cta-gray h3 {
color: #333333;
font-size: 36px;
margin-bottom: 30px;
}
.cta-gray .btn {
color: #333333;
font-size: 18px;
height: 46px;
line-height: 43px;
padding: 0 49px;
text-transform: none;
}
.primary {
color: #e6ae03;
}
.semibold {
font-weight: 600;
}
.cta {
padding: 25px 40px;
}
.cta.border {
border: 1px solid #e5e5e5;
}
.cta.radius {
border-radius: 5px;
}
.cta-icon {
padding-right: 30px;
}
.cta-icon span {
background-color: #e6ae03;
border-radius: 50%;
color: #ffffff;
display: block;
font-size: 28px;
height: 90px;
line-height: 90px;
text-align: center;
width: 90px;
}
.cta-text {
padding-right: 30px;
}
.cta-text h3 {
color: #333333;
}
.cta-text p {
line-height: 24px;
margin: 10px 0 0;
}
/*==============================================
widgets
===============================================*/
.widget.style2 .widget-list li > a {
border-bottom: 1px solid #e5e5e5;
color: #777777;
display: block;
font-weight: 400;
height: 50px;
line-height: 50px;
}
.widget.style2 .widget-list li > a:hover {
color: #e6ae03;
}
.widget.style2 .widget-list li:last-child a {
border-bottom: 0;
}
.widget.style2 .widget-list li ul {
list-style: outside none none;
padding: 0;
display: none;
}
.widget.style2 .widget-list li ul li a {
position: relative;
}
.widget.style2 .widget-list li ul li a:before {
color: #e6ae03;
content: "\f105";
display: inline-block;
font-family: fontAwesome;
padding: 0 15px 0 20px;
}
.widget.style2 .icon-right i {
color: #e6ae03;
float: right;
line-height: 50px;
font-style: normal;
}
.widget.style2 .icon-left i {
color: #e6ae03;
float: none;
margin-right: 8px;
}
.widget.style2 .post-head {
font-size: 13px;
font-weight: 400;
line-height: normal;
margin-bottom: 10px;
}
.widget.type-4 li a {
color: #999;
}
.widget.type-4 li a:hover {
color: #e6ae03;
}
.widget.type-4 .textwidget h4 {
color: #999999;
font-size: 16px;
margin-bottom: 12px;
}
.widget.type-4 .textwidget address {
color: #333333;
}
.widget.type-4 .readmore {
display: inline-block;
margin-top: 15px;
}
.widget.type-4 .readmore i {
font-size: 16px;
margin-right: 8px;
}
.widget-title {
background-color: #eeeeee;
border-radius: 4px;
color: #777;
font-size: 14px;
font-weight: 700;
margin-bottom: 30px;
padding: 13px 0;
text-align: center;
text-transform: uppercase;
}
.widget-title.style2 {
background-color: transparent;
border-radius: 0;
color: #333333;
font-size: 18px;
font-weight: 400;
line-height: 26px;
margin: 0 0 20px;
padding: 0 0 0 24px;
position: relative;
text-align: left;
text-transform: none;
}
.widget-title.style2:before,
.widget-title.style2:after {
background-color: #e6ae03;
content: "";
height: 14px;
left: 0;
margin: -7px 0 0;
position: absolute;
top: 50%;
width: 14px;
}
.widget-title.style2:after {
background-color: #bf9002;
height: 7px;
margin-top: -7px;
}
.widget-title.style3 {
background-color: transparent;
color: #333333;
font-size: 18px;
margin: 0 0 30px;
padding: 0;
position: relative;
text-align: left;
text-transform: none;
}
.widget-title.style3:before {
background-color: #e6ae03;
bottom: -10px;
content: "";
height: 3px;
left: 2px;
position: absolute;
width: 20px;
}
.widget-title.type-4 {
background-color: transparent;
color: #333333;
font-family: "Merriweather", serif;
font-size: 18px;
margin-bottom: 10px;
text-align: left;
}
.widget-title.type-4 + .textwidget {
font-family: "Open Sans", sans-serif;
font-weight: 400;
color: #555;
}
.tag-cloud.style2 a,
.tag-cloud.style3 a {
background-color: #ecf0f1;
border: 0 none;
color: #333;
font-weight: 400;
height: 30px;
line-height: 30px;
padding: 0 12px;
text-transform: none;
}
.tag-cloud.style2 a:hover,
.tag-cloud.style3 a:hover {
background-color: #e6ae03;
color: #fff;
}
.tag-cloud.style3 a {
background-color: transparent;
border: 1px solid #ccc;
line-height: 28px;
}
.tag-cloud.style3 a:hover {
border-color: #e6ae03;
}
.twitter-widget ul {
list-style: outside none none;
margin: 0;
padding: 0;
}
.twitter-widget li {
border-bottom: 1px solid #e5e5e5;
margin-bottom: 20px;
padding-bottom: 22px;
}
.twitter-widget li:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: 0;
}
.twitter-widget .tweet-head {
padding-right: 15px;
padding-top: 2px;
}
.twitter-widget .tweet-head > span {
color: #333333;
font-weight: 700;
margin-right: 10px;
}
.twitter-widget .avatar {
padding-right: 15px;
}
.tweet-feed-item {
font-weight: 400;
line-height: 24px;
vertical-align: top;
}
.tweet-feed-item > * {
vertical-align: top;
}
.comment-box {
border-bottom: 1px solid #e5e5e5;
margin-bottom: 20px;
padding-bottom: 22px;
}
.comment-box > p {
font-style: italic;
line-height: 22px;
margin-bottom: 5px;
}
.comment-box > a {
display: block;
font-size: 14px;
font-weight: 700;
}
.comment-box .tag {
font-weight: 600;
}
.comment-box .tag i {
margin-right: 5px;
}
.comment-head {
margin-bottom: 10px;
}
.comment-head .avatar {
float: left;
padding: 5px 15px 0 0;
}
.comment-head .avatar img {
width: 45px;
}
.comment-head > span a {
font-weight: 500;
margin-right: 5px;
}
.refresh-comments {
display: inline-block;
font-weight: 500;
}
.refresh-comments i {
margin-right: 5px;
}
.link-dark {
color: #333333;
}
.link-dark:hover {
color: #e6ae03;
}
.link-white {
color: #fff;
}
.link-white:hover {
color: #e6ae03;
}
.price-range-slider .ui-slider {
background-color: #fff;
background-image: none;
border-color: #e5e5e5;
border-radius: 5px;
height: 6px;
margin-bottom: 25px;
}
.price-range-slider .ui-slider-range {
background-color: #ecf0f1;
background-image: none;
margin-left: -3px;
}
.price-range-slider .ui-slider-handle {
background-color: #e6ae03;
background-image: none;
border: 0 none;
border-radius: 50px;
height: 14px;
margin-top: -7px;
top: 50%;
width: 14px;
}
.price-range-slider label {
font-weight: 400;
}
.price-range-slider input {
border: 0 none;
color: #333333;
font-weight: 600;
padding: 0;
text-align: right;
}
.price-range-slider .fliter-now {
background-color: #e6ae03;
border-radius: 3px;
color: #fff;
display: inline-block;
font-weight: 700;
height: 30px;
line-height: 32px;
padding: 0 7px;
}
.price-range-slider .price-info {
border: 1px solid #e5e5e5;
font-weight: 400;
height: 40px;
line-height: 39px;
margin-top: 20px;
padding: 0 20px;
position: relative;
}
.price-range-slider .price-info b {
color: #333333;
}
.price-range-slider .price-info span {
background-color: #e6ae03;
border-radius: 0 3px 3px 0;
color: #fff;
display: inline-block;
height: 40px;
position: absolute;
right: -1px;
text-align: center;
top: -1px;
width: 40px;
}
/*==============================================
Gallery
===============================================*/
.thumbnail-carousel .item {
cursor: pointer;
}
#gallery-thumb .item {
position: relative;
cursor: pointer;
}
.item-details {
font-weight: 400;
margin-top: 30px;
line-height: 24px;
}
.item-details h4 {
color: #333333;
font-weight: 500;
margin-bottom: 4px;
}
.item-details span {
color: #333333;
display: inline-block;
margin-bottom: 5px;
}
.item-details p {
margin-bottom: 0;
}
.floating-caption .item-details {
background-color: rgba(68, 68, 68, 0.8);
bottom: 0;
color: #fff;
left: 0;
margin: 0;
padding: 30px;
position: absolute;
right: 0;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
.floating-caption .item-details h4 {
color: #fff;
font-size: 20px;
margin-bottom: 15px;
}
.floating-caption .item:hover .item-details {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
.bp-horizontal {
border: 1px solid #e5e5e5;
font-weight: 400;
line-height: 24px;
margin-bottom: 30px;
}
.bp-horizontal:last-child {
margin-bottom: 0;
}
.bp-horizontal .tablecell {
position: relative;
vertical-align: top;
}
.bp-horizontal .bp-media {
margin-right: 20px;
position: relative;
}
.bp-horizontal .bp-media .overlay {
background-color: #e6ae03;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 0;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.bp-horizontal .bp-media .overlay:after {
border-color: transparent transparent transparent #e6ae03;
border-style: solid;
border-width: 12px 9px;
content: "";
position: absolute;
right: -18px;
top: 50%;
-webkit-transform: translateY(-50%) scaleX(0);
-moz-transform: translateY(-50%) scaleX(0);
-ms-transform: translateY(-50%) scaleX(0);
-o-transform: translateY(-50%) scaleX(0);
transform: translateY(-50%) scaleX(0);
-webkit-transform-origin: 0 0 0;
-moz-transform-origin: 0 0 0;
-ms-transform-origin: 0 0 0;
-o-transform-origin: 0 0 0;
transform-origin: 0 0 0;
-webkit-transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
-moz-transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
-ms-transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
-o-transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
}
.bp-horizontal .bp-media .hover {
background-color: #fff;
border-radius: 50%;
font-size: 16px;
height: 60px;
left: 50%;
line-height: 61px;
margin: -30px 0 0 -30px;
position: absolute;
text-align: center;
top: 50%;
width: 60px;
-webkit-transform: scale(0) translateZ(0px);
-moz-transform: scale(0) translateZ(0px);
-ms-transform: scale(0) translateZ(0px);
-o-transform: scale(0) translateZ(0px);
transform: scale(0) translateZ(0px);
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.bp-horizontal .bp-media:hover .overlay {
width: 100%;
}
.bp-horizontal .bp-media:hover .overlay:after {
-webkit-transform: translateY(-50%) scaleX(1);
-moz-transform: translateY(-50%) scaleX(1);
-ms-transform: translateY(-50%) scaleX(1);
-o-transform: translateY(-50%) scaleX(1);
transform: translateY(-50%) scaleX(1);
}
.bp-horizontal .bp-media:hover .hover {
-webkit-transform: scale(1) translateZ(0px);
-moz-transform: scale(1) translateZ(0px);
-ms-transform: scale(1) translateZ(0px);
-o-transform: scale(1) translateZ(0px);
transform: scale(1) translateZ(0px);
}
.bp-horizontal .bp-title {
font-weight: 500;
margin: 15px 0;
}
.bp-horizontal p {
margin: 0 0 15px;
}
.bp-horizontal .bp-meta {
background-color: #eeeeee;
border-top: 1px solid #e5e5e5;
bottom: 0;
left: -20px;
line-height: normal;
position: absolute;
right: 0;
}
.bp-horizontal .bp-meta span {
border-right: 1px solid #e5e5e5;
display: inline-block;
line-height: normal;
padding: 10px 10px 8px 20px;
}
.bp-horizontal .bp-meta span:last-child {
border-right: 0;
}
/*==============================================
Content Modal
===============================================*/
.sprw-modal {
position: relative;
margin: 0 auto;
}
.sprw-modal.mid {
max-width: 750px;
width: 100%;
}
.sprw-modal.bgwhite {
background-color: #fff;
}
.sprw-modal .mfp-close {
color: #fff;
height: auto;
line-height: 15px;
top: -20px;
width: auto;
}
.sprw-modal-text {
line-height: 24px;
padding: 30px;
}
.sprw-modal-text h4 {
color: #333333;
font-weight: 500;
margin-bottom: 15px;
}
.sprw-modal-text p {
margin: 0;
}
.subs-form {
padding: 50px 20px 30px;
text-align: center;
}
.subs-form h2 {
color: #333333;
font-size: 50px;
font-weight: 900;
margin-bottom: 15px;
text-transform: uppercase;
}
.subs-form h3 {
color: #333333;
font-size: 30px;
font-weight: 300;
}
.subs-form p {
font-size: 16px;
}
.subs-form form {
background-color: #e6ae03;
display: -webkit-flex;
display: flex;
margin: 70px -20px 20px;
padding: 40px;
}
.subs-form input {
border: 0 none;
height: 70px;
}
.subs-form input[type="email"] {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.subs-form input[type="submit"] {
background-color: #2c3e50;
border: 0 none;
border-radius: 0 4px 5px 0;
color: #fff;
font-size: 16px;
font-weight: 600;
padding: 0 40px;
}
.newsletter.one {
display: -webkit-flex;
display: -ms-flex;
display: flex;
}
.newsletter.one .input-field {
border-color: #ccc;
border-radius: 3px 0 0 3px;
float: left;
font-size: 13px;
font-weight: 400;
height: 40px;
letter-spacing: 0.5px;
width: -webkit-calc(100% - 50px);
width: calc(100% - 50px);
}
.newsletter.one .nl-sub {
background-color: transparent;
border: 1px solid #ccc;
border-radius: 0 3px 3px 0;
color: #333;
height: 40px;
left: -1px;
padding: 0;
position: relative;
width: 50px;
}
.newsletter2 .form-field {
height: 80px;
color: #999;
font-style: italic;
font-size: 18px;
font-weight: 400;
}
.newsletter2 .field-with-icon .form-field {
padding: 0 0 0 85px;
}
.newsletter2 .field-with-icon i {
font-size: 36px;
}
.newsletter2 .submit {
background-color: #fff;
padding: 0 13px;
}
/*==============================================
Magnific Popup
===============================================*/
/* ====== Zoom effect ====== */
.mfp-zoom-in {
/* start state */
/* animate in */
/* animate out */
}
.mfp-zoom-in .mfp-with-anim {
opacity: 0;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
}
.mfp-zoom-in.mfp-bg {
opacity: 0;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.mfp-zoom-in.mfp-ready .mfp-with-anim {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.mfp-zoom-in.mfp-ready.mfp-bg {
opacity: 0.8;
}
.mfp-zoom-in.mfp-removing .mfp-with-anim {
opacity: 0;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
}
.mfp-zoom-in.mfp-removing.mfp-bg {
opacity: 0;
}
/*==============================================
spacing
===============================================*/
.mt10 {
margin-top: 10px;
}
.mt15 {
margin-top: 15px;
}
.mt20 {
margin-top: 20px;
}
.mt30 {
margin-top: 30px;
}
.mt40 {
margin-top: 40px;
}
.mt50 {
margin-top: 50px;
}
.mt60 {
margin-top: 50px;
}
.mt70 {
margin-top: 70px;
}
.mt80 {
margin-top: 80px;
}
.mt90 {
margin-top: 90px;
}
.mt100 {
margin-top: 100px;
}
.mb10 {
margin-bottom: 10px;
}
.mb15 {
margin-bottom: 15px;
}
.mb20 {
margin-bottom: 20px;
}
.mb30 {
margin-bottom: 30px;
}
.mb40 {
margin-bottom: 40px;
}
.mb50 {
margin-bottom: 50px;
}
.mb60 {
margin-bottom: 60px;
}
.mb70 {
margin-bottom: 70px;
}
.mb80 {
margin-bottom: 80px;
}
.mb90 {
margin-bottom: 90px;
}
.mb100 {
margin-bottom: 100px;
}
.mr5 {
margin-right: 5px;
}
.mr10 {
margin-right: 10px;
}
.mr15 {
margin-right: 15px;
}
.ml5 {
margin-left: 5px;
}
.ml10 {
margin-left: 10px;
}
.ml15 {
margin-left: 15px;
}