@import url('https://fonts.googleapis.com/css2?family=Roboto%20Condensed:ital,wght@0,300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto%20Condensed:ital,wght@0,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto%20Condensed:ital,wght@0,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto%20Condensed:ital,wght@0,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto%20Condensed:ital,wght@1,300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto%20Condensed:ital,wght@1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto%20Condensed:ital,wght@1,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');
html {
font-family: 'Roboto Condensed', sans-serif;
}
body {
margin: 0;
font: 13px / 1.231 'Roboto Condensed', sans-serif;
background: url(../img/body-bg.jpg);
}
/*html, body {*/
/*display: flex;*/
/* flex-direction: column;*/
/* height: 100%;*/
/*width: 100%;*/
/*}*/
/*.dialog-off-canvas-main-canvas {*/
/* display: flex;*/
/* flex-direction: column;*/
/* height: 100%;*/
/*}*/
h1,h2,h3,h4,h5,h6,.site-name a {
font-family: 'Oswald',sans-serif;
overflow-wrap: anywhere;
word-wrap: break-word;
font-weight: bold;
margin: 1rem 0;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.17em;
}
a {
color: #3b5998;
text-decoration: underline;
}
a:hover {
color: #3B59F2;
}
img {
display: block;
height: auto;
}
[class*="body"] p {
margin: 1rem 0;
}
[class*="body"] p:first-child {
margin-top: 0;
}
.panel {
position: sticky;
top: 0;
z-index: 1;
}
.region-topbar {
background: #3A3A3A;
height: 30px;
line-height: 30px;
}
.region-navbar {
height: 64px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
background: #3b5998;
}
#block-lang ul.links {
height: 30px;
width: 25px;
list-style: none;
margin: 0;
padding: 0;
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
}
#block-lang ul.links li {
padding: 5px 10px;
z-index: 2;
}
.block-language ul.links li a {
display: flex;
align-content: center;
align-items: center;
text-decoration: none;
/* font-size: 0; */
}
.dictionary-lang.block-language ul.links li a {
font-size: 0;
}
#block-lang ul.links li.is-active {
padding: 0;
order: -1;
}
#block-lang ul.links li a.is-active {
pointer-events: none;
font-size: 0;
}
#block-lang ul.links li:not(.is-active) {
float: none;
width: 130px;
display: none;
background: #ddd;
line-height: 1.3;
}
#block-lang ul.links li:not(.is-active):hover,
#block-lang ul.links li.selected:not(.is-active) {
background: #09f;
}
#block-lang li.is-active {
cursor: pointer;
}
a#submit {
z-index: 1;
}
.block-language .links li a::before {
content: "";
height: 23px;
width: 25px;
display: block;
flex: 0 0 auto;
margin-right: 10px;
}
.block-language .links li[hreflang=uk] a::before {
background: url(https://files.ar25.org/sites/all/themes/observer/images/sprite_lang.png) no-repeat scroll 0 0 transparent;
margin-top: 2px;
transform: rotate(-180deg);
}
.block-language .links li[hreflang=pt] a::before {
background: url(https://files.ar25.org/sites/all/themes/observer/images/sprite_lang.png) no-repeat scroll -225px 0 transparent;
}
.block-language .links li[hreflang=pl] a::before {
background: url(https://files.ar25.org/sites/all/themes/observer/images/sprite_lang.png) no-repeat scroll -200px 0 transparent;
}
.block-language .links li[hreflang=lt] a::before {
background: url(https://files.ar25.org/sites/all/themes/observer/images/sprite_lang.png) no-repeat scroll -175px 0 transparent;
}
.block-language .links li[hreflang=de] a::before {
background: url(https://files.ar25.org/sites/all/themes/observer/images/sprite_lang.png) no-repeat scroll -100px 0 transparent;
}
.block-language .links li[hreflang=ru] a::before {
background: url(https://files.ar25.org/sites/all/themes/observer/images/sprite_lang.png) no-repeat scroll -75px 0 transparent;
}
.block-language .links li[hreflang=en] a::before {
background: url(https://files.ar25.org/sites/all/themes/observer/images/sprite_lang.png) no-repeat scroll -50px 0 transparent;
}
.block-language .links li[hreflang=fr] a::before {
background: url(https://files.ar25.org/sites/all/themes/observer/images/sprite_lang.png) no-repeat scroll -25px 0 transparent;
}
.block-language .links li[hreflang=it] a::before {
background: url(https://files.ar25.org/sites/all/themes/observer/svg/italy.svg) no-repeat center;
background-size: contain;
}
.region-navbar,
.region-topbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 1rem;
gap: 1rem;
}
.block-privatemsg {
margin-left: auto;
}
.block-privatemsg .privatemsg-links {
display: flex;
align-items: center;
height: 30px;
gap: 0.5rem;
}
.block-privatemsg .privatemsg-links li {
display: flex;
align-items: center;
}
.block-privatemsg .privatemsg-links a {
display: inline-block;
width: 20px;
height: 20px;
background-size: contain;
background-position: center;
background-image: url('data:image/svg+xml,');
}
.block-privatemsg .privatemsg-links strong {
color: orange;
}
.block-privatemsg .privatemsg-links .privatemsg-block-new-messages-count {
position: relative;
background-image: url('data:image/svg+xml,');
}
.block-privatemsg .privatemsg-links .privatemsg-block-add-messages {
background-image: url('data:image/svg+xml,');
}
.block-privatemsg .privatemsg-links .privatemsg-block-new-messages-count span {
color: orange;
position: absolute;
left: 4px;
top: 2px;
background: #3A3A3A;
display: flex;
height: 12px;
width: 12px;
justify-content: center;
align-items: center;
animation: textColorChange 2s infinite alternate;
}
@keyframes textColorChange {
0% {
color: orange;
}
100% {
color: white;
}
}
#block-user-menu .menu {
margin: 0;
text-align: right;
display: flex
;
justify-content: flex-end;
}
#block-user-menu .menu li {
list-style: none !important;
padding: 0;
margin: 0 5px;
position: relative;
}
#block-user-menu .menu a {
color: white;
text-decoration: none;
}
#block-user-menu .menu a:hover {
color: orange;
}
.site-logo,
.site-logo:hover {
color: #f6fa9b;
line-height: 64px;
font-size: 34px;
text-decoration: navajowhite;
font-family: 'Oswald', sans-serif;
}
.group-icons:hover {
background-color: #f4f4f4;
}
#block-header-social .block-content {
display: flex;
align-items: center;
}
.field-name-ds-share a,
#block-header-social .block-content a {
background-repeat: no-repeat;
display: block;
overflow: hidden;
height: 32px;
line-height: 32px;
padding: 0;
margin: 0 4px;
width: 32px;
border-radius: 4px;
cursor: pointer;
}
#block-header-social .block-content a {
height: 25px;
line-height: 25px;
width: 25px;
}
.field-name-ds-share a svg,
#block-header-social .block-content a svg {
background-repeat: no-repeat;
background-position: 50% 50%;
border: none;
display: block;
left: 0;
margin: 0 auto;
overflow: hidden;
padding: 0;
position: relative;
top: 0;
width: auto;
height: auto;
}
.field-name-ds-share .button_subscribe,
#block-header-social .block-content .button_subscribe {
background-color: rgb(1,102,255);
}
.field-name-ds-share .button_fb,
#block-header-social .block-content .button_fb {
background-color: #3b5998;
}
.field-name-ds-share .button_tg,
#block-header-social .block-content .button_tg,
.field-name-ds-share .button_tw,
#block-header-social .block-content .button_tw {
background-color: #55acee;
}
#block-header-social .block-content .button_ut {
background-color: red;
}
#block-header-social .block-content .player_audio {
height: 23px;
width: 23px;
border: 1px solid white;
border-radius: 7px;
margin-left: 3px;
cursor: pointer;
background-repeat: no-repeat;
background-position: center;
background-size: 10px;
}
#block-header-social .block-content .fa-play {
background-image: url('data:image/svg+xml,');
}
#block-header-social .block-content .fa-pause {
background-image: url('data:image/svg+xml,');
}
/* menu icon */
.menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 0;
position: relative;
user-select: none;
display: block;
}
.menu-icon .navicon {
background: white;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 25px;
}
.menu-icon .navicon:before,
.menu-icon .navicon:after {
background: white;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.menu-icon .navicon:before {
top: 7px;
}
.menu-icon .navicon:after {
top: -7px;
}
/* menu btn */
.menu-btn {
display: none;
}
.menu-btn:checked ~ .menu {
max-height: 240px;
}
.menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
.menu-btn:checked ~ #block-main-menu {
display: block;
right: 0;
width: 200px;
}
#block-main-menu {
width: 0;
position: fixed;
top: 95px;
bottom: 0;
right: 0;
z-index: 1;
transition: width 0.5s;
height: auto;
overflow-x: hidden;
overflow-y: auto;
}
#block-main-menu ul.menu {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
list-style: none;
background: #3b5998;
}
#block-main-menu ul.menu li {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
position: relative;
}
#block-main-menu ul.menu a {
transition: background-color .3s;
font-size: 1rem;
color: #fff;
height: 64px;
display: flex;
align-items: center;
padding: 0 15px;
cursor: pointer;
text-decoration: none;
position: relative;
flex: 1 1 auto;
}
#block-main-menu ul.menu li:hover > a,
#block-main-menu ul.menu li.menu-item--active-trail > a {
background-color: #ea454b;
}
#block-main-menu ul.menu li::after {
content: "";
border-top: 1px dotted grey;
position: absolute;
top: 0;
right: 10px;
left: 10px;
}
#block-main-menu ul.menu li:first-child:after {
display: none;
}
.region-second-menu {
padding: 0;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
background: #3b5998;
position: sticky;
top: 0;
z-index: 1;
}
.region-second-menu .menu-icon {
display: none;
}
.region-second-menu .menu {
display: flex;
margin: 0;
padding: 0;
list-style: none;
/*flex-wrap: wrap;*/
overflow: auto;
}
.region-second-menu .menu li {}
.region-second-menu .menu a {
transition: background-color .3s;
font-size: 0.9rem;
color: #fff;
display: block;
padding: 0 15px;
cursor: pointer;
text-decoration: none;
height: 40px;
display: flex;
align-items: center;
text-align: center;
white-space: nowrap;
}
.region-second-menu .menu li a:hover,
.region-second-menu .menu li a.is-active {
background-color: #ea454b;
}
@media (min-width: 600px) {
.region-second-menu {
/*padding: 0;*/
}
}
@media (min-width: 890px) {
.region-second-menu {
padding: 0 calc((100% - 85%) / 2);
}
}
@media (min-width: 993px) {
.region-second-menu {
padding: 0 calc((100% - 70%) / 2);
}
}
.region-navbar,
.region-topbar {
padding: 0 1rem;
}
.main-content {
padding: 0 1rem;
margin: 1rem auto auto;
max-width: 1280px;
/*width: calc(100% - 2rem);*/
position: relative;
}
@media (min-width: 601px) {
.region-navbar,
.region-topbar {
padding: 0 calc((100% - 85%) / 2);
}
.main-content {
width:85%
}
}
@media (min-width: 993px) {
.menu-icon {
padding: 28px 20px;
}
.main-content {
width:70%
}
}
@media (min-width: 1040px) {
header {
background: url(../img/header.jpg) center;
height: 179px;
}
header a {
height: 179px;
display: block;
}
}
@media (min-width: 1400px) {
.region-navbar,
.region-topbar {
padding: 0 calc((100% - 70%) / 2);
}
.menu-icon {
display: none;
}
#block-main-menu {
position: static;
width: auto;
}
#block-main-menu ul.menu {
flex-direction: row;
}
#block-main-menu ul.menu li::after {
display: none;
}
}
.container .row {
margin-left: -0.75rem;
margin-right: -0.75rem
}
.cards > .view-content {
display: grid;
/*grid-template-columns: 1fr 2fr;*/
gap: 1.25rem;
}
@media only screen and (min-width: 800px) {
.col-2.cards > .view-content {
grid-template-columns: 1fr 1fr;
}
.col-3.cards > .view-content {
grid-template-columns: 1fr 1fr;
}
}
@media only screen and (min-width: 1450px) {
.col-3.cards > .view-content {
grid-template-columns: 1fr 1fr 1fr;
}
}
.node--type-blog.node--view-mode-teaser {
display: flex;
flex-direction: column;
position: relative;
}
.card {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .2);
/*margin-bottom: 20px;*/
background: #fff;
list-style: none;
padding: 0;
}
.node--type-blog.node--view-mode-teaser .field--name-field-img-teaser img {
width: 100%;
height: 230px;
display: block;
object-fit: cover;
}
.node--type-blog.node--view-mode-teaser .field--name-node-post-date {
position: absolute;
left: 0;
top: 0;
background: rgba(0, 0, 0, .5);
color: #fff;
padding: 5px;
width: 31px;
text-align: center;
}
.node--type-blog.node--view-mode-teaser .field--name-node-title {
padding: 15px 20px;
margin: 0;
line-height: 26px;
}
.node--type-blog.node--view-mode-teaser .field--name-node-title a {
font-weight: 400;
color: #3b5998;
font-size: 26px;
text-decoration: none;
font-family: 'Oswald', sans-serif;
}
.node--type-blog.node--view-mode-teaser .field--name-body {
color: #707070;
font-size: 16px;
padding: 0 20px 15px;
}
.node--type-blog.node--view-mode-teaser .footer-group {
border-top: 1px solid rgba(160, 160, 160, 0.2);
position: relative;
padding: 16px 24px;
margin-top: auto;
}
.node--type-blog.node--view-mode-teaser .field--name-dynamic-twig-fieldnode-ds-teaser-footer a {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 13px;
}
.node--type-blog.node--view-mode-teaser .field--name-dynamic-twig-fieldnode-ds-teaser-footer a:after {
content: "";
display: block;
width: 20px;
height: 16px;
background-image: url('data:image/svg+xml,');
}
.page-node-type-blog .region-content {
/*box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);*/
/*padding: 15px;*/
/*background: #fff;*/
}
.node--view-mode-full {
/*border-radius: 0 0 2px 2px;*/
/*background: white;*/
/*padding: 15px 26px;*/
/*color: #656565;*/
/*font-size: 15px;*/
/*line-height: 150%;*/
}
.full-post {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
margin-bottom: 20px;
background: white;
box-sizing: border-box;
padding: 1rem;
color: #656565;
font-size: 15px;
line-height: 150%;
}
.full-post .group-header {
/*border-bottom: 1px solid rgba(160, 160, 160, 0.2);*/
padding-bottom: 1rem;
margin-bottom: 1rem;
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr;
gap: 0.5rem 1rem;
grid-auto-flow: row;
grid-template-areas:
"image date"
"image name";
font-size: 15px;
position: relative;
}
.full-post .group-header:after {
content: "";
display: block;
position: absolute;
left: -1rem;
right: -1rem;
bottom: 0;
border-bottom: 1px solid rgba(160, 160, 160, 0.5);
}
.full-post .field--name-user { grid-area: image; }
.full-post .field--name-node-post-date { grid-area: date; }
.full-post .field--name-node-author { grid-area: name; }
.full-post .field--name-node-author.field a {
padding: 0;
}
.full-post .group-user {
margin-left: 1rem;
}
.full-post h1 {
line-height: 1.4;
color: black;
font-size: 2rem;
margin: 0.67em 0;
}
.full-post .field--name-display-field-copynode-ds-body-teaser {
padding: 15px;
margin: 20px 0;
border: dashed 1px #CCC;
font-weight: bold;
/* word-wrap: break-word; */
overflow-wrap: anywhere;
}
.full-post .field--name-display-field-copynode-ds-body-teaser p:last-child {
margin-bottom: 0;
}
.full-post .field--name-field-img-cover,
.full-post .field--name-field-img-teaser {
margin: 1rem 0;
}
.full-post .field--name-field-img-cover img,
.full-post .field--name-field-img-teaser img{
max-width: 100%;
margin: 0 auto;
}
/*.full-post .field__label,*/
/*.full-post .field-items {*/
/* float: none !important;*/
/* display: inline-block;*/
/*}*/
/*.full-post .field__label,*/
/*.full-post .label-above {*/
/* font-weight: bold;*/
/* font-size: 1.17rem;*/
/* font-family: 'Oswald', sans-serif;*/
/* margin-right: 0.5rem;*/
/*}*/
/*.full-post .field:not(.field--name-body,.field--name-field-tag) a {*/
/* padding: 0 0.5em;*/
/* font-size: 1.17rem;*/
/*}*/
.full-post .field--name-field-term-cat {
margin: 1rem 0;
}
.full-post .field--name-field-term-cat,
.full-post .field--name-field-term-world,
.full-post .field--name-field-term-special,
.full-post .field--name-field-article-rating {
display: flex;
align-items: baseline;
font-size: 1rem;
}
.full-post .field--name-dynamic-token-fieldnode-ds-short-url {
background: #f4f4f4;
padding: 15px;
margin: 1.25rem 0;
border: dashed 1px #CCC;
cursor: pointer;
}
.full-post .field--name-body {
margin: 2rem 0;
border-top: 1px solid rgba(160, 160, 160, 0.2);
padding-top: 1rem;
margin-top: 1rem;
}
[class*="body"] p {
margin: 1rem 0;
}
[class*="body"] img {
border: 0;
max-width: 100% !important;
height: auto !important;
display: block;
margin: 0 auto;
}
[class*="body"] .video-filter {
margin: 1rem 0;
}
[class*="body"] iframe {
aspect-ratio: 16 / 9;
width: 100%;
height: auto;
}
[class*="body"] blockquote {
background: #f0f0f1;
margin: 10px 0;
padding: 10px 10px 10px 50px;
position: relative;
}
[class*="body"] blockquote::before {
content: "“";
display: block;
font-size: 60px;
font-family: serif;
color: rgb(188,188,188);
padding: 0px 5px;
position: absolute;
height: 100%;
float: left;
left: 0;
top: 0;
width: 30px;
background: #dfdede;
line-height: 65px;
}
[class*="body"] blockquote > div {
background: #f0f0f1;
padding: 10px 15px;
color: #626263;
font-size: 16px;
}
[class*="body"] blockquote p:last-child {
margin-bottom: 0;
}
.media--view-mode-wysiwyg {
margin: 1.5rem 0;
}
.media--type-image.media--view-mode-wysiwyg {
/*box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);*/
/*margin: 1.25rem 0;*/
/*border-radius: 0 0 0.5rem 0.5rem;*/
}
.media--type-image.media--view-mode-wysiwyg figcaption {
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
}
.media--type-audio.media--view-mode-wysiwyg {
/*margin: 30px 0;*/
}
.media--type-audio.media--view-mode-wysiwyg .field--name-name {
text-align: center;
padding: 0.5rem;
font-weight: bold;
}
.media--type-audio.media--view-mode-wysiwyg audio {
display: block;
width: 100%;
}
.media--type-video.media--view-mode-wysiwyg video {
aspect-ratio: 16 / 9;
width: 100%;
height: auto;
}
.full-post video {
max-width: 100%;
}
.full-post .field--name-field-interests:hover,
.full-post .field--name-field-urls:hover {
background-color: #f4f4f4;
}
.full-post .field--name-field-interests,
.full-post .field--name-field-urls {
border: dashed 1px #CCC;
padding: 6px 12px;
font-size: 15px;
margin: 1.25rem 0;
line-height: 1.6;
}
.full-post .field--name-field-interests .field__label {
color: green;
font-size: 15px;
}
.full-post .field--name-field-urls a {
display: list-item;
list-style: square inside;
}
.full-post .field--name-field-tag {
display: block;
}
.full-post .field--name-field-tag .field__label {
margin-right: 10px;
}
.full-post .field__label {
display: inline;
}
.full-post .field--name-field-tag a {
display: inline-block;
font-size: 14px !important;
background-color:#F5F5F5;
background-color:#ffaa00;
color:#656565;
padding: 8px 14px;
border-radius: 2px;
margin: 0 5px 7px 0;
text-decoration: none;
}
.full-post .field--name-field-tag a:hover {
background-color: #e4e4e4;
color:#232323;
}
.field--name-comment-node-word .field__label,
.comment-form label {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
padding: 15px;
background: #3b5998;
color: white;
font-family: 'Roboto Condensed', sans-serif;
letter-spacing: 1px;
font-size: 20px;
margin-bottom: 1rem;
}
.indented .comment--view-mode-default {
margin-left: 140px;
}
.comment--view-mode-default {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .2);
margin-bottom: 20px;
background: #fff;
padding: 15px;
margin-left: 110px;
position: relative;
}
.comment--view-mode-default::before {
content: "";
border-bottom: 15px solid transparent;
border-right: 15px solid #fff;
border-top: 15px solid transparent;
height: 0;
left: -15px;
position: absolute;
top: 28px;
width: 0;
}
.comment--view-mode-default .user--view-mode-avatar {
display: inline-block;
max-width: 100%;
height: auto;
padding: 4px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
position: absolute;
left: -110px;
top: 0;
}
.comment--view-mode-default .user--view-mode-avatar img {
height: 80px;
width: 80px;
display: block;
}
.comment--view-mode-default .group-header {
display: flex;
justify-content: space-between;
border-bottom: 1px solid rgba(160, 160, 160, 0.2);
}
.comment--view-mode-default .field--name-comment-body {
color: #606060;
font-family: roboto condensed, sans-serif;
font-size: 15px;
line-height: 1.5;
word-wrap: break-word;
overflow-wrap: anywhere;
padding: 15px 0 0;
}
.comment--view-mode-default .group-footer .links {
padding-top: 15px;
border-top: 1px solid rgba(160, 160, 160, 0.2);
margin-top: 15px;
}
.comment--view-mode-default .links a {
position: relative;
cursor: pointer;
display: inline-block;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
vertical-align: middle;
z-index: 1;
-webkit-transition: .3s ease-out;
transition: .3s ease-out;
height: 32.4px;
line-height: 32.4px;
font-size: 13px;
text-decoration: none;
color: #fff;
background-color: #26a69a;
text-align: center;
letter-spacing: .5px;
border: none;
border-radius: 2px;
padding: 0 16px;
text-transform: uppercase;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
margin: 2px 0;
}
.comment--view-mode-default .links {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.comment--view-mode-default .links Li {}
.comment--view-mode-default .links a:hover {
background-color: #2bbbad;
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
}
.main-content .block {
/*margin-bottom: 1rem;*/
}
.main-content .block .block-title,
.block-custom h2 {
padding: 5px 15px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
background: #3b5998;
color: white;
font-size: 1.5em;
font-family: 'Roboto Condensed', sans-serif;
letter-spacing: 1px;
/*margin-bottom: 1rem;*/
}
.main-content .block .block-content,
.main-content .sidebar .block .view,
.view .attachment {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
padding: 15px;
background: #fff;
margin-bottom: 1rem;
}
.node--view-mode-teaser-title:hover {
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
transition: box-shadow .25s;
}
.node--view-mode-teaser-title .field--name-node-title {
padding: 15px 20px 15px;
margin: 0;
line-height: 26px;
font-family: inherit;
}
.node--view-mode-teaser-title .field--name-node-title a {
font-weight: normal;
color: #3b5998;
font-size: 15px;
text-decoration: none;
}
footer#footer {
margin-top: 30px;
background-color: #3B5999;
color: white;
}
footer#footer .copy {
text-align: center;
background-color: #18356f;
padding: 10px 20px;
}
/*.file {*/
/* padding: 15px;*/
/* margin-bottom: 10px;*/
/* border: 1px solid #e0e0e0;*/
/* border-radius: 8px;*/
/* background-color: #ffffff;*/
/* display: flex;*/
/* align-items: center;*/
/* justify-content: space-between;*/
/* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);*/
/* transition: background-color 0.3s ease;*/
/*}*/
/*.file-content {*/
/* display: flex;*/
/* flex-direction: column;*/
/* width: 80%;*/
/*}*/
/*.file-content span {*/
/* font-size: 14px;*/
/* color: #333;*/
/*}*/
/*.file-content span:first-child {*/
/* font-weight: bold;*/
/* margin-bottom: 5px;*/
/*}*/
/*.file-content span:nth-child(2) {*/
/* font-size: 12px;*/
/* color: #666;*/
/*}*/
/*.file-size {*/
/* font-size: 12px;*/
/* color: #999;*/
/* text-align: right;*/
/* margin-left: auto;*/
/*}*/
/*.download-icon {*/
/* color: #007bff;*/
/* font-size: 18px;*/
/* margin-left: 10px;*/
/* transition: color 0.3s ease;*/
/*}*/
/*.download-icon:hover {*/
/* color: #0056b3;*/
/*}*/
/*.file.active {*/
/* background-color: #e0f7fa;*/
/* border-left: 4px solid #007bff;*/
/*}*/
/*.file:hover {*/
/* background-color: #f8f9fa;*/
/*}*/
/**********************************************************************************************************/
/* media */
/**********************************************************************************************************/
.view-playlist.view-display-id-block_1 .view-content a {
display: flex;
align-items: center;
height: 52px;
text-decoration: navajowhite;
font-size: 22px;
}
.view-playlist.view-display-id-block_1 a::before {
font-size: 20px;
content: "▶";
margin-right: 5px;
}
@media only screen and (max-width: 1040px) {
.view-playlist.view-display-id-block_1t a {
font-size: 17px;
}
}
.layout--twocol-section--33-67 {
display: grid;
gap: 1.25rem;
}
.layout--twocol-section--75-25 {
display: grid;
gap: 1.25rem;
}
@media only screen and (min-width: 700px) {
.layout--twocol-section--33-67 {
grid-template-columns: 1fr 2fr;
}
.layout--twocol-section--75-25 {
grid-template-columns: 2fr 1fr;
}
}
@media only screen and (min-width: 1200px) {
.layout--twocol-section--33-67 {
grid-template-columns: 1fr 2fr;
}
.layout--twocol-section--75-25 {
grid-template-columns: 3fr 1fr;
}
}
/*.layout--twocol-section.layout--twocol-section--33-67 .layout__region--first {*/
/* width: 32%;*/
/* flex: 0 1 32%;*/
/*}*/
/*.layout--twocol-section.layout--twocol-section--33-67 .layout__region--second {*/
/* width: 66%;*/
/* flex: 0 1 66%;*/
/*}*/
/**********************************************************************************************************/
/* page-dictionary */
/**********************************************************************************************************/
.main-content .block.block-language .links {
box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%), 0 1px 5px 0 rgb(0 0 0 / 20%);
margin-bottom: 20px;
background: #fff;
list-style: none;
padding: 15px;
}
.main-content .block.block-language ul.links {
display: flex;
list-style: none;
}
.view-dictionary.view-display-id-attachment_1 .views-summary {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#views-exposed-form-dictionary-block-1 {
display: flex;
align-items: center;
gap: 2rem;
}
#views-exposed-form-dictionary-block-1 .js-form-type-textfield {
flex: 1 1 auto;
}
#views-exposed-form-dictionary-block-1 .form-actions {
flex: 0 0 auto;
width: auto;
}
.node--type-word.node--view-mode-teaser {
display: flex;
}
.node--type-word.node--view-mode-teaser .group-left {
width: 40%;
display: flex;
}
.node--type-word.node--view-mode-teaser .group-left a {
display: block;
width: 100%;
height: 100%;
}
.node--type-word.node--view-mode-teaser .field--name-field-img-teaser {
width: 100%;
}
.node--type-word.node--view-mode-teaser .group-left img {
width: 100%;
height: 100%;
object-fit: cover;
}
.node--type-word.node--view-mode-teaser .group-right {
width: 60%;
}
.node--type-word.node--view-mode-teaser .field--name-node-post-date {
position: absolute;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.5);
color: white;
padding: 5px 5px;
width: 31px;
text-align: center;
}
.node--type-word.node--view-mode-teaser .field--name-node-title {
padding: 15px 20px 15px;
margin: 0;
line-height: 26px;
}
.node--type-word.node--view-mode-teaser .field--name-node-title a {
font-weight: normal;
color: #3b5998;
font-size: 26px;
text-decoration: none;
}
.node--type-word.node--view-mode-teaser .field--name-body {
color: #707070;
font-size: 16px;
padding: 0 20px 15px;
}
@media (max-width: 500px) {
.node--type-word.node--view-mode-teaser {
flex-direction: column !important;
}
.node--type-word.node--view-mode-teaser .group-left,
.node--type-word.node--view-mode-teaser .group-right {
width: 100%;
}
}
/*forum*/
.node--type-forum.node--view-mode-full {}
.main-post {
display: flex;
flex-wrap: wrap;
}
.main-post .group-header {
align-items: center;
justify-content: space-between;
width: 100%;
}
.main-post .group-header .field--name-taxonomy-forums {
display: flex;
align-items: center;
gap: 0;
}
.main-post .group-left {
width: calc(100px + 1rem);
padding: 1rem 1rem 0 0;
border-right: 1px solid rgba(160, 160, 160, 0.2);
box-sizing: border-box;
}
.main-post .group-left .field--name-node-author {
text-align: center;
margin-bottom: 0.5rem;
font-weight: bold;
}
.main-post .group-right {
width: calc(100% - 100px - 1rem);
padding: 1rem;
box-sizing: border-box;
}
.main-post .field--name-body {
margin: 0;
}
/*PM*/
h1.page-title {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
margin: 20px 0;
background: white;
padding: 15px;
font-family: 'Oswald', sans-serif;
font-size: 2em;
}
.view-filters,
/*.view-content,*/
/*.page-messages .view-filters,*/
.page-messages .view-content,
.privatemsg-message-form,
.privatemsg-block-user-form {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
background: white;
padding: 25px;
margin: 20px 0;
}
/* ===== ФОРМИ ===== */
/* Загальний стиль форми */
form {
/*width: 100%;*/
/*margin-bottom: 30px;*/
/*padding: 20px;*/
/*background-color: #ffffff;*/
/*border: 1px solid #e0e0e0;*/
/*border-radius: 8px;*/
/*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);*/
/*box-sizing: border-box;*/
}
/* Заголовки форм (наприклад, summary у details) */
form summary {
font-size: 18px;
font-weight: bold;
color: #3b5998;
cursor: pointer;
padding: 10px 0;
}
form details[open] summary {
border-bottom: 1px solid #e0e0e0;
}
/* Поля форми */
form .form--inline {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
form .form-item {
margin-top: 10px;
margin-bottom: 10px;
}
/* Стилі для fieldset */
fieldset,
fieldset.fieldgroup {
border: 1px solid #ccc;
padding: 15px;
margin-bottom: 20px;
border-radius: 8px;
}
fieldset legend {
font-size: 16px;
font-weight: bold;
color: #3b5998;
padding: 0 10px;
}
/* Поля вводу (text, tel, number, url, time, date) */
form input[type="text"],
form input[type="tel"],
form input[type="number"],
form input[type="url"],
form input[type="time"],
form input[type="email"],
form input[type="password"],
form input[type="date"],
form textarea,
form select {
width: 100%;
padding: 10px;
font-size: 16px;
color: #333;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #fff;
outline: none;
transition: border-color 0.3s ease;
box-sizing: border-box;
}
form input:focus,
form textarea:focus,
form select:focus {
border-color: #3b5998;
}
/* Лейбли */
form label {
font-size: 14px;
font-weight: bold;
color: #333;
display: block;
margin-bottom: 5px;
}
/* Підказки під полями вводу (.description) */
form .description {
font-size: 14px;
color: #666;
margin-top: 5px;
margin-bottom: 10px;
font-style: italic;
}
/* Чекбокси та радіокнопки */
form input[type="checkbox"],
form input[type="radio"] {
display: none;
}
form input[type="checkbox"] + label,
form input[type="radio"] + label {
display: inline-flex;
align-items: center;
padding: 8px 12px;
font-size: 14px;
font-weight: bold;
color: #333;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
margin-right: 10px;
}
/* Активні радіокнопки та чекбокси */
form input[type="radio"]:checked + label,
form input[type="checkbox"]:checked + label {
background-color: #3b5998;
color: #ffffff;
border-color: #3b5998;
}
form input[type="radio"]:hover + label,
form input[type="checkbox"]:hover + label {
background-color: #e8f0fe;
}
/* Вертикальне розташування радіокнопок */
form .form-item.js-form-type-radio {
margin-bottom: 10px;
}
/* Кнопки */
form .form-actions {
grid-column: 1 / -1;
width: 100%;
text-align: center;
margin-top: 20px;
}
form .form-actions input.form-submit,
form input[type="submit"],
a.button {
padding: 12px 20px;
font-size: 16px;
color: #ffffff;
background-color: #3b5998;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
/*margin: 0 10px;*/
margin: 0;
width: auto;
display: inline-block;
text-align: center;
}
/* Ховер для кнопок */
form .form-actions input.form-submit:hover,
form input[type="submit"]:hover,
a.button:hover {
background-color: #2d4373;
}
/* Небезпечні кнопки */
a.button.button--danger {
background-color: #d9534f;
}
a.button.button--danger:hover {
background-color: #c9302c;
}
/* ===== Адаптивність форми ===== */
@media (max-width: 1024px) {
form .form--inline {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
form .form--inline {
grid-template-columns: 1fr;
}
}
/* ===== ТАБЛИЦІ ===== */
/* Загальний стиль таблиці */
table {
width: 100%;
border-collapse: collapse;
margin: 30px 0 20px;
background-color: #ffffff;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
box-sizing: border-box;
}
/* Заголовок таблиці */
table thead th,
table thead th a {
background-color: #3b5998;
color: #ffffff;
text-align: left;
padding: 12px 15px;
font-weight: bold;
font-size: 14px;
vertical-align: middle;
}
table thead th a:hover {
color: #f6fa9b;
}
/* Рядки таблиці */
table tbody tr {
border-bottom: 1px solid #ddd;
}
table tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
/* Осередки таблиці */
table th,
table td {
padding: 15px;
text-align: left;
font-size: 14px;
color: #333;
vertical-align: middle;
}
/* Посилання в таблиці */
table a {
color: #3b5998;
text-decoration: none;
font-weight: bold;
}
table a:hover {
color: #2d4373;
text-decoration: underline;
}
/* Ховери на рядках таблиці */
table tbody tr:hover {
background-color: #e8f0fe;
}
/* Адаптивність таблиці для мобільних пристроїв */
@media (max-width: 768px) {
table {
display: block;
overflow-x: auto;
border: none;
}
table thead,
table tbody,
table th,
table td,
table tr {
display: block;
}
table th {
background-color: #3b5998;
color: #ffffff;
text-align: left;
}
table td {
border-top: 1px solid #ddd;
}
}
/* Status message
------------------------*/
.message {
position: relative;
color: #ffffff;
text-shadow: none;
margin: 1rem 0;
padding: 14px 14px 14px 64px;
}
.message em {
color: #ffffff;
font-style: italic;
border-bottom: 1px dotted #ffffff;
}
.message p:last-of-type {
margin: 0;
}
.message a {
color: #ffffff;
text-decoration: none;
}
.message-status {
background-color: #89ad32;
}
/*.message-status::before {*/
/* content: "\e004";*/
/* background-color: #759625;*/
/*}*/
.message-error {
background-color: #c94d1c;
}
.message-error::before {
content: "\e005";
background-color: #b3461b;
}
.message-warning {
background-color: #cd5a0a;
}
/*.message-warning::before {*/
/* content: "\e006";*/
/* background-color: #a44707;*/
/*}*/
/*.message::before {*/
/* font-family: "tara";*/
/* position: absolute;*/
/* left: 0;*/
/* top: 0;*/
/* width: 53px;*/
/* text-align: center;*/
/* height: 100%;*/
/* line-height: 53px;*/
/* font-size: 30px;*/
/*}*/
.status-message-list {
display: flex;
flex-direction: column;
gap: 1rem;
list-style: none;
}
/* ===== ПАГІНАЦІЯ ===== */
/* Загальний стиль навігації пагінації */
.pager {
display: flex;
justify-content: center;
align-items: center;
margin: 20px 0;
padding: 10px;
background-color: #f9f9f9;
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
/* Список елементів пагінації */
.pager-items {
display: flex;
flex-wrap: wrap;
justify-content: center;
list-style: none;
padding: 0;
margin: 0;
gap: 5px;
}
/* Стилі для кожного елемента пагінації */
.pager-item a {
display: inline-block;
padding: 8px 12px;
font-size: 14px;
font-weight: bold;
color: #333;
background-color: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 4px;
text-decoration: none;
transition: background-color 0.3s ease, color 0.3s ease;
}
.pager-item a:hover {
background-color: #e8f0fe;
color: #3b5998;
}
/* Активна сторінка */
.pager-item.active a,
.pager-item a[aria-current="page"] {
color: #ffffff;
background-color: #3b5998;
border-color: #3b5998;
}
/* Стиль для кнопок "Наступна" та "Остання" */
.pager-item-next a,
.pager-item-last a {
padding: 8px 12px;
font-weight: bold;
}
.pager-item-next a:hover,
.pager-item-last a:hover {
background-color: #e8f0fe;
color: #3b5998;
}
/* Стиль для еліпсиса */
.pager-item-ellipsis {
padding: 8px 12px;
font-size: 14px;
color: #666;
}
/* Адаптивність для мобільних пристроїв */
@media (max-width: 768px) {
.pager-items {
flex-wrap: wrap;
gap: 8px;
}
}
.page-user.not-logged-in .main-content {
max-width: 600px;
}
.page-user.not-logged-in .user-pass,
.page-user.not-logged-in .user-login-form,
.page-user.not-logged-in .user-form {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
margin: 20px 0;
background: white;
padding: 15px;
}
.page-user.not-logged-in .user-register-link,
.page-user.not-logged-in .user-login-link,
.page-user.not-logged-in .user-reset-password-link {
display: none;
}
/*search*/
.block-google-cse,
#views-exposed-form-search-block-1 {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
background: white;
padding: 15px;
box-sizing: border-box;
position: relative;
}
.block-google-cse {
margin-bottom: 1.25rem;
}
.google-cse-search-box-form {
display: flex;
align-items: center;
gap: 1rem;
}
.google-cse-search-box-form .js-form-type-textfield {
flex: 1;
}
.google-cse-search-box-form .form-submit {
margin-top: 21px;
}
#google-cse-results {
position: absolute;
right: 0;
top: 0;
}
.announcements.block-custom .block-content ul {
padding-left: 1rem;
margin: 1rem 0 0;
}
.announcements.block-custom .block-content ul li {
list-style: disc;
margin: 0.5rem 0;
}
.region-popup {
display: none;
}