/* RESPONSIVE */
@mobile-p: ~"(max-width: 480px) and (orientation: portrait)";
@mobile-l: ~"(max-width: 640px) and (orientation: landscape)";
@mobile: ~"(max-width: 480px) and (orientation: portrait), (max-width: 640px) and (orientation: landscape), (max-width: 480px) and (-webkit-min-device-pixel-ratio: 2)";
@pad: ~"(min-width: 480px) and (max-width: 768px)";
@ipad: ~"(min-width: 768px) and (max-width: 1024px)";
@laptop: ~"(max-width: 1280px)";
@desktop: ~"(max-width: 1650px)";
@huge: ~"(min-width: 1650px)";

/* IMPORTS */
@import url("var.less");
// @import url("mixins.less");
// @import url("editor.less");
@import url("hero.less");

/* MZ GALLERY COMMENT IF NOT PRESENT */
@import url("mzgallery.less");

@blue: #062656;

/* GENERAL CSS */
.wrap {
	position:relative;
	width:100%;
	height:100%;
}
html, body {
	//background: white;
	margin:0;
	padding:0;
	height:100%;
	.font;
	& h1, & h2, & h3, & h4, & h5, & h6, p {
		.font;
	}
}

.gradientblueblack() {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,1b5d9d+30,1b5d9d+70,000000+100 */
	background: rgb(0,0,0); /* Old browsers */
	background: -moz-linear-gradient(left,  rgba(0,0,0,1) 0%, rgba(27,93,157,1) 30%, rgba(27,93,157,1) 70%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(27,93,157,1) 30%,rgba(27,93,157,1) 70%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(0,0,0,1) 0%,rgba(27,93,157,1) 30%,rgba(27,93,157,1) 70%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
}
.gradientvertical() {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1b5d9d+0,000000+11,000000+100 */
	background: #1b5d9d; /* Old browsers */
	background: -moz-linear-gradient(top,  #1b5d9d 0%, #000000 15%, #000000 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #1b5d9d 0%,#000000 15%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #1b5d9d 0%,#000000 15%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1b5d9d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}

body {
	overflow-x: hidden;
	& a.call-btn {
		background: #000;
		color: #fff;
		font-size: 25px;
		font-weight: 600;
		padding: 17px 20px;
		margin-top: 20px;
		display: inline-block;
		& img {
			height:50px;
			width:auto;
			padding-right:10px;
		}
	}
	&.ready {
		overflow-y: auto;
		& .new-header {
			top: 0;
		}
	}
	&.locked {
		overflow-y: hidden;
	}
	& .wrapper {
		min-height:100%;
		position:relative;
	}
	& .row {
		max-width: 800px;
	}
	&.no-header, &.editor {
		& .editor-out {
			display: block;
			.translate(0,0,0);
		}
		& > .wrapper {
			padding-top: 40px;
			& .header {
				display: none;
			}
		}
	}
	& .editor-out {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		padding: 20px 20px 20px 20px;
		.bold(14px, 14px, 1px);
		background: black;
		color: @lightgrey;
		.transition;
		.translate(0,-100px,0);
		display: none;
		&:hover {
			background: @red;
			color: white;
			padding: 20px 20px 20px 40px;
			&:after {
				left: 10px;
			}
		}
		&:after {
			content: '';
			position: absolute;
			top: 50%;
			margin-top: -7px;
			left: -30px;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 7.5px 15px 7.5px 0;
			border-color: transparent #ffffff transparent transparent;
			.transition;
		}
	}
	& .new-header {
		position: fixed;
		width: 100%;
		top: 0px;
		left: 0;
		z-index: 10000;
		text-align: left;
		padding: 0;
		.transition(all 0.5s ease);
		.alpha(80, 6, 38, 86);
		.shadow;

		height:100px;
		@media @desktop {
			height: 70px;
		}
		@media @laptop {
			height: 60px;
		}
		@media @ipad {
			background: white;
			position: inherit;
			.noshadow;
			text-align: center;
			height: auto!important;
		}
		@media @pad {
			background: white;
			position: inherit;
			.noshadow;
			text-align: center;
			height: auto!important;
		}
		@media @mobile-p {
			background: white;
			position: inherit;
			.noshadow;
			text-align: center;
			height: auto!important;
		}
		@media @mobile-l {
			background: @blue;
			text-align: left;
		}
		&.static {
			height:60px;
			.alpha(100,0,0,0);
			@media @desktop {
				height: 50px;
			}
			@media @laptop {
				height: 40px;
			}
			@media @ipad {
				background: none;
				height: auto;
			}
			@media @pad {
				background: none;
				height: auto;
			}
			@media @mobile {
				background: none;
				height: auto;
			}
			& img.logo {
				.translate(-200px,0,0);
				@media @ipad {
					.translate(0,0,0);
				}
				@media @pad {
					.translate(0,0,0);
				}
				@media @mobile {
					.translate(0,0,0);
				}
			}
			& .small-logo {
				opacity:1;
			}
			& .moto {
				.bold(19px,60px,1px);
				padding: 0 30px 0 90px;
				opacity:0;
				@media @ipad {
					position: absolute;
					width: 100%;
					padding: 10px;
					bottom: 0;
					left: 0;
					top: auto;
					.bold(17px,17px,2px);
					opacity: 1;
				}
				@media @pad {
					position: absolute;
					width: 100%;
					padding: 10px;
					bottom: 0;
					left: 0;
					top: auto;
					.bold(17px,17px,2px);
					opacity: 1;
				}
				@media @mobile {
					position: absolute;
					width: 100%;
					padding: 10px;
					bottom: 0;
					left: 0;
					top: auto;
					.bold(17px,17px,2px);
					opacity: 1;
				}
			}
			& h1 {
				opacity:1;
				.bold(19px,60px,1px);
				padding: 0 30px 0 80px;
				left:0;
				@media @desktop {
					.bold(17px,50px,1px);
					padding: 0 20px 0 60px;
				}
				@media @laptop {
					.bold(15px,40px,1px);
					padding: 0 0 0 55px;
				}
			}
			& .click-to-call {
				.bold(19px,60px,1px);
				padding: 0 30px 0 90px;
				@media @desktop {
					.bold(17px,50px,1px);
					padding: 0 10px 0 50px;
				}
				@media @laptop {
					.bold(15px,40px,1px);
					padding: 0 10px 0 60px;
				}
			}
			& .scroll-menu-container {
				right: 270px;
				@media @desktop {
					right: 210px;
				}
				@media @laptop {
					bottom: 150px;
				}
			}
			& .mod-languages {
				top: 50px;
				background: #F51119;
				&::before {
					background: #F51119;
				}
				&::after {
					.arrow-bottom(200px, 20px, #F51119);
				}
			}
		}
		& h1 {
			color:white;
			position: absolute;
			top: 0;
			left: -500px;
			background: #000;
			.transition(all 0.5s ease);
			.bold(23px,100px,2px);
			padding: 0 30px 0 190px;
			opacity:0;
			& span {
				color:@red;
			}
			@media @ipad {
				display: none;
			}
			@media @pad {
				display: none;
			}
			@media @mobile {
				display: none;
			}
		}
		& .click-to-call {
			position:absolute;
			top:0;
			right:0;
			background-color: @red;
			color:white;
			.transition(all 0.5s ease);
			.bold(25px,100px,0px);
			padding: 0 30px 0 120px;
			background-image:url(../images/moto-assistance-odiki-voitheia-24_7.jpg);
			background-repeat:no-repeat;
			background-position:left center;
			background-size:contain;
			@media @desktop {
				.bold(19px,70px,1px);
				padding: 0 12px 0 80px;
			}
			@media @laptop {
				.bold(15px,60px,1px);
				padding: 0 12px 0 70px;
			}
			@media @ipad {
				display: none;
			}
			@media @pad {
				display: none;
			}
			@media @mobile {
				display: none;
			}
		}
		& .small-logo {
			position:absolute;
			top:0;
			left:0;
			height:100%;
			width:auto;
			.transition(all 0.5s ease);
			opacity:0;
			@media @ipad {
				display: none;
			}
			@media @pad {
				display: none;
			}
			@media @mobile {
				display: none;
			}
		}
		& img.logo {
			position:absolute;
			top:0;
			left:0;
			height:100%;
			width:auto;
			.transition(all 0.5s ease);
			@media @ipad {
				height: 110px;
				width: auto;
				position: inherit;
				margin-top: 50px;
				margin-bottom: 60px;
				.shadow;
			}
			@media @pad {
				height: 110px;
				width: auto;
				position: inherit;
				margin-top: 50px;
				margin-bottom: 60px;
				.shadow;
			}
			@media @mobile-p {
				height: 110px;
				width: auto;
				position: inherit;
				margin-top: 50px;
				margin-bottom: 60px;
				.shadow;
			}
			@media @mobile-l {
				.noshadow;
				margin: 0;
				height: 70px;
			}
		}
		& .moto {
			color:white;
			.bold(23px,100px,2px);
			padding: 0 30px 0 190px;
			position: absolute;
			top: 0;
			left: 0;
			background: #000;
			.transition(all 0.5s ease);
			@media @desktop {
				.bold(19px,70px,1px);
				padding: 0 12px 0 130px;
			}
			@media @laptop {
				.bold(15px,60px,1px);
				padding: 0 12px 0 110px;
			}
			@media @ipad {
				position: absolute;
				width: 100%;
				padding: 10px;
				bottom: 0;
				left: 0;
				top: auto;
				.bold(17px,17px,2px);
			}
			@media @pad {
				position: absolute;
				width: 100%;
				padding: 10px;
				bottom: 0;
				left: 0;
				top: auto;
				.bold(17px,17px,2px);
			}
			@media @mobile {
				position: absolute;
				width: 100%;
				padding: 10px;
				bottom: 0;
				left: 0;
				top: auto;
				.bold(17px,17px,2px);
			}
			@media @mobile-l {
				background: none;
				text-align: right;
				.bold(17px,47px,2px);
			}
		}
		& .scroll-menu-container {
			position: absolute;
			right: 345px;
			bottom: 0;
			.transition(all 0.5s ease);
			@media @desktop {
				right: 250px;
			}
			@media @laptop {
				right: 188px;
			}
			@media @ipad {
				display: none;
			}
			@media @pad {
				display: none;
			}
			@media @mobile {
				display: none;
			}
			& ul {
				margin: 0;
				padding: 0 20px 7px 0;
				list-style: none;
				& li {
					display: inline-block;
					position:relative;
					& a {
						color: white;
						.bold(17px,17px,1px);
						padding: 10px;
						.transition;
						@media @desktop {
							.bold(14px,14px,1px);
						}
						@media @laptop {
							.bold(13px,13px,1px);
							padding: 7px;
						}
						&:hover {
							padding: 10px 20px;
							background: @red;
							@media @laptop {
								padding: 7px;
							}
						}
					}
					&:hover {
						& ul {
							opacity: 1;
							visibility: visible;
							-webkit-transition: all 0.2s ease 0s;
							-moz-transition: all 0.2s ease 0s;
							-ms-transition: all 0.2s ease 0s;
							-o-transition: all 0.2s ease 0s;
							transition: all 0.2s ease 0s;
						}
					}
					& ul {
						position: absolute;
						z-index: 999999;
						background: rgba(6,38,86,0.8);
						-moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.6);
						-webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.6);
						box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.6);
						opacity: 0;
						visibility: hidden;
						-webkit-transition: all 0.2s ease 0s;
						-moz-transition: all 0.2s ease 0s;
						-ms-transition: all 0.2s ease 0s;
						-o-transition: all 0.2s ease 0s;
						transition: all 0.2s ease 0s;
						margin: 5px 0 0 0;
						width: 260px;
						left: -10px;
						padding: 20px 10px 25px 10px;
						& li {
							font-size:15px;
							& a {
								color: #fff;
							}
						}
					}
				}
			}
		}
		& .mod-languages {
			.transition(all 0.5s ease);
			position: absolute;
			top: 70px;
			left: calc(~"50% - 100px");
			width: 200px;
			background: black;
			@media @laptop {
				top: 58px;
			}
			@media @ipad {
				top: 0;
			}
			@media @pad {
				top: 0;
			}
			@media @mobile {
				top: 0;
			}

			&::after {
				content: '';
				.arrow-bottom(200px, 20px, black);
				position: absolute;
				top: 15px;
				left: calc(~"50% - 100px");
				z-index: 2;
			}

			&::before {
				content: '';
				position: absolute;
				height: 15px;
				width: 100%;
				left: 0;
				top: 0;
				z-index: 1;
				background: black;
			}

			& ul {
				margin: 0;
				padding: 0;
				text-align: center;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				z-index: 3;

				& li {
					display: inline-block;

					&.lang-active {
						display: none;
					}

					& a {
						color: white;
					}
				}
			}
		}
	}
	& .menu-container {
		position: absolute;
		background-color: rgba(62, 62, 62, 0.88);
		width: 100vw;
		height: 80vh;
		top: 0;
		.transition(all 0.5s ease);
		opacity: 0;
		&.active {
			opacity: 1;
			& .moduletable {
				& ul {
					.translate(0,0,0);
					opacity: 1;
					.transition(all 0.4s ease 0.4s);
				}
			}
		}
		& .moduletable {
			position: absolute;
			top: 200px;
			left: 0;
			width: 100%;
			text-align: center;
			z-index: 100000000000000000;
			& ul {
				margin: 0;
				padding: 0;
				list-style: none;
				.translate(0,-50px,0);
				opacity: 0;
				.transition(all 0.3s ease);
				& li {
					display: inline-block;
					border-bottom: 2px solid transparent;
					.transition;
					&:hover {
						border-bottom: 2px solid black;
					}
					&.current {
						border-bottom: 2px solid transparent;
						& a, span {
							color: #ecd972;
						}
					}
					& a, span {
						color: white;
						.title(19px,19px,2px);
						font-weight: bold;
						text-shadow: 0 0 3px #000;
						padding: 0 10px;
					}
				}
			}
		}
		& .page-social {
			position: absolute;
			top: 250px;
			width: 100%;
			left: 0;
			text-align: center;
			& .social-label {
				display: inline-block;
				vertical-align: middle;
				color: white;
				.title(13px,13px,1px);
				font-weight: bold;
			}
			& .share-button {
				display: inline-block;
				width: 30px;
				height: 30px;
				background-image: url(../images/deplanv-social-share-icons-white.png);
				background-repeat: no-repeat;
				background-size: 100% auto;
				cursor: pointer;
				vertical-align: middle;
				&.facebook {
					&:hover {
						background-position: 0 -30px;
					}
				}
			}
			& span {
				display: inline-block;
				vertical-align: middle;
			}
		}
	}
	&.home {
		& .article-spacer {
			display: none;
		}
	}
	&.contact-page {
		& #content {
			& h2 {
				font-family: 'Codystar', cursive;
				font-size: 45px;
				margin-bottom: 45px;
				letter-spacing: 3px;
			}
		}
	}
	& #content {
		background: white;
		position: relative;
		.transition(padding-top 1s ease 0.5s);
		& h1 {
			.h1;
		}
		& h2 {
			.h2;
		}

		// ARTICLE
		& div.article {
			background: white;
			min-height: 200px;
			& .perma-price {
				position: fixed;
				width: 230px;
				height: 230px;
				background: url(../images/metafora-motosykletas-entos-attikis.png) center center no-repeat;
				background-size: contain;
				z-index: 100000;
				right: 10px;
				bottom: 20px;
				.origin(100%,100%);
				& .top-part {
					text-align: center;
					color: #fff;
					.bold(16px,16px,1px);
					position: absolute;
					top: 65px;
					width: 100%;
					padding: 0 60px;
				}
				& .mid-part {
					text-align: center;
					color: #fff;
					.bold(60px,35px,1px);
					position: absolute;
					top: 85px;
					width: 100%;
					left: 9px;
					text-shadow: 0px 0px 5px rgba(0,0,0,0.6), 0px 0px 10px rgba(0,0,0,0.8), 0px 0px 15px rgba(0,0,0,0.9);
					& sup {
						font-size: 30px;
					}
				}
				& .bottom-part {
					text-align: center;
					color: #fff;
					.bold(16px,16px,1px);
					position: absolute;
					bottom: 70px;
					width: 100%;
					padding: 0 60px;
				}
				@media @desktop {
					.scale(0.8);
				}
				@media @laptop {
					.scale(0.6);
				}
				@media @ipad {
					display: none;
				}
				@media @pad {
					display: none;
				}
				@media @mobile {
					display: none;
				}
			}
			& .perma-image {
				display: none;
				@media @ipad {
					display: block;
				}
				@media @pad {
					display: block;
					//height: 60px;
				}
				@media @mobile-p {
					display: block;
					//height: 120px;
				}
				@media @mobile-l {
					display: block;
					//height: 60px;
				}
				& img {
					width: 100%;
					height: auto;
					@media @pad {
						//display: none;
					}
					@media @mobile {
						//display: none;
						margin-top: 120px;
					}
				}
				& .perma-actions {
					position: absolute;
					bottom: 0;
					width: 50%;
					height: 60px;
					@media @mobile-p {
						width: 100%;
						height: 60px;
						//position: static;
					}
					& a {
						display: block;
						background-color: @red;
						color: white;
						position: absolute;
						top: 50%;
						left: 50%;
						.bold(30px,60px,2px);
						width: 250px;
						margin-left: -125px;
						text-align: center;
						height: 60px;
						margin-top: -30px;
						.radius(15px);
						.shadow(0px 0px 10px 7px rgba(0,0,0,0.7));
						@media @pad {
							.noshadow;
							.radius(0);
							width: 100%;
							margin-left: 0;
							left: 0;
						}
						@media @mobile {
							.noshadow;
							.radius(0);
							width: 100%;
							margin-left: 0;
							left: 0;
						}
						@media @mobile-l {
							.bold(23px,60px,2px);
						}
					}
					&.call {
						left: 0;
						@media @mobile-p {
							top: 0;
						}
						& a {
							@media @pad {
								background-color: limegreen;
							}
							@media @mobile {
								background-color: limegreen;
								background-image: url(../images/click-to-call-left.png), url(../images/click-to-call-right.png);
								background-repeat: no-repeat;
								background-position: left center, right center;
								background-size: auto 100%;
							}
						}
					}
					&.online {
						right: 0;
						@media @mobile-p {
							top: 60px;
						}
					}
				}
			}
			& .common-article-content {
				background-color: white;
				padding-bottom: 0px;
				position: relative;
				//padding-top: 190px;
				padding-top: 450px;
				background:white;
				.shadow(0px 0px 8px 5px rgba(0,0,0,0.6));
				.transition(padding-top 1s ease 0.5s);
				& .panel-group {
					& .panel {
						background:none;
						padding:0;
						&.active {
							& .panel-heading {
								& a {
									color: #fff;
									background: @red;
								}
							}
						}
						& .panel-heading {
							background: @blue;
							& a {
								color: #fff;
								&:hover {
									color: #fff;
									background: @red;
								}
							}
						}
						& .panel-body {

						}
					}
				}
				@media @desktop {
					padding-top: 400px;
				}
				@media @ipad {
					padding-top: 0px!important;
				}
				@media @pad {
					padding-top: 0px!important;
					.noshadow;
				}
				@media @mobile-p {
					padding-top: 0px!important;
					.noshadow;
				}
				& > .row {
					//margin-bottom: 75px;
					background: url(../images/moto-assistance-odiki-voitheia-motosykletes.jpg) center bottom no-repeat;
					background-size: 350px auto;
					padding-bottom: 300px;
					@media @desktop {
						background-size: 300px auto;
						padding-bottom: 235px;
					}
					@media @laptop {
						background-size: 220px auto;
						padding-bottom: 180px;
					}
					@media @ipad {
						background: none;
						padding-bottom: 80px;
					}
					@media @pad {
						background: none;
						padding-bottom: 80px;
					}
					@media @mobile-p {
						background: none;
						padding-bottom: 80px;
					}
				}
				&.ready {
					padding-top: 260px;
					& .guarantee img {
						top: -350px;
					}
				}
				& .guarantee {
					@media @ipad {
						text-align: center;
					}
					@media @pad {
						text-align: center;
					}
					@media @mobile {
						display: none;
					}
					& img {
						position: absolute;
						width: 420px;
						height: auto;
						left: 50%;
						margin-left: -210px;
						//top: -350px;
						.transition(top 1s ease 0.5s);
						z-index: 99;
						top: -300px;
						@media @desktop {
							width: 350px;
							margin-left: -175px;
						}
						@media @laptop {
							width: 270px;
							margin-left: -135px;
						}
						@media @ipad {
							position: inherit;
							width: 320px;
							margin-left: 0;
							margin-top: -100px;
						}
						@media @pad {
							position: inherit;
							width: 250px;
							margin-left: 0;
							margin-top: 15px;
						}
					}
					& .title {
						.bold(22px,17px,3px);
						color: @blue;
						text-align: center;
						margin-top: -70px;
						margin-bottom: 55px;
						@media @desktop {
							margin-top: -113px;
							.bold(18px,12px,1px);
						}
						@media @laptop {
							margin-top: -168px;
							.bold(16px,12px,1px);
						}
						@media @ipad {
							margin-top: 0;
							margin-bottom: 30px;
						}
						@media @pad {
							margin-top: 0;
							margin-bottom: 40px;
						}
					}
				}
				&:hover {
					& .edit-article-button {
						opacity: 1;
					}
				}
				& h1 {
					color: @red;
					text-transform: none;
					.title(45px,45px,3px);
					margin-top: 0;
					margin-bottom: 11px;
					@media @desktop {
						.title(38px,38px,2px);
						margin-top: -13px;
					}
					@media @laptop {
						.title(32px,38px,1px);
						margin-top: -20px;
					}
					@media @ipad {
						.title(40px,40px,5px);
						margin-top: 0;
					}
					@media @pad {
						.title(45px,50px,5px);
						margin-top: 0;
						margin-bottom: 20px;
					}
					@media @mobile-p {
						.title(40px,50px,5px);
						margin-top: 0;
						margin-bottom: 20px;
						background: @blue;
						color: white;
						.radius(20px);
						margin-top: 20px;
						padding: 10px 0 15px;
					}
					@media @mobile-l {
						.title(40px,50px,5px);
						margin-top: 50px;
					}
				}
				& h1 + h2 {
					margin-bottom: 30px;
					@media @desktop {
						margin-bottom: 25px;
					}
					@media @laptop {
						margin-bottom: 15px;
					}
				}
				& h2 {
					color: @blue;
					.bold(20px,20px,5px);
					margin-top: 0;
					margin-bottom: 20px;
					@media @desktop {
						.bold(19px,19px,4px);
						margin-bottom: 15px;
					}
					@media @laptop {
						.bold(17px,17px,3px);
					}
					@media @ipad {
						.bold(18px,18px,3px);
					}
					@media @pad {
						.bold(21px,21px,3px);
					}
					@media @mobile-p {
						.bold(21px,21px,3px);
						color: @red;
					}
				}
				& p + h2 {
					margin-top: 50px;
					@media @desktop {
						margin-top: 30px;
					}
				}
				& h3 {
					.h3;
				}
				& h4 {
					.h4;
				}
				& h5 {
					.h5;
				}
				& h6 {
					.h6;
				}
				& ul {
					.ul;
				}
				& p {
					.p;
					@media @desktop {
						.text(16px,21px,0.1px);
					}
					@media @laptop {
						.text(14px,18px,0px);
					}
					@media @ipad {
						.text(16px,19px,0.5px);
					}
					@media @pad {
						.text(17px,24px,0.5px);
					}
					@media @mobile {
						.text(17px,24px,0.5px);
					}
					& a {
						color: black;
						&:hover {
							text-decoration: underline;
						}
					}
					&.note {
						font-size: 13px;
					}
					& + h1 {
						@media @laptop {
							margin-top: 0px;
						}
					}
				}
				& .button {
					background: black;
					.title(17px,17px,2px);
					font-weight: bold;
					color: white;
					padding: 10px 20px;
					.radius(0);
					border: none;
				}
				& blockquote {
					margin: 0;
					padding: 25px 0;
					font-style: italic;
					border: none;
				}
				& div.share {
					text-align: center;
					margin-top: 25px;
					& span {
						.title(11px,30px,2px);
						color: dimgray;
						font-weight: bold;
						display: inline-block;
						vertical-align: middle;
					}
					& .fb-share-btn {
						vertical-align: middle;
						margin-left: 5px;
						display: inline-block;
						background-color: dimgray;
						background-image: url(../images/facebook-share-dpv.png);
						background-position: center;
						background-size: contain;
						position: relative;
						background-repeat: no-repeat;
						height: 30px;
						width: 30px;
						.transition(all 0.4s ease);
						.radius(15px);
						&:hover {
							background-color: #3b5998;
						}
					}
				}
			}
			& .call-online {
				/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#062656+0,f51119+25,f51119+75,062656+100 */
				background: rgb(6,38,86); /* Old browsers */
				background: -moz-linear-gradient(left, rgba(6,38,86,1) 0%, rgba(245,17,25,1) 25%, rgba(245,17,25,1) 75%, rgba(6,38,86,1) 100%); /* FF3.6-15 */
				background: -webkit-linear-gradient(left, rgba(6,38,86,1) 0%,rgba(245,17,25,1) 25%,rgba(245,17,25,1) 75%,rgba(6,38,86,1) 100%); /* Chrome10-25,Safari5.1-6 */
				background: linear-gradient(to right, rgba(6,38,86,1) 0%,rgba(245,17,25,1) 25%,rgba(245,17,25,1) 75%,rgba(6,38,86,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#062656', endColorstr='#062656',GradientType=1 ); /* IE6-9 */
				padding-top: 80px;
				box-shadow: inset 0px 11px 8px -10px rgba(0,0,0.6), inset 0px -11px 8px -10px rgba(0,0,0.6);
				padding-bottom: 65px;
				@media @desktop {
					padding-top: 60px;
				}
				@media @mobile {
					padding-left: 20px;
					padding-right: 20px;
				}
				& h3 {
					text-align: center;
					border: none;
					color: white;
					margin-top: 0;
					.bold(40px,40px,4px);
					text-shadow: 0px 0px 5px rgba(0,0,0,0.6), 0px 0px 10px rgba(0,0,0,0.8), 0px 0px 15px rgba(0,0,0,0.9);
					@media @desktop {
						.bold(37px,37px,3px);
					}
					@media @laptop {
						.bold(28px,28px,2px);
						margin-bottom: 20px;
					}
				}
			}
			& .rsform {
				margin-top: 50px;
				@media @desktop {
					margin-top: 30px;
				}
				& form {
					width: 600px;
					@media @desktop {
						width: 530px;
					}
					@media @laptop {
						width: 440px;
					}
					@media @mobile-p {
						width: 100%;
					}
					margin: 0 auto 0px;
					& .formRed {
						text-align: center;
						color: #FFEB3B;
						.bold(17px,19px,2px);
						text-shadow: 0px 0px 5px rgba(0,0,0,0.6), 0px 0px 10px rgba(0,0,0,0.8), 0px 0px 15px rgba(0,0,0,0.9);
					}
					& .rsform-block {
						@media @desktop {
							margin-bottom: 5px;
						}
						& .formValidation {
							display: block;
							text-align: center;
							& .formError {
								color: white;
								.bold(15px,15px,1px);
							}
						}
						& .formControlLabel {
							float: none;
							width: 100%;
							text-align: left;
							.title(15px,15px,2px);
							font-weight: bold;
							color: black;
							margin-bottom: 15px;
							text-align: center;
							@media @desktop {
								.bold(13px,13px,2px);
								margin-bottom: 10px;
							}
							@media @laptop {
								.bold(12px,12px,1px);
								margin-bottom: 7px;
							}
							& strong.formRequired {
								margin-left: 3px;
								color: white;
							}
						}
						& .formControls {
							margin: 0;
							width: 100%;
							& input {
								-webkit-box-sizing: border-box;
								-moz-box-sizing: border-box;
								box-sizing: border-box;
								width: 100%;
								.text(15px,15px,0px);
								.radius(0);
								height: auto;
								padding: 10px;
								border: 1px solid black;
								.transition;
								&:focus {
									.radius(15px);
									padding: 15px;
									.translate(0,-5px,0);
								}
								@media @desktop {
									.text(14px,15px,0px);
									padding: 8px;
								}
							}
							& textarea {
								-webkit-box-sizing: border-box;
								-moz-box-sizing: border-box;
								box-sizing: border-box;
								width: 100%;
								.title(15px,15px,1px);
								font-weight: bold;
								.radius(0);
								height: auto;
								padding: 10px;
								resize: none;
								height: 200px;
							}
						}
						&.rsform-block-human {
							text-align: center;
							& .formBody {
								display: inline-block;
							}
						}
						&.rsform-block-call {
							text-align: center;
							& .formControlLabel {
								display: none;
							}
							& button {
								display: inline-block;
								background: @blue;
								.title(17px,17px,2px);
								font-weight: bold;
								color: white;
								padding: 15px 20px;
								.radius(0);
								border: none;
								border-style: none;
								@media @desktop {
									.bold(14px,14px,2px);
									margin-top: 7px;
								}
							}
						}
					}
				}
			}
			& .mzparallax-background {
				@media @mobile {
					display: none;
				}
			}
			& .mzparallax-inner.services {
				min-height: 450px;
				@media @mobile {
					background: @blue;
				}
				& .row {
					max-width: 1200px;
					@media @laptop {
						max-width: 800px;
					}
					& h1 {
						.bold(55px,55px,6px);
						color: white;
						text-shadow: 0px 0px 5px rgba(0,0,0,0.6), 0px 0px 10px rgba(0,0,0,0.8), 0px 0px 15px rgba(0,0,0,0.9);
						margin-top: 65px;
						margin-bottom: 40px;
						@media @desktop {
							.bold(37px,37px,3px);
						}
						@media @laptop {
							.bold(28px,28px,2px);
							margin-top: 40px;
							margin-bottom: 20px;
						}
					}
					& ul {
						padding-bottom: 60px;
						@media @laptop {
							padding-bottom: 40px;
						}
						& li.service {
							padding: 0 10px 10px;
							margin-bottom: 20px;
							@media @laptop {
								width: 25%;
								margin-bottom: 10px;
							}
							@media @ipad {
								width: 25%;
								margin-bottom: 10px;
							}
							&:nth-of-type(6n+1) {
								@media @laptop {
									clear: none;
								}
								@media @ipad {
									clear: none;
								}
							}
							@media @pad {
								width: 33.333%;
							}
							@media @mobile-p {
								width: 100%;
							}
							@media @mobile-l {
								width: 50%;
								clear: none!important;
							}
							& .inner {
								background: white;
								.shadow;
								.radius(20px);
								text-align: center;
								min-height: 270px;
								padding: 0 10px;
								@media @desktop {
									min-height: 245px;
								}
								@media @laptop {
									min-height: 155px;
								}
								@media @ipad {
									min-height: 200px;
								}
								@media @pad {
									min-height: 260px;
								}
								@media @mobile-l {
									min-height: 210px;
								}
								& img {
									width: 80%;
									height: auto;
									@media @desktop {
										width: 70%;
									}
									@media @laptop {
										width: 50%;
									}
									@media @ipad {
										width: 60%;
									}
									@media @pad {
										width: 80%;
									}
									@media @mobile-p {
										width: auto;
										height: 125px;
										float: left;
										margin-top: 15px;
									}
									@media @mobile-l {
										width: 50%;
									}
								}
								& p {
									.bold(14px,18px,1px);
									color: @blue;
									margin: 0;
									@media @desktop {
										.bold(13px,17px,0px);
									}
									@media @laptop {
										.bold(11px,14px,0px);
									}
									@media @ipad {
										.bold(14px,16px,0px);
										margin-top: -8px;
									}
									@media @pad {
										.bold(15px,18px,0px);
									}
									@media @mobile-p {
										text-align: left;
										.bold(15px,18px,0px);
										padding-top: 42px;
										padding-right: 20px;
									}
								}
							}
							&:before {
								display: none;
							}
						}
					}
				}
			}
			& #gallery {
				/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f51119+0,ffffff+30,ffffff+70,062656+100 */
				background: rgb(245,17,25); /* Old browsers */
				background: -moz-linear-gradient(-45deg, rgba(245,17,25,1) 0%, rgba(255,255,255,1) 30%, rgba(255,255,255,1) 70%, rgba(6,38,86,1) 100%); /* FF3.6-15 */
				background: -webkit-linear-gradient(-45deg, rgba(245,17,25,1) 0%,rgba(255,255,255,1) 30%,rgba(255,255,255,1) 70%,rgba(6,38,86,1) 100%); /* Chrome10-25,Safari5.1-6 */
				background: linear-gradient(135deg, rgba(245,17,25,1) 0%,rgba(255,255,255,1) 30%,rgba(255,255,255,1) 70%,rgba(6,38,86,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f51119', endColorstr='#062656',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
				& > .row {
					max-width: 1100px;
					@media @desktop {
						max-width: 900px;
					}
					@media @laptop {
						max-width: 800px;
					}
				}
				& h1 {
					color: @red;
					text-transform: none;
					.title(45px,45px,3px);
					margin-top: 55px;
					margin-bottom: 25px;
					@media @desktop {
						.title(38px,38px,2px);
						margin-top: 45px;
						margin-bottom: 20px;
					}
					@media @laptop {
						.title(30px,30px,1px);
						margin-top: 35px;
						margin-bottom: 15px;
					}
					@media @mobile {
						color: white;
						.title(30px,30px,1px);
					}
				}
				& ul {
					margin-bottom: 60px;
				}
				& li.gallery-image {
					height: 200px;
					@media @laptop {
						height: 135px;
					}
					@media @mobile-p {
						height: 220px;
					}
					@media @mobile-l {
						width: 50%;
						clear: none;
						height: 200px;
					}
				}
			}
			& > div.row {
				position: relative;
			}
			& #contact {
				background: url(../images/contact-background.jpg) center center no-repeat;
				background-size: cover;
				padding-top: 80px;
				box-shadow: inset 0px 11px 8px -10px rgba(0,0,0.6), inset 0px -11px 8px -10px rgba(0,0,0.6);
				padding-bottom: 65px;
				@media @desktop {
					padding-top: 45px;
				}
				@media @mobile-p {
					padding-left: 20px;
					padding-right: 20px;
				}
				& h1 {
					text-align: center;
					border: none;
					color: white;
					margin-top: 0;
					.bold(40px,40px,4px);
					text-shadow: 0px 0px 5px rgba(0,0,0,0.6), 0px 0px 10px rgba(0,0,0,0.8), 0px 0px 15px rgba(0,0,0,0.9);
					@media @desktop {
						.bold(34px,34px,2px);
					}
					@media @laptop {
						.bold(28px,28px,2px);
						margin-bottom: 20px;
					}
				}
				& .formResponsive {
					width: 600px;
					margin: 0 auto 0px;
					@media @desktop {
						width: 530px;
					}
					@media @laptop {
						width: 440px;
					}
					@media @mobile-p {
						width: 100%;
					}
					& .formRed {
						text-align: center;
						color: #FFEB3B;
						.bold(17px,19px,2px);
						text-shadow: 0px 0px 5px rgba(0,0,0,0.6), 0px 0px 10px rgba(0,0,0,0.8), 0px 0px 15px rgba(0,0,0,0.9);
					}
					& .rsform-block {
						@media @desktop {
							margin-bottom: 5px;
						}
						& .formValidation {
							display: block;
							text-align: center;
							& .formError {
								color: white;
								.bold(15px,15px,1px);
							}
						}
						& .formControlLabel {
							float: none;
							width: 100%;
							text-align: left;
							.title(15px,15px,2px);
							font-weight: bold;
							color: white;
							margin-bottom: 15px;
							text-align: center;
							text-shadow: 0px 0px 5px rgba(0,0,0,0.6), 0px 0px 10px rgba(0,0,0,0.8), 0px 0px 15px rgba(0,0,0,0.9);
							& strong.formRequired {
								margin-left: 3px;
								color: @red;
							}
							@media @desktop {
								.bold(13px,13px,2px);
								margin-bottom: 10px;
							}
						}
						& .formControls {
							margin: 0;
							width: 100%;
							& input {
								-webkit-box-sizing: border-box;
								-moz-box-sizing: border-box;
								box-sizing: border-box;
								width: 100%;
								.title(15px,15px,1px);
								.radius(0);
								height: auto;
								padding: 10px;
								border: 1px solid black;
								.transition;
								@media @desktop {
									.text(14px,15px,0px);
									padding: 8px;
								}
								&:focus {
									.radius(15px);
									padding: 15px;
									.translate(0,-5px,0);
								}
							}
							& textarea {
								-webkit-box-sizing: border-box;
								-moz-box-sizing: border-box;
								box-sizing: border-box;
								width: 100%;
								.text(15px,15px,1px);
								.radius(0);
								height: auto;
								padding: 10px;
								resize: none;
								height: 200px;
								border: 1px solid black;
								.transition;
								@media @desktop {
									.text(14px,15px,0px);
								}
								&:focus {
									.radius(15px);
									padding: 15px;
									.translate(0,-5px,0);
								}
							}
						}
						&.rsform-block-human {
							text-align: center;
							& .formBody {
								display: inline-block;
							}
						}
						&.rsform-block-send {
							text-align: center;
							& .formControlLabel {
								display: none;
							}
							& button {
								display: inline-block;
								background: @red;
								.title(17px,17px,2px);
								font-weight: bold;
								color: white;
								padding: 15px 20px;
								.radius(0);
								border: thin solid @blue;
							}
						}
					}
				}
			}
		}

		& a.motomail {
			display: block;
			width: 100%;
			text-align: center;
			color: white;
			font-size: 20px;
			margin-top: 20px;
		}

		// ARTICLE MANAGER
		& .f2c-articlemanager {
			& a.exit-link {
				display: block;
				margin: 0 auto;
				width: 370px;
				text-align: center;
				background: #afafaf;
				padding: 10px;
				color: #fff;
				margin-bottom: 40px;
				margin-top: -30px;
				.transition;
				&:hover {
					background: @main;
				}
			}
		}

	}
	& .footer {
		position: absolute;
		bottom: 0;
		width: 100%;
		//padding-bottom: 20px;
		text-align: center;
		background: white;
		background: none;
		& .perma {
			height: 230px;
			background: @red;
			& .bottom-bar {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				background: white;
				padding: 20px 0 20px;
				z-index: 10013;
				.shadow;
				& .credits {
					text-align: right;
					.title(13px,13px,2px);
					color: @darkgrey;
					font-weight: bold;
					padding-top: 20px;
					text-align: center;
				}
				& .design-credits {
					text-align: center;
					.title(10px,13px,2px);
					color: @darkgrey;
					font-weight: bold;
					padding-top: 15px;
					text-transform: uppercase;
					& a {
						color: @darkgrey;
						&:hover {
							text-decoration: underline;
						}
					}
				}
			}
			& > .wrap {
				overflow: hidden;
			}
		}
		& div.login-button, & div.logout-button {
			width: 20px;
			height: 20px;
			background-position: center;
			background-repeat: no-repeat;
			background-size: contain;
			.transition;
			opacity: 0.5;
			cursor: pointer;
			.translate(0,10px,0);
			position: absolute;
			left: 50%;
			bottom: 78px;
			z-index: 10014;
			&:hover {
				opacity: 1;
			}
			.no-mobile;
		}
		& div.login-button {
			background-image: url(../images/lock.png);
		}
		& div.logout-button {
			background-image: url(../images/unlock.png);
		}
	}
	& .appL {
		.appearL;
	}
	& .appR {
		.appearR;
	}
	& .MZhero {
		@media @ipad {
			height: 0!important;
		}
		@media @pad {
			height: 0!important;
		}
		& .arrow {
			//width: 50%;
			height: 100%;
			.radius(0);
			//display: none;
			top: 0;
			background: none;
			&:before, &:after {
				display: none;
			}
			&.left {
				left: 0!important;
				z-index: 101;
				cursor: url(../images/hero-left.png), auto;
			}
			&.right {
				right: 0!important;
				z-index: 102;
				cursor: url(../images/hero-right.png), auto;
			}
		}
		& .hero-item {
			& .details {
				position: absolute;
				bottom: 26%;
				width: 600px;
				background: url(rgba.php?r=0&g=0&b=0&a=70) repeat;
				background: rgba(6, 38, 86, 0.8);
				left: calc(~"50% - 300px");
				padding: 40px 30px 130px;
				.radius(30px);
				.transition(all 0.5s ease);
				opacity: 0;
				.origin(50%,50%);
				.scale(0);
				z-index: 150;
				@media @desktop {
					bottom: 30%;
					width: 400px;
					left: calc(~"50% - 200px");
					padding: 30px 20px 85px;
					.radius(30px);
				}
				@media @laptop {
					bottom: 27%;
					width: 350px;
					left: calc(~"50% - 175px");
					padding: 20px 20px 65px;
					.radius(20px);
				}
				& h1 {
					.bold(40px,40px,2px)!important;
					color: @red;
					margin: 20px 0 30px 0!important;
					background: white;
					.shadow;
					.radius(30px);
					padding: 8px 0!important;
					@media @desktop {
						.bold(23px,20px,2px)!important;
						margin: -7px 0 15px 0 !important;
					}
					@media @laptop {
						.bold(19px,20px,2px)!important;
						margin: -7px 0 15px 0 !important;
					}
				}
				& p {
					.title(17px,23px,1px);
					color: white;
					text-align: center;
					@media @desktop {
						.title(16px,21px,0px);
					}
					@media @laptop {
						.title(14px,19px,0px);
					}
					& a {
						.bold(40px,40px,2px);
						color: white;
						text-shadow: 0 0 5px #000;
						padding: 20px 0 100px 0;
						background: url(../images/odiki-voitheia-24-wres.png) center bottom no-repeat;
						.transition;
						&:hover {
							color: @red;
							text-shadow: 0 0 5px #fff;
						}
						@media @desktop {
							.bold(30px,20px,1px);
							padding: 20px 0 80px 0;
							background-size: 80px auto;
						}
						@media @laptop {
							.bold(25px,20px,1px);
							padding: 0 0 60px 0;
							background-size: 60px auto;
						}
					}
				}
			}
			&.active {
				& .details {
					.scale(1);
					opacity: 1;
				}
			}
		}
		& .toarticle {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 64px;
			height: 64px;
			.origin(50%, 50%);
			margin-left: -32px;
			margin-top: -32px;
			background: none;
			background: url(../images/anchor.png) center center no-repeat;
			background-size: contain;
			cursor: pointer;
			z-index: 100;
			opacity: 0.5;
			.transition;
			&:hover {
				opacity: 1;
			}
			display: none;
		}
		& .blurred {
			-webkit-filter: blur(5px);
			-moz-filter: blur(5px);
			-ms-filter: blur(5px);
			-o-filter: blur(5px);
			/* FF doesn't support blur filter, but SVG */
			filter: url("data:image/svg+xml;utf8,<svg height='0' xmlns='http://www.w3.org/2000/svg'><filter id='svgBlur' x='-5%' y='-5%' width='110%' height='110%'><feGaussianBlur in='SourceGraphic' stdDeviation='5'/></filter></svg>#svgBlur");
			//filter: progid: DXImageTransform.Microsoft.Blur(PixelRadius = '5');
			filter: blur(5px);
			& .details {
				display: none;
			}
		}
	}
	& .scrollToTop {
		position: fixed;
		bottom: -50px;
		left: 0;
		width: 50px;
		height: 50px;
		.transition(all 0.4s ease);
		cursor: pointer;
		background: @blue;
		z-index: 1000000;
		&.active {
			bottom: 0;
		}
		&:hover {
			background: @red;
			&:before, &:after {
				background: black;
			}
		}
		&:before, &:after {
			content: '';
			position: absolute;
			top: 22px;
			width: 10px;
			background: white;
			height: 2px;
			.rotate(-45deg);
			.transition(all 0.4s ease);
		}
		&:before {
			right: 50%;
			.origin(100%,50%);
		}
		&:after {
			left: 50%;
			.rotate(45deg);
			.origin(0%,50%);
		}
	}

	// EDITOR ELEMENTS
	& .admin-editor-blocker {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		.alpha(10,0,0,0);
		z-index: 9999998;
		&:after {
			content: 'LOADING';
			position: absolute;
			top: 50%;
			left: 50%;
			text-align: center;
			width: 130px;
			height: 26px;
			.font(10px);
			background: black;
			color: white;
			margin-top: -20px;
			margin-left: -65px;
			line-height: 26px;
			letter-spacing: 6px;
			.radius(13px);
			.transition(all 1s ease);
			opacity: 1;
		}
		&.active {
			&:after {
				opacity: 0;
			}
		}
		&.saving {
			.alpha(50,255,255,255);
			&:after {
				content:'SAVING';
			}
		}
	}
	& .admin-editor-container {
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		width: 0;
		overflow: hidden;
		z-index: 9999999;
		background: black;
		& iframe {
			width: 100%;
			height: 100%;
		}
	}

	& a.pinterest-image {
		display: inline-block;
		position: relative;
		cursor: url(../images/pinit.png), auto;
		&:after {
			content: '';
			width: 30px;
			height: 30px;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -15px;
			margin-left: -15px;
			background: url(../images/pinit.png) center center no-repeat;
			background-size: 100%;
			opacity: 0;
			.transition(all 0.5s ease);
		}
	}

	& .mzResponsive {
		opacity: 0;
		&:hover {
			opacity: 1;
		}
	}


	// LOGIN
	& div.login {
		position: fixed;
		top: 50%;
		left: 50%;
		.transition;
		background: white;
		.shadow;
		width: 250px;
		height: 250px;
		margin-top: -125px;
		margin-left: -125px;
		text-align: center;
		.transition(all 0.4s ease);
		opacity: 0;
		z-index: -1;
		.translate(0,-50px,0);
		&.active {
			z-index: 999999;
			.translate(0,0,0);
			opacity: 1;
		}
		& > div.moduletable {
			position: relative;
			width: 100%;
			height: 100%;
			padding: 25px 20px 10px;
			& .close-button {
				position: absolute;
				top: 10px;
				right: 10px;
				.circle(20px);
				background: black;
				cursor: pointer;
				&:before, &:after {
					content: '';
					background: white;
					width: 14px;
					height: 1px;
					position: absolute;
					left: 3px;
					top: 10px;
					.origin(50%, 50%);
					.rotate(45deg);
				}
				&:after {
					.rotate(-45deg);
				}
			}
			& h3 {
				margin: 0 0 20px;
				.bold(18px,18px,1px);
			}
			& input {
				text-align: center;
			}
			& button {
				background: @darkgrey;
				border: none;
				.transition;
				.bold(13px,13px,1px);
				margin: 5px 0 0;
				padding: 7px 15px;
				&:hover {
					background: black;
				}
			}
		}
		/*
		& .trigger {
			position: absolute;
			content: '';
			top: -40px;
			left: 20px;
			width: 40px;
			height: 28px;
			cursor: pointer;
			background: url(../images/login.png) center center no-repeat;
		}
		& .logout-button {
			position: absolute;
			content: '';
			top: -40px;
			left: 20px;
			width: 40px;
			height: 28px;
			cursor: pointer;
			background: url(../images/logout.png) center center no-repeat;
			border: 0;
		}
		& .expander {
			position: absolute;
			top: 0;
			right: 0;
			background: @red;
			.shadow;
			.transition(all 0.4s ease);
			border-bottom-left-radius: 10px;
			max-height: 0;
			overflow: hidden;
			padding: 0px;
			&.active {
				padding: 10px;
				max-height: 150px;
				& input {
					opacity: 1;
				}
				& button {
					opacity: 1;
				}
			}
			& input {
				.text(12px, 12px, 1px);
				height: auto;
				padding: 5px;
				margin-bottom: 8px;
				.transition(all 0.4s ease);
				opacity: 0;
			}
			& button {
				border: none;
				background: @black;
				color: @grey;
				.text(12px, 12px, 1px);
				padding: 10px;
				margin-bottom: 0;
				.radius(5px);
				.transition;
				.transition(all 0.4s ease);
				opacity: 0;
				&:hover {
					.shadow;
					.translate(-1px,-1px,0);
					color: white;
				}
			}
		}
		& h1 {
			display: none;
		}
		& #login-form {
			& ul {
				display: none;
			}
		}
		*/
	}

	// EDITOR
	&.editor {
		& .footer {
			display: none;
		}
		& .new-header {
			display: none;
		}
		& .header-back {
			display: none;
		}
		& div.parallax-window {
			display: none;
		}
		& #content {
			background: white;
			padding-bottom: 0!important;
		}
		& .parallax-mirror {
			display: none;
		}
	}
}

& .mzPopGallery {
	z-index: 10000000;
	& .title {
		display: none!important;
	}
}

.mzvideo(){
	& .video-thumb {
		overflow: hidden;
		cursor: pointer;
		display: none;
		& .preview-image {
			.cover;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			&:before {
				content: '';
				position: absolute;
				top: 50%;
				left: 50%;
				width: 50px;
				height: 40px;
				.radius(10px);
				background: black;
				opacity: 0.6;
				.transition;
				margin-top: -20px;
				margin-left: -25px;
			}
			&:after {
				content: '';
				position: absolute;
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 9px 0 9px 18px;
				border-color: transparent transparent transparent #ffffff;
				top: 50%;
				left: 50%;
				margin-top: -8px;
				margin-left: -7px;
			}
			&:hover {
				&:before {
					background: red;
					opacity: 1;
				}
			}
		}
		& .video-title {
			position: absolute;
			bottom: 0;
			opacity: 1;
			left: 0;
			width: 100%;
			background-color: @black;
			color: white;
			text-align: center;
			padding: 10px 10px;
			.text(12px, 16px, 1px);
		}
	}
}

.MZvideoblocker {
	position: absolute;
	z-index: 99999999;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	.alpha(20,0,0,0);
	& .video-modal {
		position: absolute;
		top: 50%;
		left: 50%;
		.shadow;
		background: black;
		& .close-button {
			position: absolute;
			top: -20px;
			right: -20px;
			.shadow;
			.modalClosebutton(40px, @mzgallery-close-background, @mzgallery-close-line-color, @mzgallery-close-hover-background, @mzgallery-close-hover-line-color);
		}
	}
}

.mz-contact-module {
	height: 550px;
	position: relative;
	& #map {
		height: 100%;
		@media @mobile {
			height: 300px;
		}
	}
	& a.click-to-call {
		background-color: #01a74a;
		color: white;
		text-align: center;
		.bold(25px,25px,1px);
		display: block;
		text-transform: uppercase;
		padding: 30px 10px;
	}
	& div.contact-details {
		background: rgba(0, 0, 0, 0.85);
		position: absolute;
		top: 365px;
		right: 40px;
		width: 250px;
		padding: 0px;
		text-align: center;
		z-index: 999999;
		& h2 {
			color: white!important;
			.title(17px,40px,1px)!important;
			background: black;
			margin-bottom: 8px!important;
		}
		& p {
			.title(13px,18px,1px)!important;
			color: white;
			margin-bottom: 0;
		}
		& a {
			.bold(13px,18px,1px)!important;
			.transition;
			color: white;
		}
		& .directions {
			margin-top: 15px;
			& h2 {
				margin-bottom: 0!important;
			}
			& input {
				.bold(14px);
			}
			& .mapbutton {
				border: none;
				.bold(13px, 13px, 3px);
				background: black;
				color: @lightgrey;
				padding: 8px 15px;
				cursor: pointer;
				.transition;
				margin-bottom: 10px;
				text-transform: uppercase;
				&:hover {
					color: white;
					.shadow;
					.translate(-1px, -1px,0);
				}
			}
		}
	}
}

// LAZY IMAGE BACKGROUND
& div.mzlazy {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}


// MIXIN FADE AND SLIDE FROM RIGHT

.fadeInFromRigt(@s:1s, @easing:'') {
	-webkit-animation: appL @s @easing; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: appL @s @easing; /* Firefox < 16 */
	-ms-animation: appL @s @easing; /* Internet Explorer */
	-o-animation: appL @s @easing; /* Opera < 12.1 */
	animation: appL @s @easing;
}

// animations
@keyframes appL {
	from { .translate(100px,0,0); opacity: 0;}
	to   { .translate(0,0,0); opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes appL {
	from { .translate(100px,0,0); opacity: 0;}
	to   { .translate(0,0,0); opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes appL {
	from { .translate(100px,0,0); opacity: 0;}
	to   { .translate(0,0,0); opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes appL {
	from { .translate(100px,0,0); opacity: 0;}
	to   { .translate(0,0,0); opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes appL {
	from { .translate(100px,0,0); opacity: 0;}
	to   { .translate(0,0,0); opacity: 1; }
}


/* LATEST ADMINISTRATOR NEEDED */

// ADMIN MENU
.adminmenu() {
	float: right;
	& ul {
		margin: 0;
		padding: 0;
		list-style: none;
		& li {
			width: 20px;
			height: 20px;
			overflow: hidden;
			display: inline-block;
			margin-right: 5px;
			& a {
				display: inline-block;
				color: transparent;
				width: 100%;
				height: 100%;
				background: @darkgrey;
				.radius(50%);
				.transition;
				position: relative;
				&:hover {
					background: black;
				}
				&:before, &:after {
					position: absolute;
					width: 50%;
					height: 2px;
					background: @white;
					top: 30%;
					left: 25%;
					content: '';
					.radius(2px);
				}
				&:after {
					top: 60%;
				}
			}
			&:first-child {
				& a {
					&:before, &:after {
						top: calc(~"50% - 1px");
						left: 25%;
						.origin(50%,50%);
					}
					&:after {
						.rotate(90deg);
					}
				}
			}
		}
	}
}

//EDIT ARTICLE BUTTON
.edit-article-button {
	position: absolute;
	width: 30px;
	height: 30px;
	.radius(15px);
	background-color: black;
	background-image: url(../images/edit-article.png);
	background-position: center;
	background-repeat: no-repeat;
	.transition;
	right: -35px;
	top: -42px;
	z-index: 999999999999999999;
	opacity: 0.1;
}

// FONT
.font(@size:17px, @weight:400, @line-height:@size) {
    .text(@size);
}

.text(@size:15px, @line-height:@size, @letter-spacing:0px) {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: @size;
    font-weight: 400;
    line-height: @line-height;
    letter-spacing: @letter-spacing;
    -moz-font-smoothing: none;
    -webkit-font-smoothing: antaliased;
    -webkit-font-smoothing: subpixel-antaliased;
}
.title(@size:15px, @line-height:@size, @letter-spacing:0px) {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: @size;
    font-weight: 300;
    line-height: @line-height;
    letter-spacing: @letter-spacing;
    -moz-font-smoothing: none;
    -webkit-font-smoothing: antaliased;
    -webkit-font-smoothing: subpixel-antaliased;
}
.bold(@size:15px, @line-height:@size, @letter-spacing:0px) {
    .title(@size, @line-height, @letter-spacing);
    font-weight: 900;
}

@red: #F51119;

// MIXINS
.clear {
	clear:both;
    height: 0;
}
.transition(@props: all 0.2s ease 0s) {
	-webkit-transition: @props;
	-moz-transition: @props;
	-ms-transition: @props;
	-o-transition: @props;
	transition: @props;
}
.rotate(@radius) {
	-moz-transform: rotate(@radius);
	-webkit-transform: rotate(@radius);
	-o-transform: rotate(@radius);
	-ms-transform: rotate(@radius);
	transform: rotate(@radius);
}
.scale(@factor, @y:@factor) {
	-moz-transform: scale(@factor, @y);
	-webkit-transform: scale(@factor, @y);
	-o-transform: scale(@factor, @y);
	-ms-transform: scale(@factor, @y);
	transform: scale(@factor, @y);
}
.cover() {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.shadow(@props: 1px 1px 5px 0px rgba(0,0,0,0.6)) {
    -moz-box-shadow:@props;
    -webkit-box-shadow: @props;
    box-shadow: @props;
}
.radius(@rad) {
	-webkit-border-radius: @rad;
	border-radius: @rad;
}
.roundbox(@topleft,@topright,@bottomright,@bottomleft) {
    -webkit-border-top-left-radius: @topleft;
    -webkit-border-top-right-radius: @topright;
    -webkit-border-bottom-right-radius: @bottomright;
    -webkit-border-bottom-left-radius: @bottomleft;

    -moz-border-radius-topleft: @topleft;
    -moz-border-radius-topright: @topright;
    -moz-border-radius-bottomright: @bottomright;
    -moz-border-radius-bottomleft: @bottomleft;

    border-top-left-radius: @topleft;
    border-top-right-radius: @topright;
    border-bottom-right-radius: @bottomright;
    border-bottom-left-radius: @bottomleft;
}
.alpha(@a:50, @r:255, @g:255, @b:255) {
	@ccc: "rgba.php?r=@{r}&g=@{g}&b=@{b}&a=@{a}";
	background: url(@ccc) repeat;
	background: rgba(@r,@g,@b,@a/100);
}
.translate(@x,@y,@z) {
    -ms-transform: translate(@x, @y);
    -webkit-transform: translate3d(@x, @y, @z);
    -moz-transform: translate3d(@x, @y, @z);
    -ms-transform: translate3d(@x, @y, @z);
    -o-transform: translate3d(@x, @y, @z);
    transform: translate3d(@x, @y, @z);
}
.circle(@size) {
    width:@size;
    height:@size;
    .radius(@size / 2);
}
.origin(@x,@y) {
    -ms-transform-origin: @x @y;
    -webkit-transform-origin: @x @y;
    transform-origin: @x @y;
}
.noselect() {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.appearL() {
    opacity: 0;
    .translate(-100px,0,0);
    .transition(all 0.5s ease);
    &.active {
        opacity: 1;
        .translate(0,0,0);
    }
}
.appearR() {
    opacity: 0;
    .translate(100px,0,0);
    .transition(all 0.5s ease);
    &.active {
        opacity: 1;
        .translate(0,0,0);
    }
}
.appearTloop(@counter) when (@counter > 0) {
    .appearTloop((@counter - 1));
    &:nth-child(@{counter}) {
        .transition(all 0.5s ease @counter * 0.1s);
    }
}
.appearT() {
    opacity: 0;
    .translate(0,-100px,0);
    .transition(all 0.5s ease);
    .appearTloop(50);
    &.active {
        opacity: 1;
        .translate(0,0,0);
    }
}
.fadeSerial() {
	.transition(all 0.5s ease);
	.appearTloop(100);
}
.noshadow() {
    -webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
.arrow-right(@width:20px, @height:20px, @color:black) {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: (@height/2 * 1px) 0 (@height/2 * 1px) (@width * 1px);
    border-color: transparent transparent transparent @color;
}
.arrow-left(@width:20px, @height:20px, @color:black) {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: (@height/2 * 1px) (@width * 1px) (@height/2 * 1px) 0;
    border-color: transparent @color transparent transparent;
}
.arrow-top(@width:20px, @height:20px, @color:black) {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 (@width/2 * 1px) (@height * 1px) (@width/2 * 1px);
    border-color: transparent transparent @color transparent;
}
.arrow-bottom(@width:20px, @height:20px, @color:black) {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: (@height * 1px) (@width/2 * 1px) 0 (@width/2 * 1px);
    border-color: @color transparent transparent transparent;
}

.no-mobile(){
    @media @ipad {
        display: none;
    }
    @media @pad {
        display: none;
    }
    @media @mobile {
        display: none;
    }
}

// STYLES
.h1() {
    text-align: center;
    .bold(30px, 40px, 3px);
    margin-top: 50px;
    margin-bottom: 35px;
    position: relative;
    text-transform: uppercase;
    padding-bottom: 7px;
    & + h2 {
        margin-top: -30px;
    }
}
.h2() {
    .title(22px, 28px, 0px);
    color: @darkgrey;
    text-align: center;
    margin-top: 0;
    margin-bottom: 30px;
    font-weight: bold;
}
.h3() {
    .bold(15px, 16px, 1px);
    color: @red;
    text-transform: uppercase;
    border-bottom: thin solid @grey;
    margin-top: 30px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    overflow: hidden;
}
.h4() {
    font-family: 'Satisfy', cursive;
    color: @black;
    font-size: 24px;
    line-height: 24px;
    text-align: center;
    margin-bottom: 45px;
}
.h5() {
	.h3;
	text-transform: none;
	text-align: center;
}
.h6() {
	.p;
}
.ul() {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-bottom: 20px;
    margin-top: 10px;
}
.li() {
    .p;
    margin-bottom: 5px;
}
.p() {
    .text(18px, 22px, 0.1px);
    color: #131313;
    margin-top: 0px;
    margin-bottom: 12px;
    text-align: center;
}

// PRELOADER
.preloader(@size:30px, @color:@lightgrey) {
    & .spinner {
      width: @size;
      height: @size;
      position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -15px;
        margin-left: -15px;
    }
    & .double-bounce1, .double-bounce2 {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: @color;
      opacity: 0.6;
      position: absolute;
      top: 0;
      left: 0;
      -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
      animation: sk-bounce 2.0s infinite ease-in-out;
    }
    & .double-bounce2 {
      -webkit-animation-delay: -1.0s;
      animation-delay: -1.0s;
    }
}
@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bounce {
  0%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

.vbox {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;

    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
}

// SIDE BUTTON
.sidebutton(@width:30px, @height:@width) {
    width: @width;
    height: @height;
    cursor: pointer;
    & .line {
        position: absolute;
        top: (@height/2 - 2) * 1px;
        left: 0;
        width: 100%;
        height: 4px;
        .radius(4px);
        background: @darkred;
        .transition;
        &.line1 {
            top: 0;
        }
        &.line2 {
            top: auto;
            bottom: 0;
        }
    }
    &:hover {
        & .line {
            &.line3 {
                width: 0;
            }
            &.line2 {
                width: 70%;
                .origin(0, 50%);
                .rotate(30deg);
                bottom: (@height/2 - 1) * 1px;
            }
            &.line1 {
                width: 70%;
                .origin(0, 50%);
                .rotate(-30deg);
                top: (@height/2 - 1) * 1px;
            }
        }
    }
    &.open {
        left: 15px;
        & .line {
            &.line3 {
                width: 0;
            }
            &.line2 {
                width: 100%;
                .origin(50%, 50%);
                .rotate(45deg);
                bottom: (@height/2 - 2) * 1px;
            }
            &.line1 {
                width: 100%;
                .origin(50%, 50%);
                .rotate(-45deg);
                top: (@height/2 - 2) * 1px;
            }
        }
    }
}

// BOX SHADOWS
.top-box-inset() {
    box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.4);
}
.left-box-inset() {
    box-shadow: inset 7px 0 9px -7px rgba(0,0,0,0.4);
}
.right-box-inset() {
    box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.4);
}
.bottom-box-inset() {
    box-shadow: inset 0 -7px 9px -7px rgba(0,0,0,0.4);
}

// GENERAL CLOSE BUTTON
.modalClosebutton(@size, @background-color, @color, @background-color-hover, @color-hover) {
    width: @size;
    height: @size;
    background: @background-color;
    .circle(@size);
    cursor: pointer;
    .transition(all 0.4s ease);
    &:before, &:after {
        content: '';
        position: absolute;
        width: 60%;
        height: 1px;
        background: @color;
        .origin(50%, 50%);
        top: 50%;
        left: 50%;
        margin-left: -30%;
        .rotate(45deg);
        .transition(all 0.4s ease);
    }
    &:after {
        .rotate(-45deg);
    }
    &:hover {
        background: @background-color-hover;
        &:before, &:after {
            background: @color-hover;
        }
    }
}

// PRODUCTS ANIMATIONS
@keyframes zoom-in {
  0% {
   transform: scale(.1);
  }
  100% {
    transform: none;
  }
}
.is-animated {
  animation: .6s zoom-in;
}