@font-face {
-webkit-font-smoothing: none;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;

    font-family: 'TCI';
    src: url('/fonts/TCI.woff2') format('woff2'),
        url('/fonts/TCI.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
-webkit-font-smoothing: none;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;

    font-family: 'TCB';
    src: url('/fonts/TCB.woff2') format('woff2'),
        url('/fonts/TCB.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
-webkit-font-smoothing: none;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;

    font-family: 'TCR';
    src: url('/fonts/TCR.woff2') format('woff2'),
        url('/fonts/TCR.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
-webkit-font-smoothing: none;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;

    font-family: 'TCD';
    src: url('/fonts/TCD.woff2') format('woff2'),
        url('/fonts/TCD.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
}

body, html {
height: 100%;
width: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
margin: 0px;
position: relative;
top: 0px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;
scroll-behavior: smooth;
background: rgba(255, 248, 245, 1);
}

body {
  touch-action: pan-x pan-y;
  display: flex;
  align-items: safe center;
  justify-content: center;
  padding: 20px 0px 0px 0px;
}
html {
padding: 0px;
}

.content_container {
width: calc(100% - 40px);
/* 
left: 0;
right: 0;
margin: 0px auto;
 */
padding: 0px;
max-width: 490px;
height: auto;
position: relative;
display: block;
/* background: #ff0000; */
font-family: 'TCR', Arial, sans-serif;
font-size: 18px;
}
strong {
/* font-family: 'TCB', Arial, sans-serif; */
font-family: 'TCD', Arial, sans-serif;
font-weight: normal;
}
i {
font-family: 'TCI', Arial, sans-serif;
}



ul {
	list-style: none;
	padding-left: 0;
	margin: 8px 0px 24px 0px;
}

ul li {
	padding-left: 22px;
	margin-bottom: 8px;
	position: relative;
}

ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 2px;
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	background-image: url("data:image/svg+xml;charset=utf8,<svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'><rect width='16' height='16' rx='4' fill='%232E3139'/><path d='M5 5H11.125V11.125' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><line x1='5' y1='10.9393' x2='10.0643' y2='5.875' stroke='white' stroke-width='1.5' stroke-linecap='round'/></svg>");
}

.icon {
margin: 0px 0px -3px 3px;
}

p {
margin: 0px 0px 24px 0px;
}
p.ul_title {
margin: 0px 0px 0px 0px;
}

a.link, a:visited, a:active {
text-decoration: underline;
color: rgba(0,0,0,1);
}
a.link:hover {
cursor: pointer;
text-decoration: none;
}

video {
width: 100%;
height: auto;
border-radius: 16px;
margin: 0px 0px 24px 0px;
}


.you {
position: absolute;
bottom: 40px;
left: 50px;
}
.you .circle {
background: rgba(135,255,203,1);
height: 6px;
width: 6px;
border-radius: 3px;
position: absolute;
left: -8px;
top: -8px;
}
.you .text {
background: rgba(135,255,203,1);
font-size: 22px;
font-family: 'TCD', Arial, sans-serif;
color: rgba(0,0,0,1);
display: flex;
align-items: center;
justify-content: center;
height: 36px;
border-radius: 4px 18px 18px 18px;
padding: 0px 16px;
}

.me {
position: absolute;
top: 10px;
right: 30px;
}
.me .circle {
background: rgba(255,247,1,1);
height: 6px;
width: 6px;
border-radius: 3px;
position: absolute;
left: -8px;
bottom: -8px;
}
.me .text {
background: rgba(255,247,1,1);
font-size: 22px;
font-family: 'TCD', Arial, sans-serif;
color: rgba(0,0,0,1);
display: flex;
align-items: center;
justify-content: center;
height: 36px;
border-radius: 18px 18px 18px 4px;
padding: 0px 16px;
}

.video_container {
position: relative;
}

#video_overlay {
width: 100%;
height: calc(100% - 24px);
position: absolute;
top: 0px;
left: 0px;
background: rgba(200,200,200,1);
opacity: 1;
transition: opacity 0.3s;
border-radius: 16px;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
}

#page_overlay {
position: fixed;
top: 0px;
left: 0px;
z-index: 20;
background: rgba(255, 248, 245, 1);
height: 100%;
width: 100%;
opacity: 1;
transition: opacity 0.3s;
display: flex;
align-items: center;
justify-content: center;
}

/* Спиннер */
.spinner {
    width: 40px;
    height: 40px;
    border: 2px solid rgba(0, 0, 0, 0.3);
    border-top: 2px solid rgba(0,0,0,1);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}


        #scroll_btn {
            position: fixed;
            bottom: 30px;
            left: 0;
            right: 0;
            margin: 0px auto;
            display: none;
            opacity: 1;
            transition: opacity 0.3s;
            background: rgba(255,255,255,1);
            height: 60px;
            width: 60px;
            border-radius: 30px;
            -webkit-box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.2);
			-moz-box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.2);
			box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.2);
			align-items: center;
			justify-content: center;
			transform: scale(1);
			transition: all 0.3s;
			z-index: 15;
        }
        #scroll_btn:hover {
        cursor: pointer;
        transform: scale(1.05);
        
        }


@media all and (max-width: 768px) {

.content_container {
font-size: 16px;
}

p {
margin: 0px 0px 16px 0px;
}

video {
border-radius: 16px;
margin: 0px 0px 16px 0px;
}

#video_overlay {
height: calc(100% - 16px);
}


.you {
bottom: 40px;
left: 40px;
}

.you .text {
font-size: 18px;
height: 30px;
padding: 0px 12px;
}

.me {
top: 10px;
right: 30px;
}

.me .text {
font-size: 18px;
height: 30px;
padding: 0px 12px;
}

}