/* add your css rules here */

/* 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;

}

/* [ 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;
}


.key_facts{
text-align:center!important;
}


.fact_icon{

/* [BOX] */
border-radius:50%;
width:160px;
height:160px;
margin: 0 auto;

/* [COLOURS] */
background-color:#8ec0e7;
border:thin solid white;

/* [FX] */
transition:all 1s;

/* [BACKGROUND IMAGE PROPERTIES] */
background-repeat:no-repeat;
background-position:50% 50%;
background-size:50%;

}

.fact_icon:hover{
background-color:white;
border-color:#8ec0e7;
}

.fact_icon img{
width:150px;
height:150px;
}

#date{
background-image:url('https://www.businessdirect.bt.com/Images/vendors/PROJECTS/BTBD/DSGN-463563-GDPR-Edu/calendar_white.png');
}

#date:hover{
background-image:url('https://www.businessdirect.bt.com/Images/vendors/PROJECTS/BTBD/DSGN-463563-GDPR-Edu/calendar_blue.png');
}

#fine{
background-image:url('https://www.businessdirect.bt.com/Images/vendors/PROJECTS/BTBD/DSGN-463563-GDPR-Edu/euro_white.png');
background-position:40% 50%;
}

#fine:hover{
background-image:url('https://www.businessdirect.bt.com/Images/vendors/PROJECTS/BTBD/DSGN-463563-GDPR-Edu/euro_blue.png');
}

#rating{
background-image:url('https://www.businessdirect.bt.com/Images/vendors/PROJECTS/BTBD/DSGN-463563-GDPR-Edu/graph_white.png');
}

#rating:hover{
background-image:url('https://www.businessdirect.bt.com/Images/vendors/PROJECTS/BTBD/DSGN-463563-GDPR-Edu/graph_blue.png');
}


#dpo{
background-image:url('https://www.businessdirect.bt.com/Images/vendors/PROJECTS/BTBD/DSGN-463563-GDPR-Edu/officer_white.png');
}

#dpo:hover{
background-image:url('https://www.businessdirect.bt.com/Images/vendors/PROJECTS/BTBD/DSGN-463563-GDPR-Edu/officer_blue.png');
}


#brexit{
background-image:url('https://www.businessdirect.bt.com/Images/vendors/PROJECTS/BTBD/DSGN-463563-GDPR-Edu/brexit_white_00.png');
background-size:70%;
}

#brexit:hover{
background-image:url('https://www.businessdirect.bt.com/Images/vendors/PROJECTS/BTBD/DSGN-463563-GDPR-Edu/brexit_blue_00.png');
}


#deadline{
background-image:url('https://www.businessdirect.bt.com/Images/vendors/PROJECTS/BTBD/DSGN-463563-GDPR-Edu/countdown_white.png');
}

#deadline:hover{
background-image:url('https://www.businessdirect.bt.com/Images/vendors/PROJECTS/BTBD/DSGN-463563-GDPR-Edu/countdown_blue.png');
}


#proof{
background-image:url('https://www.businessdirect.bt.com/Images/vendors/PROJECTS/BTBD/DSGN-463563-GDPR-Edu/proof_white_00.png');
}

#proof:hover{
background-image:url('https://www.businessdirect.bt.com/Images/vendors/PROJECTS/BTBD/DSGN-463563-GDPR-Edu/proof_blue_00.png');
}

#replace{
background-image:url('https://www.businessdirect.bt.com/Images/vendors/PROJECTS/BTBD/DSGN-463563-GDPR-Edu/replace_white.png');
}

#replace:hover{
background-image:url('https://www.businessdirect.bt.com/Images/vendors/PROJECTS/BTBD/DSGN-463563-GDPR-Edu/replace_blue.png');
}




.accordion-contentNK{
		display: none;
		padding:20px;
		margin-bottom:20px;
    margin-top: -14px;
border:thin solid #8ec0e7;
	}

/* [ THIS CLASS SETS THE ALTERNATING BORDER COLOUR FOR THE ACCORDION CONTENT ] */

.accordion-wrapNK:nth-child(even) > .accordion-contentNK{
border:thin solid #cccccc;
}

	.accordion-toggleNK{
		box-sizing: border-box;
		padding:20px;
		color: white!important;
		box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2);
	}	
	
	.accordion-toggleNK:hover{
		cursor: pointer;
	}
	
	.accordion-toggleNK img{
		width:40px;
		float:right;
	}
	
	.appoint{
		background-color:#224188;
	}
	
	.research{
		background-color:#cccccc;
	}

	.data{
		background-color: #224188;
	}

	.tech{
		background-color: #cccccc;
	}

	.update{
		background-color: #224188;
	}

	.encrypt{
		background-color: #cccccc;
	}

	.plan{
		background-color: #224188;
	}





.slide{
padding:0!important;
margin-bottom:10px;

}

.slide img{
margin-bottom:0!important;
}

.slide_info{
position:absolute;
bottom:0;
height:36%;
background-color:rgba(100,0,170,0.8);
box-sizing:border-box;
padding:10px;
}

.slide_info h3 a, .slide_info p a{
color:white!important;
text-decoration:none;
}

.slide_info h3 a:hover, .slide_info p a:hover{
color:white!important;
text-decoration:underline;
}

/* RETINA AND HI RES */	
	
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
 

/**/	
}

/* 1.25 dpr */
@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){ 

  
/**/	
}

/* 1.3 dpr */
@media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi){

 

/**/	
}

/* 1.5 dpr */
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi){ 

	
/**/	
}