@import url("CopperplateThirtyTwoBC/stylesheet.css");
@import url("engravers_gothic_bt/stylesheet.css");
/* ==|== HelpLess - LESS Helpers Library (http://m6tt.github.com/HelpLess) = */
/*@import 'libs/helpless.0.0.3.less';*/

/* ==|== Import HTML5 ✰ Boilerplate LESS library =========================== */
/*@import 'libs/boilerplate.css';*/
/*@import 'elements.less';*/

/* Normalize */
/*#blr.normalize(#0abbcd, #555);*/

/* ==|== primary styles =====================================================
   Author: Rahul Vagadiya (theunexpected1)
  ========================================================================== */
@font-face {
	font-family: 'DearJoe';
	src: url('fonts/dearjoe/dj.ttf') format('truetype');
	src: url('fonts/dearjoe/dj.eot');
	src: url('fonts/dearjoe/dj.eot?#iefix') format('embedded-opentype'),
		url('fonts/dearjoe/dj.woff') format('woff'),
		url('fonts/dearjoe/dj.ttf') format('truetype'),
		url('fonts/dearjoe/dj.svg') format('svg');
}

.tdj{
	font-family: "DearJoe";
	font-size: 18px;
	font-weight: 100;
	color:#666;
	text-align:left;
}

.textevinst {
	font-size: 16px;
	font-weight: 300;
	color: #C86B26;
	text-transform: uppercase;
	margin: 20px 0 0px 0px;
	letter-spacing: 0.9px;
	}
	
.textevinstr {
	font-size: 16px;
	font-weight: 300;
	color: #72055E;
	text-transform: uppercase;
	margin: 20px 0 0px 0px;
	letter-spacing: 0.9px;
	}


.textevinsv, .textevinsvr {
	margin: 0px 0 0px 0px;
	font-size: 18px;
	font-weight: 300;
	font-variant: small-caps;
	line-height: 1.3em;
	letter-spacing:0.9px;
	text-align:left;
}











/* my reset */

.gradient(@color1, @color2){
  background: -moz-linear-gradient(top,  @color1 0%, @color2 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@color1), color-stop(100%,@color2)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  @color1 0%,@color2 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  @color1 0%,@color2 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  @color1 0%,@color2 100%); /* IE10+ */
  background: linear-gradient(to bottom,  @color1 0%,@color2 100%); /* W3C */
  
}

.rounded(@radius: 2px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 
}


.transitioner(@params){
  transition:@params;
  -moz-transition:@params; /* Firefox 4 */
  -webkit-transition:@params; /* Safari and Chrome */
  -o-transition:color @params; /* Opera */
}


.ellipsify(@height){
  overflow: hidden;
  o-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;  
  text-overflow: ellipsis;
  white-space: nowrap;
  height: @height;
}

.shadowMe(@params){
  box-shadow: @params;
  -webkit-box-shadow: @params;
  -moz-box-shadow: @params;
  -o-box-shadow: @params;
  
}


.borderRadiusMe(@params){
  border-radius: @params;
  -webkit-border-radius: @params;
  -moz-border-radius: @params;
  -o-border-radius: @params;
}

.flipMe{
   -moz-transform: scaleX(-1);
   -o-transform: scaleX(-1);
   -webkit-transform: scaleX(-1);
   transform: scaleX(-1);
   filter: FlipH;
   -ms-filter: "FlipH";
}











@red :#e51400;
@blue: #369;
@yellow: #E0931B;
@green: #689913;
@carrotOrange: #bc3f16;
@purple: #6426BC;
@pink: #BC5D8E;
@brown: #72411E;
@beige: #A7A797;
@maroon: #800000;


/*
use predefined colors from above, or you can even use urs like this:
@themeColor: #f0f0f0;
*/

@themeColor: @blue;


@bgColor: #f8f8f8;
@textColor :#222222;
@inputBorderColor: #c3c3c3;

@bgColorReverse: #000;
@textColorReverse: #fff;

@h2BgColor: #369;

@inputBgColor: #fff;

/*general css */

::selection
{
background-color: @themeColor;
color:@textColorReverse;
}
::-moz-selection
{
background-color: @themeColor;
color:@textColorReverse;
}


.left{
   float: left;
}
.right{
   float: right;
}




h1,h2,h3,h4,h5,h6,ul,li,p{
  margin: 0;
  padding: 0;
}

ul, li{
  list-style: none;
}

a, a:active, a:visited, a:focus, a:hover{
  text-decoration: none;
  color: @textColor;
  /*color: @textColor;*/
}


body, .page, .ui-overlay-c{
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 14px;
	font-weight: normal;
	margin: 0 auto;
   /*
   background: @bgColorReverse;
   color: @textColorReverse;
   */
	background-image: url(../images/papier.png);
}
h1{
   
   font-size: 27.5px;
   font-weight: 200;
   margin-bottom: 10px;
   text-align: left;
   a{
      font-size: 27.5px;
      font-weight: 200;
      &.back img{
         width: 23px;
      }
   }
}

   a.next{
      img{
         width: 23px;
      }
   }
   
h2{
   background-color: @h2BgColor;
   line-height: 30px;
   font-size: 19px;
   font-weight: 200;

   position: absolute;
   left: 0;
   width: 100%;
   height: 30px;
   /*
   padding-left: 13.5%;
   margin-left: -13.5%;
   display: inline;
   */
}
span.h2{
   position: relative;
   display: block;
   line-height: 30px;
   font-size: 19px;
   color: @textColorReverse;
   font-weight: 200;
   margin-bottom: 14px;
}

h3{
   font-size: 18px;
   font-weight: 200;
   max-height: 43px;
   padding-bottom: 4px;
   overflow: hidden;
}


h4{
   color: @themeColor;
   font-size: 17px;
   font-weight: 200;
   margin-bottom: 14px;
   a{
      color: @themeColor !important;
   }
}

a1{
	font-family: "CopperplateThirtyTwoBC";
	font-size: 26px;
	color: #C86B26;
	margin: 0 0 0 0;
	line-height:15px;
}

a2{
	font-family: "Engravers gothic bt";
	font-size: 20px;
	color:#666;
	line-height:25px;
}

a3{
	font-family: "CopperplateThirtyTwoBC";
	font-size: 24px;
	color:#C86B26;
	line-height:10px;
}


p{
   margin-bottom: 14px;
}

.ui-loader {
   opacity: 0.4 !important;
   filter: alpha(opacity=40) !important;
   .ui-icon{
      background-color: transparent !important;
   }
   
}
#twitter_update_list{
   li{
      .rounded(5px);
      margin: 0 0 10px;
      padding: 7px;
      background: #fff;

      span{
         color: @textColor;         
         a{
            display: inline !important;
            margin: 0;
            float: none;
         }
      }
      a{
         color: @themeColor;
         display: block;
         margin-top: 5px;
         .transitioner(all 0.2s);
         &:hover{
            color: darken(@themeColor, 10%);
         }
      }
   }
}

.ui-mobile, .ui-mobile .ui-page{
   min-height: 0;
   
}

.padpage{
   padding-left: 10.5%;
   padding-right: 10.5%;
   
   &.padtop{
      padding-top: 10.5%;
	     padding-right: 17.5%;

   }
   &.padbottom{
      padding-bottom: 10.5%;
   }
}

.successMessage{
   display: none;
   background: lighten(@themeColor, 15%);
    color: white;
    padding: 5px;
    margin-bottom: 20px;
    p{
        margin: 0;
    }
}


::-webkit-input-placeholder  { color:lighten(@themeColor, 35%); }
input:-moz-placeholder { color:lighten(@themeColor, 35%); }


.invalid{
   background-color: #fff !important;
   border-color: @themeColor !important;
}

.textbox, .textarea{
   font-size: 12px;
   line-height: 26px;
   background: @inputBgColor;
   border-width: 0 1px 1px 0;
   border-style: solid;
   border-color: #DADADA;
   color: @themeColor;
   width: 100%;
   padding: 0 5px;
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   .rounded(0);
}

.button {
   background: @themeColor;
   padding: 0 10px;
   line-height: 26px;
   width: 100%;
   &.inline{
      width: auto;
   }
   font-size: 12px;
   border: 0;
   color: @inputBgColor;
   font-weight: 200;
   .transitioner(all 0.4s);
   &:hover{
      background: lighten(@themeColor, 10%);
   }
   .rounded(0);
}

form li{
   margin-bottom: 10px;
}

.innerPage{
   color: @textColor;
   text-align: justify;
   font-weight: 200;
   
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   min-height: 100% !important;
   .topGrahic{
      position: absolute;
      width: 60%;
      height: 4px;
      background: @themeColor;
      top: 0;
      left: 0;
   }
   
   .menuButton{
      position: absolute;
      display: block;
      right: 15px;
      top: 15px;
      &:hover img{
         transform: rotate(90deg);
         -webkit-transform: rotate(90deg);
         -moz-transform: rotate(90deg);
         -o-transform: rotate(90deg);
      }
      
      img{
         .transitioner(all 0.2s);
         width: 15px;
      }
   }

   .menuBack{
      position: absolute;
      display: block;
      right: 15px;
      top: 15px;
      &:hover img{
         transform: ;
         -webkit-transform: ;
         -moz-transform: ;
         -o-transform: ;
      }
      
      img{
         .transitioner(all 0.2s);
         width: 40px;
      }
   }
 
  .menuBack2{
      display: block;
      &:hover img{
         transform: ;
         -webkit-transform: ;
         -moz-transform: ;
         -o-transform: ;
      }
      
      img{
         .transitioner(all 0.2s);
         width: 40px;
      }
   }

   .sliderContainer{
      
   }
   
   .flexslider{
      
      max-height: 200px;
      margin-bottom: 14px;
      overflow: hidden;
      .shadowMe(0 0 0 0);
      
      .flex-viewport{
         overflow: visible !important;
      }
      li{
         /*margin: 0 0 0 1%;*/
         text-align: left;
         box-sizing: border-box;
         -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
         
      }
      img{
         width: 100%;
      }
   }
   
   .footer{
      margin-top: 25px;
      .social{
         box-sizing: border-box;
         -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
         
         a{
            display: block;
            margin-right: 5px;
            float: left;
            &:last-child{
               margin-right: 0;
            }
            img{
            }
         }
         /*end a*/
      }
      /*end social*/
      
      .copyright{
         color: @themeColor;
         font-size: 12px;
         box-sizing: border-box;
         -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
         width: 60%;
         line-height: 24px;   
      }
   }
   /*end footer*/
   
}








.blog{
   margin-top: 20px;
   .head{
      .image{
         box-sizing: border-box;
         -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
         -0-box-sizing: border-box;
         
         width: 25%;
         margin-right: 4%;
         text-align: left;
         display: block;
         max-height: 150px;
         
         &.icon{
            text-align: center;
            background: @themeColor;
            padding: 2%;
         }
         img{
            max-width: 100%;
         }
         
      }
      /*end image*/
      .date{
         /*position: absolute;*/
         /*bottom: 0;*/
      }
      /*end date*/

   }
   /*end head*/
}



.blogDetail{
   .head{
      .image{
         box-sizing: border-box;
         -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
         -0-box-sizing: border-box;
         width: 100%;
         text-align: center;
         display: block;
         max-height: 150px;
         &.icon{
            padding: 2%;
            background: @themeColor;
         }
         img{
            width: 100%;
         }
         
      }
      /*end image*/
   }
   /*end head*/
}

.blogPost{
   margin-bottom: 20px;
   padding-bottom: 4%;
   .head{
      overflow: hidden;
      position: relative;
      margin-bottom: 2%;
      
      .title{
         box-sizing: border-box;
         -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
         -0-box-sizing: border-box;
         width: 71%;
         
         h3{
            font-size: 18px;
            font-weight: 200;
            max-height: 43px;
            padding-bottom: 4px;
            overflow: hidden;
         }
      }
      
      .date{
         font-size: 85%;
         color: @themeColor;
         margin-bottom: 14px;
      }
      
      
      /* comment bubble */
      .comments{
         position: relative;
         width: 28px;
         height: 25px;
         img{
            position: absolute;
            width: 28px;
            z-index: 1;
         }
         .count{
            text-align: center;
            display: block;
            width: 23px;
            left: 4px;
            position: absolute;
            z-index: 2;
            font-size: 15px;
            line-height: 25px;
            font-weight: 200;
            color: @themeColor;
            border-bottom: 1px solid @themeColor;
         }
      }
      
      
      
   }
   
   .description{
      margin-bottom: 10px;
   }
   
   .foot{
      font-size: 85%;
      padding-bottom: 15px;
      border-bottom: 1px solid @themeColor;
      .author{
         color:@themeColor;
      }
      .category{
         background: @themeColor;
         color: @textColorReverse;
         padding: 2px;
      }
   }
   
   
      
      
   /*comments list*/
   .comments-list{
      margin-top: 10px;
      margin-bottom: 15px;
      padding-bottom: 15px;
      border-bottom: 1px solid @themeColor;
      
      ul{
         margin-bottom: 30px;
         li{
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px dashed @themeColor;
            &:last-child{
               border-bottom: 0;
               padding-bottom: 0;
            }
            .author{
               font-size: 14px;
               font-weight: 400;
            }
            .date{
               font-size: 11px;
               font-weight: 400;
               line-height: 20px;
            }
            .comment{
               font-size: 13px;
               font-weight: 200;
               margin-top: 5px;
            }
         }
      }
      /*end ul*/
      
   }
   
   .postComment{
      padding-bottom: 10px;
      /*border-bottom: 1px solid @themeColor;*/
   }
   
}
/*end blog post*/



.pagination{
   margin: 0 0 30px;
   padding-bottom: 30px;
   border-bottom: 1px solid @themeColor;
   .page-description{
      color: @themeColor;
      line-height: 21px;
   }
   ul li{
      float: left;
      margin-right: 14px;
      &:last-child{
         margin-right: 0;
      }
      a{
         background: @themeColor;
         display: block;
         width: 21px;
         color: @textColorReverse;
         font-size: 15px;
         font-weight: 200;
         text-align: center;
         line-height: 21px;
         .transitioner(all 0.4s);
         &:hover{
            background: lighten(@themeColor, 10%);
         }
         &.next{
            /*background-color: transparent;*/
            img{
               height: 16px;
               width: auto;
               
            }
         }
         
         &.active{
            background-color: darken(@themeColor, 10%);
         }
      }
   }
}












.positions2{
   li{
	  padding-top: 5px;
      margin-bottom: 5px;
      padding-bottom: 5px;
      border-bottom: 1px dashed @themeColor;
      
      li{
         border: 0;
         padding-bottom: 0;
         margin-bottom: 0;
         padding: 5px 0 0 0;
         list-style-position: inside;
         margin: 0;
         list-style-type: square;
      }
      
      .title{
         color: @themeColor;
         font-size: 15px;
         font-weight: 400;
         padding-bottom: 10px;
      }
      .description{
         padding-bottom: 10px;
      }
      .apply,
      .recommend{
         .transitioner(all 0.2s);
         &:hover{
            background: lighten(@themeColor, 5%);
         }
      }
      .apply{
         background: @themeColor;
         color: @textColorReverse;
         font-size: 13px;
         font-weight: 400;
         padding: 2px 5px;
         margin: 5px 0;
      }
      
      .recommend{
         background: @themeColor;
         color: @textColorReverse;
         font-size: 13px;
         padding: 2px 5px;
         font-weight: 400;
         margin: 5px 0;
      }
   }
   
}



.positions{
   li{
      margin-bottom: 35px;
      padding-bottom: 15px;
      border-bottom: 1px dashed @themeColor;
      
      li{
         border: 0;
         padding-bottom: 0;
         margin-bottom: 0;
         padding: 5px 0 0 0;
         list-style-position: inside;
         margin: 0;
         list-style-type: square;
      }
      
      .title{
         color: @themeColor;
         font-size: 15px;
         font-weight: 400;
         padding-bottom: 10px;
      }
      .description{
         padding-bottom: 10px;
      }
      .apply,
      .recommend{
         .transitioner(all 0.2s);
         &:hover{
            background: lighten(@themeColor, 5%);
         }
      }
      .apply{
         background: @themeColor;
         color: @textColorReverse;
         font-size: 13px;
         font-weight: 400;
         padding: 2px 5px;
         margin: 5px 0;
      }
      
      .recommend{
         background: @themeColor;
         color: @textColorReverse;
         font-size: 13px;
         padding: 2px 5px;
         font-weight: 400;
         margin: 5px 0;
      }
   }
   
}









.videosSlide{
   iframe{
      width: 100%;
   }
}



.videosGrid{
   padding: 0 2%;
   li{
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -o-box-sizing: border-box;
      width: 47%;
      float: left;
      margin-right: 6%;
      margin-bottom: 6%;
      iframe{
         width: 100%;
         height: 82px;
      }
      
      &:nth-child(2n+2){
         margin-right:0;
      }
   }
}



.videosList{
   padding: 0 2% 15px;
   margin-bottom: 15px;
   border-bottom: 1px solid @themeColor;
   li{
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -o-box-sizing: border-box;
      width: 100%;
      float: left;
      margin-bottom: 6%;
      iframe{
         width: 100%;
         height: 164px;
      }
      
   }
}










.projects, .clients{
   margin-bottom: 20px;
   padding-bottom: 20px;
   /*border-bottom: 1px solid @themeColor;*/
}



.list{
   margin: 0 0 0 17px;
   li{
      list-style-type: disc;
      padding-bottom: 5px;
      margin-bottom: 5px;
   }
}

.ui-li-has-thumb .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-thumb{
   min-height: 63px;
}








.columnContainer{
  .column{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100%;
    padding: 0 5% 0 0;
    font-size: 13px;
  }
  
  &.column-1{
    .column{
    text-align: justify;
    }
  }
  
  &.column-2{
    .column{
      width: 50%;
      float: left;
    }
  }
  
  &.column-3{
    .column{
      width: 33%;
      float: left;
    }
  }
  
}







.services{
   
   li {
      margin-bottom: 8px;
      a.image, a.text{
         float: left;
         display: block;
         line-height: 64px;
      }
      a.image{
         width: 64px;
         height: 64px;
         background: @themeColor;
         text-align: center;
            margin-right: 10px;
         
         img{
            width: 64px;
         }
      }
      /*end .image*/
   }
   /*end li*/
   
   &.serviceDetail{
      a.image{
         margin-bottom: 14px;
      }
   }
   
}

















.cutContainer{
   position: relative;
   /*padding: 25px;
   border: 1px solid @themeColor;
   margin-bottom: 25px;
   */
   margin-bottom: 40px;
   margin-top: 20px;
   &.noBorder{
      border: 0 !important;
      .cutTop{
         left: -12px;
         top: -12px;
      }
      .cutBottom{
         right: -12px;
         bottom: -12px;
      }
   }
   &.noPadding{
      padding: 0 !important;
   }
   &.noMargin{
      margin-bottom: 0 !important;
   }
   
   &.moreUpperMargin{
      margin-top:60px;
   }
   
   /*.box-shadow(2px 2px 2px #bbb);*/
   .cutTop, .cutBottom{
      display: none;
      background-repeat: no-repeat;
      background-size: 18px;
      width: 24px;
      height: 24px;
      position: absolute;
      background-color: @bgColor;
      background-color: #F8F8F8;
      background-position: 0 0;
      -webkit-transform: rotate(45deg);
      z-index: 2;
   }
   .cutTop{
      left: -15px;
      top: -15px;
   }
   .cutBottom{
      right: -15px;
      bottom: -15px;
   }
   
   .link{
      color: @themeColor;
      padding-left: 5px;
   }
   .block{
      margin-bottom: 5px;
   }
   .mapPin{
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -o-box-sizing: border-box;
      width: 30px;
      margin-right: 10px;
   }
   .text {
      font-size: 16px;
      font-weight: 200;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -o-box-sizing: border-box;
   }
   
   
   .map{
      height: 200px;
      &.large{
         height: 300px;
      }
      .transitioner(height 0.7s);
   }
}

.toggleMapHeight{
   font-size: 40px;
   color: @themeColor !important;
   margin-bottom: 25px;
   display: block;
   height: 50px;
   width: 50px;
   position: absolute;
   left: 50%;
   margin-left: -25px;
   /*display: block;*/
   
   text-align: center;
   .transitioner(all 0.4s ease-in-out);
   
   &:hover{
      color: @themeColor !important;
   }
   
   &.opened{
      transform: rotate(405deg);
      -webkit-transform: rotate(405deg);
      -moz-transform: rotate(405deg);
   }
   &.notransform{
      transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
   }
   
}












#menuPage{
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0 !important;
	margin-left: 0 !important;

   color: @textColorReverse;
}

#galleryScroller{
   
   position: absolute;
   height: 100%;
   width: 100%;
   left: 0 !important;
   margin-left: 0 !important;
   
   .menu li ul .square{
      height: 28% !important;      
      overflow: hidden;
      a.box{
         background: transparent !important;
      }
      img{
         width: 100%;
         height: 100%;
         margin: 0;
         position: static;
      }
   }
}

   .company{
      float: left;
      
      opacity: 0;
      filter: alpha(opacity=0);
      &.on{
         opacity: 1;
         filter: alpha(opacity=100);
      }
      
      img{
         height: 98.5%;
         /*
         min-height: 225px;
         min-width: 150px;
         */
  -moz-box-shadow: 5px 5px 20px #000000;
  -webkit-box-shadow: 5px 5px 20px #00000;
  box-shadow: 5px 5px 20px #000000;
  border-radius: 3px;
  &:hover{
                     background: lighten(@themeColor, 50%);
                  }
      }
   }
   
   .scroller{
      float: left;
      height: 90%;
      margin: 5%;
	  padding-right:40px;
      position: relative;
   }
   .menu{
      height: 100%;
      /*overflow: hidden;*/
      position: absolute;
      padding-right: 8%;
      padding-left: 5%;
      
      /*margin-left: 275px;*/
      
      transition-property:opacity, padding;
      transition-duration: 0.2s;
      transition-timing-function: ease-out;
      
      -moz-transition-property:opacity, padding;
      -moz-transition-duration: 0.2s;
      -moz-transition-timing-function: ease-out;
      
      -webkit-transition-property:opacity, padding;
      -webkit-transition-duration: 0.2s;
      -webkit-transition-timing-function: ease-out;
      
      -o-transition-property:opacity, padding;
      -o-transition-duration: 0.2s;
      -o-transition-timing-function: ease-out;
      
      opacity: 0;
      filter: alpha(opacity=0);
      
      &.on{
         opacity: 1;
         filter: alpha(opacity=100);
         padding-left: 0;
      }
      /*
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      */
      transform-origin: left center;
      -webkit-transform-origin: left center;
      -moz-transform-origin: left center;
      /*-webkit-transform: skewY(3deg) !important;*/
      /*.transitioner(all 2s ease-in-out);*/
      
      li{
         height: 100%;
         float: left;
         &:last-child ul{
            padding-right: 0 !important;
         }
         
         ul{
            height: 100%;
            
           .square{
               float: none;
               height: 31%;
               margin: 0 0 9% 0;
               position: relative;
               min-height: 70px;
               a.box{
                  display:block;
                  width: 100%;
                  background: none;
				    -moz-box-shadow: 5px 5px 20px #000000;
  					-webkit-box-shadow: 5px 5px 20px #00000;
  					box-shadow: 5px 5px 20px #000000;
					border-radius: 3px;
                  &:hover{
                     background: sepia( 50%);
                  }
                  .transitioner(all 0.4s);
                  height: 100%;
               }
			   
			   
               .text{
				  padding-top:25px;
                  color: white;
				  text-shadow:#000 1px 1px 10px;
				  font-size: 20px;
                  font-weight: 600;
				  font-family:"Engravers gothic bt";
				  text-transform:uppercase;
               }
               img{
                  width: 50%;
                  position: absolute;
                  top: 50%;
                  margin-top: -25%;
                  left: 50%;
                  margin-left: -25%;
                  display: none;
                  &.on{
                     display:block;
                  }
               }
			   
            }
            /*end square li*/
			
         }
         /*end ul*/
      }
      /*end li*/
      
   }
   /*end menu*/
   
   #menu1 {
	   height: 47%;
   }
   
    #menu2 {
	   height: 31%;
   }
  
   
   #domaine:hover{
	

		}
   
	#actu {
	   background-image:url(../images/actualites.jpg);
	   background-repeat:no-repeat;
       background-size: 100% 100%;				   }     
				     
	#domaine {
	   background-image:url(../images/domaine.jpg);
	   background-repeat:no-repeat;
       background-size: 100% 100%;				   }   
	
	#vins {
	   background-image:url(../images/vinsmenu.jpg);
	   background-repeat:no-repeat;
       background-size: 100% 100%;				   }
	   
	#contact {
	   background-image:url(../images/contact.jpg);
	   background-repeat:no-repeat;
       background-size: 100% 100%;				   }   
	   
	   
	#bg {
	   background-image:url(../images/vins/bg.jpg);
	   background-repeat:no-repeat;
       background-size: 100% 100%;				   } 
	      
	#sa {
	   background-image:url(../images/vins/sa.jpg);
	   background-repeat:no-repeat;
       background-size: 100% 100%;				   }   
	   
	#cm {
	   background-image:url(../images/vins/cm.jpg);
	   background-repeat:no-repeat;
       background-size: 100% 100%;				   } 
	      
	#pm {
	   background-image:url(../images/vins/pm.jpg);
	   background-repeat:no-repeat;
       background-size: 100% 100%;				   }   
	   
	#bbm {
	   background-image:url(../images/vins/bbm.jpg);
	   background-repeat:no-repeat;
       background-size: 100% 100%;				   } 
	      
	#retour {
	   background-image:url(../images/vins/retour.jpg);
	   background-repeat:no-repeat;
       background-size: 100% 100%;				   }   
	   
	   
	   
	   
	#fri {
	   background-image:url(../images/vins/sa/fri.jpg);
	   background-repeat:no-repeat;
       background-size: 100% 100%;				   } 
	      
	#mo {
	   background-image:url(../images/vins/sa/mo.jpg);
	   background-repeat:no-repeat;
       background-size: 100% 100%;				   } 
	   
	#co {
	   background-image:url(../images/vins/sa/co.jpg);
	   background-repeat:no-repeat;
       background-size: 100% 100%;				   } 
	      
	#chp {
	   background-image:url(../images/vins/sa/chp.jpg);
	   background-repeat:no-repeat;
       background-size: 100% 100%;				   } 
	   
	#cr {
	   background-image:url(../images/vins/sa/cr.jpg);
	   background-repeat:no-repeat;
       background-size: 100% 100%;				   }  
	
   #cha {
	   background-image:url(../images/vins/sa/cha.jpg);
	   background-repeat:no-repeat;
       background-size: 100% 100%;				   } 
	      
	#rem {
	   background-image:url(../images/vins/sa/rem.jpg);
	   background-repeat:no-repeat;
       background-size: 100% 100%;				   } 
	   
	#mdc {
	   background-image:url(../images/vins/sa/mdc.jpg);
	   background-repeat:no-repeat;
       background-size: 100% 100%;				   } 
	      
	#savv {
	   background-image:url(../images/vins/sa/savv.jpg);
	   background-repeat:no-repeat;
       background-size: 100% 100%;				   } 
	   
	#dlt {
	   background-image:url(../images/vins/sa/dlt.jpg);
	   background-repeat:no-repeat;
       background-size: 100% 100%;				   } 
	   
	   
	#enc {
	   background-image:url(../images/vins/cm/enc.jpg);
	   background-repeat:no-repeat;
       background-size: 100% 100%;				   }  
	
	#mac {
	   background-image:url(../images/vins/cm/mac.jpg);
	   background-repeat:no-repeat;
       background-size: 100% 100%;				   }  
	
	#boudb {
	   background-image:url(../images/vins/cm/boudb.jpg);
	   background-repeat:no-repeat;
       background-size: 100% 100%;				   }  
	
	#bld {
	   background-image:url(../images/vins/cm/bld.jpg);
	   background-repeat:no-repeat;
       background-size: 100% 100%;				   }  
	
	#cmvv {
	   background-image:url(../images/vins/cm/cmvv.jpg);
	   background-repeat:no-repeat;
       background-size: 100% 100%;				   }  
	
	#boudr {
	   background-image:url(../images/vins/cm/boudr.jpg);
	   background-repeat:no-repeat;
       background-size: 100% 100%;				   }  
	   
	#aub {
	   background-image:url(../images/vins/pm/aub.jpg);
	   background-repeat:no-repeat;
       background-size: 100% 100%;				   }  
	
	#sp {
	   background-image:url(../images/vins/pm/sp.jpg);
	   background-repeat:no-repeat;
       background-size: 100% 100%;				   }  
   
   #ali {
	   background-image:url(../images/vins/bg/ali.jpg);
	   background-repeat:no-repeat;
       background-size: 100% 100%;				   }  

	#chard {
	   background-image:url(../images/vins/bg/chard.jpg);
	   background-repeat:no-repeat;
       background-size: 100% 100%;				   }  
	
	#pn {
	   background-image:url(../images/vins/bg/pn.jpg);
	   background-repeat:no-repeat;
       background-size: 100% 100%;				   }  
   /*
}
   */
/*end menuPage*/



/* ==|== media queries ====================================================== */


@media only screen and (max-height: 280px) {
    .menu li ul .square{
        min-height:0 !important;
        img{
            top: 40% !important;
        }
        span.text{
            font-size: 70%;
        }
		.text{
            font-size: 70%;
        }
    }
}

/* Screen width <= 320px */
@media only screen and (max-width: 320px) {

}

/* Screen width > 320px */
@media only screen and (min-width: 321px) and (max-width: 480px) {

}

/* Screen width > 480px */
@media only screen and (min-width: 481px) and (max-width: 768px) {
   .innerPage{
      /*padding: 5%;*/
      .flexslider{
         max-height: 320px;
      }
   }
   
   .menuButton{
      img{
         width: 22px !important;
      }  
   }
   
   .menuBack, .menuBack2{
      img{
         width: 42px !important;
      }
   }
   
   .videosGrid{
      padding: 0 2%;
      li{
         iframe{
            width: 100%;
            height: 142px;
         }
      }
   }
   
   
}

/* Screen width > 768px */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
   
   
   
   .innerPage{
      /*padding: 5%;*/
      .flexslider{
         max-height: 320px;
      }
   }
   
   
   .menuButton{
      img{
         width: 25px !important;
      }
   }
   
     .menuBack, .menuBack2{
      img{
         width: 52px !important;
      }	 
	 }
   
   .scroller{
      margin: 35px !important;
   }
   
   
   
   
   .videosGrid{
      padding: 0 2%;
      li{
         iframe{
            width: 100%;
            height: 242px;
         }
      }
   }
   
}

/* Screen width > 1024px */
@media only screen and (min-width: 1023px) and (max-width: 1280px) {
   body, .page, .ui-overlay-c,
   .ui-mobile [data-role="page"], .ui-mobile [data-role="dialog"], .ui-page
   {
      width: 1024px;
      left: 50%;
      margin-left: -512px;
      font-size: 16px;
   }
   
   .innerPage .topGrahic{
      height: 8px;
   }
   
   .scroller{
      margin: 45px !important;
   }
   
   h1{
      font-size: 31.5px;
      a{
         font-size: 31.5px;
      }
   }
   
   .innerPage{
      /*padding: 5%;*/
      .flexslider{
         max-height: 380px;
      }
   }
   
   .menuButton{
      img{
         width: 30px !important;
      } 
   }
   
  .menuBack, .menuBack2{
      img{
         width: 55px !important;
      }
  }
   
   .padpage{
      padding-left: 2.5%;
      padding-right: 2.5%;
      
      &.padtop{
         padding-top: 2.5%
      }
      &.padbottom{
         padding-bottom: 2.5%;
      }
   }
   
   
   
   .videosGrid{
      padding: 0 2%;
      li{
         iframe{
            width: 100%;
            height: 282px;
         }
      }
   }
   
}

/* Screen width > 1280px */
@media only screen and (min-width: 1281px) {
   body, .page, .ui-overlay-c,
   .ui-mobile [data-role="page"], .ui-mobile [data-role="dialog"], .ui-page{
      width: 1024px;
      left: 50%;
      margin-left: -512px;
      font-size: 16px;
   }
   
   .innerPage .topGrahic{
      height: 8px;
   }
   
   .scroller{
      margin: 55px !important;
   }
   
   h1{
      font-size: 31.5px;
      a{
         font-size: 31.5px;
      }
   }
   
   .innerPage{
      /*padding: 5%;*/
      .flexslider{
         max-height: 380px;
      }
   }
   
   .menuButton{
      img{
         width: 30px !important;
      }
   }
      
   
   .padpage{
      padding-left: 2.5%;
      padding-right: 2.5%;
      
      &.padtop{
         padding-top: 2.5%
      }
      &.padbottom{
         padding-bottom: 2.5%;
      }
   }

   
   
   .videosGrid{
      padding: 0 2%;
      li{
         iframe{
            width: 100%;
            height: 282px;
         }
      }
   }
   
}





/* ==|== endos ==============================================================
   Please define your styles before this section.
   ========================================================================== */
/*#blr.ns-helpers();*/
/*@media print { #blr.media-print(); }*/