:root {
  --color--background--content: rgba(214, 240, 255, .8); /*rgba(0,90,255, .1);*/ /*rgba(0,90,255,.3);*/ /*rgba(255,255,255, 1);*/
  --color--shadow--content: rgba(0,90,255, .1); /*rgba(0,90,255,.3);*/ /*rgba(255,255,255, 1);*/
  --color--background-grad--content--intro-text--left: linear-gradient(to right, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7));
  --color--background-grad--id-default-grad: linear-gradient(90deg, rgba(0,70,166,1) 0%, rgba(73,165,255,0.2) 100%);
  --color--base--end-of-page: #0033cc;
  --color--text--end-of-page: white;
  --color--background--main-title: rgb(73,165,255);
  --color--background-grad--main-title: linear-gradient(90deg, rgba(73,165,255,0.2) 0%, rgba(0,108,255,0.1) 100%);
  --color--text--main-title: #0033cc;
  --color--base--secondary-title: white;
  --color--background-grad--secondary-title: linear-gradient(90deg, #0033cc 0%, rgba(0, 51, 204, 0.2) 100%); /*linear-gradient(to right, blue , #f1f3ff);*/
  --color--base--dropdown-menu--primary-link: #e6f9ff;
  --color--background--dropdown-menu--content: #3399ff;
  --color--text--dropdown-menu--content: #e6f9ff;
  --color--text--dropdown-menu--content--hover: #4dd2ff;
  --color--background--dropdown-menu--dropbutton: #3366cc;
  --color--background--main-menu: #0033cc;
  --color--background--breadcrumb: rgb(0,46,136);
  --color--background-grad--breadcrumb: /*rgba(204, 233, 255, 0.5);*/ linear-gradient(90deg, rgba(73,165,255,0.2) 0%, rgba(0,108,255,0.1) 100%); /*linear-gradient(90deg, rgba(0,46,136,1) 0%, rgba(208,232,255,1) 0%, rgba(241,243,255,1) 100%);*/
  --color--base--breadcrumb-li-before: black;
  --color--base--breadcrumb-li: #636363;
  --color--base--breadcrumb-li-a: #0275d8;
  --color--base--breadcrumb-li-a-hover: #01447e;
  --color--background--content--gallery-image: rgba(0,0,0,0);
  --color--background--content--gallery-caption-hover: rgba(0, 0, 0, 0.5);
  --color--background--content--gallery-transparent-box: rgba(0, 0, 0, 0);
  --color--base--content--gallery-caption: white;
  --color--background--content--item: rgb(188,219,255);
  --color--background-grad--content--item: linear-gradient(0deg, rgba(188,219,255,1) 0%, rgba(230,238,255,1) 37%);
  --color--base--content--item-description-h4: black;
  --color--base--content--item-description-p: black;
  --color--border--content--item: #ccc;
  --color--border--content--item-hover: #777;

  color-scheme: light;
}

#mainback {
  background-image: linear-gradient(180deg, rgba(168, 189, 219, 0.0) 0%, rgba(0, 106, 255, 0.0) 100%), url('../../grafika/grafika_resources/images/hand_base/IMG_mountains2_export1_lowQ.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

#errorback {
  background-image: linear-gradient(180deg, rgba(168, 189, 219, 0.0) 0%, rgba(0, 106, 255, 0.0) 100%), url('../images/error_background.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

#defaultback {
    background-image:
    /*linear-gradient(45deg, rgba(155,234,255,1) 0%, rgba(255,255,255,1) 54%, rgba(162,245,255,1) 100%),*/
    linear-gradient(90deg, rgba(0,70,166,0.5) 0%, rgba(0,0,0,0.2) 100%),
    url('../images/frido_logo_2020_final_lowQ.jpg');
}

#default-grad {
  background-image:
  var(--color--background-grad--id-default-grad);
}

#main-page-banner {

    background-image:
    linear-gradient(90deg, rgba(0,70,166,0.2) 0%, rgba(0,70,166,0.2) 100%),
    url('../images/baner2_ex3_lowQ_wLogo.jpg');

    animation-name: main-banner-image;
    animation-duration: 6s;
    animation-iteration-count: infinite;

    /*linear-gradient(45deg, rgba(155,234,255,1) 0%, rgba(255,255,255,1) 54%, rgba(162,245,255,1) 100%),*/
    /*background-color: black;*/
}

#main-page-banner1 {
  background-image:
  linear-gradient(90deg, rgba(0,70,166,0.2) 0%, rgba(0,70,166,0.2) 100%),
  url('../images/baner2_ex3_lowQ_wLogo.jpg');
}

#main-page-banner2 {
  background-image:
  linear-gradient(90deg, rgba(0,70,166,0.2) 0%, rgba(0,70,166,0.2) 100%),
  url('../images/mc-background.jpg');
}

#stickman {
  box-shadow: 0 0 5px black;
  margin-bottom: 5px;
}

.accept-button {
  /*background-color: rgba(200,255,200,1);*/
  background-color: rgba(255,255,255,0.75);
  color: black;
  /*border: 2px solid white;*/
  border: none;
}

.accept-button:hover {
  background-color: rgba(0,150,0,1);
  color: white;
  transition: background-color 0.25s, color 0.25s;
}

.decline-button {
  /*background-color: rgba(255,200,200,1);*/
  background-color: rgba(255,255,255,1);
  color: black;
  border: 2px solid white;
}

.decline-button:hover {
  background-color: rgba(150,0,0,1);
  color: white;
  transition: background-color 0.25s, color 0.25s;
}

.default-button {
  background-color: var(--color--background--main-menu);
  color: white;
  border: 2px solid rgba(255, 255, 255, 1);
}

.default-button:hover {
  background-color: rgba(0,0,0,0.85);
  color: white;
  border: 2px solid rgba(255, 255, 255, 1);
}

.warn-button {
  background-color: rgba(255,255,255,0.75);
  color: black;
  border: 2px solid white;
}

.warn-button:hover {
  background-color: rgba(0,0,0,0.5);
  color: white;
}

.cookies__box {
  color: black;
  background-color: white;
  background-image:
  linear-gradient(0deg, rgba(0,70,166,0) 50%, rgba(0,70,166,0.5) 100%),
  url('../images/cookies.webp');
}

.cookies-article {
  background-color: rgba(255, 255, 255, 0.75);
}

.language-button-cookies {
  /*background-color:  rgba(255, 255, 255, 0.75);*/
  background-color:  rgba(255, 255, 255, 0.75);
}

.language-button-cookies:hover {
  /*background-color: rgba(0, 0, 0, 0.15);*/
  background-color: rgba(255, 255, 255, 1);
}

.language-button-cookies img {
  border-radius: 2em;
  box-shadow: 0px 0px 15px grey;
}

.content {
  background-color: var(--color--background--content);
  box-shadow: 0 0px 40px 40px var(--color--shadow--content);
}

.content__intro-text--left {
  background-image:
  var(--color--background-grad--content--intro-text--left);
}

.content__end-of-page {
  background-color: var(--color--base--end-of-page);
  color: var(--color--text--end-of-page);
}

.content__main-title {
  color: var(--color--text--main-title);
  background: var(--color--background--main-title);
  background: var(--color--background-grad--main-title);
  text-shadow: 2px 2px 4px black;
}

.content__sec-title {
  color: var(--color--base--secondary-title);
  background-image: var(--color--background-grad--secondary-title);
  text-shadow: 2px 2px 4px #000000;
}

.menu-link-primary {
  color: var(--color--base--dropdown-menu--primary-link);
}

.dropdown a, .dropdown__content a {
    font-weight: bold;
}

.dropdown a:hover, .dropdown__content a:hover {
    /*text-shadow:
    -1px -1px 0 rgba(0,0,0,.5),
    1px -1px 0 rgba(0,0,0,.5),
    -1px 1px 0 rgba(0,0,0,.5),
    1px 1px 0 rgba(0,0,0,.5);*/

    text-shadow: 2px 2px 4px #000000;
}

.dropdown__content {
  background-color: var(--color--background--dropdown-menu--content);
}

/* Links inside the dropdown */
.dropdown__content a {
  color: var(--color--text--dropdown-menu--content);
  transition: background-color .5s ;
  -moz-transition: background-color .5s ;
  -webkit-transition: background-color .5s ;
}

/* Color of dropdown links on hover */
.dropdown__content a:hover {
  background-color: var(--color--text--dropdown-menu--content--hover);
}

/* Background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbutton {
  background-color: var(--color--background--dropdown-menu--dropbutton);
}

/*
.dropdown:hover .dropdown__content {
  box-shadow: 0 4px 2px -2px black;
}
*/

.main-menu nav
{
  background-color: var(--color--background--main-menu);
}

.content__breadcrumb {
  background: var(--color--background--breadcrumb);
  background: var(--color--background-grad--breadcrumb);
}

/* Barva "/" v seznamu */
.content__breadcrumb li+li:before {
  color: var(--color--base--breadcrumb-li-befores);
}

.content__breadcrumb li {
  color: var(--color--base--breadcrumb-li);
}

/* Barva prvků v seznamu */
.content__breadcrumb li a {
  color: var(--color--base--breadcrumb-li-a);
}

/* Barva prvků v seznamu při přejetí kurzorem */
.content__breadcrumb li a:hover {
  color: var(--color--base--breadcrumb-li-a-hover);
}

.content__gallery-image {
  background-color: var(--color--background--content--gallery-image);
}

.content__gallery-image:hover .content__gallery-transparent-box {
  background-color: var(--color--background--content--gallery-caption-hover);
}

.content__gallery-transparent-box {
  background-color: var(--color--background--content--gallery-transparent-box);
}

.content__gallery-caption {
  color: var(--color--base--content--gallery-caption);
}

.content__item {
  background: var(--color--background--content--item);
  background: var(--color--background-grad--content--item);
  border-color: var(--color--border--content--item);
}

.content__item:hover {
  border-color: var(--color--border--content--item-hover);
}

.content__item-description h4 {
  color: var(--color--base--content--item-description-h4);
}

.header-category--big {
  text-shadow: 0 0 3px white;
}

.content__item-description p {
  color: var(--color--base--content--item-description-p);
}

.sm-icons {
  opacity: 1;
  z-index: 1;
}

.small-background-shadow {
  /*background: rgba(99, 224, 255, .1);*/
  background: rgba(235, 244, 250, 1);
}

.content__intro-text a {
  color: cyan;
  text-decoration: none;
}

.content__intro-text a:hover {
  color: magenta;
}

.mini-shadow {
  box-shadow: 1.5px 1.5px 5px black;
}

.small-shadow {
  box-shadow: 2px 2px 5px black;
}

.link--basic {
  color: blue;
}

.third-title--article-basic {
  color: black;
}

.article-background--color-override {
  background: linear-gradient(325deg, rgba(0,172,255,0.2) 0%, rgba(0,104,255,0.1) 100%);
}

.content__menu-secondary ul{
  background: linear-gradient(90deg, rgba(73,165,255,0.2) 0%, rgba(0,108,255,0.1) 100%);
  /*box-shadow: 0 0 10px 2px rgba(63,144,255,0.5);*/
}

.content__menu-secondary li > a:hover{
  color: white;
}

.content__menu-secondary li:hover{
  background: rgba(0, 51, 204, 0.5);
}

.content__menu-secondary li > a{
  color: #0275d8;
}

#menu-secondary__highlighted {
  color: rgba(0, 8, 255, 1);
}

.content__menu-secondary li > #menu-secondary__highlighted:hover {
  color: white;
}

.content__menu-secondary--main-icon {
  background: var(--color--background-grad--secondary-title);
  color: white;
}

.section-link {
  background: rgba(255,255,255,0.5);
}

.welcome-message {
  color: white;
  /*background-color: rgba(255,255,255,.6);*/
  text-shadow: 2px 2px 4px black;
}

.not-active-paragraph {
  color: grey;
  opacity: 0.75;
}

@keyframes main-banner-image {
  0% { opacity: 1; }
  100% { opacity: 1; }
}


.content__update-description {
  color: black;
}

.content__update-item:hover {
  box-shadow: 0px 3px 0px var(--color--border--content--item-hover);
}

.content__update-item {
  background: linear-gradient(0deg, rgba(188, 219, 255, 1) 0%, rgba(230, 238, 255, 1) 37%);
}

.languageSelector__box {
  background: linear-gradient(180deg, rgba(188, 219, 255, 1) 0%, rgb(149, 228, 255) 50%);
}

.language-selector-button {
  border: none;
  box-shadow: 0px 0px 4px #3399ff;
  background: white;
  color: black;
}

.language-selector-button:hover, .language-selector-button:focus {
  border: none;
  box-shadow: 0px 0px 4px #3399ff;
  background: #0033cc;
  color:white;
  transition: all 0.5s ease-out;
}

/*****************/
/*MEDIAQ skup 1*/
/*****************/
@media screen and (max-width: 1250px) {
  .content {
    box-shadow: 0 0px 40px 40px var(--color--shadow--content);
    background-color: var(--color--background--content);
  }
}

@media screen and (min-width: 1250px) {
  .content {
    box-shadow: 0 0px 40px 40px rgba(0,0,0,0), 0 0 5px black;
    background-color: var(--color--background--content);
  }
}
/*****************/
/*MEDIAQ skup 2*/
/*****************/
@media screen and (max-width: 650px) {
  .content__main-title {
    text-shadow: 1px 1px 2px black;
  }
}
