/*
        __  _______ ____      ____  ___   _____ ______
       / / / / ___// __ \    / __ )/   | / ___// ____/
      / / / /\__ \/ / / /   / __  / /| | \__ \/ __/
     / /_/ /___/ / /_/ /   / /_/ / ___ |___/ / /___
     \____//____/\___\_\  /_____/_/  |_/____/_____/

        _____________  ____    ___________
       / ___/_  __/\ \/ / /   / ____/ ___/
       \__ \ / /    \  / /   / __/  \__ \
      ___/ // /     / / /___/ /___ ___/ /
     /____//_/     /_/_____/_____//____/


{
    "Job Number": "2015-1002",
    "Job Name": "UV-plus-U",
    "Developer": "Shane Gadsby",
    "Client": "Joanna Turner, Nathan Downs",
    "Course": "n/a",
    "Department": "FOSCI"
}

*/




* {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;
}

html,
body {
    background: #fff;
    color: #1e1e1e;
    font-size: 14px;
    font-family: 'Open Sans', 'Arial', sans-serif;
    height: calc(100vh -  0px);
    margin: 0;
    padding: 0;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.underclick-zone {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
}

.inert,
.inert * {
    -webkit-transition: none !important;
    transition: none !important
}

.menu {
    display: inline-block;
    vertical-align: top;
    width: 220px;
    height: 600px;
    color: #fff;
    position: relative;
    z-index: 1000;
    /* overflow: hidden; */
    /* width: 100%; */
}

.canvas {
    display: inline-block;
    vertical-align: top;
    width: 580px;
    height: 600px;
    margin-left: 19px;
    position: relative;
    display: inline-table;
    position: absolute;
    top: 0;
    left: 224px;
    /*overflow: hidden;*/
    /* background: #fff; */
}

.wrapper {
    width: 804px;
    height: 602px;
    margin: auto;
    /* border: 2px solid #4d4d4d; */
    position: relative;
    overflow: hidden;
    z-index: 10;
    -webkit-transition: 350ms ease-in-out opacity;
    transition: 350ms ease-in-out opacity;
    opacity: 0;
    filter: alpha(opacity=0);
    margin-top: 38px;
    /* margin-top: 0%; */
}

.ready .wrapper {
    opacity: 1;
    filter: alpha(opacity=100);
}

.name-wrapper {
    margin-left: 5px;
    margin-right: 5px;
    text-align: center;
    font-size: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0);
    font-weight: 500;
    padding-bottom: 11px;
    margin-top: 30px;
    margin-bottom: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 208px;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    position: relative;
    color: #fff;
    cursor: default;
}

.avatar {
    width: 100%;
    height: 318%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    position: relative;
}

svg * {
    -webkit-transition: fill ease-in-out 500ms, stroke ease-in-out 500ms;
    transition: fill ease-in-out 500ms, stroke ease-in-out 500ms;
}

.avatar-svg {
    width: 260px;
    height: 444px;
    enable-background: new 0 0 211 350;
}

.menu-button-wrapper {
    font-size: 22px;
    height: 63px;
    font-weight: 100;
    line-height: 63px;
    /* cursor: pointer; */
    position: relative;
    width: 220px;
    /* display: inline-block; */
}

.menu-button-wrapper.active menu-button-title {
    background-color: #636363;
}

.menu-button-slider {
    position: absolute;
    top: 0;
    left: -200%;
    width: 580px;
    bottom: 0;
    background-color: #4D4D4D;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: left 250ms ease-in-out;
    transition: left 250ms ease-in-out;
    overflow: hidden;
    z-index: -1;
    line-height: normal;
    text-align: center;
}

.menu-button-wrapper.active .menu-button-slider {
    left: 100%;
}

.menu-button-title {
    position: relative;
    padding-left: 85px;
    background-color: #4D4D4D;
    background-position: 13px center;
    background-repeat: no-repeat;
    cursor: pointer;
    color: #fff;
    /* font-weight: 100; */
}

.menu-button-wrapper:hover .menu-button-title,
.menu-button-wrapper.active .menu-button-title {
    background-color: #636363;
}

.input-name {
    border: none;
    color: #222;
    width: 486px;
    padding: 10px;
    padding-top: 9px;
    margin-top: 7px;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
        user-select: text;
    background: #fff !important;
}

.menu-colour-cover {
    background-color: #4d4d4d;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 220px;
}

.menu-button-slider button {
    width: 147px;
    border: none;
    background-color: transparent;
    height: 100%;
    vertical-align: top;
    /* margin-top: 9px; */
    margin: 0px -5px;
    background-repeat: no-repeat;
    background-position: 10px center;
    outline: none !important;
    background-size: 18%;
}

.slider-gender {
    width: 286px;
    padding: 0;
}

.slider-gender button:nth-child(1) {
    /* border-right: 2px solid #fff; */
    margin: 0 -6px;
}

.menu-divider {
    display: inline-block;
    width: 2px;
    height: 70%;
    background-color: #58595b;
    margin-top: 9px;
    vertical-align: top;
}

.menu-button-slider button:hover,
.menu-button-slider button.active {
    background-color: #636363;
}

.menu-button-slider > span {
    display: inline-block;
    height: 100%;
}

.slider-age button {
    padding-left: 48px;
    font-size: 18px;
    text-align: left;
    text-transform: capitalize;
}

.menu-button-slider > span:last-child .menu-divider {
    display: none;
}

ellipse.avatar-shadow.primary {
    cy: 240;
}

ellipse.avatar-shadow.adult {
    cy: 300;
}

ellipse.avatar-shadow.mature {
    cy: 300;
}

.colour-blocks {
    display: inline-block;
    width: 45px;
    height: 45px;
    margin: 10px;
    cursor: pointer;
    margin-right: 0;
    margin-top: 9px;
}

.menu-button-slider.slider-eye-colour {
    width: 450px;
    text-align: left;
}

.cane {
    -webkit-transform: translateY(194px);
        -ms-transform: translateY(194px);
            transform: translateY(194px);
}

.menu-button-slider.slider-skin-tone {
    width: 340px;
    text-align: left;
}

.colour-blocks.active {
    outline: #fff 5px solid;
}

.menu-button-slider.slider-hair {
    width: 504px;
    text-align: left;
}

.canvas-overlays {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
}

.hair-styles-item {
    display: inline-block;
    vertical-align: middle;
    margin: 0 50px;
    top: 0;
    -webkit-transform: scale(0.7);
        -ms-transform: scale(0.7);
            transform: scale(0.7);
    position: absolute;
    -webkit-transition: none;
    transition: none;
}

.hair-styles-row {
    position: absolute;
    top: 173px;
    left: 0px;
    right: 0;
    height: 50px;
    width: 580px;
    white-space: nowrap;
}

.position-2,
.position-3,
.position-4,
.position-5,
.position-6 {
    -webkit-transition: all 350ms ease-in-out, opacity 0ms linear;
    transition: all 350ms ease-in-out, opacity 0ms linear;
}

.position-0,
.position-1,
.position-2 {
    left: -1000px;
    top: 0;
}

.position-2 {
    left: -112px;
}
.position-6 {
    left: 514px;
}

.position-7 {
    left: 1000px;
}

.position-3 {
    left: 16px;
}

.position-5 {
    /* transition: none; */
    /* top: 179px; */
    left: 406px;
}

.hair-styles-item.active {
    -webkit-transform: scale(2);
        -ms-transform: scale(2);
            transform: scale(2);
}

.hair-styles-item.hair-style-0.active {
    top: 0px;
    left: 212px;
}

.hair-styles-item.hair-style-1.active {
    left: 212px;
    top: 0px;
}

.hair-styles-item.hair-style-2.active {
    left: 182px;
    top: -14px;
}

.hair-styles-item.hair-style-3.active {
    left: 212px;
    top: -1px;
}

.hair-styles-item.hair-style-4.active {
    left: 212px;
    top: 14px;
}

.hair-styles-item.hair-style-5.active {
    left: 212px;
    top: 0px;
}

.hair-styles-item.hair-style-6.active {
    left: 211px;
    top: 9px;
}

.hair-styles-item.hair-style-7.active {
    top: -8px;
    left: 187px;
}

.arrow-left,
.arrow-right {
    position:absolute;
    top: 81px;
    bottom:0;
    width: 0px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    z-index: 999999;
}

.arrow-left {
    background-image: url(../img/assets/arrows_left.png);
    left: 50px;
    padding: 50px;
    padding-right: 123px;
    background-position: 40px center;
}

.arrow-right {
    background-image: url(../img/assets/arrows_right.png);
    right: 50px;
    padding: 50px;
    padding-left: 123px;
    background-position: 123px  center;
}

.menu-button-slider.slider-clothing {
    width: 442px;
    text-align: left;
}






/*Hats*/

.overlay-hats .position-2 {
    top: 0;
    left: -185px;
}

.overlay-hats .position-3 {
    top: 0;
    left: 0px;
}

.overlay-hats .position-1 {
    left: 537px;
    -webkit-transition: none;
    transition: none;
    opacity: 0;
    filter: alpha(opacity=0);
}

.overlay-hats .position-0 {
    top: 0;
    left: 539px;
    -webkit-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out;
    opacity: 0;
    filter: alpha(opacity=0);
}

.hat-style-0.active {
    top: -37px;
    left: 211px;
}

.hat-style-1.active {
    top: -26px;
    left: 219px;
}

.hat-style-2.active {
    top: -25px;
    left: 192px;
}

.hat-style-3.active {
    top: -24px;
    left: 208px;
}

.hat-style-4.active {
    top: -13px;
    left: 209px;
    -webkit-transform: scale(2);
        -ms-transform: scale(2);
            transform: scale(2);
}

.hat-style-5.active {
    top: -11px;
    left: 208px;
}

.overlay-hats .position-2 {
    left: -185px;
    top: 0;
    /* transition: none; */
    opacity: 0;
    filter: alpha(opacity=0);
}

.overlay-hats .colour-blocks-row {
    width: 232px;
    background-color: #636363;
    position: absolute;
    top: 525px;
    height: 64px;
    z-index: 9999999;
}



.age-primary .canvas {
    top: -1px;
}

.age-secondary .canvas {
    top: -21px;
}

.age-adult .canvas,
.age-mature .canvas {
    top: -61px;
}














/*Cylcler*/
.cycle-item {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform: translate(-200px, 135px);
    -ms-transform: translate(-200px, 135px);
    transform: translate(-200px, 135px);
    -webkit-transition: none;
    transition: none;
    visibility: hidden;
}

.cycle-item.next {
    -webkit-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
    opacity:1;
    filter: alpha(opacity=100);
    visibility: visible;
}

.cycle-item.prev {
    /* transform: translate(66px, 0px) scale(0.6); */
    -webkit-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
    opacity:1;
    filter: alpha(opacity=100);
    visibility: visible;
}

.cycle-item.nextOffscreen,
.cycle-item.nextOffscreen2 {
    opacity:0;
    filter: alpha(opacity=0);
    /* transform: translate(800px, 0px) scale(0.6); */
    -webkit-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
    visibility: hidden;
}

.cycle-item.nextOffscreen2 {
    -webkit-transition: none;
    transition: none
}

.cycle-item.prevOffScreen,
.cycle-item.prevOffScreen2 {
    opacity:0;
    filter: alpha(opacity=0);
    -webkit-transform: translate(-200px, 124px) scale(0.6);
        -ms-transform: translate(-200px, 124px) scale(0.6);
            transform: translate(-200px, 124px) scale(0.6);
    -webkit-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
}

.cycle-item.prevOffScreen2 {
    -webkit-transition: none;
    transition:none
}

.cycle-item.prevOffScreen {
    /* transform: translate(-200px, -2px); */
}

.cycle-item.current {
    -webkit-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
    visibility: visible;
}




/*Shirts*/
.shirt-0.current {
    -webkit-transform: translate(284px, 127px) scale(2);
        -ms-transform: translate(284px, 127px) scale(2);
            transform: translate(284px, 127px) scale(2);
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
}

.shirt-1.current {
    -webkit-transform: translate(246px, 110px) scale(2);
    -ms-transform: translate(246px, 110px) scale(2);
    transform: translate(246px, 110px) scale(1.96);
}

.shirt-2.current {
    -webkit-transform: translate(250px, 109px) scale(2);
    -ms-transform: translate(250px, 109px) scale(2);
    transform: translate(250px, 109px) scale(1.98);
    -webkit-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
}

.shirt-3.current {
    -webkit-transform: translate(264px, 100px) scale(2);
        -ms-transform: translate(264px, 100px) scale(2);
            transform: translate(264px, 100px) scale(2);
}

.shirt-4.current {
    -webkit-transform: translate(250px, 111px) scale(2);
    -ms-transform: translate(250px, 111px) scale(2);
    transform: translate(250px, 111px) scale(1.98);
}

.shirt-5.current {
    -webkit-transform: translate(250px, 109px) scale(2);
        -ms-transform: translate(250px, 109px) scale(2);
            transform: translate(250px, 109px) scale(2);
}





/*Pants*/
.age-primary .pant-0.current {
    -webkit-transform: translate(249px, 167px) scale(2);
        -ms-transform: translate(249px, 167px) scale(2);
            transform: translate(249px, 167px) scale(2);
}

.age-primary .pant-1.current {
    -webkit-transform: translate(253px, 175px) scale(2);
        -ms-transform: translate(253px, 175px) scale(2);
            transform: translate(253px, 175px) scale(2);
}

.age-secondary .pant-0.current {
    -webkit-transform: translate(249px, 186px) scale(2);
    -ms-transform: translate(249px, 186px) scale(2);
    transform: translate(284px, 180px) scale(2);
}

.age-secondary .pant-1.current {
    -webkit-transform: translate(251px, 180px) scale(2);
        -ms-transform: translate(251px, 180px) scale(2);
            transform: translate(251px, 180px) scale(2);
}

.age-adult .pant-0.current,
.age-mature .pant-0.current {
    -webkit-transform: translate(249px, 186px) scale(2);
        -ms-transform: translate(249px, 186px) scale(2);
            transform: translate(249px, 186px) scale(2);
}

.age-adult .pant-1.current,
.age-mature .pant-1.current {
    -webkit-transform: translate(250px, 206px) scale(2);
        -ms-transform: translate(250px, 206px) scale(2);
            transform: translate(250px, 206px) scale(2);
}




/*Hats*/
.hat-0.current {
    -webkit-transform: translate(274px, -32px) scale(2);
        -ms-transform: translate(274px, -32px) scale(2);
            transform: translate(274px, -32px) scale(2);
    opacity: 0;
    filter: alpha(opacity=0);
}

.hat-1.current {
    -webkit-transform: translate(262px, -42px) scale(2.03);
        -ms-transform: translate(262px, -42px) scale(2.03);
            transform: translate(262px, -42px) scale(2.03);
}

.hat-2.current {
    -webkit-transform: translate(269.5px, -27px) scale(2.026);
        -ms-transform: translate(269.5px, -27px) scale(2.026);
            transform: translate(269.5px, -27px) scale(2.026);
}

.hat-3.current {
    -webkit-transform: translate(242px, -25px) scale(2);
        -ms-transform: translate(242px, -25px) scale(2);
            transform: translate(242px, -25px) scale(2);
}

.hat-4.current {
    -webkit-transform: translate(258px, -27px) scale(2);
        -ms-transform: translate(258px, -27px) scale(2);
            transform: translate(258px, -27px) scale(2);
}

.hat-5.current {
    -webkit-transform: translate(260px, -13px) scale(2.04);
        -ms-transform: translate(260px, -13px) scale(2.04);
            transform: translate(260px, -13px) scale(2.04);
}

.overlay-hair .arrow-right {
    top: 138px;
    right: -598px;
}

.overlay-hair .arrow-left {
    top: 138px;
    left: 0;
}

.hair-0.current {
    -webkit-transform: translate(257px, -25px) scale(2);
    -ms-transform: translate(257px, -25px) scale(2);
    transform: translate(257px, -25px) scale(2);
    opacity: 0;
}

.hair-1.current {
    -webkit-transform: translate(262px, 0px) scale(2);
        -ms-transform: translate(262px, 0px) scale(2);
            transform: translate(262px, 0px) scale(2);
}

.hair-2.current {
    -webkit-transform: translate(232px, -13px) scale(2);
        -ms-transform: translate(232px, -13px) scale(2);
            transform: translate(232px, -13px) scale(2);
}

.hair-3.current {
    -webkit-transform: translate(262px, -1px) scale(2);
        -ms-transform: translate(262px, -1px) scale(2);
            transform: translate(262px, -1px) scale(2);
}

.hair-4.current {
    -webkit-transform: translate(262px, 14px) scale(2);
        -ms-transform: translate(262px, 14px) scale(2);
            transform: translate(262px, 14px) scale(2);
}

.hair-5.current {
    -webkit-transform: translate(262px, 0px) scale(2);
        -ms-transform: translate(262px, 0px) scale(2);
            transform: translate(262px, 0px) scale(2);
}

.hair-6.current {
    -webkit-transform: translate(261px, 9px) scale(2);
        -ms-transform: translate(261px, 9px) scale(2);
            transform: translate(261px, 9px) scale(2);
}

.hair-7.current {
    -webkit-transform: translate(237px, -9px) scale(2);
        -ms-transform: translate(237px, -9px) scale(2);
            transform: translate(237px, -9px) scale(2);
}



.name-wrapper.hide-name {
    visibility: hidden;
}

.menu-button-slider.slider-name {
    text-align: left;
}

button.name-button {
    width: 82px;
    margin-left: 2px;
    background: rgb(234, 234, 234);
    color: #333;
    height: 49px;
    margin-top: 7px;
}



.menu-button-slider.slider-accessories {
    width: 580px;
    text-align: left;
}

.sunscreen-button-true {
    position: absolute;
    top: 178px;
    left: 70px;
    cursor: pointer;
    z-index: 1000;
}

.sunscreen-button-false {
    position: absolute;
    top: 208px;
    left: 458px;
    cursor: pointer;
    z-index: 1000;
}

.sunscreen-splodge {
    position: absolute;
    top: 208px;
    left: 199px;
}

.tools-tools {
    position: absolute;
    top: 134px;
    left: 256px;
}

.tools-button-false {
    position: absolute;
    top: 192px;
    left: 469px;
    z-index: 1000;
    cursor: pointer;
}

.pant-2.current {
    -webkit-transform: translate(264px, 208px) scale(2.01);
        -ms-transform: translate(264px, 208px) scale(2.01);
            transform: translate(264px, 208px) scale(2.01);
}

.age-secondary .pant-2.current {
    -webkit-transform: translate(264px, 180px) scale(2.01);
    -ms-transform: translate(264px, 180px) scale(2.01);
    transform: translate(263px, 180px) scale(2.02);
}

.age-primary .pant-2.current {
    -webkit-transform: translate(264px, 181px) scale(2.01);
        -ms-transform: translate(264px, 181px) scale(2.01);
            transform: translate(264px, 181px) scale(2.01);
}

.glass-0.current {
    -webkit-transform: translate(249px, 29px);
    -ms-transform: translate(249px, 29px);
    transform: translate(286px, 15px);
    opacity: 0;
    filter: alpha(opacity=0);
}

.glass-1.current {
    -webkit-transform: translate(249px, 26px);
        -ms-transform: translate(249px, 26px);
            transform: translate(249px, 26px);
}

.glass-2.current {
    -webkit-transform: translate(248px, 25px);
        -ms-transform: translate(248px, 25px);
            transform: translate(248px, 25px);
}

.glass-3.current {
    -webkit-transform: translate(249px, 27px);
        -ms-transform: translate(249px, 27px);
            transform: translate(249px, 27px);
}

.glass-4.current {
    -webkit-transform: translate(249px, 27px);
        -ms-transform: translate(249px, 27px);
            transform: translate(249px, 27px);
}

.glass-5.current {
    -webkit-transform: translate(249px, 30px);
        -ms-transform: translate(249px, 30px);
            transform: translate(249px, 30px);
}





.loading {
    position: absolute;
    left: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    margin: auto;
    border: 2px solid transparent;
    overflow: hidden;
    z-index: 10;
    -webkit-transition: 350ms ease-in-out opacity;
    transition: 350ms ease-in-out opacity;
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.ready .loading {
    opacity: 0;
    filter: alpha(opacity=0);
    display: none;
}

.tools-button-true {
    -webkit-transform: scale(0.3);
        -ms-transform: scale(0.3);
            transform: scale(0.3);
    position: absolute;
    top: 95px;
    left: 5px;
    cursor: pointer;
    z-index: 1000;
}

.canvas-offset {
    margin-top: 59px;
    position: absolute;
    top: 0;
    left: 0;
    width: 580px;
    height: 600px;
}

.slider-accessories button {
    width: 144px;
}

.makeup-item, .makeup-item > div {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 30px;
}

.makeup-item > div {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 100%;
    width: inherit;
    height: inherit;
    -webkit-transition: 250ms left ease-in-out;
    transition: 250ms left ease-in-out;
    left: 0;
}

.makeup-item.current > div:first-child {
    left: 0px;
}
.makeup-item.current > div:last-child {
    left: 71px;
}

.makeup-item.current {
    width: 15px;
    height: 15px;
    /* overflow: hidden; */
    -webkit-transform: translate(265px, 14px);
        -ms-transform: translate(265px, 14px);
            transform: translate(265px, 14px);
}


.comment-box {
    position: absolute;
    top: 5px;
    left: 151px;
    z-index: 1;
    width: 508px;
    right: 0;
    /* background-image: url(../img/assets/comment-box.svg); */
    /* background-size: cover; */
    /* background-position: top left; */
    /* background-repeat: no-repeat; */
    margin: auto;
}

.mute-toggle {
    position: absolute;
    top: 14px;
    right: 16px;
    cursor: pointer;
    z-index: 1000;
    width: 30px;
    height: 30px;
}

.comment-box-img {
    position: absolute;
    top: -9px;
    width: 530px;
    height: 182px;
    left: -5px;
    z-index: 1;
}

.mute-toggle img:first-child {
    margin-left: 4px;
    margin-top: 2px;
}

.comment-box-title {
    position: relative;
    top: -9px;
    left: 22px;
    right: 0;
    font-size: 18px;
    font-weight: 500;
    z-index: 2;
    /* max-width: 290px; */
    font-weight: 500;
}

.comment-box-text {
    position: relative;
    top: -11px;
    left: 23px;
    line-height: 17px;
    font-size: 14px;
    z-index: 2;
    width: 471px;
}

.has-text-false .comment-box-title {
    display: table-cell;
    height: 100px;
    vertical-align: middle;
    position: relative;
    z-index: 2;
    margin: 0 !important;
    /* width: 300px; */
    padding-left: 20px;
    padding-right: 18px;
    box-sizing: initial;
    left: 0;
}

.comment-box.has-text-false {
    display: table;
    height: 131px;
}

.avatar-shadow-wrapper {
    position: absolute;
    top: 366px;
    left: 421px;
    z-index: -1;
}

.overlay-hats .arrow-right {
    top: -26px;
    right: 0;
}

.overlay-hats .arrow-left {
    top: -26px;
    left: 0;
}

.overlay-hair .next {
    -webkit-transform: translate(448px, 0px) scale(0.6);
        -ms-transform: translate(448px, 0px) scale(0.6);
            transform: translate(448px, 0px) scale(0.6);
}

.overlay-hair .nextOffscreen {
    -webkit-transform: translate(800px, 0px) scale(0.6);
        -ms-transform: translate(800px, 0px) scale(0.6);
            transform: translate(800px, 0px) scale(0.6);
}

.overlay-hair .prev {
    -webkit-transform: translate(66px, 0px) scale(0.6);
        -ms-transform: translate(66px, 0px) scale(0.6);
            transform: translate(66px, 0px) scale(0.6);
}

.overlay-hair .prevOffScreen {
    -webkit-transform: translate(-200px, 0px);
        -ms-transform: translate(-200px, 0px);
            transform: translate(-200px, 0px);
}




.overlay-hats .prev {
    -webkit-transform: translate(66px, 0px) scale(0.6);
        -ms-transform: translate(66px, 0px) scale(0.6);
            transform: translate(66px, 0px) scale(0.6);
}

.overlay-hats .prevOffScreen {
    -webkit-transform: translate(-200px, 0px);
        -ms-transform: translate(-200px, 0px);
            transform: translate(-200px, 0px);
}

.overlay-hats .prevOffScreen2 {
    -webkit-transform: translate(-200px, 0px);
        -ms-transform: translate(-200px, 0px);
            transform: translate(-200px, 0px);
}

.overlay-hats .next {
    -webkit-transform: translate(443px, 0) scale(0.6);
        -ms-transform: translate(443px, 0) scale(0.6);
            transform: translate(443px, 0) scale(0.6);
}

.overlay-hats .nextOffscreen {
    -webkit-transform: translate(800px, 0) scale(0.6);
        -ms-transform: translate(800px, 0) scale(0.6);
            transform: translate(800px, 0) scale(0.6);
}

.overlay-hats .nextOffscreen2 {
    -webkit-transform: translate(800px, 0) scale(0.6);
        -ms-transform: translate(800px, 0) scale(0.6);
            transform: translate(800px, 0) scale(0.6);
}





.overlay-shirts .prev {
    -webkit-transform: translate(66px, 102px) scale(0.6);
        -ms-transform: translate(66px, 102px) scale(0.6);
            transform: translate(66px, 102px) scale(0.6);
}

.overlay-shirts .prevOffScreen {
    -webkit-transform: translate(-200px, 102px);
        -ms-transform: translate(-200px, 102px);
            transform: translate(-200px, 102px);
}

.overlay-shirts .prevOffScreen2 {
    -webkit-transform: translate(-200px, 102px);
        -ms-transform: translate(-200px, 102px);
            transform: translate(-200px, 102px);
}

.overlay-shirts .next {
    -webkit-transform: translate(443px, 102px) scale(0.6);
        -ms-transform: translate(443px, 102px) scale(0.6);
            transform: translate(443px, 102px) scale(0.6);
}

.overlay-shirts .nextOffscreen {
    -webkit-transform: translate(800px, 102px) scale(0.6);
        -ms-transform: translate(800px, 102px) scale(0.6);
            transform: translate(800px, 102px) scale(0.6);
}

.overlay-shirts .nextOffscreen2 {
    -webkit-transform: translate(800px, 102px) scale(0.6);
        -ms-transform: translate(800px, 102px) scale(0.6);
            transform: translate(800px, 102px) scale(0.6);
}

.overlay-shirts .arrow-left {
    top: 85px;
    left: 0;
}

.overlay-shirts .arrow-right {
    top: 85px;
    right: 0;
}






.overlay-pants .prev {
    -webkit-transform: translate(66px, 175px) scale(0.6);
        -ms-transform: translate(66px, 175px) scale(0.6);
            transform: translate(66px, 175px) scale(0.6);
}

.overlay-pants .prevOffScreen {
    -webkit-transform: translate(-200px, 175px);
        -ms-transform: translate(-200px, 175px);
            transform: translate(-200px, 175px);
}

.overlay-pants .prevOffScreen2 {
    -webkit-transform: translate(-200px, 175px);
        -ms-transform: translate(-200px, 175px);
            transform: translate(-200px, 175px);
}

.overlay-pants .next {
    -webkit-transform: translate(443px, 175px) scale(0.6);
        -ms-transform: translate(443px, 175px) scale(0.6);
            transform: translate(443px, 175px) scale(0.6);
}

.overlay-pants .nextOffscreen {
    -webkit-transform: translate(800px, 175px) scale(0.6);
        -ms-transform: translate(800px, 175px) scale(0.6);
            transform: translate(800px, 175px) scale(0.6);
}

.overlay-pants .nextOffscreen2 {
    -webkit-transform: translate(800px, 175px) scale(0.6);
        -ms-transform: translate(800px, 175px) scale(0.6);
            transform: translate(800px, 175px) scale(0.6);
}

.overlay-pants .arrow-left {
    top: 156px;
    left: 0;
}

.overlay-pants .arrow-right {
    top: 156px;
    right: -17px;
}






.overlay-glasses .prev {
    -webkit-transform: translate(50px, 27px) scale(0.6);
        -ms-transform: translate(50px, 27px) scale(0.6);
            transform: translate(50px, 27px) scale(0.6);
}

.overlay-glasses .prevOffScreen {
    -webkit-transform: translate(-200px, 27px);
        -ms-transform: translate(-200px, 27px);
            transform: translate(-200px, 27px);
}

.overlay-glasses .prevOffScreen2 {
    -webkit-transform: translate(-200px, 27px);
        -ms-transform: translate(-200px, 27px);
            transform: translate(-200px, 27px);
}

.overlay-glasses .next {
    -webkit-transform: translate(428px, 27px) scale(0.6);
        -ms-transform: translate(428px, 27px) scale(0.6);
            transform: translate(428px, 27px) scale(0.6);
}

.overlay-glasses .nextOffscreen {
    -webkit-transform: translate(800px, 27px) scale(0.6);
        -ms-transform: translate(800px, 27px) scale(0.6);
            transform: translate(800px, 27px) scale(0.6);
}

.overlay-glasses .nextOffscreen2 {
    -webkit-transform: translate(800px, 27px) scale(0.6);
        -ms-transform: translate(800px, 27px) scale(0.6);
            transform: translate(800px, 27px) scale(0.6);
}

.overlay-glasses .arrow-left {
    top: -13px;
    left: 0;
}

.overlay-glasses .arrow-right {
    top: -13px;
    right: 0;
}





.overlay-makeup .prev {
    -webkit-transform: translate(72px, 11px);
        -ms-transform: translate(72px, 11px);
            transform: translate(72px, 11px);
}

.overlay-makeup .prevOffScreen {
    -webkit-transform: translate(-200px, 11px);
        -ms-transform: translate(-200px, 11px);
            transform: translate(-200px, 11px);
}

.overlay-makeup .prevOffScreen2 {
    -webkit-transform: translate(-200px, 11px);
        -ms-transform: translate(-200px, 11px);
            transform: translate(-200px, 11px);
}

.overlay-makeup .next {
    -webkit-transform: translate(487px, 11px);
        -ms-transform: translate(487px, 11px);
            transform: translate(487px, 11px);
}

.overlay-makeup .nextOffscreen {
    -webkit-transform: translate(800px, 11px);
        -ms-transform: translate(800px, 11px);
            transform: translate(800px, 11px);
}

.overlay-makeup .nextOffscreen2 {
    -webkit-transform: translate(800px, 11px);
        -ms-transform: translate(800px, 11px);
            transform: translate(800px, 11px);
}

.overlay-makeup .arrow-left {
    top: 6px;
    left: 0;
}

.overlay-makeup .arrow-right {
    top: 6px;
    right: 0;
}

.makeup-0 {
    background-image: url(../img/assets/shirts_0.svg);
    background-size: cover;
}

.makeup-0.current {
    opacity: 0;
    filter: alpha(opacity=0);
}

.underclick-zone.underclick-zone-inner {
    position: absolute;
    /* background: red; */
    z-index: 999;
}

.pant-0.current {
    opacity: 0;
    filter: alpha(opacity=0);
}

.fullscreen {
    position: absolute;
    top: 645px;
    width: 111px;
    text-align: center;
    margin: auto;
    right: 0;
    left: 250px;
    z-index: 1000;
    cursor: pointer;
    padding: 10px;
    /* display: none; */
}

@media (max-height: 200px) {
    .mq-test {
        content: '200';
    }
}

@media (max-height: 400px) {
    .mq-test {
        content: '200';
    }
}

@media (max-height: 500px) {
    .mq-test {
        content: '200';
    }
}


.start-screeen {
    bottom: 0;
    right: 0;
    z-index: 10000;
    margin: auto;
    text-align: center;
    background: #fff;
    display: none;
    margin-top: 59px;
    position: absolute;
    top: 0;
    left: 0;
    width: 800px;
    height: 600px;
}

#start_screeen {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.ready .start-screeen {
    display: block;
}

.loading img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}




.canvas-offset {}

.switch-to-landscape {
    display: none;
}

.name-wrapper-bottom {
    display: none;
}

rect.ss-st5 {
    cursor: pointer;
}

text.ss-st1.ss-st2.ss-st6 {
    cursor: pointer;
}

.ready .fullscreen {
    /* display: block; */
}



.name-wrapper-bottom.hide-name {
    display: none;
}

.start-mobile {
    display: none;
}

.start-desktop {
    width: 500px;
    overflow: hidden;
    margin: auto;
}

.start-desktop svg {
    margin-left: -247px;
}