/* Style pour theme de base Kirby 2.4.1 + KNACSS V6.0.5 */

/* Typographie */
@font-face {
  font-family: 'Montserrat';
  src: url(../fonts/montserrat-700.woff) format("woff");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Montserrat';
  src: url(../fonts/montserrat-400.woff) format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Montserrat';
  src: url(../fonts/montserrat-300.woff) format("woff");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Montserrat';
  src: url(../fonts/montserrat-200.woff) format("woff");
  font-weight: 200;
  font-style: normal;
}

/* Général */
body {
  font-family: Montserrat, Helvetica, Arial, sans-serif;
  font-weight: 300;
  background-color: #ffffff;
  background-color: #F5F5F5;
}
a {text-decoration: none;}
a:hover {color:#ccc;}
ul {list-style: none; padding-left: 0px;}
figcaption {margin-top: 20px;}
figcaption.caption-top {margin-bottom: 15px;}
figure {margin-top: 0px; display: inline-block; line-height: 0px;}
figure p {font-size: 1.3rem; margin-top: 15px; text-align: center;}
video {max-width: auto; margin-bottom: 40px}
img {width:100%;}

.bloc-video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0; overflow: hidden;
  max-width: 100%;
}
.bloc-video iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}

/* menu principal */

ul.menu, .branding {font-size: 1.3rem;}
.branding {text-align: left;}
@media only screen and (max-width: 544px)
{.branding {text-align: center; display: none;}}
.branding a {font-weight: 300; text-transform: uppercase; letter-spacing: 0.1rem; padding-bottom: 5px;}
.menu-item a {font-weight: 300; padding-bottom: 5px; text-transform: uppercase; letter-spacing: 0.1rem;}

/* color header */

.light .menu-item a, .light .branding a, .dark .menu-item a, .dark .branding a {opacity: 0.8;}
.light a {color: #F5F5F5;}
.light .menu-item a:hover {color: #F5F5F5; opacity: 1}
.light .branding a:hover {color: #F5F5F5; opacity: 1}
.dark a {color: #000;}
.dark .menu-item a:hover {color: #000; opacity: 1}
.dark .branding a:hover {color: #000; opacity: 1}

.light .menu-item.is-active a {color: #F5F5F5;}
.dark .menu-item.is-active a {color: #333;}
.dark .responsive-nav-trigger .menu-icon::before, .dark .responsive-nav-trigger .menu-icon::after {background-color: #666;}
.dark .responsive-nav-trigger .menu-icon {background-color: #666;}
.light .responsive-nav-trigger .menu-icon::before, .light .responsive-nav-trigger .menu-icon::after {background-color: #F5F5F5;}
.light .responsive-nav-trigger .menu-icon {background-color: #F5F5F5;}

/* text */
.wrap {text-align: center; max-width: 2000px;}
/* .main {max-width: 1800px;} */
h1 {font-size: 2.4rem; text-align: left; font-weight: 300; margin: 0;}
h2 {font-size: 1.6rem; text-align: left; font-weight: 300; margin: 0; color:#b5b2b2;}
h3 {font-size: 2rem; font-weight: 300;}
h3.sousdossier {width:100%; display:block; margin-top:140px; margin-bottom:140px;text-transform: uppercase; font-size: 1.6rem; letter-spacing: 0.1rem;}
h4, h4:first-child {font-size: 2rem; font-weight: 300; margin-top: 140px; margin-bottom: 140px; }
a.btn {font-weight: 300; font-size: 1.4rem; text-transform: uppercase; letter-spacing: 0.1rem; margin-top: 25px; margin-bottom: 20px;}
.intro {text-align: left; font-size: 1.8rem;}

.text p {text-align: left; line-height: 25px; font-size: 1.4rem;}
.text a {color: #b5b2b2;}
.text a:hover {text-decoration: underline;}

.gritalique { text-align: left;}
.gritalique p {font-style: normal; color: #b5b2b2;}
.gritalique span {color:#000; font-size: 1.4rem;}

hr {width:40px; margin-top: 2em; margin-bottom: 2em;}

.header {
	background: transparent;
	height: 0px;
	width: 100%;
	z-index: 1000;
	position: fixed;
	top: 0;
	left: 0;
	padding-top: 30px;
}
.footer {height:120px; background-color: #F5F5F5;}
.footer p {font-size: 1.3rem; margin-top:0px; letter-spacing: 0.1rem;}

/* cover home */
.cover {min-height: 100vh;}
.cover span {color: #fff; display: block;}
.cover .item_info {}

/* image intro */
.image-intro {text-align: center; overflow: hidden;}
.image-intro img {height: auto; width: 100%; max-width: none; margin-left: 50%; transform: translateX(-50%);}
@media only screen and (max-width: 544px) {
  .image-intro {height: auto;}
  .image-intro img {height: auto; width: 200%; margin-left: 50%; transform: translateX(-50%);}
}

/* pagination-fleche SVG */
.pagination {padding-top: 30px; padding-bottom: 30px;}
.pagination-item svg {width: 40px; height: 40px;}
.pagination-item.right {float: right;margin-right: 80px;}
.pagination-item.left {float: left; margin-left: 80px;}
.pagination-item.is-inactive {opacity:0.2;}

/* contact */
.contact-item-content {padding: 1.5rem 2.25em .375em; margin:0px;}
.contact-item-icon {max-width: 35%;margin-bottom: 1.5em;}
.contact-options {margin-top: 30px; margin-bottom: 60px;}

/* portfolio */

.mozza {padding-top: 75px; text-align: center;}

@media only screen and (max-width: 544px) {
  .mozza {padding-top: 75px;}
}

ul.showcase {}

.bloc-text { padding-left: 8%; padding-right: 8%;}

.portfolio_item {
    position: relative;
    overflow: hidden;
    background-color: transparent;
    text-align: center;
    height: 22vw;
    width: auto;
    max-width: none;
    display: flex; /* contexte sur le parent */
    flex-direction: column; /* direction d'affichage verticale */
    justify-content: center; /* alignement vertical */
}

.portfolio_item img {width: auto; margin-left: 50%; transform: translateX(-50%) scale(1); transition: all .4s ease-out;}
.portfolio_item:hover img {transform: translateX(-50%) scale(1.07);}

@media only screen and (max-width: 544px) {
  /* .portfolio_item {height: auto; clear: both;} */
  .portfolio_item {height: 90vw;}
  .portfolio_item img {max-width: none; height: 90vw;}
}

@media only screen and (min-width: 1800px) {
  /* .portfolio_item {height: auto; clear: both;} */
  .portfolio_item {height: 34vh;}
}

.item_info {
    width: 100%;
    display: block;
    opacity: 1;
}

.item_info:hover {opacity: 0.3;}

a.item_info span {
    color: #000;
    font-size: 1.4rem;
    font-weight: 300;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
    width: 100%;
    display: block;
    margin-top: 20px;
}

a.item_info em {
    color: #999999;
    font-style: normal;
    font-size: 1.3rem;
    font-weight: 200;
    letter-spacing: 0.2rem;
    width: 100%;
    display: block;
    margin-top: 5px;
}