ƒ
/* Main CSS styles for the site */


/*  =========================================================================================================
    Colors
    =========================================================================================================

    Purple: #910047
    Purple bg: #833077
    Orange: #EFB322
    Light orange: #EAC600
    Dark orange: #E99713
    Dark blue: #131E1F
    Mid blue: #006BA6
    Sky blue: #AEE8F7
    Another fucking blue: #5BC2E7
    Grass green: #83C411
    Red: #EB0C0C
    Pink: #EF2999
*/


/*  =========================================================================================================
    Animations
    =========================================================================================================
*/

/* Pulse animation */
@-webkit-keyframes pulseAnimation {
    0%   {-webkit-transform: scale(1,1);}
    50%  {-webkit-transform: scale(0.8,0.8);}
    75%  {-webkit-transform: scale(1,1);}
    100% {-webkit-transform: scale(1,1);}
}
@-moz-keyframes pulseAnimation {
    0%   {transform: scale(1,1);}
    50%  {transform: scale(0.8,0.8);}
    75%  {transform: scale(1,1);}
    100% {transform: scale(1,1);}
}
@-o-keyframes pulseAnimation {
    0%   {transform: scale(1,1);}
    50%  {transform: scale(0.8,0.8);}
    75%  {transform: scale(1,1);}
    100% {transform: scale(1,1);}
}
@keyframes pulseAnimation {
    0%   {transform: scale(1,1);}
    50%  {transform: scale(0.8,0.8);}
    75%  {transform: scale(1,1);}
    100% {transform: scale(1,1);}
}

/* Pop animation */
@-webkit-keyframes popAnimation {
    0%   {-webkit-transform: scale(0,0);}
    75%  {-webkit-transform: scale(1.1,1.1);}
    100% {-webkit-transform: scale(1,1);}
}
@-moz-keyframes popAnimation {
    0%   {transform: scale(0,0);}
    75%  {transform: scale(1.1,1.1);}
    100% {transform: scale(1,1);}
}
@-o-keyframes popAnimation {
    0%   {transform: scale(0,0);}
    75%  {transform: scale(1.1,1.1);}
    100% {transform: scale(1,1);}
}
@keyframes popAnimation {
    0%   {transform: scale(0,0);}
    75%  {transform: scale(1.1,1.1);}
    100% {transform: scale(1,1);}
}

/* TV animation */
@-webkit-keyframes tvAnimation {
    0%   {-webkit-transform: scale(0,0);}
    10%   {-webkit-transform: scale(0.1,0.1);}
    20%   {-webkit-transform: scale(0.05,0.05);}
    50%   {-webkit-transform: scale(1,0.05);}
    100% {-webkit-transform: scale(1,1);}
}
@-moz-keyframes tvAnimation {
    0%   {transform: scale(0,0);}
    10%   {transform: scale(0.1,0.1);}
    20%   {transform: scale(0.05,0.05);}
    50%   {transform: scale(1,0.05);}
    100% {transform: scale(1,1);}
}
@-o-keyframes tvAnimation {
    0%   {transform: scale(0,0);}
    10%   {transform: scale(0.1,0.1);}
    20%   {transform: scale(0.05,0.05);}
    50%   {transform: scale(1,0.05);}
    100% {transform: scale(1,1);}
}
@keyframes tvAnimation {
    0%   {transform: scale(0,0);}
    10%   {transform: scale(0.1,0.1);}
    20%   {transform: scale(0.05,0.05);}
    50%   {transform: scale(1,0.05);}
    100% {transform: scale(1,1);}
}

/* TV off animation */
@-webkit-keyframes tvOffAnimation {
    0%   {-webkit-transform: scale(1,1);}
    50%   {-webkit-transform: scale(1,0.05);}
    80%   {-webkit-transform: scale(0.05,0.05);}
    90%   {-webkit-transform: scale(0.1,0.1);}
    100% {-webkit-transform: scale(0,0);}
}
@-moz-keyframes tvOffAnimation {
    0%   {transform: scale(1,1);}
    50%   {transform: scale(1,0.05);}
    80%   {transform: scale(0.05,0.05);}
    90%   {transform: scale(0.1,0.1);}
    100% {transform: scale(0,0);}
}
@-o-keyframes tvOffAnimation {
    0%   {transform: scale(1,1);}
    50%   {transform: scale(1,0.05);}
    80%   {transform: scale(0.05,0.05);}
    90%   {transform: scale(0.1,0.1);}
    100% {transform: scale(0,0);}
}
@keyframes tvOffAnimation {
    0%   {transform: scale(1,1);}
    50%   {transform: scale(1,0.05);}
    80%   {transform: scale(0.05,0.05);}
    90%   {transform: scale(0.1,0.1);}
    100% {transform: scale(0,0);}
}

/*  =========================================================================================================
    Fonts
    =========================================================================================================
*/

@font-face {
    font-family: 'MuseoFont';
    src: url('../fonts/Museo_Slab_500Web.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Museo_Slab_500Web.woff') format('woff');
}


/*  =========================================================================================================
    Typography
    =========================================================================================================
*/

body {
    font-family:  MuseoFont, verdana, arial, sans-serif;
    color: #222E2E;
}
a {
    cursor: pointer;
}



/*  ============================================================================================================
    Desktop Styles  ********************************************************************************************
    ************************************************************************************************************
    ============================================================================================================
*/
@media only screen and (min-width: 1100px) {

    /*  =========================================================================================================
        Layout elements
        =========================================================================================================
    */
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        background-color: #131E1F;
    }

    .responsive {
        display: none;
    }

    /*  =========================================================================================================
    Typography
    =========================================================================================================
    */
    .text-size-small .text-large { font-size: 75px; line-height: 95%; font-weight: normal; }
    .text-size-medium .text-large { font-size: 85px; line-height: 95%; font-weight: normal; }
    .text-size-large .text-large { font-size: 95px; line-height: 95%; font-weight: normal; }
    .text-size-extra-large .text-large { font-size: 105px; line-height: 95%; font-weight: normal; }

    .text-size-small .text-title { font-size: 30px; line-height: 95%; font-weight: normal; }
    .text-size-medium .text-title { font-size: 40px; line-height: 95%; font-weight: normal; }
    .text-size-large .text-title { font-size: 48px; line-height: 95%; font-weight: normal; }
    .text-size-extra-large .text-title { font-size: 61px; line-height: 95%; font-weight: normal; }

    .text-size-small .text-sub-title { font-size: 20px; }
    .text-size-medium .text-sub-title { font-size: 25px; }
    .text-size-large .text-sub-title { font-size: 28px; }
    .text-size-extra-large .text-sub-title { font-size: 34px; }

    .text-size-small .text-standout { font-size: 12px; }
    .text-size-medium .text-standout { font-size: 16px; }
    .text-size-large .text-standout { font-size: 19px; }
    .text-size-extra-large .text-standout { font-size: 24px; }

    .text-size-small .text-body1 { font-size: 12px; letter-spacing: -0.3px; line-height: 16px; }
    .text-size-medium .text-body1 { font-size: 15px; letter-spacing: -0.3px; line-height: 21px; }
    .text-size-large .text-body1 { font-size: 18px; letter-spacing: -0.3px; line-height: 23px; }
    .text-size-extra-large .text-body1 { font-size: 21px; letter-spacing: 0px; line-height: 25px; }

    .text-size-small .text-body2 { font-size: 10px; }
    .text-size-medium .text-body2 { font-size: 12px; }
    .text-size-large .text-body2 { font-size: 14px; }
    .text-size-extra-large .text-body2 { font-size: 18px; }

    .text-size-small .text-label { font-size: 12px; color: #fff; background-color: #131E1F; line-height: 200%; }
    .text-size-medium .text-label { font-size: 16px; color: #fff; background-color: #131E1F; line-height: 200%; }
    .text-size-large .text-label { font-size: 20px; color: #fff; background-color: #131E1F; line-height: 200%; }
    .text-size-extra-large .text-label { font-size: 26px; color: #fff; background-color: #131E1F; line-height: 200%; }

    .text-size-small .doughnut-label { font-size: 44px; }
    .text-size-medium .doughnut-label { font-size: 58px; }
    .text-size-large .doughnut-label { font-size: 58px; }
    .text-size-extra-large .doughnut-label { font-size: 58px; }

    .text-size-small .doughnut-label-medium { font-size: 16px; }
    .text-size-medium .doughnut-label-medium { font-size: 20px; }
    .text-size-large .doughnut-label-medium { font-size: 22px; }
    .text-size-extra-large .doughnut-label-medium { font-size: 24px; }

    .text-size-small .doughnut-label-small { font-size: 11px; }
    .text-size-medium .doughnut-label-small { font-size: 14px; }
    .text-size-large .doughnut-label-small { font-size: 16px; }
    .text-size-extra-large .doughnut-label-small { font-size: 18px; }


    /*  =========================================================================================================
        Chart styling
        =========================================================================================================
    */

    .doughnut-container {
        position: relative;
    }

    .doughnut-container canvas {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 100;
    }
    .main-doughnut {
        position: absolute;
        left: 8.3%;
        top: 31.9%;
        width: 78.12%;
        height: 36.84%;
    }
    .main-doughnut .doughnut-text {
        float: right;
        position: relative;
        width: 65.92%;
        height: 80%;
        margin-top: 1%;
        text-align: left;
    }
    .main-doughnut .doughnut-text div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .main-doughnut .doughnut-container {
        float: left;
    }

    .doughnut-label, .doughnut-label-small, .doughnut-label-medium {
        position: absolute;
        top: 0;
        left: 0;
        width: 69%;
        height: 67%;
        margin: 17% 0 0 16%;
        display: table;
        opacity: 0;
        -webkit-transition: 0.3s opacity 1s;
        transition: 0.3s opacity 1s;
    }
    .doughnut-label div, .doughnut-label-small div, .doughnut-label-medium div {
        display: table-cell;
        vertical-align: middle;
        border-radius: 50%;
        color: #131E1F;
        background: #fff;
    }
    .doughnut-label[animation = '1'], .doughnut-label-small[animation = '1'], .doughnut-label-medium[animation = '1'] {
        opacity: 1 !important;
    }
    .doughnut-label[animation = '2'], .doughnut-label-small[animation = '2'], .doughnut-label-medium[animation = '2'] {
        display: none;
    }


    /*  =========================================================================================================
        Slides
        =========================================================================================================
    */
    #container {
        position: fixed;
        width: 100%;
    }

    .section-stage {
        position: relative;
        overflow: visible;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    .slide {
        position: absolute;
        left: 100%;
        width: 100%;
        overflow: hidden;
        text-align: center;
        }
    .slide-background1 {
        background-color: #EFB322;
    }
    .slide-background1 .section-stage {
        border-top: 1px solid #EFB322;
    }
    .slide-background2 {
        background-color: #81D1F4;
    }
    .slide-background2 .section-stage {
        border-top: 1px solid #81D1F4;
    }
    .slide-background3 {
        background-color: #833077;
    }
    .slide-background3 .section-stage {
        border-top: 1px solid #833077;
    }
    .slide-background4 {
        background-color: #EF2999;
    }
    .slide-background4 .section-stage {
        border-top: 1px solid #EF2999;
    }
    .question {
        position: absolute;
        left: 100%;
        width: 100%;
        overflow: hidden;
        background: #910047;
        color: #fff;
        text-align: center;
        }
        .question .section-stage {
            border-top: 1px solid #910047;
        }
    /* Image */
    .image {
        position: absolute;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .bubble-1, .bubble-2 {
        position: absolute;
        box-sizing: border-box;
        padding: 6% 1% 0;
        color: #fff;
        line-height: 110%;
    }
    .bubble-1 {
        background: url('../images/purple-bubble.png') no-repeat center;
        background-size: 100%;
    }
    .bubble-2 {
        background: url('../images/blue-bubble.png') no-repeat center;
        background-size: 100%;
    }
    .arrow-right {
        position: absolute;
        box-sizing: border-box;
        width: 20.8%;
        height: 12.37%;
        padding: 2.6% 3% 0 0;
        background: url('../images/blue-arrow.png') no-repeat center;
        background-size: 100%;
        color: #fff;
    }
    /* Font replace */
    .font-replace { /* This doesn't work well on ios when we are scaling the element */
        position: relative;
        font-size: 12px;
        text-indent: -9999px;
    }
    .font-replace div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-position: center top;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    /* Pop */
    .pop {
        -webkit-transform: scale(0,0);
        transform: scale(0,0);
    }
    .pop[animation="1"] {
        -webkit-animation: popAnimation 0.3s;
        -webkit-animation-fill-mode: forwards;
        animation: popAnimation 0.3s;
        animation-fill-mode: forwards;
    }
    /* Tv */
    .tv {
        position: absolute;
        -webkit-transform: scale(0,0);
        transform: scale(0,0);
    }
    .tv .background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 9% 4% 0;
        box-sizing: border-box;
        z-index: 1;
        background-color: #fff;
    }
    .tv .dots {
        position: absolute;
        width: 8px;
        height: 0;
        left: 50%;
        margin-left: -4px;
        background: url('../images/dotted-line.png') no-repeat 0 0;
        -webkit-transition: 1s all 1s;
        transition:  1s all 1s;
    }
    .tv .dots-horizontal {
        position: absolute;
        height: 8px;
        width: 0;
        left: 50%;
        margin-top: -4px;
        background: url('../images/dotted-line-horiz.png') repeat-x 0 -145px; /* TODO get a replacment asset here */
        -webkit-transition: 2s all 1s;
        transition:  2s all 1s;
    }
    .tv[animation = '1'] {
        -webkit-animation: tvAnimation 0.5s; /* Chrome, Safari, Opera */
        -webkit-animation-fill-mode: forwards;
        animation: tvAnimation 0.5s;
        animation-fill-mode: forwards;
    }
    .tv[animation = '2'] {
        -webkit-animation: tvOffAnimation 0.5s; /* Chrome, Safari, Opera */
        -webkit-animation-fill-mode: forwards;
        animation: tvOffAnimation 0.5s;
        animation-fill-mode: forwards;
    }
    /* Speech */
    .speech {
        -webkit-transform: scale(0,0);
        transform: scale(0,0);
        -webkit-transition: 0.3s all;
        transition:  0.3s all;
    }
    .speech[animation='1'] {
        -webkit-transform: scale(1,1);
        transform: scale(1,1);
    }
    .speech[animation='2'] {
        -webkit-transform: scale(0,0);
        transform: scale(0,0);
    }
    /* Thought */
    .thought-bubble1 {
        width: 0.63%;
        height: 0.85%;
        background-image: url('../images/thought-bubble.png');
    }
    .thought-bubble2 {
        width: 1.22%;
        height: 1.63%;
        background-image: url('../images/thought-bubble.png');
    }
    .thought-bubble3 {
        width: 1.85%;
        height: 2.47%;
        background-image: url('../images/thought-bubble.png');
    }
    .thought-bubble4 {
        width: 2.95%;
        height: 3.96%;
        background-image: url('../images/thought-bubble.png');
    }
    .thought-bubble1[animation="1"] {
        -webkit-animation: 0.15s popAnimation forwards;
        animation: 0.15s popAnimation forwards;
    }
    .thought-bubble2[animation="1"] {
        -webkit-animation: 0.15s popAnimation 0.3s forwards;
        animation: 0.15s popAnimation 0.3s forwards;
    }
    .thought-bubble3[animation="1"] {
        -webkit-animation: 0.15s popAnimation 0.45s forwards;
        animation: 0.15s popAnimation 0.45s forwards;
    }
    .thought-bubble4[animation="1"] {
        -webkit-animation: 0.15s popAnimation 0.6s forwards;
        animation: 0.15s popAnimation 0.6s forwards;
    }
    /* Question buttons and text */
    .question-button {
        position: absolute;
        display: block;
        top: 35.16%;
        left: 4.1%;
        width: 27.34%;
        height: 36.46%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 90%;
        -webkit-transition: background-size 0.2s;
        transition: background-size 0.2s;
    }
    .question-button2 {
        left: 34.76%;
    }
    .question-button3 {
        left: 65.43%;
    }
    .question-button2[animation="1"] {
        -webkit-animation: 0.3s popAnimation 0.3s forwards; /* Chrome, Safari, Opera */
        animation: 0.3s popAnimation 0.3s forwards;
    }
    .question-button3[animation="1"] {
        -webkit-animation: 0.3s popAnimation 0.6s forwards; /* Chrome, Safari, Opera */
        animation: 0.3s popAnimation 0.6s forwards;
    }
    .question-button[animation="1"]:hover {
        background-size: 100%;
    }
    .question-button-text {
        position: absolute;
        top: 75.13%;
        left: 5%;
        height: 4.81%;
        width: 25%;
        margin: 0;
        opacity: 0;
        -webkit-transition: opacity 0.3s;
        transition: opacity 0.3s;
    }
    .question-button-text2 {
        left: 36%;
        -webkit-transition: 0.3s opacity 0.3s;
        transition: 0.3s opacity 0.3s;
    }
    .question-button-text3 {
        left: 67%;
        -webkit-transition: 0.3s opacity 0.6s;
        transition: 0.3s opacity 0.6s;
    }
    .question-button-text[animation="1"] {
        opacity: 1;
    }
    .question-proceed {
        position: absolute;
        bottom: 12.36%;
        left: 200%;
        width: 40%;
        height: 3.22%;
        margin-left: -20%;
        text-align: center;
        -webkit-transition: left 0.3s;
        transition: left 0.3s;
    }
    .question-proceed[animation='1'] {
        left: 50%;
    }
    /* Navigation */
    #navigation {
        position: absolute;
        bottom: -98%;
        left: 50%;
        overflow: hidden;
        width: 360px;
        margin: 0 0 0 -180px;
        height: 20px;
        padding: 0;
    }
    #navigation li {
        float: left;
        list-style: none;
        margin-right: 11px;
    }
    #navigation li a {
        display: block;
        width: 9px;
        height: 9px;
        text-indent: -9999px;
        background: url('../images/white-circle.png') no-repeat 0 0;
    }
    #navigation li[state='1'] a {
        background: url('../images/red-circle.png') no-repeat center;
        background-size: 100% 100%;
    }
    /* Next button */
    .next {
        position: absolute;
        left: 0%;
        bottom: 2%;
        width: 5.86%;
        height: 7.81%;
        background: url('../images/arrow-down.png') no-repeat center;
        background-size: 100% 100%;
        text-indent: -9999px;
    }


    /*  =========================================================================================================
        Section titles
        =========================================================================================================
    */
    .section-title {
        width: 100%;
    }
    .section-title span {
        position: absolute;
        left: 150%;
        padding: 1.5%;
        -webkit-transition: left 0.3s;
        transition: left 0.3s;
    }
    .main-title {
        top: 3%;
    }
    .sub-title {
        top: 12%;
    }
    .title-background1 {
        background-color: #131E1F;
        color: #fff;
    }
    .title-background2 {
        background-color: #fff;
        color: #131E1F;
    }
    .title-background3 {
        background-color: #006BA6;
        color: #fff;
    }
    .title-background4 {
        background-color: #5BC2E7;
    }
    .main-title[animation = '2'], .sub-title[animation = '2'] {
        left: -150%;
    }

    /*  =========================================================================================================
        Splash screen
        =========================================================================================================
    */
    #splash-screen {
        background: #131E1F;
        overflow: hidden;
        width: 100%;
        opacity: 0;
        -webkit-transition: 0.3s opacity 1s;
        transition: 0.3s opacity 1s;
    }
    #splash-screen .section-stage {
        border-top: 1px solid #131E1F;
        color: #fff;
    }
    #splash-screen .section-title {
        margin-bottom: 0;
        text-align: center;
    }
    #splash-screen p {
        margin-top: 2%;
    }
    #rsc-logo {
        position: absolute;
        top: 47.52%;
        left: 23%;
        width: 16.33%;
        height: 14.48%;
        background-image: url('../images/splash-screen/rsc-logo.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
    }
    #chemistry-logo {
        position: absolute;
        top: 51.90%;
        left: 51.56%;
        width: 29.37%;
        height: 6.77%;
        background-image: url('../images/splash-screen/chemistry-logo.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
    }
    #start {
        width: 300px;
        position: absolute;
        bottom: 20%;
        left: 50%;
        margin-left: -150px;
        text-align: center;
    }
    #splash-screen .next {
        position: absolute;
        left: 50%;
        bottom: 5%;
        width: 9.76%;
        height: 13.02%;
        margin-left: -4.8%;
        background: url('../images/arrow-down.png') no-repeat center center / 100% 100%;
        -webkit-animation: pulseAnimation 2s infinite;
        -moz-animation: pulseAnimation 2s infinite;
        -o-animation: pulseAnimation 2s infinite;
        animation: pulseAnimation 2s infinite;
    }

    /*  =========================================================================================================
        Slide 1
        =========================================================================================================
    */

    #slide-1 .main-title {
        width: 91%;
    }
    #slide-1 .main-title[animation = '1'] {
        left: 2%;
    }
    #slide-1 .sub-title {
        width: 35%;
    }
    #slide-1 .sub-title[animation = '1'] {
        left: 32%;
    }

    #science-button {
        background-image: url('../images/slide-1/science-button.png');
    }
    #school-button {
        background-image: url('../images/slide-1/school-button.png');
    }
    #medicine-button {
        background-image: url('../images/slide-1/medicine-button.png');
    }

    /*  =========================================================================================================
        Slide 2
        =========================================================================================================
    */
    #slide-2 .main-title {
        width: 88%;
    }
    #slide-2 .main-title[animation = '1'] {
        left: 7.91%;
    }
    #slide-2 .sub-title {
        width: 41%;
    }
    #slide-2 .sub-title[animation = '1'] {
        left: 30.96%;
    }
    #slide-2 .main-doughnut {
        width: 78.12%;
        height: 36.84%;
    }

    #slide2-preload1 { background-image: url('../images/slide-2/kids.gif'); }
    #slide2-preload2 { background-image: url('../images/slide-2/teacher.gif'); }
    #slide2-preload3 { background-image: url('../images/slide-2/bunsen-burner.gif'); }
    #slide-2 .main-doughnut .doughnut-container {
        background: url('../images/slide-2/pie-21.png') no-repeat center center / 0% 0%;
    }
    #kids {
        top: 42.31%;
        left: 150%;
        width: 36.01%;
        height: 27.8%;
        background-image: url('../images/slide-2/kids.png');
    }
    #kids[animation = '1'] {
        background-image: url('../images/slide-2/kids.gif');
    }
    #bunsen-burner {
        top: 150%;
        left: 19.82%;
        width: 18.55%;
        height: 41.67%;
        background-image: url('../images/slide-2/bunsen-burner.png');
    }
    #bunsen-burner[animation = '1'] {
        background-image: url('../images/slide-2/bunsen-burner.gif');
    }
    #teacher {
        top: 31.25%;
        left: -100%;
        width: 15.62%;
        height: 39.06%;
        background-image: url('../images/slide-2/teacher.png');
    }
    #teacher[animation = '1'] {
        background-image: url('../images/slide-2/teacher.gif');
    }
    #bar-chart-one {
        position: absolute;
        top: 73.18%;
        left: 3.9%;
        width: 65.72%;
        height: 15.56%;
    }
    #bar-chart-one .bar-one, #bar-chart-one .bar-two, #bar-chart-one .bar-three, #bar-chart-one .bar-four {
        height: 25%;
        width: 100%;
        overflow: hidden;
    }
    #bar-chart-one .label {
        float: left;
        width: 26%;
        padding-right: 20px;
        line-height: 200%;
        text-align: right;
    }
    #bar-chart-one .bar {
        float: left;
        height: 60%;
        width: 50%;
        margin-top: 1%;
    }
    #bar-chart-one .bar div {
        width: 0%;
        height: 100%;
        background: #910047;
        -webkit-transition: width 0.5s;
        transition: width 0.5s;
    }
    #bar-chart-one .bar-one .bar {
        width: 61.7%;
    }
    #bar-chart-one .bar-two .bar {
        width: 54.83%;
    }
    #bar-chart-one .bar-three .bar {
        width: 31.5%;
    }
    #bar-chart-one .bar-four .bar {
        width: 23.77%;
    }
    #bar-chart-one .value {
        float: left;
        margin-top: 5px;
        padding-left: 10px;
        width: 4%;
    }
    #bar-chart-one .bar div[animation="1"] {
        width: 100%;
    }
    #however-text {
        position: absolute;
        top: 29.43%;
        left: 79.49%;
        width: 13.77%;
        height: 5.21%;
    }
    #doughnut-two {
        position: absolute;
        top: 37.24%;
        left: 82.32%;
        width: 8.1%;
        height: 10.81%;
    }
    #doughnut-two-text {
        position: absolute;
        top: 48.74%;
        width: 19.72%;
        height: 5.83%;
    }
    #but-text {
        position: absolute;
        top: 59.11%;
        left: 82.03%;
        width: 8.4%;
        height: 5.08%;
    }
    #doughnut-three {
        position: absolute;
        top: 67.19%;
        left: 82.32%;
        width: 8.1%;
        height: 10.81%;
    }
    #doughnut-three-text {
        position: absolute;
        top: 79.21%;
        width: 18.55%;
        height: 8.82%;
    }

    /*  =========================================================================================================
        Slide 3
        =========================================================================================================
    */
    #slide-3 .main-title {
        width: 94%;
    }
    #slide-3 .sub-title {
        width: 34%;
    }
    #slide-3 .main-title[animation = '1'] {
        left: 2%;
    }
    #slide-3 .sub-title[animation = '1'] {
        left: 29%;
    }
    #toxic-button {
        background-image: url('../images/slide-3/toxic-button.png');
    }
    #food-button {
        background-image: url('../images/slide-3/food-button.png');
    }
    #periodic-button {
        background-image: url('../images/slide-3/periodic-button.png');
    }

    /*  =========================================================================================================
        Slide 4
        =========================================================================================================
    */
    #slide-4 .main-title {
        width: 83%;
    }
    #slide-4 .sub-title {
        width: 57%;
    }
    #slide-4 .main-title[animation = '1'] {
        left: 8.5%;
    }
    #slide-4 .sub-title[animation = '1'] {
        left: 42%;
    }
    #slide4-preload1 { background-image: url('../images/slide-4/girl.gif'); }
    #slide4-bubble1 {
        top: 33%;
        left: 20%;
        width: 25.87%;
        height: 34.51%;
    }
    #slide4-bubble2 {
        top: 33%;
        left: 60%;
        width: 25.87%;
        height: 34.51%;
    }
    #slide4-bubble2[animation="1"] {
        -webkit-animation: 0.5s popAnimation 0.3s forwards;
        animation: 0.5s popAnimation 0.3s forwards;
    }
    #slide4-cabinet1 {
        top: 55.21%;
        width: 20.51%;
        height: 33.59%;
        background-image: url('../images/slide-4/cabinet1.png');
    }
    #slide4-chef {
        top: 33%;
        width: 21.56%;
        height: 53.48%;
        background-image: url('../images/slide-4/chef.png');
    }
    #slide4-canteen {
        top: 48%;
        width: 10.62%;
        height: 37.5%;
        background-image: url('../images/slide-4/canteen.png');
    }
    #slide4-girl {
        top: 50%;
        width: 10.06%;
        height: 36.16%;
        background-image: url('../images/slide-4/girl.png');
    }
    #slide4-girl[animation='1'] {
        background-image: url('../images/slide-4/girl.gif');
    }
    #slide4-text1 {
        top: 37.11%;
        left: 5.46%;
        width: 18.46%;
        height: 11.59%;
    }
    #slide4-text1.tv .dots {
        top: 50.56%;
        left: 129.1%;
        -webkit-transition: 1.5s height 1s;
        transition:  1.5s height 1s;
    }
    #slide4-text1[animation = "1"].tv .dots {
        height: 221.35%;
    }
    #slide4-text1[animation = "2"].tv .dots {
        height: 0%;
    }
    #slide4-text1.tv .dots-horizontal {
        top: 50.56%;
        left: 100%;
        -webkit-transition: 1s width 0.5s;
        transition:  1s width 0.5s;
    }
    #slide4-text1[animation = "1"].tv .dots-horizontal {
        width: 29.1%;
    }
    #slide4-text1[animation = "2"].tv .dots-horizontal {
        width: 0%;
    }
    #slide4-text2 {
        top: 50.78%;
        left: 5.46%;
        width: 18.46%;
        height: 8.9%;
    }
    #slide4-text2.tv .dots {
        top: 100%;
        left: 14.28%;
        -webkit-transition: 1s height 0.75s;
        transition:  1s height 0.75s;
    }
    #slide4-text2[animation = "1"].tv .dots {
        height: 205.71%;
    }
    #slide4-text2[animation = "2"].tv .dots {
        height: 0%;
    }
    #slide4-text2.tv .dots-horizontal {
        top: 305.71%;
        left: 14.28%;
        -webkit-transition: 0.75s width 1.75s;
        transition:  0.75s width 1.75s;
    }
    #slide4-text2[animation = "1"].tv .dots-horizontal {
        width: 72.1%;
    }
    #slide4-text2[animation = "2"].tv .dots-horizontal {
        width: 0%;
    }
    #slide4-text3 {
        top: 38%;
        left: 50%;
        width: 12%;
        height: 10%;
    }
    #slide4-text3.tv .dots {
        top: 100%;
        left: 65%;
        -webkit-transition: 0.5s height 1s;
        transition:  0.5s height 1s;
    }
    #slide4-text3[animation = "1"].tv .dots {
        height: 80%;
    }
    #slide4-text3[animation = "2"].tv .dots {
        height: 0%;
    }
    #slide4-text4 {
        top: 72%;
        left: 57%;
        width: 9%;
        height: 4%;
    }
    #slide4-text4.tv .dots {
        top: 100%;
        left: 50%;
    }
    #slide4-text4[animation = "1"].tv .dots {
        height: 120%;
    }
    #slide4-text4[animation = "2"].tv .dots {
        height: 0;
    }
    #slide4-text4.tv .dots-horizontal {
        top: 215%;
        left: 44%;
        -webkit-transition: 0.75s all 1.75s;
        transition:  0.75s all 1.75s;
    }
    #slide4-text4[animation = "1"].tv .dots-horizontal {
        width: 30%;
        left: 13%;
    }
    #slide4-text4[animation = "2"].tv .dots-horizontal {
        width: 0;
        left: 50%;
    }
    #slide4-thought1 {
        top: 49%;
        left: 67%;
        width: 0.63%;
        height: 0.85%;
        background-image: url('../images/slide-4/thought-bubble.png');
    }
    #slide4-thought2 {
        top: 46%;
        left: 68%;
        width: 1.22%;
        height: 1.63%;
        background-image: url('../images/slide-4/thought-bubble.png');
    }
    #slide4-thought2[animation="1"] {
        -webkit-animation: 0.3s popAnimation 0.3s forwards;
        animation: 0.3s popAnimation 0.3s forwards;
    }
    #slide4-thought3 {
        top: 44%;
        left: 70%;
        width: 1.85%;
        height: 2.47%;
        background-image: url('../images/slide-4/thought-bubble.png');
    }
    #slide4-thought3[animation="1"] {
        -webkit-animation: 0.6s popAnimation 0.3s forwards;
        animation: 0.6s popAnimation 0.3s forwards;
    }
    #slide4-box {
        position: absolute;
        top: 27.73%;
        left: 72.84%;
        width: 22.56%;
        height: 60.55%;
        color: #131E1F;
    }
    #slide4-box[animation="1"] {
        -webkit-animation: 1.2s tvAnimation 0.3s forwards;
        animation: 1.2s tvAnimation 0.3s forwards;
    }
    #slide4-box .background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('../images/slide-4/box-background.png') no-repeat center / 100% 100%;
    }
    #slide4-box div {
        z-index: 1;
    }
    #slide4-bubble3 {
        top: 20.57%;
        left: 60.74%;
        width: 15.43%;
        height: 20.44%;
        padding: 1.5% 1.5% 0;
    }
    #slide4-arrow {
        top: 24%;
    }
    #slide4-box-text1 {
        position: absolute;
        top: 7.53%;
        left: 37.66%;
        width: 25.54%;
        height: 3.87%;
        color: #131E1F;
        opacity: 0;
        -webkit-transition: 0.3s opacity;
        transition:  0.3s opacity;
    }
    #slide4-box-text1[animation="1"] {
        opacity: 1;
    }
    #slide4-box-text2 {
        position: absolute;
        top: 45.16%;
        left: 18.18%;
        width: 22.94%;
        height: 3.87%;
        color: #131E1F;
        opacity: 0;
        -webkit-transition: 0.3s opacity 0.2s;
        transition:  0.3s opacity 0.2s;
    }
    #slide4-box-text3 {
        position: absolute;
        top: 45.16%;
        left: 58.01%;
        width: 25.54%;
        height: 3.87%;
        color: #131E1F;
        opacity: 0;
        -webkit-transition: 0.3s opacity 0.4s;
        transition:  0.3s opacity 0.4s;
    }
    #slide4-box-text4 {
        position: absolute;
        top: 69.89%;
        left: 12.99%;
        width: 31.17%;
        height: 7.74%;
        opacity: 0;
        -webkit-transition: 0.3s opacity 0.6s;
        transition:  0.3s opacity 0.6s;
    }
    #slide4-box-text5 {
        position: absolute;
        top: 69.89%;
        left: 50.65%;
        width: 40.26%;
        height: 7.74%;
        color: #131E1F;
        opacity: 0;
        -webkit-transition: 0.3s opacity 0.8s;
        transition:  0.3s opacity 0.8s;
    }
    #slide4-box-text1[animation="1"], #slide4-box-text2[animation="1"], #slide4-box-text3[animation="1"], #slide4-box-text4[animation="1"], #slide4-box-text5[animation="1"] {
        opacity: 1;
    }
    #slide4-box-bubble1 {
        top: 12.9%;
        left: 22.94%;
        width: 56.28%;
        height: 27.96%;
        padding: 21% 1% 0;
    }
    #slide4-box-bubble1[animation="1"] {
        -webkit-animation: 0.3s popAnimation 0.2s forwards;
        animation: 0.3s popAnimation 0.2s forwards;
    }
    #slide4-box-bubble2 {
        top: 51.61%;
        left: 15.15%;
        width: 23.37%;
        height: 11.61%;
    }
    #slide4-box-bubble2[animation="1"] {
        -webkit-animation: 0.3s popAnimation 0.4s forwards;
        animation: 0.3s popAnimation 0.4s forwards;
    }
    #slide4-box-bubble3 {
        top: 51.61%;
        left: 57.57%;
        width: 23.37%;
        height: 11.61%;
    }
    #slide4-box-bubble3[animation="1"] {
        -webkit-animation: 0.3s popAnimation 0.6s forwards;
        animation: 0.3s popAnimation 0.6s forwards;
    }
    #slide4-box-bubble4 {
        top: 79.13%;
        left: 15.15%;
        width: 23.37%;
        height: 11.61%;
    }
    #slide4-box-bubble4[animation="1"] {
        -webkit-animation: 0.3s popAnimation 0.8s forwards;
        animation: 0.3s popAnimation 0.8s forwards;
    }
    #slide4-box-bubble5 {
        top: 79.13%;
        left: 57.57%;
        width: 23.37%;
        height: 11.61%;
    }
    #slide4-box-bubble5[animation="1"] {
        -webkit-animation: 0.3s popAnimation 1s forwards;
        animation: 0.3s popAnimation 1s forwards;
    }

    /*  =========================================================================================================
        Slide 5
        =========================================================================================================
    */

    #slide-5 {
        background: -webkit-linear-gradient(#AEE8F7 0%,#AEE8F7 44.12%,#83C411 44.12%,#83C411 49.63%,#EFB322 49.63%,#EFB322 100%);
        background: linear-gradient(to bottom, #AEE8F7 0%,#AEE8F7 44.12%,#83C411 44.12%,#83C411 49.63%,#EFB322 49.63%,#EFB322 100%);
    }
    #slide-5 .section-stage {
        border-top: 1px solid #AEE8F7;
    }
    #slide-5 .main-title {
        width: 71%;
    }
    #slide-5 .sub-title {
        width: 79%;
    }
    #slide-5 .main-title[animation = '1'] {
        left: 5%;
    }
    #slide-5 .sub-title[animation = '1'] {
        left: 18%;
    }
    #slide5-preload1 { background-image: url('../images/slide-5/footballers.gif'); }
    #slide5-girl {
        top: 35%;
        width: 22.51%;
        height: 38.51%;
        background-image: url('../images/slide-5/girl.png');
    }
    #slide5-footballers {
        top: 42%;
        width: 46.8%;
        height: 46.13%;
        background-image: url('../images/slide-5/footballers.png');
    }
    #slide5-footballers[animation='1'] {
        background-image: url('../images/slide-5/footballers.gif');
    }
    /*#slide5-boy1 {*/
        /*top: 44%;*/
        /*width: 15.45%;*/
        /*height: 40.69%;*/
        /*background-image: url('../images/slide-5/boy1.png');*/
    /*}*/
    /*#slide5-ball {*/
        /*top: 76%;*/
        /*width: 5.99%;*/
        /*height: 8.01%;*/
        /*background-image: url('../images/slide-5/ball.png');*/
    /*}*/
    #slide5-bag1 {
        top: 57%;
        width: 13.13%;
        height: 13.25%;
        background-image: url('../images/slide-5/bag1.png');
    }
    /*#slide5-boy2 {*/
        /*top: 39%;*/
        /*width: 16.33%;*/
        /*height: 39.61%;*/
        /*background-image: url('../images/slide-5/boy2.png');*/
    /*}*/
    #slide5-bag2 {
        top: 74%;
        width: 11.94%;
        height: 14.09%;
        background-image: url('../images/slide-5/bag2.png');
    }
    #slide5-fence {
        top: 30.1%;
        width: 61.54%;
        height: 25.23%;
        background-image: url('../images/slide-5/fence.png');
    }
    #slide5-forest {
        top: 24%;
        width: 70.56%;
        height: 20.54%;
        background-image: url('../images/slide-5/forest.png');
    }
    #slide5-building {
        top: 26.5%;
        width: 23.22%;
        height: 17.61%;
        background-image: url('../images/slide-5/building.png');
    }
    #slide5-cloud {
        top: 4%;
        width: 16.04%;
        height: 5.7%;
        background-image: url('../images/slide-5/cloud.png');
    }
    #slide5-speech1 {
        top: 26%;
        left: 28%;
        width: 29.1%;
        height: 19.76%;
        background-image: url('../images/slide-5/speech1.png');
    }
    #slide5-doughnut1 {
        float: left;
        width: 40%;
        padding-top: 6%;
        padding-left: 18%;
    }
    #slide5-speech1 .speech-text {
        float: right;
        width: 36%;
        padding: 7% 2%;
        text-align: left;
    }
    #slide5-speech2 {
        top: 67%;
        left: 7%;
        width: 30.17%;
        height: 22.23%;
        background-image: url('../images/slide-5/speech2.png');
    }
    #slide5-doughnut2 {
        float: left;
        width: 35%;
        padding: 12% 5% 5%;
    }
    #slide5-speech2 .speech-text {
        float: right;
        width: 50%;
        padding: 9% 2% 5%;
        text-align: left;
    }
    #slide5-speech3 {
        top: 46%;
        left: 77%;
        width: 21.51%;
        height: 33.33%;
        background-image: url('../images/slide-5/speech3.png');
    }
    #slide5-doughnut3 {
        float: right;
        width: 63%;
        padding-top: 8%;
    }
    #slide5-speech3 .speech-text {
        float: right;
        width: 67%;
        padding: 10% 5% 5% 5%;
    }

    /*  =========================================================================================================
        Slide 6
        =========================================================================================================
    */
    #slide-6 .main-title {
        width: 94%;
    }
    #slide-6 .sub-title {
        width: 26%;
    }
    #slide-6 .main-title[animation = '1'] {
        left: 2%;
    }
    #slide-6 .sub-title[animation = '1'] {
        left: 36%;
    }
    #pharmacist-button {
        background-image: url('../images/slide-6/pharmacist-button.png');
    }
    #shop-button {
        background-image: url('../images/slide-6/shop-button.png');
    }
    #scientist-button {
        background-image: url('../images/slide-6/scientist-button.png');
    }

    /*  =========================================================================================================
        Slide 7
        =========================================================================================================
    */
    #slide-7 .main-title {
        width: 47%;
    }
    #slide-7 .main-title[animation = '1'] {
        left: 27%;
    }

    #slide-7 .main-doughnut .doughnut-text {
        width: 73%;
    }
    #slide-7 .main-doughnut .doughnut-container {
        background: url('../images/slide-7/pie-26.png') no-repeat center center / 0% 0%;
    }
    #slide7-preload1 { background-image: url('../images/slide-7/till.gif'); }
    #slide7-lamp1 {
        left: 7%;
        top: -15%;
        width: 11.6%;
        height: 12.79%;
        background-image: url('../images/slide-7/lamp1.png');
        -webkit-transition: 0.5s top;
        transition:  0.5s top;
    }
    #slide7-lamp1[animation = '1'] {
        top: 0;
    }
    #slide7-lamp2 {
        left: 88%;
        top: -20%;
        width: 11.6%;
        height: 18.62%;
        background-image: url('../images/slide-7/lamp2.png');
        -webkit-transition: 0.5s top 0.3s;
        transition:  0.5s top 0.3s;
    }
    #slide7-lamp2[animation = '1'] {
        top: 0;
    }
    #slide7-background {
        top: 87%;
        width: 90.4%;
        height: 4.95%;
        background-image: url('../images/slide-7/background.png');
    }
    #slide7-shelves {
        top: 34%;
        width: 55.47%;
        height: 39.29%;
        background-image: url('../images/slide-7/shelves.png');
    }
    #slide7-cabinet {
        top: 39%;
        width: 30.52%;
        height: 50.23%;
        background-image: url('../images/slide-7/cabinet.png');
    }
    #slide7-till {
        top: 37%;
        width: 21.56%;
        height: 52.44%;
        background-image: url('../images/slide-7/till.png');
    }
    #slide7-till[animation='1'] {
        background-image: url('../images/slide-7/till.gif');
    }
    #slide7-screen {
        top: 15%;
        width: 30.71%;
        height: 65.13%;
        padding-top: 7%;
        background-image: url('../images/slide-7/screen.png');
    }
    #slide7-text1 {
        height: 4%;
        left: 15%;
        top: 32%;
        width: 8%;
    }
    #slide7-text1.tv .dots {
        top: 100%;
        left: 50%;
        -webkit-transition: 0.5s height 1s;
        transition:  0.5s height 1s;
    }
    #slide7-text1[animation = "1"].tv .dots {
        height: 200%;
    }
    #slide7-text1[animation = "2"].tv .dots {
        height: 0%;
    }
    #slide7-text2 {
        height: 4%;
        left: 36%;
        top: 32%;
        width: 12%;
    }
    #slide7-text2.tv .dots {
        top: 100%;
        left: 50%;
    }
    #slide7-text2.tv .background {
        padding-top: 6%;
    }
    #slide7-text2[animation = "1"].tv .dots {
        height: 270%;
    }
    #slide7-text2[animation = "2"].tv .dots {
        height: 0;
    }
    #slide7-text2.tv .dots-horizontal {
        top: 380%;
        left: 46%;
        -webkit-transition: 0.75s all 1.75s;
        transition:  0.75s all 1.75s;
    }
    #slide7-text2[animation = "1"].tv .dots-horizontal {
        width: 60%;
        left: -12%;
    }
    #slide7-text2[animation = "2"].tv .dots-horizontal {
        width: 0;
        left: 50%;
    }
    #slide7-screen-text {
        display: block;
        width: 75%;
        padding-left: 12%;
    }

    #slide7-bar-chart {
        height: 60%;
        padding: 5% 0 0 10%;
    }
    #slide7-bar-chart .bar-one, #slide7-bar-chart .bar-two, #slide7-bar-chart .bar-three, #slide7-bar-chart .bar-four, #slide7-bar-chart .bar-five {
        height: 20%;
        width: 100%;
        overflow: hidden;
    }
    #slide7-bar-chart .label {
        display: inline-block;
        width: 100%;
        text-align: left;
    }
    #slide7-bar-chart .bar {
        float: left;
        height: 30%;
        width: 50%;
        margin-top: 1%;
    }
    #slide7-bar-chart .bar div {
        width: 0%;
        height: 100%;
        background: #910047;
        -webkit-transition: width 0.5s;
        transition: width 0.5s;
    }
    #slide7-bar-chart .bar-one .bar {
        width: 76%;
    }
    #slide7-bar-chart .bar-two .bar {
        width: 47%;
    }
    #slide7-bar-chart .bar-three .bar {
        width: 29%;
    }
    #slide7-bar-chart .bar-four .bar {
        width: 17%;
    }
    #slide7-bar-chart .bar-five .bar {
        width: 17%;
    }
    #slide7-bar-chart .value {
        float: left;
        padding-left: 10px;
        width: 4%;
        /*font-size: 12px;*/
    }
    #slide7-bar-chart .bar div[animation="1"] {
        width: 100%;
    }

    /*  =========================================================================================================
        Slide 8
        =========================================================================================================
    */

    #slide-8 {
        background: -webkit-linear-gradient(#AEE8F7 0%,#AEE8F7 55%,#83C411 55%,#83C411 100%);
        background: linear-gradient(to bottom, #AEE8F7 0%,#AEE8F7 55%,#83C411 55%,#83C411 100%);
    }
    #slide-8 .section-stage {
        border-top: 1px solid #AEE8F7;
    }
    #slide-8 .main-title {
        width: 50%;
    }
    #slide-8 .main-title[animation = '1'] {
        left: 12%;
    }
    #slide-8 .sub-title {
        width: 64%;
    }
    #slide-8 .sub-title[animation = '1'] {
        left: 40%;
    }
    #slide8-preload1 { background-image: url('../images/slide-8/window.gif'); }
    #slide8-sun {
        top: 0.5%;
        width: 7.84%;
        height: 10.45%;
        background-image: url('../images/slide-8/sun.png');
    }
    #slide8-cloud {
        top: 2.5%;
        width: 16.89%;
        height: 6.02%;
        background-image: url('../images/slide-8/cloud.png');
    }
    #slide8-grass {
        top: 19%;
        width: 83.79%;
        height: 36.49%;
        background-image: url('../images/slide-8/grass.png');
    }
    #slide8-girl {
        top: 47%;
        width: 17.55%;
        height: 39.26%;
        background-image: url('../images/slide-8/girl.png');
    }
    #slide8-flowers {
        top: 36%;
        width: 32.67%;
        height: 57.13%;
        background-image: url('../images/slide-8/flowers.png');
    }
    #slide8-house-mask {
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background-color: #EFB322;
    }
    #slide8-house {
        top: 0;
        left: 0;
        width: 52.12%;
        height: 104.17%;
        background-image: url('../images/slide-8/house.png');
    }
    #slide8-window {
        top: 18%;
        left: 6%;
        width: 32.49%;
        height: 72.39%;
        background-image: url('../images/slide-8/window.gif');
    }
    /*#slide8-window[animation='1'] {*/
        /*background-image: url('../images/slide-8/window.gif');}*/
    #slide8-text1 {
        top: 17%;
        left: 7%;
        width: 17.36%;
        height: 10.64%;
        padding: 2% 1% 2%;
        background-image: url('../images/slide-8/text1.png');
        color: #fff;
    }
    #slide8-text2 {
        top: 26%;
        left: 47%;
        width: 11.58%;
        height: 9.34%;
        padding: 2% 3% 2%;
        background-image: url('../images/slide-8/text2.png');
    }
    #slide8-text3 {
        top: 34%;
        left: 24%;
        width: 15.27%;
        height: 11.47%;
        padding: 2.5% 4% 2%;
        background-image: url('../images/slide-8/text3.png');
        color: #fff;
    }
    #slide8-text4 {
        top: 27%;
        left: 74%;
        width: 22.29%;
        height: 10.3%;
        padding: 1.5% 1% 1.5%;
        background-image: url('../images/slide-8/text4.png');
    }
    #slide8-text5 {
        top: 48%;
        left: 12%;
        width: 12.45%;
        height: 5.12%;
        padding-top: 1.5%;
        padding-bottom: 2%;
        background-image: url('../images/slide-8/text5.png');
        color: #fff;
    }
    #slide8-text6 {
        top: 41%;
        left: 58%;
        width: 9.06%;
        height: 5.97%;
        padding: 2%;
        background-image: url('../images/slide-8/text6.png');
    }

    /*  =========================================================================================================
        Slide 9
        =========================================================================================================
    */
    #slide-9 .main-title {
        width: 90%;
    }
    #slide-9 .sub-title {
        width: 99%;
    }
    #slide-9 .main-title[animation = '1'] {
        left: 0%;
    }
    #slide-9 .sub-title[animation = '1'] {
        left: 3%;
    }
    #biology-button {
        background-image: url('../images/slide-9/biology-button.png');
    }
    #physics-button {
        background-image: url('../images/slide-9/physics-button.png');
    }
    #chemistry-button {
        background-image: url('../images/slide-9/chemistry-button.png');
    }

    /*  =========================================================================================================
        Slide 10
        =========================================================================================================
    */

    #slide-10 .main-title {
        width: 60%;
    }
    #slide-10 .main-title[animation = '1'] {
        left: 15%;
    }
    #slide-10 .sub-title {
        width: 58%;
    }
    #slide-10 .sub-title[animation = '1'] {
        left: 28%;
    }
    #slide10-text1 {
        background-color: #fff;
    }
    #slide10-preload1 { background-image: url('../images/slide-10/woman.gif'); }
    #slide10-lamp1 {
        left: 5%;
        top: -21%;
        width: 13.96%;
        height: 20.67%;
        background-image: url('../images/slide-10/lamp1.png');
        -webkit-transition: 0.5s top;
        transition:  0.5s top;
    }
    #slide10-lamp1[animation = '1'] {
        top: -4%;
    }
    #slide10-lamp2 {
        left: 88%;
        top: -15%;
        width: 11.08%;
        height: 14.32%;
        background-image: url('../images/slide-10/lamp2.png');
        -webkit-transition: 0.5s top 0.3s;
        transition:  0.5s top 0.3s;
    }
    #slide10-lamp2[animation = '1'] {
        top: -2%;
    }
    #slide10-shelves1 {
        top: 7%;
        width: 40.48%;
        height: 42.25%;
        background-image: url('../images/slide-10/shelves1.png');
    }
    #slide10-shelves2 {
        top: 7%;
        width: 18.50%;
        height: 42.25%;
        background-image: url('../images/slide-10/shelves2.png');
    }
    #slide10-man {
        top: 40%;
        width: 23.14%;
        height: 40.95%;
        background-image: url('../images/slide-10/man.png');
    }
    #slide10-woman {
        top: 23%;
        width: 30.39%;
        height: 64.97%;
        background-image: url('../images/slide-10/woman.png');
    }
    #slide10-woman[animation='1'] {
        background-image: url('../images/slide-10/woman.gif');
    }
    #slide10-rack {
        top: 23%;
        width: 50.54%;
        height: 64.55%;
        background-image: url('../images/slide-10/rack.png');
    }
    #slide10-tube1 {
        left: 10.3%;
        }
        #slide10-tube1[animation = '1'] .tube {
            height: 89%;
        }
    #slide10-tube2 {
        left: 26%;
        }
        #slide10-tube2 .tube-bowl {
            background-image: url('../images/slide-10/tube-bowl2.png');
        }
        #slide10-tube2 .tube {
            background-color: #EB0C0C;
        }
        #slide10-tube2[animation = '1'] .tube {
            height: 87%;
        }
    #slide10-tube3 {
        left: 41.4%;
        }
        #slide10-tube3[animation = '1'] .tube {
            height: 81%;
        }
    #slide10-tube4 {
        left: 57.2%;
        }
        #slide10-tube4[animation = '1'] .tube {
            height: 80%;
        }
    #slide10-tube5 {
        left: 72.9%;
        }
        #slide10-tube5[animation = '1'] .tube {
            height: 70%;
        }
    .tube-container {
        position: absolute;
        top: 38%;
        width: 12%;
        height: 34.5%;
    }
    .tube-container .tube-bowl {
        bottom: 0;
        left: 0;
        width: 100%;
        height: 35%;
        background-image: url('../images/slide-10/tube-bowl1.png');
    }
    .tube-container .tube {
        position: absolute;
        bottom: 1%;
        left: 40%;
        width: 23%;
        height: 0;
        background-color: #131E1F;
        -webkit-transition: 0.3s height;
        transition:  0.3s height;
    }
    .tube-container span {
        position: absolute;
        bottom: 20%;
        left: 0;
        width: 100%;
        height: 5%;
        opacity: 0;
        color: #fff;
        -webkit-transition: 0.3s opacity 0.3s;
        transition:  0.3s opacity 0.3s;
    }
    .tube-container[animation = '1'] span {
        opacity: 1;
    }
    #slide10-rack-text {
        position: absolute;
        left: 0;
        top: 82%;
        height: 10%;
        width: 100%;
        color: #fff;
    }
    /*  =========================================================================================================
        Slide 11
        =========================================================================================================
    */

    #slide11-preload {
        top: 0;
        left: 200%;
        width: 96.68%;
        height: 89.84%;
        background-image: url('../images/slide-11/machine.gif');
    }

    #slide-11 .main-title {
        width: 83%;
    }
    #slide-11 .main-title[animation = '1'] {
        left: 6%;
    }
    #slide-11 .sub-title {
        width: 55%;
    }
    #slide-11 .sub-title[animation = '1'] {
        left: 23%;
    }
    #slide11-window1 {
        top: 0;
        width: 18.16%;
        height: 18.65%;
        background-image: url('../images/slide-11/window1.png');
    }
    #slide11-window2 {
        top: 0;
        width: 29.91%;
        height: 18.75%;
        background-image: url('../images/slide-11/window2.png');
    }
    #slide11-man {
        top: 11%;
        width: 13.5%;
        height: 24.9%;
        background-image: url('../images/slide-11/man.png');
    }
    #slide11-machine {
        top: 0;
        width: 96.68%;
        height: 89.84%;
        background-image: url('../images/slide-11/machine.png');
    }
    #slide11-machine-end {
        top: 54%;
        width: 9.84%;
        height: 35.06%;
        background-image: url('../images/slide-11/machine-end.png');
    }
    #slide11-machine[animation = '1'] {
        background-image: url('../images/slide-11/machine.gif');
    }
    #slide11-machine-man {
        top: 23.3%;
        width: 32.22%;
        height: 28.64%;
        background-image: url('../images/slide-11/machine-man.png');
    }
    #slide11-machine-lady {
        top: 47.8%;
        width: 14.65%;
        height: 24.74%;
        background-image: url('../images/slide-11/machine-lady.png');
    }
    #slide11-machine-text {
        position: absolute;
        top: 37%;
        left: 38%;
        width: 29.5%;
        height: 9%;
    }
    #slide11-doughnut1 {
        position: absolute;
        top: 45.5%;
        left: 43%;
        width: 9%;
    }
    #slide11-doughnut1-text {
        position: absolute;
        top: 58%;
        left: 42.8%;
        width: 9%;
        height: 4%;
        opacity: 0;
        -webkit-transition: 0.3s opacity 0.3s;
        transition:  0.3s opacity 0.3s;
    }
    #slide11-doughnut2 {
        position: absolute;
        top: 45.9%;
        left: 54%;
        width: 9%;
    }
    #slide11-doughnut2-text {
        position: absolute;
        top: 58%;
        left: 53.6%;
        width: 9%;
        height: 4%;
        opacity: 0;
        -webkit-transition: 0.3s opacity 0.3s;
        transition:  0.3s opacity 0.3s;
    }
    #slide11-doughnut1-text[animation = '1'], #slide11-doughnut2-text[animation = '1'] {
        opacity: 1;
    }
    #slide-11 .doughnut-label-small div {
        background-color: #131e1f;
        color: #fff;
    }
    #slide11-screen {
        top: 63%;
        width: 53.1%;
        height: 28.71%;
        background-image: url('../images/slide-11/screen.png');
    }
    #slide11-screen-text {
        position: absolute;
        top: 4%;
        left: 0%;
        width: 100%;
        height: 10%;
        color: #fff;
    }
    #slide11-bar-chart {
        position: absolute;
        top: 25%;
        left: 2%;
        height: 60%;
        width: 90%;
    }
    #slide11-bar-chart .bar-one, #slide11-bar-chart .bar-two {
        height: 40%;
        width: 100%;
    }
    #slide11-bar-chart .label {
        display: inline-block;
        width: 100%;
        text-align: left;
        color: #fff;
    }
    #slide11-bar-chart .bar {
        float: left;
        height: 30%;
        width: 50%;
        margin-top: 1%;
    }
    #slide11-bar-chart .bar div {
        width: 0%;
        height: 100%;
        background: #00AFDA;
        -webkit-transition: width 0.5s;
        transition: width 0.5s;
    }
    #slide11-bar-chart .bar-one .bar {
        width: 72%;
    }
    #slide11-bar-chart .bar-two .bar {
        width: 76%;
    }
    #slide11-bar-chart .value {
        float: left;
        padding-left: 10px;
        width: 4%;
        color: #fff
    }
    #slide11-bar-chart .bar div[animation="1"] {
        width: 100%;
    }

    /*  =========================================================================================================
        Slide 12
        =========================================================================================================
    */

    #slide-12 {
        background: -webkit-linear-gradient(#AEE8F7 0%,#AEE8F7 45.59%,#EFB322 45.59%,#EFB322 48.53%, #E99713 48.53%,#E99713 55.15%, #EFB322 55.15%,#EFB322 100%);
        background: linear-gradient(to bottom, #AEE8F7 0%,#AEE8F7 45.59%,#EFB322 45.59%,#EFB322 48.53%, #E99713 48.53%,#E99713 55.15%, #EFB322 55.15%,#EFB322 100%);
    }
    #slide-12 .section-stage {
        border-top: 1px solid #AEE8F7;
    }
    #slide-12 .main-title {
        width: 48%;
    }
    #slide-12 .main-title[animation = '1'] {
        left: 3%;
    }
    #slide-12 .sub-title {
        width: 46%;
    }
    #slide-12 .sub-title[animation = '1'] {
        left: 35%;
    }
    #slide12-sun {
        top: 5%;
        width: 9.62%;
        height: 12.82%;
        background-image: url('../images/slide-12/sun.png');
    }
    #slide12-cloud1 {
        top: 7%;
        width: 14.77%;
        height: 6.44%;
        background-image: url('../images/slide-12/cloud1.png');
    }
    #slide12-cloud2 {
        top: 0;
        width: 19.26%;
        height: 7.97%;
        background-image: url('../images/slide-12/cloud2.png');
    }
    #slide12-factories {
        top: 1%;
        width: 110.23%;
        height: 44.43%;
        background-image: url('../images/slide-12/factories.png');
    }
    #slide12-forest {
        top: 35.6%;
        width: 46.85%;
        height: 9.8%;
        background-image: url('../images/slide-12/forest.png');
    }
    #slide12-people1 {
        top: 27%;
        width: 36.87%;
        height: 20.74%;
        padding: 2% 1% 0 2%;
        background-image: url('../images/slide-12/people1.png');
    }
    #slide12-people1-percent,#slide12-people2-percent {
        float: left;
        opacity: 0;
        -webkit-transition: 0.3s opacity;
        transition:  0.3s opacity;
    }

    #slide12-people2-percent {
        padding-left:1%;
    }
    #slide12-people1-text, #slide12-people2-text {
        float: right;
        width: 72%;
        opacity: 0;
        -webkit-transition: 0.3s opacity;
        transition:  0.3s opacity;
    }
    #slide12-people1-percent[animation = '1'],#slide12-people2-percent[animation = '1'],
    #slide12-people1-text[animation = '1'], #slide12-people2-text[animation = '1'] {
        opacity: 1;
    }
    #slide12-people2 {
        top: 27%;
        width: 38.67%;
        height: 20.65%;
        padding: 2% 1% 0 1%;
        background-image: url('../images/slide-12/people2.png');
    }
    #slide12-bush {
        top: 57%;
        width: 94.38%;
        height: 21.35%;
        background-image: url('../images/slide-12/bush.png');
    }
    #slide12-text1 {
        top: 50%;
        left: 4%;
        width: 25%;
        height: 17%;
        padding-top: 1%;
        background-color: #fff;
    }
    #slide12-base {
        top: 87%;
        width: 84.89%;
        height: 4.04%;
        background-image: url('../images/slide-12/base.png');
    }
    #slide12-person1 {
        top: 67.5%;
        left: 150%;
        width: 5.69%;
        height: 22%;
        background-image: url('../images/slide-12/person1.png');
        -webkit-transition: 0.5s left;
        transition:  0.5s left;
    }
    #slide12-person1[animation = '1'] {
        left: 9%;
    }
    #slide12-person2 {
        top: 68%;
        left: 150%;
        width: 6.05%;
        height: 21.42%;
        background-image: url('../images/slide-12/person2.png');
        -webkit-transition: 0.5s left 0.2s;
        transition:  0.5s left 0.2s;
    }
    #slide12-person2[animation = '1'] {
        left: 17%;
    }
    #slide12-person3 {
        top: 67.5%;
        left: 150%;
        width: 6.35%;
        height: 21.58%;
        background-image: url('../images/slide-12/person3.png');
        -webkit-transition: 0.5s left 0.4s;
        transition:  0.5s left 0.4s;
    }
    #slide12-person3[animation = '1'] {
        left: 26%;
    }
    #slide12-person4 {
        top: 68.5%;
        left: 150%;
        width: 7.64%;
        height: 21.19%;
        background-image: url('../images/slide-12/person4.png');
        -webkit-transition: 0.5s left 0.6s;
        transition:  0.5s left 0.6s;
    }
    #slide12-person4[animation = '1'] {
        left: 34%;
    }
    #slide12-person5 {
        top: 67.5%;
        left: 150%;
        width: 7.15%;
        height: 21.91%;
        background-image: url('../images/slide-12/person5.png');
        -webkit-transition: 0.5s left 0.8s;
        transition:  0.5s left 0.8s;
    }
    #slide12-person5[animation = '1'] {
        left: 43%;
    }
    #slide12-person6 {
        top: 68%;
        left: 150%;
        width: 5.93%;
        height: 21.32%;
        background-image: url('../images/slide-12/person6.png');
        -webkit-transition: 0.5s left 1s;
        transition:  0.5s left 1s;
    }
    #slide12-person6[animation = '1'] {
        left: 52%;
    }
    #slide12-person7 {
        top: 69.8%;
        left: 150%;
        width: 6.57%;
        height: 20.25%;
        background-image: url('../images/slide-12/person7.png');
        -webkit-transition: 0.5s left 1.2s;
        transition:  0.5s left 1.2s;
    }
    #slide12-person7[animation = '1'] {
        left: 60%;
    }
    #slide12-person8 {
        top: 70.5%;
        left: 150%;
        width: 8.67%;
        height: 18.75%;
        background-image: url('../images/slide-12/person8.png');
        -webkit-transition: 1s left 1.4s;
        transition:  1s left 1.4s;
    }
    #slide12-person8[animation = '1'] {
        left: 67%;
    }
    #slide12-person9 {
        top: 69.3%;
        left: 150%;
        width: 5.74%;
        height: 19.95%;
        background-image: url('../images/slide-12/person9.png');
        -webkit-transition: 0.5s left 1.6s;
        transition:  0.5s left 1.6s;
    }
    #slide12-person9[animation = '1'] {
        left: 77%;
    }
    #slide12-person10 {
        top: 67.5%;
        left: 150%;
        width: 7.03%;
        height: 21.71%;
        background-image: url('../images/slide-12/person10.png');
        -webkit-transition: 0.5s left 1.8s;
        transition:  0.5s left 1.8s;
    }
    #slide12-person10[animation = '1'] {
        left: 84%;
    }
    #slide12-person1[animation = '2'],#slide12-person2[animation = '2'],#slide12-person3[animation = '2'],#slide12-person4[animation = '2'],#slide12-person5[animation = '2'],
    #slide12-person6[animation = '2'],#slide12-person7[animation = '2'],#slide12-person8[animation = '2'],#slide12-person9[animation = '2'],#slide12-person10[animation = '2']{
        left: -150%;
    }
    #slide12-speech1 {
        top: 49%;
        left: 32%;
        width: 28.47%;
        height: 16.04%;
        padding: 2% 1% 0;
        color: #fff;
        background-image: url('../images/slide-12/speech1.png');
    }
    #slide12-speech1-percent {
        float: left;
        margin-top: 2%;
    }
    #slide12-speech1-text {
        float: right;
        width: 61%;
        text-align: left;
    }
    #slide12-speech2 {
        top: 59%;
        left: 68%;
        width: 12.47%;
        height: 8.46%;
        padding-top: 1%;
        background-image: url('../images/slide-12/speech2.png');
    }
    #slide12-speech3 {
        top: 53%;
        left: 81%;
        width: 11.4%;
        height: 11.82%;
        padding-top: 1%;
        background-image: url('../images/slide-12/speech3.png');
    }
    #slide12-speech4 {
        top: 62%;
        left: 88%;
        width: 8.15%;
        height: 8.2%;
        padding-top: 1%;
        background-image: url('../images/slide-12/speech4.png');
    }

    /*  =========================================================================================================
        Slide 13
        =========================================================================================================
    */

    #slide-13 {
        background: -webkit-linear-gradient(#AEE8F7 0%,#AEE8F7 45.59%,#EFB322 45.59%,#EFB322 100%);
        background: linear-gradient(to bottom, #AEE8F7 0%,#AEE8F7 45.59%,#EFB322 45.59%,#EFB322 100%);
    }
    #slide-13 .section-stage {
        border-top: 1px solid #AEE8F7;
    }
    #slide-13 .main-title {
        width: 76%;
    }
    #slide-13 .main-title[animation = '1'] {
        left: 10%;
    }
    #slide-13 .sub-title {
        width: 42%;
    }
    #slide-13 .sub-title[animation = '1'] {
        left: 28%;
    }
    /*#slide13-preload1 { background-image: url('../images/slide-13/person3.gif'); }*/
    /*#slide13-preload2 { background-image: url('../images/slide-13/person9.gif'); }*/
    /*#slide13-preload3 { background-image: url('../images/slide-13/person10.gif'); }*/
    #slide13-sun {
        top: 9%;
        width: 7.82%;
        height: 10.45%;
        background-image: url('../images/slide-13/sun.png');
    }
    #slide13-cloud1 {
        top: 17%;
        width: 16.89%;
        height: 6.02%;
        background-image: url('../images/slide-13/cloud.png');
    }
    #slide13-cloud2 {
        top: 17%;
        width: 16.89%;
        height: 6.02%;
        background-image: url('../images/slide-13/cloud.png');
    }
    #slide13-forest {
        top: 18.2%;
        width: 118.55%;
        height: 27.28%;
        background-image: url('../images/slide-13/forest.png');
    }
    #slide13-university {
        top: 17%;
        width: 42.48%;
        height: 40.14%;
        background-image: url('../images/slide-13/university.png');
    }

    #slide13-person1 {
        top: 54.5%;
        left: 150%;
        width: 9.79%;
        height: 29.07%;
        background-image: url('../images/slide-13/person1.png');
        -webkit-transition: 0.5s left;
        transition:  0.5s left;
    }
    #slide13-person1[animation = '1'] {
        left: 0%;
    }
    #slide13-person2 {
        top: 56%;
        left: 150%;
        width: 10.55%;
        height: 31.57%;
        background-image: url('../images/slide-13/person2.png');
        -webkit-transition: 0.5s left 0.2s;
        transition:  0.5s left 0.2s;
    }
    #slide13-person2[animation = '1'] {
        left: 10%;
    }
    #slide13-person3 {
        top: 57%;
        left: 150%;
        width: 11.16%;
        height: 26.82%;
        background-image: url('../images/slide-13/person3.png');
        -webkit-transition: 0.5s left 0.4s;
        transition:  0.5s left 0.4s;
    }
    #slide13-person3[animation = '1'] {
        left: 20%;
    }
    #slide13-person4 {
        top: 56.5%;
        left: 150%;
        width: 10.32%;
        height: 31.67%;
        background-image: url('../images/slide-13/person4.png');
        -webkit-transition: 0.5s left 0.6s;
        transition:  0.5s left 0.6s;
    }
    #slide13-person4[animation = '1'] {
        left: 32%;
    }
    #slide13-person5 {
        top: 53%;
        left: 150%;
        width: 9.79%;
        height: 30.17%;
        background-image: url('../images/slide-13/person5.png');
        -webkit-transition: 0.5s left 0.8s;
        transition:  0.5s left 0.8s;
    }
    #slide13-person5[animation = '1'] {
        left: 43%;
    }
    #slide13-person6 {
        top: 56%;
        left: 150%;
        width: 10.13%;
        height: 32.26%;
        background-image: url('../images/slide-13/person6.png');
        -webkit-transition: 0.5s left 1s;
        transition:  0.5s left 1s;
    }
    #slide13-person6[animation = '1'] {
        left: 54%;
    }
    #slide13-person7 {
        top: 51.8%;
        left: 150%;
        width: 9.79%;
        height: 30.5%;
        background-image: url('../images/slide-13/person7.png');
        -webkit-transition: 0.5s left 1.2s;
        transition:  0.5s left 1.2s;
    }
    #slide13-person7[animation = '1'] {
        left: 64%;
    }
    #slide13-person8 {
        top: 58.5%;
        left: 150%;
        width: 9.94%;
        height: 28.84%;
        background-image: url('../images/slide-13/person8.png');
        -webkit-transition: 0.5s left 1.4s;
        transition:  0.5s left 1.4s;
    }
    #slide13-person8[animation = '1'] {
        left: 72.5%;
    }
    #slide13-person9 {
        top: 54%;
        left: 150%;
        width: 8.67%;
        height: 28.12%;
        background-image: url('../images/slide-13/person9.png');
        -webkit-transition: 0.5s left 1.6s;
        transition:  0.5s left 1.6s;
    }
    #slide13-person9[animation = '1'] {
        left: 82%;
    }
    #slide13-person10 {
        top: 56.5%;
        left: 150%;
        width: 10.35%;
        height: 30.6%;
        background-image: url('../images/slide-13/person10.png');
        -webkit-transition: 0.5s left 1.8s;
        transition:  0.5s left 1.8s;
    }
    #slide13-person10[animation = '1'] {
        left: 89%;
    }
    
    #slide13-person1[animation = '2'],#slide13-person2[animation = '2'],#slide13-person3[animation = '2'],#slide13-person4[animation = '2'],#slide13-person5[animation = '2'],
    #slide13-person6[animation = '2'],#slide13-person7[animation = '2'],#slide13-person8[animation = '2'],#slide13-person9[animation = '2'],#slide13-person10[animation = '2']{
        left: -150%;
    }
    #slide13-speech {
        top: 32%;
        left: 6%;
        width: 39.26%;
        height: 20.66%;
        padding: 2% 2% 0;
        color: #fff;
        background-image: url('../images/slide-13/speech.png');
    }
    #slide13-speech-percent {
        float: left;
    }
    #slide13-speech-text {
        float: right;
        width: 45%;
        text-align: left;
    }

    /*  =========================================================================================================
        Slide 14
        =========================================================================================================
    */

    #slide-14 .main-title {
        width: 61%;
    }
    #slide-14 .main-title[animation = '1'] {
        left: 5%;
    }
    #slide-14 .sub-title {
        width: 45%;
    }
    #slide-14 .sub-title[animation = '1'] {
        left: 41%;
    }
    #slide14-preload1 { background-image: url('../images/slide-14/person2.gif'); }
    #slide14-preload2 { background-image: url('../images/slide-14/person4.gif'); }
    #slide14-preload3 { background-image: url('../images/slide-14/person5.gif'); }
    #slide14-library {
        top: 0;
        left: -109%;
        width: 317.82%;
        height: 37.99%;
        background-image: url('../images/slide-14/library.png');
    }
    #slide14-person1 {
        top: 28%;
        left: 150%;
        width: 9.94%;
        height: 21.94%;
        background-image: url('../images/slide-14/person1.png');
    }
    #slide14-thought1 {
        top: 29%;
        left: 20%;
        width: 26.32%;
        height: 16%;
        padding: 2.3% 3% 0;
        background-image: url('../images/slide-14/thought1.png');
        -webkit-transition: 0.3s -webkit-transform 0.6s;
        transition:  0.3s transform 0.6s;
    }
    #slide14-thought1-bubble1 {
        top: 31%;
        left: 14%;
    }
    #slide14-thought1-bubble2 {
        top: 29%;
        left: 15%;
    }
    #slide14-thought1-bubble3 {
        top: 28%;
        left: 17%;
    }
    #slide14-person2 {
        top: 28%;
        left: 150%;
        width: 10.62%;
        height: 22.92%;
        background-image: url('../images/slide-14/person2.png');
    }
    #slide14-person2[animation='1'] {
        background-image: url('../images/slide-14/person2.gif');
    }
    #slide14-speech1 {
        top: 32%;
        left: 56%;
        width: 23.22%;
        height: 13.29%;
        padding: 1% 4.5% 0 1.5%;
        background-image: url('../images/slide-14/speech1.png');
    }
    #slide14-person3 {
        top: 52%;
        left: 150%;
        width: 13.08%;
        height: 20.25%;
        background-image: url('../images/slide-14/person3.png');
    }
    #slide14-thought2 {
        top: 51%;
        left: 20%;
        width: 26.32%;
        height: 16%;
        padding: 2.3% 3% 0;
        background-image: url('../images/slide-14/thought2.png');
        -webkit-transition: 0.3s -webkit-transform 0.6s;
        transition:  0.3s transform 0.6s;
    }
    #slide14-thought2-bubble1 {
        top: 53%;
        left: 11.5%;
    }
    #slide14-thought2-bubble2 {
        top: 51%;
        left: 14%;
    }
    #slide14-thought2-bubble3 {
        top: 51%;
        left: 17%;
    }
    #slide14-person4 {
        top: 53%;
        left: 150%;
        width: 11.64%;
        height: 18.36%;
        background-image: url('../images/slide-14/person4.png');
    }
    #slide14-person4[animation='1'] {
        background-image: url('../images/slide-14/person4.gif');
    }
    #slide14-speech2 {
        top: 54%;
        left: 56%;
        width: 23.22%;
        height: 13.45%;
        padding: 1% 4.5% 0 1.5%;
        background-image: url('../images/slide-14/speech2.png');
    }
    #slide14-person5 {
        top: 75%;
        left: 150%;
        width: 13.62%;
        height: 18.2%;
        background-image: url('../images/slide-14/person5.png');
    }
    #slide14-person5[animation='1'] {
        background-image: url('../images/slide-14/person5.gif');
    }
    #slide14-thought3 {
        top: 73%;
        left: 20%;
        width: 26.32%;
        height: 12.61%;
        padding: 2% 3% 0;
        background-image: url('../images/slide-14/thought3.png');
        -webkit-transition: 0.3s -webkit-transform 0.6s;
        transition:  0.3s transform 0.6s;
    }
    #slide14-thought3-bubble1 {
        top: 77%;
        left: 14%;
    }
    #slide14-thought3-bubble2 {
        top: 75%;
        left: 15%;
    }
    #slide14-thought3-bubble3 {
        top: 74%;
        left: 17%;
    }
    #slide14-person6 {
        top: 71%;
        left: 150%;
        width: 10.5%;
        height: 21.61%;
        background-image: url('../images/slide-14/person6.png');
        /*-webkit-transition: 1s left;*/
        /*transition:  1s left;*/
    }
    #slide14-person6[animation = '1'] {
        left: 86%;
    }
    #slide14-speech3 {
        top: 75%;
        left: 56%;
        width: 23.22%;
        height: 13.45%;
        padding: 1% 4.5% 0 1.5%;
        background-image: url('../images/slide-14/speech3.png');
    }
    #slide14-speech1 .bar, #slide14-speech2 .bar, #slide14-speech3 .bar {
        height: 30%;
        margin: 3% 0;
        background-color: #131E1F;
    }
    #slide14-speech1 .bar div, #slide14-speech2 .bar div, #slide14-speech3 .bar div {
        float: left;
        height: 100%;
        width: 0%;
        background-color: #5BC2E7;
        -webkit-transition: 0.3s width 0.3s;
        transition:  0.3s width 0.3s;
    }
    #slide14-speech1 span, #slide14-speech2 span, #slide14-speech3 span {
        float: left;
        margin: 1% 0 0 5%;
        color: #fff;
        opacity: 0;
        -webkit-transition: 0.3s opacity 0.6s;
        transition:  0.3s opacity 0.6s;
    }
    #slide14-speech1[animation = '1'] .bar span, #slide14-speech2[animation = '1'] .bar span, #slide14-speech3[animation = '1'] .bar span {
        opacity: 1;
    }
    #slide14-speech1[animation = '1'] .bar div {
        width: 19%;
    }
    #slide14-speech2[animation = '1'] .bar div {
        width: 40%;
    }
    #slide14-speech3[animation = '1'] .bar div {
        width: 25%;
    }

    /*  =========================================================================================================
        Slide 15
        =========================================================================================================
    */

    #slide-15 {
        background: -webkit-linear-gradient(#AEE8F7 0%,#AEE8F7 52.57%,#EAC600 52.57%,#EAC600 63.97%, #EFB322 63.97%,#EFB322 70.59%, #EAC600 70.59%,#EAC600 83.45%,#EFB322 83.45%,#EFB322 100%);
        background: linear-gradient(to bottom, #AEE8F7 0%,#AEE8F7 52.57%,#EAC600 52.57%,#EAC600 63.97%, #EFB322 63.97%,#EFB322 70.59%, #EAC600 70.59%,#EAC600 83.45%,#EFB322 83.45%,#EFB322 100%);
    }
    #slide-15 .section-stage {
        border-top: 1px solid #AEE8F7;
    }
    #slide-15 .main-title {
        width: 48%;
    }
    #slide-15 .main-title[animation = '1'] {
        left: 7%;
    }
    #slide-15 .sub-title {
        width: 37%;
        top: 6%;
    }
    #slide-15 .sub-title[animation = '1'] {
        left: 57%;
    }
    #slide15-preload1 { background-image: url('../images/slide-15/fountain.gif'); }
    #slide15-sun {
        top: 1%;
        width: 7.79%;
        height: 10.38%;
        background-image: url('../images/slide-15/sun.png');
    }
    #slide15-cloud1 {
        top: 1%;
        width: 19.84%;
        height: 7.05%;
        background-image: url('../images/slide-15/cloud.png');
    }
    #slide15-cloud2 {
        top: 13%;
        width: 29.76%;
        height: 10.58%;
        background-image: url('../images/slide-15/cloud.png');
    }
    #slide15-forest {
        top: 28%;
        width: 121.34%;
        height: 24.67%;
        background-image: url('../images/slide-15/forest.png');
    }
    #slide15-fountain {
        top: 22%;
        width: 18.36%;
        height: 39.48%;
        background-image: url('../images/slide-15/fountain.png');
    }
    #slide15-fountain[animation='1'] {
        background-image: url('../images/slide-15/fountain.gif');
    }
    #slide15-bush1 {
        top: 57.6%;
        width: 15.36%;
        height: 6.18%;
        background-image: url('../images/slide-15/bush1.png');
    }
    #slide15-bush2 {
        top: 55.5%;
        width: 23.46%;
        height: 8.3%;
        background-image: url('../images/slide-15/bush2.png');
    }
    #slide15-man {
        top: 38.5%;
        width: 11.18%;
        height: 29.88%;
        background-image: url('../images/slide-15/man.png');
    }
    #slide15-couple {
        top: 38.5%;
        width: 17.97%;
        height: 29.91%;
        background-image: url('../images/slide-15/couple.png');
    }
    #slide15-bush3 {
        top: 67.5%;
        width: 41.8%;
        height: 16.01%;
        background-image: url('../images/slide-15/bush3.png');
    }
    #slide15-base {
        top: 86%;
        width: 48.78%;
        height: 3.64%;
        background-image: url('../images/slide-15/base.png');
    }
    #slide15-pram {
        top: 40.8%;
        width: 28.54%;
        height: 47.26%;
        background-image: url('../images/slide-15/pram.png');
    }
    #slide15-dogger {
        top: 39%;
        width: 37.11%;
        height: 49.38%;
        background-image: url('../images/slide-15/dogger.png');
    }
    #slide15-dog {
        top: 76.5%;
        width: 27.66%;
        height: 13.05%;
        background-image: url('../images/slide-15/dog.png');
    }

    #slide15-tagline {
        width: 540px;
        background: #000;
        color: #fff;
        position: absolute;
        top: 17%;
        left: 150%;
        z-index: 1;
        padding: 1.5%;
        -webkit-transition: left 0.3s;
        transition: left 0.3s;
    }

    #slide15-thought1 {
        top: 17%;
        left: 5%;
        width: 25.96%;
        height: 20.04%;
        padding: 3.4% 3% 0;
        z-index: 2;
        background-image: url('../images/slide-15/thought1.png');
        -webkit-transition: 0.3s -webkit-transform 0.6s;
        transition:  0.3s transform 0.6s;
    }
    #slide15-thought1-bubble1 {
        top: 47%;
        left: 17%;
    }
    #slide15-thought1-bubble2 {
        top: 46%;
        left: 19%;
    }
    #slide15-thought1-bubble3 {
        top: 43%;
        left: 21%;
    }
    #slide15-speech1 {
        top: 60%;
        left: 14%;
        width: 9.87%;
        height: 24.88%;
        padding: 1% 4.5% 0 1.5%;
        background-image: url('../images/slide-15/speech1.png');
        -webkit-transition: 0.3s -webkit-transform;
        transition:  0.3s transform;
    }
    #slide15-thought2 {
        top: 19.5%;
        left: 64%;
        width: 28.91%;
        height: 16.31%;
        padding: 3% 3% 0.5%;
        z-index: 1;
        background-image: url('../images/slide-15/thought2.png');
        -webkit-transition: 0.3s -webkit-transform 0.6s;
        transition:  0.3s transform 0.6s;
    }
    #slide15-thought2-bubble1 {
        top: 47%;
        left: 74%;
    }
    #slide15-thought2-bubble2 {
        top: 46%;
        left: 76%;
    }
    #slide15-thought2-bubble3 {
        top: 43%;
        left: 78%;
    }
    #slide15-speech2 {
        top: 54%;
        left: 74%;
        width: 9.27%;
        height: 25.66%;
        padding: 5% 1.5% 0%;
        background-image: url('../images/slide-15/speech2.png');
        -webkit-transition: 0.3s -webkit-transform;
        transition:  0.3s transform;
    }
    #slide15-doughnut1 .doughnut-container, #slide15-doughnut2 .doughnut-container {
        margin: 6% 0;
    }

    /*  =========================================================================================================
        Slide 16
        =========================================================================================================
    */

    #slide-16 {
        background: -webkit-linear-gradient(#AEE8F7 0%,#AEE8F7 65.07%,#83C411 65.07%,#83C411 100%);
        background: linear-gradient(to bottom, #AEE8F7 0%,#AEE8F7 65.07%,#83C411 65.07%,#83C411 100%);
    }
    #slide-16 .section-stage {
        border-top: 1px solid #AEE8F7;
    }
    #slide-16 .main-title {
        width: 72%;
    }
    #slide-16 .main-title[animation = '1'] {
        left: 5%;
    }
    #slide-16 .sub-title {
        width: 25%;
    }
    #slide-16 .sub-title[animation = '1'] {
        left: 69%;
    }
    #slide16-preload1 { background-image: url('../images/slide-16/building1.gif'); }
    #slide16-preload2 { background-image: url('../images/slide-16/building2.gif'); }
    #slide16-preload3 { background-image: url('../images/slide-16/building4.gif'); }
    #slide16-cloud1 {
        top: 16%;
        width: 24.54%;
        height: 8.72%;
        background-image: url('../images/slide-16/cloud1.png');
    }
    #slide16-cloud2 {
        top: 23%;
        width: 24.54%;
        height: 8.72%;
        background-image: url('../images/slide-16/cloud2.png');
    }
    #slide16-dunes {
        top: 57.1%;
        width: 124.05%;
        height: 7.87%;
        background-image: url('../images/slide-16/dunes.png');
    }
    #slide16-building1 {
        top: 33%;
        width: 26.68%;
        height: 49.41%;
        background-image: url('../images/slide-16/building1.png');
    }
    #slide16-building1[animation='1'] {
        background-image: url('../images/slide-16/building1.gif');
    }
    #slide16-label1 {
        position: absolute;
        top: 81%;
        left: 9.5%;
    }
    #slide16-building2 {
        top: 40.5%;
        width: 19.51%;
        height: 37.66%;
        background-image: url('../images/slide-16/building2.png');
    }
    #slide16-building2[animation='1'] {
        background-image: url('../images/slide-16/building2.gif');
    }
    #slide16-label2 {
        position: absolute;
        top: 81%;
        left: 34%;
    }
    #slide16-building3 {
        top: 58%;
        width: 18.65%;
        height: 24.15%;
        background-image: url('../images/slide-16/building3.png');
    }
    #slide16-label3 {
        position: absolute;
        top: 81%;
        left: 53.5%;
    }
    #slide16-building4 {
        top: 37%;
        width: 17.99%;
        height: 44.04%;
        background-image: url('../images/slide-16/building4.png');
    }
    #slide16-building4[animation='1'] {
        background-image: url('../images/slide-16/building4.gif');
    }
    #slide16-label4 {
        position: absolute;
        top: 81%;
        left: 72%;
    }
    #slide16-building5 {
        top: 40%;
        width: 12.18%;
        height: 37.86%;
        background-image: url('../images/slide-16/building5.png');
    }
    #slide16-label5 {
        position: absolute;
        top: 81%;
        left: 90%;
    }
    #slide16-thought1 {
        top: 19%;
        left: 23%;
        width: 9.26%;
        height: 18.23%;
        padding: 4% 4% 0;
        background-image: url('../images/slide-16/thought.png');
        -webkit-transition: 0.3s -webkit-transform;
        transition:  0.3s transform;
    }
    #slide16-thought1-bubble1 {
        left: 24%;
        top: 51%;
    }
    #slide16-thought1-bubble2 {
        left: 26%;
        top: 50%;
    }
    #slide16-thought1-bubble3 {
        left: 28%;
        top: 48%;
    }
    #slide16-thought1-bubble4 {
        left: 29%;
        top: 43%;
    }
    #slide16-thought2 {
        top: 21%;
        left: 47%;
        width: 9.24%;
        height: 18.98%;
        padding: 4% 4% 0;
        background-image: url('../images/slide-16/thought.png');
        -webkit-transition: 0.3s -webkit-transform;
        transition:  0.3s transform;
    }
    #slide16-thought2-bubble1 {
        left: 49%;
        top: 55%;
    }
    #slide16-thought2-bubble2 {
        left: 51.5%;
        top: 54%;
    }
    #slide16-thought2-bubble3 {
        left: 54%;
        top: 51.5%;
    }
    #slide16-thought2-bubble4 {
        left: 54%;
        top: 46%;
    }
    #slide16-thought3 {
        top: 23%;
        left: 44%;
        width: 10.57%;
        height: 18.23%;
        padding: 4% 3% 0;
        background-image: url('../images/slide-16/thought.png');
        -webkit-transition: 0.3s -webkit-transform;
        transition:  0.3s transform;
    }
    #slide16-thought3-bubble1 {
        left: 53%;
        top: 59%;
    }
    #slide16-thought3-bubble2 {
        left: 52%;
        top: 56%;
    }
    #slide16-thought3-bubble3 {
        left: 51%;
        top: 52%;
    }
    #slide16-thought3-bubble4 {
        left: 50%;
        top: 47%;
    }
    #slide16-thought4 {
        top: 19%;
        left: 52%;
        width: 10.38%;
        height: 15.17%;
        padding: 4% 2% 0;
        background-image: url('../images/slide-16/thought.png');
        -webkit-transition: 0.3s -webkit-transform;
        transition:  0.3s transform;
    }
    #slide16-thought4-bubble1 {
        left: 68%;
        top: 47%;
    }
    #slide16-thought4-bubble2 {
        left: 65%;
        top: 46%;
    }
    #slide16-thought4-bubble3 {
        left: 62%;
        top: 44%;
    }
    #slide16-thought4-bubble4 {
        left: 59%;
        top: 40%;
    }
    #slide16-thought5 {
        top: 24%;
        left: 76%;
        width: 6.38%;
        height: 15.17%;
        padding: 4% 4% 0;
        background-image: url('../images/slide-16/thought.png');
        -webkit-transition: 0.3s -webkit-transform;
        transition:  0.3s transform;
    }
    #slide16-thought5-bubble1 {
        left: 86%;
        top: 52%;
    }
    #slide16-thought5-bubble2 {
        left: 84.5%;
        top: 50%;
    }
    #slide16-thought5-bubble3 {
        left: 83%;
        top: 46%;
    }
    #slide-16 .thought-bubble1[animation="1"] {
        -webkit-animation: 0.15s popAnimation forwards;
        animation: 0.15s popAnimation forwards;
    }
    #slide-16 .thought-bubble2[animation="1"] {
        -webkit-animation: 0.15s popAnimation forwards;
        animation: 0.15s popAnimation forwards;
    }
    #slide-16 .thought-bubble3[animation="1"] {
        -webkit-animation: 0.15s popAnimation forwards;
        animation: 0.15s popAnimation forwards;
    }
    #slide-16 .thought-bubble4[animation="1"] {
        -webkit-animation: 0.15s popAnimation forwards;
        animation: 0.15s popAnimation forwards;
    }

    /*  =========================================================================================================
        Slide 17
        =========================================================================================================
    */

    #slide-17 .main-title {
        width: 43%;
    }
    #slide-17 .main-title[animation = '1'] {
        left: 11%;
    }
    #slide-17 .sub-title {
        width: 25%;
        top: 6%;
    }
    #slide-17 .sub-title[animation = '1'] {
        left: 56%;
    }
    #slide17-preload1 { background-image: url('../images/slide-17/ice-cream.gif'); }
    #slide17-preload2 { background-image: url('../images/slide-17/people1.gif'); }
    #slide17-preload3 { background-image: url('../images/slide-17/people2.gif'); }
    #slide17-preload4 { background-image: url('../images/slide-17/people3.gif'); }

    #slide17-background {
        top: 0%;
        left: -45%;
        width: 189.65%;
        height: 62.79%;
        background-image: url('../images/slide-17/background.png');
    }
    #slide17-picture {
        top: 20%;
        width: 18.29%;
        height: 34.37%;
        background-image: url('../images/slide-17/picture.png');
    }
    #slide17-ice-cream {
        top: 33.2%;
        width: 51.78%;
        height: 29.69%;
        background-image: url('../images/slide-17/ice-cream.png');
    }
    #slide17-ice-cream[animation='1'] {
        background-image: url('../images/slide-17/ice-cream.gif');
    }
    #slide17-light1 {
        top: -45%;
        left: 40%;
        width: 9.94%;
        height: 40.2%;
        background-image: url('../images/slide-17/light.png');
        -webkit-transition: 0.3s top;
        transition:  0.3s top;
    }
    #slide17-light2 {
        top: -45%;
        left: 80%;
        width: 9.94%;
        height: 40.2%;
        background-image: url('../images/slide-17/light.png');
        -webkit-transition: 0.3s top 0.2s;
        transition:  0.3s top 0.2s;
    }
    #slide17-light1[animation = '1'], #slide17-light2[animation = '1'] {
        top: 0%;
    }
    #slide17-people1 {
        top: 51%;
        width: 29.56%;
        height: 36.78%;
        background-image: url('../images/slide-17/people1.png');
    }
    #slide17-people1[animation='1'] {
        background-image: url('../images/slide-17/people1.gif');
    }
    #slide17-people2 {
        top: 51%;
        width: 29.9%;
        height: 41.83%;
        background-image: url('../images/slide-17/people2.png');
    }
    #slide17-people2[animation='1'] {
        background-image: url('../images/slide-17/people2.gif');
    }
    #slide17-people3 {
        top: 53%;
        width: 32.91%;
        height: 35.94%;
        background-image: url('../images/slide-17/people3.png');
    }
    #slide17-people3[animation='1'] {
        background-image: url('../images/slide-17/people3.gif');
    }
    #slide17-speech1 {
        top: 15%;
        left: 48%;
        width: 16.31%;
        height: 16.28%;
        padding: 4% 2% 0%;
        background-image: url('../images/slide-17/speech1.png');
    }
    #slide17-speech2 {
        top: 55%;
        left: 59%;
        width: 11.06%;
        height: 12.27%;
        background-image: url('../images/slide-17/speech2.png');
    }
    #slide17-speech3 {
        top: 28%;
        left: 24%;
        width: 8.28%;
        height: 17.33%;
        padding: 2% 4% 0%;
        background-image: url('../images/slide-17/speech3.png');
    }
    #slide17-speech4 {
        top: 71%;
        left: 59%;
        width: 9.69%;
        height: 12.27%;
        background-image: url('../images/slide-17/speech4.png');
    }
    #slide17-speech5 {
        top: 70%;
        left: 20%;
        width: 8.87%;
        height: 17.49%;
        padding: 3% 4% 0%;
        background-image: url('../images/slide-17/speech5.png');
    }
    #slide17-speech6 {
        top: 44%;
        left: 12%;
        width: 9.2%;
        height: 13.02%;
        background-image: url('../images/slide-17/speech6.png');
    }
    #slide17-speech7 {
        top: 25%;
        left: 70%;
        width: 22.84%;
        height: 24.73%;
        padding: 4% 6% 0%;
        background-image: url('../images/slide-17/speech7.png');
    }
    #slide17-screen {
        top: 8%;
        width: 52%;
        height: 71.02%;
        padding: 10% 7% 0;
        box-sizing: content-box;
        background-image: url('../images/slide-17/screen.png');
        color: #fff;
    }
    #slide-17 span {
        display: inline-block;
    }
    #slide-17 .link {
        display: block;
        position: relative;
        clear: both;
        width: 92%;
        background-color: #EF2999;
        color: #fff;
        padding: 3% 10% 3% 1%;
        margin-top: 7%;
        text-decoration: none;
        font-size: 16px;
    }
    #slide-17 .link div {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 11%;
        background: url('../images/slide-17/button.png') no-repeat center / 100% 100%;
    }
    #slide17-logo1 {
        top: 63%;
        left: 26%;
        width: 2.52%;
        height: 2.73%;
        background-image: url('../images/slide-17/twitter.png');
    }
    #slide17-logo-text {
        position: absolute;
        top: 62.5%;
        left: 30%;
        width: 10%;
        height: 2.73%;
        text-align: left;
        color: #fff;
        font-size: 16px;
    }
    #slide17-logo2 {
        top: 61%;
        left: 49%;
        width: 8.03%;
        height: 7.13%;
        background-image: url('../images/splash-screen/rsc-logo.png');
    }
    #slide17-logo3 {
        top: 63%;
        left: 59%;
        width: 14.43%;
        height: 3.32%;
        background-image: url('../images/splash-screen/chemistry-logo.png');
    }
    .text-size-extra-large #slide-17 .speech.text-body1 {
        font-size: 27px; letter-spacing: 0px; line-height: 29px;
    }
}



/*  ============================================================================================================
    Larger Desktop Styles  ********************************************************************************************
    ************************************************************************************************************
    ============================================================================================================
*/
@media only screen and (min-width: 1026px) {
#slide5-speech2 .speech-text {
    float: right;
    width: 50%;
    padding: 18% 2% 5%;
    text-align: left;
}
}