/******************************************************************** [Master Stylesheet] Project: Simplicity Version: 1.0 Author: weareblank [Table of Contents] 1. General styles 2. Menu 3. Owl Slider 4. About Us 5. Our Features 6. Our Latest Projects 6.1. Overlay 7. Client Testimonials 8. Our Team 9. Contact Us 9.1. Map 10. Footer 11. Preloader 12. Media Queries 12.1. Small Tablet Screens [ < 991px ] 12.2. Mobile Screens [ < 767px ] 12.3. Small Mobile Screens [ < 480px ] *******************************************************************/ /* 1. General Styles ======================================== */ @font-face { font-family: RobotoCondensed-Light; src: url(../font/RobotoCondensed-Light.ttf); } @font-face { font-family: RobotoCondensed; src: url(../font/RobotoCondensed-Regular.ttf); } @font-face { font-family: RobotoCondensed-Bold; src: url(../font/RobotoCondensed-Bold.ttf); } @font-face { font-family: ionicons; src: url(../font/fonts/ionicons.ttf); } html { -webkit-text-size-adjust: none; } html, body { height: 100%; } /*extra for team*/ *, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; } a, a:hover, a:active, a:focus { text-decoration: none; color: inherit; outline: 0; } button, button:hover, button:focus, button:active, .btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus { text-decoration: none; outline: 0; box-shadow: none; } input:active, input:focus, textarea:active, textarea:focus { text-decoration: none; outline: 0; box-shadow: none !important; } .row { margin: 0; } .our-features, .our-latest-projects, .testimonials, .our-team { padding: 0 0 50px 0; } .aboutus, .contact { padding: 0 0 100px 0; } .navbar-default, .navbar-toggle { border: transparent; } .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover { background-color: transparent; } .navbar-default .navbar-toggle .icon-bar { background-color: #fff; } .navbar-default .navbar-toggle:active, .navbar-default .navbar-toggle:focus { background-color: rgba(0, 0, 0, .1); } .section-title { font-family: RobotoCondensed-Bold; font-size: 30px; margin-top: 30px; text-align: center; text-transform: uppercase; } .section-title span { font-family: RobotoCondensed; } .ion-icons { font-size: 40px; color: #2789b7; } /* 2. MENU ======================================== */ header { position: initial; z-index: 100; top: 0; left: 0; display: block; width: 100%; text-align: right; background-color: transparent; } .menu-container { line-height: 7.8em; position: fixed; z-index: 10; width: 100%; transition: all .3s ease; border-radius: 0; background-color: transparent; } .menu-scrolled { line-height: 4.8em; z-index: 100;; transition: all .3s ease; background-color: #2789b7; } .menu-scrolled .section-menu { transition: border .3s ease; border: 0; } .logo { position: relative; left: 0; padding: 0 .7em; } .logo img { max-height: 60px; } .section-menu { transition: border .3s ease; border-bottom: 1px solid #fff; } .menu { line-height: 1; display: inline-block; margin: 0; } .menu-list { position: relative; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; } .menu-item { display: block; margin: 1em 0; } .menu-link { font-size: 1.05em; font-weight: bold; display: block; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .menu-link:hover, .menu-link:focus { outline: none; } .menu-simplicity .menu-link { position: relative; margin: 0 1.2em; padding-right: 0; padding-left: 0; color: white; } .menu-simplicity .menu-item--current .menu-link, .menu-simplicity .menu-item--current .menu-link:hover, .menu-simplicity .menu-item--current .menu-link:focus { color: white; } .menu-simplicity .menu-item--current .menu-link::before { font-family: ionicons; position: absolute; top: 0; left: -10px; content: '\f363'; } .menu-simplicity .menu-link:hover, .menu-simplicity .menu-link:focus { color: white; } /* 3. OWL SLIDER ======================================== */ #owl-carousel { background-color: black; } .bg-img { height: 700px; opacity: .7; background-repeat: no-repeat; background-position: center; background-size: cover; } .bg-img1 { background-image: url('/hassets/img/bg-main.jpg'); } .bg-img2 { background-image: url('/hassets/img/bg-main2.jpg'); } .bg-img3 { background-image: url('/hassets/img/bg-main3.jpg'); } #owl-carousel .owl-dots { position: absolute; top: 95%; left: 50%; margin-left: -33px; } #owl-carousel .owl-dot { display: inline-block; width: 12px; height: 12px; margin: 5px; transition-duration: .2s; border: 1px solid #fff; border-radius: 50%; } #owl-carousel .owl-dot:hover { transition-duration: .2s; border-color: #9e9e9e; background-color: #9e9e9e; } #owl-carousel .owl-dot.active { transition-duration: .2s;; background-color: #fff; } .heading-holder1, .heading-holder2, .heading-holder3 { position: absolute; top: 40%; width: 100%; text-align: center; color: white; padding: 0 20px; } .main-heading1, .main-heading2, .main-heading3 { font-family: RobotoCondensed; font-size: 5em; margin: 0; } .sub-heading1, .sub-heading2, .sub-heading3 { font-family: RobotoCondensed-light; font-size: 2em; margin: 0; } .heading-button { font-family: RobotoCondensed-light; font-size: 18px; width: 110px; height: 50px; margin-top: 30px; border: 3px solid #fff; background-color: transparent; } /* 4. ABOUT US ======================================== */ .post-header-text { font-family: RobotoCondensed; font-size: 18px; padding: 50px 30px 0 30px; text-align: center; color: #555; } .aboutus-holder { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .aboutus-posts { position: relative; margin: 80px 15px 0 15px; padding: 0; transition: box-shadow .2s; text-align: center; border-radius: 6px; box-shadow: 0 0 10px #cacaca; } .post-elements-holder { height: 100%; } .aboutus-posts i { font-size: 41px; position: absolute; z-index: 10; top: -10%; left: 50%; margin-left: -38px; padding: 0 12.35px; color: white; border: 10px solid white; border-radius: 50%; background-color: #2789b7; } .aboutus-posts img { width: 100%; border-top-left-radius: 6px; border-top-right-radius: 6px; } .aboutus-post-text { padding: 10px 30px; } .aboutus-post-text h1 { font-family: RobotoCondensed-Bold; } .aboutus-post-text h2 { font-family: RobotoCondensed; font-size: 18px; margin-bottom: 30px; color: #555; } /* 5. OUR FEATURES ======================================== */ /*Break Line*/ .break { position: relative; text-align: center; } .break-line { position: absolute; top: 50%; width: 45%; height: 1px; background-color: #ccc; } .break-line-left { left: 0; } .break-line-right { right: 0; } .middle-break { height: 1px; margin: 50px 0; background-color: #ccc; } /*Feature Elements*/ .our-features-holder { display: flex; -webkit-align-items: center; align-items: center; margin: 30px 0 0; } .our-features-img img { width: 100%; } .our-features-elements { text-align: justify; } .our-features-elements h1 { font-family: robotocondensed-bold; } .our-features-elements h2 { font-family: robotocondensed; font-size: 18px; color: #555; } .our-features-elements button { margin-top: 10px; padding: 10px 20px; color: #2789b7; border: 2px solid #2789b7; border-radius: 6px; background-color: transparent; } /* 6. Our Latest Projects ======================================== */ .our-latest-projects-holder { position: relative; margin: 50px 0; } .tilter { position: relative; display: block; flex: none; color: #fff; perspective: 1000px; } .tilter * { pointer-events: none; } .tilter:hover, .tilter:focus { color: #fff; outline: none; } .tilter-figure, .tilter-deco, .tilter-caption { will-change: transform; } .tilter-figure, .tilter-image { display: block; width: 100%; height: 100%; margin: 0; border-radius: 6px; } .tilter-figure > * { transform: translateZ(0px); /* Force correct stacking order */ } .smooth .tilter-figure, .smooth .tilter-deco--overlay, .smooth .tilter-deco--lines, .smooth .tilter-deco--shine div, .smooth .tilter-caption { transition: transform .2s ease-out; } .tilter-figure { position: relative; } .tilter-figure::before { position: absolute; top: 5%; left: 5%; width: 90%; height: 90%; content: ''; } .tilter-deco { position: absolute; top: 0; left: 0; overflow: hidden; width: 100%; height: 100%; border-radius: 6px; } .tilter-deco--overlay { background-image: linear-gradient(45deg, rgba(226, 60, 99, .4), rgba(145, 58, 252, .4), rgba(16, 11, 192, .4)); } .tilter-deco--shine div { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background-image: linear-gradient(45deg, rgba(0, 0, 0, .5) 0%, rgba(255, 255, 255, .25) 50%, transparent 100%); } .tilter-deco--lines { fill: none; stroke: #fff; stroke-width: 1.5px; } .tilter-caption { position: absolute; bottom: 0; width: 100%; padding: 2em; } .tilter-title { font-family: RobotoCondensed; font-size: 1.5em; font-weight: normal; line-height: 1; margin: 0; } .tilter-description { font-family: RobotoCondensed; font-size: .85em; margin: 1em 0 0 0; letter-spacing: .15em; } /* 6.1. Overlay ------------------------ */ /* Overlay style */ .overlay { position: fixed; z-index: 100; top: 0; left: 0; overflow-y: auto; width: 101%; height: 100%; background: #f7f7f7; } /* Overlay closing cross */ .overlay .overlay-close { position: absolute; z-index: 100; top: 20px; right: 25px; overflow: hidden; width: 30px; height: 30px; text-indent: 200%; color: transparent; border: none; outline: none; background: url(../hassets/img/projects/cross.png) no-repeat center center; } /* Effects */ .overlay-scale { visibility: hidden; -webkit-transition: -webkit-transform .2s, opacity .2s, visibility 0s .2s; transition: transform .2s, opacity .2s, visibility 0s .2s; -webkit-transform: scale(.9); transform: scale(.9); opacity: 0; } .overlay-scale.open { visibility: visible; -webkit-transition: -webkit-transform .4s, opacity .4s; transition: transform .4s, opacity .4s; -webkit-transform: scale(1); transform: scale(1); opacity: 1; } .portfolio-item-description { margin: 100px auto; } .portfolio-item-description img { width: 100%; } .portfolio-item-content h1, .portfolio-item-content p { font-family: RobotoCondensed; } .portfolio-item-content p { font-size: 18px !important; color: #6d6d6d; } /* 7. Client Testimonials ======================================== */ .client-testimonials { position: relative; } .testimonials-holder { margin: 70px; text-align: center; } .client-comments { font-family: robotocondensed-light; font-size: 18px; margin-bottom: 30px; } .clients { font-family: robotocondensed; font-size: 16px; margin: 50px; } .clients span { font-family: robotocondensed-bold; } .comment-line { position: relative; width: 40%; height: 1px; margin: 0 auto; background-color: #ccc; } .comment-line:before { position: absolute; bottom: -10px; left: 30%; width: 30px; height: 20px; content: ''; transform: rotate(33deg); border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; background-color: white; } .client-testimonials .owl-dots { position: relative; text-align: center; } .client-testimonials .owl-dot { display: inline-block; width: 12px; height: 12px; margin: 5px; transition-duration: .2s; border: 0; border-radius: 50%; background-color: #ccc; } .client-testimonials .owl-dot:hover { transition-duration: .2s; border: 0; background-color: #9e9e9e; } .client-testimonials .owl-dot.active { transition-duration: .2s; background-color: #2789b7; } /* 8. Our Team ======================================== */ .our-team-holder { position: relative; margin: 50px 0; } .grid { position: relative; clear: both; list-style: none; } .grid figure { position: relative; max-width: 360px; max-height: 480px; cursor: pointer; } .grid figure img { position: relative; display: block; opacity: .8; border-radius: 6px; } .grid figure figcaption { font-size: 1.25em; padding: 2em; text-transform: uppercase; color: #fff; border-radius: 6px; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .grid figure figcaption::before, .grid figure figcaption::after { pointer-events: none; } .grid figure figcaption, .grid figure figcaption > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Anchor will cover the whole item by default */ /* For some effects it will show as a button */ .grid figure figcaption > a { font-size: 0; z-index: 1000; white-space: nowrap; text-indent: 200%; opacity: 0; } .grid figure h2 { font-weight: 300; word-spacing: -.15em; } .grid figure h2 span { font-family: robotocondensed-bold; } .grid figure h2, .grid figure p { margin: 0; } .grid figure p { font-size: 68.5%; letter-spacing: 1px; } figure.team-effect { margin: 0 20px; text-align: left; border-radius: 6px; background: #162633; } figure.team-effect img { -webkit-transition: opacity .45s; transition: opacity .45s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } /*edge and ie fix*/ _:-ms-lang(x), figure.team-effect img { transition: none; } figure.team-effect figcaption::before { position: absolute; top: 0; left: 0; width: 178%; height: 100%; content: ''; -webkit-transition: opacity .45s, -webkit-transform .45s; transition: opacity .45s, transform .45s; -webkit-transform: rotate3d(0,0,1,45deg); transform: rotate3d(0,0,1,45deg); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; background: url(../hassets/img/team/triangle.svg) no-repeat center center; background-size: 100% 100%; } figure.team-effect h2 { font-family: robotocondensed-light; font-size: 18px; -webkit-transition: -webkit-transform .35s; transition: transform .35s; -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0); } figure.team-effect h3 { font-family: robotocondensed-bold; font-size: 16px; margin: 0; -webkit-transition: -webkit-transform .35s; transition: transform .35s; -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0); } figure.team-effect p { position: absolute; right: 0; bottom: 0; padding: 0 1.5em 7% 0; } figure.team-effect a { font-size: 200%; margin: 0 .3em; color: #4c5155; } figure.team-effect a:hover, figure.team-effect a:focus { color: #2789b7; } figure.team-effect p a i { -webkit-transition: opacity .35s, -webkit-transform .35s; transition: opacity .35s, transform .35s; -webkit-transform: translate3d(0,50px,0); transform: translate3d(0,50px,0); opacity: 0; } figure.team-effect:hover img { opacity: .6; } figure.team-effect:hover h2, figure.team-effect:hover h3 { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } figure.team-effect:hover figcaption::before { -webkit-transform: rotate3d(0,0,1,14deg); transform: rotate3d(0,0,1,14deg); opacity: .7; } figure.team-effect:hover p i { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } figure.team-effect:hover p a:nth-child(3) i { -webkit-transition-delay: .05s; transition-delay: .05s; } figure.team-effect:hover p a:nth-child(2) i { -webkit-transition-delay: .1s; transition-delay: .1s; } figure.team-effect:hover p a:first-child i { -webkit-transition-delay: .15s; transition-delay: .15s; } /* 9. Contact Us ======================================== */ .section-title-contact-us { margin-bottom: 20px; text-align: left; } .contact-us-wrapper { display: flex; } .contact-us { font-family: robotocondensed; font-size: 16px; letter-spacing: 1.2px; } .contact-us .textfield-col { padding-left: 0; } .form-group:after { line-height: 0; display: block; visibility: hidden; clear: both; height: 0; content: '.'; } .contact-us .form-control:focus { border-color: #2789b7; } .contact-us label { font-weight: normal; color: #555; } .contact-us-btn input[type='submit'] { transition: background-color .2s; border: 0; border-radius: 4px; background-color: #2789b7; } .contact-us-btn input[type='submit']:active, .contact-us-btn input[type='submit']:focus { transition: background-color .2s; background-color: #30a6de; } .mail-response { margin-top: 10px; } .error-msg { color: #ff2a2a; } .success-msg { color: #0fc50f; } /* 9.1. Map ------------------------ */ #map { box-shadow: 0 0 5px rgba(0, 0, 0, .2); } /* 10. Footer ======================================== */ .footer { font-family: robotocondensed-light; color: white; background-color: #2789b7; } .footer-content { padding: 70px 0 50px; text-align: center; } .footer-content h1, .footer-content h2 { font-family: robotocondensed-light; } .footer-content h1 { font-size: 22px; } .footer-content h2 { font-size: 16px; margin-bottom: 20px; } .share ul { margin: 0; padding: 0; list-style-type: none; } .share ul li { display: inline-block; } .share ul li a { font-size: 26px; line-height: 30px; padding-right: 8px; padding-left: 8px; transition: color .25s ease; color: white; } .share ul li a:hover { transition: color .25s ease; color: #4c5155; } .email { padding: 10px; } .copyright { display: flex; justify-content: space-between; width: 100%; padding: 10px 0; border-top: 1px solid #cecece; } .copyright-text { float: left; margin-right: 10px; } .copyright-text a { transition: color .25s ease; } .copyright-text a:hover { transition: color .25s ease; color: #4c5155; } .copyright address { float: right; margin: 8px 0; } /* 11. Preloader ======================================== */ .preloader { position: fixed; z-index: 100; top: 0; left: 0; display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ align-items: center; justify-content: center; width: 100%; height: 100%; background: #2789b7; } .spinner2 { width: 40px; height: 40px; position: relative; text-align: center; -webkit-animation: sk-rotate 2.0s infinite linear; animation: sk-rotate 2.0s infinite linear; } .dot1, .dot2 { width: 60%; height: 60%; display: inline-block; position: absolute; top: 0; background-color: white; border-radius: 100%; -webkit-animation: sk-bounce 2.0s infinite ease-in-out; animation: sk-bounce 2.0s infinite ease-in-out; } .dot2 { top: auto; bottom: 0; -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg) }} @keyframes sk-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }} @-webkit-keyframes sk-bounce { 0%, 100% { -webkit-transform: scale(0.0) } 50% { -webkit-transform: scale(1.0) } } @keyframes sk-bounce { 0%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 50% { transform: scale(1.0); -webkit-transform: scale(1.0); } } /* 12. Media Queries ======================================== */ /* 12.1. Small Tablet Screens [ < 991px ] --------------------------------------- */ @media (max-width: 991px) { /*** Menu ***/ .menu-simplicity .menu-link { margin: 0 .7em; } /*** Owl Slider ***/ .main-heading1, .main-heading2, .main-heading3 { font-size: 3em; } .sub-heading1, .sub-heading2, .sub-heading3 { font-size: 1.5em; } /*** About Us ***/ .post-header-text { font-size: 16px; } .aboutus-posts i { font-size: 30px; top: -15%; margin-left: -29px; padding: 0 8.82px; border: 8px solid white; } .aboutus-post-text { padding: 15px 0; } .aboutus-post-text h1 { margin: 10px; } .aboutus-post-text h2 { font-size: 16px; margin: 10px; } /*** Contact Us ***/ .contact-us .textfield-col-name { margin-bottom: 15px; } } /* 12.2. Mobile Screens [ < 767px ] --------------------------------- */ @media (max-width: 767px) { /*** MENU ***/ .menu-container { line-height: 50px; background-color: #2789b7; } .logo { font-size: 21px; position: absolute; } .navbar-header { border-bottom: 1px solid white; } .navbar-collapse { border: 0; } .menu { line-height: 2; width: 100%; margin: 0; } .menu-item { display: inline-block; width: 100%; margin: 2px; text-align: left; } .menu-simplicity .menu-link { padding-left: .2em; } .menu-item li a::before, .menu-item li a::after { background: transparent; } /*** About Us ***/ .aboutus-holder { -webkit-align-items: center; align-items: center; -webkit-box-orient: vertical; -webkit-flex-direction: column; -moz-box-orient: vertical; -ms-flex-direction: column; flex-direction: column; } .aboutus-posts { min-width: 250px; } /*** Our Features ***/ .our-features-holder { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-flex-direction: column; -moz-box-orient: vertical; -ms-flex-direction: column; flex-direction: column; } .reverse-position { -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .our-features-img { min-width: 250px; } .our-features-elements { text-align: center; } .our-features-elements h2 { text-align: justify; } /*** Our Latest Projects ***/ .content { display: flex; align-items: center; -webkit-box-orient: vertical; -webkit-flex-direction: column; -moz-box-orient: vertical; -ms-flex-direction: column; flex-direction: column; } .tilter { margin: 10px; } .tilter-caption { padding: 3em; } /*** Contact Us ***/ .contact { padding-bottom: 0; } .contact-us-wrapper { align-items: center; -webkit-box-orient: vertical; -webkit-flex-direction: column; -moz-box-orient: vertical; -ms-flex-direction: column; flex-direction: column; } .section-title-contact-us { text-align: center; } .contact-us .textfield-col { padding-right: 0; } #map { width: 100%; height: 300px; margin-top: 30px; } } @media (max-width: 600px) { /*** Our Latest Projects + Our Team ***/ .tilter, figure.team-effect { margin: 0 100px; } } /* 12.3. Small Mobile Screens [ < 480px ] ------------------------------ */ @media (max-width: 480px) { .main-heading1, .main-heading2, .main-heading3 { font-size: 2.5em; } .sub-heading1, .sub-heading2, .sub-heading3 { font-size: 1.3em; } /*** Our Features ***/ .our-features-elements h2 { text-align: center; } /*** Our Latest Projects ***/ #owl-carousel-projects .owl-item { padding: 0 20px; } /*** Client Testimonials ***/ .testimonials-holder { margin: 40px; } .client-comments { margin-bottom: 20px; } .clients { margin: 30px; } /*** Our Latest Projects ***/ .tilter { margin: 0 30px; } /*** Our Team ***/ figure.team-effect { margin: 0 60px; } } @media (max-width: 375px) { /*** Our Latest Projects ***/ .tilter { margin: 0; } /*** Our Team ***/ figure.team-effect { margin: 0 30px; } }