@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap&subset=cyrillic');

body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
}
header {
  height: 56px;
}
a {
    color: #9748dc;
    text-shadow: 1px 1px 2px #000;
}
a:hover {
  text-decoration: none;
}
.bg-this {
  background-color: #8817eb47;
}
.main nav.navbar {
    background-color: #8817eb47;
}
nav.navbar {
  z-index: 100;
  background-color: #8817eb;
}
.h-100vh {
  min-height: 100vh;
}
.h-70vh {
  min-height: 70vh;
}
.mb_h100 {
  height: calc(100vh - 56px);
}
.first_screen {
    width: 100%;
    height: 100vh;
}
.az_btn {
    background-color: #8817eb;
    border-color: #8817eb;
    border-radius: 0;
    box-shadow: 2px 2px 4px #000;
    text-shadow: 1px 1px 2px #000;
}
.banner_wrapper {
    padding: 10px;
    background-color: #8817eb47;
    color: white;
    max-width: 510px;
    max-height: 260px;
    text-shadow: 1px 1px 2px #000;
    width: 100%;
    height: 100vh;
    justify-content: center;
    border: none;
    border-radius: 0;
}
.banner_wrapper .h2 {
    font-size: 22px;
}
.first_screen {
    width: 100%;
    height: 100vh;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}
.tr_title {
    font-size: 3rem;
    font-weight: bold;
}
.tr_divider {
    width: 10%;
    background: #8817eb;
    box-shadow: 1px 2px 4px #000;
    height: 4px;
    display: inline-block;
    margin: 15px 0;
}
.section_title {
    font-size: 3rem;
    margin: 20px 0;
}
.check_p {
    width: 45px;
}
.text_check {
    margin-left: 10px;
}
blockquote.blockquote {
    font-size: 1.8rem;
}
.obl_success, .obl_fail {
  display: none;
}
.navbar-nav a {
    font-weight: bold;
    color: white !important;
    text-shadow: 1px 1px 2px #000;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}
.navbar-nav a:not(.social_icon):hover {
    color: white !important;
    text-shadow: 1px 1px 2px #000;
    border-bottom: 2px solid #757575;
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );
}
.social_icon {
    width: 35px;
    padding: 3px;
}

.social_icon {
    width: 35px;
    padding: 3px;
}
nav.navbar {
    box-shadow: 2px 2px 14px #0000008f;
}
.intro_b {
    max-width: 510px;
    color: white;
    text-shadow: 2px 2px 2px #000;
    margin-bottom: 10px;
    padding: 15px 10px;
}
.lang {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}
.lng_btn {
    padding: 5px;
    border: 1px solid #ccc !important;
    border-radius: 5px;
    align-self: center;
}
.content_article img {
    max-width: 100%;
    height: auto;
}
img.social_m {
    width: 35px;
}
/* to top button */
#toTop {
  z-index: 100;
  z-index: 100;
  position: fixed;
  right: 10px;
  bottom: 90px;
  text-align: center;
  cursor: pointer;
}
.animate_wrapper {
    height: 30px;
    position: relative;
    overflow: hidden;
}
img.arrows {
    position: absolute;
    top: 0;
    display: block;
    right: calc(50% - 10px);
    width: 20px;
    -webkit-animation: 0.8s linear 0s infinite alternate move_eye;
   -moz-animation: 0.8s linear 0s infinite alternate move_eye;
     -o-animation: 0.8s linear 0s infinite alternate move_eye;
        animation: 0.8s linear 0s infinite alternate move_eye;
}
@-webkit-keyframes move_eye { from { top:0; } to { top:10px; }  }
   @-moz-keyframes move_eye { from { top:0; } to { top:10px; }  }
     @-o-keyframes move_eye { from { top:0; } to { top:10px; }  }
        @keyframes move_eye { from { top:0; } to { top:10px; }  }
/* to top button */
/* md form inputs */
.group 			  {
  position:relative;
  margin-bottom:45px;
}
input.q_form, textarea.q_form				{
  font-size:18px;
  padding:10px 10px 10px 5px;
  display:block;
  width:100%;
  border:none;
  background: transparent;
  border-bottom:1px solid #757575;
}

input.q_form:focus, textarea.q_form:focus		{ outline:none; }

/* LABEL ======================================= */
label 				 {
  color:#999;
  font-size:18px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  transition:0.2s ease all;
  -moz-transition:0.2s ease all;
  -webkit-transition:0.2s ease all;
}

/* active state */
input.q_form:focus ~ label, input.q_form:valid ~ label, textarea.q_form:focus ~ label, textarea.q_form:valid ~ label 		{
  top:-20px;
  font-size:14px;
  color:#5264AE;
}

/* BOTTOM BARS ================================= */
.bar 	{ position:relative; display:block; width:100%; }
.bar:before, .bar:after 	{
  content:'';
  height:2px;
  width:0;
  bottom:1px;
  position:absolute;
  background:#5264AE;
  transition:0.2s ease all;
  -moz-transition:0.2s ease all;
  -webkit-transition:0.2s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%;
}

/* active state */
input.q_form:focus ~ .bar:before, input.q_form:focus ~ .bar:after, textarea.q_form:focus ~ .bar:before, textarea.q_form:focus ~ .bar:after  {
  width:50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
  position:absolute;
  height:60%;
  width:100px;
  top:25%;
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
input.q_form:focus ~ .highlight, textarea.q_form:focus ~ .highlight  {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
/* md form inputs */






@media  only screen  and (max-width : 480px) {
  .banner_wrapper .h2, .banner_wrapper .h3 {
      font-size: 20px;
  }
  .banner_wrapper h1 {
      font-size: 30px;
  }
}

@media  only screen  and (min-width : 1170px) {
    .navbar-flex {
        max-width: 1170px;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
}








.test{}