*{
font-family:Sans-serif;
box-sizing: border-box;
color:#2c2c2c;
scroll-behavior: smooth;
-webkit-user-select: none; /* Safari */
 -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none /* Standard syntax */
}
h1{
margin:0 auto 22px auto;
font-size:2.2rem;
line-height:1.3;
}
h2{
margin: 0;
font-weight: 400;
font-size: 1.6rem
}
h3{margin-top:50px;
font-size: 1.32rem;
font-weight: 600
}
.unter{
margin-top:-30px;
opacity:0.8;
font-size:0.8rem;
font-weight:bold
}
.line{border-top:1px solid #444;width:260px;padding-top:4px}
p, ul {line-height:1.6;margin:1.5em auto;}
#maintext{
	display:flex;
	margin:0 auto
}
a{
    text-decoration: none;
    padding: 2px 8px;
    border: 1px solid #551a8b;
    border-radius: 12px;
    margin: 0 4px 8px;
    display: inline-block;
}
a:hover{
background-color:#551a8b;
color:white;
transition:0.5s all ease;
}
nav.menu{
	display:none;
	width:100%;
	position:fixed;
	top:0;
	left:0;
	color:white;
	background-color:bisque;
	text-align: center;
	cursor:pointer;
	z-index:4
}
nav.menu div{
	display:none;
	text-align:left;
	list-style:none;
	margin:0;
	overflow-y:scroll
}
nav.menu span{font-size:18px;font-weight:bold}
nav.menu div a{border-bottom:1px solid}
nav.menu div a{
	display:block;
	border:0;
	margin:0;
	padding:10px 15px;
	border-radius:0
}
.layout{max-width:900px;margin:0 auto}
.layout header{position:relative}
.hero{
	height:366px;
    background: url(img/hero-img-2.jpg) no-repeat;
    background-size: cover;
	background-position: inherit
}
.hero-header{
	text-align: center;
    padding-top: 4rem
}
.hero-header p{
    font-size: 1.8rem;
	color:white;
	margin: 1em auto;
	margin:0 auto;
	padding:0 4px;
    background: rgb(84 59 148 / 17%)
}
.hero-header p span{font-size:50px;color:white}
@media screen and (max-width:660px){
	
}
/* блок с выбором языка */
/*see in styles-11-25*/
/*---*/

/* оглавление страницы */
.content-list{
	border:1px solid #57378f;
	list-style:none;
	padding:10px
}
.content-list a{border: none;}
.content-list a:hover{
	background:none;
	border:none;
	color:brown
}
.go{display:inline-block;background-image: url("img/trik-right.png");width:16px;height:14px}
.content-list li a:hover .go {display:inline-block;background-image: url("img/trik-down.png");width:16px;height:14px
}

a.next{
	color:#57378f;
	background-color:unset;
	font-weight:bold;
	border:0
}
a.next:hover{color:brown;text-decoration:underline}

/* разделы курса*/
.list_of_parts{
background-color:bisque;
width:280px;
min-width: 260px;
padding:1.5rem 0
}
.list_of_parts .list-title,
.for-subscribers .list-title{
	margin:30px auto;
	padding-left:20px;
	font-size:1.32rem;
    font-weight:600
}
.content_of_part{
margin:3rem 0.4rem 3rem 1.6rem;
max-width:610px;
min-width:380px
}

/* БОКОВОЕ МЕНЮ */
nav.parts ul{
list-style:none;
padding-left:24px;
}
nav.parts ul li{border:0}
nav.parts ul li a{
display:block;
color:#57378f;
border:0 !important;
border-radius:0;
padding:0 20px 8px 0;
margin:0
}
nav.parts ul li a:hover{
background-color:transparent;
color:#57378f;
color:brown;
border:0 !important;
border-radius:0;
transition:0s ease
}
nav.parts ul li a:focus-visible{outline:0}
nav.parts ul.submenu{margin: 0 0 8px 0;padding:0}
nav.parts ul.submenu li a{margin: 0 0 8px 20px;padding: 0 0 0 8px}
.parts ul li a.active, nav.parts ul.submenu li a.active, .parts ul li a.active:hover, nav.parts ul.submenu li a.active:hover{
	margin:0 0 8px 0; 
	background-color:white;
	color:brown;
	border-radius:unset;
	padding:8px;
	cursor:default
}
nav.parts ul.submenu li a.active,
nav.parts ul.submenu li a.active:hover{margin:0 0 8px 20px}
/* --- */

nav.menu-scroll ul {height:510px;overflow-y:scroll}

img{margin-bottom:30px}
a.img{
background-color:unset;
margin:0;
border:0;
padding:0;
cursor:pointer;
position:relative
}
.show-big{
    background-color: #ffe3c675;
	padding:10px;
	position:absolute;
	bottom:10%;
	left:45%;
	border-radius:50%;
	border:1px dotted grey;
	transition: 0.5s ease
}
a.img:hover .show-big{
	transform: translate(10px, 10px) scale(1.2);
}

/*  MODAL IMG  */
#img{transition: 0.3s}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 10; /* Sit on top */
/*  padding-top: 100px; *//* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
  background-image: url(img/bgr-ticket.jpg);
  background-size: cover;
}
/* Modal Content */
.modal-content {
  background-color: #fefefe;
  /* background-image: url(img/ticket-bgr-2.jpg); */
  margin: 25px auto;
  padding: 20px;
  border: 1px solid #888;
  border-radius: 4px;
  width: 340px;
  box-shadow: 2px 4px 4px dimgrey;
}
/* The Close Button */
.close, .closeit {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  margin: 20px;
}

.close:hover, .closeit:hover,
.close:focus, .closeit:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
/*--------*/

ul.list-one, ul.list-browser{list-style: square;color:#57378f}
ul.list-one li, ul.list-browser li{margin:10px auto}

ul.list-map{list-style:none}
ul.list-map li{display:flex;margin-bottom:10px}
ul.list-map li img{margin-bottom:8px}
ul.list-map li span{display:inline-block;padding:6px}
.shader-list li{list-style:none;margin-bottom:8px}
.shader-list li span{/*background-color:#e1e1e1;*/font-weight:bold;}

/* РАЗДЕЛЫ КУРСА */
ul.brif-list{padding-left:0}
ul.brif-list li.notice{
list-style:none;
letter-spacing:1px;
width:90%
}
li.notice h3,
li.notice .notice-title{
margin-top:0;
color:#57378f;
line-height:1.3;
font-weight:bold;
font-size:1.25rem
}
li.notice a{
text-decoration:none;
padding:0;
border:0;
display:block
}
li.notice a:hover{
background-color:unset;
background-size:cover;
text-decoration:none;
padding:0;
border:0;
border-radius:0;
display:block;
transition: 0.5s
}
li.notice a:hover h3, li.notice a:hover .notice-title{color:#46277c}

.for-subscribers{padding:12px 0}
.for-subscribers .bg{background:seashell}
.for-subscribers button{display:block;border: 1px solid;color: #ffe3c6;margin: 10px auto;text-align: center;padding: 10px;background:green;cursor:pointer;width:80%;border-radius:8px}

.adv{
	width:260px;
    border:1px solid #b5872f;
    margin:16px auto;
    font-weight:bold;
    text-align:center;
    cursor:pointer;
    background:#e8e8e8
}
.adv .adv-title{
color:#b5872f;
padding:0 8px;
font-size:38px;
font-weight:400;
font-family:serif;
line-height:1.1;
margin:2px auto 4px
}
.adv p{
padding:10px 0;
margin:0 auto;
font-size:20px;
line-height:1.4;
font-family:sans-serif;
color:#e8e8e8;
background-image:url('img/mymap-add.jpg')
}
.adv a{
text-decoration:none;
padding:0;
margin:0;
border:0
}
.adv img{width:100%; height:auto; margin:0}

/* хлебные крошки */
.breadcrumb{padding:0;margin-top:0}
.breadcrumb li{display:inline-block;opacity:.6}
.breadcrumb li span{color:#57378f}
.breadcrumb li a{border:0;font-weight:normal;padding:0;margin:8px 8px 0 0}
.breadcrumb li a:hover{border:0;background:none;color:inherit}
/* ---- */

.inbox{
	border: 1px dotted;
    width: fit-content;
    padding: 10px;
    margin-bottom: 0;
	border-bottom:0
}
.box-list{
	border: 1px dotted;
    padding: 18px;
	margin-top:0
}

/* Tooltip container */
.tooltip {
  position: relative;
  cursor:help;
}
/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  max-width: 260px;
  font-size:0.8rem;
  background-color: #fffff1;
  color:#57378f;
  color: brown;
  color:#6b2020;
  padding: 6px 10px;
  border: 1px solid #57378f;
  border-radius: 6px;
/* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 20%;
/* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}
/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #57378f transparent transparent transparent
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {visibility:visible;opacity:1}

/* раскрывающиеся списки */
/* see it in styles-11-25 */

.panel{
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out
}
.search-list{
list-style: none;
padding-left:0;
margin-top:0;
border:1px dotted
}
.search-list li{
border-bottom:1px dotted;
padding:6px 10px;
font-size:.9rem
}
code.search-cut{
padding: 2px 4px;
margin: 2px 0;
background-color: #ebfbff;
font-size: 0.9em;
line-height: 1.3;
font-family: courier;
word-break: break-word;
color:inherit;
user-select: text
}

/* боковые блоки кратко */
.briffs{
	background-color:#f44336;
	margin:0;
	padding:16px
}
.briffs .briffs-title-head{
	font-size:28px;
	color:snow;
	padding:20px 0px;
    font-weight:bold
}
.briffs .briffs-title-subhead{
	font-size:18px;
	margin:20px 0 10px
}
.briffs p{
	font-size:16px;
	margin-top:0px;
	text-align:right
}
.briffs a{border:1px dotted;border-radius:0px}
.briffs a:hover{
	color:snow;
	background-color:#57378f;
}

/* сноска-замечание */
.notice{
color:darkred;
padding:20px;
border:1px dotted #57378f;
margin:20px auto;
background-color:floralwhite;
font-size:0.9rem;
line-height:1.5
}
.notice div{
color:coral;
background-color:bisque;
width:30px;
float:left;
font-size:3.3rem;
margin-right:12px;
position:relative;
left:0px;
bottom:10px
}
.bg{background-color:#cefdcb}

ol li{line-height:26px}
ol li span{
	background: #666;
    padding: 2px 4px;
    border-radius: 4px;
    color: snow;
	text-wrap-mode:nowrap
}
footer{
text-align:center;
background-color:lightgray;
padding:16px
}
code{
	background-color:#ffffa7;
	color:brown;
	white-space:nowrap
}
/*  стиль для строк кода  */
code.str-cut {
    border: 1px dotted;
    padding: 2px 4px;
    background-color: #ebfbff;
    font-size: 0.9em;
    line-height: 1.3;
    font-family: courier;
    word-break: break-word;
    overflow-x: scroll;
	color:inherit;
	user-select: text
}
code.str-cut i {
user-select: text}

mark{
	border: 1px dotted;
    border-radius: 6px;
    padding: 2px 4px;
	background-color: floralwhite;
	background-color:lightgoldenrodyellow;
	text-wrap-mode: nowrap
	}
.str{
	border-top:1px dotted;
	border-bottom:1px dotted;
	padding:6px;
	background-color:#ebfbff;
	font-size:0.9em;
    line-height:1.3;
    font-family:courier;
	word-break:break-word;
	user-select: text;
	overflow-x:scroll
	}

form{
width:336px;
margin:60px auto;
background-color:#e8e8e8;
padding:16px
}
form button{
margin:0 0 20px 0;
padding:10px
}
form button:hover{
background-color:#e4e4e4;
cursor:pointer;
border-color:#ddd;
border-radius:2px
}
textarea{
width:100%;
height:100px;
margin:6px auto 12px;
border-color:#a2a2a2
}
form p{margin:0; user-select: text;}

#toTop{
  display:none;
  position:fixed;
  bottom:20px;
  right:30px;
  z-index:5;
  font-size:1rem;
  cursor:pointer;
    padding:8px;
    border:1px solid #551a8b;
    border-radius:12px;
    margin:0 4px 8px;
    display:inline-block
}
#toTop:hover{
background-color:#551a8b;
color:white;
transition:0.5s all ease-in-out
}
.not-finished{
	width:336px;
    margin:12px auto;
    text-align:center;
    font-size:2rem;
    color:#ffe3c6;
    border:2px solid;
    padding:10px 12px
}

/* div платный контент */
.dop{
	background-color:aquamarine;
    border-top:1px solid;
    border-bottom:1px solid
}
.dop span{
	background-color:bisque;
    margin:0;
    padding:4px;
    display:inline-block
}
.dop a{
	border:0;
	padding:0;
	margin:0 20px;
	display:inline-block
}
.dop a:hover{border:0;background-color:unset}
.dop a:hover h3{color:brown}
.dop p{margin:0px;padding:10px 20px}
/* --- */

#begger {
	width:260px;
	height:600px;
	position:fixed;
	z-index:2;
	top:0px;
	left:20px;
	display:none
}
.begger-static{
	background:#21484b;
	border-radius:10% 0;
	margin:10px 0 24px;
	padding-bottom:8px;
	width:245px
}
.begger-static img{margin:0px}
.begger-static p{
	padding:0 10px;
	color:antiquewhite;
	font-size:1.12rem;
	line-height:1.3
}
.begger-2{
	display:flex;
	background:green;
	background:antiquewhite
}
.begger-2 img{
	width:160px;
	height:140px;
	margin:0px 14px 0px 0px
}
.begger-2 p{
	font-size:14px;
	text-transform:uppercase;
	letter-spacing:0.2px;
	margin:10px 0px 0px;
	color:brown;
	padding:0 10px
}
.begger-2 button{
	color:#ffffff;
	background-color:#e6a752;
	text-align:center;
	width:auto;
	margin:12px auto;
	padding:10px 20px;
	font-size:14px;
	letter-spacing:1.2px;
    font-weight:bold;
	border:0;
	border-radius:4px;
	cursor:pointer
}
.begger-2 button:hover{color:snow;background-color:#1e7f19}
.begger-2 .x{display:none}
@media screen and (max-width:480px){
/* 	.begger-2{display:block} */
	.begger-2 .b-begger{display:none}
	.begger-2 .x{display:block}
	.begger-2 img.y{display:none}
	.begger-2 img.x{display:block;margin:0 auto}
	.begger-2 button{width:100%}
}
.b-begger{
	color:#ffffff;
	background-color:#e6a752;
	text-align:center;
	width:100%;
	margin:12px auto;
	padding:8px;
	letter-spacing:1.2px;
    font-weight:bold;
	border:0;
	border-radius:4px;
	cursor:pointer
}
.b-begger:hover{
	color:#1e7f19;
	background-color:#f5e7d4;
    letter-spacing:1.3px;
    margin:12px auto;
    padding:8px;
	font-weight:bold
}
.access{
	cursor:pointer;
	color:brown;
	padding:10px 16px;
	margin:18px 18px 0px 18px;
	text-transform:uppercase;
    letter-spacing:0.5px
}
.access:hover{
	color:green;
	background:snow;
	border:1px solid;
	padding:11px 17px
}
.pro-dalnoboy{background:#1f1e22;padding-bottom:16px}

.img-screen{display:inline;width:100%;height:auto}
.img-mob{display:none}

@media screen and (max-width:380px){
.img-screen{display:none}
.img-mob{display:inline;width:100%;height:auto}
}

.menu-board{
	position:relative;
	width:243px;
	margin:0 auto;
	font-size:18px;
	font-weight:bold
}

/* FOOTER */
.footit{display:flex;justify-content:center}
.col{
	display: flex;
    flex-direction: column;
	margin:10px
}
.col:nth-of-type(1){
align-self:center;
border:1px solid;
padding:24px 10px;
flex-basis:180px;
background-color:bisque
}
.col:nth-of-type(2){flex-basis:330px}
.col:nth-of-type(3){align-items:flex-start}
.col p{margin:0 0 10px}
.col a{font-weight:normal;font-size:0.8rem}

.socials{border:0;margin:0;padding-right:0}
.socials:hover{background:none;}
.socials img{margin:0;width:36px;height:36px;display:inline !important}
/* --- */

/* форма контактов от конструктора GPT */
.contact {
    background:white;
    padding:20px 0;
    margin:40px 20px;
	border:1px dotted bisque;
    border-radius:10px
}
.contact form {
    display:flex;
    flex-direction:column;
	background:bisque;
	margin:40px auto
}
.contact label {margin-top:10px;text-align:left}
.contact p {text-align:center}
.contact input, .contact textarea{
    max-width:400px;
    padding:10px;
    margin-top:5px;
    border:1px solid #ccc;
    border-radius:5px
}
.contact textarea {height:100px}

.nav-intersection{width:400px;margin:0 auto}
.nav-leftside{
	height:40px;
	width:167px;
    display:inline-block;
    border-bottom:1px solid #777;
    border-right:1px solid #777;
    border-radius:10px;
    border-bottom-left-radius:0;
    border-top-right-radius:0;
    margin-right:60px
}
.nav-rightside{
	height:40px;
	width:167px;
    display:inline-block;
    border-bottom:1px solid #777;
    border-left:1px solid #777;
    border-radius:10px;
    border-bottom-right-radius:0;
    border-top-left-radius:0
}
.nav-bottom{border-top:1px solid #777;margin-top:10px}
.nav-intersection a{padding:14px 32px 2px 0;text-decoration:none;display:inline-block}
@media screen and (max-width:400px){
	.nav-intersection {width:100%}
	.nav-intersection a{display:block;padding:14px 0 0 !important}
	.nav-leftside{display:none}
	.nav-rightside{display:none}
	.nav-bottom{display:none}
}

@media screen and (max-width:668px){
#maintext{flex-direction:column;}
p, li{font-size:1.2rem}
.notice, .notice p{font-size:1.2rem}
ul.brif-list li.notice{list-style:none;margin:10px 0px}
.notice li a{border:0 !important}
.hero{
	height:250px;
	margin-top:20px;
	padding:12px 10px 10px;
	background: url(img/hero-img-2-600.jpg) no-repeat;
    background-size: cover}
.hero-header{margin:0 10px;padding-top:46px}
.hero-header p{font-size:1.5rem;}
.hero-header p span{font-size:2.3rem}
/* .langs{position:inherit}
.langs p{color:#333}
.langs a{margin:0 4px} */
aside.list_of_parts .list-title, .list_of_parts nav.parts{display:none}
aside.list_of_parts {display:block;order:2;width:90vw;place-self:center;padding:0 10px}
.content_of_part{width:90vw;margin:48px 8px;min-width:auto;order:1}
nav.menu{display:block;padding:12px 0px}
nav.menu #links{
	font-size:1.2rem;
	background-color:bisque;
	width:100%;
	overflow-y:scroll;
    height:50vh;
}
ul.brif-list li.notice{list-style:none;margin:10px auto}
#toTop{bottom: 10px;right:80px}
#begger{display:none !important}
.for-subscribers{margin:10px auto !important;}
.begger-static{margin:12px auto;max-width:260px}
.pro-dalnoboy{width:90%;margin:10px auto !important}
.adv {margin:16px auto;max-width:360px;width:100%;}
.adv a{display:block}
.footit{display:block}
.contact{margin:0 auto}
.contact form{margin:0 auto;width:100%}
#access{font-size:1.1rem}
}
@media screen and (min-width:730px) and (max-width:840px){
	.scs-news a img{float:none !important}
} 
@media screen and (max-width:570px) {
	.scs-news a img{float:none !important}
}
@media screen and (max-width:480px){
.hero-header{margin:0 10px;padding-top:40px}
.hero-header p{font-size:1.2rem}
.hero-header p span{font-size:1.8rem}
.list-map{padding-left:0}
.begger-2{align-items:center;flex-direction:column;}
}
@media screen and (max-width:380px){
	.layout{max-width:100%}
	.image{width:100%;height:auto}
	.hero{
	height:275px;
    background: url(img/hero-img-2-mob.jpg) no-repeat;
    background-size: cover;
	border-radius:4px
}

}