@import "library.less";

.menu-burger {
	position: fixed;
	z-index: 20;
	width: 60px;
	height: 60px;
	top: 30px;
	left: 30px;
	cursor: pointer;
	background-image: url(../images/index/menu-1.png);
	
	&.close {
		background-image: url(../images/index/menu-close.png);
	}
}

.main-logo {
	display: block;
	position: fixed;
	z-index: 10;
	width: 75px;
	height: 65px;
	top: 20px;
	right: 30px;
	cursor: pointer;
	background-image: url(../images/index/logo-1.png);
	.cover;
}

.menu-title {
	position: fixed;
	display: block;
	top: 28px;
	left: 120px;
	font-size: 30px;
	line-height: 34px;
	z-index: 9;
	color: #fff;
	font-family: flounder;
	text-decoration: none;
	.transition;
	
	&.hidden {
		opacity: 0;
		pointer-events: none;
	}
	&.orange {
		color: @orange;
	}
}

#burger {
	@width: 370px;
	
	position: fixed;
	background: fadeout(@orange, 9%);
	height: 100%;
	min-height: 550px;
	width: @width;
	z-index: 10;
	.transition;
	.translate(-@width, 0px);
	
	.title {
		display: block;
		padding-left: 120px;
		padding-top: 28px;
		padding-bottom: 25px;
		color: #fff;
		font-family: flounder;
		font-size: 30px;
		line-height: 34px;
		
		&:hover {
			background: transparent;
		}
	}
	
	>a {
		display: block;
		cursor: pointer;
		font-family: trivia-grotesk;
		padding: 0 30px;
		color: #fff;
		text-decoration: none;
		.box-sizing;
		
		&:hover {
			background: rgba(255,255,255,0.22);
		}
	}
	
	.item {
		height: 44px;
		line-height: 44px;
		border-bottom: 1px solid rgba(255,255,255,0.22);
		font-size: 17px;
		
		&.disabled {
			opacity: 0.5;
			pointer-events: none;
		}
		
		&:first-child {
			border-top: 1px solid rgba(255,255,255,0.22);
		}
	}
	.sub-item {
		height: 37px;
		line-height: 37px;
		padding: 0 30px 0 60px;
		
		&.disabled {
			opacity: 0.5;
			pointer-events: none;
		}
	}
	.label {
		font-family: garamond-premier-pro-caption;
		font-style: italic;
		font-size: 15px;
		line-height: 50px;
		padding: 0 30px;
		color: #fff;
	}
	
	.wos {
		position: absolute;
		bottom: 10px;
		left: 20px;
		width: 70px;
		height: 30px;
		background: url("../images/logo.svg") no-repeat center center;
		background-size: 50px 35px;
		
		&:hover {
			background: url("../images/logo.svg") no-repeat center center;
			background-size: 50px 35px;
		}
	}
	
	.social-groups {
		padding: 30px;
		
		p {
			font-size: 12px;
			color: #fff;
			font-family: trivia-grotesk;
			
			a {
				display: block;
				float: left;
				width: 40px;
				height: 40px;
				background-image: url(../images/index/social-groups.png);
				margin: 15px 15px 0px 0px;
				
				&.fb {
					background-position: 0px 0px;
				}
				&.vk {
					background-position: -56px 0px;
				}
			}
		}
	}
	
	&.shown {
		.translate(0px, 0px);
	}
}

#social-shares {
    position: fixed; 
    top: 30px; 
    right: 110px; 
    z-index: 999;
    
    .b-share {
        .b-share-btn__wrap {
            height: 40px;
            width: 41px;
            float: left;
            margin-right: 16px;
            display: block;
            margin-left: 0 !important;
            
            .b-share__link {
                background-color: transparent !important;
                float: none;
                .b-share-counter {
                    display: none !important;
                }
                .b-share-icon {
                    height: 40px;
                    width: 41px;
                    background-image: url(../images/index/social-shares.png);
                    
                    &.b-share-icon_vkontakte {
                        background-position: -55px 0;
                        
                    }
                    &.b-share-icon_facebook {
                        background-position: 0 0;
                        
                    }
                    &.b-share-icon_twitter {
                        background-position: -111px 0;
                        
                    }
                }
                &:hover {
                    .b-share-icon_vkontakte {
                        background-position: -55px -40px;
                    }
                    .b-share-icon_facebook {
                        background-position: 0 -40px;
                    }
                    .b-share-icon_twitter {
                        background-position: -111px -40px;
                    }
                }
                &:active {
                    height: auto !important;
                    border-top: 0 !important;
                }
            }
        }
    }
}
.b-share_theme_counter .b-share__link:active .b-share-icon, 
.b-share_theme_counter .b-share__link:active .b-share-counter {
    top:0 !important;
}

#footer {
	position: relative;
	width: 100%;
	height: 40px;
	text-align: center;
	line-height: 40px;
	z-index: 100;
	background: @orange;
	padding: 0 30px;
	.box-sizing;
	
	a {
		color: #fff;
		font-family: trivia-grotesk;
		font-size: 13px;
	}
}