html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {  display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}.owl-carousel .owl-wrapper:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
} .owl-carousel{
display: none;
position: relative;
width: 100%;
-ms-touch-action: pan-y;
}
.owl-carousel .owl-wrapper{
display: none;
position: relative;
-webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-wrapper-outer{
overflow: hidden;
position: relative;
width: 100%;
}
.owl-carousel .owl-wrapper-outer.autoHeight{
-webkit-transition: height 500ms ease-in-out;
-moz-transition: height 500ms ease-in-out;
-ms-transition: height 500ms ease-in-out;
-o-transition: height 500ms ease-in-out;
transition: height 500ms ease-in-out;
}
.owl-carousel .owl-item{
float: left;
}
.owl-controls .owl-page,
.owl-controls .owl-buttons div{
cursor: pointer;
}
.owl-controls {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} .grabbing { 
cursor:url(//www.jlavz.fr/wp-content/themes/jlavz-one/vendors/owl-carousel/grabbing.png) 8 8, move;
} .owl-carousel  .owl-wrapper,
.owl-carousel  .owl-item{
-webkit-backface-visibility: hidden;
-moz-backface-visibility:    hidden;
-ms-backface-visibility:     hidden;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
}.owl-theme .owl-controls{
margin-top: 10px;
text-align: center;
} .owl-theme .owl-controls .owl-buttons div{
color: #FFF;
display: inline-block;
zoom: 1;
*display: inline; margin: 5px;
padding: 3px 10px;
font-size: 12px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
background: #869791;
filter: Alpha(Opacity=50); opacity: 0.5;
}  .owl-theme .owl-controls.clickable .owl-buttons div:hover{
filter: Alpha(Opacity=100); opacity: 1;
text-decoration: none;
} .owl-theme .owl-controls .owl-page{
display: inline-block;
zoom: 1;
*display: inline; }
.owl-theme .owl-controls .owl-page span{
display: block;
width: 12px;
height: 12px;
margin: 5px 7px;
filter: Alpha(Opacity=50); opacity: 0.5;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background: #869791;
}
.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span{
filter: Alpha(Opacity=100); opacity: 1;
} .owl-theme .owl-controls .owl-page span.owl-numbers{
height: auto;
width: auto;
color: #FFF;
padding: 2px 10px;
font-size: 12px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
} .owl-item.loading{
min-height: 150px;
background: url(//www.jlavz.fr/wp-content/themes/jlavz-one/vendors/owl-carousel/AjaxLoader.gif) no-repeat center center
}html, body {
height: 100%; }
body {
padding: 30px;
font-family: "Open Sans", sans-serif; }
a {
text-decoration: none;
color: #009999; }
h1 {
font-size: 30px;
color: #000;
font-family: "antoniobold", sans-serif;
text-transform: uppercase;
margin-bottom: 40px; }
h2 {
font-size: 23px;
color: #000;
font-family: "antoniobold", sans-serif;
text-transform: uppercase;
margin-bottom: 20px; }
h3 {
font-family: "antonioregular", sans-serif;
color: #000;
font-size: 21px;
text-transform: uppercase;
margin-bottom: 30px; }
h4 {
font-size: 16px;
text-transform: uppercase;
color: #000;
font-family: "antoniobold", sans-serif; }
h5 {
font-size: 14px;
font-family: "antoniobold", sans-serif;
color: #000; }
h6 {
font-size: 12px;
line-height: 18px;
font-family: "Open Sans", sans-serif;
font-style : italic;
color: #000; }
p {
font-family: "Open Sans", sans-serif;
font-size: 14px;
line-height: 26px;
color: #666;
margin-bottom: 20px; }
p.no-margin {
margin-bottom: 0; }
.artist {
font-family: "antoniobold", sans-serif;
font-size: 14px;
line-height: 26px;
color: #666;
margin-top: 40px; }
p.no-margin {
margin-bottom: 0; }
strong {
font-weight: 600; }
ul.list {
margin: 10px 0; }
ul.list li {
font-family: "Open Sans", sans-serif;
color: #666;
padding: 5px 0;
font-size: 13px; }
ul.list li i {
padding-right: 10px;
color: #ccc;
font-size: 13px; }
.jlisting {
font-family: "Open Sans", sans-serif;
font-size: 12px;
line-height: 20px;
color: #666;
} #logo {
padding: 11px 10px 10px 10px;
background: #fff;
position: absolute;
top: 30px;
left: 30px;
z-index: 100;
transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-webkit-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-moz-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-o-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-ms-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1); }
#logo.fixed {
position: fixed;
top: 0; } .slider-nav .next, .slider-nav .prev {
display: block;
width: 30px;
height: 44px;
color: #000;
position: absolute;
top: 50%;
transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-webkit-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-moz-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-o-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-ms-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1); }
.slider-nav .next:after, .slider-nav .next:before, .slider-nav .prev:after, .slider-nav .prev:before {
transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-webkit-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-moz-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-o-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-ms-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1); }
.slider-nav .next:hover, .slider-nav .prev:hover {
background: #009999; }
.slider-nav .next {
right: 0; }
.slider-nav .next:before {
content: "";
width: 10px;
border-right: #000 2px solid;
border-top: #000 2px solid;
height: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
-webkit-transform: translate(-50%, -50%) rotate(45deg);
-o-transform: translate(-50%, -50%) rotate(45deg);
-moz-transform: translate(-50%, -50%) rotate(45deg);
-ms-transform: translate(-50%, -50%) rotate(45deg); }
.slider-nav .next:hover {
background: #009999; }
.slider-nav .next:hover:before {
content: "";
width: 10px;
border-right: #fff 2px solid;
border-top: #fff 2px solid;
height: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
-webkit-transform: translate(-50%, -50%) rotate(45deg);
-o-transform: translate(-50%, -50%) rotate(45deg);
-moz-transform: translate(-50%, -50%) rotate(45deg);
-ms-transform: translate(-50%, -50%) rotate(45deg); }
.slider-nav .prev {
left: 0; }
.slider-nav .prev:before {
content: "";
width: 10px;
border-left: #000 2px solid;
border-bottom: #000 2px solid;
height: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
-webkit-transform: translate(-50%, -50%) rotate(45deg);
-o-transform: translate(-50%, -50%) rotate(45deg);
-moz-transform: translate(-50%, -50%) rotate(45deg);
-ms-transform: translate(-50%, -50%) rotate(45deg); }
.slider-nav .prev:hover {
background: #009999; }
.slider-nav .prev:hover:before {
content: "";
width: 10px;
border-left: #fff 2px solid;
border-bottom: #fff 2px solid;
height: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
-webkit-transform: translate(-50%, -50%) rotate(45deg);
-o-transform: translate(-50%, -50%) rotate(45deg);
-moz-transform: translate(-50%, -50%) rotate(45deg);
-ms-transform: translate(-50%, -50%) rotate(45deg); } .social-icons {
right: 30px;
z-index: 99;
position: absolute;
top: 50%;
transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%); }
.social-icons.fixed {
position: fixed;
top: 0;
transform: none;
-webkit-transform: none;
-moz-transform: none;
-o-transform: none;
-ms-transform: none; }
.social-icons li {
float: right;
margin-left: 1px;
position: relative; }
.social-icons li a {
width: 30px;
height: 44px;
display: block;
background: #fff;
color: #000;
font-size: 13px;
transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-webkit-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-moz-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-o-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-ms-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1); }
.social-icons li a:hover {
color: #fff;
background: #009999; }
.social-icons li a i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); } a.stylebouton {
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
border: solid thin #dddddd;
text-shadow: none;
background: #F6F6F6;
background-image: -webkit-linear-gradient(top, #F6F6F6, #DDDDDD);
background-image: -moz-linear-gradient(top, #F6F6F6, #DDDDDD);
background-image: -ms-linear-gradient(top, #F6F6F6, #DDDDDD);
background-image: -o-linear-gradient(top, #F6F6F6, #DDDDDD);
background-image: linear-gradient(to bottom, #F6F6F6, #DDDDDD);    
color: #666666;
padding: 0px 8px;
margin: 2px;
text-decoration: none;
font-family: Arial;
font-size: 11px;
float: right; 
}
a.stylebouton:hover {
background-image: -webkit-linear-gradient(top, #DDDDDD, #F6F6F6);
background-image: -moz-linear-gradient(top, #DDDDDD, #F6F6F6);
background-image: -ms-linear-gradient(top, #DDDDDD, #F6F6F6);
background-image: -o-linear-gradient(top, #DDDDDD, #F6F6F6, #DDDDDD);
background-image: linear-gradient(to bottom, #DDDDDD, #F6F6F6);    
} .toggle-nav {
left: 30px;
width: 30px;
height: 44px;
background: #fff;
cursor: pointer;
z-index: 100;
transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-webkit-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-moz-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-o-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-ms-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
position: absolute;
top: 50%;
transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%); }
.toggle-nav:before {
content: "";
width: 11px;
border-top: #000 2px solid;
border-bottom: #000 2px solid;
height: 6px;
padding-bottom: 6px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); }
.toggle-nav:after {
content: "";
width: 11px;
border-top: #000 2px solid;
border-bottom: #000 2px solid;
height: 6px;
margin-top: 2px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); }
.toggle-nav:before, .toggle-nav:after {
transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-webkit-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-moz-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-o-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-ms-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1); }
.toggle-nav.selected, .toggle-nav:hover {
background: #009999;
color: #fff; }
.toggle-nav.selected:before, .toggle-nav:hover:before {
content: "";
width: 11px;
border-top: #fff 2px solid;
border-bottom: #fff 2px solid;
height: 6px;
padding-bottom: 6px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); }
.toggle-nav.selected:after, .toggle-nav:hover:after {
content: "";
width: 11px;
border-top: #fff 2px solid;
border-bottom: #fff 2px solid;
height: 6px;
margin-top: 2px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); }
.toggle-nav.selected:before {
content: "";
width: 13px;
border-top: #fff 2px solid;
border-bottom: transparent 0px solid;
height: 0;
padding: 0;
margin-bottom: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
-webkit-transform: translate(-50%, -50%) rotate(45deg);
-o-transform: translate(-50%, -50%) rotate(45deg);
-moz-transform: translate(-50%, -50%) rotate(45deg);
-ms-transform: translate(-50%, -50%) rotate(45deg); }
.toggle-nav.selected:after {
content: "";
width: 13px;
height: 0;
margin-top: 0;
border-bottom: #fff 2px solid;
border-top: transparent 0px solid;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(135deg);
-webkit-transform: translate(-50%, -50%) rotate(135deg);
-o-transform: translate(-50%, -50%) rotate(135deg);
-moz-transform: translate(-50%, -50%) rotate(135deg);
-ms-transform: translate(-50%, -50%) rotate(135deg); }
.toggle-nav.fixed {
position: fixed;
top: 0;
transform: none;
-webkit-transform: none;
-moz-transform: none;
-o-transform: none;
-ms-transform: none; }
.toggle-nav i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
display: none; } nav.main {
left: 210px;
z-index: 100;
position: absolute;
top: 50%;
transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transition: all 0.5s cubic-bezier(0.8, 0, 0.5, 1);
-webkit-transition: all 0.5s cubic-bezier(0.8, 0, 0.5, 1);
-moz-transition: all 0.5s cubic-bezier(0.8, 0, 0.5, 1);
-o-transition: all 0.5s cubic-bezier(0.8, 0, 0.5, 1);
-ms-transition: all 0.5s cubic-bezier(0.8, 0, 0.5, 1); }
nav.main.hidden {
left: 280px;
opacity: 0;
pointer-events: none; }
nav.main li {
margin-top: 0px;
float: left;
clear: both; }
nav.main li a {
display: block;
float: left;
padding: 3px 3px 3px 0;
font-size: 36px;
color: #fff;
text-transform: uppercase;
font-family: "antoniobold", sans-serif;
background: rgba(255, 255, 255, 0);
transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-webkit-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-moz-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-o-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-ms-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1); }
nav.main li a:hover, nav.main li a.active {
color: #000;
background: #fff;
padding-left: 3px;
margin-left: 1px; }
nav.main li a.active {
padding: 8px;
margin-top: 1px;
margin-bottom: 1px; }
nav.main li ul {
float: left;
clear: both;
margin-left: 1px;
height: 0;
padding: 0;
overflow: hidden;
transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-webkit-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-moz-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-o-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-ms-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1); }
nav.main li ul.active {
height: 46px;
padding: 9px 0 4px 0; }
nav.main li ul li {
float: left;
clear: none; }
nav.main li ul li a {
font-size: 16px;
font-family: "antonioregular", sans-serif;
text-transform: none;
padding: 8px;
background: #000;
color: #fff;
margin-right: 1px;
margin-bottom: 1px; }
nav.main li ul li a:hover, nav.main li ul li a.active {
padding: 8px;
margin-left: 0;
margin-top: 0;
background: #009999;
color: #fff; } #main {
height: 100%;
width: 100%;
position: relative;
overflow: hidden; }
#main .mask-for-menu {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
z-index: 30;
pointer-events: none;
transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-webkit-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-moz-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-o-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-ms-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1); }
#main .mask-for-menu.show {
background: rgba(0, 0, 0, 0.7);
pointer-events: inherit; }
#main .page-mask, #main .item-loader {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #e5e5e5;
z-index: 20;
transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-webkit-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-moz-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-o-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-ms-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1); }
#main .page-mask.hide, #main .item-loader.hide {
opacity: 0; }
#main .page-mask .loader-wrapper, #main .item-loader .loader-wrapper {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); }
#main .page-mask .loader-wrapper div, #main .item-loader .loader-wrapper div {
width: 100%;
height: 100%;
border: transparent 2px solid;
border-bottom: #009999 2px solid;
border-right: transparent 2px solid;
border-left: transparent 2px solid;
border-radius: 100%;
padding: 3px;
-webkit-animation: spin 2.5s infinite linear;
animation: spin 2.5s infinite linear; }
#main .item-loader {
background: #e5e5e5;
z-index: 10; }
#main .projects .item-loader {
background: #fff; } .full-slider {
width: 100%;
height: 100%;
overflow: hidden; }
.full-slider .item {
width: 100%;
height: 100%;
background-size: cover; }
.full-slider .item img {
width: 100%;
display: none; }
.owl-wrapper-outer, .owl-wrapper, .owl-item {
width: 100%;
height: 100%; }
.fullscreen-video {
width: 100%;
height: 100%;
overflow: hidden;
position: relative; }
.fullscreen-video .wrapper {
height: 100%;
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); }
.fullscreen-video .wrapper .pattern {
background: url(//www.jlavz.fr/wp-content/themes/jlavz-one/img/pattern.png);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
opacity: 0.5; }
.fullscreen-img {
width: 100%;
height: 100%;
overflow: hidden;
position: relative; }
.fullscreen-img img {
display: none; }
#home .caption {
color: #fff;
text-transform: uppercase;
font-family: "antoniobold", sans-serif;
left: 280px;
position: absolute;
top: 50%;
transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transition: all 0.5s cubic-bezier(0.8, 0, 0.5, 1);
-webkit-transition: all 0.5s cubic-bezier(0.8, 0, 0.5, 1);
-moz-transition: all 0.5s cubic-bezier(0.8, 0, 0.5, 1);
-o-transition: all 0.5s cubic-bezier(0.8, 0, 0.5, 1);
-ms-transition: all 0.5s cubic-bezier(0.8, 0, 0.5, 1);
opacity: 0; }
#home .caption.visible {
left: 180px;
opacity: 1; }
#home .caption h1 {
font-size: 32px;
color: #fff;
margin-top: 7px;
margin-bottom: 0; }
#home .caption small {
font-size: 14px;
padding-left: 1px; } #gallery {
width: 100%;
height: 100%;
position: relative; }
#gallery .col {
width: 100%;
height: 100%;
overflow: hidden;
float: left;
position: relative; }
#gallery .col .category {
height: 44px;
background: #ddd;
border-top: #fff 1px solid;
margin-right: 1px;
text-align: center;
font-family: "antoniobold", sans-serif;
font-size: 16px;
color: #fff;
padding-top: 15px;
transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-webkit-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-moz-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-o-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-ms-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1); }
#gallery .col .bar {
position: absolute;
top: 20px;
right: 0;
width: 0px;
height: 52px;
z-index: 20;
border-right: rgba(255, 255, 255, 0) 6px solid;
transition: all 0.4s cubic-bezier(0.8, 0, 0.5, 1);
-webkit-transition: all 0.4s cubic-bezier(0.8, 0, 0.5, 1);
-moz-transition: all 0.4s cubic-bezier(0.8, 0, 0.5, 1);
-o-transition: all 0.4s cubic-bezier(0.8, 0, 0.5, 1);
-ms-transition: all 0.4s cubic-bezier(0.8, 0, 0.5, 1); }
#gallery .col .bar .controls {
position: absolute;
top: -20px;
right: -27px;
width: 21px;
height: 85px;
border-right: #fff 0px solid;
transition: all 0.4s cubic-bezier(0.8, 0, 0.5, 1);
-webkit-transition: all 0.4s cubic-bezier(0.8, 0, 0.5, 1);
-moz-transition: all 0.4s cubic-bezier(0.8, 0, 0.5, 1);
-o-transition: all 0.4s cubic-bezier(0.8, 0, 0.5, 1);
-ms-transition: all 0.4s cubic-bezier(0.8, 0, 0.5, 1); }
#gallery .col .bar .controls .scrollup,
#gallery .col .bar .controls .scrolldown,
#gallery .col .bar .controls .drag {
width: 100%;
background: #fff;
margin-bottom: 1px;
font-size: 12px;
height: 20px;
position: relative;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-webkit-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-moz-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-o-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-ms-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1); }
#gallery .col .bar .controls .scrollup:hover,
#gallery .col .bar .controls .scrolldown:hover,
#gallery .col .bar .controls .drag:hover {
background: #009999;
border-color: #009999; }
#gallery .col .bar .controls .drag {
height: 43px;
cursor: drag; }
#gallery .col .bar .controls .drag i {
display: block;
width: 100%;
height: 100%; }
#gallery .col .bar .controls .drag i:before {
content: "";
width: 10px;
border-top: #000 2px solid;
border-bottom: #000 2px solid;
height: 6px;
padding-bottom: 6px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); }
#gallery .col .bar .controls .drag i:after {
content: "";
width: 10px;
border-top: #000 2px solid;
border-bottom: #000 2px solid;
height: 6px;
margin-top: 2px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); }
#gallery .col .bar .controls .drag:hover i:before {
content: "";
width: 10px;
border-top: #fff 2px solid;
border-bottom: #fff 2px solid;
height: 6px;
padding-bottom: 6px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); }
#gallery .col .bar .controls .drag:hover i:after {
content: "";
width: 10px;
border-top: #fff 2px solid;
border-bottom: #fff 2px solid;
height: 6px;
margin-top: 2px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); }
#gallery .col .bar .controls .scrollup {
border-top: #fff 4px solid; }
#gallery .col .bar .controls .scrollup:before {
content: "";
width: 7px;
border-left: #000 2px solid;
border-top: #000 2px solid;
height: 7px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
-webkit-transform: translate(-50%, -50%) rotate(45deg);
-o-transform: translate(-50%, -50%) rotate(45deg);
-moz-transform: translate(-50%, -50%) rotate(45deg);
-ms-transform: translate(-50%, -50%) rotate(45deg); }
#gallery .col .bar .controls .scrollup:hover:before {
content: "";
width: 7px;
border-left: #fff 2px solid;
border-top: #fff 2px solid;
height: 7px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
-webkit-transform: translate(-50%, -50%) rotate(45deg);
-o-transform: translate(-50%, -50%) rotate(45deg);
-moz-transform: translate(-50%, -50%) rotate(45deg);
-ms-transform: translate(-50%, -50%) rotate(45deg); }
#gallery .col .bar .controls .scrolldown {
border-bottom: #fff 4px solid; }
#gallery .col .bar .controls .scrolldown:before {
content: "";
width: 7px;
border-right: #000 2px solid;
border-bottom: #000 2px solid;
height: 7px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
-webkit-transform: translate(-50%, -50%) rotate(45deg);
-o-transform: translate(-50%, -50%) rotate(45deg);
-moz-transform: translate(-50%, -50%) rotate(45deg);
-ms-transform: translate(-50%, -50%) rotate(45deg); }
#gallery .col .bar .controls .scrolldown:hover:before {
content: "";
width: 7px;
border-right: #fff 2px solid;
border-bottom: #fff 2px solid;
height: 7px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
-webkit-transform: translate(-50%, -50%) rotate(45deg);
-o-transform: translate(-50%, -50%) rotate(45deg);
-moz-transform: translate(-50%, -50%) rotate(45deg);
-ms-transform: translate(-50%, -50%) rotate(45deg); }
#gallery .col .bar.selected {
width: 0;
border-right-color: rgba(255, 255, 255, 0) !important;
height: 43px; }
#gallery .col .bar.selected .controls {
right: -6px; }
#gallery .col .bar.dragready {
transition: all 0 ease 0 !important;
-webkit-transition: all 0 ease 0 !important;
-moz-transition: all 0 ease 0 !important;
-o-transition: all 0 ease 0 !important;
-ms-transition: all 0 ease 0 !important; }
#gallery .col:hover .category {
background: #009999; }
#gallery .col:hover .bar {
width: 24px;
border-right: #fff 6px solid; }
#gallery .col .scrollbar {
height: 100%;
width: 100%;
overflow: hidden;
overflow-y: scroll;
position: relative; }
#gallery .col .scrollbar .data {
display: none; }
#gallery .col .scrollbar .item {
width: 100%;
position: relative;
margin-bottom: 1px;
background: #000;
overflow: hidden;
cursor: pointer; }
#gallery .col .scrollbar .item img {
width: 100%;
position: relative;
top: 0;
z-index: 10;
display: block;
transition: all 0.25s cubic-bezier(0.8, 0, 0.5, 1);
-webkit-transition: all 0.25s cubic-bezier(0.8, 0, 0.5, 1);
-moz-transition: all 0.25s cubic-bezier(0.8, 0, 0.5, 1);
-o-transition: all 0.25s cubic-bezier(0.8, 0, 0.5, 1);
-ms-transition: all 0.25s cubic-bezier(0.8, 0, 0.5, 1);
-webkit-filter: grayscale(1);
-webkit-filter: grayscale(100%);
filter: gray;
filter: grayscale(100%); }
#gallery .col .scrollbar .item[data-youtube] i, #gallery .col .scrollbar .item[data-vimeo] i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
z-index: 10;
opacity: 0;
color: #fff;
font-size: 20px; }
#gallery .col .scrollbar .item[data-src] i {
opacity: 0;
z-index: 10;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-webkit-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-moz-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-o-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-ms-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1); }
#gallery .col .scrollbar .item[data-src] i:before {
content: "";
width: 24px;
border-top: #fff 2px solid;
border-bottom: transparent 0px solid;
height: 0;
margin-bottom: 1px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); }
#gallery .col .scrollbar .item[data-src] i:after {
content: "";
width: 24px;
border-top: #fff 2px solid;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(90deg);
-webkit-transform: translate(-50%, -50%) rotate(90deg);
-o-transform: translate(-50%, -50%) rotate(90deg);
-moz-transform: translate(-50%, -50%) rotate(90deg);
-ms-transform: translate(-50%, -50%) rotate(90deg); }
#gallery .col .scrollbar .item:hover {
overflow: hidden; }
#gallery .col .scrollbar .item:hover i {
opacity: 1; }
#gallery .col .scrollbar .item:hover img {
top: -32px;
animation: fade 0.3s 0.1s 1 linear forwards;
-webkit-animation: fade 0.3s 0.1s 1 linear forwards; }
#gallery .col .scrollbar .item .caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: #fff;
text-align: center;
height: 32px;
padding-top: 10px; }
#gallery .col .scrollbar .item .caption p {
font-family: "antonioregular", sans-serif;
font-size: 14px;
text-transform: uppercase;
line-height: inherit;
margin: 0;
color: #000; }
#gallery .col:hover .scrollbar img {
-webkit-filter: grayscale(0);
-webkit-filter: grayscale(0%);
filter: gray;
filter: grayscale(0%); } #contact .wrapper {
height: 65%;
width: 100%;
position: absolute;
top: 0;
left: 0; }
#contact .wrapper #map-canvas {
height: 100%;
width: 100%; }
#contact .wrapper .page {
margin-top: -143px;
position: relative;
z-index: 10;
background: #fff;
padding: 50px;
width: 800px; }
#contact .wrapper .page h3 {
margin-bottom: 20px; }
#contact .wrapper .page .address {
width: 50%;
float: left;
margin-top: 10px; }
#contact .wrapper .page .contact-form {
margin-top: 10px;
width: 100%;
float: right; }
#contact .wrapper .page .contact-form form input {
width: 100%;
height: 32px;
border: none;
background: #eee;
margin-bottom: 20px;
color: #666;
padding: 0 10px;
font-family: "Open Sans", sans-serif;
font-size: 13px; }
#contact .wrapper .page .contact-form form .has-error {
margin-bottom: 20px; }
#contact .wrapper .page .contact-form form .has-error input, #contact .wrapper .page .contact-form form .has-error textarea {
margin-bottom: 0;
border: #ebccd1 1px solid;
margin-bottom: 5px; }
#contact .wrapper .page .contact-form form .has-error .form-error {
color: #a94442;
font-family: "Open Sans", sans-serif;
font-size: 13px; }
#contact .wrapper .page .contact-form form textarea {
width: 100%;
height: 160px;
background: #eee;
border: none;
color: #666;
padding: 10px;
font-family: "Open Sans", sans-serif;
font-size: 13px; }
#contact .wrapper .page .contact-form form .submit-btn input {
background: #009999;
color: #fff;
width: auto;
font-family: "antoniobold", sans-serif;
font-size: 16px;
margin-top: 10px;
cursor: pointer;
padding: 10px 20px;
height: auto; }
#contact .wrapper .page .contact-form form .submit-btn i {
transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-webkit-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-moz-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-o-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-ms-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
opacity: 0; }
#contact .wrapper .page .contact-form form .submit-btn i.active {
opacity: 1; } #about .wrapper {
height: 65%;
width: 100%;
position: absolute;
top: 0;
left: 0; }
#about .wrapper .img-holder {
background: #e5e5e5 url(//www.jlavz.fr/wp-content/themes/jlavz-one/img/pages/about.jpg) center center no-repeat;
background-size: cover;
height: 100%;
width: 100%; }
#about .wrapper .page {
margin-top: -143px;
background: #fff;
min-height: 30%;
padding: 50px;
width: 800px; }
#about .wrapper .page .facts {
width: 100%; }
#about .wrapper .page .facts li {
float: left;
width: 25%;
border-right: #fff 1px solid;
height: 97px;
background: #ccc;
text-align: center; }
#about .wrapper .page .facts li .count {
font-size: 36px;
font-family: "Open Sans", sans-serif;
color: #ccc;
background: #fff;
padding: 5px 20px;
display: inline-block;
margin-bottom: 10px;
font-weight: 600; }
#about .wrapper .page .facts li .title {
font-size: 14px;
font-family: "antonioregular", sans-serif;
color: #fff;
text-transform: uppercase;
display: block; }
#about .wrapper .page .facts li:hover {
background: #009999; }
#about .wrapper .page .facts li:hover .count {
color: #009999; }
#about .wrapper .page .clients li {
float: left;
width: 25%;
border-right: #fff 1px solid;
text-align: center;
position: relative;
margin-bottom: 1px; }
#about .wrapper .page .clients li img {
width: 100%;
display: block; } #graphisme .wrapper {
height: 65%;
width: 100%;
position: absolute;
top: 0;
left: 0; }
#graphisme .wrapper .img-holder {
background: #e5e5e5 url(//www.jlavz.fr/wp-content/themes/jlavz-one/img/pages/graphisme.jpg) center center no-repeat;
background-size: cover;
height: 100%;
width: 100%; }
#graphisme .wrapper .page {
margin-top: -143px;
background: #fff;
min-height: 30%;
padding: 50px;
width: 800px; }
#graphisme .wrapper .page .facts {
width: 100%; }
#graphisme .wrapper .page .facts li {
float: left;
width: 25%;
border-right: #fff 1px solid;
height: 97px;
background: #ccc;
text-align: center; }
#graphisme .wrapper .page .facts li .count {
font-size: 36px;
font-family: "Open Sans", sans-serif;
color: #ccc;
background: #fff;
padding: 5px 20px;
display: inline-block;
margin-bottom: 10px;
font-weight: 600; }
#graphisme .wrapper .page .facts li .title {
font-size: 14px;
font-family: "antonioregular", sans-serif;
color: #fff;
text-transform: uppercase;
display: block; }
#graphisme .wrapper .page .facts li:hover {
background: #009999; }
#graphisme .wrapper .page .facts li:hover .count {
color: #009999; }
#graphisme .wrapper .page .clients li {
float: left;
width: 25%;
border-right: #fff 1px solid;
text-align: center;
position: relative;
margin-bottom: 1px; }
#graphisme .wrapper .page .clients li img {
width: 100%;
display: block; } #webdesign .wrapper {
height: 65%;
width: 100%;
position: absolute;
top: 0;
left: 0; }
#webdesign .wrapper .img-holder {
background: #e5e5e5 url(//www.jlavz.fr/wp-content/themes/jlavz-one/img/pages/webdesign.jpg) center center no-repeat;
background-size: cover;
height: 100%;
width: 100%; }
#webdesign .wrapper .page {
margin-top: -143px;
background: #fff;
min-height: 30%;
padding: 50px;
width: 800px; }
#webdesign .wrapper .page .facts {
width: 100%; }
#webdesign .wrapper .page .facts li {
float: left;
width: 25%;
border-right: #fff 1px solid;
height: 97px;
background: #ccc;
text-align: center; }
#webdesign .wrapper .page .facts li .count {
font-size: 36px;
font-family: "Open Sans", sans-serif;
color: #ccc;
background: #fff;
padding: 5px 20px;
display: inline-block;
margin-bottom: 10px;
font-weight: 600; }
#webdesign .wrapper .page .facts li .title {
font-size: 14px;
font-family: "antonioregular", sans-serif;
color: #fff;
text-transform: uppercase;
display: block; }
#webdesign .wrapper .page .facts li:hover {
background: #009999; }
#webdesign .wrapper .page .facts li:hover .count {
color: #009999; }
#webdesign .wrapper .page .clients li {
float: left;
width: 25%;
border-right: #fff 1px solid;
text-align: center;
position: relative;
margin-bottom: 1px; }
#webdesign .wrapper .page .clients li img {
width: 100%;
display: block; } #musique .wrapper {
height: 65%;
width: 100%;
position: absolute;
top: 0;
left: 0; }
#musique .wrapper .img-holder {
background: #e5e5e5 url(//www.jlavz.fr/wp-content/themes/jlavz-one/img/pages/musique.jpg) center center no-repeat;
background-size: cover;
height: 100%;
width: 100%; }
#musique .wrapper .page {
margin-top: -143px;
background: #fff;
min-height: 30%;
padding: 50px;
width: 800px; }
#musique .wrapper .page .facts {
width: 100%; }
#musique .wrapper .page .facts li {
float: left;
width: 25%;
border-right: #fff 1px solid;
height: 97px;
background: #ccc;
text-align: center; }
#musique .wrapper .page .facts li .count {
font-size: 36px;
font-family: "Open Sans", sans-serif;
color: #ccc;
background: #fff;
padding: 5px 20px;
display: inline-block;
margin-bottom: 10px;
font-weight: 600; }
#musique .wrapper .page .facts li .title {
font-size: 14px;
font-family: "antonioregular", sans-serif;
color: #fff;
text-transform: uppercase;
display: block; }
#musique .wrapper .page .facts li:hover {
background: #009999; }
#musique .wrapper .page .facts li:hover .count {
color: #009999; }
#musique .wrapper .page .clients li {
float: left;
width: 25%;
border-right: #fff 1px solid;
text-align: center;
position: relative;
margin-bottom: 1px; }
#musique .wrapper .page .clients li img {
width: 100%;
display: block; } #parcours .wrapper {
height: 65%;
width: 100%;
position: absolute;
top: 0;
left: 0; }
#parcours .wrapper .img-holder {
background: #e5e5e5 url(//www.jlavz.fr/wp-content/themes/jlavz-one/img/pages/jlavz.jpg) center center no-repeat;
background-size: cover;
height: 100%;
width: 100%; }
#parcours .wrapper .page {
margin-top: -143px;
background: #fff;
min-height: 30%;
padding: 50px;
width: 800px; }
#parcours .wrapper .page .facts {
width: 100%; }
#parcours .wrapper .page .facts li {
float: left;
width: 25%;
border-right: #fff 1px solid;
height: 97px;
background: #ccc;
text-align: center; }
#parcours .wrapper .page .facts li .count {
font-size: 36px;
font-family: "Open Sans", sans-serif;
color: #ccc;
background: #fff;
padding: 5px 20px;
display: inline-block;
margin-bottom: 10px;
font-weight: 600; }
#parcours .wrapper .page .facts li .title {
font-size: 14px;
font-family: "antonioregular", sans-serif;
color: #fff;
text-transform: uppercase;
display: block; }
#parcours .wrapper .page .facts li:hover {
background: #009999; }
#parcours .wrapper .page .facts li:hover .count {
color: #009999; }
#parcours .wrapper .page .clients li {
float: left;
width: 25%;
border-right: #fff 1px solid;
text-align: center;
position: relative;
margin-bottom: 1px; }
#parcours .wrapper .page .clients li img {
width: 100%;
display: block; } #agence .wrapper {
height: 65%;
width: 100%;
position: absolute;
top: 0;
left: 0; }
#agence .wrapper .img-holder {
background: #e5e5e5 url(//www.jlavz.fr/wp-content/themes/jlavz-one/img/pages/agence.jpg) center center no-repeat;
background-size: cover;
height: 100%;
width: 100%; }
#agence .wrapper .page {
margin-top: -143px;
background: #fff;
min-height: 30%;
padding: 50px;
width: 800px; }
#agence .wrapper .page .facts {
width: 100%; }
#agence.wrapper .page .facts li {
float: left;
width: 25%;
border-right: #fff 1px solid;
height: 97px;
background: #ccc;
text-align: center; }
#agence .wrapper .page .facts li .count {
font-size: 36px;
font-family: "Open Sans", sans-serif;
color: #ccc;
background: #fff;
padding: 5px 20px;
display: inline-block;
margin-bottom: 10px;
font-weight: 600; }
#agence .wrapper .page .facts li .title {
font-size: 14px;
font-family: "antonioregular", sans-serif;
color: #fff;
text-transform: uppercase;
display: block; }
#agence .wrapper .page .facts li:hover {
background: #009999; }
#agence .wrapper .page .facts li:hover .count {
color: #009999; }
#agence .wrapper .page .clients li {
float: left;
width: 25%;
border-right: #fff 1px solid;
text-align: center;
position: relative;
margin-bottom: 1px; }
#agence .wrapper .page .clients li img {
width: 100%;
display: block; } #composition .wrapper {
height: 65%;
width: 100%;
position: absolute;
top: 0;
left: 0; }
#composition .wrapper .img-holder {
background: #e5e5e5 url(//www.jlavz.fr/wp-content/themes/jlavz-one/img/pages/composition.jpg) center center no-repeat;
background-size: cover;
height: 100%;
width: 100%; }
#composition .wrapper .page {
margin-top: -143px;
background: #fff;
min-height: 30%;
padding: 50px;
width: 800px; }
#composition .wrapper .page .facts {
width: 100%; }
#composition .wrapper .page .facts li {
float: left;
width: 25%;
border-right: #fff 1px solid;
height: 97px;
background: #ccc;
text-align: center; }
#composition .wrapper .page .facts li .count {
font-size: 36px;
font-family: "Open Sans", sans-serif;
color: #ccc;
background: #fff;
padding: 5px 20px;
display: inline-block;
margin-bottom: 10px;
font-weight: 600; }
#composition .wrapper .page .facts li .title {
font-size: 14px;
font-family: "antonioregular", sans-serif;
color: #fff;
text-transform: uppercase;
display: block; }
#composition .wrapper .page .facts li:hover {
background: #009999; }
#composition .wrapper .page .facts li:hover .count {
color: #009999; }
#composition .wrapper .page .clients li {
float: left;
width: 25%;
border-right: #fff 1px solid;
text-align: center;
position: relative;
margin-bottom: 1px; }
#composition .wrapper .page .clients li img {
width: 100%;
display: block; } #strategie .wrapper {
height: 65%;
width: 100%;
position: absolute;
top: 0;
left: 0; }
#strategie .wrapper .img-holder {
background: #e5e5e5 url(//www.jlavz.fr/wp-content/themes/jlavz-one/img/pages/strategie.jpg) center center no-repeat;
background-size: cover;
height: 100%;
width: 100%; }
#strategie .wrapper .page {
margin-top: -143px;
background: #fff;
min-height: 30%;
padding: 50px;
width: 800px; }
#strategie .wrapper .page .facts {
width: 100%; }
#strategie .wrapper .page .facts li {
float: left;
width: 25%;
border-right: #fff 1px solid;
height: 97px;
background: #ccc;
text-align: center; }
#strategie .wrapper .page .facts li .count {
font-size: 36px;
font-family: "Open Sans", sans-serif;
color: #ccc;
background: #fff;
padding: 5px 20px;
display: inline-block;
margin-bottom: 10px;
font-weight: 600; }
#strategie .wrapper .page .facts li .title {
font-size: 14px;
font-family: "antonioregular", sans-serif;
color: #fff;
text-transform: uppercase;
display: block; }
#strategie .wrapper .page .facts li:hover {
background: #009999; }
#strategie .wrapper .page .facts li:hover .count {
color: #009999; }
#strategie .wrapper .page .clients li {
float: left;
width: 25%;
border-right: #fff 1px solid;
text-align: center;
position: relative;
margin-bottom: 1px; }
#strategie .wrapper .page .clients li img {
width: 100%;
display: block; } #blog .wrapper {
height: 65%;
width: 100%;
position: absolute;
top: 0;
left: 0; }
#blog .wrapper .img-holder {
background: #e5e5e5 url(//www.jlavz.fr/wp-content/themes/jlavz-one/img/pages/blog.jpg) center center no-repeat;
background-size: cover;
height: 100%;
width: 100%; }
#blog .wrapper .page {
margin-top: -350px;
background: #fff;
min-height: 30%;
padding: 50px;
width: 800px; }
#blog .wrapper .page .blog-nav {
padding-top: 0px;
margin-top: 40px;
float: left;
width: 100%;
clear: both;
background: #f5f5f5; }
#blog .wrapper .page .blog-nav a {
display: inline-block;
background: #f5f5f5;
padding: 10px;
color: #666;
font-family: "antoniobold", sans-serif;
text-transform: uppercase;
font-size: 14px; }
#blog .wrapper .page .blog-nav a.older {
float: left; }
#blog .wrapper .page .blog-nav a.older i {
position: relative;
padding: 8px; }
#blog .wrapper .page .blog-nav a.older i:before {
content: "";
width: 7px;
border-left: #666 2px solid;
border-bottom: #666 2px solid;
height: 7px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
-webkit-transform: translate(-50%, -50%) rotate(45deg);
-o-transform: translate(-50%, -50%) rotate(45deg);
-moz-transform: translate(-50%, -50%) rotate(45deg);
-ms-transform: translate(-50%, -50%) rotate(45deg); }
#blog .wrapper .page .blog-nav a.newer {
float: right; }
#blog .wrapper .page .blog-nav a.newer i {
position: relative;
padding: 8px; }
#blog .wrapper .page .blog-nav a.newer i:before {
content: "";
width: 7px;
border-right: #666 2px solid;
border-top: #666 2px solid;
height: 7px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
-webkit-transform: translate(-50%, -50%) rotate(45deg);
-o-transform: translate(-50%, -50%) rotate(45deg);
-moz-transform: translate(-50%, -50%) rotate(45deg);
-ms-transform: translate(-50%, -50%) rotate(45deg); }
#blog .wrapper .page .blog-nav a:hover {
background: #009999;
color: #fff; }
#blog .wrapper .page .blog-nav a:hover.newer i:before {
content: "";
width: 7px;
border-right: #fff 2px solid;
border-top: #fff 2px solid;
height: 7px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
-webkit-transform: translate(-50%, -50%) rotate(45deg);
-o-transform: translate(-50%, -50%) rotate(45deg);
-moz-transform: translate(-50%, -50%) rotate(45deg);
-ms-transform: translate(-50%, -50%) rotate(45deg); }
#blog .wrapper .page .blog-nav a:hover.older i:before {
content: "";
width: 7px;
border-left: #fff 2px solid;
border-bottom: #fff 2px solid;
height: 7px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
-webkit-transform: translate(-50%, -50%) rotate(45deg);
-o-transform: translate(-50%, -50%) rotate(45deg);
-moz-transform: translate(-50%, -50%) rotate(45deg);
-ms-transform: translate(-50%, -50%) rotate(45deg); }
#blog .wrapper .page.with-aside {
background: transparent;
width: 1040px;
padding: 0; }
#blog .wrapper .page.with-aside section.main {
float: left;
width: 67%;
padding-right: 20px; }
#blog .wrapper .page.with-aside section.main .content {
width: 100%;
background: #fff;
padding: 50px; }
#blog .wrapper .page.with-aside aside {
width: 33%;
float: right;
background: #fff;
padding: 50px; }
#blog .wrapper .page.with-aside aside section {
margin-bottom: 30px; }
#blog .wrapper .page.with-aside aside p {
font-size: 13px;
line-height: 22px;
color: #777; }
#blog .wrapper .page.with-aside aside h4 {
padding-bottom: 10px; }
#blog .wrapper .page.with-aside aside #search {
width: 100%; }
#blog .wrapper .page.with-aside aside #search input[type=search] {
background: #eee;
border: none;
height: 36px;
color: #666;
padding: 0 10px;
float: left;
width: 80%; }
#blog .wrapper .page.with-aside aside #search button {
float: right;
background: #009999;
color: #fff;
border: none;
width: 20%;
height: 36px; }
#blog .wrapper .page.with-aside aside .category ul li {
padding-top: 7px; }
#blog .wrapper .page.with-aside aside .category ul li a {
font-size: 13px; }
#blog .wrapper .page.with-aside aside .tabs .nav {
border-bottom: #f5f5f5 2px solid; }
#blog .wrapper .page.with-aside aside .tabs .nav a {
width: 50%;
padding: 10px 0;
text-align: center;
display: inline-block;
font-size: 14px;
font-family: "antonioregular", sans-serif;
color: #000; }
#blog .wrapper .page.with-aside aside .tabs .nav a.selected {
background: #f5f5f5; }
#blog .wrapper .page.with-aside aside .tabs .tab {
display: none;
padding-top: 5px; }
#blog .wrapper .page.with-aside aside .tabs .tab.selected {
display: block; }
#blog .wrapper .page.with-aside aside .tabs .tab li {
padding-bottom: 10px;
border-bottom: #f5f5f5 2px solid;
margin-top: 7px; }
#blog .wrapper .page.with-aside aside .tabs .tab li p {
margin-bottom: 0px;
font-size: 14px;
line-height: 22px; }
#blog .wrapper .page.with-aside aside .tabs .tab li .date {
font-size: 11px;
color: #777; }
#blog .wrapper .page h1 {
margin-bottom: 0px; }
#blog .wrapper .page article {
margin-top: -25px; }
#blog .wrapper .page article .date {
background: #fff;
position: relative;
bottom: -60px;
padding: 10px;
font-family: "antoniobold", sans-serif;
color: #000;
text-align: center;
width: 42px;
height: 60px;
z-index: 10; }
#blog .wrapper .page article .date .day {
font-size: 23px; }
#blog .wrapper .page article .date .month {
font-size: 16px;
text-transform: uppercase;
display: block;
padding-top: 3px; }
#blog .wrapper .page article figure {
width: 100%;
margin-bottom: 18px; }
#blog .wrapper .page article figure img {
width: 100%; }
#blog .wrapper .page article h2 {
margin-bottom: 12px; }
#blog .wrapper .page article .audio {
width: 100%;
text-align: center;
height: 120px;
background: #009999;
position: relative;
margin-bottom: 18px; }
#blog .wrapper .page article .audio audio {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); }
#blog .wrapper .page article .video {
margin-bottom: 18px; }
#blog .wrapper .page article .body p {
margin-bottom: 10px;
font-size: 13px; }
#blog .wrapper .page article .body p.lead {
font-size: 14px;
font-weight: 600; }
#blog .wrapper .page article .meta {
font-size: 13px;
margin-bottom: 20px; }
#blog .wrapper .page article .meta a {
padding-right: 10px; }
#blog .wrapper .page article .meta i {
color: #666; }
#blog .wrapper .page .blog-share {
margin-top: 20px; }
#blog .wrapper .page .blog-share a {
height: 44px;
width: 30px;
display: block;
color: #fff;
background: #999;
margin-right: 1px;
float: left;
position: relative;
font-size: 13px;
margin-top: 10px; }
#blog .wrapper .page .blog-share a i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); }
#blog .wrapper .page .blog-share a:hover {
background: #009999; } #portfolio .slider-nav {
display: none; }
#portfolio .wrapper {
background: #e5e5e5;
min-height: 100%;
transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-webkit-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-moz-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-o-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-ms-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1); }
#portfolio .wrapper.hidden {
opacity: 0; }
#portfolio .filters {
float: left;
margin: 30px 0 20px 0; }
#portfolio .filters li {
float: left;
margin: 0 1px 1px 0; }
#portfolio .filters li a {
float: left;
padding: 10px;
background: #fff;
text-transform: uppercase;
color: #000;
font-size: 14px;
font-family: "antonioregular", sans-serif;
transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-webkit-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-moz-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-o-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-ms-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1); }
#portfolio .filters li a:hover, #portfolio .filters li a.active {
background: #009999;
color: #fff; }
#portfolio.fullscreen .filters {
position: absolute;
top: 0;
right: 0;
z-index: 10;
margin: 0; }
#portfolio.fullscreen .filters li {
margin: 0 0 0 1px; }
#portfolio.fullscreen .projects .item {
margin-top: 0;
margin-bottom: 1px;
width: 20%;
margin-right: 0; }
#portfolio .projects {
clear: both;
padding-bottom: 30px; }
#portfolio .projects .item {
float: left;
width: 33.33%;
padding-right: 0;
border-right: #e5e5e5 1px solid;
margin-top: 1px;
background: #000;
cursor: pointer;
display: none;
position: relative; }
#portfolio .projects .item:hover .caption {
background: #009999; }
#portfolio .projects .item:hover .caption h5 {
color: #fff; }
#portfolio .projects .item:hover .caption span {
color: #ddd; }
#portfolio .projects .item:hover .mask {
pointer-events: auto; }
#portfolio .projects .item:hover .mask:before {
content: "";
width: 24px;
border-top: #fff 2px solid;
border-bottom: transparent 0px solid;
height: 0;
margin-bottom: 1px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); }
#portfolio .projects .item:hover .mask:after {
content: "";
width: 24px;
border-top: #fff 2px solid;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(90deg);
-webkit-transform: translate(-50%, -50%) rotate(90deg);
-o-transform: translate(-50%, -50%) rotate(90deg);
-moz-transform: translate(-50%, -50%) rotate(90deg);
-ms-transform: translate(-50%, -50%) rotate(90deg); }
#portfolio .projects .item:hover figure img {
opacity: 0.5 !important; }
#portfolio .projects .item .mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-webkit-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-moz-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-o-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-ms-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1); }
#portfolio .projects .item figure {
width: 100%;
height: 250px;
overflow: hidden;
text-align: center;
position: relative; }
#portfolio .projects .item figure img {
height: 100%;
transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-webkit-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-moz-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-o-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-ms-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
opacity: 0; }
#portfolio .projects .item .caption {
background: #fff;
padding: 8px 10px;
text-align: center;
transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-webkit-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-moz-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-o-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-ms-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1); }
#portfolio .projects .item .caption h4 {
margin-bottom: 5px;
transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-webkit-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-moz-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-o-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-ms-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1); }
#portfolio .projects .item .caption span {
font-size: 12px;
color: #999;
font-family: "Open Sans", sans-serif;
transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-webkit-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-moz-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-o-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-ms-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1); }
#portfolio .projects .item .data {
display: none; }
#portfolio .projects.four-cols .item {
width: 25%; }
#portfolio .projects.two-cols .item {
width: 50%; }
#portfolio .projects.two-cols .item figure {
height: 320px; }
#portfolio .projects.two-cols .item figure img {
width: 100%;
height: auto; }  .popup {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 21;
transition: all 0.5s cubic-bezier(0.8, 0, 0.5, 1);
-webkit-transition: all 0.5s cubic-bezier(0.8, 0, 0.5, 1);
-moz-transition: all 0.5s cubic-bezier(0.8, 0, 0.5, 1);
-o-transition: all 0.5s cubic-bezier(0.8, 0, 0.5, 1);
-ms-transition: all 0.5s cubic-bezier(0.8, 0, 0.5, 1);
transform: scale(0);
-webkit-transform: scale(0);
-o-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
opacity: 0;
background: #009999; }
.popup.active {
transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
opacity: 1; }
.popup .popup-wrapper {
width: 750px;
height: 100%;
margin: 0 auto 0 auto;
position: relative;
padding-top: 60px; }
.popup .popup-wrapper .slider {
width: 100%;
height: 60%;
min-height: 300px;
position: relative;
padding: 5px;
background: #fff; }
.popup .popup-wrapper .desc {
position: relative;
width: 100%;
min-height: 30%;
background: #fff;
padding: 30px;
margin-bottom: 30px; }
.popup .popup-wrapper .desc.empty {
display: none; }
.popup .popup-wrapper .desc h3 {
font-size: 18px;
font-family: "antoniobold", sans-serif;
color: #000;
margin-bottom: 20px; }
.popup .popup-wrapper .desc h5 {
margin-top: 20px; }
.popup .popup-wrapper .desc p {
font-family: "Open Sans", sans-serif;
font-size: 14px;
line-height: 21px;
color: #666;
margin-bottom: 10px; }
.popup figure {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 5px; }
.popup figure div {
width: 100%;
height: 100%;
background-size: cover; }
.popup figure div p {
position: absolute;
left: 63px;
bottom: 0px;
line-height: inherit;
background: #fff;
padding: 14px 10px;
font-size: 16px;
text-transform: uppercase;
font-family: "antonioregular", sans-serif;
margin-bottom: 1px;
color: #000; }
.popup .popup-nav .next, .popup .popup-nav .prev {
display: block;
width: 30px;
height: 44px;
color: #000;
bottom: 6px;
position: absolute;
background: #fff;
transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-webkit-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-moz-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-o-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-ms-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1); }
.popup .popup-nav .next:after, .popup .popup-nav .next:before, .popup .popup-nav .prev:after, .popup .popup-nav .prev:before {
transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-webkit-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-moz-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-o-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-ms-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1); }
.popup .popup-nav .next:hover, .popup .popup-nav .prev:hover {
background: #009999; }
.popup .popup-nav .next {
left: 37px; }
.popup .popup-nav .next:before {
content: "";
width: 10px;
border-right: #000 2px solid;
border-top: #000 2px solid;
height: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
-webkit-transform: translate(-50%, -50%) rotate(45deg);
-o-transform: translate(-50%, -50%) rotate(45deg);
-moz-transform: translate(-50%, -50%) rotate(45deg);
-ms-transform: translate(-50%, -50%) rotate(45deg); }
.popup .popup-nav .next:hover {
background: #009999; }
.popup .popup-nav .next:hover:before {
content: "";
width: 10px;
border-right: #fff 2px solid;
border-top: #fff 2px solid;
height: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
-webkit-transform: translate(-50%, -50%) rotate(45deg);
-o-transform: translate(-50%, -50%) rotate(45deg);
-moz-transform: translate(-50%, -50%) rotate(45deg);
-ms-transform: translate(-50%, -50%) rotate(45deg); }
.popup .popup-nav .prev {
left: 6px; }
.popup .popup-nav .prev:before {
content: "";
width: 10px;
border-left: #000 2px solid;
border-bottom: #000 2px solid;
height: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
-webkit-transform: translate(-50%, -50%) rotate(45deg);
-o-transform: translate(-50%, -50%) rotate(45deg);
-moz-transform: translate(-50%, -50%) rotate(45deg);
-ms-transform: translate(-50%, -50%) rotate(45deg); }
.popup .popup-nav .prev:hover {
background: #009999; }
.popup .popup-nav .prev:hover:before {
content: "";
width: 10px;
border-left: #fff 2px solid;
border-bottom: #fff 2px solid;
height: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
-webkit-transform: translate(-50%, -50%) rotate(45deg);
-o-transform: translate(-50%, -50%) rotate(45deg);
-moz-transform: translate(-50%, -50%) rotate(45deg);
-ms-transform: translate(-50%, -50%) rotate(45deg); }
.popup .popup-controls {
z-index: 110; }
.popup .popup-controls li {
float: right;
margin-left: 1px;
position: relative; }
.popup .popup-controls li a {
width: 30px;
height: 44px;
display: block;
background: #fff;
color: #000;
font-size: 13px;
transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-webkit-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-moz-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-o-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-ms-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1); }
.popup .popup-controls li a:hover {
color: #fff;
background: #009999; }
.popup .popup-controls li a i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); }
.popup .popup-controls li.close {
position: absolute;
top: 5px;
right: 5px; }
.popup .popup-controls li.close:before {
content: "";
width: 13px;
border-top: #000 2px solid;
border-bottom: transparent 0px solid;
height: 0;
padding: 0;
margin-bottom: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
-webkit-transform: translate(-50%, -50%) rotate(45deg);
-o-transform: translate(-50%, -50%) rotate(45deg);
-moz-transform: translate(-50%, -50%) rotate(45deg);
-ms-transform: translate(-50%, -50%) rotate(45deg); }
.popup .popup-controls li.close:after {
content: "";
width: 13px;
height: 0;
margin-top: 0;
border-bottom: #000 2px solid;
border-top: transparent 0px solid;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(135deg);
-webkit-transform: translate(-50%, -50%) rotate(135deg);
-o-transform: translate(-50%, -50%) rotate(135deg);
-moz-transform: translate(-50%, -50%) rotate(135deg);
-ms-transform: translate(-50%, -50%) rotate(135deg); }
.popup .popup-controls li.close:hover:before {
content: "";
width: 13px;
border-top: #fff 2px solid;
border-bottom: transparent 0px solid;
height: 0;
padding: 0;
margin-bottom: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
-webkit-transform: translate(-50%, -50%) rotate(45deg);
-o-transform: translate(-50%, -50%) rotate(45deg);
-moz-transform: translate(-50%, -50%) rotate(45deg);
-ms-transform: translate(-50%, -50%) rotate(45deg); }
.popup .popup-controls li.close:hover:after {
content: "";
width: 13px;
height: 0;
margin-top: 0;
border-bottom: #fff 2px solid;
border-top: transparent 0px solid;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(135deg);
-webkit-transform: translate(-50%, -50%) rotate(135deg);
-o-transform: translate(-50%, -50%) rotate(135deg);
-moz-transform: translate(-50%, -50%) rotate(135deg);
-ms-transform: translate(-50%, -50%) rotate(135deg); }
.popup .popup-controls li.share {
position: absolute;
bottom: 6px;
right: 6px; }
.popup .popup-controls li.info {
display: none; }
.popup .popup-controls li.compress {
display: none; }
.popup .popup-controls li ul.share-icons {
position: absolute;
right: 31px;
bottom: 0;
width: 0px;
height: 44px;
overflow: hidden;
pointer-events: none;
transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-webkit-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-moz-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-o-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-ms-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1); }
.popup .popup-controls li ul.share-icons li {
pointer-events: auto; }
.popup .popup-controls li ul.share-icons.active {
width: 200px; } .popup.fullscreen .popup-wrapper, .popup.fullscreen .slider {
width: 100%;
height: 100%;
padding: 0;
background: #009999; }
.popup.fullscreen .desc {
position: absolute;
right: 0;
bottom: 0px;
width: 50%;
height: auto;
min-height: 0;
padding: 30px;
overflow: hidden;
opacity: 0;
margin-bottom: 0px;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transition: all 0.5s cubic-bezier(0.8, 0, 0.5, 1);
-webkit-transition: all 0.5s cubic-bezier(0.8, 0, 0.5, 1);
-moz-transition: all 0.5s cubic-bezier(0.8, 0, 0.5, 1);
-o-transition: all 0.5s cubic-bezier(0.8, 0, 0.5, 1);
-ms-transition: all 0.5s cubic-bezier(0.8, 0, 0.5, 1); }
.popup.fullscreen .desc.show {
bottom: 0;
height: auto;
padding: 30px;
opacity: 1; }
.popup.fullscreen figure {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0; }
.popup.fullscreen figure div {
width: 100%;
height: 100%;
background-size: cover; }
.popup.fullscreen figure div p {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
bottom: 0;
background: #fff;
padding: 15px 10px;
font-size: 16px;
text-transform: uppercase;
font-family: "antonioregular", sans-serif;
margin-bottom: 0;
color: #000;
line-height: inherit; }
.popup.fullscreen .img-counter {
position: absolute;
top: 50%;
transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
left: 0;
z-index: 110;
width: 40px;
height: 44px;
display: block;
background: #fff;
color: #000;
font-size: 16px;
font-family: "antonioregular", sans-serif; }
.popup.fullscreen .img-counter div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); }
.popup.fullscreen .popup-nav .next, .popup.fullscreen .popup-nav .prev {
display: block;
width: 30px;
height: 44px;
color: #000;
bottom: 0;
background: #fff;
position: absolute;
top: 50%;
transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-webkit-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-moz-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-o-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-ms-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1); }
.popup.fullscreen .popup-nav .next:after, .popup.fullscreen .popup-nav .next:before, .popup.fullscreen .popup-nav .prev:after, .popup.fullscreen .popup-nav .prev:before {
transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-webkit-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-moz-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-o-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-ms-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1); }
.popup.fullscreen .popup-nav .next:hover, .popup.fullscreen .popup-nav .prev:hover {
background: #009999; }
.popup.fullscreen .popup-nav .next {
left: auto;
right: -30px; }
.popup.fullscreen .popup-nav .next:before {
content: "";
width: 10px;
border-right: #000 2px solid;
border-top: #000 2px solid;
height: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
-webkit-transform: translate(-50%, -50%) rotate(45deg);
-o-transform: translate(-50%, -50%) rotate(45deg);
-moz-transform: translate(-50%, -50%) rotate(45deg);
-ms-transform: translate(-50%, -50%) rotate(45deg); }
.popup.fullscreen .popup-nav .next:hover {
background: #009999; }
.popup.fullscreen .popup-nav .next:hover:before {
content: "";
width: 10px;
border-right: #fff 2px solid;
border-top: #fff 2px solid;
height: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
-webkit-transform: translate(-50%, -50%) rotate(45deg);
-o-transform: translate(-50%, -50%) rotate(45deg);
-moz-transform: translate(-50%, -50%) rotate(45deg);
-ms-transform: translate(-50%, -50%) rotate(45deg); }
.popup.fullscreen .popup-nav .prev {
left: -30px; }
.popup.fullscreen .popup-nav .prev:before {
content: "";
width: 10px;
border-left: #000 2px solid;
border-bottom: #000 2px solid;
height: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
-webkit-transform: translate(-50%, -50%) rotate(45deg);
-o-transform: translate(-50%, -50%) rotate(45deg);
-moz-transform: translate(-50%, -50%) rotate(45deg);
-ms-transform: translate(-50%, -50%) rotate(45deg); }
.popup.fullscreen .popup-nav .prev:hover {
background: #009999; }
.popup.fullscreen .popup-nav .prev:hover:before {
content: "";
width: 10px;
border-left: #fff 2px solid;
border-bottom: #fff 2px solid;
height: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
-webkit-transform: translate(-50%, -50%) rotate(45deg);
-o-transform: translate(-50%, -50%) rotate(45deg);
-moz-transform: translate(-50%, -50%) rotate(45deg);
-ms-transform: translate(-50%, -50%) rotate(45deg); }
.popup.fullscreen .popup-controls {
position: absolute;
top: 50%;
transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
right: 0;
z-index: 110; }
.popup.fullscreen .popup-controls li {
float: right;
margin-left: 1px;
position: relative; }
.popup.fullscreen .popup-controls li a {
width: 30px;
height: 44px;
display: block;
background: #fff;
color: #000;
font-size: 13px;
transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-webkit-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-moz-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-o-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-ms-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1); }
.popup.fullscreen .popup-controls li a:hover {
color: #fff;
background: #009999; }
.popup.fullscreen .popup-controls li a i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); }
.popup.fullscreen .popup-controls li.close {
top: 0;
right: 0; }
.popup.fullscreen .popup-controls li.close:before {
content: "";
width: 13px;
border-top: #000 2px solid;
border-bottom: transparent 0px solid;
height: 0;
padding: 0;
margin-bottom: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
-webkit-transform: translate(-50%, -50%) rotate(45deg);
-o-transform: translate(-50%, -50%) rotate(45deg);
-moz-transform: translate(-50%, -50%) rotate(45deg);
-ms-transform: translate(-50%, -50%) rotate(45deg); }
.popup.fullscreen .popup-controls li.close:after {
content: "";
width: 13px;
height: 0;
margin-top: 0;
border-bottom: #000 2px solid;
border-top: transparent 0px solid;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(135deg);
-webkit-transform: translate(-50%, -50%) rotate(135deg);
-o-transform: translate(-50%, -50%) rotate(135deg);
-moz-transform: translate(-50%, -50%) rotate(135deg);
-ms-transform: translate(-50%, -50%) rotate(135deg); }
.popup.fullscreen .popup-controls li.close:hover:before {
content: "";
width: 13px;
border-top: #fff 2px solid;
border-bottom: transparent 0px solid;
height: 0;
padding: 0;
margin-bottom: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
-webkit-transform: translate(-50%, -50%) rotate(45deg);
-o-transform: translate(-50%, -50%) rotate(45deg);
-moz-transform: translate(-50%, -50%) rotate(45deg);
-ms-transform: translate(-50%, -50%) rotate(45deg); }
.popup.fullscreen .popup-controls li.close:hover:after {
content: "";
width: 13px;
height: 0;
margin-top: 0;
border-bottom: #fff 2px solid;
border-top: transparent 0px solid;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(135deg);
-webkit-transform: translate(-50%, -50%) rotate(135deg);
-o-transform: translate(-50%, -50%) rotate(135deg);
-moz-transform: translate(-50%, -50%) rotate(135deg);
-ms-transform: translate(-50%, -50%) rotate(135deg); }
.popup.fullscreen .popup-controls li.share {
bottom: 0;
right: 0; }
.popup.fullscreen .popup-controls li.compress, .popup.fullscreen .popup-controls li.info {
display: block; }
.popup.fullscreen .popup-controls li.compress.hide, .popup.fullscreen .popup-controls li.info.hide {
display: none; }
.popup.fullscreen .popup-controls li ul.share-icons {
position: absolute;
right: 31px;
top: 0;
width: 0px;
height: 44px;
overflow: hidden;
pointer-events: none;
transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-webkit-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-moz-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-o-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1);
-ms-transition: all 0.2s cubic-bezier(0.8, 0, 0.5, 1); }
.popup.fullscreen .popup-controls li ul.share-icons li {
pointer-events: auto; }
.popup.fullscreen .popup-controls li ul.share-icons.active {
width: 200px; } .page {
width: 1090px;
min-height: 100%;
margin: 0 auto;
margin-bottom: 30px; }
.page section {
margin-bottom: 50px;
width: 100%;
clear: both;
float: left; }
.fullscreen .page {
width: 100%; }
footer {
font-size: 10px;
color: #777;
font-family: "Open Sans", sans-serif;
margin-top: 10px;
text-align: left;
bottom: 10px;
right: 30px; }
.baseline {
text-align: left;
float: left;
}
.mentions p {
text-align: right;
float: left; }  @-webkit-keyframes fade {
0% {
opacity: 1; }
100% {
opacity: .5; } }
@keyframes fade {
0% {
opacity: 1; }
100% {
opacity: .5; } }
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }   .clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.clearfix:after {
clear: both;
content: '';
display: block;
font-size: 0;
line-height: 0;
visibility: hidden;
width: 0;
height: 0; }@media (max-width: 1450px) {
#portfolio .page {
padding-top: 45px; } }
@media (max-width: 1360px) {
#portfolio.fullscreen .page {
padding-top: 0; } }
@media (max-width: 1170px) {
.page {
width: 100% !important; }
#graphisme .wrapper .page, #webdesign .wrapper .page, #musique .wrapper .page, #composition .wrapper .page, #strategie .wrapper .page, #parcours .wrapper .page, #contact .wrapper .page, #blog .wrapper .page {
width: 800px !important;
margin-top: -44px; }
#portfolio.fullscreen .projects .item {
width: 33.33%; }
#portfolio .projects.two-cols .item figure {
height: 250px; }
#portfolio .projects.four-cols .item figure {
height: 200px; } }
@media (max-width: 880px) {
#blog .wrapper .page.with-aside section.main {
float: none;
width: 100%;
padding-right: 0; }
#blog .wrapper .page.with-aside aside {
width: 100%;
float: none; }
#home .caption.visible {
left: 100px; } }
@media (max-width: 800px) {
#graphisme .wrapper .page, #webdesign .wrapper .page, #musique .wrapper .page, #composition .wrapper .page, #strategie .wrapper .page, #parcours .wrapper .page, #contact .wrapper .page, #blog .wrapper .page {
width: 100% !important; }
#portfolio.fullscreen .projects .item {
width: 50%; }
#portfolio.fullscreen .projects .item figure {
height: 200px; }
#portfolio .projects .item figure {
height: 200px; }
#portfolio .projects .item figure img {
height: auto; }
#portfolio .projects.two-cols .item figure {
height: 200px; }
#portfolio .projects.four-cols .item {
width: 33.33%; }
#portfolio .popup {
margin-top: 44px; }
#portfolio .popup .popup-wrapper {
width: 100%;
padding-top: 0px; } }
@media (max-width: 680px) {
nav.main.hidden {
left: 100px; }
#home .caption.visible {
left: 60px; }
#blog .wrapper .page.with-aside section.main .content {
padding: 50px 0; }
#graphisme .wrapper .page, #webdesign .wrapper .page, #musique .wrapper .page, #composition .wrapper .page, #strategie .wrapper .page, #parcours .wrapper .page, #contact .wrapper .page, #blog .wrapper .page {
padding: 50px 0; }
#about .wrapper .page .clients li, #contact .wrapper .page .clients li, #blog .wrapper .page .clients li {
width: 50%; }
#about .wrapper .page .facts li, #contact .wrapper .page .facts li, #blog .wrapper .page .facts li {
width: 50%;
margin-bottom: 1px; }
#portfolio .projects .item {
width: 100% !important; }
#portfolio .projects .item figure {
height: 300px !important; } }
@media (max-width: 512px) {
#contact .wrapper .page .address, #contact .wrapper .page .contact-form {
float: none;
width: 100%; }
#portfolio.fullscreen .filters {
margin-top: 45px;
left: 0;
right: auto; }
#portfolio .projects .item figure {
height: 200px !important;
text-transform: inherit; }
nav.main {
left: 60px; }
nav.main li ul li a {
font-size: 13px;
font-family: "antonioregular", sans-serif; }
#home .caption.visible {
max-width: 250px; }
#home .caption h1 {
font-size: 30px; }
#home .caption small {
font-size: 13px; } }
@media (max-width: 400px) {
#about .wrapper .page, #contact .wrapper .page, #blog .wrapper .page {
padding: 50px 0; }
#about .wrapper .page .clients li, #contact .wrapper .page .clients li, #blog .wrapper .page .clients li {
width: 50%; }
#about .wrapper .page .facts li, #contact .wrapper .page .facts li, #blog .wrapper .page .facts li {
width: 50%;
margin-bottom: 1px; }
body {
padding-top: 0; }
body#home {
padding-top: 44px; }
#portfolio .projects .item figure {
height: 160px !important; }
.social-icons {
position: fixed;
top: 30px;
transform: none;
-webkit-transform: none;
-moz-transform: none;
-o-transform: none;
-ms-transform: none; }
#home .caption.visible {
left: 30px;
max-width: 250px; }
#home .caption h1 {
font-size: 30px; }
#home .caption small {
font-size: 13px; } }