:root {
  --text-font-size: 17px;
  --text-gap: 24px;

  --color-link: #5757ea;
  --color-text: #222222;
  --color-black: #191D23;
  --color-black-80: rgb(25, 29, 35, 80%);
  --color-black-60: rgb(25, 29, 35, 60%);
  --color-white: #ffffff;
  --color-blue: #3D5AFE;
}

#contentbox {
  font-family: "-apple-system",BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size: var(--text-font-size); 
  line-height: 1.56;
  font-weight: 400;
  color: var(--color-text);
}

#contentbox h1 {
  text-align: left;
}

#contentbox h2,
#contentbox h3,
#contentbox h4,
#contentbox h5 {
  border: none;
  font-family: 'Ubuntu', sans-serif;
  color: var(--color-text);  
  font-weight: 500;
  padding: 0;
  margin: calc(var(--text-gap) * 2.5) 0 var(--text-gap); 
  text-align: left !important;
}

#contentbox h2 {
  font-size: 32px; 
  line-height: 123%;
}

#contentbox h3 {
  font-size: 26px;
}

#contentbox h5 {
  font-size: 24px;
  margin-top: calc(var(--text-gap) * 2);
}

#contentbox p, 
#contentbox a, 
#contentbox ul, 
#contentbox ol, 
#contentbox li, 
#contentbox .autor { 
  font-size: var(--text-font-size);
  line-height: 1.56;
}

#contentbox b, 
#contentbox em,
#contentbox i {
  font-size: inherit;
  line-height: inherit;
}

#contentbox p {
  padding: 0;
  margin-bottom: var(--text-gap);
}

#contentbox ul, #contentbox ol {
  padding: 0;
  margin: var(--text-gap) 0; 
  list-style-type: disc; 
  margin-left: calc(var(--text-gap) * 1.5);
}

#contentbox li + li {
  margin-top: calc( var(--text-gap) / 2.5 );
}

#contentbox .paragraph-list li + li {
  margin-top: calc( var(--text-gap) );
}
 
#contentbox .goal, 
#contentbox .attention, .impblock, #main .impblock {
  padding: var(--text-gap) calc(var(--text-gap) * 2);
  margin: calc(var(--text-gap) * 1.5) 0;
  font-size: var(--text-font-size);
  line-height: 1.56;
  border-radius: 10px;
}


#contentbox .forexa {
  padding: 40px 36px;
  font-size: var(--text-font-size);
  line-height: 1.56;
  background: url(https://4brain.ru/images/icons/example.svg) no-repeat, #F9F9FF;
  background-size: 50px;
  background-position: 95% 9%;
  border:none;
  border-radius: 10px;
  margin: calc(var(--text-gap) * 1.5) 0;
}


#contentbox .forexa > strong {display:block; margin:10px 0;}

#contentbox .goal {
  background: url(https://4brain.ru/images/icons/goal.png) no-repeat 36px center/46px, linear-gradient(to right,#eefcff 0,#e3edff 100%); padding: calc(var(--text-gap) * 2);  padding-left: calc(var(--text-gap) * 5); 
}

#contentbox .attention{
  background: rgb(255 232 232);
  color:#222222;
  padding: 30px 36px 30px;
}
.impblock, #main .impblock {
  background: #eceeff !important;
  color: #222222 !important;
  padding: 30px 36px 30px !important;
}


/*таблицы преимуществ и недостатков и способ противостояния*/
#main .stopthis {background:rgba(0,20,30,0.04); padding:0 36px 25px; margin:30px 0; border-radius: 10px; overflow: hidden;}
#main .stopthis > h2 {background: linear-gradient(175deg, #f4f2ce, #e1d7ed); padding:25px 36px; font-size:150%; margin:0 -36px 25px;}
#main .stopthis > h2::before {content:'🛡️ ';}

#main .goodbadtable { border-radius: 10px; overflow: hidden;}
#main .goodbadtable td { border: 1px solid white; padding: 15px 36px; font-size: 15px; width: 50%; background: #f7f7f7;  vertical-align: top;}
#main .goodbadtable tr:nth-child(1) td:nth-child(1) { color: #222222; font-size: 20px; font-weight: bold; background: rgb(208 240 219); padding: 25px 36px; vertical-align: middle;}
#main .goodbadtable tr:nth-child(1) td:nth-child(2) { color: #222222; font-size: 20px; font-weight: bold; background: rgb(255 222 222); vertical-align: middle;}



@media screen and (max-width: 800px) {
  #main .stopthis {margin:30px -20px; padding:0 20px 25px; border-radius: 0;}
  #main .stopthis h2 {padding:25px 20px; margin:0 -20px 25px;}

  #main .goodbadtable {margin:30px -21px; width:calc(100% + 42px); border-radius: 0;}
  #main .goodbadtable tr:nth-child(1) td:nth-child(1)  {padding: 22px 20px;}
  #main .goodbadtable td {padding: 15px 20px; width:50%; }
}





#contentbox .forexa p,
#contentbox .goal p, 
#contentbox .attention p {
  margin: 0;
}

#contentbox .forexa p + p,
#contentbox .goal p + p, 
#contentbox .attention p + p {
  margin-top: var(--text-gap);
}

#contentbox .opredelenie{
  display: block; 
  padding: 0 var(--text-gap); 
  padding-left: calc(var(--text-gap) * 1.5); 
  margin: calc(var(--text-gap) * 1.5) 0;
  text-decoration:none; 
  border-left:4px solid #0123E4; 
  font-size: 20px; 
  line-height: 140%;
}

#contentbox img {
  border-radius: 4px;
}

#contentbox .impblock {
  margin-bottom: var(--text-gap);
}

#contentbox .numb {
  position: relative;
  padding: 0;
  border-radius: 50%;
  margin: calc(var(--text-gap) * 2) 0 0;
  font-size: 76px;
  font-weight: 500; 
  line-height: 100%;  
  text-align: center; 
  color: #ededed;
}

#contentbox .numb::before,
#contentbox .numb::after {
  content: '';
  position: absolute;
  height: 1px;
  width: 38%;
  top: 54%;
  background-color: #f1f1f1;
}

#contentbox .numb::before {
  left: 4%;
}

#contentbox .numb::after {
  right: 4%;
}

#contentbox .numb + h4 {
  text-align: center !important;
}

#contentbox .numb + h3 {
  margin-top: calc(var(--text-gap) * 1) !important;
  text-align: center !important;
}

#contentbox .numb + h2 {
  margin-top: calc(var(--text-gap) * 1) !important;
  text-align: center !important;
}

#contentbox a:not(.twolessonsone):not(.twolessonstwo):not(.bbtn) {
  text-decoration:none;
  font-size: inherit;
  color: var(--color-link);
}

#contentbox a:not(.twolessonsone):not(.twolessonstwo):not(.bbtn):hover {
  text-decoration: underline;
  font-size: inherit;
  color: var(--color-link);
}

#contentbox .impblock a {
  color: #2c5be3 !important;
  text-decoration: underline !important;
 
}

#contentbox table { margin: calc(var(--text-gap) * 1.5) 0; }



.ticktable {border-collapse: separate; border-spacing: 0; border-radius: 10px; overflow: hidden; background: #f7f7f7;  width:100%;}
.ticktable tr:first-child td {padding-top:50px;}
.ticktable tr:last-child td {padding-bottom:50px;}

.ticktable td {border:none; padding: 25px 20px; text-align:left; vertical-align: top;  line-height:140%; }
.ticktable td:first-child { text-align:center; color: #0123E4; font-size:18px; font-weight: 700; width:20px; padding:24px 15px 20px 36px;}

.ticktable.stepstable td:first-child div { border-radius:50%; line-height: 100%;  padding: 10px 0; width: 36px; height:36px; background: white; box-sizing: border-box; margin-top:-7px; z-index:3; position:relative;}

.ticktable.stepstable {position:relative;}
.ticktable.stepstable::before {content:''; background: rgba(255, 255, 255, 1); position:absolute; top: 50px; bottom: 80px; left: 52px; width: 2px; z-index:2;}
.ticktable .stepline { display:none;  }


@media screen and (max-width: 800px) {
  #contentbox .ticktable {margin: calc(var(--text-gap) * 1.5) -20px; width: calc(100% + 40px); border-radius: 0;}
  .ticktable td {padding: 30px 10px;}
  .ticktable td:first-child {padding:29px 5px 20px 20px;}
  .ticktable.stepstable::before {left:37px;}
}






#contentbox .imgdescr {
  margin-top: -12px;
  color: var(--color-black-60);
}

#contentbox .autor {
  padding: calc(var(--text-gap) * 1.5);
  margin: calc(var(--text-gap) * 1.5) 0;
  border-radius: 10px;
 background: rgba(50, 100, 150, 0.07);
}

#contentbox .autor img {
  float: left !important;
  margin: 0 var(--text-gap) var(--text-gap) 0;
}

 /*ЦИТАТЫ*/
#contentbox blockquote { margin: calc(var(--text-gap) * 1) 0 var(--text-gap); padding: calc(var(--text-gap) * 2) calc(var(--text-gap) * 3) calc(var(--text-gap) * 1) calc(var(--text-gap) * 2);  border:none; background:#f2f2f2; border-radius:12px;  position: relative;}
#contentbox blockquote:before { color: var(--color-text); font-size: 50px; right: 20px; top:20px; position: absolute; content: ',,'; font-family: Georgia, 'Times New Roman', Times, serif; font-weight:bold;  z-index:2; line-height:0%;}
#contentbox blockquote p:first-child { font-size: 24px; line-height: 1.4; }
#contentbox .blockquoteimg { width: 80px; margin-left: auto; border-radius: 50% !important; }

#contentbox .sidebar_list {
  background: #f7f7f7;
  padding: 12px 24px;
  margin-bottom: var(--text-gap);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

@media screen and (max-width: 800px) {
  :root {
    --text-font-size: 16px;
    --text-gap: 20px;
  }

  #contentbox h1.title.single-title, 
  #contentbox h1 {
    font-size: 32px;
  }

  #contentbox h2 {
    font-size: 28px;
  }

  #contentbox .opredelenie {
    font-size: 22px;
    line-height: 144%;
  }

  #contentbox .numb {
    font-size: 60px;
  }

  #contentbox .stepline {
    left: 74px;
  }

  #contentbox li.cat-item {
    padding: 0;
  }

  #contentbox h1 {
    font-size: 38px;
  }
  .impblock, #main .impblock {
    padding: 30px 20px !important;
    margin: 20px -20px;
    border-radius: 0;
}
#contentbox .goal {
  padding: 90px 20px 20px;
  background-position: center 23px;
  margin: 20px -20px;
  border-radius: 0;
}

#contentbox .attention {
  padding: 30px 20px;
  background-position: center 24px; 
  margin: 20px -20px;
  border-radius: 0;
}

  #contentbox .forexa {
  padding: 20px;
  background-size: 36px;
  margin: 20px -20px;
  background-position: 95% 20px;
  border-radius: 0;
}
.speedwrap {
  margin: 20px -20px !important;
}
.speed-questions {
  border-radius: 0 !important;
  border: none !important;
}

}
@media screen and (max-width: 500px) {

  #contentbox blockquote { padding-left: 24px; padding-right: 58px; margin: calc(var(--text-gap) * 2) 0 calc(var(--text-gap) * 1.5); }
  #contentbox blockquote:before { font-size: 40px;}
  #contentbox blockquote p:first-child { font-size: 20px; line-height: 1.3; }
  #contentbox .blockquoteimg { width: 64px; }

  #contentbox h1 {
    font-size: 30px;
  }

  #contentbox h2 {
    font-size: 30px;
  }

  #contentbox .autor {
    padding: calc(var(--text-gap) * 1);
  }

  #contentbox .opredelenie {
    font-size: 20px;
    padding-left: var(--text-gap);
  }

  #contentbox .mainauthors .chip {
    height: 64px;
    line-height: 1.28 !important;
  }
  
}

.experimentblock {padding:30px 5%; background:rgba(0,20,50,0.05); margin:20px 0; border: 1px rgba(0,20,50,0.1) dashed}


/*Логика*/
#main ul.sillogizm {list-style:none; font-style:italic; margin:20px 0;}
#main ul.sillogizm li {list-style:none; }
#main ul.sillogizm hr {width:100%; max-width:300px; margin:8px 0 0;}

#main .tablelogik {border-spacing: 0; border-collapse: collapse; font-size:12px;}
#main .tablelogik td {padding:5px; border:1px solid silver;}
#main .tablelogik tr:first-child td {background:whitesmoke; font-weight:bold; text-align:center;}
#main .tablelogik td p {padding:3px; margin:0;}

#main p.numbmini {font-weight:bold; font-size:120%; margin-left:15%; padding-bottom:0; margin-bottom:0;}

/*Хлебные крошки, навигационные цепочки*/
.breadcrumbs {text-align:center; padding:5px; font-size:12px; color:silver;}
.breadcrumbs span a {padding:8px; text-decoration:none; color:rgb(100, 110, 130);}
@media (max-width: 800px) {
.breadcrumbs {font-size:10px;}
.breadcrumbs span a {padding:3px;}
}