/* 
Theme Name: LZV
Theme URI: http://www.leszoomsverts.net/wp-content/themes/lzv
Description: Thème enfant de Twenty Seventeen
Author: WebArtMedia
Author URI: http://www.creationdesitesweb-webartmedia.com/
Template: twentyseventeen
Version: 1.0.0
*/

@import url('https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400i,700,700i&subset=latin-ext');
@import url("http://www.leszoomsverts.net/wp-content/themes/twentyseventeen/style.css");


/*
-----------------------------------------------------------------------
!!! AVERTISSEMENT : ne pas oublier lors de mises à jour importantes !!!
-----------------------------------------------------------------------
*/




/*
------------------------------------------------
Styles propres au thème parent (twentyseventeen)
------------------------------------------------
*/

html, body {
	background-color: #fff;
	background-size: cover;
	background-attachment: fixed;
}


/* Titrages */

h1, h2, h3, h4, h5, h6 {
}


/* Liens & Boutons */

body a {
	color: rgb(96,75,63) !important;
	outline: none !important;
	box-shadow: initial !important;
}
body a:link, a:visited {
	color: rgb(96,75,63) !important;
	box-shadow: initial !important;
}
body a:hover, a:active {
	color: rgb(48,38,32) !important;
	box-shadow: initial !important;
}

body button {
}


/* Header */

.single .site-header,
.page:not(.home) .site-header {
	position: fixed;
	width: 100%;
	z-index: 99;
}

.site-header { background: none; }
.site-header .custom-header-media::before { display: none; }
.site-header .custom-header-media .wp-custom-header {
	background-position: center bottom;
	background-size: 100% 125%;
	background-repeat: no-repeat;
	height: 100% !important;
}
.site-header .custom-header-media { max-height: initial !important; }

.page.home .site-header .custom-header-media .wp-custom-header { background-size: cover; }
.page.home .site-header .custom-header-media { height: 108vh !important; }
.page.home .site-header .custom-header-media::after {
	content: '';
	display: block;
	position: absolute;
	background-image: url(http://www.leszoomsverts.net/wp-content/themes/lzv/images/lzv_design_arrow.png);
	background-position: center center;
	background-size: 100%;
	background-repeat: no-repeat;
	width: 22px;
	height: 55px;
	left: 0px;
	right: 0px;
	bottom: 10vh;
	margin: 0px auto;
	opacity: .75;
	z-index: 99;
}

.single .site-header,
.page:not(.home) .site-header { height: 15vh !important; }
.single .site-header .custom-header,
.single .site-header .custom-header-media,
.page:not(.home) .site-header .custom-header,
.page:not(.home) .site-header .custom-header-media { height: 100% !important; }


/* Logo */

.site-branding {
	position: absolute;
	width: 100%;
	left: 0px;
	right: 0px;
	margin: 0px auto !important;
}
.site-branding .wrap {
	position: relative;
	width: 100%;
	height: 100%;
	max-width: initial;
	margin: 0px;
	padding: 0px;
}
.site-branding .wrap img {
	position: absolute;
	width: auto;
	height: 100%;
	left: 0px;
}

.page.home .site-branding {
	height: 25vw;
	max-height: 33.33%;
	top: 25vh;
	padding: 0px;
}
.page.home .site-branding .wrap img {
	right: 0px;
	margin: 0px auto;
}

.single .site-branding,
.page:not(.home) .site-branding {
	height: 4vh;
	max-width: 1200px;
	top: 4.5vh;
	padding: 0px 100px;
	transition: all .3s;
}


/* Content */

.single .site-content,
.page:not(.home) .site-content { padding: 20vh 0px 18vh 0px !important; }
.page.home .site-content { padding: 40px 0px !important; }

.site-content-contain { background: none; }
.site-main .wrap,
.site-content .wrap {
	max-width: 1200px;
	padding: 0px 100px !important;
}


/* Page */

.single #content,
.page:not(.home) #content { min-height: 100vh; }

#content .entry-header,
#content .entry-content { width: 100% !important; }


/* Footer */

.single .site-footer,
.page:not(.home) .site-footer {
	position: fixed;
	width: 100%;
	bottom: 0px;
	z-index: 99;
}

footer {
	position: relative;
	background-size: 100% 400%;
	background-position: center top;
	background-repeat: no-repeat;
	height: 120px;
	margin-top: 0px !important;
	border: 0px none !important;
}
footer .wrap {
	position: absolute;
	width: 100%;
	max-width: 1200px !important;
	left: 0px;
	right: 0px;
	margin: 30px auto 0px auto;
	padding: 20px 100px !important;
}

.site-lzv-contact,
.site-social-networks {
	display: inline-block;
	height: 36px;
	float: right;
}
.site-lzv-contact {
	float: left;
}
.site-social-networks {
	float: right;
}
.site-lzv-contact a,
.site-social-networks a {
	display: inline-block;
	width: 36px;
	height: 36px;
	margin-left: 20px;
	border-radius: 2px;
	overflow: hidden;
	transition: all .25s;
	transform: scale(1);
}
.site-lzv-contact a:first-child,
.site-social-networks a:first-child { margin-left: 0px; }
.site-lzv-contact a div,
.site-social-networks a div {
	background-size: 100% auto;
	background-position: center bottom;
	background-repeat: no-repeat;
	width: 100%;
	height: 0px;
	padding-bottom: 100%;
}
.site-lzv-contact a:hover,
.site-social-networks a:hover {
	transform: scale(.9);
}
.site-lzv-contact a:hover div,
.site-social-networks a:hover div {
	background-position: center top;
}


/* Page d'accueil */

.panel-content .wrap {
	max-width: 800px !important;
	padding: 0px 100px !important;
	text-align: center;
}
.panel-content .wrap .wam-paragraph-S {
	padding-top: 0px;
}


/* Blog */


/*
------------------------------------
Styles propres au thème enfant (lzv)
------------------------------------
*/

.lzv-fr { display: block; }
.lzv-en { display: none; }


/* Menu & Navigation */

ul[class^="lzv-menu-"] {
	position: absolute;
	display: block;
	height: auto;
	list-style: none !important;
	z-index: 10;
}
ul.lzv-menu-home {
	max-width: 1200px;
	min-width: 600px;
	width: 80vh;
	left: 0px;
	right: 0px;
	bottom: 20vh;
	margin: 0px auto !important;
}
ul.lzv-menu-page {
	width: 50%;
	max-width: 600px;
	height: auto;
	left: 50%;
	right: 0px;
	top: 4.5vh;
	margin: 0px auto 0px 0px !important;
	padding: 0px 97px 0px 0px;
}

ul.lzv-menu-home li {
	width: 27.33%;
	margin: 0px 3%;
	padding-bottom: 6.68%;
	float: left;
}
ul.lzv-menu-page li {
	width: 30%;
	margin: 2vh 2.5% 0px 2.5%;
	padding-bottom: 7.33%;
	transform: translateY(-50%);
	float: right;
}
ul.lzv-menu-page li:first-child { margin-right: 0px; }
ul.lzv-menu-page li:last-child { margin-left: 0px; }
ul.lzv-menu-page li.lzv-page-in,
ul.lzv-menu-page li.lzv-active { background-position: center bottom; }
ul.lzv-menu-page li.lzv-active {
	cursor: default !important;
	pointer-events: none !important;
	opacity: 1;
}

ul[class^="lzv-menu-"] li {
	position: relative;
	display: inline-block;
	background-size: 100% auto;
	background-position: center top;
	background-repeat: no-repeat;
	height: 0px;
	opacity: .75;
	transition: opacity .3s;
}
ul[class^="lzv-menu-"] li:hover {
	background-position: center bottom;
	opacity: 1;
}
ul[class^="lzv-menu-"] li a {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
}


/* Colonnes */

#lzv-columns {
	margin: 0px;
	padding: 0px;
	clear: both;
	zoom: 1;
}
#lzv-columns::after {
	content: "";
	display: table;
	clear: both;
}
#lzv-column-1-of-3 {
	display: block;
	width: 27.5%;
	margin-right: 2.5%;
	float: left;
}
#lzv-column-2-of-3 {
	display: block;
	width: 67.5%;
	margin-left: 2.5%;
	float: right;
}
#lzv-column-2-of-5 {
	display: block;
	width: 37.5%;
	margin-right: 2.5%;
	float: left;
}
#lzv-column-3-of-5 {
	display: block;
	width: 57.5%;
	margin-left: 2.5%;
	float: right;
}


/* Liste de films (lzv-movie) */

#lzv-les-films {
	display: inline-block;
	position: relative;
	width: 105%;
	margin: -2.5% 0px -.4em -2.5%;
	padding: 0px;
	list-style: none;
	clear: both;
	transition: all .3s;
}
#lzv-les-films::after {
	content: '';
	display: table-cell;
	clear: both;
}
#lzv-les-films li {
	position: relative;
	display: block;
	background-size: 100% 100%;
	background-position: center center;
	background-repeat: no-repeat;
	width: 15%;
	height: 0px;
	margin: 2.5% ;
	padding-bottom: 15%;
	box-shadow: 1px 2px 10px rgba(0,0,0,.8);
	float: left;
	transition: inherit;
}
#lzv-les-films li a {
	position: absolute;
	display: block;
	background-color: rgba(0,0,0,.5);
	background-size: 100% 100%;
	background-position: center center;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	opacity: 0;
	overflow: hidden;
	box-shadow: none !important;
	z-index: 2;
	transition: inherit;
}
#lzv-les-films li:hover { background-size: 125% 125%; }
#lzv-les-films li:hover a { opacity: 1; }


/* Filtres */

#lzv-filtres {
	display: block;
	width: 100%;
	height: 150px;
}


/* Fiche film (lzv-movie) */

.single-lzv-movie #main header { padding-bottom: 10px; }
.single-lzv-movie #main header h1 {
	margin: 0px;
	padding-bottom: 10px;
}
.single-lzv-movie #main header h1:first-child {
	font-weight: 900;
	text-transform: uppercase;
}
.single-lzv-movie #main header h1:not(:first-child) {
	font-weight: 300;
	font-style: italic;
}
.single-lzv-movie #main header h1:last-child { padding: 0px; }
.single-lzv-movie #lzv-column-3-of-5 > div:first-child { background: #000; }

[class^="lzv-movie-"] {
	display: block;
	width: 100%;
	margin-bottom: 20px;
}
.lzv-movie-banner {
	background-size: cover;
	background-position: center center;
	height: 0px;
	padding-bottom: 10%;
}
.lzv-movie-header {
	font-size: 20px;
	font-style: italic;
	font-weight: 700;
}
.lzv-movie-dvd > img {
	width: 40%;
	box-shadow: 1px 2px 10px rgba(0,0,0,.8);
	float: left;
}
.lzv-movie-dvd > div {
	width: 55%;
	margin-left: 5%;
	font-weight: bold;
	float: left;
}
.lzv-movie-dvd > form > img { display: none; }

#lzv-movie-metadata {
	width: 100%;
	margin-top: 20px;
	word-wrap: initial !important;
	opacity: 0;
}
#lzv-movie-metadata > div > span {
	position: relative;
	display: block;
	width: 30%;
	margin: 0px 0px 0px 30px;
	float: right;
}
#lzv-movie-metadata > div > span > img {
	width: 100%;
	height: auto;
	margin-bottom: -.4em;
}


/* Liste de membres (lzv-member) */

#lzv-l-equipe {
	display: inline-block;
	position: relative;
	width: 105%;
	margin: -2.5% 0px -.4em -2.5%;
	padding: 0px;
	list-style: none;
	clear: both;
	transition: all .2s;
}
#lzv-l-equipe::after {
	content: '';
	display: table-cell;
	clear: both;
}
#lzv-l-equipe li {
	position: relative;
	display: block;
	background-size: 100% 100%;
	background-position: center center;
	background-repeat: no-repeat;
	width: 15%;
	height: 0px;
	margin: 2.5% ;
	padding-bottom: 15%;
	box-shadow: 1px 2px 10px rgba(0,0,0,.8);
	float: left;
	transition: inherit;
}
#lzv-l-equipe li a {
	position: absolute;
	display: block;
	background-size: 100% 100%;
	background-position: center center;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	border-radius: 50%;
	box-shadow: none !important;
	opacity: 0;
	transition: all .3s !important;
	z-index: 2;
}
#lzv-l-equipe li a:hover { opacity: 1; }


/* Fiche membre (lzv-member) */

#lzv-member-photo { display: none; }
#lzv-member-bio {
	width: 40%;
	margin: 0px 2.5% 0px 32.5%;
}
#lzv-member-movies {
	width: 22.5%;
	margin-left: 2.5%;
}
[id^="lzv-member-"] {
	display: inline-block;
	height: auto;
	float: left;
}
[id^="lzv-member-"]::after {
	content: '';
	display: table-cell;
	clear: both;
}
[id^="lzv-member-"] [class^="entry-"] { width: 100% !important; }

#lzv-member-photo {
	position: relative;
	-webkit-perspective: 800px;
	perspective: 800px;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
#lzv-member-photo .lzv-photo-content {
	position: relative;
	display: block;
	width: 100%;
	height: 0px;
	padding-bottom: 100%;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
#lzv-member-photo .lzv-photo-content .lzv-photo-card {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	box-shadow: 1px 2px 10px rgba(0,0,0,.8);
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition: all .66s;
	transition: all .66s;
}
#lzv-member-photo .lzv-photo-content .lzv-photo-card .lzv-photo-card-face {
	position: absolute;
	display: block;
	background-position: 50% 50%;
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	line-height: 16px;
	border-radius: inherit;
	text-align: center;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
#lzv-member-photo .lzv-photo-content .lzv-photo-card .lzv-photo-card-face:last-child {
	color: #fff;
	background-image: url(http://www.leszoomsverts.net/wp-content/themes/lzv/images/lzv_design_metadata_background.png);
	background-size: 105% 105%;
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
}
#lzv-member-photo .lzv-photo-content .lzv-photo-card .lzv-photo-card-face > div {
	display: block;
	width: 100%;
	margin-top: 50%;
	line-height: 24px;
	transform: translateY(-50%);
}

#lzv-member-photo .lzv-photo-content:hover {
	/*cursor: pointer;*/
}
#lzv-member-photo .lzv-photo-content:hover .lzv-photo-card {
	/*cursor: pointer;
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
	-webkit-transition: all .33s;
	transition: all .33s;*/
}

#lzv-other-members {
	display: block;
	width: 100%;
	margin-top: 30px;
}
#lzv-other-members #lzv-l-equipe li {
	width: 20%;
	padding-bottom: 20%;
}

#lzv-member-bio header { padding: 0px; }
#lzv-member-bio header .entry-title {
	margin-bottom: 0px;
	padding: 0px;
	font-weight: 900;
}
#lzv-member-bio header h2 {
	height: 0px; /* caché */
	overflow: hidden; /* caché */
	color: #333;
	margin-bottom: 15px;
	padding: 0px;
	font-size: 1.291rem;
}

#lzv-member-movies { opacity: 0; }
#lzv-member-movies #lzv-les-films li {
	width: 45%;
	padding-bottom: 45%;
}
#lzv-member-movies-alt {
	display: none;
	width: 100%;
	margin-top: 30px;
}
#lzv-member-movies-alt #lzv-les-films li {
	width: 20%;
	padding-bottom: 20%;
}

.lzv-member-links {
	margin-top: 15px;
}


/* La Sphère */

#lzv-la-sphere {
	display: inline-block;
	position: relative;
	width: 100%;
	margin: 0px 0px -.4em 0px;
	padding: 0px;
	list-style: none;
	clear: both;
	transition: all .3s;
}
#lzv-la-sphere::after {
	content: '';
	display: table-cell;
	clear: both;
}

#lzv-la-sphere-item,
#lzv-la-sphere li {
	position: relative;
	display: block;
	background-position: center center;
	background-repeat: no-repeat;
	height: 0px;
	box-shadow: 1px 2px 10px rgba(0,0,0,.8);
	float: left;
	transition: inherit;
}
#lzv-la-sphere-item {
	background-size: 125% auto;
	width: 100%;
	margin: 0px;
	padding-bottom: 100%;
}
#lzv-la-sphere li {
	background-size: 100% auto;
	width: 27.5%;
	margin: 0px 4.375% 2.5% 4.375% ;
	padding-bottom: 27.5%;
	float: left;
}
#lzv-la-sphere li:first-child { margin-left: 0px !important; }
#lzv-la-sphere li:last-child { margin-right: 0px !important; }
#lzv-la-sphere-item div,
#lzv-la-sphere li a {
	position: absolute;
	display: block;
	background-color: rgba(0,0,0,.5);
	background-size: 100% 100%;
	background-position: center center;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	overflow: hidden;
	border-radius: inherit;
	box-shadow: none !important;
	z-index: 2;
	transition: inherit;
}
#lzv-la-sphere li a { opacity: 0; }
#lzv-la-sphere-item,
#lzv-la-sphere li[class^="lzv-big-circle-"] { border-radius: 50%; }
#lzv-la-sphere-item::after,
#lzv-la-sphere li[class^="lzv-big-circle-"]::after {
	content: '';
	position: absolute;
	display: block;
	background-size: 100% 100%;
	background-position: center center;
	background-repeat: no-repeat;
	width: 124%;
	height: 124%;
	left: -12%;
	top: -12%;
	z-index: 1;
}
#lzv-la-sphere-item.lzv-big-circle-1::after,
#lzv-la-sphere li.lzv-big-circle-1::after { background-image: url(http://www.leszoomsverts.net/wp-content/themes/lzv/images/lzv_design_line_big-circle-1.png); }
#lzv-la-sphere-item.lzv-big-circle-2::after,
#lzv-la-sphere li.lzv-big-circle-2::after { background-image: url(http://www.leszoomsverts.net/wp-content/themes/lzv/images/lzv_design_line_big-circle-2.png); }
#lzv-la-sphere-item.lzv-big-circle-3::after,
#lzv-la-sphere li.lzv-big-circle-3::after { background-image: url(http://www.leszoomsverts.net/wp-content/themes/lzv/images/lzv_design_line_big-circle-3.png); }

#lzv-la-sphere li:hover { background-size: 125% auto; }
#lzv-la-sphere li:hover a { opacity: 1; }


/* Bloc de papier */

.lzv-paper-bloc {
	position: relative;
	display: inline-block;
	background-image: url(http://www.leszoomsverts.net/wp-content/themes/lzv/images/lzv_design_metadata_background.png);
	background-size: 110% 110%;
	background-position: center center;
	background-repeat: no-repeat;
}
.lzv-paper-bloc::before,
.lzv-paper-bloc::after {
	content: '';
	position: absolute;
	display: block;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	width: 51%;
	height: 102%;
	top: -1%;
	z-index: 1;
}
.lzv-paper-bloc::before {
	background-image: url(http://www.leszoomsverts.net/wp-content/themes/lzv/images/lzv_design_metadata_line_left.png);
	background-position: left center;
	background-repeat: no-repeat;
	left: -.5%;
}
.lzv-paper-bloc::after {
	background-image: url(http://www.leszoomsverts.net/wp-content/themes/lzv/images/lzv_design_metadata_line_right.png);
	background-position: right center;
	background-repeat: no-repeat;
	right: -.5%;
}
.lzv-paper-bloc > div {
	position: absolute;
	display: block;
	width: 100%;
	left: 0px;
	top: 0px;
	padding: 15px;
	z-index: 10;
}


/* Formulaire */

form select {
	width: 100%;
	height: 30px;
	line-height: 30px;
	margin-top: 10px;
}


/* Formes */

.lzv-circled-shape { border-radius: 50%; }
.lzv-squared-shape::after,
.lzv-circled-shape::after {
	content: '';
	position: absolute;
	display: block;
	background-size: 100% 100%;
	background-position: center center;
	background-repeat: no-repeat;
	width: 104%;
	height: 104%;
	left: -2%;
	top: -2%;
	z-index: 1;
}
.lzv-squared-shape::after {
	background-image: url(http://www.leszoomsverts.net/wp-content/themes/lzv/images/lzv_design_line_square.png);
}
.lzv-circled-shape::after {
	background-image: url(http://www.leszoomsverts.net/wp-content/themes/lzv/images/lzv_design_line_circle.png);
}


/*
--------------------------------------
Styles propres aux Plugins WebArtMedia
--------------------------------------
*/



/*
------------------------------------------------
Styles selon les différentes résolutions d'écran
------------------------------------------------
*/

@media only screen and (max-width: 999px) {
	.site-header .custom-header-media .wp-custom-header,
	footer { background-size: cover; }
	.single .site-branding,
	.page:not(.home) .site-branding { height: 3vh; }
	ul.lzv-menu-page { width: 500px; max-width: initial; left: initial; margin: 0px !important; }
}

@media only screen and (min-width: 700px) and (max-width: 999px) {
	.single .site-branding,
	.page:not(.home) .site-branding { top: 5vh; }
}

@media only screen and (max-width: 899px) {
	#lzv-member-bio { width: 67.5% ; margin-right: 0px; }
}

@media only screen and (max-width: 867px) {
	.page.home .custom-header { height: 108vh; }
}

@media only screen and (min-width: 700px) and (max-width: 899px) {
	#lzv-les-films li { width: 20%; padding-bottom: 20%; }
	#lzv-l-equipe li { width: 20%; padding-bottom: 20%; }
}

@media only screen and (max-width: 799px) {
	.single .site-branding,
	.page:not(.home) .site-branding { top: 3vh; }
	.single .site-branding .wrap img,
	.page:not(.home) .site-branding .wrap img { right: 0px; margin: 0px auto; }
	ul.lzv-menu-page { left: 0px; top: 7.5vh; padding: 0px 100px; }
}

@media only screen and (min-width: 700px) and (max-width: 799px) {
	ul.lzv-menu-page { width: 80%; margin: 0px auto !important; }	
}

@media only screen and (max-width: 699px) {
	ul.lzv-menu-page { width: 100%; }	
}

@media only screen and (max-width: 599px) {
	ul.lzv-menu-page,
	.site-main .wrap,
	.site-content .wrap,
	footer .wrap { padding-left: 75px !important; padding-right: 75px !important; }
}


@media only screen and (min-width: 500px) and (max-width: 699px) {
	#lzv-les-films li { width: 28.33%; padding-bottom: 28.33%; }
	#lzv-l-equipe li { width: 28.33%; padding-bottom: 28.33%; }
}

@media only screen and (max-width: 499px) {
	.single .site-branding .wrap img,
	.page:not(.home) .site-branding .wrap img { max-width: initial; }
}

@media only screen and (min-width: 350px) and (max-width: 499px) {
	ul.lzv-menu-page,
	.site-main .wrap,
	.site-content .wrap,
	footer .wrap { padding-left: 50px !important; padding-right: 50px !important; }
	.single .site-content,
	.page:not(.home) .site-content { padding-top: 19vh !important; }
	#lzv-les-films li { width: 28.33%; padding-bottom: 28.33%; }
	#lzv-l-equipe li { width: 28.33%; padding-bottom: 28.33%; }
}

@media only screen and (max-width: 349px) {
	.single .site-branding,
	.page:not(.home) .site-branding,
	ul.lzv-menu-page,
	.site-main .wrap,
	.site-content .wrap,
	footer .wrap { padding-left: 20px !important; padding-right: 20px !important; }
	.single .site-content,
	.page:not(.home) .site-content { padding: 17.5vh 0px !important; }
	#lzv-les-films li { width: 45%; padding-bottom: 45%; }
	#lzv-l-equipe li { width: 45%; padding-bottom: 45%; }
}