#la-demo-selector{
position: fixed;
right: 0;
z-index: 10;
top: 0;
bottom: 0;
width: 280px;
background-color: #fff;
box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);
-webkit-box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);
transition: all .3s ease;
-webkit-transition: all .3s ease;
}
#la-demo-selector.open{
right: 0 !important;
}
#la-demo-selector .demo-container {
padding-top: 40px;
}
.before-demo-selector{
text-align: center;
margin-top: 20px;
margin-bottom: 30px;
}
#la-demo-selector .demo-toggle {
position: absolute;
top: 15%;
background-color: #fff;
color: #000;
padding: 20px;
font-size: 25px;
width: 65px;
line-height: 1;
border-radius: 2px 0px 0px 2px;
cursor: pointer;
text-align: center;
margin-left: -65px;
}
#la-demo-selector-container{
height: 100%;
overflow: hidden;
}
#la-demo-selector-container .demo-container{
height: 100%;
overflow-x: hidden;
overflow-y: auto;
margin-right: -25px;
padding-right: 25px;
}
#la-demo-selector .demo-selector{
padding: 0 5px;
width: 280px;
}
#la-demo-selector .demo-selector a{
display: block;
width: 125px;
height: 140px;
padding: 5px 5px 40px 5px;
position: relative;
float: left;
margin: 0 5px 20px;
background-color: #f7f8fc;
border: 1px solid #e1e6fa;
}
#la-demo-selector .demo-selector a:after {
content: attr(title);
text-transform: uppercase;
font-weight: bold;
display: block;
font-size: 12px;
line-height: normal;
text-align: center;
padding-top: 10px;
}
#la-demo-selector .demo-selector a span {
display: block;
height: 100%;
width: 100%;
background-size: 100% auto;
}
#la-demo-selector .demo-selector a .holder{
position: fixed;
top: 20%;
right: 280px;
width: 450px;
height: 500px;
box-shadow: 0 0 20px 0 rgba(0,0,0,0.07);
-webkit-box-shadow: 0 0 20px 0 rgba(0,0,0,0.07);
background-color: #fff;
padding: 10px;
border-radius: 2px;
z-index: 2;
opacity: 0;
visibility: hidden;
margin-top: 20px;
}
#la-demo-selector .demo-selector a:hover{
box-shadow: 0 0 12px 6px rgba(0,0,0,0.07);
-webkit-box-shadow: 0 0 12px 6px rgba(0,0,0,0.07);
}
#la-demo-selector .demo-selector a:hover .holder{
opacity: 1;
visibility: visible;
margin: 0;
transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
}
@media (max-width: 768px){
#la-demo-selector{
display:none;
}
}
