@charset "utf-8";
*, *:before, *:after{ 
	margin: 0; padding: 0;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
:root{ 
	--c-blue: #052942;
	--c-rose-gold: #c5a382;
	--c-light: #ffdbb4; 
	--c-black-999: #000000;
	
	--ff-body: "Mulish", sans-serif;
	--ff-title: "Cormorant Infant", serif; 
	
	--fs-body-xlarge: 16x;
	--fl-body-xlarge: 24px;
	--fs-body-large: 14x;
	--fl-body-large: 22px;
		
	--fs-title-xlarge: 28px;
	--fl-title-xlarge: 36px; 
	--fs-title-large: 18px;
	--fl-title-large: 28px;  
	--fs-title-medium: 16x;
	--fl-title-medium: 24px; 
	--fs-title-small: 16px;
	--fl-title-small: 24px;   
		
	--fs-display-xlarge: 28px;
	--fl-display-xlarge: 48px; 
	--fs-display-large: 22px;
	--fl-display-large: 28px;
	
	--s-big: 24px;
	--s-medium: 24px; 
	--s-main: 24px; 
	--w-main: 1080px;
}

html{ 
	width: 100%; height: 100%; background: var(--c-blue); 
	text-align: left;
	font-family: var(--ff-body);
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-size: var(--fs-body-xlarge); line-height: var(--fl-body-xlarge); 
	color: var(--c-black-999); 
	scroll-snap-type: y mandatory;
	scroll-behavior: smooth;
	
		scroll-snap-type: none;
  		scroll-behavior: auto;
} 
img{ max-width: 100%; }
a img{ border: 0px solid; }
a{ text-decoration: none; outline: none; color: var(--c-rose-gold); }
a:hover{ text-decoration: underline; }
p{ margin: var(--s-main) 0; }
ul, ol{ padding-left: var(--s-medium); margin: var(--s-main) 0; }
h1,h2,h3,h4,h5,h6,
.section-title, .title, .page-title{ 
	font-family: var(--ff-title); 
	font-weight: 600; 
	margin: 0 0 var(--s-main) 0;
}
h1, .section-title, .page-title{ font-size: var(--fs-display-xlarge); line-height: var(--fl-display-xlarge); }
h2{ font-size: var(--fs-display-large); line-height: var(--fl-display-large); }
h3, .title{ font-size: var(--fs-title-xlarge); line-height: var(--fl-title-xlarge); }
h4{ font-size: var(--fs-title-large); line-height: var(--fl-title-large); }
h5{ font-size: var(--fs-title-medium); line-height: var(--fl-title-medium); }
h6{ font-size: var(--fs-title-small); line-height: var(--fl-title-small); }

.section-title{ 
	margin-bottom: var(--s-medium); font-weight: 400; text-transform: uppercase; 
	font-size: var(--fs-title-xlarge); line-height: var(--fl-title-xlarge);
}
.section-title:after{
	content: ''; display: block; width: 33.33%; height: 2px;
	background: var(--c-rose-gold); opacity: 1; margin-top: 12px;
}

.scroll-section {
	display: block; width: 100%; overflow: hidden;
	justify-content: center;
	align-items: center;
	
	scroll-snap-align: start;
	scroll-snap-stop: always;
	
		scroll-snap-align: none;
	  	scroll-snap-stop: normal; 
	  	height: auto; min-height: 0;
} 
.main{
	display: block; width: 100%; max-width: var(--w-main); margin: 0 auto;
	padding: 0 var(--s-main);
}

.main-header{ 
	display: block; width: 100%; text-align: center; 
	position: absolute; top: 0; left: 0; z-index: 99;
}
.main-header a.logo{
	display: block; width: 40px; height: 120px; overflow: hidden;
	margin: var(--s-main) var(--s-big); 
	text-indent: -9999px;
	background: url(../images/logo.png) center center no-repeat;
	background-size: 100% 100%;  
}

.main-screen{ display: block; overflow: hidden; position: relative; z-index: 0; height: 100dvh; } 
.main-screen .item{
	display: block; width: 100%; height: 100%;
	overflow: hidden; 
	position: absolute; top: 0; left: 0; z-index: 1; 
}
.main-screen .item h2{
	position: absolute; top: 50%; left: -100dvw; z-index: 3;
	float: left;
	-moz-transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%);
	-o-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	transform: translate(0, -50%);
	
	margin-top: var(--s-big); 
	
	animation: fadeInOut1 20s ease-in-out infinite;
	text-transform: uppercase;
	font-family: var(--ff-body); font-weight: 200;
	color: var(--c-light); letter-spacing: 0.05em;
	
	font-size: var(--fs-display-xlarge); line-height: var(--fl-display-xlarge); 
}
.main-screen .item h2:after{
	content: ''; display: block; width: 33.33%; height: 2px;
	background: var(--c-light); opacity: 0.2;
	position: absolute; top: 50%; left: 0; margin-top: -1px;
}
.main-screen .item:after{
	content: ''; display: block; width: 100%; height: 100%;
	position: fixed; top: 0; left: 0; z-index: 0; opacity: 0;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: auto 100%;
}
.main-screen .item-1 h2{
	animation: hideTitle 28s ease-in-out infinite;
	animation-delay: 0s;
} 
.main-screen .item-2 h2{
	animation: hideTitle 28s ease-in-out infinite;
	animation-delay: 7s;
}  
.main-screen .item-3 h2{
	animation: hideTitle 28s ease-in-out infinite;
	animation-delay: 14s;
}  
.main-screen .item-4 h2{
	animation: hideTitle 28s ease-in-out infinite;
	animation-delay: 21s;
} 

.main-screen .item-1:after{
	animation: fadeInOut1 28s ease-in-out infinite;
	animation-delay: 0s;
	background-image: url(../images/1-t.png);
}
.main-screen .item-2:after{
	animation: fadeInOut2 28s ease-in-out infinite;
	animation-delay: 0s;
	background-image: url(../images/2-t.png);
}
.main-screen .item-3:after{
	animation: fadeInOut3 28s ease-in-out infinite;
	animation-delay: 0s;
	background-image: url(../images/3-t.png);
}
.main-screen .item-4:after{
	animation: fadeInOut4 28s ease-in-out infinite;
	animation-delay: 0s;
	background-image: url(../images/4-t.png);
} 
@keyframes hideTitle {
  0%{ left: -100dvw; } 
  10% { left: var(--s-big); }  
  25% { left: var(--s-big); }   
  30% { left: -100dvw; }  
  100% { left: -100dvw; } 
} 


@keyframes fadeInOut1 {
  0%{ opacity: 0.05; } 
  10% { opacity: 0.3; } 
  20% { opacity: 0.3; } 
  30% { opacity: 0.3; } 
  40% { opacity: 0.3; } 
  50% { opacity: 0.3; }  
  60% { opacity: 0.3; }  
  70% { opacity: 0.3; }  
  80% { opacity: 0.3; }  
  100% { opacity: 0.05; } 
} 
@keyframes fadeInOut2 {
  0%{ opacity: 0; } 
  10% { opacity: 0; } 
  20% { opacity: 0.6; } 
  30% { opacity: 0.6; } 
  40% { opacity: 0.6; } 
  50% { opacity: 0.6; }  
  60% { opacity: 0.6; }  
  70% { opacity: 0.6; }  
  80% { opacity: 0.6; }   
  100% { opacity: 0; } 
} 

@keyframes fadeInOut3 {
  0%{ opacity: 0; } 
  10% { opacity: 0; } 
  20% { opacity: 0; } 
  30% { opacity: 0.6; } 
  40% { opacity: 0.6; } 
  50% { opacity: 0.6; }  
  60% { opacity: 0.6; }  
  70% { opacity: 0.6; }  
  80% { opacity: 0.6; }    
  100% { opacity: 0; } 
} 

@keyframes fadeInOut4 {
  0%{ opacity: 0; } 
  10% { opacity: 0; } 
  20% { opacity: 0; } 
  30% { opacity: 0; } 
  40% { opacity: 0.8; } 
  50% { opacity: 0; }  
  60% { opacity: 0.8; }  
  70% { opacity: 0; }  
  80% { opacity: 0.8; }    
  100% { opacity: 0; } 
} 

.main > *:first-child{ margin-top: 0; }
.main > *:last-child{ margin-bottom: 0; }

.btn-more{ 
	display: inline-block; margin-top: 0; border-bottom: 1px solid var(--c-black-999); 
	font-size: var(--fs-body-large); line-height: var(--fl-body-large);  color: var(--c-black-999);
	-webkit-transition: all 0.5s 0s ease;
    -moz-transition: all 0.5s 0s ease;
    -o-transition: all 0.5s 0s ease;
    transition: all 0.5s 0s ease; 
}
.btn-more:hover{ text-decoration: none; text-indent: 24px; }

.about-content{
	background: #fef4e3; padding: var(--s-big) 0;
	position: relative; z-index: 2;
}
.about-content:before{
	content: ''; display: block; width: 100%; height: 100%;
	position: absolute; top: 0; left: 0; z-index: 0; opacity: 0.15;
	background: url(../images/fav.svg) center 50dvh no-repeat; 
	background-size: auto 75dvh;
	background-attachment: fixed;
	background-attachment: scroll;
} 
.about-content strong{
	font-family: var(--ff-title); font-size: 1.3em; text-transform: uppercase;
}

.energydot-content{ background-color: var(--c-blue); color: #fff; }
.energydot-content .btn-more{ color: var(--c-rose-gold); border-color: var(--c-rose-gold);  } 
.about-content.energydot-content .section-title{ padding-top: 0; position: relative;  }
.about-content.energydot-content .section-title:after{ display: none; } 
.about-content.energydot-content .category-title{ 
	text-transform: uppercase; font-weight: 600; letter-spacing: 0.2em; color: var(--c-rose-gold); 
	display: inline-block; padding-bottom: 6px; margin-bottom: var(--s-main);
	background-size: 50dvw auto;
	border-bottom: 2px solid var(--c-rose-gold);
} 
.energydot-content:before{ display: none; }
.energydot-content .main:before{ 
	content: ''; display: block; width: 100%; height: 15dvw;
	background: url(../images/fav-energy-dot.svg) 0 center no-repeat; 
	position: static;   margin-bottom: var(--s-main);
	background-size: 15dvw auto; 
	background-attachment: scroll; 
	opacity: 1; 
} 
.energydot-content:after{
	content: ''; display: block; width: 100%; height: 100%;
	position: absolute; top: 0; left: 0; z-index: 0; opacity: 0.3;
	background: url(../images/1-t.png) center center no-repeat; 
	background-size: auto 100%;
	background-attachment: fixed;
	background-attachment: scroll;
}

.projects-content{
	background: #fff; padding: var(--s-big) 0;
	position: relative; z-index: 2;
}
.projects-content .main{ }
.projects-content .main .img{ margin-top: var(--s-medium); }
.projects-content .main .img img{ display: block; }

.projects-content .section-title{ padding-top: 0; position: relative;  }
.projects-content .section-title:after{ display: none; } 
.projects-content .category-title{ 
	text-transform: uppercase; font-weight: 600; letter-spacing: 0.2em; color: var(--c-rose-gold); 
	display: inline-block; padding-bottom: 6px; margin-bottom: var(--s-main);
	border-bottom: 2px solid var(--c-rose-gold);
} 

.projects-content.projects-content-bodara > *{ position: relative; z-index: 1; }
.projects-content.projects-content-bodara:after{
	content: ''; display: block; width: 100%; height: 100%;
	position: absolute; top: 0; left: 0; z-index: 0; opacity: 0.6;
	background: #fff url(../images/bg-640.webp) center center no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-attachment: scroll;
}

.social-box{ display: block; width: 100%; text-align: center; margin: var(--m-main) 0; }
.social-box a.icon{ 
	display: inline-block; width: 24px; height: 24px; overflow: hidden;
	margin: 0 12px; text-indent: 999px; 
	background-repeat: no-repeat; background-position: center center; background-size: contain;
}
.social-box a.icon.facebook{ background-image: url(../images/icons/facebook-w.svg); }
.social-box a.icon.youtube{ background-image: url(../images/icons/youtube-w.svg); }
.social-box a.icon.viber{ background-image: url(../images/icons/viber-w.svg); }
.social-box a.icon.instagram{ background-image: url(../images/icons/instagram-w.svg); }
.social-box a.icon.tiktok{ background-image: url(../images/icons/tiktok-w.svg); }

.main-footer{
	background: var(--c-rose-gold); padding: var(--s-big) 0;
	position: relative; z-index: 2; color: #fff;
}
.main-footer .main{ position: relative; }
.main-footer .bottom{ padding-top: var(--s-medium); }
.main-footer .copyright{ display: block; width: 100%; font-size: var(--fs-body-large); line-height: var(--fl-body-large); }
.main-footer .created{ display: block; width: 100%; font-size: var(--fs-body-large); line-height: var(--fl-body-large); margin-top: var(--s-main); }
.main-footer .created a{
	display: inline-block; width: 94px; height: 25px; line-height: 25px;
	vertical-align: middle;
	overflow: hidden;
}
.main-footer .created a:before{
	content: ''; display: block; width: 100%; height: 100%;
	background: url(../images/artlogica.png) center center no-repeat;
	background-size: 100% 100%;
}

.contacts-content{
	background: var(--c-rose-gold);
	position: relative; z-index: 2; color: #fff;  
}
.contacts-content .main,
.main-footer .contacts-content .main{ padding-bottom: var(--s-medium); }

.contacts-content .map{
	display: block; min-height: 550px; height: 80dvh; 
	position: relative; background: #fff;
}
.contacts-content .map iframe{ width: 100%; height: 100%; }
.contacts-content .section-title{ color: var(--c-blue);  }
.contacts-content .section-title:after{ background: var(--c-blue); }
.contacts-content .column{ width: 50%; float: left; }
.contacts-content .column:nth-of-type(2){ text-align: right; }
.contacts-content .social-box{ text-align: left; margin-top: 36px; }
.contacts-content .social-box a.icon:first-child{ margin-left: 0; }

.contacts-content .email a{ font-weight: 400; color: #fff; }
.contacts-content .phone a{ font-size: 1.6em; font-weight: 300; color: #fff; line-height: normal; letter-spacing: 0.05em; color: var(--c-blue); }

@media screen and (orientation: landscape) {
	.main-screen .item:after{ 
		background-size: 100% auto;
	}
}
@media screen and (min-height: 768px) and (orientation: portrait) {
	.main-screen .item-1:after{ 
		background-image: url(../images/1-o.png);
	}
	.main-screen .item-2:after{
		background-image: url(../images/2-o.png);
	}
	.main-screen .item-3:after{
		background-image: url(../images/3-o.png);
	}
	.main-screen .item-4:after{
		background-image: url(../images/4-o.png);
	}   
}
@media screen and (min-width: 768px) and (orientation: landscape) {
	.main-screen .item-1:after{ 
		background-image: url(../images/1-o.png);
	}
	.main-screen .item-2:after{
		background-image: url(../images/2-o.png);
	}
	.main-screen .item-3:after{
		background-image: url(../images/3-o.png);
	}
	.main-screen .item-4:after{
		background-image: url(../images/4-o.png);
	}
}
@media screen and (min-width: 1080px) and (orientation: landscape) {
	.main-screen .item:after{
		background-size: cover;
	}
	.main-screen .item-1:after{ 
		background-image: url(../images/1-b.png);
	}
	.main-screen .item-2:after{
		background-image: url(../images/2-b.png);
	}
	.main-screen .item-3:after{
		background-image: url(../images/3-b.png);
	}
	.main-screen .item-4:after{
		background-image: url(../images/4-b.png);
	}
} 

@media screen and (min-width: 800px) {
	:root{ 
		--fs-body-xlarge: 16x;
		--fl-body-xlarge: 24px;
		
		--fs-title-xlarge: 42px;
		--fl-title-xlarge: 56px; 
		--fs-title-large: 32px;
		--fl-title-large: 48px;  
		--fs-title-medium: 24x;
		--fl-title-medium: 32px; 
		--fs-title-small: 18px;
		--fl-title-small: 28px;   
		
		--fs-display-xlarge: 48px;
		--fl-display-xlarge: 56px; 
		--fs-display-large: 36px;
		--fl-display-large: 48px;  
		
		--s-big: 48px;
		--s-medium: 32px; 
		--s-main: 24px; 
		--w-main: 1080px;
	} 
	
	.main-screen .item h2{ line-height: 1.8em; }
	.main-header a.logo{ width: 60px; height: 180px; }
	.about-content .main {  padding-left: calc( var(--w-main) / 4 ); }
	.about-content:before{  
		background-position: 8dvw 50dvh; 
		background-size: 16dvw auto;
		background-attachment: fixed;
	background-attachment: scroll;
	}
	.energydot-content .main:before{  
		height: 100%; margin-bottom: 0;
		position: absolute; top: 0; left: 0; z-index: 0;
		background-size: 16dvw auto;  
		background-position: 8dvw center;
	}
	
	.projects-content .main{
		display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-big);
		align-items: center;
	}
	.main-footer{ padding-top: 0; padding-bottom: var(--s-medium); }
	.contacts-content{ 
		display: grid; grid-template-columns: 2fr 1fr; gap: 0 var(--s-big);
		align-items: center;
	}
	.contacts-content .main,
	.main-footer .contacts-content .main{ padding: 0 var(--s-big) 0 0;  order: 1; }
	.main-footer .copyright{ display: block; float: left; width: auto; }
	.main-footer .created{ display: block; float: right; width: auto; margin-top: 0; }
	.main-footer .bottom .main:after{ content: ''; display: block; clear: both; }
	
	.projects-content .main .img{ margin-top: 0px; }
	.projects-content .main .img img{ display: block; max-height: calc( 100dvh - ( var(--s-big) * 2 ) ); float: right; }
	
}
@media screen and (max-width: 1024px) and (max-aspect-ratio: 22/1) { 
	.main-header a.logo{ width: 40px; height: 120px; }
} 

@media screen and (min-width: 1024px) {
	:root{ 
		--fs-body-xlarge: 16x;
		--fl-body-xlarge: 24px;
		
		--fs-title-xlarge: 42px;
		--fl-title-xlarge: 56px; 
		--fs-title-large: 32px;
		--fl-title-large: 48px;  
		--fs-title-medium: 24x;
		--fl-title-medium: 32px; 
		--fs-title-small: 18px;
		--fl-title-small: 28px;   
		
		--fs-display-xlarge: 48px;
		--fl-display-xlarge: 56px; 
		--fs-display-large: 36px;
		--fl-display-large: 48px;  
		
		--s-big: 48px;
		--s-medium: 32px; 
		--s-main: 24px; 
		--w-main: 1080px;
	} 
	.main{ padding: 0 var(--s-big); }
	.main-screen .item h2{ line-height: 1.8em; }
	.main-header a.logo{ width: 60px; height: 180px; }
	
	.about-content .main {  padding-left: calc( var(--w-main) / 3 ); }
	.about-content:before{  
		background-position: 8dvw 50dvh; 
		background-size: 16dvw auto;
		background-attachment: fixed;
	background-attachment: scroll;
	}
	.energydot-content .main:before{  
		height: 100%; margin-bottom: 0;
		position: absolute; top: 0; left: 0; z-index: 0;
		background-size: 16dvw auto;  
		background-position: 8dvw center;
	}
	
	.projects-content .main{
		display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-big);
		align-items: center;
	}
	.main-footer{ padding-top: 0; padding-bottom: var(--s-medium); }
	.contacts-content{ 
		display: grid; grid-template-columns: 2fr 1fr; gap: 0 var(--s-big);
		align-items: center;
	}
	.contacts-content .main,
	.main-footer .contacts-content .main{ padding: 0 var(--s-big) 0 0;  order: 1; }
	.main-footer .copyright{ display: block; float: left; width: auto; }
	.main-footer .created{ display: block; float: right; width: auto; margin-top: 0; }
	.main-footer .bottom .main:after{ content: ''; display: block; clear: both; }
}

@media screen and (min-width: 768px) { 
	.projects-content.projects-content-bodara:after{ 
		background-image: url(../images/bg-1024.webp) ;
	}
}
	
@media screen and (min-width: 1024px) { 
	.projects-content.projects-content-bodara:after{ 
		background-image: url(../images/bg-1280.webp) ;
	}
}

@media screen and (min-width: 1280px) { 
	.projects-content.projects-content-bodara:after{ 
		background-image: url(../images/bg-1440.webp) ;
	}
}	
@media screen and (min-width: 1440px) { 
	:root{ 
		--fs-body-xlarge: 16x;
		--fl-body-xlarge: 24px;
		
		--fs-title-xlarge: 28px;
		--fl-title-xlarge: 36px; 
		--fs-title-large: 18px;
		--fl-title-large: 28px;  
		--fs-title-medium: 16x;
		--fl-title-medium: 24px; 
		--fs-title-small: 16px;
		--fl-title-small: 24px;   
		
		--fs-display-xlarge: 48px;
		--fl-display-xlarge: 56px; 
		--fs-display-large: 36px;
		--fl-display-large: 48px;  
		
		--s-big: 48px;
		--s-medium: 32px; 
		--s-main: 24px; 
		--w-main: 1280px;
	} 
	.section-title{ font-size: var(--fs-display-xlarge); line-height: var(--fl-display-xlarge); font-weight: 300; }
	
	.main{ padding: 0 0; }
	html{		 
		/*scroll-snap-type: y mandatory;
		scroll-behavior: smooth;*/
	}
	.scroll-section { 
		/*scroll-snap-align: start;
		scroll-snap-stop: always;*/
		height: 100dvh;
	}
	
	.about-content{ display: flex; }
	.main-footer .contacts-content { min-height: calc(100dvh - 124px); }
	.contacts-content .map{ height: 100%; }
	
	.projects-content.projects-content-bodara:after{ 
		background-image: url(../images/bg-1600.webp) ;
	}
	
	.main-screen .item h2{ font-size: 64px; line-height: 124px; }
}
@media screen and (min-width: 1800px) { 
	:root{ 
		--fs-body-xlarge: 18px;
		--fl-body-xlarge: 28px;
		
		--fs-title-xlarge: 32px;
		--fl-title-xlarge: 42px; 
		--fs-title-large: 22px;
		--fl-title-large: 32px;  
		--fs-title-medium: 18px;
		--fl-title-medium: 28px; 
		--fs-title-small: 16px;
		--fl-title-small: 24px;   
		
		--fs-display-xlarge: 56px;
		--fl-display-xlarge: 60px; 
		--fs-display-large: 48px;
		--fl-display-large: 56px;  
		
		--s-big: 64px;
		--s-medium: 48px; 
		--s-main: 24px; 
		--w-main: 1280px;
	} 
	.section-title{ font-size: var(--fs-display-xlarge); line-height: var(--fl-display-xlarge); font-weight: 300; }
	
	.projects-content.projects-content-bodara:after{ 
		background-image: url(../images/bg-1920.webp) ;
	}
}