@charset "utf-8";

:root{
  --color_blue:  #33b3ff;
  --color_blue_d:#0580c9;
  --color_orange:#ff863c;
  --color_brown: #ab4201;
  --max_width: 1240px;
  --submenu_width: 18vw;
  --body_color: #fff;
}

HTML { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

/*--------разметка-------*/
html, body { height:100%; margin:0; padding:0; }
body { display:flex; flex-direction:column; }
header, main, section, article, aside, footer {display: block; position:relative; }
header { flex: 0 0 auto; }
main { flex: 1 0 auto; }
footer { flex: 0 0 auto; }
/*--------/разметка-------*/


body { background:var(--body_color); text-align:center; font: 22px Calibri, Verdana, Arial, Tahoma, Sans-serif; color:#000; overflow-x:hidden; }

/*main, .tb_in { max-width:var(--max_width); width:94%; margin:0 auto; }*/

a { color:var(--color_blue_d); font-weight: normal; text-decoration: none; }
a:hover {color:var(--color_orange); }

/*--------------*/
 .c { text-align: center !important;}
 .l { text-align: left; }
 .r { text-align: right; }
 
 .mmore { display: inline; font-size: 0.9em; color: var(--color_blue_d); margin: 0; padding: 0 20px 0 0; background: url(/img/arr_down.png) no-repeat right center; cursor: pointer;}
 .mmore:hover { color: var(--color_orange);}

 /*---------------------*/

#menu_switch { position: fixed; right: 10px; top: 10px; z-index: 15; cursor: pointer;}


#menu { position: fixed; width: 0; height: 100%; right: 0; background: rgba(255, 255, 255, 0.9); z-index: 10; display: flex; justify-content: center; box-shadow: 0px 0px 5px #666; }
#menu ul { list-style: none; text-align: left; width: 95%; margin: 0; padding: 0; }
#menu ul li { margin: 15px 0;}

/*----------header------*/
header { max-width: var(--max_width); width: 90%;  height: calc(100% - 20px); margin: 0 auto; padding: 20px 0 0 0; display: grid; grid-template-columns: 13% 13% 1fr 1fr 13% 13%; grid-template-rows: 1fr 20%;}

.gr_fon0 { position: absolute; width: 100%; height: 100%; opacity: 0.7; display: flex; justify-content: center; align-items: center; }
.gr_fon0 div { max-width: var(--max_width); width: 90%; height: 80%; margin: 0 0 2% 0;  background: url(/img/gr_fon0.jpg) no-repeat center center; background-size: 100%; }
.gr_fon0 img { display: block; width: 100%; }

.logo { grid-column: 1 / span 2; grid-row: 1; margin: 0; font-size: 22px; font-weight: normal; color: var(--color_brown); }
.logo a { display: block; color: var(--color_brown); background: rgba(255, 255, 255, 0.8); padding: 3px; border-radius: 3px; }
.logo img { display: block; width: 200px; margin: 15px 0 0 0; }

.subh { grid-column: 3 / span 2; grid-row: 1; /*justify-content: center; align-content: center;*/ text-align: center; }
.subh h2, .subh h3 { width: 90%; font-weight: normal;  background: rgba(255, 255, 255, 0.8); padding: 3px; border-radius: 3px; }
.subh h2 { margin: 10vh auto 0 auto; font-size: 56px; font-family: GunnyRewritten, Calibri, Verdana, Arial, Tahoma, Sans-serif; color:var(--color_blue); line-height: 50px; }
.subh h3 { margin: 10px auto 0 auto; font-size: 22px; font-weight: normal; }

.cont { grid-column: 5 / span 2; grid-row: 1; justify-self:end; }

.question  { grid-column: 1 / span 3; grid-row: 2; justify-self:start; }
#quest_in { display: block; transform: rotate(10deg); display: flex; align-items: center; font-family: GunnyRewritten, Calibri, Verdana, Arial, Tahoma, Sans-serif; font-size: 36px; color:var(--color_blue); }
#quest_in img { display: block; width: 70px; margin: 0 15px 0 0; }

.join { display: block; grid-column: 4 / span 3; grid-row: 2; justify-self:end; transform: rotate(-10deg); }
.join img { display: block; width: 30vw; max-width: 400px; }

header h1, .vk {margin: 0 0 12px 0; }

header h1 { font-weight: normal; font-size: 30px; text-align: left;}

.cont { text-align: left;}
.psy, .vk, .phone { background: rgba(255, 255, 255, 0.8); padding: 3px; border-radius: 3px; }
.psy { color: #000; font-size: 16px;  }

.phone { font-size: 16px; color: #888; }
.phone a { font-size: 22px; color: var(--color_orange); }
.vk { display: block; font-size: 22px; color: #666; text-align: left; }
.vk img { vertical-align: middle; width: 23px;}

.up { position: fixed; bottom: 5px; right: 5px; width:0; height:0; cursor:pointer; display:block; }

.home { display: none; }

.note { font-size: 16px; color: #666;}

/*-----------------------*/
.in { max-width: var(--max_width); width: 90%; padding: 100px 0 50px 0; margin: 0 auto; }
.h2 { margin: 0 0 30px 0; font-weight: normal; font-family: GunnyRewritten, Calibri, Verdana, Arial, Tahoma, Sans-serif; font-size: 40px; color:var(--color_blue_d); }
.orange { color: var(--color_orange); font-weight: bold; font-family: GunnyRewritten, Calibri, Verdana, Arial, Tahoma, Sans-serif; font-size: 30px; }
.outer_flex { display: flex; justify-content: center; }
.outer_flex ul, .outer_flex div { text-align: left; max-width: 500px; margin: 0 15px; }
.outer_flex img { display: block; width: 100%; }


.info, .info_flex { margin: 0; padding: 0; list-style: none;}
.info li { margin: 10px 0; }
.info li span { color: #666; font-size: 20px;}

.info_flex { display: flex; justify-content: center; padding: -10px; flex-wrap: wrap;}
.info_flex li { display: flex; margin: 10px; padding: 10px; max-width: 600px; justify-content: space-between; border-right: #33b3ff 1px solid; border-bottom: #33b3ff 1px solid;  }
.info_flex li div { max-width: 100px; width: 20%;}
.info_flex li div img { display: block; width: 100%;}
.info_flex li p { width: 80%; padding: 0; margin: 0;}

#plan .info_flex { text-align: left;}

#description, #schedule, #plan, #how, #who, #request, #question  { width: 100%; clip-path: polygon(0 80px, 100% 0, 100% 100%, 0 100%); background: -webkit-linear-gradient(178deg, #33b3ff,#ffffff,#ffffff,#ffffff); background: linear-gradient(178deg, #33b3ff,#ffffff,#ffffff,#ffffff); }

#who article:nth-of-type(1) { margin-bottom: 30px; }

#who article div:nth-of-type(1) { display: flex; justify-content: center; align-items: start; }
#who article img {width: 128px;}

#question_h2 { cursor: pointer; }


/*-----------------------*/
#join_submit_load, #question_submit_load { display: none; background: #fff; color: var(--color_purple); border-radius: 20px; padding: 15px; user-select: none;}

.form_error { font-family: Calibri, Verdana, Arial, Tahoma, Sans-serif; color:#cc0000;}
#join_mess h2, #question_mess h2 {font-family: Calibri, Verdana, Arial, Tahoma, Sans-serif; color:var(--color_blue);}

#join_form, #question_form  {display: flex; flex-direction: column; justify-content: center; align-items: center;}
/*#question_form { display: none;}*/

#join_form input, #join_form textarea, #question_form input, #question_form textarea { display: block; width: 100%; height: 30px; font-size: 20px; box-sizing: border-box; margin: 30px 0; border-radius: 5px; border:1px solid var(--color_blue); }

#join_inputs, #question_inputs { width: 50%;}

#join_form textarea, #question_form textarea { height: 100px; margin-bottom: 10px; }

#join_form input[type='submit'], #question_form input[type='submit'] { width: 180px; background: var(--color_orange); color: #fff; }
#join_form input[type='submit']:hover, #question_form input[type='submit']:hover { background: var(--color_blue); cursor: pointer;}

#join_form p, #question_form p { margin: 0 0 5px 0; font-size: 20px; line-height: 20px; }

#join_form h3, #join_form h2, #join_form h4, #question_form h3, #question_form h2, #question_form h4 { margin: 0 0 10px 0; font-size: 32px; line-height: 34px; color: #666; font-family: GunnyRewritten, Calibri, Verdana, Arial, Tahoma, Sans-serif; font-weight: normal;}
#join_form h2, #join_form h4, #question_form h2, #question_form h4  { font-size: 24px; }
#join_form h4, #question_form h4 { color: coral;}

/*-----------------------*/
.block { width: 96%; max-width: 1000px; margin: 40px auto 0 auto; background: #fff; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%); border-radius: 10px 60px 60px 10px; padding: 20px 40px; box-sizing: border-box; text-align: left; font-size: 1.1em; line-height: 1.4em; }
.block p:last-child { clear: both; }
.blockh { text-align: left; font-size: 22px; margin: 20px 0; padding: 0; color: var(--color_blue_d); }
.note { padding: 5px 10px 5px 40px; font-size: 0.9em; line-height: 1.2em; background: var(--body_color); }
.date { font-size: 0.8em; color: #555; text-align: right; font-style: italic;}
.txt_img { width: 20%; max-width: 300px; min-width: 180px; float: left; margin: 0 20px 10px 0;}

.files {background: #fefefe; border-radius: 3px; text-align: left;}
.fl_info {font-size: 16px; padding: 9px 7px; }
.fl_info img { vertical-align: middle; }
.fl_info span { font-size: 14px; color: #666; }

.files div:nth-child(2n) { background: #f6f6f6;}

/*-------*/


/*----------footer------*/
footer {  width: 100%; padding: 40px 0; font-size: 16px; clip-path: polygon(0 80px, 100% 0, 100% 100%, 0 100%); background:var(--color_blue); }
footer .txt { font-size: 14px; padding-top: 10px; }

/*----------@media------*/
@media all and (max-width: 1300px) {
  .logo { font-size: 20px; }
  .logo img { width: 150px; }

  .subh h2 { font-size: 50px; line-height: 44px; }
  .subh h3 { font-size: 20px; }

  .psy2 a {font-size: 32px; } 

  .in { padding: 100px 0 30px 0; }
}

@media all and (max-width: 1200px) {
  .subh h2 { font-size: 46px; line-height: 42px; }
  .vk {font-size: 20px; }
  .vk img {width: 20px;}
  #quest_in {font-size: 28px; }
  #join_inputs, #question_inputs { width: 70%;}
}

@media all and (max-width: 1100px) {
  .logo { font-size: 18px; }
  .logo img { width: 120px; }
  .subh h2 { font-size: 40px; line-height: 36px; }
  .phone a { font-size: 18px;}
  .phone div { font-size: 16px;}

  .vk {margin: 0 0 2px 0; }
  .phone { font-size: 18px; }
  .vk { font-size: 18px; }
  .vk img { width: 20px;}

  #quest_in img { width: 60px;}
 
  .h2 { font-size: 36px; line-height: 30px;}

  #join_form h3, #question_form h3 {font-size: 26px; }

}


@media all and (max-width: 900px) {
  body { font-size: 20px; }
  /*.subh h2 { font-size: 36px; line-height: 30px; }*/
  .subh h3 { font-size: 18px; }
  
  #quest_in {font-size: 24px; }
  #quest_in img { width: 50px;}

  #join_inputs, #question_inputs { width: 90%;}
  
  .block { text-align: left; }
}

@media all and (max-width: 730px) {
 
  .psy, .phone div { display: none;}
  .vk, .phone a { font-size: 18px; white-space: nowrap; }
}


@media all and (max-width: 600px) {
  .gr_fon0 div { max-width: 400px; margin: 0 0 10% 0; background: url(/img/gr_fon0_phone.jpg) no-repeat center bottom; background-size: 100%; }

  header { display: block; height: calc(100% - 10px); padding: 10px 0 0 0; }
  .logo { width: 40%; line-height: 18px; }
  .logo img { margin: 10px 0 0 0; }
  .subh { margin: 6vh 0 0 0; display: flex; flex-direction: column; align-items: center;}
  .subh h2 { margin: 0;}
  .cont { position: absolute; right: 30px; top: 10px; }
  .question, #question{ display: none;}

  .join/*,  .question*/ { position: absolute; width: 100%; bottom: 10px; display: flex; justify-content: center; align-items: center; }
  .join img/*, .question img*/ {width: 90%; max-width: 300px;}

  .in { width: 96%; padding: 100px 0 0px 0; }

  .outer_flex { display: block; }
  .outer_flex ul, .outer_flex div { max-width: 100%; margin: 15px 0; }

  #join_form input, #join_form textarea, #question_form input, #question_form textarea { width: 90%; margin: 20px 0; font-size: 18px; }

  #join_inputs, #question_inputs { width: 100%;}

  #join_form h3, #question_form h3 {font-size: 26px;}
  #join_form p, #question_form p {font-size: 18px;}
}


@media all and (max-width: 470px) {
  .block { padding: 30px 20px; }
}

@media all and (max-width: 410px) {
  .logo { width: 90%; }
  .vk, .phone { display: none; }

   .info_flex li { display: block; }
  .info_flex li div { min-width: 50px; float: left; margin: 0 10px 10px 0;}
  .info_flex li p { width: 100%; }

}

@media all and (max-width: 350px) {
 
  .block { padding: 10px; }
}



/*
@media all and (max-width: 950px)  {
  .outer1 {display: block; width: 80vw; padding-top: 10vw;}
  .block1 {width: 80vw; height: 80vw;}
  .block1 ARTICLE {width:  56.6vw; height: 56.6vw; }
  .block1 { margin: -7vw auto !important;}
}

@media all and (max-width: 480px)  {
  .outer1 {display: block; width: 96vw; }
  .block1 {width: 96vw; height: 96vw;}
}*/