@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

.at-blendedModel {
    display: none; /** hide from old browsers */
}

@media screen and (min-width: 1030px) {
    .blendedModelVideo {
        display: none;
    }

    .at-blendedModel {
        display: initial;
    }

    @-webkit-keyframes up-and-down {
        0% {
            bottom: 30px;
        }

        70% {
            bottom: 20px;
        }

        100% {
            bottom: 30px;
        }
    }

    @keyframes up-and-down {
        0% {
            bottom: 30px;
        }

        70% {
            bottom: 20px;
        }

        100% {
            bottom: 30px;
        }
    }

    @-webkit-keyframes up-and-down-smooth {
        0% {
            -webkit-transform: translateY(0px);
            transform: translateY(0px);
        }

        50% {
            -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
        }

        100% {
            -webkit-transform: translateY(0px);
            transform: translateY(0px);
        }
    }

    @keyframes up-and-down-smooth {
        0% {
            -webkit-transform: translateY(0px);
            transform: translateY(0px);
        }

        50% {
            -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
        }

        100% {
            -webkit-transform: translateY(0px);
            transform: translateY(0px);
        }
    }

    @keyframes pickMe {
        0% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }

        40% {
            -webkit-transform: scale(.8);
            transform: scale(.8);
        }

        80% {
            -webkit-transform: scale(1.5);
            transform: scale(1.5);
        }

        100% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }

    #controls {
        display: block;
        -webkit-transition: opacity 350ms;
        transition: opacity 350ms;
        position: fixed;
        bottom: 8em;
        right: 2%;
        z-index: 50;
        padding: 5px;
        border-radius: 10px;
        background-color: rgba(171, 0, 59, 0.77);
        -webkit-animation: pickMe .6s cubic-bezier(0.25, -0.2, 0.23, 1.16);
        animation: pickMe .6s cubic-bezier(0.25, -0.2, 0.23, 1.16) 2s;
    }

    .is-animation-hidden #controls {
        display: none;
    }

    #controls button {
        margin-bottom: 0;
        padding: 10px 15px;
        border: 0;
        border-radius: 5px;
        font-size: 18px;
        color: #fff;
        text-align: center;
        background-color: transparent;
        cursor: pointer;
        outline: none;
    }

    #controls button:hover {
        color: #fff;
        background-color: #ad0d44;
    }

    #controls .fa-play--disabled:before {
        opacity: .4;
        content: "\f04b";
    }

    #controls .fa-play--disabled {
        pointer-events: none;
    }

    #tooltips {
        position: absolute;
        z-index: 2;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 1140px;
        margin: 0 auto;
    }

    #tooltips .tooltip {
        position: absolute;
        display: block;
        width: 32px;
        height: 32px;
        margin-left: 2px;
        border-radius: 50%;
        border: 3px solid #c5275f;
        color: #FFF;
        line-height: 32px;
        text-align: center;
        font-size: 18px;
        background-color: #c5275f;
    }

    #tooltips .tooltip:hover {
        color: #c5275f;
        background-color: #FFF;
    }

    #tooltips .tooltip-popup {
        display: none;
    }

    #cboxLoadedContent {
        height: auto !important;
    }

    #tooltips #tooltip-investors-return,
    #tooltips #tooltip-lenders-return,
    #tooltips #tooltip-reserves-return {
        display: none;
    }

    @-webkit-keyframes showAnimation {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes showAnimation {
        0% {
            opacity: 0;
        }

        50% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    #colorbox {
        z-index: 100;
        outline: 0;
    }

    #cboxWrapper {
        text-align: left;
        font-family: "Montserrat", sans-serif;
    }

    #colorbox #cboxLoadedContent {
        position: relative;
        width: 620px;
        padding: 32px;
        border-radius: 4px;
        color: #fff;
        background-color: rgba(51, 51, 51, 0.9);
    }

    #colorbox #cboxClose {
        position: absolute;
        top: 10px;
        right: 10px;
        padding: 10px;
        cursor: pointer;
        /* reset */
        border: 0;
        color: inherit;
        background: none;
        /* cursor: default; */
        font: inherit;
        line-height: normal;
        overflow: visible;
        -webkit-appearance: button;
        /* for input */
        -webkit-user-select: none;
        /* for button */
        -moz-user-select: none;
        -ms-user-select: none;
        -webkit-animation: showAnimation 1s;
        /* Safari 4+ */
        /* Fx 5+ */
        /* Opera 12+ */
        animation: showAnimation 1s;
        /* IE 10+, Fx 29+ */
    }

    #colorbox #cboxClose span {
        display: none;
    }

    #colorbox #cboxClose i {
        color: #fff;
    }

    #colorbox #cboxClose i:before {
        font-size: 22px;
    }

    #colorbox #cboxContent h2 {
        margin-top: 0;
        margin-bottom: 10px;
        line-height: 28px;
        font-weight: bold;
        font-family: "Montserrat", sans-serif;
        color: #fff;
    }

    #colorbox #cboxContent p {
        margin-top: 0px;
        margin-bottom: 20px;
        font-size: 15px;
        line-height: 24px;
        color: #fff;
    }

    #colorbox #cboxContent a {
        display: inline-block;
        color: #FFF;
    }

    #colorbox #cboxContent a:hover,
    #colorbox #cboxContent a:focus {
        text-decoration: none;
    }

    #tooltip-steps {
        position: relative;
    }

    body.is-animation-hidden:after {
        content: '';
        position: fixed;
        z-index: 100;
        right: 0;
        bottom: 50px;
        left: 0;
        height: 51px;
        width: 101px;
        margin: 0 auto;
        background-image: url("/ui/oikocredit-2015/article-templates/blendedModelArticle/img/scroll.png");
        -webkit-animation: up-and-down 650ms ease infinite;
        animation: up-and-down 650ms ease infinite;
    }

    .at-blendedModel p {
        font-family: "Montserrat", sans-serif;
        font-size: 16px;
        color: #426A7F;
    }

    #model {
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        overflow: hidden;
        height: 3250px;
        background-image: url("/ui/oikocredit-2015/article-templates/blendedModelArticle/img/kartonnen_achtergrond.png");
        background-repeat: no-repeat;
        background-size: cover;
    }

    #canvas {
        position: absolute;
        z-index: 1;
        top: 0;
        right: 0;
        left: 0;
        height: 3250px;
        width: 1140px;
        margin: 0 auto;
        background-image: url("/ui/oikocredit-2015/article-templates/blendedModelArticle/img/laag.png");
        background-position: 100px 668px;
        background-repeat: no-repeat;
    }

    #canvas:before {
        content: '';
        position: absolute;
        top: 2471px;
        left: 120px;
        height: 199px;
        width: 547px;
        background-image: url("/ui/oikocredit-2015/article-templates/blendedModelArticle/img/visual-renewable.png");
    }

    #canvas:after {
        content: '';
        position: absolute;
        top: 1162px;
        right: 0;
        left: 0;
        width: 662px;
        height: 1546px;
        margin: 0 auto;
        background-image: url("/ui/oikocredit-2015/article-templates/blendedModelArticle/img/characters.png");
    }

    #canvas > * {
        position: absolute;
    }

    #input {
        position: absolute;
        top: 734px;
        left: 222px;
        height: 150px;
        width: 706px;
        background-image: url("/ui/oikocredit-2015/article-templates/blendedModelArticle/img/input.png");
    }

    #input.hidden p:after {
        opacity: 0;
    }

    #input.up p:after {
        top: -170px;
    }

    #input p {
        position: absolute;
        top: 150px;
        width: 200px;
        text-align: center;
    }

    #input p:after {
        content: '';
        position: absolute;
        top: 30px;
        right: 0;
        left: 0;
        height: 22px;
        width: 31px;
        margin: 0 auto;
        opacity: 1;
        background-image: url("/ui/oikocredit-2015/article-templates/blendedModelArticle/img/arrow.png");
        -webkit-transition: opacity 175ms;
        transition: opacity 175ms;
        -webkit-animation: up-and-down-smooth 700ms ease infinite;
        animation: up-and-down-smooth 700ms ease infinite;
    }

    #input p:nth-child(1) {
        left: 11px;
    }

    #input p:nth-child(2) {
        left: 280px;
    }

    #input p:nth-child(3) {
        left: 550px;
    }

    #output {
        top: 2850px;
        left: 599px;
        height: 130px;
        width: 426px;
        background-image: url("/ui/oikocredit-2015/article-templates/blendedModelArticle/img/end-clients.png");
    }

    #output p {
        position: absolute;
        top: 134px;
        width: 150px;
        text-align: center;
    }

    #output p:before {
        content: '';
        position: absolute;
        top: -168px;
        right: 0;
        left: -96px;
        height: 22px;
        width: 31px;
        margin: 0 auto;
        background-image: url("/ui/oikocredit-2015/article-templates/blendedModelArticle/img/arrow.png");
        -webkit-animation: up-and-down-smooth 700ms ease infinite;
        animation: up-and-down-smooth 700ms ease infinite;
    }

    #output p:nth-child(1) {
        left: -14px;
        /*left: 13px;*/
    }

    #output p:nth-child(2) {
        left: 147px;
        /*left: 172px;*/
    }

    #output p:nth-child(2):before {
        left: -67px;
        /*left: -62px;*/
    }

    #output p:nth-child(3) {
        left: 302px;
        /*left: 327px;*/
    }

    #output p:nth-child(3):before {
        left: -18px;
    }

    #earth {
        top: 1381px;
        left: 534px;
        z-index: 2;
        height: 150px;
        width: 150px;
        background-image: url("/ui/oikocredit-2015/article-templates/blendedModelArticle/img/earth.png");
    }

    #earth:after {
        content: '';
        position: absolute;
        top: 47px;
        left: 35px;
        height: 50px;
        width: 83px;
        background-image: url("/ui/oikocredit-2015/article-templates/blendedModelArticle/img/oiko.png");
    }

    #financial {
        z-index: 2;
        top: 1745px;
        left: 200px;
    }

    #financial p {
        position: absolute;
        width: 150px;
        text-align: center;
    }

    #financial p:nth-child(1) {
        left: 60px;
    }

    #financial p:nth-child(2) {
        left: 331px;
    }

    #financial p:nth-child(3) {
        left: 600px;
    }

    #regions {
        z-index: 2;
        top: 2090px;
        left: 100px;
    }

    #regions p {
        position: absolute;
        width: 120px;
        text-align: center;
    }

    #regions p:nth-child(1) {
        left: 59px;
    }

    #regions p:nth-child(2) {
        left: 232px;
    }

    #regions p:nth-child(3) {
        left: 407px;
    }

    #regions p:nth-child(4) {
        left: 586px;
    }

    #regions p:nth-child(5) {
        left: 759px;
    }

    #investments {
        z-index: 2;
        top: 2490px;
        left: 200px;
    }

    #investments p {
        position: absolute;
        width: 100px;
        text-align: center;
    }

    #investments p:nth-child(1) {
        left: 24px;
    }

    #investments p:nth-child(2) {
        left: 211px;
    }

    #investments p:nth-child(3) {
        left: 623px;
    }

    .vat {
        height: 221px;
        width: 173px;
    }

    #vat-2-1 {
        top: 997px;
        left: 247px;
    }

    #vat-2-2 {
        top: 997px;
        left: 517px;
    }

    #vat-2-3 {
        top: 997px;
        left: 786px;
    }

    .pijp {
        height: 57px;
        width: 125px;
    }

    #pijp-3-1 {
        top: 1248px;
        left: 327px;
    }

    #pijp-3-2 {
        top: 1248px;
        left: 593px;
        height: 57px;
        width: 20px;
    }

    #pijp-3-3 {
        top: 1248px;
        left: 758px;
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
    }

    #combi-4 {
        top: 1345px;
        height: 222px;
        width: 501px;
        left: 353px;
    }

    #pijp-5-1 {
        top: 1597px;
        left: 322px;
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
    }

    #pijp-5-2 {
        top: 1597px;
        left: 593px;
        height: 57px;
        width: 20px;
    }

    #pijp-5-3 {
        top: 1597px;
        left: 758px;
    }

    #vat-6-1 {
        top: 1693px;
        left: 247px;
    }

    #vat-6-2 {
        top: 1693px;
        left: 515px;
    }

    #vat-6-3 {
        top: 1693px;
        left: 785px;
    }

    #distribute_regions-7 {
        top: 1945px;
        left: 208px;
        height: 59px;
        width: 718px;
    }

    #vat-8-1 {
        top: 2044px;
        left: 130px;
    }

    #vat-8-2 {
        top: 2044px;
        left: 306px;
    }

    #vat-8-3 {
        top: 2044px;
        left: 477px;
    }

    #vat-8-4 {
        top: 2044px;
        left: 655px;
    }

    #vat-8-5 {
        top: 2044px;
        left: 829px;
    }

    .pijp-row-9 {
        top: 2295px;
        height: 30px;
        width: 20px;
    }

    #pijp-9-1 {
        left: 205px;
    }

    #pijp-9-2 {
        left: 378px;
    }

    #pijp-9-3 {
        left: 554px;
    }

    #pijp-9-4 {
        left: 730px;
    }

    #pijp-9-5 {
        left: 905px;
    }

    #distribute_investments-10 {
        top: 2360px;
        left: 176px;
        height: 51px;
        width: 780px;
    }

    #vat-11-1 {
        top: 2450px;
        left: 184px;
    }

    #vat-11-2 {
        top: 2450px;
        left: 371px;
    }

    #vat-11-3 {
        top: 2450px;
        left: 785px;
    }

    #distribute_beneficiaries-12 {
        top: 2705px;
        left: 601px;
        height: 70px;
        width: 376px;
    }

    #path-A {
        top: 2418px;
        left: 553px;
        height: 647px;
        width: 415px;
    }

    #path-B {
        top: 1313px;
        left: 105px;
        height: 1445px;
        width: 359px;
    }

    #path-C {
        top: 1314px;
        left: 836px;
        height: 1381px;
        width: 191px;
    }

    #path-D {
        top: 675px;
        left: 328px;
        height: 912px;
        width: 662px;
    }

    #step-1 {
        height: 640px;
        background-image: url("/ui/oikocredit-2015/article-templates/blendedModelArticle/img/people.png");
        background-position: 50% 270px;
        background-repeat: no-repeat;
    }

    #step-1:before {
        content: '';
        position: absolute;
        top: 16px;
        right: 0;
        left: 0;
        display: block;
        height: 230px;
        width: 434px;
        margin: 0 auto;
        background-image: url("/ui/oikocredit-2015/article-templates/blendedModelArticle/img/logo.png");
    }

    #step-1 p {
        position: absolute;
        right: 0;
        left: 0;
        margin: 0 auto;
        width: 100%;
        max-width: 620px;
        line-height: 25px;
        text-align: center;
    }

    #step-1 p:first-child {
        top: 170px;
    }

    #step-1 p:last-child {
        top: 441px;
    }

    #step-2 {
        height: 300px;
        margin-top: 300px;
    }

    #step-3 {
        height: 100px;
        margin-top: 0px;
    }

    #step-4 {
        height: 240px;
    }

    #step-5 {
        height: 80px;
    }

    #step-6 {
        height: 265px;
    }

    #step-7 {
        height: 100px;
    }

    #step-8 {
        height: 240px;
    }

    #step-9 {
        height: 60px;
    }

    #step-10 {
        height: 85px;
    }

    #step-11 {
        height: 260px;
    }

    #step-12 {
        height: 110px;
    }

    #step-a {
        height: 250px;
    }

    #step-bc {
        height: 600px;
    }

    #step-d {
        height: 450px;
    }

    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
        body.is-animation-hidden:after {
            background-image: url("/ui/oikocredit-2015/article-templates/blendedModelArticle/img/scroll@2x.png");
            background-size: 101px 51px;
        }

        #model {
            background-image: url("/ui/oikocredit-2015/article-templates/blendedModelArticle/img/kartonnen_achtergrond@2x.png");
        }

        #canvas {
            background-image: url("/ui/oikocredit-2015/article-templates/blendedModelArticle/img/laag@2x.png");
            background-size: 931px 2401px;
        }

        #canvas:before {
            background-image: url("/ui/oikocredit-2015/article-templates/blendedModelArticle/img/visual-renewable@2x.png");
            background-size: 547px 199px;
        }

        #canvas:after {
            background-image: url("/ui/oikocredit-2015/article-templates/blendedModelArticle/img/characters@2x.png");
            background-size: 662px 1546px;
        }

        #input {
            background-image: url("/ui/oikocredit-2015/article-templates/blendedModelArticle/img/input@2x.png");
            background-size: 706px 150px;
        }

        #input p:after {
            background-image: url("/ui/oikocredit-2015/article-templates/blendedModelArticle/img/arrow@2x.png");
            background-size: 31px 22px;
        }

        #output {
            background-image: url("/ui/oikocredit-2015/article-templates/blendedModelArticle/img/end-clients@2x.png");
            background-size: 426px 130px;
        }

        #output p:before {
            background-image: url("/ui/oikocredit-2015/article-templates/blendedModelArticle/img/arrow@2x.png");
            background-size: 31px 22px;
        }

        #earth {
            background-image: url("/ui/oikocredit-2015/article-templates/blendedModelArticle/img/earth@2x.png");
            background-size: 150px 150px;
        }

        #earth:after {
            background-image: url("/ui/oikocredit-2015/article-templates/blendedModelArticle/img/oiko@2x.png");
            background-size: 83px 50px;
        }

        #step-1 {
            background-image: url("/ui/oikocredit-2015/article-templates/blendedModelArticle/img/people@2x.png");
            background-size: 530px 150px;
        }

        #step-1:before {
            background-image: url("/ui/oikocredit-2015/article-templates/blendedModelArticle/img/logo@2x.png");
            background-size: 434px 230px;
        }
    }
}