/* ============================================================
PORTRAIT
============================================================ */
@media screen and (min-width: 1280px) and (max-width: 3000px) and (orientation:portrait) {

.gallery-wrap1 {
  padding-top: 20px;
  padding-bottom: 40px;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 40vh;
}
.gallery-wrap2 {
  padding-top: 20px;
  padding-bottom: 40px;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 23vh;
}
.item {
  flex: 1;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: none;
  transition: flex 0.7s ease; 
 }

.item:hover {
    flex: 12
}
}

@media screen and (min-width: 640px) and (max-width: 1279px) and (orientation:portrait) {

.gallery-wrap1 {
  padding-top: 20px;
  padding-bottom: 40px;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 52vh;
}
.gallery-wrap2 {
  padding-top: 20px;
  padding-bottom: 40px;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 30vh;
}
.item {
  flex: 1;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: none;
  transition: flex 0.7s ease; 
 }

.item:hover {
    flex: 10
}
}

@media screen and (min-width: 360px) and (max-width: 639px) and (orientation:portrait) {

.gallery-wrap1 {
  padding-top: 20px;
  padding-bottom: 40px;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 50vh;
}
.gallery-wrap2 {
  padding-top: 20px;
  padding-bottom: 40px;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 31vh;
}
.item {
  flex: 1;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: none;
  transition: flex 0.7s ease; 
 }

.item:hover {
    flex: 9
}
}

@media screen and (min-width: 320px) and (max-width: 359px) and (orientation:portrait) {

.gallery-wrap1 {
  padding-top: 20px;
  padding-bottom: 40px;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 54vh;
}
.gallery-wrap2 {
  padding-top: 20px;
  padding-bottom: 40px;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 34vh;
}
.item {
  flex: 1;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: none;
  transition: flex 0.7s ease; 
 }

.item:hover {
    flex: 9
}
}


/* ============================================================
LANDSCAPE
============================================================ */
@media screen and (min-width: 1601px) and (max-width: 3200px) and (orientation:landscape) {

.gallery-wrap1 {
  padding-top: 20px;
  padding-bottom: 40px;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 62vh;
}
.gallery-wrap2 {
  padding-top: 20px;
  padding-bottom: 40px;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 35vh;
}
.item {
  flex: 1;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: none;
  transition: flex 0.7s ease; 
 }

.item:hover {
    flex: 7
}
}


@media screen and (min-width: 1401px) and (max-width: 1600px) and (orientation:landscape) {

.gallery-wrap1 {
  padding-top: 20px;
  padding-bottom: 40px;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 62vh;
}
.gallery-wrap2 {
  padding-top: 20px;
  padding-bottom: 40px;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 37vh;
}
.item {
  flex: 1;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: none;
  transition: flex 0.7s ease; 
 }

.item:hover {
    flex: 5
}
}


@media screen and (min-width: 1281px) and (max-width: 1400px) and (orientation:landscape) {

.gallery-wrap1 {
  padding-top: 20px;
  padding-bottom: 40px;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 64vh;
}
.gallery-wrap2 {
  padding-top: 20px;
  padding-bottom: 40px;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 38vh;
}
.item {
  flex: 1;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: none;
  transition: flex 0.7s ease; 
 }

.item:hover {
    flex: 4
}
}


@media screen and (min-width: 1025px) and (max-width: 1280px) and (orientation:landscape) {

.gallery-wrap1 {
  padding-top: 20px;
  padding-bottom: 40px;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 80vh;
}
.gallery-wrap2 {
  padding-top: 20px;
  padding-bottom: 40px;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 47vh;
}
.item {
  flex: 1;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: none;
  transition: flex 0.7s ease; 
 }

.item:hover {
    flex: 5
}
}


@media screen and (min-width: 640px) and (max-width: 1024px) and (orientation:landscape) {

.gallery-wrap1 {
  padding-top: 20px;
  padding-bottom: 40px;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 80vh;
}
.gallery-wrap2 {
  padding-top: 20px;
  padding-bottom: 40px;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 20vh;
}
.item {
  flex: 1;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: none;
  transition: flex 0.7s ease; 
 }

.item:hover {
    flex: 10
}
}


@media only all and (min-width:1024px) and (max-width:1279px) and (orientation:landscape) {

.gallery-wrap1 {
  padding-top: 20px;
  padding-bottom: 40px;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 77vh;
}
.gallery-wrap2 {
  padding-top: 20px;
  padding-bottom: 40px;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 47vh;
}
.item {
  flex: 1;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: none;
  transition: flex 0.7s ease; 
 }

.item:hover {
    flex: 3
}
}



/* ============================================================
ACCORDION
============================================================ */
.item-1 { 
  background-image: url('http://plieuxarts.com/img/affiches/arcile.jpg');
}

.item-2 { 
  background-image: url('http://plieuxarts.com/img/affiches/bari.jpg');
}

.item-3 { 
  background-image: url('http://plieuxarts.com/img/affiches/bernard.jpg');
}

.item-4 { 
  background-image: url('http://plieuxarts.com/img/affiches/debusschere.jpg');
}

.item-5 { 
  background-image: url('http://plieuxarts.com/img/affiches/legrand.jpg');
}

.item-6 { 
  background-image: url('http://plieuxarts.com/img/affiches/lemonnier.jpg');
}

.item-7 { 
  background-image: url('http://plieuxarts.com/img/affiches/ollier.jpg');
}

.item-8 { 
  background-image: url('http://plieuxarts.com/img/affiches/rohaut.jpg');
}

.item-9 { 
  background-image: url('http://plieuxarts.com/img/affiches/ruais.jpg');
}

.item-10 { 
  background-image: url('http://plieuxarts.com/img/affiches/smith.jpg');
}

.item-11 { 
  background-image: url('http://plieuxarts.com/img/flyers/arcile.jpg');
}

.item-12 { 
  background-image: url('http://plieuxarts.com/img/flyers/bari.jpg');
}

.item-13 { 
  background-image: url('http://plieuxarts.com/img/flyers/bernard.jpg');
}

.item-14 { 
  background-image: url('http://plieuxarts.com/img/flyers/debusschere.jpg');
}

.item-15 { 
  background-image: url('http://plieuxarts.com/img/flyers/legrand.jpg');
}

.item-16 { 
  background-image: url('http://plieuxarts.com/img/flyers/lemonnier.jpg');
}

.item-17 { 
  background-image: url('http://plieuxarts.com/img/flyers/ollier.jpg');
}

.item-18 { 
  background-image: url('http://plieuxarts.com/img/flyers/rohaut.jpg');
}

.item-19 { 
  background-image: url('http://plieuxarts.com/img/flyers/ruais.jpg');
}

.item-20 { 
  background-image: url('http://plieuxarts.com/img/flyers/smith.jpg');
}