html,
body {
    height: 100%;
    margin: 0;
    /*background-image: url(/img/bg.png);*/
    /*background-repeat: no-repeat;*/
    /*background-attachment: fixed;*/
    /*background-size: cover;*/
    background-color: #f4f4f4;
    font-family: Roboto, sans-serif;
/*    font-size: 105%;*/
/*    font-weight: bold;*/
}

div a p{
    text-decoration: none;
}

.my-navbar{
    background-color: #e1dad8;
    height: 60px;
    padding-top: 2px;
}

ul.navbar-nav.nav li a{
    color:#94164b;
}

ul.navbar-nav.nav li a:hover{
    color:#3ea098;
}

#w1-collapse{
    z-index: 1500;
}

#w3-collapse{
    z-index: 1000;
}

.wrap {
    min-height: 100%;
    height: auto;
    margin: 0 auto -60px;
    padding: 0 0 60px;
}

.wrap > .container {
    padding: 10px 15px 20px;
}

.content-main{
    margin-top:100px;
}

.navbar-lower{
    margin-top: 60px;
}

.navbar-collapse{
    /*background-color: #e1dad8;*/
}

.footer {
    height: 60px;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

.start-hero{
    width: 100%;
    height: 750px;
    overflow: hidden;
    margin: 0 0 20px 0;
}

div.carousel-caption{
    text-align: right;
    top: 200px;
    right: 5%;
}

.jumbotron {
    height: 500px;
    text-align: left;
    background-color: transparent;
    color: #ececf6;
    text-shadow: 3px 3px 6px #3c475e;
    margin-top: -100px;
    margin-bottom: -40px;
}

.jumbotron .btn {
    font-size: 21px;
    padding: 14px 24px;
}

.jumbotron h2{
    margin-top: 350px;
    margin-left: 45px;
}

.btn.upper-btn.btn-blue{
    width: 100%;
    height: 50px;
    background-color: #dcdfff;
    color: #000000;
    white-space: normal;
    word-wrap: break-word;
    margin-bottom: 3px;
    border-radius: unset;
    box-shadow: 0 0 3px #dcdfff;
}

.btn.upper-btn.btn-blue:hover{
    transition: 500ms;
    color: #dcdfff;
    background-color: #8f98c1;
    box-shadow: 0 0 6px #ececf6;
    border-radius: 5px;
}

.btn.upper-btn.btn-white{
    width: 100%;
    height: 50px;
    background-color: #ececf6;
    color: #000000;
    margin-bottom: 3px;
    border-radius: unset;
    box-shadow: 0 0 3px #ececf6;
}

.btn.down-btn.btn-green{
    width: 100%;
    height: 50px;
    background-color: #effcd0;
    border: solid 1px #97b54f;
    color: #000000;
    white-space: normal;
    word-wrap: break-word;
    margin-bottom: 3px;
    border-radius: unset;
    box-shadow: 0 0 3px #97b54f;
}

.btn.down-btn.btn-green:hover{
transition: 500ms;
color: #effcd0;
background-color: #97b54f;
box-shadow: 0 0 6px #effcd0;
border-radius: 5px;
}

.btn.mosaic-btn{
    width: 100%;
    height: 150px;
    background-color: #ececf6;
    color: #000000;
    white-space: normal;
    word-wrap: break-word;
    margin-bottom: 15px;
    border-radius: unset;
    box-shadow: 0 0 3px #000000;
   align-items: center;
}

.btn.mosaic-btn:hover{
    transition: 500ms;
    color: #ececf6;
    background-color: #3ea098;
    box-shadow: 0 0 6px #000000;
    border-radius: 5px;
}

.not-set {
    color: #c55;
    font-style: italic;
}

.parent{
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.parent div{
    display: grid;
    place-items: center;
}

.box{
    height: 100px;
    /*flex: 0 1 150px;*/
    margin: 5px;
    background-color: #94164b;
    color: #ffffff;
    white-space: normal;
    word-wrap: break-word;
    border-radius: unset;
    box-shadow: 0 0 3px #000000;
    text-align: center;
    padding: 5px;
}

.box:hover{
    transition: 500ms;
    color: #ececf6;
    background-color: #3ea098;
    box-shadow: 0 0 6px #000000;
    border-radius: 5px;
}

.box-white{
    height: 100px;
    margin: 5px;
    background-color: #ffffff;
    color: #94164b;
    white-space: normal;
    word-wrap: break-word;
    border-radius: unset;
    border: 1px solid #94164b;
    box-shadow: 0 0 3px #000000;
    text-align: center;
    padding: 5px;
}

.box-white:hover{
    transition: 500ms;
    color: #ececf6;
    background-color: #3ea098;
    box-shadow: 0 0 6px #94164b;
    border-radius: 5px;
}

.img-main img{
    width:98%;
}

.img-gallery{
    display: inline-block;
    height: 180px;
    width: 320px;
    box-shadow: 0 0 6px #94164b;
    margin: 5px;
    padding: 0;
    overflow: hidden;
    border: 5px solid #ffffff;
    border-radius: 3px;
}

.img-gallery:hover{
    box-shadow: 0 0 3px #0a0a0a;
}

.img-gallery img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*object-position: 0 0;*/
    border: none;
    margin: 0;
    padding: 0;
    transition: filter .5s ease-in-out;
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

.img-gallery img:hover{
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

a.gallery-item{
    display: inline-block;
    height: 135px;
    width: 240px;
    box-shadow: 0 0 6px #94164b;
    margin: 5px;
    padding: 0;
    overflow: hidden;
    border: 5px solid #ffffff;
    border-radius: 3px;
}
a.gallery-item img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
    margin: 0;
    padding: 0;
    transition: filter .5s ease-in-out;
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}


div.row.text-left{
    margin: 0 5px;
}

.touragent{
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 2px 2px 6px #0a0a0a;
    margin-bottom: 10px;
    padding: 5px;
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.touragent div{
    display: grid;
    float: left;
    align-items: center;
}

.touragent:hover{
    box-shadow: 2px 2px 3px #0a0a0a;
}

.img-circle{
    display: inline-block;
    width: 150px;
    height: 150px;
    overflow: hidden;
    border-radius: 50%;
    margin: 5px;
}

.img-circle img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*object-position: 0 0;*/
    border: none;
    margin: 0;
    padding: 0;
}

.touragents-view{
    margin: 10px;
}
.touragents-view img{
    width: 100px;
}

.photo img{
    width: 400px;
}

div.page-head h2{
    color: #e1dad8;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    padding-left: 5px;
}

a.asc:after {
    content: /*"\e113"*/ "\e151";
}

a.desc:after {
    content: /*"\e114"*/ "\e152";
}

.sort-numerical a.asc:after {
    content: "\e153";
}

.sort-numerical a.desc:after {
    content: "\e154";
}

.sort-ordinal a.asc:after {
    content: "\e155";
}

.sort-ordinal a.desc:after {
    content: "\e156";
}

.grid-view th {
    white-space: nowrap;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

/* align the logout "link" (button in form) of the navbar */
.nav li > form > button.logout {
    padding: 15px;
    border: none;
}

@media(max-width:767px) {
    .nav li > form > button.logout {
        display:block;
        text-align: left;
        width: 100%;
        padding: 10px 15px;
    }
    .start-hero{
        height: 570px;
    }
}

@media(max-width:920px) {
    .start-hero{
        height: 690px;
    }
}

@media(max-width:640px) {
    .start-hero{
        height: 480px;
    }
}

@media(max-width:540px) {
    .start-hero{
        height: 405px;
    }
}

.nav > li > form > button.logout:focus,
.nav > li > form > button.logout:hover {
    text-decoration: none;
}

.nav > li > form > button.logout:focus {
    outline: none;
}

.page-head{
    background-color: rgba(0, 0, 0, 0.58);
    align-items: center;
    color: #ececf6;
    padding-left: 15px;
    margin: 0 15px 15px 15px;
}
.page-head h2{
    margin: 10px 0;
}

.page-head a{
    color: #ececf6;
}

.btn.green-border{
    font-weight: bold;
    font-size: 110%;
    height: 100px;
    width: 150px;
    color: #ececf6;
    background-color: #94164b;
    margin: 5px 15px;
}

a.btn.green-border{
    display: inline-grid;
    place-items: center;
}

.btn.green-border:hover{
    background-color: #97b54f;
    color: #ececf6;
}

.button-item{
    position: relative;
    display: inline-grid;
    /*float: left;*/
    margin: 0 5px;
}

.button-item a {
    display: block;
}

.tooltip {
    /* by default, hide it */
    display: none;
    /* allow us to move the tooltip */
    position: absolute;
    /* align the image properly */
    padding: 5px;
    border-radius: 3px;
    box-shadow: 0 0 6px #97b54f;
}

.mosaic-btn{
    display: inline-grid;
    place-items: center;
}

.animated-map {
    padding: 10px;
    margin: 15px 0;
}

.animated-map img{
    position: absolute;
    bottom: 15%;
    left: 15%;
    height: 10%;
}

.animated-map p{
    position: absolute;
    bottom: 5%;
    left: 15%;
}

/* Анімація мапи */
#fromKyiv{
    stroke-dasharray: 164;
    stroke-dashoffset: 164;
    transition: 1s;
}
#lengthKyiv, #timeKyiv, #timeTrainKyiv{
    opacity: 0;
    transition: 1s;
}
#fromKharkiv{
    stroke-dasharray: 154;
    stroke-dashoffset: 154;
    transition: 1s;
}
#lengthKharkiv, #timeKharkiv, #timeTrainKharkiv{
    opacity: 0;
    transition: 1s;
}

#fromLviv{
    stroke-dasharray: 472;
    stroke-dashoffset: 472;
    transition: 1s;
}
#lengthLviv, #timeLviv, #timeTrainLviv{
    opacity: 0;
    transition: 1s;
}

#fromOdesa{
    stroke-dasharray: 242;
    stroke-dashoffset: 242;
    transition: 1s;
}
#lengthOdesa, #timeOdesa, #timeTrainOdesa{
    opacity: 0;
    transition: 1s;
}
#fromTernopil{
    stroke-dasharray: 358;
    stroke-dashoffset: 358;
    transition: 1s;
}
#lengthTernopil, #timeTernopil, #timeTrainTernopil{
    opacity: 0;
    transition: 1s;
}

/* MENU Examples */
/*MEGA - MENU*/
.megamenu {
    position: static;
}

.megamenu .dropdown-menu {
    background: #eaafc8;
    background: -webkit-linear-gradient(to right, #94164b, #eaafc8);
    background: linear-gradient(to right, #94164b, #eaafc8);
    /*background: none;*/
    border: none;
    width: 100%;
    transition: 500ms;
}

ul.navbar-nav.mx-auto{
    list-style: none;
    color: #3ea098;
}

.navbar-brand img{
    margin: 3px;
    height: 60px;
}

.navbar-nav > li > a{
/*a.nav-link{*/
    margin-top: 5px;
    color: #94164b;
    padding: 10px 3px 5px 3px;
    font-size: 1.1em;
    /*border-left: solid 1px #3ea098;*/
    /*border-right: solid 1px #3ea098;*/
}

/*body {*/
/*    background: #eaafc8;*/
/*    background: -webkit-linear-gradient(to right, #eaafc8, #94164b);*/
/*    background: linear-gradient(to right, #eaafc8, #94164b);*/
/*    min-height: 100vh;*/
/*}*/

code {
    color: #94164b;
    background: #fff;
    padding: 0.1rem 0.2rem;
    border-radius: 0.2rem
}

.text-uppercase {
    letter-spacing: 0.08em
}

ul li a {
    color: #e1dad8;
}

/*3d menu*/
.menu {
    list-style: none;
    margin: 10px auto;
    padding: 0;
    max-width: 100%;
    width: 100%;
    text-align: center;
    /*background-color: #fff;*/
    display: flex;
}

.menu__item {
    flex-basis: 25%;
}

.menu__item100 {
    flex-basis: 100%;
}

.menu__link {
    font-size: 0;
    line-height: 26px;
    color: #94164b;
    text-decoration: none;
    display: block;
    padding: 10px 0;
    background-color: #fff;
    position: relative;
}

.menu__link::before {
    content: attr(data-name);
    position: absolute;
    font-size: 16px;
    left: 0;
    top: 0;
    width: 100%;
    padding: 10px 0;
    background-color: #3ea098;
    color: #e1dad8;
    transform: rotateX(90deg) translateY(46px);
    transform-origin: 50% 100%;
    transition-duration: 500ms;
    transition-property: transform;
}

.menu__link:hover::before {
    transform: rotateX(0deg) translateY(0);
}


.menu__link::after {
    content: attr(data-name);
    position: absolute;
    font-size: 16px;
    left: 0;
    top: 0;
    width: 100%;
    padding: 10px 0;
    background-color: #fff;
    color: #94164b;
    transform: rotateX(0deg) translateY(0);
    transform-origin: 50% 0;
    transition-duration: 500ms;
    transition-property: transform;
}

.menu__link:hover::after {
    transform: rotateX(90deg) translateY(-46px);
}