.skill-btn,.switcher,.switcher img {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

#skills-background {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: url(../img/skills_background.jpg) center;
	background-size: cover
}
.webp #skills-background {
	background: url(../img/skills_background.webp) center;
}
#skills-main {
	height: 100vh
}

#skills-main .row {
	height: 100%
}

#selector {
	position: relative;
	width: 360px;
	height: 360px;
	-webkit-transition: -webkit-transform .5s;
	transition: -webkit-transform .5s;
	-o-transition: transform .5s;
	transition: transform .5s;
	transition: transform .5s, -webkit-transform .5s
}

#selector .skill-btn:nth-child(1) {
	top: 0
}

#selector .skill-btn:nth-child(2) {
	right: 0
}

#selector .skill-btn:nth-child(3) {
	bottom: 0
}

#selector .skill-btn:nth-child(4) {
	left: 0
}

.skill-btn {
	position: absolute;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	background: #0c1e29;
	width: 80px;
	height: 80px;
	-webkit-box-shadow: 4px 6px 8px #000f1a;
	box-shadow: 4px 6px 8px #000f1a;
	font-size: 27px;
	color: #fff;
	cursor: pointer;
	-webkit-transition: background .2s,-webkit-transform .5s;
	transition: background .2s,-webkit-transform .5s;
	-o-transition: transform .5s,background .2s;
	transition: transform .5s,background .2s;
	transition: transform .5s,background .2s,-webkit-transform .5s;
	text-shadow: 1px 1px 0 #ff8c69
}

.skill-btn:hover {
	background: #0d334a
}

#skills-main[state="1"] #selector {
	-webkit-transform: rotateZ(90deg);
	-ms-transform: rotate(90deg);
	transform: rotateZ(90deg)
}

#skills-main[state="2"] #selector {
	-webkit-transform: none;
	-ms-transform: none;
	transform: none
}

#skills-main[state="3"] #selector {
	-webkit-transform: rotateZ(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotateZ(-90deg)
}

#skills-main[state="4"] #selector {
	-webkit-transform: rotateZ(180deg);
	-ms-transform: rotate(180deg);
	transform: rotateZ(180deg)
}

#skills-main[state="1"] #selector .skill-btn {
	-webkit-transform: rotateZ(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotateZ(-90deg)
}

#skills-main[state="2"] #selector .skill-btn {
	-webkit-transform: none;
	-ms-transform: none;
	transform: none
}

#skills-main[state="3"] #selector .skill-btn {
	-webkit-transform: rotateZ(90deg);
	-ms-transform: rotate(90deg);
	transform: rotateZ(90deg)
}

#skills-main[state="4"] #selector .skill-btn {
	-webkit-transform: rotateZ(-180deg);
	-ms-transform: rotate(-180deg);
	transform: rotateZ(-180deg)
}

#skills-main[state="1"] #selector .skill-btn:nth-child(1) {
	background: #6bc1ff
}

#skills-main[state="2"] #selector .skill-btn:nth-child(2) {
	background: #6bc1ff
}

#skills-main[state="3"] #selector .skill-btn:nth-child(3) {
	background: #6bc1ff
}

#skills-main[state="4"] #selector .skill-btn:nth-child(4) {
	background: #6bc1ff
}

.switcher {
	position: relative;
	height: 100px;
	width: 100px
}

.switcher img {
	position: absolute
}

.switcher img:nth-child(2) {
	left: 0
}

.switcher img:nth-child(3) {
	top: 12px;
	left: 12px;
	-webkit-filter: hue-rotate(168deg);
	filter: hue-rotate(168deg)
}

.switcher img:nth-child(4) {
	top: 24px;
	left: 24px
}

#skills-main:not([state="0"]) .switcher img:nth-child(2) {
	-webkit-animation: switcherFirst 6s infinite alternate;
	animation: switcherFirst 6s infinite alternate
}

#skills-main:not([state="0"]) .switcher img:nth-child(3) {
	-webkit-animation: switcherSecond 5s infinite alternate;
	animation: switcherSecond 5s infinite alternate
}

#skills-main:not([state="0"]) .switcher img:nth-child(4) {
	-webkit-animation: switcherThird 4s infinite alternate;
	animation: switcherThird 4s infinite alternate
}

.skill-description-block {
	background: rgba(11,33,40,.74);
	position: relative
}

.skill-description {
	height: 80%;
	color: #fff;
	text-align: center;
	font-weight: lighter;
	position: absolute;
	opacity: 0;
	-webkit-transition: opacity .5s;
	-o-transition: opacity .5s;
	transition: opacity .5s;
	z-index: 0
}

.skill-description-header {
	font-size: 40px;
	padding: 30px 0 0
}

.skill-description-paragraph {
	max-height: 80%;
	padding: 0 60px;
	margin-top: 30px;
	font-size: 20px;
	overflow-y: auto
}

#skills-main[state="0"] #descr-0,#skills-main[state="1"] #descr-1,#skills-main[state="2"] #descr-2,#skills-main[state="3"] #descr-3,#skills-main[state="4"] #descr-4 {
	z-index: 1;
	opacity: 1
}

.prev-next-block {
	position: absolute;
	width: 94%;
	bottom: 8%
}

#next-btn, #prev-btn {
	position: relative;
	height: 30px;
	width: 30px;
	padding: 0;
	background: #eee;
	border: none;
	-webkit-transition: padding .5s,margin .5s;
	-o-transition: padding .5s,margin .5s;
	transition: padding .5s,margin .5s
}

#next-btn:hover,#prev-btn:hover {
	background: #fff
}

#prev-btn:hover {
	padding-right: 86px
}

#next-btn:hover {
	padding-left: 86px
}

#next-btn img,#prev-btn img {
	position: absolute;
	height: 15px;
	width: 15px;
	top: 8px
}

#prev-btn img {
	-webkit-transform: rotateZ(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotateZ(-90deg);
	left: 8px
}

#next-btn img {
	-webkit-transform: rotateZ(90deg);
	-ms-transform: rotate(90deg);
	transform: rotateZ(90deg);
	right: 8px
}

#next-btn span,#prev-btn span {
	position: absolute;
	top: 2px;
	color: #081e26;
	font-weight: 600;
	opacity: 0;
	-webkit-transition: left .5s,right .5s,opacity .5s;
	-o-transition: left .5s,right .5s,opacity .5s;
	transition: left .5s,right .5s,opacity .5s;
}

#next-btn:hover span,#prev-btn:hover span {
	opacity: 1;
}

#prev-btn span {
	left: 35px
}

#next-btn span {
	right: 35px
}

#prev-btn:hover span {
	left: 23px
}

#next-btn:hover span {
	right: 23px
}

@media all and (min-width:3840px) {
	#selector {
		scale: 3
	}

	.skill-description-header {
		padding-top: 90px;
		font-size: 90px
	}

	.skill-description-paragraph {
		font-size: 55px;
		margin-top: 50px
	}

	#next-btn,#prev-btn {
		scale: 3
	}
}

@media all and (min-width:2560px) and (max-width:3839px) {
	#selector {
		scale: 2;
	}

	.skill-description-header {
		font-size: 70px
	}

	.skill-description-paragraph {
		font-size: 38px
	}

	#next-btn,#prev-btn {
		scale: 1.8;
	}
}

@media all and (min-width:1920px) and (max-width:2559px) {
	#selector {
		scale: 1.5;
	}

	.skill-description-header {
		font-size: 55px;
		padding-top: 55px
	}

	.skill-description-paragraph {
		font-size: 30px
	}

	#next-btn,#prev-btn {
		scale: 1.5
	}
}

@media all and (max-width:1200px) {
	#selector {
		width: 260px;
		height: 260px
	}

	.skill-btn {
		width: 60px;
		height: 60px;
		font-size: 22px
	}

	.switcher {
		scale: .6
	}

	.skill-description-paragraph {
		padding: 0 40px
	}
}

@media all and (max-width:992px) {
	.skill-description-header {
		padding: 50px 0 0;
		font-size: 25px
	}

	.skill-description-paragraph {
		padding: 0 20px;
		font-size: 16px
	}
}

@media all and (max-width:767px) {
	#skills-main[state="1"] #selector {
		-webkit-transform: rotateZ(180deg);
		-ms-transform: rotate(180deg);
		transform: rotateZ(180deg)
	}

	#skills-main[state="2"] #selector {
		-webkit-transform: rotateZ(90deg);
		-ms-transform: rotate(90deg);
		transform: rotateZ(90deg)
	}

	#skills-main[state="3"] #selector {
		-webkit-transform: none;
		-ms-transform: none;
		transform: none
	}

	#skills-main[state="4"] #selector {
		-webkit-transform: rotateZ(270deg);
		-ms-transform: rotate(270deg);
		transform: rotateZ(270deg)
	}

	#skills-main[state="1"] #selector .skill-btn {
		-webkit-transform: rotateZ(-180deg);
		-ms-transform: rotate(-180deg);
		transform: rotateZ(-180deg)
	}

	#skills-main[state="2"] #selector .skill-btn {
		-webkit-transform: rotateZ(-90deg);
		-ms-transform: rotate(-90deg);
		transform: rotateZ(-90deg)
	}

	#skills-main[state="3"] #selector .skill-btn {
		-webkit-transform: none;
		-ms-transform: none;
		transform: none
	}

	#skills-main[state="4"] #selector .skill-btn {
		-webkit-transform: rotateZ(90deg);
		-ms-transform: rotate(90deg);
		transform: rotateZ(90deg)
	}

	#selector {
		margin-top: 60px
	}

	.skill-description-block {
		height: 70vh;
		margin-top: 30px
	}

	.skill-description-header {
		padding: 20px 0 0
	}

	.skill-description-paragraph {
		margin-top: 15px
	}
}

@-webkit-keyframes switcherFirst {
	0% {
		-webkit-transform: rotateZ(0);
		transform: rotateZ(0)
	}

	25% {
		-webkit-transform: rotateZ(66deg);
		transform: rotateZ(66deg)
	}

	40% {
		-webkit-transform: rotateZ(60deg);
		transform: rotateZ(60deg)
	}

	50% {
		-webkit-transform: rotateZ(170deg);
		transform: rotateZ(170deg)
	}

	70% {
		-webkit-transform: rotateZ(178deg);
		transform: rotateZ(178deg)
	}

	80% {
		-webkit-transform: rotateZ(-10deg);
		transform: rotateZ(-10deg)
	}

	100% {
		-webkit-transform: rotateZ(-30deg);
		transform: rotateZ(-30deg)
	}
}

@keyframes switcherFirst {
	0% {
		-webkit-transform: rotateZ(0);
		transform: rotateZ(0)
	}

	25% {
		-webkit-transform: rotateZ(66deg);
		transform: rotateZ(66deg)
	}

	40% {
		-webkit-transform: rotateZ(60deg);
		transform: rotateZ(60deg)
	}

	50% {
		-webkit-transform: rotateZ(170deg);
		transform: rotateZ(170deg)
	}

	70% {
		-webkit-transform: rotateZ(178deg);
		transform: rotateZ(178deg)
	}

	80% {
		-webkit-transform: rotateZ(-10deg);
		transform: rotateZ(-10deg)
	}

	100% {
		-webkit-transform: rotateZ(-30deg);
		transform: rotateZ(-30deg)
	}
}

@-webkit-keyframes switcherSecond {
	0% {
		-webkit-transform: rotateZ(0);
		transform: rotateZ(0)
	}

	25% {
		-webkit-transform: rotateZ(-55deg);
		transform: rotateZ(-55deg)
	}

	40% {
		-webkit-transform: rotateZ(60deg);
		transform: rotateZ(60deg)
	}

	50% {
		-webkit-transform: rotateZ(65deg);
		transform: rotateZ(65deg)
	}

	70% {
		-webkit-transform: rotateZ(111deg);
		transform: rotateZ(111deg)
	}

	80% {
		-webkit-transform: rotateZ(80deg);
		transform: rotateZ(80deg)
	}

	100% {
		-webkit-transform: rotateZ(-30deg);
		transform: rotateZ(-30deg)
	}
}

@keyframes switcherSecond {
	0% {
		-webkit-transform: rotateZ(0);
		transform: rotateZ(0)
	}

	25% {
		-webkit-transform: rotateZ(-55deg);
		transform: rotateZ(-55deg)
	}

	40% {
		-webkit-transform: rotateZ(60deg);
		transform: rotateZ(60deg)
	}

	50% {
		-webkit-transform: rotateZ(65deg);
		transform: rotateZ(65deg)
	}

	70% {
		-webkit-transform: rotateZ(111deg);
		transform: rotateZ(111deg)
	}

	80% {
		-webkit-transform: rotateZ(80deg);
		transform: rotateZ(80deg)
	}

	100% {
		-webkit-transform: rotateZ(-30deg);
		transform: rotateZ(-30deg)
	}
}

@-webkit-keyframes switcherThird {
	0% {
		-webkit-transform: rotateZ(0);
		transform: rotateZ(0)
	}

	25% {
		-webkit-transform: rotateZ(2deg);
		transform: rotateZ(2deg)
	}

	40% {
		-webkit-transform: rotateZ(99deg);
		transform: rotateZ(99deg)
	}

	50% {
		-webkit-transform: rotateZ(11deg);
		transform: rotateZ(11deg)
	}

	70% {
		-webkit-transform: rotateZ(-92deg);
		transform: rotateZ(-92deg)
	}

	80% {
		-webkit-transform: rotateZ(-70deg);
		transform: rotateZ(-70deg)
	}

	100% {
		-webkit-transform: rotateZ(20deg);
		transform: rotateZ(20deg)
	}
}

@keyframes switcherThird {
	0% {
		-webkit-transform: rotateZ(0);
		transform: rotateZ(0)
	}

	25% {
		-webkit-transform: rotateZ(2deg);
		transform: rotateZ(2deg)
	}

	40% {
		-webkit-transform: rotateZ(99deg);
		transform: rotateZ(99deg)
	}

	50% {
		-webkit-transform: rotateZ(11deg);
		transform: rotateZ(11deg)
	}

	70% {
		-webkit-transform: rotateZ(-92deg);
		transform: rotateZ(-92deg)
	}

	80% {
		-webkit-transform: rotateZ(-70deg);
		transform: rotateZ(-70deg)
	}

	100% {
		-webkit-transform: rotateZ(20deg);
		transform: rotateZ(20deg)
	}
}