body,html{
    margin:0;
    padding:0;
    width:100%;
    min-height:100%;
    background-color:#00bcd4
}
body.scroll{
    overflow:visible
}
.case-study-header .nav-bar.fixed{
    box-shadow:0 5px 0 rgba(0,0,0,.1)
}
.case-study-header .nav-bar .burger{
    color:#00bcd4!important
}
@media screen and (max-width:414px){
    .case-study-header .nav-bar .opacity{
        opacity:1
    }
}
.svg-path{
    position:fixed;
    width:100%;
    height:100%;
    z-index:0
}
.loading-circles,.logo{
    position:absolute;
    top:50%;
    left:0;
    right:0
}
span.blue{
    color:#00838f;
    font-weight:700
}
.logo{
    z-index:9;
    margin:-100px auto 0;
    width:130px
}
.logo .white{
    display:none;
    width: 130px;
}
.dark {
  width: 130px;
}
.loading-circles{
    z-index:9;
    margin:50px auto 0;
    width:80px;
    opacity:0;
    transition:opacity .15s
}
.loading-circles .bubblingG{
    text-align:center;
    width:80px;
    height:50px;
    margin:auto
}
.loading-circles .bubblingG span{
    display:inline-block;
    vertical-align:middle;
    width:10px;
    height:10px;
    margin:25px auto;
    background:#fff;
    border-radius:50px;
    -o-border-radius:50px;
    -ms-border-radius:50px;
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
    animation:bubblingG 1s infinite alternate;
    -o-animation:bubblingG 1s infinite alternate;
    -ms-animation:bubblingG 1s infinite alternate;
    -webkit-animation:bubblingG 1s infinite alternate;
    -moz-animation:bubblingG 1s infinite alternate
}
.topper {
    height:100%;
    position:relative;
    overflow:hidden
}
.loading-circles .bubblingG #bubblingG_1{
    animation-delay:0s;
    -o-animation-delay:0s;
    -ms-animation-delay:0s;
    -webkit-animation-delay:0s;
    -moz-animation-delay:0s
}
.loading-circles .bubblingG #bubblingG_2{
    animation-delay:.39s;
    -o-animation-delay:.39s;
    -ms-animation-delay:.39s;
    -webkit-animation-delay:.39s;
    -moz-animation-delay:.39s
}
.loading-circles .bubblingG #bubblingG_3{
    animation-delay:.78s;
    -o-animation-delay:.78s;
    -ms-animation-delay:.78s;
    -webkit-animation-delay:.78s;
    -moz-animation-delay:.78s
}
.topper{
    width:100%
}
.topper .left{
    float:left;
    width:100%;
    transition:all .7s;
    display:table-cell
}
@media screen and (max-width:640px){
    .topper .left{
        width:100%;
        float:none;
        display:block
    }
}

.topper .left .motto{
    margin:calc(50vh - 60px) auto 0;;
    -webkit-transform:translateY(-50%);
    transform:translateY(-50%);
    transition:opacity .3s
}
@media screen and (max-width:768px){
    .topper .left .motto{
        margin:calc(50vh - 100px) auto 0;
        padding-top: 120px !important;
    }
}
@media screen and (max-width:375px){
    .topper .left .motto{
        margin:50% auto 0;
        padding:0 20px;
        -webkit-transform:translateY(-50%);
        transform:translateY(-50%)
    }
}
.topper .left .motto .holder{
    -webkit-transform:translateY(40px);
    transform:translateY(40px);
    transition:all .5s;
    opacity:0;
    margin:0
}

.topper .left .motto.show{
    /*padding-top:250px*/
    padding-top:30px;
}
.topper .left .motto.show .holder{
    opacity:1;
    -webkit-transform:translateY(0);
    transform:translateY(0);
    transition:all .5s
}
.topper .left .motto.show .holder:nth-child(1){
    transition-delay:0s
}
.topper .left .motto.show .holder:nth-child(2){
    transition-delay:.2s
}
.topper .left .motto.show .holder:nth-child(3){
    transition-delay:.4s
}
.topper .left .motto.show .holder:nth-child(4){
    transition-delay:.6s
}
.topper .left .motto.show .holder:nth-child(5){
    transition-delay:.8s
}
.expertise-container .title.normal,.partners .getintouch a{
    font-family:"Montserrat Light";
    letter-spacing:4px;
    text-transform:uppercase
}

.scrolled .left{
    width:50%;
    transition:all .7s
}
@media screen and (max-width:640px){
    .scrolled .left{
        width:100%;
        float:none;
        position:relative;
        min-height:100vh
    }
}
@media screen and (max-width:640px){
    .scrolled .right{
        width:100%;
        float:none;
        height:auto
    }
    .partners .list{
        padding:0
    }
}
.partners .list .image{
    display:inline-block;
    width:calc(95%/3);
    padding:50px 0;
    text-align:center
}
@media screen and (max-width:640px){
    .partners .list .image{
        width:100%
    }
}
.partners .article-title{
    margin-top:70px;
    font-size:36px;
    line-height:36px;
    text-transform:uppercase;
    font-weight:700
}
@media screen and (max-width:768px){
    .partners .article-title{
        margin-top:50px
    }
}
.partners .getintouch{
    margin:70px 0 0;
    height:60px;
    text-align:center;
    vertical-align:bottom
}
@media screen and (max-width:768px){
    .partners .getintouch{
        margin:50px 0 20px
    }
}
.partners .getintouch a{
    color:#fff;
    padding:20px 30px;
    border-radius:30px;
    font-size:14px;
    margin-top:0;
    transition:all .3s ease-out 0s;
    display:inline-block
}
.partners .getintouch a:active,.partners .getintouch a:focus,.partners .getintouch a:hover{
    text-decoration:none;
    color:#fff;
    margin-top:-4px;
    transition:all .3s ease-out 0s;
    box-shadow:0 7px 0 rgba(0,0,0,.1)
}
.partners .getintouch .picto{
    display:block;
    font-size:25px;
    line-height:18px;
    float:right;
    margin-top:2px;
    margin-left:2px
}
.expertise-container{
    padding:60px 112px;
    background-color:#DFF7FA
}
@media screen and (max-width:1280px){
    .expertise-container{
        padding:60px 20px
    }
}
.expertise-container .title{
    font-size:36px;
    line-height:36px;
    text-transform:uppercase;
    font-weight:700;
    max-width:600px;
    text-align:center;
    margin:20px auto 30px;
    color:#00838f
}
.expertise-container .title.normal{
    margin:0 0 50px;
    font-size:14px;
    line-height:1.42857143;
    width:100%;
    max-width:100%;
    text-align:center;
    font-weight:300
}
.expertise-container .center{
    max-width:1142px;
    margin:auto
}
.expertise-container .top{
    position:relative;
    margin-bottom:66px;
    height:183px
}
.expertise-container .top #curves{
    top:0;
    position:absolute;
    left:0;
    right:0;
    margin:auto
}
.expertise-container .top .bg{
    width:308px;
    margin:auto
}
.expertise-container .top .bg #curves #shape_middle{
    -webkit-transform:translateY(-66px);
    transform:translateY(-66px);
    transition:-webkit-transform 1s ease-in-out;
    transition:transform 1s ease-in-out;
    transition-delay:1s
}
.expertise-container .top .bg #curves #shape_bottom{
    -webkit-transform:translateY(-66px);
    transform:translateY(-66px);
    transition:opacity 10ms,-webkit-transform 1s ease-in-out;
    transition:opacity 10ms,transform 1s ease-in-out;
    transition-delay:1s;
    opacity:0
}
.expertise-container .top .bg.anim #curves #shape_middle{
    -webkit-transform:translateY(0);
    transform:translateY(0);
    transition:-webkit-transform .45s ease-in-out;
    transition:transform .45s ease-in-out;
    transition-delay:.45s
}
.expertise-container .top .bg.anim #curves #shape_bottom{
    opacity:1;
    -webkit-transform:translateY(0);
    transform:translateY(0);
    transition:opacity 10ms,-webkit-transform .45s ease-in-out;
    transition:opacity 10ms,transform .45s ease-in-out;
    transition-delay:.9s
}
.expertise-container .top .indicador{
    position:absolute
}
.expertise-container .top .indicador.strategy{
    top:28px;
    left:50%;
    -webkit-transform:translateX(-100%);
    transform:translateX(-100%);
    margin-left:6px
}
@media screen and (max-width:1024px){
    .expertise-container .top .indicador.strategy{
        top:20px
    }
    .expertise-container .top .indicador.strategy svg{
        width:375px
    }
    .expertise-container .top .indicador.design svg{
        height:60px
    }
}
.expertise-container .top .indicador.design{
    left:50%;
    margin-left:-6px;
    top:164px
}
.expertise-container .top .indicador.development{
    right:50%;
    -webkit-transform:translateX(100%);
    transform:translateX(100%);
    top:94px;
    margin-right:6px
}
@media screen and (max-width:1024px){
    .expertise-container .top .indicador.development{
        top:86px
    }
    .expertise-container .top .indicador.development svg{
        width:355px
    }
}
.expertise-container .top .indicador #end_design,.expertise-container .top .indicador #end_development,.expertise-container .top .indicador #end_strategy,.expertise-container .top .indicador #start_design,.expertise-container .top .indicador #start_development,.expertise-container .top .indicador #start_strategy,.expertise-container .top .indicador path{
    opacity:0
}
.expertise-container .bottom .expertise{
    width:calc(99.99% / 3);
    float:left
}
@media screen and (max-width:768px){
    .expertise-container .top{
        display:none
    }
    .expertise-container .bottom .expertise{
        width:100%;
        float:none;
        margin-bottom:50px
    }
}
.expertise-container .bottom .expertise.show .image{
    opacity:1;
    transition:opacity 1s .25s
}
.expertise-container .bottom .expertise.show .more,.expertise-container .bottom .expertise.show .subtitle,.expertise-container .bottom .expertise.show .text,.expertise-container .bottom .expertise.show .title{
    opacity:1;
    -webkit-transform:translateY(0);
    transform:translateY(0);
    transition:all .5s .75s
}
.expertise-container .bottom .expertise:nth-child(1){
    padding:0 15px 0 0;
    margin-top:1px
}
@media screen and (min-width:415px) and (max-width:768px){
    .expertise-container .bottom .expertise:nth-child(1){
        padding:0
    }
}
@media screen and (max-width:414px){
    .expertise-container .title.normal{
        line-height:20px!important
    }
    .expertise-container .bottom .expertise:nth-child(1){
        padding:0 15px;
        margin:0 0 50px
    }
}
.expertise-container .bottom .expertise:nth-child(2){
    padding:0 15px;
    margin-top:20px
}
@media screen and (min-width:415px) and (max-width:768px){
    .expertise-container .bottom .expertise:nth-child(2){
        padding:0;
        margin:0 0 50px
    }
}
@media screen and (max-width:414px){
    .expertise-container .bottom .expertise:nth-child(2){
        padding:0 15px;
        margin:0 0 50px
    }
}
.expertise-container .bottom .expertise:nth-child(3){
    padding:0 0 0 15px;
    margin-top:19px
}
@media screen and (min-width:415px) and (max-width:768px){
    .expertise-container .bottom .expertise:nth-child(3){
        padding:0;
        margin:0
    }
}
@media screen and (max-width:414px){
    .expertise-container .bottom .expertise:nth-child(3){
        padding:0 15px;
        margin:0
    }
}
.expertise-container .bottom .expertise .image{
    margin-bottom:30px;
    opacity:0;
    transition:opacity 1s .25s
}
.expertise-container .bottom .expertise .title{
    margin-bottom:20px;
    font-family:Montserrat,sans serif;
    font-size:18px;
    font-weight:700;
    color:#00838f;
    text-transform:uppercase;
    opacity:0;
    -webkit-transform:translateY(40px);
    transform:translateY(40px);
    transition:all .5s .75s
}
.expertise-container .bottom .expertise .subtitle{
    margin-bottom:15px;
    font-family:'Montserrat Light',sans serif;
    font-size:12px;
    line-height:24px;
    letter-spacing:4px;
    color:#00838f;
    text-transform:uppercase;
    opacity:0;
    -webkit-transform:translateY(40px);
    transform:translateY(40px);
    transition:all .5s .75s
}
.expertise-container .bottom .expertise .text{
    margin-bottom:30px;
    font-family:Lora,sans serif;
    line-height:20px;
    font-size:14px;
    color:#00838f;
    opacity:0;
    -webkit-transform:translateY(40px);
    transform:translateY(40px);
    transition:all .5s .75s
}
.expertise-container .bottom .expertise .more{
    opacity:0;
    -webkit-transform:translateY(40px);
    transform:translateY(40px);
    transition:all .5s .75s
}
@media screen and (min-width:415px) and (max-width:768px){
    .expertise-container .bottom .expertise .image{
        float:left;
        width:128px;
        margin-left:10px
    }
    .expertise-container .bottom .expertise .image img{
        width:100%;
        max-width:100%
    }
    .expertise-container .bottom .expertise .title{
        margin-left:170px;
        text-align:left
    }
    .expertise-container .bottom .expertise .subtitle{
        margin-left:170px
    }
    .expertise-container .bottom .expertise .text{
        margin-left:170px;
        margin-bottom:10px
    }
    .expertise-container .bottom .expertise .more{
        margin-left:170px
    }
}
.expertise-container .bottom .expertise .more a{
    font-family:Montserrat,sans serif;
    font-size:12px;
    font-weight:700;
    color:#00838f;
    text-transform:uppercase
}
.ios .expertise-container .top .indicador #end_design,.ios .expertise-container .top .indicador #end_development,.ios .expertise-container .top .indicador #end_strategy,.ios .expertise-container .top .indicador #start_design,.ios .expertise-container .top .indicador #start_development,.ios .expertise-container .top .indicador #start_strategy,.ios .expertise-container .top .indicador path{
    opacity:1
}
.ios .expertise-container .top .bg #curves #shape_bottom,.ios .expertise-container .top .bg #curves #shape_middle,.ios .expertise-container .top .bg #curves #shape_top{
    -webkit-transform:none;
    transform:none;
    opacity:1
}
.ios .expertise-container .bottom .expertise .image,.ios .expertise-container .bottom .expertise .more,.ios .expertise-container .bottom .expertise .subtitle,.ios .expertise-container .bottom .expertise .text,.ios .expertise-container .bottom .expertise .title{
    opacity:1;
    -webkit-transform:none;
    transform:none
}
.go-down{
    bottom:20px;
    z-index:1
}
@media screen and (max-width:360px){
    .go-down{
        bottom:auto;
        top:75%
    }
}
.left .go-down{
    bottom:-20px
}
@media screen and (max-width:375px){
    .left .go-down{
        top:calc(100% - 250px);
        bottom:auto
    }
}
.twitter-container{
    background-color:#DFF7FA;
    margin-top:-5px;
    height:calc(50vh - 64px);
    display:none;
    width:100%
}
.twitter-container.show-feed{
    display:table
}
.twitter-container .article-container{
    display:table-cell;
    width:calc(100vw / 3)
}
.twitter-container .article-container .link{
    margin-top:0
}
.twitter-container .article-container .link figure{
    margin-bottom:-5px
}
.twitter-container .tweet-container{
    display:table-cell;
    width:calc(100vw * 2 / 3);
    vertical-align:middle
}
.twitter-container .tweet-container .title.article-title{
    font-weight:700;
    font-size:28px;
    line-height:28px;
    color:#00838f;
    text-transform:uppercase;
    margin-bottom:4px
}
.twitter-container .tweet-container .title.normal{
    font-family:'Montserrat Light',sans-serif;
    font-size:14px;
    line-height:20px;
    margin-top:30px;
    margin-bottom:50px;
    text-transform:uppercase;
    letter-spacing:3px
}
.twitter-container .tweet-container .title.normal a,.twitter-container .tweet-container .title.normal a:hover{
    color:#00838f!important;
    text-decoration:none
}
.twitter-container .tweet-container .feed-container{
    padding:50px
}
.twitter-container .tweet-container .feed-container .tweecool{
    margin-top:20px
}
.twitter-container .tweet-container .feed-container .tweecool ul{
    margin:0;
    padding:0;
    list-style:none;
    position:relative
}
.twitter-container .tweet-container .feed-container .tweecool ul li{
    position:absolute;
    left:0;
    right:0;
    opacity:0;
    transition:opacity .3s;
    visibility:hidden
}
.twitter-container .tweet-container .feed-container .tweecool ul li.active{
    opacity:1;
    transition:opacity .3s;
    visibility:visible
}
.twitter-container .tweet-container .feed-container .tweecool ul li .tweets_txt{
    font-size:20px;
    line-height:38px;
    color:#414141;
    max-width:760px;
    margin:auto;
    font-family:'Montserrat Light',sans-serif
}
.twitter-container .tweet-container .feed-container .tweecool ul li .tweets_txt a{
    font-family:Montserrat,sans-serif;
    font-weight:700;
    color:#00838f
}
.twitter-container.double-article .article-container{
    width:calc(100vw * 2 / 3)
}
@media screen and (max-width:768px){
    .twitter-container{
        height:auto
    }
    .twitter-container.double-article .article-container{
        display:block;
        width:100%
    }
}
.twitter-container.double-article .article-container .link{
    width:50%
}
.twitter-container.double-article .tweet-container{
    width:calc(100vw / 3)
}
.twitter-container.double-article .tweet-container .feed-container{
    height:320px
}
@media screen and (max-width:1024px){
    .twitter-container.double-article .tweet-container .feed-container{
        padding:20px
    }
}
@media screen and (max-width:768px){
    .twitter-container.double-article .tweet-container{
        width:100%;
        display:block
    }
    .twitter-container.double-article .tweet-container .feed-container{
        padding:50px
    }
}
.twitter-container.single-article .article-container{
    width:calc(100vw / 3)
}
@media screen and (max-width:768px){
    .twitter-container.single-article .article-container{
        width:50%
    }
}
.twitter-container.single-article .article-container .link{
    width:100%
}
.twitter-container.single-article .tweet-container{
    width:calc(100vw * 2 / 3)
}
@media screen and (max-width:768px){
    .twitter-container.single-article .tweet-container{
        width:50%
    }
}
@media screen and (max-width:640px){
    .twitter-container.single-article .tweet-container{
        vertical-align:top
    }
}
@media screen and (max-width:414px){
    .twitter-container .tweet-container .feed-container .tweecool ul li .tweets_txt{
        font-size:18px;
        line-height:30px
    }
    .twitter-container.double-article .tweet-container .feed-container{
        padding:50px 20px
    }
    .twitter-container.single-article .article-container{
        display:block
    }
    .twitter-container.single-article .tweet-container{
        vertical-align:middle;
        width:100%;
        display:block
    }
}
.twitter-container.single-article .tweet-container .feed-container{
    height:250px
}
@media screen and (max-width:768px){
    .twitter-container.single-article .tweet-container .feed-container{
        padding:20px
    }
    .twitter-container.no-article .tweet-container{
        height:350px
    }
}
@media screen and (max-width:414px){
    .twitter-container.single-article .tweet-container .feed-container{
        padding:50px 20px
    }
}
.twitter-container.no-article{
    width:100%;
    position:relative
}
.twitter-container.no-article .tweet-container{
    width:100%
}
.twitter-container.no-article .tweet-container .feed-container{
    padding:50px 112px;
    max-width:100%;
    text-align:center;
    position:absolute;
    top:50%;
    left:0;
    right:0;
    bottom:0;
    -webkit-transform:translateY(-50%);
    transform:translateY(-50%);
    height:300px
}
@media screen and (max-width:768px){
    .twitter-container.no-article .tweet-container .feed-container{
        max-width:none;
        padding:50px;
        height:300px
    }
}
@media screen and (max-width:414px){
    .twitter-container.no-article .tweet-container .feed-container{
        padding:20px
    }
}
@-webkit-keyframes curvesAnim{
    0%{
        opacity:0
    }
    100%{
        opacity:1
    }
}
@keyframes curvesAnim{
    0%{
        opacity:0
    }
    100%{
        opacity:1
    }
}
@-webkit-keyframes curveTopAnim{
    0%{
        stroke-opacity:.75
    }
    100%,50%{
        stroke-opacity:.25
    }
}
@keyframes curveTopAnim{
    0%{
        stroke-opacity:.75
    }
    100%,50%{
        stroke-opacity:.25
    }
}
@-webkit-keyframes curveMiddleAnim{
    0%,100%{
        stroke-opacity:.25
    }
    50%{
        stroke-opacity:.75
    }
}
@keyframes curveMiddleAnim{
    0%,100%{
        stroke-opacity:.25
    }
    50%{
        stroke-opacity:.75
    }
}
@-webkit-keyframes curveBottomAnim{
    0%,50%{
        stroke-opacity:.25
    }
    100%{
        stroke-opacity:.75
    }
}
@keyframes curveBottomAnim{
    0%,50%{
        stroke-opacity:.25
    }
    100%{
        stroke-opacity:.75
    }
}
@-webkit-keyframes bubblingG{
    0%{
        width:8px;
        height:8px;
        background-color:#00838f;
        -webkit-transform:translateY(0);
        transform:translateY(0)
    }
    100%{
        width:12px;
        height:12px;
        background-color:#fff;
        -webkit-transform:translateY(-21px);
        transform:translateY(-21px)
    }
}
@keyframes bubblingG{
    0%{
        width:8px;
        height:8px;
        background-color:#00838f;
        -webkit-transform:translateY(0);
        transform:translateY(0)
    }
    100%{
        width:12px;
        height:12px;
        background-color:#fff;
        -webkit-transform:translateY(-21px);
        transform:translateY(-21px)
    }
}