@desktop:   ~"only screen and (min-width: 1025px)";
@tablette:  ~"only screen and (min-width: 701px) and (max-width: 1024px)";
@mobile:    ~"only screen and (min-width: 1px) and (max-width: 700px)";


.transform(@args) { -webkit-transform: @args; -moz-transform: @args; -o-transform: @args; -ms-transform: @args; transform: @args; }
.transformorigin(@args) { -webkit-transform-origin: @args; -moz-transform-origin: @args; -o-transform-origin: @args; -ms-transform-origin: @args; transform-origin: @args; }
.transition(@args) { -webkit-transition: @args; -moz-transition: @args; -o-transition: @args; -ms-transition: @args; transition: @args; }
.opacity(@arg) { -webkit-opacity: @arg; -moz-opacity: @arg; -o-opacity: @arg; -ms-opacity: @arg; opacity: @arg; }
.rotate(@arg){ -ms-transform:rotate(@arg); -webkit-transform:rotate(@arg); transform:rotate(@arg);}
.boxsizing(@arg){ box-sizing:@arg; -moz-box-sizing: @arg; -webkit-box-sizing:@arg;}
.boxshadow(@arg){-moz-box-shadow: @arg; -ms-box-shadow:@arg; -webkit-box-shadow:@arg; box-shadow:@arg;}
.borderradius(@arg){-moz-border-radius: @arg; -ms-border-radius:@arg; -webkit-border-radius:@arg; border-radius:@arg;}
.animation (@args) {-webkit-animation: @args; -moz-animation: @args; -ms-animation: @args; animation: @args;}
.animation-delay (@args) {-webkit-animation-delay: @args; -moz-animation-delay: @args; -ms-animation-delay: @args; animation-delay: @args;}
.gradientAuto (@color: #000, @coef: 5%){
    background: lighten(@color, @coef); /* Old browsers */
    background: -moz-linear-gradient(top, lighten(@color, @coef) 0%, darken(@color, @coef) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,lighten(@color, @coef)), color-stop(100%,darken(@color, @coef))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, lighten(@color, @coef) 0%,darken(@color, @coef) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, lighten(@color, @coef) 0%,darken(@color, @coef) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, lighten(@color, @coef) 0%,darken(@color, @coef) 100%); /* IE10+ */
    background: linear-gradient(to bottom, lighten(@color, @coef) 0%,darken(@color, @coef) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten(@color, @coef)', endColorstr='darken(@color, @coef)',GradientType=0 ); /* IE6-9 */
}
.gradient3x(@start, @middle, @end){
	background: #dedede; /* Old browsers */
	background: -moz-linear-gradient(top,  @start 0%, @middle 25%, @middle 75%, @end 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@start), color-stop(25%,@middle), color-stop(75%,@middle), color-stop(100%,@end)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  @start 0%,@middle 25%,@middle 75%,@end 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  @start 0%,@middle 25%,@middle 75%,@end 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  @start 0%,@middle 25%,@middle 75%,@end 100%); /* IE10+ */
	background: linear-gradient(to bottom,  @start 0%,@middle 25%,@middle 75%,@end 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@start', endColorstr='@middle',GradientType=0 ); /* IE6-8 */
}
.bgpos(@x, @a, @y, @b) {
	@newx:@x * @a;
	@newy:@y * @b;
	background-position:@newx*1px @newy*1px ;
}
@media @desktop{
	
}
@media @tablette{
	
}


@-webkit-keyframes header-animation {.header-frames;}
@-moz-keyframes header-animation {.header-frames;}
@-ms-keyframes header-animation {.header-frames;}
@-o-keyframes header-animation {.header-frames;}
@keyframes header-animation {.header-frames;}


@-webkit-keyframes colonne-animation {.colonne-frames;}
@-moz-keyframes colonne-animation {.colonne-frames;}
@-ms-keyframes colonne-animation {.colonne-frames;}
@-o-keyframes colonne-animation {.colonne-frames;}
@keyframes colonne-animation {.colonne-frames;}


@-webkit-keyframes btn-animation {.btn-frames;}
@-moz-keyframes btn-animation {.btn-frames;}
@-ms-keyframes btn-animation {.btn-frames;}
@-o-keyframes btn-animation {.btn-frames;}
@keyframes btn-animation {.btn-frames;}


@-webkit-keyframes result-animation {.result-frames;}
@-moz-keyframes result-animation {.result-frames;}
@-ms-keyframes result-animation {.result-frames;}
@-o-keyframes result-animation {.result-frames;}
@keyframes result-animation {.result-frames;}


@-webkit-keyframes map-animation {.map-frames;}
@-moz-keyframes map-animation {.map-frames;}
@-ms-keyframes map-animation {.map-frames;}
@-o-keyframes map-animation {.map-frames;}
@keyframes map-animation {.map-frames;}


.header-frames () {
	from {.opacity(0);}
	to {.opacity(1);}
}

.cssanimations #ze-header{
	.opacity(0);
	.transition(all 1s ease);
}

.ready.cssanimations #ze-header{
	.opacity(1);
}

.colonne-frames () {
	from {.opacity(0);}
	to {.opacity(1);}
}

.cssanimations .content #step1{
	.opacity(0);
	top:200px;
	.transition(all .6s ease 1s);
}

.cssanimations .content #step2{
	.opacity(0);
	top:200px;
	.transition(all .6s ease 1.5s);
}

.cssanimations .content #step3{
	.opacity(0);
	top:200px;
	.transition(all .6s ease 2s);
}

.ready.cssanimations .content #step1,
.ready.cssanimations .content #step2,
.ready.cssanimations .content #step3{
	.opacity(1);
	top:0;
}


.btn-frames () {
	from {.opacity(0);}
	to {.opacity(1);}
}

.cssanimations #submit-form{
	.opacity(0);
	.transition(all 1s ease 2.5s);
}

.ready.cssanimations #submit-form{
	.opacity(1);
}

.result-frames () {
	from {.opacity(0); left:-300px;}
	to {.opacity(1); left:0;}
}

.cssanimations  #result{
	.opacity(0);
	left:-1000px;
	.transition(all .6s ease 0.5s);
}

.cssanimations .mapShow #result{
	.opacity(1);
	left:0;
}



.map-frames () {
	from {.opacity(0); right:-100px;}
	to {.opacity(1); right:0px;}
}