/* fonts start */
@font-face {
	font-family: 'FuturaPTWebLight';
	font-weight: normal;
	font-style: normal;
	font-display: swap;
	src: url(../fonts/Futura-PT_Light.woff2) format('woff2');
}

@font-face {
	font-family: 'FuturaPTWebBook';
    font-weight: normal;
	font-style: normal;
    font-display: swap;
	src: url(../fonts/Futura-PT_Book.woff2) format('woff2');
}

@font-face {
	font-family: 'FuturaPTWebBookOblique';
    font-weight: normal;
	font-style: normal;
    font-display: swap;
	src: url(../fonts/Futura-PT_Book-Oblique.woff2) format('woff2');
}

@font-face {
	font-family: 'FuturaPTWebMedium';
    font-weight: normal;
	font-style: normal;
    font-display: swap;
	src: url(../fonts/Futura-PT_Medium.woff2) format('woff2');
}

@font-face {
	font-family: 'FuturaPTWebDemi';
    font-weight: normal;
	font-style: normal;
    font-display: swap;
	src: url(../fonts/Futura-PT_Demi.woff2) format('woff2');
}

@font-face {
	font-family: 'FuturaPTWebHeavy';
    font-weight: normal;
	font-style: normal;
    font-display: swap;
	src: url(../fonts/Futura-PT_Heavy.woff2) format('woff2');
}

@font-face {
	font-family: 'FuturaPTWebBold';
    font-weight: normal;
	font-style: normal;
    font-display: swap;
	src: url(../fonts/Futura-PT_Bold.woff2) format('woff2');
}

@font-face {
	font-family: 'BaskervilleDisplayPTWebDisplay';
	font-weight: normal;
	font-style: normal;
	font-display: swap;
	src: url(../fonts/Baskerville-Display-PT_Display.woff2) format('woff2');
}

@font-face {
	font-family: 'BaskervilleDisplayPTWebDisplayBold';
	font-weight: normal;
	font-style: normal;
	font-display: swap;
	src: url(../fonts/Baskerville-Display-PT_Display-Bold.woff2) format('woff2');
}
/* fonts end */

/* normalize start */
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}
  
body {
    margin: 0;
}
  
main {
    display: block;
}
  
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}
  
hr {
    box-sizing: content-box; 
    height: 0;
    overflow: visible; 
}
  
pre {
    font-family: monospace, monospace;
    font-size: 1em;
}
  
a {
    background-color: transparent;
}
  
abbr[title] {
    border-bottom: none;
    text-decoration: underline; 
    text-decoration: underline dotted;
}
  
b,
strong {
    font-weight: bolder;
}
  
code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}
  
small {
    font-size: 80%;
}
  
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
  
sub {
    bottom: -0.25em;
}
  
sup {
    top: -0.5em;
}
  
img {
    border-style: none;
}
  
button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15; 
    margin: 0; 
}
  
button,
input { 
    overflow: visible;
}
  
button,
select { 
    text-transform: none;
}
  
/* button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
} */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}
  
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}
  
fieldset {
    padding: 0.35em 0.75em 0.625em;
}
  
legend {
    box-sizing: border-box;
    color: inherit;
    display: table; 
    max-width: 100%; 
    padding: 0; 
    white-space: normal; 
}
  
progress {
    vertical-align: baseline;
}
  
textarea {
    overflow: auto;
}
  
[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}
  
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/* [type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
} */

/* [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
} */

/* ::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
} */

details {
    display: block;
}
  
summary {
    display: list-item;
}
  
template {
    display: none;
}

[hidden] {
    display: none;
}
/* normalize end */

/* common-start start */
:root {
    --black-600: #1A1A1A;
    --black-500: #262626;
    --black-300: #6C7071;
    --gray-400: #ACACAC;
    --gray-300: #B8BFC0;
    --gray-250: #D3D3D3;
    --gray-200: #E4E5E6;
    --gray-175: #EDEDED;
    --gray-150: #F2F2F2;
    --gray-100: #F7F7F7;
    --white: #FFFFFF;
    --paper-75: #F5F1E6;
    --paper-100: #EFEADD;
    --paper-500: #E1BB81;
    --clay-500: #C8814D;
    --clay-550: #B3682F;
    --velvet-500: #193033;
    --blue: #4180DE;
    --red-500: #A12828;
    --gr-gray: linear-gradient(135deg, #FAFAFA 0%, #F5F2F0 100%);
    --gr-blue-yellow: linear-gradient(135deg, #F4F8FC 0%, #FAF3ED 100%);
    --gr-white-blue-orange: linear-gradient(135deg, #EEEBDD 0%, #A7C5D6 51.56%, #D7A16F 100%);
    --black-8-4: 0px 2px 8px rgba(38, 38, 38, 0.04);
}

body {
    font-family: 'FuturaPTWebBook', 'Segoe UI', 'SF Pro display', 'Helvetica', 'Arial', sans-serif;
    font-style: normal;
    font-weight: normal;
    color: var(--black-500);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@keyframes appearance {
    from {
      opacity: 0;
      position: relative;
      top: -20px;
    }
  
    to {
      opacity: 1;
      position: relative;
      top: 0px;
    }
}

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

ul {
    padding-left: 0px;
}

ol {
    padding-left: 0px;
}

li {
    list-style-type: none;
}

a {
    text-decoration: none;
    color: inherit;
}

dd {
    margin-left: 0px;
}

.main-container {
    max-width: 1232px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 32px;
    padding-right: 32px;
    position: relative;
}

@media (max-width: 480px) {
    .main-container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

.line {
    display: block;
    height: 1px;
    background-color: var(--paper-100);
}

.gray-compbox {
    padding: 6px 8px 6px 8px;
    background-color: var(--gray-200);
    border-radius: 3px;
    white-space: nowrap;
}

.white-compbox {
    padding: 5px 7px 5px 7px;
    background-color: var(--white);
    border: 1px solid var(--gray-250);
    border-radius: 3px;
    white-space: nowrap;
}

.orange-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px 2px 6px;
    background-color: var(--paper-100);
    border-radius: 4px;
    color: var(--clay-550);
    max-width: fit-content;
}

.chip {
    padding: 8px 16px 8px 16px;
    border: 1px solid var(--black-500);
    border-radius: 32px;
}

.border-black {
    border: 1px solid var(--black-500);
}

.border-m2-blue {
    border: 0.75px solid #1C1BB1;
}

.arrow-link {
    white-space: nowrap;
}

.arrow-link-img {
    transition: all 0.12s ease-in-out;
}

.arrow-link:hover .arrow-link-img {
    margin-left: 2px;
}

.back-link {
    white-space: nowrap;
}

.back-link div {
    width: 16px;
    height: 16px;
    margin-right: 4px;
    background-image: url('../img/cv/arrow-left.svg');
}

.back-link_gray div {
    width: 16px;
    height: 16px;
    margin-right: 4px;
    background-image: url('../img/cv/arrow-left-gray.svg');
}

.back-link_white div {
    width: 16px;
    height: 16px;
    margin-right: 4px;
    background-image: url('../img/cv/arrow-left-white.svg');
}

.back-link:hover {
    color: var(--clay-500);
}

.back-link:hover div {
    background-image: url('../img/cv/arrow-left-clay.svg');
}

.back-button {
    display: inline-flex;
    padding: 12px 36px 12px 28px;
    white-space: nowrap;
    background-color: var(--paper-100);
}

.back-button div {
    float: left;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    background-image: url('../img/cv/arrow-left.svg');
}

.back-button:hover {
    background-color: #EFE7D7;
}

.black-button {
    background-color: var(--black-500);
}

.black-button div {
    background-image: url('../img/cv/arrow-left-white.svg');
}

.black-button:hover {
    background-color: var(--black-600);
}

/* fonts */
.reg-48 {
    font-style: normal;
    font-weight: 400;
    font-size: 48px;
    line-height: 62px;
}

.reg-44 {
    font-style: normal;
    font-weight: 400;
    font-size: 44px;
    line-height: 52px;
}

.reg-36 {
    font-style: normal;
    font-weight: 400;
    font-size: 36px;
    line-height: 44px;
}

.reg-32 {
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 40px;
}

.reg-28 {
    font-style: normal;
    font-weight: 400;
    font-size: 28px;
    line-height: 36px;
}

.reg-26 {
    font-style: normal;
    font-weight: 400;
    font-size: 26px;
    line-height: 32px;
}

.reg-24 {
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
}

.reg-22 {
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 28px;
}

.reg-20 {
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 26px;
}

.reg-18 {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
}

.reg-16 {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px; 
}

.reg-14 {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
}

.reg-12 {
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
}

.alt-reg-20 {
    font-style: normal;
    font-weight: 400;
    font-family: 'BaskervilleDisplayPTWebDisplay';
    font-size: 20px;
    line-height: 28px;
}

@media (max-width: 480px) {
    .reg-48 {
        font-size: 44px;
        line-height: 52px;
    }

    .reg-44 {
        font-size: 36px;
        line-height: 44px;
    }

    .reg-36 {
        font-size: 32px;
        line-height: 40px;
    }

    .reg-32 {
        font-size: 28px;
        line-height: 36px;
    }

    .reg-28 {
        font-size: 26px;
        line-height: 32px;
    }

    .reg-26 {
        font-size: 24px;
        line-height: 32px;
    }

    .reg-24 {
        font-size: 22px;
        line-height: 28px;
    }

    .reg-22 {
        font-size: 20px;
        line-height: 28px;
    }

    .reg-20 {
        font-size: 18px;
        line-height: 26px;
    }

    .reg-18 {
        font-size: 16px;
        line-height: 22px; 
    }

    .reg-16 {
        font-size: 14px;
        line-height: 20px;
    }
}

.let-sp-1 {
    letter-spacing: 0.01em;
}

.li-he-44 {
    line-height: 44px;
}

.li-he-30 {
    line-height: 30px;
}

.li-he-28 {
    line-height: 28px;
}

.li-he-24 {
    line-height: 24px;
}

.bol {
    font-family: 'FuturaPTWebBold';
}

.med {
    font-family: 'FuturaPTWebMedium';
}

.demi {
    font-family: 'FuturaPTWebDemi';
}

.light {
    font-family: 'FuturaPTWebLight';
}
/* fonts */

.default {
    cursor: default;
}

.width-1024 {
    max-width: 1024px;
}

.width-798 {
    max-width: 798px;
}

.width-766 {
    max-width: 766px;
}

.width-747 {
    max-width: 747px;
}

.width-640 {
    max-width: 640px;
}

.width-524 {
    max-width: 524px;
}

.width-482 {
    max-width: 482px;
}

.width-464 {
    max-width: 464px;
}

.width-343 {
    max-width: 343px;
}

.width-196 {
    max-width: 196px;
}

.width-188 {
    max-width: 188px;
}

.width-164 {
    max-width: 164px;
}

.hard-width-236 {
    width: 236px;
}

.hard-width-164 {
    width: 164px;
}

.hard-width-80 {
    width: 80px;
}

.hard-width-36 {
    width: 36px;
}

/* color */
.white {
    color: var(--white);
}

.velvet {
    color: var(--velvet-500);
}

.gray-400 {
    color: var(--gray-400);
}

.clay-500 {
    color: var(--clay-500);
}

.paper-500 {
    color: var(--paper-500);
}

.paper-100 {
    color: var(--paper-100);
}

.paper-75 {
    color: var(--paper-75);
}

.black-300 {
    color: var(--black-300);
}

/* background-color */
.back-red-500 {
    background-color: var(--red-500);
}

.back-black-600 {
    background-color: var(--black-600);
}

.back-gray-175 {
    background-color: var(--gray-175);
}

.back-gray-150 {
    background-color: var(--gray-150);
}

.back-gr-150 {
    background-color: var(--gray-150);
}

.back-gr-gray {
    background: var(--gr-gray);
}

.back-gr-blue-yellow {
    background: var(--gr-blue-yellow);
}
/* background-color */

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.flex {
    display: flex;
}

.wrap {
    flex-wrap: wrap;
}

.column {
    flex-direction: column;
}

.center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.start {
    align-items: flex-start;
}

.end {
    align-items: flex-end;
}

.space-between {
    justify-content: space-between;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.text-dec-none {
    text-decoration: none;
}

.text-underline {
    text-decoration: underline;
}

.top-1 {
    top: 1px;
}

.top-2 {
    top: 2px;
}

.top-4 {
    top: 4px;
}
/* common-start end */

/* main start */
@keyframes panel-img-up {
    from {bottom: -240px;}
    to {transform: translateY(0px);}
}

@keyframes panel-img-down {
    from {bottom: 0%;}
    to {transform: translateY(240px);}
}

@keyframes panel-up {
    from {height: 64px;}
    to {height: 162px;}
}

@keyframes panel-down {
    from {height: 162px}
    to {height: 64px}
}

@keyframes margin-hide {
    from {height: 180px}
    to {height: 0px}
}

header.main-container {
    animation-name: appearance;
    animation-duration: 1200ms;
    animation-timing-function: ease-in-out;
}

.hello-slide {
    background-color: var(--velvet-500);
    min-height: 680px;
}

.logo {
    color: var(--gray-250);
}

.logo_velvet {
    color: var(--velvet);
}

.menu-container {
    margin-left: auto;
}

@media (max-width: 480px) {
    .menu-container {
        display: none;
    } 
}

.menu-item {
    padding: 8px;
    margin: 8px 16px 8px 16px;
}

.menu-item:hover {
    color: var(--paper-500);
}

.hello-content {
    padding-top: 96px;
    padding-bottom: 132px;
    align-items: center;
    overflow: hidden;
    flex-wrap: wrap;
}

.hello-text {
    animation-name: appearance;
    animation-duration: 600ms;
    animation-timing-function: ease-in-out;
}

.hello-photo-frame {
    overflow: hidden;
    margin-left: auto;
    width: 332px;
    height: 332px;
    border-radius: 448px;
    background: linear-gradient(225deg, #FFFFFF 6.77%, #E4E3DA 22.4%, #AEC0CA 51.04%, #D09966 88.02%, #BD8656 100%);
    animation-name: appearance;
    animation-duration: 800ms;
    animation-timing-function: ease-in-out;
}

.hello-photo {
    width: 332px;
    height: 332px;
}

@media (max-width: 924px) {
    .hello-content {
        align-content: flex-start;
        flex-direction: column-reverse;
    }

    .hello-photo-frame {
        width: 244px;
        height: 244px;
        margin-left: 0px;
        margin-right: auto;
    }

    .hello-photo {
        width: 244px;
        height: 244px;
    } 
}

@media (max-width: 570px) {
    .hello-photo-frame {
        margin-left: auto;
        margin-right: auto;
    }
    
    .hello-text {
        text-align: center;
    }

    .hello-content {
        padding-top: 64px;
        padding-bottom: 96px; 
    }
}

.case-item {
    display: flex;
    align-items: flex-start;
    margin-top: 32px;
    margin-bottom: 32px;
}

.case-date {
    width: 112px;
    margin-right: 96px;
}

.case-img-frame {
    width: 280px;
    height: 232px;
    margin-right: 96px;
    background-color: var(--gray-150);
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
}

.nib-black {
    background-color: #111313;
}

.case-image {
    width: 280px;
    height: 232px;
    transition: all 0.4s ease-out;
}

.case-image_nib {
    width: 280px;
    height: 280px;
    transition: all 0.4s ease-out;
}

.case-item:hover .case-image {
    transform: scale(1.02);
}

.case-item:hover .case-image_nib {
    transform: scale(1.02);
}

.case-item .reg-32 {
    transition: color 0.28s ease-out;
    margin-top: 48px;
}

.case-item:hover .reg-32 {
    color: var(--clay-500);
}

@media(max-width: 970px) {
    .case-date {
        visibility: hidden;
        width: 0px;
        height: 0px;
        margin-right: 0px;
    }

    .case-img-frame {
        margin-right: 48px;
    }
}

.compbox-line {
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    gap: 12px;
}

@media (max-width: 720px) {
    .case-item .reg-32 {
        margin-top: 24px;
        margin-bottom: 16px;
    }
}

@media (max-width: 640px) {
    .case-item {
        flex-direction: column;
    }

    .compbox-line {
        visibility: hidden;
        width: 0px;
        height: 0px;
    }
}

@media (max-width: 570px) {
    .case-item {
        align-items: center;
        text-align: center;
    }

    .cases h2 {
        text-align: center;
    }

    .case-img-frame {
        margin-right: 0px;
    }
}

.skills-description {
    display: flex;
    align-items: flex-start;
}

.skills-description h2 {
    margin-right: 200px;
}

.skills-description p {
    margin-right: 200px;
}

@media (max-width: 860px) {
    .skills-description h2 {
        margin-right: 64px;
    }

    .skills-description p {
        margin-right: 64px;
    }
}

@media (max-width: 570px) {
    .skills-description {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .skills-description h2 {
        align-self: stretch;
        text-align: center;
        margin-right: auto;
        margin-left: auto;
    }

    .skills-description p {
        margin-top: 12px;
        align-self: stretch;
        text-align: center;
        margin-right: auto;
        margin-left: auto;
    }

    .skills-description a {
        margin-top: 12px;
    }
}

.skill-line {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
}

@media (max-width: 570px) {
    .skill-line {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 16px;
    }
}

.card-image-frame {
    width: 212px;
    height: 180px;
    transition: all 0.2s ease-in;
}

.skill-card {
    margin-top: 64px;
    color: var(--black-300);
}

.skill-card h4 {
    margin-top: 24px;
}

.skill-card p {
    margin-top: 12px;
}

.skill-card:hover .card-image-frame {
    position: relative;
    transform: translateY(-4px);
}

@media (max-width: 570px) {
    .skill-card:hover .card-image-frame {
        position: relative;
        transform: translateY(0px);
    }
}

.skill-card:hover {
    color: var(--black-500);
}

@media (max-width: 570px) {
    .skill-card {
        margin-top: 24px;
    }

    .skill-card {
        color: var(--black-500);
    }

    .skill-card h4 {
        margin-top: 12px;
        font-size: 25px;
        line-height: 120%;
    }

    .skill-card p {
        font-size: 17px;
        line-height: 140%;
        margin-top: 8px;
    }
}

.article {
    margin-right: 72px;
    margin-top: 64px;
}

.article:hover .reg-22 {
    color: var(--clay-500);
}

.right-to-left {
    text-align: right;
}

@media (max-width: 1010px) {
    .right-to-left {
        text-align: left;
    }
}

.panel {
    cursor: pointer;
    position: relative;
    display: flex;
    background-color: var(--white);
    animation: panel-up 0.6s ease-in-out;
}

@media (max-width: 840px) {
    .panel {
        display: none;
    }
}

.margin-hide {
    width: 4px;
    height: 0px;
    animation: margin-hide 0.6s ease-in-out;
}

.panel-z-1 {
    z-index: 1;
}

.panel-z-2 {
    z-index: 2;
}

.panel-z-3 {
    z-index: 3;
}

.panel .reg-44 {
    width: 224px;
    margin-top: 28px;
    margin-right: 184px;
}

@media (max-width: 1190px) {
    .panel .reg-44 {
        margin-right: 88px;
    }
}

.panel .reg-24 {
    padding-top: 6px;
    margin-top: 32px;
    margin-bottom: 40px;
    line-height: 28px;
}

.panel img {
    width: 254px;
    height: 239px;
    position: absolute;
    right: 20px;
    animation: panel-img-up 0.6s ease-in-out;
    bottom: -2px;
}

@media (max-width: 1086px) {
    .panel img {
        display: none;
    }
}

.panel-default {
    height: 64px;
    animation: panel-down 0.6s ease-in-out;
}

.panel-default img {
    animation: panel-img-down 0.6s ease-in-out;
    bottom: -240px;
}

.panel-default p {
    color: var(--gray-250);
}

@media (max-width: 840px) {
    .none-840 {
        display: none;
    }
}

.contacts {
    position: relative;
    z-index: 10;
    background: var(--gr-blue-yellow);
    overflow: hidden;
}

.contacts-content {
    position: relative;
    z-index: 4;
}

.social-icon {
    width: 40px;
    height: 40px;
    border-radius: 24px;
}

.fb-icon {
    width: 40px;
    height: 40px;
    background-image: url(../img/main/fb-icon-black.svg);
}

.be-icon {
    width: 40px;
    height: 40px;
    background-image: url(../img/main/be-icon.svg);
}

.li-icon {
    width: 40px;
    height: 40px;
    background-image: url(../img/main/li-icon.svg);
}

.fb {
    background: var(--white);
    border: 1px solid var(--black-500);
}

.be {
    background: var(--black-500);
    border: 1px solid var(--black-500);
}

.linkedin {
    background: var(--blue);
    border: 1px solid var(--blue);
}

.social-icon:hover {
    background: var(--clay-500);
    border: 1px solid var(--clay-500);
}

.fb-icon:hover {
    background-image: url(../img/main/fb-icon-white.svg);
}

.footer-rectangles {
    width: 302px;
    height: 302px;
    margin-left: auto;
}

.rec {
    position: absolute;
    width: 6000px;
    height: 6000px;
}

@media (max-width: 480px) {
    .rec {
        display: none;
    } 
}

.yellow-border {
    animation: spin 124s linear 0s infinite;
    border: 1px solid #F8D57B;
    z-index: 1;
    bottom: -300px;
    right: -300px;
    rotate: 10deg;
}

@media (max-width: 480px) {
    .yellow-border {
        display: none;
    } 
}

.blue-border {
    animation: spin 112s linear 0s infinite;
    border: 1px solid #7BC3F8;
    z-index: 2;
    bottom: -600px;
    right: -100px;
    rotate: 30deg;
}

@media (max-width: 480px) {
    .blue-border {
        display: none;
    } 
}

.red-border {
    animation: spin 100s linear 0s infinite;
    border: 1px solid #F1B387; 
    z-index: 3;
    bottom: -400px;
    right: -200px;
    rotate: 50deg;
}

@media (max-width: 480px) {
    .red-border {
        display: none;
    } 
}

.content-404 {
    position: relative;
    z-index: 15;
    cursor: default;
    margin-top: 160px;
    margin-bottom: 200px;
}

.text-404 {
    margin-top: 12px;
    margin-bottom: 0px;
    font-family: 'Baskerville Display PT';
    font-style: normal;
    font-weight: 400;
    font-size: 280px;
    line-height: 240px;
    color: var(--paper-500);
}

@media (max-width: 600px) {
    .text-404 {
        font-size: 180px;
        line-height: 160px;
    }
}
/* main end */


/* common-end start */
.padding-top-80 {
    padding-top: 80px;
}

.padding-top-64 {
    padding-top: 64px;
}

.padding-top-24 {
    padding-top: 24px;
}

.padding-top-16 {
    padding-top: 16px;
}

.padding-0 {
    padding: 0px;
}

.padding-bottom-156 {
    padding-bottom: 156px;
}

.padding-bottom-80 {
    padding-bottom: 80px;
}

.margin-0 {
    margin: 0px;
}

.margin-top-156 {
    margin-top: 156px;
}

.margin-top-116 {
    margin-top: 116px;
}

.margin-top-100 {
    margin-top: 100px;
}

.margin-top-80 {
    margin-top: 80px;
}

.margin-top-64 {
    margin-top: 64px;
}

.margin-top-56 {
    margin-top: 56px;
}

.margin-top-48 {
    margin-top: 48px;
}

.margin-top-40 {
    margin-top: 40px;
}

.margin-top-36 {
    margin-top: 36px;
}

.margin-top-32 {
    margin-top: 32px;
}

.margin-top-28 {
    margin-top: 28px;
}

.margin-top-24 {
    margin-top: 24px;
}

.margin-top-20 {
    margin-top: 20px;
}

.margin-top-16 {
    margin-top: 16px;
}

.margin-top-12 {
    margin-top: 12px;
}

.margin-top-8 {
    margin-top: 8px;
}

.margin-top-4 {
    margin-top: 4px;
}

.margin-top-0 {
    margin-top: 0px;
}

.margin-right-200 {
    margin-right: 200px;
}

.margin-right-96 {
    margin-right: 96px;
}

.margin-right-24 {
    margin-right: 20px;
}

.margin-right-20 {
    margin-right: 20px;
}

.margin-right-16 {
    margin-right: 16px;
}

.margin-right-12 {
    margin-right: 12px;
}

.margin-right-8 {
    margin-right: 8px;
}

.margin-right-4 {
    margin-right: 4px;
}

.margin-bottom-156 {
    margin-bottom: 156px;
}

.margin-bottom-80 {
    margin-bottom: 80px;
}

.margin-bottom-64 {
    margin-bottom: 64px;
}

.margin-bottom-48 {
    margin-bottom: 48px;
}

.margin-bottom-36 {
    margin-bottom: 36px;
}

.margin-bottom-32 {
    margin-bottom: 32px;
}

.margin-bottom-28 {
    margin-bottom: 28px;
}

.margin-bottom-24 {
    margin-bottom: 24px;
}

.margin-bottom-20 {
    margin-bottom: 20px;
}

.margin-bottom-16 {
    margin-bottom: 16px;
}

.margin-bottom-12 {
    margin-bottom: 12px;
}

.margin-bottom-8 {
    margin-bottom: 8px;
}

.margin-bottom-0 {
    margin-bottom: 0px;
}
/* common-end end */