@import url('https://fonts.googleapis.com/css2?family=Geologica:wght@400;900&family=Tektur:wght@500&family=Tektur:wdth,wght@87.5,500&display=swap');

img.doupic {
	width: 100%;
	max-width: 900px;
}
html, body {
	background-color: #1C0C03;
	background-image: url(png/background.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: 50% 0;
}
@supports ( -webkit-touch-callout : none) {
    html, body { background-attachment:scroll }
}
@supports not ( -webkit-touch-callout : none) {
    html, body { background-attachment: fixed; }
}
.g-page { background: none!important; }
.is_desktop .g-page, .is_desktop body>#container { box-shadow: none!important; }
.b-post-info, .b-typo { color: white!important; } 
.b-post-info .author .name a,
.b-post-info .author .name a:visited {
    color: #FFD7A2;
}
.b-post-info .author .name a:hover {
    color: #f93703;
}
.is_desktop .g-right-shadowed { background: none!important; }
.tg-promo span { background: #e6f5fb22!important; }
.tg-promo span a:link,
.tg-promo span a:visited {
    color: #FFD7A2;
}
.tg-promo span a:hover {
    color: #f93703;
}
.b-footer { color: white!important; }
.b-footer a,
.b-footer a:visited {
    color: #FFD7A2;
}
.b-footer a:hover {
    color: #f93703;
}

.b-dou-vacancies {
    background: none;
    border: 8px solid #FFD7A2;
    color: #ffffff;
}
.b-dou-vacancies a, 
.b-dou-vacancies a:visited {
    color: #FFD7A2;
}
.b-dou-vacancies a:hover {
    color: #f93703;
}
.b-dou-vacancies .vacancies-list li .company { color: #FFD7A2; }
.b-dou-vacancies .vacancies-list li span { color: #ffffff!important; }
.b-dou-vacancies, .b-vacancy-page .b-vacancy {
    border-color: #FFD7A224;
}
.b-block_news { border-color: #FFD7A224; }
.b-block_news h3 { background-color: #FFD7A224; }
.b-block_news a, 
.b-block_news a:visited {
    color: #FFD7A2!important;
}
.b-block_news a:hover {
    color: #f93703!important;
}

.b-adv-events { color: white; }
.b-adv-events a:not(.add-button-sidebar), 
.b-adv-events a:not(.add-button-sidebar):visited {
    color: #FFD7A2!important;
}
.b-adv-events a:not(.add-button-sidebar):hover {
    color: #f93703!important;
}
.b-comments { color: white; }
.b-comments a, .b-comments a:visited { color: #FFD7A2!important; }
.b-comments a:hover { color: #f93703!important; }
.comments-head .comment-subscribe>span { 
    color: #FFD7A2;
    border-bottom: 1px dashed #FFD7A2;
}
.b-similar-posts h4 { color: #FFD7A2; }
.b-similar-posts a, .b-similar-postss a:visited { color: #FFD7A2!important; }
.b-similar-postss a:hover { color: #f93703!important; }

/* TITLE SELECTION BOX STYLES */
#gd-portrait-versus {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: "Geologica", Helvetica;
    margin: 0 auto 40px;
    --pl1: #ff8;
    --pl2: #66F5FF;
    min-width: 350px;
}
#gd-portrait-versus * { box-sizing: border-box; }
#gd-portrait-versus .invisible {
    opacity: 0;
}
#gd-portrait-versus .dc-row {
    display: flex;
}
#gd-portrait-versus .dc-value {
    font-family: "Tektur", Helvetica;
    font-weight: 500;
    color: #3F3021;
}
#gd-portrait-versus .dc-label {
    color: #2F1C10;
}
#gd-portrait-versus h4,
#gd-portrait-versus h5 {
    font-family: "Tektur", Helvetica;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-variation-settings:"wdth" 87.5;
    text-align: center;
}
#gd-portrait-versus h4 {
    font-size: 25px;
    text-shadow: 3px 3px 0 #2f1c1088;
}
#gd-portrait-versus h5 {
    font-size: 20px;
    line-height: 20px;
}

#dc-selection-bar { width: 100%; }
#dc-selection-bar h4 {
    font-style: italic;
    color: #f7ce94;
}
#dc-selection-options {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 5px;
}
#dc-selection-options .dc-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    cursor: pointer;
    border: 1px solid #2f1c10;
    padding: 1px;
}

#dc-selection-options .dc-title-pic {
    width: 100px;
    aspect-ratio: 1 / 1;
    background-color: #65492d66;
    background-repeat: no-repeat;
    background-size: cover;
    transition: background-color .3s ease-out;
    border-bottom: 1px solid #2f1c10;
}


#dc-selection-options .dc-title #dc-title-pic_junior { background-image: url('png/title-pic_junior.png'); }
#dc-selection-options .dc-title #dc-title-pic_middle { background-image: url('png/title-pic_middle.png'); }
#dc-selection-options .dc-title #dc-title-pic_senior { background-image: url('png/title-pic_senior.png'); }
#dc-selection-options .dc-title #dc-title-pic_lead { background-image: url('png/title-pic_lead.png'); }
#dc-selection-options .dc-title .dc-title-name {
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #2f1c10;
}

#dc-selection-options .dc-title.player1 { border-color: var(--pl1); }
#dc-selection-options .dc-title.player1 .dc-title-pic { background-color: var(--pl1); border-bottom-color: var(--pl1); }
#dc-selection-options .dc-title.player1 .dc-title-name { color: var(--pl1); }

#dc-selection-options .dc-title.player2 { border-color: var(--pl2); }
#dc-selection-options .dc-title.player2 .dc-title-pic { background-color: var(--pl2); border-bottom-color: var(--pl2); }
#dc-selection-options .dc-title.player2 .dc-title-name { color: var(--pl2); }

#dc-selection-options .dc-title:hover { border-color: #f7ce94; }
#dc-selection-options .dc-title:hover .dc-title-pic { background-color: #f7ce94; border-bottom-color: #f7ce94; }
#dc-selection-options .dc-title:hover .dc-title-name { color: #f7ce94; }


/* SHOWCASE STYLES */
#dc-showcase h4.dc-player-title { color: #3F3021; white-space: nowrap; }
#dc-showcase .dc-value { transition: color .6s; }
#dc-showcase .active.player-1 .dc-value, #dc-showcase .active.player-1 h4 { color: var(--pl1); }
#dc-showcase .player-1 h4.dc-player-title { text-align: left; }
#dc-showcase .active.player-2 .dc-value, #dc-showcase .active.player-2 h4 { color: var(--pl2); }
#dc-showcase .player-2 h4.dc-player-title { text-align: right; align-self: end; }
#dc-showcase .player-2 .dc-value,
#dc-showcase .player-2 .dc-label { text-align: right; }

#dc-showcase {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

#dc-showcase .dc-player-main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#dc-showcase .dc-player-main .dc-row { height: 100%; }
#dc-showcase .dc-player-main .dc-player-share { max-width: 80px; z-index: 1; }
#dc-showcase .dc-player-main.player-2 .dc-player-share { align-items: flex-end; }
#dc-showcase .dc-player-main.player-1,
#dc-statistics .dc-indicator-data.player-1 { order: 1; }
#dc-showcase .dc-player-main.player-2,
#dc-statistics .dc-indicator-data.player-2 { order: 3; }
#dc-showcase .dc-player-main .dc-value { 
    font-size: 30px;
    line-height: 30px;
    white-space: nowrap;
}
#dc-showcase .dc-player-main .dc-value::after { content: "%"; }
#dc-showcase .dc-player-main .dc-label { 
    font-size: 12px;
    line-height: 14px;
    white-space: normal;
    word-break: keep-all;
}
#dc-showcase .dc-player-main .dc-barchart {
    width: 10px;
    height: 100%;
    max-height: 320px;
    position: relative;
    background-color: #60473499;
    border: 1px solid #3E2E2299;
    box-sizing: content-box;
    margin-bottom: 10px;
}
#dc-showcase .dc-player-main .dc-barchart::after {
    content: "";
    display: block;
    width: 10px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url(png/pattern_progress-vertical.png) repeat-y;
}
#dc-showcase .dc-player-main .dc-barchart .dc-progress {
    position: absolute;
    width: 10px;
    height: 100%;
    max-height: 0%;
    bottom: 0;
    left: 0;
    transition: max-height .6s;
}

#dc-showcase .dc-player-character {
    width: 100%;
    max-width: 120px;
    width: 120px;
    position: relative;
    align-self: center;
    height: 100%;
    display: flex;
    align-items: center;
}
#dc-showcase .dc-player-character::before {
    content: "";
    display: block;
    width: 300px;
    aspect-ratio: 1 / 1;
    position: absolute;
    margin-left: -150px;
    top: -20px;
    left: 50%;
    opacity: 0;
    transition: opacity .6s;
}
#dc-showcase .dc-player-main.player-1 .dc-player-character::before {
    margin-left: -170px;
    background-image: radial-gradient(closest-side, #FFFF66CC, #65492D00);
}
#dc-showcase .dc-player-main.player-2 .dc-player-character::before {
    margin-left: -130px;
    background-image: radial-gradient(closest-side, #66F5FFCC, #65492D00);
}
#dc-showcase .dc-player-main.active .dc-player-character::before { opacity: 1; }
#dc-showcase .dc-player-character .dc-player-picture {
    position: absolute;
    width: 300px;
    aspect-ratio: 3 / 4;
    margin-left: -150px;
    bottom: 20px;
    left: 50%;
    
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 3;
}

#dc-showcase .player-2 .dc-player-character .dc-player-picture { transform: scaleX(-1); }
#dc-showcase .dc-player-main h4.dc-c2a {
    color: #533D27;
    text-shadow: none;
    /* opacity: .8; */
    line-height: 28px;
    margin-bottom: 80px;
    transition: opacity .6s;
    animation-name: c2aAnimation;
    animation-duration: 1.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    white-space: normal;
    word-break: keep-all;
}
@keyframes c2aAnimation {
    from { 
        text-shadow: 0 5px 30px #F7CE94;
        /* color: #533D27; */
        transform: translateY(5px);
    }
    to {
        text-shadow: 0 15px 50px #F7CE94;
        /* color: #3F3021; */
        transform: translateY(-5px);
    }
}

#dc-showcase .dc-player-share {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
#dc-showcase .dc-player-main.player-2 .dc-row { flex-direction: row-reverse; }

#dc-statistics {
    width: 100%;
    display: flex;
    flex-direction: column;
    order: 2;
    color: #2F1C10;
    margin-top: 30px;
    z-index: 5;
}
#dc-statistics .dc-indicator { 
    width: 100%;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
}
#dc-statistics .dc-indicator:not(:last-child) {
    border-bottom: 1px solid #2F1C10;
}
#dc-statistics .dc-indicator-info { width: 100%; max-width: 140px; order: 2; }
#dc-statistics .dc-indicator-title { margin-bottom: 5px; }
#dc-statistics .dc-indicator-subtitle {
    text-transform: uppercase;
    font-size: 11px;
    line-height: 12px;
    text-align: center;
}
#dc-statistics .dc-indicator .dc-value {
    font-size: 20px;
    line-height: 20px;
    white-space: nowrap;
}
#dc-statistics .dc-indicator-age .dc-value {
    font-size: 45px;
    line-height: 45px;
    white-space: nowrap;
}
#dc-statistics .dc-indicator-salary .dc-value::before { content: "$"; }
#dc-statistics .dc-indicator-eng .dc-value::after,
#dc-statistics .dc-indicator-income .dc-value::after,
#dc-statistics .dc-indicator-balance .dc-value::after { content: "%"; }
#dc-statistics .dc-indicator-data {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
#dc-statistics .dc-indicator-data.player-2 { align-items: flex-end; }
#dc-statistics .dc-indicator .dc-barchart {
    width: 100%;
    max-width: 130px;
    height: 15px;
    position: relative;
}
#dc-statistics .dc-indicator .dc-barchart.normalized {
    background-color: #60473499;
    border: 1px solid #3E2E2299;
    box-sizing: content-box;
}
#dc-statistics .dc-indicator .dc-barchart.normalized::after,
#dc-statistics .dc-indicator .dc-barchart:not(.normalized) .dc-progress::after {
    content: "";
    display: block;
    width: 100%;
    height: 15px;
    position: absolute;
    top: 0;
    left: 0;
    background: url(png/pattern_progress-horisontal.png) repeat-x;
}
#dc-statistics .dc-indicator .dc-barchart .dc-progress {
    position: absolute;
    height: 15px;
    width: 100%;
    max-width: 0%;
    transition: max-width .6s;
}

#dc-showcase .player-1 .dc-progress { background-color: var(--pl1); }
#dc-showcase .player-2 .dc-progress { background-color: var(--pl2); }
#dc-statistics .dc-indicator-data.player-2 .dc-progress {
    left: unset;
    right: 0;
}

@media screen and (max-width: 1640px) {
    #dc-showcase .dc-player-character { width: 60px; }
    #dc-showcase .dc-player-character .dc-player-picture {
        width: 250px;
        margin-left: -125px;
        bottom: 60px;
    }
    #dc-statistics .dc-indicator-subtitle {
        font-size: 10px;
        line-height: 11px;
    }
    #gd-portrait-versus h5.dc-indicator-title {
        font-size: 18px;
        line-height: 18px;
        margin-bottom: 2px; 
    }
}

@media screen and (max-width: 1100px) {
    #dc-showcase .dc-player-character { width: 10px; }
    #dc-showcase .dc-player-main h4.dc-c2a { display: none; }
}
@media screen and (max-width: 680px) {
    #gd-portrait-versus h5.dc-indicator-title {
        font-size: 15px;
        line-height: 15px;
    }
    #dc-statistics .dc-indicator-subtitle {
        font-size: 9px;
        line-height: 9px;
    }
    #dc-showcase .dc-player-main .dc-label {
        font-size: 10px;
        line-height: 11px;
    }
    #dc-statistics .dc-indicator .dc-barchart { max-width: 100px; }
    #dc-showcase .dc-player-character .dc-player-picture {
        width: 220px;
        margin-left: -110px;
    }
    #dc-showcase .dc-player-main { max-width: 60px; }
    #dc-showcase .dc-player-character { width: 1px; }
    #dc-showcase h4.dc-player-title {
        font-size: 20px;
    }
    #dc-showcase .dc-player-character::before {
        width: 200px;
        top: 0px;
    }
    #dc-showcase .dc-player-main.player-1 .dc-player-character::before { margin-left: -110px; }
    #dc-showcase .dc-player-main.player-2 .dc-player-character::before { margin-left: -90px; }
}
@media screen and (max-width: 560px) {
    #dc-statistics .dc-indicator {
        flex-direction: column-reverse;
        padding: 10px 15px 5px;
        gap: 0;
    }
    #dc-statistics .dc-indicator-data-wrapper {
        display: flex;
        width: 100%;
        justify-content: space-between;
    }
    #dc-statistics .dc-indicator-info { 
        max-width: unset;
        mix-blend-mode: multiply;
    }
    #gd-portrait-versus h5.dc-indicator-title { margin-bottom: 0; }
    #dc-statistics .dc-indicator-data { gap: 2px; }
    #dc-statistics .dc-indicator .dc-barchart,
    #dc-statistics .dc-indicator .dc-barchart .dc-progress,
    #dc-statistics .dc-indicator .dc-barchart.normalized::after,
    #dc-statistics .dc-indicator .dc-barchart:not(.normalized) .dc-progress::after {
        height: 10px;
    }
    #dc-statistics .dc-indicator-age .dc-value {
        font-size: 20px;
        line-height: 20px;
    }

}
@media screen and (max-width: 560px) {
    #dc-statistics .dc-indicator { padding: 8px 5px 5px; }
    #dc-statistics .dc-indicator .dc-barchart { max-width: 60px; }
    #dc-selection-options .dc-title-pic { width: 80px; }
}


/* LONGREAD NAVIGATION */
body { margin-right: 350px!important; }

#longread-navigation {
	position: fixed;
    right: 0;
    top: 0;
	padding: 45px 45px 60px;
	box-sizing: border-box;
	background: #3F3021;
    background-image: url(png/background.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: 50% 0;
	width: 350px;
	min-width: 350px;
	height: 100%;
	z-index: 100;
}
@supports ( -webkit-touch-callout : none) {
    #longread-navigation { background-attachment:scroll }
}
@supports not ( -webkit-touch-callout : none) {
    #longread-navigation { background-attachment: fixed; }
}
#longread-navigation::after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #3F3021;
    position: absolute;
    top: 0;
    left: 0;
    opacity: .6;
}
#longread-navigation .navigation-wrapper {
    position: relative;
    z-index: 5;
    color: #f7ce94;
}
#longread-navigation .anchor {
	display: inline-block;
	width: 100%;
	padding: 15px 0 17px;
	box-sizing: border-box;
	font-family: "Manrope", sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
	border-bottom: 1px solid #f7ce9466;
	cursor: pointer;
	color: #f7ce94;
	position: relative;
	transition: all .25s;
}
#longread-navigation .anchor:last-child { border-bottom: none; }
#longread-navigation .anchor.active { 
	color: #f7ce94; 
	padding-left: 10px;
}
#longread-navigation .anchor::before {
	content: "\2014";
	display: inline-block;
	position: absolute;
	left: 0;
	transition: all .25s;
	opacity: 0;
}
#longread-navigation .anchor.active::before {
	left: -12px;
	opacity: 1;
}
#longread-navigation .anchor:hover { color: #FBE9D0; }

#nav-button-mobile {
	width: 48px;
	height: 48px;
	z-index: 9000;
	position: fixed;
	right: 32px;
	top: 32px;
	text-align: center;
	background-color: #3F3021;
	border-radius: 100px;
	cursor: pointer;
	display: none;
}
#nav-button-mobile:hover { background-color: #2F1C10; }
#nav-button-mobile svg { margin-top: 16px; fill: #f7ce94; }
#nav-button-mobile:hover svg { fill: #FBE9D0; }

.b-typo h2 .anchor { color: white; }
.b-typo h2 .anchor:hover { color: #f7ce94; }

@media screen and (max-width:1380px) {
	body { margin-right: 0!important; }
	#longread-navigation {
		right: -350px;
		transition: right .3s;
	}
	#longread-navigation.open { right: 0; }
	#nav-button-mobile {
		display: block;
		z-index: 50;
	}
}
@media screen and (max-width:960px) {
    #longread-navigation { 
        width: 100%;
        right: -100%;
    }
	#longread-navigation .anchor {
		padding-right: 30px;
		font-size: 18px;
		line-height: 20px;
	}
	/* .b-longread .b-typo_post h2 { font-family: "Pacifico", sans-serif !important; } */
	/* .b-longread .b-typo_post h2.section-title { border-bottom: 1px solid #303030!important; } */
    body {
        min-width: 400px;
    }
    .g-page { overflow-x: hidden !important; }
}


/* COMMENTS */

.b-comments .comment .support a:link { border-bottom-color: #FFD7A2; }
.b-comments .comment .b-post-author a.comment-link:link { border-bottom-color: #FFD7A2; }
.comments-head a.navigation-comment:link { border-bottom-color: #FFD7A2; }
.b-comments-form .list-tags { color: #FFD7A2; opacity: .8; }
.b-comments-form .send .hint { color: #fff; }
.b-comments-form .send .b-buttons .form-button {
    background-color: #FFD7A2;
    border: none;
    padding: 2px 7px 3px;
    border-radius: 3px;
    color: #3F3021;
}
.b-comments-form .send .b-buttons .form-button.disabled {
    color: #60473499;
}
.b-comments-form .textarea-wrap textarea {
    border-color: #3E2E2299;
    background-color: #2F1C1033;
    color: #fff;
}
.comments-head .fixed-menu {
    border-bottom-color: #3F3021;
}