/*----------------------------------------------------*/
/* 4 blokken
 ------------------------------------------------------ */

#page-content .infographic-container {
    background: url(../images/background_infograph_1.png) no-repeat;
    background-position: 0 4px;
    font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
    display: block;
    width: 100%;
    height:400px;
    font-size: 13px;
    font-weight: normal;
    line-height: 14px;
    color:#0055A0;
    position:relative;
    margin:10px 0 20px 0;
}

#page-content .infographic-container .image-container {
    display: none;
}

#page-content .infographic-container figure  figcaption {
    font-size: 11px;
}

#page-content .infographic-container figure.niet-cooperatief {
    position: absolute;
    top:27px;
    left:30px;
}
#page-content .infographic-container figure.niet-cooperatief img {
    width:110px;
    height:auto;
}
#page-content .infographic-container figure.niet-cooperatief figcaption {
    position: absolute;
    top:60px;
    left:40px;
}

#page-content .infographic-container figure.statelijke-actoren {
    position: absolute;
    top:17px;
    right:32px;
}
#page-content .infographic-container figure.statelijke-actoren img {
    width:83px;
    height:auto;
}
#page-content .infographic-container figure.statelijke-actoren figcaption {
    position: absolute;
    top:87px;
    left:15px;
    width:40px;
    text-align: center;
}

#page-content .infographic-container figure.cooperatief {
    position: absolute;
    bottom:21px;
    right:40px;
}
#page-content .infographic-container figure.cooperatief img {
    width:58px;
    height:auto;
}
#page-content .infographic-container figure.cooperatief figcaption {
    position: absolute;
    top:17px;
    right:66px;
}

#page-content .infographic-container figure.niet-statelijke-actoren {
    position: absolute;
    bottom:50px;
    left:50px;
}
#page-content .infographic-container figure.niet-statelijke-actoren img {
    width:51px;
    height:auto;
}
#page-content .infographic-container figure.niet-statelijke-actoren figcaption {
    position: absolute;
    top:36px;
    left:-24px;
    text-align: center;
    width: 100px;
}







#page-content .infographic-container .multipolair {
    position:relative;
    height:auto;
    width:258px;
    top:39px;
    left:167px;
}
#page-content .infographic-container .fragmentatie {
    position:relative;
    height:auto;
    width:258px;
    top:132px;
    left:32px;
}
#page-content .infographic-container .multilateraal {
    position:relative;
    height:auto;
    width:258px;
    top:118px;
    left:301px;
}
#page-content .infographic-container .netwerk {
    position:relative;
    height:auto;
    width:258px;
    top:210px;
    left:165px;
    z-index: 3;
}

#page-content .infographic-container .multipolair img,
#page-content .infographic-container .fragmentatie img,
#page-content .infographic-container .multilateraal img,
#page-content .infographic-container .netwerk img {
    position:absolute;
    left:0;
}

#page-content .infographic-container img.top {
    top: -0.4em;
}
/* Hover is done in js */
/*#page-content .infographic-container img.top:hover {*/
    /*opacity:0;*/
    /*cursor: pointer;*/
/*}*/
#page-content .infographic-container img {
    z-index: 1;
}

#page-content .infographic-container #blocks-overlay {
    position: absolute;
    top:0;
    left: 0;
    opacity: 0;
    width:100%;
    height:400px;
    z-index: 10;
}







#page-content .infographic-container .arrow-container img.arrow,
#page-content .infographic-container .arrow-container svg {
    position: absolute;
    top:149px;
    left:296px;
    width:124px;
    height:auto;
    display: inline-block;
    z-index: 1;
}

#page-content .infographic-container .arrow-container figure.world_1 {
    position: absolute;
    top:169px;
    left:383px;
    display: inline-block;
    z-index: 2;
}
#page-content .infographic-container .arrow-container figure.world_2 {
    position: absolute;
    top:170px;
    left:353px;
    display: inline-block;
    z-index: 2;
}
#page-content .infographic-container .arrow-container figure.world_3 {
    position: absolute;
    top:163px;
    left:323px;
    display: inline-block;
    z-index: 2;
}
#page-content .infographic-container .arrow-container figure.world_1 img,
#page-content .infographic-container .arrow-container figure.world_2 img,
#page-content .infographic-container .arrow-container figure.world_3 img {
    width:18px;
    height:auto;

}
#page-content .infographic-container .arrow-container figure.world_1 figcaption,
#page-content .infographic-container .arrow-container figure.world_2 figcaption,
#page-content .infographic-container .arrow-container figure.world_3 figcaption {
    margin-top: 5px;
}



@media (max-width: 720px) {

    #page-content .infographic-container {
        height:auto;
    }
    #page-content .infographic-container .image-container {
        display: block;
        height:auto;
    }
    #page-content .infographic-container .element-container {
        display: none;
    }
}





/*----------------------------------------------------*/
/* 2 worlds
 ------------------------------------------------------ */

#page-content .infographic-container-2worlds-full-width {

    height:740px;
    background: #E1F4FD;
    display: block;
    margin-left:-100%;
    margin-right:-100%;
    margin-top:10px;
    margin-bottom:20px;
    overflow: hidden;
}

#page-content .infographic-container-2worlds {
    /*background: #E1F4FD url(../images/2worlds-back.png) no-repeat;*/
    /*background: #E1F4FD;*/

    font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
    display: block;
    width: 590px;
    height:740px;
    font-size: 14px;
    font-weight: normal;
    line-height: 10px;
    color:#0055A0;
    position:relative;
    margin:0 auto;
}

#page-content .infographic-container-2worlds .image-container {
    display: none;
}

#page-content .infographic-container-2worlds img.multipolair-world {
    position: absolute;
    left:21px;
    top:50px;
    width:300px;
}

#page-content .infographic-container-2worlds img.multilateraal-world {
    position: absolute;
    right:23px;
    top:50px;
    width:300px;
}
#page-content .infographic-container-2worlds img.versmelting {
    position: absolute;
    left:267px;
    top:136px;
    width:55px;
}
#page-content .infographic-container-2worlds img.arrow-down {
    position: absolute;
    left:154px;
    top:240px;
    width:280px;
}

#page-content .infographic-container-2worlds .text-container {
    position: absolute;
    top:480px;
    left:148px;
}
#page-content .infographic-container-2worlds .text-container h3 {
    font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    margin:0;
}
#page-content .infographic-container-2worlds ul {
    position: absolute;
    left:-4px;
    top:30px;
    font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
    font-size: 14px;
    width:310px;
    list-style-type: none;
}
#page-content .infographic-container-2worlds ul li:before{
    content:"-";
    position:relative;
    left:-10px;
}
#page-content .infographic-container-2worlds ul li{
    text-indent:-5px;
}
#page-content .infographic-container-2worlds ul li {
    margin-bottom: 10px;
}


@media (max-width: 720px) {
    #page-content .infographic-container-2worlds-full-width {
        height:auto;
        margin-left:0;
        margin-right:0;
        overflow: visible;
    }
    #page-content .infographic-container-2worlds {
        height:auto;
        width:100%;
    }
    #page-content .infographic-container-2worlds .image-container {
        display: block;
        height:auto;
    }
    #page-content .infographic-container-2worlds .element-container {
        display: none;
    }
}









/*----------------------------------------------------*/
/* Map
 ------------------------------------------------------ */


#page-content .infographic-container-map {
    /*background: #E1F4FD url(../images/map-background.jpg) no-repeat;*/
    background: #a2c3e2;

    font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
    display: block;
    width: 100%;
    height:417px;
    font-size: 14px;
    font-weight: normal;
    line-height: 10px;
    color:#0055A0;
    position:relative;
    margin:10px 0 20px 0;
}

#page-content .infographic-container-map .image-container {
    position: absolute;
    top:0;
    left:0;
    z-index: 1;
    display: block;
}

#page-content .infographic-container-map img#map-overlay {
    position: absolute;
    top:0;
    left: 0;
    width:100%;
    height:417px;
    z-index: 10;
    display: block;
}

#page-content .infographic-container-map .oekraine-rusland {
    position: absolute;
    top:3px;
    right:3px;
    z-index: 5;
    width:335px;
    height:154px;
    display: block;
    opacity: 0;
}
#page-content .infographic-container-map .oekraine-rusland-tank {
    position: absolute;
    top:110px;
    right:251px;
    z-index: 6;
    width:18px;
    height:18px;
    display: block;
    opacity: 0;
}
#page-content .infographic-container-map .syrie-irak {
    position: absolute;
    top:172px;
    left:332px;
    z-index: 5;
    width:68px;
    height:50px;
    display: block;
    opacity: 0;
}
#page-content .infographic-container-map .turkey-libanon-jordan {
    position: absolute;
    top:146px;
    left:287px;
    z-index: 5;
    width:97px;
    height:80px;
    display: block;
    opacity: 0;
}
#page-content .infographic-container-map .mali {
    position: absolute;
    top:239px;
    left:94px;
    z-index: 5;
    width:334px;
    height:155px;
    display: block;
    opacity: 0;
}
#page-content .infographic-container-map .mali-nigeria {
    position: absolute;
    top:290px;
    left:152px;
    z-index: 5;
    width:79px;
    height:60px;
    display: block;
    opacity: 0;
}

#page-content .infographic-container-map .guinee {
    position: absolute;
    top:302px;
    left:42px;
    z-index: 5;
    width:80px;
    height:45px;
    display: block;
    opacity: 0;
}
#page-content .infographic-container-map .israel {
    position: absolute;
    top:195px;
    left:304px;
    z-index: 5;
    width:33px;
    height:25px;
    display: block;
    opacity: 0;
}
#page-content .infographic-container-map .lybia {
    position: absolute;
    top:196px;
    left:202px;
    z-index: 5;
    width:82px;
    height:76px;
    display: block;
    opacity: 0;
}
#page-content .infographic-container-map .polen {
    position: absolute;
    top:27px;
    left:224px;
    z-index: 5;
    width:74px;
    height:77px;
    display: block;
    opacity: 0;
}
#page-content .infographic-container-map .frankrijk {
    position: absolute;
    top:86px;
    left:130px;
    z-index: 5;
    width:68px;
    height:59px;
    display: block;
    opacity: 0;
}
#page-content .infographic-container-map .jemen {
    position: absolute;
    top:271px;
    left:364px;
    z-index: 5;
    width:55px;
    height:36px;
    display: block;
    opacity: 0;
}



@media (max-width: 720px) {

    #page-content .infographic-container-map {
        height:auto;
    }
    #page-content .infographic-container-map .image-container {
        display: block;
        height:auto;
        position: static;
    }
    #page-content .infographic-container-map .element-container {
        display: none;
    }
}