/* --------------------------------- */
.containerWrapper { width: 100%; max-width: 1440px; min-width: 540px; padding: 0 20px; box-sizing: border-box; margin: 0 auto; position: relative; }
.containerPage { min-width: 540px; overflow: hidden; }

/* --------------------------------- */
.containerView { position: relative; overflow: hidden; }
.containerView .containerView--header { padding: 40px 0; background: #0f1010; }
.containerView .containerView--header .containerView--title { padding-bottom: 10px; }
.containerView .containerView--header .containerView--title h1 { font-size: 24px; font-weight: 700; color: #fff; text-transform: uppercase; }
.containerView .containerView--content { padding: 40px 0; }
.containerView .containerView--content .containerView--content--left { float: left; width: 290px; }
.containerView .containerView--content .containerView--content--right { margin-left: 330px; }
.containerView .containerView--content .containerView--content--present { line-height: 24px; }

/* --------------------------------- */
.containerHeader { position: relative; padding: 50px 0; background: #181a1c; overflow: auto; }
.containerHeader .containerHeader--right { float: right; }
.containerHeader .containerHeader--right { float: right; }
.containerHeader .containerHeader--left { margin-right: 200px; }
.containerHeader .containerHeader--left .containerHeader--first { float: left; }
.containerHeader .containerHeader--left .containerHeader--second { margin-left: 550px; }
.containerHeader .containerHeader--logotype { float: left; }
.containerHeader .containerHeader--logotype .containerHeader--logo { display: block; width: 199px; height: 53px; background: url('../img/logo.png') no-repeat; }
.containerHeader .containerHeader--menu { float: left; margin-left: 50px; padding: 10px 0; }
.containerHeader .containerHeader--menu a { float: left; font-weight: 500; color: #fff; margin-right: 30px; line-height: 33px; transition: all .2s; }
.containerHeader .containerHeader--menu a:hover { color: #1abff5; text-decoration: none; }
.containerHeader .containerHeader--menu a:last-child { margin-right: 0; }
.containerHeader .containerHeader--search { float: left; width: 100%; position: relative; }
.containerHeader .containerHeader--search .search--icon { width: 18px; height: 18px; background: url('../img/search.svg') no-repeat; background-size: 100%; position: absolute; top: 18px; left: 20px; }
.containerHeader .containerHeader--search input { width: 100%; height: 53px; border: 1px solid rgba(255,255,255,0.3); border-radius: 40px; box-sizing: border-box; padding: 0 20px 0 50px; color: #fff; background: transparent; font-size: 16px; line-height: 51px; }
.containerHeader .containerHeader--search input::-webkit-input-placeholder { color: #fff; }
.containerHeader .containerHeader--user { float: right; }
.containerHeader .containerHeader--user .user--button { width: 53px; height: 53px; border-radius: 100%; text-align: center; color: #fff; background: #1abff5; display: block; transition: all .2s; }
.containerHeader .containerHeader--user .user--button:hover { transform: scale(1.1); }
.containerHeader .containerHeader--user .user--button img { vertical-align: middle; position: relative; top: 14px; }
.containerHeader .containerHeader--user .user--button.active { font-weight: 700; line-height: 53px; font-size: 20px; }
.containerHeader .containerHeader--user .user--button.active:hover { text-decoration: none; }
.containerHeader .containerHeader--store { float: right; margin-right: 20px; }
.containerHeader .containerHeader--store .store--button { width: 52px; height: 52px; border-radius: 100%; text-align: center; color: #fff; border: 1px solid #fff; display: block; transition: all .2s; }
.containerHeader .containerHeader--store .store--button:hover { transform: scale(1.1); }
.containerHeader .containerHeader--store .store--button img { vertical-align: middle; position: relative; top: 14px; }

/* --------------------------------- */
.containerMain { position: relative; padding: 0 0 40px 0; clear: both; overflow: hidden; }
.containerMain--left { float: left; width: 290px; }
.containerMain--left .left--title { font-weight: 700; text-transform: uppercase; color: rgba(255,255,255,0.3); padding-bottom: 24px; font-size: 16px; }
.containerMain--left .menu_1 li { font-weight: 500; height: 24px; padding-bottom: 10px; }
.containerMain--left .menu_1 li:last-child { margin-bottom: 15px; }
.containerMain--left .menu_1 li a { color: #fff; line-height: 24px; display: block; transition: all .2s; }
.containerMain--left .menu_1 li:hover a { color: #1abff5; text-decoration: none; }
.containerMain--left .menu_1 li span { padding-left: 12px; }
.containerMain--left .menu_2 li { font-weight: 500; height: 24px; padding-bottom: 7px; }
.containerMain--left .menu_2 li:last-child { margin-bottom: 13px; }
.containerMain--left .menu_2 li a { color: #fff; line-height: 24px; display: block; transition: all .2s; }
.containerMain--left .menu_2 li:hover a { color: #1abff5; text-decoration: none; }
.containerMain--left .menu_2 li span { padding-right: 15px; }
.containerMain--left .menu_2 li img { position: relative; top: 5px; opacity: 0.3; }
.containerMain--right { margin-left: 330px; }
.containerMain--slider { margin-bottom: 40px; border-radius: 20px; overflow: hidden; }
.containerMain--thumbs { position: relative; width: calc(100% + 40px); left: -20px; display: inline-block; }
.containerMain--thumbs .thumbs--item { float: left; width: 33.3333%; padding: 0 20px; box-sizing: border-box; }
.containerMain--thumbs .thumbs--item--content { background: #272a2d; border-radius: 20px; overflow: hidden; cursor: pointer; transition: all .2s; }
.containerMain--thumbs .thumbs--item--content:hover { background: #0f1010; }
.containerMain--thumbs .thumbs--item--image { height: 110px; overflow: hidden; }
.containerMain--thumbs .thumbs--item--image img { width: 100%; height: 100%; object-fit: cover; }
.containerMain--thumbs .thumbs--item--present { padding: 20px; }
.containerMain--thumbs .thumbs--item--present .thumbs--item--cat { font-size: 14px; font-weight: 700; text-transform: uppercase; padding-bottom: 7px; color: rgba(255,255,255,0.3); display: block; }
.containerMain--thumbs .thumbs--item--present .thumbs--item--title { color: #fff; font-weight: 700; font-size: 16px; }

/* --------------------------------- */
.containerPopular { padding: 40px 0; background: #0f1010; clear: both; }
.containerPopular .containerPopular--header { position: relative; overflow: hidden; padding-bottom: 40px; }
.containerPopular .containerPopular--header .containerPopular--title { float: left; text-transform: uppercase; font-weight: 700; color: #fff; font-size: 16px; }
.containerPopular .containerPopular--header .containerPopular--link { float: right; text-transform: uppercase; font-weight: 700; color: #fff; font-size: 16px; }
.containerPopular .containerPopular--header .containerPopular--link a:hover { text-decoration: none; }
.containerPopular .containerPopular--container { display: inline-block; width: calc(100% + 40px); position: relative; left: -20px; }
.containerPopular .containerPopular--button { text-align: center; }

/* --------------------------------- */
.containerFree { padding: 40px 0; clear: both; }
.containerFree .containerFree--header { position: relative; overflow: hidden; padding-bottom: 40px; }
.containerFree .containerFree--header .containerFree--title { float: left; text-transform: uppercase; font-weight: 700; color: #fff; font-size: 16px; }
.containerFree .containerFree--header .containerFree--link { float: right; text-transform: uppercase; font-weight: 700; color: #fff; font-size: 16px; }
.containerFree .containerFree--header .containerFree--link a { color: #558b40; }
.containerFree .containerFree--header .containerFree--link a:hover { text-decoration: none; }
.containerFree .containerFree--container { display: inline-block; width: calc(100% + 40px); position: relative; left: -20px; }
.containerFree .containerFree--button { text-align: center; }

/* --------------------------------- */
.containerAbout { padding: 40px 0 25px 0; background: #0f1010; clear: both; }
.containerAbout .containerAbout--title { position: relative; padding-bottom: 20px; }
.containerAbout .containerAbout--title h3 { text-transform: uppercase; font-weight: 700; color: #fff; font-size: 16px; }
.containerAbout .containerAbout--present { line-height: 24px; color: rgba(255,255,255,0.7); }

/* --------------------------------- */
.containerFooter { padding: 40px 0 0 0; background: #272a2d; }
.containerFooter .containerFooter--content { background: url('../img/footer.png') right bottom no-repeat; padding-bottom: 40px; }
.containerFooter .containerFooter--content .containerFooter--links { position: relative; overflow: hidden; }
.containerFooter .containerFooter--content .containerFooter--links .links--social { float: left; margin-right: 40px; }
.containerFooter .containerFooter--content .containerFooter--links .links--social a { float: left; margin-right: 15px; }
.containerFooter .containerFooter--content .containerFooter--links .links--menu { float: left; }
.containerFooter .containerFooter--content .containerFooter--links .links--menu a { float: left; font-weight: 500; color: #fff; margin-right: 30px; line-height: 33px; transition: all .2s; }
.containerFooter .containerFooter--content .containerFooter--links .links--menu a:hover { color: #1abff5; text-decoration: none; }
.containerFooter .containerFooter--content .containerFooter--links .links--menu a:last-child { margin-right: 0; }
.containerFooter .containerFooter--logotype { position: relative; padding-top: 70px; }
.containerFooter .containerFooter--logotype .containerFooter--logo { display: block; width: 199px; height: 53px; background: url('../img/logo_footer.png') no-repeat; }
.containerFooter .containerFooter--bottom { padding-top: 20px; }
.containerFooter .containerFooter--bottom a { float: left; font-weight: 500; color: #fff; margin-right: 30px; line-height: 33px; transition: all .2s; }
.containerFooter .containerFooter--bottom a:hover { color: #1abff5; text-decoration: none; }
.containerFooter .containerFooter--bottom a:last-child { margin-right: 0; }
.containerFooter .containerFooter--copyrights { padding-top: 20px; padding-right: 400px; line-height: 24px; color: rgba(255,255,255,0.5); clear: both; }
.containerFooter .containerFooter--studio { color: rgba(255,255,255,0.3); padding-top: 20px; }
.containerFooter .containerFooter--studio a { font-family: "Chakra Petch", sans-serif; font-size: 18px; padding-left: 2px; transition: all .2s; }
.containerFooter .containerFooter--studio a:hover { text-decoration: none; color: #fff; }

/* --------------------------------- */
.containerItem { position: relative; }
.containerItem .containerItem--right { float: right; width: 400px; border-radius: 20px; background: #242629; margin-bottom: 40px; }
.containerItem .containerItem--right .containerItem--right--box { padding: 30px; border-bottom: 2px solid rgba(0,0,0,0.3); position: relative; }
.containerItem .containerItem--right .containerItem--right--box:last-child { border-bottom: none; }
.containerItem .containerItem--right .containerItem--right--box h3 { font-size: 16px; font-weight: 500; padding-bottom: 20px; }
.containerItem .containerItem--right .containerItem--right--box .addons { color: rgba(255,255,255,0.7); }
.containerItem .containerItem--right .containerItem--right--title { padding-bottom: 5px; }
.containerItem .containerItem--right .containerItem--right--title h1 { font-size: 24px; font-weight: 500; }
.containerItem .containerItem--right .containerItem--right--bread { padding-bottom: 30px; }
.containerItem .containerItem--right .containerItem--right--image { position: relative; }
.containerItem .containerItem--right .containerItem--right--image img { max-width: 100%; border-radius: 10px; }
.containerItem .containerItem--right .containerItem--right--select { padding: 15px; border-radius: 10px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); position: relative; cursor: pointer; transition: all .2s; }
.containerItem .containerItem--right .containerItem--right--select:hover { background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3); }
.containerItem .containerItem--right .containerItem--right--select .select--arrow { position: absolute; top: 15px; right: 15px; }
.containerItem .containerItem--right .containerItem--right--select .select--arrow.rotate { transform: rotate(-180deg); }
.containerItem .containerItem--right .containerItem--right--select .select--title { font-weight: 500; }
.containerItem .containerItem--right .containerItem--right--select .select--prices { padding-top: 10px; color: rgba(255,255,255,0.7); }
.containerItem .containerItem--right .containerItem--right--select .select--prices b { font-weight: 500; color: #1cacdb; }
.containerItem .containerItem--right .containerItem--right--scroll { display: none; margin-top: 15px; max-height: 302px; padding: 15px 5px 15px 15px; border-radius: 10px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.2); overflow: auto; }
.containerItem .containerItem--right .containerItem--animation { padding: 10px 15px; border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; position: relative; transition: all .2s; margin-bottom: 15px; }
.containerItem .containerItem--right .containerItem--animation:last-child { margin-bottom: 0; }
.containerItem .containerItem--right .containerItem--animation:hover { background: rgba(0,0,0,0.1);}
.containerItem .containerItem--right .containerItem--animation .animation--name { font-weight: 500; font-size: 15px; padding-bottom: 4px; }
.containerItem .containerItem--right .containerItem--animation .animation--price { font-weight: 500; font-size: 15px; color: #1abff5; }
.containerItem .containerItem--right .containerItem--animation .animation--basket { position: absolute; top: calc(50% - 20px); right: 15px; }
.containerItem .containerItem--right .containerItem--animation .animation--basket .basket--button { background: #1abff5; border-radius: 5px; width: 40px; height: 40px; text-align: center; display: block; }
.containerItem .containerItem--right .containerItem--animation .animation--basket .basket--button img { position: relative; top: 10px; }
.containerItem .containerItem--right .containerItem--right--price { font-size: 24px; font-weight: 700; padding-bottom: 20px; color: #1abff5; }
.containerItem .containerItem--right .containerItem--right--buy { height: 44px; border-radius: 10px; display: block; background: #1abff5; color: #fff; text-align: center; line-height: 44px; font-weight: 500; transition: all .2s; }
.containerItem .containerItem--right .containerItem--right--buy:hover { text-decoration: none; background: #1cacdb; }
.containerItem .containerItem--right .containerItem--filter { padding-bottom: 30px; }
.containerItem .containerItem--right .containerItem--filter:last-child { padding-bottom: 0; }
.containerItem .containerItem--left { margin-right: 440px; }
.containerItem .containerItem--left .containerItem--left--player { background: #000; padding: 20px; border-radius: 20px; margin-bottom: 40px; overflow: hidden; }
.containerItem .containerItem--left .containerItem--left--text { line-height: 24px; padding-bottom: 40px; }
.containerItem .containerItem--left .containerItem--left--addition { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 30px; margin-bottom: 40px; }
.containerItem .containerItem--left .containerItem--left--addition .addition--title { font-size: 20px; font-weight: 500; padding-bottom: 30px; }
.containerItem .containerItem--left .containerItem--left--hashtags { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 40px; margin-bottom: 40px; }
.containerItem .containerItem--left .containerItem--left--hashtags .hashtags--title { font-size: 20px; font-weight: 500; padding-bottom: 30px; }
.containerItem .containerItem--left .containerItem--left--hashtags .hashtags--button { padding: 10px 20px; border-radius: 40px; background: #242629; color: #fff; display: inline-block; margin: 0 10px 13px 0; transition: all .2s; }
.containerItem .containerItem--left .containerItem--left--hashtags .hashtags--button:hover { background: rgba(255,255,255,0.2); text-decoration: none; }

/* --------------------------------- */
.containerCatalogue { width: calc(100% + 40px); position: relative; left: -20px; display: inline-block; }
.containerProduct { float: left; width: 25%; padding: 0 20px; box-sizing: border-box; margin-bottom: 40px; }
.containerProduct.inside { width: 33.3333%; }
.containerProduct.inside .containerProduct--content { background: #0f1010; }
.containerProduct.wide { width: 50%; }
.containerProduct.wide .containerProduct--content { height: 410px; }
.containerProduct.wide .containerProduct--image { width: 100%; height: 410px; }
.containerProduct.wide .containerProduct--present { position: absolute; left: 0; width: 100%; bottom: 0; box-sizing: border-box; z-index: 2; }
.containerProduct.wide .containerProduct--present .containerProduct--title h3 { font-size: 20px; }
.containerProduct.wide .containerProduct--present .containerProduct--body { min-height: auto; }
.containerProduct.free .containerProduct--content { background: #0f1010; }
.containerProduct:hover .containerProduct--content { box-shadow: 0 15px 50px rgba(0,0,0,0.8); transform: scale(1.05); }
.containerProduct .containerProduct--content { background: #181a1c; border-radius: 20px; overflow: hidden; transition: all .2s; position: relative; }
.containerProduct .containerProduct--image { height: 200px; border-radius: 20px 20px 0 0; overflow: hidden; }
.containerProduct .containerProduct--image img { width: 100%; height: 100%; object-fit: cover; }
.containerProduct .containerProduct--present { padding: 20px; }
.containerProduct .containerProduct--present .containerProduct--body { min-height: 130px; }
.containerProduct .containerProduct--present .containerProduct--title { padding-bottom: 5px; }
.containerProduct .containerProduct--present .containerProduct--title h3 { font-size: 16px; font-weight: 500; }
.containerProduct .containerProduct--present .containerProduct--title h3 a { color: #fff; }
.containerProduct .containerProduct--present .containerProduct--tags { padding-bottom: 20px; }
.containerProduct .containerProduct--present .containerProduct--tags a { font-weight: 500; }
.containerProduct .containerProduct--present .containerProduct--formats { color: rgba(255,255,255,0.3); font-weight: 500; }
.containerProduct .containerProduct--present .containerProduct--formats span { color: rgba(255,255,255,1); }
.containerProduct .containerProduct--present .containerProduct--offer { overflow: hidden; }
.containerProduct .containerProduct--present .containerProduct--offer .containerProduct--price { float: left; height: 40px; padding: 0 20px; line-height: 40px; border-radius: 10px; background: #272a2d; color: #fff; font-weight: 500; }
.containerProduct .containerProduct--present .containerProduct--offer .containerProduct--price.free { background: #558b40; }
.containerProduct .containerProduct--present .containerProduct--offer .containerProduct--price span { color: #17C5FF; }
.containerProduct .containerProduct--present .containerProduct--view { float: right; height: 40px; padding-top: 13px; box-sizing: border-box; transition: all .2s; }
.containerProduct .containerProduct--present .containerProduct--view:hover { transform: scale(1.1); }

@media screen and (max-width: 1000px){
    .containerMain--left { width: 100%; margin-bottom: 30px; }
    .containerMain--right { margin-left: 0; }
    .containerProduct { width: 33.3333%; }
    .containerProduct.wide { width: 100%; }
    .containerHeader .containerHeader--menu { display: none; }
    .containerHeader .containerHeader--left .containerHeader--second { margin-left: 220px; }
    .containerHeader .containerHeader--left { margin-right: 150px; }
    .containerMain--left--menu { display: none; }
}

@media screen and (max-width: 750px){
    .containerProduct { width: 50%; }
    .containerMain--thumbs .thumbs--item { width: 50%; margin-bottom: 40px; }
    .containerMain--thumbs .thumbs--item:last-child { margin-bottom: 0; }
    .containerMain--thumbs .thumbs--item--present .thumbs--item--title { min-height: 42px; }
    .containerMain--slider img { width: 100%; height: 100%; object-fit: cover; }
    .containerFooter .containerFooter--content { background: transparent; }
    .containerFooter .containerFooter--copyrights { padding-right: 0; }
    .containerView .containerView--content .containerView--content--left { width: 200px; }
    .containerView .containerView--content .containerView--content--right { margin-left: 230px; }
    .containerProduct.inside { width: 100%; }
    .containerItem .containerItem--right { width: 100%; }
    .containerItem .containerItem--left { margin-right: 0;}
}