@charset "utf-8";
/* CSS Document */
body {
  	color: #152432;
  	font-family: "Funnel Sans", sans-serif;
  	font-optical-sizing: auto;
 		font-style: normal;
		background:#F9F7F5;
		/*padding:30px;*/
		margin:0;
		font-size:18px;
}

h1, h3, a { line-height:1.2; padding:0; margin:0; }
p { font-weight: 300; line-height:1.6; padding:0; margin:0; }
h1 { font-size: 55px; font-family: "Funnel Display", sans-serif; font-optical-sizing: auto;  font-weight:400; margin-bottom:20px; }
h2 { font-size: 28px; font-weight:300; }

header { padding:30px 50px 30px 50px; background: #152432;  color:#F8F6F0;}
.header-booking-banner { padding:6px 0; background:#05C7F2; color:#F8F6F0; text-transform:uppercase; text-align:center; font-size:14px; font-weight:300; }
footer { padding:50px; background:#152432; display: flex; justify-content: space-between; font-weight:300; align-items:flex-end; }
footer p { color:#F8F6F0; font-size:14px; }
.bottom-nav { display:flex; gap:50px; align-items:flex-end; }
.soc-med, .footer-nav { display:flex; gap:10px;  flex-direction:column;  }
.footer-nav a, .soc-med a { color:#F8F6F0; text-decoration:none; }
.footer-nav a:hover, .soc-med a:hover { color:#05C7F2; }

.soc-med { justify-content:center; }

.topnav_mobile { display:none;  }
.topnav_mobile a { color:#fff; text-decoration:none; }

.topnav { display: flex; justify-content: space-between; }
.topnav a { color:#fff; text-decoration:none; }
.topnav a:hover { color: #05C7F2; }

.nav { display: flex; justify-content: flex-end; align-items: center; }
.nav div { margin: 0 20px;  }
.nav div a { color:#F8F6F0; text-transform: uppercase; text-decoration:none; }
.nav div span { color: #05C7F2; }

.underline, .underline-active { position: relative; }

.underline::before{
  content: '';
  position: absolute;
  bottom: -2px;
  right: 0;
  width: 0;
  height: 1px;
  background-color: #05C7F2;
  transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.underline-active::before{
  content: '';
  position: absolute;
  bottom: -2px;
  right: 0;
  width: 100%;
  height: 1px;
  background-color: #05C7F2;
}

.title { width:100%; margin-top:40px; padding-top: 30px; }
.title h1 { width:80%; }

.wrapper { width:100%;  }

.recent-projects-holder { padding: 65px 50px 80px 50px; }
.logo-gallery-holder { background:#fff; }
.portfolio-holder { margin:30px 0 0 0; padding:30px; background: transparent;}

.intro {  background:#024873; display:flex; width:100%; }
.intro p { margin-bottom:30px; color:#F8F6F0; }
.intro-image { width:40%; }
.intro-image img { width: 100%; height:100%; object-fit: cover; }
.intro-text { width:60%; color:#F8F6F0; padding:65px 50px 80px; }

.first-steps { padding: 65px 50px 80px 50px; width:100%;  }
.first-steps h3 { text-align:center; color:#024873 }
.first-steps-text { margin:0 auto; width:55%;}
.first-steps p { margin:30px auto 0 auto; color: #152432; }
.first-steps .email-button { text-align:center; }

.first-steps h3, .intro-text h3, .my-values h3, .recent-projects-holder h3, .process-text h3 { font-family: "Funnel Display", sans-serif; font-optical-sizing: auto; font-weight:400; font-size:36px; margin-bottom:20px; }

.my-values { background:#024873; padding:65px 50px 80px 50px; width:100%; }
.my-values-text { margin:0 auto;  color:#F8F6F0; display: flex; gap:40px; width:100%; justify-content: space-between;  }
.my-values h3 { color:#05C7F2; }
.my-values h4 { font-size:22px; font-weight:500; }
.my-values p { margin-top:10px; }

.process {  width:100%; padding: 80px 50px; display:flex; }
.process-text { color:#024873; width:60%; padding:0 50px 0 0; }
.process-text h3 { color:#152432; }
.process-text h4 { font-size:22px; font-weight:500; color:#05C7F2; }
.process p { color:#152432; padding:10px 0 50px 0; }
.process p:last-of-type { padding:10px 0 0 0; }
.process-image { width:40%; }
.process-image img { width: 100%; height:100%; object-fit: cover; }

.logo-section-header { color:#152432; display:flex; width:100%; }
.logo-section-header h2 {  font-size:250%;  margin-bottom:20px; font-family: "Funnel Display", sans-serif; font-optical-sizing: auto;  font-weight:500; }

.logo-section-header-desc { display: inline-block; width:68%; }
.logo-section-header-desc p { font-size:106%; }
.logo-section-header-desc p a { text-decoration:underline; color:#121212; }
.logo-section-header-desc p a:hover { text-decoration:none; }

.logo-section-header-skill { display: inline-block; width:32%; padding-left:60px; }
.logo-section-header-skill p { color:#999; font-size:90%; }
.logo-section-header-skill-mobile { display: none; }

.portfolio-gallery-text a, .intro-text a { color: #05C7F2; text-decoration: none;}
.portfolio-gallery-text a:hover { color:#152432;}
.intro-text a:hover { color:#F8F6F0; }

/*.bottom-nav, .bottom-nav-project { font-size:76%; border-top: 1px solid #152432; width:10%; margin:50px auto 0; text-align:center; padding:10px 0 0 0;}
.bottom-nav a, .bottom-nav-project a { color:#152432; text-decoration:none; }
.bottom-nav a:hover { color:#05C7F2; }
.bottom-nav-project a:hover { color:#05C7F2; }*/

p.email-button, span.email-button { margin:60px auto 0; }
p.email-button a, span.email-button a { background: transparent; color:#05C7F2; text-decoration: none; border: 1px solid #05C7F2; border-radius:4px;  padding:8px 20px 10px; line-height:1; display:inline-block; }
p.email-button a:hover, span.email-button a:hover { background: #05C7F2; color: #024873;  border-radius:4px; border: 1px solid #05C7F2; text-decoration: none; }

.insta { background:url("images/instagram-icon.svg"); }
.behance { background:url("images/behance-icon.svg"); }
.insta:hover { background:url("images/instagram-icon_over.svg"); }
.behance:hover { background:url("images/behance-icon_over.svg"); }
.email { background:url("images/email-icon.svg"); }
.email:hover { background:url("images/email-icon_over.svg"); }
.insta, .behance, .insta:hover, .behance:hover, .email, .email:hover { background-position: center; background-repeat: no-repeat; background-size: cover; width:40px; height:40px; transition: linear 0.2s; }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.recent-projects, .logo-gallery {
    display:flex;
    flex-wrap: wrap;
    gap:20px;
}

.logo-gallery .image-item  {
  animation-duration: 1s;
  animation-name: animate-fade;
  animation-delay: 0.5s;
  animation-fill-mode: backwards;
}

@keyframes animate-fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
} }

.image-item.delay-1 { animation-delay: 0.6s; }  
.image-item.delay-2 { animation-delay: 0.7s; }
.image-item.delay-3 { animation-delay: 0.8s; }
.image-item.delay-4 { animation-delay: 0.9s; }
.image-item.delay-5 { animation-delay: 1s; }
.image-item.delay-6 { animation-delay: 1.1s; }
.image-item.delay-7 { animation-delay: 1.2s; }  
.image-item.delay-8 { animation-delay: 1.3s; }
.image-item.delay-9 { animation-delay: 1.4s; }
/*.image-item.delay-10 { animation-delay: 1.5s; }
.image-item.delay-11 { animation-delay: 1.6s; }
.image-item.delay-12 { animation-delay: 1.7s; }
.image-item.delay-12 { animation-delay: 1.8s; }  
.image-item.delay-13 { animation-delay: 1.9s; }
.image-item.delay-14 { animation-delay: 2s; }
.image-item.delay-15 { animation-delay: 2.1s; }
.image-item.delay-16 { animation-delay: 2.2s; }
.image-item.delay-17 { animation-delay: 2.3s; }
.image-item.delay-18 { animation-delay: 2.4s; }  
.image-item.delay-19 { animation-delay: 2.5s; }
.image-item.delay-20 { animation-delay: 2.6s; }
.image-item.delay-21 { animation-delay: 2.7s; }*/



.image-item { background:#152432; font-size:0; }

.image-item img { width: 100%; transition: 0.5s ease-out;}
.image-item a img:hover {	width: 100%; opacity:33%; }

 @media (min-width:768px) {
	.image-item { font-size:0; flex:1 1 calc((100% - (20px * 6)) / 3); }
  .portfolio-image { font-size:0; flex:1 1 calc((100% - (20px * 6)) / 2); }
}

@media (min-width:556px) and (max-width:767px) {
    .image-item {
    flex:1 1 calc((100% - (20px * 6)) / 2);
    	}
		}

@media (max-width:555px) {
	.recent-projects, .logo-gallery, .portfolio-gallery-image-block { display: block; width:100%; }
    .image-item, .portfolio-image { display:block; }
   	.image-item:not(:last-child), .portfolio-image:not(:last-child) { margin: 0 0 20px 0;}
}

.portfolio-gallery-block {
  	width: 100%;
		display:flex;
		margin:50px 0 60px;
}

.portfolio-gallery-header h3 { font-size: 30px; font-weight:600; }
.portfolio-gallery-header { width:32%; }
.portfolio-gallery-text { width:68%; font-size: 16px; }

.portfolio-gallery-image-block { display: flex; flex-wrap: wrap; gap:20px; }
.portfolio-image img { width: 100%; }

.portfolio-gallery-full-image-block { margin:30px 0 60px 0; }
.portfolio-gallery-full-image-block img { width:100%; object-fit:contain; display:block; }
.portfolio-gallery-full-image-block-mobile { display:none; }

@media (hover: hover) and (pointer: fine) {
  .underline:hover::before{
    left: 0;
    right: auto;
    width: 100%;
  }
}

@media (min-width:769px) and (max-width:1023px) {
	body { font-size:18px; }
	header { padding:30px; }
	.title { width:100%; border-top: 0; margin-top:40px; }
	.title h1 { width:100%; font-size: 40px; }
	.recent-projects-holder, .logo-gallery-holder { padding: 24px; }
	.intro-text { padding:30px;  }
	.first-steps { padding:60px; }
	.first-steps-text { width:100%; text-align:left;  }
	.first-steps h3 { text-align:left; }
	.first-steps p.email-button, span.email-button { text-align:left; }
	.my-values { padding:60px; border:24px solid #05C7F2; }
	.my-values-text { text-align:left; display:block; gap:0; width:100%; }
	.my-values-box:not(:last-child) { margin: 0 0 30px 0;}
	.my-values h3 { text-align:left; }
	.process-text {  padding:30px; margin:0;  width:100%; }
	.process-text h4 { font-size:22px; }

}

@media(max-width: 768px) {

[type="checkbox"]:checked,
[type="checkbox"]:not(:checked){
  position: absolute;
  left: -9999px;
}
.menu-icon:checked + label,
.menu-icon:not(:checked) + label{
  position: absolute;
  top: 30px;
  right: 30px;
  display: block;
  width: 30px;
  height: 30px;
  padding: 0;
  margin: 0;
  cursor: pointer;
  z-index: 10;
}
.menu-icon:checked + label:before,
.menu-icon:not(:checked) + label:before{
  position: absolute;
  content: '';
  display: block;
  width: 30px;
  height: 21px;
  z-index: 20;
  top: -2px;
  left: 0;
  border-top: 3px solid #F8F6F0;
  border-bottom: 3px solid #F8F6F0;
  transition: border-width 100ms 300ms ease, 
              top 100ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
              height 100ms 300ms cubic-bezier(0.23, 1, 0.32, 1), 
              background-color 200ms ease,
              transform 100ms cubic-bezier(0.23, 1, 0.32, 1);
}
.menu-icon:checked + label:after,
.menu-icon:not(:checked) + label:after{
  position: absolute;
  content: '';
  display: block;
  width: 30px;
  height: 3px;
  z-index: 20;
  top: 10px;
  left: 0;
  background-color: #F8F6F0;
  transition: width 100ms 300ms ease, 
              right 100ms 300ms ease,
              margin-top 100ms ease, 
              transform 100ms cubic-bezier(0.23, 1, 0.32, 1);
}
.menu-icon:checked + label:before{
  top: 10px;
  transform: rotate(45deg);
  height: 3px;
  background-color: #F8F6F0;
  border-width: 0;
  transition: border-width 100ms 300ms ease, 
              top 100ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
              height 100ms 300ms cubic-bezier(0.23, 1, 0.32, 1), 
              background-color 200ms 500ms ease,
              transform 100ms 850ms cubic-bezier(0.23, 1, 0.32, 1);
}
.menu-icon:checked + label:after{
  width: 30px;
  margin-top: 0;
  right: 4px;
  transform: rotate(-45deg);
  transition: width 100ms ease,
              right 100ms ease,  
              margin-top 100ms 500ms ease, 
              transform 100ms 850ms cubic-bezier(0.23, 1, 0.32, 1);
}
/* blob */
.nav {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  z-index: 9;
  overflow: hidden;
  background-color: #05C7F2;
  opacity:0;
  transition: opacity 0.5s ease;
  /*  box-shadow: 0 8px 30px 0 rgba(0,0,0,0.3);
  animation: border-transform 5s linear infinite;
  transition: top 350ms 1100ms cubic-bezier(0.23, 1, 0.32, 1),  
              right 350ms 1100ms cubic-bezier(0.23, 1, 0.32, 1),
              transform 250ms 1100ms ease,
              width 650ms 400ms cubic-bezier(0.23, 1, 0.32, 1),
              height 650ms 400ms cubic-bezier(0.23, 1, 0.32, 1);*/
}

.menu-icon:checked ~ .nav {
  top: 0;
  right: 0;
  width:100%;
  height:100%;
  opacity:1;
  /*animation-play-state: paused;*/
  /*transition: top 350ms 700ms cubic-bezier(0.23, 1, 0.32, 1),  
              right 350ms 700ms cubic-bezier(0.23, 1, 0.32, 1),
              transform 250ms 700ms ease,
              width 750ms 1000ms cubic-bezier(0.23, 1, 0.32, 1),
              height 750ms 1000ms cubic-bezier(0.23, 1, 0.32, 1);*/
}

.nav ul{
  position: absolute;
  top: 10%;
  left: 0;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  z-index: 6;
  text-align: center;
  /*transform: translateY(-50%);*/
  list-style: none;
}
.nav ul li{
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  margin: 30px 0;
  text-align: center;
  list-style: none;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);

}
/*
   transition: all 100ms linear;
.nav ul li:nth-child(1){
  transition-delay: 125ms;
}
.nav ul li:nth-child(2){
  transition-delay: 100ms;
}
.nav ul li:nth-child(3){
  transition-delay: 75ms;
}
.nav ul li:nth-child(4){
  transition-delay: 50ms;
}
.nav ul li:nth-child(5){
  transition-delay: 25ms;
}*/


.nav ul li a{
  font-size: 30px;
  text-transform: uppercase;
  line-height: 1.2;
  font-weight: 800;
  display: inline-block;
  position: relative;
  color: #fff;
  transition: all 125ms linear;
  text-decoration: none;
}

.nav ul li a:after{
  display: block;
  position: absolute;
  top: 50%;
  content: '';
  height: 2vh;
  margin-top: -1vh;
  width: 0;
  left: 0;
  opacity: 0.8;
  transition: width 125ms linear;
}

.menu-icon:checked ~ .nav  ul li {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 300ms ease,
              transform 300ms ease;
              transition-delay: 300ms;
}
.menu-icon:checked ~ .nav ul li:nth-child(1){
  transition-delay: 300ms;
}
.menu-icon:checked ~ .nav ul li:nth-child(2){
  transition-delay: 360ms;
}
.menu-icon:checked ~ .nav ul li:nth-child(3){
  transition-delay: 420ms;
}
.menu-icon:checked ~ .nav ul li:nth-child(4){
  transition-delay: 480ms;
}
.menu-icon:checked ~ .nav ul li:nth-child(5){
  transition-delay: 560ms;
}

	body { font-size:19px; padding:0; }
	.first-steps h3, .intro-text h3, .my-values h3, .recent-projects-holder h3, .process-text h3 { font-size:30px; }
	h3 { line-height:1.2; }
	header { padding:120px 30px 60px 30px; }
  .small-header { padding:0; height:87px;}
	.topnav { display: none;}
  .topnav_mobile { display:block; }
	.logo_mobile { font-size:21px; position:absolute; left:0; top:0 ;padding:28px 0 0 30px; }
	.title { padding:0; margin:0; }
	.title h1 { font-size: 44px; width:100%; }
	.recent-projects-holder, .logo-gallery-holder { padding:50px 30px 50px 30px; margin:0; }
	.portfolio-holder {  margin:20px 0 0 0; }
	.intro { padding:50px 30px 50px 30px; margin:0; display:block; gap:0; }
	.intro-image { width:100%;}
	.intro-text { width:100%; padding:0; }
	.intro-text h3 { margin-top:30px; }
	.first-steps { padding:50px 30px 50px 30px; margin:0; }
	.first-steps-text { width:100%; }
	.first-steps h3 { text-align:left; }
	.my-values { text-align:left; padding:50px 30px 50px 30px; margin:0; }
	.my-values-text { display:block; gap:0; width:100%; }
	.my-values-box:not(:last-child) { margin: 0 0 50px 0; }
	.my-values h3 { text-align:left; }
	.process { display:block; gap:0;padding:50px 30px 50px 30px; margin:0; }
	.process-text { width:100%; padding:0; margin-bottom:30px;  }
	.process-text h4 { font-size:22px; }
	.process-image { width:100%;}
	.first-steps p.email-button, span.email-button { text-align:left; }
	.logo-section-header { color:#152432; display:block; width:100%; margin-bottom:30px; }
	.logo-section-header h2 { font-size:30px; margin-top:30px; }
	.logo-section-header-desc { display: block; width:100%; }
	.logo-section-header-skill-mobile { display: block; }
	.logo-section-header-skill-mobile p { color:#999; font-size:80%; }
	.logo-section-header-skill { display: none; }
	.portfolio-gallery-block { display:block; width: 100%; }
	.portfolio-gallery-image-block { display:block; }
	.portfolio-gallery-image-block img { width:100%; }
	.portfolio-gallery-full-image-block { display:none; }
  .portfolio-gallery-full-image-block-mobile { display:block; margin-bottom:20px; }
  .portfolio-gallery-full-image-block-mobile img { width:100%; }
	.portfolio-gallery-header h3 { font-size: 22px; }
	.portfolio-gallery-header { width:100%; display:block; margin-bottom:10px; }
	.portfolio-gallery-text { width:100%; font-size:100%; }
	.bottom-nav, .bottom-nav-project { width:20%; }
  footer { padding:50px 30px; display: block; }
  footer p { margin-top:50px; }

.insta2 { background:url("images/instagram-icon_over.svg"); }
.behance2 { background:url("images/behance-icon_over.svg"); }
.email2 { background:url("images/email-icon_over.svg"); }
.insta2, .behance2, .email2 { background-position: center; background-repeat: no-repeat; background-size: cover; width:58px; height:58px; } 

	}