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

:root
{
 --site-width: 1200px;
 --color-text: #888;
 --color-beige: #f8f3eb;
 --color-brick: #b5c993; /* mid green */
 --color-midbrick: #839860; /* dark green:*/
 --color-lightbrick: #edf1e7; /* light green */
 --color-blue: #154d8d;
 --color-gold: #aa8f65;

 --color-sjc: #aa8f65;
 --color-emmausz: #ffcf9f;
 --color-jsztio: #b5a0b5;
 --color-korda: #7ba1b7;
 --color-tahi: #e49e87;
 --color-mariazell: #b5c993;
 --color-szakkollegium: #ed98a3;
}

*
{
 box-sizing: border-box;
}

html
{
 overflow-y: scroll;
 min-height: 100%;
}

body
{
 margin: 0;
 padding: 0;
 font-family: "EB Garamond", "Times New Roman", serif;
 font-size: 14pt;
 line-height: 1.4em;
 color: var(--color-text);
 background-color: var(--color-beige);
}

.mobile-only
{
 display: none !important;
}

.center
{
 text-align: center;
}

.right
{
 text-align: right;
}

.nomargin
{
 margin: 0;
}

.strong
{
 font-weight: bold;
}

.clr
{
 clear: both;
}

small,
.small
{
 font-size: 10pt;
}

img.half,
img.halfcol
{
 max-width: 50%;
}

img.twothird
{
 max-width: 66.666666%;
}

.color-SJC {color: var(--color-sjc);}
.color-EMMAUSZ {color: var(--color-emmausz);}
.color-JSZTIO {color: var(--color-jsztio);}
.color-KORDA {color: var(--color-korda);}
.color-TAHI {color: var(--color-tahi);}
.color-MARIAZELL {color: var(--color-mariazell);}
.color-SZAKKOLLEGIUM {color: var(--color-szakkollegium);}
.bgcolor-SJC {background-color: var(--color-sjc);}
.bgcolor-EMMAUSZ {background-color: var(--color-emmausz);}
.bgcolor-JSZTIO {background-color: var(--color-jsztio);}
.bgcolor-KORDA {background-color: var(--color-korda);}
.bgcolor-TAHI {background-color: var(--color-tahi);}
.bgcolor-MARIAZELL {background-color: var(--color-mariazell);}
.bgcolor-SZAKKOLLEGIUM {background-color: var(--color-szakkollegium);}

footer
{
 padding: 20px 0;
}

article a,
footer a
{
 color: inherit;
}

a.anchor
{
 display: block;
 position: relative;
 top: -100px;
 visibility: hidden;
}

header
{
 position: fixed;
 width: 100%;
 background-color: var(--color-beige);
 text-align: center;
 z-index: 1;
 -webkit-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.4);
 -moz-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.4);
 box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.4);
}

#header-top
{
 background-color: #fff;
 color: #656;
 font-size: 10pt;
 font-style: italic;
 position: relative;
}

#header-top-icons
{
 position: absolute;
 top: 5px;
 right: 5px;
}

#header-top-icons a
{
 display: inline-block;
 margin: 0 5px;
}

#header-top a
{
 text-decoration: none;
 color: inherit;
}

#header-search
{
 padding: 3px 8px;
 cursor: pointer;
}

#search-bar
{
 display: none;
 width: 100%;
 background-color: var(--color-beige);
 position: absolute;
 top: 25px;
 height: 76px;
 z-index: 5;
}

#search-input
{
 width: 90%;
 margin: 0 auto;
 border: 1px solid #eee;
 border-radius: 5px;
 font-size: 14pt;
 margin-top: 20px;
 padding: 5px;
 outline: 0;
 color: var(--color-text);
}

#search-input::placeholder
{
 color: #ccc;
 opacity: 1;
}

#search-input:-ms-input-placeholder
{
 color: #ccc;
}

#search-input::-ms-input-placeholder
{
 color: #ccc;
}

#header-title
{
 height: 40px;
 position: relative;
 padding-top: 5px;
}

#header-title > span
{
 color: var(--color-blue);
 text-transform: uppercase;
 font-size: 20px;
 font-weight: bold;
 font-family: "Playfair Display", serif;
 letter-spacing: 2px;
 position: absolute;
}

#header-title-jszt
{
 right: 50%;
 margin-right: 40px;
}

#header-title-sjc
{
 left: 50%;
 margin-left: 40px;
}

#header-menu
{
 height: 35px;
 background-color: var(--color-brick);
 color: #fff;
 z-index: 2;
 position: relative;
}

#header-menu-circle
{
 width: 50px;
 height: 25px;
 background-color: var(--color-beige);
 position: absolute;
 top: 0;
 left: 50%;
 margin-left: -25px;
 border-radius: 0 0 25px 25px;
}

#header-menu ul
{
 position: relative;
 list-style: none;
 padding: 0;
 margin: 0;
}

#header-menu > ul
{
 margin-left: -105px;
}

#header-menu ul li
{
 display: inline-block;
 vertical-align: top;
 margin: 0 10px;
 padding: 5px 0 0 0;
 font-size: 10pt;
 text-transform: uppercase;
}

/*
#header-menu ul li:last-child
{
 margin-right: 80px;
}
*/

#header-menu ul li a
{
 color: #fff;
 text-decoration: none;
}

#header-menu ul li .submenu
{
 max-height: 0;
 overflow: hidden;
 position: absolute;
 top: 35px;
 margin: 0 auto;
 padding: 0 10px;
 background-color: #fff;
 transition: .5s;
 width: 100%;
 left: 0;
}

#header-menu ul li .submenu a
{
 display: inline-block;
 color: var(--color-blue);
 text-decoration: none;
 padding: 5px;
 text-transform: none;
}

#header-menu > ul > li:hover > ul.submenu
{
 display: block;
 max-height: 150px;
 transition: .5s;
}

.main-zarandoklat
{
 margin-right: 100px !important;
}

#menu-h
{
 display: none;
}

#header-logo
{
 position: absolute;
 top: 5px;
 left: 50%;
 width: 30px;
 margin-left: -15px;
 z-index: 3;
}

#header-logo:hover
{
 width: 32px;
 top: 4px;
 margin-left: -16px;
}

#headline-image
{
 position: relative;
 background-image: url(../img/mariazell-legifoto-2.jpg);
 background-size: cover;
 background-position: top;
 width: 100%;
 height: 0;
/* padding-bottom: 32.65625%;*/
 padding-bottom: 28%;
}

#headline-image img
{
 display: block;
 width: 100%;
}

#headline-pilgerheim
{
 width: 100%;
 text-align: center;
 padding: 15px 0;
 background-color: var(--color-midbrick);
}


#headline-motto
{
 position: absolute;
 width: 30%;
 right: 10%;
 bottom: 10%;
 color: var(--color-lightbrick);
 font-family: "Playfair Display", serif;
 font-style: italic;
 font-size: 16pt;
 line-height: 1.2em;
}

#content
{
 padding-top: 100px;
}

.wrapper
{
 max-width: var(--site-width);
 margin: 0 auto;
}

/* index */

h1
{
 font-family: "Playfair Display", serif;
 font-size: 20pt;
 color: var(--color-brick);
 text-transform: uppercase;
}

h2
{
 font-family: "Playfair Display", serif;
 text-align: center;
 font-size: 16pt;
 font-weight: normal;
 text-transform: uppercase;
 color: var(--color-gold);
 margin: 1em 0;
}

h3
{
 font-family: "Playfair Display", serif;
 text-align: center;
 font-size: 14pt;
 text-transform: uppercase;
 font-weight: normal;
}

h4
{
 font-family: "Playfair Display", serif;
 text-align: center;
 font-size: 10pt;
 font-weight: normal;
 text-transform: uppercase;
 color: var(--color-text);
 margin: 0 0 .5em 0;
}

#information,
#institutions
{
 background-color: #fff;
 padding: 40px 0;
}

#information ul
{
 padding: 20px 0;
}

#info:before
{
 display: block;
 content: " ";
 margin-top: -120px;
 height: 120px;
 visibility: hidden;
 pointer-events: none;
}

#information h2,
#institutions h2,
#program-list h4
{
 overflow: hidden;
 text-align: center;
}

#information h2
{
 margin-bottom: 1em;
}

#information h2:before,
#information h2:after,
#institutions h2:before,
#institutions h2:after,
#program-list h4:before,
#program-list h4:after,
#footer-copyright:before,
#footer-copyright:after
{
 background-color: var(--color-beige);
 content: "";
 display: inline-block;
 height: 1px;
 position: relative;
 vertical-align: middle;
 width: 50%;
}

#information h2:before,
#institutions h2:before,
#program-list h4:before,
#footer-copyright:before
{
 right: 1em;
 margin-left: -50%;
}

#information h2:after,
#institutions h2:after,
#program-list h4:after,
#footer-copyright:after
{
 left: 1em;
 margin-right: -50%;
}

#information ul,
#institutions ul
{
 list-style: none;
 margin: 0;
 padding: 0;
}

#information ul
{
 margin: 40px 0 20px 0;
}

#information ul li
{
 display: inline-block;
 width: 20%;
 padding: 5px;
 vertical-align: top;
 text-align: center;
}

#institutions ul li
{
 display: inline-block;
 width: 16.66666666%;
 padding: 5px;
 vertical-align: top;
 text-align: center;
}

#information li img,
#institutions ul li img
{
 padding-top: 3px;
 padding-bottom: 0;
 transition: all .3s;
 margin-bottom: 10px;
}

#information ul li:hover img,
#institutions ul li:hover img
{
 padding-top: 0;
 padding-bottom: 3px;
 transition: all .3s;
}

#information ul li a,
#institutions ul li a
{
 display: block;
 font-size: 10pt;
 line-height: 1.2em;
 text-transform: uppercase;
 text-decoration: none;
 color: var(--color-text);
}

#programs
{
 background-color: var(--color-beige);
 padding: 20px 10px 80px 10px;
}

#program-list
{
 width: 100%;
 padding: 20px;
 background-color: #fff;
 max-width: var(--site-width);
 -webkit-box-shadow: 0px 0px 5px 2px rgba(128, 128, 128, 0.2);
 -moz-box-shadow: 0px 0px 5px 2px rgba(128, 128, 128, 0.2);
 box-shadow: 0px 0px 5px 2px rgba(128, 128, 128, 0.2);
}

#programs-table
{
 display: inline-block;
 vertical-align: top;
 width: calc(100% - 320px);
 max-height: 220px;
 margin-right: 20px;
 overflow-y: scroll;
}

#programs-calendar
{
 display: inline-block;
 vertical-align: top;
 width: 300px;
}

.programs-date
{
 color: var(--color-gold);
 font-weight: bold;
}

table.programs
{
 width: 100%;
}

table.programs td
{
 padding: 2px 5px;
 font-size: 10pt;
 border-bottom: 1px solid var(--color-beige);
}

table.programs a
{
 color: inherit;
 text-decoration: none;
}

.dot {width: 12px; height: 12px; border-radius: 6px;}
.dot-SJC {background-color: var(--color-sjc);}
.dot-EMMAUSZ {background-color: var(--color-emmausz);}
.dot-JSZTIO {background-color: var(--color-jsztio);}
.dot-KORDA {background-color: var(--color-korda);}
.dot-TAHI {background-color: var(--color-tahi);}
.dot-MARIAZELL {background-color: var(--color-mariazell);}
.dot-SZAKKOLLEGIUM {background-color: var(--color-szakkollegium);}

table.calendar
{
 width: 100%;
}

table.calendar thead
{
 background-color: var(--color-lightbrick);
 color: var(--color-gold);
 font-size: 12pt;
}

table.calendar thead a
{
 text-decoration: none;
 color: var(--color-gold);
}

table.calendar tbody
{
 font-size: 10pt;
 text-align: center;
}

table.calendar tbody tr > td:last-child
{
 font-weight: bold;
}

table.calendar tbody a
{
 text-decoration: none;
 text-align: center;
 padding: 2px;
 font-weight: bold;
}

table.calendar tbody td.past
{
 opacity: .4;
}

table.calendar tbody td.pr
{
 position: relative;
}

table.calendar tbody td.pr::before
{
 content: "";
 position: absolute;
 top: 3px;
 left: 50%;
 margin-left: -12px;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 pointer-events: none;
}

table.calendar tbody td.pr-SJC::before {border: 2px solid var(--color-sjc);}
table.calendar tbody td.pr-EMMAUSZ::before {border: 2px solid var(--color-emmausz);}
table.calendar tbody td.pr-JSZTIO::before {border: 2px solid var(--color-jsztio);}
table.calendar tbody td.pr-KORDA::before {border: 2px solid var(--color-korda);}
table.calendar tbody td.pr-TAHI::before {border: 2px solid var(--color-tahi);}
table.calendar tbody td.pr-MARIAZELL::before {border: 2px solid var(--color-mariazell);}
table.calendar tbody td.pr-SZAKKOLLEGIUM::before {border: 2px solid var(--color-szakkollegium);}

#events
{
 background-color: #fff;
 line-height: 0;
}

#events > a
{
 display: inline-block;
 width: 33.33333333%;
 height: 0;
 padding-bottom: 22.22222222%;
 background-size: cover;
 background-position: center;
 position: relative;
 line-height: 1.4em;
 color: inherit;
}

#events > a > div
{
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 height: auto;
 background-color: #fff;
 padding: 5px;
}

.ev-SJC {border-left: 5px solid var(--color-sjc);}
.ev-EMMAUSZ {border-left: 5px solid var(--color-emmausz);}
.ev-JSZTIO {border-left: 5px solid var(--color-jsztio);}
.ev-KORDA {border-left: 5px solid var(--color-korda);}
.ev-TAHI {border-left: 5px solid var(--color-tahi);}
.ev-MARIAZELL {border-left: 5px solid var(--color-mariazell);}
.ev-SZAKKOLLEGIUM {border-left: 5px solid var(--color-szakkollegium);}

.ev-more
{
 display: none;
 font-size: 10pt;
 line-height: 1.4em;
}

#events > a:hover .ev-more
{
 display: block;
}

#events span.more
{
 display: block;
 text-decoration: none;
 overflow: hidden;
 text-align: right;
}

#events span.more::before
{
 background-color: #ccc;
 content: "";
 display: inline-block;
 height: 1px;
 position: relative;
 vertical-align: middle;
 width: 100%;
 right: 1em;
 margin-left: -100%;
}

p span.more
{
 display: block;
 text-decoration: none;
 overflow: hidden;
 text-align: right;
}

p span.more::before
{
 background-color: #ccc;
 content: "";
 display: inline-block;
 height: 1px;
 position: relative;
 vertical-align: middle;
 width: 100%;
 right: 1em;
 margin-left: -100%;
}

#news
{
 background-color: var(--color-brick);
 padding: 20px 10px 80px 10px;
}

#news-block
{
 display: flex;
}

#news-left
{
 flex: 1;
 margin-right: 20px;
}

#news-left > a
{
 display: block;
 overflow: hidden;
}

#news-left > a > div
{
 margin-bottom: 20px;
 background-color: var(--color-beige);
}

.news-left-img
{
 display: inline-block;
 vertical-align: top;
 width: 58%;
 height: 250px;
 border-right: 2% var(--color-sjc);
 background-position: center;
 background-size: cover;
}

.news-left-text
{
 display: inline-block;
 vertical-align: top;
 width: 40%;
 font-size: 12pt;
 line-height: 1.2em;
 padding: 10px;
}

.news-left-supertitle
{
 font-size: 8pt;
 text-transform: uppercase;
}

#news-left > a:last-child > div
{
 margin-bottom: 0;
}

.news-left-text h4
{
 font-size: 12pt;
 font-weight: bold;
 text-transform: uppercase;
 line-height: 1.2em;
 text-align: left;
 margin: 0 0 5px 0;
 padding-bottom: 5px;
 position: relative;
}

.news-left-text h4::after
{
 width: 1.5em;
 content: " ";
 width: 1.5em;
 height: 1px;
 background-color: var(--color-brick);
 position: absolute;
 bottom: 0;
 left: 0;
}

.news-left-text p
{
 margin: 0;
 color: var(--color-text);
}

.news-left-text h4.color-SJC::after {background-color: var(--color-sjc);}
.news-left-text h4.color-EMMAUSZ::after {background-color: var(--color-emmausz);}
.news-left-text h4.color-JSZTIO::after {background-color: var(--color-jsztio);}
.news-left-text h4.color-KORDA::after {background-color: var(--color-korda);}
.news-left-text h4.color-TAHI::after {background-color: var(--color-tahi);}
.news-left-text h4.color-MARIAZELL::after {background-color: var(--color-mariazell);}
.news-left-text h4.color-SZAKKOLLEGIUM::after {background-color: var(--color-szakkollegium);}

#news-right
{
 flex: 1;
 background-color: var(--color-lightbrick);
}

#news-right > a > div
{
 margin: 0 20px 10px 20px;
}

.news-right-img
{
 display: inline-block;
 vertical-align: top;
 width: 30%;
}

.news-right-img img
{
 width: 100%;
}

.news-right-text
{
 display: inline-block;
 vertical-align: top;
 width: 70%;
 padding-left: 20px;
 font-size: 12pt;
}

.news-right-text h4
{
 color: var(--color-brick);
 font-size: 12pt;
 font-weight: bold;
 line-height: 1.2em;
 text-transform: none;
 text-align: left;
 margin: 0;
 padding-bottom: 5px;
 position: relative;
}

.news-right-text h4::after
{
 width: 1.5em;
 content: " ";
 width: 1.5em;
 height: 1px;
 background-color: var(--color-brick);
 position: absolute;
 bottom: 0;
 left: 0;
}

.news-right-text p
{
 margin: 10px 0 0 0;
 line-height: 1.2em;
 color: var(--color-text);
}

.news-date
{
 font-size: 8pt;
}

.news-more a
{
 display: block;
 text-decoration: none;
 color: var(--color-brick);
 overflow: hidden;
 text-align: right;
 font-size: 10pt;
}

.news-more a::before
{
 background-color: var(--color-brick);
 content: "";
 display: inline-block;
 height: 1px;
 position: relative;
 vertical-align: middle;
 width: 100%;
 right: 1em;
 margin-left: -100%;
}

#news-list h2
{
 font-weight: bold;
 text-align: left;
 padding-bottom: 5px;
 border-bottom: 1px solid #ccc;
}

#charisma
{
 width: 100%;
 height: 600px;
 background-color: #666;
 background-image: url(../img/karizmank-back.jpg);
 background-size: cover;
 background-position: center;
 color: #fff;
 position: relative;
}

#charisma h2
{
 position: absolute;
 width: 100%;
 bottom: 20px;
 left: 0;
 text-align: center;
 font-size: 24pt;
 font-weight: bold;
 color: #fff;
}

#charisma-logo
{
 width: 60px;
 position: absolute;
 top: 50%;
 left: 50%;
 margin-left: -30px;
 margin-top: -51px;
}

.charisma-title
{
 position: absolute;
 text-transform: uppercase;
 font-size: 12pt;
}

.charisma-title:hover
{
 color: #ddd;
 cursor: pointer;
}

.charisma-text
{
 display: none;
}

.charisma-text strong
{
 text-transform: uppercase;
}

#charisma-text
{
 display: none;
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 margin: 0;
 background-color: rgba(0, 0, 0, .2);
 color: #fff;
 cursor: pointer;
 padding: 10px;
}

#charisma-wrapper
{
 max-width: 600px;
 margin: 0 auto;
 padding: 80px 0 0 0;
 text-align: center;
}

#charisma-1 {top: 15%; right: 55%; text-align: right;}
#charisma-2 {top: 15%; left: 55%;}
#charisma-3 {top: 40%; right: 60%; text-align: right;}
#charisma-4 {top: 40%; left: 60%;}
#charisma-5 {top: 65%; right: 55%; text-align: right;}
#charisma-6 {top: 65%; left: 55%;}

#igen
{
 background-color: var(--color-lightbrick);
 padding: 20px 10px 80px 10px;
}

#igen-news
{
 display: flex;
 flex-direction: row;
}

#igen > .wrapper > p
{
 color: var(--color-brick);
}

#igen-news > div
{
 flex: 1;
 width: 49%;
 margin-right: 2%;
 background-color: #fff;
 position: relative;
 padding-bottom: 1em;
}

#igen-news > div:last-child
{
 margin-right: 0;
}

.igen-news-img
{
 width: 100%;
 height: 0;
 padding-bottom: 66.66666666%;
 background-position: center;
 background-size: cover;
}

#igen-news .date
{
 font-size: 8pt;
 margin: 10px 10px 0 10px;
}

#igen-news h4
{
 font-size: 12pt;
 font-weight: bold;
 color: var(--color-brick);
 text-transform: none;
 text-align: left;
 margin: 0 10px 10px 10px;
}

#igen-news h4 a
{
 text-decoration: none;
 color: inherit;
}

#igen-news p
{
 font-size: 12pt;
 line-height: 1.2em;
 margin: 0 10px 10px 10px;
}

#igen-news p.news-more
{
 display: block;
 width: 100%;
 padding-left: 20px;
 position: absolute;
 bottom: 0;
 right: 0;
}

#feast
{
 background-color: var(--color-lightbrick);
 padding: 20px 10px 80px 10px;
}

#feast-news > div
{
 width: 100%;
 background-color: var(--color-brick);
 color: #fff;
 margin-bottom: 20px;
}

#feast-news a
{
 color: inherit;
 text-decoration: none;
}

#feast-news h4
{
 color: #fff;
 text-align: left;
 text-transform: uppercase;
 padding-bottom: 10px;
 position: relative;
}

#feast-news h4::after
{
 width: 1.5em;
 content: " ";
 width: 1.5em;
 height: 1px;
 background-color: #fff;
 position: absolute;
 bottom: 0;
 left: 0;
}

.feast-img
{
 display: inline-block;
 vertical-align: top;
 width: 68%;
}

.feast-img > img
{
 display: block;
 width: 100%;
}

.feast-text
{
 display: inline-block;
 vertical-align: top;
 width: 32%;
 padding: 10px;
 font-size: 12pt;
 line-height: 1.2em;
}

#motto
{
 background-color: #fff;
 padding: 20px 10px;
}

#motto p
{
 text-align: center;
 color: var(--color-brick);
}

#history
{
 background-color: #e5e9e1;
 padding: 20px 10px 80px 10px;
}

#timeline
{
 width: 100%;
 height: 12em;
 overflow: hidden;
 padding: 0px 10px;
 margin: 5px 0;
 position: relative;
 -ms-overflow-style: none;
 scrollbar-width: none;
 -webkit-mask: linear-gradient(0deg, rgba(0,0,0,0) 0, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
}

#timeline::-webkit-scrollbar
{
 display: none;
}

#timeline-content
{
 width: 100%;
 position: absolute;
 top: 0;
 left: 0;
 padding: 20px 0;
}

#timeline-content > div
{
 display: flex;
 flex-direction: row;
 justify-content: center;
 position: relative;
}

/*#timeline-content > div:after
{
 position: absolute;
 left: 0;
 bottom: 0;
 height: 1px;
 width: 100%;
 content: "";
 background-color: var(--color-midbrick);
 z-index: 0;
}*/

#timeline-content > div:last-child:after
{
 background-color: transparent;
}

#timeline-content div > div
{
 display: inline-block;
}

#timeline-content > div:nth-child(even)
{
 flex-direction: row-reverse;
}

.timeline-arrow
{
 display: block;
 text-align: center;
 cursor: pointer;
 margin: 0 auto 5px auto;
}

#timeline-arrow-up
{
 width: 17px;
 height: 17px;
 background-image: url(../img/timeline-up.svg);
}

#timeline-arrow-up:hover
{
 background-image: url(../img/timeline-up-active.svg);
}

#timeline-arrow-up2
{
 width: 17px;
 height: 26px;
 background-image: url(../img/timeline-up2.svg);
}

#timeline-arrow-up2:hover
{
 background-image: url(../img/timeline-up2-active.svg);
}

#timeline-arrow-down
{
 width: 17px;
 height: 17px;
 background-image: url(../img/timeline-down.svg);
}

#timeline-arrow-down:hover
{
 background-image: url(../img/timeline-down-active.svg);
}

#timeline-arrow-down2
{
 width: 17px;
 height: 26px;
 background-image: url(../img/timeline-down2.svg);
}

#timeline-arrow-down2:hover
{
 background-image: url(../img/timeline-down2-active.svg);
}

.tl-bullet
{
 width: 2%;
 text-align: center;
 color: var(--color-gold);
 background: url(../img/timeline-back.gif) center repeat-y;
 position: relative;
 z-index: 1;
}

.tl-bullet:after
{
 position: absolute;
 top: 17px;
 left: 50%;
 margin-left: -5px;
 content: "";
 width: 9px;
 height: 9px;
 background-color: var(--color-gold);
 border-radius: 5px;
}

#timeline-content > div:first-child .tl-bullet:before
{
 content: "";
 position: absolute;
 top: 0;
 left: 50%;
 width: 11px;
 height: 2px;
 margin-left: -6px;
 background-color: var(--color-gold);
}

#timeline-content > div:last-child .tl-bullet:before
{
 content: "";
 position: absolute;
 bottom: 0;
 left: 50%;
 width: 11px;
 height: 2px;
 margin-left: -6px;
 background-color: var(--color-gold);
}

.tl-date
{
 width: 49%;
 padding: .5em .5em 0 0;
 font-weight: bold;
 color: var(--color-gold);
 text-align: right;
}

.tl-desc
{
 width: 49%;
 color: var(--color-brick);
 padding: .5em 0 .5em .5em;
}

.tl-desc.strong
{
 text-transform: uppercase;
}

#timeline-content > div:nth-child(even) .tl-date
{
 text-align: left;
 padding: .5em 0 0 .5em;
}

#timeline-content > div:nth-child(even) .tl-desc
{
 text-align: right;
 padding: .5em .5em .5em 0;
}

/* content */

.content
{
 margin: 40px auto 80px auto;
}

article
{
 display: inline-block;
 vertical-align: top;
 width: calc(100% - 320px);
 margin: 0 auto;
 padding: 10px;
 overflow: hidden;
}

article .lead
{
 font-weight: bold;
}

article .video
{
 width: 100%;
 overflow: hidden;
 position: relative;
 padding-bottom: 56.25%;
 margin-bottom: 10px;
}

article .video > iframe
{
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

article img
{
 max-width: 100%;
}

article h1,
article h2,
article h3,
article h4
{
 text-align: left;
 line-height: 1.4em;
}

article .caption
{
 font-size: 10pt;
 margin: -1.5em 0 0 0;
}

article .date
{
 font-size: 10pt;
}

article h1
{
 color: var(--color-gold);
}

article h2
{
 color: var(--color-brick);
}

#content-right
{
 display: inline-block;
 vertical-align: top;
 width: 300px;
 margin: 10px 0 0 20px;
}

.content-news-img
{
 width: 100%;
 height: 0;
 padding-bottom: 66.66666666%;
 background-size: cover;
 background-position: center;
}

.content-news-text p
{
 font-size: 10pt;
 line-height: 1.2em;
}

.content-news-text a
{
 text-decoration: none;
}

.content-news-text h4
{
 margin-top: 10px;
 line-height: 1.2em;
 text-align: left;
 position: relative;
 padding-bottom: 5px;
 color: var(--color-brick);
 text-transform: none;
}

.content-news-text h4::after
{
 width: 1.5em;
 content: " ";
 width: 1.5em;
 height: 1px;
 background-color: var(--color-brick);
 position: absolute;
 bottom: 0;
 left: 0;
}

#news-list .news-item
{
 display: inline-block;
 vertical-align: top;
 width: 24%;
 margin-right: 1%;
 margin-bottom: 20px;
}

/* people */

ul#people-list
{
 list-style: none;
 padding: 0;
}

ul#people-list > li
{
 display: inline-block;
 vertical-align: top;
 width: 230px;
 margin: 0 5px 20px 5px;
 text-align: center;
}

ul#people-list > li img
{
 display: block;
 margin-bottom: 10px;
 width: 100%;
}

ul#people-list a
{
 text-decoration: none;
 color: var(--color-gold);
}

.people-image
{
 display: inline-block;
 vertical-align: top;
 width: 400px;
 margin-right: 20px;
}

.people-image > img
{
 display: block;
 width: 100%;
}

.people-text
{
 display: inline-block;
 vertical-align: top;
 width: calc(100% - 420px);
}

/* gallery */

.gallery-list-item
{
 display: inline-block;
 vertical-align: top;
 text-align: center;
 width: 25%;
 margin-bottom: 40px;
 padding: 5px;
}

.gallery-list-img
{
 width: 100%;
 height: 0;
 padding-bottom: 100%;
 background-size: cover;
 background-position: center;
}

.gallery-list-item a
{
 text-decoration: none;
}

.gallery-slider
{
 width: 80%;
 margin: 0 auto 20px auto;
}

.gallery-slider img
{
 max-width: 100%;
 margin: 0 auto;
}

.gallery-nav
{
 width: 80%;
 margin: 0 auto 20px auto;
}

/* footer */

footer
{
 background-color: var(--color-lightbrick);
}

footer.index
{
 background-color: var(--color-beige);
}

footer > div
{
 padding: 20px 0;
}

#footer-social > a
{
 display: inline-block;
 vertical-align: top;
 margin: 0 5px;
}

#bottom-menu
{
 background-color: #a3a0a0;
 padding: 20px 10px;
 font-size: 10pt;
}

ul#footer-menu
{
 list-style: none;
 margin: 0;
 padding: 0;
 font-size: 10pt;
}

ul#footer-menu > li
{
 display: inline-block;
 vertical-align: top;
 width: 15%;
 margin-right: 1.66666666%;
 color: #fff;
 line-height: 1.5em;
}

ul#footer-menu > li span
{
 text-transform: uppercase;
 position: relative;
 display: block;
 margin-bottom: 1em;
}

ul#footer-menu > li span::after
{
 content: " ";
 width: 1.5em;
 height: 1px;
 background-color: #fff;
 position: absolute;
 bottom: -4px;
 left: 0;
}

ul#footer-menu > li > ul
{
 list-style: none;
 margin: 0;
 padding: 0;
}

ul#footer-menu > li > ul > li
{
 line-height: 1.3em;
 margin-bottom: .5em;
}

#bottom-menu,
#bottom-menu a
{
 text-decoration: none;
 color: #fff;
}

#popup
{
 position: fixed;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 z-index: 10000;
 background-color: #333;
 background-color: rgba(0, 0, 0, 0.8);
}

#popup-content
{
 position: relative;
 margin: 5% auto;
 width: 1000px;
 max-width: 96%;
 max-height: 90%;
 box-sizing: border-box;
 background-color: var(--color-beige);
 padding: 20px 40px;
 overflow-y: scroll;
}

#popup-content h1
{
 font-weight: 500;
 color: var(--color-gold);
 padding-bottom: .5em;
 border-bottom: 1px solid var(--color-brick);
}

#popup-content h2
{
 text-align: left;
 color: var(--color-gold);
 padding-bottom: .5em;
 border-bottom: 1px solid var(--color-brick);
}

#popup-content p
{
 margin: 0 0 .5em 0;
}

#popup-content strong
{
 color: var(--color-brick);
}

#popup-content img
{
 max-width: 100%;
}

#popup-close
{
 color: #075190;
 margin: 1em auto 0 auto;
 cursor: pointer;
 text-align: center;
}

/* rooms */

#rooms-left
{
 display: inline-block;
 width: 40%;
 margin-right: 5%;
 vertical-align: top;
}

#rooms-right
{
 display: inline-block;
 width: 55%;
 vertical-align: top;
}

#rooms-floorplan
{
 padding: 40px 0;
}

#rooms-floorplan-left
{
 display: inline-block;
 vertical-align: top;
 width: 85%;
 position: relative;
 overflow: hidden;
 padding-top: 70%;
}

#rooms-floorplan-left iframe
{
 border: 0;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 width: 100%;
 height: 100%;
}

#rooms-floorplan-right
{
 display: inline-block;
 vertical-align: bottom;
 width: 15%;
 margin-bottom: 4em;
 text-align: left;
 font-weight: bold;
}

#rooms-floorplan-right a
{
 cursor: pointer;
}

#rooms-floorplan-right ul
{
 list-style: none;
 padding: 0;
}

 #rooms-floorplan-left {display: block; width: 100%; padding-top: 82%;}
 #rooms-floorplan-right {display: block; width: 100%; text-align: center;}
 #rooms-floorplan-right ul li {display: inline-block; margin-right: 1em;}
 #rooms-floorplan-right ul li:last-child {margin-right: 0;}

.floor-active {color: var(--color-gold);}
.rooms-photo-half {display: inline-block; vertical-align: top; width: 49%; margin: .5%;}
.rooms-photo-full {width: 99%; margin: .5%;}

/* MQ */

@media screen and (max-width: 1230px)
{
 #content-right {margin-right: 10px;}
 article {width: calc(100% - 330px);}
 .feast-text {font-size: 10pt;}

 .mobile-only {display: block !important;}
 #menu-h {display: block; position: absolute; top: 0; right: 20px; width: 20px; height: 20px; cursor: pointer;}
 #header-menu ul {display: none; width: 100%; background-color: var(--color-brick); padding-top: 30px;}
 #header-menu ul li {display: block; width: 100%; margin: 0; padding: 5px 0; font-size: 12pt;}
 #header-menu ul li .submenu {max-height: none; width: 100%; position: relative; top: auto; margin: 0 auto; padding: 5px; background-color: #fff;}
 #header-menu ul li .submenu a {display: block;}
 #header-menu > ul > li:hover > ul.submenu {max-height: none;}
 #header-menu > ul {margin-left: 0;}
 .main-lelki-gondozas {margin-right: 0;}
}

@media screen and (max-width: 980px)
{
 #information ul li, #institutions ul li {width: 33.33333333%;}
 ul#footer-menu > li {width: 32%; margin-right: 1.33333333%;}
 #programs-table, #programs-calendar {display: block; width: 100%;}
 #news-block {display: block;}
 #news-left, #news-right {display: block; width: 100%; margin: 0;}
 #news-right {padding-top: 1px;}
 #news-left > a:last-child > div {margin-bottom: 20px;}
/* #header-menu ul li {font-size: 9pt; margin: 0 5px;}*/

 #content-right {width: 200px; margin-right: 10px;}
 article {width: calc(100% - 230px);}
 .feast-img, .feast-text {display: block; width: 100%;}
 .gallery-list-item {width: 33.33333333%; margin-bottom: 20px;}
 #news-list .news-item {width: 32%; margin-right: 1.33333333%;}
}

@media screen and (max-width: 860px)
{
 #header-top-icons {position: static; top: auto; right: auto; padding-top: 5px;}
 #rooms-left, #rooms-right {display: block; width: 100%; margin-right: 0;}
}

@media screen and (max-width: 800px)
{
 #header-title > span {font-size: 18px;}
 #events > a {width: 100%; padding-bottom: 66.66666666%;}
 .ev-more {font-size: 12pt;}
}

@media screen and (max-width: 700px)
{
 #header-title > span {font-size: 16px;}
 #headline-image {padding-bottom: 50%;}
 #igen-news {display: block;}
 #igen-news > div {display: block; width: 100%; margin-right: 0; margin-bottom: 20px;}
 #rooms-floorplan-right {font-size: .8em;}
}

@media screen and (max-width: 600px)
{
 #information ul li, #institutions ul li {width: 50%;}
 #charisma {height: 500px;}
 ul#footer-menu > li {width: 48.5%; margin-right: 1.5%;}
 #header-title > span {padding: 0; font-size: 12px; margin-top: 2px;}
 #headline-motto {width: 60%; left: 35%; font-size: 14px;}
 #content-right {width: 100%; margin: 0; padding: 15px;}
 article {width: 100%; padding: 15px;}
 #news-list .news-item {width: 49%; margin-right: 1%;}
}

@media screen and (max-width: 540px)
{
 #header-title > span {padding: 0; font-size: 10px; margin-top: 4px;}
/* #rooms-floorplan-left {width: 75%;}
 #rooms-floorplan-right {width: 25%;}*/
 #rooms-floorplan-left {display: block; width: 100%; padding-top: 90%;}
 #rooms-floorplan-right {display: block; width: 100%; text-align: center;}
 #rooms-floorplan-right ul li {display: inline-block; margin-right: 1em;}
 #rooms-floorplan-right ul li:last-child {margin-right: 0;}
}

@media screen and (max-width: 480px)
{
 #header-title > span {font-size: 9px; line-height: 16px; margin-top: 5px;}
 #headline-image {padding-bottom: 66.66666666%;}
 #news-list .news-item {width: 100%; margin-right: 0;}
 .charisma-title {font-size: 10pt;}
}

@media screen and (max-width: 360px)
{
 #information ul li, #institutions ul li {width: 100%;}
}