PNG  IHDR;IDATxܻn0K )(pA 7LeG{ §㻢|ذaÆ 6lذaÆ 6lذaÆ 6lom$^yذag5bÆ 6lذaÆ 6lذa{ 6lذaÆ `}HFkm,mӪôô! x|'ܢ˟;E:9&ᶒ}{v]n&6 h_tڠ͵-ҫZ;Z$.Pkž)!o>}leQfJTu іچ\X=8Rن4`Vwl>nG^is"ms$ui?wbs[m6K4O.4%/bC%t Mז -lG6mrz2s%9s@-k9=)kB5\+͂Zsٲ Rn~GRC wIcIn7jJhۛNCS|j08yiHKֶۛkɈ+;SzL/F*\Ԕ#"5m2[S=gnaPeғL lذaÆ 6l^ḵaÆ 6lذaÆ 6lذa; _ذaÆ 6lذaÆ 6lذaÆ RIENDB` /*! Theme Name: Xplor - Creative Agency HTML5 Template Author: createuiux Author URI: https://themeforest.net/user/createuiux/portfoliod Version : 1.0.1 table content 1.header area start here 2.footer area start here 3.slider-area 4.service-area 5.chooseus-area 6.section-title 7.portfolio-area 8.testimonial-area 9.funfact-area 10.breadcumb-area 11.about-page-area-start here 11.1.about-xplor-area 11.2.skile-area 11.3.xplor-theme 11.4.team-area 12.service-page-area-atart here 12.1.provice-area 12.2.work-progress-area 13.portfolio-page-area 14.load-more-btn 15.blog-page-area 16.single-blog-page 17.contact-page-area */ /*-------------------- // --------------------*/ // Core variables and mixins @import "bootstrap/variables"; @import "bootstrap/mixins"; //== transition $transition: all 300ms cubic-bezier(0.25,0.1,0.25,1); $body-font: 'Hind', sans-serif; *:focus { outline: 0 !important; box-shadow: none !important; border-color: $brand-primary !important; } .row>[class*="col-"] { margin-top: 30px; & p:last-child { margin-bottom: 0; } } .row { margin-top: -30px; &.row-normalize, &.row-normalize>[class*="col-"] { margin-top: 0; } &.no-gutters, &.no-gutters>[class*="col-"] { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; } } /* .................................... 1.1 Reset CSS .......................................*/ html, body { height: 100%; font-size: 16px; color: #333333; font-family:$body-font; vertical-align: baseline; line-height: 26px; font-weight: 300; } .floatleft { float:left; } .floatright { float:right; } .alignleft { float:left; margin-right:15px; margin-bottom: 26px; } .alignright { float:right; margin-left:15px; margin-bottom: 26px; } .aligncenter { display:block; margin:0 auto 26px; } a:focus { outline:0px solid; } img { max-width:100%; height:auto; } .fix { overflow:hidden; } p { margin:0 0 26px; } h1, h2, h3, h4, h5, h6 { margin: 0 0 26px; font-weight:700; font-family:$body-font; } a { transition:$transition; text-decoration:none; } a:hover { color: $brand-primary; text-decoration: none; } a:active, a:hover { outline: 0 none; color: $hover-color; } ul{ list-style: outside none none; margin: 0; padding: 0; } .clear{ clear:both; } ::-moz-selection { background: $brand-primary; text-shadow: none; } ::selection { background: $brand-primary; text-shadow: none; } .browserupgrade { margin: 26px 0; background: $brand-primary; color: #333333; padding: 26px 0; } .acurate{ margin:0; padding:0; } .section { padding: 100px 0; } .p-0 { padding: 0!important; } .pb-0 { padding-bottom: 0!important; } .pt-0 { padding-top: 0!important; } .m-0 { margin: 0!important; } .mb-0 { margin-bottom: 0!important; } .mt-0 { margin-top: 0!important; } @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } // 1.header area start here /*--------------------------- -----------------------------*/ .header-area{ position: absolute; top:0; left: 0; right: 0; z-index: 9; margin: auto; background: #ffffff; .navbar-brand{ img{ margin-top: 35px; } } .navbar-collapse{ .navbar-nav{ li{ @include transition($transition); &:hover{ a{ color:$brand-primary; &:after{ width:100%; opacity:1; } span{ color:$brand-primary; } } } &.active{ a{ color:$brand-primary; &:after{ width:100%; opacity:1; } span{ color:$brand-primary; } } } a{ color:#333333; padding:50px 20px 35px 20px; font-weight:500; text-transform:uppercase; position: relative; display: block; &:after{ position: absolute; content:' '; width:0%; height:5px; background:$brand-primary; top:0; left:0; opacity: 0; @include transition($transition); } span{ display:block; font-weight:400; font-size:12px; margin-top:3px; color:#a5a5a5; text-transform: capitalize; } } } } } &.stick{ left: 0; right: 0; width: 100%; z-index: 9999; background: #ffffff; transition: all 0.5s; margin: 0 auto !important; padding: 0; position: fixed !important; top: 0; z-index: 999999; -webkit-box-shadow: 0 10px 6px -6px #777; -moz-box-shadow: 0 10px 6px -6px #777; box-shadow: 0 10px 6px -6px #777; } } // 2.footer area start here /*--------------------------- -----------------------------*/ .footer-area{ .footer-top { background: #282828; padding-bottom:95px; .footer-logo{ a{ display: block; img{ margin-bottom:25px; } } } .footer-top-content{ p{ font-size:16px; line-height:24px; font-weight: 300; color:#ffffff; margin-bottom:7px; } } .submit-form{ overflow: hidden; margin-bottom:36px; form{ .form-group{ position: relative; label{ position: absolute; top:15px; left:20px; } input{ width:100%; height: 50px; padding-left:45px; float:left; font-family:$body-font; color:#767676; font-weight:300; font-size:16px; border-radius:3px; } button{ height:50px; padding: 0 30px; border:none; position: absolute; right:0; border-radius:0 3px 3px 0; font-size:16px; font-weight:600; color:#f8faff; text-transform:capitalize; background:$brand-primary; @include transition($transition); &:hover{ background:$hover-color; } } } } } .footer-social-media{ ul{ margin: 0; padding:0; list-style:none; li{ display: inline-block; &.active{ a{ i{ color:#00bff3; } } } a{ display:block; margin: 0 10px; @include transition($transition); &:hover{ i{ color:#00bff3; @include transition($transition); } } i{ color:#4c4c4c; @include transition($transition); &:before{ margin-left: 0px; font-size:40px; } } } } } } } .footer-bottom{ padding:25px 0; background: #252525; .copy-right-area{ p{ margin-bottom:0; font-size: 16px; color:#ffffff; line-height: 19px; font-weight: 300; text-transform: capitalize; span{ color:#ffd300; } } } .footer-menu{ ul{ margin: 0; padding:0; list-style:none; li{ display: inline-block; &:first-child{ a{ &:after{ display: none; } } } &:last-child{ a{ padding-right:0; } } a{ display: block; font-size:16px; color:#ffffff; line-height: 24px; font-weight: 300; text-transform: capitalize; padding:0 20px; position: relative; @include transition($transition); &:hover{ color:$hover-color; } &:after{ position: absolute; content:""; width:1px; height: 15px; background:#ffffff; left:0; top:5px; } } } } } } } #scrollUp { background: $brand-primary; bottom: 20px; color: #ffffff; display: block; font-size: 25px; height: 50px; line-height: 0; position: fixed; right: 20px; text-align: center; text-decoration: none; @include transition($transition); width: 50px; border: 2px dashed #ffffff; z-index: 1000; @include border-radius(100%); } #scrollUp:hover { background: $brand-primary; border-color: lighten($brand-primary, 20%); } #scrollUp i { display: block; margin-top: 7px; } // 3.slider-area /*--------------------------- -----------------------------*/ .slider-area{ .slide-slider{ .single-slider{ position: relative; .slide-img{ position: absolute; content:''; top:0; left:0; width:100%; height: 100%; img{ width:100%; height: 100%; } } padding:293px 0 217px 0; .slider-content{ padding-top:100px; .slider-heading{ h1{ font-size:70px; line-height: 36px; color:#040404; font-weight: 700; text-transform:uppercase; margin-bottom:23px; span{ color:$brand-primary; } } p{ font-size:20px; line-height: 26px; color:#333333; font-weight:300; margin-bottom:35px; } } .slider-btn{ ul{ margin: 0; padding:0; list-style:none; li{ display: inline-block; margin-right:16px; a{ background:#ffffff; padding:6px 35px; font-size:20px; line-height: 36px; font-weight:500; color:#333333; text-transform: capitalize; @include transition($transition); border-radius:5px; display: inline-block; position: relative; z-index: 1; &:after{ position: absolute; content: ""; height: 0; width: 100%; top: 0; left: 0; background: $hover-color; z-index: -1; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; border-radius: 5px; } &:hover{ color:#ffffff; &:after{ height:100%; @include transition ($transition); } } } } } } } .slider-right{ img{ width:100%; height:100%; } } } .owl-dots{ position: absolute; left:0; right:0; bottom:35px; text-align: center; .owl-dot{ background:#333333; width:15px; height: 15px; line-height:15px; transition:all .5s; width:15px; height:15px; line-height: 15px; @include border-radius(50%); margin:0 6px; &.active{ background:#eb1c1c; } } } } } /*---------------------------- 4.service-area ------------------------------*/ .service-area{ padding-bottom:150px; overflow: hidden; .service-title-area{ background:#fafafa; padding-top:90px; padding-bottom:123px; .service-section-title{ width:80%; margin:0 auto; h4{ font-size:22px; color:#333333; font-weight: 400; letter-spacing: 3px; line-height: 36px; margin:0; margin-bottom: 15px; font-family: $body-font; text-transform: uppercase; } h3{ font-size:30px; line-height:36px; font-weight:300; color:#333333; &.cd-headline.clip{ overflow: hidden; } span{ font-weight:700; color:#eb1c1c; font-size:30px; line-height: 30px; b{ text-transform: uppercase; } } } } } .service-list{ padding:55px 0; background:#ffffff; box-shadow:0 0 80px #fafafa; .single-service{ width:20%; float:left; text-align:center; box-sizing: border-box; position: relative; &:hover{ .overlay{ @include transition($transition); opacity: 1; visibility: visible; .overlay-content{ transform: scale(1); } } } .service-info{ .service-icon{ margin-bottom:20px; i{ &:before{ margin-left:0; font-size:60px; color:#bbbbbb } } } .service-title{ h4{ font-size:20px; line-height:14px; font-weight:700; color:#bbbbbb; margin:0; } } } .overlay{ position: absolute; content:''; left:0; background:$brand-primary; width:100%; padding:65px 20px 25px 20px; transform: translateY(-64%); @include transition($transition); opacity: 0; visibility: hidden; .overlay-content{ transform: scale(0); @include transition($transition); } .service-icon{ margin-bottom:20px; i{ &:before{ margin-left:0px; font-size:60px; color:#ffffff } } } .service-title{ h4{ font-size:20px; line-height:14px; font-weight:700; margin:0; margin-bottom:12px; a{ display:block; color:#ffffff; @include transition($transition); &:hover{ color:#bbbbbb; } } } } .service-content{ p{ color:#ffffff; font-size:15px; line-height:20px; font-weight:400; margin-bottom:25px; } } .readmmore-btn{ a{ color:#ffffff; margin:0; @include transition($transition); &:hover{ color:#bbbbbb; } i{ &:before{ margin-left:0px; } } } } } } } } /*---------------------------- 5.chooseus-area ------------------------------*/ .chooseus-area{ background:#fafbfe; .chooseus-img{ img{ width:100%; height:100%; box-shadow: 0 0 80px #f6f7fa; } } .chooseus-info{ .chooseus-info-list{ .single-chooseus{ margin-bottom:40px; &:hover{ .media{ .media-left{ i{ background: $brand-primary; color:#ffffff; transform:rotateY(180deg) } } } } &:last-child{ margin-bottom:0; } .media{ .media-left{ i{ width:96px; height:96px; line-height:96px; display: inline-block; background:#ffffff; text-align:Center; color:#bbbbbb; margin-right:20px; @include transition($transition); &:before{ margin-left:0; font-size:40px; } } } .media-body{ .media-heading{ font-size:20px; color:#333333; line-height: 14px; font-weight: 700; text-transform:capitalize; } p{ font-size:16px; color:#767676; line-height: 24px; font-weight:300; } } } } } } } /*----------------------------- 6.section-title -------------------------------*/ .section-title{ margin-bottom:70px; margin-top:20px; h2{ font-size:40px; color:#eb1c1c; line-height: 15px; font-weight: 700; text-transform:uppercase; letter-spacing: 5px; } h3{ font-size:20px; color:#333333; line-height:36px; font-weight:400; letter-spacing: 3px; text-transform:uppercase; margin-bottom:28px; } } /*------------------------------- 7.portfolio-area -------------------------------*/ .portfolio-area{ .single-portfolio{ box-shadow: 5px 5px 100px #fafafa; position: relative; z-index: 1; &:hover{ &:after{ opacity:1; transform:scaleY(1); } .portfolio-info{ opacity: 1; } } &:after{ width: 100%; height:100%; position:absolute; content:''; left:0; top:0; background:rgba(0, 0, 0, .8); opacity:0; transform:scaleY(0); @include transition($transition); } .portfolio-info{ position: absolute; content:''; left:0; right:0; transform:translateY(-50%); text-align:center; top:50%; z-index: 2; border:2px solid #ffd300; width:80%; margin:0 auto; padding:35px 0; opacity:0; @include transition($transition); h4{ font-size:20px; font-weight:400; line-height:24px; text-transform:capitalize; margin-bottom:5px; a{ color:#ffd300; @include transition($transition); &:hover{ color:$brand-primary; } } } p{ font-size:16px; line-height:24px; color:#ffffff; font-weight: 300; } } a{ display: block; img{ width:100%; height:100%; } } } .load-more-btn{ margin-top:35px; .load-btn{ display: inline-block; font-size:20px; line-height: 14px; font-weight:600; color:#ffffff; padding: 18px 30px; background:#eb1c1c; @include border-radius(30px); @include transition($transition); &:hover{ background:$hover-color; } } } } /*----------------------------- 8.testimonial-area ------------------------------*/ .testimonial-area{ background:url(../../assets/images/testimonial/bg.jpg) #333333 no-repeat; background-size:cover; background-position: center; background-attachment: fixed; overflow: hidden; .section-title{ h3{ color:#ffffff; } h2{ color:#ffffff; } } .testimonial-info-list{ .single-testimonial-info{ margin-bottom:30px; &:hover{ .media{ .media-left{ i{ background:#bbbbbb ; color:#ffffff; transform:rotateY(180deg) } } } } &:last-child{ margin-bottom:0; } .media{ .media-left{ i{ width:96px; height:96px; line-height:96px; display: inline-block; background:$brand-primary; text-align:Center; color:#ffffff; margin-right:20px; @include transition($transition); &:before{ margin-left:0; font-size:40px; } } } .media-body{ .media-heading{ font-size:20px; color:#ffffff; line-height: 14px; font-weight: 700; text-transform:capitalize; } p{ font-size:16px; color:#ffffff; line-height: 22px; font-weight:300; } } } } } .slide-testimonial{ position:relative; &:after{ position: absolute; content:''; width:100%; height: 89%; left:80%; top:40px; background:#eb1c1c; z-index: -1; } .single-testimonial{ padding:85px 0px 40px 35px; background:#eb1c1c; margin-top:40px; z-index: 2; .testimonial-content{ p{ font-size:16px; color:#ffffff; line-height:24px; font-weight:300; font-style: italic; margin-bottom:50px; } } .member-name{ h3{ margin-bottom:0; a{ display:block; font-size:24px; line-height:25px; color:#ffffff; font-weight:600; text-transform:uppercase; margin-bottom:5px; @include transition($transition); &:hover{ color:#ffd300; } } span{ display: block; font-size:16px; line-height:25px; font-weight:400; color:#ffffff; } } } } .owl-dots{ position: absolute; left:40px; top:0; height: 80px; .owl-dot{ &.active{ width:80px; height:80px; line-height: 80%; @include border-radius(50%); } width:60px; height:60px; line-height:60px; @include border-radius(50%); background:red; margin-right:10px; &:nth-child(1){ background:url(../../assets/images/testimonial/1.png); background-size:cover; background-position: center; } &:nth-child(2){ background:url(../../assets/images/testimonial/2.png); background-size:cover; background-position: center; } &:nth-child(3){ background:url(../../assets/images/testimonial/3.png); background-size:cover; background-position: center; } &:nth-child(4){ background:url(../../assets/images/testimonial/4.png); background-size:cover; background-position: center; } } } } } /*---------------------------- 9.funfact-area -----------------------------*/ .funfact-area{ .single-counter{ padding:58px 30px 40px 30px; background: #ffffff; box-shadow:0px 0px 80px #fafafa; .funfact-counter{ font-size:70px; font-weight: 700; color:#eb1c1c; line-height:20px; display: inline-block; margin-top:12px; margin-bottom:0; } .counter-content{ margin:0; font-size:16px; color:#333333; font-weight:500; text-transform:capitalize; line-height:20px; span{ display: block; } } } .google-map-area{ .gmap-area{ height: 325px; position: relative; overflow: hidden; } } } /*----------------------------- 10.breadcumb-area -------------------------------*/ .breadcumb-area{ background:#ffd300; padding:221px 0px 91px 0px; .breadcumb-title{ width:60%; margin:0 auto; padding:35px 0px; border:7px solid #ecc405; box-sizing:border-box; h2{ font-size:50px; line-height:74px; font-weight:700; color:#333333; text-transform:uppercase; margin-bottom:0; letter-spacing: 7px; } h3{ color:#ffffff; font-size:20px; color:#333333; font-weight: 600; text-transform:uppercase; margin-bottom: 0; margin-top: 5px; } } } /*--------------------------------------- 11.corporate-page-area-start here ----------------------------------------*/ /*------------------------------------- 11.1.about-xplor-area --------------------------------------*/ .about-xplor-area{ position: relative; .about-xplor-title{ h2{ font-size:40px; font-weight:700; line-height: 36px; color:#eb1c1c; text-transform:uppercase; letter-spacing: 7px; } } .about-xplor-content{ p{ font-size:16px; color:#333333; line-height:24px; font-weight: 300; &:last-child{ margin-bottom:0px; } } } .about-xplor-bg{ width:50%; height:65%; position: absolute; content:''; right:0; top:22.5%; padding-left:15px; img{ width:100%; height: 100%;; } } } /*-------------------------------- 11.2.skile-area ----------------------------------*/ .skile-area{ background:#fafbfe; .skills-list{ .single-skills{ h5{ color:#333333; font-size:18px; font-weight:700; margin-bottom:20px; text-transform:capitalize; } span{ .progressbar{ margin-bottom:30px; .percentCount{ margin-top:-50px; font-weight:300; } } } &:last-child{ .progressbar{ margin-bottom:0; } } } } .skill-info-list{ .single-skill-info{ margin-bottom:30px; &:hover{ .media{ .media-left{ i{ background:#bbbbbb ; color:#ffffff; transform:rotateY(180deg) } } } } &:last-child{ margin-bottom:0; } .media{ .media-left{ i{ width:91px; height:91px; line-height:91px; display: inline-block; background:$brand-primary; text-align:Center; color:#ffffff; margin-right:10px; @include transition($transition); &:before{ margin-left:0; font-size:40px; } } } .media-body{ .media-heading{ font-size:20px; color:#333333; line-height: 14px; font-weight: 700; text-transform:capitalize; margin-bottom:15px; } p{ font-size:16px; color:#333333; line-height: 22px; font-weight:300; margin-bottom:0px; } } } } } } /*------------------------------------ 11.3.xplor-theme ------------------------------------*/ .xplor-theme{ position: relative; padding-bottom:0; .xplor-theme-title{ h2{ font-size:40px; line-height:40px; color:#eb1c1c; font-weight: 700; text-transform:uppercase; margin-bottom:25px; letter-spacing: 7px; } } .xplor-theme-left-bg{ width:50%; height: 71%; position: absolute; content:''; left:0; top:200px; padding-right:15px; img{ width:100%; height: 100%;; } } .xplor-theme-content{ p{ font-size:16px; color:#333333; line-height:24px; font-weight: 400; &:last-child{ margin-bottom:0px; } span{ font-weight:700; color:#e40024; } } } } /*----------------------------------- 11.4.team-area ----------------------------------*/ .team-area{ .team-area-title{ h2{ font-size:40px; font-weight:700; line-height: 24px; color:#eb1c1c; text-transform:uppercase; letter-spacing: 7px; margin-bottom: 30px; } } .single-team{ position:relative; overflow: hidden; &:hover{ .member-info{ opacity:1; transform:scale(1); @include transition($transition); } .member-img{ img{ transform:scale(1.2); } } } .member-img{ img{ width:100%; height: 100%; overflow:hidden; @include transition($transition); } } .member-info{ position: absolute; content:''; width: 100%; height: 100%; left:0; top:0%; background:rgba(82, 82, 82, .8); text-align:center; right:0; opacity:0; transform: scale(0); @include transition($transition); .member-name{ position: absolute; content:''; top:50%; left:0; right:0; transform:translateY(-50%); border:2px solid #ebf5fe; margin:0 40px; padding:35px 0 30px 0; h3{ font-size:30px; line-height:24px; font-weight:700; letter-spacing: 7px; text-transform:uppercase; margin-bottom: 10px; a{ color:#ffd300; display: block; @include transition($transition); &:hover{ color:#ffffff; } } } span{ color:#ffd300; margin-bottom:0px; font-size:16px; line-height:24px; font-weight: 500; text-transform:uppercase; } } } } } /*--------------------------------- 12.service-page-area-atart here ----------------------------------*/ .service-page-title{ h2{ font-size:40px; line-height:36px; font-weight:700; text-transform:uppercase; letter-spacing: 10px; color:#ffffff; margin-bottom:30px; } } /*--------------------------------- 12.1.provice-area -----------------------------------*/ .provice-area{ background:#eb1c1c; .single-service{ padding:110px 35px 88px 35px; background:#eb1c1c; -webkit-box-shadow:0 0 30px rgba(211, 25, 25, 0.8); -moz-box-shadow:0 0 30px rgba(211, 25, 25, 0.8); box-shadow:0 0 30px rgba(211, 25, 25, 0.8); box-sizing: border-box; overflow:hidden; position: relative; &:hover{ .inner-file{ transform: rotateX(-180deg); transition:all .5s; } .service-overlay{ transform: rotateX(0deg); opacity: 1; transition:all .5s; } } .inner-file{ transition:all .5s; .service-incon{ margin-bottom:19px; i{ color:#ffffff; &:before{ margin-left:0; font-size:60px; } } } .service-title{ h3{ font-size: 20px; line-height:36px; font-weight:700; text-transform: capitalize; color:#ffffff; margin-bottom:0px; } } .service-content{ p{ margin: 0; color:#ffffff; font-size: 16px; line-height:24px; font-weight:300; } } } .service-overlay{ position: absolute; content:''; width:100%; height:100%; left:0; top:0; text-align: left; top:0%; background:#eb1c1c; transform: rotateX(180deg); opacity: 0; transition:all .5s; .overlay-content{ position: absolute; content:''; left:0; right:0; top:50%; transform: translateY(-50%); padding:0 60px; ul{ margin:0; padding: 0; list-style:none; li{ display:block; font-size:16px; line-height: 36px; color:#ffffff; font-weight: 300; text-transform:capitalize; cursor: pointer; @include transition($transition); &:hover{ color:#ffd300; padding-left:5px; } i{ font-weight: 600; &::before{ margin-left: 0px; margin-right: 10px; } } } } } } } } /*----------------------------------- 12.2.work-progress-area -----------------------------------*/ .work-progress-area{ .service-page-title{ h2{ color:#333333; } } .single-work-progress{ padding:80px 40px 75px 40px; background:#ffffff; -webkit-box-shadow:0 0 30px rgba(224, 224, 224, 0.8); -moz-box-shadow:0 0 30px rgba(224, 224, 224, 0.8); box-shadow:0 0 30px rgba(224, 224, 224, 0.8); position: relative; z-index: 1; cursor: pointer; &:hover{ &:after{ opacity: 1; transform:scale(1); @include border-radius(0); @include transition($transition); } .progress-info{ .progress-content{ p{ color:#333333; } } } } &:after{ position: absolute; content:''; width:100%; height:100%; left:0; top:0; background:#ffd300; z-index: -1; opacity:0; @include border-radius(100%); @include transition($transition); transform: scale(0); } .progress-info{ z-index: 2; .progress-number{ width: 75px; height: 75px; line-height: 75px; @include border-radius(50%); background:#eb1c1c; text-align:Center; margin:0 auto; margin-bottom: 30px; span{ display: inline-block; color:#ffffff; font-size:40px; font-weight:600; line-height: 80px; } } .progress-title{ h4{ font-size:20px; color:#333333; line-height:36px; font-weight:700; text-transform:capitalize; margin-bottom:0px; } } .progress-content{ p{ margin-bottom:0; font-size: 16px; line-height: 24px; font-weight:300; color:#767676; } } } } } /*---------------------------------- 13.portfolio-page-area ----------------------------------*/ .portfolio-page-area{ padding-top:140px; .row>[class*="col-"] { margin-top: 20px; padding-left:10px; padding-right:10px; & p:last-child { margin-bottom: 0; } } .portfolio-list{ .single-portfolio{ position:relative; overflow: hidden; &:hover{ .portfolio-content{ opacity:1; transform:scale(1); .portfolio-inner-content{ .portfolio-detels{ &:after{ opacity:1; transform:scaleY(1); } &:before{ opacity:1; transform:scaleX(1); } } } } } .poftfolio-info{ .poftfolio-img{ img{ width:100%; height: 100%; } } } .portfolio-content{ position: absolute; content:''; left:0; top:0; text-align:center; right:0; width:100%; height: 100%; background:rgba(71, 71, 71, .8); opacity:0; transform:scale(0); @include transition($transition); .portfolio-inner-content{ position: absolute; left:0; right:0; top:50%; transform:translateY(-50%); .portfolio-detels{ margin:30px; position:relative; padding:40px 0; &:after{ position: absolute; content:''; width:100%; height: 100%; left:0; top:0; border-left:3px solid #fafbfe; border-right:3px solid #fafbfe; z-index: -1; opacity:0; transform:scaleY(0); transition:all .8s; } &:before{ position: absolute; content:''; width:100%; height: 100%; left:0; bottom:0; border-top:3px solid #fafbfe; border-bottom:3px solid #fafbfe; z-index: -1; opacity:0; transform:scaleX(0); transition:all .8s; } h4{ font-size:18px; line-height:24px; color:#ffd300; font-weight:700; text-transform:uppercase; margin:0; margin-bottom:5px; } span{ display: block; font-size:16px; font-weight:300; line-height:24px; color:#ffd300; margin-bottom:12px; } .portfolio-btn{ a{ display:inline-block; padding:8px 20px; @include border-radius(30px); background:#ffffff; font-size:16px; line-height: 24px; color:#333333; text-transform:capitalize; font-weight:500; } } } } } } } } /*--------------------------------- 14.load-more-btn --------------------------------*/ .load-more{ margin-top:40px; .load-more-btn{ display:inline-block; padding: 12px 30px; @include border-radius(30px); background: $brand-primary; font-size:20px; line-height:24px; font-weight: 600; text-transform:capitalize; color:#ffffff; @include transition($transition); &:hover{ background:$hover-color; } } } /*------------------------------- 15.blog-page-area -------------------------------*/ .blog-page-area{ padding:130px 0 100px 0; .blog-top-menu{ margin-bottom: 80px; .bloge-page-title{ h2{ font-size:40px; line-height: 36px; font-weight:700; color:#333333; text-transform:uppercase; letter-spacing: 5px; } } .filter-menu{ ul{ margin:0; padding:0; list-style:none; text-align:right; li{ display:inline-block; cursor: pointer; padding:0px 20px; @include border-radius(30px); font-size:16px; line-height:36px; font-weight:500; color:#282828; @include transition($transition); &.active{ color:#ffffff; background:$brand-primary; } &:hover{ color:#ffffff; background:$brand-primary; } } } } } .blog-list{ .mix{ display: none; margin-bottom: 30px; .single-blog{ position: relative; overflow: hidden; img{ width:100%; height: 100%; } &:hover{ &:after{ top:0; opacity:1; transition: all .5s; } .blog-content{ opacity:1; bottom:0; transition: all .5s; } } &:after{ width:100%; height: 100%; position: absolute; content:''; background: rgba(0, 0, 0, .8); top:100%; left:0; transition:all .5s; opacity: 0; } .blog-content{ position: absolute; content:''; bottom:100%; left:0; right:0; width:100%; height:100%; border:1px solid #ffffff; z-index: 1; opacity:0; transform:scale(.8); transition: all .5s; .blog-info{ position: absolute; top:50%; left:0; right:0; transform:translateY(-50%); text-align:center; padding:15px; .blog-title{ h3{ font-size:20px; line-height:36px; font-weight:700; text-transform:capitalize; margin-bottom:12px; a{ display: block; color:#ffd300; @include transition($transition); &:hover{ color:$hover-color; } } } } .blog-detels{ p{ font-size:16px; line-height:24px; font-weight:300; color:#ffffff; margin-bottom:35px; } } .blog-btn{ a{ i{ color:$brand-primary; @include transition($transition); &:hover{ color:#ffd300; } &:before{ margin-left:0; font-size:40px; } } } } } } } } } .load-more{ margin-top:10px; .load-more-btn{ font-weight:500; i{ font-size:14px; font-weight:300; margin-left:5px; } } } } /*------------------------------- 16.single-blog-page --------------------------------*/ .single-blog-page{ .blog-info{ .blog-img{ img{ width:100%; height:100%; } } .blog-meta{ padding:22px 30px 15px 30px; border-bottom: 0 none; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2); margin-bottom:65px; ul{ margin:0; padding:0; list-style:none; li{ display: inline-block; a{ display:block; i{ &:before{ margin-left:0px; } } } } } .blog-meta-left{ ul{ li{ margin-right:10px; a{ font-size:14px; line-height: 24px; color: #767676; font-weight:400; text-transform: capitalize; @include transition($transition); &:hover{ color:#000000; } i{ color:#333333; &:before{ font-size:18px; margin-right:2px; } } } } } } .social-share{ ul{ li{ margin-left:15px; a{ color:#333333; @include transition($transition); &:hover{ color:$brand-primary; } i{ &:before{ font-size:30px; } } } } } } } .blog-content{ h2{ font-size:40px; line-height: 36px; color:#333333; font-weight:700; text-transform:capitalize; } p{ font-size:16px; line-height:24px; color:#333333; font-weight:300; } .feature-infolist{ padding-top:6px; padding-bottom:8px; ul{ margin:0; padding: 0; list-style:none; li{ display:block; position: relative; padding-left:30px; font-size:16px; line-height:36px; color:#333333; font-weight:600; i{ position: absolute; left:0; top:0px; &:before{ margin-left:0; color:$brand-primary; } } } } } .comment-area{ padding-top:25px; .comment-title{ h4{ font-size:16px; line-height:24px; font-weight: 700; color:#282828; text-transform:uppercase; margin-bottom:25px; } } .comment-form-area{ .form-group{ input{ width:100%; height: 40px; padding:15px 20px; font-family: $body-font; font-size:16px; color:#767676; font-weight: 300; border:1px solid #f4f4f4; -webkit-box-shadow:0 0 30px rgba(224, 224, 224, 0.6); -moz-box-shadow:0 0 30px rgba(224, 224, 224, 0.6); box-shadow:0 0 30px rgba(224, 224, 224, 0.6); margin-bottom:20px; } textarea{ width:100%; height: 200px; padding:15px 20px; font-family: $body-font; font-size:16px; color:#767676; font-weight: 300; border:1px solid #f4f4f4; -webkit-box-shadow:0 0 30px rgba(224, 224, 224, 0.6); -moz-box-shadow:0 0 30px rgba(224, 224, 224, 0.6); box-shadow:0 0 30px rgba(224, 224, 224, 0.6); margin-bottom:40px; resize: none; } } .form-check{ input{ width:15px; height: 15px; -webkit-box-shadow:0 0 30px rgba(224, 224, 224, 0.6); -moz-box-shadow:0 0 30px rgba(224, 224, 224, 0.6); box-shadow:0 0 30px rgba(224, 224, 224, 0.6); border:1px solid #f4f4f4; } label{ font-size:16px; line-height:24px; color:#333333; font-weight:300; } } .submit-btn{ button{ border:none; padding:8px 40px; @include border-radius(30px); background:#eb1c1c; color:#ffffff; font-size:20px; line-height:24px; font-weight:600; text-transform:capitalize; @include transition($transition); &:hover{ background:$hover-color; } } } } } } } } /*------------------------------- 17.contact-page-area -------------------------------*/ .contact-page-area{ .office-address-area{ padding:40px 40px 70px 40px; -webkit-box-shadow:0 0 30px rgba(224, 224, 224, 0.6); -moz-box-shadow:0 0 30px rgba(224, 224, 224, 0.6); box-shadow:0 0 30px rgba(224, 224, 224, 0.6); .logo-area{ margin-bottom:32px; } .office-title{ h2{ font-size:30px; line-height:21px; color:#333333; font-weight:700; text-transform:uppercase; margin-bottom: 30px; } } .address-info{ ul{ margin:0; padding:0; list-style:none; li{ display:block; position: relative; padding-left:52px; margin-bottom: 23px; cursor: pointer; i{ position: absolute; left:0; top:0; width:37px; height: 37px; line-height:37px; @include border-radius(50%); text-align: center; background:$brand-primary; &:before{ margin-left:0; color:#ffffff; } } span{ display:block; font-size:16px; line-height: 21px; color:#333333; font-weight:400; } } } } } .contact-form-area{ padding:40px 50px; -webkit-box-shadow:0 0 30px rgba(224, 224, 224, 0.6); -moz-box-shadow:0 0 30px rgba(224, 224, 224, 0.6); box-shadow:0 0 30px rgba(224, 224, 224, 0.6); .row > [class*="col-"]{ padding-left: 5px; } .contact-form-title{ h2{ font-size:30px; line-height: 24px; color:#eb1c1c; font-weight:700; text-transform:uppercase; margin-bottom: 15px; } } form{ .row > [class*="col-"]{ margin-top:10px; padding-left: 5px; padding-right: 5px; } .form-group{ margin-bottom:0; input{ width:100%; height: 40px; padding:10px 20px; font-family:$body-font; font-size:16px; color:#767676; font-weight: 300; border:1px solid #f4f4f4; outline: none; box-shadow: none; } textarea{ width:100%; height: 145px; padding:10px 20px; font-family:$body-font; font-size:16px; color:#767676; font-weight: 300; border:1px solid #f4f4f4; outline: none; box-shadow: none; resize: none; } } .submit-btn{ margin-top:20px; button{ border:none; padding:8px 40px; @include border-radius(30px); background:#eb1c1c; color:#ffffff; font-size:20px; line-height:24px; font-weight:600; text-transform:capitalize; @include transition($transition); &:hover{ background:$hover-color; } } } } } }