/*---------------------------------------------------------------------- [-----*** TABLE OF CONTENT ***-----] 1. Global Classes 2. General 3. Header 4. Bnner And Promo 5. Gallery v1 6. Services 7. Gallery v2 8. About Us 9. Offers 10. Footer -----------------------------------------------------------------------*/ /* -------------------------------------------------- [1. General Classes] ---------------------------------------------------- */ body { font-family: "Roboto", Arial, sans-serif; } h1, h2, h3, h4, h5, h6 { font-family: "Roboto", Arial, sans-serif; } a.text-decoration-none { text-decoration: none; } /* Selection */ ::-moz-selection { color: #fff; background: #333333; } ::selection { color: #fff; background: #333333 ; } /* Buttons */ .btn-base { font-size: 11px; font-weight: 300; text-transform: uppercase; color: #fff; border: 2px solid #fff; background: transparent; padding: 8px 25px; letter-spacing: .5px; } .btn-base:hover, .btn-base:focus { color: #dcd9d9; background: #333333; color: #fff; border: 2px solid #333333; text-decoration: none; } .btn-base__light { font-size: 11px; font-weight: 450; text-transform: uppercase; color: #fff; border: 2px solid #fff; background: transparent; padding: 8px 25px; letter-spacing: .5px; } .btn-base__light:hover { color: #333333; background: #fff; } .btn-base__light:focus { color: #fff; background: transparent; } .btn-base--modified { border-width: 1px; padding: 7px 17px; } .btn-base--modified:hover { border-width: 1px; } /* Block Nmae */ .heading-title-v1 { font-size: 12px; font-weight: bold; text-transform: uppercase; display: inline-block; border-bottom: 5px solid #333333; color: #333333; letter-spacing: .5px; } .heading-title-v1--light { color: #fff; border-bottom: 5px solid #fff; } /* United Text*/ .united-text-1 { font-size: 12px; text-transform: uppercase; letter-spacing: 3px; color: #a4a4a4; } .united-text-2 { font-size: 12px; text-transform: uppercase; letter-spacing: 3px; color: #646464; line-height: 1.7; } .united-text-2--modified { margin-top: -10px; padding: 0 50px; } /* social */ .social-style { color: #a4a4a4; margin-left: 15px; transition: all .2s ease-out; } .social-style:hover { color: #333333; } .social-style:focus { color: #a4a4a4; } .social-style--modified { color: #a4a4a4; margin-left: 8px; transition: all .2s ease-out; } .social-style--modified:hover { color: #333333; } /* Image Sezing */ .img-sezing { width: 100%; height: 100%; } /* Media */ @media (max-width: 1200px) { .social-style--modified { color: rgb(185,185,185); transition: all .2s ease-out; margin-right: 0px; margin-left: 5px; } } @media (max-width: 992px) { .list-inline--modified { text-align: center; } } @media (max-width: 768px) { .list-inline--modified-2 { text-align: center; } } /* -------------------------------------------------- [2. Global Classes] ---------------------------------------------------- */ .g-capitalize { text-transform: uppercase; } .g-font-weight-bold { font-weight: bold; } .g-font-weight-450 { font-weight: 1900; } .g-font-weight-light { font-weight: 300; } .g-color-base { color: #333333; } .g-color-secondary { color: #a4a4a4; } .g-color-thrice { color: #b5b5b5; } .g-bg-color-white { background-color: #fff; } .g-bg-color-base { background-color: #f9f9f9; } .g-bg-color-pattern { background: url(../img/bg-pattern.png); } .g-no-side-padding { padding-left: 0; padding-right: 0; } /* Border Radius */ .g-rounded-50 { border-radius: 50px; } /* Line Height */ .g-line-height--lg { line-height: 3.7; } /* Rounded Classes*/ .g-rounded-50x { border-radius: 50%; } /* Letter Spacing */ .g-letter-spacing-3 { letter-spacing: 3px } .g-letter-spacing-1-half { letter-spacing: 1.5px; } /*Padding Spaces*/ .g-padding-5 { padding: 5px;} .g-padding-10 { padding: 10px;} .g-padding-15 { padding: 15px;} .g-padding-20 { padding: 20px;} .g-padding-25 { padding: 25px;} .g-padding-30 { padding: 30px;} .g-padding-35 { padding: 35px;} .g-padding-40 { padding: 40px;} .g-padding-45 { padding: 45px;} .g-padding-50 { padding: 50px;} .g-pt-10 { padding-top: 10px;} .g-pt-20 { padding-top: 20px;} .g-pt-30 { padding-top: 30px;} .g-pt-35 { padding-top: 35px;} .g-pt-40 { padding-top: 40px;} .g-pt-50 { padding-top: 50px;} .g-pt-60 { padding-top: 60px;} .g-pt-70 { padding-top: 70px;} .g-pt-80 { padding-top: 80px;} .g-pt-85 { padding-top: 85px;} .g-pt-90 { padding-top: 90px;} .g-pt-100 { padding-top: 100px;} .g-pt-110 { padding-top: 110px;} .g-pt-120 { padding-top: 120px;} .g-pt-130 { padding-top: 130px;} .g-pt-140 { padding-top: 140px;} .g-pt-150 { padding-top: 150px;} .g-pt-160 { padding-top: 160px;} .g-pt-170 { padding-top: 170px;} .g-pb-10 { padding-bottom: 10px;} .g-pb-20 { padding-bottom: 20px;} .g-pb-30 { padding-bottom: 30px;} .g-pb-40 { padding-bottom: 40px;} .g-pb-50 { padding-bottom: 50px;} .g-pb-60 { padding-bottom: 60px;} .g-pb-70 { padding-bottom: 70px;} .g-pb-75 { padding-bottom: 75px;} .g-pb-80 { padding-bottom: 80px;} .g-pb-90 { padding-bottom: 90px;} .g-pb-100 { padding-bottom: 100px;} .g-pl-10 { padding-left: 10px;} .g-pl-20 { padding-left: 20px;} .g-pl-30 { padding-left: 30px;} .g-pl-40 { padding-left: 40px;} .g-pl-50 { padding-left: 50px;} .g-pl-60 { padding-left: 60px;} .g-pl-70 { padding-left: 70px;} .g-pl-80 { padding-left: 80px;} .g-pl-90 { padding-left: 90px;} .g-pl-100 { padding-left: 100px;} .g-pr-10 { padding-right: 10px;} .g-pr-20 { padding-right: 20px;} .g-pr-30 { padding-right: 30px;} .g-pr-40 { padding-right: 40px;} .g-pr-50 { padding-right: 50px;} .g-pr-60 { padding-right: 60px;} .g-pr-70 { padding-right: 70px;} .g-pr-80 { padding-right: 80px;} .g-pr-90 { padding-right: 90px;} .g-pr-100 { padding-right: 100px;} /*Margin Spaces*/ .g-mt-10 { margin-top: 10px;} .g-mt-15 { margin-top: 15px;} .g-mt-20 { margin-top: 20px;} .g-mt-30 { margin-top: 30px;} .g-mt-40 { margin-top: 40px;} .g-mt-50 { margin-top: 50px;} .g-mt-60 { margin-top: 60px;} .g-mt-70 { margin-top: 70px;} .g-mt-80 { margin-top: 80px;} .g-mt-90 { margin-top: 90px;} .g-mt-100 { margin-top: 100px;} .g-mb-0 { margin-bottom: 0px;} .g-mb-10 { margin-bottom: 10px;} .g-mb-15 { margin-bottom: 15px;} .g-mb-20 { margin-bottom: 20px;} .g-mb-25 { margin-bottom: 25px;} .g-mb-30 { margin-bottom: 30px;} .g-mb-35 { margin-bottom: 35px;} .g-mb-40 { margin-bottom: 40px;} .g-mb-45 { margin-bottom: 45px;} .g-mb-50 { margin-bottom: 50px;} .g-mb-55 { margin-bottom: 55px;} .g-mb-60 { margin-bottom: 60px;} .g-mb-65 { margin-bottom: 65px;} .g-mb-70 { margin-bottom: 70px;} .g-mb-75 { margin-bottom: 75px;} .g-mb-80 { margin-bottom: 80px;} .g-mb-85 { margin-bottom: 85px;} .g-mb-90 { margin-bottom: 90px;} .g-mb-95 { margin-bottom: 95px;} .g-mb-100 { margin-bottom: 100px;} .g-ml-10 { margin-left: 10px;} .g-ml-20 { margin-left: 20px;} .g-ml-30 { margin-left: 30px;} .g-ml-40 { margin-left: 40px;} .g-ml-50 { margin-left: 50px;} .g-ml-60 { margin-left: 60px;} .g-ml-70 { margin-left: 70px;} .g-ml-80 { margin-left: 80px;} .g-ml-90 { margin-left: 90px;} .g-ml-100 { margin-left: 100px;} .g-mr-5 { margin-right: 5px;} .g-mr-10 { margin-right: 10px;} .g-mr-20 { margin-right: 20px;} .g-mr-30 { margin-right: 30px;} .g-mr-40 { margin-right: 40px;} .g-mr-50 { margin-right: 50px;} .g-mr-60 { margin-right: 60px;} .g-mr-70 { margin-right: 70px;} .g-mr-80 { margin-right: 80px;} .g-mr-90 { margin-right: 90px;} .g-mr-100 { margin-right: 100px;} /* Media */ @media (max-width: 1200px) { .g-bg-mt-0 { margin-top: 0; } } @media (max-width: 992px) { .g-md-mt-20 { margin-top: 20px; } .g-md-mb-20 { margin-bottom: 20px; } .g-sm-mr-0 { margin-right: 0; } .g-md-mb-30 { margin-bottom: 30px; } .g-md-mt-0 { margin-top: 0; } } @media (max-width: 767px) { .g-sm-mr-0 { margin-right: 0; } .g-sm-mt-0 { margin-top: 0; } .g-sm-mr-10 { margin-right: 10px; } } /* -------------------------------------------------- [3. Header] ---------------------------------------------------- */ .menu-style { font-size: 11px !important; font-weight: bold; margin-left: 50px; padding: 0px !important; color: #a4a4a4 !important; letter-spacing: .5px; transition: all 0.4s ease-in-out 0s; } .menu-style:hover { color: #333333 !important; background: transparent; } .nav--modified { padding: 35px 0; } .one-page-header .navbar-nav > li > a:before { display: none; } /* Overwriting The Hover Color */ .one-page-header .navbar-nav > .active > a, .one-page-header .navbar-nav > .active > a:hover, .one-page-header .navbar-nav > .active > a:focus, .one-page-header .dropdown-menu > .active > a, .one-page-header .dropdown-menu > .active > a:hover, .one-page-header .dropdown-menu > .active > a:focus, .one-page-header.top-nav-collapse .dropdown-menu > .active > a, .one-page-header.top-nav-collapse .dropdown-menu > .active > a:hover, .one-page-header.top-nav-collapse .dropdown-menu > .active > a:focus { color: #333333 !important; } /* Button */ .navbar-toggle { padding: 0px; margin-top: 35px; } .navbar-toggle .icon-bar { background: #333333 !important; } /* Logo */ .one-page-nav-scrolling .menu-container .navbar-brand { color: #333333 !important; } /* Topbar */ .topbar { background: #fff; } .topbar__text { font-size: 10px; letter-spacing: .5px; text-transform: uppercase; } .topbar__text-hover:hover { color: #333333; } .one-page-header--topbar.navbar { padding: 0px; } .one-page-header--topbar.navbar.top-nav-collapse .topbar { margin-top: -125px; transition: all 0.5s ease-in-out .1s; } /* Responsive */ @media (max-width: 992px) { .menu-style { padding: 6px 10px !important; margin-left: -5px !important; } .nav--modified { padding: 0; } } @media (max-width: 390px) { .one-page-header--topbar.navbar.top-nav-collapse .topbar { margin-top: -137px; transition: all 0.4s ease-in-out 0s; } } /* -------------------------------------------------- [4. Banner And Promo] ---------------------------------------------------- */ /* Banner Block */ .banner-wrapper { position: relative; margin-top: 149px; padding: 235px 20px; background-repeat: no-repeat; background-size: cover; background-position: center; } @media (max-width: 576px) { .banner-wrapper { padding: 180px 20px; } } .banner-wrapper::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: " "; background-color: rgba(0,0,0,.1); } /* Banner Texts */ .banner__text-1, .banner__text-2 { color: #fff; letter-spacing: 5px; text-transform: uppercase; } .banner__text-1 { font-size: 20px; } .banner__text-2 { font-size: 40px; line-height: 1.4; display: inline-block; border: 2px solid #fff; padding: 10px 20px 5px; } @media (max-width: 767px) { .banner__text-1 { font-size: 15px; } .banner__text-2 { font-size: 35px; } } @media (max-width: 576px) { .banner__text-2 { font-size: 25px; } } /* Promo Block */ .promo-left, .promo-right { position: relative; padding: 210px 20px; background-repeat: no-repeat; background-size: cover; background-position: center; overflow: hidden; transition: all .3s ease-out; } .promo-left:hover, .promo-right:hover { transition: all .3s ease-out; background-position: 30% 0; } .promo-left::before, .promo-right::before { position: absolute; top: 20px; right: 20px; bottom: 20px; left: 20px; content: " "; border: solid 1px rgba(255,255,255,.2); } @media (max-width: 576px) { .promo-left, .promo-right { padding: 160px 20px; } } /* Promo Texts */ .promo__text-1, .promo__text-2 { color: #fff; text-transform: uppercase; } .promo__text-1 { font-size: 26px; line-height: 1.4; letter-spacing: 5px; } .promo__text-2 { font-size: 14px; font-weight: 300; letter-spacing: 3px; } /* -------------------------------------------------- [5. Gallery v1] ---------------------------------------------------- */ /* Overwriting And Styling Filters */ .cbp-l-filters-text .active { color: #333333 !important; } .cbp-l-filters-text { text-align: left !important; margin-top: -40px !important; } .cbp-filter-item { background: transparent !important; color: #a4a4a4 !important; font-size: 11px !important; font-weight: 900 !important; letter-spacing: .5px; margin-left: -10px !important; margin-bottom: 20px !important; } .cbp-filter-item:hover, .cbp-filter-item:focus, .cbp-filter-item:active { color: #333333 !important; } .cbp-filter-item-active { color: #333333 !important; } .side-list__subject { color: #333333; text-transform: uppercase; font-size: 14px; font-weight: bold; margin-bottom: 30px; letter-spacing: 1px; } .list-number { padding-right: 10px; } .side-list__text { text-decoration: none; color: #a4a4a4; text-transform: uppercase; font-size: 12px; font-weight: bold; margin-left: -6px; border: none !important; transition: all .2s ease-in-out; } /* Overwriting And Styling Grid Container */ .gallery-v1 .cbp-item { width: 170px !important; } /* Hover Effect */ .gallery-v1 .cbp-l-caption-alignLeft { padding: 14px; } .gallery-v1 .cbp-l-caption-body { border: 1px solid rgba(255,255,255,0.2); height: 242px; } .gallery-v1 .cbp-cat { font-size: 11px; font-weight: bold; text-transform: uppercase; color: #fff; letter-spacing: .5px; margin-top: 85px; } .cbp-item__img-text { font-size: 11px; text-transform: uppercase; color: #333333; letter-spacing: .5px; } /* Media */ @media (max-width: 992px) { .gallery-v1 .cbp-filter-item { font-size: 11px !important; letter-spacing: 0px; } .list-number { padding-right: 0px; } } @media (max-width: 767px) { .gallery-v1 .cbp-filter-item { font-size: 12px !important; letter-spacing: 1px; } .list-number { padding-right: 10px; } } @media (max-width: 400px) { .gallery-v1 .cbp-item { width: 130px !important; } .gallery-v1 .cbp-l-caption-body { height: 178px; } .cbp-cat { margin-top: 55px; } .cbp-item__img-text { font-size: 10px; letter-spacing: 0px; } } /* -------------------------------------------------- [6. Servoices] ---------------------------------------------------- */ .services-box-v1 { padding: 50px 20px; margin-left: 80px; } .services-box-v1__img { float: left; margin-top: -28px; margin-left: -100px; } .services-box-v1__content { overflow: hidden; padding: 0 30px; } .services-box-v1__title { font-size: 14px; font-weight: bold; text-transform: uppercase; letter-spacing: 4px; color: #333333; } .services-box-v1__text { font-style: 14px; color: #a4a4a4; } /* -------------------------------------------------- [7. Gallery v2] ---------------------------------------------------- */ .cbp-l-loadMore-link { font-size: 10px; font-weight: bold; text-transform: uppercase; color: #fff; background: transparent; padding: 10px 25px; } .cbp-l-loadMore-link:hover, .cbp-l-loadMore-link:focus { color: #dcd9d9; background: #333333; color: #fff; border: 2px solid #333333; text-decoration: none; } /* Hover Effect */ .gallery-v2 .cbp-caption { position: relative; } .gallery-v2 .cbp-caption-activeWrap { padding: 20px; } .cbp-l-caption-alignLeft--modified { border: 1px solid rgba(255,255,255,0.2); width: 100%; height: 100%; } .cbp-caption-zoom .cbp-caption-activeWrap { background: rgba(0,0,0,.5); } .cbp-l-caption-body--modified { position: absolute; left: 51.5%; top: 51%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .cbp-l-caption-body--modified-2 { position: absolute; left: 51.5%; top: 51%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .cbp-l-caption-body--modified-3 { position: absolute; left: 51.5%; top: 51%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .gallery-v2 .cbp-cat { font-size: 20px; font-weight: bold; text-transform: uppercase; color: #fff; line-height: 1.4; letter-spacing: 5px; } /* Button Load */ .cbp-l-loadMore-button-link { font-size: 11px !important; font-weight: 300 !important; text-transform: uppercase !important; color: #333333 !important; border: 2px solid #333333 !important; background: transparent !important; padding: 1px 25px !important; letter-spacing: .5px !important; } .cbp-l-loadMore-button-link:hover { color: #fff !important; background: #333333 !important; transition: all .3s ease-in-out !important; } /* Media */ @media (max-width: 1200px) { .cbp-item__modified { margin-top: -6px !important; } } @media (max-width: 992px) { .cbp-item__modified { margin-top: -12px !important; } } @media (max-width: 767px) { .btn-base--modified { padding: 5px 15px; } } @media (max-width: 560px) { .gallery-v2 .cbp-cat { font-size: 14px; } } @media (max-width: 520px) { .gallery-v2 .cbp-cat { font-size: 20px; } } @media (max-width: 400px) { .gallery-v2 .cbp-cat { font-size: 12px; } .cbp-l-caption-body--modified { top: 40%; } .cbp-l-caption-body--modified-2 { top: 40%; } .cbp-l-caption-body--modified-3 { top: 40%; } } /* -------------------------------------------------- [8. About Us] ---------------------------------------------------- */ .about-us__subject { font-size: 30px; /*font-weight: bold;*/ color: #fff; letter-spacing: 5px; } .about-us__text { font-size: 16px; color: #646464; } .about-us__img { -webkit-filter: grayscale(100%); filter: grayscale(100%); } .about-us__img:hover { -webkit-filter: grayscale(0%); filter: grayscale(0%); } .about-us__img img { width: 100%; height: 100%; } .about-us__img-name { font-size: 14px; font-weight: bold; text-transform: uppercase; letter-spacing: 3px; margin-left: 30px; margin-bottom: 0px; } .about-us__img-info { background: #fff; margin-top: -5px; } .about-us__employee-name { font-size: 14px; color: #a4a4a4; margin-left: 5px; margin-right: 40px; letter-spacing: .5px; } /* Media */ @media (max-width: 1200px) { .about-us__subject { font-size: 25px; } .about-us__img-name { margin-left: 35px; } .about-us__employee-name { margin-left: 10px; margin-right: 0px; } } @media (max-width: 992px) { .about-us__media { text-align: left; } .about-us__subject { font-size: 30px; } .about-us__img-name { text-align: center; margin-left: 0px; } .about-us__employee-name { margin-left: 0px; } } /* -------------------------------------------------- [9. Offers] ---------------------------------------------------- */ /* Price Tble*/ .price-table__item { background: #1d1d1d; position: relative; } .price-table__item-in { position: relative; } .price-table__icon-wrapper { border-radius: 50%; color: #fff; content: ''; z-index: 1; position: absolute; top: 94%; left: 36%; } .price-table__icon { background: #1d1d1d; border-radius: 50%; padding: 35px; color: #fff; font-size: 25px; } .price-table__subject { font-size: 14px; font-weight: 450; text-transform: uppercase; letter-spacing: 3px; color: #fff; } .price-table__price-tag { font-size: 26px; font-weight: bold; text-transform: uppercase; letter-spacing: 5px; color: #fff; } .price-table__info-list { padding: 0px; } .price-table__style { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; font-weight: 450; color: #646464; display: block; padding: 10px 30px; } .bg-color-1 { background: #222222; } .bg-color-2 { background: #272727; } /* Media */ @media (max-width: 992px) { .price-table__icon-wrapper { top: 96%; left: 43%; } } @media (max-width: 560px) { .price-table__icon-wrapper { top: 96%; left: 40%; /*top: -20px;*/ } } @media (max-width: 420px) { .price-table__icon-wrapper { top: 96%; left: 38%; } } @media (max-width: 360px) { .price-table__icon-wrapper { top: 96%; left: 35%; } } /* -------------------------------------------------- [10. Footer] ---------------------------------------------------- */ /* Contact Us */ .contact-us__list { margin-top: 30px; } .contact-us__text { font-size: 14px; color: #b5b5b5; line-height: 1.8; } .contact-us__text-2 { font-size: 12px; text-transform: uppercase; font-weight: 450; display: block; } .contact-us__item { font-size: 15px; width: 35px; height: 35px; line-height: 33px; display: inline-block; text-align: center; color: #a4a4a4; border: solid 1px rgba(0,0,0,.5); background: #333333; } .u-social-icons-v1:hover { color: #fff; background-color: #6b7de0; border-color: transparent; } /* Footer Bottom */ .footer-bottom { height: 80px; } .footer-bottom__copyright { font-size: 13px; color: #b5b5b5; } .footer-bottom__copyright--base { color: #333333; } .footer-bottom__copyright--base:hover, .footer-bottom__copyright--base:focus { color: #333333; } /* Media */ @media (max-width: 400px) { .contact-us__item { letter-spacing: 0px; } .contact-us__text-2 { font-size: 11px; } } @media (max-width: 330px) { .contact-us__text-2 { font-size: 10px; } } /* -------------------------------------------------- [10. Carousel v2] ---------------------------------------------------- */ .carousel-v2 .carousel-control.left, .carousel-v2 .carousel-control.right { border: none; font-size: 22px; background: rgba(0,0,0,.7); } .carousel-v2 .carousel-control .fa { position: relative; top: 5px; } .carousel-v2 .carousel-control.left:hover, .carousel-v2 .carousel-control.right:hover { background: rgba(0,0,0,.5); }