.text-small {
    font-size: 12px;
}
.casestudy-header{
    position: relative;
    height: 750px;
    background: #6e2076 no-repeat center center;
    width: 100%;
    background-size: cover;
}
.casestudy-header .container{
    padding: 80px 30% 0 0;
    color: #fff;
    font-size: 60px;
    font-weight: 300;
    position: relative;
    line-height: 1.1;
}
.casestudy-header:before{
    position: absolute;
    content: ' ';
    width: 100%;
    height: 100%;
    /*background: url('../../../images/grad.png') no-repeat center center;
    background-size: cover;*/
    background: linear-gradient(316.01deg, rgba(109, 32, 119, 7.5e-05) 34.16%, rgba(109, 32, 119, 0.75) 51.26%, rgba(29, 79, 145, 0.75) 81.39%);
}
@media(max-width: 767px){
    .casestudy-header{
        min-height: 250px;
        height: auto;
    }
    .casestudy-header:before{
        background: linear-gradient(316.01deg, rgba(109, 32, 119, 0.75) 0%, rgba(29, 79, 145, 0.75) 100%);
    }
    .casestudy-header .container{
        padding-top: 40px;
    }
}
.cswrapper{
    position: relative;
    margin: -320px auto 60px;		
    background: linear-gradient(180deg, transparent 200px, #f4f6fa 20%);
    padding-bottom: 70px;
    overflow: hidden;
}
.cswrapper:before{
    position: absolute;
    width: 831px;
    height: 831px;
    left: -30%;
    top: 15vw;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 250px;
    transform: rotate(25deg);
    content: "";
}


.cswrapper:after{
    position: absolute;
    width: 659px;
    height: 659px;
    right: -9%;
    top: 42vw;
    z-index: 1;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 210px;
    transform: rotate(25deg);
    content: "";
}

.cswrapper .container{
    position: relative;
    z-index: 2;
}

.cswrapper .container.box{
    background-color: #fff;
    border-radius: 15px;
    padding: 20px;
    border: 1px solid #d2d2d2;
    margin-bottom: 60px;
    z-index: 3;
}
.casestudy-header:after{
    content: "";
    display: block;
    background: radial-gradient(ellipse at bottom, #f4f6fa 70%, transparent 60.4%, transparent 0%) top / 125% 100%;
    margin-top: -230px;
    height: 350px;
    width: 100%;
    left: 0;
    position: absolute;
    top: 100%;
    z-index: 0;	
}
.cswrapper h1{
    font-size: 26px;
    color: #1d4f91;
    margin: 5px 0 15px;
}
.cswrapper h2, .solutions h2{
    font-size: 35px;
    color: #1d4f91;
    margin: 15px 0;
}
.cswrapper .buttons{ padding-top: 40px;}
.cswrapper span.pink{color: #E63888;}
.cswrapper .btn{ background-color: #fff; color: #63666a; transition: background .7s;border: 2px solid #ebebeb; border-radius: 10px; margin: 0 0.4rem; padding: .7rem 1.25rem;}
.cswrapper .btn:hover{background-color: #f4f6fa;}

.cswrapper .blue, .solutions .blue{color: #1d4f91;}
.cswrapper ul, .solutions ul.check-list {
    list-style: none;
    padding-left: 23px;
}
.cswrapper li, .solutions li{
    padding: 0 0 15px 10px;
    margin: 0 0 0 0;
    line-height: 21px;
    font-weight: 300;
    position: relative;
}
.cswrapper li:before, .solutions ul.check-list li:before{
    content: "";
    display: block;
    position: absolute;
    background: url('../../../images/cross4.png');
    left: -22px;
    top: 4px;
    width: 15px;
    height: 15px;
}
.solutions ul.check-list li:before{
    background:  url('../../../images/tick.png');
}

.solutions ul:not(.check-list) {
    list-style: none;
    padding-left: 0;
}

.solutions ul:not(.check-list) li {
  padding-left: 0;
}

.cswrapper .challenge h2, .solutions h2, #relatedp{
    margin-top: 0;
    font-size:  30px;
    font-weight: 300;
}
.cswrapper .challenge .blue, .solutions .blue{
    font-size: 20px;
    margin-bottom: 18px;
    display: block;
}
.cswrapper .challenge .col-md-4{
    padding-left: 50px;
}

.cswrapper .qa{
    position: relative;
    border: 1px solid #d2d2d2;
    padding: 8px 0 0;
    width: 100%;
    cursor: pointer;
    background-color: #fff;
    border-radius: 15px;
    margin-top: 20px;
}
.cswrapper .qa .question{
    color: #1d4f91;
    padding: 0 0 8px 30px;
    border: 1px solid #d2d2d2;
    border-width: 0;
    transition: all 0.5s ease-in-out;
}
.cswrapper .qa.show .question{
    border-width: 0 0 1px 0;
}	
.cswrapper .qa i.fa-plus,.cswrapper .qa i.fa-minus {
    color: #1d4f91;
    position: absolute;
    right: 20px;
    top: 12px;
}
.cswrapper .qa .answer .row{
    margin: 0;
}

.cswrapper .qa .answer{
    background-color: #f4f6fa;
    border-radius: 0 0 15px 15px;
}
.cswrapper .qa .answer p{
    font-weight: 300;
}
.cswrapper .qa table{
    width: 100%;
}
.cswrapper .qa table th{
    text-align: center;
}
.cswrapper .qa table tr{
    border: 1px solid #d2d2d2;
    border-width: 0 0 1px 0;
}
.cswrapper .qa table tr:first-child, .cswrapper .qa table tr:last-child{
    border-width: 0;
}
.cswrapper .qa table td{
    padding: 5px;
}
.cswrapper .qa .answer .col-md-8, .cswrapper .qa .answer .col-md-4{
    padding: 30px;
}
.cswrapper .qa .answer .col-md-4{
    background-color: #fff;
    border-radius: 0 0 15px 0;
}

.qa, .qa .answer{
    transition: all 0.5s ease-in-out;
}
.qa .fa-minus, .qa .answer{
    max-height:0;
    overflow: hidden;
}
.qa .fa-plus {
    max-height: 100px;
    overflow: hidden;
}
.qa.show .fa-minus{
    max-height: 100px;
}
.qa.show .answer{
    max-height: 800px;
}
.qa.show .fa-plus {
    max-height: 0px;
}
.qa .answer th img{
    margin: 10px auto 40px;
}
.soundcloud .sctext{
    width: calc(40% - 4px);
    display: inline-block;
    vertical-align: top;
    padding-top: 112px;
}
.soundcloud .cta-block, .download .cta-block {
        width: 100%;
        left: 0; 
        padding: 10px 8px 3px 30px;
    }
    .download .cta-block {
        padding: 45px 8px 45px 30px;
        margin-top: 70px;
    }
.soundcloud .cta-block h3{
    width: 100%;
}
.soundcloud .cta-block a, .download .cta-block a{
    color: #fff;
}
.soundcloud .scembed{
    width: 60%;
    display: inline-block;
    padding:0;
    outline:0;
    margin:0;
    border: 0;
}
.quote{
    color: #1d4f91;
    text-align: center;
    font-size: 18px;
    padding: 20px 18% 0;
}
.quote i{
    color: #E63888;
    font-size: 24px;
    margin: 10px;
}
.quote .author{
    font-weight: 400;
}
a.solution{
    color: #63666a;
    margin: 5px 0;
    display: inline-block;
}
a.solution b{
    font-size: 20px;
}
a.pink{		
    color: #E63888;
}
.solutions-bottom{
    color: #1d4f91;
    font-size: 18px;
    font-weight: 300;
    border: 1px solid #d2d2d2;
    border-width: 1px 0 0 0;
    margin-top: 40px;
    padding-top: 30px;
}
.btn-pink-transparent {
    border: 2px solid #E63888;
    color: #E63888;
    background-color: #fff;
    font-size: 18px;
    padding: 10px 15px;
    margin: 10px 0;
    border-radius: 10px;
    letter-spacing: -0.2px;
    transition: all .3s;
    white-space: normal;
}
.btn.btn-purple {
    background-color: #E63887;
    color: #fff;
}
.btn.btn-purple span {
    font-weight: bold;
}

.download .cta-block img{
    width: 433px;
    top: -35px;
    right: 30px;
    max-width: 433px;
    max-height: 295px;
}
.download .cta-block h3 {
    width: 50%;
    margin-bottom: 15px;
    font-size: 26px;
    line-height: 32px;
}

#relatedp{
    color: #1d4f91;
    margin-top: 40px;
}
.centerlink.row{
    text-align: center;
    margin: 30px auto 60px;
    display: inherit;
    font-size: 14px;
}
.row.related.blogs{
    margin-top: 60px;
}

.related .bottom {
    padding-bottom: 30px;
}
.related .bottom span.cat{
    position: absolute;
    bottom: 0;
}
.related .bottom span.cat a{
    color: #E63888;
    font-size: 14px; 
}
.related .boxed{
    border: 1px solid #d2d2d2;
    border-radius: 15px;
    height: 100%;
}
.related .boxed .summary{
    font-size: 14px;
    font-weight: 300;
    margin-bottom: 1rem;
}
.related .image{
    width: 50%;
    height: 100%;
    display: inline-block;
    border-radius: 15px 0 0 15px;
}
.related .first .text{
    width: 50%;
    height: 100%;
    display: inline-block;
    background-color: #f4f6fa;
}
.related .text{
    vertical-align: top;
    border-radius: 0 15px 15px 0;
    padding: 25px 25px 45px 25px;
}
.related a{
    display: block;
    font-size: 14px;
}
.related a.title{
    font-weight: 500;
    margin-bottom: 10px;
}
.related a.cat{	
    color: #63666a;
    font-size: 12px;
}
.related a.fm{
    position: absolute;
    bottom: 10px;
    font-weight: 500;
}
.bottom a{
    color: #63666a;
    font-size: 16px;
}
.bottom a span{
    font-size: 14px;
}
.purplegrad{
    background: rgb(29,79,145);
    background: linear-gradient(140deg, rgba(29,79,145,0.8) 20%, rgba(175,22,133,0.8) 80%);
    display: inline-block;
    width: 100%;
    height: 100%;
    margin: 50px 0 0;
    color: #fff;
    padding: 0 !important;
    
}
.purplegrad .row .col-md-12{
    font-size: 1.8vw;	
    font-weight: 200;
    text-align: center;
}
.purplegrad .btn{
    border-radius: 10px;
}

.purplegrad.cta p{
    font-size: 26px;
}
.slides{
    width: 90%;
    margin: 0 auto 50px;
    display: flex;
    align-items: center;
}
.slides .slide{
    display: flex;
    align-items: center;
}
.slides .slide .image{
    width: 300px;		
}
.slides .slide .image img{
    margin: 0 auto;
}

.slides .slide .text{
    width: calc(100% - 300px);
    font-size: 14px;
    margin-left: 30px;
}

@media(max-width: 767px){
    .slides .slide .text{
        margin-left: 0;
    }
}

.slides .slide .title{
    color: #1d4f91;
    font-size: 26px;
    line-height: 30px;
    font-weight: 300;
}
.slides .slide .before-title{
    font-size: 12px;
    font-weight: 300;
    display: block;
    color: #1d4f91;
    text-transform: uppercase;
}
.slides .slide p{
    padding: 0;
}
.slides .slide .text .cs-see-more{
    font-size: 14px;
    font-weight: 400;
    display: block;
    color: #1d4f91;
}
.slides i{
    color: #1d4f91;
    font-size: 20px;
    margin: 30px;
}

.csarrow {
    width: 10px;
    height: 10px;
    border: 2px solid transparent;
    transform: rotate(45deg);
    display: inline-block;
    border-top-color: #63666a;
    border-right-color: #63666a;
}
.boxed .csarrow {
    border-top-color: #406eb3;
    border-right-color: #406eb3;
    width: 8px;
    height: 8px;
}

.cat a .csarrow {
    border-top-color: #E63888;
    border-right-color: #E63888;
    width: 8px;
    height: 8px;
}

.csarrow.white {
    border-top-color: #fff;
    border-right-color: #fff;
}
.csarrow.small {
    width: 8px;
    height: 8px;
}
.pink .csarrow,
.btn-pink-transparent .csarrow {
    border-top-color: #E63888;
    border-right-color: #E63888;
}

.soundcloud {
    border-radius: 10px;
    color: #fff;
}
.soundcloud iframe {
    height: 200px;
}
.soundcloud h3 {
    font-size: 1.6rem;
}
.soundcloud-embed-wrapper {
    border-radius: 0 10px 10px 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    flex-grow: 1;
}

.soundcloud-embed-wrapper div {
    display: none;
}

.h-gradient {
    background: linear-gradient(90deg, rgb(29, 79, 145) 20%, rgb(228, 57, 136) 80% );
    }

.lblue{
    background: #f4f6fa;
    position: relative;
    padding: 50px 0;
    overflow: hidden;
}

.lblue.slide-container{
    margin-bottom: -40px;
}

.lblue.slide-container:before{
    content: "";
    position: absolute;
    width: 50vw;
    min-width: 280px;
    height: 50vw;
    min-height: 280px;
    left: 50%;
    top: 50%;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 14vw;
    transform: translate(-50%,-50%) rotate(25deg);
}


@media (min-width: 1200px) {
    .container {
        max-width: 1070px;
    }
}
@media (min-width: 1500px) {
    .container {
        max-width: 1070px;
    }
}
@media only screen and (max-width: 1700px) {
    .cswrapper {margin: -280px auto 60px; }
}
@media only screen and (max-width: 1300px) {
    .slides{width: 100%;}
    .cswrapper {margin: -230px auto 60px; }
    .casestudy-header .container{ font-size: 60px;}
}
@media only screen and (max-width: 1200px) {
    .pointless{ display: none;}
    .slides .slide .image { width: 200px }
    .slides .slide .image img{ max-width: 100% }
}
@media only screen and (max-width: 1100px) {
    .casestudy-header .container{ font-size: 45px; padding: 50px 30% 0 0;}
    .casestudy-header::after{ margin-top: -210px; }
}
@media only screen and (max-width: 990px) {
    .casestudy-header .container{ font-size: 40px; padding: 40px 30% 0 0;}
    .casestudy-header::after{ margin-top: -160px; }
    .cswrapper {margin: -170px auto 60px; }
    .row.buttons .col-md-12{ text-align: center;}
    .slides i { margin: 10px;}
    .slides .slide .title {font-size: 18px;}
    .slides .slide p {font-size: 14px;}
    .related .col-md-6{ width: 100%; flex: 0 0 100%; max-width: 100%; margin-bottom: 30px;}
    .related .col-md-3{ width: 50%;flex: 0 0 50%; max-width: 50%;}
    .related .col-md-3.bottom{margin-bottom: 30px;}
    .download .cta-block img { max-width: 350px; top: -10px; right: -10px}
    
}
@media only screen and (max-width: 800px) {
    .casestudy-header .container{ font-size: 30px; padding: 30px 30% 0 0;}
    .casestudy-header::after{ margin-top: -140px; }
    .cswrapper {margin: -150px auto 60px; }
}
@media only screen and (max-width: 767px) {
    .purplegrad .row .col-md-12{ font-size: 16px; font-weight: 400;}
    .purplegrad .row button{ margin-top: 15px;}
    .download {margin-bottom: 80px;}
    .download .cta-block{padding-bottom: 150px; text-align: center;}
    .download .cta-block h3{width: 100%}
    .download .cta-block img{ top: unset; bottom: -100px; right: calc(50% - 175px); }
    .soundcloud .sctext, .soundcloud .scembed{ width: 100%;}
    .soundcloud .cta-block{ padding: 10px 8px 3px 8px;}
    .soundcloud .sctext{ padding: 30px 30px 15px;}
    .cswrapper {margin: 0px auto 30px;}
    .casestudy-header{margin-bottom: 30px;}
    .casestudy-header::after{ background: none;}
    button.btn-pink-transparent{ margin: 30px auto;}
    .centerlink.row{ margin: 15px auto 30px;}
    .soundcloud-embed-wrapper {	border-radius: 0 0 10px 10px;}
    .slick-list .slick-track .slick-slide { display: block;}
    .slick-list .slick-track .slick-slide .text { width: auto;}
    .slick-list .slick-track .slick-slide .image { margin-bottom: 1rem;}
    .quote{ padding: 20px 0 30px;}
    .purplegrad.cta p{ font-size: 22px;}
}
@media only screen and (max-width: 500px) {
    .cswrapper .buttons .cs-buttons-wrapper { overflow-x: auto; }
    .related .col-md-3{ width: 100%;flex: 0 0 100%; max-width: 100%; margin-bottom: 30px}
    .related .image, .centerlink .grey{ display: none;}
    .related .first .text{ width: 100%; background-color: transparent;}
    .cta-block h3{ font-weight: 300; font-size: 26px;}
    .casestudy-header .container{padding: 60px 15px 15px;}
    .cswrapper .container.box{ border: none; padding: 0 15px 30px; margin-bottom: 30px;}
    
}

#sticky-wrapper.is-sticky #nobootstrap{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}
.cs-buttons-wrapper a.btn-purple{
    display: none;
}
#sticky-wrapper.is-sticky {
    width: 100%;
}
#sticky-wrapper.is-sticky .cs-buttons-wrapper a.btn{
    float: left;
}
#sticky-wrapper.is-sticky .cs-buttons-wrapper a.btn-purple{
    display: inline-block;
    float: right;
}
#sticky-wrapper.is-sticky .cs-buttons-wrapper a.btn-purple:hover{
    background-color: #E63887;
    text-decoration: underline;
    float: right;
}
#sticky-wrapper.is-sticky .cs-buttons-wrapper{
    padding-top: 15px;
    display: inline-block !important;
    width:100%; 
}
#sticky-wrapper.is-sticky .cs-buttons-wrapper:after{
    position: fixed;
    width: 100%;
    height: 90px;
    left:0;
    top: 75px;
    content: ' ';
    background-color: #f5f5f5;
    z-index: -1;
} 
#sticky-wrapper.is-sticky .cs-buttons-wrapper .d-md-flex.pink.pointless{
    display: none !important;
}
#sticky-wrapper.is-sticky .logo-buttons{
    display: none !important;
}

.logo{
    max-height: 100px;
}

.container.box .logo{
    max-height: 60px;
}

.single #wrapper{
    padding-bottom: 0;
}