/* roboto-slab-regular - cyrillic */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: url('/media/templates/site/cassiopeia/fonts/roboto-slab-v34-cyrillic-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-slab-700 - cyrillic */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  src: url('/media/templates/site/cassiopeia/fonts/roboto-slab-v34-cyrillic-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

body {font-family: "Roboto Slab", Georgia, serif;  line-height: 140%;   color: #333; font-size:1.3em;}
h1, h2, h3, h4 {color:#000000; font-weight: bold; }
.grid-child {display: block; max-width: 1200px !important;}

a, a:hover, a:not([class]) {text-decoration: none  !important; }
a {color: #0090BA;}
a:hover{color: #FE7301}
.com-content-article__body a:not([class]) {color: inherit; text-decoration: none; border-bottom: solid 1px #FFB060;}
.com-content-article__body a:hover {color: #FE7301; border-bottom: none;}

@media (max-width: 767px) {
	h1 {font-size:1.6em; line-height:130%; text-transform: uppercase; margin: 12px 0; }
	h2 {font-size:1.4em; line-height:120%; text-transform: uppercase; margin: 10px 0; }
	h3 {font-size:1.2em; line-height:130%; margin: 15px 0; text-transform: none; }
	h4 {font-size:1em; line-height:130%; margin: 12px 0; text-transform: none;}
	h5 {font-size:1.4em; font-weight: 400 !important;  color: #888;  margin-top: 10px;  margin-bottom: 5px; line-height:130%; text-transform: none !important; }
	h6 {font-size:0.8em; font-weight: normal;  color: #888;  padding: 0px;  margin-top: 5px;  margin-bottom: 5px;  margin-left: 12px;  line-height:120%;}
	}
	
@media (min-width: 768px) {
	h1 {font-size:2em; line-height:150%; text-transform: uppercase; margin: 15px 0; }
	h2 {font-size:1.6em; line-height:130%; text-transform: uppercase; margin: 15px 0; }
	h3 {font-size:1.2em; line-height:130%; margin: 15px 0; text-transform: none; }
	h4 {font-size:1em; line-height:130%; margin: 12px 0; text-transform: none;}
	h5 {font-size:1.8em; font-weight: 400 !important;  color: #888;  margin-top: 10px;  margin-bottom: 5px; line-height:130%; text-transform: none !important; }
	h6 {font-size:1em; font-weight: normal;  color: #888;  padding: 0px;  margin-top: 5px;  margin-bottom: 5px;  margin-left: 12px;  line-height:120%;}
	}

/** Цветовая схема **/
:root {
  --cassiopeia-color-primary: #0090BA;
  --cassiopeia-color-link:  #0090BA;
  --cassiopeia-color-hover: #005570;
}



.container-header {
  background-color: var(--cassiopeia-color-primary);
  color: #ffffff;
}

.container-header a,
.container-header .mod-menu__link {
  color: #ffffff;
}

.container-header a:hover,
.container-header .mod-menu__link:hover {
  color: #e0f3fa;
}

.btn-primary {
  background-color: #007799;
  border-color: #005570;
}

.btn-primary:hover, 
.btn-primary:focus {
  background-color: #005570;
  border-color: #003d4f;
}

/** Модули **/

.mod-catchecklist__item {border-color: #0090BA;}
.mod-catchecklist__item.is-active {border-color: #fa0;}

.mod-menu a {color: #0090BA; font-weight: bold; }
.mod-menu a:hover{color: #FE7301}
.mod-menu button {color: #0090BA;}

/** Комментарии  **/
.qt-app {margin-top: 50px;}

/** Расписание  **/
#rsptype li{font-size: 1em; line-height: normal; text-align:center; color: #555;  padding: 5px 5px; border: 1px solid #999; list-style-type: none; }
#rsptype li a{color: #FFF; text-decoration: none; border-bottom: 0 !important; }
#rsptype .rsp {color: #FFF; background: #333; border: 1px solid #FFF}
#rsptype .rsp:hover {background: #FFF; color: #333; border: 1px solid #333; transition:0.5s}
#rsptype .rsp:hover a {color: #000; transition:0.5s}
@media (max-width: 1023px) {#rsptype{display: grid; grid-template-columns: repeat(1, 1fr); grid-gap: 4px; align-self: center; margin-left: -2rem !important; justify-content: center; font-size: 80%;}}
@media (min-width: 102em) {#rsptype{display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 4px; align-self: center;  margin-left: -2rem !important; justify-content: center; font-size: 80%;}}
.rsp-cons {width: 100%; background: #009c50; text-decoration: none; padding: 5px; text-align: center;}
.rsp-cons a {color: #FFF !important; text-decoration: none; border-bottom: 0 !important;}
.rsp-cons a:hover {color: #000 !important; transition:0.5s}

.rasp-main {padding: 5px; margin: 5px; color: #444; background-color: #F8F8F8; border-radius: 8px; border: 1px solid #d0d0d0; border-top: 5px solid #d0d0d0;  }
.rasp-text a { text-decoration: none; color: #000; border-bottom: 1px dotted #444 !important; transition: all 0.2s ease;}
.rasp-btn-blue a {font-size:70%; color: #0090BA !important; background-color:  #ffffff;  padding: 5px;  line-height: 250%; border: 1px solid #0090BA !important; text-align: center;  border-radius: 3px;  }
.rasp-btn-blue a:hover {color: #ffffff  !important; background-color: #0090BA;}
.rasp-btn-green a {font-size:70%; color: #5CB85C !important; background-color:  #ffffff; padding: 5px;  line-height: 250%; border: 1px solid #5CB85C !important; text-align: center; border-radius: 3px;  }
.rasp-btn-green a:hover {color: #ffffff !important; background-color: #5CB85C; }

@media (min-width: 320px) {
.rasp-main {display: block; width: 98%;  min-width: 320px; text-align: center; font-size: calc(16px + 9 * ((100vw - 320px) / 880))}
.rasp-date {display: block;  width: 98%; font-size: 100%; font-weight: 700; color: #FC9A00;}
.rasp-date-tr {display: block;  width: 98%; font-size: 100%; font-weight: 700; color: #0D52A5;}
.rasp-date-mf {display: block;  width: 98%; font-size: 100%; font-weight: 700; color: #e06c00;}
.rasp-date-cr {display: block;  width: 98%; font-size: 100%; font-weight: 700; color: #7641cc;}
.rasp-text {display: block;  width: 98%; font-size:70%; font-weight: 400; margin:0; padding: 0;  line-height: 120%; }
.rasp-text h3 { display: block; font-size:160%; margin:0; padding: 0; }
.rasp-button {display: block;  width: 98%;  margin-top:5px; }
}
@media (min-width: 576px) {
.rasp-main {display: table; width: 100%;  padding: 10px; text-align: left; font-size: calc(16px + 9 * ((100vw - 320px) / 880))}
.rasp-date  {display: table-cell; height:100%;  min-width: 150px; width: 23%; text-align: left; color: #FC9A00; vertical-align: middle; font-size: 80%; font-weight: 700; padding: 3px;  }
.rasp-date-tr  {display: table-cell; height:100%;  min-width: 150px; width: 23%; text-align: left; color: #0D52A5; vertical-align: middle; font-size: 80%; font-weight: 700; padding: 3px;  }
.rasp-date-mf  {display: table-cell; height:100%;  min-width: 150px; width: 23%; text-align: left; color: #e06c00; vertical-align: middle; font-size: 80%; font-weight: 700; padding: 3px;  }
.rasp-date-cr  {display: table-cell; height:100%;  min-width: 150px; width: 23%; text-align: left; color: #7641cc; vertical-align: middle; font-size: 80%; font-weight: 700; padding: 3px;  }
.rasp-text {display: table-cell;  vertical-align: top; width: calc(100vw - 20% - 140px); font-size:60%; font-weight: 400; margin:0; padding: 0; line-height: 120%}
.rasp-text h3 {display: block; font-size:160%; margin:0; padding: 0;}
.rasp-button {display: table-cell;  width:120px; vertical-align: middle;}
}
@media screen and (min-width: 1200px) {.rasp-main  { 25px }}


/** Адаптивное видео **/
.vkvideo { max-width: 100%; } 
.vkvideo iframe { display: block; max-width: 100%; aspect-ratio: 16 / 9; height: auto; }

/** Презентации и тесты **/
.mytest {max-width: 680px; padding: 5px 10px; border-radius: 10px; background-color: #e6e6e6;}
.dialog-0{display: table; width:90%; padding: 5px 10px; background-color: #E4E4FF; border-radius: 10px;}
.dialog-1{display: table; width:90%; padding: 5px 10px; background-color: #E2F5FF; border-radius: 10px;}
.dialog-2{display: table; width:90%; padding: 5px 10px; margin-left:10%; background-color: #E8FEE8; border-radius: 10px;}
.dialog-3{display: table; width:90%; padding: 5px 10px; margin-left:10%; background-color: #FFFAE0; border-radius: 10px;}
.block-gray{display: table; width:100%; padding:  10px; margin-top: 10px; border: 2px solid #E4E4E4; border-radius: 10px; background-color:  #FFFFFF;}
.block-orange{display: table; width:100%; padding: 10px; margin-top: 10px; border: 2px solid #FFD894; border-radius: 10px;}
.block-red{display: table; width:100%; padding: 10px; margin-top: 10px; border: 2px solid #E9564F; border-radius: 10px;background-color:  #FFFFFF;}
.block-blue{display: table; width:100%; padding: 10px; margin-top: 10px; border: 2px solid #94DDFF; border-radius: 10px;background-color:  #FFFFFF;}
.block-green{display: table; width:100%; padding: 10px; margin-top: 10px; border: 2px solid #95D9A9; border-radius: 10px;background-color:  #FFFFFF;}