.examples{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}
.examples > *{
  margin:8px;
  max-width:330px;
}

.ls-izmir{
  --text-color:#ffffff;
  --primary-color:#00B4DB;
  --secondary-color:#0083B0;
  --padding:1em;
  --transition-duration:600ms;
  --border-margin:15px;
  --border-width:3px;
  --border-color:#ffffff;
  /*--border-radius:3px;*/
  --image-opacity:0.25;
  display:inline-flex;
  position:relative;
  box-sizing:border-box;
  overflow:hidden;
  margin:0;
  padding:0;
  color:#ffffff;
  color:var(--text-color);
  border-radius:3px;
  /*border-radius:var(--border-radius);*/
  box-shadow:6px 7px 13px 0px rgba(0,0,0,0.2);
}
.ls-izmir:before,.ls-izmir:after,.ls-izmir *,.ls-izmir *:before,.ls-izmir *:after{
  box-sizing:border-box;
  transition:all 600ms ease;
  transition:all var(--transition-duration) ease;
}
.ls-izmir figcaption{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:1em;
  padding:var(--padding);
  width:100%;
  z-index:1;
}
.ls-izmir img{
  object-fit:cover;
  max-width:100%;
  width:100%;
  height:100%;
}
.ls-izmir h4{
  margin-top:0;
  color:#ffffff;
  color:var(--text-color);
}
.ls-izmir h4:last-child{
  margin-bottom:0;
}
[class*=' ls-border']:before,[class*=' ls-border']:after,[class*=' ls-border'] figcaption:before,[class*=' ls-border'] figcaption:after{
  background-color:#ffffff;
  background-color:var(--border-color);
  position:absolute;
  content:'';
}
[class*=' ls-border']:before,[class*=' ls-border']:after{
  z-index:1;
  height:3px;
  height:var(--border-width);
  left:15px;
  left:var(--border-margin);
  right:15px;
  right:var(--border-margin);
  transform:scaleX(0);
}
[class*=' ls-border']:before{
  top:15px;
  top:var(--border-margin);
}
[class*=' ls-border']:after{
  bottom:15px;
  bottom:var(--border-margin);
}
[class*=' ls-border'] figcaption{
  z-index:3;
}
[class*=' ls-border'] figcaption:before,[class*=' ls-border'] figcaption:after{
  z-index:-1;
  width:3px;
  width:var(--border-width);
  top:15px;
  top:var(--border-margin);
  bottom:15px;
  bottom:var(--border-margin);
  transform:scaleY(0);
}
[class*=' ls-border'] figcaption:before{
  left:15px;
  left:var(--border-margin);
}
[class*=' ls-border'] figcaption:after{
  right:15px;
  right:var(--border-margin);
}
[class*=' ls-border'].hover:before,[class*=' ls-border'].hover:after,[class*=' ls-border'].hover figcaption:before,[class*=' ls-border'].hover figcaption:after,[class*=' ls-border']:hover:before,[class*=' ls-border']:hover:after,[class*=' ls-border']:hover figcaption:before,[class*=' ls-border']:hover figcaption:after,[class*=' ls-border']:focus:before,[class*=' ls-border']:focus:after,[class*=' ls-border']:focus figcaption:before,[class*=' ls-border']:focus figcaption:after,:focus > [class*=' ls-border']:before,:focus > [class*=' ls-border']:after,:focus > [class*=' ls-border'] figcaption:before,:focus > [class*=' ls-border'] figcaption:after{
  transform:scale(1);
}
.ls-border-bottom-left:before,.ls-border-bottom-left:after,.ls-border-bottom-left figcaption:before,.ls-border-bottom-left figcaption:after{
  transform-origin:0 100%;
}
.ls-border-bottom-left:before{
  transition-delay:0s;
}
.ls-border-bottom-left:after{
  transition-delay:480ms;
  transition-delay:calc(var(--transition-duration) / 1.25);
}
.ls-border-bottom-left figcaption:before{
  transition-delay:480ms;
  transition-delay:calc(var(--transition-duration) / 1.25);
}
.ls-border-bottom-left figcaption:after{
  transition-delay:0s;
}
.ls-border-bottom-left.hover:before,.ls-border-bottom-left:hover:before,.ls-border-bottom-left:focus:before,:focus > .ls-border-bottom-left:before{
  transition-delay:480ms;
  transition-delay:calc(var(--transition-duration) / 1.25);
}
.ls-border-bottom-left.hover:after,.ls-border-bottom-left:hover:after,.ls-border-bottom-left:focus:after,:focus > .ls-border-bottom-left:after{
  transition-delay:0s;
}
.ls-border-bottom-left.hover figcaption:before,.ls-border-bottom-left:hover figcaption:before,.ls-border-bottom-left:focus figcaption:before,:focus > .ls-border-bottom-left figcaption:before{
  transition-delay:0s;
}
.ls-border-bottom-left.hover figcaption:after,.ls-border-bottom-left:hover figcaption:after,.ls-border-bottom-left:focus figcaption:after,:focus > .ls-border-bottom-left figcaption:after{
  transition-delay:480ms;
  transition-delay:calc(var(--transition-duration) / 1.25);
}
.ls-image-rotate-right img{
  transform:scale(1.1) translate(0, 0);
}
.ls-image-rotate-right.hover img,.ls-image-rotate-right:hover img,.ls-image-rotate-right:focus img,:focus > .ls-image-rotate-right img{
  transform:scale(1.3) rotate(15deg);
}
.ls-delay-100,.ls-delay-100 > *{
  transition-delay:100ms;
}
[class^='ls-reveal']{
  display:inline-block;
}
[class^='ls-reveal'] > *{
  display:inline-block;
}
[class^='ls-reveal'] > *:last-child{
  margin-bottom:0;
}
[class^='ls-reveal']{
  overflow:hidden;
  opacity:1;
}
.ls-izmir.hover [class^='ls-reveal'],.ls-izmir:hover [class^='ls-reveal'],.ls-izmir:focus [class^='ls-reveal'],:focus > .ls-izmir [class^='ls-reveal']{
  opacity:1;
}
.ls-izmir.hover [class^='ls-reveal'] > *,.ls-izmir:hover [class^='ls-reveal'] > *,.ls-izmir:focus [class^='ls-reveal'] > *,:focus > .ls-izmir [class^='ls-reveal'] > *{
  transform:translate(0) rotate(0deg);
}
.ls-reveal-right > *{
  transform:translateX(-100%);
}
.ls-gradient-bottom-right{
  background-image:linear-gradient(315deg, #00B4DB 0%, #0083B0 100%);
  background-image:linear-gradient(315deg, var(--primary-color) 0%, var(--secondary-color) 100%);
}
.ls-izmir .ls-layout-bottom-left{
  justify-content:flex-end;
  align-items:flex-start;
  text-align:left;
}
.ls-izmir{
  background-color:#00B4DB;
  background-color:var(--primary-color);
}
.ls-izmir figcaption{
  padding:2em;
  padding:calc(var(--padding) * 2);
}
.ls-izmir figcaption > *{
  opacity:0;
}
.ls-izmir.hover > img,.ls-izmir:hover > img,.ls-izmir:focus > img,:focus > .ls-izmir > img{
  opacity:0.25;
  opacity:var(--image-opacity);
}
.ls-izmir.hover figcaption > *,.ls-izmir:hover figcaption > *,.ls-izmir:focus figcaption > *,:focus > .ls-izmir figcaption > *{
  opacity:1;
}