<html>

<head>
    <meta name="google-site-verification" content="HQOBI5omPHdGR-JLZx3P0NKfCgk7j6KhA6nXpZaQ7PQ" />
    <title>GoPlayDOT</title>
    <script>var page_id="front"</script>
    <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script><link href="https://fonts.googleapis.com/css?family=Encode+Sans+Condensed:200,400" rel="stylesheet"><link rel="shortcut icon" type="image/png" href="https://s3.eu-central-1.amazonaws.com/goplaydot-www-files/app_logo_favicon_2017_48x48.png"/><script type='text/javascript'>jQuery(document).ready(function () {

    /**
     * The animated userinterface object for this website.
     * Written 2017 by Nicolas Kristoffersen, +45 2022 0044, nk@nicolaskristoffersen.com
     * Content can be reused for free. Please send me an email, if you do, and state source in your own code.
     */
    var animatedUserInterface = function () {

        // The calculated pixel width in meters
        // This is not an exact value but serves as a decision point and guidance
        var calculatedPixelWidth;

        // The calculated pixel height in meters
        // This is not an exact value but serves as a decision point and guidance
        var calculatedPixelHeight;

        // The calculated window width in meters
        // This is not an exact value but serves as a decision point and guidance
        var calculatedWindowWidth;

        // The calculate window height in meters
        // This is not an exact value but serves as a decision point and guidance
        var calculatedWindowHeight;

        // The calculated window width in pixels
        // This is adjusted for zoom and orientation
        var calculatedwindowWidthInPixels;

        var intro;
        var menu;
        var logo;
        var physicalExercise;
        var air;
        var social;
        var learning;
        var getStarted;
        var next;
        var trainingIntro;
        var trainingDo;
        var howIntro;
        var howInstall;
        var howDo;
        var howWhat;
        var howRules;
        var whereIntro;
        var whereOfficial;
        var whereAutomatic;
        var productsIntro;
        var productsOfficialPlayingField;
        var productsPosters;
        var productsPowerBank;
        var productsGloves;
        var productsTeaching;
        var fieldIntro;
        var loginIntro;
        var gameIntro;

        /**
         * Run all js in this object
         */
        var initialize = function () {
            updateDimensions();

            // Initialize the objects
            logo = new Logo();
            menu = new Menu();

            logo.update();
            menu.update();

            if (page_id == "front") {
                intro = new Intro();
                physicalExercise = new PhysicalExercise();
                air = new Air();
                social = new Social();
                learning = new Learning();
                getStarted = new GetStarted();
                next = new Next();

                physicalExercise.scroll();
                physicalExercise.update();
                intro.update();
                air.update();
                air.scroll();
                social.update();
                social.scroll();
                learning.update();
                learning.scroll();
                getStarted.update();
                getStarted.scroll();
                next.update();
                next.scroll();
            }
            else if (page_id == "how") {
                howIntro = new HowIntro();
                howInstall = new HowInstall();
                howDo = new HowDo();
                howWhat = new HowWhat();
                howRules = new HowRules();
                howIntro.update();
                howInstall.scroll();
                howInstall.update();
                howDo.scroll();
                howDo.update();
                howWhat.scroll();
                howWhat.update();
                howRules.scroll();
                howRules.update();
            }
            else if (page_id == "training") {
                next = new Next();

                trainingIntro = new TrainingIntro();
                trainingDo = new TrainingDo();
                trainingIntro.update();
                trainingDo.scroll();
                trainingDo.update();
                next.update();
                next.scroll();
            }
            else if (page_id == "where") {
                whereIntro = new WhereIntro();
                whereIntro.update();
                whereOfficial = new WhereOfficial();
                whereOfficial.scroll();
                whereOfficial.update();
                whereAutomatic = new WhereAutomatic();
                whereAutomatic.scroll();
                whereAutomatic.update();
            }
            else if (page_id == "field") {
                fieldIntro = new FieldIntro();
                fieldIntro.update();
            }
            else if (page_id == "login") {
                loginIntro = new LoginIntro();
                loginIntro.update();
            }
            else if (page_id == "login") {
                loginIntro = new LoginIntro();
                loginIntro.update();
            }
            else if (page_id == "products") {
                productsIntro = new ProductsIntro();
                productsIntro.update();
                productsOfficialPlayingField = new ProductsOfficialPlayingField();
                productsOfficialPlayingField.update();
                productsOfficialPlayingField.scroll();
                productsPosters = new ProductsPosters();
                productsPosters.update();
                productsPosters.scroll();
                productsPowerBank = new ProductsPowerBank();
                productsPowerBank.update();
                productsPowerBank.scroll();
                productsGloves = new ProductsGloves();
                productsGloves.update();
                productsGloves.scroll();
                productsTeaching = new ProductsTeaching();
                productsTeaching.update();
                productsTeaching.scroll();
            }

            // Add handler for scroll
            jQuery(window).scroll(scroll);
            jQuery(window).resize(resize);
            jQuery(window).imagesLoaded(imagesLoaded);
        };

        var imagesLoaded = function()
        {
            scroll();
            resize();
        };

        var scroll = function () {
            updateDimensions();

            menu.update();
            logo.update();

            if (page_id == "front") {
                physicalExercise.scroll();
                air.scroll();
                social.scroll();
                learning.scroll();
                getStarted.scroll();
                next.scroll();
            }
            else if (page_id == "how") {
                howInstall.scroll();
                howDo.scroll();
                howWhat.scroll();
                howRules.scroll();
            }
            else if (page_id == "training") {
                trainingDo.scroll();
                next.scroll();
            }
            else if (page_id == "where") {
                whereOfficial.scroll();
                whereAutomatic.scroll();
            }
            else if (page_id == "products") {
                productsOfficialPlayingField.scroll();
                productsPosters.scroll();
                productsPowerBank.scroll();
                productsGloves.scroll();
                productsTeaching.scroll();
            }
        };

        var resize = function () {
            updateDimensions();

            logo.update();
            menu.update();
            if (page_id == "front") {

                intro.update();
                physicalExercise.update();
                air.update();
                social.update();
                learning.update();
                getStarted.update();
                next.update();
            }
            else if (page_id == "how") {
                howIntro.update();
                howInstall.update();
                howDo.update();
                howWhat.update();
                howRules.update();
            }
            else if (page_id == "training") {
                trainingIntro.update();
                trainingDo.update();
                next.update();
            }
            else if (page_id == "where") {
                whereIntro.update();
                whereOfficial.update();
                whereAutomatic.update();
            }
            else if (page_id == "field") {
                fieldIntro.update();
            }
            else if (page_id == "login") {
                loginIntro.update();
            }
            else if (page_id == "products") {
                productsIntro.update();
                productsOfficialPlayingField.update();
                productsPosters.update();
                productsPowerBank.update();
                productsGloves.update();
                productsTeaching.update();
            }
        };

        var Social = function () {
            // Name of the section
            const section = "#social";
            const box = ".transparent_box";

            // Fade in when scrolling in
            this.scroll = function () {

                var currentScrollTop = jQuery(document).scrollTop();
                var positionTop = jQuery(section + " " + box).offset().top;
                var positionFromBottomOfWindow = (currentScrollTop + window.innerHeight) - positionTop;
                var heightOfBox = jQuery(section + " " + box).css("height");
                heightOfBox = heightOfBox.replace("px", "");
                if (positionFromBottomOfWindow > 0) {
                    var percentage = positionFromBottomOfWindow / (heightOfBox * 1.5);
                    if (percentage > 1) percentage = 1;
                    jQuery(section + " " + box).css('opacity', percentage * 1);
                }

            };

            this.update = function () {

                var boxWidth;
                var marginLeftString;
                var marginRightString;
                var fontSizeH1;
                var fontSizeP;
                var textMargin;

                if (marginRight <= marginLeft || calculatedWindowWidth < 0.12) {
                    // Mobile
                    boxWidth = window.innerWidth * 0.8;
                    var marginRight = window.innerWidth * 0.1;
                    var marginLeft = marginRight;
                    fontSizeH1 = window.innerWidth * 0.1;
                    fontSizeP = fontSizeH1 * 0.4;
                    textMargin = window.innerWidth * 0.05;
                    marginLeftString = marginLeft + "px";
                    marginRightString = marginRight + "px";
                }
                else {
                    // Desktop
                    boxWidth = calculatedWidthInPixels(0.09);
                    var marginLeft = calculatedWidthInPixels(0.03);
                    fontSizeH1 = calculatedWindowWidth * 0.03 / calculatedPixelWidth;
                    fontSizeP = fontSizeH1 * 0.5;
                    textMargin = window.innerWidth * 0.03;
                    marginRightString = "auto";
                    marginLeftString = marginRight + "px";
                }

                var sectionElement = jQuery(section);
                var boxElement = jQuery(section + " " + box);
                var pElement = jQuery(section + " " + box + " p");
                var h1Element = jQuery(section + " " + box + " h1");

                boxElement.css("margin-left", marginLeftString);
                boxElement.css("margin-right", marginRightString);
                boxElement.css("width", boxWidth + "px");

                pElement.css("margin-left", textMargin + "px");
                pElement.css("margin-right", textMargin + "px");
                pElement.css("margin-bottom", textMargin + "px");
                pElement.css("font-size", fontSizeP + "px");

                h1Element.css("margin-left", textMargin + "px");
                h1Element.css("margin-right", textMargin + "px");
                h1Element.css("font-size", fontSizeH1 + "px");

                var sectionHeight = sectionElement.height();
                var minimumHeight = window.innerHeight / 2.2;
                if (sectionHeight<minimumHeight)
                {
                    sectionHeight = minimumHeight;
                    sectionElement.height(sectionHeight);
                }

                var boxHeight = boxElement.height();
                var boxMarginTop = (sectionHeight/2)-(boxHeight/2);
                boxElement.css ("margin-top", boxMarginTop+"px");

            }
        };

        var HowDo = function () {
            // Name of the section
            const section = "#how_do";
            const box = ".transparent_box"

            // Fade in when scrolling in
            this.scroll = function () {

                var currentScrollTop = jQuery(document).scrollTop();
                var positionTop = jQuery(section + " " + box).offset().top;
                var positionFromBottomOfWindow = (currentScrollTop + window.innerHeight) - positionTop;
                var heightOfBox = jQuery(section + " " + box).css("height");
                heightOfBox = heightOfBox.replace("px", "");
                if (positionFromBottomOfWindow > 0) {
                    var percentage = positionFromBottomOfWindow / (heightOfBox * 1.5);
                    if (percentage > 1) percentage = 1;
                    jQuery(section + " " + box).css('opacity', percentage * 1);
                }

            };

            this.update = function () {

                var boxWidth;
                var marginLeftString;
                var marginRightString;
                var fontSizeH1;
                var fontSizeP;
                var textMargin;

                if (marginRight <= marginLeft || calculatedWindowWidth < 0.12) {
                    // Mobile
                    boxWidth = window.innerWidth * 0.9;
                    var marginRight = window.innerWidth * 0.05;
                    var marginLeft = marginRight;
                    fontSizeH1 = window.innerWidth * 0.08;
                    fontSizeP = fontSizeH1 * 0.4;
                    textMargin = window.innerWidth * 0.05;
                    marginLeftString = marginLeft + "px";
                    marginRightString = marginRight + "px";
                }
                else {
                    // Desktop
                    boxWidth = calculatedWidthInPixels(0.09);
                    var marginLeft = calculatedWidthInPixels(0.01);
                    fontSizeH1 = calculatedWindowWidth * 0.03 / calculatedPixelWidth;
                    fontSizeP = fontSizeH1 * 0.6;
                    textMargin = window.innerWidth * 0.03;
                    marginRightString = "auto";
                    marginLeftString = marginLeft + "px";
                }

                var boxElement = jQuery(section + " " + box);
                var textElement = jQuery(section + " " + box + " .text");
                var pElement = jQuery(section + " " + box + " p");
                var h1Element = jQuery(section + " " + box + " h1");

                boxElement.css("margin-left", marginLeftString);
                boxElement.css("margin-right", marginRightString);
                boxElement.css("width", boxWidth + "px");
                boxElement.css("margin-top", fontSizeP + "px");
                boxElement.css("margin-bottom", fontSizeP + "px");

                textElement.css("padding-top", fontSizeP + "px");
                textElement.css("padding-bottom", fontSizeP + "px");
                textElement.css("text-align", "left");

                pElement.css("margin-left", textMargin + "px");
                pElement.css("margin-right", textMargin + "px");
                pElement.css("margin-bottom", textMargin + "px");
                pElement.css("font-size", fontSizeP + "px");
                pElement.css("margin-top", "10px");
                pElement.css("margin-bottom", "0px");

                h1Element.css("margin-left", textMargin + "px");
                h1Element.css("margin-right", textMargin + "px");
                h1Element.css("font-size", fontSizeH1 + "px");
                h1Element.css("margin-top", "0px");
                h1Element.css("margin-bottom", "0px");

            }
        };
        var TrainingDo = function () {
            // Name of the section
            const section = "#training_do";
            const box = ".transparent_box"

            // Fade in when scrolling in
            this.scroll = function () {

                var currentScrollTop = jQuery(document).scrollTop();
                var positionTop = jQuery(section + " " + box).offset().top;
                var positionFromBottomOfWindow = (currentScrollTop + window.innerHeight) - positionTop;
                var heightOfBox = jQuery(section + " " + box).css("height");
                heightOfBox = heightOfBox.replace("px", "");
                if (positionFromBottomOfWindow > -500) {
                    var percentage = positionFromBottomOfWindow / (heightOfBox * 0.5);
                    if (percentage > 1) percentage = 1;
                    jQuery(section + " " + box).css('opacity', percentage * 0.8);
                }

            };

            this.update = function () {

                var boxWidth;
                var marginLeftString;
                var marginRightString;
                var fontSizeH1;
                var fontSizeP;
                var textMargin;

                if (marginRight <= marginLeft || calculatedWindowWidth < 0.12) {
                    // Mobile
                    boxWidth = window.innerWidth * 0.9;
                    var marginRight = window.innerWidth * 0.05;
                    var marginLeft = marginRight;
                    fontSizeH1 = window.innerWidth * 0.1;
                    fontSizeP = fontSizeH1 * 0.4;
                    textMargin = window.innerWidth * 0.05;
                    marginLeftString = marginLeft + "px";
                    marginRightString = marginRight + "px";
                }
                else {
                    // Desktop
                    boxWidth = calculatedWidthInPixels(0.26);
                    var marginRight = calculatedWidthInPixels(0.03);
                    var marginLeft = window.innerWidth - boxWidth - marginRight;
                    var fontSizeH1 = calculatedWindowWidth * 0.03 / calculatedPixelWidth;
                    var fontSizeP = fontSizeH1 * 0.4;
                    textMargin = window.innerWidth * 0.026;
                    marginRightString = "auto";
                    marginLeftString = marginLeft + "px";
                }

                var boxElement = jQuery(section + " " + box);
                var textElement = jQuery(section + " " + box + " .text");
                var pElement = jQuery(section + " " + box + " li");
                var h1Element = jQuery(section + " " + box + " h1");

                boxElement.css("margin-left", marginLeftString);
                boxElement.css("margin-right", marginRightString);
                boxElement.css("width", boxWidth + "px");
                boxElement.css("margin-top", fontSizeH1 + "px");
                boxElement.css("margin-bottom", fontSizeH1 + "px");
                boxElement.css("text-align", "left");

                textElement.css("padding-top", fontSizeP + "px");
                textElement.css("padding-bottom", fontSizeP + "px");

                pElement.css("margin-left", textMargin + "px");
                pElement.css("margin-right", textMargin + "px");
                pElement.css("margin-bottom", textMargin + "px");
                pElement.css("font-size", fontSizeP + "px");
                pElement.css("margin-top", "0px");
                pElement.css("margin-bottom", "0px");

                h1Element.css("margin-left", textMargin + "px");
                h1Element.css("margin-right", textMargin + "px");
                h1Element.css("font-size", fontSizeH1 + "px");
            }
        };

        var HowInstall = function () {

            // Name of the section
            const section = "#how_install";
            const box = ".transparent_box"

            // Fade in when scrolling in
            this.scroll = function () {

                var currentScrollTop = jQuery(document).scrollTop();
                var positionTop = jQuery(section + " " + box).offset().top;
                var positionFromBottomOfWindow = (currentScrollTop + window.innerHeight) - positionTop;
                var heightOfBox = jQuery(section + " " + box).css("height");
                heightOfBox = heightOfBox.replace("px", "");
                if (positionFromBottomOfWindow > 0) {
                    var percentage = positionFromBottomOfWindow / (heightOfBox * 1.5);
                    if (percentage > 1) percentage = 1;
                    jQuery(section + " " + box).css('opacity', percentage * 1);
                }

            };

            this.update = function () {

                var boxWidth;
                var marginLeftString;
                var marginRightString;
                var fontSizeH1;
                var fontSizeP;
                var textMargin;

                if (marginRight <= marginLeft || calculatedWindowWidth < 0.12) {
                    // Mobile
                    boxWidth = window.innerWidth * 0.8;
                    var marginRight = window.innerWidth * 0.1;
                    var marginLeft = marginRight;
                    fontSizeH1 = window.innerWidth * 0.1;
                    fontSizeP = fontSizeH1 * 0.4;
                    textMargin = window.innerWidth * 0.05;
                    marginLeftString = marginLeft + "px";
                    marginRightString = marginRight + "px";
                }
                else {
                    // Desktop
                    boxWidth = calculatedWidthInPixels(0.20);
                    var marginLeft = ((window.innerWidth - boxWidth) / 2);
                    fontSizeH1 = calculatedWindowWidth * 0.03 / calculatedPixelWidth;
                    fontSizeP = fontSizeH1 * 0.6;
                    textMargin = window.innerWidth * 0.03;
                    marginRightString = marginLeft + "px";
                    marginLeftString = marginLeft + "px";
                }

                var sectionElement = jQuery(section);
                var boxElement = jQuery(section + " " + box);
                var textElement = jQuery(section + " .text");
                var pElement = jQuery(section + " " + box + " p");
                var h1Element = jQuery(section + " " + box + " h1");

                boxElement.css("margin-left", marginLeftString);
                boxElement.css("margin-right", marginRightString);
                boxElement.css("width", boxWidth + "px");

                textElement.css("margin-top", textMargin + "px");
                textElement.css("margin-bottom", textMargin + "px");

                pElement.css("margin-left", textMargin + "px");
                pElement.css("margin-right", textMargin + "px");
                pElement.css("font-size", fontSizeP + "px");
                pElement.css("margin-top", "0px");
                pElement.css("margin-bottom", "0px");

                h1Element.css("margin-left", textMargin + "px");
                h1Element.css("margin-right", textMargin + "px");
                h1Element.css("font-size", fontSizeH1 + "px");
                h1Element.css("margin-top", "0px");
                h1Element.css("margin-bottom", "0px");

                var sectionHeight = sectionElement.height();
                var minimumHeight = window.innerHeight / 3;
                if (sectionHeight < minimumHeight)
                {
                    sectionHeight = minimumHeight;
                    sectionElement.height (sectionHeight);
                }

                var boxHeight = boxElement.height();
                var boxMarginTop = (sectionHeight/2) - (boxHeight/2);
                boxElement.css ("margin-top", boxMarginTop+"px");

            }
        };

        var HowWhat = function () {
            // Name of the section
            const section = "#how_what";
            const box = ".transparent_box"

            // Fade in when scrolling in
            this.scroll = function () {

                var currentScrollTop = jQuery(document).scrollTop();
                var positionTop = jQuery(section + " " + box).offset().top;
                var positionFromBottomOfWindow = (currentScrollTop + window.innerHeight) - positionTop;
                var heightOfBox = jQuery(section + " " + box).css("height");
                heightOfBox = heightOfBox.replace("px", "");
                if (positionFromBottomOfWindow > -500) {
                    var percentage = positionFromBottomOfWindow / (heightOfBox * 0.5);
                    if (percentage > 1) percentage = 1;
                    jQuery(section + " " + box).css('opacity', percentage * 0.8);
                }

            };

            this.update = function () {

                var boxWidth;
                var marginLeftString;
                var marginRightString;
                var fontSizeH1;
                var fontSizeP;
                var textMargin;

                if (marginRight <= marginLeft || calculatedWindowWidth < 0.12) {
                    // Mobile
                    boxWidth = window.innerWidth * 0.9;
                    var marginRight = window.innerWidth * 0.05;
                    var marginLeft = marginRight;
                    fontSizeH1 = window.innerWidth * 0.1;
                    fontSizeP = fontSizeH1 * 0.4;
                    textMargin = window.innerWidth * 0.05;
                    marginLeftString = marginLeft + "px";
                    marginRightString = marginRight + "px";
                }
                else {
                    // Desktop
                    boxWidth = calculatedWidthInPixels(0.12);
                    var marginRight = calculatedWidthInPixels(0.03);
                    var marginLeft = window.innerWidth - boxWidth - marginRight;
                    var fontSizeH1 = calculatedWindowWidth * 0.03 / calculatedPixelWidth;
                    var fontSizeP = fontSizeH1 * 0.6;
                    textMargin = window.innerWidth * 0.03;
                    marginRightString = "auto";
                    marginLeftString = marginLeft + "px";
                }

                var boxElement = jQuery(section + " " + box);
                var textElement = jQuery(section + " " + box + " .text");
                var pElement = jQuery(section + " " + box + " li");
                var h1Element = jQuery(section + " " + box + " h1");

                boxElement.css("margin-left", marginLeftString);
                boxElement.css("margin-right", marginRightString);
                boxElement.css("width", boxWidth + "px");
                boxElement.css("margin-top", fontSizeH1 + "px");
                boxElement.css("margin-bottom", fontSizeH1 + "px");
                boxElement.css("text-align", "left");

                textElement.css("padding-top", fontSizeP + "px");
                textElement.css("padding-bottom", fontSizeP + "px");

                pElement.css("margin-left", textMargin + "px");
                pElement.css("margin-right", textMargin + "px");
                pElement.css("margin-bottom", textMargin + "px");
                pElement.css("font-size", fontSizeP + "px");
                pElement.css("margin-top", "0px");
                pElement.css("margin-bottom", "0px");

                h1Element.css("margin-left", textMargin + "px");
                h1Element.css("margin-right", textMargin + "px");
                h1Element.css("font-size", fontSizeH1 + "px");
            }
        };

        var HowRules = function () {
            // Name of the section
            const section = "#how_rules";
            const box = ".transparent_box"

            // Fade in when scrolling in
            this.scroll = function () {

                var currentScrollTop = jQuery(document).scrollTop();
                var positionTop = jQuery(section + " " + box).offset().top;
                var positionFromBottomOfWindow = (currentScrollTop + window.innerHeight) - positionTop;
                var heightOfBox = jQuery(section + " " + box).css("height");
                heightOfBox = heightOfBox.replace("px", "");
                if (positionFromBottomOfWindow > 0) {
                    var percentage = positionFromBottomOfWindow / (heightOfBox * 1.5);
                    if (percentage > 1) percentage = 1;
                    jQuery(section + " " + box).css('opacity', percentage * 1);
                }

            };

            this.update = function () {

                var boxWidth;
                var marginLeftString;
                var marginRightString;
                var fontSizeH1;
                var fontSizeP;
                var textMargin;

                if (marginRight <= marginLeft || calculatedWindowWidth < 0.12) {
                    // Mobile
                    boxWidth = window.innerWidth * 0.94;
                    var marginRight = window.innerWidth * 0.03;
                    var marginLeft = marginRight;
                    fontSizeH1 = window.innerWidth * 0.1;
                    fontSizeP = fontSizeH1 * 0.4;
                    textMargin = window.innerWidth * 0.05;
                    marginLeftString = marginLeft + "px";
                    marginRightString = marginRight + "px";
                }
                else {
                    // Desktop
                    boxWidth = window.innerWidth * 0.8;
                    var marginLeft = window.innerWidth * 0.3;
                    fontSizeH1 = calculatedWindowWidth * 0.03 / calculatedPixelWidth;
                    fontSizeP = fontSizeH1 * 0.6;
                    textMargin = window.innerWidth * 0.03;
                    marginRightString = "auto";
                    marginLeftString = marginLeft + "px";
                }

                var boxElement = jQuery(section + " " + box);
                var pElement = jQuery(section + " " + box + " p");
                var h1Element = jQuery(section + " " + box + " h1");

                boxElement.css("margin-left", marginLeftString);
                boxElement.css("margin-right", marginRightString);
                boxElement.css("width", boxWidth + "px");
                boxElement.css("margin-top", fontSizeP+ "px");
                boxElement.css("margin-bottom", (6*fontSizeP)+ "px");

                pElement.css("margin-left", textMargin + "px");
                pElement.css("margin-right", textMargin + "px");
                pElement.css("margin-bottom", textMargin + "px");
                pElement.css("font-size", fontSizeP + "px");
                pElement.css("margin-bottom", 0 + "px");
                pElement.css("margin-top", 0 + "px");

                h1Element.css("margin-left", textMargin + "px");
                h1Element.css("margin-right", textMargin + "px");
                h1Element.css("font-size", fontSizeH1 + "px");
            }
        };

        var GetStarted = function () {
            // Name of the section
            const section = "#get_Started";
            const box = ".transparent_box"

            // Fade in when scrolling in
            this.scroll = function () {

                var currentScrollTop = jQuery(document).scrollTop();
                var positionTop = jQuery(section + " " + box).offset().top;
                var positionFromBottomOfWindow = (currentScrollTop + window.innerHeight) - positionTop;
                var heightOfBox = jQuery(section + " " + box).css("height");
                heightOfBox = heightOfBox.replace("px", "");
                if (positionFromBottomOfWindow > 0) {
                    var percentage = positionFromBottomOfWindow / (heightOfBox * 1.5);
                    if (percentage > 1) percentage = 1;
                    jQuery(section + " " + box).css('opacity', percentage * 0.8);
                }

            };

            this.update = function () {

                var boxWidth;
                var marginLeftString;
                var marginRightString;
                var fontSizeH1;
                var fontSizeP;
                var textMargin;

                if (marginRight <= marginLeft || calculatedWindowWidth < 0.12) {
                    // Mobile
                    boxWidth = window.innerWidth * 0.8;
                    var marginRight = window.innerWidth * 0.1;
                    var marginLeft = marginRight;
                    fontSizeH1 = window.innerWidth * 0.1;
                    fontSizeP = fontSizeH1 * 0.4;
                    textMargin = window.innerWidth * 0.05;
                    marginLeftString = marginLeft + "px";
                    marginRightString = marginRight + "px";
                }
                else {
                    // Desktop
                    boxWidth = calculatedWidthInPixels(0.09);
                    var marginLeft = (window.innerWidth/2)-(boxWidth/2);
                    fontSizeH1 = calculatedWindowWidth * 0.03 / calculatedPixelWidth;
                    fontSizeP = fontSizeH1 * 0.5;
                    textMargin = window.innerWidth * 0.03;
                    marginRightString = "auto";
                    marginLeftString = marginLeft + "px";
                }

                var boxElement = jQuery(section + " " + box);
                var pElement = jQuery(section + " " + box + " p");
                var h1Element = jQuery(section + " " + box + " h1");

                boxElement.css("margin-left", marginLeftString);
                boxElement.css("margin-right", marginRightString);
                boxElement.css("width", boxWidth + "px");
                boxElement.css("margin-top", fontSizeH1 + "px");
                boxElement.css("margin-bottom", fontSizeH1 + "px");

                pElement.css("margin-left", textMargin + "px");
                pElement.css("margin-right", textMargin + "px");
                pElement.css("margin-bottom", textMargin + "px");
                pElement.css("font-size", fontSizeP + "px");

                h1Element.css("margin-left", textMargin + "px");
                h1Element.css("margin-right", textMargin + "px");
                h1Element.css("font-size", fontSizeH1 + "px");
            }
        };

        var Learning = function () {
            // Name of the section
            const section = "#learning";
            const box = ".transparent_box"

            // Fade in when scrolling in
            this.scroll = function () {

                var currentScrollTop = jQuery(document).scrollTop();
                var positionTop = jQuery(section + " " + box).offset().top;
                var positionFromBottomOfWindow = (currentScrollTop + window.innerHeight) - positionTop;
                var heightOfBox = jQuery(section + " " + box).css("height");
                heightOfBox = heightOfBox.replace("px", "");
                if (positionFromBottomOfWindow > 0) {
                    var percentage = positionFromBottomOfWindow / (heightOfBox * 1.5);
                    if (percentage > 1) percentage = 1;
                    jQuery(section + " " + box).css('opacity', percentage * 0.8);
                }

            };

            this.update = function () {

                var boxWidth;
                var marginLeftString;
                var marginRightString;
                var fontSizeH1;
                var fontSizeP;
                var textMargin;

                if (marginRight <= marginLeft || calculatedWindowWidth < 0.12) {
                    // Mobile
                    boxWidth = window.innerWidth * 0.8;
                    var marginRight = window.innerWidth * 0.1;
                    var marginLeft = marginRight;
                    fontSizeH1 = window.innerWidth * 0.1;
                    fontSizeP = fontSizeH1 * 0.4;
                    textMargin = window.innerWidth * 0.05;
                    marginRightString = marginRight + "px";
                    marginLeftString = marginLeft + "px";
                }
                else {
                    // Desktop
                    boxWidth = calculatedWidthInPixels(0.09);
                    var marginLeft = window.innerWidth - boxWidth - calculatedWidthInPixels(0.03);
                    fontSizeH1 = calculatedWindowWidth * 0.03 / calculatedPixelWidth;
                    fontSizeP = fontSizeH1 * 0.5;
                    textMargin = window.innerWidth * 0.03;
                    marginRightString = "auto";
                    marginLeftString = marginLeft + "px";
                }

                var sectionElement = jQuery(section);
                var boxElement = jQuery(section + " " + box);
                var pElement = jQuery(section + " " + box + " p");
                var h1Element = jQuery(section + " " + box + " h1");

                boxElement.css("margin-left", marginLeftString);
                boxElement.css("margin-right", marginRightString);
                boxElement.css("width", boxWidth + "px");

                pElement.css("margin-left", textMargin + "px");
                pElement.css("margin-right", textMargin + "px");
                pElement.css("font-size", fontSizeP + "px");
                pElement.css("margin-bottom", 0 + "px");

                h1Element.css("margin-left", textMargin + "px");
                h1Element.css("margin-right", textMargin + "px");
                h1Element.css("font-size", fontSizeH1 + "px");

                var sectionHeight = sectionElement.height();
                var minimumHeight = window.innerHeight / 3;
                if (sectionHeight < minimumHeight)
                {
                    sectionHeight = minimumHeight;
                    sectionElement.height (sectionHeight);
                }

                var boxHeight = Math.round(boxElement.height());
                var boxMarginTop = (sectionHeight/2) - (boxHeight/2);
                boxElement.css ("margin-top", boxMarginTop + "px");
            }
        };

        var ProductsOfficialPlayingField = function () {
            // Name of the section
            const section = "#products_official_playing_field";
            const box = ".transparent_box"

            // Fade in when scrolling in
            this.scroll = function () {

                var currentScrollTop = jQuery(document).scrollTop();
                var positionTop = jQuery(section + " " + box).offset().top;
                var positionFromBottomOfWindow = (currentScrollTop + window.innerHeight) - positionTop;
                var heightOfBox = jQuery(section + " " + box).css("height");
                heightOfBox = heightOfBox.replace("px", "");
                if (positionFromBottomOfWindow > 0) {
                    var percentage = positionFromBottomOfWindow / (heightOfBox * 1.5);
                    if (percentage > 1) percentage = 1;
                    jQuery(section + " " + box).css('opacity', percentage * 0.8);
                }

            };

            this.update = function () {

                var boxWidth;
                var marginLeftString;
                var marginRightString;
                var fontSizeH1;
                var fontSizeP;
                var textMargin;

                if (marginRight <= marginLeft || calculatedWindowWidth < 0.12) {
                    // Mobile
                    boxWidth = window.innerWidth * 0.8;
                    var marginRight = window.innerWidth * 0.1;
                    var marginLeft = marginRight;
                    fontSizeH1 = window.innerWidth * 0.1;
                    fontSizeP = fontSizeH1 * 0.4;
                    textMargin = window.innerWidth * 0.05;
                    marginLeftString = marginRight + "px";
                    marginRightString = "auto";
                }
                else {
                    // Desktop
                    boxWidth = calculatedWidthInPixels(0.12);
                    var marginLeft = window.innerWidth - calculatedWidthInPixels(0.03) - boxWidth;
                    fontSizeH1 = calculatedWindowWidth * 0.03 / calculatedPixelWidth;
                    fontSizeP = fontSizeH1 * 0.5;
                    textMargin = window.innerWidth * 0.03;
                    marginLeftString = marginLeft + "px";
                    marginRightString = "auto";
                }

                var boxElement = jQuery(section + " " + box);
                var textElement = jQuery(section + " " + box + " .text");
                var pElement = jQuery(section + " " + box + " p");
                var liElement = jQuery(section + " " + box + " li");
                var h1Element = jQuery(section + " " + box + " h1");

                boxElement.css("margin-left", marginLeftString);
                boxElement.css("margin-right", marginRightString);
                boxElement.css("width", boxWidth + "px");
                boxElement.css("padding-right", "0px");
                boxElement.css("padding-left", "0px");

                textElement.css("margin-bottom", textMargin + "px");
                textElement.css("margin-top", textMargin + "px");
                textElement.css("text-align", "left");

                pElement.css("margin-left", textMargin + "px");
                pElement.css("margin-right", textMargin + "px");
                pElement.css("font-size", fontSizeP + "px");
                pElement.css("margin-top", "0px");
                pElement.css("margin-bottom", "0px");

                liElement.css("margin-left", textMargin + "px");
                liElement.css("margin-right", textMargin + "px");
                liElement.css("font-size", fontSizeP + "px");
                liElement.css("margin-top", "0px");
                liElement.css("margin-bottom", "0px");

                h1Element.css("margin-left", textMargin + "px");
                h1Element.css("margin-right", textMargin + "px");
                h1Element.css("font-size", fontSizeH1 + "px");
            }
        };

        var PhysicalExercise = function () {
            // Name of the section
            const section = "#exercise";
            const box = ".transparent_box"

            // Fade in when scrolling in
            this.scroll = function () {

                var currentScrollTop = jQuery(document).scrollTop();
                var positionTop = jQuery(section + " " + box).offset().top;
                var positionFromBottomOfWindow = (currentScrollTop + window.innerHeight) - positionTop;
                var heightOfBox = jQuery(section + " " + box).css("height");
                heightOfBox = heightOfBox.replace("px", "");
                if (positionFromBottomOfWindow > 0) {
                    var percentage = positionFromBottomOfWindow / (heightOfBox * 1.5);
                    if (percentage > 1) percentage = 1;
                    jQuery(section + " " + box).css('opacity', percentage * 0.8);
                }

            };

            this.update = function () {

                var boxWidth;
                var marginLeftString;
                var marginRightString;
                var fontSizeH1;
                var fontSizeP;
                var textMargin;
                var padding;

                if (marginRight <= marginLeft || calculatedWindowWidth < 0.12) {
                    // Mobile
                    boxWidth = window.innerWidth * 0.8;
                    var marginRight = window.innerWidth * 0.1;
                    var marginLeft = marginRight;
                    fontSizeH1 = window.innerWidth * 0.1;
                    fontSizeP = fontSizeH1 * 0.4;
                    textMargin = window.innerWidth * 0.05;
                    marginLeftString = marginLeft + "px";
                    marginRightString = marginRight + "px";
                }
                else {
                    // Desktop
                    boxWidth = calculatedWidthInPixels(0.09);
                    var marginLeft =  calculatedWidthInPixels(0.03);
                    fontSizeH1 = calculatedWindowWidth * 0.03 / calculatedPixelWidth;
                    fontSizeP = fontSizeH1 * 0.5;
                    textMargin = window.innerWidth * 0.03;
                    marginRightString = "auto";
                    marginLeftString = marginLeft + "px";
                }

                var heightCss = jQuery(section).css("height");
                var height = heightCss.replace("px", "");
                var heightMinumum = window.innerHeight / 3;
                if (height < heightMinumum)
                {
                    height = heightMinumum;
                    jQuery(section).css ("height", height+"px");
                }

                var boxElement = jQuery(section + " " + box);
                var pElement = jQuery(section + " " + box + " p");
                var h1Element = jQuery(section + " " + box + " h1");

                boxElement.css("margin-left", marginLeftString);
                boxElement.css("margin-right", marginRightString);
                boxElement.css("width", boxWidth + "px");
                boxElement.css("padding-top", fontSizeP + "px");
                boxElement.css("padding-bottom", fontSizeP + "px");

                pElement.css("margin-left", textMargin + "px");
                pElement.css("margin-right", textMargin + "px");
                pElement.css("font-size", fontSizeP + "px");

                h1Element.css("margin-left", textMargin + "px");
                h1Element.css("margin-right", textMargin + "px");
                h1Element.css("font-size", fontSizeH1 + "px");

                var boxHeightPx = boxElement.css ("height");
                var boxHeight = boxHeightPx.replace ("px", "");
                var boxMarginTop = height - boxHeight - (3 * fontSizeP);
                boxElement.css("margin-top", boxMarginTop + "px");
                boxElement.css("margin-bottom", fontSizeP+"px");

            }
        };

        var Next = function () {
            // Name of the section
            const section = "#next";
            const box = ".transparent_box"

            // Fade in when scrolling in
            this.scroll = function () {

                var currentScrollTop = jQuery(document).scrollTop();
                var positionTop = jQuery(section + " " + box).offset().top;
                var positionFromBottomOfWindow = (currentScrollTop + window.innerHeight) - positionTop;
                var heightOfBox = jQuery(section + " " + box).css("height");
                heightOfBox = heightOfBox.replace("px", "");
                if (positionFromBottomOfWindow > 0) {
                    var percentage = positionFromBottomOfWindow / (heightOfBox * 1.5);
                    if (percentage > 1) percentage = 1;
                    jQuery(section + " " + box).css('opacity', percentage * 0.8);
                }

            };

            this.update = function () {

                var boxWidth;
                var marginLeftString;
                var marginRightString;
                var fontSizeH1;
                var fontSizeP;
                var textMargin;
                var padding;

                if (marginRight <= marginLeft || calculatedWindowWidth < 0.12) {
                    // Mobile
                    boxWidth = window.innerWidth * 0.8;
                    var marginRight = window.innerWidth * 0.1;
                    var marginLeft = marginRight;
                    fontSizeH1 = window.innerWidth * 0.1;
                    fontSizeP = fontSizeH1 * 0.4;
                    textMargin = window.innerWidth * 0.05;
                    marginLeftString = marginLeft + "px";
                    marginRightString = marginRight + "px";
                }
                else {
                    // Desktop
                    boxWidth = calculatedWidthInPixels(0.09);
                    var marginLeft = window.innerWidth - calculatedWidthInPixels(0.03) - boxWidth;
                    fontSizeH1 = calculatedWindowWidth * 0.03 / calculatedPixelWidth;
                    fontSizeP = fontSizeH1 * 0.5;
                    textMargin = window.innerWidth * 0.03;
                    marginRightString = "auto";
                    marginLeftString = marginLeft + "px";
                }

                var sectionElement = jQuery(section);
                var boxElement = jQuery(section + " " + box);
                var pElement = jQuery(section + " " + box + " p");
                var h1Element = jQuery(section + " " + box + " h1");

                boxElement.css("margin-left", marginLeftString);
                boxElement.css("margin-right", marginRightString);
                boxElement.css("width", boxWidth + "px");
                boxElement.css("padding-top", fontSizeP + "px");
                boxElement.css("padding-bottom", fontSizeP + "px");
                boxElement.css("text-align", "left");

                pElement.css("margin-left", textMargin + "px");
                pElement.css("margin-right", textMargin + "px");
                pElement.css("font-size", fontSizeP + "px");
                pElement.css("padding", 0 + "px");

                h1Element.css("margin-left", textMargin + "px");
                h1Element.css("margin-right", textMargin + "px");
                h1Element.css("font-size", fontSizeH1 + "px");
                h1Element.css("padding", 0 + "px");


                var sectionHeight = sectionElement.height();
                var minimumHeight = window.innerHeight / 3;
                if (sectionHeight < minimumHeight)
                {
                    sectionHeight = minimumHeight;
                    sectionElement.height(sectionHeight);
                }

                var boxHeight = boxElement.height();
                var boxMarginTop = (sectionHeight / 2) - (boxHeight / 2);
                boxElement.css("margin-top", boxMarginTop + "px");
                boxElement.css("margin-bottom", "auto");
            }

        };

        var Air = function () {
            // Name of the section
            const section = "#air";
            const box = ".transparent_box"

            // Fade in when scrolling in
            this.scroll = function () {

                var currentScrollTop = jQuery(document).scrollTop();
                var positionTop = jQuery(section + " " + box).offset().top;
                var positionFromBottomOfWindow = (currentScrollTop + window.innerHeight) - positionTop;
                var heightOfBox = jQuery(section + " " + box).css("height");
                heightOfBox = heightOfBox.replace("px", "");
                if (positionFromBottomOfWindow > 0) {
                    var percentage = positionFromBottomOfWindow / (heightOfBox * 2.5);
                    if (percentage > 1) percentage = 1;
                    jQuery(section + " " + box).css('opacity', percentage);
                }

            };

            this.update = function () {

                var boxWidth;
                var marginLeftString;
                var marginRightString;
                var fontSizeH1;
                var fontSizeP;
                var textMargin;

                if (marginRight <= marginLeft || calculatedWindowWidth < 0.12) {
                    // Mobile
                    boxWidth = window.innerWidth * 0.8;
                    var marginRight = window.innerWidth * 0.1;
                    var marginLeft = marginRight;
                    fontSizeH1 = window.innerWidth * 0.1;
                    fontSizeP = fontSizeH1 * 0.4;
                    textMargin = window.innerWidth * 0.05;
                    marginLeftString = marginLeft + "px";
                    marginRightString = marginRight + "px";
                }
                else {
                    // Desktop
                    boxWidth = calculatedWidthInPixels(0.09);
                    var marginLeft = window.innerWidth - boxWidth - calculatedWidthInPixels(0.03);
                    fontSizeH1 = calculatedWindowWidth * 0.03 / calculatedPixelWidth;
                    fontSizeP = fontSizeH1 * 0.5;
                    textMargin = window.innerWidth * 0.03;
                    marginRightString = "auto";
                    marginLeftString = marginLeft + "px";
                }


                var sectionElement = jQuery(section);
                var boxElement = jQuery(section + " " + box);
                var pElement = jQuery(section + " " + box + " p");
                var h1Element = jQuery(section + " " + box + " h1");

                var heightMinimum = window.innerHeight / 3;
                var heightCss = sectionElement.css ("height");
                var height = heightCss.replace("px", "");
                if (height < heightMinimum)
                {
                    height = heightMinimum;
                    sectionElement.css ("height", height+"px");
                }


                boxElement.css("margin-left", marginLeftString);
                boxElement.css("margin-right", marginRightString);
                boxElement.css("width", boxWidth + "px");
                boxElement.css("padding-top", fontSizeP + "px");
                boxElement.css("padding-bottom", fontSizeP + "px");

                pElement.css("margin-left", textMargin + "px");
                pElement.css("margin-right", textMargin + "px");
                pElement.css("margin-bottom", textMargin + "px");
                pElement.css("font-size", fontSizeP + "px");

                h1Element.css("margin-left", textMargin + "px");
                h1Element.css("margin-right", textMargin + "px");
                h1Element.css("font-size", fontSizeH1 + "px");

                var boxHeight = boxElement.height();
                var boxMarginTop = (height/2) - (boxHeight/2);
                boxElement.css ("margin-top", boxMarginTop+"px");

            }
        };

        var WhereAutomatic = function () {
            // Name of the section
            const section = "#where_automatic";
            const box = ".transparent_box"

            // Fade in when scrolling in
            this.scroll = function () {

                var currentScrollTop = jQuery(document).scrollTop();
                var positionTop = jQuery(section + " " + box).offset().top;
                var positionFromBottomOfWindow = (currentScrollTop + window.innerHeight) - positionTop;
                var heightOfBox = jQuery(section + " " + box).css("height");
                heightOfBox = heightOfBox.replace("px", "");
                if (positionFromBottomOfWindow > 0) {
                    var percentage = positionFromBottomOfWindow / (heightOfBox * 1.5);
                    if (percentage > 0.8) percentage = 0.8;
                    jQuery(section + " " + box).css('opacity', percentage);
                }

            };

            this.update = function () {

                var boxWidth;
                var marginLeftString;
                var marginRightString;
                var fontSizeH1;
                var fontSizeP;
                var textMargin;

                if (marginRight <= marginLeft || calculatedWindowWidth < 0.12) {
                    // Mobile
                    boxWidth = window.innerWidth * 0.8;
                    var marginRight = window.innerWidth * 0.1;
                    var marginLeft = marginRight;
                    fontSizeH1 = window.innerWidth * 0.1;
                    fontSizeP = fontSizeH1 * 0.4;
                    textMargin = window.innerWidth * 0.05;
                    marginLeftString = marginLeft + "px";
                    marginRightString = marginRight + "px";
                }
                else {
                    // Desktop
                    boxWidth = calculatedWidthInPixels(0.10);
                    var marginLeft = window.innerWidth - calculatedWidthInPixels(0.03) - boxWidth;
                    fontSizeH1 = calculatedWindowWidth * 0.03 / calculatedPixelWidth;
                    fontSizeP = fontSizeH1 * 0.5;
                    textMargin = window.innerWidth * 0.03;
                    marginLeftString = marginLeft + "px";
                    marginRightString = "auto";
                }

                var boxElement = jQuery(section + " " + box);
                var textElement = jQuery(section + " " + box + " .text");
                var pElement = jQuery(section + " " + box + " p");
                var h1Element = jQuery(section + " " + box + " h1");

                boxElement.css("margin-left", marginLeftString);
                boxElement.css("margin-right", marginRightString);
                boxElement.css("width", boxWidth + "px");
                boxElement.css("margin-top", textMargin + "px");
                boxElement.css("margin-bottom", textMargin + "px");
                boxElement.css("padding-top", fontSizeP + "px");
                boxElement.css("padding-bottom", fontSizeP + "px");

                pElement.css("margin-left", textMargin + "px");
                pElement.css("margin-right", textMargin + "px");
                textElement.css("margin-top", textMargin + "px");
                textElement.css("margin-bottom", textMargin + "px");
                pElement.css("font-size", fontSizeP + "px");

                h1Element.css("margin-left", textMargin + "px");
                h1Element.css("margin-right", textMargin + "px");
                h1Element.css("font-size", fontSizeH1 + "px");

            }
        };

        var WhereOfficial = function () {
            // Name of the section
            const section = "#where_official";
            const box = ".transparent_box"

            // Fade in when scrolling in
            this.scroll = function () {

                var currentScrollTop = jQuery(document).scrollTop();
                var positionTop = jQuery(section + " " + box).offset().top;
                var positionFromBottomOfWindow = (currentScrollTop + window.innerHeight) - positionTop;
                var heightOfBox = jQuery(section + " " + box).css("height");
                heightOfBox = heightOfBox.replace("px", "");
                if (positionFromBottomOfWindow > 0) {
                    var percentage = positionFromBottomOfWindow / (heightOfBox * 1.5);
                    if (percentage > 1) percentage = 1;
                    jQuery(section + " " + box).css('opacity', percentage);
                }

            };

            this.update = function () {

                var boxWidth;
                var marginLeftString;
                var marginRightString;
                var fontSizeH1;
                var fontSizeP;
                var textMargin;
                var mapMargin = 0;
                var mapMarginTopBottom = "0";
                var mapHeight = "20cm";

                if (marginRight <= marginLeft || calculatedWindowWidth < 0.12) {
                    // Mobile
                    boxWidth = window.innerWidth * 0.8;
                    var marginRight = window.innerWidth * 0.1;
                    var marginLeft = marginRight;
                    fontSizeH1 = window.innerWidth * 0.1;
                    fontSizeP = fontSizeH1 * 0.4;
                    textMargin = window.innerWidth * 0.05;
                    marginLeftString = marginLeft + "px";
                    marginRightString = marginRight + "px";
                }
                else {
                    // Desktop
                    boxWidth = calculatedWidthInPixels(0.10);
                    var marginLeft = calculatedWidthInPixels(0.03);
                    fontSizeH1 = calculatedWindowWidth * 0.03 / calculatedPixelWidth;
                    fontSizeP = fontSizeH1 * 0.5;
                    textMargin = window.innerWidth * 0.03;
                    marginLeftString = marginLeft + "px";
                    marginRightString = "auto";
                    mapMargin = calculatedWidthInPixels(0.03);
                    mapMarginTopBottom = "0cm";
                    mapHeight = "20cm";
                }

                var boxElement = jQuery(section + " " + box);
                var textElement = jQuery(section + " " + box + " .text");
                var pElement = jQuery(section + " " + box + " p");
                var h1Element = jQuery(section + " " + box + " h1");

                boxElement.css("margin-left", marginLeftString);
                boxElement.css("margin-right", marginRightString);
                boxElement.css("width", boxWidth + "px");
                boxElement.css("padding-top", fontSizeP + "px");
                boxElement.css("padding-bottom", fontSizeP + "px");

                pElement.css("margin-left", textMargin + "px");
                pElement.css("margin-right", textMargin + "px");
                textElement.css("margin-top", textMargin + "px");
                textElement.css("margin-bottom", textMargin + "px");
                pElement.css("font-size", fontSizeP + "px");

                h1Element.css("margin-left", textMargin + "px");
                h1Element.css("margin-right", textMargin + "px");
                h1Element.css("font-size", fontSizeH1 + "px");

                jQuery("#map").css("margin-top", mapMarginTopBottom);
                jQuery("#map").css("margin-bottom", mapMarginTopBottom);
                jQuery("#map").css("margin-left", mapMargin + "px");
                jQuery("#map").css("margin-right", mapMargin + "px");
                jQuery("#map").css("height", mapHeight);

            }
        };

        // Handle the intro section
        var Intro = function () {
            var id = "#intro";
            // Update on changes
            this.update = function () {
                // Branch on window width
                if (calculatedWindowWidth < 0.12) {
                    // If the width is less than 10 cm assume mobile device or narrow browser, so place the items above each other

                    var fontSizeH1 = window.innerWidth * 0.1;
                    var fontSizeP = fontSizeH1 * 0.3;
                    var widthImage = window.innerWidth * 0.8;
                    var margin = window.innerWidth * 0.1;

                    jQuery(id + " .box").css("width", widthImage + "px");
                    jQuery(id + " .box").css("margin-top", margin + "px");
                    jQuery(id + " .box").css("margin-left", margin + "px");
                    jQuery(id + " .box").css("margin-right", margin + "px");
                    jQuery(id + " .box").css("float", "none");
                    jQuery(id + " h1").css("font-size", fontSizeH1 + "px");
                    jQuery(id + " p").css("font-size", fontSizeP + "px");
                    jQuery(id + " p").css("margin-top", (fontSizeP/2) + "px");

                    jQuery(id + " #phone img").css("width", widthImage + "px");
                    jQuery(id + " #phone").css("margin-left", margin + "px");
                    jQuery(id + " #phone").css("margin-right", margin + "px");
                    jQuery(id + " #phone").css("float", "none");

                    var heightImage = jQuery(id + " #phone").css("height");
                    heightImage = heightImage.replace("px", "");
                    var sectionHeight = heightImage * 0.8;
                    jQuery(id).css("height", sectionHeight + "px");

                    var height = jQuery(id).css ("height");
                    height = height.replace ("px", "");
                    var minimumHeight = window.innerHeight / 3;
                    if (height < minimumHeight)
                    {
                        height = minimumHeight;
                        jQuery(id).css ("height", height+"px");
                    }


                }
                else {
                    var fontSizeH1 = calculatedWindowWidth * 0.03 / calculatedPixelWidth;
                    var fontSizeP = fontSizeH1 * 0.6;
                    var widthImage = calculatedWindowWidth * 0.26 / calculatedPixelWidth;
                    var marginLeft = calculatedWindowWidth * 0.08 / calculatedPixelWidth;
                    var marginRight = calculatedWindowWidth * 0.12 / calculatedPixelWidth;
                    var widthText = calculatedWindowWidth * 0.4 / calculatedPixelWidth;
                    var marginTextLeft = calculatedWindowWidth * 0.06 / calculatedPixelWidth;
                    var marginTextRight = calculatedWindowWidth * 0.02 / calculatedPixelWidth;

                    jQuery(id + " .box").css("width", widthText + "px");
                    jQuery(id + " .box").css("margin-left", marginTextLeft + "px");
                    jQuery(id + " .box").css("margin-right", marginTextRight + "px");
                    jQuery(id + " .box").css("float", "left");
                    jQuery(id + " h1").css("font-size", fontSizeH1 + "px");
                    jQuery(id + " p").css("margin-top", (fontSizeP/2) + "px");
                    jQuery(id + " p").css("font-size", fontSizeP + "px");

                    jQuery(id + " #phone img").css("width", widthImage + "px");
                    jQuery(id + " #phone").css("margin-left", marginLeft + "px");
                    jQuery(id + " #phone").css("margin-right", marginRight + "px");
                    jQuery(id + " #phone").css("float", "right");

                    var heightImage = jQuery(id + " #phone").css("height");
                    heightImage = heightImage.replace("px", "");
                    var sectionHeight = heightImage * 0.7;
                    jQuery(id).css("height", sectionHeight + "px");

                    var height = jQuery(id).css ("height");
                    height = height.replace ("px", "");
                    var minimumHeight = window.innerHeight / 3;
                    if (height < minimumHeight)
                    {
                        height = minimumHeight;
                        jQuery(id).css ("height", height+"px");
                    }

                    var heightText = jQuery(id + " .box").css("height");
                    heightText = heightText.replace("px", "");
                    var marginTop = (height - heightText) / 2;
                    jQuery(id + " .box").css("margin-top", marginTop + "px");


                }
            };
        };

        // Handle the intro section
        var ProductsPosters = function () {
            var id = "#products_posters";
            var box = ".transparent_box";
            // Update on changes

            this.scroll = function ()
            {

            };

            this.update = function () {


                // Branch on window width
                if (calculatedWindowWidth < 0.12) {
                    // If the width is less than 10 cm assume mobile device or narrow browser, so place the items above each other


                    var fontSizeH1 = window.innerWidth * 0.1;
                    var fontSizeP = fontSizeH1 * 0.4;
                    var widthImage = window.innerWidth * 0.8;
                    var margin = window.innerWidth * 0.1;

                    jQuery(id + " "+box).css("width", widthImage + "px");
                    jQuery(id + " "+box).css("margin-left", margin + "px");
                    jQuery(id + " "+box).css("margin-right", margin + "px");
                    jQuery(id + " "+box).css("float", "none");
                    jQuery(id + " h1").css("font-size", fontSizeH1 + "px");
                    jQuery(id + " p").css("font-size", fontSizeP + "px");

                    jQuery(id + " #poster img").css("width", widthImage + "px");
                    jQuery(id + " #poster").css("margin-left", margin + "px");
                    jQuery(id + " #poster").css("margin-right", margin + "px");
                    jQuery(id + " #poster").css("float", "none");
                    jQuery(id + " #poster").css("margin-top", fontSizeP+ "px");
                    jQuery(id + " #poster").css("margin-bottom", fontSizeP + "px");


                }
                else {
                    var fontSizeH1 = calculatedWindowWidth * 0.03 / calculatedPixelWidth;
                    var fontSizeP = fontSizeH1 * 0.6;
                    var widthImage = calculatedWindowWidth * 0.26 / calculatedPixelWidth;
                    var marginLeft = calculatedWindowWidth * 0.08 / calculatedPixelWidth;
                    var marginRight = calculatedWindowWidth * 0.12 / calculatedPixelWidth;
                    var widthText = calculatedWindowWidth * 0.4 / calculatedPixelWidth;
                    var marginTextLeft = calculatedWindowWidth * 0.06 / calculatedPixelWidth;
                    var marginTextRight = calculatedWindowWidth * 0.02 / calculatedPixelWidth;

                    jQuery(id + " "+box).css("width", widthText + "px");
                    jQuery(id + " "+box).css("margin-left", marginTextLeft + "px");
                    jQuery(id + " "+box).css("margin-right", marginTextRight + "px");
                    jQuery(id + " "+box).css("float", "left");
                    jQuery(id + " "+box + " .text").css("text-align", "left");
                    jQuery(id + " h1").css("font-size", fontSizeH1 + "px");
                    jQuery(id + " p").css("font-size", fontSizeP + "px");
                    jQuery(id + " ul").css("font-size", fontSizeP + "px");

                    jQuery(id + " #poster img").css("width", widthImage + "px");
                    jQuery(id + " #poster").css("margin-top", fontSizeP+ "px");
                    jQuery(id + " #poster").css("margin-bottom", fontSizeP + "px");
                    jQuery(id + " #poster").css("margin-left", marginLeft + "px");
                    jQuery(id + " #poster").css("margin-right", marginRight + "px");
                    jQuery(id + " #poster").css("float", "right");

                    var sectionHeight = jQuery(id).css("height");
                    sectionHeight = sectionHeight.replace ("px", "");
                    var heightText = jQuery(id + " .text").css("height");
                    heightText = heightText.replace("px", "");
                    console.log ("heightText: "+heightText);
                    console.log ("sectionHeight: "+sectionHeight);
                    var marginTop = (sectionHeight - heightText) / 2;
                    console.log ("marginTop: "+marginTop);
                    jQuery(id + " .text").css("margin-top", marginTop + "px");


                }
            };
        };

        // Handle the intro section
        var ProductsPowerBank = function () {
            var id = "#products_powerbank";
            var box = ".transparent_box";
            var imageId = "#powerbank";
            // Update on changes

            this.scroll = function ()
            {

            };

            this.update = function () {


                // Branch on window width
                if (calculatedWindowWidth < 0.12) {
                    // If the width is less than 10 cm assume mobile device or narrow browser, so place the items above each other


                    var fontSizeH1 = window.innerWidth * 0.1;
                    var fontSizeP = fontSizeH1 * 0.4;
                    var widthImage = window.innerWidth * 0.8;
                    var margin = window.innerWidth * 0.1;

                    jQuery(id + " "+box).css("width", widthImage + "px");
                    jQuery(id + " "+box).css("margin-left", margin + "px");
                    jQuery(id + " "+box).css("margin-right", margin + "px");
                    jQuery(id + " "+box).css("float", "none");
                    jQuery(id + " h1").css("font-size", fontSizeH1 + "px");
                    jQuery(id + " p").css("font-size", fontSizeP + "px");

                    jQuery(id + " "+imageId+" img").css("width", widthImage + "px");
                    jQuery(id + " "+imageId).css("margin-left", margin + "px");
                    jQuery(id + " "+imageId).css("margin-right", margin + "px");
                    jQuery(id + " "+imageId).css("float", "none");
                    jQuery(id + " "+imageId).css("margin-top", fontSizeP+ "px");
                    jQuery(id + " "+imageId).css("margin-bottom", fontSizeP + "px");


                }
                else {
                    var fontSizeH1 = calculatedWindowWidth * 0.03 / calculatedPixelWidth;
                    var fontSizeP = fontSizeH1 * 0.6;

                    var widthText = calculatedWindowWidth * 0.26 / calculatedPixelWidth;
                    var marginTextLeft = calculatedWindowWidth * 0.08 / calculatedPixelWidth;
                    var marginTextRight = calculatedWindowWidth * 0.12 / calculatedPixelWidth;

                    var widthImage = calculatedWindowWidth * 0.4 / calculatedPixelWidth;
                    var marginLeft = calculatedWindowWidth * 0.06 / calculatedPixelWidth;
                    var marginRight = calculatedWindowWidth * 0.02 / calculatedPixelWidth;

                    jQuery(id + " "+box).css("width", widthText + "px");
                    jQuery(id + " "+box).css("margin-left", marginTextLeft + "px");
                    jQuery(id + " "+box).css("margin-right", marginTextRight + "px");
                    jQuery(id + " "+box).css("float", "right");
                    jQuery(id + " "+box + " .text").css("text-align", "left");
                    jQuery(id + " h1").css("font-size", fontSizeH1 + "px");
                    jQuery(id + " p").css("font-size", fontSizeP + "px");
                    jQuery(id + " ul").css("font-size", fontSizeP + "px");

                    jQuery(id + " "+imageId+" img").css("width", widthImage + "px");
                    jQuery(id + " "+imageId).css("margin-top", fontSizeP+ "px");
                    jQuery(id + " "+imageId).css("margin-bottom", fontSizeP + "px");
                    jQuery(id + " "+imageId).css("margin-left", marginLeft + "px");
                    jQuery(id + " "+imageId).css("margin-right", marginRight + "px");
                    jQuery(id + " "+imageId).css("float", "left");

                    var sectionHeight = jQuery(id).css("height");
                    sectionHeight = sectionHeight.replace ("px", "");
                    var heightText = jQuery(id + " .text").css("height");
                    heightText = heightText.replace("px", "");
                    console.log ("heightText: "+heightText);
                    console.log ("sectionHeight: "+sectionHeight);
                    var marginTop = (sectionHeight - heightText) / 2;
                    console.log ("marginTop: "+marginTop);
                    jQuery(id + " .text").css("margin-top", marginTop + "px");


                }
            };
        };
        // Handle the intro section
        var ProductsGloves = function () {
            var id = "#products_gloves";
            var box = ".transparent_box";
            var imageId = "#gloves";
            // Update on changes

            this.scroll = function ()
            {

            };

            this.update = function () {


                // Branch on window width
                if (calculatedWindowWidth < 0.12) {
                    // If the width is less than 10 cm assume mobile device or narrow browser, so place the items above each other


                    var fontSizeH1 = window.innerWidth * 0.1;
                    var fontSizeP = fontSizeH1 * 0.4;
                    var widthImage = window.innerWidth * 0.8;
                    var margin = window.innerWidth * 0.1;

                    jQuery(id + " "+box).css("width", widthImage + "px");
                    jQuery(id + " "+box).css("margin-left", margin + "px");
                    jQuery(id + " "+box).css("margin-right", margin + "px");
                    jQuery(id + " "+box).css("float", "none");
                    jQuery(id + " h1").css("font-size", fontSizeH1 + "px");
                    jQuery(id + " p").css("font-size", fontSizeP + "px");

                    jQuery(id + " "+imageId+" img").css("width", widthImage + "px");
                    jQuery(id + " "+imageId).css("margin-left", margin + "px");
                    jQuery(id + " "+imageId).css("margin-right", margin + "px");
                    jQuery(id + " "+imageId).css("float", "none");
                    jQuery(id + " "+imageId).css("margin-top", fontSizeP+ "px");
                    jQuery(id + " "+imageId).css("margin-bottom", fontSizeP + "px");


                }
                else {
                    var fontSizeH1 = calculatedWindowWidth * 0.03 / calculatedPixelWidth;
                    var fontSizeP = fontSizeH1 * 0.6;
                    var widthImage = calculatedWindowWidth * 0.26 / calculatedPixelWidth;
                    var marginLeft = calculatedWindowWidth * 0.08 / calculatedPixelWidth;
                    var marginRight = calculatedWindowWidth * 0.12 / calculatedPixelWidth;
                    var widthText = calculatedWindowWidth * 0.4 / calculatedPixelWidth;
                    var marginTextLeft = calculatedWindowWidth * 0.06 / calculatedPixelWidth;
                    var marginTextRight = calculatedWindowWidth * 0.02 / calculatedPixelWidth;

                    jQuery(id + " "+box).css("width", widthText + "px");
                    jQuery(id + " "+box).css("margin-left", marginTextLeft + "px");
                    jQuery(id + " "+box).css("margin-right", marginTextRight + "px");
                    jQuery(id + " "+box).css("float", "left");
                    jQuery(id + " "+box + " .text").css("text-align", "left");
                    jQuery(id + " h1").css("font-size", fontSizeH1 + "px");
                    jQuery(id + " p").css("font-size", fontSizeP + "px");
                    jQuery(id + " ul").css("font-size", fontSizeP + "px");

                    jQuery(id + " "+imageId+" img").css("width", widthImage + "px");
                    jQuery(id + " "+imageId).css("margin-top", fontSizeP+ "px");
                    jQuery(id + " "+imageId).css("margin-bottom", fontSizeP + "px");
                    jQuery(id + " "+imageId).css("margin-left", marginLeft + "px");
                    jQuery(id + " "+imageId).css("margin-right", marginRight + "px");
                    jQuery(id + " "+imageId).css("float", "right");

                    var sectionHeight = jQuery(id).css("height");
                    sectionHeight = sectionHeight.replace ("px", "");
                    var heightText = jQuery(id + " .text").css("height");
                    heightText = heightText.replace("px", "");
                    console.log ("heightText: "+heightText);
                    console.log ("sectionHeight: "+sectionHeight);
                    var marginTop = (sectionHeight - heightText) / 2;
                    console.log ("marginTop: "+marginTop);
                    jQuery(id + " .text").css("margin-top", marginTop + "px");


                }
            };
        };

        // Handle the intro section
        var ProductsTeaching = function () {
            var id = "#products_teaching";
            var box = ".transparent_box";
            var imageId = "#teaching";
            // Update on changes

            this.scroll = function ()
            {

            };

            this.update = function () {


                // Branch on window width
                if (calculatedWindowWidth < 0.12) {
                    // If the width is less than 10 cm assume mobile device or narrow browser, so place the items above each other


                    var fontSizeH1 = window.innerWidth * 0.1;
                    var fontSizeP = fontSizeH1 * 0.4;
                    var widthImage = window.innerWidth * 0.8;
                    var margin = window.innerWidth * 0.1;

                    jQuery(id + " "+box).css("width", widthImage + "px");
                    jQuery(id + " "+box).css("margin-left", margin + "px");
                    jQuery(id + " "+box).css("margin-right", margin + "px");
                    jQuery(id + " "+box).css("float", "none");
                    jQuery(id + " h1").css("font-size", fontSizeH1 + "px");
                    jQuery(id + " p").css("font-size", fontSizeP + "px");

                    jQuery(id + " "+imageId+" img").css("width", widthImage + "px");
                    jQuery(id + " "+imageId).css("margin-left", margin + "px");
                    jQuery(id + " "+imageId).css("margin-right", margin + "px");
                    jQuery(id + " "+imageId).css("float", "none");
                    jQuery(id + " "+imageId).css("margin-top", fontSizeP+ "px");
                    jQuery(id + " "+imageId).css("margin-bottom", fontSizeP + "px");


                }
                else {
                    var fontSizeH1 = calculatedWindowWidth * 0.03 / calculatedPixelWidth;
                    var fontSizeP = fontSizeH1 * 0.6;
                    var widthImage = calculatedWindowWidth * 0.26 / calculatedPixelWidth;
                    var marginLeft = calculatedWindowWidth * 0.08 / calculatedPixelWidth;
                    var marginRight = calculatedWindowWidth * 0.12 / calculatedPixelWidth;
                    var widthText = calculatedWindowWidth * 0.4 / calculatedPixelWidth;
                    var marginTextLeft = calculatedWindowWidth * 0.06 / calculatedPixelWidth;
                    var marginTextRight = calculatedWindowWidth * 0.02 / calculatedPixelWidth;

                    jQuery(id + " "+box).css("width", widthText + "px");
                    jQuery(id + " "+box).css("margin-left", marginTextLeft + "px");
                    jQuery(id + " "+box).css("margin-right", marginTextRight + "px");
                    jQuery(id + " "+box).css("float", "left");
                    jQuery(id + " "+box + " .text").css("text-align", "left");
                    jQuery(id + " h1").css("font-size", fontSizeH1 + "px");
                    jQuery(id + " p").css("font-size", fontSizeP + "px");
                    jQuery(id + " ul").css("font-size", fontSizeP + "px");

                    jQuery(id + " "+imageId+" img").css("width", widthImage + "px");
                    jQuery(id + " "+imageId).css("margin-top", fontSizeP+ "px");
                    jQuery(id + " "+imageId).css("margin-bottom", fontSizeP + "px");
                    jQuery(id + " "+imageId).css("margin-left", marginLeft + "px");
                    jQuery(id + " "+imageId).css("margin-right", marginRight + "px");
                    jQuery(id + " "+imageId).css("float", "right");

                    var sectionHeight = jQuery(id).css("height");
                    sectionHeight = sectionHeight.replace ("px", "");
                    var heightText = jQuery(id + " .text").css("height");
                    heightText = heightText.replace("px", "");
                    console.log ("heightText: "+heightText);
                    console.log ("sectionHeight: "+sectionHeight);
                    var marginTop = (sectionHeight - heightText) / 2;
                    console.log ("marginTop: "+marginTop);
                    jQuery(id + " .text").css("margin-top", marginTop + "px");


                }
            };
        };

        // Handle the intro section
        var HowIntro = function () {
            var id = "#how_intro";
            // Update on changes
            this.update = function () {
                // Branch on window width
                if (calculatedWindowWidth < 0.12) {
                    // If the width is less than 10 cm assume mobile device or narrow browser, so place the items above each other

                    var fontSizeH1 = window.innerWidth * 0.1;
                    var fontSizeP = fontSizeH1 * 0.4;
                    var widthText = window.innerWidth * 0.8;
                    var margin = window.innerWidth * 0.1;

                    jQuery(id + " .box").css("width", widthText + "px");
                    jQuery(id + " .box").css("margin-left", margin + "px");
                    jQuery(id + " .box").css("margin-right", margin + "px");
                    jQuery(id + " .box").css("float", "none");
                    jQuery(id + " h1").css("font-size", fontSizeH1 + "px");
                    jQuery(id + " p").css("font-size", fontSizeP + "px");

                    var height = jQuery(id).css ("height");
                    height = height.replace ("px", "");
                    var minimumHeight = window.innerHeight / 2;
                    if (height < minimumHeight)
                    {
                        height = minimumHeight;
                        jQuery(id).css ("height", height+"px");
                    }

                    var heightText = jQuery(id + " .box").css("height");
                    heightText = heightText.replace("px", "");
                    var marginTop = (height - heightText) / 2;
                    jQuery(id + " .box").css("margin-top", marginTop + "px");

                }
                else {
                    var fontSizeH1 = calculatedWindowWidth * 0.03 / calculatedPixelWidth;
                    var fontSizeP = fontSizeH1 * 0.6;
                    var widthText = calculatedWidthInPixels(0.09);
                    var margin = (window.innerWidth/2)-(widthText/2);

                    jQuery(id + " .box").css("width", widthText + "px");
                    jQuery(id + " .box").css("margin-left", margin + "px");
                    jQuery(id + " .box").css("margin-right", margin + "px");
                    jQuery(id + " .box").css("float", "none");
                    jQuery(id + " h1").css("font-size", fontSizeH1 + "px");
                    jQuery(id + " p").css("font-size", fontSizeP + "px");

                    var height = jQuery(id).css ("height");
                    height = height.replace ("px", "");
                    var minimumHeight = window.innerHeight / 2;
                    if (height < minimumHeight)
                    {
                        height = minimumHeight;
                        jQuery(id).css ("height", height+"px");
                    }

                    var heightText = jQuery(id + " .box").css("height");
                    heightText = heightText.replace("px", "");
                    var marginTop = (height - heightText) / 2;
                    jQuery(id + " .box").css("margin-top", marginTop + "px");



                }
            };
        };
        // Handle the intro section
        var TrainingIntro = function () {
            var id = "#training_intro";
            // Update on changes
            this.update = function () {
                // Branch on window width
                if (calculatedWindowWidth < 0.12) {
                    // If the width is less than 10 cm assume mobile device or narrow browser, so place the items above each other

                    var fontSizeH1 = window.innerWidth * 0.1;
                    var fontSizeP = fontSizeH1 * 0.4;
                    var widthText = window.innerWidth * 0.8;
                    var margin = window.innerWidth * 0.1;

                    jQuery(id + " .box").css("width", widthText + "px");
                    jQuery(id + " .box").css("margin-left", margin + "px");
                    jQuery(id + " .box").css("margin-right", margin + "px");
                    jQuery(id + " .box").css("float", "none");
                    jQuery(id + " h1").css("font-size", fontSizeH1 + "px");
                    jQuery(id + " p").css("font-size", fontSizeP + "px");

                    var height = jQuery(id).css ("height");
                    height = height.replace ("px", "");
                    var minimumHeight = window.innerHeight / 2;
                    if (height < minimumHeight)
                    {
                        height = minimumHeight;
                        jQuery(id).css ("height", height+"px");
                    }

                    var heightText = jQuery(id + " .box").css("height");
                    heightText = heightText.replace("px", "");
                    var marginTop = (height - heightText) / 2;
                    jQuery(id + " .box").css("margin-top", marginTop + "px");

                }
                else {
                    var fontSizeH1 = calculatedWindowWidth * 0.03 / calculatedPixelWidth;
                    var fontSizeP = fontSizeH1 * 0.6;
                    var widthText = calculatedWidthInPixels(0.16);
                    var margin = (window.innerWidth/2)-(widthText/2);

                    jQuery(id + " .box").css("width", widthText + "px");
                    jQuery(id + " .box").css("margin-left", margin + "px");
                    jQuery(id + " .box").css("margin-right", margin + "px");
                    jQuery(id + " .box").css("float", "none");
                    jQuery(id + " h1").css("font-size", fontSizeH1 + "px");
                    jQuery(id + " p").css("font-size", fontSizeP + "px");

                    var height = jQuery(id).css ("height");
                    height = height.replace ("px", "");
                    var minimumHeight = window.innerHeight / 2;
                    if (height < minimumHeight)
                    {
                        height = minimumHeight;
                        jQuery(id).css ("height", height+"px");
                    }

                    var heightText = jQuery(id + " .box").css("height");
                    heightText = heightText.replace("px", "");
                    var marginTop = (height - heightText) / 2;
                    jQuery(id + " .box").css("margin-top", marginTop + "px");



                }
            };
        };

        // Handle the intro section
        var WhereIntro = function () {
            var id = "#where_intro";
            // Update on changes
            this.update = function () {
                // Branch on window width
                if (calculatedWindowWidth < 0.12) {
                    // If the width is less than 10 cm assume mobile device or narrow browser, so place the items above each other

                    var fontSizeH1 = window.innerWidth * 0.1;
                    var fontSizeP = fontSizeH1 * 0.4;
                    var widthText = window.innerWidth * 0.8;
                    var margin = window.innerWidth * 0.1;

                    jQuery(id + " .box").css("width", widthText + "px");
                    jQuery(id + " .box").css("margin-left", margin + "px");
                    jQuery(id + " .box").css("margin-right", margin + "px");
                    jQuery(id + " .box").css("float", "none");
                    jQuery(id + " h1").css("font-size", fontSizeH1 + "px");
                    jQuery(id + " p").css("font-size", fontSizeP + "px");

                    var height = jQuery(id).css ("height");
                    height = height.replace ("px", "");
                    var minimumHeight = window.innerHeight / 2;
                    if (height < minimumHeight)
                    {
                        height = minimumHeight;
                        jQuery(id).css ("height", height+"px");
                    }

                    var heightText = jQuery(id + " .box").css("height");
                    heightText = heightText.replace("px", "");
                    var marginTop = (height - heightText) / 2;
                    jQuery(id + " .box").css("margin-top", marginTop + "px");

                }
                else {
                    var fontSizeH1 = calculatedWindowWidth * 0.03 / calculatedPixelWidth;
                    var fontSizeP = fontSizeH1 * 0.6;
                    var widthText = calculatedWidthInPixels(0.09);
                    var margin = (window.innerWidth/2)-(widthText/2);

                    jQuery(id + " .box").css("width", widthText + "px");
                    jQuery(id + " .box").css("margin-left", margin + "px");
                    jQuery(id + " .box").css("margin-right", margin + "px");
                    jQuery(id + " .box").css("float", "none");
                    jQuery(id + " h1").css("font-size", fontSizeH1 + "px");
                    jQuery(id + " p").css("font-size", fontSizeP + "px");

                    var height = jQuery(id).css ("height");
                    height = height.replace ("px", "");
                    var minimumHeight = window.innerHeight / 2;
                    if (height < minimumHeight)
                    {
                        height = minimumHeight;
                        jQuery(id).css ("height", height+"px");
                    }

                    var heightText = jQuery(id + " .box").css("height");
                    heightText = heightText.replace("px", "");
                    var marginTop = (height - heightText) / 2;
                    jQuery(id + " .box").css("margin-top", marginTop + "px");



                }
            };
        };

        // Handle the intro section
        var LoginIntro = function () {
            var id = "#login_intro";
            // Update on changes
            this.update = function () {
                // Branch on window width
                if (calculatedWindowWidth < 0.12) {
                    // If the width is less than 10 cm assume mobile device or narrow browser, so place the items above each other

                    var fontSizeH1 = window.innerWidth * 0.1;
                    var fontSizeP = fontSizeH1 * 0.4;
                    var widthText = window.innerWidth * 0.8;
                    var margin = window.innerWidth * 0.1;

                    jQuery(id + " .box").css("width", widthText + "px");
                    jQuery(id + " .box").css("margin-left", margin + "px");
                    jQuery(id + " .box").css("margin-right", margin + "px");
                    jQuery(id + " .box").css("float", "none");
                    jQuery(id + " h1").css("font-size", fontSizeH1 + "px");
                    jQuery(id + " p").css("font-size", fontSizeP + "px");
                    jQuery(id + " p").css("margin-bottom", (fontSizeP/2) + "px");
                    jQuery(id + " input").css("font-size", fontSizeP + "px");
                    jQuery('input[type="submit"]').css("font-size", fontSizeP + "px");

                    var height = jQuery(id).css ("height");
                    height = height.replace ("px", "");
                    var top = jQuery("#menu").height();
                    var minimumHeight = window.innerHeight - top;
                    if (height < minimumHeight)
                    {
                        height = minimumHeight;
                        jQuery(id).css ("height", height+"px");
                    }

                    var heightText = jQuery(id + " .box").css("height");
                    heightText = heightText.replace("px", "");
                    var marginTop = (height - heightText) * 0.45;
                    jQuery(id + " .box").css("margin-top", marginTop + "px");

                }
                else {
                    var fontSizeH1 = calculatedWindowWidth * 0.03 / calculatedPixelWidth;
                    var fontSizeP = fontSizeH1 * 0.6;
                    var widthText = calculatedWidthInPixels(0.09);
                    var margin = (window.innerWidth/2)-(widthText/2);

                    jQuery(id + " .box").css("width", widthText + "px");
                    jQuery(id + " .box").css("margin-left", margin + "px");
                    jQuery(id + " .box").css("margin-right", margin + "px");
                    jQuery(id + " .box").css("float", "none");
                    jQuery(id + " h1").css("font-size", fontSizeH1 + "px");
                    jQuery(id + " p").css("font-size", fontSizeP + "px");
                    jQuery(id + " p").css("margin-bottom", (fontSizeP/2) + "px");
                    jQuery(id + " input").css("font-size", fontSizeP + "px");
                    jQuery('input[type="submit"]').css("font-size", fontSizeP + "px");

                    var height = jQuery(id).css ("height");
                    height = height.replace ("px", "");
                    var top = jQuery("#menu").height();
                    var minimumHeight = window.innerHeight - top;
                    if (height < minimumHeight)
                    {
                        height = minimumHeight;
                        jQuery(id).css ("height", height+"px");
                    }

                    var heightText = jQuery(id + " .box").css("height");
                    heightText = heightText.replace("px", "");
                    var marginTop = (height - heightText) * 0.45;
                    jQuery(id + " .box").css("margin-top", marginTop + "px");
                }
            };
        };

        // Handle the intro section
        var FieldIntro = function () {
            var id = "#field_intro";
            // Update on changes
            this.update = function () {
                // Branch on window width
                if (calculatedWindowWidth < 0.12) {
                    // If the width is less than 10 cm assume mobile device or narrow browser, so place the items above each other

                    var fontSizeH1 = window.innerWidth * 0.1;
                    var fontSizeP = fontSizeH1 * 0.4;
                    var widthText = window.innerWidth * 0.8;
                    var margin = window.innerWidth * 0.1;

                    jQuery(id + " .box").css("width", widthText + "px");
                    jQuery(id + " .box").css("margin-left", margin + "px");
                    jQuery(id + " .box").css("margin-right", margin + "px");
                    jQuery(id + " .box").css("float", "none");
                    jQuery(id + " h1").css("font-size", fontSizeH1 + "px");
                    jQuery(id + " p").css("font-size", fontSizeP + "px");

                    var height = jQuery(id).css ("height");
                    height = height.replace ("px", "");
                    var minimumHeight = window.innerHeight / 1.4;
                    if (height < minimumHeight)
                    {
                        height = minimumHeight;
                        jQuery(id).css ("height", height+"px");
                    }

                    var heightText = jQuery(id + " .box").css("height");
                    heightText = heightText.replace("px", "");
                    var marginTop = (height - heightText) / 2;
                    jQuery(id + " .box").css("margin-top", marginTop + "px");

                }
                else {
                    var fontSizeH1 = calculatedWindowWidth * 0.03 / calculatedPixelWidth;
                    var fontSizeP = fontSizeH1 * 0.6;
                    var widthText = calculatedWidthInPixels(0.09);
                    var margin = (window.innerWidth/2)-(widthText/2);

                    jQuery(id + " .box").css("width", widthText + "px");
                    jQuery(id + " .box").css("margin-left", margin + "px");
                    jQuery(id + " .box").css("margin-right", margin + "px");
                    jQuery(id + " .box").css("float", "none");
                    jQuery(id + " h1").css("font-size", fontSizeH1 + "px");
                    jQuery(id + " p").css("font-size", fontSizeP + "px");

                    var height = jQuery(id).css ("height");
                    height = height.replace ("px", "");
                    var minimumHeight = window.innerHeight / 2;
                    if (height < minimumHeight)
                    {
                        height = minimumHeight;
                        jQuery(id).css ("height", height+"px");
                    }

                    var heightText = jQuery(id + " .box").css("height");
                    heightText = heightText.replace("px", "");
                    var marginTop = (height - heightText) / 2;
                    jQuery(id + " .box").css("margin-top", marginTop + "px");



                }
            };
        };

        // Handle the intro section
        var ProductsIntro = function () {
            var id = "#products_intro";
            // Update on changes
            this.update = function () {
                // Branch on window width
                if (calculatedWindowWidth < 0.12) {
                    // If the width is less than 10 cm assume mobile device or narrow browser, so place the items above each other

                    var fontSizeH1 = window.innerWidth * 0.1;
                    var fontSizeP = fontSizeH1 * 0.4;
                    var widthText = window.innerWidth * 0.8;
                    var margin = window.innerWidth * 0.1;

                    jQuery(id + " .box").css("width", widthText + "px");
                    jQuery(id + " .box").css("margin-left", margin + "px");
                    jQuery(id + " .box").css("margin-right", margin + "px");
                    jQuery(id + " .box").css("float", "none");
                    jQuery(id + " h1").css("font-size", fontSizeH1 + "px");
                    jQuery(id + " p").css("font-size", fontSizeP + "px");

                    var height = jQuery(id).css ("height");
                    height = height.replace ("px", "");
                    var minimumHeight = window.innerHeight / 2;
                    if (height < minimumHeight)
                    {
                        height = minimumHeight;
                        jQuery(id).css ("height", height+"px");
                    }

                    var heightText = jQuery(id + " .box").css("height");
                    heightText = heightText.replace("px", "");
                    var marginTop = (height - heightText) / 2;
                    jQuery(id + " .box").css("margin-top", marginTop + "px");

                }
                else {
                    var fontSizeH1 = calculatedWindowWidth * 0.03 / calculatedPixelWidth;
                    var fontSizeP = fontSizeH1 * 0.6;
                    var widthText = calculatedWidthInPixels(0.09);
                    var margin = (window.innerWidth/2)-(widthText/2);

                    jQuery(id + " .box").css("width", widthText + "px");
                    jQuery(id + " .box").css("margin-left", margin + "px");
                    jQuery(id + " .box").css("margin-right", margin + "px");
                    jQuery(id + " .box").css("float", "none");
                    jQuery(id + " h1").css("font-size", fontSizeH1 + "px");
                    jQuery(id + " p").css("font-size", fontSizeP + "px");

                    var height = jQuery(id).css ("height");
                    height = height.replace ("px", "");
                    var minimumHeight = window.innerHeight / 2;
                    if (height < minimumHeight)
                    {
                        height = minimumHeight;
                        jQuery(id).css ("height", height+"px");
                    }

                    var heightText = jQuery(id + " .box").css("height");
                    heightText = heightText.replace("px", "");
                    var marginTop = (height - heightText) / 2;
                    jQuery(id + " .box").css("margin-top", marginTop + "px");



                }
            };
        };

        // Adjust the menu
        var Menu = function () {

            // Set scroll min and max
            // This script does nothing befores scrolling to the mix
            // ... and nothing after scrolling behind max
            var minScroll = 100;
            var maxScroll = 400;

            // Save and set menu height max and min
            var heightMax = Number(jQuery("#menu").css("height").replace("px", "")); // Get from CSS
            var heightMin = 20;

            // Save and set font size max and min
            var fontSizeMax = Number(jQuery("#menu").css("font-size").replace("px", "")); // Get from CSS
            var fontSizeMin = 16;

            // Save and set font size max and min
            var imageSizeMax = Number(jQuery("#menu img").css("height").replace("px", "")); // Get from CSS
            var imageSizeMin = 20;

            this.update = function () {
                var browserZoomLevel = Math.round(window.devicePixelRatio * 100);
                jQuery("#zoom_level").text("pixelHeight: " + browserZoomLevel);

                var devicePixelRatio = window.devicePixelRatio;

                var sizeFactor = 1;
                if (calculatedWindowWidth < 0.20) {
                    sizeFactor = 1.9;
                }

                var scrollPixels = jQuery('body').scrollTop();


                // Calculate scroll level
                var scrollLevel = 0;
                if (scrollPixels >= minScroll && scrollPixels <= maxScroll) {
                    var scrollInterval = maxScroll - minScroll;
                    var scrollAboveMin = scrollPixels - minScroll;
                    scrollLevel = scrollAboveMin / scrollInterval;
                }
                if (scrollPixels > maxScroll) {
                    scrollLevel = 1;
                }

                // Set menu block height according to scroll
                var height = sizeFactor * (heightMax - ((heightMax - heightMin) * scrollLevel));
                jQuery("#menu").css("height", height + "px");

                // Set font size according to scroll
                var fontSize = sizeFactor * (fontSizeMax - ((fontSizeMax - fontSizeMin) * scrollLevel));
                jQuery("#menu").css("font-size", fontSize + "px");

                // Set image size according to scroll
                var imageSize = sizeFactor * (imageSizeMax - ((imageSizeMax - imageSizeMin) * scrollLevel));
                jQuery("#menu img").css("height", imageSize + "px");

            };

        };

        /**
         * Rotate the log on each page
         */
        var Logo = function () {
            var rotation = 0;
            var rotations = 2;
            var delta = -4;
            var interval;

            this.update = function () {
                var scrollTop = jQuery('body').scrollTop();
                scrollTop = scrollTop / 4;
                if (scrollTop > 50) {
                    if (interval !== undefined) {
                        clearInterval(interval);
                    }
                    scrollTop = scrollTop - 100;


                    while (scrollTop > 360) {
                        scrollTop = scrollTop - 360;
                    }

                    jQuery('#menu span img').css({'transform': 'rotate(-' + scrollTop + 'deg)'});
                }


            };

            var intervalFunction = function () {
                if (rotation < -180) {
                    delta = -3;
                }
                if (rotation < -270) {
                    delta = -2;
                }
                if (rotation < -330) {
                    delta = -1;
                }
                rotation = rotation + delta;

                if (rotation < -360) {
                    // Stop animation
                    clearInterval(interval);
                }

                jQuery('#menu span img').css({'transform': 'rotate(' + rotation + 'deg)'});
            };

            // Add interval to rotate logo once at load
            interval = setInterval(intervalFunction, 1);

        };

        /**
         * Get the dimensions and other values for structuring the layout
         */
        var updateDimensions = function () {
            var pixelWidth = 0.00026458333333333; // As defined
            var pixelHeight = 0.00026458333333333; // As defined
            var screenWidthCssPixels = window.screen.width;
            var screenHeightCssPixels = window.screen.height;
            var windowInnerWidth = window.innerWidth;
            var windowInnerHeight = window.innerHeight;
            var windowOuterWidth = window.outerWidth;
            var windowOuterHeight = window.outerHeight;
            var windowWidth = jQuery(window).width();
            var windowHeight = jQuery(window).height();
            var documentWidth = jQuery(document).width();
            var documentHeight = jQuery(document).height();
            var screenAvailWidth = window.screen.availWidth;
            var screenAvailHeight = window.screen.availHeight;
            var windowOrientation = window.orientation;

            var pixelSizeModificationFactor = 0.845; // Macbook Pro
            if (screenWidthCssPixels <= 740) {
                // For small screen sizes (mobile devices) modify the results
                pixelSizeModificationFactor = 0.65; // iOS
            }

            // Adjust width and height according to orientation

            // If rotated ....
            if (windowOrientation == 90 || windowOrientation == -90) {
                // ... and device still reports higher than wide (iOS) ...
                if (screenHeightCssPixels > screenWidthCssPixels) {
                    // ... swap height and width
                    var holder = screenHeightCssPixels;
                    screenHeightCssPixels = screenWidthCssPixels;
                    screenWidthCssPixels = holder;
                }
            }

            pixelWidth = pixelWidth * pixelSizeModificationFactor;
            pixelHeight = pixelHeight * pixelSizeModificationFactor;

            if (windowOrientation !== undefined) // If mobile device
            {
                // For mobile device use handle zoom
                pixelWidth = pixelWidth * screenWidthCssPixels / windowInnerWidth; // Calculate the width of a pixel
                pixelHeight = pixelHeight * screenWidthCssPixels / windowInnerWidth; // Calculate the height of a pixel

                // Set screen width to be the with of the app
                calculatedWindowWidth = screenWidthCssPixels * pixelWidth;
                calculatedWindowHeight = screenHeightCssPixels * pixelHeight;
            }
            else {
                // Desktop
                calculatedWindowWidth = windowInnerWidth * pixelWidth;
                calculatedWindowHeight = windowInnerHeight * pixelHeight;
            }

            calculatedPixelHeight = pixelHeight;
            calculatedPixelWidth = pixelWidth;

            /*
            var devicePixelRatio = window.devicePixelRatio || 1;
            dpcm_x = document.getElementById('testdiv').offsetWidth * devicePixelRatio;
            dpcm_y = document.getElementById('testdiv').offsetHeight * devicePixelRatio;
            */

            /*
            var info_text = "";
            info_text = info_text + "<p>"+"window_screen_width: "+screenWidthCssPixels + "</p>";
            info_text = info_text + "<p>"+"window_screen_height: "+screenHeightCssPixels + "</p>";
            info_text = info_text + "<p>"+"window_inner_width: "+windowInnerWidth + "</p>";
            info_text = info_text + "<p>"+"window_inner_height: "+windowInnerHeight + "</p>";
            info_text = info_text + "<p>"+"window_outer_width: "+windowOuterWidth + "</p>";
            info_text = info_text + "<p>"+"window_outer_height: "+windowOuterHeight+ "</p>";
            info_text = info_text + "<p>"+"pixelHeight: "+pixelHeight+ "</p>";
            info_text = info_text + "<p>"+"windowWidth: "+windowWidth + "</p>";
            info_text = info_text + "<p>"+"windowHeight: "+windowHeight + "</p>";
            info_text = info_text + "<p>"+"documentWidth: "+documentWidth + "</p>";
            info_text = info_text + "<p>"+"documentHeight: "+documentHeight+ "</p>";
            info_text = info_text + "<p>"+"screenAvailWidth: "+screenAvailWidth + "</p>";
            info_text = info_text + "<p>"+"screenAvailHeight: "+screenAvailHeight + "</p>";
            info_text = info_text + "<p>"+"pixelWidth: "+pixelWidth + "</p>";
            info_text = info_text + "<p>"+"window.devicePixelRatio: "+window.devicePixelRatio + "</p>";
            */
            /*      info_text = info_text + "<p>"+"dpcm_x: "+dpcm_x + "</p>";
                  info_text = info_text + "<p>"+"dpcm_y: "+dpcm_y+ "</p>";
                  */
            /*
            info_text = info_text + "<p>"+"calculatedWindowWidth: "+calculatedWindowWidth+ "</p>";
            info_text = info_text + "<p>"+"calculatedWindowHeight: "+calculatedWindowHeight+ "</p>";
            */
        };

        /**
         * Return the width in pixels
         * @param targetValue The width in meters
         * @param pixelWidth The pixel width
         * @returns {number}
         */
        var calculatedWidthInPixels = function (targetValue) {
            var result = targetValue / calculatedPixelWidth;
            return result;
        };


        // Start all js
        initialize();

    };

    // Create the animated userinterface object
    animatedUserInterface();

});</script>
    <style type='text/css'>.da-dk {  display: none;  }
.en-us {  display: inherit;  }
span.en-us {  display: inline;  }
li.en-us {  display: list-item;  }

html
{
    font-family: 'Encode Sans Condensed', sans-serif;
    font-weight: 400;
    padding: 0;
    margin: 0;
    width: 100%;
}

body {
    -webkit-text-size-adjust: 100%; /* Needed to have iOS browsers allow font scaling */
    margin: 0;
    width: 100%;
}

a, a:visited, a:active
{
    color: white;
    text-decoration: none;
}

h1
{
    font-weight: 400;
    font-size: 32px;
    margin: 0;
    padding: 0;
    border: none;
}

p
{
    font-size: 18px;
    margin: 0;
    padding: 0;
    border: none;
}

.section
{
    text-align: center;
    overflow-y: hidden;
    margin-top: 4px; /* White bar between sections */
}


#menu
{
    z-index: 1;
    position: fixed;
    width: 100%;
    top: 0;
    padding-top: 12px;
    padding-bottom: 12px;
    background: black;
    color: white;
    text-align: center;
    font-size: 30px;
    border-bottom-style: solid;
    border-bottom-color: white;
    border-bottom-width: 2px;
}

#footer
{
    padding-top: 12px;
    padding-bottom: 12px;
    background: black;
    color: white;
    text-align: center;
    font-size: 30px;
    border-top-style: solid;
    border-top-color: white;
    border-top-width: 2px;
}



#menu_spacer
{
    height: 50px;
}

#menu span
{
    padding-left: 1%;
    padding-right: 1%;
}

#menu img
{
    height: 36px;
    vertical-align: center;
}


.loggedin
{
    display: none;
}

#games a,
#games a:visited
{
    color: blue;
    text-decoration: none;
}

#game_intro {
    text-align: center;
}

#game_intro .text {

    margin-top: 50px;
}

#game_intro table {
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

#games table {
    margin-left:auto;
    margin-right:auto;
}

/* INTRO */
#intro,
#how_intro,
#training_intro,
#where_intro,
#field_intro,
#products_intro,
#pricing,
#games
{

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcfff4+0,e9e9ce+100;Wax+3D+%232 */
    background: #fcfff4; /* Old browsers */
    background: -moz-linear-gradient(top, #fcfff4 0%, #e9e9ce 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #fcfff4 0%,#e9e9ce 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#e9e9ce',GradientType=0 ); /* IE6-9 */
}

#login_intro a,
#login_intro a:visited
{
    color: blue;
}

#training_intro a,
#training_intro a:visited
{
    color: blue;
}


#login_intro
{

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcfff4+0,e9e9ce+100;Wax+3D+%232 */
    background: #fcfff4; /* Old browsers */
    background: -moz-linear-gradient(top, #fcfff4 0%, #e9e9ce 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #fcfff4 0%,#e9e9ce 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#e9e9ce',GradientType=0 ); /* IE6-9 */
}

#login_intro h1
{
    margin-bottom: 20px;
}

#how_video
{
    background-color: black;
}

/*field */
#games{
    padding-top: 60px;
    padding-bottom: 60px;
}
#field_intro a,
#field_intro a:visited,
#field_intro a:active
{
    color: blue;
    text-decoration: none;
}

#products_posters a,
#products_posters a:visited,
#products_posters a:active
{
    color: blue;
    text-decoration: none;
}

#products_posters
{

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcfff4+0,e9e9ce+100;Wax+3D+%232 */
    background: #fcfff4; /* Old browsers */
    background: -moz-linear-gradient(top, #fcfff4 0%, #e9e9ce 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #fcfff4 0%,#e9e9ce 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#e9e9ce',GradientType=0 ); /* IE6-9 */
}

#products_powerbank a,
#products_powerbank a:visited,
#products_powerbank a:active
{
    color: white;
    text-decoration: none;
}
#products_powerbank
{

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a9e4f7+0,0fb4e7+100;Ble+3D+%235 */
    background: #a9e4f7; /* Old browsers */
    background: -moz-linear-gradient(top,  #a9e4f7 0%, #0fb4e7 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #a9e4f7 0%,#0fb4e7 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #a9e4f7 0%,#0fb4e7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=0 ); /* IE6-9 */
}

#products_gloves a,
#products_gloves a:visited,
#products_gloves a:active{
    color: blue;
    text-decoration: none;
}
#products_gloves
{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcfff4+0,e9e9ce+100;Wax+3D+%232 */
    background: #fcfff4; /* Old browsers */
    background: -moz-linear-gradient(top, #fcfff4 0%, #e9e9ce 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #fcfff4 0%,#e9e9ce 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#e9e9ce',GradientType=0 ); /* IE6-9 */
}

#intro .box,
#how_intro .box
{
    float: left;
}

#intro #phone
{
    float: right;
    w_idth: 48%;
}

/* EXERCISE */

#exercise .transparent_box
{
    color: white;
    background-color: rgba(0,0,0,0.8);

}


#exercise
{

    background-image: url("https://s3.eu-central-1.amazonaws.com/goplaydot-www-files/GPD9wideOptimized.jpg");
    background-repeat: no-repeat;
    background-size: cover;

    color: white;
    background-color: black;
}

/* NEXT */

#next .transparent_box
{
    color: black;
    background-color: rgba(255,255,255,0.95);
}

#next
{

    background-image: url("https://s3.eu-central-1.amazonaws.com/goplaydot-www-files/GPD9wideOptimized.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-color: black;
}

#next a,
#next a:active,
#next a:visited
{
    color:blue;
}
/* FRESH AIR */

#air
{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a9e4f7+0,0fb4e7+100;Ble+3D+%235 */
    background: #a9e4f7; /* Old browsers */
    background: -moz-linear-gradient(top,  #a9e4f7 0%, #0fb4e7 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #a9e4f7 0%,#0fb4e7 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #a9e4f7 0%,#0fb4e7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=0 ); /* IE6-9 */

    color: white;
    text-align: center;
}


/* SOCIAL */
#social
{

    background-image: url("https://s3.eu-central-1.amazonaws.com/goplaydot-www-files/GoPlayDOTWater.jpg");
    background-repeat: no-repeat;
    background-size: cover;

    color: white;
    background-color: black;
}


/* LEARNING */

#learning .transparent_box
{
    color: white;
    background-color: rgba(0,0,0,0.6);
}

#learning
{

    background-image: url("https://s3.eu-central-1.amazonaws.com/goplaydot-www-files/GoPlayDOT-screenshot.jpg");
    background-repeat: no-repeat;
    background-size: cover;

    color: white;
    background-color: black;
}

/* HOW INTRO */
#how_install .transparent_box
{
    color: black;
    b_ackground-color: rgba(255,255,255,0.7);
}
#how_install
{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a9e4f7+0,0fb4e7+100;Ble+3D+%235 */
    background: #a9e4f7; /* Old browsers */
    background: -moz-linear-gradient(top,  #a9e4f7 0%, #0fb4e7 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #a9e4f7 0%,#0fb4e7 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #a9e4f7 0%,#0fb4e7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=0 ); /* IE6-9 */

    color: white;
    text-align: center;
}

#how_install img
{
    margin-top: 12px;
}

/* HOW DO */
#how_do .transparent_box
{
    color: white;
    background-color: rgba(0,0,0,0.6);
}
#how_do
{

    background-image: url("https://s3.eu-central-1.amazonaws.com/goplaydot-www-files/GPD9wideOptimized.jpg");
    background-repeat: no-repeat;
    background-size: cover;

    color: white;
    background-color: black;
}
/* HOW WHAT */
#how_what .transparent_box,
#training_do .transparent_box
{
    color: white;
    background-color: rgba(0,0,0,0.8);
}
#how_what,
#training_do
{

    background-image: url("https://s3.eu-central-1.amazonaws.com/goplaydot-www-files/GoPlayDOT-screenshot.jpg");
    background-repeat: no-repeat;
    background-size: cover;

    color: white;
    background-color: black;
}

/* HOW RULES*/
#how_rules .transparent_box
{
    color: black;
    background-color: rgba(0,0,0,0.0);
}
#how_rules
{

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcfff4+0,e9e9ce+100;Wax+3D+%232 */
    background: #fcfff4; /* Old browsers */
    background: -moz-linear-gradient(top, #fcfff4 0%, #e9e9ce 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #fcfff4 0%,#e9e9ce 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#e9e9ce',GradientType=0 ); /* IE6-9 */

    color: white;
    background-color: black;
}

/* GETTING STARTED */
#get_started
{

    color: black;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcfff4+0,e9e9ce+100;Wax+3D+%232 */
    background: #fcfff4; /* Old browsers */
    background: -moz-linear-gradient(top, #fcfff4 0%, #e9e9ce 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #fcfff4 0%,#e9e9ce 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#e9e9ce',GradientType=0 ); /* IE6-9 */
}

/* GETTING STARTED */
#next
{

    background-image: url("https://s3.eu-central-1.amazonaws.com/goplaydot-www-files/DOT-running-on-wall-Optimized.jpg");
    background-repeat: no-repeat;
    background-size: cover;

    color: white;
    background-color: black;
}







#products_official_playing_field
{
    background-image: url("https://s3.eu-central-1.amazonaws.com/goplaydot-www-files/VallensbaekPlayingField-Optimized.jpg");
}

#where_map
{
    background-color: black;
    height: 20cm;
}
#field_map
{
    background-color: black;
    height: 12cm;
}

#where_map #map
{
    height: 20cm;
    margin-top: 0cm;
    margin-bottom: 0cm;
    margin-left: 1cm;
    margin-right: 1cm;
}
#field_map #map
{
    height: 12cm;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
}

#where_automatic
{
    background-image: url("https://s3.eu-central-1.amazonaws.com/goplaydot-www-files/GoPlayDOT-screenshot.jpg");
}

#where_automatic .transparent_box
{
    background-color: black;
    opacity: 0.9;
    filter: alpha(opacity=90); /* For IE8 and earlier */
    color: white;
}


#where_official
{
    background-image: url("https://s3.eu-central-1.amazonaws.com/goplaydot-www-files/VallensbaekPlayingField-Optimized.jpg");
    color: white;
}

#products_teaching
{
    background-image: url("https://s3.eu-central-1.amazonaws.com/goplaydot-www-files/teaching.jpg");
    color: black;
}

#products_official_playing_field .transparent_box
{
    text-align: left;
    margin-top: 50px;
    margin-bottom: 50px;
    padding: 30px;
    background-color: #fff;
    opacity: 0.9;
    filter: alpha(opacity=90); /* For IE8 and earlier */
    padding-top: 20px;
    padding-bottom: 34px;
}

#products_official_playing_field .transparent_box a,
#products_official_playing_field .transparent_box a:hover,
#products_official_playing_field .transparent_box a:active
{
    color: blue;
    text-decoration: none;
}



#products_teaching .transparent_box
{
    text-align: left;
    margin-top: 50px;
    margin-bottom: 50px;
    padding: 30px;
    background-color: #fff;
    opacity: 0.9;
    filter: alpha(opacity=90); /* For IE8 and earlier */
    padding-top: 20px;
    padding-bottom: 34px;
}

#products_teaching .transparent_box a,
#products_teaching .transparent_box a:hover,
#products_teaching .transparent_box a:active
{
    color: blue;
    text-decoration: none;
}

#where_automatic .box
{
    text-align: center;
    width: 9cm;
    margin-left: 1cm;
    margin-top: 50px;
    margin-bottom: 50px;
    background-color: #fff;
    opacity: 0.9;
    filter: alpha(opacity=90); /* For IE8 and earlier */
    padding-top: 20px;
    padding-bottom: 34px;
}

#where_official .box
{
    text-align: left;
    margin-left: 60%;
    width: 30%;
    margin-right: 1%;
    margin-top: 50px;
    margin-bottom: 50px;
    padding: 30px;
    background-color: #fff;
    opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
    padding-top: 20px;
    padding-bottom: 34px;
}

#where_second .box a,
#where_second .box a:hover,
#where_second .box a:active
{
    color: black;
}

#plans
{
    background-color: black;
}

#plans span
{
    border-radius: 25px;
    background: linear-gradient(to bottom, #fcfff4 0%,#e9e9ce 100%);
    display: inline-block;
    margin: 2%;
    padding: 2%;
    width: 22%;
}


@media (width <= 30em) {

    #plans
    {
        background-color: black;
    }

    #plans span
    {
        border-radius: 25px;
        background: linear-gradient(to bottom, #fcfff4 0%,#e9e9ce 100%);
        display: block;
        margin: 2%;
        padding: 2%;
        width: 92%;
    }

    #plans h1,
    #plans h2,
    #plans span p
    {
        font-size: 3ex;
    }
}
   </style>
</head>

<body>

<div id="menu">

        <span class="en-us"><a href="/"><img src="https://s3.eu-central-1.amazonaws.com/goplaydot-www-files/app_logo_2017_small.png" /></a></span>
        <span class="da-dk"><a href="/-/da"><img src="https://s3.eu-central-1.amazonaws.com/goplaydot-www-files/app_logo_2017_small.png" /></a></span>
        <span class="en-us"><a href="/how">How</a></span>
        <span class="da-dk"><a href="/how/da">Hvordan</a></span>
        <span class="en-us"><a href="/where">Where</a></span>
        <span class="da-dk"><a href="/where/da">Hvor</a></span>
        <span class="en-us"><a href="/products">Pricing</a></span>
        <span class="da-dk"><a href="/products/da">Priser</a></span>
        <span class="en-us"><a target="_blank" href="/privacy">Privacy</a></span>
        <span class="da-dk"><a target="_blank" href="/privacy">Privacy</a></span>
        <span class="en-us"><a href="/sitemap.xml/da">🇩🇰</a></span>
        <span class="da-dk"><a href="/sitemap.xml/en">🇬🇧</a></span>
        <span class="en-us"><a href="/user">🔒</a></span>
        <span class="da-dk"><a href="/user/da">🔒</a></span>
</div>
<div id="menu_spacer"></div>


<div id="intro" class="section">

    <div class="box">
        <h1 class="en-us">Physical eSports for teams</h1>
        <h1 class="da-dk">Fysisk e-sport for hold</h1>
        <p class="en-us">Compete. Outside. Together.</p>
        <p class="da-dk">Sport. Udenfor. Sammen.</p>
        <p class="en-us">Exercise. Learning. Get started for free.</p>
        <p class="da-dk">Træning. Læring. Kom i gang gratis.</p>
    </div>
    <div id="phone">
        <img src="https://s3.eu-central-1.amazonaws.com/goplaydot-www-files/GoPlayDOT-mobilePhone.png"/>
    </div>
</div>


<div id="exercise" class="section">
    <div class="transparent_box">
        <h1 class="en-us">Physical</h1>
        <h1 class="da-dk">Fysisk</h1>
        <p class="en-us">Each player usually runs more than 100 meters pr. minute.</p>
        <p class="da-dk">Hver spiller løber normalt mere end 100 meter pr. minut.</p>
    </div>
</div>

<div id="air" class="section">
    <div class="transparent_box">
        <h1 class="en-us">Outdoors</h1>
        <h1 class="da-dk">Udendørs</h1>
        <p class="en-us">DOT is played outside. Fresh air whenever you practice or play DOT.</p>
        <p class="da-dk">DOT spilles udenfor. Frisk luft uanset om du træner eller konkurrerer.</p>
    </div>
</div>

<div id="social" class="section">
    <div class="transparent_box">
        <h1>Social</h1>
        <p class="en-us">Real games involve friends or other teams. You can, however, practice alone.</p>
        <p class="da-dk">Egentlige spil involverer venner eller andre hold. Du kan dog træne alene.</p>
    </div>
</div>

<div id="learning" class="section">
    <div class="transparent_box">
        <h1 class="en-us">Learning</h1>
        <h1 class="da-dk">Læring</h1>
        <p class="en-us">It takes 10 minutes to learn. But strategy, math, team collaboration and more will eventually reveal virtually unlimited areas of exploration.</p>
        <p class="da-dk">Det tager 10 minuter at lære. Men strategi, matematik, holdsamarbejde mm. vil hurtigt give nærmest uendelige muligheder for udforskning.</p>
    </div>
</div>

<div id="get_started" class="section">
    <div class="transparent_box">
        <h1 class="en-us">Used in</h1>
        <h1 class="da-dk">Bruges bl.a. i</h1>
        <div>
            <table style="margin-left: auto; margin-right: auto;">
                    <tr style="margin-bottom: 16px;">
                        <td style="margin: 16px;">
                            <span style="margin:16px">
                                <img height="120px" src="https://www.byplanlab.dk/sites/default/files/styles/medium/public/2020-03/Fredensborg.png?itok=gbv1cu5O">
                            </span>
                        </td>
                        <td style="margin: 16px;">
                            <span style="margin:16px">
                                <img height="120px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Mariagerfjord_Kommune_coa.svg/483px-Mariagerfjord_Kommune_coa.svg.png">
                            </span>
                        </td>
                        <td style="margin: 16px;">
                            <span style="margin:16px">
                                <img height="120px" src="https://www.esbjerg.dk/Files/Images/Om%20kommunen/Designguide/Logoer/EK_byvaaben250px.png">
                            </span>
                        </td> 
                    </tr>
                    <tr>
                        <td style="text-align: center;">
                            Fredensborg
                        </td>
                        <td style="text-align: center;">
                            Mariagerfjord
                        </td>
                        <td style="text-align: center;">
                            Esbjerg
                        </td>
                    </tr>
                
            </table>
        </div>
    </div>
</div>

<div id="get_started" class="section">
    <div class="transparent_box">
        <h1 class="en-us">Get started</h1>
        <h1 class="da-dk">Kom i gang</h1>
        <p class="en-us">Download the app, click start and you are playing DOT.</p>
        <p class="da-dk">Download app'en. Kilk start og du er i gang med DOT.</p>
        <a target="_blank" href="https://itunes.apple.com/dk/app/goplaydot/id1035941769"><img src="https://s3.eu-central-1.amazonaws.com/goplaydot-www-files/Download_on_the_App_Store_Badge.png"/></a>
        <a target="_blank" href="https://play.google.com/store/apps/details?id=com.goplaydot.dot"><img src="https://s3.eu-central-1.amazonaws.com/goplaydot-www-files/google-play-badge.png"/></a> 
    </div>
</div>

<div id="next" class="section">
    <div class="transparent_box">
        <h1 class="en-us">Next</h1>
        <h1 class="da-dk">Videre</h1>
        <p class="en-us"><a href="/how">Learn how to play ></a></p>
        <p class="da-dk"><a href="/how/da">Lær at spille DOT ></a></p>
        <p class="en-us"><a href="/where">Find the best location ></a></p>
        <p class="da-dk"><a href="/where/da">Find et godt sted ></a></p>
        <p class="en-us"><a href="/products">Get serious ></a></p>
        <p class="da-dk"><a href="/products/da">Bliv seriøs ></a></p>
    </div>
</div>



<div id="footer" style="text-align: center;">
        <p class="en-us">GoPlayDOT. Developed and published by Aperify.com ApS. DK-2000 Frederiksberg. Denmark. CVR: DK35204350. Contact +45 2022 0044.</p>
        <p class="da-dk">GoPlayDOT. Udviklet og udgivet af Aperify.com ApS. 2000 Frederiksberg. CVR: DK35204350. Kontakt +45 2022 0044.</p>
</div>
<!-- Start of LiveChat (www.livechatinc.com) code -->
<script type="text/javascript">
window.__lc = window.__lc || {};
window.__lc.license = 10832527;
(function() {
  var lc = document.createElement('script'); lc.type = 'text/javascript'; lc.async = true;
  lc.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.livechatinc.com/tracking.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(lc, s);
})();
</script>
<noscript>
<a href="https://www.livechatinc.com/chat-with/10832527/" rel="nofollow">Chat with us</a>,
powered by <a href="https://www.livechatinc.com/?welcome" rel="noopener nofollow" target="_blank">LiveChat</a>
</noscript>
<!-- End of LiveChat code --></body>

</html>