/*----------------------------------------
[Master Stylesheet]

Project:	HotFlix
Version:	3.0
Primary use:	HotFlix Template
----------------------------------------*/
/*----------------------------------------
[Table of contents]

1. Header
2. Home
3. Hero
4. Content
5. Section
6. Breadcrumbs
7. Item
8. Filter
9. Paginator
10. Profile
11. Stats
12. Dashbox
13. Plan
14. Accordion
15. Feature
16. How
17. Roadmap
18. Partners
19. Contacts
20. Comments
21. Reviews
22.	Gallery
23. Footer
24. Sign
25. Page 404
26. Modal
27. Splide customization
28. Plyr customization
29. PhotoSwipe customization
30. Scrollbar-track customization

----------------------------------------*/
/*==============================
Fonts
==============================*/
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600");
/*==============================
Common styles
==============================*/
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
html,
body {
height: 100%;
}
body {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 400;
background-color: #1a191f;
-webkit-font-smoothing: antialiased;
}
button {
padding: 0;
border: none;
background-color: transparent;
transition: 0.4s;
cursor: pointer;
transition-property: color, background-color, border-color, opacity, box-shadow;
}
button:focus {
outline: none;
}
a {
text-decoration: none;
transition: 0.4s;
transition-property: color, background-color, border-color, opacity, box-shadow;
}
a:hover,
a:active,
a:focus {
outline: none;
text-decoration: none;
}
input,
textarea,
select {
padding: 0;
margin: 0;
border-radius: 0;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
box-shadow: none;
transition: 0.4s ease;
transition-property: color, border-color, box-shadow;
}
input:focus,
textarea:focus,
select:focus {
outline: none;
}
select::-ms-expand {
display: none;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
::-moz-selection {
background: #f9ab00;
color: #fff;
text-shadow: none;
}
::selection {
background: #ffc700;
color: #fff;
text-shadow: none;
}
::-webkit-input-placeholder {
color: #c0c0c0;
opacity: 1;
}
::-moz-placeholder {
color: #c0c0c0;
opacity: 1;
}
:-moz-placeholder {
color: #c0c0c0;
opacity: 1;
}
:-ms-input-placeholder {
color: #c0c0c0;
opacity: 1;
}
body::-webkit-scrollbar {
width: 16px;
}
body::-webkit-scrollbar-track {
background: #1a191f;
}
body::-webkit-scrollbar-thumb {
background-color: #222028;
outline: 0 solid #fff;
}
@media (min-width: 1400px) {
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
max-width: 1300px;
}
}
/*==============================
Header
==============================*/
.header {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #1a191f;
z-index: 101;
border-bottom: 1px solid #222028;
}
.header__logo {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
height: 70px;
width: auto;
}
.header__logo img {
width: auto;
height: 20px;
display: block;
}
.header__nav {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
position: fixed;
top: 70px;
right: 0;
bottom: 0;
background-color: #1a191f;
z-index: 99;
width: 300px;
padding: 30px 30px 0;
transform: translate3d(300px, 0, 0);
transition: 0.4s ease;
border-top: 2px solid #f9ab00;
}
.header__nav--active {
transform: translate3d(0, 0, 0);
}
.header__nav-item {
width: 100%;
display: block;
height: 30px;
margin-bottom: 20px;
position: relative;
}
.header__nav-item:last-child {
margin-bottom: 0;
}
.header__nav-link {
display: inline-flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
height: 30px;
font-size: 14px;
text-transform: uppercase;
color: #fff;
white-space: nowrap;
}
.header__nav-link i {
font-size: 10px;
margin-left: 2px;
}
.header__nav-link--more i {
font-size: 20px;
margin-left: 0;
}
.header__nav-link:hover,
.header__nav-link[aria-expanded="true"] {
color: #ffc700;
}
.header__dropdown-menu {
position: absolute;
background-color: #222028;
padding: 15px 20px;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
min-width: 160px;
border-radius: 8px;
border: none;
}
.header__dropdown-menu li {
margin-bottom: 15px;
width: 100%;
}
.header__dropdown-menu li:last-child {
margin-bottom: 0;
}
.header__dropdown-menu a {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
font-size: 16px;
line-height: 24px;
color: #fff;
font-weight: 400;
}
.header__dropdown-menu a i {
font-size: 20px;
line-height: 24px;
margin-right: 8px;
}
.header__dropdown-menu a:hover {
color: #f9ab00;
}
.header__dropdown-menu--user a {
font-size: 14px;
text-transform: uppercase;
}
.header__dropdown-menu.show {
display: flex;
}
.header__content {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 70px;
position: relative;
}
.header__auth {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
margin-right: 42px;
}
.header__sign-in {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 40px;
width: 40px;
border-radius: 8px;
margin-left: 20px;
border: 2px solid #f9ab00;
}
.header__sign-in span {
display: none;
}
.header__sign-in i {
color: #fff;
font-size: 20px;
}
.header__sign-in:hover {
background-color: rgba(249,171,0,0.05);
}
.header__sign-in:hover span {
color: #fff;
}
.header__btn {
display: block;
position: absolute;
right: 0;
top: 50%;
margin-top: -22px;
width: 22px;
height: 40px;
}
.header__btn span {
display: block;
position: absolute;
height: 2px;
width: 22px;
background: #000;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: 0.4s ease;
top: 13px;
background-color: #fff;
border-radius: 2px;
}
.header__btn span:nth-child(2) {
top: 21px;
}
.header__btn span:nth-child(3) {
top: 29px;
}
.header__btn--active span {
background-color: #f9ab00;
}
.header__btn--active span:nth-child(1) {
top: 21px;
transform: rotate(45deg);
}
.header__btn--active span:nth-child(2) {
opacity: 0;
}
.header__btn--active span:nth-child(3) {
top: 21px;
transform: rotate(-45deg);
}
.header__lang {
position: relative;
margin-left: 20px;
}
.header__lang .header__dropdown-menu {
width: 120px;
min-width: 120px;
}
.header__lang .header__nav-link {
height: 40px;
}
.header__profile {
position: relative;
}
.header__profile .header__dropdown-menu {
width: 170px;
min-width: 170px;
}
.header__search-btn {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 40px;
color: #fff;
font-size: 20px;
}
.header__search-btn:hover {
color: #f9ab00;
}
.header__search {
position: absolute;
background-color: #1a191f;
top: -70px;
right: -15px;
left: -15px;
z-index: 1;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
height: 70px;
padding: 0 15px;
pointer-events: none;
transition: top 0.4s ease;
}
.header__search--active {
top: 0;
pointer-events: auto;
}
.header__search-input {
width: calc(100% - 35px);
height: 40px;
border-radius: 8px;
background-color: #222028;
border: 2px solid transparent;
font-size: 16px;
color: #fff;
padding: 0 50px 0 20px;
}
.header__search-input:focus {
border-color: #ffc700;
}
.header__search-button {
position: absolute;
height: 40px;
color: #fff;
font-size: 20px;
top: 50%;
margin-top: -20px;
right: 75px;
}
.header__search-button:hover {
color: #f9ab00;
}
.header__search-close {
position: absolute;
height: 40px;
color: #fff;
font-size: 20px;
top: 50%;
margin-top: -20px;
right: 15px;
}
.header__search-close:hover {
color: #eb5757;
}
@media (min-width: 576px) {
.header__sign-in,
.header__lang {
margin-left: 30px;
}
.header__auth {
margin-right: 52px;
}
}
@media (min-width: 768px) {
.header__content {
height: 80px;
}
.header__logo {
height: 80px;
}
.header__logo img {
height: 24px;
}
.header__auth {
margin-right: 52px;
}
.header__sign-in {
height: 40px;
width: 120px;
margin-left: 30px;
}
.header__sign-in i {
display: none;
}
.header__sign-in span {
display: block;
font-size: 14px;
color: #fff;
text-transform: uppercase;
transition: color 0.4s;
}
.header__sign-in--user {
width: auto;
padding: 0 24px;
}
.header__nav {
top: 80px;
width: 260px;
transform: translate3d(260px, 0, 0);
}
.header__nav--active {
transform: translate3d(0, 0, 0);
}
.header__search {
height: 80px;
}
}
@media (min-width: 1200px) {
.header__sign-in {
margin-left: 30px;
}
.header__auth {
margin-right: 0;
}
.header__btn {
display: none;
}
.header__nav {
transform: translate3d(0, 0, 0);
padding: 0;
background-color: transparent;
width: auto;
flex-direction: row;
align-items: center;
position: relative;
top: auto;
right: auto;
bottom: auto;
margin-left: auto;
box-shadow: none;
border: none;
transition: 0s;
}
.header__nav-item {
margin-right: 35px;
height: 40px;
width: auto;
margin-bottom: 0;
}
.header__nav-item:last-child {
margin-right: 0;
}
.header__nav-link {
height: 40px;
}
.header__content {
justify-content: flex-start;
}
.header__auth {
margin-left: auto;
justify-content: space-between;
width: 432px;
}
.header__lang {
margin-left: 24px;
margin-right: auto;
}
.header__search-btn {
display: none;
}
.header__search-close {
display: none;
}
.header__search {
position: relative;
opacity: 1;
pointer-events: auto;
padding: 0;
top: auto;
right: auto;
left: auto;
bottom: auto;
background-color: transparent;
}
.header__search-input {
width: 204px;
}
.header__search-button {
right: 20px;
}
}
@media (min-width: 1400px) {
.header__auth {
width: 492px;
}
.header__lang {
margin-left: 30px;
}
.header__nav-item {
margin-right: 45px;
}
.header__nav-item:last-child {
margin-right: 0;
}
.header__search-input {
width: 231px;
}
}
/*==============================
Home
==============================*/
.home {
margin-top: 70px;
position: relative;
display: block;
background-color: #1a191f;
padding: 50px 0;
overflow: hidden;
}
.home .container {
position: relative;
z-index: 3;
}
.home__title {
color: #fff;
text-transform: uppercase;
font-weight: 300;
font-size: 32px;
line-height: 42px;
margin: 0;
padding-right: 100px;
}
.home__title b {
font-weight: 600;
}
.home__carousel {
margin-top: 24px;
}
.home--bg {
border-bottom: 1px solid #222028;
}
.home--bg:before {
content: '';
z-index: 1;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
background: url("../img/bg/home__bg.jpg") no-repeat center/cover;
opacity: 0.2;
}
.home--bg:after {
content: '';
z-index: 2;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
background: linear-gradient(0deg, #1a191f 0%, #1a191f 25%, rgba(26,25,31,0) 100%);
}
.home--hero {
padding: 35px 0;
border-bottom: 1px solid #222028;
}
@media (min-width: 768px) {
.home {
margin-top: 90px;
padding: 35px 0;
}
.home__title {
font-size: 36px;
padding-right: 120px;
}
.home__carousel {
margin-top: 34px;
}
.home--hero {
padding: 35px 0;
}
}
@media (min-width: 1200px) {
.home__title {
font-size: 42px;
}
}
/*==============================
Hero
==============================*/
.hero {
position: relative;
width: 100%;
border-radius: 6px;
overflow: hidden;
}
.hero__slide {
padding: 0 20px;
width: 100%;
border-radius: 6px;
position: relative;
overflow: hidden;
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
}
.hero__slide:before,
.hero__slide:after {
content: '';
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
}
.hero__slide:before {
background-color: rgba(0,0,0,0.25);
z-index: 1;
}
.hero__slide:after {
background: linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
z-index: 2;
}
.hero__content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
height: 560px;
width: 100%;
position: relative;
z-index: 3;
padding-bottom: 40px;
padding-right: 20px;
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
}
.hero__title {
font-size: 32px;
line-height: 42px;
color: #fff;
font-weight: 400;
margin-bottom: 15px;
position: relative;
}
.hero__title sub {
display: inline-flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 36px;
height: 36px;
font-size: 14px;
color: #fff;
font-weight: 600;
line-height: 20px;
bottom: 50%;
transform: translateY(50%);
position: relative;
margin-left: 10px;
background-color: rgba(26,25,31,0.2);
border: 2px solid transparent;
border-radius: 50%;
}
.hero__title sub.green {
border-color: #29b474;
}
.hero__title sub.yellow {
border-color: #ffc312;
}
.hero__title sub.red {
border-color: #eb5757;
}
.hero__text {
font-size: 16px;
line-height: 26px;
color: #c0c0c0;
margin-bottom: 20px;
}
.hero__category {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
margin-bottom: 20px;
}
.hero__category a {
font-size: 16px;
line-height: 20px;
position: relative;
color: #f9ab00;
margin-right: 10px;
}
.hero__category a:after {
content: ',';
position: absolute;
display: block;
left: 100%;
top: 0;
color: #f9ab00;
}
.hero__category a:last-child {
margin-right: 0;
}
.hero__category a:last-child:after {
display: none;
}
.hero__category a:hover {
text-decoration: underline;
}
.hero__actions {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
width: 100%;
}
.hero__btn {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 46px;
width: 160px;
border-radius: 8px;
background-color: transparent;
font-size: 14px;
color: #fff;
text-transform: uppercase;
border: 2px solid #f9ab00;
margin-top: 20px;
}
.hero__btn:hover {
color: #fff;
background-color: rgba(249,171,0,0.05);
}
@media (min-width: 768px) {
.hero__slide {
padding: 0 60px;
}
.hero__content {
padding-bottom: 50px;
padding-right: 25%;
}
.hero__title {
font-size: 36px;
line-height: 46px;
}
}
@media (min-width: 992px) {
.hero__content {
padding-right: 0;
}
.hero__text {
padding-right: 40%;
}
}
@media (min-width: 1200px) {
.hero__slide {
padding: 0 120px;
}
.hero__title {
font-size: 42px;
}
.hero__text {
padding-right: 50%;
}
}
@media (min-width: 1400px) {
.hero__text {
padding-right: 55%;
}
}
/*==============================
Section
==============================*/
.section {
padding: 50px 0;
position: relative;
}
.section__title-wrap {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
}
.section__title {
color: #fff;
font-weight: 400;
font-size: 30px;
line-height: 42px;
margin-bottom: 0;
}
.section__title b {
font-weight: 600;
}
.section__title--head {
font-size: 32px;
}
.section__title--mt {
margin-top: 50px;
}
.section__text {
color: #c0c0c0;
font-size: 16px;
line-height: 26px;
margin-top: 15px;
margin-bottom: 0;
}
.section__text b {
font-weight: 600;
color: #fff;
}
.section__text a {
color: #f9ab00;
}
.section__text a:hover {
color: #f9ab00;
text-decoration: underline;
}
.section__text:first-child {
margin-top: 0;
}
.section__list ol {
padding-left: 0;
list-style: none;
counter-reset: li;
margin-bottom: 0;
}
.section__list ol ol {
padding-left: 15px;
margin-top: 10px;
}
.section__list ol ol ol {
margin-top: 10px;
margin-bottom: 10px;
}
.section__list ol ol ol li {
margin-top: 5px;
}
.section__list ol h4 {
font-size: 16px;
font-weight: 600;
color: #fff;
display: inline-block;
margin-bottom: 0;
margin-top: 20px;
}
.section__list ol li {
font-size: 16px;
line-height: 26px;
color: #c0c0c0;
position: relative;
}
.section__list ol li b {
font-weight: 600;
color: #fff;
}
.section__list ol li a {
color: #f9ab00;
}
.section__list ol li a:hover {
color: #f9ab00;
text-decoration: underline;
}
.section__list ol li:last-child {
margin-bottom: 0;
}
.section__list ol li:before {
counter-increment: li;
content: counters(li, ".") ". ";
}
.section__view {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
min-width: 70px;
padding: 0 15px;
height: 36px;
color: #fff;
border-radius: 8px;
background-color: #222028;
font-size: 14px;
margin-top: 20px;
text-transform: uppercase;
}
.section__view:hover {
color: #ffc700;
}
.section__carousel {
margin-top: 24px;
}
.section__wrap {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
}
.section__more {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 46px;
width: 160px;
border-radius: 8px;
background-color: transparent;
font-size: 14px;
color: #fff;
text-transform: uppercase;
border: 2px solid #00000063;
margin: 50px auto 0;
}
.section__more:hover {
color: #fff;
background-color: rgba(249,171,0,0.05);
}
.section__item-filter {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
width: 100%;
}
.section__item-select {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
width: auto;
margin-top: 15px;
margin-right: 15px;
padding: 0 20px;
border-radius: 8px;
border: none;
background: #222028;
}
.section__item-select:focus {
box-shadow: none;
}
.section__item-select:last-child {
margin-right: 0;
}
.section__item-select .ss-single {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
height: 40px;
padding: 0;
margin: 0 !important;
color: #fff;
font-size: 14px;
text-transform: uppercase;
}
.section__item-select .ss-arrow {
width: 8px;
height: 8px;
margin: 1px 0 0 6px;
}
.section__item-select .ss-arrow path {
stroke: #fff;
}
.section__item-select .ss-search {
padding: 0;
margin-bottom: 15px;
font-size: 16px;
color: #c0c0c0;
width: 100%;
}
.section__item-select .ss-search:last-child {
margin-bottom: 0;
}
.section__item-select .ss-search input {
padding: 0;
background-color: transparent;
color: #fff;
font-size: 16px;
border-radius: 0;
border: none;
border-bottom: 1px solid rgba(255,255,255,0.1);
height: 40px;
}
.section__item-select .ss-search input:focus {
box-shadow: none;
}
.section__item-select .ss-search input::placeholder {
color: #c0c0c0;
}
.section__item-select .ss-list {
width: 100%;
}
.section__item-select .ss-list .ss-option {
font-size: 16px;
color: #fff;
line-height: 38px;
padding: 0;
transition: 0.4s ease;
}
.section__item-select .ss-list .ss-option:hover {
background-color: transparent;
color: #f9ab00;
}
.section__item-select .ss-list .ss-option.ss-selected {
background-color: transparent !important;
color: #f9ab00 !important;
}
.section__item-select.ss-content {
flex-direction: column;
align-items: flex-start;
border: none;
border-radius: 8px;
min-width: 130px;
padding: 15px 20px;
background: #222028;
box-shadow: none;
}
.section__item-select.ss-open-below,
.section__item-select.ss-open-above {
border-radius: 8px;
}
.section__details-bg {
position: absolute;
display: block;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: #1a191f;
z-index: 1;
opacity: 0.2;
pointer-events: none;
}
.section__details-bg:after {
content: '';
z-index: 2;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
background: linear-gradient(0deg, #1a191f 0%, #1a191f 25%, rgba(26,25,31,0) 100%);
}
.section__roadmap {
display: block;
position: relative;
margin-top: 24px;
width: 100%;
background-color: #222028;
border-radius: 8px;
padding: 30px 20px;
}
.section__roadmap:before {
content: '';
position: absolute;
display: block;
height: 4px;
top: 82px;
right: 20px;
left: 20px;
border-radius: 4px;
background: #f9ab00;
}
.section--catalog {
padding: 0 0 50px;
}
.section--first {
margin-top: 70px;
border-bottom: 1px solid #222028;
}
.section--details {
margin-top: 70px;
border-bottom: 1px solid #222028;
}
.section--details .container {
position: relative;
z-index: 4;
}
.section--border {
border-top: 1px solid #222028;
}
.section--blue {
background-color: #222028;
}
.section--notitle {
padding-top: 26px;
}
.section--pt {
padding-top: 0;
}
@media (min-width: 768px) {
.section {
padding: 70px 0;
}
.section__title-wrap {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.section__title {
font-size: 36px;
line-height: 46px;
}
.section__title--mt {
margin-top: 70px;
}
.section__wrap {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.section__view {
margin-top: 0;
}
.section__view--carousel {
margin-right: 117px;
}
.section__roadmap {
padding: 30px 30px 40px;
}
.section__roadmap:before {
left: 30px;
right: 30px;
top: 87px;
}
.section--catalog {
padding: 0 0 70px;
}
.section--first {
padding: 50px 0;
}
.section--first,
.section--details {
margin-top: 80px;
}
.section--notitle {
padding-top: 46px;
}
.section--pt {
padding-top: 0;
}
}
@media (min-width: 992px) {
.section__title--sidebar {
margin-top: 24px;
}
}
@media (min-width: 1200px) {
.section__title--head {
font-size: 40px;
}
.section__title--mt {
margin-top: 0;
}
.section__roadmap {
padding: 30px;
}
}
/*==============================
Content
==============================*/
.content {
padding-bottom: 50px;
}
.content__head {
background-color: #1a191f;
margin-bottom: 10px;
position: relative;
border-bottom: 1px solid #222028;
padding-top: 25px;
}
.content__title {
color: #fff;
font-weight: 400;
font-size: 30px;
line-height: 100%;
margin-bottom: 15px;
}
.content__tabs {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
overflow: hidden;
border: none;
}
.content__tabs li {
margin-right: 30px;
}
.content__tabs li:last-child {
margin-right: 0;
}
.content__tabs button {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
height: 50px;
color: #fff;
position: relative;
text-transform: uppercase;
font-size: 14px;
}
.content__tabs button:hover {
color: #ffc700;
}
.content__tabs button:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0;
display: block;
background: #00000063;
box-shadow: none;
transition: 0.4s ease;
border-radius: 2px 2px 0 0;
}
.content__tabs button.active {
color: white;
}
.content__tabs button.active:before {
height: 2px;
}
@media (min-width: 768px) {
.content {
padding-bottom: 70px;
}
.content__title {
font-size: 36px;
}
.content__tabs--profile button {
height: 80px;
}
}
@media (min-width: 1200px) {
.content__tabs li {
margin-right: 35px;
}
.content__tabs li:last-child {
margin-right: 0;
}
}
@media (min-width: 1400px) {
.content__tabs li {
margin-right: 40px;
}
.content__tabs li:last-child {
margin-right: 0;
}
}
/*==============================
Breadcrumbs
==============================*/
.breadcrumbs {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
margin-top: 15px;
}
.breadcrumbs__item {
font-size: 16px;
color: #fff;
transition: 0.4s ease;
position: relative;
margin-right: 36px;
}
.breadcrumbs__item:before {
content: '\ea1c';
position: absolute;
font-family: 'tabler-icons';
color: #c0c0c0;
left: 100%;
top: 0;
font-size: 18px;
line-height: 26px;
margin-left: 9px;
}
.breadcrumbs__item:hover {
color: #fff;
}
.breadcrumbs__item--active {
cursor: default;
margin-right: 0;
}
.breadcrumbs__item--active:before {
display: none;
}
.breadcrumbs__item--active:hover {
color: #fff;
}
.breadcrumbs a {
color: #c0c0c0;
}
.breadcrumbs a:hover {
color: #f9ab00;
}
@media (min-width: 768px) {
.breadcrumbs {
margin-top: 0;
}
}
/*==============================
Item
==============================*/
.item {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
position: relative;
margin-top: 24px;
}
.item--hero,
.item--carousel {
margin-top: 0;
}
.item__cover {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
position: relative;
border-radius: 8px;
overflow: hidden;
background-color: #000;
}
.item__cover img {
width: 100%;
transition: opacity 0.4s;
}
.item__cover:hover img {
opacity: 0.5;
}
.item__cover:hover .item__play {
opacity: 1;
transform: scale(1);
}
.item__play {
position: absolute;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
background-color: rgba(255,255,255,0.2);
border-radius: 50%;
top: 50%;
left: 50%;
margin: -30px 0 0 -30px;
z-index: 3;
font-size: 24px;
color: #00000063;
transition: 0.4s ease;
transform: scale(0.9);
transition-property: opacity, background-color, color, border-color, transform;
opacity: 0;
border: 6px solid rgba(255,255,255,0.15);
}
.item__play i {
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #fff;
}
.item__play:hover {
border-color: rgba(249,171,0,0.5);
color: #00000063;
}
.item__content {
position: relative;
display: block;
margin-top: 10px;
width: 100%;
}
.item__title {
font-size: 18px;
line-height: 30px;
font-weight: 400;
color: #fff;
margin: 0;
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
word-wrap: break-word;
transition: 0.4s ease;
}
.item__title a {
color: #fff;
}
.item__title a:hover {
color: #f9ab00;
}
.item__title:hover {
color: #f9ab00;
}
.item__category {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: start;
flex-wrap: wrap;
}
.item__category a {
font-size: 14px;
position: relative;
color: white;
margin-right: 10px;
}
.item__category a:after {
content: ',';
position: absolute;
display: block;
left: 100%;
top: 0;
color: #f9ab00;
}
.item__category a:last-child {
margin-right: 0;
}
.item__category a:last-child:after {
display: none;
}
.item__category a:hover {
text-decoration: underline;
}
.item__rate {
font-size: 14px;
font-weight: 600;
color: #fff;
position: absolute;
z-index: 3;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 36px;
height: 36px;
top: 15px;
left: 15px;
background-color: rgba(26,25,31,0.6);
border: 2px solid transparent;
border-radius: 50%;
}
.item__rate--green {
border-color: #29b474;
}
.item__rate--yellow {
border-color: #ffc312;
}
.item__rate--red {
border-color: #eb5757;
}
.item__favorite {
position: absolute;
z-index: 3;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 36px;
height: 36px;
top: 15px;
right: 15px;
background-color: #1a191f;
border-radius: 8px;
font-size: 18px;
color: #fff;
}
.item__favorite:hover {
color: #f9ab00;
}
.item__favorite--active {
color: #f9ab00;
}
.item__favorite--active:hover {
color: #eb5757;
}
.item__meta {
display: block;
font-size: 16px;
line-height: 26px;
color: #fff;
}
.item__meta span {
color: #fff;
margin-right: 10px;
}
.item__meta li {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: start;
flex-wrap: wrap;
width: 100%;
}
.item__meta li:last-child {
margin-bottom: 0;
}
.item__meta a {
font-size: 16px;
position: relative;
color: white;
margin-right: 8px;
}
.item__meta a:after {
content: ',';
position: absolute;
display: block;
left: 100%;
top: 0;
color: #f9ab00;
}
.item__meta a:last-child {
margin-right: 0;
}
.item__meta a:last-child:after {
display: none;
}
.item__meta a:hover {
text-decoration: underline;
}
.item__description {
display: block;
position: relative;
margin-top: 24px;
max-height: 200px;
overflow: hidden;
border-radius: 8px;
background-color: #222028;
}
.item__description p {
padding: 15px 20px 0;
font-size: 16px;
line-height: 26px;
color: #fff;
margin-bottom: 0;
}
.item__description p:last-child {
padding-bottom: 15px;
}
.item--details {
display: block;
}
.main-header__cart{
color:white;
}
.item--details .item__cover {
max-width: 250px;
}
.item--details .item__cover:hover img {
opacity: 1;
}
.item--details .item__cover:hover:before {
opacity: 0;
}
.item--details .item__content {
margin-top: 20px;
}
@media (min-width: 768px) {
.item--hero .item__title {
font-size: 20px;
}
.item--hero .item__rate {
top: 20px;
left: 20px;
}
.item--hero .item__favorite {
top: 20px;
right: 20px;
}
.item--details .item__cover {
max-width: 100%;
}
.item--details .item__content {
margin-top: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
width: 100%;
height: 100%;
}
.item--details .item__description {
max-height: 175px;
}
}
@media (min-width: 992px) {
.item--details .item__description {
max-height: 200px;
}
}
@media (min-width: 1200px) {
.item--hero .item__title {
font-size: 22px;
}
.item--hero .item__play {
width: 70px;
height: 70px;
font-size: 28px;
margin: -35px 0 0 -35px;
}
.item--hero .item__category a {
font-size: 16px;
}
.item--details {
margin-bottom: 0;
}
.item--details .item__description {
max-height: 140px;
}
.item__cover:hover .item__favorite {
opacity: 1;
transform: scale(1);
}
.item__favorite {
transition: 0.4s ease;
transform: scale(0.9);
transition-property: opacity, background-color, color, border-color, transform;
opacity: 0;
}
.item__favorite--static {
opacity: 1;
transform: scale(1);
}
.item__favorite--active {
opacity: 1;
transform: scale(1);
}
}
@media (min-width: 1400px) {
.item--details .item__description {
max-height: 160px;
}
}
/*==============================
Filter
==============================*/
.filter {
position: relative;
width: 100%;
background-color: #1a191f;
margin-bottom: 10px;
border-bottom: 1px solid #222028;
}
.filter--fixed {
position: sticky;
top: 0;
z-index: 102;
}
.filter--hidden {
z-index: 90;
}
.filter__content {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 20px 0;
}
.filter__menu {
display: inline-flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
height: 30px;
font-size: 16px;
color: #fff;
}
.filter__menu i {
font-size: 20px;
margin-right: 4px;
}
.filter__amount {
font-size: 14px;
font-weight: 400;
color: #c0c0c0;
line-height: 30px;
}
.filter__items {
display: none;
}
.filter__select {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
width: auto;
min-width: 120px;
margin-right: 20px;
padding: 0 20px;
border-radius: 8px;
border: none;
background: #222028;
}
.filter__select:focus {
box-shadow: none;
}
.filter__select:last-child {
margin-right: 0;
}
.filter__select .ss-single {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
height: 40px;
padding: 0;
margin: 0 !important;
color: #fff;
font-size: 16px;
}
.filter__select .ss-arrow {
width: 8px;
height: 8px;
margin: 3px 0 0 6px;
}
.filter__select .ss-arrow path {
stroke: #fff;
}
.filter__select .ss-search {
padding: 0;
margin-bottom: 15px;
font-size: 16px;
color: #c0c0c0;
width: 100%;
}
.filter__select .ss-search:last-child {
margin-bottom: 0;
}
.filter__select .ss-search input {
padding: 0;
background-color: transparent;
color: #fff;
font-size: 16px;
border-radius: 0;
border: none;
border-bottom: 1px solid rgba(255,255,255,0.1);
height: 40px;
}
.filter__select .ss-search input:focus {
box-shadow: none;
}
.filter__select .ss-search input::placeholder {
color: #c0c0c0;
}
.filter__select .ss-list {
width: 100%;
}
.filter__select .ss-list .ss-option {
font-size: 16px;
color: #fff;
line-height: 38px;
padding: 0;
transition: 0.4s ease;
}
.filter__select .ss-list .ss-option:hover {
background-color: transparent;
color: #f9ab00;
}
.filter__select .ss-list .ss-option.ss-selected {
background-color: transparent !important;
color: #f9ab00 !important;
}
.filter__select.ss-content {
flex-direction: column;
align-items: flex-start;
border: none;
border-radius: 8px;
min-width: 160px;
padding: 15px 20px;
background: #222028;
box-shadow: none;
top: 209px !important;
}
.filter__select.ss-open-below,
.filter__select.ss-open-above {
border-radius: 8px;
}
.filter__btn {
display: none;
}
@media (min-width: 768px) {
.filter__content {
padding: 0;
height: 80px;
}
.filter__menu {
display: none;
}
.filter__amount {
display: none;
}
.filter__items {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.filter__btn {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 40px;
width: 100px;
border-radius: 8px;
background-color: transparent;
font-size: 14px;
color: #fff;
text-transform: uppercase;
border: 2px solid #00000063;
}
.filter__btn:hover {
color: #fff;
background-color: rgba(249,171,0,0.05);
}
}
@media (min-width: 992px) {
.filter__btn {
width: 120px;
}
}
@media (min-width: 1200px) {
.filter__select {
margin-right: 30px;
min-width: 124px;
}
.filter__select:last-child {
margin-right: 0;
}
}
.mfilter {
position: fixed;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
padding: 30px;
z-index: 105;
top: 70px;
bottom: 0;
left: 0;
width: 300px;
background-color: #1a191f;
box-shadow: none;
transition: transform 0.4s ease;
transform: translate3d(-300px, 0, 0);
border-top: 2px solid #f9ab00;
}
.mfilter--active {
transform: translate3d(0, 0, 0);
}
.mfilter__head {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
margin-bottom: 30px;
}
.mfilter__title {
color: #fff;
font-size: 20px;
line-height: 100%;
font-weight: 400;
margin-bottom: 0;
}
.mfilter__close {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
color: #c0c0c0;
font-size: 20px;
width: 20px;
height: 20px;
}
.mfilter__select-wrap {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
}
.mfilter__apply {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 40px;
width: 100%;
border-radius: 8px;
background-color: transparent;
font-size: 14px;
color: #fff;
text-transform: uppercase;
border: 2px solid #00000063;
margin-top: auto;
}
.mfilter__apply:hover {
color: #fff;
background-color: rgba(249,171,0,0.05);
}
@media (min-width: 768px) {
.mfilter {
display: none;
}
}
/*==============================
Paginator
==============================*/
.paginator-mob {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
margin-top: 50px;
}
.paginator-mob--comments {
margin-top: 24px;
margin-bottom: 24px;
}
.paginator-mob__pages {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 36px;
width: auto;
padding: 0 15px;
color: #c0c0c0;
border-radius: 8px;
background-color: #222028;
font-size: 14px;
}
.paginator-mob__nav {
display: inline-flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.paginator-mob__nav li {
margin-right: 15px;
}
.paginator-mob__nav li:first-child a {
padding-left: 10px;
}
.paginator-mob__nav li:first-child a span {
margin-left: 4px;
}
.paginator-mob__nav li:last-child {
margin-right: 0;
}
.paginator-mob__nav li:last-child a {
padding-right: 10px;
}
.paginator-mob__nav li:last-child a span {
margin-right: 4px;
}
.paginator-mob__nav a {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 36px;
width: auto;
padding: 0 15px;
color: #fff;
text-align: center;
border-radius: 8px;
background-color: #222028;
}
.paginator-mob__nav a span {
font-size: 14px;
line-height: 20px;
text-transform: uppercase;
}
.paginator-mob__nav a i {
font-size: 20px;
}
.paginator-mob__nav a:hover {
color: #f9ab00;
}
@media (min-width: 768px) {
.paginator-mob {
display: none;
}
}
.paginator {
display: none;
}
@media (min-width: 768px) {
.paginator {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
margin-top: 50px;
}
.paginator--comments {
margin-top: 30px;
margin-bottom: 30px;
}
.paginator__item {
margin-right: 15px;
}
.paginator__item a,
.paginator__item span {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-size: 16px;
font-weight: 600;
height: 40px;
width: 40px;
color: #fff;
text-align: center;
border-radius: 8px;
background-color: #222028;
border: 1px solid transparent;
}
.paginator__item span {
cursor: default;
}
.paginator__item:last-child {
margin-right: 0;
}
.paginator__item:hover a {
color: #f9ab00;
}
.paginator__item--prev a,
.paginator__item--next a {
font-size: 20px;
}
.paginator__item--active a {
color: #fff;
cursor: default;
border-color: #f9ab00;
}
.paginator__item--active a:hover {
color: #fff;
}
}
/*==============================
Profile
==============================*/
.profile {
background-color: #1a191f;
border-bottom: 1px solid #222028;
margin-bottom: 10px;
}
.profile__content {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
position: relative;
width: 100%;
padding-top: 20px;
}
.profile__user {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
margin-bottom: 15px;
}
.profile__avatar {
display: block;
position: relative;
width: 40px;
overflow: hidden;
border-radius: 8px;
margin-right: 15px;
}
.profile__avatar img {
width: 100%;
}
.profile__meta {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
.profile__meta h3 {
color: #fff;
display: block;
font-size: 16px;
line-height: 20px;
font-weight: 600;
margin-bottom: 0;
}
.profile__meta span {
color: #c0c0c0;
font-size: 14px;
line-height: 20px;
}
.profile__logout {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 40px;
width: 40px;
position: absolute;
right: 0;
top: 20px;
border-radius: 8px;
background-color: transparent;
border: 2px solid #f9ab00;
}
.profile__logout:hover {
background-color: rgba(249,171,0,0.05);
}
.profile__logout span {
display: none;
}
.profile__logout i {
color: #fff;
font-size: 20px;
}
@media (min-width: 768px) {
.profile__content {
flex-direction: row;
justify-content: flex-start;
align-items: center;
padding-top: 0;
height: 80px;
}
.profile__user {
margin-bottom: 0;
margin-right: 60px;
}
.profile__logout {
margin-left: auto;
margin-top: 0;
width: 120px;
position: relative;
top: auto;
right: auto;
}
.profile__logout i {
display: none;
}
.profile__logout span {
display: block;
font-size: 14px;
color: #fff;
text-transform: uppercase;
}
}
@media (min-width: 1200px) {
.profile__user {
margin-right: 80px;
}
}
@media (min-width: 1400px) {
.profile__user {
margin-right: 100px;
}
}
/*==============================
Stats
==============================*/
.stats {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
position: relative;
margin-top: 24px;
padding: 20px;
border-radius: 8px;
background-color: #222028;
width: 100%;
}
.stats span {
font-size: 20px;
line-height: 30px;
font-weight: 400;
color: #fff;
margin-bottom: 10px;
}
.stats p {
font-size: 18px;
line-height: 26px;
color: #c0c0c0;
margin-bottom: 0;
}
.stats p a {
color: #fff;
}
.stats p a:hover {
color: #f9ab00;
}
.stats i {
font-size: 42px;
position: absolute;
bottom: 20px;
right: 20px;
color: #f9ab00;
line-height: 100%;
}
@media (min-width: 768px) {
.stats {
padding: 20px 30px;
}
.stats i {
right: 30px;
}
}
/*==============================
Dashbox
==============================*/
.dashbox {
background-color: #222028;
margin-top: 24px;
border-radius: 8px;
overflow: hidden;
}
.dashbox__title {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 20px;
border-bottom: 1px solid #1a191f;
}
.dashbox__title h3 {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
color: #fff;
font-weight: 400;
font-size: 20px;
line-height: 30px;
margin-bottom: 0;
}
.dashbox__title h3 i {
font-size: 20px;
margin-right: 10px;
color: #ffc312;
line-height: 30px;
}
.dashbox__wrap {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.dashbox__more {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: auto;
height: 30px;
background-color: #1a191f;
padding: 0 10px;
font-size: 14px;
margin-left: 15px;
color: #fff;
border-radius: 8px;
}
.dashbox__more:hover {
color: #f9ab00;
}
.dashbox__refresh {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
color: #fff;
font-size: 20px;
}
.dashbox__refresh:hover {
color: #f9ab00;
}
.dashbox__table-wrap {
position: relative;
display: block;
width: 100%;
padding: 20px 0;
}
.dashbox__table {
width: 100%;
min-width: 500px;
border-spacing: 0;
}
.dashbox__table thead {
border-bottom: 1px solid #1a191f;
}
.dashbox__table thead th {
font-size: 12px;
color: #c0c0c0;
font-weight: 400;
padding: 0 10px 15px 0;
line-height: 100%;
margin-bottom: 0;
border: none;
}
.dashbox__table thead th:first-child {
padding-left: 20px;
}
.dashbox__table tbody tr {
border-bottom: none;
background-color: transparent;
}
.dashbox__table tbody td {
padding: 0;
background-color: transparent;
border: 0px solid transparent;
}
.dashbox__table tbody td:first-child {
padding-left: 20px;
}
.dashbox__table tbody td:last-child .dashbox__table-text {
padding-right: 0;
}
.dashbox__table-text {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
font-size: 16px;
color: #fff;
font-weight: 400;
line-height: 30px;
padding: 10px 15px 0 0;
background-color: transparent;
white-space: nowrap;
}
.dashbox__table-text a {
color: #fff;
}
.dashbox__table-text a:hover {
color: #f9ab00;
}
.dashbox__table-text i {
font-size: 14px;
margin-right: 6px;
color: #ffc312;
line-height: 24px;
margin-top: 1px;
}
.dashbox__table-text--rate {
font-weight: 600;
font-size: 16px;
}
.dashbox__table-text--rate i {
font-size: 16px;
font-weight: normal;
}
.dashbox__table-text--red {
color: #eb5757;
}
.dashbox__table-text--green {
color: #29b474;
}
.dashbox__table-text--grey {
color: #c0c0c0;
}
@media (min-width: 768px) {
.dashbox {
margin-top: 30px;
}
.dashbox__title {
padding: 20px 30px;
}
.dashbox__table thead th:first-child {
padding-left: 30px;
}
.dashbox__table tbody td:first-child {
padding-left: 30px;
}
}
/*==============================
Plan
==============================*/
.plan {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
padding: 20px;
background-color: #222028;
border-radius: 8px;
margin-top: 24px;
position: relative;
overflow: hidden;
}
.plan:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
display: block;
background-color: #f9ab00;
}
.plan--orange:before {
background-color: #f06629;
}
.plan--orange .plan__price {
color: #f06629;
}
.plan--orange .plan__btn {
border-color: #f06629;
}
.plan--orange .plan__btn:hover {
background-color: rgba(240,102,41,0.05);
}
.plan--red:before {
background-color: #eb5757;
}
.plan--red .plan__price {
color: #eb5757;
}
.plan--red .plan__btn {
border-color: #eb5757;
}
.plan--red .plan__btn:hover {
background-color: rgba(235,87,87,0.05);
}
.plan--active .plan__btn {
pointer-events: none;
opacity: 0.7;
}
.plan__title {
font-size: 24px;
line-height: 30px;
font-weight: 400;
color: #fff;
margin-bottom: 0;
}
.plan__price {
font-size: 30px;
font-weight: 600;
line-height: 100%;
color: #f9ab00;
position: absolute;
top: 20px;
right: 20px;
}
.plan__price sub {
font-size: 14px;
bottom: 1px;
font-weight: 600;
}
.plan__list {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
margin-top: 20px;
}
.plan__item {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
width: 100%;
font-size: 16px;
color: #fff;
margin-bottom: 10px;
}
.plan__item i {
font-size: 20px;
margin-right: 10px;
line-height: 100%;
color: #29b474;
}
.plan__item--none {
color: #c0c0c0;
}
.plan__item--none i {
color: #c0c0c0;
}
.plan__item:last-child {
margin-bottom: 0;
}
.plan__btn {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 46px;
width: 100%;
border-radius: 8px;
background-color: transparent;
font-size: 14px;
color: #fff;
text-transform: uppercase;
border: 2px solid #f9ab00;
margin-top: 20px;
}
.plan__btn:hover {
color: #fff;
background-color: rgba(249,171,0,0.05);
}
@media (min-width: 768px) {
.plan {
padding: 30px;
}
.plan__price {
top: 30px;
right: 30px;
}
.plan__list {
margin-top: 30px;
}
.plan__btn {
margin-top: 30px;
}
}
/*==============================
Accordion
==============================*/
.accordion__card {
background-color: #222028;
border-radius: 8px;
margin-top: 24px;
border: none;
}
.accordion__card button {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
position: relative;
width: 100%;
min-height: 80px;
padding: 20px 80px 20px 20px;
color: #fff;
font-size: 18px;
line-height: 30px;
font-weight: 400;
text-align: left;
}
.accordion__card button span {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
border-radius: 8px;
background: #1a191f;
position: absolute;
right: 20px;
top: 20px;
overflow: hidden;
}
.accordion__card button span svg {
width: 20px;
height: auto;
fill: #fff;
position: absolute;
z-index: 2;
transition: 0.4s ease;
transition-property: transform, fill;
}
.accordion__card button span svg:last-child {
transform: rotate(-90deg);
}
.accordion__card button:hover span svg {
fill: #f9ab00;
}
.accordion__card button[aria-expanded="true"] span svg {
fill: #f9ab00;
}
.accordion__card button[aria-expanded="true"] span svg:last-child {
transform: rotate(0deg);
}
.accordion__card p {
padding: 0 20px 20px;
color: #c0c0c0;
font-size: 16px;
line-height: 26px;
margin-bottom: 0;
}
.accordion__card p b,
.accordion__card p strong {
font-weight: 600;
}
.accordion__card p:first-child {
border-top: 1px solid #1a191f;
padding: 20px;
}
@media (min-width: 768px) {
.accordion__card button {
padding: 20px 90px 20px 30px;
}
.accordion__card button span {
right: 30px;
}
.accordion__card p {
padding: 0 30px 20px;
}
.accordion__card p:first-child {
padding: 20px 30px;
}
}
/*==============================
Feature
==============================*/
.feature {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
position: relative;
margin-top: 24px;
padding-left: 60px;
padding-right: 15px;
}
.feature i {
display: block;
position: absolute;
top: 0;
left: 0;
font-size: 42px;
color: #f9ab00;
}
.feature__title {
color: #fff;
display: block;
font-size: 20px;
font-weight: 400;
line-height: 30px;
margin-bottom: 15px;
}
.feature__text {
display: block;
color: #c0c0c0;
font-size: 16px;
line-height: 26px;
width: 100%;
margin-bottom: 0;
}
.feature__text a {
color: #f9ab00;
}
.feature__text a:hover {
color: #f9ab00;
text-decoration: underline;
}
@media (min-width: 768px) {
.feature {
margin-top: 34px;
}
}
@media (min-width: 1200px) {
.feature {
padding-right: 40px;
}
}
/*==============================
How
==============================*/
.how {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
padding: 20px;
background-color: #222028;
border-radius: 8px;
margin-top: 24px;
position: relative;
}
.how__number {
font-size: 46px;
line-height: 100%;
font-weight: 600;
margin-bottom: 15px;
display: block;
color: #f9ab00;
width: 100%;
}
.how__title {
font-size: 20px;
line-height: 30px;
font-weight: 400;
color: #fff;
margin-bottom: 15px;
}
.how__text {
color: #c0c0c0;
font-size: 16px;
line-height: 26px;
width: 100%;
margin-bottom: 0;
}
.how__text b {
font-weight: 600;
}
.how__text a {
color: #f9ab00;
}
.how__text a:hover {
color: #f9ab00;
text-decoration: underline;
}
@media (min-width: 768px) {
.how {
padding: 30px;
}
}
/*==============================
Roadmap
==============================*/
.roadmap {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
position: relative;
}
.roadmap:before,
.roadmap:after {
content: '';
position: absolute;
display: block;
border-radius: 50%;
}
.roadmap:before {
width: 24px;
height: 24px;
left: 0;
top: 42px;
background-color: #fff;
opacity: 0.12;
z-index: 1;
}
.roadmap:after {
width: 10px;
height: 10px;
left: 7px;
top: 49px;
background-color: #fff;
z-index: 2;
}
.roadmap--active:before,
.roadmap--active:after {
background: #f9ab00;
}
.roadmap--active:after {
width: 16px;
height: 16px;
left: 4px;
top: 46px;
}
.roadmap--active .roadmap__list li:before {
background: #f9ab00;
}
.roadmap__title {
font-size: 20px;
line-height: 30px;
color: #fff;
font-weight: 400;
display: block;
margin-bottom: 50px;
margin-left: 10px;
}
.roadmap__list {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
width: calc(100% - 10px);
margin-bottom: 0;
margin-top: 0;
padding: 0;
margin-left: 10px;
}
.roadmap__list li {
color: #c0c0c0;
font-size: 16px;
line-height: 26px;
margin-bottom: 12px;
padding-left: 16px;
position: relative;
}
.roadmap__list li:last-child {
margin-bottom: 0;
}
.roadmap__list li:before {
content: '';
position: absolute;
width: 4px;
height: 4px;
background-color: #fff;
opacity: 1;
top: 11px;
left: 0;
border-radius: 50%;
}
@media (min-width: 768px) {
.roadmap:before {
top: 47px;
}
.roadmap:after {
top: 54px;
}
.roadmap--active:before {
top: 47px;
}
.roadmap--active:after {
top: 51px;
}
.roadmap__title {
margin-bottom: 60px;
}
.roadmap__list li {
margin-bottom: 15px;
}
.roadmap__list li:last-child {
margin-bottom: 0;
}
}
/*==============================
Partners
==============================*/
.partner {
display: block;
width: 100%;
margin-top: 30px;
}
.partner__img {
max-width: 100%;
margin: 0 auto;
display: block;
transition: opacity 0.4s ease;
opacity: 0.7;
}
.partner__img:hover {
opacity: 1;
}
@media (min-width: 768px) {
.partner {
margin-top: 36px;
}
}
/*==============================
Contacts
==============================*/
.contacts__list {
margin-top: 20px;
}
.contacts__list li {
margin-bottom: 10px;
}
.contacts__list li:last-child {
margin-bottom: 0;
}
.contacts__list a {
font-size: 20px;
line-height: 30px;
font-weight: 400;
color: #fff;
}
.contacts__list a:hover {
color: #ffc700;
}
.contacts__social {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
width: 100%;
margin-top: 20px;
}
.contacts__social a {
margin-right: 20px;
font-size: 24px;
color: #fff;
}
.contacts__social a:last-child {
margin-left: 0;
}
.contacts__social a:hover {
color: #ffc700;
}
/*==============================
Comments
==============================*/
.comments {
margin-top: 24px;
margin-bottom: 50px;
}
.comments__autor {
display: block;
position: relative;
padding-left: 55px;
margin-bottom: 15px;
}
.comments__avatar {
position: absolute;
top: 0;
left: 0;
width: 40px;
border-radius: 8px;
}
.comments__name {
display: block;
font-size: 16px;
color: #fff;
line-height: 20px;
font-weight: 400;
}
.comments__time {
display: block;
font-size: 12px;
color: #c0c0c0;
line-height: 20px;
font-weight: 400;
}
.comments__text {
display: block;
margin: 0;
color: #fff;
font-size: 16px;
line-height: 26px;
background-color: #1a191f;
padding: 20px;
position: relative;
border-top: 1px solid #222028;
border-left: 1px solid #222028;
border-right: 1px solid #222028;
border-radius: 8px 8px 0 0;
}
.comments__text span {
display: block;
background-color: #222028;
margin-bottom: 20px;
padding: 20px;
position: relative;
min-height: 80px;
border-radius: 8px;
color: #fff;
}
.comments__text span:before {
content: '\efbe';
position: absolute;
display: block;
font-family: "tabler-icons";
color: rgba(249,171,0,0.15);
font-size: 60px;
top: 10px;
left: 15px;
line-height: 100%;
z-index: 1;
pointer-events: none;
}
.comments__item {
margin-bottom: 24px;
display: block;
}
.comments__item--answer,
.comments__item--quote {
margin-left: 25px;
}
.comments__actions {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
background-color: #1a191f;
padding: 15px 20px;
border: 1px solid #222028;
position: relative;
border-radius: 0 0 8px 8px;
}
.comments__actions button {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
font-size: 12px;
color: #c0c0c0;
margin-right: 20px;
height: 22px;
text-transform: uppercase;
font-weight: 400;
}
.comments__actions button i {
margin-right: 5px;
font-size: 14px;
}
.comments__actions button:hover {
color: #f9ab00;
}
.comments__actions button:last-child {
margin-right: 0;
}
.comments__rate {
display: inline-flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
position: absolute;
left: 20px;
top: 50%;
margin-top: -15px;
}
.comments__rate button {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
color: #c0c0c0;
font-size: 14px;
margin-right: 25px;
position: relative;
height: 30px;
}
.comments__rate button i {
font-size: 18px;
opacity: 0.6;
transition: 0.4s ease;
}
.comments__rate button:last-child {
margin-right: 0;
}
.comments__rate button:last-child i {
margin-left: 6px;
color: #eb5757;
margin-top: 2px;
}
.comments__rate button:first-child i {
margin-right: 6px;
color: #29b474;
}
.comments__rate button:first-child:before {
content: '';
position: absolute;
display: block;
left: 100%;
margin-left: 12px;
width: 1px;
height: 15px;
background-color: #222028;
top: 50%;
transform: translateY(-50%);
}
.comments__rate button:hover {
color: #fff;
}
.comments__rate button:hover i {
opacity: 1;
}
@media (min-width: 768px) {
.comments {
margin-bottom: 70px;
}
.comments__text {
padding: 20px 30px;
}
.comments__actions {
padding: 15px 30px;
}
.comments__rate {
left: 30px;
}
.comments__item {
margin-bottom: 30px;
}
.comments__item--answer,
.comments__item--quote {
margin-left: 40px;
}
}
@media (min-width: 992px) {
.comments {
margin-bottom: 0;
padding-right: 30px;
}
}
@media (min-width: 1200px) {
.comments {
padding-right: 50px;
}
}
@media (min-width: 1400px) {
.comments {
padding-right: 60px;
}
}
/*==============================
Reviews
==============================*/
.reviews {
margin-top: 24px;
margin-bottom: 50px;
}
.reviews__autor {
display: block;
position: relative;
padding-left: 55px;
margin-bottom: 15px;
padding-right: 60px;
}
.reviews__avatar {
position: absolute;
top: 0;
left: 0;
width: 40px;
border-radius: 8px;
}
.reviews__name {
display: block;
font-size: 16px;
color: #fff;
line-height: 20px;
font-weight: 400;
margin-bottom: 5px;
}
.reviews__time {
display: block;
font-size: 12px;
color: #c0c0c0;
font-weight: 400;
line-height: 20px;
}
.reviews__text {
display: block;
margin: 0;
color: #fff;
font-size: 16px;
line-height: 26px;
background-color: #1a191f;
padding: 20px;
border: 1px solid #222028;
border-radius: 8px;
}
.reviews__item {
margin-bottom: 24px;
display: block;
}
.reviews__rating {
font-size: 14px;
font-weight: 600;
color: #fff;
position: absolute;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
right: 0;
top: 0;
width: 36px;
height: 36px;
background-color: rgba(26,25,31,0.5);
border: 2px solid transparent;
border-radius: 50%;
margin-top: 2px;
}
.reviews__rating--green {
border-color: #29b474;
}
.reviews__rating--red {
border-color: #eb5757;
}
.reviews__rating--yellow {
border-color: #ffc312;
}
@media (min-width: 400px) {
.reviews__name {
margin-bottom: 0;
}
}
@media (min-width: 768px) {
.reviews {
margin-bottom: 70px;
}
.reviews__text {
padding: 20px 30px;
}
.reviews__item {
margin-bottom: 30px;
}
}
@media (min-width: 992px) {
.reviews {
margin-bottom: 0;
padding-right: 30px;
}
}
@media (min-width: 1200px) {
.reviews {
padding-right: 50px;
}
}
@media (min-width: 1400px) {
.reviews {
padding-right: 60px;
}
}
/*==============================
Gallery
==============================*/
.gallery {
margin-top: 24px;
margin-bottom: 26px;
}
.gallery figure {
margin: 0 0 24px;
}
.gallery figure a {
display: block;
position: relative;
overflow: hidden;
transition: 0.4s ease;
}
.gallery figure img {
width: 100%;
border-radius: 8px;
}
.gallery figcaption {
display: none;
}
.gallery--full {
margin-bottom: 0;
}
@media (min-width: 768px) {
.gallery {
margin-bottom: 46px;
}
.gallery--full {
margin-bottom: 0;
}
}
@media (min-width: 992px) {
.gallery {
padding-right: 30px;
}
.gallery--full {
padding-right: 0;
}
}
@media (min-width: 1200px) {
.gallery {
padding-right: 50px;
}
.gallery--full {
padding-right: 0;
}
}
@media (min-width: 1400px) {
.gallery {
padding-right: 60px;
}
.gallery--full {
padding-right: 0;
}
}
/*==============================
Footer
==============================*/
.footer {
background-color: #1a191f;
border-top: 1px solid #222028;
}
.footer__content {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
padding: 50px 0 30px;
position: relative;
}
.footer__logo {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
order: 1;
}
.footer__logo img {
width: auto;
height: 20px;
display: block;
}
.footer__nav {
order: 2;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
margin-top: 30px;
}
.footer__nav a {
font-size: 14px;
color: #fff;
margin-right: 20px;
}
.footer__nav a:last-child {
margin-right: 0;
}
.footer__nav a:hover {
color: #f9ab00;
}
.footer__copyright {
display: inline-block;
order: 3;
margin-top: 50px;
font-size: 12px;
line-height: 16px;
color: #c0c0c0;
}
.footer__copyright a {
color: #f9ab00;
}
.footer__copyright a:hover {
color: #f9ab00;
text-decoration: underline;
}
.footer__back {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
border: 2px solid #00000063;
color: #fff;
position: absolute;
right: 0;
bottom: 30px;
border-radius: 8px;
font-size: 20px;
}
.footer__back:hover {
color: #ffc700;
}
@media (min-width: 768px) {
.footer__logo img {
height: 22px;
}
.footer__content {
flex-direction: row;
align-items: center;
padding: 0;
height: 80px;
}
.footer__nav {
order: 3;
margin-top: 0;
margin-left: auto;
margin-right: 80px;
}
.footer__nav a {
margin-right: 30px;
}
.footer__nav a:last-child {
margin-right: 0;
}
.footer__copyright {
order: 2;
margin-top: 0;
margin-left: 30px;
}
.footer__back {
bottom: 50%;
margin-bottom: -20px;
}
}
@media (min-width: 1200px) {
.footer__copyright {
margin-left: 40px;
}
.footer__nav a {
margin-right: 40px;
}
.footer__nav a:last-child {
margin-right: 0;
}
}
@media (min-width: 1400px) {
.footer__copyright {
margin-left: 50px;
}
.footer__nav {
margin-right: 95px;
}
.footer__nav a {
margin-right: 50px;
}
.footer__nav a:last-child {
margin-right: 0;
}
}
/*==============================
Sign
==============================*/
.sign {
display: block;
position: relative;
}
.sign__content {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
min-height: 100vh;
padding: 40px 0;
}
.sign__form {
background-color: #1a191f;
border: 1px solid #222028;
border-radius: 8px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 30px 20px;
position: relative;
width: 100%;
max-width: 400px;
}
.sign__form--full {
max-width: 100%;
margin-top: 24px;
}
.sign__form--comments {
max-width: 100%;
justify-content: flex-start;
align-items: flex-start;
}
.sign__logo {
display: block;
margin-bottom: 30px;
}
.sign__logo a {
max-width: 100%;
width: auto;
}
.sign__logo img {
width: auto;
height: 24px;
}
.sign__title {
font-size: 20px;
font-weight: 400;
color: #fff;
margin-bottom: 20px;
}
.sign__label {
font-size: 14px;
line-height: 100%;
color: #c0c0c0;
width: 100%;
margin-bottom: 15px;
}
.sign__input {
width: 100%;
background-color: #222028;
border: 2px solid transparent;
height: 46px;
position: relative;
color: #fff;
font-size: 16px;
width: 100%;
border-radius: 8px;
padding: 0 20px;
}
.sign__input:focus {
border-color: #ffc700;
}
.sign__textarea {
border: 2px solid transparent;
height: 150px;
position: relative;
color: #fff;
font-size: 16px;
width: 100%;
padding: 15px 20px;
resize: none;
background-color: #222028;
border-radius: 8px;
}
.sign__textarea:focus {
border-color: #ffc700;
}
.sign__select {
background: url("../img/angle-down.svg") no-repeat center right 20px #222028;
background-size: 20px auto;
border: 2px solid transparent;
border-radius: 8px;
height: 46px;
position: relative;
color: #fff;
font-size: 16px;
width: 100%;
padding: 0 20px;
cursor: pointer;
}
.sign__select:focus {
border-color: #f9ab00;
}
.sign__group {
position: relative;
margin-bottom: 20px;
width: 100%;
}
.sign__group--checkbox {
width: 100%;
text-align: left;
}
.sign__group--checkbox input:not(:checked),
.sign__group--checkbox input:checked {
position: absolute;
left: -9999px;
}
.sign__group--checkbox input:not(:checked) + label,
.sign__group--checkbox input:checked + label {
font-size: 14px;
color: #fff;
font-weight: normal;
position: relative;
cursor: pointer;
padding-left: 34px;
line-height: 24px;
margin: 0;
}
.sign__group--checkbox input:not(:checked) + label a,
.sign__group--checkbox input:checked + label a {
color: #f9ab00;
}
.sign__group--checkbox input:not(:checked) + label a:hover,
.sign__group--checkbox input:checked + label a:hover {
color: #f9ab00;
text-decoration: underline;
}
.sign__group--checkbox input:not(:checked) + label:before,
.sign__group--checkbox input:checked + label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 24px;
height: 24px;
background-color: #222028;
border-radius: 8px;
}
.sign__group--checkbox input:not(:checked) + label:after,
.sign__group--checkbox input:checked + label:after {
font-family: 'tabler-icons';
content: '\ea5e';
position: absolute;
left: 0;
top: 0;
width: 24px;
height: 24px;
font-size: 20px;
line-height: 24px;
text-align: center;
transition: 0.4s ease;
color: #f9ab00;
}
.sign__group--checkbox input:not(:checked) + label:after {
opacity: 0;
transform: scale(0);
}
.sign__group--checkbox input:checked + label:after {
opacity: 1;
transform: scale(1);
}
.sign__group--checkbox label::-moz-selection {
background: transparent;
color: #fff;
}
.sign__group--checkbox label::selection {
background: transparent;
color: #fff;
}
.sign__radio {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
}
.sign__radio li {
position: relative;
overflow: hidden;
margin-bottom: 15px;
}
.sign__radio li:last-child {
margin-bottom: 0;
}
.sign__radio input:not(:checked),
.sign__radio input:checked {
position: absolute;
left: -9999px;
}
.sign__radio label {
display: block;
margin: 0;
position: relative;
font-weight: 400;
cursor: pointer;
font-size: 16px;
color: #c0c0c0;
line-height: 20px;
padding-left: 30px;
transition: color 0.4s ease;
}
.sign__radio label:before {
content: '';
display: block;
position: absolute;
width: 20px;
height: 20px;
border: 4px solid #222028;
background-color: transparent;
border-radius: 50%;
left: 0;
top: 0;
transition: border-color 0.4s ease;
}
.sign__radio label:hover {
color: #fff;
}
.sign__radio input:checked + label {
color: #fff;
}
.sign__radio input:checked + label:before {
border-color: #f9ab00;
}
.sign__gallery {
position: relative;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
width: 100%;
height: 46px;
overflow: hidden;
border-radius: 8px;
}
.sign__gallery input {
position: absolute;
left: -9999px;
opacity: 0;
z-index: 1;
}
.sign__gallery label {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
position: relative;
z-index: 2;
height: 46px;
color: #fff;
padding: 0 60px 0 20px;
background-color: #222028;
border: 2px solid transparent;
font-weight: 400;
margin: 0;
width: 100%;
font-size: 16px;
cursor: pointer;
transition: 0.4s ease;
border-radius: 8px;
}
.sign__gallery label:before {
content: '\eb0a';
font-family: "tabler-icons";
pointer-events: none;
position: absolute;
right: 20px;
top: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 46px;
width: 20px;
font-size: 20px;
}
.sign__gallery label:hover {
border-color: #f9ab00;
}
.sign__btn {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 46px;
width: 100%;
border-radius: 8px;
background-color: transparent;
font-size: 14px;
color: #fff;
text-transform: uppercase;
border: 2px solid #00000063;
margin-top: 10px;
}
.sign__btn:hover {
background-color: rgba(249,171,0,0.05);
}
.sign__text {
display: block;
margin-top: 15px;
font-size: 14px;
line-height: 24px;
color: #fff;
}
.sign__text a {
position: relative;
color: #f9ab00;
}
.sign__text a:hover {
color: #f9ab00;
text-decoration: underline;
}
.sign__delimiter {
font-size: 14px;
color: #fff;
line-height: 100%;
margin-top: 15px;
}
.sign__social {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
margin-bottom: 15px;
}
.sign__social a {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 15px;
height: 40px;
width: 100%;
border-radius: 8px;
color: #fff;
font-size: 14px;
}
.sign__social a i {
font-size: 20px;
margin-left: 8px;
}
.sign__social a.fb {
background-color: #3b5999;
}
.sign__social a.gl {
background-color: #df4a32;
}
.sign__social a.tw {
background-color: #1da1f2;
}
.sign__social a:hover {
background-color: #fff;
}
.sign__social a:hover.fb {
color: #3b5999;
}
.sign__social a:hover.gl {
color: #df4a32;
}
.sign__social a:hover.tw {
color: #1da1f2;
}
@media (min-width: 768px) {
.sign__form {
padding: 40px 60px;
}
.sign__form--full {
padding: 30px;
}
.sign__form--comments {
padding: 30px;
}
.sign__logo {
margin-bottom: 40px;
}
.sign__btn--small {
width: 140px;
}
}
/*==============================
Page 404
==============================*/
.page-404 {
display: block;
position: relative;
}
.page-404__wrap {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
min-height: 100vh;
padding: 40px 0;
}
.page-404__content {
background-color: #1a191f;
border: 1px solid #222028;
border-radius: 8px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 30px 20px;
position: relative;
width: 100%;
max-width: 400px;
}
.page-404__title {
position: relative;
color: #f9ab00;
line-height: 100%;
font-size: 120px;
margin-bottom: 15px;
font-weight: 600;
}
.page-404__text {
text-align: center;
display: block;
width: 100%;
color: #fff;
font-size: 16px;
line-height: 26px;
margin-bottom: 20px;
}
.page-404__btn {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 46px;
width: 100%;
border-radius: 8px;
background-color: transparent;
font-size: 14px;
color: #fff;
text-transform: uppercase;
border: 2px solid #f9ab00;
margin-top: 10px;
}
.page-404__btn:hover {
color: #fff;
background-color: rgba(249,171,0,0.05);
}
@media (min-width: 768px) {
.page-404__content {
padding: 40px 60px;
}
}
/*==============================
Modal
==============================*/
.modal .modal-content {
margin: 0 auto;
max-width: 420px;
background-color: transparent;
border: none;
border-radius: 8px;
}
.modal__content {
position: relative;
display: block;
margin: 0 auto;
width: 100%;
max-width: 420px;
padding: 30px 20px;
border-radius: 8px;
background: #1a191f;
border: 1px solid #222028;
}
.modal__form {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
}
.modal__title {
font-weight: 400;
color: #fff;
font-size: 24px;
line-height: 100%;
margin-bottom: 30px;
}
.modal__close {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
top: 30px;
right: 20px;
z-index: 1;
color: #c0c0c0;
font-size: 20px;
height: 24px;
}
.modal__close:hover {
color: #eb5757;
}
@media (min-width: 768px) {
.modal__content {
padding: 30px;
}
.modal__close {
top: 30px;
right: 30px;
}
}
.modal-backdrop {
background: rgba(34,32,40,0.9);
}
/*==============================
Splide
==============================*/
.splide--home .splide__arrows,
.splide--content .splide__arrows {
display: block !important;
position: relative;
}
.splide--home .splide__arrow,
.splide--content .splide__arrow {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 36px;
height: 36px;
border: none;
border-radius: 8px;
background-color: #222028;
position: absolute;
top: -64px;
opacity: 1;
font-size: 20px;
color: #fff;
transform: translateY(0);
}
.splide--home .splide__arrow:hover,
.splide--content .splide__arrow:hover {
color: #f9ab00;
}
.splide--home .splide__arrow--prev,
.splide--content .splide__arrow--prev {
right: 46px;
left: auto;
}
.splide--home .splide__arrow--next,
.splide--content .splide__arrow--next {
right: 0;
}
.splide--home .splide__track,
.splide--content .splide__track {
border-radius: 8px 8px 0 0;
}
.splide--content .splide__arrow {
top: -60px;
}
.splide--hero .splide__arrows {
display: none;
}
.splide--hero .splide__pagination {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
position: absolute;
padding: 0 15px;
bottom: 40px;
}
.splide--hero .splide__pagination li {
margin-right: 12px;
}
.splide--hero .splide__pagination li:last-child {
margin-right: 0;
}
.splide--hero .splide__pagination__page {
display: block;
height: 4px;
width: 4px;
border-radius: 4px;
background: #fff;
transition: 0.4s ease;
opacity: 0.25;
margin: 0;
}
.splide--hero .splide__pagination__page.is-active {
transform: scale(1);
opacity: 1;
}
.splide--hero .splide__track {
border-radius: 8px;
}
.splide--roadmap .splide__arrows {
display: block !important;
position: relative;
}
.splide--roadmap .splide__arrow {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 36px;
height: 36px;
border: none;
border-radius: 8px;
background-color: #222028;
position: absolute;
top: -94px;
opacity: 1;
font-size: 20px;
color: #fff;
transform: translateY(0);
}
.splide--roadmap .splide__arrow:hover {
color: #f9ab00;
}
.splide--roadmap .splide__arrow--prev {
right: 26px;
left: auto;
}
.splide--roadmap .splide__arrow--next {
right: -20px;
}
.splide--roadmap .splide__track {
border-radius: 8px 8px 0 0;
}
@media (min-width: 768px) {
.splide--home .splide__arrow {
top: -72px;
}
.splide--home .splide__arrow--prev {
right: 51px;
}
.splide--content .splide__arrow {
top: -65px;
}
.splide--content .splide__arrow--prev {
right: 51px;
}
.splide--hero .splide__pagination {
bottom: 50px;
}
.splide--roadmap .splide__arrow {
top: -94px;
}
.splide--roadmap .splide__arrow--prev {
right: 21px;
}
.splide--roadmap .splide__arrow--next {
right: -30px;
}
}
@media (min-width: 1200px) {
.splide--hero .splide__arrows {
display: inline-flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
position: absolute;
bottom: 34px;
left: 120px;
}
.splide--hero .splide__arrow {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 36px;
height: 36px;
border: none;
border-radius: 8px;
background-color: rgba(255,255,255,0.1);
position: relative;
top: auto;
font-size: 20px;
color: #fff;
opacity: 1;
transition: 0.4s ease;
transform: translateY(0);
}
.splide--hero .splide__arrow:hover {
color: #f9ab00;
}
.splide--hero .splide__arrow--prev {
margin-right: 15px;
left: auto;
}
.splide--hero .splide__arrow--next {
right: auto;
}
.splide--hero .splide__pagination {
justify-content: flex-start;
padding-left: 258px;
}
}
/*==============================
Plyr customization
==============================*/
.plyr {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 400;
border-radius: 6px;
margin-top: 24px;
}
.plyr__video-wrapper {
background: #222028;
}
.plyr__poster {
background-color: #222028;
}
.plyr--video {
background: #222028;
}
@media (min-width: 1200px) {
.plyr video {
height: 386px;
}
.plyr__poster {
background-size: cover;
}
}
@media (min-width: 1400px) {
.plyr video {
height: 366px;
}
}
.plyr__menu__container .plyr__control {
transition: 0s ease;
}
.plyr__control.plyr__control--overlaid {
border-radius: 50%;
}
.plyr--video .plyr__control.plyr__tab-focus,
.plyr--video .plyr__control:hover,
.plyr--video .plyr__control[aria-expanded="true"] {
background: none;
background-color: #f9ab00;
}
.plyr--video .plyr__control--overlaid {
box-shadow: none;
display: flex !important;
flex-direction: row;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
background-color: rgba(255,255,255,0.2);
border-radius: 50%;
top: 50%;
left: 50%;
transition: 0.5s;
transition-property: opacity, background-color, color, border-color, transform;
color: #f9ab00;
border: 6px solid rgba(255,255,255,0.15);
padding: 0;
}
.plyr--video .plyr__control--overlaid:before {
content: '\f691';
font-family: "tabler-icons";
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
border-radius: 50%;
font-size: 24px;
background-color: #fff;
border: 6px solid rgba(255,255,255,0.15);
}
.plyr--video .plyr__control--overlaid svg {
display: none;
}
.plyr--video .plyr__control--overlaid:hover,
.plyr--video .plyr__control--overlaid.plyr__tab-focus {
background-color: rgba(255,255,255,0.2);
border-color: rgba(249,171,0,0.5);
color: #f9ab00;
}
.plyr--video .plyr__progress__buffer {
box-shadow: none;
}
.plyr__progress__buffer {
border-radius: 0;
}
.plyr--full-ui input[type="range"] {
color: #f9ab00;
border-radius: 0;
}
.plyr__tab-focus {
box-shadow: none;
outline: none;
}
.plyr__tooltip {
font-weight: 400;
}
.plyr__control.plyr__tab-focus {
box-shadow: none;
}
.plyr__menu__container .plyr__control[role="menuitemradio"][aria-checked="true"]::before {
background: none;
background-color: #f9ab00;
}
.plyr__control {
border-radius: 6px;
}
.plyr--video .plyr__control svg {
filter: none;
}
/*==============================
PhotoSwipe customization
==============================*/
.pswp__bg {
background-color: rgba(34,32,40,0.9);
}
.pswp__ui--fit .pswp__top-bar,
.pswp__ui--fit .pswp__caption {
background-color: transparent;
}
.pswp__caption__center {
font-size: 16px;
color: #fff;
padding: 15px;
font-weight: 400;
}
.pswp__counter {
font-size: 16px;
color: #fff;
padding: 0 15px;
font-weight: 400;
}
.pswp__button {
opacity: 0.7;
}
.pswp__button:before {
transition: 0.4s;
}
.pswp__button:hover {
opacity: 1;
}
.pswp__button:hover:before {
color: #f9ab00;
}
.pswp__button--close {
background: none;
}
.pswp__button--close:before {
content: '\eb55';
font-family: "tabler-icons";
position: absolute;
display: block;
font-size: 28px;
color: #fff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.pswp__button--fs {
background: none;
}
.pswp__button--fs:before {
content: '\eaea';
font-family: "tabler-icons";
position: absolute;
display: block;
font-size: 24px;
color: #fff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.pswp--fs .pswp__button--fs:before {
content: '\eaf1';
}
.pswp__button--arrow--right:before,
.pswp__button--arrow--left:before {
font-family: "tabler-icons";
position: absolute;
display: block;
font-size: 24px;
color: #fff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
background: none;
background-color: #1a191f;
}
.pswp__button--arrow--left:before {
content: '\ea60';
}
.pswp__button--arrow--right:before {
content: '\ea61';
}
/*==============================
Scrollbar-track
==============================*/
.scrollbar-track-y {
background-color: #222028 !important;
top: 0 !important;
bottom: 0 !important;
height: auto !important;
width: 4px !important;
border-radius: 4px !important;
right: 0 !important;
overflow: hidden;
cursor: pointer;
}
.scrollbar-thumb-y {
background: #00000063 !important;
width: 4px !important;
border-radius: 4px !important;
cursor: pointer;
}
.scrollbar-track-x {
background-color: #222028 !important;
left: 0 !important;
right: 0 !important;
height: 4px !important;
width: auto !important;
border-radius: 4px !important;
bottom: 0 !important;
overflow: hidden;
}
.scrollbar-thumb-x {
background: #f9ab00 !important;
height: 4px !important;
border-radius: 4px !important;
cursor: pointer;
}

/* Sinema Modu Buton Stili */
.sinema-modu-btn {
padding: 10px 20px;
background-color: #333;
color: white;
border: none;
cursor: pointer;
width: 200px;
position: relative;
bottom: 20px;
right: 20px;
z-index: 1000;
}

/* Tam Ekran Modunda Stil Değişikliği */
.fullscreen {
background-color: black;
width: 100vw;
height: 100vh;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 999;
}



.blog-item-box {
margin-top: 20px;
}

.blog-style-one {
background: #00000000;
border: 1px solid #00000063;
border-radius: 40px;
padding: 20px;
margin-bottom: 30px;
transition: all 0.3s ease;
}

.blog-style-one:hover {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.blog-style-two .thumb img {
width: 100%;
height: 530px;
transition: all 0.3s ease;
object-fit: cover;
}

.blog-style-one .thumb {
margin-bottom: 15px;
}

.blog-style-one .thumb img {
width: 100%;
height: auto;
transition: all 0.3s ease;
border-radius: 50px;
height: 275px;
object-fit: cover;
}

.blog-style-one .thumb img:hover {
transform: scale(1.05);
}

.blog-style-one .info {
padding-top: 10px;
text-align: center;
}

.blog-style-one .meta ul {
padding: 0;
list-style: none;
margin-bottom: 10px;
}

.blog-style-one .meta ul li {
display: inline;
font-size: 12px;
color: #888;
margin-right: 15px;
}

.blog-style-one .meta ul li a {
color: #ffffff;
text-decoration: none;
font-weight: 600;
}
.blog-style-one .meta ul li i {
margin-right: 5px;
}

.blog-style-one .title {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}

.blog-style-one .title a {
color: #00000063;
text-decoration: none;
transition: color 0.3s ease;
}

.blog-style-one .title a:hover {
color: #ffc700;
}

.bottom-navbar {
align-items: center;
background: #1b1b1b;
position: fixed;
bottom: 0px;
width: 100%;
z-index: 999999;
display: none;
padding: 20px;
}

@media (max-width: 991px) {
.bottom-navbar {
display: flex;
}
}

@media only screen and (max-width: 767px) {
.mobilf-footer{

width:100%;
}
}

.bottom-navbar a {
width: 100%;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
font-weight: 500;
background: transparent;
}

.bottom-navbar a i {
font-size: 20px;
color: #ff8100;
}
.bottom-navbar a strong {
font-weight: 400;
}
.bottom-navbar a strong {
font-weight: 500!important;
color: #fff!important;
font-size: 12px;
}


.viewBtn:focus, .viewAll:focus {
background-color: #ffc107!important;
color: black;
font-weight: bold;
}


.diller {
position:relative;
margin-top:10px;
transition: all .5s ease-in-out;
z-index: 999;
}

.diller a {
height: 50px;
width: 50px;
border-radius: 50%;
overflow: hidden;
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
font-size: 28px;
display: block;
text-align: center;
line-height: 50px;
color: white;
background: #000;
}

.diller .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
line-height: normal;
font-size: 15px;
top: 13px;
left: 105%;
height: auto;
}

.diller:hover a {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}

.diller:hover .tooltiptext {
visibility: visible;
}

.lang {
float: left;
width: 100%;
}

.lang img {
display: inline-block;
height: 16px;
margin-right: 8px;
margin-top: 0px;
margin-bottom: -3px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}

.lang .currencyitems a {
width: 24%;
}

.activelang {
opacity: 0.45;
filter: alpha(opacity=45);
}

.activelangcur {
opacity: 0.45;
filter: alpha(opacity=45);
}

.lang h4 {
float: left;
width: 100%;
padding-bottom: 10px;
margin-bottom: 15px;
font-size: 24px;
}

.lang a {
display: inline-block;
vertical-align: top;
margin: 5px 10px;
font-size: 16px;
color: #9d9d9d;
padding: 5px 15px;
border: 1px solid #0000004d;
border-radius: 5px;
}

.lang a selected {
opacity: 0.45;
filter: alpha(opacity=45);
}

.lang a:hover {
color: white;
}
.rounded-25 {
border-radius: 25%;
}

.flag-icon {
position: relative;
right: 5px;
}

body {
top: 0px !important;
}

.VIpgJd-ZVi9od-ORHb {
margin: 0;
background-color: #E4EFFB;
overflow: hidden;
display:none;
}

.VIpgJd-ZVi9od-ORHb-OEVmcd {
display:none;
left: 0;
top: 0;
height: 39px;
width: 100%;
z-index: 10000001;
position: fixed;
border: none;
border-bottom: 1px solid #6B90DA;
margin: 0;
box-shadow: 0 0 8px 1px #999;
}

.VIpgJd-yAWNEb-L7lbkb {
display:none !important;
}


.theme-switch {
--toggle-size: 30px;
/* the size is adjusted using font-size,
this is not transform scale,
so you can choose any size */
--container-width: 5.625em;
--container-height: 2.5em;
--container-radius: 6.25em;
/* radius 0 - minecraft mode :) */
--container-light-bg: #3D7EAE;
--container-night-bg: #1D1F2C;
--circle-container-diameter: 3.375em;
--sun-moon-diameter: 2.125em;
--sun-bg: #ECCA2F;
--moon-bg: #C4C9D1;
--spot-color: #959DB1;
--circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
--stars-color: #fff;
--clouds-color: #F3FDFF;
--back-clouds-color: #AACADF;
--transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25);
--circle-transition: .3s cubic-bezier(0, -0.02, 0.35, 1.17);
}

.theme-switch, .theme-switch *, .theme-switch *::before, .theme-switch *::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
font-size: var(--toggle-size);
width: fit-content;
font-size: 11px;
}

.theme-switch__container {
width: var(--container-width);
height: var(--container-height);
background-color: var(--container-light-bg);
border-radius: var(--container-radius);
overflow: hidden;
cursor: pointer;
-webkit-box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94);
box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94);
-webkit-transition: var(--transition);
-o-transition: var(--transition);
transition: var(--transition);
position: relative;
}

.theme-switch__container::before {
content: "";
position: absolute;
z-index: 1;
inset: 0;
-webkit-box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;
box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;
border-radius: var(--container-radius)
}

.theme-switch__checkbox {
display: none;
}

.theme-switch__circle-container {
width: var(--circle-container-diameter);
height: var(--circle-container-diameter);
background-color: rgba(255, 255, 255, 0.1);
position: absolute;
left: var(--circle-container-offset);
top: var(--circle-container-offset);
border-radius: var(--container-radius);
-webkit-box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1);
box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-transition: var(--circle-transition);
-o-transition: var(--circle-transition);
transition: var(--circle-transition);
pointer-events: none;
}

.theme-switch__sun-moon-container {
pointer-events: auto;
position: relative;
z-index: 2;
width: var(--sun-moon-diameter);
height: var(--sun-moon-diameter);
margin: auto;
border-radius: var(--container-radius);
background-color: var(--sun-bg);
-webkit-box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;
box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;
-webkit-filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25));
filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25));
overflow: hidden;
-webkit-transition: var(--transition);
-o-transition: var(--transition);
transition: var(--transition);
}

.theme-switch__moon {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
width: 100%;
height: 100%;
background-color: var(--moon-bg);
border-radius: inherit;
-webkit-box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;
box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;
-webkit-transition: var(--transition);
-o-transition: var(--transition);
transition: var(--transition);
position: relative;
}

.theme-switch__spot {
position: absolute;
top: 0.75em;
left: 0.312em;
width: 0.75em;
height: 0.75em;
border-radius: var(--container-radius);
background-color: var(--spot-color);
-webkit-box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
}

.theme-switch__spot:nth-of-type(2) {
width: 0.375em;
height: 0.375em;
top: 0.937em;
left: 1.375em;
}

.theme-switch__spot:nth-last-of-type(3) {
width: 0.25em;
height: 0.25em;
top: 0.312em;
left: 0.812em;
}

.theme-switch__clouds {
width: 1.25em;
height: 1.25em;
background-color: var(--clouds-color);
border-radius: var(--container-radius);
position: absolute;
bottom: -0.625em;
left: 0.312em;
-webkit-box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color);
box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color);
-webkit-transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
-o-transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
}

.theme-switch__stars-container {
position: absolute;
color: var(--stars-color);
top: -100%;
left: 0.312em;
width: 2.75em;
height: auto;
-webkit-transition: var(--transition);
-o-transition: var(--transition);
transition: var(--transition);
}

/* actions */

.theme-switch__checkbox:checked + .theme-switch__container {
background-color: var(--container-night-bg);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container {
left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter));
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container:hover {
left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - 0.187em)
}

.theme-switch__circle-container:hover {
left: calc(var(--circle-container-offset) + 0.187em);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__moon {
-webkit-transform: translate(0);
-ms-transform: translate(0);
transform: translate(0);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__clouds {
bottom: -4.062em;
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__stars-container {
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

@media only screen and (max-width: 767px) {
.footer__nav {
order: 2;
display: block;
flex-direction: row;
justify-content: flex-start;
align-items: center;
margin-top: 30px;
}
}



.error-page-area .shape {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
height: 300px;
background-size: cover;
background-repeat: no-repeat;
z-index: -1;
}

.error-box {
padding: 50px;
background-color: #f8f9fa;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.error-box h1 {
font-size: 120px;
color: #ff6347;
font-weight: bold;
margin-bottom: 20px;
}

.error-box h2 {
font-size: 32px;
color: #333;
margin-bottom: 20px;
}

.error-box p {
font-size: 18px;
color: #666;
margin-bottom: 30px;
}

.error-box .btn {
display: inline-block;
padding: 12px 30px;
background-color: #ff6347;
color: #fff;
border-radius: 5px;
text-decoration: none;
font-size: 18px;
transition: background-color 0.3s ease;
}

.error-box .btn:hover {
background-color: #e5533d;
}

/* Mobil cihazlara duyarlılık */
@media (max-width: 768px) {
.breadcrumb-area {
padding: 70px 0;
}

.breadcrumb-area h1 {
font-size: 32px;
}

.error-box h1 {
font-size: 80px;
}

.error-box h2 {
font-size: 28px;
}

.error-box p {
font-size: 16px;
}
}

.ad-left, .ad-rightx {
position: absolute;
top: 275px;
width: 230px;
height: auto;
text-align: center;
padding-top: 10px;
z-index: 10;
}

.ad-left {
left: 45px;
}

.ad-rightx {
right: 45px;
}

@media (max-width: 1280px) {
.ad-left, .ad-rightx {
display: none;
}
}


@media (-webkit-min-device-pixel-ratio: 1.5),
(min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 1.5/1),
(min-resolution: 144dpi) {
    .ad-left, .ad-rightx {
        display: none;
    }
}

/* Yüksek çözünürlüklü ekranlar için */
@media (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    .ad-left, .ad-rightx {
        display: none;
    }
}

@media (-webkit-min-device-pixel-ratio: 1.75),
       (min-resolution: 168dpi) {
    .ad-left, .ad-rightx {
        display: none;
    }
}

@media (-webkit-min-device-pixel-ratio: 1.1),
       (min-resolution: 105dpi) {
    .ad-left, .ad-rightx {
        display: none;
    }
}


.hide-ads {
display: none;
}

@media only screen and (max-width: 767px) {
.hide-adsmobile {
display: none;
}
}

.side {
    width: 100%;
    background: #ffffff0a;
    padding: 15px;
    border: 1px solid #e0e0e01a;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.blok-icerik {
    margin-bottom: 30px;
}



.blok-baslik {
    font-size: 22px;
    font-weight: bold;
    color: #ffffff;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.blok-baslik i {
    margin-right: 10px;
    color: #ff6f61;
}

.nette-ilk {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nette-ilk li {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.nette-ilk li a {
    display: flex;
    text-decoration: none;
    color: #333;
    transition: background 0.3s, box-shadow 0.3s;
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
}



.nette-ilk img {
    border-radius: 8px;
    margin-right: 15px;
    transition: transform 0.3s;
    object-fit: cover;
}

.nette-ilk li a:hover img {
    transform: scale(1.05);
}

.ni-dty {
    display: flex;
    flex-direction: column;
}

.ni-tt {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 6px;
    color: white;
}

.ni-dil {
    font-size: 14px;
    color: #d5cece;
    float: inline-start;
    position: relative;
    text-align: justify;
}

.clear25 {
    height: 25px;
    clear: both;
}

.filmrobot-form {
    background: #f9f9f900;
    padding: 20px;
    border: 1px solid #dddddd1f;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.styled select {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #cccccc52;
    border-radius: 8px;
    background: #ffffff00;
    color: white;
    transition: border-color 0.3s;
}

.styled option {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #cccccc52;
    border-radius: 8px;
    background: #ffffff00;
    color: black;
    transition: border-color 0.3s;
}

.styled select:focus {
    border-color: #007bff;
    outline: none;
}

.styled input {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
   border: 1px solid #cccccc52;
    border-radius: 8px;
    background: #ffffff00;
    transition: border-color 0.3s;
}

.styled input:focus {
    border-color: #007bff;
    outline: none;
    color:white;
}

.ozelacordionfiltre{
background: #ffffff00 !important;
color:white;
}
.accordionozelacordionfiltre-header{
    margin-bottom: 0;
    background: #232228;
}

.accordionozelacordionfiltre-item {
    border-color: #000000bd;
    border-radius: 3px !important;
}


.accordion-button:not(.collapsed) {
    color: white !important;
}

.izle-btn {
    background-color: #007bff;
    color: #ffffff;
    padding: 12px 18px;
    text-align: center;
    display: inline-block;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.3s, box-shadow 0.3s;
}

.izle-btn:hover {
    background-color: #0056b3;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}



.clear10 {
    height: 10px;
    clear: both;
}

.clearr {
    clear: both;
    height: 0;
    visibility: hidden;
}

.robot-getirbtn, .robot-resetbtn {
    background-color:#00000063;
    color: #ffffff;
    padding: 10px 15px;
    text-align: center;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.3s;
    width: 100% !important;
}

.robot-getirbtn:hover, .robot-resetbtn:hover {
    background-color: #ffc700;
}

.robot-reset-btn {
    background-color: #dc3545;
}

.robot-reset-btn:hover {
    background-color: #c82333;
}
.ad-rightx {
    position: absolute;
    top: 125px !important;
    width: 350px !important;
    height: auto;
    text-align: center;
    padding-top: 10px;
    z-index: 10;
}

@media (max-width: 1920px) {
.ad-rightx {
    right: 5px !important;
    width: 275px !important;
}
}

/* Accordion başlığı için boşlukları azaltalım */
.accordion-button {
    padding: 8px 12px; /* Düğme içi boşluğu ayarla */
}

/* Liste öğelerinin yatay şekilde sıralanması ve boşlukların azaltılması */
.turler {
    display: flex; /* Flexbox kullanarak listeyi yatay yapıyoruz */
    flex-wrap: wrap; /* Satır dolduğunda bir sonraki satıra geçmesi için wrap */
    gap: 10px; /* Liste öğeleri arasındaki boşluğu ayarla */
    padding: 0;
    margin: 0;
    list-style: none; /* Liste stilini kaldır */
}

.turler li {
    display: inline; /* Liste öğelerini yatay şekilde göster */
}

.turler a {
    text-decoration: none;
    padding: 5px 8px;
    background-color: #f0f0f0;
    border-radius: 4px;
    color: #333;
    font-size: 12px;
}

.turler a:hover {
    background-color: #e0e0e0; /* Üzerine gelindiğinde arka plan rengini değiştir */
}
.pchidden-x{
display:none;
}

@media only screen and (max-width: 767px) {
.mobilhidden-x{
display:none;
}
.pchidden-x {
    display: block;
    position: absolute;
    right: 1px;
}

.header__search {
    z-index: 12;
 
}
}