/*Popup*/
.popup {
    visibility:hidden;
	opacity:0;
    position:fixed;
    width:100%;
    height:100vh;
    overflow:hidden;
    overflow-y:auto;
    left:0;
    top:0;
    right:0;
    bottom:0;
    display:flex;
    justify-content:center;
    align-items:center;
    background-color:rgba(0,0,0,0.5);
    z-index:16;
}
.popup__transparent {
    background-color:rgba(0,0,0,0);
}
.popup.show{
    opacity:1;
	visibility:visible;
	-webkit-transition-delay:0s, 0s;
	transition-delay:0s, 0s
}

@media screen and (min-width:1100px){
    .popup {
        height:100vh !important;
    }
}

@media (orientation:landscape) and (max-width:1100px) {
    .popup {
        height:auto !important;
    }
}

.popup__inr {
    position: relative;
    display:block;
    width:90%;
    height:auto;
    background:#faf3fd;
}
.close__pop {
    position:absolute;
    cursor: pointer;
}
.popup__inr h2 {
    font-weight:700;
    color:#51009d;
}
.popup__inr p {
    color:#51009d;
    font-weight:400;
}
.popup__inr strong {
    font-weight:700;
}

.list__video {
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.video__item {
    position:relative;
    background:#fff;
    overflow:hidden;
    box-shadow:0 0 24px rgba(150,0,255,0);
    cursor:pointer;
}
.video__pic,
.video__pic img {
    width:100%;
    height:100%;
}
.video__pic img {
    -webkit-object-fit:cover;
    object-fit:cover;
}

.video__txt {
    position:absolute;
    text-align:center;
    width:100%;
    height:auto;
    left:0;
    top:32%;
}
.video__txt h3{
    font-weight:700;
    color:#fff;
    text-transform:uppercase;
}
.video__txt p {
    color:#fff;
    font-weight: 500;
}
.video__item.current {
    box-shadow:0 0 24px rgba(150,0,255,0.32);
}

canvas {
    display:none;
}

.check__item {
    display:flex;
    align-items:center;
    justify-content:center;
}
input[type="checkbox"] {
    position: relative;
    width:16px;
    height:16px;
    background: #fff;
    border: 2px solid #c7aae0;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    height: 16px;
    cursor: pointer;
}

input[type="checkbox"]::after {
    content: '';
    position: absolute;
    left: 1px;
    bottom:6px;
    width: 14px;
    height: 6px;
    border-left:3px solid #51009d;
    border-bottom:3px solid #51009d;
    opacity: 0;
    -webkit-transform:rotate(-45deg);
    transform:rotate(-45deg);
}

input[type="checkbox"]:checked::after {
    opacity: 1;
}

.chk__caption {
    color:#51009d;
    font-weight:400;
    cursor: pointer;
    padding-left:10px;
}

.chk__caption a {
    color:#51009d;
    text-decoration: none;
    font-weight:700;
}


/*game info*/
.join__game h3,
.play__game h3,
.play__game h4,
.join__game li,
.gift__title  {
    color:#51009d;
}
.join__game h3,
.play__game h3,
.gift__title {
    font-weight:700;
}
.play__game h4,
.join__game li p {
    font-weight:500;
}
.btn__share__result img,
.btn__download__result img,
.btn__upload img {
    width:100%;
    height:auto;
}
.btn__upload input {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    cursor:pointer;
    z-index:1;
    opacity:0;
}

@media screen and (min-width:1101px) {
    .popup__inr {
        -webkit-border-radius:3.7037vh;
        border-radius:3.7037vh;
    }
    .close__pop {
        right:2.7777vh;
        top:2.7777vh;
        width:2.6vh;
        height:2.6vh;
        padding:0.3vh;
        -webkit-transition:all 0.3s ease-in-out;
        transition:all 0.3s ease-in-out;
    }
    .close__pop:hover {
        -webkit-transform:rotate(90deg);
        transform:rotate(90deg);
    }

    .size__large {
        max-width:94.07vh;
    }
    .size__medium {
        max-width:75.37vh;
    }
    .size__small {
        max-width:66.6666vh;
    }

    .popup__detail {
        text-align:center;
    }

    .size__small .popup__detail,
    .size__medium .popup__detail {
        padding:6% 10%;
    }

    .popup__inr h2 {
        font-size:3.14814vh;
        margin-bottom:2.037vh;
    }
    .popup__inr p {
        font-size:1.944vh;
    }
    .popup__inr .buts {
        padding-top:2.6vh;
    }
    .popup__inr .btn {
        margin-bottom:1.1vh;
    }
    .btn__play {
        width:26vh;
        margin:0 auto;
    }
    .btn__share, 
    .btn__join {
        width:78.8%;
        margin:0 auto;
    }
    .quick__video .link {
        font-size:1.9444vh;
    }
    
    .list__video {
        padding-top:2.7777vh;
    }
    .video__item {
        width:28.4%;
        height:auto;
        padding:2px;
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;

    }
    .video__item::before {
        content:'';
        display:block;
        position:relative;
        width:100%;
        height:auto;
        padding-top:136.1111%;
    }
    .video__pic {
        position:absolute;
        left:2px;
        top:2px;
        width:calc(100% - 4px);
        height:calc(100% - 4px);
    }
    .video__item,
    .video__pic,
    .video__pic img {
        -webkit-border-radius:2.7777vh;
        border-radius:2.7777vh;
    }

    .video__txt h3{
        font-size:1.76vh;
        margin-bottom:1.3888vh;
    }
    .popup__inr .video__txt p {
        padding-top:0.64vh;
        font-size:1.1111vh;
    }
    .video__play {
        width:3.7vh;
        margin:0 auto;
    }
    .video__item:hover {
        box-shadow:0 0 24px rgba(150,0,255,0.32);
    }



    /*join pop*/
    .join__game .size__large {
        max-width:94.07vh;
    }
    .join__game .popup__detail  {
        padding:6% 12%;
    }
    .join__game h3{
        font-size:3.14814vh;
        margin-bottom:4.07vh;
    }
    .game__info {
        display:flex;
        justify-content:space-between;
    }
    .info {
        flex:0 0 59%;
        max-width:59%;
    }
    .join__game li {
        border-bottom:1px solid rgba(81,0,157,0.1);
        padding-bottom:1.85185vh;
        margin-bottom:1.85185vh;
    }
    .join__game li:last-child {
        border:none;
    }
    .join__game li p {
        font-size:1.8444vh;
        text-align:left;
    }
    .gifts {
        flex:0 0 30%;
        max-width:30%;
    }
    .gift__item {
        margin-bottom:1.1111vh;
    }
    .gift__item:nth-child(1) .gift__pic{
        width:86%;
        margin:0 auto;
    }
    .gift__title {
        font-size:2.129vh;
        margin-bottom:0.926vh;
    }
    .check__item {
        margin-bottom:1.85185vh;
    }
    .chk__caption {
        font-size:1.574vh;
    }

    .join__game .btn__upload {
        width:65%;
        margin:0 auto;
    }




    /*game pop*/
    .play__game .size__large {
        max-width:97.2222vh;
    }
    .play__game .popup__detail {
        padding:6% 11%;
    }
    .play__game h3 {
        font-size:3.14814vh;
        margin-bottom:3.7037vh;
    }
    .play__game h4 {
        margin-bottom:1.6666vh;
        font-size:1.6666vh;
        text-align:left;
    }
    .game__box {
        display:flex;
        justify-content:space-between;
    }
    .game__area {
        flex:0 0 49%;
        max-width:49%;
    }
    .game__result {
        position:relative;
        display:block;
        width:100%;
        height:auto;
        box-shadow:0 0 46px rgba(242,167,234,0.36);
        -webkit-transform:rotate(-3deg);
        transform:rotate(-3deg);
    }
    .game__result::before {
        content:'';
        position:relative;
        display:block;
        width:100%;
        height:auto;
        padding-top:100%;
    }
    .crop__box  {
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        border:3px solid #fff;
        overflow:hidden;
    }
    .cr-viewport {
        background-repeat:no-repeat;
        background-position: center center;
        background-size:cover;
        
    }


    .themes {
        flex:0 0 42.6%;
        max-width:42.6%;
    }
    .them__list {
        background:#b090c7;
        -webkit-border-radius:10px;
        border-radius:10px;
    }
    .them__list ul {
        width:100%;
        display:flex;
        flex-wrap:wrap;
        padding-top:4.6666%;
    }
    .theme__item {
        position:relative;
        flex:0 0 43%;
        max-width:43%;
        margin:0 0 4.6666% 4.6666%;
        padding:3px;
        cursor:pointer;
    }
    .theme__item img {
        position:relative;
        z-index:1;
    }
    .theme__item::before{
        content:'';
        position:absolute;
        width:100%;
        height:100%;
        left:0;
        top:0;
        background: rgb(254,191,0);
        background: linear-gradient(45deg, rgba(254,191,0,1) 0%, rgba(255,240,77,1) 50%);
        opacity:0;
    }
   
    .theme__item.selected::before,
    .theme__item:hover::before {
        opacity:1;
    }

    .play__game .popup__inr .buts {
        padding-top:48px;
    }
    .btn__share__result,
    .btn__download__result {
        width:61%;
        margin:0 auto;
    }

}


@media screen and (max-width:1100px) {
    .burger-container {
        display:none;
    }
    .burger-icon {
        position:fixed;
        top:2.3vh;
        right:5.18%;
        height:3.125vh;
        width:3.125vh;
        min-width:40px;
        min-height:40px;
        cursor:pointer;
        z-index:13;
    }
    .burger-icon::before,
    .burger-icon::after {
        content: '';
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
    }
    .burger-icon::before {
        background:url(../images/nav_open.png) no-repeat center center;
        background-size:80% auto;
    }
    .burger-icon::after {
        background:url(../images/nav_close.png) no-repeat center center;
        background-size:50% auto;
        opacity:0;
    }
   
    .header__ctn {
        -webkit-transition:transform 0.5s ease-in-out;
        transition:transform 0.5s ease-in-out;
    }
    .open__menu .header__ctn {
        -webkit-transform:none;
        transform:none;
    }
    .open__menu .burger-icon::before {
        opacity:0;
    }
    .open__menu .burger-icon::after {
        opacity:1;
    }


    /*Rooms*/
    .popup__inr {
        -webkit-border-radius:2.083333vh;
        border-radius:2.083333vh;
    }
    .size__small,
    .size__medium,
    .size__large {
        max-width:90%;
    }
    .size__small .popup__detail {
        padding:9.375% 10.83333%;
    }
    .popup__detail {
        padding:9.375% 8%;
        text-align:center;
    }
    .join__game .popup__detail {
        padding:6.375% 6%;
        text-align:center;
    }
    .quick__video .popup__detail {
        padding:13.375% 8%;
    }
    .close__pop {
        width:3.08333vh;
        right:3%;
        top:3%;
    }
    .popup__inr .buts {
        padding-top:4.25vh;
    }
    .popup__inr .btn {
        margin-bottom:1.5625vh;
    }
   
    
    .popup__inr h2 {
        font-size:2.5vh;
        margin-bottom:2.5vh;
    }
    .popup__inr p {
        font-size:1.875vh;
    }
  
    .btn__play {
        width:64%;
        margin:0 auto;
    }

    .quick__video .list__video {
        padding-top:2.91666vh;
    }
    .quick__video .popup__inr .buts {
        padding-top:3.5833336vh;
    }
    .quick__video .link {
        font-size:1.5625vh;
    }
    .video__item {
        position:relative;
        width:31.25%;
        padding:2px;
    }
    .video__item::before {
        content:'';
        display:block;
        position:relative;
        width:100%;
        height:auto;
        padding-top:136.1111%;
    }
    .video__pic {
        position:absolute;
        left:2px;
        top:2px;
        width:calc(100% - 4px);
        height:calc(100% - 4px);
    }
    .video__item, 
    .video__pic, 
    .video__pic img {
        -webkit-border-radius:10px;
        border-radius:10px;
    }

    .video__txt {
        top:24%;
    }
    .video__txt h3 {
        font-size:1.5625vh;
        margin-bottom:1.3625vh;
    }
    .video__play  {
        width:3.8vh;
        margin:0 auto;
    }
    .popup__inr .video__txt p {
        padding-top:1vh;
        font-size:1.6vh;
    }


    /*Join*/
    .join__game h3,
    .play__game h3 {
        font-size:2.5vh;
        margin-bottom:1.6vh;
    }
    .join__game li {
        text-align:left;
        padding-bottom:1vh;
        margin-bottom:1vh;
        border-bottom:1px solid rgba(81,0,157,0.1);
    }
    .join__game li:last-child {
        border:none;
    }
    .join__game li p {
        font-size:1.775vh;
    }

    .gifts {
        display:flex;
        justify-content:center;
    }
    .join__game .gift__title {
        font-size:1.658333vh;
        margin-bottom:1vh;
    }
    .join__game .gift__item {
        flex:0 0 32%;
        max-width:32%;
        margin:0 1.1458333vh;
    }

    .join__game  .popup__inr .buts {
        padding-top:1vh;
    }
    .join__game .check__item {
        margin-bottom:1vh;
    }
    .join__game .chk__caption {
        font-size:1.7vh;
    }
    .join__game .btn__upload {
        width:84%;
        margin:0 auto;
    }


    .game__area {
        width:100%;
    }
    .game__result {
        position:relative;
        display:block;
        width:58%;
        height:auto;
        box-shadow:0 0 46px rgba(242,167,234,0.36);
        -webkit-transform:rotate(-3deg);
        transform:rotate(-3deg);
        margin:4vh auto 3vh auto;
    }
    .game__result::before {
        content:'';
        position:relative;
        display:block;
        width:100%;
        height:auto;
        padding-top:100%;
    }
    .crop__box  {
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        border:3px solid #fff;
        overflow:hidden;
    }
    .cr-viewport {
        background-repeat:no-repeat;
        background-position: center center;
        background-size:cover;
    }

    .play__game h4  {
        font-size:2.075vh;
        margin-bottom:1.041666vh;
    }
    .themes {
        width:100%;
    }
    .them__list {
        background:#b090c7;
        -webkit-border-radius:5px;
        border-radius:5px;
    }
    .them__list ul {
        width:100%;
        display:flex;
        flex-wrap:wrap;
        padding:3%;
        justify-content:space-between;
    }
    .theme__item {
        position:relative;
        flex:0 0 22%;
        max-width:22%;
        padding:2px;
        cursor:pointer;
    }
    .theme__item img {
        position:relative;
        z-index:1;
    }
    .theme__item::before{
        content:'';
        position:absolute;
        width:100%;
        height:100%;
        left:0;
        top:0;
        background: rgb(254,191,0);
        background: linear-gradient(45deg, rgba(254,191,0,1) 0%, rgba(255,240,77,1) 50%);
        opacity:0;
    }
   
    .theme__item.selected::before,
    .theme__item:hover::before {
        opacity:1;
    }

    .play__game  .btn__share__result, 
    .play__game  .btn__download__result {
        width:84%;
        margin:0 auto 1vh auto;
    }

}

@media screen and (max-width:840px) {
   
}

@media (orientation:landscape) and (max-width:840px) {
}


@media (orientation:portrait) and (max-width:1100px) {
   
}