SlideShow using javascript and css .
Created
September 19, 2023 19:29
-
-
Save s3nh/5c862009fdcc6af059ca738a884459ef to your computer and use it in GitHub Desktop.
SlideShow Animated
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body | |
| section#js-header.slideshow | |
| .slideshow__slide.js-slider-home-slide.is-current(data-slide="1") | |
| .slideshow__slide-background-parallax.background-absolute.js-parallax(data-speed="-1" data-position="top" data-target="#js-header") | |
| .slideshow__slide-background-load-wrap.background-absolute | |
| .slideshow__slide-background-load.background-absolute | |
| .slideshow__slide-background-wrap.background-absolute | |
| .slideshow__slide-background.background-absolute | |
| .slideshow__slide-image-wrap.background-absolute | |
| .slideshow__slide-image.background-absolute(style=`background-image:url("https://images.pexels.com/photos/227675/pexels-photo-227675.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260")`) | |
| .side-nav.vh-for-mobile(data-view="cover") | |
| ul | |
| li.label(data-view="cover") Works | |
| .slideshow__slide-caption | |
| .slideshow__slide-caption-text | |
| .container.js-parallax(data-speed="2" data-position="top" data-target="#js-header") | |
| h1.slideshow__slide-caption-title Omnes enim iucundum | |
| p.slideshow__slide-caption-content | |
| | Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus odio sed leo fermentum, sed faucibus massa eleifend. Pellentesque ut auctor tellus. Vivamus eget vestibulum urna, sit amet aliquet augue. | |
| a.slideshow__slide-caption-subtitle.-load.o-hsub.-link(href="#") | |
| span.slideshow__slide-caption-subtitle-label See how | |
| .slideshow__slide.js-slider-home-slide.is-next(data-slide="2") | |
| .slideshow__slide-background-parallax.background-absolute.js-parallax(data-speed="-1" data-position="top" data-target="#js-header") | |
| .slideshow__slide-background-load-wrap.background-absolute | |
| .slideshow__slide-background-load.background-absolute | |
| .slideshow__slide-background-wrap.background-absolute | |
| .slideshow__slide-background.background-absolute | |
| .slideshow__slide-image-wrap.background-absolute | |
| .slideshow__slide-image.background-absolute(style="background-image: url('https://images.pexels.com/photos/415574/pexels-photo-415574.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');") | |
| .side-nav.vh-for-mobile(data-view="cover") | |
| ul | |
| li.label(data-view="cover") Works | |
| .slideshow__slide-caption | |
| .slideshow__slide-caption-text | |
| .container.js-parallax(data-speed="2" data-position="top" data-target="#js-header") | |
| h1.slideshow__slide-caption-title Fortasse id optimum | |
| p.slideshow__slide-caption-content | |
| | Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus odio sed leo fermentum, sed faucibus massa eleifend. Pellentesque ut auctor tellus. Vivamus eget vestibulum urna, sit amet aliquet augue. | |
| a.slideshow__slide-caption-subtitle.-load.o-hsub.-link(href="#") | |
| span.slideshow__slide-caption-subtitle-label Learn more about | |
| .slideshow__slide.js-slider-home-slide.is-prev(data-slide="3") | |
| .slideshow__slide-background-parallax.background-absolute.js-parallax(data-speed="-1" data-position="top" data-target="#js-header") | |
| .slideshow__slide-background-load-wrap.background-absolute | |
| .slideshow__slide-background-load.background-absolute | |
| .slideshow__slide-background-wrap.background-absolute | |
| .slideshow__slide-background.background-absolute | |
| .slideshow__slide-image-wrap.background-absolute | |
| .slideshow__slide-image.background-absolute(style="background-image: url('https://images.pexels.com/photos/256150/pexels-photo-256150.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');") | |
| .side-nav.vh-for-mobile(data-view="cover") | |
| ul | |
| li.label(data-view="cover") Works | |
| .slideshow__slide-caption | |
| .slideshow__slide-caption-text | |
| .container.js-parallax(data-speed="2" data-position="top" data-target="#js-header") | |
| h1.slideshow__slide-caption-title Solum praeterea formosum | |
| p.slideshow__slide-caption-content | |
| | Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus odio sed leo fermentum, sed faucibus massa eleifend. Pellentesque ut auctor tellus. Vivamus eget vestibulum urna, sit amet aliquet augue. | |
| a.slideshow__slide-caption-subtitle.-load.o-hsub.-link(href="#") | |
| span.slideshow__slide-caption-subtitle-label View More | |
| .c-header-home_footer | |
| .o-container | |
| .c-header-home_controls.-nomobile.o-button-group | |
| .js-parallax.is-inview(data-speed="1" data-position="top" data-target="#js-header") | |
| button.js-slider-home-next.floating-btn.ripple(type="button") | |
| svg.o-button_icon(role="img") | |
| use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-next") | |
| button.js-slider-home-prev.floating-btn.ripple(type="button") | |
| svg.o-button_icon(role="img") | |
| use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-prev") | |
| div | |
| svg(xmlns="http://www.w3.org/2000/svg") | |
| symbol#arrow-prev(viewbox="0 0 492 492" xmlns="http://www.w3.org/2000/svg") | |
| path(d="M198.608 246.104L382.664 62.04c5.068-5.056 7.856-11.816 7.856-19.024 0-7.212-2.788-13.968-7.856-19.032l-16.128-16.12C361.476 2.792 354.712 0 347.504 0s-13.964 2.792-19.028 7.864L109.328 227.008c-5.084 5.08-7.868 11.868-7.848 19.084-.02 7.248 2.76 14.028 7.848 19.112l218.944 218.932c5.064 5.072 11.82 7.864 19.032 7.864 7.208 0 13.964-2.792 19.032-7.864l16.124-16.12c10.492-10.492 10.492-27.572 0-38.06L198.608 246.104z") | |
| symbol#arrow-next(viewbox="0 0 492.004 492.004" xmlns="http://www.w3.org/2000/svg") | |
| path(d="M382.678 226.804L163.73 7.86C158.666 2.792 151.906 0 144.698 0s-13.968 2.792-19.032 7.86l-16.124 16.12c-10.492 10.504-10.492 27.576 0 38.064L293.398 245.9l-184.06 184.06c-5.064 5.068-7.86 11.824-7.86 19.028 0 7.212 2.796 13.968 7.86 19.04l16.124 16.116c5.068 5.068 11.824 7.86 19.032 7.86s13.968-2.792 19.032-7.86L382.678 265c5.076-5.084 7.864-11.872 7.848-19.088.016-7.244-2.772-14.028-7.848-19.108z") |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
| function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
| var $window = $(window); | |
| var $body = $('body'); | |
| var Slideshow = function () { | |
| function Slideshow() { | |
| var _this = this; | |
| var userOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; | |
| _classCallCheck(this, Slideshow); | |
| var defaultOptions = { | |
| $el: $('.slideshow'), | |
| showArrows: false, | |
| showPagination: true, | |
| duration: 10000, | |
| autoplay: true | |
| }; | |
| var options = Object.assign({}, defaultOptions, userOptions); | |
| this.$el = options.$el; | |
| this.maxSlide = this.$el.find($('.js-slider-home-slide')).length; | |
| this.showArrows = this.maxSlide > 1 ? options.showArrows : false; | |
| this.showPagination = options.showPagination; | |
| this.currentSlide = 1; | |
| this.isAnimating = false; | |
| this.animationDuration = 1200; | |
| this.autoplaySpeed = options.duration; | |
| this.interval; | |
| this.$controls = this.$el.find('.js-slider-home-button'); | |
| this.autoplay = this.maxSlide > 1 ? options.autoplay : false; | |
| this.$el.on('click', '.js-slider-home-next', function (event) { | |
| return _this.nextSlide(); | |
| }); | |
| this.$el.on('click', '.js-slider-home-prev', function (event) { | |
| return _this.prevSlide(); | |
| }); | |
| this.$el.on('click', '.js-pagination-item', function (event) { | |
| if (!_this.isAnimating) { | |
| _this.preventClick(); | |
| _this.goToSlide(event.target.dataset.slide); | |
| } | |
| }); | |
| this.init(); | |
| } | |
| _createClass(Slideshow, [{ | |
| key: 'init', | |
| value: function init() { | |
| this.goToSlide(1); | |
| /* if (this.showArrows) { | |
| this.$el.append(`<div class="c-header-home_footer"> | |
| <div class="o-container"> | |
| <div class="c-header-home_controls -nomobile o-button-group"> | |
| <div class="js-parallax is-inview" data-speed="1" data-position="top" data-target="#js-header"> | |
| <button class="o-button -white -square -left js-slider-home-button js-slider-home-prev" type="button"> | |
| <span class="o-button_label"> | |
| <svg class="o-button_icon" role="img"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-prev"></use></svg> | |
| </span> | |
| </button> | |
| <button class="o-button -white -square js-slider-home-button js-slider-home-next" type="button"> | |
| <span class="o-button_label"> | |
| <svg class="o-button_icon" role="img"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-next"></use></svg> | |
| </span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div>`); | |
| } | |
| */ | |
| if (this.autoplay) { | |
| this.startAutoplay(); | |
| } | |
| if (this.showPagination) { | |
| var paginationNumber = this.maxSlide; | |
| var pagination = '<div class="pagination"><div class="container">'; | |
| for (var i = 0; i < this.maxSlide; i++) { | |
| var item = '<span class="pagination__item js-pagination-item ' + (i === 0 ? 'is-current' : '') + '" data-slide=' + (i + 1) + '>' + (i + 1) + '</span>'; | |
| pagination = pagination + item; | |
| } | |
| pagination = pagination + '</div></div>'; | |
| this.$el.append(pagination); | |
| } | |
| } | |
| }, { | |
| key: 'preventClick', | |
| value: function preventClick() { | |
| var _this2 = this; | |
| this.isAnimating = true; | |
| this.$controls.prop('disabled', true); | |
| clearInterval(this.interval); | |
| setTimeout(function () { | |
| _this2.isAnimating = false; | |
| _this2.$controls.prop('disabled', false); | |
| if (_this2.autoplay) { | |
| _this2.startAutoplay(); | |
| } | |
| }, this.animationDuration); | |
| } | |
| }, { | |
| key: 'goToSlide', | |
| value: function goToSlide(index) { | |
| this.currentSlide = parseInt(index); | |
| if (this.currentSlide > this.maxSlide) { | |
| this.currentSlide = 1; | |
| } | |
| if (this.currentSlide === 0) { | |
| this.currentSlide = this.maxSlide; | |
| } | |
| var newCurrent = this.$el.find('.js-slider-home-slide[data-slide="' + this.currentSlide + '"]'); | |
| var newPrev = this.currentSlide === 1 ? this.$el.find('.js-slider-home-slide').last() : newCurrent.prev('.js-slider-home-slide'); | |
| var newNext = this.currentSlide === this.maxSlide ? this.$el.find('.js-slider-home-slide').first() : newCurrent.next('.js-slider-home-slide'); | |
| this.$el.find('.js-slider-home-slide').removeClass('is-prev is-next is-current'); | |
| this.$el.find('.js-pagination-item').removeClass('is-current'); | |
| if (this.maxSlide > 1) { | |
| newPrev.addClass('is-prev'); | |
| newNext.addClass('is-next'); | |
| } | |
| newCurrent.addClass('is-current'); | |
| this.$el.find('.js-pagination-item[data-slide="' + this.currentSlide + '"]').addClass('is-current'); | |
| } | |
| }, { | |
| key: 'nextSlide', | |
| value: function nextSlide() { | |
| this.preventClick(); | |
| this.goToSlide(this.currentSlide + 1); | |
| } | |
| }, { | |
| key: 'prevSlide', | |
| value: function prevSlide() { | |
| this.preventClick(); | |
| this.goToSlide(this.currentSlide - 1); | |
| } | |
| }, { | |
| key: 'startAutoplay', | |
| value: function startAutoplay() { | |
| var _this3 = this; | |
| this.interval = setInterval(function () { | |
| if (!_this3.isAnimating) { | |
| _this3.nextSlide(); | |
| } | |
| }, this.autoplaySpeed); | |
| } | |
| }, { | |
| key: 'destroy', | |
| value: function destroy() { | |
| this.$el.off(); | |
| } | |
| }]); | |
| return Slideshow; | |
| }(); | |
| (function () { | |
| var loaded = false; | |
| var maxLoad = 3000; | |
| function load() { | |
| var options = { | |
| showPagination: true | |
| }; | |
| var slideShow = new Slideshow(options); | |
| } | |
| function addLoadClass() { | |
| $body.addClass('is-loaded'); | |
| setTimeout(function () { | |
| $body.addClass('is-animated'); | |
| }, 600); | |
| } | |
| $window.on('load', function () { | |
| if (!loaded) { | |
| loaded = true; | |
| load(); | |
| } | |
| }); | |
| setTimeout(function () { | |
| if (!loaded) { | |
| loaded = true; | |
| load(); | |
| } | |
| }, maxLoad); | |
| addLoadClass(); | |
| })(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .pagination { | |
| position: absolute !important; | |
| width: 100%; | |
| text-align: center; | |
| right: 0; | |
| padding: 0 !important; | |
| bottom: 30px; | |
| z-index: 999; | |
| } | |
| .pagination__item { | |
| cursor: pointer; | |
| display: inline-block; | |
| white-space: nowrap; | |
| font-size: 0; | |
| width: 10px; | |
| height: 10px; | |
| border: 1px solid #fff; | |
| margin: 0 5px; | |
| transition: .2s ease-in-out; | |
| &.is-current, | |
| &:hover { | |
| background-color: #fff; | |
| } | |
| } | |
| .container { | |
| position: relative; | |
| margin: 0 auto; | |
| } | |
| @media (max-width: 699px) { | |
| .container { | |
| padding-right: 40px; | |
| padding-left: 40px; | |
| } | |
| } | |
| @media (min-width: 700px) and (max-width: 1599px) { | |
| .container { | |
| padding-right: 7.5rem; | |
| padding-left: 7.5rem; | |
| max-width: 140rem; | |
| } | |
| } | |
| @media (min-width: 1600px) { | |
| .container { | |
| padding-right: 9.5625rem; | |
| padding-left: 9.5625rem; | |
| max-width: 144.125rem; | |
| } | |
| } | |
| .background-absolute { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| background-position: center; | |
| background-size: cover; | |
| } | |
| .slideshow { | |
| position: relative; | |
| color: #fff; | |
| overflow: hidden; | |
| min-height: 600px; | |
| height: 100vh; | |
| h3, | |
| h1, | |
| h2 { | |
| /*font-family: 'Montserrat', sans-serif;*/ | |
| font-family: 'Lato', sans-serif; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5em; | |
| line-height: 2em; | |
| } | |
| h1 { | |
| font-size: 44px; | |
| font-weight: 800; | |
| } | |
| } | |
| .slideshow__slide { | |
| visibility: hidden; | |
| transition: visibility 0s 1.7s; | |
| &.is-current { | |
| visibility: visible; | |
| transition-delay: 0s; | |
| } | |
| } | |
| @media (max-width: 699px) { | |
| .slideshow .slideshow__slide { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| } | |
| } | |
| @media (min-width: 700px) { | |
| .slideshow .slideshow__slide { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| } | |
| } | |
| .slideshow__slide-background-load-wrap { | |
| transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1); | |
| transform: translate3d(0, 100%, 0); | |
| overflow: hidden; | |
| } | |
| .is-animated .slideshow__slide-background-load-wrap { | |
| transform: translate3d(0, 0, 0); | |
| transition-delay: 0s; | |
| } | |
| .slideshow__slide { | |
| &.is-prev .slideshow__slide-background-parallax, | |
| &.is-next .slideshow__slide-background-parallax, | |
| &.is-prev-section .slideshow__slide-background-parallax, | |
| &.is-next-section .slideshow__slide-background-parallax { | |
| transform: none !important; | |
| } | |
| } | |
| .slideshow__slide-background-load { | |
| transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1); | |
| transform: translate3d(0, -50%, 0); | |
| } | |
| .is-animated .slideshow__slide-background-load { | |
| transform: translate3d(0, 0, 0); | |
| } | |
| .slideshow__slide-background-wrap { | |
| transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.5s; | |
| transform: translate3d(0, 0, 0); | |
| } | |
| .slideshow__slide { | |
| &.is-prev .slideshow__slide-background-wrap { | |
| transform: translate3d(0, -100%, 0); | |
| } | |
| &.is-next .slideshow__slide-background-wrap { | |
| transform: translate3d(0, 100%, 0); | |
| } | |
| &.is-prev-section .slideshow__slide-background-wrap { | |
| transform: translate3d(0, -100%, 0); | |
| transition: none; | |
| } | |
| &.is-next-section .slideshow__slide-background-wrap { | |
| transform: translate3d(0, 100%, 0); | |
| transition: none; | |
| } | |
| } | |
| .slideshow__slide-background { | |
| transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 1.5s; | |
| transform: scale(1); | |
| overflow: hidden; | |
| } | |
| .slideshow__slide { | |
| &.is-prev .slideshow__slide-background, | |
| &.is-next .slideshow__slide-background { | |
| transform: scale(0.5); | |
| transition-delay: 0s; | |
| } | |
| &.is-prev-section .slideshow__slide-background, | |
| &.is-next-section .slideshow__slide-background { | |
| transform: scale(0.5); | |
| transition-delay: 0s; | |
| transition: none; | |
| } | |
| } | |
| .slideshow__slide-image-wrap { | |
| transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.6s; | |
| transform: translate3d(0, 0, 0); | |
| } | |
| .slideshow__slide.is-prev .slideshow__slide-image-wrap { | |
| transform: translate3d(0, 50%, 0); | |
| } | |
| .slideshow__slide-image { | |
| transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 1.5s; | |
| transform: scale(1); | |
| } | |
| .slideshow__slide { | |
| &.is-prev .slideshow__slide-image, | |
| &.is-next .slideshow__slide-image { | |
| transform: scale(1.25); | |
| transition-delay: 0s; | |
| } | |
| &.is-prev-section .slideshow__slide-image, | |
| &.is-next-section .slideshow__slide-image { | |
| transform: scale(1.25); | |
| transition-delay: 0s; | |
| transition: none; | |
| } | |
| } | |
| .slideshow__slide-image { | |
| &::before, | |
| &::after { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| opacity: 0.35; | |
| } | |
| &::before { | |
| background-color: rgba(255, 255, 255, 0.26); | |
| } | |
| &::after { | |
| background: linear-gradient(to top, transparent 0%, #fff 20%); | |
| } | |
| } | |
| .slideshow__slide { | |
| &.is-prev .slideshow_container, | |
| &.is-next .slideshow_container, | |
| &.is-prev-section .slideshow_container, | |
| &.is-next-section .slideshow_container { | |
| transform: none !important; | |
| } | |
| } | |
| .slideshow__slide-caption-text { | |
| position: relative; | |
| height: 100%; | |
| padding-top: 10%; | |
| transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.4s; | |
| transform: translate3d(0, 0, 0); | |
| } | |
| .slideshow__slide { | |
| &.is-prev .slideshow__slide-caption-text { | |
| transform: translate3d(-100%, -50%, 0); | |
| } | |
| &.is-next .slideshow__slide-caption-text { | |
| transform: translate3d(-100%, 10%, 0); | |
| } | |
| &.is-prev-section .slideshow__slide-caption-text { | |
| transform: translate3d(-100%, -50%, 0); | |
| transition: none; | |
| } | |
| &.is-next-section .slideshow__slide-caption-text { | |
| transform: translate3d(-100%, 10%, 0); | |
| transition: none; | |
| } | |
| } | |
| .slideshow__slide-caption { | |
| position: relative; | |
| height: 100%; | |
| transform: translate3d(-100%, 10%, 0); | |
| transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; | |
| } | |
| .is-animated .slideshow__slide-caption { | |
| transform: translate3d(0, 0, 0); | |
| } | |
| .slideshow__slide-caption-title { | |
| line-height: 1; | |
| &.-full { | |
| width: 100%; | |
| } | |
| } | |
| @media (max-height: 500px) { | |
| .slideshow__slide-caption-title { | |
| margin-bottom: 0 !important; | |
| } | |
| } | |
| @media (max-width: 699px) { | |
| .slideshow__slide-caption-title { | |
| font-size: 40px; | |
| margin-bottom: 150px; | |
| } | |
| .slideshow.-full .slideshow__slide-caption-title { | |
| margin-bottom: 30px; | |
| } | |
| } | |
| @media (min-width: 700px) { | |
| .slideshow__slide-caption-title { | |
| font-size: 5.625rem; | |
| margin-bottom: 1.25rem; | |
| } | |
| } | |
| @media (min-width: 700px) and (max-width: 749px) { | |
| .slideshow__slide-caption-title { | |
| font-size: 4.375rem; | |
| } | |
| } | |
| @media (min-width: 1600px) { | |
| .slideshow__slide-caption-title { | |
| font-size: 6.25rem; | |
| } | |
| } | |
| .slideshow__slide-caption-subtitle { | |
| display: inline-block; | |
| padding: 1.875rem 0; | |
| &.-load { | |
| transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.4s; | |
| transform: translate3d(0, 3.75rem, 0); | |
| } | |
| } | |
| .is-animated .slideshow__slide-caption-subtitle.-load { | |
| transform: translate3d(0, 0, 0); | |
| } | |
| body { | |
| &[data-route-option="prev-section"] .slideshow__slide-caption-subtitle.-load, | |
| &[data-route-option="next-section"] .slideshow__slide-caption-subtitle.-load { | |
| transform: translate3d(0, 0, 0); | |
| } | |
| } | |
| .slideshow__slide-caption-subtitle-label { | |
| transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| transform: translateZ(0); | |
| display: inline-block; | |
| } | |
| .o-hsub.-link:hover .slideshow__slide-caption-subtitle-label, | |
| .o-hsub-wrap:hover .slideshow__slide-caption-subtitle-label { | |
| transform: translateX(20px); | |
| } | |
| /* OLD */ | |
| .c-header-home_heading { | |
| line-height: 1; | |
| &.-full { | |
| width: 100%; | |
| } | |
| } | |
| @media (max-height: 500px) { | |
| .c-header-home_heading { | |
| margin-bottom: 0 !important; | |
| } | |
| } | |
| @media (max-width: 699px) { | |
| .c-header-home_heading { | |
| font-size: 40px; | |
| margin-bottom: 150px; | |
| } | |
| .c-header-home.-full .c-header-home_heading { | |
| margin-bottom: 30px; | |
| } | |
| } | |
| @media (min-width: 700px) { | |
| .c-header-home_heading { | |
| font-size: 5.625rem; | |
| margin-bottom: 1.25rem; | |
| } | |
| } | |
| @media (min-width: 700px) and (max-width: 749px) { | |
| .c-header-home_heading { | |
| font-size: 4.375rem; | |
| } | |
| } | |
| @media (min-width: 1600px) { | |
| .c-header-home_heading { | |
| font-size: 6.25rem; | |
| } | |
| } | |
| .c-header-home_subheading { | |
| display: inline-block; | |
| padding: 1.875rem 0; | |
| &.-load { | |
| transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.4s; | |
| transform: translate3d(0, 3.75rem, 0); | |
| } | |
| } | |
| .is-loaded .c-header-home_subheading.-load { | |
| transform: translate3d(0, 0, 0); | |
| } | |
| body { | |
| &[data-route-option="prev-section"] .c-header-home_subheading.-load, | |
| &[data-route-option="next-section"] .c-header-home_subheading.-load { | |
| transform: translate3d(0, 0, 0); | |
| } | |
| } | |
| .c-header-home_footer { | |
| z-index: 3; | |
| position: absolute; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| } | |
| .c-header-home_controls, | |
| .c-header-home_buttons { | |
| margin-left: 0; | |
| letter-spacing: normal; | |
| font-size: 0; | |
| transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); | |
| transform: translate3d(0, 100%, 0); | |
| } | |
| @media (max-width: 699px) { | |
| .c-header-home_controls, | |
| .c-header-home_buttons { | |
| padding-bottom: 40px; | |
| } | |
| } | |
| @media (min-width: 700px) { | |
| .c-header-home_controls, | |
| .c-header-home_buttons { | |
| padding-bottom: 5.625rem; | |
| } | |
| } | |
| @media (min-width: 700px) and (max-width: 749px) { | |
| .c-header-home_controls, | |
| .c-header-home_buttons { | |
| padding-bottom: 3.75rem; | |
| } | |
| } | |
| .is-loaded { | |
| .c-header-home_controls, | |
| .c-header-home_buttons { | |
| transform: translate3d(0, 0, 0); | |
| } | |
| } | |
| body { | |
| &[data-route-option="prev-section"] { | |
| .c-header-home_controls, | |
| .c-header-home_buttons { | |
| transform: translate3d(0, 0, 0); | |
| } | |
| } | |
| &[data-route-option="next-section"] { | |
| .c-header-home_controls, | |
| .c-header-home_buttons { | |
| transform: translate3d(0, 0, 0); | |
| } | |
| } | |
| } | |
| .c-header-home_controls { | |
| transition-delay: 0.65s; | |
| } | |
| @media (min-width: 700px) { | |
| .c-header-home_controls { | |
| float: left; | |
| } | |
| } | |
| .c-header-home_buttons { | |
| transition-delay: 0.75s; | |
| } | |
| @media (max-width: 699px) { | |
| .c-header-home_buttons { | |
| margin-left: -20px; | |
| margin-right: -20px; | |
| } | |
| } | |
| @media (min-width: 1000px) { | |
| .c-header-home_buttons { | |
| float: right; | |
| } | |
| } | |
| @media (max-width: 699px) { | |
| .c-header-home_button { | |
| width: 50% !important; | |
| } | |
| } | |
| @media (min-width: 700px) { | |
| .c-header-home_button { | |
| width: 15.625rem; | |
| } | |
| } | |
| button, | |
| .c-header-filters_button, | |
| .o-button { | |
| display: inline-block; | |
| overflow: visible; | |
| margin: 0; | |
| padding: 0; | |
| outline: 0; | |
| border: 0; | |
| background: none; | |
| color: inherit; | |
| vertical-align: middle; | |
| text-align: center; | |
| text-decoration: none; | |
| text-transform: none; | |
| font: inherit; | |
| line-height: normal; | |
| cursor: pointer; | |
| user-select: none; | |
| } | |
| button:hover, | |
| .c-header-filters_button:hover, | |
| .o-button:hover { | |
| text-decoration: none; | |
| } | |
| @media (min-width: 1200px) { | |
| body { | |
| height: 100%; | |
| } | |
| } | |
| @media (min-width: 1200px) { | |
| .o-scroll { | |
| height: 100%; | |
| } | |
| } | |
| ::-moz-selection { | |
| background: #0084c0; | |
| color: #fff; | |
| } | |
| img, | |
| svg { | |
| max-width: 100%; | |
| } | |
| a, | |
| .o-link { | |
| color: #1a0dab; | |
| transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| a:hover, | |
| .o-link:hover { | |
| color: #13097c; | |
| } | |
| a.-normal, | |
| .o-link.-normal { | |
| color: currentColor; | |
| text-decoration: none; | |
| } | |
| a.-normal:hover, | |
| .o-link.-normal:hover { | |
| text-decoration: underline; | |
| } | |
| a.-blue:hover, | |
| .o-link.-blue:hover { | |
| text-decoration: none; | |
| color: #0084c0; | |
| } | |
| a.-hover, | |
| .o-link.-hover { | |
| position: relative; | |
| text-decoration: none; | |
| color: #fff; | |
| } | |
| a.-hover::after, | |
| .o-link.-hover::after { | |
| content: ""; | |
| position: absolute; | |
| bottom: -1px; | |
| right: 0; | |
| left: 0; | |
| border-bottom: 1px solid; | |
| transform: scaleX(0); | |
| transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); | |
| transform-origin: center left; | |
| } | |
| a.-hover:hover::after, | |
| .o-link.-hover:hover::after { | |
| transform: scaleX(1); | |
| } | |
| p { | |
| margin: 0; | |
| } | |
| .o-wrap { | |
| overflow: hidden; | |
| } | |
| .o-page.-anim { | |
| transform: translate3d(0, 9.375rem, 0); | |
| transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .is-loaded .o-page.-anim { | |
| transform: translate3d(0, 0, 0); | |
| } | |
| .o-barba, | |
| .o-barba_container { | |
| height: 100%; | |
| } | |
| strong { | |
| font-weight: 700; | |
| } | |
| .js-parallax { | |
| transform: translateZ(0); | |
| will-change: transform; | |
| } | |
| .scroll-content { | |
| overflow: hidden; | |
| } | |
| .o-blockquote.-nomargin { | |
| margin: 0; | |
| } | |
| .o-action-link { | |
| display: block; | |
| padding-top: 12.8125rem; | |
| padding-bottom: 7.5rem; | |
| text-align: center; | |
| text-decoration: none; | |
| font-weight: 700; | |
| &:hover { | |
| color: #fff; | |
| } | |
| } | |
| @media (max-width: 699px) { | |
| .o-action-link { | |
| font-size: 40px; | |
| padding-top: 120px; | |
| } | |
| } | |
| @media (max-width: 1199px) { | |
| .o-action-link { | |
| color: #1e1e22; | |
| } | |
| } | |
| @media (min-width: 700px) { | |
| .o-action-link { | |
| font-size: 5.625rem; | |
| } | |
| } | |
| @media (min-width: 1200px) { | |
| .o-action-link { | |
| color: #fff; | |
| } | |
| } | |
| .o-action-link_label { | |
| display: inline-block; | |
| position: relative; | |
| &::after { | |
| content: ""; | |
| position: absolute; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| border-bottom: 0.1875rem solid; | |
| transform: scaleX(0); | |
| transform-origin: center left; | |
| transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| } | |
| .o-action-link:hover .o-action-link_label::after { | |
| transform: scaleX(1); | |
| } | |
| .o-h, | |
| h1, | |
| .o-h1, | |
| h2, | |
| .o-h2, | |
| h3, | |
| .o-h3, | |
| h4, | |
| .o-h4, | |
| h5, | |
| .o-h5, | |
| h6, | |
| .o-h6 { | |
| font-weight: 700; | |
| margin-top: 0; | |
| line-height: 1.1; | |
| } | |
| @media (max-width: 699px) { | |
| h1, | |
| .o-h1 { | |
| font-size: 26px; | |
| } | |
| } | |
| @media (min-width: 700px) { | |
| h1, | |
| .o-h1 { | |
| font-size: 60px; | |
| } | |
| } | |
| @media (min-width: 1600px) { | |
| h1, | |
| .o-h1 { | |
| font-size: 4.375rem; | |
| } | |
| } | |
| @media (max-width: 1599px) { | |
| h2, | |
| .o-h2 { | |
| font-size: 1.5625rem; | |
| } | |
| } | |
| @media (min-width: 1600px) { | |
| h2, | |
| .o-h2 { | |
| font-size: 2.25rem; | |
| } | |
| } | |
| h3, | |
| .o-h3 { | |
| font-size: 1.5625rem; | |
| } | |
| h4, | |
| .o-h4 { | |
| font-size: 1rem; | |
| } | |
| h5, | |
| .o-h5 { | |
| font-size: 0.8125rem; | |
| } | |
| h6, | |
| .o-h6 { | |
| font-size: 0.6875rem; | |
| } | |
| .o-hsub { | |
| font-size: 0.75rem; | |
| padding: 1.25rem 0; | |
| display: inline-block; | |
| text-transform: uppercase; | |
| letter-spacing: 0.12em; | |
| font-weight: 500; | |
| &::before { | |
| content: ""; | |
| display: inline-block; | |
| vertical-align: middle; | |
| border-bottom: 1px solid; | |
| width: 1.5rem; | |
| background-color: #1e1e22; | |
| margin-right: 1.125rem; | |
| transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| transform-origin: center left; | |
| } | |
| &.-link { | |
| color: #fff; | |
| text-decoration: none; | |
| &:hover::before { | |
| transform: scaleX(1.5); | |
| } | |
| } | |
| } | |
| .o-hsub-wrap:hover .o-hsub.-link::before { | |
| transform: scaleX(1.5); | |
| } | |
| .o-hsub { | |
| &.-link.-dark { | |
| color: #1e1e22; | |
| &:hover { | |
| color: #1e1e22; | |
| } | |
| } | |
| &.-h { | |
| vertical-align: middle; | |
| } | |
| } | |
| @media (max-width: 699px) { | |
| .o-hsub.-h { | |
| display: block; | |
| margin-top: 20px; | |
| } | |
| } | |
| @media (min-width: 700px) { | |
| .o-hsub.-h { | |
| margin-left: 2.5rem; | |
| } | |
| } | |
| .o-hsub_label { | |
| transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| transform: translateZ(0); | |
| display: inline-block; | |
| } | |
| .o-hsub.-link:hover .o-hsub_label, | |
| .o-hsub-wrap:hover .o-hsub_label { | |
| transform: translateX(20px); | |
| } | |
| .is-loaded .o-loader { | |
| visibility: hidden; | |
| transition-delay: 0.6s; | |
| } | |
| .o-container { | |
| position: relative; | |
| margin: 0 auto; | |
| } | |
| @media (max-width: 699px) { | |
| .o-container { | |
| padding-right: 40px; | |
| padding-left: 40px; | |
| &.-small { | |
| padding-right: 20px; | |
| padding-left: 20px; | |
| } | |
| } | |
| } | |
| @media (min-width: 700px) and (max-width: 1599px) { | |
| .o-container { | |
| padding-right: 7.5rem; | |
| padding-left: 7.5rem; | |
| max-width: 140rem; | |
| } | |
| } | |
| @media (min-width: 1600px) { | |
| .o-container { | |
| padding-right: 9.5625rem; | |
| padding-left: 9.5625rem; | |
| max-width: 144.125rem; | |
| } | |
| } | |
| .o-section { | |
| position: relative; | |
| &.-offset { | |
| margin-top: -9.375rem; | |
| background-color: #f6f6f6; | |
| } | |
| &.-padding { | |
| padding-top: 7.5rem; | |
| padding-bottom: 7.5rem; | |
| } | |
| &.-padding-top { | |
| padding-top: 7.5rem; | |
| } | |
| &.-left { | |
| margin-right: 15rem; | |
| } | |
| &.-right { | |
| margin-left: 15rem; | |
| } | |
| &.-left-large { | |
| margin-right: 22.5rem; | |
| } | |
| &.-right.-padding { | |
| padding-left: 9.5625rem; | |
| } | |
| } | |
| @media (max-width: 699px) { | |
| .o-section.-bottom { | |
| padding-bottom: 60px; | |
| } | |
| } | |
| @media (min-width: 700px) { | |
| .o-section.-bottom { | |
| padding-bottom: 7.5rem; | |
| } | |
| } | |
| .o-section_image { | |
| position: relative; | |
| overflow: hidden; | |
| &.-small { | |
| padding-bottom: 57.144%; | |
| } | |
| &.-large { | |
| padding-bottom: 55%; | |
| } | |
| &.-padding-left { | |
| margin-left: 7.5rem; | |
| } | |
| &.-left { | |
| margin-right: 15rem; | |
| } | |
| &.-right { | |
| margin-left: 15rem; | |
| } | |
| img { | |
| width: 100%; | |
| } | |
| } | |
| @media (max-width: 1599px) { | |
| .o-section_image.-left { | |
| margin-left: -7.5rem; | |
| } | |
| } | |
| @media (min-width: 1600px) { | |
| .o-section_image.-left { | |
| margin-left: -9.5625rem; | |
| } | |
| } | |
| @media (max-width: 1599px) { | |
| .o-section_image.-right { | |
| margin-right: -7.5rem; | |
| } | |
| } | |
| @media (min-width: 1600px) { | |
| .o-section_image.-right { | |
| margin-right: -9.5625rem; | |
| } | |
| } | |
| .o-grid { | |
| margin-left: 0; | |
| letter-spacing: normal; | |
| font-size: 0; | |
| &.-margin { | |
| margin-left: -3.75rem; | |
| } | |
| } | |
| .o-grid_item { | |
| display: inline-block; | |
| padding-left: 0; | |
| width: 100%; | |
| vertical-align: top; | |
| font-size: 1rem; | |
| } | |
| @media (max-width: 699px) { | |
| .o-grid_item.-button { | |
| width: 100%; | |
| } | |
| } | |
| @media (min-width: 700px) and (max-width: 999px) { | |
| .o-grid_item.-button { | |
| margin-bottom: 60px; | |
| } | |
| } | |
| @media (min-width: 1000px) { | |
| .o-grid_item.-button { | |
| width: 18.75rem; | |
| } | |
| } | |
| @media (max-width: 699px) { | |
| .o-grid_item.-button-content { | |
| margin-bottom: 30px; | |
| } | |
| } | |
| @media (min-width: 700px) and (max-width: 999px) { | |
| .o-grid_item.-button-content { | |
| margin-bottom: 60px; | |
| } | |
| } | |
| @media (min-width: 1000px) { | |
| .o-grid_item.-button-content { | |
| width: calc(100% - 18.75rem); | |
| } | |
| } | |
| .o-grid.-margin .o-grid_item { | |
| padding-left: 3.75rem; | |
| } | |
| @media (min-width: 700px) { | |
| .o-grid_item.-half { | |
| width: 50%; | |
| } | |
| } | |
| @media (min-width: 700px) and (max-width: 1199px) { | |
| .o-grid_item.-half.-large { | |
| width: 100%; | |
| } | |
| } | |
| @media (min-width: 700px) and (max-width: 999px) { | |
| .o-grid_item.-half.-medium { | |
| width: 100%; | |
| } | |
| } | |
| @media (min-width: 700px) and (max-width: 1199px) { | |
| .o-grid_item.-third { | |
| width: 50%; | |
| } | |
| } | |
| @media (min-width: 1200px) { | |
| .o-grid_item.-third { | |
| width: 33.3333333333%; | |
| } | |
| } | |
| .o-form { | |
| padding-bottom: 11.25rem; | |
| } | |
| @media (max-width: 699px) { | |
| .o-form_item { | |
| margin-bottom: 35px; | |
| } | |
| } | |
| @media (min-width: 700px) { | |
| .o-form_item { | |
| margin-bottom: 2.9375rem; | |
| } | |
| } | |
| .o-form_fieldset { | |
| padding: 0; | |
| margin: 0; | |
| border: 0; | |
| } | |
| @media (max-width: 699px) { | |
| .o-form_fieldset { | |
| margin-bottom: 20px; | |
| } | |
| } | |
| @media (min-width: 700px) { | |
| .o-form_fieldset { | |
| margin-bottom: 3.75rem; | |
| } | |
| } | |
| .o-form_button { | |
| text-align: right; | |
| } | |
| .o-label { | |
| display: block; | |
| height: 100%; | |
| color: #b3b3b3; | |
| letter-spacing: 0.12em; | |
| text-transform: uppercase; | |
| padding: 0.875rem; | |
| transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| @media (max-width: 699px) { | |
| .o-label { | |
| font-size: 9px; | |
| } | |
| } | |
| @media (min-width: 700px) { | |
| .o-label { | |
| font-size: 0.5625rem; | |
| } | |
| } | |
| .o-input-wrap .o-label { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .o-input:focus~.o-label, | |
| .o-select:focus~.o-label, | |
| .o-textarea:focus~.o-label, | |
| .o-label.is-active { | |
| transform: translateY(-1.875rem); | |
| } | |
| .o-input.has-error~.o-label { | |
| color: #cc3d3d; | |
| } | |
| .has-error { | |
| &.o-select~.o-label, | |
| &.o-textarea~.o-label { | |
| color: #cc3d3d; | |
| } | |
| } | |
| .o-input-wrap { | |
| position: relative; | |
| } | |
| .o-input, | |
| .o-select, | |
| .o-textarea { | |
| padding: 0.875rem; | |
| background-color: transparent; | |
| border-bottom: 1px solid #b3b3b3; | |
| transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| @media (max-width: 699px) { | |
| .o-input, | |
| .o-select, | |
| .o-textarea { | |
| font-size: 14px; | |
| } | |
| } | |
| @media (min-width: 700px) { | |
| .o-input, | |
| .o-select, | |
| .o-textarea { | |
| font-size: 0.875rem; | |
| } | |
| } | |
| .o-input::-webkit-input-placeholder, | |
| .o-select::-webkit-input-placeholder, | |
| .o-textarea::-webkit-input-placeholder, | |
| .o-input:-ms-input-placeholder, | |
| .o-select:-ms-input-placeholder, | |
| .o-textarea:-ms-input-placeholder, | |
| .o-input::-ms-input-placeholder, | |
| .o-select::-ms-input-placeholder, | |
| .o-textarea::-ms-input-placeholder, | |
| .o-input::placeholder, | |
| .o-select::placeholder, | |
| .o-textarea::placeholder { | |
| color: #b3b3b3; | |
| } | |
| .o-input.-search { | |
| background-color: transparent; | |
| color: #fff; | |
| font-weight: 700; | |
| border-bottom: none; | |
| } | |
| .-search { | |
| &.o-select, | |
| &.o-textarea { | |
| background-color: transparent; | |
| color: #fff; | |
| font-weight: 700; | |
| border-bottom: none; | |
| } | |
| } | |
| @media (max-width: 699px) { | |
| .o-input.-search { | |
| font-size: 26px; | |
| } | |
| .-search { | |
| &.o-select, | |
| &.o-textarea { | |
| font-size: 26px; | |
| } | |
| } | |
| } | |
| @media (min-width: 700px) { | |
| .o-input.-search { | |
| font-size: 3.75rem; | |
| } | |
| .-search { | |
| &.o-select, | |
| &.o-textarea { | |
| font-size: 3.75rem; | |
| } | |
| } | |
| } | |
| .o-input.-search::-webkit-input-placeholder { | |
| color: #000; | |
| } | |
| .-search { | |
| &.o-select::-webkit-input-placeholder, | |
| &.o-textarea::-webkit-input-placeholder { | |
| color: #000; | |
| } | |
| } | |
| .o-input.-search:-ms-input-placeholder { | |
| color: #000; | |
| } | |
| .-search { | |
| &.o-select:-ms-input-placeholder, | |
| &.o-textarea:-ms-input-placeholder { | |
| color: #000; | |
| } | |
| } | |
| .o-input.-search::-ms-input-placeholder { | |
| color: #000; | |
| } | |
| .-search { | |
| &.o-select::-ms-input-placeholder, | |
| &.o-textarea::-ms-input-placeholder { | |
| color: #000; | |
| } | |
| } | |
| .o-input.-search::placeholder { | |
| color: #000; | |
| } | |
| .-search { | |
| &.o-select::placeholder, | |
| &.o-textarea::placeholder { | |
| color: #000; | |
| } | |
| } | |
| .-mobile { | |
| .o-input.-search { | |
| font-size: 26px; | |
| padding: 0; | |
| } | |
| .-search { | |
| &.o-select, | |
| &.o-textarea { | |
| font-size: 26px; | |
| padding: 0; | |
| } | |
| } | |
| } | |
| .o-input.-search.-light { | |
| color: #1e1e22; | |
| } | |
| .-search.-light { | |
| &.o-select, | |
| &.o-textarea { | |
| color: #1e1e22; | |
| } | |
| } | |
| .o-input.-search.-light::-webkit-input-placeholder { | |
| color: #b3b3b3; | |
| } | |
| .-search.-light { | |
| &.o-select::-webkit-input-placeholder, | |
| &.o-textarea::-webkit-input-placeholder { | |
| color: #b3b3b3; | |
| } | |
| } | |
| .o-input.-search.-light:-ms-input-placeholder { | |
| color: #b3b3b3; | |
| } | |
| .-search.-light { | |
| &.o-select:-ms-input-placeholder, | |
| &.o-textarea:-ms-input-placeholder { | |
| color: #b3b3b3; | |
| } | |
| } | |
| .o-input.-search.-light::-ms-input-placeholder { | |
| color: #b3b3b3; | |
| } | |
| .-search.-light { | |
| &.o-select::-ms-input-placeholder, | |
| &.o-textarea::-ms-input-placeholder { | |
| color: #b3b3b3; | |
| } | |
| } | |
| .o-input.-search.-light::placeholder { | |
| color: #b3b3b3; | |
| } | |
| .-search.-light { | |
| &.o-select::placeholder, | |
| &.o-textarea::placeholder { | |
| color: #b3b3b3; | |
| } | |
| } | |
| .o-input.has-error { | |
| border-color: #cc3d3d; | |
| } | |
| .has-error { | |
| &.o-select, | |
| &.o-textarea { | |
| border-color: #cc3d3d; | |
| } | |
| } | |
| .o-input:focus, | |
| .o-select:focus, | |
| .o-textarea:focus { | |
| outline: none; | |
| } | |
| .o-input-line { | |
| display: block; | |
| position: absolute; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| border-bottom: 1px solid #1e1e22; | |
| transform: scaleX(0); | |
| transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); | |
| transform-origin: center left; | |
| } | |
| .o-input:focus~.o-input-line, | |
| .o-select:focus~.o-input-line, | |
| .o-textarea:focus~.o-input-line { | |
| transform: scaleX(1); | |
| } | |
| .o-input-lines { | |
| &::before, | |
| &::after { | |
| content: ""; | |
| position: absolute; | |
| bottom: 0; | |
| border-right: 1px solid #b3b3b3; | |
| height: 0.375rem; | |
| transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| } | |
| .o-input.has-error~.o-input-lines::before { | |
| border-color: #cc3d3d; | |
| } | |
| .has-error { | |
| &.o-select~.o-input-lines::before, | |
| &.o-textarea~.o-input-lines::before { | |
| border-color: #cc3d3d; | |
| } | |
| } | |
| .o-input.has-error~.o-input-lines::after { | |
| border-color: #cc3d3d; | |
| } | |
| .has-error { | |
| &.o-select~.o-input-lines::after, | |
| &.o-textarea~.o-input-lines::after { | |
| border-color: #cc3d3d; | |
| } | |
| } | |
| .o-input-lines { | |
| &::before { | |
| left: 0; | |
| transition-delay: 0.3s; | |
| } | |
| &::after { | |
| right: 0; | |
| } | |
| } | |
| .o-input:focus~.o-input-lines::before, | |
| .o-select:focus~.o-input-lines::before, | |
| .o-textarea:focus~.o-input-lines::before, | |
| .o-input:focus~.o-input-lines::after, | |
| .o-select:focus~.o-input-lines::after, | |
| .o-textarea:focus~.o-input-lines::after { | |
| border-color: #1e1e22; | |
| } | |
| .o-input:focus~.o-input-lines::before, | |
| .o-select:focus~.o-input-lines::before, | |
| .o-textarea:focus~.o-input-lines::before { | |
| transition-delay: 0s; | |
| } | |
| .o-input:focus~.o-input-lines::after, | |
| .o-select:focus~.o-input-lines::after, | |
| .o-textarea:focus~.o-input-lines::after { | |
| transition-delay: 0.3s; | |
| } | |
| .o-checkbox, | |
| .o-radio { | |
| position: absolute; | |
| width: 0; | |
| opacity: 0; | |
| } | |
| .o-checkbox:checked+.o-checkbox-label::after, | |
| .o-radio:checked+.o-checkbox-label::after, | |
| .o-checkbox:checked+.o-radio-label::after, | |
| .o-radio:checked+.o-radio-label::after { | |
| transform: scale(1); | |
| } | |
| .o-checkbox-label, | |
| .o-radio-label { | |
| position: relative; | |
| display: inline-block; | |
| margin-right: 0.5em; | |
| line-height: 1.4; | |
| margin-right: 4.0625rem; | |
| cursor: pointer; | |
| padding-top: 0.125rem; | |
| } | |
| @media (max-width: 699px) { | |
| .o-checkbox-label, | |
| .o-radio-label { | |
| font-size: 12px; | |
| padding-left: 27px; | |
| } | |
| } | |
| @media (min-width: 700px) { | |
| .o-checkbox-label, | |
| .o-radio-label { | |
| font-size: 0.875rem; | |
| padding-left: 1.1875rem; | |
| } | |
| } | |
| .o-checkbox-label.-uppsercase, | |
| .-uppsercase.o-radio-label { | |
| text-transform: uppercase; | |
| } | |
| .o-checkbox-label::before, | |
| .o-radio-label::before, | |
| .o-checkbox-label::after, | |
| .o-radio-label::after { | |
| position: absolute; | |
| top: 50%; | |
| left: 0; | |
| display: inline-block; | |
| padding: 0; | |
| content: ""; | |
| border: 1px solid; | |
| transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| @media (max-width: 699px) { | |
| .o-checkbox-label::before, | |
| .o-radio-label::before, | |
| .o-checkbox-label::after, | |
| .o-radio-label::after { | |
| width: 12px; | |
| height: 12px; | |
| margin-top: -6px; | |
| } | |
| } | |
| @media (min-width: 700px) { | |
| .o-checkbox-label::before, | |
| .o-radio-label::before, | |
| .o-checkbox-label::after, | |
| .o-radio-label::after { | |
| margin-top: -0.28125rem; | |
| width: 0.5625rem; | |
| height: 0.5625rem; | |
| } | |
| } | |
| .o-checkbox-label::after, | |
| .o-radio-label::after { | |
| width: 0; | |
| height: 0; | |
| border-style: solid; | |
| border-color: #1e1e22 transparent transparent transparent; | |
| transform: scale(0); | |
| transform-origin: top left; | |
| transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| @media (max-width: 699px) { | |
| .o-checkbox-label::after, | |
| .o-radio-label::after { | |
| border-width: 12px 12px 0 0; | |
| } | |
| } | |
| @media (min-width: 700px) { | |
| .o-checkbox-label::after, | |
| .o-radio-label::after { | |
| border-width: 0.5625rem 0.5625rem 0 0; | |
| } | |
| } | |
| .o-checkbox-label.has-error::before, | |
| .has-error.o-radio-label::before { | |
| border-color: #cc3d3d; | |
| } | |
| .o-checkbox-label_text { | |
| display: inline-block; | |
| transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| transform: translateZ(0); | |
| } | |
| .o-checkbox-label:hover .o-checkbox-label_text { | |
| transform: translateX(0.3125rem); | |
| } | |
| .o-radio-label { | |
| &:hover .o-checkbox-label_text { | |
| transform: translateX(0.3125rem); | |
| } | |
| &::before { | |
| border-radius: 50%; | |
| width: 12px; | |
| height: 12px; | |
| } | |
| &::after { | |
| border-radius: 50%; | |
| width: 12px; | |
| height: 12px; | |
| background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20enable-background%3D%22new%200%200%2013%2013%22%20xml%3Aspace%3D%22preserve%22%3E%3Ccircle%20fill%3D%22%23424242%22%20cx%3D%226.5%22%20cy%3D%226.5%22%20r%3D%226.5%22%2F%3E%3C%2Fsvg%3E"); | |
| background-size: 6px; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| transform: scale(0); | |
| transform-origin: center; | |
| transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); | |
| border: none; | |
| } | |
| } | |
| .o-radio:checked+.o-radio-label::after { | |
| transform: scale(1); | |
| } | |
| .o-select { | |
| position: relative; | |
| z-index: 1; | |
| padding-right: 2.5rem; | |
| &:focus { | |
| border-bottom-color: #1e1e22; | |
| } | |
| } | |
| .o-select-wrap { | |
| position: relative; | |
| &::after { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| z-index: 2; | |
| width: 2.5rem; | |
| background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2211.3%22%20viewBox%3D%220%200%2013%2011.3%22%20enable-background%3D%22new%200%200%2013%2011.3%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%23b3b3b3%22%20points%3D%226.5%2011.3%203.3%205.6%200%200%206.5%200%2013%200%209.8%205.6%20%22%2F%3E%3C%2Fsvg%3E"); | |
| background-position: center; | |
| background-size: 10px; | |
| background-repeat: no-repeat; | |
| content: ""; | |
| pointer-events: none; | |
| } | |
| } | |
| .o-textarea-wrap { | |
| position: relative; | |
| } | |
| .o-textarea { | |
| min-height: 9.375rem; | |
| } | |
| .o-button { | |
| position: relative; | |
| display: inline-block; | |
| text-align: center; | |
| border: 1px solid #1e1e22; | |
| white-space: nowrap; | |
| font-size: 0; | |
| transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.075s; | |
| &:before { | |
| display: inline-block; | |
| height: 100%; | |
| content: ""; | |
| vertical-align: middle; | |
| } | |
| >* { | |
| display: inline-block; | |
| vertical-align: middle; | |
| white-space: normal; | |
| font-size: 1rem; | |
| } | |
| &::after { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| background-color: #1e1e22; | |
| transform: scaleX(0); | |
| transform-origin: center left; | |
| transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.075s; | |
| } | |
| &:hover { | |
| color: #fff; | |
| transition-delay: 0s; | |
| &::after { | |
| transform: scaleX(1); | |
| transition-delay: 0s; | |
| } | |
| } | |
| &.-left::after { | |
| transform-origin: center right; | |
| } | |
| &.-white { | |
| border-color: #fff; | |
| &::after { | |
| background-color: #fff; | |
| } | |
| &:hover { | |
| color: #000; | |
| } | |
| } | |
| &.-form { | |
| width: 11.25rem; | |
| &:focus { | |
| color: #fff; | |
| transition-delay: 0s; | |
| &::after { | |
| transform: scaleX(1); | |
| transition-delay: 0s; | |
| } | |
| } | |
| } | |
| &.-square { | |
| padding: 0; | |
| } | |
| } | |
| @media (max-width: 699px) { | |
| .o-button { | |
| height: 60px; | |
| padding: 0 20px; | |
| } | |
| } | |
| @media (min-width: 700px) { | |
| .o-button { | |
| height: 3.75rem; | |
| padding: 0 1.875rem; | |
| } | |
| } | |
| @media (min-width: 1200px) { | |
| .o-button.-anim { | |
| border-color: transparent; | |
| } | |
| } | |
| @media (max-width: 699px) { | |
| .o-button.-width { | |
| width: 100%; | |
| } | |
| } | |
| @media (min-width: 700px) { | |
| .o-button.-width { | |
| width: 15rem; | |
| } | |
| } | |
| @media (max-width: 699px) { | |
| .o-button.-square { | |
| width: 60px; | |
| } | |
| } | |
| @media (min-width: 700px) { | |
| .o-button.-square { | |
| width: 3.75rem; | |
| } | |
| } | |
| .o-button-group .o-button+.o-button { | |
| border-left: none; | |
| } | |
| @media (max-width: 699px) { | |
| .o-button.-padding { | |
| padding: 1.25rem; | |
| } | |
| } | |
| @media (min-width: 700px) { | |
| .o-button.-padding { | |
| padding: 1.25rem 2.5rem; | |
| } | |
| } | |
| .o-button_label { | |
| display: inline-block; | |
| position: relative; | |
| transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); | |
| transform: translateX(0); | |
| line-height: 1.4; | |
| z-index: 2; | |
| text-transform: uppercase; | |
| letter-spacing: 0.12em; | |
| font-weight: 500; | |
| font-size: 0.75rem; | |
| } | |
| .o-button { | |
| &:hover .o-button_label { | |
| transform: translateX(0.5rem); | |
| transition-delay: 0.075s; | |
| } | |
| &.-left:hover .o-button_label { | |
| transform: translateX(-0.5rem); | |
| } | |
| &.-square:hover .o-button_label { | |
| transform: translateX(0.375rem); | |
| } | |
| &.-left.-square:hover .o-button_label { | |
| transform: translateX(-0.375rem); | |
| } | |
| } | |
| .o-button-group { | |
| margin-left: 0; | |
| letter-spacing: normal; | |
| font-size: 0; | |
| } | |
| .o-button_icon { | |
| position: relative; | |
| width: 1.0rem; | |
| height: 1.0rem; | |
| fill: #000; | |
| transition: fill 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.075s; | |
| } | |
| .o-button { | |
| &.-white .o-button_icon { | |
| fill: #fff; | |
| } | |
| &:hover .o-button_icon { | |
| fill: #f6f6f6; | |
| transition-delay: 0s; | |
| } | |
| &.-white:hover .o-button_icon { | |
| fill: #1e1e22; | |
| } | |
| } | |
| .o-button_line { | |
| &::before, | |
| &::after { | |
| content: ""; | |
| position: absolute; | |
| background-color: #1e1e22; | |
| } | |
| } | |
| .is-mobile .o-button_line { | |
| &::before, | |
| &::after { | |
| display: none; | |
| } | |
| } | |
| .o-button_line { | |
| &::before { | |
| width: 1px; | |
| top: 0; | |
| bottom: 0; | |
| transform: scaleY(0); | |
| transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| &::after { | |
| height: 1px; | |
| right: 0; | |
| left: 0; | |
| transform: scaleX(0); | |
| transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| &:first-of-type { | |
| &::before { | |
| left: 0; | |
| transform-origin: center bottom; | |
| } | |
| &::after { | |
| top: 0; | |
| transform-origin: center left; | |
| } | |
| } | |
| &:last-of-type { | |
| &::before { | |
| right: 0; | |
| transform-origin: center top; | |
| } | |
| &::after { | |
| bottom: 0; | |
| transform-origin: center right; | |
| } | |
| } | |
| } | |
| .o-button.is-inview .o-button_line { | |
| &::before { | |
| transform: scaleY(1); | |
| } | |
| &::after { | |
| transform: scaleX(1); | |
| } | |
| &:first-of-type { | |
| &::before { | |
| transition-delay: 1.15s; | |
| } | |
| &::after { | |
| transition-delay: 0.1s; | |
| } | |
| } | |
| &:last-of-type { | |
| &::before { | |
| transition-delay: 0.55s; | |
| } | |
| &::after { | |
| transition-delay: 0.7s; | |
| } | |
| } | |
| } | |
| .c-header-home_footer { | |
| z-index: 3; | |
| position: absolute; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| } | |
| .c-header-home_controls, | |
| .c-header-home_buttons { | |
| margin-left: 0; | |
| letter-spacing: normal; | |
| font-size: 0; | |
| transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); | |
| transform: translate3d(0, 100%, 0); | |
| } | |
| @media (max-width: 699px) { | |
| .c-header-home_controls, | |
| .c-header-home_buttons { | |
| padding-bottom: 40px; | |
| } | |
| } | |
| @media (min-width: 700px) { | |
| .c-header-home_controls, | |
| .c-header-home_buttons { | |
| padding-bottom: 5.625rem; | |
| } | |
| } | |
| @media (min-width: 700px) and (max-width: 749px) { | |
| .c-header-home_controls, | |
| .c-header-home_buttons { | |
| padding-bottom: 3.75rem; | |
| } | |
| } | |
| .is-loaded { | |
| .c-header-home_controls, | |
| .c-header-home_buttons { | |
| transform: translate3d(0, 0, 0); | |
| } | |
| } | |
| body { | |
| &[data-route-option="prev-section"] { | |
| .c-header-home_controls, | |
| .c-header-home_buttons { | |
| transform: translate3d(0, 0, 0); | |
| } | |
| } | |
| &[data-route-option="next-section"] { | |
| .c-header-home_controls, | |
| .c-header-home_buttons { | |
| transform: translate3d(0, 0, 0); | |
| } | |
| } | |
| } | |
| .c-header-home_controls { | |
| transition-delay: 0.65s; | |
| } | |
| @media (min-width: 700px) { | |
| .c-header-home_controls { | |
| float: left; | |
| } | |
| } | |
| .c-header-home_buttons { | |
| transition-delay: 0.75s; | |
| } | |
| @media (max-width: 699px) { | |
| .c-header-home_buttons { | |
| margin-left: -20px; | |
| margin-right: -20px; | |
| } | |
| } | |
| @media (min-width: 1000px) { | |
| .c-header-home_buttons { | |
| float: right; | |
| } | |
| } | |
| @media (max-width: 699px) { | |
| .c-header-home_button { | |
| width: 50% !important; | |
| } | |
| } | |
| @media (min-width: 700px) { | |
| .c-header-home_button { | |
| width: 15.625rem; | |
| } | |
| } | |
| .slideshow__slide-image.background-absolute { | |
| width: 60%; | |
| left: 40%; | |
| } | |
| h1.slideshow__slide-caption-title { | |
| padding-left: 98px; | |
| padding-right: 98px; | |
| color:black; | |
| } | |
| .o-hsub.-link { | |
| padding-left: 98px; | |
| padding-right: 98px; | |
| color: #000; | |
| text-decoration: none; | |
| } | |
| button.slider-more-button { | |
| width: 16rem; | |
| height: 7rem; | |
| position: absolute; | |
| bottom: 0; | |
| right: 0; | |
| background-color: #fcc865; | |
| color: #000; | |
| text-transform: uppercase; | |
| transition: opacity 700ms cubic-bezier(0.8, 0, 0.55, 0.94) 470ms, transform 700ms cubic-bezier(0.8, 0, 0.55, 0.94) 470ms; | |
| transform: rotateZ(-20deg) translate3d(-20vh, 20vh, 0); | |
| } | |
| .is-animated .slider-more-button { | |
| transform: rotateZ(0deg) translate3d(0, 0, 0); | |
| } | |
| p.slideshow__slide-caption-content { | |
| padding-left: 98px; | |
| padding-right: 98px; | |
| box-sizing: border-box; | |
| color: rgba(0, 0, 0, 0.7); | |
| cursor: pointer; | |
| display: block; | |
| font-family: Plain, sans-serif; | |
| font-size: 14px; | |
| font-weight: 200; | |
| max-height: 218px; | |
| letter-spacing: 0.28px; | |
| line-height: 28px; | |
| margin-top: 20px; | |
| opacity: 0; | |
| text-size-adjust: 100%; | |
| transition: opacity 700ms cubic-bezier(0.8, 0, 0.55, 0.94), transform 700ms cubic-bezier(0.8, 0, 0.55, 0.94); | |
| transform: translate3d(-100px, 0, 0); | |
| max-width: 40%; | |
| width: 40%; | |
| } | |
| .slideshow__slide.is-current p.slideshow__slide-caption-content { | |
| opacity: 1; | |
| transition: opacity 700ms cubic-bezier(0.8, 0, 0.55, 0.94) 1470ms, transform 700ms cubic-bezier(0.8, 0, 0.55, 0.94) 1470ms; | |
| transform: translate3d(0, 0, 0); | |
| } | |
| span.slideshow__slide-caption-subtitle-label { | |
| font-weight: 800; | |
| font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; | |
| } | |
| .side-nav { | |
| display: none; | |
| } | |
| @media (min-width: 1024px) { | |
| .side-nav { | |
| display: block; | |
| left: 0; | |
| z-index: 2; | |
| width: 100vh; | |
| height: 5vw; | |
| transform-origin: top; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transform: translate3d(-100%, 10%, 0); | |
| transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; | |
| } | |
| .is-animated { | |
| .side-nav { | |
| transition: opacity 700ms cubic-bezier(0.8, 0, 0.55, 0.94) 470ms, transform 700ms cubic-bezier(0.8, 0, 0.55, 0.94) 470ms; | |
| transform: rotateZ(-90deg) translate3d(-390px, -50vh, 0); | |
| } | |
| .slideshow__slide-caption { | |
| } | |
| } | |
| .side-nav { | |
| opacity: 1; | |
| transition: opacity 700ms cubic-bezier(0.8, 0, 0.55, 0.94) 1470ms, transform 700ms cubic-bezier(0.8, 0, 0.55, 0.94) 1470ms; | |
| ul { | |
| list-style: none; | |
| margin: 0 0; | |
| padding-top: 0.3vw; | |
| } | |
| li { | |
| display: inline-block; | |
| line-height: 0.9em; | |
| margin: 0 15px; | |
| padding-bottom: 8px; | |
| border-bottom: 1px solid transparent; | |
| cursor: pointer; | |
| transition: opacity 400ms cubic-bezier(0.8, 0, 0.55, 0.94), border-color 400ms cubic-bezier(0.8, 0, 0.55, 0.94); | |
| } | |
| .label { | |
| font-size: 11px; | |
| letter-spacing: 0.18em; | |
| text-transform: uppercase; | |
| opacity: 0.3; | |
| margin: 0 0; | |
| color: #0a0c0d; | |
| font-weight: 800; | |
| font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; | |
| } | |
| &[data-view="cover"] li[data-view="cover"] { | |
| opacity: 1; | |
| border-bottom: 1px solid #000; | |
| } | |
| } | |
| .slideshow__slide { | |
| &.is-prev .side-nav { | |
| transform: translate3d(-100%, -50%, 0); | |
| } | |
| &.is-next .side-nav { | |
| transform: translate3d(-100%, 10%, 0); | |
| } | |
| &.is-prev-section .side-nav { | |
| transform: translate3d(-100%, -50%, 0); | |
| transition: none; | |
| } | |
| &.is-next-section .side-nav { | |
| transform: translate3d(-100%, 10%, 0); | |
| transition: none; | |
| } | |
| } | |
| } | |
| /*end slider show*/ | |
| /*Floating button*/ | |
| .floating-btn { | |
| font-family: 'Roboto Thin', sans-serif; | |
| border: none; | |
| border-width: 0px; | |
| margin: 0; | |
| overflow: hidden; | |
| border: none; | |
| outline: none; | |
| color: white; | |
| font-size: 20px; | |
| background: #F6EFE3; | |
| position: relative; | |
| padding: 14px; | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 50%; | |
| box-shadow: 0 12px 42px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.24); | |
| transition: .3s; | |
| margin: 0.5em; | |
| &:hover { | |
| background: #d2cbbf; | |
| cursor: pointer; | |
| box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); | |
| } | |
| } | |
| .js-parallax.is-inview { | |
| width: 100px; | |
| } | |
| button .floating-btn:focus { | |
| outline: 0px; | |
| outline: 0px; | |
| } | |
| .c-header-home_controls.-nomobile.o-button-group { | |
| margin-left: 30%; | |
| } | |
| .divide { | |
| margin-top: 50px; | |
| margin-bottom: 50px; | |
| } | |
| .ripple { | |
| overflow: hidden; | |
| } | |
| .ripple-effect { | |
| position: absolute; | |
| border-radius: 50%; | |
| width: 50px; | |
| height: 50px; | |
| background: white; | |
| animation: ripple-animation 2s; | |
| } | |
| .ripple>.o-button_icon { | |
| top: 1px; | |
| } | |
| @keyframes ripple-animation { | |
| from { | |
| transform: scale(1); | |
| opacity: 0.4; | |
| } | |
| to { | |
| transform: scale(100); | |
| opacity: 0; | |
| } | |
| } | |
| /* End Floating Button */ | |
| /* nav bar*/ | |
| .navbar-container { | |
| z-index: 1000; | |
| background-color: #fff; | |
| } | |
| @media (max-width: 699px) { | |
| .container { | |
| padding-right: 0px; | |
| padding-left: 0px; | |
| } | |
| } | |
| @media (min-width: 700px) and (max-width: 1599px) { | |
| .container { | |
| padding-right: 0rem; | |
| padding-left: 0rem; | |
| max-width: 140rem; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment