:root {
    --base: #FDF8F4;
    --gold: #DBBE8F;
    --lgray: #edebea;
    --gray: #C5C3C2;
    --dark: #545454;
    --blue: #091D2E;
    --green: #D2D8BE;
}

body {background:var(--base);color:var(--blue)}
a, a:link, a:visited, .text-purple {color:var(--blue)!important}
a:hover {color:var(--dark)}

/* navbar */
.info-line {min-height:3.125rem}
.navbar {min-height:4.5625rem}
.navbar .nav-item {margin-right:1rem}
.navbar .dropdown-menu {
    border-radius: 0;
    border: none;
    border-top: 3px solid var(--gold);
    box-shadow: 0 2px 5px rgba(0,0,0,.1);
    -moz-box-shadow: 0 2px 5px rgba(0,0,0,.1);
    -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.1);}

.dropdown-menu {max-height: 300px;overflow-y: auto;overflow-x: hidden;}

/* colors */
.text-green {color:var(--dark)!important}
.bg-gold {background:var(--gold)}
.bg-green {background:var(--green)}

.btn-sgreen {font-size:1rem;outline:1px solid var(--green);outline-offset:.25rem;display:inline-block;padding:.5rem 1rem;border-radius:.75rem;margin-right:1rem;color:var(--dark);background-color:var(--green)}
.btn-sgreen.active, .btn-sgreen:hover {background-color:var(--gray)}

nav.navbar {background:var(--green)!important}
nav.navbar .navbar-brand img {width:0;height:0;}
nav.navbar .navbar-brand {position:absolute;top:1.25rem;left:1.25rem;background-image:url('images/logo-gray.png');background-repeat:no-repeat;background-position:center;background-size:contain;width:10rem;height:10rem}

.bg-lpurple {background:var(--base)}
.container.bg-white {background:transparent!important}
#landing {position:relative}
#landing .bg1 {position:fixed;top:73px;left:0;background-image:url('images/bg1.svg');background-repeat:no-repeat;background-position:top left;background-size:contain;width:219px;height:504px}
#landing .bg2 {position:fixed;bottom:0;right:0;background-image:url('images/bg2.svg');background-repeat:no-repeat;background-position:top left;background-size:contain;width:193px;height:575px}
#landing .leaves {position:absolute;top:0;left:25vw;background-image:url('images/leaves.png');background-repeat:no-repeat;background-position:center;background-size:contain;width:50vw;height:calc(0.4 * 50vw)}

#tag-title {margin-top:4rem;}
#tag-subtitle {display:grid;align-items:center;justify-content:center}
#tag-subtitle > span {background:var(--green);outline:1px solid var(--green);outline-offset:.5rem;display:inline-block;padding:1rem 2rem;border-radius:1.5rem;font-size:2rem}
#tag-lead {display:grid;justify-content:center;}
#tag-lead > span {display:inline-block;width:20vw;height:20vw;border-radius:50%;text-align:center;color:white;background:var(--dark);padding-top:5vw;margin-bottom:5rem}
#tag-text {margin-top:-4rem;margin-bottom:4rem}
#zeitplan {display:grid;justify-content:center;margin-bottom:4rem}
.btn-green {font-size:2rem;outline:1px solid var(--green);outline-offset:.5rem;display:inline-block;padding:1rem 2rem;border-radius:1.5rem;}

/* basic defs */
.bg-img {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 682px;
}
.dropdown-menu {z-index:1050}
.dropdown .dropdown-menu {margin-top:0}
.dropdown:hover .dropdown-menu {display:block}
#fade {width:100vw;height:100vh;position:fixed;top:0;left:0;z-index:1090;background-color:rgba(255,255,255,.8);display:none}
.hyphens-upper {hyphens:auto;text-transform:uppercase}

/* Leaflet */
#map {margin: 10px;}
.map-container {position:relative;margin-bottom:2rem}
.map-div {padding:0}
.pos-bottom {position:absolute;bottom:0;left:0;width:100%}
.pos-fixed {position:fixed;bottom:0;left:0;width:50%}
.map-icon {width:30px!important;height:40px!important;margin-left:-15px!important;margin-top:-30px!important}
.map-icon svg path {fill:var(--gold)}
.map-icon.selectedMarker svg path {fill:var(--dark)}
.map-icon svg path:hover {fill:var(--gray)}

/* column */
[class*=rolunk-] .img-div img, [class*=rolunk-] .img-bg {
    border-bottom: 4px solid var(--green);
    border-top-left-radius: 30px !important;
    border-top-right-radius: 30px !important;
}
[class*=rolunk-] .img-bg {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-top: 100%;
}
[class*=rolunk-] h3 {
    font-weight: 400;
    font-size: 1.25rem;
    text-transform: uppercase;
    margin: 1rem 0 0 0;
    color: black;
}
[class*=mestertanarok-] {
    background-color: var(--base);
}

body.column.leadnode {
    transition-delay: .1s;
    opacity: 1;
    transform: translateZ(0);
    transition-timing-function: ease;
    transition-duration: .4s;
    transition-property: opacity,transform;
}
body.column.leadnode > div {
    text-decoration: none !important;
    background-color: #fff;
    display: block;
    width: 100%;
    height: 100%;
    margin-top: 10px;
    color: var(--purple);
}
body.column.leadnode > div.text {min-height: 490px}
body.column.leadnode > div.text, .course-box {
    border-radius: 40px;
    -webkit-box-shadow: 0px 4px 16px 2px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 4px 16px 2px rgba(0,0,0,0.15);
    box-shadow: 0px 4px 16px 2px rgba(0,0,0,0.15);
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
body.column.leadnode > div.text:hover {
    margin-bottom: 10px;
    margin-top: 0px;
    -webkit-box-shadow: 0px 4px 16px 2px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 4px 16px 2px rgba(0,0,0,0.25);
    box-shadow: 0px 4px 16px 2px rgba(0,0,0,0.25);
}
body.column.leadnode .img-div {
    max-height: 170px;
    overflow-y: hidden;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
}
body.column.leadnode .video .img-div {
    max-height:auto;
    border-radius: 40px;
    position:relative;
}
body.column.leadnode .video i {
    position: absolute;
    font-size: 3rem;
    line-height: 1;
    left: calc(50% - 1.5rem);
    top: calc(50% - 2.5rem);
    z-index: 1050;
    color:white!important;
    opacity: 0;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
body.column.leadnode .video:hover i {
    opacity: 1;
}
body.column.leadnode .video h5 {
    padding-top:1rem!important;
    text-align:center;
    text-transform:uppercase;
    font-weight:normal;
    color:black!important;
}
body.column.leadnode .img-bg {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
body.column.leadnode-text {min-height:8rem;overflow:hidden}

[class*=studiok] .img-bg {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-top: 100%;
    position: relative;
    border-radius: 30px;
    border: 10px solid var(--gold)
}

body.column h1, h2 {font-weight:400;padding-top:3rem;text-align: center;}

[class*=studiok] .img-bg > div {
    position: absolute;
    bottom: 1rem;
    width: 100%;
    text-align: center;
}

.course-box {margin: 10px;}

/* institute */
.institute-info i {font-size:2rem;width:3rem;height:3rem;text-align:center;background:var(--green);border-radius:50%;color:var(--dark);line-height:3rem;margin-top:1rem}
.institute-info a {display:block}
.institute-timetable {margin-top:2rem}
.institute-timetable .nav-pills .nav-link {font-size:1rem;outline:1px solid var(--green);outline-offset:.25rem;display:inline-block;padding:.5rem 1rem;border-radius:.75rem;margin-right:1rem;color:var(--dark)}
.institute-timetable .nav-pills .nav-link.active {background-color:var(--green)}

.fees > div {padding-top:.375rem;padding-bottom:.375rem}

.timetable-div .text-white {color:var(--blue)!important}
.col-weekday {
    -ms-flex: 0 0 calc(100% / 7);
    flex: 0 0 calc(100% / 7);
    max-width: calc(100% / 7);
    border-right: 1px solid var(--lgray);
    border-top: 1px solid var(--lgray);
    padding: .25rem .5rem;
}
.col-weekday:nth-child(7n) {border-right:0 none;}
.c-head {
    text-align:center;
    background-color:var(--gold);
    color:white;
    padding:.5rem 0;
    border-right: 1px solid white;
}
.c-head:nth-child(7) {border:0 none;}
.past {background-color:var(--lgray);}
.past .alert {background-color:var(--gray)!important}
.past .text-white {color:white!important}
.today {background-color:var(--green)}
.btn-over {position:relative}
.btn-over span {
    width:1.5rem;
    height:1.5rem;
    display:inline-block;
    text-align:center;
    border-radius:50%;
    padding:.25rem;
    position:absolute;
    bottom:-.25rem;
    right:-.25rem}
small.users {display:block;background:white;color:black;border-radius:.25rem;padding:.25rem}
@media screen and (max-width:768px){
    .past, .c-head {display:none}
    .col-weekday {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* login */
#login-modal {color:var(--blue)}
#login-modal a, #login-modal a:link, #login-modal a:visited {color:var(--blue)}
#login-modal .modal-content {border-radius:50%;width:calc(375px - 1rem);height:calc(375px - 1rem);background:var(--gold);border:.5rem solid var(--dark)}
#login-modal .modal-dialog {max-width:calc(375px - 1rem)}
#login-modal .modal-body {padding-top:4rem;text-align:center;position:relative}
#login-modal input {border:0px none;text-align:center;border-bottom:2px solid var(--dark)}
#login-modal input::placeholder {color:var(--dark);font-weight:200}
#login-modal .login-msg {font-weight:200;}
#login-modal .form-group .col-12 {padding:0 2rem!important}
#login-modal button {background:var(--dark);color:white;width:3rem;height:3rem;border-radius:50%}
#login-modal button:hover {opacity:.8}
#login-modal .close {opacity:1;position:absolute;top:1.25rem;right:1.25rem}

footer {background-image:none!important;background-color:var(--green)}
footer h4::after {background-color:var(--blue);}
footer li::marker, footer #footer-contact .icon {color: var(--blue)}

@media screen and (max-width:991px){
    nav.navbar .navbar-brand {position:relative;top:0;left:0;width:5rem;height:5rem}
    .fs-8 {font-size:4rem!important}
    #tag-text, #tag-subtitle {margin-top:2rem}
    #tag-text {margin-left:auto;margin-right:auto}
    #tag-lead > span {width:35vw;height:35vw;padding-top:10vw;margin-bottom:5rem}
}
@media screen and (max-width:480px){
    nav.navbar .navbar-brand {width:4rem;height:4rem}
    #landing .leaves {left:5vw;width:90vw;height:calc(0.4 * 90vw)}
    .fs-8 {font-size:3rem!important}
    #tag-lead > span {width:74vw;height:74vw;padding-top:22vw;margin-bottom:5rem}
}