div#cbook_container
{
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-start;
overflow: hidden;
}

div#cbook_splash
{
flex-shrink: 0;
width: 100%;
padding-top: 52%;
position: relative;
}

div#cbook_splash div.container
{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}

div#cbook_splash div.container h1
{
font-size: 4rem;
line-height: 5rem;
letter-spacing: 0.125rem;
}

div#cbook_splash div.container blockquote
{
position: relative;
padding: 1rem 2.5rem;
top: 6rem;
}

div#cbook_splash div.container blockquote:before,
div#cbook_splash blockquote:after
{
content: '\20';
display: block;
width: 2rem;
height: 2rem;
position: absolute;
background-size: contain;
background-repeat: no-repeat;
}

div#cbook_splash div.container blockquote:before
{
left: 0;
top: 0;
background-image: url('/assets/cbook/quote-left.svg');
background-position: left top;
}

div#cbook_splash div.container blockquote:after
{
right: 0;
bottom: 0;
background-image: url('/assets/cbook/quote-right.svg');
background-position: right bottom;
}

div#cbook_splash div.container blockquote span
{
position: absolute;
right: 0;
bottom: -3rem;
display: block;
width: 50%;
padding-bottom: 0.5rem;
padding-left: 0.25rem;
background-image: url('/assets/cbook/arrow-right.svg');
background-position: bottom;
background-size: contain;
background-repeat: no-repeat;
cursor: pointer;
/*outline: solid 1px red;*/
}

div#cbook_content
{
position: relative;
width: 100%;
flex-shrink: 0;
/*outline: dashed 1px red;*/
}

div#cbook_content div.frame
{
width: 100%;
padding-bottom: 2rem;
overflow: hidden;
/*outline: dashed 1px red;*/
}

div#cbook_content div.frame div.wrapper
{
width: auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
margin-left: 0;
position: relative;
}

div#cbook_content div.frame div.wrapper div.item
{
flex-shrink: 0;
flex-grow: 0;
width: 100%;
height: 100%;
background-position: top center;
background-size: auto 85%;
background-repeat: no-repeat;
position: relative;
/*outline: dashed 1px red;*/
}

div#cbook_content div.frame div.wrapper div.item:before
{
content: '\20';
display: block;
width: 100%;
padding-top: 50%;
}

div#cbook_content div.item h2
{
position: absolute;
left: 1rem;
bottom: 1rem;
width: 20%;
color: #000;
font-size: 2.5rem;
line-height: 2.5rem;
/*outline: dashed 1px red;*/
}

div#cbook_content div.item h2 span
{
display: block;
font-size: 3.5rem;
line-height: 4.5rem;
white-space: nowrap;
}

div#cbook_content div.item blockquote
{
position: absolute;
top: 0;
right: 1rem;;
width: 35%;
color: #4f4f4f;
padding: 1rem 2.5rem;
/*outline: dashed 1px red;*/
}

div#cbook_content div.item blockquote:before,
div#cbook_content div.item blockquote:after
{
content: '\20';
display: block;
width: 2rem;
height: 2rem;
position: absolute;
background-size: contain;
background-repeat: no-repeat;
}

div#cbook_content div.item blockquote:before
{
left: 0;
top: 0;
background-image: url('/assets/cbook/quote-left.svg');
background-position: left top;
}

div#cbook_content div.item blockquote:after
{
right: 0;
bottom: 0;
background-image: url('/assets/cbook/quote-right.svg');
background-position: right bottom;
}

div#cbook_content div.item a
{
position: absolute;
top: 0;
bottom: 1.25rem;
left: 25%;
right: 25%;
/*outline: dashed 1px red;*/
}

div#cbook_content div.item a span
{
position: absolute;
bottom: -1rem;
left: 30%;
right: 30%;
height: 2.5rem;
line-height: 2.25rem;
text-align: center;
color: #4f4f4f;
border: solid 1px;
border-radius: 0.5rem;
/*outline: dashed 1px red;*/
}

div#cbook_content div.item a span:after
{
content: url('/assets/cbook/arrow-black-right-short.svg');
width: 2rem;
margin-left: 1rem;
}

div#cbook_content div.item a:hover span
{
/*color: #fff;*/
}

div#cbook_content div.item a:hover span:after
{
/*content: url('/assets/cbook/arrow-white-right-short.svg');*/
}

div#cbook_content div.progress
{
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 3rem;
padding: 0 3rem;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
opacity: 0.5;
transition: all ease 0.15s;
position: relative;
}

div#cbook_content div.progress:hover
{
opacity: 1;
}

div#cbook_content div.progress div.control
{
position: absolute;
top: 0;
width: 3rem;
height: 3rem;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
cursor: pointer;
opacity: 0.5;
}

div#cbook_content div.progress div.control.previous
{
left: 0;
background-image: url('/assets/cbook/angle-left.svg');
}

div#cbook_content div.progress div.control.next
{
right: 0;
background-image: url('/assets/cbook/angle-right.svg');
}

div#cbook_content div.progress div.container
{
width: auto;
height: inherit;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
position: relative;
counter-reset: mark;
/*outline: dashed 1px red;*/
}

div#cbook_content div.progress div.container div.line
{
position: absolute;
top: 1.5rem;
left: 2.5rem;
right: 2.5rem;
width: auto;
height: 1px;
background: #444;
opacity: 0.75;
}

div#cbook_content div.progress div.container div.item
{
width: 5rem;
height: inherit;
display: flex;
justify-content: center;
align-items: center;
counter-increment: mark;
/*outline: dashed 1px red;*/
}

div#cbook_content div.progress div.container div.item div.mark
{
width: 1rem;
height: 1rem;
background: #444;
color: #fff;
border: none;
border-radius: 0.5rem;
cursor: pointer;
transition: all ease 0.15s;
/*outline: dashed 1px red;*/
}

div#cbook_content div.progress div.container div.item div.mark:before
{
content: counter(mark);
display: block;
width: 1rem;
height: 1rem;
line-height: 1rem;
text-align: center;
font-size: 0;
font-weight: bold;
transition: all ease 0.15s;
}

div#cbook_content div.progress div.container div.item.current div.mark
{
width: 2rem;
height: 2rem;
border-radius: 1rem;
}

div#cbook_content div.progress div.container div.item.current div.mark:before
{
width: 2rem;
height: 2rem;
line-height: 2rem;
font-size: 1rem;
}

@media (max-width: 720px)
{
div#cbook_splash { position: static; padding: 0; }
div#cbook_splash div.container { flex-wrap: wrap; position: static; height: 60vh; }
div#cbook_splash div.container h1 { font-size: 2.75rem; line-height: 3.5rem; margin-top: 1rem; }
div#cbook_splash div.container blockquote { top: 0; margin-top: 3rem; margin-bottom: 4rem; }
div#cbook_splash div.container blockquote br { display: none; }
div#cbook_splash div.container blockquote span { bottom: -3rem; }

div#cbook_content div.frame div.wrapper div.item { height: 85vh;
	background-size: 85vw auto; background-position: center 15vh; }
div#cbook_content div.frame div.wrapper div.item:before { display: none; }
div#cbook_content div.frame div.wrapper div.item h2 { top: 0; left: 0; right: 0; width: 100%; font-size: 1.5rem; margin-top: 0; }
div#cbook_content div.frame div.wrapper div.item h2 span { font-size: 2.5rem; line-height: 3rem; }
div#cbook_content div.frame div.wrapper div.item blockquote { top: auto; bottom: 4rem; left: 0; right: 0; width: 100%; }
div#cbook_content div.frame div.wrapper div.item a { left: 5%; right: 5%; }

div#cbook_content div.frame div.wrapper div.item.opyt-masshtabov-planety { background-position: center 10vh; }

div#cbook_content div.progress div.container div.item { width: 3rem; }
}