#pngPreloaderBG {
    background: radial-gradient(#002448, #000e20)
}

#pngLogoWrapper {
    transform-origin: center bottom;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    bottom: 2%;
    width: 10vh;
    height: 3vh
}

.pngLogoImg {
    background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIxLjAuMiwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTEuNCAxNDEuMSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTExLjQgMTQxLjEiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8dGl0bGU+QXNzZXQgMjwvdGl0bGU+CjxnIGlkPSJMYXllcl8yIj4KCTxnIGlkPSJMYXllcl8xLTIiPgoJCQoJCQk8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzFfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjI1NS42ODkyIiB5MT0iMTM1LjA3IiB4Mj0iMjU1LjY4OTIiIHkyPSItMTEuNTkiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgMCAxMzMuMDcpIj4KCQkJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I0ZGRkZGRiIvPgoJCQk8c3RvcCAgb2Zmc2V0PSIwLjUiIHN0eWxlPSJzdG9wLWNvbG9yOiNFNkU2RTYiLz4KCQkJPHN0b3AgIG9mZnNldD0iMC41MiIgc3R5bGU9InN0b3AtY29sb3I6I0NDQ0NDQyIvPgoJCQk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojRkZGRkZGIi8+CgkJPC9saW5lYXJHcmFkaWVudD4KCQk8cGF0aCBmaWxsPSJ1cmwoI1NWR0lEXzFfKSIgZD0iTTUwNy4zLDM5LjNjLTMuNy00LjctOS41LTcuMy0xNi03LjNoLTEyLjVjLTAuMi02LjctMi40LTEzLjEtNi4zLTE4LjVDNDY2LjIsNC45LDQ1NS45LDAsNDQ0LjMsMAoJCQlIMzI0LjZjLTE5LjQsMC0zOS4zLDEzLTQ3LjksMzJIMzYuMWMtMTEuOSwwLTIzLjcsOS4xLTI2LjgsMjAuOUwwLjgsODQuOUMtMSw5MS4xLDAuMiw5Ny43LDQsMTAyLjljMy42LDQuNiw5LjQsNy4xLDE1LjcsNy4xCgkJCWgyMzQuNmMwLjIsNi41LDIuMywxMi43LDYuMiwxOGM2LjIsOC40LDE2LjMsMTMuMSwyNy43LDEzLjFoMTEyLjRsNy41LDBjMTkuMywwLDM5LjEtMTMsNDguMi0zMWgxNS40YzEyLjIsMCwyNy4yLTkuOCwzMC40LTIxLjgKCQkJbDguNS0zMC43QzUxMi40LDUxLjIsNTExLjIsNDQuNSw1MDcuMywzOS4zeiBNNTQuNiw4MEg0Mi45bC0zLjcsMTJIMjcuNmwxNC42LTQ3aDIzLjNjNi40LDAsMTAsNS40LDgsMTEuOGwtMy43LDExLjYKCQkJQzY3LjksNzQuOCw2MSw4MCw1NC42LDgweiBNNjcuNyw5MmwxNC43LTQ3SDk0TDgzLDgwaDExLjdsMy43LTExSDExMGwtNy4zLDIzSDY3Ljd6IE0xNTMuOCw1Ni44bC0xMSwzNS4yaC0xMS42bDMuNy0xMmgtMTEuNwoJCQlsLTMuNywxMmgtMTEuNmwxMS0zNS4yYzItNi40LDguOS0xMS44LDE1LjMtMTEuOGgxMS42QzE1Mi4yLDQ1LDE1NS44LDUwLjQsMTUzLjgsNTYuOHogTTE5MC45LDY4LjRjLTIsNi40LTguOSwxMS44LTE1LjMsMTEuOAoJCQlMMTcyLDkyaC0xMS43bDMuNy0xMS43Yy02LjQsMC0xMC01LjQtOC0xMS44bDcuMy0yMy41SDE3NWwtNy40LDI0aDExLjZsNy40LTI0aDExLjdMMTkwLjksNjguNHogTTIwNS4xLDQ3aDE1LjNsLTQuNiwxM2gtMTUuMwoJCQlMMjA1LjEsNDd6IE0yNDguOCw3MC44TDI0Mi43LDkySDIzMWw2LjItMjFoLTExLjZsLTYuMiwyMWgtMTEuNmw2LjEtMjEuMmMyLTYuNCw4LjktMTEuOCwxNS4zLTExLjhoMTEuNwoJCQlDMjQ3LjMsNTksMjUwLjksNjQuMywyNDguOCw3MC44TDI0OC44LDcwLjh6IE0zMTcuMiwxMjhoLTI5Yy0xNiwwLTI0LjktMTIuOC0xOS45LTI4LjhsMTguMi01OC4xYzUtMTYsMjIuMi0yOS4xLDM4LjEtMjkuMUgzNzkKCQkJbC05LDI5aC01NC40bC0xOC40LDU5aDI5bDQuOC0xNWgtMTQuNWw4LjktMjloNDEuNWwtMTMuNiw0My4xQzM0OC4zLDExNS4xLDMzMy4xLDEyOCwzMTcuMiwxMjhMMzE3LjIsMTI4eiBNNDY1LjQsNDAuNwoJCQlsLTE4LjEsNTcuN2MtNS4yLDE2LjQtMjIuOCwyOS42LTM5LjIsMjkuNmgtMjYuN2MtMTYuNCwwLTI1LjYtMTMuMy0yMC41LTI5LjdMMzc5LDQwLjZjNS4xLTE2LjQsMjIuOC0yOS42LDM5LjItMjkuNmgyNi43CgkJCUM0NjEuNCwxMSw0NzAuNiwyNC4zLDQ2NS40LDQwLjd6Ii8+CgkJCgkJCTxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMl8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMTM0LjUiIHkxPSIxNDYiIHgyPSIxMzQuNSIgeTI9Ii0wLjY3IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIC0xIDAgMTQ0KSI+CgkJCTxzdG9wICBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNGRkZGRkYiLz4KCQkJPHN0b3AgIG9mZnNldD0iMC41IiBzdHlsZT0ic3RvcC1jb2xvcjojRTZFNkU2Ii8+CgkJCTxzdG9wICBvZmZzZXQ9IjAuNTIiIHN0eWxlPSJzdG9wLWNvbG9yOiNDQ0NDQ0MiLz4KCQkJPHN0b3AgIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6I0ZGRkZGRiIvPgoJCTwvbGluZWFyR3JhZGllbnQ+CgkJPHBvbHlnb24gZmlsbD0idXJsKCNTVkdJRF8yXykiIHBvaW50cz0iMTI2LjgsNjkgMTM4LjQsNjkgMTQyLjIsNTcgMTMwLjUsNTcgCQkiLz4KCQkKCQkJPGxpbmVhckdyYWRpZW50IGlkPSJTVkdJRF8zXyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSI1NC4yMzUiIHkxPSIxNDYiIHgyPSI1NC4yMzUiIHkyPSItMC42NyIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIDE0NCkiPgoJCQk8c3RvcCAgb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojRkZGRkZGIi8+CgkJCTxzdG9wICBvZmZzZXQ9IjAuNSIgc3R5bGU9InN0b3AtY29sb3I6I0U2RTZFNiIvPgoJCQk8c3RvcCAgb2Zmc2V0PSIwLjUyIiBzdHlsZT0ic3RvcC1jb2xvcjojQ0NDQ0NDIi8+CgkJCTxzdG9wICBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNGRkZGRkYiLz4KCQk8L2xpbmVhckdyYWRpZW50PgoJCTxwb2x5Z29uIGZpbGw9InVybCgjU1ZHSURfM18pIiBwb2ludHM9IjQ2LjUsNjkgNTguMiw2OSA2MS45LDU3IDUwLjMsNTcgCQkiLz4KCQkKCQkJPGxpbmVhckdyYWRpZW50IGlkPSJTVkdJRF80XyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSI0MTMuMTYiIHkxPSIxNDYiIHgyPSI0MTMuMTYiIHkyPSItMC42NyIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIDE0NCkiPgoJCQk8c3RvcCAgb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojRkZGRkZGIi8+CgkJCTxzdG9wICBvZmZzZXQ9IjAuNSIgc3R5bGU9InN0b3AtY29sb3I6I0U2RTZFNiIvPgoJCQk8c3RvcCAgb2Zmc2V0PSIwLjUyIiBzdHlsZT0ic3RvcC1jb2xvcjojQ0NDQ0NDIi8+CgkJCTxzdG9wICBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNGRkZGRkYiLz4KCQk8L2xpbmVhckdyYWRpZW50PgoJCTxwb2x5Z29uIGZpbGw9InVybCgjU1ZHSURfNF8pIiBwb2ludHM9IjM5MC43LDEwMCA0MTcuNCwxMDAgNDM1LjYsNDEgNDA5LDQxIAkJIi8+CgkJCgkJCTxyYWRpYWxHcmFkaWVudCBpZD0iU1ZHSURfNV8iIGN4PSIyNzEuNTUiIGN5PSIxNDQiIHI9IjAiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgMCAxMzMuMDcpIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CgkJCTxzdG9wICBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNGMjZGNDM7c3RvcC1vcGFjaXR5OjAuMjUiLz4KCQkJPHN0b3AgIG9mZnNldD0iMC41NiIgc3R5bGU9InN0b3AtY29sb3I6I0ZERTdEQjtzdG9wLW9wYWNpdHk6My4wMDAwMDBlLTAyIi8+CgkJPC9yYWRpYWxHcmFkaWVudD4KCQk8cGF0aCBmaWxsPSJ1cmwoI1NWR0lEXzVfKSIgZD0iTTI3MS41LTEwLjkiLz4KCQk8cGF0aCBmaWxsPSIjRThFOEU4IiBkPSJNMzcuNSwxMy4ybC0xLjEsNi40aC0zLjlsMi44LTE3aDYuMWMxLjEsMCwyLjIsMC4xLDMuMiwwLjRjMC44LDAuMywxLjYsMC44LDIuMSwxLjYKCQkJYzAuNiwwLjksMC45LDEuOSwwLjksMi45YzAsMC45LTAuMiwxLjgtMC42LDIuNmMtMC4zLDAuOC0wLjksMS41LTEuNSwyYy0wLjYsMC40LTEuMiwwLjctMS44LDAuOWMtMC44LDAuMi0xLjcsMC4yLTIuNiwwLjIKCQkJTDM3LjUsMTMuMnogTTM4LjgsNS42TDM4LDEwLjJoMi45YzAuOCwwLjEsMS42LTAuMiwyLjItMC43YzAuNS0wLjUsMC43LTEuMSwwLjctMS44YzAtMC41LTAuMi0xLjEtMC42LTEuNQoJCQljLTAuNy0wLjYtMS42LTAuOC0yLjUtMC43TDM4LjgsNS42eiIvPgoJCTxwYXRoIGZpbGw9IiNFOEU4RTgiIGQ9Ik02Mi43LDE5LjhjLTEuOCwwLjEtMy42LTAuNy00LjgtMmMtMS4zLTEuNS0xLjktMy40LTEuOC01LjRjMC0yLjUsMC43LTUsMi4yLTcuMWMxLjMtMS45LDMuNS0zLjEsNS44LTMKCQkJYzEuOS0wLjEsMy43LDAuNyw0LjksMi4xYzEuMywxLjUsMS45LDMuNSwxLjgsNS40YzAuMSwyLjUtMC43LDUtMi4yLDcuMUM2Ny4yLDE4LjgsNjUsMTkuOSw2Mi43LDE5Ljh6IE02Mi43LDE2LjcKCQkJYzEuNSwwLDIuNS0wLjgsMy4xLTIuNWMwLjYtMS42LDAuOS0zLjIsMC45LTQuOWMwLTIuNS0wLjktMy44LTIuOC0zLjhjLTEuMywwLTIuMywwLjgtMywyLjRjLTAuNywxLjYtMSwzLjQtMSw1LjIKCQkJQzU5LjksMTUuNSw2MC44LDE2LjcsNjIuNywxNi43TDYyLjcsMTYuN3oiLz4KCQk8cGF0aCBmaWxsPSIjRThFOEU4IiBkPSJNMTAyLjYsMi42bC02LjksMTdIOTJMOTAuNCw3LjdsLTQuNSwxMS44aC0zLjZsLTItMTdoMy45bDEuMSwxMS44bDQuNS0xMS44aDMuNWwxLjQsMTEuOGw0LjQtMTEuOAoJCQlMMTAyLjYsMi42eiIvPgoJCTxwYXRoIGZpbGw9IiNFOEU4RTgiIGQ9Ik0xMjQuMSwyLjZsLTAuNiwzLjJoLThMMTE1LDkuM2g2LjdsLTAuNSwzLjFoLTYuN2wtMC43LDRoOC4ybC0wLjYsMy4yaC0xMi4xbDIuOC0xN0wxMjQuMSwyLjZ6Ii8+CgkJPHBhdGggZmlsbD0iI0U4RThFOCIgZD0iTTEzNi41LDEyLjhsLTEuMSw2LjhoLTMuOGwyLjgtMTdoNi4zYzEuMi0wLjEsMi41LDAuMSwzLjcsMC41YzAuOCwwLjMsMS42LDEsMiwxLjhjMSwxLjcsMSwzLjgtMC4xLDUuNAoJCQljLTAuNywxLTEuOCwxLjYtMi45LDEuOWwyLjEsNy40aC00bC0xLjgtNi44TDEzNi41LDEyLjh6IE0xMzcuNiw1LjZsLTAuNyw0LjNoMi41YzAuNywwLDEuNCwwLDIuMS0wLjJjMC40LTAuMSwwLjgtMC40LDEuMS0wLjgKCQkJYzAuMy0wLjQsMC41LTAuOSwwLjQtMS40YzAuMS0wLjYtMC4yLTEuMi0wLjctMS41Yy0wLjctMC40LTEuNS0wLjUtMi4zLTAuNUgxMzcuNnoiLz4KCQk8cGF0aCBmaWxsPSIjRThFOEU4IiBkPSJNMTcwLjcsMi42bC0wLjYsMy4yaC04bC0wLjYsMy41aDYuN2wtMC41LDMuMUgxNjFsLTAuNyw0aDguMWwtMC41LDMuMmgtMTIuMWwyLjgtMTdMMTcwLjcsMi42eiIvPgoJCTxwYXRoIGZpbGw9IiNFOEU4RTgiIGQ9Ik0xNzguMSwxOS42bDIuOC0xN2g1YzEuNC0wLjEsMi44LDAuMiw0LjEsMC44YzEuMSwwLjYsMS45LDEuNiwyLjQsMi43YzAuNywxLjMsMSwyLjgsMSw0LjMKCQkJYzAsMS41LTAuMywyLjktMC44LDQuM2MtMC41LDEuMi0xLjIsMi4zLTIuMiwzLjJjLTAuOCwwLjctMS43LDEuMi0yLjgsMS41Yy0xLjIsMC4yLTIuNCwwLjMtMy42LDAuM0wxNzguMSwxOS42eiBNMTgyLjMsMTYuNmgyCgkJCWMyLjEsMCwzLjQtMC43LDQuMS0yLjFjMC43LTEuNCwxLTIuOSwxLTQuNGMwLTMtMS4yLTQuNS0zLjYtNC41aC0xLjdMMTgyLjMsMTYuNnoiLz4KCQk8cGF0aCBmaWxsPSIjRThFOEU4IiBkPSJNMjE5LjIsMi42aDcuM2MxLjEtMC4xLDIuMiwwLjEsMy4zLDAuNWMwLjcsMC4zLDEuMywwLjksMS42LDEuNWMwLjQsMC43LDAuNiwxLjQsMC42LDIuMgoJCQljMCwyLjItMS4zLDMuNS0zLjgsNGMyLjEsMC42LDMuMSwxLjgsMy4xLDMuN2MwLDEuMy0wLjUsMi42LTEuNCwzLjVjLTEsMS0yLjYsMS41LTUsMS41aC04LjRMMjE5LjIsMi42eiBNMjIxLjUsMTIuM2wtMC43LDQuMwoJCQloMy40YzAuOCwwLjEsMS42LTAuMiwyLjItMC42YzAuNS0wLjQsMC43LTAuOSwwLjctMS41YzAuMS0wLjYtMC4yLTEuMi0wLjctMS42Yy0wLjctMC40LTEuNS0wLjYtMi40LTAuNUwyMjEuNSwxMi4zeiBNMjIyLjYsNS40CgkJCWwtMC43LDRoMi43YzAuNiwwLDEuMywwLDEuOS0wLjFjMC40LTAuMSwwLjctMC4zLDAuOS0wLjZjMC4zLTAuNCwwLjQtMC44LDAuNC0xLjNjMC0xLjMtMC45LTEuOS0yLjYtMS45TDIyMi42LDUuNHoiLz4KCQk8cGF0aCBmaWxsPSIjRThFOEU4IiBkPSJNMjU1LjQsMi42bC02LjgsOS44bC0xLjIsNy4xaC0zLjlsMS4yLTcuMWwtNC4yLTkuOGg0LjJsMi42LDYuN2w0LjQtNi43SDI1NS40eiIvPgoJPC9nPgo8L2c+Cjwvc3ZnPg==");
    opacity: .25
}

#pngProgressContainer {
    height: 1vw;
    width: 26%;
    bottom: 14%;
    background-color: #000;
    border-radius: 2px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .25) inset
}

#pngProgressBar {
    height: 100%;
    position: absolute;
    width: 0%;
    background: #0061a7;
    background-image: -moz-linear-gradient(right, #3192d8 0, #0061a7 5vw, #0061a7 100%);
    background-image: -o-linear-gradient(right, #3192d8 0, #0061a7 5vw, #0061a7 100%);
    background-image: -ms-linear-gradient(right, #3192d8 0, #0061a7 5vw, #0061a7 100%);
    background-image: linear-gradient(right, #3192d8 0, #0061a7 5vw, #0061a7 100%);
    background-image: -webkit-linear-gradient(right, #3192d8 0, #0061a7 5vw, #0061a7 100%);
    box-shadow: inset 0 0 0 2px #000;
    -webkit-box-shadow: inset 0 0 0 2px #000;
    -moz-box-shadow: inset 0 0 0 2px #000;
    -o-box-shadow: inset 0 0 0 2px #000
}

#pngProgressBar.pngReconnect {
    background: -webkit-linear-gradient(right, #0061a7, #8ed0ff, #0061a7);
    background: linear-gradient(270deg, #0061a7, #8ed0ff, #0061a7);
    background-size: 500% 100%;
    -webkit-animation: bounceanim 2s ease-in-out infinite;
    animation: bounceanim 2s ease-in-out infinite
}

#pngProgressBar.pngConnecting {
    -webkit-transition: all 500ms cubic-bezier(.245, .435, .875, .66);
    -moz-transition: all 500ms cubic-bezier(.245, .435, .875, .66);
    -o-transition: all 500ms cubic-bezier(.245, .435, .875, .66);
    transition: all 500ms cubic-bezier(.245, .435, .875, .66);
    -webkit-transition-timing-function: cubic-bezier(.245, .435, .875, .66);
    -moz-transition-timing-function: cubic-bezier(.245, .435, .875, .66);
    -o-transition-timing-function: cubic-bezier(.245, .435, .875, .66);
    transition-timing-function: cubic-bezier(.245, .435, .875, .66)
}

#pngSpinnerWrapper {
    position: absolute;
    height: 80px;
    width: 80px;
    bottom: 2px;
    left: 50%;
    margin-left: -40px
}

#pngSpinner {
    display: none;
    position: absolute;
    height: 60px;
    width: 60px;
    top: 40%;
    left: 48%;
    z-index: 1
}

.pngBall {
    display: block;
    background-color: #2d87ca;
    width: 12px;
    height: 12px;
    border-radius: 6px
}

#pngFirst {
    -webkit-animation-timing-function: cubic-bezier(.5, .3, .9, .9);
    -webkit-animation-name: rotate;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-transform-origin: 6px 30px;
    -moz-animation-timing-function: cubic-bezier(.5, .3, .9, .9);
    -moz-animation-name: rotate;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    -moz-transform-origin: 6px 30px;
    animation-timing-function: cubic-bezier(.5, .3, .9, .9);
    animation-name: rotate;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    -ms-transform-origin: 6px 30px
}

#pngSecond {
    -webkit-animation-timing-function: cubic-bezier(.5, .5, .9, .9);
    -webkit-animation-name: rotate;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-transform-origin: 6px 30px;
    -moz-animation-timing-function: cubic-bezier(.5, .5, .9, .9);
    -moz-animation-name: rotate;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    -moz-transform-origin: 6px 30px;
    animation-timing-function: cubic-bezier(.5, .5, .9, .9);
    animation-name: rotate;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    -ms-transform-origin: 6px 30px
}

#pngThird {
    -webkit-animation-timing-function: cubic-bezier(.5, .7, .9, .9);
    -webkit-animation-name: rotate;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-transform-origin: 6px 30px;
    -moz-animation-timing-function: cubic-bezier(.5, .7, .9, .9);
    -moz-animation-name: rotate;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    -moz-transform-origin: 6px 30px;
    animation-timing-function: cubic-bezier(.5, .7, .9, .9);
    animation-name: rotate;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    -ms-transform-origin: 6px 30px
}

@media all and (orientation:portrait) {
    #pngProgressContainer {
        width: 45%;
        height: 2vw
    }
}

@media all and (orientation:landscape) {
    #pngLogoWrapper {
        width: 10vw;
        height: 3vw;
        bottom: 3%;
        max-width: 100%
    }
}

@media only screen and (min-width:768px) {
    #pngProgressContainer {
        height: .7em;
        bottom: 15%;
        opacity: 1
    }
}

@media only screen and (min-width:768px)and (orientation:portrait) {
    #pngLogoWrapper {
        width: 30vw;
        height: calc(30vw*.4)
    }
}

@media only screen and (min-width:768px)and (orientation:landscape) {
    #pngLogoWrapper {
        width: calc(6.5vh*3);
        height: 6.5vh;
        bottom: 1%
    }
}