@import url('https://fonts.googleapis.com/css?family=Noto+Sans+HK:300,400,700&display=swap');
html {
height: 100%;}
/*! CSS Used from demo.css */
body{
background-color:#212121;
display:flex;
justify-content:center;
align-items:center;
flex-flow:wrap;
margin:0;
height:100%;
font-family:'Noto Sans HK', sans-serif;
font-weight:300;
}
.wrapper{
width:100%;
max-width:1080px;
}
.examples{
display:flex;
flex-wrap:wrap;
justify-content:center;
}
.examples > *{
margin:8px;
max-width:330px;
}
h4{
font-size:1.4em;
}
a{
color:#059BC6;
}
.text{
color:#fff;
text-align:center;
margin-bottom:30px;
}
.text h2{
font-weight:300;
font-size:2em;
text-transform:capitalize;
}
.text h3{
font-weight:300;
font-size:1.3em;
}
.text strong{
font-weight:700;
color:#059BC6;
}
/*! CSS Used from izmir.css */
.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);
}
.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;
}