/* = Core Elements
----------------------------------------------------------------------------------------------------------------- */


/* = Infographic */

.rural-infographic_wrap { position: relative; }
.rural-infographic { position: relative; width: 100%; margin: 0 auto; }
.rural-infographic_spacer { aspect-ratio: 1000 / 676; width: 100%; max-height: 90vh; }
.rural-infographic_loading { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #f1f1f1; }
.rural-infographic_loading span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-top: -80px; }

.rural-infographic svg { position: relative; z-index: 1; }
.rural-infographic_loading { z-index: 2; }
.rural-infographic_loading span { display: none; }

.rural-infographic_spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 75px; }
    

@media screen and (min-width: 650px) {    
    .rural-infographic_loading span { display: inline; }
}



.rural-infographic_note-wrap { display: none; }
.rural-infographic_note { display: none; position: absolute; width: 360px; max-width: 95%; padding: 20px; top: 50%; left: 50%; transform: translate(-50%, -50%); 
                            background: #fff; box-shadow: 3px 2px 15px 6px rgba(0, 0, 0, 0.05); z-index: 3; }
.rural-infographic_note-inner { padding: 20px; border: solid 1px #e9e9e9; }
.rural-infographic_note-title {font-size: 1.25rem; margin-bottom: 20px; }

@media screen and (min-width: 650px) {    
    .rural-infographic_note-wrap { display: initial; }
}


/* = Item */

.infographic-item_icon { position: absolute; bottom: 0; right: 5px; width: 55px; padding: 15px 0 0 15px; }
.infographic-item_icon svg { position: relative; z-index: 2; }
.infographic-item_icon:before { content: ""; position: absolute; background: #fff; top: 0; bottom: 0; right: 0; width: 20px; z-index: 0; }
.infographic-item_icon:after { content: ""; position: absolute; background: #fff; bottom: 0; left: 0; right: 0; height: 20px; z-index: 1; }

.infographic-item_icon--audio { bottom: auto; top: 0; padding: 0 0 15px 15px; }
.infographic-item_icon--audio:after { bottom: auto; top: 0; }

.infographic-item_button-wrap { margin-bottom: 10px; }

.infographic-item_inner audio { width: 100%; }


.infographic-item_icon[data-itemref="BankManager"] { width: 50px; }
.infographic-item_icon[data-itemref="BritishFlag"] { width: 55px; }
.infographic-item_icon[data-itemref="CombineHarvester"] { width: 95px; }
.infographic-item_icon[data-itemref="ForSaleSign"] { width: 55px; }
.infographic-item_icon[data-itemref="Houses"] { width: 95px; }
.infographic-item_icon[data-itemref="MilkingParlour"] { width: 85px; }
.infographic-item_icon[data-itemref="Plane"] { width: 65px; }
.infographic-item_icon[data-itemref="Turbines"] { width: 70px; }
.infographic-item_icon[data-itemref="Wildlife"] { width: 65px; }



.rural-infographic_mobile { margin: 50px 0; }
.rural-infographic_mobile .infographic-item { position: relative; padding: 0 10px 40px; margin: 0 0 25px; border-bottom: solid 1px #eee; }
.rural-infographic_mobile .infographic-item p + p > .btn:first-child { margin-top: 0; }
.rural-infographic_mobile .infographic-item_icon { bottom: 10px; }

.rural-infographic_mobile audio { margin-bottom: 65px; }
.rural-infographic_mobile .infographic-item_icon--audio { bottom: 10px; top: auto; padding: 0; }
.rural-infographic_mobile .infographic-item_icon--audio:after { bottom: 0; top: auto; }

@media screen and (min-width: 650px) {    
    .rural-infographic_mobile { display: none; }
}




/* = SVG */

.svg-graphic { max-height: 90vh; width: auto; margin: 0 auto; display: block; transform-box: fill-box; }


/* = Interactive Parts */

.svg_target { cursor: pointer; }
.svg_target path,
.svg_target circle { transition: fill 250ms linear, stroke 250ms linear; }

.svg_target:hover path,
.svg_target:focus path,
.svg_target:active path { fill: #e83470 !important; stroke: #DB2763 !important; }

.svg_target:hover circle,
.svg_target:focus circle, 
.svg_target:active circle { fill: #e83470 !important; stroke: #DB2763 !important; } 

.svg_target:hover rect,
.svg_target:active rect,
.svg_target:focus rect,
.svg_target:hover,
.svg_target:active,
.svg_target:focus { outline: none; }


        
/* = Animated Parts
----------------------------------------------------------------------------------------------------------------- */


/* = Sun
  -------------------------- */

#rgsvg_sun path:nth-child(even) { 
    stroke-dasharray: 1;
    stroke-dashoffset: 0.9;
    animation: rgani_draw-sun 2.5s infinite;
}
#rgsvg_sun path:nth-child(odd) { 
    stroke-dasharray: 1;
    stroke-dashoffset: 1.2;
    animation: rgani_draw-sun2 2.5s infinite;
    animation-direction: reverse;
}
#rgsvg_rays *:nth-child(even) path { 
    animation-delay: 1s; 
}

@keyframes rgani_draw-sun2 { 
    0% { stroke-dashoffset: 1.2; }
    50% { stroke-dashoffset: 2; }
    100% { stroke-dashoffset: 1.2; }
}


@keyframes rgani_draw-sun { 
    0% { stroke-dashoffset: 0.9; }
    50% { stroke-dashoffset: 0.2; }
    100% { stroke-dashoffset: 0.9; }
}





/* = Plane
  -------------------------- */
#rgsvg_plane {
    transform: translate(0, -185px);
    animation: rgani_plane-ani 220s infinite linear;
    animation-delay: .5s;
}
#rgsvg_plane:hover { 
    animation-play-state: paused;
}

@keyframes rgani_plane-ani {
    0% { transform: translate(0, -185px); }
    80% { transform: translate(5200px, -185px); opacity: 1; }
    81% { opacity: 0; transform: translate(5200px, -185px); }
    84% { transform: translate(-1000px, -185px); }
    85% { opacity: 0; }
    90% { opacity: 1; }
    100% { transform: translate(0, -185px); }
}


/* = Turbines
  -------------------------- */
#rgsvg_turbine1 > g { 
    transform-origin: 1835.42px 392.083px; 
    animation: rgani_rotate-turbine 7.5s infinite linear;
    animation-delay: 2s;
}
#rgsvg_turbine2 > g { 
    transform-origin: 2146.67px 327.5px; 
    animation: rgani_rotate-turbine 9s infinite linear;
    animation-delay: 2s;
}
#rgsvg_turbine3 > g { 
    transform-origin: 2454px 314.167px; 
    animation: rgani_rotate-turbine 5.75s infinite linear; 
    animation-delay: 2s;
}

#rgsvg_turbines:hover > g > g { 
    animation-play-state: paused;
}


@keyframes rgani_rotate-turbine { 
    0% { transform: rotate(0); }
    25% { transform: rotate(90deg); }
    50% { transform: rotate(180deg); }
    75% { transform: rotate(270deg); }
    100% { transform: rotate(360deg); }
}


/* = Drawing
  -------------------------- */

@keyframes rgani_draw-path { 
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 2; }
}

#rgsvg_turbines path,
#rgsvg_fence path,
#rgsvg_tree1 path,
#rgsvg_tree2 path,
#rgsvg_tree3 path,
#rgsvg_tree3po path,
#rgsvg_tree4 path,
#rgsvg_tree5 path,
#rgsvg_forsale path,
#rgsvg_lender path,
#rgsvg_combine .svg_path_wrap path,
#rgsvg_field_right path,
#rgsvg_base_white_layer path,
#rgsvg_silo1 path,
#rgsvg_silo2 path,
#rgsvg_flagpole,
#rgsvg_barn path,
#rgsvg_farmhouse path,
#rgsvg_tractor_body path,
#rgsvg_wildlife path,
#rgsvg_borders path { 
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: rgani_draw-path 3s;
    animation-fill-mode: forwards;
}


/* = Border */

#rgsvg_borders path { animation-duration: 6.75s; }


/* = Fence */

#rgsvg_fence path { animation-duration: 2.75s; }

#rgsvg_fence path:nth-child(3) { animation-delay: .125s; }
#rgsvg_fence path:nth-child(4) { animation-delay: .2s; }
#rgsvg_fence path:nth-child(5) { animation-delay: .275s; }
#rgsvg_fence path:nth-child(6) { animation-delay: .35s; }
#rgsvg_fence path:nth-child(7) { animation-delay: .425s; }
#rgsvg_fence path:nth-child(8) { animation-delay: .5s; }
#rgsvg_fence path:nth-child(9) { animation-delay: .575s; }
#rgsvg_fence path:nth-child(10) { animation-delay: .65s; }
#rgsvg_fence path:nth-child(11) { animation-delay: .725s; }
#rgsvg_fence path:nth-child(12) { animation-delay: .8s; }
#rgsvg_fence path:nth-child(13) { animation-delay: .875s; }
#rgsvg_fence path:nth-child(14) { animation-delay: .95s; }
#rgsvg_fence path:nth-child(15) { animation-delay: 1.025s; }
#rgsvg_fence path:nth-child(16) { animation-delay: 1.1s; }
#rgsvg_fence path:nth-child(17) { animation-delay: 1.175s; }
#rgsvg_fence path:nth-child(18) { animation-delay: 1.25s; }
#rgsvg_fence path:nth-child(19) { animation-delay: 1.325s; }
#rgsvg_fence path:nth-child(20) { animation-delay: 1.4s; }
#rgsvg_fence path:nth-child(21) { animation-delay: 1.475s; }
#rgsvg_fence path:nth-child(22) { animation-delay: 1.55s; }
#rgsvg_fence path:nth-child(23) { animation-delay: 1.625s; }
#rgsvg_fence path:nth-child(24) { animation-delay: 1.7s; }
#rgsvg_fence path:nth-child(25) { animation-delay: 1.775s; }
#rgsvg_fence path:nth-child(26) { animation-delay: 1.85s; }
#rgsvg_fence path:nth-child(27) { animation-delay: 1.925s; }
#rgsvg_fence path:nth-child(28) { animation-delay: 2s; }


/* = Trees */

#rgsvg_tree1 path { animation-duration: 2.75s; }

#rgsvg_tree2 path:nth-child(1) { animation-duration: 3s; }
#rgsvg_tree2 path:nth-child(2) { animation-duration: 1s; }

#rgsvg_tree3 path { animation-duration: 2s; }

#rgsvg_tree3po path:nth-child(1) { animation-duration: 3s; }
#rgsvg_tree3po path:nth-child(2) { animation-duration: 2s; }
#rgsvg_tree3po path:nth-child(3) { animation-duration: 1s; }
#rgsvg_tree3po path:nth-child(4) { animation-duration: 2s; }
#rgsvg_tree3po path:nth-child(5) { animation-duration: 2.25s; }

#rgsvg_tree4 path { animation-duration: 3s; }

#rgsvg_tree5 path { animation-duration: 2.25s; }



/* = For Sale Board */

#rgsvg_forsale path { animation-duration: 2.75s; }



/* = Lender */

#rgsvg_forsale path { animation-duration: 3s; }



/* = Combine Harvester */

#rgsvg_combine .svg_path_wrap path { animation-duration: 2.75s; }



/* = Fields */

#rgsvg_field_right path { animation-duration: 3s; }



/* = Base White Layer */

#rgsvg_base_white_layer path { animation-duration: 1.5s; }



/* = Silos */

#rgsvg_silo1 path { animation-duration: 2.75s; }

#rgsvg_silo2 path { animation-duration: 3.1s; }



/* = British Flag */

#rgsvg_flagpole { animation-duration: 3s; }



/* = Barn */

#rgsvg_barn path { animation-duration: 3.5s; }
#rgsvg_barn path:nth-child(12222) { animation: none; }



/* = Farmhouse */

#rgsvg_farmhouse path { animation-duration: 3s; }



/* = Tractor */

#rgsvg_tractor_body path { animation-duration: 3s; }



/* = Wildlife */

#rgsvg_wildlife path { animation-duration: 1.25s; }