/* RESET */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

body, html {
	padding:  0px;
	margin:  0px;
	width: 100%;
	height:  100%;
	background-color: #f5f5f5;

}

.social-share {
	margin-top:  50px;
	margin-left: 20px;
}

.clear {
	clear: both;
}

@page_width: 1200px;
@large_width: 510px;
@large_height: 275px;
@small_width: 510px;
@small_height: 275px;

#page {
	width: @page_width;
	margin: 0 auto;
	
	.introduction {
		height: 500px;
		position: relative;
	}

	.container {
		width: @page_width - ( @large_width - @small_width );
		margin: 0 auto;
		padding-bottom: 50px;
		
		.small {
			position: relative;
			float: left;
			width: @small_width;
			height: @small_height;
			z-inedx: 5;
			
			transition: filter 1.0s ease;
			-webkit-transition: -webkit-filter 1.0s ease;
			-moz-transition: -moz-filter 1.0s ease;
			-ms-transition: -ms-filter 1.0s ease;
			-o-transition: -o-filter 1.0s ease;
			
			.large {
				position: absolute;
				width: @large_width;
				height: @large_height;
				top: ( @small_height - @large_height ) * 0.5;
				left: ( @small_width - @large_width ) * 0.5;
				display: none;
				z-index: 10;
				
				img {
					display: block;
					width: @large_width;
					height: @large_height;
				}
			}
			
			.share-it {
				position: absolute;
				top: ( @small_height + @large_height ) * 0.5;
				left: ( @small_width - @large_width ) * 0.5;
				width: @large_width;
				height: 50px;
				background: rgba( 255, 200, 0, 1 );
				display: none;
				
				.button {
					float: left;
					margin-top: 7px;
					cursor: pointer;
					
					&:first-child {
						margin-left: 33px;
					}
					
					&:hover {
						&#vk {
							background: url('../images/vk_hover.png')!important;
						}
						
						&#fb {
							background: url('../images/fb_hover.png')!important;
						}
						
						&#tw {
							background: url('../images/twitter_hover.png')!important;
						}
					}
				}
			}
		}
	}
}