@font-face {
  font-family: 'Open Sans';
  src: url('../font/OpenSans-Regular.eot'); /* IE9 Compat Modes */
  src: url('../font/OpenSans-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../font/OpenSans-Regular.woff') format('woff'), /* Modern Browsers */
       url('../font/OpenSans-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../font/OpenSans-Regular.svg#dc56f0938c09c27a4156bb0f8f5176a2') format('svg'); /* Legacy iOS */
  font-style:   normal;
  font-weight:  400;
}

@font-face {
  font-family : 'Pacifico';
  src: url('../font/Pacifico.eot'); /* IE9 Compat Modes */
  src: url('../font/Pacifico.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../font/Pacifico.woff') format('woff'), /* Modern Browsers */
       url('../font/Pacifico.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../font/Pacifico.svg#6450a99cde6cde9b3313a016d8c09dd2') format('svg'); /* Legacy iOS */
  font-style  :   normal;
  font-weight :  400;
}

html {
    height  : 100%;
    width   : 100%;
    margin  : 0;
    padding : 0;
}
body {
    margin                : 0;
    padding               : 0;
    text-align            : center;
    font-family           : 'Open Sans';
    position              : relative;
    height                : 100%;
    width                 : 100%;
    background-attachment : fixed;
    overflow              : hidden;
    overflow-x            : hidden;
    overflow-y            : hidden;
    color                 : #fff;
    font-size             : 35px;
    line-height           : 1.25;
    background-size       : cover!important;
    background-repeat     : no-repeat!important;
    background-position   : center!important;
}


.wrapper {
    height   : auto !important;
    height   : 100%;
    margin   : 0 auto;
    overflow : hidden;
}

a {
    text-decoration : none;
}

h1, h2 {
    width : 100%;
    float : left;
}
h1 {
    margin-top    : 100px;
    color         : #999;
    margin-bottom : 5px;
    font-size     : 70px;
    font-weight   : 100;
}
h2 {
    padding            : 0 20px 30px 20px;
    box-sizing         : border-box;
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    letter-spacing     : 0px;
    color              : #888;
    font-size          : 20px;
    line-height        : 160%;
    font-weight        : 100;
    margin-top         : 10px;
    margin-bottom      : 0;
}


.pointer {
    color       : #00B0FF;
    font-family : 'Pacifico';
    font-size   : 24px;
    margin-top  : 15px;
    position    : absolute;
    top         : 130px;
    right       : -40px;
}
.pointer2 {
    color       : #00B0FF;
    font-family : 'Pacifico';
    font-size   : 24px;
    margin-top  : 15px;
    position    : absolute;
    top         : 130px;
    left        : -40px;
}
pre {
    margin : 80px auto;
}
pre code {
    padding       : 35px;
    border-radius : 5px;
    font-size     : 15px;
    background    : rgba(0,0,0,0.1);
    border        : rgba(0,0,0,0.05) 5px solid;
    max-width     : 500px;
}


.main {
    float       : left;
    width       : 100%;
    margin      : 0 auto;
    padding-top : 60px;
}

.main h1 {
    padding            : 20px 50px 10px;
    float              : left;
    width              : 100%;
    font-size          : 60px;
    box-sizing         : border-box;
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    font-weight        : 100;
    margin             : 0;
    padding-top        : 55px;
    font-family        : 'Open Sans';
    letter-spacing     : -1px;
    text-transform     : capitalize;
}

.main h1.demo1 {
    background : #1ABC9C;
}

.reload.bell {
    font-size             : 12px;
    padding               : 20px;
    width                 : 45px;
    text-align            : center;
    height                : 47px;
    border-radius         : 50px;
    -webkit-border-radius : 50px;
    -moz-border-radius    : 50px;
}

.reload.bell #notification {
    font-size   : 25px;
    line-height : 140%;
}

.reload, .btn{
    display               : inline-block;
    border-radius         : 3px;
    -moz-border-radius    : 3px;
    -webkit-border-radius : 3px;
    display               : inline-block;
    line-height           : 100%;
    padding               : 0.7em;
    text-decoration       : none;
    width                 : 100px;
    line-height           : 140%;
    font-size             : 17px;
    font-family           : "Open Sans";
    font-weight           : bold;
    -webkit-box-shadow    : none;
    box-shadow            : none;
    background-color      : #4D90FE;
    background-image      : -webkit-linear-gradient(top,#4D90FE,#4787ED);
    background-image      : -webkit-moz-gradient(top,#4D90FE,#4787ED);
    background-image      : linear-gradient(top,#4d90fe,#4787ed);
    border                : 1px solid #3079ED;
    color                 : #FFF;
}
.reload:hover{
    background: #317af2;
}
.btn {
    width              : 200px;
    -webkit-box-shadow : none;
    box-shadow         : none;
    background-color   : #4D90FE;
    background-image   : -webkit-linear-gradient(top,#4D90FE,#4787ED);
    background-image   : -moz-linear-gradient(top,#4D90FE,#4787ED);
    background-image   : linear-gradient(top,#4d90fe,#4787ed);
    border             : 1px solid #3079ED;
    color              : #FFF;
}
.clear {
    width : auto;
}
.btn:hover, .btn:hover {
    background : #317af2;
}
.btns {
    float  : left;
    width  : 100%;
    margin : 50px auto;
}
.credit {
    text-align : center;
    color      : #888;
    padding    : 10px 10px;
    margin     : 0 0 0 0;
    background : #f5f5f5;
    float      : left;
    width      : 100%;
}
.credit a {
    text-decoration : none;
    font-weight     : bold;
    color           : black;
}

.back {
    position           : absolute;
    top                : 0;
    left               : 0;
    text-align         : center;
    display            : block;
    padding            : 7px;
    width              : 100%;
    box-sizing         : border-box;
    -moz-box-sizing    : border-box;
    -webkit-box-sizing : border-box;
    background         : #f5f5f5;
    font-weight        : bold;
    font-size          : 13px;
    color              : #888;
    -webkit-transition : all 200ms ease-out;
    -moz-transition    : all 200ms ease-out;
    -o-transition      : all 200ms ease-out;
    transition         : all 200ms ease-out;
}
.back:hover {
    background : #eee;
}


.page-container {
    float    : left;
    width    : 100%;
    margin   : 0 auto 300px;
    position : relative;
}
.panorama {
    width      : 100%;
    float      : left;
    margin-top : -5px;
    height     : 700px;
}

.panorama .credit {
    background         : rgba(0,0,0,0.2);
    color              : white;
    font-size          : 12px;
    text-align         : center;
    position           : absolute;
    bottom             : 0;
    right              : 0;
    box-sizing         : border-box;
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    float              : right;
}

.main {
    margin-bottom : 350px;
    overflow      : hidden;
}
.tps-section {
    width     : 100% !important;
    max-width : 1000px;
    margin    : 0 auto;
    height    : 500px;
}

.tps-section .tps-wrapper {
    border-radius : 5px;
}
.tps-section .tps-wrapper h1 {
    position : relative;
    height   : 100%;
    position : absolute;
}
.tps-section .tps-wrapper h1 {
    color              : white;
    position           : absolute;
    width              : 100%;
    height             : 100%;
    top                : 0;
    padding-top        : 225px;
    box-sizing         : border-box;
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    left               : 0;
    font-weight        : bold;
    text-transform     : uppercase;
    letter-spacing     : 4px;
    font-size          : 20px;
    line-height        : 190%;
    text-shadow        : -1px -1px 0 #000,1px -1px 0 #000,-1px  1px 0 #000, 1px  1px 0 #000;
}

.tps-section .tps-wrapper h1 small{
    text-transform : none;
    font-style     : italic;
    font-weight    : 400;
    font-family    : "Pacifico";
    letter-spacing : 1px;
    font-size      : 14px;
}

.header {
    overflow : hidden;
    clear    : both;
}
.tps-section {
    width                      : 100%;
    height                     : 500px;
    -webkit-perspective        : 10em;
    -moz-perspective           : 10em;
    -ms-perspective            : 10em;
    -o-perspective             : 10em;
    perspective                : 10em;
    -webkit-perspective-origin : center bottom;
    -moz-perspective-origin    : center bottom;
    -ms-perspective-origin     : center bottom;
    -o-perspective-origin      : center bottom;
    perspective-origin         : center bottom;
    -webkit-perspective-origin : 50% 50%;
    -moz-perspective-origin    : 50% 50%;
    -ms-perspective-origin     : 50% 50%;
    -o-perspective-origin      : 50% 50%;
    perspective-origin         : 50% 50%;
    -webkit-transform-style    : preserve-3d;
    -moz-transform-style       : preserve-3d;
    -ms-transform-style        : preserve-3d;
    -o-transform-style         : preserve-3d;
    transform-style            : preserve-3d;
}

.tps-wrapper {
    float               : left;
    width               : 100%;
    height              : 100%;
    background-size     : contain!important;
    background-repeat   : no-repeat!important;
    background-position : center!important;
}

.loading {
    background : url('../img/ajax-loader.gif') no-repeat center;
}
#container {
    position : fixed;
    top      : 0;
    left     : 0;
    width    : 100%;
    height   : 10%;
    z-index  : 2000;
}
table.ctn {
    width           : 100%;
    height          : 100%;
    border          : 0;
    padding         : 0;
    margin          : 0;
    border-collapse : collapse;
}
table.ctn tr {
    border  : 0;
    padding : 0;
    margin  : 0;
    height  : 100%;
    width   : 100%;
}
table.ctn tr td {
    border      : 0;
    padding     : 5px;
    margin      : 0;
    height      : 100%;
    width       : 100%;
    white-space : nowrap;
}
