:root {
/*    --cassiopeia-color-primary: #00ff00;
    --cassiopeia-color-link: #0000ff;
    --cassiopeia-color-hover: #ff0000;
*/
    --body-color: hsl(206deg 100% 25%);
    --link-color: hsl(206deg 100% 50%);

/*
    --cassiopeia-font-family-body: "Roboto", sans-serif;
    --cassiopeia-font-family-headings: "Roboto", sans-serif;
    --cassiopeia-font-weight-headings: 700;
    --cassiopeia-font-weight-normal: 400;
*/
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    text-shadow: 1px 2px 3px white;
}

h2, .h2 {
    font-size: calc(2rem + .9vw);
}

body {
    background-image: linear-gradient(to right, rgba(255,255,255, 0.4) 0 100%), url(/images/ttpg/GasAndOil_08_03.jpg);
    background-attachment: fixed;
}

header, .header {
    box-shadow: 1px 1px 6px #026da4f5;
    background-color: hsl(206deg 90% 95% / 50%);
}

.container-header {
    background-color: unset;
    background-image: unset;
}

.container-header .mod-menu {
    color: hsl(206deg 100% 25%);
}

.menu {
    width: 100%;
}

.container-header .navbar-toggler {
    color: #000;
    border: 1px solid #555;
}

.p-2 {
    padding: 0!important;
    padding-right: 0.5rem!important;
    vertical-align: middle;
}

.container-header .mod-menu {
    justify-content: space-around;
}

.container-header .navbar-brand {
    width:  100%;
/*    padding-bottom: 1em; */
}

.container-header .navbar-brand > a > img {
    width:  33%;
}

.container-header .container-nav {
    padding-top: 1em;
}

.container-header .site-description {
    max-width: 50%;
    /*font-size: 1em;*/
    font-size: 3vw;
    line-height: normal;
    text-overflow: ellipsis;
    bottom: 0;
    right: 0;
    position: absolute;
    text-align: right;
    text-align: -webkit-right;
    color: hsl(206deg 100% 25%);
    text-shadow: 1px 2px 3px white;
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
}

@media (width > 991.98px) {
    .container-header .site-description {
	font-size: 1em;
        top: 0;
    }
}

div.mod-languages ul li.lang-active {
    background-color: unset;
}

.newsflash-title {
    text-align: center;
    line-height: 2em;
    color: white; /*azure;*/
    font-size: x-large;
    text-shadow: 2px 2px 3px hsl(206deg 100% 25%);
}

@media (width > 991.98px) {
.newsflash-title {
    line-height: 2em;
    font-size: xxx-large;
    }
}

@supports (display:grid) {
    .mod-articlesnews-horizontal {
    font-size: x-large;
    text-shadow: 2px 2px 3px white;
}
}

.no-card .newsflash-horiz li {
    box-shadow: 1px 1px 6px #026da4f5;
    transition: 2s;
    /*background-color: hsl(206deg 50% 100% / 20%);*/
    background-color: hsl(206deg 90% 95% / 50%);
}

.no-card .newsflash-horiz li:hover {
    transform: scale(1.01);
}

.mod-articlesnews-horizontal figure img {
    opacity: 100%;
}

ul.mod-articlesnews-horizontal > li {
/*
    padding-top: 1em;
    color: red;
*/
}

.tracking-in-expand {
    -webkit-animation: tracking-in-expand 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) 200ms both;
            animation: tracking-in-expand 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) 200ms both;
}

@-webkit-keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

.text-focus-in {
    -webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 200ms both;
            animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 200ms both;
}

@-webkit-keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}

.slide-in-fwd-left {
    -webkit-animation: slide-in-fwd-left 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) 200ms both;
            animation: slide-in-fwd-left 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) 200ms both;
}

@-webkit-keyframes slide-in-fwd-left {
  0% {
    -webkit-transform: translateZ(-1400px) translateX(-1000px);
            transform: translateZ(-1400px) translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0) translateX(0);
            transform: translateZ(0) translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-fwd-left {
  0% {
    -webkit-transform: translateZ(-1400px) translateX(-1000px);
            transform: translateZ(-1400px) translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0) translateX(0);
            transform: translateZ(0) translateX(0);
    opacity: 1;
  }
}

.slide-in-fwd-right {
    -webkit-animation: slide-in-fwd-right 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) 200ms both;
            animation: slide-in-fwd-right 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) 200ms both;
}

@-webkit-keyframes slide-in-fwd-right {
  0% {
    -webkit-transform: translateZ(-1400px) translateX(1000px);
            transform: translateZ(-1400px) translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0) translateX(0);
            transform: translateZ(0) translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-fwd-right {
  0% {
    -webkit-transform: translateZ(-1400px) translateX(1000px);
            transform: translateZ(-1400px) translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0) translateX(0);
            transform: translateZ(0) translateX(0);
    opacity: 1;
  }
}

.fade-in {
    -webkit-animation: fade-in 1.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) 200ms both;
            animation: fade-in 1.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) 200ms both;
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.reveal {
  opacity: 0;
/*  display: none; */
}

.reveal.active {
  opacity: 1;
/*  display: unset; */
}

.container-bottom-b, .bottom-b.card
{
    color: white;
    background-color: hsl(206deg 100% 10%);
    border: 0;
}

.container-bottom-b
{
    box-shadow: 1px 1px 6px hsl(206deg 70% 10% / 100%);
}

.NOTcontactsru::before {
    content: '';
    display: inline-block;
    background-image: url(/images/ttpg/cities/spb_01_t.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    position: relative;
    top: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    opacity: 0.5;
}

.contactsru {
    background-image: url(/images/ttpg/cities/spb_01_t_50.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right bottom;
}

.contactstr {
    background-image: url(/images/ttpg/cities/st_01_t_50.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right bottom;
}

.testonly {
    background-image: linear-gradient(to left, hsl(206deg 40% 80% / 30%), hsl(206deg 40% 80% / 80%)), url(/images/ttpg/cities/spb_01_t.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    background-color: hsl(206deg 20% 80% / 50%);
}

.container-header .navbar-collapse.show {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}