:root
{
	--header-height: 80px;
	--header-height: 7.4vh;
	/*	--color1: #ab00ba;*/
	--color1: #116CFF;
	--color2: #da06ed;
	--color3: #e97dff;
	--bc_color0: #F0F0F0;
	--bc_color1: #404040;
	--bc_color2: #808080;
	--bc_color3: #C8C8C8;
}

.no-wrap 
{
    white-space: nowrap;
}


body 
{
	color: #000000;
	background-color: white;
	margin: 0;
	padding: 0;
	font-family: 'Jost', "Yu Gothic", Arial, sans-serif;
}

header
{
	width:100%;
	height: var(--header-height);
	text-align: center;
	position:fixed;
	top:0;
	z-index:255;
	
	--letter-size: 18px;	
	--letter-size: 1.91vh;	
	--letter-color: black;	
	--active-color: var(--color1);
}

@keyframes navShown 
{
	from 
	{    
		background: rgba(255,255,255,0.05);
	}
	to 
	{    
		background: rgba(255,255,255,0.95);
	}
}

body.Art header, body.bios header, body.nws header
{
    box-shadow: 0px 4px 15px rgba(0,0,0,0.07);
    background: rgba(255,255,255,0.95);
}

header.ShadShow, header.Shown
{
    background: rgba(255,255,255,0.95);
    box-shadow: 0px 4px 15px rgba(0,0,0,0.07);
}

.Shown, .responsive
{
    animation-name: navShown;
    animation-duration: 1s;  
    animation-delay: 0.3s;
    animation-fill-mode: backwards;
}


header nav
{
    display: inline-block;
    padding:0;
    margin:0;
    vertical-align: middle;
}


header a
{
    font-style: normal;
    /* font-weight: 500; */ 
    font-size:
    var(--letter-size);
    color: var(--letter-color);
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
}

header a svg
{
    height:var(--letter-size);
    fill: var(--letter-color);
}

header a:visited
{
    color: var(--letter-color); 
}

header a:active, header a.active
{
    color: var(--active-color); 
}

header a:active svg
{
    fill: var(--active-color); 
}

header a:hover, header a:focus
{
    color: var(--active-color); 
}

header a:hover svg, header a:focus svg
{
    fill: var(--active-color); 
}
header a.active:hover, header a.active:focus
{
    color: var(--letter-color); 
}

header nav 
{
    text-align: justify;
    text-align-last: justify;
    /*max-width: 660px;*/
    text-wrap: nowrap;
    white-space: nowrap;
    width:35%;
    width: calc( var(--header-height) * 8.25 );
    clear: both;
    overflow: hidden;
    min-width:945px;
    min-width:55.3%;
    margin:-26px 212px 0 0;
    margin:calc(var(--letter-size)* -1.7) 12.5% 0 0;
}

header nav span
{
    display:inline-block;
    word-spacing: 12px;
    padding-left: 48%;
}


header {
    text-align: justify;
    text-align-last: justify;
}
header #chak {   
    display: inline-block;
    margin: -4px 0 0 185px;
    margin: 0 0 0 11%;
    font-size: 50px;
    font-size: calc(var(--letter-size) * 3.25);
    line-height:1.1;
    font-weight: 300;
}

/* Hide the link that should open and close the topnav on small screens */
a#Expand 
{
  display: none;
}


body section
{
    /*outline: 1px solid red;*/
    width:100%;
    height:
    calc(96% - var(--header-height) );
    padding-top:
    var(--header-height);
    position: relative;
}

section#sHome
{
/*    background-image: url(https://chak-art.gala-studio.com/baibel/towel_1.jpg);*/
    background-image: none;
    background-repeat: no-repeat;
    text-align: center;
    overflow: hidden;
    background-position: 50% var(--header-height);
}

section#sHome article
{
    margin: 0 auto 0 auto;
    /* margin-top: calc( 9vh + 6px ); */
    /*width: 1200px;*/
}

#Poem {
    display:none;
}

@keyframes tonext {
  from {
    opacity: 0.3;
  }
  99% {
    opacity: 1.0;
}
}

section#sHome  #Picts {
    background-image: url(https://chak-art.gala-studio.com/baibel/towel_1.jpg);;

}
#Picts figure.active img{
    animation-name: tonext;
    animation-timing-function: ease;
    animation-duration: 2s;
    animation-iteration-count: 1;
}

section#sHome article h1
{
    font-size: 16em;
    font-size: 27.5vh;
    font-weight: 100;
    margin: 170px auto 0 auto;
    margin: 18vh auto 0 auto;
    color: white;
}

section#sHome div.Logo 
{
     margin-top: 133px;
     margin-top: 14.2vh;
    height: 290px;
    height: 31vh;
}

section#sHome div.Logo img
{
    height: 100%;
}


section#sHome p
{
    text-align:  center;
    font-weight: 200;
    letter-spacing: -1px;
    font-size:21px;
    font-size: 2vh;
    margin: 10px 80px;
    margin-top: 1vh;
    color:white;
}

section#sHome blockquote 
{
    font-style: oblique;
    text-align: center;
    font-weight: 200;
    line-height: 1.3;
    font-size: 21px;
    font-size: 2vh;
    /* margin-top: 62px; */
    /* margin-top: 6.5vh; */
    quotes: "\201D""\201D""\2018""\2019";
    color:white;
}

section#sHome blockquote:before
{
	content: open-quote;
    color:white;
}
section#sHome blockquote:after
{
	content: close-quote;
    color:white;
}

section#sHome div#Picts
{
    display: initial;
    float:left;
    width:100%;
    height:77.4%; /*575px;*/
    overflow: hidden;
}

section#sHome div#Picts a
{
    display:block;
    position: relative;
    top: -100%; 
    height: 100%; 
    width: 50%;
    float:left;
    cursor: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline stroke-width='3' points='80,100 0,50 80,0' fill='none'  stroke='%23fff'/%3E%3C/svg%3E") 16 16, auto;
}

section#sHome div#Picts a#NextAt
{
    cursor: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline stroke-width='3' points='20,100 100,50 20,0 ' fill='none'  stroke='%23fff'/%3E%3C/svg%3E") 16 16, auto;
}
section#sHome div#Picts figure, section#sHome div#Picts figure img
{
    width: 100%;
    margin: 0;
    padding: 0;
}
section#sHome div#Picts figure img
{
    /*min-height: 33vw;*/
}

section#sHome #AboutMe {
    --letter-size: 1.8vh;	
    padding: 0 105px 0 185px;
    padding: 0 6.2vw 0 11vw;
}
section#sHome article #AboutMe h1, section#sHome article #AboutMe p {
    display:block;
    float:left;
    width:20%;
    color:black;
    font-weight: 300;
}
section#sHome article #AboutMe h1 {
    font-weight: 300;
    text-align:left;
    font-size:2em;
    font-size: calc(var(--letter-size) * 2);
    margin:24px 0 0 0;
}
section#sHome article #AboutMe p {
    text-align:justify;
   text-align-last: left;
    font-size: var(--letter-size);
    line-height: 1.2;
    width: 68%;
    margin-top: 3vh;
    margin-top: calc(var(--letter-size) * 2);
}



/* Thumbnails*/
a.thumb
{
    display: block;
    float:left;
    width: calc( 100% / 6);
    height: calc( 100%  /4 );
    position: relative;
    outline: 2px solid white;
}


a.thumb img
{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    object-fit:cover;
    filter: grayscale(1);
}

a.thumb cite
{
    display: none;
    position: absolute;
	color: white;
	font-style: normal;

    display: flex;
	justify-content: center;
	align-items: center;
    z-index:123;
    left:0;
    top:0;
    width:100%;
    height:100%;
/*    background-color:rgba(165,0,200,0.05);*/
    color:rgba(0,0,0,0);

}

a.thumb:hover img, a.thumb:focus img
{
    filter: none;
}

a.thumb:hover cite, a.thumb:focus cite
{
    display: flex;
	justify-content: center;
	align-items: center;
    z-index:123;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.5);
	color: white;
}


/* news */
body.home section#sNews h1
{
    font-size:24px;
    font-size:2.5vh;
}

body.home section#sNews article
{
    max-height: calc(100% - 9vh);
    overflow-y: hidden;
    text-overflow: ellipsis;
    margin: 1em 0;
}

section#sNews p a
{
    margin-left: var(--pad);
    margin-top: 1em;
    display: inline-block;
    outline: 1px solid;
    padding: 1em 8ch;
    font-size:16px;
    font-size:1.7vh;
}

section#sNews p a:hover, section#sNews p a:focus
{
    color:white;
    background-color: var(--color1);
}

/* Works */
section#sWorks 
{
    --cols: 7;
}
section#sWorks aside
{
	display: block;
	float:left;
	height:100%;
	width: calc( 100% / var(--cols));
}

section#sWorks aside nav a
{
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	width:100%;
	height: calc( 100% / 4);
	float:left;
	background-color: var(--color1);
	color:white;
	text-align:center;
    font-size: 24px;
    font-size: 2.56vh;
}


section#sWorks aside nav a:nth-of-type(3n+1)
{
    background-color: var(--bc_color2);
}
section#sWorks aside nav a:nth-of-type(3n+2)
{
    background-color: var(--bc_color3);
}

section#sWorks aside nav a:nth-of-type(3n)
{
    background-color: var(--bc_color1);
}


section#sBio aside nav a:hover, section#sBio aside nav a:focus, section#sWorks aside nav a:hover, section#sWorks aside nav a:focus,  section#sWorks aside nav a.active
{
    background-color:white;
    color:var(--color1);
}

section#sWorks article
{
	display:none;
	width: calc( 100% /var(--cols) * (var(--cols) - 1) );
	height: 100%;
	float: left;
}

body.art section#sWorks article
{
	height: unset;
}

section#sWorks article.active
{
	display:block;
}


article#sWorksBio, article#sWorksDendro
{
    display:none;
    position: absolute;
    top: 0;
    width: 100%;
	height:100%;
}


section#sWorks a
{
    display: block;
    float:left;
    width: calc( 100% /  (var(--cols) - 1) );
    height: calc( 100%  /4 );
    position: relative;
    outline: 2px solid white;
}

section#sWorks a.dbld
{
    width: calc( 2 * 100% /  (var(--cols) - 1) );
}

section#sWorks article ul li a
{
    display: inline;
    float: none;
}

section#sWorks a img, section#sNews article figure img
{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    object-fit:cover;
    filter: grayscale(1);
}

section#sWorks a cite, section#sNews article figure cite
{
    display: none;
    position: absolute;
	color: white;
	font-style: normal;
    font-size: 2.14vh;
    display: flex;
	justify-content: center;
	align-items: center;
    z-index:123;
    left:0;
    top:0;
    width:100%;
    height:100%;
/*    background-color:rgba(100,0,200,0.05);*/
    color:rgba(0,0,0,0);

}

section#sWorks a:hover img, section#sWorks a:focus img, section#sNews article figure img:hover, 
section#sNews article figure:hover img, section#sNews article figure img:focus-within
{
    filter: none;
}

section#sWorks a:hover cite, section#sWorks a:focus cite, 
section#sNews article figure:hover cite, section#sNews article figure:focus-within cite
{
    display: flex;
	justify-content: center;
	align-items: center;
    z-index:123;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.5);


	color: white;
}

section#sBio main, /*body.home */section#sBio aside
{
    display:block;
    float:left;
    width: calc( 100% *4/7 );
    margin:0;
    height:100%;
}

/*body.home */section#sBio aside
{
    width: calc( 100% *3/7 );
}

section#sBio main
{
    padding-top:62px;
    padding-top: 6.9vh;
}

section#sBio main p
{
    margin: 0 13% 0.5em;
    text-align: justify;
    font-weight: 400;
    font-size: 20px;
    font-size: 2.15vh;
    line-height: 1.2;
}


section#sBio main p a, section#sBio main p a:active
{
    text-decoration: none;
    color: var(--color1);
    /*font-weight: 500;*/
}
section#sBio main p a[target=_blank]
{
    /*font-weight: 500;*/
    text-decoration-color: var(--color2);
}

section#sBio main p a:hover, section#sBio main p a:focus
{
    text-decoration: none;
}


img.Avatr
{
    border-radius: 50%;
    vertical-align: top;
    float: left;
    margin-right: 20px;
    width:18.7vh;
}

section#sBio aside nav a
{
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	width:50%;
	height: calc( 100% / 5);
	float:left;
/*	background-color: var(--color1);*/
	color:white;
	text-align:center;
	font-size:24px;
	font-size:2.14vh;
}

 /*section#sBio aside nav a:nth-of-type(3n+1)*/
section#sBio aside nav a:nth-of-type(1), 
section#sBio aside nav a:nth-of-type(4), 
section#sBio aside nav a:nth-of-type(7), 
section#sBio aside nav a:nth-of-type(10)
{
    background-color: var(--bc_color1);
}

 /*section#sBio aside nav a:nth-of-type(3n+2)*/
section#sBio aside nav a:nth-of-type(2), 
section#sBio aside nav a:nth-of-type(8), 
section#sBio aside nav a:nth-of-type(5)
{
    background-color: var(--bc_color2);
}
/*section#sBio aside nav a:nth-of-type(3n)*/
section#sBio aside nav a:nth-of-type(3), 
section#sBio aside nav a:nth-of-type(6),
section#sBio aside nav a:nth-of-type(9) 
{
    background-color: var(--bc_color3);
}

section#sBio aside nav a:hover, section#sBio aside nav a:focus, 
section#sWorks aside nav a:hover, section#sWorks aside nav a:focus
{
    background-color:white;
    color:#000000;
}

section#sBio aside nav a.active,
section#sBio aside nav a:active,  section#sWorks aside nav a.active
{
    background-color:var(--bc_color0);
    color:#000000;
}


section#sContact
{
    background-repeat: no-repeat;
 /*   background-image: url(images/contact_pge_1.jpg);*/
    background-position: 50% 0;
    background-size: 100% calc( 100% - var(--header-height) );
        
	--opa1:rgba(0, 0, 20, 0.65);
	--opa2:rgba(0, 0, 20, 0.45);
}

section#sContact article
{
    width: 50%;
    float: left;
    margin: 0;
    border: none;
    padding: 0;
    height: calc( 96% - var(--header-height) );
}

section#sContact article:nth-of-type(1) 
{
    background-color:var(--bc_color2);
}

section#sContact article:nth-of-type(2) 
{
    background-color:var(--bc_color1);
}




section#sContact form 
{
    padding: 200px 48px 0 48px;
    padding: 21.37vh 5.05% 0 5.05%;
}

section#sContact form table 
{
    border: none;
    border-spacing: 4px;
    width: 100%;
}

section#sContact form table td
{
    border: white 2px solid;
    width:50%;
}

section#sContact form table td.sbmt
{
    border-color: rgba(255,255,255,0);
}



section#sContact form input, section#sContact form textarea
{
    display: block;
    float: left;
    border: none;
    padding: 1.5em;
    background: none;
    color:white;
    font-size:16px;
    font-size:1.7vh;
    margin:0;
}

section#sContact form textarea
{
    width:100%;
    resize: none;
    height: 222px;
    height: 23.8vh;
}

::placeholder 
{
  color: white;
  font-weight:500;
  font-family: 'Jost', "Yu Gothic", Arial, sans-serif; 
  
}

section#sContact form input[type="submit"], section#sContact form input[type="image"]
{
    width:100%;
    border: none;
    outline: rgba(255,255,255,0.75) 3px solid;
    background-color:
    rgba(255,255,255,0.75);
    background-image:
    url(../image/icon_letter_4.svg);
    color:
    rgba(0,0,0,0);
    background-repeat: no-repeat;
    background-position: center;
    padding: 20px 0;
    background-size: 60px;
    height: 50px;
    background-size: 6.4vh;
    height: 5.35vh;
    cursor: pointer;
}



section#sContact form:focus-within input[type="submit"]
{
}

section#sContact form input:required:valid
{
}

section#sContact form input:required:invalid
{
   color: LightPink;
}

section#sContact form input:([value=""])
{
}


section#sContact h2
{
    text-align: center;
    color:
    white;
    background-color:
    var(--bc_color1);
    margin: 0;
    font-weight: 400;
    line-height: 64px;
    font-size: 22px;
    line-height: 6.85vh;
    font-size: 2.35vh;
}
section#sContact .represd h2
{
    background-color:var(--bc_color2);
    
}
.represd ul
{
    text-align:left;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    width: calc( 100% - 5.26%);
    color:white;
    justify-content: center;
    margin: 0;
    padding:0;
}

.represd ul li
{
    display: block;
    float: left;
    /* font-weight: 500; */
    width: calc( 50% - 100px);
    font-size: 27px;
    margin: 73px 0 0 100px;
    width: calc( 50% - 11.7%);
    font-size: 2.88vh;
    margin: 7.8vh 0 0 11.7%;
}



.represd ul li address
{
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    margin-top: 25px;

    font-size: 2.1vh;
    margin-top: 1.25em;
}

.represd ul li a
{
    text-decoration:none;
    text-decoration:inherit;
    color: inherit;
    font:inherit;
}

#contact_me
{
    color:white;
    padding-top: 28%;
    text-align:center;
    font-weight: 400;
    font-style: normal;
    font-size: 2.1vh;
    margin-top: 1.25em;
}

#contact_me a[href^="mailto"]
{
    text-decoration:none;
    color: white;
    font:inherit;
}

#contact_me a[href^="mailto"],
.represd ul li  a[href^="mailto"] 
{ 
    text-decoration: underline;    
}

#contact_me a[href^="mailto"]:hover,
#contact_me a[href^="mailto"]:focus,
.represd ul li a:hover, .represd ul li a:focus
{
    color: var(--color1);
}

.represd ul li span.cntct::before
{
  content: "\A \A";
  white-space: pre;
}

.represd ul li span.cntct::after
{
  content: "\A";
  white-space: pre;
}

footer
{
	color: black;
	text-align: center;
	width: 100%;
	display: block;
	/* font-weight: 600; */
	font-size: 17px;
	padding-top: 20px;
	font-size: 1.8vh;
	padding-top: 1.2em;
	line-height: 5em;
}


/* Art page */
body.art section#sWorks aside, body.bios section#sBio aside
{
    position: fixed;
    height: calc( 100% - var(--header-height));
}
body.bios section#sBio aside
{
    right:0;
}

body.art header, body.nws header
{
    background-color: white;
}


body.art header a.active:hover, body.art header a.active:focus
{
    color: var(--color1);
}

body.art section#sWorks main
{
    margin-left:calc( 100% / 7);
    width:calc( 100% / 7 *6 );
}


body.art section#sWorks main article
{
    display: initial;
    float:left;
    width:50%;
    padding-bottom: 2em;
    font-size: 16px;
    font-size: 1.71vh;
    min-height: calc( 100.1% - 2em) ; /* fix strange dribling */
}
body.art section#sWorks main article strong
{
    font-weight: 500;
}

body.art section#sWorks main div#Picts
{
    display: initial;
    float:left;
    width:50%;
}

body.art div#Picts figure, body.art div#Picts figure img, body.art div#Picts figure video, body.art div#Picts figure iframe, 
body.art div#Picts figure object, body.art div#Picts figure object embed
{
    width:100%;
    margin: 0;
    height:100%;
    padding: 0;
    min-height:468px;
    min-height:calc(60vh - var(--header-height) );
    text-align:center;
    background-color: black;
}

body.art div#Picts figure.video
{
    /*background-color: #c1c1c1; */
    display: inline;
}

body.art div#Picts figure.video.prima iframe, 
body.art div#Picts figure.video object, 
body.art div#Picts figure.video.prima video
{
    margin-top: 76px;
   /* height:100%;*/
}

body.art div#Picts figure.video iframe, 
body.art div#Picts figure.video object, 
body.art div#Picts figure.video video
{
    margin-top: 2px;
}

body.art div#Picts figure img
{
    height:auto;
}
body.art div#Picts figure figcaption
{
    background-color: black;
    color: darkgrey;
   /* line-height: 3em;*/
    text-indent: 3ch;
    font-size:13px;
    font-size:1.39vh;
    height: 41px;
    height: 3.15em;
    text-align:left;
    font-weight:bold;
}


body.art section#sWorks main article figure figcaption time, 
body.art section#sWorks figure figcaption cite
{
    font-style: normal;    

    background:none;
}

body.art section#sWorks main article ul cite, 
body.art section#sWorks main article ul time,
body.art section#sWorks main article p mark
{
    font-style: normal;    
    font-weight: 500;
    background:none;
}


body.art section#sWorks main article h2
{
    color: #000000;
    font-weight: 600;
    margin-bottom: 0;
    font-size: 16px;
    font-size: 1.71vh;
}

body.art section#sWorks main article h2.hd
{
    color: black;
    text-align: center;
    font-weight: bold;
    font-size: 22px;
}


body.art section#sWorks main article > *
{
    padding: 0 115px;
    padding: 0 14.2%;
}

body.art section#sWorks main article dl
{
    margin-top:0;
    
}

body.art section#sWorks main article blockquote, body.art section#sWorks main article q
{
    quotes: "\201C""\201D""\2018""\2019";
}
body.art section#sWorks main article blockquote
{
    font-style: normal;
    margin:0;
}

body.art section#sWorks main article blockquote +p
{
    margin: 0;
    font-style: italic;
}

body.art section#sWorks main article blockquote.epigr, body.art section#sWorks main article blockquote.epigr +p
{
    font-style: italic;
    font-weight: 500;
    margin: 0;
    margin-left: 121px;
}

body.art section#sWorks main article blockquote.epigr +p
{
    text-align: right;
    margin-bottom: 2em;
}


body.art section#sWorks main article blockquote:before, body.art section#sWorks main article q:before  
{
  content: open-quote;
}

body.art section#sWorks main article blockquote:after, body.art section#sWorks main article q:after  
{
  content: close-quote;
}

body.art section#sWorks main article dl > *
{
    display: inline;
}

section#sWorks article > * a
{
    display: inline;
    outline:none;
    border:none;
    float:none;
}

body.art section#sWorks main article dl dt
{
    font-weight: 600;
    display: inline-block;
   /* margin-top: 1em;*/
}
body.art section#sWorks main article dl dd + dt
{
   margin-top: 1em;
}

body.art section#sWorks main article dl dd
{
  margin:0;
}
body.art section#sWorks main article dl dd::after
{
  content: "\A";
  white-space: pre;
}

body.art section#sWorks main article h1
{
    height: calc( 25% - 1.5em );
    padding-top: 1.5em;
    margin: 0;
    font-weight: 300;
    color:#000000;
    font-size:43px;
    font-size:4.6vh;
    line-height: 32px;
    line-height: 75%;
}

body.art section#sWorks main article h1 cite
{
    font-style:normal;
}

body.art section#sWorks main article h1 dfn
{
    font-style:normal;
    font-weight: 300;
}

body.art section#sWorks main article h1 dfn
{
    color:black;
    font-size:22px;
    font-size:2.35vh;
}
body.art section#sWorks main article h1 dfn em
{
    font-size:16px;
    font-size:1.71vh;
}
body.art section#sWorks main article h1 dfn::before, body.art section#sWorks main article h1 dfn time::before  
{
  content: "\A";
  white-space: pre;
}

body.art section#sWorks main article figure
{
    margin:0;
    margin-bottom: 43px;
    margin-bottom: 4.6vh;
}

body.art section#sWorks main article figure img
{
    width:100%;
}

body.art section#sWorks main article figure figcaption
{
    margin:0;
    background-color: white;
    color:black;
    font-size:11px;
    font-size:1.17vh;
    height: 31px; /*temp*/
    height: 2.82em; 
    line-height: 3em;
    font-weight:bold;
}

body.art section#sWorks main article figure figcaption cite
{
    font-style: normal;
}

body.art figure figcaption
{
    background-color: white;
    color:black;
}

body.art section#sWorks main article ul
{
    list-style: none;
    margin-top:0;
}

body.art section#sWorks main article ul.ascetic
{
    font-style:italic;
}

body.art section#sWorks main article a.illustration
{
    color: black;
    text-decoration: underline;
    text-underline-position: from-font;
    white-space: nowrap;
}
body.art section#sWorks main article a.illustration:after
{
    content:")";
}
body.art section#sWorks main article a.illustration:before
{
    content:"(Illustration #";
}


body.art section#sWorks main article  a, 
body.bios section#sBio main  a,
section#sNews a
{
    text-decoration: none;
    color: var(--color1);
    /*font-weight: 500;*/
}

/*todo*/
body.art section#sWorks main article  a[hreflang]:after,
body.bios section#sBio main  a[hreflang]:after, 
section#sNews  a[hreflang]:after,
body.art section#sWorks main article  span[lang]:after,
body.bios section#sBio main  span[lang]:after, 
section#sNews  span[lang]:after 
{ 
    color: black;
    font-style: italic;
    font-weight:normal;
}
body.art section#sWorks main article  a[hreflang = 'en']:after,
body.bios section#sBio main a[hreflang = 'en']:after,
section#sNews a[hreflang = 'en']:after,
body.art section#sWorks main article  span[lang = 'en']:after,
body.bios section#sBio main span[lang = 'en']:after,
section#sNews span[lang = 'en']:after
{ 
    content: " (English)"; 
}
body.art section#sWorks main article  a[hreflang = 'en,he']:after,
body.bios section#sBio main a[hreflang = 'en,he']:after,
section#sNews a[hreflang = 'en,he']:after,
body.art section#sWorks main article  span[lang = 'en,he']:after,
body.bios section#sBio main span[lang = 'en,he']:after,
section#sNews span[lang = 'en,he']:after
{ 
    content: " (English and Hebrew)"; 
}
body.art section#sWorks main article  a[hreflang = 'en,ko']:after,
body.bios section#sBio main a[hreflang = 'en,ko']:after,
section#sNews a[hreflang = 'en,ko']:after,
body.art section#sWorks main article  span[lang = 'en,ko']:after,
body.bios section#sBio main span[lang = 'en,ko']:after,
section#sNews span[lang = 'en,ko']:after
{ 
    content: " (English and Korean)"; 
}

body.art section#sWorks main article  a[hreflang = 'ru']:after,
body.bios section#sBio main a[hreflang = 'ru']:after ,
section#sNews a[hreflang = 'ru']:after,
body.art section#sWorks main article  span[lang = 'ru']:after,
body.bios section#sBio main span[lang = 'ru']:after ,
section#sNews span[lang = 'ru']:after 
{ 
    content: " (Russian)"; 
} 
body.art section#sWorks main article  a[hreflang = 'de']:after ,
body.bios section#sBio main a[hreflang = 'de']:after  ,
section#sNews a[hreflang = 'de']:after ,
body.art section#sWorks main article  span[lang = 'de']:after ,
body.bios section#sBio main span[lang = 'de']:after  ,
section#sNews span[lang = 'de']:after 
{ 
    content: " (German)"; 
} 
body.art section#sWorks main article  a[hreflang = 'zh']:after ,
body.bios section#sBio main a[hreflang = 'zh']:after ,
section#sNews a[hreflang = 'zh']:after ,
body.art section#sWorks main article  span[lang = 'zh']:after ,
body.bios section#sBio main span[lang = 'zh']:after ,
section#sNews span[lang = 'zh']:after 
{ 
    content: " (Chinese)"; 
} 
body.art section#sWorks main article  a[hreflang = 'fr']:after ,
body.bios section#sBio main a[hreflang = 'fr']:after  ,
section#sNews a[hreflang = 'fr']:after ,
body.art section#sWorks main article  span[lang = 'fr']:after ,
body.bios section#sBio main span[lang = 'fr']:after  ,
section#sNews span[lang = 'fr']:after 
{ 
    content: " (French)"; 
} 
body.art section#sWorks main article  a[hreflang = 'he']:after ,
body.bios section#sBio main a[hreflang = 'he']:after  ,
section#sNews a[hreflang = 'he']:after ,
body.art section#sWorks main article  span[lang = 'he']:after ,
body.bios section#sBio main span[lang = 'he']:after  ,
section#sNews span[lang = 'he']:after 
{ 
    content: " (Hebrew)"; 
} 
body.art section#sWorks main article  a[hreflang = 'el']:after ,
body.bios section#sBio main a[hreflang = 'el']:after  ,
section#sNews a[hreflang = 'el']:after ,
body.art section#sWorks main article  span[lang = 'el']:after ,
body.bios section#sBio main span[lang = 'el']:after  ,
section#sNews span[lang = 'el']:after 
{ 
    content: " (Greek)"; 
} 
body.art section#sWorks main article  a[hreflang = 'it']:after ,
body.bios section#sBio main a[hreflang = 'it']:after  ,
section#sNews a[hreflang = 'it']:after ,
body.art section#sWorks main article  span[lang = 'it']:after ,
body.bios section#sBio main span[lang = 'it']:after  ,
section#sNews span[lang = 'it']:after 
{ 
    content: " (Italian)"; 
} 
body.art section#sWorks main article  a[hreflang = 'sp']:after ,
body.bios section#sBio main a[hreflang = 'sp']:after  ,
section#sNews a[hreflang = 'sp']:after ,
body.art section#sWorks main article  span[lang = 'sp']:after ,
body.bios section#sBio main span[lang = 'sp']:after  ,
section#sNews span[lang = 'sp']:after 
{ 
    content: " (Spanish)"; 
} 
span:lang(el)
{
    letter-spacing: -0.5ch;
}
/* all news & bios */
section#sNews, body.nws, body.bios
{
    --pad: 408px;
    --pad: calc( 21.5% );
}



body.nws , body.bios
{
    --hself: 76px;
    --hself: 8.11vh;
}

body.nws section
{
    height:unset;
}

body.nws section main
{
    display: inline-block;
  /*  padding:0 var(--pad);*/
}


body.nws h1, body.bios h1
{
    border-left: 10px var(--bc_color1) solid;
    height: var(--hself);
    color: #000000;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 1.2em;
    display: flex;
    align-items: center;
    font-weight: 300;
    padding-left:calc( var(--pad) - 10px);
    margin: calc( 25vh - var(--hself) - var(--header-height) ) 0;

    font-size: 48px;
    font-size: 5.13vh;

}

body.bios section#sBio main
{
    padding-top:0;
    padding-bottom:16em;
}

body.bios section#sBio main ul:last-child
{
    padding-bottom:4em;
}


body.bios section#sBio   ul li cite
{
    font-style: normal;    
    font-weight: 500;
    background:none;
}

body.bios section#sBio   ul li cite q, body.nws  ul li cite q, body.art  ul li cite q
{
    font-style: italic;    
}



section#sNews h2, body.bios main h2
{
    color: #000000;
    padding-left:var(--pad);
    font-weight: 600;
    font-size:18px;
    font-size:1.94vh;
}


section#sNews ul, body.bios main ul, ul.dashed
{
    list-style: none;
    padding:0 var(--pad);
    font-size:18px;
    font-size:1.94vh;
    margin-top: 0;
}

section#sNews ul li, body.bios main ul li
{
    margin-bottom: 1em;
    
}

section#sNews ul li::before, body.bios main ul li::before
{
    content: '– '; /*– ;*/
    font-weight: 500;
}


ul.dashed li::before
{
    content: '– '; /*– ;*/
}
ul.dashed
{
    font-size:16px;
}


span.mypart
{
    font-style: normal;
    font-weight: 500;
}

span.amypart::before  
{
  content: "\ATheme of my report: \"";
  white-space: pre;
}
span.amypart::after  
{
  content: "\"";
}





section#sNews ul li time, section#sNews ul li cite, section#sNews ul li span.mypart
{
    font-weight: 500;
    font-style: normal;
}

section#sNews ul li span.amypart::before  
{
  content: "\ATheme of my report: \"";
  white-space: pre;
}





/*********************/
/*art temp*/
div#Picts nav 
{
    text-align: center;
    margin-top: -100px;
    margin-bottom: 50px;
    filter: opacity(0.95);
}
div#Picts nav:hover
{
    filter: opacity(1);
}
div#Picts nav a
{
    --size: 8px;
    height: var(--size);
    width: var(--size);
    margin: 10px var(--size);
    border-radius: 50%;
    border: 2px white solid;
    outline: none;
    background-color:black;
    display: inline-flex;
    clear: both;
    float: none;
}

div#Picts nav a img, div#Picts nav a.active img
{
    position:fixed;
    margin-top:-60px;
    margin-left:-15px;
    width:calc( var(--size) *5);
    height:calc( var(--size) *5);
    opacity: 0;
    outline: 1px solid white;
    transition: opacity 3s ease-in-out;
}

div#Picts nav a.active
{
    background-color:white;
}
div#Picts nav a:hover
{
    background-color:rgba(255,255,255,0.98);
}

div#Picts nav a:hover img
{
    opacity: 1;
}

div#Picts nav a.active:hover img
{
    opacity: 0;
}

/********************/

div#Picts figure
{
    display:none;
}
div#Picts figure.active
{
    display:block;
}

@media (prefers-color-scheme: dark)
{
}

@media screen and (max-aspect-ratio: 2/1)
{
    section#sHome article h1
    {
        font-size: 23vh;
        margin: 30vh auto 0 auto;
    }
    section#sHome div.Logo 
    {
        height: 23vh;
    }
    section#sNews, body.nws, body.bios
    {
        --pad: calc( 15% );
    }
    section#sBio main p 
    {
        margin: 0 10% 1em;
        font-size: 2vh;
    }
    section#sWorks aside nav a 
    {
        font-size: 2vh;
    }
    section#sWorks a cite, section#sNews article figure cite 
    {
        font-size: 9px;
    }

    .represd ul li 
    {
        width: calc( 50% - 6%);
        margin: 4vh 0 0 6%;
    }
    div#Picts figure figcaption    
    {
        font-size: 1vh;
    }
    body.art section#sWorks main article figure figcaption
    {
        font-size: 0.8vh;
    }
    body.art section#sWorks main article > * 
    {
        padding: 0 9%;
    }
    body.art section#sWorks main article h1 
    {
        font-size: 3.3vh;
    }
    section#sBio main 
    {
        padding-top: 4vh;
    }
}

@media screen and (orientation: portrait) 
{
    section#sHome, section#sContact
    {
        background-size:  auto 100%;
    }
    section#sHome article h1
    {
        font-size: 7vh;
        margin: 18vh auto 0 auto;
    }
    section#sHome div.Logo 
    {
        height: 7vh;
    }
    section#sHome div.Logo img
    {
        width: 72%;
        height:initial;
    }
    
    section#sHome p 
    {
        font-size: 1.75vh;
    }
    
    section#sHome blockquote 
    {
        font-size: 1.75vh;
        margin-top: 11.52vh;
    }
    section#sNews, body.nws, body.bios 
    {
        --pad: calc( 10% );
    }
    section#sNews ul, body.bios main ul, ul.dashed ,
    section#sNews h2, body.bios main h2 
    {
        font-size: 1.4vh;
    }
    
    section#sNews p a 
    {
        font-size: 1.3vh;
    }
    section#sWorks
    {
    	--cols:4;
    	--rows:7;
    }

    section#sWorks aside, section#sWorks article
    {
        width:100%;
        clear:both;
        float: none;
    }

    section#sWorks aside
    {
        height: calc( 100vh / (var(--rows)));
    }
    body.art section#sWorks aside
    {
        position: fixed;
        height: calc( 100vh / (var(--rows)));
    }
    section#sWorks aside nav a
    {
        width: calc( 100% / var(--cols));
        height:100%;
        font-size: 18px;
        float:left;
    }
    body.art section#sWorks main article > * 
    {
        padding: 0 5%;
    }
    section#sWorks article
    {
        height: calc( 100% / var(--rows) * ( var(--rows) -1 ) );
    }

    section#sWorks article a
    {
        width: calc( 100% / var(--cols));
        height: calc( 100% / ( var(--rows) ) );
    }
    section#sWorks article a.dbld
    {
        width: calc( 2 * 100% / var(--cols));
    }

    section#sWorks article a cite
    {
        font-size:10px;
    }
    
    body.art section#sWorks main, body.art section#sWorks main div#Picts, body.art section#sWorks main article
    {
        width: 100%;
        margin-left:0;
    }

    body.art section#sWorks main
    {
        padding-top: calc( 100% / (var(--rows)));
        padding-top: calc( 100vh / (var(--rows)));
    }
    
    body.art section#sWorks main article
    {
        padding-top:32px;
    }

    body.art section#sWorks main article figure figcaption 
    {
        font-size: 0.8vh;
    }


    div#Picts figure, div#Picts figure img, div#Picts figure video, div#Picts figure iframe, 
    div#Picts figure object, div#Picts figure object embed
    {
        min-height: 50vh;
    }
    
    div#Picts nav 
    {
        margin-bottom: 100px;
    }

    body.nws h1, body.bios h1 
    {
        font-size: 3vh;
        margin:0.8em 0;
        border-left: 5px var(--color1) solid;
    }

    section#sBio main
    {
        width:  80% ;
    }
    
    section#sBio aside
    {
        width:  20% ;
    }
    
    section#sBio aside nav a
    {
        width: 100%;
        height: calc( 100% / 8);
        font-size: 1.4vh;
        
        white-space: pre-line;

    }
    
    img.Avatr 
    {
        width: 18.7vw;
    }

    section#sBio main p 
    {
        margin: 0 3ch 1em;
        font-size: 1.9vh;
    }
    
    
    section#sContact
    {
        background-size:  auto 100%;
    }
    section#sContact article 
    {
        width:100%;
        clear:both;
        height: max-content;
    }
    section#sContact form 
    {
        padding:0;
        margin-bottom: 1px;
    }
    
    section#sContact form table td 
    {
        border-width:1px;
    }

    section#sContact form textarea 
    {
        height: 22.8vh;
    }
    
    .represd ul
    {
        width:100%;
        padding-bottom: 1em;
    }
    
    .represd ul li
    {
        margin:1em 0 0 0;
        padding:0 1ch 0 2ch;
        width:calc(50% - 3ch);
        font-size: 1.75vh;
    }
    .represd ul li address
    {
       margin:0;
        padding:0;
        font-size: 1.4vh;
    }
    .represd ul li span.cntct::before 
    {
        content: "\A";
        white-space: pre;
    }
    footer
    {
        line-height:3em;
        font-size: 1.5vh;
    }
}

@media screen and (orientation: landscape) 
{
    section#sHome
    {
        background-size: cover;
        color: white;
    }
}

@media only screen and (orientation: landscape) and (max-width: 1366px) 
{

    
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) 
{

    
}



@media screen and (max-width: 992px)
{
 
}


/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) 
{
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) 
{
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) 
{
} 


@media only screen and (max-width: 720px)  and (orientation: landscape)
{
    section#sHome article h1
    {
        font-size: 20vh;
        margin: 13vh auto 0 auto;
    }
    section#sHome div.Logo 
    {
        margin-top: 13vh;
        height: 20vh;
    }
    body.home section#sNews h1 
    {
        font-size: 0.5vh;
    }
    section#sNews, body.nws, body.bios 
    {
        --pad: calc( 14% );
    }
    section#sBio main p 
    {
        margin: 0 10% 0.5em;
    }
    section#sWorks a cite, section#sNews article figure cite 
    {
        font-size: 5px;
    }
    section#sContact form 
    {
        /*padding: 7vh 5.05% 0 5.05%;*/
    }
    section#sContact form table td 
    {
        border-width:1px;
    }
    section#sContact form input[type="submit"], section#sContact form input[type="image"]
    {
        padding:1px;
    }
    
    .represd ul li span.cntct::before 
    {
        content: "\A";
        white-space: pre;
    }
    .represd ul li 
    {
        width: calc( 50% - 8%);
        margin: 2vh 0 0 8%;
    }
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) 
{
	header nav
	{
        margin: 0;
        /*width: max-content;*/
        left: 0;
        position: fixed;
        padding-left: 20px;	
	}
	header nav a
	{
		display: none;
	}
	
	header nav a.active 
	{
		display: block;
		padding-left:60%;
	}
	a#Expand 
	{
		float: right;
		display: inline-block;
		font-weight: bold;
		padding: 0 20px;
	}

	header a
	{
		height: var(--header-height);
		line-height: var(--header-height);
	}

	header nav.responsive 
	{
		background-color: white;
        padding: 0 12px 20px 20px;
    }
	
	header nav.responsive a
	{
		float: none;
		display: block;
		text-align: left;
		height:fit-content;
		line-height:calc(  var(--header-height) / 1.6);
	}
    header nav.responsive span a
    {
        float:left;
        margin-right: 0.5em;
    }
    header nav span 
    {
        margin-top: 6px;
    }

    section#sHome article
    {
        width:100%;
    }
    
    section#sHome div.Logo img 
    {
        width: 75%;
    }

    section#sHome article h1
    {
        font-size: 7vh;
        margin: 18vh auto 0 auto;
    }

    section#sHome div.Logo 
    {
        height: 7vh;
    }
    section#sHome blockquote 
    {
        font-size: 1.4vh;
        margin-bottom: 0;
    }
    section#sHome p
    {
        font-size: 1.4vh;
        letter-spacing: 0;
        margin: 10px 10px;
    }
    #Poem {
        display:block;
    }
    #Figures {
        display:none;
    }
    section#sHome {
        background-image:url(https://chak-art.gala-studio.com/baibel/towel_1.jpg);
    }

    body.home section#sNews h1
    {
        height:0px;
    }
    section#sNews p, section#sNews p  a 
    {
        margin-top: 0;
        font-size: 1vh;
    }
    
    section#sWorks aside nav a 
    {
        font-size: 10px;
    }
    section#sWorks article a cite 
    {
        font-size: 6px;
    }

    div#Picts figure figcaption 
    {
        font-size: 1vh;
    }
    
    body.art section#sWorks main article h1 
    {
        font-size: 3.6vh;
        height: calc( 20% - 1.5em );
    }
    
    section#sBio main 
    {
        padding-top: 6px;
        overflow-y: scroll;
    }
    section#sBio main p 
    {
        margin: 0 3ch 1em;
        font-size: 1.6vh;
    }

}