/*============================================== Hero Section =============================================*/ .slider-progress { width: 100%; height: 3px; background: #eee; } .slider-progress .progress { width: 0%; height: 3px; background: #ffa400; } .hero-section .slider-bg{ padding:250px 0 100px; } .hero-section .slider-bg .bottom-text{ margin-top:370px; } .hero-section { position:relative; } .hero-section .slick-dots{ position: absolute; bottom: 440px; background: #455560; left: 0; right: 0; margin: 0; padding: 40px 0; text-align:center; } .hero-section .slick-dots li{ color:#fff; margin:0 60px; padding:0; cursor:pointer; display:inline-block; } .hero-section .slick-dots li:before{ display:none; } .hero-section h2{ font-size:43px; line-height:49px; } .hero-section h1{ font-size:45px; line-height:58px; } .hero-section a.cta_button{ background:transparent; border:0; padding:0; position:relative; margin-top: 35px; } .hero-section a.cta_button:before{ position: absolute; content: ''; top: -7px; right: -55px; background: url(//cdn2.hubspot.net/hubfs/1803734/Assets%20Nov-02/iconViewCase.png?t=1478180908657) no-repeat; background-size: 100%; width: 35px; height: 35px; transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out; } .hero-section a.cta_button:hover:before{ right: -45px; } .hero-section a.cta_button:after{ position: absolute; content: ''; bottom: -7px; left: 0; right:0; height: 3px; background:#fff; transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out; width:0; } .hero-section a.cta_button:hover:after{ width:100%; } .hero-section .bottom-text .tag{ position: relative; color: #ffa400; margin-top: 20px; display: inline-block; font-size: 13px; line-height: 15px; } .hero-section .bottom-text .tag:before{ position:absolute; content:''; bottom:-10px; left:0; right:0; height:3px; background:#fff; } .hero-section .left-bottom-heading h3{ font-size: 13px; line-height: 15px; } /*============================================== Form Section =============================================*/ .form-section{ padding:100px 0 100px; background:#fafafa; } .form-section .left-col .heading { position:relative; padding-left:50px; } .form-section .left-col .heading:before{ position: absolute; content: ''; left: 0; top: 0; background: url(//cdn2.hubspot.net/hubfs/1803734/Assets%20Nov-02/Doc%20File%20img.png) no-repeat; width: 37px; height: 54px; background-size: 100%; } .form-section .right-col form .actions { position:relative; width:50%; float:right; } .form-section .right-col form .actions:before{ position: absolute; content: ''; left: -86px; top: 30px; background: url(//cdn2.hubspot.net/hubfs/1803734/Assets%20Nov-02/Arow.png) no-repeat; width: 90px; height: 30px; background-size: 100%; } body .row-fluid .form-section .right-col{ width: 40.5%; } body .row-fluid .form-section .left-col{ width: 54.2%; } .form-section .row-fluid form input, .form-section .row-fluid form select, .form-section .row-fluid form textarea{ border:0; padding:0; border-bottom: 1px solid #c3c4c5; color:#ffa400; } .form-section .row-fluid form input:focus, .form-section .row-fluid form select:focus, .form-section .row-fluid form textarea:focus{ outline:0; border:0; border-bottom:1px solid #ffa400; } .form-section .row-fluid form .field>label{ position:absolute; } /*============================================== Home Video Section =============================================*/ .video-section { } body .row-fluid .video-section .wrapper{ max-width:100%; padding:0; } body .row-fluid .video-section .right-col{ padding: 0 10%; margin: 0; } body .row-fluid .video-section .left-col{ background:#455560; z-index:1; padding:130px 0; position:relative; overflow:hidden; cursor:pointer; width:60%; } .left-heading{ position: absolute; top: 50px; left: 36%; } body .row-fluid .video-section .background-image{ height:400px; position:relative; transition:all .4s ease-in-out; -webkit-transition:all .4s ease-in-out; left: -20%; } body .row-fluid .video-section .text-container{ position: absolute; right: 0; width: 270px; top: 0; bottom: 0; display: flex; display: -webkit-flex; -webkit-flex-direction: column; flex-direction: column; justify-content: center; -webkit-justify-content: center; justify-content: center; } .text-container .play-button{ position:relative;; margin-top:10px; transition:all .4s ease-in-out; -webkit-transition:all .4s ease-in-out; } .video-section .left-col:hover .text-container .play-button{ margin-top:60px; } .text-container .play-button img{ max-width:108px; } body .row-fluid .video-section .left-col:hover .background-image{ left: 0; } .video-section .right-col .list-item{ margin-top:60px; } .video-section .right-col .list-item p{ margin-bottom:5px; } .video-section .right-col .list-item a{ transition:all .1s ease-in; -webkit-transition:all .1s ease-in; } .video-section .right-col .list-item a:hover{ color: #ffa400; text-decoration: underline; } /*============================================== Home Blog Section =============================================*/ .blog-section{ background:#fafafa; padding:140px 0; } body .row-fluid .blog-section .wrapper{ max-width:1080px; } .hs-rss-item.hs-with-featured-image .hs-rss-item-text { width: 50%; float: right; padding: 0; display: flex; display: -webkit-flex; -webkit-flex-direction: column; flex-direction: column; justify-content: center; -webkit-justify-content: center; justify-content: center; padding: 0 50px; } .hs-rss-item.hs-with-featured-image .hs-rss-item-image-wrapper { width: 50%; height: 240px; position: relative; overflow: hidden; } .hs-rss-item-image-wrapper .bg-container{ background-size: cover; background-position: center center; position: absolute; left: 0; right: 0; top: 0; bottom: 0; transition:all .8s ease-in; -webkit-transition:all .8s ease-in; } .hs-rss-item-image-wrapper .bg-container:before{ position: absolute; content: ''; left: 0; right: 0; top: 0; bottom: 0; transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; background: transparent; } .hs-rss-item.hs-with-featured-image .hs-rss-item-image-wrapper img{ display:none; } .hs-rss-item.hs-with-featured-image{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: stretch; -moz-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; flex-wrap: wrap; -wevkit-flex-wrap: wrap; flex-direction: row-reverse; -webkit-flex-direction: row-reverse; position:relative; z-index:1; overflow: visible; position:relative; margin-bottom:22px; } .hs-rss-item:before{ position: absolute; content: ''; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; background:transparent; transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; } .hs-rss-item:hover:before{ left: -30px; right: -30px; top: -22px; bottom: -22px; background: #fff; } .hs-rss-item:hover .hs-rss-item-image-wrapper .bg-container:before{ background: rgba(255, 164, 0, 0.48); } .hs-rss-item:hover .hs-rss-item-image-wrapper .bg-container{ transform:scale(1.3); transition:all 5s cubic-bezier(0.44, 0.46, 0.63, 0.65); -webkit-transition:all 5s cubic-bezier(0.44, 0.46, 0.63, 0.65); } .hs-rss-title { font-size: 24px; line-height: 30px; text-transform: uppercase; font-weight: 600; margin-bottom:18px; transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out; } .rss-container{ margin-top:80px; } .blog-section a.cta_button { background: transparent; border: 0; padding: 0; color:#ffa400; position: relative; } .blog-section a.cta_button:before{ position: absolute; content: ''; bottom: -12px; left: 0; right:0; height: 3px; background:#e9e9e9; transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out; } .hs-rss-item .hs-rss-byline { opacity: 1; transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out; } .hs-rss-item:hover .hs-rss-byline{ margin-bottom: 40px; } .hs-rss-item:hover .hs-rss-title{ color:#ffa400; }