/* Development */
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

::before, ::after {
	box-sizing: border-box;
}

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

body {
	font-family: 'Clear Sans', sans-serif;
	color: #331113;
	font-weight: 400;
	font-size: 18px;
	line-height: 25px;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
	overflow: hidden;
}

body.fixed {
	overflow: hidden;
}

.screen {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 20;
}

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


img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	image-rendering: optimizeQuality;
    image-rendering: -webkit-optimize-contrast;
}

p {
	margin-bottom: 20px;
}

p:last-child {
	margin-bottom: 0;
}

h2 {
	font-family: 'Clear Sans', serif;
	font-weight: 500;
	font-size: 50px;
	line-height: 60px;
	color: #f14814;
	text-align: center;
}

h3 {
	font-family: 'Clear Sans', serif;
	font-weight: 500;
	font-size: 30px;
	line-height: 35px;
	margin-bottom: 30px;
}

.wrap {
	padding: 0 90px;
	margin: 0 auto;
}

.page {
	min-height: 100vh;
	height: 100vh;
}

header {
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	z-index: 1;
	padding: 20px 0;
	box-shadow: 2px 2px 10px 1px rgb(0 0 0 / 20%);
	background: #ffffff;
}

header .wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.logo {
	display: block;
	margin-right: 20px;
	width: 210px;
	height: 60px;
	background: url(../images/logo.png) center / contain no-repeat;
}

header nav {
	display: flex;
	align-items: center;
}

.phone {
	display: block;
	font-weight: 600;
	transition: all 0.3s ease;
	margin-right: 30px;
	color: #f6b007;
	font-size: 25px;
	line-height: 30px;
}

.menu_btn {
	cursor: pointer;
	width: 50px;
	height: 30px;
	position: relative;
}

.menu_btn::before, .menu_btn::after {
	position: absolute;
	content: "";
	width: 80%;
	height: 4px;
	right: 0;
	background: #f14814;
	transition: all 0.3s ease;
	transition-delay: 0.1s;
}

.menu_btn::before {
	top: 0;
}

.menu_btn::after {
	bottom: 0;
}

.menu_btn span {
	display: block;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 50%;
	height: 4px;
	background: #f14814;
	transition: width 0.3s ease;
}

.content {
	padding: 100px 0 70px 0;
	width: 100%;
	height: 100%;
	background: url(../images/bg_content_1.png) center bottom -30px / cover no-repeat;
	position: relative;
}

.content .wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.text_section {
	position: absolute;
	left: 0;
	top: 140px;
}

.radio {
	width: 200px;
	height: 100%;
	position: relative;
}

.radio .play {
	position: absolute;
	left: -70px;
	top: 50%;
	transform: translateY(-50%);
    border-top: 100px solid transparent;
    border-left: 200px solid #f14814;
    border-bottom: 100px solid transparent;
	cursor: pointer;
	width: 200px;
	height: 200px;
	display: none;
	transition: all 0.8s ease;
	border-radius: 2px;
	filter: drop-shadow(2px 4px 6px #444444);
	z-index: 1;
}

.radio .play.ready {
	left: 0;
}

.radio .play.active {
	top: 120px;
	transform: none;
}

.radio .play.active.stop {
	border: 0;
	width: 100px;
	height: 100px;
	left: calc(100% - 150px);
	background: #f6b007;
	top: 120px;
	transform: none;
}

.radio .play.bottom {
	transition: all 0s, border-left 0.3s ease;
	border-top: 50px solid transparent;
    border-left: 100px solid #f6b007;
    border-bottom: 50px solid transparent;
	top: 120px;
	transform: none;
	background: none;
	width: 100px;
	height: 100px;
	left: calc(100% - 150px);
	transform: none;
}

footer {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 20px 0;
	background: #f14814;
	font-size: 14px;
	line-height: 20px;
}

footer .wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #ffffff;
}

footer .wrap span {
	display: block;
	margin-right: 30px;
}

.menu_wrap {
	position: fixed;
	z-index: 1;
	right: -40vw;
	top: 0;
	width: 40vw;
	height: 100%;
	background: #cd3b0f;
	transition: right 0.5s ease;
	color: #ffffff;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 100px 50px 30px 50px;
}

.menu_wrap.active {
	right: 0;
}

.menu_wrap .close {
	position: absolute;
	width: 50px;
	height: 50px;
	top: 30px;
	right: 30px;
	cursor: pointer;
}

.menu_wrap .close::before, .menu_wrap .close::after {
	position: absolute;
	content: "";
	width: 100%;
	height: 2px;
	background: #ffffff;
	left: 50%;
	top: 50%;
	transition: all 0.3s ease;
}

.menu_wrap .close::before {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.menu_wrap .close::after {
	transform: translate(-50%, -50%) rotate(45deg);
}

.menu {
	font-size: 25px;
	line-height: 30px;
}

.item_menu {
	margin-bottom: 15px;
	cursor: pointer;
	transition: all 0.3s ease;
}

.menu a {
	margin-bottom: 15px;
	display: block;
}

.footer_menu {
	font-size: 13px;
	line-height: 18px;
}
.copyright {
	margin-bottom: 10px;
}

.menu_wrap a {
	transition: all 0.3s ease;
}

.menu_page {
	position: absolute;
	top: 0;
	right: -100%;
	width: 100%;
	height: 100%;
	z-index: 2;
	padding: 100px 0 30px 50px;
	background: #cd3b0f;
	transition: all 0.3s ease;
}

.menu_page.active {
	right: 0;
}

.item_page:not(:last-child) {
	margin-bottom: 25px;
}

.small_title {
	font-weight: bold;
	margin-bottom: 5px;
	font-size: 20px;
}

.back {
	position: absolute;
    width: 50px;
    height: 50px;
    top: 30px;
    right: 30px;
    cursor: pointer;
}

.back::before {
	position: absolute;
	content: "";
	width: 50%;
	height: 50%;
	border-top: 2px #ffffff solid;
	border-right: 2px #ffffff solid;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
	transition: all 0.3s ease;
}

.scroll_wrap {
	max-height: 100%;
	overflow: hidden;
	overflow-y: auto;
	padding-right: 100px;
}

.radio .volume {
	position: fixed;
	left: 90px;
	top: 220px;
	width: 40px;
	height: 40px;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

.radio .mute {
	cursor: pointer;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	background: #f14814;
	padding: 4px;
	position: relative;
	z-index: 6;
}

.radio .mute.active svg path:not(:first-child) {
	display: none;
}

.radio .mute svg {
	width: 100%;
	height: 100%;
}

.radio .mute svg path {
	fill: #ffffff;
}

footer .l_nav {
	display: flex;
	align-items: center;
	margin-right: 30px;
}

footer .l_nav a {
	display: block;
	width: 30px;
	height: 30px;
	margin-right: 15px;
	transition: all 0.3s ease;
}

footer .l_nav a:last-child {
	margin-right: 0;
}

footer .l_nav a svg {
	width: 100%;
	height: 100%;
}

footer .l_nav a svg path {
	transition: all 0.3s ease;
}

footer .inf_icon {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 2px solid #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 600;
}

.bubbles {
	position: absolute;
	display: none;
	transform: rotate(180deg);
}

.bubbles_1 {
	left: 300px;
	bottom: 100px;
	width: 40px;
	height: 45vh;
}

.bubbles svg {
	width: 100%;
	height: 100%;
}

.bubbles_1 {
	left: 300px;
	bottom: 150px;
	width: 40px;
	height: 40vh;
}

.bubbles_2 {
	right: 400px;
	bottom: 200px;
	width: 40px;
	height: 30vh;
	opacity: 0.7;
}

.bubbles_3 {
	right: 200px;
	bottom: 250px;
	width: 40px;
	height: 40vh;
}

@keyframes equalizer_1 {
    0% {
		cy: -162.80002px;
    }
	25% {
		cy: -600.80002px;
	}
	50% {
		cy: -162.80002px;
	}
	75% {
		cy: -400.80002px;
	}
    100% {
        cy: -162.80002px;
    }
}

@keyframes equalizer_2 {
    0% {
		cy: -3489.4146px;
    }
	25% {
		cy: -3700px;
	}
	50% {
		cy: -3489.4146px;
	}
	75% {
		cy: -3600.4146px;
	}
    100% {
        cy: -3489.4146px;
    }
}

@keyframes equalizer_3 {
    0% {
		cy: -1801.9952px;
    }
	25% {
		cy: -3000px;
	}
	50% {
		cy: -1801.9952px;
	}
	75% {
		cy: -2000px;
	}
    100% {
        cy: -1801.9952px;
    }
}

@keyframes equalizer_4 {
    0% {
		cy: -1168.6887px;
    }
	25% {
		cy: -1800px;
	}
	50% {
		cy: -1168.6887px;
	}
	75% {
		cy: -1300px;
	}
    100% {
        cy: -1168.6887px;
    }
}

@keyframes equalizer_5 {
    0% {
		r: 68.395508px;
    }
	25% {
		r: 200px;
	}
	50% {
		r: 68.395508px;
	}
	75% {
		r: 100px;
	}
    100% {
        r: 68.395508px;
    }
}

@keyframes equalizer_6 {
    0% {
		cy: -1628.0181px;
    }
	25% {
		cy: -2500px;
	}
	50% {
		cy: -1628.0181px;
	}
	75% {
		cy: -1900px;
	}
    100% {
        cy: -1628.0181px;
    }
}

@keyframes equalizer_7 {
    0% {
		cy: -2699.0178px;
    }
	25% {
		cy: -3500px;
	}
	50% {
		cy: -2699.0178px;
	}
	75% {
		cy: -2900px;
	}
    100% {
        cy: -2699.0178px;
    }
}

@keyframes equalizer_8 {
    0% {
		cy: -889.58453px;
    }
	25% {
		cy: -1200px;
	}
	50% {
		cy: -889.58453px;
	}
	75% {
		cy: -1000px;
	}
    100% {
        cy: -889.58453px;
    }
}

@keyframes equalizer_9 {
    0% {
		r: 136.79128px;
    }
	25% {
		r: 50px;
	}
	50% {
		r: 136.79128px;
	}
	75% {
		r: 80px;
	}
    100% {
        r: 136.79128px;
    }
}

#path1 {
	animation: equalizer_1 1.5s ease-in-out infinite;
}

#path2 {
	animation: equalizer_2 1.5s ease-in-out infinite;
}

#path3 {
	animation: equalizer_3 1.5s ease-in-out infinite;
}

#path4 {
	animation: equalizer_4 1.5s ease-in-out infinite;
}

#path5 {
	animation: equalizer_5 1.5s ease-in-out infinite;
}

#path6 {
	animation: equalizer_6 1.5s ease-in-out infinite;
}

#path7 {
	animation: equalizer_7 1.5s ease-in-out infinite;
}

#path8 {
	animation: equalizer_8 1.5s ease-in-out infinite;
}

#path9 {
	animation: equalizer_9 1.5s ease-in-out infinite;
}

#path10 {
	animation: equalizer_1 1.5s ease-in-out infinite;
	animation-delay: 1s;
}

#path11 {
	animation: equalizer_2 1.5s ease-in-out infinite;
	animation-delay: 1s;
}

#path12 {
	animation: equalizer_3 1.5s ease-in-out infinite;
	animation-delay: 1s;
}

#path13 {
	animation: equalizer_4 1.5s ease-in-out infinite;
	animation-delay: 1s;
}

#path14 {
	animation: equalizer_5 1.5s ease-in-out infinite;
	animation-delay: 1s;
}

#path15 {
	animation: equalizer_6 1.5s ease-in-out infinite;
	animation-delay: 1s;
}

#path16 {
	animation: equalizer_7 1.5s ease-in-out infinite;
	animation-delay: 1s;
}

#path17 {
	animation: equalizer_8 1.5s ease-in-out infinite;
	animation-delay: 1s;
}

#path18 {
	animation: equalizer_9 1.5s ease-in-out infinite;
	animation-delay: 1s;
}

#path19 {
	animation: equalizer_1 1.5s ease-in-out infinite;
	animation-delay: 2s;
}

#path20 {
	animation: equalizer_2 1.5s ease-in-out infinite;
	animation-delay: 2s;
}

#path21 {
	animation: equalizer_3 1.5s ease-in-out infinite;
	animation-delay: 2s;
}

#path22 {
	animation: equalizer_4 1.5s ease-in-out infinite;
	animation-delay: 2s;
}

#path23 {
	animation: equalizer_5 1.5s ease-in-out infinite;
	animation-delay: 2s;
}

#path24 {
	animation: equalizer_6 1.5s ease-in-out infinite;
	animation-delay: 2s;
}

#path25 {
	animation: equalizer_7 1.5s ease-in-out infinite;
	animation-delay: 2s;
}

#path26 {
	animation: equalizer_8 1.5s ease-in-out infinite;
	animation-delay: 2s;
}

#path27 {
	animation: equalizer_9 1.5s ease-in-out infinite;
	animation-delay: 2s;
}

@media (min-width: 992px) {
    .phone:hover {
        color: #f6b007;
    }
    .menu_btn:hover {
        & span {
            width: 100%;
        }
        &::before {
            width: 100%;
        }
        &::after {
            width: 100%;
        }
    }
    .item_menu:hover {
        color: #bcbcbc;
    }
    .menu_wrap a:hover {
        color: #bcbcbc;
    }
    .content .text_section nav a:hover svg path {
        fill: #f14814;
    }
    .menu_wrap .close:hover::before, .menu_wrap .close:hover::after {
        width: 80%;
    }
    .radio .play:hover {
        border-left: 200px solid #f6b007;
    }
    .radio .play.active.stop:hover {
        background: #f6b007;
    }
    .radio .play.bottom:hover {
        border-left: 100px solid #f6b007;
    }
    .back:hover::before {
        width: 40%;
        height: 40%;
    }
    .scroll_wrap::-webkit-scrollbar-thumb {
        background: #f6b007;
    }
    .scroll_wrap::-webkit-scrollbar {
        width: 4px;
        background: #393939;
    }
    footer .l_nav a:hover {
        transform: scale(1.2);
    }
    @-moz-document url-prefix() {
        .scroll_wrap {
            scrollbar-color: #f6b007 #393939;
        }
    }
}

@media (max-width: 992px) {
    body {
        font-size: 16px;
        line-height: 20px;
    }
    h2 {
        font-size: 40px;
        line-height: 40px;
    }
    h3 {
        font-size: 25px;
        line-height: 30px;
        margin-bottom: 20px;
    }
    .wrap {
        padding: 0 15px;
    }
    header {
        padding: 10px 0;
        z-index: 2;
    }
    .phone {
        font-size: 0;
        line-height: 0;
        margin-right: 15px;
        width: 35px;
        height: 35px;
        background: url(../images/phone.svg) center / contain no-repeat;
        display: block;
    }
    .logo {
        width: 145px;
        height: 40px;
        margin-right: 15px;
    }
    .menu_btn::before {
        top: 2px;
        width: 100%;
    }
    .menu_btn::after {
        bottom: 2px;
        width: 100%;
    }
    .menu_btn span {
        width: 75%;
    }
    footer {
        padding: 10px 0;
    }
    .text_section {
        top: 100px;
    }
    .content {
        background: url(../images/bg_content_1.png) left 0 bottom -20px / cover no-repeat;
    }
    footer .wrap span {
        display: none;
    }
    footer .l_nav {
        margin-right: 20px;
    }
    footer .l_nav a {
        margin-right: 15px;
        width: 35px;
        height: 35px;
    }
    .radio .play {
        border-top: 50px solid transparent;
        border-left: 100px solid #f6b007;
        border-bottom: 50px solid transparent;
        width: 100px;
        height: 100px;
    }
    .radio .play.ready {
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .radio .volume {
        left: unset;
        top: unset;
        right: 15px;
        bottom: 80px;
    }
    .radio .play.active {
        top: 150px;
    }
    .radio .play.active.stop {
        top: 100px;
    }
    .bubbles_1 {
        left: 25px;
    }
    .bubbles_2 {
        right: unset;
        left: 50%;
        transform: translateX(-50%) rotate(180deg);
    }
    .bubbles_3 {
        right: 25px;
    }
    .menu_wrap {
        width: 95vw;
        right: -95vw;
        padding: 50px 15px 20px 30px;
    }
    .menu_wrap .close {
        width: 30px;
        height: 30px;
        top: 15px;
        right: 15px;
    }
    .back {
        width: 30px;
        height: 30px;
        top: 15px;
        right: 15px;
    }
    .menu {
        font-size: 20px;
        line-height: 25px;
    }
    .item_menu {
        margin-bottom: 10px;
    }
    .copyright {
        margin-bottom: 5px;
    }
    .menu_page {
        padding: 50px 0 20px 30px;
    }
    .scroll_wrap {
        padding-right: 30px;
    }
    .small_title {
        font-size: 18px;
    }
    footer .inf_icon {
        width: 35px;
        height: 35px;
    }
}

@media (max-width: 415px) {
    .content {
        background: url(../images/bg_content_1.png) left -100px bottom -5px / cover no-repeat;
    }
}