/* ======================================================= FONTS ======================================================= */

/*@import url("//hello.myfonts.net/count/2b38d4");*/

 
@font-face {
    font-family: 'NeueAachenPro-Book';src: url('fonts/2B38D4_0_0.eot');src: url('fonts/2B38D4_0_0.eot?#iefix') format('embedded-opentype'),url('fonts/2B38D4_0_0.woff') format('woff'),url('fonts/2B38D4_0_0.ttf') format('truetype'),url('fonts/2B38D4_0_0.svg#wf') format('svg');
} /* BOOK */
 
  
@font-face {
    font-family: 'NeueAachenPro-Medium';src: url('fonts/2B38D4_1_0.eot');src: url('fonts/2B38D4_1_0.eot?#iefix') format('embedded-opentype'),url('fonts/2B38D4_1_0.woff') format('woff'),url('fonts/2B38D4_1_0.ttf') format('truetype'),url('fonts/2B38D4_1_0.svg#wf') format('svg');
} /* MEDIUM */
 
  
@font-face {
    font-family: 'NeueAachenPro-Thin';src: url('fonts/2B38D4_2_0.eot');src: url('fonts/2B38D4_2_0.eot?#iefix') format('embedded-opentype'),url('fonts/2B38D4_2_0.woff') format('woff'),url('fonts/2B38D4_2_0.ttf') format('truetype'),url('fonts/2B38D4_2_0.svg#wf') format('svg');
} /* THIN */

.book
{
    font-family: 'NeueAachenPro-Book'
}

.med
{
    font-family: 'NeueAachenPro-Medium'
}

.thin
{
    font-family: 'NeueAachenPro-Thin'
}
/* ====================================================== GENERAL ====================================================== */

.b
{
    display: block !important;
}

.img
{
    display: block;
}

.c
{
    margin: 0 auto !important;
}

.r
{
    float: right !important;
}

.l
{
    float: left !important;
}

.clr
{
    clear: both !important;
}

.last-r
{
    margin-right: 0px !important;
}

.last-l
{
    margin-left: 0px !important;
}

.full
{
    width: 100% !important;
    height: 100% !important;
}

.ab
{
    position: absolute;
}

.tl
{
    top: 0px !important;
    left: 0px !important;
}

.tr
{
    top: 0px !important;
    right: 0px !important;
}

.bl
{
    bottom: 0px !important;
    left: 0px !important;
}

.top
{
    top: 0px !important;
}

.bottom
{
    bottom: 0px !important;
}

.h
{
    display: none !important;
}

.o
{
    opacity: 0 !important;
}

.bld
{
    font-weight: bold !important;
}

.slct
{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.trns-ss
{
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
}

.trns-s
{
    -webkit-transition: all 0.6s linear;
    -moz-transition: all 0.6s linear;
    -ms-transition: all 0.6s linear;
    -o-transition: all 0.6s linear;
    transition: all 0.6s linear;
}

.trns-n
{
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -ms-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    transition: all 0.4s linear;
}

.trns-f
{
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.e-i
{
    -webkit-transition-timing-function: ease-in !important;
    transition-timing-function: ease-in !important;
}

.e-o
{
    -webkit-transition-timing-function: ease-out !important;
    transition-timing-function: ease-out !important;
}

[font="book"]
{
    font-family: 'NeueAachenPro-Book';
}

[font="med"]
{
    font-family: 'NeueAachenPro-Medium';
}

[mobile]
{
   display: none; 
}

/* ======================================================= COLOR ======================================================= */



/* ======================================================= MAINS ======================================================= */

html
{
    overflow: hidden;
    
    width: 100%;
    height: 100%;
}

body
{
    overflow: hidden;
    
    width: 100%;
    height: 100%;
    
    font-family: 'NeueAachenPro-Thin';
    
    cursor: url(../img/general/cursor.png), auto;
}

#web-wrapper
{
    overflow: hidden;
    
    width: 100%;
    height: 100%;
}

.bt
{
    cursor: url(../img/general/cursor_hover.png), auto !important;
}

a[target="_blank"]
{
    cursor: url(../img/general/cursor_hover_link.png), auto !important;
}

img
{
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.table
{
    position: absolute;
    display: table;
    
    width: 100%;
    height: 100%;
}

.cell
{
    display: table-cell;
    
    width: 100%;
    height: 100%;
    
    vertical-align: middle;
}

.content
{
    position: absolute;
    
    width: 100%;
    height: 100%;
    top: 0px;
}

.content-warpper
{
    position: absolute;
    
    width: 100%;
    height: 100%;
    top: 0px;
}

/* ===================================================== SCROLLBAR ===================================================== */



/* ===================================================== PRELOADER ===================================================== */

#preloader-main
{
    position: fixed !important;
    z-index: 10;
    
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    
    background-color: #fafafa;
    background-image: url(../img/preloader/spaceship.png);
    background-position: center;
    background-repeat: no-repeat;
}

.content[role="preloader"]
{
    position: relative;
    
    width: 78px;
    height: 78px;
}

.preloader-circle[role="big"]
{
    position: absolute;
    
    width: 100%;
    height: 100%;
    
    background-image: url(../img/preloader/circle_big.png);
}

.preloader-circle[role="small"]
{
    position: absolute;
    
    width: 66px;
    height: 66px;
    top: 6px;
    left: 6px;
    
    background-image: url(../img/preloader/circle_small.png);
}

.preloader-text
{
    position: absolute;
    
    width: 160%;
    bottom: -45px;
    left: -30%;
    
    text-align: center;
    color: #cf342d;
}

/* ================================================== NAVIGATION BAR =================================================== */

#navbar-container
{
    position: fixed;
    z-index: 9;
    
    width: 96%;
    height: 102px;
    top: 2%;
    left: 2%;
}

#navbar-switch
{
    position: absolute;
    
    width: 102px;
    height: 102px;
    top: 0px;
    left: 0px;
    
    border-radius: 50%;
    
    background-image: url(../img/general/navbar/nav_switch.png);
}

#navbar-buttons
{
    width: 447px;
    height: 102px;
    
    opacity: 0;
}

.navbar-bt
{
    position: relative;
    overflow: hidden;
    float: left;
    
    width: 102px;
    height: 102px;
    margin-right: 13px;
    
    background-repeat: no-repeat;
    background-position: top;
    
    perspective: 500px;
    
    border-radius: 50%;
}

.navbar-bt .side-one
{
    position: absolute;
    
    width: 100%;
    height: 100%;
    
    transform: rotateX(90deg);
}

.navbar-bt .side-two
{
    position: absolute;
    
    width: 100%;
    height: 100%;
    
    transform: rotateX(180deg);
}

.navbar-bt .side-mask
{
    overflow: hidden;
    position: absolute;
    
    width: 100%;
    height: 50%;
    bottom: 0px;
}

.navbar-bt .side-ctn
{
    position: absolute;
    
    width: 100%;
    height: 200%;
    bottom: 0px;
    
    border-radius: 50%;
}

.navbar-bt .side-one .side-ctn
{
    background-repeat: no-repeat;
    background-position: bottom;
}

/* Nav-Bar Shades */
.navbar-shade-color
{
    background-color: #e9372f;
}

/* Nav-Bar Icons */
.navbar-bt[role="home"]
{
    background-image: url(../img/general/navbar/top_home.png);
}

.navbar-bt[role="home"] .side-one .side-ctn
{
    background-image: url(../img/general/navbar/bottom_home.png);
}

.navbar-bt[role="skills"]
{
    background-image: url(../img/general/navbar/top_skills.png);
}

.navbar-bt[role="skills"] .side-one .side-ctn
{
    background-image: url(../img/general/navbar/bottom_skills.png);
}

.navbar-bt[role="works"]
{
    background-image: url(../img/general/navbar/top_works.png);
}

.navbar-bt[role="works"] .side-one .side-ctn
{
    background-image: url(../img/general/navbar/bottom_works.png);
}

.navbar-bt[role="hire"]
{
    background-image: url(../img/general/navbar/top_hire.png);
}

.navbar-bt[role="hire"] .side-one .side-ctn
{
    background-image: url(../img/general/navbar/bottom_hire.png);
}

.side-two
{
    cursor: url(../img/general/cursor.png), auto;
}

/* ======================================================= PAGES ======================================================= */

.page
{
    overflow: hidden;
}

#page-home
{
    background-color: #e9372f;
}

#page-skills
{
    background-color: #e26826;
}

#page-works
{
    background-color: #663c83;
}

#page-hire
{
    background-color: #272330;
    z-index: 3;
}

#page-skills, #page-works, #page-hire
{
    top: 100%;
}

#page-hire
{
    top: 100%;
}

/* ====================================================== CONTENT ====================================================== */

/* :::::::::::::::::::::::::::::::: General ::::::::::::::::::::::::::::::::: */

.stars
{
    position: absolute;
    
    width: 100%;
    height: 75%;
    bottom: 10%;
}

.star
{
    position: absolute;
    
    width: 2px;
    height: 2px;
    
    background-color: rgba(255,255,255,0.6);
    
    border-radius: 5px;
}

.shine
{
    width: 4px;
    height: 4px;
    
    background-color: rgba(255,255,255,0.7);
    
    box-shadow: 0px 0px 7px rgba(255,255,255,1);
}

.ground
{
    width: 100%;
    height: 50px;
}

/* ::::::::::::::::::::::::::::::: Home Page :::::::::::::::::::::::::::::::: */

#page-home h1
{
    color: #f2f2f2;
    text-align: center;
}

#web-title
{
    font-family: 'NeueAachenPro-Medium';
    font-size: 4em;
}

#web-subtitle
{
    font-family: 'NeueAachenPro-Thin';
    font-size: 1.85em;
}

#home-station-holder
{
    position: absolute;
    
    width: 100%;
    bottom: 0px;
}

#home-station
{
    width: 154px;
    margin: 0 auto;
    padding-left: 4%;
}

#clouds-holder
{
    position: absolute;
    
    width: 100%;
    bottom: 20%;
}

.cloud
{
    position: absolute;
    
    opacity: .95;
}

#nav-message
{
    position: absolute;
    z-index: 5;
    
    width: 100%;
    bottom: 30%;
    
    text-align: center;
    color: #e2e2e2;
}

/* :::::::::::::::::::::::::::::: Skills Page ::::::::::::::::::::::::::::::: */

.ground[role="skills"]
{
    height: 240px;
    padding: 20px;
    
    background-color: #d75324;
    
    box-sizing: border-box;
}

#skills-enviroment
{
    position: absolute;
    
    width: 100%;
    bottom: 240px;
}

.gemstone
{
    position: absolute;
    
    bottom: 0px;
    
    cursor: url(../img/general/cursor_hover.png), auto;
}

.gemstone h2
{
    width: 100%;
    margin-bottom: -35px;
    padding-bottom: 15px;
    
    text-align: center;
    color: #e2e2e2;
    font-family: 'NeueAachenPro-Medium';
    font-size: 1.2em;
    
    opacity: 0;
    
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.gemstone:hover h2
{
    margin-bottom: 0px;
    
    opacity: 1;
}

#skills-spaceship-holder
{
    position: absolute;
    
    bottom: 0px;
    left: 55%
}

#flames-holder
{
    position: absolute;
    
    width: 100%;
    bottom: 240px;
}

#flames-holder img
{
    position: absolute;
    display: block;
    
    bottom: 0px;
}

.flame-sml, .flame-big
{
    opacity: 0;
}

#skills-holder
{
    display: flex;
    justify-content: center;
    
    width: 100%;
    height: 100%;
}

.skill-card
{
    position: relative;
    flex-shrink: 0;
    
    perspective: 1000px;
    
    width: 155px;
    min-width: 100px;
    height: 197px;
    margin: 0px 10px;
    
    color: #e2e2e2;
    
    cursor: url(../img/general/cursor_hover.png), auto;
}

.sides-holder
{
    width: 100%;
    height: 100%;
    
    background-color: #8f35a2;
    
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -ms-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    transition: all 0.4s linear;
}

.sides-holder.half
{
    transform: rotateY(90deg);
}

.sides-holder.half
{
    transform: rotateY(180deg);
}

.card-side
{
    position: absolute;
    
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}

.card-side[role="back"]
{
    box-sizing: border-box;
}

.card-gem
{
    height: 55%;
    background-color: #a747bb;
}

.card-gem img
{
    max-width: 100%;
}

.card-gem p
{
    padding: 1px 0px 6px 0px;;
    
    text-align: center;
    text-shadow: 0px 0px 10px;
    font-size: 1em;
}

.card-gem-name
{
    position: relative;
    
    height: 45%;
    
    text-align: center;
    font-family: 'NeueAachenPro-Medium';
    font-size: 1em;
    text-shadow: 0px 0px 7px;
}

.card-gem-name span
{
    font-size: 1.5em;
}

.skill-list
{
    margin-top: -4px;
    
    -webkit-transform: rotateY(-180deg);
}

.skill-item
{
    width: 80%;
    margin-left: 10%;
    padding: 5px 0px;
    
    text-align: center;
    
    background-image: url(../img/skills/item_bg.png);
    background-position: bottom;
    background-repeat: repeat-x;
}

/* ::::::::::::::::::::::::::::::: Works Page ::::::::::::::::::::::::::::::: */

/* Mystery Popup */
#mystery-popup
{
    z-index: 10;
    
    background-color: #fff;
}

#mystery-text
{
    display: block;
    width: 100%;
    
    text-align: center;
    font-size: 1.35em;
}

#badge-popup
{
    position: relative;
    z-index: 2;
    overflow: hidden;
    
    width: 0px;
    height: 2px;
    margin: 0 auto;
    
    background-color: #9360b5;
}

.open-badge
{
    width: 100% !important;
    height: 400px !important;
}

#badge-awarded
{
    margin-top: 30px;
    
    text-align: center;
    font-size: 2em;
    font-family: 'NeueAachenPro-Medium';
    color: #c66fff;
}

#badge
{
    display: block;
    
    width: 0px;
    margin: 95px auto 7px auto;
}

#badge.full-badge
{
    width: 378px;
    margin-top: 35px;
}

#badge-title
{
    text-align: center;
    font-size: 1.7em;
    font-family: 'NeueAachenPro-Book';
    color: #f2b013;
}

#unlock-bt
{
    width: 170px;
    height: 35px;
    margin: 25px auto;
    
    color: #663c83;
    line-height: 35px;
    text-align: center;
    
    background-color: #f2b013;
    
    border-radius: 3px;
}

#unlock-bt:hover
{
    width: 220px;
}

.badge-popup-top
{
    margin-top: 35px !important;
}

#game-background
{
    position: absolute;
}

#game-canvas
{
    position: absolute;
}

#moon
{
    position: absolute;
    
    width: 300px;
    height: 300px;
    bottom: -10%;
    left: 20%;
    
    background-color: #c1b6c9;
    
    border-radius: 150px;
    box-shadow: 0px 0px 200px #d1c2dc;
}

.fog
{
    position: absolute;
    
    bottom: 0px;
}

#fog-one
{
    right: 0px;
}

#fog-two
{
    right: 100%;
}

#mountains
{
    position: absolute;
    
    left: 0px;
}

#game-land[role="works"]
{
    position: absolute;
    
    width: 100%;
    height: 45px;
    
    background-color: #432d53;
}

/*** Game UI ***/

/* Unit Frames */
.game-ui[role="uframe"]
{
    width: 100%;
    height: 25px;
    margin-top: 150px;
}

#boss-hp-bar
{
    width: 70%;
    height: 5px;
    margin: 0 auto;
    
    background-color: rgba(244, 177, 19, 0.07);
}

#boss-hp-fill
{
    width: 100%;
    height: 100%;
    
    background-color: rgba(244, 177, 19, 1);
}

#boss-name
{
    text-align: center;
    line-height: 40px;
    color: #fff;
    font-family: 'NeueAachenPro-Book';
    font-size: 23px;
}

/* Menu */
.game-ui[role="menu"]
{
    position: relative;
    overflow: hidden;
    z-index: 1;
    
    width: 1100px;
    max-width: 100%;
    margin: 0 auto;
    top: 70px;
}

.menu-side
{
    width: 50%;
}

.menu-side[role="right"] /* Test width on screens */
{
    width: 40%;
}

#menu-text
{
    margin-bottom: 20px;
    padding: 5px;
    
    color: #f2b013;
    font-size: 1.2em;
}

#menu-text .title
{
    font-family: NeueAachenPro-Medium;
    font-size: 1.5em;
}

#menu-text .subtitle
{
    line-height: 35px;
    vertical-align: middle;
    font-family: NeueAachenPro-Book;
    font-size: 1.2em;
}

#bt-battle
{
    float: left;
    
    width: 90px;
    height: 90px;
    margin: 0px 0px 10px 5px;
    
    background-color: #f2b013;
    background-image: url(../img/works/game/ui/bt_battle_text.png);
    
    border-radius: 50%;
}

#bt-battle:hover
{
    background-color: #ffee8e;
}

#bt-skip
{
    float: left;
    
    width: 57px;
    height: 57px;
    margin: 16px 30px;
    
    background-color: #f2b013;
    background-image: url(../img/works/game/ui/bt_skip_text.png);
    
    border-radius: 50%;
}

#bt-skip:hover
{
    background-color: #ef2d2d;
}

#difficulty-title
{
    text-align: center;
    font-size: 1.6em;
    font-family: NeueAachenPro-Medium;
    color: #f2b013;
}

#diff-icons-holder
{
    display: flex;
    justify-content: center;
}

.diff-bt
{
    width: 64px;
    margin: 20px 0px;
    padding: 0px 15px;
    
    cursor: url(../img/general/cursor_hover.png), auto;
}

.diff-bt:hover
{
    margin-top: 15px;
}

.diff-rb-holder label
{
    display: block;
    
    width: 16px;
    height: 15px;
    margin: 7px auto 0px auto;
    
    background-image: url(../img/works/game/ui/dif_checkbox_bg.png);
    
    border-radius: 15px;
    
    cursor: url(../img/general/cursor_hover.png), auto;
}

.diff-rb:checked +  label
{
    background-color: #f2b013;
}

#difficulty-details
{
    margin-top: 25px;
    text-align: center;
    color: #f2b013;
}

#difficulty-details .title
{
    font-family: NeueAachenPro-Medium;
    font-size: 1.4em;
}

#difficulty-details .more
{
    display: block;
    font-size: 1.1em;
}

/* How To Play */

#how-to-play
{
    position: relative;
    z-index: 2;
    display: none;
    
    width: 600px;
    max-width: 90%;
    margin: 0 auto;
}

#instructions
{
    width: 100%;
    height: 100%;
    
    color: #f2b013;
    text-align: center;
}

#instructions .title
{
    font-size: 1.9em;
    line-height: 50px;
}

#instructions .text
{
    font-size: 1.5em;
}

#instructions .note
{
    font-size: 1.3em;
}

#instructions .text-test
{
    padding-top: 50px;
    font-size: 1.7em;
}

#instructions .dont-show
{
    display: inline-block;
    font-size: 1.1em;
}

#keyboard
{
    overflow: hidden;
    
    width: 171px;
    margin: 10px auto 50px auto;
}

.key
{
    float: right;
    
    background-position: center;
    background-repeat: no-repeat;
}

.key[role="up"]
{
    float: none;
    clear: both;
    
    background-image: url(../img/works/game/ui/key_up.png);
}

.key[role="right"]
{
    clear: right;
    
    background-image: url(../img/works/game/ui/key_right.png);
}

.key[role="shoot"]
{
    background-image: url(../img/works/game/ui/key_shoot.png);
}

.key[role="left"]
{
    background-image: url(../img/works/game/ui/key_left.png);
}

.key img
{
    display: block;
    
    opacity: 0;
}

.key[role="up"] img
{
    margin: 0 auto;
}

#got-it
{
    width: 150px;
    margin: 10px auto;
    padding: 7px 0px;
    
    color: #663c83;
    font-size: 1.1em;
    
    background-color: #f2b013;
    
    border-radius: 3px;
}

#got-it:hover
{
    width: 170px;
}

label[for="dont-show-again"]
{
    position: relative;
    display: block;
    
    width: 10px;
    height: 11px;
    margin-top: 4px;
    margin-right: 5px;
    
    background-image: url(../img/works/game/ui/checkbox_box.png);
}

label[for="dont-show-again"] img
{
    position: absolute;
    top: 10px;
    
    opacity: 0;
}

#dont-show-again:checked + label img
{
    top: 0px;
    
    opacity: 1;
}

/* Works */
#works-container
{
    overflow: hidden;
    position: relative;
    display: none;
    z-index: 2;
    
    width: 800px;
    max-width: 90%;
    margin: 0 auto;
}

#works-title
{
    margin-bottom: 25px;
    
    text-align: center;
    font-size: 2em;
    font-family: 'NeueAachenPro-Medium'
}

#works-title.won
{
    color: #21f2a6 !important;
}

#works-title.lost
{
    color: #fb2c40 !important;
}

#works-wrapper
{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    
    width: 100%;
}

.item
{
    position: relative;
    
    width: 160px;
    height: 127px;
    margin: 0px 15px 35px 15px;
    
    text-align: center;
    color: #663c83;
    
    background-image: url(../img/works/item_bg.png);
    
    cursor: url(../img/general/cursor_hover.png), auto;
}

.item:hover
{
    color: #a02cf0;
}

.item a
{
    display: block;
    position: absolute;
    
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}

.item.p
{
    margin-top: 35px !important;
    margin-bottom: 0px !important;
    
    opacity: 0;
}

.item .icon
{
    overflow: hidden;
    width: 57px;
    height: 57px;
    margin: 5px auto;
    
    border-radius: 50%;
}

.item .icon img
{
    margin: -5px 0px 0px -5px;
}

.item .title
{
    margin: 8px 0px 6px 0px;
    font-size: 1.2em;
    font-family: 'NeueAachenPro-Medium'
}

.item .info
{
    
}

.item .type
{
    position: absolute;
    overflow: hidden;
    
    width: 100%;
    height: 0px;
    bottom: 0px;
    
    color: #e2e2e2;
    line-height: 30px;
    
    background-color: rgba(0,0,0,0.3);
}

.item:hover .type
{
    height: 30px;
    bottom: -30px;
}

/* :::::::::::::::::::::::::::::: Hire Page ::::::::::::::::::::::::::::::: */

.ground[role="hire"]
{
    height: 150px;
    
    background-color: #211e24;
    
    box-sizing: border-box;
}

#hills
{
    position: absolute;
    
    width: 100%;
    bottom: 150px;
}

#hills img
{
    width: 100%;
}

#gems
{
    position: absolute;
    display: block;
    
    bottom: 150px;
    left: 45%;
}

#station-holder
{
    width: 418px;
    height: 315px;
    bottom: 150px;
    right: 3%;
    
    background-image: url(../img/hire/station_seq.png);
}

#player-holder
{
    position: absolute;
    
    width: 12%;
    max-width: 195px;
    bottom: 150px;
    left: 15%;
}

#player-holder img
{
    width: 100%;
}

#linkedin-bt
{
    position: absolute;
    
    width: 90%;
    height: 100%;
    top: 0%;
    right: 5%;
    
    border-radius: 3px;
    
    cursor: url(../img/general/cursor_hover.png), auto;
}

/*#linkedin-bt:hover
{
    background-color: rgba(255,255,255,0.2);
    
    box-shadow: 0px 0px 7px rgba(255,255,255,0.5);
}*/

#linkedin-link
{
    display: block;
    
    width: 100%;
    height: 100%;
}

#thanks-text
{
    position: absolute;
    
    width: 40%;
    top: 23%;
    left: 30%;
    
    text-align: center;
    color: #f2f2f2;
}

#thanks-text .title
{
    margin-bottom: 10px;
    
    font-family: 'NeueAachenPro-Medium';
    font-size: 2.3em;
}

#thanks-text .text
{
    font-family: 'NeueAachenPro-Book';
    font-size: 1.4em;
}

#rating-holder
{
    overflow: hidden;
    
    width: 180px;
    padding: 25px 0px 15px 0px;
}

.rate-star
{
    float: left;
    width: 30px;
    margin: 0px 3px;
    
    background-image: url(../img/hire/star.png);
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 100%;
    
    cursor: url(../img/general/cursor_hover.png), auto;
}

.rate-star img
{
    width: 100%;
    
    opacity: 0;
}

.rate-star.fill img
{
    opacity: 0.7;
}

.rate-star.rated img
{
    opacity: 1 !important;
}

.rate-star.picked img
{
    opacity: 1 !important;
}

#rate-bt
{
    display: inline-block;
    
    margin-bottom: 20px;
    padding: 5px 15px 4px 19px;
    
    background-color: #379bdd;
    
    border-radius: 3px;
}

#rate-bt:hover
{
    padding: 5px 25px 4px 29px;
}

#voted-msg
{
    margin-bottom: 20px;
}