/*
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700|PT+Sans:400,700&subset=latin,latin-ext");
*/




html {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    font-weight: 400;
  }
  
  /**
   * Firefox specific rule
   */
  @-moz-document url-prefix() {
    body {
      font-weight: lighter !important;
    }
  }

  @font-face {
    font-family: 'DIN Condensed Bold'; /*a name to be used later*/
    src: url('/fonts/DIN Condensed Bold.ttf'); /*URL to font*/
}
  

  


/*  --------  begin from BASE.CSS  ------*/

.odlogo a:hover {
    opacity: .8;
}


.homelogo {
    opacity: 1;
}

.homelogo a:hover {
    opacity: .8;
    cursor: pointer;
}

.homelogo, .odessa-logo, .odlogo a {
    outline: 0;
}


.odessa-logo:focus {
    outline: none;
    outline: 0;
}

.firstHeading {
    margin-bottom: 10px;
}

.bodyHr {
    border-bottom: 1px dashed rgba(51, 51, 51, 0.651);
    margin: 15px 0 20px 0;
}

.diaryHr {
    border: 1px dashed #bdbdbd;
    margin: 7px 0 ;
    opacity: .8;
}

.infostatHr {
    border: 1px dashed #2a4c62;
    margin: 3px 0 ;
    opacity: .5;
}

.diaryHr-main {
    border: 1px dashed #cfcfcf;
    margin-top: 7px;
    opacity: .8;
}

.bodyContent {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 15px;
    line-height: 1.3;
    /*margin: 0;*/
    font-weight: 300;
    color: #222 !important;
}

.bodyTitle {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 400;
    text-align: center;
}

.infWinPadd {
    padding: 0 0 10px 0;
}

.controls {
    background-color: #fff;
    border-radius: 2px;
    border: 1px solid transparent;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 14px;
    font-weight: 300;
    height: 29px;
    margin-left: 17px;
    margin-top: 10px;
    outline: none;
    padding: 0 11px 0 13px;
    text-overflow: ellipsis;
    width: 400px;
}

.controls:focus {
    border-color: #4d90fe;
}

.controls:focus {
    border-color: #4d90fe;
}

.title {
    font-weight: bold;
}


/* horisontal */

.split {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
}

.gutter {
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: 50%;
}

.gutter.gutter-horizontal {
    background-image: url('/Portals/0/Images/vertical.png');
    cursor: col-resize;
}

.gutter.gutter-vertical {
    background-image: url('/Portals/0/Images/horizontal.png');
    cursor: ns-resize;
}

.split.split-horizontal,
.gutter.gutter-horizontal {
    height: 100%;
    float: left;
}

.img-list {
    width: 250px;
    height: auto;
}

.img-list a:hover {
    opacity: .8;
}


/* Style the Image Used to Trigger the Modal */

#myImg2 {
    cursor: pointer;
    transition: 0.3s;
    width: 100%;
    height: auto;
}

#myImg2:hover {
    opacity: 0.7;
}

.myImgPadBott {
    padding-bottom: 5px;
}


/* The Modal (background) */

.modal2 {
    display: none;
    position: fixed;
    z-index: 99999;
    padding-top: 30px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-image: url("/Portals/0/images/bk-04.png");
    background-color: rgba(13, 9, 6, 0.95);
}


/* Modal Content (Image) */

.modal-content2old {
    margin: auto;
    display: block;
    height: calc(100vh - 110px);
}

.modal-content2 {

 position: relative;
    margin: 10px auto auto auto;
    display: block;
    max-width: calc(100% - 60px);
    max-height:  calc(100% - 100px);
    width: auto;
    height: auto;
    overflow: hidden;

}

/* Caption of Modal Image (Image Text) - Same Width as the Image */

#caption2 {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #98885b;
    font-size: 16px;
    padding: 10px;
    height: 80px;
    font-weight: 100;
    color: #98885b;
    font-size: 18px;
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 100;
}


/* Add Animation - Zoom in the Modal */

.modal-content2,
#caption2 {
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {
        transform: scale(0)
    }
    to {
        transform: scale(1)
    }
}


/* The Close Button */

.close_btn_img {
    background-image: url('/Maps/Btn-close.jpg');
}

.close_btn_img:hover {
    background-image: url('/Maps/Btn-close-hover.jpg');
}

.close2 {
    position: absolute;
    top: 17px;
    right: 37px;
    color: #f1f1f1;
    font-size: 30px;
    font-weight: bold;
    transition: 0.3s;
    z-index: 1;
}

.close2:hover,
.close2:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}


/* 100% Image Width on Smaller Screens */

@media only screen and (max-width: 700px) {
    .modal-content2 {
        width: 100%;
    }
}


/* Worktools */

.Conteiner {
    height: calc(100vh - 60px);
}

#WorkInfoBox {
    width: 100%;
    text-align: left;
    top: 20px;
    left: 25%;
    z-index: 5;
    background-color: #16272b;
    padding: 5px;
    border: 1px solid #000;
    text-align: left;
    color: #eeeeee;
    line-height: 30px;
    padding-left: 10px;
}

#position-cell,
#heading-cell,
#pitch-cell,
#pano-cell {
    color: #fd7070;
}


/* Custom InfoWindow */

.gm-style-iw {
    width: 365px !important;
    top: 18px !important;
    left: 10px !important;
}

#iw-container {

    margin-bottom: 10px;
    position: relative;

}

#iw-container .iw-title {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 16px;
    font-weight: 400;
    padding: 5px;
    background-color: #98885b;
    color: white;
    text-align: center;
    margin: 0;
    border-radius: 2px 2px 0 0;

}

#iw-container .iw-content {
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    margin-right: 1px;
    padding: 10px 5px 0px 15px;
    overflow-y: auto;
    overflow-x: hidden;
}

#iw-container .iw-content a {
    color: black;
    text-decoration: underline;
    ;
}

#iw-container .iw-content a:hover {
    color: #ce4542;
}

.iw-content {
    padding-right: 5px !important;
}

.iw-content img {
    float: left;
    clear: both;
    margin: 0px 10px 0px 0;
    width: 100% !important;
}

.iw-subTitle {
    font-size: 14px;
    font-weight: 700;
    padding: 5px 0;
}

/* .iw-bottom-gradient {
    position: absolute;
    width: 225px;
    height: 30px;
    bottom: 17px;
    left: 0px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    z-index: 10 !important;
} */

.controls {
    background-color: #fff;
    border-radius: 2px;
    border: 1px solid transparent;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 14px;
    font-weight: 300;
    height: 29px;
    margin-left: 17px;
    margin-top: 10px;
    outline: none;
    padding: 0 11px 0 13px;
    text-overflow: ellipsis;
    width: 400px;
}

.controls:focus {
    border-color: #4d90fe;
}

.title {
    font-weight: bold;
}

#infowindow-content {
    display: none;
}

#map #infowindow-content {
    display: inline;
}

#legend {
    font-family: "Roboto Condensed", sans-serif;
    background: #fff;
    padding: 10px;
    margin: 10px;
    border: 1px solid #999;
}

#legend h3 {
    margin-top: 0;
}

#legend img {
    vertical-align: middle;
}

#info-box {
    background-color: #0d0906;
    color: #98885b;
    bottom: 30px;
    height: 20px;
    padding: 15px 25px 35px 25px;
    position: absolute;
    left: 30px;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 16px;
    text-transform: uppercase;
}


/* Openning video Style the video: 100% width and height to cover the entire window */

.LineVideoBox {
    float: left;
    width: 100%;
    overflow: hidden;
}

#LineVideo {
  position: relative;
  width: 100%; 
  height: 100%;
}

.LineContent {
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
  height: 500px;
}

#myBtnH {
  width: 200px;
  font-size: 18px;
  padding: 10px;
  border: none;
  background: #000;
  color: #fff;
  cursor: pointer;
}

#myBtnH:hover {
  background: #ddd;
  color: black;
}


/* Chrome, Safari, Opera */

@-webkit-keyframes odmove {
    from {
        opacity: 0.5;
    }
    to {
        opacity: 1.0;
    }
}


/* Standard syntax */

@keyframes odmove {
    from {
        opacity: 0.5;
    }
    to {
        opacity: 1.0;
    }
}

.mainOverview {
    font-family: "Roboto Condensed", sans-serif;
    /*border-top: 1px dashed #9c8860;*/
    width: 500px !important;
    text-align: center;
    color: #9c8860;
    font-weight: 400;
    font-size: 1.2vw;
    margin-top: 15px !important;
    padding-top: 15px !important;
    opacity: 1;
}

.mainOverviewAbout {
    font-family: "Roboto Condensed", sans-serif;
    /*border-top: 1px dashed #9c8860;*/
    width: 450px !important;
    text-align: center;
    color: #FFF;
    font-weight: 400;
    font-size: 18px;
    margin-top: 0px !important;
    padding-top: 15px !important;
    opacity: 1;
}

/* If the screen size is 601px wide or more, set the font-size of <div> to 80px */

@media screen and (min-width: 601px) {
    div.mainOverview {
        font-size: 16px;
        width: 440px;
    }
}


/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */

@media screen and (max-width: 600px) {
    div.mainOverview {
        font-size: 14px;
        width: 220px;
    }
}

.welcome {
    color: #ff6763;
    font-size: 30px;
}

.welcome:hover {}

.logoMain {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
}


/* compas menu */

.compasCTR {
    background-image: url("/Portals/0/images/roze.svg");
    width: 900px;
    height: 900px;
    -webkit-animation: spinCompas 60s linear infinite;
    -moz-animation: spinCompas 60s linear infinite;
    animation: spinCompas 60s linear infinite;
    opacity: 0.15;
}

@-moz-keyframes spinCompas {
    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spinCompas {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spinCompas {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.compasCTR-monthes {
    background-image: url("/Portals/0/images/Roze-mnth.svg");
    width: 900px;
    height: 900px;
    -webkit-animation: spinCompasM 60s linear infinite;
    -moz-animation: spinCompasM 60s linear infinite;
    animation: spinCompasM 60s linear infinite;
    opacity: 0.8;
}

@-moz-keyframes spinCompasM {
    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spinCompasM {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spinCompasM {
    50% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.compasCTR-years {
    background-image: url("/Portals/0/images/Roze-years.svg");
    width: 900px;
    height: 900px;
    -webkit-animation: spinCompasY 60s linear infinite;
    -moz-animation: spinCompasY 60s linear infinite;
    animation: spinCompasY 60s linear infinite;
    opacity: 1;
}

@-moz-keyframes spinCompasY {
    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spinCompasY {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spinCompasY {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.compasBOX {
    padding: 0%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

.HomeShelf {
    max-width: 1024px;
    width: 100%;
    padding: 0 10px;
    position: relative;
    top: 30px;
    left: 50%;
    transform: translate(-50%, -50%);
}

.searchShelf {
    max-width: 1460px;
    width: 100%;
    padding: 0 10px;
    position: relative;
    top: 30px;
    left: 50%;
    transform: translate(-50%, -50%);
}

.DiaryhShelf {
    max-width: 840px;
    width: 100%;
    padding: 0 10px;
    position: relative;
    top: 30px;
    left: 50%;
    transform: translate(-50%, -50%);
}

.searchShelfMaps {
    max-width: 1000px;
    width: 100%;
    padding: 0 10px;
    position: relative;
    top: 30px;
    left: 55%;
    transform: translate(-50%, -50%);
}

.adminShelfMenu {
    max-width: 420px;
    width: 100%;
    padding: 0 10px;
    position: relative;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.adminShelfMenu2 {
    max-width: 420px;
    width: 100%;
    padding: 0 10px;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.searchShelfCataloge {
    max-width: 1320px;
    width: 100%;
    padding: 0 10px;
    position: relative;
    top: 30px;
    left: 55%;
    transform: translate(-50%, -50%);
}

.searchShelfIndex {
    max-width: 590px;
    width: 100%;
    padding: 0 10px;
    position: relative;
    top: 30px;
    left: 50%;
    transform: translate(-50%, -50%);
}

.comHTGcontUp {
    width: 508px !important;
    /*height: 380px;*/
    float: left;
    padding-left: 0px;
}

@media screen and (max-width: 1024px) {
    .comHTGcontUp {
        width: 508px !important;
    }
}

@media screen and (max-width: 559px) {
    .comHTGcontUp {
        width: 300px !important;
    }
}

@media screen and (max-width: 375px) {
    .comHTGcontUp {
        width: 300px !important;
    }
}

.comHTGcontDn {
    width: 100%;
    float: left;
    padding-left: 0px;
}

.compasWall {
    float: left;
    background-image: url("/Portals/0/images/bk-01.png");
    height: auto;
    background-color: rgba(13, 9, 6, 0.98);
    border: 1px solid #9c8860;
    border-radius: 10px;
    padding: 20px 30px;
}

.main-acrl-ctrl {
    float: left !important;
    border: 1px solid red;
    padding: 0px 0 30px 0 !important;
}

.compasWall_menu {
    float: left;
    background-image: url("/Portals/0/images/bk-01.png");
    width: 695px;
    height: auto;
    background-color: rgba(13, 9, 6, 0.98);
    border: 1px solid #9c8860;
    border-radius: 10px;
    padding: 10px;
}

.compasWall_menu_maps {
    float: left;
    background-image: url("/Portals/0/images/bk-01.png");
    width: 520px;
    height: auto;
    background-color: rgba(13, 9, 6, 0.98);
    border: 1px solid #9c8860;
    border-radius: 10px;
    padding: 10px;
}


@media screen and (max-width: 1024px) {
    .compasWall_menu_maps {
        width: 560px;
    }
}

@media screen and (max-width: 559px) {
    .compasWall_menu_maps {
        width: 340px;
    }
}

@media screen and (max-width: 375px) {
    .compasWall_menu_maps {
        width: 260px;
    }
}

.compasWall_menu_info {
    float: left;
    width: 870px;
    background-image: url("/Portals/0/images/bk-01.png");
    margin: 0%;
    height: auto;
    background-color: rgba(14,22,27, 0.95);
    border: 1px solid #9c8860;
    border-radius: 10px;
    padding: 20px 30px;
}

.info-acrl-ctrl {
    float: left !important;
    max-height: 600px;
    padding: 20px 0 130px 0;
}


.info-body-ctrl {
    position: relative;
    float: left; 
    padding: 10px;
    font-size: 14px;
    color: #9c8860;
    font-weight: 300;
}

.compasWall_menu_voyage {
    min-width: 700px;
    float: left;
    background-image: url("/Portals/0/images/bk-01.png");
    margin-left: 0%;
    margin-right: 0%;
    height: auto;
    background-color: rgba(13, 9, 6, 0.98);
    border: 1px solid #9c8860;
    border-radius: 10px;
    padding: 10px;
}

.voyageFillMenu-w {
    border: 1px solid red;
}

.titleMenuPadding {
    margin: 0 5% 0 20px;
}


.arrow-anim {
    float: left;
    position: absolute;
    top: 15px;
    color: #ff6763;
    font-size: 12px;
    opacity: 1;
    animation: flash-animation 0.5s infinite;
    animation-timing-function: ease-in;
    animation-direction: alternate-reverse;
}

@-webkit-keyframes flash-animation {
    from {
        opacity: 0.1;
        margin-left: 0px;
    }
    to {
        opacity: 1;
        margin-left: 3px;
    }
}

@keyframes flash-animation {
    from {
        opacity: 0.1;
        margin-left: 0px;
    }
    to {
        opacity: 1;
        margin-left: 3px;
    }
}

.compasTimemachine {
    width: 100%;
    max-width: 500px;
    height: auto;
    padding: 10px 20px;
    margin: 6px 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}

.compasTimemachine:hover {
    cursor: pointer;
    animation: odmoveMain 0.2s infinite;
    animation-timing-function: ease-in;
    animation-direction: alternate-reverse;
}

@-webkit-keyframes odmoveMain {
    from {
        opacity: 0.5;
    }
    to {
        opacity: 1.0;
    }
}

@keyframes odmoveMain {
    from {
        opacity: 0.5;
    }
    to {
        opacity: 1.0;
    }
}

/* 1 */

.menu1Main {
    margin-top: 0;
    padding: 0 10%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-name: zoomNav;
    animation-duration: 0.6s;
}


@-webkit-keyframes zoomNav {
    0% { transform: scale(0);}
    99% { transform: scale(1);}
  100% { 
      }
}

@keyframes zoomNav {
      0% { transform: scale(0);  }
     99% { transform: scale(1);}
    100% {        
            transform: translate(-50%, -50%); 
            left: 50%;
            top: 50%;
         }
}

@media screen and (max-width: 1024px) {
    .menu1Main {
        padding: 0px 20px;
    }
}

@media screen and (max-width: 450px) {
    .menu1Main {
        padding: 0px 5%;
    }
}

.menuFadeMain {
    margin-top: 0;
    padding: 0 10%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media screen and (max-width: 1024px) {
    .menuFadeMain {
        padding: 0px 20px;
    }
}

@media screen and (max-width: 450px) {
    .menuFadeMain {
        padding: 0px 5%;
    }
}

.menuSectionMain {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
}

@media screen and (max-width: 1024px) {
    .menuSectionMain {
        padding: 0px 10px;
    }
}

@media screen and (max-width: 450px) {
    .menuSectionMain {
        padding: 0px 1%;
    }
}

.left_menu_CTR {
    float: left;
    width: 100%;
    height: 100%;
    padding: 10px 0px 10px 20px;
   
}

.mainMenuItem {
    color: #eee;
    font-size: 12px;
    line-height: 1.2;
}

.menu2Socnet {
    margin-top: 20px;
    text-align: center;
    color: white;
    width: 100%;
}

.menuMainTitle {
    float: left;
    text-align: left;
    margin-top: 20px;
    font-size: 36px;
    color: #9c8860;
    font-weight: 700;
}

.menuMainTitleDescription {
    float: left;
    text-align: left;
    margin-bottom: 30px;
    font-size: 16px !important;
    font-weight: normal;
    color: #9c8860;
}

.menuMainDescription {
    float: left;
    width: 100%;
    text-align: left;
    color: #9c8860;
    font-size: 12px;
    font-weight: normal;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
    margin-bottom: 15px;
}

.menuMainDescriptionAlt {
    width: 100%;
    text-align: left;
    color: #9c8860;
    font-size: 14px;
    font-weight: normal;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
    margin-bottom: 15px;
}

.menuHTGconteiner {
    width: 100%;
    float: left;
    border-radius: 2px;
    overflow: hidden;
}

.hr-menu {
    padding-bottom: 5px;
}


/* open munu items */

.jump {
    width: 100%;
}

.timemachine {
    width: 260px;
    height: 50px;
    margin-bottom: 30px;
}

.timemachine:hover {
    cursor: pointer;
    animation: odmove 0.2s infinite;
    animation-timing-function: ease-in;
    animation-direction: alternate-reverse;
}


/* Chrome, Safari, Opera */

@-webkit-keyframes odmove {
    from {
        opacity: 0.5;
        padding: 3px;
    }
    to {
        opacity: 1.0;
        padding: 0px;
    }
}


/* Standard syntax */

@keyframes odmove {
    from {
        opacity: 0.5;
        padding: 3px;
    }
    to {
        opacity: 1.0;
        padding: 0px;
    }
}

.menuBtn {
    border: none;
    padding-top: 20px !important;
    background-color: inherit;
    font-size: 16px !important;
    text-transform: uppercase !important;
    display: inline-block;
    color: #FFF !important;
    outline: 0;
    line-height: 0.2;
}

.menuBtn {
    cursor: pointer;
    animation: MBTNmove 0.8s infinite;
    animation-timing-function: ease-in;
    animation-direction: alternate-reverse;
}


/* Chrome, Safari, Opera */

@-webkit-keyframes MBTNmove {
    from {
        opacity: 0.1;
    }
    to {
        opacity: 1.0;
    }
}


/* Standard syntax */

@keyframes MBTNmove {
    from {
        opacity: 0.1;
    }
    to {
        opacity: 1.0;
    }
}

.menuBtn:hover {
    cursor: pointer;
    animation: MBTNmove 0.2s infinite;
    animation-timing-function: ease-in;
    animation-direction: alternate-reverse;
}


/* Chrome, Safari, Opera */

@-webkit-keyframes MBTNmove {
    from {
        opacity: 0.5;
    }
    to {
        opacity: 1.0;
    }
}


/* Standard syntax */

@keyframes MBTNmove {
    from {
        opacity: 0.5;
    }
    to {
        opacity: 1.0;
    }
}


.menuBtn-inactive-info {
    text-align: center;
    width: 100%;
    font-size: 16px;
    display: inline-block;
    color: #534f48;
    margin: 20px 0 40px 0;
}

.menuBtn a {
    outline: 0;
}


/* Time Travel Help */

.menuHelpTime {
    position: relative;
    float: right;
    top: -8px;
    right: 40px;
    width: 2px;
    height: 2px;
    color: rgba(255, 255, 255, 0.2) !important;
    font-size: 15px !important;
    outline: 0;
    text-align: center;
    z-index: 50;
}

.menuHelpTime:hover {
    color: #ff6763 !important;
    outline: 0;
    cursor: pointer;
    animation: HLPmove 0.2s infinite;
    animation-timing-function: ease-in;
    animation-direction: alternate-reverse;
}


@-webkit-keyframes HLPmove {
    from {
        opacity: 0.5;
        color: #ff6763 !important;
    }
    to {
        opacity: 1.0;
        color: rgba(255, 255, 255, 0.2) !important;
    }
}


/* Standard syntax */

@keyframes HLPmove {
    from {
        opacity: 0.5;
        color: #ff6763 !important;
    }
    to {
        opacity: 1.0;
        color: rgba(255, 255, 255, 0.2) !important;
    }
}

.socnetBtn {
    padding: 0px 10px 30px 10px !important;
}


/* On mouse-over */

.menuBtn:hover {
    color: #ff6763 !important;
    background-color: inherit;
    outline: 0;
}

.menuSymbol {
    font-size: 14px !important;
    margin-right: 5px;
    margin-left: 5px;
    color: #9c8860;
}

.activeBtn {
    color: #ff6763 !important;
}

.menuBnchDev {
    float: left;
}

.menuDev {
    float: left;
    margin-left: 10px;
    font-size: 15px !important;
    color: #9c8860;
}


/* Slide down from the top */


/* 1 */
.overlay {
    opacity: 0;
    display: block;
    position: fixed;
    background-image: url("/Portals/0/images/bk-01.png");
    height: 0%;
    width: 100vw;
    z-index: 2100;
    top: 0;
    left: 0;
    background-color: rgba(13, 9, 6, 0.92);
    overflow-x: hidden;
    overflow-y: hidden;
    transition: 0.5s;
}


.overlay-content {
    font-size: 16px; 
}

.overlay a {
    font-size: 19px;
    padding: 0px;
    text-align: left;
    text-decoration: none;
    display: block;
    line-height: 1;
    transition: 0.3s;
}

.overlay a:hover,
.overlay a:focus {
    color: #f1f1f1;
}

.overlay .closebtn {
    position: absolute;
    top: 10px;
    right: 17px;  
    font-size: 30px;
    outline: 0;
    padding: 5px;
    cursor: pointer;
    color: white;
    z-index: 2;
}

.overlay .closebtn:hover,
.overlay .closebtn:focus {
    opacity: 1;
    color: #db5854;

}

.closebtnUser {
    position: absolute;
    top: -10px;
    right: -10px;  
    font-size: 30px !important;
    outline: 0;
    padding: 0 7px !important;
    cursor: pointer;
    color: #9c8860;
    z-index: 2;
    background-color: rgba(13, 9, 6, 0.98);
    height: 30px;
    width: 30px;
    border-radius: 50%;
    border: 1px solid #9c8860;
    line-height: .8 !important;
}

.closebtnUser:hover,
.closebtnUser:focus {
    opacity: 1;
    color: #db5854;
    background-color: #db5854 !important;
    border: 1px solid #9c8860;

}

@media screen and (max-height: 500px) {
    .overlay a {
        font-size: 20px
    }
    .overlay .closebtn {
        font-size: 20px !important;
        top: 5px !important;
        right: 5px !important;
    }
}


/* Voyage Bottom Nav Bar*/

.topnav {
    overflow: hidden;
    background-color: #FFF;
}

.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 14px;
}

.active {
    background-color: #ff6763;
    color: white;
}

.topnav .icon {
    display: none;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 17px;
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.topnav a:hover,
.dropdown:hover .dropbtn {
    background-color: #555;
    color: white;
}

.dropdown-content a:hover {
    background-color: #ddd;
    color: black;
}

.dropdown:hover .dropdown-content {
    display: block;
}

@media screen and (max-width: 600px) {
    .topnav a:not(:first-child),
    .dropdown .dropbtn {
        display: none;
    }
    .topnav a.icon {
        float: right;
        display: block;
    }
}

@media screen and (max-width: 600px) {
    .topnav.responsive {
        position: relative;
    }
    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
    .topnav.responsive .dropdown {
        float: none;
    }
    .topnav.responsive .dropdown-content {
        position: relative;
    }
    .topnav.responsive .dropdown .dropbtn {
        display: block;
        width: 100%;
        text-align: left;
    }
}


/* top mini animated menu */

#navbar, #navbar_mob {
    position: fixed;
    top: -100px;
    width: 100%;
    height: 40px;
    display: block;
    padding: 0px 5px;
    transition: all .5s ease-in; 
     z-index: 6;
    background-color: #FFF;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.3);
}
 #navbar_mob {
    top: -70px;
 }

#navbar a {

}

#navbar a:hover {

}

/* Top Menu Hidding Nav */

.topnav2 {
    overflow: hidden;
    background-color: rgba(13, 9, 6, 0);
}

.topnav2 a {
    float: left;
    display: block;
    color: #f2f2f2;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav2 a:hover {
    color: black;
}

.topnav2Cont {}

.active2 {
    color: white;
}

.topnav2 .icon {
    display: none;
    outline: 0;
}

@media screen and (max-width: 1200px) {
    .topnav2 a:not(:first-child) {
        display: none;
    }
    .topnav2 a.icon {
        float: right;
        display: block;
        outline: 0;
    }
}

@media screen and (max-width: 1200px) {
    .topnav2.responsive2 {
        position: relative;
    }
    .topnav2.responsive2 .icon {
        position: absolute;
        right: 0;
        top: 0;
        outline: 0;
    }
    .topnav2.responsive2 a {
        float: none;
        display: block;
        text-align: left;
    }
}

a.bottomMenuActiveLink:hover {
    color: #ff6763 !important;
}

a.bottomMenuActiveLink {
    color: #ff6763 !important;
}


/* home page*/

.eds_bottomPaneWide {
    background-image: url("/Portals/0/images/bk-01.png");
    background-color: rgba(12,5,5,0.97);

}

.main_bottomPaneWide {
    background-image: url("/Portals/0/images/bk-01.png");
    background-color: rgba(13, 9, 6, 1);
  
}

.container-fluid_home {
    visibility: hidden;
    height: 0px !important;
}

.edsCopyrightBg_home {
    visibility: hidden;
    height: 0px !important;
}

.edsFooterBackground_home {
    visibility: hidden;
    height: 0px !important;
}

.eds_bottomPaneWide_home {
    visibility: hidden;
    height: 0px !important;
}

.homePaageHeadIcon {
    margin-bottom: 5px;
    width: 10%;
    z-index: 10;
}


.homePaageHeadIcon:hover {
    opacity: .7;
    transition: 0.5s ease-in;
    cursor: pointer;
}

.homePaageHeadIconLogo {
    margin-bottom: 5px;
    width: 5%;
    z-index: 10;
}


/* Voyage Menu */

.main3Body, .main3BodyMob {
    position: relative;
    left: 0px;
    transition: all .5s ease-in; 
    padding: 0px 0px;  
}
.main3Body2 {

}

.sidenav3 {
    background-image: url("/Portals/0/images/bk-01.png");
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 101;
    top: 0;
    left: 0;
    background-color: #0d0906;
    overflow: hidden;
    transition: 0.5s ease-in;
    padding: 10px;
}

.sidenav3-dark {
    background-image: url("/Portals/0/images/bk-01.png");
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 101;
    top: 0;
    left: 0;
    background-color: #0d0906;
    overflow: hidden;
    transition: 0.5s ease-in;
    padding: 10px;
}

.voyageLogo {
    display: block;
    padding: 10px 0 10px 20px;
}

.menuFlag {
    display: block;
    padding: 20px;
}

.menuCTR {
    width: 99%;
    border: 1px solid #555;
}

.sidenav3 a {
    text-decoration: none;
    color: #FFF;
    display: block;
    transition: 0.3s;
}

.sidenav3 a:hover {
    color: #f1f1f1;
}

.sidenav3 .closebtn3 {
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 30px;
    margin-left: 0px;
}

.closebtn3 {
    color: #FFF !important;
    opacity: 0.4;
    outline: 0 !important;
}

.closebtn3:hover {
    opacity: 1;
    outline: 0 !important;
}


@media screen and (max-height: 450px) {
    .sidenav3 a {
        font-size: 18px;
    }
}


/* article top menu */

#navbar-a {
    background-color: #FFF;
    position: fixed;
    top: 0;
    color: #222;
    width: 100%;
    display: block;
    transition: top 0.6s;
    padding: 10px;
    z-index: 5;
    border-bottom: 1px solid #dadada;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.3);
}

#navbar-a a {
    float: left;
    display: block;
    color: #222;
    text-align: center;
    text-decoration: none;
    font-size: 20px;
}

#navbar-a a:hover {
    /*background-color: #ff6763;*/
    color: #ff6763;
}


.bgimgHolder {
    height: 100vh;
    background-position: center;
    background-size: cover;
    position: relative;
    color: white;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 25px;
    padding: 0 !important;
    margin: 0 !important;
}

/* 3D */

.bgimg-3d {
    background-image: url('/portals/2/images/topmenu/map3d-back.jpg');
}

/* login */

.bgimg-login {
    background-image: url('/portals/2/images/topmenu/top-my-back-reg.jpg');
}

/* 404 */

.bgimg {
    background-image: url('/portals/2/images/topmenu/404-back.jpg');
}

.bgimg-history-title {
    color: #FFF;
    font-weight: 100;
    font-size: 45px;

}

.bgimg-history {
    background-image: url('/portals/0/Images/odessa-time-line-back.jpg');
    height: 100px;
    background-position: center;
    background-size: cover;
    position: relative;
    color: white;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 25px;
}

.bgimg-statistics {
    background-image: url('/portals/0/Images/odessa-statistics-back.jpg');
    height: 350px;
    background-position: center;
    background-size: cover;
    position: relative;
    color: white;
    font-family: "Roboto Condensed", sans-serif;
}

.middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

hr {
    margin: auto;
    width: 100%;
}


/* Horizontal menu */

div.scrollmenu,
div.scrollmenuT {
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;
    height: calc(100vh - 126px);
}

div.scrollmenuT {
    height: calc(100vh - 400px);
    border: 1px solid green;
}

.scrollmenu-item-ruler {
    float: left;
    position: absolute;
    bottom: 0;
    height: 7px;
    width: 100%;
    background-image: url("/Portals/0/Images/ruler.png");
    background-repeat: repeat-x;
    opacity: 0.8;
}

.scrollmenu-item-begin {
    display: inline-block;
    height: 100%;
    vertical-align: top;
}

.scrollmenu-item {
    display: inline-block;
    height: 100%;
    width: 350px;
    vertical-align: top;
}

.item-year-size {

}

.year-flag-empty {
    display: block;
    height: 50px;
    border-bottom: 1px solid #dadada;
}

.year-flag-6-3bc {
    display: block;
    height: 50px;
    background-image: url("/Portals/0/Images/6-3bc.jpg");
    background-repeat: repeat-x;
    border-bottom: 1px solid #dadada;
}

.year-flag-ruEmpire {
    display: block;
    height: 50px;
    background-image: url("/Portals/0/Images/ru-empire-flag.jpg");
    background-repeat: repeat-x;
    border-bottom: 1px solid #dadada;
}

.year-flag-osmanEmpire {
    height: 50px;
    background-image: url("/Portals/0/Images/osman-empire-flag.jpg");
    background-repeat: repeat-x;
    border-bottom: 1px solid #dadada;
}

.year-flag-ussrEmpire {
    height: 50px;
    background-image: url("/Portals/0/Images/ussr-empire-flag.jpg");
    background-repeat: repeat-x;
    border-bottom: 1px solid #dadada;
}

.year-flag-ua {
    height: 50px;
    background-image: url("/Portals/0/Images/ua-flag.jpg");
    background-repeat: repeat-x;
    border-bottom: 1px solid #dadada;
}

.year-flag-onr {
    height: 50px;
    background-image: url("/Portals/0/Images/onr-flag.jpg");
    background-repeat: repeat-x;
    background-color: #333;
}

.year-flag-romania {
    height: 50px;
    background-image: url("/Portals/0/Images/romania-empire-flag.jpg");
    background-repeat: repeat-x;
    background-color: #333;
    border-bottom: 1px solid #dadada;
}

.fill-menu-title, .fill-menu-title-main {
    float: left;
    position: relative;
    width: 100% !important;
    font-size: 20px;
    text-align: center !important;
    color: rgb(70, 70, 70);
    font-weight: 500;
    padding-top: 5px;
}

.fill-menu-title-main {

    padding: 5px 0px 5px 0px !important; 
    border: 0px solid red;
}

.info-sliders-title {
    float: left;
    position: relative;
    width: 100% !important;
    font-size: 24px;
    text-align: center !important;
    color: #FFF;
    font-weight: 300;
}

.arrow-anim-main {

    float: left;
    position: absolute;
    top: 12px;
    color: #ff6763;
    font-size: 12px;
    opacity: 1;
    animation: flash-animation 0.5s infinite;
    animation-timing-function: ease-in;
    animation-direction: alternate-reverse;
}



.time-voyage-link {
    color: #ff6763 !important;
}

.time-size {
    font-size: 16px !important;
    text-align: center !important;
}

.diary-link {
    float: left;
    padding: 5px 10px 0 0;
}

.comment-size {
    font-size: 12px !important;
    text-align: center !important;
}

.time-voyage-link:hover {
    color: #9c8860 !important;
    text-decoration: underline !important;
    cursor: pointer !important;
}

.year-item {
    display: block;
    width: 350px;
    height: 40px;
    text-align: center;
    vertical-align: top;
}

.year-item-m {
    height: 40px;
    text-align: center;
    vertical-align: top;
}

.year-item-data {
    height: 40px;
    font-size: 26px;
    color: #222;
    font-weight: 600;
    font-family: "Roboto Condensed", sans-serif;
    text-transform: uppercase;
    position: relative;
    text-align: left;
    display: inline-block;
    margin-right: 5px;
    vertical-align: baseline;
}

.year-item-flag {
    position: relative;
    height: 40px;
    width: 41px;
    background-color:#eee;
    display: inline-block;
    margin-right: 5px;
    vertical-align: top;
    margin-top: 8px;

}

.osman_flag {
    background-image: url(/maps/time-voyage/images/flags/osman-empire-flag.jpg);
    width: 41px;
    height: 20px;
}

.osman_to_ru_flag {
    background-image: url(/maps/time-voyage/images/flags/osman-to-ru-flag.jpg);
    width: 41px;
    height: 20px;
}

.ru_flag {
    background-image: url(/maps/time-voyage/images/flags/ru-empire-flag.jpg);
    width: 41px;
    height: 20px;
}

.flag_1917 {
    background-image: url(/maps/time-voyage/images/flags/1917-flag.jpg);
    width: 41px;
    height: 20px;
}

.ru-empire-to-1917_flag {
    background-image: url(/maps/time-voyage/images/flags/ru-empire-to-1917-flag.jpg);
    width: 41px;
    height: 20px;
}

.ussr_to_ru_flag {
    background-image: url(/maps/time-voyage/images/flags/ussr-to-ru-empire-flag.jpg);
    width: 41px;
    height: 20px;
}

.ua_flag {
    background-image: url(/maps/time-voyage/images/flags/ua-flag.jpg);
    width: 41px;
    height: 20px;
}

.ru_to_ussr_flag {
    background-image: url(/maps/time-voyage/images/flags/ru-to-ussr-empire-flag.jpg);
    width: 41px;
    height: 20px;
}

.ussr_flag {
    background-image: url(/maps/time-voyage/images/flags/ussr-empire-flag.jpg);
    width: 41px;
    height: 20px;
}

.ussr-empire-to-ua-flag {
    background-image: url(/maps/time-voyage/images/flags/ussr-empire-to-ua-flag.jpg);
    width: 41px;
    height: 20px;
}

.rom-flag {
    background-image: url(/maps/time-voyage/images/flags/rom-flag.jpg);
    width: 41px;
    height: 20px;
}

.rom-to-ussr_flag {
    background-image: url(/maps/time-voyage/images/flags/rom-to-ussr-flag.jpg);
    width: 41px;
    height: 20px;
}

.ussr-to-rom-flag {
    background-image: url(/maps/time-voyage/images/flags/ussr-to-rom-flag.jpg);
    width: 41px;
    height: 20px;
}

.year-item-world {
    color: #333;
    font-size: 24px;
    cursor: pointer;
    position: relative;
    display: inline-block;
    width: 25px;
    text-align: center;
    vertical-align: baseline;
}

.year-item-world:hover {
    color: #ff6763;
}

.title-item {
    font-size: 16px !important;
    font-weight: 600;
    text-transform: uppercase;
    font-family: "Roboto Condensed", sans-serif;
    color: #333;
    width: 99% !important;
    padding: 0px !important;
    margin-top: 10px;
    margin-bottom: 0px !important;
}

.body-item {
    font-size: 14px !important;
    width: 100% !important;
    color: #222;
}

.month-item {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    font-family: "Roboto Condensed", sans-serif !important;
    color: #333 !important;
    padding: 0px !important;
    margin-bottom: 3px !important;
    width: 100%;    
}

.year-content {
    display: block;
    height: calc(100% - 107px);
    width: 350px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 3px;
}

.year-content-item {
    color: #333 !important;
}

.year-item-img {
    width: 100% !important;
    margin-bottom: 0px;
    border-radius: 5px !important;
    overflow: hidden;
}

.map-item-img {
    width: 100% !important;
    padding: 10px 0 !important;
    border-radius: 5px !important;
    overflow: hidden;
}

.prev-item-img {
    width: 100% !important;
    float: left;
    text-align: center;
    margin-bottom: 0px;
}

.prev-item-img:hover {
    opacity: 0.8;
}

.year-item-img-2 {
    width: 100% !important;
    float: left;
    text-align: center;
}

.year-item-img-down {
    width: 100% !important;
    float: left;
    text-align: center;
    padding-bottom: 5px;
}

.year-item-img-small {
    float: left;
    margin: 10px 10px 0 0 !important;
    text-align: center;
}

.year-item-ank {
    color: #ff6763 !important;
    text-decoration: underline !important;
}

.year-item-ank:hover {
    text-decoration: underline !important;
    color: #333 !important;
    cursor: alias;
}

.year-bigImg-item-ank {
    color: #ff6763 !important;
}

.year-bigImg-item-ank:hover {
    text-decoration: underline !important;
    color: #333 !important;
    cursor: pointer;
}

.item-text {
    color: #333;
}


/* Time Voyage Slider */

.slidecontainer {
    width: 100%;
    outline: 0;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 5px;
    background: #eee;
    outline: none;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border: 6px solid #FFF;
    border-radius: 50%;
    background: #444;
    cursor: pointer;
    outline: 0;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #444;
    border: 6px solid #FFF;
    cursor: pointer;
    outline: 0;
}


/* Snackbar window common */

#snackbar {
    visibility: hidden;
    min-width: 250px;
    max-width: 900px;
    background-color: rgba(13, 9, 6, 0.9);
    background-image: url("/Portals/0/images/bk-01.png");
    color: #fff;
    text-align: center;
    border-radius: 10px;
    padding: 30px;
    z-index: 6;
    left: 50%;
    bottom: 10px;
    position: fixed;
    transform: translate(-50%, -120px);
}

.snackbarTitle1 {
font-size: 22px;
font-weight: 300;
}

.snackbarText1 {
   text-align: center;
   font-size: 16px;
   font-weight: 200;
   color: #d3d3d3;
   line-height: 2;
   font-family: sans-serif;
}

#snackbar.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 5s;
    animation: fadein 0.5s, fadeout 0.5s 5s;
}


/* Animations to fade the snackbar in and out */

@-webkit-keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }
    to {
        bottom: 10px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }
    to {
        bottom: 10px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        bottom: 10px;
        opacity: 1;
    }
    to {
        bottom: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        bottom: 10px;
        opacity: 1;
    }
    to {
        bottom: 0;
        opacity: 0;
    }
}


/* Snackbar window 1 */

#snackbar1 {
    visibility: hidden;
    min-width: 250px;
    background-color: #ff6763;
    color: #0d0906;
    text-align: center;
    border-radius: 4px;
    padding: 16px;
    z-index: 6;
    left: 50%;
    bottom: 10px;
    position: fixed;
    transform: translate(-50%, 0%);
}

#snackbar1.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 4s;
    animation: fadein 0.5s, fadeout 0.5s 4s;
}


/* Animations to fade the snackbar in and out */

@-webkit-keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }
    to {
        bottom: 10px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }
    to {
        bottom: 10px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        bottom: 10px;
        opacity: 1;
    }
    to {
        bottom: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        bottom: 10px;
        opacity: 1;
    }
    to {
        bottom: 0;
        opacity: 0;
    }
}


/* Snackbar window 2 */

#snackbar2 {
    visibility: hidden;
    min-width: 250px;
    background-color: #ff6763;
    color: #0d0906;
    text-align: center;
    border-radius: 4px;
    padding: 16px;
    position: fixed;
    z-index: 6;
    left: 50%;
    bottom: 10px;
    position: fixed;
    transform: translate(-50%, 0%);
}

#snackbar2.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 4s;
    animation: fadein 0.5s, fadeout 0.5s 4s;
}


/* Animations to fade the snackbar in and out */

@-webkit-keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }
    to {
        bottom: 10px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }
    to {
        bottom: 10px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        bottom: 10px;
        opacity: 1;
    }
    to {
        bottom: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        bottom: 10px;
        opacity: 1;
    }
    to {
        bottom: 0;
        opacity: 0;
    }
}


/* Snackbar window 3 */

#snackbar3 {
    visibility: hidden;
    min-width: 250px;
    background-color: #ff6763;
    color: #0d0906;
    text-align: center;
    border-radius: 4px;
    padding: 16px;
    position: fixed;
    z-index: 6;
    left: 50%;
    bottom: 10px;
    position: fixed;
    transform: translate(-50%, 0%);
}

#snackbar3.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 4s;
    animation: fadein 0.5s, fadeout 0.5s 4s;
}


/* Animations to fade the snackbar in and out */

@-webkit-keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }
    to {
        bottom: 10px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }
    to {
        bottom: 10px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        bottom: 10px;
        opacity: 1;
    }
    to {
        bottom: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        bottom: 10px;
        opacity: 1;
    }
    to {
        bottom: 0;
        opacity: 0;
    }
}


/* Snackbar window 4 */

#snackbar4 {
    visibility: hidden;
    min-width: 250px;
    background-color: #ff6763;
    color: #0d0906;
    text-align: center;
    border-radius: 4px;
    padding: 16px;
    position: fixed;
    z-index: 6;
    left: 50%;
    bottom: 10px;
    position: fixed;
    transform: translate(-50%, 0%);
}

#snackbar4.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 4s;
    animation: fadein 0.5s, fadeout 0.5s 4s;
}


/* Animations to fade the snackbar in and out */

@-webkit-keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }
    to {
        bottom: 10px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }
    to {
        bottom: 10px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        bottom: 10px;
        opacity: 1;
    }
    to {
        bottom: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        bottom: 10px;
        opacity: 1;
    }
    to {
        bottom: 0;
        opacity: 0;
    }
}


/* Snackbar window 5 */

#snackbar5 {
    visibility: hidden;
    min-width: 250px;
    background-color: #ff6763;
    color: #0d0906;
    text-align: center;
    border-radius: 4px;
    padding: 16px;
    position: fixed;
    z-index: 6;
    left: 50%;
    bottom: 10px;
    position: fixed;
    transform: translate(-50%, 0%);
}

#snackbar5.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 4s;
    animation: fadein 0.5s, fadeout 0.5s 4s;
}


/* Animations to fade the snackbar in and out */

@-webkit-keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }
    to {
        bottom: 10px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }
    to {
        bottom: 10px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        bottom: 10px;
        opacity: 1;
    }
    to {
        bottom: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        bottom: 10px;
        opacity: 1;
    }
    to {
        bottom: 0;
        opacity: 0;
    }
}


/* Tooltip */


/* Tooltip container */

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    /* If you want dots under the hoverable text */
}


/* Tooltip text */

.tooltip .tooltiptext {
    visibility: hidden;
    width: 150px;
    background-color: #ff6763;
    color: #fff;
    text-align: left;
    font-size: 14px;
    line-height: 1.2;
    padding: 10px;
    border-radius: 2px;
    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}


/* Tooltip arrow */

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #ff6763 transparent transparent transparent;
}


/* Show the tooltip text when you mouse over the tooltip container */

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}


/* old maps page */

.rowMap {
    display: -ms-flexbox;
    /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap;
    /* IE10 */
    flex-wrap: wrap;
    padding: 0 4px;
}

.old-maps-height {
    height: calc(100vh - 132px);
    width: 100%;
    padding-bottom: 0px;
}

.old-map {
    padding-bottom: 10px !important;
}


/*  --------  end BASE.CSS  ------*/

.side-menu-ico {
    width: 100%;
    padding: 10px;
    text-align: center;
    color: #9c8860;
    font-size: 18px;
    height: 35px;
}




.btn-m-font {
    font-size: 14px !important;
}


.button-info {
    font-family: "Roboto Condensed", sans-serif;
    float: left;
    background-color: rgba(42, 76, 98, 0.05);
    border-top: 1px solid rgba(42, 76, 98, 0.3);
    border-right: 1px solid rgba(42, 76, 98, 0);
    border-bottom: 1px solid rgba(42, 76, 98, 0);
    border-left: 1px solid rgba(42, 76, 98, 0.3);
    color: #2a4c62;
    text-align: center;
    text-transform: uppercase;
    font-size: 12px ;
    padding: 15px !important;
    margin: 2px 0 5px 0;
    transition: all 0.5s;
    cursor: pointer;
  }
  
  .button-info:hover {
    cursor: pointer;
    background-color: rgba(42, 76, 98, 1.0);
    border-top: 1px solid rgba(42, 76, 98, 0.5);
    border-right: 1px solid rgba(42, 76, 98, 0.5);
    border-bottom: 1px solid rgba(42, 76, 98, 0.5);
    border-left: 1px solid rgba(42, 76, 98, 0.5);
    color: #FFFFFF !important;
    animation: buttonmmoveinfo 0.5s infinite;
    animation-timing-function: ease-in;
    animation-direction: alternate-reverse;
  }

.button-info:focus {
    outline: none;
}

/* Chrome, Safari, Opera */

@-webkit-keyframes buttonmmoveinfo {
    from {
        background-color: rgba(42, 76, 98, 0.05);
        border-top: 1px solid rgba(42, 76, 98, 0.3);
        border-right: 1px solid rgba(42, 76, 98, 0);
        border-bottom: 1px solid rgba(42, 76, 98, 0);
        border-left: 1px solid rgba(42, 76, 98, 0.3);
    }
    to {
        background-color: rgba(42, 76, 98, 1.0);
        border-top: 1px solid rgba(42, 76, 98, 0.5);
        border-right: 1px solid rgba(42, 76, 98, 0.5);
        border-bottom: 1px solid rgba(42, 76, 98, 0.5);
        border-left: 1px solid rgba(42, 76, 98, 0.5);
    }
}


/* Standard syntax */

@keyframes uttonmmoveinfo {
    from {
        background-color: rgba(42, 76, 98, 0.05);
        border-top: 1px solid rgba(42, 76, 98, 0.3);
        border-right: 1px solid rgba(42, 76, 98, 0);
        border-bottom: 1px solid rgba(42, 76, 98, 0);
        border-left: 1px solid rgba(42, 76, 98, 0.3);
    }
    to {
        background-color: rgba(42, 76, 98, 1.0);
        border-top: 1px solid rgba(42, 76, 98, 0.5);
        border-right: 1px solid rgba(42, 76, 98, 0.5);
        border-bottom: 1px solid rgba(42, 76, 98, 0.5);
        border-left: 1px solid rgba(42, 76, 98, 0.5);
    }
}

.button-info span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}

.button-info span:after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
}

.button-info:hover span {
    padding-right: 25px;
}

.button-info:hover span:after {
    opacity: 1;
    right: 0;
}


/* gray button */

.button-gray {
    font-family: "Roboto Condensed", sans-serif;
    float: left;
    background-color: rgba(112, 113, 113, 0.1);
    border: 1px solid rgba(125, 197, 181, 0.2);
    color: #f8f8f8 !important;
    text-align: center;
    text-transform: uppercase;
    font-size: 20px !important;
    padding: 15px !important;
    transition: all 0.5s;
    margin: 2px 0 5px 0;
    border-top: 1px solid rgba(125, 197, 181, 0.2);
    border-right: 1px solid rgba(125, 197, 181, 0);
    border-bottom: 1px solid rgba(125, 197, 181, 0);
    border-left: 1px solid rgba(125, 197, 181, 0.15);
    border-radius: 2px;
    line-height: 3;
}

.button-gray:hover {
    cursor: pointer;
    background-color: rgb(126, 197, 182);
    border-top: 1px solid rgba(125, 197, 181, 0.23);
    border-right: 1px solid rgba(125, 197, 181, 0.23);
    border-bottom: 1px solid rgba(125, 197, 181, 0.23);
    border-left: 1px solid rgba(125, 197, 181, 0.15);
    color: #FFFFFF !important;
    animation: buttonmmove-gray 0.5s infinite;
    animation-timing-function: ease-in;
    animation-direction: alternate-reverse;
}

.button-gray:focus {
    outline: none;
}

.ico-gray {
    float: left;
    color: #7ec5b6 !important;
    text-align: center;
}

.ico-gray:hover {
    color: #ff6763 !important;
}

.ico-gray:focus {
    outline: none;
}

@-webkit-keyframes buttonmmove-gray {
    from {
        background-color: rgba(126, 197, 182, 0.514);
        border-top: 1px solid rgba(125, 197, 181, 0.23);
        border-right: 1px solid rgba(125, 197, 181, 0.23);
        border-bottom: 1px solid rgba(125, 197, 181, 0.23);
        border-left: 1px solid rgba(125, 197, 181, 0.15);
    }
    to {
        background-color: rgb(126, 197, 182);
        border-top: 1px solid rgba(125, 197, 181, 0.23);
        border-right: 1px solid rgba(125, 197, 181, 0.23);
        border-bottom: 1px solid rgba(125, 197, 181, 0.23);
        border-left: 1px solid rgba(125, 197, 181, 0.15);
    }
}

@keyframes buttonmmove-gray {
    from {
        background-color: rgba(126, 197, 182, 0.514);
        border-top: 1px solid rgba(125, 197, 181, 0.23);
        border-right: 1px solid rgba(125, 197, 181, 0.23);
        border-bottom: 1px solid rgba(125, 197, 181, 0.23);
        border-left: 1px solid rgba(125, 197, 181, 0.15);
    }
    to {
        background-color: rgb(126, 197, 182);
        border-top: 1px solid rgba(125, 197, 181, 0.23);
        border-right: 1px solid rgba(125, 197, 181, 0.23);
        border-bottom: 1px solid rgba(125, 197, 181, 0.23);
        border-left: 1px solid rgba(125, 197, 181, 0.15);
    }
}

.button-gray span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}

.button-gray span:after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
}

.button-gray:hover span {
    padding-right: 25px;
}

.button-gray:hover span:after {
    opacity: 1;
    right: 0;
}


/* active blue button */

.button-blue {
    font-family: "Roboto Condensed", sans-serif;
    float: left;
    background-color: rgba(42, 76, 98, 0.5);
    border-top: 1px solid rgba(42, 76, 98, 0.15);
    border-right: 1px solid rgba(42, 76, 98, 0);
    border-bottom: 1px solid rgba(42, 76, 98, 0);
    border-left: 1px solid rgba(42, 76, 98, 0.1);
     color: #FFFFFF !important;
    text-align: center;
    text-transform: uppercase;
    font-size: 20px !important;
    padding: 15px !important;
    margin: 2px 0px 5px 0;
    transition: all 0.5s;
    cursor: pointer;
    animation: buttonmmoveblue 0.5s infinite;
    animation-timing-function: ease-in;
    animation-direction: alternate-reverse;
    border-radius: 2px;
    line-height: 3;
}

.button-blue:hover {
    cursor: pointer;
    background-color: rgba(42, 76, 98, 1.0);
    border-top: 1px solid rgba(42, 76, 98, 0.5);
    border-right: 1px solid rgba(42, 76, 98, 0.5);
    border-bottom: 1px solid rgba(42, 76, 98, 0.5);
    border-left: 1px solid rgba(42, 76, 98, 0.5);
    color: #FFFFFF !important;
    animation: buttonmmoveblueOver 0.5s infinite;
    animation-timing-function: ease-in;
    animation-direction: alternate-reverse;
    border-radius: 2px;
}

.button-blue:focus {
    outline: none;
}

/* Chrome, Safari, Opera */

@-webkit-keyframes buttonmmoveblue {
    from {
        background-color: rgba(42, 76, 98, 0.3);
        border-top: 1px solid rgba(42, 76, 98, 0.5);
        border-right: 1px solid rgba(42, 76, 98, 0.5);
        border-bottom: 1px solid rgba(42, 76, 98, 0.5);
        border-left: 1px solid rgba(42, 76, 98, 0.5);
    }
    to {
        background-color: rgba(42, 76, 98, 0.6);
        border-top: 1px solid rgba(42, 76, 98, 0.15);
        border-right: 1px solid rgba(42, 76, 98, 0.15);
        border-bottom: 1px solid rgba(42, 76, 98, 0.15);
        border-left: 1px solid rgba(42, 76, 98, 0.1);
    }
}

@-webkit-keyframes buttonmmoveblueOver {
    from {
        background-color: rgba(42, 76, 98, 0.5);
        border-top: 1px solid rgba(42, 76, 98, 0.5);
        border-right: 1px solid rgba(42, 76, 98, 0.5);
        border-bottom: 1px solid rgba(42, 76, 98, 0.5);
        border-left: 1px solid rgba(42, 76, 98, 0.5);
    }
    to {
        background-color: rgba(42, 76, 98, 1.0);
        border-top: 1px solid rgba(42, 76, 98, 0.15);
        border-right: 1px solid rgba(42, 76, 98, 0.15);
        border-bottom: 1px solid rgba(42, 76, 98, 0.15);
        border-left: 1px solid rgba(42, 76, 98, 0.1);
    }
}


/* Standard syntax */

@keyframes buttonmmoveblue {
    from {
        background-color: rgba(42, 76, 98, 0.3);
        border-top: 1px solid rgba(42, 76, 98, 0.5);
        border-right: 1px solid rgba(42, 76, 98, 0.5);
        border-bottom: 1px solid rgba(42, 76, 98, 0.5);
        border-left: 1px solid rgba(42, 76, 98, 0.5);
    }
    to {
        background-color: rgba(42, 76, 98, 0.6);
        border-top: 1px solid rgba(42, 76, 98, 0.15);
        border-right: 1px solid rgba(42, 76, 98, 0.15);
        border-bottom: 1px solid rgba(42, 76, 98, 0.15);
        border-left: 1px solid rgba(42, 76, 98, 0.1);
    }
}

@keyframes buttonmmoveblueOver {
    from {
        background-color: rgba(42, 76, 98, 0.5);
        border-top: 1px solid rgba(42, 76, 98, 0.5);
        border-right: 1px solid rgba(42, 76, 98, 0.5);
        border-bottom: 1px solid rgba(42, 76, 98, 0.5);
        border-left: 1px solid rgba(42, 76, 98, 0.5);
    }
    to {
        background-color: rgba(42, 76, 98, 1.0);
        border-top: 1px solid rgba(42, 76, 98, 0.15);
        border-right: 1px solid rgba(42, 76, 98, 0.15);
        border-bottom: 1px solid rgba(42, 76, 98, 0.15);
        border-left: 1px solid rgba(42, 76, 98, 0.1);
    }
}

.button-blue span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}

.button-blue span:after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
}

.button-blue:hover span {
    padding-right: 25px;
}

.button-blue:hover span:after {
    opacity: 1;
    right: 0;
}


/* green UI button */

.button-ui-green {
    font-family: "Roboto Condensed", sans-serif;
    float: left;
    background-color: rgba(156, 136, 99, 0.05);
    border: 1px solid rgba(156, 136, 99, 0.5);
    color: #9c8860 !important;
    text-align: center;
    text-transform: uppercase;
    font-size: 12px !important;
    transition: all 0.5s;
}

.button-ui-green:hover {
    cursor: pointer;
    background-color: rgba(13, 9, 6, 1);
    border: 1px solid rgba(156, 136, 99, 1);
    color: #FFFFFF !important;
    animation: buttonmmove-bl 0.5s infinite;
    animation-timing-function: ease-in;
    animation-direction: alternate-reverse;
}

.button-ui-green:focus {
    outline: none;
}

@-webkit-keyframes buttonmmove-bl {
    from {
        background-color: rgba(13, 9, 6, 1);
        border: 1px solid rgba(13, 9, 6, 1)
    }
    to {
        background-color: rgba(156, 136, 96, 1.0);
        border: 1px solid rgba(156, 136, 96, 1)
    }
}

@keyframes buttonmmove-bl {
    from {
        background-color: rgba(13, 9, 6, 1);
        border: 1px solid rgba(13, 9, 6, 1)
    }
    to {
        background-color: rgba(156, 136, 96, 1.0);
        border: 1px solid rgba(156, 136, 96, 1)
    }
}


/* red UI button */

.button-ui-red {
    font-family: "Roboto Condensed", sans-serif;
    float: left;
    background-color: rgba(156, 136, 99, 0.05);
    border: 1px solid rgba(156, 136, 99, 0.5);
    color: #9c8860 !important;
    text-align: center;
    text-transform: uppercase;
    font-size: 12px !important;
    transition: all 0.5s;
}

.button-ui-red:hover {
    cursor: pointer;
    background-image: url("/Portals/0/images/bk-01.png");
    background-color: #0d0906;
    border: 1px solid #0d0906;
    color: rgba(255, 255, 255, 1) !important;
    animation: buttonmmove-blr 0.5s infinite;
    animation-timing-function: ease-in;
    animation-direction: alternate-reverse;
}

.button-ui-red:focus {
    outline: none;
}

.button-ui-active {
    font-family: "Roboto Condensed", sans-serif;
    float: left;
    background-image: url("/Portals/0/images/bk-01.png");
    background-color: #2e241c;
    border: 1px solid #2e241c;
    color: #9c8860 !important;
    text-align: center;
    text-transform: uppercase;
    font-size: 12px !important;
}

@-webkit-keyframes buttonmmove-blr {
    from {
        background-color: #0d0906;
        border: 1px solid #0d0906;
    }
    to {
        background-color: rgba(255, 103, 99, 1.0);
        border: 1px solid rgba(255, 103, 99, 1);
    }
}

@keyframes buttonmmove-blr {
    from {
        background-color: #0d0906;
        border: 1px solid #0d0906;
    }
    to {
        background-color: rgba(255, 103, 99, 1.0);
        border: 1px solid rgba(255, 103, 99, 1);
    }
}

.button-null {
    font-family: "Roboto Condensed", sans-serif;
    width: 100%;
    float: left;
    text-align: center !important;
    color: rgba(255, 255, 255, 0.1) !important;
    text-align: center !important;
    text-transform: uppercase;
    font-size: 16px !important;
    padding: 20px !important;
    margin: 2px 0px 5px 0;
    cursor: not-allowed;
    font-weight: 300;
}


.gif-bunner {
    font-family: "Roboto Condensed", sans-serif;
    float: left;
    color: rgba(255, 255, 255, 0.5) !important;
    text-transform: uppercase;
    font-size: 30px !important;
    cursor: default;
    font-weight: 300;
}

.button-bunner {
    border: 1px dashed rgba(255, 255, 255, 0.1);
    font-family: "Roboto Condensed", sans-serif;
    float: left;
    color: rgba(255, 255, 255, 0.1) !important;
    text-transform: uppercase;
    font-size: 16px !important;
    cursor: default;
    font-weight: 300;
}

.bunner-odessa-m {
    background-image: url("/maps/images/odessa-m.jpg");
}

.bunner-w-hp {
    background-image: url("/maps/images/diary.jpg");
}

.bunner-news-m {
    background-image: url("/maps/images/news-m.jpg");
}

.en-bunner-news-m {
    background-image: url("/maps/images/en-news-m.jpg");
}

.bunner-cassete-m {
    background-image: url("/maps/images/cassete-m.jpg");
}

.bunner-cassete-m2 {
    background-image: url("/maps/images/cassete-m2.jpg");
}

.ua-bunner-cassete-m2 {
    background-image: url("/maps/images/ua-cassete-m2.jpg");
}

.en-bunner-cassete-m2 {
    background-image: url("/maps/images/en-cassete-m2.jpg");
}

.bunner-w-m {
    background-image: url("/maps/images/diary-m.jpg");
}

.bunner-info-hp {
    background-image: url("/maps/images/info.jpg");
}

.bunner-time-hp {
    background-image: url("/maps/images/bunner/Timemachine.gif");
}


.bunner-line-hp {
    background-image: url("/maps/images/tape.jpg");
}

.bunner-line-m {
    background-image: url("/maps/images/tape-m.jpg");
}

.ua-bunner-line-m {
    background-image: url("/maps/images/ua-tape-m.jpg");
}

.en-bunner-line-m {
    background-image: url("/maps/images/en-tape-m.jpg");
}

.bunner-line-backagain {
    background-image: url("/maps/images/backagain.jpg");
}

.bunner-3d-m {
    background-image: url("/maps/images/3d-m.jpg");
}

.bunner-main-m {
    background-image: url("/maps/images/main-m.jpg");
}

.headerMenuimg-od-tut {
    background-image: url("/portals/2/images/topmenu/about_us_back2_1000.jpg");
}

.bunner-maps-hp {
    background-image: url("/maps/images/old-maps.jpg");
}

.bunner-maps-m {
    background-image: url("/maps/images/old-maps-m.jpg");
}

.bunner-maps-war {
    background-image: url("/maps/images/war3-ch.jpg");
}

.bunner-maps-war-chron-ru {
    background-image: url("/maps/images/war3-m-ru.jpg");
}

.bunner-maps-war-chron-ua {
    background-image: url("/maps/images/war3-m-ua.jpg");
}

.bunner-maps-war-chron-en {
    background-image: url("/maps/images/war3-m-en.jpg");
}

/* promises */
.bunner-promises-ru {
    background-image: url("/maps/images/copy-ru.jpg");
}
.bunner-promises-ua {
    background-image: url("/maps/images/copy-ua.jpg");
}
.bunner-promises-en {
    background-image: url("/maps/images/copy-en.jpg");
}





.ua-bunner-maps-m {
    background-image: url("/maps/images/ua-old-maps-m.jpg");
}

.en-bunner-maps-m {
    background-image: url("/maps/images/en-old-maps-m.jpg");
}

.bunner-gallery-m {
    background-image: url("/maps/images/gallery-m.jpg");
}

.en-bunner-gallery-m {
    background-image: url("/maps/images/en-gallery-m.jpg");
}

.bunner-p-gallery-m {
    background-image: url("/maps/images/p-gallery-m.jpg");
}

.ua-bunner-p-gallery-m {
    background-image: url("/maps/images/ua-p-gallery-m.jpg");
}

.en-bunner-p-gallery-m {
    background-image: url("/maps/images/en-p-gallery-m.jpg");
}

.bunner-voyage-hp {
    background-image: url("/maps/images/Voyage.jpg");
}

.bunner-voyage-m {
    background-image: url("/maps/images/voyage-m.jpg");
}

.bunner-fly-m {
    background-image: url("/maps/images/fly-m.jpg");
}

.en-bunner-fly-m {
    background-image: url("/maps/images/en-fly-m.jpg");
}

.bunner-tut-m {
    background-image: url("/maps/images/tut-m.jpg");
}

.bunner-takitut-m {
    background-image: url("/maps/images/takitut-m.jpg");
}

.ua-bunner-takitut-m {
    background-image: url("/maps/images/ua-takitut-m.jpg");
}

.en-bunner-takitut-m {
    background-image: url("/maps/images/en-takitut-m.jpg");
}

.bunner-kino-m {
    background-image: url("/maps/images/kino-m.jpg");
}

.ua-bunner-kino-m {
    background-image: url("/maps/images/ua-kino-m.jpg");
}

.en-bunner-kino-m {
    background-image: url("/maps/images/en-kino-m.jpg");
}

.bunner-p-kino-m {
    background-image: url("/maps/images/p-kino-m.jpg");
}

.ua-bunner-p-kino-m {
    background-image: url("/maps/images/ua-p-kino-m.jpg");
}

.en-bunner-p-kino-m {
    background-image: url("/maps/images/en-p-kino-m.jpg");
}

.bunner-official-hp {
    background-image: url("/maps/images/Official.jpg");
}

.bunner-official-m {
    background-image: url("/maps/images/p-contacts-m.jpg");
}

.ua-bunner-official-m {
    background-image: url("/maps/images/ua-p-contacts-m.jpg");
}

.en-bunner-official-m {
    background-image: url("/maps/images/en-p-contacts-m.jpg");
}

.bunner-chronograph-m {
    background-image: url("/maps/images/chronograph-m.jpg");
}

.bunner-about-m {
    background-image: url("/maps/images/about-m.jpg");
}

.en-bunner-about-m {
    background-image: url("/maps/images/en-about-m.jpg");
}

.bunner-intro-hp {
    background-image: url("/maps/images/intro.jpg");
}

.bunner-intro-m {
    background-image: url("/maps/images/p-wanted-m.jpg");
}

.ua-bunner-intro-m {
    background-image: url("/maps/images/ua-p-wanted-m.jpg");
}

.en-bunner-intro-m {
    background-image: url("/maps/images/en-p-wanted-m.jpg");
}

.bunner-users-m {
    background-image: url("/maps/images/p-users-m.jpg");
}

.ua-bunner-users-m {
    background-image: url("/maps/images/ua-p-users-m.jpg");
}

.en-bunner-users-m {
    background-image: url("/maps/images/en-p-users-m.jpg");
}

.bunner-infostat-m {
    background-image: url("/maps/images/intro-m.jpg");
}
.bunner-tools-m {
    background-image: url("/maps/images/p-tools-m.jpg");
}

.ua-bunner-tools-m {
    background-image: url("/maps/images/ua-p-tools-m.jpg");
}

.en-bunner-tools-m {
    background-image: url("/maps/images/en-p-tools-m.jpg");
}

.bunner-history-m {
    background-image: url("/maps/images/p-history-m.jpg");
}

.ua-bunner-history-m {
    background-image: url("/maps/images/ua-p-history-m.jpg");
}

.en-bunner-history-m {
    background-image: url("/maps/images/en-p-history-m.jpg");
}


.bunner-set-main {
    width: 500px;
    height: 260px;
    margin: 18px 3px 0 3px;
    text-align: center !important;
    opacity: 1;
}

.bunner-set {
    width: 100%;
    max-width: 500px;
    height: auto;
    text-align: center !important;
    opacity: 1;
}

.b-set {
    margin: 10px 0;
}

.bunner-set-left {
    width: 215;
    height: 65px;
    margin-left: 1px;
    margin-right: 1px;
    /*margin-bottom: 4px;*/
    padding: 3px;
    opacity: 1;
}

.left-logo-hp {
    background-image: url("/maps/images/ohmenu.png");
}

.left-logo-hp-en {
    background-image: url("/maps/images/en-ohmenu.png");
}

.left-logo-hp-ua {
    background-image: url("/maps/images/ua-ohmenu.png");
}

.left-logo-bw {
    background-image: url("/maps/images/bwmenu.png");
}

.left-logo {
    float: left;
    position: relative;
    left: 40px;
    width: 138px;
    height: 52px;
    margin-top: 15px;
    text-align: center !important;
    font-size: 70px !important;
    opacity: 1;
}

.bunner-link:hover {
    opacity: 0.8;
    cursor:pointer !important;
}

.bunner-link:focus {
    outline: none;
}

.iWPPadd {
    padding: 10px 0;
}

.bunner-txt {
    color: #9c8860;
    width: 505px;
    font-size: 20px;
    padding: 10px 3px;
    line-height: 1.3;
    font-weight: 300;
}

.bunner-txt-h {
    color: #9c8860;
    font-size: 20px;
    padding: 10px 3px;
    line-height: 1.3;
    font-weight: 300;
}

.chapter-link {
    color: #ff6763 !important;
    font-size: 16px !important;
    margin-bottom: 0px;
    float: left;
    margin-top: 4px;
    margin-right: 5px;
}

.chapter-link:hover {
    color: #FFF !important;
}

.chapter-link:focus {
    outline: none;
}

/* buttons artibutes */

.battons-on-timemachine-w, .battons-on-timemachine-w1 {
    width: 100%;
    padding: 10px !important;
    margin: 3px 0;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 300;
}


.battons-on-hp-half-w {
    width: 246px;
    padding: 5px !important;
    margin: 3px;
    text-align: center !important;
    font-size: 14px !important;
}


.v-fill-menu-half-w {
    width: 142px;
    padding: 5px !important;
    margin: 3px;
    text-align: center !important;
    font-size: 12px !important;
}

.battons-on-hp-left {
    float: left;
    width: 49.4%;
    padding: 15px !important;
    margin: 3px 0 3px 0;
    text-align: center !important;
    font-size: 14px !important;
}

.battons-ch-30 {
    float: left;
    width: 29%;
    margin: 0 3px;
    padding: 3% 30px;
    text-align: center !important;
    font-size: 12px !important;
}


.log-right {
    float: right;
    width: 100%;
    padding: 10px;
    text-align: center !important;
    font-size: 12px !important;
    margin: 0 10px;
}

.log-left {
    float: left;
    width: 100%;
    padding: 10px;
    text-align: center !important;
    font-size: 12px !important;
    margin: 0 10px;
}

.battons-on-hp-right {
    float: right;
    width: 49.4%;
    padding: 15px !important;
    margin: 3px 0 3px 0;
    text-align: center !important;
    font-size: 14px !important;
}

.battons-on-hp-fw, .battons-on-hp-fw1 {
    width: 100%;
    padding: 10px  !important; 
    margin: 3px 0;
    font-size: 14px !important;
    text-align: center !important;
    font-weight: 400;
}

.battons-on-hp-fw1 {
    width: 100%;
    padding: 16px 5px !important; 
}

.battons-on-hp-fw2 {
    width: 290px;
    padding: 14px !important; 
    margin: 3px 0;
    font-size: 14px !important;
    text-align: center !important;
}

/**/

.fill-voyge-menu-w {
    width: 100%;
    padding: 7px !important;
    margin: 2px 0px 4px 0;
    font-size: 12px !important;
    text-align: center !important;
}

.battons-on-menu-w {
    width: 162px;
    padding: 5px !important;
    margin: 3px;
    text-align: center !important;
    font-size: 14px !important;
}

@media screen and (max-width: 1024px) {
    .battons-on-menu-w {
        font-size: 14px !important;
    }
}

@media screen and (max-width: 559px) {
    .battons-on-menu-w {
        font-size: 12px !important;
        padding: 0px !important;
        width: 124px !important;
    }
}

@media screen and (max-width: 375px) {
    .battons-on-menu-w {
        font-size: 12px !important;
        padding: 0px !important;
        width: 102px !important;
    }
}

.btn-1-item-timemachine {
    width: 100%;
    text-align: center !important;
    padding: 25px 5px !important;
    margin: 5px 0 5px 0;
    font-size: 18px !important;
    font-weight: 400 !important;
}

.btn-1-item-voyge-album {
    width: 100%;

}

.btn-item {
    width: auto;
    float: left;
    color: #9c8860 !important;
    padding: 17px !important;
    margin: 2px;
    text-align: center !important;
    font-size: 12px !important;
    line-height: 2 !important;
}

.btn-item:hover {
    cursor: pointer;
    color: #ff6763 !important;
    animation: redBlinks 0.5s infinite !important;
    animation-timing-function: ease-in;
    animation-direction: alternate-reverse;
}

.btn-item:focus {
    outline: none !important;
}

/* Chrome, Safari, Opera */

@-webkit-keyframes redBlinks {
    from {
        color: #ff6763 !important;
    }
    to {
        color: #FFF !important;
    }
}


/* Standard syntax */

@keyframes redBlinks {
    from {
        color: #ff6763 !important;
    }
    to {
        color: #FFF !important;
    }
}


.btn-item-small {
    width: auto;
    float: left;
    padding: 10px !important;
    margin: 2px;
    text-align: center !important;
    font-size: 11px !important;
}

.info-item-box {
    border-radius: 5px;
    border: 1px dashed rgba(156, 136, 96, 0.4) !important;
    background-color: rgba(12, 20, 26, 0.637);
    padding: 0 15px 15px;
    margin: 20px 0 15px 0;
}

.info-title {
    color: rgb(207, 207, 207) !important;
    font-size: 18px;
    font-weight: 300px;
}

.infoComment {
    font-size: 16px;
    color: #9c8860;
    font-family: "Roboto Condensed", sans-serif;
    width: 100%;
    padding: 0;
    margin-top: 5px;
    font-weight: 300;
}

.infoCommentalign {
    text-align: center;
}

.info-link {
    font-size: 18px;
    color: #707070 !important;
    padding: 10px 0 !important;
    display: inline !important;
}

.info-link:hover {
    color: #ff6763 !important;
}

.i-center {
    text-align: center;
}

.info-circle-help {
    color: #9c8860;
}


.helpLink {
    font-size: 20px !important;
    color: #ff6763 !important;
    padding: 4px 2px 0 2px !important;
    display: inline !important;
}

.helpLink:hover {
    color: #FFFFFF !important;
}

.mapinfoLink {
    font-size: 14px !important;
    color: #ff6763 !important;
    padding: 4px 2px 0 2px !important;
    display: inline !important;
}

.mapinfoLink:hover {
    color: #9c8860 !important;
    text-decoration: underline !important;
}

.info-link, .helpLink:focus {
    outline: none;
}

.info-box-hr {
    border-bottom: 1px dashed rgba(156, 136, 96, 0.3) !important;
    width: 100%;
}

.info-text-hr {
    border: 1px dashed rgba(66, 66, 66, 0.25) !important;
    width: 100%;
    margin: 10px 0;
}


.btn-1-item {
    width: 100%;
    padding: 15px 5px !important;
    text-align: center !important;
}

.btn-2-item {
    width: 100%;
    height: 65px;
    padding: 0 !important;
    margin: 0 !important;
}

.btn-block-item {
    width: 100%;
    padding: 15px 0px !important;
    text-align: center !important;
    font-weight: 400 !important;
    color: #FFF !important;
    font-size: 14px !important;
    margin: 0 0 10px 0 !important;
    border-radius: 5px !important;
}

.btn-block-mini-item {
    width: 100%;
    padding: 10px 0px !important;
    text-align: center !important;
    font-weight: 400 !important;
    color: #FFF !important;
    font-size: 11px !important;
    margin: 0 0 10px 0 !important;
    border-radius: 25px !important;
}

.btn-3-item {
    width: auto;
    padding: 10px 20px 8px 20px !important;
    height: 42px !important;
    margin: 2px;
}

.btn-sitemap-item {
    width: 47%;
    padding: 12px !important;
    height: 50px;
    margin: 5px;
}

@media screen and (max-width: 1200px) {
    .btn-sitemap-item {
        width: 46%;
    }
}

@media screen and (max-width: 1000px) {
    .btn-sitemap-item {
        width: 45%;
        height: 65px;
    }
}

@media screen and (max-width: 750px) {
    .btn-sitemap-item {
        width: 45%;
        height: 50px;
    }
}

@media screen and (max-width: 500px) {
    .btn-sitemap-item {
        width: 100%;
        height: 50px;
    }
}


/*  Button for Networks for Page Footer */

.btn-networks {
    font-family: "Roboto Condensed", sans-serif;
    border-radius: 50%;
    background-color: rgba(255, 103, 99, 0.0);
    border: 1px solid rgba(255, 255, 255, 1.0);
    color: #ff6763;
    text-align: center;
    font-size: 18px;
    padding: 10px;
    height: 45px;
    width: 45px;
    margin: 0 10px 10px 0;
    cursor: pointer;
}

.btn-networks:hover {
    cursor: pointer;
    animation: socnet 0.2s infinite;
    animation-timing-function: ease-in;
    animation-direction: alternate-reverse;
}

@-webkit-keyframes socnet {
    from {
        background-color: rgba(255, 103, 99, 0.0);
        border: 1px solid rgba(255, 255, 255, 1.0);
    }
    to {
        background-color: rgba(255, 103, 99, 1.0);
        border: 1px solid rgba(255, 103, 99, 1.0);
    }
}

@keyframes socnet {
    from {
        background-color: rgba(255, 103, 99, 0.0);
        border: 1px solid rgba(255, 255, 255, 1.0);
    }
    to {
        background-color: rgba(255, 103, 99, 1.0);
        border: 1px solid rgba(255, 103, 99, 1.0);
    }
}

.voyageCTR {
    border-bottom: 2px dotted rgba(156, 136, 96, 0.2);
    float: left;
    width: 100%;
    padding: 5px 0px;
}

.voyageCTR-fill-menu {
    float: left;
    width: 100%;
    border-bottom: 2px dotted rgba(156, 136, 96, 0.2);
    margin: 5px 0;
}

.voyageCTR-fill-menu-100 {
    width: 100%;
    float: left;
    border-bottom: 2px dotted rgba(156, 136, 96, 0.2);
    margin-top: 10px;
}


/* my hint btn */

.odessa-hint {
    font-family: "Roboto Condensed", sans-serif;
    float: right;
    right: 0px;
    margin: 0px 0 0 25px;
}

.hr-last {
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

#info-btn-flag {
    background-image: url("/Portals/0/images/info.png");
    width: 50px;
    height: 69px;
}

#info-btn-flag:hover {
    cursor: pointer;
    -webkit-animation: mymove 1s infinite;
    /* Chrome, Safari, Opera */
    animation: mymove 1s infinite;
    animation-timing-function: ease-out;
}


/* Chrome, Safari, Opera */

@-webkit-keyframes mymove {
    50% {
        margin-top: 10px;
    }
}


/* Standard syntax */

@keyframes mymove {
    50% {
        margin-top: 10px;
    }
}


/* Buttons Panel */

.BTN-header {
    float: left;
    height: 35px;
    width: 100%;
    padding: 0px;
}

.CentredBTNPanel {
    float: left;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
}

@media screen and (max-width: 1124px) {
    .CentredBTNPanel {
        position: relative;
    }
}

@media screen and (max-width: 600px) {
    .CentredBTNPanel {
        position: relative;
    }
}


/* ------ TopInfoPanel ------ */

.topInfoBlock-x {

}

.topInfoBlock-y {
    float: left;
    width: 400px;
    height: 147px;
    margin: 5px 0 0px 0;
}

#custom-back {
    padding: 0px;
    margin: 0;
    overflow: hidden;
}

nav,
.callbacks,
.disable-destroy,
.show-hide,
.dialog,
.all-themes-switch,
.scrollTo2 {}

nav ul li,
.callbacks ul li,
.disable-destroy ul li,
.show-hide ul li,
.dialog ul li,
.all-themes-switch ul li,
.scrollTo ul li {
    float: left;
    margin: 3px 6px 3px 0;
}

.scrollTo {

    padding-bottom: 10px;
}

#info2 p {
    font-size: 12px;
    color: #9c8860;
    padding: 6px 15px;
}

.cm-horizontal {
    width: 100vw;
    background-color: #0d0906;
}


/* map fill menu comments */

.mapinfo .mapinfotext  {
    bottom: 0px;
    float: left;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 110%);
    visibility: hidden; /*hidden - test*/
    width: 80%;
    color: #ff6763;
    text-align: center;
    padding: 5px 10px;
    z-index: 1;   /* 1 */
    opacity: 0;  /*0 - test*/
    transition: opacity 1s;
}

.mapinfo .mapinfotext::after {
    content: "";
    position: fixed;
    border-color: #555 transparent transparent transparent;
}

.mapinfo:hover .mapinfotext {
    visibility: visible;
    opacity: 1;
    animation: mapinfo-up 0.5s 1;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
   
}


/* Chrome, Safari, Opera */

@-webkit-keyframes mapinfo-up {
    from {
        transform: translate(-50%, 120%);
    }
    to {
        transform: translate(-50%, 110%);
    }
}


/* Standard syntax */

@keyframes mapinfo-up {
    from {
        transform: translate(-50%, 120%);
    }
    to {
        transform: translate(-50%, 110%);
    }
}


/* - fill voyage menu boxes - */

.voyagesHolder {
    float: left;
    width: 50%;
    padding: 0 4px;
}

.voyagesHolder-33 {
    float: left;
    width: 33%;
    padding: 10px 10px;
}

.voyagesHolder-100 {
    width: 100%;
    padding: 0 15%;
}

.voyagesHolder-100-3 {
    width: 100%;
    padding: 0 4px;
}


/* button */

.containerOf {
    position: absolute;
    top: 5px;
    left: 5px;
    display: inline-block;
    cursor: pointer;
    z-index: 1;
}

.bar1,
.bar2,
.bar3 {
    width: 30px;
    height: 5px;
    background-color: #FFF !important;
    margin: 6px 0;
    transition: 0.4s;
}

.stay:hover .bar1,
.stay:hover .bar2,
.stay:hover .bar3{
    background-color: #ff6763;
}

.changeOf .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
}

.changeOf .bar2 {
    opacity: 0;
}

.changeOf .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}

.changeOf:hover .bar1,
.changeOf:hover .bar2,
.changeOf:hover .bar3 {
    background-color: #db5854;
}

/* mob button */

.containerOf_m {
    position: relative;
    display: inline-block;
    cursor: pointer;
    z-index: 1;
    left: 3px;
}

/* для моб версии кнопки левого меню и  дубликат инфо кнопки на карте  в списке маркеров для карты */
/* старый стиль для кнопки << используемой в спике маркера вместе с title - сейчас уже не нужен!!! */
.containerOf_mob {
    cursor: pointer;
    margin-bottom: 10px; 
    display: none; 
    visibility: hidden;
    width: 0px;
    height: 0px;
    position: absolute;      
}



.containerOf_mob_menu {
    cursor: pointer;
    margin-bottom: 10px;
    margin-left: 5px;
    float:left;
}

.containerOf_mob_info {
    cursor: pointer;
    margin: 10px 0;
    margin-right: 0px;
    float: right;   
    font-size: 12px;
}

.bar1_m,
.bar2_m,
.bar3_m {
    width: 40px;
    height: 7px;
    background-color: #9c8860;
    margin: 8px 0;
    transition: 0.4s;
}


.stay:hover .bar1_m,
.stay:hover .bar2_m,
.stay:hover .bar3_m{
    background-color: #ff6763;
}

.changeOf .bar1_m {
    -webkit-transform: rotate(-45deg) translate(-12px, 10px);
    transform: rotate(-45deg) translate(-12px, 10px);
}

.changeOf .bar2_m {
    opacity: 0;
}

.changeOf .bar3_m {
    -webkit-transform: rotate(45deg) translate(-10px, -10px);
    transform: rotate(45deg) translate(-10px, -10px);
}


.changeOf:hover .bar1_m,
.changeOf:hover .bar2_m,
.changeOf:hover .bar3_m {
    background-color: #db5854;
}



/* mage title logo */

.odessa-header {
  height: 60px;
  width: 100%;
  padding: 10px;
  margin: 0 auto;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.4);
}

.BiglogoBox {
    padding: 0;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
    border: 0px solid rgb(0, 168, 112);
}


.odessa-title {
    float: left;
    margin-left: 5px;
    font-weight: 600;
    font-size: 20px;
    text-align: left;
}

.odessa-logo:hover {
  cursor: pointer;
  opacity: .8;
  animation: logomove 0.8s infinite;
  animation-timing-function: ease-in;
  animation-direction: alternate-reverse;
}

.odessa-logo:focus {
    outline: none;
}


.blinks {
    color: #ff6763;
    animation: blinksblinks 0.6s infinite;
    animation-timing-function: ease-in;
    animation-direction: alternate-reverse;
    opacity: 1;
}

.blinks a:focus {
    outline: none !important;
}

@-webkit-keyframes blinksblinks {
    from {
        opacity: .3;
    }
    to {
        opacity: 1;
    }
}

/* Chrome, Safari, Opera */
@-webkit-keyframes logomove {
    from {opacity: 0.5;}
    to {opacity: 1.0;}
}

/* Standard syntax */
@keyframes logomove {
    from {opacity: 0.5;}
    to {opacity: 1.0;}
}


/* old maps full screen */

/* - ajaxZoom- */

.Zoom1CTRL {
    height: calc(100vh - 135px);
}

.oldMapsBOX {
    height: calc(100vh - 100px) !important;
}

/* Timemachine */

.hrefjump {
    color: #ff6763 !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
}

.article-border {
    padding: 5px;
    margin: 0 5px;
    border-radius: 5px;
}

.diary-border {
    border: 1px solid rgba(207, 207, 207, 0.5);
    padding: 10px;
}


.lenta-border-kino {
    background-color: rgba(71, 139, 182, 0.1);
    border: 1px solid rgba(71, 139, 182, 0.3);
    padding: 3px 7px;
    margin: 0 10px;
    border-radius: 5px;
}

.article-border-null {
    background-color: rgba(54, 152, 124, 0.1);
    border: 1px dashed rgba(72, 131, 168, 0.14);
    padding: 10px 30px 5px 30px;
    margin: 20px 0;
    border-radius: 5px;
}

.article-border-od {
    background-color: rgba(235, 176, 57, 0.13);
    border: 1px solid rgba(138, 114, 71, 0.1);
    padding: 5px 7px;
    margin: 0 5px;
    border-radius: 5px;
    transition: 0.3s;
}
.mainStoryLine-border-od {
    background-color: rgb(25, 24, 25);
    margin: 0 5px;
    border-radius: 5px;
    transition: 0.3s;
    color: #eaeaea;
}

.timeline-border {
    background-color: #f1efea;
    border: 1px solid #e5e0d7;
    padding: 5px 7px;
    margin: 0 5px;
    border-radius: 5px;
}


.timeline-border-clear {
    padding: 10px 12px;
    margin: 0 5px;
    border: 1px solid rgba(155, 155, 155, 0.2);
    border-radius: 5px;
}

.timeline-border-item {
    background-color: rgba(172, 152, 110, 0.1);
    border: 1px dashed rgba(138, 114, 71, 0.15);
    padding: 10px 12px;
    margin: 0 5px;
    border-radius: 5px;
}

.found-border-od {
    padding: 5px;
    margin: 0 5px;
    border-radius: 5px;
}

.article-border-imp {
    background-color: rgba(110, 110, 110, 0.1);
    border: 1px solid rgba(255, 104, 99, 0.171);
    padding: 10px 20px ;
    margin: 0;
    border-radius: 5px;
}

.article-border-kids {
    background-color: rgba(214, 155, 60, 0.2);
    border: 1px solid rgba(214, 155, 60, 0.3);
    background-image: url("/Portals/0/images/kids-back.png");
    padding: 10px 20px ;
    margin: 0;
}

.article-border-negative {
    background-color: #0d0906;
    border: 1px solid #0d0906;
    padding: 10px 20px ;
    margin: 0;
}

.article-border-cool {
    border: 1px solid rgba(221, 221, 221, 0.473);
    padding: 10px;
    margin: 0;
}

.article-border-pos {
    background-color: rgba(61, 216, 120, 0.15);
    border: 1px solid rgba(61, 216, 120, 0.2);
    padding: 10px 20px ;
    margin: 0;
}

.chapter-border-od {
    background-color: rgba(235, 176, 57, 0.13);
    border: 1px solid rgba(138, 114, 71, 0.2);
    padding: 20px 20px 10px 20px;
    margin: 0;
    border-radius: 5px;
}

.diary-border-null {
    background-color: rgba(235, 176, 57, 0.1);
    border: 1px dashed rgba(138, 114, 71, 0.4);
    padding: 20px 20px 10px 20px;
    margin: 20px 0;
    border-radius: 5px;
}

.diary-border-comment {
    background-color: rgba(235, 176, 57, 0.1);
    border: 1px dashed rgba(138, 114, 71, 0.4);
    padding: 5px 20px;
    margin: 20px 0;
    border-radius: 5px;
}

.infostat-border-null {
    background-color: #0d181f;
    border: 1px solid #2a4c62;
    padding: 0px 20px 0px 20px;
    border-radius: 5px;
    margin-bottom: 20px !important;
}

.img-comment {
    width: auto;
    padding: 10px;
    background-color: #0d0906;
    background-image: url("/Portals/0/images/bk-02.png");
    color: #ff6763;
    font-weight: 400;
}

.comixSay1 {
    width: 400px;
    height: 73px;
    position: absolute;
    top: 0;
    top: 20%;
    z-index: 1;
}

.comix-comment {
    padding: 10px 20px 15px 20px;
    background-color: #ff6763;
    font-size: 20px;
    text-align: center;
    line-height: 1.2;
    color: #FFF;
    font-weight: 400;
}


.comix-comment-up-vo {
    padding: 15px 15px 20px 15px;
    background-color: #ff6763;
    font-size: 14px;
    text-align: center;
    line-height: 1;
    color: #FFF;
    font-weight: 400;
}

.comix-comment-down {
    float: left;
    width: auto;
    clear: both;
    padding: 10px 20px 15px 20px;
    background-color: #ff6763;
    font-size: 20px;
    text-align: center;
    line-height: 1.2;
    color: #FFF;
    font-weight: 400;
    margin-bottom: 5px;
    margin-top: 0px;
}

.comix-comment-down-vo {
    float: left;
    width: auto;
    padding: 15px 15px 20px 15px;
    background-color: #ff6763;
    font-size: 14px;
    text-align: center;
    line-height: 1;
    color: #FFF;
    font-weight: 400;
    margin-bottom: 5px;
}

.comix-comment-diary {
    float: left;
    width: auto;
    padding: 15px 15px 20px 15px;
    background-color: #ff6763;
    font-size: 18px;
    text-align: center;
    line-height: 1;
    color: #FFF;
    font-weight: 100;
}

.img-left-small {
    float: left;
    margin-right: 10px;
    width: 200px;
    padding-top: 5px;
}

.img-right-small {
    float: left;
    margin-right: 10px;
    width: 200px;
}

/* - Maps page slider - */

    .slider3 {
        width: 50%;
        margin: 100px auto;
    }

    .slider-menu {
        width: 50%;
        margin: auto;
    }

    .slick-slide {
      margin: 0px 24px;
    }

    .slick-slide img {
      width: 100%;
    }

    .slick-slide {
      transition: all ease-in-out .3s;
      opacity: .2;
    }

    .slick-active {
      opacity: .5;
    }

    .slick-current {
      opacity: 1;
    }

/* - Old Maps Page - */

/* Center website */
.main-old-maps {
    padding: 0 25px 0 25px;
    margin: auto;
}

.row-old-maps {
    margin: 8px -16px;
}

/* Add padding BETWEEN each column */
.row-old-maps,
.row-old-maps > .column-old-maps {
}

/* Create four equal columns that floats next to each other */
.column-old-maps {
    float: left;
    width: 25%;
}

/* Clear floats after rows */ 
.row-old-maps:after {
    content: "";
    display: table;
    clear: both;
}

/* Content */
.content-old-maps {
    background-color: white;
    padding: 10px;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 900px) {
    .column-old-maps {
        width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column-old-maps {
        width: 100%;
    }
}

/* Map page hover icon */

.container-old-maps {
  position: relative;
  width: 100%;
}

.image-old-maps {
  display: block;
  width: 100%;
  height: auto;
}

.overlay-old-maps {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-image: url("/Portals/0/images/bk-01.png");
  background-color: rgba(13, 9, 6, 0.75);
}

.container-old-maps:hover .overlay-old-maps {
  opacity: 1;
}

.icon-old-maps {
  color: #FFF !important;
  font-size: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}


.blackFont {
    color: #333 !important;
}

/* Year Overley */

.overlay-year {
    height: 0%;
    width: 100%;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    background-color: rgba(13, 9, 6, 0.95);
    background-image: url("/Portals/0/images/bk-01.png");
    overflow-y: hidden;
    transition: 0.5s;
    overflow-x: hidden;
    padding: 0px 20px;
}

.overlay-content-year {
    position: relative;
    width: 100%;
    text-align: left;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
    
}

.other-item-title {
    color: #eee !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

.other-item-esse {
    color: #ff6763 !important;
    font-size: 14px !important;
    padding: 0px !important;
    width: 98% !important;
}

.body-other-item {
    font-size: 14px !important;
    color: #9c8860;
    width: 90% !important;
    padding: 30px 0px !important;
    background: none !important;
    border-bottom: 1px dashed #9c8860;
}

.overlay-year a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.overlay-year a:hover, .overlay-year a:focus {
    color: #f1f1f1;
}

.closebtn-year {
    color: #333 !important;
    opacity: 0.4;
    outline: 0 !important;
}

.closebtn-year:hover {
    opacity: 1;
    outline: 0 !important;
}

.overlay-year .closebtn-year {
    position: relative;   
    font-size: 40px;
    overflow-x: hidden;
}

@media screen and (max-height: 450px) {
  .overlay-year {overflow-y: auto;}
  .overlay-year a {font-size: 20px}
  .overlay-year .closebtn-year {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}


.img_old_maps{
    width: 100%;
    height: auto;
    display: block;
    max-width: 100%;
}

.img_slider_page{
    width: 100%;
    height: auto;
    display: block;
    max-width: 100%;
}

.content-year {
    position: relative;
    margin-bottom: 10px;
}

/* Info Menu */

@keyframes BtnMove {
    from {top: -30px ;}
    to {top: -10px ;}
}

@keyframes BtnMoveBack {
    from {top: -15px ;}
    to {top: -30px }
}

.Info-btn-ctrl, .Info-btn-ctrl-dark {
    background-image: url("/Portals/0/images/info-mini.png");
    float: right;
    position: absolute;
    height: 100px;
    width: 50px;
    right: 40px;
    z-index: 1;
   animation-name: BtnMoveBack;
   animation-duration: 1s;  
   animation-fill-mode: forwards;
}

.Info-btn-ctrl:hover , .Info-btn-ctrl-dark:hover{
    animation-name: BtnMove;
    cursor: pointer;
}


.Info-btn-ctrl-dark {
    background-image: url("/Portals/0/images/info-mini-off.png");    
}


.tut-btn-ctrl {
    background-image: url("/Portals/0/images/tut.png");
    right: 300px;
}

.socnetworks {
    float: right;
    top: 4px;
    right: 105px;
    position: absolute;
    cursor: pointer;
    z-index: 1;
}

.noAdd {
    padding-left: 10px;
    font-size: 18px;
}

.od-login {
    float: left;
    position: absolute;
    clear: both;
    cursor: pointer;
    z-index: 1;
    border-left: 1px solid #a5a5a5;
    padding-left: 20px;
    top: 13px;
    left: 130px;
    text-transform: uppercase;
}

.od-user {
    float: left;
    position: absolute;
    cursor: pointer;
    text-align: left;
    z-index: 1;
    padding-right: 10px;
    top: 13px;
    left: 190px;
    text-transform: uppercase;
}

.socnetworks-f:focus {
    outline: none;
}






/* Info Overley */

/*  1  */


.overlay-info {
    display: block;
    background-image: url("/Portals/0/images/bk-03.png");
    height: 0%;
    width: 100vw;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    background-color: rgba(14,22,27, 0.95);
    overflow-x: hidden;
    overflow-y: hidden;
    transition: 0.5s;
}

.bgHelp {
    background-color: rgba(12, 5, 5, 0.97);
    background-image: url("/Portals/0/images/bk-01.png");
}

.bg2 {
    background-image: url("/Portals/0/images/bk-02.png");
    background-color: rgba(20, 18, 16, 0.959);
}


.overlay-content-info {
    position: relative;
    width: 100%;
    font-size: 16px;
    height: 100%;
    z-index: 0;
}

.overlay-info a {
    font-size: 20px;
    padding: 0px;
    text-align: left;
    text-decoration: none;
    display: block;
    line-height: 1;
    transition: 0.3s;
}

.overlay-info a:hover,
.overlay-info a:focus {
    color: #f1f1f1;
}

.overlay-info .closebtn-info {
    position: absolute;
    top: -5px;
    right: 17px;  
    font-size: 60px;
    outline: 0;
    z-index: 2;
    cursor: pointer;
    color: white;
}

.overlay-info .closebtn-info:hover,
.overlay-info .closebtn-info:focus {
    color: #db5854;
}


@media screen and (max-height: 500px) {
    /*.overlay {
        overflow-y: auto;
    }*/
    .overlay-info a {
        font-size: 20px
    }
    .overlay-info .closebtn-info {
        font-size: 20px !important;
        top: 5px !important;
        right: 5px !important;
     }
}

.buttons-ctrl-box-main {
    float: left;
    position: relative;
    left: 50%;
    transform: translate(-50%, 20%);
}

.buttons-ctrl-box {
    float: left;
    height: 60px !important;
    position: relative;
    left: 50%;
    transform: translate(-50%, 15%);
    border: 1px red !important;
}

.img_old_maps{
    width: 100%;
    height: auto;
    display: block;
    max-width: 100%;
}

/* -- Gallery -- */
/* -- Gallery images comment-- */

.containerGallery {
    position: relative;
    width: 100%;
  }
  
  .imageGallery {
    display: block;
    width: 100%;
    height: auto;
  }
  
  .overlayGallery {
    float: left;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-image: url("/Portals/0/images/bk-02.png");
    background-color: rgba(13, 9, 6, 0.86);
  }
  
  .containerGallery:hover .overlayGallery {
    opacity: 1;
  }

  .BoxGallery {
      position: relative;
      width: 100%;
      height: 100%;
      padding: 30px;
      left: 0px;
      top: 0px;
  }

.albom-year {
    font-size: 12px;
    font-weight: 600;
    color:#9c8860;
    position: relative;
    padding: 5px 10px;
    border: 1px solid #9c8860;
    float: left;
    margin-left: 6px;
    font-family: sans-serif;
}

.alb-Title {
    font-size: 20px !important;
    line-height: 1.5;
}

.albom-comments {
    font-size: 13px;
    color: #FFF;
    font-weight: 200;
    font-family: sans-serif;
    padding-right: 10px;
    line-height: 20px;
}

.albom-content {
    background: rgba(0, 0, 0, 0.0);
    color: #f1f1f1;
    padding: 5px;
    height: calc(100% - 60px);
    width: 100%;
    float: left;
    position: relative;
}

.go-to-buttons {
    float: left;
    position: absolute;
    bottom: 25px;
    width: 100%;
    left: 30px;

}

.go-to-right-buttons {
    float: right;
    position: absolute;
    bottom: 30px;
    width: auto;
    right: 20px;
}

.go-to-btns-item {
    padding: 7px;
    margin-right: 5px;
}

 .textGallery {
    color: white;
    font-size: 18px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
  }



  /* -- info tooltip --*/

  .tooltipInfo {
    position: relative;
    display: inline-block;
}

.tooltipInfo .tooltiptextInfo {
    visibility: hidden;
    width: 120px;
    background-color: #ff6763;
    border: 1px solid #ff6763;
    color: #fff;
    font-size: 12px;
    text-align: center;
    border-radius: 0px;
    padding: 2px 0;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -60px;
    text-transform: uppercase;
}

.tooltipInfo .tooltiptextInfo::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-top: 1px;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #ff6763 transparent transparent transparent;
}

.tooltipInfo:hover .tooltiptextInfo {
    visibility: visible;
}

/* TimeMachine Voyages Alboms pages */

.page-3-slider {
    padding: 30px 0 10px;
    height: 100%;
}

.item-block-box {
    float: left;
    width: 800px;
    height: 350px;
    border: 1px solid #9c8860;
    background-color: rgba(13, 9, 6, 1);
    background-image: url("/Portals/0/images/bk-02.png");
    border-radius: 10px;
    margin: 20px 0px;
    overflow: hidden;
}

.item-green-block-box {
    float: left;
    width: 100%;
    border: 1px solid #9c8860b0;
    background-color: rgba(13, 9, 6, 0.6);
    background-image: url("/Portals/0/images/bk-01.png");
    border-radius: 5px;
    overflow: hidden;
    text-align: center;
}

.item-block-box-soon {
    float: left;
    width: 460px;
    height: calc(100vh - 340px);
    border: 1px dashed #9c8860;
    background-color: rgba(13, 9, 6, 1);
    background-image: url("/Portals/0/images/bk-01.png");
    border-radius: 10px;
    margin: 20px 0px;
    overflow: hidden;
    position: relative;
}

.box-soon-text {
    padding: 40px;
    text-align: center;
    font-size: 60px;
    color: rgba(156, 136, 96, 0.12);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.item-block-header {
    font-size: 32px;
    font-weight: 100;
    color: #333;
    text-align: center;
    padding: 25px 0;
    margin-top: 5px;
}

.item-block-img {
    padding: 0;
}

.item-block-header {
    font-size: 18px;
    color: #FFF !important;
    text-decoration: none !important;
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
}

.item-block-text {
    padding-top: 5px;
    font-size: 16px;
    font-weight: 400;
    color: #FFF;
    margin: 5px 0 10px;
    text-align: center;
    text-transform: uppercase;
}

.battons-on-slider {
    width: 100%;
    margin: 30px 0 40px 0;
}

.sliderPage {
    width: 86%;
    margin: 0px auto;
}

.sliderPage-mini {
    width: 100%;
    margin: 0px auto;
}

.slick-slide {
    margin: 0px 20px;
}

.slick-slide img {
  width: 100%;
}


.slick-slide {
  transition: all ease-in-out .3s;
  opacity: 1;
}

.slick-active {
  opacity: 1;
}

.slick-current {
  opacity: 1;
}

  .accordionSearch {
	float: right;
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: auto;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

.activeSearch, .accordionSearch:hover {
    background-color: #ccc;
}

.accordionSearch:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.activeSearch:after {
    content: "\2212";
}

.panelSearch {
    padding: 0 18px;
    background-color: #333;
    color: #FFF;
    max-height: 0;
    width: 100%;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.info-btn-left-menu {
    /*display: none;*/
}

.hideMe {
    height: calc(100vh - 88px);
    padding: 0 10px 0 10px;
}

.hideMe2 {
    height: calc(100vh - 198px);
    padding: 0 10px 0 10px;
}

.hideMe3 {
    height: calc(100vh - 228px);
    padding: 20px 0 20px 20px;
}


.yearBlockHolder {
    border: 0px solid red;
    width: 350px;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.hideMeArticle {
    height: calc(100vh - 108px);
    padding: 0 10px 0 10px;
}

.hideMeGalley {
    height: calc(100vh - 88px);
    padding: 0 10px 0 10px;
}

/* The actual timeline (the vertical ruler) */
.timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

/* The actual timeline (the vertical ruler) */
.timelineTimeline::after {
    content: '';
    position: absolute;
    width: 6px;
    background-color: #9c8860;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
}

/* Container around content */
.containerTimeline {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
}

/* The circles on the timeline */
.containerTimeline::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    right: -17px;
    background-color: #FFF;
    border: 4px solid #ff6763;
    top: 15px;
    border-radius: 50%;
    z-index: 1;
}

/* Place the container to the left */
.leftTimeline {
    left: 0;
}

/* Place the container to the right */
.rightTimeline {
    left: 50%;
}

/* Add arrows to the left container (pointing right) */
.leftTimeline::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    right: 30px;
    border: medium solid #9c8860;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #9c8860;
}

/* Add arrows to the right container (pointing left) */
.rightTimeline::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    left: 30px;
    border: medium solid #9c8860;
    border-width: 10px 10px 10px 0;
    border-color: transparent #9c8860 transparent transparent;
}

/* Fix the circle for containers on the right side */
.rightTimeline::after {
    left: -16px;
}

/* The actual content */
.contentTimeline {
    padding: 20px 30px;
    background-color: #9c8860;
    position: relative;
    border-radius: 6px;
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
  /* Place the timelime to the left */
  .timelineTimeline::after {
    left: 31px;
  }
  
  /* Full-width containers */
  .containerTimeline {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }
  
  /* Make sure that all arrows are pointing leftwards */
  .containerTimeline::before {
    left: 60px;
    border: medium solid #9c8860;
    border-width: 10px 10px 10px 0;
    border-color: transparent #9c8860 transparent transparent;
  }

  /* Make sure all circles are at the same spot */
  .leftTimeline::after, .rightTimeline::after {
    left: 15px;
  }
  
  /* Make all right containers behave like the left ones */
  .rightTimeline {
    left: 0%;
  }
}

.black {
    color: #333;
}

.item-title-style {
    font-size: 18px;
    color: #333 !important;
    height: 10px;
    float: left;
    padding-right: 3px !important;
}

.serchHolder {
    float: right;
    position: absolute;
    border: 0px solid red;
    right: 0px;
    top: 0;
    padding: 20px;
    width: 100% !important;
  }


.common-hideeye { 
    float: right;
    position: absolute;
    font-size: 20px;
    top: 7px !important;
    right: 45px;
    z-index: 1;
    opacity: 0.5;
}

.common-hideeye:hover {
    opacity: 0.8;
} 

.common-hideeye:focus {
    opacity: 0.5;
    outline: none;
} 


.search-box {
    background-image: url("/Portals/0/images/bk-04.png"); 
    background-color: rgba(13, 9, 6, 0.98);
    border: 1px solid #9c8860;
    padding: 10px;  /* no effect for div*/
}

.search-size {
    width:  900px;
    height: 80px;
 }

 .search-size-m {
    width:  600px;
    height: 76px;
 }

.full-search-box {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 60%;
}

.article-w-page {
    padding: 0 30%;
}

.voyage-box-border {
    float: left;
    width: 100%;
    height: 100%;
    padding: 5px;
    border: 1px dashed rgba(255, 103, 99, 0.15);
}

.voyage-box-border-green {
    float: left;
    width: 100%;
    height: 100%;
    padding: 5px;
    border: 1px dashed rgba(156, 136, 96, 0.15);
}

.goBack {
    float: left;
    width: 100%;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
    font-weight: 100;
    outline: 0;
}

.goBack:focus {
    outline: none;
}

.eds_customText {
    color: #ff6763 !important;
    font-size: 16px !important;
}

.voyage-item-box {}

.voyage-item {
    opacity: 1;
}

.voyage-item:hover {
    opacity: 0.8;
}


.title-style {
    color: #333 !important;
    font-size: 20px;
    padding: 5px 0px !important;
}

.btn-all-pages {
    width: 100%;
    float: left;
}

.diary-image {
    padding: 0 30% 0 30%;
}

.m-hide {}

.colortitle {
    text-align: center;
    margin-bottom: 10px;
    font-size:50px;
    font-weight: 600 !important;
 }

 .colortitle, .bread_crumbs {
    text-align: center;
 }


 /* mob buttons */

.column-help {
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
  }
  
  /* Clear floats after the columns */
  .-row-help:after {
    content: "";
    display: table;
    clear: both;
  }

  .left-h {
    padding: 3px;
    width: 50%;
  }
  
  .right-h {
    padding: 3px;
    width: 50%;
  }

  .help-mob-btns {
    text-align: center;
    margin: 10px 0;
  }

  .h-space {
      margin: 0 10px;
  }

  .footerLinks {
    cursor: pointer;
  }

  .bg {
    height: 100%; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .bg-img-catalog {
    background-image: url("/maps/images/catalog-back.jpg");
  }

  .bg-img-Diary {
    background-image: url("/maps/images/diary-back.jpg");
  }

  .bg-img-maps {
    background-image: url("/maps/images/maps-back.jpg");
  }

  .about-txt {
    font-size:18px;
    padding: 10px 0;
    font-weight: 400;
  }

  .mob-soc-btns-box {
    margin: auto;
    width: 260px;
    margin-bottom: 20px;
  }

  .mob-soc-btns {
    padding: 14px !important;
    color: #9c8860 !important;
  }

  .mob-soc-btns:hover {
    color: #ff6763 !important;
  }

  .moreIco {
      float: right;
      margin-right: 5px;
      font-size: 14px !important;
  }

  .moreViews {
      float: left;
      color: rgb(100, 100, 100) !important;
      font-size: 12px !important;
      font-weight: 300;
  }

  .iconOnImg {
      float: right;
      position: absolute;
      bottom: 9px;
      right: 40px;
  }

.iOnImgPd {
    padding: 0 0 0 5px !important;
}

.iOnImgDiary {
    padding: 0 10px !important;
}

.iconOnImg2 {
      float: left;
      position: absolute;
      top : 0px;
  }

  .newsroom {
    padding: 0 0 30px;
}

.topMenuMainPos {
    position: relative;
    top: 6px;
    left: 0px;
    width: 800px;
}

.mHomeLinks {
    display: none;
    visibility: hidden;
    text-align: center;
    font-size: 18px;
}

.newsRoom {
    display: none;
    visibility: hidden;
    font-size: 18px;
}

.adminHomeLinks {
    text-align: center;
    font-size: 18px;
    margin-top: 20px;
}

.mTimeChapt {
    display: inline;
    text-align: center;
    font-size: 26px;
}

.timeDown {
    float: right;
    padding: 0 10px;
}

.timeUp {
    float: left;
    padding: 0 10px;
}


.timemachineText {
    font-size: 18px;
    color:#ffffff;
}

.voyage-descript-ch {
    padding: 0 80px;
    margin: 10px 0 0 0;
    text-align: center;
    font-size:160%;
}

.containerOf_mob_menu {
    visibility: visible;
    display: none;
}

.registerGroup {
    display: inline;
}

.userMessages, .userNotifications {
    display: none;
}


.userProfileImg {
    list-style-type: none;
    display: inline;

}

.userDisplayName {
    display: inline;
}

   /* newsroom */

   .nsrm_simpleDate {
    font-size: 15px;
    font-weight: 300;
    color: #ff6763;
}

.newsRoomW {
    padding: 0 15%;
}

.search-body-img {
    background-color: #0d0906;
    background-image: url("/Portals/0/images/bk-02.png");
}

.search-body {
    padding: 40px 30%;
}

.network-body {
    padding: 20px 20px 10px 20px;
}

.soc-pad {
    padding: 10px;
}

.s-body {
    padding: 60px 20%;
    background-color: #0d0906;
    background-image: url("/Portals/0/images/bk-02.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}


.goBTN {
    height: 34px;
    width: 100px;
    background-color: #FFF !important;
    border: 1px solid #9c8860 !important;
    color: #444;
    font-size: 12px;
    line-height: 0;
    margin-top: 0;
}

.goBTN:hover {
    background-color: #ff6763 !important;
    border: 1px solid  #ff6763 !important;
    color: #FFF;
}

  /* pagination */

  .pagination {
    font-size: 14px;
    position: relative;
    top: 20px;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .pagination a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;   
  }
  
  .pagination a.active {
    background-color: #ff6763;
    color: white;
  }
  
  .pagination a:hover:not(.active) {
      background-color: #ddd;
    }


    .topMinLogo {
        position: absolute;
        float: left;
        top: 0px;
        left: 40px;
        margin-right: 10px;
        cursor:pointer;
        border: 0px solid red;
    }

    .topSearchHolder {
        position: relative;
        float: right;
        top: 3px;
        right: 0px;
        width: 900px;
        background-color: #FFF;
    }

    .diaryShelf {
        position: relative;
        float: left;
        left: 0;
        top: 0;
        margin: 0 10px;
        width: 100%;
    }


/* sticky header */


    .chHeight {
        /*padding: 0 0 20px 0;*/
    }

    .chHeightLine {
        padding: 10px;
        background-image: url("/Portals/0/images/bk-01.png");
    }

    .chHeightKino{
        height: 220px;
    }

    div.sticky {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
      }

    .tags {
        font-size: 14px !important;
    }

/* Time line elements */


.kinoBox {
    position: relative;
    float: left;
    display: block;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    overflow: hidden;
    margin-bottom: 5px;
}

.dnBlkComment {
    text-align: center;
    font-size:12px;
    font-weight: 400;
    margin: 3px 0 10px;
}

.tnx {
    text-align: center;
    font-size:12px;
    font-weight: 400;
    margin: 0 0 5px 0;
}

.tnx-no {
    display: none;
}

.itIsHere {
    text-align: center;
    font-size:14px;
    font-weight: 400;
    margin-bottom: 10px;
    text-transform: lowercase;
}

.itIsNotHere {
    display: none;
}

.imgBtw1 {
    width: 100%;
    height: 10px;
}

.uncover {
    background-image: url("/portals/0/images/uncover.png");
    position: absolute;
    bottom: 0px;
    z-index: 100;
    height: 75px;
    width: 81px;
    z-index: 1;
}

.uncover-s {
    background-image: url("/portals/0/images/uncover-s.png");
    position: absolute;
    bottom: 0px;
    z-index: 100;
    height: 75px;
    width: 81px;
}

.imageBox {
    position: relative;
    padding: 0;
}

.imageBox-map {
    position: relative;
    padding: 0;
    margin: 40px 0;
    border: 1px solid #707070;
}

.imageBox-f {
    position: relative;
    padding: 0;
    padding-top: 5px;
}

.imageBox-h {
    position: relative;
    padding: 0;
}

.watermark {
    background-image: url("/portals/0/images/watermark1.png");
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 2%;
    float: right;
    z-index: 2;
    height: 52px;
    width: 138px;
}

.watermark-min{
    background-image: url("/portals/0/images/oh-gallery.png");
    background-repeat: no-repeat;
    position: absolute;
    bottom: 10px;
    right: 20px;
    float: right;
    z-index: 1;
    height: 50px;
    width: 50px;
}

.playVideo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    height: 72px;
    width: 71px;
    z-index: 1;
}
.playVideo-m {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    height: 40px;
    width: 40px;
    z-index: 9;
}

.playItBTN {
    width: 71px;
    height: 72px;
}
.playItBTN-m {
    width: 40px;
    height: 40px;
    display: block;
    margin: auto;
}


/* chapters menu */

.logChapters {
    text-align: center;
    padding: 0px 10px;
  }

.logChapters-dark {
    text-align: center;
    padding: 0px 10px;
  }


/* colomn menu */

.mnChapters {
    width: 100%;
    text-align: left;
  }

  .mnChapters-dark {
    width: 100%;
    text-align: left;
    border-top: 1px solid #2a4c62;
  }

  .mnChItm {
    color: #222 !important;
    font-size: 13px;
    padding: 10px 20px;
    text-transform: uppercase;
    line-height: 2;
    font-weight: 400;
    border: 1px solid #FFF;
    margin: 10px 0;
    width: 100%;
    display: block;
  }


  .mnChItm-d {
    color: #2a4c62 !important;
    border: 1px solid #070e12;
  }




  .mnChItm-btn:hover {
    color: #FFF !important;
    background-color: #ff6863;
    border: 1px solid #ff6763;
    border-radius: 2px;
  }





  .mnChItm.current {
    border: 1px dashed #ff6863;
    color: #ff6763 !important;
    margin: 0;
    border-radius: 2px;
  }

  .mnChItm-m-dark.current {
    background-color: #ff68631f;
    border: 1px solid #070e12;
    color: #ff6763 !important;
    font-size: 13px;
    padding: 10px 20px;
    text-transform: uppercase;
    line-height: 2;
    font-weight: 400;
    padding: 10px 20px;
    margin: 0;
    border-radius: 2px;
  }

  .mnChItm.current:hover {
    color: #ff6763 !important;
    background-color: rgba(255, 104, 99, 0);
    border: 1px dashed #ff6763;
    border-radius: 2px;
  }

  .btn-sh-shelf {
    text-align: center;
    position: relative;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    width: 100%;
    padding: 20px 0;
    height: 20px;
  }

  .btn-sh-shelf:hover {
    color: #FFF !important;
    opacity: .8;
    cursor: pointer;
  }

  .btn-sh {
      width: 44%;
      color: #ff6763 !important;
      font-size: 16px !important;
      text-transform: uppercase;
      padding: 5px;
      background-color: #FFF;
      border: 1px solid #ff6763;
      border-radius: 5px;
      font-weight: 300;
  }


.btn-sh:hover, .btn-sh-s:hover {
    background-color: #ff6763;
    border: 1px solid #ff6763;
    color: #FFF !important;
    cursor: pointer;
}

.btn-sh-img {
    position: relative;
    top: 5px;
    width: 36px;
    color: #333;
}

.btn-sh-green {
    width: 44%;
    color: #9c8860 !important;
    font-size: 16px !important;
    text-transform: uppercase;
    padding: 5px;
    background-color: #FFF;
    border: 1px solid #9c8860;
    border-radius: 5px;
    font-weight: 300;
}

.btn-sh-s {
    width: 80px;
    color: #ff6763 !important;
    font-size: 15px !important;
    text-transform: uppercase;
    padding: 7px;
    background-color: #FFF;
    border: 1px solid #ff6763;
    border-radius: 5px;
    font-weight: 300;
}

.btn-sh-green-s {
    width: 80px;
    color: #9c8860 !important;
    font-size: 15px !important;
    text-transform: uppercase;
    padding: 14x;
    background-color: #FFF;
    border: 1px solid #9c8860;
    border-radius: 5px;
    font-weight: 300;
}

.btn-sh-s-dark {
    width: 80px;
    color: #ff6763 !important;
    font-size: 18px !important;
    text-transform: uppercase;
    padding: 5px;
    border: 1px solid #ff6763;
    border-radius: 5px;
    font-weight: 300;
}

.btn-sh-green-s-dark {
    width: 80px;
    color: #9c8860 !important;
    font-size: 18px !important;
    text-transform: uppercase;
    padding: 5x;
    border: 1px solid #9c8860;
    border-radius: 5px;
    font-weight: 300;
}

.btn-sh-green:hover, .btn-sh-green-s:hover, .btn-sh-s-dark:hover, .btn-sh-green-s-dark:hover {
    background-color: #9c8860;
    border: 1px solid #9c8860;
    color: #FFF !important;
    cursor: pointer;
}


  .ProfileOdessa {
      height: auto;
      width: 50px;
      border-radius: 80%;
      border: 3px solid #FFF;
  }

  .ProfileOdessaBig {
    height: auto;
    width: 100%;
    border-radius: 50%;
    border: 1px solid #FFF;
}

  .ProfileOdessaMin {
      height: auto;
      width: 20px;
      border-radius: 80%;
      border: 1px solid #FFF;
  }

  .giveMoreLog {
      display: none;
      visibility: hidden;
  }

  .moreItems {
      font-size: 32px;
      line-height: 1.2;
      color: #333 !important;
      text-align: center;
      text-transform: uppercase;
      font-weight: 400;
      margin: 80px 0 100px 0;
  }


  #visibleParts {
    display: none;
    visibility: hidden;
}

.flagsCF {
    visibility: hidden;
    display: none;
}

.cfFlagPos {
    border: 1px solid #d8d8d8;
    top: -2px;
    margin-right: 2px;
}

.cfFlagReg {
    height: 12px;
    width: 17px;
    margin-bottom: 2px;
}

.cfFlagPosBig {
    border: 1px solid #d8d8d8;
    margin-right: 2px;
    margin-bottom: 3px;
}

.cfFSizeBig {
    height: 23px !important;
}

.cfFSize {
    width: 16px;
    height: 11px;
}

.cfFSizeUSSR {
    width: 20px;
    height: 11px;
}

.mapMenuEye {
    cursor: pointer !important;
    color: #7ec5b6;
}

/* lng flags */

.cfFSize-lng {
    width: 30px;
    height: 20px;
}

.cfFSize-usa-lng {
    width: 40px;
    height: 20px;
}

.lgHv {
    opacity: .4;
    transition: 0.3s;
}

.lgHv:hover {
    opacity: 1;
}

.comText {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
    margin-top: 5px;
    font-family: sans-serif;
    margin-top: 10px;
}

.comTextUser {
    font-size: 14px;
    font-weight: 400 !important;
    line-height: 1.2;
    margin-top: 5px;
    /*font-family: sans-serif;*/
    margin-top: 10px;
}

.comTextCh {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    margin-top: 5px;
    font-family: sans-serif;
}

.comTextmini {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
}

.dnText {
    font-size: 12px;
    font-weight: 400;
}

.hrDnMarg {
    border-top: 1px dashed #bdbdbd;
    padding-bottom: 0px;
    margin-top: 5px;
}

.hrDnTegs {
    border-top: 1px solid #ebebeb;
    padding: 0;
    margin: 10px 0 8px 0;
}

.subFlagData,.subFlagDataCenter {
    color: #ff6763;
    font-size: 12px;
    font-weight: 400;
}
.subFlagDataCenter {
   text-align: center;
}


.findShelf {
    padding: 20px !important;
}

.findHint {
    font-size: 13px;
    color: #7ec5b6;
    margin-bottom: 5px;
    font-weight: 400;
}

.findMain {
    color: #7ec5b6 !important;
    text-decoration: underline !important;
}

.findMain:hover {
    color: #ff6763 !important;
}

.avatarImg {
    position: relative;
    top: 52px;
    border-radius: 50%;
    overflow: hidden;
    width: 80px;
    height: 80px;
    left: 50%;
    transform: translate(-50%, -50%);
}

.profileBTNS {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 200px;
}

.avatarImgMembers {
    border-radius: 50% !important;
    overflow: hidden !important;
}

.avatarTitle {
    color: #FFF !important;
    text-align: center;
    font-weight: 300;
    font-size: 26px;
    text-transform: uppercase;
    transition: 0.3s;
}


.avatarTitleMembers {
    text-align: center;
    font-weight: 300;
    font-size: 24px;
    line-height: 1;
    text-transform: uppercase;
}

.avatarJustTitle {
    color: #FFF !important;
    text-align: center;
    font-weight: 300;
    font-size: 24px;
    text-transform: uppercase;
    transition: 0.3s;
}

.avatarJustTitle2 {
    color: #333 !important;
    text-align: center;
    font-weight: 300;
    font-size: 30px;
    text-transform: uppercase;
    transition: 0.3s;
    line-height: 1;
    padding: 10px 20px;
}

.tagsCTR {
    font-size: 12px;
    margin: 5px 0 0 0;
    font-weight: 400;
    line-break: anywhere;
}

.dots-3 {
    color: #FFF;
    margin-right: 10px;
    font-size: 18px;
}

.authors {
    font-size: 11px !important;
    margin: 5px 0 !important;
    font-weight: 400;
}

.aboutBublle {
    font-size:160%;
    font-weight: 400;
}

.whatIsLines {
    color: #ff6763;
    transition: 0.3s;
}

.whatIsLines:hover {
    color: #FFF;
}

.theMainStory {
    color: #FFF !important;
    transition: 0.3s;
}

.theMainStory:hover {
    color: #ff6763 !important;
    cursor: pointer;
}

.favorites {
    position: absolute;
    top: 0px;
    right: 30px;
    float: right;
    z-index: 10;
    width: 38px;
    height: 60px;
}


.StoriesList {
    position: absolute;
    top: -10px;
    left: 217px;
    float: left;
    z-index: 2;
    cursor: pointer;
    width: 38px;
    height: 60px;
    opacity: .9;
    transition: 0.3s ease-in-out;
}

.StoriesList:hover {
  opacity: 1;
  top: 0px;
  transition: 0.3s;
}

.mapsList {
    position: absolute;
    top: -10px;
    right: 160px;
    float: right;
    z-index: 2;
    cursor: pointer;
    width: 38px;
    height: 60px;
    opacity: .9;
    transition: 0.3s ease-in-out;
}

.mapsList:hover {
  opacity: 1;
  top: 0px;
  transition: 0.3s;
}

.timeBox {
    margin: 20px 0;
    padding: 0 20px;
}

.timeOdessa {
    font-size: 16px;
    font-weight: 400;
    float: left;
    margin-top: 7px;
    position: absolute;
    left: 270px;
    color: #7ec5b6;
}

.chrDnUser {
    font-size: 13px;
    font-weight: 400;
    position: relative;
    float: right;
    right: 5px;
    margin-top: 0px;
}

.chrDnViews {
    font-size: 13px;
    position: relative;
    float: left;
    bottom: 0;
    color: rgb(117, 117, 117);
}

.copyImg {
    position: absolute;
    float: right;
    right: 0;
    padding: 10px;
    background-color: #ff6763;
    border: 1px solid #ff6763;
    color: #FFF;
    font-weight: 400;
    text-align: center;
    font-size: 12px;
    border-radius: 0 0 0 5px;
    z-index: 10;
    text-transform: lowercase;
    transition: 0.3s;
    font-family: sans-serif;
}

.copyImg:hover {
    background-color: #c74b47;
    cursor: pointer;
}

.imgArtL {
    display: block;
    float: left;
    width: 49%;
    margin-right: 1%;
}

.imgArtR {
    display: block;
    float: right;
    width: 49%;
    margin-left: 1%;
}

.julyStyle {
    color: rgb(128, 128, 128);
}

.iFrameGoo {
    height: 400px;
}

.say1 {
    position: absolute;
    left: 0;
    z-index: 1;
}
.say2 {
    position: absolute;
    left: 0;
    z-index: 1;
}

.add-lM-box {
    margin-top: 10px;
}

.add-leftMenu {
font-size: 12px;
font-weight: 400;
padding: 3px 10px 5px;
background-color: #FFF;
border: 1px solid #ff6763;
line-height: 1;
border-radius: 5px;
text-transform: lowercase;
}


.chHeight, .filterAllShelf {
    background-color: rgba(0, 0, 0, 0.67);
 }

.mapPageLink {
    color: #ff6763 !important;
    transition: 0.3s;
}

.mapPageLink:hover {
    color: #9c8860 !important;
}

.mapHP {
    width:100%;
    z-index: 12;
    height: calc(100vh - 160px);
}

.mapMain {
    position:relative;
    top:0; bottom:0;
    width:100%;
    height: 400px;
    transition: 0.3s;
}

.mapsImgBlock {
    cursor: pointer !important;
}

.mapsImgBlock:hover {
    opacity: .8;
}

.mkDate {
    font-size: 12px;
}

/* easybtn */

.routIcon{
    font-size: 1.5em;
  } 
  .routIcon:hover{
   opacity: .8;
  }

#zoom .easy-button-button{
    transition-duration: .3s;
    position: relative;
    border-radius: 4px;
    border: solid 0px transparent; }
  
  #zoom .easy-button-container{
    background-color: white;}
  
  #zoom .zoom-btn{
    position: absolute;
    top: 0;
    left: 0;}
  
  #zoom .easy-button-button.disabled {
height: 0;}

/* filter pane in main template */

.map_filter {
    width: 380px;
    height: 100%;
}
 
.w2 {
    background-image: url("/portals/0/images/geo-icon.png");
    background-repeat: no-repeat;
    height: 24px;
    width: 24px;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-margin: 2px; /* Safari */
    -moz-o-margin: 3px;
    animation-name: zoom;
    animation-duration: 0.6s;
  }

.infoHPTitle {
    font-size: 30px;
    text-align: center;
    font-weight: 300;
    font-family: "Roboto Condensed", sans-serif;
    margin-bottom: 0px;
    color: #7ec5b6;
    padding: 0 20%;
    line-height: 1;
}

.infoShortStory {
    font-size: 26px;
    text-align: center;
    font-weight: 300;
    font-family: "Roboto Condensed", sans-serif;
    margin-bottom: 10px;
    /*color: #7ec5b6;*/
    color: #000;
    line-height: 1;
}

.infoHPstat {
    border-top: 1px solid #7878783b !important;
    font-size: 14px;
}

.mapTilesMpage {
    font-weight: 400;
    margin-bottom: .2em;
    margin-left: 3px;
    font-family: "Roboto Condensed", sans-serif;
    /*color: #FFF;*/
    font-size: 20px;
    text-align: center;
}

.mapTilesTitle {
    font-weight: 400;
    font-size: 20px;
    color: #9c8860;
}

.tmLOctrl {
    display: none;
}

.mainStoryTitle {
    color: #7ec5b6;
    padding: 10px 20px 20px 20px;
    font-size: 16px;
    line-height: 1.1;
    text-align: center;
    font-weight: 400;
}

/* side bar x mark */

.leaflet-sidebar .close {
	position: absolute;
	right: 5px;
	top: 10px;
	width: 31px;
	height: 31px;
	font-size: 30px;
	line-height: 1em;
	text-align: center;
	cursor: pointer;
	z-index: 1000;
	opacity: 1;
	text-shadow: none;
    font-weight: 300;
    color: #a8a8a8 !important;
}

.close:hover {
    color: #ff6763 !important;
}

/* Hello page */

.p-s-box {
    padding: 50px 20px;
}

.p-t-box {
    padding: 40px 20%;
}


.helloTxt1 {
    text-align: center;
    font-size: 20px;
    color: #333;
}

.helloTxt2 {
    text-align: justify;
    font-size: 20px;
    color: #333;
    font-weight: 300;
}

.helloTxtW1 {
    text-align: center;
    font-size: 24px;
    color: #FFF;
    font-weight: 400;
    line-height: 1.5;
    width: 75%;
}

.helloTxtW2 {
    text-align: center;
    font-size: 24px;
    color: #FFF;
    font-weight: 400;
    line-height: 1;
    width: 75%;
}

.helloTxtW3 {
    text-align: center;
    font-size: 24px;
    color: #FFF;
    padding-top: 10px;
    border-top: 1px dashed rgba(255, 255, 255, 0.548);
}

.helloTxtW4 {
    font-family: 'DIN Condensed Bold';
    text-align: center;
    font-size: 40px;
    color: #FFF;
    font-weight: 300;
    line-height: 1.5;
    width: 75%;
    text-transform: uppercase;
}

.homePageItems_more {
    padding: 0;
    margin: 0;
    font-size: 18px;
    text-transform: lowercase;
    font-weight: 400;
}

.brFreyd {
    display: none;
}

.containerHello {
    position: relative;
    text-align: center;
    }

 .centeredHello1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.leaflet-draw-edit-off {
    background-image: url("/portals/0/images/clear-off-icon.png");
}

.leaflet-draw-edit-add {
    background-image: url("/portals/0/images/clear-on-icon.png");
}

.leaflet-draw-edit-vertical {
    background-image: url("/portals/0/images/clear-vert-icon.png");
}

.leaflet-draw-edit-horizontal {
    background-image: url("/portals/0/images/clear-hor-icon.png");
}

.mapStylesBox {
    padding: 20px;
}

.mapStyles {
    width: 100%;
    border: 1px solid #5f5f5f !important;
    border-radius: 5px;
    overflow: hidden;
    margin: 4px;
    cursor: pointer;
    opacity: .8;
    height: 100px !important;
}

.mapStyles:hover {
    opacity: 1;
    border: 1px solid #ff6763 !important;
}

.districtStyles {
    width: 100%;
    border: 2px solid #5f5f5f !important;
    border-radius: 5px;
    overflow: hidden;
    margin: 4px;
    cursor: pointer;
    opacity: .8;
}

.districtStyles:hover {
    opacity: 1;
    border: 2px solid #ff6763 !important;
}

.mapStylesBoxMini {
    padding: 10px;
}

.mapStylesMini {
    width: 100%;
    border: 1px solid #5f5f5f !important;
    border-radius: 5px;
    overflow: hidden;
    margin: 4px;
    cursor: pointer;
    opacity: .8;
    height: 70px !important; 
}

.mapStylesMini:hover {
    opacity: 1;
    border: 1px solid #ff6763 !important;
}

.iconsInLeftMenu {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 34px;
}

.lmenuIconImg {
    height: 20px;
}


.popWinYear {
    font-weight: 400;
    color: #111;
    font-size: 14px;
    line-height: 1;
    font-family: "Roboto Condensed", sans-serif;
}
.popClock {
    color: #699c91;
}

.popWinTitle {
    font-size: 16px;
    color: #333 !important;
    line-height: 1.2;
    margin-bottom: 5px !important;
}

.popWinTitleNoHv {
    font-size: 16px;
    color: #333 !important;
    line-height: 1.2;
    margin-bottom: 5px !important;
}

.popWinTitle:hover {
    color: #ff6763 !important;
}

.popWinTitleText {
    font-size: 16px;
    color: #333 !important;
    line-height: 1.2;
    margin-bottom: 5px !important;
}

.blockTitleIcon {
    padding-top: 35px;
    text-align: center;
    margin-bottom: 20px;
}

/* icon add my story */
.authorStar {
    position: absolute;
    left: 50%;
    top: -30px;
    margin-left: 15px;
}

.authorStarMini {
    position: absolute;
    left: 50%;
    top: -35px;
    margin-left: 16px;
}

.authorStarBig {
    position: absolute;
    left: 50%;
    top: -32px;
    margin-left: 17px;
}

.authorStarBigA {
    position: absolute;
    left: 50%;
    top: 155px;
    margin-left: 30px;
    z-index: 3;
}

.infoTitle {
    font-size: 20px;
    font-weight: 300;
    color: #FFF;
}

#dnn_ctr950_Register_captchaLabel_lblLabel, #dnn_ctr950_Register_captchaLabel_cmdHelp, #dnn_ctr950_Register_userForm_92f0768fef513a69cf2acc1bd48aab54_Label, #dnn_ctr950_Register_userForm_11706f1e25fc4d362c5db2df65b9a007_Label, #dnn_ctr950_Register_userForm_7fd0a036d6a0b523c44e3ec0c44350d1_Label, #dnn_ctr950_Register_userForm_11706f1e25fc4d362c5db2df65b9a007_Label, #dnn_ctr943_Login_Login_DNN_plUsername, #dnn_ctr943_Login_Login_DNN_plPassword {
    color: #FFF;
    font-size: 16px;
    font-weight: 400;
}

.regTitle {
    font-family: "Roboto Condensed", sans-serif;
    color: #ff6763;
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
}

.modalLinkInfo {
    font-size: 18px !important;
}

.flashBTN {
    text-align: center;
    color:#ffffff;
    font-weight: 400;
}

/* add story block */
.voyge-size, .album-size, .maps-size {
    width:  560px;
    height: 560px;
    transition: 0.3s;
 }

 .maps-scroll-y {
    float: left; 
    display: block;
    position: relative;
    top:  0px;
    left: 0px;
    width: 100%;
    height: 520px;
    padding: 0px 10px 15px 5px;
    margin-left: 0px;
    margin-top: 10px;
    transition: 0.3s;
}

.writeStoryTxt {
     margin-right: 5px;
     font-size: 14px;
     font-weight: 500;
     position: relative;
     top: 5px;
     transition: 0.3s;
 }

    .writeStoryTxt:hover {
        color: #9fefde !important;
    }

.extraUserInfo {
    color: #ff6763 !important;
}

.shortStoryTxt {
    color: #333;
    font-size: 14px;
}

/* to 2 */
.edncf_DropDownList.edncf_timeLine1, .edncf_DropDownList.edncf_galleryItems, .edncf_DropDownList.edncf_maps-types, .edncf_DropDownList.edncf_maps-types-ua, .edncf_DropDownList.edncf_maps-types-en, .edncf_DropDownList.edncf_galleryItems-en, .edncf_DropDownList.edncf_galleryItems-ua, .edncf_DropDownList.edncf_yearsForMovieline, .edncf_DropDownList.edncf_sityInfosrtucture, .edncf_DropDownList.edncf_sityInfosrtucture-ua, .edncf_DropDownList.edncf_sityInfosrtucture-en, .edncf_DropDownList.edncf_Period, .edncf_DropDownList.edncf_PeriodKino, .edncf_DropDownList.edncf_Period-ua, .edncf_DropDownList.edncf_Period-en {
float: left;
width: 100%;
}

.edncf_DropDownList.edncf_timeLine2, .edncf_DropDownList.edncf_movieLetters, .edncf_DropDownList.edncf_kinoLetters, .edncf_DropDownList.edncf_imagesSizes, .edncf_DropDownList.edncf_imagesSizes-ua, .edncf_DropDownList.edncf_imagesSizes-en,.edncf_DropDownList.edncf_sityInfosrtucture2, .edncf_DropDownList.edncf_sityInfosrtucture2-ua, .edncf_DropDownList.edncf_sityInfosrtucture2-en, .edncf_DropDownList.edncf_SortCriteria, .edncf_DropDownList.edncf_sortCriteria-ua, .edncf_DropDownList.edncf_sortCriteria-en {
float: right;
width: 100%;
}


/* to 3 */


.filterWarning {
    background-image: url("/portals/0/images/filterWarning.png");
    background-repeat: repeat-x;
    height: 40px;
    opacity: 0;
    transition: 0.5s;
    cursor: pointer;
}

.filterWarning:hover {
    opacity: 1;
}

.bigMapIcon {
    position: absolute;
    top: 0;
    left: 0;
    /*margin: 10px;*/
    padding: 12px 8px;
    /*background-color: #7ec5b6;
    background-color: rgba(0, 0, 0, 0.2);*/
    background-color: #ff6763;
    color: #FFF;
    z-index: 1;
    border-radius: 0 0 5px 0;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
}

.placeShooting {
    color: #699c91;
    font-size: 12px;
    font-weight: 500;
    margin: 7px 0 0 5px;
    padding-top: 5px;
    border-top: 1px solid #e6e6e6;
}

.placeShootingM {
    color: #699c91;
    font-size: 12px;
    font-weight: 500;
    margin: 5px 0 0 5px;
    padding-bottom: 5px;
    /*border-bottom: 1px solid #e6e6e6;*/
}

.placeShootingDT {
    color: #699c91;
    font-size: 12px;
    font-weight: 500;
    margin: 5px 0 0 5px;
    padding-top: 5px;
    text-align: center;
}

.viewComments {
    font-size: 12px;
    position: relative;
    float: left;
    margin-top: 1px;
    bottom: 0;
    font-weight: 400;
    color: rgb(117, 117, 117);
}


.btn-top-find {
    float: right;
    position: absolute;
    top: 10px;
    right: 10px;
    height: auto;
    width: auto;
    font-size: 19px;
}

.categCF {
    border: 1px solid #e5e5e5;
    padding: 0 6px 2px 6px;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 400;
}

.categCFART {
    text-align: center;
    padding: 5px;
    font-size: 14px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-bottom: 10px;
}

.flagLMn {
    float: left;
    margin: 0 5px;
}

.lMenuLngBlock {
    margin: 20px 0 45px 55px;
}

#languages1 {
    display: none;
}


.mapTitleWord1 {
    float: right;
    position: absolute;
    font-size: 30px;
    left: 50%;
    color: #ff6763;
    font-weight: 300;
}

.mapTitleWordm {
    float: right;
    position: absolute;
    font-size: 30px;
    left: 52%;
    color: #ff6763;
    font-weight: 300;
}

.mapTitleWordmu {
    float: right;
    position: absolute;
    font-size: 30px;
    left: 51.5%;
    color: #ff6763;
    font-weight: 300;
}

.mapTitleWordme {
    float: right;
    position: absolute;
    font-size: 30px;
    left: 51%;
    color: #ff6763;
    font-weight: 300;
}

.mTW1 {
    transform: translate(-240px, -155%);
}

.mTW1kino {
    transform: translate(-300px, -155%);
}

.mTW1kinoUa {
    transform: translate(-270px, -155%);
}

.mTW1kinoEn {
    transform: translate(-310px, -155%);
}

.mTW1ua {
    transform: translate(-215px, -155%);
}

.mTWar3 {
    transform: translate(-210px, -155%);
}

.mapTitleWord2 {
    float: left;
    position: absolute;
    font-size: 30px;
    left: 50%;
    color: #ff6763;
    font-weight: 300;
}

.mTW2 {
    transform: translate(80px, -280%);
}

.blockSh {
    clear: both;
    margin-bottom: -5px;
}

.hobbit {
    color: #7ec5b6;
    font-weight: 400;
    font-size: 18px;
    text-align: center;
    /*margin-bottom: 5px;*/
    margin-top: -10px;
}


.woundsBlock {
    margin: 0;
    position: absolute;
    /*top: 10px;
    left: 10px;*/
    color: white;
    z-index: 1 !important;
    font-weight: 400;
    padding: 5px 10px;
    border-radius: 3px;
    background-color: rgba(0, 0, 0, 0.38);
    line-height: 1.5;
    margin: 5px;
}


.woundsTextBig {
    font-size: 14px; 
}

.woundsTextSmall {
    font-size: 12px;
}

.timeYears {
    padding: 0 50px;
}

.timeYearsNum {
    font-size: 16px;
    font-weight: 600;
    transition: 0.3s;
    cursor: pointer;
    padding: 0 5px 0 5px;
}

.tYTu {
    color: #666 !important;
}

.tYRu {
    color: #8a8a5c !important;
}

.tYUssr {
    color: #b30000 !important;
}

.tYUa {
    color: #006680 !important;
}

.tYTu:hover {
    color: #ff6763 !important;
}

.tYRu:hover {
    color: #ff6763 !important;
}

.tYUssr:hover {
    color: #ff6763 !important;
}

.tYUa:hover {
    color: #ff6763 !important;
}

.tYMain {
    border: 1px solid #d9d9d9;
    border-radius: 3px;
}

.tYWar {
    border: 1px solid #4d4d4d;
    border-radius: 3px;
}

#yearsTime{
    width: 260px;
    height: 400px;
    overflow: hidden;
    padding: 10px;
  }
  #yearsTime ul{
    width: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
  }
  #yearsTime li{
    /*width: 200px;
    height: 120px;*/
    margin: 5px;
    padding: 10px;
    /*background: #dbf3f7;*/
  }
  @media only screen and (min-width: 60px){
    #yearsTime{
      width: 100%;
      height: 80px;
    }
    #yearsTime ul{ width: auto; }
    #yearsTime li{ float: left; }
  }

  /* truth */
  .truthBlock {
    padding: 5px; margin: 5px 0 10px 0;
  }

  .truthBText {
    margin: 0; padding: 3px; text-align: center; font-size: 14px; font-weight: 400;
  }

  /* truth colors*/

  .truthNo {
    border: 1px solid #ff6763;
  }

  .truthYes {
    border: 1px solid #7ec5b6;
  }

  .truthTextNo {
    color: #ff6763;
  }

  .truthTextYes {
    color: #7ec5b6;
  }


.extMenuPos {
    top: 115px !important;
    right: 40px !important;
}




/* -------- iPad My -------- */


.FSizeIcon {
    width: 27px;
    height: 18px;
}

.FSizeUIcon {
    width: 30px;
    height: 18px;
}

@media only screen 
    and (min-width : 1px) 
    and (max-width : 1500px){
        .od-login {
            left: 160px;
        }
        
        .od-user {
            left: 220px;
        }
        .topSearchHolder {
            width: 600px;
        }
        .p-t-box {
            padding: 0 5%;
        }
}

@media only screen 
    and (min-width : 1px) 
    and (max-width : 1112px){
        .leaflet-sidebar .close {
            right: -63px;
        }
}

@media only screen 
    and (min-width : 1px) 
    and (max-width : 1024px){
        .authorStarBigA {
            top: 200px;
            margin-left: 40px;
        }
        .topMenuMain {
            display: none;
            visibility: hidden;
        }
        .watermark-min{
            display: none;
            visibility: hidden;
        }
        #navbar {
            display: none;
            visibility: hidden;
        }
        .mHomeLinks {
            display: block;
            visibility: visible;
            padding: 0 20px;
        }
        .topSearchHolder {
            width: 400px;
        }
        .newsRoom {
            display: block;
            visibility: visible;
            padding: 20px;
        }
        .mnChapters {
            text-align: center;
          }
          .mnChapters-dark {
            text-align: center;
          }

        .voyage-descript-ch {
            padding: 0 14px;
            /*text-align: left;*/
        }
        .timemachineText {
            font-size: 16px;
            font-weight: 200;
        }
        .containerOf_mob_menu {
            visibility: visible;
            display: block;
        }
        .newsRoomW {
            padding: 0 15%
        }
        .hero-text-info {
            margin-top: 0 !important;
        }
        .pagination {
            padding: 0 20%;
            position: relative;
            top: 50px !important;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 0px solid red;
        }
        .sideListBox {
            float: right;
            top: 0;
            right: 0;
            width: 40%;
        }
        .search-body {
            padding: 40px 20%;
        }
        .aboutBublle {
            font-size: 90%;
        }
        .favorites {
            width: 54px;
            height: 86px;
        }
        .map_filter {
            width: 380px;
        }
        .leaflet-sidebar .close {
            right: 6px;
        }
        /* Hello page */
        .p-s-box {
            padding: 40px 20%;
        }

        .helloTxt1 {
            font-size: 22px;
            line-height: 1;
        }
        .helloTxt2 {
            font-size: 20px;
            line-height: 1;
        }
        .helloTxtW1 {
            font-size: 26px;
            width: 80%;
        }
        .helloTxtW2 {
            font-size: 34px;
            line-height: 1;
        }
        .helloTxtW3 {
            font-size: 14px;
        }
        .helloTxtW4 {
            font-size: 22px;
        }
        .leaflet-control-minimap{
            display: none;
        }
}

@media only screen 
    and (min-width : 1px) 
    and (max-width : 960px){
        .leaflet-sidebar .close {
            right: 6px;
        }
        .authorStarBigA {
            top: 220px;
            margin-left: 55px;
        }
        .mapTitleWord1, .mapTitleWord2, .mapTitleWordm, .mapTitleWordmu, .mapTitleWordme {
            display: none;
        }
}


@media only screen 
    and (min-width : 1px) 
    and (max-width : 800px){
        .bigMapIcon {
            padding: 20px 15px;
            font-size: 20px;
        }
        .tLOctrl {
            display: none;
        }
        .tmLOctrl {
            display: block;
        }
        .timeOdessa {
            left: 145px;
        }
        .subFlagData,.subFlagDataCenter {
            font-size: 14px;
        }
        .playVideo {
            height: 50px;
            width: 50px;
        }
        .playItBTN {
            width: 50px;
            height: 50px;
        }
        .copyImg {
            font-size: 16px;
        }
        .chrDnUser {
            font-size: 15px;
        }
        
        .chrDnViews {
            font-size: 15px;
        }
        .StoriesList {
            width: 31px;
            height: 50px;
            left: 110px;
        }
        .timeBox {
            margin: 10px 0;
            padding: 0 0 20px 0;
        }
        .topSearchHolder {
            width: 240px;
        }
        .btn-sh {
            width: 40%;
            font-size: 22px !important;
        }
        .btn-sh-green {
            width: 40%;
            font-size: 22px !important;
        }
        #hiddenParts {
            display: none;
            visibility: hidden;
        }
        #visibleParts {
            display: block;
            visibility: visible;
        }
        .hero-text {
            width: 80%;
        }
        .hero-text-info {
            width: 80%;
        }
        .search-body {
            padding: 40px 15%;
        }
        .pagination {
            padding: 0 15%;
            top: 80px !important;
          }
        .eds_customText {
            margin-top: 70px;
        }
        .newsRoomW {
            padding: 0 5%;
        }
        .s-body {
            padding: 60px 10%;
        }
        .comTextCh {
            font-size: 16px !important;
        }
        .comText, .comTextUser {
            font-size: 16px !important;
        }
        .comTextmini {
            font-size: 16px;
        }
        .dnText {
            font-size: 16px !important;
        }
        .hrDnMarg {
            padding-bottom: 15px;
        }
        .watermark {
            background-image: url("/portals/0/images/watermark2.png");
            height: 38px;
            width: 100px;
        }
        .logChapters {
            padding: 0px 20px;
          }
          .img-left-small {
            width: 100%;
        }
        .img-right-small {
            width: 100%;
        }
        .avatarImg {
            top: 40px;
            width: 50px;
            height: 50px;
        }
        .tagsCTR {
            font-size: 16px;
        }

        .map_filter {
            width: 380px;
        }
        .leaflet-sidebar .close {
            right: 6px;
        }
        /* Hello page */
        .p-s-box {
            padding: 20px 10px;
        }
        .p-t-box {
            padding: 0 20px;
        }
        .helloTxt1 {
            font-size: 20px;
            line-height: 1.2;
            text-align: left;
        }
        .helloTxt2 {
            font-size: 20px;
            line-height: 1.2;
            text-align: left;
        }
        .helloTxtW2 {
            font-size: 23px;
            line-height: 1.2;
        }
        .helloTxtW3 {
            text-align: left;
            font-size: 20px;
            line-height: 1.2;
        }

}

@media only screen 
    and (min-width : 1px) 
    and (max-width : 740px){
        .leaflet-sidebar .close {
            right: -88px;
            top: 0px;
        }
}

@media only screen 
    and (min-width : 1px) 
    and (max-width : 736px){
        .leaflet-sidebar .close {
            right: -88px;
            top: 0px;
        }
}


@media only screen 
    and (min-width : 1px) 
    and (max-width : 600px){
        .map_filter {
            width: 385px;
        }
}

@media only screen 
    and (min-width : 1px)
    and (max-width : 500px){
        #languages1 {
            display: block;
        }
        .extMenuPos {
            top: 150px !important;
            right: 40px !important;
        }
        .hobbit {
            margin-top: 0;
        }
        .timeYears {
            padding: 0 10px;
        }
        .mapsList {
            display: none;
        }
        /* to 2 */
        .edncf_DropDownList.edncf_timeLine1, .edncf_DropDownList.edncf_yearsForMovieline, .edncf_DropDownList.edncf_galleryItems, .edncf_DropDownList.edncf_maps-types, .edncf_DropDownList.edncf_maps-types-ua, .edncf_DropDownList.edncf_maps-types-en, .edncf_DropDownList.edncf_timeLine2, .edncf_DropDownList.edncf_movieLetters, .edncf_DropDownList.edncf_imagesSizes, .edncf_DropDownList.edncf_imagesSizes-ua, .edncf_DropDownList.edncf_imagesSizes-en, .edncf_DropDownList.edncf_galleryItems-ua, .edncf_DropDownList.edncf_galleryItems-en {
            float: none;
            width: 100%;
            }
        /* to 3 */
        .edncf_DropDownList.edncf_Period, .edncf_DropDownList.edncf_PeriodKino, .edncf_DropDownList.edncf_SortCriteria, .edncf_DropDownList.edncf_sortCriteria-ua, .edncf_DropDownList.edncf_sortCriteria-en, .edncf_DropDownList.edncf_sityInfosrtucture, .edncf_DropDownList.edncf_sityInfosrtucture-ua, .edncf_DropDownList.edncf_sityInfosrtucture-en, .edncf_DropDownList.edncf_Period-ua, .edncf_DropDownList.edncf_Period-en, .edncf_DropDownList.edncf_sityInfosrtucture2, .edncf_DropDownList.edncf_sityInfosrtucture2-ua, .edncf_DropDownList.edncf_sityInfosrtucture2-en {
            float: none;
            width: 100%;
        }
        /* add story block */
        .voyge-size, .album-size, .maps-size {
            width:  330px;
            height: 580px;
        }
        .maps-scroll-y {
            height: 550px;
        }

        .avatarJustTitle2 {
            font-size: 24px;
        }
        .odTimeTxt {
            display: none;
        }
        .infoHPTitle {
            padding: 0 10%;
        }
        .imgArtL {
            display: block;
            float: left;
            width: 100%;
            margin-right: 0%;
        }
        .imgArtR {
            display: block;
            float: left;
            width: 100%;
            margin-left: 0%;
            margin-top: 10px;
        }
        .whatis {
            display: none;
            visibility: hidden;
        }
        .authors {
            font-size: 12px !important;
            margin: 5px 0 !important;
            font-weight: 400;
        }
        .article-border-od, .lenta-border-kino, .found-border-od {
            margin: 0;
        }
        .topSearchHolder {
            width: 240px;
            right: -10px;
        }
        .timemachineText {
            font-size: 12px;
            font-weight: 200;
        }
        .giveMoreLog {
            display: block;
            visibility: visible;
        }
        .pagination {
            padding: 0 5%;
            top: 70px !important;
        }
        .od-login {
            display: none;
        }
        .od-user {
            display: none;
            visibility: hidden;
        }
        .socnetworks {
            right: 115px;
        }
        .Info-btn-ctrl {
            right: 50px;
        }
        .Info-btn-ctrl-dark {
            right: 50px;
        }
        .iFrameGoo {
            height: 260px;
        }
        .watermark {
            background-image: url("/portals/0/images/watermark3.png");
            height: 30px;
            width: 80px;
        }
        #hideThis {
            display: none;
            visibility: hidden;
        }
        .itIsHere {
            font-size:18px;
        }
        .avatarTitle {
            font-size: 24px;
        }
        .aboutBublle {
            font-size: 100%;
        }
        .mapHP {
            height: calc(100vh - 200px);
        }
        .mainStoryTitle {
            font-size: 18px;
        }
        .map_filter {
            width: 330px;
        }
        .p-t-box {
            padding: 120px 10%;
        }
        .helloTxtW1 {
            font-size: 16px;
            width: 80%;
            font-weight: 400;
            line-height: 1.25;
        }
        .helloTxtW3 {
            font-size: 12px;
        }
        .brFreyd {
            display: block;
        }
        .battons-on-hp-fw, .battons-on-hp-fw1 {
            font-size: 11px !important;
        }

        .homePaageHeadIconLogo {
            width: 30%;
        }
        
}

/* 414 (iPhone 12, 11, GAlaxy Note  9) */
@media only screen 
    and (min-width : 1px) 
    and (max-width : 414px){
        .leaflet-sidebar .close {
            right: -52px;
            top: 0px;
        }
        .leaflet-sidebar>.leaflet-control {
            width: 414px !important;
        }
        .map_filter {
            width: 350px !important;
        }
}

/* 375 (iPhone SX) */
@media only screen 
    and (min-width : 1px) 
    and (max-width : 375px){
        .leaflet-sidebar .close {
            right: -13px;
            top: 0px;
        }
        .leaflet-sidebar>.leaflet-control {
            width: 375px !important;
        }
        .map_filter {
            width: 310px !important;
        }
}

/* 360 (Galxy S5) */
@media only screen 
    and (min-width : 1px) 
    and (max-width : 360px){
        .leaflet-sidebar .close {
            right: 2px;
            top: 0px;
        }
        .leaflet-sidebar>.leaflet-control {
            width: 360px !important;
        }
        .map_filter {
            width: 295px !important;
        }
}

/* 320 (iPhone 5) */
@media only screen 
    and (min-width : 1px) 
    and (max-width : 320px){
        .leaflet-sidebar .close {
            right: 5px;
            top: 0px;
        }
        .leaflet-sidebar.left {
            z-index: 0 !important;
        }
}


/* need to be rewrite */

@media only screen 
    and (min-width : 768px) 
    and (max-width : 1024px)  { 
        /* iPad in portrait & landscape */
        .md-sc-ipad-p-l {
            width: 600px !important;
        }
        .diary-image {
            padding: 0;
        }
        .btn-item {
            padding: 17px !important;
            margin: 2px;
            line-height: 2 !important;
        }
        .odessa-title {
            width: 100%;
            display: block;
            margin-top: 5px;
            margin-left: 0px;
            font-size: 15px;
            text-align: center;
        }
        .bgimg-history-title {
            font-size: 24px;
      }
      .bgimg-history {
          font-size: 18px;
      }
     .full-search-box {
        width: 80%;
    }
    .article-w-page {
        padding: 0;
    }
    .article-w-page {
        padding: 0 25%;
    }
    .m-hide {
        display: none;
    }
    .search-size-m {
        width:  600px;
     }
     .col-sm-8 {
         width: 100%;
     }
     .col-sm-4 {
         width: 100%;
     }
}

@media only screen 
    and (min-width : 768px) 
    and (max-width : 1024px) 
    and (orientation : landscape) {
        /* iPad in landscape */
        .diary-image {
            padding: 0;
        }

}


@media only screen 
    and (min-width : 768px) 
    and (max-width : 1024px) 
    and (orientation : portrait) {
        /* iPad in portrait */
        .diary-image {
            padding: 0;
        }
        .map_filter {
            width: 380px;
        }
}

/* iPhone 12/13 Pro Max */
@media only screen 
and (min-width : 428px) 
and (max-width : 926px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {
    /* Retina iPad in landscape */
    .diary-image {
        padding: 0;
    }
    /* add story block */
    .voyge-size, .album-size, .maps-size {
        width:  660px;
        height: 300px;
    }
    .maps-scroll-y {
        height: 270px;
    }
}

/* Galaxy S20 */
@media only screen 
and (min-width : 412px) 
and (max-width : 915px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {
    /* Retina iPad in landscape */
    .diary-image {
        padding: 0;
    }
    /* add story block */
    .voyge-size, .album-size, .maps-size {
        width:  660px;
        height: 300px;
    }
    .maps-scroll-y {
        height: 270px;
    }
}

/* iPhone 11 pro */
@media only screen 
and (min-width : 414px) 
and (max-width : 896px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {
    /* Retina iPad in landscape */
    .diary-image {
        padding: 0;
    }
    /* add story block */
    .voyge-size, .album-size, .maps-size {
        width:  660px;
        height: 300px;
    }
    .maps-scroll-y {
        height: 270px;
    }
}


/* iPhone 12 */
@media only screen 
    and (min-width : 390px) 
    and (max-width : 844px) 
    and (orientation : landscape)
    and (-webkit-min-device-pixel-ratio: 2) {
        /* Retina iPad in landscape */
        .diary-image {
            padding: 0;
        }
        /* add story block */
        .voyge-size, .album-size, .maps-size {
            width:  540px;
            height: 300px;
        }
        .maps-scroll-y {
            height: 270px;
        }
    }
    

@media only screen 
    and (min-width : 768px) 
    and (max-width : 1024px)
    and (-webkit-min-device-pixel-ratio: 2) {
        /* Retina iPad in portrait & landscape */

        .diary-image {
            padding: 0;
        }
}

@media only screen 
    and (min-width : 768px) 
    and (max-width : 1024px) 
    and (orientation : landscape)
    and (-webkit-min-device-pixel-ratio: 2) {
        /* Retina iPad in landscape */
        .diary-image {
            padding: 0;
        }
}

@media only screen 
    and (min-width : 768px) 
    and (max-width : 1024px) 
    and (orientation : portrait)
    and (-webkit-min-device-pixel-ratio: 2) {
        /* Retina iPad in portrait */

        .diary-image {
            padding: 0;
        }
}

@media only screen 
    and (min-width : 768px) 
    and (max-width : 1024px) 
    and (-webkit-min-device-pixel-ratio: 1) {
        /* iPad 1 & 2 in portrait & landscape */

}

@media only screen 
    and (min-width : 768px) 
    and (max-width : 1024px) 
    and (orientation : landscape)
    and (-webkit-min-device-pixel-ratio: 1)  {
       /* iPad 1 & 2 in landscape */

}

@media only screen 
    and (min-width : 768px) 
    and (max-width : 1024px) 
    and (orientation : portrait) 
    and (-webkit-min-device-pixel-ratio: 1) {
    /* iPad 1 & 2 in portrait */

}

/* ------- iPhone ------- */

@media only screen 
    and (min-width : 375px) 
    and (max-width : 812px)
    and (-webkit-device-pixel-ratio : 3) {
    /* iPhone X in portrait & landscape */
    .md-sc-ipad-p-l {
        width: 320px;
    }
    .odessa-title {
        width: 100%;
        display: block;
        margin-top: 5px;
        margin-left: 0px;
        font-size: 15px;
        text-align: center;
    }
    .bgimg-history-title {
          font-size: 24px;
    }
    .bgimg-history {
        font-size: 18px;
    }
     .article-w-page {
        padding: 0 15%;
    }
    .m-hide {
        display: none;
    }
    .search-size-m {
        width:  600px;
    }    
    .img-right-small {
        width: 350px;
    }
}

@media only screen 
    and (min-width : 375px) 
    and (max-width : 812px) 
    and (-webkit-device-pixel-ratio : 3)
    and (orientation : landscape) {
    /* iPhone X in landscape */

}

@media only screen 
    and (min-width : 375px) 
    and (max-width : 812px) 
    and (-webkit-device-pixel-ratio : 3)
    and (orientation : portrait) {
        /* iPhone X in portrait */

}

@media only screen 
    and (min-width : 375px) 
    and (max-width : 667px) {
        /* iPhone 6, 7, & 8 in portrait & landscape */
        .md-sc-ipad-p-l {
            width: 360px !important;
        }
        .comHTGcontUp {
            width: 320px !important;
        }
        .btn-item {
            padding: 5px !important;
            margin: 2px;
            line-height: 2 !important;
        }
        .btn-item {
        padding: 5px !important;
        margin: 2px;
        line-height: 2 !important;
        }
        .info-acrl-ctrl {
            float: left !important;
            max-height: 550px;
            padding: 10px 0px 120px 0px;
            margin: 0 5px 0 20px;
        }
        .slider3 {
            width: 100% !important;
            margin: 10px auto !important;
        }
        .buttons-ctrl-box {
            float: left;
            height: auto !important;
            position: relative;
            left: 50%;
            transform: translate(-50%, 15%);
        }
        .slick-dots {
            bottom: 0px !important;
        }
        .bgimg-history-title {
            font-size: 24px;
        }
        .bgimg-history {
            font-size: 18px;
        }
        .article-w-page {
            padding: 0 15%;
        }
        .diary-image {
            padding: 0;
        }
        .m-hide {
            display: none;
        }
         .compasCTR {
            display: none;
            visibility: hidden;
        }
        .search-size-m {
            width:  600px;
         }
         .map_filter {
            width: 380px;
        }

}

@media only screen 
    and (min-width : 375px) 
    and (max-width : 667px) 
    and (orientation : landscape) {
        /* iPhone 6, 7, & 8 in landscape */
        /* add story block */
        .voyge-size, .album-size, .maps-size {
            width:  540px;
            height: 300px;
        }
        .maps-scroll-y {
            height: 270px;
        }
        .odessa-title {
            width: 100%;
            display: block;
            margin-top: 5px;
            margin-left: 0px;
            font-size: 15px;
            text-align: center;
        }
        .bgimg-history-title {
            font-size: 24px;
        
        }   
        .bgimg-history {
            font-size: 18px;
        }
        .article-w-page {
            padding: 0 15%;
        }
        .diary-image {
            padding: 0;
        }
        .m-hide {
            display: none;
        }
         .compasCTR {
            display: none;
            visibility: hidden;
        }
        .search-size-m {
            width:  600px;
         }

}

@media only screen 
    and (min-width : 375px) 
    and (max-width : 667px) 
    and (orientation : portrait) {
        /* iPhone 6, 7, & 8 in portrait */
        .map_filter {
            width: 310px;
        }
}

@media only screen 
    and (min-width : 360px) 
    and (max-width : 640px) 
    and (orientation : portrait) {
        /* iPhone 6, 7, & 8 in portrait */
        .map_filter {
            width: 360px;
        }
}

@media only screen 
    and (min-width : 414px) 
    and (max-width : 736px) {
        /* iPhone 6, 7, & 8 Plus in portrait & landscape*/
        .md-sc-ipad-p-l {
            width: 300px;
        }
        .odessa-title {
            width: 100%;
            display: block;
            margin-top: 5px;
            margin-left: 0px;
            font-size: 15px;
            text-align: center;
        }
        .bgimg-history-title {
            font-size: 24px;
        }
        .bgimg-history {
            font-size: 18px;
        }
        .article-w-page {
            padding: 0 15%;
        }
        .diary-image {
            padding: 0;
        }
        .m-hide {
            display: none;
        }
        .compasCTR {
            display: none;
            visibility: hidden;
        }
        .search-size-m {
            width:  600px;
         }
}

@media only screen 
    and (min-width : 414px) 
    and (max-width : 736px) 
    and (orientation : landscape) {
        /* iPhone 6, 7, & 8 Plus in landscape */
        .md-sc-ipad-p-l {
            width: 600px;
        }

        .odessa-title {
            width: 100%;
            display: block;
            margin-top: 5px;
            margin-left: 0px;
            font-size: 15px;
            text-align: center;
        }
        .bgimg-history-title {
            font-size: 24px;       
        }       
        .bgimg-history {
            font-size: 18px;
        }
        .article-w-page {
            padding: 0 15%;
        }
        .diary-image {
            padding: 0;
        }
        .m-hide {
            display: none;
        }
        .search-size-m {
            width:  600px;
         }
}

@media only screen 
    and (min-width : 414px) 
    and (max-width : 736px) 
    and (orientation : portrait) {
        /* iPhone 6, 7, & 8 Plus in portrait */

        .odessa-title {
            width: 100%;
            display: block;
            margin-top: 5px;
            margin-left: 0px;
            font-size: 15px;
            text-align: center;
        }
        .bgimg-history-title {
            font-size: 24px;        
        }
        .bgimg-history {
            font-size: 18px;
        }
         .article-w-page {
            padding: 0 15%;
        }
        .diary-image {
            padding: 0;
        }
        .m-hide {
            display: none;
        }
         .compasCTR {
            display: none;
            visibility: hidden;
        }
}

@media only screen 
    and (min-width : 320px) 
    and (max-width : 568px) {
        /* iPhone 5 & 5S in portrait & landscape */

}

@media only screen 
    and (min-width : 320px) 
    and (max-width : 568px) 
    and (orientation : landscape) {
        /* iPhone 5 & 5S in landscape */

}

@media only screen 
    and (min-width : 320px) 
    and (max-width : 568px) 
    and (orientation : portrait) {
        /* iPhone 5 & 5S in portrait */
        .odessa-title {
            width: 100%;
            display: block;
            margin-top: 5px;
            margin-left: 0px;
            font-size: 15px;
            text-align: center;
        }
        .bgimg-history-title {
            font-size: 20px;
        }
        .bgimg-history {
            font-size: 16px;
        }
         .article-w-page {
            padding: 0;
        }
        .diary-image {
            padding: 0;
        }

        .m-hide {
            display: none;
        }
         .compasCTR {
            display: none;
            visibility: hidden;
        }

}

@media only screen 
    and (min-width : 320px) 
    and (max-width : 480px) {
        /* iPhone 2G-4S in portrait & landscape */

}

@media only screen 
    and (min-width : 320px) 
    and (max-width : 480px) 
    and (orientation : landscape) {
        /* iPhone 2G-4S in landscape */
}

@media only screen 
    and (min-width : 320px) 
    and (max-width : 480px) 
    and (orientation : portrait) {
        /* iPhone 2G-4S in portrait */
        .md-sc-ipad-p-l {
            width: 300px;
        }

        .odessa-title {
            width: 100%;
            display: block;
            margin-top: 5px;
            margin-left: 0px;
            font-size: 15px;
            text-align: center;
        }

       
        .edsAccordion_content {
          margin-bottom: 10px;
        }

        .info-btn-left-menu {
            display: block;
        }
        .item-block-header {
            font-size: 22px;
            padding: 0;
            margin-top: 15px;
        }

        .item-block-box {
            width: 314px;
            height: auto;
        }

        .item-block-img {
            padding: 0 25px;
        }

        .box-soon-text {
            padding: 0px;
            font-size: 30px;
        }
        .battons-on-slider {
            width: 100%;
            margin: 10px 0 10px 0;
        }
        .bgimg-history-title {
            font-size: 20px;
        }
        .bgimg-history {
            font-size: 16px;
        }
         .article-w-page {
            padding: 0;
        }
        .diary-image {
            padding: 0;
        }

        .m-hide {
            display: none;
        }
        .search-size {
            width:  300px;
         }

         .search-size-m {
            width:  300px;
         }
         .compasCTR {
             display: none;
             visibility: hidden;
         }
         .map_filter {
            width: 310px;
        }
}

/* Google Maps inc Labels - google*/

.gm-style-cc {
    /*display: none !important;*/
    opacity: 1.4;
    z-index: 1;
    opacity: .5;

}

.pac-container, .pac-logo {
    z-index: 1000 !important;
}

.allTime-box {
    float: left;
    height: calc(100vh - 160px);
    width:  82440px; 
    background-image: url("/Portals/0/Images/weather-back.png");
    background-repeat: repeat;
    overflow: hidden;
}

.year-box {
    display: inline;
    width: 360px;
    height: 100%;
}

.year-item-line {
    float: left;
    width: 360px;
    height: 40px;
    text-align: center;
    vertical-align: top;
    background-color: #a3a3a3;
}


.macro {
    float: left;
    position: absolute;
}

.year-item-cloud {
    float: left;
    position: absolute;
    bottom: 0px;
    border-left: 1px dashed #9c8860;
}

.year-item-block {
    float: left;
    position: absolute;
    height: 50px;
    width: 100%;
    left: -1px;
}

.year-item-block-img {
    float: left;
    position: absolute;
    height: 50px;
    width: 50px;
    overflow: hidden;
    border-left: 1px solid #9c8860;
    border-top: 1px solid #9c8860;
    border-bottom: 1px solid #9c8860;
}

.year-item-block-txt {
    float: left;
    margin-left: 50px;
    position: absolute;
    height: 50px;
    background-color: #9c8860;
    overflow: hidden;
    padding: 10px;
    line-height: 1.1;
    font-size: 12px;
}

.year-item-block-tail {
    float: left;
    position: relative;
    height: 50px;
    background-color: rgba(156, 136, 96, 0.3);
}

.year-item-dot {
    float: left;
    position: absolute;
    left: 0;
    bottom: 0;
    margin-left: -5px;
    margin-bottom: 0px;
    z-index: 1;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: #ff6763;
    border: 2px solid #FFF;
}

.year-item-corner {
    float: right;
    right: 1px;
    position: absolute;
    height: 10px;
    width: 10px;
    z-index: 2;
    top: 50px;
    background-image: url("/Portals/0/Images/end-line.png");
    background-repeat: no-repeat;
}

/* periods bar */

.progress {
    display: block;
    margin-bottom: 1px;
    height: 10px;
    padding: 0 20px;
    margin: 0 0 5px 0;
    background: white;
  }
  
  .scrollmenu-item-ruler-line {
    display: block;
    margin-top: calc(100vh - 180px);
    height: 22px;
    background-image: url("/Portals/0/Images/ruller-names.png");
    background-repeat: repeat-x;
    opacity: 0.8;
    margin-bottom: 0px;
    z-index: 1;
    border: 0px solid red;
}

  .demo-x2 {
    background: white;
    color: #f1f1f1;
    padding: 10px 10px;
}

#screen-big {
    background: white;
    color: #f1f1f1;
}

.controls {
    border: 1px solid #9c8860;   
}

/* PASPORT MAP MENU */

.sidenavPassport, 
.sidenavPassport2 {
    width: 0; /* 0 width - change this with JavaScript */
    position: absolute;   /* Stay in place */
    z-index: 1; /* Stay on top */
    /*top: 0;  
    left: 0;*/
    background-color: #FFFFFF; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 0px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
  }
  
  /* The navigation menu links */
  .sidenavPassport a, 
  .sidenavPassport2 a {
    /*padding: 8px 8px 8px 32px;*/
    text-decoration: none;
    font-size: 20px;
    color: #333;
    display: block;
    transition: 0.3s;
  }
  
  /* When you mouse over the navigation links, change their color */
  .sidenavPassport a:hover, 
  .sidenavPassport2 a:hover {
    color: #ff6763;
  }
  
  /* Position and style the close button (top right corner) */
  .sidenavPassport .closebtn, 
  .sidenavPassport2 .closebtn {
    position: absolute;
    top: -15px;
    right: 5px;
    font-size: 30px;
    margin-left: 50px;
    z-index: 5;
  }
  
  /* Style page content - use this if you want to push the page content to the right when you open the side navigation */
  #main-pasport {
    transition: margin-left .5s;
    padding: 0px;
    overflow: hidden;
  }
  
#SplitDiv {
   /* transition: margin-left .5s;*/
    transition:  0.5s;
    padding: 0px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('/maps/images/Warning.jpg');
  }


  /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
  @media screen and (max-height: 500px) {
    .sidenavPassport {padding-top: 15px;}
    .sidenavPassport a {font-size: 18px;}
    .sidenavPassport2 {padding-top: 15px;}
    .sidenavPassport2 a {font-size: 18px;}
  }


  .btn-cmnt-voyages {
    float: left;
    height: 20px;
    width:  103px; 
    background-image: url("/maps/js/img/cmntOthrVygs.png");
    background-repeat: no-repeat;
    margin: 10px 5px 0 0;
    opacity: 0.8;
  }

  .btn-cmnt-fullScr {
    float: left;
    height: 24px;
    width:  103px; 
    background-image: url("/maps/js/img/cmntFullScr.png");
    background-repeat: no-repeat;
    margin: 8px 0 0 5px;
    opacity: 0.8;
  }

  .btn-cmnt-oldMaps {
    float: left;
    height: 20px;
    width:  103px; 
    background-image: url("/maps/js/img/cmntOthrOldMaps.png");
    background-repeat: no-repeat;
    margin: 10px 5px 0 0;
    opacity: 0.8;
  }

  .btn-cmnt-Filter {
    float: left;
    height: 20px;
    width:  110px; 
    background-image: url("/maps/js/img/cmntFilter.png");
    background-repeat: no-repeat;
    margin: 10px 5px 0 0;
    opacity: 0.8;
  }

  .btn-cmnt-Filter-diary {
    float: left;
    height: 20px;
    width:  110px; 
    background-image: url("/maps/js/img/cmntFilter-diary.png");
    background-repeat: no-repeat;
    margin: 10px 5px 0 0;
    opacity: 0.8;
  }

  .btn-cmnt-chapters {
    float: left;
    height: 20px;
    width:  110px; 
    background-image: url("/maps/js/img/chapters.png");
    background-repeat: no-repeat;
    margin: 10px 5px 0 0;
    opacity: 0.8;
  }


/* GERB */

.pretime {
    display: block;
    height: 22px;
    width: 22px;
    background-image: url("/Maps/Images/pre.png");
    background-repeat: no-repeat;
    padding: 0;
    margin: 0;
}

.Ru-Empire {
    float: left;
    height: 22px;
    width: 22px;
    background-image: url("/Maps/Images/Ru-Empire.png");
    background-repeat: no-repeat;
    padding: 0;
    margin: 0;
}

.USSR-Empire {
    display: block;
    height: 22px;
    width: 22px;
    background-image: url("/Maps/Images/USSR-Empire.png");
    background-repeat: no-repeat;
    padding: 0;
    margin: 0;
}

.UA {
    display: block;
    height: 22px;
    width: 22px;
    background-image: url("/Maps/Images/UA.png");
    background-repeat: no-repeat;
    padding: 0;
    margin: 0;
}

/* help icons */

.helpIcons {
    float: left;
    height: 25px;
    width: 35px;
    background-repeat: no-repeat;
    padding: 0;
    margin: 0;
}

.help360 {
    background-image: url("/Maps/Images/help360.png");
}

.helpUA {
    background-image: url("/Maps/Images/helpUA.png");
}

.helpUSSR {
    background-image: url("/Maps/Images/helpUSSR.png");
}

.helpRU {
    background-image: url("/Maps/Images/helpRU.png");
}

.helpPuzzle {
    background-image: url("/Maps/Images/helpPuzzle.png");
}

/* article gallery */

.rowArt {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 0 56px 0 100px;

  }
  
  /* Create four equal columns that sits next to each other */
  .columnArt {
    -ms-flex: 24%; /* IE10 */
    flex: 24%;
    max-width: 24%;
    padding: 0 4px;
  }
  
  .columnArt img {
    margin-top: 8px;
    vertical-align: middle;
  }
  
  /* Responsive layout - makes a two column-layout instead of four columns */
  @media screen and (max-width: 1024px) {
    .rowArt {
        padding: 0 6px 0 10px;    
      }
  }

  @media screen and (max-width: 800px) {

    .rowArt {
        padding: 0 6px 0 10px;    
      }
    .columnArt {
      -ms-flex: 50%;
      flex: 50%;
      max-width: 50%;
    }
  }
  
  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
    .columnArt {
      -ms-flex: 100%;
      flex: 100%;
      max-width: 100%;
    }
  }

  #old-map { width: 100%; height: 100%;}

  

  .hintContent {
    font-size: 14px;
    line-height: 1.7;
    font-weight: 100;
  }

  .mrgnRight {
    margin-right: 5px;
  }

  .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
  }
  .addthis_button_linkedin_counter {
      display: none !important;
  }

  .addthis_counter {
      display: none !important;
  }

  .m-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .w-top {
    margin-top: 15px;
  }

  .w-top-mini {
    margin-top: 7px;
  }

  .b-top {
    top: 15px;
  }

  .b-top-mini {
    top: 7px;
  }

    .whatis {
    float: left;
    position: absolute;
    cursor: pointer;
    left: 50px;
    border-left: 1px solid #a5a5a5;
    padding-left: 15px;
    font-size: 20px;
    z-index: 0;
  }

  .whatis-m {
    float: left;
    position: absolute;
    cursor: pointer;
    top: 7px;
    left: 30px;
    /*border-left: 1px solid #a5a5a5;*/
    padding-left: 15px;
    font-size: 20px;
    z-index: 0;
  }

  .chapters {
    float: left;
    position: absolute;
    cursor: pointer;
    left: 100px;
    font-size: 20px;
    z-index: 0;
  }

  .chapters-timemashine {
    float: left;
    position: absolute;
    cursor: pointer;
    left: 50px;
    border-left: 1px solid #a5a5a5;
    padding-left: 15px;
    font-size: 20px;
    z-index: 0;
  }

  .chapters-mini {
    float: right;
    position: absolute;
    cursor: pointer;
    right: 60px;
    top: 0px;
    font-size: 0;
    z-index: 0;
    height: 0;
  }

  .zoom {
    float: left;
    position: absolute;
    cursor: pointer;
    left: 135px;
    font-size: 20px;
    z-index: 0;
  }


.whatis-f:focus {
    outline: none;
}

/* style="color: #ff6763; margin-left: 10px; cursor: pointer" */
.backarrow {
    color: #9c8860;
    margin-left: 3px;
    padding-bottom: 2px; 
    cursor: pointer;
    font-size: 17px;
}

.backarrow:hover {
    color: #ff6763;
    opacity: .8;
}

 .under {
     width: 100%;
     background-color: rgb(255, 208, 0);
     background-image: url("/Portals/0/images/bk-04.png");
     color: #000;
     text-align: center;
     font-size: 18px;
     padding: 10px 0 2px 0;
 }

 .menuImages {
     cursor:pointer;
     margin-bottom: 20px;
     width: 100%;
     max-width: 500px;
     height: auto;
 }


/*------------MarkerInfoList----------------*/
/*----- see h_style ------ */

#map-info-p{}
#map-info-img {
    display: block;
    max-width: 100% !important;
    height: auto;
    text-align: center;
}
.map-info-img {}
#map-info-title {
     color: #333;
     text-align: left;
     font-size: 18px;
     font-weight: bold;
 }
#map-info-desc{
    padding-bottom:20px; 
    color:#9c8860;
}

#voyage-info-p{}

.voyage-info-menu{}
#voyage-info-menu {}

#voyage-info-img {
    display: block;
    max-width: 100%;
    height: auto;
    text-align: center;
}
.voyage-info-img{}
#voyage-info-desc{
    padding-bottom:20px; 
    color:#9c8860;
}
.voyage-info-title {}
#voyage-info-title {
    color: #333;
    text-align: left;
    font-size: 18px;
}

.mini-down {
    font-size:22px;
    float: right;
    right: 5px;
    position: relative;
    bottom: 30px;

}

.mini-down-info {
    font-size:22px;
    float: right;
    right: 0px;
    position: relative;
    bottom: 32px;

}



/* breadcrumbs */

.breadcrumbOd {
    font-size: 14px;
    font-weight: 300;
    text-align: center;
    margin-top: 0px;
}

.breadcrumbOd-m{
    font-size: 16px;
    font-weight: 300;
    text-align: center;
    margin-top: 0px;
    line-height: 1.5;
    padding: 0 20px;
}

.breadLink {
    color: #000 !important;
}

.breadLink:hover {
    color: #ff6763 !important;
    text-decoration: underline;
}

.breadCrumbs {
    text-align: center;
}

.bredDev {
    opacity: .25;
    padding: 0 10px;
}

.caruselItem {
    cursor: pointer !important;
    opacity: 1;
    font-size: 20px;
    font-weight: 600;
}

.caruselItem:hover {
    opacity: 1;
}

/* Header Chapters Top Image */

.imgHolderInHeared {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.mainPage-back {
    background-image: url("/maps/images/mainBack.jpg");
    height: 140px !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    padding: 20px;
  }

.Line-back {
  background-image: url("/maps/images/LineBack.jpg");
}

.mainActionlLine-back {
    background-image: url("/maps/images/mainActionsBack.jpg");
  }

.FilmTape-back {
    background-image: url("/maps/images/KinoTabeBack.jpg");
  }

  .FilmLine-back {
    background-image: url("/maps/images/KinoLineBack.jpg");
  }

.positiveLine-back {
    background-image: url("/maps/images/PositiveBack.jpg");
  }

 .schoolLine-back {
    background-image: url("/maps/images/schoolBack.jpg");
  }

  .coolLine-back {
    background-image: url("/maps/images/coolBack.jpg");
  }
  .badLine-back {
    background-image: url("/maps/images/badBack.jpg");
  }


.may2-back {
    background-image: url("/portals/0/EasyGalleryImages/6/2-may/2mayback.jpg");
    height: 450px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }

.Diary-main-back {
    background-image: url("/maps/images/diary-main-back.jpg");
  }
  .ancient-back {
    background-image: url("/maps/images/ancientBack.jpg");
  }
  .cityLife-back {
    background-image: url("/maps/images/cityLifeBack.jpg");
  }
  .people-back {
    background-image: url("/maps/images/peopleBack.jpg");
  }
  .odessaView-back {
    background-image: url("/maps/images/odessaViewBack.jpg");
  }
  .kioodessa-back {
    background-image: url("/maps/images/kinoodessaBack.jpg");
  }
  .turismo-back {
    background-image: url("/maps/images/turismBack.jpg");
  }
  .nonturismo-back {
    background-image: url("/maps/images/nonturismBack.jpg");
  }
  .ahtung-back {
    background-image: url("/maps/images/ahtungBack.jpg");
  }
  .family-back {
    background-image: url("/maps/images/familyBack.jpg");
  }
  .trash-back {
    background-image: url("/maps/images/trashBack.jpg");
  }
  .Oldmaps-main-back {
    background-image: url("/maps/images/oldmaps-main-back.jpg");
  }

  .gallery-main-back {
    background-image: url("/maps/images/gallery-main-back.jpg");
  }

  .voyage-main-back {
    background-image: url("/maps/images/voyage-main-back.jpg");
  }

  .movies-main-back {
    background-image: url("/maps/images/movies-main-back.jpg");
  }

  .timemachine-main-back {
    background-image: url("/maps/images/timemachine-main-back.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }


    .timemachine-overlay {
    float: left;
    position: absolute;
    background-image: url("/Portals/0/images/bk-02.png");
    height: 400px;
    width: 100%;
    top: 0;
    left: 0;
    }

    .timemachine-page-back {
        background-image: url("/maps/images/timemachine-main-back.jpg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
    }
    
    .timemachine-page-overlay {
    float: left;
    position: absolute;
    background-image: url("/Portals/0/images/bk-02.png");
    width: 100%;
    top: 0;
    left: 0;
    }

.Catalog-back {
    background-image: url("/maps/images/infrastructure.jpg");
  }

  .first-article-back {
    background-image: url("/maps/images/first-article.jpg");
    height: 500px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }

  .first-article-overlay {
    float: left;
    position: absolute;
    background-image: url("/Portals/0/images/bk-04.png");
    height: 500px;
    width: 100%;
    top: 0;
    left: 0;
}

.first-article-back-m {
    /*background-image: url("/maps/images/first-article.jpg");
    height: 400px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;*/
  }

  .first-article-overlay-m {
    /*float: left;
    position: absolute;
    background-image: url("/maps/images/timemachine-main-back.jpg");
    height: 400px;
    width: 100%;
    top: 0;
    left: 0;*/
}

  .catalog-overlay {
    float: left;
    position: absolute;
    background-image: url("/Portals/0/images/bk-02.png");
    width: 100%;
    top: 0;
    left: 0;
}

.infostat-overlay {
    float: left;
    position: absolute;
    /*background-image: url("/Portals/0/images/bk-05.png");*/
    width: 100%;
    top: 0;
    left: 0;
}


.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  width: 300px;
  margin-top: 10px;
}

.hero-text-info {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    margin-top: 20px;
  }

.hero-text button {
    border: none;
    outline: 0;
    display: inline-block;
    padding: 10px 25px;
    color: black;
    background-color: #fff;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    margin: 0 10px;
}

.hero-text button:hover {
    background-color: #ff6763;
    color: white;
}

.hero-text-info button {
    border: none;
    outline: 0;
    display: inline-block;
    padding: 10px 25px;
    color: black;
    background-color: #fff;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
  }
  
  .hero-text-info button:hover {
    background-color: #ff6763;
    color: white;
  }

.edncf_TimeMachine {
    display: none !important;
}

.LineBox
{
    float: left;
    display: block !important;
}

.eds_news_Triumph.eds_style_custom_sgwvx4haphx.eds_subCollection_news.eds_templateGroup_listArticleInBox .EDN_article.LineBox
{
	background-image: none;
    background-color: #FFF;
    border: 0px solid red;
    width: 300px;
    padding: 5px 1px 1px 1px !important;
    float: left;
    height: 100%;
}

.Timeline-subtitle {
    font-size: 14px;
    color: #ff6763 !important;
}

.lineArrow {
    float: right;
    position: relative;
    margin-top: 6px;
}

.artMarker {
    margin-left: 48.5%;
}

.quoteOd {
    padding: 10px;
    color: #ff6763;
    font-weight: 400;
}

/* slider */

.slideshow-container .mySlides {display: none; }
.slideshow-container img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
    max-width: 770px;
    position: relative;
    margin: auto;
  }
  
  /* Next & previous buttons */
 .slideshow-container .prev, .slideshow-container .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
  }
  
  /* Position the "next button" to the right */
 .slideshow-container .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }
  
  /* On hover, add a black background color with a little bit see-through */
 .slideshow-container .prev:hover,.slideshow-container .next:hover {
    background-color: rgba(255,255,255,0.8);
    text-decoration: none !important;
  }
  
  /* Caption text */
 .slideshow-container .text {
    color: #f2f2f2;
    padding: 16px 0px;
    position: absolute;
    bottom: 0px;
    width: 100%;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.288);
  }
  
  /* Number text (1/3 etc) */
 .slideshow-container .numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
    z-index: 1;
  }

 .slideshow-dots  {
      margin: 10px 0;
  }
  
  

  /* The dots/bullets/indicators */
 .slideshow-dots .dot {
    cursor: pointer;
    height: 10px;
    width: 10px;
    margin: 0 5px;
    background-color: #FFF;
    border: 1px solid #ff6763;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }
  
 .slideshow-dots .dot.active, .slideshow-dots .dot:hover {
    background-color: #ff6763;
    border: 1px solid #ff6763;
  }
  
  /* Fading animation */
 .slideshow-container .imagefade {
    -webkit-animation-name: imagefade;
    -webkit-animation-duration: 1.5s;
    animation-name: imagefade;
    animation-duration: 1.5s;
  }
  
  @-webkit-keyframes imagefade {
    from {opacity: .4} 
    to {opacity: 1}
  }
  
  @keyframes imagefade {
    from {opacity: .4} 
    to {opacity: 1}
  }
  
  /* On smaller screens, decrease text size */
  @media only screen and (max-width: 300px) {
   .slideshow-container .prev, .slideshow-container .next,.slideshow-container .text {font-size: 11px}
  }


  .EDN_simpleRating {
    font-size: 0;
    float: right;
    position: relative;
    top: 3px;
  }

    .current_rating {
    font-size: 0;
  }

  .eds_news_Triumph.eds_subCollection_news .EDN_article .EDN_meta-tags-od .EDN_rating .article_rating, .eds_news_Triumph.eds_subCollection_news .EDN_article .EDN_meta-tags-od .EDN_rating.rating {
    /*display: inline-block;*/
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 80px;
    margin-bottom: 15px;
  }


    .b-redline {
        display: block;
   }

   .simpleArTitle {
    font-size: 20px;
    color: #222 !important;
    display: none;
   }

   .simpleDate {
       color: #ff6763;
       margin-top: 0;
       font-size: 14px;
   }


   .datanow {
    list-style-type: none;
    text-align: center;
    margin: 0;
    padding: 0;
  }
  
  .datanow li {
    display: inline-block;
    font-size: 11px;
    padding: 5px;
    margin-top: 5px;
    color: #222;
  }


  .closeFilter {
      float: right;
      top: 0;
      right: 0;
      font-size: 30px;
      padding: 10px 20px;
  }

  .headIcon {
      margin-bottom: 5px;
  }

  .hideIcons {
    background-image: url("/portals/0/images/marker-off.png");
    width: 20px;
    height: 20px;
    margin-left: 2px;
  }

  .showIcons {
    background-image: url("/portals/0/images/marker-on.png");
    width: 20px;
    height: 20px;
    margin-left: 2px;
  }

  .headIconGerb {
      float: right;
      position: relative;
      left: 0;
      padding: 4px;
      top: 0px;
      border: 1px solid blacj;
}

.token_wrapper {
    display: none !important;
    visibility: hidden !important;
}

.pull-right {
    margin-right: 10px;
}

/* 1500 */
@media only screen 
and (min-width : 1px) 
and (max-width : 1500px){
}

/* 1024 */
@media only screen 
and (min-width : 1px) 
and (max-width : 1024px){

}

/* 812 */
@media only screen 
and (min-width : 1px) 
and (max-width : 812px){
    .item-green-block-box {
        width: 500px;
    }

}

/* 500 */
@media only screen 
and (min-width : 1px) 
and (max-width : 500px){
    .eds_news_Ozone.eds_subCollection_search .edncf_AdvancedSearch .edncf_container .edncf_RangeSliderInput .irs {
        top: 5px;
    }
    .eds_news_Ozone.eds_subCollection_search .edncf_AdvancedSearch .edncf_container > span {
        padding: 0 !important;
        /*margin: 5px 0 !important;*/
    }
    .article-border-null {
        padding: 10px 10px 5px 10px;
    }
    .item-green-block-box {
        width: 300px;
        margin: 40px 0px;
    }
}

.ComposeMessage, .userMessages {
    display: none !important;
}


/*esponsive Iframe*/

.storyBox {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-top: 100%; /* 1:1 Aspect Ratio */
  }
  
  .storyInside {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: none;
  }

  .pageImg1 {
      display: none;
  }


  .contentA {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
  }