:root {
    --white-color: #ffffff;
    --black-color: #000000;
    --darkest-color: #222222;
    --dark-color: #333333;
    --light-color: #666666;
    --dark-green: #009409;
    --light-green: #00FF00;
}
@font-face {
  font-family: 'Bebas Neue';
  src:  url('../fonts/BebasNeueBold.woff2') format('woff2'),
        url('../fonts/BebasNeueBold.woff') format('woff');
    font-weight:bold;
    font-style:normal
}
html, body {height:100%}
* {
    margin: 0;
    padding: 0;
}
body {
    font-family: "Inter", sans-serif;
    font-weight: 300;
    font-size: 1rem;
}
img {
    border: 0 none;
    max-width:100%
}
b, strong {
    font-weight: bold;
}
dl, ol, ul {margin-left: 2rem}
a {color:var(--black-color);text-decoration:none;}
a span, a div.linkhack {text-decoration:underline;}
a:hover {color:var(--light-color);text-decoration:none;}
a:hover span, a:hover div.linkhack {text-decoration:none;}
h1,.h1,h2,.h2,h3,.h3 {font-family: "Bebas Neue", sans-serif}
h1,.h1 {font-size:3rem; line-height:3rem; font-weight: bold; text-align:center;margin-bottom:2rem}
h2,.h2 {font-size:1.875rem; line-height:1.875rem; font-weight: bold; text-align:center;margin-top: 1.875rem}
h3,.h3 {margin-top: 1.75rem}
@media(min-width:576px) {
    h1,.h1 {font-size:4rem;line-height:4rem;margin-bottom:2rem}
    h2,.h2 {font-size:2.5rem;line-height:2.5rem;margin-top: 2.5rem}
}
@media(min-width:992px) {
    h1,.h1 {font-size:5rem;line-height:5rem;margin-bottom:2rem}
    h2,.h2 {font-size:3.125rem;line-height:3.125rem;margin-top: 3.125rem}
}
label {
    display: inline
}
.gradient-text {
  background: linear-gradient(var(--dark-green), var(--light-green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--light-green)
}
.gradient {
  background-image: linear-gradient(var(--light-green), var(--dark-green));
}
.mb-c, .my-c {margin-bottom:7.5rem !important}
.mt-c, .my-c {margin-top:7.5rem !important}
.pb-c, .py-c {padding-bottom:7.5rem !important}
.pt-c, .py-c {padding-top:7.5rem !important}
.font-large {font-size: 1.25rem}
.color-green{color: var(--light-green)}
.back-white{background-color: var(--white-color)}
/*buttons*/
.btn-primary {color: var(--black-color);background-color: var(--light-green);border-color: var(--light-green);font-weight:bold; font-size:1.25rem}
.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-primary.dropdown-toggle:focus {color: var(--white-color);border-color:var(--darkest-color);box-shadow: none}
.btn-primary:hover {color: var(--white-color);background-color:var(--darkest-color);border-color:var(--black-color)}
.btn-primary.focus, .btn-primary:focus {color: var(--white-color);background-color:var(--darkest-color);border-color:var(--black-color);box-shadow: none}
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle {color: var(--white-color);background-color: var(--darkest-color)}
/*elements*/
.background-line {background-color:var(--dark-color);color:var(--white-color)}
.dots{background: transparent url(../images/dots.svg) no-repeat top right}
.bubble-tail {
 width:0;
 height:0;
 margin:0 auto;
 border:15px solid;
 border-color:transparent transparent #fff transparent
}
@media(min-width:768px) {.bubble-tail { border-color:transparent #fff transparent transparent}}
.light-shadow {box-shadow: 20px 20px 20px -10px rgba(117, 115, 111, 0.2)}
/*block*/
#UBcont113{background-color: #EBEBEB}
/*timeline*/
.gradient {
    position: absolute;
    height: calc(100% - 357px);
    width: 100%;
    background-color: var(--light-green);
    top: 183px
}
#gradient10{height: calc(100% - 393px);top: 207px}
#gradient14{height: calc(100% - 413px);top: 224px}
.timeline-container {
   padding: 70px 20px;
   margin: 50px auto;
   position: relative;
   overflow: hidden;
}

.timeline-container:before {
   content: ' ';
   position: absolute;
   top: 0;
   left: 50%;
   margin-left: -1px;
	width: 2px;
   height: 100%;
   background-color:#009409;
   z-index: 1;
  /*box-shadow: 0 2px 6px 1px #0000001f;*/
}

.timeline-block {
   width: -webkit-calc(50% + 23px);
   width: -moz-calc(50% + 23px);
   width: calc(50% + 23px);
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: flex;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   -moz-box-pack: justify;
   justify-content: space-between;
   clear: both;
}

.timeline-block-right {
   float: right;
}

.timeline-block-left {
   float: left;
   direction: rtl;
}

.marker {
   width: 17px;
   height: 16px;
   border-radius: 50%;
   border: 2px solid #009409;
   background: rgb(246,245,243);
   margin-top: 10px;
   z-index: 10;
 box-shadow: 0 2px 6px 1px #0000001f;
}

.timeline-content {
   width: 95%;
   padding: 1rem 2rem;
   color: #2B2B2B;
   background: white;
   border-radius: 10px;
   margin-left: 10px;
    margin-right: 10px;
 box-shadow: 0 25px 60px -20px
rgba(117, 115, 111, 0.4);
transition: all 0.2s;
}

.timeline-content h3 {
   margin-top: 5px;
   margin-bottom: 5px;
   font-size: 25px;
   font-weight: 500;
}

.timeline-content p {text-align: left;direction: ltr;}

.timeline-content span {
   font-size: 14px;
   font-weight: bold;
   letter-spacing: 1px;
   word-spacing: 1px;
   color: #e36650;
}

.light {
    -moz-animation: blink 1.5s linear infinite;
    -webkit-animation: blink 1.5s linear infinite;
    -ms-animation: blink 1.5s linear infinite;
    animation: blink 1.5s linear infinite;
}

@keyframes blink {
    0%{
        box-shadow: 0 0 0 0 rgba(227,101,80,0.9), 0 0 0 0 rgba(227,101,80,0.5)
    }
    50%{
        box-shadow: 0 0 0 20px rgba(227,101,80,0), 0 0 0 10px rgba(227,101,80,0)
    }
    100%{
        box-shadow: 0 0 0 0 rgba(227,101,80,0), 0 0 0 0 rgba(227,101,80,0)
    }
}

@media screen and (max-width: 768px) {

.timeline-container {
   width: auto;
   padding-left: 15px;
   padding-right: 0;
}
   .timeline-container:before {
      left: 8px;
      width: 3px;
   }
   .timeline-block {
      width: 100%;
      margin-bottom: 10px;
   }
   .timeline-block-right {
      float: none;
   }

   .timeline-block-left {
      float: none;
      direction: ltr;
   }
    .timeline-content {
     margin-left:5px;
        margin-right:0
    }
}
/*header*/
header {background-color:var(--darkest-color);color:var(--white-color);position: fixed;z-index: 999;width: 100%;top:0}
.mh-50 {min-height:50px}
/*nav*/
.navbar-brand {margin-right: 5rem;}
.navbar-expand-xl .navbar-nav .nav-link {padding-right: .8rem;padding-left: .8rem;}
.navbar-dark .navbar-nav .nav-link {color:var(--white-color)}
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
 color:var(--light-green);
}
.dropdown-toggle::after {
display: inline-block;
margin-left: 0;
vertical-align: 0;
content: "";
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left: .3em solid transparent;
background: url(../images/chevron-bottom.svg) no-repeat scroll center 2px;
width: 1rem;
height: 1rem;
}
.dropdown:hover>.dropdown-menu {
  display: block;
}
.dropdown-menu{margin:0}
.dropdown-item.active,
.dropdown-item:active {
 color:#fff;
 text-decoration:none;
 background-color:var(--dark-green)
}
.navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show>.nav-link {
    color: var(--light-green);
}
/*slider*/
.slide {width: 100%;height: 100vh;color: var(--white-color)}
.slide p {text-shadow: 5px 5px 5px rgba(0,0,0,.25)}
#fon1 {background: var(--dark-color) url(../images/slider/fon-1.jpg) no-repeat center center / cover;}
#fon2 {background: var(--dark-color) url(../images/slider/fon-2.jpg) no-repeat center center / cover;}
#fon3 {background: var(--dark-color) url(../images/slider/fon-3.jpg) no-repeat center center / cover;}
#fon4 {background: var(--dark-color) url(../images/slider/fon-4.jpg) no-repeat center center / cover;}
/*footer*/
footer {background-color:var(--darkest-color);color:var(--white-color);font-size:0.875rem}
.wrapper-sticky-footer {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.wrapper-sticky-footer #content{
  flex: 1 0 auto;
}
.wrapper-sticky-footer #footer{
  flex: 0 0 auto;
}
.restrictions {
    width: 2.5rem;
    height: 2.5rem;
    display: block;
    border: 2px solid white;
    border-radius: 50%;
    padding: 0.4rem;
    font-weight: bold;
    font-family: 'Bebas Neue';
    font-size: 1.2rem;
    opacity: .6
}
.startQuiz,
.nextQuestion,
.backToQuestion,
.questions li.question,
.questions li.question .responses,
.questions li.question .responses .correct,
.questions li.question .responses .incorrect,
.quizResults {
    display: none;
}

/* If response messages are disabled or only shown on quiz completion,
   nextQuestion button IS checkAnswer button - so it must be displayed */
.nextQuestion.checkAnswer {
    display: block;
}

ol.questions,
ul.answers,
ul.responses,
ol.questions li,
ul.answers li,
ul.responses li {
    list-style-type: none;
    margin-bottom: .5rem
}

/* Accessibility */
.quizName span:first-child {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
@media(min-width:576px) {#galerey .mb-sm-4 {margin-bottom: 2rem !important;}}
/* Навигация */

.navigationtrue {
    clear: both;
    color: var(--light-color);
    margin-bottom: 1rem;
    margin-top: 1rem;
    padding-bottom: 0.625rem;
    padding-top: 0.625rem;
    line-height: 2.8125rem;
}

.navigationtrue span span {
    background-color: var(--white-color);
    margin-right: 0.1875rem;
    padding: 0.5rem 0.75rem;
    border-radius: .1rem
}

.navigationtrue a {
    background-color: var(--light-green);
    color: var(--darkest-color);
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    border-bottom:none;
    border-radius: .1rem;

}
.navigationtrue a span{text-decoration: none}

.navigationtrue a:hover {
    background-color: var(--darkest-color);
    color: var(--white-color)
}

/*видео*/

.thumb-wrap {
  position: relative;
  padding-bottom: 56.25%; /* задаёт высоту контейнера для 16:9 (если 4:3 — поставьте 75%) */
  height: 0;
  overflow: hidden;
}
.thumb-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-width: 0;
  outline-width: 0;
}