@import url(reset.css);
@import url(animate.css);
@import url(my_font.css);

/* https://autoprefixer.github.io/ru/ */

:root {
/* --bg_section_pic: #0094ff66; */
--bg_section_pic: rgba(0, 148, 255, 0.4);
--bg_block_gradient: linear-gradient(180deg, rgba(154, 193, 241, 0.59) 0%, rgba(255,255,255,0) 100%);
--bg_section: #2B6691;
--font_color: #2B6691;
/* color: #395E95; */
--popup_form_font_size: 10px;
--main_font_size: 10px;
}

/* /themes/zov_1/assets/font/my_font */
/* @font-face { */
  /* font-family: 'my_font'; */
  /* src: url('../font/my_font.eot?63703515'); */
  /* src: url('../font/my_font.eot?63703515#iefix') format('embedded-opentype'), */
       /* url('../font/my_font.woff2?63703515') format('woff2'), */
       /* url('../font/my_font.woff?63703515') format('woff'), */
       /* url('../font/my_font.ttf?63703515') format('truetype'), */
       /* url('../font/my_font.svg?63703515#my_font') format('svg'); */
  /* font-weight: normal; */
  /* font-style: normal; */
/* } */


/* @font-face { */
  /* font-family: 'Cuprum'; */
	/* font-display: fallback; */
  /* src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("https://fonts.googleapis.com/css?family=Cuprum:400,400i,700,700i"); } */
	

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
	font-display: fallback;
  src: url("../webfonts/fa-regular-400.eot");
  src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), url("../webfonts/fa-regular-400.ttf") format("truetype"), url("../webfonts/fa-regular-400.svg#fontawesome") format("svg"); }

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
	font-display: fallback;
  src: url("../webfonts/fa-solid-900.eot");
  src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"), url("../webfonts/fa-solid-900.svg#fontawesome") format("svg"); }


html {
	/* background: #0B2D61; */
  height: 100%;
}
body {
  display: -ms-flexbox; 
  display: -webkit-flex; 
  display: flex; 
  -ms-flex-direction: column; 
  -webkit-flex-direction: column; 
  flex-direction: column;
	height: auto;
	min-height: 100%;
	font-family: 'Nunito','Cuprum', sans-serif;
	font-display: fallback;
}
/* hyphenate ---------------------------------------------------------------  */
.hyphenate {
hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
}
/* breadcrumbs -------------------------------------------------------------  */
div.breadcrumbs {
display: flex;
justify-content: left;
width: 100%;
padding: 5em 0 4em;
}
div.breadcrumbs > a {
font-size: calc(var(--main_font_size) * 2);
text-transform: uppercase;
font-family: 'Cuprum', sans-serif;
text-decoration: none;
color: #3097d1;	
}
div.breadcrumbs > a:hover, div.breadcrumbs > a:focus {
color: #216a94;
/* text-decoration: underline; */
}
/* header ------------------------------------------------------------------  */
div.header {
height: 100px;
display: flex;
flex-direction: row;
justify-content: space-around;
background: #fff;
}
div.header__block1 {
display: flex;
flex-grow: 1;
flex-direction: row;
align-items: center;
justify-content: center;
}
a.header__block1__a  {
display: contents;
}
img.header__block1__a_img {
width: 66px;
height: 61px;
object-fit: fill;
}
span.header__block1__a_span {
color: #E21C21;
display: inline-block;
font-family: serif;
font-size: 3rem;
font-weight: bold;
letter-spacing: 0.05em;
text-transform: uppercase;
white-space: nowrap;
}
span.header__block1__a_span::after {
content: 'Благотворительный фонд';
display: block;
border-top: 1px solid #de898c;
margin: 2px 0 0 0;
padding: 3px 0 0 0;
font-family: open sans,sans-serif;
font-size: 1.2rem;
font-weight: normal;
letter-spacing: 0.05em;
text-transform: none;
text-align: center;	
}	
div.header__block2 {
display: flex;
flex-grow: 1;
flex-direction: row;
align-items: center;
justify-content: space-around;
}
a.header__block2_a {
color: rgb(115,112,112);
font-size: 2rem;
font-family: open sans,sans-serif;
text-decoration: none;
white-space: nowrap;
}
a.header__block2_a:hover, .header_phone:hover::before, .header_mail:hover::before {
color: #25B02A;
}
.header_phone::before {
content: "\e80e";
font-family: my_font;	
color: #E21C21;
font-size: 2.5rem;
padding: 0 5px 0 0;
vertical-align: sub;
}
.header_mail::before {
content: "\f1fa";
font-family: my_font;	
color: #E21C21;
font-size: 2.5rem;
padding: 0 5px 0 0;
vertical-align: sub;
}
div.header__block3 {
display: flex;
flex-grow: 1;
flex-direction: row;
align-items: center;
justify-content: center;
}
a.header__block3_button {
padding: 10px 40px;
border-radius: 4px;
font-size: 2rem;
font-weight: bold;
background: #fff;
color: #E21C21;
border: 2px solid #E21C21;
transition: border-color .4s ease 0s,background-color .4s ease 0s;
text-decoration: none;
white-space: nowrap;
}
a.header__block3_button:hover {
background: #25B02A;
color: #fff;
border: 2px solid #25B02A;
transition: color .4s ease 0s,border-color .4s ease 0s,background-color .4s ease 0s;	
}	
/* ------------------------------------------------------------------- header */

.home__header {
background: #77c4f0;
display: flex;
flex-direction: row; 
flex-wrap: wrap;
}
div.home__header__left {
background-image: url('/themes/scarlet/assets/img/hero-1-circle-2.png');
background-position: 0% 80%;
background-size: 10rem;
background-repeat: no-repeat;
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
flex-grow: 1;
padding: 6em 1em 0;
}

div.home__header__left > h1 {
color: #0e1133;
font-weight: 700;
font-size: calc(var(--main_font_size) * 6);
line-height: 1;
margin-bottom: 0.5em;
text-align: center;
}
div.home__header__left > h1 span.yellow-shape {
  position: relative;
  z-index: 1;
  transition: all 0.3s ease-out 0s;
}
div.home__header__left > h1 span.yellow-shape img {
  position: absolute;
  bottom: 0;
  left: -8px;
  z-index: -1;
  -webkit-animation: section-animation 3s infinite;
  animation: section-animation 3s infinite;
  transition: all 0.3s ease-out 0s;
  vertical-align: middle;
}
div.home__header__left > h2 {
  font-size: calc(var(--main_font_size) * 2.5);
  color: #0e1133;
   font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
div.soc {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
justify-content: space-around;
padding: 0 2em 4em;
width: 100%;
} 
div.soc > span.soc {
  background: #5773ff;
  display: inline-block;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 2px solid #fff;
  /* margin: 3em 3em 0; */
  margin: 3em 0 0;
  box-shadow: 0px 3px 4px #000;
} 

div.soc > span.soc > a {
  font-size: calc(var(--main_font_size) * 3);
  color: #fff;
} 
div.home__header__left > img.circle {
  position: absolute;
  top: 10%;
  left: 5%;
  -webkit-animation: circle-1 6s linear 0s infinite alternate;
  -moz-animation: circle-1 6s linear 0s infinite alternate;
  -o-animation: circle-1 6s linear 0s infinite alternate;
  animation: circle-1 6s linear 0s infinite alternate;
  transition: all 0.3s ease-out 0s;
}  



div.home__header__rigth {
  width: 50%;
  background: url('/themes/scarlet/assets/img/hero-shape-purple.png') 25% 60% no-repeat, url('/themes/scarlet/assets/img/hero-1-dot-2.png') 100% 15% no-repeat;
  /* background-position: 25% 60%; */
  /* background-size: 60rem; */
  /* background-repeat: no-repeat; */
  justify-content: center;
  display: flex;
  position: relative;
}
div.home__header__rigth img {
  object-fit: cover;
object-position: bottom;
height: 100%;


position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
div.home__header__rigth__promo1, div.home__header__rigth__promo2 {
  position: absolute;
display: flex;
align-items: center;
flex-direction: row;
background: #fff;
padding: 1em;
border-radius: 4px;
box-shadow: 0 3px 10px #000;
}
div.home__header__rigth__promo1 {
  top: 60%;
  left: 5%;
}
div.home__header__rigth__promo1 > span, div.home__header__rigth__promo2 > span {
background: #fd9001;
display: inline-block;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
font-size: calc(var(--main_font_size) * 3);
color: #fff;
}
div.home__header__rigth__promo2 > span {
  background: #f7041b;  
padding: 0 3px 0 0;
}
div.home__header__rigth__promo1 > p, div.home__header__rigth__promo2 > p {
margin: 0 10px;
font-size: calc(var(--main_font_size) * 1.6);
}
div.home__header__rigth__promo1 > p > b, div.home__header__rigth__promo2 > p > b {
font-weight: 700;  
}  
div.home__header__rigth__promo2 {
  top: 35%;
  right: 5%;
}
div.home__header__menu {
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex-grow: 1;
}
div.home__header__menu > a {
  display: flex;
  padding: 10px;
  flex-grow: 1;
  justify-content: center;
  font-size: calc(var(--main_font_size) * 3);
color: #fff;
} 
div.home__header__menu > a:nth-child(1) {
background: #2d69f0;
}
div.home__header__menu > a:nth-child(2) {
  background: #dd246e;
}
div.home__header__menu > a:nth-child(3) {
  background: #0cae74;
}
/* Menu Top ----------------------------------------------------------------  */
nav.menutop {
background: #000;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
font-size: 1.5rem;
/* text-transform: uppercase; */
/* font-weight: bold; */
font-family: Arial,Helvetica,sans-serif;
box-shadow: 0 2px 3px #999;
padding: 0 9% 0 8%;
z-index: 2;
}
nav.menutop a.logo {
padding: 5px;
display: flex;
align-items: center;	
}
nav.menutop a.logo img {
width: 40px;
margin: 0 1em 0 0;
}	
nav.menutop a {
color: #fff;	
}	
	
.nav {
margin-bottom: 0;
padding: 0;
list-style: none;
              /* border: 1px solid green; */
width: 100%;
/* margin: 0 auto; */
justify-content: space-between;
display: flex;
}
.nav-pills > li + li {
margin-left: 0;
}
.nav-pills > li {
float: left;
}
.nav > li {
position: relative;
display: block;
}
.nav > li > a {
position: relative;
/* display: block; */
display: flex;
padding: 10px 15px;
color: #fff;
height: 100%;
align-items: center;
min-width: 65px;

box-sizing: border-box;
}
/* .nav > li > a:hover, a:focus { */
    /* color: #216a94; */
    /* text-decoration: underline; */
/* } */
.nav > li > a:hover, .nav > li > a:focus {
text-decoration: none;
background-color: #eee;
color: #216a94;
}
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
color: #fff;
background-color: #25B02A;
}
.nav-pills > li > a {
border-radius: 0;
}
.nav-pills > li > a.dropdown-toggle {
    /* border: red 1px solid; */
    display: flex;
    align-self: center;
    height: 100%;
    align-items: center;
min-width: 65px;
justify-content: space-between;
}
.open > .dropdown-menu {
display: block;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 0 0;
margin: 0 0 0;
list-style: none;
/* font-size: 16px; */
font-size: inherit;
text-align: left;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid #0003;
border-radius: 0;
-webkit-box-shadow: 0 6px 12px #0003;
box-shadow: 0 6px 12px #0003;
background-clip: padding-box;
}
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
color: #fff;
text-decoration: none;
outline: 0;
background-color: #25B02A;
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: bold;
line-height: 1.6;
color: #333;
white-space: nowrap;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 5px;
vertical-align: middle;
border-top: 4px dashed;
border-top: 4px solid \9;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
background-color: #7DB8E4;
height: auto !important;	
}
.sticky + .content {
padding-top: 60px;
} 	
/* ----------------------------------------------------------------- Menu Top */

/* Menu Top Account --------------------------------------------------------- */
.menu_guest, .menu_user {
width: 70px;	
}
/* ul.menu_account a.dropdown-toggle, ul.menu_account a.dropdown-toggle:hover { */
/* color: #fff0; */
/* } */
/* ul.menu_account .caret { */
/* color: #ffffff;	 */
/* } */

ul.menu_guest a:before {
content: '\e83b'; 
font-family: my_font;
padding: 0 5px 0 0;
}
ul.menu_user a.dropdown-toggle:before {
content: '\e82b'; 
font-family: my_font;
padding: 0 7px 0 0;
}
/* ul.menu_account .caret:hover, ul.menu_account a.dropdown-toggle:hover:before, ul.menu_account a.dropdown-toggle:focus:before { */
/* color: #262626;	 */
/* }	 */
/* ul.menu_account .dropdown-menu > li > a:hover, ul.menu_account .dropdown-menu > li > a:focus { */
/* text-decoration: none; */
/* color: #262626; */
/* background-color: #f5f5f5; */
/* } */
/* --------------------------------------------------------- Menu Top Account */

/* div.breadcrumbs { */
/* display: flex; */
/* justify-content: left; */
/* width: 100%; */
/* padding: 4rem 0; */
/* } */
/* div.breadcrumbs > a { */
/* font-size: 2rem; */
/* text-transform: uppercase; */
/* font-family: 'Cuprum', sans-serif; */
/* text-decoration: none; */
/* color: #3097d1;	 */
/* }	 */



/* Footer ------------------------------------------------------------------- */
div#footer {
display: flex;
padding: 0.5em 0.5em;
justify-content: center;
font-size: 2em;
flex-direction: row;
flex-wrap: wrap;
}
div#footer > a {
font-size: calc(var(--main_font_size) * 2);
text-transform: uppercase;
/* font-family: 'Cuprum', sans-serif; */
text-decoration: underline;
color: #3097d1;
margin: 0.5em 2em;	
}
div#footer > a:hover {
color: #216a94;
}	

/* ------------------------------------------------------------------- Footer */
/* Content ------------------------------------------------------------------ */
div.content {
padding: 0 16em 10em;
font-size: var(--main_font_size);
}
div.content h1 {
margin: 0 0 1em;
color: #f00;
font-size: calc(var(--main_font_size) * 3);
font-weight: bold;
text-align: center;
}
div.content h2 {
margin: 0 0 1em;
color: #80889b;
font-size: calc(var(--main_font_size) * 2);
font-weight: bold;
text-align: left;
}
div.content > p {
color: #80889b;	
padding: 0 0 1.5em;
font-size: calc(var(--main_font_size) * 2);
line-height: 1.3;
}
/* ------------------------------------------------------------------ Content */

/* contacts --------------------------------------------------------------------- */
.contacts {
display: flex;	
flex-direction: column;
position: relative;
height: 100%;
align-items: center;
align-self: center;
width: 100%;
color: #FFF;
padding: 0 5% 1em;
line-height: 1.3;
font-size: calc(var(--main_font_size) * 2);
margin: 4px 0 0;
background: var(--bg_section_pic);
background: #000;
}

.contacts:before {
background-position: center;   
background-repeat: no-repeat; 
background-size: cover;
background-image: url(../img/0b3.jpg);
filter: blur(0.1rem);
content: "";
position: absolute;
left: 0;
right: 0;
z-index: -2;
height: 100%;
transform: scaleX(-1);
}
.contacts:after {
background-position: center; 
background-size: 1.5em;
background-image: url(../img/set.png);
filter: blur(0.1rem);
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: -1;
opacity: 0.05;
height: 100%;
}

.contacts h2 {
margin: 1em auto 0;
font-size: 2em;
text-transform: uppercase;
text-align: center;
}

.contacts_block {
border: 5px solid #FFF;
width: 100%;
border-radius: 10px;
display: flex;
flex-direction: row;
align-items: center;
align-self: center;
justify-content: space-evenly;
-ms-flex-pack: center;
margin: 2em auto;
padding: 0 0 0.5em;
background: var(--bg_block_gradient);
flex-wrap: wrap;
}
.contact_block {
display: flex;
flex-direction: column;
align-items: center;
padding: 1.5em 0;
min-width: 250px;
width: 33%;
}
h3.contact {
font-weight: 900;
font-size: 1.5em;
}
a.contact {
margin: 5px auto 20px;
display: inline-block;
font-size: 1em;
color: #FFF;
text-align: center;
}	
a.phone:before {
content: "\f098";
font-family: my_font;
font-family: my_font;
margin: 0.1em auto 0.2em;
display: inline-block;
font-size: 3em;
color: #FFF;
width: 100%;
text-align: center;
}	
a.whatsapp:before {
content: "\f232";
font-family: my_font;
margin: 0.1em auto 0.2em;
display: inline-block;
font-size: 3em;
color: #FFF;
width: 100%;
text-align: center;
}
a.mail:before {
content: "\f1fa";
font-family: my_font;
margin: 0.1em auto 0.2em;
display: inline-block;
font-size: 3em;
color: #FFF;
width: 100%;
text-align: center;
}	

a.contact:hover, a.phone:hover:before, a.whatsapp:hover:before, a.mail:hover:before {
color: #59F20E;		
}	
.contact_block > p {
letter-spacing: .064em;	
}

@media only screen and (max-width : 769px) {
.home__header {
  /* height: 800px; */
  background: #77c4f0;
  display: flex;
  flex-direction: column; 
  flex-wrap: wrap;
}
div.home__header__left, div.home__header__rigth {
width: 100%;
order: 2;
}
div.home__header__rigth {
min-height: 50em;
}
div.home__header__menu {
  order: 1;
}

} 


@media only screen and (max-width : 670px) {
.contacts {
padding: 0 1em 0;
/* font-size: 3.5em; */
}
.contacts_block {
flex-direction: column;
margin: 2em auto 0.5em;
}

}	
/* --------------------------------------------------------------------- contacts */

/* Form --------------------------------------------------------------------- */

div.popup__formblock {
display: flex;
flex-direction: column;
min-width: 250px;
box-sizing: border-box;
pointer-events: auto;
color: inherit;
}

div.popup__formblock form {
display: flex;
flex-direction: column;
width: 100%;
box-sizing: border-box;
color: inherit;
}

div.popup__formblock select {
width: 100%;
padding: 0.6em;
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #ffffff 0%,#ffffff 100%);
-ms-appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-repeat: no-repeat, repeat;
background-position: right 1em top 50%, 0 0;
background-size: .65em auto, 100%;
border: 1px solid #999;
margin: 0 0 1.5em;
font-size: calc(var(--main_font_size) * 2);
color: #555;
}
div.popup__formblock select::-ms-expand {
display: none;
}
div.popup__formblock select:required:invalid {
color: #767676;
}
div.popup__formblock option {
color: #555;	
} 


div.popup__formblock input {
background: #FFFFFF;
border: 1px solid #999;
color: #555;
font-size: calc(var(--main_font_size) * 2);
margin: 0 0 1.5em;
padding: 0.6em;
}
div.popup__formblock input#field-remember_me {
align-self: baseline;
}
div.popup__formblock input:-webkit-autofill, div.popup__formblock input:-webkit-autofill:hover, div.popup__formblock input:-webkit-autofill:focus {
-webkit-text-fill-color: #555;
box-shadow: 0 0 0 1000px rgba(255, 255, 255, .3) inset;
transition: background-color 5000s ease-in-out 0s;
}

/* .popup__formblock input[placeholder] { text-overflow: ellipsis; color: #767676; } */
div.popup__formblock input::-moz-placeholder { text-overflow: ellipsis; color: #767676; } 
div.popup__formblock input:-moz-placeholder  { text-overflow: ellipsis; color: #767676; } 
div.popup__formblock input:-ms-input-placeholder { text-overflow: ellipsis; color: #767676; }
div.popup__formblock input::-webkit-input-placeholder { text-overflow: ellipsis; color: #767676; }

/* плавное изменение прозрачности  placeholder-а при фокусе */
div.popup__formblock input::-webkit-input-placeholder       {opacity: 1; transition: opacity 0.3s ease;}
div.popup__formblock input::-moz-placeholder                {opacity: 1; transition: opacity 0.3s ease;}
div.popup__formblock input:-moz-placeholder                 {opacity: 1; transition: opacity 0.3s ease;}
div.popup__formblock input:-ms-input-placeholder            {opacity: 1; transition: opacity 0.3s ease;}
div.popup__formblock input:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}
div.popup__formblock input:focus::-moz-placeholder          {opacity: 0; transition: opacity 0.3s ease;}
div.popup__formblock input:focus:-moz-placeholder           {opacity: 0; transition: opacity 0.3s ease;}
div.popup__formblock input:focus:-ms-input-placeholder      {opacity: 0; transition: opacity 0.3s ease;}

div.form__blockbuttons {
display: flex;
flex-direction: row;
justify-content: space-evenly;
/* margin: 1em 0;	 */
}
div.form__blockbuttons.registration {
margin: 2em 0 0;	
}	

div.popup__formblock button {
color: #FFFFFF;
background-color: green;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
font-family: inherit;
text-align: center;
border: 0 none;
font-size: calc(var(--main_font_size) * 2.5);
padding: 0.5em 0;
font-weight: 700;
cursor: pointer;
margin: 0 auto;
outline: none;
width: 100%;
background: linear-gradient(180deg, rgba(71, 232, 25, 0.8) 0%, rgba(9, 146, 9, 0.9) 100%);
/* box-shadow: 0 0.15em 0.15em rgba(0, 0, 0, 0.25); */
/* align-self: center; */
}
div.popup__formblock button:hover {
background: linear-gradient(180deg, rgba(255, 0, 0, 0.48) 0%, rgba(255, 0, 0, 0.98) 100%);
box-shadow: 0 0.07em 0.07em rgba(0, 0, 0, 0.25);
}

button.form__login {
width: 50%;
margin: 0 4em 0 0;
/* height: 6em;	 */
}
div.popup__formblock a.form__login {
width: 50%;	
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
font-family: inherit;
border: 0 none;
font-size: calc(var(--main_font_size) * 2.5);
padding: 0.5em 0;
font-weight: 700;
cursor: pointer;
margin: 0 0 0 4em;
outline: none;
width: 100%;
background: #fff;
/* box-shadow: 0 0.15em 0.15em rgba(0, 0, 0, 0.25); */
/* color: #E21C21; */
color: #3097d1;
/* border: 2px solid #E21C21; */
border: 2px dashed #3097d1;
align-self: center;
/* height: 6em; */
align-items: center;
display: flex;
justify-content: center;
}

div.popup__formblock label {	
font-size: 1.5em;
padding: 0 0 1em;
}
div.popup__formblock > form > p {	
margin: -1em 0 2em;
}
div.popup__formblock p {	
margin: 2em 0 2em;
}


/* --------------------------------------------------------------------- form */

@media only screen and (min-width:320px) and (max-width:375px) {
:root {
--main_font_size: 9px;	
}
nav.menutop a > span.logo {
display: none;	
}
div.breadcrumbs {
padding: 4em 0 3em;
}
div.content {
padding: 0 2em 5em;
}
div.content > p {
text-align: justify;
word-spacing: -0.05em;
}
div.form__blockbuttons {
flex-direction: column;
}
div.popup__formblock button {
margin: 0 auto 1.5em;
}
div.popup__formblock a.form__login {
margin: 0;
}
}
@media only screen and (min-width:376px) and (max-width:480px) {
:root {
--main_font_size: 9px;	
}
nav.menutop a > span.logo {
display: none;	
}
div.breadcrumbs {
padding: 4em 0 3em;
}
div.content {
padding: 0 2em 5em;
}
div.content > p {
text-align: justify;
word-spacing: -0.05em;
}
div.form__blockbuttons {
flex-direction: column;
}
div.popup__formblock button {
margin: 0 auto 1.5em;
}
div.popup__formblock a.form__login {
margin: 0;
}
}		
@media only screen and (min-width:481px) and (max-width:670px) {
:root {
--main_font_size: 9px;	
}
div.breadcrumbs {
padding: 4em 0 3em;
}
div.content {
padding: 0 2em 5em;
}
div.popup__formblock a.form__login {
margin: 0 0 0 2em;
}
}		
@media only screen and (min-width:671px) and (max-width:768px) { 
:root {
--main_font_size: 9px;	
}
div.breadcrumbs {
padding: 4em 0 3em;
}
div.content {
padding: 0 2em 5em;
}
}
@media only screen and (min-width: 769px) and (max-width: 980px) {
:root {
--main_font_size: 9px;	
}
div.breadcrumbs {
padding: 4em 0 3em;
}
div.content {
padding: 0 9em 5em;
}
}

@media only screen and (min-width: 981px) and (max-width: 1024px) {
:root {
--main_font_size: 9px;	
}
div.breadcrumbs {
padding: 4em 0 3em;
}
div.content {
padding: 0 9em 5em;
}
}

@media only screen and (min-width: 1025px) and (max-width: 1280px) {
:root {
--main_font_size: 9px;	
}
div.breadcrumbs {
padding: 4em 0 3em;
}
div.content {
padding: 0 10em 5em;
}
}

@media only screen and (min-width: 1281px) and (max-width: 1366px) {
:root {
--main_font_size: 9px;	
}
div.content {
padding: 0 16em 5em;
}
}

@media only screen and (min-width: 1367px) and (max-width: 1600px) {
:root {
--main_font_size: 10px;	
}
}

@media only screen and (min-width: 1601px) and (max-width: 1920px) {
:root {
--main_font_size: 11px;	
}	
}	

@media only screen and (min-width: 1921px) and (max-width: 2048px) {
:root {
--main_font_size: 12px;	
}	
}

@media only screen and (min-width: 2049px) and (max-width: 2560px) {
:root {
--main_font_size: 12px;	
}

}
			
@media only screen and (min-width: 2561px) {
:root {
--main_font_size: 12px;	
}

}	

/* keyframes ---------------------------------------------------------- */
@keyframes section-animation {
  0% {
    width: 0;
  }
  15% {
    width: 100%;
  }
  85% {
    opacity: 1;
  }
  90% {
    width: 100%;
    opacity: 0;
  }
  100% {
    width: 0;
    opacity: 0;
  }
  }

  @keyframes circle-1 {
    0% {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      transform: rotate(360deg);
    }
}