Columns

4 Columns

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

3 Columns

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

2 Columns

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

1 Third / 2 Thirds

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

2 Thirds / 1 Third

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim

1 Fourth / 3 Fourths

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.

3 Fourths / 1 Fourth

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.

#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; } }