@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
.case-ndpage .hero-section__container,
.case-ndpage .influencers-section__list,
.case-ndpage .cases-section,
.case-ndpage .cta-section {
font-family: "Montserrat", sans-serif;
}
.case-ndpage .arrow-btn {
font-weight: 600;
}
.hero-section_cases.hero-section_cases-nd {
background-color: #121212;
background-image: url(../../../themes/ninjapromo/assets/newdesign2024/newcase_bg.jpg);
width: 100%;
overflow: hidden;
}
.hero-section_cases-nd .hero-section__title {
font-weight: 700;
line-height: 1;
text-transform: uppercase;
}
.hero-section_cases-nd .hero-section__desc {
position: relative;
margin: 0 auto 3rem;
max-width: 100%;
}
.hero-section_cases-nd .hero-section__awards {
display: grid;
grid-template-columns: repeat(3, 2fr);
grid-auto-flow: row;
grid-gap: 0;
}
.hero-section_cases-nd .influencers-section__item {
margin: 0;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 0;
}
.case-ndpage .arrow-btn::before {
background-color: #fff;
}
.case-ndpage .arrow-btn {
text-decoration: none;
display: inline-flex;
}
.case-ndpage .arrow-btn:hover:before {
background-color: #3c39c6;
}
.case-ndpage .arrow-btn:hover:after {
background-color: #ffffff;
}
.casecta-section {
padding: 5.3rem 0;
}
.casecta-title {
font-size: 1.5rem;
font-style: normal;
font-weight: 700;
line-height: 1.25;
margin-bottom: 1.875rem;
text-align: left;
}
.behance-section__top {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin-bottom: 1.25rem;
}
.behance-section__logo {
max-width: 40%;
}
.behance-section__list {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 1rem;
background: #F9F9F9;
padding: 1.25rem;
border-radius: 1rem 1rem;
padding-bottom: 0;
}
.behance-section__item {
display: block;
position: relative;
border-radius: 0.625rem;
text-decoration: none;
width: 100%;
line-height: 1;
}
.behance-section__item .btn {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%);
margin-top: -15px;
color: #fff;
z-index: 2;
display: none;
}
a.behance-section__item:before {
content: '';
display: none;
background: rgba(18, 18, 18, 0.4);
position: absolute;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 0.625rem;
}
a.behance-section__item:hover:before {
display: block;
}
a.behance-section__item:hover .btn {
display: inline-flex;
}
.behance-section__img {
line-height: 1;
border-radius: 0.625rem;
width: 100%;
height: auto;
}
.casevideo-section__title {
max-width: 100%;
font-size: 1rem;
font-style: normal;
font-weight: 600;
line-height: 1.25;
}
.casecta-section_behance {
background: linear-gradient(180deg, #D8D7F4 0%, #FFEDF7 100%);
padding: 1.25rem;
gap: 3rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
margin: 0 -1.25rem;
width: calc(100% + 40px);
border-radius: 0;
overflow: hidden;
}
.mob-only .casevideo-section__list.casevideo-section__list-top {
flex-direction: column;
gap: 1rem;
}
.mob-only .casevideo-section__list-top .content-item__info {
padding: 0;
line-height: 1;
height: 100%;
}
.mob-only .casevideo-section__list .play-btn span {
justify-content: space-between;
width: 100%;
font-size: 0;
text-indent: -999px;
position: relative;
height: 100%;
}
.mob-only .video__more {
margin-top: 1.5rem;
}
@media screen and (min-width: 900px) {
.casevideo-section__title {
max-width: 60%;
font-weight: 700;
}
.casecta-section_behance {
width: 100%;
margin: 0;
border-radius: 2rem;
}
.casevideo-section__list + .text-center {
margin-top: 2.5rem;
}
}
.casevideo-section {
display: block;
width: 100%;
}
.casevideo-section__list {
display: flex;
width: 100%;
align-items: stretch;
justify-content: flex-start;
gap: 1.25rem;
}
.casevideo-section__list.casevideo-section__list-top {
position: relative;
margin-bottom: 0;
animation: none;
}
.dk-only .casevideo-section__list.casevideo-section__list-top {
display: grid;
grid-template-columns: repeat(2, 1fr);
width: 100%;
}
.casevideo-section__list.casevideo-section__list-bottom {
position: relative;
right: 0;
justify-content: flex-end;
}
.casevideo-section__list .content-item {
width: 100%;
min-width: 100%;
border-radius: 1rem;
overflow: hidden;
}
.casevideo-section__list .content-item__info {
opacity: 1;
padding: 1.25rem;
}
.casevideo-section__list .play-btn {
margin: 0;
font-size: 0.875rem;
width: 100%;
height: auto;
line-height: 1.2;
height: 100%;
}
.casevideo-section__list .play-btn::before {
display: none;
}
.casevideo-section__list .play-btn span {
justify-content: space-between;
width: 100%;
}
.casend-top {
display: flex;
flex-direction: column;
margin-bottom: 3rem;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
font-weight: 500;
}
.casend-top .cases-section__title {
display: block;
font-size: 1.5rem;
font-weight: 700;
line-height: 1.3;
}
.casend-top .cases-section__desc {
display: block;
max-width: 100%;
margin-bottom: 0;
font-size: 0.875rem;
}
.casend-filter {
margin-bottom: 3rem;
}
.casend-filter__list {
display: block;
}
.casend-filter__list ul {
display: flex;
align-items: stretch;
justify-content: flex-start;
flex-wrap: wrap;
width: 100%;
gap: 0.5rem;
}
.casend-filter__list ul a {
display: inline-block;
border: 1px solid #121212;
padding: 0.5rem 1rem;
border-radius: 22.5rem;
text-decoration: none;
color: #121212;
font-weight: 500;
font-size: 0.875rem;
line-height: 1.45;
transition: all 0.25s ease-in-out;
background: transparent;
}
.casend-filter__list ul a.active,
.casend-filter__list ul a:hover {
text-decoration: none;
color: #FFFFFF;
background: linear-gradient(88.06deg, #FFA37B -11.16%, #FA6BBE 46.95%, #9257FE 94.89%);
border-image-source: linear-gradient(88.06deg, #FFA37B -11.16%, #FA6BBE 46.95%, #9257FE 94.89%);
}
.casend-layout {
display: grid;
grid-template-columns: repeat(1, 2fr);
gap: 1.875rem;
}
.casend-item {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
width: 100%;
text-decoration: none;
background: #F4F4FB;
border-radius: 1rem;
padding: 1rem;
gap: 1.25rem;
}
.casend-logo {
display: block;
height: 3rem;
width: auto;
}
.casend-logo img {
height: 100%;
width: auto;
}
.casend-title {
margin: 0;
font-size: 1rem;
font-weight: 500;
color: #121212;
line-height: 1.4;
display: block; }
.casend-layout .case__img-wrapper {
position: relative;
height: auto;
display: block;
padding-bottom: 0;
}
.casend-layout .case__img-wrapper img {
height: auto;
position: relative;
width: 100%;
}
.casend-item .case__img {
overflow: hidden;
display: block;
margin: 0;
width: 100%;
height: auto;
border-radius: 1rem;
}
.casend__more {
display: flex;
align-items: flex-end;
justify-content: center;
position: relative;
}
.casend__more:before {
content: '';
display: block;
z-index: 1;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 25rem;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 74.4%);
}
.casend__more .btn {
position: relative;
z-index: 2;
}
.cta-section_brightblue.cta-section_nviolet {
padding-top: 0;
}
.cta-section_brightblue.cta-section_nviolet .container {
background: url(../../../themes/ninjapromo/assets/newdesign2024/cta_violetbg.png) no-repeat center bottom #121212;
border-radius: 2rem;
background-size: cover;
}
.cta-section_brightblue.cta-section_nviolet .cta-section__description {
margin-bottom: 1.875rem;
font-weight: 600;
}
.cta-section_brightblue.cta-section_nviolet .arrow-btn::before {
background-color: #121212;
}
.case-ndpage .owl-carousel .owl-dots {
justify-content: flex-start;
width: auto;
top: -1.8rem;
gap: 1rem;
position: relative;
z-index: 3;
display: inline-flex;
margin: 0;
}
.case-ndpage .owl-carousel .owl-dots button.owl-dot {
border: none;
margin: 0;
background: rgba(18, 18, 18, 0.3);
}
.case-ndpage .owl-carousel .owl-dots button.owl-dot.active {
background: linear-gradient(88.06deg, #FFA37B -11.16%, #FA6BBE 46.95%, #9257FE 94.89%);
}
.behance-section {
width: 100%;
overflow: hidden;
}
.case-ndpage .owl-nav {
position: relative;
z-index: 2;
}
.case-ndpage .owl-carousel .owl-nav button.owl-prev {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAICAYAAACYhf2vAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACISURBVHgBxZIxDsMwCEWB2Ja92LL3nqKt1LnX70W6FKld7EwuDJGSC5A3AGLh/y8AjpTW2gUMod1chOuc8wcnoMeftdYCxqAezzk/pLO4/4Ih3vs3iWtwzmEIYYIxYhg1AdDoiegmixczm/7AomWMscYYWUTcU0qf3vsKRizbsIlAxCICzFL4AyMzKvhiKtBYAAAAAElFTkSuQmCC);
margin-right: 1.875rem;
opacity: 1;
}
.case-ndpage .owl-carousel .owl-nav button.owl-next {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAICAYAAACYhf2vAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB2SURBVHgBxdMxDoAgDAXQtjLAgAQWJ4/BBby8p9HBBUhIsJiweAD6JvKXwiddYKIQwm6MgZRSGRnBRK21BxEjX2Qd2QIT5ZyL1vomoshNXL0J5NxZazeYiFtwSqnAx5O89yCh1tq/BEGAYwc/3IEA0eHfGv6Hv0rhHEmpHxGaAAAAAElFTkSuQmCC);
opacity: 1;
}
.behance-section__list.owl-carousel .owl-item img {
display: block;
width: auto;
height: auto;
}
.casend-item .case__img-wrapper {
position: relative;
}
.casend-view {
opacity: 0;
background: rgba(18, 18, 18, 0.4);
transition: 0.25s opacity ease-in-out;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 1rem;
display: flex;
align-items: center;
justify-content: center;
}
.casend-view .arrow-btn {
color: #ffffff;
}
.casend-item {
transition: 0.25s background ease-in-out;
}
.casend-item:hover {
background: #DFDFE5;
}
.casend-item:hover .casend-view {
opacity: 1;
}
.casend-caseslist_category .casend-item .case__img {
height: 0;
padding-top: 100%;
position: relative;
}
.casend-caseslist_category .casend-item .case__img-wrapper {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
.casend-caseslist_category .case__img-wrapper img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
}
@media screen and (max-width: 768px) {
.casevideo-section__list-top .content-item::before {
display: none;
position: relative;
}
.casevideo-section__list-top .content-item__info {
opacity: 1;
padding: 1rem 1.25rem;
display: block;
left: 0;
bottom: 0;
}
.casevideo-section__list-top .content-item__img {
position: relative;
}
.casevideo-section__list-top .play-btn {
color: #121212;
font-weight: 500;
}
.casevideo-section__list-top .play-btn span::before {
width: 1.5rem;
height: 1.5rem;
-webkit-transform: translate(-0.5rem, -50%);
transform: translate(-0.5rem, -50%);
}
.casevideo-section__list-top .play-btn span::after {
width: 2.5rem;
height: 2.5rem;
}
.casevideo-section__list-top .owl-nav {
padding: 0;
margin: 0;
}
}
@media screen and (min-width: 500px) {
.behance-section__list.owl-carousel .owl-item img {
width: 100%;
height: auto;
}
}
@media screen and (min-width: 768px) {
.casend-filter__list {
justify-content: flex-start;
gap: 1.25rem;
}
.casend-filter__list ul a {
font-size: 1.125rem;
line-height: 1.45;
padding: 1rem 1.4rem;
}
.behance-section__item .btn {
margin-top: -20px;
}
.casend-layout {
display: grid;
grid-template-columns: repeat(2, 2fr);
gap: 1.875rem;
}
.casend-layout .casend-item:first-child {
grid-column: 1 / 3;
}
.casend-layout__newgrid .casend-item:first-child {
grid-column: 1 / 3;
}
.casend-layout__newgrid .casend-item:nth-child(2) {
grid-column: 1 / 3;
}
.casend-layout__newgrid .casend-item:nth-child(3) {
grid-column: 1 / 3;
}
.casend-caseslist_category .casend-item:first-child,
.casend-caseslist_category .casend-item:nth-child(2),
.casend-caseslist_category .casend-item:nth-child(3) {
grid-column: auto;
}
.casend-caseslist_category .casend-layout {
display: flex;
flex-direction: row;
align-items: stretch;
justify-content: flex-start;
flex-wrap: wrap;
width: 100%;
}
.casend-caseslist_category .casend-item {
width: calc(50% - 30px);
}
.casend-caseslist_category .casend-item.casend-item__large {
width: 100%;
}
.casend-caseslist_category .casend-item__large .case__img {
padding-top: 367px;
}
.casend-filter {
margin-bottom: 5rem;
}
.casend-top .cases-section__title {
font-size: 3rem;
line-height: 1.2;
}
.casend-top .cases-section__desc {
font-size: 1.25rem;
}
.hero-section_cases-nd .hero-section__desc {
max-width: 46.625rem;
margin-bottom: 5rem;
}
.hero-section_cases-nd .hero-section__awards {
grid-template-columns: repeat(6, 1fr);
grid-auto-flow: column;
}
.hero-section_cases-nd .influencers-section__item {
width: 19rem;
min-width: 19rem;
}
.casecta-section {
padding: 10.625rem 0;
}
.casecta-title {
font-size: 3rem;
line-height: 1.2;
text-align: left;
margin-bottom: 3.75rem;
}
.behance-section__top {
margin-bottom: 2.5rem;
}
.behance-section__item {
width: calc(50% - 8px);
}
.casevideo-section__title {
font-size: 2.5rem;
line-height: 1.2;
}
.casevideo-section__list .content-item {
width: 100%;
min-width: 100%;
}
.casend-title {
font-size: 1.25rem;
}
}
@media screen and (min-width: 992px) {
.casend-caseslist .case__img-wrapper img {
max-height: 278px;
}
.casend-caseslist_category .casend-layout .case__img-wrapper img {
max-height: 100%;
}
.casend-layout__newgrid .casend-item:nth-child(2) .case__img-wrapper img {
max-height: 100%;
}
.casend-layout__newgrid .casend-item:nth-child(3) .case__img-wrapper img {
max-height: 100%;
}
.casend-top {
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-bottom: 5rem;
}
.casend-top .cases-section__title {
margin-bottom: 0;
width: 50%;
}
.casend-top .cases-section__desc {
width: 50%;
}
.casecta-section_behance {
padding: 2.5rem;
gap: 5rem;
}
.behance-section__list {
padding: 2.5rem;
border-radius: 1rem 1rem;
}
.behance-section__item {
width: calc(33% - 8px);
}
.casevideo-section__list {
gap: 1.875rem;
}
.casevideo-section__list.casevideo-section__list-top {
margin-bottom: 0;
}
.casevideo-section__list .content-item {
width: 100%;
min-width: 100%;
}
.casevideo-section__list .content-item__info {
padding: 0;
}
.casevideo-section__list .play-btn {
line-height: 1.3;
font-size: 1.75rem;
opacity: 0;
transition: all 0.25s ease-in-out;
padding: 1.875rem;
display: flex;
align-items: flex-end;
justify-content: flex-start;
width: 100%;
}
.casevideo-section__list .content-item:hover .play-btn {
opacity: 1;
}
.hero-section_cases-nd .hero-section__title {
font-size: 5.25rem;
}
.casend-layout {
display: grid;
grid-template-columns: repeat(3, 2fr);
gap: 1.875rem;
}
.casend-layout .casend-item:first-child {
grid-column: 1 / 3;
}
.casend-layout__newgrid .casend-item:first-child {
grid-column: 1 / 1;
}
.casend-layout__newgrid .casend-item:nth-child(2) {
grid-column: 2 / 4;
}
.casend-layout__newgrid .casend-item:nth-child(3) {
grid-column: 1 / 3;
}
.casend-caseslist_category .casend-item:first-child,
.casend-caseslist_category .casend-item:nth-child(2),
.casend-caseslist_category .casend-item:nth-child(3) {
grid-column: auto;
}
.casend-item {
padding: 1.25rem;
gap: 1.25rem;
}
.casend-caseslist_category .casend-item {
width: calc(25% - 30px);
order: 2;
}
.casend-caseslist_category .casend-item.casend-item__large {
width: calc(50% - 30px);
order: 1;
}
}
@media screen and (min-width: 1000px) {
.cta-section_brightblue.cta-section_nviolet .container {
background: url(../../../themes/ninjapromo/assets/newdesign2024/cta_violetbg_hr.png) no-repeat right top #121212;
background-size: cover;
}
.cta-section_nviolet .cta-section__info {
max-width: 25.1875rem;
}
}
@media screen and (min-width: 1230px) {
.cta-section_brightblue.cta-section_nviolet .container {
max-width: 1040px;
}
}
@media screen and (min-width: 1336px) {
.cta-section_brightblue.cta-section_nviolet .container {
max-width: 1240px;
}
.case-ndpage .container {
max-width: 1280px;
}
.cases-section_cat .cases-section__top .container,
.casend-caseslist.casend-caseslist_category .container {
max-width: 1300px;
}
}
@media screen and (min-width: 1440px) {
.cases-section_cat .cases-section__top .container,
.casend-caseslist.casend-caseslist_category .container {
max-width: 1360px;
}
}
@media screen and (min-width: 1570px) {
.cta-section_brightblue.cta-section_nviolet .container {
max-width: 1240px;
}
.case-ndpage .container {
max-width: 1280px;
}
.cases-section_cat .cases-section__top .container,
.casend-caseslist.casend-caseslist_category .container {
max-width: 1360px;
}
}
@media screen and (min-width: 1700px) {
.case-ndpage .container {
max-width: 1280px;
}
.cta-section_brightblue.cta-section_nviolet .container {
max-width: 1240px;
}
.cases-section_cat .cases-section__top .container,
.casend-caseslist.casend-caseslist_category .container {
max-width: 1440px;
}
}
@media screen and (min-width: 1920px) {
.casend-caseslist_category .casend-item__large .case__img {
padding-top: 353px;
}
.cases-section_cat .cases-section__top .container,
.casend-caseslist.casend-caseslist_category .container {
max-width: 1540px;
}
}