D7net
Home
Console
Upload
information
Create File
Create Folder
About
Tools
:
/
home3
/
encodto1
/
salon.encodersunlimited.com
/
css
/
Filename :
style.css
back
Copy
/* Template Name: Reine - Beauty Salon HTML5 Template Theme URL: https://themeforest.net/user/dsathemes Description: Reine - Beauty Salon HTML5 Template Author: DSAThemes Author URL: https://themeforest.net/user/dsathemes Version: 1.1.0 Website: www.dsathemes.com Tags: DSAThemes, Beauty, Salon, Beauty Parlour, Health Care, Makeup, Nail Salon, Therapy, Treatment, Wellness */ /* ========================================================================== 01. GENERAL & BASIC STYLES =========================================================================== */ html { -webkit-font-smoothing: antialiased; font-size: 16px; } body { font-family: 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #6f6f6f; line-height: 1.6666; font-weight: 400; } body.theme--dark, .theme--dark .bg--white { background-color: #212223!important; } body.theme--dark { color: #ccc; } /*------------------------------------------*/ /* PAGE CONTENT /*------------------------------------------*/ #page, .hidd { overflow: hidden; } .rel, section, .container { position: relative!important; z-index: 3; } .section-overlay { width: 100%; height: 100%; } /*------------------------------------------*/ /* SPACING & INDENTS /*------------------------------------------*/ .m-6 { margin: 4rem!important; } .m-7 { margin: 5rem!important; } .m-8 { margin: 6rem!important; } .m-9 { margin: 7rem!important; } .m-10 { margin: 8rem!important; } .mx-6 { margin-right: 4rem!important; margin-left: 4rem!important; } .mx-7 { margin-right: 5rem!important; margin-left: 5rem!important; } .mx-8 { margin-right: 6rem!important; margin-left: 6rem!important; } .mx-9 { margin-right: 7rem!important; margin-left: 7rem!important; } .mx-10 { margin-right: 8rem!important; margin-left: 8rem!important; } .my-6 { margin-top: 4rem!important; margin-bottom: 4rem!important; } .my-7 { margin-top: 5rem!important; margin-bottom: 5rem!important; } .my-8 { margin-top: 6rem!important; margin-bottom: 6rem!important; } .my-9 { margin-top: 7rem!important; margin-bottom: 7rem!important; } .my-10 { margin-top: 8rem!important; margin-bottom: 8rem!important; } .mt-6 { margin-top: 4rem!important; } .mt-7 { margin-top: 5rem!important; } .mt-8 { margin-top: 6rem!important; } .mt-9 { margin-top: 7rem!important; } .mt-10 { margin-top: 8rem!important; } .me-6 { margin-right: 4rem!important; } .me-7 { margin-right: 5rem!important; } .me-8 { margin-right: 6rem!important; } .me-9 { margin-right: 7rem!important; } .me-10 { margin-right: 8rem!important; } .mb-6 { margin-bottom: 4rem!important; } .mb-7 { margin-bottom: 5rem!important; } .mb-8 { margin-bottom: 6rem!important; } .mb-9 { margin-bottom: 7rem!important; } .mb-10 { margin-bottom: 8rem!important; } .ms-6 { margin-left: 4rem!important; } .ms-7 { margin-left: 5rem!important; } .ms-8 { margin-left: 6rem!important; } .ms-9 { margin-left: 7rem!important; } .ms-10 { margin-left: 8rem!important; } .p-6 { padding: 4rem!important; } .p-7 { padding: 5rem!important; } .p-8 { padding: 6rem!important; } .p-9 { padding: 7rem!important; } .p-10 { padding: 8rem!important; } .px-6 { padding-right: 4rem!important; padding-left: 4rem!important; } .px-7 { padding-right: 5rem!important; padding-left: 5rem!important; } .px-8 { padding-right: 6rem!important; padding-left: 6rem!important; } .px-9 { padding-right: 7rem!important; padding-left: 7rem!important; } .px-10 { padding-right: 8rem!important; padding-left: 8rem!important; } .py-6 { padding-top: 4rem!important; padding-bottom: 4rem!important; } .py-7 { padding-top: 5rem!important; padding-bottom: 5rem!important; } .py-8 { padding-top: 6rem!important; padding-bottom: 6rem!important; } .py-9 { padding-top: 7rem!important; padding-bottom: 7rem!important; } .py-10 { padding-top: 8rem!important; padding-bottom: 8rem!important; } .pt-6 { padding-top: 4rem!important; } .pt-7 { padding-top: 5rem!important; } .pt-8 { padding-top: 6rem!important; } .pt-9 { padding-top: 7rem!important; } .pt-10 { padding-top: 8rem!important; } .pe-6 { padding-right: 4rem!important; } .pe-7 { padding-right: 5rem!important; } .pe-8 { padding-right: 6rem!important; } .pe-9 { padding-right: 7rem!important; } .pe-10 { padding-right: 8rem!important; } .pb-6 { padding-bottom: 4rem!important; } .pb-7 { padding-bottom: 5rem!important; } .pb-8 { padding-bottom: 6rem!important; } .pb-9 { padding-bottom: 7rem!important; } .pb-10 { padding-bottom: 8rem!important; } .ps-6 { padding-left: 4rem!important; } .ps-7 { padding-left: 5rem!important; } .ps-8 { padding-left: 6rem!important; } .ps-9 { padding-left: 7rem!important; } .ps-10 { padding-left: 8rem!important; } /*------------------------------------------*/ /* BACKGROUND SETTINGS /*------------------------------------------*/ .bg--fixed, .bg--scroll { width: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; } .bg--fixed { background-attachment: scroll!important; } .bg--scroll { background-attachment: fixed!important; } /*------------------------------------------*/ /* BLOCK SHADOW /*------------------------------------------*/ .block-shadow { -webkit-box-shadow: 0 6px 12px 0 rgba(0, 0, 0, .06); -moz-box-shadow: 0 6px 12px 0 rgba(0, 0, 0, .06); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, .06); } /*------------------------------------------*/ /* BACKGROUND COLORS /*------------------------------------------*/ .bg--black { background-color: #212223; } .bg--white { background-color: #fff; } .bg--blush { background-color: #faf3f7; } .bg--ivory { background-color: #f8f5f2; } .bg--magenta { background-color: #b25996; } .bg--peanut { background-color: #c1baac; } .bg--poudre { background-color: #f9efed; } .bg--red { background-color: #e55d42; } .bg--salmon { background-color: rgba(247, 221, 217, .68); } .bg--smoke { background-color: #f2f2f0; } .bg--stone { background-color: #f5f5f5; } .theme--dark .bg--black, .theme--dark .bg--white, .theme--dark .bg--poudre, .theme--dark .bg--blush, .theme--dark .bg--ivory, .theme--dark .bg--smoke, .theme--dark .bg--stone { background-color: #1c1d1e!important; } .theme--dark .bg--salmon { background-color: #191a1a; } /*------------------------------------------*/ /* BACKGROUND SHAPE /*------------------------------------------*/ .shape--01:after, .shape--02:after { position: absolute; width: 42%; height: 100%; top: 0; content: ''; z-index: -1; } .shape--01:after { right: 0; } .shape--02:after { left: 0; } .white--shape:after { background-color: #fff; -webkit-box-shadow: 0 6px 12px 0 rgba(0, 0, 0, .06); -moz-box-shadow: 0 6px 12px 0 rgba(0, 0, 0, .06); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, .06); } .theme--dark .white--shape:after { background-color: #1c1d1e; -webkit-box-shadow: 0 6px 12px 0 rgba(10, 10, 10, .06); -moz-box-shadow: 0 6px 12px 0 rgba(10, 10, 10, .06); box-shadow: 0 6px 12px 0 rgba(10, 10, 10, .06); } .black--shape:after { background-color: #212223; } .blush--shape:after{ background-color: #faf3f7; } .ivory--shape:after { background-color: #f8f5f2; } .poudre--shape:after { background-color: #f9efed; } .smoke--shape:after { background-color: #f2f2f0; } .stone--shape:after { background-color: #f5f5f5; } .theme--dark .blush--shape:after, .theme--dark .ivory--shape:after, .theme--dark .poudre--shape:after, .theme--dark .smoke--shape:after, .theme--dark .stone--shape:after { background-color: #1c1d1e; } /*------------------------------------------*/ /* BACKGROUND IMAGE /*------------------------------------------*/ .bg--01, .bg--02, .bg--03, .bg--04, .bg--05, .bg--06 { background-repeat: no-repeat; background-position: center center; background-size: cover; } .bg--01 { background-image: url(../images/bg-01.jpg); } .bg--02 { background-image: url(../images/bg-02.jpg); } .bg--03 { background-image: url(../images/bg-03.jpg); } .bg--04 { background-image: url(../images/bg-04.jpg); } .bg--05 { background-image: url(../images/bg-05.jpg); } .bg--06 { background-image: url(../images/bg-06.jpg); } /* ========================================================================== 02. TYPOGRAPHY =========================================================================== */ /*------------------------------------------*/ /* HEADERS /*------------------------------------------*/ h1, h2, h3, h4, h5, h6 { color: #363636; font-family: 'Vollkorn', serif; letter-spacing: 0; letter-spacing: -0.75px; font-weight: 400; margin-bottom: 0; } .theme--dark h1, .theme--dark h2, .theme--dark h3, .theme--dark h4, .theme--dark h5, .theme--dark h6 { color: #fff; } /*------------------------------------------*/ /* HEADER SIZE /*------------------------------------------*/ h6 { font-size: 1rem; } /* 16px */ h6.h6-md { font-size: 1.125rem; } /* 18px */ h6.h6-lg { font-size: 1.25rem; } /* 20px */ h5 { font-size: 1.375rem; } /* 22px */ h5.h5-md { font-size: 1.5rem; } /* 24px */ h5.h5-lg { font-size: 1.625rem; } /* 26px */ h4 { font-size: 1.75rem; } /* 28px */ h4.h4-md { font-size: 1.875rem; } /* 30px */ h4.h4-lg { font-size: 2rem; } /* 32px */ h3 { font-size: 2.125rem; } /* 34px */ h3.h3-md { font-size: 2.25rem; } /* 36px */ h3.h3-lg { font-size: 2.375rem; } /* 38px */ h2 { font-size: 2.75rem; } /* 44px */ h2.h2-md { font-size: 2.875rem; } /* 46px */ h2.h2-lg { font-size: 3rem; } /* 48px */ h2.h2-title { font-size: 3.25rem; } /* 52px */ /*------------------------------------------*/ /* HANDWRITING TEXT /*------------------------------------------*/ .tra-title { position: relative; font-family: 'Alex Brush', cursive; line-height: 0.9; font-size: 4.25rem; opacity: .1; margin-bottom: -45px!important; } /*------------------------------------------*/ /* PARAGRAPHS /*------------------------------------------*/ p { font-size: 1.0625rem; } /* 17px */ /*------------------------------------------*/ /* FONT WEIGHT /*------------------------------------------*/ .w-400 { font-weight: 400; } .w-500 { font-weight: 500; } .w-600 { font-weight: 600; } .w-700 { font-weight: 700; } .w-800 { font-weight: 800; } /*------------------------------------------*/ /* LINK SETTINGS /*------------------------------------------*/ a { color: #6f6f6f; text-decoration: none; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } a:hover { color: #363636!important; text-decoration: none; } a:focus { outline: none; text-decoration: none; } /*------------------------------------------*/ /* LISTS /*------------------------------------------*/ ul { margin: 0; padding: 0; list-style: none; } /*------------------------------------------*/ /* TEXT LIST /*------------------------------------------*/ ul.simple-list { list-style: disc; margin-left: 15px; } ul.simple-list.long-list p { margin-bottom: 8px; } /*------------------------------------------*/ /* BUTTON SETTINGS /*------------------------------------------*/ .btn { background-color: transparent; font-size: 0.725rem; line-height: 1; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; padding: 1rem 1.8rem; border: 1.5px solid transparent; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } /*------------------------------------------*/ /* BLACK BUTTON /*------------------------------------------*/ .btn--black, .hover--black:hover, .scroll .hover--black:hover { color: #fff!important; background-color: #262b2f!important; border-color: #262b2f!important; } .btn--tra-black, .hover--tra-black:hover, .scroll .hover--tra-black:hover, .white-scroll .scroll .hover--tra-black:hover, .black-scroll .scroll .hover--tra-black:hover { color: #262b2f!important; background-color:transparent!important; border-color: #262b2f!important; } .theme--dark .btn--black, .theme--dark .hover--black:hover { color: #363636!important; background-color: #fff!important; border-color: #fff!important; } .theme--dark .btn--tra-black, .theme--dark .hover--tra-black:hover, .theme--dark .scroll .hover--tra-black:hover, .theme--dark .white-scroll .scroll .hover--tra-black:hover, .theme--dark .black-scroll .scroll .hover--tra-black:hover { color: #e5e5e5!important; background-color:transparent!important; border-color: #e5e5e5!important; } /*------------------------------------------*/ /* WHITE BUTTON /*------------------------------------------*/ .btn--white, .hover--white:hover { color: #363636!important; background-color: #fff!important; border-color: #fff!important; } .btn--tra-white, .hover--tra-white:hover { color: #fff!important; background-color: transparent!important; border-color: #fff!important; } .white-scroll .scroll .hover--tra-white:hover { color: #363636!important; background-color: transparent!important; border-color: #363636!important; } .dark-menu.white-scroll .scroll .hover--tra-white:hover { color: #fff!important; background-color: transparent!important; border-color: #fff!important; } .white-scroll .scroll .hover--white:hover { color: #fff!important; background-color: #262b2f!important; border-color: #262b2f!important; } /*------------------------------------------*/ /* GOLD BUTTON /*------------------------------------------*/ .btn--gold, .scroll .btn--gold, .hover--gold:hover, .scroll .hover--gold:hover, .color--white .hover--gold:hover, .white-scroll .scroll .hover--gold:hover { color: #fff!important; background-color: #af8855!important; border-color: #af8855!important; } .btn--tra-gold, .hover--tra-gold:hover, .scroll .btn--tra-gold, .color--white .hover--tra-gold:hover, .white-scroll .scroll .hover--tra-gold:hover { color: #af8855!important; background-color: transparent!important; border-color: #af8855!important; } .theme--dark .white-scroll .scroll .hover--gold:hover { color: #fff!important; background-color: #af8855!important; border-color: #af8855!important; } /*------------------------------------------*/ /* RED BUTTON /*------------------------------------------*/ .btn--red, .scroll .btn--red, .hover--red:hover, .scroll .hover--red:hover, .color--white .hover--red:hover, .white-scroll .scroll .hover--red:hover { color: #fff!important; background-color: #e55d42!important; border-color: #e55d42!important; } .btn--tra-red, .hover--tra-red:hover, .scroll .btn--tra-red, .color--white .hover--tra-red:hover, .white-scroll .scroll .hover--tra-red:hover { color: #e55d42!important; background-color: transparent!important; border-color: #e55d42!important; } /*------------------------------------------*/ /* MAGENTA BUTTON /*------------------------------------------*/ .btn--magenta, .scroll .btn--magenta, .hover--magenta:hover, .scroll .hover--magenta:hover, .color--white .hover--magenta:hover, .white-scroll .scroll .hover--magenta:hover { color: #fff!important; background-color: #b25996!important; border-color: #b25996!important; } .btn--tra-magenta, .hover--tra-magenta:hover, .scroll .btn--tra-magenta, .color--white .hover--tra-magenta:hover, .white-scroll .scroll .hover--tra-magenta:hover { color: #b25996!important; background-color: transparent!important; border-color: #b25996!important; } /*------------------------------------------*/ /* BUTTON FOCUS /*------------------------------------------*/ .btn:focus, .btn.btn--black:focus { color: #fff; -webkit-box-shadow: none; box-shadow: none; } .btn--tra-black:focus { color: #363636; -webkit-box-shadow: none; box-shadow: none; } /*------------------------------------------*/ /* TRANSPARENT LINK /*------------------------------------------*/ p.tra-link { font-size: 0.775rem; line-height: 1; text-transform: uppercase; font-weight: 600; letter-spacing: 2px; } p.tra-link a { color: #363636; position: relative; padding-bottom: 5px; text-decoration: none; } .theme--dark p.tra-link a { color: #ccc; } p.tra-link a:after { content: ''; background-color: #363636; height: 1.5px; width: 60%; width: 100%; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); -webkit-transition: .2s all ease-in; -moz-transition: .2s all ease-in; -o-transition: .2s all ease-in; transition: .2s all ease-in; } .theme--dark p.tra-link a:after { background-color: #ccc; } p.tra-link a:hover { color: #363636!important; } .theme--dark p.tra-link a:hover { color: #ccc!important; } p.tra-link a:hover:after { width: 60%; } /*------------------------------------------*/ /* VIDEO POPUP ICON /*------------------------------------------*/ .video-preview { position: relative; text-align: center; } .video-btn { position: absolute!important; top: 50%; left: 50%; display: inline-block; text-align: center; color: #fff; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .video-btn-lg { width: 6.25rem; height: 6.25rem; margin-top: -3.125rem; margin-left: -3.125rem; } .video-btn-md { width: 5.625rem; height: 5.625rem; margin-top: -2.8125rem; margin-left: -2.8125rem; } .video-block-wrapper { -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .video-btn.video-btn-lg [class^="flaticon-"]:before, .video-btn.video-btn-lg [class^="flaticon-"]:after { font-size: 3.75rem; line-height: 6.25rem!important; margin-left: 10px; } .video-btn.video-btn-md [class^="flaticon-"]:before, .video-btn.video-btn-md [class^="flaticon-"]:after { font-size: 3.25rem; line-height: 5.625rem!important; margin-left: 8px; } .video-btn:hover .video-block-wrapper { -moz-transform: scale(0.95); -ms-transform: scale(0.95); -webkit-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); } .video-btn:before { content: ''; position: absolute; left: -5px; right: -5px; top: -5px; bottom: -5px; background: rgba(255, 255, 255, 0.2); opacity: 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .video-btn.video-btn-lg:hover:before { opacity: .75; left: -1.5rem; right: -1.5rem; top: -1.5rem; bottom: -1.5rem; } .video-btn.video-btn-md:hover:before { opacity: .75; left: -1.25rem; right: -1.25rem; top: -1.25rem; bottom: -1.25rem; } /*------------------------------------------*/ /* VECTOR ICONS /*------------------------------------------*/ .ico-10 [class*="flaticon-"]:before, .ico-10 [class*="flaticon-"]:after { font-size: 0.75rem; } /* 15px */ .ico-15 [class*="flaticon-"]:before, .ico-15 [class*="flaticon-"]:after { font-size: 0.9375rem; } /* 15px */ .ico-20 [class*="flaticon-"]:before, .ico-20 [class*="flaticon-"]:after { font-size: 1.25rem; } /* 20px */ .ico-25 [class*="flaticon-"]:before, .ico-25 [class*="flaticon-"]:after { font-size: 1.5625rem; } /* 25px */ .ico-30 [class*="flaticon-"]:before, .ico-30 [class*="flaticon-"]:after { font-size: 1.875rem; } /* 30px */ .ico-35 [class*="flaticon-"]:before, .ico-35 [class*="flaticon-"]:after { font-size: 2.1875rem; } /* 35px */ .ico-40 [class*="flaticon-"]:before, .ico-40 [class*="flaticon-"]:after { font-size: 2.5rem; } /* 40px */ .ico-45 [class*="flaticon-"]:before, .ico-45 [class*="flaticon-"]:after { font-size: 2.8125rem; } /* 45px */ .ico-50 [class*="flaticon-"]:before, .ico-50 [class*="flaticon-"]:after { font-size: 3.125rem; } /* 50px */ .ico-55 [class*="flaticon-"]:before, .ico-55 [class*="flaticon-"]:after { font-size: 3.4375rem; } /* 55px */ .ico-60 [class*="flaticon-"]:before, .ico-60 [class*="flaticon-"]:after { font-size: 3.75rem; } /* 60px */ .ico-65 [class*="flaticon-"]:before, .ico-65 [class*="flaticon-"]:after { font-size: 4.0625rem; } /* 65px */ .ico-70 [class*="flaticon-"]:before, .ico-70 [class*="flaticon-"]:after { font-size: 4.375rem; } /* 70px */ .ico-75 [class*="flaticon-"]:before, .ico-75 [class*="flaticon-"]:after { font-size: 4.6875rem; } /* 75px */ .ico-80 [class*="flaticon-"]:before, .ico-80 [class*="flaticon-"]:after { font-size: 5rem; } /* 80px */ .ico-85 [class*="flaticon-"]:before, .ico-85 [class*="flaticon-"]:after { font-size: 5.3125rem; } /* 85px */ .ico-90 [class*="flaticon-"]:before, .ico-90 [class*="flaticon-"]:after { font-size: 5.625rem; } /* 90px */ .ico-95 [class*="flaticon-"]:before, .ico-95 [class*="flaticon-"]:after { font-size: 5.9375rem; } /* 95px */ .ico-100 [class*="flaticon-"]:before, .ico-100 [class*="flaticon-"]:after { font-size: 6.25rem; } /* 100px */ .ico-105 [class*="flaticon-"]:before, .ico-105 [class*="flaticon-"]:after { font-size: 6.5625rem; } /* 105px */ .ico-110 [class*="flaticon-"]:before, .ico-110 [class*="flaticon-"]:after { font-size: 6.875rem; } /* 110px */ .ico-115 [class*="flaticon-"]:before, .ico-115 [class*="flaticon-"]:after { font-size: 7.1875rem; } /* 115px */ .ico-120 [class*="flaticon-"]:before, .ico-120 [class*="flaticon-"]:after { font-size: 7.5rem; } /* 120px */ .ico-125 [class*="flaticon-"]:before, .ico-125 [class*="flaticon-"]:after { font-size: 7.8125rem; } /* 125px */ /*------------------------------------------*/ /* VECTOR ICON BACKGROUND /*------------------------------------------*/ .shape-ico { position: relative; display: inline-block; margin: 0 auto; } .shape-ico span { position: relative; z-index: 2; } .shape-ico svg { position: absolute; z-index: 1; } .ico-50 .shape-ico svg { width: 130px; height: 130px; top: -35px; left: calc(50% - 60px); } .fbox-11 .ico-50 .shape-ico svg { top: -40px; left: calc(50% - 70px); } .ico-55 .shape-ico svg { width: 135px; height: 135px; top: -30px; left: calc(50% - 60px); } .ico-60 .shape-ico svg { width: 140px; height: 140px; top: -30px; left: calc(50% - 65px); } .theme--dark .shape-ico svg path { fill: #1d1d1d; } /*------------------------------------------*/ /* MORE BUTTON /*------------------------------------------*/ .more-btn { text-align: center; } /*------------------------------------------*/ /* GRAYSCALE IMAGE /*------------------------------------------*/ .grey-img img { filter: grayscale(100%); } /*------------------------------------------*/ /* IMAGE HOVER OVERLAY /*------------------------------------------*/ .hover-overlay { width: 100%; height: auto; overflow: hidden; position: relative; } .hover-overlay img { transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -moz-transform: scale(1); overflow: hidden; -webkit-transition: transform 400ms; -moz-transition: transform 400ms; -o-transition: transform 400ms; transition: transform 400ms; } /*------------------------------------------*/ /* Overlay Background /*------------------------------------------*/ .item-overlay { opacity: 0; -moz-opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(20, 20, 20, .5); -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } /*------------------------------------------*/ /* SECTION ID /*------------------------------------------*/ .section-id { display: block; font-size: 0.85rem; line-height: 2; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 30px; } /*------------------------------------------*/ /* TEXT COLORS /*------------------------------------------*/ .color--white, .color--white h1, .color--white h2, .color--white h3, .color--white h4, .color--white h5, .color--white h6, .color--white p, .color--white a, .color--white li, .color--white i, .color--white span { color: #fff; } .color--black, .color--black h1, .color--black h2, .color--black h3, .color--black h4, .color--black h5, .color--black h6, .color--black p, .color--black a, .color--black li, .color--black i, .color--black span { color: #363636!important; } .theme--dark .color--black, .theme--dark .color--black h2, .theme--dark .color--black h3, .theme--dark .color--black h4, .theme--dark .color--black h5, .theme--dark .color--black h6, .theme--dark .color--black p, .theme--dark .color--black a, .theme--dark .color--black li, .theme--dark .color--black i, .theme--dark .color--black span, .theme--dar .color--white .color--black { color: #fff!important; } .color--grey, .color--grey h1, .color--grey h2, .color--grey h3, .color--grey h4, .color--grey h5, .color--grey h6, .color--grey p, .color--grey a, .color--grey li, .color--grey i, .color--grey span, .color--white .color--grey { color: #ccc!important; } .color--gold, .color--gold h1, .color--gold h2, .color--gold h3, .color--gold h4, .color--gold h5, .color--gold h6, .color--gold p, .color--gold a, .color--gold li, .color--gold i, .color--gold span, .color--white .color--gold { color: #af8855!important; } .color--magenta, .color--magenta h1, .color--magenta h2, .color--magenta h3, .color--magenta h4, .color--magenta h5, .color--magenta h6, .color--magenta p, .color--magenta a, .color--magenta li, .color--magenta i, .color--magenta span, .color--white .color--magenta { color: #b25996!important; } .color--red, .color--red h1, .color--red h2, .color--red h3, .color--red h4, .color--red h5, .color--red h6, .color--red p, .color--red a, .color--red li, .color--red i, .color--red span, .color--white .color--red { color: #e55d42!important; } .color--yellow, .color--yellow h1, .color--yellow h2, .color--yellow h3, .color--yellow h4, .color--yellow h5, .color--yellow h6, .color--yellow p, .color--yellow a, .color--yellow li, .color--yellow i, .color--yellow span, .color--white .color--yellow { color: #ffb30c!important; } /* ========================================================================== 03. PRELOAD ANIMATION ========================================================================== */ #loading { height: 100%; width: 100%; position: fixed; z-index: 1; margin-top: 0px; top: 0px; z-index: 999999; } #loading { background-color: #f5f4f2; } #loading.loading-magenta { background-color: #f2e3ed; } #loading.loading-poudre { background-color: #f7efec; } #loading.loading-red { background-color: #f9efed; } .theme--dark #loading, .theme--dark #loading.loading-magenta, .theme--dark #loading.loading-poudre, .theme--dark #loading.loading-red { background-color: #212223; } #loading-center { position: absolute; left: calc(50% - 50px); top: calc(50% - 50px); height: 100px; width: 100px; -webkit-animation: loading-center-absolute 1s infinite; animation: loading-center-absolute 1s infinite; } .loader { width: 100px; height: 100px; border-radius: 50%; display: inline-block; position: relative; border: 3px solid; border-color: #cc9889 #cc9889 transparent; box-sizing: border-box; animation: rotation 1s linear infinite; } .loading-black .loader { border-color: #262b2f #262b2f transparent; } .loading-magenta .loader { border-color: #b25996 #b25996 transparent; } .loading-poudre .loader { border-color: #d896a9 #d896a9 transparent; } .loading-red .loader { border-color: #f29180 #f29180 transparent; } .theme--dark .loader, .theme--dark .loading-black .loader, .theme--dark .loading-magenta .loader, .theme--dark .loading-poudre .loader, .theme--dark .loading-red .loader { border-color: #ddd #ddd transparent; } .loader::after { content: ''; box-sizing: border-box; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border: 3px solid; border-color: transparent #cc9889 #cc9889; width: 64px; height: 64px; border-radius: 50%; animation: rotationBack 0.5s linear infinite; transform-origin: center center; } .loading-black .loader::after { border-color: transparent #262b2f #262b2f; } .loading-magenta .loader::after { border-color: transparent #b25996 #b25996; } .loading-poudre .loader::after { border-color: transparent #d896a9 #d896a9; } .loading-red .loader::after { border-color: transparent #f29180 #f29180; } .theme--dark .loader::after, .theme--dark .loading-black .loader::after, .theme--dark .loading-magenta .loader::after, .theme--dark .loading-poudre .loader::after, .theme--dark .loading-red .loader::after { border-color: #ddd #ddd transparent; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes rotationBack { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } } /* ========================================================================== 04. HEADER & NAVIGATION =========================================================================== */ #header { width: 100%; display: block; padding-top: 0px; } .header-wrapper { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; } .headerwp { max-width: 1140px; margin: 0 auto; padding: 0; } .posrlt { position: relative; } /*------------------------------------------*/ /* HEADER LOGO /*------------------------------------------*/ .desktoplogo { line-height: 66px; } .desktoplogo img { width: auto; max-width: inherit; max-height: 42px; } .desktoplogo.logo-square img { max-height: 54px; } /*------------------------------------------*/ /* NAVIGATION MENU /*------------------------------------------*/ .wsmainfull { width: 100%; height: auto; z-index: 1031; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .tra-menu .wsmainfull { padding: 20px 0; background-color: transparent!important; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .white-menu .wsmainfull { padding: 6px 0; background-color: #fff!important; -webkit-box-shadow: 0 2px 3px rgba(96, 96, 96, .1); -moz-box-shadow: 0 2px 3px rgba(96, 96, 96, .1); box-shadow: 0 2px 3px rgba(96, 96, 96, .1); } .theme--dark .white-menu .wsmainfull { background-color: #151515!important; -webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, .1); -moz-box-shadow: 0 2px 3px rgba(10, 10, 10, .1); box-shadow: 0 2px 3px rgba(10, 10, 10, .1); } .dark-menu .wsmainfull { padding: 6px 0; background-color: #151515!important; -webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, .1); -moz-box-shadow: 0 2px 3px rgba(10, 10, 10, .1); box-shadow: 0 2px 3px rgba(10, 10, 10, .1); } #header.hiddden-header { display: none; } .hidden-nav .wsmainfull { margin-top: -140px; -webkit-box-shadow: 0 2px 3px rgba(96, 96, 96, .1); -moz-box-shadow: 0 2px 3px rgba(96, 96, 96, .1); box-shadow: 0 2px 3px rgba(96, 96, 96, .1); -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } /*------------------------------------------*/ /* HEADER LINK /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > a { display: block; font-size: 0.8rem; line-height: 50px; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; text-decoration: none; margin: 0 7px; padding: 10px 15px; } .navbar-dark .wsmenu > .wsmenu-list > li > a.h-link { color: #363636; } .navbar-light .wsmenu > .wsmenu-list > li > a.h-link, .theme--dark .navbar-dark .wsmenu > .wsmenu-list > li > a.h-link { color: #fff; } .wsmenu > .wsmenu-list > li > a.h-link.last-link { padding: 10px 0px; margin: 0; } .wsmenu > .wsmenu-list > li > a .wsarrow:after { border-left: 4px solid rgba(0, 0, 0, 0); border-right: 4px solid rgba(0, 0, 0, 0); border-top: 4px solid; content: ""; float: right; right: 0; height: 0; margin: 0 0 0 14px; position: absolute; text-align: right; top: 33px; width: 0; } /*------------------------------------------*/ /* HEADER BUTTONS /*------------------------------------------*/ .wsmenu > .wsmenu-list > li a.btn { font-size: 0.75rem; line-height: 30px; padding: 4px 28px; margin: 14px 0 0 8px; } /*------------------------------------------*/ /* HEADER SUBMENU /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > ul.sub-menu { width: auto; min-width: 220px; top: 62px; padding: 16px 25px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; -webkit-box-shadow: 0 2px 3px rgba(96, 96, 96, .1); -moz-box-shadow: 0 2px 3px rgba(96, 96, 96, .1); box-shadow: 0 2px 3px rgba(96, 96, 96, .1); } .dark-menu .wsmenu > .wsmenu-list > li > ul.sub-menu, .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu { background-color: #151515; border-color: #151515; -webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, .1); -moz-box-shadow: 0 2px 3px rgba(10, 10, 10, .1); box-shadow: 0 2px 3px rgba(10, 10, 10, .1); } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a { background-color: rgba(244, 244, 249, 0); color: #363636; font-size: 0.775rem; font-weight: 500; text-transform: uppercase; letter-spacing: 1.5px; padding: 5px 0; transition: all 0.3s ease-in-out; } .dark-menu .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a, .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a { color: #ccc; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover { background-color: transparent!important; padding: 5px 0 5px 5px; } /*------------------------------------------*/ /* HALFMENU /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > .wsmegamenu { top: 62px; } .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu { width: 36%; padding: 18px 14px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; -webkit-box-shadow: 0 2px 3px rgba(96, 96, 96, .1); -moz-box-shadow: 0 2px 3px rgba(96, 96, 96, .1); box-shadow: 0 2px 3px rgba(96, 96, 96, .1); } .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu { background-color: #151515; border-color: #151515; -webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, .1); -moz-box-shadow: 0 2px 3px rgba(10, 10, 10, .1); box-shadow: 0 2px 3px rgba(10, 10, 10, .1); } .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu.icons-menu { right: 2%; } .wsmenu > .wsmenu-list > li > .wsmegamenu .link-list li { border-bottom: none; } .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a { background-color: rgba(244, 244, 249, 0); color: #363636; font-size: 0.775rem; font-weight: 500; text-transform: uppercase; letter-spacing: 1.5px; padding: 5px 0; transition: all 0.3s ease-in-out; } .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a { color: #ccc; } .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { background-color: transparent!important; padding: 5px 0 5px 5px; } /*------------------------------------------*/ /* NAVBAR HOVER /*------------------------------------------*/ .navbar-light .wsmenu-list > li > a.h-link:hover { color: #eee!important; } .navbar-dark .wsmenu-list > li > a.h-link:hover { color: #1d222f!important; } .dark-menu .wsmenu-list > li > a.h-link:hover { color: #ccc!important; } .theme--dark .navbar-light .wsmenu-list > li > a.h-link:hover, .theme--dark .navbar-dark .wsmenu-list > li > a.h-link:hover { color: #ccc!important; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: #363636!important; } .dark-menu .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover, .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: #ccc!important; } .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: #aaa!important; } .wsmenu > .wsmenu-list.nav-gold > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-gold > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-gold > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: #af8855!important; } .wsmenu > .wsmenu-list.nav-magenta > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-magenta > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-magenta > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: #b25996!important; } .wsmenu > .wsmenu-list.nav-red > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list.nav-red > li > .wsmegamenu.w-75 ul.link-list > li > a:hover, .wsmenu > .wsmenu-list.nav-red > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: #e55d42!important; } /*------------------------------------------*/ /* HIDDEN NAVBAR SCROLL /*------------------------------------------*/ .hidden-nav .wsmainfull.scroll { margin-top: 0; } /*------------------------------------------*/ /* NAVBAR WHITE SCROLL /*------------------------------------------*/ .tra-menu.white-scroll .wsmainfull.scroll, .white-menu.white-scroll .wsmainfull.scroll { padding: 0; background-color: #fff!important; -webkit-box-shadow: 0 2px 3px rgba(96, 96, 96, .1); -moz-box-shadow: 0 2px 3px rgba(96, 96, 96, .1); box-shadow: 0 2px 3px rgba(96, 96, 96, .1); } .theme--dark .tra-menu.white-scroll .wsmainfull.scroll, .theme--dark .white-menu.white-scroll .wsmainfull.scroll { background-color: #151515!important; -webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, .1); -moz-box-shadow: 0 2px 3px rgba(10, 10, 10, .1); box-shadow: 0 2px 3px rgba(10, 10, 10, .1); } .tra-menu.navbar-dark.white-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link, .tra-menu.navbar-light.white-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link { color: #353f4f; } .theme--dark .tra-menu.navbar-dark.white-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link, .theme--dark .tra-menu.navbar-light.white-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link { color: #fff; } .navbar-light.white-scroll .scroll .wsmenu-list > li > a.h-link:hover { color: #1c1c1c!important; } .theme--dark .navbar-light.white-scroll .scroll .wsmenu-list > li > a.h-link:hover { color: #ccc!important; } /*------------------------------------------*/ /* NAVBAR BLACK SCROLL /*------------------------------------------*/ .tra-menu.black-scroll .wsmainfull.scroll, .dark-menu.black-scroll .wsmainfull.scroll { padding: 0; background-color: #151515!important; -webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, .1); -moz-box-shadow: 0 2px 3px rgba(10, 10, 10, .1); box-shadow: 0 2px 3px rgba(10, 10, 10, .1); } .tra-menu.navbar-dark.black-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link { color: #fff; } .tra-menu.navbar-dark.black-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link:hover { color: #ccc!important; } /*------------------------------------------*/ /* WHITE SCROLL BUTTONS /*------------------------------------------*/ .white-scroll .scroll .btn--tra-white { color: #353f4f!important; border-color: #353f4f!important; } .theme--dark .white-scroll .scroll .btn--tra-white { color: #fff!important; border-color: #fff!important; } .theme--dark .white-scroll .scroll .hover--white:hover { color: #363636!important; background-color: #fff!important; border-color: #fff!important; } /*------------------------------------------*/ /* BLACK SCROLL BUTTONS /*------------------------------------------*/ .black-scroll .scroll .btn--tra-black { color: #fff!important; border-color: #fff!important; } /*------------------------------------------*/ /* LOGO IMAGE /*------------------------------------------*/ .logo-white, .logo-black { display: block; } .navbar-light .logo-black, .navbar-dark .logo-white, .theme--dark .navbar-dark .logo-black, .tra-menu.navbar-light .scroll .logo-white, .tra-menu.navbar-dark.black-scroll .scroll .logo-black, .theme--dark .tra-menu.navbar-light .scroll .logo-black { display: none; } .theme--dark .navbar-dark .logo-white, .tra-menu.navbar-light .scroll .logo-black, .tra-menu.navbar-dark.black-scroll .scroll .logo-white, .theme--dark .tra-menu.navbar-light .scroll .logo-white { display: block; } /* ========================================================================== 05. HERO ========================================================================== */ .hero-section, .hero-section .container { position: relative; z-index: 3; } /*------------------------------------------*/ /* HERO SLIDER /*------------------------------------------*/ .slider { position: relative; max-width: 100%; height: 550px; } .slider .slides { margin: 0; height: 550px; } .slider .slides li { opacity: 0; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: inherit; overflow: hidden; } .slider .slides li img { height: 100%; width: 100%; background-size: cover; background-position: center; } .slider .slides li .caption { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } .slider .slides li.active { z-index: 2; } /*------------------------------------------*/ /* Slider Animation /*------------------------------------------*/ .center-align { text-align: center; } /*------------------------------------------*/ /* Slider Indicators /*------------------------------------------*/ .slider .indicators { position: absolute; text-align: center; left: 0; right: 0; bottom: 20px; margin: 0; z-index: 98; } .slider .indicators .indicator-item { display: inline-block; position: relative; cursor: pointer; background-color: transparent; height: 10px; width: 10px; border: 2px solid #fff; margin: 0 7px; opacity: .5; -webkit-transition: background-color .3s; transition: background-color .3s; border-radius: 50%; } .slider .indicators .indicator-item.active { background-color: #fff; opacity: .65; } /*------------------------------------------*/ /* HERO SLIDESHOW /*------------------------------------------*/ .slideshow { overflow: hidden; position: relative; width: 100%; height: 650px; z-index: 1; } .slideshow .slideshow-inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .slideshow .slides { position: absolute; top: 0; left: 0; width: 100%; height: 650px; z-index: 1; } .slideshow .slide { display: none; overflow: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; transition: opacity 0.3s ease; } .slideshow .slide.is-active { display: block; } .slideshow .slide.is-loaded { opacity: 1; } .slideshow .slide .image-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-repeat: no-repeat; background-position: center center; background-size: cover; } .slideshow .slide .image { width: 100%; object-fit: cover; height: 100%; } .slideshow .slide-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; text-align: center; display: flex; justify-content: center; align-items: center; } /*------------------------------------------*/ /* HERO-1 /*------------------------------------------*/ #hero-1 .caption { margin-top: 60px; } #hero-1 .caption h2 { font-size: 5.75rem; font-weight: 400; text-transform: uppercase; margin-bottom: 0; } #hero-1 .caption h5 { font-weight: 400; text-transform: uppercase; letter-spacing: 2px; margin-top: 15px; } #hero-1 .caption .btn { margin-top: 40px; } /*------------------------------------------*/ /* HERO-2 /*------------------------------------------*/ #hero-2 { padding-top: 140px; } /*------------------------------------------*/ /* HERO-3 /*------------------------------------------*/ #hero-3 { margin-top: 75px; padding-top: 120px; } #hero-3:after { background-color: #f2f2f0; position: absolute; width: 100%; height: 86%; top: 0; content: ''; z-index: -1; } .theme--dark #hero-3:after { background-color: #1c1d1e; } .hero-3-txt { text-align: center; margin-bottom: 70px; padding: 0 14%; } .hero-3-txt h2 { font-size: 3.85rem; margin-bottom: 30px; } /*------------------------------------------*/ /* HERO-4 /*------------------------------------------*/ #hero-4 { padding-top: 170px; } #hero-4-1 { padding: 0 14% 0 8%; } #hero-4-1 h4, #hero-4-1 h3 { line-height: 1.35; margin-bottom: 30px; } /*------------------------------------------*/ /* HERO-5 /*------------------------------------------*/ #hero-5 { text-align: center; padding-top: 80px; } .hero-logo { margin-bottom: 40px; } .hero-logo img { width: auto; max-width: inherit; max-height: 92px; } .hero-logo img.hero-logo-w, .theme--dark .hero-logo img.hero-logo-b { display: none; } .theme--dark .hero-logo img.hero-logo-w { display: inline-block; } .hero-5-txt h2 { font-size: 4rem; margin-bottom: 18px; } .hero-5-txt p { font-size: 1.4rem; margin-bottom: 32px; } .hero-5-img { margin-top: 70px; } .hero-5-img .col { padding: 0 5px; } #hero-5-1, #hero-5-3 { margin-top: 30px; } /*------------------------------------------*/ /* HERO-6 /*------------------------------------------*/ #hero-6 .caption { margin-top: 50px; } #hero-6 .caption h2 { font-family: 'Jost', sans-serif; font-size: 8.5rem; line-height: 1; font-weight: 600; letter-spacing: 6px; text-transform: uppercase; margin-bottom: 20px; } #hero-6 .caption p { font-size: 1.35rem; padding: 0 10%; margin-bottom: 35px; } /*------------------------------------------*/ /* HERO-8 /*------------------------------------------*/ #hero-7 { padding-top: 200px; } .hero-7-txt { padding-right: 5%; } .hero-7-txt h2 { font-size: 4.35rem; margin-bottom: 15px; } .hero-7-txt p { font-size: 1.325rem; margin-bottom: 0; } .hero-7-btn { position: relative; z-index: 2; } #hero-7 .col-md-5, #hero-8 .col-md-7 { margin: 0; padding: 0; } .hero-7-img { margin-top: 70px; } .hero-7-img img { width: auto; max-width: inherit; max-height: 480px; } #hero-7 .tra-header { top: 22%; opacity: .06; z-index: -1; } #hero-7 .tra-header h2 { font-size: 11rem; } /*------------------------------------------*/ /* HERO-8 /*------------------------------------------*/ #hero-8 .slider { margin-top: 80px; } /*------------------------------------------*/ /* HERO-9 /*------------------------------------------*/ #hero-9 { text-align: center; position: relative; background-image: url(../images/hero-9.jpg); padding-top: 220px; padding-bottom: 150px; } #hero-91 .container { position: relative; } .hero-9-txt h2 { font-size: 4.65rem; margin-bottom: 35px; } .tra-header { width: 100%; position: absolute; top: 23%; left: 0; text-align: center; opacity: .15; } .tra-header h2 { font-family: 'Alex Brush', cursive; font-size: 12rem; } /*------------------------------------------*/ /* HERO-10 /*------------------------------------------*/ #hero-10 { position: relative; /* background-image: url(../images/hero-10.jpg); */ padding-top: 200px; padding-bottom: 100px; } .hero-10-txt h2 { font-size: 5rem; letter-spacing: -2px; margin-bottom: 14px; } .hero-10-txt p { font-size: 1.25rem; padding-right: 20%; margin-bottom: 35px; } .hero-10-schedule { margin-right: 10px; } .hero-10-schedule h5 { margin-bottom: 20px; } .hero-10-schedule p { line-height: 1; margin-bottom: 12px; } .hero-10-schedule p span { font-weight: 600; margin-left: 15px; } /*------------------------------------------*/ /* HERO-11 /*------------------------------------------*/ #hero-11 { position: relative; background-image: url(../images/hero-11.jpg); padding-top: 210px; padding-bottom: 120px; } .hero-11-txt h5 { font-family: 'Jost', sans-serif; font-size: 1rem; line-height: 1; font-weight: 400; text-transform: uppercase; letter-spacing: 4px; margin-bottom: 40px; } .hero-11-txt h2 { font-family: 'Jost', sans-serif; font-size: 6rem; line-height: 1.1; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px; } .hero-11-txt p { font-size: 1.3rem; padding-right: 10%; margin-bottom: 35px; } /*------------------------------------------*/ /* HERO-12 /*------------------------------------------*/ #hero-12 { margin-top: 75px; } #hero-12 .caption { margin-top: 15px; } #hero-12 .caption span { display: block; font-size: 1rem; line-height: 1; font-weight: 500; text-transform: uppercase; letter-spacing: 8px; margin-bottom: 50px; } #hero-12 .caption h2 { font-size: 5rem; margin-bottom: 35px; } /* ========================================================================== 06. ABOUT ========================================================================== */ .about-8:after { position: absolute; width: 100%; height: 92%; top: 4%; content: ''; z-index: -1; } .about-3-wrapper { margin: 0 -5%; } .abox-3.txt-block { padding: 60px 60px 70px; } .about-4 .txt-block { position: relative; padding: 90px; z-index: 3; } .about-5 .txt-block { text-align: center; padding: 0 5%; } .a6-txt { text-align: center; padding: 35px 30px 40px; margin-bottom: 30px; } #a8-1 { position: relative; margin-bottom: -70px; } #a8-3 { position: relative; margin-top: -70px; } .about-8-txt.left-column { position: relative; padding-left: 50px; padding-right: 100px; } .about-8-txt.right-column { position: relative; padding-left: 100px; padding-right: 50px; } .about-8-txt.right-column:before { position: absolute; display: inline-block; content: ""; height: 2px; background-color: #6c757d; width: 110px; left: -40px; top: 20px; } .about-8-txt.left-column:after { position: absolute; display: inline-block; content: ""; height: 2px; background-color: #6c757d; width: 210px; right: -40px; top: 25px; } /*------------------------------------------*/ /* ABOUT TYPOGRAPHY /*------------------------------------------*/ .about-1 .txt-block p, .about-2 .txt-block p { padding: 0 3%; } .about-6-txt h4 { line-height: 1.35; margin-bottom: 8px; } .about-6-txt p { margin-bottom: 3px; } .about-6-txt p a { font-size: 1.1875rem; font-weight: 500; margin-bottom: 3px; } .about-6-txt p.mb-0 { margin-bottom: 0; } .about-5 .txt-block .btn { margin-top: 15px; } .about-8-txt h4, .about-8-txt h3 { margin-bottom: 14px; } .about-8-txt p { margin-bottom: 25px; } /*------------------------------------------*/ /* ABOUT IMAGES /*------------------------------------------*/ #ab-4-1 { position: relative; margin: 100px -70px 0 0; z-index: 4; } #ab-4-2 { position: relative; margin: 60px 0 0 -70px; z-index: 4; } #ab-5-1 { position: relative; margin: 80px 30px 0 -150px; z-index: 4; } #ab-5-2 { position: relative; margin: 80px 20% 0 30%; z-index: 4; } #ab-5-3 { position: relative; margin: 140px -100px 0 20px; z-index: 4; } .about-8-img.left-column { padding-right: 50px; } .about-8-img.right-column { padding-left: 50px; } /* ========================================================================== 07. SERVICES ========================================================================== */ .sbox-4 .section-id, .sbox-5 .section-id { font-size: 0.7rem; margin-bottom: 12px; } /*------------------------------------------*/ /* SERVICE BOX /*------------------------------------------*/ .sbox-5-wrapper .rows-2 .sb-1, .sbox-5-wrapper .rows-2 .sb-2, .sbox-5-wrapper .rows-2 .sb-3 { margin-bottom: 50px; } /*------------------------------------------*/ /* SERVICE BOX ICON /*------------------------------------------*/ .sbox-ico { margin-bottom: 20px; } .sbox-4 h6, .sbox-4 h5, .sbox-5 h6, .sbox-5 h5, .sbox-txt h6, .sbox-txt h5, .sbox-txt h4 { margin-bottom: 10px; } .sbox-3 p { color: #363636; font-size: 1.0625rem; line-height: 1; font-weight: 500; text-transform: uppercase; margin-top: 20px; margin-bottom: 0; } .theme--dark .sbox-3 p { color: #fff; } .sbox-txt p { margin-bottom: 0; } .services-section .more-btn { margin-top: 60px; } .theme--dark .services-section .sbox-ico span { color: #d8d8d8!important; } .theme--dark .services-section .sbox-ico span.color--gold { color: #af8855!important; } .theme--dark .services-section .sbox-ico span.color--magenta { color: #b25996!important; } /*------------------------------------------*/ /* SBOX LINK /*------------------------------------------*/ h4.sbox-link a, h5.sbox-link a { position: relative; color: #201e29; padding-bottom: 10px; text-decoration: none; } h4.sbox-link a:after, h5.sbox-link a:after { content: ''; background-color: #201e29; width: 20%; height: 2.5px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); opacity: 0; -webkit-transition: .3s all ease-in; -moz-transition: .3s all ease-in; -o-transition: .3s all ease-in; transition: .3s all ease-in; } .sbox-4:hover h4.sbox-link a:after, .sbox-5:hover h4.sbox-link a:after, .sbox-4:hover h5.sbox-link a:after, .sbox-5:hover h5.sbox-link a:after { width: 100%; opacity: 1; } /*------------------------------------------*/ /* SBOX IMAGE /*------------------------------------------*/ .sbox-4-img, .sbox-5-img { margin-bottom: 30px; } .sbox-4 .item-overlay, .sbox-5 .item-overlay { background: rgba(20, 20, 20, .3); } .sbox-4:hover img, .sbox-5:hover img { transform: scale(1.05); -ms-transform: scale(1.05); -webkit-transform: scale(1.05); -o-transform: scale(1.05); -moz-transform: scale(1.05); } .sbox-4:hover .item-overlay, .sbox-5:hover .item-overlay { opacity: 1; -moz-opacity: 1; bottom: 0; } /* ========================================================================== 08. CONTENT ========================================================================== */ .ct-05 .container:after, .ct-06 .container:after { position: absolute; content: ''; height: 100%; top: 0; } .ct-05 .container:after { width: 85%; left: 0; z-index: -1; } .ct-06 .container:after { width: 85%; left: 15%; z-index: -1; } .ct-11-wrapper { width: 100%; height: 480px; } .ct-12 { width: 100%; height: 550px; } /*------------------------------------------*/ /* TEXT BLOCK /*------------------------------------------*/ .ct-01 .txt-block { padding-right: 60px; } .ct-02 .txt-block { padding-left: 60px; } .ct-03 .left-column { padding-right: 15px; } .ct-03 .left-column .ct-03-txt { padding-right: 45px; } .ct-03 .right-column { padding-left: 15px; } .ct-05 .txt-block { padding: 130px 25px 130px 60px; } .ct-06 .txt-block { padding: 130px 45px 130px 40px; } .ct-07 .txt-block { padding: 0 40px 0 80px; } .ct-08 .txt-block { padding: 0 70px 0 50px; } .ct-table .left-column { padding-right: 25px; } .ct-table .right-column { padding-left: 25px; } .ct-13 .txt-block { padding: 30px 40px; margin-left: 20px; margin-right: 30px; } /*------------------------------------------*/ /* TEXT BLOCK TYPOGRAPHY /*------------------------------------------*/ .ct-table h3, .ct-table h2, .txt-block h2 { margin-bottom: 20px; } .ct-09-txt h3, .ct-09-txt h2 { margin-top: 50px; margin-bottom: 0; } .ct-13 .txt-block h4 { margin-bottom: 20px; } p.ct-09-address { color: #363636; font-weight: 400; margin-top: 10px; margin-bottom: 10px; } .theme--dark p.ct-09-address { color: #fff; } .txt-block .btn { margin-top: 30px; } /*------------------------------------------*/ /* ADVANTAGES LIST /*------------------------------------------*/ .advantages li { width: auto!important; display: inline-block!important; vertical-align: top; clear: none !important; } .advantages-links-divider { position: relative; top: 6px; } .advantages li p { display: inline-block; float: left; margin-bottom: 0; } .advantages li p.mr-20 { position: relative; top: 1px; } .advantages.ico-30 li p span { position: relative; right: 1px; } .advantages.ico-30 [class*="flaticon-"]:before, .advantages.ico-30 [class*="flaticon-"]:after { font-size: 1.4rem; } .advantages li p a { font-weight: 400; text-decoration: underline; } .ct-09-txt .advantages p a { color: #363636; font-weight: 500; } .theme--dark .ct-09-txt .advantages p a { color: #ccc; } .advantages li p a:hover { text-decoration: underline; } /*------------------------------------------*/ /* CONTENT TABLES /*------------------------------------------*/ .content-section .table>:not(caption)>*>* { background-color: transparent; } .txt-table h4, .txt-table h3 { margin-bottom: 25px; } .txt-table table { margin-bottom: 0; } .txt-table .table td, .txt-table .table th { padding: 14px 0; border-top: none; border-bottom: 1px dashed #aaa; } .theme--dark .txt-table .table td, .theme--dark .txt-table .table th { border-bottom: 1px dashed #666; } .ct-table .txt-table .table td { font-size: 1.125rem!important; } .txt-table .table .last-tr td, .txt-table .table .last-tr th { border-bottom: none; } td.text-end { color: #363636; font-weight: 600; } .ct-table .txt-table .table td.text-end { font-size: 1.0625rem!important; } .theme--dark tr td, .theme--dark td.text-end, .content-section .color--white .table td { color: #fff; } /*------------------------------------------*/ /* ACCORDION /*------------------------------------------*/ .txt-block .accordion.mt-5 { margin-top: 35px!important; } .txt-block .accordion .accordion-item { background-color: transparent; padding: 10px 0; border: none; border-radius: 0 0; } .txt-block .accordion .accordion-thumb { position: relative; cursor: pointer; margin: 0; padding-bottom: 18px; border-bottom: 1px solid #ccc; } .bg--black .txt-block .accordion .accordion-thumb, .theme--dark .txt-block .accordion .accordion-thumb { border-bottom: 1px solid #555; } .txt-block .accordion .accordion-item .accordion-thumb:after, .txt-block .accordion .accordion-item.is-active .accordion-thumb:after { color: #363636; font-family: Flaticon; position: absolute; font-weight: 300; } .bg--black .txt-block .accordion .accordion-item .accordion-thumb:after, .theme--dark .txt-block .accordion .accordion-item .accordion-thumb:after, .bg--black .txt-block .accordion .accordion-item.is-active .accordion-thumb:after, .theme--dark .txt-block .accordion .accordion-item.is-active .accordion-thumb:after { color: #fff; } .txt-block .accordion .accordion-item .accordion-thumb:after { content: "\f1a2"; font-size: 1rem; top: -3px; right: 0; } .txt-block .accordion .accordion-item.is-active .accordion-thumb:after { content: "\f1a3"; } .txt-block .accordion .accordion-thumb p { color: #363636; font-size: 1.25rem; line-height: 1; font-weight: 600; margin-bottom: 0; } .bg--black .txt-block .accordion .accordion-thumb p, .theme--dark .txt-block .accordion .accordion-thumb p { color: #fff; } .txt-block .accordion .accordion-panel { margin: 0; padding: 18px 0 10px 0; display: none; } .bg--black .txt-block .accordion .accordion-panel p, .theme--dark .txt-block .accordion .accordion-panel p { color: #ccc; } /*------------------------------------------*/ /* IMG BLOCK IMAGE /*------------------------------------------*/ .ct-04 .img-block.left-column { padding-right: 50px; } .ct-04 .img-block.right-column { padding-left: 50px; } .ct-09 .left-column:hover img, .ct-09 .right-column:hover img { transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -moz-transform: scale(1.1); } /* ========================================================================== 09. GALLERY ========================================================================== */ #gallery-2 .col, #gallery-2 .row.row-cols-lg-4 { padding: 0 8px; } #gallery-3 .col { padding: 0 10px; } #img-2-1, #img-2-2, #img-2-3, #img-2-4 { margin-bottom: 16px; } #gallery-3 .section-title { text-align: center; margin-bottom: 50px; } #gallery-3 .section-title h3 { line-height: 1; } #gallery-1 .gallery-image { margin-bottom: 30px; } /*------------------------------------------*/ /* GALLERY-4 IMAGES /*------------------------------------------*/ #img-4-1 { margin-top: 450px; padding-right: 40px; } #img-4-2 { position: relative; margin-top: 50px; padding-right: 60px; } #img-4-3 { margin-bottom: 70px; } #img-4-4 { position: relative; padding-right: 30px; } #img-4-2 .hover-overlay, #img-4-4 .hover-overlay { position: relative; z-index: 6; } #img-4-5 { margin-top: 110px; padding-left: 40px; } #img-4-6 { margin-top: 90px; padding-left: 30px; padding-right: 15px; } /*------------------------------------------*/ /* GALLERY-4 IMAGE SHAPE /*------------------------------------------*/ .img-4-2-shape { position: absolute; top: 40px; right: 40px; width: 260px; height: 540px; z-index: 3; } .img-4-4-shape { position: absolute; top: 25px; right: 10px; width: 260px; height: 280px; z-index: 3; } /*------------------------------------------*/ /* IMAGE DESCRIPTION /*------------------------------------------*/ .image-data { text-align: center; position: absolute; bottom: 0; left: 0; z-index: 20; width: 100%; height: 100%; opacity: 0; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .gallery-video.image-data { opacity: 1; bottom: 0; left: 5px; } .image-data { bottom: 30px; } .gallery-link { width: 100%; position: absolute; top: 50%; transform: translateY(-50%); } /*------------------------------------------*/ /* Image Hover Effect /*------------------------------------------*/ .gallery-image:hover img { transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -moz-transform: scale(1.1); } .gallery-image:hover .image-data, .gallery-image:hover .item-overlay { opacity: 1; -moz-opacity: 1; bottom: 0; } /*------------------------------------------*/ /* MORE BUTTON /*------------------------------------------*/ .gallery-section .more-btn { margin-top: 30px; } #gallery-1.gallery-section .more-btn { margin-top: 50px; } #gallery-4.gallery-section .more-btn { margin-top: 70px; } /* ========================================================================== 10. TESTIMONIALS =========================================================================== */ .reviews-3-wrapper:after { position: absolute; content: ''; z-index: -1; width: 86%; height: 80%; top: 13%; left: 7%; } /*------------------------------------------*/ /* TESTIMONIAL /*------------------------------------------*/ .review-1 { text-align: center; } .review-1-txt { border: 1px solid #eee; padding: 60px 35px 40px; margin: 0 10px 30px; overflow: visible; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; } .review-2 { text-align: center; padding: 0 15px; margin-bottom: 30px; } .review-3 { padding: 45px 40px 35px; -webkit-box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .08); -moz-box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .08); box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .08); } #rw-3-1, #rw-3-2 { margin-bottom: 20px; } #rw-3-5, #rw-3-6 { margin-top: 20px; } /*------------------------------------------*/ /* TESTIMONIAL DATA /*------------------------------------------*/ .review-avatar { position: relative; } .review-1 .review-avatar { display: inline-block; margin: 0 auto -40px; } .review-3 .review-avatar { margin: 0 auto; float: left; } .review-avatar img, .owl-item .review-avatar img { width: 86px; height: 86px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; } .review-3 .review-avatar img { width: 64px; height: 64px; } /*------------------------------------------*/ /* RS LOGO /*------------------------------------------*/ .rs-logo { text-align: center; position: absolute; right: -14px; bottom: 0px; background-color: #fff; width: 40px; height: 40px; padding: 7px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; -webkit-box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .08); -moz-box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .08); box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .08); } .review-3 .rs-logo { width: 32px; height: 32px; padding: 0!important; } .review-1 .rs-logo img { width: 26px; height: 26px; } .review-3 .rs-logo img { width: 20px; height: 20px; } /*------------------------------------------*/ /* TESTIMONIAL AUTHOR /*------------------------------------------*/ .review-3 .author-data { margin-top: 25px; } .review-2 .review-author { margin-top: 15px; } .review-3 .review-author { position: relative; display: inline-block; text-align: left; padding: 0 0 0 25px; } .review-author p { color: #363636; font-size: 1.25rem; font-weight: 500; margin-bottom: 2px; } .theme--dark .review-author p { color: #fff; } .review-3 .review-txt .review-author p { margin-bottom: 0; } .review-author span { display: block; line-height: 1; font-weight: 400; margin-bottom: 0; } /*------------------------------------------*/ /* TESTIMONIAL RATING /*------------------------------------------*/ .review-1 .star-rating { margin-top: 14px; margin-bottom: 10px; } .review-2 .star-rating { margin-bottom: 10px; } .review-3 .star-rating { margin-bottom: 5px; } .reviews-section .star-rating span { position: relative; } .review-2 .star-rating span { padding: 0 1px; } .reviews-section .star-rating.ico-15 [class^="flaticon-"]:before, .reviews-section .star-rating.ico-15 [class^="flaticon-"]:after { font-size: 1.025rem; } .reviews-section .star-rating.ico-20 [class^="flaticon-"]:before, .reviews-section .star-rating.ico-20 [class^="flaticon-"]:after { font-size: 1.125rem; } /*------------------------------------------*/ /* TESTIMONIAL TEXT /*------------------------------------------*/ .review-3 .review-ico { position: relative; margin-top: -25px; margin-left: -10px; opacity: .1; } .review-3 .review-txt { position: relative; margin-top: -45px; } .review-3 .review-txt h6 { margin-bottom: 15px; } .review-1-txt p { margin-bottom: 0; } /*------------------------------------------*/ /* TESTIMONIAL CAROUSEL DOTS /*------------------------------------------*/ .reviews-section button { background-color: transparent; border: none; padding: 0 2px; } .owl-theme .owl-dots .owl-dot span { background-color: #6f6f6f; margin: 0 7px; } .theme--dark .owl-theme .owl-dots .owl-dot span { background-color: #333; } .owl-theme .owl-dots .owl-dot:hover span, .owl-theme .owl-dots .owl-dot.active span { background: #363636; } .theme--dark .owl-theme .owl-dots .owl-dot:hover span, .theme--dark .owl-theme .owl-dots .owl-dot.active span { background: #777; } .owl-dots button:focus { outline: none; text-decoration: none; } /* ========================================================================== 11. GIFT CARDS =========================================================================== */ /*------------------------------------------*/ /* GIFT CARD /*------------------------------------------*/ .gift-card { text-align: center; padding: 60px 30px; border: 2px solid #555; } .theme--dark .gift-card { background-color: #1c1d1e; border: 2px solid #1c1d1e; } .gift-card h4 { margin-bottom: 25px; } .gift-card span { font-family: 'Jost', sans-serif; color: #363636; font-size: 4.55rem; line-height: 1; font-weight: 700; letter-spacing: -2px; } .gift-card sup { font-family: 'Jost', sans-serif; color: #363636; font-size: 3.35rem; font-weight: 500; top: -9px; right: 3px; } .gift-card p { margin-top: 15px; margin-bottom: 30px; } .theme--dark .gift-card span, .theme--dark .gift-card sup { color: #ccc; } /* ========================================================================== 12. BRANDS =========================================================================== */ /*------------------------------------------*/ /* BRANDS SECTION TITLE /*------------------------------------------*/ .brands-title { text-align: center; padding: 0 5%; } .brands-title h5 { margin-bottom: 0; } .brands-title p { color: #363636; font-size: 0.95rem; line-height: 1; font-weight: 600; text-transform: uppercase; margin-bottom: 0; } /*------------------------------------------*/ /* BRANDS LOGO IMAGE /*------------------------------------------*/ .brand-logo { overflow: hidden; position: relative; top: 0; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } #brands-1 .brands-carousel-5 .brand-logo { padding: 0 22px; } #brands-1 .brands-carousel-6 .brand-logo { padding: 0 16px; } #brands-2 .brand-logo { padding: 0 12px; } .hero-section .owl-dots, .brands-section .owl-dots { display: none; } /* ========================================================================== 13. TEAM =========================================================================== */ .team-member .section-id { font-size: 0.7rem; margin-bottom: 18px; } .category-title h2 { line-height: 1; } #team-3 hr { border-color: #757575; margin: 40px 0 100px; } .theme--dark #team-3 hr { border-color: #aaa; } /*------------------------------------------*/ /* TEAM MEMBER /*------------------------------------------*/ .team-member { position: relative; text-align: center; } .team-member { margin-bottom: 60px; } /*------------------------------------------*/ /* TEAM MEMBER PHOTO /*------------------------------------------*/ .team-member-photo { position: relative; text-align: center; overflow: hidden; } /*------------------------------------------*/ /* TEAM MEMBER TYPOGRAPHY /*------------------------------------------*/ .team-member-data { margin-top: 30px; } .team-member-data h5 { line-height: 1; margin-bottom: 16px; } .team-member-data h5 a { color: #363636; } .theme--dark .team-member-data h5 a { color: #fff; } #team-3 .team-member-data h5 { margin-bottom: 22px; } .team-member .item-overlay { background: rgba(20, 20, 20, .4); } /*------------------------------------------*/ /* Team Member Social Links /*------------------------------------------*/ .tm-social li { width: auto!important; display: inline-block!important; vertical-align: top; clear: none !important; margin: 0 10px; padding: 0; } .tm-social span { margin-bottom: 0; } .tm-social a { color: #656565; display: block; text-decoration: none; } /*------------------------------------------*/ /* Team Member Hover /*------------------------------------------*/ .team-member:hover img { transform: scale(1.05); -ms-transform: scale(1.05); -webkit-transform: scale(1.05); -o-transform: scale(1.05); -moz-transform: scale(1.05); } .team-member:hover .item-overlay { opacity: 1; -moz-opacity: 1; } /* ========================================================================== 14. ARTIST DETAILS ========================================================================== */ .artist-details { margin-top: 80px; } .artist-photo { padding-right: 20px; } .artist-bio { padding-left: 30px; } .artist-data { margin-top: 30px; margin-bottom: 20px; } .artist-bio .tm-social { margin-bottom: 25px; } .artist-bio .tm-social li { margin: 0 16px 0 0; } .theme--dark .artist-bio .tm-social li span { color: #aaa!important; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .theme--dark .artist-bio .tm-social li:hover span { color: #f0f0f0!important; } .artist-data p { margin-bottom: 2px; } .artist-bio p span.sm-title { color: #363636; font-size: 0.9rem; text-transform: uppercase; font-weight: 600; } .artist-prices-list p { margin-bottom: 6px; } .artist-prices-list p span { color: #363636; font-weight: 500; } .theme--dark .artist-prices-list p span, .theme--dark .artist-bio p span.sm-title { color: #fff; } .artist-bio .booking-link { margin-top: 40px; } /* ========================================================================== 15. PRICING ========================================================================== */ /*------------------------------------------*/ /* PRICING WRAPPER /*------------------------------------------*/ .pricing-2-wrapper, .pricing-3-wrapper { position: relative; border: 1px solid #f5f5f5; padding: 55px 60px; z-index: 5; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .05); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .05); box-shadow: 0 5px 10px rgba(0, 0, 0, .05); } .p4-wrapper { padding: 90px 70px; overflow: hidden; } .pricing-4-table.left-column, .pricing-section .pricing-1-table.left-column { padding-right: 15px; } .pricing-section .pricing-5-table.left-column { padding-right: 20px; } .pricing-4-table.right-column, .pricing-section .pricing-1-table.right-column { padding-left: 15px; } .pricing-section .pricing-5-table.right-column { padding-left: 20px; } /*------------------------------------------*/ /* PRICING TITLES /*------------------------------------------*/ .pricing-title { line-height: 1; margin-bottom: 50px; } .pricing-4-title p { font-size: 1.3rem; margin-top: 10px; margin-bottom: 0; } .pricing-5-category.mb-4 { margin-bottom: 45px!important; } .pricing-5-category.mt-4 { margin-top: 55px!important; } .pricing-7-title { margin: 40px 0 30px; } #pb-7-1 { margin-right: 12px; } #pb-7-2 { margin-left: 6px; margin-right: 6px; } #pb-7-3 { margin-left: 12px; } /*------------------------------------------*/ /* PRICING LIST /*------------------------------------------*/ .pricing-list li { margin-bottom: 22px; } .pricing-5-table .pricing-list li { margin-bottom: 30px; } .pricing-list li:last-child, .pricing-4 .pricing-list li:last-child { margin-bottom: 0; } /*------------------------------------------*/ /* PRICING DETAILS /*------------------------------------------*/ .detail-price { margin: 0; display: table; } .price-name { position: relative; display: table-cell; width: 1%; white-space: nowrap; padding: 0 10px 0 0; } .price-dots { position: relative; display: table-cell; height: 3px; width: 98%; z-index: 1; background-image: radial-gradient(circle closest-side,#878889 99%,transparent 100%); background-position: 50% 100%; background-size: 5px 2px; background-repeat: repeat-x; } .theme--dark .price-dots { background-image: radial-gradient(circle closest-side,#666 99%,transparent 100%); } .price-number { display: table-cell; width: 1%; padding: 0 0 0 10px; white-space: nowrap; } .price-name p, .price-number p { color: #363636; position: relative; font-size: 1.2rem; line-height: 1; font-weight: 600; margin-bottom: 0; } .theme--dark .price-name p, .theme--dark .price-number p { color: #fff; } .price-number p { font-weight: 400; } .pricing-5 .price-name p, .pricing-5 .price-number p { font-size: 1.1875rem; } .pricing-7 .price-name p, .pricing-7 .price-number p { font-size: 1.15rem; } .pricing-4 .color--white .price-name p, .pricing-4 .color--white .price-number p { color: #fff; } .pricing-6-item p { font-size: 1rem; margin-bottom: 10px; } .pricing-6-item p.pricing-6-title { color: #363636; font-size: 1.2rem; font-weight: 600; padding: 0; margin-bottom: 2px; } .pricing-6-item p.pricing-6-number { color: #363636; font-size: 1.15rem; line-height: 1; font-weight: 500; margin-bottom: 0; } /*------------------------------------------*/ /* OLD PRICE /*------------------------------------------*/ .old-price { position: relative; font-size: 1.25rem; color: #aaa!important; text-decoration: line-through; font-weight: 400; top: 1px; margin-right: 10px; } /*------------------------------------------*/ /* Pricing Item Description /*------------------------------------------*/ .price-txt { margin-top: 6px; } .price-txt p { font-weight: 400; line-height: 1.4; margin-bottom: 0; } .pricing-4 .color--white .price-txt p { color: #e2e3e4; } .pricing-notice p { margin-bottom: 0; } /*------------------------------------------*/ /* PRICING IMAGE /*------------------------------------------*/ .pricing-2-img { margin-right: -60px; } .pricing-3-img { margin-left: -60px; } .pricing-6-img { margin-bottom: 25px; } .pricing-6-img .item-overlay { background: rgba(10, 10, 10, .1); } .pricing-6-item:hover img { transform: scale(1.05); -ms-transform: scale(1.05); -webkit-transform: scale(1.05); -o-transform: scale(1.05); -moz-transform: scale(1.05); } .pricing-6-item:hover .item-overlay { opacity: 1; -moz-opacity: 1; bottom: 0; } /* ========================================================================== 16. BANNER ========================================================================== */ .banner-1-wrapper { background-image: url(../images/banner-1.jpg); padding: 90px 80px; } .banner-1-wrapper.banner-1-hair { background-image: url(../images/banner-1-hair.jpg); } .banner-3 { background-image: url(../images/banner-3.html); padding-top: 90px; padding-bottom: 90px; } .banner-4 { background-image: url(../images/banner-4.html); padding-top: 100px; padding-bottom: 100px; } .banner-5-wrapper.bg--img, .banner-6-wrapper.bg--img { width: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: scroll!important; } .banner-5-wrapper.bg--img.bg--black, .banner-6-wrapper.bg--img.bg--black { background-image: url(../images/banner-bg-black.html); } .banner-5-wrapper.bg--img.bg--beige, .banner-6-wrapper.bg--img.bg--beige { background-image: url(../images/banner-bg-beige.html); } .banner-5 .left-column, .banner-6 .left-column { padding-right: 0; } .banner-5 .right-column, .banner-6 .right-column { padding-left: 0; } /*------------------------------------------*/ /* BANNER TEXT /*------------------------------------------*/ .banner-3-txt, .banner-4-txt, .banner-5-txt, .banner-6-txt { text-align: center; } .discount-data { display: inline-block; } .discount-title { margin-bottom: 5px; } .discount-digit { display: inline-block; float: left; } .discount-txt { text-align: center; display: inline-block; position: relative; top: 10px; left: 5px; } .banner-3 .discount-txt { top: 12px; } /*------------------------------------------*/ /* BANNER TYPOGRAPHY /*------------------------------------------*/ .banner-1-txt .section-id { margin-bottom: 35px; } .banner-2-txt .section-id { font-size: 1.1rem; margin-bottom: 40px; } .banner-1-txt h2, .banner-2-txt h2 { font-size: 5rem; line-height: 1; letter-spacing: -1px; margin-bottom: 6px; } .banner-1-txt h2 span, .banner-2-txt h2 span { font-family: 'Jost', sans-serif; font-size: 6rem; font-weight: 700; } .banner-1-txt h3, .banner-2-txt h3 { font-size: 3.35rem; letter-spacing: 1px; margin-bottom: 35px; } .discount-title h5 { font-family: 'Jost', sans-serif; font-size: 2.25rem; line-height: 1.2; font-weight: 400; text-transform: uppercase; letter-spacing: 1.5px; } .discount-digit h2 { font-family: 'Jost', sans-serif; font-size: 9.35rem; line-height: 1; font-weight: 700; letter-spacing: -6px; margin-bottom: 0; } .banner-3 .discount-digit h2 { font-size: 11rem; } .discount-txt h2 { font-family: 'Jost', sans-serif; font-size: 5.4rem; line-height: 1; font-weight: 600; letter-spacing: -5px; } .banner-3 .discount-txt h2 { font-size: 6.35rem; } .discount-txt h3 { font-family: 'Jost', sans-serif; font-size: 2.35rem; line-height: 1; font-weight: 700; letter-spacing: -1px; } .banner-3 .discount-txt h3 { font-size: 2.85rem; } .discount-description h4 { font-family: 'Jost', sans-serif; font-size: 1.85rem; line-height: 1; font-weight: 400; text-transform: uppercase; letter-spacing: 1.5px; margin-top: 10px; margin-bottom: 15px; } .discount-description p { padding: 0 15%; margin-bottom: 20px; } .discount-link p { margin-top: 15px; margin-bottom: 0; } .banner-4-txt h5 { font-family: 'Jost', sans-serif; font-size: 1.625rem; line-height: 1; font-weight: 400; text-transform: uppercase; letter-spacing: 6px; margin-bottom: 35px; } .banner-4-txt h3 { font-family: 'Jost', sans-serif; font-size: 5.05rem; line-height: 1; font-weight: 400; text-transform: uppercase; letter-spacing: 12px; margin-bottom: 2px; } .banner-4-txt h2 { font-family: 'Jost', sans-serif; font-size: 8.25rem; line-height: 1; font-weight: 600; text-transform: uppercase; letter-spacing: -2px; margin-bottom: 35px; } /* ========================================================================== 17. FAQs =========================================================================== */ .questions-wrapper hr { margin-top: 40px; margin-bottom: 40px; } .question .col-lg-6 h5 { line-height: 1.4; } /* ========================================================================== 18. NEWSLETTER ========================================================================== */ .newsletter-wrapper { padding: 80px 0 60px; } .newsletter-wrapper.bg--img { background: url(../images/newsletter.jpg); width: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: scroll!important; } #newsletter-2 { padding-top: 80px; padding-bottom: 50px; } #newsletter-1 .newsletter-form { padding: 0 14%; } #newsletter-2 .newsletter-form { padding: 0 5%; } /*------------------------------------------*/ /* NEWSLETTER TITLE /*------------------------------------------*/ .newsletter-section .section-title { margin-bottom: 40px; } .newsletter-section .section-title p { font-size: 1.15rem; margin-top: 20px; margin-bottom: 0; } /*------------------------------------------*/ /* Newsletter Form Input /*------------------------------------------*/ .newsletter-section .form-control { height: 52px; background-color: transparent; border: none; border-bottom: 1px solid #6f6f6f; color: #363636; font-size: 1.1875rem; padding: 0 8px; box-shadow: none; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .newsletter-section .bg--img .form-control { border-bottom: 1px solid #fff; color: #fff; } .newsletter-section .input-group > .custom-select:not(:last-child), .newsletter-section .input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } /*------------------------------------------*/ /* Newsletter Form Input Focus /*------------------------------------------*/ .newsletter-section .form-control:focus { border-color: #363636; outline: 0; box-shadow: none; } .newsletter-section .bg--img .form-control:focus { border-color: #f5f6f7; } /*------------------------------------------*/ /* Newsletter Form Input Placeholder /*------------------------------------------*/ .newsletter-section .form-control::-moz-placeholder { color: #6f6f6f; } .newsletter-section .form-control:-ms-input-placeholder { color: #6f6f6f; } .newsletter-section .form-control::-webkit-input-placeholder { color: #6f6f6f; } .newsletter-section .bg--img .form-control::-moz-placeholder { color: #fff; } .newsletter-section .bg--img .form-control:-ms-input-placeholder { color: #fff; } .newsletter-section .bg--img .form-control::-webkit-input-placeholder { color: #fff; } /*------------------------------------------*/ /* Newsletter Form Button /*------------------------------------------*/ .newsletter-section .btn { width: 100%; height: 52px; padding-left: 35px; padding-right: 35px; letter-spacing: 2px; margin-left: 15px; } /*------------------------------------------*/ /* Newsletter Form Notification /*------------------------------------------*/ .newsletter-section .form-notification { color: #262b2f; font-size: 1.0625rem; font-weight: 400; line-height: 1; margin-top: 25px; } .newsletter-section .form-notification.valid, .newsletter-section .form-notification.error { color: #fc2f4b; } .newsletter-section .newsletter-form.valid { color: #0fbc49; } /* ========================================================================== 19. BLOG ========================================================================== */ #blog-page { margin-top: 80px; } /*------------------------------------------*/ /* BLOG POST TYPOHRAPHY /*------------------------------------------*/ .post-tag { font-size: 0.775rem; line-height: 1; font-weight: 500; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 25px; } .blog-post a { color: #363636; } .theme--dark .blog-post a { color: #fff; } .post-link { line-height: 1.3; margin-bottom: 20px; } #blog-1 .post-link { margin-bottom: 8px; } /*------------------------------------------*/ /* BLOG POST IMAGE /*------------------------------------------*/ .blog-post-img { margin-bottom: 40px; } .blog-post .item-overlay { background: rgba(10, 10, 10, .1); } .blog-post:hover img { transform: scale(1.05); -ms-transform: scale(1.05); -webkit-transform: scale(1.05); -o-transform: scale(1.05); -moz-transform: scale(1.05); } .blog-post:hover .item-overlay { opacity: 1; -moz-opacity: 1; bottom: 0; } /* ========================================================================== 20. SINGLE BLOG POST ========================================================================== */ #single-post { margin-top: 80px; } .post-content { padding: 0 5%; } /*------------------------------------------*/ /* Single Post Title /*------------------------------------------*/ .single-post-title { text-align: center; margin-bottom: 50px; } .single-post-title h2 { line-height: 1.3; padding: 0 3%; margin-bottom: 20px; } .single-post-title .post-tag { margin-bottom: 40px; } .single-post-title .post-tag a { color: #363636; font-weight: 600; } .theme--dark .single-post-title .post-tag a { color: #fff; } /*------------------------------------------*/ /* Single Post Text /*------------------------------------------*/ .single-post-txt { padding-bottom: 60px; margin-bottom: 80px; border-bottom: 1px solid #ccc; } .theme--dark .single-post-txt { border-bottom: 1px solid #666; } .single-post-txt h5, .single-post-txt h4 { margin-top: 28px; margin-bottom: 30px; } /*------------------------------------------*/ /* Single Post Image /*------------------------------------------*/ .post-inner-img { text-align: center; margin-top: 50px; margin-bottom: 50px; } /*------------------------------------------*/ /* POST TAGS /*------------------------------------------*/ .post-tags h5 { line-height: 1; margin-bottom: 35px; } .post-tags span a { background-color: transparent; color: #363636; font-size: 0.65rem; line-height: 1; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; padding: 8px 16px; border: 1.75px solid #363636; margin: 0 5px; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .theme--dark .post-tags span a { color: #ccc; border: 1.75px solid #ccc; } .post-tags span a:hover { background-color: #363636; color: #fff!important; } .theme--dark .post-tags span a:hover { background-color: #fff; color: #363636!important; } /*------------------------------------------*/ /* POST SHARE ICONS /*-----------------------------------------*/ .post-share-list h5 { line-height: 1; margin-bottom: 35px; } .share-social-icons { display: inline-block; padding-left: 0; } .share-social-icons li { width: auto !important; display: inline-block !important; vertical-align: top; clear: none !important; padding: 0; margin: 0 10px; } .theme--dark .share-social-icons li span { color: #999!important; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .theme--dark .share-social-icons li:hover span { color: #ccc!important; } /*------------------------------------------*/ /* POST COMMENTS /*------------------------------------------*/ .post-comments { padding-top: 80px; margin-top: 80px; border-top: 1px solid #ccc; } .theme--dark .post-comments { border-top: 1px solid #666; } .post-comments hr { margin-top: 24px; margin-bottom: 40px; } .post-comments h4 { margin-bottom: 60px; } .post-comments img { width: 68px; height: 68px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; } .comment-body { margin-left: 25px; } .comment-meta { margin-bottom: 10px; } .comment-meta h5 { font-size: 1.2rem; font-family: 'Jost', sans-serif; line-height: 1; margin-bottom: 0; } .comment-date { font-size: 1rem; font-weight: 400; margin-bottom: 5px; } /*------------------------------------------*/ /* Comment Reply /*------------------------------------------*/ .btn-reply { margin-left: 3px; } .btn-reply a { font-size: 1rem; font-weight: 400; } .btn-reply span { position: relative; top: 3px; margin-right: 4px; left: 3px; } .theme--dark .btn-reply a, .theme--dark .btn-reply span { color: #ccc!important; } .btn-reply.ico-20 [class*="flaticon-"]:before, .btn-reply.ico-20 [class*="flaticon-"]:after { font-size: 0.935rem; } .btn-reply a:hover { color: #222; } .theme--dark .btn-reply a:hover { color: #fff!important; } /*------------------------------------------*/ /* SINGLE POST COMMENT FORM /*------------------------------------------*/ #leave-comment { padding-top: 80px; margin-top: 40px; border-top: 1px solid #ccc; } .theme--dark #leave-comment { border-top: 1px solid #666; } #leave-comment h4 { margin-bottom: 10px; } .comment-form { position: relative; margin-top: 60px; } .comment-form .form-control { height: 52px; background-color: transparent; border: none; border-bottom: 1px solid #6f6f6f; box-shadow: 0 0 0 0; color: #363636; font-size: 1.0625rem; line-height: 1; padding: 0 5px; margin-bottom: 25px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .theme--dark .comment-form .form-control { border-bottom: 1px solid #666; color: #ccc; } .comment-form .form-control.message { line-height: 1.6; } .comment-form textarea { min-height: 120px; } .comment-form textarea.form-control { padding: 0 5px; } /*------------------------------------------*/ /* Comment Form Placeholder /*------------------------------------------*/ .theme--dark .comment-form .form-control::-moz-placeholder { color: #ccc; } .theme--dark .comment-form .form-control:-ms-input-placeholder { color: #ccc; } .theme--dark .comment-form .form-control::-webkit-input-placeholder { color: #ccc; } /*------------------------------------------*/ /* Comment Form Input Focus /*------------------------------------------*/ .comment-form .form-control:focus { outline: 0px none; box-shadow: none; border-color: #363636; } /*------------------------------------------*/ /* Comment Form Button /*------------------------------------------*/ .comment-form .btn { margin-top: 15px; } .comment-form .btn:focus { outline: 0px none; box-shadow: none; } /*------------------------------------------*/ /* Comment Form Message /*------------------------------------------*/ .comment-form-msg { width: 100%!important; display: block; margin-top: 15px; padding-left: 0; } .comment-form .loading { color: #363636; font-size: 1.0625rem; line-height: 1; font-weight: 500; } .theme--dark .comment-form .loading { color: #ccc!important; } .comment-form .error { color: #e74c3c; font-size: 0.85rem; line-height: 1; font-weight: 400; margin-bottom: 10px; padding-left: 10px; } /* ========================================================================== 21. BOOKING ========================================================================== */ .booking-form .col-lg-6, .booking-form .col-md-12 { padding-left: 25px; padding-right: 25px; } /*------------------------------------------*/ /* BOOKING FORM /*------------------------------------------*/ .booking-form .form-control, .booking-form .form-select { height: 52px; background-color: transparent; border: none; border-bottom: 1px solid #6f6f6f; box-shadow: 0 0 0 0; color: #363636; font-size: 1.125rem; line-height: 1; padding: 0 5px; margin-bottom: 25px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .booking-form .form-select { color: #6f6f6f; } .theme--dark .booking-form .form-control, .theme--dark .booking-form .form-select { border-bottom: 1px solid #666; color: #ccc!important; } .booking-form .form-select.valid { color: #363636!important; } .theme--dark .booking-form .form-select.valid { color: #ccc!important; } /*------------------------------------------*/ /* Booking Form Placeholder /*------------------------------------------*/ .booking-form .form-control::-moz-placeholder { color: #6f6f6f; } .booking-form .form-control:-ms-input-placeholder { color: #6f6f6f; } .booking-form .form-control::-webkit-input-placeholder { color: #6f6f6f; } .theme--dark .booking-form .form-control::-moz-placeholder { color: #ccc; } .theme--dark .booking-form .form-control:-ms-input-placeholder { color: #ccc; } .theme--dark .booking-form .form-control::-webkit-input-placeholder { color: #ccc; } /*------------------------------------------*/ /* Booking Form Input Focus /*------------------------------------------*/ .booking-form .form-control:focus { border-color: #262b2f; outline: 0px none; box-shadow: none; } .theme--dark .booking-form .form-control:focus { border-color: #333; } /*------------------------------------------*/ /* Booking Form Button /*------------------------------------------*/ .booking-form .btn { margin-top: 20px; } /*------------------------------------------*/ /* Booking Form Message /*------------------------------------------*/ .booking-form-msg { text-align: center; width: 100%!important; display: block; margin-top: 20px; padding-left: 0; } .booking-form .loading { color: #363636; font-size: 1.1rem; line-height: 1; font-weight: 400; } .theme--dark .booking-form .loading { color: #ccc!important; } .booking-form .error { color: #e74c3c; font-size: 0.85rem; line-height: 1; font-weight: 400; margin-bottom: 10px; padding-left: 10px; } /* ========================================================================== 22. CONTACTS ========================================================================== */ .cbox-2.mb-5 { margin-bottom: 40px!important; } #contacts-3 .cbox-2.mb-5 { margin-bottom: 50px!important; } .cbox-2-contacts { margin-top: 30px; } /*------------------------------------------*/ /* CONTACT BOX TYPOGRAPHY /*------------------------------------------*/ .cbox-2 h4 { line-height: 1; margin-bottom: 30px; } .contact-form-wrapper h4 { line-height: 1; margin-bottom: 40px; } .cbox-1 p, .cbox-2 p { line-height: 1; margin-bottom: 14px; } .cbox-1 p.cbox-1-title { color: #363636; font-size: 1.25rem; font-weight: 500; margin-bottom: 20px; } .cbox-1 p a, .cbox-2 p a { color: #363636; font-weight: 500; } .cbox-1 p span, .cbox-2 p span { color: #363636; font-size: 0.975rem; margin-left: 5px; } .cbox-1 .btn { margin-top: 8px; } .bg--black .cbox-1 p a, .bg--black .cbox-2 p a, .bg--black .cbox-1 p span, .bg--black .cbox-2 p span, .bg--black .cbox-1 p.cbox-1-title { color: #fff; } .theme--dark .cbox-1 p a, .theme--dark .cbox-2 p a, .theme--dark .cbox-1 p span, .theme--dark .cbox-2 p span, .theme--dark .cbox-1 p.cbox-1-title { color: #fff; } .bg--black .cbox-2-contacts p a:hover, .theme--dark .cbox-2-contacts p a:hover { color: #ccc!important; } /*------------------------------------------*/ /* CONTACT FORM /*------------------------------------------*/ .contact-form .form-control { height: 52px; background-color: transparent; border: none; border-bottom: 1px solid #6f6f6f; box-shadow: 0 0 0 0; color: #363636; font-size: 1.125rem; line-height: 1; padding: 0 5px; margin-bottom: 25px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .theme--dark .contact-form .form-control { border-bottom: 1px solid #666; color: #ccc; } .contact-form .form-control.message { line-height: 1.6; } /*------------------------------------------*/ /* Contact Form Textarea /*------------------------------------------*/ .contact-form textarea { min-height: 190px; } .contact-form textarea.form-control { padding: 10px 5px 0; } /*------------------------------------------*/ /* Contact Form Placeholder /*------------------------------------------*/ .contact-form .form-control::-moz-placeholder { color: #999; } .contact-form .form-control:-ms-input-placeholder { color: #999; } .contact-form .form-control::-webkit-input-placeholder { color: #999; } .theme--dark .contact-form .form-control::-moz-placeholder { color: #ccc; } .theme--dark .contact-form .form-control:-ms-input-placeholder { color: #ccc; } .theme--dark .contact-form .form-control::-webkit-input-placeholder { color: #ccc; } /*------------------------------------------*/ /* Contact Form Input Focus /*------------------------------------------*/ .contact-form .form-control:focus { border-color: 1px solid #262b2f; outline: 0px none; box-shadow: none; } .theme--dark .contact-form .form-control:focus { border-color: #333; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus { border: 1px solid green; -webkit-text-fill-color: #555; -webkit-box-shadow: 0 0 0px 1000px #fff inset; transition: background-color 5000s ease-in-out 0s; } /*------------------------------------------*/ /* Contact Form Button /*------------------------------------------*/ .contact-form .btn { margin-top: 20px; } /*------------------------------------------*/ /* Contact Form Message /*------------------------------------------*/ .contact-form-msg { width: 100%!important; display: block; margin-top: 20px; padding-left: 0; } .contact-form .loading { color: #363636; font-size: 1.0625rem; line-height: 1; font-weight: 500; padding-left: 15px; } .theme--dark .contact-form .loading { color: #ccc!important; } .contact-form .error { color: #e74c3c; font-size: 0.85rem; line-height: 1; font-weight: 400; margin-bottom: 10px; padding-left: 10px; } /* ========================================================================== 23. GOOGLE MAP =========================================================================== */ .google-map { position: relative; height: 0; overflow: hidden; } #contacts-1 .google-map { padding: 0px 0px 40%; } #contacts-2 .google-map { padding: 0px 0px 65%; } .google-map iframe, .google-map object, .google-map embed { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border:0; } /* ========================================================================== 24. FOOTER ========================================================================== */ .footer { padding-bottom: 50px; } .footer-info, .footer-form, .footer-links, .footer-contacts, .footer .google-map { margin-bottom: 40px; } #footer-1 .footer-info { padding-left: 12%; } #footer-1 .footer-form { padding-left: 5%; } #footer-2 .footer-links { margin-top: 35px; margin-bottom: 30px; } #footer-4 .footer-contacts { padding-right: 4%; } #footer-5 .footer-contacts { padding-right: 8%; } /*------------------------------------------*/ /* FOOTER LOGO /*------------------------------------------*/ .footer-logo-img { text-align: center; position: relative; } .footer-logo-img img { width: auto; max-width: inherit; max-height: 70px; } #footer-5 .footer-logo-img img { max-height: 60px; } .footer-logo-img img.footer-logo-w, .theme--dark .footer-logo-img img.footer-logo-b { display: none; } .theme--dark .footer-logo-img img.footer-logo-w { display: inline-block; } /*------------------------------------------*/ /* FOOTER TYPOGRAPHY /*------------------------------------------*/ .footer h5 { line-height: 1; margin-bottom: 20px; } .footer-info p, .footer-contacts p { margin-bottom: 4px; } .footer-info p.footer-phone, .footer-info p.footer-email, .footer-contacts p.footer-phone, .footer-contacts p.footer-email { margin-bottom: 0; } .footer-info p a, .footer-contacts p a { color: #606060; } .theme--dark .footer-info p a, .theme--dark .footer-contacts p a { color: #e5e5e5; } .theme--dark .footer-info p a:hover, .theme--dark .footer-contacts p a:hover { color: #bbb!important; text-decoration: underline; } #footer-1 .footer-info p span, #footer-3 .footer-info p span, #footer-4 .footer-info p span { font-size: 0.935rem; text-transform: uppercase; font-weight: 500; } .footer-booking-link { margin-top: 12px; margin-bottom: 0; } .footer-booking-link a { position: relative; color: #363636!important; font-size: 1.175rem; line-height: 1; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding-bottom: 4px; text-decoration: none; } .theme--dark .footer-booking-link a { color: #e5e5e5!important; } .footer-booking-link a:after { content: ''; background-color: #363636; width: 20%; height: 2.5px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); opacity: 0; -webkit-transition: .3s all ease-in; -moz-transition: .3s all ease-in; -o-transition: .3s all ease-in; transition: .3s all ease-in; } .theme--dark .footer-booking-link a:after { background-color: #e5e5e5; } .theme--dark .footer-booking-link a:hover { text-decoration: none!important; } .footer-booking-link a:hover:after { width: 100%; opacity: 1; } #footer-1 .footer-phone, #footer-4 .footer-phone { margin-top: 15px; } .theme--dark #footer-5 .footer-info p, .theme--dark #footer-5 .footer-contacts p { color: #ccc!important; } /*------------------------------------------*/ /* FOOTER LINKS /*------------------------------------------*/ .footer-links li { width: auto !important; display: block !important; vertical-align: top; clear: none !important; margin: 0; padding: 0; } #footer-2 .foo-links li { display: inline-block!important; padding: 0 10px; } .footer-links li p { margin-bottom: 5px; } #footer-2 .foo-links li p { font-size: 0.85rem; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; } /*------------------------------------------*/ /* FOOTER SOCIAL LINKS /*------------------------------------------*/ .foo-socials { display: inline-block; margin-top: 15px; } #footer-3 .foo-socials { margin-top: 20px; } .foo-socials li { width: auto !important; display: inline-block !important; vertical-align: top; clear: none !important; margin: 0 12px 0 0; padding: 0; } .foo-socials a { display: block; text-decoration: none; } .foo-socials.color--grey li a span { -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .foo-socials.color--grey li a:hover span { color: #353f4f!important; } .theme--dark #footer-3 .foo-socials span { color: #999; } .theme--dark #footer-3 .foo-socials li a span:hover { color: #ccc; } .foo-socials.ico-20 [class*="flaticon-"]:before, .foo-socials.ico-20 [class*="flaticon-"]:after { font-size: 1.375rem; } .foo-socials.ico-25 [class*="flaticon-"]:before, .foo-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.45rem; } .bottom-footer-socials.ico-30 [class*="flaticon-"]:before, .bottom-footer-socials.ico-30 [class*="flaticon-"]:after { font-size: 1.5rem; } /*------------------------------------------*/ /* FOOTER NEWSLETTER FORM /*------------------------------------------*/ .footer-form .form-control { height: 53px; color: #666; font-size: 1.0625rem; border: 1.5px solid #dee2e6; border-right: none; padding: 0 15px; box-shadow: none; } .theme--dark .footer-form .form-control { color: #ccc; background-color: #191a1b; border: 1.5px solid #191a1b; } .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) { border-top-left-radius: 0; border-bottom-left-radius: 0; } /*------------------------------------------*/ /* Newsletter Form Input Focus /*------------------------------------------*/ .footer-form .form-control:focus { border-color: #373b4d; border-right: none; outline: 0; box-shadow: none; } .theme--dark .footer-form .form-control:focus { background-color: #171717; border-color: #171717; } /*------------------------------------------*/ /* Footer Form Placeholder /*------------------------------------------*/ .footer-form .form-control::-moz-placeholder { color: #6c757d; } .footer-form .form-control:-ms-input-placeholder { color: #6c757d; } .footer-form .form-control::-webkit-input-placeholder { color: #6c757d; } /*------------------------------------------*/ /* Newsletter Form Button /*------------------------------------------*/ .footer-form .btn { font-size: 0.75rem; letter-spacing: 2px; height: 53px; } .theme--dark .footer-form .btn.btn--black { color: #fff!important; background-color: #151616!important; border-color: #151616!important; } .theme--dark .footer-form .btn.hover--tra-black:hover { color: #363636!important; background-color: #fff!important; border-color: #fff!important; } /*------------------------------------------*/ /* Footer Form Notification /*------------------------------------------*/ .footer-form .form-notification { color: #e03a3e; font-size: 0.95rem; line-height: 1.25; font-weight: 400; margin-top: 12px; margin-left: 5px; } /*------------------------------------------*/ /* BOTTOM FOOTER /*------------------------------------------*/ .footer hr { margin-top: 30px; margin-bottom: 50px; } /*------------------------------------------*/ /* BOTTOM FOOTER LINKS /*------------------------------------------*/ .bottom-footer-list li, .bottom-footer-socials li { width: auto!important; display: inline-block!important; vertical-align: top; clear: none !important; } .bottom-footer-socials li { padding-left: 14px; } #footer-2 .bottom-footer-socials li { padding: 0 18px; } .footer-list-divider { position: relative; top: 4px; margin-left: 2px; } .bottom-footer-list.ico-15 [class*="flaticon-"]:before, .bottom-footer-list.ico-15 [class*="flaticon-"]:after { font-size: 0.8rem; } .bottom-footer-list li p { display: inline-block; float: left; margin-bottom: 0; } .bottom-footer-socials li span { position: relative; top: 4px; opacity: .8; } .bottom-footer-socials.ico-20 [class*="flaticon-"]:before, .bottom-footer-socials.ico-20 [class*="flaticon-"]:after { font-size: 1.115rem; } .bottom-footer-socials.ico-25 [class*="flaticon-"]:before, .bottom-footer-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.25rem; } .theme--dark .bottom-footer-socials span { color: #d8d8d8!important; } /*------------------------------------------*/ /* BOTTOM FOOTER COPYRIGHT /*------------------------------------------*/ .footer-copyright p { margin-bottom: 0; } .theme--dark .footer-copyright p { color: #ccc!important; } /* ========================================================================== 25. INNER PAGE HERO =========================================================================== */ .inner-page-hero { text-align: center; background: no-repeat center center; background-size: cover; background-attachment: scroll!important; padding-top: 200px; padding-bottom: 170px; } .inner-page-title { text-align: center; padding-top: 180px; } #about-page.inner-page-hero { background-image: url(../images/about-page.jpg); } #booking-page.inner-page-hero { background-image: url(../images/booking-page.jpg); } #faqs-page.inner-page-hero { background-image: url(../images/faqs-page.jpg); } #gift-page.inner-page-hero { background-image: url(../images/gift-page.jpg); } #pricing-page-1.inner-page-hero { background-image: url(../images/pricing-1-page.jpg); } #pricing-page-2.inner-page-hero { background-image: url(../images/pricing-2-page.jpg); } #reviews-page.inner-page-hero { background-image: url(../images/reviews-page.jpg); } #team-page.inner-page-hero { background-image: url(../images/team-page.jpg); } /*------------------------------------------*/ /* INNER PAGE HERO TYPOGRAPHY /*------------------------------------------*/ .page-hero-txt h2, .page-title-txt h2 { font-size: 3.95rem; margin-bottom: 0; } .page-hero-txt p, .page-title-txt p { font-size: 1.2125rem; margin-top: 5px; margin-bottom: 0; } #booking-page .page-title-txt p { padding: 0 20%; margin-top: 16px; } /* ========================================================================== 26. PAGE PAGINATION =========================================================================== */ .page-link { color: #6c757d; font-size: 1.1rem; font-weight: 500; padding: 2px 14px; margin: 0 8px; background-color: transparent; border: 2px solid transparent; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .theme--dark .page-link { color: #ccc; } .pagination.ico-20 [class*="flaticon-"]:before, .pagination.ico-20 [class*="flaticon-"]:after { font-size: 0.9rem; } .page-item:first-child .page-link { border-top-left-radius: 0; border-bottom-left-radius: 0; } .page-item:last-child .page-link { border-top-right-radius: 0; border-bottom-right-radius: 0; } .page-item.active .page-link { color: #fff!important; background-color: #262b2f; border: 2px solid #262b2f; } .theme--dark .page-item.active .page-link { background-color: #151515; border: 2px solid #151515; } .page-item.disabled .page-link { color: #6f6f6f; background-color: transparent; border: 2px solid transparent; } .theme--dark .page-item.disabled .page-link { color: #ccc; } .page-link:hover { color: #6f6f6f; background-color: transparent; border: 2px solid #6f6f6f; } .theme--dark .page-link:hover { color: #aaa!important; border: 2px solid #aaa; } .page-link:focus { color: #6f6f6f; background-color: transparent; border: 2px solid transparent; box-shadow: 0 0; } .theme--dark .page-link:focus { color: #aaa; } /* ========================================================================== 27. MODAL ========================================================================== */ .modal-body { padding: 0!important; } #modal-1 .modal-dialog { max-width: 700px; } #modal-2 .modal-dialog.modal-xl { width: 820px; } #modal-2.modal .modal-content { overflow: hidden; } #modal-2.modal .bg-img { background: url(../images/modal.jpg); background-position: left center; } #modal-2.modal_barber .bg-img { background: url(../images/modal_barber.jpg); } #modal-2.modal_hair .bg-img { background: url(../images/modal_hair.jpg); } #modal-2.modal_nail .bg-img { background: url(../images/modal_nail.html); } #modal-2 .modal-body-content { text-align: center; padding: 60px 35px 40px; } /*------------------------------------------*/ /* MODAL WINDOW CLOSE BUTTON /*------------------------------------------*/ .modal .modal-close { position: absolute; z-index: 1; background-color: transparent; border: none; box-shadow: none; right: 15px!important; top: 15px!important; z-index: 9999; } .modal .modal-close.ico-20 [class^="flaticon-"]:before, .modal .modal-close.ico-10 [class^="flaticon-"]:after { font-size: 1.5rem; } .theme--dark .modal-close.color--black span { color: #363636!important; } .modal-close:focus { outline: none!important; text-decoration: none!important; } /*------------------------------------------*/ /* MODAL WINDOW REQUEST FORM /*------------------------------------------*/ #modal-2 .request-form { margin: 0; } #modal-2 .request-form .col-md-12 { padding: 0; } #modal-2 .request-form-title h4, #modal-2 .request-form-title h3 { color: #363636!important; font-weight: 500; letter-spacing: 0; } #modal-2 .request-form-title h3 span { font-family: 'Jost', sans-serif; font-size: 2.65rem; font-weight: 700; letter-spacing: -2px; } #modal-2 .request-form-title p { color: #363636!important; margin-top: 16px; margin-bottom: 25px; } #modal-2 .request-form .form-control { text-align: center; height: 52px; background-color: #fff; border: none; border-bottom: 1.5px solid #6f6f6f; box-shadow: 0 0 0 0; color: #363636; font-size: 1.0625rem; line-height: 1; padding: 0 15px; margin-bottom: 18px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } /*------------------------------------------*/ /* Request Form Placeholder /*------------------------------------------*/ #modal-2 .request-form .form-control::-moz-placeholder { color: #6f6f6f; } #modal-2 .request-form .form-control:-ms-input-placeholder { color: #6f6f6f; } #modal-2 .request-form .form-control::-webkit-input-placeholder { color: #6f6f6f; } /*------------------------------------------*/ /* Request Form Input Focus /*------------------------------------------*/ #modal-2 .request-form .form-control:focus { border-color: #262b2f; outline: 0px none; box-shadow: none; } /*------------------------------------------*/ /* Request Form Button /*------------------------------------------*/ #modal-2 .request-form .btn { display: block; width: 100%!important; height: 56px; margin: 0; } .theme--dark #modal-2 .request-form .btn.btn--black { color: #fff!important; background-color: #363636!important; border-color: #363636!important; } .theme--dark #modal-2 .request-form .btn.hover--tra-black:hover { color: #363636!important; background-color: transparent!important; border-color: #363636!important; } /*------------------------------------------*/ /* Comment Form Message /*------------------------------------------*/ #modal-2 .request-form-msg { text-align: center; width: 100%!important; display: block; margin-top: 12px; padding-left: 0; } #modal-2 .request-form .loading { color: #363636; font-size: 1rem; line-height: 1; font-weight: 400; } #modal-2 .request-form .error { color: #e74c3c; font-size: 0.85rem; line-height: 1; font-weight: 400; margin-bottom: 10px; padding-left: 10px; } /* ========================================================================== 28. SCROLL TO TOP ========================================================================== */ #scrollUp { display: none; width: 45px; height: 45px; position: fixed; bottom: 30px; right: 15px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; background-image: url(../images/back-to-top.png); background-repeat: no-repeat; background-position: 50% 48%; background-color: rgba(10, 10, 10, .25); -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } #scrollUp:hover { background-color: rgba(54, 54, 54, .85); } nav a#pull { display: none; } /* ========================================================================== MODE CHANGER ========================================================================== */ #stlChanger { position: fixed; z-index: 9999; font-size: 15px; right: 0; top: 100px; cursor: pointer; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } #stlChanger .bgChanger { width: 50px; height: 50px; } #stlChanger .chBut { background: #212121; width: 50px; height: 50px; position: absolute; top: 30px; left: 0; z-index: 1000000; text-align: center; border: 1px solid #212121; border-left: none; padding: 0 0 0 2px; border-radius: 0; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; box-shadow: 0 0 2px rgba(50, 50, 50, 0.4); } .theme--dark #stlChanger .chBut { background: #fff; border: 1px solid #fff; } #stlChanger .chBut.ico-35 [class*="flaticon-"]:before, #stlChanger .chBut.ico-35 [class*="flaticon-"]:after { color: #fff; font-size: 1.75rem; line-height: 48px!important; } .theme--dark #stlChanger .chBut.ico-35 [class*="flaticon-"]:before, .theme--dark #stlChanger .chBut.ico-35 [class*="flaticon-"]:after { color: #363636; } .lgt-mode, .theme--dark .drk-mode { display: none; } .theme--dark .lgt-mode { display: block; }