@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400..700&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display:wght@400;700&display=swap');

:root
{
 --site-width: 1280px;
 --color-bg: #fff;
 --color-text: #111;
 --color-header: #f0cd98;
 --color-link: #006;
 --color-headerbg: #005373;
 --color-blue: #126c9e;
 --color-gray: #aaa;
}

*
{
 box-sizing: border-box;
}

html
{
 height: 100%;
}

body
{
 margin: 0;
 padding: 0;
 font-family: 'Noto Sans', 'Arial CE', 'Arial', sans-serif;
 font-size: 14pt;
 line-height: 1.4em;
 color: var(--color-text);
 background-color: var(--color-bg);
 height: 100%;
 display: flex;
 flex-direction: column;
}

.center
{
 text-align: center;
}

header
{
 width: 100%;
 background-color: #005373;
 color: #fff;
 padding: 10px;
 height: 100px;
 text-align: center;
}

#header-back,
#header-logo
{
 display: inline-block;
 vertical-align: top;
 width: 15%;
 height: 100%;
}

#header-title
{
 display: inline-block;
 vertical-align: top;
 width: 70%;
 position: relative;
 top: 50%;
 transform: translateY(-50%);
}

header h1
{
 width: 100%;
 text-align: center;
 margin: 0;
 font-family: 'Playfair Display', Georgia, serif;
 font-size: 36px;
 line-height: 1em;
}

header h2
{
 width: 100%;
 text-align: center;
 margin: .25em 0 0 0;
 font-family: 'Playfair Display', Georgia, serif;
 font-size: 28px;
}

#content
{
 background-color: var(--color-gray);
 width: 100%;
 height: calc(100% - 100px);
 flex-grow: 1;
 display: flex;
 flex-direction: column;
}

#content.index
{
 flex-direction: row;
}

#content.search
{
 background: url(/img/eremhatter.jpg) no-repeat center;
 background-size: cover;
}

#index-left
{
 display: inline-block;
 vertical-align: top;
 width: 50%;
 height: 100%;
 position: relative;
 background-color: #126c9e;
 background-image: url(/img/index-erem-eleje.jpg);
 background-size: 90%;
 background-repeat: no-repeat;
 background-position: center;
 color: #fff;
 font-size: 24pt;
 line-height: 1.5em;
}

#index-jubileum-logo
{
 position: absolute;
 left: 30px;
 bottom: 30px;
 z-index: 2;
}

#index-jubileum-logo > img
{
 display: block;
 width: 125px;
}

#index-left-content
{
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 padding-top: 20%;
 background-color: rgba(18, 108, 158, .7);
 z-index: 1;
}

#index-left-content > h1
{
 text-align: center;
 text-transform: uppercase;
 margin: 0;
 font-family: 'Lora', Georgia, serif;
 font-weight: bold;
 font-size: 36pt;
 line-height: 1.3em;
}

#index-left-content > h2
{
 text-align: center;
 text-transform: uppercase;
 font-family: 'Lora', Georgia, serif;
 font-weight: normal;
 font-size: 24pt;
 line-height: 1.3em;
}

#index-right
{
 position: relative;
 display: inline-block;
 vertical-align: top;
 width: 50%;
 height: 100%;
 background-color: #fff;
 background-image: url(/img/index-erem-hata.jpg);
 background-size: 90%;
 background-repeat: no-repeat;
 background-position: center;
 padding: 20px;
}

#index-right-content
{
 position: absolute;
 text-align: center;
 width: 100%;
 min-height: 40%;
 left: 0;
 bottom: 0;
 padding: 40px 20px;
 background-color: rgba(160, 160, 160, .8);
 color: #fff;
 font-size: 24pt;
 line-height: 1.5em;
}

#index-right-content a
{
 color: var(--color-blue);
 font-style: italic;
}

.index-button
{
 font-size: 32pt;
 letter-spacing: 2px;
 font-weight: bold;
 text-transform: uppercase;
 color: #fff;
 background-color: var(--color-blue);
 padding: 25px 60px 20px 60px;
 border-radius: 20px;
 border: 0;
 cursor: pointer;
}

.button
{
 font-size: 20pt;
 font-weight: bold;
 color: #fff;
 background-color: var(--color-blue);
 padding: 20px 60px;
 margin: 0 10px;
 border-radius: 10px;
 border: 0;
 cursor: pointer;
 -webkit-box-shadow: 0px 8px 8px -3px rgba(0,0,0,0.5);
 -moz-box-shadow: 0px 8px 8px -3px rgba(0,0,0,0.5);
 box-shadow: 0px 8px 8px -3px rgba(0,0,0,0.5);
}

.button-white
{
 color: var(--color-blue);
 background-color: #fff;
 padding: 20px 60px;
}

.button-small
{
 font-size: 16pt;
 padding: 10px 20px;
 margin: 0;
 border-radius: 10px;
}

#medal-block
{
 width: 100%;
 margin-bottom: 20px;
 display: flex;
 flex-direction: row;
}

#medal-year
{
 display: inline-block;
 vertical-align: top;
 text-align: center;
 width: 20%;
 padding: 40px 20px 20px 20px;
 position: relative;
}

#medal-year-button
{
 position: absolute;
 top: 40px;
 left: 0;
 width: 100%;
 text-align: center;
}

#medal-prev-button,
#medal-next-button
{
 position: absolute;
 bottom: 0px;
 left: 0;
 width: 100%;
 text-align: center;
}

#medal-images
{
 display: inline-block;
 vertical-align: top;
 flex-grow: 1;
}

#medal-images-wrapper
{
 margin: 0 auto;
 background-color: #fff;
 color: var(--color-blue);
 padding: 20px;
 border: 0;
 border-bottom-left-radius: 20px;
 border-bottom-right-radius: 20px;
 -webkit-box-shadow: 0px 8px 8px -3px rgba(0,0,0,0.5);
 -moz-box-shadow: 0px 8px 8px -3px rgba(0,0,0,0.5);
 box-shadow: 0px 8px 8px -3px rgba(0,0,0,0.5);
 text-align: center;
}

#medal-images-container
{
 margin: 0 auto;
 width: 90%;
 display: flex;
 justify-content: center;
 align-items: stretch;
 gap: 0px;
}

.medal-images-block
{
 flex: 1 1 0;
 display: flex;
 flex-direction: column;
 align-items: center;
}

.medal-image
{
 width: 100%;
 height: auto;
 aspect-ratio: 1/1;
 object-fit: contain;
 display: block;
 max-width: 100%;
}

.medal-images-caption
{
 margin-top: .25em;
 text-align: center;
}

/*
#medal-images-container > div
{
 display: inline-block;
 width: 540px;
 height: 540px;
 vertical-align: top;
}

#medal-images-container > div > img
{
 height: 100%;
 max-width: 100%;
 display: inline-block;
}

#medal-images-wrapper > p
{
 max-width: 1080px;
 margin: 0 auto;
 text-align: center;
}

#medal-inscription
{
 max-width: 1080px;
 margin: 0 auto;
}

#medal-inscription > div
{
 display: inline-block;
 vertical-align: top;
 width: 50%;
 padding: 0 1em;
 text-align: center;
}

#medal-inscription > div > p
{
 margin: .25em 0 0 0;
}
*/

#medal-procurer
{
 display: inline-block;
 vertical-align: top;
 text-align: center;
 width: 20%;
 padding: 40px 20px 20px 20px;
 position: relative;
}

#medal-info-block
{
 width: 85%;
 margin: 0 auto 20px auto;
 flex-grow: 0;
}

#medal-info-container
{
 background-color: var(--color-blue);
 color: #fff;
 padding: 5px 10px;
 border: 0;
 border-radius: 10px;
 -webkit-box-shadow: 0px 8px 8px -3px rgba(0,0,0,0.5);
 -moz-box-shadow: 0px 8px 8px -3px rgba(0,0,0,0.5);
 box-shadow: 0px 8px 8px -3px rgba(0,0,0,0.5);
}

#medal-info
{
 display: flex;
 flex-direction: row;
 justify-content: space-between;
}

#medal-info > div
{
 padding: 5px;
}

#medal-data
{
 width: 85%;
 margin: 0 auto 20px auto;
 flex-grow: 1;
 overflow-y: hidden;
}

#medal-description
{
 max-height: 100%;
 padding: 10px 20px;
 background-color: #fff;
 color: var(--color-blue);
 border-radius: 10px;
 border: 0;
 text-align: justify;
/* -webkit-box-shadow: 0px 8px 8px -3px rgba(0,0,0,0.5);
 -moz-box-shadow: 0px 8px 8px -3px rgba(0,0,0,0.5);
 box-shadow: 0px 8px 8px -3px rgba(0,0,0,0.5);*/
 overflow-y: auto;
}

#medal-description p
{
 margin: 0 0 .5em 0;
}

#medal-search-container
{
 width: 100%;
 padding: 40px 0 0 0;
 text-align: center;
}

#medal-search-list-container
{
 flex-grow: 1;
 padding: 40px;
 position: relative;
}

#medal-search-list
{
 position: absolute;
 top: 40px;
 left: 20%;
 bottom: 40px;
 right: 20%;
 margin: 0 auto;
 padding-right: 20px;
 text-align: center;
 overflow-y: auto;
}

div.search-item
{
 display: inline-block;
 margin: 20px 10px;
 background-color: var(--color-blue);
 color: #fff;
 padding: 20px 40px;
 border: 0;
 border-radius: 10px;
 font-size: 24pt;
 font-weight: bold;
 cursor: pointer;
 min-width: 5em;
 text-align: center;
 -webkit-box-shadow: 0px 8px 8px -3px rgba(0,0,0,0.5);
 -moz-box-shadow: 0px 8px 8px -3px rgba(0,0,0,0.5);
 box-shadow: 0px 8px 8px -3px rgba(0,0,0,0.5);
}

#medal-search-list.procurer div.search-item
{
 width: 16em;
 overflow: hidden;
 line-height: 1.1em;
}

.medal-list-item
{
 width: 100%;
 background-color: var(--color-blue);
 padding: 10px;
 border: 0;
 border-radius: 10px;
 margin-bottom: 20px;
 color: #fff;
 -webkit-box-shadow: 0px 8px 8px -3px rgba(0,0,0,0.5);
 -moz-box-shadow: 0px 8px 8px -3px rgba(0,0,0,0.5);
 box-shadow: 0px 8px 8px -3px rgba(0,0,0,0.5);
}

.medal-list-image
{
 display: inline-block;
 vertical-align: top;
 width: 100px;
 margin-right: 10px;
}

.medal-list-image img
{
 width: 100%;
 display: block;
 border-radius: 10px;
}

.medal-list-title
{
 display: inline-block;
 vertical-align: top;
 width: calc(100% - 110px);
 font-size: 18pt;
 line-height: 1.4em;
 text-align: left;
}

#medal-buttons-row
{
 display: none;
}

#procurer-block
{
 width: 80%;
 margin: 0 auto;
 border: 0;
 background: transparent;
 border-bottom-left-radius: 20px;
 border-bottom-right-radius: 20px;
 -webkit-box-shadow: 0px 8px 8px -3px rgba(0,0,0,0.5);
 -moz-box-shadow: 0px 8px 8px -3px rgba(0,0,0,0.5);
 box-shadow: 0px 8px 8px -3px rgba(0,0,0,0.5);
 display: flex;
 flex-direction: row;
}

#procurer-left
{
 width: 70%;
 padding: 20px;
 background-color: #fff;
 color: var(--color-blue);
 border-bottom-left-radius: 20px;
}

#procurer-left > h1
{
 text-align: center;
 margin-bottom: 0;
}

#procurer-right
{
 width: 30%;
 padding: 40px;
 color: #fff;
 background-color: var(--color-blue);
 border-bottom-right-radius: 20px;
}

#procurer-images
{
 display: flex;
}

#procurer-image,
#procurer-coa
{
 flex: 1;
 flex-grow: 1;
 flex-basis: 0;
 width: 50%;
 margin: 15px;
 border-radius: 20px;
}

#procurer-coa
{
 height: 0;
 max-width: 50%;
 padding: 0 20px 60% 20px;
 background-size: 90%;
 background-repeat: no-repeat;
 background-position: center;
}

#procurer-image
{
 padding: 20px;
 background-size: cover;
 background-position: center;
}

#procurer-coa
{
 background-color: var(--color-blue);
}

#procurer-image > img,
#procurer-coa > img
{
 display: block;
 width: 100%;
}

.copyright
{
 font-size: 8pt;
 text-align: center;
 color: #ccc;
 margin-top: 1em;
}

a
{
 text-decoration: none;
}

::-webkit-scrollbar
{
 width: 30px;
}

::-webkit-scrollbar-track
{
 background: #005373;
 border-radius: 10px;
}

::-webkit-scrollbar-thumb
{
 background: #989da1;
 border-radius: 10px;
 box-shadow: inset 0 0 5px grey;
 border: 4px solid #005373;
}

::-webkit-scrollbar-thumb:hover
{
 background: #aaa;
}

@media screen and (max-width: 1680px)
{
 #medal-year, #medal-procurer {display: none;}
 #medal-buttons-row {display: block; text-align: center;}
 #medal-buttons-row button {width: 25%; min-width: 10em;}
 #medal-images {margin: 0 10px;}
 #content {height: auto;}
}

@media screen and (max-width: 1200px)
{
 #medal-info-block, #medal-data {width: 100%; padding: 0 10px;}
}

@media screen and (max-width: 1000px)
{
 .index-button {font-size: 24pt;}
 #index-right-content {font-size: 18pt;}
 ::-webkit-scrollbar {width: 20px;}
 #medal-search-list {position: static;}
 body {background-color: #a6abae;}
 div.search-item {margin: 10px;}
 #medal-search-list {padding-right: 0;}
 #medal-search-list.procurer div.search-item {width: 90%;}
 #medal-search-list-container {padding: 20px 10px;}
 #medal-images-container {width: 100%;}
 #procurer-block {width: 90%;}
 #procurer-left {width: 65%;}
 #procurer-right {width: 35%; padding: 20px;}
 #procurer-left > h1 {line-height: 1.2em;}
 .copyright {padding: 0 1em;}
}

@media screen and (max-width: 900px)
{
 #header-back {display: none;}
 #header-title {width: calc(100% - 75px);}
 #header-logo {width: 75px;}
 header h1, header h2 {text-align: left; margin-left: 10px;}
 #index-left, #index-right {width: 100%;}
 #index-left-content {position: static;}
 #content {display: block; height: auto;}
 .button {margin-bottom: 20px;}
 #medal-search-list.procurer div.search-item {font-size: 18pt;}
 #medal-info {display: block;}
 #medal-info > div {padding: 0 5px 5px 5px;}
 #medal-info > div:first-child {padding: 5px;}
}

@media screen and (max-width: 800px)
{
 #medal-images-container {flex-direction: column; width: 100%; gap: 20px;}
}

@media screen and (max-height: 1000px)
{
 #content {height: auto;}
 #medal-data {display: block; overflow-y: visible;}
}

@media screen and (max-height: 800px)
{
 #index-left-content {position: static;}
 #content {display: block; height: auto;}
 #medal-search-list {position: static;}
 div.search-item {margin: 10px;}

 ::-webkit-scrollbar-track {border-radius: 0;}
}

@media screen and (max-width: 600px)
{
 header {height: auto; padding: .5em;}
 header h1 {font-size: 18pt; line-height: 1.5em;}
 header h2 {font-size: 14pt; line-height: 1.5em;}
 #header-logo img {height: 80px !important;}
 .button {font-size: 16pt;}
 #medal-search-list.procurer div.search-item {font-size: 14pt;}
 #medal-buttons-row button {width: 25%; min-width: 8em; padding: 20px;}
 div.search-item {font-size: 14pt; min-width: 5em; padding: 15px 30px;}

 #procurer-block {display: block;}
 #procurer-left {width: 100%; border-bottom-left-radius: 0;}
 #procurer-right {width: 100%; border-bottom-left-radius: 20px;}
}