html {
    scroll-behavior: smooth;
}

body {
    color: #3c3c3b;
    font-family: 'Roboto', sans-serif;
}

.email-me,
.email-me:hover,
.email-me:focus {
    color: #007bff;
}

.navbar {
    padding: 25px 30px 30px 30px;
}

.navbar .navbar-nav .nav-link {
    color: #fff;
    text-transform: uppercase;
    padding: 7px 28px;
}

.navbar .navbar-nav .nav-link.active {
    opacity: 1;
}

.navbar .navbar-nav .btn {
    text-transform: uppercase;
    opacity: 1;
}

.navbar .navbar-nav .btn:hover {
    opacity: 0.5;
}

.navbar .navbar-nav .nav-link:hover {
    color: #fff;
    opacity: 0.5;
}

.navbar .navbar-nav a {
    text-transform: uppercase
}

.nav-link.active {
    font-family: 'Roboto', sans-serif;
}

.navbar-collapse {
    padding: 0px;
}

.btn {
    border-radius: 0
}

.navbar-brand {
    float: left;
    font-size: 18px;
    height: inherit;
    line-height: 20px;
    padding: 0;
    width: 120px;
    display: block;
}

#fixheader {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 99;
    padding: 20px 0;
    -webkit-transition: .5s ease all;
    transition: .5s ease all;
}

#fixheader.fixit {
    background: #1a1a1a;
    -webkit-transition: .5s ease all;
    transition: .5s ease all;
    padding: 10px 0 0 0;
    z-index: 9999;
}

.footer-logo {
    width: 120px;
    height: auto;
}

.header-main-banner {
    overflow: hidden;
    position: relative;
    background: rgba(0, 0, 0, 0.333);
}

.header-main-banner .h1 {
    font-size: 4em;
    color: #fff;
}

.btn-outline-light:hover {
    color: #fff;
}

.header-main-banner-container {
    padding-left: 0px;
    padding-right: 0px;
}

.case-study-title {
    font-family: 'Roboto', sans-serif;
    font-size: 40px;
    line-height: 1.2em;
    color: #fff;
    margin-bottom: 40px;
    font-weight: 700;
}

.case-study-title-dark {
    font-family: 'Roboto', sans-serif;
    font-size: 40px;
    line-height: 1.2em;
    color: #808080;
    font-weight: 700;
}

.desc-text-light {
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    line-height: 1.7em;
    color: #fff;
    font-weight: 300;
}

.desc-text-dark {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    line-height: 1.7em;
    color: #787878;
    font-weight: 300;
}

.banner-content {
    padding-left: 90px;
}

.section-padding-top {
    padding: 120px 0px 0px 0px;
}

.section-padding {
    padding: 80px 0px;
}

p.sub-text {
    font-family: 'Roboto', sans-serif;
    color: #fff;
    font-size: 32px;
    text-align: left;
    margin-top: 15px;
    padding-left: 5px;
}

.container-section {
    padding-bottom: 70px;
}

.bgddark {
    background: #1a1a1a;
}

.main-banner {
    padding: 120px 0px 40px 0px;
    min-height: calc(100vh - 65px);
}

.secondary-title,
.secondary-title a {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 34px;
    line-height: 1.4em;
    color: #000;
}

.secondary-title a {
    opacity: 0.3;
}

.secondary-title a:hover {
    text-decoration: none;
    opacity: 1;
    -webkit-transition: .5s ease;
    transition: .5s ease;
}

.active-state a {
    color: #666666;
    opacity: 1;
}

.moreofwork {
    padding: 20px 0px;
    border-bottom: 2px solid #666666;
    ;
    /* margin-top: 90px; */
    color: #666666;
    font-size: 15px;
    letter-spacing: 1px;
    margin: 90px 165px 0px 165px;
}

.moreofwork-nav {
    padding: 0px;
    margin: 0px 165px;
}

.moreofwork-nav li {
    display: inline-block;
    padding: 20px 20px 20px 0px;
    font-size: 28px;
}

.footer-container {
    padding: 30px 165px;
    background: #1a1a1a;
}

.footer-container .case-study-title {
    margin: 25px 0px;
}

.btn-custom-orange {
    font-size: 15px;
    letter-spacing: 1px;
    color: #fff !important;
    padding: 12px 15px 12px 15px;
    background: #EF5B25
}

.bgdblack {
    background: #000;
}

.btn-custom-orange:focus,
.btn-custom-orange:hover {
    outline: none;
    box-shadow: none;
    color: #fff;
}

.btn-custom {
    padding: 12px 15px 12px 15px;
    border: 1px solid #fff;
    font-size: 15px;
    letter-spacing: 1px;
    color: #fff;
}

.no-padding {
    padding: 0px;
}

.case-study-image {
    padding: 0px;
}

.mobility-banner {
    background: url(../img/mobility/mobility-ux-design-marklevinsonlexus.jpg) no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: calc(100vh)
}

.thankyou-banner {
    background: url(../img/huemen-design-thankyou.jpg) no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: calc(100vh)
}

.digital-banner {
    background: url(../img/digital/digital-ux-design-traveler-app.jpg) no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: calc(100vh)
}

.lifestyle-banner {
    background: url(../img/lifestyle/lifestyle-id-design-akg-nseries.jpg) no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: calc(100vh)
}

.others-banner {
    background: url(../img/others/experience-design-harman-spark.jpg) no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: calc(100vh)
}

.custom-contact-btn {
    color: #fff !important;
}

.btn-outline-light:hover {
    background: inherit;
}


/*  NEW FOOTER STYLES START */

.footer-policy {
    margin-top: 20px;
}

.footer-policy p {
    padding-top: 5px;
}

.footer-policy a {
    color: #fff;
    font-size: 14px;
    transition: opacity 0.3s;
    -webkit-transition: opacity 0.3s;
    /* opacity: 0.5; */
}

.footer-policy a:hover {
    text-decoration: none;
    opacity: 0.5;
}

.footer-logo {
    text-align: right;
    padding-top: 12px;
}

.footer-logo img {
    float: right;
}

.copyrighttext {
    display: block;
    color: #ffff;
    opacity: 0.5;
}

.foot-wrapper {
    padding: 0px 15px 0px 30px;
}


/*  NEW FOOTER STYLES END */


/*Detail page ends here*/


/*Story list page starts*/

.story-header-contents {
    position: absolute;
    width: 100%;
    text-align: left;
    /* bottom: 240px; */
    vertical-align: middle;
    left: 165px;
    top: 50%;
    bottom: 50%;
}

.sec-case-study {
    position: relative;
    padding: 0px;
}

.sec-case-title {
    position: absolute;
    font-size: 21px;
    line-height: 1.2em;
    margin-bottom: 0px;
    top: 40px;
    left: 40px;
    cursor: pointer;
    padding-bottom: 15px;
}

.sec-case-title.title-grey::before {
    content: '';
    position: absolute;
    left: 0;
    top: 95%;
    width: 30px;
    height: 2px;
    background: #808080;
}

.sec-case-title.title-white::before {
    content: '';
    position: absolute;
    left: 0;
    top: 95%;
    width: 30px;
    height: 2px;
    background: #fff;
}

.sec-case-title.title-black::before {
    content: '';
    position: absolute;
    left: 0;
    top: 95%;
    width: 30px;
    height: 2px;
    background: #000;
}

.sec-case-study:hover .overlay {
    opacity: 0.8;
}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    -webkit-transition: .5s ease;
    transition: .5s ease;
    background-color: #000;
    /* -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); */
}

.btn-middle {
    -webkit-transition: .5s ease;
    transition: .5s ease;
    left: 50%;
    top: 50%;
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}

.title-grey {
    color: #808080;
}

.title-black {
    color: #000;
}

.title-white {
    color: #fff
}

.moreofwork-container {
    margin-bottom: 120px;
}


/*Story list page ends*/


/*Hamberg nav styles starts*/

button:active {
    outline: none;
    border: none;
}

button:focus {
    outline: 0;
}

.navbar-toggle {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-top: 8px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

.navbar-toggler .icon-bar {
    background-color: #fff;
}

.navbar-toggle .icon-bar+.icon-bar {
    margin-top: 4px;
}

.navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
}

.navbar-toggle {
    border: none;
    background: transparent !important;
}

.navbar-toggle:hover {
    background: transparent !important;
}

.navbar-toggle .icon-bar {
    width: 22px;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}

.navbar-toggle .top-bar {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 10% 10%;
    -ms-transform-origin: 10% 10%;
    transform-origin: 10% 10%;
}

.navbar-toggle .middle-bar {
    opacity: 0;
}

.navbar-toggle .bottom-bar {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 10% 90%;
    -ms-transform-origin: 10% 90%;
    transform-origin: 10% 90%;
}

.navbar-toggle.collapsed .top-bar {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
}

.navbar-toggle.collapsed .middle-bar {
    opacity: 1;
}

.navbar-toggle.collapsed .bottom-bar {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
}


/*Hamberg nav styles end*/


/* Extra small devices (portrait phones, less than 576px) */

@media (max-width: 575.98px) {
    p.sub-text {
        font-family: Gilroy-Regular;
        color: #fff;
        font-size: 17px;
        text-align: left;
        margin-top: 15px;
        padding-left: 5px;
        display: inline-block;
    }
    .header-main {
        padding-right: 6px;
        padding-left: 0px;
    }
    .navbar {
        padding: 15px 0px 0px 0px;
    }
    .navbar-brand {
        width: 100px;
        margin-left: 25px;
        padding-bottom: 25px;
    }
    .navbar-toggle {
        padding: 9px 0px;
        margin-top: -24px;
    }
    .navbar .navbar-nav .nav-link {
        margin-bottom: 2px;
        padding: 7px 5px;
    }
    .navbar .navbar-nav .nav-link:hover,
    .navbar .navbar-nav .nav-link:focus {
        background: #222;
        margin-bottom: 2px;
        color: #fff;
    }
    .navbar-toggler:not(:disabled):not(.disabled) {
        cursor: pointer;
        margin-top: -10px;
    }
    .navbar-collapse {
        background: #313131;
        padding: 10px;
        z-index: 999;
        /* border: solid 1px #525252; */
        opacity: 0.90;
        /* margin: 20px 0 10px 0; */
    }
    .navbar-collapse {
        margin: 0px -6px 0px 0px;
        border: none;
    }
    ul.navbar-nav.ml-auto {
        padding: 10px 0px;
    }
    .navbar .navbar-nav .nav-link {
        padding: 10px 15px;
    }
    .navbar-dark .navbar-toggler {
        margin-right: 18px;
    }
    .custom-contact-btn {
        border-width: 0px;
        padding-left: 15px;
    }
    .navbar-nav li {
        padding-left: 10px;
    }
    .main-banner {
        padding: 160px 0px 40px 0px;
    }
    #fixheader {
        padding: 20px 0px 0px 0px;
    }
    .banner-content {
        padding-left: 50px;
        padding-bottom: 30px;
        padding-right: 0px;
    }
    .case-study-title {
        font-size: 28px;
        padding-right: 50px;
    }
    .desc-text-light,
    .desc-text-dark {
        font-size: 18px;
    }
    .main-banner .desc-text-light,
    .main-banner .desc-text-dark {
        padding-right: 50px;
    }
    .section-padding-top {
        padding: 80px 35px 0px 35px;
    }
    .secondary-title,
    .secondary-title a {
        font-size: 24px;
    }
    .section-padding {
        padding: 30px 35px 0px 35px;
    }
    .moreofwork {
        margin: 0px 35px 0px 35px;
        padding: 20px 0px 10px 0px;
    }
    .moreofwork-nav {
        margin: 0px 35px 0px 35px;
    }
    .moreofwork-nav li {
        display: block;
        padding: 10px 0px;
        font-size: 24px;
    }
    .footer-container {
        padding: 50px;
    }
    .footer-policy {
        -webkit-box-ordinal-group: 3;
        -webkit-order: 2;
        -ms-flex-order: 2;
        order: 2;
        text-align: left;
    }
    .footer-logo {
        -webkit-box-ordinal-group: 2;
        -webkit-order: 1;
        -ms-flex-order: 1;
        order: 1;
        margin: 0 auto;
        text-align: center;
        width: 80px;
    }
    .footer-logo img {
        float: none;
    }
    .all-rights {
        display: block;
    }
    .foot-wrapper {
        padding: 15px 30px;
    }
    .footer-policy a {
        font-size: 12px;
    }
    .copyrighttext {
        font-size: 12px;
    }
    .footer-policy p {
        padding-top: 0px;
    }
    /*Story page start here*/
    .case-study-banner-img {
        width: 100%;
        height: calc(100vh);
    }
    .story-header-contents {
        left: 30px;
    }
    .sec-case-title {
        top: 15px;
        left: 15px;
    }
    .mgn-case-secondary {
        margin-bottom: 50px;
    }
    .moreofwork-container {
        margin-bottom: 60px;
    }
    /*Landing Page starts*/
    .do-left-row {
        padding: 0 35px 0 35px;
    }
    .right-pad {
        padding: 10px 35px 0 35px;
    }
    .custom-header-title {
        height: 200px;
        overflow: hidden;
    }
    .huemen-content {
        padding: 39px 15px 0 15px;
    }
    .mobility-header {
        height: 370px;
        left: 0;
        position: absolute;
        top: -55px;
    }
    .lifestlye-header {
        height: 370px;
        left: 0px;
        position: absolute;
        top: -135px;
    }
    .digitalexp-header {
        height: 370px;
        left: 0;
        position: absolute;
        top: -98px;
    }
    .otherstories-header {
        height: 370px;
        left: 0;
        position: absolute;
        top: -124px;
    }
    .automative-head h2,
    .lifestyle-head h2,
    .other-head h2 {
        font-size: 28px;
    }
    .automative-head,
    .lifestyle-head,
    .other-head {
        position: absolute;
        top: 48px;
        right: 50px;
        /*        left: 195px;*/
    }
    .lifestyle-col3 {
        -webkit-box-ordinal-group: 2;
        -webkit-order: 1;
        -ms-flex-order: 1;
        order: 1
    }
    .lifestyle-col2 {
        -webkit-box-ordinal-group: 3;
        -webkit-order: 2;
        -ms-flex-order: 2;
        order: 2
    }
    .lifestyle-col1 {
        -webkit-box-ordinal-group: 4;
        -webkit-order: 3;
        -ms-flex-order: 3;
        order: 3
    }
    .other-stories-col1 {
        -webkit-box-ordinal-group: 3;
        -webkit-order: 2;
        -ms-flex-order: 2;
        order: 2
    }
    .other-stories-col2 {
        -webkit-box-ordinal-group: 2;
        -webkit-order: 1;
        -ms-flex-order: 1;
        order: 1
    }
    /*Landing Page end*/
}


/* Small devices (landscape phones, 576px and up) */

@media (min-width: 576px) and (max-width: 767.98px) {
    p.sub-text {
        font-family: Gilroy-Regular;
        color: #fff;
        font-size: 23px;
        text-align: left;
        margin-top: 15px;
        padding-left: 5px;
        display: inline-block;
    }
    .header-main {
        padding-right: 6px;
        padding-left: 0px;
    }
    .navbar {
        padding: 15px 0px 0px 0px;
    }
    .navbar-brand {
        width: 100px;
        margin-left: 25px;
        padding-bottom: 25px;
    }
    .navbar-toggle {
        padding: 9px 0px;
        margin-top: -24px;
    }
    .navbar .navbar-nav .nav-link {
        margin-bottom: 2px;
        padding: 7px 5px;
    }
    .navbar .navbar-nav .nav-link:hover,
    .navbar .navbar-nav .nav-link:focus {
        background: #222;
        margin-bottom: 2px;
        color: #fff;
    }
    .navbar-toggler:not(:disabled):not(.disabled) {
        cursor: pointer;
        margin-top: -10px;
    }
    .navbar-collapse {
        background: #313131;
        padding: 10px;
        z-index: 999;
        opacity: 0.90;
    }
    .navbar-collapse {
        margin: 0px -6px 0px 0px;
        border: none;
    }
    .navbar .navbar-nav .nav-link {
        padding: 7px 15px;
    }
    .navbar-dark .navbar-toggler {
        margin-right: 18px;
    }
    ul.navbar-nav.ml-auto {
        padding: 10px 0px;
    }
    .navbar-nav li {
        padding-left: 15px;
    }
    .custom-contact-btn {
        border-width: 0px;
        padding-left: 15px;
    }
    .main-banner {
        padding: 160px 0px 40px 0px;
    }
    #fixheader {
        padding: 20px 0px 0px 0px;
    }
    .banner-content {
        padding-left: 50px;
        padding-bottom: 30px;
        padding-right: 0px;
    }
    .case-study-title {
        font-size: 36px;
        padding-right: 50px;
    }
    .desc-text-light,
    .desc-text-dark {
        font-size: 24px;
    }
    .main-banner .desc-text-light,
    .main-banner .desc-text-dark {
        padding-right: 50px;
    }
    .section-padding-top {
        padding: 80px 0px 0px 0px;
    }
    .secondary-title,
    .secondary-title a {
        font-size: 26px;
    }
    .section-padding {
        padding: 30px 0px;
    }
    .moreofwork {
        margin: 0px 40px;
    }
    .moreofwork-nav {
        margin: 0px 40px;
    }
    .moreofwork-nav li {
        display: block;
        padding: 10px 0px;
        font-size: 24px;
    }
    .footer-container {
        padding: 50px;
    }
    .footer-logo {
        padding-top: 18px;
        width: 80px;
    }
    /*Story page start here*/
    .case-study-banner-img {
        width: 100%;
        height: calc(100vh);
    }
    .story-header-contents {
        left: 45px;
    }
    .sec-case-title {
        top: 45px;
        left: 45px;
    }
    .mgn-case-secondary  {
        margin-bottom: 50px;
    }
    .moreofwork-container {
        margin-bottom: 60px;
    }
    /*Landing Page starts*/
    .do-left-row {
        padding: 0 35px 0 35px;
    }
    .right-pad {
        padding: 10px 35px 0 35px;
    }
    .custom-header-title {
        height: 200px;
        overflow: hidden;
    }
    .huemen-content {
        padding: 39px 15px 0 15px;
    }
    .mobility-header {
        height: 370px;
        left: 0;
        position: absolute;
        top: -55px;
    }
    .lifestlye-header {
        height: 370px;
        left: 0px;
        position: absolute;
        top: -135px;
    }
    .digitalexp-header {
        height: 370px;
        left: 0;
        position: absolute;
        top: -98px;
    }
    .otherstories-header {
        height: 370px;
        left: 0;
        position: absolute;
        top: -124px;
    }
    .automative-head h2,
    .lifestyle-head h2,
    .other-head h2 {
        font-size: 28px;
    }
    .automative-head,
    .lifestyle-head,
    .other-head {
        position: absolute;
        top: 48px;
        right: 50px;
        /*        left: 195px;*/
    }
    .lifestyle-col3 {
        -webkit-box-ordinal-group: 2;
        -webkit-order: 1;
        -ms-flex-order: 1;
        order: 1
    }
    .lifestyle-col2 {
        -webkit-box-ordinal-group: 3;
        -webkit-order: 2;
        -ms-flex-order: 2;
        order: 2
    }
    .lifestyle-col1 {
        -webkit-box-ordinal-group: 4;
        -webkit-order: 3;
        -ms-flex-order: 3;
        order: 3
    }
    .other-stories-col1 {
        -webkit-box-ordinal-group: 3;
        -webkit-order: 2;
        -ms-flex-order: 2;
        order: 2
    }
    .other-stories-col2 {
        -webkit-box-ordinal-group: 2;
        -webkit-order: 1;
        -ms-flex-order: 1;
        order: 1
    }
    /*Landing Page end*/
}


/* Medium devices (tablets, 768px and up) */

@media (min-width: 768px) and (max-width: 991.98px) {
    .header-main {
        padding-right: 6px;
        padding-left: 0px;
    }
    .navbar .navbar-nav .nav-link {
        margin-bottom: 2px;
        padding: 7px 5px;
    }
    .navbar .navbar-nav .nav-link:hover,
    .navbar .navbar-nav .nav-link:focus {
        background: #222;
        margin-bottom: 2px;
        color: #fff;
    }
    .navbar-toggler:not(:disabled):not(.disabled) {
        cursor: pointer;
        margin-top: -10px;
    }
    .navbar-collapse {
        background: #313131;
        padding: 10px;
        z-index: 999;
        /* border: solid 1px #525252; */
        opacity: 0.90;
        /* margin: 20px 0 10px 0; */
    }
    .navbar {
        padding: 15px 0px 0px 0px;
    }
    .navbar-brand {
        width: 100px;
        margin-left: 25px;
        padding-bottom: 25px;
    }
    .navbar-toggle {
        padding: 9px 0px;
        margin-top: -24px;
    }
    .navbar-collapse {
        margin: 0px -6px 0px 0px;
        border: none;
    }
    ul.navbar-nav.ml-auto {
        padding: 10px 0px;
    }
    .navbar-nav li {
        padding-left: 15px;
    }
    .navbar .navbar-nav .nav-link {
        padding: 7px 15px;
    }
    .navbar-dark .navbar-toggler {
        margin-right: 18px;
    }
    .custom-contact-btn {
        border-width: 0px;
        padding-left: 15px;
    }
    .main-banner {
        padding: 160px 0px 40px 0px;
    }
    #fixheader {
        padding: 20px 0px 0px 0px;
    }
    .banner-content {
        padding-left: 50px;
        padding-bottom: 30px;
        padding-right: 0px;
    }
    .main-banner .desc-text-light,
    .main-banner .desc-text-dark {
        padding-right: 50px;
    }
    .section-padding-top {
        padding: 80px 0px 0px 0px;
    }
    .section-padding {
        padding: 40px 0px;
    }
    .moreofwork {
        margin: 0px 30px 0px 30px;
    }
    .moreofwork-nav {
        margin: 0px 30px;
    }
    .footer-container {
        padding: 50px;
    }
    .footer-logo {
        padding-top: 18px;
        width: 80px;
    }
    /*Story page start here*/
    .case-study-banner-img {
        width: 100%;
        height: calc(100vh);
    }
    .story-header-contents {
        left: 90px;
    }
    .sec-case-title {
        top: 45px;
        left: 45px;
    }
    .mgn-case-secondary  {
        margin-bottom: 50px;
    }
    .moreofwork-container {
        margin-bottom: 60px;
    }
    /*Landing Page starts*/
    .do-left-row {
        padding: 0 35px 0 35px;
    }
    .right-pad {
        padding: 10px 35px 0 35px;
    }
    .huemen-content {
        padding: 39px 15px 0 15px;
    }
    .custom-header-title {
        height: 200px;
        overflow: hidden;
    }
    .mobility-header {
        height: 370px;
        left: 0;
        position: absolute;
        top: -55px;
    }
    .lifestlye-header {
        height: 370px;
        left: 0px;
        position: absolute;
        top: -135px;
    }
    .digitalexp-header {
        height: 370px;
        left: 0;
        position: absolute;
        top: -98px;
    }
    .otherstories-header {
        height: 370px;
        left: 0;
        position: absolute;
        top: -124px;
    }
    .automative-head h2,
    .lifestyle-head h2,
    .other-head h2 {
        font-size: 28px;
    }
    .automative-head,
    .lifestyle-head,
    .other-head {
        position: absolute;
        top: 48px;
        right: 50px;
        /*        left: 195px;*/
    }
    .lifestyle-col3 {
        -webkit-box-ordinal-group: 2;
        -webkit-order: 1;
        -ms-flex-order: 1;
        order: 1
    }
    .lifestyle-col2 {
        -webkit-box-ordinal-group: 3;
        -webkit-order: 2;
        -ms-flex-order: 2;
        order: 2
    }
    .lifestyle-col1 {
        -webkit-box-ordinal-group: 4;
        -webkit-order: 3;
        -ms-flex-order: 3;
        order: 3
    }
    .other-stories-col1 {
        -webkit-box-ordinal-group: 3;
        -webkit-order: 2;
        -ms-flex-order: 2;
        order: 2
    }
    .other-stories-col2 {
        -webkit-box-ordinal-group: 2;
        -webkit-order: 1;
        -ms-flex-order: 1;
        order: 1
    }
    /*Landing Page end*/
}


/* Large devices (desktops, 992px and up) */

@media (min-width: 992px) and (max-width: 1199.98px) {
    .banner-content {
        padding: 0px 45px;
    }
    .section-padding-top {
        padding: 70px 0px 0px 0px;
    }
    .section-padding {
        padding: 40px 0px;
    }
    .moreofwork {
        margin: 0px 45px 0px 45px;
    }
    .moreofwork-nav {
        margin: 0px 45px;
    }
    .footer-container {
        background: #1a1a1a url(../img/map.svg) right 45px top no-repeat;
        background-size: 60% 100%;
        color: #eee;
    }
    .footer-container {
        padding: 110px 45px 110px 45px;
    }
    .case-study-banner-img {
        width: 100%;
        height: calc(100vh);
    }
    .custom-contact-btn {
        margin-left: 20px;
        color: white !important;
    }
    .foot-wrapper {
        padding: 0px 30px 0px 30px;
    }

    .mgn-case-secondary  {
        margin-bottom: 50px;
    }
}


/* Extra large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) {
    .footer-container {
        background: #1a1a1a url(../img/map.svg) right 45px top no-repeat;
        background-size: 60% 100%;
        color: #eee;
    }
    .footer-container {
        padding: 110px 165px;
    }
    .custom-contact-btn {
        margin-left: 20px;
        color: white !important;
    }
    .foot-wrapper {
        padding: 0px 30px 0px 30px;
    }
}

@media (min-width: 1358px) and (max-width: 1920px) {
    .footer-container {
        background: #1a1a1a url(../img/map.svg) right 45px top 40px no-repeat;
        background-size: 68% 90%;
        color: #eee;
    }
    .footer-container {
        padding: 110px 165px;
    }
}


/* modal styles start */

.modal-open .modal {
    z-index: 9999;
}

.modal-header {
    background: #f1f1f1;
}

.modal-header .close img {
    height: 30px;
    width: 30px;
}

.modal-title {
    color: #808080;
    font-size: 29px;
    font-weight: 500;
}

.modal-dialog {
    overflow-y: initial !important
}

.modal-body {
    overflow-y: auto;
}

.modal-content {
    -webkit-overflow-scrolling: touch;
    height: calc(100vh - 100px)!important
}

.iframe-container iframe {
    height: calc(125vh - 0px);
}

@media only screen and (min-width: 600px) {
    .modal-content {
        height: calc(100vh - 220px)!important;
    }
    .iframe-container iframe {
        height: calc(115vh - 0px);
    }
}


/* modal styles end */


/* THANKYOU PAGE FOOTER LINK START */

.case-study-title span {
    display: block;
}

.footer-secondary-link a {
    color: #808080;
    opacity: 1;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.footer-secondary-link a:hover {
    color: #444;
}

@media screen and (max-width: 767px) {
    .case-study-title span {
        display: inline;
    }
}


/* THANKYOU PAGE FOOTER LINK END */

.videobg {
    position: relative;
    top: 0;
    width: 100%;
    overflow: hidden;
    /* height: 100vh; */
    height: auto;
}

.videobg video {
    height: 100vh;
    position: absolute;
    top: 0;
    /* z-index: -1; */
}

.home-video-banner {
    background: url(../video/huemen-design-showreel.jpg) no-repeat center;
    background-size: cover;
}

.lifestyle-akg-video-banner {
    background: url(../video/huemen-design-akg-nseries.jpg) no-repeat center;
    background-size: cover;
}

.lifestyle-citation-video-banner {
    background: url(../video/huemen-design-harman-kardon-citation.jpg) no-repeat center;
    background-size: cover;
}

.lifestyle-nseries-video-banner{
    background: url(../video/huemen-design-akg-nseries.jpg) no-repeat center;
    background-size: cover;
}

.privacy-banner {
    background: #1a1a1a;
    padding: 160px 0px 0px 0px;
    min-height: calc(45vh - 65px);
}

.container-section ol {
    font-family: 'Roboto', sans-serif;
    color: #808080;
    font-weight: 300;
    line-height: 1.7em;
    font-size: 20px;
}

.marbot25 {
    margin-bottom: 25px;
}

.font24 {
    font-size: 24px;
}

.privacy-desc {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    line-height: 1.7em;
    color: #808080;
    font-weight: 300;
}

@media screen and (max-width: 767px) {
    .privacy-desc {
        font-size: 18px;
    }
}


.full-width-img{
    margin-top: 120px;
}
.full-width-img-with-content{
    margin-top: 120px;
    margin-bottom: 100px;
    height: 600px;
}
.harman-kardon-aura-img{
    background: url(../img/work/harman-kardon-aura-5.jpg) no-repeat center center;
    background-size: cover;
}
.harman-kardon-citation-img{
    background: url(../img/work/harman-kardon-citation-4.jpg) no-repeat center center;
    background-size: cover;
}
.harman-kardon-invoke-img{
    background: url(../img/work/harman-kardon-invoke-4.jpg) no-repeat center center;
    background-size: cover;
}
.harman-kardon-nseries-img{
    background: url(../img/work/akg-nseries-4.jpg) no-repeat center center;
    background-size: cover;
}
.harman-jbl-pulse-img{
    background: url(../img/work/lifestyle-jblpulse3-design8.jpg) no-repeat center center;
    background-size: cover;
}

.lifestyle-pulse3-video-banner{
    background: url(../video/huemen-design-showreel.jpg) no-repeat center;
    background-size: cover;
}

.main-banner-title{
    position: absolute;
    bottom: 150px;
    left: 20%;
}

.aura-main-banner{
    padding: 120px 0px 40px 0px;
    min-height: calc(100vh - 0px);
    background: url(../img/work/harman-kardon-aura-1.jpg) no-repeat #292929 center center;
    background-size: cover;
    position: relative;
}

.invoke-main-banner{
    padding: 120px 0px 40px 0px;
    min-height: calc(100vh - 0px);
    background: url(../img/work/harman-kardon-invoke-1.jpg) no-repeat #292929 center center;
    background-size: cover;
    position: relative;
}



.title-txt{
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.2em;
}
@media (max-width: 575.98px) {
    .full-width-img-with-content{
        height: 300px;
    }
    .title-txt{
        font-size: 18px;
        margin-left: 50px;
        margin-right: 50px;
    }
    .main-banner-title{
        bottom: 50px;
        left: 10%; 
    }
}




.media-desc-container{
    position: relative;
    width: 100%;
}
.media-desc{
    width: 300px;
    background: #fff;
    position:absolute;
    right: 0;
    bottom: 0;
    padding: 25px;
}

.map-bgd .secondary-title{
    color: #fff;
    opacity: 0.5;
}


@media (min-width: 1600px) {
    .media-section{
        background: url(../img/Home/huemen-team-if-awards2.jpg) no-repeat center -150px;
        background-size: cover;
    }
    .media-desc-container{
        height: 700px;
    }
}


@media (min-width: 1200px) and (max-width: 1599.98px){
    .media-section{
        background: url(../img/Home/huemen-team-if-awards2.jpg) no-repeat center -30px;
        background-size: cover;
    }
    .media-desc-container{
        height: 600px;
    }
}


@media (min-width: 992px) and (max-width: 1199.98px){
    .media-section{
        background: url(../img/Home/huemen-team-if-awards2.jpg) no-repeat center -50px;
        background-size: cover;
    }
    .media-desc-container{
        height: 550px;
    }
}

@media (min-width: 768px) and (max-width: 991.98px){
    .media-section{
        background: url(../img/Home/huemen-team-if-awards2.jpg) no-repeat center -50px;
        background-size: cover;
    }
    .media-desc-container{
        height: 450px;
    }
}

@media (min-width: 576px) and (max-width: 767.98px){
    .media-section{
        background: url(../img/Home/huemen-team-if-awards2.jpg) no-repeat center 0px;
        background-size: cover;
    }
    .media-desc-container{
        height: 500px;
    }
    .media-desc{
        width: 100%;
    }
}

@media (max-width: 575.98px){
    .media-section{
        background: url(../img/Home/huemen-team-if-awards2.jpg) no-repeat center 0px;
        background-size: cover;
    }
    .media-desc-container{
        height: 500px;
    }
    .media-desc{
        width: 100%;
    }
}