@import url('https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed|Roboto+Mono|Roboto+Slab&display=swap');

body {
    background: transparent;
}

.no-select {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

:root {
    --vatrus-red: #C0392B;
    --vatrus-red-bright: #E74C3C;
    --vatrus-orange: #D35400;
    --vatrus-orange-bright: #E67E23;
    --vatrus-yellow: #F29D12;
    --vatrus-yellow-bright: #F1C40F;
    --vatrus-blue: #288DB9;
    --vatrus-blue-bright: #3598DB;
    --vatrus-green: #27AE60;
    --vatrus-green-bright: #2FCC71;
    --vatrus-bluegreen: #18A085;
    --vatrus-bluegreen-bright: #18BC9B;
    --vatrus-violet: #8E44AD;
    --vatrus-violet-bright: #9B59B6;
    --vatrus-gray: #7E8C8D;
    --vatrus-gray-bright: #95A5A6;
}

body.red {                  border-right:        5px solid var(--vatrus-red); }
body.red h1, body.red h2,
body.red h3, body.red h4,
body.red h5, body.red h6,
body.red div.row a:not(.white) {
                            color:               var(--vatrus-red); }

body.orange {               border-right:        5px solid var(--vatrus-orange); }
body.orange h1, body.orange h2,
body.orange h3, body.orange h4,
body.orange h5, body.orange h6,
body.orange div.row a:not(.white) {
                            color:               var(--vatrus-orange); }

body.yellow {               border-right:        5px solid var(--vatrus-yellow); }
body.yellow h1, body.yellow h2,
body.yellow h3, body.yellow h4,
body.yellow h5, body.yellow h6,
body.yellow div.row a:not(.white) {
                            color:               var(--vatrus-yellow); }

body.blue {                 border-right:        5px solid var(--vatrus-blue); }
body.blue h1, body.blue h2,
body.blue h3, body.blue h4,
body.blue h5, body.blue h6,
body.blue div.row a:not(.white) {
                            color:               var(--vatrus-blue); }

body.green {                border-right:        5px solid var(--vatrus-green); }
body.green h1, body.green h2,
body.green h3, body.green h4,
body.green h5, body.green h6,
body.green div.row a:not(.white) {
                            color:               var(--vatrus-green); }

body.bluegreen {            border-right:        5px solid var(--vatrus-bluegreen); }
body.bluegreen h1, body.bluegreen h2,
body.bluegreen h3, body.bluegreen h4,
body.bluegreen h5, body.bluegreen h6,
body.bluegreen div.row a:not(.white) {
                            color:               var(--vatrus-bluegreen); }

body.violet {               border-right:        5px solid var(--vatrus-violet); }
body.violet h1, body.violet h2,
body.violet h3, body.violet h4,
body.violet h5, body.violet h6,
body.violet div.row a:not(.white) {
                            color:               var(--vatrus-violet); }

body.gray {                 border-right:        5px solid var(--vatrus-gray); }
body.gray h1, body.gray h2,
body.gray h3, body.gray h4,
body.gray h5, body.gray h6,
body.gray div.row a:not(.white) {
                            color:               var(--vatrus-gray); }


.animated-icon {
    display: block;
    width: 28px;
    height: 22px;
    position: relative;
    margin: 10px 0 6px 20px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    cursor: pointer;
    overflow: hidden;
    z-index: 2;
}
.animated-icon span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    -o-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
.animated-icon span {
    background: #ffffff;
}
.animated-icon span:nth-child(1) {
    top: 0;
}
.animated-icon span:nth-child(2) {
    top: 8px;
}
.animated-icon span:nth-child(3) {
    top: 16px;
}
.animated-icon.open span:nth-child(1) {
    top: 11px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
}
.animated-icon.open span:nth-child(2) {
    opacity: 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.animated-icon.open span:nth-child(3) {
    top: 11px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.nav-item {
    border-right: 5px solid rgba(0,0,0,0);
}
.nav-item:hover {
    border-right-width: 7px;
}

@media screen and (max-width: 480px) {
    .nav-item {
        border-left: 5px solid rgba(0,0,0,0);
    }
    .nav-item:hover {
        border-left-width: 7px;
    }
}
.nav-item.red {             border-left-color:  var(--vatrus-red); border-right-color:  var(--vatrus-red); }
.nav-item.red.active {      background-color:   var(--vatrus-red-bright); }
.nav-item.orange {          border-left-color:  var(--vatrus-orange); border-right-color:  var(--vatrus-orange); }
.nav-item.orange.active {   background-color:   var(--vatrus-orange-bright); }
.nav-item.yellow {          border-left-color:  var(--vatrus-yellow); border-right-color:  var(--vatrus-yellow); }
.nav-item.yellow.active {   background-color:   var(--vatrus-yellow-bright); }
.nav-item.yellow.active a {  color: var(--dark); }
.nav-item.blue {            border-left-color:  var(--vatrus-blue); border-right-color:  var(--vatrus-blue); }
.nav-item.blue.active {     background-color:   var(--vatrus-blue-bright); }
.nav-item.green {           border-left-color:  var(--vatrus-green); border-right-color:  var(--vatrus-green); }
.nav-item.green.active {    background-color:   var(--vatrus-green-bright); }
.nav-item.green.active a {  color: var(--dark); }
.nav-item.bluegreen {       border-left-color:  var(--vatrus-bluegreen); border-right-color:  var(--vatrus-bluegreen); }
.nav-item.bluegreen.active {background-color:   var(--vatrus-bluegreen-bright); }
.nav-item.violet {          border-left-color:  var(--vatrus-violet); border-right-color:  var(--vatrus-violet); }
.nav-item.violet.active {   background-color:   var(--vatrus-violet-bright); }
.nav-item.gray {            border-left-color:  var(--vatrus-gray); border-right-color:  var(--vatrus-gray); }
.nav-item.gray.active {     background-color:   var(--vatrus-gray-bright); }

div.social-links {
    text-align: center;
    padding: 10px 0 10px 0;
    font-size: 150%;
}
div.social-links a {
    color: rgba(255,255,255,.5) !important;
}
div.social-links a:hover {
    color: rgba(255,255,255,.75) !important;
}

div.auth-login {
    text-align: center;
    padding: 10px 0 10px 0;
}

div.auth-data {
    color: rgba(255,255,255,.5);
    text-align: center;
    padding: 10px 0 10px 0;
}
div.auth-data a {
    color: var(--vatrus-red);
}
div.auth-data a:hover {
    color: var(--vatrus-red-bright);
}

div.container-fluid > div.row:first-of-type {
    /*padding-top: 38px;*/
}
div.container > div.row:first-of-type {
    /*padding-top: 38px;*/
}

a.privacy-policy {
    color: rgba(255,255,255,.5) !important;
}
a.privacy-policy:hover {
    color: rgba(255,255,255,.75) !important;
}


div.container-fluid.top_row {
    margin-bottom: 40px;
    padding-bottom: 40px;
}
div.container-fluid.top_row > div.row {
    padding-top: 38px;
    vertical-align: middle;
}
div.container-fluid.top_row > div.row > div.col > h1 {
    margin-bottom: 0 !important;
    color: var(--light);
    text-shadow: 0 0 15px var(--dark);
    padding: 150px 0;
}
@media screen and (max-width: 480px) {
    div.container-fluid.top_row > div.row > div.col > h1 {
        padding: 10vh 0;
    }
}

div.timetable_animated {
    display: none;
}

div.timetable_simple {
    display: block;
    color: rgba(255,255,255,.5)
}
div.timetable_simple a {
    color: rgba(255,255,255,.5)
}
div.timetable_simple a {
    color: rgba(255,255,255,.75)
}