/*
Design : POINTBARRE.CA
Code   : christianthibault.com
*/

/* #Font-Face */
@font-face {
    font-family: 'ProximaNovaRgRegular';
    src: url('fonts/proxima_nova_reg-webfont.eot');
    src: url('fonts/proxima_nova_reg-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/proxima_nova_reg-webfont.woff') format('woff'),
         url('fonts/proxima_nova_reg-webfont.ttf') format('truetype'),
         url('fonts/proxima_nova_reg-webfont.svg#ProximaNovaRgRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ProximaNovaRgItalic';
    src: url('fonts/proxima_nova_reg_it-webfont.eot');
    src: url('fonts/proxima_nova_reg_it-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/proxima_nova_reg_it-webfont.woff') format('woff'),
         url('fonts/proxima_nova_reg_it-webfont.ttf') format('truetype'),
         url('fonts/proxima_nova_reg_it-webfont.svg#ProximaNovaRgItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ProximaNovaRgBold';
    src: url('fonts/proxima_nova_bold-webfont.eot');
    src: url('fonts/proxima_nova_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/proxima_nova_bold-webfont.woff') format('woff'),
         url('fonts/proxima_nova_bold-webfont.ttf') format('truetype'),
         url('fonts/proxima_nova_bold-webfont.svg#ProximaNovaRgBold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ProximaNovaRgBoldItalic';
    src: url('fonts/proxima_nova_bold_it-webfont.eot');
    src: url('fonts/proxima_nova_bold_it-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/proxima_nova_bold_it-webfont.woff') format('woff'),
         url('fonts/proxima_nova_bold_it-webfont.ttf') format('truetype'),
         url('fonts/proxima_nova_bold_it-webfont.svg#ProximaNovaRgBoldItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

body { height: 100%; background-color: #f4f4ea; font-family: 'ProximaNovaRgRegular', sans-serif; color: #000; margin: 0; padding: 0; }
em { font-family: 'ProximaNovaRgItalic', sans-serif; }
table { width: 100%; height: 100vh; }
td { text-align: center; vertical-align: middle; }
strong { font-family: 'ProximaNovaRgBold', sans-serif; }

#logo { position: fixed; z-index: 10; width: 31%; margin: auto; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
#logo a img { width: 100%; }

#bonbon { position: fixed; z-index: 0; display: block; width: 100%; height: 100%; margin: 0; opacity: 0; }
#bonbon img { width: 100%; }

#nav { position: fixed; z-index: 20; right: 1.16%; top: 10px; width: 310px; height: 120px; text-align: right; font-size: 13px; line-height: 18px; }
#nav a.langue, 
#nav ul li a { background-color: #f4f4ea; color: #000; text-transform: uppercase; text-decoration: none; padding: 0 0 0 3px; }
#nav a.langue:hover, 
#nav ul li a:hover { text-decoration: underline; }
#nav ul li:last-child { margin-top: 18px; }
#instagram, 
#pinterest, 
#twitter, 
#facebook, 
#burger { display: inline-block; position: absolute; top: 0; width: 20px; height: 15px; background-repeat: no-repeat; background-size: 20px 15px; cursor: pointer; }
#burger { left: 123px; background-image: url(images/menu.gif); }
#facebook { left: 92px; background-image: url(images/facebook.png); }
#twitter { left: 61px; background-image: url(images/twitter.png); }
#pinterest { left: 30px; background-image: url(images/pinterest.png); }
#instagram { left: 0; background-image: url(images/instagram.png); }

h3 { font-family: 'ProximaNovaRgBold', sans-serif; font-size: 23px; line-height: 39px; font-size: 2.9vw; line-height: 3.2vw; text-align: center; text-transform: uppercase; margin: 0 10px; }
h3 em { font-family: 'ProximaNovaRgBoldItalic', sans-serif; }

.designer { position: relative; }
.designer a { display: block; }
.designer a .survol { position: absolute; width: 100%; height: 99.7%; left: 0; top: 0; z-index: 10; background-color: #000; opacity: 0; font-size: 42px; font-size: 5vw; line-height: 60px; color: #f4f4ea; font-family: 'ProximaNovaRgBold', sans-serif; text-align: center; text-transform: uppercase; transition: all 0.2s ease-in-out 0s; line-height: 46vw; }  
.designer a:hover .survol { opacity: 1; }
.designer a img { width: 100%; }
.marigold a .survol { font-size: 3.5vw; }
.swedish a .survol { font-size: 2.8vw; }
.dagg-stacey a .survol { font-size: 2.8vw; }
.allison a .survol { font-size: 2.2vw; }

.espace, .deco { width: 100%; height: auto; }

#page-logo {  }
#page-logo a img { width: 100%; }

.one-half { text-align: center; }
.one-half .page-designer { display: block; font-family: 'ProximaNovaRgBold', sans-serif; font-size: 57px; line-height: 52px; font-size: 2.9vw; line-height: 2.7vw; color: #000; text-transform: uppercase; text-decoration: none; }
.one-half a.page-designer:hover { color: #fff; }

.one-half #coordonnees { font-family: 'ProximaNovaRgBold', sans-serif; font-size: 18px; font-size: 1.76vw; line-height: 2.06vw; color: #000; text-transform: uppercase; }
.one-quarter #vertical1 { display: block; font-family: 'ProximaNovaRgBold', sans-serif; font-size: 18px; font-size: 2.35vw; line-height: 2.75vw; color: #000; text-transform: uppercase; white-space: nowrap; transform: rotate(270deg); }
.one-quarter #vertical2 { display: block; font-family: 'ProximaNovaRgBold', sans-serif; font-size: 50px; font-size: 4vw; line-height: 4.4vw; color: #000; text-transform: uppercase; white-space: nowrap; transform: rotate(270deg); }
.one-quarter #vertical3 { display: block; font-family: 'ProximaNovaRgBold', sans-serif; font-size: 44px; font-size: 3.4vw; line-height: 3vw; color: #000; text-transform: uppercase; white-space: nowrap; transform: rotate(270deg); }
.one-quarter a, a.tel { color: #000; text-decoration: none; }
.one-quarter a:hover, a.tel:hover { text-decoration: underline; }

/*.one-half #tournee { font-size: 12px; font-size: 1.57vw; line-height: 1.83vw; }*/
.one-half #tournee { font-size: 12px; font-size: 1.37vw; line-height: 1.63vw; }
.one-half #tournee a { color: #000; text-decoration: underline; }
.one-half #tournee a:hover { text-decoration: none; background-color: #000; color: #f4f4ea; }

.one-half #tournee #rendezvous { text-decoration: none; background-color: #000; color: #f4f4ea; padding: 0 5px; }
.one-half #tournee #rendezvous:hover { text-decoration: none; background-color: transparent; color: #000; border: 1px #000 solid; }


#footer { position: fixed; left: 0; bottom: 16px; width: 100%; text-align: center; font-size: 10px; line-height: 12px; }
#footer span { background-color: #f4f4ea; }
#footer a { color: #000; text-decoration: none; }
#footer a:hover { text-decoration: underline; }

.slider {   position: relative; width: 100%; height: 100%; overflow: hidden; }
.slides { height: 100%; overflow: hidden; *zoom: 1; -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d; }
.slide { height: 100%; float: left; clear: none; }
.slider-nav { position: absolute; bottom: 30px; }
.slider-nav__item { width: 12px; height: 12px; float: left; clear: none; display: block; margin: 0 5px; background: #fff; }
.slider-nav__item:hover { background: #ccc; }
.slider-nav__item--current { background: #ccc; }

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    table { height: auto; }
    td.ajustement { padding: 0 0 55px; }
    #logo { width: 420px; top: 210px; }
    h3 { font-size: 32px; line-height: 40px; }
    .designer a .survol { font-size: 60px; line-height: 623px; }
    .marigold a .survol { font-size: 45px; }
    .espace { height: 180px; }
    .premier { height: 440px; }
    .one-quarter #page-logo { margin: 35px 0 40px; }
    .one-half .page-designer { font-size: 48px; line-height: 50px; }
    .one-half #tournee, 
    .one-half #coordonnees, 
    .one-half #coordonnees.fr { font-size: 30px; line-height: 34px; } 
    .one-half .flex-control-nav { display: none; }
    .one-quarter #vertical1 { font-size: 30px; line-height: 34px; margin-top: 108px; }
    .one-quarter #vertical2 { font-size: 50px; line-height: 55px; margin-top: 138px; }
    .one-quarter #vertical3 { font-size: 44px; line-height: 44px; margin-top: 160px; }
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
    table { height: auto; }
    td.ajustement { padding: 0; }
    #logo { width: 300px; top: 164px; }
    h3 { font-size: 24px; line-height: 30px; }
    .designer a .survol { font-size: 48px; line-height: 445px; }
    .marigold a .survol { font-size: 32px; }
    .espace { height: 100px; }
    .premier { height: 330px; }
    .one-quarter #page-logo { margin: 35px 0 40px; }
    .one-half .page-designer { font-size: 36px; line-height: 38px; }
    .one-half #tournee, 
    .one-half #coordonnees, 
    .one-half #coordonnees.fr { font-size: 22px; line-height: 25px; } 
    .one-half .flex-control-nav { display: none; }
    .one-quarter #vertical1 { font-size: 22px; line-height: 25px; margin-top: 96px; }
    .one-quarter #vertical2 { font-size: 30px; line-height: 33px; margin-top: 112px; }
    .one-quarter #vertical2 { font-size: 26px; line-height: 26px; margin-top: 124px; }
}