/* add your css rules here */

.sector{
margin-bottom:10px;
width:32.4%;
opacity:1;
transition:all, 500ms;
}

.sector:hover{
opacity:0.6;
}

.sector_link{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;

}

.sectorFullWidth{
width:100%!important;
}

/* [ INFO BOXES ] */

.gdpr_infographic{
position:relative;
width: 100%;
height: 77vh;
}


.speech{
    top: 440px;
    right: 36px;
    width: 10%!important;
    z-index: 22;
}

.lock{
    top: 490px;
    right: 10px;
    width: 25%!important;

}

.clock{
    top: 324px;
    right: 529px;
    width: 27%!important;
}

.money{
top:0px;
right:487px;
width:22%!important;
}

.info{
    top: 203px;
    right: 398px;
    width: 22%!important;
}


.info3{
    top: 412px;
    left: 0;
    width: 12%!important;
    z-index: 22;
}


[class*="arrow_big"]{
width:40%!important;
}

[class*="arrow_medium"]{
width:20%!important;
}

[class*="arrow_small"]{
width:10%!important;
transition:all, 1s;

}


@keyframes fadeInOut {
    0% {opacity:1;}
    50%{ opacity:0;}
100%{ opacity:1;}
}

@-webkit-keyframes fadeInOut {
    0% {opacity:1;}
    50%{ opacity:0;}
100%{ opacity:1;}
}

@-moz-keyframes fadeInOut {
    0% {opacity:1;}
    50%{ opacity:0;}
100%{ opacity:1;}
}

@-o-keyframes fadeInOut {
    0% {opacity:1;}
    50%{ opacity:0;}
100%{ opacity:1;}
}



.arrow_big_yellow{
top:94px;
left:50px;
}

.arrow_medium_yellow{
     top: 404px;
    left: 111px;
}

.arrow_small_yellow{
    top: 0px;
    left: 842px;
animation-name:fadeInOut;
animation-duration: 5s;
animation-delay: 2s;
animation-iteration-count: infinite;

-webkit-animation-name:fadeInOut;
-webkit-animation-duration: 5s;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;

-moz-animation-name:fadeInOut;
-moz-animation-duration: 5s;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;

-o-animation-name:fadeInOut;
-o-animation-duration: 5s;
-o-animation-delay: 2s;
-o-animation-iteration-count: infinite;
}


.arrow_big_blue{
    top: 170px;
    left: 562px;
}

.arrow_medium_blue{
top: 65px;
    left: 345px;
}

.arrow_small_blue{
top: 329px;
    left: 52px;
animation-name:fadeInOut;
animation-duration: 5s;
animation-delay: 8s;
animation-iteration-count: infinite;

-webkit-animation-name:fadeInOut;
-webkit-animation-duration: 5s;
-webkit-animation-delay: 8s;
-webkit-animation-iteration-count: infinite;

-moz-animation-name:fadeInOut;
-moz-animation-duration: 5s;
-moz-animation-delay: 8s;
-moz-animation-iteration-count: infinite;

-o-animation-name:fadeInOut;
-o-animation-duration: 5s;
-o-animation-delay: 8s;
-o-animation-iteration-count: infinite;


}


.arrow_big_grey{
top: 470px;
    left: 196px;
}

.arrow_medium_grey{
top: 64px;
    left: 778px;
}

.arrow_small_grey{
    top: 579px;
    left: 590px;
animation-name:fadeInOut;
animation-duration: 5s;
animation-delay: 10s;
animation-iteration-count: infinite;

-webkit-animation-name:fadeInOut;
-webkit-animation-duration: 5s;
-webkit-animation-delay: 10s;
-webkit-animation-iteration-count: infinite;

-moz-animation-name:fadeInOut;
-moz-animation-duration: 5s;
-moz-animation-delay: 10s;
-moz-animation-iteration-count: infinite;

-o-animation-name:fadeInOut;
-o-animation-duration: 5s;
-o-animation-delay: 10s;
-o-animation-iteration-count: infinite;
}

.background_layer{
z-index:10;
}

.midground_layer{
z-index:15;
}

.foreground_layer{
z-index:22;
}


.info_box {
    padding: 10px 10px 0 10px;
    border: solid 2px #214287;
    width: 245px;
z-index:20;
background-color:#ffffff;
    box-shadow: 0px 6px 8px 0 rgba(0,0,0,0.3);
}

[class*="pos_"]{
position:absolute;
}

.pos_affect{
top:30px;
left:0;
}

.pos_penalty{
    top: 40px;
    left: 538px;
}

.pos_happen{
    top: 550px;
    left: 86px;
}

.pos_breach{
      top: 363px;
    left: 445px;
}

/* [ COUNTDOWN ] */

#countdown_container{
text-align:center;
background-color:#333333;
overflow:hidden;
border-radius:5px;
}

#countdown_container h2{
color:white!important;
margin:0;
padding:20px 0;
}

#countdown{
   font-size: 70px;
overflow:hidden;
padding:10px;
text-align:center;
border-radius:5px;
}

.time{
float:left;
margin-right:10px;
width:24.2%;
background-color:rgba(255,255,255,0.9);
border-radius:5px;
box-shadow:1px 3px 10px -3px rgba(0,0,0,0.3);
padding-bottom: 10px;
text-shadow: 0px 2px 3px white;

}

.unit{
font-size:16px;
margin-top:-5px;
text-shadow:0;
}

.time:last-child{
margin-right:0!important;
}