@font-face {
    font-family: Proxima;
    src: url(../craftcrest_libraries/fonts/proximanovalight.ttf);
}

@font-face {
    font-family: Jellyka;
    src: url(../craftcrest_libraries/fonts/jellyka.ttf);
}

@font-face {
    font-family: Roboto;
    src: url(../craftcrest_libraries/fonts/roboto.ttf);
}

@media screen and (min-width: 1281px) {

    body {
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
        overflow-x: hidden;
        background-position: left top;
        background-image: url(../craftcrest_files/module_graphic/signal-port.jpg);
        background-repeat: no-repeat;
        background-color: #000000;
        background-attachment: fixed;
        background-size: 100%;
    }

    /*TOP-NAVIGATION*/

    #home {
        position: absolute;
        top: 5px;
        margin-left: 75px;
        height: 40px;
        width: 40px;
    }

    .cc-top-text {
        position: absolute;
        top: 5px;
        margin-left: 125px;
        height: 40px;
        width: auto;
    }

    .cc-top-text > a, p {
        display: table-cell;
        vertical-align: middle;
        height: 40px;
        color: #333333;
        font-family: Roboto;
        font-size: 1.2em;
        font-style: normal;
        font-weight: bold;
        margin: 0;
        padding: 0;
    }

    .bottom-text {
        height: 50px !important;
        font-weight: normal !important;
        line-height: 15px;
    }

    .cc-top-text > a:hover {
        display: table-cell;
        vertical-align: middle;
        height: 40px;
        color: #333333;
        font-family: Roboto;
        font-size: 1.2em;
        font-style: normal;
        font-weight: bold;
        text-decoration: none;
        margin: 0;
        padding: 0;
    }

    .cc-top-menu {
        float: right;
        height: 50px;
        width: auto;
    }

    .cc-top-menu > ul {
        margin: 0;
        padding: 0;
    }

    .cc-top-menu > ul > li {
        display: inline;
        height: 50px;
        display: table-cell;
        vertical-align: middle;
        font-family: Roboto;
        font-size: 1em;
        padding-right: 25px;
        list-style-type: none;
        text-decoration: none;
    }

    .cc-top-menu > ul > li > a {
        color: #666666;
    }

    .cc-top-menu > ul > li > a > img {
        height: 32px;
        width: 32px;
        background-size: cover;
    }

    .cc-top-menu > ul > li > a:hover {
        color: #111111;
    }

    #cc-top {
        position: fixed;
        right: 0;
        top: 0%;
        height: 50px;
        background-color: #ffffff;
        width: 100%;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
        z-index: 1000000000;
    }

    #cc-bottom {
        position: fixed;
        right: 0;
        bottom: 0%;
        height: 50px;
        background-color: #ffffff;
        width: 100%;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
        z-index: 1000000000;
    }

    .cc-top {
        width: 100%;
        height: 50px;
        margin-left: auto;
        margin-right: auto;
    }

    .cc-bottom {
        width: 100%;
        height: 50px;
        margin-left: auto;
        margin-right: auto;
    }

    .menu-img {
        position: relative;
        top: 1px;
        display: inline;
        height: 50px;
        padding-right: 10px !important;
        list-style-type: none;
        opacity: 0.4;
    }

    .menu-btn {
        position: absolute;
        top: 5px;
        left: 5px;
        width: 40px;
        height: 40px;
        border: solid;
        border-width: 1px;
        border-color: #FFFFFF;
        border-radius: 20px;
        z-index: 1000000000;
        opacity: 0.4;
    }

    .menu-btn:hover {
        position: absolute;
        top: 5px;
        left: 5px;
        width: 40px;
        height: 40px;
        border: solid;
        border-width: 1px;
        border-color: #FFFFFF;
        border-radius: 20px;
        z-index: 1000000000;
        transition-property: all;
        transition-duration: 0.2s;
        transition-delay: 0.2s;
        transition-timing-function: linear;
    }

    #top-navigation-path {
        position: fixed;
        right: 0;
        top: 50px;
        height: 50px;
        background-color: transparent;
        width: 100%;
        z-index: 10000000;
    }

    .cc-top-b {
        width: 1280px;
        height: 50px;
        margin-left: auto;
        margin-right: auto;
    }

    .triangle-topleft {
        position: absolute;
        margin-left: 125px;
        padding: 0;
        top: 0px;
        width: 50px;
        height: 0;
        border-top: 50px solid #ffffff;
        border-right: 75px solid transparent;
    }

    .triangle-topright {
        position: absolute;
        margin-left: 25px;
        padding: 0;
        top: 0px;
        width: auto;
        height: 0;
        border-top: 50px solid #ffffff;
        border-left: 75px solid transparent;
    }

    .cc-top-b-text > a {
        position: relative;
        top: -35px;
        padding: 5px;
        display: inline;
        height: 40px;
        color: #111111;
        font-family: Proxima;
        font-style: normal;
        text-decoration: none;
        font-size: 1em;
        margin: 0;
        padding: 0;
    }

    .cc-top-b-text > a:hover {
        position: relative;
        top: -35px;
        padding: 5px;
        display: inline;
        height: 40px;
        color: #111111;
        font-family: Proxima;
        font-style: normal;
        text-decoration: underline;
        font-size: 1em;
        margin: 0;
        padding: 0;
    }

    .cc-top-menu-region {
        position: absolute;
        float: left;
        height: 50px;
        width: auto;
        margin-left: 225px;
    }

    .cc-top-menu-region > ul {
        margin: 0;
        padding: 0;
    }

    .cc-top-menu-region > ul > li {
        display: inline;
        height: 50px;
        display: table-cell;
        vertical-align: middle;
        font-family: Roboto;
        font-size: 1em;
        padding-right: 50px;
        list-style-type: none;
        text-decoration: none;
    }

    .cc-top-menu-region > ul > li > a {
        height: 50px;
        display: table-cell;
        vertical-align: middle;
        font-style: normal;
        color: #666666;
        text-decoration: none;
    }

    .cc-top-menu-region > ul > li > a:hover {
        font-style: normal;
        color: #111111;
        text-decoration: underline;
    }

    .cc-top-menu-region > ul > li > a > img {
        height: 32px;
        width: 32px;
        background-size: cover;
    }

    /*    .cc-top-menu-home {
        position: absolute;
        height: 50px;
        width: auto;
        font-family: Roboto;
        padding-left: 60px;
        left: 50%;
        transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
    }*/

    .region-a {
        position: absolute;
        top: 50px;
        height: auto;
        width: 640px;
        border-right: solid;
        border-color: #cccccc;
        border-width: 1px;
    }

    .region-a > ul {
        position: absolute;
        width: 490px;
        padding: 25px !important;
        height: auto;
        max-height: 250px;
        overflow-y: scroll;
        top: 50px;
        left: 50px;
        margin: 0;
        padding: 0;
        z-index: 1000;
    }

    .region-a > ul > li {
        width: auto;
        height: 100px;
        position: relative;
        top: 0px;
        margin: 0;
        padding: 0;
        font-family: Roboto;
        font-size: 1em;
        color: #111111;
        font-family: Roboto;
        font-size: 1em;
        color: #111111;
    }

    .region-a > ul > li > img {
        position: absolute;
        top: 0px;
        margin-left: 0px;
        height: 32px;
        width: 32px;
    }

    .region-a > ul > li > strong {
        position: relative;
        top: 0px;
        margin-left: 50px !important;
        font-weight: normal;
    }

    .region-a > ul > li > a {
        position: relative;
        top: auto;
        margin-left: 50px !important;
        font-weight: normal;
    }

    .region-b {
        position: absolute;
        top: 50px;
        height: auto;
        width: 640px;
        margin-left: 640px;
    }

    .region-b > ul {
        position: absolute;
        width: 490px;
        padding: 25px !important;
        height: auto;
        max-height: 250px;
        overflow-y: scroll;
        top: 50px;
        right: 50px;
        margin: 0;
        padding: 0;
        z-index: 1000;
    }

    .region-b > ul > li {
        width: auto;
        height: 100px;
        position: relative;
        top: 0px;
        margin: 0;
        padding: 0;
        font-family: Roboto;
        font-size: 1em;
        color: #111111;
        font-family: Roboto;
        font-size: 1em;
        color: #111111;
    }

    .region-b > ul > li > img {
        position: absolute;
        top: 0px;
        margin-left: 0px;
        height: 32px;
        width: 32px;
    }

    .region-b > ul > li > strong {
        position: relative;
        top: 0px;
        margin-left: 50px !important;
        font-weight: normal;
    }

    .region-b > ul > li > a {
        position: relative;
        top: auto;
        margin-left: 50px !important;
        font-weight: normal;
    }

/*    .cc-top-menu-search > ul > li > a {
        height: 50px;
        display: table-cell;
        vertical-align: middle;
        font-style: normal;
        color: #111111;
        text-decoration: none;
    }

    .cc-top-menu-search > ul > li > a:hover {
        font-style: normal;
        color: #111111;
        text-decoration: underline;
    }*/

    .language-region-panel {
        margin-left: auto;
        margin-right: auto;
        width: 1280px;
        height: 100%;
    }

    .cc-menu {
        background: #ffffff;
        z-index: 1000000;
        position: fixed;
    }

    .cc-menu-vertical {
        width: 240px;
        height: 100%;
        top: 0;
        z-index: 100000000;
    }

    .cc-menu-horizontal {
        width: 100%;
        height: 100%;
        height: -webkit- calc(100% - 50px);
        height: -moz- calc(100% - 50px);
        height: calc(100% - 50px);
        left: 0;
        z-index: 100000000;
        overflow: hidden;
        background-image: url(../craftcrest_files/module_graphic/region.png);
        background-position: center left;
        background-repeat: no-repeat;
    }

    .cc-menu-top {
        top: -96%;
    }

    .cc-menu-bottom {
        bottom: -150px;
    }

    .cc-menu-top.cc-menu-open {
        top: 0px;
    }

    .cc-menu-bottom.cc-menu-open {
        bottom: 0px;
    }

    .cc-menu-push {
        overflow-x: hidden;
        position: relative;
        left: 0;
    }

    .cc-menu-push-toright {
        left: 240px;
    }

    .cc-menu-push-toleft {
        left: -240px;
    }

    .cc-menu,
    .cc-menu-push {
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    .pb6-zone {
        position: absolute;
        height: 42px;
        width: 154px;
        bottom: 50px;
        right: 50px;
        z-index: 1;
    }

    /*CRESTLOADER*/

/*    #crestloader-pl {
        position: fixed;
        left: 0px;
        top: 50px;
        height: 100%;
        height: -webkit- calc(100% - 100px);
        height: -moz- calc(100% - 100px);
        height: calc(100% - 100px);
        width: 100%;
        z-index: 100000000;
        background-color: #FFFFFF;
        background-image: url(../craftcrest_files/module_graphic/witaj.png);
        background-position: left center;
        background-repeat: no-repeat;
    }*/

    .crestredirect {
        position: fixed;
        left: 0px;
        top: 50px;
        height: 100%;
        height: -webkit- calc(100% - 100px);
        height: -moz- calc(100% - 100px);
        height: calc(100% - 100px);
        width: 100%;
        z-index: 100000000;
        background-color: #FFFFFF;
        background-image: url(../craftcrest_files/module_graphic/error.png);
        background-position: left center;
        background-repeat: no-repeat;
    }

    .crestlock {
        height: 100%;
        width: 1280px;
        margin-left: auto;
        margin-right: auto;
    }

    .crestlocktext {
        position: fixed;
        top: 10%;
        height: auto;
        width: 1280px;
        font-family: Proxima;
        font-size: 3em;
        text-align: center;
        color: #cccccc;
    }

    .crestbox {
        position: fixed;
        top: 450px;
        left: 50%;
        height: 200px;
        width: 400px;
        transform: translateX(-50%) translateY(-40%);
        -moz-transform: translateX(-50%) translateY(-40%);
        -o-transform: translateX(-50%) translateY(-40%);
        -webkit-transform: translateX(-50%) translateY(-40%);
        -ms-transform: translateX(-50%) translateY(-40%);
    }

    .cresttext {
        top: 0px;
        margin-left: 0px;
        height: 200px;
        width: 400px;
        font-family: Roboto;
        font-size: 0.8em;
        color: #cccccc;
        text-align: center;
        display: table-cell;
        vertical-align: middle;
    }

    .cresttext > video {
        width: 50px;
        height: 50px;
        border-radius: 50px;
    }

    .crestinfo {
        position: absolute;
        top: 100px;
        left: 50%;
        transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        height: 200px;
        width: 1280px;
        display: inline;
    }

    .crestinfobox-1 {
        position: absolute;
        left: 50px;
        width: 320px;
        height: 100px;
        background-image: url(../craftcrest_files/ui_symbols/smartphone-step.png);
        background-position: center;
        background-repeat: no-repeat;
    }

    .crestinfobox-2 {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        width: 320px;
        height: 100px;
        background-image: url(../craftcrest_files/ui_symbols/internet-step.png);
        background-position: center;
        background-repeat: no-repeat;
    }

    .crestinfobox-3 {
        position: absolute;
        right: 50px;
        width: 320px;
        height: 100px;
        background-image: url(../craftcrest_files/ui_symbols/headphones-step.png);
        background-position: center;
        background-repeat: no-repeat;
    }

    /*SECTIONS*/

    #m-path-aa {
        position: relative;
        right: 0px;
        padding: 0px;
        padding-bottom: 0px;
        opacity: 0.75;
        top: 0px;
        width: 50px;
        height: 100%;
        background-color: #111111;
        box-shadow: 0px 0px 2px #000000;
        background-image: url(../craftcrest_files/module_graphic/mpa.png);
        background-repeat: repeat-y;
        background-position: center;
        z-index: 1000;
    }

    #m-path-bb {
        position: relative;
        right: 0px;
        padding: 0px;
        padding-bottom: 0px;
        opacity: 0.75;
        top: 0px;
        width: 50px;
        height: 100%;
        background-color: #111111;
        box-shadow: 0px 0px 2px #000000;
        background-image: url(../craftcrest_files/module_graphic/mpb.png);
        background-repeat: repeat-y;
        background-position: center;
        z-index: 1000;
    }

    #m-path-cc {
        position: relative;
        right: 0px;
        padding: 0px;
        padding-bottom: 0px;
        opacity: 0.75;
        top: 0px;
        width: 50px;
        height: 100%;
        background-color: #111111;
        box-shadow: 0px 0px 2px #000000;
        background-image: url(../craftcrest_files/module_graphic/mpc.png);
        background-repeat: repeat-y;
        background-position: center;
        z-index: 1000;
    }

    /*PANELS*/

    #cc-1, #cc-1A, /*#cc-1C,*/ #cc-2B, /*#cc-1B,*/ /*#cc-3,*/ #cc-3A, /*#cc-4,*/ /*#cc-5,*/ /*#cc-6,*/ /*#cc-7,*/ #cc-8, #panel-8, #cc-9 {
        position: relative;
        top: 50px;
        height: 600px;
        padding-bottom: 5px;
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 5px;
    }

    #cc-1A, #cc-1C, #cc-2B, /*#cc-1B,*/ /*#cc-3,*/ #cc-3A, /*#cc-4, #cc-5,*/ #cc-6, #cc-9 {
        width: 100%;
        background: #ffffff;
    }

    #cc-1B {
        position: relative;
        top: 50px;
        height: 600px;
        padding-bottom: 5px;
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 5px;
        width: 100%;
        background: #ffffff;
    }

    #cc-1C {
        position: relative;
        top: 50px;
        height: 600px;
        padding-bottom: 5px;
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 5px;
        z-index: 1000000;
    }

    #cc-2, #cc-2A {
        position: relative;
        top: 50px;
        height: 600px;
        padding-bottom: 5px;
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 5px;
        background-color: #FFFFFF;
        z-index: 1000000;
    }

/*    #cc-3 {
        position: relative;
        top: 50px;
        height: 600px;
        padding-bottom: 5px;
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 5px;
        z-index: 1000000;
    }

    #cc-5 {
        position: relative;
        top: 50px;
        height: 600px;
        padding-bottom: 5px;
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 5px;
        z-index: 1000000;
    }*/

    #cc-6 {
        position: relative;
        top: 50px;
        height: 600px;
        padding-bottom: 5px;
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 5px;
        z-index: 1000000;
    }

    #cc-mediaport {
        position: relative;
        top: 50px;
        height: 720px;
        background-color: #ffffff;
        /*padding-bottom: 55px;*/
        padding-left: 0px;
        padding-right: 0px;
        /*padding-top: 55px;*/
    }

/*    #cc-7 {
        position: relative;
        top: 50px;
        height: 600px;
        padding-bottom: 5px;
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 5px;
        width: 100%;
        background: #000000;
    }*/

    #cc-bottom-nav {
        position: relative;
        top: 50px;
        height: 700px;
        background: #000000;
        padding-bottom: 5px;
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 5px;
    }

    #cc-x-end {
        position: relative;
        height: 50px;
        top: 50px;
        padding: 0;
    }

    .cc-a {
        position: absolute;
        top: 0px;
        margin-left: 50px;
        width: 590px;
        height: 100%;
        /*border-right: solid;
        border-right-color: #ECECEC;
        border-width: 0.5px;*/
    }

    .cc-b {
        position: absolute;
        top: 0px;
        margin-left: 640px;
        width: 590px;
        height: 100%;
        /*border-left: solid;
        border-left-color: #ECECEC;
        border-width: 0.5px;*/
    }

    .hideme {
        opacity: 0;
    }

    .low-player {
        display: none;
    }

    .high-player {
        display: normal;
    }

/*    #cc-9A {
        display: none;
    }*/

    .panel {
        width: 1280px;
        height: 600px;
        margin-left: auto;
        margin-right: auto;
    }

/*    .start-panel {
        position: relative;
        padding-top: 10px;
        width: 1180px;
        height: 140px;
        margin-left: auto;
        margin-right: auto;
    }*/

    .mid-panel {
        width: 1280px;
        height: 140px;
        margin-left: auto;
        margin-right: auto;
    }

    .nav-panel {
        width: 1280px;
        height: 700px;
        margin-left: auto;
        margin-right: auto;
    }

    .end-panel {
        width: 1280px;
        height: 720px;
        margin-left: auto;
        margin-right: auto;
    }

    .map-panel {
        width: 100%;
        height: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    .home-panel {
        width: 1280px;
        height: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .home-interactive-path {
        position: absolute;
        top: 50px;
        min-height: 530px;
        height: auto;
        width: 1280px;
        overflow-y: scroll !important;
        overflow-x: hidden;
    }

    .hometable {
        border-collapse: collapse;
        border-spacing: 0;
        position: absolute;
        top: 0px;
        width: 1180px;
        height: auto;
        left: 50%;
        transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
    }

    #cc-logoport, #cc-slideport {
        position: relative;
        top: 50px;
        height: 140px;
        background: #ffffff;
        padding-bottom: 5px;
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 5px;
    }

    #map {
        width: 100%;
        height: 600px;
        z-index: 3;
    }

/*    #init-panel {
        position: absolute;
        top: 0px;
        padding: 0;
        padding-top: 5px;
        padding-bottom: 5px;
        left: 0px;
        height: 600px;
        width: 100%;
        background-color: #F9F9F9, transparent;
    }

    .init-panel {
        height: 600px;
        width: 1280px;
        margin-left: auto;
        margin-right: auto;
    }

    .init-panel-text {
        position: absolute;
        height: 150px;
        width: 1280px;
        text-align: center;
        font-family: Proxima-Regular, sans-serif, Arial;
    }

    .init-panel-text > h1 {
        position: absolute;
        top: 25px !important;
        width: 1280px;
        text-align: center !important;
    }

    .init-panel-box-1 {
        position: absolute;
        top: 150px;
        margin-left: 50px;
        height: 350px;
        width: 590px;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
        font-family: Proxima-Regular, sans-serif, Arial;
        z-index: 10;
    }

    .init-panel-box-2 {
        position: absolute;
        top: 0px;
        margin-left: 640px;
        height: 500px;
        width: 590px;
        font-family: Proxima-Regular, sans-serif, Arial;
        z-index: 1;
    }*/

/*    .path-icon {
        position: absolute;
        top: 0px;
        margin-left: 0px;
        height: 150px;
        width: 150px;
    }*/

/*    .pn-icon {
        position: absolute;
        top: 37px;
        right: 25px;
        height: 75px;
        width: 75px;
        background-size: 100%;
        background-position: center;
        background-repeat: no-repeat;
    }*/

/*    .path-text {
        position: absolute;
        top: 0px;
        margin-left: 150px;
        height: 150px;
        padding-left: 25px;
        padding-right: 25px;
        width: auto;
    }

    .path-text > strong {
        font-family: Proxima;
        font-size: 1.75em;
        height: 150px;
        width: auto;
        display: table-cell;
        vertical-align: middle;
    }*/

/*    .slider {
        width: 100%;
        height: 100%;
        background: #4FC2E5;
        font-family: 'Roboto';
        color: #fafafa;
        position: absolute;
    }*/

/*    .cell-box {
        position: relative;
        top: 50px;
        height: auto;
        width: 360px;
    }*/

/*    .cell-a {
        position: absolute;
        height: 50px;
        width: 50px;
        top: 0px;
        margin-left: 0px;
    }

    .cell-b {
        position: absolute;
        height: 50px;
        width: 200px;
        top: 0px;
        margin-left: 75px;
        font-family: Roboto;
        font-size: 1em;
        text-decoration: none;
    }

    .cell-c {
        position: absolute;
        height: 50px;
        width: 50px;
        top: 0px;
        margin-left: 275px;
        font-family: Roboto;
        font-size: 1em;
        text-decoration: none;
        text-align: center;
    }*/

    .nav-box1 {
        position: absolute;
        top: 0px;
        height: 600px;
        width: 440px;
        margin-left: 50px;
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .nav-box2 {
        position: absolute;
        top: 0px;
        height: 600px;
        width: 440px;
        margin-left: 490px;
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .nav-box3 {
        position: absolute;
        top: 0px;
        height: 600px;
        width: 300px;
        margin-left: 930px;
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .ce-box {
        position: absolute;
        top: 50px;
        height: 400px;
        width: 300px;
    }

    .copyright-box {
        position: absolute;
        top: 550px;
        margin-left: 0px;
        width: 300px;
        height: 100px;
        text-align: justify;
        font-family: Roboto;
        font-size: 0.7em;
        font-weight: normal;
        color: #ffffff;
    }

    .copyright-box > img {
        display: inline-block;
        float: right;
        height: 25px;
        width: auto;
        background-size: cover;
    }

    /*TEXT*/

    .maintext-front {
        position: absolute;
        top: 235px;
        font-family: Proxima;
        font-size: 3.45em;
        text-align: left;
        color: #FFFFFF;
    }

    .maintext-end {
        position: absolute;
        top: 400px;
        font-family: Proxima;
        font-size: 3.45em;
        text-align: left;
        color: #FFFFFF;
    }

    .maintext {
        position: absolute;
        top: 235px;
        font-family: Proxima;
        font-size: 3.45em;
        text-align: left;
        color: #111111;
    }

/*    .t-span0 {
        position: absolute;
        top: 375px;
        margin-left: 564px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 21.5px 0 21.5px 21px;
        border-color: transparent transparent transparent #ffffff;
    }*/

/*    .t-span {
        position: absolute;
        top: 350px;
        margin-left: 564px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 21.5px 0 21.5px 21px;
        border-color: transparent transparent transparent #ffffff;
    }*/

/*    .maintext1 {
        position: absolute;
        top: 322px;
        width: 540px;
        text-align: justify;
        font-family: Proxima;
        font-size: 1.75em;
        font-weight: normal;
        color: #111111;
        border: solid;
        padding: 10px;
        border-width: 1px;
        border-color: #FFFFFF;
        border-radius: 20px;
        box-shadow: 0px 0px 5px #000000;
    }

    .maintext2 {
        position: absolute;
        top: 322px;
        width: 540px;
        text-align: justify;
        font-family: Proxima;
        font-size: 1.75em;
        font-weight: normal;
        color: #FFFFFF;
        border: solid;
        padding: 10px;
        border-width: 1px;
        border-color: #FFFFFF;
        border-radius: 20px;
        box-shadow: 0px 0px 5px #000000;
    }*/

    .maintext3 {
        position: absolute;
        top: 200px;
        margin-left: 150px;
        width: 440px;
        padding-right: 25px;
        font-family: Proxima;
        font-size: 1.75em;
        text-align: left;
        font-weight: normal;
        color: #FFFFFF;
    }

    .maintext-m {
        position: absolute;
        top: 235px;
        font-family: Proxima;
        font-size: 3.45em;
        text-align: left;
        color: #111111;
    }

/*    .maintext2-m {
        position: absolute;
        top: 322px;
        font-family: Proxima;
        font-size: 1.75em;
        text-align: left;
        font-weight: normal;
        color: #111111;
    }*/

    .mid-text1 {
        height: 140px;
        display: table-cell;
        vertical-align: middle;
        width: 540px;
        text-align: right;
        padding-left: 50px;
        padding-right: 50px;
        font-family: Proxima;
        font-size: 1.75em;
        color: #111111;
        text-decoration: none;
        font-style: normal;
    }

    .mid-text1:hover {
        height: 140px;
        display: table-cell;
        vertical-align: middle;
        width: 540px;
        text-align: right;
        padding-left: 50px;
        padding-right: 50px;
        font-family: Proxima;
        font-size: 1.75em;
        color: #111111;
        text-decoration: underline;
        font-style: normal;
    }

    .mid-text2 {
        height: 140px;
        display: table-cell;
        vertical-align: middle;
        width: 540px;
        text-align: left;
        padding-left: 50px;
        padding-right: 50px;
        font-family: Proxima;
        font-size: 1.75em;
        color: #111111;
        text-decoration: none;
        font-style: normal;
    }

    .mid-text2:hover {
        height: 140px;
        display: table-cell;
        vertical-align: middle;
        width: 540px;
        text-align: left;
        padding-left: 50px;
        padding-right: 50px;
        font-family: Proxima;
        font-size: 1.75em;
        color: #111111;
        text-decoration: underline;
        font-style: normal;
    }

    .detail-text {
        position: relative;
        top: 25px;
        height: auto;
        line-height: 1.35em;
        width: 390px;
        left: 150px !important;
        padding: 25px;
        border-radius: 20px;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
        font-family: Roboto;
        color: #111111;
        font-size: 1em;
        font-weight: normal;
        text-align: justify;
        display: block;
    }

    .detail-text1 {
        position: relative;
        top: 25px;
        height: auto;
        line-height: 1.35em;
        width: 390px;
        margin-left: 0px;
        margin-right: 150px;
        padding: 25px;
        border-radius: 20px;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
        font-family: Roboto;
        color: #111111;
        font-size: 1em;
        font-weight: normal;
        text-align: justify;
        display: block;
    }

    .detail-text1 > img {
        height: 32px;
        width: auto;
        max-width: 100%;
        max-height: 100%;
    }

    .detail-text-link {
        position: relative;
        top: 0px;
        height: auto;
        line-height: 1.35em;
        width: 390px;
        left: 150px !important;
        padding-top: 50px !important;
        padding: 25px;
        font-family: Roboto;
        color: #111111;
        font-size: 1em;
        font-weight: normal;
        text-align: justify;
        display: block;
    }

/*    .detail-text-onboard {
        position: relative;
        top: 25px;
        height: 500px;
        line-height: 1.35em;
        width: 290px;
        padding: 25px;
        padding-right: 140px;
        font-family: Roboto;
        color: #FFFFFF;
        font-size: 1em;
        font-weight: normal;
        text-align: justify;
        overflow: auto;
        z-index: 1;
        display: block;
    }*/

    .detail-text2 {
        position: relative;
        height: auto;
        width: 390px;
        line-height: 1.35em;
        margin-left: 150px;
        padding: 25px;
        top: 25px;
        border-radius: 20px;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
        font-family: Roboto;
        color: #111111;
        font-size: 1em;
        font-weight: normal;
        text-align: justify;
        display: block;
    }

    .detail-text2 > img {
        height: 32px;
        width: auto;
        max-width: 100%;
        max-height: 100%;
    }

/*    .detail-text-s {
        position: absolute;
        height: auto;
        width: 440px;
        line-height: 1.35em;
        padding-left: 150px;
        padding-top: 25px;
        padding-right: 50px;
        padding-bottom: 50px;
        top: 0px;
        font-family: Roboto;
        color: #FFFFFF;
        font-size: 1em;
        font-weight: normal;
        text-align: justify;
    }*/

    .detail-form2 {
        position: relative;
        height: auto;
        width: 390px;
        line-height: 1.35em;
        left: 150px;
        padding: 25px;
        top: 25px;
        background-color: transparent;
        font-family: Roboto;
        color: #111111;
        font-size: 1em;
        font-weight: normal;
        text-align: left;
        display: block;
        z-index: 1000;
    }

    /*BUTTONS*/

    /*.enter-button {
        position: absolute;
        margin-left: 250px;
        bottom: 210px;
        width: 340px;
        height: 74px;
        border: solid;
        border-width: 1px;
        border-color: #FFFFFF;
        border-radius:20px;
        background-color: transparent;
        font-family: Proxima;
        color: white;
        font-size: 18px;
        z-index: 1;
        cursor: pointer;
    }

    .next-button {
        position: relative;
        left: 0px;
        width: 160px;
        padding: 0;
        padding-left: 50px;
        margin: 0;
        height: 40px;
        border: solid;
        border-width: 1px;
        border-color: #111111;
        border-radius:20px;
        background-color: #111111;
        font-family: Roboto;
        color: #ffffff;
        font-size: 14px;
        z-index: 1;
        cursor: pointer;
    }

    .next-button > span {
        position: absolute;
        left: 0px;
        width: 40px;
        height: 40px;
        border-right: solid;
        border-width: 1px;
        border-color: transparent;
        background-color: transparent;
        text-align: center;
        font-size: 32px;
        padding: 4px;
        color: #ffffff;
        z-index: 1;
        cursor: pointer;
    }

    .back-button {
        position: relative;
        left: 0px;
        width: 160px;
        padding: 0;
        padding-left: 50px;
        margin: 0;
        height: 40px;
        border: solid;
        border-width: 1px;
        border-color: #111111;
        border-radius:20px;
        background-color: #111111;
        font-family: Roboto;
        color: #ffffff;
        font-size: 14px;
        z-index: 1;
        cursor: pointer;
    }

    .back-button > span {
        position: absolute;
        left: 0px;
        width: 40px;
        height: 40px;
        border-right: solid;
        border-width: 1px;
        border-color: transparent;
        background-color: transparent;
        text-align: center;
        font-size: 32px;
        padding: 4px;
        color: #ffffff;
        z-index: 1;
        cursor: pointer;
    }*/

    .start-menu-btn {
        position: absolute;
        width: 50px;
        height: 50px;
        border-radius: 50px;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -o-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        cursor: pointer !important;
        z-index: 1000;
    }

    .start-menu-btn:hover {
        position: absolute;
        width: 50px;
        height: 50px;
        border-radius: 50px;
        box-shadow: 0px 0px 50px #5100ff;
        transition-property: all;
        transition-duration: 0.2s;
        transition-delay: 0.2s;
        transition-timing-function: linear;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -o-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        cursor: pointer !important;
        z-index: 1000;
    }

    .start-menu-btn > img {
        cursor: pointer !important;
        z-index: 1000000;
    }

/*    .start-btn {
        position: absolute;
        height: 32px;
        width: 32px;
    }*/

    #router-btn {
        position: absolute;
        top: 5px;
        width: 40px;
        height: 40px;
        border: solid;
        border-width: 1px;
        border-color: #FFFFFF;
        border-radius: 20px;
        left: 50%;
        transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        z-index: 1000000000;
    }

    #router-btn:hover {
        position: absolute;
        top: 5px;
        width: 40px;
        height: 40px;
        border: solid;
        border-width: 1px;
        border-color: #FFFFFF;
        border-radius: 20px;
        z-index: 1000000000;
        transition-property: all;
        transition-duration: 0.2s;
        transition-delay: 0.2s;
        transition-timing-function: linear;
        left: 50%;
        transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
    }

    #router-btn-logo {
        position: absolute;
        top: 0px;
        margin-left: 0px;
        width: 50px;
        height: 50px;
        border: solid;
        border-width: 1px;
        border-color: #6600cc;
        border-radius: 50px;
        -webkit-box-shadow: inset 0px 0px 0px 2px #6600cc;
        -moz-box-shadow: inset 0px 0px 0px 2px #6600cc;
        box-shadow: inset 0px 0px 0px 2px #6600cc;
    }

    .logoport-video {
        position: absolute;
        top: 50px;
        width: 50px;
        height: 50px;
        left: 50%;
        transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
    }

/*    .menu-btn-up {
        position: absolute;
        top: 5px;
        width: 40px;
        height: 40px;
        border: solid;
        border-width: 1px;
        border-color: #FFFFFF;
        border-radius: 20px;
        left: 50%;
        transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        z-index: 1000000000;
    }

    .menu-btn-up:hover {
        position: absolute;
        top: 5px;
        width: 40px;
        height: 40px;
        border: solid;
        border-width: 1px;
        border-color: #FFFFFF;
        border-radius: 20px;
        z-index: 1000000000;
        box-shadow: 0px 0px 50px #6800ff;
        transition-property: all;
        transition-duration: 0.2s;
        transition-delay: 0.2s;
        transition-timing-function: linear;
        left: 50%;
        transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
    }*/

    #menu-btn-logo {
        position: absolute;
        top: 0px;
        margin-left: 0px;
        width: 32px;
        height: 32px;
        padding: 5px;
    }

    /*GRAPHIC*/

    .crestinfobox-musicpath-map {
        position: absolute;
        top: 30px;
        left: 150px;
        width: 440px;
        height: 550px;
        background-image: url(../craftcrest_files/module_graphic/craftcrest-cc-1a-graphic.png);
        background-position-x: left;
        background-repeat: no-repeat;
    }

    .crestinfobox-musicpath-list {
        position: absolute;
        top: 30px;
        left: 150px;
        width: 440px;
        height: 550px;
        background-image: url(../craftcrest_files/module_graphic/craftcrest-cc-1b-graphic.png);
        background-position-x: left;
        background-repeat: no-repeat;
    }

    .crestinfobox-musicpath-howitworks {
        position: absolute;
        top: 20px;
        left: 150px;
        width: 440px;
        height: 550px;
        background-image: url(../craftcrest_files/module_graphic/craftcrest-cc-2-graphic.png);
        background-position-x: left;
        background-repeat: no-repeat;
    }

/*    .crestinfobox-book {
        position: absolute;
        top: 49px;
        left: 150px;
        width: 512px;
        height: 512px;
        background-image: url(../craftcrest_files/store/book-pl-cover-b.png);
        background-size: cover;
        background-repeat: no-repeat;
    }*/

/*    .crestinfobox-terra {
        position: absolute;
        top: 30px;
        left: 150px;
        width: 440px;
        height: 550px;
        background-image: url(../craftcrest_files/module_graphic/craftcrest-cc-4-terra.png);
        background-position-x: left;
        background-repeat: no-repeat;
    }*/

    .crestinfobox-service {
        position: absolute;
        top: 30px;
        left: 150px;
        width: 440px;
        height: 550px;
        background-image: url(../craftcrest_files/module_graphic/craftcrest-cc-5-graphic.png);
        background-position-x: left;
        background-repeat: no-repeat;
    }

    .crestinfobox-about {
        position: absolute;
        top: 30px;
        left: 150px;
        width: 440px;
        height: 550px;
        background-image: url(../craftcrest_files/module_graphic/craftcrest-cc-6-graphic.png);
        background-position-x: left;
        background-repeat: no-repeat;
    }

    .crestinfobox-marawel {
        width: 100%;
        height: 100%;
        background-image: url(../craftcrest_files/module_graphic/craftcrest-cc-7-graphic.png);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100%;
    }

    .runner-1 {
        position: absolute;
        top: 200px;
        margin-left: 50px;
        height: 72px;
        width: 72px;
        background-image: url(../craftcrest_files/ui_symbols/smartphone1.png);
        background-position: center;
        background-repeat: no-repeat;
        border: solid;
        border-width: 1px;
        border-color: #FFFFFF;
        border-radius: 20px;
        background-color: transparent;
        box-shadow: 0px 0px 5px #000000;
        z-index: 1;
    }

    .runner-2 {
        position: absolute;
        top: 200px;
        margin-left: 150px;
        height: 72px;
        width: 72px;
        background-image: url(../craftcrest_files/ui_symbols/runner.png);
        background-position: center;
        background-repeat: no-repeat;
        border: solid;
        border-width: 1px;
        border-color: #FFFFFF;
        border-radius: 20px;
        background-color: transparent;
        box-shadow: 0px 0px 5px #000000;
        z-index: 1;
    }

    .runner-2b {
        position: absolute;
        top: 200px;
        margin-left: 150px;
        height: 72px;
        width: 72px;
        background-image: url(../craftcrest_files/ui_symbols/signal-port.png);
        background-position: center;
        background-repeat: no-repeat;
        border: solid;
        border-width: 1px;
        border-color: #FFFFFF;
        border-radius: 20px;
        background-color: transparent;
        box-shadow: 0px 0px 5px #000000;
        z-index: 1;
    }

    .runner-3 {
        position: absolute;
        top: 200px;
        margin-left: 250px;
        height: 72px;
        width: 72px;
        background-image: url(../craftcrest_files/ui_symbols/headphones.png);
        background-position: center;
        background-repeat: no-repeat;
        border: solid;
        border-width: 1px;
        border-color: #FFFFFF;
        border-radius: 20px;
        background-color: transparent;
        box-shadow: 0px 0px 5px #000000;
        z-index: 1;
    }

    .runner-4 {
        position: absolute;
        margin-left: 150px;
        bottom: 210px;
        height: 72px;
        width: 72px;
        background-image: url(../craftcrest_files/ui_symbols/speedrunner.png);
        background-position: center;
        background-repeat: no-repeat;
        border: solid;
        border-width: 1px;
        border-color: #FFFFFF;
        border-radius: 20px;
        background-color: transparent;
        box-shadow: 0px 0px 5px #000000;
        z-index: 1;
    }

    .runner-4hca {
        position: absolute;
        margin-left: 250px;
        bottom: 210px;
        height: 72px;
        width: 72px;
        background-image: url(../craftcrest_files/ui_symbols/healthcare1.png);
        background-position: center;
        background-repeat: no-repeat;
        border: solid;
        border-width: 1px;
        border-color: #FFFFFF;
        border-radius: 20px;
        background-color: transparent;
        box-shadow: 0px 0px 5px #000000;
        z-index: 1;
    }

    .runner-4hcb {
        position: absolute;
        margin-left: 350px;
        bottom: 210px;
        height: 72px;
        width: 72px;
        background-image: url(../craftcrest_files/ui_symbols/healthcare2.png);
        background-position: center;
        background-repeat: no-repeat;
        border: solid;
        border-width: 1px;
        border-color: #FFFFFF;
        border-radius: 20px;
        background-color: transparent;
        box-shadow: 0px 0px 5px #000000;
        z-index: 1;
    }

    .runner-4hcc {
        position: absolute;
        margin-left: 450px;
        bottom: 210px;
        height: 72px;
        width: 72px;
        background-image: url(../craftcrest_files/ui_symbols/butterfly1.png);
        background-position: center;
        background-repeat: no-repeat;
        border: solid;
        border-width: 1px;
        border-color: #FFFFFF;
        border-radius: 20px;
        background-color: transparent;
        box-shadow: 0px 0px 5px #000000;
        z-index: 1;
    }

    .runner-6-woodcraft {
        position: absolute;
        margin-left: 150px;
        bottom: 210px;
        height: 72px;
        width: 72px;
        background-image: url(../craftcrest_files/ui_symbols/lab.png);
        background-position: center;
        background-repeat: no-repeat;
        border: solid;
        border-width: 1px;
        border-color: #FFFFFF;
        border-radius: 20px;
        box-shadow: 0px 0px 5px #000000;
    }

    .runner-8 {
        position: absolute;
        top: 200px;
        margin-left: 0px;
        height: 72px;
        width: 72px;
        background-image: url(../craftcrest_files/ui_symbols/smartphone2.png);
        background-position: center;
        background-repeat: no-repeat;
        border: solid;
        border-width: 1px;
        border-color: #FFFFFF;
        border-radius: 20px;
        background-color: transparent;
        box-shadow: 0px 0px 5px #000000;
        z-index: 1;
    }

    .runner-9 {
        position: absolute;
        top: 200px;
        margin-left: 100px;
        height: 72px;
        width: 72px;
        background-image: url(../craftcrest_files/ui_symbols/book.png);
        background-position: center;
        background-repeat: no-repeat;
        border: solid;
        border-width: 1px;
        border-color: #FFFFFF;
        border-radius: 20px;
        background-color: transparent;
        box-shadow: 0px 0px 5px #000000;
        z-index: 1;
    }

    .runner-10 {
        position: absolute;
        top: 200px;
        margin-left: 200px;
        height: 72px;
        width: 72px;
        background-image: url(../craftcrest_files/ui_symbols/marker.png);
        background-position: center;
        background-repeat: no-repeat;
        border: solid;
        border-width: 1px;
        border-color: #FFFFFF;
        border-radius: 20px;
        background-color: transparent;
        box-shadow: 0px 0px 5px #000000;
        z-index: 1;
    }

/*    .butterfly {
        position: absolute;
        height: 128px;
        width: 128px;
        top: 150px;
        margin-left: 0px;
        background-image: url(../craftcrest_files/ui_symbols/butterfly2.png);
    }*/

/*    .coffee {
        position: absolute;
        height: 128px;
        width: 128px;
        top: 150px;
        margin-left: 0px;
        background-image: url(../craftcrest_files/ui_symbols/coffee.png);
        background-size: cover;
        background-position: center;
    }*/

    .head {
        position: absolute;
        top: 150px;
        height: 128px;
        width: 128px;
        margin-left: 0px;
        background-image: url(../craftcrest_files/ui_symbols/head.png);
    }

    .aer-box-perspective {
        position: absolute;
        top: 49px;
        height: 512px;
        width: 512px;
        left: 50%;
        background-image: url(../craftcrest_files/store/aer-box-perspective.png);
        background-position: left center;
        background-repeat: no-repeat;
        background-size: cover;
        transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
    }

    .book-box-perspective {
        position: absolute;
        top: 49px;
        height: 512px;
        width: 512px;
        left: 50%;
        background-image: url(../craftcrest_files/store/book-pl-wpzcp-cover.png);
        background-position: left center;
        background-repeat: no-repeat;
        background-size: cover;
        transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
    }

    .terra-box-perspective {
        position: absolute;
        top: 49px;
        height: 512px;
        width: 512px;
        left: 50%;
        background-image: url(../craftcrest_files/store/terra-box-perspective.png);
        background-position: left center;
        background-repeat: no-repeat;
        background-size: cover;
        transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
    }

    .aer-box-top {
        position: absolute;
        top: 49px;
        height: 512px;
        width: 512px;
        left: 50%;
        background-image: url(../craftcrest_files/store/aer-box-top.png);
        background-position: left center;
        background-repeat: no-repeat;
        background-size: cover;
        transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
    }

    /*.book-logo {
        position: absolute;
        top: 200px;
        height: 284px;
        width: 200px;
        left: 50%;
        transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        box-shadow: 0px 0px 5px #000000;
        z-index: 1;
    }

    .book-logo-app {
        position: absolute;
        top: 200px;
        height: 284px;
        width: 520px;
        left: 50%;
        transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
    }*/

    .personal-logo, .personal-logo2 {
        position: absolute;
        top: 100px;
        height: 400px;
        width: 200px;
        left: 50%;
        transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        box-shadow: 0px 0px 5px #000000;
        z-index: 1;
    }

    .full-coa {
        position: absolute;
        top: 100px;
        height: 400px;
        width: 557px;
        left: 50%;
        transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
    }

    .coa {
        position: absolute;
        top: 100px;
        height: 400px;
        width: 200px;
        left: 50%;
        transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        z-index: 1;
    }

    .cloud {
        position: absolute;
        bottom: 200px;
        right: 75px;
        width: 0;
        height: 0;
        width: 200px;
        height: 100px;
        background: #F1F1F1;
        -moz-border-radius: 100px / 50px;
        -webkit-border-radius: 100px / 50px;
        border-radius: 100px / 50px;
        opacity: 0.95;
    }

    .cloudbh {
        position: absolute;
        bottom: 300px;
        right: 50px;
        width: 0;
        height: 0;
        width: 100px;
        height: 50px;
        background: #F1F1F1;
        -moz-border-radius: 100px / 50px;
        -webkit-border-radius: 100px / 50px;
        border-radius: 100px / 50px;
        opacity: 0.75;
    }

    .mountain-center-layer {
        position: absolute;
        bottom: 0px;
        margin-left: 0px;
        height: 250px;
        width: 1280px;
        background-image: url(../craftcrest_files/module_graphic/mountains-c.png);
        background-position: bottom;
        background-position-x: center;
        background-repeat: no-repeat;
    }

    .mountain-right-layer {
        position: absolute;
        bottom: 0px;
        right: 0;
        height: 50px;
        width: 600px;
        background-image: url(../craftcrest_files/module_graphic/mountains-r.png);
        background-position: bottom;
        background-position-x: right;
        background-repeat: no-repeat;
        z-index: 1;
    }

    .mountain-left-layer {
        position: absolute;
        bottom: 0px;
        left: 0px;
        height: 100px;
        width: 600px;
        background-image: url(../craftcrest_files/module_graphic/mountains-l.png);
        background-position: bottom;
        background-position-x: left;
        background-repeat: no-repeat;
    }

    .mountain-right-black-layer {
        position: absolute;
        bottom: 0px;
        right: 0;
        height: 50px;
        width: 600px;
        background-image: url(../craftcrest_files/module_graphic/mountains-r-black.png);
        background-position: bottom;
        background-position-x: right;
        background-repeat: no-repeat;
    }

    .mountain-left-black-layer {
        position: absolute;
        bottom: 0px;
        left: 0px;
        height: 100px;
        width: 600px;
        background-image: url(../craftcrest_files/module_graphic/mountains-l-black.png);
        background-position: bottom;
        background-position-x: left;
        background-repeat: no-repeat;
    }

    .spruce-x-1 {
        position: absolute;
        bottom: 20px;
        height: 128px;
        width: 128px;
        left: 150px;
        background-image: url(../craftcrest_files/module_graphic/spruce-xs.png);
        background-position: center;
        background-repeat: no-repeat;
    }

    .spruce-x-2 {
        position: absolute;
        bottom: 0px;
        height: 128px;
        width: 128px;
        left: 0px;
        background-image: url(../craftcrest_files/module_graphic/spruce-xs.png);
        background-position: center;
        background-repeat: no-repeat;
    }

    .spruce-x-3A {
        position: absolute;
        bottom: 25px;
        height: 128px;
        width: 128px;
        right: 275px;
        background-image: url(../craftcrest_files/module_graphic/spruce-x.png);
        background-position: center;
        background-repeat: no-repeat;
    }

    .spruce-x-3B {
        position: absolute;
        bottom: 35px;
        height: 128px;
        width: 128px;
        right: 250px;
        background-image: url(../craftcrest_files/module_graphic/spruce-x.png);
        background-position: center;
        background-repeat: no-repeat;
    }

    .spruce-x-3C {
        position: absolute;
        bottom: 15px;
        height: 128px;
        width: 128px;
        right: 205px;
        background-image: url(../craftcrest_files/module_graphic/spruce-x.png);
        background-position: center;
        background-repeat: no-repeat;
    }

    .spruce-x-3D {
        position: absolute;
        bottom: 42px;
        height: 128px;
        width: 128px;
        right: 180px;
        background-image: url(../craftcrest_files/module_graphic/spruce-x.png);
        background-position: center;
        background-repeat: no-repeat;
    }

    .spruce-x-3E {
        position: absolute;
        bottom: 27px;
        height: 128px;
        width: 128px;
        right: 155px;
        background-image: url(../craftcrest_files/module_graphic/spruce-x.png);
        background-position: center;
        background-repeat: no-repeat;
    }

    .spruce-x-3F {
        position: absolute;
        bottom: 25px;
        height: 128px;
        width: 128px;
        right: 120px;
        background-image: url(../craftcrest_files/module_graphic/spruce-x.png);
        background-position: center;
        background-repeat: no-repeat;
    }

    .spruce-x-4A {
        position: absolute;
        bottom: 5px;
        height: 128px;
        width: 128px;
        right: 250px;
        background-image: url(../craftcrest_files/module_graphic/spruce-xs.png);
        background-position: center;
        background-repeat: no-repeat;
    }

    .spruce-x-4B {
        position: absolute;
        bottom: 0px;
        height: 128px;
        width: 128px;
        right: 200px;
        background-image: url(../craftcrest_files/module_graphic/spruce-xs.png);
        background-position: center;
        background-repeat: no-repeat;
    }

    .spruce-x-4C {
        position: absolute;
        bottom: 15px;
        height: 128px;
        width: 128px;
        right: 155px;
        background-image: url(../craftcrest_files/module_graphic/spruce-xs.png);
        background-position: center;
        background-repeat: no-repeat;
    }

    .spruce-x-4D {
        position: absolute;
        bottom: 10px;
        height: 128px;
        width: 128px;
        right: 105px;
        background-image: url(../craftcrest_files/module_graphic/spruce-xs.png);
        background-position: center;
        background-repeat: no-repeat;
    }

    .spruce-x-4E {
        position: absolute;
        bottom: 10px;
        height: 128px;
        width: 128px;
        right: 25px;
        background-image: url(../craftcrest_files/module_graphic/spruce-x.png);
        background-position: center;
        background-repeat: no-repeat;
    }

    .spruce-x-5 {
        position: absolute;
        bottom: 30px;
        height: 128px;
        width: 128px;
        right: 300px;
        background-image: url(../craftcrest_files/module_graphic/spruce-xs.png);
        background-position: center;
        background-repeat: no-repeat;
    }

    .spruce-b1 {
        position: absolute;
        height: 128px;
        width: 128px;
        bottom: 0px;
        right: 25%;
        background-image: url(../craftcrest_files/module_graphic/spruce.png);
    }

    .spruce-b2 {
        position: absolute;
        height: 128px;
        width: 128px;
        bottom: 0px;
        left: 0%;
        background-image: url(../craftcrest_files/module_graphic/spruce.png);
    }

    .spruce-bs {
        position: absolute;
        height: 512px;
        width: 512px;
        bottom: 0px;
        right: 0px;
        background-image: url(../craftcrest_files/module_graphic/spruce-s.png);
    }

    .iarc-ue {
        position: absolute;
        top: 550px;
        margin-left: 0px;
        height: 100px;
        width: 74px;
        background-image: url(../craftcrest_files/iarc/gdpr.png);
        background-position: left top;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 20px;
        z-index: 1000;
    }

    .iarc-1 {
        position: absolute;
        top: 550px;
        margin-left: 100px;
        height: 74px;
        width: 74px;
        background-image: url(../craftcrest_files/iarc/swiadectwo-zgodnosci-solidny-regulamin-2-200.png);
        background-position: left top;
        background-repeat: no-repeat;
        background-size: cover;
        z-index: 1000;
    }

    .iarc-2 {
        position: absolute;
        top: 550px;
        margin-left: 200px;
        height: 100px;
        width: 74px;
        background-image: url(../craftcrest_files/iarc/google-play-protect.png);
        background-position: left top;
        background-repeat: no-repeat;
        z-index: 1000;
    }

/*    .isbn-1 {
        position: absolute;
        top: 510px;
        margin-left: 300px;
        height: 77px;
        width: 128px;
        box-shadow: 0px 0px 5px #000000;
        z-index: 1000000;
    }

    .isbn-2 {
        position: absolute;
        top: 510px;
        margin-left: 464px;
        height: 89px;
        width: 89px;
        box-shadow: 0px 0px 5px #000000;
        z-index: 1000000;
    }*/

    /*SHADOWEYES*/

    .hidden > div {
        display: block;
        -webkit-transition: opacity 600ms ease-out;
        -moz-transition: opacity 600ms ease-out;
        transition: opacity 600ms ease-out;
    }

    .visible > div {
        display: none;
        -webkit-transition: opacity 600ms ease-out;
        -moz-transition: opacity 600ms ease-out;
        transition: opacity 600ms ease-out;
    }

    .eagleeye {
        position: absolute;
        top: 0px;
        height: 600px;
        padding: 0;
        padding-top: 5px;
        padding-bottom: 5px;
        right: 0;
        left: 0;
        background: #ffffff;
        z-index: 1000;
        display: normal;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
        pointer-events: auto;
        opacity: 0.95;
    }

    .hawkeye {
        position: absolute;
        top: 0px;
        height: 600px;
        padding: 0;
        padding-top: 5px;
        padding-bottom: 5px;
        right: 0;
        left: 0;
        background: #ffffff;
        z-index: 1000;
        display: normal;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
        pointer-events: auto;
    }

    .cateye {
        position: absolute;
        top: 0px;
        height: 600px;
        padding-top: 0px;
        right: 0;
        left: 0;
        background: #000000;
        z-index: 1000;
        display: normal;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
        pointer-events: auto;
        opacity: 1;
    }

/*    .eyecrest {
        font-family: Proxima;
        font-size: 3.75em;
        color: #FFFFFF;
        text-align: center;
    }

    .eyecrest-2 {
        font-family: Proxima;
        font-size: 1.75em;
        color: #FFFFFF;
        text-align: center;
        line-height: 1.5em;
    }*/

    /*TOOLTIPS*/

    .dbai-box {
        position: relative;
        top: 0px;
        height: auto;
        min-height: 100px;
        max-height: 500px;
        line-height: 1.35em;
        width: 390px;
        border: solid 1px #efefef;
        border-radius: 20px;
        background-color: #ffffff;
        z-index: 1;
    }

    .dbai-logo {
        position: absolute;
        height: 40px;
        width: 40px;
        bottom: -20px;
        right: -20px;
        z-index: 1;
    }

    .dbai-logo > img {
        height: 40px;
        width: 40px;
        background-size: cover;
    }

    .dbai-attention-logo {
        position: absolute;
        height: 40px;
        width: 40px;
        top: -20px;
        right: -20px;
        z-index: 1;
    }

    .dbai-attention-logo > img {
        height: 40px;
        width: 40px;
        background-size: cover;
    }

    .dbai-incubator {
        position: absolute;
        height: auto;
        min-height: 80px;
        width: 370px;
        margin: 10px;
        background-image: url(../craftcrest_files/ui_icons/dbai.png);
        background-position: center;
        background-repeat: no-repeat;
    }

    .dbai-incubator-text {
        font-family: Roboto;
        color: gray;
        font-size: small;
        font-weight: normal;
        text-align: justify;
    }

    .dbai-name-text {
        position: absolute;
        height: 40px;
        width: auto;
        bottom: -40px;
        left: 10px;
        z-index: 1;
        font-family: Roboto;
        color: #dddddd;
        font-size: x-small;
        font-weight: normal;
        text-align: left;
    }

    #cc-tooltip-technology {
        position: fixed;
        bottom: 75px;
        left: 75px;
        height: 125px;
        width: 225px;
        background-color: #6600cc;
        box-shadow: 0 2px 5px 0 #6600cc;
        z-index: 1000000000;
        animation-name: tooltip-technology;
        animation-duration: 1s;
        background-image: url(../craftcrest_files/ui_icons/click.png);
        background-position: bottom right;
        background-repeat: no-repeat;
        background-size: 20%;
        border-radius: 20px;
    }

    #cc-tooltip-platform {
        position: fixed;
        bottom: 225px;
        left: 75px;
        height: 125px;
        width: 225px;
        background-color: #6600cc;
        box-shadow: 0 2px 5px 0 #6600cc;
        z-index: 1000000000;
        animation-name: tooltip-platform;
        animation-duration: 1s;
        background-image: url(../craftcrest_files/ui_icons/click.png);
        background-position: bottom right;
        background-repeat: no-repeat;
        background-size: 20%;
        border-radius: 20px;
    }

    #cc-tooltip-platform:hover, #cc-tooltip-technology:hover {
        -webkit-transform: scale(0.99);
        -ms-transform: scale(0.99);
        transform: scale(0.99);
        -webkit-transition: all 0.95s ease;
        -moz-transition: all 0.95s ease;
        -o-transition: all 0.95s ease;
        transition: all 0.95s ease;
        border-radius: 20px;
    }

    @keyframes tooltip-technology {
        0% {
            bottom: 60px;
        }

        25% {
            bottom: 65px;
        }

        50% {
            bottom: 70px;
        }

        100% {
            bottom: 75px;
        }
    }

    @keyframes tooltip-platform {
        0% {
            bottom: 210px;
        }

        25% {
            bottom: 215px;
        }

        50% {
            bottom: 220px;
        }

        100% {
            bottom: 225px;
        }
    }

    .cc-tooltip-head {
        position: absolute;
        top: 0px;
        margin-left: 0px;
        height: 50px;
        width: 225px;
        border-bottom: solid 1px #cccccc;
    }

    .cc-tooltip-head > p {
        font-family: Roboto;
        font-size: 1em;
        color: #ffffff;
        padding: 5px;
        padding-left: 75px;
    }

    .cc-tooltip-body {
        position: absolute;
        top: 50px;
        margin-left: 0px;
        height: 75px;
        width: 225px;
    }

    .cc-tooltip-img {
        position: absolute;
        margin-left: 0px;
        top: 0px;
        height: 50px;
        width: 50px;
        padding: 12.5px;
        background-size: cover;
    }

    .cc-tooltip-text {
        position: absolute;
        margin-left: 75px;
        top: 0px;
        height: 40px;
        width: 140px;
        padding: 5px;
        font-family: Roboto;
        font-size: 0.7em;
        text-decoration: none;
        font-style: normal !important;
        color: #ffffff;
        display: inline;
    }

    .cc-tooltip-text > img {
        height: 24px;
        width: 24px;
        background-size: cover;
    }

    .cc-tooltip-link {
        position: absolute;
        top: 100px;
        margin-left: 75px;
        height: 20px;
        width: 95px;
        border-top: solid 1px #cccccc;
        padding-top: 5px;
        padding-left: 5px;
        font-family: Roboto;
        font-size: 0.7em;
        text-decoration: none;
        font-style: normal !important;
        color: #ffffff;
        display: inline;
    }

    .cc-tooltip-link > img {
        height: 16px;
        width: 16px;
        background-size: cover;
    }

    /*PROGRESS*/

    .progress-box {
        position: absolute;
        height: 200px;
        width: 200px;
        top: 200px;
        margin-left: 150px;
        opacity: 0.95;
    }

    .tox-progress {
        position: relative
    }

    .tox-progress .radial-outer, .tox-progress .radial-inner {
        border-radius: 50%
    }

    .tox-progress .radial-inner, .tox-progress .radial-mask-1, .tox-progress .radial-mask-2, .tox-progress .radial-mask-3, .tox-progress .tox-progress-content {
        position: relative
    }

    .tox-progress .radial-mask-1, .tox-progress .radial-mask-2, .tox-progress .radial-mask-3 {
        transform-origin: bottom center
    }

    .tox-progress .radial-mask-1, .tox-progress .radial-mask-3 {
        transform: rotate(90deg)
    }

    .tox-progress .radial-mask-2 {
        transform: rotate(270deg)
    }
}

/*Copyrights

/Butterfly Craftcrest 2025 Blackberry. RTM T.X.
© 2013-2025 Butterfly Co. Entertainment Technologies.
© Marawel. Crafted with love by Marawel. Made in EU.

Butterfly Co. Entertainment Technologies.,
Wojska Polskiego 22 B, 58-200 Dzierżoniów, Poland,
NIP: 8821948224, REGON: 364721520, D-U-N-S®: 421878044,

Tel. +48 794 001 996,
e-mail: contact@craftcrest.com,

# The Butterfly logo is registered under the patent mark UPRP/Z416421.
# Aer technology and the way it works are protected by the document UPRP P.404459 WIPO ST 10/CPL404459 and constitute the intellectual property of the creator.*/