@import url('//fonts.googleapis.com/css?family=Bree+Serif&subset=latin-ext');

#bi--promo {width:100%;height:300px;position:relative;overflow:hidden}
#bi--room-floor {position:absolute;bottom:0;left:0;width:100%;height:50%;perspective:150px}
#bi--room-floor .floor {position:absolute;bottom:4%;left:0;width:100%;height:150%;transform:rotatex(45deg);transform-style:preserve-3d;
    background-image: url(../img/floor-default.jpg)
}
.bi--theme-2 #bi--room-floor .floor,
.bi--theme-4 #bi--room-floor .floor {background-image: url(../img/floor-2.jpg)}
#bi--room-walls {position:absolute;top:0;left:0;width:100%;height:50%;padding:0 20%;perspective:480px}
#bi--room-walls .walls-container {position:absolute;width:100%;height:100%;height:calc(100% + 1px);transform-style:preserve-3d}
#bi--room-walls .wall {position:absolute;height:100%;box-shadow:inset 0 -19px 0 #eee,inset 0 -20px 0 rgba(0,0,0,.075),inset 0 -25px 0 #fff,0 1px 1px rgba(0,0,0,.25),inset 0 -25px 2px rgba(0,0,0,.1);background-position:0 50%;z-index:50;background-color:#4caf50}
#bi--room-walls .wall.front {width:calc(60% + 2px);left:-1px;z-index:60}
#bi--room-walls .wall.left {left:0;width:calc(20% + 2px);background-position:calc(100% - 1px) 50%;
    -webkit-transform-origin: top right;
    -webkit-transform: translateX(-100%) rotateY(-35deg);
    -moz-transform-origin: top right;
    -moz-transform: translateX(-100%) rotateY(-35deg);
    -o-transform-origin: top right;
    -o-transform: translateX(-100%) rotateY(-35deg);
    -ms-transform-origin: top right;
    -ms-transform: translate(-100%);
    transform-origin: top right;
    transform: translateX(-100%) rotateY(90deg)
}
#bi--room-walls .wall.right {
    transform-origin: top left;
    transform: translateX(-100%) rotateY(-90deg);
    width: calc(20% + 2px);
    left:auto;
    right:-4px;
    background-position:calc(200% - 100vw - 1px) 50%
}

#bi--room-walls .wall:before {
    content: '';
    position: absolute;
    width: 100%;
    height: calc(100% - 25px);
    background-size: 5vw;
    background-image: -webkit-linear-gradient(0, transparent 75%, rgba(255,255,255, .1) 50%);
    background-image: -moz-linear-gradient(0px 50%, transparent 75%, rgba(255,255,255, 0.1) 50%);
    background-image: -ms-linear-gradient(0, transparent 75%, rgba(255,255,255, .1) 50%);
    background-image: -o-linear-gradient(0, transparent 75%, rgba(255,255,255, .1) 50%);
}
#bi--room-walls .wall:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    border-left: 1px solid rgba(119,119,119,.1);
    border-right: 1px solid rgba(119,119,119,.1);
    left: -1px;
}

#bi--room-walls .wall.right:after {
    opacity: 0.85;
    background: -moz-linear-gradient(left,  rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(left,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%);
    background: linear-gradient(to right,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#00000000',GradientType=1 );
}
#bi--room-walls .wall.left:after {
    opacity: 0.85;
    background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
    background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%);
    background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#80000000',GradientType=1 );
}
#bi--room-walls .wall.front:after {
    opacity: 0.8;
    background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.12) 21%, rgba(0, 0, 0, 0.03) 31%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.03) 70%, rgba(0, 0, 0, 0.12) 81%, rgba(0, 0, 0, 0.5) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0.5)), color-stop(21%, rgba(0, 0, 0, 0.12)), color-stop(31%, rgba(0, 0, 0, 0.03)), color-stop(50%, rgba(0, 0, 0, 0)), color-stop(70%, rgba(0, 0, 0, 0.03)), color-stop(81%, rgba(0, 0, 0, 0.12)), color-stop(100%, rgba(0, 0, 0, 0.5)));
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.12) 21%, rgba(0, 0, 0, 0.03) 31%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.03) 70%, rgba(0, 0, 0, 0.12) 81%, rgba(0, 0, 0, 0.5) 100%);
    background: -o-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.12) 21%, rgba(0, 0, 0, 0.03) 31%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.03) 70%, rgba(0, 0, 0, 0.12) 81%, rgba(0, 0, 0, 0.5) 100%);
    background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.12) 21%, rgba(0, 0, 0, 0.03) 31%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.03) 70%, rgba(0, 0, 0, 0.12) 81%, rgba(0, 0, 0, 0.5) 100%);
    background: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.12) 21%, rgba(0, 0, 0, 0.03) 31%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.03) 70%, rgba(0, 0, 0, 0.12) 81%, rgba(0, 0, 0, 0.5) 100%);
}
.bi--theme-2 #bi--room-walls .wall {background-color:#bc086b}
.bi--theme-3 #bi--room-walls .wall {background-color:#36b3c5}
.bi--theme-4 #bi--room-walls .wall {background-color:#198ef2}
.bi--theme-5 #bi--room-walls .wall {background-color:#bc086b}
#bi--title {display:block;width:448px;height:120px;position:absolute;top:0;left:50px;padding:10px;background:url(../img/widget-title-background.svg) no-repeat 50% 0;text-align:center;color:#2b292a;z-index:10;}
#bi--title strong {font:400 36px/44px 'Bree Serif',serif;text-transform:uppercase;letter-spacing:1px;color:#0098ff}
#bi--title strong+strong {color:#bc086b}
#bi--title strong+strong+strong {color:#12c617}
#bi--title span {display:block;font:400 24px/32px 'Open Sans'}

/* begin -------------- navigation styles */
#bi--nav-trigger {display:none;position:fixed;bottom:10px;right:10px;width:70px;height:70px;background:url(../img/button-nav.svg) no-repeat 50% 50%;background-size:contain;z-index:15}
#bi--nav {position:absolute;bottom:0;left:0;width:100%;padding:18px;text-align:center;font:400 28px/36px 'Bree Serif',serif;text-transform:uppercase;letter-spacing:2px;color:#fff;text-shadow:-1px 2px 0 rgba(0,0,0,.25);z-index:10;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%);
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%);
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#80000000',GradientType=0 );
}
#bi--nav ul {display:table;table-layout:fixed;width:100%;margin:0 auto;padding:0;list-style:none}
#bi--nav li {display:table-cell;vertical-align:top}
#bi--nav a {display:block;padding:15px 0 25px;border-radius:25px;color:#fff;text-decoration:none !important;transition:all .25s linear}
#bi--nav .item-content {display:block;transform:scale(1.15)}
#bi--nav .title {display:block;position:relative}
#bi--nav .bi--icon {display:block;width:100px;height:60px;margin:15px auto 10px;background-position:50% 50%;background-repeat:no-repeat;background-size:contain;filter:drop-shadow(-1px 4px 5px rgba(0,0,0,.25));-webkit-filter:drop-shadow(-1px 4px 5px rgba(0,0,0,.25));transition:all .25s linear}
#bi--nav .video a {color:#e62117}
#bi--nav .video .bi--icon {background-image:url(../img/icon-nav-video-3d.webp)}
#bi--nav .audio a {color:#0098ff}
#bi--nav .audio .bi--icon {background-image:url(../img/icon-nav-music-3d.webp)}
#bi--nav .paint a {color:#12c617}
#bi--nav .paint .bi--icon {background-image:url(../img/icon-nav-paint-3d.webp)}
#bi--nav .game a {color:#fb6000}
#bi--nav .game .bi--icon {background-image:url(../img/icon-nav-play-3d.webp)}
#bi--nav .explore a {color:#ffba1b}
#bi--nav .explore .bi--icon {background-image:url(../img/icon-nav-explore-3d.webp)}
#bi--nav .active a {background:rgba(0,0,0,.5)}
#bi--nav a:hover {background:rgba(0,0,0,.25)}
#bi--nav a:hover .bi--icon {animation-name:tada}
/* end -------------- navigation styles */

/* begin -------------- profile styles */
#bi---profile {position:absolute;top:0;right:0;padding:20px 15px;text-align:center;font:400 28px/32px 'Bree Serif',serif;color:#fff;z-index:10;}
#bi---profile .profile-pic {display:block;float:left;width:90px;height:90px;border-radius:50%;margin:-5px 0 0;background:#fff;border:5px solid #fff;overflow:hidden;box-shadow:inset 0 -10px 15px rgba(0,0,0,.15),0 -2px 0 rgba(0,0,0,.25);position:relative;z-index:25}
#bi---profile .profile-pic:before {content:" ";display:block;width:70px;height:70px;position:absolute;bottom:5px;left:10px;margin:0 0 -5px -5px;background-repeat:no-repeat;background-size:contain}
#bi---profile.boy .profile-pic:before {background-image:url(../img/boy-default.svg)}
#bi---profile.girl .profile-pic:before {background-image:url(../img/girl-default.svg)}
.bi--theme-2 #bi---profile.boy .profile-pic:before {background-image:url(../img/boy-2.svg)}
.bi--theme-3 #bi---profile.boy .profile-pic:before {background-image:url(../img/boy-3.svg)}
.bi--theme-4 #bi---profile.boy .profile-pic:before {background-image:url(../img/boy-4.svg)}
.bi--theme-5 #bi---profile.boy .profile-pic:before {background-image:url(../img/boy-5.svg)}
.bi--theme-2 #bi---profile.girl .profile-pic:before {background-image:url(../img/girl-2.svg)}
.bi--theme-3 #bi---profile.girl .profile-pic:before {background-image:url(../img/girl-3.svg)}
.bi--theme-4 #bi---profile.girl .profile-pic:before {background-image:url(../img/girl-4.svg)}
.bi--theme-5 #bi---profile.girl .profile-pic:before {background-image:url(../img/girl-5.svg)}
#bi---profile .profile-close {position:absolute;top:40px;right:10px;width:50px;height:50px;border-radius:50%;background:#e62117;font-size:24px;line-height:50px;text-align:center;color:#fff !important;text-decoration:none !important;box-shadow:-1px 2px 0 rgba(0,0,0,.25);text-shadow:-1px 2px 0 rgba(0,0,0,.25);z-index:30}
#bi---profile .profile-info {float:left;margin:0 0 0 -50px;padding-left:55px;border-radius:23px;box-shadow:-1px 3px 5px rgba(0,0,0,.25);overflow:hidden;position:relative;z-index:20;animation-duration:1.5s}
#bi---profile.boy .profile-info {background:#0098ff;
    background: -moz-linear-gradient(-45deg,  rgba(0,152,255,1) 0%, rgba(36,100,135,1) 100%);
    background: -webkit-linear-gradient(-45deg,  rgba(0,152,255,1) 0%,rgba(36,100,135,1) 100%);
    background: linear-gradient(135deg,  rgba(0,152,255,1) 0%,rgba(36,100,135,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0098ff', endColorstr='#246487',GradientType=1 );
}
#bi---profile.girl .profile-info {background:#da2d4c;
    background: -moz-linear-gradient(-45deg,  rgba(255,89,89,1) 0%, rgba(138,22,226,1) 100%);
    background: -webkit-linear-gradient(-45deg,  rgba(255,89,89,1) 0%,rgba(138,22,226,1) 100%);
    background: linear-gradient(135deg,  rgba(255,89,89,1) 0%,rgba(138,22,226,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5959', endColorstr='#8a16e2',GradientType=1 );
}
#bi---profile .profile-name {margin:4px 0;padding:0 20px 0 10px;font-size:24px;line-height:28px;letter-spacing:1px}
#bi---profile .profile-menu {list-style:none;width:100%;margin:0;padding:2px;font:400 18px/22px 'Open Sans'}
#bi---profile .profile-menu li {margin:0 5px 5px 0;padding:5px 13px 8px 10px;font-size:20px;line-height:22px}
#bi---profile .profile-menu li a {display:block;padding:8px 15px 10px;background:rgba(0,0,0,.15);border-radius:20px}
#bi---profile .profile-menu li a:hover {background:rgba(0,0,0,.25)}
#bi---profile .profile-stats {list-style:none;width:100%;margin:0;padding:1px;font-size:0;line-height:0;text-align:right}
#bi---profile .profile-stats li {display:inline-block;margin:0 5px 5px;padding:5px 15px 8px;font-size:20px;line-height:22px;background:rgba(0,0,0,.15);border-radius:20px}
#bi---profile .profile-stats li .count {display:block}
#bi---profile .profile-stats li .count:before {content:" ";display:block;float:left;width:24px;height:24px;margin:-1px 5px -1px 0;background-repeat:no-repeat;background-size:contain}
#bi---profile .profile-stats li.stars span:before {background-image:url(../img/icon-star.svg)}
#bi---profile .profile-stats li.awards span:before {background-image:url(../img/icon-award.svg)}
/* end -------------- profile styles */

/* begin -------------- animate.css */
.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}
@keyframes tada {
    from {
        transform: scale3d(1, 1, 1);
    }

    10%, 20% {
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    }

    30%, 50%, 70%, 90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }

    40%, 60%, 80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}

.tada {
    animation-name: tada;
}
/* end -------------- animate.css */

/* responsive styles begin */
@media (max-width: 1319px) {
    #bi--room-walls {perspective:340px;padding:0 15%}
    #bi--room-walls .wall.front {width:calc(70% + 2px)}
    #bi--room-walls .wall.left {width:calc(15% + 2px)}
    #bi--room-walls .wall.right {width:calc(15% + 2px)}
    #bi---profile .profile-name {padding-right:0;font-size:0;line-height:0}
    #bi---profile .profile-name span {width:100%;font-size:24px;line-height:28px;text-align:center}
    #bi---profile .profile-stats li {margin:0 10px 5px 5px}
    #bi---profile .profile-stats li.awards {display:none}
    #bi--nav {padding-bottom:10px;font-size:24px}
    #bi--nav ul {padding:0}
    #bi--title {left:0}
}
@media (max-width: 959px) {
    #bi--promo {margin-bottom:1rem}
    #bi--title {left:30px}
}
@media (max-width: 767px) {
    #bi--promo {width:auto;margin-right:-15px;margin-left:-15px}
    #bi--room-walls {perspective:240px}
    #bi--title {left:13px}
    #bi--title span {font-size:22px}
    #bi--nav {padding:10px}
    #bi--nav .item-content {transform:none}
    #bi--nav ul {table-layout:auto}
    #bi--nav a {padding:15px 0}
    #bi--nav .audio a {padding-left:15px}
}
@media (max-width: 720px) {
    #bi---profile .profile-info {display: none}
}
@media (max-width: 600px) {
    #bi---profile {display: none}
    #bi--title {left:50%;transform:translateX(-50%)}
}
@media (max-width: 519px) {
    #bi--room-walls {perspective:50vw}
    #bi--room-walls .wall.left {width:calc(15% + 2px)}
    #bi--room-walls .wall.right {width:calc(15% + 2px)}
    #bi--nav a {background:none !important}
    #bi--nav a:hover .bi--icon {animation:none}
}
@media (min-width: 471px) and (max-width: 600px) {
    #bi--promo #bi--nav {
        overflow-x: auto;
        padding: 20px !important;
    }
    #bi--promo #bi--nav a {
        padding: 0 15px;
    }
}
@media (max-width: 470px) {
    #bi--promo {height:auto;padding-bottom:135%}
    #bi--room-walls {height:40%}
    #bi--room-floor {height:70%;perspective:200px}
    #bi--title {width:100%;height:0;padding-bottom:26.8%;background-size:contain}
    #bi--title strong {font-size:32px;line-height:40px}
    #bi--title span {font-size:20px;line-height:28px}
    #bi--nav ul {display:flex;flex-wrap:wrap;justify-content:center;padding:0 15px}
    #bi--nav li {display:block;width:50%}
    #bi--nav li.explore {margin-top:-20px}
    #bi--nav a {padding:0 0 1rem}
    #bi--nav .audio a {padding-left:0}
}
@media (max-width: 420px) {
    #bi--nav .bi--icon {width:80px;height:48px;margin:0 auto 5px;background-size:contain}
}
@media (max-width: 400px) {
    #bi--title strong {font-size:28px;line-height:32px}
}
@media (max-width: 359px) {
    #bi--room-walls {height:35%;}
    #bi--room-floor {height:75%;}
    #bi--title strong {font-size:24px;line-height:26px}
    #bi--title span {font-size:16px;line-height:24px}
    #bi--nav {padding:0;font-size:22px !important;}
}
/* responsive styles end */