/* Template Name: Spa Magic - Spa & Beauty Salon Landing Page Template Theme URL: https://themeforest.net/user/jthemes Description: Spa Magic - Spa & Beauty Salon Landing Page Template Author: Jthemes Author URL: https://themeforest.net/user/jthemes Version: 1.0.0 Website: www.jthemes.net Tags: Jthemes, Beauty, Cosmetic, Girly, Hair, Health, Healthy Care, Massage, Make Up, Salon, Spa, Skincare, Wellness */ /* ========================================================================== 01. GENERAL & BASIC STYLES =========================================================================== */ html { -webkit-font-smoothing: antialiased; font-size: 16px; } body { font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #283034; font-weight: 300; } /*------------------------------------------------------------------*/ /* IE10 in Windows 8 and Windows Phone 8 Bug fix /*-----------------------------------------------------------------*/ @-webkit-viewport { width: device-width; } @-moz-viewport { width: device-width; } @-ms-viewport { width: device-width; } @-o-viewport { width: device-width; } @viewport { width: device-width; } /*------------------------------------------*/ /* PAGE CONTENT /*------------------------------------------*/ #page { overflow: hidden; } /*------------------------------------------*/ /* SPACING & INDENTS /*------------------------------------------*/ .wide-100 { padding-top: 100px; padding-bottom: 100px; } .wide-90 { padding-top: 100px; padding-bottom: 90px; } .wide-80 { padding-top: 100px; padding-bottom: 80px; } .wide-70 { padding-top: 100px; padding-bottom: 70px; } .wide-60 { padding-top: 100px; padding-bottom: 60px; } .wide-50 { padding-top: 100px; padding-bottom: 50px; } .wide-40 { padding-top: 100px; padding-bottom: 40px; } .wide-30 { padding-top: 100px; padding-bottom: 30px; } .wide-20 { padding-top: 100px; padding-bottom: 20px; } /*------------------------------------------*/ /* Margin Top /*------------------------------------------*/ .mt-100 { margin-top: 100px; } .mt-95 { margin-top: 95px; } .mt-90 { margin-top: 90px; } .mt-85 { margin-top: 85px; } .mt-80 { margin-top: 80px; } .mt-75 { margin-top: 75px; } .mt-70 { margin-top: 70px; } .mt-65 { margin-top: 65px; } .mt-60 { margin-top: 60px; } .mt-55 { margin-top: 55px; } .mt-50 { margin-top: 50px; } .mt-45 { margin-top: 45px; } .mt-40 { margin-top: 40px; } .mt-35 { margin-top: 35px; } .mt-30 { margin-top: 30px; } .mt-25 { margin-top: 25px; } .mt-20 { margin-top: 20px; } .mt-15 { margin-top: 15px; } .mt-10 { margin-top: 10px; } .mt-5 { margin-top: 5px!important; } .mt-0 { margin-top: 0; } /*------------------------------------------*/ /* Margin Bottom /*------------------------------------------*/ .mb-100 { margin-bottom: 100px; } .mb-95 { margin-bottom: 95px; } .mb-90 { margin-bottom: 90px; } .mb-85 { margin-bottom: 85px; } .mb-80 { margin-bottom: 80px; } .mb-75 { margin-bottom: 75px; } .mb-70 { margin-bottom: 70px; } .mb-65 { margin-bottom: 65px; } .mb-60 { margin-bottom: 60px; } .mb-55 { margin-bottom: 55px; } .mb-50 { margin-bottom: 50px; } .mb-45 { margin-bottom: 45px; } .mb-40 { margin-bottom: 40px; } .mb-35 { margin-bottom: 35px; } .mb-30 { margin-bottom: 30px; } .mb-25 { margin-bottom: 25px; } .mb-20 { margin-bottom: 20px; } .mb-15 { margin-bottom: 15px; } .mb-10 { margin-bottom: 10px; } .mb-5 { margin-bottom: 5px!important; } .mb-0 { margin-bottom: 0; } /*------------------------------------------*/ /* Margin Left /*------------------------------------------*/ .ml-100 { margin-left: 100px; } .ml-95 { margin-left: 95px; } .ml-90 { margin-left: 90px; } .ml-85 { margin-left: 85px; } .ml-80 { margin-left: 80px; } .ml-75 { margin-left: 75px; } .ml-70 { margin-left: 70px; } .ml-60 { margin-left: 60px; } .ml-55 { margin-left: 55px; } .ml-50 { margin-left: 50px; } .ml-45 { margin-left: 45px; } .ml-40 { margin-left: 40px; } .ml-35 { margin-left: 35px; } .ml-30 { margin-left: 30px; } .ml-25 { margin-left: 25px; } .ml-20 { margin-left: 20px; } .ml-15 { margin-left: 15px; } .ml-10 { margin-left: 10px; } .ml-5 { margin-left: 5px!important; } /*------------------------------------------*/ /* Margin Right /*------------------------------------------*/ .mr-100 { margin-right: 100px; } .mr-95 { margin-right: 95px; } .mr-90 { margin-right: 90px; } .mr-85 { margin-right: 85px; } .mr-80 { margin-right: 80px; } .mr-75 { margin-right: 75px; } .mr-70 { margin-right: 70px; } .mr-65 { margin-right: 65px; } .mr-60 { margin-right: 60px; } .mr-55 { margin-right: 55px; } .mr-50 { margin-right: 50px; } .mr-45 { margin-right: 45px; } .mr-40 { margin-right: 40px; } .mr-35 { margin-right: 35px; } .mr-30 { margin-right: 30px; } .mr-25 { margin-right: 25px; } .mr-20 { margin-right: 20px; } .mr-15 { margin-right: 15px; } .mr-10 { margin-right: 10px; } .mr-5 { margin-right: 5px!important; } /*------------------------------------------*/ /* Padding Top /*------------------------------------------*/ .pt-100 { padding-top: 100px; } .pt-95 { padding-top: 95px; } .pt-90 { padding-top: 90px; } .pt-85 { padding-top: 85px; } .pt-80 { padding-top: 80px; } .pt-75 { padding-top: 75px; } .pt-70 { padding-top: 70px; } .pt-65 { padding-top: 65px; } .pt-60 { padding-top: 60px; } .pt-55 { padding-top: 55px; } .pt-50 { padding-top: 50px; } .pt-45 { padding-top: 45px; } .pt-40 { padding-top: 40px; } .pt-35 { padding-top: 35px; } .pt-30 { padding-top: 30px; } .pt-25 { padding-top: 25px; } .pt-20 { padding-top: 20px; } .pt-15 { padding-top: 15px; } .pt-10 { padding-top: 10px; } .pt-5 { padding-top: 5px!important; } /*------------------------------------------*/ /* Padding Bottom /*------------------------------------------*/ .pb-100 { padding-bottom: 100px; } .pb-95 { padding-bottom: 95px; } .pb-90 { padding-bottom: 90px; } .pb-85 { padding-bottom: 85px; } .pb-80 { padding-bottom: 80px; } .pb-75 { padding-bottom: 75px; } .pb-70 { padding-bottom: 70px; } .pb-65 { padding-bottom: 65px; } .pb-60 { padding-bottom: 60px; } .pb-55 { padding-bottom: 55px; } .pb-50 { padding-bottom: 50px; } .pb-45 { padding-bottom: 45px; } .pb-40 { padding-bottom: 40px; } .pb-35 { padding-bottom: 35px; } .pb-30 { padding-bottom: 30px; } .pb-25 { padding-bottom: 25px; } .pb-20 { padding-bottom: 20px; } .pb-15 { padding-bottom: 15px; } .pb-10 { padding-bottom: 10px; } .pb-5 { padding-bottom: 5px!important; } /*------------------------------------------*/ /* Padding Left /*------------------------------------------*/ .pl-100 { padding-left: 100px; } .pl-95 { padding-left: 95px; } .pl-90 { padding-left: 90px; } .pl-85 { padding-left: 85px; } .pl-80 { padding-left: 80px; } .pl-75 { padding-left: 75px; } .pl-70 { padding-left: 70px; } .pl-65 { padding-left: 65px; } .pl-60 { padding-left: 60px; } .pl-55 { padding-left: 55px; } .pl-50 { padding-left: 50px; } .pl-45 { padding-left: 45px; } .pl-40 { padding-left: 40px; } .pl-35 { padding-left: 35px; } .pl-30 { padding-left: 30px; } .pl-25 { padding-left: 25px; } .pl-20 { padding-left: 20px; } .pl-15 { padding-left: 15px; } .pl-10 { padding-left: 10px; } .pl-5 { padding-left: 5px!important; } /*------------------------------------------*/ /* Padding Right /*------------------------------------------*/ .pr-100 { padding-right: 100px; } .pr-95 { padding-right: 95px; } .pr-90 { padding-right: 90px; } .pr-85 { padding-right: 85px; } .pr-80 { padding-right: 80px; } .pr-75 { padding-right: 75px; } .pr-70 { padding-right: 70px; } .pr-65 { padding-right: 65px; } .pr-60 { padding-right: 60px; } .pr-55 { padding-right: 55px; } .pr-50 { padding-right: 50px; } .pr-45 { padding-right: 45px; } .pr-40 { padding-right: 40px; } .pr-35 { padding-right: 35px; } .pr-30 { padding-right: 30px; } .pr-25 { padding-right: 25px; } .pr-20 { padding-right: 20px; } .pr-15 { padding-right: 15px; } .pr-10 { padding-right: 10px; } .pr-5 { padding-right: 5px!important; } /*------------------------------------------*/ /* Padding Centered /*------------------------------------------*/ .pc-70 { padding-right: 70px; padding-left: 70px; } .pc-65 { padding-right: 65px; padding-left: 65px; } .pc-60 { padding-right: 60px; padding-left: 60px; } .pc-55 { padding-right: 55px; padding-left: 55px; } .pc-50 { padding-right: 50px; padding-left: 50px; } .pc-45 { padding-right: 45px; padding-left: 45px; } .pc-40 { padding-right: 40px; padding-left: 40px; } .pc-35 { padding-right: 35px; padding-left: 35px; } .pc-30 { padding-right: 30px; padding-left: 30px; } .pc-25 { padding-right: 25px; padding-left: 25px; } .pc-20 { padding-right: 20px; padding-left: 20px; } .pc-15 { padding-right: 15px; padding-left: 15px; } .pc-10 { padding-right: 10px; padding-left: 10px; } .pc-09 { padding-right: 9%; padding-left: 9%; } .pc-08 { padding-right: 8%; padding-left: 8%; } .pc-07 { padding-right: 7%; padding-left: 7%; } .pc-06 { padding-right: 6%; padding-left: 6%; } .pc-05 { padding-right: 5%; padding-left: 5%; } .pc-04 { padding-right: 4%; padding-left: 4%; } /*------------------------------------------*/ /* BACKGROUND SETTINGS /*------------------------------------------*/ .bg-fixed, .bg-scroll { width: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; } .bg-scroll { background-attachment: fixed!important; } .rel { position: relative!important; } /*------------------------------------------*/ /* Background Colors /*------------------------------------------*/ .bg-white { background-color: #fff!important; } .bg-dark { background-color: #282828!important; } .bg-lightgrey { background-color: #fbfbfb; } .bg-cornsilk { background-color: #fffcfb; } .bg-beige { background-color: #f2ebd6; } .bg-cherry { background-color: #9e6e66; } .bg-coral { background-color: #fbbbb9; } .bg-cream { background-color: #fff6f3; } .bg-lipstick { background-color: #d8c2be; } .bg-pearl { background-color: #fcfaf6; } .bg-oak { background-color: #8e7e51; } .bg-pink { background-color: #fe6d70; } .bg-peach { background-color: #fef2f0; } .bg-sangria { background-color: #a48b73; } .bg-silk { background-color: #f7f6ed; } .bg-shell { background-color: #afa074; } .bg-rosybrown { background-color: #b7948e; } .bg-purple { background-color: #3f2b4e; } /*------------------------------------------*/ /* Background Images for Sections /*------------------------------------------*/ .bg-01, .bg-02, .bg-03 { width: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: scroll!important; } .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); } /*------------------------------------------*/ /*. BORDER SETTINGS FOR DEMOS /*------------------------------------------*/ .b-top { border-top: 1px solid rgba(142, 126, 81, .3); } .b-bottom { border-bottom: 1px solid rgba(142, 126, 81, .3); } .b-left { border-left: 1px solid rgba(142, 126, 81, .3); } .b-right { border-right: 1px solid rgba(142, 126, 81, .3); } /* ========================================================================== 02. TYPOGRAPHY =========================================================================== */ /*------------------------------------------*/ /* HEADERS /*------------------------------------------*/ h1, h2, h3, h4, h5, h6 { font-family: 'Lustria', serif; line-height: 1.3; font-weight: 700; letter-spacing: 1px; } /* Header H6 */ h6.h6-xs { font-size: 1.0625rem; } /* 17px */ h6.h6-sm { font-size: 1.125rem; } /* 18px */ h6.h6-md { font-size: 1.15625rem; } /* 18.5px */ h6.h6-lg { font-size: 1.1875rem; } /* 19px */ h6.h6-xl { font-size: 1.21875rem; } /* 19.5px */ /* Header H5 */ h5.h5-xs { font-size: 1.25rem; } /* 20px */ h5.h5-sm { font-size: 1.375rem; } /* 22px */ h5.h5-md { font-size: 1.5rem; } /* 24px */ h5.h5-lg { font-size: 1.625rem; } /* 26px */ h5.h5-xl { font-size: 1.75rem; } /* 28px */ /* Header H4 */ h4.h4-xs { font-size: 1.875rem; } /* 30px */ h4.h4-sm { font-size: 2rem; } /* 32px */ h4.h4-md { font-size: 2.125rem; } /* 34px */ h4.h4-lg { font-size: 2.25rem; } /* 36px */ h4.h4-xl { font-size: 2.375rem; } /* 38px */ h3.h3-xs { font-size: 2.5rem; } /* 40px */ h3.h3-sm { font-size: 2.625rem; } /* 42px */ h3.h3-md { font-size: 2.75rem; } /* 44px */ h3.h3-lg { font-size: 2.875rem; } /* 46px */ h3.h3-xl { font-size: 3rem; } /* 48px */ /* Header H2 */ h2.h2-xs { font-size: 3.125rem; } /* 50px */ h2.h2-sm { font-size: 3.25rem; } /* 52px */ h2.h2-md { font-size: 3.375rem; } /* 54px */ h2.h2-lg { font-size: 3.5rem; } /* 56px */ h2.h2-xl { font-size: 3.75rem; } /* 60px */ /*------------------------------------------*/ /* PARAGRAPHS /*------------------------------------------*/ p.p-sm { font-size: 1rem; } /* 16px */ p { font-size: 1.0625rem; } /* 17px */ p.p-md { font-size: 1.125rem; } /* 18px */ p.p-lg { font-size: 1.1875rem; } /* 19px */ p.p-xl { font-size: 1.25rem; } /* 20px */ /*------------------------------------------*/ /* LINK SETTINGS /*------------------------------------------*/ a { color: #333; 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: #666; text-decoration: none; } a:focus { outline: none; text-decoration: none; } /*------------------------------------------*/ /* LISTS /*------------------------------------------*/ ul { margin: 0; padding: 0; list-style: none; } /*------------------------------------------*/ /* TEXT LIST /*------------------------------------------*/ .txt-list li i { position: relative; font-size: 1.05rem; line-height: 1.5rem; float: left; margin-right: 10px; top: 2px; } .txt-list li p { overflow: hidden; margin-bottom: 10px; } ul.simple-list { list-style: disc; margin-left: 15px; } /*------------------------------------------*/ /* NUMBER LIST /*------------------------------------------*/ ol.num-list { margin-left: -20px; } ol.num-list li p { padding-left: 5px; margin-bottom: 5px; } ol.digit-list { padding: 0; margin-left: 15px; } ol.digit-list p { margin-bottom: 8px; } /*------------------------------------------*/ /* BUTTON SETTINGS /*------------------------------------------*/ .btn { background-color: transparent; color: #fff; font-size: 15px; line-height: 1; font-weight: 500; padding: 13px 26px; border: 1px solid transparent; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -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; } /*------------------------------------------*/ /* Button Size /*------------------------------------------*/ .btn.btn-sm { font-size: 14px; padding: 12px 24px; } .btn.btn-md { font-size: 18px; padding: 14px 34px; } .btn.btn-lg { font-size: 20px; padding: 14px 42px; } /*------------------------------------------*/ /* Transparent Button /*------------------------------------------*/ .btn-tra-white { color: #fff; background-color: transparent; border-color: #fff; } .scroll .btn-tra-white { color: #333!important; background-color: transparent; border-color: #333; } .btn-tra-cherry, .scroll .btn-tra-cherry, .white-color .btn-tra-cherry, .tra-cherry-hover:hover, .scroll .tra-cherry-hover:hover, .white-color .tra-cherry-hover:hover { color: #9e6e66!important; background-color: transparent; border-color: #9e6e66!important; } .btn-tra-oak, .scroll .btn-tra-oak, .white-color .btn-tra-oak, .tra-oak-hover:hover, .scroll .tra-oak-hover:hover, .white-color .tra-oak-hover:hover { color: #8e7e51!important; background-color: transparent; border-color: #8e7e51!important; } .btn-tra-pink, .scroll .btn-tra-pink, .white-color .btn-tra-pink, .tra-pink-hover:hover, .scroll .tra-pink-hover:hover, .white-color .tra-pink-hover:hover { color: #fe6d70!important; background-color: transparent; border-color: #fe6d70!important; } .btn-tra-rosybrown, .scroll .btn-tra-rosybrown, .white-color .btn-tra-rosybrownk, .tra-rosybrown-hover:hover, .scroll .tra-rosybrown-hover:hover, .white-color .tra-rosybrown-hover:hover { color: #b7948e!important; background-color: transparent; border-color: #b7948e!important; } /*------------------------------------------*/ /* Button Color /*------------------------------------------*/ .btn-white, .white-color .btn-white { color: #333; background-color: #fff; border-color: #fff!important; } .btn-cherry, .scroll .btn-cherry, .white-color .btn-cherry, .cherry-hover:hover, .scroll .cherry-hover:hover, .white-color .cherry-hover:hover { color: #fff!important; background-color: #9e6e66; border-color: #9e6e66!important; } .btn-oak, .scroll .btn-oak, .white-color .btn-oak, .oak-hover:hover, .scroll .oak-hover:hover, .white-color .oak-hover:hover { color: #fff!important; background-color: #8e7e51; border-color: #8e7e51!important; } .btn-pink, .scroll .btn-pink, .white-color .btn-pink, .pink-hover:hover, .scroll .pink-hover:hover, .white-color .pink-hover:hover { color: #fff!important; background-color: #fe6d70; border-color: #fe6d70!important; } .btn-rosybrown, .scroll .btn-rosybrown, .white-color .btn-rosybrown, .rosybrown-hover:hover, .scroll .rosybrown-hover:hover, .white-color .rosybrown-hover:hover { color: #fff!important; background-color: #b7948e; border-color: #b7948e!important; } /*------------------------------------------*/ /* Button Hover /*------------------------------------------*/ .black-hover:hover, .scroll .black-hover:hover, .white-color .black-hover:hover { color: #fff!important; background-color: #333!important; border-color: #333!important; } .tra-black-hover:hover, .scroll .tra-black-hover:hover, .white-color .tra-black-hover:hover { color: #333!important; background-color: transparent; border-color: #333!important; } .white-hover:hover, .white-color .white-hover:hover { color: #333!important; background-color: #fff; border-color: #fff!important; } .tra-white-hover:hover, .white-color .tra-white-hover:hover { color: #fff!important; background-color: transparent; border-color: #fff!important; } .scroll .tra-white-hover:hover { color: #333!important; background-color: transparent; border-color: #333!important; } /*------------------------------------------*/ /* Button Focus /*------------------------------------------*/ .btn:focus { color: #fff; -webkit-box-shadow: none; box-shadow: none; } .btn.btn-black:focus { color: #fff; -webkit-box-shadow: none; box-shadow: none; } .btn-tra-black:focus, .btn.btn-tra-grey:focus { color: #333; -webkit-box-shadow: none; box-shadow: none; } /*------------------------------------------*/ /* VIDEO POPUP ICON /*------------------------------------------*/ .video-preview { position: relative; text-align: center; } .video-block { width: 100px; height: 100px; position: relative; display: inline-block; } /*------------------------------------------*/ /* Video Button Icon /*------------------------------------------*/ .video-btn { width: 100px; height: 100px; position: absolute!important; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; display: inline-block; text-align: center; color: #fff; line-height: 100px!important; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .video-btn i { font-size: 3rem; line-height: 100px!important; margin-left: 11px; -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:hover i { -moz-transform: scale(0.9); -ms-transform: scale(0.9); -webkit-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } /*------------------------------------------*/ /* BOX ICONS /*------------------------------------------*/ .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 */ /*------------------------------------------*/ /* SECTION TITLE /*------------------------------------------*/ .section-title { text-align: center; position: relative; } .section-title p { color: #888; padding: 0 15%; margin: 12px 0 0; } .tra-header { font-family: 'Alex Brush', cursive; font-size: 6rem; line-height: 1; letter-spacing: 2px; opacity: .15; position: relative; margin-top: -30px; margin-bottom: -45px; } .section-id { font-family: 'Alex Brush', cursive; font-size: 2.5rem; line-height: 1; opacity: .6; letter-spacing: 2px; margin-bottom: 5px; } /*------------------------------------------*/ /* TITLE BEFORE /*------------------------------------------*/ .title-before.ico-70 { transform: rotate(35deg); margin-top: -10px; margin-bottom: 10px; } .title-before.ico-60 { transform: rotate(40deg); margin-top: -10px; margin-bottom: 10px; } .title-after.ico-60 { transform: rotate(40deg); } /*------------------------------------------*/ /* TEXT SETTINGS FOR DEMOS /*------------------------------------------*/ .white-color, .white-color h2, .white-color h3, .white-color h4, .white-color h5, .white-color h6, .white-color p, .white-color a, .white-color li, .white-color i, .white-color span { color: #fff; } .grey-color, .grey-color h2, .grey-color h3, .grey-color h4, .grey-color h5, .grey-color h6, .grey-color p, .grey-color a, .grey-color li, .grey-color i, .white-color .lgrey-color, .grey-color span { color: #6a7685; } .brown-color, .brown-color h2, .brown-color h3, .brown-color h4, .brown-color h5, .brown-color h6, .brown-color p, .brown-color a, .brown-color li, .brown-color i, .brown-color span, .white-color .brown-color { color: #a87e72; } .cherry-color, .cherry-color h2, .cherry-color h3, .cherry-color h4, .cherry-color h5, .cherry-color h6, .cherry-color p, .cherry-color a, .cherry-color li, .cherry-color i, .cherry-color span, .white-color .cherry-color { color: #9e6e66; } .lipstick-color, .lipstick-color h2, .lipstick-color h3, .lipstick-color h4, .lipstick-color h5, .lipstick-color h6, .lipstick-color p, .lipstick-color a, .lipstick-color li, .lipstick-color i, .lipstick-color span, .white-color .lipstick-color { color: #d8c2be; } .oak-color, .oak-color h2, .oak-color h3, .oak-color h4, .oak-color h5, .oak-color h6, .oak-color p, .oak-color a, .oak-color li, .oak-color i, .oak-color span, .white-color .oak-color { color: #8e7e51; } .pink-color, .pink-color h2, .pink-color h3, .pink-color h4, .pink-color h5, .pink-color h6, .pink-color p, .pink-color a, .pink-color li, .pink-color i, .pink-color span, .white-color .pink-color { color: #fe6d70; } .rosybrown-color, .rosybrown-color h2, .rosybrown-color h3, .rosybrown-color h4, .rosybrown-color h5, .rosybrown-color h6, .rosybrown-color p, .rosybrown-color a, .rosybrown-color li, .rosybrown-color i, .rosybrown-color span, .white-color .rosybrown-color { color: #b7948e; } .wheat-color, .wheat-color h2, .wheat-color h3, .wheat-color h4, .wheat-color h5, .wheat-color h6, .wheat-color p, .wheat-color a, .wheat-color li, .wheat-color i, .wheat-color span, .white-color .wheat-color { color: #be9e5b; } .wood-color, .wood-color h2, .wood-color h3, .wood-color h4, .wood-color h5, .wood-color h6, .wood-color p, .wood-color a, .wood-color li, .wood-color i, .wood-color span, .white-color .wood-color { color: #5f5842; } /*------------------------------------------*/ /* TEXT BLOCK TYPOGRAPHY /*------------------------------------------*/ .txt-block h4, .txt-block h3, .txt-block h2 { margin-bottom: 25px; } .txt-block h3.tra-header, .txt-block h2.tra-header { margin-bottom: -45px; } .txt-block h3.section-id, .txt-block h2.section-id { opacity: .75; margin-bottom: 10px; } .txt-block h5.sm-title { margin-bottom: 12px; } .txt-block .btn { margin-top: 15px; } /*------------------------------------------*/ /* Text Block Rating /*------------------------------------------*/ .txt-block-rating span { position: relative; font-size: 1.25rem; line-height: 1; font-weight: 700; margin-left: 6px; top: 2px; } .stars-rating i { color: #efa697; font-size: 1rem; line-height: 1.175rem; margin-left: 1px; } /*------------------------------------------*/ /* IMG BLOCK IMAGE /*------------------------------------------*/ .img-block { text-align: center; } .inner-img { margin-top: 35px; margin-bottom: 35px; } /*------------------------------------------*/ /* FONT WEIGHT /*------------------------------------------*/ .txt-300 { font-weight: 300; } .txt-400 { font-weight: 400; } .txt-500 { font-weight: 500; } .txt-600 { font-weight: 600; } .txt-700 { font-weight: 700; } .txt-800 { font-weight: 800; } .txt-900 { font-weight: 900; } .txt-upcase { text-transform: uppercase; } /*------------------------------------------*/ /* CONTENT IMAGE /*------------------------------------------*/ .ab-img-01 { position: absolute; right: 15px; bottom: -65px; z-index: 99; } .ab-img-02 { position: absolute; left: 25px; bottom: -65px; z-index: 99; } /* ========================================================================== XX. COLOR SCHEME SETTINGS =========================================================================== */ /*------------------------------------------*/ /* Background Colors /*------------------------------------------*/ .bg-color-01 { background-color: #fefdfc; } .bg-color-02 { background-color: #f7f4f0; } .bg-color-03 { background-color: #efa697; } .bg-color-04 { background-color: #d8c2be; } .bg-color-05 { background-color: #f0e6e0; } .bg-color-06 { background-color: #fff6f3; } .bg-color-07 { background-color: #d8c2be; } .bg-color-08 { background-color: #fef2f0; } .bg-color-09 { background-color: #efa697; } .bg-color-10 { background-color: #3f2b4e; } /*------------------------------------------*/ /* Buttons Colors /*------------------------------------------*/ .btn-tra-01, .scroll .btn-tra-01, .white-color .btn-tra-01, .tra-01-hover:hover, .scroll .tra-01-hover:hover, .white-color .tra-01-hover:hover { color: #efa697!important; background-color: transparent; border-color: #efa697!important; } .btn-tra-02, .scroll .btn-tra-02, .white-color .btn-tra-02, .tra-02-hover:hover, .scroll .tra-02-hover:hover, .white-color .tra-02-hover:hover { color: #efa697!important; background-color: transparent; border-color: #efa697!important; } .btn-color-01, .scroll .btn-color-01, .white-color .btn-color-01, .color-01-hover:hover, .scroll .color-01-hover:hover, .white-color .color-01-hover:hover { color: #fff!important; background-color: #b7948e; border-color: #b7948e!important; } .btn-color-02, .scroll .btn-color-02, .white-color .btn-color-02, .color-02-hover:hover, .scroll .color-02-hover:hover, .white-color .color-02-hover:hover { color: #fff!important; background-color: #efa697; border-color: #efa697!important; } /*------------------------------------------*/ /* Text Colors /*------------------------------------------*/ .txt-color-01, .txt-color-01 h2, .txt-color-01 h3, .txt-color-01 h4, .txt-color-01 h5, .txt-color-01 h6, .txt-color-01 p, .txt-color-01 a, .txt-color-01 li, .txt-color-01 i, .txt-color-01 span, .white-color .txt-color-01 { color: #727475; } .txt-color-02, .txt-color-02 h2, .txt-color-02 h3, .txt-color-02 h4, .txt-color-02 h5, .txt-color-02 h6, .txt-color-02 p, .txt-color-02 a, .txt-color-02 li, .txt-color-02 i, .txt-color-02 span, .white-color .txt-color-02 { color: #b7948e; } .txt-color-03, .txt-color-03 h2, .txt-color-03 h3, .txt-color-03 h4, .txt-color-03 h5, .txt-color-03 h6, .txt-color-03 p, .txt-color-03 a, .txt-color-03 li, .txt-color-03 i, .txt-color-03 span, .white-color .txt-color-03 { color: #efa697; } .txt-color-04, .txt-color-04 h2, .txt-color-04 h3, .txt-color-04 h4, .txt-color-04 h5, .txt-color-04 h6, .txt-color-04 p, .txt-color-04 a, .txt-color-04 li, .txt-color-04 i, .txt-color-04 span, .white-color .txt-color-04 { color: #bd857c; } .txt-color-05, .txt-color-05 h2, .txt-color-05 h3, .txt-color-05 h4, .txt-color-05 h5, .txt-color-05 h6, .txt-color-05 p, .txt-color-05 a, .txt-color-05 li, .txt-color-05 i, .txt-color-05 span, .white-color .txt-color-05 { color: #808080; } .txt-color-06, .txt-color-06 h2, .txt-color-06 h3, .txt-color-06 h4, .txt-color-06 h5, .txt-color-06 h6, .txt-color-06 p, .txt-color-06 a, .txt-color-06 li, .txt-color-06 i, .txt-color-06 span, .white-color .txt-color-06 { color: #efa697; } /* ========================================================================== 03. PRELOAD SPINNER =========================================================================== */ #loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999999; } #loading { background-color: #fefdfc; height: 100%; width: 100%; position: fixed; z-index: 99999999; margin-top: 0px; top: 0px; } .cssload-loader { position: absolute; left: 50%; top: 50%; margin-top: -40px; margin-left: -40px; width: 50px; height: 50px; animation: cssload-invert 2.3s infinite steps(2, end); -o-animation: cssload-invert 2.3s infinite steps(2, end); -ms-animation: cssload-invert 2.3s infinite steps(2, end); -webkit-animation: cssload-invert 2.3s infinite steps(2, end); -moz-animation: cssload-invert 2.3s infinite steps(2, end); } .fancy-spinner { display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; width: 5rem; height: 5rem; } .fancy-spinner div { position: absolute; width: 6rem; height: 6rem; border-radius: 50%; } .fancy-spinner div.ring { border-width: 0.25rem; border-style: solid; border-color: transparent; -webkit-animation: 2s fancy infinite alternate; animation: 2s fancy infinite alternate; } .fancy-spinner div.ring:nth-child(1) { border-left-color: #efa697; border-right-color: #efa697; } .fancy-spinner div.ring:nth-child(2) { border-top-color: #efa697; border-bottom-color: #efa697; -webkit-animation-delay: 1s; animation-delay: 1s; } .fancy-spinner div.dot { width: 1rem; height: 1rem; background: #efa697; } @-webkit-keyframes fancy { to { -webkit-transform: rotate(360deg) scale(0.5); transform: rotate(360deg) scale(0.5); } } @keyframes fancy { to { -webkit-transform: rotate(360deg) scale(0.5); transform: rotate(360deg) scale(0.5); } } /* ========================================================================== 04. HEADER & NAVIGATION =========================================================================== */ #header { width: 100%; display: block; padding-top: 0px; } .header-wrapper { position: fixed; top: 0; right: 0; left: 0; z-index: 999; } .headerwp { max-width: 1140px; margin: 0 auto; padding: 0; } .posrlt { position: relative; } /*------------------------------------------*/ /* 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 { background-color: black!important; padding: 20px 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .white-menu .wsmainfull { background-color: #fff!important; padding: 6px 0; -webkit-box-shadow: 0 2px 3px rgba(96, 96, 96, .085); -moz-box-shadow: 0 2px 3px rgba(96, 96, 96, .085); box-shadow: 0 2px 3px rgba(96, 96, 96, .085); } .dark-menu .wsmainfull { background-color: #222438!important; padding: 6px 0; -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); } /*------------------------------------------*/ /* HEADER LINK /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > a { display: block; font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; margin: 0 6px; padding: 10px 12px; line-height: 50px; text-decoration: none; } .navbar-dark .wsmenu > .wsmenu-list > li > a { color: #465777; } .navbar-light .wsmenu > .wsmenu-list > li > a { color: #fff; } .wsmenu > .wsmenu-list > li > a.last-link { padding: 10px 0px; margin: 0 0 0 7px; } .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 15px; position: absolute; text-align: right; top: 33px; width: 0; } /*------------------------------------------*/ /* HEADER CALL BUTTON /*------------------------------------------*/ .wsmenu > .wsmenu-list > li.header-phone > a { font-size: 17px; font-weight: 500; letter-spacing: 0; margin: 0; padding: 10px 0 10px 10px; } .wsmenu > .wsmenu-list > li.header-phone > a span { display: inline-block; text-align: center; width: 28px; height: 28px; line-height: 28px; margin-bottom: 0; margin-right: 8px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .wsmenu > .wsmenu-list > li.header-phone > a span i { font-size: 13px; margin-right: 0; } /*------------------------------------------*/ /* HEADER BUTTON /*------------------------------------------*/ .wsmenu > .wsmenu-list > li a.btn { font-size: 14px; line-height: 1; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 12px; margin-left: 10px; padding: 15px 20px; } /*------------------------------------------*/ /* HEADER SOCIAL LINKS /*------------------------------------------*/ .header-socials { margin: 0; display: inline-block; text-align: center; } .header-socials span { float: left; width: auto !important; display: inline-block !important; vertical-align: top; clear: none !important; margin: 0; } .header-socials a { display: block; font-size: 20px; line-height: 70px!important; margin-left: 18px; } /*------------------------------------------*/ /* HEADER SUBMENU /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > ul.sub-menu { padding: 10px 20px; width: auto; min-width: 200px; border: solid 1px #f2f7fb; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; -webkit-box-shadow: 0 8px 32px rgba(53, 61, 76, .2); -moz-box-shadow: 0 8px 32px rgba(53, 61, 76, .2); box-shadow: 0 8px 32px rgba(53, 61, 76, .2); } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:before, .wsmenu > .wsmenu-list > li > .wsmegamenu .link-list li a:before, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu .link-list > li > a:before { opacity: 0; position: absolute; left: 0; top: 8px; color: #efa697; font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f105"; font-size: 0.9rem; -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; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a, .wsmenu > .wsmenu-list > li > .wsmegamenu .link-list li a, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a { color: #9099a4; font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.25px; padding: 8px 0; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover, .wsmenu > .wsmenu-list > li > .wsmegamenu .link-list li a:hover, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover { color: #465777; padding: 8px 0 8px 16px; } .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover:before, .wsmenu > .wsmenu-list > li > .wsmegamenu .link-list li a:hover:before, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu .link-list > li > a:hover:before { left: 2px; opacity: 1; } /*------------------------------------------*/ /* HALFMENU /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu { width: 40%; padding: 15px 22px; border: solid 1px #f2f7fb; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; -webkit-box-shadow: 0 8px 32px rgba(53, 61, 76, .2); -moz-box-shadow: 0 8px 32px rgba(53, 61, 76, .2); box-shadow: 0 8px 32px rgba(53, 61, 76, .2); } .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu .link-list { padding: 0; } .wsmenu > .wsmenu-list > li > .wsmegamenu.w-70 .link-list li, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu .link-list li { position: relative; border-bottom: none; } /*------------------------------------------*/ /* MEGAMENU /*------------------------------------------*/ .wsmenu > .wsmenu-list > li > .wsmegamenu { border: solid 1px #f2f7fb; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; -webkit-box-shadow: 0 8px 32px rgba(53, 61, 76, .2); -moz-box-shadow: 0 8px 32px rgba(53, 61, 76, .2); box-shadow: 0 8px 32px rgba(53, 61, 76, .2); } .wsmenu > .wsmenu-list > li > .wsmegamenu.w-70 { width: 72%; left: 22%; padding: 20px 10px; } .wsmenu > .wsmenu-list > li > .wsmegamenu .title p, .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu .title p { font-size: 14.5px; line-height: 1; font-weight: 500; text-transform: uppercase; margin: 10px 0 10px 0; letter-spacing: 0; } /*------------------------------------------*/ /* NAVBAR SCROLL /*------------------------------------------*/ .tra-menu .wsmainfull.scroll, .white-menu .wsmainfull.scroll, .dark-menu.dark-scroll .wsmainfull.scroll { background-color: #fff!important; padding: 2px 0; -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); } .scroll .white-color.header-socials i { color: #8e7e51!important; } /*------------------------------------------*/ /* Navigation Menu /*------------------------------------------*/ .tra-menu.navbar-light .scroll .wsmenu > .wsmenu-list > li a { color: #444; } /*------------------------------------------*/ /* Logo Image /*------------------------------------------*/ .logo-white, .logo-black { display: block; } .navbar-light .logo-black, .navbar-dark .logo-white, .tra-menu.navbar-light .scroll .logo-white { display: none; } .tra-menu.navbar-light .scroll .logo-black { display: block; } /* ========================================================================== 05. HERO =========================================================================== */ .hero-section .container { position: relative; z-index: 3; } #hero-2 { background-image: url(../images/hero-2.jpg); background-position: bottom center; padding-top: 190px; padding-bottom: 485px; position: relative; } .hero-5-txt { background-image: url(../images/hero-5.jpg); } #hero-5-content { padding-top: 180px; padding-bottom: 400px; position: relative; z-index: 3; } #hero-6 { background-image: url(../images/hero-6.jpg); padding-top: 180px; padding-bottom: 110px; } #hero-10 { background-image: url(../images/hero-10.jpg); padding-top: 150px; padding-bottom: 60px; } #hero-11 { background-image: url(../images/hero-11.jpg); padding-top: 160px; padding-bottom: 110px; } #hero-12 .hero-overlay { height: 100%; background-color: rgba(10, 10, 10, .6); } /*------------------------------------------*/ /* HERO SLIDER /*------------------------------------------*/ .slider { position: relative; max-width: 100%; height: 650px; } .slideshow { height: 650px; } .slider.mt-80, .slideshow.mt-80 { height: 600px; margin-top: 80px; } .slider .slides { margin: 0; height: 650px; } .slideshow .slides { height: 650px; } .slider.mt-80 .slides, .slideshow.mt-80 .slides { margin: 0; height: 600px; } .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: 30px; 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 TEXT ROTATOR /*------------------------------------------*/ .hero-txt-rotator { position: relative; height: 650px; } .hero-txt-rotator .slides { margin: 0; height: 650px; } .hero-txt-rotator .caption { text-align: center; position: absolute; bottom: 0; left: 0; z-index: 20; width: 100%; height: 100%; } .hero-txt-rotator .caption-txt { width: 100%; position: absolute; top: 50%; transform: translateY(-50%); } /*------------------------------------------*/ /* Text Rotator Nav /*------------------------------------------*/ #hero-12 .flex-control-nav { bottom: 20px; } #hero-12 .flex-control-paging li a { position: relative; cursor: pointer; background-color: transparent; height: 10px; width: 10px; border: 2px solid #fff; opacity: .5; z-index: 999; } #hero-12 .flex-control-paging li a:hover { background-color: #fff; opacity: .65; } #hero-12 .flex-control-paging li a.flex-active { background-color: #fff; opacity: .65; } /*------------------------------------------*/ /* HERO TEXT /*------------------------------------------*/ #hero-1 .caption-txt { margin-top: 55px; } #hero-3 .caption-txt { margin-top: 40px; } .slideshow .slide .caption { padding-top: 30px; } .hero-6-content { position: relative; overflow: hidden; margin: 0 3%; padding: 45px 55px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .hero-6-txt { position: relative; z-index: 999!important; } #hero-6 .tra-leafs { position: absolute; bottom: -140px; right: -10px; opacity: .18; z-index: 2; } #hero-7 .caption-txt, #hero-12 .caption-txt { margin-top: 35px; } #hero-8 .caption { margin-top: -40px; } #hero-9 .caption { margin-top: 30px; } .hero-10-txt { padding-left: 20px; } /*------------------------------------------*/ /* Hero Headers /*------------------------------------------*/ #hero-1 h2 { font-size: 6rem; line-height: 1.15; letter-spacing: 2px; margin-bottom: 15px; } #hero-2 h2 { font-size: 4.25rem; line-height: 1.2; letter-spacing: 2px; margin-bottom: 20px; } #hero-3 h2 { font-size: 6.75rem; letter-spacing: 2px; margin-bottom: 10px; } #hero-4 h2 { font-size: 9.5rem; line-height: 1; letter-spacing: 4px; margin-bottom: 20px; } #hero-5 h3 { font-size: 3.75rem; letter-spacing: 2px; margin-bottom: 20px; } #hero-6 h3 { margin-bottom: 15px; } #hero-7 h2 { font-size: 5rem; letter-spacing: 2px; margin-bottom: 15px; } #hero-7 h3 { font-family: 'Alex Brush', cursive; letter-spacing: 2px; margin-bottom: 8px; } #hero-8 h3 { font-size: 4.25rem; letter-spacing: 2px; padding: 0 2%; margin-bottom: 20px; } #hero-9 h2 { font-size: 10rem; line-height: 1; text-transform: uppercase; letter-spacing: 4px; margin-bottom: 25px; } #hero-10 h2 { font-size: 4rem; line-height: 1.25; letter-spacing: 2px; margin-bottom: 20px; } #hero-11 h2 { font-size: 8.75rem; line-height: 1.2; letter-spacing: 2px; margin-bottom: 15px; } #hero-12 h2 { font-size: 10rem; line-height: 1; font-weight: 600; text-transform: uppercase; letter-spacing: 4px; margin-bottom: 25px; } /*------------------------------------------*/ /* Hero Paragraphs /*------------------------------------------*/ #hero-1 .caption-txt p { font-size: 1.3rem; margin-bottom: 30px; } .hero-2-txt p { font-size: 1.35rem; padding: 0 10%; margin-bottom: 0; } #hero-3 .caption-txt p, #hero-7 .caption-txt p { font-size: 1.35rem; padding: 0 15%; margin-bottom: 35px; } #hero-7 .caption-txt p { margin-bottom: 30px; } #hero-4 .caption p { font-size: 1.25rem; padding: 0 20%; margin-bottom: 35px; } .hero-6-txt p { font-size: 1.25rem; margin-bottom: 30px; } #hero-8 .caption p { font-size: 1.35rem; padding: 0 15%; margin-bottom: 30px; } #hero-9 .caption p { font-size: 1.4rem; font-weight: 400; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 35px; } .hero-10-txt p { font-size: 1.3rem; padding-right: 5%; margin-bottom: 35px; } .hero-11-txt p { font-size: 1.35rem; padding: 0 15%; margin-bottom: 35px; } #hero-12 .caption-txt p { font-size: 1.35rem; padding: 0 20%; margin-bottom: 35px; } /*------------------------------------------*/ /* HERO FORM /*------------------------------------------*/ .hero-form { padding: 45px 25px 40px; margin: 0 15px 0 50px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .hero-form .col-md-12 { padding: 0; } /*------------------------------------------*/ /* Hero Form Text /*------------------------------------------*/ .hero-form h5 { line-height: 1; margin-bottom: 30px; } /*------------------------------------------*/ /* Hero Form Input /*------------------------------------------*/ .hero-form .form-control, .hero-form .custom-select { background-color: #fff; border: 1px solid #ccc; color: #727475; height: 54px; font-size: 17px; line-height: 1; font-weight: 300; padding: 0 15px; margin-bottom: 22px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; box-shadow: none; } .hero-form .custom-select { display: inline-block; width: 100%; color: #5f5842; margin-bottom: 22px; } /*------------------------------------------*/ /* Contact Form Placeholder /*------------------------------------------*/ .hero-form .form-control::-moz-placeholder { color: #727475; } .hero-form .custom-select::-moz-placeholder { color: #727475; } .hero-form .form-control:-ms-input-placeholder { color: #727475; } .hero-form .custom-select:-ms-input-placeholder { color: #727475; } .hero-form .form-control::-webkit-input-placeholder { color: #727475; } .heroe-form .custom-select::-webkit-input-placeholder { color: #727475; } /*------------------------------------------*/ /* Hero Form Input Focus /*------------------------------------------*/ .hero-form .form-control:focus { outline: 0px none; box-shadow: none; border-color: #ccc; } /*------------------------------------------*/ /* Hero Form Button /*------------------------------------------*/ .hero-form .btn { display: block; width: 100%; height: 54px; margin-top: 0; } /*------------------------------------------*/ /* Hero Form Message /*------------------------------------------*/ .hero-form-msg { width: 100%!important; display: block; margin-top: 10px; padding-left: 0; } .hero-form .loading { color: #00b2e4; font-size: 18px; font-weight: 400; } .hero-form .error { color: #e74c3c; font-size: 14.5px; font-weight: 300; margin-bottom: 20px; } .hero-form .form-control.error { font-size: 17px!important; } /*------------------------------------------*/ /* HERO IMAGE /*------------------------------------------*/ .hero-5-img .video-preview { margin: -330px 0 0; } .hero-5-img .video-preview, .hero-5-img .video-preview img { -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; } .hero-5-img img { border: 2px solid rgba(255, 255, 255, .85); } /* ========================================================================== 06. ABOUT =========================================================================== */ #about-8.bg-image { background-image: url(../images/about-8.jpg); } #about-9 { padding-top: 60px; padding-bottom: 60px; } #about-9 .bg-inner { position: relative; z-index: 1; } .abox-1-wrapper { padding: 0 3%; margin-top: 70px; } #about-6 .txt-block { padding: 0 50px 0 30px; } #about-7 .col-lg-4, #about-8 .col-lg-6 { padding: 0; } #about-7 .txt-block { padding: 0 55px; } #about-7 .txt-block h4, #about-8 .txt-block h4, #about-9 .txt-block h3 { margin-bottom: 18px; } #about-7 .txt-block .btn, #about-8 .txt-block .btn { margin-top: 10px; } /*------------------------------------------*/ /* ABOUT TEXT /*------------------------------------------*/ .abox-1-txt { overflow: hidden; padding-left: 20px; } .abox-2 { padding: 0 15px; } #a4-1.abox-2 { padding: 0 35px; } .abox-4 { position: relative; width: 270px; height: 270px; display: inline-block; margin-bottom: 40px; overflow: hidden; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -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); -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; } .abox-4:hover { box-shadow: 0px 8px 17px 0px rgba(0, 0, 0, .1); } .abox-4-txt { width: 80%; left: 10%; position: absolute; top: 50%; transform: translateY(-50%); } .about-5-banner { width: 29%; position: absolute; padding: 45px 50px; margin-right: -100px; z-index: 98; } /*------------------------------------------*/ /* ABOUT TEXT TYPOGRAPHY /*------------------------------------------*/ .abox-1 h5 { line-height: 1; margin-bottom: 10px; } .abox-2 h5, .abox-2 h4 { margin-bottom: 15px; } .abox-3 h6 { margin-top: 15px; margin-bottom: 0; } .about-5-banner h4 { margin-bottom: 20px; } .abox-1 p, .abox-2 p { line-height: 1.5; margin-bottom: 0; } .w-hours .list-item p { margin-bottom: 5px; } .abox-4 span { display: block; font-size: 3.5rem; line-height: 1; font-weight: 700; letter-spacing: -2px; margin-top: 15px; margin-bottom: 0; } #about-6 .txt-block p span { font-size: 1.5rem; font-weight: 700; } /*------------------------------------------*/ /* ABOUT BOX ICON /*------------------------------------------*/ .abox-1 span { float: left; text-align: center; margin-top: 1px; } /*------------------------------------------*/ /* ABOUT IMAGE /*------------------------------------------*/ .a4-img { padding: 0; } .about-6-img { text-align: center; } .about-6-img img { max-width: none; display: inline-block; } .about-8-img { padding-left: 30px; padding-right: 30px; } .about-9-img { text-align: center; margin-top: -60px; margin-bottom: -60px; } /* ========================================================================== 07. SERVICES =========================================================================== */ #services-4, #services-7 { position: relative; z-index: 99; } #services-4:after { position: absolute; content: ''; width: 89%; height: 86%; bottom: 14%; left: 11%; z-index: -1; } .sbox-4-wrapper .col-lg-3 { padding-left: 10px; padding-right: 10px; } .sbox-5-wrapper { border: 1px solid #f5f5f5; padding: 65px 50px 25px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -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); } #services-5 .img-block { margin-top: 40px; margin-right: -60px; } #services-6 { position: relative; z-index: 99; } #services-7 .col-lg-3 { padding-left: 0; padding-right: 0; } #services-6 .inner-block { background-color: #fff; border: 1px solid #f5f5f5; padding: 100px 70px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -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); } #services-6 .section-title p { padding: 0 10%; } #services-6:after { position: absolute; content: ''; width: 100%; height: 80%; bottom: 10%; left: 0; z-index: -1; } #services-8 { padding-top: 80px; padding-bottom: 40px; } .sbox-10-wrapper .col-lg-3, #services-14 .col-lg-4 { padding-left: 10px; padding-right: 10px; } #services-17 .col-lg-4 { padding-left: 0; padding-right: 0; } /*------------------------------------------*/ /* SERVICE BOX /*------------------------------------------*/ .sbox-1, .sbox-2, .sbox-5, .sbox-8 { text-align: center; margin-bottom: 40px; } .sbox-3 { text-align: center; padding: 50px 30px; margin-bottom: 30px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -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); } .sbox-4 { text-align: center; background-color: #fff; border: 1px solid #f5f5f5; padding: 50px 20px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -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); } .sbox-6 { text-align: center; } .sbox-7 { text-align: center; padding: 60px 15px; border-right: 1px solid #e7e6e2; } .sbox-7 { text-align: center; padding: 60px 15px; border-right: 1px solid #e7e6e2; } #s7-4 { border-right: none; } .sbox-9 { margin-bottom: 40px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .sbox-10, .sbox-18 { margin-bottom: 40px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -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); } .sbox-10-txt { padding: 35px 30px 40px; } .sbox-11 { margin-bottom: 30px; } .sbox-12 { text-align: center; margin-bottom: 40px; } .sbox-12-txt { padding: 20px 5% 0; } .sbox-13 { background-position: bottom center; margin-bottom: 30px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .sbox-13-txt { padding: 60px 40% 60px 40px; -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); } #s13-1 { background-image: url(../images/s13-1.png); } #s13-2 { background-image: url(../images/s13-2.png); } #s13-3 { background-image: url(../images/s13-3.png); } #s13-4 { background-image: url(../images/s13-4.png); } .sbox-14 { position: relative; overflow: hidden; border: 1px solid #f5f5f5; padding: 35px 30px; margin-bottom: 20px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -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); } .sbox-15 { margin-bottom: 30px; } .sbox-17 { text-align: center; background-color: #fff; padding: 60px 40px; margin-bottom: 30px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } #s17-2.sbox-17 { position: relative; padding: 100px 40px; -webkit-box-shadow: 0 10px 50px 0 rgba(53,82,99,.09); -moz-box-shadow: 0 10px 50px 0 rgba(53,82,99,.09); box-shadow: 0 10px 50px 0 rgba(53,82,99,.09); box-shadow: 0 10px 50px 0 rgba(53,82,99,.09); z-index: 98; } .sbox-18-txt { padding: 35px 20px 40px; } /*------------------------------------------*/ /* SERVICE BOX TYPOGRAPHY /*------------------------------------------*/ .sbox-1 h5, .sbox-2 h5 { margin-top: 30px; margin-bottom: 10px; } .sbox-3 h5 { margin-top: 20px; margin-bottom: 10px; } .sbox-4 h5, .sbox-5 h5 { margin-top: 30px; margin-bottom: 10px; } .sbox-6 h6, .sbox-8 h6 { margin-top: 20px; margin-bottom: 0; } .sbox-10 h5 { margin-bottom: 12px; } .sbox-12 h5 { margin-bottom: 25px; } .sbox-13 h5 { margin-bottom: 15px; } .sbox-14 h4 { font-family: 'Alex Brush', cursive; letter-spacing: 1px; margin-bottom: 0; } .sbox-17 h5 { margin-top: 30px; margin-bottom: 20px; } .sbox-18 h5 { margin-bottom: 8px; } .sbox-1 p, .sbox-2 p, .sbox-3 p, .sbox-5 p { line-height: 1.5; margin-bottom: 0; } .sbox-3 p { line-height: 1.5; margin-bottom: 20px; } .sbox-4 p { line-height: 1.5; margin-bottom: 20px; } .sbox-7 p { font-size: 0.925rem; line-height: 1; font-weight: 700; text-transform: uppercase; margin-top: 30px; margin-bottom: 0; } .sbox-10 p { margin-bottom: 18px; } .sbox-12 p { margin-bottom: 3px; } .sbox-13 p { margin-bottom: 20px; } .sbox-14 p { font-size: 1.35rem; line-height: 1; font-weight: 600; text-transform: uppercase; margin-bottom: 30px; } .sbox-18 p { line-height: 1; margin-bottom: 10px; } /*------------------------------------------*/ /* SERVICE BOX ICON /*------------------------------------------*/ .sbox-2-ico, .sbox-3-ico, .sbox-4-ico, .sbox-5-ico, .sbox-7-ico { display: inline-block; position: relative; z-index: 99; } .sbox-3-img { display: inline-block; width: 170px; height: 170px; overflow: hidden; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .sbox-8-img { display: inline-block; width: 150px; height: 150px; border: 4px solid #fff; overflow: hidden; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .sbox-3-img img, .sbox-8-img img { -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .sbox-9, .sbox-11, .sbox-12-img, .sbox-15, .sbox-9 img, .sbox-11 img, .sbox-12-img img, .sbox-15 img { overflow: hidden; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .sbox-10-img, .sbox-18-img { overflow: hidden; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; } .sbox-10-img img, .sbox-18-img img { -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; } .sbox-ico-bg { position: absolute; width: 130px; height: 120px; background-image: url(../images/sbox-bg-pink.png); opacity: .4; transform: rotate(40deg); z-index: -1; left: 50%; top: 50%; margin-left: -68px; margin-top: -35px; } .ico-90 .sbox-ico-bg, .ico-95 .sbox-ico-bg { margin-left: -68px; margin-top: -40px; } .sbox-14-ico { position: absolute; bottom: 30px; right: 30px; opacity: .4; } .sbox-17-ico { display: inline-block; padding: 40px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } /*------------------------------------------*/ /* Sbox Image Meta /*------------------------------------------*/ .sbox-9-img-meta, .sbox-11-img-meta { width: 100%; background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, .01)); background-image: linear-gradient(bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, .01)); padding: 80px 30px 30px; position: absolute; left: 0; bottom: 0; overflow: hidden; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 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; } .sbox-15-img-meta { text-align: center; position: absolute; bottom: 0; left: 0; z-index: 20; width: 100%; height: 100%; -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; } .sbox-16-img-meta { text-align: center; position: absolute; bottom: 0; left: 0; z-index: 20; width: 100%; height: 100%; -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; } .sbox-15-txt { width: 100%; position: absolute; top: 50%; transform: translateY(-50%); } .sbox-16-txt { width: 100%; position: absolute; bottom: 12%; } .sbox-9-img-meta h5, .sbox-11-img-meta h5 { margin-bottom: 8px; } .sbox-15-txt h4 { margin-bottom: 14px; } .sbox-16-img-meta h5 { line-height: 1; margin-bottom: 5px; } .sbox-9-img-meta p, .sbox-11-img-meta p { margin-bottom: 0; } .sbox-15-txt p { padding: 0 20%; margin-bottom: 20px; } .sbox-16-img-meta p { font-weight: 400; margin-bottom: 15px; } /*------------------------------------------*/ /* Sbox Image Meta /*------------------------------------------*/ .sbox-9-price, .sbox-11-price { width: 100%; position: relative; margin-top: 20px; 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; } .sb-9-txt, .sb-11-txt { -webkit-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 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; } .sb-9-data, .sb-11-data { -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 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; } .sbox-9-price span, .sbox-11-price span { font-family: 'Lustria', serif; font-size: 2.85rem; line-height: 1; letter-spacing: 1px; } .sbox-9-price .btn, .sbox-11-price .btn { position: absolute; right: 5px; top: 0; } .sbox-12-link { width: 100%; opacity: 0; position: absolute; left: 0; bottom: 0; overflow: hidden; -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; } /*------------------------------------------*/ /* Overlay Background /*------------------------------------------*/ .services-section .item-overlay { opacity: 0; -moz-opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(10, 10, 10, .3); -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; } /*------------------------------------------*/ /* Sbox Image Hover Overlay /*------------------------------------------*/ .services-section .hover-overlay { width: 100%; height: auto; overflow: hidden; position: relative; } .services-section .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; } /*------------------------------------------*/ /* Sbox Image Hover Effect /*------------------------------------------*/ .sbox-3:hover img, .sbox-8:hover img { transform: scale(1.2); -ms-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); -moz-transform: scale(1.2); } .sbox-9:hover img, .sbox-10:hover img, .sbox-11:hover img, .sbox-12:hover img, .sbox-15:hover img, .sbox-16:hover img, .sbox-18: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); } .sbox-9:hover .item-overlay, .sbox-11:hover .item-overlay, .sbox-12:hover .item-overlay { opacity: 1; -moz-opacity: 1; } .sbox-9:hover .sbox-9-price, .sbox-11:hover .sbox-11-price { opacity: 1; -moz-opacity: 1; } .sbox-9:hover .sb-9-txt, .sbox-11:hover .sb-11-txt, .sbox-9:hover .sb-9-data, .sbox-11:hover .sb-11-data { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .sbox-12:hover .sbox-12-link { opacity: 1; -moz-opacity: 1; bottom: 43%; } /* ========================================================================== 08. GALLERY =========================================================================== */ /*------------------------------------------*/ /* FILTER BUTTONS /*------------------------------------------*/ .masonry-filter button { background-color: transparent; color: #727475; font-family: 'Lustria', serif; font-size: 1.15rem; line-height: 1.1rem; margin: 0 20px; padding: 0.5rem 0.1rem; border: none; cursor: pointer; border-bottom: 1px solid transparent; outline: 0px 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; } /*------------------------------------------*/ /* Filter Button Hover /*------------------------------------------*/ .masonry-filter button:hover, .masonry-filter button:focus { background-color: transparent; color: #555; border-bottom: 1px solid #727475; outline: 0px none; } /*------------------------------------------*/ /* Filter Button Active /*------------------------------------------*/ .masonry-filter button.is-checked { color: #efa697; cursor: default; border-bottom: 1px solid #efa697; outline: 0px none; } /*------------------------------------------*/ /* GALLERY IMAGES HOLDER /*------------------------------------------*/ .gallery-item { position: relative; text-align: center; margin-bottom: 30px; } .masonry-wrap .masonry-item { position: relative; text-align: center; width: 33.33%; padding: 0 10px; margin-bottom: 20px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } #blog-2 .masonry-wrap .masonry-item { position: relative; text-align: left; width: 33.33%; padding: 0 10px; margin-bottom: 20px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .gallery-item, .video-preview, .gallery-item img, .video-preview img, .masonry-item .hover-overlay, .carousel-image .hover-overlay, .masonry-item .hover-overlay img, .carousel-image .hover-overlay img { overflow: hidden; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .carousel-image { position: relative; padding: 0 5px; } #gallery-3 .col-md-12 { padding-left: 10px; padding-right: 10px; } /*------------------------------------------*/ /* Gallery Image Meta /*------------------------------------------*/ .image-description { 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; } .image-data { width: 100%; position: absolute; top: 50%; transform: translateY(-50%); } .image-data h6, .image-data h5 { margin-bottom: 5px; -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 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; } .image-data p { margin-bottom: 0; -webkit-transform: translate3d(0, 15px, 0); transform: translate3d(0, 15px, 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; } /*------------------------------------------*/ /* Image Hover Overlay /*------------------------------------------*/ .hover-overlay { width: 100%; height: auto; overflow: hidden; position: relative; } .hover-overlay 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); overflow: hidden; -webkit-transition: transform 400ms; -moz-transition: transform 400ms; -o-transition: transform 400ms; transition: transform 400ms; } .sbox-16-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(10, 10, 10, 0.25); } .sbox-16 .hover-overlay img { transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -moz-transform: scale(1); } /*------------------------------------------*/ /* Overlay Background /*------------------------------------------*/ .item-overlay { opacity: 0; -moz-opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(239, 166, 151, 0.8); -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; } .item-overlay::before, .item-overlay::after { position: absolute; top: 30px; right: 30px; bottom: 30px; left: 30px; content: ''; opacity: 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; } .carousel-image .item-overlay::before, .carousel-image .item-overlay::after { top: 20px; right: 20px; bottom: 20px; left: 20px; } .item-overlay::before { border-top: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: scale(0,1); transform: scale(0,1); } .item-overlay::after { border-right: 1px solid #fff; border-left: 1px solid #fff; -webkit-transform: scale(1,0); transform: scale(1,0); } /*------------------------------------------*/ /* Image Hover Effect /*------------------------------------------*/ .gallery-item:hover img, .masonry-item:hover img, .carousel-image:hover img { transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -moz-transform: scale(1); } .sbox-16: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-item:hover .item-overlay, .masonry-item:hover .item-overlay, .carousel-image:hover .item-overlay, .gallery-item:hover .image-description, .masonry-item:hover .image-description, .carousel-image:hover .image-description { opacity: 1; -moz-opacity: 1; } .gallery-item:hover .item-overlay::before, .masonry-item:hover .item-overlay::before, .carousel-image:hover .item-overlay::before, .gallery-item:hover .item-overlay::after, .masonry-item:hover .item-overlay::after, .carousel-image:hover .item-overlay::after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .gallery-item:hover .image-data h5, .masonry-item:hover .image-data h5, .carousel-image:hover .image-data h6, .gallery-item:hover .image-data p, .masonry-item:hover .image-data p, .carousel-image:hover .image-data p { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } #gallery-3 .owl-dots { display: none; } /*------------------------------------------*/ /* ALL PROJECTS BUTTON /*------------------------------------------*/ .more-gallery-btn { text-align: center; margin-top: 40px; } #gallery-2 .more-gallery-btn { margin-top: 30px; margin-bottom: 30px; } #gallery-3 .more-gallery-btn { margin-top: 60px; } /* ========================================================================== 09. VIDEO =========================================================================== */ #video-1 { background-image: url(../images/video-1.jpg); padding-top: 230px; padding-bottom: 230px; } #video-2-content { padding-top: 100px; padding-bottom: 350px; position: relative; } /*------------------------------------------*/ /* VIDEO TEXT TYPOGRAPHY /*------------------------------------------*/ .video-txt h3 { margin-bottom: 20px; } /*------------------------------------------*/ /* VIDEO LINK /*------------------------------------------*/ .video-2-link { margin-top: -310px; } /* ========================================================================== 10. TEAM =========================================================================== */ .team-member { text-align: center; position: relative; z-index: 99; margin-bottom: 40px; -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); -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; } .tm-meta { background-color: #fff; padding: 25px 10px; -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; } .tm-meta h6 { margin-bottom: 2px; } .tm-meta span { font-size: 1.0625rem; font-weight: 400; display: block; } /*------------------------------------------*/ /* Team Member Photo /*------------------------------------------*/ .team-member-photo { position: relative; } .team-member-photo img { -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; } /*------------------------------------------*/ /* Team Member Social Links /*------------------------------------------*/ .tm-social ul { width: 100%; display: inline-block; padding-left: 0; margin-top: 14px; position: absolute; right: 0; bottom: 0; z-index: 20; zoom: 1; opacity: 0; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; } .tm-social ul li { width: auto !important; display: inline-block !important; vertical-align: top; clear: none !important; padding: 0; } .tm-social a { width: 40px; height: 40px; color: #fff; background-color: rgba(10, 10, 10, .35); font-size: 1.15rem; line-height: 40px!important; margin-right: 1px; display: block; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -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; } .tm-social a.ico-facebook:hover { background-color: #3b5998; } .tm-social a.ico-twitter:hover { background-color: #00a9ed; } .tm-social a.ico-instagram:hover { background-color: #e44772 } .tm-social a.ico-dribbble:hover { background-color: #d92d84; } .tm-social a.ico-behance:hover { background-color: #2473f6; } .tm-social a.ico-pinterest:hover { background-color: #ac281a; } .tm-social a.ico-linkedin:hover { background-color: #015886; } .tm-social a.ico-google-plus:hover { background-color: #cd1111; } .tm-social a.ico-youtube:hover { background-color: #cd1b20; } .tm-social a.ico-tumblr:hover { background-color: #3a5976; } .tm-social a.ico-vk:hover { background-color: #3b5998; } .team-member { position: relative; } /*------------------------------------------*/ /* Sbox Image Hover Overlay /*------------------------------------------*/ .team-section .hover-overlay { width: 100%; height: auto; overflow: hidden; position: relative; } .team-section .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; } /*------------------------------------------*/ /*. Image Hover Effect /*------------------------------------------*/ .team-member: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); } .team-member:hover .tm-social ul { bottom: 6%; opacity: 1; -moz-opacity: 1; } /* ========================================================================== 11. PRICING =========================================================================== */ #pricing-2 .col-lg-4 { padding-left: 0; padding-right: 0; } .pricing-2-banner { padding: 55px 50px; } .pricing-list li { padding-bottom: 20px; margin: 0 15px 20px; border-bottom: 1px dashed #5f5842; } #pricing-2 .pricing-list li { padding-bottom: 15px; margin: 0 0 15px; border-bottom: 1px dashed #5f5842; } .pricing-list li:last-child, #pricing-2 .pricing-list li:last-child { border-bottom: none; } .pricing-list-txt { position: relative; } .pricing-list-txt h5, .pricing-list-txt h6 { line-height: 1; margin-bottom: 5px; } .pricing-list-txt p { margin-bottom: 0; } #pricing-2 .pricing-list-txt p { font-size: 1rem; } .pricing-list-amount { position: absolute; right: 10px; top: 0; letter-spacing: 1px; } .pricing-2-banner h5.h5-xl, .pricing-2-table h5.h5-xl { margin-bottom: 15px; } .pricing-2-banner h6 { line-height: 1; margin-bottom: 8px; } .pricing-2-banner span { display: block; font-size: 1.1rem; line-height: 1; margin-bottom: 20px; } .pricing-2-img { -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, .05); -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, .05); box-shadow: 0 8px 16px rgba(0, 0, 0, .05); } /*------------------------------------------*/ /* PRICING TABLE /*------------------------------------------*/ .pricing-2-table { padding: 60px 30px 30px; } /* ========================================================================== 12. BRANDS =========================================================================== */ #brands-1 { padding-top: 45px; padding-bottom: 45px; } #brands-1 p.p-xl { font-weight: 400; margin-bottom: 40px; } /*------------------------------------------*/ /* BRANDS LOGO HOLDER /*------------------------------------------*/ #brands-1 .brand-logo { padding: 0 15px; } #brands-1 .owl-dots { display: none; } /* ========================================================================== 13. TESTIMONIALS =========================================================================== */ .review-1 { text-align: center; margin-bottom: 40px; } /*------------------------------------------*/ /* Testimonial Message Avatar /*------------------------------------------*/ .review-2 .testimonial-avatar { display: inline-block; float: left; } .testimonial-avatar img { width: 120px; height: 120px; display: inline-block; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; } #reviews-1 .testimonial-avatar img { width: 100px; height: 100px; display: block; margin: 0 auto 18px; } /*------------------------------------------*/ /* Testimonial Author Data /*------------------------------------------*/ .author-data h6 { line-height: 1; margin-bottom: 5px; } .author-data p { margin-bottom: 8px; } /*------------------------------------------*/ /* Testimonial Message Text /*------------------------------------------*/ .review-2-txt { overflow: hidden; padding-left: 25px; } .review-1-txt p { font-size: 1.15rem; line-height: 1.4; font-weight: 300; font-style: italic; padding: 0 8%; } .review-2-txt p.review-txt { color: #5f5842; margin-top: 10px; font-weight: 400; margin-bottom: 12px; } /*------------------------------------------*/ /* Testimonial Author /*------------------------------------------*/ .review-2-txt .review-author { padding-right: 40px; } .review-2-txt .review-author p { margin-bottom: 0; } .review-2-txt .review-author p span { font-weight: 500; } /*------------------------------------------*/ /* Carousel Dots /*------------------------------------------*/ #reviews-1 button { background-color: transparent; border: none; padding: 0 2px; } .owl-theme .owl-dots .owl-dot span { height: 10px; width: 10px; border: 2px solid #727475; background: transparent; margin: 0 5px; } .owl-dots button:focus { outline: none; background: #727475; text-decoration: none; } .owl-theme .owl-dots .owl-dot:hover span, .owl-theme .owl-dots .owl-dot.active span { background: #727475; } /* ========================================================================== 14. STATISTIC =========================================================================== */ #statistic-1 { padding-top: 80px; padding-bottom: 40px; } .statistic-block { margin-bottom: 40px; } /*------------------------------------------*/ /* STATISTIC BLOCK /*------------------------------------------*/ h5.statistic-number { font-size: 3.25rem; line-height: 1; letter-spacing: 3px; margin-bottom: 10px; } .statistic-block p { font-weight: 400; margin-bottom: 0; } .statistic-ico { margin-bottom: 30px; } /* ========================================================================== 15. BANNER =========================================================================== */ #banner-1 { background-image: url(../images/banner-1.jpg); } #banner-2 { background-image: url(../images/banner-2.jpg); } #banner-3 { background-image: url(../images/banner-3.jpg); } #banner-4 { background-image: url(../images/banner-4.jpg); padding-top: 130px; padding-bottom: 130px; } #banner-5.bg-image { background-image: url(../images/banner-5.jpg); } #banner-5 .container { padding-top: 60px; padding-bottom: 60px; } #banner-5.bg-image .container { padding-top: 80px; padding-bottom: 80px; } #banner-6 { padding-top: 70px; padding-bottom: 70px; } #banner-6.bg-image { background-image: url(../images/banner-6.jpg); } /*------------------------------------------*/ /* BANNER TEXT /*------------------------------------------*/ .banner-2-txt { padding-left: 30px; padding-right: 30px; } .banner-3-txt { padding-right: 30px; } /*------------------------------------------*/ /* BANNER TYPOGRAPHY /*------------------------------------------*/ .banner-1-txt h2 { font-size: 5rem; line-height: 1; margin-bottom: 15px; } .banner-2-txt h2, .banner-3-txt h2 { font-size: 3.75rem; line-height: 1; margin-bottom: 10px; } .banner-2-txt h3, .banner-3-txt h3 { line-height: 1.15; margin-bottom: 20px; } .banner-4-txt h3 { font-size: 3.25rem; line-height: 1; margin-bottom: 15px; } .banner-5-txt h2 { line-height: 1; margin-bottom: 5px; } .banner-5-txt h3 { margin-bottom: 10px; } .banner-6-txt h2 { font-size: 8rem; line-height: 1; margin-bottom: 10px; } .banner-6-txt h3 { font-size: 2.5em; line-height: 1; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 14px; } .banner-1-txt p { font-weight: 400; margin-bottom: 30px; } .banner-2-txt p, .banner-3-txt p { margin-bottom: 25px; } .banner-4-txt p { font-size: 1.25rem; font-weight: 400; padding: 0 5%; margin-top: 20px; margin-bottom: 30px; } .banner-5-txt p { padding: 0 5%; margin-bottom: 25px; } .banner-6-txt p { font-size: 1.55rem; line-height: 1; margin-bottom: 0; } /* ========================================================================== 17. FAQs =========================================================================== */ .question { margin-bottom: 25px; } /*------------------------------------------*/ /* FAQs TYPOGRAPHY /*------------------------------------------*/ .question h5 { margin-bottom: 10px; } .question h5 span { margin-right: 3px; } /*------------------------------------------*/ /* More Questions Button /*------------------------------------------*/ .more-questions-btn { margin-top: 30px; } /* ========================================================================== 18. BLOG =========================================================================== */ .blog-post { margin-bottom: 40px; } #blog-page .blog-post { margin-bottom: 50px; } .blog-post-txt { margin-top: 20px; } .single-post-title { margin-top: 30px; margin-bottom: 30px; } /*------------------------------------------*/ /* BLOG POST TYPOGRAPHY /*------------------------------------------*/ .blog-post-txt h5, .single-post-title h5 { margin-top: 10px; margin-bottom: 10px; } .blog-post-txt span, .single-post-title span { font-size: 0.9rem; line-height: 1; font-weight: 700; text-transform: uppercase; } .blog-post-txt p.post-author, .single-post-title p.post-author { line-height: 1; margin-bottom: 0; } .blog-post-img, .blog-post-img img { overflow: hidden; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } /*------------------------------------------*/ /* ALL POSTS BUTTON /*------------------------------------------*/ .all-posts-btn { margin-top: 15px; margin-bottom: 40px; } /*------------------------------------------*/ /* SINGLE POST /*------------------------------------------*/ .single-post-txt h5.h5-md { margin-top: 25px; margin-bottom: 30px; } /*------------------------------------------*/ /* BLOG POST INNER IMAGE /*------------------------------------------*/ .post-inner-img { text-align: center; margin-top: 40px; margin-bottom: 40px; } .post-inner-img p { text-align: left; margin-top: 25px; margin-bottom: 0; } /*------------------------------------------*/ /* SINGLE POST QUOTE /*------------------------------------------*/ .quote { margin-top: 35px; margin-bottom: 35px; } .quote p { font-size: 1.25rem!important; font-weight: 300; border-left: 3px solid #2dcb21; padding-left: 20px; margin-top: 25px; margin-bottom: 20px; } /*------------------------------------------*/ /* POST TAGS /*------------------------------------------*/ .post-share-links { margin-top: 60px; } .post-tags-list span a { color: #efa697; font-size: 1rem; font-weight: 400; line-height: 1; background-color: transparent; border: 1px solid #efa697; padding: 10px 15px; margin-right: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -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; } .post-tags-list span a:hover { color: #fff; background-color: #efa697; border-color: #efa697; } /*------------------------------------------*/ /* POST SHARE ICONS /*-----------------------------------------*/ .post-share-links .share-social-icons { display: inline-block; padding-left: 0; } .post-share-links .share-social-icons li { width: auto !important; display: inline-block!important; vertical-align: top; clear: none !important; padding: 0; } .post-share-links .share-social-icons a.share-ico i { display: block; width: 40px; height: 40px; font-size: 25px; line-height: 40px; } /*------------------------------------------*/ /* ABOUT POST AUTHOR /*------------------------------------------*/ .author-senoff { margin: 90px 0 70px; padding: 70px 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } .author-senoff img { width: 120px; height: 120px; float: left; text-align: center; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; } .author-senoff-txt { position: relative; overflow: hidden; padding-left: 30px; } .author-senoff-txt p.p-md { font-size: 0.875rem; line-height: 1; font-weight: 600; letter-spacing: 0; text-transform: uppercase; margin-bottom: 8px; } .author-senoff-txt h5.h5-lg { line-height: 1; font-weight: 800; margin-bottom: 15px; } .author-senoff-txt p { margin-bottom: 0; } .author-follow-btn { display: inline-block; position: absolute; color: #b9ad8b; font-size: 0.925rem; line-height: 1; font-weight: 400; padding: 4px 10px; top: 1px; right: 12px; border: 1px solid #b9ad8b; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } /*------------------------------------------*/ /* OTHER POST /*------------------------------------------*/ .other-posts h5 { margin-bottom: 35px; } .other-posts h6 { margin-top: 5px; margin-bottom: 0; } /*------------------------------------------*/ /* POST COMMENTS /*------------------------------------------*/ .post-comments { margin-top: 40px; margin-bottom: 80px; } .post-comments h5 { padding-bottom: 30px; margin-bottom: 80px; border-bottom: 1px solid #ddd; } .post-comments img { width: 75px; height: 75px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; } .comment-meta { margin-bottom: 10px; } .comment-meta h6 { font-weight: 700; line-height: 1.1; margin-bottom: 2px; } .comment-date { font-size: 16px; font-weight: 400; margin-bottom: 5px; } .btn-reply { margin-left: 3px; } .btn-reply a { color: #888; font-size: 16px; font-weight: 400; } .btn-reply a i { font-size: 13px; margin-right: 1px; } .btn-reply a:hover { color: #222; } .post-comments hr { margin-top: 24px; margin-bottom: 40px; } /*------------------------------------------*/ /* SINGLE POST COMMENT FORM /*------------------------------------------*/ .post-comments #leave-comment h5 { padding-bottom: 0; margin-top: 80px; margin-bottom: 3px; border: none; } .comment-form { position: relative; margin-top: 50px; } .comment-form p { font-size: 16px; line-height: 1; font-weight: 700; margin-bottom: 10px; padding-left: 5px; display: block; } .comment-form .form-control { height: 54px; background-color: #fff; border: 1px solid #ccc; color: #333; font-size: 18px; font-weight: 300; padding: 0 15px; margin-bottom: 22px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -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; } .comment-form .form-control:focus { border-color: #00b2e4; outline: 0px none; box-shadow: none; } .comment-form textarea { min-height: 200px; } .comment-form textarea.form-control { padding: 20px; } /*------------------------------------------*/ /* Comment Form Button /*------------------------------------------*/ .comment-form .btn { margin-top: 10px; } .comment-form .btn:focus { outline: 0px none; box-shadow: none; } /*------------------------------------------*/ /* Comment Form Message /*------------------------------------------*/ .comment-form-msg { width: 100%!important; display: block; margin-top: 10px; padding-left: 0; } .comment-form .loading { color: #00b2e4; font-size: 18px; font-weight: 400; } .comment-form .error { color: #e74c3c; font-size: 14.5px; font-weight: 300; margin-bottom: 20px; } .comment-form .form-control.error { font-size: 17px!important; } /* ========================================================================== 19. CONTACTS =========================================================================== */ #contacts-3 .form-holder { padding-right: 30px; margin-top: 30px; margin-bottom: 40px; } /*------------------------------------------*/ /* CONTACTS TYPOGRAPHY /*------------------------------------------*/ .cbox-1 h5, .contacts-1-txt h5, .contacts-1-banner h5 { margin-bottom: 15px; } .cbox-1 p { line-height: 1; margin-bottom: 10px; } .cbox-1 p span { font-weight: 500; } /*------------------------------------------*/ /* CONTACT FORM /*------------------------------------------*/ .contact-form .form-control { height: 54px; background-color: #fff; border: 1px solid #e0d9c5; box-shadow: 0 0 0 0; color: #5f5842; font-size: 17px; line-height: 1; font-weight: 300; padding: 0 15px; margin-bottom: 22px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -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; } .bg-color-01 .contact-form .form-control { background-color: #fff; border: 1px solid #e0d9c5; color: #5f5842; } /*------------------------------------------*/ /* Contact Form Textarea /*------------------------------------------*/ .contact-form textarea { min-height: 220px; } .contact-form textarea.form-control { padding: 20px 15px; } /*------------------------------------------*/ /* Contact Form Placeholder /*------------------------------------------*/ .contact-form .form-control::-moz-placeholder { color: #5f5842; } .contact-form .form-control:-ms-input-placeholder { color: #5f5842; } .contact-form .form-control::-webkit-input-placeholder { color: #5f5842; } /*------------------------------------------*/ /* Contact Form Input Focus /*------------------------------------------*/ .contact-form .form-control:focus { outline: 0px none; box-shadow: none; border-color: #afa074; } .bg-color-01 .contact-form .form-control :focus { border-color: #fff; } 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 Message /*------------------------------------------*/ .contact-form-msg { width: 100%!important; display: block; margin-top: 10px; padding-left: 0; } .contact-form .loading { color: #00b2e4; font-size: 18px; font-weight: 400; } .contact-form .error { color: #e74c3c; font-size: 14.5px; font-weight: 300; margin-bottom: 20px; } .contact-form .form-control.error { font-size: 17px!important; } /* ========================================================================== 20. GOOGLE MAP =========================================================================== */ .google-map { position: relative; padding: 0px 0px 62%; height: 0px; overflow: hidden; } #gmap .google-map, #contacts-3 .google-map { padding: 0px 0px 36%; } .google-map iframe, .google-map object, .google-map embed { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border:0; } /* ========================================================================== 21. BOOKING FORM =========================================================================== */ .booking-form .col-lg-6, .booking-form .col-md-12 { padding-left: 10px; padding-right: 10px; } /*------------------------------------------*/ /* BOOKING FORM /*------------------------------------------*/ .booking-form .form-control, .booking-form .custom-select { height: 54px; background-color: #fff; border: 1px solid #e0d9c5; box-shadow: 0 0 0 0; color: #5f5842; font-size: 17px; line-height: 1; font-weight: 300; padding: 0 15px; margin-bottom: 22px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -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 .custom-select { display: inline-block; width: 100%; color: #5f5842; margin-bottom: 22px; } .bg-color-01 .booking-form .form-control, .bg-color-01 .booking-form .custom-select { background-color: #fff; border: 1px solid #e0d9c5; color: #727475; } /*------------------------------------------*/ /* Booking Form Textarea /*------------------------------------------*/ .booking-form textarea { min-height: 180px; } .booking-form textarea.form-control { padding: 20px 15px; } /*------------------------------------------*/ /* Booking Form Placeholder /*------------------------------------------*/ .booking-form .form-control::-moz-placeholder { color: #5f5842; } .booking-form .form-control:-ms-input-placeholder { color: #5f5842; } .booking-form .form-control::-webkit-input-placeholder { color: #5f5842; } /*------------------------------------------*/ /* Booking Form Input Focus /*------------------------------------------*/ .booking-form .form-control:focus { outline: 0px none; box-shadow: none; border-color: #afa074; } /*------------------------------------------*/ /* Booking Form Message /*------------------------------------------*/ .booking-form-msg { width: 100%!important; display: block; margin-top: 10px; padding-left: 0; } .booking-form .loading { color: #00b2e4; font-size: 18px; font-weight: 400; } .booking-form .error { color: #e74c3c; font-size: 14.5px; font-weight: 300; margin-bottom: 20px; } .booking-form .form-control.error { font-size: 17px!important; } /* ========================================================================== 22. FOOTER =========================================================================== */ .footer { padding-top: 100px; padding-bottom: 30px; } .footer-contacts { padding-left: 5px; } .footer.bg-brown p { color: rgba(255, 248, 245, .7); } .footer.bg-sangria p { color: rgba(255, 248, 245, .85); } #footer-3 .footer-info { padding-right: 15px; } /*------------------------------------------*/ /* FOOTER TYPOGRAPHY /*------------------------------------------*/ .footer h6 { line-height: 1; margin-bottom: 25px; } .footer-contacts p { margin-bottom: 3px; } p.foo-email a { font-weight: 500; text-decoration: underline; } /*------------------------------------------*/ /* FOOTER LINKS /*------------------------------------------*/ .footer-links li { width: auto !important; display: block !important; vertical-align: top; clear: none !important; margin: 0; padding: 0; } .footer-links li p { margin-bottom: 10px; } .bg-brown .footer-links li a { color: rgba(255, 248, 245, .7); } .bg-sangria .footer-links li a { color: rgba(255, 248, 245, .85); } .bg-brown .footer-links li a:hover, .bg-sangria .footer-links li a:hover { color: rgba(255, 255, 255, .95); } /*------------------------------------------*/ /* FOOTER SOCIAL LINKS /*------------------------------------------*/ .foo-socials { display: inline-block; padding-left: 0; margin: 0 auto 0; } .foo-socials li { width: auto !important; display: inline-block !important; vertical-align: top; clear: none !important; margin: 0 0 10px 0; padding: 0; } .foo-socials a { display: block; background-color: #eee; border: 2px solid #eee; width: 42px; height: 42px; color: #666; font-size: 20px; line-height: 40px!important; margin-right: 5px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .bg-brown .foo-socials a { background-color: transparent; color: rgba(255, 248, 245, .7); border: 2px solid rgba(255, 248, 245, .7); } .bg-sangria .foo-socials a { background-color: transparent; color: rgba(255, 248, 245, .85); border: 2px solid rgba(255, 248, 245, .85); } .bg-brown .foo-socials a i { color: rgba(255, 248, 245, .7); } .bg-sangria .foo-socials a i { color: rgba(255, 248, 245, .85); } .foo-socials a.ico-facebook:hover { background-color: #3b5998; border-color: #3b5998; color: #fff; } .foo-socials a.ico-twitter:hover { background-color: #00a9ed; border-color: #00a9ed; color: #fff; } .foo-socials a.ico-instagram:hover { background-color: #dc3c59; border-color: #dc3c59; color: #fff; } .foo-socials a.ico-dribbble:hover { background-color: #d92d84; border-color: #d92d84; color: #fff; } .foo-socials a.ico-behance:hover { background-color: #2473f6; border-color: #2473f6; color: #fff; } .foo-socials a.ico-pinterest:hover { background-color: #ac281a; border-color: #ac281a; color: #fff; } .foo-socials a.ico-linkedin:hover { background-color: #015886; border-color: #015886; color: #fff; } .foo-socials a.ico-google-plus:hover { background-color: #cd1111; border-color: #cd1111; color: #fff; } .foo-socials a.ico-youtube:hover { background-color: #cd1b20; border-color: #cd1b20; color: #fff; } .foo-socials a.ico-tumblr:hover { background-color: #3a5976; border-color: #3a5976; color: #fff; } .foo-socials a.ico-vk:hover { background-color: #3b5998; border-color: #3b5998; color: #fff; } .foo-socials a.ico-yahoo:hover { background-color: #7b0099; border-color: #7b0099; color: #fff; } .foo-socials a.ico-yelp:hover { background-color: #d32323; border-color: #d32323; color: #fff; } /*------------------------------------------*/ /* FOOTER LATEST NEWS /*------------------------------------------*/ .latest-news li { padding: 15px 0; border-bottom: 1px dashed #c0c0c0; } .latest-news li:first-child { padding: 0 0 15px; } .latest-news li:last-child { padding: 15px 0 0; border-bottom: 0; } .latest-news img { text-align: center; float: left; width: 75px; height: 75px; } .post-summary { overflow: hidden; padding-left: 15px; } /*------------------------------------------*/ /* LATEST NEWS TYPOGRAPHY --------------------------------------------*/ .post-summary a { font-size: 16px; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } .latest-news p { font-size: 0.85rem; font-weight: 400; margin-top: 3px; margin-bottom: 0; } /*------------------------------------------*/ /* FOOTER NEWSLETTER FORM /*------------------------------------------*/ .footer-form .form-control { height: 50px; background-color: #fff; border: 1px solid #e0d9c5; border-right: none; color: #666; font-size: 1.0625rem; padding: 0 15px; -webkit-border-radius: 6px 0 0 6px; -moz-border-radius: 6px 0 0 6px; border-radius: 6px 0 0 6px; -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; } .bg-color-01 .footer-form .form-control { border-color: #ccc; } /*------------------------------------------*/ /*. Newsletter Form Input Focus /*------------------------------------------*/ .footer-form .form-control:focus { border: 1px solid #ccc; border-right: none; outline: 0; box-shadow: none; } .bg-sangria .footer-form .form-control:focus { border-color: #a48b73; } /*------------------------------------------*/ /*. Newsletter Form Button /*------------------------------------------*/ .footer-form .btn { height: 50px; color: #aaa; background-color: #fff; border: 1px solid #ccc; border-left: none; font-size: 1.45rem; line-height: 1!important; padding: 0 10px; -webkit-border-radius: 0 4px 4px 0; -moz-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0; } .bg-sangria .footer-form .btn { border-color: #a48b73; } .footer-form .btn i { font-size: 1.5rem; margin-top: -4px; } /*------------------------------------------*/ /* Newsletter Form Notification /*------------------------------------------*/ .footer-form .form-notification { font-size: 0.925rem; font-weight: 400; line-height: 1.3; margin-top: 15px; margin-left: 5px; } .footer-form .form-notification.error { color: #f6412d!important; } .footer-form .form-notification.valid { color: #48af4b!important; } /*------------------------------------------*/ /* FOOTER INSTAGRAM IMAGES /*------------------------------------------*/ .footer-img img.insta-img { float: left; width: 75px; height: 75px; margin: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } /*------------------------------------------*/ /* BOTTOM FOOTER /*------------------------------------------*/ .bottom-footer { border-top: 1px solid #ddd; margin-top: 30px; padding-top: 30px; } .bg-brown .bottom-footer, .bg-sangria .bottom-footer { border-top: 1px solid rgba(255, 248, 245, .2); } /*------------------------------------------*/ /* FOOTER COPYRIGHT /*------------------------------------------*/ .footer-copyright p { line-height: 1; margin-bottom: 0; } /*------------------------------------------*/ /* BOOTOM FOOTER LINKS /*------------------------------------------*/ .bottom-footer-list li { display: inline-block !important; margin-bottom: 0; } .bg-brown .bottom-footer-list li * { color: rgba(255, 248, 245, .7); } .bg-sangria .bottom-footer-list li * { color: rgba(255, 248, 245, .85); } .bg-brown .bottom-footer-list li a:hover, .bg-sangria .bottom-footer-list li a:hover, .bg-brown .bottom-footer-list li a:hover i, .bg-sangria .bottom-footer-list li a:hover i { color: rgba(255, 255, 255, .95); } .bottom-footer-list li i { position: relative; font-size: 0.875rem; line-height: 1; top: -1px; right: 2px; -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; } .bottom-footer-list li p { line-height: 1; font-weight: 300; margin-left: 10px; margin-bottom: 0; } .bottom-footer-list p:after { content: "|"; padding-left: 11px; position: relative; top: -1px; } .bottom-footer-list p.last-li:after { content: " "; padding-left: 0; } /* ========================================================================== 23. INNER PAGE WRAPPER =========================================================================== */ .inner-page-wrapper { margin-top: 80px; } /*------------------------------------------*/ /* INNER PAGE HERO /*------------------------------------------*/ .page-hero-section { background: no-repeat center center; background-size: cover; } #about-page.page-hero-section { background-image: url(../images/about-page.jpg); background-attachment: fixed; } #booking-page.page-hero-section { background-image: url(../images/booking-page.jpg); } #blogs-page.page-hero-section { background-image: url(../images/blogs-page.jpg); } #contacts-page.page-hero-section { background-image: url(../images/contacts-page.jpg); } #faqs-page.page-hero-section { background-image: url(../images/faqs-page.jpg); } #gallery-page.page-hero-section { background-image: url(../images/gallery-page.jpg); } #gift-cards-page.page-hero-section { background-image: url(../images/gift-cards-page.jpg); } #services-page.page-hero-section { background-image: url(../images/services-page.jpg); } #service-details-page.page-hero-section { background-image: url(../images/service-details-page.jpg); } #single-post-page.page-hero-section { background-image: url(../images/single-post-page.jpg); } #team-page.page-hero-section { background-image: url(../images/team-page.jpg); } #pricing-page.page-hero-section { background-image: url(../images/pricing-page.jpg); } #terms-page.page-hero-section { background-image: url(../images/terms-page.jpg); } /*------------------------------------------*/ /* INNER PAGE HERO TYPOGRAPHY /*------------------------------------------*/ .page-hero-section h2 { margin-bottom: 20px; } .page-hero-section p { padding: 0 15%; margin-bottom: 0; } /* ========================================================================== 24. BREADCRUMB =========================================================================== */ #breadcrumb { margin-top: 25px; text-align: center; } .breadcrumb-nav { display: inline-block; margin: 0 auto; } .breadcrumb { padding: 0; margin-bottom: 0; background-color: transparent; border-radius: 0; width: 100%; } /*------------------------------------------*/ /* BREADCRUMB TYPOGRAPHY /*------------------------------------------*/ .breadcrumb-item a { color: #fff; font-size: 1.125rem; font-weight: 500; text-decoration: underline; } .breadcrumb-item a:hover { color: #fff; } .breadcrumb-item.active { color: #fff; font-size: 1.125rem; font-weight: 500; } .breadcrumb-item + .breadcrumb-item::before { font-size: 1.15rem; display: inline-block; padding-right: 12px; margin-top: -1px; color: #fff; content: "\00bb"; } .breadcrumb-item + .breadcrumb-item { padding-left: 15px; } /* ========================================================================== 25. PAGE PAGINATION =========================================================================== */ .page-pagination { padding-bottom: 100px; } .blog-page-pagination { margin-top: 80px; padding-top: 80px; } .page-link { color: #efa697; font-weight: 600; padding: 9px 16px; margin: 0 3px; background-color: transparent; border-color: transparent; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } .page-item:first-child .page-link { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .page-item:last-child .page-link { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .page-item.disabled .page-link { color: #aaa; background-color: transparent; border-color: transparent; } .next-page.page-link1 { margin-left: 30px; } .page-link:hover, .page-item.active .page-link { background-color: #efa697; color: #fff; border-color: #efa697; -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); } .page-link:focus { background-color: transparent; color: #666; border-color: transparent; box-shadow: 0 0; } /* ========================================================================== 26. TERMS PAGE =========================================================================== */ /*------------------------------------------*/ /* TERMS PAGE TYPOGRAPHY /*------------------------------------------*/ .terms-box { margin-bottom: 30px; } .terms-box h5 { margin-bottom: 25px; } .terms-box a { font-weight: 500; } /* ========================================================================== 27. SIDEBAR =========================================================================== */ #sidebar h5.h5-sm { line-height: 1; margin-bottom: 30px; } /*------------------------------------------*/ /* SIDEBAR SEARCH FORM /*------------------------------------------*/ #search-field .form-control { background-color: #fff; border: 1px solid #ccc; height: 60px; font-size: 18px; padding-left: 20px; border-right: none; -webkit-border-radius: 4px 0 0 4px; -moz-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px; } #search-field .form-control::-moz-placeholder { color: #5f5842; } #search-field .form-control:-ms-input-placeholder { color: #5f5842; } #search-field .form-control::-webkit-input-placeholder { color: #5f5842; } #search-field .btn { background-color: #fff; border: 1px solid #ccc; border-left: none; color: #efa697; font-size: 18px; height: 60px; padding: 0 20px; margin-top: 0; -webkit-box-shadow: 0 0 0; -moz-box-shadow: 0 0 0; box-shadow: 0 0 0; -webkit-border-radius: 0px 4px 4px 0; -moz-border-radius: 0px 4px 4px 0; border-radius: 0px 4px 4px 0; } #search-field .form-control:focus { border-color: #ccc; outline: 0px none; box-shadow: none; } /*------------------------------------------*/ /* SIDEBAR BLOG CATEGORIES /*------------------------------------------*/ ul.blog-category-list > li { padding: 12px 0; border-bottom: 1px dashed #c0c0c0; -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; } ul.blog-category-list > li:first-child { padding: 0 0 12px; } ul.blog-category-list > li:last-child { padding: 12px 0 0; border-bottom: none; } ul.blog-category-list > li a { font-size: 1.125rem; position: relative; } ul.blog-category-list > li span { font-weight: 600; } ul.blog-category-list > li a:before { opacity: 0; position: absolute; left: 0; top: -1px; color: #fe6d70; font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f105"; font-size: 1.05rem; -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; } ul.blog-category-list > li a:hover { padding: 0 0 0 18px; } ul.blog-category-list > li a:hover:before { left: 2px; opacity: 1; } /*------------------------------------------*/ /* SIDEBAR POPULAR POSTS /*------------------------------------------*/ .popular-posts li { padding: 14px 0; border-bottom: 1px dashed #c0c0c0; } .popular-posts li:first-child { padding: 0 0 14px; } .popular-posts li:last-child { padding: 14px 0 0; border-bottom: 0; } .popular-posts img { width: 100px; height: 100px; text-align: center; float: left; } .post-summary { overflow: hidden; padding-left: 20px; } /*------------------------------------------*/ /* SIDEBAR POPULAR POSTS TYPOGRAPHY --------------------------------------------*/ .post-summary a { font-size: 1.1rem; } .popular-posts .post-summary a:hover { text-decoration: underline; } .popular-posts p { font-size: 0.95rem; margin-top: 6px; margin-bottom: 0; } /*------------------------------------------*/ /* SIDEBAR TAGS CLOUD /*------------------------------------------*/ .badge { border: none; background-color: transparent; border: 1px solid #efa697; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; margin-bottom: 10px; padding: 10px 15px; margin-right: 4px; -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; } .badge a { color: #efa697; font-size: 1rem; font-weight: 400; line-height: 1; } .badge:hover { background-color: #efa697; border-color: #efa697; } .badge:hover a { color: #fff!important; } /*------------------------------------------*/ /* SIDEBAR INSTAGRAM LINKS /*------------------------------------------*/ img.insta-img { float: left; width: 105px; height: 105px; margin: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } /*------------------------------------------*/ /* SIDEBAR BOX /*------------------------------------------*/ #sb-box { text-align: center; padding: 50px 30px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -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); } .sb-box-txt span { display: block; font-size: 1.25rem; line-height: 1; font-weight: 700; margin-bottom: 10px; } /*------------------------------------------*/ /* SIDEBAR TABLE /*------------------------------------------*/ .sidebar-table h5, .sidebar-table h4 { margin-bottom: 15px; } .sidebar-table h5.h5-xs { margin-top: 20px; } .sidebar-table p { margin-bottom: 0; } .sidebar-table table { margin-top: 15px; margin-bottom: 0; } .sidebar-table .table td, .sidebar-table .table th { font-size: 1.125rem; font-weight: 400; padding: 16px 0; border-top: none; border-bottom: 1px dashed #aaa; } .sidebar-table .table .last-tr td, .sidebar-table .table .last-tr th { border-bottom: none; } /*------------------------------------------*/ /* SIDEBAR TIMETABLE /*------------------------------------------*/ .sidebar-timetable { border: 1px solid #ccc; padding: 40px 30px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } /*------------------------------------------*/ /* SIDEBAR TEXT WIDGET /*------------------------------------------*/ .txt-widget-avatar { display: inline-block; float: left; } /* ========================================================================== 28. SCROLL TO TOP =========================================================================== */ #scrollUp { display: none; width: 50px; height: 50px; position: fixed; bottom: 35px; right: 20px; z-index: 99; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; background-image: url(../images/back-to-top.png); background-repeat: no-repeat; background-position: 50% 48%; background-color: rgba(95, 88, 66, .2); -webkit-transition: all 250ms linear; -moz-transition: all 250ms linear; transition: all 250ms linear; } #scrollUp:hover { background-color: rgba(95, 88, 66, .5); } nav a#pull { display: none; }