D7net
Home
Console
Upload
information
Create File
Create Folder
About
Tools
:
/
home3
/
encodto1
/
sgbookings.com
/
Filename :
style.css
back
Copy
/************************************** Template Name: Muliyo | Multipurpose Coming Soon HTML Template Template URL: http://html.affixtheme.com/html/Muliyo Description: Multipurpose Coming Soon HTML Template Author: AffixTheme Author URL: https://themeforest.net/user/affixtheme Version: 1.1 ====================================== Table Of Contents ====================================== 1. Typography 2. Template Default Style 3. Preloader Style 4. Subscribe Form Style 5. Sidebar Content Style 6. Demo Layout One 7. Demo Layout Two 8. Demo Layout Three 9. Demo Layout Four 10. Demo Layout Five 11. Demo Layout Six 12. Demo Layout Seven 13. Demo Layout Eight 14. Demo Layout Nine 15. Demo Layout Ten 16. Demo Layout Eleven 17. Demo Layout Twelve 18. Demo Layout Thirteen 19. Demo Layout Fourteen 20. Demo Layout Fifteen 21. Demo Layout Sixteen 22. Demo Layout Seventeen 23. Demo Layout Eighteen 24. Demo Layout Nineteen 25. Demo Layout Twenty 26. Demo Layout Twenty One 27. Demo Layout Twenty Two 28. Demo Layout Twenty Three 29. Demo Layout Twenty Four 30. Demo Layout Twenty Five 31. Demo Layout Twenty Six 32. Demo Layout Twenty Seven 33. Demo Layout Twenty Eight **************************************/ /*======================================================================= 1. Typography =========================================================================*/ html { height: 100%; } body { font-size: 16px; font-family: 'Open Sans', sans-serif; font-weight: 400; height: 100%; line-height: 1.8; vertical-align: baseline; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; color: #646464; background-color: #fff; } p { margin: 0 0 20px 0; color: #646464; } h1, h2, h3, h4, h5, h6 { font-weight: 400; font-family: 'Raleway', sans-serif; margin: 0 0 20px 0; color: #111; } h1, h2 { line-height: 1.2; } h3, h4, h5, h6 { line-height: 1.4; } h1 { font-size: 52px; line-height: 76px; } @media only screen and (max-width: 1439px) { h1 { font-size: 46px; line-height: 70px; } } @media only screen and (max-width: 1199px) { h1 { font-size: 40px; line-height: 62px; } } @media only screen and (max-width: 991px) { h1 { font-size: 36px; line-height: 56px; } } @media only screen and (max-width: 767px) { h1 { font-size: 32px; line-height: 50px; } } @media only screen and (max-width: 575px) { h1 { font-size: 28px; line-height: 44px; } } @media only screen and (max-width: 479px) { h1 { font-size: 26px; line-height: 40px; } } h2 { font-size: 26px; } @media only screen and (max-width: 1199px) { h2 { font-size: 24px; } } @media only screen and (max-width: 991px) { h2 { font-size: 22px; } } @media only screen and (max-width: 767px) { h2 { font-size: 20px; } } h3 { font-size: 22px; } @media only screen and (max-width: 991px) { h3 { font-size: 20px; } } @media only screen and (max-width: 767px) { h3 { font-size: 18px; } } h4 { font-size: 20px; } @media only screen and (max-width: 991px) { h4 { font-size: 18px; } } @media only screen and (max-width: 767px) { h4 { font-size: 16px; } } /*======================================================================= 2. Template Default Style =========================================================================*/ a { text-decoration: none; } a:active, a:hover, a:focus { text-decoration: none; } a:active, a:hover, a:focus { outline: 0 none; } img { max-width: 100%; height: auto; } ul { list-style: outside none none; margin: 0; padding: 0; } .full-width.container-fluid { padding-left: 0; padding-right: 0; } body .wrapper { position: relative; z-index: 1; overflow: hidden; opacity: 0; visibility: hidden; transition: all 0.3s ease-in-out; } body.loaded .wrapper { opacity: 1; visibility: visible; } /*======================================================================== 3. Preloader Style =========================================================================*/ .pace.pace-inactive { display: none; } .pace { -webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; z-index: 2000; position: fixed; background-color: #ffffff; height: 100%; width: 100%; margin: auto; top: 0; left: 0; right: 0; bottom: 0; } .pace .pace-activity { z-index: 100; position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); } .pace .pace-progress { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; z-index: 2000; position: absolute; top: 50%; left: 50%; height: 80px; width: 80px; border-radius: 50%; line-height: 80px; -webkit-transform: translate3d(0, 0, 0) translateY(-50%) translateX(-50%) !important; -ms-transform: translate3d(0, 0, 0) translateY(-50%) translateX(-50%) !important; transform: translate3d(0, 0, 0) translateY(-50%) translateX(-50%) !important; } .pace .pace-progress:after { content: ""; animation: rotateZ 1.5s infinite linear; border-top: 8px solid #707070; border-bottom: 8px solid #707070; border-left: 1px solid #707070; border-right: 1px solid #707070; height: 80px; border-radius: 50%; width: 80px; top: 0; left: 0; position: absolute; z-index: 999999; } .pace .pace-progress:before { content: attr(data-progress-text); text-align: center; color: #000; font-size: 18px; font-weight: 700; display: block; z-index: 999; position: absolute; } @keyframes rotateZ { to { transform: rotateZ(360deg); } } /*======================================================================== 4. Subscribe Form Style =========================================================================*/ .modal .modal-dialog { max-width: 660px; padding: 0 15px; } .modal .modal-dialog .modal-content { border-radius: 5px; border: none; background-color: #ffffff; box-shadow: 0 0 59px 0 rgba(0, 0, 0, 0.1); } .modal .modal-dialog .modal-content .modal-header { border-bottom: none; position: absolute; right: 0; top: 0; z-index: 22; padding: 0; } .modal .modal-dialog .modal-content .modal-header button { font-size: 40px; font-weight: 300; margin-right: 0; padding: 15px 20px; line-height: 1; background-color: transparent; border: 0; transition: all 0.3s ease-in-out; } .modal .modal-dialog .modal-content .modal-header button:focus { outline: none; } .modal .modal-dialog .modal-content .modal-header button:hover { color: #f11e47; } .modal .modal-dialog .modal-content .modal-body { padding: 90px 110px; text-align: center; } @media only screen and (max-width: 767px) { .modal .modal-dialog .modal-content .modal-body { padding: 70px 80px; } } @media only screen and (max-width: 575px) { .modal .modal-dialog .modal-content .modal-body { padding: 50px; } } @media only screen and (max-width: 479px) { .modal .modal-dialog .modal-content .modal-body { padding: 30px 15px; } } .modal .modal-dialog .modal-content .modal-body .notify-icon { display: inline-block; width: 15vw; margin-bottom: 40px; background: transparent; position: relative; transform-origin: 50% 0; animation: iconAnimate 3s ease-in-out forwards; } .modal .modal-dialog .modal-content .modal-body .item-title { font-size: 40px; font-weight: 600; color: #000; margin-bottom: 12px; } @media only screen and (max-width: 1199px) { .modal .modal-dialog .modal-content .modal-body .item-title { font-size: 36px; } } @media only screen and (max-width: 991px) { .modal .modal-dialog .modal-content .modal-body .item-title { font-size: 30px; } } @media only screen and (max-width: 767px) { .modal .modal-dialog .modal-content .modal-body .item-title { font-size: 28px; } } @media only screen and (max-width: 575px) { .modal .modal-dialog .modal-content .modal-body .item-title { font-size: 26px; } } @media only screen and (max-width: 479px) { .modal .modal-dialog .modal-content .modal-body .item-title { font-size: 24px; } } .modal .modal-dialog .modal-content .modal-body p { color: #000; line-height: 30px; margin-bottom: 40px; } .modal .modal-dialog .modal-content .modal-body .subscribe-form { position: relative; z-index: 1; } .modal .modal-dialog .modal-content .modal-body .subscribe-form .input-group .item-icon { position: absolute; top: 20px; left: 25px; line-height: 1; z-index: 5; color: #949494; } @media only screen and (max-width: 575px) { .modal .modal-dialog .modal-content .modal-body .subscribe-form .input-group .item-icon { top: 16px; } } .modal .modal-dialog .modal-content .modal-body .subscribe-form .input-group .item-icon:focus { outline: none; } .modal .modal-dialog .modal-content .modal-body .subscribe-form .input-group .form-control { margin-bottom: 15px; border: 1px solid #bcbcbc; height: 55px; width: 100%; background-color: transparent; font-size: 17px; color: #111111; padding: 10px 10px 10px 55px; border-radius: 45px; } @media only screen and (max-width: 575px) { .modal .modal-dialog .modal-content .modal-body .subscribe-form .input-group .form-control { height: 50px; } } .modal .modal-dialog .modal-content .modal-body .subscribe-form .input-group .form-control:focus { outline: none; box-shadow: none; z-index: 0; } .modal .modal-dialog .modal-content .modal-body .subscribe-form .input-group input::-webkit-input-placeholder { color: #7e7e7e; font-weight: 300; } .modal .modal-dialog .modal-content .modal-body .subscribe-form .input-group input::-moz-placeholder { color: #7e7e7e; font-weight: 300; } .modal .modal-dialog .modal-content .modal-body .subscribe-form .input-group input:-moz-placeholder { color: #7e7e7e; font-weight: 300; } .modal .modal-dialog .modal-content .modal-body .subscribe-form .input-group input:-ms-input-placeholder { color: #7e7e7e; font-weight: 300; } .modal .modal-dialog .modal-content .modal-body .subscribe-form .input-group .input-group-addon { display: block; width: 100%; } .modal .modal-dialog .modal-content .modal-body .subscribe-form .input-group .input-group-addon button { cursor: pointer; display: inline-block; font-size: 24px; font-weight: 600; color: #ffffff; border: 0; box-shadow: none; border-radius: 45px; background-color: #f11e47; padding: 5px 40px 7px; width: 100%; font-family: 'Open Sans', sans-serif; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 575px) { .modal .modal-dialog .modal-content .modal-body .subscribe-form .input-group .input-group-addon button { font-size: 20px; padding: 6px 40px 8px; } } .modal .modal-dialog .modal-content .modal-body .subscribe-form .input-group .input-group-addon button:focus { outline: none; } .modal .modal-dialog .modal-content .modal-body .subscribe-form .input-group .input-group-addon button:hover { background-color: #d60c34; } .modal .modal-dialog .modal-content .modal-body .subscribe-form .form-result { display: block; padding: 0.78rem 1.25rem; margin-top: 15px; margin-bottom: 0; width: 100%; border-radius: 45px; } @media only screen and (max-width: 575px) { .modal .modal-dialog .modal-content .modal-body .subscribe-form .form-result { font-size: 14px; padding: 0.6rem; } } .modal-backdrop { z-index: -1; } @keyframes iconAnimate { 0% { transform: rotate(0deg); } 30% { transform: rotate(-30deg); } 70% { transform: rotate(20deg); } 100% { transform: rotate(0deg); } } /*======================================================================== 5. Sidebar Content Style =========================================================================*/ body .fxt-page-content { background-color: #fff; height: 100%; min-width: 50vw; overflow-y: scroll; box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.1); position: absolute; z-index: 5; top: 0; left: 100%; transition: all 0.8s ease-in-out; } @media only screen and (max-width: 991px) { body .fxt-page-content { position: relative; left: inherit; min-width: 100vw; max-height: inherit; } } body .fxt-page-content .content-heading .content-title { font-weight: 700; padding: 5px 10px 3px 0; display: inline-block; position: relative; z-index: 1; } body .fxt-page-content .content-heading .content-title:before { content: ""; background-color: rgba(241, 30, 71, 0.1); height: 100%; width: 70%; top: 0; right: 0; position: absolute; z-index: -1; } body .fxt-about-wrap { overflow: hidden; padding: 80px 65px 83px; } @media only screen and (max-width: 1439px) { body .fxt-about-wrap { padding: 80px 60px 83px; } } @media only screen and (max-width: 991px) { body .fxt-about-wrap { padding: 70px 50px 73px; } } @media only screen and (max-width: 767px) { body .fxt-about-wrap { padding: 60px 40px 63px; } } @media only screen and (max-width: 575px) { body .fxt-about-wrap { padding: 50px 30px 53px; } } body .fxt-about-wrap .content-heading { margin-bottom: 0; } body .fxt-about-wrap .content-heading .content-paragraph { margin-bottom: 0; } body .fxt-project-wrap { overflow: hidden; background-color: #f8f8f8; padding: 80px 0 0; } @media only screen and (max-width: 991px) { body .fxt-project-wrap { padding: 70px 0 0; } } @media only screen and (max-width: 767px) { body .fxt-project-wrap { padding: 60px 0 0; } } @media only screen and (max-width: 575px) { body .fxt-project-wrap { padding: 50px 0 0; } } body .fxt-project-wrap .content-heading { padding: 0 65px; margin-bottom: 45px; } @media only screen and (max-width: 1439px) { body .fxt-project-wrap .content-heading { padding: 0 60px; } } @media only screen and (max-width: 991px) { body .fxt-project-wrap .content-heading { padding: 0 50px; } } @media only screen and (max-width: 767px) { body .fxt-project-wrap .content-heading { padding: 0 40px; } } @media only screen and (max-width: 575px) { body .fxt-project-wrap .content-heading { padding: 0 30px; } } @media only screen and (max-width: 767px) { body .fxt-project-wrap .content-heading { margin-bottom: 35px; } } body .fxt-project-box { transition: all 0.3s ease-in-out; overflow: hidden; } body .fxt-project-box .popup-triger { position: relative; z-index: 1; display: block; overflow: hidden; } body .fxt-project-box .popup-triger:before { position: absolute; z-index: 0; content: ""; height: 100%; width: 100%; top: 100%; left: 0; top: 0; opacity: 0; visibility: hidden; background-color: rgba(0, 0, 0, 0.5); transition: cubic-bezier(0, 1, 1, 1) 0.8s; } body .fxt-project-box .popup-triger img { position: relative; z-index: -1; transform: scale(1.01); transition: cubic-bezier(0, 1, 1, 1) 0.8s; } body .fxt-project-box:hover .popup-triger:before { opacity: 1; visibility: visible; } body .fxt-project-box:hover .popup-triger img { transform: scale(1.2); } body .fxt-contact-wrap { overflow: hidden; padding: 80px 65px; } @media only screen and (max-width: 1439px) { body .fxt-contact-wrap { padding: 80px 60px; } } @media only screen and (max-width: 991px) { body .fxt-contact-wrap { padding: 70px 50px; } } @media only screen and (max-width: 767px) { body .fxt-contact-wrap { padding: 60px 40px; } } @media only screen and (max-width: 575px) { body .fxt-contact-wrap { padding: 50px 30px; } } body .fxt-contact-wrap .content-heading { margin-bottom: 30px; } @media only screen and (max-width: 767px) { body .fxt-contact-wrap .content-heading { margin-bottom: 20px; } } body .fxt-address-wrap { margin-bottom: 20px; } body .fxt-address-wrap .fxt-address-box { margin-bottom: 20px; } body .fxt-address-wrap .fxt-address-box .item-icon i:before { margin-left: 0; font-size: 40px; color: #f11e47; } @media only screen and (max-width: 991px) { body .fxt-address-wrap .fxt-address-box .item-icon i:before { font-size: 36px; } } @media only screen and (max-width: 767px) { body .fxt-address-wrap .fxt-address-box .item-icon i:before { font-size: 30px; } } body .fxt-address-wrap .fxt-address-box .item-content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } body .fxt-address-wrap .fxt-address-box .item-content .item-title { font-weight: 700; margin-bottom: 0; } body .fxt-address-wrap .fxt-address-box .item-content .item-text { color: #666666; } body .fxt-form-wrap .form-group { margin-bottom: 30px; } @media only screen and (max-width: 991px) { body .fxt-form-wrap .form-group { margin-bottom: 20px; } } @media only screen and (max-width: 767px) { body .fxt-form-wrap .form-group { margin-bottom: 15px; } } body .fxt-form-wrap .form-group:last-child { margin-bottom: 0; } body .fxt-form-wrap .form-group .form-control { border: 1px solid #dddddd; border-radius: 5px; background-color: transparent; padding: 10px 20px; font-size: 15px; color: #111; } @media only screen and (max-width: 991px) { body .fxt-form-wrap .form-group .form-control { font-size: 14px; } } @media only screen and (max-width: 767px) { body .fxt-form-wrap .form-group .form-control { font-size: 13px; } } body .fxt-form-wrap .form-group .form-control:focus { outline: none; box-shadow: none; } body .fxt-form-wrap .form-group input { height: 50px; } @media only screen and (max-width: 991px) { body .fxt-form-wrap .form-group input { height: 45px; } } @media only screen and (max-width: 767px) { body .fxt-form-wrap .form-group input { height: 40px; } } body .fxt-form-wrap .form-group input.form-control::-webkit-input-placeholder, body .fxt-form-wrap .form-group textarea.form-control::-webkit-input-placeholder { color: #666666; } body .fxt-form-wrap .form-group input.form-control::-moz-placeholder, body .fxt-form-wrap .form-group textarea.form-control::-moz-placeholder { color: #666666; } body .fxt-form-wrap .form-group input.form-control:-moz-placeholder, body .fxt-form-wrap .form-group textarea.form-control:-moz-placeholder { color: #666666; } body .fxt-form-wrap .form-group input.form-control:-ms-input-placeholder, body .fxt-form-wrap .form-group textarea.form-control:-ms-input-placeholder { color: #666666; } body .fxt-form-wrap .form-group .fxt-btn-fill { text-align: center; margin-top: 15px; font-family: 'Roboto', sans-serif; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f11e47; color: #f1f1f1; border-radius: 45px; background-color: #f11e47; padding: 12px 35px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 991px) { body .fxt-form-wrap .form-group .fxt-btn-fill { margin-top: 10px; } } @media only screen and (max-width: 767px) { body .fxt-form-wrap .form-group .fxt-btn-fill { margin-top: 5px; font-size: 14px; padding: 11px 30px; } } @media only screen and (max-width: 575px) { body .fxt-form-wrap .form-group .fxt-btn-fill { font-size: 13px; padding: 10px 25px; } } body .fxt-form-wrap .form-group .fxt-btn-fill:hover { background-color: #d60c34; } body .fxt-form-wrap .form-group .fxt-btn-fill:focus { outline: none; } body .fxt-form-wrap .form-response .alert-danger, body .fxt-form-wrap .form-response .alert.alert-info, body .fxt-form-wrap .form-response .alert.alert-success { margin-bottom: 0; padding: 10px 25px; border-radius: 45px; display: inline-block; font-size: 14px; } @media only screen and (max-width: 575px) { body .fxt-form-wrap .form-response .alert-danger, body .fxt-form-wrap .form-response .alert.alert-info, body .fxt-form-wrap .form-response .alert.alert-success { padding: 9px 25px; } } body .fxt-form-wrap .form-response .alert-danger p, body .fxt-form-wrap .form-response .alert.alert-info p, body .fxt-form-wrap .form-response .alert.alert-success p { margin-bottom: 0; } @media only screen and (min-width: 992px) { body.open-sidebar .fxt-page-content { left: 50%; } } body .ofcanvas-triger { position: absolute; z-index: 2; right: 7vw; display: block; top: 15vh; padding: 10px 7px; cursor: pointer; transition: all 0.8s ease-in-out; transition-delay: 0.1s; } @media only screen and (max-width: 991px) { body .ofcanvas-triger { display: none; } } body .ofcanvas-triger .bar { background-color: #fff; height: 2px; width: 30px; display: block; margin-bottom: 5px; transition: all 0.3s ease-in-out; transition-delay: 0.8s; } body .ofcanvas-triger .bar:nth-child(2), body .ofcanvas-triger .bar:nth-child(3) { width: 25px; margin-left: 5px; } body .ofcanvas-triger .bar:last-child { margin-bottom: 0; } body .ofcanvas-triger.triger-btn-dark .bar { background-color: #000; } body .ofcanvas-triger.btn-top16 { top: 16vh; } body .ofcanvas-triger.btn-top15 { top: 15vh; } body .ofcanvas-triger.btn-top14 { top: 14vh; } body .ofcanvas-triger.btn-top13 { top: 13vh; } body .ofcanvas-triger.btn-top12 { top: 12vh; } body .ofcanvas-triger.btn-top11 { top: 11vh; } body .ofcanvas-triger.btn-top10 { top: 10vh; } body .ofcanvas-triger.btn-top9 { top: 9vh; } body.open-sidebar .ofcanvas-triger { transform: translateX(calc(-50vw + 60px)); transition-delay: 0s; } body.open-sidebar .ofcanvas-triger .bar:nth-child(2), body.open-sidebar .ofcanvas-triger .bar:nth-child(3) { opacity: 0; } body.open-sidebar .ofcanvas-triger .bar:nth-child(1) { -webkit-transform: rotate(45deg) translate(7px, 7px); -ms-transform: rotate(45deg) translate(7px, 7px); transform: rotate(45deg) translate(7px, 7px); } body.open-sidebar .ofcanvas-triger .bar:nth-child(4) { -webkit-transform: rotate(-45deg) translate(8px, -8px); -ms-transform: rotate(-45deg) translate(8px, -8px); transform: rotate(-45deg) translate(8px, -8px); } /*======================================================================== 6. Demo Layout One =========================================================================*/ .fxt-template-layout1 { display: flex; align-items: flex-start; min-height: 100vh; min-width: 100vw; transition: all 0.8s ease-in-out; } @media only screen and (max-width: 991px) { .fxt-template-layout1 { display: block; min-width: 100%; } } .fxt-template-layout1 .fxt-main-content { background-position: center; background-size: cover; background-repeat: no-repeat; min-height: 100vh; min-width: 100vw; position: relative; z-index: 1; transition: all 0.8s ease-in-out; } @media only screen and (max-width: 991px) { .fxt-template-layout1 .fxt-main-content { min-width: 100%; } } .fxt-template-layout1 .fxt-main-content:before { content: ""; background-color: rgba(0, 0, 0, 0.1); position: absolute; height: 100%; width: 100%; top: 0; left: 0; z-index: -1; } .fxt-template-layout1 .fxt-main-content .fxt-overlay { background-position: center; background-size: cover; background-repeat: no-repeat; } .fxt-template-layout1 .fxt-main-content .fxt-inner-content { padding: 65px 15px; max-width: 50vw; min-height: 100vh; display: flex; align-items: center; text-align: center; justify-content: center; flex-direction: column; transition: all 0.8s ease-in-out; } @media only screen and (max-width: 991px) { .fxt-template-layout1 .fxt-main-content .fxt-inner-content { max-width: inherit; min-width: 100%; padding: 55px 15px; } } @media only screen and (max-width: 767px) { .fxt-template-layout1 .fxt-main-content .fxt-inner-content { padding: 45px 15px; } } @media only screen and (max-width: 575px) { .fxt-template-layout1 .fxt-main-content .fxt-inner-content { padding: 35px 15px; } } .fxt-template-layout1 .fxt-main-content .fxt-logo { max-width: 40vw; margin-top: 25px; margin-bottom: 14vh; } .fxt-template-layout1 .fxt-main-content .fxt-sub-title { color: #fff; font-size: 30px; margin-bottom: 5px; } @media only screen and (max-width: 991px) { .fxt-template-layout1 .fxt-main-content .fxt-sub-title { font-size: 26px; } } @media only screen and (max-width: 767px) { .fxt-template-layout1 .fxt-main-content .fxt-sub-title { font-size: 24px; } } @media only screen and (max-width: 575px) { .fxt-template-layout1 .fxt-main-content .fxt-sub-title { font-size: 22px; } } @media only screen and (max-width: 479px) { .fxt-template-layout1 .fxt-main-content .fxt-sub-title { font-size: 20px; } } .fxt-template-layout1 .fxt-main-content .fxt-main-title { color: #fff; font-weight: 700; width: 90%; margin-left: auto; margin-right: auto; } @media only screen and (max-width: 767px) { .fxt-template-layout1 .fxt-main-content .fxt-main-title { width: 95%; } } @media only screen and (max-width: 575px) { .fxt-template-layout1 .fxt-main-content .fxt-main-title { width: 100%; } } .fxt-template-layout1 .fxt-main-content .fxt-paragraph { color: #d8d8d8; width: 70%; margin-left: auto; margin-right: auto; margin-bottom: 70px; } @media only screen and (max-width: 1199px) { .fxt-template-layout1 .fxt-main-content .fxt-paragraph { margin-bottom: 60px; } } @media only screen and (max-width: 991px) { .fxt-template-layout1 .fxt-main-content .fxt-paragraph { margin-bottom: 50px; } } @media only screen and (max-width: 767px) { .fxt-template-layout1 .fxt-main-content .fxt-paragraph { width: 80%; margin-bottom: 40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout1 .fxt-main-content .fxt-paragraph { width: 100%; margin-bottom: 30px; } } .fxt-template-layout1 .fxt-main-content .fxt-buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-bottom: 60px; } @media only screen and (max-width: 991px) { .fxt-template-layout1 .fxt-main-content .fxt-buttons { margin-bottom: 50px; } } @media only screen and (max-width: 767px) { .fxt-template-layout1 .fxt-main-content .fxt-buttons { margin-bottom: 40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout1 .fxt-main-content .fxt-buttons { margin-bottom: 30px; } } .fxt-template-layout1 .fxt-main-content .fxt-buttons .fxt-btn { margin: 0 7px 12px; } .fxt-template-layout1 .fxt-main-content .fxt-btn-ghost { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f1f1f1; color: #f1f1f1; border-radius: 45px; background-color: transparent; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout1 .fxt-main-content .fxt-btn-ghost { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout1 .fxt-main-content .fxt-btn-ghost { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout1 .fxt-main-content .fxt-btn-ghost:hover { background-color: #f11e47; border-color: #f11e47; } .fxt-template-layout1 .fxt-main-content .fxt-btn-ghost:focus { outline: none; } .fxt-template-layout1 .fxt-main-content .fxt-btn-fill { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f11e47; color: #f1f1f1; border-radius: 45px; background-color: #f11e47; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout1 .fxt-main-content .fxt-btn-fill { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout1 .fxt-main-content .fxt-btn-fill { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout1 .fxt-main-content .fxt-btn-fill:hover { background-color: transparent; border-color: #f1f1f1; } .fxt-template-layout1 .fxt-main-content .fxt-btn-fill:focus { outline: none; } .fxt-template-layout1 .fxt-main-content .fxt-socials { margin-bottom: 70px; } @media only screen and (max-width: 991px) { .fxt-template-layout1 .fxt-main-content .fxt-socials { margin-bottom: 60px; } } @media only screen and (max-width: 767px) { .fxt-template-layout1 .fxt-main-content .fxt-socials { margin-bottom: 50px; } } @media only screen and (max-width: 575px) { .fxt-template-layout1 .fxt-main-content .fxt-socials { margin-bottom: 40px; } } .fxt-template-layout1 .fxt-main-content .fxt-socials li { display: inline-block; margin-right: 15px; margin-bottom: 8px; } @media only screen and (max-width: 991px) { .fxt-template-layout1 .fxt-main-content .fxt-socials li { margin-right: 10px; margin-bottom: 5px; } } @media only screen and (max-width: 767px) { .fxt-template-layout1 .fxt-main-content .fxt-socials li { margin-right: 5px; } } .fxt-template-layout1 .fxt-main-content .fxt-socials li:last-child { margin-right: 0; } .fxt-template-layout1 .fxt-main-content .fxt-socials li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 16px; height: 45px; width: 45px; color: #ffffff; background-color: #222323; border-radius: 50%; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout1 .fxt-main-content .fxt-socials li a { font-size: 15px; height: 40px; width: 40px; } } .fxt-template-layout1 .fxt-main-content .fxt-socials li.fxt-facebook a:hover { background-color: #3b5998; } .fxt-template-layout1 .fxt-main-content .fxt-socials li.fxt-twitter a:hover { background-color: #00acee; } .fxt-template-layout1 .fxt-main-content .fxt-socials li.fxt-google a:hover { background-color: #CC3333; } .fxt-template-layout1 .fxt-main-content .fxt-socials li.fxt-instagram a:hover { background-color: #3f729b; } .fxt-template-layout1 .fxt-main-content .fxt-socials li.fxt-linkedin a:hover { background-color: #0077B5; } .fxt-template-layout1 .fxt-main-content .fxt-socials li.fxt-youtube a:hover { background-color: #c4302b; } .fxt-template-layout1 .fxt-main-content .fxt-socials li.fxt-pinterest a:hover { background-color: #bd081c; } .fxt-template-layout1 .fxt-main-content .fxt-footer p { color: #e3e3e3; font-size: 15px; } @media only screen and (min-width: 992px) { body.open-sidebar .fxt-template-layout1 .fxt-main-content { min-width: 50vw; } body.open-sidebar .fxt-template-layout1 .fxt-main-content .fxt-inner-content { max-width: 50vw; } } /*======================================================================== 7. Demo Layout Two =========================================================================*/ .fxt-template-layout2 { display: flex; align-items: flex-start; min-height: 100vh; min-width: 100vw; transition: all 0.8s ease-in-out; } @media only screen and (max-width: 991px) { .fxt-template-layout2 { display: block; min-width: 100%; } } .fxt-template-layout2 .fxt-main-content { background-position: center; background-size: cover; background-repeat: no-repeat; min-height: 100vh; min-width: 100vw; position: relative; z-index: 1; transition: all 0.8s ease-in-out; } @media only screen and (max-width: 991px) { .fxt-template-layout2 .fxt-main-content { min-width: 100%; } } .fxt-template-layout2 .fxt-main-content:before { content: ""; background-color: rgba(0, 0, 0, 0.1); position: absolute; height: 100%; width: 100%; top: 0; left: 0; z-index: -1; } .fxt-template-layout2 .fxt-main-content .fxt-overlay { background-position: center; background-size: cover; background-repeat: no-repeat; } .fxt-template-layout2 .fxt-main-content .fxt-inner-content { padding: 65px 15px; max-width: 50vw; min-height: 100vh; display: flex; align-items: center; text-align: center; justify-content: center; flex-direction: column; transition: all 0.8s ease-in-out; } @media only screen and (max-width: 991px) { .fxt-template-layout2 .fxt-main-content .fxt-inner-content { max-width: inherit; min-width: 100%; padding: 55px 15px; } } @media only screen and (max-width: 767px) { .fxt-template-layout2 .fxt-main-content .fxt-inner-content { padding: 45px 15px; } } @media only screen and (max-width: 575px) { .fxt-template-layout2 .fxt-main-content .fxt-inner-content { padding: 35px 15px; } } .fxt-template-layout2 .fxt-main-content .fxt-logo { margin-top: 25px; margin-bottom: 14vh; max-width: 40vw; } .fxt-template-layout2 .fxt-main-content .fxt-sub-title { color: #fff; font-size: 46px; font-family: 'Raleway', sans-serif; letter-spacing: 8px; margin-bottom: 25px; line-height: 1.4; margin-left: 8px; } @media only screen and (max-width: 1199px) { .fxt-template-layout2 .fxt-main-content .fxt-sub-title { font-size: 40px; } } @media only screen and (max-width: 991px) { .fxt-template-layout2 .fxt-main-content .fxt-sub-title { font-size: 36px; letter-spacing: 6px; line-height: 1.6; margin-left: 6px; margin-bottom: 20px; } } @media only screen and (max-width: 767px) { .fxt-template-layout2 .fxt-main-content .fxt-sub-title { font-size: 32px; letter-spacing: 4px; line-height: 1.5; margin-left: 4px; margin-bottom: 15px; } } @media only screen and (max-width: 575px) { .fxt-template-layout2 .fxt-main-content .fxt-sub-title { font-size: 28px; letter-spacing: 2px; line-height: 1.4; margin-left: 2px; } } @media only screen and (max-width: 479px) { .fxt-template-layout2 .fxt-main-content .fxt-sub-title { font-size: 26px; line-height: 1.3; } } .fxt-template-layout2 .fxt-main-content .fxt-buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-bottom: 60px; } @media only screen and (max-width: 991px) { .fxt-template-layout2 .fxt-main-content .fxt-buttons { margin-bottom: 50px; } } @media only screen and (max-width: 767px) { .fxt-template-layout2 .fxt-main-content .fxt-buttons { margin-bottom: 40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout2 .fxt-main-content .fxt-buttons { margin-bottom: 30px; } } .fxt-template-layout2 .fxt-main-content .fxt-buttons .fxt-btn { margin: 0 7px 12px; } .fxt-template-layout2 .fxt-main-content .fxt-btn-ghost { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f1f1f1; color: #f1f1f1; border-radius: 45px; background-color: transparent; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout2 .fxt-main-content .fxt-btn-ghost { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout2 .fxt-main-content .fxt-btn-ghost { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout2 .fxt-main-content .fxt-btn-ghost:hover { background-color: #f11e47; border-color: #f11e47; } .fxt-template-layout2 .fxt-main-content .fxt-btn-ghost:focus { outline: none; } .fxt-template-layout2 .fxt-main-content .fxt-btn-fill { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f11e47; color: #f1f1f1; border-radius: 45px; background-color: #f11e47; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout2 .fxt-main-content .fxt-btn-fill { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout2 .fxt-main-content .fxt-btn-fill { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout2 .fxt-main-content .fxt-btn-fill:hover { background-color: transparent; border-color: #f1f1f1; } .fxt-template-layout2 .fxt-main-content .fxt-btn-fill:focus { outline: none; } .fxt-template-layout2 .fxt-main-content .fxt-socials { margin-bottom: 70px; } @media only screen and (max-width: 991px) { .fxt-template-layout2 .fxt-main-content .fxt-socials { margin-bottom: 60px; } } @media only screen and (max-width: 767px) { .fxt-template-layout2 .fxt-main-content .fxt-socials { margin-bottom: 50px; } } @media only screen and (max-width: 575px) { .fxt-template-layout2 .fxt-main-content .fxt-socials { margin-bottom: 40px; } } .fxt-template-layout2 .fxt-main-content .fxt-socials li { display: inline-block; margin-right: 15px; margin-bottom: 8px; } @media only screen and (max-width: 991px) { .fxt-template-layout2 .fxt-main-content .fxt-socials li { margin-right: 10px; margin-bottom: 5px; } } @media only screen and (max-width: 767px) { .fxt-template-layout2 .fxt-main-content .fxt-socials li { margin-right: 5px; } } .fxt-template-layout2 .fxt-main-content .fxt-socials li:last-child { margin-right: 0; } .fxt-template-layout2 .fxt-main-content .fxt-socials li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 16px; height: 45px; width: 45px; color: #ffffff; background-color: #222323; border-radius: 50%; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout2 .fxt-main-content .fxt-socials li a { font-size: 15px; height: 40px; width: 40px; } } .fxt-template-layout2 .fxt-main-content .fxt-socials li.fxt-facebook a:hover { background-color: #3b5998; } .fxt-template-layout2 .fxt-main-content .fxt-socials li.fxt-twitter a:hover { background-color: #00acee; } .fxt-template-layout2 .fxt-main-content .fxt-socials li.fxt-google a:hover { background-color: #CC3333; } .fxt-template-layout2 .fxt-main-content .fxt-socials li.fxt-instagram a:hover { background-color: #3f729b; } .fxt-template-layout2 .fxt-main-content .fxt-socials li.fxt-linkedin a:hover { background-color: #0077B5; } .fxt-template-layout2 .fxt-main-content .fxt-socials li.fxt-youtube a:hover { background-color: #c4302b; } .fxt-template-layout2 .fxt-main-content .fxt-socials li.fxt-pinterest a:hover { background-color: #bd081c; } .fxt-template-layout2 .fxt-main-content .fxt-footer p { color: #e3e3e3; font-size: 15px; } .fxt-template-layout2 .fxt-countdown { margin-bottom: 70px; padding-bottom: 50px; } @media only screen and (max-width: 1439px) { .fxt-template-layout2 .fxt-countdown { margin-bottom: 60px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout2 .fxt-countdown { margin-bottom: 50px; } } @media only screen and (max-width: 991px) { .fxt-template-layout2 .fxt-countdown { margin-bottom: 40px; } } @media only screen and (max-width: 767px) { .fxt-template-layout2 .fxt-countdown { margin-bottom: 30px; } } @media only screen and (max-width: 575px) { .fxt-template-layout2 .fxt-countdown { margin-bottom: 20px; } } .fxt-template-layout2 .fxt-countdown .countdown-section { display: inline-block; min-width: 70px; margin-right: 35px; padding-right: 35px; position: relative; z-index: 1; } @media only screen and (max-width: 1855px) { .fxt-template-layout2 .fxt-countdown .countdown-section { margin-right: 30px; padding-right: 30px; } } @media only screen and (max-width: 1439px) { .fxt-template-layout2 .fxt-countdown .countdown-section { margin-right: 25px; padding-right: 25px; min-width: 65px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout2 .fxt-countdown .countdown-section { margin-right: 20px; padding-right: 20px; min-width: 60px; } } @media only screen and (max-width: 575px) { .fxt-template-layout2 .fxt-countdown .countdown-section { min-width: 55px; margin-right: 15px; padding-right: 15px; } } @media only screen and (max-width: 479px) { .fxt-template-layout2 .fxt-countdown .countdown-section { min-width: 45px; margin-right: 10px; padding-right: 10px; } } .fxt-template-layout2 .fxt-countdown .countdown-section > div { position: relative; z-index: 1; } .fxt-template-layout2 .fxt-countdown .countdown-section:before { content: ""; height: 10px; width: 10px; border-radius: 50%; background-color: #ffffff; position: absolute; z-index: 1; top: 16px; right: -5px; } @media only screen and (max-width: 1855px) { .fxt-template-layout2 .fxt-countdown .countdown-section:before { top: 15px; } } @media only screen and (max-width: 1439px) { .fxt-template-layout2 .fxt-countdown .countdown-section:before { top: 13px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout2 .fxt-countdown .countdown-section:before { top: 11px; height: 8px; width: 8px; } } @media only screen and (max-width: 575px) { .fxt-template-layout2 .fxt-countdown .countdown-section:before { top: 10px; height: 5px; width: 5px; } } @media only screen and (max-width: 479px) { .fxt-template-layout2 .fxt-countdown .countdown-section:before { top: 8px; right: -3px; } } .fxt-template-layout2 .fxt-countdown .countdown-section:after { content: ""; height: 10px; width: 10px; border-radius: 50%; background-color: #ffffff; position: absolute; z-index: 1; top: 38px; right: -5px; } @media only screen and (max-width: 1855px) { .fxt-template-layout2 .fxt-countdown .countdown-section:after { top: 43px; } } @media only screen and (max-width: 1439px) { .fxt-template-layout2 .fxt-countdown .countdown-section:after { top: 38px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout2 .fxt-countdown .countdown-section:after { top: 32px; height: 8px; width: 8px; } } @media only screen and (max-width: 575px) { .fxt-template-layout2 .fxt-countdown .countdown-section:after { top: 28px; height: 5px; width: 5px; } } @media only screen and (max-width: 479px) { .fxt-template-layout2 .fxt-countdown .countdown-section:after { top: 23px; right: -3px; } } .fxt-template-layout2 .fxt-countdown .countdown-section:last-child { margin-right: 0; padding-right: 0; } .fxt-template-layout2 .fxt-countdown .countdown-section:last-child:after, .fxt-template-layout2 .fxt-countdown .countdown-section:last-child:before { display: none; } .fxt-template-layout2 .fxt-countdown .countdown-section .countdown-number { font-size: 60px; line-height: 1; font-weight: 600; color: #ffffff; } @media only screen and (max-width: 1439px) { .fxt-template-layout2 .fxt-countdown .countdown-section .countdown-number { font-size: 56px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout2 .fxt-countdown .countdown-section .countdown-number { font-size: 48px; } } @media only screen and (max-width: 575px) { .fxt-template-layout2 .fxt-countdown .countdown-section .countdown-number { font-size: 42px; } } @media only screen and (max-width: 479px) { .fxt-template-layout2 .fxt-countdown .countdown-section .countdown-number { font-size: 36px; } } .fxt-template-layout2 .fxt-countdown .countdown-section .countdown-unit { color: #d8d8d8; position: absolute; z-index: 1; bottom: -50px; left: 50%; transform: translateX(-50%); font-size: 22px; } @media only screen and (max-width: 991px) { .fxt-template-layout2 .fxt-countdown .countdown-section .countdown-unit { font-size: 20px; bottom: -45px; } } @media only screen and (max-width: 767px) { .fxt-template-layout2 .fxt-countdown .countdown-section .countdown-unit { font-size: 18px; bottom: -40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout2 .fxt-countdown .countdown-section .countdown-unit { font-size: 16px; bottom: -35px; } } @media only screen and (max-width: 575px) { .fxt-template-layout2 .fxt-countdown .countdown-section .countdown-unit { font-size: 15px; bottom: -30px; } } @media only screen and (min-width: 992px) { body.open-sidebar .fxt-template-layout2 .fxt-main-content { min-width: 50vw; } body.open-sidebar .fxt-template-layout2 .fxt-main-content .fxt-inner-content { max-width: 50vw; } } /*======================================================================== 8. Demo Layout Three =========================================================================*/ .fxt-template-layout3 { display: flex; align-items: flex-start; } @media only screen and (max-width: 991px) { .fxt-template-layout3 { display: block; min-width: 100%; } } .fxt-template-layout3 .fxt-main-content { min-height: 100vh; min-width: 100vw; transition: all 0.8s ease-in-out; } @media only screen and (max-width: 991px) { .fxt-template-layout3 .fxt-main-content { min-width: 100%; } } .fxt-template-layout3 .fxt-main-content .fxt-inner-content { padding: 65px 0; min-height: 100vh; width: 100%; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; background-color: rgba(0, 0, 0, 0.55); } @media only screen and (max-width: 991px) { .fxt-template-layout3 .fxt-main-content .fxt-inner-content { padding: 55px 15px; } } @media only screen and (max-width: 767px) { .fxt-template-layout3 .fxt-main-content .fxt-inner-content { padding: 45px 15px; } } @media only screen and (max-width: 575px) { .fxt-template-layout3 .fxt-main-content .fxt-inner-content { padding: 35px 15px; } } .fxt-template-layout3 .fxt-main-content .fxt-logo { margin-top: 25px; margin-bottom: 14vh; max-width: 40vw; } .fxt-template-layout3 .fxt-main-content .fxt-sub-title { color: #fff; font-size: 30px; margin-bottom: 5px; } @media only screen and (max-width: 991px) { .fxt-template-layout3 .fxt-main-content .fxt-sub-title { font-size: 26px; } } @media only screen and (max-width: 767px) { .fxt-template-layout3 .fxt-main-content .fxt-sub-title { font-size: 24px; } } @media only screen and (max-width: 575px) { .fxt-template-layout3 .fxt-main-content .fxt-sub-title { font-size: 22px; } } @media only screen and (max-width: 479px) { .fxt-template-layout3 .fxt-main-content .fxt-sub-title { font-size: 20px; } } .fxt-template-layout3 .fxt-main-content .fxt-main-title { color: #fff; font-weight: 700; width: 90%; margin-left: auto; margin-right: auto; } @media only screen and (max-width: 767px) { .fxt-template-layout3 .fxt-main-content .fxt-main-title { width: 95%; } } @media only screen and (max-width: 575px) { .fxt-template-layout3 .fxt-main-content .fxt-main-title { width: 100%; } } .fxt-template-layout3 .fxt-main-content .fxt-paragraph { color: #d8d8d8; width: 70%; margin-left: auto; margin-right: auto; margin-bottom: 70px; } @media only screen and (max-width: 1199px) { .fxt-template-layout3 .fxt-main-content .fxt-paragraph { margin-bottom: 60px; } } @media only screen and (max-width: 991px) { .fxt-template-layout3 .fxt-main-content .fxt-paragraph { margin-bottom: 50px; } } @media only screen and (max-width: 767px) { .fxt-template-layout3 .fxt-main-content .fxt-paragraph { width: 80%; margin-bottom: 40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout3 .fxt-main-content .fxt-paragraph { width: 100%; margin-bottom: 30px; } } .fxt-template-layout3 .fxt-main-content .fxt-buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-bottom: 60px; } @media only screen and (max-width: 991px) { .fxt-template-layout3 .fxt-main-content .fxt-buttons { margin-bottom: 50px; } } @media only screen and (max-width: 767px) { .fxt-template-layout3 .fxt-main-content .fxt-buttons { margin-bottom: 40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout3 .fxt-main-content .fxt-buttons { margin-bottom: 30px; } } .fxt-template-layout3 .fxt-main-content .fxt-buttons .fxt-btn { margin: 0 7px 12px; } .fxt-template-layout3 .fxt-main-content .fxt-btn-ghost { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f1f1f1; color: #f1f1f1; border-radius: 45px; background-color: transparent; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout3 .fxt-main-content .fxt-btn-ghost { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout3 .fxt-main-content .fxt-btn-ghost { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout3 .fxt-main-content .fxt-btn-ghost:hover { background-color: #f11e47; border-color: #f11e47; } .fxt-template-layout3 .fxt-main-content .fxt-btn-ghost:focus { outline: none; } .fxt-template-layout3 .fxt-main-content .fxt-btn-fill { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f11e47; color: #f1f1f1; border-radius: 45px; background-color: #f11e47; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout3 .fxt-main-content .fxt-btn-fill { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout3 .fxt-main-content .fxt-btn-fill { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout3 .fxt-main-content .fxt-btn-fill:hover { background-color: transparent; border-color: #f1f1f1; } .fxt-template-layout3 .fxt-main-content .fxt-btn-fill:focus { outline: none; } .fxt-template-layout3 .fxt-main-content .fxt-socials { margin-bottom: 70px; } @media only screen and (max-width: 991px) { .fxt-template-layout3 .fxt-main-content .fxt-socials { margin-bottom: 60px; } } @media only screen and (max-width: 767px) { .fxt-template-layout3 .fxt-main-content .fxt-socials { margin-bottom: 50px; } } @media only screen and (max-width: 575px) { .fxt-template-layout3 .fxt-main-content .fxt-socials { margin-bottom: 40px; } } .fxt-template-layout3 .fxt-main-content .fxt-socials li { display: inline-block; margin-right: 15px; margin-bottom: 8px; } @media only screen and (max-width: 991px) { .fxt-template-layout3 .fxt-main-content .fxt-socials li { margin-right: 10px; margin-bottom: 5px; } } @media only screen and (max-width: 767px) { .fxt-template-layout3 .fxt-main-content .fxt-socials li { margin-right: 5px; } } .fxt-template-layout3 .fxt-main-content .fxt-socials li:last-child { margin-right: 0; } .fxt-template-layout3 .fxt-main-content .fxt-socials li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 16px; border: 1px solid; border-color: #aaaaaa; height: 45px; width: 45px; color: #ffffff; background-color: transparent; border-radius: 50%; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout3 .fxt-main-content .fxt-socials li a { font-size: 15px; height: 40px; width: 40px; } } .fxt-template-layout3 .fxt-main-content .fxt-socials li.fxt-facebook a:hover { background-color: #3b5998; border-color: #3b5998; } .fxt-template-layout3 .fxt-main-content .fxt-socials li.fxt-twitter a:hover { background-color: #00acee; border-color: #00acee; } .fxt-template-layout3 .fxt-main-content .fxt-socials li.fxt-google a:hover { background-color: #CC3333; border-color: #CC3333; } .fxt-template-layout3 .fxt-main-content .fxt-socials li.fxt-instagram a:hover { background-color: #3f729b; border-color: #3f729b; } .fxt-template-layout3 .fxt-main-content .fxt-socials li.fxt-linkedin a:hover { background-color: #0077B5; border-color: #0077B5; } .fxt-template-layout3 .fxt-main-content .fxt-socials li.fxt-youtube a:hover { background-color: #c4302b; border-color: #c4302b; } .fxt-template-layout3 .fxt-main-content .fxt-socials li.fxt-pinterest a:hover { background-color: #bd081c; border-color: #bd081c; } .fxt-template-layout3 .fxt-main-content .fxt-footer p { color: #e3e3e3; font-size: 15px; } @media only screen and (min-width: 992px) { body.open-sidebar .fxt-template-layout3 .fxt-main-content { min-width: 50vw; max-width: 50vw; } } /*======================================================================== 9. Demo Layout Four =========================================================================*/ .fxt-template-layout4 { display: flex; align-items: flex-start; } @media only screen and (max-width: 991px) { .fxt-template-layout4 { display: block; min-width: 100%; } } .fxt-template-layout4 .fxt-main-content { min-height: 100vh; min-width: 100vw; transition: all 0.8s ease-in-out; } @media only screen and (max-width: 991px) { .fxt-template-layout4 .fxt-main-content { min-width: 100%; } } .fxt-template-layout4 .fxt-main-content .fxt-inner-content { padding: 65px 0; min-height: 100vh; width: 100%; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; background-color: rgba(0, 0, 0, 0.55); } @media only screen and (max-width: 991px) { .fxt-template-layout4 .fxt-main-content .fxt-inner-content { padding: 55px 15px; } } @media only screen and (max-width: 767px) { .fxt-template-layout4 .fxt-main-content .fxt-inner-content { padding: 45px 15px; } } @media only screen and (max-width: 575px) { .fxt-template-layout4 .fxt-main-content .fxt-inner-content { padding: 35px 15px; } } .fxt-template-layout4 .fxt-main-content .fxt-logo { margin-top: 25px; margin-bottom: 14vh; max-width: 40vw; } .fxt-template-layout4 .fxt-main-content .fxt-sub-title { color: #fff; font-size: 46px; font-family: 'Raleway', sans-serif; letter-spacing: 8px; margin-bottom: 25px; line-height: 1.4; margin-left: 8px; } @media only screen and (max-width: 1199px) { .fxt-template-layout4 .fxt-main-content .fxt-sub-title { font-size: 40px; } } @media only screen and (max-width: 991px) { .fxt-template-layout4 .fxt-main-content .fxt-sub-title { font-size: 36px; letter-spacing: 6px; line-height: 1.6; margin-left: 6px; margin-bottom: 20px; } } @media only screen and (max-width: 767px) { .fxt-template-layout4 .fxt-main-content .fxt-sub-title { font-size: 32px; letter-spacing: 4px; line-height: 1.5; margin-left: 4px; margin-bottom: 15px; } } @media only screen and (max-width: 575px) { .fxt-template-layout4 .fxt-main-content .fxt-sub-title { font-size: 28px; letter-spacing: 2px; line-height: 1.4; margin-left: 2px; } } @media only screen and (max-width: 479px) { .fxt-template-layout4 .fxt-main-content .fxt-sub-title { font-size: 26px; line-height: 1.3; } } .fxt-template-layout4 .fxt-main-content .fxt-buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-bottom: 60px; } @media only screen and (max-width: 991px) { .fxt-template-layout4 .fxt-main-content .fxt-buttons { margin-bottom: 50px; } } @media only screen and (max-width: 767px) { .fxt-template-layout4 .fxt-main-content .fxt-buttons { margin-bottom: 40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout4 .fxt-main-content .fxt-buttons { margin-bottom: 30px; } } .fxt-template-layout4 .fxt-main-content .fxt-buttons .fxt-btn { margin: 0 7px 12px; } .fxt-template-layout4 .fxt-main-content .fxt-btn-ghost { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f1f1f1; color: #f1f1f1; border-radius: 45px; background-color: transparent; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout4 .fxt-main-content .fxt-btn-ghost { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout4 .fxt-main-content .fxt-btn-ghost { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout4 .fxt-main-content .fxt-btn-ghost:hover { background-color: #f11e47; border-color: #f11e47; } .fxt-template-layout4 .fxt-main-content .fxt-btn-ghost:focus { outline: none; } .fxt-template-layout4 .fxt-main-content .fxt-btn-fill { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f11e47; color: #f1f1f1; border-radius: 45px; background-color: #f11e47; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout4 .fxt-main-content .fxt-btn-fill { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout4 .fxt-main-content .fxt-btn-fill { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout4 .fxt-main-content .fxt-btn-fill:hover { background-color: transparent; border-color: #f1f1f1; } .fxt-template-layout4 .fxt-main-content .fxt-btn-fill:focus { outline: none; } .fxt-template-layout4 .fxt-main-content .fxt-socials { margin-bottom: 70px; } @media only screen and (max-width: 991px) { .fxt-template-layout4 .fxt-main-content .fxt-socials { margin-bottom: 60px; } } @media only screen and (max-width: 767px) { .fxt-template-layout4 .fxt-main-content .fxt-socials { margin-bottom: 50px; } } @media only screen and (max-width: 575px) { .fxt-template-layout4 .fxt-main-content .fxt-socials { margin-bottom: 40px; } } .fxt-template-layout4 .fxt-main-content .fxt-socials li { display: inline-block; margin-right: 15px; margin-bottom: 8px; } @media only screen and (max-width: 991px) { .fxt-template-layout4 .fxt-main-content .fxt-socials li { margin-right: 10px; margin-bottom: 5px; } } @media only screen and (max-width: 767px) { .fxt-template-layout4 .fxt-main-content .fxt-socials li { margin-right: 5px; } } .fxt-template-layout4 .fxt-main-content .fxt-socials li:last-child { margin-right: 0; } .fxt-template-layout4 .fxt-main-content .fxt-socials li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 16px; border: 1px solid; border-color: #aaaaaa; height: 45px; width: 45px; color: #ffffff; background-color: transparent; border-radius: 50%; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout4 .fxt-main-content .fxt-socials li a { font-size: 15px; height: 40px; width: 40px; } } .fxt-template-layout4 .fxt-main-content .fxt-socials li.fxt-facebook a:hover { background-color: #3b5998; border-color: #3b5998; } .fxt-template-layout4 .fxt-main-content .fxt-socials li.fxt-twitter a:hover { background-color: #00acee; border-color: #00acee; } .fxt-template-layout4 .fxt-main-content .fxt-socials li.fxt-google a:hover { background-color: #CC3333; border-color: #CC3333; } .fxt-template-layout4 .fxt-main-content .fxt-socials li.fxt-instagram a:hover { background-color: #3f729b; border-color: #3f729b; } .fxt-template-layout4 .fxt-main-content .fxt-socials li.fxt-linkedin a:hover { background-color: #0077B5; border-color: #0077B5; } .fxt-template-layout4 .fxt-main-content .fxt-socials li.fxt-youtube a:hover { background-color: #c4302b; border-color: #c4302b; } .fxt-template-layout4 .fxt-main-content .fxt-socials li.fxt-pinterest a:hover { background-color: #bd081c; border-color: #bd081c; } .fxt-template-layout4 .fxt-main-content .fxt-footer p { color: #e3e3e3; font-size: 15px; } .fxt-template-layout4 .fxt-countdown { margin-bottom: 70px; padding-bottom: 50px; } @media only screen and (max-width: 1439px) { .fxt-template-layout4 .fxt-countdown { margin-bottom: 60px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout4 .fxt-countdown { margin-bottom: 50px; } } @media only screen and (max-width: 991px) { .fxt-template-layout4 .fxt-countdown { margin-bottom: 40px; } } @media only screen and (max-width: 767px) { .fxt-template-layout4 .fxt-countdown { margin-bottom: 30px; } } @media only screen and (max-width: 575px) { .fxt-template-layout4 .fxt-countdown { margin-bottom: 20px; } } .fxt-template-layout4 .fxt-countdown .countdown-section { display: inline-block; min-width: 70px; margin-right: 35px; padding-right: 35px; position: relative; z-index: 1; } @media only screen and (max-width: 1855px) { .fxt-template-layout4 .fxt-countdown .countdown-section { margin-right: 30px; padding-right: 30px; } } @media only screen and (max-width: 1439px) { .fxt-template-layout4 .fxt-countdown .countdown-section { margin-right: 25px; padding-right: 25px; min-width: 65px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout4 .fxt-countdown .countdown-section { margin-right: 20px; padding-right: 20px; min-width: 60px; } } @media only screen and (max-width: 575px) { .fxt-template-layout4 .fxt-countdown .countdown-section { min-width: 55px; margin-right: 15px; padding-right: 15px; } } @media only screen and (max-width: 479px) { .fxt-template-layout4 .fxt-countdown .countdown-section { min-width: 45px; margin-right: 10px; padding-right: 10px; } } .fxt-template-layout4 .fxt-countdown .countdown-section > div { position: relative; z-index: 1; } .fxt-template-layout4 .fxt-countdown .countdown-section:before { content: ""; height: 10px; width: 10px; border-radius: 50%; background-color: #ffffff; position: absolute; z-index: 1; top: 16px; right: -5px; } @media only screen and (max-width: 1855px) { .fxt-template-layout4 .fxt-countdown .countdown-section:before { top: 15px; } } @media only screen and (max-width: 1439px) { .fxt-template-layout4 .fxt-countdown .countdown-section:before { top: 13px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout4 .fxt-countdown .countdown-section:before { top: 11px; height: 8px; width: 8px; } } @media only screen and (max-width: 575px) { .fxt-template-layout4 .fxt-countdown .countdown-section:before { top: 10px; height: 5px; width: 5px; } } @media only screen and (max-width: 479px) { .fxt-template-layout4 .fxt-countdown .countdown-section:before { top: 8px; right: -3px; } } .fxt-template-layout4 .fxt-countdown .countdown-section:after { content: ""; height: 10px; width: 10px; border-radius: 50%; background-color: #ffffff; position: absolute; z-index: 1; top: 38px; right: -5px; } @media only screen and (max-width: 1855px) { .fxt-template-layout4 .fxt-countdown .countdown-section:after { top: 43px; } } @media only screen and (max-width: 1439px) { .fxt-template-layout4 .fxt-countdown .countdown-section:after { top: 38px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout4 .fxt-countdown .countdown-section:after { top: 32px; height: 8px; width: 8px; } } @media only screen and (max-width: 575px) { .fxt-template-layout4 .fxt-countdown .countdown-section:after { top: 28px; height: 5px; width: 5px; } } @media only screen and (max-width: 479px) { .fxt-template-layout4 .fxt-countdown .countdown-section:after { top: 23px; right: -3px; } } .fxt-template-layout4 .fxt-countdown .countdown-section:last-child { margin-right: 0; padding-right: 0; } .fxt-template-layout4 .fxt-countdown .countdown-section:last-child:after, .fxt-template-layout4 .fxt-countdown .countdown-section:last-child:before { display: none; } .fxt-template-layout4 .fxt-countdown .countdown-section .countdown-number { font-size: 60px; line-height: 1; font-weight: 600; color: #ffffff; } @media only screen and (max-width: 1439px) { .fxt-template-layout4 .fxt-countdown .countdown-section .countdown-number { font-size: 56px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout4 .fxt-countdown .countdown-section .countdown-number { font-size: 48px; } } @media only screen and (max-width: 575px) { .fxt-template-layout4 .fxt-countdown .countdown-section .countdown-number { font-size: 42px; } } @media only screen and (max-width: 479px) { .fxt-template-layout4 .fxt-countdown .countdown-section .countdown-number { font-size: 36px; } } .fxt-template-layout4 .fxt-countdown .countdown-section .countdown-unit { color: #d8d8d8; position: absolute; z-index: 1; bottom: -50px; left: 50%; transform: translateX(-50%); font-size: 22px; } @media only screen and (max-width: 991px) { .fxt-template-layout4 .fxt-countdown .countdown-section .countdown-unit { font-size: 20px; bottom: -45px; } } @media only screen and (max-width: 767px) { .fxt-template-layout4 .fxt-countdown .countdown-section .countdown-unit { font-size: 18px; bottom: -40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout4 .fxt-countdown .countdown-section .countdown-unit { font-size: 16px; bottom: -35px; } } @media only screen and (max-width: 575px) { .fxt-template-layout4 .fxt-countdown .countdown-section .countdown-unit { font-size: 15px; bottom: -30px; } } @media only screen and (min-width: 992px) { body.open-sidebar .fxt-template-layout4 .fxt-main-content { min-width: 50vw; max-width: 50vw; } } /*======================================================================== 10. Demo Layout Five =========================================================================*/ .fxt-template-layout5 { display: flex; align-items: flex-start; } @media only screen and (max-width: 991px) { .fxt-template-layout5 { display: block; min-width: 100%; } } .fxt-template-layout5 .fxt-video-background { top: 0; bottom: 0; left: 0; right: 0; position: fixed; } .fxt-template-layout5 .fxt-video-background:before { content: ""; position: absolute; z-index: 2; background-color: rgba(0, 0, 0, 0.4); top: 0; bottom: 0; left: 0; right: 0; } .fxt-template-layout5 .fxt-video-background .fxt-video { height: 100%; width: 100%; position: absolute; z-index: 1; } .fxt-template-layout5 .fxt-main-content { padding: 65px 0; background-position: center; background-size: cover; background-repeat: no-repeat; min-height: 100vh; min-width: 100vw; max-width: 100vw; position: relative; z-index: 1; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; transition: all 0.8s ease-in-out; } @media only screen and (max-width: 991px) { .fxt-template-layout5 .fxt-main-content { min-width: 100%; padding: 55px 15px; } } @media only screen and (max-width: 767px) { .fxt-template-layout5 .fxt-main-content { padding: 45px 15px; } } @media only screen and (max-width: 575px) { .fxt-template-layout5 .fxt-main-content { padding: 35px 15px; } } .fxt-template-layout5 .fxt-main-content:before { content: ""; background-color: rgba(0, 0, 0, 0.2); position: absolute; height: 100%; width: 100%; top: 0; left: 0; z-index: -1; } .fxt-template-layout5 .fxt-main-content .fxt-logo { margin-top: 25px; margin-bottom: 14vh; max-width: 40vw; } .fxt-template-layout5 .fxt-main-content .fxt-sub-title { color: #fff; font-size: 30px; margin-bottom: 5px; } @media only screen and (max-width: 991px) { .fxt-template-layout5 .fxt-main-content .fxt-sub-title { font-size: 26px; } } @media only screen and (max-width: 767px) { .fxt-template-layout5 .fxt-main-content .fxt-sub-title { font-size: 24px; } } @media only screen and (max-width: 575px) { .fxt-template-layout5 .fxt-main-content .fxt-sub-title { font-size: 22px; } } @media only screen and (max-width: 479px) { .fxt-template-layout5 .fxt-main-content .fxt-sub-title { font-size: 20px; } } .fxt-template-layout5 .fxt-main-content .fxt-main-title { color: #fff; font-weight: 600; width: 90%; margin-left: auto; margin-right: auto; } @media only screen and (max-width: 767px) { .fxt-template-layout5 .fxt-main-content .fxt-main-title { width: 95%; } } @media only screen and (max-width: 575px) { .fxt-template-layout5 .fxt-main-content .fxt-main-title { width: 100%; } } .fxt-template-layout5 .fxt-main-content .fxt-paragraph { color: #d8d8d8; width: 70%; margin-left: auto; margin-right: auto; margin-bottom: 70px; } @media only screen and (max-width: 1199px) { .fxt-template-layout5 .fxt-main-content .fxt-paragraph { margin-bottom: 60px; } } @media only screen and (max-width: 991px) { .fxt-template-layout5 .fxt-main-content .fxt-paragraph { margin-bottom: 50px; } } @media only screen and (max-width: 767px) { .fxt-template-layout5 .fxt-main-content .fxt-paragraph { width: 80%; margin-bottom: 40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout5 .fxt-main-content .fxt-paragraph { width: 100%; margin-bottom: 30px; } } .fxt-template-layout5 .fxt-main-content .fxt-buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-bottom: 60px; } @media only screen and (max-width: 991px) { .fxt-template-layout5 .fxt-main-content .fxt-buttons { margin-bottom: 50px; } } @media only screen and (max-width: 767px) { .fxt-template-layout5 .fxt-main-content .fxt-buttons { margin-bottom: 40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout5 .fxt-main-content .fxt-buttons { margin-bottom: 30px; } } .fxt-template-layout5 .fxt-main-content .fxt-buttons .fxt-btn { margin: 0 7px 12px; } .fxt-template-layout5 .fxt-main-content .fxt-btn-ghost { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f1f1f1; color: #f1f1f1; border-radius: 45px; background-color: transparent; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout5 .fxt-main-content .fxt-btn-ghost { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout5 .fxt-main-content .fxt-btn-ghost { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout5 .fxt-main-content .fxt-btn-ghost:hover { background-color: #f11e47; border-color: #f11e47; } .fxt-template-layout5 .fxt-main-content .fxt-btn-ghost:focus { outline: none; } .fxt-template-layout5 .fxt-main-content .fxt-btn-fill { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f11e47; color: #f1f1f1; border-radius: 45px; background-color: #f11e47; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout5 .fxt-main-content .fxt-btn-fill { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout5 .fxt-main-content .fxt-btn-fill { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout5 .fxt-main-content .fxt-btn-fill:hover { background-color: transparent; border-color: #f1f1f1; } .fxt-template-layout5 .fxt-main-content .fxt-btn-fill:focus { outline: none; } .fxt-template-layout5 .fxt-main-content .fxt-socials { margin-bottom: 70px; } @media only screen and (max-width: 991px) { .fxt-template-layout5 .fxt-main-content .fxt-socials { margin-bottom: 60px; } } @media only screen and (max-width: 767px) { .fxt-template-layout5 .fxt-main-content .fxt-socials { margin-bottom: 50px; } } @media only screen and (max-width: 575px) { .fxt-template-layout5 .fxt-main-content .fxt-socials { margin-bottom: 40px; } } .fxt-template-layout5 .fxt-main-content .fxt-socials li { display: inline-block; margin-right: 15px; margin-bottom: 8px; } @media only screen and (max-width: 991px) { .fxt-template-layout5 .fxt-main-content .fxt-socials li { margin-right: 10px; margin-bottom: 5px; } } @media only screen and (max-width: 767px) { .fxt-template-layout5 .fxt-main-content .fxt-socials li { margin-right: 5px; } } .fxt-template-layout5 .fxt-main-content .fxt-socials li:last-child { margin-right: 0; } .fxt-template-layout5 .fxt-main-content .fxt-socials li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 16px; height: 45px; width: 45px; color: #ffffff; background-color: #1f1f1f; border-radius: 50%; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout5 .fxt-main-content .fxt-socials li a { font-size: 15px; height: 40px; width: 40px; } } .fxt-template-layout5 .fxt-main-content .fxt-socials li.fxt-facebook a:hover { background-color: #3b5998; } .fxt-template-layout5 .fxt-main-content .fxt-socials li.fxt-twitter a:hover { background-color: #00acee; } .fxt-template-layout5 .fxt-main-content .fxt-socials li.fxt-google a:hover { background-color: #CC3333; } .fxt-template-layout5 .fxt-main-content .fxt-socials li.fxt-instagram a:hover { background-color: #3f729b; } .fxt-template-layout5 .fxt-main-content .fxt-socials li.fxt-linkedin a:hover { background-color: #0077B5; } .fxt-template-layout5 .fxt-main-content .fxt-socials li.fxt-youtube a:hover { background-color: #c4302b; } .fxt-template-layout5 .fxt-main-content .fxt-socials li.fxt-pinterest a:hover { background-color: #bd081c; } .fxt-template-layout5 .fxt-main-content .fxt-footer p { color: #e3e3e3; font-size: 15px; } @media only screen and (min-width: 992px) { body.open-sidebar .fxt-template-layout5 .fxt-main-content { min-width: 50vw; max-width: 50vw; } } /*======================================================================== 11. Demo Layout Six =========================================================================*/ .fxt-template-layout6 { display: flex; align-items: flex-start; } @media only screen and (max-width: 991px) { .fxt-template-layout6 { display: block; min-width: 100%; } } .fxt-template-layout6 .fxt-video-background { top: 0; bottom: 0; left: 0; right: 0; position: fixed; } .fxt-template-layout6 .fxt-video-background:before { content: ""; position: absolute; z-index: 2; background-color: rgba(0, 0, 0, 0.4); top: 0; bottom: 0; left: 0; right: 0; } .fxt-template-layout6 .fxt-video-background .fxt-video { height: 100%; width: 100%; position: absolute; z-index: 1; } .fxt-template-layout6 .fxt-main-content { padding: 65px 0; background-position: center; background-size: cover; background-repeat: no-repeat; min-height: 100vh; min-width: 100vw; max-width: 100vw; position: relative; z-index: 1; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; transition: all 0.8s ease-in-out; } @media only screen and (max-width: 991px) { .fxt-template-layout6 .fxt-main-content { min-width: 100%; padding: 55px 15px; } } @media only screen and (max-width: 767px) { .fxt-template-layout6 .fxt-main-content { padding: 45px 15px; } } @media only screen and (max-width: 575px) { .fxt-template-layout6 .fxt-main-content { padding: 35px 15px; } } .fxt-template-layout6 .fxt-main-content:before { content: ""; background-color: rgba(0, 0, 0, 0.2); position: absolute; height: 100%; width: 100%; top: 0; left: 0; z-index: -1; } .fxt-template-layout6 .fxt-main-content .fxt-logo { margin-top: 25px; margin-bottom: 14vh; max-width: 40vw; } .fxt-template-layout6 .fxt-main-content .fxt-sub-title { color: #fff; font-size: 46px; font-family: 'Raleway', sans-serif; letter-spacing: 8px; margin-bottom: 25px; line-height: 1.4; margin-left: 8px; } @media only screen and (max-width: 1199px) { .fxt-template-layout6 .fxt-main-content .fxt-sub-title { font-size: 40px; } } @media only screen and (max-width: 991px) { .fxt-template-layout6 .fxt-main-content .fxt-sub-title { font-size: 36px; letter-spacing: 6px; line-height: 1.6; margin-left: 6px; margin-bottom: 20px; } } @media only screen and (max-width: 767px) { .fxt-template-layout6 .fxt-main-content .fxt-sub-title { font-size: 32px; letter-spacing: 4px; line-height: 1.5; margin-left: 4px; margin-bottom: 15px; } } @media only screen and (max-width: 575px) { .fxt-template-layout6 .fxt-main-content .fxt-sub-title { font-size: 28px; letter-spacing: 2px; line-height: 1.4; margin-left: 2px; } } @media only screen and (max-width: 479px) { .fxt-template-layout6 .fxt-main-content .fxt-sub-title { font-size: 26px; line-height: 1.3; } } .fxt-template-layout6 .fxt-main-content .fxt-buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-bottom: 60px; } @media only screen and (max-width: 991px) { .fxt-template-layout6 .fxt-main-content .fxt-buttons { margin-bottom: 50px; } } @media only screen and (max-width: 767px) { .fxt-template-layout6 .fxt-main-content .fxt-buttons { margin-bottom: 40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout6 .fxt-main-content .fxt-buttons { margin-bottom: 30px; } } .fxt-template-layout6 .fxt-main-content .fxt-buttons .fxt-btn { margin: 0 7px 12px; } .fxt-template-layout6 .fxt-main-content .fxt-btn-ghost { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f1f1f1; color: #f1f1f1; border-radius: 45px; background-color: transparent; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout6 .fxt-main-content .fxt-btn-ghost { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout6 .fxt-main-content .fxt-btn-ghost { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout6 .fxt-main-content .fxt-btn-ghost:hover { background-color: #f11e47; border-color: #f11e47; } .fxt-template-layout6 .fxt-main-content .fxt-btn-ghost:focus { outline: none; } .fxt-template-layout6 .fxt-main-content .fxt-btn-fill { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f11e47; color: #f1f1f1; border-radius: 45px; background-color: #f11e47; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout6 .fxt-main-content .fxt-btn-fill { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout6 .fxt-main-content .fxt-btn-fill { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout6 .fxt-main-content .fxt-btn-fill:hover { background-color: transparent; border-color: #f1f1f1; } .fxt-template-layout6 .fxt-main-content .fxt-btn-fill:focus { outline: none; } .fxt-template-layout6 .fxt-main-content .fxt-socials { margin-bottom: 70px; } @media only screen and (max-width: 991px) { .fxt-template-layout6 .fxt-main-content .fxt-socials { margin-bottom: 60px; } } @media only screen and (max-width: 767px) { .fxt-template-layout6 .fxt-main-content .fxt-socials { margin-bottom: 50px; } } @media only screen and (max-width: 575px) { .fxt-template-layout6 .fxt-main-content .fxt-socials { margin-bottom: 40px; } } .fxt-template-layout6 .fxt-main-content .fxt-socials li { display: inline-block; margin-right: 15px; margin-bottom: 8px; } @media only screen and (max-width: 991px) { .fxt-template-layout6 .fxt-main-content .fxt-socials li { margin-right: 10px; margin-bottom: 5px; } } @media only screen and (max-width: 767px) { .fxt-template-layout6 .fxt-main-content .fxt-socials li { margin-right: 5px; } } .fxt-template-layout6 .fxt-main-content .fxt-socials li:last-child { margin-right: 0; } .fxt-template-layout6 .fxt-main-content .fxt-socials li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 16px; height: 45px; width: 45px; color: #ffffff; background-color: #1f1f1f; border-radius: 50%; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout6 .fxt-main-content .fxt-socials li a { font-size: 15px; height: 40px; width: 40px; } } .fxt-template-layout6 .fxt-main-content .fxt-socials li.fxt-facebook a:hover { background-color: #3b5998; } .fxt-template-layout6 .fxt-main-content .fxt-socials li.fxt-twitter a:hover { background-color: #00acee; } .fxt-template-layout6 .fxt-main-content .fxt-socials li.fxt-google a:hover { background-color: #CC3333; } .fxt-template-layout6 .fxt-main-content .fxt-socials li.fxt-instagram a:hover { background-color: #3f729b; } .fxt-template-layout6 .fxt-main-content .fxt-socials li.fxt-linkedin a:hover { background-color: #0077B5; } .fxt-template-layout6 .fxt-main-content .fxt-socials li.fxt-youtube a:hover { background-color: #c4302b; } .fxt-template-layout6 .fxt-main-content .fxt-socials li.fxt-pinterest a:hover { background-color: #bd081c; } .fxt-template-layout6 .fxt-main-content .fxt-footer p { color: #e3e3e3; font-size: 15px; } .fxt-template-layout6 .fxt-countdown { margin-bottom: 70px; padding-bottom: 50px; } @media only screen and (max-width: 1439px) { .fxt-template-layout6 .fxt-countdown { margin-bottom: 60px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout6 .fxt-countdown { margin-bottom: 50px; } } @media only screen and (max-width: 991px) { .fxt-template-layout6 .fxt-countdown { margin-bottom: 40px; } } @media only screen and (max-width: 767px) { .fxt-template-layout6 .fxt-countdown { margin-bottom: 30px; } } @media only screen and (max-width: 575px) { .fxt-template-layout6 .fxt-countdown { margin-bottom: 20px; } } .fxt-template-layout6 .fxt-countdown .countdown-section { display: inline-block; min-width: 70px; margin-right: 35px; padding-right: 35px; position: relative; z-index: 1; } @media only screen and (max-width: 1855px) { .fxt-template-layout6 .fxt-countdown .countdown-section { margin-right: 30px; padding-right: 30px; } } @media only screen and (max-width: 1439px) { .fxt-template-layout6 .fxt-countdown .countdown-section { margin-right: 25px; padding-right: 25px; min-width: 65px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout6 .fxt-countdown .countdown-section { margin-right: 20px; padding-right: 20px; min-width: 60px; } } @media only screen and (max-width: 575px) { .fxt-template-layout6 .fxt-countdown .countdown-section { min-width: 55px; margin-right: 15px; padding-right: 15px; } } @media only screen and (max-width: 479px) { .fxt-template-layout6 .fxt-countdown .countdown-section { min-width: 45px; margin-right: 10px; padding-right: 10px; } } .fxt-template-layout6 .fxt-countdown .countdown-section > div { position: relative; z-index: 1; } .fxt-template-layout6 .fxt-countdown .countdown-section:before { content: ""; height: 10px; width: 10px; border-radius: 50%; background-color: #ffffff; position: absolute; z-index: 1; top: 16px; right: -5px; } @media only screen and (max-width: 1855px) { .fxt-template-layout6 .fxt-countdown .countdown-section:before { top: 15px; } } @media only screen and (max-width: 1439px) { .fxt-template-layout6 .fxt-countdown .countdown-section:before { top: 13px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout6 .fxt-countdown .countdown-section:before { top: 11px; height: 8px; width: 8px; } } @media only screen and (max-width: 575px) { .fxt-template-layout6 .fxt-countdown .countdown-section:before { top: 10px; height: 5px; width: 5px; } } @media only screen and (max-width: 479px) { .fxt-template-layout6 .fxt-countdown .countdown-section:before { top: 8px; right: -3px; } } .fxt-template-layout6 .fxt-countdown .countdown-section:after { content: ""; height: 10px; width: 10px; border-radius: 50%; background-color: #ffffff; position: absolute; z-index: 1; top: 38px; right: -5px; } @media only screen and (max-width: 1855px) { .fxt-template-layout6 .fxt-countdown .countdown-section:after { top: 43px; } } @media only screen and (max-width: 1439px) { .fxt-template-layout6 .fxt-countdown .countdown-section:after { top: 38px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout6 .fxt-countdown .countdown-section:after { top: 32px; height: 8px; width: 8px; } } @media only screen and (max-width: 575px) { .fxt-template-layout6 .fxt-countdown .countdown-section:after { top: 28px; height: 5px; width: 5px; } } @media only screen and (max-width: 479px) { .fxt-template-layout6 .fxt-countdown .countdown-section:after { top: 23px; right: -3px; } } .fxt-template-layout6 .fxt-countdown .countdown-section:last-child { margin-right: 0; padding-right: 0; } .fxt-template-layout6 .fxt-countdown .countdown-section:last-child:after, .fxt-template-layout6 .fxt-countdown .countdown-section:last-child:before { display: none; } .fxt-template-layout6 .fxt-countdown .countdown-section .countdown-number { font-size: 60px; line-height: 1; font-weight: 600; color: #ffffff; } @media only screen and (max-width: 1439px) { .fxt-template-layout6 .fxt-countdown .countdown-section .countdown-number { font-size: 56px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout6 .fxt-countdown .countdown-section .countdown-number { font-size: 48px; } } @media only screen and (max-width: 575px) { .fxt-template-layout6 .fxt-countdown .countdown-section .countdown-number { font-size: 42px; } } @media only screen and (max-width: 479px) { .fxt-template-layout6 .fxt-countdown .countdown-section .countdown-number { font-size: 36px; } } .fxt-template-layout6 .fxt-countdown .countdown-section .countdown-unit { color: #d8d8d8; position: absolute; z-index: 1; bottom: -50px; left: 50%; transform: translateX(-50%); font-size: 22px; } @media only screen and (max-width: 991px) { .fxt-template-layout6 .fxt-countdown .countdown-section .countdown-unit { font-size: 20px; bottom: -45px; } } @media only screen and (max-width: 767px) { .fxt-template-layout6 .fxt-countdown .countdown-section .countdown-unit { font-size: 18px; bottom: -40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout6 .fxt-countdown .countdown-section .countdown-unit { font-size: 16px; bottom: -35px; } } @media only screen and (max-width: 575px) { .fxt-template-layout6 .fxt-countdown .countdown-section .countdown-unit { font-size: 15px; bottom: -30px; } } @media only screen and (min-width: 992px) { body.open-sidebar .fxt-template-layout6 .fxt-main-content { min-width: 50vw; max-width: 50vw; } } /*======================================================================== 12. Demo Layout Seven =========================================================================*/ .fxt-template-layout7 { display: flex; align-items: flex-start; min-height: 100vh; min-width: 100vw; transition: all 0.8s ease-in-out; } @media only screen and (max-width: 991px) { .fxt-template-layout7 { display: block; min-width: 100%; } } .fxt-template-layout7 .fxt-main-content { min-height: 100vh; min-width: 100vw; transition: all 0.8s ease-in-out; } @media only screen and (max-width: 991px) { .fxt-template-layout7 .fxt-main-content { min-width: 100%; } } .fxt-template-layout7 .fxt-main-content .fxt-inner-content { padding-top: 65px; padding-bottom: 65px; padding-left: 10vw; min-height: 100vh; width: 100%; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; background-color: rgba(0, 0, 0, 0.55); } @media only screen and (max-width: 1199px) { .fxt-template-layout7 .fxt-main-content .fxt-inner-content { padding-left: 5vw; } } @media only screen and (max-width: 991px) { .fxt-template-layout7 .fxt-main-content .fxt-inner-content { padding: 55px 15px 55px 30px; } } @media only screen and (max-width: 767px) { .fxt-template-layout7 .fxt-main-content .fxt-inner-content { padding: 45px 15px 45px 30px; } } @media only screen and (max-width: 575px) { .fxt-template-layout7 .fxt-main-content .fxt-inner-content { padding: 35px 15px 35px 30px; } } .fxt-template-layout7 .fxt-main-content .fxt-logo { margin-top: 25px; margin-bottom: 14vh; max-width: 40vw; } .fxt-template-layout7 .fxt-main-content .fxt-sub-title { color: #fff; font-size: 30px; margin-bottom: 5px; } @media only screen and (max-width: 991px) { .fxt-template-layout7 .fxt-main-content .fxt-sub-title { font-size: 26px; } } @media only screen and (max-width: 767px) { .fxt-template-layout7 .fxt-main-content .fxt-sub-title { font-size: 24px; } } @media only screen and (max-width: 575px) { .fxt-template-layout7 .fxt-main-content .fxt-sub-title { font-size: 22px; } } @media only screen and (max-width: 479px) { .fxt-template-layout7 .fxt-main-content .fxt-sub-title { font-size: 20px; } } .fxt-template-layout7 .fxt-main-content .fxt-main-title { color: #fff; font-weight: 700; width: 90%; } @media only screen and (max-width: 767px) { .fxt-template-layout7 .fxt-main-content .fxt-main-title { width: 95%; } } @media only screen and (max-width: 575px) { .fxt-template-layout7 .fxt-main-content .fxt-main-title { width: 100%; } } .fxt-template-layout7 .fxt-main-content .fxt-paragraph { color: #d8d8d8; width: 70%; margin-bottom: 70px; } @media only screen and (max-width: 1199px) { .fxt-template-layout7 .fxt-main-content .fxt-paragraph { margin-bottom: 60px; } } @media only screen and (max-width: 991px) { .fxt-template-layout7 .fxt-main-content .fxt-paragraph { margin-bottom: 50px; } } @media only screen and (max-width: 767px) { .fxt-template-layout7 .fxt-main-content .fxt-paragraph { width: 80%; margin-bottom: 40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout7 .fxt-main-content .fxt-paragraph { width: 100%; margin-bottom: 30px; } } .fxt-template-layout7 .fxt-main-content .fxt-buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; margin-bottom: 60px; } @media only screen and (max-width: 991px) { .fxt-template-layout7 .fxt-main-content .fxt-buttons { margin-bottom: 50px; } } @media only screen and (max-width: 767px) { .fxt-template-layout7 .fxt-main-content .fxt-buttons { margin-bottom: 40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout7 .fxt-main-content .fxt-buttons { margin-bottom: 30px; } } .fxt-template-layout7 .fxt-main-content .fxt-btn-ghost { text-align: center; margin-right: 15px; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f1f1f1; color: #f1f1f1; border-radius: 45px; background-color: transparent; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout7 .fxt-main-content .fxt-btn-ghost { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout7 .fxt-main-content .fxt-btn-ghost { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout7 .fxt-main-content .fxt-btn-ghost:hover { background-color: #f11e47; border-color: #f11e47; } .fxt-template-layout7 .fxt-main-content .fxt-btn-ghost:focus { outline: none; } .fxt-template-layout7 .fxt-main-content .fxt-btn-fill { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f11e47; color: #f1f1f1; border-radius: 45px; background-color: #f11e47; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout7 .fxt-main-content .fxt-btn-fill { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout7 .fxt-main-content .fxt-btn-fill { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout7 .fxt-main-content .fxt-btn-fill:hover { background-color: transparent; border-color: #f1f1f1; } .fxt-template-layout7 .fxt-main-content .fxt-btn-fill:focus { outline: none; } .fxt-template-layout7 .fxt-main-content .fxt-socials { margin-bottom: 70px; } @media only screen and (max-width: 991px) { .fxt-template-layout7 .fxt-main-content .fxt-socials { margin-bottom: 60px; } } @media only screen and (max-width: 767px) { .fxt-template-layout7 .fxt-main-content .fxt-socials { margin-bottom: 50px; } } @media only screen and (max-width: 575px) { .fxt-template-layout7 .fxt-main-content .fxt-socials { margin-bottom: 40px; } } .fxt-template-layout7 .fxt-main-content .fxt-socials li { display: inline-block; margin-right: 15px; margin-bottom: 8px; } @media only screen and (max-width: 991px) { .fxt-template-layout7 .fxt-main-content .fxt-socials li { margin-right: 10px; margin-bottom: 5px; } } @media only screen and (max-width: 767px) { .fxt-template-layout7 .fxt-main-content .fxt-socials li { margin-right: 5px; } } .fxt-template-layout7 .fxt-main-content .fxt-socials li:last-child { margin-right: 0; } .fxt-template-layout7 .fxt-main-content .fxt-socials li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 16px; height: 45px; width: 45px; color: #ffffff; background-color: #3c363b; border-radius: 50%; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout7 .fxt-main-content .fxt-socials li a { font-size: 15px; height: 40px; width: 40px; } } .fxt-template-layout7 .fxt-main-content .fxt-socials li.fxt-facebook a:hover { background-color: #3b5998; } .fxt-template-layout7 .fxt-main-content .fxt-socials li.fxt-twitter a:hover { background-color: #00acee; } .fxt-template-layout7 .fxt-main-content .fxt-socials li.fxt-google a:hover { background-color: #CC3333; } .fxt-template-layout7 .fxt-main-content .fxt-socials li.fxt-instagram a:hover { background-color: #3f729b; } .fxt-template-layout7 .fxt-main-content .fxt-socials li.fxt-linkedin a:hover { background-color: #0077B5; } .fxt-template-layout7 .fxt-main-content .fxt-socials li.fxt-youtube a:hover { background-color: #c4302b; } .fxt-template-layout7 .fxt-main-content .fxt-socials li.fxt-pinterest a:hover { background-color: #bd081c; } .fxt-template-layout7 .fxt-main-content .fxt-footer p { color: #e3e3e3; font-size: 15px; } @media only screen and (min-width: 992px) { body.open-sidebar .fxt-template-layout7 .fxt-main-content { min-width: 50vw; max-width: 50vw; } } /*======================================================================== 13. Demo Layout Eight =========================================================================*/ .fxt-template-layout8 { display: flex; align-items: flex-start; min-height: 100vh; min-width: 100vw; transition: all 0.8s ease-in-out; } @media only screen and (max-width: 991px) { .fxt-template-layout8 { display: block; min-width: 100%; } } .fxt-template-layout8 .fxt-main-content { min-height: 100vh; min-width: 100vw; transition: all 0.8s ease-in-out; } @media only screen and (max-width: 991px) { .fxt-template-layout8 .fxt-main-content { min-width: 100%; } } .fxt-template-layout8 .fxt-main-content .fxt-inner-content { padding-top: 65px; padding-bottom: 65px; padding-left: 10vw; min-height: 100vh; width: 100%; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; background-color: rgba(0, 0, 0, 0.55); } @media only screen and (max-width: 1199px) { .fxt-template-layout8 .fxt-main-content .fxt-inner-content { padding-left: 5vw; } } @media only screen and (max-width: 991px) { .fxt-template-layout8 .fxt-main-content .fxt-inner-content { padding: 55px 15px 55px 30px; } } @media only screen and (max-width: 767px) { .fxt-template-layout8 .fxt-main-content .fxt-inner-content { padding: 45px 15px 45px 30px; } } @media only screen and (max-width: 575px) { .fxt-template-layout8 .fxt-main-content .fxt-inner-content { padding: 35px 15px 35px 30px; } } .fxt-template-layout8 .fxt-main-content .fxt-logo { margin-top: 25px; margin-bottom: 14vh; max-width: 40vw; } .fxt-template-layout8 .fxt-main-content .fxt-sub-title { color: #fff; font-size: 46px; font-family: 'Raleway', sans-serif; letter-spacing: 8px; margin-bottom: 25px; line-height: 1.4; margin-left: 8px; } @media only screen and (max-width: 1199px) { .fxt-template-layout8 .fxt-main-content .fxt-sub-title { font-size: 40px; } } @media only screen and (max-width: 991px) { .fxt-template-layout8 .fxt-main-content .fxt-sub-title { font-size: 36px; letter-spacing: 6px; line-height: 1.6; margin-left: 6px; margin-bottom: 20px; } } @media only screen and (max-width: 767px) { .fxt-template-layout8 .fxt-main-content .fxt-sub-title { font-size: 32px; letter-spacing: 4px; line-height: 1.5; margin-left: 4px; margin-bottom: 15px; } } @media only screen and (max-width: 575px) { .fxt-template-layout8 .fxt-main-content .fxt-sub-title { font-size: 28px; letter-spacing: 2px; line-height: 1.4; margin-left: 2px; } } @media only screen and (max-width: 479px) { .fxt-template-layout8 .fxt-main-content .fxt-sub-title { font-size: 26px; line-height: 1.3; } } .fxt-template-layout8 .fxt-main-content .fxt-buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; margin-bottom: 60px; } @media only screen and (max-width: 991px) { .fxt-template-layout8 .fxt-main-content .fxt-buttons { margin-bottom: 50px; } } @media only screen and (max-width: 767px) { .fxt-template-layout8 .fxt-main-content .fxt-buttons { margin-bottom: 40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout8 .fxt-main-content .fxt-buttons { margin-bottom: 30px; } } .fxt-template-layout8 .fxt-main-content .fxt-btn-ghost { text-align: center; margin-right: 15px; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f1f1f1; color: #f1f1f1; border-radius: 45px; background-color: transparent; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout8 .fxt-main-content .fxt-btn-ghost { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout8 .fxt-main-content .fxt-btn-ghost { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout8 .fxt-main-content .fxt-btn-ghost:hover { background-color: #f11e47; border-color: #f11e47; } .fxt-template-layout8 .fxt-main-content .fxt-btn-ghost:focus { outline: none; } .fxt-template-layout8 .fxt-main-content .fxt-btn-fill { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f11e47; color: #f1f1f1; border-radius: 45px; background-color: #f11e47; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout8 .fxt-main-content .fxt-btn-fill { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout8 .fxt-main-content .fxt-btn-fill { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout8 .fxt-main-content .fxt-btn-fill:hover { background-color: transparent; border-color: #f1f1f1; } .fxt-template-layout8 .fxt-main-content .fxt-btn-fill:focus { outline: none; } .fxt-template-layout8 .fxt-main-content .fxt-socials { margin-bottom: 70px; } @media only screen and (max-width: 991px) { .fxt-template-layout8 .fxt-main-content .fxt-socials { margin-bottom: 60px; } } @media only screen and (max-width: 767px) { .fxt-template-layout8 .fxt-main-content .fxt-socials { margin-bottom: 50px; } } @media only screen and (max-width: 575px) { .fxt-template-layout8 .fxt-main-content .fxt-socials { margin-bottom: 40px; } } .fxt-template-layout8 .fxt-main-content .fxt-socials li { display: inline-block; margin-right: 15px; margin-bottom: 8px; } @media only screen and (max-width: 991px) { .fxt-template-layout8 .fxt-main-content .fxt-socials li { margin-right: 10px; margin-bottom: 5px; } } @media only screen and (max-width: 767px) { .fxt-template-layout8 .fxt-main-content .fxt-socials li { margin-right: 5px; } } .fxt-template-layout8 .fxt-main-content .fxt-socials li:last-child { margin-right: 0; } .fxt-template-layout8 .fxt-main-content .fxt-socials li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 16px; height: 45px; width: 45px; color: #ffffff; background-color: #3c363b; border-radius: 50%; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout8 .fxt-main-content .fxt-socials li a { font-size: 15px; height: 40px; width: 40px; } } .fxt-template-layout8 .fxt-main-content .fxt-socials li.fxt-facebook a:hover { background-color: #3b5998; } .fxt-template-layout8 .fxt-main-content .fxt-socials li.fxt-twitter a:hover { background-color: #00acee; } .fxt-template-layout8 .fxt-main-content .fxt-socials li.fxt-google a:hover { background-color: #CC3333; } .fxt-template-layout8 .fxt-main-content .fxt-socials li.fxt-instagram a:hover { background-color: #3f729b; } .fxt-template-layout8 .fxt-main-content .fxt-socials li.fxt-linkedin a:hover { background-color: #0077B5; } .fxt-template-layout8 .fxt-main-content .fxt-socials li.fxt-youtube a:hover { background-color: #c4302b; } .fxt-template-layout8 .fxt-main-content .fxt-socials li.fxt-pinterest a:hover { background-color: #bd081c; } .fxt-template-layout8 .fxt-main-content .fxt-footer p { color: #e3e3e3; font-size: 15px; } .fxt-template-layout8 .fxt-countdown { margin-bottom: 70px; padding-bottom: 50px; } @media only screen and (max-width: 1439px) { .fxt-template-layout8 .fxt-countdown { margin-bottom: 60px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout8 .fxt-countdown { margin-bottom: 50px; } } @media only screen and (max-width: 991px) { .fxt-template-layout8 .fxt-countdown { margin-bottom: 40px; } } @media only screen and (max-width: 767px) { .fxt-template-layout8 .fxt-countdown { margin-bottom: 30px; } } @media only screen and (max-width: 575px) { .fxt-template-layout8 .fxt-countdown { margin-bottom: 20px; } } .fxt-template-layout8 .fxt-countdown .countdown-section { display: inline-block; min-width: 70px; margin-right: 35px; padding-right: 35px; position: relative; z-index: 1; } @media only screen and (max-width: 1855px) { .fxt-template-layout8 .fxt-countdown .countdown-section { margin-right: 30px; padding-right: 30px; } } @media only screen and (max-width: 1439px) { .fxt-template-layout8 .fxt-countdown .countdown-section { margin-right: 25px; padding-right: 25px; min-width: 65px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout8 .fxt-countdown .countdown-section { margin-right: 20px; padding-right: 20px; min-width: 60px; } } @media only screen and (max-width: 575px) { .fxt-template-layout8 .fxt-countdown .countdown-section { min-width: 55px; margin-right: 15px; padding-right: 15px; } } @media only screen and (max-width: 479px) { .fxt-template-layout8 .fxt-countdown .countdown-section { min-width: 45px; margin-right: 10px; padding-right: 10px; } } .fxt-template-layout8 .fxt-countdown .countdown-section > div { position: relative; z-index: 1; } .fxt-template-layout8 .fxt-countdown .countdown-section:before { content: ""; height: 10px; width: 10px; border-radius: 50%; background-color: #ffffff; position: absolute; z-index: 1; top: 16px; right: -5px; } @media only screen and (max-width: 1855px) { .fxt-template-layout8 .fxt-countdown .countdown-section:before { top: 15px; } } @media only screen and (max-width: 1439px) { .fxt-template-layout8 .fxt-countdown .countdown-section:before { top: 13px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout8 .fxt-countdown .countdown-section:before { top: 11px; height: 8px; width: 8px; } } @media only screen and (max-width: 575px) { .fxt-template-layout8 .fxt-countdown .countdown-section:before { top: 10px; height: 5px; width: 5px; } } @media only screen and (max-width: 479px) { .fxt-template-layout8 .fxt-countdown .countdown-section:before { top: 8px; right: -3px; } } .fxt-template-layout8 .fxt-countdown .countdown-section:after { content: ""; height: 10px; width: 10px; border-radius: 50%; background-color: #ffffff; position: absolute; z-index: 1; top: 38px; right: -5px; } @media only screen and (max-width: 1855px) { .fxt-template-layout8 .fxt-countdown .countdown-section:after { top: 43px; } } @media only screen and (max-width: 1439px) { .fxt-template-layout8 .fxt-countdown .countdown-section:after { top: 38px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout8 .fxt-countdown .countdown-section:after { top: 32px; height: 8px; width: 8px; } } @media only screen and (max-width: 575px) { .fxt-template-layout8 .fxt-countdown .countdown-section:after { top: 28px; height: 5px; width: 5px; } } @media only screen and (max-width: 479px) { .fxt-template-layout8 .fxt-countdown .countdown-section:after { top: 23px; right: -3px; } } .fxt-template-layout8 .fxt-countdown .countdown-section:last-child { margin-right: 0; padding-right: 0; } .fxt-template-layout8 .fxt-countdown .countdown-section:last-child:after, .fxt-template-layout8 .fxt-countdown .countdown-section:last-child:before { display: none; } .fxt-template-layout8 .fxt-countdown .countdown-section .countdown-number { font-size: 60px; line-height: 1; font-weight: 600; color: #ffffff; } @media only screen and (max-width: 1439px) { .fxt-template-layout8 .fxt-countdown .countdown-section .countdown-number { font-size: 56px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout8 .fxt-countdown .countdown-section .countdown-number { font-size: 48px; } } @media only screen and (max-width: 575px) { .fxt-template-layout8 .fxt-countdown .countdown-section .countdown-number { font-size: 42px; } } @media only screen and (max-width: 479px) { .fxt-template-layout8 .fxt-countdown .countdown-section .countdown-number { font-size: 36px; } } .fxt-template-layout8 .fxt-countdown .countdown-section .countdown-unit { color: #d8d8d8; position: absolute; z-index: 1; bottom: -50px; left: 50%; transform: translateX(-50%); font-size: 22px; } @media only screen and (max-width: 991px) { .fxt-template-layout8 .fxt-countdown .countdown-section .countdown-unit { font-size: 20px; bottom: -45px; } } @media only screen and (max-width: 767px) { .fxt-template-layout8 .fxt-countdown .countdown-section .countdown-unit { font-size: 18px; bottom: -40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout8 .fxt-countdown .countdown-section .countdown-unit { font-size: 16px; bottom: -35px; } } @media only screen and (max-width: 575px) { .fxt-template-layout8 .fxt-countdown .countdown-section .countdown-unit { font-size: 15px; bottom: -30px; } } @media only screen and (min-width: 992px) { body.open-sidebar .fxt-template-layout8 .fxt-main-content { min-width: 50vw; max-width: 50vw; } } /*======================================================================== 14. Demo Layout Nine =========================================================================*/ .fxt-template-layout9 { display: flex; align-items: flex-start; } @media only screen and (max-width: 991px) { .fxt-template-layout9 { display: block; min-width: 100%; } } .fxt-template-layout9 #particles-js { position: absolute; left: 0; top: 0; width: 100vw; height: 100%; opacity: 0.5; } .fxt-template-layout9 .fxt-main-content { padding: 65px 0; background-position: center; background-size: cover; background-repeat: no-repeat; min-height: 100vh; min-width: 100vw; position: relative; z-index: 1; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; transition: all 0.8s ease-in-out; } @media only screen and (max-width: 991px) { .fxt-template-layout9 .fxt-main-content { min-width: 100%; padding: 55px 15px; } } @media only screen and (max-width: 767px) { .fxt-template-layout9 .fxt-main-content { padding: 45px 15px; } } @media only screen and (max-width: 575px) { .fxt-template-layout9 .fxt-main-content { padding: 35px 15px; } } .fxt-template-layout9 .fxt-main-content:before { content: ""; background-color: rgba(0, 0, 0, 0.6); position: absolute; height: 100%; width: 100%; top: 0; left: 0; z-index: -1; } .fxt-template-layout9 .fxt-main-content .fxt-logo { margin-top: 25px; margin-bottom: 14vh; max-width: 40vw; } .fxt-template-layout9 .fxt-main-content .fxt-sub-title { color: #fff; font-size: 30px; margin-bottom: 5px; } @media only screen and (max-width: 991px) { .fxt-template-layout9 .fxt-main-content .fxt-sub-title { font-size: 26px; } } @media only screen and (max-width: 767px) { .fxt-template-layout9 .fxt-main-content .fxt-sub-title { font-size: 24px; } } @media only screen and (max-width: 575px) { .fxt-template-layout9 .fxt-main-content .fxt-sub-title { font-size: 22px; } } @media only screen and (max-width: 479px) { .fxt-template-layout9 .fxt-main-content .fxt-sub-title { font-size: 20px; } } .fxt-template-layout9 .fxt-main-content .fxt-main-title { color: #fff; font-weight: 600; width: 90%; margin-left: auto; margin-right: auto; } @media only screen and (max-width: 767px) { .fxt-template-layout9 .fxt-main-content .fxt-main-title { width: 95%; } } @media only screen and (max-width: 575px) { .fxt-template-layout9 .fxt-main-content .fxt-main-title { width: 100%; } } .fxt-template-layout9 .fxt-main-content .fxt-paragraph { color: #d8d8d8; width: 70%; margin-left: auto; margin-right: auto; margin-bottom: 70px; } @media only screen and (max-width: 1199px) { .fxt-template-layout9 .fxt-main-content .fxt-paragraph { margin-bottom: 60px; } } @media only screen and (max-width: 991px) { .fxt-template-layout9 .fxt-main-content .fxt-paragraph { margin-bottom: 50px; } } @media only screen and (max-width: 767px) { .fxt-template-layout9 .fxt-main-content .fxt-paragraph { width: 80%; margin-bottom: 40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout9 .fxt-main-content .fxt-paragraph { width: 100%; margin-bottom: 30px; } } .fxt-template-layout9 .fxt-main-content .fxt-buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-bottom: 60px; } @media only screen and (max-width: 991px) { .fxt-template-layout9 .fxt-main-content .fxt-buttons { margin-bottom: 50px; } } @media only screen and (max-width: 767px) { .fxt-template-layout9 .fxt-main-content .fxt-buttons { margin-bottom: 40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout9 .fxt-main-content .fxt-buttons { margin-bottom: 30px; } } .fxt-template-layout9 .fxt-main-content .fxt-buttons .fxt-btn { margin: 0 7px 12px; } .fxt-template-layout9 .fxt-main-content .fxt-btn-ghost { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f1f1f1; color: #f1f1f1; border-radius: 45px; background-color: transparent; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout9 .fxt-main-content .fxt-btn-ghost { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout9 .fxt-main-content .fxt-btn-ghost { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout9 .fxt-main-content .fxt-btn-ghost:hover { background-color: #f11e47; border-color: #f11e47; } .fxt-template-layout9 .fxt-main-content .fxt-btn-ghost:focus { outline: none; } .fxt-template-layout9 .fxt-main-content .fxt-btn-fill { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f11e47; color: #f1f1f1; border-radius: 45px; background-color: #f11e47; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout9 .fxt-main-content .fxt-btn-fill { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout9 .fxt-main-content .fxt-btn-fill { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout9 .fxt-main-content .fxt-btn-fill:hover { background-color: transparent; border-color: #f1f1f1; } .fxt-template-layout9 .fxt-main-content .fxt-btn-fill:focus { outline: none; } .fxt-template-layout9 .fxt-main-content .fxt-socials { margin-bottom: 70px; } @media only screen and (max-width: 991px) { .fxt-template-layout9 .fxt-main-content .fxt-socials { margin-bottom: 60px; } } @media only screen and (max-width: 767px) { .fxt-template-layout9 .fxt-main-content .fxt-socials { margin-bottom: 50px; } } @media only screen and (max-width: 575px) { .fxt-template-layout9 .fxt-main-content .fxt-socials { margin-bottom: 40px; } } .fxt-template-layout9 .fxt-main-content .fxt-socials li { display: inline-block; margin-right: 15px; margin-bottom: 8px; } @media only screen and (max-width: 991px) { .fxt-template-layout9 .fxt-main-content .fxt-socials li { margin-right: 10px; margin-bottom: 5px; } } @media only screen and (max-width: 767px) { .fxt-template-layout9 .fxt-main-content .fxt-socials li { margin-right: 5px; } } .fxt-template-layout9 .fxt-main-content .fxt-socials li:last-child { margin-right: 0; } .fxt-template-layout9 .fxt-main-content .fxt-socials li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 16px; height: 45px; width: 45px; color: #ffffff; background-color: #1f1f1f; border-radius: 50%; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout9 .fxt-main-content .fxt-socials li a { font-size: 15px; height: 40px; width: 40px; } } .fxt-template-layout9 .fxt-main-content .fxt-socials li.fxt-facebook a:hover { background-color: #3b5998; } .fxt-template-layout9 .fxt-main-content .fxt-socials li.fxt-twitter a:hover { background-color: #00acee; } .fxt-template-layout9 .fxt-main-content .fxt-socials li.fxt-google a:hover { background-color: #CC3333; } .fxt-template-layout9 .fxt-main-content .fxt-socials li.fxt-instagram a:hover { background-color: #3f729b; } .fxt-template-layout9 .fxt-main-content .fxt-socials li.fxt-linkedin a:hover { background-color: #0077B5; } .fxt-template-layout9 .fxt-main-content .fxt-socials li.fxt-youtube a:hover { background-color: #c4302b; } .fxt-template-layout9 .fxt-main-content .fxt-socials li.fxt-pinterest a:hover { background-color: #bd081c; } .fxt-template-layout9 .fxt-main-content .fxt-footer p { color: #e3e3e3; font-size: 15px; } @media only screen and (min-width: 992px) { body.open-sidebar .fxt-template-layout9 .fxt-main-content { min-width: 50vw; max-width: 50vw; } } /*======================================================================== 15. Demo Layout Ten =========================================================================*/ .fxt-template-layout10 { display: flex; align-items: flex-start; } @media only screen and (max-width: 991px) { .fxt-template-layout10 { display: block; min-width: 100%; } } .fxt-template-layout10 #particles-js { position: absolute; left: 0; top: 0; width: 100vw; height: 100%; opacity: 0.5; } .fxt-template-layout10 .fxt-main-content { padding: 65px 0; background-position: center; background-size: cover; background-repeat: no-repeat; min-height: 100vh; min-width: 100vw; position: relative; z-index: 1; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; transition: all 0.8s ease-in-out; } @media only screen and (max-width: 991px) { .fxt-template-layout10 .fxt-main-content { min-width: 100%; padding: 55px 15px; } } @media only screen and (max-width: 767px) { .fxt-template-layout10 .fxt-main-content { padding: 45px 15px; } } @media only screen and (max-width: 575px) { .fxt-template-layout10 .fxt-main-content { padding: 35px 15px; } } .fxt-template-layout10 .fxt-main-content:before { content: ""; background-color: rgba(0, 0, 0, 0.6); position: absolute; height: 100%; width: 100%; top: 0; left: 0; z-index: -1; } .fxt-template-layout10 .fxt-main-content .fxt-logo { margin-top: 25px; margin-bottom: 14vh; max-width: 40vw; } .fxt-template-layout10 .fxt-main-content .fxt-sub-title { color: #fff; font-size: 46px; font-family: 'Raleway', sans-serif; letter-spacing: 8px; margin-bottom: 25px; line-height: 1.4; margin-left: 8px; } @media only screen and (max-width: 1199px) { .fxt-template-layout10 .fxt-main-content .fxt-sub-title { font-size: 40px; } } @media only screen and (max-width: 991px) { .fxt-template-layout10 .fxt-main-content .fxt-sub-title { font-size: 36px; letter-spacing: 6px; line-height: 1.6; margin-left: 6px; margin-bottom: 20px; } } @media only screen and (max-width: 767px) { .fxt-template-layout10 .fxt-main-content .fxt-sub-title { font-size: 32px; letter-spacing: 4px; line-height: 1.5; margin-left: 4px; margin-bottom: 15px; } } @media only screen and (max-width: 575px) { .fxt-template-layout10 .fxt-main-content .fxt-sub-title { font-size: 28px; letter-spacing: 2px; line-height: 1.4; margin-left: 2px; } } @media only screen and (max-width: 479px) { .fxt-template-layout10 .fxt-main-content .fxt-sub-title { font-size: 26px; line-height: 1.3; } } .fxt-template-layout10 .fxt-main-content .fxt-buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-bottom: 60px; } @media only screen and (max-width: 991px) { .fxt-template-layout10 .fxt-main-content .fxt-buttons { margin-bottom: 50px; } } @media only screen and (max-width: 767px) { .fxt-template-layout10 .fxt-main-content .fxt-buttons { margin-bottom: 40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout10 .fxt-main-content .fxt-buttons { margin-bottom: 30px; } } .fxt-template-layout10 .fxt-main-content .fxt-buttons .fxt-btn { margin: 0 7px 12px; } .fxt-template-layout10 .fxt-main-content .fxt-btn-ghost { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f1f1f1; color: #f1f1f1; border-radius: 45px; background-color: transparent; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout10 .fxt-main-content .fxt-btn-ghost { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout10 .fxt-main-content .fxt-btn-ghost { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout10 .fxt-main-content .fxt-btn-ghost:hover { background-color: #f11e47; border-color: #f11e47; } .fxt-template-layout10 .fxt-main-content .fxt-btn-ghost:focus { outline: none; } .fxt-template-layout10 .fxt-main-content .fxt-btn-fill { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f11e47; color: #f1f1f1; border-radius: 45px; background-color: #f11e47; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout10 .fxt-main-content .fxt-btn-fill { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout10 .fxt-main-content .fxt-btn-fill { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout10 .fxt-main-content .fxt-btn-fill:hover { background-color: transparent; border-color: #f1f1f1; } .fxt-template-layout10 .fxt-main-content .fxt-btn-fill:focus { outline: none; } .fxt-template-layout10 .fxt-main-content .fxt-socials { margin-bottom: 70px; } @media only screen and (max-width: 991px) { .fxt-template-layout10 .fxt-main-content .fxt-socials { margin-bottom: 60px; } } @media only screen and (max-width: 767px) { .fxt-template-layout10 .fxt-main-content .fxt-socials { margin-bottom: 50px; } } @media only screen and (max-width: 575px) { .fxt-template-layout10 .fxt-main-content .fxt-socials { margin-bottom: 40px; } } .fxt-template-layout10 .fxt-main-content .fxt-socials li { display: inline-block; margin-right: 15px; margin-bottom: 8px; } @media only screen and (max-width: 991px) { .fxt-template-layout10 .fxt-main-content .fxt-socials li { margin-right: 10px; margin-bottom: 5px; } } @media only screen and (max-width: 767px) { .fxt-template-layout10 .fxt-main-content .fxt-socials li { margin-right: 5px; } } .fxt-template-layout10 .fxt-main-content .fxt-socials li:last-child { margin-right: 0; } .fxt-template-layout10 .fxt-main-content .fxt-socials li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 16px; height: 45px; width: 45px; color: #ffffff; background-color: #1f1f1f; border-radius: 50%; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout10 .fxt-main-content .fxt-socials li a { font-size: 15px; height: 40px; width: 40px; } } .fxt-template-layout10 .fxt-main-content .fxt-socials li.fxt-facebook a:hover { background-color: #3b5998; } .fxt-template-layout10 .fxt-main-content .fxt-socials li.fxt-twitter a:hover { background-color: #00acee; } .fxt-template-layout10 .fxt-main-content .fxt-socials li.fxt-google a:hover { background-color: #CC3333; } .fxt-template-layout10 .fxt-main-content .fxt-socials li.fxt-instagram a:hover { background-color: #3f729b; } .fxt-template-layout10 .fxt-main-content .fxt-socials li.fxt-linkedin a:hover { background-color: #0077B5; } .fxt-template-layout10 .fxt-main-content .fxt-socials li.fxt-youtube a:hover { background-color: #c4302b; } .fxt-template-layout10 .fxt-main-content .fxt-socials li.fxt-pinterest a:hover { background-color: #bd081c; } .fxt-template-layout10 .fxt-main-content .fxt-footer p { color: #e3e3e3; font-size: 15px; } .fxt-template-layout10 .fxt-countdown { margin-bottom: 70px; padding-bottom: 50px; } @media only screen and (max-width: 1439px) { .fxt-template-layout10 .fxt-countdown { margin-bottom: 60px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout10 .fxt-countdown { margin-bottom: 50px; } } @media only screen and (max-width: 991px) { .fxt-template-layout10 .fxt-countdown { margin-bottom: 40px; } } @media only screen and (max-width: 767px) { .fxt-template-layout10 .fxt-countdown { margin-bottom: 30px; } } @media only screen and (max-width: 575px) { .fxt-template-layout10 .fxt-countdown { margin-bottom: 20px; } } .fxt-template-layout10 .fxt-countdown .countdown-section { display: inline-block; min-width: 70px; margin-right: 35px; padding-right: 35px; position: relative; z-index: 1; } @media only screen and (max-width: 1855px) { .fxt-template-layout10 .fxt-countdown .countdown-section { margin-right: 30px; padding-right: 30px; } } @media only screen and (max-width: 1439px) { .fxt-template-layout10 .fxt-countdown .countdown-section { margin-right: 25px; padding-right: 25px; min-width: 65px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout10 .fxt-countdown .countdown-section { margin-right: 20px; padding-right: 20px; min-width: 60px; } } @media only screen and (max-width: 575px) { .fxt-template-layout10 .fxt-countdown .countdown-section { min-width: 55px; margin-right: 15px; padding-right: 15px; } } @media only screen and (max-width: 479px) { .fxt-template-layout10 .fxt-countdown .countdown-section { min-width: 45px; margin-right: 10px; padding-right: 10px; } } .fxt-template-layout10 .fxt-countdown .countdown-section > div { position: relative; z-index: 1; } .fxt-template-layout10 .fxt-countdown .countdown-section:before { content: ""; height: 10px; width: 10px; border-radius: 50%; background-color: #ffffff; position: absolute; z-index: 1; top: 16px; right: -5px; } @media only screen and (max-width: 1855px) { .fxt-template-layout10 .fxt-countdown .countdown-section:before { top: 15px; } } @media only screen and (max-width: 1439px) { .fxt-template-layout10 .fxt-countdown .countdown-section:before { top: 13px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout10 .fxt-countdown .countdown-section:before { top: 11px; height: 8px; width: 8px; } } @media only screen and (max-width: 575px) { .fxt-template-layout10 .fxt-countdown .countdown-section:before { top: 10px; height: 5px; width: 5px; } } @media only screen and (max-width: 479px) { .fxt-template-layout10 .fxt-countdown .countdown-section:before { top: 8px; right: -3px; } } .fxt-template-layout10 .fxt-countdown .countdown-section:after { content: ""; height: 10px; width: 10px; border-radius: 50%; background-color: #ffffff; position: absolute; z-index: 1; top: 38px; right: -5px; } @media only screen and (max-width: 1855px) { .fxt-template-layout10 .fxt-countdown .countdown-section:after { top: 43px; } } @media only screen and (max-width: 1439px) { .fxt-template-layout10 .fxt-countdown .countdown-section:after { top: 38px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout10 .fxt-countdown .countdown-section:after { top: 32px; height: 8px; width: 8px; } } @media only screen and (max-width: 575px) { .fxt-template-layout10 .fxt-countdown .countdown-section:after { top: 28px; height: 5px; width: 5px; } } @media only screen and (max-width: 479px) { .fxt-template-layout10 .fxt-countdown .countdown-section:after { top: 23px; right: -3px; } } .fxt-template-layout10 .fxt-countdown .countdown-section:last-child { margin-right: 0; padding-right: 0; } .fxt-template-layout10 .fxt-countdown .countdown-section:last-child:after, .fxt-template-layout10 .fxt-countdown .countdown-section:last-child:before { display: none; } .fxt-template-layout10 .fxt-countdown .countdown-section .countdown-number { font-size: 60px; line-height: 1; font-weight: 600; color: #ffffff; } @media only screen and (max-width: 1439px) { .fxt-template-layout10 .fxt-countdown .countdown-section .countdown-number { font-size: 56px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout10 .fxt-countdown .countdown-section .countdown-number { font-size: 48px; } } @media only screen and (max-width: 575px) { .fxt-template-layout10 .fxt-countdown .countdown-section .countdown-number { font-size: 42px; } } @media only screen and (max-width: 479px) { .fxt-template-layout10 .fxt-countdown .countdown-section .countdown-number { font-size: 36px; } } .fxt-template-layout10 .fxt-countdown .countdown-section .countdown-unit { color: #d8d8d8; position: absolute; z-index: 1; bottom: -50px; left: 50%; transform: translateX(-50%); font-size: 22px; } @media only screen and (max-width: 991px) { .fxt-template-layout10 .fxt-countdown .countdown-section .countdown-unit { font-size: 20px; bottom: -45px; } } @media only screen and (max-width: 767px) { .fxt-template-layout10 .fxt-countdown .countdown-section .countdown-unit { font-size: 18px; bottom: -40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout10 .fxt-countdown .countdown-section .countdown-unit { font-size: 16px; bottom: -35px; } } @media only screen and (max-width: 575px) { .fxt-template-layout10 .fxt-countdown .countdown-section .countdown-unit { font-size: 15px; bottom: -30px; } } @media only screen and (min-width: 992px) { body.open-sidebar .fxt-template-layout10 .fxt-main-content { min-width: 50vw; max-width: 50vw; } } /*======================================================================== 16. Demo Layout Eleven =========================================================================*/ .fxt-template-layout11 { display: flex; align-items: flex-start; } @media only screen and (max-width: 991px) { .fxt-template-layout11 { display: block; min-width: 100%; } } .fxt-template-layout11 .particles-js-canvas-el { position: absolute; z-index: -1; left: 0; top: 0; width: 100vw !important; opacity: 0.5; } .fxt-template-layout11 .fxt-main-content { padding: 65px 0; background-position: center; background-size: cover; background-repeat: no-repeat; min-height: 100vh; min-width: 100vw; position: relative; z-index: 1; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; transition: all 0.8s ease-in-out; } @media only screen and (max-width: 991px) { .fxt-template-layout11 .fxt-main-content { min-width: 100%; padding: 55px 15px; } } @media only screen and (max-width: 767px) { .fxt-template-layout11 .fxt-main-content { padding: 45px 15px; } } @media only screen and (max-width: 575px) { .fxt-template-layout11 .fxt-main-content { padding: 35px 15px; } } .fxt-template-layout11 .fxt-main-content:before { content: ""; background-color: rgba(0, 0, 0, 0.6); position: absolute; height: 100%; width: 100%; top: 0; left: 0; z-index: -1; } .fxt-template-layout11 .fxt-main-content .fxt-logo { margin-top: 25px; margin-bottom: 14vh; max-width: 40vw; } .fxt-template-layout11 .fxt-main-content .fxt-sub-title { color: #fff; font-size: 30px; margin-bottom: 5px; } @media only screen and (max-width: 991px) { .fxt-template-layout11 .fxt-main-content .fxt-sub-title { font-size: 26px; } } @media only screen and (max-width: 767px) { .fxt-template-layout11 .fxt-main-content .fxt-sub-title { font-size: 24px; } } @media only screen and (max-width: 575px) { .fxt-template-layout11 .fxt-main-content .fxt-sub-title { font-size: 22px; } } @media only screen and (max-width: 479px) { .fxt-template-layout11 .fxt-main-content .fxt-sub-title { font-size: 20px; } } .fxt-template-layout11 .fxt-main-content .fxt-main-title { color: #fff; font-weight: 600; width: 90%; margin-left: auto; margin-right: auto; } @media only screen and (max-width: 767px) { .fxt-template-layout11 .fxt-main-content .fxt-main-title { width: 95%; } } @media only screen and (max-width: 575px) { .fxt-template-layout11 .fxt-main-content .fxt-main-title { width: 100%; } } .fxt-template-layout11 .fxt-main-content .fxt-paragraph { color: #d8d8d8; width: 70%; margin-left: auto; margin-right: auto; margin-bottom: 70px; } @media only screen and (max-width: 1199px) { .fxt-template-layout11 .fxt-main-content .fxt-paragraph { margin-bottom: 60px; } } @media only screen and (max-width: 991px) { .fxt-template-layout11 .fxt-main-content .fxt-paragraph { margin-bottom: 50px; } } @media only screen and (max-width: 767px) { .fxt-template-layout11 .fxt-main-content .fxt-paragraph { width: 80%; margin-bottom: 40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout11 .fxt-main-content .fxt-paragraph { width: 100%; margin-bottom: 30px; } } .fxt-template-layout11 .fxt-main-content .fxt-buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-bottom: 60px; } @media only screen and (max-width: 991px) { .fxt-template-layout11 .fxt-main-content .fxt-buttons { margin-bottom: 50px; } } @media only screen and (max-width: 767px) { .fxt-template-layout11 .fxt-main-content .fxt-buttons { margin-bottom: 40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout11 .fxt-main-content .fxt-buttons { margin-bottom: 30px; } } .fxt-template-layout11 .fxt-main-content .fxt-buttons .fxt-btn { margin: 0 7px 12px; } .fxt-template-layout11 .fxt-main-content .fxt-btn-ghost { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f1f1f1; color: #f1f1f1; border-radius: 45px; background-color: transparent; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout11 .fxt-main-content .fxt-btn-ghost { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout11 .fxt-main-content .fxt-btn-ghost { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout11 .fxt-main-content .fxt-btn-ghost:hover { background-color: #f11e47; border-color: #f11e47; } .fxt-template-layout11 .fxt-main-content .fxt-btn-ghost:focus { outline: none; } .fxt-template-layout11 .fxt-main-content .fxt-btn-fill { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f11e47; color: #f1f1f1; border-radius: 45px; background-color: #f11e47; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout11 .fxt-main-content .fxt-btn-fill { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout11 .fxt-main-content .fxt-btn-fill { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout11 .fxt-main-content .fxt-btn-fill:hover { background-color: transparent; border-color: #f1f1f1; } .fxt-template-layout11 .fxt-main-content .fxt-btn-fill:focus { outline: none; } .fxt-template-layout11 .fxt-main-content .fxt-socials { margin-bottom: 70px; } @media only screen and (max-width: 991px) { .fxt-template-layout11 .fxt-main-content .fxt-socials { margin-bottom: 60px; } } @media only screen and (max-width: 767px) { .fxt-template-layout11 .fxt-main-content .fxt-socials { margin-bottom: 50px; } } @media only screen and (max-width: 575px) { .fxt-template-layout11 .fxt-main-content .fxt-socials { margin-bottom: 40px; } } .fxt-template-layout11 .fxt-main-content .fxt-socials li { display: inline-block; margin-right: 15px; margin-bottom: 8px; } @media only screen and (max-width: 991px) { .fxt-template-layout11 .fxt-main-content .fxt-socials li { margin-right: 10px; margin-bottom: 5px; } } @media only screen and (max-width: 767px) { .fxt-template-layout11 .fxt-main-content .fxt-socials li { margin-right: 5px; } } .fxt-template-layout11 .fxt-main-content .fxt-socials li:last-child { margin-right: 0; } .fxt-template-layout11 .fxt-main-content .fxt-socials li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 16px; height: 45px; width: 45px; color: #ffffff; background-color: #1f1f1f; border-radius: 50%; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout11 .fxt-main-content .fxt-socials li a { font-size: 15px; height: 40px; width: 40px; } } .fxt-template-layout11 .fxt-main-content .fxt-socials li.fxt-facebook a:hover { background-color: #3b5998; } .fxt-template-layout11 .fxt-main-content .fxt-socials li.fxt-twitter a:hover { background-color: #00acee; } .fxt-template-layout11 .fxt-main-content .fxt-socials li.fxt-google a:hover { background-color: #CC3333; } .fxt-template-layout11 .fxt-main-content .fxt-socials li.fxt-instagram a:hover { background-color: #3f729b; } .fxt-template-layout11 .fxt-main-content .fxt-socials li.fxt-linkedin a:hover { background-color: #0077B5; } .fxt-template-layout11 .fxt-main-content .fxt-socials li.fxt-youtube a:hover { background-color: #c4302b; } .fxt-template-layout11 .fxt-main-content .fxt-socials li.fxt-pinterest a:hover { background-color: #bd081c; } .fxt-template-layout11 .fxt-main-content .fxt-footer p { color: #e3e3e3; font-size: 15px; } @media only screen and (min-width: 992px) { body.open-sidebar .fxt-template-layout11 .fxt-main-content { min-width: 50vw; max-width: 50vw; } } /*======================================================================== 17. Demo Layout Twelve =========================================================================*/ .fxt-template-layout12 { display: flex; align-items: flex-start; } @media only screen and (max-width: 991px) { .fxt-template-layout12 { display: block; min-width: 100%; } } .fxt-template-layout12 .particles-js-canvas-el { position: absolute; z-index: -1; left: 0; top: 0; width: 100vw !important; opacity: 0.5; } .fxt-template-layout12 .fxt-main-content { padding: 65px 0; background-position: center; background-size: cover; background-repeat: no-repeat; min-height: 100vh; min-width: 100vw; position: relative; z-index: 1; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; transition: all 0.8s ease-in-out; } @media only screen and (max-width: 991px) { .fxt-template-layout12 .fxt-main-content { min-width: 100%; padding: 55px 15px; } } @media only screen and (max-width: 767px) { .fxt-template-layout12 .fxt-main-content { padding: 45px 15px; } } @media only screen and (max-width: 575px) { .fxt-template-layout12 .fxt-main-content { padding: 35px 15px; } } .fxt-template-layout12 .fxt-main-content:before { content: ""; background-color: rgba(0, 0, 0, 0.6); position: absolute; height: 100%; width: 100%; top: 0; left: 0; z-index: -1; } .fxt-template-layout12 .fxt-main-content .fxt-logo { margin-top: 25px; margin-bottom: 14vh; max-width: 40vw; } .fxt-template-layout12 .fxt-main-content .fxt-sub-title { color: #fff; font-size: 46px; font-family: 'Raleway', sans-serif; letter-spacing: 8px; margin-bottom: 25px; line-height: 1.4; margin-left: 8px; } @media only screen and (max-width: 1199px) { .fxt-template-layout12 .fxt-main-content .fxt-sub-title { font-size: 40px; } } @media only screen and (max-width: 991px) { .fxt-template-layout12 .fxt-main-content .fxt-sub-title { font-size: 36px; letter-spacing: 6px; line-height: 1.6; margin-left: 6px; margin-bottom: 20px; } } @media only screen and (max-width: 767px) { .fxt-template-layout12 .fxt-main-content .fxt-sub-title { font-size: 32px; letter-spacing: 4px; line-height: 1.5; margin-left: 4px; margin-bottom: 15px; } } @media only screen and (max-width: 575px) { .fxt-template-layout12 .fxt-main-content .fxt-sub-title { font-size: 28px; letter-spacing: 2px; line-height: 1.4; margin-left: 2px; } } @media only screen and (max-width: 479px) { .fxt-template-layout12 .fxt-main-content .fxt-sub-title { font-size: 26px; line-height: 1.3; } } .fxt-template-layout12 .fxt-main-content .fxt-buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-bottom: 60px; } @media only screen and (max-width: 991px) { .fxt-template-layout12 .fxt-main-content .fxt-buttons { margin-bottom: 50px; } } @media only screen and (max-width: 767px) { .fxt-template-layout12 .fxt-main-content .fxt-buttons { margin-bottom: 40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout12 .fxt-main-content .fxt-buttons { margin-bottom: 30px; } } .fxt-template-layout12 .fxt-main-content .fxt-buttons .fxt-btn { margin: 0 7px 12px; } .fxt-template-layout12 .fxt-main-content .fxt-btn-ghost { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f1f1f1; color: #f1f1f1; border-radius: 45px; background-color: transparent; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout12 .fxt-main-content .fxt-btn-ghost { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout12 .fxt-main-content .fxt-btn-ghost { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout12 .fxt-main-content .fxt-btn-ghost:hover { background-color: #f11e47; border-color: #f11e47; } .fxt-template-layout12 .fxt-main-content .fxt-btn-ghost:focus { outline: none; } .fxt-template-layout12 .fxt-main-content .fxt-btn-fill { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f11e47; color: #f1f1f1; border-radius: 45px; background-color: #f11e47; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout12 .fxt-main-content .fxt-btn-fill { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout12 .fxt-main-content .fxt-btn-fill { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout12 .fxt-main-content .fxt-btn-fill:hover { background-color: transparent; border-color: #f1f1f1; } .fxt-template-layout12 .fxt-main-content .fxt-btn-fill:focus { outline: none; } .fxt-template-layout12 .fxt-main-content .fxt-socials { margin-bottom: 70px; } @media only screen and (max-width: 991px) { .fxt-template-layout12 .fxt-main-content .fxt-socials { margin-bottom: 60px; } } @media only screen and (max-width: 767px) { .fxt-template-layout12 .fxt-main-content .fxt-socials { margin-bottom: 50px; } } @media only screen and (max-width: 575px) { .fxt-template-layout12 .fxt-main-content .fxt-socials { margin-bottom: 40px; } } .fxt-template-layout12 .fxt-main-content .fxt-socials li { display: inline-block; margin-right: 15px; margin-bottom: 8px; } @media only screen and (max-width: 991px) { .fxt-template-layout12 .fxt-main-content .fxt-socials li { margin-right: 10px; margin-bottom: 5px; } } @media only screen and (max-width: 767px) { .fxt-template-layout12 .fxt-main-content .fxt-socials li { margin-right: 5px; } } .fxt-template-layout12 .fxt-main-content .fxt-socials li:last-child { margin-right: 0; } .fxt-template-layout12 .fxt-main-content .fxt-socials li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 16px; height: 45px; width: 45px; color: #ffffff; background-color: #1f1f1f; border-radius: 50%; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout12 .fxt-main-content .fxt-socials li a { font-size: 15px; height: 40px; width: 40px; } } .fxt-template-layout12 .fxt-main-content .fxt-socials li.fxt-facebook a:hover { background-color: #3b5998; } .fxt-template-layout12 .fxt-main-content .fxt-socials li.fxt-twitter a:hover { background-color: #00acee; } .fxt-template-layout12 .fxt-main-content .fxt-socials li.fxt-google a:hover { background-color: #CC3333; } .fxt-template-layout12 .fxt-main-content .fxt-socials li.fxt-instagram a:hover { background-color: #3f729b; } .fxt-template-layout12 .fxt-main-content .fxt-socials li.fxt-linkedin a:hover { background-color: #0077B5; } .fxt-template-layout12 .fxt-main-content .fxt-socials li.fxt-youtube a:hover { background-color: #c4302b; } .fxt-template-layout12 .fxt-main-content .fxt-socials li.fxt-pinterest a:hover { background-color: #bd081c; } .fxt-template-layout12 .fxt-main-content .fxt-footer p { color: #e3e3e3; font-size: 15px; } .fxt-template-layout12 .fxt-countdown { margin-bottom: 70px; padding-bottom: 50px; } @media only screen and (max-width: 1439px) { .fxt-template-layout12 .fxt-countdown { margin-bottom: 60px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout12 .fxt-countdown { margin-bottom: 50px; } } @media only screen and (max-width: 991px) { .fxt-template-layout12 .fxt-countdown { margin-bottom: 40px; } } @media only screen and (max-width: 767px) { .fxt-template-layout12 .fxt-countdown { margin-bottom: 30px; } } @media only screen and (max-width: 575px) { .fxt-template-layout12 .fxt-countdown { margin-bottom: 20px; } } .fxt-template-layout12 .fxt-countdown .countdown-section { display: inline-block; min-width: 70px; margin-right: 35px; padding-right: 35px; position: relative; z-index: 1; } @media only screen and (max-width: 1855px) { .fxt-template-layout12 .fxt-countdown .countdown-section { margin-right: 30px; padding-right: 30px; } } @media only screen and (max-width: 1439px) { .fxt-template-layout12 .fxt-countdown .countdown-section { margin-right: 25px; padding-right: 25px; min-width: 65px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout12 .fxt-countdown .countdown-section { margin-right: 20px; padding-right: 20px; min-width: 60px; } } @media only screen and (max-width: 575px) { .fxt-template-layout12 .fxt-countdown .countdown-section { min-width: 55px; margin-right: 15px; padding-right: 15px; } } @media only screen and (max-width: 479px) { .fxt-template-layout12 .fxt-countdown .countdown-section { min-width: 45px; margin-right: 10px; padding-right: 10px; } } .fxt-template-layout12 .fxt-countdown .countdown-section > div { position: relative; z-index: 1; } .fxt-template-layout12 .fxt-countdown .countdown-section:before { content: ""; height: 10px; width: 10px; border-radius: 50%; background-color: #ffffff; position: absolute; z-index: 1; top: 16px; right: -5px; } @media only screen and (max-width: 1855px) { .fxt-template-layout12 .fxt-countdown .countdown-section:before { top: 15px; } } @media only screen and (max-width: 1439px) { .fxt-template-layout12 .fxt-countdown .countdown-section:before { top: 13px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout12 .fxt-countdown .countdown-section:before { top: 11px; height: 8px; width: 8px; } } @media only screen and (max-width: 575px) { .fxt-template-layout12 .fxt-countdown .countdown-section:before { top: 10px; height: 5px; width: 5px; } } @media only screen and (max-width: 479px) { .fxt-template-layout12 .fxt-countdown .countdown-section:before { top: 8px; right: -3px; } } .fxt-template-layout12 .fxt-countdown .countdown-section:after { content: ""; height: 10px; width: 10px; border-radius: 50%; background-color: #ffffff; position: absolute; z-index: 1; top: 38px; right: -5px; } @media only screen and (max-width: 1855px) { .fxt-template-layout12 .fxt-countdown .countdown-section:after { top: 43px; } } @media only screen and (max-width: 1439px) { .fxt-template-layout12 .fxt-countdown .countdown-section:after { top: 38px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout12 .fxt-countdown .countdown-section:after { top: 32px; height: 8px; width: 8px; } } @media only screen and (max-width: 575px) { .fxt-template-layout12 .fxt-countdown .countdown-section:after { top: 28px; height: 5px; width: 5px; } } @media only screen and (max-width: 479px) { .fxt-template-layout12 .fxt-countdown .countdown-section:after { top: 23px; right: -3px; } } .fxt-template-layout12 .fxt-countdown .countdown-section:last-child { margin-right: 0; padding-right: 0; } .fxt-template-layout12 .fxt-countdown .countdown-section:last-child:after, .fxt-template-layout12 .fxt-countdown .countdown-section:last-child:before { display: none; } .fxt-template-layout12 .fxt-countdown .countdown-section .countdown-number { font-size: 60px; line-height: 1; font-weight: 600; color: #ffffff; } @media only screen and (max-width: 1439px) { .fxt-template-layout12 .fxt-countdown .countdown-section .countdown-number { font-size: 56px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout12 .fxt-countdown .countdown-section .countdown-number { font-size: 48px; } } @media only screen and (max-width: 575px) { .fxt-template-layout12 .fxt-countdown .countdown-section .countdown-number { font-size: 42px; } } @media only screen and (max-width: 479px) { .fxt-template-layout12 .fxt-countdown .countdown-section .countdown-number { font-size: 36px; } } .fxt-template-layout12 .fxt-countdown .countdown-section .countdown-unit { color: #d8d8d8; position: absolute; z-index: 1; bottom: -50px; left: 50%; transform: translateX(-50%); font-size: 22px; } @media only screen and (max-width: 991px) { .fxt-template-layout12 .fxt-countdown .countdown-section .countdown-unit { font-size: 20px; bottom: -45px; } } @media only screen and (max-width: 767px) { .fxt-template-layout12 .fxt-countdown .countdown-section .countdown-unit { font-size: 18px; bottom: -40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout12 .fxt-countdown .countdown-section .countdown-unit { font-size: 16px; bottom: -35px; } } @media only screen and (max-width: 575px) { .fxt-template-layout12 .fxt-countdown .countdown-section .countdown-unit { font-size: 15px; bottom: -30px; } } @media only screen and (min-width: 992px) { body.open-sidebar .fxt-template-layout12 .fxt-main-content { min-width: 50vw; max-width: 50vw; } } /*======================================================================== 18. Demo Layout Thirteen =========================================================================*/ .fxt-template-layout13 { background-color: #fff; display: flex; align-items: flex-start; } @media only screen and (max-width: 991px) { .fxt-template-layout13 { display: block; min-width: 100%; } } .fxt-template-layout13 .fxt-main-content { min-height: 100vh; min-width: 100vw; transition: all 0.8s ease-in-out; } @media only screen and (max-width: 991px) { .fxt-template-layout13 .fxt-main-content { min-width: 100%; } } .fxt-template-layout13 .fxt-main-content .fxt-left-content { min-height: 100vh; display: flex; justify-content: center; flex-direction: column; padding-left: 6vw; padding-top: 65px; padding-bottom: 65px; } @media only screen and (max-width: 991px) { .fxt-template-layout13 .fxt-main-content .fxt-left-content { padding: 55px 15px 55px 10vw; } } @media only screen and (max-width: 767px) { .fxt-template-layout13 .fxt-main-content .fxt-left-content { padding: 45px 15px 45px 5vw; } } @media only screen and (max-width: 575px) { .fxt-template-layout13 .fxt-main-content .fxt-left-content { padding: 35px 15px 35px 30px; } } .fxt-template-layout13 .fxt-main-content .fxt-logo { margin-top: 25px; margin-bottom: 14vh; max-width: 40vw; } .fxt-template-layout13 .fxt-main-content .fxt-sub-title { color: #f11e47; font-size: 30px; margin-bottom: 5px; } @media only screen and (max-width: 991px) { .fxt-template-layout13 .fxt-main-content .fxt-sub-title { font-size: 26px; } } @media only screen and (max-width: 767px) { .fxt-template-layout13 .fxt-main-content .fxt-sub-title { font-size: 24px; } } @media only screen and (max-width: 575px) { .fxt-template-layout13 .fxt-main-content .fxt-sub-title { font-size: 22px; } } @media only screen and (max-width: 479px) { .fxt-template-layout13 .fxt-main-content .fxt-sub-title { font-size: 20px; } } .fxt-template-layout13 .fxt-main-content .fxt-main-title { color: #000; font-weight: 600; width: 90%; } @media only screen and (max-width: 767px) { .fxt-template-layout13 .fxt-main-content .fxt-main-title { width: 95%; } } @media only screen and (max-width: 575px) { .fxt-template-layout13 .fxt-main-content .fxt-main-title { width: 100%; } } .fxt-template-layout13 .fxt-main-content .fxt-paragraph { color: #666666; width: 70%; margin-bottom: 70px; } @media only screen and (max-width: 1199px) { .fxt-template-layout13 .fxt-main-content .fxt-paragraph { margin-bottom: 60px; } } @media only screen and (max-width: 991px) { .fxt-template-layout13 .fxt-main-content .fxt-paragraph { margin-bottom: 50px; } } @media only screen and (max-width: 767px) { .fxt-template-layout13 .fxt-main-content .fxt-paragraph { width: 80%; margin-bottom: 40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout13 .fxt-main-content .fxt-paragraph { width: 100%; margin-bottom: 30px; } } .fxt-template-layout13 .fxt-main-content .fxt-buttons { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 60px; } @media only screen and (max-width: 991px) { .fxt-template-layout13 .fxt-main-content .fxt-buttons { margin-bottom: 50px; } } @media only screen and (max-width: 767px) { .fxt-template-layout13 .fxt-main-content .fxt-buttons { margin-bottom: 40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout13 .fxt-main-content .fxt-buttons { margin-bottom: 30px; } } .fxt-template-layout13 .fxt-main-content .fxt-btn-ghost { text-align: center; margin-right: 15px; margin-bottom: 10px; font-family: 'Roboto', sans-serif; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #dedede; color: #000; border-radius: 45px; background-color: transparent; padding: 12px 35px; min-width: 180px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout13 .fxt-main-content .fxt-btn-ghost { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout13 .fxt-main-content .fxt-btn-ghost { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout13 .fxt-main-content .fxt-btn-ghost:hover { background-color: #f11e47; border-color: #f11e47; color: #f1f1f1; } .fxt-template-layout13 .fxt-main-content .fxt-btn-ghost:focus { outline: none; } .fxt-template-layout13 .fxt-main-content .fxt-btn-fill { text-align: center; font-family: 'Roboto', sans-serif; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f11e47; color: #f1f1f1; border-radius: 45px; background-color: #f11e47; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout13 .fxt-main-content .fxt-btn-fill { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout13 .fxt-main-content .fxt-btn-fill { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout13 .fxt-main-content .fxt-btn-fill:hover { background-color: transparent; border-color: #dedede; color: #000; } .fxt-template-layout13 .fxt-main-content .fxt-btn-fill:focus { outline: none; } .fxt-template-layout13 .fxt-main-content .fxt-socials { margin-bottom: 70px; } @media only screen and (max-width: 991px) { .fxt-template-layout13 .fxt-main-content .fxt-socials { margin-bottom: 60px; } } @media only screen and (max-width: 767px) { .fxt-template-layout13 .fxt-main-content .fxt-socials { margin-bottom: 50px; } } @media only screen and (max-width: 575px) { .fxt-template-layout13 .fxt-main-content .fxt-socials { margin-bottom: 40px; } } .fxt-template-layout13 .fxt-main-content .fxt-socials li { display: inline-block; margin-right: 10px; margin-bottom: 8px; } @media only screen and (max-width: 991px) { .fxt-template-layout13 .fxt-main-content .fxt-socials li { margin-right: 10px; margin-bottom: 5px; } } @media only screen and (max-width: 767px) { .fxt-template-layout13 .fxt-main-content .fxt-socials li { margin-right: 5px; } } .fxt-template-layout13 .fxt-main-content .fxt-socials li:last-child { margin-right: 0; } .fxt-template-layout13 .fxt-main-content .fxt-socials li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 16px; height: 45px; width: 45px; color: #666666; background-color: transparent; border-radius: 50%; border: 1px solid; border-color: #dedede; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout13 .fxt-main-content .fxt-socials li a { font-size: 15px; height: 40px; width: 40px; } } .fxt-template-layout13 .fxt-main-content .fxt-socials li a:hover { color: #fff; } .fxt-template-layout13 .fxt-main-content .fxt-socials li.fxt-facebook a:hover { background-color: #3b5998; border-color: #3b5998; } .fxt-template-layout13 .fxt-main-content .fxt-socials li.fxt-twitter a:hover { background-color: #00acee; border-color: #00acee; } .fxt-template-layout13 .fxt-main-content .fxt-socials li.fxt-google a:hover { background-color: #CC3333; border-color: #CC3333; } .fxt-template-layout13 .fxt-main-content .fxt-socials li.fxt-instagram a:hover { background-color: #3f729b; border-color: #3f729b; } .fxt-template-layout13 .fxt-main-content .fxt-socials li.fxt-linkedin a:hover { background-color: #0077B5; border-color: #0077B5; } .fxt-template-layout13 .fxt-main-content .fxt-socials li.fxt-youtube a:hover { background-color: #c4302b; border-color: #c4302b; } .fxt-template-layout13 .fxt-main-content .fxt-socials li.fxt-pinterest a:hover { background-color: #bd081c; border-color: #bd081c; } .fxt-template-layout13 .fxt-main-content .fxt-footer p { color: #000000; font-size: 15px; } .fxt-template-layout13 .fxt-main-content .fxt-bg-color { overflow: hidden; padding: 90px; min-height: 100vh; background: #6463f1; background: linear-gradient(180deg, #6463f1 0%, #6b6af5 100%); } @media only screen and (max-width: 991px) { .fxt-template-layout13 .fxt-main-content .fxt-bg-color { padding: 80px 70px; min-height: 100%; } } @media only screen and (max-width: 767px) { .fxt-template-layout13 .fxt-main-content .fxt-bg-color { padding: 70px 60px; } } @media only screen and (max-width: 575px) { .fxt-template-layout13 .fxt-main-content .fxt-bg-color { padding: 60px 50px; } } @media only screen and (max-width: 479px) { .fxt-template-layout13 .fxt-main-content .fxt-bg-color { padding: 50px 40px; } } .fxt-template-layout13 .fxt-main-content .fxt-figure { height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; } @media only screen and (min-width: 992px) { body.open-sidebar .fxt-template-layout13 .fxt-main-content { transform: translateX(-50%); } } /*======================================================================== 19. Demo Layout Fourteen =========================================================================*/ .fxt-template-layout14 { display: flex; align-items: flex-start; } @media only screen and (max-width: 991px) { .fxt-template-layout14 { display: block; min-width: 100%; } } .fxt-template-layout14 .fxt-main-content { min-height: 100vh; min-width: 100vw; transition: all 0.8s ease-in-out; } @media only screen and (max-width: 991px) { .fxt-template-layout14 .fxt-main-content { min-width: 100%; } } .fxt-template-layout14 .fxt-main-content .fxt-left-content { min-height: 100vh; display: flex; justify-content: center; flex-direction: column; padding-left: 6vw; padding-top: 65px; padding-bottom: 65px; } @media only screen and (max-width: 991px) { .fxt-template-layout14 .fxt-main-content .fxt-left-content { padding: 55px 15px 55px 10vw; } } @media only screen and (max-width: 767px) { .fxt-template-layout14 .fxt-main-content .fxt-left-content { padding: 45px 15px 45px 5vw; } } @media only screen and (max-width: 575px) { .fxt-template-layout14 .fxt-main-content .fxt-left-content { padding: 35px 15px 35px 30px; } } .fxt-template-layout14 .fxt-main-content .fxt-logo { margin-top: 25px; margin-bottom: 14vh; max-width: 40vw; } .fxt-template-layout14 .fxt-main-content .fxt-sub-title { color: #f11e47; font-size: 46px; font-family: 'Raleway', sans-serif; letter-spacing: 8px; margin-bottom: 25px; line-height: 1.4; margin-left: 8px; } @media only screen and (max-width: 1199px) { .fxt-template-layout14 .fxt-main-content .fxt-sub-title { font-size: 40px; } } @media only screen and (max-width: 991px) { .fxt-template-layout14 .fxt-main-content .fxt-sub-title { font-size: 36px; letter-spacing: 6px; line-height: 1.6; margin-left: 6px; margin-bottom: 20px; } } @media only screen and (max-width: 767px) { .fxt-template-layout14 .fxt-main-content .fxt-sub-title { font-size: 32px; letter-spacing: 4px; line-height: 1.5; margin-left: 4px; margin-bottom: 15px; } } @media only screen and (max-width: 575px) { .fxt-template-layout14 .fxt-main-content .fxt-sub-title { font-size: 28px; letter-spacing: 2px; line-height: 1.4; margin-left: 2px; } } @media only screen and (max-width: 479px) { .fxt-template-layout14 .fxt-main-content .fxt-sub-title { font-size: 26px; line-height: 1.3; } } .fxt-template-layout14 .fxt-main-content .fxt-buttons { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 60px; } @media only screen and (max-width: 991px) { .fxt-template-layout14 .fxt-main-content .fxt-buttons { margin-bottom: 50px; } } @media only screen and (max-width: 767px) { .fxt-template-layout14 .fxt-main-content .fxt-buttons { margin-bottom: 40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout14 .fxt-main-content .fxt-buttons { margin-bottom: 30px; } } .fxt-template-layout14 .fxt-main-content .fxt-btn-ghost { text-align: center; margin-right: 15px; margin-bottom: 10px; font-family: 'Roboto', sans-serif; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #dedede; color: #000; border-radius: 45px; background-color: transparent; padding: 12px 35px; min-width: 180px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout14 .fxt-main-content .fxt-btn-ghost { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout14 .fxt-main-content .fxt-btn-ghost { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout14 .fxt-main-content .fxt-btn-ghost:hover { background-color: #f11e47; border-color: #f11e47; color: #f1f1f1; } .fxt-template-layout14 .fxt-main-content .fxt-btn-ghost:focus { outline: none; } .fxt-template-layout14 .fxt-main-content .fxt-btn-fill { text-align: center; font-family: 'Roboto', sans-serif; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f11e47; color: #f1f1f1; border-radius: 45px; background-color: #f11e47; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout14 .fxt-main-content .fxt-btn-fill { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout14 .fxt-main-content .fxt-btn-fill { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout14 .fxt-main-content .fxt-btn-fill:hover { background-color: transparent; border-color: #dedede; color: #000; } .fxt-template-layout14 .fxt-main-content .fxt-btn-fill:focus { outline: none; } .fxt-template-layout14 .fxt-main-content .fxt-socials { margin-bottom: 70px; } @media only screen and (max-width: 991px) { .fxt-template-layout14 .fxt-main-content .fxt-socials { margin-bottom: 60px; } } @media only screen and (max-width: 767px) { .fxt-template-layout14 .fxt-main-content .fxt-socials { margin-bottom: 50px; } } @media only screen and (max-width: 575px) { .fxt-template-layout14 .fxt-main-content .fxt-socials { margin-bottom: 40px; } } .fxt-template-layout14 .fxt-main-content .fxt-socials li { display: inline-block; margin-right: 10px; margin-bottom: 8px; } @media only screen and (max-width: 991px) { .fxt-template-layout14 .fxt-main-content .fxt-socials li { margin-right: 10px; margin-bottom: 5px; } } @media only screen and (max-width: 767px) { .fxt-template-layout14 .fxt-main-content .fxt-socials li { margin-right: 5px; } } .fxt-template-layout14 .fxt-main-content .fxt-socials li:last-child { margin-right: 0; } .fxt-template-layout14 .fxt-main-content .fxt-socials li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 16px; height: 45px; width: 45px; color: #666666; background-color: transparent; border-radius: 50%; border: 1px solid; border-color: #dedede; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout14 .fxt-main-content .fxt-socials li a { font-size: 15px; height: 40px; width: 40px; } } .fxt-template-layout14 .fxt-main-content .fxt-socials li a:hover { color: #fff; } .fxt-template-layout14 .fxt-main-content .fxt-socials li.fxt-facebook a:hover { background-color: #3b5998; border-color: #3b5998; } .fxt-template-layout14 .fxt-main-content .fxt-socials li.fxt-twitter a:hover { background-color: #00acee; border-color: #00acee; } .fxt-template-layout14 .fxt-main-content .fxt-socials li.fxt-google a:hover { background-color: #CC3333; border-color: #CC3333; } .fxt-template-layout14 .fxt-main-content .fxt-socials li.fxt-instagram a:hover { background-color: #3f729b; border-color: #3f729b; } .fxt-template-layout14 .fxt-main-content .fxt-socials li.fxt-linkedin a:hover { background-color: #0077B5; border-color: #0077B5; } .fxt-template-layout14 .fxt-main-content .fxt-socials li.fxt-youtube a:hover { background-color: #c4302b; border-color: #c4302b; } .fxt-template-layout14 .fxt-main-content .fxt-socials li.fxt-pinterest a:hover { background-color: #bd081c; border-color: #bd081c; } .fxt-template-layout14 .fxt-main-content .fxt-footer p { color: #000000; font-size: 15px; } .fxt-template-layout14 .fxt-main-content .fxt-bg-color { overflow: hidden; padding: 90px; min-height: 100vh; background: #6463f1; background: linear-gradient(180deg, #6463f1 0%, #6b6af5 100%); } @media only screen and (max-width: 991px) { .fxt-template-layout14 .fxt-main-content .fxt-bg-color { padding: 80px 70px; min-height: 100%; } } @media only screen and (max-width: 767px) { .fxt-template-layout14 .fxt-main-content .fxt-bg-color { padding: 70px 60px; } } @media only screen and (max-width: 575px) { .fxt-template-layout14 .fxt-main-content .fxt-bg-color { padding: 60px 50px; } } @media only screen and (max-width: 479px) { .fxt-template-layout14 .fxt-main-content .fxt-bg-color { padding: 50px 40px; } } .fxt-template-layout14 .fxt-main-content .fxt-figure { height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; } .fxt-template-layout14 .fxt-countdown { margin-bottom: 70px; padding-bottom: 50px; } @media only screen and (max-width: 1439px) { .fxt-template-layout14 .fxt-countdown { margin-bottom: 60px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout14 .fxt-countdown { margin-bottom: 50px; } } @media only screen and (max-width: 991px) { .fxt-template-layout14 .fxt-countdown { margin-bottom: 40px; } } @media only screen and (max-width: 767px) { .fxt-template-layout14 .fxt-countdown { margin-bottom: 30px; } } @media only screen and (max-width: 575px) { .fxt-template-layout14 .fxt-countdown { margin-bottom: 20px; } } .fxt-template-layout14 .fxt-countdown .countdown-section { display: inline-block; min-width: 70px; margin-right: 35px; padding-right: 35px; position: relative; z-index: 1; } @media only screen and (max-width: 1855px) { .fxt-template-layout14 .fxt-countdown .countdown-section { margin-right: 30px; padding-right: 30px; } } @media only screen and (max-width: 1439px) { .fxt-template-layout14 .fxt-countdown .countdown-section { margin-right: 25px; padding-right: 25px; min-width: 65px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout14 .fxt-countdown .countdown-section { margin-right: 20px; padding-right: 20px; min-width: 60px; } } @media only screen and (max-width: 575px) { .fxt-template-layout14 .fxt-countdown .countdown-section { min-width: 55px; margin-right: 15px; padding-right: 15px; } } @media only screen and (max-width: 479px) { .fxt-template-layout14 .fxt-countdown .countdown-section { min-width: 45px; margin-right: 10px; padding-right: 10px; } } .fxt-template-layout14 .fxt-countdown .countdown-section > div { position: relative; z-index: 1; } .fxt-template-layout14 .fxt-countdown .countdown-section:before { content: ""; height: 10px; width: 10px; border-radius: 50%; background-color: #000; position: absolute; z-index: 1; top: 16px; right: -5px; } @media only screen and (max-width: 1855px) { .fxt-template-layout14 .fxt-countdown .countdown-section:before { top: 15px; } } @media only screen and (max-width: 1439px) { .fxt-template-layout14 .fxt-countdown .countdown-section:before { top: 13px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout14 .fxt-countdown .countdown-section:before { top: 11px; height: 8px; width: 8px; } } @media only screen and (max-width: 575px) { .fxt-template-layout14 .fxt-countdown .countdown-section:before { top: 10px; height: 5px; width: 5px; } } @media only screen and (max-width: 479px) { .fxt-template-layout14 .fxt-countdown .countdown-section:before { top: 8px; right: -3px; } } .fxt-template-layout14 .fxt-countdown .countdown-section:after { content: ""; height: 10px; width: 10px; border-radius: 50%; background-color: #000; position: absolute; z-index: 1; top: 38px; right: -5px; } @media only screen and (max-width: 1855px) { .fxt-template-layout14 .fxt-countdown .countdown-section:after { top: 43px; } } @media only screen and (max-width: 1439px) { .fxt-template-layout14 .fxt-countdown .countdown-section:after { top: 38px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout14 .fxt-countdown .countdown-section:after { top: 32px; height: 8px; width: 8px; } } @media only screen and (max-width: 575px) { .fxt-template-layout14 .fxt-countdown .countdown-section:after { top: 28px; height: 5px; width: 5px; } } @media only screen and (max-width: 479px) { .fxt-template-layout14 .fxt-countdown .countdown-section:after { top: 23px; right: -3px; } } .fxt-template-layout14 .fxt-countdown .countdown-section:last-child { margin-right: 0; padding-right: 0; } .fxt-template-layout14 .fxt-countdown .countdown-section:last-child:after, .fxt-template-layout14 .fxt-countdown .countdown-section:last-child:before { display: none; } .fxt-template-layout14 .fxt-countdown .countdown-section .countdown-number { font-size: 60px; line-height: 1; font-weight: 600; color: #000; } @media only screen and (max-width: 1439px) { .fxt-template-layout14 .fxt-countdown .countdown-section .countdown-number { font-size: 56px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout14 .fxt-countdown .countdown-section .countdown-number { font-size: 48px; } } @media only screen and (max-width: 575px) { .fxt-template-layout14 .fxt-countdown .countdown-section .countdown-number { font-size: 42px; } } @media only screen and (max-width: 479px) { .fxt-template-layout14 .fxt-countdown .countdown-section .countdown-number { font-size: 36px; } } .fxt-template-layout14 .fxt-countdown .countdown-section .countdown-unit { color: #666666; position: absolute; z-index: 1; bottom: -50px; left: 50%; transform: translateX(-50%); font-size: 22px; } @media only screen and (max-width: 991px) { .fxt-template-layout14 .fxt-countdown .countdown-section .countdown-unit { font-size: 20px; bottom: -45px; } } @media only screen and (max-width: 767px) { .fxt-template-layout14 .fxt-countdown .countdown-section .countdown-unit { font-size: 18px; bottom: -40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout14 .fxt-countdown .countdown-section .countdown-unit { font-size: 16px; bottom: -35px; } } @media only screen and (max-width: 575px) { .fxt-template-layout14 .fxt-countdown .countdown-section .countdown-unit { font-size: 15px; bottom: -30px; } } @media only screen and (min-width: 992px) { body.open-sidebar .fxt-template-layout14 .fxt-main-content { transform: translateX(-50%); } } /*======================================================================== 20. Demo Layout Fifteen =========================================================================*/ .fxt-template-layout15 { display: flex; align-items: flex-start; } @media only screen and (max-width: 991px) { .fxt-template-layout15 { display: block; min-width: 100%; } } .fxt-template-layout15 .fxt-main-content { padding: 65px 0; background-position: center; background-size: cover; background-repeat: no-repeat; min-height: 100vh; min-width: 100vw; position: relative; z-index: 1; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; transition: all 0.8s ease-in-out; } @media only screen and (max-width: 991px) { .fxt-template-layout15 .fxt-main-content { min-width: 100%; padding: 55px 15px; } } @media only screen and (max-width: 767px) { .fxt-template-layout15 .fxt-main-content { padding: 45px 15px; } } @media only screen and (max-width: 575px) { .fxt-template-layout15 .fxt-main-content { padding: 35px 15px; } } .fxt-template-layout15 .fxt-main-content:before { content: ""; background-color: rgba(0, 0, 0, 0.6); position: absolute; height: 100%; width: 100%; top: 0; left: 0; z-index: -1; } .fxt-template-layout15 .fxt-main-content .fxt-logo { margin-top: 25px; margin-bottom: 14vh; max-width: 40vw; } .fxt-template-layout15 .fxt-main-content .fxt-sub-title { color: #fff; font-size: 30px; margin-bottom: 5px; } @media only screen and (max-width: 991px) { .fxt-template-layout15 .fxt-main-content .fxt-sub-title { font-size: 26px; } } @media only screen and (max-width: 767px) { .fxt-template-layout15 .fxt-main-content .fxt-sub-title { font-size: 24px; } } @media only screen and (max-width: 575px) { .fxt-template-layout15 .fxt-main-content .fxt-sub-title { font-size: 22px; } } @media only screen and (max-width: 479px) { .fxt-template-layout15 .fxt-main-content .fxt-sub-title { font-size: 20px; } } .fxt-template-layout15 .fxt-main-content .fxt-main-title { color: #fff; font-weight: 600; width: 90%; margin-left: auto; margin-right: auto; } @media only screen and (max-width: 767px) { .fxt-template-layout15 .fxt-main-content .fxt-main-title { width: 95%; } } @media only screen and (max-width: 575px) { .fxt-template-layout15 .fxt-main-content .fxt-main-title { width: 100%; } } .fxt-template-layout15 .fxt-main-content .fxt-paragraph { color: #d8d8d8; width: 70%; margin-left: auto; margin-right: auto; margin-bottom: 70px; } @media only screen and (max-width: 1199px) { .fxt-template-layout15 .fxt-main-content .fxt-paragraph { margin-bottom: 60px; } } @media only screen and (max-width: 991px) { .fxt-template-layout15 .fxt-main-content .fxt-paragraph { margin-bottom: 50px; } } @media only screen and (max-width: 767px) { .fxt-template-layout15 .fxt-main-content .fxt-paragraph { width: 80%; margin-bottom: 40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout15 .fxt-main-content .fxt-paragraph { width: 100%; margin-bottom: 30px; } } .fxt-template-layout15 .fxt-main-content .fxt-buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-bottom: 60px; } @media only screen and (max-width: 991px) { .fxt-template-layout15 .fxt-main-content .fxt-buttons { margin-bottom: 50px; } } @media only screen and (max-width: 767px) { .fxt-template-layout15 .fxt-main-content .fxt-buttons { margin-bottom: 40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout15 .fxt-main-content .fxt-buttons { margin-bottom: 30px; } } .fxt-template-layout15 .fxt-main-content .fxt-buttons .fxt-btn { margin: 0 7px 12px; } .fxt-template-layout15 .fxt-main-content .fxt-btn-ghost { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f1f1f1; color: #f1f1f1; border-radius: 45px; background-color: transparent; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout15 .fxt-main-content .fxt-btn-ghost { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout15 .fxt-main-content .fxt-btn-ghost { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout15 .fxt-main-content .fxt-btn-ghost:hover { background-color: #f11e47; border-color: #f11e47; } .fxt-template-layout15 .fxt-main-content .fxt-btn-ghost:focus { outline: none; } .fxt-template-layout15 .fxt-main-content .fxt-btn-fill { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f11e47; color: #f1f1f1; border-radius: 45px; background-color: #f11e47; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout15 .fxt-main-content .fxt-btn-fill { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout15 .fxt-main-content .fxt-btn-fill { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout15 .fxt-main-content .fxt-btn-fill:hover { background-color: transparent; border-color: #f1f1f1; } .fxt-template-layout15 .fxt-main-content .fxt-btn-fill:focus { outline: none; } .fxt-template-layout15 .fxt-main-content .fxt-socials { margin-bottom: 70px; } @media only screen and (max-width: 991px) { .fxt-template-layout15 .fxt-main-content .fxt-socials { margin-bottom: 60px; } } @media only screen and (max-width: 767px) { .fxt-template-layout15 .fxt-main-content .fxt-socials { margin-bottom: 50px; } } @media only screen and (max-width: 575px) { .fxt-template-layout15 .fxt-main-content .fxt-socials { margin-bottom: 40px; } } .fxt-template-layout15 .fxt-main-content .fxt-socials li { display: inline-block; margin-right: 15px; margin-bottom: 8px; } @media only screen and (max-width: 991px) { .fxt-template-layout15 .fxt-main-content .fxt-socials li { margin-right: 10px; margin-bottom: 5px; } } @media only screen and (max-width: 767px) { .fxt-template-layout15 .fxt-main-content .fxt-socials li { margin-right: 5px; } } .fxt-template-layout15 .fxt-main-content .fxt-socials li:last-child { margin-right: 0; } .fxt-template-layout15 .fxt-main-content .fxt-socials li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 16px; height: 45px; width: 45px; color: #ffffff; background-color: #1f1f1f; border-radius: 50%; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout15 .fxt-main-content .fxt-socials li a { font-size: 15px; height: 40px; width: 40px; } } .fxt-template-layout15 .fxt-main-content .fxt-socials li.fxt-facebook a:hover { background-color: #3b5998; } .fxt-template-layout15 .fxt-main-content .fxt-socials li.fxt-twitter a:hover { background-color: #00acee; } .fxt-template-layout15 .fxt-main-content .fxt-socials li.fxt-google a:hover { background-color: #CC3333; } .fxt-template-layout15 .fxt-main-content .fxt-socials li.fxt-instagram a:hover { background-color: #3f729b; } .fxt-template-layout15 .fxt-main-content .fxt-socials li.fxt-linkedin a:hover { background-color: #0077B5; } .fxt-template-layout15 .fxt-main-content .fxt-socials li.fxt-youtube a:hover { background-color: #c4302b; } .fxt-template-layout15 .fxt-main-content .fxt-socials li.fxt-pinterest a:hover { background-color: #bd081c; } .fxt-template-layout15 .fxt-main-content .fxt-footer p { color: #e3e3e3; font-size: 15px; } @media only screen and (min-width: 992px) { body.open-sidebar .fxt-template-layout15 .fxt-main-content { min-width: 50vw; max-width: 50vw; } } /*======================================================================== 21. Demo Layout Sixteen =========================================================================*/ .fxt-template-layout16 { display: flex; align-items: flex-start; } @media only screen and (max-width: 991px) { .fxt-template-layout16 { display: block; min-width: 100%; } } .fxt-template-layout16 .fxt-main-content { padding: 65px 0; background-position: center; background-size: cover; background-repeat: no-repeat; min-height: 100vh; min-width: 100vw; position: relative; z-index: 1; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; transition: all 0.8s ease-in-out; } @media only screen and (max-width: 991px) { .fxt-template-layout16 .fxt-main-content { min-width: 100%; padding: 55px 15px; } } @media only screen and (max-width: 767px) { .fxt-template-layout16 .fxt-main-content { padding: 45px 15px; } } @media only screen and (max-width: 575px) { .fxt-template-layout16 .fxt-main-content { padding: 35px 15px; } } .fxt-template-layout16 .fxt-main-content:before { content: ""; background-color: rgba(0, 0, 0, 0.6); position: absolute; height: 100%; width: 100%; top: 0; left: 0; z-index: -1; } .fxt-template-layout16 .fxt-main-content .fxt-logo { margin-top: 25px; margin-bottom: 14vh; max-width: 40vw; } .fxt-template-layout16 .fxt-main-content .fxt-sub-title { color: #fff; font-size: 46px; font-family: 'Raleway', sans-serif; letter-spacing: 8px; margin-bottom: 25px; line-height: 1.4; margin-left: 8px; } @media only screen and (max-width: 1199px) { .fxt-template-layout16 .fxt-main-content .fxt-sub-title { font-size: 40px; } } @media only screen and (max-width: 991px) { .fxt-template-layout16 .fxt-main-content .fxt-sub-title { font-size: 36px; letter-spacing: 6px; line-height: 1.6; margin-left: 6px; margin-bottom: 20px; } } @media only screen and (max-width: 767px) { .fxt-template-layout16 .fxt-main-content .fxt-sub-title { font-size: 32px; letter-spacing: 4px; line-height: 1.5; margin-left: 4px; margin-bottom: 15px; } } @media only screen and (max-width: 575px) { .fxt-template-layout16 .fxt-main-content .fxt-sub-title { font-size: 28px; letter-spacing: 2px; line-height: 1.4; margin-left: 2px; } } @media only screen and (max-width: 479px) { .fxt-template-layout16 .fxt-main-content .fxt-sub-title { font-size: 26px; line-height: 1.3; } } .fxt-template-layout16 .fxt-main-content .fxt-buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-bottom: 60px; } @media only screen and (max-width: 991px) { .fxt-template-layout16 .fxt-main-content .fxt-buttons { margin-bottom: 50px; } } @media only screen and (max-width: 767px) { .fxt-template-layout16 .fxt-main-content .fxt-buttons { margin-bottom: 40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout16 .fxt-main-content .fxt-buttons { margin-bottom: 30px; } } .fxt-template-layout16 .fxt-main-content .fxt-buttons .fxt-btn { margin: 0 7px 12px; } .fxt-template-layout16 .fxt-main-content .fxt-btn-ghost { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f1f1f1; color: #f1f1f1; border-radius: 45px; background-color: transparent; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout16 .fxt-main-content .fxt-btn-ghost { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout16 .fxt-main-content .fxt-btn-ghost { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout16 .fxt-main-content .fxt-btn-ghost:hover { background-color: #f11e47; border-color: #f11e47; } .fxt-template-layout16 .fxt-main-content .fxt-btn-ghost:focus { outline: none; } .fxt-template-layout16 .fxt-main-content .fxt-btn-fill { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f11e47; color: #f1f1f1; border-radius: 45px; background-color: #f11e47; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout16 .fxt-main-content .fxt-btn-fill { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout16 .fxt-main-content .fxt-btn-fill { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout16 .fxt-main-content .fxt-btn-fill:hover { background-color: transparent; border-color: #f1f1f1; } .fxt-template-layout16 .fxt-main-content .fxt-btn-fill:focus { outline: none; } .fxt-template-layout16 .fxt-main-content .fxt-socials { margin-bottom: 70px; } @media only screen and (max-width: 991px) { .fxt-template-layout16 .fxt-main-content .fxt-socials { margin-bottom: 60px; } } @media only screen and (max-width: 767px) { .fxt-template-layout16 .fxt-main-content .fxt-socials { margin-bottom: 50px; } } @media only screen and (max-width: 575px) { .fxt-template-layout16 .fxt-main-content .fxt-socials { margin-bottom: 40px; } } .fxt-template-layout16 .fxt-main-content .fxt-socials li { display: inline-block; margin-right: 15px; margin-bottom: 8px; } @media only screen and (max-width: 991px) { .fxt-template-layout16 .fxt-main-content .fxt-socials li { margin-right: 10px; margin-bottom: 5px; } } @media only screen and (max-width: 767px) { .fxt-template-layout16 .fxt-main-content .fxt-socials li { margin-right: 5px; } } .fxt-template-layout16 .fxt-main-content .fxt-socials li:last-child { margin-right: 0; } .fxt-template-layout16 .fxt-main-content .fxt-socials li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 16px; height: 45px; width: 45px; color: #ffffff; background-color: #1f1f1f; border-radius: 50%; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout16 .fxt-main-content .fxt-socials li a { font-size: 15px; height: 40px; width: 40px; } } .fxt-template-layout16 .fxt-main-content .fxt-socials li.fxt-facebook a:hover { background-color: #3b5998; } .fxt-template-layout16 .fxt-main-content .fxt-socials li.fxt-twitter a:hover { background-color: #00acee; } .fxt-template-layout16 .fxt-main-content .fxt-socials li.fxt-google a:hover { background-color: #CC3333; } .fxt-template-layout16 .fxt-main-content .fxt-socials li.fxt-instagram a:hover { background-color: #3f729b; } .fxt-template-layout16 .fxt-main-content .fxt-socials li.fxt-linkedin a:hover { background-color: #0077B5; } .fxt-template-layout16 .fxt-main-content .fxt-socials li.fxt-youtube a:hover { background-color: #c4302b; } .fxt-template-layout16 .fxt-main-content .fxt-socials li.fxt-pinterest a:hover { background-color: #bd081c; } .fxt-template-layout16 .fxt-main-content .fxt-footer p { color: #e3e3e3; font-size: 15px; } .fxt-template-layout16 .fxt-countdown { margin-bottom: 70px; padding-bottom: 50px; } @media only screen and (max-width: 1439px) { .fxt-template-layout16 .fxt-countdown { margin-bottom: 60px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout16 .fxt-countdown { margin-bottom: 50px; } } @media only screen and (max-width: 991px) { .fxt-template-layout16 .fxt-countdown { margin-bottom: 40px; } } @media only screen and (max-width: 767px) { .fxt-template-layout16 .fxt-countdown { margin-bottom: 30px; } } @media only screen and (max-width: 575px) { .fxt-template-layout16 .fxt-countdown { margin-bottom: 20px; } } .fxt-template-layout16 .fxt-countdown .countdown-section { display: inline-block; min-width: 70px; margin-right: 35px; padding-right: 35px; position: relative; z-index: 1; } @media only screen and (max-width: 1855px) { .fxt-template-layout16 .fxt-countdown .countdown-section { margin-right: 30px; padding-right: 30px; } } @media only screen and (max-width: 1439px) { .fxt-template-layout16 .fxt-countdown .countdown-section { margin-right: 25px; padding-right: 25px; min-width: 65px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout16 .fxt-countdown .countdown-section { margin-right: 20px; padding-right: 20px; min-width: 60px; } } @media only screen and (max-width: 575px) { .fxt-template-layout16 .fxt-countdown .countdown-section { min-width: 55px; margin-right: 15px; padding-right: 15px; } } @media only screen and (max-width: 479px) { .fxt-template-layout16 .fxt-countdown .countdown-section { min-width: 45px; margin-right: 10px; padding-right: 10px; } } .fxt-template-layout16 .fxt-countdown .countdown-section > div { position: relative; z-index: 1; } .fxt-template-layout16 .fxt-countdown .countdown-section:before { content: ""; height: 10px; width: 10px; border-radius: 50%; background-color: #ffffff; position: absolute; z-index: 1; top: 16px; right: -5px; } @media only screen and (max-width: 1855px) { .fxt-template-layout16 .fxt-countdown .countdown-section:before { top: 15px; } } @media only screen and (max-width: 1439px) { .fxt-template-layout16 .fxt-countdown .countdown-section:before { top: 13px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout16 .fxt-countdown .countdown-section:before { top: 11px; height: 8px; width: 8px; } } @media only screen and (max-width: 575px) { .fxt-template-layout16 .fxt-countdown .countdown-section:before { top: 10px; height: 5px; width: 5px; } } @media only screen and (max-width: 479px) { .fxt-template-layout16 .fxt-countdown .countdown-section:before { top: 8px; right: -3px; } } .fxt-template-layout16 .fxt-countdown .countdown-section:after { content: ""; height: 10px; width: 10px; border-radius: 50%; background-color: #ffffff; position: absolute; z-index: 1; top: 38px; right: -5px; } @media only screen and (max-width: 1855px) { .fxt-template-layout16 .fxt-countdown .countdown-section:after { top: 43px; } } @media only screen and (max-width: 1439px) { .fxt-template-layout16 .fxt-countdown .countdown-section:after { top: 38px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout16 .fxt-countdown .countdown-section:after { top: 32px; height: 8px; width: 8px; } } @media only screen and (max-width: 575px) { .fxt-template-layout16 .fxt-countdown .countdown-section:after { top: 28px; height: 5px; width: 5px; } } @media only screen and (max-width: 479px) { .fxt-template-layout16 .fxt-countdown .countdown-section:after { top: 23px; right: -3px; } } .fxt-template-layout16 .fxt-countdown .countdown-section:last-child { margin-right: 0; padding-right: 0; } .fxt-template-layout16 .fxt-countdown .countdown-section:last-child:after, .fxt-template-layout16 .fxt-countdown .countdown-section:last-child:before { display: none; } .fxt-template-layout16 .fxt-countdown .countdown-section .countdown-number { font-size: 60px; line-height: 1; font-weight: 600; color: #ffffff; } @media only screen and (max-width: 1439px) { .fxt-template-layout16 .fxt-countdown .countdown-section .countdown-number { font-size: 56px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout16 .fxt-countdown .countdown-section .countdown-number { font-size: 48px; } } @media only screen and (max-width: 575px) { .fxt-template-layout16 .fxt-countdown .countdown-section .countdown-number { font-size: 42px; } } @media only screen and (max-width: 479px) { .fxt-template-layout16 .fxt-countdown .countdown-section .countdown-number { font-size: 36px; } } .fxt-template-layout16 .fxt-countdown .countdown-section .countdown-unit { color: #d8d8d8; position: absolute; z-index: 1; bottom: -50px; left: 50%; transform: translateX(-50%); font-size: 22px; } @media only screen and (max-width: 991px) { .fxt-template-layout16 .fxt-countdown .countdown-section .countdown-unit { font-size: 20px; bottom: -45px; } } @media only screen and (max-width: 767px) { .fxt-template-layout16 .fxt-countdown .countdown-section .countdown-unit { font-size: 18px; bottom: -40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout16 .fxt-countdown .countdown-section .countdown-unit { font-size: 16px; bottom: -35px; } } @media only screen and (max-width: 575px) { .fxt-template-layout16 .fxt-countdown .countdown-section .countdown-unit { font-size: 15px; bottom: -30px; } } @media only screen and (min-width: 992px) { body.open-sidebar .fxt-template-layout16 .fxt-main-content { min-width: 50vw; max-width: 50vw; } } /*======================================================================== 22. Demo Layout Seventeen =========================================================================*/ .fxt-template-layout17 { display: flex; align-items: flex-start; } @media only screen and (max-width: 991px) { .fxt-template-layout17 { display: block; min-width: 100%; } } .fxt-template-layout17 .starfield { height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 0; opacity: 0.5; } .fxt-template-layout17 .fxt-main-content { padding: 65px 0; background-color: #000; min-height: 100vh; min-width: 100vw; position: relative; z-index: 1; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; transition: all 0.8s ease-in-out; } @media only screen and (max-width: 991px) { .fxt-template-layout17 .fxt-main-content { min-width: 100%; padding: 55px 15px; } } @media only screen and (max-width: 767px) { .fxt-template-layout17 .fxt-main-content { padding: 45px 15px; } } @media only screen and (max-width: 575px) { .fxt-template-layout17 .fxt-main-content { padding: 35px 15px; } } .fxt-template-layout17 .fxt-main-content:before { content: ""; background-color: rgba(0, 0, 0, 0.6); position: absolute; height: 100%; width: 100%; top: 0; left: 0; z-index: -1; } .fxt-template-layout17 .fxt-main-content .fxt-logo { margin-top: 25px; margin-bottom: 14vh; max-width: 40vw; } .fxt-template-layout17 .fxt-main-content .fxt-sub-title { color: #fff; font-size: 30px; margin-bottom: 5px; } @media only screen and (max-width: 991px) { .fxt-template-layout17 .fxt-main-content .fxt-sub-title { font-size: 26px; } } @media only screen and (max-width: 767px) { .fxt-template-layout17 .fxt-main-content .fxt-sub-title { font-size: 24px; } } @media only screen and (max-width: 575px) { .fxt-template-layout17 .fxt-main-content .fxt-sub-title { font-size: 22px; } } @media only screen and (max-width: 479px) { .fxt-template-layout17 .fxt-main-content .fxt-sub-title { font-size: 20px; } } .fxt-template-layout17 .fxt-main-content .fxt-main-title { color: #fff; font-weight: 600; width: 90%; margin-left: auto; margin-right: auto; } @media only screen and (max-width: 767px) { .fxt-template-layout17 .fxt-main-content .fxt-main-title { width: 95%; } } @media only screen and (max-width: 575px) { .fxt-template-layout17 .fxt-main-content .fxt-main-title { width: 100%; } } .fxt-template-layout17 .fxt-main-content .fxt-paragraph { color: #d8d8d8; width: 70%; margin-left: auto; margin-right: auto; margin-bottom: 70px; } @media only screen and (max-width: 1199px) { .fxt-template-layout17 .fxt-main-content .fxt-paragraph { margin-bottom: 60px; } } @media only screen and (max-width: 991px) { .fxt-template-layout17 .fxt-main-content .fxt-paragraph { margin-bottom: 50px; } } @media only screen and (max-width: 767px) { .fxt-template-layout17 .fxt-main-content .fxt-paragraph { width: 80%; margin-bottom: 40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout17 .fxt-main-content .fxt-paragraph { width: 100%; margin-bottom: 30px; } } .fxt-template-layout17 .fxt-main-content .fxt-buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-bottom: 60px; } @media only screen and (max-width: 991px) { .fxt-template-layout17 .fxt-main-content .fxt-buttons { margin-bottom: 50px; } } @media only screen and (max-width: 767px) { .fxt-template-layout17 .fxt-main-content .fxt-buttons { margin-bottom: 40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout17 .fxt-main-content .fxt-buttons { margin-bottom: 30px; } } .fxt-template-layout17 .fxt-main-content .fxt-buttons .fxt-btn { margin: 0 7px 12px; } .fxt-template-layout17 .fxt-main-content .fxt-btn-ghost { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f1f1f1; color: #f1f1f1; border-radius: 45px; background-color: transparent; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout17 .fxt-main-content .fxt-btn-ghost { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout17 .fxt-main-content .fxt-btn-ghost { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout17 .fxt-main-content .fxt-btn-ghost:hover { background-color: #f11e47; border-color: #f11e47; } .fxt-template-layout17 .fxt-main-content .fxt-btn-ghost:focus { outline: none; } .fxt-template-layout17 .fxt-main-content .fxt-btn-fill { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f11e47; color: #f1f1f1; border-radius: 45px; background-color: #f11e47; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout17 .fxt-main-content .fxt-btn-fill { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout17 .fxt-main-content .fxt-btn-fill { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout17 .fxt-main-content .fxt-btn-fill:hover { background-color: transparent; border-color: #f1f1f1; } .fxt-template-layout17 .fxt-main-content .fxt-btn-fill:focus { outline: none; } .fxt-template-layout17 .fxt-main-content .fxt-socials { margin-bottom: 70px; } @media only screen and (max-width: 991px) { .fxt-template-layout17 .fxt-main-content .fxt-socials { margin-bottom: 60px; } } @media only screen and (max-width: 767px) { .fxt-template-layout17 .fxt-main-content .fxt-socials { margin-bottom: 50px; } } @media only screen and (max-width: 575px) { .fxt-template-layout17 .fxt-main-content .fxt-socials { margin-bottom: 40px; } } .fxt-template-layout17 .fxt-main-content .fxt-socials li { display: inline-block; margin-right: 15px; margin-bottom: 8px; } @media only screen and (max-width: 991px) { .fxt-template-layout17 .fxt-main-content .fxt-socials li { margin-right: 10px; margin-bottom: 5px; } } @media only screen and (max-width: 767px) { .fxt-template-layout17 .fxt-main-content .fxt-socials li { margin-right: 5px; } } .fxt-template-layout17 .fxt-main-content .fxt-socials li:last-child { margin-right: 0; } .fxt-template-layout17 .fxt-main-content .fxt-socials li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 16px; height: 45px; width: 45px; color: #ffffff; background-color: #1f1f1f; border-radius: 50%; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout17 .fxt-main-content .fxt-socials li a { font-size: 15px; height: 40px; width: 40px; } } .fxt-template-layout17 .fxt-main-content .fxt-socials li.fxt-facebook a:hover { background-color: #3b5998; } .fxt-template-layout17 .fxt-main-content .fxt-socials li.fxt-twitter a:hover { background-color: #00acee; } .fxt-template-layout17 .fxt-main-content .fxt-socials li.fxt-google a:hover { background-color: #CC3333; } .fxt-template-layout17 .fxt-main-content .fxt-socials li.fxt-instagram a:hover { background-color: #3f729b; } .fxt-template-layout17 .fxt-main-content .fxt-socials li.fxt-linkedin a:hover { background-color: #0077B5; } .fxt-template-layout17 .fxt-main-content .fxt-socials li.fxt-youtube a:hover { background-color: #c4302b; } .fxt-template-layout17 .fxt-main-content .fxt-socials li.fxt-pinterest a:hover { background-color: #bd081c; } .fxt-template-layout17 .fxt-main-content .fxt-footer p { color: #e3e3e3; font-size: 15px; } @media only screen and (min-width: 992px) { body.open-sidebar .fxt-template-layout17 .fxt-main-content { min-width: 50vw; max-width: 50vw; } } /*======================================================================== 23. Demo Layout Eighteen =========================================================================*/ .fxt-template-layout18 { display: flex; align-items: flex-start; } @media only screen and (max-width: 991px) { .fxt-template-layout18 { display: block; min-width: 100%; } } .fxt-template-layout18 .starfield { height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 0; opacity: 0.5; } .fxt-template-layout18 .fxt-main-content { padding: 65px 0; background-color: #000; min-height: 100vh; min-width: 100vw; position: relative; z-index: 1; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; transition: all 0.8s ease-in-out; } @media only screen and (max-width: 991px) { .fxt-template-layout18 .fxt-main-content { min-width: 100%; padding: 55px 15px; } } @media only screen and (max-width: 767px) { .fxt-template-layout18 .fxt-main-content { padding: 45px 15px; } } @media only screen and (max-width: 575px) { .fxt-template-layout18 .fxt-main-content { padding: 35px 15px; } } .fxt-template-layout18 .fxt-main-content:before { content: ""; background-color: rgba(0, 0, 0, 0.6); position: absolute; height: 100%; width: 100%; top: 0; left: 0; z-index: -1; } .fxt-template-layout18 .fxt-main-content .fxt-logo { margin-top: 25px; margin-bottom: 14vh; max-width: 40vw; } .fxt-template-layout18 .fxt-main-content .fxt-sub-title { color: #fff; font-size: 46px; font-family: 'Raleway', sans-serif; letter-spacing: 8px; margin-bottom: 25px; line-height: 1.4; margin-left: 8px; } @media only screen and (max-width: 1199px) { .fxt-template-layout18 .fxt-main-content .fxt-sub-title { font-size: 40px; } } @media only screen and (max-width: 991px) { .fxt-template-layout18 .fxt-main-content .fxt-sub-title { font-size: 36px; letter-spacing: 6px; line-height: 1.6; margin-left: 6px; margin-bottom: 20px; } } @media only screen and (max-width: 767px) { .fxt-template-layout18 .fxt-main-content .fxt-sub-title { font-size: 32px; letter-spacing: 4px; line-height: 1.5; margin-left: 4px; margin-bottom: 15px; } } @media only screen and (max-width: 575px) { .fxt-template-layout18 .fxt-main-content .fxt-sub-title { font-size: 28px; letter-spacing: 2px; line-height: 1.4; margin-left: 2px; } } @media only screen and (max-width: 479px) { .fxt-template-layout18 .fxt-main-content .fxt-sub-title { font-size: 26px; line-height: 1.3; } } .fxt-template-layout18 .fxt-main-content .fxt-buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-bottom: 60px; } @media only screen and (max-width: 991px) { .fxt-template-layout18 .fxt-main-content .fxt-buttons { margin-bottom: 50px; } } @media only screen and (max-width: 767px) { .fxt-template-layout18 .fxt-main-content .fxt-buttons { margin-bottom: 40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout18 .fxt-main-content .fxt-buttons { margin-bottom: 30px; } } .fxt-template-layout18 .fxt-main-content .fxt-buttons .fxt-btn { margin: 0 7px 12px; } .fxt-template-layout18 .fxt-main-content .fxt-btn-ghost { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f1f1f1; color: #f1f1f1; border-radius: 45px; background-color: transparent; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout18 .fxt-main-content .fxt-btn-ghost { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout18 .fxt-main-content .fxt-btn-ghost { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout18 .fxt-main-content .fxt-btn-ghost:hover { background-color: #f11e47; border-color: #f11e47; } .fxt-template-layout18 .fxt-main-content .fxt-btn-ghost:focus { outline: none; } .fxt-template-layout18 .fxt-main-content .fxt-btn-fill { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f11e47; color: #f1f1f1; border-radius: 45px; background-color: #f11e47; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout18 .fxt-main-content .fxt-btn-fill { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout18 .fxt-main-content .fxt-btn-fill { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout18 .fxt-main-content .fxt-btn-fill:hover { background-color: transparent; border-color: #f1f1f1; } .fxt-template-layout18 .fxt-main-content .fxt-btn-fill:focus { outline: none; } .fxt-template-layout18 .fxt-main-content .fxt-socials { margin-bottom: 70px; } @media only screen and (max-width: 991px) { .fxt-template-layout18 .fxt-main-content .fxt-socials { margin-bottom: 60px; } } @media only screen and (max-width: 767px) { .fxt-template-layout18 .fxt-main-content .fxt-socials { margin-bottom: 50px; } } @media only screen and (max-width: 575px) { .fxt-template-layout18 .fxt-main-content .fxt-socials { margin-bottom: 40px; } } .fxt-template-layout18 .fxt-main-content .fxt-socials li { display: inline-block; margin-right: 15px; margin-bottom: 8px; } @media only screen and (max-width: 991px) { .fxt-template-layout18 .fxt-main-content .fxt-socials li { margin-right: 10px; margin-bottom: 5px; } } @media only screen and (max-width: 767px) { .fxt-template-layout18 .fxt-main-content .fxt-socials li { margin-right: 5px; } } .fxt-template-layout18 .fxt-main-content .fxt-socials li:last-child { margin-right: 0; } .fxt-template-layout18 .fxt-main-content .fxt-socials li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 16px; height: 45px; width: 45px; color: #ffffff; background-color: #1f1f1f; border-radius: 50%; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout18 .fxt-main-content .fxt-socials li a { font-size: 15px; height: 40px; width: 40px; } } .fxt-template-layout18 .fxt-main-content .fxt-socials li.fxt-facebook a:hover { background-color: #3b5998; } .fxt-template-layout18 .fxt-main-content .fxt-socials li.fxt-twitter a:hover { background-color: #00acee; } .fxt-template-layout18 .fxt-main-content .fxt-socials li.fxt-google a:hover { background-color: #CC3333; } .fxt-template-layout18 .fxt-main-content .fxt-socials li.fxt-instagram a:hover { background-color: #3f729b; } .fxt-template-layout18 .fxt-main-content .fxt-socials li.fxt-linkedin a:hover { background-color: #0077B5; } .fxt-template-layout18 .fxt-main-content .fxt-socials li.fxt-youtube a:hover { background-color: #c4302b; } .fxt-template-layout18 .fxt-main-content .fxt-socials li.fxt-pinterest a:hover { background-color: #bd081c; } .fxt-template-layout18 .fxt-main-content .fxt-footer p { color: #e3e3e3; font-size: 15px; } .fxt-template-layout18 .fxt-countdown { margin-bottom: 70px; padding-bottom: 50px; } @media only screen and (max-width: 1439px) { .fxt-template-layout18 .fxt-countdown { margin-bottom: 60px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout18 .fxt-countdown { margin-bottom: 50px; } } @media only screen and (max-width: 991px) { .fxt-template-layout18 .fxt-countdown { margin-bottom: 40px; } } @media only screen and (max-width: 767px) { .fxt-template-layout18 .fxt-countdown { margin-bottom: 30px; } } @media only screen and (max-width: 575px) { .fxt-template-layout18 .fxt-countdown { margin-bottom: 20px; } } .fxt-template-layout18 .fxt-countdown .countdown-section { display: inline-block; min-width: 70px; margin-right: 35px; padding-right: 35px; position: relative; z-index: 1; } @media only screen and (max-width: 1855px) { .fxt-template-layout18 .fxt-countdown .countdown-section { margin-right: 30px; padding-right: 30px; } } @media only screen and (max-width: 1439px) { .fxt-template-layout18 .fxt-countdown .countdown-section { margin-right: 25px; padding-right: 25px; min-width: 65px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout18 .fxt-countdown .countdown-section { margin-right: 20px; padding-right: 20px; min-width: 60px; } } @media only screen and (max-width: 575px) { .fxt-template-layout18 .fxt-countdown .countdown-section { min-width: 55px; margin-right: 15px; padding-right: 15px; } } @media only screen and (max-width: 479px) { .fxt-template-layout18 .fxt-countdown .countdown-section { min-width: 45px; margin-right: 10px; padding-right: 10px; } } .fxt-template-layout18 .fxt-countdown .countdown-section > div { position: relative; z-index: 1; } .fxt-template-layout18 .fxt-countdown .countdown-section:before { content: ""; height: 10px; width: 10px; border-radius: 50%; background-color: #ffffff; position: absolute; z-index: 1; top: 16px; right: -5px; } @media only screen and (max-width: 1855px) { .fxt-template-layout18 .fxt-countdown .countdown-section:before { top: 15px; } } @media only screen and (max-width: 1439px) { .fxt-template-layout18 .fxt-countdown .countdown-section:before { top: 13px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout18 .fxt-countdown .countdown-section:before { top: 11px; height: 8px; width: 8px; } } @media only screen and (max-width: 575px) { .fxt-template-layout18 .fxt-countdown .countdown-section:before { top: 10px; height: 5px; width: 5px; } } @media only screen and (max-width: 479px) { .fxt-template-layout18 .fxt-countdown .countdown-section:before { top: 8px; right: -3px; } } .fxt-template-layout18 .fxt-countdown .countdown-section:after { content: ""; height: 10px; width: 10px; border-radius: 50%; background-color: #ffffff; position: absolute; z-index: 1; top: 38px; right: -5px; } @media only screen and (max-width: 1855px) { .fxt-template-layout18 .fxt-countdown .countdown-section:after { top: 43px; } } @media only screen and (max-width: 1439px) { .fxt-template-layout18 .fxt-countdown .countdown-section:after { top: 38px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout18 .fxt-countdown .countdown-section:after { top: 32px; height: 8px; width: 8px; } } @media only screen and (max-width: 575px) { .fxt-template-layout18 .fxt-countdown .countdown-section:after { top: 28px; height: 5px; width: 5px; } } @media only screen and (max-width: 479px) { .fxt-template-layout18 .fxt-countdown .countdown-section:after { top: 23px; right: -3px; } } .fxt-template-layout18 .fxt-countdown .countdown-section:last-child { margin-right: 0; padding-right: 0; } .fxt-template-layout18 .fxt-countdown .countdown-section:last-child:after, .fxt-template-layout18 .fxt-countdown .countdown-section:last-child:before { display: none; } .fxt-template-layout18 .fxt-countdown .countdown-section .countdown-number { font-size: 60px; line-height: 1; font-weight: 600; color: #ffffff; } @media only screen and (max-width: 1439px) { .fxt-template-layout18 .fxt-countdown .countdown-section .countdown-number { font-size: 56px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout18 .fxt-countdown .countdown-section .countdown-number { font-size: 48px; } } @media only screen and (max-width: 575px) { .fxt-template-layout18 .fxt-countdown .countdown-section .countdown-number { font-size: 42px; } } @media only screen and (max-width: 479px) { .fxt-template-layout18 .fxt-countdown .countdown-section .countdown-number { font-size: 36px; } } .fxt-template-layout18 .fxt-countdown .countdown-section .countdown-unit { color: #d8d8d8; position: absolute; z-index: 1; bottom: -50px; left: 50%; transform: translateX(-50%); font-size: 22px; } @media only screen and (max-width: 991px) { .fxt-template-layout18 .fxt-countdown .countdown-section .countdown-unit { font-size: 20px; bottom: -45px; } } @media only screen and (max-width: 767px) { .fxt-template-layout18 .fxt-countdown .countdown-section .countdown-unit { font-size: 18px; bottom: -40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout18 .fxt-countdown .countdown-section .countdown-unit { font-size: 16px; bottom: -35px; } } @media only screen and (max-width: 575px) { .fxt-template-layout18 .fxt-countdown .countdown-section .countdown-unit { font-size: 15px; bottom: -30px; } } @media only screen and (min-width: 992px) { body.open-sidebar .fxt-template-layout18 .fxt-main-content { min-width: 50vw; max-width: 50vw; } } /*======================================================================== 24. Demo Layout Nineteen =========================================================================*/ .fxt-template-layout19 { display: flex; align-items: flex-start; } @media only screen and (max-width: 991px) { .fxt-template-layout19 { display: block; min-width: 100%; } } .fxt-template-layout19 .fxt-main-content { min-height: 100vh; min-width: 100vw; text-align: center; transition: all 0.8s ease-in-out; } @media only screen and (max-width: 991px) { .fxt-template-layout19 .fxt-main-content { min-width: 100%; } } .fxt-template-layout19 .fxt-main-content .fxt-right-content { padding: 65px 0; background-color: #fafafa; min-height: 100vh; display: flex; justify-content: center; flex-direction: column; } @media only screen and (max-width: 991px) { .fxt-template-layout19 .fxt-main-content .fxt-right-content { padding: 55px 15px; } } @media only screen and (max-width: 767px) { .fxt-template-layout19 .fxt-main-content .fxt-right-content { padding: 45px 15px; } } @media only screen and (max-width: 575px) { .fxt-template-layout19 .fxt-main-content .fxt-right-content { padding: 35px 15px; } } .fxt-template-layout19 .fxt-main-content .fxt-logo { margin-top: 25px; margin-bottom: 14vh; max-width: 40vw; margin-left: auto; margin-right: auto; } .fxt-template-layout19 .fxt-main-content .fxt-sub-title { color: #f11e47; font-size: 30px; margin-bottom: 5px; } @media only screen and (max-width: 991px) { .fxt-template-layout19 .fxt-main-content .fxt-sub-title { font-size: 26px; } } @media only screen and (max-width: 767px) { .fxt-template-layout19 .fxt-main-content .fxt-sub-title { font-size: 24px; } } @media only screen and (max-width: 575px) { .fxt-template-layout19 .fxt-main-content .fxt-sub-title { font-size: 22px; } } @media only screen and (max-width: 479px) { .fxt-template-layout19 .fxt-main-content .fxt-sub-title { font-size: 20px; } } .fxt-template-layout19 .fxt-main-content .fxt-main-title { color: #000; font-weight: 700; width: 90%; margin-left: auto; margin-right: auto; margin-bottom: 0; } @media only screen and (max-width: 767px) { .fxt-template-layout19 .fxt-main-content .fxt-main-title { width: 95%; } } @media only screen and (max-width: 575px) { .fxt-template-layout19 .fxt-main-content .fxt-main-title { width: 100%; } } .fxt-template-layout19 .fxt-main-content .fxt-paragraph { color: #666666; width: 70%; margin-left: auto; margin-right: auto; margin-bottom: 70px; font-size: 24px; } @media only screen and (max-width: 1199px) { .fxt-template-layout19 .fxt-main-content .fxt-paragraph { margin-bottom: 60px; } } @media only screen and (max-width: 991px) { .fxt-template-layout19 .fxt-main-content .fxt-paragraph { margin-bottom: 50px; font-size: 22px; } } @media only screen and (max-width: 767px) { .fxt-template-layout19 .fxt-main-content .fxt-paragraph { width: 80%; margin-bottom: 40px; font-size: 20px; } } @media only screen and (max-width: 575px) { .fxt-template-layout19 .fxt-main-content .fxt-paragraph { width: 100%; margin-bottom: 30px; font-size: 18px; } } .fxt-template-layout19 .fxt-main-content .fxt-buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-bottom: 60px; } @media only screen and (max-width: 991px) { .fxt-template-layout19 .fxt-main-content .fxt-buttons { margin-bottom: 50px; } } @media only screen and (max-width: 767px) { .fxt-template-layout19 .fxt-main-content .fxt-buttons { margin-bottom: 40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout19 .fxt-main-content .fxt-buttons { margin-bottom: 30px; } } .fxt-template-layout19 .fxt-main-content .fxt-buttons .fxt-btn { margin: 0 7px 12px; } .fxt-template-layout19 .fxt-main-content .fxt-btn-ghost { text-align: center; margin-top: 15px; font-family: 'Roboto', sans-serif; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #dedede; color: #000; border-radius: 45px; background-color: transparent; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout19 .fxt-main-content .fxt-btn-ghost { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout19 .fxt-main-content .fxt-btn-ghost { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout19 .fxt-main-content .fxt-btn-ghost:hover { background-color: #f11e47; border-color: #f11e47; color: #f1f1f1; } .fxt-template-layout19 .fxt-main-content .fxt-btn-ghost:focus { outline: none; } .fxt-template-layout19 .fxt-main-content .fxt-btn-fill { text-align: center; margin-top: 15px; font-family: 'Roboto', sans-serif; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f11e47; color: #f1f1f1; border-radius: 45px; background-color: #f11e47; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout19 .fxt-main-content .fxt-btn-fill { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout19 .fxt-main-content .fxt-btn-fill { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout19 .fxt-main-content .fxt-btn-fill:hover { background-color: transparent; border-color: #dedede; color: #000; } .fxt-template-layout19 .fxt-main-content .fxt-btn-fill:focus { outline: none; } .fxt-template-layout19 .fxt-main-content .fxt-socials { margin-bottom: 70px; } @media only screen and (max-width: 991px) { .fxt-template-layout19 .fxt-main-content .fxt-socials { margin-bottom: 60px; } } @media only screen and (max-width: 767px) { .fxt-template-layout19 .fxt-main-content .fxt-socials { margin-bottom: 50px; } } @media only screen and (max-width: 575px) { .fxt-template-layout19 .fxt-main-content .fxt-socials { margin-bottom: 40px; } } .fxt-template-layout19 .fxt-main-content .fxt-socials li { display: inline-block; margin-right: 15px; } @media only screen and (max-width: 991px) { .fxt-template-layout19 .fxt-main-content .fxt-socials li { margin-right: 10px; margin-bottom: 5px; } } @media only screen and (max-width: 767px) { .fxt-template-layout19 .fxt-main-content .fxt-socials li { margin-right: 5px; } } .fxt-template-layout19 .fxt-main-content .fxt-socials li:last-child { margin-right: 0; } .fxt-template-layout19 .fxt-main-content .fxt-socials li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 16px; height: 45px; width: 45px; color: #666666; background-color: transparent; border-radius: 50%; border: 1px solid; border-color: #dedede; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout19 .fxt-main-content .fxt-socials li a { font-size: 15px; height: 40px; width: 40px; } } .fxt-template-layout19 .fxt-main-content .fxt-socials li a:hover { color: #fff; } .fxt-template-layout19 .fxt-main-content .fxt-socials li.fxt-facebook a:hover { background-color: #3b5998; border-color: #3b5998; } .fxt-template-layout19 .fxt-main-content .fxt-socials li.fxt-twitter a:hover { background-color: #00acee; border-color: #00acee; } .fxt-template-layout19 .fxt-main-content .fxt-socials li.fxt-google a:hover { background-color: #CC3333; border-color: #CC3333; } .fxt-template-layout19 .fxt-main-content .fxt-socials li.fxt-instagram a:hover { background-color: #3f729b; border-color: #3f729b; } .fxt-template-layout19 .fxt-main-content .fxt-socials li.fxt-linkedin a:hover { background-color: #0077B5; border-color: #0077B5; } .fxt-template-layout19 .fxt-main-content .fxt-socials li.fxt-youtube a:hover { background-color: #c4302b; border-color: #c4302b; } .fxt-template-layout19 .fxt-main-content .fxt-socials li.fxt-pinterest a:hover { background-color: #bd081c; border-color: #bd081c; } .fxt-template-layout19 .fxt-main-content .fxt-footer p { color: #000000; font-size: 15px; } .fxt-template-layout19 .fxt-main-content .fxt-bg-color { overflow: hidden; min-height: 100vh; background-color: #fff; padding: 90px; } @media only screen and (max-width: 991px) { .fxt-template-layout19 .fxt-main-content .fxt-bg-color { padding: 80px 70px; min-height: 100%; } } @media only screen and (max-width: 767px) { .fxt-template-layout19 .fxt-main-content .fxt-bg-color { padding: 70px 60px; } } @media only screen and (max-width: 575px) { .fxt-template-layout19 .fxt-main-content .fxt-bg-color { padding: 60px 50px; } } @media only screen and (max-width: 479px) { .fxt-template-layout19 .fxt-main-content .fxt-bg-color { padding: 50px 40px; } } .fxt-template-layout19 .fxt-main-content .fxt-figure { height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; } @media only screen and (min-width: 992px) { body.open-sidebar .fxt-template-layout19 .fxt-main-content { transform: translateX(-50%); } } /*======================================================================== 25. Demo Layout Twenty =========================================================================*/ .fxt-template-layout20 { display: flex; align-items: flex-start; } @media only screen and (max-width: 991px) { .fxt-template-layout20 { display: block; min-width: 100%; } } .fxt-template-layout20 .fxt-main-content { min-height: 100vh; min-width: 100vw; text-align: center; transition: all 0.8s ease-in-out; } @media only screen and (max-width: 991px) { .fxt-template-layout20 .fxt-main-content { min-width: 100%; } } .fxt-template-layout20 .fxt-main-content .fxt-right-content { padding: 65px 0; background-color: #fafafa; min-height: 100vh; display: flex; justify-content: center; flex-direction: column; } @media only screen and (max-width: 991px) { .fxt-template-layout20 .fxt-main-content .fxt-right-content { padding: 55px 15px; } } @media only screen and (max-width: 767px) { .fxt-template-layout20 .fxt-main-content .fxt-right-content { padding: 45px 15px; } } @media only screen and (max-width: 575px) { .fxt-template-layout20 .fxt-main-content .fxt-right-content { padding: 35px 15px; } } .fxt-template-layout20 .fxt-main-content .fxt-logo { margin-top: 25px; margin-bottom: 14vh; max-width: 40vw; margin-left: auto; margin-right: auto; } .fxt-template-layout20 .fxt-main-content .fxt-sub-title { color: #f11e47; font-size: 46px; font-family: 'Raleway', sans-serif; letter-spacing: 8px; margin-bottom: 25px; line-height: 1.4; margin-left: 8px; } @media only screen and (max-width: 1199px) { .fxt-template-layout20 .fxt-main-content .fxt-sub-title { font-size: 40px; } } @media only screen and (max-width: 991px) { .fxt-template-layout20 .fxt-main-content .fxt-sub-title { font-size: 36px; letter-spacing: 6px; line-height: 1.6; margin-left: 6px; margin-bottom: 20px; } } @media only screen and (max-width: 767px) { .fxt-template-layout20 .fxt-main-content .fxt-sub-title { font-size: 32px; letter-spacing: 4px; line-height: 1.5; margin-left: 4px; margin-bottom: 15px; } } @media only screen and (max-width: 575px) { .fxt-template-layout20 .fxt-main-content .fxt-sub-title { font-size: 28px; letter-spacing: 2px; line-height: 1.4; margin-left: 2px; } } @media only screen and (max-width: 479px) { .fxt-template-layout20 .fxt-main-content .fxt-sub-title { font-size: 26px; line-height: 1.3; } } .fxt-template-layout20 .fxt-main-content .fxt-buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-bottom: 60px; } @media only screen and (max-width: 991px) { .fxt-template-layout20 .fxt-main-content .fxt-buttons { margin-bottom: 50px; } } @media only screen and (max-width: 767px) { .fxt-template-layout20 .fxt-main-content .fxt-buttons { margin-bottom: 40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout20 .fxt-main-content .fxt-buttons { margin-bottom: 30px; } } .fxt-template-layout20 .fxt-main-content .fxt-buttons .fxt-btn { margin: 0 7px 12px; } .fxt-template-layout20 .fxt-main-content .fxt-btn-ghost { text-align: center; margin-top: 15px; font-family: 'Roboto', sans-serif; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #dedede; color: #000; border-radius: 45px; background-color: transparent; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout20 .fxt-main-content .fxt-btn-ghost { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout20 .fxt-main-content .fxt-btn-ghost { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout20 .fxt-main-content .fxt-btn-ghost:hover { background-color: #f11e47; border-color: #f11e47; color: #f1f1f1; } .fxt-template-layout20 .fxt-main-content .fxt-btn-ghost:focus { outline: none; } .fxt-template-layout20 .fxt-main-content .fxt-btn-fill { text-align: center; margin-top: 15px; font-family: 'Roboto', sans-serif; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f11e47; color: #f1f1f1; border-radius: 45px; background-color: #f11e47; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout20 .fxt-main-content .fxt-btn-fill { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout20 .fxt-main-content .fxt-btn-fill { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout20 .fxt-main-content .fxt-btn-fill:hover { background-color: transparent; border-color: #dedede; color: #000; } .fxt-template-layout20 .fxt-main-content .fxt-btn-fill:focus { outline: none; } .fxt-template-layout20 .fxt-main-content .fxt-socials { margin-bottom: 70px; } @media only screen and (max-width: 991px) { .fxt-template-layout20 .fxt-main-content .fxt-socials { margin-bottom: 60px; } } @media only screen and (max-width: 767px) { .fxt-template-layout20 .fxt-main-content .fxt-socials { margin-bottom: 50px; } } @media only screen and (max-width: 575px) { .fxt-template-layout20 .fxt-main-content .fxt-socials { margin-bottom: 40px; } } .fxt-template-layout20 .fxt-main-content .fxt-socials li { display: inline-block; margin-right: 15px; } @media only screen and (max-width: 991px) { .fxt-template-layout20 .fxt-main-content .fxt-socials li { margin-right: 10px; margin-bottom: 5px; } } @media only screen and (max-width: 767px) { .fxt-template-layout20 .fxt-main-content .fxt-socials li { margin-right: 5px; } } .fxt-template-layout20 .fxt-main-content .fxt-socials li:last-child { margin-right: 0; } .fxt-template-layout20 .fxt-main-content .fxt-socials li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 16px; height: 45px; width: 45px; color: #666666; background-color: transparent; border-radius: 50%; border: 1px solid; border-color: #dedede; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout20 .fxt-main-content .fxt-socials li a { font-size: 15px; height: 40px; width: 40px; } } .fxt-template-layout20 .fxt-main-content .fxt-socials li a:hover { color: #fff; } .fxt-template-layout20 .fxt-main-content .fxt-socials li.fxt-facebook a:hover { background-color: #3b5998; border-color: #3b5998; } .fxt-template-layout20 .fxt-main-content .fxt-socials li.fxt-twitter a:hover { background-color: #00acee; border-color: #00acee; } .fxt-template-layout20 .fxt-main-content .fxt-socials li.fxt-google a:hover { background-color: #CC3333; border-color: #CC3333; } .fxt-template-layout20 .fxt-main-content .fxt-socials li.fxt-instagram a:hover { background-color: #3f729b; border-color: #3f729b; } .fxt-template-layout20 .fxt-main-content .fxt-socials li.fxt-linkedin a:hover { background-color: #0077B5; border-color: #0077B5; } .fxt-template-layout20 .fxt-main-content .fxt-socials li.fxt-youtube a:hover { background-color: #c4302b; border-color: #c4302b; } .fxt-template-layout20 .fxt-main-content .fxt-socials li.fxt-pinterest a:hover { background-color: #bd081c; border-color: #bd081c; } .fxt-template-layout20 .fxt-main-content .fxt-footer p { color: #000000; font-size: 15px; } .fxt-template-layout20 .fxt-main-content .fxt-bg-color { overflow: hidden; min-height: 100vh; background-color: #fff; padding: 90px; } @media only screen and (max-width: 991px) { .fxt-template-layout20 .fxt-main-content .fxt-bg-color { padding: 80px 70px; min-height: 100%; } } @media only screen and (max-width: 767px) { .fxt-template-layout20 .fxt-main-content .fxt-bg-color { padding: 70px 60px; } } @media only screen and (max-width: 575px) { .fxt-template-layout20 .fxt-main-content .fxt-bg-color { padding: 60px 50px; } } @media only screen and (max-width: 479px) { .fxt-template-layout20 .fxt-main-content .fxt-bg-color { padding: 50px 40px; } } .fxt-template-layout20 .fxt-main-content .fxt-figure { height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; } .fxt-template-layout20 .fxt-countdown { margin-bottom: 70px; padding-bottom: 50px; } @media only screen and (max-width: 1439px) { .fxt-template-layout20 .fxt-countdown { margin-bottom: 60px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout20 .fxt-countdown { margin-bottom: 50px; } } @media only screen and (max-width: 991px) { .fxt-template-layout20 .fxt-countdown { margin-bottom: 40px; } } @media only screen and (max-width: 767px) { .fxt-template-layout20 .fxt-countdown { margin-bottom: 30px; } } @media only screen and (max-width: 575px) { .fxt-template-layout20 .fxt-countdown { margin-bottom: 20px; } } .fxt-template-layout20 .fxt-countdown .countdown-section { display: inline-block; min-width: 70px; margin-right: 35px; padding-right: 35px; position: relative; z-index: 1; } @media only screen and (max-width: 1855px) { .fxt-template-layout20 .fxt-countdown .countdown-section { margin-right: 30px; padding-right: 30px; } } @media only screen and (max-width: 1439px) { .fxt-template-layout20 .fxt-countdown .countdown-section { margin-right: 25px; padding-right: 25px; min-width: 65px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout20 .fxt-countdown .countdown-section { margin-right: 20px; padding-right: 20px; min-width: 60px; } } @media only screen and (max-width: 575px) { .fxt-template-layout20 .fxt-countdown .countdown-section { min-width: 55px; margin-right: 15px; padding-right: 15px; } } @media only screen and (max-width: 479px) { .fxt-template-layout20 .fxt-countdown .countdown-section { min-width: 45px; margin-right: 10px; padding-right: 10px; } } .fxt-template-layout20 .fxt-countdown .countdown-section > div { position: relative; z-index: 1; } .fxt-template-layout20 .fxt-countdown .countdown-section:before { content: ""; height: 10px; width: 10px; border-radius: 50%; background-color: #000; position: absolute; z-index: 1; top: 16px; right: -5px; } @media only screen and (max-width: 1855px) { .fxt-template-layout20 .fxt-countdown .countdown-section:before { top: 15px; } } @media only screen and (max-width: 1439px) { .fxt-template-layout20 .fxt-countdown .countdown-section:before { top: 13px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout20 .fxt-countdown .countdown-section:before { top: 11px; height: 8px; width: 8px; } } @media only screen and (max-width: 575px) { .fxt-template-layout20 .fxt-countdown .countdown-section:before { top: 10px; height: 5px; width: 5px; } } @media only screen and (max-width: 479px) { .fxt-template-layout20 .fxt-countdown .countdown-section:before { top: 8px; right: -3px; } } .fxt-template-layout20 .fxt-countdown .countdown-section:after { content: ""; height: 10px; width: 10px; border-radius: 50%; background-color: #000; position: absolute; z-index: 1; top: 38px; right: -5px; } @media only screen and (max-width: 1855px) { .fxt-template-layout20 .fxt-countdown .countdown-section:after { top: 43px; } } @media only screen and (max-width: 1439px) { .fxt-template-layout20 .fxt-countdown .countdown-section:after { top: 38px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout20 .fxt-countdown .countdown-section:after { top: 32px; height: 8px; width: 8px; } } @media only screen and (max-width: 575px) { .fxt-template-layout20 .fxt-countdown .countdown-section:after { top: 28px; height: 5px; width: 5px; } } @media only screen and (max-width: 479px) { .fxt-template-layout20 .fxt-countdown .countdown-section:after { top: 23px; right: -3px; } } .fxt-template-layout20 .fxt-countdown .countdown-section:last-child { margin-right: 0; padding-right: 0; } .fxt-template-layout20 .fxt-countdown .countdown-section:last-child:after, .fxt-template-layout20 .fxt-countdown .countdown-section:last-child:before { display: none; } .fxt-template-layout20 .fxt-countdown .countdown-section .countdown-number { font-size: 60px; line-height: 1; font-weight: 600; color: #000; } @media only screen and (max-width: 1439px) { .fxt-template-layout20 .fxt-countdown .countdown-section .countdown-number { font-size: 56px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout20 .fxt-countdown .countdown-section .countdown-number { font-size: 48px; } } @media only screen and (max-width: 575px) { .fxt-template-layout20 .fxt-countdown .countdown-section .countdown-number { font-size: 42px; } } @media only screen and (max-width: 479px) { .fxt-template-layout20 .fxt-countdown .countdown-section .countdown-number { font-size: 36px; } } .fxt-template-layout20 .fxt-countdown .countdown-section .countdown-unit { color: #666666; position: absolute; z-index: 1; bottom: -50px; left: 50%; transform: translateX(-50%); font-size: 22px; } @media only screen and (max-width: 991px) { .fxt-template-layout20 .fxt-countdown .countdown-section .countdown-unit { font-size: 20px; bottom: -45px; } } @media only screen and (max-width: 767px) { .fxt-template-layout20 .fxt-countdown .countdown-section .countdown-unit { font-size: 18px; bottom: -40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout20 .fxt-countdown .countdown-section .countdown-unit { font-size: 16px; bottom: -35px; } } @media only screen and (max-width: 575px) { .fxt-template-layout20 .fxt-countdown .countdown-section .countdown-unit { font-size: 15px; bottom: -30px; } } @media only screen and (min-width: 992px) { body.open-sidebar .fxt-template-layout20 .fxt-main-content { transform: translateX(-50%); } } /*======================================================================== 26. Demo Layout Twenty One =========================================================================*/ .fxt-template-layout21 { display: flex; align-items: flex-start; } @media only screen and (max-width: 991px) { .fxt-template-layout21 { display: block; min-width: 100%; } } .fxt-template-layout21 .fxt-main-content { padding-top: 280px; padding-bottom: 280px; background-position: center; background-size: cover; background-repeat: no-repeat; min-height: 100vh; min-width: 100vw; position: relative; z-index: 1; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; transition: all 0.8s ease-in-out; } @media only screen and (max-width: 991px) { .fxt-template-layout21 .fxt-main-content { min-width: 100%; padding: 55px 15px; } } @media only screen and (max-width: 767px) { .fxt-template-layout21 .fxt-main-content { padding: 45px 15px; } } @media only screen and (max-width: 575px) { .fxt-template-layout21 .fxt-main-content { padding: 35px 15px; } } .fxt-template-layout21 .fxt-main-content:before { content: ""; background-color: rgba(0, 0, 0, 0.8); position: absolute; height: 100%; width: 100%; top: 0; left: 0; z-index: -1; } .fxt-template-layout21 .fxt-main-content .fxt-logo { max-width: 40vw; position: absolute; z-index: 1; left: 130px; top: 150px; transition: all 0.8s ease-in-out; } @media only screen and (max-width: 991px) { .fxt-template-layout21 .fxt-main-content .fxt-logo { position: inherit; left: inherit; top: inherit; margin-bottom: 14vh; margin-top: 25px; } } @media only screen and (max-width: 767px) { .fxt-template-layout21 .fxt-main-content .fxt-logo { margin-bottom: 12vh; } } @media only screen and (max-width: 575px) { .fxt-template-layout21 .fxt-main-content .fxt-logo { margin-bottom: 10vh; max-width: 40vw; } } @media only screen and (max-width: 479px) { .fxt-template-layout21 .fxt-main-content .fxt-logo { margin-bottom: 8vh; } } .fxt-template-layout21 .fxt-main-content .fxt-sub-title { color: #fff; font-size: 30px; margin-bottom: 5px; } @media only screen and (max-width: 991px) { .fxt-template-layout21 .fxt-main-content .fxt-sub-title { font-size: 26px; } } @media only screen and (max-width: 767px) { .fxt-template-layout21 .fxt-main-content .fxt-sub-title { font-size: 24px; } } @media only screen and (max-width: 575px) { .fxt-template-layout21 .fxt-main-content .fxt-sub-title { font-size: 22px; } } @media only screen and (max-width: 479px) { .fxt-template-layout21 .fxt-main-content .fxt-sub-title { font-size: 20px; } } .fxt-template-layout21 .fxt-main-content .fxt-main-title { color: #fff; line-height: 1; font-size: 60px; font-weight: 700; margin-bottom: 40px; text-align: center; min-width: 100%; } @media only screen and (max-width: 1439px) { .fxt-template-layout21 .fxt-main-content .fxt-main-title { font-size: 52px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout21 .fxt-main-content .fxt-main-title { font-size: 48px; } } @media only screen and (max-width: 991px) { .fxt-template-layout21 .fxt-main-content .fxt-main-title { font-size: 40px; } } @media only screen and (max-width: 767px) { .fxt-template-layout21 .fxt-main-content .fxt-main-title { font-size: 36px; } } @media only screen and (max-width: 575px) { .fxt-template-layout21 .fxt-main-content .fxt-main-title { font-size: 34px; } } @media only screen and (max-width: 479px) { .fxt-template-layout21 .fxt-main-content .fxt-main-title { font-size: 32px; } } .fxt-template-layout21 .fxt-main-content .fxt-main-title b { text-align: center; right: 0; left: 0; } .fxt-template-layout21 .fxt-main-content .fxt-main-title b i { font-style: unset; margin-right: 7px; } .fxt-template-layout21 .fxt-main-content .fxt-paragraph { color: #d8d8d8; width: 70%; margin-left: auto; margin-right: auto; margin-bottom: 70px; } @media only screen and (max-width: 1199px) { .fxt-template-layout21 .fxt-main-content .fxt-paragraph { margin-bottom: 60px; } } @media only screen and (max-width: 991px) { .fxt-template-layout21 .fxt-main-content .fxt-paragraph { margin-bottom: 50px; } } @media only screen and (max-width: 767px) { .fxt-template-layout21 .fxt-main-content .fxt-paragraph { width: 80%; margin-bottom: 40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout21 .fxt-main-content .fxt-paragraph { width: 100%; margin-bottom: 30px; } } .fxt-template-layout21 .fxt-main-content .fxt-buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } @media only screen and (max-width: 991px) { .fxt-template-layout21 .fxt-main-content .fxt-buttons { margin-bottom: 50px; } } @media only screen and (max-width: 767px) { .fxt-template-layout21 .fxt-main-content .fxt-buttons { margin-bottom: 40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout21 .fxt-main-content .fxt-buttons { margin-bottom: 30px; } } .fxt-template-layout21 .fxt-main-content .fxt-buttons .fxt-btn { margin: 0 7px 12px; } .fxt-template-layout21 .fxt-main-content .fxt-btn-ghost { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f1f1f1; color: #f1f1f1; border-radius: 45px; background-color: transparent; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout21 .fxt-main-content .fxt-btn-ghost { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout21 .fxt-main-content .fxt-btn-ghost { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout21 .fxt-main-content .fxt-btn-ghost:hover { background-color: #f11e47; border-color: #f11e47; } .fxt-template-layout21 .fxt-main-content .fxt-btn-ghost:focus { outline: none; } .fxt-template-layout21 .fxt-main-content .fxt-btn-fill { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f11e47; color: #f1f1f1; border-radius: 45px; background-color: #f11e47; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout21 .fxt-main-content .fxt-btn-fill { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout21 .fxt-main-content .fxt-btn-fill { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout21 .fxt-main-content .fxt-btn-fill:hover { background-color: transparent; border-color: #f1f1f1; } .fxt-template-layout21 .fxt-main-content .fxt-btn-fill:focus { outline: none; } .fxt-template-layout21 .fxt-main-content .fxt-socials { position: absolute; z-index: 1; left: 130px; bottom: 150px; transition: all 0.8s ease-in-out; } @media only screen and (max-width: 991px) { .fxt-template-layout21 .fxt-main-content .fxt-socials { position: inherit; left: inherit; bottom: inherit; margin-bottom: 60px; } } @media only screen and (max-width: 767px) { .fxt-template-layout21 .fxt-main-content .fxt-socials { margin-bottom: 50px; } } @media only screen and (max-width: 575px) { .fxt-template-layout21 .fxt-main-content .fxt-socials { margin-bottom: 40px; } } .fxt-template-layout21 .fxt-main-content .fxt-socials li { display: inline-block; margin-right: 15px; margin-bottom: 8px; } @media only screen and (max-width: 991px) { .fxt-template-layout21 .fxt-main-content .fxt-socials li { margin-right: 10px; margin-bottom: 5px; } } @media only screen and (max-width: 767px) { .fxt-template-layout21 .fxt-main-content .fxt-socials li { margin-right: 5px; } } .fxt-template-layout21 .fxt-main-content .fxt-socials li:last-child { margin-right: 0; } .fxt-template-layout21 .fxt-main-content .fxt-socials li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 16px; height: 45px; width: 45px; color: #ffffff; background-color: #1f1f1f; border-radius: 50%; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout21 .fxt-main-content .fxt-socials li a { font-size: 15px; height: 40px; width: 40px; } } .fxt-template-layout21 .fxt-main-content .fxt-socials li.fxt-facebook a:hover { background-color: #3b5998; } .fxt-template-layout21 .fxt-main-content .fxt-socials li.fxt-twitter a:hover { background-color: #00acee; } .fxt-template-layout21 .fxt-main-content .fxt-socials li.fxt-google a:hover { background-color: #CC3333; } .fxt-template-layout21 .fxt-main-content .fxt-socials li.fxt-instagram a:hover { background-color: #3f729b; } .fxt-template-layout21 .fxt-main-content .fxt-socials li.fxt-linkedin a:hover { background-color: #0077B5; } .fxt-template-layout21 .fxt-main-content .fxt-socials li.fxt-youtube a:hover { background-color: #c4302b; } .fxt-template-layout21 .fxt-main-content .fxt-socials li.fxt-pinterest a:hover { background-color: #bd081c; } .fxt-template-layout21 .fxt-main-content .fxt-footer { position: absolute; z-index: 1; right: 130px; bottom: 150px; transition: all 0.8s ease-in-out; } @media only screen and (max-width: 991px) { .fxt-template-layout21 .fxt-main-content .fxt-footer { position: inherit; right: inherit; bottom: inherit; } } .fxt-template-layout21 .fxt-main-content .fxt-footer p { color: #e3e3e3; font-size: 15px; } @media only screen and (min-width: 992px) { body.open-sidebar .fxt-template-layout21 .fxt-main-content { min-width: 50vw; max-width: 50vw; padding-top: 260px; padding-bottom: 300px; } body.open-sidebar .fxt-template-layout21 .fxt-main-content .fxt-logo { left: 50%; top: 125px; transform: translateX(-50%); margin: 0 auto; } body.open-sidebar .fxt-template-layout21 .fxt-main-content .fxt-socials { left: 50%; bottom: 200px; transform: translateX(-50%); margin: 0 auto; } body.open-sidebar .fxt-template-layout21 .fxt-main-content .fxt-footer { right: 50%; transform: translateX(50%); bottom: 100px; margin: 0 auto; } } /*======================================================================== 27. Demo Layout Twenty Two =========================================================================*/ .fxt-template-layout22 { display: flex; align-items: flex-start; } @media only screen and (max-width: 991px) { .fxt-template-layout22 { display: block; min-width: 100%; } } .fxt-template-layout22 .fxt-main-content { padding-top: 280px; padding-bottom: 280px; background-position: center; background-size: cover; background-repeat: no-repeat; min-height: 100vh; min-width: 100vw; position: relative; z-index: 1; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; transition: all 0.8s ease-in-out; } @media only screen and (max-width: 991px) { .fxt-template-layout22 .fxt-main-content { min-width: 100%; padding: 55px 15px; } } @media only screen and (max-width: 767px) { .fxt-template-layout22 .fxt-main-content { padding: 45px 15px; } } @media only screen and (max-width: 575px) { .fxt-template-layout22 .fxt-main-content { padding: 35px 15px; } } .fxt-template-layout22 .fxt-main-content:before { content: ""; background-color: rgba(0, 0, 0, 0.8); position: absolute; height: 100%; width: 100%; top: 0; left: 0; z-index: -1; } .fxt-template-layout22 .fxt-main-content .fxt-logo { max-width: 40vw; position: absolute; z-index: 1; left: 130px; top: 150px; transition: all 0.8s ease-in-out; } @media only screen and (max-width: 991px) { .fxt-template-layout22 .fxt-main-content .fxt-logo { position: inherit; left: inherit; top: inherit; margin-bottom: 14vh; margin-top: 25px; } } @media only screen and (max-width: 767px) { .fxt-template-layout22 .fxt-main-content .fxt-logo { margin-bottom: 12vh; } } @media only screen and (max-width: 575px) { .fxt-template-layout22 .fxt-main-content .fxt-logo { margin-bottom: 10vh; max-width: 40vw; } } @media only screen and (max-width: 479px) { .fxt-template-layout22 .fxt-main-content .fxt-logo { margin-bottom: 8vh; } } .fxt-template-layout22 .fxt-main-content .fxt-sub-title { color: #fff; font-size: 46px; font-family: 'Raleway', sans-serif; letter-spacing: 8px; margin-bottom: 25px; line-height: 1.4; margin-left: 8px; } @media only screen and (max-width: 1199px) { .fxt-template-layout22 .fxt-main-content .fxt-sub-title { font-size: 40px; } } @media only screen and (max-width: 991px) { .fxt-template-layout22 .fxt-main-content .fxt-sub-title { font-size: 36px; letter-spacing: 6px; line-height: 1.6; margin-left: 6px; margin-bottom: 20px; } } @media only screen and (max-width: 767px) { .fxt-template-layout22 .fxt-main-content .fxt-sub-title { font-size: 32px; letter-spacing: 4px; line-height: 1.5; margin-left: 4px; margin-bottom: 15px; } } @media only screen and (max-width: 575px) { .fxt-template-layout22 .fxt-main-content .fxt-sub-title { font-size: 28px; letter-spacing: 2px; line-height: 1.4; margin-left: 2px; } } @media only screen and (max-width: 479px) { .fxt-template-layout22 .fxt-main-content .fxt-sub-title { font-size: 26px; line-height: 1.3; } } .fxt-template-layout22 .fxt-main-content .fxt-buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } @media only screen and (max-width: 991px) { .fxt-template-layout22 .fxt-main-content .fxt-buttons { margin-bottom: 50px; } } @media only screen and (max-width: 767px) { .fxt-template-layout22 .fxt-main-content .fxt-buttons { margin-bottom: 40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout22 .fxt-main-content .fxt-buttons { margin-bottom: 30px; } } .fxt-template-layout22 .fxt-main-content .fxt-buttons .fxt-btn { margin: 0 7px 12px; } .fxt-template-layout22 .fxt-main-content .fxt-btn-ghost { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f1f1f1; color: #f1f1f1; border-radius: 45px; background-color: transparent; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout22 .fxt-main-content .fxt-btn-ghost { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout22 .fxt-main-content .fxt-btn-ghost { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout22 .fxt-main-content .fxt-btn-ghost:hover { background-color: #f11e47; border-color: #f11e47; } .fxt-template-layout22 .fxt-main-content .fxt-btn-ghost:focus { outline: none; } .fxt-template-layout22 .fxt-main-content .fxt-btn-fill { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f11e47; color: #f1f1f1; border-radius: 45px; background-color: #f11e47; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout22 .fxt-main-content .fxt-btn-fill { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout22 .fxt-main-content .fxt-btn-fill { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout22 .fxt-main-content .fxt-btn-fill:hover { background-color: transparent; border-color: #f1f1f1; } .fxt-template-layout22 .fxt-main-content .fxt-btn-fill:focus { outline: none; } .fxt-template-layout22 .fxt-main-content .fxt-socials { position: absolute; z-index: 1; left: 130px; bottom: 150px; transition: all 0.8s ease-in-out; } @media only screen and (max-width: 991px) { .fxt-template-layout22 .fxt-main-content .fxt-socials { position: inherit; left: inherit; bottom: inherit; margin-bottom: 60px; } } @media only screen and (max-width: 767px) { .fxt-template-layout22 .fxt-main-content .fxt-socials { margin-bottom: 50px; } } @media only screen and (max-width: 575px) { .fxt-template-layout22 .fxt-main-content .fxt-socials { margin-bottom: 40px; } } .fxt-template-layout22 .fxt-main-content .fxt-socials li { display: inline-block; margin-right: 15px; margin-bottom: 8px; } @media only screen and (max-width: 991px) { .fxt-template-layout22 .fxt-main-content .fxt-socials li { margin-right: 10px; margin-bottom: 5px; } } @media only screen and (max-width: 767px) { .fxt-template-layout22 .fxt-main-content .fxt-socials li { margin-right: 5px; } } .fxt-template-layout22 .fxt-main-content .fxt-socials li:last-child { margin-right: 0; } .fxt-template-layout22 .fxt-main-content .fxt-socials li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 16px; height: 45px; width: 45px; color: #ffffff; background-color: #1f1f1f; border-radius: 50%; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout22 .fxt-main-content .fxt-socials li a { font-size: 15px; height: 40px; width: 40px; } } .fxt-template-layout22 .fxt-main-content .fxt-socials li.fxt-facebook a:hover { background-color: #3b5998; } .fxt-template-layout22 .fxt-main-content .fxt-socials li.fxt-twitter a:hover { background-color: #00acee; } .fxt-template-layout22 .fxt-main-content .fxt-socials li.fxt-google a:hover { background-color: #CC3333; } .fxt-template-layout22 .fxt-main-content .fxt-socials li.fxt-instagram a:hover { background-color: #3f729b; } .fxt-template-layout22 .fxt-main-content .fxt-socials li.fxt-linkedin a:hover { background-color: #0077B5; } .fxt-template-layout22 .fxt-main-content .fxt-socials li.fxt-youtube a:hover { background-color: #c4302b; } .fxt-template-layout22 .fxt-main-content .fxt-socials li.fxt-pinterest a:hover { background-color: #bd081c; } .fxt-template-layout22 .fxt-main-content .fxt-footer { position: absolute; z-index: 1; right: 130px; bottom: 150px; transition: all 0.8s ease-in-out; } @media only screen and (max-width: 991px) { .fxt-template-layout22 .fxt-main-content .fxt-footer { position: inherit; right: inherit; bottom: inherit; } } .fxt-template-layout22 .fxt-main-content .fxt-footer p { color: #e3e3e3; font-size: 15px; } .fxt-template-layout22 .fxt-countdown { margin-bottom: 70px; padding-bottom: 50px; } @media only screen and (max-width: 1439px) { .fxt-template-layout22 .fxt-countdown { margin-bottom: 60px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout22 .fxt-countdown { margin-bottom: 50px; } } @media only screen and (max-width: 991px) { .fxt-template-layout22 .fxt-countdown { margin-bottom: 40px; } } @media only screen and (max-width: 767px) { .fxt-template-layout22 .fxt-countdown { margin-bottom: 30px; } } @media only screen and (max-width: 575px) { .fxt-template-layout22 .fxt-countdown { margin-bottom: 20px; } } .fxt-template-layout22 .fxt-countdown .countdown-section { display: inline-block; min-width: 70px; margin-right: 35px; padding-right: 35px; position: relative; z-index: 1; } @media only screen and (max-width: 1855px) { .fxt-template-layout22 .fxt-countdown .countdown-section { margin-right: 30px; padding-right: 30px; } } @media only screen and (max-width: 1439px) { .fxt-template-layout22 .fxt-countdown .countdown-section { margin-right: 25px; padding-right: 25px; min-width: 65px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout22 .fxt-countdown .countdown-section { margin-right: 20px; padding-right: 20px; min-width: 60px; } } @media only screen and (max-width: 575px) { .fxt-template-layout22 .fxt-countdown .countdown-section { min-width: 55px; margin-right: 15px; padding-right: 15px; } } @media only screen and (max-width: 479px) { .fxt-template-layout22 .fxt-countdown .countdown-section { min-width: 45px; margin-right: 10px; padding-right: 10px; } } .fxt-template-layout22 .fxt-countdown .countdown-section > div { position: relative; z-index: 1; } .fxt-template-layout22 .fxt-countdown .countdown-section:before { content: ""; height: 10px; width: 10px; border-radius: 50%; background-color: #ffffff; position: absolute; z-index: 1; top: 16px; right: -5px; } @media only screen and (max-width: 1855px) { .fxt-template-layout22 .fxt-countdown .countdown-section:before { top: 15px; } } @media only screen and (max-width: 1439px) { .fxt-template-layout22 .fxt-countdown .countdown-section:before { top: 13px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout22 .fxt-countdown .countdown-section:before { top: 11px; height: 8px; width: 8px; } } @media only screen and (max-width: 575px) { .fxt-template-layout22 .fxt-countdown .countdown-section:before { top: 10px; height: 5px; width: 5px; } } @media only screen and (max-width: 479px) { .fxt-template-layout22 .fxt-countdown .countdown-section:before { top: 8px; right: -3px; } } .fxt-template-layout22 .fxt-countdown .countdown-section:after { content: ""; height: 10px; width: 10px; border-radius: 50%; background-color: #ffffff; position: absolute; z-index: 1; top: 38px; right: -5px; } @media only screen and (max-width: 1855px) { .fxt-template-layout22 .fxt-countdown .countdown-section:after { top: 43px; } } @media only screen and (max-width: 1439px) { .fxt-template-layout22 .fxt-countdown .countdown-section:after { top: 38px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout22 .fxt-countdown .countdown-section:after { top: 32px; height: 8px; width: 8px; } } @media only screen and (max-width: 575px) { .fxt-template-layout22 .fxt-countdown .countdown-section:after { top: 28px; height: 5px; width: 5px; } } @media only screen and (max-width: 479px) { .fxt-template-layout22 .fxt-countdown .countdown-section:after { top: 23px; right: -3px; } } .fxt-template-layout22 .fxt-countdown .countdown-section:last-child { margin-right: 0; padding-right: 0; } .fxt-template-layout22 .fxt-countdown .countdown-section:last-child:after, .fxt-template-layout22 .fxt-countdown .countdown-section:last-child:before { display: none; } .fxt-template-layout22 .fxt-countdown .countdown-section .countdown-number { font-size: 60px; line-height: 1; font-weight: 600; color: #ffffff; } @media only screen and (max-width: 1439px) { .fxt-template-layout22 .fxt-countdown .countdown-section .countdown-number { font-size: 56px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout22 .fxt-countdown .countdown-section .countdown-number { font-size: 48px; } } @media only screen and (max-width: 575px) { .fxt-template-layout22 .fxt-countdown .countdown-section .countdown-number { font-size: 42px; } } @media only screen and (max-width: 479px) { .fxt-template-layout22 .fxt-countdown .countdown-section .countdown-number { font-size: 36px; } } .fxt-template-layout22 .fxt-countdown .countdown-section .countdown-unit { color: #d8d8d8; position: absolute; z-index: 1; bottom: -50px; left: 50%; transform: translateX(-50%); font-size: 22px; } @media only screen and (max-width: 991px) { .fxt-template-layout22 .fxt-countdown .countdown-section .countdown-unit { font-size: 20px; bottom: -45px; } } @media only screen and (max-width: 767px) { .fxt-template-layout22 .fxt-countdown .countdown-section .countdown-unit { font-size: 18px; bottom: -40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout22 .fxt-countdown .countdown-section .countdown-unit { font-size: 16px; bottom: -35px; } } @media only screen and (max-width: 575px) { .fxt-template-layout22 .fxt-countdown .countdown-section .countdown-unit { font-size: 15px; bottom: -30px; } } @media only screen and (min-width: 992px) { body.open-sidebar .fxt-template-layout22 .fxt-main-content { min-width: 50vw; max-width: 50vw; padding-top: 260px; padding-bottom: 300px; } body.open-sidebar .fxt-template-layout22 .fxt-main-content .fxt-logo { left: 50%; top: 125px; transform: translateX(-50%); margin: 0 auto; } body.open-sidebar .fxt-template-layout22 .fxt-main-content .fxt-socials { left: 50%; bottom: 200px; transform: translateX(-50%); margin: 0 auto; } body.open-sidebar .fxt-template-layout22 .fxt-main-content .fxt-footer { right: 50%; transform: translateX(50%); bottom: 100px; margin: 0 auto; } } /*======================================================================== 28. Demo Layout Twenty Three =========================================================================*/ .fxt-template-layout23 { display: flex; align-items: flex-start; } @media only screen and (max-width: 991px) { .fxt-template-layout23 { display: block; min-width: 100%; } } .fxt-template-layout23 #particles-js { position: absolute; width: 100vw; height: 100%; left: 0; top: 0; opacity: 0.3; } .fxt-template-layout23 .fxt-main-content { padding: 65px 0; background-position: center; background-size: cover; background-repeat: no-repeat; min-height: 100vh; min-width: 100vw; position: relative; z-index: 1; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; transition: all 0.8s ease-in-out; } @media only screen and (max-width: 991px) { .fxt-template-layout23 .fxt-main-content { min-width: 100%; padding: 55px 15px; } } @media only screen and (max-width: 767px) { .fxt-template-layout23 .fxt-main-content { padding: 45px 15px; } } @media only screen and (max-width: 575px) { .fxt-template-layout23 .fxt-main-content { padding: 35px 15px; } } .fxt-template-layout23 .fxt-main-content:before { content: ""; background-color: rgba(0, 0, 0, 0.6); position: absolute; height: 100%; width: 100%; top: 0; left: 0; z-index: -1; } .fxt-template-layout23 .fxt-main-content .fxt-logo { margin-top: 25px; margin-bottom: 14vh; max-width: 40vw; } .fxt-template-layout23 .fxt-main-content .fxt-sub-title { color: #fff; font-size: 30px; margin-bottom: 5px; } @media only screen and (max-width: 991px) { .fxt-template-layout23 .fxt-main-content .fxt-sub-title { font-size: 26px; } } @media only screen and (max-width: 767px) { .fxt-template-layout23 .fxt-main-content .fxt-sub-title { font-size: 24px; } } @media only screen and (max-width: 575px) { .fxt-template-layout23 .fxt-main-content .fxt-sub-title { font-size: 22px; } } @media only screen and (max-width: 479px) { .fxt-template-layout23 .fxt-main-content .fxt-sub-title { font-size: 20px; } } .fxt-template-layout23 .fxt-main-content .fxt-main-title { color: #fff; font-weight: 600; width: 90%; margin-left: auto; margin-right: auto; } @media only screen and (max-width: 767px) { .fxt-template-layout23 .fxt-main-content .fxt-main-title { width: 95%; } } @media only screen and (max-width: 575px) { .fxt-template-layout23 .fxt-main-content .fxt-main-title { width: 100%; } } .fxt-template-layout23 .fxt-main-content .fxt-paragraph { color: #d8d8d8; width: 70%; margin-left: auto; margin-right: auto; margin-bottom: 70px; } @media only screen and (max-width: 1199px) { .fxt-template-layout23 .fxt-main-content .fxt-paragraph { margin-bottom: 60px; } } @media only screen and (max-width: 991px) { .fxt-template-layout23 .fxt-main-content .fxt-paragraph { margin-bottom: 50px; } } @media only screen and (max-width: 767px) { .fxt-template-layout23 .fxt-main-content .fxt-paragraph { width: 80%; margin-bottom: 40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout23 .fxt-main-content .fxt-paragraph { width: 100%; margin-bottom: 30px; } } .fxt-template-layout23 .fxt-main-content .fxt-buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-bottom: 60px; } @media only screen and (max-width: 991px) { .fxt-template-layout23 .fxt-main-content .fxt-buttons { margin-bottom: 50px; } } @media only screen and (max-width: 767px) { .fxt-template-layout23 .fxt-main-content .fxt-buttons { margin-bottom: 40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout23 .fxt-main-content .fxt-buttons { margin-bottom: 30px; } } .fxt-template-layout23 .fxt-main-content .fxt-buttons .fxt-btn { margin: 0 7px 12px; } .fxt-template-layout23 .fxt-main-content .fxt-btn-ghost { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f1f1f1; color: #f1f1f1; border-radius: 45px; background-color: transparent; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout23 .fxt-main-content .fxt-btn-ghost { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout23 .fxt-main-content .fxt-btn-ghost { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout23 .fxt-main-content .fxt-btn-ghost:hover { background-color: #f11e47; border-color: #f11e47; } .fxt-template-layout23 .fxt-main-content .fxt-btn-ghost:focus { outline: none; } .fxt-template-layout23 .fxt-main-content .fxt-btn-fill { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f11e47; color: #f1f1f1; border-radius: 45px; background-color: #f11e47; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout23 .fxt-main-content .fxt-btn-fill { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout23 .fxt-main-content .fxt-btn-fill { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout23 .fxt-main-content .fxt-btn-fill:hover { background-color: transparent; border-color: #f1f1f1; } .fxt-template-layout23 .fxt-main-content .fxt-btn-fill:focus { outline: none; } .fxt-template-layout23 .fxt-main-content .fxt-socials { margin-bottom: 70px; } @media only screen and (max-width: 991px) { .fxt-template-layout23 .fxt-main-content .fxt-socials { margin-bottom: 60px; } } @media only screen and (max-width: 767px) { .fxt-template-layout23 .fxt-main-content .fxt-socials { margin-bottom: 50px; } } @media only screen and (max-width: 575px) { .fxt-template-layout23 .fxt-main-content .fxt-socials { margin-bottom: 40px; } } .fxt-template-layout23 .fxt-main-content .fxt-socials li { display: inline-block; margin-right: 15px; margin-bottom: 8px; } @media only screen and (max-width: 991px) { .fxt-template-layout23 .fxt-main-content .fxt-socials li { margin-right: 10px; margin-bottom: 5px; } } @media only screen and (max-width: 767px) { .fxt-template-layout23 .fxt-main-content .fxt-socials li { margin-right: 5px; } } .fxt-template-layout23 .fxt-main-content .fxt-socials li:last-child { margin-right: 0; } .fxt-template-layout23 .fxt-main-content .fxt-socials li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 16px; height: 45px; width: 45px; color: #ffffff; background-color: #1f1f1f; border-radius: 50%; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout23 .fxt-main-content .fxt-socials li a { font-size: 15px; height: 40px; width: 40px; } } .fxt-template-layout23 .fxt-main-content .fxt-socials li.fxt-facebook a:hover { background-color: #3b5998; } .fxt-template-layout23 .fxt-main-content .fxt-socials li.fxt-twitter a:hover { background-color: #00acee; } .fxt-template-layout23 .fxt-main-content .fxt-socials li.fxt-google a:hover { background-color: #CC3333; } .fxt-template-layout23 .fxt-main-content .fxt-socials li.fxt-instagram a:hover { background-color: #3f729b; } .fxt-template-layout23 .fxt-main-content .fxt-socials li.fxt-linkedin a:hover { background-color: #0077B5; } .fxt-template-layout23 .fxt-main-content .fxt-socials li.fxt-youtube a:hover { background-color: #c4302b; } .fxt-template-layout23 .fxt-main-content .fxt-socials li.fxt-pinterest a:hover { background-color: #bd081c; } .fxt-template-layout23 .fxt-main-content .fxt-footer p { color: #e3e3e3; font-size: 15px; } @media only screen and (min-width: 992px) { body.open-sidebar .fxt-template-layout23 .fxt-main-content { min-width: 50vw; max-width: 50vw; } } /*======================================================================== 29. Demo Layout Twenty Four =========================================================================*/ .fxt-template-layout24 { display: flex; align-items: flex-start; } @media only screen and (max-width: 991px) { .fxt-template-layout24 { display: block; min-width: 100%; } } .fxt-template-layout24 #particles-js { position: absolute; width: 100vw; height: 100%; left: 0; top: 0; opacity: 0.5; } .fxt-template-layout24 .fxt-main-content { padding: 65px 0; background-position: center; background-size: cover; background-repeat: no-repeat; min-height: 100vh; min-width: 100vw; position: relative; z-index: 1; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; transition: all 0.8s ease-in-out; } @media only screen and (max-width: 991px) { .fxt-template-layout24 .fxt-main-content { min-width: 100%; padding: 55px 15px; } } @media only screen and (max-width: 767px) { .fxt-template-layout24 .fxt-main-content { padding: 45px 15px; } } @media only screen and (max-width: 575px) { .fxt-template-layout24 .fxt-main-content { padding: 35px 15px; } } .fxt-template-layout24 .fxt-main-content:before { content: ""; background-color: rgba(0, 0, 0, 0.6); position: absolute; height: 100%; width: 100%; top: 0; left: 0; z-index: -1; } .fxt-template-layout24 .fxt-main-content .fxt-logo { margin-top: 25px; margin-bottom: 14vh; max-width: 40vw; } .fxt-template-layout24 .fxt-main-content .fxt-sub-title { color: #fff; font-size: 46px; font-family: 'Raleway', sans-serif; letter-spacing: 8px; margin-bottom: 25px; line-height: 1.4; margin-left: 8px; } @media only screen and (max-width: 1199px) { .fxt-template-layout24 .fxt-main-content .fxt-sub-title { font-size: 40px; } } @media only screen and (max-width: 991px) { .fxt-template-layout24 .fxt-main-content .fxt-sub-title { font-size: 36px; letter-spacing: 6px; line-height: 1.6; margin-left: 6px; margin-bottom: 20px; } } @media only screen and (max-width: 767px) { .fxt-template-layout24 .fxt-main-content .fxt-sub-title { font-size: 32px; letter-spacing: 4px; line-height: 1.5; margin-left: 4px; margin-bottom: 15px; } } @media only screen and (max-width: 575px) { .fxt-template-layout24 .fxt-main-content .fxt-sub-title { font-size: 28px; letter-spacing: 2px; line-height: 1.4; margin-left: 2px; } } @media only screen and (max-width: 479px) { .fxt-template-layout24 .fxt-main-content .fxt-sub-title { font-size: 26px; line-height: 1.3; } } .fxt-template-layout24 .fxt-main-content .fxt-buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-bottom: 60px; } @media only screen and (max-width: 991px) { .fxt-template-layout24 .fxt-main-content .fxt-buttons { margin-bottom: 50px; } } @media only screen and (max-width: 767px) { .fxt-template-layout24 .fxt-main-content .fxt-buttons { margin-bottom: 40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout24 .fxt-main-content .fxt-buttons { margin-bottom: 30px; } } .fxt-template-layout24 .fxt-main-content .fxt-buttons .fxt-btn { margin: 0 7px 12px; } .fxt-template-layout24 .fxt-main-content .fxt-btn-ghost { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f1f1f1; color: #f1f1f1; border-radius: 45px; background-color: transparent; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout24 .fxt-main-content .fxt-btn-ghost { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout24 .fxt-main-content .fxt-btn-ghost { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout24 .fxt-main-content .fxt-btn-ghost:hover { background-color: #f11e47; border-color: #f11e47; } .fxt-template-layout24 .fxt-main-content .fxt-btn-ghost:focus { outline: none; } .fxt-template-layout24 .fxt-main-content .fxt-btn-fill { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f11e47; color: #f1f1f1; border-radius: 45px; background-color: #f11e47; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout24 .fxt-main-content .fxt-btn-fill { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout24 .fxt-main-content .fxt-btn-fill { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout24 .fxt-main-content .fxt-btn-fill:hover { background-color: transparent; border-color: #f1f1f1; } .fxt-template-layout24 .fxt-main-content .fxt-btn-fill:focus { outline: none; } .fxt-template-layout24 .fxt-main-content .fxt-socials { margin-bottom: 70px; } @media only screen and (max-width: 991px) { .fxt-template-layout24 .fxt-main-content .fxt-socials { margin-bottom: 60px; } } @media only screen and (max-width: 767px) { .fxt-template-layout24 .fxt-main-content .fxt-socials { margin-bottom: 50px; } } @media only screen and (max-width: 575px) { .fxt-template-layout24 .fxt-main-content .fxt-socials { margin-bottom: 40px; } } .fxt-template-layout24 .fxt-main-content .fxt-socials li { display: inline-block; margin-right: 15px; margin-bottom: 8px; } @media only screen and (max-width: 991px) { .fxt-template-layout24 .fxt-main-content .fxt-socials li { margin-right: 10px; margin-bottom: 5px; } } @media only screen and (max-width: 767px) { .fxt-template-layout24 .fxt-main-content .fxt-socials li { margin-right: 5px; } } .fxt-template-layout24 .fxt-main-content .fxt-socials li:last-child { margin-right: 0; } .fxt-template-layout24 .fxt-main-content .fxt-socials li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 16px; height: 45px; width: 45px; color: #ffffff; background-color: #1f1f1f; border-radius: 50%; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout24 .fxt-main-content .fxt-socials li a { font-size: 15px; height: 40px; width: 40px; } } .fxt-template-layout24 .fxt-main-content .fxt-socials li.fxt-facebook a:hover { background-color: #3b5998; } .fxt-template-layout24 .fxt-main-content .fxt-socials li.fxt-twitter a:hover { background-color: #00acee; } .fxt-template-layout24 .fxt-main-content .fxt-socials li.fxt-google a:hover { background-color: #CC3333; } .fxt-template-layout24 .fxt-main-content .fxt-socials li.fxt-instagram a:hover { background-color: #3f729b; } .fxt-template-layout24 .fxt-main-content .fxt-socials li.fxt-linkedin a:hover { background-color: #0077B5; } .fxt-template-layout24 .fxt-main-content .fxt-socials li.fxt-youtube a:hover { background-color: #c4302b; } .fxt-template-layout24 .fxt-main-content .fxt-socials li.fxt-pinterest a:hover { background-color: #bd081c; } .fxt-template-layout24 .fxt-main-content .fxt-footer p { color: #e3e3e3; font-size: 15px; } .fxt-template-layout24 .fxt-countdown { margin-bottom: 70px; padding-bottom: 50px; } @media only screen and (max-width: 1439px) { .fxt-template-layout24 .fxt-countdown { margin-bottom: 60px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout24 .fxt-countdown { margin-bottom: 50px; } } @media only screen and (max-width: 991px) { .fxt-template-layout24 .fxt-countdown { margin-bottom: 40px; } } @media only screen and (max-width: 767px) { .fxt-template-layout24 .fxt-countdown { margin-bottom: 30px; } } @media only screen and (max-width: 575px) { .fxt-template-layout24 .fxt-countdown { margin-bottom: 20px; } } .fxt-template-layout24 .fxt-countdown .countdown-section { display: inline-block; min-width: 70px; margin-right: 35px; padding-right: 35px; position: relative; z-index: 1; } @media only screen and (max-width: 1855px) { .fxt-template-layout24 .fxt-countdown .countdown-section { margin-right: 30px; padding-right: 30px; } } @media only screen and (max-width: 1439px) { .fxt-template-layout24 .fxt-countdown .countdown-section { margin-right: 25px; padding-right: 25px; min-width: 65px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout24 .fxt-countdown .countdown-section { margin-right: 20px; padding-right: 20px; min-width: 60px; } } @media only screen and (max-width: 575px) { .fxt-template-layout24 .fxt-countdown .countdown-section { min-width: 55px; margin-right: 15px; padding-right: 15px; } } @media only screen and (max-width: 479px) { .fxt-template-layout24 .fxt-countdown .countdown-section { min-width: 45px; margin-right: 10px; padding-right: 10px; } } .fxt-template-layout24 .fxt-countdown .countdown-section > div { position: relative; z-index: 1; } .fxt-template-layout24 .fxt-countdown .countdown-section:before { content: ""; height: 10px; width: 10px; border-radius: 50%; background-color: #ffffff; position: absolute; z-index: 1; top: 16px; right: -5px; } @media only screen and (max-width: 1855px) { .fxt-template-layout24 .fxt-countdown .countdown-section:before { top: 15px; } } @media only screen and (max-width: 1439px) { .fxt-template-layout24 .fxt-countdown .countdown-section:before { top: 13px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout24 .fxt-countdown .countdown-section:before { top: 11px; height: 8px; width: 8px; } } @media only screen and (max-width: 575px) { .fxt-template-layout24 .fxt-countdown .countdown-section:before { top: 10px; height: 5px; width: 5px; } } @media only screen and (max-width: 479px) { .fxt-template-layout24 .fxt-countdown .countdown-section:before { top: 8px; right: -3px; } } .fxt-template-layout24 .fxt-countdown .countdown-section:after { content: ""; height: 10px; width: 10px; border-radius: 50%; background-color: #ffffff; position: absolute; z-index: 1; top: 38px; right: -5px; } @media only screen and (max-width: 1855px) { .fxt-template-layout24 .fxt-countdown .countdown-section:after { top: 43px; } } @media only screen and (max-width: 1439px) { .fxt-template-layout24 .fxt-countdown .countdown-section:after { top: 38px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout24 .fxt-countdown .countdown-section:after { top: 32px; height: 8px; width: 8px; } } @media only screen and (max-width: 575px) { .fxt-template-layout24 .fxt-countdown .countdown-section:after { top: 28px; height: 5px; width: 5px; } } @media only screen and (max-width: 479px) { .fxt-template-layout24 .fxt-countdown .countdown-section:after { top: 23px; right: -3px; } } .fxt-template-layout24 .fxt-countdown .countdown-section:last-child { margin-right: 0; padding-right: 0; } .fxt-template-layout24 .fxt-countdown .countdown-section:last-child:after, .fxt-template-layout24 .fxt-countdown .countdown-section:last-child:before { display: none; } .fxt-template-layout24 .fxt-countdown .countdown-section .countdown-number { font-size: 60px; line-height: 1; font-weight: 600; color: #ffffff; } @media only screen and (max-width: 1439px) { .fxt-template-layout24 .fxt-countdown .countdown-section .countdown-number { font-size: 56px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout24 .fxt-countdown .countdown-section .countdown-number { font-size: 48px; } } @media only screen and (max-width: 575px) { .fxt-template-layout24 .fxt-countdown .countdown-section .countdown-number { font-size: 42px; } } @media only screen and (max-width: 479px) { .fxt-template-layout24 .fxt-countdown .countdown-section .countdown-number { font-size: 36px; } } .fxt-template-layout24 .fxt-countdown .countdown-section .countdown-unit { color: #d8d8d8; position: absolute; z-index: 1; bottom: -50px; left: 50%; transform: translateX(-50%); font-size: 22px; } @media only screen and (max-width: 991px) { .fxt-template-layout24 .fxt-countdown .countdown-section .countdown-unit { font-size: 20px; bottom: -45px; } } @media only screen and (max-width: 767px) { .fxt-template-layout24 .fxt-countdown .countdown-section .countdown-unit { font-size: 18px; bottom: -40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout24 .fxt-countdown .countdown-section .countdown-unit { font-size: 16px; bottom: -35px; } } @media only screen and (max-width: 575px) { .fxt-template-layout24 .fxt-countdown .countdown-section .countdown-unit { font-size: 15px; bottom: -30px; } } @media only screen and (min-width: 992px) { body.open-sidebar .fxt-template-layout24 .fxt-main-content { min-width: 50vw; max-width: 50vw; } } /*======================================================================== 30. Demo Layout Twenty Five =========================================================================*/ .fxt-template-layout25 { display: flex; align-items: flex-start; } @media only screen and (max-width: 991px) { .fxt-template-layout25 { display: block; min-width: 100%; } } .fxt-template-layout25 canvas#canvas { width: 100vw; position: absolute; top: 0; left: 0; transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; -webkit-perspective: 1000; background: #000000; } .fxt-template-layout25 .fxt-main-content { padding: 65px 0; background-color: #000; min-height: 100vh; min-width: 100vw; position: relative; z-index: 1; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; transition: all 0.8s ease-in-out; } @media only screen and (max-width: 991px) { .fxt-template-layout25 .fxt-main-content { min-width: 100%; padding: 55px 15px; } } @media only screen and (max-width: 767px) { .fxt-template-layout25 .fxt-main-content { padding: 45px 15px; } } @media only screen and (max-width: 575px) { .fxt-template-layout25 .fxt-main-content { padding: 35px 15px; } } .fxt-template-layout25 .fxt-main-content:before { content: ""; background-color: rgba(0, 0, 0, 0.6); position: absolute; height: 100%; width: 100%; top: 0; left: 0; z-index: -1; } .fxt-template-layout25 .fxt-main-content .fxt-logo { margin-top: 25px; margin-bottom: 14vh; max-width: 40vw; } .fxt-template-layout25 .fxt-main-content .fxt-sub-title { color: #fff; font-size: 30px; margin-bottom: 5px; } @media only screen and (max-width: 991px) { .fxt-template-layout25 .fxt-main-content .fxt-sub-title { font-size: 26px; } } @media only screen and (max-width: 767px) { .fxt-template-layout25 .fxt-main-content .fxt-sub-title { font-size: 24px; } } @media only screen and (max-width: 575px) { .fxt-template-layout25 .fxt-main-content .fxt-sub-title { font-size: 22px; } } @media only screen and (max-width: 479px) { .fxt-template-layout25 .fxt-main-content .fxt-sub-title { font-size: 20px; } } .fxt-template-layout25 .fxt-main-content .fxt-main-title { color: #fff; font-weight: 600; width: 90%; margin-left: auto; margin-right: auto; } @media only screen and (max-width: 767px) { .fxt-template-layout25 .fxt-main-content .fxt-main-title { width: 95%; } } @media only screen and (max-width: 575px) { .fxt-template-layout25 .fxt-main-content .fxt-main-title { width: 100%; } } .fxt-template-layout25 .fxt-main-content .fxt-paragraph { color: #d8d8d8; width: 70%; margin-left: auto; margin-right: auto; margin-bottom: 70px; } @media only screen and (max-width: 1199px) { .fxt-template-layout25 .fxt-main-content .fxt-paragraph { margin-bottom: 60px; } } @media only screen and (max-width: 991px) { .fxt-template-layout25 .fxt-main-content .fxt-paragraph { margin-bottom: 50px; } } @media only screen and (max-width: 767px) { .fxt-template-layout25 .fxt-main-content .fxt-paragraph { width: 80%; margin-bottom: 40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout25 .fxt-main-content .fxt-paragraph { width: 100%; margin-bottom: 30px; } } .fxt-template-layout25 .fxt-main-content .fxt-buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-bottom: 60px; } @media only screen and (max-width: 991px) { .fxt-template-layout25 .fxt-main-content .fxt-buttons { margin-bottom: 50px; } } @media only screen and (max-width: 767px) { .fxt-template-layout25 .fxt-main-content .fxt-buttons { margin-bottom: 40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout25 .fxt-main-content .fxt-buttons { margin-bottom: 30px; } } .fxt-template-layout25 .fxt-main-content .fxt-buttons .fxt-btn { margin: 0 7px 12px; } .fxt-template-layout25 .fxt-main-content .fxt-btn-ghost { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f1f1f1; color: #f1f1f1; border-radius: 45px; background-color: transparent; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout25 .fxt-main-content .fxt-btn-ghost { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout25 .fxt-main-content .fxt-btn-ghost { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout25 .fxt-main-content .fxt-btn-ghost:hover { background-color: #f11e47; border-color: #f11e47; } .fxt-template-layout25 .fxt-main-content .fxt-btn-ghost:focus { outline: none; } .fxt-template-layout25 .fxt-main-content .fxt-btn-fill { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f11e47; color: #f1f1f1; border-radius: 45px; background-color: #f11e47; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout25 .fxt-main-content .fxt-btn-fill { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout25 .fxt-main-content .fxt-btn-fill { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout25 .fxt-main-content .fxt-btn-fill:hover { background-color: transparent; border-color: #f1f1f1; } .fxt-template-layout25 .fxt-main-content .fxt-btn-fill:focus { outline: none; } .fxt-template-layout25 .fxt-main-content .fxt-socials { margin-bottom: 70px; } @media only screen and (max-width: 991px) { .fxt-template-layout25 .fxt-main-content .fxt-socials { margin-bottom: 60px; } } @media only screen and (max-width: 767px) { .fxt-template-layout25 .fxt-main-content .fxt-socials { margin-bottom: 50px; } } @media only screen and (max-width: 575px) { .fxt-template-layout25 .fxt-main-content .fxt-socials { margin-bottom: 40px; } } .fxt-template-layout25 .fxt-main-content .fxt-socials li { display: inline-block; margin-right: 15px; margin-bottom: 8px; } @media only screen and (max-width: 991px) { .fxt-template-layout25 .fxt-main-content .fxt-socials li { margin-right: 10px; margin-bottom: 5px; } } @media only screen and (max-width: 767px) { .fxt-template-layout25 .fxt-main-content .fxt-socials li { margin-right: 5px; } } .fxt-template-layout25 .fxt-main-content .fxt-socials li:last-child { margin-right: 0; } .fxt-template-layout25 .fxt-main-content .fxt-socials li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 16px; height: 45px; width: 45px; color: #ffffff; background-color: #1f1f1f; border-radius: 50%; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout25 .fxt-main-content .fxt-socials li a { font-size: 15px; height: 40px; width: 40px; } } .fxt-template-layout25 .fxt-main-content .fxt-socials li.fxt-facebook a:hover { background-color: #3b5998; } .fxt-template-layout25 .fxt-main-content .fxt-socials li.fxt-twitter a:hover { background-color: #00acee; } .fxt-template-layout25 .fxt-main-content .fxt-socials li.fxt-google a:hover { background-color: #CC3333; } .fxt-template-layout25 .fxt-main-content .fxt-socials li.fxt-instagram a:hover { background-color: #3f729b; } .fxt-template-layout25 .fxt-main-content .fxt-socials li.fxt-linkedin a:hover { background-color: #0077B5; } .fxt-template-layout25 .fxt-main-content .fxt-socials li.fxt-youtube a:hover { background-color: #c4302b; } .fxt-template-layout25 .fxt-main-content .fxt-socials li.fxt-pinterest a:hover { background-color: #bd081c; } .fxt-template-layout25 .fxt-main-content .fxt-footer p { color: #e3e3e3; font-size: 15px; } @media only screen and (min-width: 992px) { body.open-sidebar .fxt-template-layout25 .fxt-main-content { min-width: 50vw; max-width: 50vw; } } /*======================================================================== 31. Demo Layout Twenty Six =========================================================================*/ .fxt-template-layout26 { display: flex; align-items: flex-start; } @media only screen and (max-width: 991px) { .fxt-template-layout26 { display: block; min-width: 100%; } } .fxt-template-layout26 canvas#canvas { width: 100vw; position: absolute; top: 0; left: 0; transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; -webkit-perspective: 1000; background: #000000; } .fxt-template-layout26 .fxt-main-content { padding: 65px 0; background-color: #000; min-height: 100vh; min-width: 100vw; position: relative; z-index: 1; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; transition: all 0.8s ease-in-out; } @media only screen and (max-width: 991px) { .fxt-template-layout26 .fxt-main-content { min-width: 100%; padding: 55px 15px; } } @media only screen and (max-width: 767px) { .fxt-template-layout26 .fxt-main-content { padding: 45px 15px; } } @media only screen and (max-width: 575px) { .fxt-template-layout26 .fxt-main-content { padding: 35px 15px; } } .fxt-template-layout26 .fxt-main-content:before { content: ""; background-color: rgba(0, 0, 0, 0.6); position: absolute; height: 100%; width: 100%; top: 0; left: 0; z-index: -1; } .fxt-template-layout26 .fxt-main-content .fxt-logo { margin-top: 25px; margin-bottom: 14vh; max-width: 40vw; } .fxt-template-layout26 .fxt-main-content .fxt-sub-title { color: #fff; font-size: 46px; font-family: 'Raleway', sans-serif; letter-spacing: 8px; margin-bottom: 25px; line-height: 1.4; margin-left: 8px; } @media only screen and (max-width: 1199px) { .fxt-template-layout26 .fxt-main-content .fxt-sub-title { font-size: 40px; } } @media only screen and (max-width: 991px) { .fxt-template-layout26 .fxt-main-content .fxt-sub-title { font-size: 36px; letter-spacing: 6px; line-height: 1.6; margin-left: 6px; margin-bottom: 20px; } } @media only screen and (max-width: 767px) { .fxt-template-layout26 .fxt-main-content .fxt-sub-title { font-size: 32px; letter-spacing: 4px; line-height: 1.5; margin-left: 4px; margin-bottom: 15px; } } @media only screen and (max-width: 575px) { .fxt-template-layout26 .fxt-main-content .fxt-sub-title { font-size: 28px; letter-spacing: 2px; line-height: 1.4; margin-left: 2px; } } @media only screen and (max-width: 479px) { .fxt-template-layout26 .fxt-main-content .fxt-sub-title { font-size: 26px; line-height: 1.3; } } .fxt-template-layout26 .fxt-main-content .fxt-buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-bottom: 60px; } @media only screen and (max-width: 991px) { .fxt-template-layout26 .fxt-main-content .fxt-buttons { margin-bottom: 50px; } } @media only screen and (max-width: 767px) { .fxt-template-layout26 .fxt-main-content .fxt-buttons { margin-bottom: 40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout26 .fxt-main-content .fxt-buttons { margin-bottom: 30px; } } .fxt-template-layout26 .fxt-main-content .fxt-buttons .fxt-btn { margin: 0 7px 12px; } .fxt-template-layout26 .fxt-main-content .fxt-btn-ghost { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f1f1f1; color: #f1f1f1; border-radius: 45px; background-color: transparent; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout26 .fxt-main-content .fxt-btn-ghost { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout26 .fxt-main-content .fxt-btn-ghost { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout26 .fxt-main-content .fxt-btn-ghost:hover { background-color: #f11e47; border-color: #f11e47; } .fxt-template-layout26 .fxt-main-content .fxt-btn-ghost:focus { outline: none; } .fxt-template-layout26 .fxt-main-content .fxt-btn-fill { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f11e47; color: #f1f1f1; border-radius: 45px; background-color: #f11e47; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout26 .fxt-main-content .fxt-btn-fill { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout26 .fxt-main-content .fxt-btn-fill { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout26 .fxt-main-content .fxt-btn-fill:hover { background-color: transparent; border-color: #f1f1f1; } .fxt-template-layout26 .fxt-main-content .fxt-btn-fill:focus { outline: none; } .fxt-template-layout26 .fxt-main-content .fxt-socials { margin-bottom: 70px; } @media only screen and (max-width: 991px) { .fxt-template-layout26 .fxt-main-content .fxt-socials { margin-bottom: 60px; } } @media only screen and (max-width: 767px) { .fxt-template-layout26 .fxt-main-content .fxt-socials { margin-bottom: 50px; } } @media only screen and (max-width: 575px) { .fxt-template-layout26 .fxt-main-content .fxt-socials { margin-bottom: 40px; } } .fxt-template-layout26 .fxt-main-content .fxt-socials li { display: inline-block; margin-right: 15px; margin-bottom: 8px; } @media only screen and (max-width: 991px) { .fxt-template-layout26 .fxt-main-content .fxt-socials li { margin-right: 10px; margin-bottom: 5px; } } @media only screen and (max-width: 767px) { .fxt-template-layout26 .fxt-main-content .fxt-socials li { margin-right: 5px; } } .fxt-template-layout26 .fxt-main-content .fxt-socials li:last-child { margin-right: 0; } .fxt-template-layout26 .fxt-main-content .fxt-socials li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 16px; height: 45px; width: 45px; color: #ffffff; background-color: #1f1f1f; border-radius: 50%; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout26 .fxt-main-content .fxt-socials li a { font-size: 15px; height: 40px; width: 40px; } } .fxt-template-layout26 .fxt-main-content .fxt-socials li.fxt-facebook a:hover { background-color: #3b5998; } .fxt-template-layout26 .fxt-main-content .fxt-socials li.fxt-twitter a:hover { background-color: #00acee; } .fxt-template-layout26 .fxt-main-content .fxt-socials li.fxt-google a:hover { background-color: #CC3333; } .fxt-template-layout26 .fxt-main-content .fxt-socials li.fxt-instagram a:hover { background-color: #3f729b; } .fxt-template-layout26 .fxt-main-content .fxt-socials li.fxt-linkedin a:hover { background-color: #0077B5; } .fxt-template-layout26 .fxt-main-content .fxt-socials li.fxt-youtube a:hover { background-color: #c4302b; } .fxt-template-layout26 .fxt-main-content .fxt-socials li.fxt-pinterest a:hover { background-color: #bd081c; } .fxt-template-layout26 .fxt-main-content .fxt-footer p { color: #e3e3e3; font-size: 15px; } .fxt-template-layout26 .fxt-countdown { margin-bottom: 70px; padding-bottom: 50px; } @media only screen and (max-width: 1439px) { .fxt-template-layout26 .fxt-countdown { margin-bottom: 60px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout26 .fxt-countdown { margin-bottom: 50px; } } @media only screen and (max-width: 991px) { .fxt-template-layout26 .fxt-countdown { margin-bottom: 40px; } } @media only screen and (max-width: 767px) { .fxt-template-layout26 .fxt-countdown { margin-bottom: 30px; } } @media only screen and (max-width: 575px) { .fxt-template-layout26 .fxt-countdown { margin-bottom: 20px; } } .fxt-template-layout26 .fxt-countdown .countdown-section { display: inline-block; min-width: 70px; margin-right: 35px; padding-right: 35px; position: relative; z-index: 1; } @media only screen and (max-width: 1855px) { .fxt-template-layout26 .fxt-countdown .countdown-section { margin-right: 30px; padding-right: 30px; } } @media only screen and (max-width: 1439px) { .fxt-template-layout26 .fxt-countdown .countdown-section { margin-right: 25px; padding-right: 25px; min-width: 65px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout26 .fxt-countdown .countdown-section { margin-right: 20px; padding-right: 20px; min-width: 60px; } } @media only screen and (max-width: 575px) { .fxt-template-layout26 .fxt-countdown .countdown-section { min-width: 55px; margin-right: 15px; padding-right: 15px; } } @media only screen and (max-width: 479px) { .fxt-template-layout26 .fxt-countdown .countdown-section { min-width: 45px; margin-right: 10px; padding-right: 10px; } } .fxt-template-layout26 .fxt-countdown .countdown-section > div { position: relative; z-index: 1; } .fxt-template-layout26 .fxt-countdown .countdown-section:before { content: ""; height: 10px; width: 10px; border-radius: 50%; background-color: #ffffff; position: absolute; z-index: 1; top: 16px; right: -5px; } @media only screen and (max-width: 1855px) { .fxt-template-layout26 .fxt-countdown .countdown-section:before { top: 15px; } } @media only screen and (max-width: 1439px) { .fxt-template-layout26 .fxt-countdown .countdown-section:before { top: 13px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout26 .fxt-countdown .countdown-section:before { top: 11px; height: 8px; width: 8px; } } @media only screen and (max-width: 575px) { .fxt-template-layout26 .fxt-countdown .countdown-section:before { top: 10px; height: 5px; width: 5px; } } @media only screen and (max-width: 479px) { .fxt-template-layout26 .fxt-countdown .countdown-section:before { top: 8px; right: -3px; } } .fxt-template-layout26 .fxt-countdown .countdown-section:after { content: ""; height: 10px; width: 10px; border-radius: 50%; background-color: #ffffff; position: absolute; z-index: 1; top: 38px; right: -5px; } @media only screen and (max-width: 1855px) { .fxt-template-layout26 .fxt-countdown .countdown-section:after { top: 43px; } } @media only screen and (max-width: 1439px) { .fxt-template-layout26 .fxt-countdown .countdown-section:after { top: 38px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout26 .fxt-countdown .countdown-section:after { top: 32px; height: 8px; width: 8px; } } @media only screen and (max-width: 575px) { .fxt-template-layout26 .fxt-countdown .countdown-section:after { top: 28px; height: 5px; width: 5px; } } @media only screen and (max-width: 479px) { .fxt-template-layout26 .fxt-countdown .countdown-section:after { top: 23px; right: -3px; } } .fxt-template-layout26 .fxt-countdown .countdown-section:last-child { margin-right: 0; padding-right: 0; } .fxt-template-layout26 .fxt-countdown .countdown-section:last-child:after, .fxt-template-layout26 .fxt-countdown .countdown-section:last-child:before { display: none; } .fxt-template-layout26 .fxt-countdown .countdown-section .countdown-number { font-size: 60px; line-height: 1; font-weight: 600; color: #ffffff; } @media only screen and (max-width: 1439px) { .fxt-template-layout26 .fxt-countdown .countdown-section .countdown-number { font-size: 56px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout26 .fxt-countdown .countdown-section .countdown-number { font-size: 48px; } } @media only screen and (max-width: 575px) { .fxt-template-layout26 .fxt-countdown .countdown-section .countdown-number { font-size: 42px; } } @media only screen and (max-width: 479px) { .fxt-template-layout26 .fxt-countdown .countdown-section .countdown-number { font-size: 36px; } } .fxt-template-layout26 .fxt-countdown .countdown-section .countdown-unit { color: #d8d8d8; position: absolute; z-index: 1; bottom: -50px; left: 50%; transform: translateX(-50%); font-size: 22px; } @media only screen and (max-width: 991px) { .fxt-template-layout26 .fxt-countdown .countdown-section .countdown-unit { font-size: 20px; bottom: -45px; } } @media only screen and (max-width: 767px) { .fxt-template-layout26 .fxt-countdown .countdown-section .countdown-unit { font-size: 18px; bottom: -40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout26 .fxt-countdown .countdown-section .countdown-unit { font-size: 16px; bottom: -35px; } } @media only screen and (max-width: 575px) { .fxt-template-layout26 .fxt-countdown .countdown-section .countdown-unit { font-size: 15px; bottom: -30px; } } @media only screen and (min-width: 992px) { body.open-sidebar .fxt-template-layout26 .fxt-main-content { min-width: 50vw; max-width: 50vw; } } /*======================================================================== 32. Demo Layout Twenty Seven =========================================================================*/ .fxt-template-layout27 { display: flex; align-items: flex-start; } @media only screen and (max-width: 991px) { .fxt-template-layout27 { display: block; min-width: 100%; } } .fxt-template-layout27 .fxt-main-content { padding: 65px 0; background-color: #fff; min-height: 100vh; min-width: 100vw; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; transition: all 0.8s ease-in-out; } @media only screen and (max-width: 991px) { .fxt-template-layout27 .fxt-main-content { min-width: 100%; padding: 55px 15px; } } @media only screen and (max-width: 767px) { .fxt-template-layout27 .fxt-main-content { padding: 45px 15px; } } @media only screen and (max-width: 575px) { .fxt-template-layout27 .fxt-main-content { padding: 35px 15px; } } .fxt-template-layout27 .fxt-main-content .fxt-logo { margin-top: 25px; margin-bottom: 14vh; max-width: 40vw; } .fxt-template-layout27 .fxt-main-content .fxt-sub-title { color: #f11e47; font-size: 30px; margin-bottom: 5px; } @media only screen and (max-width: 991px) { .fxt-template-layout27 .fxt-main-content .fxt-sub-title { font-size: 26px; } } @media only screen and (max-width: 767px) { .fxt-template-layout27 .fxt-main-content .fxt-sub-title { font-size: 24px; } } @media only screen and (max-width: 575px) { .fxt-template-layout27 .fxt-main-content .fxt-sub-title { font-size: 22px; } } @media only screen and (max-width: 479px) { .fxt-template-layout27 .fxt-main-content .fxt-sub-title { font-size: 20px; } } .fxt-template-layout27 .fxt-main-content .fxt-main-title { color: #232323; font-weight: 600; width: 90%; margin-left: auto; margin-right: auto; } @media only screen and (max-width: 767px) { .fxt-template-layout27 .fxt-main-content .fxt-main-title { width: 95%; } } @media only screen and (max-width: 575px) { .fxt-template-layout27 .fxt-main-content .fxt-main-title { width: 100%; } } .fxt-template-layout27 .fxt-main-content .fxt-paragraph { color: #232323; width: 70%; margin-left: auto; margin-right: auto; margin-bottom: 70px; } @media only screen and (max-width: 1199px) { .fxt-template-layout27 .fxt-main-content .fxt-paragraph { margin-bottom: 60px; } } @media only screen and (max-width: 991px) { .fxt-template-layout27 .fxt-main-content .fxt-paragraph { margin-bottom: 50px; } } @media only screen and (max-width: 767px) { .fxt-template-layout27 .fxt-main-content .fxt-paragraph { width: 80%; margin-bottom: 40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout27 .fxt-main-content .fxt-paragraph { width: 100%; margin-bottom: 30px; } } .fxt-template-layout27 .fxt-main-content .fxt-buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-bottom: 60px; } @media only screen and (max-width: 991px) { .fxt-template-layout27 .fxt-main-content .fxt-buttons { margin-bottom: 50px; } } @media only screen and (max-width: 767px) { .fxt-template-layout27 .fxt-main-content .fxt-buttons { margin-bottom: 40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout27 .fxt-main-content .fxt-buttons { margin-bottom: 30px; } } .fxt-template-layout27 .fxt-main-content .fxt-buttons .fxt-btn { margin: 0 7px 12px; } .fxt-template-layout27 .fxt-main-content .fxt-btn-ghost { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #e1e1e1; color: #232323; border-radius: 45px; background-color: transparent; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout27 .fxt-main-content .fxt-btn-ghost { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout27 .fxt-main-content .fxt-btn-ghost { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout27 .fxt-main-content .fxt-btn-ghost:hover { background-color: #f11e47; border-color: #f11e47; color: #f1f1f1; } .fxt-template-layout27 .fxt-main-content .fxt-btn-ghost:focus { outline: none; } .fxt-template-layout27 .fxt-main-content .fxt-btn-fill { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f11e47; color: #f1f1f1; border-radius: 45px; background-color: #f11e47; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout27 .fxt-main-content .fxt-btn-fill { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout27 .fxt-main-content .fxt-btn-fill { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout27 .fxt-main-content .fxt-btn-fill:hover { background-color: transparent; border-color: #e1e1e1; color: #232323; } .fxt-template-layout27 .fxt-main-content .fxt-btn-fill:focus { outline: none; } .fxt-template-layout27 .fxt-main-content .fxt-socials { margin-bottom: 70px; } @media only screen and (max-width: 991px) { .fxt-template-layout27 .fxt-main-content .fxt-socials { margin-bottom: 60px; } } @media only screen and (max-width: 767px) { .fxt-template-layout27 .fxt-main-content .fxt-socials { margin-bottom: 50px; } } @media only screen and (max-width: 575px) { .fxt-template-layout27 .fxt-main-content .fxt-socials { margin-bottom: 40px; } } .fxt-template-layout27 .fxt-main-content .fxt-socials li { display: inline-block; margin-right: 15px; margin-bottom: 8px; } @media only screen and (max-width: 991px) { .fxt-template-layout27 .fxt-main-content .fxt-socials li { margin-right: 10px; margin-bottom: 5px; } } @media only screen and (max-width: 767px) { .fxt-template-layout27 .fxt-main-content .fxt-socials li { margin-right: 5px; } } .fxt-template-layout27 .fxt-main-content .fxt-socials li:last-child { margin-right: 0; } .fxt-template-layout27 .fxt-main-content .fxt-socials li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 16px; height: 45px; width: 45px; color: #232323; background-color: #eeeeee; border-radius: 50%; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout27 .fxt-main-content .fxt-socials li a { font-size: 15px; height: 40px; width: 40px; } } .fxt-template-layout27 .fxt-main-content .fxt-socials li a:hover { color: #fff; } .fxt-template-layout27 .fxt-main-content .fxt-socials li.fxt-facebook a:hover { background-color: #3b5998; } .fxt-template-layout27 .fxt-main-content .fxt-socials li.fxt-twitter a:hover { background-color: #00acee; } .fxt-template-layout27 .fxt-main-content .fxt-socials li.fxt-google a:hover { background-color: #CC3333; } .fxt-template-layout27 .fxt-main-content .fxt-socials li.fxt-instagram a:hover { background-color: #3f729b; } .fxt-template-layout27 .fxt-main-content .fxt-socials li.fxt-linkedin a:hover { background-color: #0077B5; } .fxt-template-layout27 .fxt-main-content .fxt-socials li.fxt-youtube a:hover { background-color: #c4302b; } .fxt-template-layout27 .fxt-main-content .fxt-socials li.fxt-pinterest a:hover { background-color: #bd081c; } .fxt-template-layout27 .fxt-main-content .fxt-footer p { color: #232323; font-size: 15px; } @media only screen and (min-width: 992px) { body.open-sidebar .fxt-template-layout27 .fxt-main-content { min-width: 50vw; max-width: 50vw; } } /*======================================================================== 33. Demo Layout Twenty Eight =========================================================================*/ .fxt-template-layout28 { display: flex; align-items: flex-start; } @media only screen and (max-width: 991px) { .fxt-template-layout28 { display: block; min-width: 100%; } } .fxt-template-layout28 .fxt-main-content { padding: 65px 0; background-color: #fff; min-height: 100vh; min-width: 100vw; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; transition: all 0.8s ease-in-out; } @media only screen and (max-width: 991px) { .fxt-template-layout28 .fxt-main-content { min-width: 100%; padding: 55px 15px; } } @media only screen and (max-width: 767px) { .fxt-template-layout28 .fxt-main-content { padding: 45px 15px; } } @media only screen and (max-width: 575px) { .fxt-template-layout28 .fxt-main-content { padding: 35px 15px; } } .fxt-template-layout28 .fxt-main-content .fxt-logo { margin-top: 25px; margin-bottom: 14vh; max-width: 40vw; } .fxt-template-layout28 .fxt-main-content .fxt-sub-title { color: #f11e47; font-size: 46px; font-family: 'Raleway', sans-serif; letter-spacing: 8px; margin-bottom: 25px; line-height: 1.4; margin-left: 8px; } @media only screen and (max-width: 1199px) { .fxt-template-layout28 .fxt-main-content .fxt-sub-title { font-size: 40px; } } @media only screen and (max-width: 991px) { .fxt-template-layout28 .fxt-main-content .fxt-sub-title { font-size: 36px; letter-spacing: 6px; line-height: 1.6; margin-left: 6px; margin-bottom: 20px; } } @media only screen and (max-width: 767px) { .fxt-template-layout28 .fxt-main-content .fxt-sub-title { font-size: 32px; letter-spacing: 4px; line-height: 1.5; margin-left: 4px; margin-bottom: 15px; } } @media only screen and (max-width: 575px) { .fxt-template-layout28 .fxt-main-content .fxt-sub-title { font-size: 28px; letter-spacing: 2px; line-height: 1.4; margin-left: 2px; } } @media only screen and (max-width: 479px) { .fxt-template-layout28 .fxt-main-content .fxt-sub-title { font-size: 26px; line-height: 1.3; } } .fxt-template-layout28 .fxt-main-content .fxt-buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-bottom: 60px; } @media only screen and (max-width: 991px) { .fxt-template-layout28 .fxt-main-content .fxt-buttons { margin-bottom: 50px; } } @media only screen and (max-width: 767px) { .fxt-template-layout28 .fxt-main-content .fxt-buttons { margin-bottom: 40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout28 .fxt-main-content .fxt-buttons { margin-bottom: 30px; } } .fxt-template-layout28 .fxt-main-content .fxt-buttons .fxt-btn { margin: 0 7px 12px; } .fxt-template-layout28 .fxt-main-content .fxt-btn-ghost { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #e1e1e1; color: #232323; border-radius: 45px; background-color: transparent; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout28 .fxt-main-content .fxt-btn-ghost { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout28 .fxt-main-content .fxt-btn-ghost { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout28 .fxt-main-content .fxt-btn-ghost:hover { background-color: #f11e47; border-color: #f11e47; color: #f1f1f1; } .fxt-template-layout28 .fxt-main-content .fxt-btn-ghost:focus { outline: none; } .fxt-template-layout28 .fxt-main-content .fxt-btn-fill { text-align: center; margin-top: 15px; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; box-shadow: none; outline: none; border: 1px solid; border-color: #f11e47; color: #f1f1f1; border-radius: 45px; background-color: #f11e47; padding: 12px 35px; min-width: 180px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout28 .fxt-main-content .fxt-btn-fill { font-size: 14px; padding: 11px 30px; min-width: 160px; } } @media only screen and (max-width: 575px) { .fxt-template-layout28 .fxt-main-content .fxt-btn-fill { font-size: 13px; padding: 10px 25px; min-width: 140px; } } .fxt-template-layout28 .fxt-main-content .fxt-btn-fill:hover { background-color: transparent; border-color: #e1e1e1; color: #232323; } .fxt-template-layout28 .fxt-main-content .fxt-btn-fill:focus { outline: none; } .fxt-template-layout28 .fxt-main-content .fxt-socials { margin-bottom: 70px; } @media only screen and (max-width: 991px) { .fxt-template-layout28 .fxt-main-content .fxt-socials { margin-bottom: 60px; } } @media only screen and (max-width: 767px) { .fxt-template-layout28 .fxt-main-content .fxt-socials { margin-bottom: 50px; } } @media only screen and (max-width: 575px) { .fxt-template-layout28 .fxt-main-content .fxt-socials { margin-bottom: 40px; } } .fxt-template-layout28 .fxt-main-content .fxt-socials li { display: inline-block; margin-right: 15px; margin-bottom: 8px; } @media only screen and (max-width: 991px) { .fxt-template-layout28 .fxt-main-content .fxt-socials li { margin-right: 10px; margin-bottom: 5px; } } @media only screen and (max-width: 767px) { .fxt-template-layout28 .fxt-main-content .fxt-socials li { margin-right: 5px; } } .fxt-template-layout28 .fxt-main-content .fxt-socials li:last-child { margin-right: 0; } .fxt-template-layout28 .fxt-main-content .fxt-socials li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 16px; height: 45px; width: 45px; color: #232323; background-color: #eeeeee; border-radius: 50%; transition: all 0.3s ease-in-out; } @media only screen and (max-width: 767px) { .fxt-template-layout28 .fxt-main-content .fxt-socials li a { font-size: 15px; height: 40px; width: 40px; } } .fxt-template-layout28 .fxt-main-content .fxt-socials li a:hover { color: #fff; } .fxt-template-layout28 .fxt-main-content .fxt-socials li.fxt-facebook a:hover { background-color: #3b5998; } .fxt-template-layout28 .fxt-main-content .fxt-socials li.fxt-twitter a:hover { background-color: #00acee; } .fxt-template-layout28 .fxt-main-content .fxt-socials li.fxt-google a:hover { background-color: #CC3333; } .fxt-template-layout28 .fxt-main-content .fxt-socials li.fxt-instagram a:hover { background-color: #3f729b; } .fxt-template-layout28 .fxt-main-content .fxt-socials li.fxt-linkedin a:hover { background-color: #0077B5; } .fxt-template-layout28 .fxt-main-content .fxt-socials li.fxt-youtube a:hover { background-color: #c4302b; } .fxt-template-layout28 .fxt-main-content .fxt-socials li.fxt-pinterest a:hover { background-color: #bd081c; } .fxt-template-layout28 .fxt-main-content .fxt-footer p { color: #232323; font-size: 15px; } .fxt-template-layout28 .fxt-countdown { margin-bottom: 70px; padding-bottom: 50px; } @media only screen and (max-width: 1439px) { .fxt-template-layout28 .fxt-countdown { margin-bottom: 60px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout28 .fxt-countdown { margin-bottom: 50px; } } @media only screen and (max-width: 991px) { .fxt-template-layout28 .fxt-countdown { margin-bottom: 40px; } } @media only screen and (max-width: 767px) { .fxt-template-layout28 .fxt-countdown { margin-bottom: 30px; } } @media only screen and (max-width: 575px) { .fxt-template-layout28 .fxt-countdown { margin-bottom: 20px; } } .fxt-template-layout28 .fxt-countdown .countdown-section { display: inline-block; min-width: 70px; margin-right: 35px; padding-right: 35px; position: relative; z-index: 1; } @media only screen and (max-width: 1855px) { .fxt-template-layout28 .fxt-countdown .countdown-section { margin-right: 30px; padding-right: 30px; } } @media only screen and (max-width: 1439px) { .fxt-template-layout28 .fxt-countdown .countdown-section { margin-right: 25px; padding-right: 25px; min-width: 65px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout28 .fxt-countdown .countdown-section { margin-right: 20px; padding-right: 20px; min-width: 60px; } } @media only screen and (max-width: 575px) { .fxt-template-layout28 .fxt-countdown .countdown-section { min-width: 55px; margin-right: 15px; padding-right: 15px; } } @media only screen and (max-width: 479px) { .fxt-template-layout28 .fxt-countdown .countdown-section { min-width: 45px; margin-right: 10px; padding-right: 10px; } } .fxt-template-layout28 .fxt-countdown .countdown-section > div { position: relative; z-index: 1; } .fxt-template-layout28 .fxt-countdown .countdown-section:before { content: ""; height: 10px; width: 10px; border-radius: 50%; background-color: #000; position: absolute; z-index: 1; top: 16px; right: -5px; } @media only screen and (max-width: 1855px) { .fxt-template-layout28 .fxt-countdown .countdown-section:before { top: 15px; } } @media only screen and (max-width: 1439px) { .fxt-template-layout28 .fxt-countdown .countdown-section:before { top: 13px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout28 .fxt-countdown .countdown-section:before { top: 11px; height: 8px; width: 8px; } } @media only screen and (max-width: 575px) { .fxt-template-layout28 .fxt-countdown .countdown-section:before { top: 10px; height: 5px; width: 5px; } } @media only screen and (max-width: 479px) { .fxt-template-layout28 .fxt-countdown .countdown-section:before { top: 8px; right: -3px; } } .fxt-template-layout28 .fxt-countdown .countdown-section:after { content: ""; height: 10px; width: 10px; border-radius: 50%; background-color: #000; position: absolute; z-index: 1; top: 38px; right: -5px; } @media only screen and (max-width: 1855px) { .fxt-template-layout28 .fxt-countdown .countdown-section:after { top: 43px; } } @media only screen and (max-width: 1439px) { .fxt-template-layout28 .fxt-countdown .countdown-section:after { top: 38px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout28 .fxt-countdown .countdown-section:after { top: 32px; height: 8px; width: 8px; } } @media only screen and (max-width: 575px) { .fxt-template-layout28 .fxt-countdown .countdown-section:after { top: 28px; height: 5px; width: 5px; } } @media only screen and (max-width: 479px) { .fxt-template-layout28 .fxt-countdown .countdown-section:after { top: 23px; right: -3px; } } .fxt-template-layout28 .fxt-countdown .countdown-section:last-child { margin-right: 0; padding-right: 0; } .fxt-template-layout28 .fxt-countdown .countdown-section:last-child:after, .fxt-template-layout28 .fxt-countdown .countdown-section:last-child:before { display: none; } .fxt-template-layout28 .fxt-countdown .countdown-section .countdown-number { font-size: 60px; line-height: 1; font-weight: 600; color: #000; } @media only screen and (max-width: 1439px) { .fxt-template-layout28 .fxt-countdown .countdown-section .countdown-number { font-size: 56px; } } @media only screen and (max-width: 1199px) { .fxt-template-layout28 .fxt-countdown .countdown-section .countdown-number { font-size: 48px; } } @media only screen and (max-width: 575px) { .fxt-template-layout28 .fxt-countdown .countdown-section .countdown-number { font-size: 42px; } } @media only screen and (max-width: 479px) { .fxt-template-layout28 .fxt-countdown .countdown-section .countdown-number { font-size: 36px; } } .fxt-template-layout28 .fxt-countdown .countdown-section .countdown-unit { color: #666666; position: absolute; z-index: 1; bottom: -50px; left: 50%; transform: translateX(-50%); font-size: 22px; } @media only screen and (max-width: 991px) { .fxt-template-layout28 .fxt-countdown .countdown-section .countdown-unit { font-size: 20px; bottom: -45px; } } @media only screen and (max-width: 767px) { .fxt-template-layout28 .fxt-countdown .countdown-section .countdown-unit { font-size: 18px; bottom: -40px; } } @media only screen and (max-width: 575px) { .fxt-template-layout28 .fxt-countdown .countdown-section .countdown-unit { font-size: 16px; bottom: -35px; } } @media only screen and (max-width: 575px) { .fxt-template-layout28 .fxt-countdown .countdown-section .countdown-unit { font-size: 15px; bottom: -30px; } } @media only screen and (min-width: 992px) { body.open-sidebar .fxt-template-layout28 .fxt-main-content { min-width: 50vw; max-width: 50vw; } }