@font-face {
    font-family: "Raleway";
    src: url("fonts/Raleway-ExtraLight.ttf") format("truetype");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Raleway";
    src: url("fonts/Raleway-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Raleway";
    src: url("fonts/Raleway-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Raleway";
    src: url("fonts/Raleway-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Raleway";
    src: url("fonts/Raleway-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Raleway";
    src: url("fonts/Raleway-ExtraBold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter_18pt-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter_18pt-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}





:root {
--primary-cta-color:#ff5f3f;
	
--main-title-color:#ffffff;

--alltext-color:#272d2d;

--textbox-background:whitesmoke;
}



* { -webkit-transition: all .35s ease-out;
    -moz-transition: all .35s ease-out;
    -o-transition: all .35s ease-out;
    transition: all .35s ease-out; 
    }
    
b, strong {
    font-weight: 500;
 }
    

a, a:hover {
	color: var(--primary-cta-color);
	border-radius:4px;
	text-decoration:none;
	}



body {
	font-family: 'Inter';
	font-size: 16px;
	line-height: 1.4rem;
	background-color: #39504d;
	background-image: url(img/main-bg.svg);
	background-size: cover;
	color: var(--alltext-color);
	background-blend-mode: luminosity;
	}





h1, h2, h3, h4 {
    font-weight: 200;
    text-transform: uppercase;
    font-family: "Raleway";
    line-height: 100%;
    }


#subpage h1 {
	font-size: 6rem;
	margin: 1.5rem 0 4rem;
	padding-left: 9rem;
	padding-right: 16rem;
	position:relative;
	width: 100%;
	color: var(--main-title-color);
	}

h1.subpage-title::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 0;
    width: 110px;
    height: 110px;
    background-image: url(img/ti-about.svg);
    background-size: contain;
    background-repeat: no-repeat;
 }

    h1.consultancy-work-title::before { 
    background-image: url(img/ti-cons-w.svg);
    }

	h1.books::before { 
    background-image: url(img/ti-books-w.svg);
    }

	h1.designworks-title {
	padding-left: 10rem;
	}
	h1.designworks-title::before {
    background-image: url(img/ti-design-w.svg);
    left: 1rem;
    }
    
    h1.design-sub-h1::before {
    background-image: url(img/ti-designd-det.svg);
    }

	h1.contact-title::before { 
    background-image: url(img/ti-contact-w.svg);
    }


h2 {
	font-size: 2.5rem;
	font-weight: 300;
	margin-bottom: 1.5rem;
	text-transform: none !important;
	}


.header-logo {
    background-image: url(img/sztl-logo.svg);
    position: absolute;
    left: 1.5rem;
    top: 0;
    width: 210px;
    height: 180px;
    display: block;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    outline: none;
    }


.container {
	max-width: 1440px;
	padding: 0 3rem;
	}

#frontpage .contaner {
	width:50%;
	}


/* upper horizontal menu */

.main-menu { 
	height: 110px; 
    }

.hmenu-toggle {
    display:none;
    position: fixed;
    width:60px;
    height:60px;
    right: 33px;
    top: 42px;
    border-radius: 4px;
    cursor: pointer;
    z-index: 999;
    background-image: url(img/menu.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50%;
    background-color: rgb(57 80 77 / 20%);
    backdrop-filter: blur(10px);
    }


	.toside { right: 0; }
    .toright { right: 33px!important; }


#hmenu nav {
	max-width: 1440px; 
    margin: 0 auto; 
    position: relative;
    }

#hmenu nav ul {
	display: flex;
	justify-content:flex-end;
	align-items:center;
	margin: 0 2rem 1rem 240px;
	width: calc(100% - 240px);
	height: 144px;
	}

#hmenu nav ul li {
	list-style-type: none;
	height: 78px;
	display: flex;
	border-bottom: 1px solid #272d2d;
	}

#hmenu nav ul li a {
	padding: 0 1.75rem;
	display: flex;
	justify-content: center;
	height: 100%;
	align-items: center;
	font-weight: 600;
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: 3px;
	color: var(--primary-cta-color);
	font-family: "Raleway";
	outline: none!important;
	}

#hmenu nav ul li a:hover { 
	margin-top:1rem;
	text-decoration: none;
	color:#fff;
    background-color: var(--primary-cta-color); 
  	}


#hmenu .current-menu-item > a {
    margin: 0 1px;
    background-color: #374e4b;
    pointer-events: none;
	border-radius:4px 4px 0 0 
 }



    
    
   .fixme {position:fixed;z-index: 99;}
   .minime {width: 144px;height: 96px;margin-top: 1.5rem;}
   .showme { display:block!important; }
   .hideme { display:none; }
   
   .close-menu { background-image: url(img/menu-close.svg);}
   



/* ***  frontpage  *** */



#frontpage h1.frontpage-title {
	font-size: 5rem;
	margin: 0 0 3rem 0;
	position: relative;
	width: 100%;
	padding:0!important;
	color: var(--main-title-color);
	z-index: 3;
	text-align: center;
	}

#frontpage h2 {
	color:#fff;
	width: 100%;
	font-size: 2.25rem;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	padding: 1.25rem 0;
	text-align: center;
	margin-bottom: 4rem;
	z-index: 0;
	}

section#frontpage {
    width:100%;
    height:100%;
    position:relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    }

section#frontpage::before {
	content:"";
	position:absolute;
	width:75%;
	height:100%;
	background-image: linear-gradient(-90deg, rgb(0 0 0 / 90%), transparent);
	top:0;
	right:0;
	mix-blend-mode: multiply;
	z-index:0;
	}
    
    section#frontpage::after {
	content:"";
	position:absolute;
	width: 100%;
	height:100%;
	background-image: url(img/sztl-photo-covered.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: right;
	bottom: 0;
	right: 0;
	mix-blend-mode: inherit;
	z-index: 2;
	}
    
.frontpage-box {     
	width: 50%;
    z-index: 3;
    min-width: 360px;}


/* subpages */

.subpage-consultancywork img {
    width: 100%;
    aspect-ratio: 16 / 12;
    object-fit: cover;
}

.subpage-about img {
    width: 100%;
    aspect-ratio: 16 / 12;
    object-fit: cover;
}

img.lastimg  {
	 width: 100%;
    aspect-ratio: 16 / 24!important;
    object-fit: cover;
} 


.breadcrumb-url-line {font-size: .9rem;width: 100%;color: #fff;}

a.breadcrumb-url, a.breadcrumb-url:hover  {
	color: var(--primary-cta-color);
	text-decoration:none;
	font-weight:500;
	border-bottom: 4px solid #435e5b;
	padding-bottom: 3px;
	} 

#subpage .container {
	margin-top: 5rem;
	}

#subpage .subpage-content {
	background-color:#fff;
	padding: 1.5rem 1.5rem 2rem;
	margin-bottom: .5rem;
	border-radius: 4px;
	}


.work-chapter {margin-bottom: 1.5rem;
	background: whitesmoke; 
    padding: 2rem;
    border-radius: 2px;
    overflow:auto;
    }

.work-chapter-text {
    display: inline-block;
    width: calc(50% + 1rem);
    padding-bottom:1rem;
	}

.work-chapter-text-about {
	width: calc(50% - 2rem);
    display: inline-block;
    padding-bottom:1rem;
    }


.work-chapter h2 {
	margin: 2.5rem 2rem 1.5rem 0;
	font-size: 2.5rem!important;

	}

.work-chapter h2:first-of-type  {
	margin-top:0!important; 
	word-break: break-word;}

#subpage .subpage-consultancywork img {
	float: left;
	margin-left: 0;
	margin-right: 2rem;
	margin-bottom: 1rem;
	margin-top: 0;
	max-width: calc(50% - 3.5rem);
	border-radius: 2px;
	}


#subpage .subpage-about img {
	float: left;
	max-width: 50%;
	margin-bottom: 1rem;
	margin-right: 2rem;
	margin-top: 0;
	border-radius: 2px;
	}

#subpage .subpage-about { padding-bottom:0; }


#subpage .subpage-content figure {
    position:relative;
    z-index:1;
    display: block;
	}

#subpage .subpage-content figure img {
    display: block;
 }

#subpage .subpage-consultancywork figure:before {
    content:"";
    position:absolute;
    left: -3.5rem;
    top: 3rem;
    width: 5.5rem;
    height: 3.5rem;
    background: #435e5b;
    z-index:99999;
    mix-blend-mode: plus-lighter;
    border-radius: 0 3px 36px 0;
 }


#subpage .subpage-content figure:before {
    content:"";
    position:absolute;
    left: -3.5rem;
    top: 3rem;
    width: 5.5rem;
    height: 3.5rem;
    background: #ddd;
    z-index:99999;
    mix-blend-mode: multiply;
    border-radius: 0 3px 36px 0;
 }



/* ** subpages BOOKS ** */

.read-more, .read-more:hover { font-weight:500; text-decoration:none; } 

a.jumpy, a.jumpy:hover {
    font-size: 13px;
    font-family: "Raleway";
    position: absolute;
    max-width: 280px;
    text-align: center;
    display: block;
    bottom: .75rem;
    margin-top: 2rem;
    right: 0;
    font-weight: 600;
    line-height: 1.5rem;
    letter-spacing: 2px;
    text-decoration:none;
    border: 1px solid #374e4b;
    padding: .5rem 1rem .5rem 48px;
    background-image: linear-gradient(135deg, #435e5b, #2a413e);
}

a.jumpy:hover { background:#fff; }
a.jumpy:hover::before { background-color:var(--primary-cta-color); }

a.jumpy::before {
	 content:"";
	 position:absolute;
	 width:28px;
	 height:28px;
	 border-radius:2px;
	 top:6px;
	 left:6px;
	 background-color: var(--primary-cta-color);
	 background-image: url(img/arrow.svg);
	 background-size: 50%;
	 background-position: center;
	 background-repeat: no-repeat;
	 transform: rotate(90deg);
	 }


#translated {
    scroll-margin-top: 88px;
}


#subpage .books-project-box {
	display:flex;
	border-radius: 4px;
	}

#subpage .books-picbox {background-color: #39504d;display: flex;align-items: center;padding-top: 25%;background-size: cover;background-position: center;background-blend-mode: color;min-width: 330px;min-height: 330px;}
#subpage .books-picbox img {position: absolute;width: 100%;height: 100%;object-fit: contain;top: 0;left: 0;padding: 0 20%;}

#subpage .translations-picbox {background-color: #39504d;display: flex;align-items: center;padding-top: 25%;background-size: cover;background-position: center;background-blend-mode: color;min-width: 330px;min-height: 330px;}
#subpage .translations-picbox img {position:absolute;width: 100%;height: 100%;object-fit: contain;top: 0;left: 0;display: block;padding: 0 20%;}

#subpage .books-picbox img, #subpage .translations-picbox img {
	max-width:100%;
	}

#subpage .books-textbox {
	background: whitesmoke;
	padding: 2rem;
	border-radius: 3px;
	max-width: calc(100% - 330px);
	} 


h2.subpage-sub-title  {
	font-size: 3.75rem;
	margin:5rem 0 4rem;
	color: var(--main-title-color);
	} 




/* ** subpages ABOUT ** */

#subpage .bio-box {
	padding: 2rem;
	font-size: .9rem;
	border-radius: 2px;
	position: relative;
	left: -1.5rem;
	background: var(--textbox-background);
	background-image: linear-gradient(90deg, #ffffff, #f5f5f5);
	height: calc(100% - 1.5rem);
	width: calc(100% + 1.5rem);
	/* margin-bottom: 2rem; */
	}

#subpage .bio-box::before {
	/* content:""; */
}


#subpage .bio-box h4 {
	font-size: 1.25rem;
	line-height:1.5rem;
	margin-top: 2.5rem;
	margin-bottom: .75rem;
	font-weight: 500;
	position: relative;
	padding-left: 39px;
	letter-spacing: 0;
	font-family: "Raleway";
}

#subpage .bio-box h3 {
	font-size: 1.75rem;
	margin-top: 1.25rem;
	margin-bottom: 1.5rem;
	font-weight: 500;
	position: relative;
	padding-left: 0;
	word-break: break-word;
}

#subpage .bio-box h4::before {
	content:"";
	position:absolute;
	width: 33px;
	height: 33px;
	background-color: rgb(235 235 235);
	left: -2px;
	top: -5px;
	border-radius: 40px;
	background-image: url(img/profession.svg);
	background-size: 25px;
	background-position: center;
	background-repeat: no-repeat;
	/* border: 2px solid; */
}

#subpage .bio-box h4:first-of-type::before {
	background-image: url(img/diploma.svg);
}


#subpage .bio-box ul {
	padding:0;
	margin-bottom: 2rem!important;
	display: block;
}

#subpage .bio-box ul li {
	margin-bottom: 1rem;
	list-style-type:none;
	padding-left: 1.25rem;
	position: relative;
}

#subpage .bio-box ul li::before {
	content:"";
	position:absolute;
	left: 0.25rem;
	top: .5rem;
	width:4px;
	height:4px;
	background: #808786;
	border-radius:2px;
}



#subpage .bio-box .hello-contact {
	padding: 2rem 1.5rem 2.25rem 10.25rem;
	background-color: #cdede9;
	margin-top: 4rem;
	margin-bottom: 4rem;
	background-image: linear-gradient(135deg, rgb(60 180 164 / 20%) 20%, transparent 60%);
	}


.hello-text::before {
	content:"";
	position:absolute;
	right: .5rem;
	top: .5rem;
	width: 24px;
	height: 24px;
	/* background: #ceeeea; */
	margin:.5rem;
	background-image: url(img/in-logo.svg);
	background-position: center;
	background-size: contain;
	mix-blend-mode: normal;
	} 


#subpage .bio-box .hello-contact h4 {
	padding:0;
	text-transform: inherit;
	font-weight: 800;
	font-size: 2rem;
	line-height: 1.75rem;
	margin-bottom: .75rem;
	color: #30b09f;
	margin-top: 0;
}

#subpage .bio-box .hello-contact h4::before {
	display:none;
}




/* ** subpages DESIGN WORKS ** */

.backtod {
	width: 20%!important;
	text-align: center;
	padding: 0!important;
	color: #fff!important;
	background-color: #ff5f3f !important;
	text-transform:uppercase;
	font-size: 14px;
	letter-spacing: 1px;
	line-height: 1.2rem;
	border: 2px solid;
	display: none!important;
	}

.backtod::before { display:none; }

.next-prev-post {
    background-color: #ff5f3f;
    padding: 1.5rem 1.5rem 1.5rem;
    display: flex;
    margin-top: 2rem;
    position: relative;
    border: 0;
    border-radius: 3px;
}

.next-prev-post a {
    width: calc(50% - 3px);
    line-height:1.2rem;
    border: 2px solid;
    padding: 1rem;
    margin: 2px;
    border: 0;
    color: var(--primary-cta-color);
    background-color: #fff;
    font-weight:500;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgb(0 0 0 / 15%);
    position: relative;
    /* background-image: linear-gradient(135deg, #64c4b8, #b9e3da); */
    right: 0;
    /* height: 54px; */
 }

.next-prev-post a::before {
	content:"";
	position:absolute;
	right: 9px;
	top: calc(50% - 18px);
	width: 36px;
	height:36px;
	border-radius:2px;
	background: #ff5f3f;
	background-image: url(img/arrow.svg);
	background-position: center;
	background-size: 15px;
	background-repeat: no-repeat;
	display: none;
	}

.next-prev-post a:first-child {
	/* padding-left:60px; */
	}
.next-prev-post a:first-child::before {	
	left:9px;
	transform:rotate(180deg);
	}


#subpage .subpage-designwork {  }

#subpage .designwork-project-box { 
	display: flex;
    }

#subpage .design-work-picbox {
	padding:0;
	margin:0;
	position:relative;
	aspect-ratio: 16 / 8;
	} 

#subpage .design-work-picbox img {
	max-width:100%;
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
	object-fit:cover;
	margin: 0!important;
	}

#subpage .design-work-textbox h2 a {
	color:#000;
	text-decoration:none; 
}

#subpage .design-work-textbox {
	background: var(--textbox-background);
	padding: 2rem 2rem 4rem;
	}

.pagination-top, .pagination-bottom {
	display:block;
    text-align:center;
    margin-bottom:3rem;
    width: 100%;
	}
    
    .pagination-bottom { margin-top:3rem; margin-bottom:0; }

.page-numbers, .page-numbers:hover {
	font-size:16px;
	border: 1px solid #374e4b;
	CONTAIN-INTRINSIC-BLOCK-SIZE: AUTO 100PX;
	width:60px;
	height: 60px;
	display:inline-grid;
	text-decoration:none;
	font-weight: 500;
	text-transform:uppercase;
	font-family: "Raleway";
	place-items: center;
	margin: 2px 0;
	background-image: linear-gradient(135deg, #435e5b, #2a413e);
	}

a.next, a.prev {font-weight: 600;width:auto;height: 60px;min-width: 130px;font-size: 13px;letter-spacing:2px;text-align: center;}
a.next, a.next:hover {position:relative;padding-right: 42px;font-size: 13px;font-weight: 600;}
a.next:hover::before, a.prev:hover::before { background-color:var(--primary-cta-color); }
a.prev, a.prev:hover {position:relative;padding-left: 42px;font-size: 13px;font-weight: 600; }
a.prev:hover, a.next:hover,.page-numbers:hover {background: #fff;color: var(--primary-cta-color);} 

a.prev::before {
			   content:"";
			   position:absolute;
			   width: 36px;
			   height: 36px;
			   top: 11px;
			   left:11px;
			   background: var(--primary-cta-color);
			   border-radius: 2px;
			   background-image: url(img/arrow.svg);
			   background-position: center;
			   background-size: 15px;
			   background-repeat: no-repeat;
			   transform:rotate(180deg);
			   }

a.next::before {
			   content:"";
			   position:absolute;
			   width:36px;
			   height:36px;
			   top: 11px;
			   right: 11px;
			   background-color: var(--primary-cta-color);
			   border-radius: 2px;
			   background-image: url(img/arrow.svg);
			   background-position: center;
			   background-size: 15px;
			   background-repeat: no-repeat;
			   }


.current {
	border-radius:5px;
	color: #fff;
	}

.readmore, .readmore:hover {
	width: 100%;
	display: block;
	position: absolute;
	bottom: 1rem;
	left: 2rem;
	font-weight: 500;
	text-decoration: none;
	padding: 1rem 0;
	}




/* ** CONTACT ** */

.contact-row { padding:0; margin:0;  }

.contact-msg { padding:0; margin:0. }

.hello-contact {
    width: 100%;
    background-color: #cdede9;
    background-image: linear-gradient(135deg, rgb(60 180 164 / 40%) 20%, transparent 60%);
    padding: 2rem 1.5rem 2.25rem 10.25rem;
    margin-top: 3rem;
    border-radius: 4px;
    position: relative;
    min-height: 166px;
    color: #186258;
    font-weight: 500;
    }

.hello-photo {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    width: 120px;
    height: 120px;
    background: #ffffff;
    border-radius: 60px 60px 8px;
    z-index: 3;
    }



.hello-photo::before {
	content:"";
	position:absolute;
	width:calc(100% - 1rem);
	height:calc(100% - 1rem);
	background: #ceeeea;
	border-radius:100%;
	margin:.5rem;
	background-image: url(https://szalay.scot/wp-content/uploads/2026/07/sztl-cover-mini.jpg);
	background-position: center;
	background-size: contain;
	mix-blend-mode: normal;
	} 


.hello-contact::after {
	content:"";
	position:absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	background-image: url(img/in-logo.svg);
	background-repeat:no-repeat;
	background-position: center;
	background-size: cover;
	mix-blend-mode:overlay;
	opacity:.3;
	z-index: 1;
	} 

.hello-text h4 {
	text-transform: inherit;
	font-weight: 800;
	font-size: 2rem;
	line-height: 1.75rem;
	margin-bottom: .75rem;
	color: #30b09f;
	margin-top: 0;
	z-index:9;
	}

.hello-contact::before {
	content: "Let's go!";
	font-size: .8rem;
	padding-top: 2px;
	text-align: center;
	color: #fff;
	font-weight: 700;
	position:absolute;
	width: 96px;
	height: 36px;
	bottom: -15px;
	right: 0;
	border-radius:60px;
	background-color: #ff5f3f;
	background-image: linear-gradient(45deg, #e6ac25, transparent);
	border: 4px solid #cdede9;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: right;
	z-index: 3;
	}
 


textarea:focus,
input:focus,
select:focus {
    outline: none;
    background: #e7fffc;
}

.wpcf7-not-valid-tip {
    color: #7ef0ff!important;
    font-size: 1em;
    font-weight: normal;
    display: block;
    text-transform: initial;
    padding: .5rem 0 0;
}


label {
	width: 100%;
	display: block;
	padding: 2rem 2rem 0;
	background-color: #435e5b;
	margin-bottom: 0;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: .8rem;
	color: #ddd;
	}

.contact-msg p {     
	margin-top: 0;
    margin-bottom: 0;
}


.contact-textbox {padding: 3.5rem;background-image: linear-gradient(0deg, transparent, whitesmoke);}

.contact-textbox h3 {
    margin-bottom: 1rem;
    font-weight: 400;
    color: #435e5b;
    }

.wpcf7-list-item {
	width: 100% !important;
	display: block;
	padding: 0.75rem 2rem 1.25rem;
	margin-top: 1rem;
	}

	.wpcf7-list-item label {padding:0!important;margin-top: 1rem;margin-bottom: 1rem;}
    
    
.wpcf7-submit {
	max-width: calc(100% - 4rem);
	margin: 2rem;
	padding: 1.25rem;
	color: #fff;
	background-color: var(--primary-cta-color);
	border: 0;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 2px;
	box-shadow: 0 10px 10px #ddd;
	border-radius: 4px;
	}


input[type=checkbox], input[type=radio] {
    box-sizing: border-box;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    text-align: left !important;
    position: absolute;
    left: 0;
    top: 0;
    margin: -.25rem 0 0 0;
    }


button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    line-height: inherit;
    padding: .75rem;
    margin-top: .5rem;
    font-size: 1rem;
    outline: none;
    width: 100%;
    border-radius: 4px;
    border: 1px solid #435e5b;
    background: #ddd;
}


input[type="checkbox"] {
    appearance: none;
    width: 24px;
    height: 24px;
    background: #dddddd;
    border: 0;
    border-radius: 2px;
    cursor: pointer;
}


input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.15);
}


input[type="checkbox"]:checked {
    background: #39504d;
}

input[type="checkbox"]:checked::after {
    content: "x";
    font-weight: 700!important;
    color: white;
    font-size: 14px;
    display: block;
    text-align: center;
    margin: 0 8px;
}




/* footer */

footer {
	width: 100%;
	background-color: #272d2d;
	padding: 6rem 0 7rem;
	margin-top: 7rem;
	position: relative;
	}

footer::before {
	content:"";
	position:absolute;
	width: 90px;
	height: 90px;
	FONT-VARIANT: JIS83;
	top: -41px;
	left: calc(50% - 45px);
	/* background-color: #39504d; */
	border-radius: 1200px;
	background-image: url(img/drop-white.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-size: 80%;
	FONT-VARIANT: JIS90;
	transform: rotate(180deg);
	}
    
footer ul {
    padding: 0;
    column-count: 2;
    margin: 0;
    }

footer ul li a {
			   padding:.5rem 1rem;
			   margin-bottom: .75rem;
			   display:block;
			   font-size:1rem;
			   font-weight:500;
			   opacity: .8;
			   border-radius: 0;
			   border-bottom: 1px solid #2a413e;
			   }

footer ul li a:hover { opacity: 1; text-decoration:none;  }


.footer-brandbox {text-align:right;position: relative;}


.footer-brand {
	display: flex;
	opacity: .4;
	height: 90px;
	width: 100%;
	margin-bottom:1rem;
	background-image: url(img/sztl-logo.svg);
	background-size: contain;
	background-repeat: no-repeat;
	margin-top: 0;
	background-position: right;
	text-align: right;
	}
    
    
a.footer-btn {text-decoration: none;font-size: 13px;text-transform: uppercase;font-family: "Raleway";position: absolute;max-width: 240px;text-align: center;display: block;bottom: .75rem;margin-top: 2.5rem;right: 0;bottom: 0;font-weight: 600;line-height: 1.5rem;letter-spacing: 2px;text-decoration: none;border: 1px solid #374e4b;padding: .5rem 1rem .5rem 48px;background-image: linear-gradient(135deg, #435e5b, #2a413e);}

a.footer-btn::before {
	content: "";
	position: absolute;
	width: 28px;
	height: 28px;
	border-radius: 2px;
	top: 6px;
	left: 6px;
	background-color: var(--primary-cta-color);
	background-image: url(img/mail.svg);
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
	}


.text-inside {
    padding: 4rem;
    background-color: whitesmoke;
    margin-bottom: 1.5rem;
	}




	#hmenu nav ul li.home-mobile a { 
    display:none; 
    }
    
    
    
    

@media (max-width: 1440px) {

	#subpage .bio-box {
		padding-left:.75rem;
	}

	#subpage .bio-box .hello-contact {
	padding: 10rem 1rem 2.5rem 1.5rem;
	z-index: 3;
	}
    
    
    .work-chapter-text, .work-chapter-text-about {
    display: contents;
    }
	


}





@media (max-width: 1024px) {

.hmenu-toggle {
    display:block;    
    }

 #hmenu nav ul li { display:none; }

 #hmenu nav ul li a:hover { margin-top:0; }
	
   
   .mobile-menu {
   	background: rgb(67 94 91 / 90%);
   	border: 1px solid #374e4b;
   	position: fixed;
   	z-index: 9;
   	padding: 120px 1.5rem 30px;
   	text-align: center;
   	width: calc(100% - 175px)!important;
   	min-width: 360px;
   	margin: 0!important;
   	top: 0;
   	right: 0;
   	height: 100%!important;
   	border-radius: 0;
   	backdrop-filter: blur(10px);
   }


	#hmenu nav ul li.home-mobile a {
	position: absolute;
    margin-top: 2.25rem;
    width: 160px;
    height: 120px;
    left: calc(50% - 80px);
    background-color: transparent !important;   
	color: transparent !important;
	background-image: url("img/sztl-logo.svg");
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;	
    display:block;
    filter:saturate(.25);
	}

	#hmenu nav ul li.home-mobile a:hover { filter:saturate(1); }

	#hmenu nav ul li.home-mobile { 
		border:0;
		position:relative; }

	#hmenu nav ul li.home-mobile::before {
		content:"";
		position: absolute;
		width:110px;
		height:110px;
		background: #374e4b;
		border-radius:100%;
		left:calc(50% - 55px);
		top:calc(50% - 11px);
	}



	#hmenu nav ul li {
    border-bottom: 1px solid #374e4b;
    outline: 0;
    }


	.hello-contact {
    width: 100%;
    border: 0 solid rgb(133 212 202);
    background-color: rgb(133 212 202 / 40%);
    background-image: linear-gradient(135deg, rgb(60 180 164 / 20%) 30%, transparent 80%);
    padding: 10rem 1.5rem 2.25rem 1.5rem;
 	} 
    

    
	}






@media (max-width: 910px) {

	a.jumpy, a.jumpy:hover {
    position: relative;
    max-width: 310px;
    left: 5px;
    margin-right: .5rem;
 }


	
	#subpage .books-picbox img  {
		padding: 3%;
	}

	#subpage .translations-picbox img {
		padding: 3%;
	}
	
    
    
    #subpage h1 {
    font-size: 4.5rem;
    padding-right: 0;
    }

	}





@media (max-width: 840px) {


	#subpage .subpage-about {
		min-width: 100%;
		flex: 0 0 100%;
	}

	#subpage .col-sm-4 { 
		padding-left:3rem!important;
	}


	#subpage .bio-box {
		background-image: linear-gradient(0deg, #ffffff, #f5f5f5);
		padding-bottom: 3rem;
		padding-left: 2rem;
	}

	

	#subpage .books-project-box {
    display: block; 
    }

	#subpage .books-picbox, #subpage .translations-picbox, #subpage .books-textbox {
    min-width: 100%;
    min-height: 290px;
    flex: 0 0 100%;
    }


	.contact-textbox {padding-left:2rem;padding-right: 2rem;}

	.hello-text::before {
	content:"";
	position:absolute;
	right: .5rem;
	top: .5rem;
	width: 30px;
	height: 30px;
	margin:.5rem;
	background-image: url(img/in-logo.svg);
	background-position: center;
	background-size: contain;
	mix-blend-mode: normal;
	} 
	

	#subpage .bio-box .hello-contact {
	padding: 2rem 6rem 2.25rem 10.25rem;
	}


	}




@media (max-width: 768px) {


	#subpage h1 {
        font-size: 3.25rem;
        margin: 1.5rem 0 4rem;
        padding-left: 0;
        padding-right: 0;
        padding-top: 7rem;
        position: relative;
        width: 100%;
        word-wrap: break-word;
    }

	.designworks-title-row { padding-left:1rem; }
	.designworks-title-row h1::before { margin-left:-1rem; }


	.subpage-contact { display:flex; }
	.contact-msg, .contact-textbox { max-width:100%; flex:0 0 100%; }
	.contact-textbox { order:1; }
	.contact-msg { order:2; }

	.hello-contact {
    padding: 10rem 1rem 2.5rem 1.5rem!important;
    margin-top: 4rem;
    margin-bottom: 2rem;
    }

	
	footer { padding-bottom:4rem}
	
	footer .col-sm-8, footer .col-sm-4 {     
	flex: 0 0 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    }

	footer .col-sm-4 .footer-brand {
	background-position:center;
	margin-top:2rem;
	margin-bottom: 2rem;
	height: 100px;
	}

	footer .footer-btn {position:relative;margin: 1.5rem auto;display: block;}


	}





@media (max-width: 690px) {
	


	#subpage .subpage-about img {
    max-width: 100%!important;
    flex:0 0 100%!important;
    margin-bottom: 2rem;
	}
	
	#subpage .subpage-about h2 { 
	margin-top:2rem!important; 
	}



#subpage .subpage-consultancywork img {
	max-width: 100%!important;
	flex:0 0 100%!important;
	margin-bottom: 2rem;
	}

.work-chapter h2:first-of-type {
    margin-top: 2.5rem!important;
	}

	
.text-inside {
    padding: 2rem;}
	
    #subpage .designwork-project-box {
        display: block;
    }

    #subpage .design-work-picbox {
        padding: 0;
        margin: 0;
        position: relative;
        max-width: 100%;
        flex: 0 0 100%;
        height: 240px;
    }


    #subpage .design-work-textbox {
        background: var(--textbox-background);
        padding: 2rem 2rem 4rem;
        max-width: 100%;
        flex: 0 0 100%;
    }

	}
    
    



@media (max-width: 476px) {    


	h2.subpage-sub-title {
    font-size: 2.75rem; 
	}
    

    .container {
    padding: 0 2rem;
	}
    
    
    #subpage .subpage-content img {
    margin-right: 0;
    margin-bottom: 1.5rem;
    margin-top: 0;
    max-width: 100%;
    }

    footer .col-sm-8 ul {
		column-count:1;
		margin-bottom:1rem
	}



	#subpage .bio-box .hello-contact {
        padding: 2rem 1.5rem 10rem 10.25rem;
    }


}




.sztl-enter-logo {
    width: 100%;
    display: block;
    padding-top: 11%;
    min-height: 140px;
    z-index: 3;
    background-image: url(img/sztl-logo.svg);
    background-size: contain;
    background-repeat:no-repeat;
    background-position: center;
    outline: none;
    }