%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /var/www/html/shaban/laviva/wp-content/themes/levelup/assets/styl/inc/
Upload File :
Create Path :
Current File : /var/www/html/shaban/laviva/wp-content/themes/levelup/assets/styl/inc/app.styl

/*!--------------------------------------------------------------
* 7.0 Slides
==============================================================*/

.body-background {position:absolute;top:0;left:0;right:0;bottom:0;background: #fff;opacity:0;transition:opacity 0.3s, background 1s;}
body .body-background {opacity:1;}

.to-load span
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-size: cover;
  background-position: center center;
  transition: opacity 0.3s;
  background-repeat: no-repeat

.to-load.loaded span
  opacity:1;

.columns-project
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  .column
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;


.site-content.project .line.before .content .e_1,
.site-content.project .line.before .content .e_2,
.site-content.project .line.before .content .e_3,
.site-content.project .line.before .content .e_4 {transform:translateY(-100px) translateZ(0);opacity:0;}
.site-content.project .line.current .content .e_1,
.site-content.project .line.current .content .e_2,
.site-content.project .line.current .content .e_3,
.site-content.project .line.current .content .e_4 {transform:translateY(0px) translateZ(0);opacity:1;}
.site-content.project .line.after .content .e_1,
.site-content.project .line.after .content .e_2,
.site-content.project .line.after .content .e_3,
.site-content.project .line.after .content .e_4 {transform:translateY(100px) translateZ(0);opacity:0;}

.site-content.project .line.before .slider_nav {transform:translateY(-200px) translateZ(0);opacity:0;}
.site-content.project .line.current .slider_nav {transform:translateY(0px) translateZ(0);opacity:1;}
.site-content.project .line.after .slider_nav {transform:translateY(200px) translateZ(0);opacity:0;}
.site-content.project .line .slider_nav {transition: transform 0.5s, opacity 0.5s, border 0.5s;}
.site-content.project .line .slider_nav:before,
.site-content.project .line .slider_nav:after {transition: border 0.2s;}


.site-content.project .line .link_detail
  font-weight bold

  &.link_light
    color: #fff
  &.link_dark
    color: #000


.site-content.project .line.current .section-down-arrow { opacity: 1 }
.site-content.project .line.after .section-down-arrow,
.site-content.project .line.before .section-down-arrow { opacity: 0 }

.site-content.project .line.going-up .content .e_1 {transition-delay:0.0s;}
.site-content.project .line.going-up .content .e_2 {transition-delay:0.1s;}
.site-content.project .line.going-up .content .e_3 {transition-delay:0.2s;}
.site-content.project .line.going-up .content .e_4 {transition-delay:0.3s;}
.site-content.project .line.going-down .content .e_1 {transition-delay:0.3s;}
.site-content.project .line.going-down .content .e_2 {transition-delay:0.2s;}
.site-content.project .line.going-down .content .e_3 {transition-delay:0.1s;}
.site-content.project .line.going-down .content .e_4 {transition-delay:0.0s;}
.site-content.project .line.current.going-up .content .e_1 {transition-delay:0.9s;}
.site-content.project .line.current.going-up .content .e_2 {transition-delay:0.8s;}
.site-content.project .line.current.going-up .content .e_3 {transition-delay:0.7s;}
.site-content.project .line.current.going-up .content .e_4 {transition-delay:0.6s;}
.site-content.project .line.current.going-down .content .e_1 {transition-delay:0.6s;}
.site-content.project .line.current.going-down .content .e_2 {transition-delay:0.7s;}
.site-content.project .line.current.going-down .content .e_3 {transition-delay:0.8s;}
.site-content.project .line.current.going-down .content .e_4 {transition-delay:0.9s;}
.site-content.project .line.going-up .slider_nav {transition-delay:0.0s;}
.site-content.project .line.going-down .slider_nav {transition-delay:0.4s;}

.site-content.project .line {position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:4}
.site-content.project .columns-project .line .line-left {position:absolute;top:120px;right:60%;bottom:120px;left:120px;}
.site-content.project .line .right {position:absolute;top:45px;right:45px;bottom:45px;left:50%;}
.site-content.project .line .container {display:table;width:100%;height:100%;padding-right 0; padding-left 0}
.site-content.project .line .content {display:table-cell;width:100%;height:100%;vertical-align:middle;}
.site-content.project .line .rdy_button {margin-right: 0; margin-bottom 0}
.site-content.project .valign-top .line .content {vertical-align:top;}
.site-content.project .valign-bottom .line .content {vertical-align:bottom;}

.site-content.project .line.valign-middle .content {vertical-align:middle;}
.site-content.project .line.valign-top .content {vertical-align:top;}
.site-content.project .line.valign-bottom .content {vertical-align:bottom;}


.site-content.project .align-right .line .content {text-align: right}
.site-content.project .align-center .line .content {text-align: center}

.site-content.project .columns-project.project-fullwidth.align-center .line .line-left {right:35%;left:35%;}
.site-content.project .columns-project.project-fullwidth.align-right .line .line-left {right:120px;left:60%;}
.site-content.project .columns-project.project-fullwidth .line.align-center .line-left
  right:15%;
  left:15%;
  .content
    text-align: center !important;
    .caption,
    .description
      text-align center
      margin-left 15%
      margin-right 15%

.site-content.project .columns-project.project-fullwidth .line.align-left .line-left
  right:60%;
  left:120px;
  .content
    text-align: left !important;

.site-content.project .columns-project.project-fullwidth .line.align-right .line-left
  right:120px;
  left:60%;
  .content
    text-align: right !important;

.site-content.project .illustrations-container
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  bottom: 0;
  left: 50%;
  overflow: hidden;
  z-index: 2;
  backface-visibility: hidden;
  transition: all 0.5s;
  transition-delay: 0.3s;

.site-content.project .project-fullwidth .illustrations-container
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

.site-content.project .illustrations-container .illustrations
  position: relative;
  width: 100%;
  height: 100%;

.site-content.project .illustrations-container .illustrations.animated
  transition: transform 1s cubic-bezier(0.96, 0.04, 0.18, 0.98);

.site-content.project .illustrations-container .illustration
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;

.site-content.project .illustrations-container .illustration-inner
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;

  &[data-caption-hide="1"]
    cursor auto

.site-content.project .illustrations-container.hovered .illustration:hover .illustration-inner,
.site-content.project .illustrations-container.hovered .illustration.hover .illustration-inner,
.site-content.project .illustrations-container.hovered .illustration.slidein .illustration-inner
  transform: scale(1.1) translateZ(0);
  transition: transform 10s ease-out;

.site-content.project .illustrations-container.hovered .illustration.hover_out .illustration-inner
  transform: scale(1) translateZ(0);
  transition: transform 10s ease-out;

.site-content.project .illustrations-container.hidden
  opacity: 0;
  transform: translateY(-100px) translateZ(0);
  z-index: -1;

.site-content.project .content h2 {margin:0;line-height 100%}
.site-content.project .content .caption {display:inline-block;margin: 30px 0 0 0;line-height 100%}
.site-content.project .content .description {margin-top: 30px; display inline-block}
.site-content.project .content .description p:last-child {margin-bottom: 0}
.site-content.project .content .project_button {display:inline-block;line-height: 100%; margin-top: 30px}

.site-content.project .content .e_1 {transition:all 0.5s;}
.site-content.project .content .e_2 {transition:all 0.5s;}
.site-content.project .content .e_3 {transition:all 0.5s;}
.site-content.project .content .e_4 {transition:all 0.5s;}
.site-content.project .section-down-arrow {transition:all 0.5s;}

.site-content.project .project-fullwidth .content
  .caption,
  .description
    max-width 500px

.site-content.project .project-fullwidth.align-center .content
  .caption,
  .description
    max-width auto !important

.site-content.project .project-fullwidth.align-right .content
  .caption,
  .description
    margin-right: 0;
    margin-left: auto;


.site-content.project .projects-list {position:absolute;bottom:34px;left:49px;z-index:5;}
.site-content.project .projects-list.display_none {display: none}
.site-content.project .projects-list.cnt-right {left: auto;right: 54px;}
.site-content.project .projects-list.cnt-middle {top: 50%; transform: translateY(-50%);bottom: auto !important}
.site-content.project .projects-list a {position:relative;display:block;width:26px;height:26px;}
.site-content.project .projects-list a:after {box-sizing: border-box;content:'';display:block;position:absolute;top:6px;left:6px;width:12px;height:12px;background-color transparent; border:1px solid transparent;transition:border-color 0.35s, background-color 0.35s;}
.site-content.project .projects-list a:before {box-sizing: border-box;content:'';display:block;position:absolute;top:8px;left:8px;width:8px;height:8px; border:2px solid transparent;transition:border-color 0.35s, background-color 0.35s;}
.site-content.project .projects-list a:after {border-radius:50%;}
.site-content.project .projects-list a:before {border-radius:50%;}
.site-content.project .projects-list a.active:after
  transition:border 0.35s


.site-content.project .projects-list
  &.style1
    a:before
      background-color #000;
    a.active:after
      border:2px solid #adaeae !important

    &[data-pgcolor="light"] a:before
      background-color #fff;

    &[data-pgcolor="light"] a.active:after
      border:2px solid #626363 !important

    &[data-pgcolor="light"] a.contact.active:after
      background:#fff !important;

  &.style2
    a:before
      transition: all .1s ease-in-out !important;
      background-color: rgba(0, 0, 0, 0.40);
    a:after
      border none !important
    a:hover:before,
    a.active:before
      width: 10px
      height: 10px
      left: 7px
      top: 7px
    a.active:before
      background-color: #000 !important;

    &[data-pgcolor="light"] a:before
      background-color: rgba(255, 255, 255, 0.40);

    &[data-pgcolor="light"] a.active:before
      background-color:#fff !important;


.site-content.project .projects-list a.active:before
  background-color transparent !important

.site-content.project .projects-list a.contact.active:before,
.site-content.project .projects-list a.contact.active:after
  background:#000 !important;transition:background 0.35s

.site-content.project
  .projects-list
    a
      span
        width 160px
        color #000
        position: absolute
        left 25px
        top: 1px
        display: none
        opacity 0
        height: 26px

      &.hover
        span
          display: block

    &[data-pgcolor="light"]
      a
        span
          color #fff !important
    &.cnt-right
      a
        span
          right: 25px;
          left auto
          text-align: right;


@media (max-width: 768px)
  .rdy_project .projects-list,
  .rdy_project .section-down-arrow,
  .site-content.project .content .e_2:not(.e_button),
  .site-content.project .content .e_3:not(.e_button),
  .site-content.project .content .e_4:not(.e_button)
    display: none !important
  .site-content.project .content .e_button.mobile_hide
    display: none !important
  .site-content.project .content .e_button .rdy_button
    padding: 14px 20px !important;
    font-size: 12px !important;

  //.site-content.project .line .content
  //  text-align: center !important

  .site-content.project .illustrations-container
    left: 0 !important

  .site-content.project .line .content
    vertical-align bottom !important;

  .rdy_project
    .entry-title
      display: table;
      width 100%
      text-align left;
      line-height 1em !important

  .rdy_project .entry-title a
    display: table-cell;
    margin: 0 auto;
    width: 1px;

  .rdy_project .entry-title
    font-size: 34px !important;
    line-height 110% !important
    color: #000 !important;
    padding 4px 0

@media screen and (max-width: 768px)
  .site-content.project .line .line-left
    left: 60px !important;
    right: 60px !important;

  .rdy_project .entry-title.without-margin
    margin-bottom 0 !important

  .site-content.project .line .line-left
    bottom: 60px !important

@media screen and (max-width: 569px)
  .site-content.project .line .line-left
    left: 35px !important;
    right: 35px !important;

  .site-content.project .line .line-left
    bottom: 35px !important


@media screen and (min-width: 768px)
  .site-content.project .line.align-left .line-left
    left: 60px !important;

  .site-content.project .line.align-right .line-left
    right: 60px !important;

  .site-content.project .line .line-left
    bottom: 60px !important

  .site-content.project .projects-list
    left: 20px;
    bottom: 20px;

  .site-content.project .projects-list.cnt-right
    right: 20px;

@media screen and (min-width: 992px)
  .site-content.project .line.align-left .line-left
    left: 80px !important;

  .site-content.project .line.align-right .line-left
    right: 80px !important;

  .site-content.project .line .line-left
    bottom: 80px !important

  .site-content.project .projects-list
    left: 30px;
    bottom: 30px;

  .site-content.project .projects-list.cnt-right
    right: 30px;

@media screen and (min-width: 1200px)
  .site-content.project .line.align-left .line-left
    left: 80px !important;

  .site-content.project .line.align-right .line-left
    right: 80px !important;

  .site-content.project .line .line-left
    bottom: 80px !important

  .site-content.project .projects-list
    left: 40px;
    bottom: 40px;

  .site-content.project .projects-list.cnt-right
    right: 40px;

@media screen and (min-width: 1440px)
  .site-content.project .line.align-left .line-left
    left: 100px !important;

  .site-content.project .line.align-right .line-left
    right: 100px !important;

  .site-content.project .line .line-left
    bottom: 100px !important

  .site-content.project .projects-list
    left: 50px;
    bottom: 50px;

  .site-content.project .projects-list.cnt-right
    right: 50px;

@media screen and (min-width: 1680px)
  .site-content.project .line.align-left .line-left
    left: 120px !important;

  .site-content.project .line.align-right .line-left
    right: 120px !important;

  .site-content.project .line .line-left
    bottom: 120px !important

  .site-content.project .projects-list
    left: 50px;
    bottom: 50px;

  .site-content.project .projects-list.cnt-right
    right: 50px;

@media screen and (min-width: 768px)
  .site-content.project .columns-project .line.align-center.valign-bottom .line-left
    bottom 60px !important



.site-content.project .illustration-video
  &:after
    content ''
    position absolute
    top 0
    left 0
    width 100%
    height 100%

  .mejs-container
    .mejs-layers
    .mejs-controls
      display: none !important

.site-content.project
  .slider_nav
    position absolute
    width 72px
    height 54px


    &.slider_nav_next
      &:before
        right: 28px
        transform: rotate(45deg);

    &.slider_nav_prev
      &:before
        left: 28px;
        transform: rotate(-135deg);

    &:after
      position: absolute;
      top: 13px;
      content: "";
      display: inline-block;
      border 2px solid #000
      border-radius 4px
      width 100%
      height 100%
      top 0

    &:before
      position: absolute;
      top: 15px;
      content: "";
      display: inline-block;

      width: 24px;
      height: 24px;
      border-right: 2px solid #000;
      border-top: 2px solid #000;

  .slider-nav-middle
    .slider_nav
      top 50%
      transform: translateY(-50%);

  .slider-nav-bottom_center
    .slider_nav
      &.slider_nav_next
        left: 50%
      &.slider_nav_prev
        left: 50%
        margin-left: -72px;

.columns-project[data-slider-nav-color="dark"]
.columns-project.slider-nav-color-dark
  .slider_nav
    &:after
      border 2px solid #fff !important

    &:before
      border-right: 2px solid #fff !important;
      border-top: 2px solid #fff !important;

.site-content.project .line[data-caption-hide="1"]
  display none !important


@media screen and (max-width: 768px)
  .site-content.project
    .slider_nav
      display none !important

@media screen and (min-width: 768px)
  .slider-nav-middle
    .slider_nav
      &.slider_nav_next
        right: 60px !important

      &.slider_nav_prev
        left: 60px !important

  .slider-nav-bottom_left
  .slider-nav-bottom_right
  .slider-nav-bottom_center
    .slider_nav
      bottom 60px !important

  .slider-nav-bottom_left
    .slider_nav
      &.slider_nav_next
        left: 60px !important
      &.slider_nav_prev
        left: 60px !important

  .slider-nav-bottom_right
    .slider_nav
      &.slider_nav_next
        right: 60px !important
      &.slider_nav_prev
        right: 130px !important

@media screen and (min-width: 992px)
  .slider-nav-bottom_left
  .slider-nav-bottom_right
  .slider-nav-bottom_center
    .slider_nav
      bottom 80px !important

  .slider-nav-bottom_left
    .slider_nav
      &.slider_nav_next
        left: 80px !important
      &.slider_nav_prev
        left: 80px !important

  .slider-nav-bottom_right
    .slider_nav
      &.slider_nav_next
        right: 80px !important
      &.slider_nav_prev
        right: 150px !important

@media screen and (min-width: 1440px)
  .slider-nav-bottom_left
  .slider-nav-bottom_right
  .slider-nav-bottom_center
    .slider_nav
      bottom 100px !important

  .slider-nav-bottom_left
    .slider_nav
      &.slider_nav_next
        left: 100px !important
      &.slider_nav_prev
        left: 100px !important

  .slider-nav-bottom_right
    .slider_nav
      &.slider_nav_next
        right: 100px !important
      &.slider_nav_prev
        right: 170px !important

@media screen and (min-width: 1680px)
  .slider-nav-bottom_left
  .slider-nav-bottom_right
  .slider-nav-bottom_center
    .slider_nav
      bottom 120px !important

  .slider-nav-bottom_left
    .slider_nav
      &.slider_nav_next
        left: 120px !important
      &.slider_nav_prev
        left: 120px !important

  .slider-nav-bottom_right
    .slider_nav
      &.slider_nav_next
        right: 120px !important
      &.slider_nav_prev
        right: 190px !important


.site-content.project .line.slide-click
  cursor pointer

Zerion Mini Shell 1.0