:root {
--color1: #cb282e;
--color2: #ac1e1a;
--color3: #dfdfe3;
--color4: #7f8287;
--color5: #616160;
--color6: #fffce3;
--color7: #000;
--color8: #FFF;
}

body {
  margin:0; 
  padding:0;
  background:#FFF;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 1.5;
}

.color1 {
   color:var(--color1);
   }
.color2 {
   color:var(--color2);
   }  
.color3 {
   color:var(--color3);
   } 
.color4 {
   color:var(--color4);
   } 
.color5 {
   color:var(--color5);
   }   
.color6 {
   color:var(--color6);
   }    
.color7 {
   color:var(--color7);
   } 
.color8 {
   color:var(--color8);
   }     
   
.bg-color1 {
    background-color:var(--color1);
   }
.bg-color2 {
    background-color:var(--color2);
   }  
.bg-color3 {
    background-color:var(--color3);
   } 
.bg-color4 {
    background-color:var(--color4);
   } 
.bg-color5 {
    background-color:var(--color5);
   } 
.bg-color6 {
    background-color:var(--color6);
   } 
.bg-color7 {
    background-color:var(--color7);
   }  
.bg-color8 {
    background-color:var(--color8);
   } 

/* xs (<=543px) */
@media (max-width: 575px) { 
    .tb  {
        padding-top:30px;
        }
    .hd1 {  
        font-size:30px;
        }
    .hd2 {  
        font-size:20px;
        margin-bottom:0.5rem;
        }  
    .hd3 {  
        font-size:25px;
        margin-bottom:0.5rem;
        }         
    .ttl {
        font-size: 25px;
        }
    .block {
        padding-top:2rem;
        padding-bottom:2rem;
    }
    .hdline {
        padding-bottom:1rem;
    }
   
    .tl1 {
        font-size:25px;
    }
    .tl2 {
        font-size:22px;
    } 
    .tl3 {
        font-size:18px;
    } 
    .tl4 {
        font-size:35px;
        line-height:32px;
    }    
    .tl5 {
        font-size:18px;
    }  
    .tl6 {
        font-size:22px;
    }  
    .but1 {
        width:70%;
        margin-top:50px;
        margin-bottom:50px;
    }
    .but2 {
        width:80%;
        margin-top:20px;
    }    
    .info1 {
        padding-bottom:30px;
    }
.head1-1 {
    font-size:1.3rem;
    margin-bottom:1.5rem;
    }    
}
 
/* sm (>=576 и <=767) */
@media (min-width: 576px) and (max-width: 767px) { 
    .tb  {
        padding-top:30px;
        }    
    .hd1 {  
        font-size:24px;
        } 
    .hd2 {  
        font-size:20px;
        margin-bottom:0.5rem;
        } 
    .hd3 {  
        font-size:25px;
        margin-bottom:0.5rem;
        }         
    .ttl {
        font-size: 36px;
        } 
    .block {
        padding-top:2rem;
        padding-bottom:2rem;
    }    
    .tl1 {
        font-size:32px;
    }
    .tl2 {
        font-size:26px;
    } 
    .tl3 {
        font-size:22px;
    } 
    .tl4 {
        font-size:40px;
        line-height:40px;
    }    
    .tl5 {
        font-size:22px;
    }  
    .tl6 {
        font-size:24px;
    }  
    .but1 {
        width:70%;
        margin-top:50px;
        margin-bottom:50px;
    }
    .but2 {
        width:80%;
        margin-top:20px;
    }    
    .info1 {
        padding-bottom:30px;
    }  
.head1-1 {
    font-size:1.3rem;
    margin-bottom:1.5rem;    
    }     
}
 
/* md (>=768 и <=991) */
@media (min-width: 768px) and (max-width: 991px) {
    .tb  {
        padding-top:30px;
    }   
    .hd1 {  
        font-size:35px;
    }  
    .hd2 {  
        font-size:20px;
        margin-bottom:0.5rem;
        } 
    .hd3 {  
        font-size:26px;
        margin-bottom:0.5rem;
        }         
    .ttl {
        font-size: 30px;
        }    
    .block {
        padding-top:2rem;
        padding-bottom:2rem;
    } 
    .tl1 {
        font-size:25px;
    }
    .tl2 {
        font-size:22px;
    } 
    .tl3 {
        font-size:18px;
    } 
    .tl4 {
        font-size:55px;
        line-height:80px;
    }    
    .tl5 {
        font-size:24px;
    }  
    .tl6 {
        font-size:22px;
    }  
    .but1 {
        width:70%;
        margin-top:50px;
        margin-bottom:50px;
    }
    .but2 {
        width:80%;
        margin-top:20px;
    }    
    .info1 {
        padding-bottom:30px;
    } 
.head1-1 {
    font-size:1.5rem;
    margin-bottom:1.5rem;    
    }    
}
 
/* lg (>=992 и <=1199) */
@media (min-width: 992px) and (max-width: 1199px) {
    .tb  {
        padding-top:70px;
    }    
    .hd1 {  
        font-size:45px;
        } 
    .hd2 {  
        font-size:25px;
        margin-bottom:0.5rem;
        } 
    .hd3 {  
        font-size:26px;
        margin-bottom:0.5rem;
        }         
    .ttl {
        font-size: 35px;
        }   
    .block {
        padding-top:3rem;
        padding-bottom:3rem;
    }  
    .tl1 {
        font-size:25px;
    }
    .tl2 {
        font-size:22px;
    } 
    .tl3 {
        font-size:18px;
    } 
    .tl4 {
        font-size:35px;
        line-height:32px;
    }    
    .tl5 {
        font-size:18px;
    }  
    .tl6 {
        font-size:22px;
    }  
    .but1 {
        width:70%;
        margin-top:50px;
        margin-bottom:50px;
    }
    .but2 {
        width:80%;
        margin-top:20px;
    }    
    .info1 {
        padding-bottom:30px;
    } 
.head1-1 {
    font-size:1.6rem;
    margin-bottom:1.5rem;    
    }    
}
 
/* xl (>=1200) */
@media (min-width: 1140px) { 
    .tb  {
        padding-top:100px;
    }    
    .hd1 {  
        font-size:45px;
        } 
    .hd2 {  
        font-size:25px;
        margin-bottom:0.5rem;
        }  
    .hd3 {  
        font-size:30px;
        margin-bottom:0.5rem;
        }         
    .ttl {
        font-size: 35px;
        } 
    .block {
        padding-top:3rem;
        padding-bottom:3rem;
    }    
    .tl1 {
        font-size:25px;
    }
    .tl2 {
        font-size:22px;
    } 
    .tl3 {
        font-size:18px;
    } 
    .tl4 {
        font-size:75px;
        line-height:70px;
    }    
    .tl5 {
        font-size:30px;
    }  
    .tl6 {
        font-size:32px;
    }  
    .but1 {
        width:50%;
        font-size:25px;
        margin-top:50px;
        margin-bottom:50px;
    }
    .but2 {
        width:80%;
        margin-top:20px;
    }    
    .info1 {
        padding-bottom:30px;
    }
.head1-1 {
    font-size:1.6rem;
    margin-bottom:1.5rem;    
    }    
}
/* xxl (>=1400) */
@media (min-width: 1320px) { 
    .tb  {
        padding-top:110px;
    }    
    .hd1 {  
        font-size:45px;
        } 
    .hd2 {  
        font-size:25px;
        margin-bottom:0.5rem;
        }  
    .hd3 {  
        font-size:30px;
        margin-bottom:0.5rem;
        }         
    .ttl {
        font-size: 35px;
        } 
    .block {
        padding-top:3rem;
        padding-bottom:3rem;
    }    
    .tl1 {
        font-size:25px;
    }
    .tl2 {
        font-size:22px;
    } 
    .tl3 {
        font-size:18px;
    } 
    .tl4 {
        font-size:70px;
        line-height:70px;
    }    
    .tl5 {
        font-size:32px;
    }  
    .tl6 {
        font-size:36px;
    }  
    .but1 {
        width:40%;
        font-size:24px;
        margin-top:50px;
        margin-bottom:50px;
    }
    .but2 {
        width:40%;
        margin-top:20px;
        font-size:24px;
    }    
    .info1 {
        padding-bottom:30px;
    } 
.head1-1 {
    font-size:1.6rem;
    margin-bottom:1.5rem;    
    }    
}
.cls-1 {
    color:var(--color1);
}
.cls-2 {
    color:var(--color2);
}

.tl1 {
    font-weight:bold;
}
.tl4 {
    font-weight:bold;
}

.but1 {
    background:#F2AF1F;
    padding:1rem 2rem;
    border-radius:1rem;
    font-weight:600;
    display:inline-block;
}
.but2 {
    background:#F2AF1F;
    padding:1rem 2rem;
    border-radius:1rem;
    font-weight:600;
    display:inline-block;
}

.bg-line {
    position: absolute;
    height: 100%;
    background: #222;
    left: 50%;
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);
}
   
.circle {
	width: 44px;
    height: 44px;
    background: #222;
    border-radius: 100%;
    border: 2px solid #fff;
	}

.digit {	
	position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    text-align: center;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    color: #fff;
}   
   
   
.hd1 {
    text-transform:uppercase;
    font-weight:400;
    color:var(--color8);
    padding-left:1.5rem;
    padding-top:0.5rem;
    padding-bottom:0.5rem;
}

.hd2 {
    font-weight:600;
}

.hd3 {
    font-family: 'Oswald', sans-serif;
    font-weight:500;
    text-transform:uppercase;
    text-align:center;
}
.country {
    font-weight:600;
    border-bottom: 1px solid #4f8d5f;
}

.region {
    color:var(--color1);
}

div.11  (
    background:#FFF;
    padding:1rem 1rem 1rem 2rem;
    border-left:4px solid #EF7F1A;
    margin-bottom:2rem;
)

div.11 p (
    font-family: 'Oswald';
    font-weight:500;
    text-transform:uppercase;
)

.ankor {
    display:block;
}

.line1 {
    font-family: 'Oswald', sans-serif;
    color:#FFF;
    font-weight:500;
}

.line2 {
    font-family: 'Oswald', sans-serif;
    color:#FFF;
    font-weight:300;
}

div.menutop a, .menutop a:link, .menutop a:visited  {
    color: var(--color3);
    transition: 0.5s;
    
}
div.menutop .menutop a:hover { 
	color: var(--color4);
	transition: 0.5s;
	}
    
.hdline {
    border-top:5px solid #EF7F1A;
    width:25%;
}  

div.but {
    padding:12px;
}

div.but a, .but a:link, .but a:visited  { 
    font-family: 'Montserrat', sans-serif;
	text-decoration:none;
	color:#333;
	font-size:20px;
	font-weight:500;
	text-transform:uppercase
	
	border-radius:6px;
	background:#FFF;
	transition: 0.5s;
	}	
div.but a:hover  { 
	color:#FFF;
	background:#EF7F1A;
	transition: 0.5s;
	}

/* ------------------------ menu-top  --------------------------- */

a.menu-top, a.menu-top:link, a.menu-top:visited {
    color:#FFF;
    text-decoration:none;
    font-size:13px;
}
a.menu-top:hover {
    text-decoration:underline;
}

/* ------------------------ menu-down  --------------------------- */

a.menu-down, a.menu-down:link, a.menu-down:visited {
    color:#999;
    text-decoration:none;
}
a.menu-down:hover {
    color: #666;
}

<!--  ------------       breadcrumbs  ----------------       -->
.bc {
  font-size: 0.9rem;
  color: #999;
  margin-bottom: 2rem;
  list-style: none;
}
.bc > li {
  display: inline-block;
}

.bc ul {
    margin-left: 0; 
    padding-left: 0; 
   }	
div.bc a, a:visited {
    text-decoration:none; 
    color: #999;
    
}
.bc a:hover {
    text-decoration:underline; 
    color: #555;

}
div.menu a, a:link, a:visited  {
  text-decoration:none;
  color:#0E58A6;
}
div.menu a:hover {
  text-decoration:underline;
  color:#F00;
}

.d1 {
fill:#999;
transition: 0.5s;
}

.d1:hover {
fill:#666;
transition: 0.5s;
}



.menuxs div {
    border-bottom:1px dashed #626172;
    padding:0.5rem 0;
}
.nav {
    width: 70%;
    min-width: 70%;
    /* фиксируем и выставляем высоту панели на максимум */
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    margin: 0;
    /* сдвигаем (прячем) панель относительно правого края страницы */
    right: -380px;
    /* внутренние отступы */
    padding: 15px 20px;
    /* плавный переход смещения панели */
    -webkit-transition: right 0.3s;
    -moz-transition: right 0.3s;
    transition: right 0.3s;
    /* определяем цвет фона панели */
    background: var(--color4);
    /* поверх других элементов */
    z-index: 2000;
}


/**
 * Кнопка переключения панели
 * тег <label>
 */

.nav-toggle {
    /* абсолютно позиционируем */
    position: fixed;
    /* относительно правого края панели */
    right: 0;
    /* отступ от верхнего края панели */
    top: 1em;
    /* внутренние отступы */
    padding: 0.5em;
    /* определяем цвет фона переключателя
     * чаще вчего в соответствии с цветом фона панели
    */
    background: inherit;
    opacity:0.5;
    /* цвет текста */
    color: #AAA;
    /* вид курсора */
    cursor: pointer;
    /* размер шрифта */
    font-size: 1.2em;
    line-height: 1;
    /* всегда поверх других элементов страницы */
    z-index: 2001;
    /* анимируем цвет текста при наведении */
    -webkit-transition: color .25s ease-in-out;
    -moz-transition: color .25s ease-in-out;
    transition: color .25s ease-in-out;
}


/* определяем текст кнопки 
 * символ Unicode (TRIGRAM FOR HEAVEN)
*/

.nav-toggle:after {
    content: '\2630';
    text-decoration: none;
}


/* цвет текста при наведении */

.nav-toggle:hover {
    color: #f4f4f4;
}


/**
 * Скрытый чекбокс (флажок)
 * невидим и недоступен :)
 * имя селектора атрибут флажка
 */

[id='nav-toggle'] {
    position: absolute;
    display: none;
}


/**
 * изменение положения переключателя 
 * при просмотре на мобильных устройствах
 * когда навигация раскрыта, распологаем внутри панели
*/

[id='nav-toggle']:checked ~ .nav > .nav-toggle {
    left: auto;
    right: 2px;
    top: 1em;
}


/**
 * Когда флажок установлен, открывается панель
 * используем псевдокласс:checked
 */

[id='nav-toggle']:checked ~ .nav {
    right: 0;
    box-shadow:-4px 0px 20px 0px rgba(0,0,0, 0.5);
    -moz-box-shadow:-4px 0px 20px 0px rgba(0,0,0, 0.5);
    -webkit-box-shadow:-4px 0px 20px 0px rgba(0,0,0, 0.5);
    overflow-y: auto;
}


/* 
 * смещение контента страницы
 * на размер ширины панели,
 * фишка необязательная, на любителя
*/

[id='nav-toggle']:checked ~ main > article {
    -webkit-transform: translateX(-320px);
    -moz-transform: translateX(-320px);
    transform: translateX(-320px);
}


/*
 * изменение символа переключателя,
 * привычный крестик (MULTIPLICATION X), 
 * вы можете испльзовать любой другой значок
*/

[id='nav-toggle']:checked ~ .nav > .nav-toggle:after {
    content: '\2715';
}


/**
 * профиксим баг в Android <= 4.1.2
 * см: http://timpietrusky.com/advanced-checkbox-hack
 */

body {
    -webkit-animation: bugfix infinite 1s;
}

@-webkit-keyframes bugfix {
    to {
      padding: 0;
    }
}


/**
 * позаботьтимся о средних и маленьких экранах
 * мобильных устройств
 */

@media screen and (min-width: 320px) {
    html,
    body {
      margin: 0;
      overflow-x: hidden;
    }
}

@media screen and (max-width: 320px) {
    html,
    body {
      margin: 0;
      overflow-x: hidden;
    }
    .nav {
      width: 100%;
      box-shadow: none
    }
}


/**
 * Формируем стиль заголовка (логотип) панели 
*/

.nav h2 {
    width: 90%;
    padding: 0;
    margin: 10px 0;
    text-align: center;
    text-shadow: rgba(255, 255, 255, .1) -1px -1px 1px, rgba(0, 0, 0, .5) 1px 1px 1px;
    font-size: 1.3em;
    line-height: 1.3em;
    opacity: 0;
    transform: scale(0.1, 0.1);
    -ms-transform: scale(0.1, 0.1);
    -moz-transform: scale(0.1, 0.1);
    -webkit-transform: scale(0.1, 0.1);
    transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
    transition: opacity 0.8s, transform 0.8s;
    -ms-transition: opacity 0.8s, -ms-transform 0.8s;
    -moz-transition: opacity 0.8s, -moz-transform 0.8s;
    -webkit-transition: opacity 0.8s, -webkit-transform 0.8s;
}

.nav h2 a {
    color: #EEE;
    text-decoration: none;
    text-transform: uppercase;
}


/*плавное появление заголовка (логотипа) при раскрытии панели */

[id='nav-toggle']:checked ~ .nav h2 {
    opacity: 1;
    transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
}


/**
 * формируем непосредственно само меню
 * используем неупорядоченный список для пунктов меню
 * прикрутим трансфомации и плавные переходы
 */

.nav > ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav > ul > li {
    line-height: 2.5;
    opacity: 0;
    -webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
    -webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s;
    -moz-transition: opacity .5s .1s, -moz-transform .5s .1s;
    -ms-transition: opacity .5s .1s, -ms-transform .5s .1s;
    transition: opacity .5s .1s, transform .5s .1s;
}

[id='nav-toggle']:checked ~ .nav > ul > li {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}


/* определяем интервалы появления пунктов меню */

.nav > ul > li:nth-child(2) {
    -webkit-transition: opacity .5s .2s, -webkit-transform .5s .2s;
    transition: opacity .5s .2s, transform .5s .2s;
}

.nav > ul > li:nth-child(3) {
    -webkit-transition: opacity .5s .3s, -webkit-transform .5s .3s;
    transition: opacity .5s .3s, transform .5s .3s;
}

.nav > ul > li:nth-child(4) {
    -webkit-transition: opacity .5s .4s, -webkit-transform .5s .4s;
    transition: opacity .5s .4s, transform .5s .4s;
}

.nav > ul > li:nth-child(5) {
    -webkit-transition: opacity .5s .5s, -webkit-transform .5s .5s;
    transition: opacity .5s .5s, transform .5s .5s;
}

.nav > ul > li:nth-child(6) {
    -webkit-transition: opacity .5s .6s, -webkit-transform .5s .6s;
    transition: opacity .5s .6s, transform .5s .6s;
}

.nav > ul > li:nth-child(7) {
    -webkit-transition: opacity .5s .7s, -webkit-transform .5s .7s;
    transition: opacity .5s .7s, transform .5s .7s;
}


/**
 * оформление ссылок пунктов меню
 */

.nav > ul > li > a {
    display: inline-block;
    position: relative;
    padding: 0;
    font-family: 'Montserat', sans-serif;
    font-weight: 300;
    font-size: 18px;
    color: #EEE;
    width: 100%;
    text-decoration: none;
    /* плавный переход */
    -webkit-transition: color .5s ease, padding .5s ease;
    -moz-transition: color .5s ease, padding .5s ease;
    transition: color .5s ease, padding .5s ease;
}


/**
 * состояние ссылок меню при наведении
 */

.nav > ul > li > a:hover,
.nav > ul > li > a:focus {
    color: white;
    padding-left: 10px;
    font-weight:500;
}


/**
 * линия подчеркивания ссылок меню
 */

.nav > ul > li > a:before {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    -webkit-transition: width 0s ease;
    transition: width 0s ease;
}

.nav > ul > li > a:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    background: #AAA;
    -webkit-transition: width .5s ease;
    transition: width .5s ease;
}


/**
 * анимируем линию подчеркивания 
 * ссылок при наведении
 */

.nav > ul > li > a:hover:before {
    width: 0%;
    background: #AAA;
    -webkit-transition: width .5s ease;
    transition: width .5s ease;
}

.nav > ul > li > a:hover:after {
    width: 0%;
    background: transparent;
    -webkit-transition: width 0s ease;
    transition: width 0s ease;
}

.bg-animation2 {
	animation: bg-animation2 300s ease-in-out infinite;
	}
@keyframes bg-animation2 {
    0% {
        background-size: 100%;
        background-position: 50% 50%;
    }
    20% {
        background-size: 200%;
        background-position: 0 100%;
    }    
    40% {
        background-size: 110%;
        background-position: 20% 80%;

    }
    60% {
        background-size: 300%;
        background-position: 100% 10%;
    }
    80% {
        background-size: 120%;
        background-position: 40% 70%;

    }    
    100% {
        background-size: 100%;
        background-position: 50% 50%;
    }
}	

body.modal-open {
    overflow: auto;
    padding-right: 0px !important;
}	

.blink-1 {
  animation-name: blink;
  animation-timing-function: linear;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
}
.blink-2 {
  animation-name: blink;
  animation-timing-function: linear;
  animation-duration: 2s;
  animation-iteration-count: infinite;  
}
.blink-3 {
  animation-name: blink;
  animation-timing-function: linear;
  animation-duration: 3s;
  animation-iteration-count: infinite;  
}
@keyframes blink {
  50% {
    opacity: 0.2;
  }
}

.d1 {
    position: relative;
    margin-top:5px;
    height:40vh;
}
.d2 {
    min-height:40%;
    background-color:rgba(0, 0, 0, 0.4);
    position: absolute;
    bottom:0;
    text-align:center;
    padding:5px 20px;
    width:100%;
}
.d3 {
    color:#d9e021;
    font-size:30px;
}
.d4 {
    color:#FFF;
    font-size:24px;
}