@charset "UTF-8";
a,abbr,acronym,address,applet,blockquote,body,caption,cite,code,dd,del,dfn,div,dl,dt,em,fieldset,font,form,h1,h2,h3,h4,h5,h6,html,iframe,img,ins,kbd,label,legend,object,p,pre,q,s,samp,span,strike,sub,sup,table,tbody,td,tfoot,th,thead,tr,tt,var{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline}:focus{outline:0}body{line-height:1;color:#000;background:#fff}table{border-collapse:separate;border-spacing:0}caption,th{text-align:left;font-weight:400}blockquote:after,blockquote:before,q:after,q:before{content:""}blockquote,q{quotes:"" ""}a img{border:0}a,a:hover{outline-style:none}.clear,.clearfix,.clr{clear:both}input,select,textarea{-ms-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-box-sizing:content-box}
@font-face { font-family: 'DINB'; font-style: normal; font-weight: normal; src: local('DIN Pro Bold'), url('../webfonts/DINPro-Bold.woff') format('woff'); font-display: swap; }
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700;900&display=swap');

body { background: #000000; overflow-y: scroll; font-family: 'Roboto', sans-serif; font-size: 18px; font-weight: 300; color: #c3c3c3; overflow-x: hidden; }

#loader { display: flex; flex: 1; position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: #111; align-items: center; justify-content: center; z-index: 99 }

.decor { opacity: 0.15; position: absolute; left: 0; top: 0; width: 100%; z-index: -1; overflow: hidden; }
.decor img { transform: translateX(-790px) translateY(-190px); }

.wrapper { width: 1200px; margin: 0 auto; }

header { padding: 120px 0; }
header.sticky { position: sticky; top: 0; padding: 10px 0px; background-color: #000000; z-index: 9; transition: .4s; }
header .flex { display: flex; flex: 1; align-items: baseline; flex-wrap: nowrap; }
header .logo, .logo { font-family: "DINB", sans-serif; font-size: 24px; color: #ffffff; text-decoration: none;  }

nav { padding-left: 100px; }
nav ul { margin: 0; padding: 0; list-style-type: none; display: flex; align-items: center; }
nav ul li > * { color: #ffffff; text-decoration: none; opacity: 0.66; display: block; padding: 10px 30px 10px 0; }
nav ul li.current > *,
nav ul li.section > * { opacity: 1; cursor: pointer; }

footer { padding: 0 0 80px 0 }
footer p { color: #7c7c7c; line-height: 24px; }
footer p a { color: #7c7c7c; text-decoration: none; }

article h1,
article h2 { font-weight: 100 !important; font-size: 48px; line-height: 54px; margin-bottom: 80px; color: #ffffff; }
article h3 { font-weight: 700; margin-bottom: 40px; color: #ffffff; line-height: 30px; }
article h3 a { text-decoration: none; color: #ffffff; position: relative; }
article h3 a:before { content: ""; display: block; width: 100%; height: 2px; position: absolute; top: auto; bottom: -12px; left: 0; background-color: #ffffff; z-index: -1; transition: .4s; }
article h4 { color: #7c7c7c; font-weight: 900; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; }
article p { line-height: 30px; margin-bottom: 40px; display: inline-block; }
article a { color: #c3c3c3; }
article ul { margin: 0 0 40px 0; padding: 0 ; list-style-type: none; }
article li { line-height: 26px; margin-bottom: 4px; display: flex; align-items: baseline; }
article li:before { content: "—"; padding-right: 15px; } 

.block { margin-bottom: 40px; }

.BlockContent { width: 75%; }

.BlockColumns { width: 75%; display: flex; flex: 1; }
.BlockColumns > div { width: 50%; box-sizing: border-box; padding-right: 40px; }

.BlockPortfolio { display: flex; flex: 1; flex-wrap: wrap; padding-top: 100px; }
.BlockPortfolio > a { width: 50%; box-sizing: border-box; padding-right: 40px; }
.BlockPortfolio > a:nth-child(odd) { margin-top: -100px; }
.BlockPortfolio a { color: #ffffff; text-decoration: none; }
.BlockPortfolio img { margin-bottom: 20px; width: 100%; }
.BlockPortfolio h3 { line-height: 1em; }
.BlockPortfolio h4 { margin-bottom: 20px; }
.BlockPortfolio p { line-height: 20px; margin-bottom: 20px; }

.BlockMap { position: fixed; left: 0; right: 0; bottom: 0; top: 0; z-index: -1; margin: 0; }
.BlockMap .map { position: relative; left: 0; top: 0; width: 100%; } /*height @ main.js*/
/*.BlockMap .mask { position: absolute; left: 0; width: 100%; bottom: 0; height: 150px; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); }*/

.BlockPagination { padding-left: 0 !important; margin-bottom: 60px !important; display: flex; align-items: center; }
.BlockPagination h3 { color: #ffffff; font-weight: 700; opacity: 1 !important; }
.BlockPagination ul { margin-left: 15px; padding-left: 15px; }

.BlockImage img { width: 100%; margin-bottom: -3px; }

.PagePortfolio > div { padding-top: 50px; }
.PagePortfolio > div > *:last-child { margin-bottom: -40px; }
.PagePortfolio > div > .wrapper { overflow: hidden; }
.PagePortfolio .PortfolioBackBtn { text-decoration: none; position: sticky; top: 0; display: flex; flex: 1; width: 100%; box-sizing: border-box; padding: 20px; justify-content: space-between; z-index: 9; }
.PagePortfolio .PortfolioBackBtn > span { display: inline-block; border-radius: 99px; padding: 5px 5px 2px 5px; opacity: .8; }

/*custom*/
::selection { background: #ffffff; }
::-moz-selection { background: #ffffff; }
/* width */
::-webkit-scrollbar { width: 8px; }
/* Track */
::-webkit-scrollbar-track { background: #000000; }
/* Handle */
::-webkit-scrollbar-thumb { background: #111111; }
/* Handle on hover */
::-webkit-scrollbar-thumb:hover { background: #222222; }

svg.feather {
  stroke-width: .6;
  stroke-linecap: square;
  stroke-linejoin: unset;
}

.feather-24 { width: 24px; height: 24px; }
.feather-36 { width: 36px; height: 36px; }
.feather-42 { width: 42px; height: 42px; }
.feather-48 { width: 48px; height: 48px; }

@media only screen and (max-width: 1230px)
{
	.wrapper { width: 90%; }
}

@media only screen and (max-width: 768px)
{
	.wrapper { width: 90%; }
	.wrapper.folio { width: 90%; overflow-x: hidden; }

	.BlockContent { width: auto; }

	.BlockColumns { width: auto; }

	.BlockPortfolio img { width: 100%; }
}

@media only screen and (max-width: 480px)
{
	/*.decor { transform: translateX(200px); }*/
	.wrapper { width: 90%; }
	.wrapper.folio { width: 100%; overflow-x: hidden; }

	header { padding: 60px 0 65px 0; }
	/*header .flex { justify-content: space-between; }
	header nav { margin: 0; }
	header nav ul li:not(:last-child) { display: none; }
	header nav ul li:last-child { display: block; }
	header nav ul li:last-child a { padding: 0; opacity: 1; }*/
	header nav { padding-left: 20px; margin-left: 20px; overflow-x: auto; overflow-y: hidden; -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%); }
	header nav::-webkit-scrollbar { height: 0; }
	header nav ul li > * { padding-right: 20px }

	footer p { display: inline; }

	.block { margin-bottom: 0; }

	.BlockContent { width: auto; }

	.BlockColumns { width: auto; display: inherit; }
	.BlockColumns > div { width: auto; padding: 0; }

	.BlockPortfolio { flex-wrap: wrap; padding-top: 0; }
	.BlockPortfolio > a { width: auto; padding-right: 0; margin-bottom: 40px; }
	.BlockPortfolio > a:nth-child(odd) { margin-top: 0; }
	.BlockPortfolio img { width: 120%; }
	.BlockPortfolio h4 { width: 90%; margin: 0 auto 20px auto; }
	.BlockPortfolio p { display: block; width: 90%; margin: 0 auto 20px auto; }
	.BlockPortfolio h3 { width: 90%; margin: 0 auto 40px auto; line-height: 1em; }

	.BlockImage { width: auto; overflow: hidden; }
	.BlockImage img { width: 120%; }

	.BlockPagination ul { overflow-x: scroll; -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%); }
	.BlockPagination ul::-webkit-scrollbar { height: 0; }

	article h1, article h2 { font-size: 35px; line-height: 40px; margin-bottom: 40px; }

	.PagePortfolio > div { padding-top: 40px; }
	.PortfolioBackBtn { padding: 12px; }
}