:root{
	--color-1: #000000;
	--color-2: #ffffff;
	--color-3: #FFCC00;
	--color-4: #F6F6F6;
    --color-5: #E1E5EA;
    --color-6: #209F6D;
    --color-7: #21BA72;
    --color-8: #333F48;
    --color-9: #DB9D00;
    --color-10: #AAB1BA;
    --color-11: #E7E9EB;
    --color-12: #1B1B1B;
    --color-13: #98C0FD;
    --color-14: #E38FF1;
    --color-15: #E5BF5C;
    --color-16: #E96755;
    --color-17: #878B90;
    --color-18: #8461E5;
    --color-19: #F0F2F5;
    --color-20: #8461E6;
    --color-21: #3CBE46;
    --color-22: #9B9B9B;
    --color-23: #EBFAF1;
    --color-24: #FEECEC;
    --color-25: #DC3030;

    --rgb-1: rgb(52 64 75 / 6%);
	--rgb-2: rgba(255,255,255,0);
    --rgb-3: rgb(170 177 186 / 25%);
    --rgb-4: rgba(230, 170, 255, 0.4);
    --rgb-5: rgba(248, 248, 248, 0.4);
    --rgb-6: rgba(118, 109, 252, 0.8);
    --rgb-7: rgba(247, 247, 247, 0.8);
    --rgb-8: rgba(0, 0, 0, 0.08);
    --rgb-9: rgba(0, 0, 0, 0.03);
    --rgb-10: rgba(0, 0, 0, 0.1);
}

@keyframes animate{
    0%{transform: translatey(0px)}
    50%{transform: translatey(-10px)}
    100%{transform: translatey(0px)}
}

*{
    margin: 0px;
    padding: 0px;
    outline: none;
    box-sizing: border-box;
}

html{
    -webkit-text-size-adjust: 100%;
}

body{
    margin: 0px;
    padding: 0px;
    font-size: 0px;
    font-family: '~', sans-serif;
    color: var(--color-1);
}

a{
    text-decoration: none;
    color: var(--color-1);
}

img, svg{
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
}

.content{
	overflow: hidden;
}

.wrapper{
    padding-left: 24px;
    padding-right: 24px;
    max-width: 696px;
    margin: 0px auto;
    box-sizing: content-box;
}

@media screen and (min-width: 744px){
	.wrapper{
		padding-left: 32px;
		padding-right: 32px;
		max-width: 1032px;
	}
}

/*header*/

.header{
    position: sticky;
    top: 0px;
	background-color: var(--color-2);
    z-index: 10;
}

.header-wrapper{
    display: flex;
    align-items: center;
	height: 70px;
}

.header-logo{
	margin-right: 40px;
    flex: none;
}

.header-logo a{
    transition: opacity 0.2s;
}

.header-logo a:hover{
    opacity: 0.8;
}

.header-logo img{
	height: 40px;
	width: auto;
}

.header-block{
    display: flex;
}

.header-menu{
	display: flex;
}

.header-menu a{
    font-size: 14px;
    color: var(--color-8);
    transition: color 200ms;
}

.header-menu a:hover{
    color: var(--color-18);
}

.header-menu a.active{
    color: var(--color-18);
}

.header-button a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 100%;
    font-size: 14px;
    border-radius: 30px;
    background-color: var(--color-3);
    transition: background 200ms;
}

.header-button a:hover{
    background-color: var(--color-9);
}

@media screen and (max-width: 1099px){
	.header-block{
        position: absolute;
        flex-direction: column;
        align-items: center;
        text-align: center;
        top: calc(100% + 8px);
        right: 24px;
        width: calc(100% - 48px);
        max-width: 312px;
        padding: 24px;
        border-radius: 16px;
        background: var(--color-2);
        border: 1px solid var(--color-5);
        box-shadow: 0px 2px 4px var(--rgb-1);
        transition: opacity 200ms;
	}
	
	.header:not(.header-menu__open) .header-block{
		opacity: 0;
		visibility: hidden;
	}

    .header-menu{
        flex-direction: column;
    }

	.header-menu a:not(:first-child){
		margin-top: 24px;
	}

	.header:not(.header-menu__open) .header-burger__close{
		display: none;
	}
	
	.header-menu__open .header-burger__open{
		display: none;
	}

    .header-button{
        width: 100%;
        margin-top: 24px;
    }
	
	.header-burger{
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		margin-left: auto;
		background-color: var(--color-3);
		transition: background 200ms;
        flex: none;
		cursor: pointer;
	}
	
	.header-burger svg{
		width: 16px;
		flex: none;
	}

	.header-menu__open .header-burger{
		background-color: var(--color-4);
	}

	.header-menu__open .header-burger svg{
		width: 12px;
	}
}

@media screen and (min-width: 1100px){
    .header-block{
        width: 100%;
        align-items: center;
    }

	.header-button{
		margin-left: auto;
	}
    
    .header-button a{
        padding: 0px 32px;
    }

	.header-menu a:not(:last-child){
		margin-right: 32px;
	}

	.header-burger{
		display: none;
	}
}

/*welcome*/

.welcome{
    padding: 32px 0px 40px;
    background: linear-gradient(98.12deg, var(--color-13) 3.21%, var(--color-14) 100%);
}

.welcome-image{
    padding: 0px 50px;
    margin-bottom: 24px;
}

.welcome-image__block{
    position: relative;
    max-width: 280px;
    width: 100%;
    margin: 0px auto;
}

.welcome-image__phone{
    opacity: 0;
    transform: translate(0, -100px);
    transition: transform 500ms, opacity 500ms;
}

.welcome-image__phone-1{
    position: absolute;
    width: 34%;
    top: 39%;
    left: 0%;
    opacity: 0;
    transform: translate(-100px, 0);
    transition: transform 500ms, opacity 500ms;
    transition-delay: 500ms;
    /*animation: animate 3s ease-in-out infinite 1s;*/
}

.welcome-image__phone-2{
    position: absolute;
    width: 31%;
    top: 53%;
    left: 13%;
    opacity: 0;
    transform: translate(-100px, 0);
    transition: transform 500ms, opacity 500ms;
    transition-delay: 1s;
    /*animation: animate 3s ease-in-out infinite 1.5s;*/
}

.welcome-image__phone-3{
    position: absolute;
    width: 34%;
    top: 46%;
    right: 10%;
    opacity: 0;
    transform: translate(-100px, 0);
    transition: transform 500ms, opacity 500ms;
    transition-delay: 1.5s;
    /*animation: animate 3s ease-in-out infinite 2s;*/
}

.welcome-image__phone-4{
    position: absolute;
    width: 32%;
    top: 59%;
    right: 0%;
    opacity: 0;
    transform: translate(-100px, 0);
    transition: transform 500ms, opacity 500ms;
    transition-delay: 2s;
    /*animation: animate 3s ease-in-out infinite 2.5s;*/
}

.welcome-image__block.animation-start img{
    transform: translate(0, 0);
    opacity: 1;
}

.welcome-header{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: -4px -10px;
}

.welcome-header img{
    height: 26px;
    width: auto;
    margin: 4px 10px;
}

.welcome-header span{
    display: inline-flex;
    padding: 9px 18px;
    height: 34px;
    font-size: 12px;
    border-radius: 30px;
    margin: 4px 10px;
    text-transform: uppercase;
    color: var(--color-2);
    background-color: var(--color-20);
    font-family: '=', sans-serif;
}

.welcome-title{
    font-size: 28px;
    line-height: 36px;
    margin-top: 24px;
    color: var(--color-2);
    font-family: '^', sans-serif;
}

.welcome-text{
    font-size: 16px;
    line-height: 20px;
    margin-top: 8px;
    color: var(--color-2);
}

.welcome-text__li{
    position: relative;
    padding-left: 20px;
}

.welcome-text__li:before{
    content: '';
    display: block;
    position: absolute;
    width: 3px;
    height: 3px;
    left: 5px;
    top: 9px;
    background-color: var(--color-2);
}

.welcome-text__li:not(:last-child){
    margin-bottom: 4px;
}

.welcome-marketplaces{
    display: flex;
    margin-top: 24px;
}

.welcome-marketplaces a{
    display: inline-block;
    transition: box-shadow 200ms;
}

.welcome-marketplaces a:hover{
    box-shadow: 0px 1.90671px 33.3673px var(--rgb-10), 0px 1.90671px 4.76676px var(--rgb-9);
}

.welcome-marketplaces a:not(:last-child){
    margin-right: 10px;
}

.welcome-marketplaces img{
    height: 37px;
    width: auto;
}

@media screen and (min-width: 744px){
    .welcome{
        padding: 46px 0px;
    }

    .welcome-wrapper{
        display: flex;
        align-items: center;
    }

    .welcome-image{
        width: 100%;
        padding: 0px 24px;
        order: 1;
    }

    .welcome-image__block{
        max-width: 415px;
    }

    .welcome-content{
        width: 328px;
        margin-right: 24px;
        flex: none;
    }

    .welcome-header{
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .welcome-header img{
        height: 38px;
    }

    .welcome-title{
        font-size: 36px;
        line-height: 46px;
        margin-top: 48px;
    }

    .welcome-text{
        font-size: 18px;
        line-height: 24px;
        margin-top: 16px;
    }

    .welcome-marketplaces {
        margin-top: 48px;
    }
}

@media screen and (min-width: 1100px){
    .welcome-content {
        width: 504px;
    }
}

/*about*/

.about{
    padding: 48px 0px;
}

.about-header{
    margin-bottom: 24px;
}

.about-title{
    font-size: 24px;
    line-height: 30px;
    font-family: '^', sans-serif;
}

.about-description{
    font-size: 18px;
    line-height: 22px;
    margin-top: 16px;
    color: var(--color-8);
}

.about-item{
    opacity: 0;
    transform: translate(-100px, 0);
    transition: transform 500ms, opacity 500ms;
}

.about-item:nth-child(2){
    transition-delay: 500ms;
}

.about-item:nth-child(3){
    transition-delay: 1s;
}

.about-list.animation-start .about-item{
    transform: translate(0, 0);
    opacity: 1;
}

.about-item__image img{
    border-radius: 16px;
}

.about-item__name{
    font-size: 14px;
    line-height: 20px;
    margin-top: 32px;
    color: var(--color-8);
}

.about-text{
    margin-top: 24px;
    padding: 10px;
    font-size: 24px;
    line-height: 30px;
    color: var(--color-2);
    background: linear-gradient(99.17deg, var(--color-13) 0.52%, var(--color-14) 100%);
    border-radius: 16px;
    text-align: center;
    font-family: '^', sans-serif;
}

@media screen and (max-width: 743px){
    .about-item{
        width: 100%;
        max-width: 380px;
        margin: 0px auto;
    }

    .about-item:not(:last-child){
        margin-bottom: 24px;
    }
}

@media screen and (min-width: 744px){
    .about{
        padding: 64px 0px;
    }

    .about-header{
        margin-bottom: 28px;
    }

    .about-title{
        line-height: 32px;
    }

    .about-description{
        line-height: 24px;
    }

    .about-list{
        display: flex;
        flex-wrap: wrap;
        margin: -12px -24px;
    }

    .about-item{
        margin: 12px 24px;
        width: calc(50% - 48px);
    }
    
    .about-text{
        line-height: 32px;
        margin-top: 28px;
    }
}

@media screen and (min-width: 1100px){
    .about-list{
        flex-wrap: nowrap;
        margin: 0px;
    }

    .about-item{
        margin: 0px;
        width: 100%;
    }

    .about-item:not(:last-child){
        margin-right: 48px;
    }
}

/*contest*/

.contest{
    padding: 48px 0px;
    background: radial-gradient(129.47% 88.27% at 59.6% -28%, var(--rgb-4) 0%, var(--rgb-5) 100%), radial-gradient(102% 69.55% at 62.93% 114.73%, var(--rgb-6) 0%, var(--rgb-7) 71.73%);
}

.contest-title{
    font-size: 28px;
    line-height: 36px;
    font-family: '^', sans-serif;
}

.contest-description{
    font-size: 18px;
    line-height: 22px;
    margin-top: 16px;
    color: var(--color-8);
}

.contest-button{
    margin-top: 32px;
}

.contest-button a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 40px;
    width: 100%;
    font-size: 14px;
    border-radius: 30px;
    background-color: var(--color-3);
    transition: background 200ms;
}

.contest-button a:hover{
    background-color: var(--color-9);
}

.contest-image{
    margin-top: 40px;
    padding: 0px 30px;
}

.contest-image img{
    max-width: 328px;
    width: 100%;
    margin: 0px auto;
    animation: animate 2s ease-in-out infinite;
}

@media screen and (min-width: 429px){
    .contest-button a{
        width: auto;
        padding: 0px 32px;
    }
}

@media screen and (min-width: 744px){
    .contest{
        padding: 80px 0px;
        background: radial-gradient(23.02% 60.27% at 57.71% 0%, var(--rgb-4) 0%, var(--rgb-5) 100%), radial-gradient(64.17% 171.85% at 96.42% 127.73%, var(--rgb-6) 0%, var(--rgb-7) 46.39%);
    }

    .contest-wrapper{
        display: flex;
        align-items: center;
    }

    .contest-content{
        padding-right: 24px;
        max-width: 528px;
    }

    .contest-title{
        font-size: 36px;
        line-height: 46px;
    }

    .contest-description{
        line-height: 24px;
    }

    .contest-button{
        margin-top: 48px;
    }

    .contest-image{
        padding: 0px;
        margin: 0px auto;
        flex: none;
    }
}

@media screen and (min-width: 1100px){
    .contest{
        padding: 64px 0px;
    }
    
    .contest-image img{
        max-width: 500px;
    }
}

/*benefit*/

.benefit{
    padding: 48px 0px;
    background: linear-gradient(99.17deg, var(--color-13) 0.52%, var(--color-14) 100%);
}

.benefit-title{
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 32px;
    font-family: '^', sans-serif;
}

.benefit-item{
    display: flex;
    opacity: 0;
    transform: translate(-100px, 0);
    transition: transform 500ms, opacity 500ms;
}

.benefit-item:nth-child(2){
    transition-delay: 500ms;
}

.benefit-item:nth-child(3){
    transition-delay: 1s;
}

.benefit-item:nth-child(4){
    transition-delay: 1.5s;
}

.benefit-item:nth-child(5){
    transition-delay: 2s;
}

.benefit-item:nth-child(6){
    transition-delay: 2.5s;
}

.benefit-list.animation-start .benefit-item{
    transform: translate(0, 0);
    opacity: 1;
}

.benefit-item__icon{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center; 
    background: var(--color-2);
    box-shadow: 0px 0.918003px 13.77px var(--rgb-8);
    width: 64px;
    height: 64px;
    border-radius: 14px;
    margin-right: 16px;
    flex: none;
}

.benefit-item__icon img:first-child{
    width: auto;
}

.benefit-item__icon img:last-child{
    position: absolute;
    width: 28px;
    inset: -8px calc(100% - 16px);
}

.benefit-item__title{
    font-size: 18px;
    line-height: 24px;
    font-family: '=', sans-serif;
}

.benefit-item__text{
    font-size: 16px;
    line-height: 22px;
    margin-top: 4px;
}
@media screen and (max-width: 743px){
    .benefit-item:not(:last-child){
        margin-bottom: 32px;
    }
}

@media screen and (min-width: 744px){
    .benefit{
        padding: 64px 0px;
    }

    .benefit-list{
        display: flex;
        flex-wrap: wrap;
        margin: -24px -12px;
    }

    .benefit-item{
        width: calc(50% - 24px);
        margin: 24px 12px;
    }
}

@media screen and (min-width: 1100px){
    .benefit-item{
        width: calc(33.33333% - 24px);
    }
}

/*demo*/

.demo{
    padding: 48px 0px;
    background-color: var(--color-4);
}

.demo-header{
    margin-bottom: 40px;
}

.demo-title{
    font-size: 28px;
    line-height: 36px;
    font-family: '^', sans-serif;
}

.demo-description{
    font-size: 18px;
    line-height: 22px;
    margin-top: 16px;
    color: var(--color-8);
}

.demo-item:not(:last-child){
    margin-bottom: 24px;
}

.demo-description b{
    font-family: '=', sans-serif;
}

.demo-block{
    background: var(--color-2);
    box-shadow: 0px 1.90671px 4.76676px var(--rgb-9);
    border-radius: 10px;
    padding: 15px;
    transition: box-shadow 200ms, opacity 200ms;
}

.demo.block .demo-item:not(.active) .demo-block{
    opacity: 0.4;
    pointer-events: none;
}

.demo-item.active .demo-block{
    box-shadow: 0px 1.90671px 4.76676px var(--rgb-9), 0px 1.90671px 33.3673px var(--rgb-10);
}

.demo-block:hover{
    box-shadow: 0px 1.90671px 4.76676px var(--rgb-9), 0px 1.90671px 33.3673px var(--rgb-10);
}

.demo-block__header{
    display: flex;
    align-items: center;
}

.demo-block__image{
    flex: none;
    margin-right: 11px;
}

.demo-block__image img{
    border-radius: 50%;
    width: 45px;
    height: 45px;
}

.demo-block__name{
    width: 100%;
    font-size: 15px;
    line-height: 20px;
    font-family: '^', sans-serif;
}

.demo-item:not(.active) .demo-block__summ{
    display: none;
}

.demo-block__summ{
    margin-left: auto;
    text-align: right;
    flex: none;
}

.demo-block__summ span:first-child{
    display: block;
    font-size: 16px;
    margin-bottom: 2px;
    font-family: '^', sans-serif;
}

.demo-block__green .demo-block__summ span:first-child{
    color: var(--color-21);
}

.demo-block__summ span:last-child{
    font-size: 12px;
    line-height: 14px;
    color: var(--color-22);
    font-family: '^', sans-serif;
}

.demo-block__red .demo-block__summ span:first-child{
    color: var(--color-25);
}

.demo-block__description{
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    color: var(--color-17);
    font-family: '*', sans-serif;
    margin: 16px auto 0px;
}

.demo.block .demo-block__description{
    display: none;
}

.demo-item:not(.active) .demo-block__total{
    display: none;
}

.demo-block__total{
    font-size: 14px;
    line-height: 18px;
    margin-top: 16px;
    text-align: center;
    color: var(--color-17);
    font-family: '*', sans-serif;
}

.demo-block__panel{
    display: flex;
    align-items: center;
    white-space: nowrap;
    margin-top: 8px;
}

.demo-item.active .demo-block__panel{
    display: none;
}

.demo-block__button{
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0px 42px;
    border-radius: 6px;
    font-size: 14px;
    margin-right: 12px;
    background: var(--color-19);
    transition: background 200ms;
    cursor: pointer;
}

.demo-block__button:hover{
    background-color: var(--color-5);
}

.demo-block__price{
    display: inline-flex;
    align-items: center;
    font-size: 15px;
    height: 27px;
    padding: 0px 10px;
    border-radius: 16px;
    margin-left: auto;
    color: var(--color-2);
    background: linear-gradient(97.71deg, var(--color-15) 30.23%, var(--color-16) 100%);
    font-family: '=', sans-serif;
}

.demo-item:not(.active) .demo-block__result{
    display: none;
}

.demo-block__result{
    display: flex;
    align-items: center;
    min-height: 36px;
    margin-top: 8px;
    border-radius: 10px;
    padding: 8px 11px;
    font-family: '=', sans-serif;
}

.demo-block__result span:first-child{
    font-size: 12px;
    padding-right: 10px;
    color: var(--color-8);
}

.demo-block__result span:last-child{
    font-size: 14px;
    border-radius: 10px;
    margin-left: auto;
    flex: none;
}

.demo-block__green .demo-block__result{
    background-color: var(--color-23);
}

.demo-block__green .demo-block__result span:last-child{
    color: var(--color-21);
}

.demo-block__red .demo-block__result{
    background-color: var(--color-24);
    color: var(--color-25);
}

.demo:not(.download) .demo-download{
    height: 0px;
    overflow: hidden;
}

.demo-download{
    opacity: 0;
    transform: translate(-100px, 0);
    transition: transform 500ms, opacity 500ms;
}

.demo.download .demo-download{
    transform: translate(0, 0);
    opacity: 1;
    margin-top: 40px;
}

.demo-download__title{
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 24px;
    color: var(--color-8);
}

.demo-download__marketplaces{
    display: flex;
    flex-wrap: wrap;
    margin: -8px;
}

.demo-download__marketplaces a{
    margin: 8px;
    transition: box-shadow 200ms;
}

.demo-download__marketplaces a:hover{
    box-shadow: 0px 1.90671px 33.3673px var(--rgb-10), 0px 1.90671px 4.76676px var(--rgb-9);
}

.demo-download__marketplaces img{
    height: 60px;
    width: auto;
}

@media screen and (max-width: 1099px){
    .demo.block .demo-item:not(.active){
        display: none;
    }
}

@media screen and (min-width: 744px){
    .demo{
        padding: 64px 0px;
    }

    .demo-title{
        font-size: 36px;
        line-height: 46px;
    }

    .demo-description{
        line-height: 24px;
    }

    .demo-block__panel{
        margin-top: 12px;
    }

    .demo-block__result{
        margin-top: 12px;
    }
}

@media screen and (min-width: 1100px){
    .demo-list{
        display: flex;
    }

    .demo-item{
        flex: 1;
    }

    .demo-item:not(:last-child){
        margin-bottom: 0px;
        margin-right: 24px;
    }

    .demo-block{
        border-radius: 16px;
    }

    .demo-block__name{
        font-size: 16px;
        line-height: 21px;
    }

    .demo-block__description{
        max-width: 296px;
    }
}

/*fund*/

.fund{
    padding: 48px 0px;
}

.fund-title{
    font-size: 24px;
    line-height: 32px;
    font-family: '^', sans-serif;
}

.fund-text{
    font-size: 18px;
    line-height: 22px;
    margin-top: 16px;
    color: var(--color-8);
}

.fund-text a{
    color: var(--color-1);
    text-decoration: underline;
    transition: color 200ms;
}


.fund-text a:hover{
    color: var(--color-18);
}

@media screen and (min-width: 744px){
    .fund{
        padding: 64px 0px;
    }

    .fund-wrapper{
        display: flex;
    }

    .fund-title{
        margin-right: 24px;
        width: 152px;
        flex: none;
    }

    .fund-text{
        margin-top: 0px;
        line-height: 24px;
    }
}

@media screen and (min-width: 1100px){
    .fund-title{
        width: 328px;
    }
}

/*footer*/

.footer{
	background-color: var(--color-4);
	padding: 28px 0px;
}

.footer-logo{
    margin-bottom: 48px;
}

.footer-logo a{
    display: inline-block;
    transition: opacity 200ms;
}

.footer-logo a:hover{
    opacity: 0.8;
}

.footer-logo img{
    height: 59px;
    width: auto;
}

.footer-politic:not(:last-child){
    margin-bottom: 8px;
}

.footer-politic a{
    font-size: 16px;
    line-height: 22px;
    color: var(--color-12);
    font-family: '*', sans-serif;
    transition: color 200ms;
}

.footer-politic a:hover{
    color: var(--color-18);
    text-decoration: underline;
}

.footer-marketplaces{
    display: flex;
    margin-top: 16px;
}

.footer-marketplaces a{
    display: inline-block;
    transition: box-shadow 200ms;
}

.footer-marketplaces a:hover{
    box-shadow: 0px 1.90671px 33.3673px var(--rgb-10), 0px 1.90671px 4.76676px var(--rgb-9);
}

.footer-marketplaces a:not(:last-child){
    margin-right: 8px;
}

.footer-marketplaces img{
    height: 28px;
    width: auto;
}

.footer-socials{
	margin-top: 24px;
}

.footer-socials__title{
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 16px;
    color: var(--color-10);
    font-family: '*', sans-serif;
}

.footer-socials__list a{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
    background-color: var(--color-2);
	border: 1px solid var(--color-11);
	border-radius: 50%;
	transition: box-shadow 200ms, background 200ms;
}

.footer-socials__list a:not(:last-child){
	margin-right: 12px;
}

.footer-socials__list a:hover{
    box-shadow: 0 7px 16px var(--rgb-3);
}

.footer-social__vk svg{
	width: 22px;
}

.footer-social__yt svg{
	width: 22px;
}

.footer-social__ok svg{
	width: 11px;
}

.footer-panel{
	position: relative;
	margin-top: 32px;
	padding-top: 24px;
}

.footer-panel:before{
	content: '';
	position: absolute;
	display: block;
	height: 2px;
	width: 100%;
	top: 0px;
	background: linear-gradient(90deg, var(--rgb-2) 0%, var(--color-11) 33%, var(--color-11) 66%, var(--rgb-2) 100%);
}

.footer-copy{
	font-size: 16px;
	line-height: 24px;
	color: var(--color-10);
    font-family: '*', sans-serif;
}

.footer-top{
	display: none;
}

@media screen and (min-width: 744px){
    .footer-logo img{
        height: 75px;
    }

    .footer-right{
        display: flex;
    }

    .footer-column{
        width: calc(50% - 12px);
    }

    .footer-socials{
        width: calc(50% - 12px);
        margin-top: 0px;
        margin-left: auto;
    }

	.footer-panel{
		margin-top: 64px;
	}
}

@media screen and (min-width: 1100px){
	.footer{
		padding-top: 64px;
        padding-bottom: 28px;
	}

    .footer-content{
        display: flex;
    }

    .footer-logo{
        margin-bottom: 0px;
        margin-right: 124px;
        flex: none;
    }

    .footer-right{
        width: 100%;
    }

    .footer-column{
        width: auto;
    }

    .footer-socials{
        width: auto;
    }

    .footer-panel__wrapper{
        display: flex;
        align-items: center;
    }

	.footer-top{
		display: inline-flex;
		align-items: center;
		font-size: 16px;
		margin-left: auto;
		color: var(--color-8);
		font-family: '*', sans-serif;
		transition: color 200ms;
		cursor: pointer;
	}

	.footer-top:hover{
		color: var(--color-18);
	}

	.footer-top span{
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		margin-left: 12px;
		border-radius: 50%;
		background-color: var(--color-2);
		border: 1px solid var(--color-5);
		transition: box-shadow 200ms;
		flex: none;
	}
	
	.footer-top:hover span{
		box-shadow: 0 7px 16px var(--rgb-3);
	}

	.footer-top svg{
		width: 14px;
	}
}

.contest-description a {
    color: var(--color-1);
    text-decoration: underline;
    transition: color 200ms;
}

.contest-description a:hover{
    color: var(--color-18);
}

/*winners*/
.winners{
    padding: 40px 0px;
}

.winners-wrapper{
	position: relative;
}

.winners-header{
	margin-bottom: 24px;
}

.winners-title{
	font-size: 28px;
	line-height: 36px;
    font-family: '^', sans-serif;
}

.winners-text{
    font-size: 16px;
    line-height: 20px;
    margin-top: 10px;
}

.winners-text a{
    color: var(--color-1);
    text-decoration: underline;
    transition: color 200ms;
}

.winners-text a:hover{
    color: var(--color-18);
}

.winners-tabs{
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 24px;
}

.winners-tabs label{
	display: block;
	cursor: pointer;
}

.winners-tabs input{
	display: none;
}

.winners-tabs-wrapper{
	display: flex;
	align-items: center;
	gap: 16px;
	background-color: #f6f6f6;
	border-radius: 16px;
	padding: 16px 26px 16px 16px;
	transition: background 200ms;
}

.winners-tabs input:checked + .winners-tabs-wrapper{
    background: linear-gradient(99.17deg, #DEEBFF 0.52%, #FCEAFF 100%), #E6FBE6;
}

.winners-tabs-icon{
	flex: none;
}

.winners-tabs-icon img{
	width: 42px;
}

.winners-tabs-title{
	width: 100%;
	font-size: 20px;
	line-height: 26px;
    font-family: '^', sans-serif;
	transition: color 200ms;
}

.winners-tabs-radio{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	background-color: #ffffff;
	border: 2px solid #CDBFF4;
	border-radius: 50%;
	flex: none;
}

.winners-tabs-radio:before{
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #8461E5;
	flex: none;
	transition: opacity 200ms;
}

.winners-tabs input:not(:checked) + .winners-tabs-wrapper .winners-tabs-radio:before{
	opacity: 0;
}

.winners-tab-title{
	font-size: 24px;
    line-height: 30px;
    margin-bottom: 16px;
    font-family: '^', sans-serif;
}

.winners-tab{
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.winners-tab-list{
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.winners-tab-item-header{
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
    line-height: 20px;
    font-family: '=', sans-serif;
}

.winners-tab-item-header span:first-child{
    color: #AAAFB7;
	min-width: 32px;
	flex: none;
}
.winners-tab-item-header span:last-child{
    color: #333F48;
	width: 100%;
}

.winners-tab-item-body{
	margin-top: 8px;
}

.winners-tab-item-body span{
    display: inline-block;
	font-size: 16px;
	line-height: 28px;
	background-color: #F6F6F6;
	color: #878B90;
	border-radius: 8px;
	padding: 0px 8px;
	margin-left: 40px;
	white-space: nowrap;
}

.winners-tab-group:first-child .winners-tab-item-body span{
	background-color: #F4EFFF;
	color: #866CF5;
}

@media screen and (min-width: 744px){
	.winners{
		padding: 64px 0px;
	}

	.winners-title{
		font-size: 36px;
		line-height: 46px;
	}

    .winners-text {
        font-size: 18px;
        line-height: 24px;
    }

	.winners-tabs{
		flex-direction: row;
		gap: 24px;
	}

	.winners-tabs-wrapper{
		position: relative;
		flex-direction: column;
		align-items: flex-start;
		padding: 24px;
		height: 100%;
	}

	.winners-tabs label {
		flex: 1;
	}

	.winners-tabs-icon img{
		width: 84px;
	}

	.winners-tabs-radio{
		position: absolute;
		top: 26px;
		right: 26px;
	}

	.winners-tab{
		border: 1px solid #E1E5EA;
		border-radius: 16px;
		padding: 34px 24px;
	}

	.winners-tab-item-header {
		line-height: 22px;
	}

	.winners-tab-list{
		display: block;
		columns: 2;
		gap: 24px;
	}

	.winners-tab-item{
		margin-bottom: 16px;
		page-break-inside: avoid;
		break-inside: avoid;
	}

	.winners-tab-item-header span:first-child {
		min-width: auto;
	}

	.winners-tab-item-body span{
		line-height: 30px;
		margin-left: 0px;
	}
}

@media screen and (min-width: 1100px){
	.winners{
		padding-top: 80px;
	}

	.winners-header {
		position: relative;
	}

	.winners-tabs-wrapper{
		flex-direction: row;
		align-items: center;
	}

	.winners-tab-list {
		columns: 3;
	}

	.winners-content{
		position: relative;
	}
}

.wn {
    color: var(--color-1);
    text-decoration: underline;
    transition: color 200ms;
}

.wn:hover{
    color: var(--color-18);
}