/*
	Theme Name: Louis Benzoni
	Theme URI: http://louisbenzoni.com/
	Description: Louis Benzoni Portfolio Theme by Simon Derain.
	Author: Simon Derain
	Author URI: http://www.designsd.fr/
	Version: 1.0
	
	License: GNU General Public License version 3.0
	License URI: http://www.gnu.org/licenses/gpl-3.0.html

*/

/* //////////////////// GENERAL //////////////////// */
html {margin:0px; padding:0px; height: 100%}
body {background-color:#fff; margin:0; font-family: 'Arial', sans-serif!important; position: relative; overflow-x: hidden}
body.page-template-page-contact, body.page-template-page-about, body.error404 {height: 100%; float: left; width: 100%;}
a {transition: all 0.3s ease; -webkit-transition: all 0.5s ease; color:#000;}
.main-content {margin: 65px 0 0 0}
:focus {outline: none!important;}

/* //////////////////// HEADER & MENU //////////////////// */
header {background: rgba(255,255,255,0.9); height: 65px; position: fixed; z-index: 101; top: 0; left: 0; width: 100%;}
.header a.logo {float: left; font-family: 'Arial', sans-serif; font-size: 19px; font-weight: 400; letter-spacing: 0px; color: #000; text-transform: uppercase; padding: 18px 0 18px 20px;}
.header a.logo span {letter-spacing: 1px; }
.header a.logo:hover {color: #808080;}

/* Menu */
.header .menu-menu-principale-container {float: right; position: relative; left: -50%;}
.header .menu {position: relative; left: 50%; padding: 9px 0; }
.header .menu li{float: left; position: relative; line-height: 12px;}
.header .menu li a{color: #808080; font-size: 11px; text-transform: uppercase; padding: 0 10px 0 0;}
.header .menu li:last-child a{padding: 0;}
.header .menu li a:hover{color: #000000}
.header .menu li.current-post-parent a,
.header .menu li.current-menu-item a {color:#000; font-weight: 700}
.open-menu {left: 0!important; transition: all ease-in 0.3s; -webkit-transition: all ease-in 0.3s;}	

/* Icone responsive */
svg.icon-menu {display: none; width: 28px; height: 28px; position: absolute; top: 25px; left: 20px; z-index: 99999; transition: all .3s ease; margin: 0; cursor: pointer;}
svg g {transition: all 0.3s ease;}
svg rect {transition: all 0.3s ease; fill: #808080;}


/* //////////////////// ACCUEIL //////////////////// */
#accueil img {width: 100%}
#accueil .row {position: relative; margin-bottom: 60px;}
#accueil .row a:hover .legende {display: block}
.legende {display: none; width: 100%; font-size: 13px; color: #000; position: absolute; margin: 5px 0 0 0;}



/* //////////////////// CATEGORY //////////////////// */
.portfolio {float: none!important; margin: 0 15px 25px 15px!important; text-align: center; width: auto!important; display: inline-block; list-style-type: none; position: relative}
.portfolio img {border: none!important; height: 300px; width: auto;}
.portfolio p {font-size: 12px; display: block; width: 100%; margin: 0;}

.portfolio .overlay-video {position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: url("./assets/images/icon-play.svg"); background-repeat: no-repeat; background-position: center; background-size: 25px; z-index: 9}


/* //////////////////// SINGLE //////////////////// */
#single h1 {text-transform: uppercase; font-size: 10px; margin: 0 0 10px 0; letter-spacing: 0.5px; font-weight: 700;}
.gallery .gallery-item {float: none!important; margin: 0 15px 30px 15px!important; text-align: center; width: auto!important; display: inline-block; height: 300px;}
.gallery br {display: none}
.gallery img {border: none!important; height: 300px; width: auto;}

.video iframe {width: 100%!important; margin: 50px 0 0 0;}
.video.m6 iframe {height: 320px!important;}
.video.m8 iframe {height: 400px!important;}

/* Fancybox */
.fancybox-opened .fancybox-skin {-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
.fancybox-overlay {background: rgba(255,255,255,0.9)!important}
.fancybox-nav {width: 50%!important}
.fancybox-nav:hover {}
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {display: none!important}
.fancybox-title-outside-wrap {color: #000; text-align: right}

/* a.fancybox-prev {cursor: url("./assets/images/left-arrow.png"), auto;}
a.fancybox-next {cursor: url("./assets/images/right-arrow.png"), auto;} */

.goBack {    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 30px;}
.goBack img {width: 28px;
    height: 28px;
    margin: 0 5px 0 0;
transition: all ease .5s;}
.goBack:hover img {    margin: 0 10px 0 0;
transition: all ease .5s;}
.goBack span {text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;}

/* //////////////////// ABOUT //////////////////// */
#about {height: calc(100% - 75px)}
#about .container {height: 100%}
#about p {font-size: 13px; color: #000; margin: 0 0 10px 0; text-align: justify}
/*.english p {font-style: italic}*/


/* //////////////////// CONTACT //////////////////// */
#contact {height: calc(100% - 75px)}
#contact .container {height: 100%}
.email {width: 100%; color: #000; font-size: 15px; border-bottom: 1px solid #d9d9d9; padding: 0 0 5px; letter-spacing: 1px; position: relative; width: 209px; margin: auto;}
.email:hover {color: #808080;}


/* //////////////////// 404 //////////////////// */
#error {height: calc(100% - 75px)}
#error .container {height: 100%}
#error .container .row {width: 100%}
#error h2 {font-size: 13px; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; width: 100%; margin: 0;}
#error h1 {font-size: 17px; margin: 0;}
#error h1 a{color:#808080;}
#error p {}


/* //////////////////// FOOTER //////////////////// */





/* //////////////////// MEDIA QUERIES //////////////////// */

@media only screen and (max-width : 992px) {
	.header a.logo {width: 100%; text-align: center;}
	.open-menu {left: 0!important; transition: all ease-in 0.3s; -webkit-transition: all ease-in 0.3s;}	
	.header .menu {width: 250px; height: 100%; background-color: #ffffff; position: fixed; top: 0; left: -250px; z-index: 9; margin: 0; padding: 70px 20px 15px; }
	.header .menu li {float: left; width: 100%; text-align: left; margin: 0 0 10px;}
	.header .menu li a {font-size: 13px; font-weight: 300; color: #808080; padding: 0;}   
	.portfolio img {height: 240px;}
	.gallery .gallery-item {height: 240px;}
	.gallery img {height: 240px;}

}

@media only screen and (max-width : 600px) {
    /* //////////////////// OVERVIEW //////////////////// */
    #accueil .col.s12 {margin-bottom: 45px; padding: 0!important}
    #accueil .row { margin-bottom: 0px;}
	.simple-image {padding: 0!important}
    
    /* //////////////////// CATEGORY //////////////////// */
    .portfolio {float: left!important; margin: 0 0 30px 0!important; text-align: center; width: 100%!important; display: inline-block; list-style-type: none}
    .portfolio img {border: none!important; height: auto; width: 100%;}
    #category .row {margin-bottom: 0;}
    
    
    /* //////////////////// SINGLE //////////////////// */
    #single h1 {display: none}
    .gallery .gallery-item {float: left!important; margin: 0 0 15px 0!important; text-align: center; width: 100%!important; display: inline-block; height: auto;}
    #single .row {margin-bottom: 0;}
    .gallery img {height: auto; width: 100%;}
    .video.m6 iframe {height: 300px!important;}
    .video.m8 iframe {height: 300px!important;}

    
    /* //////////////////// ABOUT //////////////////// */
    .french {margin-bottom: 30px;}

}