/*
Theme Name: Cesaria Evora
Author: Holy Soakers
Author URI: http://www.holysoakers.com
Version: 1.0
License: Copyright 2017 Holy Soakers
License URI: 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 img{display:block; max-width:100%; height:auto;}
.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 .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}

/*-----------------------
	5. My Style
------------------------*/
html, body {background:#fff; font-family: "Circular", Arial, 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;}



@font-face {
    font-family: 'Circular';
    src: url('fonts/CircularStd-Book.woff2') format('woff2'),
        url('fonts/CircularStd-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Circular';
    src: url('fonts/CircularStd-BookItalic.woff2') format('woff2'),
        url('fonts/CircularStd-BookItalic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Circular';
    src: url('fonts/CircularStd-Bold.woff2') format('woff2'),
        url('fonts/CircularStd-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Circular';
    src: url('fonts/CircularStd-BoldItalic.woff2') format('woff2'),
        url('fonts/CircularStd-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}


.cta{position:relative; display:inline-block; background:#886230; color:#fff; padding:.5em 2.5em; letter-spacing:1px; text-decoration:none; -webkit-transition: all .2s linear; transition: all .2s linear; font-weight:bold; text-transform:uppercase; margin:.5em 0; cursor:pointer;}
.cta:hover{background:#000;}



header{position:relative; padding:2em 3em; background:url(img/CesariaMenu.jpg) no-repeat top center; background-size:cover; overflow:hidden;}
header #logo{font-weight:bold; font-size:3.75em; color:#fff; text-decoration:none;}
header #newsletter{position:absolute; top:2em; right:2em;}
	header #newsletter a{color:#000; background:#fff; text-transform:uppercase; padding:.1em .5em; text-decoration:none; font-size:.8em;}
header nav{position:relative; text-align:right; margin:6em 0 3em 0; font-size:1.125em; line-height:1.75em;}
header nav li{display:inline-block; margin:0 .5em;}
header nav li a{position:relative; color:#fff; text-decoration:none; display:inline-block;}
	header nav li a::after{content:''; position:absolute; bottom:-.25em; left:0; width:0%; background:#fff; height:2px; opacity:.5; -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);}
	header nav li a:hover::after,
	header nav li.current-menu-item a::after,
	header nav li.current_page_item a::after,
	.post-type-archive-photos #menu-item-29 a::after,
	.post-type-archive-videos #menu-item-28 a::after{width:100%;}
header::after{content:''; position:absolute; bottom:-6em; left:-5%; width:110%; height:8em; background:#fff; transform:rotate(2deg);}
	.post-type-archive-videos header::after{background:#eee;}


.content{position:relative; width:100%; margin:0 auto; padding:3%; max-width:1110px;}

/* NEWS */
.facebookFeed{position:relative; float:left; width:70%; margin-right:5%; max-width:720px;}
	.fts-jal-fb-header,
	.fts-jal-fb-user-thumb,
	.fts-jal-fb-user-name {display:none !important;}
.facebookFeed .fts-jal-single-fb-post{background:#eee; margin-bottom:5em; border-bottom:0;}
.facebookFeed .fts-jal-fb-top-wrap {padding:.75em 1.5em 0 1.5em !important; line-height:1.4em;}
.facebookFeed .fts-jal-fb-see-more{padding:1.5em !important; color:#886230}
.facebookFeed .fts-jal-fb-vid-picture, 
.fts-album-photos-wrap{position:relative; overflow:hidden; display:block;}
.facebookFeed .fts-jal-fb-vid-picture::before,
.fts-album-photos-wrap::before{content:''; position:absolute; top:-2em; left:-5%; width:110%; height:4em; background:#eee; transform:rotate(2deg);}	
.fts-jal-fb-vid-picture, .fts-jal-fb-vid-picture img{width:100%; float:inherit; height:auto;}
.fts-jal-fb-description-wrap a{color:#886230 !important;}
.fts-jal-fb-name{color:#886230 !important;}

.spotifyPlayer{width:25%; float:left}
.spotifyPlayer iframe{width:100%;}



/* DISCOGRAPHIE */
.discoList{margin:3em auto;}
.discoList article{width:24.5%; padding:0 2%; display:inline-block; -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); margin-bottom:4%; vertical-align:top;}
.discoList .albumOpen{padding-bottom:80vh;}
.discoList article .thumb{position:relative; padding-bottom:1em; cursor:pointer;}
.discoList article .thumb::before{content: ''; position: absolute; height: 0px; width: 0px; border-left:20px solid transparent; border-right: 20px solid transparent;  border-bottom: 20px solid #eee; top:96%; z-index:100; left:50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: all .2s linear; transition: all .2s linear; opacity:0;}
	.discoList .albumOpen .thumb::before{opacity:1;}
.discoList article .thumb img{width:100%; height:auto; }
.discoList article .thumb h2{position:relative; margin:.6em 0 .3em 0; font-weight:bold; text-transform:uppercase; line-height:1.4em;}
.discoList article .thumb .h4{color:#6B6B6B;}

.discoList .unroll{position:absolute; left:0; width:100%; background:#eee; z-index:200; height:0; overflow:hidden; -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);}
.discoList .albumOpen .unroll{height:622px;}
.discoList .unroll .albumClose{font-size:2em; position:absolute; top:1em; right:1em; -webkit-transition: all .2s linear; transition: all .2s linear; cursor:pointer; z-index:9;}
	.discoList .unroll .albumClose:hover{transform:scale(1.2);}
.discoList .unrollCtt{position:relative; margin:0 auto; width:100%; max-width:1300px; padding:4em 2em;}
.discoList .unroll .left{position:relative; width:40%; float:left;}
	.discoList .unroll .left img{display:block; width:100%; height:auto;}
.discoList .unroll .right{position:relative; width:60%; height:560px; height:calc(620px - 8em);  float:right;}
.discoList .unroll .right > div{ padding:0 7.5%;}
.discoList .unroll .right h2{text-transform:uppercase; font-size:1.5em; font-weight:bold;}
.discoList .unroll .right h4{text-transform:uppercase; color:#aaaaaa; margin:1em 0;}
.discoList .unroll .right .tracklist{margin:1em 0 2em 0;}
.discoList .unroll .right .tracklist .track{width:100%; padding:.35em 0;}
.discoList .unroll .right .tracklist .track .number{width:25px; display:inline-block; color:#000;}
.discoList .unroll .right .tracklist .track h3{display:inline-block;}
.discoList .unroll .right .tracklist .track .openParole{float:right; font-family:arial; text-transform:uppercase; text-decoration: none; font-size:.75em; color:#886230;}

.page-template-archive-discographie .parolesOverlay{position:fixed; display:block; top:0; left:0; width:100%; height:100%; overflow-y:scroll; z-index:999; background:#eee; display:none}
.page-template-archive-discographie .parolesOverlayCtt{position:relative; margin:0 auto;  padding:4em; max-width:700px;  color:#000;}
.page-template-archive-discographie .parolesOverlayCtt h3{text-transform:uppercase; font-size:1.5em; margin-bottom: 2em; text-align:center; font-weight:bold;}
.page-template-archive-discographie .parolesOverlayCtt .textZone{line-height:1.6em;}
.page-template-archive-discographie .parolesOverlay .closeCross{position:fixed; top:2em; right:2em; cursor:pointer; -webkit-transition: all .2s linear; transition: all .2s linear; z-index:999; color:#000; text-decoration:none; font-size:2em;}
	.page-template-archive-discographie .parolesOverlay .closeCross:hover{transform:scale(1.2);}


/* BIOGRAPHIE */
#biop2-en, #biop2-fr{display:none;}
.biop1-fr{position:relative; margin-top:4em;/*color: #808080;*/ font-style:italic;}

/* PHOTOS */
#photosList{margin:3em 1.5em;}
#photosList article{position:relative; float:left; width:calc(25% - 3em); margin:0 1.5em 3em 1.5em;}
#photosList article a{color:#000; text-decoration:none; text-align:center; display:block; -webkit-transition: all .2s linear; transition: all .2s linear;}
#photosList article a:hover{color:#886230;}
#photosList article a img{width:100%; height:auto; -webkit-transition: all .2s linear; transition: all .2s linear;}
#photosList article a:hover img{opacity:.6;}
#photosList article a h2{padding:.5em; font-size:1.125em;}

#photosSingle{position:relative; margin:3em auto; max-width:1000px;}
#photosSingle h2{padding:0 .5em 1em .5em; font-size:1.25em; text-align:center;}

.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; height:auto;}
.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-control-nav{position:relative; text-align:center; padding:1em 0 !important; z-index:99;}
.flex-control-nav li{position:relative; display:inline-block;  margin:0 .25em}
.flex-control-nav li a{position:relative; display:inline-block; width:8px; height:8px; background:#000; border-radius:10px; text-indent:-9999px; opacity:.3; -webkit-transition: all .2s linear; transition: all .2s linear;}
.flex-control-nav li a.flex-active, .flex-control-nav li a:hover{opacity:1;}

.flex-direction-nav{top:0; left:0; width:100%; }
.flex-direction-nav li{position:absolute; top:0;  width:15%; height:95%;z-index:999; -webkit-transition: all .2s linear; transition: all .2s linear; opacity:.5;}
	.flex-direction-nav li:hover{opacity:1;}
.flex-direction-nav li.flex-nav-prev{left:1em;}
.flex-direction-nav li.flex-nav-next{right:1em;}

.flex-direction-nav li a{position:relative; display:block; width:100%; height:100%; text-indent:-9999px;}
.flex-direction-nav li.flex-nav-prev a{background:url(img/Previous.svg) left center no-repeat; background-size:40px auto;}
.flex-direction-nav li.flex-nav-next a{background:url(img/Next.svg) right center no-repeat; background-size:40px auto;}




/* VIDEOS */
#videoFeatured{position:relative; width:100%; background:#eee;}
#videoFeaturedCtt{width:100%; padding:2em 2em 4em 2em; max-width:1000px; margin:0 auto;}
#videoFeatured h2{font-size:1.5em; text-align:center;}

#videosList{width:100%; padding:2em; max-width:1000px; margin:0 auto;}
#videosList article{float:left; width:47.5%; margin-bottom:5%; }
#videosList article:nth-child(odd){margin-right:5%;}
#videosList h2{font-size:1.125em;}

.youtube {background-color: #000; margin-bottom:1em; 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;}



/* FOOTER */
footer{background:#eee; border-top:2px solid #886230; padding:3em 1.5em;}
footer .colum{width:50%; float:left;}
	footer #column2{text-align:right;}
footer .fTitle{text-transform:uppercase; font-weight:bold; font-size:1.25em; margin-bottom:.5em;}
footer .h4{max-width:500px; line-height:1.4em;}
footer .h6{font-size:.7em; color:#6B6B6B; margin-top:1em;}
footer .h6 a{color:#6B6B6B;}

#social li{position:relative; display:inline-block; overflow:hidden;}
#social li a{position:relative; display:block; width:50px; height:50px; background:url(img/Social.png) no-repeat; background-size:auto 50px; text-indent:9999px; padding:.25em; margin:.5em;-webkit-transition: all .2s linear; transition: all .2s linear;}
footer #social:hover li a{opacity:.5;}
footer #social:hover li a:hover{opacity:1;}
#social li a#Facebook{background-position:-0 center;}
#social li a#Twitter{background-position:-75px center;}
#social li a#Youtube{background-position:-149px center;}


.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;}


.french{font-style:italic; opacity:.6; margin-top:1em;}


@media only screen and (max-width : 800px) {
	header{padding:1em 1em}
	header #logo{font-size:2em;}
	#photosList article{width:calc(33.330% - 1em); margin:0 .5em 1em .5em;}
}



@media only screen and (max-width : 480px) {
	header{background:url(img/CesariaMenu_Mobile.jpg) no-repeat top right; background-size:cover;}
	header nav{margin:3em 0 3em 0; text-align:center; }
	header nav li a::after{bottom:0em;}
	.facebookFeed{width:100%; float:inherit;}
		.facebookFeed .fts-jal-single-fb-post{margin-bottom:2.5em;}
	.spotifyPlayer{display:none;}
	footer .colum{width:100%; float:inherit;text-align:center !important;}
	footer #column1{margin-bottom:2.5em}
	
	.discoList{margin:1.5em auto}
	.discoList article{width:49.2%;}
	.discoList .unrollCtt{padding:2em 1em;}
	.discoList .unroll .left{display:none;}
	.discoList .unroll .right{width:100%; float:inherit;}
	.discoList .unroll .albumClose{top:.5em; right:.5em;}
	
	
	#photosList{margin:1.5em .5em;}
	#photosList article{width:calc(50% - 1em); margin:0 .5em 1em .5em;}
	#photosSingle{margin:.5em 1em;}
	
	
	#videoFeatured{background:#fff;}
	#videoFeatured h2{font-size:1.25em;}
	#videoFeaturedCtt{padding:.5em 1em 1em 1em;}
	#videosList{padding:1em; text-align:center;}
	#videosList article{float:left; width:100%; margin-bottom:1.5em; }
	.errorPage{padding:6em 1em 1em;}
}

/* ADA */
.sr-only, .screen-reader-text {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

.sr-only-focusable:focus {
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
}

.fts-jal-fb-description-wrap,
.fts-jal-fb-description,
.fts-jal-fb-post-time {
	color: #6B6B6B!important;
}