@font-face {
	font-family: Ghost;
	src: url('Ghost-Bold.ttf');
}

@font-face {
	font-family: PTSansPro-Caption;
	src: url('caption.ttf');
}

@font-face {
	font-family: PTSans-Regular;
	src: url('regular.ttf');
}

/* 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%;
}

.social-share {
	display: none;
}

.radius(@radius:1000px) {
  -webkit-border-radius: @radius; /* Android ≤ 1.6, iOS 1-3.2, Safari 3-4 */
          border-radius: @radius; /* Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+ */

  /* useful if you don't want a bg color from leaking outside the border: */
  background-clip: padding-box; /* Android 2.2+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 4+ */
}

.transition(@what:all, @duration:500ms, @type:ease) {
  -webkit-transition: @what @duration @type;  /* Chrome 1-25, Safari 3.2+ */
     -moz-transition: @what @duration @type;  /* Firefox 4-15 */
       -o-transition: @what @duration @type;  /* Opera 10.50–12.00 */
          transition: @what @duration @type;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}

.box-sizing(){
  -webkit-box-sizing: border-box; /* Android ≤ 2.3, iOS ≤ 4 */
     -moz-box-sizing: border-box; /* Firefox 1+ */
          box-sizing: border-box; /* Chrome, IE 8+, Opera, Safari 5.1 */
}

.blur(@radius:5px) {
	filter: blur(@radius);
	-o-filter: blur(@radius);
	-ms-filter: blur(@radius);
	-moz-filter: blur(@radius);
	-webkit-filter: blur(@radius);
}

.scale(@value: 0.5) {
  -webkit-transform: scale(@value);  /* Chrome, Safari 3.1+ */
     -moz-transform: scale(@value);  /* Firefox 3.5+ */
      -ms-transform: scale(@value);  /* IE 9 */
       -o-transform: scale(@value);  /* Opera 10.50-12.00 */
          transform: scale(@value);  /* Firefox 16+, IE 10+, Opera 12.10+ */
}

@containerWidth: 1200px;
@green: #32b076;
@purple: #605186;
@delay: 0.5s;

body, html {
	min-width: @containerWidth;
}

.clear {
	clear: both;
}

.page {
	width: 100%;
	height: 100%;
	position: relative;
	min-width: @containerWidth;
	-webkit-font-smoothing: antialiased;

	.backgrounds {
		position: fixed;
		width: 100%;
		height: 100%;
		z-index: 1;
		
		.background {
			width: 100%;
			height: 100%;
			background-size: cover;
			background-position: center top;
			position: absolute;
			.transition;
			
			&.slide {
				display: none;
			
				&.first {
					background-image: url(../images/bg1.jpg);
				}
				
				&.second {
					background-image: url(../images/bg2.jpg);
				}
				
				&.third {
					background-image: url(../images/bg3.jpg);
				}

				&.fourth {
					background-image: url(../images/bg4.jpg);
				}

				&.fifth {
					background-image: url(../images/bg5.jpg);
				}
				
				&.showed {
					display: block;
				}
			}
			
			&.default {
				background-image: url(../images/bg1.jpg);
				opacity: 0;
				
				&.showed {
					opacity: 1;
				}
			}
			
			&.blured {
				background-image: url(../images/bg_blur.jpg);
				opacity: 0;
				
				&.showed {
					opacity: 1;
				}
			}
		}
	}
	
	.menu-wrapper {
		position: fixed;
		z-index: 30;
		height: 100%;
		left: 50%;
		margin-left: @containerWidth / 2;
		
		.menu {
			position: absolute;
			width: 200px;
			margin-top: 120px;
			margin-left: -300px;
			.transition;
			
			.item {
				width: 200px;
				height: 53px;
				cursor: pointer;
				margin-bottom: 10px;
			
				.icon {
					display: block;
					width: 53px;
					height: 53px;
					background-size: cover;
					float: left;
					.box-sizing;
					.radius;
					position: relative;
					z-index: 40;
					border: @green 3px solid;
					.transition;
				}
				
				.text {
					width: 100px;
					white-space:nowrap;
					float: left;
					color: #ffffff;
					opacity: 1;
					padding-left: 10px;
					line-height: 53px;
					font-family: PTSansPro-Caption;
					font-size: 14px;
					text-decoration: none;
					.transition;
				}
				
				.line {
					position: absolute;
					margin-top: 26px;
					margin-left: 0px;
					width: 0px;
					height: 1px;
					background-color: #ffffff;
					z-index: 35;
					.transition;
				}
				
				&.active {
					.icon {
						border-color: #ffffff;
					}
				
					.line {
						margin-left: -178px;
						width: 180px;
						cursor: default;
					}
				}
				
				&.inactive {
					.icon {
						border-color: @green;
					}
				
					.line {
						margin-left: 0px;
						width: 0px;
					}
				}
				
				&.disabled {
					opacity: 0.5;
					cursor: default;
				}
			}
			
			&.far {
				width: 100px;
				margin-top: 70px;
				margin-left: -50px;
				
				.item {
					.text {
						opacity: 0;
					}
					
					&.active {
						.line {
							margin-left: 0px;
							width: 0px;
						}
					}
				}
			}
		}
		
		.bottom {
			position: absolute;
			width: 270px;
			top: 100%;
			margin-top: -103px;
			margin-left: -262px;
			
			.item {
				display: block;
				width: 213px;
				height: 36px;
				background-image: url( ../images/logo.png );
			}
			
			&.hidden {
				opacity:  0.5;
			}
			
			&.dark {
				.item {
					background-image: url( ../images/logo_black.png );
				}
			}
		}
	}
	
	.start {
		width: 100%;
		height:  100%;
		background-size: cover;
		background-position: center center;
		background-image: url( ../images/bg.jpg );
		position: absolute;
		z-index: 10;
		overflow: hidden;
		
		.container {
			width: @containerWidth;
			margin: 0 auto;
			position: relative;
			height: 100%;
			
			.circle {
				position: absolute;
				background-size: cover;
				background-position: center center;
				.radius;
				.transition;
				z-index: 11;
				
				&.first {
					background-color: @green;
					width: 675px;
					height: 675px;
					margin-top: -180px;
					margin-left: -200px;
					position: relative;
					
					.logo {
						position: absolute;
						width: 126px;
						height: 28px;
						background-image: url( ../images/logo2.png );
						top: 191px;
						left: 204px;
					}
					
					.title {
						font-family: Ghost;
						font-size: 60px;
						line-height: 57px;
						color: #ffffff;
						padding-top: 230px;
						padding-left: 210px;
						.box-sizing;
					}
					
					.description {
						font-family: PTSansPro-Caption!important;
						font-size: 14px;
						font-weight: bold;
						line-height: 16px;
						color: #ffffff;
						padding-left: 210px;
						padding-top: 25px;
						.box-sizing;
						-webkit-font-smoothing: antialiased;
					}
					
					.text {
						font-family: PTSansPro-Caption!important;
						font-size: 13px;
						line-height: 15px;
						color: #ffffff;
						padding-top: 25px;
						padding-left: 210px;
						padding-right: 140px;
						.box-sizing;
						-webkit-font-smoothing: antialiased;
					}
				}
				
				&.zero {
					top: 520px;
					left: 350px;
					width: 85px;
					height: 85px;
					background-color: transparent;
					background-image: url(../images/arrow.png);
					z-index: 12;
				}
			}
		}
	}
	
	.content {
		position: absolute;
		top: 100%;
		width: 100%;
		height: 8700px;
		position: absolute;
		z-index: 2;
		overflow: hidden;
		.transition;
		
		.container {
			width: @containerWidth;
			margin: 0 auto;
			position: relative;
			height: 100%;
			
			.back {
				.social-share {
					display: block;
				}
			}

			.purple {
				position: absolute;
				width: 35px;
				height: 35px;
				background: url(../images/round.png);
				z-index: 100;
			}
		
			.circle {
				position: absolute;
				background-color: #ffffff;
				background-size: cover;
				background-position: center center;
				.radius;
				.transition;
				z-index: 3;
				
				a {
					color: @green;
					text-decoration: underline;
				}
				
				&.zero {
					top: 550px;
					left: 480px;
					width: 85px;
					height: 85px;
					background-color: transparent;
					background-image: url(../images/arrow.png);
					z-index: 4;
				}
				
				&.first {
					top: 250px;
					margin-left: -110px;
					width: 640px;
					height: 640px;
					
					.title {
						font-family: Ghost;
						font-size: 60px;
						line-height: 57px;
						color: @green;
						padding-top: 80px;
						padding-left: 115px;
						.box-sizing;
					}
					
					.text {
						font-family: PTSansPro-Caption!important;
						font-size: 13px;
						line-height: 15px;
						color: @green;
						padding-top: 20px;
						padding-left: 115px;
						padding-right: 70px;
						.box-sizing;
					}
				}
			}
			
			.content-text-wrapper {
				position: absolute;
				color: #ffffff;
				width: 500px;
				height: 1px;
				overflow: visible;
				.transition;

				&.hide {
					img {
						.scale(0);
					}

					.description {
						.scale(0);
					}
				}

				&.show {
					img {
						.scale(1);
					}

					.description {
						.scale(1);
					}
				}
			
				.title {
					font-family: PTSansPro-Caption;
					font-size: 18px;
					line-height: 24px;
					font-weight: bold;
					margin-bottom: 25px;
					
					a {
						color: #ffffff;
					}
				}
				
				.text {
					font-family: PTSansPro-Caption;
					font-size: 16px;
					line-height: 24px;
					margin-bottom: 25px;
					
					a {
						color: #ffffff;
					}
				}

				.description {
					font-family: Ghost;
					font-size: 14px;
					line-height: 16px;
					margin-bottom: 25px;
					.transition;
					transition-delay: @delay;
					-webkit-transition-delay: @delay;
					
					a {
						color: #ffffff;
					}
				}

				img {
					margin-bottom: 25px;
					.transition;
				}

				.header {
					font-family: Ghost;
					font-size: 36px;
					line-height: 40px;
					margin-bottom: 25px;
				}
			}

			.content-action-wrapper {
				position: absolute;
				color: #ffffff;
				width: 400px;
				text-align: left;
				height: 1px;
				overflow: visible;
				.transition;

				&.hide {
					img {
						.scale(0);
					}

					.text {
						.scale(0);
					}

					.purple {
						.scale(0);
					}
				}

				&.show {
					img {
						.scale(1);
					}

					.text {
						.scale(1);
					}

					.purple {
						.scale(1);
					}
				}

				img {
					margin-bottom: 25px;
					.transition;
				}
				.text {
					font-family: Ghost;
					font-size: 36px;
					line-height: 40px;
					.transition;
					transition-delay: @delay * 2;
					-webkit-transition-delay: @delay * 2;
				}

				.purple {
					.transition;
					transition-delay: @delay;
					-webkit-transition-delay: @delay;
				}
			}

			.back {
				width: 300%;
				margin-left: -100%;
				position: absolute;
				background-color: rgba( 0, 0, 0, 0.5 );
			}
		}
	}

	.end-comments {
		top: 8100px;
		position: absolute;
		width: 100%;
		z-index: 2;
		overflow: hidden;
	}
}

@media screen and (max-width: 480px) {
   html {
      -webkit-text-size-adjust: none;
   }
}