/*-- // Website by Holy Soakers // --*/ /*-- // Paris — Bruxelles // --*/ /*-- // visit us at http://www.holysoakers.com // --*/ /*----------------------------------------------------- 1. Normalize -------------------------------------------------------*/ 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;} /*----------------------- 2. Accessibility ------------------------*/ .screen-reader-text{clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute!important;width:1px;word-wrap:normal!important} .screen-reader-text:focus{background-color:#f1f1f1;-webkit-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 0 2px 2px rgba(0,0,0,0.6);box-shadow:0 0 2px 2px rgba(0,0,0,0.6);clip:auto!important;color:#21759b;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000} /*----------------------- 3. Clearing ------------------------*/ .clear{clear:both;} .clear:before,.clear:after,.entry-content:before,.entry-content:after,.entry-footer:before,.entry-footer:after,.comment-content:before,.comment-content:after,.site-header:before,.site-header:after,.site-content:before,.site-content:after,.site-footer:before,.site-footer:after,.nav-links:before,.nav-links:after,.pagination:before,.pagination:after,.comment-author:before,.comment-author:after,.widget-area:before,.widget-area:after,.widget:before,.widget:after,.comment-meta:before,.comment-meta:after{content:"";display:table;table-layout:fixed} .clear:after,.entry-content:after,.entry-footer:after,.comment-content:after,.site-header:after,.site-content:after,.site-footer:after,.nav-links:after,.pagination:after,.comment-author:after,.widget-area:after,.widget:after,.comment-meta:after{clear:both} /*----------------------- 4. Text Zone ------------------------*/ .textZone p{margin-bottom:1.5em; line-height:1.5em;} .textZone b, .textZone strong{font-weight:bold;} .textZone big{font-size:125%} .textZone dfn, .textZone cite, .textZone em, .textZone i{font-style:italic} .textZone a {color:#000;} .textZone a:hover{color:#111;} .textZone ul{list-style:outside disc; margin:1em 1em 1em 4em;} .textZone ol{list-style:outside decimal; margin:1em 1em 1em 4em;} .textZone li{position:relative; left:1em; padding-right:1em; margin:0 0 0.3em 0;} .textZone h1, .textZone h2, .textZone h3, .textZone h4, .textZone h5, .textZone h6{clear:both; line-height:1.4; margin:0 0 .75em; padding:1.5em 0 0} .textZone h1{font-size:2em; font-weight:300} .textZone h2{font-size:1.5em; font-weight:300} .textZone h3{font-size:1.17em; font-weight:300} .textZone h4{font-size:1.12em; font-weight:800} .textZone h5{font-size:.83em; font-weight:800;} .textZone h6{font-size:.75em; font-weight:800} .textZone h1:first-child, .textZone h2:first-child, .textZone h3:first-child, .textZone h4:first-child, .textZone h5:first-child, .textZone h6:first-child{padding-top:0} .textZone address{margin:0 0 1.5em} .textZone pre{background:#eee; font-family:"Courier 10 Pitch",Courier,monospace; line-height:1.6; margin-bottom:1.6em; max-width:100%; overflow:auto; padding:1.6em} .textZone code, .textZone kbd, .textZone tt, .textZone var{font-family:Monaco,Consolas,"Andale Mono","DejaVu Sans Mono",monospace; font-size:16px; font-size:1em} .textZone abbr, .textZone acronym{border-bottom:1px dotted #666;cursor:help} .textZone mark, .textZone ins{background:#eee;text-decoration:none} .textZone blockquote{background:#f9f9f9; padding:1em 1em 1em 3em; border-left: 10px solid #666; margin: 1.5em 10px; quotes: "\201C""\201D""\2018""\2019";} .textZone blockquote:before { color: #ccc; content: open-quote; font-size: 4em; line-height: 0.1em; margin-right: 0.25em; vertical-align: -0.4em;} .textZone blockquote p {display: inline;} .textZone hr{border:none; border-bottom:1px solid #000;} .textZone q{quotes:"“" "”" "‘" "’"} .textZone img{max-width:100%; height:auto;} .textZone .size-thumbnail{width:33%; height:auto;} .textZone .size-medium{width:50%; height:auto;} .textZone .size-large{width:100%; height:auto;} .textZone .size-full{max-width:100%; height:auto;} .textZone .alignleft{position:relative; display:block; float:left; margin:0 1.5em 1.5em 0;} .textZone .alignright{position:relative; display:block; float:right; margin:0 0 1.5em 1.5em;} .textZone .aligncenter{position:relative; display:block; clear:both; margin: 1.5em auto;} .textZone :focus{outline:none} @font-face { font-family: 'Epoque'; src: url('fonts/EpoqueGrotesk-Regular.eot'); src: url('fonts/EpoqueGrotesk-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/EpoqueGrotesk-Regular.woff2') format('woff2'), url('fonts/EpoqueGrotesk-Regular.woff') format('woff'), url('fonts/EpoqueGrotesk-Regular.ttf') format('truetype'), url('fonts/EpoqueGrotesk-Regular.svg#EpoqueGrotesk-Regular') format('svg'); font-weight: normal; font-style: normal; } /* 1d9bb8 */ /*----------------------- 5. My Style ------------------------*/ html, body {background:#fff; font-family: "Epoque", "Futura", sans-serif; color:#000; width:100%; height:100% !important; margin:0 auto; font-size:16px;} ::selection {background:#000000; color:#fff; text-shadow: none;} a{-webkit-transition: all .2s linear; transition: all .2s linear;} .cta{display:inline-block; color:#1d9bb8; text-decoration:none; padding:.75em 1em .5em 1em; text-transform:uppercase; border:2px solid #1d9bb8; -webkit-transition: all 0.65s cubic-bezier(0.7, 0.3, 0, 1); transition: all 0.65s cubic-bezier(0.7, 0.3, 0, 1); cursor:pointer;} .cta:hover{background:#1d9bb8; color:#fff;} .ctaWhite{color:#fff; border:2px solid #fff;} .ctaWhite:hover{background:#fff; color:#1d9bb8;} .sectionTitle{position:relative; margin:0 auto 4em auto; text-align:center; text-transform:uppercase; } .sectionTitle span{position:relative; display:inline-block; padding:0 .35em; font-size:1.75em;} .sectionTitle span::after{position:absolute; content:""; top:45%; left:-1em; width:1em; height:2px; background:#1d9bb8;} .sectionTitle span::before{position:absolute; content:""; top:45%; right:-1em; width:1em; height:2px; background:#1d9bb8;} .sectionTitleWhite{color:#fff} .sectionTitleWhite span::after{ background:#fff;} .sectionTitleWhite span::before{background:#fff;} .flex-container a:hover,.flex-slider a:hover {outline: none;} .slides,.slides > li,.flex-control-nav,.flex-direction-nav {margin: 0; padding: 0; list-style: none;} .flex-pauseplay span {text-transform: capitalize;} .flexslider {margin: 0; padding: 0; position:relative;} .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} .flexslider .slides img {width: 100%; display: block;} .flexslider .slides:after {content: "\0020";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;} html[xmlns] .flexslider .slides {display: block;} * html .flexslider .slides {height: 1%;} .no-js .flexslider .slides > li:first-child {display: block;} .flex-direction-nav li {outline:none;} .flex-direction-nav li a{position:absolute; width:50px; height:100%; opacity:1; -webkit-transition: all .2s linear; transition: all .2s linear; text-indent:-9999px; outline:none;} .flex-direction-nav li a:hover{opacity:.5;} .flex-direction-nav .flex-nav-prev a{left:-80px; top:0; background:url(img/ArrowPrevious.png) no-repeat center center; background-size:20px auto;} .flex-direction-nav .flex-nav-next a{right:-80px; top:0; background:url(img/ArrowNext.png) no-repeat center center; background-size:20px auto;} header{position:fixed; top:0; z-index:99; padding:1em; width:100%; background:#fff;} header #logo{position:relative; display:inline-block; z-index:999;} header #logo img{ width:80%; max-width:230px;} header nav{position:absolute; top:50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left:0; display:block; width:100%; text-transform:uppercase; text-align:center; padding:0 12em;} header nav ul{display:inline-block; line-height:1.5em;} header nav ul li{display:inline-block; padding:0 .5em;} header nav ul li a{color:#000; text-decoration:none; font-size:.9em; -webkit-transition: all .2s linear; transition: all .2s linear; } header nav ul li a:hover, header nav ul li.active a, .single #newsLink{color:#1d9bb8;} header #Social{position:relative; top:0; float:right;} header #Social li{position:relative; display:inline-block;} header #Social li a{position:relative; display:block; width:20px; height:20px; background:url(img/Social.png) no-repeat; background-size:auto 20px; text-indent:-9999px; margin:.25em;-webkit-transition: all .2s linear; transition: all .2s linear;} header #Social li a:hover{opacity:.6;} header #Social li a#Facebook{background-position:6px center;} header #Social li a#Twitter{background-position:-29px center;} header #Social li a#Instagram{background-position:-67px center;} header #Social li a#Newsletter{background-position:-100px center; background-size: auto 19px;} .mobileMenu{display:inline;} /* header.sticky{position:fixed; background:#fff; padding:.5em 1em;} header.sticky #logo img{ width:80%; max-width:80px;} header.sticky nav{top:1.5em; padding:0 12em 0 7em;} header.sticky #Social{top:.8em;} */ #home{position:relative; width:100%; height:100%;} #home .background{position:fixed; width:100%; height:100%;} #home .background img{display: block; width:100%; height:100%; object-fit: cover;} #home .album{position:absolute; bottom:0; right:0; margin:2%; width:100%; max-width:560px; background:#fff; padding:.5em;} #home .album .left{position:relative; width:65%; float:left; padding:2em; text-align:center;} #home .album .left h2{text-transform:uppercase; color:#1d9bb8; margin-bottom:1em;} #home .album .left h1{text-transform:uppercase; font-size:1.5em;} #home .album .cover{position:relative; width:35%; float:right; } /* NEWS */ #news{position:relative; padding:6em 2em; margin:0 auto; background:#fff;} #news #newsCtt{margin:0 auto; width:86%; max-width:1300px;} #news article{position:relative; float:left; width:33%; padding:1.5em;} #news article a{display:block; color:#000; text-decoration:none;} #news article a img{width:100%; height:auto; -webkit-transition: all .2s linear; transition: all .2s linear;} #news article a:hover img{transform:scale(1.025);} #news article a h2{font-size:1.25em; margin:.7em 0 .5em 0;} #news article a h5{color:#1d9bb8; font-size:.75em;} #singleContent{position:relative; margin:0 auto; padding-top:10em; width:80%; max-width:600px;} #singleContent .title{font-size:1.25em; margin:0 0 .5em 0; line-height:130%:} #singleContent .date{color:#1d9bb8; font-size:.75em;} #singleContent .img img{max-width:100%; height:auto;} #singleContent .backHome{position:relative; top:.75em; float:right;} #singleContent .share{position:relative; margin:2em auto; text-align:center;} #singleContent .share a{position:relative; display:inline-block; border:2px solid #2a2a2a; padding:.75em 2em .75em 3.5em; color:#2a2a2a; text-transform:uppercase; font-size:.8em; margin-right:.75em; text-decoration:none; -webkit-transition: all .2s linear; transition: all .2s linear; letter-spacing:1px;} #singleContent .share a.shareFacebook{background:url(img/shareFacebook.png) 2.25em center no-repeat; background-size:auto 40%;} #singleContent .share a.shareTwitter{background:url(img/shareTwitter.png) 2em center no-repeat; background-size:auto 35%; } /* VIDEOS */ #videos{position:relative; padding:6em 2em; background:url(img/Benabar_VideoBackground.jpg) center center #021d32 no-repeat; background-size:cover;} #videos #videosCtt{margin:0 auto; width:86%; max-width:900px;} #videos .flex-direction-nav .flex-nav-prev a{left:-80px; top:0; background:url(img/ArrowPreviousW.png) no-repeat center center; background-size:20px auto;} #videos .flex-direction-nav .flex-nav-next a{right:-80px; top:0; background:url(img/ArrowNextW.png) no-repeat center center; background-size:20px auto;} .youtube {background-color: #000; margin-bottom: 30px; position: relative; padding-top: 56.25%; overflow: hidden; cursor: pointer;} .youtube img {width: 100%; top: -16.84%; left: 0; opacity: 0.7;} .youtube .play-button {width: 90px; height: 60px; background-color: #333; box-shadow: 0 0 30px rgba( 0,0,0,0.6 ); z-index: 1; opacity: 0.8; border-radius: 6px;} .youtube .play-button:before {content: ""; border-style: solid; border-width: 15px 0 15px 26.0px; border-color: transparent transparent transparent #fff;} .youtube img,.youtube .play-button { cursor: pointer;} .youtube img,.youtube iframe,.youtube .play-button,.youtube .play-button:before {position: absolute;} .youtube .play-button,.youtube .play-button:before {top: 50%; left: 50%; transform: translate3d( -50%, -50%, 0 );} .youtube iframe {height: 100%; width: 100%; top: 0; left: 0;} /* DISCO */ #discographie{position:relative; padding:6em 2em; margin:0 auto; background:#fff;} #discographie #discographieCtt{margin:0 auto; width:86%; max-width:1300px;} #discographie .slides li{position:relative;} #discographie .slides li .left{position:relative; float:left; width:50%; padding:0 2em;} #discographie .slides li .left img{position:relative; width:100%; height:auto;} #discographie .slides li .right{position:relative; float:right; width:50%; height:100%; padding:0 2em; font-size:.9em;} #discographie .slides li .right h2{text-transform:uppercase; font-size:1.5em;} #discographie .slides li .right h4{text-transform:uppercase; color:#1d9bb8; margin:1em 0;} #discographie .slides li .right .tracklist{margin:2em 0 3em 0;} #discographie .slides li .right .tracklist .track{width:100%; padding:.5em 0;} #discographie .slides li .right .tracklist .track .number{width:25px; display:inline-block; color:#969696;} #discographie .slides li .right .tracklist .track h3{display:inline-block;} #discographie .slides li .right .tracklist .track .openParole{float:right; top:50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); color:#1d9bb8; text-transform:uppercase; text-decoration: none; font-size: .8em;} #discographie .parolesOverlay{position:fixed; display:none; top:0; left:0; width:100%; padding:4em; height:100%; overflow-y:scroll; z-index:999; background:#1d9bb8;} #discographie .parolesOverlayCtt{position:relative; margin:0 auto; max-width:700px; overflow:scroll; color:#fff; line-height:1.25em; text-align:center;} #discographie .parolesOverlayCtt h3{font-size:1.25em; margin-bottom: 2em; text-align:center;} #discographie .closeCross{position:fixed; top:2em; right:2em; width:40px; height:40px; background:url(img/Close.png) center center; background-size:100% 100%; cursor:pointer; -webkit-transition: all .2s linear; transition: all .2s linear; z-index:999;} #discographie .closeCross:hover{transform:scale(1.2);} /* CONCERTS */ #concerts{position:relative; padding:4em 2em; background:#eee;} #concertsCtt{position:relative; left:50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); max-width:800px;} #image{position:relative; height:80%; width:100%; background:url(img/Benabar_Biographie.jpg) center center fixed; background-size:cover;} /* BIOGRAPHIE */ #biographie{position:relative; padding:6em 2em; background:#1d9bb8;} #biographieZone{position:relative; max-width:500px; margin:0 auto 4em auto; color:#fff;} #fullBiography{position:fixed; display:none; top:0; left:0; width:100%; height:100%; overflow-y:scroll; z-index:999; background:#1d9bb8;} .biographieContainer{padding:4em 2em;} #fullBiographyCtt{position:relative; margin:0 auto; max-width:700px; color:#fff;} #closeFullBiography{position:fixed; top:2em; right:2em; width:40px; height:40px; background:url(img/Close.png) center center; background-size:100% 100%; cursor:pointer; -webkit-transition: all .2s linear; transition: all .2s linear;} #closeFullBiography:hover{transform:scale(1.2);} /* PHOTOS */ #photos{position:relative; padding:6em 2em; margin:0 auto; background:#fff;} #photos #photosCtt{margin:0 auto; width:86%; max-width:1300px;} #photos .flexslider img{max-width:100%; height:auto;} #photos .flexslider h6{padding:1em; text-align:center; font-size:.75em;} footer{position:relative; z-index:9; padding:3em; background:#fff;} footer h4{color:#4bc8e4; text-align:center;} footer #Social{text-align:center; margin:1em auto;} footer #Social li{position:relative; display:inline-block;} footer #Social li a{position:relative; display:block; width:40px; height:40px; background:url(img/Social2.png) no-repeat; background-size:auto 35px; text-indent:-9999px; padding:.25em; -webkit-transition: all .2s linear; transition: all .2s linear;} footer #Social li a:hover{opacity:.6;} footer #Social li a#Facebook{background-position:3px center;} footer #Social li a#Twitter{background-position:-53px center;} footer #Social li a#Instagram{background-position:-108px center;} footer #Social li a#Newsletter{background-position:-164px center;} footer #legals{position:relative; padding-top:3em; font-size:.6em; line-height:1.4em;color:#aaa; text-align:center;} footer #legals a{color:#aaa;} .errorPage{position:relative; height:70%; width:100%; padding:12em 5em 5em 5em;} .errorPage h1{margin:0;} .errorPageCtt{position:relative; margin: 0 auto; text-align:center;} .navClose{display:none;} @media only screen and (max-width : 900px) { header, header.sticky{position:fixed; background:#fff; top:0; left:0; height:60px;} .mobileMenu{position:fixed; display:block; background:#4bc8e4; top:0; left:0; width:100%; height:100%; display:none;} .mobileMenu nav{position:relative; padding:3em; } header nav ul, header nav ul li{display:block; padding:0 0 1em 0;} header nav ul li a{color:#fff; font-size:1.2em;} header nav ul li a:hover, header nav ul li.active a, .single #newsLink{color:#fff; text-decoration:underline;} header #Social{display:none;} header.sticky nav{top:inherit; padding:3em;} header.sticky #Social{top:inherit;} .navClose {position: absolute; top:1.25em; right:1.5em; height: 22px; width: 30px; z-index:999; cursor:pointer; display:block;} .navClose .burgerTop, .navClose .burgerMiddle, .navClose .burgerBottom {background-color: #000; display: block; height: 4px; width: 100%; -webkit-transition: all .3s ease; transition: all .3s ease;} .navClose .burgerMiddle {position: absolute; top:50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);} .navClose .burgerBottom{position: absolute; bottom:0;} .navOpen .burgerMiddle {width:0%; opacity:0; background-color:#fff; } /*.navClose:hover .burgerTop, .navClose:hover .burgerMiddle, .navClose:hover .burgerBottom{background-color:#004f6e;}*/ .navOpen .burgerTop, .navOpen .burgerBottom {position:absolute; margin:0 auto; -webkit-transform-origin: 0 50%; -ms-transform-origin: 0 50%; transform-origin: 0 50%; background-color:#fff;} .navOpen .burgerTop {left:4px; top:-2px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .navOpen .burgerBottom {left:4px; bottom:-2px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg);} #home .background{height:70%;} #home .album{height:30%; margin:0;} #home .album img{width:40%;} #home .album .right .cta{display:inline-block;} #image{ height:65%; background-size:auto 100% ;} #discographie #discographieCtt{width:80%; max-width:500px;} #discographie .slides li .left{width:100%; padding: 0 2em 2em 2em ;} #discographie .slides li .right{position:relative; width:100%; height:inherit; padding:0 2em;} #videos{padding:6em 2em 25em 2em;;} } @media only screen and (max-width : 420px) { .sectionTitle{margin-bottom:2em;} .flex-direction-nav .flex-nav-prev a{left:-20px; background-size: 15px auto;} .flex-direction-nav .flex-nav-next a{right:-20px; background-size: 15px auto;} #videos .flex-direction-nav .flex-nav-prev a{left:0px; top:0; background:url(img/ArrowPreviousW.png) no-repeat center center; background-size:20px auto;} #videos .flex-direction-nav .flex-nav-next a{right:0px; top:0; background:url(img/ArrowNextW.png) no-repeat center center; background-size:20px auto;} #home .album .left{font-size:.75em; padding: 1em .5em;} #home .album .right .cta{display:inline-block;} #news{padding:2em 1em; overflow:hidden;} #news #newsCtt{width:100%} #news article{width:100%;} #fullBiography{padding:4em 1em 1em 1em;} #closeFullBiography{width:20px; height:20px; right:1em; top:1em;} #biographie, #discographie, #concerts, #photos{padding:2em 1em;} #discographie #discographieCtt{width:100%;} #discographie .slides li .right .tracklist .track .openParole{transform: inherit; -webkit-transform: inherit;} #discographie .parolesOverlay{padding:2em 1em;} #photos #photosCtt, #videos #videosCtt{width:100%;} #photos .flex-nav-prev a, #videos.flex-nav-prev a{left:-10px; background-size: 15px auto;} #photos .flex-nav-next a, #videos .flex-nav-next a{right:-10px; background-size: 15px auto;} #videos{padding:2em 1em;} }