/*! basic.css v2.0.0 | MIT License | https://emrecakir.net */

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

 ROOTS 

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

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@-webkit-keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

:root {         
    
    --brand-font: 'Playfair Display', serif;
    
    --brand-color: rgb(40, 40, 40);    
        
    --brand-font-size: 11px;        
        
	--brand-font-weight: 400;
    
    --brand-font-spacing: 0.13em;
	
    ----------------------------------------------: 0;
    
    --default-font: 'Nanum Myeongjo', serif; 
 
    --default-color: rgb(38, 38, 38);
    
    --default-color-opposite: rgb(255, 255, 255);
        
    --default-font-size: 11px;   
    
    --default-font-spacing: 0.05em;    
            
    --default-line-height: 20px;  
        
    --default-font-weight-normal: 400;
    
    --default-font-weight-bold: 700; 
    
    --default-font-weight-extrabold: 800;
    
    --------------------------------------------: 0;
    
    --background: rgb(255, 255, 255);         
            
    --highlight: rgb(241, 236, 228);     
    
    --hightext: rgb(25, 25, 25);   
           
    --underline: rgb(143, 157, 135);
    
    --passives: rgba(150, 150, 150);
    
    --actives: rgba(45, 45, 45);   

    --invalid: rgb(204, 0, 0);
    
    --constructive: rgb(10, 10, 10);        
    
    --constructivePullback: rgb(67, 67, 55);
    
    -------------------------------------------: 0;
    
    --information: rgb(247, 246, 242);        
    
    --editions: rgb(251, 251, 246);
    
    --editions2: rgb(249, 247, 243); 
    
    --editions3: rgb(240, 240, 235); 
    
 }


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

 MAIN 

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

*,

*::before,

*::after,

.pswp * {
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;		    
	cursor: url(cursor.png), auto;
}

html,

body {
	height: 100%;
    
    /* from bootstrap grid*/
    box-sizing: border-box;
    -ms-overflow-style: scrollbar;    
}

html {    	
    scroll-behavior: smooth;
    
    -webkit-text-size-adjust: 100%;	
    -ms-text-size-adjust: 100%;		
    font-size: 100%;            
}

body {    
    background-color: var(--background);
    
    -webkit-animation: fadeIn 3s;
	-moz-animation: fadeIn 3s;
	-ms-animation: fadeIn 3s;
	-o-animation: fadeIn 3s;
	animation: fadeIn 3s;
    	         
    -webkit-font-kerning: normal;	 
	-moz-font-kerning: normal;
	-ms-font-kerning: normal;
    -o-font-kerning: normal;
    font-kerning: normal;    
            
    -webkit-font-feature-settings: "liga", "kern"; 
    -moz-font-feature-settings: "liga", "kern";
    -ms-font-feature-settings: "liga", "kern";
    -o-font-feature-settings: "liga", "kern";
	font-feature-settings: "liga", "kern";    
        
    text-rendering: optimizeLegibility;
    
	-webkit-font-smoothing: antialiased;        
	-moz-osx-font-smoothing: grayscale; 
            	
    overflow-x: hidden;
	    
    color: var(--default-color);
	font-family: var(--default-font);    
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
	font-weight: var(--default-font-weight-normal);    	
}

a,

a:link,

a:hover,

a:focus,

a:active,

a:visited {
	pointer-events: all;
    text-decoration: none;    
    color: var(--default-color);    	
	/*-webkit-tap-highlight-color: rgba(255, 255, 255, 1);*/
}

::selection {
	color: var(--hightext);
	background: var(--highlight);
}

:focus {
	outline-color: var(--default-color);
	outline-offset: none;
	outline-style: none;
}

.underline {
	line-height: 18px;
    display: inline-block;
    border-bottom: 1px solid var(--underline);        
}



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

 BODY 

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

.wrapper {
	width: 100%;
	height: 100%;
    background: var(--background);	
}

.content {
	width: 100%;
	height: 100%;
    overflow: auto;
    position: absolute;
    background: var(--information);	
}

.editions {
    background: var(--editions);    
}

.information {	
	width: 475px;
	height: 350px;
    display: none;
    
    text-align: justify;
    line-height: 21px !important;
    
	top: 0;	
	left: 0;
	right: 0;
    bottom: 0;
	padding: 10px;	
	z-index: 1560;    
	position: absolute;
    margin: auto;	
}

@media screen and (max-width: 455px) { 
	.information {
		top: -15px;
        width: 320px;
		height: 400px;
		font-size: 10px !important;
		font-weight: 400 !important;
		letter-spacing: 0.03em !important;
		line-height: 19px !important;
		text-align: justify;
	}
}

@media screen and (max-width: 350px) {
	.information {
		top: -25px;
		width: 290px;
        height: 435px;
		font-size: 10px !important;
		font-weight: 400 !important;
		letter-spacing: 0.03em !important;
		line-height: 19px !important;
		text-align: justify;
	}
}

.header {	
	height: 15px;
    width: calc(100% - 70px);	
    
	left: 35px;
    bottom: 35px;	
	position: fixed;
	z-index: 1500;
	opacity: 1;
    
	pointer-events: none;
	user-select: none;
	-ms-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

.title {    
    color: var(--brand-color);
	font-family: var(--brand-font);
	font-size: var(--brand-font-size);
	font-weight: var(--brand-font-weight);
	letter-spacing: var(--brand-font-spacing);
	line-height: var(--default-line-height);
		
    /* position */
    
	float: left;
	height: 15px;
	margin: -1px 0 0 0;
    
    pointer-events: all;
}

.descr {    
	float: left;
	height: 15px;
	margin: 0 0 0 33px;
}

.descr,

.further,

.information,

.description,

.pswp__counter,

.pswp__caption,

.pswp__button--arrow--left,

.pswp__button--arrow--right {
    
    color: var(--default-color);
	font-family: var(--default-font);
	font-size: var(--default-font-size);
	font-weight: var(--default-font-weight-normal);
	letter-spacing: var(--default-font-spacing);
	line-height: var(--default-line-height);
	        
    /* repeat from body */
    
    font-kerning: normal;    
	-moz-font-kerning: normal;    
	-webkit-font-kerning: normal;	    
	font-feature-settings: "liga", "kern";    
    -moz-font-feature-settings: "liga", "kern";    
	-webkit-font-feature-settings: "liga", "kern"; 
    
	-webkit-font-smoothing: antialiased;        
	-moz-osx-font-smoothing: grayscale;    
    
    text-rendering: optimizeLegibility;   
}

.further {    	
	float: right;
	height: 15px;
    position: relative;
	pointer-events: all;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000000;
  color: white;
  padding: 8px;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

@media screen and (max-width: 455px) {
	.header {
		width: calc(100% - 30px);
		left: 15px;
		bottom: 20px;
	}
	.title {
		font-size: 10px;
		margin: 0;
	}
	.descr {
		font-size: 10px;
		margin: 1px 0 0 13px;
	}
	.further {
		font-size: 9px;
	}	
}