whoami7 - Manager
:
/
home
/
analuakl
/
public_html
/
assets
/
css1
/
Upload File:
files >> /home/analuakl/public_html/assets/css1/style.css
/* /\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\ CONTENTS /\/\/\/\/\/\/\/\/\/\/\/\/\/\//\/\/\/\ 1. IMPORT 2. HEADER 3. NAVIGATION 4. FOOTER & FOOTER WIDGETS 5. SIDEBAR & SIDEBAR WIDGETS 6. PORTFOLIO/PROJECTS 7. BLOG STYLING 8. HOME PAGE 9. 404 PAGE 10. ABOUT PAGE 11. CONTACT PAGE FORM 12. ICON LIST 13. RECENT WORK CAROUSEL 14. TESTIMONIALS 15. ICON SERVICE BOXES 16. PARALLAX 17. CLIENTS 18. TYPOGRAPHY 19. BUTTONS 20. PRICING TABLES BOXS 21. TABS 22. ACCORDION & TOGGLE 23. PROGRESS SKILL BAR 24. PROMO BOX 25. PAGINATION 26. TITLE 27. DROPCAPS 28. HIGHLIGHT 29. SWIPE J.S SLIDER 30. CAROUSEL 31. FLICKR 32. LIST & BULLETS 33. BUTTON UP 34. SHOP 35. SHOP CART 36. MEDIA QUERIES */ /* =================================================================== */ /* Import Section ====================================================================== */ @import url("font-awesome.css"); @import url("magnified.css"); @import url("http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700"); @import url(http://fonts.googleapis.com/css?family=Lato:400,300,700); @import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700); h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 600; } body, h1, h2, h3, h4, h5, h6, .button, input[type="button"], input[type="submit"], input[type="text"], input[type="password"], input[type="email"], textarea, select { font-family: "Open Sans",Helvetica, Arial, sans-serif; font-size:13px; line-height:20px; color:#555; } h1 { font-size: 29px; line-height: 50px; margin: 0; } h2 { font-size: 22px; line-height: 30px; } h3 { font-size: 16px; line-height: 30px; } h4 { font-size: 14px; line-height: 30px; } h5 { font-size: 12px; line-height: 24px; } h6 { font-size: 10px; line-height: 20px; } a {text-decoration: none ;} a:hover{ text-decoration: none; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; color:#555; } a:focus{ outline: none; text-decoration: none; } .not-ie a { -webkit-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out; -moz-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out; -ms-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out; -o-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out; transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out; } .mrgb-20{ margin-bottom:20px; display:block; } .mrgb-30{ margin-bottom:30px; } .mrgb-40{ margin-bottom:40px; position:relative; display:block; } .mrgb-50{ margin-bottom:50px; position:relative; display:block; } .mrgb-60{ margin-bottom:60px; position:relative; display:block; } .mrg-0{ margin:0 auto; } .hidden{ display: none; } .wrapper{ background: #fff; } /* =================================================================== */ /* 2. HEADER ====================================================================== */ #background{ width: 100%; height: 100%; } #header { z-index: 999; position: relative; box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.2); } #header { width: 100%; /*height:547px;*/ background-image:url("../images/head-3-new1.png"); /*background-size: cover;*/ } /*.home #header{ background-image: none; }*/ .header-top{ background:#8CBE45; } .wrapper { background:#FFFFFF; margin:0 auto; width: 100%; } .ie8 #header { border-bottom: 1px solid #e9e9e9; } .top-info { padding:5px 10px 0; color:#fff; line-height:28px; } .top-info span { font:600 12px/28px "open sans",Helvetica, Arial, sans-serif; padding-right: 15px; } .top-info span i { font-size: 13px; margin-right: 5px; } .dropdown-items{ background:#585858; list-style: outside none none; margin: 0; padding: 0; color:#fff; float: left; padding:0 17px; } .dropdown-items li{ display: inline-block; float: left; } .dropdown-items .dropdown-menu li{ border-left: 1px solid #fff; display:block; float:none; } .dropdown { position: relative; } .account-dropdown .dropdown-menu li a{ padding:10px; } .site-language .dropdown .language-dropdown{ display: block; padding: 8px 10px; color: #fff; } .site-language .dropdown .dropdown-menu li{ border-width: 0; display: block; float: none; } .site-language .dropdown .dropdown-menu li a{ padding: 10px; } .site-language .dropdown .dropdown-menu li li:last-child { border-right: 1px solid hsl(0, 0%, 94%); } .my-account .dropdown .account-dropdown{ display: block; padding:22px 10px; color: #fff; } .my-account .dropdown .account-dropdown .caret{ border-top: 4px solid #fff; border-left: 4px solid transparent; border-right: 4px solid transparent; margin-left: 5px; position: relative; top: -2px; display: inline-block; } .site-language .dropdown .dropdown-menu li { border-width: 0; display: block; float: none; } .shop-cart .cart-dropdown{ color: hsl(0, 0%, 100%); display: block; font-size: 17px; line-height: 18px; padding:22px 10px; position: relative; } .shop-cart .cart-dropdown .cart-items{ border:1px solid; border-radius: 18px; color:hsl(0, 0%, 100%); font-size: 10px; text-align: center; width: 18px; height: 18px; line-height: 16px; position: absolute; top: 10px; right: 0px; } .shop-cart .dropdown-menu{ min-width: 250px; } .dropdown-menu > li > a{ display: block; padding:10px 22px; font-size: 14px; color: #333; } .dropdown-items li .shop-cart .cart-product { border-bottom: 1px dashed hsl(0, 0%, 89%); padding: 8px 20px 8px 10px; position: relative; width: 100%; } .dropdown .dropdown-menu{ border-radius:0; border:none; margin:0; padding:0; left: auto; right: 0; } .dropdown-items li .shop-cart .cart-product .left-data{ float: left; margin-right: 10px; } .dropdown-items li .shop-cart .cart-product .right-data strong { font-size: 14px; font-weight: 400; margin-bottom: 10px; } .dropdown-items li .shop-cart .cart-product .right-data strong a{ background-color: hsla(0, 0%, 0%, 0); color: hsl(195, 2%, 38%); } .dropdown-items li .shop-cart .cart-product .right-data p { color:#8CBE45; font-size: 13px; margin-bottom: 7px; margin-top: 7px; } .dropdown-items li .shop-cart .cart-product .right-data .remove-item{ border-radius: 25px; color: hsl(0, 88%, 65%); display: block; height: 25px; line-height: 25px; position: absolute; right: 10px; text-align: center; top: 10px; transition: background-color 0.3s ease 0s, color 0.3s ease 0s; width: 25px; } .dropdown-items li .shop-cart .cart-subtotal { color: hsl(195, 2%, 38%); font-size: 14px; padding: 10px 15px 5px; text-align: right; } .dropdown-items li .shop-cart .cart-buttons { padding: 20px 16px 10px; } .dropdown-items li .shop-cart .cart-buttons a { display: inline-block; padding:3px 20px; color:#fff; border-radius:0; } .dropdown-items li .shop-cart .cart-buttons a:hover, .dropdown-items li .shop-cart .cart-buttons a.grey:hover{ background:#8CBE45; color:#fff; } .dropdown-items li .shop-cart .cart-buttons a.grey{ background:none; color:#5e6162; } /* Animated-Search ====================================*/ .search-bar { float: right; } .search-bar .search-label { background: inherit; border-radius: 5px; display: block; height: 29px; overflow: hidden; } .search-bar .search-label .search-button, .search-bar .search-label .search-input { background: transparent; border: 0 none; height: 30px; margin: 0; outline: medium none; padding: 0; } .search-bar label{margin: 0} .search-bar .search-label .search-button i{ font-size: 16px; font-weight: 500; color: #fff; } .search-bar .search-label .search-button { background: inherit; color: #696969; height: 30px; transition: all 0.6s ease 0s; width: 30px; } .search-bar .search-label .search-input { background: #eee ; color: #666; font-weight: normal; width: 0; transition: width 0.6s ease 0s; } .search-exp .search-bar .search-label .search-button{ background: #eee; color: #c9c9c9; } .search-exp .search-bar .search-label .search-input{ width: 150px; } /* Logo ====================================*/ #menu-bar{ position: relative; z-index: 999; } #logo { text-align: center; margin:37px 0; } #logo img{ width:100%; height:auto; } #logo > h1 { margin:0; display:inline-block; } .content{ padding:30px 0 60px; position: relative; } .sub_content { padding: 30px 0; } /* page-head Title ====================================*/ #page-head { padding:40px 0; text-align:center; } .page_title h2 { color: #fff; display:inline-block; font-size:24px; font-weight: 600; margin: 0 0 5px; padding: 7px 15px; text-transform: uppercase; } /* Breadcrumbs ====================================*/ #breadcrumbs{ background:transparent; display:inline-block; padding: 3px 10px; } #breadcrumbs ul { font-size: 12px; padding:0 5px 0 0; margin: 0; } #breadcrumbs ul li { display: inline-block; padding: 0 11px 1px 0; margin: 0 0 0 5px; background: url(../images/breadcrumbs.png) no-repeat 100% 50%; color: #fff; } #breadcrumbs ul li a { color: #fff; } #breadcrumbs ul li:last-child { background: none;padding:0; } /* =================================================================== */ /* 3. NAVIGATION ====================================================================== */ /* Add some SmartMenus required styles not covered in Bootstrap 3's default CSS. These are theme independent and should work with any Bootstrap 3 theme mod. */ .navbar{ background: transparent; display: table; margin: 0 auto; } .navbar-collapse.collapse { float: left; } .navbar-nav ul { width:100%; min-width:187px!important; padding:0; } .navbar-nav > li { padding:0; } .navbar-toggle{ background:#303436; border:none; padding:10px 10px; border-radius:3px; margin-top:5px; } .navbar .navbar-toggle:hover, .navbar .navbar-toggle:focus{ background:#303436; } .navbar .navbar-toggle .icon-bar{ background-color:#fff; height:3px; } .navbar{ margin-bottom: 0; min-height:35px; border:none; padding: 0; } /* sub menus arrows */ /* .navbar-nav .sub-arrow, .navbar-nav .collapsible .sub-arrow { position:static; margin-top:0; margin-right:0; margin-left:6px; display:inline-block; width:0; height: 0; overflow:hidden; vertical-align:middle; border-top:4px solid; border-right:4px dashed transparent; border-bottom:4px dashed transparent; border-left:4px dashed transparent; } .navbar-nav .nav-link .sub-arrow{ display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; font-size: 12px; width:8px; height: 100%; line-height: 4px; color: #fff; border-width: 0; } .navbar-nav .nav-link .sub-arrow:before { content: "\f107"; } .navbar-nav:not(.sm-collapsible) .nav-link .sub-arrow { width: auto; height: auto; border: none; } .navbar-nav ul .sub-arrow { position:absolute; right:0; margin-top:6px; margin-right:15px; border-top:4px dashed transparent; border-bottom:4px dashed transparent; border-left:4px solid; } */ .navbar-light .navbar-nav .nav-link{ color: #fff; padding: 25px 12px; } .navbar-nav ul a.has-submenu { padding-right:30px; } .navbar .navbar-collapse, .navbar .navbar-form{ border: none; background: #282828; padding: 0; } /* scrolling arrows for tall menus */ .navbar-nav span.scroll-up, .navbar-nav span.scroll-down { position:absolute; display:none; visibility:hidden; height:20px; overflow:hidden; text-align:center; } .navbar-nav span.scroll-up-arrow, .navbar-nav span.scroll-down-arrow { position:absolute; top:-2px; left:50%; margin-left:-8px; width:0; height:0; overflow:hidden; border-top:7px dashed transparent; border-right:7px dashed transparent; border-bottom:7px solid; border-left:7px dashed transparent; } .dropdown-menu.sm-nowrap{ display: none; left: 0; margin-left: 186px; margin-top: -42px; max-width: 20em; min-width: 10em; top: auto; width: auto; } .navbar-nav span.scroll-down-arrow { top:6px; border-top:7px solid; border-right:7px dashed transparent; border-bottom:7px dashed transparent; border-left:7px dashed transparent; } .navbar .navbar-nav li a{ color:#555; text-transform:uppercase; font-size: 15px; font-weight: 700; line-height: 15px; } .navbar .navbar-nav > li:first-child{ border-left:none; } .navbar-nav > li > a:hover,.navbar-nav > li > a:focus,.navbar-nav > li.active > a, .navbar .navbar-nav > .active > a, .navbar .navbar-nav > .active > a:hover, .navbar .navbar-nav > .active > a:focus, .navbar .navbar-nav > .show > a, .navbar .navbar-nav > .show > a:hover, .navbar .navbar-nav > .show > a:focus, .navbar .navbar-nav .show .dropdown-menu > .active > a, .navbar .navbar-nav .show .dropdown-menu > .active > a:hover, .navbar .navbar-nav .show .dropdown-menu > .active > a:focus, .navbar .navbar-nav .show .dropdown-menu > .disabled > a, .navbar .navbar-nav .show .dropdown-menu > .disabled > a:hover, .navbar .navbar-nav .show .dropdown-menu > .disabled > a:focus { background:#8CBE45 !important; color:#fff!important; } .nav.navbar-nav > li > a{ padding:25px; display: block; } .nav.navbar-nav > li.active > a{ border: none; padding:25px; } /* add more indentation for 2+ level sub in collapsible mode - Bootstrap normally supports just 1 level sub menus */ .navbar-nav .collapsible ul .dropdown-menu > li > a, .navbar-nav .collapsible ul .dropdown-menu .dropdown-header { padding-left:35px; } .navbar-nav .collapsible ul ul .dropdown-menu > li > a, .navbar-nav .collapsible ul ul .dropdown-menu .dropdown-header { padding-left:45px; } .navbar-nav .collapsible ul ul ul .dropdown-menu > li > a, .navbar-nav .collapsible ul ul ul .dropdown-menu .dropdown-header { padding-left:55px; } .navbar-nav .collapsible ul ul ul ul .dropdown-menu > li > a, .navbar-nav .collapsible ul ul ul ul .dropdown-menu .dropdown-header { padding-left:60px; } /* fix SmartMenus sub menus auto width (subMenusMinWidth and subMenusMaxWidth options) */ .navbar-nav .dropdown-menu { border: 0;} .navbar-nav .dropdown-menu > li > a { white-space:normal; font-size: 13px; padding:12px 20px; border-bottom:1px solid #e4e4e4; } .navbar-nav .dropdown-menu > li > a:hover { color:#fff; background:#8CBE45 ; } .navbar-nav ul.sm-nowrap > li > a { white-space:nowrap; } /* The following will make the sub menus collapsible for small screen devices (it's not recommended editing these) */ .navbar-nav .collapsible ul {display:none;position:static !important;top:auto !important;left:auto !important;margin-left:0 !important;margin-top:0 !important;width:auto !important;min-width:0 !important;max-width:none !important;} .navbar-nav .collapsible ul.sm-nowrap > li > a {white-space:normal;} .navbar-nav .collapsible iframe{display:none;} /* disable Bootstrap 3's global box-sizing:border-box; for the menus as it doesn't play nice with SmartMenus */ ul.sm li *,ul.sm li *:before,ul.sm li *:after{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;} .nav .show > a, .nav .show > a:hover, .nav .show > a:focus { border-color:transparent!important; } .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus{ background-color:#fff ; } /*------------Animation-CSS-------------*/ .navbar-nav > li:hover > ul{ /* display: block;*/ -moz-animation: fadeInUp .4s ease-in; -webkit-animation: fadeInUp .4s ease-in ; animation: fadeInUp .4s ease-in; } .navbar-nav > li > ul.dropdown-menu li:hover ul{ /* display:block;*/ -moz-animation: fadeInUp .5s ease-in ; -webkit-animation: fadeInUp .5s ease-in ; animation: fadeInUp .5s ease-in; } /*--------Animation_Hover_Effect_CSS---------------*/ @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } /*------------Hover_Effect_CSS------------*/ .navbar .navbar-nav > li > a { overflow: hidden; /*height: 1em;*/ height: 64px; padding:25px 12px; color: #fff; } .navbar .navbar-nav > li > a > span.data-hover{ position: relative; display: inline-block; height: 3em; color: #fff; margin: -12px -29px; padding: 11px 30px; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; } .navbar .navbar-nav > li > a > span.data-hover::before { position: absolute; color: #fff; right:100%; margin: -62px 6px; padding: 62px 24px; content: attr(data-hover); -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); transform: translate3d(0,0,0); transition:all 0.3s ease-in-out 0s; _webkit-transition:all 0.3s ease-in-out 0s; _moz-transition:all 0.3s ease-in-out 0s; } .navbar .navbar-nav > li:hover > a > span.data-hover, .navbar .navbar-nav > li:focus > a > span.data-hover{ -webkit-transform: translateX(100%); -moz-transform: translateX(100%); transform: translateX(100%); transition:all 0.3s ease-in-out 0s; _webkit-transition:all 0.3s ease-in-out 0s; _moz-transition:all 0.3s ease-in-out 0s; } /* ===================================================== */ /* 4. FOOTER & FOOTER WIDGETS */ /* ===================================================== */ .footer_bottom{ background:#292F38; padding:20px 0; color:#fff; } .footer{ background:#323A45; padding:30px 0; position: relative; color:#fff; } /* Footer Widgets ====================================*/ .widget_content{ margin-top: 10px; } .widget_content > p { font-family: Pt Sans,Helvetica, Arial, sans-serif; font-size: 14px; } .copyright { color: #AAAAAA; font-size: 12px; line-height: 40px; margin: 0; } .copyright a{ color:#fff; text-decoration:none; } .copyright a:hover{ color:#aaa; } .sidebar .widget h4 span { color:#fff; /*color:inherit;*/ } /* Twitter Feed Widget ====================================*/ .tweet_list { padding: 0; position: relative; margin:0 auto; list-style:none; } .tweet_list li { color: #fff; margin-bottom: 5px; } .tweet_list li::before { font-family: fontawesome; content: ""; font-size: 16px; padding-right: 8px; position:absolute; } .tweet_list li p { line-height: 20px; overflow: hidden; margin-left:26px; } .tweet_list li p a { color: #fff; font-weight: 700; font-size: 12px } .tweet_content .time { font-size: 12px; color:#E3E3E3; font-family: Lato,Helvetica, Arial, sans-serif; font-weight: bold; padding-left: 25px; } /* Contact Widget ====================================*/ .contact-details-alt{padding:0;} .contact-details-alt li{list-style:none;} .contact-details-alt li p strong { color:#fff; float: left; margin: 0;font-size:12px;width:25%;} .contact-details li p strong { color:#666; float: left; margin: 0 5px 5px 0; } .contact-details-alt li { margin: 0 0 5px 0; } .contact-details p, .contact-details li, .contact-details a {color: #666;} .contact-details-alt p { line-height: 18px; width: 100%; margin:0; } .contact-details-alt p a { color: #FFFFFF; font-weight: 700; font-size:12px; } .contact-details-alt p a:hover { color: #919191; } .contact-details-alt li i { float: left; font-size: 12px; margin: 2px 0 0 0 ; width: 15px; } .widget_info_contact{padding:0;margin-top:20px;} .widget_info_contact li{list-style:none;} .widget_info_contact li p strong { color:#666; float: left; margin: 0 5px 5px 0;font-size: 12px;width:20%;} .widget_info_contact li { margin: 0 0 5px 0; } .widget_info_contact p { margin: 0 0 0 20px; line-height: 18px; overflow:hidden; } .widget_info_contact p a { color: #666; font-weight: 600; font-size: 12.5px; } .widget_info_contact p a:hover { color: #919191; } .widget_info_contact li i { float: left; margin: 1px 0 0 0; } /* Social Widget ====================================*/ .widget_social { list-style: none outside none; margin: 0 auto; overflow: hidden; padding: 0; } .widget_social li { float: left; background: none !important; } .widget_social li a { color: #666; display:block; height: 46px; text-align: center; width: 46px; border-radius:50%; -webkit-border-radius: 50%;-moz-border-radius: 50%; -webkit-transition: 0.25s; -moz-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s; } .widget_social li a i { font-size: 22px; line-height: 46px; margin-right: 0; float: none; } .widget_social li a.fb:hover {color: #2f5a9a;} .widget_social li a.twtr:hover {color: #3abdd1;} .widget_social li a.gmail:hover {color: #363636;} .widget_social li a.pinterest:hover{color: #d13a3a;} .widget_social li a.rss:hover {color: #f15200;} .widget_social li a.tumblr:hover {color: #203550;} .widget_social li a.flickrs:hover {color: #ff0084;} .widget_social li a.instagram:hover {color: #507ea4;} .widget_social li a.linkedin:hover {color: #0072b2;} .widget_social li a.skype:hover {color: #00aaf1;} .widget_social li a.youtube:hover {color: #ff3330;} .widget_social li a.dribbble:hover { color: #f973a4;} /* =================================================================== */ /* 5. Sidebar & Sidebar Widgets ====================================================================== */ .sidebar .widget { display: block; float: left; height: 100%; margin-bottom: 30px; position: relative; width: 100%; } .sidebar .widget ul.list_style{ padding: 0px; margin: 0px; float: left; width: 100%; } .sidebar .widget ul.list_style li{ list-style:none; border-bottom:1px solid #f2f2f2; font-size: 12px; line-height: 20px; padding: 8px 2px 8px 12px; } .sidebar .list_style li:before { font-family: FontAwesome; content: "\f105"; font-size: 13px; position: absolute; left: 0; top: 8px; } .sidebar .widget ul.list_style li a { color: #777; font-size: 13px; line-height: 20px; } .sidebar .widget ul.list_style li a:hover { color:#8CBE45; } /* Site Search */ /*------------------------------------------------------*/ .site-search-area { margin: 0px; padding: 0 0 30px; } #site-searchform { margin: 0; padding: 0; } #site-searchform #s{ border: 1px solid #eee; background-color: #fff; width: 82%; height:41px; padding:5px 10px 5px 10px; color: #999; float: left; font: normal 12px "Open sans",Helvetica, Arial, sans-serif; } #site-searchform #s:focus{ border: 1px solid #E74C3C; background-color: #fff; width: 82%; height:41px; padding:5px 10px 5px 10px; color: #999; float: left; font: normal 12px "Open sans",Helvetica, Arial, sans-serif; } #site-searchform #searchsubmit{ float: left; width:18%; height:41px; cursor:pointer; text-indent:-5555em; line-height:100; overflow:hidden; background: #8CBE45 url(../images/search-icon.png) no-repeat center 14px; border:0; transition:all 0.4s ease-in-out; -webkit-transition:all 0.4s ease-in-out; -moz-transition:all 0.4s ease-in-out; -ms-transition:all 0.4s ease-in-out; -o-transition:all 0.4s ease-in-out; } #site-searchform #searchsubmit:hover{ background: #659524 url(../images/search-icon.png) no-repeat center 14px; } .gray_border { width: 100%; height: 10px; margin-bottom: 10px; border-bottom: 1px solid #DCDCDC; } ul.tags { padding: 0; margin: 5px 0 15px; float: left; } .tags li { float: left; padding: 0px; margin: 0px 5px 5px 0px; list-style-type: none; line-height: 25px; } .tags li a { border: 1px solid #f2f2f2; color: #909090; float: left; font-size: 12px; padding: 3px 8px; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } .tags li a:hover { background-color: #8CBE45; color: #fff; } /* Recent Posts Widget ====================================*/ .links{ margin:0; padding:0; } .links li{ list-style:none; } .links li::before { content: ""; font-family: FontAwesome; font-size: 13px; margin-right: 5px; } .links li a { color: #fff; font-size: 13px; font-weight: 600; line-height: 22px; } .footer li a:hover{ color:#8CBE45; } .links li span { display: block; color: #919191; font-size: 12px; margin-bottom: 6px; } /* ========================================================== */ /* 6. PORTFOLIO/PROJECTS */ /* ========================================================== */ .isotope-item { z-index: 2; } .isotope-hidden.isotope-item { pointer-events: none; z-index: 1; } /* Isotope CSS3 transitions */ .isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; } .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: top, left, opacity; transition-property: transform, opacity; } /* Disabling Isotope CSS3 transitions */ .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; } /* Disable CSS transitions for containers with infinite scrolling */ .isotope.infinite-scrolling { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } #portfolio{ width:100%; padding-bottom:120px; position:relative; z-index:9; } #filter { margin: 0 auto 25px 15px; overflow: hidden; padding: 5px 0 0; position: relative; text-align: left; width: auto; z-index: 10; } #filter li { float: left; list-style: none outside none; margin: 0 1px 10px; } #filter li a{ color:#fff; padding:10px 20px; font-size:12px; position: relative; overflow:hidden; line-height: 12px; font-family: Arial, Helvetica, sans-serif; background:#8CBE45; -moz-transition: all .50s ease-in-out; -webkit-transition: all .50s ease-in-out; transition: all .50s ease-in-out; outline:none; text-decoration: none; } #filter li.selected a, #filter li a:hover{ background:#659524; -webkit-transition: all .20s ease-in-out; -moz-transition: all .20s ease-in-out; -ms-transition: all .20s ease-in-out; -o-transition: all .20s ease-in-out; transition: all .20s ease-in-out; } #list{ margin-bottom:30px;padding: 0; } .list_item{ margin-bottom:3%; overflow: hidden; } /* Portfolio Image ====================================*/ figure { position: relative; overflow: hidden; margin: 0; text-align: center; cursor: pointer; } figure img { position: relative; display: block; min-height: 100%; max-width: 100%; opacity: 0.8; } figure figcaption { padding: 2em; color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; } figure figcaption h5{ color: #fff; } figure figcaption::before, figure figcaption::after { pointer-events: none; } figure figcaption { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } figure h5, figure p { margin: 0; } figure h5 { word-spacing: -0.15em; font-weight: 600; font-size: 115%; } .large-images figure h5 { font-size: 155%; } .small-images figure h5, .owl-carousel .item-description h5{ font-size: 100%; } .list_item figure p { letter-spacing: 1px; font-size: 85%; } .small-images figure p, .owl-carousel .item-description p{ font-size: 75%; } .large-images figure p { font-size: 95%; } /* Bubba Hover Effect on Portfolio Image ===========================================*/ .box{ margin: 0 10px; } figure.effect-bubba { /*background: #8CBE45;*/ } figure.effect-bubba img{ width: 100%; opacity: 1; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; } figure.effect-bubba:hover img{ /*opacity: 0.4;*/ } /* Medium Image Border */ figure.effect-bubba figcaption::before, figure.effect-bubba figcaption::after { position: absolute; top: 25px; right: 25px; bottom: 25px; left: 25px; content: ''; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; } /* Small Image Border */ .small-images figure.effect-bubba figcaption::before, .small-images figure.effect-bubba figcaption::after, .owl-carousel figure.effect-bubba figcaption::before, .owl-carousel figure.effect-bubba figcaption::after { top: 15px; right: 15px; bottom: 15px; left: 15px; } /* Large Image Border */ .large-images figure.effect-bubba figcaption::before, .large-images figure.effect-bubba figcaption::after{ top: 30px; right: 30px; bottom: 30px; left: 30px; } figure.effect-bubba figcaption::before{ border-top: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: scale(0,1); transform: scale(0,1); } figure.effect-bubba figcaption::after{ border-right: 1px solid #fff; border-left: 1px solid #fff; -webkit-transform: scale(1,0); transform: scale(1,0); } figure.effect-bubba h5{ padding-top: 30%; opacity: 0; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(0,-20px,0); transform: translate3d(0,-20px,0); } figure.effect-bubba p { padding: 6px 2.5em 20px; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(0,20px,0); transform: translate3d(0,20px,0); } .large-images figure.effect-bubba p{ padding: 13px 2.5em 15px; } .small-images figure.effect-bubba p{ padding: 2px 2.5em 15px; } figure.effect-bubba:hover figcaption::before, figure.effect-bubba:hover figcaption::after{ opacity: 1; -webkit-transform: scale(1); transform: scale(1); } figure.effect-bubba:hover h5, figure.effect-bubba:hover p{ opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } figure .option{ text-align: center; position: absolute; top: 33%; z-index: 1; width: 100%; transform: translate3d(0px, -20px, 0px); transition: transform 0.35s ease 0s; } figure .option .fa { background: rgba(256, 256, 256, 0.9); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3); box-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; line-height: 40px; font-size: 16px; text-align: center; text-decoration: none; width: 40px; height: 40px; position: relative; opacity: 0; -webkit-transition: all 0.3s , color 0.1s 0.3s; -moz-transition: all 0.3s , color 0.1s 0.3s; -o-transition: all 0.3s , color 0.1s 0.3s; transition: all 0.3s , color 0.1s 0.3s; color: rgba(50, 50, 50, 0.9); } .small-images figure .option .fa , .owl-carousel figure .option .fa { font-size: 14px; width: 32px; height: 32px; line-height: 32px; } figure .option .fa:hover { color:#8CBE45; } figure .option .fa:hover { background: rgba(256,256,256,1); } figure .option .fa-search { left: -45px; } figure .option .fa-link { left: 45px; } figure:hover .option .fa-link, figure:hover .option .fa-search { left: 0px; opacity: 1; } /* MASONRY PORTFOLIO STYLES ==========================================-*/ .masonry_wrapper { overflow:hidden; margin:0; } .small-images .masonry_wrapper figure.effect-bubba h5{ padding-top: 24%; } .medium-images .masonry_wrapper figure.effect-bubba h5{ padding-top: 26%; } .large-images .masonry_wrapper figure.effect-bubba h5{ padding-top: 30%; } .large-images .masonry_wrapper figure.effect-bubba p{ padding: 8px 2.5em 15px; } .medium-images .masonry_wrapper figure.effect-bubba p{ padding: 3px 2.5em 20px; } .small-images .masonry_wrapper figure.effect-bubba p{ padding: 0 2.5em 15px; } .mixed-container .item { padding:10px 5px; margin:0; height: auto !important; } /* Portfolio Single Page ====================================*/ .portfolio_single{ padding:30px 0; } .portfolio_single .widget_title h4 span { background:#fff; } .project_details { background-color:#fff; overflow:hidden; } .project_detail_slider {margin-bottom: 30px;} .project_desc p{margin-bottom:20px;} .project_desc h6, .project_details h6 { font-size: 20px; margin-top: 5px; } .project_details .details li { border-bottom: 1px solid #F2F2F2; color: #A3A3A3; font-size: 12px; line-height: 18px; padding: 8px 0; } .project_details .details{ margin: 0; padding:0; } .project_details .details li span { color: #686868; display: block; float: left; font-weight: bold; height: 20px; position: relative; width: 30%; } .project_details .details li a { color: #A3A3A3; font-size: 12px; } .project_details .details li a:hover {color: #e74c3c;} .project_detail_box {margin-bottom: 30px;} .project_description, .project_details{ margin-bottom: 30px; } .arrow-left, .arrow-right{ width: 23px; height: 23px; display: inline-block; float: left; background-color: #f2f2f2; color: #666; -webkit-transition: all 150ms ease-in-out; -moz-transition: all 150ms ease-in-out; -o-transition: all 150ms ease-in-out; -ms-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; } .arrow-left i, .arrow-right i{ font-size: 14px; display: block; line-height:16px; padding-top: 4px; text-align: center; } .arrow-left.active, .arrow-right.active{ background-color: #bdc3c7; color: #f2f2f2; cursor: pointer; } .arrow-left.active:hover, .arrow-right.active:hover { background-color: #777;} /* ======================================================================== */ /* 7. BLOG STYLING /* ======================================================================== */ .blogTitle { margin: auto auto 10px; position: relative; } .blogTitle > a h2 { font-size: 18px; margin-bottom: 5px; margin-top:0; color: #555; font-weight: 600; text-decoration: none; -webkit-transition: 0.25s;-moz-transition: 0.25s;-o-transition: 0.25s;transition: 0.25s; } .blogContent > p { font-size: 13px; line-height: 20px; } .blogTitle > a:hover h2{color: #8CBE45;} .blogTitle span { color: #777; cursor: pointer; font-size: 12px; line-height: 24px; } .blogTitle span i { padding-right: 5px; font-size: 12px; } .blogTitle span:hover i { color: #777; } .blogMeta { display: inline-block; padding: 5px 0 0; position: relative; } .blogMeta a { color: #777; font-size: 12px; line-height: 20px; margin-right: 15px; text-decoration: none; } .blogMeta a:hover, .blogTitle span:hover{color: #8CBE45} .blogMeta a i{ padding-right: 5px; font-size: 14px; } .blogMeta a:hover i{color: #777;} .blogDetail { border: 1px solid #f2f2f2; display: inline-block; padding: 15px; position: relative; } .blogPic {position: relative;} .blogPic > img { width: 100%; } .blog-hover > a { display: block; left: 45%; position: absolute; top: 35%; } .blogPic .blog-hover{ background:rgba(255,255,255, 0.5); height: 100%; left: 0; opacity: 0; position: absolute; top: 0; -webkit-transition: all 120ms ease-in-out;-moz-transition: all 120ms ease-in-out;-o-transition: all 120ms ease-in-out;-ms-transition: all 120ms ease-in-out;transition: all 120ms ease-in-out; width: 100%; } .blogPic:hover .blog-hover{opacity: 1;} .blogPic .blog-hover .icon { background: #8CBE45; border-radius: 50% 50% 50% 50%; display: block; height: 40px; margin: 25% auto 0; position: relative; -webkit-transition: all 200ms ease-in-out;-moz-transition: all 200ms ease-in-out;-o-transition: all 200ms ease-in-out;-ms-transition: all 200ms ease-in-out;transition: all 200ms ease-in-out; color: #f2f2f2; width: 40px; text-align: center; font-size: 16px; line-height: 40px; top: 50%; } .blogPic .blog-hover .icon:hover{ background:#555; } .blogPic:hover .blog-hover .icon{ top: 0; } .blogPic .blog-hover p { font-size: 20px; text-align: center; text-transform: uppercase; } .blog{ padding:50px 0; } .blog_large .post, .blog_single .post{ padding-bottom:50px; margin-bottom:50px; border-bottom:1px solid #f2f2f2; } .blog_large .post_img, .blog_single .post_img { margin-bottom: 25px; position: relative; } .blog_large .post_img img, .blog_single .post_img img { height: auto; max-width: 100%; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -moz-opacity: 1; -khtml-opacity: 1; -webkit-transition: all 150ms ease-in-out; -moz-transition: all 150ms ease-in-out; -o-transition: all 150ms ease-in-out; -ms-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; } .blog_large .post_img:hover img, .blog_single .post_img:hover img{ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; } .blog_large .post_video{ margin-bottom:25px; position: relative; } .blog_large .post_video iframe{ max-width:100%; max-height:100%; height:320px; width:100%; border:none; box-shadow: none; } .blog_large .post_date, .blog_single .post_date{ float: left; height: 0; text-align: center; } .blog_large .post_date span, .blog_single .post_date span{ display: block; } .blog_large .day, .blog_single .day { background:#8cbe45; color: #fff; font-size: 22px; font-weight: 600; padding: 10px; } .blog_large .month, .blog_single .month { background:#555; color: #fff; padding: 4px 13px 6px; } .blog_large .post_content, .blog_single .post_content { margin: 0 0 0 70px; } .blog_large .post_meta .metaInfo, .blog_single .post_meta .metaInfo { font-size: 0.9em; margin-bottom: 7px; } .blog_large .post_meta .metaInfo > span, .blog_single .post_meta .metaInfo > span { display: inline-block; padding-right: 15px; color:#777; } .blog_large .post_meta .metaInfo > span > a, .blog_single .post_meta .metaInfo > span > a { color: #777; font-family: lato,Helvetica, Arial, sans-serif; font-size: 12.4px; } .blog_large .post_meta .metaInfo > span > a:hover, .blog_single .post_meta .metaInfo > span > a:hover{color:#8CBE45;} .blog_large .post_meta .metaInfo, .blog_single .post_meta .metaInfo { font-size: 0.95em; margin: 0 auto; padding: 0 0 20px; } .blog_large .post_meta .metaInfo i, .blog_single .post_meta .metaInfo i { margin-right: 3px; color:#777; } .blog_large .post_meta h2, .blog_single .post_meta h2 { margin-bottom: 10px; margin-top: 0; } .blog_large .post_meta h2 a, .blog_single .post_meta h2 a { font-size: 24px; font-weight: 600; color:#555; line-height: 34px; text-transform:capitalize; } .blog_large .post_meta h2:hover a, .blog_single .post_meta h2:hover a { color:#8cbe45; } .blog_large .post_content > p, .blog_single .post_content > p { margin-bottom: 20px; } /* BLOG MEDIUM /* ==========================*/ .blog_medium .post:after { clear: both; content: " "; display: block; visibility: hidden; } .blog_medium .post{ padding-bottom:50px; margin-bottom:50px; border-bottom:1px solid #f2f2f2; } .blog_medium .post_img { float: left; margin-bottom: 0; margin-right: 20px; position: relative; width: 35%; } .blog_medium .post_img img { height: auto; max-width: 100%; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -moz-opacity: 1; -khtml-opacity: 1; -webkit-transition: 0.25s; -moz-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s; } .blog_medium .post_img:hover img{ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; } .blog_medium .post_video{ margin-bottom:25px; position: relative; } .blog_medium .post_video iframe{ max-width:100%; max-height:100%; height:320px; width:100%; border:none; box-shadow: none; } .blog_medium .post_date { float: left; margin-right: 20px; position: relative; text-align: center; } .blog_medium .post_date span{ display: block; } .blog_medium .day { background:#8cbe45; color: #fff; font-size: 22px; font-weight: 600; padding: 5px 10px; } .blog_medium .month { background:#555; color: #fff; padding: 2px 13px 4px; } .blog_medium .post_content { float: left; margin: 0; width: 50%; } .blog_medium .post.no_images .post_content { max-width: 88%; width: auto; } .blog_medium .post_meta .metaInfo { font-size: 0.9em; margin-bottom: 7px; } .blog_medium .post_meta .metaInfo > span { display: inline-block; padding-right: 15px; color:#777; } .blog_medium .post_meta .metaInfo > span > a { color: #777; font-family: lato,Helvetica, Arial, sans-serif; font-size: 12.4px; } .blog_medium .post_meta .metaInfo > span > a:hover{ color:#8cbe45; } .blog_medium .post_meta .metaInfo { font-size: 0.95em; margin: 0 auto; padding: 0 0 20px; } .blog_medium .post_meta .metaInfo i { margin-right: 3px; color:#777; } .blog_medium .post_meta h2 { margin-bottom: 10px; margin-top: 0; } .blog_medium .post_meta h2 a { font-size: 24px; font-weight: 600; color:#555; line-height: 34px; text-transform:capitalize; } .blog_medium .post_meta h2:hover a { color:#8cbe45; } .blog_medium .post_content > p { margin-bottom: 20px; } /* Masonry Blog Style ================================================== */ .masonry_wrapper_blog .blog-item { background: #f1f1f1 !important; padding:20px !important; } .masonry_wrapper_blog .metaInfo{ margin-top:25px; padding: 0; text-transform: uppercase; font-size:12px; font-weight: 600; } .masonry_wrapper_blog .metaInfo a{color: #555; padding:0;} .masonry_wrapper_blog .metaInfo a:hover, .blog-item > span a:hover, .blog-title a:hover{ color:#8CBE45; } .blog-title > h2{margin: 15px 0;} .blog-title a { font-size: 22px; line-height: 25px; font-weight: 600; color: #555; text-transform: capitalize; } .blog-desc { padding-bottom: 15px; } .masonry_blog .pagination{margin:50px 0 20px;} .pagination{ margin-top: 20px; } /* SINGLE POST =================================== */ .about_author { background: #f2f2f2; overflow: hidden; position: relative; } .author_desc { background:#8CBE45; float: left; height: 100%; min-height: 100%; overflow: hidden; padding: 20px 0; position: absolute; text-align: center; width: 25%; } .author_desc > img{ background:#fff; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; margin-bottom: 20px; padding: 4px; max-width: 80px; max-height:80px; } .about_author h3{ margin: 0 auto; } .author_name > a { color: #555333; font-size: 16px; font-weight: bold; } .author_name > a:hover {color:#8cbe45;} .author_bio { display: block; float: right; padding: 20px; position: relative; width: 75%; } .author_det { margin-bottom: 0; } .author_bio > h5 { font-size: 12px; margin: 0 auto 10px; } .author_bio > h5 a{color:#8cbe45;} /* Post Share Article ================================================== */ .shares { background: #f2f2f2; list-style: none; overflow: hidden; margin: 50px 0 0;padding:0;} .shares li { float: left; border-right: 1px solid #fff; } .shares li.shareslabel h3 {padding: 8px 20px; font-weight: 600; text-transform: uppercase; font-size: 18px;margin: 0;} .shares li a { display: block; width: 45px; height: 46px; background-repeat: no-repeat; background-position: 7px 7px; -webkit-transition: all 150ms ease-in-out; -moz-transition: all 150ms ease-in-out; -o-transition: all 150ms ease-in-out; -ms-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out;} .shares li a:hover { background-position: 7px -58px; background-color: #8CBE45; } .shares li a:active { background-color: #999; } .shares li a.twitter { background-image: url(../images/social/twitter.png); } .shares li a.facebook { background-image: url(../images/social/facebook.png); } .shares li a.gplus { background-image: url(../images/social/gplus.png); } .shares li a.pinterest { background-image: url(../images/social/pinterest.png); } .shares li a.yahoo { background-image: url(../images/social/yahoo.png); } .shares li a.linkedin { background-image: url(../images/social/linkedin.png); } /* About Author ====================================*/ .author_social { list-style: none outside none; margin: 0 auto; overflow: hidden; padding: 0; text-align:center; z-index:9999; } .author_social li { background: none !important; display:inline-block } .author_social li a { color: #444; display:block; height: 30px; text-align: center; width: 30px; border-radius:50%; -webkit-border-radius: 50%;-moz-border-radius: 50%; -webkit-transition: 0.25s; -moz-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s; background:#f9f9f9; } .author_social li a i { font-size: 14px; line-height: 30px; margin-right: 0; float: none; } .author_social li a.fb:hover {background: #2f5a9a; color:#fff;} .author_social li a.twtr:hover {background: #3abdd1; color:#fff;} .author_social li a.gmail:hover {background: #363636; color:#fff;} .author_social li a.pinterest:hover{background: #d13a3a; color:#fff;} .author_social li a.rss:hover {background: #f15200; color:#fff;} .author_social li a.tumblr:hover {background: #203550; color:#fff;} .author_social li a.flickr:hover {background: #ff0084; color:#fff;} .author_social li a.instagram:hover {background: #507ea4; color:#fff;} .author_social li a.linkedin:hover {background: #0072b2; color:#fff;} .author_social li a.skype:hover {background: #00aaf1; color:#fff;} .author_social li a.youtube:hover {background: #ff3330; color:#fff;} .author_social li a.dribbble:hover { background: #f973a4; color:#fff;} .post-author { margin-left:94px; position:relative; margin-top:15px; margin-bottom:60px; } .post-author .avatar { left:-47px; position:absolute; } .post-author h6 { font-family: lato,Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.6; margin-bottom: auto; } .news_content h2 { border-bottom: 1px solid #f2f2f2; font-size: 30px; font-weight: 600; line-height: 1.8; margin: 30px auto; } .metaInfo { font-size: 0.9em; margin-bottom: 7px; } .metaInfo > span { display: inline-block; padding-right: 15px; color:#777; } .metaInfo > span > a{color:#777;} .metaInfo > span > a:hover{color:#e74c3c;} .metaInfo { font-size: 0.95em; margin: 0 auto; padding: 15px 0 20px; } .metaInfo i { margin-right: 3px; color:#777; } /* Comment ============================*/ .news_comments{ margin:50px auto; } #comment-list ul.children { margin-left:94px;padding:0;} .comment-container { border-top:solid 3px #f2f2f2; margin:0 0 15px 90px; padding:20px 20px; position:relative; -moz-transition:all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out; } .comment-container:hover { background:#F4F4F4; border-color:#8CBE45; } .comment-body p{ margin:0; } .avatar { float:left; width:74px; } .avatar img { display:block; margin-right:20px; position: relative; z-index: 0; border:1px solid #DCDCDC; padding:3px; } h4.comment-author { font-size:16px; line-height:20px; margin:0; } h4.comment-author a{color:#555} #comment-list { margin:0; padding:0;} #comment-list li { background:none; margin:0; padding:0; overflow:hidden; } #comment-list li .comment-container:hover a{color:#8CBE45;} #comment-list .comment-meta { margin-bottom:10px; } #comment-list .comment-date { font-size:12px; font-style:italic;color:#888;} #comment-list li .comment-container:hover .comment-date { color:#8CBE45; } #comment-list li .comment-container:hover h4 { color:#8CBE45; } .comment-reply-link { color: inherit !important; font-size: 12px; font-weight: 700; text-decoration: none !important; text-transform: uppercase; position:absolute; right:20px; top:20px; } .comment_form > input { margin-bottom:20px; margin-right:20px; width: 31.1%; } #comments { margin-bottom: 20px; } .comment_form > input:last-child { margin-right:0; } /* ===================================================== */ /* 8. HOME PAGE */ /* ===================================================== */ .lead { font-size: 28px; font-weight: 300; line-height: 40px; margin-bottom: 50px; } /* Texture Section =========================== */ .texture-section{ padding: 65px 0; margin: 20px 0 30px; background: #96D3C6; } .texture1{ background: url(../images/pattern-2.png); } /* Recent Post =========================== */ .post-images { float: left; width: 30%; margin-right: 25px; } .post-images img { width: 100%; } .post-detail { width: 65%; display: inline-block; margin: 0px; } .post-detail > span { color: #BCBCBC; margin: 0 2px; font-size: 11px; text-transform: uppercase; } .post-detail a{ color: #BCBCBC; } .post-detail a:hover{ color: #8CBE45; } .post-detail h5{ margin:0 0 7px; } .post-detail h5 a { color: #21252b; font: lighter 16px/18px "Trebuchet MS"; } .post-detail > p { margin: 7px 0 0; line-height: 19px; } .post-detail .read-more { color: #8CBE45; } .post-detail .read-more:hover{ color:#659524; } .dashed { border-color: #DBDFE2; border-style: dashed; } /* Feature Block =========================== */ .feature-block i.fa { font-size: 40px; margin: 0 13px 0 0; } .feature-block hr { border-color: #D0D0D0; margin: 20px 0; } /* Counter parallax ============================= */ .counter-parallax{ color:#444; position: relative; } .counter-parallax .intro{ font-size: 32px; margin-bottom: 15px; } .counter-parallax .lead{ font-size: 18px; color: #848484; line-height: 24px; } .counter-parallax .text-center{ border-right: 1px solid #d9d9d9; } .counter-parallax .text-center:last-child{ border-right: none; } .counter-parallax .icon{ font-size: 42px; } .counter-parallax p{ font-size: 40px; font-weight: 600; line-height: 55px; } .counter-parallax .title{ font-size: 19px; font-weight: 800; line-height: 26px; text-transform: capitalize; } /* Post News Slider =========================== */ .post-slide{ padding: 0 15px; } .post-slide .post-img{ overflow: hidden; } .post-slide .post-img img{ width: 100%; height: auto; filter: grayscale(100%); opacity: 0.9; transform: scale(1,1); transition:all 0.3s ease-in-out 0s; } .post-slide:hover .post-img img{ transform: scale(1.2,1.2); filter:none; opacity:1; } .post-slide .post-content{ padding: 20px 30px; position: relative; background: #fff; } .post-slide .post-date{ min-width:28px; min-height:28px; line-height: 28px; text-align: center; background: #556677; position: absolute; top: -30px; left: 30px; } .post-slide .month{ display: block; font-size: 14px; font-weight: bold; color: #fff; padding: 0 10px; background: #8cbe45;; text-transform: uppercase; } .post-slide .date{ color: #fff; font-size: 14px; } .post-slide .post-title{ margin: 20px 0; } .post-slide .post-title a{ color:#8cbe45; font-size:22px; text-transform:capitalize; transition: all 0.50s ease 0s; } .post-slide .post-title a:hover{ color:#333; text-decoration: none; } .post-slide .post-description{ color: #999; font-size: 15px; line-height: 30px; } .post-slide .post-bar{ padding: 15px 0; list-style: none; text-align: center; background: #8cbe45; } .post-slide .post-bar li{ display: inline-block; margin-right: 5px; } .post-slide .post-bar li a{ text-transform: capitalize; font-size: 12px; color: #fff; transition:0.2s ease; } .post-slide .post-bar li a:hover{ text-decoration: none; color:#333; } .post-slide .post-bar li i{ color:#fff; margin-right: 5px; } /* Parallax Form =========================== */ .parallax-form{ background: #141414; padding: 30px 0; position: relative; } .parallax-form:before{ content: ""; width: 50%; height: 100%; background: url("../images/head-3.png"); background-size: cover; background-repeat: no-repeat; position: absolute; top: 0; left: 0; } .parallax-form:after{ content: ""; width: 50%; height: 100%; background: rgba(20, 20, 20, 0.7); position: absolute; top: 0; left: 0; } .parallax-form .dividerHeading h4{ z-index: 1; color: #fff; margin-bottom: 25px; padding: 0; background: transparent; } .parallax-form .dividerHeading h4:after{ width: 0; height: 0; } .parallax-form .form-description{ font-size: 16px; color: #fff; line-height: 24px; z-index: 1; position: relative; } .parallax-form .sub-heading{ font-size: 17px; color: #fff; margin: 0; } .parallax-form #contactForm{ margin-top: 10px; } .parallax-form .form-group{ margin-bottom: 0; } .parallax-form .form-control{ background: #202020; border-radius: 4px; border-color: #272727; color: #ababab; margin-bottom: 30px; } .parallax-form #contactForm select, .parallax-form #contactForm .form-control option{ text-transform: capitalize; } .parallax-form .form-control:focus{ box-shadow: none; border-color: #272727; } .parallax-form .form-control option{ padding: 3px 20px; color: #333; background: #fff; border: 0 none; box-shadow: none; } /* ===================================================== */ /* 9. 404 PAGE */ /* ===================================================== */ .page_404 { position: relative; text-align: center; } .page_404 > h1 { font-size: 250px; font-weight: 600; line-height: 250px; position: relative; } .page_404 > p { font-family: Pt Sans,Helvetica, Arial, sans-serif; font-size: 30px; font-weight: bold; line-height:30px; margin-bottom:30px; } a.back_home { margin: 0; color:#fff; padding: 12px 18px 13px; } /* ===================================================== */ /* 10. ABOUT PAGE */ /* ===================================================== */ .left_img { float: left; margin:0 15px 8px 0; overflow: hidden; } .right_img { float:right; margin:0 0 8px 15px; overflow: hidden; } .divider { position: relative; display: block; height: 30px; } /* OUR TEAM PAGE ===================================================== */ /* Our Team 1 ====================================*/ .our-team_1{ text-align: center; } .our-team_1 .pic{ padding: 30px 20px 0; position: relative; } .our-team_1 .pic:before, .our-team_1 .pic:after{ content: ""; width: 100%; height: 100%; border-top: 1px solid transparent; position: absolute; top: 0; left: 0; transform: scale(0, 1); transition: all 0.4s ease-in-out 0s; } .our-team_1 .pic:after{ border: none; border-left: 1px solid transparent; border-right: 1px solid transparent; transform: scale(1, 0); } .our-team_1:hover .pic:before, .our-team_1:hover .pic:after{ border-color: #7eab3e; transform: scale(1); } .our-team_1 .pic img{ width: 100%; height: auto; } .our-team_1 .team-content{ background: #333; padding: 20px 0; color: #fff; position: relative; } .our-team_1:hover .team-content{ background: #7eab3e; } .our-team_1 .team-content:before{ content: "+"; width: 20px; height: 20px; font-size: 17px; color: #fff; background: #333; position: absolute; top: -20px; right: 0; transition: all 0.3s ease 0s; } .our-team_1:hover .team-content:before{ width: 100%; background: #7eab3e; color: #7eab3e; } .our-team_1 .title{ font-size: 18px; color: #fff; margin: 0 0 8px 0; text-transform: uppercase; } .our-team_1 .post{ display: block; font-size: 14px; text-transform: uppercase; } .our-team_1 .social{ padding: 0; list-style: none; position: absolute; top: -37px; left: 0; right: 0; margin: auto; transform: scale(0); transition: all 0.3s ease 0s; } .our-team_1:hover .social{ transform: scale(1); } .our-team_1 .social li{ display: inline-block; } .our-team_1 .social li a{ display: block; width: 35px; height: 35px; line-height: 35px; font-size: 16px; color: #a0a0a0; margin-right: 10px; position: relative; z-index: 1; transition: all 0.3s ease 0s; } .our-team_1 .social li a:hover{ color: #fff; } .our-team_1 .social li a:before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #fff; transform: rotate(45deg); z-index: -1; transition: all 0.3s ease-in-out 0s; } .our-team_1 .social li:hover a:before{ background: #333; color: #fff; transform: rotate(-45deg); } /* Our Team 2 ====================================*/ .our-team_2 .pic{ position: relative; overflow: hidden; } .our-team_2 .pic img{ width: 100%; height: auto; } .our-team_2 .over-layer{ width: 100%; height: 100%; position: absolute; bottom: -100%; left: 0; background: rgba(126, 171, 62, 0.7); transition: all 0.5s ease 0s; } .our-team_2:hover .over-layer{ bottom: 0; } .our-team_2 .over-layer:before{ content: ""; width: 90%; height: 0; position: absolute; top: 5%; left: 5%; border-top: 5px solid rgba(255,255,255,0.7); border-left: 5px solid rgba(255,255,255,0.7); opacity: 0; transition: all 0.5s ease 0.5s; } .our-team_2:hover .over-layer:before{ opacity: 1; height: 90%; } .our-team_2 .social-links{ padding: 0; margin: 0; list-style: none; text-align: center; position: relative; top: 45%; transform: scale(0); opacity: 0; transition: all 0.5s ease 1s; } .our-team_2:hover .social-links{ opacity: 1; transform: scale(1); } .our-team_2 .social-links li{ display: inline-block; margin-left: 5px; } .our-team_2 .social-links li a{ width: 30px; height: 30px; line-height: 30px; border-radius: 50%; display: block; font-size: 13px; color: #fff; background: rgba(11, 32, 56, 0.7); } .our-team_2 .team-content{ background: #f3f5f7; padding: 30px 25px; } .our-team_2 .team-title{ font-size: 18px; font-weight: 700; color: #5d5e5e; margin: 0 0 5px 0; } .our-team_2 .post{ display: block; font-size: 16px; font-style: italic; color: #898989; margin-bottom: 15px; } .our-team_2 .post:after{ content: ""; display: block; width: 35px; height: 3px; background: #7eab3e; margin-top: 7px; } .our-team_2 .description{ font-size: 14px; color: #898989; } .our-team_2 .read{ display: inline-block; font-size: 14px; color: #fff; text-transform: uppercase; padding: 8px 8px 8px 50px; background: #7eab3e; z-index: 1; position: relative; transition: all 0.5s ease 0s; } .our-team_2 .read:hover{ background: #659524; text-decoration: none; color: #000; } .our-team_2 .read:after{ content: ""; width: 36px; height: 100%; background: #7eab3e; position: absolute; top: 0; right: -18px; transform: skewX(-45deg); z-index: -1; transition: all 0.5s ease 0s; } .our-team_2 .read:hover:after{ background: #659524; } /* =================================================================== */ /* 11. CONTACT PAGE FORM ====================================================================== */ #contactForm{ margin-top:30px; margin-bottom: 20px; } input[type="submit"]{color:#fff !important;} /* Forms =========================== */ textarea { resize: vertical; width:100%; } .form-control { height: 46px; border-radius:0; /* padding: 12px; */ margin-bottom: 10px; } .form-control:focus,#site-searchform #s:focus {border-color:#8CBE45; box-shadow:0 1px 1px rgba(114, 124, 181, 0.35) inset, 0 0 8px rgba(114, 124, 181, 0.68);} label.error { color: #ebedef; font-size: 13.006px; line-height: 18.004px; font-weight: normal; margin-right: 4px; text-shadow: none; text-decoration: none; } label.error { color: #e74c3c; } label{ margin-bottom:10px; } /* Contact-Page-2 ===============================*/ .contact_2{ padding:0 0 60px; position: relative; } .contact_2 .form-control{ border-radius: 4px; margin-bottom: 22px; } .contact_2 textarea.form-control{ border-radius: 4px; height: 150px; } .contact_2 .widget_info_contact li { display: inline-block; margin-bottom: 20px; width: 100%; } .contact_2 .widget_info_contact li i { color: #647382; float: left; font-size: 24px; height: 80px; width: 45px; } .contact_2 strong { color: #647382; font-size: 16px; font-weight: 600; text-transform: uppercase; } .contact_2 .widget_info_contact p { line-height: 22px; } .contact_2 .widget_info_contact a{ color: #647382; } /* Contact_page_3 ==================================*/ .contact_3{ padding:0 0 60px; position: relative; } .contact_3 .lead { font-size: 16px; margin-bottom: 80px; } .contact_3 .form-control { border-radius: 0; height: 36px; margin-bottom: 10px; padding:12px; } .contact_3 textarea.form-control{ height: 230px; } .contact_3 .form-group label { color: #6f6f6f; font-size: 13px; font-weight: normal; margin-bottom: 4px; } .contact_3 .widget_info_contact { margin-top: 20px; /*display: inline-block;*/ } .contact_3 .widget_info_contact strong { display: block; font-size: 18px; line-height: 20px; font-weight: normal; text-align: center; margin-bottom: 10px; } .contact_3 .widget_info_contact li i { color: #647382; font-size: 24px; text-align: center; width: 100%; margin-bottom: 17px; } .contact_3 .widget_info_contact p{ overflow:visible; margin: 0; } .contact_3 .widget_info_contact p a { color: #647382; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; } /* MAPS =========================== */ .contact{ padding:50px 0; } .maps{ position:relative; margin-bottom: 75px; } #page_maps{ max-height:380px; height:360px; } /* ================================================== 12. ICON LIST ================================================== */ .icon_lists { margin-top: 22px; } .icon_lists .fa-hover a { border-radius: 0; color: #222222; display: block; height: 32px; line-height: 32px; padding-left: 10px; } .icon_lists .fa-hover a .fa { display: inline-block; font-size: 14px; margin-right: 10px; text-align: right; width: 32px; } .icon_lists .fa-hover a:hover { background-color: #8CBE45; color: #FFFFFF; text-decoration: none; } .icon_lists .fa-hover a:hover .fa { font-size: 24px; vertical-align: -3px;; } .icon_lists .fa-hover a:hover .text-muted { color: #BBE2D5; } /* ================================================== 13. Recent Works Carousel ================================================== */ .owl-carousel .owl-wrapper:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } /* display none until init */ .owl-carousel{ display: none; position: relative; width: 100%; -ms-touch-action: pan-y; } .owl-carousel .owl-wrapper{ display: none; position: relative; -webkit-transform: translate3d(0px, 0px, 0px); } .owl-carousel .owl-wrapper-outer{ overflow: hidden; position: relative; width: 100%; } .owl-carousel .owl-wrapper-outer.autoHeight{ -webkit-transition: height 500ms ease-in-out; -moz-transition: height 500ms ease-in-out; -ms-transition: height 500ms ease-in-out; -o-transition: height 500ms ease-in-out; transition: height 500ms ease-in-out; } .owl-carousel .owl-item{ float: left; } .owl-controls .owl-page, .owl-controls .owl-buttons div{ cursor: pointer; } .owl-controls { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* mouse grab icon */ .grabbing { cursor:url(../images/grabbing.png) 8 8, move; } /* fix */ .owl-carousel .owl-wrapper, .owl-carousel .owl-item{ -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); } /* owl-carousel navigation control */ .owl-controls{ position: absolute; top: -53px; right: 0; z-index: 1; } .owl-prev, .owl-next{ width:23px; height:23px; display: inline-block; text-align:center; background: #F2F2F2; border-radius: 0; } .owl-next{ margin-left: 1px; } .owl-prev:hover, .owl-next:hover{ background: #777; color: #fff; } .owl-prev:after, .owl-next:after{ font-family: 'FontAwesome'; content: "\f104"; font-size: 20px; line-height: 22px; } .owl-next:after{ content: "\f105"; } .owl-theme .owl-controls .owl-page{ display: inline-block; zoom: 1; *display: inline;/*IE7 life-saver */ } .owl-theme .owl-controls .owl-page span{ display: block; width: 12px; height: 12px; margin: 5px 7px; filter: Alpha(Opacity=50);/*IE7 fix*/ opacity: 0.5; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background: #869791; } .owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span{ filter: Alpha(Opacity=100);/*IE7 fix*/ opacity: 1; } /*--------------------------------------------------------------------------*/ /* 14. TESTIMONIALS /*--------------------------------------------------------------------------*/ .testimonial-item blockquote { background:#EAEAEA; border-top: 3px solid #8CBE45; border-left: none; padding: 20px; margin: 0; } blockquote{font-size:14px;} .testimonial-item .icon { color: #fff; font-size: 120px !important; line-height: 0; position: absolute; right: 20px; top: 10px; z-index: 0; } .testimonial-review > img { background:#FFFFFF; border: 2px solid #8CBE45; border-radius: 50%; float: left; height: 70px; overflow: hidden; padding: 2px; width: 70px; } .testimonial-review > h1 { float: left; color:#555; font-size: 14px; font-weight: 700; line-height: normal; margin-top: 15px; padding-left: 20px; } .testimonial-item blockquote p { margin-bottom: 0; font-size: 14px; font-family:PT sans,Helvetica, Arial, sans-serif; font-weight: 400; line-height: 21px; color: #444; position: relative; z-index: 10; font-style:italic; font-weight: 500; } .testimonial blockquote small { display: block; line-height: 20px; font-size: 12px; color: #999999; margin-top: 5px; } .testimonial-review { position: relative; padding-top: 20px; } .testimonial-item blockquote:after { font-family: FontAwesome; content: "\f0D7"; position: absolute; bottom: 4%; left: 23px; font-size: 40px; color:#EAEAEA; } .testimonial-review small { font-size: 13px; line-height:18px; color: #8CBE45; display:block; } #testimonial-carousel { margin-top: 25px; } .testimonial .testimonial-buttons { position: absolute; right: 0; top: -41px; } .testimonial .testimonial-buttons a { background: #f2f2f2; margin-left:-3px; width:25px; font-size:11px; height:25px; display: inline-block; text-align:center; line-height:27px; color:#bdc3c7; } .testimonial .testimonial-buttons a:hover { background: #f2f2f2; color: #555; } /* Parallax Testimonial =========================== */ /*.parallax-testimonial{ margin: 0 auto; padding: 0 100px 30px; text-align: center; color: #fff; } .parallax-testimonial-review > img { background:#FFFFFF; border-radius: 50%; height: 70px; overflow: hidden; padding: 3px; width: 70px; } .parallax-testimonial-review > span { font-size: 16px; font-weight: 700; text-transform: uppercase; line-height: normal; margin-top: 15px; padding-left: 20px; display: block; } .parallax-testimonial-item blockquote{ border-left:none; } .parallax-testimonial-item blockquote p { margin-bottom: 0; font-size: 25px; font-weight: 400; line-height: 33px; color: #fff; position: relative; z-index: 10; } .parallax-testimonial blockquote small { display: block; line-height: 20px; font-size: 12px; margin-top: 5px; } .parallax-testimonial-review { position: relative; } .parallax-testimonial-review small { font-size: 13px; line-height:18px; color: #727CB6; display:block; } .parallax-testimonial .carousel-indicators{ bottom: 0; margin-bottom: 0; }*/ .testimonial{ padding: 20px; margin: 30px 10px; } .testimonial .pic{ width: 122px; height: 122px; float: left; margin-right: 50px; position: relative; } .testimonial .pic:before, .testimonial .pic:after{ content: ""; display: block; height: 50%; width: 50%; position: absolute; } .testimonial .pic:before{ bottom: -10%; left: -10%; border-bottom: 3px solid #8cbe45; border-left: 3px solid #8cbe45; } .testimonial .pic:after{ top: -10%; right: -10%; border-top: 3px solid #8cbe45; border-right: 3px solid #8cbe45; } .testimonial .pic img{ width: 100%; height: auto; } .testimonial .testimonial-content{ display: table; position: relative; } .testimonial .testimonial-content:before{ content: "\f10d"; font-family: fontawesome; position: absolute; top: -30px; left: -15px; font-size: 60px; color: #d8dad6; z-index: -1; } .testimonial .testimonial-title{ font-size: 24px; color: #8cbe45; text-transform: capitalize; } .testimonial .post{ font-size: 13px; font-weight: 600; color: #585f62; border-left: 1px solid rgba(0, 0, 0, 0.1); margin-left: 5px; padding-left: 5px; } .testimonial .description{ font-size: 13px; color: #7c7c7c; line-height: 22px; margin-top: 12px; } #testimonial-slider .owl-controls{ position: static; text-align: center; } .owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span{ background-color: #8cbe45; } @media only screen and (max-width: 980px){ .testimonial{ padding: 20px 0; margin: 20px 15px; } .testimonial .pic{ float: none; } .testimonial .testimonial-content{ display: block; margin-top: 30px; } .testimonial .testimonial-content:before{ z-index: 1; top: -200px; } } /* Parallax Testimonial =========================== */ /*.parallax-testimonial{ margin: 0 auto; padding: 0 100px 30px; text-align: center; color: #fff; } .parallax-testimonial-review > img { background:#FFFFFF; border-radius: 50%; height: 70px; overflow: hidden; padding: 3px; width: 70px; } .parallax-testimonial-review > span { font-size: 16px; font-weight: 700; text-transform: uppercase; line-height: normal; margin-top: 15px; padding-left: 20px; display: block; } .parallax-testimonial-item blockquote{ border-left:none; } .parallax-testimonial-item blockquote p { margin-bottom: 0; font-size: 25px; font-weight: 400; line-height: 33px; color: #fff; position: relative; z-index: 10; } .parallax-testimonial blockquote small { display: block; line-height: 20px; font-size: 12px; margin-top: 5px; } .parallax-testimonial-review { position: relative; } .parallax-testimonial-review small { font-size: 13px; line-height:18px; color: #8CBE45; display:block; } .parallax-testimonial .carousel-indicators{ bottom: 0; margin-bottom: 0; }*/ /* ======================================================================== */ /* 15. Parallax /* ======================================================================== */ section.parallax { /*padding: 65px 0;*/ padding: 35px 0; 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; } section.parallax h2 { color: rgba(255, 255, 255, 0.8); font-size: 42px; text-align: center; text-transform: uppercase; text-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } section.parallax-1 { background-image: url("../images/1.jpg"); } section.parallax h2 { color: rgba(255, 255, 255, 0.8); font-size: 42px; text-align: center; text-transform: uppercase; text-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } .heading-item { text-align: center; color: #fff; } .heading-item > h4 { color: #fff; font: 700 26px/25px "arial"; margin-bottom: 21px; } .heading-item > p { color: #ccc; font-size: 16px; margin-bottom: 30px; } .heading-item > em { display: block; font: lighter 22px/22px "Open Sans",Helvetica, Arial, sans-serif; margin-top: 35px; } .heading-item strong { color: #D5D5D5; font: 600 20px/20px "arial"; } /* ======================================================================== */ /* 16. Icon Service Boxes /* ======================================================================== */ .info_service { padding:1% 0 0; } /* Service Box 1 ====================================*/ .serviceBox_1{ margin-bottom: 25px; } .serviceBox_1 .service_icon { display: block; position: relative; margin-bottom:10px; } .serviceBox_1 .service_icon h3{ display: inline-block; font-size: 18px; font-weight: 600; margin-left: 3%; position: relative; margin-top:0; } .serviceBox_1 .service_icon i{ display: inline-block; font-size: 20px; line-height:40px; height:40px; width:40px; text-align:center; background:#555; color:#fff; border-radius:50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; -msearch-buttonorder-radius: 50%; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; } .serviceBox_1 h3{ font-size: 20px; font-weight: 600; color: #8cbe45; letter-spacing: -0.5px; margin-bottom: 15px; margin-left: 35px; line-height:20px; text-transform: uppercase; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; } .serviceBox_1 .service_content > p { font-family: Lato,Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.4; } .serviceBox_1 a.read { -webkit-transition: color 200ms ease-in-out; -moz-transition: color 200ms ease-in-out; -o-transition: color 200ms ease-in-out; transition: color 200ms ease-in-out; color: #555; font-size: 12px; font-weight: 600; } .serviceBox_1 a { left: 2px; color: #8CBE45; } .serviceBox_1 a.read:hover::after { left: 2px; } .serviceBox_1 a.read:hover{color: #8CBE45;} .serviceBox_1 a.read:after{ -webkit-transition: left 0.3ms ease; -moz-transition: left 0.3ms ease; -o-transition: left 0.3ms ease; transition: left 0.3ms ease; position: relative; display: inline-block; font-family: "FontAwesome"; content: "\f105"; margin-left: 0.5em; } .serviceBox_1 a.read:after { font-size: 112%; } /* service Box 2 ====================================*/ .serviceBox_2 .service-icon i { color: #5d6166; font-size: 40px; padding-bottom: 30px; } .serviceBox_2 h3 { font: 400 33px/36px "open sans",Helvetica, Arial, sans-serif; margin: 0; color: #8CBE45; } .serviceBox_2 h5 { font: lighter 20px/22px "open sans",Helvetica, Arial, sans-serif; text-transform: uppercase; color: #333333; } .serviceBox_2 p { font: lighter 13px/22px "open sans",Helvetica, Arial, sans-serif; margin: 0 0 25px; } .serviceBox_2 .read a, .serviceBox_2 .read a:hover{ background-position: 0 0; } /* service Box 3 ====================================*/ .serviceBox_3{ text-align: center; padding: 40px 16px 30px; border: 1px solid transparent; transition:all 0.3s ease 0s; position: relative; z-index: 1; } .serviceBox_3:after, .serviceBox_3:before{ content: ""; position: absolute; top:0; left:0; right: 0; bottom: 0; transition:all 0.5s ease 0s; } .serviceBox_3:after{ border-bottom: 1px solid #d7d7d7; border-top: 1px solid #d7d7d7; transform: scaleX(0); transform-origin: 0 100% 0; z-index: -1; } .serviceBox_3:before{ border-left: 1px solid #d7d7d7; border-right: 1px solid #d7d7d7; transform: scaleY(0); transform-origin: 100% 0 0; z-index: -1; } .serviceBox_3:hover:after{ transform: scaleX(1); } .serviceBox_3:hover:before{ transform: scaleY(1); } .serviceBox_3 .service-icon i{ font-size: 32px; line-height: 32px; color:#636363; transition: all 0.3s ease 0s; } .serviceBox_3 .service-content h3{ margin-bottom: 25px; } .serviceBox_3 .service-content h3 a{ font-size: 14px; letter-spacing: 4px; line-height: 22px; color:#181818; text-transform: uppercase; text-decoration: none; } .serviceBox_3 .service-content h3 a:hover{ color:#636363; } .serviceBox_3 .service-content p{ color:#636363; line-height: 26px; } .serviceBox_3 .read{ margin-top: 20px; } .serviceBox_3 .read a{ border:1px solid #636363; border-radius: 50%; color:#636363; display: inline-block; height: 18px; width: 18px; line-height: 16px; text-align: center; text-decoration: none; transition:all 0.3s ease 0s; opacity: 0; } .serviceBox_3 .read a:hover, .serviceBox_3:hover .service-icon i{ color:#181818; border-color: #181818; } .serviceBox_3:hover .read a{ opacity: 1; transition: all 0.3s ease 0s; } /* service Box 4 ====================================*/ .serviceBox_4{ text-align: center; margin: 0 -15px; } .serviceBox_4 img{ width: 100%; height: auto; } .serviceBox_4 .service-content{ position: relative; background: #556677; color: #8cbe45; padding: 50px 30px 30px; } .serviceBox_4 .service-icon{ display: block; width: 70px; height: 70px; background: #8cbe45; border-radius: 10px; position: absolute; top: -35px; left: 0; right: 0; margin: auto; transform: rotate(45deg); } .serviceBox_4 .service-icon i{ font-size: 30px; line-height: 70px; color: #fff; transform: rotate(-45deg); } .serviceBox_4 .title{ font-size: 20px; font-weight: 600; color: #fff; margin-bottom: 20px; text-transform: uppercase; } .serviceBox_4 .description{ font-size: 14px; color: #fff; line-height: 25px; margin-bottom: 20px; } .serviceBox_4 .read-more{ display: inline-block; padding: 7px 20px; border: 1px solid #fff; border-radius: 20px; font-size: 14px; font-weight: 500; color: #fff; background: #556677; text-transform: capitalize; transition: all 0.5s ease 0s; } .serviceBox_4 .read-more:hover{ color: #fff; background: #8cbe45; border-color: #8cbe45; text-decoration: none; } .serviceBox_4.middle .service-content{ padding: 30px 30px 50px; } .serviceBox_4.middle .service-icon{ bottom: -35px; top: auto; } /* service Box 5 ====================================*/ .serviceBox_5{ border: 1px solid #4e4e4e; text-align: center; padding: 40px 0; overflow: hidden; position: relative; z-index: 1; transition: all 0.5s ease 0s; } .serviceBox_5:before, .serviceBox_5:after{ content: ""; width: 200%; height: 200%; background: #8cbe45; position: absolute; top: 160px; left: 0; z-index: -1; transform: rotate(-18deg); transition: all 0.5s ease 0s; } .serviceBox_5:before{ background: #4e4e4e; left: -120%; transform: rotate(24deg); } .serviceBox_5:hover:before{ transform: rotate(16deg); } .serviceBox_5:hover:after{ background: #4e4e4e; transform: rotate(-10deg); } .serviceBox_5 .service-icon{ font-size: 60px; color: #4e4e4e; line-height: 100px; margin-bottom: 100px; } .serviceBox_5 .service-content{ color: #fff; line-height: 25px; padding: 0 20px 20px; } .serviceBox_5 .title{ font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 10px; } .serviceBox_5 .description{ font-size: 14px; } .serviceBox_5 .read{ display: block; width: 100%; background: #fff; font-size: 15px; font-weight: 600; color: #8cbe45; padding: 10px; border-left: 1px solid #8cbe45; border-right: 1px solid #8cbe45; } .serviceBox_5:hover .read{ border-color: #4e4e4e; color: #4e4e4e; } /* service Box Parallax ====================================*/ .service-parallax{ padding: 70px 0; background: url("../images/1.jpg"); background-size: cover; } .service-parallax .serviceBox_2{ margin: 0 10px; color: #fff; } .service-parallax .serviceBox_2 h3, .service-parallax .serviceBox_2 h5, .service-parallax .serviceBox_2 .service-icon i{ color:#fff; } .service-parallax .serviceBox_2 .read{ color: #fff; } #service-box-slider .owl-controls{ position: static; text-align: center; margin-top: 20px; } #service-box-slider .owl-controls .owl-page.active span, #service-box-slider .owl-controls.clickable .owl-page:hover span{ background: #8cbe45; border: 1px solid #8cbe45; transition: all 0.3s ease 0s; } #service-box-slider .owl-controls .owl-page span{ background: transparent; border: 1px solid #8cbe45; opacity: 1; } /* ===================================================== */ /* 17. CLIENTS */ /* ===================================================== */ /*.clients { } ul.client_items .img{ max-width:100%; width:166px !important; } ul.client_items { padding: 0; } ul.client_items li { list-style:none; } ul.client_items { position: relative; display: block; }*/ .clients-bg{ background: #f7f7f7; padding: 0 70px; } /*--------------------------------------------------------------------------*/ /* 18. TYPOGRAPHY /*--------------------------------------------------------------------------*/ .typography{ padding:30px 0; } .typography h1 { margin-top: 0; } /* ======================================================================== */ /* 19. BUTTONS */ /* ======================================================================== */ .btn{ color: #fff; transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; } .btn-default{ background:#8CBE45; border:none; border-radius:2px; } .btn-default:hover{ background:#659524; color:#fff; } /* Social Buttons ====================================*/ .btn-social-googleplus { background-color: hsl(0, 0%, 18%); } .btn-social-facebook { background-color:#3453A2; } .btn-social-twitter { background-color:#2ABBE3; } .btn-social-pinterest { background-color: #D91F25; } .btn-social-linkedin { background-color:#1F80BB; } .btn-social-stumbleupon { background-color:#E86130; } .btn-social-stumbleupon, .btn-social-linkedin, .btn-social-pinterest, .btn-social-twitter, .btn-social-facebook, .btn-social-googleplus { color:#fff; border-radius:0; } .content.elements .btn{ border-radius:2px; } .btn-social-stumbleupon:hover, .btn-social-googleplus:hover , .btn-social-linkedin:hover, .btn-social-pinterest:hover, .btn-social-twitter:hover, .btn-social-facebook:hover { background:#333; color:#fff; } /* ================================================== 20. PRICING TABLES BOXS ================================================== */ .pricingTable_1{ background: #fff; text-align: center; padding-bottom: 30px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 10px; transition: all 0.5s ease 0s; } .pricingTable_1:hover{ box-shadow: 0 10px 21px 0 rgba(0, 0, 0, 0.21); } .pricingTable_1 .pricingTable-header{ padding: 20px 0 100px; color: #000; border-bottom: 1px solid rgba(0, 0, 0, 0.1); position: relative; } .pricingTable_1 .title{ font-size: 24px; font-weight: 700; margin: 0; text-transform: capitalize; } .pricingTable_1 .price-value{ width: 120px; height: 120px; border-radius: 10px; background: #8cbe45; position: absolute; bottom: -60px; left: 0; right: 0; margin: 0 auto; transform: rotate(45deg); } .pricingTable_1 .value{ color: #fff; transform: rotate(-45deg); position: relative; } .pricingTable_1 .amount{ font-size: 35px; line-height: 1.42857; position: absolute; top: 15px; left: -35px; } .pricingTable_1 .month{ font-size: 12px; color: #fff; text-transform: uppercase; position: absolute; top: 60px; left: -17px; } .pricingTable_1 .pricing-content{ list-style: none; padding: 0; margin: 100px 0 30px; font-size: 16px; color: #000; } .pricingTable_1 .pricing-content li{ line-height: 40px; position: relative; } .pricingTable_1 .pricing-content li:before{ content: "\f00c"; font-family: 'FontAwesome'; font-size: 20px; color: #72c759; margin-right: 10px; } .pricingTable_1 .pricingTable-signup{ display: inline-block; padding: 15px 30px; font-size: 14px; color: #fff; letter-spacing:2px; text-transform: uppercase; border-radius: 7px; background: #4e4e4e; transition: all 0.5s ease 0s; } .pricingTable_1 .pricingTable-signup i{ font-size: 15px; margin-right: 8px; } .pricingTable_1 .pricingTable-signup:hover{ background: #ed695f; } /* Pricing Table 2 ====================================*/ .pricingTable_2{ border: 2px solid #4a4450; border-radius: 10px; text-align: center; padding: 25px 0 35px; position: relative; } .pricingTable_2 .title{ font-size: 24px; font-weight: 600; color: #4a4450; text-transform: capitalize; margin: 0 0 20px 0; } .pricingTable_2 .title:before, .pricingTable_2 .title:after{ content: ""; display: block; width: 23%; height: 2px; background: #4a4450; position: absolute; top: 40px; } .pricingTable_2 .title:before{ left: 0; } .pricingTable_2 .title:after{ right: 0; } .pricingTable_2 .month{ font-size: 40px; color: #4a4450; line-height: 1.42857; margin-bottom: 20px; } .pricingTable_2 .month span{ display: block; font-size: 15px; color: #4a4450; } .pricingTable_2 .price-value{ background: #8CBE45; margin: 0 -2px 20px; font-weight: 700; color: #fff; line-height: 1.42857; } .pricingTable_2 .amount{ display: inline-block; font-size: 50px; position: relative; } .pricingTable_2 .currency{ font-size: 25px; position: absolute; top: 15px; right: -22px; } .pricingTable_2 .pricing-content{ padding: 0; margin: 0; list-style: none; } .pricingTable_2 .pricing-content li{ font-size: 15px; color: #4a4450; line-height: 30px; } .pricingTable_2 .pricingTable-signup{ display: inline-block; width: 125px; padding: 7px 10px; background: #8CBE45; border: 1px solid #8CBE45; border-radius: 20px; font-size: 16px; font-weight: bold; color: #fff; text-transform: capitalize; margin: 0 auto; position: absolute; bottom: -18px; left: 0; right: 0; transition: all 0.4s ease 0s; } .pricingTable_2:hover .pricingTable-signup{ text-decoration: none; background: #fff; color: #8CBE45; } /* -------------------------------------------------- */ /* 21. TABS /* -------------------------------------------------- */ .tab{ clear: both; } .tab .nav-tabs{ border-bottom: 0 none; } .tab .nav-tabs li{ margin-right: 2px; } .tab .nav-tabs li a{ display: block; font-size: 14px; color: #333; padding: 18px 25px; border: none; border-radius: 0; background: #efefef; text-transform: uppercase; position: relative; } .tab .nav-tabs li a.active:after{ content: ""; position: absolute; bottom: -12px; left: 0; border-bottom: 15px solid transparent; border-left: 15px solid #8cbe45; } .tab .nav-tabs li a.active, .tab .nav-tabs li a.active:focus, .tab .nav-tabs li a.active:hover{ border: none; background: #8cbe45; color: #fff; transition: all 0.20s linear 0s; } .tab .tab-content{ font-size: 15px; color: #808080; border: 0 none; line-height: 25px; padding: 20px 0 5px 0; margin-top: 15px; } .tab .tab-content h3{ margin-top: 10px; font-size: 24px; } /* Recent Tab ====================================*/ .recent_tab_list { margin:0; padding:0; } ul.recent_tab_list li { margin: 0 0 15.5px; padding: 0 0 17px; list-style-type: none; border-bottom: 1px solid #ebebeb; float: left; width: 100%; } .recent_tab_list li span { float: left; margin-right: 15px; } .recent_tab_list li a { color: #444444; display: block; font-size: 12px; text-decoration: none; } .recent_tab_list li a:hover{ color: #8CBE45; } .recent_tab_list li span img{ float: left; margin-right: 0px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; } .recent_tab_list li span img:hover { float: left; margin-right: 0px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } .recent_tab_list li i { padding: 1px 0px 0px 0px; margin: 0px; display: block; font-size: 11px; font-style: normal; color: #9e9e9e; font-family:Lato,Helvetica, Arial, sans-serif; } .recent_tab_list li.last { padding: 0px 0px 7px 0px; margin: 0px 0px 0px 0px; border-bottom: 0px solid #f5f6f6; } /* Comment Tab ====================================*/ .comments{ padding:0; margin:0; } .comments .post-thumbnail { float: left; margin: 0 15px 0 0; } .comments .post-thumbnail > img { height: 50px; width: 50px; } .comments li { border-bottom: 1px solid #ebebeb; margin-bottom: 15px; padding: 0 0 15px; font-size: 12px; line-height: 18px; list-style: none outside none; } .comments_list > p { margin: 0; overflow: hidden; } .comments li:last-child { border-bottom: none; margin-bottom: 0; padding: 0; } .comments li:last-child p{ margin:0 } .comments_list a { text-decoration: none; color:#8CBE45; } .com_pist a:focus{ color:#555; } .comments_list i { color: #909090; font-size: 12px; margin-left: 3px; } .sidebar-tab { margin-bottom:30px; } /* =========================================*/ /* 22. ACCORDION & TOGGLE */ /* =========================================*/ .card{ border: none; box-shadow: none; border-radius: 0; margin-bottom: 15px; } .card .card-header{ padding: 0; border-radius:0; border: none; } .card h5 .btn{ width: 100%; padding: 14px 30px 14px 70px; font-size: 16px; font-weight: bold; color: #fff; text-align: left; background: #8cbe45; position: relative; overflow: hidden; word-wrap: break-word; white-space: normal; transition: all 0.5s ease 0s; } .card h5 .btn:hover, .card h5 .btn:focus{ text-decoration: none; } .card h5 .btn.collapsed{ background: #f8f8f8; color: #1e4276; } .card h5 .btn.collapsed:hover{ color: #8cbe45; } .card h5 .btn:before{ content: ""; width: 55px; height: 100%; background-color: rgba(0, 0, 0, 0.1); position: absolute; top: 0; left: -13px; transform: skewX(-25deg); transition: all 0.5s ease 0s; } .card h5 .btn.collapsed:hover:before{ background: #7eab3e; } .card h5 .btn:after{ content: "\f047"; font-family: FontAwesome; position: absolute; left: 10px; top: 50%; color: #fff; transform: translateY(-50%); } .card h5 .btn.collapsed:after{ color: #9f9f9f; } .card h5 .btn.collapsed:hover:after{ color: #fff; } .card .card-body{ font-size: 14px; color: #5a3245; line-height: 25px; padding: 20px 15px 10px 40px; position: relative; border: none; position: relative; transition: all 0.5s ease 0s; } .card .card-body:before{ content: ""; width: 5px; height: 40px; background: #8cbe45; position: absolute; top: 30px; left: 0; } /* ===================================================== */ /* 23. PROGRESS SKILL BAR */ /* ===================================================== */ .progress{ margin-bottom: 20px; } .progress-skill-bar{ padding:0; } .progress_skill { background:#F8F8F8; -webkit-border-radius: 5px; -moz-border-radius: 5px; -msearch-buttonorder-radius: 5px; -o-border-radius: 5px; border-radius: 5px; box-shadow: none; height:27px; border:1px solid #F1F1F1; margin-bottom: 15px; line-height: normal; } .progress_skill .bar { background:#8CBE45; line-height:24px; font-family:"Open sans",Helvetica, Arial, sans-serif; color: #ffffff; text-align: left; font-weight: bold; text-indent: 15px; text-transform:uppercase; -webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;-webkit-text-shadow: none;-moz-text-shadow: none;text-shadow: none; -webkit-transition: width 1s ease;-moz-transition: width 1s ease;-o-transition: width 1s ease;transition: width 1s ease; border-radius: 5px; } .progress_skill:hover .bar { -webkit-transition: all 0.35s ease; -moz-transition: all 0.35s ease; -o-transition: all 0.35s ease; transition: all 0.35s ease; background:#659524 !important; color:#fff; cursor: pointer; } .progress-skill-bar { margin-bottom: 10px; margin-left:0; margin-top: 15px; list-style:none; } .progress-skill-bar li{overflow: hidden;} .progress-skill-bar .lable { background: #555; float: left; color: #fff; border-right: 1px #FFFFFF solid;-webkit-border-radius: 0;-moz-border-radius: 0;border-radius: 0; font-size: 11px; font-weight: bold; height: 25px; margin-top:1px; line-height: 25px; padding: 0 0 0 4px; text-align: center; width: 37px; border-top-left-radius:5px; border-bottom-left-radius:5px; } .progress-success .bar, .progress_skill .bar-success { filter: none; background: #15b994; } /* ===================================================== */ /* 24. PROMO BOX */ /* ===================================================== */ .promo_box { background:#f2f2f2; padding: 30px 0; overflow: hidden; } .promo_box .pb_action a.btn { float: right; margin-top:5px; border:none; } .promo_box .pb_action a.btn i{ margin-right:7px; } .promo_content h3 { color: #444; font-size: 22px; font-weight: bold; font-family:PT Sans,Helvetica, Arial, sans-serif; margin: 0 0 5px; } .promo_content p{ color:#666; font-family:PT sans,Helvetica, Arial, sans-serif; margin-bottom:0; } .promo_box.dark{ background:#20242A; } .promo_box.dark .promo_content h3{ color: #fff; } .promo_box.dark .promo_content p{ color: #B0B0B0; } /* ===================================================== */ /* 25. PAGINATION */ /* ===================================================== */ .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus,.page-item.active .page-link{ background:#8CBE45; border-color: #8CBE45; } .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus{ background:#8CBE45; border-color: #8CBE45; } .page-link{ color: #337ab7; } /* ================================================== */ /* 26. TITLE */ /* ================================================== */ .dividerHeading, .widget_title{ position: relative; z-index: 1; } .dividerHeading h4, .widget_title h4 { /*border-bottom: 1px solid #e2e2e2;*/ font-size: 22px; font-weight: bold; color: #888; margin-bottom: 50px; /*padding: 0 0 10px;*/ /*position: relative;*/ padding: 0 12px; display: inline-block; z-index: 2; background: #fff; text-transform: uppercase; } .widget_title h4{ background: #323a45; margin-bottom: 5px; } .project_description .widget_title h4, .project_details .widget_title h4{ background: #fff; } .sidebar .widget_title h4{ background: #fff; } .sidebar .widget_title h4 span{ color: #888; } .dividerHeading h4::before, .widget_title h4::before{ /*bottom: -3px; content: ""; display: inline-block; height: 5px; left: 20px; position: absolute; width: 35px;*/ } .dividerHeading h4::after, .widget_title h4::after { /* bottom: -1px; content: ""; display: inline-block; height: 1px; left: 0; position: absolute; width: 80px;*/ content: ""; width: 100%; height: 10px; position: absolute; top: 15%; left: 0; z-index: -1; } .widget_title h4::after{ top: 43%; } .dividerHeading h4::after, .widget_title h4::after, .dividerHeading h4::before, .widget_title h4::before{ background: #eee; } .widget_title h4 { font-size: 14px; text-transform: uppercase; } .footer .widget_title h4{ border-color: #B5B5B5; } .footer .widget_title h4 span{ color:#fff; } /* ===================================================== */ /* 27. DROPCAPS */ /* ===================================================== */ .dropcap { float: left; color: #169fe6; font-size: 58px; line-height: 54px; padding:6px 10px 8px; margin-top: 8px; } .dropcap.default { color: #8CBE45; } .dropcap.gray { color: #555; } .dropcap.light { color: #aaa; } .dropcap_block { float: left; background-color: #8CBE45; font-size: 50px; line-height: 50px; padding:6px 10px 8px; margin-top: 8px; margin-right:10px; color:#fff; } .dropcap_block.default { background-color: #8CBE45; } .dropcap_block.gray { background-color: #555; } .dropcap_block.light { background-color: #aaa; } /* ===================================================== */ /* 28. HIGHLIGHT */ /* ===================================================== */ .highlight{ padding: 0px 6px 2px; color: #fff;} .highlight.default { background: #8CBE45; } .highlight.gray { background: #4c4c4c; } .highlight.light { background: #aaa; } blockquote.default { border-color: #8CBE45; color:#666; background:#f2f2f2; font-size:inherit; } /* ===================================================== */ /* 29. Swipe.JS Slider */ /* ===================================================== */ .swipe { overflow: hidden; visibility: hidden; position: relative; margin-top: 0; } .swipe-wrap { margin: 0 auto; overflow: hidden; padding: 0; position: relative; } .swipe-wrap > li { float:left; width:100%; overflow: hidden; position: relative; } .swipe-navi { display: block; height: auto; margin-top: 10px; position: absolute; top: 50%; width: 100%; z-index: 1001 } .swipe-navi .swipe-left, .swipe-navi .swipe-right { position: absolute; text-align: center; width: 40px; height: 40px; line-height: 40px; opacity: 0; zoom: 1; filter: alpha(opacity=0); color:#fff; cursor: pointer; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; transition: all 200ms; -moz-transition: all 200ms; -webkit-transition: all 200ms; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; background:#8CBE45; } .swipe-navi .swipe-left:hover, .swipe-navi .swipe-right:hover{ background:#555 !important; } .swipe-wrap img { width: 100%; } .swipe:hover .swipe-navi .swipe-left{ opacity: .9; zoom: 1; filter: alpha(opacity=90); margin-top: -27px; } .swipe:hover .swipe-navi .swipe-right { opacity: .9; zoom: 1; filter: alpha(opacity=90); margin-top: -27px; } .swipe-navi .swipe-left { left: 5px; margin-top: -32px; } .swipe-navi .swipe-right { right: 5px; margin-top: -22px; } .img-about { margin-top: 15px; } /* ================================================= */ /* 30. CAROUSEL */ /* ================================================= */ .carousel-content, .porDetCarousel{position: relative; } .carousel-item { width: 100%; display: block; visibility: hidden; position: absolute; top: 0; left: 0; } .carousel-item.active { display: block; visibility: visible; position: static; } .carousel-item.current { left: 0; right: 0; visibility: visible; z-index: 1; } .carousel-item { max-width: 100%; display: block; } .carousel-control { position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden; width:100%; } .porDetCarousel:hover .carousel-prev { left: 10px; } .porDetCarousel:hover .carousel-next { right: 10px; } .carousel-prev, .carousel-next { width: 40px; height: 40px; position: absolute; top: 45%; left: -40px; z-index: 2; background: #666; border-radius: 2px; cursor: pointer; -webkit-transition: background-color 0.2s ease, left 0.2s ease, right 0.2s ease; transition: background-color 0.2s ease, left 0.2s ease, right 0.2s ease; } .carousel-next { left: auto; right: -40px; } .carousel-prev:hover, .carousel-next:hover { background: #555; } .carousel-prev:before, .carousel-next:before { content: '\f104'; display: block; text-align: center; line-height: 40px; font: 20px/40px 'FontAwesome'; color: #fff; } .carousel-next:before { content: '\f105'; } .carousel-next:hover:before, .carousel-prev:hover:before{color: #fff;} .carousel-pagination { position: absolute; bottom: 20px; left: 50%; -webkit-transition: bottom 0.2s ease;transition: bottom 0.2s ease; -webkit-transform: translateX(-50%);transform: translateX(-50%); z-index: 2; margin: 0; padding: 0; list-style: none; text-align: center; line-height: 50px; } .carousel-pagination li { background:rgba(0, 0, 0, 0.5); cursor: pointer; float: left; height: 6px; margin: 0 2px; width: 20px; } .carousel-pagination li.active { background: #8CBE45; } /* ===================================================== */ /* 31. FLICKR */ /* ===================================================== */ .flickr { margin-top: 20px; text-align:center; } .flickr-feed {overflow: hidden;padding:0;} .flickr-feed li { display: inline-block; margin: 0 8px 4px auto; position: relative; z-index:0; width:62px; height:62px; overflow: hidden; } .flickr-feed li img { margin: 0 8px 8px 0; width: 62px; height: 62px; overflow: hidden; box-shadow:none; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; } .flickr-feed li:hover img{ -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; transform: scale(1.2) rotate(10deg); -webkit-transform: scale(1.2) rotate(10deg); -moz-transform: scale(1.2) rotate(10deg); -o-transform: scale(1.2) rotate(10deg); -ms-transform: scale(1.2) rotate(10deg); } .flickr-feed li a {display: block;overflow: hidden;position: absolute;width: 62px;height: 62px; filter: alpha(opacity=100); -khtml-opacity: 1; -moz-opacity: 1; opacity: 1; } .flickr-feed li .hover {position: absolute;width: 62px;height: 62px;background: #8CBE45;opacity: 0;filter: alpha(opacity=0);-webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s;-ms-transition-duration: 0.4s;-o-transition-duration: 0.4s;transition-duration: 0.4s;z-index:10; } .flickr-feed li a:hover .hover {opacity: 0.8;filter: alpha(opacity=80); visibility:visible;} .flickr-feed li a i { display: block; position: absolute; width: 62px; height: 62px; font-size: 18px; color: white; line-height: 3.8; opacity: 0; filter: alpha(opacity=0); z-index: 11; -webkit-font-smoothing: antialiased; -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; -ms-transition-duration: 0.4s; -o-transition-duration: 0.4s; transition-duration: 0.4s; text-align:center; } .flickr-feed li a:hover i { filter: alpha(opacity=100); -khtml-opacity: 1; -moz-opacity: 1; opacity: 1; } /* Footer Social ====================================*/ .footer_social{ float: right; } .footbot_social { list-style: none outside none; margin: 0 auto; overflow: hidden; padding: 0; } .footbot_social li { float: left; background: none !important; } .footbot_social li a { color: #666; display:block; height: 40px; text-align: center; width:35px; -webkit-transition: 0.25s; -moz-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s; margin: 0 2px; } .footbot_social li a i { font-size: 18px; line-height: 40px; margin-right: 0; float: none; } .footbot_social li a.fb:hover {background:#1964DA; border-radius: 5px; color:#fff;} .footbot_social li a.twtr:hover {color: #fff; background:#3ABDD1; border-radius:5px;} .footbot_social li a.gmail:hover {color: #fff;} .footbot_social li a.pinterest:hover {color: #fff;} .footbot_social li a.rss:hover {color: #fff; background:#F15200; border-radius:5px;} .footbot_social li a.tumblr:hover {color: #fff;} .footbot_social li a.flickr:hover {color: #fff;} .footbot_social li a.instagram:hover {color: #fff;} .footbot_social li a.linkedin:hover {color: #fff;} .footbot_social li a.skype:hover {color: #fff; background:#00AAF1; border-radius:5px;} .footbot_social li a.youtube:hover {color: #fff;} .footbot_social li a.dribbble:hover { color: #fff; background:#F97193; border-radius:5px;} /* ===================================================== */ /* 32. List & Bullets */ /* ===================================================== */ ul{ list-style: none; margin: 0; padding: 0; } /* --------list style CSS---------- */ .list_style li { font-family: PT sans,Helvetica, Arial, sans-serif; font-size: 14px; line-height: 21px; padding:3px 2px 3px 10px; position: relative; } .list_style li a { color: #666; font-size: 14px; font-weight: 500; letter-spacing: 0; text-decoration: none; } .list_style li a:hover { color: #8CBE45; text-decoration: none; } .list_style li a.active { color: #8CBE45; } /* --------list style 1 : Simple CSS---------- */ .list_style li { padding:3px 2px 3px 12px; } .list_style li:before { font-family: FontAwesome; content: "\f105"; font-size: 14px; position: absolute; left: 0; top: 3px; } /* --------list style 2 : Circle CSS---------- */ .list_style.circle li { padding:3px 2px 3px 23px; } .list_style.circle li:before{ font-family: FontAwesome; content: "\f105"; color: #FFFFFF; background: #8CBE45; border-radius:50%; display: inline-block; height: 16px; line-height: 16px; width: 16px; text-align: center; font-size: 11px; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; position: absolute; left: 0; top: 5px; } /* --------list style 3 : Square CSS---------- */ .list_style.square li { padding:3px 2px 3px 23px; } .list_style.square li:before { font-family: FontAwesome; content: "\f105"; background: #8CBE45; display: inline-block; border-radius:0; color: #FFFFFF; height: 15px; width: 15px; line-height: 15px; text-align: center; position: absolute; left: 0; top: 5px; } /* --------list style 4 : Star CSS---------- */ .list_style.star li { padding:3px 2px 3px 22px; } .list_style.star li:before { font-family: FontAwesome; content: "\f005"; display: inline-block; border-radius:0; color: #8CBE45; font-size: 16px; text-align: center; position: absolute; left: 0; top: 3px; } /* --------list style 5 : Right-arrow CSS---------- */ .list_style.right-arrow li { padding:3px 2px 3px 20px; } .list_style.right-arrow li:before{ font-family: FontAwesome; content: ""; display: inline-block; border-radius:0; color: #8CBE45; font-size: 15px; position: absolute; left: 0; top: 4px; } /* --------list style 6 : Hand CSS---------- */ .list_style.hand li { padding:3px 2px 3px 22px; } .list_style.hand li:before { font-family: FontAwesome; content: ""; display: inline-block; border-radius:0; color: #8CBE45; position: absolute; left: 0; top: 4px; } /* --------list style 7 : Play CSS---------- */ .list_style.play li { padding:3px 2px 3px 21px; } .list_style.play li:before { font-family: FontAwesome; content: ""; display: inline-block; border-radius:0; color: #8CBE45; font-size: 15px; position: absolute; left: 0; top: 3px; } /* --------list style 8 : Dubble-Right-Arrow CSS---------- */ .list_style.dubble-right-arrow li { padding:3px 2px 3px 17px; } .list_style.dubble-right-arrow li:before { font-family: FontAwesome; content: ""; display: inline-block; border-radius:0; color: #8CBE45; font-size: 15px; position: absolute; left: 0; top: 3px; } /* --------list style 9 : Multiple-Icon CSS---------- */ .multi-icon-list li{ font-family: PT sans,Helvetica, Arial, sans-serif; font-size: 14px; line-height: 21px; padding: 3px 2px 3px 23px; position: relative; } .multi-icon-list li i.fa{ color: #8CBE45; font-size: 16px; position: absolute; left: 0; } /* ===================================================== */ /* 33. Button Up */ /* ===================================================== */ .btntoTop { width: 44px; height: 44px; position: fixed; bottom: 30px; right: 30px; background-color: #34495e; border-radius: 2px; text-align: center; line-height: 40px; cursor: pointer; opacity: 0; -webkit-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } .btntoTop:before { content: "\f106"; display: inline-block; vertical-align: middle; font: 20px 'FontAwesome'; color: #b8bcc0; } .btntoTop.active { opacity: 1; } .btntoTop.active:hover{ opacity:0.8; } /* =================================================================== */ /* 34. SHOP ====================================================================== */ .product{ border: 1px solid hsl(0, 0%, 95%); box-shadow: 0 1px 1px hsl(0, 0%, 98%); padding: 10px; position: relative; margin-bottom:30px; } .product .product-img{ overflow: hidden; position: relative; } .product .product-img img{ transition: transform 0.5s ease 0s; display: block; height: auto; max-width: 100%; } .product .product-info{ padding: 10px 0; display:flex; } .product .product-info .product-title{ float: left; width: 75%; } .product .product-info .product-title h3{ font-size: 15px; font-weight: 700; line-height: 25px; margin: 0 0 5px; padding: 0; } .product .product-info .product-prices{ float: left; width: 25%; } .product .product-info .product-prices p.price-new{ color:#8CBE45; font-size: 15px; font-weight: 700; line-height: 23px; margin: 0; text-align: right; } /* =================================================================== */ /* 35. SHOP CART ====================================================================== */ .table{ border: 1px solid hsl(0, 0%, 95%); width: 100%; } .table tr{ border:1px solid hsl(0, 0%, 95%); } .table tr th{ background-color: hsl(0, 0%, 98%); border-color: hsl(0, 0%, 95%); border-width: 1px; color: hsl(195, 2%, 38%); } .table tr td.remove { text-align: center; } .table tr td.remove a{ border-radius: 25px; color: hsl(0, 88%, 65%); display: inline-block; height: 25px; line-height: 25px; transition: background-color 0.3s ease 0s, color 0.3s ease 0s; width: 25px; } .table tr th, .table tr td{ border-color: hsl(0, 0%, 95%); transition: background-color 0.3s ease 0s; vertical-align: middle !important; padding: 8px; } .shop-coupon input[type="text"] { border: 1px solid hsl(0, 0%, 92%); margin:0 4px 15px; outline-width: 0 !important; padding: 5px; width:50%; float:left; } .table .btn.grey{ background: hsla(0, 0%, 0%, 0); border:1px solid hsl(0, 0%, 92%); color: hsl(0, 0%, 50%); width:auto; } .table .btn.grey:hover{ background:#8CBE45; color:#fff; } .shop-cart-buttons .btn{ width:auto; } .shop-cart-buttons .btn-block{ display: inline-block; } /*-------Animation-CSS----*/ .animation { text-align: center; } .animation > p { font-size: 16px; margin: 20px 0; } /*Hover Effect Style*/ .box-1{ overflow: hidden; position: relative; } .box-1 img{ width: 100%; height: auto; } .box-1 .box-content{ width: 100%; height: 100%; font-size: 1.25em; position: absolute; top: 0; left: 0; } .box-1 .box-content:before, .box-1 .box-content:after{ content: ""; width: 95%; height: 47%; background: #8cbe45; position: absolute; left: 0; right: 0; margin: auto; opacity: 0; transition: all 0.5s ease 0s; } .box-1 .box-content:before{ top: -20%; } .box-1:hover .box-content:before{ top: 3.1%; opacity: 0.8; } .box-1 .box-content:after{ bottom: -20%; } .box-1:hover .box-content:after{ bottom: 3%; opacity: 0.8; } .box-1 .content-1{ width: 100%; height: 45px; position: absolute; top: -20px; left: 0; bottom: 0; right: 0; text-align: center; margin: auto; opacity: 0; transform: rotate(90deg); z-index: 1; transition: all 0.5s ease 0s; } .box-1:hover .content-1{ opacity: 1; transform: rotate(0deg); } .box-1 .social{ padding: 0; margin: 0; list-style: none; } .box-1 .social li{ display: inline-block; margin-right: 5px; } .box-1 .social li a{ display: block; width: 32px; height: 32px; border-radius: 50%; line-height: 32px; background: #fff; font-size: 14px; color: #000; transition: all 0.3s ease 0s; } .box-1 .social li a:hover{ color: #8cbe45; } .box-1 .title{ font-size: 17px; text-transform: uppercase; color: #fff; margin: 0; } .box-1 .post{ font-size: 14px; color: #fff; text-transform: uppercase; } .small-images .box-1 .title{ font-size: 100%; } .medium-images .box-1 .title{ font-size: 115%; } .large-images .box-1 .title{ font-size: 155%; } .small-images .box-1 .post{ font-size: 75%; } .medium-images .box-1 .post{ font-size: 85%; } .large-images .box-1 .post{ font-size: 95%; } .large-images .box-1 .social li a, .medium-images .box-1 .social li a{ width: 40px; height: 40px; line-height: 40px; font-size: 16px; margin-bottom: 5px; } /* ===================================================== */ /* 36. MEDIA QUERIES */ /* ===================================================== */ @media only screen and (min-width: 980px) and (max-width: 1280px){ .names{font-size:14px} .blog_medium .post_img{width:30%; } .shares li.shareslabel h3{padding:8px 14px;} .comment_form > input{width:30%;} .testimonial .testimonial-buttons a{height:17px;line-height:17px;width:17px;} .testimonial .testimonial-buttons {position:absolute; right: 47%; top: -22px;} .post-images { margin-right: 15px;} } @media only screen and (max-width: 990px){ #logo{ margin: 10px 0; } .navbar{ width: 100%; } .navbar .navbar-nav li a{color:#fff; font-size: 15px; font-weight: 700; } .navbar .navbar-collapse{ padding: 0; box-shadow:none; z-index: 1; } .navbar-header{ float: left; } .dropdown-items{ float: right; } .navbar-collapse { position: absolute; width: 100%; top:65px; } .navbar-nav{ background:#303436; margin: 0; } .navbar-nav > li > a:hover,.navbar-nav > li > a:focus,.navbar-nav > li.active > a, .navbar .navbar-nav > .active > a, .navbar .navbar-nav > .active > a:hover, .navbar .navbar-nav > .active > a:focus, .navbar .navbar-nav > .show > a, .navbar .navbar-nav > .show > a:hover, .navbar .navbar-nav > .show > a:focus, .navbar .navbar-nav .show .dropdown-menu > .active > a, .navbar .navbar-nav .show .dropdown-menu > .active > a:hover, .navbar .navbar-nav .show .dropdown-menu > .active > a:focus, .navbar .navbar-nav .show .dropdown-menu > .disabled > a, .navbar .navbar-nav .show .dropdown-menu > .disabled > a:hover, .navbar .navbar-nav .show .dropdown-menu > .disabled > a:focus{ /*background: transparent;*/ color:#fff!important; border: 0 solid hsl(0, 0%, 100%); border-radius: 1px; } .navbar-nav > li ul > li:first-child > a{border-top:none;} .navbar .navbar-nav > li{border-bottom:1px solid rgba(225, 220, 220, 0.81);} .navbar .navbar-nav > li:last-child{border-bottom:none;} .navbar .navbar-nav > li > a,.navbar-nav .dropdown-menu > li > a { padding-top:12px!important; padding-bottom:12px!important; border-bottom:none!important; } .navbar .navbar-nav li a{ color: #fff; font-size: 15px; font-weight: 700; } .navbar-nav .show .dropdown-menu > li > a, .navbar-nav .show .dropdown-menu .dropdown-header, .navbar .navbar-nav .show .dropdown-menu > li > a { background: #303436; padding-left:45px; color:#fff; font-size:13px; } .dropdown-menu.sm-nowrap > li{background:#303436; border-top: 1px solid rgba(225, 220, 220, 0.81);} .navbar-nav.sm-collapsible .sub-arrow{ border: none; } .navbar-toggler .navbar-toggler-icon{ background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } .navbar .navbar-nav .show .dropdown-menu > li > a:hover, .navbar .navbar-nav .show .dropdown-menu > li > a:focus, .navbar .navbar-nav li > a:hover{ background:#8CBE45; color:#fff; } .navbar-nav .sub-arrow, .navbar-nav .collapsible .sub-arrow { float:right; color:#fff; } .navbar-nav > li > ul:before { content:""; display:none; } .navbar-nav > li > .has-submenu .sub-arrow{ font-size: 14px; font-weight: bold; width: 10px; } .navbar-nav > li.active { color: #fff; } .navbar-nav > li:hover > ul{ -moz-animation: none; -webkit-animation: none ; animation: none; } .navbar-nav > li > ul.dropdown-menu li:hover ul{ -moz-animation: none; -webkit-animation:none; animation: none; } .navbar .navbar-nav > li > a > span.data-hover{ margin: 0; padding: 0; -webkit-transition: none; -moz-transition: none; transition: none; } .navbar .navbar-nav > li > a > span.data-hover::before { content: ""; margin: 0; padding: 0; transition:none; _webkit-transition:none; _moz-transition:none; } .navbar .navbar-nav > li:hover > a > span.data-hover, .navbar .navbar-nav > li:focus > a > span.data-hover{ -webkit-transform: none; -moz-transform: none; transform: none; transition:none; _webkit-transition:none; _moz-transition:none; } .navbar-nav .dropdown-menu li{ background: #303436; border-top: 1px solid rgba(225, 220, 220, 0.81); } .navbar-nav .dropdown-menu li.active a{ background: #8CBE45; } .navbar .navbar-nav > li > a , .navbar .navbar-nav > li > a > span.data-hover{ height: auto; } .navbar-nav .nav-link .sub-arrow{ line-height: 20px; } .navbar-nav.sm-collapsible .dropdown-menu .dropdown-menu{ /* margin: 0; */ } .navbar{ background: transparent !important; } .navbar-light .navbar-toggler{ border-color: #fff; color: #fff; margin-top: 15px; } .navbar-light .navbars-toggler:focus{ outline: none; } .tab .nav-tabs li a{ padding: 12px 15px; } .box-1{ margin-bottom: 30px; } .btn-lg{ margin-bottom: 10px; } .counter-parallax .text-center{ margin-bottom: 15px; } .counter-parallax .text-center:last-child{ border-right: 1px solid #d9d9d9; } } @media only screen and (min-width: 768px) and (max-width: 989px){ #logo{ width: 100%; } .navbar .navbar-nav > li > a, .nav.navbar-nav > li.active > a{ font-size: 13px; padding: 25px 10px; } .navbar-nav > li > ul.dropdown-menu{ top: 63px!important; } .dropdown-items{ padding: 0 5px; } .tab-content{margin-bottom:30px;} .info_service {padding: 40px 0 0;} .post-images { margin-right: 15px; } .serviceBox_1 .service_icon > h3{ font-size: 17px;} .serviceBox_3{ margin-bottom:10px; } .serviceBox_4 .title{ font-size: 17px; } .serviceBox_5{ margin-bottom: 30px; } .pricingTable_1{ margin-bottom: 20px; } .pricingTable_2{ margin-bottom: 35px; } .our-team_1{ margin-bottom: 10px; } .our-team_2{ margin-bottom: 20px; } } @media only screen and (max-width:768px){ #logo-bar{padding:0;} #logo {width: 100%;} #logo a img {height: auto;} /*.navbar .navbar-nav > li > a{padding: 10px 12px;}*/ figure.effect-bubba figcaption::before, figure.effect-bubba figcaption::after, .small-images figure.effect-bubba figcaption::before, .small-images figure.effect-bubba figcaption::after, .large-images figure.effect-bubba figcaption::before, .large-images figure.effect-bubba figcaption::after{ top: 18px; right: 18px; bottom: 18px; left: 18px; } .medium-images figure h5, .large-images figure h5, .small-images figure h5{ font-size: 125%; } .medium-images figure.effect-bubba p, .small-images figure.effect-bubba p, .large-images figure.effect-bubba p{ font-size: 85%; padding: 6px 2.5em 20px; } .small-images .masonry_wrapper figure.effect-bubba h5 .medium-images .masonry_wrapper figure.effect-bubba h5, .large-images .masonry_wrapper figure.effect-bubba h5{ padding-top: 26%; } .large-images .masonry_wrapper figure.effect-bubba p, .medium-images .masonry_wrapper figure.effect-bubba p, .small-images .masonry_wrapper figure.effect-bubba p{ padding: 3px 2.5em 20px; } figure .option .fa, .small-images figure .option .fa , .owl-carousel figure .option .fa{ font-size: 15px; width: 35px; height: 35px; line-height: 35px; } /*.jcarousel-list li{ width:248px; }*/ .sub_content { padding: 15px 0; } .tab-content{margin-bottom:30px;} .nav-tabs > li > a { padding:10px 10px; } .serviceBox_1,.serviceBox_2{ margin-bottom:30px; } .blog-hover > a { top: 30%; } .blog_medium .post_content{ width:45%; } .shares li.shareslabel h3{ padding:8px 14px; } section.parallax { padding: 30px 0; } .parallax-testimonial{ padding: 0 15px 30px; } .img-about{ margin-bottom: 20px; } .texture-section{ padding: 15px 0;margin: 10px 0; } .large-images .box-1 .title, .medium-images .box-1 .title, .small-images .box-1 .title{ font-size: 125%; } .large-images .box-1 .post, .medium-images .box-1 .post, .small-images .box-1 .post{ font-size: 85%; } .large-images .box-1 .social li a, .medium-images .box-1 .social li a, .small-images .box-1 .social li a{ width: 35px; height: 35px; line-height: 35px; font-size: 15px; } } @media only screen and (max-width: 767px) { #menu-bar{padding: 10px 15px 20px; padding-top: 15px; } /* #logo{ position: absolute; top: 0; } */ #logo {margin:0; padding: 0; } #logo-bar{padding:0;} #page-head{ padding: 16px 0 0; position: relative; } .text-center > img { width: 100%; } .images-style-inner { margin: 10px 0; } #page-head h2 { font-size: 20px; } #breadcrumbs { float: right;margin-top: 5px;} .btn{ margin-bottom: 10px; } .serviceBox_1,.serviceBox_5{ margin-bottom:30px; } .serviceBox_3{ margin-bottom:10px; } .serviceBox_4 .title{ font-size: 17px; } .serviceBox_4{ margin: 0 0 30px 0; } .serviceBox_5:before, .serviceBox_5:after{ top: 80px; } .pricingTable_1{ margin-bottom: 20px; } .pricingTable_2{ margin-bottom: 35px; } .our-team_1{ margin-bottom: 10px; } .our-team_2{ margin-bottom: 20px; } .list_style li i{ margin-right:0; } .parallax-form:before, .parallax-form:after{ width: 100%; } .parallax-form .sub-heading, #contactForm{ z-index: 1; position: relative; } /*ul.client_items { display: block; margin: 0 auto; padding: 0; text-align: center; }*/ .list_item{ width:100%;} /*.jcarousel-list li{ width:99%; }*/ .widget_content{ margin-bottom:30px; } .promo_box .pb_action a.btn {display: block; float: none; margin-top: 20px; } .list_style{ margin:0 0 30px; } .team_prof{ margin-bottom:30px; } .blog_large .post_meta h2 a, .blog_single .post_meta h2 a { font-size:18px; line-height:normal; } .blog_medium .post_meta h2 a { font-size: 20px; line-height:normal; } .blog_large .post_meta h2, .blog_medium .post_meta h2, .blog_single .post_meta h2 { font-size:18px; line-height:20px; margin-bottom:10px; margin-top:0; } .blog_large .day,.blog_medium .day, .blog_single .day { font-size:20px; } .blog_large .month, .blog_medium .month , .blog_single .month { padding: 2px 8px 4px; } .blog_large .post_img, .blog_single .post_img{ margin-bottom:20px; } .blog_large .post_content, .blog_single .post_content { margin: 0 0 0 60px; } .blog_large .post_meta .metaInfo, .blog_single .post_meta .metaInfo{ padding:0 0 10px; } .blog_large .post_meta .metaInfo > span, .blog_single .post_meta .metaInfo > span { line-height:24px; } .blog_large .post, .blog_medium .post, .blog_single .post, .blog_medium .post { margin-bottom:40px; padding-bottom:40px; } .blog_medium .post_content { float:left; width:100%; } .blog_medium .post_img { margin-right:0; width:75%; margin-bottom:30px; } .sidebar .widget { display:inline-block; margin-top:30px; position:relative; } .shareslabel {display:none; } .author_desc { height:auto; min-height:inherit; width:100%; } .author_bio { float:none; margin-top:35%; padding:20px; position:relative; text-align:center; width:100%; } #comment-list ul.children{ margin-left:10px; } .comment-container{ margin-left:80px; margin-bottom:10px; } .comment_form > input{ width:100%; } .page_404 > h1{ font-size:160px; line-height:180px; margin-top:0; } .page_404 > p{ font-size:26px; line-height:36px; } .rec_blog { margin-bottom:20px; } .copyright{ text-align:left; float:left; } .post-images { margin-right: 15px; } .product{ display: table; margin: 0 auto 30px; } .counter-parallax .text-center, .counter-parallax .text-center:last-child{ border-right: none; } } @media only screen and (min-width: 481px) and (max-width: 767px){ .author_bio {margin-top:35%; position: relative;} #breadcrumbs { float: right;margin-top: 5px;} } @media only screen and (max-width: 480px){ #logo { width: 100%; } #breadcrumbs{ display: none; } .author_bio {margin-top:55%; position: relative;} #filter li a{padding:10px;} .serviceBox_5:before, .serviceBox_5:after{ top: 140px; } .owl-carousel .item-description h5{ font-size: 125%; } .owl-carousel .item-description p{ font-size: 85%; padding: 6px 2.5em 20px; } .sub_content { padding: 10px 0; } .post-images { width: 100%; margin-right: 0; margin-bottom: 15px; } .post-detail { width: 100%; } .tab .nav-tabs li{ width: 100%; margin-bottom: 5px; } .tab .nav-tabs li a{ display: block; padding: 10px 15px; } .tab .nav-tabs li a.active:after{ border: none; } .tab .tab-content{ margin-top: 5px; } } #primary-menu li a { font-size: 15px; }
Copyright ©2021 || Defacer Indonesia