@import url('https://fonts.googleapis.com/css?family=Pacifico&subset=cyrillic');
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Pacifico&subset=cyrillic');
:root {
    --logo-color:#2b1103;
    --logo-color-hover: #763915;
    --page-bg: #E5D0B1; 
    --link: #000000;
    --transition: all 0.3s ease;
}

body { background: url('images/body_bg.jpeg'); background-size: cover; }

.main { display: block; position: relative; width: 95%; margin: 30px auto; border-radius: 10px; padding: 0; box-shadow: 0 0 8px 4px #000000; }
.page-header { position:relative;background: url('images/header_bg.jpg') no-repeat; height: 445px; background-size: cover; border-radius: 10px 10px 0 0; transition: var(--transition);}
.logo-container { display: block; position: absolute; top: 20%; left:5%; transition: var(--transition); text-decoration: none;}
.logo {display: block; width: 250px;}
.logo-image {fill: var(--logo-color); transition: var(--transition); }
.site-description {text-align: center;font-size: 1.2rem;font-weight: 900; text-shadow: 1px 1px 5px #fff; color: #000; transition: var(--transition); }
.logo-container:hover .logo-image { fill: var(--logo-color-hover); color: var(--logo-color-hover); transition: var(--transition); }
.logo-container:hover .site-description { color: var(--logo-color-hover); transition: var(--transition); }
.lang-selector { display: block; position: absolute; bottom: 50px; left: 7%; transition: var(--transition);}
.lang-selector img {  margin: 0 5px;transition: var(--transition); outline: 5px solid transparent; border-radius: 6px !important;}
.lang-ukr:hover img, .lang-ru:hover > img, .lang-ukr.active img, .lang-ru.active img { transition: var(--transition); outline: 5px solid #2b110330; border-radius: 6px;}
.nav-mobile { background-color: var(--page-bg); margin: -1px 0 0 0; border-bottom: 1px solid #2b1103;}
.menu-link::before{ content: url('images/menu_item_left.png');display: inline-block; width: 44px; position: absolute; left: -44px; top: 0;}
.menu-link::after{ content: url('images/menu_item_right.png');display: inline-block; width: 41px; position: absolute; right: -40px; top: 0;}
.menu-link { display: block !important; height: 60px; padding: 13px 9px !important; background: url(images/menu_item_bg.png) repeat-x !important; width: 75%; margin: 0 auto; position: relative;}
.menu-link {font-family: 'Pacifico', cursive; font-size: 1.5rem;  color: var(--logo-color) !important; transition: var(--transition) !important;}
.menu-link.active, .menu-link:hover { color: #810000 !important; transition: var(--transition);}
main { position: relative; top: -1px; padding: 15px 0; }
.content { background-color: var(--page-bg); margin: 0 !important;}
.side-nav { list-style: none; margin: 0 !important; padding: 0 !important; position: relative; left: 0;}
.side-nav > .nav-item > .menu-link {height: 45px; background-size: contain!important; padding: 6px 5px !important; font-size: 1.3rem;}
.side-nav > .nav-item > .menu-link::before {content: ''; background: url(images/menu_item_left.png) no-repeat; height: 45px; object-fit: contain; background-size: contain; left: -32px;} 
.side-nav > .nav-item > .menu-link::after {content: ''; background: url(images/menu_item_right.png) no-repeat; height: 45px; object-fit: contain; background-size: contain; right: -32px;} 
.left-sideBar { position: relative;}
.papyrus { background: url('images/papirus.png') no-repeat; background-size: contain; display: block; height: 226px; width: 250px; position: relative; top: 0; right: -55px; margin: 25px 0 0 0;}
.papyrus-header {width: 100%; position: absolute; text-align: center; padding: 9px; font-size: 16px; font-weight: 900; color: var(--logo-color);}
.papyrus-content {position: absolute;top: 40px; left: 8px; display: flex; align-items: center; justify-content: center; width: 100%; height: 64%;}
.papyrus-content .gallery-image {
    display: block;
    width: 60%;
    height: 75%;
    border-radius: 7px;
    background-repeat: no-repeat!important;
    background-size: cover!important;
    background-position: center!important;
}

.papyrus-footer {bottom:5px; left:10px; width: 100%; position: absolute; text-align: center; padding: 9px; font-size: 16px; font-weight: 900; color: var(--logo-color);}
.page-image { display: block; width: 100%; margin: 20px auto 10px auto; border-radius: 5px; }
.page-content table {width: 100%!important;}
.page-content table td { border: 1px solid; text-align: center}
.page-content figure[class="image"],  .page-content img {display: block; width: 95%; margin: 5px auto; border-radius: 5px; }
.papyrus-content-content { display: block;}
.side-admin-name { display: block !important;  font-weight: 900;  font-size: 0.8rem; width: 100%; text-align: center;}
.side-phone {display: block !important; text-decoration: none; color: black; font-size: 1rem; font-weight: 900; margin: 10px 0; }



.footer { background-size: cover; background: url(images/footer_bg.jpg) repeat-x 0 -5px; padding: 25px; position: relative; margin: 0; top: -1px;border-radius: 0 0 10px 10px; }

@media (min-width: 1281px) {}

/* ##Device = Laptops, Desktops | Screen = B/w 1025px to 1280px */
@media (min-width: 1025px) and (max-width: 1280px) {}

/* ##Device = Tablets, Ipads (portrait) | Screen = B/w 768px to 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
    .page-header { background-position: top center; transition: var(--transition);}
    .logo-container { top: 20%; left: 2%;}
    .lang-selector {bottom: 25px; left: 105px;}
    .papyrus { height: 190px; width: 205px;right: -145px;}
    .papyrus-header {padding: 5px; left: 10px;}
    .papyrus-content { top: 25px;}
}
  
/* ##Device = Tablets, Ipads (landscape) | Screen = B/w 768px to 1024px */  
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {}
  
/* ##Device = Low Resolution Tablets, Mobiles (Landscape) | Screen = B/w 481px to 767px */
@media (min-width: 481px) and (max-width: 767px) {
    .page-header { height: 280px }
    .logo { width: 180px;}
    .site-description { font-size: 0.9rem;}
    .lang-selector { bottom:30px; left:65px ; }

}

/* ##Device = Most of the Smartphones Mobiles (Portrait) | Screen = B/w 320px to 479px */
@media (min-width: 320px) and (max-width: 480px) {
    .main {width: 97%;margin: 10px auto; box-shadow: 0 0 10px 1px #000000; transition: var(--transition);}
    .page-header { height: 245px; background-position: 40% 0;}
    .logo-container { top: 15%;left: 2%;}
    .logo { width: 135px;}
    .site-description {text-align: left; font-size: 0.9rem; font-weight: 900; text-shadow: 1px 1px 5px #fff; color: #000; }
    .lang-selector { left: 125px; bottom: 15px;}
}

/** ## Low Resolution Smartphones */
@media (max-width:319px ) {
    .logo { width: 100px; margin: 0 auto;}
    .lang-selector { bottom: 15px; left: 100px; }
    .site-description {     font-size: 1rem;}
}