responsive.dff

11c11
<   .visible-xlg {
---
>     .visible-xlg {
17,32d16
<     
< 
<     .quickview-wrapper .tab-content #quickview-notes > .inner{
<         width:570px;
<     }
< 
<     .container-fluid{
<          &.container-fixed-lg{
<             width: @layout-container-fixed-lg;
<             margin-right: auto;
<             margin-left: auto;
<         }
<     }
<     .menu-pin .container-fluid.container-fixed-lg{
<         width: @layout-container-fixed-lg - @layout-sidepanel-pin-width;
<     }
38a23
> }
40,161c25,98
<      .col-xlg-1, .col-xlg-2, .col-xlg-3, .col-xlg-4, .col-xlg-5, .col-xlg-6, .col-xlg-7, .col-xlg-8, .col-xlg-9, .col-xlg-10, .col-xlg-11 {
<         float: left;
<         min-height: 1px;
<         padding-left: 15px;
<         padding-right: 15px;
<         position: relative;
<     }
<     .col-xlg-12 {
<         float: left;
<         min-height: 1px;
<         padding-left: 15px;
<         padding-right: 15px;
<         position: relative;
<         width: 100%;
<     }
<     .col-xlg-11 {
<         width: 91.6667%;
<     }
<     .col-xlg-10 {
<         width: 83.3333%;
<     }
<     .col-xlg-9 {
<         width: 75%;
<     }
<     .col-xlg-8 {
<         width: 66.6667%;
<     }
<     .col-xlg-7 {
<         width: 58.3333%;
<     }
<     .col-xlg-6 {
<         width: 50%;
<     }
<     .col-xlg-5 {
<         width: 41.6667%;
<     }
<     .col-xlg-4 {
<         width: 33.3333%;
<     }
<     .col-xlg-3 {
<         width: 25%;
<     }
<     .col-xlg-2 {
<         width: 16.6667%;
<     }
<     .col-xlg-1 {
<         width: 8.33333%;
<     }
<     .col-xlg-pull-12 {
<         right: 100%;
<     }
<     .col-xlg-pull-11 {
<         right: 91.6667%;
<     }
<     .col-xlg-pull-10 {
<         right: 83.3333%;
<     }
<     .col-xlg-pull-9 {
<         right: 75%;
<     }
<     .col-xlg-pull-8 {
<         right: 66.6667%;
<     }
<     .col-xlg-pull-7 {
<         right: 58.3333%;
<     }
<     .col-xlg-pull-6 {
<         right: 50%;
<     }
<     .col-xlg-pull-5 {
<         right: 41.6667%;
<     }
<     .col-xlg-pull-4 {
<         right: 33.3333%;
<     }
<     .col-xlg-pull-3 {
<         right: 25%;
<     }
<     .col-xlg-pull-2 {
<         right: 16.6667%;
<     }
<     .col-xlg-pull-1 {
<         right: 8.33333%;
<     }
<     .col-xlg-pull-0 {
<         right: 0;
<     }
<     .col-xlg-push-12 {
<         left: 100%;
<     }
<     .col-xlg-push-11 {
<         left: 91.6667%;
<     }
<     .col-xlg-push-10 {
<         left: 83.3333%;
<     }
<     .col-xlg-push-9 {
<         left: 75%;
<     }
<     .col-xlg-push-8 {
<         left: 66.6667%;
<     }
<     .col-xlg-push-7 {
<         left: 58.3333%;
<     }
<     .col-xlg-push-6 {
<         left: 50%;
<     }
<     .col-xlg-push-5 {
<         left: 41.6667%;
<     }
<     .col-xlg-push-4 {
<         left: 33.3333%;
<     }
<     .col-xlg-push-3 {
<         left: 25%;
<     }
<     .col-xlg-push-2 {
<         left: 16.6667%;
<     }
<     .col-xlg-push-1 {
<         left: 8.33333%;
---
> /*** Desktops & Laptops ***/
> @media only screen and (min-width: 980px) {
>   .menu-content{
>     -webkit-transform: none !important;
>         -ms-transform: none !important;
>             transform: none !important;
>   }
>   .menu{
>     -webkit-transform: none !important;
>         -ms-transform: none !important;
>             transform: none !important;
>               display: initial !important;
>   }
> }
> 
> /*** General Desktops ***/
> @media only screen and (min-width: 1200px) {
>   .vcenter {
>       position: relative;
>       .translateY(50%);
>   }
> }
> 
> /*** General Small Screen Desktops ***/
> @media only screen and (max-width: 1200px) {
> 
> }
> 
> /*** General tablets and phones ***/
> @media (max-width: 991px) {
> 
>   .header .menu > li{
>        display: block;
>   }
>   .header .menu-content .header-inner{
>     line-height: 0 !important;
>   }
>   .menu-content{
>       display: none;
>       position: fixed;
>       top:0;
>       bottom: 0;
>       height: 100%;
>       width: 250px;
>       background-color: #fff;
>       z-index: 10;
>       overflow-y: auto;
>   }
>   body.menu-opened > .header:before{
>     position: fixed;
>     width: 100%;
>     height: 100%;
>     top: 0;
>     background-color: rgba(0, 0, 0, 0.5);
>     z-index: 10;
>     content: ''
>   }
> }
> 
> /* Landscape view of all tablet devices */
> @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){
> 
> }
> 
> // Make all columns equal height
> // (Not applied for resolutions lowers than mentioned ex:lg,md,sm
> // because they stack up)
> @media (min-width:1200px){
>     .row-same-height{
>       overflow: hidden; 
>       & > [class*="col-lg"]{
>         margin-bottom: -99999px;
>         padding-bottom: 99999px;
>       }
163,164c100,109
<     .col-xlg-push-0 {
<         left: 0;
---
> }
> 
> /* Margin Helps : MD : 1024 - 768 */
> @media (max-width:1024px){
>   .generate-paddings-options-md(4);
> 
>   .generate-paddings-options-md(@n, @i: 0) when (@i =< @n) {
>     @step : @i*5; 
>     .md-p-t-@{step} {
>       padding-top: (@step*1px) !important;
166,167c111,112
<     .col-xlg-offset-12 {
<         margin-left: 100%;
---
>     .md-p-r-@{step} {
>       padding-right: (@step*1px) !important;
169,170c114,115
<     .col-xlg-offset-11 {
<         margin-left: 91.6667%;
---
>      .md-p-l-@{step} {
>       padding-left: (@step*1px) !important;
172,173c117,118
<     .col-xlg-offset-10 {
<         margin-left: 83.3333%;
---
>      .md-p-b-@{step} {
>       padding-bottom: (@step*1px) !important;
175,176c120,121
<     .col-xlg-offset-9 {
<         margin-left: 75%;
---
>     .md-padding-@{step} {
>       padding: (@step*1px) !important;
178,179c123,131
<     .col-xlg-offset-8 {
<         margin-left: 66.6667%;
---
>     .generate-paddings-options-md(@n, (@i + 1));
>   }
> 
>   .generate-margin-options-md(4);
> 
>   .generate-margin-options-md(@n, @i: 1) when (@i =< @n) {
>     @step : @i*5; 
>     .md-m-t-@{step} {
>       margin-top: (@step*1px) !important;
181,182c133,134
<     .col-xlg-offset-7 {
<         margin-left: 58.3333%;
---
>     .md-m-r-@{step} {
>       margin-right: (@step*1px) !important;
184,185c136,137
<     .col-xlg-offset-6 {
<         margin-left: 50%;
---
>      .md-m-l-@{step} {
>       margin-left: (@step*1px) !important;
187,188c139,140
<     .col-xlg-offset-5 {
<         margin-left: 41.6667%;
---
>      .md-m-b-@{step} {
>       margin-bottom: (@step*1px) !important;
190,191c142,214
<     .col-xlg-offset-4 {
<         margin-left: 33.3333%;
---
>     .generate-margin-options-md(@n, (@i + 1));
>   }
>   .md-no-margin {
>     margin: 0px !important;
>   }
>   .md-no-padding {
>     padding: 0px !important;
>   }
>   .md-image-responsive-width{
>     height: 100%;
>     width: auto;
>   }
>   .md-image-responsive-height{
>     width: 100%;
>     height: auto;
>   }
> }
> 
> // SM : Small screen resolutions
> @media (max-width:991px){
>  /** Responsive Smart Header ***/
>   .header{
>     &.dark,
>     &.light,
>     &.light-solid,
>     &.transparent-dark,
>     &.transparent-light{
>       .menu-content{
>           .menu > li > a:not(.btn){
>             &:hover,&:active{
>                 opacity: 0.7
>             }
>             &:visited,&:focus{
>                opacity: 0.7
>             }
>             &.active{
>               background-color:@color-black;
>               color: @color-white; 
>             }
>           }
>         &.mobile-dark{
>           a:not(.btn){
>             color:@color-menu-light !important;
>             &:hover,&:active{
>                 color:@color-menu-link-hover !important;
>             }
>             &:visited,&:focus{
>                color:@color-menu-light;
>             }
>             &.active{
>               color: #fff;
>             }
>           }
>           &.mobile-dark{
>             p{
>               color:@color-menu-light;
>             }
>             .menu > li > a:not(.btn){
>               color:@color-menu-light;
>               &:hover,&:active{
>                   color:@color-menu-link-hover !important;
>               }
>               &:visited,&:focus{
>                  color:@color-menu-light;
>               }
>               &.active{
>                 background-color:@color-menu-darker;
>                 color: #fff ;
>               }
>             }
>           }
>         }
>       }   
193,194c216,219
<     .col-xlg-offset-3 {
<         margin-left: 25%;
---
>     .menu > li > a{
>       &:before, & > span:before{
>         display: none;
>       }
196,197c221,222
<     .col-xlg-offset-2 {
<         margin-left: 16.6667%;
---
>     &:last-child.header{
>       top: -200%;
199,200c224,225
<     .col-xlg-offset-1 {
<         margin-left: 8.33333%;
---
>     &.bg-header .menu-content .header-inner{
>       line-height: initial;
202,203c227,246
<     .col-xlg-offset-0 {
<         margin-left: 0;
---
>   }
>   .menu-content{
>     .menu > li.classic > nav ul,
>     .menu > li.horizontal > nav,
>     .menu > li.mega .container
>     {
>         background-color: @color-master-lighter;
>     }
>     &.mobile-dark{
>       background-color:@color-menu !important;
>       .menu > li.classic > nav ul,
>       .menu > li.horizontal > nav,
>       .menu > li.mega .container
>       {
>         background-color: @color-menu-dark;
>       }
>       ul li .sub-menu-heading{
>         color: @color-white !important;
>         opacity: 1;
>       }
204a248,249
>     .menu > li.mega .container{
>       margin-top: 0;
206,219d250
< }
< /*** Desktops ***/
< @media (min-width: 1600px) {
< }
< /*** Medium Size Screen ***/
< @media only screen and (max-width: 1400px) {
<     
<     .page-sidebar .page-sidebar-inner .sidebar-slide {
<         .sidebar-menu{
<             bottom:50px;
<         }
<         .sidebar-widgets{
<         display: none
<         }
221,222c252,253
<     .footer-widget{
<         padding: 11px 21px !important;
---
>     .menu > li > a:not(.btn){
>       margin-bottom: 0 !important;
224,306c255,270
< }
< /*** Desktops & Laptops ***/
< @media only screen and (min-width: 980px) {
<     body{
<         &.ie9.menu-pin{
<             .page-sidebar{
<                  transform: none !important;
<                 -webkit-transform: none !important;
<                 -ms-transform: none !important;          
<             }
<         }
<         &.menu-pin{
<             overflow-x: hidden;
<             .header .brand{
<                 width: 245px;
<             }
<             .page-container{
<                 padding-left: 0;
<                 .page-content-wrapper {
<                     .content{
<                         padding-left:@layout-sidepanel-pin-width;
<                     } 
<                     .footer{
<                         left: @layout-sidepanel-pin-width;
<                     }
<                 }
<             }
<             [data-toggle-pin="sidebar"]{
<                 & > i:before{
<                     content: "\f192";
<                 }
<             }
<             .page-sidebar{
<                 transform: translate(@layout-sidepanel-width - @layout-sidepanel-width-collapsed , 0) !important;
<                 -webkit-transform: translate(@layout-sidepanel-width - @layout-sidepanel-width-collapsed, 0) !important;
<                 -ms-transform: translate(@layout-sidepanel-width - @layout-sidepanel-width-collapsed, 0) !important;
<                 width: @layout-sidepanel-pin-width;
<                 .sidebar-header .sidebar-header-controls {
<                     transform: translateX(18px);
<                     -webkit-transform: translateX(18px);
<                 }
<                 .menu-items .icon-thumbnail {
<                     transform: translate3d(-14px, 0, 0);
<                     -webkit-transform: -webkit-translate3d(-14px, 0, 0);   
<                 }
<             }
<         }
<         &.menu-behind{
<             .page-sidebar{
<                 z-index: @zIndex-navbar - 1;
<             }
<             .header .brand{
<                 width: 200px;
<                 text-align: left;
<                 padding-left: 20px;
<             }
<         }
<         &.box-layout{
<             background-color:@color-white;
<             & > .container{
<             height: 100%;
<             padding: 0;
<             background-color: @color-master-lightest;
<             }
<             .header{
<             background-color:transparent;
<             border: 0;
<             padding: 0;
<                 & > .container {
<                 background-color: #fff;
<                 border-bottom: 1px solid rgba(230, 230, 230, 0.7);
<                 padding: 0 20px 0 0;
<               }
<             }
<             .page-sidebar{
<                 left: auto;
<                 transform: none !important;
<                 -webkit-transform: none !important;
<             }
<             .page-container .page-content-wrapper .footer{
<                   width: auto;
<             }
< 
---
>     ul {
>         width: 100%;
>         padding: 0;
>         li{
>           // font-size: 16px;
>           padding:0;
>           //margin: 0 !important;
>           margin-right: 0 !important;
>           a{
>             opacity: 1 !important;
>             padding:10px 10px 10px 35px;
>           }
>           .sub-menu-heading{
>             padding:20px 10px 10px 35px;
>             opacity: 0.5;
>           }
308a273
>   }
310,326c275,290
< 
<      .header {
<         .brand{
<             position: relative;
<         }
<        .user-info-wrapper {
<             .user-details {
<                 .user-name {
<                     font-size: 16px;
<                 }
<                 .user-other {
<                     font-size: 10px;
<                 }
<             }
<             .user-pic {
<                 position: relative;
<                 top: -6px;
---
>   .slideFromLeft();
>   .slideFromRight();
>   .header .menu > li{
>       & > .classic{
>           top: 0 !important;
>           position: relative;
>           left: auto;
>           right: auto;
>           margin-left:0;
>           &:before,&:after, .arrow{
>             display: none;
>           }
>           ul > li{
>             margin: 5px 0;
>             &:first-child{
>             margin-top:17px;
328,351c292,293
<         }
<     }
< 
<     .notification-panel{
<         width: 400px;
<     }
< 
< }
< /*** General Small Screen Desktops ***/
< 
< 
< /*** General tablets and phones ***/
< @media (max-width: 991px) {
< 
<     .page-container{
<         padding-left: 0; 
<     }
< 
<     body{
<         &.sidebar-open{
<             .page-container{
<                 .translate3d(250px,0,0);
<                 overflow: hidden;
<                 position: fixed;
---
>             &:last-child{
>             margin-bottom:17px;
352a295,304
>           }
>       }
>       & > .mega{
>         position: relative;
>         margin-top:0;
>         border:0;
>         .container{
>           padding-top: 15px;
>       padding-bottom: 15px;
>       padding-left: 0;
354,365c306,318
<         &.box-layout{
<             & > .container{
<             padding: 0;
<             height: 100%;
<             }
<             .header{
<                 & > .container {
<                     padding: 0;
<                     .pull-right .sm-action-bar{
<                         right: 0;
<                     }
<               }
---
>       }
>       & > .horizontal{
>         position: relative;
>         margin-top:0;
>         border:0;
>         .container{
>           padding:0;
>           & > ul{
>             padding: 15px 0;
>             margin: 0;
>             & > li{
>               margin: 5px;
>               display: block;
366a320
>           }
368,390c322,325
<     }
<     .header {
<         padding: 0 10px;
<         width: 100%;
<         border-bottom: 1px solid rgba(0,0,0,.07);
<         background: #fff !important;
<         .header-inner{
<             text-align: center;
<             .toggle-sidebar{
<                 display: block;
<                 position: absolute;
<                 left: 23px;
<             }
<             .mark-email{
<                 left: 45px;
<                 position: absolute;
<                 top: 23px;
<             }
<             .quickview-link{
<                 position: absolute;
<                 right: 0;
<                 top: 12px;
<             }
---
>       }
>       &.horizontal{
>         & > span.arrow{
>           display: none;
392,393c327,330
<         .brand{
<             width: auto;
---
>       }
>       &.mega{
>         & > span.arrow{
>           display: none;
395,397c332,333
<         .notification-list, .search-link{
<             display: none;
<         } 
---
>       }
>   }
399,431c335
<         & > .pull-left,  & > .pull-right{
<             position: relative;
<         }
<          & > .pull-right{
<             .sm-action-bar{
<                 right: 0;   
<             }
<          }
<     }
<     .sm-action-bar{
<       position: absolute;
<       top: 50%;
<       -webkit-transform: translateY(-50%);
<       transform: translateY(-50%);
<       z-index: 10;
<       & > a{
<         padding: 10px;
<         display: inline-block;
<       }
<     }
<     .pace .pace-activity{
<         top: 60px;
<     }
<     .page-sidebar {
<         width: 250px;
<         z-index: auto;
<         left: 0 !important;
<         -webkit-transform: translate3d(0, 0px, 0px) !important;
<         transform: translate3d(0, 0px, 0px) !important;
<         .sidebar-menu .menu-items > li ul.sub-menu > li{
<             padding: 0px 30px 0 36px;
<         }
<     }
---
>   .generate-paddings-options-sm(6);
433,442c337,340
<     .page-container{
<         padding-left: 0;
<         // z-index: 100;
<         position: relative;
<         transition: transform .25s ease;
<         -webkit-transition: -webkit-transform .25s ease;
<         .page-content-wrapper .content{
<             overflow-x: hidden;
<             height: auto; // minimizes address bar on scroll
<         }
---
>   .generate-paddings-options-sm(@n, @i: 0) when (@i =< @n) {
>     @step : @i*5; 
>     .sm-p-t-@{step} {
>       padding-top: (@step*1px) !important;
444,446c342,343
< 
<     .icon-thumbnail{
<         margin-right: 24px;   
---
>     .sm-p-r-@{step} {
>       padding-right: (@step*1px) !important;
448,485c345,346
<      .page-sidebar {
<         display: none;
<         z-index: auto;
<         &.visible {
<         display: block;
<         }
<         .page-sidebar-inner{
<             z-index: 1;
<             left: 0 !important;
<             width: 260px;
<             .sidebar-slide{
<                 .sidebar-menu{
<                     overflow: scroll;
<                     -webkit-overflow-scrolling: touch;
<                     top:40px;
<                     bottom: 0;
<                     ul > li > a > .badge{
<                         display: inline-block;
<                     }
<                 }
<             }
<         }
<      }
<     .secondary-sidebar{
<         float: none;
<         height: auto;
<         left: 50%;
<         margin-left: -125px;
<         padding: 20px;
<         position: absolute;
<         right: 0;
<         top: 60px;
<         z-index: 9999;
<         display: none;
<         border-radius: 10px;
<         .btn-compose{
<             display: none;
<         }
---
>      .sm-p-l-@{step} {
>       padding-left: (@step*1px) !important;
487,488c348,349
<     .inner-content{
<         margin: 0;
---
>      .sm-p-b-@{step} {
>       padding-bottom: (@step*1px) !important;
490,510c351,352
<      .breadcrumb{
<         padding-left:15px; 
<         padding-right:15px; 
<      }
<      .copyright{
<         padding-left:15px; 
<         padding-right:15px;  
<      }
< 
<     // Pages Notification customizations
<     body > .pgn-wrapper[data-position="top"] {
<         top: @layout-mobile-header-height;
<         left: 0;
<     }
<     body > .pgn-wrapper[data-position="bottom"] {
<         left: 0;
<     }
< 
<     body > .pgn-wrapper[data-position$='-left'] {
<         left:  20px;
<         right: auto;
---
>     .sm-padding-@{step} {
>       padding: (@step*1px) !important;
511a354,355
>     .generate-paddings-options-sm(@n, (@i + 1));
>   }
513,522c357
<     .sm-table{
<         display: table;
<         width: 100%;
<     }
<     .user-profile-wrapper{
<         position: absolute;
<         right: 50px;
<         top: -9px;
<     }
<       /*** Horizontal Menu **/
---
>   .generate-margin-options-sm(6);
524,552c359,362
<     .horizontal-menu .bar {
<         background-color: #fff;
<         display: none;
<         .bar-inner {
<             display: block;
<             max-height: 400px;
<             overflow: scroll;
<             -webkit-overflow-scrolling: touch;
<             & > ul > li {
<                 display: block;
<                 .classic {
<                     position: relative;
<                     background-color: transparent;
<                     top: 0;
<                 }
<                 & .mega,
<                 &.horizontal {
<                     position: relative;
<                 }
<                 & > .horizontal {
<                     position: relative;
<                     top: 0;
<                     border-bottom: 0;
<                     li {
<                         display: block;
<                     }
<                 }
<             }
<         }
---
>   .generate-margin-options-sm(@n, @i: 1) when (@i =< @n) {
>     @step : @i*5; 
>     .sm-m-t-@{step} {
>       margin-top: (@step*1px) !important;
554,568c364,365
< }
< 
< /* Landscape view of all tablet devices */
< @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){
<     .page-sidebar .sidebar-menu .menu-items ul{
<         -webkit-transform:translateZ(0);
<         -webkit-backface-visibility: hidden;
<         -webkit-perspective: 1000;
<     }
<     .page-container{
<         .page-content-wrapper{
<             .content {
<                 padding-top: @layout-header-height;
<             }
<         }
---
>     .sm-m-r-@{step} {
>       margin-right: (@step*1px) !important;
570,571c367,368
<     body.box-layout > .container{
<         width: 100%;
---
>      .sm-m-l-@{step} {
>       margin-left: (@step*1px) !important;
573,576c370,371
<     .error-page{
<         .error-container{
<             width: auto;
<         }
---
>      .sm-m-b-@{step} {
>       margin-bottom: (@step*1px) !important;
578c373,419
< }
---
>     .generate-margin-options-sm(@n, (@i + 1));
>   }
>   .sm-no-margin {
>     margin: 0px !important;
>   }
>   .sm-no-padding {
>     padding: 0px !important;
>   }
>   .sm-text-right{
>   text-align: right !important;
>   }
>   .sm-text-left{
>   text-align: left !important;
>   }
>   .sm-text-center{
>   text-align: center !important;
>   }
>   .sm-pull-right{
>   float: right !important;
>   }
>   .sm-pull-left{
>   float: left !important;
>   } 
>   .sm-pull-reset{
>     float: none !important;
>   }
>   .sm-block{
>   display: block !important;
>   }
>   .sm-inline{
>   display: inline-block;
>   }
>   .sm-image-responsive-height{
>     width: 100%;
>     height: auto;
>   }
>   .sm-image-responsive-width{
>     height: 100%;
>     width: auto;
>   }
>   .sm-full-height{
>     height: 100%;
>     width: auto;
>   }
>   .sm-full-width{
>     width: 100%;
>     height: auto !important;
580,581c421,443
< // Resolution specific borders
< @media (max-width:991px){
---
>   }
> 
>   .sm-reset-position{
>     position: initial;
>   }
>   .sm-screen-center{
>     position: absolute;
>     left: -50%;
>   }
>   .sm-static{
>     position: static !important;
>   }
>   .header.transparent-light .menu > li > a:not(.btn){
>     color: @color-master-darkest;
>     margin-bottom: 10px;
>   }
>   .header.dark .menu > li > a:not(.btn){
>     color: @color-master-darkest;
>   }
>   .sm-no-border{
>     border-width: 0;
>   }
>   
586a449
>     border-style: solid;
600d462
< }
602,612c464,467
< // Make all columns equal height
< // (Not applied for resolutions lowers than mentioned ex:lg,md,sm
< // because they stack up)
< @media (min-width:1200px){
<     .row-same-height{
<       overflow: hidden; 
<       & > [class*="col-lg"]{
<         margin-bottom: -99999px;
<         padding-bottom: 99999px;
<       }
<     }
---
>   //Error Container
>   .error-container{
>     width:auto;
>   }
623,627c478,484
<     .horizontal-menu .bar{
<         display: table !important;
<         & + div{
<             padding-top: 50px;
<         }
---
>     .header.static{
>         position: static;
>         .affix {
>           position: fixed !important;
>           top: 0;
>           width: 100%
>       }
628a486,488
>     .clip-mega-menu {
>       overflow: hidden;
>   }
639,642d498
<     .box-layout .container .jumbotron, .container-fluid .jumbotron {
<         padding: 0;
<     }
< }
644,654d499
<     /* Portrait view of all tablet devices */
< @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
<     
<     .page-sidebar .sidebar-menu .menu-items > li{
<         & > a{
<             padding-left: 27px;
<         }
<         ul.sub-menu > li {
<             padding: 0px 27px 0 31px;
<         }
<     }
656,663d500
<     .icon-thumbnail {
<         margin-right: 21px;
<     }
<     .error-page{
<         .error-container{
<             width: auto;
<         }
<     }
665a503
>    /*** Phones ***/
667,674c505,547
<     
<     .header{
<         height: @layout-mobile-header-height;
<         .notification-list, .search-link{
<             display: none;
<         } 
<         .header-inner{
<             height: @layout-mobile-header-height;
---
>   .container{
>     padding-left: 20px;
>     padding-right: 20px;
>   }
>   .menu-content{
>       width: 270px;
>       overflow-y: auto;
>   }    
>   .logo{
>       display: inline-block;
>   }
>   .header{
>     &.bg-header {
>         .header-sizes(@header-big-height - 40);
>     }
>     &.md-header {
>         .header-sizes(@header-medium-height);
>     }
>     &.sm-header {
>         .header-sizes(@header-small-height);
>     }
>   }
>   .swiper-slide {
>       &.fit{
>         h1{
>           font-size: 6vh;
>           line-height: 7.5vh;
>         }
>         h2{
>           font-size: 3vh;
>           line-height: 5vh;
>         }
>         h3{
>           font-size: 2vh;
>           line-height: 4vh;
>         }  
>         h4{
>           font-size: 3vh;
>           line-height: 4.5vh;
>         }   
>         h5{
>           font-size: 1.5vh;
>           line-height: 1.8vh;
675a549,560
>       }
>   }
> 
> }
> 
> @media (max-width: 480px) {
>   .generate-paddings-options-xs(4);
> 
>   .generate-paddings-options-xs(@n, @i: 0) when (@i =< @n) {
>     @step : @i*5; 
>     .xs-p-t-@{step} {
>       padding-top: (@step*1px) !important;
677,678c562,563
<     .header .user-info-wrapper{
<         display:none;
---
>     .xs-p-r-@{step} {
>       padding-right: (@step*1px) !important;
680,705c565,566
<     .header .search-link{
<         height: 19px;
<         width:16px;
<         overflow:hidden;
<     }
< 
<      .jumbotron,.container-fluid{
<         padding-left: 0;
<         padding-right: 0;
< 
<      }
<    
<      .page-container .page-content-wrapper .content {
<         padding-top: @layout-mobile-header-height;
<         padding-bottom: 100px;
<     }
<     .page-sidebar .sidebar-header{
<         padding: 0 12px;
<     }
<     .page-sidebar .sidebar-menu .menu-items > li{
<         & > a{
<             padding-left: 20px;
<         }
<         ul.sub-menu > li {
<             padding: 0px 25px 0 28px;
<         }
---
>      .xs-p-l-@{step} {
>       padding-left: (@step*1px) !important;
707,709c568,569
< 
<     .icon-thumbnail {
<         margin-right: 20px;
---
>      .xs-p-b-@{step} {
>       padding-bottom: (@step*1px) !important;
711,733c571,574
< 
<   .sm-pull-bottom, .sm-pull-up{
<     position: relative !important;
<   }
< 
< .generate-paddings-options-sm(10);
< 
< .generate-paddings-options-sm(@n, @i: 0) when (@i =< @n) {
<   @step : @i*5; 
<   .sm-p-t-@{step} {
<     padding-top: (@step*1px) !important;
<   }
<   .sm-p-r-@{step} {
<     padding-right: (@step*1px) !important;
<   }
<    .sm-p-l-@{step} {
<     padding-left: (@step*1px) !important;
<   }
<    .sm-p-b-@{step} {
<     padding-bottom: (@step*1px) !important;
<   }
<   .sm-padding-@{step} {
<     padding: (@step*1px) !important;
---
>     .xs-padding-@{step} {
>       padding: (@step*1px) !important;
>     }
>     .generate-paddings-options-xs(@n, (@i + 1));
735,736d575
<   .generate-paddings-options-sm(@n, (@i + 1));
< }
738c577
< .generate-margin-options-sm(10);
---
>   .generate-margin-options-xs(8);
740,752c579,593
< .generate-margin-options-sm(@n, @i: 1) when (@i =< @n) {
<   @step : @i*5; 
<   .sm-m-t-@{step} {
<     margin-top: (@step*1px) !important;
<   }
<   .sm-m-r-@{step} {
<     margin-right: (@step*1px) !important;
<   }
<    .sm-m-l-@{step} {
<     margin-left: (@step*1px) !important;
<   }
<    .sm-m-b-@{step} {
<     margin-bottom: (@step*1px) !important;
---
>   .generate-margin-options-xs(@n, @i: 1) when (@i =< @n) {
>     @step : @i*5; 
>     .xs-m-t-@{step} {
>       margin-top: (@step*1px) !important;
>     }
>     .xs-m-r-@{step} {
>       margin-right: (@step*1px) !important;
>     }
>      .xs-m-l-@{step} {
>       margin-left: (@step*1px) !important;
>     }
>      .xs-m-b-@{step} {
>       margin-bottom: (@step*1px) !important;
>     }
>     .generate-margin-options-xs(@n, (@i + 1));
754,757c595,596
<   .generate-margin-options-sm(@n, (@i + 1));
< }
<   .sm-no-margin {
<     margin: 0px;
---
>   .xs-no-margin {
>     margin: 0px !important;
759,760c598,599
<   .sm-no-padding {
<     padding: 0px;
---
>   .xs-no-padding {
>     padding: 0px !important;
762c601
<   .sm-text-right{
---
>   .xs-text-right{
765c604
<   .sm-text-left{
---
>   .xs-text-left{
768c607
<   .sm-text-center{
---
>   .xs-text-center{
771c610
<   .sm-pull-right{
---
>   .xs-pull-right{
774c613
<   .sm-pull-left{
---
>   .xs-pull-left{
777c616
<   .sm-pull-reset{
---
>   .xs-pull-reset{
780c619,627
<   .sm-block{
---
>   .xs-image-responsive-height{
>     width: 100%;
>     height: auto;
>   }
>   .xs-image-responsive-width{
>     height: 100%;
>     width: auto;
>   }
>   .xs-block{
783,785c630,631
< 
<   .error-container{
<     width:auto;
---
>   .xs-inline{
>   display: inline-block;
787c633,644
<   .sm-image-responsive-height{
---
>   .swiper-slide{
>     &.fit{
>        .block-title{
>           font-size: 2vh;
>         }
>     }
>   }
>   .xs-full-height{
>     height: 100%;
>     width: auto;
>   }
>   .xs-full-width{
789c646,652
<     height: auto;
---
>     height: auto !important;
>   }
>   .xs-min-height{
>     min-height: 100%;
>   }
>   .sm-no-border{
>     border-width: 0;
791,825d653
< }
< 
< 
< 
<     /*** Phones ***/
< @media (max-width: 480px) {
<     body{
<         width: 100%;
<         .header {
<             width: 100%;
<             height: @layout-mobile-header-height;
<             border-bottom: 1px solid rgba(0,0,0,.07);
<             .header-inner{
<                 height: @layout-mobile-header-height;
<                 text-align: center;
<                 .toggle-email-sidebar{
<                     font-size: 16px;
<                     top: 12px;
<                 }
<                 .toggle-sidebar{
<                     left: 14px;
<                 }
<                 .mark-email{
<                     left: 35px;
<                     top: 14px;
<                 }
<                 .quickview-link{
<                     top: 14px;
<                 }
< 
<             }
<             .notification-list, .search-link{
<                 display:none;
<             }
<             
827,832c655,677
<             .dropdown-submenu{
<                 top:12px;
<             }
<             .notification-list, .search-link{
<                 display:none;
<             }
---
>   .xs-no-border{
>     border-width: 0;
>   }
>   
>   .xs-b-r,
>   .xs-b-l,
>   .xs-b-t,
>   .xs-b-b{
>     border-width: 0;
>     border-style: solid;
>   }
>   .xs-b-r{
>     border-right-width:1px;
>   }
>   .xs-b-l{
>     border-left-width:1px;
>   }
>   .xs-b-t{
>     border-top-width:1px;
>   }
>   .xs-b-b{
>     border-bottom-width:1px;
>   }
834c679,685
<         }
---
>   .xs-reset-position{
>     position: initial;
>   }
>   .xs-screen-center{
>     position: absolute;
>     left: -50%;
>   }
836,864c687,689
<         #overlay-search{
<             font-size: 48px;
<             height: 118px;
<             line-height: 46px;
<         }
<     }
<     .page-sidebar .sidebar-header{
<         height: @layout-mobile-header-height;
<         line-height: @layout-mobile-header-height;
<     }
<     .panel {
<         .panel-heading{
<             padding-left: 15px;
<         }
<         .panel-body{
<             padding: 15px;
<             padding-top: 0;
<         }
<     }
<     .error-page{
<         padding: 15px;
<         .error-container{
<             margin-top: 30px;
<             width: auto;
<         }
<         .pull-bottom{
<             position: relative;
<         }
<     }
---
>   .xs-bg-size-cover{
>     background-size: cover;
>   }
866,874c691,707
<     .map-controls{
<         left: 10px;
<     }
<     .register-container{
<         height: auto !important;
<     }
<     .error-container-innner{
<         width: auto;
<     }
---
>   .xs-relative{
>     position: relative !important;
>   }
>   
>   .error-page{
>       padding: 15px;
>       .error-container{
>           margin-top: 30px;
>           width: auto;
>       }
>       .pull-bottom{
>           position: relative;
>       }
>   }
>   .error-container-innner{
>       width: auto;
>   }
883,900d715
<         .icon-set {
<             background: url('@{base-img-url}/icons/top_tray_2x.png');
<             position: relative;
<             background-size: 95px 19px;
<         }
<         .editor-icon {
<             background-image: url("@{base-img-url}/editor_tray_2x.png");
<             background-size: 480px 40px; 
<         }
<       .alert .close {
<         background: url("@{base-img-url}/icons/noti-cross-2x.png") no-repeat scroll 0 0 transparent;
<         background-position: -9px -10px;
<         width: 10px;
<         height: 9px;
<         position: relative;
<         opacity: 0.8;
<         background-size: 114px 29px;
<       }
902c717,719
< }
\ No newline at end of file
---
> 
> }
>