@green: #7ec05a;
@gray: #e3e4e5;

.embed-responsive {
	display: block;
	height: 0;
	overflow: hidden;
	position: relative;
}

.embed-responsive.embed-responsive-16by9 {
	padding-bottom: 56.25%
}

.embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object {
	border: 0 none;
	bottom: 0;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

body {
	background-color:#FFF;
	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-size:20px;
	line-height: 20px;
	overflow: hidden;
	section#contact {
		background-color: #e3e4e5;
	}
}

/* Preloader */
#preloader {
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:@green; /* change if the mask should have another color then white */
	z-index:99999; /* makes sure it stays on top */
}

#status {
	width:200px;
	height:200px;
	position:absolute;
	left:50%; /* centers the loading animation horizontally one the screen */
	top:50%; /* centers the loading animation vertically one the screen */
	background-image:url(../img/status.gif); /* path to your loading animation */
	background-repeat:no-repeat;
	background-position:center;
	margin:-100px 0 0 -100px; /* is width and height divided by two */
}

a {
	-webkit-transition: all 400ms ease-in-out;
	-moz-transition: all 400ms ease-in-out;
	-ms-transition: all 400ms ease-in-out;
	-o-transition: all 400ms ease-in-out;
	transition: all 400ms ease-in-out;
 &:hover {
	-webkit-transition: all 400ms ease-in-out;
	-moz-transition: all 400ms ease-in-out;
	-ms-transition: all 400ms ease-in-out;
	-o-transition: all 400ms ease-in-out;
	transition: all 400ms ease-in-out;
	outline:none;
 }
 &:active,
 &:visited,
 &:link,
 &:focus {
	 outline:none;
 }
}

.menu-bar {
	position:fixed;
	top:0;
	z-index:9999;
	height:65px;
	> * {
		display:inline-block;
		margin-right:-3px;
	}
}
.mm-list {
	a {
		font-size:20px;
		font-weight:300;
		color:#FFF;
		opacity:1;
	 &:hover {
		 opacity:0.6;
	 }
	}
}

#home {
	background-color:@gray;
	position: relative;
	.logo {
		margin:0 auto;
		& + span {
			font-weight:300;
			margin-top:85px;
			display:block;
			font-size:20px;
			color: #A0A0A0;
		}
	}
	/*.arrow {
		margin-top:15%;
		img {
			margin:0 auto;
		}
	}*/
	div.arrow {
		position:absolute;
		width:64px;
		padding:0;
		bottom:30px;
		left:0;
		right:0;
		margin:auto;
	}
}

#timeline,
#timeline-mobile,
#works,
#postcc,
#timeline-mobile-cosa-facciamo,
#timeline-cosa-facciamo {
	.no-margin { margin: 0; }
	.main-title, .count-timeline, .count-work {
		margin-bottom:-44px;
		position: absolute;
		z-index: 9980;
		text-align: center;
		padding: 0;
		h1 {
			color: rgba(0,0,0,0.4);
		    font-size: 26px;
		    text-transform: uppercase;
		    a { color: rgba(0,0,0,0.4); }
		}
	}
	.count-timeline, .count-work {
		ol {
			list-style: none;
			display: block;
			position: relative;
			height: 1px;
			background: #F9F9F9;
			margin: 100px 0 0;
			li {
				position: relative;
				top: -12px;
				display: inline-block;
				font: bold 14px arial;
				margin: 0 4px;
				&::before {
					content: "";
					display: block;
					width: 8px;
					height: 8px;
					border: 1px solid #F9F9F9;
					//border-radius: 10px;
					background-color: @green /*#5d5d5d*/ /*rgba(0,0,0,0.4)*/;
				}
				&.c0::before{
					background-color:#85bd4b;
					-webkit-transition: all 600ms ease-in-out;
					-moz-transition: all 600ms ease-in-out;
					-ms-transition: all 600ms ease-in-out;
					-o-transition: all 600ms ease-in-out;
					transition: all 600ms ease-in-out;
				}
				&.c1::before{
					background-color:#8db9b0;
					-webkit-transition: all 600ms ease-in-out;
					-moz-transition: all 600ms ease-in-out;
					-ms-transition: all 600ms ease-in-out;
					-o-transition: all 600ms ease-in-out;
					transition: all 600ms ease-in-out;
				}
				&.c2::before{
					background-color:#f39200;
					-webkit-transition: all 600ms ease-in-out;
					-moz-transition: all 600ms ease-in-out;
					-ms-transition: all 600ms ease-in-out;
					-o-transition: all 600ms ease-in-out;
					transition: all 600ms ease-in-out;
				}
				&.c3::before{
					background-color:#9b8883;
					-webkit-transition: all 600ms ease-in-out;
					-moz-transition: all 600ms ease-in-out;
					-ms-transition: all 600ms ease-in-out;
					-o-transition: all 600ms ease-in-out;
					transition: all 600ms ease-in-out;
				}
				&.c4::before{
					background-color:#6e787d;
					-webkit-transition: all 600ms ease-in-out;
					-moz-transition: all 600ms ease-in-out;
					-ms-transition: all 600ms ease-in-out;
					-o-transition: all 600ms ease-in-out;
					transition: all 600ms ease-in-out;
				}
				&.c5::before{
					background-color:#e9457e;
					-webkit-transition: all 600ms ease-in-out;
					-moz-transition: all 600ms ease-in-out;
					-ms-transition: all 600ms ease-in-out;
					-o-transition: all 600ms ease-in-out;
					transition: all 600ms ease-in-out;
				}
				&.c6::before{
					background-color:#966da0;
					-webkit-transition: all 600ms ease-in-out;
					-moz-transition: all 600ms ease-in-out;
					-ms-transition: all 600ms ease-in-out;
					-o-transition: all 600ms ease-in-out;
					transition: all 600ms ease-in-out;
				}
				span {
					display: none;

					position: absolute;
					top: 35px;
					left: -11px;
					padding: 15px;
					border-radius: 3px;
					font: 12px arial;
					background: #fff;
					&::before {
						content: "";
						position: absolute;
						left: 10px;
						top: -9px;
						display: block;
						width: 0;
						height: 0;
						border: 10px solid transparent;
						border-bottom-color: #fff;
						border-top: 0;
						-webkit-transition: all 750ms ease-in-out;
						-moz-transition: all 750ms ease-in-out;
						-ms-transition: all 750ms ease-in-out;
						-o-transition: all 750ms ease-in-out;
						transition: all 750ms ease-in-out;
					}
					-webkit-transition: all 750ms ease-in-out;
					-moz-transition: all 750ms ease-in-out;
					-ms-transition: all 750ms ease-in-out;
					-o-transition: all 750ms ease-in-out;
					transition: all 750ms ease-in-out;
				}
				&:hover,&.active {
					cursor: pointer;
					//color: #28e;
					-webkit-transition: all 750ms ease-in-out;
					-moz-transition: all 750ms ease-in-out;
					-ms-transition: all 750ms ease-in-out;
					-o-transition: all 750ms ease-in-out;
					transition: all 750ms ease-in-out;
					&::before {
						top: 1px;
						left: -31px;
						width: 8px;
						height: 8px;
						border-width: 1px;
						border-color: #F9F9F9;
						background-color: #F9F9F9;
						-webkit-transition: all 750ms ease-in-out;
						-moz-transition: all 750ms ease-in-out;
						-ms-transition: all 750ms ease-in-out;
						-o-transition: all 750ms ease-in-out;
						transition: all 750ms ease-in-out;
					}
				}
				&:hover {
					span {
						display: block;
						color: #000;
					}
				}
			}
		}
	}
	.timeline,
	.work {
		display:block;
		padding-top:50px;
		padding-bottom:50px;
		position:relative;
		&:nth-child(7n+1){
			background-color:#85bd4b;
		}
		&:nth-child(7n+2){
			background-color:#8db9b0;
		}
		&:nth-child(7n+3){
			background-color:#f39200;
		}
		&:nth-child(7n+4){
			background-color:#9b8883;
		}
		&:nth-child(7n+5){
			background-color:#6e787d;
		}
		&:nth-child(7n+6){
			background-color:#e9457e;
		}
		&:nth-child(7n+7){
			background-color:#966da0;
		}
		.image, .arrow {
			margin-top:25px;
			margin-bottom:25px;
			img {
				margin:0 auto;
			}
		}
		.arrow {
			margin-top:45px;
			margin-bottom:0;
		}
		.title {
			text-transform:uppercase;
			font-size:30px !important;
			font-weight:700;
			color:rgba(0,0,0,0.4);
			margin-top:5px;
			margin-bottom:5px;
			h1 {
				color:#FFF;
			}
			/*h2 { text-transform: inherit !important; }*/
		}
		h2 {
			font-size: 20px;
			line-height: 20px;
			@media(min-width:768px) {
				font-size: 26px;
				line-height:28px;
			}
			color: rgba(0,0,0,0.6);
		}
		.content {
			font-size:20px;
			line-height: 20px;
			@media(min-width:768px) {
				font-size: 26px;
				line-height: 28px;
			}
			span {
				color:rgba(0,0,0,0.4);
				text-transform:capitalize;
			}
			a {
				color:#FFF;
				background-color:#000;
				padding:0 3px;
				text-decoration:underline;
				&:hover {
					text-decoration:none;
				}
			}
		}
		&.full-bg {
			background-repeat:no-repeat;
			-webkit-background-size: 100%;
			-moz-background-size:100%;
			-o-background-size:100%;
			background-size:100%;
			@media(min-width:768px) {
				-webkit-background-size: cover;
				-moz-background-size:cover;
				-o-background-size:cover;
				background-size:cover;
			}
			background-position:center center;
			@media(min-width:768px) {
				background-attachment:fixed;
			}
		}
	}
	&.visible-md.visible-lg {
		position:relative;
		overflow:hidden;
		height:100%;
		#contenitore-timeline,
		#contenitore-works {
			position:relative;
			float:left;
		}
		.timeline, .work {
			float:left;
		}
		a.arrow {
			position:absolute;
			width:64px;
			height:64px;
			margin:auto;
			top:0;
			bottom:0;
			&.left {
				left:10px;
			}
			&.right {
				right:10px;
			}
		}
		div.arrow {
			position:absolute;
			width:64px;
			padding:0;
			bottom:30px;
			left:0;
			right:0;
			margin:auto;
		}
	}
}
#works {
	.count-timeline {
		ol {
			li {
				&::before {
					background-color: darken(@gray, 5%);
				}
			}
		}
	}
	.work {
		background-color:darken(@gray, 5%) !important;
	}
}
#works-mobile {
	.title {
		text-transform:uppercase;
		font-size:30px;
		font-weight:700;
		color:rgba(0,0,0,0.4);
	}
	.content {
		font-size:20px;
		line-height: 20px;
		@media(min-width:768px) {
				font-size: 26px;
				line-height: 28px;
			}
		span {
			color:rgba(0,0,0,0.4);
			text-transform:capitalize;
		}
		a {
			color:#FFF;
			background-color:#000;
			padding:0 3px;
			text-decoration:underline;
			&:hover {
				text-decoration:none;
			}
		}
	}
}

.mm-panel {
	div.image {
		img {
			display: inline;
    		margin: 2px !important;
    		max-width: 100px;
		}
	}
}

#postcc {
	.mm-panel {
		padding-top:0;
		padding-left:0;
		padding-right:0;
		background-repeat:no-repeat;
		-webkit-background-size: 100%;
		-moz-background-size:100%;
		-o-background-size:100%;
		background-size:100%;
		@media(min-width:768px) {
			-webkit-background-size: cover;
			-moz-background-size:cover;
			-o-background-size:cover;
			background-size:cover;
		}
		background-position:center center;
		@media(min-width:768px) {
			background-attachment:fixed;
		}
	}
	.timeline {
		background-color:rgba(red(@gray),green(@gray),blue(@gray),0.4) !important;
		background-image: none;
		@media(max-width:480px) {
			margin-top: 0 !important;
			padding-bottom: 10px;
		}
		padding-top:0;
		.image {
			margin-top:0;
		}
	}
	a.close {
		color: #999;
		text-align: center;
		text-decoration: none;
		font-family: Lucida Sans Unicode;
		font-weight: normal;
		font-size: 20px;
		line-height: 20px;
		display: block;
		width: 30px;
		height: 30px;
		position: absolute;
		top: 25px;
		right: 25px;
		opacity:1;
		z-index:9999;
		padding:4px;
		background-color:rgba(red(@gray),green(@gray),blue(@gray),0.8);
	}
}

#team, #contact, #works-mobile {
	.title {
		text-transform:uppercase;
		font-size:30px;
		font-weight:700;
		color:rgba(0,0,0,0.4);
	}
	h2 {
		font-size: 20px;
		line-height: 20px;
		@media(min-width:768px) {
				font-size: 26px;
				line-height: 28px;
			}
	}
	background-color:@gray;
	.image, .arrow {
		margin-top:25px;
		margin-bottom:25px;
		img {
			margin:0 auto;
		}
	}
}

#form-contact {
	margin-top:25px;
	ul {
		list-style:none;
		margin:0;
		padding:0;
		> li {
			border-bottom:1px solid #666;
			padding-bottom:3px;
			margin-bottom:3px;
		}
	}
	p {
		strong {
			font-size:20px;
		}
	}
	h3 {
		color:#666;
		margin-top: 0;
	}
}
#contact {
	padding-bottom:50px;
}

.category-3, .category-8, .category-9 {
	.container {
		h1 {
			margin:0 auto;
			width:100px;
			height:100px;
			-webkit-border-radius: 999px;
			border-radius: 999px;
			line-height:70px;
			border:5px solid;
			font-size:72px;
		}
	}
}

/*#toTop {
	width:100px;
	height:100px;
	background-color:@green;
	text-align:center;
	padding:5px;
	position:fixed;
	bottom:10px;
	right:10px;
	cursor:pointer;
	text-transform:uppercase;
	font-size:14px;
	font-weight:300;
	color:#FFF;
	display:none;
	span {
		display:block;
	}
}*/

.backToHome { position:relative;
							 z-index:10;
	> div { /*display:none;*/
					 width:65px;
					 height:65px;
					 background-color:#c6c6c5;
					 color:#FFF;
					 text-transform:uppercase;
					 line-height:65px;
					 font-size:10px;
					 text-align:center;
					 -webkit-transition: all 450ms ease-in-out;
					-moz-transition: all 450ms ease-in-out;
					-ms-transition: all 450ms ease-in-out;
					-o-transition: all 450ms ease-in-out;
					transition: all 450ms ease-in-out;
					-moz-transform: translateX(0);
					-webkit-transform: translateX(0);
					-o-transform: translateX(0);
					-ms-transform: translateX(0);
					transform: translateX(0);
					position:absolute;
					z-index:-1;
					top:0;

	}
	&:hover {
		> div { /*display:inline-block; */
						 -moz-transform: translateX(65px);
						-webkit-transform: translateX(65px);
						-o-transform: translateX(65px);
						-ms-transform: translateX(65px);
						transform: translateX(65px);
						-webkit-transition: all 450ms ease-in-out;
						-moz-transition: all 450ms ease-in-out;
						-ms-transition: all 450ms ease-in-out;
						-o-transition: all 450ms ease-in-out;
						transition: all 450ms ease-in-out;

		}
	}
}


/*animation*/
.animated {
	animation-iteration-count:infinite;
	-webkit-animation-iteration-count:infinite;
	-moz-animation-iteration-count:infinite;
	-o-animation-iteration-count:infinite;
	animation-duration:2s;
	-webkit-animation-duration:2s;
	-moz-animation-duration:2s;
	-o-animation-duration:2s;
}

.yearContainer {
	position:absolute;
	top:20px;
	right:0;
	z-index:1;
	text-align:right;
	font-size:32px;
	ul {
		list-style:none;
		li {
			display:inline;
			a {
				/*color:#FFF;
				background-color:#000;
				padding:0 3px;
				text-decoration:underline;
				&:hover {
					text-decoration:none;
				}*/
				color: rgba(0,0,0,0.4);
				font-size: 30px;
				font-weight: 700;
				text-transform: uppercase;

			}
			&:before {
					content: "\22C5";
					color: rgba(0,0,0,0.4);
				}
			&:first-child {
				&:before { content: ""; }
			}
		}
	}
}

#stop-cousin,
#top-ten {
	position:absolute;
	top: 0;
	right:0;
	width:70px;
	z-index: 9999;
	img {
		max-width: 70px;
	}
	@media(min-width:768px){
		width:100px;
		img { max-width: 100px; }
	}
}

.full-bg {
	background-repeat:no-repeat;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		background-attachment:fixed;
		background-position:center center;
}
h2.intro { color: rgba(0,0,0,0.6); font-size: 20px; line-height: 20px; text-transform: initial !important;
	@media(min-width:768px) {
		font-size: 26px;
		line-height: 28px;
	}
	a {
		color: #FFF;
		background-color: #000;
		padding: 0 3px;
		text-decoration: underline;
		&:hover {
			text-decoration: none;
		}
	}
}
#u_are_here {
	color: rgba(0, 0, 0, 0.6);
    left: 15px;
    position: fixed;
    text-transform: uppercase;
    top: 85px;
    z-index: 9999;
    font-size: 20px;
    span {
    	text-transform: lowercase;
    	color: rgba(0,0,0,0.4);
    }
}

.row.main-title-section {
	position:fixed;
	width: 100%;
	z-index: 9998;
	text-align:center;
	margin:0;
	h1 {
		color: rgba(0,0,0,0.4);
		text-transform: uppercase;
		font-size: 26px;
		margin-top: 85px;
		span { font-size: 28px; text-transform: lowercase; }
	}
}
.selectpicker span {
	text-transform: inherit !important;
	font-size: 20px;
}
.selectpicker a {
	background-color: inherit !important;
	color: inherit !important;
	padding: 2px 15px !important;
	text-decoration: inherit !important;
}
.mm-menu { width: 60%; max-width:320px;}
html.mm-opening .mm-page, html.mm-opening #mm-blocker {
	transform: translate(60%, 0);
	-webkit-transform: translate(60%, 0);
	@media(min-width:550px){
		transform: translate(320px, 0);
		-webkit-transform: translate(320px, 0);
	}
}
.mm-menu.mm-offcanvas { z-index: 9999; }
body {
	&.page,
	&.single,
	&.archive {
		.count-timeline,
		.count-work {
			ol {
				margin-top: -100px !important;
				li {
					&.active{
						&::before {
							background-color: #FFF !important;
						}
					}
				}
			}
		}
		.count-work {
			ol {
				li {
					&::before {
						background-color: @gray !important;
					}
				}
			}
		}
		.count-timeline {
			ol {
				li {
					&::before {
					content: "";
					display: block;
					width: 8px;
					height: 8px;
					border: 1px solid #F9F9F9;
					//border-radius: 10px;
					background-color: @green /*#5d5d5d*/ /*rgba(0,0,0,0.4)*/;
					}
					&.c0::before{
						background-color:#85bd4b;
						-webkit-transition: all 600ms ease-in-out;
						-moz-transition: all 600ms ease-in-out;
						-ms-transition: all 600ms ease-in-out;
						-o-transition: all 600ms ease-in-out;
						transition: all 600ms ease-in-out;
					}
					&.c1::before{
						background-color:#8db9b0;
						-webkit-transition: all 600ms ease-in-out;
						-moz-transition: all 600ms ease-in-out;
						-ms-transition: all 600ms ease-in-out;
						-o-transition: all 600ms ease-in-out;
						transition: all 600ms ease-in-out;
					}
					&.c2::before{
						background-color:#f39200;
						-webkit-transition: all 600ms ease-in-out;
						-moz-transition: all 600ms ease-in-out;
						-ms-transition: all 600ms ease-in-out;
						-o-transition: all 600ms ease-in-out;
						transition: all 600ms ease-in-out;
					}
					&.c3::before{
						background-color:#9b8883;
						-webkit-transition: all 600ms ease-in-out;
						-moz-transition: all 600ms ease-in-out;
						-ms-transition: all 600ms ease-in-out;
						-o-transition: all 600ms ease-in-out;
						transition: all 600ms ease-in-out;
					}
					&.c4::before{
						background-color:#6e787d;
						-webkit-transition: all 600ms ease-in-out;
						-moz-transition: all 600ms ease-in-out;
						-ms-transition: all 600ms ease-in-out;
						-o-transition: all 600ms ease-in-out;
						transition: all 600ms ease-in-out;
					}
					&.c5::before{
						background-color:#e9457e;
						-webkit-transition: all 600ms ease-in-out;
						-moz-transition: all 600ms ease-in-out;
						-ms-transition: all 600ms ease-in-out;
						-o-transition: all 600ms ease-in-out;
						transition: all 600ms ease-in-out;
					}
					&.c6::before{
						background-color:#966da0;
						-webkit-transition: all 600ms ease-in-out;
						-moz-transition: all 600ms ease-in-out;
						-ms-transition: all 600ms ease-in-out;
						-o-transition: all 600ms ease-in-out;
						transition: all 600ms ease-in-out;
					}
				}
			}
		}
	}
	&.category-5 {
		.main-title {
			h1 {
				color:rgba(200,200,200,1) !important;
			}
		}
	}
}

.social {
	a { color: rgba(0,0,0,0.4);
		text-transform: uppercase;
		font-size: 20px;
	}
}
.form-group .control-label {
	font-weight: normal;
}

body.page-id-37,
body.page-id-426 {
	.timeline,
	.work {
		display:block;
		padding-top:50px;
		padding-bottom:50px;
		position:relative;
		&:nth-child(9n+1){
			background:url('../img/s08.png') 0 0;
		}
		&:nth-child(9n+2){
			background:url('../img/s02.png') 0 0;
		}
		&:nth-child(9n+3){
			background:url('../img/s09.png') 0 0;
		}
		&:nth-child(9n+4){
			background:url('../img/s04.png') 0 0;
		}
		&:nth-child(9n+5){
			background:url('../img/s05.png') 0 0;
		}
		&:nth-child(9n+6){
			background:url('../img/s06.png') 0 0;
		}
		&:nth-child(9n+7){
			background:url('../img/s07.png') 0 0;
		}
		&:nth-child(9n+8){
			background:url('../img/s01.png') 0 0;
		}
		&:nth-child(9n+9){
			background:url('../img/s03.png') 0 0;
		}
	}
}