/* Image hover fade effect */

.opere > .wrap {
  position: relative;
}

@media screen and (max-width: 280px) {
  .opere {
    display: grid;
    grid-template-columns: auto;
    gap: 4px;
  }
}

@media screen and (min-width: 281px) and (max-width: 520px) {
  .opere {
    display: grid;
    grid-template-columns: auto auto;
    gap: 4px;
  }
}

@media screen and (min-width: 521px) and (max-width: 740px) {
  .opere {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 4px;
  }
}

@media screen and (min-width: 741px) and (max-width: 960px) {
  .opere {
    display: grid;
    grid-template-columns: auto auto auto auto;
    gap: 4px;
  }
}

@media screen and (min-width: 961px) and (max-width: 1180px) {
  .opere {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    gap: 4px;
  }
}

@media screen and (min-width: 1181px) and (max-width: 1400px) {
  .opere {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    gap: 4px;
  }
}

@media screen and (min-width: 1401px) and (max-width: 1620px) {
  .opere {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto;
    gap: 4px;
  }
}

@media screen and (min-width: 1621px) {
  .opere {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto auto auto;
    gap: 4px;
  }
}


.opere a {
	outline: none;
}

.opere img {
  align-items: stretch;
   align-self:center;
  height: 100%;
  width: 100%;
  object-fit: cover;
  vertical-align: middle;
  border-radius: 2px;
  color: #333333;
  text-decoration: none;
  border: 0;
  -o-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -khtml-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
  transition: all 0.0s linear;
  opacity: 1;
  filter: alpha(opacity=100);
}

/* left menu */

.leftmenu {
  margin-top:10px;
  margin-left:0;
  margin-right:20px;
  margin-bottom:10px;
  float:left;
  width: auto;
  display: block;
  vertical-align:top;
}

.leftmenu ul {
  list-style-type: none;
  padding-left: 15px;
  line-height: 22px;
}

.leftmenu a { 
  color: #424542;
  text-decoration: none; 
  font-size: 16px;
  display: block;
  
}

@media screen and (max-width: 1099px) {
  .container {
    margin-top: 86px;
  }

  .leftmenu {
    display: none;
  }
  
  .title-menu {
    background-color: #fff;
    position: absolute;
    top: 122px;
    left: 10px;
    display: flex;
	flex-direction: column;
	padding: 0 5px 0 5px;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
   }
  
    .title-menu a {
      opacity: 1;
      color: #222;
      float: left;
    }
  
    .title-menu a:link {
        text-decoration: none;
      color: #222;
    }

    .title-menu a:visited {
        text-decoration: none;
      color: #222;
    }

    .title-menu a:hover {
      color: #222;
    }
}

@media screen and (min-width: 1100px) {
  .subheader {
    margin-left: 130px;
  }
  
  .title-menu {
    display: none;
  }
  
  .leftmenu {
    position: fixed;
    top: 190px;
    left: 0;
    background-color: #dddddd;
    z-index: 10;
  }
  
  .opere {
    position: relative;
    left: 140px;
    width: 90%;
  }
  
  .title-menu a {
    display: none;
  }
}

/* Artwork info  popup form */

{box-sizing: border-box;}

.spacing {
  margin-top: 2em;
}

.form-popup {
  display: none;
  max-width: 400px;
  min-width: 300px;
  margin-left: auto;
  margin-right: auto;
  color: #222222;
  text-align: left;
  position: fixed;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -55%);
  border: 3px solid #f1f1f1;
  z-index: 9;
}

.form-container {
  color: #555;
  padding: 10px;
  background-color: white;
  opacity: 0.92;
  filter: alpha(opacity=92);
}

.form-container h3 {
  margin-block-start: 0;
  margin-block-end: 0;
  font-style: normal;
  font-size: 22px;
  max-width: 90%; 
}

.form-container h4 {
  color: #555;
  margin-block-start: 10px;
  margin-block-end: 5px;
  font-style: italic;
  font-size: 20px;
}

/* Popup info request form */

.form-container input[type=email], .form-container input[type=tel] {
  font-size: 18px;
  width: 90%;
  padding: 10px;
  margin: 5px 0 5px 0;
  border: none;
  background: #eeeeee;
}

.form-container input[type=email]:focus, .form-container input[type=tel]:focus {
  background-color: #cacaca;
  outline: none;
}

.form-container label {
  font-size: 18px;
  color: #555;
  padding: 10px 5px 0 0;
  display: block;
}

.form-container .btn {
  font-size: 16px;
  background-color: #04AA6D;
  color: white;
  padding: 12px 18px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}

.form-container #result {
    padding: 10px 0 10px 0;
}

.form-container .error {
    color: #ff4242;
    font-weight: bold;
    line-height: 25px;
    font-size: 18px;
}

.form-container .success {
    color: #04AA6D;
    font-weight: bold;
    line-height: 25px;
    font-size: 20px;
}

.form-container .cancel {
  background-color: red;
}

.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}

img.closebtn {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 30px;
  height: 30px;
}

/* on-sale label */

.onsale {
  font-size: 15px; 
  position: absolute;
  left: 5px;
  top: 10px;
  height: 20px;
  color: black;
  padding: 9px 8px 5px 8px;
  border-radius: 6px;
  max-width: 60px;
  background: #55FF55;
  opacity: 0.6;
  filter: alpha(opacity=60);
}

.onsale a {
  text-decoration: none;
  color: black;
}

.itemtitle {
  /*width: 100%;*/
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 6px 0 6px 0;
  position: absolute;
  opacity: 0.7;
  filter: alpha(opacity=70);
  left: 5px;
  right: 5px;
  bottom: 10px;
}

.saleinfo {
  visibility: hidden;
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 20%;
}

.saleinfo .salepopup {
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 20%;
  text-align: left;
  border-radius: 6px;
  width: 135px;
  font-size: 15px; 
  background-color: #555;
  color: #fff;
  padding: 8px;
  opacity: 0.7;
  filter: alpha(opacity=70);
}

.saleinfo .show {
  visibility: visible;
  -webkit-animation: fadeIn 0.2s;
  animation: fadeIn 0.2s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 0.7;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:0.7;}
}

/* info request icon */

.inforequest {
  font-size: 15px; 
  position: absolute;
  right: 53px;
  top: 10px;
  color: black;
  padding: 5px;
  border-radius: 6px;
  /*margin: 4px;*/
  background: #ffffff;
  opacity: 0.5;
  filter: alpha(opacity=50);
}

.inforequest a img {
  height: 25px;
}

.mailrequest {
  font-size: 15px; 
  position: absolute;
  right: 5px;
  top: 10px;
  color: black;
  padding: 5px;
  border-radius: 6px;
  /*margin: 4px;*/
  background: #ffffff;
  opacity: 0.7;
  filter: alpha(opacity=70);
}

.mailrequest a img {
  height: 25px;
}

/* enlarged picture */

.opere .wrap {
   cursor: zoom-in;
}

img.enlarged {
  display: block;  
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: fixed;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: zoom-out;
  background: #ddd;
  padding: 5px;
}

.enlarged .iteminfo {
  width: 100%;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  padding: 3px 0;
  position: absolute;
  opacity: 0.8;
  filter: alpha(opacity=80);
  bottom: 30%;
  z-index: 100;
}

@media (orientation:landscape) and (pointer: coarse) {
  .artwork-title  {
    display: none;
  }
}

.artwork-title  {
  max-width: 500px;
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%, 0);
  background-color: white;
  color: #222;
  text-align: center;
  border-radius: 5px;
  border: solid 2px #aaa;
  padding: 10px;
  /*
  opacity: 0.8;
  filter: alpha(opacity=80);
  */
  z-index: 1000;
}

/* end of available label */

p.title3 {
  font-size: 26px;
  line-height: 30px;
  font-weight:bold;
   text-align: left;
}