@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@font-face {
font-family: 'ahbn';
src: url('/img/fonts/ahbn/ArmHmksBebasNeue.eot');
src: url('/img/fonts/ahbn/ArmHmksBebasNeue.eot?#iefix') format('embedded-opentype'),
	url('/img/fonts/ahbn/ArmHmksBebasNeue.woff2') format('woff2'),
	url('/img/fonts/ahbn/ArmHmksBebasNeue.woff') format('woff'),
	url('/img/fonts/ahbn/ArmHmksBebasNeue.ttf') format('truetype'),
	url('/img/fonts/ahbn/ArmHmksBebasNeue.svg#ArmHmksBebasNeue') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}
:root{
--yellow:#ffc10e;
--red:#a00101;
--black:#1A2236;
--white:#fff;
--mw:1100px;
--lw:900px;
--vlw:700px;
}
*, *:before, *:after {
box-sizing:border-box;
padding:0;
margin:0;
}
html{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color:transparent;
scroll-behavior:smooth;
font-optical-sizing: auto;
visibility: hidden;
}
body{
height:100%;
line-height:1.5;
overflow-x: hidden;
margin:0;
box-sizing:border-box;
font-family: "Montserrat", sans-serif;
color:#fff;
font-size:16px;
font-weight:normal;
background-color: #000;
}
a {
color:var(--brown);
font-size:20px;
text-decoration: underline;
}
.pt{
height:77px;
}
/* Header */
header{
position:fixed;
top:0;
width:100%;
transition: .8s;
z-index:6;
}
header>div { 
max-width:95%;
margin:auto;
display:grid; 
grid-template-columns:130px auto 50px;
grid-gap:25px;
align-items:center; 
padding:15px 0; 
position:relative; 
}
header.dark{
background-color:rgba(255,255,255,0.99); 
}
.logo { 
position:relative;
height:45px; 
display:flex;
align-items: center;
justify-content:flex-start;
z-index:888;
}
.logo img { 
display:block;
height:45px;
}
.lang{
text-align: right;
z-index:2;
}
.lang.dark{
color:#000; 
}
.lang ul{
list-style-type: none;
}
.lang ul li{
display:inline-block;
margin-right:10px;
padding:3px 10px;
border:1px solid transparent;
}
.lang ul li a{
text-decoration: none;
font-size:17px;
}
.lang ul li.cur{
border:1px solid #fff;
font-weight:bold;
}
.lang.dark ul li.cur{
border:1px solid #000;
}
body.ds{
height:100%; 
overflow:hidden;
}
/* Button */
.but{
margin:auto;
transition: .8s;
text-decoration:none;
padding:12px 25px;
font-size: 19px;
color: var(--brown);
border:1px solid var(--red);
letter-spacing: 0.1em;
font-weight: 400;
border-radius:30px;
background-color:#fff;
display: block;
width: fit-content;
cursor:pointer;
}
.but:hover{
background-color:var(--yellow);
border:1px solid transparent;
color:#fff;
}
/* Services */
.services_wrapper{
list-style:none;
max-width:1000px;
margin:auto;
}
.services_wrapper li{
position:relative;
display:grid;
grid-template-columns: 50% auto;
grid-gap:60px;
margin-bottom:250px;
background-color:#fff;
border-radius:35px;
}
.services_wrapper li:last-child{
margin-bottom:100px;
}
.services_wrapper section.text_part{
padding:75px 50px 75px 0;
}
.services_wrapper section.text_part p{
font-size:16px;
line-height:1.5;
}
.services_wrapper section.text_part a{
color: #fff;
padding: 10px 20px;
background-color: #000;
font-size: 14px;
border-radius:8px;
text-decoration: none;
margin-top: 20px;
display: inline-block;
transition:.8s;
}
.services_wrapper section.text_part a:hover{
background-color:#ffc10e;
}
.services_wrapper section.image_part{
position:relative;
display:flex;
align-items: flex-end;
}
.services_wrapper section.image_part div{
position:relative;
width:100%;
aspect-ratio: 1/1;
}
.services_wrapper section.image_part img{
position:absolute;
}
/* Production */
.services_wrapper section.image_part img[src*="chair"]{
width:100%;
bottom: 0;
left:-3%;
object-fit:contain;
}
.services_wrapper section.image_part img[src*="clapper"]{
position: absolute;
width: 57%;
top: -15%;
left: 19%;
transform-origin: top left;
}
/* Production */
/* CGI VFX */
.services_wrapper section.image_part img[src*="objective"]{
width:90%;
bottom: -1px;
left:-3%;
object-fit:contain;
}
.services_wrapper section.image_part img[src*="cube"]{
position: absolute;
width: 88%;
top: -25%;
left: 19%;
transform-origin: top left;
z-index: 1;
}
.services_wrapper section.image_part img[src*="cursor"]{
position:absolute;
width: 30%;
top: 3%;
left: 60%;
z-index:1;
transform-origin: top left;
}
/* CGI VFX */
/* Advertising */
.services_wrapper section.image_part img[src*="dart"]{
width:100%;
bottom:0;
left:-3%;
object-fit:contain;
z-index:1;
}
.services_wrapper section.image_part img[src*="loudspeaker"]{
position:absolute;
width: 55%;
top: -25%;
left: 15%;
transform-origin: top left;
z-index:0;
}
.services_wrapper section.image_part img[src*="chart"]{
position:absolute;
width: 106%;
bottom: 0;
left: 0;
transform-origin: top left;
z-index:2;
}
/* Advertising */
/* Events */
.services_wrapper section.image_part img[src*="mask"]{
width: 99%;
top: -16%;
left: -15%;
object-fit: contain;
z-index: 0;
}
.services_wrapper section.image_part img[src*="microphone"]{
position:absolute;
width: 61%;
bottom: 0;
left: -9%;
transform-origin: top left;
z-index:1;
}
.services_wrapper section.image_part img[src*="confetti"]{
position:absolute;
width: 75%;
top: -14%;
left: 33%;
transform-origin: top left;
z-index:1;
}
.services_wrapper section.image_part img[src*="stemware"]{
position:absolute;
width: 65%;
bottom: 0;
left: 39%;
transform-origin: top left;
z-index:1;
}
/* Events */
/* Producing */
.services_wrapper section.image_part img[src*="gears"]{
width: 70%;
top: -15%;
left: 5%;
object-fit:contain;
z-index:0;
}
.services_wrapper section.image_part img[src*="glove"]{
position:absolute;
width: 105%;
bottom: 0;
left: -11%;
transform-origin: top left;
z-index:2;
}
.services_wrapper section.image_part img[src*="film"]{
position:absolute;
width: 80%;
bottom: -1px;
left: 44%;
transform-origin: top left;
z-index:1;
}
/* Producing */
/* Events */
.services_wrapper section.image_part img[src*="paper"]{
width: 94%;
bottom: 0;
left: -5%;
object-fit:contain;
z-index:0;
}
.services_wrapper section.image_part img[src*="vpen"]{
position:absolute;
width: 65%;
top: -34%;
left: 22%;
transform-origin: top left;
z-index:1;
}
.services_wrapper section.image_part img[src*="pencil"]{
position:absolute;
width: 61%;
top: 8%;
left: 38%;
transform-origin: top left;
z-index:2;
}
/* Events */
/* Creative */
.services_wrapper section.image_part img[src*="bulb"]{
width: 80%;
bottom: 35%;
left: 0;
object-fit:contain;
z-index:0;
}
.services_wrapper section.image_part img[src*="rocket"]{
position:absolute;
width: 85%;
bottom: -1px;
left: -5%;
transform-origin: top left;
z-index:1;
}
.services_wrapper section.image_part img[src*="puzzle"]{
position:absolute;
width: 47%;
top: 18%;
right: -1%;
transform-origin: top left;
z-index:2;
}
/* Creative */
/* SHarmony */
.services_wrapper section.image_part img[src*="round"]{
width: 68%;
top: -20%;
left: 20%;
object-fit:contain;
z-index:0;
}
.services_wrapper section.image_part img[src*="mp"]{
position:absolute;
width: 52%;
bottom: 0;
left: 29%;
transform-origin: top left;
z-index:2;
}
.services_wrapper section.image_part img[src*="el"]{
position:absolute;
width: 110%;
bottom: 5%;
left: -8%;
transform-origin: top left;
z-index:1;
}
/* SHarmony */
.services_wrapper h2{
font-size:86px;
position:relative;
font-family: 'ahbn';
font-weight:normal;
color: var(--yellow);
margin-top:-144px;
margin-left:-4px;
}
.services_wrapper h3{
font-size:24px;
position:relative;
font-family: 'ahbn';
font-weight:normal;
color:#000;
margin-top:-20px;
margin-bottom:70px;
}
.services_wrapper p{
font-size:18px;
line-height:1.5;
position:relative;
color:#000;
}
/* Titles */
h2.h2-title{
position:relative;
text-align:left;
border-left:8px solid var(--red);
max-width:1300px;
margin:0 auto;
padding-left:30px;
font-size:45px;
text-transform: uppercase;
color:var(--yellow);
position:relative;
font-weight:bold;
}
.h2-ttl{
position:relative;
text-align:left;
border-left:8px solid var(--red);
max-width:1300px;
margin:0 auto;
margin-bottom:120px;
margin-top:50px;
padding-left:30px;
font-size:45px;
text-transform: uppercase;
color:var(--yellow);
position:relative;
font-weight:bold;
}
.main{
margin:auto;
font-weight:normal;
margin-bottom:30px;
min-height:500px;
}
.main p{
font-size:17px;
line-height:1.6;
}
.main ul{
list-style-position:inside;
}
.pinner{
max-width:var(--mw);
}
.map{
margin-bottom:50px;
}
/* Grid styles */
.grid_wrap{
display:grid;
grid-gap:30px;
margin:auto;
}
.gc1{
grid-template-columns:100%;
}
.gc2{
grid-template-columns:repeat(2, 1fr);
}
.gc3{
grid-template-columns:repeat(3, 1fr);
}
.gc4{
grid-template-columns:repeat(4, 1fr);
}
.gc5{
grid-template-columns:repeat(5, 1fr);
}
.gc6{
grid-template-columns:repeat(6, 1fr);
}
/* Gallery */
.gallery_wrapper{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap:2rem;
list-style:none;
margin:30px auto;
}
.gallery_wrapper img{
width:100%;
aspect-ratio: 4/3;
object-fit:cover;
display:block;
filter: grayscale(100%);
transition:.8s;
}
.gallery_wrapper img:hover{
filter: grayscale(0);
}
img.fl{
display:block;
min-width:250px;
margin-top:0!important;
margin-left:0!important;
}
img.fr{
display:block;
min-width:250px;
margin-top:0!important;
margin-right:0!important;
}

/* Publications grid */
.publications_wrapper{
list-style:none;
display:grid;
grid-gap:20px;
margin:auto;
}
.publications_wrapper li{
position:relative;
background-color:rgba(255,255,255,0.1);
border-radius:17px;
padding:15px;
border:1px solid #555;
}
.publications_wrapper li img{
width:100%;
height:250px;
object-fit:cover;
border-radius:10px;
}
.publications_wrapper p{
font-size:15px;
line-height:1.5;
position:relative;
}
.publications_wrapper a{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
z-index:1;
}
.publications_wrapper span{
text-align:left;
font-size:13px;
display:block;
margin:20px 0 15px 0;
}
.publications_wrapper time, .publications_view time{
text-align:left;
font-size:14px;
display:block;
color:#7E8695;
font-weight:400;
margin:10px  0;
}
.publications_header{
max-width:var(--mw);
margin:auto;
}
.publications_header img{
width:100%;
height:300px;
object-fit:cover;
border-radius:20px;
}
.publications_view{
position:relative;
max-width:1000px;
margin:0 auto 30px;
padding:35px;
border-radius:15px;
background-color:rgba(255,255,255,0.1);
z-index:1;
}
.publications_view h2{
font-weight: 600;
font-size: 32px;
line-height: 150%;
margin-bottom:25px;
margin-top:25px;
text-align: left;
}
.publications_view>div{
text-align:left;
}
.publications_view>div>img{
width:150px;
height:150px;
object-fit:cover;
border-radius:50%;
margin-right:30px;
}
ul.tab li{
list-style-position: outside;
margin-left:15px;
margin-bottom:10px;
}
/* Info page */
.info_wrap{
max-width:var(--mw);
margin:30px auto;
margin-top:70px;
display:grid;
grid-template-columns:30% auto;
grid-gap:50px;
}
.info_wrap .info_wrap_image>a>img{
width:100%;
height:auto;
display:block;
margin-bottom:25px;
border-radius:10px;
}
.info_wrap .info_wrap_text h1{
color:var(--brown);
font-size:22px;
margin-bottom:25px;
text-align:left;
line-height: 60%;
}
.info_wrap .info_wrap_text p{
font-size:16px;
line-height:1.5;
}
.info_just_text{
max-width:var(--mw);
margin:30px auto;
}
.info_wrap_text ul {
margin: 0;
padding-left: 1.2rem;
}
.info_wrap_text ul li {
position: relative;
list-style-type: none;
padding-left: 30px;
margin-bottom: 10px;
font-size:15px;
}
.info_wrap_text ul li:before {
content: '';
display: block;
position: absolute;
left: 0;
top: -5px;
width: 9px;
height: 17px;
border-width: 0 2px 2px 0;
border-style: solid;
border-color: var(--black);
transform-origin: bottom left;
transform: rotate(45deg);
}
/* Form elements */
.form_wrap{
max-width:var(--mw);
margin:30px auto;
display:grid;
grid-template-columns: 40% auto;
grid-gap:0;
border-radius:10px;
overflow:hidden;
background-color: var(--pr1);
box-shadow: 0 0 12px 3px rgba(0,0,0,0.1);
}
.form_wrap h2{
font-weight: 600;
font-size: 32px;
margin-bottom:30px;
color:#000;
}
.form_wrap>div:first-child{
padding:50px;
display:flex;
justify-content: center;
flex-direction: column;
}
form .form_wrap input[type="text"]{
width:100%;
padding:15px;
font-size:16px;
margin-bottom:18px;
outline:none;
border:1px solid #D2DAE5;
border-radius:8px;
color:#000;
}
textarea{
width:100%;
padding:15px;
font-size:16px;
font-family:inherit;
outline:none;
border:1px solid #D2DAE5;
border-radius:8px;
color:var(--black);
margin-bottom:25px;
}
form input[type="text"]::placeholder, textarea::placeholder{
font-size:16px;
color:var(--cyan);
font-weight: 400;
line-height: 150%;
letter-spacing: 1%;
vertical-align: middle;
}
#respc, #respv, #respct, #cfr{
text-align:center;
margin-top:20px;
font-size:13px;
}
#cfr{
text-align:center;
margin-top:15px;
font-size:13px;
}
/* Loader */
#loader {
display:block;
position:absolute;
left:50%;
top:50%;
width:90%;
height:90%;
margin:-45% 0 0 -45%;
border-radius:50%;
border:3px solid transparent;
border-top-color:#16364d;
-webkit-animation:spin 10s linear infinite;
animation:spin 10s linear infinite;
z-index:1001;
}
#loader:before {
content:"";
position:absolute;
top:15px;
left:15px;
right:15px;
bottom:15px;
border-radius:50%;
border:3px solid transparent;
border-top-color:#57ff8d;
-webkit-animation:spin 21s linear infinite;
animation:spin 21s linear infinite;
}
#loader:after {
content:"";
position:absolute;
top:30px;
left:30px;
right:30px;
bottom:30px;
border-radius:50%;
border:3px solid transparent;
border-top-color:#3ea9f5;
-webkit-animation:spin 15s linear infinite;
  animation:spin 15s linear infinite;
}
@-webkit-keyframes spin {
	0%   { 
		-webkit-transform:rotate(0deg);
		-ms-transform:rotate(0deg);
		transform:rotate(0deg);
	}
	100% {
		-webkit-transform:rotate(360deg);
		-ms-transform:rotate(360deg);
		transform:rotate(360deg);
	}
}
@keyframes spin {
	0%   { 
		-webkit-transform:rotate(0deg);
		-ms-transform:rotate(0deg);
		transform:rotate(0deg);
	}
	100% {
		-webkit-transform:rotate(360deg);
		-ms-transform:rotate(360deg);
		transform:rotate(360deg);
	}
}
/* Accordion */
.accordion { 
padding-bottom:1px; 
width:70%; 
margin:auto;
}
.accord-header { 
position:relative;
background-color:#f8f8f8; 
padding:10px 45px 12px 20px;
text-align:left;
margin-bottom:10px;
font-weight:normal;
font-size:17px;
color:var(--brown);
border:1px solid #fff;
transition:0.5s;
cursor:pointer;
user-select:none;
}
.accord-header:after { 
position:absolute;
content:url(/img/icons/ar-d.svg);
width:25px;
right:20px;
top:12px;
}
.accord-opened:after { 
content:url(/img/icons/ar-uw.svg);
position:absolute;
width:25px;
right:20px;
top:12px;
}
.accord-header.accord-opened, .accord-header:hover {
background-color:var(--brown); 
color:#fff;
}
.accord-header:hover:after { 
content:url(/img/icons/ar-dw.svg);
}
.accord-opened:hover:after { 
content:url(/img/icons/ar-uw.svg);
top:12px;
}
.accord-content { 
display:none; 
padding:25px;
font-size:14px;
background-color:#f8f8f8;
margin-bottom:30px;
border-bottom:3px solid var(--brown);
color:var(--brown);
}
.accord-content a{
color:var(--brown);
text-decoration:underline;
}
/* Carousel */
.carousel{
max-width:1000px;
margin:50px auto;
position:relative;
}
.carousel .slick-prev{
position:absolute;
top:50%;
left:-150px;
}
.carousel .slick-next{
position:absolute;
top:50%;
right:-150px;
}
.carousel .slick-prev img, .carousel .slick-next img{
width:40px;
}
.slick-dots {
display: flex;
justify-content: center;
margin: 0;
padding: 1rem 0;
list-style-type: none;
}
.slick-dots li {
margin: 0 0.25rem;
}
.slick-dots button {
display: block;
width: 1rem;
height: 1rem;
padding: 0;
border: none;
border-radius: 100%;
background-color: #1f1f1f;
text-indent: -9999px;
}
.slick-dots li.slick-active button {
background-color: #686868;
}
/* Projects */
ul.projects_menu{
max-width:fit-content;
list-style-type: none;
margin:40px auto 20px auto;
}
ul.projects_menu li{
display: inline-block;
margin-right:17px;
}
ul.projects_menu li a{
text-decoration: none;
font-weight:bold;
}
ul.projects_menu li a:hover, ul.projects_menu li a.active{
color: var(--yellow);
text-decoration-line: underline;
text-decoration-color: #a00101;
text-underline-offset: 12px;
text-decoration-thickness: 3px;
}
ul.projects_wrapper{
max-width:1300px;
min-height: 400px;
margin:60px auto;
display:grid;
grid-template-columns: repeat(4, 1fr);
grid-gap:30px;
list-style-type: none;
}
ul.subcat{
text-align:center;
}
ul.subcat li{
list-style-type: none;
display:inline-block;
margin-right:10px;
}
ul.subcat li a{
text-decoration: none;
font-size:14px;
}
ul.subcat li a.act{
color:var(--yellow);
}
ul.projects_wrapper li{
overflow:hidden;
position:relative;
aspect-ratio: 3/2;
transition:.8s;
}
ul.projects_wrapper li img{
transform: scale(1.05);
}
ul.projects_wrapper li:hover img{
transform: scale(1.15);
}
ul.projects_wrapper li img.p1{
width:100%;
aspect-ratio: 3/2;
object-fit:cover;
display:block;
position:relative;
z-index:1;
transition:0.8s;
}
ul.projects_wrapper li img.p2{
width:100%;
aspect-ratio: 3/2;
object-fit:cover;
display:block;
position:absolute;
transition:0.8s;
top:0;
left:0;
}
ul.projects_wrapper li:hover img.p1{
opacity: 0;
}
ul.projects_wrapper li p{
width:100%;
padding:15px 25px;
background-color:#fff;
color:#000;
font-size:15px;
font-weight:bold;
position:absolute;
bottom:-100%;
transition:.8s;
}
ul.projects_wrapper li:hover p{
bottom:0;
}
ul.projects_wrapper li a{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
z-index:2;
}
/* Projects menu */
.projects_dropdown{
position:relative;
width:300px;
margin:25px auto;
}
.dropdown_toggle{
width:100%;
padding:14px 18px;
border:none;
background-color:#000;
border:1px solid #fff;
color:var(--yellow);
font-size:16px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;

}
.dropdown_toggle::after{
content:url("/img/icons/dd.svg");
width:15px;
height:15px;
position:absolute;
right:15px;
top:13px;
}
.projects_list{
position:absolute;
top:100%;
left:0;
width:100%;
list-style:none;
background:#fff;
border:1px solid #ddd;
box-shadow:0 10px 30px rgba(0,0,0,.08);
display:none;
z-index:3;
}
.projects_list.active{
display:block;
}
.projects_list li a{
display:block;
padding:10px 15px;
text-decoration:none;
color:#111;
transition:.2s;
font-size:16px;
}

.projects_list li a:hover,
.projects_list li a.active{
    background:#111;
    color:#fff;
}
/* View */
.product_view{
max-width:1300px;
margin:40px auto;
}
.title_part{
font-size:38px;
color:#fff;
font-weight:bold;
margin-bottom:40px;
line-height: 1;
}
.content_part{
font-size:17px;
}
/* Video */
.video_wrapper{
margin:40px auto;
}
.video_wrapper div{
position:relative;
}
.video_wrapper img.ytmi{
width:100%;
aspect-ratio: 2/1;
display:block;
object-fit:cover;
}
.video_wrapper img.ytbt{
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width:100px;
}
/* Slider */
.project-slider {
width: 100%;
margin-bottom: 25px;
height: 100%;
position: relative;
}
.project-slider .slide img{
width:100%;
display:block;
}
.project-slider .b-prev,
.project-slider .b-next {
position:absolute;
width:max-content;
height:auto;
z-index: 1;
display:block;
}
.project-slider .b-prev{
bottom: 25px;
left:25px;
display:grid;
grid-template-columns: 50px auto;
align-items:center;
overflow:hidden;
}
.project-slider .b-next {
bottom: 25px;
right:25px;
display:grid;
grid-template-columns: auto 50px;
align-items:center;
overflow:hidden;
}
.project-slider .b-prev span, .project-slider .b-next span {
border:1px solid #fff;
padding:25px 15px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height:50px;
font-size:13px;
color:#000;
}
.project-slider .b-prev span:first-child, .project-slider .b-next span:last-child {
background-color:rgba(255,255,255,0);
}
.project-slider .b-prev:hover span:last-child, .project-slider .b-next:hover span:first-child, .project-slider .b-prev:hover span:first-child, .project-slider .b-next:hover span:last-child {
background-color:rgba(255,255,255,0.7);
}
.project-slider .b-prev span:last-child{
align-items: flex-start;
}
.project-slider .b-prev span:last-child{
opacity: 0;
transition: 0.5s;
transform: translateX(-300px);
}
.project-slider .b-prev:hover span:last-child{
opacity: 1;
transform: translateX(0);
}
.project-slider .b-next span:first-child{
align-items: flex-end;
}
.project-slider .b-next span:first-child{
opacity: 0;
transition: 0.5s;
transform: translateX(300px);
}
.project-slider .b-next:hover span:first-child{
opacity: 1;
transform: translateX(0);
}
.project-slider .b-prev span p:first-child, .project-slider .b-next span p:first-child{
text-transform: uppercase;
}
.project-slider a {
text-decoration:none;
}
.project-slider span img{
width:31px;
height:20px;
display:block;
}
/* Breadcrumbs */
ul.breadcrumbs {
text-align:right;
align-self: flex-start;
list-style: none;
display: inline-table;
padding:0;
height: fit-content;
width: fit-content;
}
ul.breadcrumbs li a{
color: #fff;
display:block;
line-height:1.5;
font-size:16px;
}
ul.breadcrumbsd li a[href="javascript:void(0)"]{
cursor:default;
}
ul.breadcrumbs li a:after{
content:url("/img/icons/ar-bc.svg");
display: inline-block;
margin-left:10px;
}
ul.breadcrumbs li:last-child>a:after{
content:"";
}
ul.breadcrumbs li  {
display: block;
float: left;
text-align: center;
padding: 5px;
position: relative;
margin: 0 4px 4px 0; 
font-size: 15px;
text-decoration: none;
letter-spacing:1px;
}
ul.breadcrumbs li img {
width:20px;
height:20px;
}
/* Pagination styles */
ul.pagination {
text-align:center;
margin:30px auto;
width:fit-content;
}
ul.pagination li {
display:inline-block;
margin:5px;
font-size:16px;
border:1px solid #333;
border-radius:50%;
width:40px;
height:40px;
line-height: 1.7;
position:relative;
}
ul.pagination li:hover {
background-color:rgba(255,255,255,0.1)
}
ul.pagination a {
font-size:16px;
padding:5px;
color:#fff;
text-decoration:none;
top:0;
left:0;
right:0;
bottom:0;
position:absolute;
}
ul.pagination a:hover,
ul.pagination a.current {
background-color:var(--brown);
color:var(--yellow);
border-radius:50%;
line-height: 1.7;
font-size:16px;
}
/* Pagination styles */
.fade-in {
animation:fadeIn ease 0.8s;
-webkit-animation:fadeIn ease 0.8s;
-moz-animation:fadeIn ease 0.8s;
}
.wrap{
width:35%;
min-width:350px;
margin:auto;
}
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
.footer{
background-color:#161616;
margin:auto;
}
.footeri{
max-width:1200px;
margin:auto;
color:#939393;
display:grid;
grid-template-columns:20% 20% 20% auto;
grid-gap:50px;
padding: 30px;
}
.footeri>div{
padding:30px;
}
.footeri div h5{
font-size:15px;
color:#939393;
font-weight:normal;
margin-bottom:25px;
}
.footeri div ul{
list-style-type: none;
}
.footeri div:nth-child(2) ul li{
margin-bottom:5px;
}
.footeri a{
color:#939393;
font-size:15px;
text-decoration:none;
}
.footeri div:nth-child(3) a{
text-decoration: none;
}
.footeri a:hover{
color:var(--yellow);
}
.footeri>div p{
text-align:left;
font-size:15px;
}
.footeri>div p:not(:last-child){
margin-bottom:10px;
}
.copyr{
padding:25px;
font-size:14px;
text-align:center;
border-top:1px solid #939393;
color:#939393;
max-width: 1300px;
margin:auto;
text-transform: uppercase;
}
/* Icon */
.iconf, .iconm {
height: 35px;
fill: #939393;
display: inline-block;
transition:0.8s;
}
.iconm:hover {
fill: var(--red);
}
.iconf:hover {
fill: var(--yellow);
}
/* Search */
.search{
display:none;
}
.s_wrap{
display:grid;
grid-template-columns: auto 120px;
grid-gap:15px;
margin:auto;
max-width: var(--mw);
align-items: center;
border-bottom:1px solid #EDF1F6;
}
#search input[type="text"]{
margin:30px auto;
padding:10px 15px;
width:100%;
outline:none;
border: 1px solid var(--gr5);
border-radius:0 130px 130px 0;
background-color:#f4f9ff;
font-size:17px;
color:var(--brown);
}
#search button{
color:#fff;
background-color:var(--brown);
}
ol.search_results{
width:50%;
min-width:390px;
margin:30px auto;
list-style-position:inside;
background-color:#f7f9fd;
border:1px solid #cfe1fb;
border-radius:10px;
padding:30px;
}
ol.search_results li{
line-height:2;
text-align:left;
color:#aaa;
}
ol.search_results li a{
text-decoration:underline;
color:var(--brown);
margin-left:5px;
}
ol.search_results li a:hover{
color:var(--brown);
}
/* Content form */
.content_wrapper{
max-width:1300px;
margin:30px auto;
}
.contacts {
margin:30px auto;
margin-bottom:50px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 50px;
}
.contacts>div{
position:relative;
padding-left:54px;
box-sizing: border-box;
display: flex;
align-items: flex-start;
flex-direction: column;
}
.contacts>div>img{
height:40px;
width:40px;
display:block;
object-fit:contain;
position:absolute;
top:0;
left:0;
}
.contacts div h5{
font-size:22px;
margin-bottom:15px;
font-weight:800;
}
.contacts div p{
font-size:20px;
font-weight:600;
}
.contacts div a{
text-decoration: none;
}
.contacts .social ul{
margin-top:0;
}
.contacts .social {
width: 100%;
}
/* Pages */
.pages_wrapper{
max-width: 1300px;
margin:50px auto 100px auto;
display:grid;
grid-template-columns: 25% auto;
grid-gap:50px;
}
.pages_image img{
width:100%;
height:400px;
object-fit: cover;
}
/* Box Shadows */
.bsh{
-webkit-box-shadow:0px 0px 25px -11px rgba(0,0,0,0.5);
-moz-box-shadow:0px 0px 25px -11px rgba(0,0,0,0.5);
box-shadow:0px 0px 25px -11px rgba(0,0,0,0.5);
}
@-webkit-keyframes closeLetter {
50% {transform:rotateX(-90deg);}
100% {transform:rotateX(-180deg);}
}
@keyframes closeLetter {
50% {transform:rotateX(-90deg);}
100% {transform:rotateX(-180deg);}
}
@-webkit-keyframes fadeOutText {
49% {opacity:1;}
50% {opacity:0;}
100% {opacity:0;}
}
@keyframes fadeOutText {
49% {opacity:1;}
50% {opacity:0;}
100% {opacity:0;}
}
@-webkit-keyframes fadeInEnvelope {
0% {opacity:0; transform:translateY(8rem);}
/*90% {opacity:1; transform:translateY(4rem);}*/
100% {opacity:1; transform:translateY(4.5rem);}
}
@keyframes fadeInEnvelope {
0% {opacity:0; transform:translateY(8rem);}
/*90% {opacity:1; transform:translateY(4rem);}*/
100% {opacity:1; transform:translateY(4.5rem);}
}
@-webkit-keyframes scaleLetter {
66% {transform:translateY(-8rem) scale(0.5, 0.5);}
75% {transform:translateY(-8rem) scale(0.5, 0.5);}
90% {transform:translateY(-8rem) scale(0.3, 0.5);}
97% {transform:translateY(-8rem) scale(0.33, 0.5);}
100%{transform:translateY(-8rem) scale(0.3, 0.5);}
}
@keyframes scaleLetter {
66% {transform:translateY(-8rem) scale(0.5, 0.5);}
75% {transform:translateY(-8rem) scale(0.5, 0.5);}
90% {transform:translateY(-8rem) scale(0.3, 0.5);}
97% {transform:translateY(-8rem) scale(0.33, 0.5);}
100%{transform:translateY(-8rem) scale(0.3, 0.5);}
}
@keyframes pushLetter {
0% {transform:translateY(-8rem) scale(0.3, 0.5);}
50% {transform:translateY(-8rem) scale(0.3, 0.5);}
90% {transform:translateY(-8.5rem) scale(0.3, 0.5);}
100% {transform:translateY(-8rem) scale(0.3, 0.5);}
}
.nothing{
border:1px solid #333;
width:300px;
margin:50px auto;
color:#acacac;
padding:15px 25px;
box-sizing:border-box;
text-align:center;
}
img.i404{
width:150px;
display:block;
margin:auto;
}
/* Back to top */
.back-to-top{
width:50px;
height:50px;
display:block;
z-index:2;
position:fixed;
right:20px;
bottom:20px;
}
.back-to-top{
fill:#fff;
}
.back-to-top:hover{
fill:#ffc10e;
}
.w{
width: 100%!important;
max-width:100%!important;
}
ul.pgs{
width:fit-content;
list-style-type: none;
background-color: var(--black);
margin:40px 0 30px 0;
padding:7px;
border-radius:35px;
display:flex;
}
ul.pgs li{
display:inline;
align-items: center;
justify-content: center;
}
ul.pgs li a{
color:#fff;
display:inline-block;
background-color:var(--black);
padding:10px 25px;
margin-right:10px;
border-radius:25px;
transition:0.8s;
}
ul.pgs li a.active, ul.pgs li a:hover{
color:var(--black);
display:inline-block;
background-color:#fff;
padding:10px 25px;
margin-right:10px;
border-radius:25px;
}
ul.pgs li:last-child a{
margin-right:0;
}
.fs a.active{
color:var(--yellow);
}
.wm{
max-width:var(--mw);
margin:auto;
}
/* Preloader */
#ploader_wrap{
width:100%;
height:100vh;
background-color:#fff;
position:fixed;
z-index:8;
top:0;
bottom:0;
left:0;
right:0;
display:flex;
align-items: center;
justify-content: center;
}
.ploader {
width: 80px;
height: 80px;
border: 7px solid var(--yellow);
border-bottom-color: var(--red);
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: rotation 2s linear infinite;
}
@keyframes rotation {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
/* Header Video */
.header_wrap{
position:relative;
margin:auto;
margin-bottom:200px;
}
.header_wrap:after{
content:"";
width:100%;
height: 500px;
position:absolute;
left:0;
bottom:-200px;
background: linear-gradient(180deg,rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.6) 30%, rgba(0, 0, 0, 0.99) 60%, rgba(0, 0, 0, 1) 100%);
}
.header_wrap img:not(.dots){
display:block;
width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
}
.header_wrap video{
display:block;
width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
}
.header_wrap svg{
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
}
.obj{
fill: rgba(255, 119, 0, 0);
stroke:rgba(255,255,255,0.5);
/* stroke-miterlimit:10; */
cursor:pointer;
transition:0.5s;
}
.obj:hover, .active{
fill: rgba(255, 119, 0, 0.2);
}
.path {
stroke-dasharray: 50;
animation: dash 40s linear 2s infinite;
transform: translateZ(0);
}
@keyframes dash {
  to {
    stroke-dashoffset: 1000;
  }
}

#cover{
z-index:1;
}
.tooltip:not(:empty) {
position: absolute;
color: #fff;
max-width:250px;
padding: 8px 15px;
background: linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
font-size: 16px;
pointer-events: none;
z-index: 1000;
opacity: 0;
transition: opacity 0.2s ease-in-out;
-webkit-box-shadow: 0px 0px 21px -8px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 21px -8px rgba(0,0,0,0.2);
box-shadow: 0px 0px 21px -8px rgba(0,0,0,0.2);
}
.tooltip h1{
font-size:20px;	
margin:0;
padding:0;
}
.tooltip h2{
font-size:16px;	
color:#ffc40e;
}
.tooltip.visible {
opacity: 1;
}
p.ue{
position:absolute;
width:100%;
text-align:center;
bottom:80px;
z-index:1;
}
#ue{
text-transform:uppercase;
font-size:16px;
text-align:center;
padding:10px 15px;
color:#fff;
border:1px solid #fff;
text-decoration:none;
letter-spacing:1px;
white-space: nowrap;
}
.poster{
height:100vh;
width:100%;
object-fit:cover;
}
ul.bc{
max-width:1300px;
margin:40px auto;
margin-bottom:30px;
}
ul.bc li{
list-style-type: none;
display:inline-block;
}
ul.bc li::after{
content:">";
position:relative;
margin:0 7px;
color:#7f7f7f;
}
ul.bc li:last-child::after{
content:"";
}
ul.bc li a{
text-decoration:none;
color:#7f7f7f;
font-size:16px;
}
ul.bc li:last-child a{
font-weight:bold;
}
/* Slider */
.sldr{
width:100%;
height:100vh;
position:absolute;
left:0;
top:0;
z-index:0;
}
.sldr .slick-list,
.sldr .slick-track,
.sldr .slick-slide,
.sldr .slick-slide > div{
height:100%;
}
.slide{
position:relative;
width:100%;
height:100%;
}
.slick-slide img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.slick-prev{
position:absolute;
left:25px;
top:calc(50% - 25px);
z-index:1;
}
.slick-next{
position:absolute;
right:25px;
top:calc(50% - 25px);
z-index:1;
}
.custom-arrow{
padding:7px;
background-color: transparent;
border: 1px solid #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 50px;
width: 50px;
cursor:pointer;
transition:.8s;
}
.custom-arrow:hover{
background-color: rgba(255,255,255,0.5);
}
.slick-dots{
position:absolute;
bottom:30px;
left:50%;
transform:translateX(-50%);
display:flex !important;
justify-content:center;
align-items:center;
gap:10px;
width:auto;
}
.slick-dots li button:before{
display:none;
}
.slick-dots li{
width:auto;
height:auto;
margin:0;
}
.slick-dots li button{
width:12px;
height:12px;
padding:0;
border-radius:50%;
background:rgba(255,255,255,.5);
border:none;
cursor:pointer;
}
.slick-dots li.slick-active button{
background-color:#fff;
transform:scale(1.2);
}

/* MEDIA QUERIES */
@media (min-width: 1600px) {
	:root{
	--mw:90%;
	}
	.header_wrap {
	margin-bottom: 500px;
	}
}
@media (min-width: 1000px) {
	.projects_menu{
	display:block;
	}
	.projects_dropdown{
	display:none;
	}
}
@media screen and (max-width:1300px) {
	ul.subcat, ul.bc, .product_view, ul.projects_wrapper, .pages_wrapper, .contacts, .contact, .services_wrapper, section.b3, .header>div, table, .wm, .publications_view, .grid_wrap, h2.h2-title, h3.h3-title{
	width:93%;
	}
}
@media screen and (max-width:1200px) {
	.gc6{
	grid-template-columns:repeat(5, 1fr);
	}
	.services_wrapper h2 {
	font-size: 50px;
	margin-top: -75px;
	margin-left: 0;
	}
	.services_wrapper h3 {
	font-size: 20px;
	margin-top: 0;
	margin-left: 0;
	margin-bottom: 25px;
	}
	.services_wrapper p {
	font-size: 15px;
	}
	.services_wrapper section.text_part{
	padding:25px 25px 25px 0;
	}
}
@media screen and (max-width:1100px) {
	.gc6, .gc5{
	grid-template-columns:repeat(4, 1fr);
	}
	.projects_menu{
	width:95%;
	}
	ul.projects_menu li {
	margin-bottom: 14px;
	}
}
@media screen and (max-width:1000px) {
	.gc6, .gc5, .gc4{
	grid-template-columns:repeat(3, 1fr);
	}
    .accordion{
    width:100%;
    }
	.vtext p:first-child {
	font-size: 40px;
	}
	.vtext p:last-child {
	font-size: 25px;
	}
	ul.projects_wrapper{
	grid-template-columns: repeat(2, 1fr);
	grid-gap:15px;
	}
	.services_wrapper li{
	grid-template-columns: 100%;
	}
	.services_wrapper section.text_part{
	padding:35px;
	}
	body .overlay .mlinks > ul li a {
	font-size:30px;
	}
	body .social ul li a img {
	height: 30px;
	}
	.text_part{
	order:1;
	}
	.image_part{
	order:2;
	}
	.services_wrapper h2 {
	text-align:center;
	}
	.services_wrapper h3{
	text-align:center;
	}
	.services_wrapper li {
	margin-bottom: 100px;
	grid-gap:120px;
	}
	.services_wrapper #production section.image_part{
	left: 0;
    width: 105%;
	}
	.services_wrapper section.image_part img[src*="objective"] {
	left: 4%;
	}
	.services_wrapper #advertising section.image_part{
	left: 2%;
    width: 98%;
	}
	.services_wrapper #events section.image_part{
	left: 7%;
	width: 85%;
	}
	.services_wrapper section.image_part img[src*="stemware"]{
	left: 33%;	
	}
	.services_wrapper #producing section.image_part{
	left: 7%;
    width: 86%;
	}
	.services_wrapper #cgi-vfx section.image_part{
	left: -5%;
	width: 100%;
	}
	.services_wrapper section.image_part img[src*="film"]{
	right:23%;
	}
	.services_wrapper #design section.image_part{
	left: 4%;
    width: 99%;
	}
	.services_wrapper #creative section.image_part{
	left: 3%;
    width: 97%;
	}
	.services_wrapper section.image_part img[src*="bulb"]{
	width: 60%;	
	}
	.services_wrapper #sharmony section.image_part{
	left: 6%;
    width: 94%;
	}
	.projects_menu{
	display:none;
	}
	.projects_dropdown{
	display:block;
	}
}
@media screen and (max-width:900px) {
	.footeri{
	grid-template-columns:100%;
	grid-gap:0;
	}
	.contact_wrapper {
	grid-template-columns:100%;
	grid-gap:20px;
	}
}
@media screen and (max-width:800px) {
	.gc6, .gc5, .gc4, .gc3{
	grid-template-columns:repeat(2, 1fr);
	}
	ul.breadcrumbs li, ul.breadcrumbsd li{
	float:none;
	}
	.contacts {
  	grid-template-columns: repeat(2, 1fr);
	}
	.contacts div:nth-child(4), .contacts div:nth-child(6){
	display:none;
	}
	.pages_wrapper {
	grid-template-columns: 100%;
	}
	.video_wrapper img.ytbt {
	width: 50px;
	}
	.pages_wrapper {
	grid-gap: 20px;
	}
	.main p {
	font-size: 16px;
	text-align:center;
	}
	.services_wrapper section.text_part div:last-child{
	text-align:center;
	}
}
@media screen and (max-width:700px) {
	.info_wrap{
	grid-template-columns:100%;
	grid-gap:30px;
	}
	.form_wrap{
	grid-template-columns: 100%;
	}
	.footeri div h5, .footeri div ul, .footeri div div p {
	text-align:center;
	}
	.footeri>div{
	padding:20px;
	}
	.footeri div:not(:last-child){
	border-bottom:1px solid #fff;
	}
	.footeri{
	padding:0;
	}
	.footeri > div p {
	text-align: center;
	}
	.project-slider .slide img {
	width: 100%;
	height:300px;
	object-fit:cover;
	}
	.sldr{
	width:100%;
	top:75px;
	}
	.sldr,
	.sldr .slick-list,
	.sldr .slick-track,
	.sldr .slick-slide,
	.sldr .slick-slide > div{
	height:auto !important;
	}
	.sldr img{
	width:100%;
	height:auto;
	display:block;
	object-fit:contain;
	}
}
@media screen and (max-width:600px) {
	ul.pgs{
	flex-direction: column;
	width:100%;
	align-items:center;
	}
	ul.pgs li a, ul.pgs li{
	width:100%;
	text-align:center;
	margin-right:0;
	margin-bottom:3px;
	}
	ul.breadcrumbsd li a {
	font-size: 14px;
	}
	img.back-to-top {
	width: 40px;
	height: 40px;
	padding: 11px;
	}
	ul.breadcrumbs {
  	align-self: center;
	}
	.publications_view h2{
	font-size:22px;
	}
	.but {
	padding: 8px 20px;
	font-size: 15px;
	}
	img.back-to-top {
	right: 8px;
	bottom: 8px;
	}
	.gc6, .gc5, .gc4, .gc3{
	grid-template-columns:100%;
	}
	.contacts {
  	grid-template-columns: 100%;
	}
	.project-slider .b-prev, .project-slider .b-next{
	grid-template-columns: 100%;
	}
	.project-slider .b-prev span, .project-slider .b-next span{
	padding:10px;
	}
	.project-slider span img {
	width: 20px;
	height: 13px;
	}
	.project-slider .b-prev span:last-child{
	display:none;
	}
	.project-slider .b-next span:first-child {
	display:none;
	}
	.contacts > div{
	align-items: center;
	}
	.contacts > div > img{
	position: relative;
	margin-bottom:15px;
	}
	.contacts>div.social{
	order:3;
	}
	.contacts > div {
	padding-left: 0;
	}
}
@media screen and (max-width:500px) {
	h2.h2-title{
	font-size:28px;
	}
	.grid_wrap {
	grid-gap:20px;    
	}
    ul.pagination li {
    padding:0;
    }
    ul.pagination li a{
    padding:2px 8px;
    font-size:13px;
    }
	.footeri div.sdf {
	width:100%;
	text-align: center;
	}
	.form_wrap > div:first-child {
  	padding: 20px;
	}
	img.fr, img.fl{
	float:none!important;
	margin:0 0 25px 0!important;
	width:100%!important;
	}
	.text_part p, section.b3 p, p.sp{
	font-size:17px;
	}
	h3.h3-title {
	margin: 20px auto;
	font-size: 25px;
	}
	.vtext p:first-child {
	font-size: 28px;
	}
	p.sp {
	max-width: 100%;
	}
	.vtext{
	top: 40%; 
	left: 30%;
	transform: translate(-21%,-40%);
	}
	.publications_view > div {
	text-align: center;
	}
	.publications_view > div p{
	text-align: left;
	}
	.lang ul li a {
	font-size: 10px;
	}
	.lang ul li {
	margin-right: 2px;
	padding: 3px;
	}
	header > div {
	grid-template-columns: 113px auto 50px;
	grid-gap: 10px;
	}
	.logo img {
	height: 35px;
	}
	.logo {
	height:35px;
	width: 113px;
	}
	ul.projects_wrapper li p {
	padding: 10px 15px;
	font-size: 15px;
	}
	.header_wrap{
	margin-bottom:70px;
	}
	.header_wrap::after {
	height: 350px;
	}
	#ue {
	font-size: 12px;
	padding: 7px 10px;
	}
	p.ue {
	bottom: 0;
	}
	.services_wrapper section.text_part a {
	position:relative;
	font-size: 11px;
	margin-top: 15px;
	z-index:1;
	}
	.title_part {
	font-size: 28px;
	margin-bottom: 40px;
	line-height: 1.5;
	}
	ul.bc li a {
	font-size: 13px;
	}
}
@media screen and (max-width:450px) {
	.overlay .mlinks {
	width:90%;
	}
	.services_wrapper section.text_part p {
	font-size: 14px;
	}
	.copyr{
	font-size:11px;
	}
	.footeri > div p, .footeri > div a {
	font-size: 14px;
	}
	ul.projects_wrapper li p {
	padding: 5px 8px;
	font-size: 10px;
	font-weight:normal;
	}
}
@media screen and (max-width:320px) {
	.h2-title a.alink {
  	top: 40px;
	}
}
@supports (-webkit-touch-callout: none) {

}