Loden Properties

10/3/2018 - 11:04 AM

<script>

 $('#block-yui_3_17_2_1_1538487893865_13738 .sqs-gallery-thumbnails img').wrap('<div class="indicator-wrapper"></div>');
  $('#block-yui_3_17_2_1_1538487893865_13738 .sqs-gallery-thumbnails img').remove();
  $('#block-yui_3_17_2_1_1538487893865_13738 .sqs-gallery-thumbnails .indicator-wrapper').append('<div class="indicator"></div>');
  $('#block-yui_3_17_2_1_1538487893865_13738 .sqs-gallery-thumbnails .indicator-wrapper').wrap('<div class="indicator-line"></div>');
 $('#block-yui_3_17_2_1_1538487893865_13738 .slide').wrap('<div class="slide-wrapper"></div>');



</script>

javascript.js

<script>
$(document).ready(function(){
 
  var contactPageURL = "/#contact-section";
  
  //Assign my own classes to the blocks
  //Page1
  $('#block-yui_3_17_2_1_1538550736572_6020').addClass('page1-text-block');
  $('#block-yui_3_17_2_1_1538551602169_6091').addClass('page1-sideline-block')
  $('#block-yui_3_17_2_1_1538487893865_13738').addClass('page1-gallery-block');
  $('.page1-gallery-block .meta-inside').addClass('section-bottom-element');
  $('.page1-gallery-block .next,.page1-gallery-block .previous').append('<div class="control-original"></div><div class="control-hover"></div>');
  //Page2
  $('#block-5bb37621e2c4836f57a52724').addClass('page2-sideline-block');
  $('#block-yui_3_17_2_1_1538650865964_7618').addClass('page2-left-image-block');
  $('#block-yui_3_17_2_1_1538650865964_9416').addClass('page2-contact-text-block');
  $('#block-yui_3_17_2_1_1538650865964_10542').addClass('page2-right-image-block');
  $('#block-yui_3_17_2_1_1538650865964_12002').addClass('page2-right-text-block');
  //Page3
  $('#block-5bb3763ae2c4836f57a52e8a').addClass('page3-text-block');
  $('#block-yui_3_17_2_1_1538725459852_6616').addClass('page3-image-block');
  $('#block-yui_3_17_2_1_1538725459852_8055').addClass('page3-sideline-text-block');
  //Wrap blocks that should be together
  //Page1
  $('.page1-text-block,.page1-gallery-block').wrapAll('<div class="page1-text-gallery-wrapper"></div>');
  $('.page1-text-gallery-wrapper,.page1-sideline-block').wrapAll('<div class="page1-blocks-container"></div>');
  //$('.page1-gallery-block .sqs-gallery-thumbnails img').wrap('<div class="indicator-wrapper"></div>');
  //$('.page1-gallery-block .sqs-gallery-thumbnails img').remove();
  //$('.page1-gallery-block .sqs-gallery-thumbnails .indicator-wrapper').append('<div class="indicator"></div>');
  //$('.page1-gallery-block .sqs-gallery-thumbnails .indicator-wrapper').wrap('<div class="indicator-line"></div>');
  //$('.page1-gallery-block .slide').wrap('<div class="slide-wrapper"></div>');
  //Page2
  $('.page2-sideline-block,.page2-left-image-block,.page2-contact-text-block,.page2-right-image-block,.page2-right-text-block').wrapAll('<div class="page2-blocks-container"></div>');
  $('.page2-left-image-block,.page2-contact-text-block').wrapAll('<div class="page2-image-contact-wrapper"></div>');
  $('.page2-right-image-block,.page2-right-text-block').wrapAll('<div class="page2-image-text-wrapper"></div>');
  $('.page2-contact-text-block p').wrap('<a href="'+contactPageURL+'"></a>');
  //Page3
  $('.page3-text-block,.page3-image-block,.page3-sideline-text-block').wrapAll('<div class="page3-blocks-container"></div>');
  $('.page3-text-block,.page3-image-block').wrapAll('<div class="page3-text-image-wrapper"></div>');
  
  //Move gallery meta
  var moveGalleryMeta = function(){
    var textLeft = $('.page1-text-gallery-wrapper .sqs-block-content').offset().left,
        galleryLeft = $('.page1-gallery-block').offset().left,
        metaLeft = textLeft - galleryLeft - 20;
    $('.page1-gallery-block .meta-inside, .page1-gallery-block .sqs-gallery-thumbnails').css({
      "left":metaLeft
    });
  };//moveGalleryMeta
  
  $(window).ready(function(){
  	setTimeout(function(){
      moveGalleryMeta();
        var windowScrollTop = $(window).scrollTop(),
        windowHeight = $(window).outerHeight(),
        windowBottom = windowScrollTop+windowHeight,
        buffer = windowHeight*0.5;
    $('.page1-sideline-block,.page2-sideline-block,.page3-sideline-text-block').each(function(i){
      var elementTop = $(this).offset().top;
      if ((windowBottom >= elementTop+buffer) && (!($(this).hasClass('inview')))) {
             triggerAnimation($(this));                                     
      }
      
    });//each
    
    
    },500);
    
    //Animations
    $('.page1-sideline-block,.page2-sideline-block,.page3-sideline-text-block').click(function(){
   $(this).toggleClass('inview').find('p').toggleClass('inview');
    });
  });
 
  var triggerAnimation = function(element){
    element.addClass('inview').find('p').addClass('inview');
  };
  
  $(window).scroll(function(){
    var windowScrollTop = $(window).scrollTop(),
        windowHeight = $(window).outerHeight(),
        windowBottom = windowScrollTop+windowHeight,
        buffer = windowHeight*0.5;
    $('.page1-sideline-block,.page2-sideline-block,.page3-sideline-text-block').each(function(i){
      var elementTop = $(this).offset().top;
      if ((windowBottom >= elementTop+buffer) && (!($(this).hasClass('inview')))) {
             triggerAnimation($(this));                                     
      }
      
    });//each
  });//window.scroll
$(window).resize(function() {
    clearTimeout(window.resizedFinished);
    window.resizedFinished = setTimeout(function(){
      	moveGalleryMeta();
    	//resizeSection($('#test-page-section'));
    }, 500);
});
window.dispatchEvent(new Event('resize'));
});//document.ready
</script>

style.scss

//Form field color//
.form-wrapper .field-list .field .title{
  color: #22372b;
}
.form-wrapper .field-list .title{
  color: #22372b;
}


//Mobile hamburger rule line//
.mobile-nav-toggle-label .top-bar {height: 2px !important; }
.mobile-nav-toggle-label .middle-bar {height: 2px !important; }
.mobile-nav-toggle-label .bottom-bar {height: 2px !important; }

//Mobile nav//
#mobileNavigation a{ 
  font-size: 12px !important;
  font-weight: 700 !important;}

//Mobile nav background//
#mobileNavigation { background-color: rgba(255, 255, 255, 100); }

//squarestudio custom code
//nav
#header {
  @media (min-width:769px){
    #siteTitleWrapper {
      bottom: -25px;
    }
  }
  //site logo
  #logoImage {
    filter:invert(0.2);
    margin-bottom: -35px;
    @media (max-width:769px){
      margin-top: -20px;
    }
  }
  #headerNav {
    margin-left: 0px !important;
    margin-top: 0px !important;
    #mainNavigation {
      width: 90%;
      max-width: 1500px;
      margin: 0 auto;
      position: relative;
      text-align: left;
      position: relative;
      font-size: 0;
      white-space: nowrap !important;
      .index a {
        font-family: Proxima-Nova;
        font-size:  12px;
        letter-spacing:  1px;
        text-transform:  uppercase;
        font-weight: 500 !important
      }
      .index.home {
        width: 25%;
        margin: 0 !important;
      }
      .index:nth-of-type(2) {
        margin-left: -80px !important;
      }
      .index:nth-of-type(3) {
        margin-left: 160px !important;
      }
      .index:nth-of-type(3), .index:nth-of-type(4){
        text-align:right;
      }
      .index:nth-of-type(4){
        margin-left: -60px !important;
      }
    }
  }
}

//hero
#home-section {
  .index-section-wrapper {
    .content-inner {
      padding-top: 0px !important;
      margin-left: -20px !important;
      margin-right: -20px !important;
    }
    .sqs-block-spacer {
      display: none;
    }
    height: 100vh;
    img {
      top: !important;
    }
    h2 {
      font-family:  Proxima-Nova;
      font-weight: 500;
      margin-top: 50px;
      @media (max-width:769px) {
        margin-top: 50px;
      }
    }
  }
}



//colors
#about-section {
  .sqs-block-button a {
    border-color: #fc4c02 !important;
    font-family: Proxima-Nova-Condensed, !important;
    font-weight: 800;
    color: #fc4c02 
  }
  .sqs-block-button a:hover {
    background: #fc4c02 ;
    color: #fff;
  }
  .image-card {
    background: #22372B !important;
  }
}
#properties-section {
  .sqs-block-button a {
    border-color: #22372B !important;
    font-family: Proxima-Nova-Condensed !important;
    color: #22372B 
  }
  .sqs-block-button a:hover {
    background: #22372B ;
    color: #fff;
  }
  .image-card {
    background: #fda580 !important;
  }
}
#contact-section {
  .sqs-block-button a {
    border-color: #C1C6C8 !important;
    font-family: Proxima-Nova-Condensed !important;
    color: #C1C6C8 
  }
  .sqs-block-button a:hover {
    background: #C1C6C8 ;
    color: #fff;
  }
  .image-card {
    background: #414141 !important;
  }
}



//all sections
body:not(.sqs-edit-mode-active) {
  #about-section, #properties-section, #contact-section {
    white-space: nowrap;
    .index-section-wrapper {
      //fonts
      .image-card {
        background: #46554F;
        p {
          text-align:justify;
          color: #fff;
          line-height: 2em;
          font-size: 18px !important;
          letter-spacing: 0.05em;
          white-space: normal;

        }
      }
      //mobile
      @media (max-width:880px) {
        .content {
          padding: 50px 10px;
          .sqs-block-image {
            max-width: 500px;
            margin: 0 auto;
            .image-block-outer-wrapper {
              display: block !important;
            }
            .intrinsic {
              display: block !important;
              width: 100% !important;
              .image-inset {
                width: 100% !important;
              }
            }
            .image-card-wrapper {
              display: block !important;
              width: 100% !important;
              .image-card {
                width: 100%;
                margin-left: 0px;
              }
            }
          }
        }
      }
      //desktop
      @media (min-width:881px) {
        .content {
          max-width: none;
          .sqs-row {
            margin: 0;
          }
          .sqs-block-button {
            transform:rotate(90deg);
            z-index: 99;
            a {
              font-size: 46px;
              border: px solid;
              padding: 20px 50px;
              font-family:  Proxima-Nova;
              letter-spacing:  5px;
              text-transform:  uppercase;
              font-weight: 100 !important
            }
          }
          .sqs-block-image {
            white-space: none;
            padding: 0 !important;
            position: relative;
            width: 100vw;
            .image-block-outer-wrapper {
              display: block;
              position: relative;
              .intrinsic {
                width: 50% !important;
                display:inline-block;
                .image-inset {
                  width: 100% !important;
                  z-index: 9;
                  img {
                    width: 100% !important;
                    top: 0px !important;
                    display: block;
                    padding: 8px;
                    /*
                    border: 1px solid #ddd;
                    box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.1);
                    */
                    position: relative !important;
                    float: right;
                  }
                }
              }
            }
            .image-card-wrapper {
              width: 50% !important;
              display:inline-block;
              position: relative !important;
              float: right;
              left: 0%;
              top: 0px !important;
              margin-right: 0%;
              .image-card {
                /*
                border: 8px solid #fff;
                */
                margin: 150px 0 0 -5%;
                padding: 120px;
                height: 85%;
                background: #46554F;
                position: relative !important;
                width: 100%;
                margin-left: 0%;
                .image-subtitle-wrapper:before {
                  content:'';
                  background:url(https://www.chrisadlam.com/images/icon-close-white.png) no-repeat;
                  background-size: contain;
                  width: 40px;
                  height: 40px;
                  position: absolute;
                  top: -20px;
                  left: 50%;
                  transform: translate(-50%, -100%);
                }
                .image-subtitle-wrapper {
                  top:50%;
                  position: relative !important;
                  p {
                    text-align:justify;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  //section logos
  #about-section {
    .image-subtitle-wrapper:before {
      background: url(https://static1.squarespace.com/static/5b66f7b63917eeea09bd10f5/t/5b9810ed40ec9ace9171439e/1536692461491/Loden_Properties_White.png) no-repeat !important;
      background-size: contain !important;
      height: 30px !important;
      width: 100px !important
    }
  }
  #properties-section {
    .image-subtitle-wrapper:before {
      background: url(https://static1.squarespace.com/static/5b66f7b63917eeea09bd10f5/t/5b98114d758d4614b2077842/1536692557327/Loden_Hospitality_White.png) no-repeat !important;
      background-size: contain !important;
      height: 30px !important;
      width: 100px !important
    }
  }
  #contact-section {
    .image-subtitle-wrapper:before {
      background: url(https://static1.squarespace.com/static/5b66f7b63917eeea09bd10f5/t/5b981158562fa7853b15ae24/1536692568663/Loden_D%26JHotels_White.png) no-repeat !important;
      background-size: contain !important;
      height: 30px !important;
      width: 100px !important
    }
  }

  //right justify
  #about-section, #contact-section {
    .sqs-block-image {
      .image-card {
        border-right: 0px solid #fff !important;
      }
    }
  }

  //left justify
  #properties-section {
    @media (min-width:881px) {
      .content {
        padding: 100px 0 !important
      }
      .index-section-wrapper .content .sqs-block-image .image-block-outer-wrapper .intrinsic .image-inset img {
        left: -35px !important
      }
      .sqs-block-image {
        .intrinsic {
          float: right !important;
          margin: 150px 0 0 -5% !important;
          img {
            float: left !important;
          }
        }
        .image-card-wrapper {
          float: left !important;
          left: 0% !important;
          .image-card {
            /*
            border: 8px solid #fff;
            */
            margin: 0% 0 0 0% !important;
            border-left: 0px solid #fff !important;
          }
        }
      }
    }
  }

  #about-section {
    .content {
      padding: 200px 0 0 !important;
      @media (max-width:880px) {
        padding-top: 70px !important;
      }
    }
  }
  #properties-section {
    .content {
      padding: 180px 0 0 !important;
      @media (max-width:880px) {
        padding-top: 0px !important;
      }
    }
  }
  #contact-section {
    .content {
      padding: 200px 0 0 !important;
      @media (max-width:880px) {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
      }
    }
  }
}

//footer
#footer {
  .sqs-block-image {
    width: 80px;
    margin: 0 auto;
    *{overflow: visible !important;}
  }

  p, a {
    color: #22372b !important;
    font-family: Proxima-Nova;
    font-weight: 500;
    font-size: 12px;
    letter-spacing:  1.5px;
  }
  @media (max-width: 769px){
    .back-to-top-nav {
      display: none
    }
    .sqs-block-html {
      padding: 5px 0!important;
      display: block;
      p, a {text-align: center !important;}
    }
  }
  .sqs-block-horizontalrule {
    padding-top: 0;
    padding-bottom: 0;
    hr {
      background-color: #22372b !important;
      height: 2px;
      margin: 0px 0;
    }
  }
}

//back to the top
.wrapper.fix {
  position: fixed;
  bottom: 50vh;
  @media (max-width: 880px){display:none;}
}
.wrapper {
  width: auto;
  height: 20px;
  right: 0vw;
  bottom: 0vh;
  padding: 0 0vw;
  margin: 0 auto;
  box-sizing: border-box;
  text-align: right;
  z-index: 999;
  position: absolute;
  display: block;
  transform:rotate(90deg);
  margin-right: -150px;
  .line {
    height:3px;
    width: 300px;
    background: #fc4c02;
    display:inline-block;
    margin-bottom: 4px;
    margin-right: 10px;
    @media (max-width: 880px){display:none;}
  }
  .text {
    display:inline-block;
    color: #fc4c02;
    font-family: ;
    font-size:  14px;
    color:  #FC4C02;
    letter-spacing:  1.5px;
    text-transform:  uppercase;
    @media (max-width: 880px){display:none;}
  }
}

//font
.image-subtitle-wrapper {
  top:50%;
  position: relative !important;
  p {
    text-align:justify;
    font-size: 14px !important;
    color: #fff;
    line-height: 32px;
    letter-spacing: 1px;
    white-space: normal;
    font-family: Proxima-Nova-Condensed !important;
    text-transform:uppercase;
  }
}

//make images 2:3
//desktop
@media (min-width: 881px){
  body:not(.sqs-edit-mode-active) { #about-section, #properties-section, #contact-section {
    .index-section-wrapper .content .sqs-block-image .image-block-outer-wrapper .intrinsic .image-inset img {
      width: 430px !important;
      height: 645px !important;
      max-height: none !important;
      object-fit: cover;
      left: 30px !important;
    }
    }
  }
}
//mobile
@media (max-width: 880px){
  body:not(.sqs-edit-mode-active) { #about-section, #properties-section, #contact-section {
    .index-section-wrapper .content .sqs-block-image .image-block-outer-wrapper .intrinsic .image-inset img {
      width: 300px !important;
      height: 450px !important;
      max-height: none !important;
      object-fit: cover;
      margin: 0 auto;
    }
    .sqs-block-image .design-layout-collage.sqs-narrow-width .image-card-wrapper {
      width: 90%;
      margin-top: 20px;
      position: relative;
    }
    }
  }
}
@media (min-width: 881px){
  body:not(.sqs-edit-mode-active) { #properties-section{
    .index-section-wrapper .content .sqs-block-image .image-block-outer-wrapper .intrinsic .image-inset img {
      width: 430px !important;
      height: 645px !important;
      max-height: none !important;
      object-fit: cover;
      left: -30px !important;
    }
    }
  }
}


//general edits
#about-section, #properties-section, #contact-section {
  @media (max-width: 880px) {
    //button styling on mobile
    a {
      width: 300px;
      box-sizing: border-box;
      margin: -40px 0 40px 0;
      padding-top: 16px;
      padding-bottom: 16px;
    } 
    //make section logos visible
    .image-subtitle-wrapper:before {
      content:'';
      background:url(https://www.chrisadlam.com/images/icon-close-white.png) no-repeat;
      background-size: contain;
      width: 50px !important;
      height: 40px;
      position: absolute;
      top: 20px;
      left: 50%;
      transform: translate(-50%, -100%);
    }
    .image-subtitle-wrapper {
      padding-top: 50px;
    }
  }
}

//******************
//Custom Index Page
//******************//

//PAGE1
#test-page-section {
  .index-section-wrapper {
    margin-bottom:150px;
    @media(max-width:1000px){
      margin-bottom:0px;
    }
    .sqs-row {
      margin-left:0px!important;
      margin-right:0px!important
    }
    .content {
      max-width:1400px;
      margin:auto;
      padding:0;
    }//.content
  }//.index-section-wrapper
}//#test-page-section
.page1-blocks-container {
  position:relative;
  display:flex;
  justify-content:space-between;
  .page1-text-gallery-wrapper {
    display:flex;
    background:black;
    width:75%;
    
      @media(max-width:1000px){
        margin-bottom:100px;
        width:100%;
        flex-direction:column;
        }
  }
  .page1-text-block {
    box-sizing:border-box;
    background:black;
    color:white;
   	width:60%;
    padding-top:100px!important;
    padding-left:100px!important;
    @media(max-width:1000px){
      width:100%;
    }
    @media(max-width:640px){
      padding-left:30px!important;
    }
    h2 {
      color:white;
    }
  }//page1-text-block
  .page1-sideline-block {
   display:flex;
    flex-direction:column;
    justify-content:center;
    width:56px;
    padding:0;
    padding-left:0;
    padding-right:0;
    margin-right:120px;
    position:relative;
    &:before {
      content:"";
      opacity:0;
      height:5%;
      width:1px;
      background:black;
      position:absolute;
      top:0;
      left:50%;
      transition:2s ease-out;
    }
    &.inview {
      &:before {
        height:50%;
        opacity:1;
      }
    }
    @media(max-width:1000px){
      margin-right:0px;
    }
    @media(max-width:640px){
      display:none;
    }
    .sqs-block-content {
      position:relative;
      transform:rotate(-90deg);
        p {
          opacity:0;
          white-space: nowrap!important;
          position:absolute;
          top:50%;
    transform:translateY(-50%) translateX(100%);
          text-align:center;
          font-weight:bold;
          background:white;
          color:black;
          padding-right:5px;
          transition:1s;
          transition-delay:500ms ease-out;
          &.inview {
            transform:translateY(-50%) translateX(0);
            opacity:1;
          }
          }
    }
  }//page1-sideline-block
  .page1-gallery-block{
    padding-bottom:0!important;
    display:inline-block;
    position:absolute;
    bottom:-150px;
    left:45%;
    width:40%;
   // height:70%;
    @media(max-width:1000px){
      height:100%;
      box-sizing:border-box;
      position:relative;
      left:0;
      width:100%;
      padding:0;
      bottom:0;
    }
    .slide-wrapper {
      transition:100ms ease-in-out;
    }
    .sqs-gallery {
      height:100%;
      background:white;
    }
    img {
      
    }
    .meta {
      background:none!important;
      position:absolute;
      width:90%!important;
      color:black;
      @media(max-width:1000px){
        display:initial!important;
        overflow-y:initial!important;
        width:70%;
      }
      .meta-inside {
        display:block;
        width:100%;
        bottom:30px;
        position:absolute;
        padding:0;
        height:100%;
        
        @media(max-width:1000px){
          bottom:-100px;
          width:70%;
        }
         @media(max-width:640px){
          bottom:-190px!important;
          width:100%;
        }
        .meta-title {
          color:black;
          font-size:2.5em;
        }
        .meta-description {
          p {
            color:black;
          }
        }
      }
    }
    .slide {
     overflow:hidden;
      width:100%;
      height:100%;
      img {
        
      }
    } 
    .sqs-active-slide {
      img {
        padding-left:0px;
      }
    }
    .sqs-gallery-thumbnails {
      overflow:visible;
      z-index:999;
      top:-80px;
      height:100%!important;
      @media(max-width:1000px){
       bottom:-60px;
       position:relative;
        top:initial;
      }
      .sqs-wrapper {
        left:0!important;
        width:100%!important;
        .indicator-line {
          opacity:1;
          height:100%;
          &:before {
           opacity:0;
            transition:300ms;
          }
          	.indicator-wrapper {
          	display:inline-block;
            margin-right:12px;
            position:relative;
              border:1px solid white;
              transition:300ms;
              .indicator {
                position:relative;
            	background:black;
            	width:5px;
            	height:5px;
            	margin:5px;
          		}//indicator
        	}
        }
        
        
        .sqs-active-slide {
            margin-top:0px;
            .indicator-wrapper {
              transition:300ms;
              border:1px solid black;
              
            }
          &.indicator-line {
            &:before {
            opacity:1;  
            content:"";
            background:black;
            width:1px;
            display:inline-block;
            height:60px;
            position:absolute;
            left:8px;
            top:-60px;
            transition:300ms;
          }
          	}
          }
      }//sqs-wrapper
    }//sqs-gallery-thumbnails
    .sqs-gallery-meta-container {
      .sqs-gallery-controls {
        .previous,.next {
          text-align:center;
          bottom:-75px!important;
          top:initial!important;
          background:black;
          width:55px;
          height:55px;
          line-height:55px;
          &:before {
            display:none;
            font-size:12px;
            font-weight:bold;
          }
        }
        .next {
          overflow:hidden;
          right:initial;
          left:75px;
          .control-original,.control-hover {
            transition:0ms;
            display:inline-block;
            &:before {
              font-family: 'squarespace-ui-font';
    font-style: normal;
    speak: none;
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
    content: "\E02D";
    text-align: center;
    display: inline;
    vertical-align: middle;
              position:absolute;
              top:50%;
              left:50%;
              transform:translateY(-50%)translateX(-50%); 
            }
          }
           .control-hover {
             
              &:before {  transform:translateY(-50%)translateX(-50px); 
              }//control-hover::before
            }//control-hover
          &:after {
          content:"";
          width:1px;
          height:45px;
          top:50%;
      transform:translateY(-50%);
          background:white;
          position:absolute;
          z-index:999;
          left:0;
        }
          
          }//next
        .next {
            &:hover {
              .control-original {
                &:before {
                  transform:translateY(-50%)translateX(35px);
                 transition:300ms ease-out;
                }
              }
              .control-hover {
                &:before {
                  transform:translateY(-50%)translateX(-7px);
                  transition:300ms ease-out;
                }
              }
            }
          }
        .previous {
          overflow:visible;
          .control-original,.control-hover {
            transition:0ms;
            display:inline-block;
            &:before {
              font-family: 'squarespace-ui-font';
    font-style: normal;
    speak: none;
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
    content: "\E02C";
    text-align: center;
    display: inline;
    vertical-align: middle;
              position:absolute;
              top:50%;
              left:50%;
              transform:translateY(-50%)translateX(-50%);
              
            }
          }
          .control-hover {
              &:before{
     transform:translateY(-50%)translateX(35px);
              }//control-hover::before
           }//control-hover
        }//previous
        .previous {
          &:hover {
            .control-original {
              &:before{  transform:translateY(-50%)translateX(-50px);
              transition:300ms ease-in;
            	}
            }
            .control-hover {
              &:before {
                transform:translateY(-50%)translateX(-7px);
              transition:300ms ease-in;
              }//control-hover::before
            }//control-hover
          }
        }
        @media(max-width:1000px){
          display:none;
        }
      }//sqs-gallery-controls
    }
  }//page1-gallery-block
}//page1-blocks-container

.sqs-block.gallery-block.sqs-block-gallery.page1-gallery-block {
  padding-bottom:0!important;
}

//PAGE2
#page2-section {
  .index-section-wrapper {
    margin-bottom:35px;
    .sqs-row {
      margin-left:0px!important;
      margin-right:0px!important
    }
    .content {
      max-width:1400px;
      margin:auto;
      padding:0;
    }//.content
  }//.index-section-wrapper
}//#page2-section
.page2-blocks-container {
  margin:0 auto;
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
  //justify-content:space-between;
  @media(max-width:850px){
    //flex-direction:column;
  }
  .page2-sideline-block{
    display:flex;
    flex-direction:column;
    justify-content:center;
    width:56px;
    padding:0;
    padding-left:0;
    padding-right:0;
    position:relative;
    &:before {
      content:"";
      opacity:0;
      height:5%;
      width:1px;
      background:black;
      position:absolute;
      top:0;
      left:50%;
      transition:2s;
    }
    &.inview {
      &:before {
        height:50%;
        opacity:1;
      }
    }
    @media(max-width:640px){
      display:none;
    }
    .sqs-block-content {
      position:relative;
      transform:rotate(-90deg);
        p {
          opacity:0;
          white-space: nowrap!important;
          position:absolute;
          top:50%;
          
   transform:translateY(-50%) translateX(100%);
          text-align:center;
          font-weight:bold;
          background:white;
          color:black;
          padding-right:5px;
          transition:1s;
          transition-delay:500ms;
          &.inview {
            transform:translateY(-50%) translateX(0);
            opacity:1;
          }
          }
    }
  }//page2-sideline-block
  .page2-image-contact-wrapper {
    align-self:flex-start;
    width:40%;
    @media(max-width:850px){
      width:100%;
    }
    .page2-contact-text-block {
      padding:100px;
      color:black;
      @media(max-width:850px){
        display:none;
      }
    }
  }//page2-image-contact-wrapper
  .page2-image-text-wrapper {
    display:flex;
    flex-direction:column;
    width:45%;
    position:relative;
    top:-100px;
    @media(max-width:850px){
      display:none;
    }
    .page2-right-image-block {
      padding-left:15%;
      padding-right:25%;
      @media(max-width:900px){
        
      }
    }
    .page2-right-text-block {
      margin-top:80px;
      padding-left:15%;
      padding-right:25%;
      color:black;
      
      @media(max-width:900px){
        padding-left:50px;
        padding-right:0px;
      }
      h2 {
        font-size:2.5em;
      }
    }//page2-right-text-block
    
  }//page2-image-text-wrapper
}//page2-blocks-container

//page3
#page3-section {
  .index-section-wrapper {
    margin-bottom:35px;
    .sqs-row {
      margin-left:0px!important;
      margin-right:0px!important
    }
    .content {
      max-width:1400px;
      margin:auto;
      padding:0;
    }//.content
  }//.index-section-wrapper
}//#page3-section
.page3-blocks-container {
  position:relative;
  display:flex;
  justify-content:center;
   .page3-sideline-text-block {
   	display:flex;
    flex-direction:column;
    justify-content:center;
    width:56px;
    padding:0;
    padding-left:0;
    padding-right:0;
    margin-right:120px;
     margin-top:17px!important;
    position:relative;
    &:before {
      content:"";
      opacity:0;
      height:5%;
      width:1px;
      background:black;
      position:absolute;
      top:0;
      left:50%;
      transition:2s;
    }
     &.inview {
      &:before {
        height:50%;
        opacity:1;
      }
    }
    @media(max-width:1000px){
      margin-right:0px;
    }
    @media(max-width:640px){
      display:none;
    }
    .sqs-block-content {
      position:relative;
      transform:rotate(-90deg);
        p {
          opacity:0;
          white-space: nowrap!important;
          position:absolute;
          top:50%;
     transform:translateY(-50%) translateX(100%);
          text-align:center;
          font-weight:bold;
          background:white;
          color:black;
          padding-right:5px;
          transition:1s;
          transition-delay:500ms;
          &.inview {
            transform:translateY(-50%) translateX(0);
            opacity:1;
          }
          }
    }
  }//page3-sideline-text-block
  .page3-text-image-wrapper {
    overflow:hidden;
    display:flex;
    align-items:flex-start;
    @media(max-width:850px){
      flex-direction:column;
    }
    .page3-text-block{
      //order:1
      width:30%;
      position:relative;
      left:150px;
      overflow:visible;
      background:white;
      padding:8%!important;
      z-index:101;
      @media(max-width:850px){
      width:98%;
      left:0;
      padding:17px!important;
        }
      .sqs-block-content {
          color:black;
        }
    }//page3-text-block
    .page3-image-block {
      width:60%;
      z-index:100;
      @media(max-width:850px){
      width:99%;
      padding:0;
    }
    }
  }
}//page3-blocks-container

//Page4
#block-yui_3_17_2_1_1538732384283_6048 {
  padding-top:100px;
  @media(max-width:640px){
    padding:0;
  }
  .newsletter-form-wrapper {
    background:none;
    width:350px;
    margin:0 auto;
    .newsletter-form-body {
      display:flex;
      flex-direction:column;
      .email {
        width:100%;
        #email-yui_3_17_2_1_1538732384283_6053-field {
          padding: 0 0 5px 0;
          border:0;
          border-bottom:1px solid black;
          text-transform:lowercase;
        }
      }//email
      .newsletter-form-button {
        display:flex;
        align-items:center;
        border:none!important;
        box-shadow:none!important;
        margin-right:0!important;
        margin:0 auto!important;
        &:hover {
          color:black;
          background:none;
          &:after {
            transform:translateX(7px);
          }
        }
        &:after {
          font-size:22px;
          font-weight:bold;
          content:"";
          margin:10px;
          vertical-align:center;
          display:inline-block;
          width:10px;
          height:12px;
          transition:300ms ease-in-out; 
          background:url(https://static1.squarespace.com/static/5b66f7b63917eeea09bd10f5/t/5bb74ff91905f440e961900a/1538740217690/chevron-right.png) no-repeat center;
          
          
        }
      }
      .newsletter-form-button-label {
        text-transform:none;
        font-weight:bold;
        
      }
    }//newsletter-form-body
  }
}

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

Loden Properties