@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700');
@import url('../font/fontello/css/fontello.css');

:root {
	--site-color: #F459BC;

	--color: 51, 153, 255;
}



/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: rgba(46, 59, 140, 0.86);
}






.navbar.fix {
	box-shadow: 0 3px 9px rgba(0,0,0,0.16);
}


.navbar .logo {
	padding: 20px;
}

.navbar ul {

	display: flex;
	list-style: none;
	border-right: 0px solid rgba(221,219,219,0.56);
}

.navbar ul li {

	border-left: 1px solid rgba(221,219,219,0.56);
	font-size: 13px;
	color: #6D6C6C;

	text-align: center;
	white-space: nowrap;
	display: flex;
	flex-direction: column;
	transition: all 0.3s;
	cursor: pointer;
}
.navbar222.fix {
    box-shadow: 0 3px 9px rgba(0,0,0,0.16);
}
.navbar222 ul {

    display: flex;
    list-style: none;
    border-right: 0px solid rgba(221,219,219,0.56);
}
.navbar222 ul li {

    border-left: 1px solid rgba(221,219,219,0.56);
    font-size: 13px;
    color: #6D6C6C;

    text-align: center;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    transition: all 0.3s;
    cursor: pointer;
}

.navbar222 ul li:hover  {
    background-color: rgb(var(--color));

    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.navbar222 ul li:hover .font{


    color: #ffffff;

}

.navbar ul li .icon {
	margin-bottom: 4px;
	height: 0;
	transition: all 0.2s;
	display: flex;
	justify-content: center;
	align-items: center;
}

.navbar222 ul li:hover .li{
    -webkit-animation: rotation 2s infinite linear;
    color:white ;
}

.navbar222 ul li .img {
    -webkit-animation: rotation 2s infinite linear;
}
@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(359deg);
    }
}
.navbar222 ul li:hover img {

}



.navbar ul li .mega-menu {
	background-color: #fff;
	box-shadow: inset 0 1px rgba(0,0,0,0.1), inset 0 3px rgba(0,0,0,0.05);
	width: 100%;
	position: absolute;
	left: 0;
	top: 100%;
	text-align: left;
	padding: 10px 0;

	visibility: hidden;
	opacity: 0;

	transition: all 0.2s ease-out;
}

.navbar ul li:hover .mega-menu {

	visibility: visible;
	opacity: 1;
	text-shadow: none;
}

.navbar ul li .mega-menu ul {
	height: auto;
	border: 0;
	flex-direction: column;
}

.navbar ul li .mega-menu ul li {
	font-weight: 400;
	padding: 7px 0;
	text-align: left;
	display: block;
	border: 0;
}

.navbar ul li .mega-menu ul li:hover {
	background-color: inherit;
	color: rgb(var(--color));
	text-shadow: none;
}

.navbar ul h3 {
	font-size: 12px;
	color: #3D3D44;
	text-transform: uppercase;
}

.navbar ul h4 {
	font-size: 14px;
	color: #3D3D44;
}

.navbar ul li .mega-menu .mt {
	margin-top: 30px;
}

.navbar ul li .mega-menu li.d-flex {
	flex-direction: row;
	justify-content: flex-start;
}

.navbar ul li .mega-menu li .side-icon {
	font-size: 24px;
	margin-right: 20px;
	color: rgb(var(--color));
	margin-top: -24px;
}

.navbar .player {
	display: flex;
	justify-content: space-between;
	align-items: center;

	height: 84px;
	padding: 0 38px;
}

.navbar .player .avatar {
	background-color: #ECECEC;
	width: 48px;
	height: 48px;
	border-radius: 5px;
}

.navbar .player .content {
	width: 140px;
	margin: 0 16px;
}

.navbar .player .content .title {
	margin-top: 7px;
	margin-bottom: 2px;
	font-size: 12px;
	font-weight: 700;
	color: #858585;
}

.navbar .player .play {
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0 1px 7px rgba(0,0,0,0.1);
	font-size: 16px;
	font-weight: 700;
	color: #BBBDC4;
	width: 36px;
	height: 36px;
	line-height: 36px;
	margin-left: 10px;
	text-align: center;
	cursor: pointer;

	transition: all 0.15s;
}

.navbar .player .play:hover {
	background-color: rgb(var(--color));
	color: #fff;
}

.navbar .user-div {
	border-left: 1px solid rgba(221,219,219,0.56);
	border-right: 1px solid rgba(221,219,219,0.56);
	height: 84px;
	padding: 0 38px;

	display: flex;
	align-items: center;
}

.navbar .btn-act {
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0 1px 7px rgba(0,0,0,0.1);
	font-size: 12px;
	font-weight: 700;
	color: #BBBDC4;
	line-height: 45px;
	height: 45px;
	padding: 0 20px;
	margin-left: 0;
	position: relative;

	display: flex;
}

.navbar .btn-act.notification {
	padding: 0 12px;
}

.navbar .btn-act .icon-user {
	font-size: 16px;
	margin-right: -4px;
}

.navbar .btn-act:last-child {
	margin-left: 16px;
}

.navbar .btn-act .num {
	background-color: rgb(var(--color));
	box-shadow: 0 1px 4px rgb(var(--color));
	padding: 0 6px;
	line-height: 14px;
	height: 14px;
	font-size: 9px;
	color: #fff;
	border-radius: 7px;

	position: absolute;
	right: -4px;
	top: -4px;
}

.navbar .btn-act .icon-bell {
	font-size: 18px;
	font-size: 18px;
}

/* Over Nav */

.over-nav {
	background-color: #2C265D;
	position: relative;
	z-index: 98;
	box-shadow: 0 2px rgba(255,255,255,0.1);
	color: #fff;

	overflow: hidden;
}

.over-nav .container {
	height: 80px;
	display: flex;
	justify-content: space-between;
	align-items: center;

	position: relative;
}

.over-nav .divider {
	border-right: 1px solid rgba(255,255,255,0.05);
	padding: 0 28px;
	height: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.over-nav .divider:first-child {
	border-left: 1px solid rgba(255,255,255,0.05);
}

.over-nav .search label {
	border-radius: 50%;
	width: 44px;
	height: 44px;
	line-height: 44px;
	text-align: center;
	margin-top: 8px;
	cursor: pointer;
	font-size: 20px;

	transition: all 0.15s;
}

.over-nav .search label:hover {
	background-color: rgba(255,255,255,0.05);
}

.over-nav .search input {
	background-color: #423986;
	font-size: 12px;
	font-weight: 600;
	padding: 0;
	height: 44px;
	border: 0;
	width: 0;
	border-radius: 5px;
	color: #fff;
	position: absolute;
	right: 30px;
	top: 18px;

	transition: all 0.15s;
}

.over-nav .search input::placeholder {
	color: rgba(255,255,255,0.5);
	opacity: 1;
}

.over-nav .search input:-ms-input-placeholder {
	color: rgba(255,255,255,0.5);
}

.over-nav .search input::-ms-input-placeholder {
	color: rgba(255,255,255,0.5);
}

.over-nav .search input:focus {
	box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 0 0 30px #2C265D;
	width: calc(100% - 60px);
	padding: 0 16px;

	z-index: 2;
}

.over-nav .search button {
	background-color: transparent;
	color: #fff;
	font-size: 15px;
	border: 0;
	width: 54px;
	height: 44px;
	position: absolute;
	right: 30px;
	top: 18px;
	z-index: 3;

	opacity: 0;
	visibility: hidden;

	transition: all 0.15s;
}

.over-nav .search input:focus + label + button {
	opacity: 1;
	visibility: visible;
}


.over-nav .title {
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 2px;
}

.over-nav .desc {
	font-size: 11px;
	color: #7F75D5;
	font-weight: 600;
}

.over-nav .users {
	width: 45%;
	overflow: hidden;
	white-space: nowrap;

	display: flex;
	align-items: center;

	margin-right: -28px;
	position: relative;
}

.over-nav .users img {
	image-rendering: pixelated;
	margin-left: 2px;
	margin-top: -4px;
}

.over-nav .users :before {
	content: "";
	background-image: linear-gradient(to right, rgba(44,38,93,0), rgba(44,38,93,0.5) 80%, rgba(44,38,93,1));
	width: 50px;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	pointer-events: none;
}

.over-nav .users div {
	display: inline-block;
	background-color: #423986;
	border-radius: 5px;
	width: 34px;
	min-width: 34px;
	height: 34px;
	margin-left: 14px;
}

.over-nav .colors {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.over-nav .colors div {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	margin-left: 12px;

	transition: all 0.2s;
	cursor: pointer;
}

.over-nav .colors div.active {
	box-shadow: inset 0 0 0 2px #2C265D, 0 0 0 2px #fff, 0 3px 2px 2px rgba(0,0,0,0.3)
}

.over-nav .icon.search {
	padding-left: 10px;
	font-size: 22px;
}


#fixed-menu {
	display: none;
}
#fixed-menu2 {
    display: none;
}
#fixed-menu3 {
    display: none;
}
#fixed-menu4 {
    display: none;
}
#fixed-menu5 {
    display: none;
}
#fixed-menu6 {
    display: none;
}
#fixed-menu7 {
    display: none;
}
#fixed-menu8 {
    display: none;
}
#fixed-menu9 {
    display: none;
}
#fixed-menu10 {
    display: none;
}
#fixed-menu11 {
    display: none;
}
.fixed-menu {
	background-color: #CECECE;
	box-shadow: 0 0 0 3px #fff, inset 0 0 0 1px rgba(0,0,0,0.1);
	width: 57px;
	height: 28px;
	border-radius: 3px;
	margin-left: 24px;
	margin-bottom: 0;
	margin-top: 6px;
	position: relative;
	cursor: pointer;

	transition: all 0.15s;
}

header span.animated {
    animation-duration: 2.5s;
    animation-iteration-count: infinite;
}


.fixed-menu:before {
	content: '\e807';
	font-family: "fontello";
	color: #666;
	text-align: center;
	font-size: 10px;
	background-color: #ddd;
	border: 1px solid #999;
	box-shadow: inset 0 1px #fff, 0 2px #aaa;
	border-radius: 5px;
	width: 27px;
	height: 27px;
	line-height: 25px;
	position: absolute;
	left: 0;
	top: -1px;
	z-index: 2;

    transition: all 1.35s;
}

.fixed-menu:after {
	content: "ON OFF";
	width: 57px;
	color: #717070;
	font-size: 10px;
	font-weight: 700;
	padding-left: 7px;
	padding-right: 5px;
	line-height: 27px;
	text-align-last: justify;
	position: absolute;
}

#fixed-menu:checked + .fixed-menu:before {
	left: calc(100% - 27px);
	background-color: rgb(var(--color));
	border: 1px solid rgba(0,0,0,0.25);
	box-shadow: inset 0 1px rgba(255,255,255,0.5),0 2px rgba(0,0,0,0.2), 0 2px rgb(var(--color));

	color: #fff;
	text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.fixed-menu2 {
     background-color: #CECECE;
     box-shadow: 0 0 0 3px #fff, inset 0 0 0 1px rgba(0,0,0,0.1);
     width: 57px;
     height: 28px;
     border-radius: 3px;
     margin-left: 24px;
     margin-bottom: 0;
     margin-top: 6px;
     position: relative;
     cursor: pointer;

     transition: all 0.15s;
 }

.fixed-menu2:before {
    content: '\e807';
    font-family: "fontello";
    color: #666;
    text-align: center;
    font-size: 10px;
    background-color: #ddd;
    border: 1px solid #999;
    box-shadow: inset 0 1px #fff, 0 2px #aaa;
    border-radius: 5px;
    width: 27px;
    height: 27px;
    line-height: 25px;
    position: absolute;
    left: 0;
    top: -1px;
    z-index: 2;

    transition: all 1.35s;
}

.fixed-menu2:after {
    content: "ON OFF";
    width: 57px;
    color: #717070;
    font-size: 10px;
    font-weight: 700;
    padding-left: 7px;
    padding-right: 5px;
    line-height: 27px;
    text-align-last: justify;
    position: absolute;
}

#fixed-menu2:checked + .fixed-menu2:before {
    left: calc(100% - 27px);
    background-color: rgb(var(--color));
    border: 1px solid rgba(0,0,0,0.25);
    box-shadow: inset 0 1px rgba(255,255,255,0.5),0 2px rgba(0,0,0,0.2), 0 2px rgb(var(--color));

    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.fixed-menu3 {
    background-color: #CECECE;
    box-shadow: 0 0 0 3px #fff, inset 0 0 0 1px rgba(0,0,0,0.1);
    width: 57px;
    height: 28px;
    border-radius: 3px;
    margin-left: 24px;
    margin-bottom: 0;
    margin-top: 6px;
    position: relative;
    cursor: pointer;

    transition: all 0.15s;
}

.fixed-menu3:before {
    content: '\e807';
    font-family: "fontello";
    color: #666;
    text-align: center;
    font-size: 10px;
    background-color: #ddd;
    border: 1px solid #999;
    box-shadow: inset 0 1px #fff, 0 2px #aaa;
    border-radius: 5px;
    width: 27px;
    height: 27px;
    line-height: 25px;
    position: absolute;
    left: 0;
    top: -1px;
    z-index: 2;

    transition: all 1.35s;
}

.fixed-menu3:after {
    content: "ON OFF";
    width: 57px;
    color: #717070;
    font-size: 10px;
    font-weight: 700;
    padding-left: 7px;
    padding-right: 5px;
    line-height: 27px;
    text-align-last: justify;
    position: absolute;
}

#fixed-menu3:checked + .fixed-menu3:before {
    left: calc(100% - 27px);
    background-color: rgb(var(--color));
    border: 1px solid rgba(0,0,0,0.25);
    box-shadow: inset 0 1px rgba(255,255,255,0.5),0 2px rgba(0,0,0,0.2), 0 2px rgb(var(--color));

    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.fixed-menu4 {
    background-color: #CECECE;
    box-shadow: 0 0 0 3px #fff, inset 0 0 0 1px rgba(0,0,0,0.1);
    width: 57px;
    height: 28px;
    border-radius: 3px;
    margin-left: 24px;
    margin-bottom: 0;
    margin-top: 6px;
    position: relative;
    cursor: pointer;

    transition: all 0.15s;
}

.fixed-menu4:before {
    content: '\e807';
    font-family: "fontello";
    color: #666;
    text-align: center;
    font-size: 10px;
    background-color: #ddd;
    border: 1px solid #999;
    box-shadow: inset 0 1px #fff, 0 2px #aaa;
    border-radius: 5px;
    width: 27px;
    height: 27px;
    line-height: 25px;
    position: absolute;
    left: 0;
    top: -1px;
    z-index: 2;

    transition: all 1.35s;
}

.fixed-menu4:after {
    content: "ON OFF";
    width: 57px;
    color: #717070;
    font-size: 10px;
    font-weight: 700;
    padding-left: 7px;
    padding-right: 5px;
    line-height: 27px;
    text-align-last: justify;
    position: absolute;
}

#fixed-menu4:checked + .fixed-menu4:before {
    left: calc(100% - 27px);
    background-color: rgb(var(--color));
    border: 1px solid rgba(0,0,0,0.25);
    box-shadow: inset 0 1px rgba(255,255,255,0.5),0 2px rgba(0,0,0,0.2), 0 2px rgb(var(--color));

    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.fixed-menu5 {
    background-color: #CECECE;
    box-shadow: 0 0 0 3px #fff, inset 0 0 0 1px rgba(0,0,0,0.1);
    width: 57px;
    height: 28px;
    border-radius: 3px;
    margin-left: 24px;
    margin-bottom: 0;
    margin-top: 6px;
    position: relative;
    cursor: pointer;

    transition: all 0.15s;
}

.fixed-menu5:before {
    content: '\e807';
    font-family: "fontello";
    color: #666;
    text-align: center;
    font-size: 10px;
    background-color: #ddd;
    border: 1px solid #999;
    box-shadow: inset 0 1px #fff, 0 2px #aaa;
    border-radius: 5px;
    width: 27px;
    height: 27px;
    line-height: 25px;
    position: absolute;
    left: 0;
    top: -1px;
    z-index: 2;

    transition: all 1.35s;
}

.fixed-menu5:after {
    content: "ON OFF";
    width: 57px;
    color: #717070;
    font-size: 10px;
    font-weight: 700;
    padding-left: 7px;
    padding-right: 5px;
    line-height: 27px;
    text-align-last: justify;
    position: absolute;
}

#fixed-menu5:checked + .fixed-menu5:before {
    left: calc(100% - 27px);
    background-color: rgb(var(--color));
    border: 1px solid rgba(0,0,0,0.25);
    box-shadow: inset 0 1px rgba(255,255,255,0.5),0 2px rgba(0,0,0,0.2), 0 2px rgb(var(--color));

    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.fixed-menu6 {
    background-color: #CECECE;
    box-shadow: 0 0 0 3px #fff, inset 0 0 0 1px rgba(0,0,0,0.1);
    width: 57px;
    height: 28px;
    border-radius: 3px;
    margin-left: 24px;
    margin-bottom: 0;
    margin-top: 6px;
    position: relative;
    cursor: pointer;

    transition: all 0.15s;
}

.fixed-menu6:before {
    content: '\e807';
    font-family: "fontello";
    color: #666;
    text-align: center;
    font-size: 10px;
    background-color: #ddd;
    border: 1px solid #999;
    box-shadow: inset 0 1px #fff, 0 2px #aaa;
    border-radius: 5px;
    width: 27px;
    height: 27px;
    line-height: 25px;
    position: absolute;
    left: 0;
    top: -1px;
    z-index: 2;

    transition: all 1.35s;
}

.fixed-menu6:after {
    content: "ON OFF";
    width: 57px;
    color: #717070;
    font-size: 10px;
    font-weight: 700;
    padding-left: 7px;
    padding-right: 5px;
    line-height: 27px;
    text-align-last: justify;
    position: absolute;
}

#fixed-menu6:checked + .fixed-menu6:before {
    left: calc(100% - 27px);
    background-color: rgb(var(--color));
    border: 1px solid rgba(0,0,0,0.25);
    box-shadow: inset 0 1px rgba(255,255,255,0.5),0 2px rgba(0,0,0,0.2), 0 2px rgb(var(--color));

    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.fixed-menu7 {
    background-color: #CECECE;
    box-shadow: 0 0 0 3px #fff, inset 0 0 0 1px rgba(0,0,0,0.1);
    width: 57px;
    height: 28px;
    border-radius: 3px;
    margin-left: 24px;
    margin-bottom: 0;
    margin-top: 6px;
    position: relative;
    cursor: pointer;

    transition: all 0.15s;
}

.fixed-menu7:before {
    content: '\e807';
    font-family: "fontello";
    color: #666;
    text-align: center;
    font-size: 10px;
    background-color: #ddd;
    border: 1px solid #999;
    box-shadow: inset 0 1px #fff, 0 2px #aaa;
    border-radius: 5px;
    width: 27px;
    height: 27px;
    line-height: 25px;
    position: absolute;
    left: 0;
    top: -1px;
    z-index: 2;

    transition: all 1.35s;
}

.fixed-menu7:after {
    content: "ON OFF";
    width: 57px;
    color: #717070;
    font-size: 10px;
    font-weight: 700;
    padding-left: 7px;
    padding-right: 5px;
    line-height: 27px;
    text-align-last: justify;
    position: absolute;
}

#fixed-menu7:checked + .fixed-menu7:before {
    left: calc(100% - 27px);
    background-color: rgb(var(--color));
    border: 1px solid rgba(0,0,0,0.25);
    box-shadow: inset 0 1px rgba(255,255,255,0.5),0 2px rgba(0,0,0,0.2), 0 2px rgb(var(--color));

    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.fixed-menu8 {
    background-color: #CECECE;
    box-shadow: 0 0 0 3px #fff, inset 0 0 0 1px rgba(0,0,0,0.1);
    width: 57px;
    height: 28px;
    border-radius: 3px;
    margin-left: 24px;
    margin-bottom: 0;
    margin-top: 6px;
    position: relative;
    cursor: pointer;

    transition: all 0.15s;
}

.fixed-menu8:before {
    content: '\e807';
    font-family: "fontello";
    color: #666;
    text-align: center;
    font-size: 10px;
    background-color: #ddd;
    border: 1px solid #999;
    box-shadow: inset 0 1px #fff, 0 2px #aaa;
    border-radius: 5px;
    width: 27px;
    height: 27px;
    line-height: 25px;
    position: absolute;
    left: 0;
    top: -1px;
    z-index: 2;

    transition: all 1.35s;
}

.fixed-menu8:after {
    content: "ON OFF";
    width: 57px;
    color: #717070;
    font-size: 10px;
    font-weight: 700;
    padding-left: 7px;
    padding-right: 5px;
    line-height: 27px;
    text-align-last: justify;
    position: absolute;
}
#navbar314 {
    position: relative;
    z-index: 100;
}
#fixed-menu8:checked + .fixed-menu8:before {
    left: calc(100% - 27px);
    background-color: rgb(var(--color));
    border: 1px solid rgba(0,0,0,0.25);
    box-shadow: inset 0 1px rgba(255,255,255,0.5),0 2px rgba(0,0,0,0.2), 0 2px rgb(var(--color));

    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.fixed-menu9 {
    background-color: #CECECE;
    box-shadow: 0 0 0 3px #fff, inset 0 0 0 1px rgba(0,0,0,0.1);
    width: 57px;
    height: 28px;
    border-radius: 3px;
    margin-left: 24px;
    margin-bottom: 0;
    margin-top: 6px;
    position: relative;
    cursor: pointer;

    transition: all 0.15s;
}

.fixed-menu9:before {
    content: '\e807';
    font-family: "fontello";
    color: #666;
    text-align: center;
    font-size: 10px;
    background-color: #ddd;
    border: 1px solid #999;
    box-shadow: inset 0 1px #fff, 0 2px #aaa;
    border-radius: 5px;
    width: 27px;
    height: 27px;
    line-height: 25px;
    position: absolute;
    left: 0;
    top: -1px;
    z-index: 2;

    transition: all 1.35s;
}

.fixed-menu9:after {
    content: "ON OFF";
    width: 57px;
    color: #717070;
    font-size: 10px;
    font-weight: 700;
    padding-left: 7px;
    padding-right: 5px;
    line-height: 27px;
    text-align-last: justify;
    position: absolute;
}

#fixed-menu9:checked + .fixed-menu9:before {
    left: calc(100% - 27px);
    background-color: rgb(var(--color));
    border: 1px solid rgba(0,0,0,0.25);
    box-shadow: inset 0 1px rgba(255,255,255,0.5),0 2px rgba(0,0,0,0.2), 0 2px rgb(var(--color));

    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.fixed-menu10 {
    background-color: #CECECE;
    box-shadow: 0 0 0 3px #fff, inset 0 0 0 1px rgba(0,0,0,0.1);
    width: 57px;
    height: 28px;
    border-radius: 3px;
    margin-left: 24px;
    margin-bottom: 0;
    margin-top: 6px;
    position: relative;
    cursor: pointer;

    transition: all 0.15s;
}

.fixed-menu10:before {
    content: '\e807';
    font-family: "fontello";
    color: #666;
    text-align: center;
    font-size: 10px;
    background-color: #ddd;
    border: 1px solid #999;
    box-shadow: inset 0 1px #fff, 0 2px #aaa;
    border-radius: 5px;
    width: 27px;
    height: 27px;
    line-height: 25px;
    position: absolute;
    left: 0;
    top: -1px;
    z-index: 2;

    transition: all 1.35s;
}

.fixed-menu10:after {
    content: "ON OFF";
    width: 57px;
    color: #717070;
    font-size: 10px;
    font-weight: 700;
    padding-left: 7px;
    padding-right: 5px;
    line-height: 27px;
    text-align-last: justify;
    position: absolute;
}

#fixed-menu10:checked + .fixed-menu10:before {
    left: calc(100% - 27px);
    background-color: rgb(var(--color));
    border: 1px solid rgba(0,0,0,0.25);
    box-shadow: inset 0 1px rgba(255,255,255,0.5),0 2px rgba(0,0,0,0.2), 0 2px rgb(var(--color));

    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.fixed-menu11 {
    background-color: #CECECE;
    box-shadow: 0 0 0 3px #fff, inset 0 0 0 1px rgba(0,0,0,0.1);
    width: 57px;
    height: 28px;
    border-radius: 3px;
    margin-left: 24px;
    margin-bottom: 0;
    margin-top: 6px;
    position: relative;
    cursor: pointer;

    transition: all 0.15s;
}

.fixed-menu11:before {
    content: '\e807';
    font-family: "fontello";
    color: #666;
    text-align: center;
    font-size: 10px;
    background-color: #ddd;
    border: 1px solid #999;
    box-shadow: inset 0 1px #fff, 0 2px #aaa;
    border-radius: 5px;
    width: 27px;
    height: 27px;
    line-height: 25px;
    position: absolute;
    left: 0;
    top: -1px;
    z-index: 2;

    transition: all 1.35s;
}

.fixed-menu11:after {
    content: "ON OFF";
    width: 57px;
    color: #717070;
    font-size: 10px;
    font-weight: 700;
    padding-left: 7px;
    padding-right: 5px;
    line-height: 27px;
    text-align-last: justify;
    position: absolute;
}

#fixed-menu11:checked + .fixed-menu11:before {
    left: calc(100% - 27px);
    background-color: rgb(var(--color));
    border: 1px solid rgba(0,0,0,0.25);
    box-shadow: inset 0 1px rgba(255,255,255,0.5),0 2px rgba(0,0,0,0.2), 0 2px rgb(var(--color));

    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
/* Carousel */

.hero {
	background-color: #2F2960;
	background-image: linear-gradient(to right, #60292f, #9e425c);
}

.hero .carousel-item .blocks {
	width: 46%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

.hero .carousel-item .blocks div {
	background-image: linear-gradient(to right, #003d85 15%, #1f318f);
	box-shadow: 0 0 40px rgba(0,0,0,0.27);
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

.hero .carousel-item .blocks div:nth-child(1) {
	opacity: 0.9;
}

.hero .carousel-item .blocks div:nth-child(2) {
	left: -40px;
	opacity: 0.9;
}

.hero .carousel-item .blocks div:nth-child(3) {
	left: -80px;
}

.hero .carousel-item .blocks div:nth-child(4) {
	left: -120px;
}

.hero .container {
	position: relative;
	height: 296px;
}

.hero .content {
	width: 35%;
	color: #fff;
	position: relative;


	transition: all 0.5s;
}

.hero .carousel-item.active .content {
	margin-left: 0;
	opacity: 1;
}

.hero .carousel-item-prev .content, .hero .carousel-item-next .content {
	margin-left: -100px;
	opacity: 0;
}

.hero .content .tag {
	background-color: rgb(var(--color));
	border-radius: 5px;
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 7px 14px;
	margin-top: 70px;
	margin-bottom: 26px;
}

.hero .content h2 {
	line-height: 1.4;
	font-size: 26px;
	font-weight: 600;
	margin-bottom: 14px;
}

.hero .content p {
	font-weight: 600;
	font-size: 13px;
	color: #8075CD;
	text-shadow: 0 2px 1px rgba(0,0,0,0.17)
}

.hero .room {
	width: 54%;
	height: 296px;
	overflow: hidden;
	text-align: center;

	position: absolute;
	right: 0;
	top: 0;
}

.hero .room img {
	image-rendering: pixelated;
	transition: all 0.5s;
	margin-top: -30px;
	position: relative;

}

.hero .carousel-item-prev .room img, .hero .carousel-item-next .room img {
	opacity: 0;
	margin-top: 200px;
}

.hero .carousel-item-left .room img, .hero .carousel-item-right .room img {
	margin-top: 50px;
	opacity: 0;
}


.hero .room .triangule {
	background-image: url(../image/triangules.png);
	position: absolute;


	transform: scale(1) rotate(0);
	transition: all 0.5s;

	filter: drop-shadow(0 0 10px rgba(0,0,0,0.1));
}

.hero .carousel-item-prev .room .triangule, .hero .carousel-item-next .room .triangule {
	transform: scale(0.5) rotate(45deg);
	opacity: 0;
}

.hero .carousel-item-left .room .triangule, .hero .carousel-item-right .room .triangule {
	opacity: 0;
}

.hero .room .triangule:nth-child(1) {
	width: 201px;
	height: 201px;
	left: 50%;
	top: 28%;
}

.hero .room .triangule:nth-child(2) {
	background-position: -202px -61px;
	width: 162px;
	height: 140px;
	left: calc(50% - 310px);
	top: 26%;
}

.hero .room .triangule:nth-child(3) {
	background-position: -152px -202px;
	width: 116px;
	height: 110px;
	left: calc(50% - 440px);
	top: 80%;
}

.hero .room .triangule:nth-child(4) {
	background-position: -152px -202px;
	width: 116px;
	height: 110px;
	left: calc(50% + 254px);
	top: -1%;
}

.hero .room .triangule:nth-child(5) {
	background-position: -77px -200px;
	width: 74px;
	height: 87px;
	left: calc(50% + 250px);
	top: 80%;
}


.hero .carousel-indicators {
	margin: 0;
	flex-direction: column;
	left: calc(46% - 17px);
	right: calc(54% - 17px);
	top: 0;
}

.hero .carousel-indicators li {
	background-color: #DDE0E4;
	box-shadow: 0 2px 1px rgba(0,0,0,0.17);
	border: 3px solid #fff;
	width: 28px;
	height: 28px;
	border-radius: 5px;
	background-clip: inherit;
	margin: 8px 0;
	opacity: 1;

	transition: all 0.2s;
}

.hero .carousel-indicators li:hover {
    background-color: #146de2;
    border: 3px solid #3a94ff;
}

.hero .carousel-indicators li.active {
	border-color: rgb(var(--color));
}

.ads .carousel-indicators li {
	background-color: #C2C5CA;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	opacity: 1;
}

.ads .carousel-indicators {
	bottom: -38px;
	margin: 0;
	left: auto;
	right: 0;
}

.ads .carousel-indicators li.active {
	background-color: rgb(var(--color));
}

.main {
	position: relative;
	padding-right: 332px;
}

.main .container {
	max-width: 968px;
}


section {
	padding: 30px 0;
}

section.grey {
	background-color: #E7E7E7;
	box-shadow: 800px 0 #E7E7E7;
	margin-top: 26px;
}

section.grey .controls {
	margin-top: -52px;
	margin-bottom: 30px;
}



.news-bar {
	background-color: #fff;
	box-shadow: 0 0 11px rgba(0,0,0,0.18);
	height: 89px;

	overflow: hidden;
}

.news-bar  .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.news-bar .hide {
	margin-right: 22px;
	font-size: 12px;
	font-weight: 600;
	color: rgb(var(--color));
	cursor: pointer;
}

.news-bar ul {
	height: 89px;
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	border-right: 1px solid rgba(221,219,219,0.4);
	margin-right: 1px;
}

.news-bar ul li {
	padding: 0 36px;
	border-left: 1px solid rgba(221,219,219,0.4);
	font-size: 13px;
	color: #6D6C6C;
	font-weight: 700;
	text-align: center;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	transition: all 0.3s;
	cursor: pointer;

	margin-right: -1px;
}

.news-bar ul li:hover {
	background-color: rgba(var(--color),0.15);
	color: rgb(var(--color));
	box-shadow: inset 0 -2px rgb(var(--color));
}

.news-bar ul li .icon {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(var(--color), 0.4);
	box-shadow: 0 2px 10px rgba(var(--color) ,0.34);
	width: 26px;
	height: 26px;
	margin-top: -26px;
	border-radius: 50%;

	transition: all 0.2s;
	overflow: hidden;
	transform: scale(0);
}

.news-bar ul li:hover .icon {
	height: 26px;
	transform: scale(1);
	margin-top: 0;
	margin-bottom: 8px;
}

.news-bar ul li:hover img {
	image-rendering: pixelated;
}


.radio {
	background-color: #231F4B;
	background-image: radial-gradient(circle, rgba(255,255,255,0.12), #231F4B 50%);
	background-size: 1200px 1200px;
	background-position: -600px 0;
	background-repeat: no-repeat;
	color: #6F6AA6;

	padding-bottom: 36px;
}

.radio .bar {
	background-color: #2D2859;
	box-shadow: 0 5px 19px 24px rgba(0,0,0,0.1);
	margin-bottom: 31px;
	min-height: 76px;

	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;

	font-weight: 600;
	font-size: 13px;
}

.radio .bar .icon-live {
	width: 47px;
	height: 47px;
	border-radius: 5px;
	border: 2px solid rgba(255,255,255,0.12);
	margin-right: 30px;

	display: flex;
	justify-content: center;
	align-items: flex-end;

	padding-bottom: 13px;
}

@keyframes soundbar {
    0% {
       opacity: .4;
        height: 3px;
    }
    100% {
        opacity: 1;
        height: 17px;
    }
}

.radio .bar .icon-live div {
	background-color: rgb(var(--color));
	border-radius: 2px;
	width: 3px;
	height: 17px;
	margin: 0 2px;

	animation: soundbar 0ms -800ms linear infinite alternate;
}

.radio .bar .icon-live div:nth-child(1)  { animation-duration: 474ms; }
.radio .bar .icon-live div:nth-child(2)  { animation-duration: 433ms; }
.radio .bar .icon-live div:nth-child(3)  { animation-duration: 407ms; }
.radio .bar .icon-live div:nth-child(4)  { animation-duration: 458ms; }

.slider-love {
	margin: 0 24px;
	min-width: 94px;
	background-color: #1D1A3D;
	height: 5px;
	border-radius: 3px;
}

.slider-love div {
	background-color: #433C7E;
	width: 33px;
	height: 33px;
	border-radius: 50%;
	color: #fff;

	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: -14px;
	margin-left: 13%;
}

.radio .bar .listeners {
	color: #fff;
	border-radius: 5px;
	border: 2px solid rgba(255,255,255,0.12);
	padding: 7px 20px;
}

.radio .bar .arrows {
	color: #fff;
	font-size: 20px;
}

.radio .bar .arrows span {
	display: inline-block;
	border-radius: 50%;
	width: 30px;
	height: 30px;
}

.radio .bar .arrows span:hover {
	background-color: rgba(var(--color),0.1);
	color: rgb(var(--color))
}

.radio .player {
	background-color: #524D86;
	height: 131px;
	border-radius: 5px;
}


.ads-banner {
	background-color: #DDE0E4;
	border-radius: 5px;
	height: 120px;
	position: relative;
}

.ads-banner:before {
	content: "Publicidade";
	font-size: 14px;
	font-weight: 600;
	color: #979DA5;

	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.ads-banner .caption {
	background-color: rgba(15,15,15,0.9);
	border-radius: 5px;
	position: absolute;
	right: 14px;
	bottom: 14px;
	font-size: 14px;
	color: #fff;
	padding: 16px 38px;
}

.ads-banner .caption strong {
	font-weight: 600;
}


/* Panel */

.panel {
	background-color: #fff;
	box-shadow: 0 1px 7px rgba(0,0,0,0.1);
	border-radius: 5px;
	margin-bottom: 30px;

	transition: all 0.15s;
}

.panel.news:hover,
.panel.topic:hover,
.panel.pixel:hover,
.shop-item .panel:hover,
.panel.quotation:hover,
.panel.coluna:hover,
.panel.cartoon:hover,
.free-things .panel:hover {
	transform: scale(1.05);
	box-shadow: 0 4px 14px rgba(0,0,0,0.16);
}

.panel.news .user {
	display: flex;
	justify-content: space-between;
	padding: 13px 18px;
	padding-bottom: 0;
}

.panel.news .user .avatar {
	background-color: #EDF0F1;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	overflow: hidden;
	text-align: center;
	margin-right: 12px;
}

.panel.news .user .avatar img {
	image-rendering: pixelated;
	margin-top: -4px;
}

.panel.news .user .name {
	color: #3D3D44;
	font-weight: 600;
	font-size: 12px;
}

.panel.news .user .tag {
	background-color: #E7A629;
	font-size: 7px;
	line-height: 15px;
	height: 14px;
	border-radius: 3px;
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	padding: 0 4px;
	margin-left: 4px;
}

.panel.news .user .tag.new {
	background-color: #FF4950;
}

.panel.news .thumb {
	background-color: #DDE0E4;
	height: 80px;
	border-radius: 5px;
	margin: 12px 10px;
	position: relative;
}

.panel.news .thumb .like {
	background-color: rgba(15,15,15,0.9);
	line-height: 28px;
	border-radius: 5px;
	padding: 0 10px;

	position: absolute;
	top: 10px;
	right: 10px;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
}

.panel.news .thumb .like .icon-heart-filled {
	color: #FF4950;
}

.panel.news .title {
	padding: 16px;
	font-size: 16px;
	font-weight: 600;
}

.panel.news .tags {
	padding: 0 16px;
	display: flex;
}

.panel.news .tags .tag {
	padding: 0 8px;
	line-height: 24px;
	border-radius: 5px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	margin-right: 8px;
}

.panel.news .title a {
	color: #3D3D44;
	display: block;
}

.panel.news .info {
	border-top: 1px solid rgba(221,219,219,0.56);
	padding: 12px 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 12px;
	color: #7C7A7A;
	font-weight: 600;
}




.panel.quotation {
	padding: 10px;

	display: flex;
}

.panel.quotation .mobi {
	background-color: rgba(111,161,226,0.3);
	width: 56px;
	height: 77px;
	border-radius: 5px;
	margin-right: 16px;

	display: flex;
	justify-content: center;
	align-items: center;
}

.panel.quotation .mobi img {
	image-rendering: pixelated;
}

.panel.quotation.up .mobi {
	background-color: rgba(154,199,63,0.3);
}

.panel.quotation.down .mobi {
	background-color: rgba(248,124,125,0.3);
}

.panel.quotation .info {
	width: calc(100% - 72px);
}

.panel.quotation .icon {
	background-color: #6FA1E2;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	margin-top: 8px;
	margin-bottom: 14px;
}

.panel.quotation.up .icon {
	border-radius: 0;
	background-color: transparent;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 5px 5px 5px;
	border-color: transparent transparent #9AC73F transparent;

	margin-top: 10px
}

.panel.quotation.down .icon {
	border-radius: 0;
	background-color: transparent;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 5px 0 5px;
	border-color: #F87C7D transparent transparent transparent;

	margin-top: 10px
}

.panel.quotation .name {
	font-size: 13px;
	color: #49494D;
	font-weight: 600;
	margin-bottom: 2px;
}

.panel.quotation .price {
	font-size: 12px;
	color: #BDBDBD;
	font-weight: 600;
}

.panel.alerta {
	background-image: url(../image/rules.png);
	background-repeat: no-repeat;
	background-position: calc(100% + 4px) -18px;
	image-rendering: pixelated;
	padding: 24px 28px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.panel.alerta h5 {
	color: #3D3D44;
	font-size: 14px;
	font-weight: 600;
}

.panel.alerta p {
	font-size: 12px;
	color: #BDBDBD;
	font-weight: 600;
	margin: 0;
}

.panel.alerta .txt {
	font-size: 13px;
	color: #ADACAD;
	font-weight: 600;
	margin-right: 30px;
}

.panel.alerta .btn {
	font-size: 13px;
}

.panel.topic .header {
	display: flex;
	align-items: center;
	height: 54px;
	padding: 0 14px;
}

.panel.topic .header .avatar {
	background-color: #F4F7F8;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	margin-right: 13px;
}

.panel.topic .header .name {
	color: #767676;
	font-size: 12px;
	font-weight: 600;
}

.panel.topic .header .tags {
	margin-left: auto;

	display: flex;
}

.panel.topic .header .tags .tag {
	background-color: #E7A629;
	color: #fff;
	line-height: 14px;
	font-weight: 700;
	font-size: 8px;
	padding: 0 5px;
	margin-left: 7px;
	border-radius: 3px;
	text-transform: uppercase;
}

.panel.topic .header .tags .tag.new {
	background-color: #FF4950;
}

.panel.topic .thumb {
	background-color: #F4F7F8;
	height: 63px;
	border-radius: 5px;
	margin: 0 7px
}

.panel.topic .title {
	height: 55px;
	padding: 0 13px;
	border-bottom: 1px solid rgba(221,219,219,0.59);
	font-weight: 600;

	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #49494D;
}

.panel.topic.fixed .title {
	padding-top: 16px;
	border-bottom: 0;
}

.panel.topic .title h4 {
	line-height: 1.4;
	font-size: 13px;
	margin-bottom: 0;
	margin-right: 40px;
}

.panel.topic .title .comments {
	color: #7C7A7A;
	font-size: 12px;
	white-space: nowrap;
}

.panel.topic .infos {
	height: 59px;
	padding: 0 13px;
	font-weight: 600;
	font-size: 12px;
	color: #767676;

	display: flex;
	justify-content: space-between;
	align-items: center;
}

.panel.topic.fixed .infos {
	height: 44px
}

.panel.topic .infos .avatar {
	background-color: #F4F7F8;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	margin-right: 13px;
}

.panel.topic .infos .time {
	font-size: 11px;
	color: #BDBDBD;
}

.panel.featured .header {
	border-bottom: 1px solid rgba(221,219,219,0.56);
	padding: 12px;

	display: flex;
	align-items: center;
}

.panel.featured .header .avatar {
	background-color: #F4F7F8;
	width: 53px;
	height: 53px;
	border-radius: 50%;
	position: relative;
	margin-right: 30px;
}

.panel.featured .header .avatar .habbo {
	background-color: #E5E6E8;
	border: 3px solid #fff;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	position: absolute;
	right: -16px;
	top: 9px;

	overflow: hidden;
}

.panel.featured .header .avatar .habbo img {
	margin-left: 1px;
	margin-top: -3px;
	image-rendering: pixelated;
}

.panel.featured .header .name {
	font-size: 13px;
	color: #3D3D44;
	font-weight: 600;
}

.panel.featured .header .txt {
	font-size: 12px;
	color: #4C8BFD;
	font-weight: 600;
}

.panel.featured .header .txt:before {
	content: "usuário destaque";
}

.panel.featured.member .header .txt:before {
	color: #E7A629;
	content: "membro destaque";
}

.panel.featured p {
	font-size: 12px;
	color: #ABAAAA;
	font-weight: 600;
	padding: 18px 24px;
	margin: 0;
}

.panel.featured .time {
	font-size: 12px;
	color: #ABAAAA;
	text-align: center;
	padding: 16px;
	border-top: 1px solid rgba(221,219,219,0.56);
	font-weight: 600;
}


.section-title {
	margin-bottom: 27px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.section-title h2 {
	font-size: 18px;
	font-weight: 600;
	color: #3D3D44;
	margin-bottom: 0;
}

.section-title .text {
	font-weight: 600;
	font-size: 13px;
	color: #6E6E6E;
	margin-left: 20px;
	display: inline-block;
}






section.shop {
	margin-top: 40px;
	background-color: #E77308;
	padding: 0;
	overflow: hidden;
}

section.shop .title {
	background-color: #333333;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 120px;
}

section.shop .title .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

section.shop .title h4 {
	font-size: 18px;
	margin: 0;
}

section.shop .menu {
	background-color: #2A2A2A;
	border-bottom: 3px solid #ED8D01;
	color: #fff;

	position: relative;
	z-index: 4;
}

section.shop .menu ul {
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

section.shop .menu ul li {
	height: 66px;
	padding: 0 28px;
	font-size: 12px;
	font-weight: 600;
	color: #5E5D5D;
	cursor: pointer;
	margin: 0 8px;
	transition: all 0.15s;
	position: relative;

	display: flex;
	align-items: center;
}

section.shop .menu ul li span {
	background-color: #FF4950;
	color: #fff;
	font-size: 8px;
	text-transform: uppercase;
	padding: 2px 5px;
	border-radius: 3px;
	font-weight: 700;

	position: absolute;
	top: 8px;
	right: 4px;
}

section.shop .menu ul li:hover {
	box-shadow: inset 0 4px rgba(231,115,8,0.3);
}

section.shop .menu ul li.active {
	background-color: #333333;
	box-shadow: inset 0 4px #E77308;
	color: #fff;
}

section.shop .the-shop {
	background-color: #E77308;
	box-shadow: inset 12px 0 #D16908, inset -12px 0 #D16908, 75px 0 #D16908, -75px 0 #D16908;
	padding-top: calc(44px + 94px);

	margin-top: -94px;
}

section.shop .toldo {
	background-image: url(../image/toldo.png);
	background-position: center;
	background-repeat: repeat-x;
	height: 94px;
	position: relative;
	z-index: 2;

	text-align: right;
}

section.shop .toldo .info {
	background-color: #fff;
	box-shadow: 0 1px 7px rgba(0,0,0,0.1);
	display: inline-block;
	font-size: 11px;
	padding: 8px 30px;
	border-radius: 16px;
	margin-top: 12px;
	color: #6E6E6E;
	font-weight: 600;
}

section.shop .toldo .info strong {
	font-weight: 700;
	color: #404041;
}

section.shop .the-shop .controls {
	position: relative;
	padding-left: 84px;
	padding-right: 84px;
	z-index: 2;
}

section.shop .btn-prev, section.shop .btn-next {
	margin: 0;
	position: absolute;
	top: calc(50% - 40px);
}

section.shop .btn-prev {
	left: -10px;
}

section.shop .btn-next {
	right: -10px;
}

.shop-item {
	position: relative;
}

.shop-item .panel {
	padding: 8px;
	margin-bottom: -17px;
	position: relative;
	z-index: 2;
}

.shop-item:after {
	content: "";
	background-color: rgba(0,0,0,0.35);
	width: calc(100% - 84px);
	height: 16px;
	border-radius: 50%;

	position: absolute;
	left: 42px;
	bottom: -8px;
	z-index: -4;
}

.shop-item .panel .thumb {
	background-color: #E5E6E8;
	height: 97px;
	border-radius: 5px;
}

.shop-item .panel .name {
	font-size: 12px;
	color: #767676;
	font-weight: 600;
	padding: 20px 8px;
	text-align: center;
}

.shop-item .panel .btn {
	margin: 0;
	display: block;
	border-radius: 5px;
}


section.shop .table-top {
	background-color: #333333;
	margin: 0 -75px;
	height: 40px;

	position: relative;
}


section.shop .table-top:before,
section.shop .table-top:after {
	content: "";
	border-radius: 0;
	background-color: transparent;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 40px 87px 0 0;
	border-color: #D16908 transparent transparent transparent;

	position: absolute;
	left: 0;
	bottom: 0;
}

section.shop .table-top:after {
	border-width: 0 87px 40px 0;
	border-color: transparent #D16908 transparent transparent;
	left: auto;
	right: 0;
}

section.shop .table-down {
	box-shadow: inset 0 3px #3E3E3E;
	background-color: #252525;
	height: 50px;
	margin: 0 -75px;
}


section.galery {
	background-image: url(../image/art.png), linear-gradient(to bottom, #F6D5D7, #EEEFF1);
	background-size: auto, 100% 588px;
	background-repeat: no-repeat, repeat-x;
	background-position: calc(100% + 15px) 101px, 0 0;
	min-height: 600px;
	padding-top: 80px;
	image-rendering: pixelated;
}

section.galery h2 {
	font-size: 37px;
	color: #3D3D44;
	margin-bottom: 33px;
}

section.galery p {
	color: #767676;
	font-size: 12px;
	font-weight: 600;
	margin-bottom: 50px;
}

section.galery .btn.disabled {
	background-color: #E2CECF;
	color: #A98486 !important;
}

section.galery .controls {
	margin-bottom: 70px;
}

.panel.pixel .thumb {
	background-color: #F4F7F8;
	border-radius: 5px 5px 0 0;
	height: 122px;
}

.panel.pixel .title {
	height: 71px;
	padding: 0 19px;
	border-bottom: 1px solid rgba(221,219,219,0.59);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.panel.pixel .title h4 {
	font-size: 13px;
	color: #49494D;
}

.panel.pixel .title .info {
	font-weight: 600;
	font-size: 11px;
	color: #BDBDBD;
}

.panel.pixel .title .rate {
	text-align: center;
	width: 31px;
	height: 31px;
	line-height: 31px;
	background-color: #E5E6E8;
	border-radius: 5px;
	font-size: 14px;
	color: #49494D;
	font-weight: 600;
}

.panel.pixel .infos {
	height: 59px;
	padding: 0 19px;
	font-weight: 600;
	font-size: 12px;
	color: #767676;

	display: flex;
	justify-content: space-between;
	align-items: center;
}

.panel.pixel .avatar {
	background-color: #F4F7F8;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	margin-right: 13px;
}


.panel.coluna .thumb {
	background-color: #F4F7F8;
	height: 75px;
	border-radius: 5px 5px 0 0;
	position: relative;
}

.panel.coluna .thumb .tag {
	background-color: rgba(0,0,0,0.9);
	border-radius: 5px;
	position: absolute;
	right: 12px;
	bottom: 12px;
	color: #fff;
	font-weight: 600;
	font-size: 12px;
	padding: 4px 10px;
}

.panel.coluna .infos {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 600;
	padding: 20px;
}

.panel.coluna .infos .name {
	font-size: 13px;
	color: #49494D;
}

.panel.coluna .infos .comments {
	font-size: 12px;
	color: #7C7A7A;
}



.sidebar {
	background-color: #F4F7F8;
	box-shadow: 0 0 18px rgba(0,0,0,0.15);
	border-bottom-left-radius: 5px;
	width: 332px;
	position: absolute;
	right: 0;
	top: 0;
}

.stories .header {
	background-color: #fff;
	box-shadow: 0 0 18px rgba(0,0,0,0.15);
	height: 89px;
	position: relative;
	z-index: 2;
	padding: 0 34px;

	display: flex;
	justify-content: space-between;
	align-items: center;
}

.stories .header .icon {
	background-color: rgba(133,201,235,0.2);
	width: 36px;
	height: 36px;
	line-height: 36px;
	text-align: center;
	color: #85C9EB;
	border-radius: 50%;
}

.stories .header .title {
	font-size: 18px;
	color: #3D3D44;
	font-weight: 600;
	margin-top: -2px;
}

.stories .header .desc {
	font-size: 12px;
	color: #BDBDBD;
	font-weight: 600;
	margin-top: -2px;
}

.stories .search {
	background-color: #88CDF0;
	padding: 24px 36px;
	padding-bottom: 43px;

	display: flex;
	justify-content: space-between;
}

.stories .search input {
	padding: 0 17px;
	padding-right: 44px;
	width: 100%;
	border: 0;
	background-color: #76ADC9;
	color: #fff;
	border-radius: 5px;
	height: 44px;
	font-size: 11px;
	font-weight: 600;
}

.stories .search ::placeholder {
	color: #C7ECFE;
	opacity: 1;
}

.stories .search :-ms-input-placeholder {
	color: #C7ECFE;
}

.stories .search ::-ms-input-placeholder {
	color: #C7ECFE;
}

.stories .search input + button {
	border: 0;
	background-color: transparent;
	min-width: 44px;
	min-height: 44px;
	margin-left: -44px;
	color: #fff;
	font-size: 14px;
}

.stories .search .settings {
	background-color: #fff;
	box-shadow: 0 1px 7px rgba(0,0,0,0.1);
	width: 44px;
	min-width: 44px;
	height: 44px;
	line-height: 44px;
	margin-left: 24px;
	border-radius: 5px;
	text-align: center;
	color: #88CDF0;
}

.stories .list {
	position: relative;
	padding: 16px;
	padding-bottom: 0;
	z-index: 3;
}

.stories .list ul {
	background-color: #fff;
	box-shadow: 0 1px 7px rgba(0,0,0,0.1);
	border-radius: 5px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.stories .list ul.primary {
	margin-top: -36px;
	margin-bottom: 22px;
}

.stories .list ul li {
	background-color: #fff;
	padding: 18px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;

	border-top: 1px solid rgba(221,219,219,0.56);

	transition: all 0.05s;
}

.stories .list ul li:first-child {
	border-top: 0;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

.stories .list ul li:last-child {
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

.stories .list ul li:hover {
	border-color: transparent;
	box-shadow: 0 1px 7px rgba(0,0,0,0.1);
	transform: scale(1.05);
	z-index: 4;
	border-radius: 5px;
	transition: all 0.15s;
}

.stories .list ul li .avatar {
	box-shadow: 0 0 0 2px #D4D7DB;
	border: 2px solid #fff;
	background-color: #DFE1E4;
	border-radius: 50%;
	width: 46px;
	height: 46px;
	position: relative;
}

.stories .list ul li.new .avatar {
	box-shadow: 0 0 0 2px #88CDF0;
}

.stories .list ul li .avatar .status {
	background-color: #D4D7DB;
	border: 3px solid #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,0.22);
	width: 14px;
	height: 14px;
	border-radius: 50%;
	position: absolute;
	right: 4px;
	top: -5px;
}

.stories .list ul li .avatar .status.online {
	background-color: #7ABA8C;
}

.stories .list ul li .content {
	width: calc(100% - 72px);
	font-weight: 600;
}

.stories .list ul li .content .title {
	font-size: 13px;
	color: #5D5D63;
}

.stories .list ul li .content .info {
	font-size: 11px;
	color: #BDBDBD;
}

.stories .list .subtitle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 22px;
}

.stories .list .subtitle h5 {
	font-weight: 700;
	font-size: 12px;
	color: #8A8A8C;
	margin-bottom: 0;
}

.stories .controls {
	background-color: #DCE8ED;
	border-top: 4px solid #B0BABE;
	text-align: center;
	padding-top: 21px;
	padding-bottom: 14px;
	margin-top: -12px;

	display: flex;
	justify-content: space-between;
	padding-left: 38px;
	padding-right: 38px;
}

.stories .controls .btn.icon {
	color: #2B9CD8;
}

.stories .controls .btn.disabled {
	background-color: #BBC8CD;
	color: #768E97 !important;
}


.rank-forum .title {
	background-color: #fff;
	padding: 26px 32px;

	display: flex;
	justify-content: space-between;
	align-items: center;
}

.rank-forum .title h4 {
	font-size: 18px;
	color: #3D3D44;
	font-weight: 600;
	margin-bottom: -4px;
}

.rank-forum .title span {
	color: #BDBDBD;
	font-size: 12px;
	font-weight: 600;
}

.rank-forum .title .icon {
	background-color: rgba(144,159,187,0.2);
	width: 36px;
	height: 36px;
	line-height: 36px;
	text-align: center;
	color: #909FBB;
	border-radius: 50%;
}

.rank-forum .search {
	background-color: #909FBB;
	padding: 24px 70px;
	padding-bottom: 43px;

	display: flex;
}

.rank-forum .search input {
	padding: 0 17px;
	padding-right: 44px;
	width: 100%;
	border: 0;
	background-color: #6B768C;
	color: #fff;
	border-radius: 5px;
	height: 44px;
	font-size: 11px;
	font-weight: 600;
}

.rank-forum .search input + button {
	border: 0;
	background-color: transparent;
	min-width: 44px;
	min-height: 44px;
	margin-left: -44px;
	color: #fff;
	font-size: 14px;
}

.rank-forum .search ::placeholder {
	color: #B7C7E3;
	opacity: 1;
}

.rank-forum .search :-ms-input-placeholder {
	color: #B7C7E3;
}

.rank-forum .search ::-ms-input-placeholder {
	color: #B7C7E3;
}

.rank-forum .tabs {
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0 1px 7px rgba(0,0,0,0.1);
	padding: 0 23px;
	margin: 0 16px;
	margin-bottom: 15px;
	list-style: none;
	display: flex;
	justify-content: space-between;
	position: relative;
	margin-top: -20px;
}

.rank-forum.all .tabs {
 	margin: 0;
 	margin-bottom: 24px;
}

.rank-forum .tabs li {
	padding: 19px 4px;
	font-size: 12px;
	color: #ABAAAA;
	font-weight: 600;
	text-align: center;
	cursor: pointer;

	transition: all 0.15s;
}

.rank-forum .tabs li:hover {
	box-shadow: inset 0 -3px #ABAAAA;
}

.rank-forum .tabs li.active {
	color: #303030;
	box-shadow: inset 0 -3px rgb(var(--color));
}

.rank-forum ul.rank {
	list-style: none;
	position: relative;
	z-index: 3;
	margin: 0;
	margin-bottom: -8px;
	padding: 0 16px;
	counter-reset: number;
}

.rank-forum.all ul.rank {
	padding: 0;
}

.rank-forum ul.rank li {
	counter-increment: number;
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0 1px 7px rgba(0,0,0,0.1);
	margin-bottom: 15px;
	padding: 14px;
	position: relative;

	display: flex;
	align-items: center;
}

.rank-forum ul.rank li:last-child {
	margin-bottom: 0;
}

.rank-forum.all ul.rank li:last-child {
	margin-bottom: 12px;
}

.rank-forum ul.rank li:before {
	content: counter(number);
	background-color: #E5E6E8;
	width: 48px;
	height: 34px;
	text-align: center;
	line-height: 34px;
	border-radius: 5px 0 0 5px;
	position: absolute;
	right: 0;
	font-size: 12px;
	color: #49494D;
	font-weight: 600;
}

.rank-forum ul.rank li:nth-child(1):before {
	background-color: #E7A629;
	color: #5E4310;
}

.rank-forum ul.rank li:nth-child(2):before {
	background-color: #C7C7C8;
}

.rank-forum ul.rank li:nth-child(3):before {
	background-color: #C47C47;
	color: #351C0A;
}

.rank-forum ul.rank li .avatar {
	background-color: #DFE1E4;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	margin-right: 16px;
}

.rank-forum ul.rank li .name {
	font-size: 12px;
	color: #767676;
	font-weight: 600;
}

.rank-forum ul.rank li .msg {
	font-size: 11px;
	color: #BDBDBD;
	font-weight: 600;
}


.partners {
	background-color: #AABE56;
	padding-top: 38px;
}

.partners .title {
	padding: 0 16px;
	margin-bottom: 30px;

	display: flex;
	justify-content: space-between;
	align-items: center;
}

.partners .title h4 {
	color: #fff;
	text-shadow: 0 1px 2px rgba(0,0,0,0.27);
	font-size: 18px;
	margin-bottom: 0;
}

.partners .title a {
	color: #F0FCBE;
	font-size: 12px;
	font-weight: 600;
}

.partners .button {
	background-color: #9BAC52;
	border-radius: 5px;
	height: 60px;
	margin: 0 12px;
	margin-bottom: 16px;
	padding: 11px;

	display: flex;
	justify-content: space-between;
	align-items: center;

	image-rendering: pixelated;
}

.partners .button .copy {
	border-radius: 5px;
	background-color: #fff;
	box-shadow: 0 1px 7px rgba(0,0,0,0.12);
	color: #767676;
	font-size: 12px;
	font-weight: 600;
	padding: 0 18px;
	height: 38px;
	line-height: 38px;
}

.partners h6 {
	font-size: 13px;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0,0,0,0.27);
	padding: 12px 16px;
	margin-bottom: 0;
}

.partners .icons {
	background-color: #9BAC52;
	height: 74px;
}


.free-things .panel {
	padding: 8px;
}

.free-things .panel .thumb {
	background-color: #E5E6E8;
	height: 60px;
	margin-bottom: 8px;
	border-radius: 5px;

	display: flex;
	justify-content: center;
	align-items: center;
	image-rendering: pixelated;
}

.free-things .btn {
	padding: 8px;
	margin: 0;
	border-radius: 5px;
	display: block;
}


.panel.cartoon .thumb {
	background-color: #F4F7F8;
	height: 49px;
	border-radius: 5px 5px 0 0;
}

.panel.cartoon .infos {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 600;
	padding: 20px;
}

.panel.cartoon .infos .name {
	font-size: 13px;
	color: #49494D;
}

.panel.cartoon .infos .comments {
	font-size: 12px;
	color: #7C7A7A;
}



.sidebar .color ul.entrevistas + .controls {
	margin-top: 20px;
}

ul.entrevistas {
	list-style: none;
	padding: 0;
	margin: 0;
}

ul.entrevistas li {
	margin-bottom: 14px;
	font-weight: 600;

	display: flex;
	align-items: center;

	padding: 8px;
	border-radius: 5px;

	transition: all 0.15s;
}

ul.entrevistas li:hover {
	background-color: rgba(255,255,255,0.05);
	transform: scale(1.05);
	box-shadow: 0 4px 14px rgba(0,0,0,0.16);
}

ul.entrevistas li .habbo {
	background-color: #20252C;
	border-radius: 5px;
	width: 67px;
	height: 67px;
	margin-right: 16px;

	overflow: hidden;
}

ul.entrevistas li .habbo img {
	image-rendering: pixelated;
	margin-left: -2px;
	margin-top: -8px;
}

ul.entrevistas li .name {
	color: #fff;
	font-size: 16px;
}

ul.entrevistas li .by {
	color: #606B7B;
	font-size: 13px;
}



.featured-swiper {
	height: 268px;
	margin: 0 -28px;
	padding: 0 28px;
}

.featured-swiper .swiper-slide {
	transition: all 0.15s;
}

.featured-swiper .swiper-slide:not(.swiper-slide-active) .panel {
	transform: scale(0.9);
}

.swiper-pagination {
	position: relative;
	margin-bottom: 20px;
}

.swiper-pagination-bullet {
	background-color: #3762B1;
	opacity: 1;
	margin: 0 4px;
	transition: all 0.15s;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
	background-color: #fff;
	transform: scale(1.3);
}




.sidebar .color {
	background-color: #4C8BFD;
	padding: 24px 28px;
	padding-top: 40px;
}

.sidebar .color.orange {
	background-color: #E77308;
}

.sidebar .color.red {
	background-color: #EF5856;
}

.sidebar .color.dark {
	background-color: #313842;
}

.sidebar .color .title {
	color: #fff;
	text-shadow: 0 1px 1px rgba(0,0,0,0.27);
	text-align: center;
	font-weight: 600;
	font-size: 18px;
	margin-bottom: 32px;
}

.sidebar .color .controls {
	padding-top: 4px;
	text-align: center;
}

.sidebar .color .btn.disabled {
	background-color: #fff;
	color: #6E6E6E !important;
	opacity: 0.5;
}

.back-to-top {
	background-color: #20252C;
	height: 56px;
	border-bottom-left-radius: 5px;
	cursor: pointer;
}




.btn.icon {
	width: 42px;
	height: 42px;
	padding: 12px 0;
	color: #6E6E6E;
	font-size: 16px;
}

.search.search-icon {
	padding: 3px;
	height: 42px;
	margin-left: 12px;
	border-radius: 24px;
	background-color: #fff;
	box-shadow: 0 1px 7px rgba(0,0,0,0.1);
	display: inline-block;
}

.search-fixed {
	display: inline-block;
	width: 42px;
	height: 42px;
	margin-left: 12px;
	position: relative;
	z-index: 2;
	margin-bottom: -17px;
}

.search-fixed .search.search-icon {
	display: flex;
	margin-left: 0;
	position: absolute;
}

.search.search-icon input {
	border: 0;
	background-color: #EBEFF0;
	width: 108px;
	height: 36px;
	padding: 0 16px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 600;
	color: #3D3D44;

	transition: all 0.2s;
}

.search.search-icon input {
	width: 0;
	padding: 0;
	opacity: 0;
}

.search.search-icon input:focus {
	width: 200px;
	padding: 0 16px;
	opacity: 1;
}

.search-fixed .search.search-icon input:focus {
	width: 168px;
}

.search.search-icon ::placeholder {
	color: #B2B8B9;
	opacity: 1;
}

.search.search-icon :-ms-input-placeholder {
	color: #B2B8B9;
}

.search.search-icon ::-ms-input-placeholder {
	color: #B2B8B9;
}

.search.search-icon button {
	border: none;
	background-color: transparent;
	color: #6E6E6E;
	font-size: 14px;
	margin-right: 3px
}

.search.search-icon label {
	text-align: center;
	height: 42px;
	line-height: 42px;
	width: 42px;
	color: #6E6E6E;
	font-size: 14px;
	margin: 0;
	float: right;
	cursor: pointer;
	margin: -3px;
	cursor: pointer;
}




.site-footer {
	background-color: #272536;
	box-shadow: inset 0 9px #15141D, inset 0 11px rgba(0255,255,255,0.08);

	color: #fff;
	padding-top: 46px;
}

.site-footer h4 {
	font-size: 23px;
	margin-bottom: 34px;
}

.site-footer .text {
	line-height: 1.6;
	font-size: 12px;
	color: #837E9C;
	font-weight: 600;
	margin-bottom: 50px;
}

.site-footer .text strong, .site-footer .text a {
	color: #fff;
}

.site-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;

	font-size: 13px;
	color: #837E9C;
	font-weight: 600;
}

.site-footer ul li {
	padding: 1px 0;
}

.site-footer .dev {
	background-color: #1F1E2B;
	padding: 26px;
	text-align: center;
	font-size: 12px;
	color: #837E9C;
	font-weight: 600;
}

.site-footer .dev .icon-heart {
	color: rgb(var(--color));
}

.site-footer .dev strong {
	color: #fff;
}


.btn {
	line-height: 16px;
	padding: 12px 32px;
	background-color: #fff;
	box-shadow: 0 1px 7px rgba(0,0,0,0.1);
	font-size: 12px;
	color: #94989D;
	font-weight: 600;
	border-radius: 40px;
	margin-left: 10px;
	cursor: pointer;
	transition: all 0.2s;
}

.btn {
	line-height: 16px;
	padding: 12px 24px;
	background-color: #fff;
	box-shadow: 0 1px 7px rgba(0,0,0,0.1);
	font-size: 12px;
	color: #94989D;
	font-weight: 600;
	border-radius: 40px;
	margin-left: 10px;
	cursor: pointer;

	transition: all 0.2s;
}

.btn:hover, .btn.icon.icon:hover {
	color: rgb(var(--color));
	box-shadow: 0 0 9px rgba(var(--color), 0.5);
}

.btn.disabled {
	background-color: #D6DDE0;
	color: #A9B2B6 !important;
	box-shadow: none;
	pointer-events: none;
	opacity: 1;
}

.btn.btn-white {
	background-color: #fff;
	color: #3D3D44;
}

.btn.btn-grey {
	background-color: #C7C7C8;
	color: #404041;
}

.btn.btn-red {
	background-color: #EF5856;
	color: #fff;
}

.btn.btn-red:hover {
	box-shadow: 0 0 9px #EF5856;
}

.btn.btn-green {
	background-color: #5AC604;
	color: #fff;
}

.btn.btn-green:hover {
	box-shadow: 0 0 9px #5AC604;
}


.ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


.dropdown-menu {
	border: 0;
	border-radius: 5px;
	box-shadow: 0 1px 7px rgba(0,0,0,0.16);
}


@media (max-width: 768px) {
	.navbar .user-div {
		border-left: 0;
	}

	.main {
		padding: 0
	}

	.sidebar {
		display: none;
	}

	.section-title .search {
		display: none;
	}

	.hero .carousel-item .blocks {
		width: 90%;
	}

	.hero .content {
		width: 85%;
	}

	.hero .content .tag {
		margin-top: 50px;
	}

	.hero .room {

	}

	.hero .carousel-indicators {
		left: calc(90% - 17px);
	}
}



h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
}





@media (min-width: 1800px) {

	.main .container {
		max-width: 1200px;
	}

	.col-xl-4 {
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		max-width: 25%;
	}

	.d-xl-bk {
		display: block!important;
	}

}










.ui-slider {
	position: relative;
	background-color: #ECECEC;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.09);
	width: 100%;
	height: 5px;
	border-radius: 5px;

	margin-top: 11px;
	margin-bottom: 11px;
}

.ui-slider-range {
    background-color: rgb(var(--color));
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15), 0 1px 3px rgb(var(--color));
    height: 5px;
    border-radius: 5px;
}

.ui-slider-handle {
    background-color: #fff;
	box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    width: 15px;
    height: 15px;
    position: absolute;
    top: -6px;
    margin-left: -7px;
    border-radius: 50%;

    cursor: default;
    -ms-touch-action: none;
    touch-action: none;

    transition: transform 0.2s;
}

.ui-slider-handle:hover {
	transform: scale(1.3);
}