/* HEADER
   ========================================================================== */

.hero-cover {
  position: relative;
  background-image: url('/img/aj-link-hero-image-17.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom center;
  background-color: white;
  height: 800px;
}

.header-flex-container {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0 auto;
  width: 100vw;
  z-index: -1;
}

.h1-container {
  margin: 0 auto;
  width: 100%;
}

.header-title {
  font-style: italic;
  color: #004282;
  margin: 0.2em auto;
  font-weight: 700;
  /*  letter-spacing: 1px;*/
  width: 100%;
}

.tagline {
  font-size: 1.6em;
  color: #333333;
  font-style: italic;
  margin: 0 auto;
  padding: 0.2em 0;
  width: 100%;
  font-family: "ff-meta-web-pro", sans-serif;
  font-weight: 700;
}

.phone {
  /*    text-shadow: white;*/
  font-style: italic;
  letter-spacing: 6px;
  font-weight: 600;
  font-size: 1em;
  margin: 0 auto;
  color: #EE2A2B;
  font-family: "ff-meta-web-pro", sans-serif;
  padding: 1em;
  font-variant-numeric: lining-nums;

}

.container-button {
  display: flex;
  width: 100%;
  background-color: red;
}

.button-flex {
  flex-wrap: wrap;
}

.button-a {
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  z-index: -1;
}



/* MAIN
   ========================================================================== */

.main {
  background-image: #004282;
  /*  background-image: linear-gradient( #004282 75%, #333333);*/
  /*  background-color: linear-gradient( #004282, red );*/
  height: auto;
}

/*Photo Gallery*/

.product-gallery {
  /*    padding: .2vw;*/
  flex-flow: row wrap;
  display: flex;
  padding: 0;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.img-container {
  flex: auto;
  width: 340px;
  height: auto;
  position: relative;
  padding: 0;
}

.background-img {
  height: 280px;
  width: auto;
  /*  display: block;*/
  background-size: cover;
  background-position: 50% 50%;
  transform: translate3d(0);
  position: relative;
  transition: background-position 1s;
}

.img-1 {
  background-image: linear-gradient(rgba(0, 66, 130, 0.45) 100%, rgba(0, 155, 212, 0.04)), url('/img/banquet-convention-supplies.jpg');

}

.img-1:hover {
  background-image: linear-gradient(rgba(0, 66, 130, 0) 100%, rgba(0, 155, 212, 0.0)), url('/img/banquet-convention-supplies.jpg');
  background-position: right top;
}

.img-2 {
  background-image: linear-gradient(rgba(0, 66, 130, 0.45) 100%, rgba(0, 155, 212, 0.04)), url('/img/plate-forks.jpg');

}

.img-2:hover {
  background-image: linear-gradient(rgba(0, 66, 130, 0) 100%, rgba(0, 155, 212, 0.0)), url('/img/plate-forks.jpg');
  background-position: right top;
}

.img-3 {
  background-image: linear-gradient(rgba(0, 66, 130, 0.45) 100%, rgba(0, 155, 212, 0.04)), url('/img/furniture-supplies.jpg');
}

.img-3:hover {
  background-image: linear-gradient(rgba(0, 66, 130, 0) 100%, rgba(0, 155, 212, 0.0)), url('/img/furniture-supplies.jpg');
  background-position: right top;
}

.img-4 {
  background-image: linear-gradient(rgba(0, 66, 130, 0.45) 100%, rgba(0, 155, 212, 0.04)), url('/img/green-supplies-leave.jpg');
}

.img-4:hover {
  background-image: linear-gradient(rgba(0, 66, 130, 0) 100%, rgba(0, 155, 212, 0.0)), url('/img/green-supplies-leave.jpg');
  background-position: right top;
}

.img-5 {
  background-image: linear-gradient(rgba(0, 66, 130, 0.45) 100%, rgba(0, 155, 212, 0.04)), url('/img/kitchen-supplies.jpg');
}

.img-5:hover {
  background-image: linear-gradient(rgba(0, 66, 130, 0) 100%, rgba(0, 155, 212, 0.0)), url('/img/kitchen-supplies.jpg');
  background-position: right top;
}

.img-6 {
  background-image: linear-gradient(rgba(0, 66, 130, 0.45) 100%, rgba(0, 155, 212, 0.04)), url('/img/engineering-supplies.jpg');
}

.img-6:hover {
  background-image: linear-gradient(rgba(0, 66, 130, 0) 100%, rgba(0, 155, 212, 0.0)), url('/img/engineering-supplies.jpg');
  background-position: right top;
}

.img-7 {
  background-image: linear-gradient(rgba(0, 66, 130, 0.45) 100%, rgba(0, 155, 212, 0.04)), url('/img/software-supplies-2.jpg');
}

.img-7:hover {
  background-image: linear-gradient(rgba(0, 66, 130, 0) 100%, rgba(0, 155, 212, 0.0)), url('/img/software-supplies-2.jpg');
  background-position: right top;
}

.img-8 {
  background-image: linear-gradient(rgba(0, 66, 130, 0.45) 100%, rgba(0, 155, 212, 0.04)), url('/img/room-supplies-new.jpg');
}

.img-8:hover {
  background-image: linear-gradient(rgba(0, 66, 130, 0) 100%, rgba(0, 155, 212, 0.0)), url('/img/room-supplies-red.jpg');
  background-position: right top;
}

.title-product {
  position: absolute;
  color: white;
  font-size: 0.98em;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  text-transform: uppercase;
  height: auto;
  font-weight: 600;
  z-index: 9;
  width: 100%;
}

.darker-text {
  text-shadow: -1px -1px 3px rgba(0, 0, 0, 0.24);

}

/* ASIDE
   ========================================================================== */

.item3 {
  background-image: linear-gradient(to bottom, #004282, rgb(132, 154, 175));

  /*  background-color: #5a7186;*/
}

.container-clients {
  display: flex;
  align-items: flex-start;
  align-items: center;
  flex-flow: wrap;
  margin: 0 auto;
  max-width: 1100px;
  /*  background-color: red;*/
}

.item-logo {

  flex: 6em;
  padding: 4em;
  text-align: center;


  /*  width: 200px;*/
  /*  height: 200px;*/
}


.logo-hotel:hover {
  cursor: pointer;
  filter: drop-shadow(1px 1px 1px #333333)
}

.hotels {
  width: 75%;
  opacity: 1;
  margin-bottom: 40px
}

/* ARTICLE 
   ========================================================================== */

.item4 {

  background-color: rgb(237, 237, 237);
  color: #343434;
}

.map-container {
  width: 100%;
  /*  max-width: 1440px;*/
  background-color: rgb(66, 66, 66);
  /*  margin-bottom: 2.5em;*/
  margin-right: auto;
  margin-left: auto;
  padding: 1em 0 0 0;
  /*   background-color: #333333;*/
}


.h3-client {
  color: rgb(237, 237, 237);
  /*  font-size: 1.5em;*/
  text-decoration: underline;
  text-transform: uppercase;
  margin-bottom: 1.49em;
}

.map-container iframe {
  opacity: 1;
  /*  background-color: #333333;*/
  /*  max-width: 1240px;*/
  /*      padding: 5em 0;*/
  margin: 0 auto;
  width: 90%;
}

.map-clients {
  width: 100%;
  height: 450px;
  border: 0;
}

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

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

@media screen and (min-width:1200px) {}

@media screen and (max-width:1024px) {}

@media screen and (max-width:915px) {}