/*
  / ___|_ _/ _ \|  _ \ / ___|_ _|  / \  | \ | | \ | |_ _|  ( _ )   |  \/  |/ _ \| ____/ ___| / ___| | | | |   | ____|  _ \
 | |  _ | | | | | |_) | |  _ | |  / _ \ |  \| |  \| || |   / _ \/\ | |\/| | | | |  _| \___ \| |   | |_| | |   |  _| | |_) |
 | |_| || | |_| |  _ <| |_| || | / ___ \| |\  | |\  || |  | (_>  < | |  | | |_| | |___ ___) | |___|  _  | |___| |___|  _ <
  \____|___\___/|_| \_\\____|___/_/   \_\_| \_|_| \_|___|  \___/\/ |_|  |_|\___/|_____|____/ \____|_| |_|_____|_____|_| \_\
*/

/* GENERAL
**********************************************************************/

/*@import url("//hello.myfonts.net/count/32ee5b");*/
/*@font-face {font-family: 'Milliard-Thin';src: url('webfonts/32EE5B_0_0.eot');src: url('webfonts/32EE5B_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/32EE5B_0_0.woff2') format('woff2'),url('webfonts/32EE5B_0_0.woff') format('woff'),url('webfonts/32EE5B_0_0.ttf') format('truetype');}*/
/*@font-face {font-family'Bw Nista Grot Bd'src: url('webfonts/32EE5B_1_0.eot');src: url('webfonts/32EE5B_1_0.eot?#iefix') format('embedded-opentype'),url('webfonts/32EE5B_1_0.woff2') format('woff2'),url('webfonts/32EE5B_1_0.woff') format('woff'),url('webfonts/32EE5B_1_0.ttf') format('truetype');}*/
/*@font-face {font-family: ''Bw Nista Grot Bd'';src: url('webfonts/32EE5B_2_0.eot');src: url('webfonts/32EE5B_2_0.eot?#iefix') format('embedded-opentype'),url('webfonts/32EE5B_2_0.woff2') format('woff2'),url('webfonts/32EE5B_2_0.woff') format('woff'),url('webfonts/32EE5B_2_0.ttf') format('truetype');}*/
/*@font-face {font-family: 'Milliard-Book';src: url('webfonts/32EE5B_3_0.eot');src: url('webfonts/32EE5B_3_0.eot?#iefix') format('embedded-opentype'),url('webfonts/32EE5B_3_0.woff2') format('woff2'),url('webfonts/32EE5B_3_0.woff') format('woff'),url('webfonts/32EE5B_3_0.ttf') format('truetype');}*/


body {
	font-family: 'Bw Nista Grot Rg', sans-serif;
	height:      100%;
	width:       100vw;
	overflow-x:  hidden;
	}

#accueil, body.no-scroll {
	width:    100vw;
	height:   100vh;
	overflow: hidden;
	
	}

h1 {
	font-family:    'Bw Nista Grot Bk', sans-serif;
	font-size:      18vmin;
	text-align:     center;
	padding:        2em auto .1em;
	text-transform: uppercase;
	line-height:    1.8em;
	}

h2 {
	font-family:    'Bw Nista Grot Th', sans-serif;
	font-size:      3vmin;
	text-transform: uppercase;
	max-width:      1300px;
	margin:         1em auto .5em;
	color:          #333
	}

h3 {
	font-family:    'Bw Nista Grot Rg', sans-serif;
	font-size:      2.5vmin;
	text-transform: uppercase;
	max-width:      1300px;
	margin:         0 auto;
	color:          #333
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 568px) {
	
	h1 {
		font-size:   16vw;
		padding-top: 1em;
		}
	
	h2 {
		font-size:   8vw;
		padding-top: 1em;
		}
	
	#accueil {
		width:    100%;
		height:   100%;
		overflow: hidden;
		position: fixed;
		}
	
	.row .columns {
		padding: 0 30px;
		}
		
	}


/* NAVIGATION
**********************************************************************/
#nav {
	position: absolute;
	right:    20px;
	top:      20px;
	z-index:  1000;
	
	}

#nav ul {
	list-style: none;
	}

#nav li {
	list-style: none;
	display:    inline
	}

#nav a {
	font-family:     'Bw Nista Grot Bd';
	text-decoration: none;
	color:           #333;
	text-transform:  uppercase;
	font-size:       2vmin;
	padding:         0 .5em;
	text-align:      right
	}

#accueil #nav a {
	color: white
	}

#nav a.dark {
	color: black;
	}

#nav .lang {
	float:  right;
	margin: 0 0 0 2em;
	}

#btn-menu {
	display: none;
	}

#btn-menu.mini span {
	display: none;
	}


#btn-accueil {
	position: absolute;
	display:  block;
	z-index:  5000;
	width:    60vw;
	height:   30vh;
	margin:   35vh 20vw;
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 568px) {
	
	#btn-menu {
		display:  block;
		color:    white;
		position: fixed;
		top:      8px;
		left:     8px;
		z-index:  10000
		}
	
	#a_propos #btn-menu, #contact #btn-menu, #nous_rejoindre #btn-menu {
		color: #333
		}
	
	#nav {
		display: none;
		}
	
	#nav.show {
		position:   fixed;
		top:        0;
		left:       0;
		display:    block;
		height:     100vh;
		width:      100vw;
		background: rgba(51, 51, 51, 0.91)
		}
	
	#nav.show li {
		height:      20vh;
		display:     block;
		font-size:   36px;
		padding-top: 1.5em;
		text-align:  center;
		}
	
	#nav.show li a {
		color:     white;
		font-size: 36px;
		}
	
	#btn-accueil {
		position: absolute;
		display:  block;
		z-index:  5000;
		width:    80vw;
		height:   30vh;
		margin:   35vh 10vw;
		}
		
	}

/* SPLASH
**********************************************************************/
#accueil h1, #accueil h2 {
	display: none;
	z-index: -100
	}

svg {
	width:             100%;
	height:            100%;
	position:          absolute;
	z-index:           100;
	top:               0;
	left:              0;
	-webkit-animation: scale-down 140s;
	animation:         scale-down 120s;
	}

#background {
	width:             100vw;
	height:            100vh;
	z-index:           -100;
	position:          absolute;
	top:               0;
	left:              0;
	filter:            contrast(1.3);
	-webkit-animation: scale 120s;
	animation:         scale 120s;
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 568px) {
	
	svg {
		position: fixed;
		height:   100vh;
		}
	
	#background {
		position: fixed;
		}
		
	}

@-webkit-keyframes scale {
	0% {
		-webkit-transform: scale(1);
		-ms-transform:     scale(1);
		transform:         scale(1);
		
		}
	
	50% {
		-webkit-transform: scale(1.5);
		-ms-transform:     scale(1.5);
		transform:         scale(1.5);
		}
	
	100% {
		-webkit-transform: scale(1);
		-ms-transform:     scale(1);
		transform:         scale(1);
		}
	}

@keyframes scale {
	0% {
		-webkit-transform: scale(1);
		-ms-transform:     scale(1);
		transform:         scale(1);
		}
	
	50% {
		-webkit-transform: scale(1.5);
		-ms-transform:     scale(1.5);
		transform:         scale(1.5);
		}
	
	100% {
		-webkit-transform: scale(1);
		-ms-transform:     scale(1);
		transform:         scale(1);
		}
	}

@-webkit-keyframes scale-down {
	0% {
		-webkit-transform: scale(1.1);
		-ms-transform:     scale(1.1);
		transform:         scale(1.1);
		}
	
	50% {
		-webkit-transform: scale(1);
		-ms-transform:     scale(1);
		transform:         scale(1);
		}
	
	100% {
		-webkit-transform: scale(1.1);
		-ms-transform:     scale(1.1);
		transform:         scale(1.1);
		}
	}

@keyframes scale-down {
	0% {
		-webkit-transform: scale(1.1);
		-ms-transform:     scale(1.1);
		transform:         scale(1.1);
		
		}
	
	50% {
		-webkit-transform: scale(1);
		-ms-transform:     scale(1);
		transform:         scale(1);
		
		}
	
	100% {
		-webkit-transform: scale(1.1);
		-ms-transform:     scale(1.1);
		transform:         scale(1.1);
		
		}
	}

#accueil {
	background:          black url(../img/grid.svg) no-repeat;
	background-position: center center;
	background-size:     60px 60px;
	}

#accueil #wrapper {
	opacity:    0;
	width:      100vw;
	height:     100vh;
	overflow:   hidden;
	transition: 1s opacity ease;
	}

#accueil #wrapper.show {
	opacity: 1
	}

#refresh {
	font-size:      1em;
	position:       absolute;
	bottom:         20px;
	left:           20px;
	z-index:        1000;
	text-transform: uppercase
	}

#refresh a {
	color: white;
	}


#splash.flash:not(.ff) {
	fill: url(#image);
	
	}

/* TELEPHONE
**********************************************************************/
#phone {
	position:    absolute;
	width:       100vw;
	height:      100vh;
	background:  rgba(0, 0, 0, .9);
	top:         0;
	left:        0;
	z-index:     20000;
	text-align:  center;
	display:     none;
	padding-top: 30vh;
	}

#phone.visible {
	display: block;
	}

#phone h3 {
	font-family: 'Bw Nista Grot Bd';
	color:       white;
	font-size:   7vmin;
	font-weight: 500;
	line-height: 1em;
	margin:      0;
	text-align:  center;
	max-width:   none;
	padding:     1em
	}

#phone h4 {
	font-family: 'Bw Nista Grot Bd';
	color:       white;
	font-size:   11vmin;
	font-weight: 900;
	line-height: 1em;
	text-align:  center;
	}

#phone #btn-close {
	position:  absolute;
	top:       18px;
	right:     8px;
	color:     white;
	font-size: 5vmin
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 568px) {
	
	#phone #btn-close {
		font-size: 42px;
		right:     28px;
		}
		
	}

/* A PROPOS
**********************************************************************/
#a_propos h2 {
	font-size: 28px;
	}

#a_propos h3 {
	font-size: 24px;
	margin:    .5em 0 1em;
	}

.row.who {
	margin: 0 auto 2em auto
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 568px) {
	
	#a_propos h2 {
		font-size:   28px;
		line-height: 1.2em;
		}
	
	#a_propos h3 {
		font-size: 24px;
		margin:    .2em 0
		}
	
	#a_propos .row.who .columns {
		margin: 4em 0 0 0;
		}
		
	}


/* PORTFOLIO
**********************************************************************/

#portfolio:not(.detail), #portfolio2:not(.detail) {
	background: #111
	}

#portfolio h1, #portfolio #nav a, #portfolio p,
#portfolio2 h1, #portfolio2 #nav a {
	color: white;
	}

#portfolio .header p {
	/*font-size: 18px;*/
	text-align: center;
	}

/*.btn-zoom {*/
/*    float: right;*/
/*    font-size: 3vmin;*/
/*    color: rgba(255, 255, 255, .5);*/
/*    position: absolute;*/
/*    top: 0;*/
/*    right: 0;*/
/*    padding: 10px;*/
/*    z-index: 1000;*/
/*    opacity: 0;*/
/*    transition: .5s all ease;*/
/*}*/

/*.btn-zoom:hover {*/
/*    color: white;*/

/*}*/

/*.grid__item:hover .btn-zoom {*/
/*    opacity: 1;*/
/*}*/

/*.btn-zoom-close {*/
/*    position: absolute;*/
/*    top: 20px;*/
/*    right: 20px;*/
/*    color: white;*/
/*    font-size: 5vmin;*/
/*    display: none;*/
/*}*/

/*.btn-zoom-close:hover {*/
/*    color: white;*/
/*}*/

/*.zoom .btn-zoom-close {*/
/*    display: block;*/
/*    z-index: 10000*/
/*}*/


/*.zoom {*/
/*    height: 100%;*/
/*    width: 100vw;*/
/*    position: fixed;*/
/*    background: rgba(0, 0, 0, .9);*/
/*    top: 0;*/
/*    left: 0;*/
/*    bottom: 0;*/
/*    right: 0;*/
/*    text-align: center;*/
/*    z-index: 10000;*/

/*}*/

/*.zoom.hidden {*/
/*    display: none;*/
/*}*/

/*.zoom .content {*/
/*    border-radius: 4px;*/
/*    overflow: hidden;*/
/*    width: 80vmin;*/
/*    height: 80vmin;*/
/*    margin: 10vh auto;*/
/*    box-shadow: 0px 2px 10px 0px black;*/

/*}*/

/*.zoom .content .slider, .zoom .content .slider .slider__item {*/
/*    height: 100%;*/
/*}*/


/*.zoom .actions {*/
/*    margin-top: -3em;*/
/*    font-size: 100%*/
/*}*/


/*.slider {*/
/*    padding: 0;*/
/*    border-radius: 5px;*/
/*}*/

/*.no-touch .slider {*/
/*    padding: 0 0 1.25em;*/
/*}*/

/*.slider__item {*/
/*    width: 100%;*/
/*    padding: 4em;*/

/*}*/

/*.slider__item img {*/
/*    width: 100%;*/
/*}*/


/*.slider .flickity-page-dots .dot {*/
/*    background: #131417;*/
/*}*/

/*.meta {*/
/*    position: relative;*/
/*    margin: 10px 0 0;*/
/*    padding: 0 60px 0 20px;*/
/*    text-align: left;*/
/*    font-size: 1vw*/
/*}*/

/*div.carousel-cell {*/
/*    width: 100%;*/
/*    height: auto;*/
/*    position: relative;*/

/*}*/


/*.action {*/
/*    font-family: Avenir, 'Helvetica Neue', 'Lato', 'Segoe UI', Helvetica, Arial, sans-serif;*/
/*    font-size: 1.05em;*/
/*    position: relative;*/
/*    overflow: hidden;*/
/*    margin: 0;*/
/*    padding: .25em;*/
/*    cursor: pointer;*/
/*    color: #fff;*/
/*    border: none;*/
/*    background: none;*/
/*}*/

/*.action:focus {*/
/*    outline: none;*/
/*}*/

/*.action--button {*/
/*    color: #5c5edc;*/
/*}*/

/*.no-touch .action--button:hover {*/
/*    color: #fff;*/
/*    outline: none;*/
/*}*/

/*.text-hidden {*/
/*    position: absolute;*/
/*    top: 200%;*/
/*}*/


/*!* MOBILE *!*/
/*@media screen*/
/*and (min-device-width: 320px)*/
/*and (max-width: 568px) {*/

/*    .btn-zoom {*/
/*        display: none;*/
/*    }*/

/*    .meta {*/
/*        padding: 0 0 10px 0px;*/
/*        text-align: center;*/
/*    }*/

/*    .meta__titre {*/
/*        font-size: 24px;*/
/*    }*/

/*    .meta__client {*/
/*        font-size: 18px;*/
/*    }*/

/*    .actions {*/
/*        display: block;*/
/*        margin-top: -15px;*/
/*        opacity: 1;*/
/*    }*/


/*}*/

/*@media only screen*/
/*and (min-device-width: 768px)*/
/*and (max-device-width: 1024px) {*/
/*    h1 {*/
/*        font-size: 100px;*/
/*    }*/

/*    .meta {*/
/*        padding: 1em*/
/*    }*/

/*    .btn-zoom {*/
/*        display: none;*/
/*    }*/

/*    .flickity-page-dots {*/
/*        position: inherit;*/
/*        margin-top: 2em;*/
/*    }*/

/*    .actions {*/
/*        opacity: 1;*/
/*    }*/

/*}*/

/* CONTACT
**********************************************************************/
#contact h4 {
	text-transform: uppercase;
	font-family:    'Bw Nista Grot Bk', sans-serif;
	
	margin:         1em 0 .5em;
	}

#contact address {
	font-style: normal;
	}

.error > label > small {
	text-transform: none;
	}

#contact input[type=text], #contact input[type=email],  #contact textarea {
	border: silver 1px solid;
	}

#contact textarea {
	height: 10em;
	}

#contact .button {
	border: 0;
	float:  right;
	}

#contact .picto-ok {
	width:  100px;
	margin: 0 10px 0 0;
	float:  left;
	}

.success-message h4 {
	font-size:   18px;
	padding-top: 1.5em;
	}

::-webkit-input-placeholder {
	color:          silver;
	text-transform: uppercase;
	}

:-moz-placeholder {
	color:          silver;
	text-transform: uppercase;
	}

::-moz-placeholder {
	color:          silver;
	text-transform: uppercase;
	}

:-ms-input-placeholder {
	color:          silver;
	text-transform: uppercase;
	}

#contact button, #contact .button {
	background:     #888;
	text-transform: uppercase;
	}

#contact button:hover, #contact .button:hover {
	background: #333;
	}

#last_name:parent {
	position: absolute; /* don't bother other elements on the page */
	width:    0; /* small */
	height:   0; /* very small */
	margin:   0; /* tiny */
	padding:  0; /* very tiny */
	border:   0; /* tada */
	}

#last_name {
	position: absolute; /* don't bother other elements on the page */
	width:    0; /* small */
	height:   0; /* very small */
	margin:   0; /* tiny */
	padding:  0; /* very tiny */
	border:   0; /* tada */
	}

#contact #last_name[type=text] {
	border: 0;
	}

.error {
	display: none
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 568px) {
	
	#contact h4 {
		margin-top: 1em;
		font-size:  14px
		}
		
		
	}

/* TRADUCTIONS
**********************************************************************/
.translation em {
	position:   absolute;
	background: rgba(255, 0, 0, 0.5);
	color:      white;
	top:        20%;
	left:       20%;
	transform:  rotateZ(-10deg);
	font-size:  12px;
	display:    none;
	}


/* PIED DE PAGE
**********************************************************************/

#footer {
	padding:    0 40px;
	display: flex;
	justify-content: space-between;
	width: 100%;
	}

#footer #sms {
	background: rgba(255,255,255,.3);
	border-radius: 10px;
	padding: .5em 2em .5em ;
	margin: 0 0 0 40px;
}

#footer #sms img {
	height: .7em;
	margin-right: .5em;

}

#portfolio #footer a {
	color: white;
	}

#footer a {
	color:     #333;
	font-size: 2.5em;
	padding:   0 0 0 .5em;
	}

#accueil #footer {
	position: absolute;
	right:    20px;
	bottom:   20px;
	z-index:  1000;
	padding:  0;
	}

#accueil #footer a {
	color:     white;
	font-size: 2.5em;
	padding:   0 0 0 .5em;
	}


/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 568px) {
	
	#accueil {
		overflow: hidden;
		}
	
	#accueil #footer {
		position: fixed;
		right:    20px;
		bottom:   20px;
		z-index:  1000;
		}
	
	#accueil #footer a {
		color:     white;
		font-size: 1.2em;
		padding:   0 0 0 .5em;
		}
	
	#footer a {
		font-size: 2em;
		}

	#footer {
		flex-direction: column;
	}
		
	}

@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px) {
	
	#accueil #footer {
		position: absolute;
		right:    20px;
		bottom:   60px;
		z-index:  1000;
		padding:  0;
		}
		
	}

/* BIBLIOTHEQUE
**********************************************************************/
.bibliotheque.item {
	
	width:   50%;
	float:   left;
	padding: 20px;
	}

.bibliotheque.item .cover {
	float:      left;
	width:      15%;
	height:     100px;
	margin:     10px;
	box-shadow: 0px 1px 6px black
	}

.bibliotheque.item h4 {
	
	text-transform: uppercase;
	font-family:    '' Bw Nista Grot Bd '', sans;
	font-size:      1vw;
	line-height:    1em;
	padding-top:    1em
	}

.bibliotheque.item p {
	margin:    0;
	font-size: .8em;
	}

/* NOUS REJOINDRE
**********************************************************************/
#nous_rejoindre h1 {
	font-size:   12vmin;
	padding-top: .5em;
	}

.postulation {
	background:     #333;
	float:          right;
	text-transform: uppercase;
	font-family:    '' Bw Nista Grot Bd '', sans
	}

.postulation:hover {
	background: black;
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 568px) {
	
	#nous_rejoindre h2 {
		font-size: 24px;
		margin:    .2em 0
		}
	
	#nous_rejoindre img {
		margin-top: 40px;
		}
		
	}

/* PORTFOLIO LAYOUT
*******************************************************************************/

#portfolio-grid {
	
	float:  left;
	width:  90vw;
	margin: 5vh 5vw;
	
	}


.meta {
	float: left
	}

#filter {
	list-style: none;
	text-align: center;
	margin:     10vh 0;
	}

#filter li {
	font-family:    'Bw Nista Grot Bk';
	display:        inline-block;
	border-radius:  4px;
	padding:        0em .3em;
	margin:         0 .2em;
	text-align:     center;
	color:          white;
	border:         .5px solid white;
	font-size:      2vmin;
	text-transform: uppercase;
	font-weight:    400;
	transition:     .4s all ease;
	cursor:         pointer;
	}

#filter li:hover {
	color:      white;
	background: rgba(255, 255, 255, .1);
	}

#filter li.sel {
	background:  white;
	color:       black;
	font-family: 'Bw Nista Grot Bk';
	}


/*!*#portfolio .item {*!*/
/*!*    width: 90vw;*!*/
/*!*    margin: 1vw;*!*/
/*!*    border-radius: 10px;*!*/
/*!*    overflow: hidden;*!*/
/*!*    float: left;*!*/
/*!*    transition: all .2s cubic-bezier(.8, -.5, .2, 2.4);*!*/

/*!*}*!*/


/*!*#portfolio .item {*!*/
/*!*    width: 28vw;*!*/
/*!*    height: calc(30vw / 2);*!*/
/*!*    padding: .2vw;*!*/
/*!*    z-index: -100;*!*/
/*!*    box-shadow: 0 2px 18px black;*!*/
/*!*}*!*/


/*!*#portfolio img {*!*/
/*!*    height: 12vw;*!*/
/*!*    float: left;*!*/
/*!*}*!*/

/*!*#portfolio .large img {*!*/
/*!*    height: 19vw;*!*/
/*!*    float: left;*!*/

/*!*}*!*/

/*!*.even .img {*!*/
/*!*    float: right;*!*/
/*!*    !*margin: 0 -10% -10% 0%;*!*!*/
/*!*}*!*/


/*#portfolio .meta {*/
/*    width: 13vw;*/
/*    display: table-row;*/
/*    vertical-align: middle;*/
/*    margin-top: 4em;*/
/*}*/

/*.meta__titre {*/
/*    font-size: 1.5vw;*/
/*    line-height: 1em;*/
/*    margin-top: .2em;*/
/*    font-family: 'Bw Nista Grot Bk';*/
/*}*/

/*.carousel, .carousel div, .single {*/
/*    width: 13vw;*/
/*    height: 15vw;*/
/*    float: left*/
/*}*/


/*.large .carousel, .large .carousel div, .large .single {*/
/*    width: 23vw;*/
/*    height: 23vw;*/
/*}*/

/*#portfolio .carousel img {*/
/*    width: 11vw;*/
/*    height: 11vw;*/
/*    margin: 0 1vw 0 1vw;*/
/*}*/

/*#portfolio .large .carousel img {*/
/*    width: 19vw;*/
/*    height: 19vw;*/
/*    margin: 0 2vw 0 2vw;*/
/*}*/

/*.meta__client {*/
/*    font-size: .8vw;*/
/*    line-height: 1em;*/
/*}*/

/*.actions {*/
/*    font-size: .6vw;*/
/*    line-height: 1em;*/
/*    font-weight: bold;*/
/*}*/

/*#portfolio .item.large {*/
/*    width: 43vw;*/
/*    height: calc(43vw / 2);*/
/*}*/

/*#portfolio .item.large .meta__titre {*/
/*    font-size: 2vw;*/
/*    line-height: 1em;*/
/*}*/

/*#portfolio .item.large .meta__client {*/
/*    font-size: 1, 5vw;*/
/*    line-height: 1em;*/
/*}*/

/*#portfolio .item.large .meta {*/
/*    width: 19vw;*/
/*}*/

/*.flickity-prev-next-button {*/
/*    display: none;*/
/*}*/

/*#portfolio .item:hover {*/
/*    transform: scale(1.1);*/

/*}*/

/*#portfolio .item:hover .flickity-prev-next-button {*/
/*    display: block*/
/*}*/

/*.flickity-prev-next-button {*/
/*    width: 20px;*/
/*    height: 20px;*/
/*}*/

/*!* MOBILE *!*/
/*@media screen*/
/*and (min-device-width: 320px)*/
/*and (max-width: 568px) {*/

/*    .even .img {*/
/*        float: none;*/
/*    }*/

/*    #portfolio .item, #portfolio .item.large {*/
/*        width: 90vw;*/
/*        margin: 0vw 0 5vw;*/
/*        height: auto;*/
/*        padding: .2vw;*/
/*        z-index: -100;*/
/*        box-shadow: 0 2px 18px black;*/
/*    }*/

/*    .carousel, .carousel div, #portfolio .carousel img, #portfolio img,*/
/*    .large .carousel, .large .carousel div, #portfolio .large .carousel img, #portfolio img, .single img {*/
/*        width: 80vw;*/
/*        height: 80vw;*/
/*    }*/

/*    .single, .single img {*/
/*        width: 80vw;*/
/*        height: 80vw;*/
/*    }*/

/*    #portfolio img {*/
/*        margin: 5vw;*/
/*    }*/

/*    #portfolio .carousel {*/
/*        margin: 5vw;*/
/*    }*/

/*    #portfolio .item.large .meta, #portfolio .item .meta {*/
/*        width: 80vw;*/


/*    }*/


/*    #portfolio .item.large .meta__titre, #portfolio .item .meta__titre {*/
/*        font-size: 24px;*/
/*        margin-botttom: 20px;*/
/*        text-align: center;*/
/*        width: 90vw;*/
/*    }*/

/*    #portfolio .item.large .meta__client, #portfolio .item .meta__client {*/
/*        font-size: 18px;*/
/*        margin-top: 40px;*/
/*        width: 90vw;*/
/*    }*/

/*    .actions {*/
/*        font-size: 12px;*/
/*        width: 90vw;*/
/*    }*/

/*    #portfolio .item:hover {*/
/*        transform: none;*/

/*    }*/

/*    #filter {*/
/*        width: 100vw;*/
/*        padding: 0;*/
/*        margin: 5vh 0;*/
/*    }*/

/*    #filter li {*/
/*        font-size: 10px;*/
/*    }*/

/*    .large .single {*/
/*        width: 90vw;*/
/*        height: 90vw;*/


/*    }*/

/*    #portfolio .large img {*/
/*        width: 90%;*/
/*        height: 90%*/

/*    }*/

/*    .actions span, .actions {*/
/*        font-size: 9px;*/
/*    }*/


/*}*/


#p-container {
	width:      100vw;
	display:    flex;
	flex-wrap:  wrap;
	overflow-x: hidden;
	}

.p-item {
	width:     25vw;
	height:    25vw;
	overflow:  hidden;
	
	color:     white;
	font-size: 2vw;
	}


.p-item .p-legend {
	width:                   25vw;
	height:                  25vw;
	background:              rgba(0, 0, 0, .5);
	-webkit-backdrop-filter: blur(15px);
	backdrop-filter:         blur(15px);
	font-family:             'Bw Nista Grot xBd', sans-serif;
	display:                 flex;
	flex-direction:          column;
	justify-content:         space-between;
	text-align:              center;
	padding:                 1em;
	position:                relative;
	top:                     25vw;
	transition:              .5s ease top;
	color:                   white;
	}

.p-item:hover .p-legend {
	top: 0
	}

.p-item .p-legend .p-title {
	flex:            1 1 50%;
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	}

.p-item .p-label {
	font-size:      1vw;
	font-family:    'Bw Nista Grot Th', sans-serif;
	text-align:     right;
	text-transform: uppercase;
	}

.p-item:hover {
	background-size: 120%;
	}

.p-item h4 {
	font-family: 'Bw Nista Grot xBd', sans-serif;
	}

.p-item h5 {
	font-family: 'Bw Nista Grot Th', sans-serif;
	}

#p-detail {
	margin: 10vh auto;
	}

#p-detail h3 {
	font-size:      6vw;
	text-transform: uppercase;
	font-family:    'Bw Nista Grot Bk', sans-serif;
	text-align:     center;
	margin-top:     1em;
	line-height:    1.1em;
	}

#p-detail h4, #p-detail h4 p {
	font-size:   2vw;
	line-height: 1em;
	text-align:  center;
	margin:      2em auto 2em;
	}

#p-detail h4 p {
	line-height: 1.3em;
	text-align:  justify;
	font-size:   2vw;
	}

#p-detail h6 {
	font-size:   2vw;
	line-height: 1.1em;
	margin:      2em auto 1em;
	}

#p-detail .action-col {
	display:        flex;
	flex-direction: column;
	justify-self:   center;
	}

#p-detail .actions {
	display:     block;
	font-size:   18px;
	margin:      auto;
	line-height: 1.3em;
	}

#p-detail .actions span {
	margin:    2em 0;
	display:   block;
	font-size: 100%;
	}

.p-row {
	display: flex;
	margin:  2vh 0;
	}

#p-detail .row-item {
	display: flex;
    margin: 0 0 10vh 0;
	}


#p-detail .row-item:nth-child(odd) .col-visuel {
	order: 0;
	}

#p-detail .row-item:nth-child(odd) .col-contenu {
	order: 1
	}

/*.picto-cltp {*/
/*    width: 20vw;*/
/*    position: absolute;*/
/*    top:10vh;*/
/*    right: 10vw;*/
/*}*/


.p-infos {
	margin:  10vh auto 10px;
	padding: 10px 0;
	}

.p-infos strong {
	font-family: "Bw Nista Grot xBd", sans;
	}

.p-infos strong.big {
	font-size: 300%;
	}

.meme-client h6 {
	text-align: center;
	font-size:  2vw;
	margin:     2em 0 1em;
	}

.meme-client #p-container {
	justify-content: center;
	margin-bottom:   5vh;
	}

.p-nav {
	margin-bottom: 5vh;
	}

.p-arrow {
	font-weight: bold;
	opacity:     .5;
	transition:  opacity .5s ease;
	}

.p-arrow:hover {
	opacity: 1;
	}

.p-prev {
	text-align: right;
	}

.actions {
	text-align: center;
	margin:     0px 0 0 0;
	font-size:  75%;
	opacity:    1;
	
	margin:     10px;
	}

.actions span {
	padding: 0 1em;
	color:   rgba(0, 0, 0, .2);
	}

.actions .action {
	color:         rgba(255, 255, 255, .6);
	background:    rgba(0, 0, 0, .2);
	padding:       2px 4px;
	border-radius: 4px;
	
	margin:        0 0 0 4px;
	
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 568px) {
	
	#portfolio .header p {
		font-size: 18px;
		}
	
	.p-item {
		width:  80vw;
		height: 80vw;
		margin: 5vw 10vw;
		}
	
	.p-item .p-legend {
		width:  80vw;
		height: 20vw;
		top:    60vw
		}
	
	.p-item:hover .p-legend {
		top: 80vw
		}
	
	.p-item h4 {
		font-size: 12px;
		
		}
	
	#p-detail h4 {
		font-size:   18px;
		line-height: 1em;
		}
	
	.p-item h5 {
		font-size: 10px;
		
		}
	
	#p-detail .row-item {
		/*width: 100vw;*/
		display:        flex;
		flex-direction: column;
		margin:         0 0 10vh 0;
		
		}
	
	#p-detail {
		width: 80vw;
		
		}
	
	.actions {
		width: auto;
		}
	
	.meme-client h6 {
		font-size: 24px;
		}
	
	#p-detail .row-item .col-visuel {
		order: 0;
		}
	
	#p-detail .row-item .col-contenu {
		order:   1;
		padding: 0;
		}
	
	#p-detail .row .columns {
		padding: 0 0px;
		}
	
	#p-detail .row.p-infos .columns {
		padding: 10px 0
		}
	
	#p-detail #p-container .p-item {
		margin: 5vh 0;
		}
	
	.p-nav {
		font-size: 75%;
		}
	
	#filter li {
		font-size: 3vw;
		}
		
	}


#btn5ans {
	position: absolute;
	width: 13vw;
	height: 13vw;
	background: url(../img/btn-5ans.png)  no-repeat;
	background-size: cover;
	top: 15vh;
	right:10vw;
	z-index: 1000;
	transform-origin: center center;
	transform: rotateZ(15deg);
	transition: .5s ease-in-out transform;
	}

#btn5ans:hover {
	transform: scale(1.2)  rotateZ(15deg);;
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 568px) {
	#btn5ans {
		width:  30vw;
		height: 30vw;
		top:20vh
		}
	}