/* * ---------------------------------------------------------------------------------------- Author : CodeTides Template Name: Anza - One Page MultiPurpose Template Version : 1.0 * ---------------------------------------------------------------------------------------- */ /* * ---------------------------------------------------------------------------------------- * 01.GLOBAL CSS * 02.PRELOADER & BOUNCE CCS * 03.HOMEPAGE CSS SLIDER BACKGROUND CSS Image BACKGROUND CSS * 04.Section About CSS * 05.Section Services CSS * 06.SERVICE CALL TO ACTION CSS * 07.Our Work/Projects CSS * 08.Work Statistics CSS * 09.Section Team CSS * 10.Section Blog CSS * 11.Section Testimonial CSS * 12.Section Pricing CSS * 13.Section Contact CSS * 14.Section Map CSS * 15.Section Footer CSS * ---------------------------------------------------------------------------------------- */ /* * ---------------------------------------------------------------------------------------- * 01.GLOBAL STYLE * ---------------------------------------------------------------------------------------- */ body { font-size: 16px; font-weight: 300; height: 100%; font-family: 'Roboto', sans-serif; } html, body { height: 100% } h1, h2, h3, h4, h5, h6 {} a { text-decoration: none; -webkit-transition: all 0.4s; -webkit-transition: all 0.2s; transition: all 0.2s; } img { width: 100%; } a{ color: #333; } a:hover { text-decoration: none; } a:focus { outline: none; text-decoration: none; color: #333; } p { line-height: 32px; } ul{list-style-type: square;} ul, li { margin: 0; padding: 0; } fieldset { border: 0 none; margin: 0 auto; padding: 0; } .no-padding { padding: 0 } .section-padding { padding: 70px 0px; } .section-title { margin-bottom: 30px; } .section-title p { font-size: 15px; font-weight: 300; line-height: 26px; } .section-title h2 { font-size: 40px; text-transform: capitalize; margin-bottom: 35px; font-weight: 700; position: relative; margin-top: 0; } /*.section-title h2:before { position: absolute; left: 0; top: 56px; height: 10px; width: 74px; background: #E74C3C; content: ""; z-index: 1; }*/ .section-title-style-2 h2{ border: 3px solid #e74c3c; display: inline-block; padding: 5px 10px; } .section-title-style-2 h2:after{ content: ''; height: 0; width: 0; position: absolute; bottom: -23px; left: 50%; margin-left: -10px; border-width: 10px; border-style: solid; background: none; border-color: transparent; border-top-color: #e74c3c; border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent; } .section-title-style-2 .firstword { border-bottom: none !important; } .section-heading-left{ text-align: left; } .section-heading-left p{ padding-right: 600px; } .section-heading-center{ text-align: center; } .section-heading-center p{ padding: 0 300px; } .section-heading-right{ text-align: right; } .section-heading-right p{ padding-left: 600px; } .firstword { border-bottom: 5px solid #E74C3C; } a.read-more { display: inline-block; color: #fff; padding: 12px 25px; text-transform: capitalize; font-size: 14px; border: 1px solid #E74C3C; background-color: #E74C3C; font-weight: 700; letter-spacing: 1px; } a.read-more:hover { background: transparent; color: #000; border: 1px solid #E74C3C; -webkit-transition: .3s; transition: .3s; } .nav-previous a, .nav-next a { border-bottom: 2px solid #e74c3c; display: inline-block; font-weight: 700; margin-top: 15px; padding: 0 0 3px; text-transform: uppercase; font-size: 14px; } .nav-previous a:hover, .nav-next a:hover { color: #e74c3c; } .scrollup { height: 40px; width: 40px; font-size: 14px; color: #fff; text-align: center; position: fixed; bottom: 30px; right: 30px; line-height: 40px; cursor: pointer; display: none; z-index: 2; background: #E74C3C; } .scrollup:hover { box-shadow: 0 3px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); -webkit-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } /* * ---------------------------------------------------------------------------------------- * 02.PRELOADER & BOUNCE CCS STYLE * ---------------------------------------------------------------------------------------- */ .preloader-area { position: fixed; background: #fff; z-index: 11000; height: 100%; width: 100%; overflow: hidden; } .spinner { width: 40px; height: 40px; position: relative; top: 50%; left: 50%; } .cube1, .cube2 { background-color: #E74C3C; width: 25px; height: 25px; position: absolute; top: 0; left: 0; border-radius: 5px; -webkit-animation: sk-cubemove 1.8s infinite ease-in-out; animation: sk-cubemove 1.8s infinite ease-in-out; } .cube2 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } @-webkit-keyframes sk-cubemove { 25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) } 50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) } 75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) } 100% { -webkit-transform: rotate(-360deg) } } @keyframes sk-cubemove { 25% { transform: translateX(42px) rotate(-90deg) scale(0.5); -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5); } 50% { transform: translateX(42px) translateY(42px) rotate(-179deg); -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg); } 50.1% { transform: translateX(42px) translateY(42px) rotate(-180deg); -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); } 75% { transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); } 100% { transform: rotate(-360deg); -webkit-transform: rotate(-360deg); } } /* * ---------------------------------------------------------------------------------------- * 03.HOMEPAGE CSS STYLE * ---------------------------------------------------------------------------------------- */ .header-area { height: 100%; } .anza-image-area { position: relative; height: 100%; background: url(../images/bg/mainbg.jpg); background-size: cover; z-index: 1; } .anza-image-area:after { position: absolute; background: rgba(0, 0, 0, .8); left: 0; top: 0; width: 100%; height: 100%; content: ""; z-index: -1; } .display-table { display: table; width: 100%; height: 100%; } .display-table-cell { display: table-cell; vertical-align: middle; } .header-text { margin-top: 60px; } .anza-image-area .header-text { margin-top: 200px !important; } .header-text h2 { color: #fff; font-size: 60px; margin-top: 10px; margin-bottom: 25px; font-weight: 700; } .header-text p { color: #fff; font-size: 14px; margin: 0; margin-bottom: 30px; } .header-top-area { position: fixed; left: 0; top: 0; width: 100%; z-index: 999; -webkit-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .header-style-1{ } .header-style-2{ border-bottom: 1px solid rgba(255, 255, 255, 0.22); } .header-style-3{ background: #000; } .logo { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .logo a { text-transform: uppercase; font-size: 20px; font-weight: 300; color: #fff; } .mainmenu .navbar-nav li { margin-right: 30px; } .mainmenu .navbar-nav li a { color: #fff; text-transform: capitalize; font-size: 16px; padding-top: 30px; padding-bottom: 30px; padding-right: 0; padding-left: 0; -webkit-transition: .3s; transition: .3s; font-weight: 300; } .mainmenu .navbar-nav li a:hover { background: none; color: #E74C3C; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .nav li a:focus, .nav li a:hover { background: none; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .navbar { margin: 0; } .menu-bg { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; background: #fff; box-shadow: 0 2px 10px -1px rgba(87, 97, 100, 0.35); background: #000; border: none; } .menu-bg .logo { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .menu-bg .logo a p { color: #fff; } /* .menu-bg .mainmenu .navbar-nav li a { color: #fff; padding-top: 22px; -webkit-transition: .3s; transition: .3s; padding-bottom: 22px; } .menu-bg .mainmenu .navbar-nav li a:hover { color: #E74C3C; } .mainmenu li.dropdown .fa { position: absolute; top:0; right: 0; text-align: center; width: 45px; color:#fff; font-size: 18px; display: none; cursor: pointer; line-height: 44px; } */ .dropdown-menu { background: #333333; right: auto !important; } .nav .open>a, .nav .open>a:focus, .nav .open>a:hover { background-color: transparent; border: none; } .dropdown-submenu { position: relative; } .dropdown-submenu>.dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px; border-radius: 0 6px 6px 6px; color: aqua; } .dropdown-submenu:hover>.dropdown-menu { display: block; } .dropdown-submenu>a:after { display: block; content: " "; float: right; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color: #ccc; margin-top: 5px; margin-right: -10px; } .dropdown-submenu:hover>a:after { border-left-color: #fff; } .dropdown-submenu.pull-left { float: none; } .dropdown-submenu.pull-left>.dropdown-menu { left: -100%; margin-left: 10px; -webkit-border-radius: 6px 0 6px 6px; -moz-border-radius: 6px 0 6px 6px; border-radius: 6px 0 6px 6px; } ul.nav li:hover > ul.dropdown-menu { display: block; } a.slide-btn, button.slide-btn { margin: 0px 5px; display: inline-block; color: #fff; padding: 12px 25px; text-transform: capitalize; font-size: 14px; border: 1px solid #E74C3C; background-color: #E74C3C; font-weight: 700; letter-spacing: 1px; } a.slide-btn:hover, button.slide-btn:hover { background: transparent; color: #fff; border: 1px solid #E74C3C; -webkit-transition: .3s; transition: .3s; } a.slide-btn.other-btn, button.slide-btn.other-btn { background: transparent; } a.slide-btn.other-btn:hover, button.slide-btn.other-btn:hover { background: #E74C3C; } /* * ---------------------------------------------------------------------------------------- * HOMEPAGE SLIDER BACKGROUND CSS STYLE * ---------------------------------------------------------------------------------------- */ .header-area, .anza-slider, .anza-slider div { height: 100%; } .anza-slider div.single-slide-item-tablecell, .anza-slider div.single-slide-item-tablecell div { height: auto; } .single-slide-item-table { display: table; width: 100%; } .single-slide-item-tablecell { display: table-cell; vertical-align: middle; } .single-slide-item { position: relative; z-index: 1; } .single-slide-item:after { position: absolute; background: rgba(0, 0, 0, .5); left: 0; top: 0; width: 100%; height: 100%; content: ""; z-index: -1; } .slide-1 { background: url(../images/bg/slide1.jpg) scroll 0 0; background-size: cover; } .slide-2 { background: url(../images/bg/slide2.jpg) scroll 0 0; background-size: cover; } .slide-3 { background: url(../images/bg/slide3.jpg) scroll 0 0; background-size: cover; } .carousel-fade .carousel-inner .item { -webkit-transition-property: opacity; transition-property: opacity; } .carousel-fade .carousel-inner .item, .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } .carousel-fade .carousel-inner .active, .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } .carousel-fade .carousel-inner .next, .carousel-fade .carousel-inner .prev, .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { left: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .carousel-fade .carousel-inner .item { -webkit-transition-property: opacity; transition-property: opacity; } .carousel-fade .carousel-inner .item, .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .carousel-fade .carousel-inner .active, .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .carousel-fade .carousel-inner .next, .carousel-fade .carousel-inner .prev, .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { left: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .carousel-fade .carousel-control { z-index: 2; } .right.slider-control { left: auto; right: -52px; } .left.slider-control { left: -52px; } .anza-slider:hover .right.slider-control { right: 30px; transition: .25s; -webkit-transition: .25s } .anza-slider:hover .left.slider-control { left: 30px; transition: .25s; -webkit-transition: .25s } .slider-control { background: transparent; border: 1px solid #E74C3C; color: #E74C3C; font-size: 24px; width: 40px; height: 40px; left: 0; line-height: 40px; position: absolute; text-align: center; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 20; } .slider-control:hover, .slider-control:active, .slider-control:visited { background: #E74C3C; border: 1px solid #E74C3C; color: #fff; } .carousel-indicators li { width: 10px !important; height: 10px !important; margin: 0 5px !important; background: #E74C3C; border: none; -webkit-transition: .3s; transition: .3s; border-radius: 0; } .carousel-indicators li.active { -webkit-transition: .3s; transition: .3s; background: #fff; } /* * ---------------------------------------------------------------------------------------- * 04.ABOUT CSS STYLE * ---------------------------------------------------------------------------------------- */ .about-text {} .about-text h2 { margin-bottom: 18px; font-size: 40px; text-transform: capitalize; font-weight: 400; color: #E74C3C; margin-top: 0; } .about-text h2 span { color: #fff; } .about-text p { margin-bottom: 20px; } .about-text .read-more{ margin-bottom:20px; } .about-image img { border-radius: 5px; } .about-image iframe { width:100%; } .margin-top-c { margin-top: 50px; } /* * ---------------------------------------------------------------------------------------- * 05.SERVICE CSS STYLE * ---------------------------------------------------------------------------------------- */ .service-area { background: #F7F7F7; } .single-service { margin-top: 30px; text-align: center; } .single-service h4 { font-size: 18px; margin-top: 20px; text-transform: capitalize; font-weight: 700; -webkit-transition: .3s; transition: .3s; } .single-service:hover.single-service h4 { color: #E74C3C; } .service-icon { margin-bottom: 50px; margin-right: 20px; margin-top: 0px; } .service-icon i { font-size: 60px; color: #E74C3C; height: 100px; width: 100px; } .icon-fill{ display: inline-block; background: #E74C3C; border-radius: 50%; line-height: 100px; color: #333 !important; } .icon-fill i, .icon-outline i{ } .icon-none{ line-height: 100px; } .icon-outline{ display: inline-block; border: 3px solid #E74C3C; border-radius: 50%; line-height: 100px; } .single-service p { margin-bottom: 0 } /* * ---------------------------------------------------------------------------------------- * 06.CALL TO ACTION CSS STYLE * ---------------------------------------------------------------------------------------- */ .call-to-area { background: url(../images/bg/call.jpg); background-size: cover; padding: 150px 0px; position: relative; z-index: 1; } .call-to-area:after { position: absolute; background: rgba(0, 0, 0, .6); left: 0; top: 0; width: 100%; height: 100%; content: ""; z-index: -1; } .call-to-area-text h2 { color: #fff; font-size: 40px; text-transform: capitalize; font-weight: 400; } .call-to-area-text p { text-transform: capitalize; color: #fff; margin-bottom: 30px; } .call-to-area-text a { display: inline-block; color: #fff; padding: 12px 25px; text-transform: capitalize; font-size: 14px; border: 1px solid #E74C3C; background-color: #E74C3C; font-weight: 700; letter-spacing: 1px; } .call-to-area-text a:hover { background: transparent; color: #fff; border: 1px solid #E74C3C; -webkit-transition: .3s; transition: .3s; } /* * ---------------------------------------------------------------------------------------- * 07. PORTFOLIO CSS STYLE * ---------------------------------------------------------------------------------------- */ .gallery { clear:both;} .gallery .col-md-4 { padding: 5px; } .gallery .item { padding: 0; margin: 0; } .gallery-menu { text-align: center; margin-top: 34px; margin-bottom: 60px; } .gallery-menu a { display: inline-block; cursor: pointer; color: #333; padding: 12px 25px; text-transform: capitalize; font-size: 14px; border: 1px solid #E74C3C; background-color: transparent; font-weight: 700; letter-spacing: 1px; padding-bottom: 10px; margin-left: 5px; } .gallery-menu a.current,.gallery-menu a:hover { display: inline-block; color: #fff; text-transform: capitalize; font-size: 14px; border: 1px solid #E74C3C; background-color: #E74C3C; font-weight: 700; letter-spacing: 1px; } .gallery figure.effect-julia img { height: auto; width: 100%; } .gallery .grid figure, .single-team figure, .single-post figure{ position: relative; float: left; overflow: hidden; margin: 10px 1%; min-width: 320px; max-width: 480px; max-height: 360px; width: 100%; height: auto; background: #E74C3C; text-align: center; cursor: pointer; padding: 0; margin: 0; display: flex; justify-content: center; align-items: center; } /*.single-team figure, .single-post figure{ margin-bottom: 15px; }*/ .gallery figure.effect-bubba h2 { padding-top: 10%; opacity: 0; /* -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";*/ font-size: 18px; text-transform: capitalize; font-weight: 700; -webkit-transition: .3s; transition: .3s; } .gallery figure.effect-bubba p { font-size: 16px; text-transform: lowercase; } .gallery figure.effect-bubba p strong { font-size: 16px; text-transform: uppercase; margin-right: 5px; } .gallery .item:hover figure.effect-bubba h2 { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-transition: .3s; transition: .3s; } .portfolio-more { margin-top: 40px; } /* * ---------------------------------------------------------------------------------------- * 08.Work Statistics CSS * ---------------------------------------------------------------------------------------- */ .work-statistics { background: url(../images/bg/testi-bg.jpg); background-size: cover; position: relative; z-index: 1; padding: 150px 0px; } .work-statistics:after { position: absolute; background: rgba(0, 0, 0, .8); left: 0; top: 0; width: 100%; height: 100%; content: ""; z-index: -1; } .single-project-complete { text-align: center; } .single-project-complete h2 { font-size: 40px; margin: 20px 0px; font-weight: 900; color: #E74C3C; } .single-project-complete h6 { text-transform: capitalize; font-size: 20px; font-weight: 300; color: #fff; } .bg-overlay{ background: rgba(0, 0, 0, 0.3); padding: 20px 0px 35px 0px; } /* * ---------------------------------------------------------------------------------------- * 09.TEAM CSS STYLE * ---------------------------------------------------------------------------------------- */ .team-area {} .single-team { margin-top: 30px; color: #fff; -webkit-transition: 1s; transition: 1s; position: relative; text-align: center; max-width: 480px; width: 100%; margin: 0 auto; } .single-team:hover .team-social { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-transition: 1s; transition: 1s; } .team-social { position: absolute; left: 0; top: 0; height: 100%; width: 100%; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition: .3s; transition: .3s; z-index: 99999; /* display: table; */ margin: 0 auto; vertical-align: middle; } .team-social ul { padding: 0; margin: 0; list-style: none; display: table; height: 100%; /* position: absolute; */ /* vertical-align: middle; */ /* width: 100%; */ text-align: center; margin: 0 auto; } .team-social ul li{ display: table-cell; vertical-align: middle; } .team-social ul li a { color: #E74C3C; height: 40px; width: 40px; border-radius: 50%; text-align: center; line-height: 40px; background: #000; display: block; margin: 0 10px; } .team-social ul li a:hover { color: #fff; } .single-team img { width: 100%; } .single-team h4 { margin: 0; font-size: 20px; text-transform: capitalize; font-weight: 700; } .single-team h6 { font-size: 16px; font-weight: 300; margin-bottom: 0; margin-top: 10px; } .team-description { border-top: 2px solid #E74C3C; margin-top: 15px; background: #F7F7F7; padding: 20px 30px; -webkit-transition: .3s; transition: .3s; color: #333; text-align: center; clear: both; } /* * ---------------------------------------------------------------------------------------- * 10.Blog CSS STYLE * ---------------------------------------------------------------------------------------- */ .blog-area{ background: url(../images/bg/blog-bg.jpg); background-size: cover !important; position: relative; z-index: 1; } .blog-area:after { position: absolute; background: rgba(0, 0, 0, .6); left: 0; top: 0; width: 100%; height: 100%; content: ""; z-index: -1; } .blog-post-area {} .blog-post-area .single-post { margin-top: 30px; color: #fff; -webkit-transition: 1s; transition: 1s; position: relative; text-align: center; max-width: 480px; width: 100%; margin: 30px auto 0 auto; } .single-post:hover .post-link { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-transition: 1s; transition: 1s; } .post-link { position: absolute; left: 0; top: 0; height: 100%; width: 100%; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition: .3s; transition: .3s; z-index: 99999; /* display: table; */ margin: 0 auto; vertical-align: middle; } .post-link ul { padding: 0; margin: 0; list-style: none; display: table; height: 100%; /* position: absolute; */ /* vertical-align: middle; */ /* width: 100%; */ text-align: center; margin: 0 auto; } .post-link ul li{ display: table-cell; vertical-align: middle; } .post-link ul li a { color: #E74C3C; height: 40px; width: 40px; border-radius: 50%; text-align: center; line-height: 40px; background: #000; display: block; margin: 0 10px; } .post-link ul li a:hover { color: #fff; } .post-heading img { width: auto; max-width:100%; } .single-post h4 { margin: 0; font-size: 20px; text-transform: capitalize; font-weight: 700; } .single-post h4 a{ color: #333; } .post-meta { font-size: 13px; font-weight: 300; margin-bottom: 15px; margin-top: 15px; display: inline-block; } .post-meta a, .post-meta i{ margin-right: 10px; color: #333; } .post-description { border-top: 2px solid #E74C3C; margin-top: 15px; background: #F7F7F7; padding: 20px 10px; -webkit-transition: .3s; transition: .3s; color: #333; text-align: center; clear: both; /* min-height: 335px;*/ } .post-description .post-excerpt{ font-size: 14px; line-height: 25px; margin-bottom: 10px; text-align: left; /* min-height: 100px;*/ } .break-words{ /* These are technically the same, but use both */ overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; /* This is the dangerous one in WebKit, as it breaks things wherever */ word-break: break-all; /* Instead use this non-standard one: */ word-break: break-word; /* Adds a hyphen where the word breaks, if supported (No Blink) */ -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; } .comment-list { list-style:none; } .comment-list li { border-bottom: 1px solid #d7d7d7; padding: 20px 0; } .comment-list li > ul { list-style:square; } .comment-list li li { border-bottom: medium none; padding: 0; } .comment-list li img { border-radius: 50%; float: left; height: 55px; width: 55px; margin-right: 30px; } .comment-list li h4 { border: medium none !important; font-size: 14px; margin: 15px 0 5px !important; padding: 0 !important; } .comment-list li span { display: inline-block; font-style: italic; } .comment-list li p { padding: 15px 0 0 85px; } .comment-list li .button { margin-left: 85px; } .comment-list li .button a{ background-color: transparent; color: #333; } .comment-list li .button a:hover{ background-color: #e74c3c; color: #fff; } /* * ---------------------------------------------------------------------------------------- * 11.TESTIMONIAL CSS STYLE * ---------------------------------------------------------------------------------------- */ .testimonial-area { background: url(../images/bg/testimonials-bg.jpg); background-size: cover !important; position: relative; z-index: 1; } .testimonial-area:after { position: absolute; background: rgba(0, 0, 0, .8); left: 0; top: 0; width: 100%; height: 100%; content: ""; z-index: -1; } .testimonial-area .section-title h2, .blog-area .section-title h2 { color: #fff; } .testimonial-area .section-title p, .blog-area .section-title p { color: #fff; } .testimonial-list { margin-top: 30px; } .single-testi-des { color: #fff; padding: 30px; margin-bottom: 30px; position: relative; } .single-testi-des:before { position: absolute; bottom: 15px; left: 0; content: '\201C'; font-size: 175px; top: -40px; padding: 0; width: 100%; text-align: center; } .single-testi-des:after { position: absolute; bottom: 15px; left: 0; content: '..........'; font-size: 25px; letter-spacing: 3px; text-align: center; width: 100%; } .single-testimonial img { width: 60px; border-radius: 50%; text-align: center; margin: 0 auto; } .single-testimonial { text-align: center; } .single-testimonial h6 { margin-top: 0px; font-size: 12px; text-transform: capitalize; letter-spacing: 3px; } .single-testimonial p { font-size: 16px; font-weight: 300; margin-left: 10px; margin-top: 25px; } .testi-name { text-align: center; } .testi-name h2 { font-size: 18px; margin-top: 20px; text-transform: capitalize; font-weight: 700; -webkit-transition: .3s; transition: .3s; color: #E74C3C; } .testi-name h3 { font-size: 16px; font-weight: 300; text-transform: capitalize; margin-top: 0; color: #fff; } .owl-theme .owl-controls { margin-top: 30px; } .owl-theme .owl-controls .owl-page span { display: block; width: 10px; height: 10px; margin: 0; background: #E74C3C; border: none; -webkit-transition: .3s; transition: .3s; margin: 5px; } .owl-theme .owl-controls .owl-page.active span { background: #fff; } /* * ---------------------------------------------------------------------------------------- * 12.PRICING CSS STYLE * ---------------------------------------------------------------------------------------- */ .pricing-area {} .pricing-box { text-align: center; padding-bottom: 30px; text-align: center; margin-top: 30px; -webkit-transition: .3s; transition: .3s; background: #FAFAFA; text-align: center; max-width: 480px; width: 100%; margin: 30px auto 0 auto; } .pricing-box:hover a.plan-more { background: transparent; color: #000; border: 1px solid #E74C3C; -webkit-transition: .3s; transition: .3s; } .pricing-box:hover { -webkit-transition: .3s; transition: .3s; } .pricing-box.active .plan-price { color: #E74C3C; } .pricing-box .selected{ background: #E74C3C; color: #fff; } .pricing-box .selected .plan-price{ background: #dc4232; } .pricing-box .selected i, .pricing-box .selected .plan-price p{ color: #fff; } .pricing-header{ padding-top: 30px; } .pricing-header i { font-size: 40px; color: #E74C3C; } .pricing-header .plan-title { color: #000; text-transform: uppercase; font-size: 14px; margin-bottom: 30px; margin-top: 20px; } .plan-price{ background: #f3f3f3; line-height: 67px; height: 67px; } .plan-price p { font-size: 40px; color: #E74C3C; font-weight: 900; margin: 0; line-height: 58px; } .plan-price p span { font-size: 15px; color: #ccc; font-weight: 300; margin-left: -10px; } .plan-features { margin-top: 40px; text-align: left; } .plan-features li { margin: 0; font-size: 16px; padding: 10px 20px; } .plan-features li:nth-child(2n) { background: #f3f3f3; } .plan-features li .fa { width: 16px; margin-right: 10px; text-align: center; } .plan-features li .fa-check { color: #2ecc71; } .plan-features li .fa-close { color: #e74c3c; } a.plan-more { margin-top: 30px; display: inline-block; color: #fff; padding: 12px 25px; text-transform: capitalize; font-size: 14px; border: 1px solid #E74C3C; background-color: #E74C3C; font-weight: 700; } a.plan-more:hover { background: transparent; color: #000; border: 1px solid #E74C3C; -webkit-transition: .3s; transition: .3s; } /* * ---------------------------------------------------------------------------------------- * 13.CONTACT CSS STYLE * ---------------------------------------------------------------------------------------- */ .contact-area { background: #F7F7F7; } .contact-details-list { background: #fff; margin-top: 30px; padding: 30px; } .contact-details-list i { float: left; margin-right: 15px; font-size: 20px; color: #E74C3C; } .single-contact { margin-bottom: 22px; } .contact-details-list h2 { font-size: 18px; margin-top: 0px; text-transform: capitalize; font-weight: 700; -webkit-transition: .3s; transition: .3s; } .contact-details-list p{ margin-left: 35px; margin-bottom: 22px; } .contact-details-list-2 { display: table; margin: 0 auto; margin-bottom: 0; } .contact-details-list-2 i { font-size: 3em; color: #E74C3C; display: table-cell; vertical-align: middle; padding-right: 15px; } .contact-details-list-2 p{ text-align: left; font-size: 0.875em; line-height: 1.4285em; display: table-cell; vertical-align: middle; margin: 0; } .contact-form { margin-top: 30px; } .form-control { display: block; border: 0px; width: 100%; height: 50px; font-size: 16px; line-height: 1.42857143; color: #000; background-color: transparent; background-image: none; border-radius: 0px; box-shadow: none; margin-bottom: 10px; padding: 17px 7px 14px 15px; border: 1px solid #f2f2f2; background: #fff; -webkit-transition: .3s; transition: .3s } .form-control-textarea { height: 192px !important; } .form-control:focus { border-color: #E74C3C; outline: 0; box-shadow: none; } .button{ display: inline-block; } .contact-form input[type='submit'], .footer-newsletter input[type='submit'], .button a { display: inline-block; color: #fff; padding: 0px 25px; text-transform: capitalize; font-size: 14px; border: 1px solid #E74C3C; background-color: #E74C3C; border-radius: 0; font-weight: 700; height: 45px; line-height: 47px; } .contact-form input[type='submit']:hover{ background: transparent; color: #000; border: 1px solid #E74C3C; -webkit-transition: .3s; transition: .3s; } .footer-newsletter input[type='submit']:hover { background: transparent; color: #fff; border: 1px solid #E74C3C; -webkit-transition: .3s; transition: .3s; } .form-control-newsletter { display: inline-block; border: 0px; width: 300px; height: 44px; font-size: 16px; line-height: 1.42857143; color: #000; background-color: transparent; background-image: none; border-radius: 0px; box-shadow: none; margin-bottom: 10px; padding: 17px 7px 16px 15px; border: 1px solid #f2f2f2; background: #fff; -webkit-transition: .3s; transition: .3s } .form-control-newsletter:focus { border-color: #E74C3C; outline: 0; box-shadow: none; } .btn.active.focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn:active:focus, .btn:focus { outline: none; } .success { background: #50B948 none repeat scroll 0 0; color: #fff; font-weight: 700; padding: 20px; text-align: center; } /* * ---------------------------------------------------------------------------------------- * 14.MAP CSS STYLE * ---------------------------------------------------------------------------------------- */ #map { height: 400px; } .map { background: #000; border-bottom: 1px solid #222; } .show_hide_map { cursor: pointer; } .map h2 { color: #FFFFFF; font-size: 24px; text-transform: uppercase; margin: 30px 10px 30px 0; display: inline-block; } .map i { font-size: 30px; display: inline-block; color: #E74C3C; } .map iframe { width: 100%; height: 400px; border: none; } .spin{ -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-2); transition: .3s; } .spinBack{ -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0); transition: .3s; } /* * ---------------------------------------------------------------------------------------- * 15.FOOTER CSS STYLE * ---------------------------------------------------------------------------------------- */ .footer-area { background: #000; padding: 60px 0px; } .footer-text h6 { text-transform: capitalize; color: #fff; line-height: 25px; font-weight: 300; font-size: 16px; } .footer-text h6 a { text-transform: capitalize; color: #fff; line-height: 25px; font-weight: 300; font-size: 16px; } .footer-social-link { margin-top: 20px; } .footer-social-link ul { padding: 0; margin: 0; list-style: none; } .footer-social-link ul li { display: inline-block; margin: 0px 10px; } .footer-social-link ul li a { display: block; color: #E74C3C; margin-bottom: 10px; } .footer-widget{ border-bottom: 1px solid #222; padding-bottom: 20px; margin-bottom: 20px; } .footer-area section{ padding-bottom: 30px; color: #fff; } .footer-area .widget h6{ background: transparent; border: none; } .footer-area .widget h6:before{ content: ''; } .footer-area .firstword{ padding-bottom: 5px; } .footer-area .widget a, .footer-area .widget span{ color: #fff !important; } .footer-area .widget .tagcloud a, aside .widget .tagcloud a { border: 1px solid #E74C3C; padding: 5px 10px; font-size: 16px !important; margin-bottom: 10px; display: inline-block; } .footer-area .widget .tagcloud a:hover{ background-color: #E74C3C; } aside .widget .tagcloud a:hover{ background-color: #E74C3C; color: #fff; } /* * ---------------------------------------------------------------------------------------- * PREVIEW CSS STYLE * ---------------------------------------------------------------------------------------- */ .preview-body{ background: #fafafa; } .preview-single-image img{ width: 100%; } .preview-single-image{ transition: 1s; box-shadow: 1px 2px 2px 0px rgba(0, 0, 0, 0.05); margin-bottom: 30px; } .preview-single-image:hover{ transition: 1s; box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15); } .preview-single-image h2{ font-size: 20px; text-align: center; color: #000; background: #fff;margin: 0; padding: 30px 20px; } .preview-header-top-area{ padding: 50px 0px; } .preview-header-top-area h2{ font-size: 60px; color: #E74C3C; text-transform: uppercase; font-weight: 900; } .preview-header-top-area p{ color: #333; font-size: 30px; font-weight: 300; } .main h2{ color: #000; } .main { margin-bottom: 180px; } .inner-page-banner { background: url(../images/bg/inner.jpg) no-repeat center; background-size: cover; text-align: center; margin-bottom: 100px; } .inner-page-banner .opacity { height: 100%; background: rgba(0,0,0,0.5); padding: 146px 0 58px 0; } .inner-page-banner .opacity h2 { color: #fff; margin-bottom: 18px; } .inner-page-banner .opacity ul li { display: inline-block; margin: 0 3px; font-size: 18px; color: #fff; } .inner-page-banner .opacity ul li a { color: #fff; } .clear-fix { clear: both; } .float-left { float: left; } /*** ==================================================================== Blog Aside bar ==================================================================== ***/ .blog-details-page aside .sidebar-search-box, .widget_search { margin-bottom: 55px; position: relative; } .widget label.screen-reader-text{ font-weight:400; margin:0 2%; width:96%; margin-bottom:10px; } .widget select{ max-width:100% !important; width: 96%; height: 40px; border: 1px solid #dfdfdf; padding: 0 67px 0 20px; color:#333; margin:0 2%; } section.widget{ margin-bottom:25px; } .widget_search label{width: 100%;} .widget_search span{display: none;} .blog-details-page aside .sidebar-search-box input, .widget_search input{ width: 100%; height: 40px; border:1px solid #dfdfdf; padding: 0 67px 0 20px; } .blog-details-page aside .sidebar-search-box button , .widget_search input[type='submit'] { width: auto; margin: 0px; display: inline-block; color: #fff; padding: 12px 25px; text-transform: capitalize; font-size: 14px; border: 1px solid #E74C3C; background-color: #E74C3C; font-weight: 700; letter-spacing: 1px; } .widget_search input[type='submit']:hover { color: #333; background-color: transparent; } .blog-details-page aside .sidebar-news-list ul li a, .widget ul li a{ color:#333; margin-bottom: 12px; font-size: 14px; } .blog-details-page aside .sidebar-news-list ul li a, .widget ul li a:before{ margin-right: 8px; content: "\f105"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; } .blog-details-page aside .sidebar-news-list ul li a i{ margin-right: 8px; } .blog-details-page aside .sidebar-news-list ul, .widget ul { margin: 0; list-style: none; } .blog-details-page aside .sidebar-news-list ul li, .widget ul li{ border-bottom:1px solid #dfdfdf; line-height: 35px; } .blog-details-page aside .sidebar-news-list ul li:last-child, .widget ul li:last-child { border: none; } .recent-single-post img{ max-width: 100%; width: auto !important; float: left; } .recent-single-post .post { width: 81%; padding-left: 20px; } .recent-single-post .post a, .recent-single-post .post span { color: #333; margin-bottom: 4px; font-size: 14px; display: block; } .recent-single-post { padding-bottom: 20px; margin-bottom: 30px; border-bottom:1px solid #dfdfdf; overflow: auto; } .sidebar-news-list h6, .sidebar-recent-post h6, .sidebar-tags h6, .widget-title { margin-bottom: 25px; background: #F7F7F7; border-bottom: 2px solid #E74C3C; line-height: 35px; font-size: 16px; margin-top:0; padding-left:5px; } .sidebar-news-list h6:before, .sidebar-recent-post h6:before, .sidebar-tags h6:before, .widget-title:before{ content: "\f0c9"; float: left; padding-right: 5px; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; } .sidebar-recent-post { margin-bottom: 40px; } .recent-single-post:last-child { border: none; } .sidebar-tags ul li { display: inline-block; margin: 0 8px 10px 0; } .sidebar-tags ul li a { color:#333; line-height: 35px; padding: 0 12px; border: 1px solid #dfdfdf; border-radius: 5px; font-size: 14px; font-weight: 300; } /*** ==================================================================== Blog Details Post ==================================================================== ***/ .blog-details-post-wrapper .post-heading img { margin-bottom: 53px; } .blog-details-post-wrapper .post-heading h4 { margin: 0px 0 13px 0; text-transform: none; } .blog-details-post-wrapper .post-heading { padding-bottom: 25px; border-bottom: 1px solid #dfdfdf; margin-bottom: 25px; } .post-heading a{ text-decoration: underline; } .blog-details-post-wrapper>h6 { margin: 23px 0 28px 0; text-transform: none; } .blog-details-post-wrapper>.row { margin-top: 35px; margin-bottom: 25px; } .blog-details-post-wrapper>.row p { font-style: italic; color:#292929; padding-left: 18px; } .blog-details-post-wrapper>.row p i { color:#9d9f9f; margin: 0 4px; } .blog-details-post-wrapper>.row p i.fa-quote-left { margin-left: -16px; } .blog-details-post-wrapper .list-img-wrapper { margin: 34px 0 40px 0; } .blog-details-post-wrapper .list-img-wrapper img { width: 48%; } .blog-details-post-wrapper .list-img-wrapper ul { padding-left: 30px; } .blog-details-post-wrapper .list-img-wrapper ul li a { color:#292929; margin-bottom: 12px; } .blog-details-post-wrapper .list-img-wrapper ul li a i { margin-right: 8px; } .blog-details-post-wrapper .post-share-area .share li { display: inline-block; margin-top: 5px; } .blog-details-post-wrapper .post-share-area .share li a { color:#6f6f6f; } .blog-details-post-wrapper .post-share-area { padding-bottom: 30px; border-bottom: 1px solid #dfdfdf; } .blog-details-post-wrapper .post-share-area .share-icon li { display: inline-block; text-align: center; } .blog-details-post-wrapper .post-share-area .share-icon li a { width: 32px; line-height: 30px; margin: 0 5px; border:1px solid transparent; } .blog-details-post-wrapper .post-share-area .share-icon li:first-child { margin-right: 15px; } .blog-details-post-wrapper .post-share-area .share-icon li a:hover { color:#fff; } .blog-details-post-wrapper .comment-area h4 { margin: 55px 0 42px 0; padding-bottom: 32px; border-bottom: 1px solid #dfdfdf; } .blog-details-post-wrapper .comment-area .single-comment { padding-bottom: 30px; border-bottom: 1px solid #dfdfdf; margin-bottom: 30px; overflow: auto; } .blog-details-post-wrapper .comment-area .single-comment.reply-comment { margin-left: 100px; } .blog-details-post-wrapper .comment-area .single-comment img { width: 55px; height: 55px; border-radius: 50%; } .blog-details-post-wrapper .comment-area .single-comment .comment { width: 90%; width: calc(100% - 60px); padding-left: 30px; } .blog-details-post-wrapper .comment-area .single-comment .comment h6 { font-size: 14px; text-transform: none; margin-bottom: 5px; } .blog-details-post-wrapper .comment-area .single-comment .comment p { margin: 17px 0 22px 0; } .blog-details-post-wrapper .comment-area .single-comment .comment button { font-size: 13px; color: #333; } .blog-details-post-wrapper .comment-area .single-comment .comment button:hover { color: #fff; } .blog-details-post-wrapper .post-comment h4, #respond h4 { margin: 70px 0 40px 0; } .blog-details-post-wrapper .post-comment span, #respond span { text-transform: uppercase; display: block; } .blog-details-post-wrapper .post-comment input, #respond input { width: 100%; height: 40px; border: 1px solid #dfdfdf; padding: 0 15px; } .blog-details-post-wrapper .post-comment textarea, #respond textarea { width: 100%; max-width: 100%; height: 170px; border: 1px solid #dfdfdf; padding: 20px 15px; } .blog-details-post-wrapper .post-comment .single-input, #respond .single-input { margin: 10px 0 25px 0; } .blog-details-post-wrapper .post-comment form button, #respond form input[type="submit"] { width: auto; margin: 0px; display: inline-block; color: #fff; text-transform: capitalize; font-size: 14px; border: 1px solid #E74C3C; background-color: #E74C3C; font-weight: 700; letter-spacing: 1px; } .blog-details-post-wrapper .post-comment form button:hover, #respond form input[type="submit"]:hover { color: #333; background-color: transparent; } /* * ---------------------------------------------------------------------------------------- * side bar widgets CSS STYLE * ---------------------------------------------------------------------------------------- */ .widget_calendar table{width: 100%;} .widget_calendar caption{text-align: center; font-weight: 700; font-size: 18px; color: #333;} .widget_calendar th, .widget_calendar td{text-align: center;} .widget_calendar #today{border: 1px solid #777;} /* * ---------------------------------------------------------------------------------------- * Miscellaneous CSS STYLE * ---------------------------------------------------------------------------------------- */ .edit-link{clear: both;display: block;margin-bottom: 10px;} div.wpcf7-validation-errors{clear: both;display: inline-block; margin-top: 10px;} .posts-navigation{clear: both !important;margin: 0px 15px; padding: 15px 0;} .posts-navigation div.nav-previous{float: left;} .posts-navigation div.nav-next{float: right;} .posts-navigation .screen-reader-text{display: none;} .page img{width: auto;} .sticky{} .bypostauthor{} #subscribe_email-error,#validation_error{ display: block; color: #fff; font-weight: 700; text-align: center; background: #ff0000; max-width: 400px; clear: both; text-align: center; margin: 0 auto; } #newsletter-success{ display: block; color: #fff; font-weight: 700; text-align: center; background: #00ce36; max-width: 400px; clear: both; text-align: center; margin: 0 auto; } .single-post p{ //clear:both; } .blog-details-post-wrapper ul > li { margin-left: 40px; } .blog-details-post-wrapper table{ width: 100%; border: 1px solid #333; } .blog-details-post-wrapper table thead { line-height: 45px; } .blog-details-post-wrapper table th{ border-right: 1px solid #333; text-align: center; padding: 0 10px; } .blog-details-post-wrapper table tr { line-height: 40px; border-top: 1px solid #333; } .blog-details-post-wrapper table tr td{ padding: 0 10px; border-right: 1px solid #333; } .padd-null{ padding: 0; } .padd-null-left{ padding-left: 0; } .padd-null-right{ padding-right: 0; } /* == WordPress WYSIWYG Editor Styles == */ .entry-content img { margin: 0 0 1.5em 0; } .alignleft, img.alignleft { margin-right: 1.5em; display: inline; float: left; width: auto; max-width: 100%; } .alignright, img.alignright { margin-left: 1.5em; display: inline; float: right; width: auto; max-width: 100%; } .aligncenter, img.aligncenter { margin-right: auto; margin-left: auto; display: block; clear: both; width: auto; max-width: 100%; } .alignnone, img.alignnone { /* not sure about this one */ width: auto; max-width: 100%; } .wp-caption { margin-bottom: 1.5em; text-align: center; padding-top: 5px; } .wp-caption img { border: 0 none; padding: 0; margin: 0 10px; width: auto; max-width: 100%; } figure.wp-caption { width:auto; max-width:100%; min-width:auto; background: none; } .wp-caption.aligncenter{ display:block; width: 100% !important; } .wp-caption.alignright{ float:right; } .wp-caption.alignleft{ float:left; margin-right: 10px; } .wp-caption p.wp-caption-text { line-height: 1.5; font-size: 10px; margin: 0; } .wp-smiley { margin: 0 !important; max-height: 1em; } blockquote.left { margin-right: 20px; text-align: right; margin-left: 0; width: 33%; float: left; } blockquote.right { margin-left: 20px; text-align: left; margin-right: 0; width: 33%; float: right; } .gallery dl {} .gallery dt {} .gallery dd {} .gallery dl a {} .gallery dl img {} .gallery-caption {} .size-full {} .size-large {} .size-medium {} .size-thumbnail {} .entry-footer a{ text-decoration: underline; } .tags-links,.cat-links{clear: both; display: block;} @media (min-width: 979px) { ul.nav li:hover > ul.dropdown-menu { display: block; } } .parallax{ background-position: 50% 50%; background-repeat: no-repeat; background-attachment: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .blog-search-page .search-form { padding-bottom: 50px; } .blog-search-page .search-form input{ width: 285px; height: 40px; border: 1px solid #dfdfdf; padding: 0 67px 0 20px; } .blog-search-page .search-form input[type='submit'] { width: 100px; margin: 0px; display: inline-block; color: #fff; text-align: center; text-transform: capitalize; font-size: 14px; border: 1px solid #E74C3C; background-color: #E74C3C; font-weight: 700; letter-spacing: 1px; } .post-password-required input[type="submit"]{ display: inline-block; color: #fff; padding: 3px 25px; text-transform: capitalize; font-size: 14px; border: 1px solid #E74C3C; background-color: #E74C3C; font-weight: 700; letter-spacing: 1px; } .post-password-required input[type="submit"]:hover { background: transparent; color: #000; border: 1px solid #E74C3C; -webkit-transition: .3s; transition: .3s; } .sticky { margin-left:10px; background-color:#ededed; border:1px solid #f5f5f5; color:#272727; padding-right: 5px; } .sticky_grid{ margin-right:10px; background-color:#ededed; border:1px solid #f5f5f5; color:#272727; padding-right: 5px; } .sticky_grid .fa, .sticky .fa{ font-size:16px; padding:0 10px; } .widget img{ max-width:100% !important; width:auto !important; height:auto; } .entry-footer{ margin-top:50px; } .page-links,.cat-links, .tags-links{ font-weight:600;line-height: 35px; } .page-links a, .cat-links a, .tags-links a{ font-weight:300; } .admin-bar header, .admin-bar .header-area, .admin-bar #home, .admin-bar #innerpage , .admin-bar .header-top-area{ top: 32px; } #comments{ margin-bottom:25px; } .loadmorebtn{ clear:both; } .jarallax { background-size: cover !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; }