/* Template: 69 Studio Author: TrendyTheme Version: 2.0 Designed and Development by: TrendyTheme */ /* ==================================== [ CSS TABLE CONTENT ] ------------------------------------ 1.0 - General 2.0 - Typography 3.0 - Global Style 4.0 - Navigation 5.0 - Search Box 6.0 - Page Title Section 7.0 - Slider Section 8.0 - Creative Section 9.0 - Recent Project Section 9.1 - Overlay and hover effect 10.0 - Magnific Popup CSS 11.0 - Feature Section 12.0 - About Section 13.0 - Counter Section 14.0 - Team Section 15.0 - Video Section 16.0 - Service Section 17.0 - Process Section 18.0 - Portfolio Section 19.0 - Portfolio Single Page 20.0 - Partner Section 21.0 - Case study section 22.0 - Map Section 23.0 - Contact Section 24.0 - Footer Section 25.0 - Preloader 26.0 - Homepage Two 27.0 - Homepage Three 28.0 - About us Page 29.0 - About us page two 30.0 - Blog Page 31.0 - Blog Page Version Two 32.0 - Full Width Section 33.0 - Call to action section 34.0 - Client Testimonial Style 35.0 - Parallax Homepage 36.0 - Contact Page 37.0 - 404 page 38.0 - Revolution slider customization ------------------------------------- [ END CSS TABLE CONTENT ] ===================================== */ /* =-=-=-=-=-=-= General =-=-=-=-=-=-= */ body{ font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 30px; font-weight: 400; color: #666666; background-color: #fff; overflow-x: hidden; -webkit-text-size-adjust: 100%; -webkit-overflow-scrolling: touch; -webkit-font-smoothing: antialiased !important; } html, body { width: 100%; height: 100%; } /* Link style /* ------------------------------ */ a { color: #b8a580; } a, a > * { outline: none; cursor: pointer; text-decoration: none; } a:focus, a:hover { color: #98bf00; outline: none; text-decoration: none; } /* Transition elements /* ------------------------------ */ .navbar a, .form-control { -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } a, .btn { -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } /* Reset box-shadow /* ------------------------------ */ .btn, .form-control, .form-control:hover, .form-control:focus, .navbar-custom .dropdown-menu { -webkit-box-shadow: none; box-shadow: none; } button:focus { outline: none !important; } /* =-=-=-=-=-=-= Typography =-=-=-=-=-=-= */ h1, h2, h3, h4, h5, h6{ font-family: 'Roboto Slab', serif; font-weight: 400; margin: 0 0 15px; color: #202020; } h1 { font-size: 35px; line-height: 50px; } h2 { font-size: 25px; } h3 { font-size: 20px; line-height: 25px } h4 { font-size: 18px; line-height: 20px} h5 { } h6 { } p img { margin: 0; } blockquote { padding: 20px 20px 20px 60px; font-size: 16px; color: #969595; border-left: 0; border: 1px solid #eee; position: relative; margin: 0; } blockquote::before { position: absolute; content: "\f10d"; font-family: FontAwesome; font-size: 30px; color: #eee; left: 15px; top: 25px; } /* Button /* ------------------------------ */ .btn { padding: 14px 45px; } .btn-group-lg>.btn, .btn-lg { padding: 17px 35px; } .btn-primary { background-color: #c0a56f; border-color: #c0a56f; } .btn-primary:hover { background-color: #b8a580; border-color: #b8a580; } .learnmore-btn{ font-size: 20px; line-height: 18px; font-weight: 300; color: #fff; background-color: transparent; border-color: #fff; border-radius: 30px; padding: 20px 57px; } .learnmore-btn:focus, .learnmore-btn:hover { background: #fff; border-color: transparent; color: #b8a580; } .btn:focus, button:focus { outline: none !important; } /*alert*/ .tt-alert { background-color: transparent; } .alert-dismissible .close { top: 5px; } /* =-=-=-=-=-=-= List Style =-=-=-=-=-=-= */ ul { margin:0; padding:0; list-style: none; } .unorder-list { list-style: inherit; } /*check-circle-list*/ .check-circle-list li{ line-height: 33px; } .check-circle-list li i{ font-size: 16px; color: #cdcdcd; margin-right: 10px; -webkit-transition: all 0.4s ease-in-out 0s; -moz-transition: all 0.4s ease-in-out 0s; -ms-transition: all 0.4s ease-in-out 0s; -o-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .check-circle-list li:hover i{ color: #b8a580; } /* Form Style /* ------------------------------ */ .form-group { margin-bottom: 30px; } .form-control { height: 60px; padding: 20px; font-size: 18px; line-height: 25px; font-weight: 300; color: #202020; border: 1px solid #eee; border-radius: 0; } .form-control:focus { border-color: #b8a580; } /* =-=-=-=-=-=-= Global Style =-=-=-=-=-=-= */ .section-padding { padding: 100px 0; } .section-title { font-size: 35px; line-height: 30px; color: #b8a580; margin-bottom: 25px; text-transform: capitalize; } .sub-title { margin: 0; line-height: 25px; } .row-content{ margin-top: 80px; } /*custom margin classes*/ /*margin top*/ .mt-30 { margin-top: 30px; } .mt-50 { margin-top: 50px; } .mt-80 { margin-top: 80px; } .mt-100 { margin-top: 100px; } /*margin bottom*/ .mb-30 { margin-bottom: 30px; } .mb-80 { margin-bottom: 80px; } /*custom padding classes*/ .no-padding { padding: 0!important; } /*padding-bottom*/ .pb-20 { padding-bottom: 20px; } .pb-30 { padding-bottom: 30px; } .pb-50 { padding-bottom: 50px; } .pt-100 { padding-top: 100px; } .pb-100 { padding-bottom: 100px; } /*padding top bottom*/ .ptb-50 { padding: 50px 0; } .ptb-90 { padding: 90px 0; } .overlay-bg { background-color: rgba(0, 0, 0, 0.5); } .gray-bg { background-color: #fafafa; } .gutter { padding-left: 10px!important; padding-right: 10px!important; } /*vertical middle align*/ .vertical-middle { position: absolute; width: 100%; top: 50%; left: 0; -webkit-transform: translate(0%, -50%); -moz-transform: translate(0%, -50%); -ms-transform: translate(0%, -50%); -o-transform: translate(0%, -50%); transform: translate(0%, -50%); padding: 0 15px; } /* =-=-=-=-=-=-= Navigation =-=-=-=-=-=-= */ .navbar-custom { background-color: #fff; border: 0; margin-bottom: 0; border-radius: 0; box-shadow: 0 0 1px 0px #bbb; } .navbar-custom .dropdown-menu { background: #fff; border-radius: 0; border: 0; padding: 0; min-width: 180px; -webkit-box-shadow: none; box-shadow: none; } .navbar-custom .nav li > a { position: relative; color: #000; } .navbar-collapse { max-height: 340px; } /*for transparent menu and menu color*/ @media (min-width: 768px) { .transparent.white.navbar-custom .nav li > a { color: #fff; } .transparent.white.navbar-custom .nav li.dropdown li a, .transparent.white.navbar-custom.sticky .nav li > a { color: #000; } /*load alter logo in alter background-color*/ .transparent .navbar-brand.alter-logo { display: none; } .transparent.sticky .navbar-brand { display: none; } .transparent.sticky .navbar-brand.alter-logo { display: block; } } @media (max-width: 767px) { .transparent .navbar-brand { display: none; } .transparent .navbar-brand.alter-logo { display: block; } } @media (min-width: 992px) { .transparent.navbar-custom .nav>li:last-child { margin-right: 30px; } } .navbar-custom .dropdown-menu > li > a { border-top: 1px solid rgba(0, 0, 0, 0.05) !important; padding: 11px 20px; font-size: 13px; color: #000; } .navbar-custom .dropdown-menu > li:last-child > a { border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important; } .navbar-custom .dropdown-menu .dropdown-menu { border-left: 1px solid rgba(0, 0, 0, 0.05); left: 100%; right: auto; top: 0; margin-top: 0; } .navbar-custom .dropdown-menu.left-side .dropdown-menu { border: 0; border-right: 1px solid rgba(0, 0, 0, 0.05); right: 100%; left: auto; } .navbar-custom .nav > li > a:focus, .navbar-custom .nav > li > a:hover, .navbar-custom .nav > li.active > a, .navbar-custom .nav .open > a, .navbar-custom .nav .open > a:focus, .navbar-custom .nav .open > a:hover, .navbar-custom .dropdown-menu > li > a:focus, .navbar-custom .dropdown-menu > li > a:hover, .navbar-custom .dropdown-menu>.active>a, .navbar-custom .dropdown-menu>.active>a:focus, .navbar-custom .dropdown-menu>.active>a:hover { background-color: transparent; color: #b8a580; } .navbar-custom .dropdown-menu > li > a:hover { padding-left: 25px; } .navbar-custom .dropdown-toggle:after { position: absolute; display: block; right: 3px; top: 50%; margin-top: -6px; font: normal normal normal 14px/1 FontAwesome; font-size: 12px; content: "\f107"; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .navbar-custom .navbar-toggle .icon-bar { background: #000; } /* ------------------------------------------------------------------- Responsive Media Querries ------------------------------------------------------------------- */ @media (min-width: 768px) { .navbar-brand > img { width: 50px !important; } .tt-default-nav { width: 100%; z-index: 1000; -webkit-transition: height 0.4s ease; -moz-transition: height 0.4s ease; transition: height 0.4s ease; } .tt-default-nav.sticky { height: 50px; z-index: 1000; position: fixed; top: 0; } .tt-default-nav .navbar-brand { height: 50px; padding:0px 0; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; transition: all 0.4s ease; } .tt-default-nav.sticky .navbar-brand { height: 60px; padding: 0; } .tt-default-nav.navbar-custom .nav>li>a { line-height: 50px; padding: 0 12px; } .tt-default-nav.sticky.navbar-custom .nav > li > a { line-height: 50px; } .navbar-fixed-top.transparent { background: transparent; box-shadow: none; -webkit-transition: background .4s ease; -moz-transition: background .4s ease; transition: background .4s ease; } .navbar-fixed-top.transparent.sticky { background: #fff; box-shadow: 0 0 1px 0 #bbb; } .navbar-fixed-top .navbar-brand { padding: 38px 15px; } .navbar-fixed-top.sticky .navbar-brand { padding: 15px 15px; } .navbar-fixed-top .navbar-nav>li>a { padding: 40px 15px 40px 0; margin-right: 15px; } .navbar-fixed-top.sticky .navbar-nav>li>a { padding: 20px 15px 20px 0; } .navbar-custom .dropdown-menu { position: absolute; display: block; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.3s ease 0s; -moz-transition: opacity 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; } .navbar-custom .open > .dropdown-menu { visibility: visible; opacity: 1; } .navbar-custom .dropdown-menu .dropdown-toggle:after { position: absolute; display: block; right: 10px; top: 50%; margin-top: -6px; font: normal normal normal 14px/1 FontAwesome; font-size: 12px; content: "\f105"; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } } @media (min-width: 992px) { .tt-default-nav.navbar-custom .nav>li { margin-right: 15px; } } @media (max-width: 767px) { /* Navbar */ .navbar-custom { background-color: #fff; } .navbar-custom .navbar-nav { margin-top: 1px; margin-bottom: 0; } .tt-default-nav.sticky { width: 100%; z-index: 1000; position: fixed; top: 0; } .navbar-custom .navbar-nav .open .dropdown-menu .dropdown-header, .navbar-custom .navbar-nav .open .dropdown-menu > li > a { padding: 10px 25px; } .navbar-custom .navbar-nav .open .dropdown-menu .dropdown-menu .dropdown-header, .navbar-custom .navbar-nav .open .dropdown-menu .dropdown-menu > li > a { padding: 10px 35px; } .navbar-custom li a { border-top: 1px solid rgba(0, 0, 0, 0.05) !important; } .navbar-custom .dropdown-toggle:after, .navbar-custom .dropdown-menu .dropdown-toggle:after { font-size: 14px; right: 20px; content: "\f107"; } .navbar-custom .nav > .open >.dropdown-toggle:after, .navbar-custom .dropdown-menu .dropdown.open .dropdown-toggle:after { content: "\f106"; } } /*Fullscreen Navigation*/ #fullpage-nav.main-nav { position: fixed; top: 0; left: 0; z-index: 200; width: 100%; background: transparent; padding: 10px 0; -webkit-transition: background .4s ease-in-out,padding .4s ease-in-out; -moz-transition: background .4s ease-in-out,padding .4s ease-in-out; transition: background .4s ease-in-out,padding .4s ease-in-out; } #fullpage-nav.main-nav.sticky { background: #2f2f2f; padding: 0 0; } #fullpage-nav .logo-wrapper { float: left; position: relative; z-index: 10; } #fullpage-nav .logo { display: table-cell; vertical-align: middle; height: 70px; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } @media (min-width: 768px) { #fullpage-nav .navbar-toggle { display: block; } } #fullpage-nav nav, #fullpage-nav .navbar-toggle { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #fullpage-nav nav { position: fixed; top: 0; z-index: 300; background-color: rgba(0, 0, 0, 0.9); width: 100%; height: 100%; text-align: center; } #fullpage-nav .nav-hide { display: none; } #fullpage-nav nav ul { position: absolute; width: 100%; top: 50%; left: 0; text-align: center; -webkit-transform: translate(0%, -50%); -moz-transform: translate(0%, -50%); -ms-transform: translate(0%, -50%); -o-transform: translate(0%, -50%); transform: translate(0%, -50%); } #fullpage-nav .nav>li>a { font-family: 'Roboto Slab', serif; display: block; padding: 20px 15px; font-size: 36px; color: #fff; font-weight: 300; text-decoration: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } #fullpage-nav .nav>li>a:focus, #fullpage-nav .nav>li>a:hover { text-decoration: none; background: #fff; color: #b8a580; } #fullpage-nav .nav>li.active>a { color: #b8a580; background: #fff; } #fullpage-nav .navbar-toggle { top: 10px; padding: 9px 10px; margin-right: 0; width: 47px; height: 45px; z-index: 300; cursor: pointer; } #fullpage-nav .bar1, #fullpage-nav .bar2, #fullpage-nav .bar3 { width: 100%; height: 2px; margin-bottom: 5px; background-color: #fff; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #fullpage-nav .navbar-on .bar1, #fullpage-nav .navbar-on .bar2, #fullpage-nav .navbar-on .bar3 { background-color: #b8a580; } #fullpage-nav .navbar-on .bar1 { transform-origin: 10% 40%; transform: rotate(45deg); } #fullpage-nav .navbar-on .bar3 { transform-origin: 10% 40%; transform: rotate(-45deg); } #fullpage-nav .navbar-on .bar2 { background-color: transparent; } /* =-=-=-=-=-=-= Search Box =-=-=-=-=-=-= */ .search-icon { position: relative; top:35px; left:0; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .search-icon:hover{ cursor: pointer; } .sticky .search-icon { top:15px; } .search-icon:after, .search-icon.active:after { position: absolute; top:0; right:0; font-family: fontawesome; z-index: 100; } .search-icon:after { content: "\f002"; } .search-icon.active:after { content: "\f00d"; color:#b8a580; } #search-box { border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.15); color: #555; font-family: sans-serif; padding: 0 15px; outline: none; font-size: 20pt; text-align: center; background-color: #ccc; position: absolute; right: 0; display: none; width: 100%; top: 100px; z-index: 1; line-height: 70px; height: 70px; color: #fff; } .sticky #search-box{ top:60px; } /*for transparent white menu*/ .transparent.white.navbar-custom .search-icon:after { color: #fff; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -o-transition: color 0.3s ease; transition: color 0.3s ease; } .transparent.white.navbar-custom.sticky .search-icon:after { color: #000; } /* =-=-=-=-=-=-= Page Title Section =-=-=-=-=-=-= */ .page-title-section { background: url(../../assets/images/page-header/cover-one.jpg) no-repeat center center #000; background-size: cover; position: relative; min-height: 210px; } .page-title-section.about-us-one { background: url(../../assets/images/page-header/cover-two.jpg) no-repeat center center #000; background-size: cover; } .page-title-section.about-us-two { background: url(../../assets/images/page-header/cover-three.jpg) no-repeat center center #000; background-size: cover; } .page-title-section.blog-page-cover { background: url(../../assets/images/page-header/cover-four.jpg) no-repeat center center #000; background-size: cover; } .page-title-section.portfolio-cover { background: url(../../assets/images/page-header/cover-one.jpg) no-repeat center center #000; background-size: cover; } .page-title-section.shortcode-cover { background: url(../../assets/images/page-header/cover-six.jpg) no-repeat center center #000; background-size: cover; } .page-title-section.homepage-blog { background: url(../../assets/images/slider/slide-1.jpg) no-repeat center center #000; background-size: cover; min-height: 450px; } .page-title-section.case-study-page { background: url(../../assets/images/slider/slide-1.jpg) no-repeat center center #000; background-size: cover; min-height: 460px; overflow: hidden; } .page-title-section.case-study-page.gradient-bottom { min-height: 600px; } .conector { display: block; width: 1px; height: 125px; background: #dedede; margin: 0 auto; } .page-title-section::before { content: ""; background-color: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .page-header { padding: 0; margin: 0; border-bottom: 0; position: absolute; top: 50%; width: 100%; left: 0; text-align: center; z-index: 15; -webkit-transform: translate(0%, -50%); -moz-transform: translate(0%, -50%); -ms-transform: translate(0%, -50%); -o-transform: translate(0%, -50%); transform: translate(0%, -50%); } .case-study-page .page-header { padding: 120px 0 0; } .page-header h1 { font-size: 50px; line-height: 50px; font-weight: 700; color: #fff; text-transform: capitalize; margin: 0; } .case-study-page .page-header h1{ margin-bottom: 15px; } .page-header p { font-size: 16px; line-height: 30px; font-weight: 600; color: #fff; margin-bottom: 60px; } .page-header a.btn { font-size: 20px; line-height: 18px; font-weight: 300; padding: 20px 57px; color: #fff; border-radius: 30px; background-color: transparent; border-color: #fff; } .page-header a.btn:hover { background-color: #fff; color: #b8a580; } /* =-=-=-=-=-=-= Slider Section Home One =-=-=-=-=-=-= */ .trendy-slider { overflow: hidden; position: relative; } .trendy-slider img{ width: 100%; background-size: cover; } .carousel-fade .carousel-inner .item { max-height: 700px; opacity:.8; -webkit-transition-property:opacity; -moz-transition-property:opacity; -o-transition-property:opacity; transition-property:opacity } .carousel-fade .carousel-inner .active { opacity: 1 } .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { left: 0; opacity: 0; z-index: 1; } .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1 } .carousel-fade .carousel-inner .item:after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.4); } .carousel-fade .carousel-control { z-index: 20 } /* Caption style /* ------------------------------ */ .trendy-slider .carousel-caption { bottom: inherit; color: #ffffff; left: 0; margin-top: -257px; position: absolute; right: 0; text-align: center; text-transform: uppercase; top: 50%; z-index: 15; } .trendy-slider .carousel-caption h1 { color: #ffffff; font-family: "Open Sans",sans-serif; font-size: 54px; font-weight: 300; letter-spacing: 0; line-height: 80px; margin-bottom: 40px; margin-top: 20px; text-transform: uppercase; } .trendy-slider .carousel-caption h1 span{ font-weight: 900; } .trendy-slider .carousel-caption p { color: #ffffff; font-size: 16px; margin-bottom: 70px; text-transform: uppercase; } /* next and previous control button style /* --------------------------------------------- */ /*control button style one*/ .control-one .carousel-control { width: 50px; height: 50px; line-height: 46px; font-size: 40px; top: 50%; margin-top: -25px; border-radius: 50%; color: #000; background-color: #ddd; background-image: none; text-shadow: none; opacity: 0; visibility: hidden; } .control-one:hover .carousel-control { opacity: 1; visibility: visible; } .control-one .carousel-control:hover { background-color: #b8a580; color: #fff; } .control-one .left.carousel-control { left: 30px; } .control-one .right.carousel-control { right: 30px; } /*control button style two*/ .control-two .carousel-control { width: 30px; height: 60px; line-height: 58px; font-size: 30px; top: 50%; margin-top: -25px; color: #202020; background-color: rgba(255, 255, 255, 0.4); background-image: none; text-shadow: none; opacity: 0; visibility: hidden; } .control-two:hover .carousel-control { opacity: 1; visibility: visible; } .control-two:hover .carousel-control:hover { color: #b8a580; background-color: rgba(255, 255, 255, 0.9); } /* Text animation delay for first slider /* ------------------------------------- */ .delay-1 { -webkit-animation-delay: 300ms; -moz-animation-delay: 300ms; animation-delay: 300ms; } .delay-2 { -webkit-animation-delay: 600ms; -moz-animation-delay: 600ms; animation-delay: 600ms; } .delay-3 { -webkit-animation-delay: 1200ms; -moz-animation-delay: 1200ms; animation-delay: 1200ms; } .delay-4 { -webkit-animation-delay: 1500ms; -moz-animation-delay: 1500ms; animation-delay: 1500ms; } /* =-=-=-=-=-=-= html video-slider section for video homepage =-=-=-=-=-=-= */ .video-slider { top: 0%; left: 0%; max-height: 700px; width: 100%; overflow: hidden; position: relative; } .video-slider::before{ content: ""; background-color: rgba(0, 0, 0, 0.3); width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .slider-caption { position: absolute; top: 50%; width: 100%; left: 0; text-align: center; text-transform: uppercase; z-index: 15; -webkit-transform: translate(0%, -50%); -moz-transform: translate(0%, -50%); -ms-transform: translate(0%, -50%); -o-transform: translate(0%, -50%); transform: translate(0%, -50%); } .slider-caption h1{ color:#FFFFFF; font-size: 75px; line-height: 80px; font-weight: 300; text-transform: uppercase; letter-spacing: -5px; margin-bottom: 40px; font-family: 'Open Sans', sans-serif; } .slider-caption h1 span{ font-weight: 900; } .slider-caption p{ color:#FFFFFF; font-size: 25px; text-transform: uppercase; margin-bottom: 70px; } .slider-caption .btn { font-size: 20px; line-height: 18px; font-weight: 300; color: #fff; background-color: transparent; border-color: #fff; border-radius: 30px; padding: 20px 58px; } .slider-caption .btn:hover { background: #fff; border-color: transparent; color: #b8a580; } @media (max-width : 767px) { .video-slider{ max-height: 400px; } .slider-caption h1 { font-size: 22px; line-height: 35px; letter-spacing: 0; margin-bottom: 0; } .slider-caption p { font-size: 10px; margin-bottom: 15px; } .slider-caption .btn { font-size: 14px; padding: 10px 30px; } } @media only screen and (min-width : 480px) and (max-width : 767px) { .slider-caption h1 { font-size: 33px; line-height: 56px; } .slider-caption p { font-size: 14px; margin-bottom: 25px; } } /* =-=-=-=-=-=-= youtube video section for youtube homepage =-=-=-=-=-=-= */ .youtube-wrapper{ min-width: 100%; min-height: 700px; top:0; left:0; background: url(../../assets/images/slider/video-falback.jpg) no-repeat center center #162E4A; background-size: cover; position: relative; } /*for background opacity*/ .youtube-wrapper::before{ content: ""; background-color: rgba(0, 0, 0, 0.3); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 10; } @media (max-width : 766px) { .youtube-wrapper{ min-height: 400px; } } /* =-=-=-=-=-=-= Creative Section =-=-=-=-=-=-= */ .creative-section { padding: 100px 0; } .service-tab{ position: relative; } .service-tab .nav-tabs{ border-bottom: 0; } .service-tab li { position: relative; text-align: center; border-right: 1px solid #b9b9b9; padding:0; } .service-tab li > a{ padding:40px; background-color: #f5f5f5; color:#000000; border:0; width: 100%; } .service-tab .nav-tabs>li.active>a, .service-tab .nav-tabs>li.active>a:focus, .service-tab .nav-tabs>li.active>a:hover{ border:0; background-color: #ffffff; } .service-tab .nav-tabs.nav-justified>li>a{ border:0; border-radius: 0; } .service-tab .nav-tabs.nav-justified>.active>a, .service-tab .nav-tabs.nav-justified>.active>a:focus, .service-tab .nav-tabs.nav-justified>.active>a:hover{ border:0; } .service-tab li:first-child { border-left: 1px solid #b9b9b9; } .service-tab li i:before{ font-size: 30px; color:#202020; } .service-tab li.active i:before, .service-tab li:hover i:before{ color:#b8a580; } .service-tab li span{ display:block; font-size: 18px; color:#202020; font-family: 'Roboto Slab', serif; } .service-tab li.active:after, .service-tab li:hover:after { content:""; border-bottom:10px solid #b8a580; position: absolute; bottom:0; left:0; width:100%; } .creative-section h2 { text-transform: capitalize; font-weight: 700; margin-bottom: 45px; position: relative; } .creative-section h2::after { content: ""; background-color: #b8a580; width: 100px; height: 2px; position: absolute; left: 0; bottom: -16px; } .creative-section .btn { margin-top: 42px; } .mac-screenshot { padding-top:0px; } .mac-screenshot img{ width: inherit; } /* =-=-=-=-=-=-= Recent Project Section =-=-=-=-=-=-= */ .recent-project-section { background-color: #fafafa; border-top: 1px solid #d2d2d2; border-bottom: 1px solid #d2d2d2; } .project-container { margin-top: 50px; position: relative; } .recent-project { position: relative; overflow: hidden; } .recent-project img { width: 100%; } .project-info { position: absolute; left: 0; top: 50%; color: #fff; width: 100%; text-align: center; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .recent-project:hover .project-info { top: 30%; opacity: 1; visibility: visible; } .project-info h3 { color: #fff; font-size: 18px; line-height: 18px; } ul.project-meta { margin-top: 15px; } ul.project-meta li{ display: inline-block; padding: 0 10px; line-height: 15px; border-right: 1px solid #fff; -webkit-transform: translateZ(0); transform: translateZ(0); } ul.project-meta li:last-child{ margin-right: 0; padding-right: 0; border-right: 0; } ul.project-meta li a{ display: block; color: #fff; } ul.project-meta li a:hover{ color: #b8a580; } .project-link { position: absolute; left: 0; bottom: -50%; width: 100%; padding: 16px 30px; line-height: 18px; text-transform: capitalize; background: #b8a580; opacity: 0; visibility: hidden; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .recent-project:hover .project-link { bottom: 0; opacity: 1; visibility: visible; } .project-link:hover { background: #c0a56f; } .project-link a { color: #fff; } .project-link a i{ line-height: 20px; } /* Overlay and hover effect /* ------------------------------ */ .recent-project .tt-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(44, 62, 80, 0.9); opacity: 0; visibility: hidden; -webkit-transition: opacity 0.2s; -moz-transition: opacity 0.2s; -o-transition: opacity 0.2s; transition: opacity 0.2s; } .recent-project:hover .tt-overlay { opacity: 1; visibility: visible; } /* Carousel navigation /* ------------------------------ */ .project-navigation .btn-prev{ position: absolute; left: 0; top: 50%; margin-top: -40px; width: 20px; height: 80px; background-color: rgba(0, 0, 0, 0.5); color: #ffffff; line-height: 80px; text-align: center; font-size: 18px; opacity:0; z-index: 997; } .project-navigation .btn-next{ position: absolute; right:0; top:50%; margin-top:-40px; width:20px; height:80px; background-color: rgba(0, 0, 0, 0.5); color:#ffffff; line-height: 80px; text-align: center; font-size: 18px; opacity:0; z-index: 997; } .project-navigation a:hover{ width:30px; } .project-container:hover .project-navigation .btn-prev, .project-container:hover .project-navigation .btn-next{ opacity: 1; } /*project-container version-two*/ .project-container.version-two {} .version-two ul.project-meta li a:hover { color: #000; } .version-two.border-style ul.project-meta li a:hover { color: #b8a580; } .version-two .recent-project{ width: 20%; float: left; } @media (max-width : 767px) { .version-two .recent-project { width: 50%; margin-bottom: 0; } } @media (max-width : 480px) { .version-two .recent-project { width: 100%; margin-bottom: 0; } } @media (min-width : 768px) and (max-width : 991px) { .version-two .recent-project { width: 33.33%; } } @media (min-width : 992px) and (max-width : 1199px) { .version-two .recent-project { width: 25%; } } .version-two .recent-project .btn { padding: 9px 28px; background-color: #fff; border-color: transparent; color: #b8a580; border-radius: 30px; } .version-two .recent-project .btn:hover { background-color: rgba(255, 255, 255, 0.9); } .version-two .project-link { text-align: center; background-color: transparent; } .version-two .recent-project:hover .project-link { bottom: 15px; } .version-two .recent-project .tt-overlay { background-color: rgba(255, 42, 64, 0.7); } /*project-container version-two border-style*/ .version-two.border-style .project-info, .version-two.border-style .project-link { z-index: 300; } .version-two.border-style .recent-project::before { content: ""; position: absolute; top: 10px; right: 10px; bottom: 10px; left: 10px; border: 1px solid #fff; opacity: 0; z-index: 200; -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, transform 0.5s; } .version-two.border-style .recent-project:hover::before { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .version-two.border-style .recent-project .tt-overlay { background-color: rgba(0, 0, 0, 0.8); z-index: 100; } /*Version-Four*/ .version-four .recent-project .project-link{ padding: 0; background-color: transparent; text-align: center; } .version-four .recent-project .project-link img{ width: inherit!important; } .version-four .recent-project:hover .project-link { bottom: 20px; } @media (min-width : 768px) and (max-width : 991px) { .version-four .recent-project:hover .project-info { top: 15%; } } @media (max-width : 767px) { .version-four .recent-project { margin-bottom: 30px; } } /*Version-Five*/ .version-five .recent-project .project-link{ padding: 0; background-color: transparent; top: 0; bottom: auto; } .version-five .recent-project:hover .project-link{ top: 30%; bottom: auto; } .version-five .recent-project .project-link a{ display: block; width: 45px; height: 45px; font-size: 20px; line-height: 41px; text-align: center; margin: 0 auto; border: 2px solid #fff; border-radius: 50%; } .version-five .recent-project .project-link a:hover { background-color: #fff; border-color: transparent; color: #b8a580; } .version-five .recent-project .project-info { top: auto; bottom: 0; } .version-five .recent-project:hover .project-info { top: auto; bottom: 25%; } .version-five .recent-project .project-info a { color: #fff; } .version-five .recent-project .tt-overlay { background-color: rgba(255, 42, 64, 0.8); } @media (min-width : 768px) and (max-width : 991px) { .version-five .recent-project:hover .project-link { top: 15%; } .version-five .recent-project:hover .project-info { top: auto; bottom: 15%; } } @media (min-width : 992px) and (max-width : 1199px) { .version-five .recent-project:hover .project-link { top: 25%; } } /*Version Eight*/ .version-eight .recent-project .project-link{ bottom: 30%; padding: 0; text-align: center; background-color: transparent; } .version-eight .recent-project:hover .project-link { bottom: 50%; margin-bottom: -32px; } .version-eight .project-link ul li{ display: inline-block; } .version-eight .project-link ul li a{ display: block; width: 45px; height: 45px; font-size: 20px; line-height: 41px; color: #b8a580; margin: 0 5px; border: 2px solid #b8a580; border-radius: 50%; -webkit-transform: translateZ(0); transform: translateZ(0); } .version-eight .project-link ul li a:hover { background-color: #b8a580; border-color: transparent; color: #fff; } .info { margin-top: 10px; color: #616161; } .info span{ font-weight: 600; } .info a.like { color: #616161; } .info a.like i, .info a.like:hover { color: #b8a580; } .version-eight.alter-bg .info span{ display: block; font-size: 16px; line-height: 20px; } .version-eight .recent-project .tt-overlay { background-color: rgba(255, 255, 255, 0.8); } .version-eight.alter-bg .recent-project .tt-overlay { background-color: rgba(44, 62, 80, 0.8); } .version-eight.alter-bg .recent-project .project-link{ padding: 10px 0; background-color: rgba(255, 255, 255, 0.9); } /*Magnific Popup CSS*/ .mfp-fade.mfp-bg { opacity: 0; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .mfp-fade.mfp-bg.mfp-ready { opacity: 0.75; } .mfp-bottom-bar { display: none; } .mfp-fade.mfp-bg.mfp-removing { opacity: 0; } .mfp-arrow-right::after, .mfp-arrow-left::after { font-family: 'FontAwesome'; border: none !important; color: #fff; font-size: 65px; -webkit-transition: .5s; transition: .5s; } .mfp-arrow-right::after { content: "\f105" !important; } .mfp-arrow-left::after { content: "\f104" !important; } .mfp-arrow-right::before , .mfp-arrow-left::before { border: none !important; } .mfp-arrow { height: 60px; } .mfp-arrow::before, .mfp-arrow::after, .mfp-arrow .mfp-b, .mfp-arrow .mfp-a { margin-top: 15px; top: -1px !important; } img.mfp-img { padding: 40px 0px 0; } .mfp-fade.mfp-wrap .mfp-content { opacity: 0; transform: scale(0.95); -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .mfp-fade.mfp-wrap.mfp-ready .mfp-content { transform: scale(1); opacity: 1; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .mfp-fade.mfp-wrap.mfp-removing .mfp-content { opacity: 0; transform: scale(0.95); -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } /* =-=-=-=-=-=-= Feature Section =-=-=-=-=-=-= */ .features .media{ margin-top: 40px; } .features .media:first-child { margin-top: 0; } .features .media a i::before { display: block; font-size: 28px; line-height: 50px; text-align: center; width: 50px; height: 50px; color: #b8a580; border: 1px solid #b8a580; border-radius: 4px; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .features .media:hover a i::before { background-color: #b8a580; color: #fff; border: 1px solid transparent; } .features .media-left, .features .media>.pull-left { padding-right: 30px; float: left; } .features .media-heading { font-size: 18px; line-height: 25px; text-transform: capitalize; } .features .media-heading a{ color: #202020; } .features .media-heading a:hover{ color: #b8a580; } .features .media-body p{ color: #a7a7a7; line-height: 25px; } /* =-=-=-=-=-=-= About Section =-=-=-=-=-=-= */ .about-info h2 { margin-bottom: 36px; font-weight: 700; } .creative-skills h2, .faq-section h2 { font-weight: 700; margin-bottom: 30px; } .video-wrap iframe{ border: 0; width: 100%; height: 310px; } /* Progress Bar /* ------------------------------ */ .skill-title { font-size: 16px; display: block; margin-bottom: 8px; } .progress { padding: 6px 8px; border-radius: 10px; box-shadow: none; margin-bottom: 14px; } .progress-bar { background-color: #b8a580; box-shadow: none; border-radius: 10px; } .progress .progress-bar.six-sec-ease-in-out { -webkit-transition: width 2s ease-in-out; -moz-transition: width 2s ease-in-out; -o-transition: width 2s ease-in-out; transition: width 2s ease-in-out; } /* ---------------------------------------- Accordion version One -------------------------------------------*/ .accordion-v1 .panel { box-shadow: none; border:0; border-radius: 0; } .accordion-v1 .panel-default>.panel-heading h3{ font-family: 'Open Sans', sans-serif; } .accordion-v1 .panel .panel-heading { position: relative; padding: 0; } .accordion-v1 .panel-title a.collapsed{ display: block; color: #fff; background-color: #666666; border-color: #666666; padding: 17px 15px; border-radius: 4px; } .accordion-v1 .panel-title a{ display: block; color: #fff; border-color: #666666; padding: 17px 15px; border-top-left-radius: 4px; border-top-right-radius: 4px; background-color: #FF2A40; } .accordion-v1 .panel-default>.panel-heading+.panel-collapse>.panel-body { border: 1px solid #EEEEEE; } .accordion-v1 .panel .panel-heading a:after { font-family: 'FontAwesome'; content: "\f107"; font-size: 24px; width: 50px; height: 60px; line-height: 58px; text-align: center; position: absolute; top: 0; right: 0; } .accordion-v1 .panel .panel-heading a.collapsed:after { content: "\f105"; } /* ---------------------------------------- Accordion version two -------------------------------------------*/ .accordion-v2 {} .accordion-v2.panel-group { margin-bottom: 0; } .accordion-v2.panel-group .panel+.panel { margin-top: 0; } .accordion-v2.panel-group .panel { border-radius: 0; } .accordion-v2 .panel-default:nth-child(1) { background: url(../../assets/images/blog/collapse-bg-1.jpg); } .accordion-v2 .panel-default:nth-child(2) { background: url(../../assets/images/blog/collapse-bg-1.jpg); } .accordion-v2 .panel-default:nth-child(3) { background: url(../../assets/images/blog/collapse-bg-1.jpg); } .accordion-v2 .panel-default>.panel-heading { background-color: transparent; border-color: #f1f1f1; padding: 0; } .accordion-v2 .panel-title>a { padding: 20px 15px; color: #fff; display: block; background-color: rgba(255, 42, 64, 0.9); } .accordion-v2 .panel-title>a.collapsed { color: #fff; background-color: rgba(0, 0, 0, 0.7); } .accordion-v2 .panel-heading { border-top-left-radius: 0; border-top-right-radius: 0; } .accordion-v2 .panel-body { padding: 0 15px 15px; line-height: 20px; } .accordion-v2 .panel-default>.panel-heading+.panel-collapse>.panel-body { border-top-color: transparent; background-color: rgba(255, 42, 64, 0.9); color: #fff; } /* ---------------------------------------- Accordion version Three -------------------------------------------*/ .accordion-v3 .panel { box-shadow: none; border:0; border-radius: 0; } .accordion-v3 .panel-default>.panel-heading h3{ font-family: 'Open Sans', sans-serif; } .accordion-v3 .panel .panel-heading { position: relative; padding: 0; } .accordion-v3 .panel-title a.collapsed{ display: block; color: #fff; background-color: #999; border-color: #999; padding: 17px 15px; border-radius: 4px; } .accordion-v3 .panel-title a{ display: block; color: #fff; border-color: #999; padding: 17px 15px; border-top-left-radius: 4px; border-top-right-radius: 4px; background-color: #333; } .accordion-v3 .panel-default>.panel-heading+.panel-collapse>.panel-body { border: 1px solid #EEEEEE; } .accordion-v3 .panel .panel-heading a:after { font-family: 'FontAwesome'; content: "\f068"; font-size: 14px; width: 50px; height: 60px; line-height: 58px; text-align: center; position: absolute; top: 0; right: 0; } .accordion-v3 .panel .panel-heading a.collapsed:after { content: "\f067"; } .mocup-bg img { margin: 60px auto 0; display: block; } /* ---------------------------------------- Mission Tab -------------------------------------------*/ .mission-tab {} .mission-tab .nav-tabs { border-top: 1px solid #f1f1f1; border-bottom: 0; margin-bottom: 5px; } .mission-tab .nav-tabs>li { margin-bottom: 0; } .mission-tab .nav-tabs>li>a { margin-right: 0; font-size: 18px; line-height: 25px; color: #a0a0a0; border: 0; border-radius: 0; font-family: 'Roboto Slab', serif; font-weight: 400; } .mission-tab .nav>li>a:focus, .mission-tab .nav>li>a:hover { background-color: transparent; } .mission-tab .nav-tabs>li.active>a, .mission-tab .nav-tabs>li.active>a:focus, .mission-tab .nav-tabs>li.active>a:hover { border: 0; color: #2f2f2f; position: relative; } .mission-tab .nav-tabs>li.active>a::before { content: ""; background-color: #b8a580; width: 100%; height: 2px; position: absolute; left: 0; top: -1px; } /* =-=-=-=-=-=-= Counter Section =-=-=-=-=-=-= */ .counter-section { background: url(../images/counter-bg.jpg) no-repeat center center; -webkit-background-size: cover; background-size: cover; font-family: 'Roboto Slab', serif; } .css-overlay { background-color: rgba(26, 1, 1, 0.6); } .counter-section strong { display: block; font-size: 60px; line-height: 48px; color: #fff; } span.count-description { display: block; color: #fff; font-size: 20px; line-height: 40px; text-transform: capitalize; padding-top: 10px; } .counter-wrap{ padding:100px 0; } @media (max-width: 767px) { .counter-wrap{ padding:40px 0; } } .counter-section .selected{ background-color: rgba(255, 0, 0, 0.5); } /*factsTwo section*/ #factsTwo { font-family: 'Roboto Slab', serif; color: #1b2e40; } #factsTwo .selected{ color: #b8a580; } #factsTwo i{ display: block; margin-bottom: 20px; } #factsTwo i::before { font-size: 50px; line-height: 60px; } #factsTwo strong { display: block; font-size: 60px; line-height: 40px; } #factsTwo span.count-description { color: #1b2e40; } #factsTwo .selected span.count-description { color: #b8a580; } /* =-=-=-=-=-=-= Team Section =-=-=-=-=-=-= */ .team-thumb { position: relative; overflow: hidden; } @media (max-width: 767px) { .team-thumb { margin-bottom: 30px; } } .thumb-overlay { background-color: rgba(44, 62, 80, 0.5); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; -webkit-transition: opacity 0.2s ease-out; -moz-transition: opacity 0.2s ease-out; -o-transition: opacity 0.2s ease-out; transition: opacity 0.2s ease-out; } .team-thumb:hover .thumb-overlay { opacity: 1; visibility: visible; } .team-thumb img { width: 100%; } .member-info { position: absolute; left: 0; bottom: -20%; width: 100%; background: #b8a580; color: #fff; padding: 16px 0; opacity: 0; visibility: hidden; -webkit-transition: all 0.2s ease-out .2s; -moz-transition: all 0.2s ease-out .2s; -o-transition: all 0.2s ease-out .2s; transition: all 0.2s ease-out .2s; } .team-thumb:hover .member-info{ bottom: 0; opacity: 1; visibility: visible; } .member-info h3 { color: #fff; font-size: 22px; line-height: 25px; font-weight: 700; text-transform: uppercase; } .member-info .title{ display: block; font-size: 18px; line-height: 25px; font-weight: 300; } .member-info .social-link { margin-top: 25px; } .member-info .social-link li a { display: block; width: 35px; height: 35px; font-size: 18px; line-height: 35px; background: #fff; color: #b8a580; text-align: center; border-radius: 50%; } .member-info .social-link li a:hover { background: #D51428; color: #fff; } /* =-=-=-=-=-=-= Team Intro Section =-=-=-=-=-=-= */ .team-intro-section {} .team-intro { background-color: #b8a580; padding: 60px 60px 50px 110px; min-height: 386px; } @media (max-width : 768px) { .team-intro { padding: 60px 15px; } } @media (min-width : 992px) and (max-width : 1199px) { .team-intro { padding: 60px 60px 50px 50px; } } @media (min-width : 1500px) { .team-intro { padding: 15% 60px 50px 30%; min-height: 545px; } } .team-intro, .team-intro h1 { color: #fff; } .team-intro h1 { font-weight: 700; } .team-intro p{ font-size: 18px; font-weight: 300; } .team-intro .btn{ background-color: transparent; padding: 15px 30px; border-color: #fff; font-size: 18px; text-transform: uppercase; font-weight: 300; margin-top: 15px; } .team-intro .btn:hover{ background-color: #fff; color: #b8a580; border-color: transparent; } .team-intro-thumb img{ width: 100%; } @media (min-width : 992px){ .team-intro-thumb img{ min-height: 386px; } } @media (min-width : 1500px) { .team-intro-thumb img{ min-height: 545px; } } /* =-=-=-=-=-=-= Video Section =-=-=-=-=-=-= */ .video-section { top: 0%; left: 0%; height: 400px; width: 100%; overflow: hidden; position: relative; } .overlay { min-height: 400px; background-color: rgba(0, 0, 0, 0.5); } video, object { min-width:100%; min-height:100%; } .audio { width: 100%; } /* Play/Pause Button /* ------------------------------ */ .video-button { position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; } .video-button a i{ display: inline-block; font-size: 44px; line-height: 87px; text-align: center; font-style: normal; color: #fff; background: none; border: 5px solid #fff; width: 100px; height: 100px; border-radius: 50%; } .video-button .pause i{ opacity:0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .video-button .play i:before{ left: 1px; position: relative; top: 1px; } .video-section:hover .video-button .pause i{ opacity:1; } .video-button a i:before { content: "\f04b"; z-index: 10; font-family: FontAwesome; } .video-button a.pause i:before { content: "\f04c"; } /*in shortcode page*/ .html-video-wrapper video{ width: 100%; height: 100%; } /*popup video*/ .popup-video-section { position: relative; } .popup-video-section::before { content: ""; background-color: rgba(0, 0, 0, 0.3); position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 10; } .popup-video-section img{ width: 100%; max-height: 500px; } .popup-video-section .external-link { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin-top: -50px; margin-left: -50px; color: #fff; font-size: 44px; line-height: 90px; border: 6px solid #fff; text-align: center; border-radius: 50%; z-index: 20; } .popup-video-section .external-link i{ margin-left: 10px; } /* =-=-=-=-=-=-= Service Section =-=-=-=-=-=-= */ .services-section {} .sbox-gutter { border-right: 1px solid #dedede; border-bottom: 1px solid #dedede; } .sbox-gutter:nth-child(3), .sbox-gutter:nth-child(6) { border-right: 0; } .sbox-gutter:nth-child(4), .sbox-gutter:nth-child(5), .sbox-gutter:nth-child(6) { border-bottom: 0; } .sbox-gutter:hover { background-color: #b8a580; } .sbox-gutter, .sbox-gutter i::before, .sbox-gutter h3, .sbox-gutter p { -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } .sbox-gutter:hover i::before, .sbox-gutter:hover h3, .sbox-gutter:hover p { color: #fff; } .service-box { padding: 30px 15px; } .service-box i::before { color: #b8a580; display: inline-block; font-size: 40px; margin-bottom: 20px; margin-left: 0; } .service-box h3 { color: #b8a580; font-weight: 700; text-transform: capitalize; margin-bottom: 0px; } .service-box p { line-height: 22px; } /* service-box-v2 -------------------------------*/ .service-section-v2 { padding-top: 100px; } .service-box-v2 { margin-bottom: 50px; } .service-box-v2 h3 { font-size: 18px; color: #3f3f3f; } .service-box-v2 h3 i:before{ font-size: 25px; margin-right: 5px; } .service-box-v2:hover h3 { color: #b8a580; } /* service-section-v3 -----------------------------------*/ .service-section-v3 { background-color: #f4f4f4; border-top: 1px solid #d2d2d2; } .service-section-v3 .sbox-gutter:nth-child(2), .service-section-v3 .sbox-gutter:nth-child(4) { border-right: 0; } .service-section-v3 .sbox-gutter:nth-child(3) { border-right: 1px solid #dedede; } .service-section-v3 .sbox-gutter:nth-child(3), .service-section-v3 .sbox-gutter:nth-child(4) { border-bottom: 0; } .service-section-v3 .service-box { padding: 40px 30px; } .service-section-v3 .service-box h3{ font-size: 18px; } .service-section-v3 .service-box i::before { font-size: 30px; margin-right: 7px; } /* =-=-=-=-=-=-= Process Section =-=-=-=-=-=-= */ .process-section { background: url(../images/process-bg.jpg) no-repeat #dedede; -webkit-background-size: cover; background-size: cover; } .process-box { background-color: #b8a580; color: #fff; padding: 30px; border-radius: 10px; } .process-box i::before { font-size: 30px; } .process-box h3{ font-size: 16px; line-height: 45px; color: #fff; margin: 0; } /* =-=-=-=-=-=-= Portfolio Section =-=-=-=-=-=-= */ ul#filter { margin-bottom: 50px; } ul#filter li{ font-size: 16px; line-height: 25px; padding: 7px 20px; border-radius: 20px; cursor: pointer; } ul#filter li.active{ background-color: #b8a580; color: #fff; } /*Filter Square Style*/ ul#filter.filter-square li{ border: 1px solid #ccc; border-radius: 0; padding: 5px 20px; margin: 2px; } ul#filter.filter-square li.active{ border: 1px solid transparent; } /*End Filter Square Style*/ /*Filter Rounded Style*/ ul#filter.filter-rounded li{ border: 0; border-radius: 3px; background-color: #E0E0E0; padding: 5px 20px; margin: 2px; } ul#filter.filter-rounded li.active{ background-color: #1B2E3F; } /*End Filter Square Style*/ /*Filter Transparent Style*/ ul#filter.filter-transparent li{ color: #a9a8a8; padding: 5px 15px; font-size: 14px; text-transform: uppercase; } ul#filter.filter-transparent li.active{ background-color: transparent; color: #b8a580; } /*End Filter Transparent Style*/ ul#portfolio-grid { overflow: hidden; } ul#portfolio-grid li img{ width: 100%; } ul#portfolio-grid>li{ float: left; display: block; height: auto; } /*Five Column Portfolio*/ ul#portfolio-grid.five-column>li{ width: 20%; } /*Four Column Portfolio*/ ul#portfolio-grid.four-column>li{ width: 25%; } /*Three Column Portfolio*/ ul#portfolio-grid.three-column>li{ width: 33.33%; } /*Two Column Portfolio*/ ul#portfolio-grid.two-column>li{ width: 50%; } @media (max-width: 1199px) { ul#portfolio-grid.five-column>li{ width: 25%; } } @media (max-width: 991px) { ul#portfolio-grid.five-column>li, ul#portfolio-grid.four-column>li{ width: 33.33%; } } @media (max-width: 767px) { ul#portfolio-grid.five-column>li, ul#portfolio-grid.four-column>li, ul#portfolio-grid.three-column>li{ width: 50%; } } @media (max-width: 480px) { ul#portfolio-grid.five-column>li, ul#portfolio-grid.four-column>li, ul#portfolio-grid.three-column>li, ul#portfolio-grid.two-column>li{ width: 100%; } } .portfolio-item.gutter { margin-bottom: 20px!important; } .portfolio { position: relative; overflow: hidden; } /* Portfolio overlay default /* ------------------------------ */ .portfolio .tt-overlay { background-color: rgba(255, 42, 64, 0.9); position: absolute; width: 100%; height: 100%; opacity: 0; visibility: hidden; -webkit-transition: opacity 0.2s ease-out; -moz-transition: opacity 0.2s ease-out; -o-transition: opacity 0.2s ease-out; transition: opacity 0.2s ease-out; } .portfolio:hover .tt-overlay{ opacity: 1; visibility: visible; } .portfolio-info .project-title, .portfolio-info .links { position: absolute; left: 0; color: #fff; width: 100%; opacity: 0; visibility: hidden; } .portfolio-info .project-title { top: 60%; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .portfolio:hover .portfolio-info .project-title { top: 35%; opacity: 1; visibility: visible; } .portfolio-info .links { top: 90%; -webkit-transition: 0.4s; -moz-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; } .portfolio:hover .portfolio-info .links { top: 55%; opacity: 1; visibility: visible; } .portfolio-info .btn { background-color: transparent;; border-color: #fff; padding: 12px 22px; border-radius: 20px; } .portfolio-info .btn:hover { background-color: #fff;; border-color: #fff; color: #b8a580; } .portfolio-container .btn.view-more { margin-top: 40px; } /* Portfolio Hover Style Two /* ------------------------------ */ .hover-two .portfolio:hover .portfolio-info .links { top: 46%; } .hover-two .portfolio .tt-overlay { background-color: rgba(0, 0, 0, 0.7); } .portfolio-details { position: absolute; left: 0; bottom: 0; width: 100%; } .portfolio-details li { display: inline-block; position: relative; bottom: -40px; opacity: 0; visibility: hidden; transform: translateZ(0); } .portfolio:hover .portfolio-details li { bottom: 0; opacity: 1; visibility: visible; } .portfolio:hover .portfolio-details li:nth-child(1) { -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .portfolio:hover .portfolio-details li:nth-child(2){ -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .portfolio-details li a{ display: block; width: 40px; height: 40px; line-height: 40px; background-color: rgba(255, 255, 255, 0.9); } /* =-=-=-=-=-=-= Portfolio Single Page =-=-=-=-=-=-= */ .portfolio-nav{ padding: 40px 0; } .portfolio-nav a { margin-right: 20px; color: #a7a7a7; } .portfolio-nav a:hover { color: #b8a580; } .project-overview { padding: 90px 0; } .single-project-section.alter .project-overview { padding: 0; } .project-overview h2{ font-size: 18px; line-height: 22px; margin-bottom: 20px; } .project-overview p{ margin-bottom: 25px; } .client-testimonial blockquote { font-size: 17px; border-left: 5px solid #b8a580; background: #fafafa; font-style: italic; } .portfolio-meta li { margin: 15px 0; color: #666; } .portfolio-meta li{ margin: 15px 0; } .portfolio-meta li span { display: inline-block; width: 130px; letter-spacing: 1px; color: #202020; font-size: 12px; text-transform: uppercase; font-weight: 600; } .portfolio-meta li a { margin-right: 10px; color: #a7a7a7; } .portfolio-meta li a:hover { color: #b8a580; } .quick-overview .btn { padding: 9px 20px; text-transform: capitalize; margin-top: 20px; } @media (max-width: 991px) { .project-overview { padding: 60px 0; } .quick-overview { margin-top: 30px; } .single-project-section.alter .project-overview { padding-bottom: 90px; } .single-project-section.alter .pb-100 { padding-bottom: 60px; } } /* =-=-=-=-=-=-= Content Slider Style =-=-=-=-=-=-= */ .trendy-slider {} /* =-=-=-=-=-=-= Partner Section =-=-=-=-=-=-= */ .bwWrapper { position:relative; display:block; } /* =-=-=-=-=-=-= Case study section =-=-=-=-=-=-= */ .case-study-section { color: #fff; } .case-study-left { background-color: #b8a580; padding: 60px 40px 60px 110px; } .case-study-right { background-color: #2c3e50; padding: 60px 110px 60px 40px; } .case-study-section h1 { color: #fff; font-weight: 700; margin-bottom: 15px; } .case-study-section p { font-size: 18px; margin-bottom: 30px; } .case-study-section .btn { font-weight: 300; text-transform: uppercase; background-color: transparent; border-color: #fff; } .case-study-section .btn:hover { background-color: #fff; border-color: #fff; } .case-study-left .btn:hover { color: #b8a580; } .case-study-right .btn:hover { color: #2c3e50; } /* =-=-=-=-=-=-= Map Section =-=-=-=-=-=-= */ #myMap { height: 250px; } #mapcontent p{ margin: 0; font-size: 16px; } /* =-=-=-=-=-=-= Contact Section =-=-=-=-=-=-= */ .contact-section .btn{ font-weight: 600; min-width: 350px; border-radius: 30px; background-color: #b8a580; border-color: #b8a580; } .contact-section .btn:hover{ background-color: #c0a56f; border-color: #c0a56f; } /* =-=-=-=-=-=-= Footer Section =-=-=-=-=-=-= */ .footer-section { background-color: #202020; color: #ffffff; padding: 100px 0 40px; position: relative; } .backToTop i{ font-size: 70px; line-height: 85px; background: #b8a580; color: #fff; width: 100px; height: 100px; position: absolute; top: -50px; left: 50%; margin-left: -50px; border: 5px solid #fff; border-radius: 50%; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .backToTop i:hover{ background: #c0a56f; } .footer-section p{ font-size: 16px; line-height: 30px; color: #b5b5b5; } .footer-logo p{ margin-bottom: 26px; } .footer-logo p span{ color: #b8a580; font-weight: 600; } .footer-logo img{ width: initial; margin-bottom: 30px; } .copyright { margin-top: 26px; } .copyright p { margin: 0; } .social-icon ul li a i{ font-size: 24px; line-height: 50px; color: #fff; width: 50px; height: 50px; border: 1px solid #fff; border-radius: 50%; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .social-icon ul li a i:hover{ color: #b8a580; border: 1px solid #b8a580; } /* =-=-=-=-=-=-= Preloader =-=-=-=-=-=-= */ #preloader { background: #FFF; bottom: 0; left: 0; position: fixed; right: 0; top: 0; z-index: 9999; } #status, .status-mes { background-image: url(../images/preloder.gif); background-position: center; background-repeat: no-repeat; height: 200px; left: 50%; margin: -100px 0 0 -100px; position: absolute; top: 50%; width: 200px; } .status-mes { background: none; left: 0; margin: 0; text-align: center; top: 65%; } /* =-=-=-=-=-=-= Homepage Two =-=-=-=-=-=-= */ /*promo-section*/ .promo-section { background-color: #b8a580; color: #fff; } .promo-section .section-title { color: #fff; } .promo-block {} .promo-block i{ display: block; margin: 0 auto 18px; width: 74px; height: 74px; font-size: 30px; line-height: 70px; color: #fff; border: 1px solid #fff; border-radius: 100%; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .promo-block:hover i{ color: #b8a580; background-color: #fff; border: 1px solid transparent; } .promo-block h3{ color: #fff; font-size: 18px; line-height: 25px; font-weight: 400; } @media (max-width: 767px) { .promo-block { margin-bottom: 30px; } } /*gallery-section*/ .gallery-section {} #gallerySlider{ margin-top: 55px; position: relative; } #gallerySlider img{ width: 100%; } #gallerySlider .flex-control-thumbs li { width: auto; margin: 0 6px 0 0; } #gallerySlider .flex-control-thumbs li:last-child { margin: 0 0 0 0; } #gallerySlider .flex-control-thumbs img { width: 185px !important; opacity: .5; } #gallerySlider .flex-control-thumbs .flex-active { opacity: 1; } .flex-direction-nav a:before { font-size: 20px; color: #b8a580; text-shadow: none; } @media (max-width : 767px) { .flex-control-thumbs { display: none; } } @media (min-width : 768px) and (max-width : 991px) { #gallerySlider .flex-control-thumbs img { width: 115px !important; } } @media (min-width : 992px) and (max-width : 1199px) { #gallerySlider .flex-control-thumbs img { width: 151px !important; } } /*work-showcase-section*/ .work-showcase-section { background-color: #fafafa; border-top: 1px solid #d2d2d2; border-bottom: 1px solid #d2d2d2; padding: 100px 0 70px; } #work-showcase { margin-top: 45px; } #work-showcase img{ width: 100%; } #work-showcase .carousel-control { top: 50%; margin-top: -26px; width: 52px; height: 52px; font-size: 40px; line-height: 50px; color: #000; background-color: #fff; text-shadow: none; background-image: none !important; border-radius: 100%; } #work-showcase .carousel-control:focus, #work-showcase .carousel-control:hover { color: #000; background-color: #b8a580; filter: alpha(opacity=100); opacity: 1; } #work-showcase .carousel-control.left { left: 5%; } #work-showcase .carousel-control.right { right: 5%; } #work-showcase .carousel-indicators li { width: 12px; height: 12px; margin: 0 0 0 5px; background-color: #c7c7c7; border: 1px solid transparent; } #work-showcase .carousel-indicators .active { background-color: #b8a580; } @media screen and (min-width: 768px) { #work-showcase .carousel-indicators { bottom: -50px; } } .work-showcase-section .loadmore-btn { margin-top: 80px; } /* =-=-=-=-=-=-= Homepage Three =-=-=-=-=-=-= */ .work-together-wrapper {} .work-together-thumb img{ width: 100%; } @media (max-width : 991px) { .work-together-thumb img{ margin-bottom: 30px; } } .intro-block { width: 25%; min-height: 300px; float: left; color: #fff; background-color: #ccc; position: relative; overflow: hidden; } .intro-block:nth-child(odd){ background: #b8a580; } .intro-block:nth-child(even){ background: #2a2425; } .intro-content { position: absolute; top: 50%; width: 100%; left: 0; padding: 0 50px; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; -webkit-transform: translate(0%, -50%); -moz-transform: translate(0%, -50%); -ms-transform: translate(0%, -50%); -o-transform: translate(0%, -50%); transform: translate(0%, -50%); } .intro-block:hover .intro-content { -webkit-transform: translate(0%, -65%); -moz-transform: translate(0%, -65%); -ms-transform: translate(0%, -65%); -o-transform: translate(0%, -65%); transform: translate(0%, -65%); } .intro-block h2 { color: #fff; } .intro-block p { line-height: 24px; margin: 0; } .intro-block a.learn-more{ position: absolute; color: #b8a580; background-color: rgba(255, 255, 255, 0.9); width: 100%; left: 0; bottom: -50px; padding: 10px 0; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .intro-block:hover a.learn-more{ bottom: 0; opacity: 1; visibility: visible; } .intro-block a.learn-more:hover{ background: #fff; } .intro-block a.learn-more i { margin-left: 15px; } @media (min-width : 992px) and (max-width : 1199px) { .intro-content { padding: 0 30px; } } @media (max-width : 991px) { .intro-block { width: 50%; border-bottom: 1px solid #f1f1f1; } } @media (max-width: 650px) { .intro-block { width: 100%; border-bottom: 0; } } .client-slider-v4-wrapper h2 { margin-bottom: 40px; } /* =-=-=-=-=-=-= About us Page =-=-=-=-=-=-= */ .about-intro .section-title{ margin-bottom: 35px; text-align: center; } .about-intro p{ margin-bottom: 25px; } .about-intro img{ width: 100%; } .video-intro { position: relative; } .video-intro::before { content: ""; background-color: rgba(0, 0, 0, 0.3); width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .video-intro .external-link{ position: absolute; top: 50%; left: 50%; margin-top: -37px; margin-left: -37px; width: 74px; height: 74px; font-size: 30px; line-height: 64px; text-align: center; color: #fff; border: 5px solid #fff; border-radius: 100%; } .video-intro .external-link i.fa-play { margin-left: 5px; } /*advantage-section*/ .advantage-section { padding: 100px 0; background-color: #fafafa; border-top: 1px solid #d2d2d2; } @media (max-width: 991px) { .advantage-section { padding: 100px 0; } } .advantage-section .features .media-body p { color: #666; } .advantage-img-wrapper img { float: right; } @media (min-width : 992px) { .advantage-section.advantage-home { background: url(../../assets/images/feature-bg.png) no-repeat scroll 100% 80px; padding: 100px 0; border-top: 0; } } /*history-section*/ .history-section {} .history-cover, .history-wrapper { min-height: 550px; } @media (max-width: 991px) { .history-cover, .history-wrapper { min-height: 380px; } } .history-cover { background: url(../../assets/images/history-bg.jpg) left center no-repeat #5E5E5E; background-size: cover; } .history-wrapper { background-color: #9c865e; color: #ffffff; padding: 70px 40% 70px 70px; } @media (max-width : 1199px){ .history-wrapper { padding: 50px; } } @media (min-width : 1200px){ .history-wrapper { padding: 70px 16% 70px 70px; } } @media (min-width : 1920px) { .history-wrapper { padding: 70px 40% 70px 70px; } } .history-wrapper h2 { font-size: 30px; color: #fff; margin-bottom: 30px; } #historyCarousel h3{ color: #fff; font-size: 18px; line-height: 30px; font-weight: 700; font-family: 'Open Sans', sans-serif; } #historyCarousel p{ font-size: 14px; line-height: 30px; font-weight: 300; margin-bottom: 30px; } #historyCarousel .carousel-control { top: 6px; width: 20px; height: 20px; font-size: 15px; line-height: 16px; border: 1px solid #fff; text-align: center; text-shadow: none; filter: alpha(opacity=100); opacity: 1; } #historyCarousel .carousel-control.left { right: 25px; left: auto; } #historyCarousel .carousel-control.left, #historyCarousel .carousel-control.right { background-image: none; } #historyCarousel .carousel-control:focus, #historyCarousel .carousel-control:hover { color: #2c3e50; background-color: #fff; } /*client section*/ .client section {} .client { border-right: 1px solid #ededed; border-bottom: 1px solid #ededed; } .client:nth-child(4), .client:nth-child(8), .client:nth-child(12) { border-right: 0; } .client:nth-child(9), .client:nth-child(10), .client:nth-child(11), .client:nth-child(12) { border-bottom: 0; } @media only screen and (max-width : 767px) { .client:nth-child(9), .client:nth-child(10) { border-bottom: 1px solid #ededed; } } .client { padding: 38px; } @media (max-width : 991px) { .client { padding: 30px 0; } } /* =-=-=-=-=-=-= About us page two =-=-=-=-=-=-= */ /*awards-section*/ .awards-section { background: url(../../assets/images/awards-bg.png) repeat #2C3E50; color: #fff; } .awards-section .section-title{ color: #fff; } .awards-img-wrapper img { width: 100%; margin-bottom: 30px; } /* =-=-=-=-=-=-= Blog Page =-=-=-=-=-=-= */ .post-wrapper { margin-bottom: 50px; border: 1px solid #eee; } .featured-wrapper img { width: 100%; } .blog-content { padding: 20px; } .entry-header { margin-bottom: 15px; } .entry-header .entry-meta { text-transform: capitalize; } .entry-header .entry-meta li{ float: left; margin-right: 20px; } .entry-header .entry-meta li:last-child{ margin-right: 0; } .entry-header .entry-meta li a{ display: block; color: #a7a7a7; font-size: 13px; line-height: 24px; } .entry-header .entry-meta li a:hover{ color: #b8a580; } .entry-header h2 { font-size: 25px; line-height: 25px; font-weight: 700; text-transform: capitalize; margin-bottom: 7px; } .entry-header h2 a{ color: #b8a580; } .entry-header h2 a:hover{ color: #98bf00; } .entry-footer { font-size: 12px; padding: 13px; border-top: 1px solid #eee; } .entry-footer .entry-meta li { display: inline-block; margin-right: 7px; } .entry-footer a { display: block; padding: 0px 15px; font-size: 10px; line-height: 28px; color: #a7a7a7; background: #fff; text-transform: uppercase; border: 1px solid #eee; border-radius: 30px; } .entry-footer a:hover { color: #fff; background: #b8a580; border: 1px solid transparent; } @media (max-width: 479px) { .entry-footer a { padding: 0px 8px; font-size: 8px; line-height: 24px; } } /*Gallery Post*/ .gallery-slider .carousel-control { top: 50%; margin-top: -18px; width: 34px; height: 34px; line-height: 34px; color: rgba(0, 0, 0, 0.7); background-color: rgba(255, 255, 255, 0.5); text-shadow: none; filter: alpha(opacity=100); opacity: 1; border-radius: 100%; z-index: 300; background-image: none; } .gallery-slider .carousel-control:focus, .gallery-slider .carousel-control:hover { color: #fff; background-color: #b8a580; } .gallery-slider .carousel-control.left { left: 12px; } .gallery-slider .carousel-control.right { right: 12px; } /*Video Post*/ .post-wrapper.format-video iframe{ width: 100%; min-height: 344px; } /*Audio Post*/ .post-wrapper.format-audio .featured-wrapper::before { top: auto; bottom: 0; height: 50px; } .post-wrapper.format-audio iframe { width: 100%; height: 203px; } @media (min-width : 992px) and (max-width : 1199px) { .post-wrapper.format-audio iframe { height: 165px; } } /* Quote Post /* ------------------------------ */ .post-wrapper.format-quote { border: 0; } .format-quote .blog-content { padding: 0; } .post-wrapper blockquote { padding: 20px 20px 20px 60px; font-size: 16px; color: #969595; border-left: 0; border: 1px solid #eee; position: relative; margin: 0; } .post-wrapper blockquote::before { position: absolute; content: "\f10d"; font-family: FontAwesome; font-size: 30px; color: #eee; left: 15px; top: 25px; } .blog-grid .post-wrapper blockquote { border: 0; } /*Link Post*/ .post-wrapper.format-link .entry-header { margin-bottom: 35px; } .post-wrapper .link-post { text-align: center; } .post-wrapper .link-post a { display: block; color: #b8a580; font-size: 22px; font-weight: 600; padding: 35px 20px; background-color: #f1f1f1; } .post-wrapper .link-post:hover a{ color: #fff; background-color: #b8a580; } @media (max-width: 479px) { .post-wrapper .link-post a { font-size: 16px; font-weight: 600; padding: 20px 20px; } } /* PAGINATION ----------------------------------------------- */ .blog-pagination {} @media (max-width: 767px) { .blog-pagination { margin-bottom: 40px; } } .pagination { margin: 0; } .pagination>li>a, .pagination>li>span { font-size: 13px; margin-left: 10px; color: #a7a7a7; border: 1px solid #eee; padding: 8px 12px; } .pagination>li:first-child>a, .pagination>li:first-child>span { border-top-left-radius: 0; border-bottom-left-radius: 0; } .pagination>li:last-child>a, .pagination>li:last-child>span { border-top-right-radius: 0; border-bottom-right-radius: 0; } .pagination>li>a:hover, .pagination>li>span:hover, .pagination>li>a:focus, .pagination>li>span:focus { color: #fff; background-color: #b8a580; border-color: transparent; } .pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus { background-color: #b8a580; border-color: #b8a580; } .pagination>.disabled>a, .pagination>.disabled>a:focus, .pagination>.disabled>a:hover, .pagination>.disabled>span, .pagination>.disabled>span:focus, .pagination>.disabled>span:hover { border-color: #eee; } .page-count { font-size: 13px; border: 1px solid #eee; color: #a7a7a7; padding: 2px 12px; } @media (max-width: 479px) { .pagination>li>a, .pagination>li>span { margin-bottom: 10px; } } /* pager ------------------------------------*/ .pager {} .pager li{ float: left; width: 48%; margin-right: 2%; } .pager li:last-child{ margin-right: 0; } .pager li>a, .pager li>span { display: block; background-color: #dadada; color: #fff; border: 1px solid #dadada; border-radius: 0; } .pager li>a:focus, .pager li>a:hover { background-color: #b8a580; border: 1px solid transparent; } .pager li>a i { padding: 0; opacity: 0; visibility: hidden; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .pager li>a:hover i { opacity: 1; visibility: visible; } .pager li:first-child>a:hover i { padding-right: 10px; } .pager li:last-child>a:hover i { padding-left: 10px; } @media (max-width: 350px) { .pager li>a, .pager li>span { padding: 5px 0; } } /*sidebar-wrapper*/ .sidebar-wrapper {} @media (max-width: 991px) { .sidebar-wrapper { margin-top: 50px; } } .sidebar-wrapper .widget{ margin-bottom: 45px; } .sidebar-wrapper .widget h2{ font-size: 20px; font-weight: 700; color: #b8a580; } /*widget_search*/ .sidebar-wrapper .widget_search{ position: relative; } .sidebar-wrapper .widget_search .form-control{ font-size: 14px; font-weight: 300; color: #666666; } .sidebar-wrapper .widget_search button{ position: absolute; top: 0; right: 0; width: 40px; height: 60px; background-color: transparent; border: 0; } /*widget_recent_entries*/ .widget_recent_entries ul li { margin-top: 30px; } .widget_recent_entries h2{ margin-bottom: 25px; } .widget-post-media{ display: table-cell; padding: 0px 15px 0px 0px; } .widget-post-media img{ width: 70px; height: 60px; } .widget-post-info { display: table-cell; vertical-align: top; } .widget-post-info h3 { font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 22px; margin: 0; } .widget-post-info h3 a{ color: #202020; } .widget-post-info h3 a:hover{ color: #b8a580; } .widget-post-info .post-meta{ color: #a7a7a7; font-size: 13px; line-height: 22px } /*widget_categories*/ .widget_categories h2 { margin-bottom: 25px; } .widget_categories ul li a{ font-size: 14px; display: block; color: #666; line-height: 27px; padding: 6px 0; } .widget_categories ul li a:hover{ color: #b8a580; } .widget_categories ul li a i{ font-size: 18px; margin-right: 10px; } .widget_categories ul li a .badge { float: right; background-color: transparent; color: #d1d1d1; border: 1px solid #eee; padding: 6px 15px; border-radius: 50px; font-weight: 400; -webkit-transition: all 0.4s ease-in-out 0s; -moz-transition: all 0.4s ease-in-out 0s; -ms-transition: all 0.4s ease-in-out 0s; -o-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .widget_categories ul li a:hover .badge { background-color: #b8a580; color: #fff; border: 1px solid transparent; } /*widget_tag_cloud*/ .widget_tag_cloud h2 { margin-bottom: 25px; } .widget_tag_cloud ul li { float: left; margin-right: 7px; margin-bottom: 7px; } .widget_tag_cloud ul li a{ display: block; font-size: 13px; line-height: 28px; padding: 0px 11px; color: #666; border: 1px solid #eee; border-radius: 50px; } .widget_tag_cloud ul li a:hover{ background-color: #b8a580; color: #fff; border: 1px solid transparent; } /* =-=-=-=-=-=-= Blog Page Version Two =-=-=-=-=-=-= */ .blog-grid .post-wrapper{ margin-bottom: 30px; border: 0; box-shadow: 0 0 1px rgba(0, 0, 0, 0.2); -webkit-transition: box-shadow 300ms; -moz-transition: box-shadow 300ms; -o-transition: box-shadow 300ms; -ms-transition: box-shadow 300ms; transition: box-shadow 300ms; } .blog-grid .post-wrapper:hover{ box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); } .blog-grid .featured-wrapper { position: relative; min-height: 70px; } .blog-grid .featured-wrapper::before { position: absolute; left: 0; bottom: 0; content: ""; background: -webkit-linear-gradient(top, rgba(255,0,0,0), rgba(69, 67, 80, 0.52)); background: -o-linear-gradient(bottom, rgba(255,0,0,0), rgba(69, 67, 80, 0.52)); background: -moz-linear-gradient(bottom, rgba(255,0,0,0), rgba(69, 67, 80, 0.52)); background: linear-gradient(to bottom, rgba(255,0,0,0), rgba(69, 67, 80, 0.52)); background: linear-gradient(to bottom, rgba(255,0,0,0), rgba(69, 67, 80, 0.52)); width: 100%; height: 70px; z-index: 100; } .blog-grid .featured-wrapper .entry-meta { position: absolute; left: 3px; bottom: 3px; width: 100%; z-index: 200; } .blog-grid .featured-wrapper .entry-meta li{ float: left; padding-left: 10px; padding-right: 10px; } .blog-grid .featured-wrapper .entry-meta li a{ display: block; color: #fff; } .blog-grid .featured-wrapper .entry-meta li a:hover{ color: #b8a580; } @media (max-width: 479px) { .blog-grid .featured-wrapper .entry-meta li { padding-left: 5px; padding-right: 5px; line-height: 20px; } .blog-grid .featured-wrapper .entry-meta li a { font-size: 12px; } } /*Video Post*/ .blog-grid .featured-wrapper .external-link { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin-left: -25px; margin-top: -25px; border: 0; border-radius: 50%; color: rgba(0, 0, 0, 0.7); background-color: rgba(255, 255, 255, 0.5); font-size: 20px; line-height: 50px; text-align: center; z-index: 300; -webkit-transition : all 0.3s ease 0s; -moz-transition : all 0.3s ease 0s; -o-transition : all 0.3s ease 0s; transition : all 0.3s ease 0s; } .blog-grid .featured-wrapper .external-link:hover { color: #fff; background-color: #b8a580; } .blog-grid .featured-wrapper .external-link i.fa-play { margin-left: 5px; } .blog-grid.v2 .post-wrapper { margin-bottom: 55px; } .blog-grid a.author img { width: 60px; height: 70px; position: absolute; top: -30px; left: 50%; margin-left: -30px; background-color: #fff; padding: 4px; border-radius: 30px; z-index: 100; } .blog-grid .entry-content .readmore { margin: 30px 0 40px; } .blog-grid .entry-content .readmore a{ padding: 11px 24px; border-radius: 30px; border: 2px solid #b8a580; } .blog-grid .entry-content .readmore a:hover{ color: #fff; background-color: #b8a580; border: 2px solid transparent; } .blog-grid .entry-footer { padding: 0; border-top: 0; } .blog-grid .entry-footer .entry-meta li { margin-right: 20px; } .blog-grid .entry-footer .entry-meta li:last-child { margin-right: 0; } .blog-grid .entry-footer .entry-meta li a { padding: 0; font-size: 16px; color: #b1b1b1; background: transparent; border: 0; } .blog-grid .entry-footer .entry-meta li a:hover i.fa-facebook { color: #3b5998; } .blog-grid .entry-footer .entry-meta li a:hover i.fa-twitter { color: #55acee; } .blog-grid .entry-footer .entry-meta li a:hover i.fa-tumblr { color: #35465c; } .blog-grid .entry-footer .entry-meta li a:hover i.fa-linkedin { color: #0077b5; } .blog-grid .entry-footer .entry-meta li a:hover i.fa-dribbble { color: #ea4c89; } .blog-grid .entry-footer .entry-meta li a:hover i.fa-behance { color: #1769ff; } /*Single Article*/ .single-post .post-wrapper { border: 0; margin-bottom: 0; } .single-post .blog-content { padding: 20px 0; } /*author-box*/ .author-box { border: 1px solid #eee; } .author-box .media { padding: 30px 20px; } .author-box-image { padding-right: 20px; } .author-box-info h3{ font-family: 'Open Sans', sans-serif; } .author-box-info h3 small { color: #b8a580; padding-left: 10px; } .author-social-info { border-top: 1px solid #eee; padding: 15px 20px; } .authors-post { float: left; } .authors-post a, .authors-post i{ color: #a7a7a7; } .authors-post a:hover{ color: #b8a580; } .authors-post i { margin-right: 10px; } .author-social { float: right; } .author-social ul li a { color: #a7a7a7; } .author-social ul li a:hover { color: #b8a580; } @media (max-width: 350px) { .author-box .author-box-image { display: block; padding-right: 0; } .author-box .author-box-image img { margin: 0 auto 20px; } } /*comments-wrapper*/ .comments-wrapper {} .comment-list .media { margin-top: 40px; } .comment-list .media:first-child { margin-top: 0; } .comment-list .media .media-left{ padding-right: 20px; } .comment-list .media .media-left img{ width: 60px; height: 60px; border-radius: 50%; } .comment-list .comment-info, .comment-list .comment-info a{ color: #a7a7a7; font-size: 13px; line-height: 22px; } .comment-list .comment-info i { padding: 0 10px; } .comment-list .comment-author a{ font-size: 14px; color: #202020; font-weight: 600; } .comment-list .comment-author a:hover, .comment-list .comment-info a:hover{ color: #b8a580; } .comment-respond .btn { border-radius: 0; } /* --------------------------------------------------- Full Width Section ------------------------------------------------------ */ /* =-=-=-=-=-=-= Hero Block One =-=-=-=-=-=-= */ .hero-block-v1 { background-color: #fafafa; } @media(min-width:992px) { .hero-block-v1 { background-image: url(../images/25.jpg); -webkit-background-size: cover; background-size: cover; } } .hero-block-v1 h2{ font-size: 30px; color: #202020; text-transform: uppercase; margin-bottom: 30px; } .hero-block-v1 h2 span { color: #b8a580; } .hero-block-v1 .btn { margin-top: 30px; } /* =-=-=-=-=-=-= Hero Block Two =-=-=-=-=-=-= */ .hero-block-v2 { background-color: #fff; } .hero-block-v2 h2{ font-size: 30px; line-height: 45px; font-weight: 700; text-transform: uppercase; margin-bottom: 38px; } .hero-block-v2 h2 span{ display: block; font-size: 45px; color: #b8a580; } .hero-block-v2 p{ font-size: 16px; line-height: 35px; margin-bottom: 35px; } .hero-block-v2 img { width: initial; } /* =-=-=-=-=-=-= Hero Block Three =-=-=-=-=-=-= */ .hero-block-v3 { padding: 100px 0; background-color: #fafafa; border-top: 1px solid #d2d2d2; border-bottom: 1px solid #d2d2d2; } @media (max-width: 991px) { .hero-block-v3 img { margin-bottom: 30px; } } /* =-=-=-=-=-=-= Hero Block Four =-=-=-=-=-=-= */ .hero-block-v4 { padding-top: 30px; } .hero-block-v4 .company-overview { padding-top: 60px; } .hero-block-v4 .company-overview h2{ margin-bottom: 35px; } .hero-block-v4 .company-overview p{ margin-bottom: 20px; } @media (min-width: 992px) { .hero-block-v4 .overview-img-wrapper img { float: right; } } /* =-=-=-=-=-=-= Hero Block Five =-=-=-=-=-=-= */ .hero-block-v5 { background-color: #f4f4f4; padding-top: 100px; } .hero-block-v5 .hero-thumb img{ width: 100%; } .hero-block-v5 .hero-intro h2{ font-size: 25px; line-height: 40px; margin-bottom: 30px; } .hero-block-v5 .hero-intro p{ margin-bottom: 18px; } .hero-block-v5 .hero-intro a.btn{ margin-top: 22px; } @media (min-width : 992px) and (max-width : 1199px) { .hero-block-v5 .hero-intro h2 { line-height: 36px; margin-bottom: 10px; } .hero-block-v5 .hero-intro p { margin-bottom: 10px; } .hero-block-v5 .hero-intro a.btn { margin-top: 10px; } } @media(max-width : 991px) { .hero-block-v5 .hero-intro { margin: 20px 0 50px; } } /* =-=-=-=-=-=-= Hero Block Six =-=-=-=-=-=-= */ .hero-block-v6 { padding: 150px 0 90px; } .hero-block-v6 h2{ margin-bottom: 30px; } .hero-block-v6 .btn{ margin-top: 30px; } @media (max-width: 767px) { .hero-block-v6 .company-overview { margin-bottom: 30px; } } /* =-=-=-=-=-=-= Call to action section =-=-=-=-=-=-= */ /*cta version One*/ .cta-v1 { background-color: #b8a580; color: #fff; padding: 50px 40px; } .cta-v1 h2 { font-family: 'Open Sans', sans-serif; font-size: 25px; line-height: 27px; font-weight: 700; text-transform: uppercase; color: #fff; margin-bottom: 5px; } .cta-v1 p { font-size: 18px; line-height: 27px; font-weight: 400; margin: 0; } .cta-v1 .btn { background-color: transparent; border-color: #fff; font-size: 16px; } .cta-v1 .btn:hover { background-color: #fff; border-color: #fff; color: #b8a580; } .cta-v1 .btn{ float: right; } @media (max-width: 767px) { .cta-v1 .btn{ float: none; margin-top: 15px; } } /*cta version Two*/ .cta-v2-wrapper { padding-bottom: 110px; } .cta-v2 { border: 1px solid #ddd; padding: 35px 38px; } .cta-v2 h2 { font-family: 'Open Sans', sans-serif; font-size: 30px; line-height: 30px; font-weight: 700; text-transform: capitalize; color: #34495e; margin-bottom: 10px; } .cta-v2 p { font-size: 18px; line-height: 27px; font-weight: 400; margin: 0; } .cta-v2 .btn{ margin-top: 9px; float: right; } @media (max-width: 767px) { .cta-v2 .btn { margin-top: 25px; float: none; } } /*cta version Three*/ .cta-v3 { background-color: #b8a580; color: #ffffff; padding: 50px 0; margin-bottom:100px; } .cta-v3.dark { background-color: #f11128; } .cta-v3 h2 { font-family: 'Open Sans', sans-serif; font-size: 25px; line-height: 27px; font-weight: 900; text-transform: uppercase; color: #fff; margin-bottom: 5px; } .cta-v3 p { font-size: 18px; line-height: 27px; font-weight: 400; margin: 0; } .cta-v3 .btn { background-color: transparent; border-color: #fff; font-size: 16px; float: right; } .cta-v3 .btn:hover { background-color: #fff; border-color: #fff; color: #b8a580; } @media (max-width: 767px) { .cta-v3 .btn { margin-top: 20px; float: left; } } /*cta version four*/ .cta-v4 { padding: 55px 0; background-color: #34495e; color: #fff; } .cta-v4 h2 { font-size: 30px; line-height: 50px; font-weight: 700; color: #fff; margin: 0; } .cta-v4 .btn { font-size: 14px; font-weight: 700; color: #34495e; border-color: #fff; background-color: #fff; } .cta-v4 .btn:hover { color: #fff; border-color: #b8a580; background-color: #b8a580; } @media (max-width: 767px) { .cta-v4 .btn { margin-top: 20px; float: left; } } /* ====================================================== Client Testimonial Style ========================================================= */ /*Client Slider Version One*/ .client-slider-v1-wrapper { background-color: #fafafa; border-top: 1px solid #d2d2d2; border-bottom: 1px solid #d2d2d2; } #client-slider-v1 { padding: 0 10px 30px 10px; } #client-slider-v1 .carousel-control { background: none; top:auto; bottom: 40px; z-index: 100; text-shadow: none; } #client-slider-v1 .carousel-control i{ color: rgba(0, 0, 0, 0.7); font-size: 12px; border: 1px solid rgba(0, 0, 0, 0.7); border-radius: 50%; width: 25px; height: 25px; line-height: 25px; text-align: center; } #client-slider-v1 .carousel-control:hover i, #client-slider-v1 .carousel-control:focus i { color: #b8a580; border-color: #b8a580; } #client-slider-v1 .carousel-control.left { left: 30%; } #client-slider-v1 .carousel-control.right { right: 30%; } #client-slider-v1 .carousel-indicators { right: 50%; top: auto; bottom: 0; margin-right: -19px; } #client-slider-v1 .carousel-indicators li { width: 50px; height: 50px; margin: 5px; cursor: pointer; opacity: 0.4; overflow: hidden; background-color: transparent; border: 0; border-radius: 0; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } #client-slider-v1 .carousel-indicators .active { background: #333333; width: 85px; height: 85px; opacity: 1; overflow: hidden; } #client-slider-v1 .carousel-inner { min-height: 300px; } #client-slider-v1 .item blockquote { border-left: none; margin: 0; padding: 0; border: 0; } #client-slider-v1 .item blockquote::before { display: none; } #client-slider-v1 .testimonial-content { background-color: rgba(0, 0, 0, 0.7); color: #fff; padding: 30px; font-size: 16px; font-weight: 300; border-radius: 6px; } #client-slider-v1 .testimonial-content .author{ font-weight: 700; } #client-slider-v1 .testimonial-content .author a:hover{ color:#ffffff; } @media (max-width: 991px) and (min-width: 768px) { #client-slider-v1 .carousel-control { bottom: 0; } #client-slider-v1 .carousel-indicators { bottom: -45px; } } @media (max-width: 766px) { #client-slider-v1 .carousel-control { bottom: 0; } #client-slider-v1 .carousel-control.left { left: 0; } #client-slider-v1 .carousel-control.right { right: 0; } #client-slider-v1 .carousel-indicators { bottom: -45px; left: 40%; width: 90%; margin-left: -35%; } } /*Client Slider Version Two*/ .client-slider-v2-wrapper { background: url(../images/1.png) center center no-repeat #5E5E5E; background-size: cover; } #client-slider-v2 .carousel-inner { min-height: 220px; } @media (max-width: 700px) { #client-slider-v2 .carousel-inner { min-height: 300px; } } @media (max-width: 479px) { #client-slider-v2 .carousel-inner { min-height: 400px; } } #client-slider-v2 blockquote { border-left: none; margin: 0; padding: 0; border: 0; } #client-slider-v2 blockquote::before { display: none; } #client-slider-v2 .testimonial-content { color: #000; background-color: rgba(255, 255, 255, 0.9); padding: 30px; font-size: 16px; line-height: 27px; font-weight: 300; border-radius: 6px; text-align: center; position: relative; } #client-slider-v2 .testimonial-content::before{ content: ""; border-top: 15px solid rgba(255, 255, 255, 0.9); border-left: 10px solid transparent; border-right: 10px solid transparent; position: absolute; left: 50%; bottom: -15px; margin-left: -10px } #client-slider-v2 .testimonial-content .author{ color: #fff; font-weight: 700; position: absolute; bottom: -50px; left: 0; right: 0; } #client-slider-v2 .testimonial-content .author span{ color:#b8a580; } #client-slider-v2 .carousel-control { background: none; top: auto; bottom: 12px; z-index: 100; width: 20px; height: 20px; font-size: 14px; line-height: 17px; text-shadow: none; filter: alpha(opacity=100); opacity: 1; border: 1px solid #fff; border-radius: 100%; } #client-slider-v2 .carousel-control:focus, #client-slider-v2 .carousel-control:hover { color: #b8a580; border: 1px solid #b8a580; } #client-slider-v2 .carousel-control.left { left: 38%; } #client-slider-v2 .carousel-control.right { right: 38%; } @media (max-width : 991px){ #client-slider-v2 .carousel-control.left { left: 30%; } #client-slider-v2 .carousel-control.right { right: 30%; } } /*Client Slider Version Three*/ .client-slider-v3 { margin-top: 45px; position: relative; } .client-slider-v3 blockquote { padding: 0; margin: 0; font-size: 15px; line-height: 25px; color: #585858; border-left: 0; border: 0; } .client-slider-v3 blockquote::before { display: none; } .client-slider-v3 blockquote p { font-style: italic; margin-bottom: 20px; } .client-slider-v3 blockquote .small:before, .client-slider-v3 blockquote footer:before, .client-slider-v3 blockquote small:before { content: ''; } .client-slider-v3 blockquote footer { display: table; } .client-slider-v3 blockquote footer .client-info{ display: table-cell; vertical-align: middle; } .client-slider-v3 blockquote footer img{ width: 72px; height: 72px; border-radius: 100%; float: left; margin-right: 20px; } .client-slider-v3 blockquote footer .client-name{ display: block; font-size: 18px; line-height: 25px; font-weight: 500; color: #323232; } .client-slider-v3 .flex-viewport { width: 50%; float: left; } .client-slider-v3 .flex-control-nav { width: 50%; float: right; text-align: right; } .client-slider-v3 .flex-control-thumbs li { width: auto; float: none; margin-left: 8px; } @media (max-width: 1199px) { .client-slider-v3 .flex-control-thumbs img { width: 110px; } } @media (max-width: 767px) { .client-slider-v3 .flex-viewport, .client-slider-v3 .flex-control-nav { width: 100%; float: none; } .client-slider-v3 .flex-viewport { margin-bottom: 30px; } .client-slider-v3 .flex-control-nav { text-align: left; } } /*Client Slider Version Four*/ .client-slider-v4 { position: relative; } .client-slider-v4 blockquote { padding: 0; margin: 0 0 35px; font-size: 18px; line-height: 30px; border-left: 0; color: #666666; font-family: 'Roboto Slab', serif; font-weight: 300; border: 0; } .client-slider-v4 blockquote::before { display: none; } .client-slider-v4 blockquote p { margin-bottom: 14px; } .client-slider-v4 blockquote .small:before, .client-slider-v4 blockquote footer:before, .client-slider-v4 blockquote small:before { content: ''; } .client-slider-v4 .client-info { font-family: 'Open Sans', sans-serif; } .client-slider-v4 .client-info .client-name{ display: block; font-size: 16px; line-height: 27px; font-weight: 700; color: #2e2e2e; } .client-slider-v4 .client-info .client-name span{ color: #ff2a2a; } .client-slider-v4 .client-info .client-title{ font-size: 12px; color: #666666; } .client-slider-v4 .flex-control-thumbs li { width: auto; margin: 7px; } .client-slider-v4 .flex-control-thumbs img { width: 176px; border: 1px solid #eee; } @media (max-width: 1199px) { .client-slider-v4 .flex-control-thumbs img { width: 105px; } } .flex-control-thumbs img { opacity: .5; } .flex-control-thumbs img:hover, .flex-control-thumbs .flex-active { opacity: 1; } /*case study page css*/ .basecamp-intro {} .basecamp-intro h2{ font-size: 25px; line-height: 25px; font-weight: 700; } .tt-content-box { position: relative; overflow: hidden; text-align: center; min-height: 268px; border: 1px solid #dedede; margin-bottom: 30px; } .content-wrapper { color: #fff; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .content-wrapper::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #b8a580; content: ''; opacity: 0; -webkit-transform: translate3d(0,50%,0); -moz-transform: translate3d(0,50%,0); -ms-transform: translate3d(0,50%,0); transform: translate3d(0,50%,0); } .content-wrapper header { position: absolute; top: 50%; left: 0; width: 100%; color: #b8a580; -webkit-transition: -webkit-transform 0.35s, color 0.35s; -ms-transition: -webkit-transform 0.35s, color 0.35s; transition: transform 0.35s, color 0.35s; -webkit-transform: translate3d(0,-50%,0); -ms-transform: translate3d(0,-50%,0); transform: translate3d(0,-50%,0); } .tt-content-box:hover .content-wrapper header { -webkit-transform: translate3d(0,-50%,0) translate3d(0,-60px,0); -ms-transform: translate3d(0,-50%,0) translate2d(0,-60px,0); transform: translate3d(0,-50%,0) translate3d(0,-60px,0); } .content-wrapper header i { font-size: 40px; color: #b8a580; } .content-wrapper header h2 { font-size: 20px; line-height: 25px; font-weight: 700; color: #b8a580; } .tt-content-box:hover .content-wrapper header i, .tt-content-box:hover .content-wrapper header h2{ color: #fff; } /*IE9 Fixing*/ .ie9 .tt-content-box .content-wrapper header { top: 30%; } .tt-content-box .content-wrapper .content{ position: absolute; bottom: 0; left: 0; padding: 20px; width: 100%; opacity: 0; -webkit-transform: translate3d(0,10px,0); -ms-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0); } .tt-content-box .content-wrapper::before, .tt-content-box .content-wrapper .content { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; -ms-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; } .tt-content-box:hover .content-wrapper::before , .tt-content-box:hover .content { opacity: 1; -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .tt-content-box .content-wrapper .content p { margin-bottom: 20px; } .basecamp-solution { padding: 100px 0 0; background-color: #fafafa; border-top: 1px solid #d2d2d2; } .solution-intro-wrapper { display: table; } .basecamp-solution-thumb { display: table-cell; vertical-align: bottom; } @media (max-width: 991px) { .basecamp-solution-intro { margin-bottom: 50px; } } @media (min-width: 1200px) { .basecamp-solution-intro { padding-left: 12%; } } @media (min-width: 1920px) { .basecamp-solution-intro { padding-left: 35%; } } .basecamp-solution-thumb { padding-right: 0; } .basecamp-solution-thumb img { width: 100%; } .basecamp-testimonial { padding: 100px 0; background-color: #b8a580; } .basecamp-testimonial blockquote { padding: 0; margin: 0; text-align: center; border-left: 0; color: #fff; font-size: 25px; line-height: 35px; font-weight: 300; border: 0; } .basecamp-testimonial blockquote::before { display: none; } .basecamp-testimonial blockquote footer { font-size: 18px; line-height: 21px; font-weight: 700; font-family: 'Roboto Slab', serif; color: #fff; margin-top: 35px; } .basecamp-testimonial blockquote footer cite { display: block; font-size: 16px; font-weight: 300; font-family: 'Open Sans', sans-serif; font-style: normal; } .basecamp-testimonial blockquote footer:before { content: ""; } .image-holder img{ margin: 0 auto; } .case-study-page.gradient-bottom::after{ position: absolute; left: 0; bottom: 0; content: ""; background: -webkit-linear-gradient(top, rgba(255,0,0,0), rgba(0, 0, 0, 0.5)); background: -o-linear-gradient(bottom, rgba(255,0,0,0), rgba(0, 0, 0, 0.5)); background: -moz-linear-gradient(bottom, rgba(255,0,0,0), rgba(0, 0, 0, 0.5)); background: linear-gradient(to bottom, rgba(255,0,0,0), rgba(0, 0, 0, 0.5)); background: linear-gradient(to bottom, rgba(255,0,0,0), rgba(0, 0, 0, 0.5)); width: 100%; height: 70px; z-index: 100; } /*Common class in multi Homepages*/ .hero-section { width: 100%; height: 100%; position: relative; } .hero-section::before { content: ''; background: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; position: absolute; top: 0; left: 0; } /* ----------------------------------------------------------- Parallax Homepage -------------------------------------------------------------- */ .parallax-home { background: transparent url(../../assets/images/parallax/parallax-1.jpg) 0 0 no-repeat; background-size: cover; } .service-bg { background: transparent url(../../assets/images/parallax/parallax-2.jpg) 0 0 no-repeat; background-size: cover; padding: 100px 0; } .device-bg { background: transparent url(../../assets/images/parallax/parallax-3.jpg) 0 0 no-repeat; background-size: cover; padding: 100px 0; } .hero-block-v3.focus-bg { border-top: 0; border-bottom: 0; } .focus-bg { background: #fff; padding: 100px 0; } .overview-bg { background: transparent url(../../assets/images/parallax/parallax-4.jpg) 0 0 no-repeat; background-size: cover; padding: 100px 0; } .overview-bg .company-overview { color: #fff; } /* ----------------------------------------------------------- Blog Homepage -------------------------------------------------------------- */ .blog-homepage-bg { background: transparent url(../../assets/images/slider/blog-slider.jpg) 0 0 no-repeat; background-size: cover; min-height: 500px; } /* ----------------------------------------------------------- Portfolio Homepage -------------------------------------------------------------- */ .portfolio-home-bg { background: transparent url(../../assets/images/slider/protfolio-slider.jpg) 0 0 no-repeat; background-size: cover; } /* ----------------------------------------------------------- Portfolio Homepage Two -------------------------------------------------------------- */ .portfolio-home-two { background: transparent url(../../assets/images/slider/portfolio-slider-2.jpg) 0 0 no-repeat; background-size: cover; } /* ----------------------------------------------------------- Text-rotator Homepage -------------------------------------------------------------- */ .text-rotator-bg { background: transparent url(../../assets/images/slider/protfolio-slider-2.jpg) 0 0 no-repeat; background-size: cover; } /* ----------------------------------------------------------- Static Homepage -------------------------------------------------------------- */ .static-bg { background: transparent url(../../assets/images/slider/slide-8.jpg) 0 0 no-repeat; background-size: cover; } /*Particle Homepage*/ .particle-bg { background: transparent url(../../assets/images/slider/particle.jpg) 0 0 no-repeat; background-size: cover; } #particles-js { position: absolute; width: 100%; height: 100%; z-index: 10; } /*Alert Shortcode Page*/ .shortcode-alert-wrapper h2 { margin-bottom: 25px; } /*Contact Page*/ .contact-info address { margin-bottom: 30px; line-height: 24px; } .contact-info h3{ text-transform: capitalize; } @media (max-width: 991px) { .contact-info { margin-top: 50px } } /*404 Page*/ .error-wrapper { padding: 200px 0; } .error-wrapper i { font-size: 145px; line-height: 170px; text-align: center; display: block; color: #a7a7a7; } .error-info { padding-left: 60px; border-left: 1px solid #eee; } .error-info h1{ color: #b8a580; font-size: 90px; line-height: 90px; font-weight: 700; } .error-sub { display: block; font-size: 30px; font-weight: 700; text-transform: uppercase; } .error-info .btn { padding: 10px 30px; } @media (max-width: 767px) { .error-info { padding-left: 0; border-left: 0; text-align: center; } } /*404 alter*/ .error-wrapper-alt { background: url(../../assets/images/not-found-cover.jpg) 0 0 no-repeat; background-size: cover; position: relative; } .error-wrapper-alt::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); } .error-info-alt { position: absolute; top: 50%; width: 100%; left: 0; text-align: center; text-transform: uppercase; z-index: 15; -webkit-transform: translate(0%, -50%); -moz-transform: translate(0%, -50%); -ms-transform: translate(0%, -50%); -o-transform: translate(0%, -50%); transform: translate(0%, -50%); } .error-info-alt h1 { color: #b8a580; font-size: 150px; font-weight: 700; line-height: 150px; } .error-info-alt .error-sub { margin-bottom: 10px; } .error-info-alt .error-sub, .error-info-alt p { color: #fff; } .error-info-alt .btn { background: #fff; color: #b8a580; border-color: #fff; } .error-info-alt .btn:hover { background: #b8a580; color: #fff; border-color: #b8a580; } /* ----------------------------------------------- Typography Page --------------------------------------------------*/ /*This css uses only typography page for showing all element in one page. If you wish you can remove this css.*/ .typography-btn-wrapp {} .typography-btn-wrapp .btn{ margin-bottom: 4px; } /*Revolution slider customization homepage creative*/ .tt-container { width:100%; position:relative; padding:0; } .tt-banner{ width:100%; position:relative; } .tt-slider-title { font-family: 'Open Sans', sans-serif; font-size: 76px; line-height: 90px; font-weight: 900; color: #fff; text-transform: uppercase; } .tt-slider-title span { font-weight: 300; } .tt-slider-title.dark { color: #202020; } .tt-slider-subtitle { font-family: 'Open Sans', sans-serif; font-size: 25px; line-height: 40px; font-weight: 600; color: #fff; text-transform: uppercase; } .tt-slider-subtitle.dark { color: #202020; } .tt-btn { font-size: 16px; text-transform: uppercase; padding: 10px 35px; border-radius: 30px; display: block; } /*light btn*/ .btn-solid.light { color: #b8a580; background-color: #fff; } .btn-solid.light:hover { color: #b8a580; } .btn-bordered.light { color: #fff; border: 1px solid #fff; } .btn-bordered.light:hover { color: #b8a580; background-color: #fff; border: 1px solid transparent; } /*dark btn*/ .btn-solid.dark { color: #fff; background-color: #202020; } .btn-solid.dark:hover { color: #fff; } .btn-bordered.dark { color: #202020; border: 1px solid #202020; } .btn-bordered.dark:hover { color: #fff; background-color: #202020; border: 1px solid transparent; } /*Revolution slider customization homepage gallery*/ .tt-container-gallery { width:100%; position:relative; padding:0; } .tt-banner-gallery{ width:100%; position:relative; } .tt-banner-gallery .tt-slider-title { color: #b8a580; font-size: 75px; line-height: 80px; font-weight: 900; text-transform: uppercase; letter-spacing: -3px; } .tt-banner-gallery .tt-slider-title span{ color: #fff; margin-left: 20px; font-weight: 700; } .tt-banner-gallery .tt-slider-subtitle{ font-size: 50px; font-weight: 700; letter-spacing: -2px; text-transform: uppercase; margin-bottom: 30px; } .tt-banner-gallery .tt-slider-small-text{ color: #fff; font-size: 18px; line-height: 30px; font-weight: 300; } .navbar-brand > img { padding: 5px; width: 50px; } .sticky .navbar-brand img { width: 50px; } .vdo { margin: 100px 0; text-align: center; } .footer-logo img { height: 100px; } .k img { margin-top: 30px; width: 20px; } .dfasd > img { width: 250px; } .sbox-gutter { border: 1px solid #dedede !important; } .bordr-l-0 { border-left:none !important;} .bordr-b-0 {border-bottom:none !important;} .btn-service { border: 1px solid #b8a580; color: #b8a580; display: inline-block; font-size: 13px; margin-top: 10px; padding: 0 34px; text-transform: uppercase; } .service-box:hover .btn-service{ color: #ffffff !important; border-color:#fff; } .use-us > li { border: medium none !important; font-size: 16px; padding: 9px; text-align: left; text-transform: uppercase; } .use-us li:hover::after{ border: medium none !important; color:#000 !important; } .use-us li:hover::before{ border: medium none !important; color:#000 !important; } .use-us i { float: left; margin-right: 15px; } .service .section-title { font-size: 24px ; } .service-txt { display: inline-block; margin-top: 40px; text-align: center; } .profile img { border: 1px solid #7b7b7b; padding: 6px; } .servct th { padding: 1% !important; } .servct h4 { color: #ad9a75 !important; } .table > thead > tr > th { vertical-align: top; } .navbar { min-height: 50px; } .remv-hero-border{border-bottom: 0px !important;} .uttl{margin-top: 30px;} .smsf-p p{text-align:justify;} #topid { padding-top: 10px; }