/* northern gas networks infographic 1 */

body,
html {
    width: 100%;

    min-width: 960px;

    overflow-x: hidden;

    height: auto;

    position: relatieve;
}

body,
html,
div,
p,
a,
h1,
h2,
h3,
h4,
h5 img {
    margin: 0px;

    padding: 0px;

    text-decoration: none;

    border: none;

    outline: none;

    font-family: 'VAGRoundedBold';

    color: white;

    text-align: center;
}

p {
    font-family: 'VAGRoundedLight';
}

@font-face {
    font-family: 'VAGRoundedThin';

    src: url('Fonts/739798/86f553bb-9889-4e15-8969-ee64b49110e1.eot?#iefix');

    src: url('Fonts/739798/86f553bb-9889-4e15-8969-ee64b49110e1.eot?#iefix') format('eot'),
        url('Fonts/739798/5674c507-56c6-44d0-a73f-536f772201a4.woff') format('woff'),
        url('Fonts/739798/901e337a-35a9-4313-b7f2-e7557b153a9b.ttf') format('truetype'),
        url('Fonts/739798/82ff45d7-0bff-43e7-9dae-e19141e58f73.svg#82ff45d7-0bff-43e7-9dae-e19141e58f73') format('svg');
}

@font-face {
    font-family: 'VAGRoundedLight';

    src: url('Fonts/739801/44b3f5eb-d85f-4909-809d-6c122c12ea63.eot?#iefix');

    src: url('Fonts/739801/44b3f5eb-d85f-4909-809d-6c122c12ea63.eot?#iefix') format('eot'),
        url('Fonts/739801/1a4c2794-fc7f-4a89-ab1c-0be23dbee8b1.woff') format('woff'),
        url('Fonts/739801/6023c3ba-862b-4de6-b8c6-59ae434b7629.ttf') format('truetype'),
        url('Fonts/739801/0f3940be-21d0-4e65-9247-2dc7c12caef3.svg#0f3940be-21d0-4e65-9247-2dc7c12caef3') format('svg');
}

@font-face {
    font-family: 'VAGRoundedBold';

    src: url('Fonts/739804/643a3fec-739a-44e6-9f17-e26e0c711eef.eot?#iefix');

    src: url('Fonts/739804/643a3fec-739a-44e6-9f17-e26e0c711eef.eot?#iefix') format('eot'),
        url('Fonts/739804/55c27d30-e9d4-405b-a4a2-954120b0bb2c.woff') format('woff'),
        url('Fonts/739804/12f01f1a-0c0c-44ee-9d95-8c597ae8d67e.ttf') format('truetype'),
        url('Fonts/739804/fdd56b34-68a5-4fee-b9ce-30b282397623.svg#fdd56b34-68a5-4fee-b9ce-30b282397623') format('svg');
}

.infographicContainer {
    width: 100%;

    float: left;

    position: relative;

    height: auto;
}

.infopanel {
    width: 100%;

    height: 680px;

    position: relative;

    float: left;

    overflow: hidden;
}

.infopanel.panel1 {
    background: url(images/darkGradient.png) repeat-x left center;

    height: 600px;
}

.infopanel.panel2 {
    background: #ffed00;

    height: 900px;
}

.infopanel.panel3 {
    background: #ea6c18;

    height: 875px;
}

.infopanel.panel4 {
    background: #3e3080;

    height: 425px;
}

.infopanel.panel5 {
    background: #ffed00;

    height: 1200px;
}

.infopanel.panel6 {
    background: #ea6c18;

    height: 1450px;
}

.infopanel.panel7 {
    height: 1500px;

    background: url(images/gradienthorizontal.png) repeat-y center top;
}

.infopanel.panel8 {
    background: #3da435;

    height: 400px;
}

@keyframes bubbleBounce {
    0% {
        top: -500px;
    }

    100% {
        top: 150px;
    }
}

@-webkit-keyframes bubbleBounce {
    0% {
        top: -500px;
    }

    100% {
        top: 150px;
    }
}

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 1;
    }
}

.orangeBubble {
    width: 290px;

    height: 290px;

    position: absolute;

    left: 0px;

    right: 0px;

    margin: 0 auto;

    top: 150px;

    background: url(images/orangeBubble.png) no-repeat center center;

    animation: bubbleBounce 0.7s 1 ease-out;

    -webkit-animation: bubbleBounce 0.7s 1 ease-out;
}

.orangeBubble h1 {
    display: none;
}

.shadow {
    width: 274px;

    height: 81px;

    background: url(images/shadow.png) no-repeat center center;

    position: absolute;

    left: 0px;

    right: 0px;

    top: 435px;

    margin: 0 auto;

    animation: bubbleShadow 0.7s 1 ease-out;

    -webkit-animation: bubbleShadow 0.7s 1 ease-out;
}

.contentarea {
    width: 960px;

    height: 100%;

    position: absolute;

    left: 0px;

    right: 0px;

    margin: 0 auto;
}

.contentarea h2 {
    font-size: 58px;

    color: #ffed00;

    text-align: center;

    line-height: 58px;

    width: 100%;

    position: absolute;

    left: 0px;

    top: 0px;

    height: 58px;

    transition: all 0.4s ease-in;

    -moz-transition: all 0.4s ease-in;

    -webkit-transition: all 0.4s ease-in;

    -ms-transition: all 0.4s ease-in;

    -o-transition: all 0.4s ease-in;
}

.contentarea p {
    color: #ffed00;

    font-family: 'VAGRoundedLight';

    font-size: 19px;

    line-height: 26px;

    text-align: center;

    width: 100%;

    position: absolute;

    top: 62px;

    left: 0px;

    transition: all 0.6s ease-in;

    -moz-transition: all 0.6s ease-in;

    -webkit-transition: all 0.6s ease-in;

    -ms-transition: all 0.6s ease-in;

    -o-transition: all 0.6s ease-in;
}

.contentarea ul {
    transition: all 0.6s ease-in;

    -moz-transition: all 0.6s ease-in;

    -webkit-transition: all 0.6s ease-in;

    -ms-transition: all 0.6s ease-in;

    -o-transition: all 0.6s ease-in;
}

.contentarea h2.appear {
    top: 50px;

    opacity: 0;
}

.contentarea p.appear,
.contentarea ul.appear {
    opacity: 0;
}

.textblock {
    width: 285px;

    height: 155px;

    position: absolute;

    left: 0px;

    right: 0px;

    top: 50px;

    margin: 0 auto;
}

.panel2 .textblock p,
.panel2 .textblock h2 {
    color: #3e3080;
}

.panel2 .textblock {
    width: 400px;
}

.panel2 .textblock1 {
    left: auto;

    margin: 0px;

    top: 94px;
}

.panel2 .textblock2 {
    left: 30px;

    right: auto;

    margin: 0px;

    top: 470px;

    height: 300px;
}

.panel2 .textblock h2 {
    font-size: 160px;

    line-height: 160px;
}

.panel2 .textblock p {
    font-family: 'VAGRoundedBold';

    font-size: 34px;

    line-height: 40px;

    top: 160px;
}

.littlegraves {
    width: 480px;

    height: 500px;

    position: absolute;

    top: 90px;

    left: 0px;
}

.littlegrave {
    width: 42px;

    height: 54px;

    position: relative;

    float: left;

    margin-right: 5px;

    margin-bottom: 8px;

    background: url(images/panel2/gravestone.png) no-repeat center center;

    transition: all 0.4s ease-in;

    -moz-transition: all 0.4s ease-in;

    -webkit-transition: all 0.4s ease-in;

    -o-transition: all 0.4s ease-in;

    -ms-transition: all 0.4s ease-in;
}

.littlegraveappear {
    background-position: center 60px;

    opacity: 0;
}

.beds {
    width: 480px;

    height: 350px;

    position: absolute;

    right: 0px;

    bottom: 80px;
}

.beds .appear {
    opacity: 0;
}

.bed1 {
    width: 261px;

    height: 222px;

    position: absolute;

    left: 0px;

    bottom: 0px;

    background: url(images/panel2/bedLarge.png) no-repeat center center;

    transition: all 0.4s ease-in;

    -moz-transition: all 0.4s ease-in;

    -webkit-transition: all 0.4s ease-in;

    -ms-transition: all 0.4s ease-in;

    -o-transition: all 0.4s ease-in;
}

.bed2 {
    width: 188px;

    height: 159px;

    position: absolute;

    left: 198px;

    bottom: 124px;

    background: url(images/panel2/bedMedium.png) no-repeat center center;

    transition: all 0.4s ease-in;

    -moz-transition: all 0.4s ease-in;

    -webkit-transition: all 0.4s ease-in;

    -ms-transition: all 0.4s ease-in;

    -o-transition: all 0.4s ease-in;
}

.bed3 {
    width: 135px;

    height: 115px;

    position: absolute;

    left: 340px;

    top: 20px;

    background: url(images/panel2/bedSmall.png) no-repeat center center;

    transition: all 0.4s ease-in;

    -moz-transition: all 0.4s ease-in;

    -webkit-transition: all 0.4s ease-in;

    -ms-transition: all 0.4s ease-in;

    -o-transition: all 0.4s ease-in;
}

.panel3 .textblock1 {
    width: 600px;

    height: 250px;

    position: absolute;

    left: 0px;

    right: 0px;

    margin: 0 auto;

    top: 80px;
}

.panel3 .textblock1 p {
    font-family: 'VAGRoundedLight';

    font-size: 35px;

    line-height: 46px;

    top: 90px;
}

.panel3 .textblock2 {
    left: 100px;

    right: auto;

    margin: 0px;

    top: 500px;

    width: 360px;
}

.panel3 .textblock3 {
    left: 360px;

    right: auto;

    margin: 0px;

    top: 850px;

    width: 570px;

    height: 260px;
}

.panel3 .textblock2 h2,
.panel3 .textblock3 h2 {
    font-size: 49px;

    line-height: 53px;
}

.panel3 .textblock2 p,
.panel3 .textblock3 p {
    top: 125px;
}

.panel3 .textblock3 h2 {
    width: 390px;

    left: 0px;

    right: 0px;

    margin: 0 auto;
}

.flames {
    width: 960px;

    height: 56px;

    position: absolute;

    left: 0px;

    top: 360px;
}

@keyframes flameGlow {
    0% {
        opacity: 1;
    }

    10% {
        opacity: 0.4;
    }

    20% {
        opacity: 0.6;
    }

    30% {
        opacity: 0.8;
    }

    40% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.4;
    }

    60% {
        opacity: 0.7;
    }

    70% {
        opacity: 0.3;
    }

    80% {
        opacity: 0.4;
    }

    90% {
        opacity: 0.7;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes flameGlow {
    0% {
        opacity: 1;
    }

    10% {
        opacity: 0.4;
    }

    20% {
        opacity: 0.6;
    }

    30% {
        opacity: 0.8;
    }

    40% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.4;
    }

    60% {
        opacity: 0.7;
    }

    70% {
        opacity: 0.3;
    }

    80% {
        opacity: 0.4;
    }

    90% {
        opacity: 0.7;
    }

    100% {
        opacity: 1;
    }
}

.littleflame1 {
    width: 41px;

    height: 56px;

    position: relative;

    float: left;

    background: url(images/panel3/littleFlame.png) no-repeat center bottom;

    margin-right: 8px;

    animation: flameGlow 12s infinite linear;

    -webkit-animation: flameGlow 12s infinite linear;
}

.littleflame2 {
    width: 39px;

    height: 56px;

    position: relative;

    float: left;

    background: url(images/panel3/littleFlame2.png) no-repeat center bottom;

    margin-right: 12px;

    animation: flameGlow 12s 1s infinite linear;

    -webkit-animation: flameGlow 12s 1s infinite linear;
}

.littleflame3 {
    width: 48px;

    height: 56px;

    position: relative;

    float: left;

    background: url(images/panel3/littleFlame3.png) no-repeat center bottom;

    margin-right: 12px;

    animation: flameGlow 12s 2s infinite linear;

    -webkit-animation: flameGlow 12s 2s infinite linear;
}

.littleflame4 {
    animation: flameGlow 12s 3s infinite linear;

    -webkit-animation: flameGlow 12s 3s infinite linear;
}

.littleflame5 {
    animation: flameGlow 12s 4s infinite linear;
    -webkit-animation: flameGlow 12s 4s infinite linear;
}

.littleflame6 {
    animation: flameGlow 12s 5s infinite linear;
    -webkit-animation: flameGlow 12s 5s infinite linear;
}

.littleflame7 {
    animation: flameGlow 12s 6s infinite linear;
    -webkit-animation: flameGlow 12s 6s infinite linear;
}

.littleflame8 {
    animation: flameGlow 12s 7s infinite linear;
    -webkit-animation: flameGlow 12s 7s infinite linear;
}

.littleflame9 {
    animation: flameGlow 12s 1s infinite linear;
    -webkit-animation: flameGlow 12s 1s infinite linear;
}

.littleflame10 {
    animation: flameGlow 12s 2s infinite linear;
    -webkit-animation: flameGlow 12s 2s infinite linear;
}

.littleflame11 {
    animation: flameGlow 12s 3s infinite linear;
    -webkit-animation: flameGlow 12s 3s infinite linear;
}

.littleflame12 {
    animation: flameGlow 12s 4s infinite linear;
    -webkit-animation: flameGlow 12s 4ss infinite linear;
}

.littleflame13 {
    animation: flameGlow 12s 5s infinite linear;
    -webkit-animation: flameGlow 12s 5s infinite linear;
}

.littleflame14 {
    animation: flameGlow 12s 6s infinite linear;
    -webkit-animation: flameGlow 12s 6s infinite linear;
}

.littleflame15 {
    animation: flameGlow 12s 7s infinite linear;
    -webkit-animation: flameGlow 12s 7s infinite linear;
}

.littleflame16 {
    animation: flameGlow 12s 1s infinite linear;
    -webkit-animation: flameGlow 12s 1s infinite linear;
}

.littleflame17 {
    animation: flameGlow 12s 2s infinite linear;
    -webkit-animation: flameGlow 12s 2s infinite linear;
}

.littleflame18 {
    animation: flameGlow 12s 3s infinite linear;
    -webkit-animation: flameGlow 12s 3s infinite linear;
}

.fireandpipe {
    width: 754px;

    position: absolute;

    left: 530px;

    height: 290px;

    top: 478px;
}

.pipes {
    width: 754px;

    height: 194px;

    position: absolute;

    left: 0px;

    top: 0px;

    background: url(images/panel3/pipes.png) no-repeat center center;
}

.littlefire {
    width: 171px;

    height: 213px;

    background: url(images/panel3/fire.png) no-repeat center center;

    position: absolute;

    left: 110px;

    top: 100px;
}

.fireflames {
    position: absolute;

    left: 46px;

    top: 46px;

    width: 89px;

    height: 89px;

    background: url(images/panel3/fireFlames.png) no-repeat center center;

    z-index: 1;

    animation: flameGlow 12s infinite linear;

    -webkit-animation: flameGlow 12s infinite linear;
}

.heart {
    position: absolute;

    left: 20px;

    top: 860px;

    background: url(images/panel3/heart.png) no-repeat center center;

    width: 121px;

    height: 173px;

    animation: brainShake 0.8s 0.4s infinite linear;

    -webkit-animation: brainShake 0.8s 0.4s infinite linear;
}

@keyframes brainShake {
    0% {
        transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }

    25% {
        transform: rotate(4deg);
        -moz-transform: rotate(4deg);
        -webkit-transform: rotate(4deg);
        -ms-transform: rotate(4deg);
        -o-transform: rotate(4deg);
    }

    75% {
        transform: rotate(-4deg);
        -moz-transform: rotate(-4deg);
        -webkit-transform: rotate(-4deg);
        -ms-transform: rotate(-4deg);
        -o-transform: rotate(-4deg);
    }

    0% {
        transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }
}

@-webkit-keyframes brainShake {
    0% {
        transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }

    25% {
        transform: rotate(4deg);
        -moz-transform: rotate(4deg);
        -webkit-transform: rotate(4deg);
        -ms-transform: rotate(4deg);
        -o-transform: rotate(4deg);
    }

    75% {
        transform: rotate(-4deg);
        -moz-transform: rotate(-4deg);
        -webkit-transform: rotate(-4deg);
        -ms-transform: rotate(-4deg);
        -o-transform: rotate(-4deg);
    }

    0% {
        transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }
}

.brain {
    position: absolute;

    left: 210px;

    top: 840px;

    background: url(images/panel3/brain.png) no-repeat center center;

    width: 140px;

    height: 114px;

    animation: brainShake 0.8s infinite linear;

    -webkit-animation: brainShake 0.8s infinite linear;
}

.grave {
    position: absolute;

    left: 165px;

    bottom: 0px;

    background: url(images/panel3/grave.png) no-repeat center center;

    width: 125px;

    height: 162px;

    transition: all 0.6s ease-in;

    -moz-transition: all 0.6s ease-in;

    -webkit-transition: all 0.6s ease-in;

    -o-transition: all 0.6s ease-in;

    -ms-transition: all 0.6s ease-in;
}

.gravepopup {
    bottom: -180px;
}

.panel4 .contentarea .textblock h2,
.panel4 .contentarea .textblock p {
    color: white;
}

.panel4 .contentarea h2 {
    letter-spacing: 4px;
}

.panel4 .textblock {
    width: 550px;

    top: 100px;
}

.oven {
    width: 266px;

    height: 312px;

    position: absolute;

    left: 80px;

    top: 250px;

    background: url(images/panel4/oven.png) no-repeat left bottom;
}

@keyframes flameShake {
    0% {
        transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    25% {
        transform: rotate(5deg);
        -moz-transform: rotate(5deg);
        -o-transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        -webkit-transform: rotate(5deg);
    }

    75% {
        transform: rotate(-5deg);
        -moz-transform: rotate(-5deg);
        -o-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        -webkit-transform: rotate(-5deg);
    }

    100% {
        transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
}

@-webkit-keyframes flameShake {
    0% {
        transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    33% {
        opacity: 0.5;
    }

    25% {
        transform: rotate(5deg);
        -moz-transform: rotate(5deg);
        -o-transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        -webkit-transform: rotate(5deg);
    }

    66% {
        opacity: 0.3;
    }

    75% {
        transform: rotate(-5deg);
        -moz-transform: rotate(-5deg);
        -o-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        -webkit-transform: rotate(-5deg);
    }

    100% {
        transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
}

.miniflame {
    width: 16px;

    height: 18px;

    background: url(images/panel4/tinyFlame.png) no-repeat center center;

    position: absolute;

    left: 68px;

    top: 0px;

    animation: flameShake 1.5s infinite linear;

    -webkit-animation: flameShake 1.5s infinite linear;
}

.miniflame2 {
    left: 163px;

    animation: flameShake 1.5s 0.6s infinite linear;

    -webkit-animation: flameShake 1.5s 0.6s infinite linear;
}

.shootButton {
    width: 305px;

    height: 108px;

    background: url(images/panel4/shootButton.png) no-repeat center center;

    position: absolute;

    left: 45px;

    top: 170px;

    cursor: pointer;

    transition: all 0.3s ease-in;

    -moz-transition: all 0.3s ease-in;

    -webkit-transition: all 0.3s ease-in;

    -o-transition: all 0.3s ease-in;

    -ms-transition: all 0.3s ease-in;
}

.shootButton:hover {
    top: 180px;
}

.panel4 .textblock2 {
    width: 580px;

    height: 270px;

    position: absolute;

    right: 0px;

    left: auto;

    top: 270px;
}

.panel4 .textblock2 ul {
    width: 580px;

    height: 270px;

    position: relative;

    float: left;

    list-style: none;
}

.panel4 .textblock2 ul li {
    font-size: 27px;

    line-height: 41px;

    color: white;

    padding-left: 30px;

    width: 550px;

    float: left;

    background: url(images/panel4/bullet.png) no-repeat left 9px;

    margin-bottom: 16px;

    text-align: left;

    font-family: 'VAGRoundedLight';
}

.panel4 .textblock3 {
    width: 760px;

    height: 260px;

    position: absolute;

    left: 0px;

    right: 0px;

    margin: 0 auto;

    top: 50px;
}

.panel4 .textblock3 h2 {
    width: 400px;

    height: 110px;

    position: absolute;

    top: 30px;

    left: 0px;

    font-size: 46px;

    line-height: 52px;
}

.panel4 .textblock3 ul {
    width: 300px;

    height: 270px;

    position: absolute;

    list-style: none;

    right: 0px;

    top: 0px;
}

.panel4 .textblock3 ul li {
    font-size: 27px;

    line-height: 41px;

    color: white;

    padding-left: 30px;

    width: 550px;

    float: left;

    background: url(images/panel4/littleBullet.png) no-repeat left 9px;

    margin-bottom: 6px;

    text-align: left;

    font-family: 'VAGRoundedLight';
}

.panel5 .textblock1 {
    top: 100px;
}

.panel5 h2,
.panel5 p {
    color: #3e3080;
}

.panel5 .textblock2 {
    width: 720px;

    height: 140px;

    top: 230px;
}

.panel5 .textblock2 h2 {
    font-size: 27px;

    line-height: 34px;
}

.panel5 .textblock2 p {
    top: 80px;

    width: 560px;

    left: 0px;

    right: 0px;

    margin: 0 auto;
}

.panel5 .textblock3 {
    width: 440px;

    height: 330px;

    position: absolute;

    left: 0px;

    top: 425px;

    margin: 0px;

    right: auto;
}

.panel5 .textblock3 h2 {
    font-size: 162px;

    line-height: 162px;
}

.panel5 .textblock3 p {
    top: 160px;

    font-size: 27px;

    line-height: 41px;
}

.panel5 .textblock4 {
    top: 915px;

    left: auto;

    right: 70px;

    width: 420px;
}

.panel5 .textblock4 .urllink {
    font-family: 'VAGRoundedBold';

    position: absolute;

    top: 60px;

    left: 0px;

    right: 0px;

    margin: 0 auto;

    width: 280px;

    text-align: center;
}

.phone {
    width: 310px;

    height: 250px;

    position: absolute;

    top: 870px;

    left: 135px;
}

.phonelowerhalf {
    width: 245px;

    height: 187px;

    background: url(images/panel5/phoneLower.png) no-repeat center bottom;

    position: absolute;

    left: 34px;

    right: auto;

    margin: 0px;

    bottom: 0px;
}

@keyframes phoneLift {
    0% {
        top: 0px;
    }

    40% {
        top: 0px;
    }

    50% {
        top: -20px;
    }

    60% {
        top: 0px;
    }

    100% {
        top: 0px;
    }
}

@-webkit-keyframes phoneLift {
    0% {
        top: 0px;
    }

    40% {
        top: 0px;
    }

    50% {
        top: -10px;
    }

    60% {
        top: 0px;
    }

    100% {
        top: 0px;
    }
}

.phonetophalf {
    width: 305px;

    height: 102px;

    background: url(images/panel5/phoneUpper.png) no-repeat center bottom;

    position: absolute;

    left: 0px;

    right: 0px;

    margin: 0 auto;

    top: 0px;

    animation: phoneLift 0.5s infinite linear;

    -webkit-animation: phoneLift 0.5s infinite linear;
}

.alarm {
    width: 420px;

    height: 210px;

    position: absolute;

    left: auto;

    right: 50px;

    top: 500px;

    animation: alarmShake 0.5s infinite linear;

    -webkit-animation: alarmShake 0.5s infinite linear;
}

.alarminner {
    width: 215px;

    height: 214px;

    background: url(images/panel5/alarm.png) no-repeat center bottom;

    position: absolute;

    top: 0px;

    left: 0px;

    right: 0px;

    margin: 0 auto;
}

@keyframes alarmShake {
    0% {
        transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }

    25% {
        transform: rotate(8deg);
        -moz-transform: rotate(8deg);
        -webkit-transform: rotate(8deg);
        -ms-transform: rotate(8deg);
        -o-transform: rotate(8deg);
    }

    75% {
        transform: rotate(-8deg);
        -moz-transform: rotate(-8deg);
        -webkit-transform: rotate(-8deg);
        -ms-transform: rotate(-8deg);
        -o-transform: rotate(-8deg);
    }

    100% {
        transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }
}

@-webkit-keyframes alarmShake {
    0% {
        transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }

    25% {
        transform: rotate(8deg);
        -moz-transform: rotate(8deg);
        -webkit-transform: rotate(8deg);
        -ms-transform: rotate(8deg);
        -o-transform: rotate(8deg);
    }

    75% {
        transform: rotate(-8deg);
        -moz-transform: rotate(-8deg);
        -webkit-transform: rotate(-8deg);
        -ms-transform: rotate(-8deg);
        -o-transform: rotate(-8deg);
    }

    100% {
        transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }
}

.alarmsounds {
    width: 420px;

    height: 102px;

    position: absolute;

    left: 0px;

    top: 56px;
}

.alarmsoundleft {
    width: 87px;

    height: 102px;

    background: url(images/panel5/alarmSoundsLeft.png) no-repeat center center;

    position: absolute;

    left: 0px;

    top: 0px;
}

.alarmsoundright {
    width: 87px;

    height: 102px;

    background: url(images/panel5/alarmSoundsRight.png) no-repeat center center;

    position: absolute;

    right: 0px;

    top: 0px;
}

.panel6 .tracks {
    width: 963px;

    height: 958px;

    position: absolute;

    left: -1px;

    top: 430px;

    background: url(images/panel6/pipes.png) no-repeat center center;
}

.panel6 .contentarea .textblock1 {
    width: 660px;

    left: 0px;

    right: 0px;

    margin: 0 auto;

    top: 90px;
}

.panel6 .contentarea p {
    font-size: 27px;

    line-height: 34px;

    font-family: 'VAGRoundedLight';

    text-align: left;

    letter-spacing: 1px;

    top: 0px;
}

.panel6 .contentarea .textblock2 {
    width: 470px;

    height: 150px;

    right: auto;

    margin: 0px;

    left: 330px;

    top: 346px;
}

.panel6 .contentarea .textblock3 {
    width: 460px;

    left: 40px;

    top: 610px;

    right: auto;

    margin: 0px;
}

.panel6 .contentarea .textblock4 {
    top: 865px;

    width: 585px;

    left: 40px;

    right: auto;

    margin: 0px;
}

.panel6 .contentarea .textblock4 p {
    text-align: center;
}

.panel6 .contentarea .textblock4 .number {
    font-size: 86px;

    font-family: 'VAGRoundedBold';

    text-align: center;

    width: 100%;

    letter-spacing: 3px;

    height: 86px;

    position: absolute;

    left: 0px;

    top: 40px;

    line-height: 86px;
}

.panel6 .contentarea .textblock4 .smallp {
    position: absolute;

    left: 0px;

    top: 130px;

    font-size: 19px;

    line-height: 26px;

    font-family: 'VAGRoundedLight';
}

.panel6 .contentarea .textblock5 {
    width: 500px;

    left: 400px;

    top: 1183px;
}

.panel6 .contentarea .dial {
    width: 154px;

    height: 153px;

    position: absolute;

    top: 300px;

    left: 129px;

    background: url(images/panel6/dialPoints.png) no-repeat left top;
}

@keyframes dialrotate {
    0% {
        transform: rotate(-95deg);
        -moz-transform: rotate(-95deg);
        -webkit-transform: rotate(-95deg);
        -ms-transform: rotate(-95deg);
        -o-transform: rotate(-95deg);
    }

    70% {
        transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }

    100% {
        transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }
}

@-webkit-keyframes dialrotate {
    0% {
        transform: rotate(-95deg);
        -moz-transform: rotate(-95deg);
        -webkit-transform: rotate(-95deg);
        -ms-transform: rotate(-95deg);
        -o-transform: rotate(-95deg);
    }

    70% {
        transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }

    100% {
        transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }
}

.panel6 .contentarea .dialinner {
    width: 139px;

    height: 139px;

    position: absolute;

    left: 15px;

    top: 25px;

    background: url(images/panel6/dial.png) no-repeat center center;

    animation: dialrotate 3s infinite linear;

    -webkit-animation: dialrotate 3s infinite linear;
}

.panel6 .hospital {
    width: 152px;

    height: 232px;

    position: absolute;

    top: 588px;

    left: 519px;
}

.panel6 .hospital .hospitalinner {
    width: 152px;

    height: 232px;

    background: url(images/panel6/hospital.png) no-repeat center center;

    position: absolute;

    top: 0px;

    left: 0px;

    z-index: 10;
}

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

    50% {
        opacity: 0.7;
    }

    100% {
        opacity: 0;
    }
}

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

    50% {
        opacity: 0.7;
    }

    100% {
        opacity: 0;
    }
}

.panel6 .hospital .cross {
    width: 80px;

    height: 60px;

    background: #fd2d09;

    position: absolute;

    top: 10px;

    left: 40px;

    animation: crossShine 3s infinite linear;

    -webkit-animation: crossShine 3s infinite linear;
}

.panel6 .tree1 {
    width: 57px;

    height: 77px;

    background: url(images/panel6/tree1.png) no-repeat center center;

    position: absolute;

    top: 733px;

    left: 710px;
}

.panel6 .tree2 {
    width: 57px;

    height: 77px;

    background: url(images/panel6/tree2.png) no-repeat center center;

    position: absolute;

    top: 733px;

    left: 780px;
}

.panel6 .tree3 {
    width: 78px;

    height: 108px;

    background: url(images/panel6/tree3.png) no-repeat center center;

    position: absolute;

    top: 710px;

    left: 850px;
}

@keyframes vandrive {
    0% {
        left: 690px;
    }

    50% {
        left: 621px;
    }

    100% {
        left: 690px;
    }
}

@-webkit-keyframes vandrive {
    0% {
        left: 690px;
    }

    50% {
        left: 621px;
    }

    100% {
        left: 690px;
    }
}

.panel6 .van {
    position: absolute;

    left: 690px;

    top: 992px;

    width: 268px;

    height: 128px;

    background: url(images/panel6/yellowVan.png) no-repeat center center;

    animation: vandrive 3s infinite linear;

    -webkit-animation: vandrive 3s infinite linear;
}

.panel6 .tool1 {
    position: absolute;

    top: 1230px;

    left: 130px;

    width: 117px;

    height: 116px;

    background: url(images/panel6/tool1.png) no-repeat center center;

    animation: brainShake 0.8s infinite linear;

    -webkit-animation: brainShake 0.8s infinite linear;
}

.panel6 .tool2 {
    position: absolute;

    top: 1165px;

    left: 270px;

    width: 124px;

    height: 176px;

    background: url(images/panel6/tool2.png) no-repeat center center;

    animation: brainShake 0.8s 0.4s infinite linear;

    -webkit-animation: brainShake 0.8s 0.4s infinite linear;
}

.panel6 .tool3 {
    position: absolute;

    top: 1170px;

    left: 25px;

    width: 135px;

    height: 66px;

    background: url(images/panel6/tool3.png) no-repeat center center;

    animation: brainShake 0.8s 0.8s infinite linear;

    -webkit-animation: brainShake 0.8s 0.8s infinite linear;
}

.panel7 .textblock1 {
    width: 800px;

    top: 80px;
}

.panel7 .textblock1 h2 {
    font-size: 49px;

    line-height: 55px;

    color: white !important;
}

.panel7 .textblock h2,
.panel7 .textblock p {
    color: #3e3080;
}

.panel7 .textblock h2 {
    font-size: 49px;

    line-height: 49px;
}

.panel7 .textblock2 {
    width: 490px;

    height: 550px;

    right: auto;

    left: 0px;

    top: 380px;
}

.panel7 .textblock p {
    top: 74px;
}

.panel7 .textblock3 {
    width: 550px;

    top: 763px;

    left: auto;

    right: 30px;

    margin: 0px;
}

.panel7 .textblock4 {
    left: 100px;

    top: 1090px;

    width: 390px;

    height: 200px;

    right: auto;

    margin: 0px;
}

.panel7 .textblock4 p {
    text-align: left;

    font-size: 27px;

    line-height: 34px;

    font-family: 'VAGRoundedBold';
}

@keyframes boatswam {
    0% {
        right: -500px;
    }

    40% {
        right: 110px;
    }

    60% {
        right: 110px;
    }

    100% {
        right: -500px;
    }
}

@-webkit-keyframes boatswam {
    0% {
        right: -500px;
    }

    40% {
        right: 110px;
    }

    60% {
        right: 110px;
    }

    100% {
        right: -500px;
    }
}

.panel7 .boat {
    width: 316px;

    height: 181px;

    position: absolute;

    top: 430px;

    right: 0px;

    left: auto;

    background: url(images/panel7/boat.png) no-repeat center center;

    animation: boatswam 12s infinite ease-in;

    -webkit-animation: boatswam 12s infinite linear;
}

.panel7 .bbq {
    width: 182px;

    height: 330px;

    position: absolute;

    left: 155px;

    top: 690px;
}

.panel7 .bbqinner {
    width: 182px;

    height: 253px;

    position: absolute;

    left: 0px;

    bottom: 0px;

    background: url(images/panel7/bbq.png) no-repeat center center;
}

.panel7 .bbqFlame {
    width: 75px;

    height: 89px;

    background: url(images/panel7/bbqFlame.png) no-repeat center center;

    position: absolute;

    left: 0px;

    right: 0px;

    margin: 0 auto;

    top: 0px;

    animation: flameGlow 12s infinite linear;

    -webkit-animation: flameGlow 12s infinite linear;
}

.panel7 .caseandalarm {
    width: 420px;

    height: 285px;

    position: absolute;

    right: 0px;

    top: 1100px;
}

.panel7 .case {
    width: 306px;

    height: 252px;

    position: absolute;

    left: 112px;

    top: 33px;

    background: url(images/panel7/suitcase.png) no-repeat center center;

    z-index: 10;
}

@keyframes alarmspin {
    0% {
        left: 200px;
        top: 100px;
        transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    30% {
        left: 0px;
        top: 0px;
        transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }

    70% {
        left: 0px;
        top: 0px;
        transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }

    100% {
        left: 200px;
        top: 100px;
        transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
}

@-webkit-keyframes alarmspin {
    0% {
        left: 200px;
        top: 100px;
        transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    30% {
        left: 0px;
        top: 0px;
        transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }

    70% {
        left: 0px;
        top: 0px;
        transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }

    100% {
        left: 200px;
        top: 100px;
        transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
}

.panel7 .casealarm {
    width: 142px;

    height: 141px;

    position: absolute;

    top: 100px;

    left: 200px;

    background: url(images/panel7/alarm.png) no-repeat center center;

    z-index: 2;

    -webkit-animation: alarmspin 8s infinite;

    animation: alarmspin 8s infinite;
}

.panel8 {
    overflow: visible;
}

.panel8 .greenills {
    width: 960px;

    height: 62px;

    position: absolute;

    left: 0px;

    top: -62px;
}

.panel8 .greenills div {
    transition: all 0.5s ease-in;

    -webkit-transition: all 0.5s ease-in;

    -moz-transition: all 0.5s ease-in;

    -o-transition: all 0.5s ease-in;

    -ms-transition: all 0.5s ease-in;
}

.panel8 .greenills .littlestreet {
    position: absolute;

    right: -120px;

    bottom: 0px;

    width: 268px;

    height: 54px;

    background: url(images/panel8/greenStreet.png) no-repeat center center;
}

.panel8 .greenills .largetree {
    width: 42px;

    height: 58px;

    position: absolute;

    left: -80px;

    bottom: 0px;

    background: url(images/panel8/largeTree.png) no-repeat center center;
}

.panel8 .greenills .littletree {
    width: 31px;

    height: 41px;

    position: absolute;

    left: 0px;

    bottom: 0px;

    background: url(images/panel8/littleTree.png) no-repeat center center;
}

.panel8 .greenills .tree2 {
    left: -30px;
}

.panel8 .greenills .tree3 {
    left: 700px;
}

.panel8 .greenills .tree4 {
    left: 740px;
}

.panel8 .greenills .appear {
    bottom: -100px;
}

.panel8 .textblock1 {
    width: 960px;

    top: 100px;
}

.panel8 h2 {
    font-size: 162px;

    color: #ffed00;

    line-height: 162px;
}

.panel8 p {
    color: #ffed00;

    font-family: 'VAGRoundedBold';

    font-size: 29px;

    text-align: center;

    top: 180px;

    letter-spacing: 2px;
}