@import url('https://fonts.googleapis.com/css?family=PT+Serif+Caption|IBM+Plex+Sans');

h1, h2, h3, h4 {
  border:none; font-weight: 700;
  font-family: 'IBM Plex Sans', sans-serif;}
  [onclick] { cursor: pointer;}
h2 { font-size: 2em; text-align: center;}
body {
  padding: 0px ;
  margin: 0px;
  font-family: 'PT Serif Caption', serif;
}
/* p {font-size: 1.5em;} */

header h1 {
  font-size: 3.6em;
  font-weight: 900;
}

  h1 span {
    font-size: 0.6em;
    line-height: 0.6em;
  }

header.row { margin: 0px;}

/* linck main sait */
header > div:first-child {
    background-color: #1f1f1f;
    text-align: center;
    color: #ffffff;
    min-height: 50px;
}

    .es-main-site a {
       font-size: 1em;
       color: #ffffff;
       display: block;
    }

        .es-main-site a:hover {
           color: #ffffff;
           text-decoration: none;
       }

    .es-main-site img{
       height: 50px;
       margin-right:15px;
    }

a { color: rgb(74, 0, 0) }
a:hover { color: rgb(125, 0, 0) }

footer {
  padding: 10px;
}
footer .ts-visual-small {padding: 0px;}

/********************************************************************************************
*
* Цветовые схемы
*
********************************************************************************************/
:root {
  --color-main:rgb(111, 3, 3);
  --color-low:rgb(255, 224, 224);
  --color-accent: rgb(255, 255, 0);
}


/**************************************************************************************/

.ex-head {
  min-height: 450px;
  /* background-color: rgb(150, 150, 150);
  background: linear-gradient(rgb(238, 223, 87) 7%, rgb(182, 157, 33),rgb(172, 161, 65) 90%,rgb(130, 101, 13)); */
  background: linear-gradient(33deg,rgb(221, 221, 221) 7%, rgb(166, 166, 166) 26%, rgb(223, 223, 223) 53%, rgb(180, 180, 180) 87%, rgb(224, 223, 223) 90%,rgb(198, 197, 195));
  margin: 0px;
  padding: 25px 0px 0px 100px;
  position:relative;
}
  .ex-head .portret {
    float:left;
    margin:15px 40px 15px 15px;
    box-shadow: black 7px 7px 12px;
    border-radius:10px;
  }
  .ex-head .decor {
    width:86px;
    padding:3px;
    filter: drop-shadow(6px 6px 5px black);
  }
  .ex-head h1 {
    color: rgb(34, 34, 34);
    margin-bottom: 0px;
    padding-bottom: 25px;
  }


.head {
  background-color: var(--color-main);
  padding:25px 100px;
}
  .head h1 {
    text-shadow: black 2px 2px 2px;
    color: var(--color-accent);
  }

.content {font-size:1.5em; padding:25px 5px;}
.prev-text {
  background-color: var(--color-low);
  box-shadow: black 7px 7px 12px;
}
.biographia li::marker, .biographia span { color: var(--color-main);}

.navigation { background-color: rgb(26, 26, 26) ; }
.navigation nav a {
  color: white;
  font-size: 1.5em;
  text-align: center;
  font-weight: bold;
  padding: 10px;
}


.flex-block {
  flex-direction: row;
  flex-wrap: wrap;
  display: flex;
  clear:both;
  padding-top:25px;
}
  .flex-block>div {
    width: calc(25% - 10px);
    border: 1px solid var(--color-main);
    padding: 3px;
    margin: 2px;
    font-size:0.75em;
  }
  .flex-block>div>div {
    width: 100%;
    height: 300px;
    background-size: cover;
  }


.book-block img {
  width:100%;
  box-shadow: black 7px 7px 12px;
}
.book-block>div {
  clear:both;
  padding: 20px 0px;
}

.point-block {
  text-align: center;
  padding:25px 0px;
}
.point-block img {
  height: 45px;
}


/************************************************************************/
/***********************
*
*
*  Старый код
*
*
*************************/

/* слайдер - карусель */
.ts-foto-list.ex-book-list img {
  cursor: pointer;
  height: 300px;
}

.carousel {
  padding-bottom: 30px;
}

.carousel img {
  margin: auto;
  max-height: 100vh;
  max-width: 100%;
}

  .carousel .carousel-indicators {
    bottom: -5px;
  }

  .carousel .carousel-indicators li {
    border-color: rgb(28, 38, 48);
    border-width: 2px;
  }

/* отдельные стили */
.ex-large {
  font-size: 1.5em;
}

.ex-large-4 {
  font-size: 4em;
}


.ex-button-over {
  position: relative;
}
  .ex-button-over .ts-visual-button {
    position: absolute;
    bottom: 3px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 140px;
  }


/* Основа оформления*/

blockquote {
  border: none;
  margin: 0px 35px;
  margin-top: 30px;
}

  blockquote::before {
    content:open-quote;
    font-size: 2em;
    display: inline-block;
    float: left;
    margin-left: -35px;
    margin-top: -15px;
  }

  blockquote::after {
    content: close-quote;
    font-size: 2em;
    display: inline-block;
    float: right;
    margin-right: -35px;
    margin-top: -15px;
  }

@media (max-width: 1200px) {
  .flex-block>div { width: calc(33% - 10px); }
  /* nav a.ex-nav {font-size: 1.35em;} */
}
@media (max-width: 992px) {
  .flex-block>div { width: calc(50% - 10px); }
  /* header h1 { font-size: 3.0em;}
  .ex-large { font-size: 1.2em;}
  p {font-size: 1em;}
  .ex-img-block .info {font-size: 1.5em;}
  .ex-large-4 {font-size: 2.5em;}
  /*дополнения*/
  /* nav a.ex-nav.ex-top-border { padding: 10px; min-height: 50px; height: 50px;border-top-width: 5px;font-size: 1.25em;background-size: 25px 25px;}
  .ex-head {padding-left: 25px;}
  .ex-head img {width: 40%;}
  .ex-show-sm {display: none;} */ */
}

@media (max-width: 768px) {
  .flex-block>div { width: 100%; }
  /* .ex-show { display: none;}
  .ex-xs-button { cursor: pointer; text-decoration:underline;}
  .ex-img-block .info { padding: 15px; display: block; bottom: 0px; top:auto;}
  .ts-foto-list.ts-img-300h img {max-width: 100%;max-height: 100vh;}
  blockquote { margin: 0px 15px;}
  blockquote::before { font-size: 1em; margin-left: -15px;}
  blockquote::after { font-size: 1em; margin-right: -15px;}
  .ex-large-4 {font-size: 1.5em;}
  .ex-razdel h2 {font-size:0.75em;}
  .ex-head img {display: none;}
  .ex-head {min-height: auto;}
  header h1 { font-size: 1.75em;} */
}