/*------------------------------------------------------------------
[Style Layout Sheet For "The Character - One Pager Templates for Professionals in HTML 5"]

*  Basic Common CSS for HTML Tags(like:- html, body, div, span, p, a, h1 and many others)
*  Fonts
1. Body
2. Preloader
3. Demo 1 Page CSS
    3.1 Header CSS
    3.2 Banner CSS
    3.3 Quote CSS
    3.4 Experience CSS
    3.5 Expertise CSS
    3.6 Ventures CSS
    3.7 Awwards CSS
    3.8 Showcase CSS
    3.9 Value Share CSS
    3.10 Contact CSS
    3.11 Feedback CSS
    3.12 Footer CSS

4. Demo 2 Page CSS
    4.1 Body CSS
    4.2 Header CSS
    4.3 Banner CSS
    4.4 Quote CSS
    4.5 Author CSS
    4.6 Found CSS
    4.7 Social CSS
    4.8 Benefits CSS
    4.9 Showcase CSS
    4.10 Pricing CSS
    4.11 FAQ CSS
    4.12 Contact CSS
    4.13 Client CSS
    4.14 Footer CSS

5. Demo 3 Page CSS
    5.1 Body CSS
    5.2 Header CSS
    5.3 Banner CSS
    5.4 Quote CSS
    5.5 Why CSS
    5.6 Benefits CSS
    5.7 Process CSS
    5.8 Features CSS
    5.9 Showcase CSS
    5.10 FAQ CSS
    5.11 Contact CSS
    5.12 Client CSS
    5.13 Footer CSS

6. Demo 4 Page CSS
    6.1 Body CSS
    6.2 Header CSS
    6.3 Banner CSS
    6.4 Current Position CSS
    6.5 Dream CSS
    6.6 Awards CSS
    6.7 Patent CSS
    6.8 Showcase CSS
    6.9 Blog CSS
    6.10 Contact CSS
    6.11 Footer CSS

7. Style Selector CSS

8. Color Switcher CSS 
    8.1 Color Switcher CSS for Demo 1
    8.2 Color Switcher CSS for Demo 2
    8.3 Color Switcher CSS for Demo 3
    8.4 Color Switcher CSS for Demo 4

-------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    font-weight: 400;
    margin: 0;
    padding: 0;
}
ul li {
    list-style-type: none;
}
html {
    width: 100%;
    height: 100%;
}
a, a:hover {
    text-decoration: none;
    outline: 0;
}
img {
    max-width: 100%;
    -webkit-user-drag: none;
}
button:focus {
    outline: 0;
}
body {
    font-family: Flexo-Regular, Flexo-Demi, Lora-Regular, sans-serif;
    background-color: #f5f7f6;
    float: left;
    width: 100%;
    color: #000;
    margin: 0;
    font-size: 16px;
}
@font-face {
    font-family: Flexo-Bold;
    src: url(../css/fonts/Flexo-Bold.eot);
    src: url(../css/fonts/Flexo-Bold.woff) format('woff'), url(../css/fonts/Flexo-Bold.ttf) format('truetype'), url(../css/fonts/Flexo-Bold.svg) format('svg');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: Flexo-Demi;
    src: url(../css/fonts/Flexo-Demi.eot);
    src: url(../css/fonts/Flexo-Demi.woff) format('woff'), url(../css/fonts/Flexo-Demi.ttf) format('truetype'), url(../css/fonts/Flexo-Demi.svg) format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: Flexo-Regular;
    src: url(../css/fonts/Flexo-Regular.eot);
    src: url(../css/fonts/Flexo-Regular.woff) format('woff'), url(../css/fonts/Flexo-Regular.ttf) format('truetype'), url(../css/fonts/Flexo-Regular.svg) format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: Lora-Regular;
    src: url(../css/fonts/Lora-Regular.eot);
    src: url(../css/fonts/Lora-Regular.woff) format('woff'), url(../css/fonts/Lora-Regular.ttf) format('truetype'), url(../css/fonts/Lora-Regular.svg) format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: Mondays;
    src: url(../css/fonts/Mondays.eot);
    src: url(../css/fonts/Mondays.woff) format('woff'), url(../css/fonts/Mondays.ttf) format('truetype'), url(../css/fonts/Mondays.svg) format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: icomoon;
    src: url(fonts/icomoon.eot?2z3dux);
    src: url(fonts/icomoon.eot?2z3dux#iefix) format('embedded-opentype'), url(fonts/icomoon.ttf?2z3dux) format('truetype'), url(fonts/icomoon.woff?2z3dux) format('woff'), url(fonts/icomoon.svg?2z3dux#icomoon) format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'Lora-Italic';
    src: url('../css/fonts/Lora-Italic.eot');
    src: url('../css/fonts/Lora-Italic.woff') format('woff'), url('../css/fonts/Lora-Italic.ttf') format('truetype'), url('../css/fonts/Lora-Italic.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'BwGlennSans-Regular';
    src: url('../css/fonts/BwGlennSans-Regular.eot');
    src: url('../css/fonts/BwGlennSans-Regular.woff') format('woff'), url('../css/fonts/BwGlennSans-Regular.ttf') format('truetype'), url('../css/fonts/BwGlennSans-Regular.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'BwGlennSans-Medium';
    src: url('../css/fonts/BwGlennSans-Medium.eot');
    src: url('../css/fonts/BwGlennSans-Medium.woff') format('woff'), url('../css/fonts/BwGlennSans-Medium.ttf') format('truetype'), url('../css/fonts/BwGlennSans-Medium.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'BwGlennSans-Bold';
    src: url('../css/fonts/BwGlennSans-Bold.eot');
    src: url('../css/fonts/BwGlennSans-Bold.woff') format('woff'), url('../css/fonts/BwGlennSans-Bold.ttf') format('truetype'), url('../css/fonts/BwGlennSans-Bold.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'BwGlennSans-ExtraBold';
    src: url('../css/fonts/BwGlennSans-ExtraBold.eot');
    src: url('../css/fonts/BwGlennSans-ExtraBold.woff') format('woff'), url('../css/fonts/BwGlennSans-ExtraBold.ttf') format('truetype'), url('../css/fonts/BwGlennSans-ExtraBold.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'MisterLondonScript-Regular';
    src: url('../css/fonts/MisterLondonScript-Regular.eot');
    src: url('../css/fonts/MisterLondonScript-Regular.woff') format('woff'), url('../css/fonts/MisterLondonScript-Regular.ttf') format('truetype'), url('../css/fonts/MisterLondonScript-Regular.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
[class*=" icon-"], [class^=icon-] {
    font-family: icomoon!important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-logo:before {
    content: "\e914";
    color: #fff;
}
.icon-award:before {
    content: "\e900";
}
.icon-banner-mail:before {
    content: "\e90c";
}
.icon-icon-1:before {
    content: "\e903";
}
.icon-icon-2:before {
    content: "\e904";
}
.icon-icon-3:before {
    content: "\e905";
}
.icon-left-arrow:before {
    content: "\e907";
}
.icon-right-arrow:before {
    content: "\e909";
}
.icon-stars:before {
    content: "\e90b";
}
.icon-apple-logo:before {
    content: "\e90d";
}
.icon-client-icon:before {
    content: "\e90e";
}
.icon-home-icon:before {
    content: "\e90f";
}
.icon-award-icon:before {
    content: "\e910";
}
.icon-venture-icon:before {
    content: "\e911";
}
.icon-experience-icon:before {
    content: "\e912";
}
.icon-expertise-icon:before {
    content: "\e913";
}
.icon-facebook-icon:before {
    content: "\e901";
}
.icon-instagram-icon:before {
    content: "\e902";
}
.icon-mail-icon:before {
    content: "\e906";
}
.icon-skype-icon:before {
    content: "\e908";
}
.icon-whatsapp-icon:before {
    content: "\e90a";
}

/**-------------------------
2. PreLoader CSS Starts
-------------------------**/

.no-js #loader {
    display: none;
}
.js #loader {
    display: block;
    position: absolute;
    left: 100px;
    top: 0;
}
.se-pre-con {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: #000;
}
.loader {
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 25%;
    max-width: 100%;
    height: 100vh;
    align-items: center;
    justify-content: center;
    perspective: 500px;
    background-color: #000;
}
@keyframes rotate {
    0% {
        -webkit-transform: rotate(0) scale(1);
        transform: rotate(0) scale(1);
    }
    50% {
        -webkit-transform: rotate(180deg) scale(.6);
        transform: rotate(180deg) scale(.6);
    }
    100% {
        -webkit-transform: rotate(360deg) scale(1);
        transform: rotate(360deg) scale(1);
    }
}
.ball-clip-rotate-multiple {
    position: relative;
}
.ball-clip-rotate-multiple>div {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    position: absolute;
    left: -30px;
    top: -36px;
    border: 2px solid #fff;
    border-bottom-color: transparent;
    border-top-color: transparent;
    border-radius: 100%;
    height: 60px;
    width: 60px;
    -webkit-animation: rotate 1s 0s ease-in-out infinite;
    animation: rotate 1s 0s ease-in-out infinite;
}
.ball-clip-rotate-multiple>div:last-child {
    display: inline-block;
    top: -18px;
    left: -12px;
    width: 26px;
    height: 26px;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    border-color: #d7992e transparent #d7992e transparent;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
}

/**-------------------------
PreLoader CSS Ends
-------------------------**/

/* ------------------- 
3. DEMO 1 CSS PAGE STARTS 
------------------- */

/* --------------------------
3.1 Header Css Starts Here
----------------------------- */
.icon-logo {
    font-size: 40px;
    vertical-align: middle;
}
.navigation-wrap.header-wrap.scroll-on .icon-logo {
    font-size: 28px;
    vertical-align: top;
}
.navigation-wrap.header-wrap.scroll-on .navbar-brand {
    padding: 18px 24px;
}
.header-wrap {
    opacity: 1;
    transform: translateY(0);
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
.navigation-wrap.header-wrap.scroll-on {
    box-shadow: 0 5px 10px 0 rgba(138, 155, 165, .15);
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-color: #000!important;
}
.navbar-collapse {
    padding: 0 50px;
}
.navbar-brand {
    margin-right: 0;
    background: #d7992e;
    padding: 28px 36px;
    transition: all .3s ease-out;
}
.navigation-wrap.header-wrap.scroll-on .site-identity {
    font-size: 18px;
    line-height: 18px;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
    margin-top: 4px;
}
.header-wrap.scroll-on .navbar-brand img {
    height: 30px;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
.navigation-wrap {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
.navigation-wrap .navbar {
    padding: 0;
}
.navigation-wrap .navbar-brand img {
    height: 41px;
    width: auto;
    display: inline-block;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
.navigation-wrap .navbar-toggler {
    float: right;
    border: none;
    padding-right: 0;
}
.navigation-wrap .navbar-toggler:active,
.navigation-wrap .navbar-toggler:focus {
    outline: 0;
}
.navigation-wrap .navbar-light .navbar-toggler-icon {
    width: 24px;
    height: 17px;
    background-image: none;
    position: relative;
    border-bottom: 2px solid #d7992e;
    transition: all .3s linear;
}
.navigation-wrap .navbar-light .navbar-toggler-icon:after,
.navigation-wrap .navbar-light .navbar-toggler-icon:before {
    width: 24px;
    position: absolute;
    height: 2px;
    background-color: #d7992e;
    top: 0;
    left: 0;
    content: '';
    z-index: 2;
    transition: all .3s linear;
}
.navigation-wrap .navbar-light .navbar-toggler-icon:after {
    top: 8px;
}
.navigation-wrap .navbar-toggler[aria-expanded=true] .navbar-toggler-icon:after {
    transform: rotate(45deg);
}
.navigation-wrap .navbar-toggler[aria-expanded=true] .navbar-toggler-icon:before {
    transform: translateY(8px) rotate(-45deg);
}
.navigation-wrap .navbar-toggler[aria-expanded=true] .navbar-toggler-icon {
    border-color: transparent;
}
.nav-item .nav-link.active,
.navigation-wrap .nav-item:hover .nav-link {
    color: #d7992e!important;
}
.navigation-wrap .nav-link {
    position: relative;
    padding: 5px 0!important;
    display: inline-block;
    font-family: Flexo-Regular;
    line-height: 24px;
    color: #fff!important;
    font-weight: 500;
    transition: all .2s linear;
}
.navigation-wrap .nav-item {
    position: relative;
    transition: all .2s linear;
}
.navigation-wrap.bg-light {
    background-color: transparent!important;
}
.navigation-wrap .site-identity {
    color: #fff;
    display: inline-block;
    vertical-align: middle;
    font-family: Flexo-Demi;
    font-size: 24px;
    line-height: 26px;
    margin: 0 0 0 4px;
    text-transform: uppercase;
}
.show-sm {
    display: none;
}
.menu-icon {
    cursor: pointer;
    display: none;
}
.menu-icon-line {
    height: 3px;
    width: 28px;
    display: block;
    background-color: #d0953a;
    margin-bottom: 5px;
    transition: transform .2s ease, background-color .5s ease;
}
.menu-icon-line-right {
    float: right;
    margin-bottom: 0;
}
.nav-mobile {
    position: fixed;
    z-index: 99;
}
.nav-mobile:after,
.nav-mobile:before {
    content: "";
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: #f5f5f5;
    z-index: -1;
    transition: transform cubic-bezier(.77, 0, .175, 1) .8s;
    transform: translateX(0) translateY(-100%);
}
.nav-list {
    max-width: 80%;
    margin: 0 auto;
}
.nav-content .nav-link.active {
    background: #fff;
}
.nav-content .nav-link span img{
    width: 42px;
    vertical-align: -webkit-baseline-middle;
}
.nav-content .nav-link span .sm-nav-icon{
    width: 22px;
}
.nav-mobile:after {
    background: #f5f5f5;
    transition-delay: 0s;
}
.nav-mobile:before {
    transition-delay: .1s;
}
.nav-content {
    position: fixed;
    top: 50%;
    transform: translate(0, -50%);
    width: 100%;
    text-align: center;
    font-size: calc(2vw + 10px);
    font-weight: 200;
    height: 1px;
    overflow: hidden;
}
.nav-list-item {
    position: relative;
    display: inline-block;
    transition-delay: .8s;
    opacity: 0;
    transform: translate(0, 100%);
    transition: opacity .2s ease, transform .3s ease;
    max-width: 45%;
    width: 100%;
}
.nav-list-item:hover:before {
    width: 100%;
}
.nav-active .menu-icon-line {
    background-color: #858fa4;
    transform: translateX(0) rotate(-45deg);
    margin-bottom: 3px;
}
.nav-active .menu-icon-line-left {
    transform: translateX(1px) rotate(45deg);
    width: 14px;
}
.nav-active .menu-icon-line-right {
    transform: translateX(-2px) rotate(45deg);
    width: 14px;
}
.nav-active .nav-content {
    height: auto;
    margin-top: 40px;
}
.nav-active .nav-mobile:after,
.nav-active .nav-mobile:before {
    transform: translateX(0) translateY(0);
}
.nav-active .nav-mobile:after {
    transition-delay: .1s;
}
.nav-active .nav-mobile:before {
    transition-delay: 0s;
}
.nav-active .nav-list-item {
    opacity: 1;
    transform: translateX(0);
    transition: opacity .3s ease, transform .3s ease, color .3s ease;
}
.nav-active .nav-list-item:nth-child(0) {
    transition-delay: .5s;
}
.nav-active .nav-list-item:nth-child(1) {
    transition-delay: .6s;
}
.nav-active .nav-list-item:nth-child(2) {
    transition-delay: .7s;
}
.nav-active .nav-list-item:nth-child(3) {
    transition-delay: .8s;
}
.nav-active .nav-list-item:nth-child(4) {
    transition-delay: .9s;
}
.nav-active .nav-list-item:nth-child(5) {
    transition-delay: 1s;
}
.nav-active .nav-list-item:nth-child(6) {
    transition-delay: 1.1s;
}
.nav-active .nav-list-item:nth-child(7) {
    transition-delay: 1.2s;
}
.nav-active .nav-list-item:nth-child(8) {
    transition-delay: 1.3s;
}
.navigation-wrap.header-wrap.scroll-on .nav-active .menu-icon-line {
    background-color: #fff;
}
.mobile-navigation {
    display: none;
}
.nav-content span {
    display: block;
    margin-bottom: 12px;
}
.nav-content .nav-link {
    color: #858fa4;
    padding: 50px 10px;
    text-transform: uppercase;
    font-size: 15px;
    font-family: Flexo-Bold;
    transition: .48s;
    margin: 10px 4px;
}
.nav-content .nav-link:hover {
    background-color: #fff;
}
.nav-content .icon-expertise-icon,
.nav-content .icon-venture-icon {
    font-size: 40px;
}
.nav-content .icon-banner-mail {
    font-size: 28px;
}

/* --------------------------
Header Css Ends Here
----------------------------- */

/* --------------------------
3.2 Banner Css Starts Here
----------------------------- */

#home-wrapper .banner-area {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
#home-wrapper .banner-area .banner-content {
    z-index: 1;
    width: 100%;
    padding-top: 160px;
}
#home-wrapper .banner-video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    height: 84vh;
}
#home-wrapper .banner-content-area {
    position: relative;
    top: 40px;
}
#home-wrapper .video-wrapper-1 {
    background-image: url(../images/banner-bg.jpg);
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#home-wrapper .banner-color-overlay {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #000;
    width: 100%;
    height: 80vh;
}
#home-wrapper .banner-video-wrapper video {
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -o-object-fit: cover;
    object-fit: cover;
}
#home-wrapper .banner-image-wrapper img {
    transition: 1s;
    vertical-align: top;
}
#home-wrapper .banner-image-wrapper img:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
    transition: 1s;
}
#home-wrapper .banner-image-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
    box-shadow: 10px 50px 28px -40px #9c9191;
}
#home-wrapper .banner-text-wrapper h4 {
    font-family: Flexo-Demi;
    font-size: 16px;
    color: #d7992e;
    text-transform: uppercase;
}
#home-wrapper .banner-text-wrapper h1 {
    font-family: Flexo-Bold;
    font-size: 48px;
    color: #fff;
    margin-top: 20px;
}
#home-wrapper .banner-text-wrapper h1.varying-txt {
    margin-top: 0;
}
#home-wrapper .banner-text-wrapper {
    margin: 20px 0;
}
#home-wrapper .boxes-wrapper {
    margin-top: 40px;
}
#home-wrapper .main-box {
    margin: 20px auto;
    position: relative;
    width: fit-content;
}
#home-wrapper .main-box a {
    width: 330px;
    padding: 30px 10px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 16px;
    height: 240px;
}
#home-wrapper .main-box span {
    margin-bottom: 80px;
    display: block;
    font-size: 48px;
    color: #fff;
    transition: .48s;
}
#home-wrapper .main-box:hover span {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}
#home-wrapper .box-one {
    background-color: #d7992e;
    margin-bottom: 0;
    transition: .48s;
}
#home-wrapper .box-two {
    background-color: #3d4c71;
    transition: .48s;
}
#home-wrapper .box-three {
    background-color: #fff;
    transition: .48s;
    margin-bottom: 0;
}
#home-wrapper .box-text {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
}
#home-wrapper .box-text h5 {
    color: #fff;
    font-family: Flexo-Demi;
    font-size: 24px;
    line-height: 34px;
    text-transform: initial;
    margin: 10px;
    transition: .48s;
}
#home-wrapper .box-three .box-text h5 {
    color: #858fa4;
}
#home-wrapper .main-box .icon-banner-mail {
    color: #3d4c71;
}
#home-wrapper #videoModal {
    padding: 0!important;
}
#home-wrapper #videoModal .modal-dialog {
    max-width: 100%;
    margin: 0 auto;
    height: 100vh;
}
#home-wrapper #videoModal .modal-content {
    background-color: #000;
    border: none;
    height: 100%;
}
#home-wrapper #videoModal .modal-header {
    border-bottom: none;
}
#home-wrapper #videoModal .modal-header .close {
    margin: -1rem 2rem -1rem auto;
}
#home-wrapper #videoModal .close {
    font-size: 30px;
    text-shadow: none;
    opacity: 1;
    color: #fff;
    transition: .48s;
}
#home-wrapper #videoModal .modal-body {
    text-align: center;
}
#home-wrapper #videoModal video {
    width: 80%;
    height: 100%;
}
#home-wrapper .cd-words-wrapper {
    display: inline-block;
    position: relative;
    text-align: left;
}
#home-wrapper .cd-words-wrapper b {
    display: inline-block;
    position: absolute;
    white-space: nowrap;
    left: 0;
    top: 0;
    font-style: normal;
}
#home-wrapper .cd-words-wrapper i {
    font-style: normal;
}
#home-wrapper .cd-words-wrapper b.is-visible {
    position: relative;
}
#home-wrapper .no-js .cd-words-wrapper b {
    opacity: 0;
}
#home-wrapper .no-js .cd-words-wrapper b.is-visible {
    opacity: 1;
}
#home-wrapper .cd-headline.clip .cd-words-wrapper {
    overflow: hidden;
    vertical-align: top;
}
#home-wrapper .cd-headline.clip .cd-words-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background-color: #aebcb9;
}
#home-wrapper .cd-headline.clip b {
    opacity: 0;
}
#home-wrapper .cd-headline.clip b.is-visible {
    opacity: 1;
}
/* --------------------------
Banner Css Ends Here
----------------------------- */

/* --------------------------
3.3 Quote Css Starts Here
----------------------------- */

#home-wrapper .quote-wrapper {
    padding: 120px 0 0 0;
}
#home-wrapper .quote-text h4 {
    color: #858fa4;
    font-size: 32px;
    line-height: 50px;
    font-family: Lora-Regular;
    padding: 10px 0;
}
#home-wrapper .quote-image {
    margin: 12px 0;
}
#home-wrapper .experience-content, #home-wrapper .quote-content {
    max-width: 80%;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
#home-wrapper .quote-text h6 {
    color: #858fa4;
    font-family: Lora-Regular;
    font-size: 16px;
    padding: 10px 0;
    opacity: .6;
}
#home-wrapper .hr-line {
    width: 40px;
    border: .4px solid #858fa4;
    transform: rotate(90deg);
    margin: 30px auto;
    opacity: .5;
}
#home-wrapper .design-content {
    padding: 10px 0;
    max-width: 80%;
    width: 100%;
    margin: 0 auto;
}
#home-wrapper .design-content h3 {
    font-size: 24px;
    font-family: Flexo-Demi;
    line-height: 36px;
    color: #3d4c71;
}
#home-wrapper .design-image {
    margin: 50px 0 10px 0;
}

/* --------------------------
Quote Css Ends Here
----------------------------- */

/* --------------------------
3.4 Experience Css Starts Here
----------------------------- */

#home-wrapper .experience-wrapper {
    padding: 74px 0 80px 0;
}
#home-wrapper .cursive-heading {
    font-family: Mondays;
    font-size: 120px;
    color: #858fa4;
    opacity: .1;
    position: relative;
    z-index: 2;
    line-height: 1.6;
}
#home-wrapper .heading {
    color: #566383;
    font-size: 48px;
    line-height: 48px;
    font-family: Flexo-Bold;
    text-transform: uppercase;
    margin-top: -90px;
    position: relative;
    z-index: 3;
}
#home-wrapper .sub-heading {
    color: #858fa4;
    font-family: Flexo-Bold;
    font-size: 24px;
    line-height: 36px;
    padding: 30px 0;
    max-width: 80%;
    margin: 0 auto;
    width: 100%;
}
#home-wrapper .experience-content h4 {
    color: #d0953a;
    font-size: 32px;
    font-family: Flexo-Bold;
    line-height: 48px;
}
#home-wrapper .experience-content h4 span {
    text-transform: uppercase;
}
#home-wrapper .experience-sub-content {
    padding: 6px 0;
}
#home-wrapper .experience-sub-content p {
    padding: 16px 0;
    font-family: Flexo-Regular;
    color: #858fa4;
    font-size: 24px;
    line-height: 36px;
    max-width: 80%;
    margin: 0 auto;
    width: 100%;
}
#home-wrapper .experience-sub-content p strong {
    font-family: Flexo-Bold;
}
#home-wrapper .deserve-content {
    padding: 30px 0 50px 0;
}
#home-wrapper .deserve-text h5 {
    color: #dc6810;
    font-size: 32px;
    font-family: Flexo-Demi;
    text-align: right;
}
.deserve-button a {
    font-size: 32px;
    font-family: Flexo-Bold;
    line-height: 42px;
    background-color: #dc6810;
    color: #fff;
    text-transform: capitalize;
    padding: 20px 40px 18px 40px;
    border-radius: 50px;
    display: inline-block;
    transition: .48s;
}
#home-wrapper .awards-wrapper .deserve-button,
#home-wrapper .experience-wrapper .deserve-button {
    text-align: left;
}
.deserve-button a:hover {
    text-decoration: none;
    background-color: #b3530a;
}
.start-btn .icon-right-arrow, #artist-wrapper .dream-btn .icon-right-arrow, #artist-wrapper .form-submit-btn .icon-right-arrow{
    font-size: 22px;
    margin-left: 10px;
    position: relative;
    left: 0;
    transition: .48s;
}
.start-btn:hover .icon-right-arrow, #artist-wrapper .dream-btn:hover .icon-right-arrow, #artist-wrapper .form-submit-btn:hover .icon-right-arrow {
    left: 6px;
    transition: all ease .48s;
}

/* --------------------------
Experience Css Ends Here
----------------------------- */


/* --------------------------
3.5 Expertise Css Starts Here
----------------------------- */

#home-wrapper .expertise-wrapper {
    padding: 80px 0;
    background: #fff;
    text-align: center;
}
#home-wrapper .expertise-content .sub-heading {
    max-width: 70%;
}
#home-wrapper .expertise-list {
    margin: 80px auto;
    max-width: 80%;
    width: 100%;
}
#home-wrapper .expertise-list-content {
    text-align: left;
}
#home-wrapper .expertise-list-content span {
    color: #d7992e;
    font-size: 16px;
    font-family: Flexo-Demi;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: block;
}
#home-wrapper .expertise-list-content h2 {
    color: #858fa4;
    font-size: 32px;
    line-height: 48px;
    font-family: Flexo-Bold;
}
#home-wrapper .expertise-list-content p {
    color: #858fa4;
    font-size: 16px;
    font-family: Flexo-Regular;
    line-height: 24px;
    max-width: 86%;
    width: 100%;
    margin: 0;
    padding: 16px 0;
}
#home-wrapper .expertise-button {
    margin: 14px 0;
}
#home-wrapper .expertise-button a {
    font-size: 16px;
    font-family: Flexo-Demi;
    color: #fff;
    background-color: #d0953a;
    padding: 10px 24px 7px 24px;
    display: inline-block;
    border-radius: 50px;
    line-height: 28px;
    transition: .48s;
}
#home-wrapper .expertise-button a:hover,
.submit-btn:hover {
    text-decoration: none;
    background-color: #a9782e;
}
#home-wrapper .expertise-quote h4 {
    color: #dc6810;
    font-size: 32px;
    line-height: 40px;
    font-family: Flexo-Demi;
    max-width: 70%;
    width: 100%;
    margin: 0 auto;
    padding: 30px 0 10px 0;
}
#home-wrapper .expertise-content .deserve-button {
    margin: 40px 0;
}
#home-wrapper .more-btn .icon-right-arrow,
.submit-btn .icon-right-arrow {
    display: inline-block;
    font-size: 12px;
    margin-left: 10px;
    position: relative;
    left: 0;
    transition: .48s;
    color: #fff;
    top: 1px;
}
#home-wrapper .more-btn:hover .icon-right-arrow,
.submit-btn:hover .icon-right-arrow {
    left: 6px;
    transition: all ease .48s;
}
#home-wrapper .expertise-slide {
    outline: 0;
}
#home-wrapper .expertise-graphic img {
    max-width: 75%;
    width: 100%;
}

/* --------------------------
Expertise Css Ends Here
----------------------------- */

/* --------------------------
3.6 Ventures Css Starts Here
----------------------------- */

#home-wrapper .ventures-wrapper {
    text-align: center;
    padding: 70px 0 70px 0;
}
#home-wrapper .ventures-content .sub-heading {
    max-width: 60%;
    padding: 40px 0;
}
#home-wrapper .venture-slide, .ventures-wrapper .slick-slide img {
    outline: 0;
}
#home-wrapper .ventures-wrapper .icon-left-arrow.slick-arrow {
    position: absolute;
    top: -15px;
    cursor: pointer;
    transition: .48s;
    color: #858fa4;
    margin: 0 -30px;
    font-size: 20px;
}
#home-wrapper .ventures-wrapper .icon-right-arrow.slick-arrow {
    position: absolute;
    top: -15px;
    color: #858fa4;
    transition: .48s;
    cursor: pointer;
    margin: 0 10px;
    font-size: 20px;
}
#home-wrapper .ventures-wrapper .icon-left-arrow.slick-arrow:hover,
#home-wrapper .ventures-wrapper .icon-right-arrow.slick-arrow:hover {
    color: #d0953a;
}
#home-wrapper .ventureSlider {
    padding: 30px 0 0 0;
}
#home-wrapper .venture-slide img {
    width: 100%;
}
#home-wrapper .ventures-wrapper .expertise-list-content p {
    max-width: 50%;
}
#home-wrapper .ventures-wrapper .icon-apple-logo {
    color: #fff;
    display: inline-block;
    margin-left: 14px;
}

/* --------------------------
Ventures Css Ends Here
----------------------------- */


/* --------------------------
3.7 Awwards Css Starts Here
----------------------------- */

#home-wrapper .awards-wrapper {
    text-align: center;
    padding: 70px 0 60px 0;
    background-color: #fff;
}
#home-wrapper .awards-tabs-wrapper {
    max-width: 70%;
    width: 100%;
    margin: 0 auto;
}
#home-wrapper .awards-wrapper .sub-heading {
    padding: 18px 0 18px 0;
}
#home-wrapper .awards-wrapper .deserve-content {
    padding: 30px 0 10px 0;
}
#home-wrapper #awardsSlider {
    padding: 30px 0 30px 0;
}
#home-wrapper #awardsSlider .carousel-indicators {
    top: 0;
    bottom: auto;
    position: relative;
}
#home-wrapper #awardsSlider .carousel-indicators li {
    text-indent: 1px;
    cursor: pointer;
    width: fit-content;
    background-color: transparent;
    background-clip: initial;
    border-top: none;
    border-bottom: none;
    opacity: 1;
    transition: opacity .6s ease;
    font-size: 100px;
    margin: 10px 14px;
    height: auto;
    color: #858fa4;
    transition: .48s;
}
#home-wrapper #awardsSlider .carousel-indicators .active,
#home-wrapper #awardsSlider .carousel-indicators li:hover {
    color: #d0953a;
}
#home-wrapper #awardsSlider .li-text {
    display: block;
    font-size: 12px;
    font-family: Flexo-Bold;
    padding: 10px 0 10px 0;
}
#home-wrapper #awardsSlider .carousel-item img {
    width: 72%;
}

/* --------------------------
Awwards Css Ends Here
----------------------------- */

/* --------------------------
3.8 Showcase Css Starts Here
----------------------------- */

#home-wrapper .showcase-wrapper {
    padding: 70px 0;
    text-align: center;
}
#home-wrapper .home-showcase-tabs .nav-tabs {
    border-bottom: none !important;
}
#home-wrapper .home-showcase-tabs .nav-tabs .nav-link {
    color: #556383 !important;
    border-left: none;
    padding: 10px 18px;
    margin: 20px 24px;
    font-size: 18px;
    font-family: 'Flexo-Demi';
    border-right: none;
    border-top: none;
    border-bottom: none;
}
#home-wrapper .nav-tabs .nav-item.show .nav-link, #home-wrapper .nav-tabs .nav-link.active {
    border-bottom: 1px solid #556383 !important;
    background-color: transparent;
    color: #556383 !important;
}
#home-wrapper .showcase-slider-feature .slider {
    margin: 0 auto;
}
#home-wrapper .showcase-slider-feature .slick-slide {
    margin: 0px;
    outline: none;
}
#home-wrapper .showcase-slider-feature .slider img {
    outline: none;
}
#home-wrapper .home-showcase-tabs {
    padding: 10px 0 50px 0;
}
#home-wrapper .slick-lightbox-slick-img{
    max-width: 90% !important;
    border-radius: 20px;
}
#home-wrapper .home-showcase-tabs .slick-slide img {
    display: block;
    outline: none !important;
    width: 100%;
    max-width: 250px;
    margin: 10px 14px;
    border-radius: 20px;
    -webkit-box-shadow: 0px 0px 8px 0px rgb(189, 185, 185);
    -moz-box-shadow: 0px 0px 8px 0px rgb(189, 185, 185);
    box-shadow: 0px 0px 8px 0px rgb(189, 185, 185);
}
#home-wrapper .slick-lightbox-slick-item {
    outline: none !important;
}
#home-wrapper .slick-prev, #home-wrapper .slick-next {
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 30px;
    height: 30px;
    margin-top: -10px;
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
#home-wrapper .slick-prev{
    background-image: url(../images/slick-left-arrow.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
#home-wrapper .slick-next{
    background-image: url(../images/slick-right-arrow.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
#home-wrapper .slick-lightbox-close:before {
    font-size: 30px;
}
#home-wrapper .showcase-content .sub-heading {
    max-width: 50%;
    padding: 30px 0 20px 0;
}


/* --------------------------
Showcase Css Ends Here
----------------------------- */

/* --------------------------
3.9 Value Share Css Starts Here
----------------------------- */

#home-wrapper .value-share-wrapper {
    text-align: center;
    padding: 100px 0 100px 0;
    background-color: #fff;
}
#home-wrapper .value-share-video {
    padding: 60px 0 0 0;
}
#home-wrapper .value-share-wrapper .sub-heading {
    max-width: 60%;
    padding: 60px 0 26px 0;
}
#home-wrapper .value-box img {
    box-shadow: -5px 10px 30px -15px #525252;
    max-width: 55%;
    width: 100%;
}
#home-wrapper .feedback-box, .value-box {
    position: relative;
}
#home-wrapper .play-value-video {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
}
#home-wrapper .play-value-video a {
    display: inline-block;
}
#home-wrapper .play-value-video .icon-icon-1 {
    color: #fff;
    font-size: 80px;
    display: inline-block;
}

/* --------------------------
Value Share Css Ends Here
----------------------------- */

/* --------------------------
6.10 Contact Css Starts Here
----------------------------- */

#home-wrapper .contact-wrapper {
    padding: 100px 0 100px 0;
}
#home-wrapper .contact-form {
    text-align: left;
    max-width: 70%;
    width: 100%;
    margin: 50px auto 0 auto;
}
#home-wrapper .contact-heading {
    text-align: center;
}
#home-wrapper .input-filed {
    position: relative;
    margin: 18px auto;
    width: 100%;
}
#home-wrapper .input-filed .label {
    position: absolute;
    top: 16px;
    left: 0;
    font-size: 20px;
    color: #858fa4;
    transform-origin: 0 0;
    transition: all 0.2s ease;
    font-family: 'Flexo-Regular';
}
#home-wrapper .input-filed .borderLabel {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 0;
    transition: all 0.15s ease;
}
#home-wrapper .input-filed input ,  #home-wrapper .input-filed textarea{
    -webkit-appearance: none;
    width: 100%;
    border: 0;
    font-family: inherit;
    padding: 12px 0;
    height: 48px;
    font-size: 18px;
    border-bottom: 2px solid #c0c5d0;
    background: none;
    border-radius: 0;
    color: #858fa4;
    transition: all 0.15s ease;
}
#home-wrapper .input-filed textarea{
    min-height: 100px;
}
#home-wrapper .input-filed input:not(:placeholder-shown) + span, #home-wrapper .input-filed textarea:not(:placeholder-shown) + span {
    color: #858fa4;
    transform: translateY(-26px) scale(0.75);
}
#home-wrapper .input-filed input:focus, #home-wrapper .input-filed textarea:focus {
    background: none;
    outline: none;
    border-bottom: 2px solid #d7992f;
}
#home-wrapper .input-filed input:focus + span, #home-wrapper .input-filed textarea:focus + span {
    color: #d7992f;
    transform: translateY(-26px) scale(0.75);
}
#home-wrapper .input-filed input:focus + span + .borderLabel {
    transform: scaleX(1);
    border-bottom: 2px solid #d7992f;
}
#home-wrapper .contact-form .deserve-button{
    margin: 40px 0 0 0;
}
#home-wrapper .materialSelect {
    position: relative;
}
#home-wrapper .materialSelect.error .select:not(.isOpen) {
    border: 1px solid #c0c5d0 !important;
}
#home-wrapper .materialSelect.error .message {
    display: block;
}
#home-wrapper .materialSelect.inline {
    float: none !important;
    display: inline-block;
    z-index: 0;
    min-width: 100%;
}
#home-wrapper .materialSelect.inline .select {
    transform: translate(0, 0);
    top: 0;
    left: 0;
    margin: 0;
    transition: all 0.2s !important;
    width: 100%;
}
#home-wrapper .materialSelect.inline .select.isOpen {
    transform: translate(0, -50%);
    top: 50%;
}
#home-wrapper .materialSelect:not(.inline) {
    width: 100%;
}
#home-wrapper .materialSelect:not(.inline) .select {
    width: 100%;
    margin-left: 50%;
    transform: translate(-50%, 0);
}
#home-wrapper .materialSelect .select {
    position: absolute;
    margin: 0;
    padding: 0;
    top: -1px;
    user-select: none;
    width: 250px;
    text-align: center;
    margin: 0px auto;
    z-index: 9999;
    height: 48px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    margin-left: 0;
    transform: none;
    border-bottom: 2px solid #c0c5d0;
}
#home-wrapper .materialSelect .select:after {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #bbb;
    content: '';
    display: block;
    height: 0px;
    position: absolute;
    pointer-events: none;
    top: 19px;
    right: 10px;
    width: 0px;
}
#home-wrapper .materialSelect .select li {
    cursor: pointer;
    font-size: 20px;
    list-style: none;
    line-height: 48px;
    padding: 0 40px 0 0px;
    position: relative;
    overflow: hidden;
    text-align: left;
    color: #858fa4;
    font-family: 'Flexo-Regular';
}
#home-wrapper .materialSelect .select li[data-selected] {
    height: 48px;
}
#home-wrapper .materialSelect .select li:not([data-selected]) {
    height: 0px;
    opacity: 0;
}
#home-wrapper .materialSelect .select.isOpen {
    background-color: #fafafa;
    border-radius: 2px;
    box-shadow: 1px 2px 3px 1px rgba(0, 0, 0, 0.3);
    padding-bottom: 16px;
    top: -96px;
    height: 350px;
    z-index: 99999;
    color: #858fa4;
    border-bottom: 0;
}
#home-wrapper .materialSelect .select.isOpen:after {
    display: none;
}
#home-wrapper .materialSelect .select.isOpen:before {
    border-color: transparent !important;
}
#home-wrapper .materialSelect .select.isOpen li {
    height: 48px;
    opacity: 1;
    padding-left: 16px;
}
#home-wrapper .materialSelect .select.isOpen li:hover {
    background-color: #eee;
}
#home-wrapper .materialSelect .select.isOpen li:active {
    background-color: #dbdbdb;
}
#home-wrapper .materialSelect .select:not(.isOpen):active {
    box-shadow: 1px 2px 1px 0 rgba(0, 0, 0, 0.3);
}
#home-wrapper .materialSelect .select + .select:before {
    border-left: thin solid #c8c8c8;
    content: '';
    height: 32px;
    left: 0;
    position: absolute;
    top: 8px;
}

/* --------------------------
Contact Css Ends Here
----------------------------- */

/* --------------------------
3.11 Feedback Css Starts Here
----------------------------- */

#home-wrapper .feedback-wrapper {
    background-repeat: no-repeat;
    background-image: url(../images/feedback-bg.jpg);
    background-size: cover;
    background-position: center;
    padding: 130px 0;
    text-align: center;
    color: #858fa4;
}
#home-wrapper .feedback-content h2 {
    font-size: 48px;
    font-family: Flexo-Bold;
    line-height: 56px;
    text-transform: uppercase;
}
#home-wrapper .feedback-content p {
    font-size: 24px;
    font-family: Flexo-Demi;
    line-height: 36px;
    max-width: 60%;
    width: 100%;
    margin: 0 auto;
    padding: 40px 0;
}
#home-wrapper .ripple, #home-wrapper .ripple:after, #home-wrapper .ripple:before {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 70px;
    width: 70px;
    -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-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
    -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
    -ms-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
    -o-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
    -webkit-animation: ripple 3s infinite;
    -moz-animation: ripple 3s infinite;
    -ms-animation: ripple 3s infinite;
    -o-animation: ripple 3s infinite;
    animation: ripple 3s infinite;
}
@-webkit-keyframes ripple {
    70% {
        box-shadow: 0 0 0 70px rgba(255, 255, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}
@keyframes ripple {
    70% {
        box-shadow: 0 0 0 70px rgba(255, 255, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

/* --------------------------
Feedback Css Ends Here
----------------------------- */

/* --------------------------
3.12 Footer Css Starts Here
----------------------------- */

footer {
    background-color: #052336;
    padding: 150px 0 32px 0;
    margin-top: -250px;
    color: #858fa4;
}

.footer-rating {
    text-align: center;
    padding: 20px 0;
}
.rating-logo p {
    font-size: 24px;
    font-family: Flexo-Regular;
    line-height: 48px;
    padding: 16px 0;
}
.newsletter-wrapper {
    padding: 40px 0 40px 0;
}
.newsletter-sign {
    position: relative;
    padding: 10px 0;
}
.newsletter-sign .cursive-heading {
    margin-left: 20px;
    color: #1f394c;
    opacity: .4;
}
.footer-logo {
    margin-top: -50%;
    position: relative;
    z-index: 4;
}
.newsletter-logo p {
    font-size: 16px;
    font-family: Flexo-Regular;
    line-height: 26px;
    max-width: 85%;
    width: 100%;
    padding: 14px 0;
    color: #858fa4;
    position: relative;
    z-index: 4;
}
.newsletter-form-wrapper h3 {
    font-size: 24px;
    font-family: Flexo-Bold;
    line-height: 48px;
}
.newsletter-form-wrapper p {
    font-size: 16px;
    font-family: Flexo-Regular;
    line-height: 24px;
}
.input-field {
    background: #4f6471;
    padding: 16px 24px;
    color: #fff;
    border-radius: 50px;
    border: 1px solid #4f6471;
    width: 90%;
    display: inline-block;
    font-size: 16px;
    outline: 0;
}
.input-field:focus {
    box-shadow: 10px 0 20px 10px #0d354e;
}
.submit-btn {
    background-color: #d0953a;
    border: 1px solid #d0953a;
    color: #fff;
    font-size: 16px;
    outline: 0;
    font-family: Flexo-Demi;
    padding: 16px 30px;
    border-radius: 50px;
    margin-left: -120px;
    display: inline-block;
    transition: .48s;
}
.submit-btn:hover {
    border: 1px solid #a9782e;
}
.input-wrap {
    padding: 34px 0;
}
.address-wrapper {
    border-top: 1px solid #04395b;
    padding: 60px 0;
    border-bottom: 1px solid #04395b;
}
.address-content h4 {
    font-size: 24px;
    font-family: Flexo-Bold;
    line-height: 48px;
}
.address-content p,
.portfolio-wrapper p {
    font-size: 16px;
    font-family: Flexo-Regular;
    line-height: 28px;
}
.portfolio-wrapper p a {
    color: #858fa4;
    transition: .48s;
}
.portfolio-wrapper p a:hover {
    text-decoration: none;
    color: #d0953a !important;
}
.portfolio-wrapper p strong {
    font-family: Flexo-Bold;
}
.portfolio-wrapper p {
    padding: 4px 0;
}
.social-media li {
    display: inline-block;
    margin: 10px 10px 10px 0;
}
.social-media li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 39px;
    height: 39px;
    border-radius: 50%;
    color: #fff;
    transition: .8s;
    font-size: 25px;
}
.social-media li a:hover {
    text-decoration: none;
    transform: scale(1.2);
    color: #d19941 !important;
}
.copyright-wrapper {
    padding-top: 32px;
}
.rating-logo img {
    width: 6%;
}
.design-image img {
    width: 30%;
}
.newsletter-sign img {
    max-width: 32%;
    opacity: .7;
    width: 100%;
}

/* --------------------------
Footer Css Ends Here
----------------------------- */

/* ------------------- 
DEMO 1 CSS PAGE ENDS
------------------- */

/* ------------------- 
4. DEMO 2 CSS PAGE STARTS 
------------------- */

/* --------------------------
4.1 Body Css Starts Here
----------------------------- */

#smm-wrapper{
    background-color: #26186b;
}

/* --------------------------
Body Css Ends Here
----------------------------- */

/* --------------------------
4.2 Header Css Starts Here
----------------------------- */


/* --------------------------
Header Css Ends Here
----------------------------- */

/* --------------------------
4.3 Banner Css Starts Here
----------------------------- */

#smm-wrapper .smm-banner-wrapper {
    padding: 150px 0px 40px 0px;
    background-image: url(../images/smm-top-shadow.png);
    background-repeat: no-repeat;
    background-size: 80% 114%;
    background-position: top left;
}
#smm-wrapper .smm-banner-area {
    padding: 40px 0 40px 0;
}
#smm-wrapper .smm-banner-content {
    max-width: 90%;
    width: 100%;
}
#smm-wrapper .smm-banner-content h1 {
    font-size: 48px;
    font-family: 'Flexo-Bold';
    color: #fff;
    line-height: 56px;
}
#smm-wrapper .smm-banner-content p {
    font-size: 24px;
    color: #bdb6fb;
    line-height: 36px;
    margin: 20px 0;
}
#smm-wrapper .smm-banner-content p strong{
    font-family: 'Flexo-Bold';
}
#smm-wrapper .smm-banner-content .deserve-button{
    margin: 40px 0;
}
#smm-wrapper .smm-image-wrapper {
    text-align: right;
    max-width: 82%;
    width: 100%;
    margin: 0 auto;
}

/* --------------------------
Banner Css Ends Here
----------------------------- */

/* --------------------------
4.4 Quote Css Starts Here
----------------------------- */

#smm-wrapper .smm-quote-wrapper {
    padding: 70px 0;
}
#smm-wrapper .smm-quote-area {
    text-align: center;
}
#smm-wrapper .smm-quote-content {
    max-width: 75%;
    width: 100%;
    margin: 0 auto;
}
#smm-wrapper .smm-quote-content img{
    opacity: 0.9;
}
#smm-wrapper .smm-quote-content h3 {
    padding: 32px 0;
    color: #bdb6fb;
    opacity: 0.8;
    font-size: 32px;
    line-height: 50px;
    font-family: Lora-Regular;
}
#smm-wrapper .smm-quote-content h6 {
    color: #858fa4;
    font-family: Lora-Regular;
    font-size: 18px;
    padding: 0;
    opacity: .8;
}

/* --------------------------
Quote Css Ends Here
----------------------------- */

/* --------------------------
4.5 Author Css Starts Here
----------------------------- */

#smm-wrapper .smm-author-view {
    padding-left: 20px;
}
#smm-wrapper .smm-author-wrapper {
    padding: 70px 0 10px 0;
}
#smm-wrapper .smm-author-img {
    text-align: center;
    max-width: 50%;
    width: 100%;
    margin: 0 100px 0 auto;
}
#smm-wrapper .smm-pl {
    padding-left: 50px;
}
#smm-wrapper .smm-cursive-heading {
    font-family: Mondays;
    color: #d8d8d8;
    position: relative;
    z-index: 2;
    line-height: 1.6;
    opacity: 0.2;
    font-size: 96px;
}
#smm-wrapper .smm-simple-heading {
    font-family: 'Flexo-Bold';
    color: #ffffff;
    font-size: 48px;
    margin-top: -64px;
    text-transform: uppercase;
    letter-spacing: 2px;
}
#smm-wrapper .smm-author-content p {
    font-size: 24px;
    color: #bdb6fb;
    line-height: 32px;
    padding: 24px 0;
    font-family: Flexo-Demi;
    max-width: 70%;
    width: 100%;
}
#smm-wrapper .smm-business-wrapper, #smm-wrapper .smm-solution-wrapper {
    padding: 14px 0;
}
#smm-wrapper .smm-author-view h4 {
    color: #d0953a;
    font-size: 32px;
    font-family: 'Flexo-Bold';
    line-height: 50px;
    max-width: 68%;
    width: 100%;
    margin: 0 50px 0 auto;
    letter-spacing: 1px;
    padding: 20px 0;
}
#smm-wrapper .smm-author-view p {
    color: #bdb6fb;
    font-size: 24px;
    font-family: 'Flexo-Demi';
    line-height: 32px;
    padding: 10px 20px;
}
#smm-wrapper .smm-solution-content h4{
    color: #d0953a;
    font-size: 32px;
    font-family: 'Flexo-Bold';
    line-height: 48px;
    margin: 0 auto;
    letter-spacing: 1px;
}
#smm-wrapper .smm-solution-content p {
    color: #bdb6fb;
    font-size: 24px;
    font-family: 'Flexo-Demi';
    line-height: 38px;
    padding: 0px 0;
}
#smm-wrapper .smm-business-wrap {
    text-align: center;
    max-width: 30%;
    width: 100%;
    margin: 0px 140px 0px auto;
}
#smm-wrapper .smm-solution-content {
    max-width: 80%;
    width: 100%;
    margin: 0 28px 0 auto;
}
#smm-wrapper .solution-image {
    max-width: 50%;
    width: 100%;
}
#smm-wrapper .smm-arrow-wrap {
    text-align: center;
    width: 20%;
    margin: 30px auto 40px auto;
}
/* --------------------------
Author Css Ends Here
----------------------------- */

/* --------------------------
4.6 Found Css Starts Here
----------------------------- */

#smm-wrapper .smm-found-wrapper {
    padding: 10px 0 70px 0;
    text-align: center;
    background-image: url(../images/smm-center-shadow.png);
    background-repeat: no-repeat;
    background-size: 100% 120%;
    background-position: center center;
}
#smm-wrapper .smm-found-content h2 {
    font-family: 'Flexo-Bold';
    font-size: 48px;
    color: #fff;
    padding: 10px 0 60px 0;
    line-height: 50px;
    text-transform: uppercase;
}
#smm-wrapper .found-image {
    max-width: 46%;
    margin: 0 auto;
    width: 100%;
}
#smm-wrapper .smm-found-content p {
    color: #bdb6fb;
    font-size: 24px;
    font-family: 'Flexo-Demi';
    line-height: 38px;
    padding: 14px 0;
    max-width: 75%;
    width: 100%;
    margin: 0 auto;
    margin-top: -55px;
}
#smm-wrapper .smm-boom-wrapper {
    padding: 40px 0 0 0;
}
#smm-wrapper .smm-boom-img {
    max-width: 7%;
    width: 100%;
    margin: 0 auto;
}
#smm-wrapper .smm-boom-content {
    margin: 0 auto;
    padding: 40px 0;
    max-width: 50%;
    width: 100%;
}       
#smm-wrapper .smm-boom-content h4{
    color: #d0953a;
    font-size: 32px;
    font-family: 'Flexo-Bold';
    line-height: 48px;
    margin: 0 auto;
    letter-spacing: 1px;
}
#smm-wrapper .smm-boom-content p {
    max-width: 100%;
    margin-top: 0 !important;
}
#smm-wrapper .smm-startbooming-wrapper {
    padding: 80px 0 20px 0;
}
#smm-wrapper .smm-startbooming-wrapper h1 {
    color: #fff;
    font-size: 48px;
    font-family: 'Flexo-Demi';
    line-height: 56px;
    margin-bottom: 30px;
}

/* --------------------------
Found Css Ends Here
----------------------------- */

/* --------------------------
4.7 Social Css Starts Here
----------------------------- */

#smm-wrapper .smm-social-wrapper {
    padding: 70px 0;
}
#smm-wrapper .smm-social-content p{
    color: #bdb6fb;
    font-size: 24px;
    font-family: 'Flexo-Demi';
    line-height: 38px;
    padding: 14px 0;
    max-width: 80%;
    width: 100%;
}
#smm-wrapper .smm-social-service {
    padding: 50px 0;
    text-align: center;
}
#smm-wrapper .smm-service {
    text-align: center;
}
#smm-wrapper .smm-service h5 {
    color: #fff;
    font-size: 32px;
    font-family: 'Flexo-Bold';
    line-height: 40px;
    max-width: 60%;
    width: 100%;
    margin: 0 auto;
    padding: 24px 0;
}
#smm-wrapper .service-btn {
    margin: 20px 0 0 0;
}

/* --------------------------
Social Css Ends Here
----------------------------- */

/* --------------------------
4.8 Benefits Css Starts Here
----------------------------- */

#smm-wrapper .smm-benefits-wrapper {
    padding: 70px 0;
    text-align: center;
    background-image: url(../images/smm-center-shadow.png);
    background-repeat: no-repeat;
    background-size: 100% 120%;
    background-position: center center;
}
#smm-wrapper .smm-benefits-content p, .smm-showcase-content p {
    color: #bdb6fb;
    font-size: 24px;
    font-family: 'Flexo-Demi';
    line-height: 38px;
    padding: 20px 0;
    max-width: 75%;
    width: 100%;
    margin: 0 auto;
}
#smm-wrapper .smm-line-image {
    max-width: 70%;
    width: 100%;
}
#smm-wrapper .smm-benefits-list {
    position: relative;
    max-width: 90%;
    margin: 30px auto;
    width: 100%;
}
#smm-wrapper .smm-benefit-list {
    font-family: 'Flexo-Demi';
    font-size: 24px;
    line-height: 36px;
    color: #bdb6fb;
    display: inline-block;
    text-align: left;
    margin-left: 20px;
}
#smm-wrapper .smm-benefit-text img{
    vertical-align: baseline;
}
#smm-wrapper .smm-benefit-one {
    position: absolute;
    bottom: 19%;
    padding: 20px;
    left: 2%;
}
#smm-wrapper .smm-benefit-two {
    position: absolute;
    bottom: 45%;
    padding: 20px;
    left: 19%;
}
#smm-wrapper .smm-benefit-three {
    position: absolute;
    top: 13%;
    padding: 20px;
    left: 44%;
}
#smm-wrapper .smm-benefit-four {
    position: absolute;
    top: -2%;
    padding: 20px;
    right: 21%;
}
#smm-wrapper .smm-benefit-five {
    position: absolute;
    bottom: 14%;
    padding: 20px;
    left: 27%;
}
#smm-wrapper .smm-benefit-six {
    position: absolute;
    bottom: 38%;
    padding: 20px;
    left: 46%;
}
#smm-wrapper .smm-benefit-seven {
    position: absolute;
    top: 22%;
    padding: 20px;
    right: 7%;
}

/* --------------------------
Benefits Css Ends Here
----------------------------- */

/* --------------------------
4.9 Showcase Css Starts Here
----------------------------- */

#smm-wrapper .smm-showcase-wrapper {
    padding: 70px 0;
    text-align: center;
    background-image: url(../images/smm-right-shadow.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: top right;
}
#smm-wrapper .smm-showcase-tabs .nav-tabs {
    border-bottom: none !important;
}
#smm-wrapper .smm-showcase-tabs .nav-tabs .nav-link {
    color: #bdb6fb !important;
    border-left: none;
    padding: 10px 18px;
    margin: 20px 24px;
    font-size: 18px;
    font-family: 'Flexo-Demi';
    border-right: none;
    border-top: none;
    border-bottom: none;
}
#smm-wrapper .nav-tabs .nav-item.show .nav-link, #smm-wrapper  .nav-tabs .nav-link.active {
    border-bottom: 1px solid #ffffff !important;
    background-color: transparent;
    color: #ffffff !important;
}
#smm-wrapper .showcase-slider-feature .slider {
    margin: 0 auto;
}
#smm-wrapper .showcase-slider-feature .slick-slide {
    margin: 0px;
    outline: none;
}
#smm-wrapper .showcase-slider-feature .slider img {
    outline: none;
}
#smm-wrapper .smm-showcase-tabs {
    padding: 10px 0 50px 0;
}
#smm-wrapper .slick-lightbox-slick-img{
    max-width: 90% !important;
    border-radius: 20px;
}
#smm-wrapper .slick-slide img {
    display: block;
    outline: none !important;
    width: 320px;
    margin: 16px 14px;
    border-radius: 20px;
      -webkit-box-shadow: 0px 0px 8px 0px rgba(29, 29, 29, 0.8);
    -moz-box-shadow: 0px 0px 8px 0px rgba(29, 29, 29, 0.8);
    box-shadow: 0px 0px 8px 0px rgba(29, 29, 29, 0.8);
}
#smm-wrapper .slick-lightbox-slick-item {
    outline: none !important;
}
#smm-wrapper .slick-prev, #smm-wrapper .slick-next {
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 30px;
    height: 30px;
    margin-top: -10px;
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
#smm-wrapper .slick-prev{
    background-image: url(../images/slick-left-arrow.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
#smm-wrapper .slick-next{
    background-image: url(../images/slick-right-arrow.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
#smm-wrapper .slick-lightbox-close:before {
    font-size: 30px;
}

/* --------------------------
Showcase Css Ends Here
----------------------------- */

/* --------------------------
4.10 Pricing Css Starts Here
----------------------------- */

#smm-wrapper .smm-pricing-wrapper {
    padding: 70px 0;
    background-image: url(../images/smm-left-shadow.png);
    background-repeat: no-repeat;
    background-size: 90% 130%;
    background-position: -100px -180px;
}
#smm-wrapper .smm-pricing-content .smm-simple-heading{
    max-width: 60%;
    width: 100%;
}
#smm-wrapper .smm-pricing-content p {
    color: #bdb6fb;
    font-size: 24px;
    font-family: 'Flexo-Demi';
    line-height: 38px;
    padding: 20px 0;
    max-width: 65%;
    width: 100%;
}
#smm-wrapper .smm-pricing-list {
    margin: 10px 0;
}
#smm-wrapper .smm-pricing-list li {
    font-size: 24px;
    color: #bdb6fb;
    font-family: 'Flexo-Demi';
    display: inline-block;
    max-width: 450px;
    width: 100%;
    padding: 10px 0;
    vertical-align: middle;
}
#smm-wrapper .smm-pricing-list li::before {
    content: "•";
    margin-right: 10px;
    font-size: 30px;
    position: relative;
    top: 5px;
}
#smm-wrapper .price-number {
    font-size: 80px;
    font-family: 'Flexo-bold';
    color: #d7992e;
    padding: 10px 0 30px 0;
}
#smm-wrapper .price-number span {
    font-size: 32px;
    font-family: 'Flexo-Demi';
}
#smm-wrapper .smm-price-text {
    color: #bdb6fb;
    font-size: 16px;
    max-width: 50%;
    display: inline-block;
    width: 100%;
    margin: 10px 60px;
    vertical-align: middle;
} 

/* --------------------------
Pricing Css Ends Here
----------------------------- */

/* --------------------------
4.11 FAQ Css Starts Here
----------------------------- */

#smm-wrapper .smm-faq-wrapper {
    padding: 70px 0;
    text-align: center;
}
#smm-wrapper .smm-faq-content .smm-simple-heading{
    max-width: 50%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 40px;
}
#smm-wrapper .smm-faq-acc .card {
    border-radius: 0;
    margin-bottom: 30px;
    background: transparent;
    border: none;
}
#smm-wrapper .smm-faq-acc .card-header, .faq-area .card-header:first-child {
    padding: 0;
    background-color: transparent;
    border-bottom:none;
    border-radius: 0;
    margin-bottom: 0;
}
#smm-wrapper .smm-faq-acc .card-body {
    font-size: 28px;
    color: #bdb6fb;
    line-height: 44px;
    padding: 0;
    padding: 0px 50px 46px 50px;
    background-color: #35367b;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    margin-top: -1px;
}
#smm-wrapper .smm-faq-acc .acc-heading {
    color: #bdb6fb;
    font-size: 32px;
    cursor: pointer;
    line-height: 44px;
    font-family: 'Flexo-Demi';
    padding: 46px 50px;
    border-bottom: 2px solid #35367b;
}
#smm-wrapper .smm-faq-acc #accordion {
    text-align: left;
    margin-top: 50px;
}
#smm-wrapper .smm-faq-acc .card-header .acc-heading[aria-expanded=true] {
    background-color: #35367b;
    padding-bottom: 20px;
    border-bottom: 0;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
#smm-wrapper .smm-faq-acc .accordion {
    display: block;
    position: relative;
}
#smm-wrapper .smm-faq-acc .acc-heading.collapsed:after {
    content: "";
    position: absolute;
    right: 42px;
    top: 52px;
    border: solid #494480;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 8px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
#smm-wrapper .smm-faq-acc .acc-heading[aria-expanded="true"]:after {
    content: "";
    position: absolute;
    right: 42px;
    top: 52px;
    border: solid #959bbd;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 8px;
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}
#smm-wrapper .smm-faq-acc .acc-heading.collapsed:hover:after, .smm-faq-acc .acc-heading[aria-expanded="true"]:hover:after {
    color: #cdd2e2;
}
#smm-wrapper .smm-faq-txt {
    font-family: 'Flexo-Bold';
    color: #ffffff;
    font-size: 48px;
    margin: 80px auto 40px auto;
    max-width: 70%;
    width: 100%;
}
#smm-wrapper .smm-faq-acc .card-header .acc-heading span{
    max-width: 90%;
    width: 100%;
    display: block;
}

/* --------------------------
FAQ Css Ends Here
----------------------------- */

/* --------------------------
4.12 Contact Css Starts Here
----------------------------- */

#smm-wrapper .contact-wrapper {
    padding: 70px 0;
    text-align: center;
}
#smm-wrapper .contact-form {
    text-align: left;
    max-width: 70%;
    width: 100%;
    margin: 50px auto 10px auto;
}
#smm-wrapper .contact-form .deserve-button{
    margin: 40px 0 0 0;
}
#smm-wrapper .input-filed {
    position: relative;
    margin: 18px auto;
    width: 100%;
}
#smm-wrapper .input-filed .label {
    position: absolute;
    top: 16px;
    left: 0;
    font-size: 20px;
    color: #fff;
    transform-origin: 0 0;
    transition: all 0.2s ease;
    font-family: 'Flexo-Regular';
}
#smm-wrapper .input-filed .borderLabel {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 0;
    transition: all 0.15s ease;
}
#smm-wrapper .input-filed input ,  #smm-wrapper .input-filed textarea{
    -webkit-appearance: none;
    width: 100%;
    border: 0;
    font-family: inherit;
    padding: 12px 0;
    height: 48px;
    font-size: 18px;
    border-bottom: 2px solid #ffffff57;
    background: none;
    border-radius: 0;
    color: #fff;
    transition: all 0.15s ease;
}
#smm-wrapper .input-filed textarea{
    min-height: 100px;
}
#smm-wrapper .input-filed input:not(:placeholder-shown) + span, #smm-wrapper .input-filed textarea:not(:placeholder-shown) + span {
    color: #fff;
    transform: translateY(-26px) scale(0.75);
}
#smm-wrapper .input-filed input:focus, #smm-wrapper .input-filed textarea:focus {
    background: none;
    outline: none;
    border-bottom: 2px solid #d7992f;
}
#smm-wrapper .input-filed input:focus + span, #smm-wrapper .input-filed textarea:focus + span {
    color: #d7992f;
    transform: translateY(-26px) scale(0.75);
}
#smm-wrapper .input-filed input:focus + span + .borderLabel {
    transform: scaleX(1);
    border-bottom: 2px solid #d7992f;
}
#smm-wrapper .form-submit-btn button{
    background-color: #dc6810;
    color: #fff;
    padding: 15px 50px;
    border-radius: 50px;
    margin: 24px 0;
    display: inline-block;
    font-size: 24px;
    border: none;
    transition: 0.48s;
    font-family: 'Flexo-Regular';
}
#smm-wrapper .form-submit-btn button:hover{
    background-color: #b3530a;
}
#smm-wrapper .form-submit-btn .icon-right-arrow{
    font-size: 20px;
}
#smm-wrapper .form-submit-btn {
    margin: 20px 0;
}
#smm-wrapper .materialSelect {
    position: relative;
}
#smm-wrapper .materialSelect.error .select:not(.isOpen) {
    border: 1px solid #dd2c00 !important;
}
#smm-wrapper .materialSelect.error .message {
    display: block;
}
#smm-wrapper .materialSelect.inline {
    float: none !important;
    display: inline-block;
    z-index: 0;
    min-width: 100%;
}
#smm-wrapper .materialSelect.inline .select {
    transform: translate(0, 0);
    top: 0;
    left: 0;
    margin: 0;
    transition: all 0.2s !important;
    width: 100%;
}
#smm-wrapper .materialSelect.inline .select.isOpen {
    transform: translate(0, -50%);
    top: 50%;
}
#smm-wrapper .materialSelect:not(.inline) {
    width: 100%;
}
#smm-wrapper .materialSelect:not(.inline) .select {
    width: 100%;
    margin-left: 50%;
    transform: translate(-50%, 0);
}
#smm-wrapper .materialSelect .select {
    position: absolute;
    margin: 0;
    padding: 0;
    top: -1px;
    user-select: none;
    width: 250px;
    text-align: center;
    margin: 0px auto;
    z-index: 9999;
    height: 48px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    margin-left: 0;
    transform: none;
    border-bottom: 2px solid #ffffff57;
}
#smm-wrapper .materialSelect .select:after {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #bbb;
    content: '';
    display: block;
    height: 0px;
    position: absolute;
    pointer-events: none;
    top: 19px;
    right: 10px;
    width: 0px;
}
#smm-wrapper .materialSelect .select li {
    cursor: pointer;
    font-size: 18px;
    list-style: none;
    line-height: 48px;
    padding: 0 40px 0 0px;
    position: relative;
    overflow: hidden;
    text-align: left;
    color: #fff;
}
#smm-wrapper .materialSelect .select li[data-selected] {
    height: 48px;
}
#smm-wrapper .materialSelect .select li:not([data-selected]) {
    height: 0px;
    opacity: 0;
}
#smm-wrapper .materialSelect .select.isOpen {
    background-color: #fafafa;
    border-radius: 2px;
    box-shadow: 1px 2px 3px 1px rgba(0, 0, 0, 0.3);
    padding-bottom: 16px;
    top: -96px;
    height: 300px;
    z-index: 99999;
    color: #000;
    border-bottom: 0;
}
#smm-wrapper .materialSelect .select.isOpen:after {
    display: none;
}
#smm-wrapper .materialSelect .select.isOpen:before {
    border-color: transparent !important;
}
#smm-wrapper .materialSelect .select.isOpen li {
    height: 48px;
    opacity: 1;
    padding-left: 16px;
    color: #000;
}
#smm-wrapper .materialSelect .select.isOpen li:hover {
    background-color: #eee;
}
#smm-wrapper .materialSelect .select.isOpen li:active {
    background-color: #dbdbdb;
}
#smm-wrapper .materialSelect .select:not(.isOpen):active {
    box-shadow: 1px 2px 1px 0 rgba(0, 0, 0, 0.3);
}
#smm-wrapper .materialSelect .select + .select:before {
    border-left: thin solid #c8c8c8;
    content: '';
    height: 32px;
    left: 0;
    position: absolute;
    top: 8px;
}

/* --------------------------
Contact Css Ends Here
----------------------------- */

/* --------------------------
4.13 Client Css Starts Here
----------------------------- */

#smm-wrapper .smm-client-wrapper {
    padding: 70px 0;
    text-align: center;
    background-image: url(../images/smm-right-shadow.png);
    background-repeat: no-repeat;
    background-size: 90% 118%;
    background-position: 246px -74px;
}
#smm-wrapper .smm-client-review {
    text-align: left;
    padding: 50px 0;
}
#smm-wrapper .smm-client-review h4 {
    color: #d0953a;
    font-family: 'Flexo-Bold';
    font-size: 32px;
    line-height: 48px;
    padding: 20px 0;
}
#smm-wrapper .smm-client-review p {
    font-size: 16px;
    line-height: 35px;
    color: #bdb6fb;
    padding: 0 0 46px 0;
}
#smm-wrapper .smm-author-name {
    font-size: 18px;
    color: #c9c4f7;
    font-family: 'Flexo-Bold';
}
#smm-wrapper .smm-author-desg {
    color: #c9c4f7;
    display: block;
    font-size: 18px;
}
#smm-wrapper .smm-client-txt {
    display: inline-block;
    padding-left: 30px;
    text-align: left;
    position: relative;
    top: 20px;
}
.smm-review-content {
    max-width: 80%;
    width: 100%;
}
#smm-wrapper .smm-review-area {
    text-align: center;
    max-width: 70%;
    margin: 0 auto;
    width: 100%;
}
#smm-wrapper .smm-client-img {
    display: inline-block;
    width: 140px;
    height: 140px;
    position: relative;
    background: #333773;
    border-radius: 50%;
}
#smm-wrapper .smm-reviewQuote-wrapper {
    text-align: left;
    z-index: 2;
    position: relative;
}
#smm-wrapper .review-quote{
    width: 10%;
}
#smm-wrapper .smm-reviewQuote-wrapper h2 {
    color: #c9c4f7;
    font-size: 32px;
    line-height: 52px;
    font-family: 'Lora-Italic';
    margin: 18px 0;
}
#smm-wrapper .smm-review-area:before {
    position: absolute;
    top: 70px;
    border-radius: 50%;
    width: 320px;
    height: 320px;
    display: block;
    border: 1px solid #4a3f81;
    content: '';
    z-index: 1;
    left: 40px;
}
#smm-wrapper .smm-review-area:after {
    position: absolute;
    top: 0px;
    border-radius: 50%;
    width: 450px;
    height: 450px;
    display: block;
    border: 1px solid #493e80;
    content: '';
    left: -24px;
    z-index: 1;
}
#smm-wrapper .smm-review-area {
    text-align: center;
    max-width: 80%;
    margin: 0 0 0 auto;
    width: 100%;
    position: relative;
    z-index: 2;
    padding-top: 160px;
    padding-left: 24px;
}
#smm-wrapper .smm-review-image {
    position: relative;
    left: 70px;
    z-index: 2;
}
#smm-wrapper .smm-img-author {
    border-radius: 50%;
    border: 3px solid #929292;
    width: 100%;
    box-shadow: 0px 12px 32px -9px black;
    height: 100%;
    overflow: hidden;
}
#smm-wrapper .smm-client-img:after {
    content: " ";
    position: absolute;
    top: 65px;
    border-top: 10px solid transparent;
    border-right: none;
    border-left: 22px solid #929292;
    border-bottom: 10px solid transparent;
    right: -20px;
}

/* --------------------------
Client Css Ends Here
----------------------------- */

/* --------------------------
4.14 Footer Css Starts Here
----------------------------- */

#smm-wrapper footer {
    background-color: inherit;
    padding: 40px 0 32px 0;
    margin-top: 0;
    color: #bdb6fb;
}
#smm-wrapper  .input-field {
    background: #5b4e9b;
    border: 1px solid #5b4e9b;
}
#smm-wrapper .input-field:focus {
    box-shadow: 10px 0 20px 10px #5b4e9b69;
}
#smm-wrapper .newsletter-logo p, #smm-wrapper .portfolio-wrapper p a, #smm-wrapper .social-media li a{
    color: #bdb6fb;
}
#smm-wrapper .address-wrapper {
    border-top: 1px solid #7259c6;
    border-bottom: 1px solid #7259c6;
}

/* --------------------------
Footer Css Ends Here
----------------------------- */

/* ------------------- 
DEMO 2 CSS PAGE ENDS
------------------- */

/* ------------------- 
5. DEMO 3 CSS PAGE STARTS 
------------------- */

/* --------------------------
5.1 Body Css Starts Here
----------------------------- */

#mobile-app-wrapper{
    background-color: #2c2c2c;
    color: #e5e5e5;
    background-image: url(../images/mobile-header-bg.svg);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: contain;
}

/* --------------------------
Body Css Ends Here
----------------------------- */

/* --------------------------
5.2 Header Css Starts Here
----------------------------- */


/* --------------------------
Header Css Ends Here
----------------------------- */

/* --------------------------
5.3 Banner Css Starts Here
----------------------------- */

#mobile-app-wrapper .mobile-banner-area {
    background-image: url(../images/mobile-top-shadow.png);
    background-repeat: no-repeat;
    background-position: 67% 100%;
    background-size: contain;
}
#mobile-app-wrapper .mobile-quote-wrapper , #mobile-app-wrapper .mobile-why-wrapper, #mobile-app-wrapper .mobile-benefits-wrapper,
#mobile-app-wrapper .mobile-process-wrapper, #mobile-app-wrapper .mobile-features-wrapper, #mobile-app-wrapper .mobile-showcase-wrapper,
#mobile-app-wrapper .mobile-faq-wrapper, #mobile-app-wrapper .mobile-client-wrapper, #mobile-app-wrapper .contact-wrapper{
    padding: 60px 0;
}
#mobile-app-wrapper .mobile-quote-area , #mobile-app-wrapper .mobile-benefits-area, #mobile-app-wrapper .mobile-process-area,
#mobile-app-wrapper .mobile-features-area, #mobile-app-wrapper .mobile-showcase-area, #mobile-app-wrapper .mobile-faq-area,
#mobile-app-wrapper .mobile-client-area{
    text-align: center;
}
#mobile-app-wrapper .mobile-banner-wrapper {
    padding: 130px 0;
}
#mobile-app-wrapper .mobile-banner-content {
    max-width: 94%;
    width: 100%;
}
#mobile-app-wrapper .mobile-banner-content .sub-title {
    font-family: 'Flexo-Demi';
    font-size: 16px;
    color: #d7992e;
    display: block;
    text-transform: uppercase;
    padding: 20px 0;
}
#mobile-app-wrapper .mobile-banner-content h1 {
    font-size: 48px;
    font-family: 'Flexo-Bold';
    line-height: 72px;
    text-decoration: underline;
    text-decoration-color: #3d3c3b;
}
#mobile-app-wrapper .mobile-banner-content p {
    font-size: 24px;
    line-height: 36px;
    margin: 30px 0 50px 0px;
    max-width: 90%;
    width: 100%;
}
#mobile-app-wrapper .mobile-banner-content p strong {
    font-family: 'Flexo-Bold';
}

/* --------------------------
Banner Css Ends Here
----------------------------- */

/* --------------------------
5.4 Quote Css Starts Here
----------------------------- */

#mobile-app-wrapper .mobile-quote-content {
    max-width: 70%;
    width: 100%;
    margin: 0 auto;
}
#mobile-app-wrapper .mobile-quote-content h3 {
    padding: 26px 0;
    opacity: 0.8;
    font-size: 32px;
    color: #e5e5e5;
    line-height: 50px;
    font-family: Lora-Regular;
}
#mobile-app-wrapper .mobile-quote-content h6 {
    color: #e5e5e5;
    font-family: Lora-Regular;
    font-size: 18px;
    padding: 10px 0;
}

/* --------------------------
Quote Css Ends Here
----------------------------- */

/* --------------------------
5.5 Why Css Starts Here
----------------------------- */

#mobile-app-wrapper .mobile-why-wrapper{
    text-align: center;
}
#mobile-app-wrapper .mobile-why-content {
    max-width: 65%;
    width: 100%;
    margin: 0 auto;
}
#mobile-app-wrapper .mobile-cursive-heading {
    font-family: Mondays;
    color: #979797;
    position: relative;
    z-index: 2;
    line-height: 1.6;
    opacity: 0.2;
    font-size: 96px;
}
#mobile-app-wrapper .mobile-simple-heading {
    font-family: 'Flexo-Bold';
    color: #d0952d;
    font-size: 48px;
    margin-top: -64px;
    text-transform: uppercase;
    letter-spacing: 2px;
}
#mobile-app-wrapper .mobile-business-needs {
    padding: 70px 0;
    max-width: 80%;
    width: 100%;
    margin: 0 auto;
}
#mobile-app-wrapper .mobile-business-list {
    padding: 40px 0;
}
#mobile-app-wrapper .mobile-business-content {
    text-align: left;
    max-width: 90%;
    width: 100%;
}
#mobile-app-wrapper .mobile-business-image {
    max-width: 74%;
    width: 100%;
    margin: 0 auto;
    position: relative;
}
#mobile-app-wrapper .mobile-business-bg {
    background: #313131;
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    top: 34px;
    left: 28px;
    width: 100%;
    height: 80%;
}
#mobile-app-wrapper .business-img{
    position: relative;
    z-index: 2;
}
#mobile-app-wrapper .mobile-business-content h3 {
    font-size: 32px;
    font-family: 'Flexo-Bold';
    line-height: 42px;
    padding: 16px 0;
}
#mobile-app-wrapper .mobile-list-one h3, #mobile-app-wrapper .mobile-list-three h3{
    max-width: 74%;
    width: 100%;
} 
#mobile-app-wrapper .mobile-business-content p {
    font-size: 17px;
    line-height: 26px;
    margin: 10px 0 20px 0;
}
#mobile-app-wrapper .mobile-list-one .mobile-business-image, #mobile-app-wrapper .mobile-list-three .mobile-business-image {
    margin: 0 auto 0 0;
}
#mobile-app-wrapper .mobile-list-two .mobile-business-bg{
    left: auto;
    right: 10px;
}
#mobile-app-wrapper .mobile-list-three .mobile-business-bg {
    top: 94px;
    height: 65%;
}
#mobile-app-wrapper .mobile-startbooming-wrapper h1 {
    color: #fff;
    font-size: 32px;
    font-family: 'Flexo-Demi';
    line-height: 48px;
    margin-bottom: 30px;
}
#mobile-app-wrapper .mobile-why-area .mobile-startbooming-wrapper {
    max-width: 65%;
    width: 100%;
    margin: 0 auto;
}

/* --------------------------
Why Css Ends Here
----------------------------- */

/* --------------------------
5.6 Benefits Css Starts Here
----------------------------- */

#mobile-app-wrapper .mobile-benefit-list {
    padding: 120px 0 80px 0;
}
#mobile-app-wrapper .mobile-benefit-wrap {
    padding: 20px;
}
#mobile-app-wrapper .mobile-benefit-wrap h4 {
    font-family: 'Flexo-Bold';
    font-size: 24px;
    line-height: 38px;
    padding: 20px 44px;
    color: #e5e5e5;
}
#mobile-app-wrapper .mobile-benefit-image {
    min-height: 90px;
    display: inline-flex;
}
#mobile-app-wrapper .mobile-benefits-content {
    padding: 40px 0 0 0;
}

/* --------------------------
Benefits Css Ends Here
----------------------------- */

/* --------------------------
5.7 Process Css Starts Here
----------------------------- */

#mobile-app-wrapper .mobile-process-wrapper {
    background-image: url(../images/mobile-center-shadow.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 90% 150%;
}
#mobile-app-wrapper .mobile-process-text {
    text-align: right;
}
#mobile-app-wrapper .mobile-process-text h1{
    margin-bottom: 0px;
}
#mobile-app-wrapper .process-section {
    padding: 40px 0 40px 0;
}
#mobile-app-wrapper .process-section ol {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    position: relative;
}
#mobile-app-wrapper .process-text li.is_active {
    position: relative;
    visibility: visible;
    opacity: 1;
    transition: all ease 0.3s;
}
#mobile-app-wrapper .process-text li {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transition: all ease 0.3s;
    width: 100%;
    text-align: center;
}
#mobile-app-wrapper .process-text li p {
    font-size: 24px;
    line-height: 36px;
    color: #e5e5e5;
    max-width: 65%;
    width: 100%;
    margin: 0 auto;
}
#mobile-app-wrapper .process-link-list {
    margin-top: -100px;
}
#mobile-app-wrapper .process-section .col {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    max-width: 100%;
    padding: 0;
}
#mobile-app-wrapper .process-list-item {
    position: relative;
    padding-top: 100%;
    margin-top: 100%;
    cursor: pointer;
}
#mobile-app-wrapper .process-list-item:before {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 1px solid #fff;
    border-radius: 100%;
    transition-property: left, right, top, bottom, border-color, opacity;
}
#mobile-app-wrapper .process-list-item:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%) scale(0.5);
    transform: translate(-50%, -50%) scale(0.5);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #eaeaea;
    transition-property: background-color, -webkit-transform;
    transition-property: transform, background-color;
    transition-property: transform, background-color, -webkit-transform;
}
#mobile-app-wrapper .process-list span {
    position: absolute;
    left: -10px;
    right: -10px;
    bottom: 50%;
    padding-bottom: 75%;
    color: #939393;
    font-size: 22px;
    text-align: center;
    font-family: 'Flexo-Demi';
}
#mobile-app-wrapper .process-list li:nth-child(2n) span {
    bottom: auto;
    top: 50%;
    padding-top: 75%;
    padding-bottom: 0;
}
#mobile-app-wrapper .process-list {
    max-width: 70%;
    padding-bottom: 120px;
    margin: 0 auto;
    width: 100%;
}
#mobile-app-wrapper .process-list li span {
    overflow: hidden;
}
#mobile-app-wrapper .process-list li span:before {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 50%;
    width: 1px;
    background: #d0952d;
    transition: all ease 0.3s;
    height: 0;
}
#mobile-app-wrapper .process-list li:nth-child(2n) span:before {
    top: 0;
    content: "";
    transition: all ease 0.3s;
}
#mobile-app-wrapper .process-list span:after {
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    opacity: 1;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    transition: all ease 0.3s;
}
#mobile-app-wrapper .is_active .process-list-item span {
    color: #d0952d;
}
#mobile-app-wrapper .is_active .process-list-item:before {
    left: -20px;
    right: -20px;
    bottom: -20px;
    top: -20px;
    opacity: 1;
    border: 1px solid #d0952d;
    transition: all ease 0.3s;
}
#mobile-app-wrapper .is_active .process-list-item:after {
    background-color: #d0952d;
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
    transition: all ease 0.3s;
}
#mobile-app-wrapper .process-list li.is_active span:before {
    content: "";
    position: absolute;
    bottom: -37px;
    left: 50%;
    width: 1px;
    background: #d0952d;
    transition: all ease 0.3s;
    height: 100%;
}
#mobile-app-wrapper .process-list li.is_active:nth-child(2n) span:before {
    bottom: 0px;
    top: -37px;
    height: 100%;
    content: "";
    transition: all ease 0.3s;
}

/* --------------------------
Process Css Ends Here
----------------------------- */

/* --------------------------
5.8 Features Css Starts Here
----------------------------- */

#mobile-app-wrapper .mobile-features-list {
    padding: 40px 0;
}
#mobile-app-wrapper .mobile-feature-image {
    max-width: 76%;
    width: 100%;
    margin: 0 auto;
}
#mobile-app-wrapper .mobile-feature-list{
    text-align: left;
}
#mobile-app-wrapper .mobile-feature-list li {
    font-family: 'Flexo-Regular';
    font-size: 24px;
    background: url(../images/mobile-benefit-tick.png);
    padding-left: 42px;
    background-repeat: no-repeat;
    background-position: 0px 8px;
    background-size: 26px;
    margin: 20px 0px;
}

/* --------------------------
Features Css Ends Here
----------------------------- */

/* --------------------------
5.9 Showcase Css Starts Here
----------------------------- */

#mobile-app-wrapper .mobile-showcase-wrapper {
    background-image: url(../images/mobile-right-shadow.png);
    background-repeat: no-repeat;
    background-position: 60% 80%;
    background-size: auto 130%;
}
#mobile-app-wrapper .showcase-slider img{
    outline: none;
    width: 100%;
    max-width: 250px;
    border-radius: 20px;
    margin: 10px 14px;
      -webkit-box-shadow: 0px 0px 8px 0px rgba(29, 29, 29, 0.8);
    -moz-box-shadow: 0px 0px 8px 0px rgba(29, 29, 29, 0.8);
    box-shadow: 0px 0px 8px 0px rgba(29, 29, 29, 0.8);
}
#mobile-app-wrapper .mobile-showcase-content p {
    font-size: 24px;
    line-height: 24px;
    color: #e5e5e5;
    margin: 20px 0;
}
#mobile-app-wrapper .mobile-showcase-list {
    margin: 10px 0 30px 0;
}
#mobile-app-wrapper .slick-lightbox-slick-img{
    max-width: 90% !important;
    border-radius: 20px;
}
#mobile-app-wrapper .slick-slide img {
    display: block;
    outline: none !important;
}
#mobile-app-wrapper .slick-lightbox-slick-item {
    outline: none !important;
}
#mobile-app-wrapper .slick-prev, #mobile-app-wrapper .slick-next {
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 30px;
    height: 30px;
    margin-top: -10px;
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
#mobile-app-wrapper .slick-prev{
    background-image: url(../images/slick-left-arrow.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
#mobile-app-wrapper .slick-next{
    background-image: url(../images/slick-right-arrow.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
#mobile-app-wrapper .slick-lightbox-close:before {
    font-size: 30px;
}


/* --------------------------
Showcase Css Ends Here
----------------------------- */

/* --------------------------
5.10 FAQ Css Starts Here
----------------------------- */

#mobile-app-wrapper .mobile-faq-content .mobile-simple-heading {
    max-width: 42%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
#mobile-app-wrapper .mobile-faq-txt {
    font-family: 'Flexo-Bold';
    color: #ffffff;
    font-size: 48px;
    margin: 80px auto 40px auto;
    max-width: 80%;
    width: 100%;
}
#mobile-app-wrapper .mobile-faq-acc {
    padding: 70px 0;
    text-align: left;
}
#mobile-app-wrapper .mobile-faq-acc .card {
    border-radius: 0;
    background: transparent;
    border: none;
}
#mobile-app-wrapper .mobile-faq-acc .card-header, .faq-area .card-header:first-child {
    padding: 0;
    background-color: transparent;
    border-bottom:none;
    border-radius: 0;
    margin-bottom: 0;
}
#mobile-app-wrapper .mobile-faq-acc .card-body {
    font-size: 24px;
    color: #e5e5e5;
    line-height: 38px;
    padding: 0px 50px 40px 50px;
    background-color: #2c2c2c;
    margin-top: -1px;
}
#mobile-app-wrapper .mobile-faq-acc .acc-heading {
    color: #e5e5e5;
    font-size: 24px;
    cursor: pointer;
    line-height: 36px;
    font-family: 'Flexo-Demi';
    padding: 20px 0px;
    border-top: 2px solid #6d6d6d;
}
#mobile-app-wrapper .mobile-faq-acc .card-header .acc-heading[aria-expanded=true] {
    background-color: #2c2c2c;
    padding-bottom: 20px;
    border-bottom: 0;
}
#mobile-app-wrapper .mobile-faq-acc .card-header .acc-heading span{
    max-width: 90%;
    width: 100%;
    display: block;
}
#mobile-app-wrapper .mobile-faq-acc .acc-heading.collapsed:after {
    content: '\002B';
    position: absolute;
    right: 0px;
    top: 20px;
    color: #909090;
    font-size: 36px;
}
#mobile-app-wrapper .mobile-faq-acc .faq-border{
    border-bottom: 2px solid #6d6d6d;
}
#mobile-app-wrapper .mobile-faq-acc .acc-heading[aria-expanded="true"]:after {
    content: "\2212";
    position: absolute;
    right: 0px;
    top: 20px;
    color: #909090;
    font-size: 36px;
}
#mobile-app-wrapper .mobile-faq-acc .acc-heading.collapsed:hover:after, #mobile-app-wrapper .mobile-faq-acc .acc-heading[aria-expanded="true"]:hover:after {
    color: #d0952d;
}

/* --------------------------
FAQ Css Ends Here
----------------------------- */

/* --------------------------
5.11 Contact Css Starts Here
----------------------------- */

#mobile-app-wrapper .contact-wrapper {
    text-align: center;
}
#mobile-app-wrapper .contact-form {
    text-align: left;
    max-width: 70%;
    width: 100%;
    margin: 50px auto 10px auto;
}
#mobile-app-wrapper .contact-form .deserve-button{
    margin: 40px 0 0 0;
}
#mobile-app-wrapper .input-filed {
    position: relative;
    margin: 18px auto;
    width: 100%;
}
#mobile-app-wrapper .input-filed .label {
    position: absolute;
    top: 16px;
    left: 0;
    font-size: 20px;
    color: #fff;
    transform-origin: 0 0;
    transition: all 0.2s ease;
    font-family: 'Flexo-Regular';
}
#mobile-app-wrapper .input-filed .borderLabel {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 0;
    transition: all 0.15s ease;
}
#mobile-app-wrapper .input-filed input ,  #mobile-app-wrapper .input-filed textarea{
    -webkit-appearance: none;
    width: 100%;
    border: 0;
    font-family: inherit;
    padding: 12px 0;
    height: 48px;
    font-size: 18px;
    border-bottom: 2px solid #ffffff57;
    background: none;
    border-radius: 0;
    color: #fff;
    transition: all 0.15s ease;
}
#mobile-app-wrapper .input-filed textarea{
    min-height: 100px;
}
#mobile-app-wrapper .input-filed input:not(:placeholder-shown) + span, #mobile-app-wrapper .input-filed textarea:not(:placeholder-shown) + span {
    color: #fff;
    transform: translateY(-26px) scale(0.75);
}
#mobile-app-wrapper .input-filed input:focus, #mobile-app-wrapper .input-filed textarea:focus {
    background: none;
    outline: none;
    border-bottom: 2px solid #d7992f;
}
#mobile-app-wrapper .input-filed input:focus + span, #mobile-app-wrapper .input-filed textarea:focus + span {
    color: #d7992f;
    transform: translateY(-26px) scale(0.75);
}
#mobile-app-wrapper .input-filed input:focus + span + .borderLabel {
    transform: scaleX(1);
    border-bottom: 2px solid #d7992f;
}
#mobile-app-wrapper .form-submit-btn button{
    background-color: #dc6810;
    color: #fff;
    padding: 15px 50px;
    border-radius: 50px;
    margin: 24px 0;
    display: inline-block;
    font-size: 24px;
    border: none;
    transition: 0.48s;
    font-family: 'Flexo-Regular';
}
#mobile-app-wrapper .form-submit-btn button:hover{
    background-color: #b3530a;
}
#mobile-app-wrapper .form-submit-btn .icon-right-arrow{
    font-size: 20px;
}
#mobile-app-wrapper .form-submit-btn {
    margin: 20px 0;
}
#mobile-app-wrapper .materialSelect {
    position: relative;
}
#mobile-app-wrapper .materialSelect.error .select:not(.isOpen) {
    border: 1px solid #dd2c00 !important;
}
#mobile-app-wrapper .materialSelect.error .message {
    display: block;
}
#mobile-app-wrapper .materialSelect.inline {
    float: none !important;
    display: inline-block;
    z-index: 0;
    min-width: 100%;
}
#mobile-app-wrapper .materialSelect.inline .select {
    transform: translate(0, 0);
    top: 0;
    left: 0;
    margin: 0;
    transition: all 0.2s !important;
    width: 100%;
}
#mobile-app-wrapper .materialSelect.inline .select.isOpen {
    transform: translate(0, -50%);
    top: 50%;
}
#mobile-app-wrapper .materialSelect:not(.inline) {
    width: 100%;
}
#mobile-app-wrapper .materialSelect:not(.inline) .select {
    width: 100%;
    margin-left: 50%;
    transform: translate(-50%, 0);
}
#mobile-app-wrapper .materialSelect .select {
    position: absolute;
    margin: 0;
    padding: 0;
    top: -1px;
    user-select: none;
    width: 250px;
    text-align: center;
    margin: 0px auto;
    z-index: 9999;
    height: 48px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    margin-left: 0;
    transform: none;
    border-bottom: 2px solid #ffffff57;
}
#mobile-app-wrapper .materialSelect .select:after {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #bbb;
    content: '';
    display: block;
    height: 0px;
    position: absolute;
    pointer-events: none;
    top: 19px;
    right: 10px;
    width: 0px;
}
#mobile-app-wrapper .materialSelect .select li {
    cursor: pointer;
    font-size: 18px;
    list-style: none;
    line-height: 48px;
    padding: 0 40px 0 0px;
    position: relative;
    overflow: hidden;
    text-align: left;
    color: #fff;
}
#mobile-app-wrapper .materialSelect .select li[data-selected] {
    height: 48px;
}
#mobile-app-wrapper .materialSelect .select li:not([data-selected]) {
    height: 0px;
    opacity: 0;
}
#mobile-app-wrapper .materialSelect .select.isOpen {
    background-color: #fafafa;
    border-radius: 2px;
    box-shadow: 1px 2px 3px 1px rgba(0, 0, 0, 0.3);
    padding-bottom: 16px;
    top: -96px;
    height: 250px;
    z-index: 99999;
    color: #000;
    border-bottom: 0;
}
#mobile-app-wrapper .materialSelect .select.isOpen:after {
    display: none;
}
#mobile-app-wrapper .materialSelect .select.isOpen:before {
    border-color: transparent !important;
}
#mobile-app-wrapper .materialSelect .select.isOpen li {
    height: 48px;
    opacity: 1;
    padding-left: 16px;
    color: #000;
}
#mobile-app-wrapper .materialSelect .select.isOpen li:hover {
    background-color: #eee;
}
#mobile-app-wrapper .materialSelect .select.isOpen li:active {
    background-color: #dbdbdb;
}
#mobile-app-wrapper .materialSelect .select:not(.isOpen):active {
    box-shadow: 1px 2px 1px 0 rgba(0, 0, 0, 0.3);
}
#mobile-app-wrapper .materialSelect .select + .select:before {
    border-left: thin solid #c8c8c8;
    content: '';
    height: 32px;
    left: 0;
    position: absolute;
    top: 8px;
}

/* --------------------------
Contact Css Ends Here
----------------------------- */

/* --------------------------
5.12 Client Css Starts Here
----------------------------- */

#mobile-app-wrapper .mobile-client-review {
    text-align: left;
    padding: 50px 0;
}
#mobile-app-wrapper .mobile-client-review h4 {
    color: #d0953a;
    font-family: 'Flexo-Bold';
    font-size: 32px;
    line-height: 48px;
    padding: 20px 0;
}
#mobile-app-wrapper .mobile-client-review p {
    font-size: 16px;
    line-height: 35px;
    color: #e5e5e5;
    padding: 0 0 46px 0;
}
#mobile-app-wrapper .mobile-author-name {
    font-size: 18px;
    color: #e5e5e5;
    font-family: 'Flexo-Bold';
}
#mobile-app-wrapper .mobile-author-desg {
    color: #e5e5e5;
    display: block;
    font-size: 18px;
}
#mobile-app-wrapper .mobile-client-txt {
    display: inline-block;
    padding-left: 30px;
    text-align: left;
    position: relative;
    top: 20px;
}
#mobile-app-wrapper .mobile-review-content {
    max-width: 80%;
    width: 100%;
}
#mobile-app-wrapper .mobile-review-area {
    text-align: center;
    max-width: 70%;
    margin: 0 auto;
    width: 100%;
}
#mobile-app-wrapper .mobile-client-img {
    display: inline-block;
    width: 140px;
    height: 140px;
    position: relative;
    background: #3f3f3f;
    border-radius: 50%;
}
#mobile-app-wrapper .mobile-reviewQuote-wrapper {
    text-align: left;
    z-index: 2;
    position: relative;
}
#mobile-app-wrapper .review-quote{
    width: 10%;
}
#mobile-app-wrapper .mobile-reviewQuote-wrapper h2 {
    color: #e5e5e5;
    font-size: 32px;
    line-height: 52px;
    font-family: 'Lora-Italic';
    margin: 18px 0;
}
#mobile-app-wrapper .mobile-reviewQuote-wrapper h2:after {
    content: '';
    background: #2c2c2c;
    width: 100%;
    height: 60%;
    position: absolute;
    filter: blur(10px);
    left: 0%;
    top: 30px;
    z-index: -1;
    opacity: 0.9;
}
#mobile-app-wrapper .mobile-review-area:before {
    position: absolute;
    top: 70px;
    border-radius: 50%;
    width: 320px;
    height: 320px;
    display: block;
    border: 1px solid #e5e5e536;
    content: '';
    z-index: 1;
    left: 40px;
}
#mobile-app-wrapper .mobile-review-area:after {
    position: absolute;
    top: 0px;
    border-radius: 50%;
    width: 450px;
    height: 450px;
    display: block;
    border: 1px solid #e5e5e536;
    content: '';
    left: -24px;
    z-index: 1;
}
#mobile-app-wrapper .mobile-review-area {
    text-align: center;
    max-width: 80%;
    margin: 0 0 0 auto;
    width: 100%;
    position: relative;
    z-index: 2;
    padding-top: 160px;
    padding-left: 24px;
}
#mobile-app-wrapper .mobile-review-image {
    position: relative;
    left: 70px;
    z-index: 2;
}
#mobile-app-wrapper .mobile-img-author {
    border-radius: 50%;
    border: 3px solid #929292;
    width: 100%;
    box-shadow: 0px 12px 32px -9px black;
    height: 100%;
    overflow: hidden;
}
#mobile-app-wrapper .mobile-client-img:after {
    content: " ";
    position: absolute;
    top: 65px;
    border-top: 10px solid transparent;
    border-right: none;
    border-left: 22px solid #929292;
    border-bottom: 10px solid transparent;
    right: -20px;
}

/* --------------------------
Client Css Ends Here
----------------------------- */

/* --------------------------
5.13 Footer Css Starts Here
----------------------------- */

#mobile-app-wrapper footer {
    background-color: #1d1d1d;
    padding: 40px 0 32px 0;
    margin-top: 0;
    color: #e5e5e5;
}
#mobile-app-wrapper  .input-field {
    background: #4b4b4b;
    border: 1px solid #4b4b4b;
}
#mobile-app-wrapper .input-field:focus {
    box-shadow: 10px 0 20px 10px #4b4b4b69;
}
#mobile-app-wrapper .newsletter-logo p, #mobile-app-wrapper .portfolio-wrapper p a, #mobile-app-wrapper .social-media li a{
    color: #e5e5e5;
}
#mobile-app-wrapper .address-wrapper {
    border-top: 1px solid #6d6d6d;
    border-bottom: 1px solid #6d6d6d;
}

/* --------------------------
Footer Css Ends Here
----------------------------- */

/* ------------------- 
DEMO 3 CSS PAGE ENDS
------------------- */

/* ------------------- 
6. DEMO 4 CSS PAGE STARTS 
------------------- */

/* --------------------------
6.1 Body Css Starts Here
----------------------------- */

#artist-wrapper, #dreamModal .modal-body {
    font-family: BwGlennSans-Regular, BwGlennSans-Medium, Lora-Regular, sans-serif;
    background-image: url(../images/artist-bg-pattern.jpg);
    color: #fff;
    background-color: #272f37;
    margin: 0;
    background-repeat: repeat;
}

/* --------------------------
Body Css Ends Here
----------------------------- */

/* --------------------------
6.2 Header Css Starts Here
----------------------------- */


/* --------------------------
Header Css Ends Here
----------------------------- */

/* --------------------------
6.3 Banner Css Starts Here
----------------------------- */

#artist-wrapper .side-content {
    position: absolute;
    top: 40%;
    transform: rotate(270deg);
    left: -8%;
}
#artist-wrapper .side-content h3 {
    font-size: 42px;
    line-height: 52px;
    font-family: 'BwGlennSans-Bold';
    color: #97979757;
}
#artist-wrapper .banner-wrapper {
    padding: 160px 0 30px 0;
    background-image: url(../images/artist-shadow.png);
    background-repeat: no-repeat;
    background-size: 70% 100%;
    background-position: bottom right;
}
#artist-wrapper .banner-image-wrap {
    width: 50%;
    position: absolute;
    right: 0;
    top: 100px;
}
#artist-wrapper .banner-content h1{
    font-size: 120px;
    font-family: 'BwGlennSans-ExtraBold';
}
#artist-wrapper .banner-content h2 {
    text-align: center;
    font-family: 'MisterLondonScript-Regular';
    font-size: 160px;
    margin-top: -70px;
}
#artist-wrapper .banner-content p {
    font-size: 24px;
    line-height: 36px;
    padding: 4px 0;
    max-width: 90%;
    width: 100%;
}
#artist-wrapper .banner-content p strong{
    font-family: 'BwGlennSans-Bold';
}
#artist-wrapper .banner-link {
    padding: 30px 0;
}
#artist-wrapper .banner-link a {
    font-size: 24px;
    line-height: 24px;
    color: #d7992f;
    transition: 0.48s;
    margin-left: 12px;
}
#artist-wrapper .banner-link a:hover{
    color: #fff;
}
#artist-wrapper .banner-link span {
    background-color: #d7992f;
    padding: 10px 8px;
    border-radius: 50%;
    color: #fff;
    font-size: 14px;
}
#artist-wrapper .banner-detail {
    padding: 50px 0;
}
#artist-wrapper .banner-text {
    display: inline-block;
    padding-left: 36px;
}
#artist-wrapper .banner-text h3{
    font-family: 'BwGlennSans-Bold';
    font-size: 26px;
    line-height: 36px;
}
#artist-wrapper .banner-text a {
    color: #d7992f;
    font-size: 22px;
    line-height: 24px;
    margin-top: 8px;
    display: block;
    transition: 0.48s;
}
#artist-wrapper .banner-text a:hover {
    color: #fff;
}
#artist-wrapper .show-mobile{
    display: none;
}

/* --------------------------
Banner Css Ends Here
----------------------------- */

/* --------------------------
6.4 Current Position Css Starts Here
----------------------------- */

#artist-wrapper .position-wrapper {
    padding: 0px 0 0 0;
}
#artist-wrapper .position-text h3{
    font-size: 40px;
    line-height: 52px;
    font-family: 'BwGlennSans-Bold';
}
#artist-wrapper .position-text h3 a, #artist-wrapper .patents-content a, #artist-wrapper .blog-detail-content h2 a{
    color: #fff;
    transition: 0.48s;
}
#artist-wrapper .position-text h3 a:hover, #artist-wrapper .blog-detail-content h2 a:hover{
    color: #d7992f;
}
#artist-wrapper .patents-content a:hover{
    color: #fff;
}
#artist-wrapper .position-text .icon-right-arrow {
    font-size: 13px;
    background-color: #d7992f;
    padding: 11px 9px;
    border-radius: 50%;
    margin-left: 16px;
    margin-top: 14px;
    width: 34px;
    height: 34px;
    position: absolute;
    transform: rotate(90deg);
}
#artist-wrapper .position-company {
    width: 100%;
    padding: 20px 70px;
    vertical-align: middle;
    text-decoration: none;
    background: #fff;
    border-radius: 22px;
    height: 270px;
    display: table-cell;
}
#artist-wrapper .current-position {
    margin: 70px 0 10px 0;
}
#artist-wrapper .position-company img {
    max-width: 50%;
    margin: 0 auto;
    display: block;
    width: 100%;
}
#artist-wrapper .position-company-text {
    padding: 44px 50px;
}
#artist-wrapper .position-company-text h3{
    font-size: 32px;
    font-family: 'BwGlennSans-Bold';
    line-height: 52px;
}
#artist-wrapper .position-company-text h5 {
    font-size: 26px;
    line-height: 43px;
    padding: 4px 0 0 0;
}
#artist-wrapper .position-company-text h6 {
    font-size: 18px;
    font-family: 'BwGlennSans-Regular';
    padding: 20px 0;
    line-height: 28px;
}

/* --------------------------
Current Position Css Ends Here
----------------------------- */

/* --------------------------
6.5 Dream Css Starts Here
----------------------------- */

#artist-wrapper .dream-wrapper {
    padding: 130px 0 0 0;
}
#artist-wrapper .dream-content h3{
    font-size: 38px;
    line-height: 52px;
    font-family: 'BwGlennSans-Bold';
}
#artist-wrapper .dream-content h4{
    font-size: 32px;
    line-height: 52px;
    font-family: 'BwGlennSans-Bold';
    padding: 30px 0;
}
#artist-wrapper .dream-content p {
    font-size: 22px;
    line-height: 40px;
    margin-bottom: 40px;
}
#artist-wrapper .dream-author {
    max-width: 80%;
    width: 100%;
    margin: 0 0 0 auto;
}
#artist-wrapper .dream-btn a {
    background-color: #d7992f;
    color: #fff;
    padding: 20px 50px;
    border-radius: 50px;
    margin: 24px 0;
    display: inline-block;
    font-size: 24px;
    transition: 0.48s;
    font-family: 'BwGlennSans-Medium';
}
#artist-wrapper .dream-btn a:hover{
    background-color: #a9782e;
}

/* --------------------------
Dream Css Ends Here
----------------------------- */

/* --------------------------
6.6 Awards Css Starts Here
----------------------------- */

#artist-wrapper .awards-wrapper{
    padding: 130px 0 0 0;
}
#artist-wrapper .awards-heading h1{
    font-size: 40px;
    line-height: 52px;
    font-family: 'BwGlennSans-Bold';
}
#artist-wrapper .awards-img img{
    width: 18%;
    margin-left: -100px;
}
#artist-wrapper .awards-content li {
    font-size: 24px;
    background: url(../images/artist-awards-star.png);
    padding-left: 100px;
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 80px;
    font-family: 'BwGlennSans-Regular';
    width: 48%;
    display: inline-block;
    margin: 24px 0;
    min-height: 80px;
    vertical-align: middle;
    line-height: 38px;
    margin-right: 15px;
}
#artist-wrapper .awards-content li p{
    min-height: 80px;
    align-items: center;
    display: flex;
}
#artist-wrapper .awards-content {
    padding: 30px 0;
}
#artist-wrapper .awards-content li p strong{
    font-family: 'BwGlennSans-Bold';
    display: contents;
}
#artist-wrapper .see-btn {
    margin: 50px 0 0 0;
    display: block;
}
#artist-wrapper .see-btn a {
    background-color: #dc6810;
    color: #fff;
    padding: 14px 50px;
    border-radius: 40px;
    font-size: 24px;
    font-family: 'BwGlennSans-Medium';
    display: inline-block;
    transition: 0.48s;
}
#artist-wrapper .see-btn a:hover{
    background-color: #b3530a;
}
#artist-wrapper .see-btn a .icon-right-arrow {
    font-size: 18px;
    margin-left: 10px;
    position: relative;
    left: 0;
    transition: .48s;
}
#artist-wrapper .see-btn a:hover .icon-right-arrow {
    left: 6px;
    transition: all ease .48s;
}

/* --------------------------
Awards Css Ends Here
----------------------------- */

/* --------------------------
6.7 Patent Css Starts Here
----------------------------- */

#artist-wrapper .patents-wrapper {
    padding: 130px 0 0 0;
}
#artist-wrapper .patents-content {
    width: 100%;
    padding: 0;
    vertical-align: middle;
    border-radius: 22px;
    height: 270px;
}
#artist-wrapper .patent-image-text {
    background: #1581b69e;
    padding: 35px 40px;
    border-radius: 24px;
    width: 100%;
}
#artist-wrapper .patent-image-text span{
    display: inline-block;
    width: 20%;
    float: right;
}
#artist-wrapper .patent-image-text h2{
    font-size: 120px;
    font-family: 'BwGlennSans-Bold';
}
#artist-wrapper .patent-image-text h3{
    font-family: 'BwGlennSans-Bold';
    font-size: 40px;
    line-height: 52px;
}

/* --------------------------
Patent Css Ends Here
----------------------------- */

/* --------------------------
6.8 Showcase Css Starts Here
----------------------------- */

#artist-wrapper .showcase-wrapper {
    padding: 130px 0 0 0;
    text-align: center;
}
#artist-wrapper .artist-showcase-tabs .nav-tabs {
    border-bottom: none !important;
}
#artist-wrapper .artist-showcase-tabs .nav-tabs .nav-link {
    color: #fff !important;
    border-left: none;
    padding: 10px 18px;
    margin: 20px 24px;
    font-size: 18px;
    font-family: 'Flexo-Demi';
    border-right: none;
    border-top: none;
    border-bottom: none;
}
#artist-wrapper .nav-tabs .nav-item.show .nav-link, #artist-wrapper .nav-tabs .nav-link.active {
    border-bottom: 1px solid #fff !important;
    background-color: transparent;
    color: #fff !important;
}
#artist-wrapper .showcase-slider-feature .slider {
    margin: 0 auto;
}
#artist-wrapper .showcase-slider-feature .slick-slide {
    margin: 0px;
    outline: none;
}
#artist-wrapper .showcase-slider-feature .slider img {
    outline: none;
}
#artist-wrapper .artist-showcase-tabs {
    padding: 10px 0 50px 0;
}
#artist-wrapper .slick-lightbox-slick-img{
    max-width: 90% !important;
    border-radius: 20px;
}
#artist-wrapper .slick-slide img {
    display: block;
    outline: none !important;
     width: 320px;
    margin: 16px 14px;
    border-radius: 20px;
      -webkit-box-shadow: 0px 0px 8px 0px rgba(29, 29, 29, 0.8);
    -moz-box-shadow: 0px 0px 8px 0px rgba(29, 29, 29, 0.8);
    box-shadow: 0px 0px 8px 0px rgba(29, 29, 29, 0.8);
}
#artist-wrapper .slick-lightbox-slick-item {
    outline: none !important;
}
#artist-wrapper .slick-prev, #artist-wrapper .slick-next {
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 30px;
    height: 30px;
    margin-top: -10px;
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
#artist-wrapper .slick-prev{
    background-image: url(../images/slick-left-arrow.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
#artist-wrapper .slick-next{
    background-image: url(../images/slick-right-arrow.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
#artist-wrapper .slick-lightbox-close:before {
    font-size: 30px;
}
#artist-wrapper .showcase-wrapper .deserve-button a{
    background-color: #d7992f;
}
#artist-wrapper .showcase-wrapper .deserve-button a:hover{
    background-color: #a9782e;
}

/* --------------------------
Showcase Css Ends Here
----------------------------- */


/* --------------------------
6.9 Blog Css Starts Here
----------------------------- */

#artist-wrapper .blog-wrapper {
    padding: 130px 0 0 0;
}
#artist-wrapper .blog-heading, #artist-wrapper .contact-heading {
    text-align: center;
}
#artist-wrapper .blog-heading h2, #artist-wrapper .contact-heading h2, #artist-wrapper .showcase-heading h2{
    font-family: 'BwGlennSans-Bold';
    font-size: 40px;
    line-height: 52px;
}
#artist-wrapper .blog-heading p, #artist-wrapper .contact-heading p, #artist-wrapper .showcase-heading p{
    font-size: 32px;
    line-height: 44px;
    padding: 14px 0;
}
#artist-wrapper .blog-detail {
    padding: 40px 0;
}
#artist-wrapper .blog-content {
    padding: 50px 0;
}
#artist-wrapper .blog-image-wrap {
    max-width: 75%;
    width: 100%;
    margin: 0 auto;
}
#artist-wrapper .feed-image img{
    max-width: 100%;
    height: auto;
    width: 100%;
}
#artist-wrapper .blog-image-wrap img{
    border-radius: 200px 80px 200px 200px;
}
#artist-wrapper .blog-detail-content h2{
    font-family: 'BwGlennSans-Bold';
    font-size: 32px;
    line-height: 44px;
}
#artist-wrapper .blog-detail-content h3{
    font-size: 28px;
    line-height: 44px;
    padding-top: 8px;
}
#artist-wrapper .blog-detail-content p {
    font-size: 22px;
    line-height: 36px;
}
#artist-wrapper .blog-category{
    margin: 0 16px;
}
#artist-wrapper .blog-info {
    padding: 20px 0;
}
#artist-wrapper .blog-info p{
    font-size: 22px;
    line-height: 32px;
    color: #555a5d;
}
#artist-wrapper .blog-link {
    margin: 30px 0;
}
#artist-wrapper .blog-link a{
    font-size: 22px;
    line-height: 24px;
    color: #d7992f;
    transition: 0.48s;
    margin-left: 12px;
}
#artist-wrapper .blog-link a:hover{
    color: #fff;
}
#artist-wrapper .blog-link span{
    background-color: #d7992f;
    padding: 10px 8px;
    border-radius: 50%;
    color: #fff;
}

/* --------------------------
Blog Css Ends Here
----------------------------- */

/* --------------------------
6.10 Contact Css Starts Here
----------------------------- */

#artist-wrapper .contact-wrapper {
    padding: 130px 0 50px 0;
}
#artist-wrapper .contact-form {
    text-align: left;
    max-width: 70%;
    width: 100%;
    margin: 20px auto;
}
#artist-wrapper .input-filed {
    position: relative;
    margin: 18px auto;
    width: 100%;
}
#artist-wrapper .input-filed .label {
    position: absolute;
    top: 16px;
    left: 0;
    font-size: 20px;
    color: #fff;
    transform-origin: 0 0;
    transition: all 0.2s ease;
    font-family: 'BwGlennSans-Medium';
}
#artist-wrapper .input-filed .borderLabel {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 0;
    transition: all 0.15s ease;
}
#artist-wrapper .input-filed input ,  #artist-wrapper .input-filed textarea{
    -webkit-appearance: none;
    width: 100%;
    border: 0;
    font-family: inherit;
    padding: 12px 0;
    height: 48px;
    font-size: 18px;
    border-bottom: 2px solid #797979;
    background: none;
    border-radius: 0;
    color: #fff;
    transition: all 0.15s ease;
}
#artist-wrapper .input-filed textarea{
    min-height: 100px;
}
#artist-wrapper .input-filed input:not(:placeholder-shown) + span, #artist-wrapper .input-filed textarea:not(:placeholder-shown) + span {
    color: #fff;
    transform: translateY(-26px) scale(0.75);
}
#artist-wrapper .input-filed input:focus, #artist-wrapper .input-filed textarea:focus {
    background: none;
    outline: none;
    border-bottom: 2px solid #d7992f;
}
#artist-wrapper .input-filed input:focus + span, #artist-wrapper .input-filed textarea:focus + span {
    color: #d7992f;
    transform: translateY(-26px) scale(0.75);
}
#artist-wrapper .input-filed input:focus + span + .borderLabel {
    transform: scaleX(1);
    border-bottom: 2px solid #d7992f;
}
#artist-wrapper .form-submit-btn button{
    background-color: #d7992f;
    color: #fff;
    padding: 15px 50px;
    border-radius: 50px;
    margin: 24px 0;
    display: inline-block;
    font-size: 24px;
    border: none;
    transition: 0.48s;
    font-family: 'BwGlennSans-Medium';
}
#artist-wrapper .form-submit-btn button:hover{
    background-color: #a9782e;
}
#artist-wrapper .form-submit-btn .icon-right-arrow{
    font-size: 20px;
}
#artist-wrapper .form-submit-btn {
    margin: 20px 0;
}
#artist-wrapper .materialSelect {
    position: relative;
}
#artist-wrapper .materialSelect.error .select:not(.isOpen) {
    border: 1px solid #dd2c00 !important;
}
#artist-wrapper .materialSelect.error .message {
    display: block;
}
#artist-wrapper .materialSelect.inline {
    float: none !important;
    display: inline-block;
    z-index: 0;
    min-width: 100%;
}
#artist-wrapper .materialSelect.inline .select {
    transform: translate(0, 0);
    top: 0;
    left: 0;
    margin: 0;
    transition: all 0.2s !important;
    width: 100%;
}
#artist-wrapper .materialSelect.inline .select.isOpen {
    transform: translate(0, -50%);
    top: 50%;
}
#artist-wrapper .materialSelect:not(.inline) {
    width: 100%;
}
#artist-wrapper .materialSelect:not(.inline) .select {
    width: 100%;
    margin-left: 50%;
    transform: translate(-50%, 0);
}
#artist-wrapper .materialSelect .select {
    position: absolute;
    margin: 0;
    padding: 0;
    top: -1px;
    user-select: none;
    width: 250px;
    text-align: center;
    margin: 0px auto;
    z-index: 9999;
    height: 48px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    margin-left: 0;
    transform: none;
    border-bottom: 2px solid #797979;
}
#artist-wrapper .materialSelect .select:after {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #bbb;
    content: '';
    display: block;
    height: 0px;
    position: absolute;
    pointer-events: none;
    top: 19px;
    right: 10px;
    width: 0px;
}
#artist-wrapper .materialSelect .select li {
    cursor: pointer;
    font-size: 18px;
    list-style: none;
    line-height: 48px;
    padding: 0 40px 0 0px;
    position: relative;
    overflow: hidden;
    text-align: left;
    font-family: 'BwGlennSans-Medium';
}
#artist-wrapper .materialSelect .select li[data-selected] {
    height: 48px;
}
#artist-wrapper .materialSelect .select li:not([data-selected]) {
    height: 0px;
    opacity: 0;
}
#artist-wrapper .materialSelect .select.isOpen {
    background-color: #fafafa;
    border-radius: 2px;
    box-shadow: 1px 2px 3px 1px rgba(0, 0, 0, 0.3);
    padding-bottom: 16px;
    top: -96px;
    height: 250px;
    z-index: 99999;
    color: #000;
    border-bottom: 0;
}
#artist-wrapper .materialSelect .select.isOpen:after {
    display: none;
}
#artist-wrapper .materialSelect .select.isOpen:before {
    border-color: transparent !important;
}
#artist-wrapper .materialSelect .select.isOpen li {
    height: 48px;
    opacity: 1;
    padding-left: 16px;
}
#artist-wrapper .materialSelect .select.isOpen li:hover {
    background-color: #eee;
}
#artist-wrapper .materialSelect .select.isOpen li:active {
    background-color: #dbdbdb;
}
#artist-wrapper .materialSelect .select:not(.isOpen):active {
    box-shadow: 1px 2px 1px 0 rgba(0, 0, 0, 0.3);
}
#artist-wrapper .materialSelect .select + .select:before {
    border-left: thin solid #c8c8c8;
    content: '';
    height: 32px;
    left: 0;
    position: absolute;
    top: 8px;
}

/* --------------------------
Contact Css Ends Here
----------------------------- */

/* --------------------------
6.11 Footer Css Starts Here
----------------------------- */

#artist-wrapper footer {
    background-color: transparent;
    padding: 40px 0 32px 0;
    margin-top: 0;
    color: #949ea5;
}
#artist-wrapper .portfolio-wrapper p a , #artist-wrapper .newsletter-logo p, #artist-wrapper .social-media li a {
    color: #949ea5;
}
#artist-wrapper .address-wrapper {
    border-top: 1px solid #4b5258;
    border-bottom: 1px solid #4b5258;
}
#artist-wrapper .input-field {
    background: #373e43;
    border: 1px solid #383e43;
}
#artist-wrapper .input-field:focus {
    box-shadow: 10px 0 20px 10px #383e4369;
}
#artist-wrapper #dreamModal .modal-dialog {
    max-width: 420px;
    margin: 200px auto;
}
#artist-wrapper #dreamModal .modal-body {
    padding: 36px;
}
#artist-wrapper #dreamModal .modal-body h2 {
    font-family: 'BwGlennSans-Bold';
    font-size: 32px;
    line-height: 52px;
    margin-bottom: 20px;
}
#artist-wrapper #dreamModal .close {
    font-size: 30px;
    color: #fff;
    text-shadow: none;
    opacity: 1;
    transition: 0.48s;
    position: relative;
    left: 50px;
    top: -50px;
    background: #d7992f;
    border-radius: 50%;
    width: 42px;
    height: 42px;
}
#artist-wrapper #dreamModal .close:hover{
    color: #d7992f;
    background-color: #fff;
}
#artist-wrapper .modal-backdrop {
    background-color: #d8d8d8;
}
#artist-wrapper #dreamModal {
    padding-right: 0 !important;
}

/* --------------------------
Footer Css Ends Here
----------------------------- */


/* ------------------- 
DEMO 4 CSS PAGE ENDS
------------------- */


/* ------------------- 
7. Style Selector CSS Starts 
------------------- */

#style-selector {
    position: fixed;
    right: -280px;
    top: 0;
    z-index: 1001;
    box-shadow: -3px 0px 50px -2px rgba(0, 0, 0, 0.14);
    background: #fff;
    height: 100%;
    width: 280px;
}
#style-selector-container {
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    transition: all 0.5s;
}
#style-selector .style-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 56px;
    cursor:pointer;
    opacity: 1;
    background: #fff;
    border-radius: 5px 0px 0px 5px;
    box-shadow: -3px 0px 5px -2px rgba(0, 0, 0, 0.14);
    float: left;
    margin-left: -52px;
    margin-top: 150px;
    top: 100px;
    color: #000000;
}
#style-selector .ss-title h2 {
    font-size: 22px;
    text-align: center;
    margin-bottom: 30px;
    font-family: "Flexo-Bold";
    color: #000;
}
#style-selector .style-toggle svg {
    width: 25px;
    height: 25px;
}
#style-selector .ss-content {
    border-bottom: 1px solid #dddddd;
    padding: 0px 0px 30px 0;
    margin: 30px;
}
#style-selector .landing-pages img{
    border: 4px solid #000000;
}
#style-selector .landing-pages a h3 {
    font-size: 18px;
    text-align: center;
    padding: 10px 0 30px 0;
    color: #000;
    font-family: 'Flexo-Demi';
    transition: 0.48s;
}
#style-selector .landing-pages .active-template{
    color: #d7992f;
    font-size: 18px;
    text-align: center;
    padding: 10px 0 30px 0;
    font-family: 'Flexo-Demi';
    transition: 0.48s;
}
#style-selector .landing-pages a h3:hover{
    color: #d7992f;
}

/* ------------------- 
Style Selector CSS Ends 
------------------- */

/* ------------------- 
8. COLOR SWITCHER CSS STARTS
/* ------------------- 


/* ------------------- 
8.1 COLOR SWITCHER CSS STARTS HERE FOR DEMO 1
/* ------------------- 


/* ------------------- 
MAROON COLOR PICKER CSS STARTS
------------------- */

.maroon-color {
    background: #b10503;
    padding: 20px;
    cursor: pointer;
    width: 40px;
    border-radius: 50%;
    display: inline-block;
    margin: 0px 10px 0 0px;
}
.maroon .box-one, .maroon .deserve-button a, .maroon .expertise-button a, .maroon .submit-btn, .maroon .menu-icon-line,
.maroon .slick-dots li.slick-active button{
    background-color: #b10503 !important;
}
.maroon .navbar-brand{
    background: #b10503;
}
.maroon .banner-text-wrapper h4, .maroon .nav-item .nav-link.active, .maroon .navigation-wrap .nav-item:hover .nav-link, .maroon .experience-content h4,
.maroon .deserve-text h5, .maroon .expertise-list-content span, .maroon .expertise-quote h4, .maroon .expertise-list-content span,
.maroon .ventures-wrapper .icon-left-arrow.slick-arrow:hover, .maroon .ventures-wrapper .icon-right-arrow.slick-arrow:hover,
.maroon #awardsSlider .carousel-indicators .active, .maroon #awardsSlider .carousel-indicators li:hover, 
.maroon .input-filed input:focus + span, .maroon .input-filed textarea:focus + span, .maroon .social-media li a:hover{
    color: #b10503 !important;
}
.maroon .input-filed input:focus, .maroon .input-filed textarea:focus{
    border-bottom: 2px solid #b10503 !important;
}
.maroon .input-filed input:focus + span + .borderLabel{
    border-bottom: 2px solid #b10503 !important;
}
.maroon .submit-btn {
    border: 1px solid #b10503;
}
.maroon .expertise-button a span{
    color: #fff !important;
}
.maroon .deserve-button a:hover, .maroon .expertise-button a:hover, .maroon .submit-btn:hover {
    background-color: #8c0403 !important;
}
.maroon .submit-btn:hover{
    border: 1px solid #8c0403;
}

/* ------------------- 
MAROON COLOR PICKER CSS ENDS
------------------- */

/* ------------------- 
CITRUS COLOR PICKER CSS STARTS
------------------- */

.citrus-color {
    background: #88b102;
    padding: 20px;
    cursor: pointer;
    width: 40px;
    border-radius: 50%;
    display: inline-block;
    margin: 0px 10px 0 0px;
}
.citrus .box-one, .citrus .deserve-button a, .citrus .expertise-button a, .citrus .submit-btn, .citrus .menu-icon-line,
.citrus .slick-dots li.slick-active button{
    background-color: #88b102 !important;
}
.citrus .navbar-brand{
    background: #88b102;
}
.citrus .banner-text-wrapper h4, .citrus .nav-item .nav-link.active, .citrus .navigation-wrap .nav-item:hover .nav-link, .citrus .experience-content h4,
.citrus .deserve-text h5, .citrus .expertise-list-content span, .citrus .expertise-quote h4, .citrus .expertise-list-content span,
.citrus .ventures-wrapper .icon-left-arrow.slick-arrow:hover, .citrus .ventures-wrapper .icon-right-arrow.slick-arrow:hover,
.citrus #awardsSlider .carousel-indicators .active, .citrus #awardsSlider .carousel-indicators li:hover, 
.citrus .input-filed input:focus + span, .citrus .input-filed textarea:focus + span, .citrus .social-media li a:hover{
    color: #88b102 !important;
}
.citrus .input-filed input:focus, .citrus .input-filed textarea:focus{
    border-bottom: 2px solid #88b102 !important;
}
.citrus .input-filed input:focus + span + .borderLabel{
    border-bottom: 2px solid #88b102 !important;
}
.citrus .submit-btn {
    border: 1px solid #88b102;
}
.citrus .expertise-button a span{
    color: #fff !important;
}
.citrus .deserve-button a:hover, .citrus .expertise-button a:hover, .citrus .submit-btn:hover {
    background-color: #678407 !important;
}
.citrus .submit-btn:hover{
    border: 1px solid #678407;
}


/* ------------------- 
CITRUS COLOR PICKER CSS ENDS
------------------- */

/* ------------------- 
HOT TODDY COLOR PICKER CSS STARTS
------------------- */

.hottoddy-color {
    background: #b07b05;
    padding: 20px;
    cursor: pointer;
    width: 40px;
    border-radius: 50%;
    display: inline-block;
    margin: 0px 10px 0 0px;
}
.hottoddy .box-one, .hottoddy .deserve-button a, .hottoddy .expertise-button a, .hottoddy .submit-btn, .hottoddy .menu-icon-line,
.hottoddy .slick-dots li.slick-active button{
    background-color: #b07b05 !important;
}
.hottoddy .navbar-brand{
    background: #b07b05;
}
.hottoddy .banner-text-wrapper h4, .hottoddy .nav-item .nav-link.active, .hottoddy .navigation-wrap .nav-item:hover .nav-link, .hottoddy .experience-content h4,
.hottoddy .deserve-text h5, .hottoddy .expertise-list-content span, .hottoddy .expertise-quote h4, .hottoddy .expertise-list-content span,
.hottoddy .ventures-wrapper .icon-left-arrow.slick-arrow:hover, .hottoddy .ventures-wrapper .icon-right-arrow.slick-arrow:hover,
.hottoddy #awardsSlider .carousel-indicators .active, .hottoddy #awardsSlider .carousel-indicators li:hover, 
.hottoddy .input-filed input:focus + span, .hottoddy .input-filed textarea:focus + span, .hottoddy .social-media li a:hover{
    color: #b07b05 !important;
}
.hottoddy .input-filed input:focus, .hottoddy .input-filed textarea:focus{
    border-bottom: 2px solid #b07b05 !important;
}
.hottoddy .input-filed input:focus + span + .borderLabel{
    border-bottom: 2px solid #b07b05 !important;
}
.hottoddy .submit-btn {
    border: 1px solid #b07b05;
}
.hottoddy .expertise-button a span{
    color: #fff !important;
}
.hottoddy .deserve-button a:hover, .hottoddy .expertise-button a:hover, .hottoddy .submit-btn:hover {
    background-color: #9c6d03 !important;
}
.hottoddy .submit-btn:hover{
    border: 1px solid #9c6d03;
}


/* ------------------- 
HOT TODDY COLOR PICKER CSS ENDS
------------------- */

/* ------------------- 
BLUE GREEN COLOR PICKER CSS STARTS
------------------- */

.bluegreen-color {
    background: #0cabb1;
    padding: 20px;
    cursor: pointer;
    width: 40px;
    border-radius: 50%;
    display: inline-block;
    margin: 0px 10px 0 0px;
}
.bluegreen .box-one, .bluegreen .deserve-button a, .bluegreen .expertise-button a, .bluegreen .submit-btn, .bluegreen .menu-icon-line,
.bluegreen .slick-dots li.slick-active button{
    background-color: #0cabb1 !important;
}
.bluegreen .navbar-brand{
    background: #0cabb1;
}
.bluegreen .banner-text-wrapper h4, .bluegreen .nav-item .nav-link.active, .bluegreen .navigation-wrap .nav-item:hover .nav-link, .bluegreen .experience-content h4,
.bluegreen .deserve-text h5, .bluegreen .expertise-list-content span, .bluegreen .expertise-quote h4, .bluegreen .expertise-list-content span,
.bluegreen .ventures-wrapper .icon-left-arrow.slick-arrow:hover, .bluegreen .ventures-wrapper .icon-right-arrow.slick-arrow:hover,
.bluegreen #awardsSlider .carousel-indicators .active, .bluegreen #awardsSlider .carousel-indicators li:hover, 
.bluegreen .input-filed input:focus + span, .bluegreen .input-filed textarea:focus + span, .bluegreen .social-media li a:hover{
    color: #0cabb1 !important;
}
.bluegreen .input-filed input:focus, .bluegreen .input-filed textarea:focus{
    border-bottom: 2px solid #0cabb1 !important;
}
.bluegreen .input-filed input:focus + span + .borderLabel{
    border-bottom: 2px solid #0cabb1 !important;
}
.bluegreen .submit-btn {
    border: 1px solid #0cabb1;
}
.bluegreen .expertise-button a span{
    color: #fff !important;
}
.bluegreen .deserve-button a:hover, .bluegreen .expertise-button a:hover, .bluegreen .submit-btn:hover {
    background-color: #06959a !important;
}
.bluegreen .submit-btn:hover{
    border: 1px solid #06959a;
}


/* ------------------- 
BLUE GREEN COLOR PICKER CSS ENDS
------------------- */

/* ------------------- 
GALLIANO COLOR PICKER CSS STARTS
------------------- */

.galliano-color {
    background: #c9af0e;
    padding: 20px;
    cursor: pointer;
    width: 40px;
    border-radius: 50%;
    display: inline-block;
    margin: 0px 10px 0 0px;
}
.galliano .box-one, .galliano .deserve-button a, .galliano .expertise-button a, .galliano .submit-btn, .galliano .menu-icon-line,
.galliano .slick-dots li.slick-active button{
    background-color: #c9af0e !important;
}
.galliano .navbar-brand{
    background: #c9af0e;
}
.galliano .banner-text-wrapper h4, .galliano .nav-item .nav-link.active, .galliano .navigation-wrap .nav-item:hover .nav-link, .galliano .experience-content h4,
.galliano .deserve-text h5, .galliano .expertise-list-content span, .galliano .expertise-quote h4, .galliano .expertise-list-content span,
.galliano .ventures-wrapper .icon-left-arrow.slick-arrow:hover, .galliano .ventures-wrapper .icon-right-arrow.slick-arrow:hover,
.galliano #awardsSlider .carousel-indicators .active, .galliano #awardsSlider .carousel-indicators li:hover, 
.galliano .input-filed input:focus + span, .galliano .input-filed textarea:focus + span, .galliano .social-media li a:hover{
    color: #c9af0e !important;
}
.galliano .input-filed input:focus, .galliano .input-filed textarea:focus{
    border-bottom: 2px solid #c9af0e !important;
}
.galliano .input-filed input:focus + span + .borderLabel{
    border-bottom: 2px solid #c9af0e !important;
}
.galliano .submit-btn {
    border: 1px solid #c9af0e;
}
.galliano .expertise-button a span{
    color: #fff !important;
}
.galliano .deserve-button a:hover, .galliano .expertise-button a:hover, .galliano .submit-btn:hover {
    background-color: #b19a0e !important;
}
.galliano .submit-btn:hover{
    border: 1px solid #b19a0e;
}


/* ------------------- 
GALLIANO COLOR PICKER CSS ENDS
------------------- */

/* ------------------- 
GREEN COLOR PICKER CSS STARTS
------------------- */

.green-color {
    background: #01b05f;
    padding: 20px;
    cursor: pointer;
    width: 40px;
    border-radius: 50%;
    display: inline-block;
    margin: 0px 10px 0 0px;
}
.green .box-one, .green .deserve-button a, .green .expertise-button a, .green .submit-btn, .green .menu-icon-line,
.green .slick-dots li.slick-active button{
    background-color: #01b05f !important;
}
.green .navbar-brand{
    background: #01b05f;
}
.green .banner-text-wrapper h4, .green .nav-item .nav-link.active, .green .navigation-wrap .nav-item:hover .nav-link, .green .experience-content h4,
.green .deserve-text h5, .green .expertise-list-content span, .green .expertise-quote h4, .green .expertise-list-content span,
.green .ventures-wrapper .icon-left-arrow.slick-arrow:hover, .green .ventures-wrapper .icon-right-arrow.slick-arrow:hover,
.green #awardsSlider .carousel-indicators .active, .green #awardsSlider .carousel-indicators li:hover, 
.green .input-filed input:focus + span, .green .input-filed textarea:focus + span, .green .social-media li a:hover{
    color: #01b05f !important;
}
.green .input-filed input:focus, .green .input-filed textarea:focus{
    border-bottom: 2px solid #01b05f !important;
}
.green .input-filed input:focus + span + .borderLabel{
    border-bottom: 2px solid #01b05f !important;
}
.green .submit-btn {
    border: 1px solid #01b05f;
}
.green .expertise-button a span{
    color: #fff !important;
}
.green .deserve-button a:hover, .green .expertise-button a:hover, .green .submit-btn:hover {
    background-color: #088c4f !important;
}
.green .submit-btn:hover{
    border: 1px solid #088c4f;
}

/* ------------------- 
GREEN COLOR PICKER CSS ENDS
------------------- */

/* ------------------- 
PURPLE COLOR PICKER CSS STARTS
------------------- */

.purple-color {
    background: #a904b1;
    padding: 20px;
    cursor: pointer;
    width: 40px;
    border-radius: 50%;
    display: inline-block;
    margin: 0px 10px 0 0px;
}
.purple .box-one, .purple .deserve-button a, .purple .expertise-button a, .purple .submit-btn, .purple .menu-icon-line,
.purple .slick-dots li.slick-active button{
    background-color: #a904b1 !important;
}
.purple .navbar-brand{
    background: #a904b1;
}
.purple .banner-text-wrapper h4, .purple .nav-item .nav-link.active, .purple .navigation-wrap .nav-item:hover .nav-link, .purple .experience-content h4,
.purple .deserve-text h5, .purple .expertise-list-content span, .purple .expertise-quote h4, .purple .expertise-list-content span,
.purple .ventures-wrapper .icon-left-arrow.slick-arrow:hover, .purple .ventures-wrapper .icon-right-arrow.slick-arrow:hover,
.purple #awardsSlider .carousel-indicators .active, .purple #awardsSlider .carousel-indicators li:hover, 
.purple .input-filed input:focus + span, .purple .input-filed textarea:focus + span, .purple .social-media li a:hover{
    color: #a904b1 !important;
}
.purple .input-filed input:focus, .purple .input-filed textarea:focus{
    border-bottom: 2px solid #a904b1 !important;
}
.purple .input-filed input:focus + span + .borderLabel{
    border-bottom: 2px solid #a904b1 !important;
}
.purple .submit-btn {
    border: 1px solid #a904b1;
}
.purple .expertise-button a span{
    color: #fff !important;
}
.purple .deserve-button a:hover, .purple .expertise-button a:hover, .purple .submit-btn:hover {
    background-color: #76007b !important;
}
.purple .submit-btn:hover{
    border: 1px solid #76007b;
}

/* ------------------- 
PURPLE COLOR PICKER CSS ENDS
------------------- */

/* ------------------- 
COLOR SWITCHER CSS ENDS HERE FOR DEMO 1
/* ------------------- 

/* ------------------- 
8.2 COLOR SWITCHER CSS STARTS HERE FOR DEMO 2
/* ------------------- 

/* ------------------- 
MAROON COLOR PICKER CSS STARTS
------------------- */

.maroon .smm-author-view h4, .maroon .smm-solution-content h4, .maroon .smm-boom-content h4, .maroon .price-number,
.maroon .smm-client-review h4{
    color: #b10503 !important;
}

/* ------------------- 
MAROON COLOR PICKER CSS ENDS
------------------- */

/* ------------------- 
CITRUS COLOR PICKER CSS STARTS
------------------- */

.citrus .smm-author-view h4, .citrus .smm-solution-content h4, .citrus .smm-boom-content h4, .citrus .price-number,
.citrus .smm-client-review h4{
    color: #88b102 !important;
}

/* ------------------- 
CITRUS COLOR PICKER CSS ENDS
------------------- */

/* ------------------- 
HOT TODDY COLOR PICKER CSS STARTS
------------------- */

.hottoddy .smm-author-view h4, .hottoddy .smm-solution-content h4, .hottoddy .smm-boom-content h4, .hottoddy .price-number,
.hottoddy .smm-client-review h4{
    color: #b07b05 !important;
}

/* ------------------- 
HOT TODDY COLOR PICKER CSS ENDS
------------------- */

/* ------------------- 
BLUE GREEN COLOR PICKER CSS STARTS
------------------- */

.bluegreen .smm-author-view h4, .bluegreen .smm-solution-content h4, .bluegreen .smm-boom-content h4, .bluegreen .price-number,
.bluegreen .smm-client-review h4{
    color: #0cabb1 !important;
}

/* ------------------- 
BLUE GREEN COLOR PICKER CSS ENDS
------------------- */

/* ------------------- 
GALLIANO COLOR PICKER CSS STARTS
------------------- */

.galliano .smm-author-view h4, .galliano .smm-solution-content h4, .galliano .smm-boom-content h4, .galliano .price-number,
.galliano .smm-client-review h4{
    color: #c9af0e !important;
}

/* ------------------- 
GALLIANO COLOR PICKER CSS ENDS
------------------- */

/* ------------------- 
GREEN COLOR PICKER CSS STARTS
------------------- */

.green .smm-author-view h4, .green .smm-solution-content h4, .green .smm-boom-content h4, .green .price-number,
.green .smm-client-review h4{
    color: #01b05f !important;
}

/* ------------------- 
GREEN COLOR PICKER CSS ENDS
------------------- */

/* ------------------- 
PURPLE COLOR PICKER CSS STARTS
------------------- */

.purple .smm-author-view h4, .purple .smm-solution-content h4, .purple .smm-boom-content h4, .purple .price-number,
.purple .smm-client-review h4{
    color: #a904b1 !important;
}

/* ------------------- 
PURPLE COLOR PICKER CSS ENDS
------------------- */


/* ------------------- 
COLOR SWITCHER CSS ENDS HERE FOR DEMO 2
/* ------------------- 

/* ------------------- 
8.3 COLOR SWITCHER CSS STARTS HERE FOR DEMO 3
/* ------------------- 

/* ------------------- 
MAROON COLOR PICKER CSS STARTS
------------------- */

.maroon .mobile-banner-content .sub-title, .maroon .mobile-simple-heading, 
.maroon .mobile-faq-acc .acc-heading.collapsed:hover:after, 
.maroon .mobile-faq-acc .acc-heading[aria-expanded="true"]:hover:after, .maroon .mobile-client-review h4,
.maroon .is_active .process-list-item span{
    color: #b10503 !important;
}
.maroon .is_active .process-list-item:before {
    border: 1px solid #b10503 !important;
}
.maroon .is_active .process-list-item:after {
    background-color: #b10503 !important;
}
.maroon .process-list li.is_active span:before, .maroon .process-list li span:before {
    background: #b10503 !important;
}

/* ------------------- 
MAROON COLOR PICKER CSS ENDS
------------------- */

/* ------------------- 
CITRUS COLOR PICKER CSS STARTS
------------------- */

.citrus .mobile-banner-content .sub-title, .citrus .mobile-simple-heading, 
.citrus .mobile-faq-acc .acc-heading.collapsed:hover:after, 
.citrus .mobile-faq-acc .acc-heading[aria-expanded="true"]:hover:after, .citrus .mobile-client-review h4,
.citrus .is_active .process-list-item span{
    color: #88b102 !important;
}
.citrus .is_active .process-list-item:before {
    border: 1px solid #88b102 !important;
}
.citrus .is_active .process-list-item:after {
    background-color: #88b102 !important;
}
.citrus .process-list li.is_active span:before, .citrus .process-list li span:before {
    background: #88b102 !important;
}

/* ------------------- 
CITRUS COLOR PICKER CSS ENDS
------------------- */

/* ------------------- 
HOT TODDY COLOR PICKER CSS STARTS
------------------- */

.hottoddy .mobile-banner-content .sub-title, .hottoddy .mobile-simple-heading, 
.hottoddy .mobile-faq-acc .acc-heading.collapsed:hover:after, 
.hottoddy .mobile-faq-acc .acc-heading[aria-expanded="true"]:hover:after, .hottoddy .mobile-client-review h4,
.hottoddy .is_active .process-list-item span{
    color: #b07b05 !important;
}
.hottoddy .is_active .process-list-item:before {
    border: 1px solid #b07b05 !important;
}
.hottoddy .is_active .process-list-item:after {
    background-color: #b07b05 !important;
}
.hottoddy .process-list li.is_active span:before, .hottoddy .process-list li span:before {
    background: #b07b05 !important;
}

/* ------------------- 
HOT TODDY COLOR PICKER CSS ENDS
------------------- */

/* ------------------- 
BLUE GREEN COLOR PICKER CSS STARTS
------------------- */

.bluegreen .mobile-banner-content .sub-title, .bluegreen .mobile-simple-heading, 
.bluegreen .mobile-faq-acc .acc-heading.collapsed:hover:after, 
.bluegreen .mobile-faq-acc .acc-heading[aria-expanded="true"]:hover:after, .bluegreen .mobile-client-review h4,
.bluegreen .is_active .process-list-item span{
    color: #0cabb1 !important;
}
.bluegreen .is_active .process-list-item:before {
    border: 1px solid #0cabb1 !important;
}
.bluegreen .is_active .process-list-item:after {
    background-color: #0cabb1 !important;
}
.bluegreen .process-list li.is_active span:before, .bluegreen .process-list li span:before {
    background: #0cabb1 !important;
}

/* ------------------- 
BLUE GREEN COLOR PICKER CSS ENDS
------------------- */

/* ------------------- 
GALLIANO COLOR PICKER CSS STARTS
------------------- */

.galliano .mobile-banner-content .sub-title, .galliano .mobile-simple-heading, 
.galliano .mobile-faq-acc .acc-heading.collapsed:hover:after, 
.galliano .mobile-faq-acc .acc-heading[aria-expanded="true"]:hover:after, .galliano .mobile-client-review h4,
.galliano .is_active .process-list-item span{
    color: #c9af0e !important;
}
.galliano .is_active .process-list-item:before {
    border: 1px solid #c9af0e !important;
}
.galliano .is_active .process-list-item:after {
    background-color: #c9af0e !important;
}
.galliano .process-list li.is_active span:before, .galliano .process-list li span:before {
    background: #c9af0e !important;
}

/* ------------------- 
GALLIANO COLOR PICKER CSS ENDS
------------------- */

/* ------------------- 
GREEN COLOR PICKER CSS STARTS
------------------- */

.green .mobile-banner-content .sub-title, .green .mobile-simple-heading, 
.green .mobile-faq-acc .acc-heading.collapsed:hover:after, 
.green .mobile-faq-acc .acc-heading[aria-expanded="true"]:hover:after, .green .mobile-client-review h4,
.green .is_active .process-list-item span{
    color: #01b05f !important;
}
.green .is_active .process-list-item:before {
    border: 1px solid #01b05f !important;
}
.green .is_active .process-list-item:after {
    background-color: #01b05f !important;
}
.green .process-list li.is_active span:before, .green .process-list li span:before {
    background: #01b05f !important;
}

/* ------------------- 
GREEN COLOR PICKER CSS ENDS
------------------- */

/* ------------------- 
PURPLE COLOR PICKER CSS STARTS
------------------- */

.purple .mobile-banner-content .sub-title, .purple .mobile-simple-heading, 
.purple .mobile-faq-acc .acc-heading.collapsed:hover:after, 
.purple .mobile-faq-acc .acc-heading[aria-expanded="true"]:hover:after, .purple .mobile-client-review h4,
.purple .is_active .process-list-item span{
    color: #a904b1 !important;
}
.purple .is_active .process-list-item:before {
    border: 1px solid #a904b1 !important;
}
.purple .is_active .process-list-item:after {
    background-color: #a904b1 !important;
}
.purple .process-list li.is_active span:before, .purple .process-list li span:before {
    background: #a904b1 !important;
}

/* ------------------- 
PURPLE COLOR PICKER CSS ENDS
------------------- */

/* ------------------- 
COLOR SWITCHER CSS ENDS HERE FOR DEMO 3
/* ------------------- 

/* ------------------- 
8.4 COLOR SWITCHER CSS STARTS HERE FOR DEMO 4
/* ------------------- 

/* ------------------- 
MAROON COLOR PICKER CSS STARTS
------------------- */

.maroon .banner-link a, .maroon .banner-text a, .maroon .position-text h3 a:hover, .maroon .blog-detail-content h2 a:hover,
.maroon .blog-link a, .maroon .artist-showcase-tabs .nav-tabs .nav-link {
    color: #b10503 !important;
}
.maroon .banner-link span, .maroon .position-text .icon-right-arrow, .maroon .blog-link span, .maroon .dream-btn a,
.maroon .form-submit-btn button{
    background-color: #b10503 !important;
}
.maroon #dreamModal .close{
    background: #b10503 !important;
}
.maroon #dreamModal .close:hover{
    color: #b10503 !important;
    background: #fff !important;
}
.maroon .banner-link a:hover , .maroon .banner-text a:hover, .maroon .blog-link a:hover{
    color: #fff !important;
}
.maroon .dream-btn a:hover, .maroon .form-submit-btn button:hover{
    background-color: #8c0403 !important;
}


/* ------------------- 
MAROON COLOR PICKER CSS ENDS
------------------- */

/* ------------------- 
CITRUS COLOR PICKER CSS STARTS
------------------- */

.citrus .banner-link a, .citrus .banner-text a, .citrus .position-text h3 a:hover, .citrus .blog-detail-content h2 a:hover,
.citrus .blog-link a{
    color: #88b102 !important;
}
.citrus .banner-link span, .citrus .position-text .icon-right-arrow, .citrus .blog-link span, .citrus .dream-btn a,
.citrus .form-submit-btn button{
    background-color: #88b102 !important;
}
.citrus #dreamModal .close{
    background: #88b102 !important;
}
.citrus #dreamModal .close:hover{
    color: #88b102 !important;
    background: #fff !important;
}
.citrus .banner-link a:hover , .citrus .banner-text a:hover, .citrus .blog-link a:hover{
    color: #fff !important;
}
.citrus .dream-btn a:hover, .citrus .form-submit-btn button:hover{
    background-color: #678407 !important;
}

/* ------------------- 
CITRUS COLOR PICKER CSS ENDS
------------------- */

/* ------------------- 
HOT TODDY COLOR PICKER CSS STARTS
------------------- */

.hottoddy .banner-link a, .hottoddy .banner-text a, .hottoddy .position-text h3 a:hover, .hottoddy .blog-detail-content h2 a:hover,
.hottoddy .blog-link a{
    color: #b07b05 !important;
}
.hottoddy .banner-link span, .hottoddy .position-text .icon-right-arrow, .hottoddy .blog-link span, .hottoddy .dream-btn a,
.hottoddy .form-submit-btn button{
    background-color: #b07b05 !important;
}
.hottoddy #dreamModal .close{
    background: #b07b05 !important;
}
.hottoddy #dreamModal .close:hover{
    color: #b07b05 !important;
    background: #fff !important;
}
.hottoddy .banner-link a:hover , .hottoddy .banner-text a:hover, .hottoddy .blog-link a:hover{
    color: #fff !important;
}
.hottoddy .dream-btn a:hover, .hottoddy .form-submit-btn button:hover{
    background-color: #9c6d03 !important;
}

/* ------------------- 
HOT TODDY COLOR PICKER CSS ENDS
------------------- */

/* ------------------- 
BLUE GREEN COLOR PICKER CSS STARTS
------------------- */

.bluegreen .banner-link a, .bluegreen .banner-text a, .bluegreen .position-text h3 a:hover, .bluegreen .blog-detail-content h2 a:hover,
.bluegreen .blog-link a{
    color: #0cabb1 !important;
}
.bluegreen .banner-link span, .bluegreen .position-text .icon-right-arrow, .bluegreen .blog-link span, .bluegreen .dream-btn a,
.bluegreen .form-submit-btn button{
    background-color: #0cabb1 !important;
}
.bluegreen #dreamModal .close{
    background: #0cabb1 !important;
}
.bluegreen #dreamModal .close:hover{
    color: #0cabb1 !important;
    background: #fff !important;
}
.bluegreen .banner-link a:hover , .bluegreen .banner-text a:hover, .bluegreen .blog-link a:hover{
    color: #fff !important;
}
.bluegreen .dream-btn a:hover, .bluegreen .form-submit-btn button:hover{
    background-color: #06959a !important;
}

/* ------------------- 
BLUE GREEN COLOR PICKER CSS ENDS
------------------- */

/* ------------------- 
GALLIANO COLOR PICKER CSS STARTS
------------------- */

.galliano .banner-link a, .galliano .banner-text a, .galliano .position-text h3 a:hover, .galliano .blog-detail-content h2 a:hover,
.galliano .blog-link a{
    color: #c9af0e !important;
}
.galliano .banner-link span, .galliano .position-text .icon-right-arrow, .galliano .blog-link span, .galliano .dream-btn a,
.galliano .form-submit-btn button{
    background-color: #c9af0e !important;
}
.galliano #dreamModal .close{
    background: #c9af0e !important;
}
.galliano #dreamModal .close:hover{
    color: #c9af0e !important;
    background: #fff !important;
}
.galliano .banner-link a:hover , .galliano .banner-text a:hover, .galliano .blog-link a:hover{
    color: #fff !important;
}
.galliano .dream-btn a:hover, .galliano .form-submit-btn button:hover{
    background-color: #b19a0e !important;
}

/* ------------------- 
GALLIANO COLOR PICKER CSS ENDS
------------------- */

/* ------------------- 
GREEN COLOR PICKER CSS STARTS
------------------- */

.green .banner-link a, .green .banner-text a, .green .position-text h3 a:hover, .green .blog-detail-content h2 a:hover,
.green .blog-link a{
    color: #01b05f !important;
}
.green .banner-link span, .green .position-text .icon-right-arrow, .green .blog-link span, .green .dream-btn a,
.green .form-submit-btn button{
    background-color: #01b05f !important;
}
.green #dreamModal .close{
    background: #01b05f !important;
}
.green #dreamModal .close:hover{
    color: #01b05f !important;
    background: #fff !important;
}
.green .banner-link a:hover , .green .banner-text a:hover, .green .blog-link a:hover{
    color: #fff !important;
}
.green .dream-btn a:hover, .green .form-submit-btn button:hover{
    background-color: #088c4f !important;
}

/* ------------------- 
GREEN COLOR PICKER CSS ENDS
------------------- */

/* ------------------- 
PURPLE COLOR PICKER CSS STARTS
------------------- */

.purple .banner-link a, .purple .banner-text a, .purple .position-text h3 a:hover, .purple .blog-detail-content h2 a:hover,
.purple .blog-link a{
    color: #a904b1 !important;
}
.purple .banner-link span, .purple .position-text .icon-right-arrow, .purple .blog-link span, .purple .dream-btn a,
.purple .form-submit-btn button{
    background-color: #a904b1 !important;
}
.purple #dreamModal .close{
    background: #a904b1 !important;
}
.purple #dreamModal .close:hover{
    color: #a904b1 !important;
    background: #fff !important;
}
.purple .banner-link a:hover , .purple .banner-text a:hover, .purple .blog-link a:hover{
    color: #fff !important;
}
.purple .dream-btn a:hover, .purple .form-submit-btn button:hover{
    background-color: #76007b !important;
}

/* ------------------- 
PURPLE COLOR PICKER CSS ENDS
------------------- */

/* ------------------- 
COLOR SWITCHER CSS ENDS HERE FOR DEMO 4
/* ------------------- 

/* ------------------- 
COLOR SWITCHER CSS ENDS
/* -------------------