body {
    color: #2a2a2a;
    padding-top: 0!important;
    font-family: 'Open Sans',sans-serif
}

.RockeitOffers-offer-strip {
    display: none!important
}

.header {
    top: 0!important
}

[class^=cs-] {
    background-image: url(../casestudies-img/casestudy-sprite.png);
    background-repeat: no-repeat;
    display: inline-block;
    line-height: 14px;
    margin-top: 1px;
    vertical-align: text-top
}

.container {
    max-width: 1304px;
    width: 100%;
    padding: 0 15px;
    margin: 0 auto
}

h1,h2,h3,h4,h5,h6 {
    font-weight: 700;
    font-family: 'Open Sans',sans-serif
}

h1 {
    font-size: 28px;
    color: #040404;
    font-weight: 800;
    margin-bottom: 10px;
    line-height: 1.2;
    letter-spacing: -2.2px;
    text-transform: capitalize
}

h2 {
    font-size: 22px;
    color: #2a2a2a;
    letter-spacing: -1.6px;
    text-align: center
}

p {
    font-size: 16px;
    color: #2a2a2a;
    line-height: 1.5;
    font-family: 'Open Sans',sans-serif
}

.color-ride {
    color: #e01321
}

.border-line {
    content: "";
    display: block;
    width: 100px;
    height: 2px;
    background-color: #fdce8b
}

.small-line {
    width: 28px
}

section {
    padding: 50px 0
}

.d-none {
    display: none
}

.d-flex {
    display: -ms-flexbox;
    display: flex
}

.d-inline-flex {
    display: inline-flex
}

.justify-content-between {
    -ms-flex-pack: justify;
    justify-content: space-between
}

.justify-content-center {
    -ms-flex-pack: center;
    justify-content: center
}

.flex-wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.align-items-center {
    -ms-flex-align: center;
    align-items: center
}

.text-center {
    text-align: center
}

picture {
    display: block
}

.ezi-banner {
    background: #eeeff3;
    margin-top:75px;
    padding: 0
}

.ezi-banner .container {
    position: relative;
    text-align: center
}

.ezi-left {
    padding: 50px 0 15px;
    position: relative;
    z-index: 1
}

.banner-riding {
    display: block;
    color: #4d4d4d;
    font-size: 13px;
    font-weight: 600
}

.ezi-left .small-line {
    margin: 15px auto;
    display: inline-block
}

.ezi-left p {
    color: #252424;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px
}

.tune li {
    display: inline-block;
    background-color: #000;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    margin-right: 10px;
    position: relative
}

.tune li:last-child {
    margin-right: 0
}

.tune li i {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%)
}

[class^=cs-] {
    background-image: url(../casestudies-img/casestudy-sprite.png);
    background-repeat: no-repeat;
    display: inline-block;
    line-height: 14px;
    margin-top: 1px;
    vertical-align: text-top
}

.cs-appstore {
    background-position: -3px -4px;
    width: 25px;
    height: 23px
}

.cs-playstore {
    background-position: -41px -4px;
    width: 23px;
    height: 26px
}

.cs-dribble {
    background-position: -76px -4px;
    width: 30px;
    height: 30px
}

.fw {
    font-weight: 700
}

.fl {
    font-weight: 300
}

.rg {
    font-weight: 400
}

.fnt-sty {
    font-style: italic;
    display: inline
}

.big-circle,.small-circle {
    border-radius: 50%
}

.big-circle {
    width: 260px;
    height: 260px;
    background-color: #402d2c;
    -webkit-animation: blink 1s linear 0s infinite;
    -moz-animation: blink 1s linear 0s infinite;
    -ms-animation: blink 1s linear 0s infinite;
    animation: blink 1s linear 0s infinite -webkit-animation :blink 1s linear 0s infinite;
    -moz-animation: blink 1s linear 0s infinite;
    -ms-animation: blink 1s linear 0s infinite;
    animation: blink 1s linear 0s infinite
}

.small-circle {
    width: 130px;
    height: 130px;
    background-color: #532f2d
}

@-webkit-keyframes blink {
    0%,100% {
        background-color: #402d2c
    }

    50% {
        background-color: #22372f
    }
}

@keyframes blink {
    0%,100% {
        background-color: #502a29
    }

    50% {
        background-color: #3d2d28
    }
}

.banner-phone {
    margin-top: 30px
}

.client-wanted h2 {
    color: #2a2a2a;
    text-align: left;
    margin-bottom: 0
}

.client-wanted .border-line {
    margin: 18px auto;
    display: inline-block
}

.client-wanted p {
    font-size: 16px;
    margin-bottom: 18px
}

.client-wanted p:last-child {
    margin-bottom: 0
}

.creation-section {
    background: #2b2b2b
}

.creation-head h2,.creation-head p {
    margin-bottom: 0;
    color: #fff
}

.creation-head .border-line {
    margin: 16px auto 26px
}

.creation-head span {
    display: inline-block;
    color: #fff;
    margin-bottom: 16px;
    font-size: 18px;
    font-weight: 600
}

.slideItem .gradient,.slideItem .reflection {
    display: none!important
}

.top-screen {
    position: absolute;
    left: 50%;
    top: 0;
    height: 770px!important;
    width: 422px!important;
    z-index: 6;
    margin-left: 25px;
    transform: translateX(-50%)
}

.carousel .slides .slideItem img {
    margin: 12px 0 0 0
}

.layout-text h2 {
    margin-bottom: 0
}

.layout-text .border-line {
    margin: 20px auto
}

.layout-text p {
    margin-bottom: 25px
}

.layout-text p:last-child {
    margin-bottom: 0
}

.appearance {
    display: inline-block;
    margin-bottom: 16px;
    font-size: 18px;
    font-weight: 600
}

.phone-section {
    background-color: #f3f4f6
}

.phone-content {
    margin-bottom: 38px
}

.phone-content h2 {
    margin-bottom: 0;
    text-align: left
}

.phone-content .border-line {
    margin: 20px 0
}

.phone-gallery {
    flex-wrap: nowrap;
    overflow-x: scroll;
    padding-bottom: 20px
}

.vision-design {
    display: inline-block;
    margin-bottom: 16px;
    font-size: 18px;
    font-weight: 600
}

.phone-content p {
    margin-bottom: 18px
}

.phone-gallery picture {
    flex: 0 0 200px
}

.elevation-section {
    background-color: #dd332c
}

.elevation-content {
    margin-bottom: 45px
}

.elevation-content h2 {
    margin-bottom: 0;
    color: #fff
}

.elevation-content .border-line {
    margin: 20px auto
}

.elevation-vision {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 30px
}

.elevation-content p {
    color: #fff;
    margin-bottom: 18px
}

.elevation-tab-wrapper {
    max-width: 816px;
    width: 100%;
    margin: 0 auto
}

.small-phone {
    margin: 28px 0 0 -80px
}

.color-section h2 {
    margin-bottom: 0
}

.color-content,.color-list {
    margin-bottom: 35px
}

.color-content .border-line {
    margin: 18px auto
}

.single-para {
    padding-bottom: 15px;
    border-bottom: 1px solid #e4e4e4
}

.color-content span {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 22px
}

.color-content p {
    margin-bottom: 26px
}

.typography-sec h2 {
    margin-bottom: 26px
}

.typography-sec h2 br {
    display: none
}

.typography-sec:last-child {
    margin-bottom: 0
}

.font-explain {
    text-align: left;
    margin-top: 40px
}

.heading-font {
    display: block;
    position: relative;
    color: #464545;
    font-size: 34px;
    line-height: 1.1;
    margin-bottom: 70px;
    font-weight: 600;
    font-family: Roboto,sans-serif
}

.cs-gfont {
    background-position: -142px -164px;
    width: 159px;
    height: 41px;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 5px
}

.explain-fontlist li {
    margin-bottom: 26px
}

.explain-fontlist li:last-child {
    margin-bottom: 0
}

.explain-fontlist li span {
    color: #373737;
    font-size: 20px;
    display: block;
    opacity: .6;
    margin-bottom: 15px
}

.explain-fontlist li strong {
    color: #373737;
    font-size: 14px;
    line-height: 1.1
}

.wielded-section {
    background-color: #2b2b2b
}

.wielded-section h2 {
    color: #fff;
    margin-bottom: 0;
    text-align: left
}

.wielded-section .border-line {
    margin: 16px 0 30px
}

.wielded-left {
    margin-bottom: 35px
}

.technology-box {
    background-color: #fff;
    border-radius: 4px;
    padding: 15px 15px 5px;
    margin-bottom: 14px;
    text-align: center
}

.technology-box i {
    margin: 0 11px 10px
}

.cs-ios {
    background-position: -325px -163px;
    width: 56px;
    height: 57px
}

.cs-android {
    background-position: -4px -253px;
    width: 65px;
    height: 57px
}

.cs-java {
    background-position: -87px -253px;
    width: 45px;
    height: 61px
}

.cs-swift {
    background-position: -151px -253px;
    width: 145px;
    height: 45px
}

.cs-mysql {
    background-position: -6px -324px;
    width: 141px;
    height: 73px
}

.wielded-right p {
    color: #fff;
    margin-bottom: 16px
}

.wielded-right p:last-child {
    margin-bottom: 0
}

.challenges-wrapper .border-line {
    margin: 18px auto
}

.challenges-wrapper .container {
    border-bottom: 1px solid #e4e4e4
}

.challenges-para {
    padding-bottom: 26px
}

.challenges-para p {
    margin-bottom: 16px
}

.solutios-wrapper {
    padding-top: 0
}

.solutions-left {
    margin-bottom: 35px
}

.solutios-wrapper h2 {
    text-align: left;
    margin-bottom: 0
}

.solutios-wrapper .small-line {
    margin: 18px 0
}

.solutions-content {
    margin-bottom: 35px
}

.solutions-content:last-child {
    margin-bottom: 0
}

.solutions-content h3 {
    color: #171717;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    margin-bottom: 15px
}

.solutions-content p {
    margin-bottom: 0
}

.getmybook-tesimonials {
    background-color: #f4f6f9
}

.getmybook-tesimonials h2 {
    margin-bottom: 0
}

.getmybook-tesimonials .border-line {
    margin: 18px auto
}

.img-magnifier-container {
    position: relative;
    cursor: none
}

.img-magnifier-container:hover .img-magnifier-glass {
    display: block;
    position: absolute;
    border: 3px solid #000;
    border-radius: 50%;
    cursor: none;
    width: 140px;
    height: 140px;
    top: 0
}

.img-magnifier-glass {
    position: absolute;
    border: 3px solid #000;
    border-radius: 50%;
    cursor: none;
    width: 100px;
    height: 100px;
    display: none
}

@media only screen and (min-width:375px) {
    .phone-gallery picture {
        flex: 0 0 250px
    }

    .heading-font {
        font-size: 44px
    }

    .technology-box i {
        margin: 0 20px 10px
    }
}

@media only screen and (min-width:768px) {
    h1 {
        font-size: 40px
    }

    .container {
        padding: 0 3%
    }

    .d-sm-flex {
        display: -ms-flexbox;
        display: flex
    }

    .d-sm-block {
        display: block
    }

    .d-sm-none {
        display: none
    }

    .ezi-banner {
        background: url(../casestudies-img/banner-location.gif) no-repeat;
        background-size: 100% 530px;
        padding: 0
    }

    .ezi-banner .container {
        text-align: left;
        min-height: 540px
    }

    .ezi-left {
        padding: 90px 0 30px;
        width: 35%
    }

    .ezi-right {
        width: 51%;
        padding: 100px 0 50px
    }

    .banner-phone {
        display: none
    }

    .phone-gallery picture {
        flex: 0 0 300px
    }

    .vision-design {
        letter-spacing: 1px
    }

    .font-explain {
        background: url(../casestudies-img/rectangle.png) no-repeat;
        margin-top: 70px;
        padding: 82px 30px 110px 86px
    }

    .heading-font {
        font-size: 78px;
        margin-bottom: 145px
    }

    .cs-gfont {
        top: 89%;
        right: 25px;
        margin-top: 0
    }

    .explain-fontlist li {
        margin-bottom: 98px
    }

    .explain-fontlist li span {
        font-size: 20px;
        margin-bottom: 7px
    }

    .explain-fontlist li strong {
        font-size: 24px;
        padding-left: 5px
    }

    .wielded-left {
        display: flex;
        justify-content: space-between;
        margin-bottom: 24px
    }

    .technology-box {
        width: 48%;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: center
    }

    .solutions-content h3 {
        margin-bottom: 15px
    }

    .getmybook-tesimonial li {
        flex: 0 0 48%
    }

    .getmybook-tesimonial .testimonial-content {
        padding: 35px 5%
    }
}

@media only screen and (min-width:992px) {
    section {
        padding: 62.6px 0
    }

    .ezi-banner {
        background-size: 100% 520px
    }
}

@media only screen and (min-width:1024px) {
    .border-line {
        width: 128px
    }

    h2 {
        font-size: 30px
    }

    .d-lg-flex {
        display: -ms-flexbox;
        display: flex
    }

    .d-lg-block {
        display: block
    }

    .ezi-banner {
        background: url(../casestudies-img/banner-location.gif) no-repeat;
        background-size: 100% 645px;
        padding: 0;
    }

    .ezi-banner .container {
        min-height: 640px
    }

    .ezi-left {
        padding-top: 108px
    }

    h1 {
        font-size: 53px
    }

    .big-circle {
        width: 320px;
        height: 320px
    }

    .small-circle {
        width: 150px;
        height: 150px
    }

    .creation-head {
        max-width: 1020px;
        width: 100%;
        margin: 0 auto 42px
    }

    .creation-section {
        background: -moz-linear-gradient(top,#2b2b2b 0,#2b2b2b 66%,#fff 66%,#fff 100%);
        background: -webkit-linear-gradient(top,#2b2b2b 0,#2b2b2b 66%,#fff 66%,#fff 100%);
        background: linear-gradient(to bottom,#2b2b2b 0,#2b2b2b 66%,#fff 66%,#fff 100%)
    }

    .layuot-section {
        padding: 0 0 70px
    }

    .layout-text {
        max-width: 1045px;
        margin: 0 auto
    }

    .phone-gallery {
        overflow: visible;
        flex-wrap: wrap;
        padding-bottom: 0
    }

    .mt-space {
        margin-top: 120px
    }

    .phone-gallery picture {
        margin-bottom: 5px
    }

    .mr-negative {
        margin-top: -120px
    }

    .small-phone {
        margin: 60px 0 0 -80px
    }

    .wielded-left {
        width: 40%;
        display: block
    }

    .technology-box {
        width: 100%;
        padding: 15px
    }

    .wielded-right {
        width: 55%
    }

    .technology-box i {
        margin: 0 13px
    }

    .challenges-para {
        max-width: 925px;
        margin: 0 auto
    }

    .solutions-wrap {
        padding-bottom: 45px
    }

    .solutions-left,.solutions-right {
        width: 48%
    }
}

@media only screen and (min-width:1200px) {
    .container {
        padding: 0 15px
    }

    h2 {
        font-size: 32px
    }

    p {
        line-height: 1.6
    }

    .d-md-flex {
        display: -ms-flexbox;
        display: flex
    }

    .ezi-banner {
        background: url(../casestudies-img/banner-location.gif) no-repeat;
        background-size: 100% 740px;
        padding: 0;
        margin-top: 65px;
    }

    .ezi-banner .container {
        max-width: 1323px;
        min-height: 740px
    }

    .ezi-left {
        padding: 128px 55px 30px 52px
    }

    .ezi-left .small-line {
        margin: 17px auto
    }

    .ezi-left p {
        line-height: 1.5;
        margin-bottom: 23px
    }

    .big-circle {
        width: 400px;
        height: 400px
    }

    .small-circle {
        width: 220px;
        height: 220px
    }

    .client-wanted {
        padding: 57px 0
    }

    .client-wanted .border-line {
        margin: 8px auto 25px
    }

    .client-wanted p {
        width: 81%;
        margin-bottom: 27px
    }

    .creation-section {
        padding: 95px 0 63px
    }

    .creation-head {
        margin-bottom: 115px
    }

    .creation-head .border-line {
        margin: 37px auto 27px
    }

    .creation-head span {
        margin-bottom: 30px
    }

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

    .layout-text .border-line {
        margin: 33px auto
    }

    .appearance {
        margin-bottom: 25px
    }

    .elevation-content {
        padding: 0 6%
    }

    .phone-content {
        width: 86%;
        margin-bottom: 50px
    }

    .phone-gallery picture {
        flex: 0 0 385px
    }

    .vision-design {
        margin-bottom: 36px
    }

    .color-section {
        padding: 92px 0 70px
    }

    .color-content .border-line {
        margin: 25px auto
    }

    .color-content {
        margin-bottom: 27px
    }

    .typography-sec h2 {
        line-height: 1.3
    }

    .typography-sec h2 br {
        display: block
    }

    .color-list {
        margin-bottom: 15px
    }

    .single-para {
        margin-bottom: 42px
    }

    .typography-sec {
        margin-bottom: 55px
    }

    .font-explain {
        width: 100%;
        margin: 0 auto;
        max-width: 1164px;
        padding: 63px 20px 106px 87px
    }

    .heading-font {
        font-size: 102px;
        margin-bottom: 120px
    }

    .cs-gfont {
        top: 82%;
        right: 54px;
        margin-top: 0
    }

    .explain-fontlist li {
        margin-bottom: 77px
    }

    .explain-fontlist li span {
        font-size: 26px;
        margin-bottom: 13px
    }

    .explain-fontlist li strong {
        font-size: 30px;
        letter-spacing: 3px;
        padding-left: 5px;
        transition: all .5s ease
    }

    .explain-fontlist li strong:hover {
        letter-spacing: 4px
    }

    .explain-fontlist li .small-alphabet:hover {
        letter-spacing: 2px
    }

    .challenges-wrapper {
        padding: 70px 0 0
    }

    .challenges-wrapper .border-line {
        margin: 23px auto 41px
    }

    .challenges-para p {
        margin-bottom: 27px
    }

    .solutios-wrapper {
        padding: 79px 0 0
    }

    .solutions-wrap {
        padding-bottom: 70px
    }

    .solutios-wrapper .container {
        padding: 0 45px
    }

    .solutios-wrapper .small-line {
        margin: 20px 0
    }

    .solutions-content {
        margin-bottom: 50px
    }

    .solutions-content h3 {
        margin-bottom: 29px
    }

    .sotutions-graphic {
        margin-top: -13px;
        text-align: center
    }

    .solutions-left {
        width: 46%
    }

    .solutions-right {
        width: 51.6%
    }

    .getmybook-tesimonials {
        padding: 102px 0 70px
    }

    .getmybook-tesimonials .border-line {
        margin: 15px auto 51px
    }
}

@media only screen and (min-width:1366px) {
    h1 {
        font-size: 53px;
        margin-bottom: 5px
    }

    h2 {
        font-size: 36px
    }

    .ezi-left {
        width: 35%;
        padding: 126px 96px 30px 74px
    }

    .client-wanted {
        padding: 57px 0 101px
    }

    .creation-section {
        background: -moz-linear-gradient(top,#2b2b2b 0,#2b2b2b 71%,#fff 71%,#fff 100%);
        background: -webkit-linear-gradient(top,#2b2b2b 0,#2b2b2b 71%,#fff 71%,#fff 100%);
        background: linear-gradient(to bottom,#2b2b2b 0,#2b2b2b 71%,#fff 71%,#fff 100%)
    }

    .layuot-section {
        padding: 0 0 122px
    }

    .layout-text {
        max-width: 1195px
    }

    .phone-section {
        padding: 131px 0 77px
    }

    .phone-section .container {
        max-width: 1331px
    }

    .phone-content .border-line {
        margin: 24px 0
    }

    .vision-design {
        padding-left: 8px
    }

    .phone-content p {
        margin-bottom: 28px
    }

    .phone-content {
        max-width: 1275px;
        width: 100%;
        padding-left: 13px
    }

    .phone-gallery picture {
        flex: auto;
        margin-bottom: 24px
    }

    .mt-space {
        margin-top: 171px
    }

    .mr-negative {
        margin-top: -171px
    }

    .elevation-section {
        padding: 119px 0 87px
    }

    .elevation-content .border-line {
        margin: 24px auto
    }

    .elevation-vision {
        margin-bottom: 78px
    }

    .elevation-content {
        padding: 0;
        margin-bottom: 117px
    }

    .elevation-content p {
        margin-bottom: 27px
    }

    .elevation-tab-wrapper {
        max-width: 1016px
    }

    .small-phone {
        margin: 67px 0 0 -115px
    }

    .color-section {
        padding: 124px 0 105px
    }

    .color-content {
        margin-bottom: 87px
    }

    .typography-sec {
        margin-bottom: 55px
    }

    .color-list {
        margin-bottom: 113px
    }

    .single-para {
        padding-bottom: 92px;
        margin-bottom: 111px
    }

    .wielded-section {
        padding: 123px 0 100px
    }

    .wielded-section .border-line {
        margin: 20px 0 52px
    }

    .wielded-wrap {
        padding-left: 6px
    }

    .wielded-left {
        width: 44.5%;
        padding-top: 19px
    }

    .technology-box {
        width: 350px;
        padding: 32px 15px 64px
    }

    .technology-box i {
        margin: 0 21px
    }

    .technology-box2 {
        width: 460px;
        padding: 34px 15px 47px;
        margin: -55px 0 0 104px
    }

    .wielded-right {
        width: 50%
    }

    .wielded-right p {
        margin-bottom: 27px
    }

    .challenges-wrapper {
        padding: 104px 0 0
    }

    .challenges-para {
        padding-bottom: 61px
    }

    .solutios-wrapper {
        padding: 105px 0 0
    }
}

@media only screen and (min-width:1440px) {
    .ezi-left {
        width: 25%;
        padding: 125px 40px 30px 0
    }
}

@media only screen and (min-width:1920px) {
    .ezi-banner .container {
        max-width: initial
    }

    .ezi-left {
        width: 35%;
        padding-left: 11%
    }
}