/* /\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\ 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 33. LIST & BULLETS 33. BUTTON UP 34. 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, .h1, .h2, .h3, .h4, .h5 { 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: 28px; line-height: 50px; } h2 { font-size: 22px; line-height: 30px; } h3 { font-size: 16px; line-height: 30px; } h4 { font-size: 14px; line-height: 30px; } h5 { font-size: 10px; line-height: 21px; } h6 { font-size: 14px; } 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; } .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: #e67e22; } .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; } .mrgt-0 { margin: 0 auto 20px; } /* =================================================================== */ /* 2. HEADER ====================================================================== */ #header { z-index: 999; background: #fff; width: 100%; transition: all 0.4s ease-in-out 0s; } #top-bar { background: #323A45; color: #fff; padding: 5px 0 3px; } .top-info ul { list-style: none; float: right; padding: 0; margin: 0; } .top-info span { font: 13px/28px "open sans", Helvetica, Arial, sans-serif; padding-right: 15px; } .top-info span i { font-size: 13px; margin-right: 5px; } .top-info li { float: left; } .top-info li a { border: 1px solid #fff !important; border-radius: 100%; color: #fff; display: inline-block; font-size: 14px; height: 25px; line-height: 23px; margin: 0 2px; text-align: center; transition: background-color 400ms linear 0s; width: 25px; } .top-info li:hover a { color: #fff!important; } .top-info li:hover a.my-tweet { background: #3ABDD1; } .top-info li:hover a.my-facebook { background: #648CD5; } .top-info li:hover a.my-skype { background: #00AFFF; } .top-info li:hover a.my-pint { background: #DE5656; } .top-info li:hover a.my-rss { background: #EF8D1F; } .top-info li:hover a.my-google { background: #E73904; } .ie8 #header { border-bottom: 1px solid #e9e9e9; } /* Logo ====================================*/ #logo-bar { padding: 12px 0; background-color: #e67e22; } #logo-bar.scroll-to-fixed-fixed { box-shadow: 0 0 10px #9C9999; -webkit-box-shadow: 0 0 10px #9C9999; -moz-box-shadow: 0 0 10px #9C9999; -ms-box-shadow: 0 0 10px #9C9999; -o-box-shadow: 0 0 10px #9C9999; } #logo { float: left; } #logo>h1 { margin: 0; line-height: 0; font-size: 0; } #logo a img { max-width: 100%; height: auto; } .content { padding: 30px 0 60px; position: relative; } .sub_content { padding: 30px 0; } /* page_head Title ====================================*/ .page_head { border-bottom: 1px solid #eee; padding: 0; } .page_head>.container { padding: 30px 0; } .page_title { float: left; } .page_title h2 { background: #333333; color: #000; float: left; font-size: 24px; font-weight: 600; text-transform: uppercase; margin-bottom: 2px; margin-top: 0; padding: 2px 9px; } .sub_heading { display: block; background: #fff; color: #666; font-size: 16px; padding: 5px 8px; border-left: 2px solid #e67e22; clear: both; } /* Breadcrumbs ====================================*/ #breadcrumbs { background: #fff; margin-top: 25px; padding: 2px 6px; float: right; border-left: 2px solid #e67e22; } #breadcrumbs ul { float: right; font-size: 12px; padding: 0; margin: 0; } #breadcrumbs ul li { display: inline-block; color: #888; padding: 0 11px 0 0; margin: 0 0 0 5px; background: url(../images/breadcrumbs.png) no-repeat 100% 50%; } #breadcrumbs ul li:last-child a, #breadcrumbs ul li a { color: #e67e22; } #breadcrumbs ul li:first-child { padding-right: 0; margin-left: 0; } #breadcrumbs ul li:first-child, #breadcrumbs ul li:last-child { color: #888; background: none; } #breadcrumbs ul li:last-child { padding: 0; background: none; } /* =================================================================== */ /* 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-nav ul { width: 100%; min-width: 187px!important; padding: 0; } .navbar-nav>li>ul.dropdown-menu { top: 48px!important; } .navbar-toggle { background: #303436; border: none; padding: 10px 10px; border-radius: 3px; margin-top: 5px; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background: #303436; } .navbar-default .navbar-toggle .icon-bar { background-color: #fff; height: 3px; } .navbar { margin-bottom: 0; background: #323A45; min-height: 50px; border: none; border-top: 7px solid #fff; /*position: relative;*/ } /* 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>li>.has-submenu .sub-arrow { display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; font-size: 14px; width: 8px; height: 8px; line-height: 8px; border-width: 0px; } .navbar-nav>li>.has-submenu .sub-arrow:before { content: "\f107"; } .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-nav ul a.has-submenu { padding-right: 30px; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: transparent; } /* 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; } .navbar-nav { border-right: 1px solid #19222d; /*border-left: 1px solid #425166;*/ } .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-default .navbar-nav li a { color: #555; text-transform: uppercase; font-size: 15px; font-weight: 600; line-height: 15px; } .navbar-default .navbar-nav>li { border-left: 1px solid #19222d; border-right: 1px solid #425166; } .navbar-default .navbar-nav>li:first-child { border-left: none; } .navbar-default .navbar-nav>li>a { padding: 12px 18px; color: #fff; } .navbar-nav>li>a:hover, .navbar-nav>li>a:focus, .navbar-nav>li.active>a, .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav .open .dropdown-menu>.active>a, .navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover, .navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus, .navbar-default .navbar-nav .open .dropdown-menu>.disabled>a, .navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:hover, .navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:focus { background: #e67e22!important; color: #fff!important; } /* 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>li>ul:before { content: ""; position: absolute; border: 11px solid transparent; border-bottom-color: #e67e22; top: -22px; left: 36%; } .navbar-nav>li ul>li:first-child { border-top: 2px solid #e67e22; } .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: #44474E; } .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 .open>a, .nav .open>a:hover, .nav .open>a:focus { border-color: transparent!important; } .dropdown-menu>.active>a, .dropdown-menu>.active>a:hover, .dropdown-menu>.active>a:focus { background-color: #fff; } /* ===================================================== */ /* 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: 15px; } .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 { background: #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 { content: ""; font-family: fontawesome; 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: #3abdd1; } .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: #e67e22; } /* 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: #e67e22 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: #e67e22 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: #e67e22; 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: #e67e22; } .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: #e67e22; -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: #e67e22; -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_list { /*position:relative;*/ } /* Hover Effect on Portfolio Image ====================================*/ .hoverlay { position: relative; overflow: hidden; perspective: 300px; -webkit-perspective: 300px; -ms-perspective: 300px; -o-perspective: 300px; } .hoverlay>img { width: 100%; } .hoverlay .hoverlay-box { width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; right: 0; background: #444444; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; transform-origin: center top; -ms-transform-origin: center top; -webkit-transform-origin: center top; transform: rotateX(-125deg); -ms-transform: rotateX(-125deg); /* IE 9 */ -webkit-transform: rotateX(-125deg); /* Opera, Chrome, and Safari */ } .hoverlay:hover .hoverlay-box { width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #e67e22; transform-origin: center top; -ms-transform-origin: center top; -webkit-transform-origin: center top; transform: rotateX(0deg); -ms-transform: rotateX(0deg); /* IE 9 */ -webkit-transform: rotateX(0deg); /* Opera, Chrome, and Safari */ } .hoverlay-data { width: 100%; height: 100%; text-align: center; } .hoverlay-data>h5 { color: #fff; font-size: 23px; line-height: 30px; font-weight: bold; margin-top: 22%; } .small-images .hoverlay-data>h5 { font-size: 19px; line-height: 20px; font-weight: bold; margin-top: 15%; } .hoverlay-data>span { color: #fff; font-size: 20px; line-height: 27px; display: block; } .small-images .hoverlay-data>span { font-size: 16px; } .hoverlay-data>a { font-size: 22px; border-radius: 3px; background: #fff; color: #878787; padding: 8px; margin: 12px 3px; display: inline-block; } .small-images .hoverlay-data>a { font-size: 17px; padding: 7px; } .hoverlay-data>a:hover { color: #e67e22; } /* 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; } /* ======================================================================== */ /* 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: #e67e22; } .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: #e67e22 } .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: #e67e22; 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: #e67e22; color: #FFFFFF; font-size: 22px; font-weight: 600; padding: 10px; } .blog_large .month, .blog_single .month { background: #555; color: #FFFFFF; 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: #e67e22; } .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: #e67e22; } .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: #e67e22; color: #FFFFFF; font-size: 22px; font-weight: 600; padding: 5px 10px; } .blog_medium .month { background: #555; color: #FFFFFF; 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: #e67e22; } .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: #e67e22; } .blog_medium .post_content>p { margin-bottom: 20px; } /*SINGLE POST /* ========================== */ .about_author { background: #f2f2f2; overflow: hidden; position: relative; } .author_desc { background: #e67e22; float: left; height: 100%; min-height: 100%; overflow: hidden; padding: 20px 0; position: absolute; text-align: center; width: 25%; } .author_desc>img { background: #FFFFFF; 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: #e67e22; } /* 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: #e67e22; } .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; } .news_content .metaPost { margin-top: 0; } .news_content .titlePost>h4 { font-size: 28px; line-height: 1.4; margin-bottom: 0; margin-top: 0; padding-bottom: 0; } .news-slider { margin-bottom: 30px; } /* comment list */ .news_comments { margin: 50px auto; } #comment-list { margin: 0; padding: 0; } #comment-list li { background: none; margin: 0; padding: 0; overflow: hidden; } /* Comment ============================*/ #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: #e67e22; } .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 li .comment-container:hover a { color: #e67e22; } #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: #e67e22; } /* comment hover effect */ #comment-list li .comment-container:hover h4 { color: #e67e22; } .comment-reply-link { position: absolute; right: 20px; top: 20px; } a.link-style3 { color: inherit !important; font-size: 12px; font-weight: 700; text-decoration: none !important; text-transform: uppercase; } .comment-reply-link { 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 */ /* ===================================================== */ /* Texture Section =========================== */ .texture-section { padding: 65px 0; margin: 20px 0 30px; background: #96D3C6; } .texture1 { background: url(../images/pattern-1.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: #e67e22; } .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: #e67e22; } .post-detail .read-more:hover { color: #e67e22; } .dashed { border-color: #DBDFE2; border-style: dashed; } /* Feature Block =========================== */ .feature-block { padding: 30px 0; } .feature-block h4 { color: #363333; font: 300 38px/30px "open sans", Helvetica, Arial, sans-serif; margin: 0; padding-bottom: 20px; } .feature-block p { font: 500 13px/22px "open sans", Helvetica, Arial, sans-serif; color: #A6A1A1; } .feature-block i.fa { font-size: 40px; margin: 0 13px 0 0; } .feature-block hr { border-color: #D0D0D0; margin: 20px 0; } /* ===================================================== */ /* 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; } /* ===================================================== */ /* 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 { padding: 30px 0 60px; } .pic { border: 1px solid #eee; border-bottom: none; position: relative; overflow: hidden; } .pic>img { width: 100%; cursor: pointer; transition: all 0.7s ease-in-out; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -ms-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; } .pic>img:hover { cursor: pointer; } .names { font-family: Pt Sans, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; margin-top: 10px; color: #666; text-transform: uppercase; } .names>small { float: right; font-size: 12px; font-weight: 600; line-height: 30px; text-transform: capitalize; } .description { color: #666666; font-family: PT sans, Helvetica, Arial, sans-serif; font-size: 14px; } .team_prof { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; border-color: -moz-use-text-color #ecf0f1 #f2f2f2; border-style: none solid solid; border-width: medium 1px 1px; border-color: #f2f2f2; padding: 10px 15px 5px; overflow: hidden; } /* ===================================================== */ /* SOCIAL MEDIA OUR TEAM */ /* ===================================================== */ .our-team { overflow: hidden; } .social_media_team { position: absolute; background: rgba(219, 110, 7, 0.781); border: 1px solid #ccc; height: 100%; width: 100%; top: 0; left: 0; text-align: center; transform: scale(0); -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; visibility: hidden; } .our-team:hover .social_media_team { visibility: visible; transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); } .our-team:hover .pic>img { transform: scale(1.5); -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); } .team_social { list-style: none outside none; margin: 37% 0 0 23%; overflow: hidden; padding: 0; } .team_social li { float: left; margin: 0 5px; } .team_social li a { color: #fff; background: #363636; display: block; height: 35px; text-align: center; width: 35px; 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; } .team_social li a i { font-size: 16px; line-height: 35px; margin-right: 0; float: none; } .team_social li a.fb:hover { background: #2f5a9a; color: #fff; } .team_social li a.twtr:hover { background: #3abdd1; } .team_social li a.gmail:hover { background: #E72828; } /* =================================================================== */ /* 11. CONTACT PAGE FORM ====================================================================== */ #contactForm { margin-top: 30px; } 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: #e67e22; box-shadow: 0.5px 0px 0.5px #e67e22; outline: none; } 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; } /*MAPS =========================== */ .contact { padding: 50px 0; } .maps { position: relative; } #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: #e67e22; 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 ================================================== */ .jcarousel { position: relative; overflow: hidden; width: 100%; } .jcarousel ul { position: absolute; list-style: none; margin: 0; padding: 0; } .carousel-navi { bottom: 17px; float: right; position: absolute; right: 15px; } .carousel-intro { position: relative; } .jcarousel-list li { margin-bottom: 30px; width: 234px; padding-left: 10px; padding-right: 10px; } .jcarousel-list .hoverlay-data>h5 { color: #fff; font-size: 16px; font-weight: bold; line-height: 12px; margin-top: 15%; } .jcarousel-list .hoverlay-data>span { font-size: 15px; } .jcarousel-list .hoverlay-data>a { font-size: 16px; margin: 12px 4px; padding: 4px 6px; } .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; } /*--------------------------------------------------------------------------*/ /* 14. TESTIMONIALS /*--------------------------------------------------------------------------*/ .testimonial-item blockquote { background: #EAEAEA; border-top: 3px solid #e67e22; 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 #e67e22; 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: #e67e22; 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: #e67e22; display: block; } .parallax-testimonial .carousel-indicators { bottom: 0; margin-bottom: 0; } /* ======================================================================== */ /* 15. Parallax /* ======================================================================== */ section.parallax { /*min-height: 450px;*/ /*margin: 0 0 30px;*/ padding: 65px 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 { /*min-height: 450px;*/ /*margin: 0 0 30px;*/ padding: 65px 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: linear-gradient(to bottom, rgba(199, 177, 241, 0.6), rgba(199, 177, 241, 0.6)), url("../images/1.jpeg"); } 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: #B3ADAD; font: 600 20px/20px "arial"; } /* ======================================================================== */ /* 16. Icon Service Boxes /* ======================================================================== */ .info_service { padding: 20px 0 0; } /* Service Box 1 ====================================*/ .serviceBox_1 .icon_service { display: block; position: relative; margin-bottom: 10px; } .serviceBox_1 .icon_service>h3 { display: inline-block; font-size: 20px; font-weight: 600; margin-left: 3%; position: relative; margin-top: 0; } .serviceBox_1 .icon_service i { display: inline-block; font-size: 20px; line-height: 40px; height: 40px; width: 40px; text-align: center; background: #e67e22; color: #fff; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; -ms-border-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 .fr_content { position: relative; } .serviceBox_1 .fr_content>h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.5px; margin-bottom: 15px; margin-left: 35px; line-height: 20px; -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 .fr_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: #e67e22; font-size: 12px; font-weight: 600; } .serviceBox_1 a.read:hover:after, .serviceBox_1 a.slider-read:hover:after { left: 2px; } .serviceBox_1 a.read:after, .serviceBox_1 a.slider-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%; } .serviceBox_1 a.read:hover { color: #e67e22; } /* service Box 2 ====================================*/ .serviceBox_2 { padding: 15px 15px 25px; margin: 0 auto; text-align: center; cursor: pointer; box-shadow: 0 0 4px #DEDEDE; border-radius: 4px; } .serviceBox_2, .serviceBox_2 i, .serviceBox_2 p, .serviceBox_2 h3 { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .serviceBox_2 p { margin: 0; font-family: lato, Helvetica, Arial, sans-serif; } .serviceBox_2 h3 { font-size: 20px; font-weight: 600; position: relative; margin-top: 0; } .serviceBox_2 i { color: #fff; font-size: 2em; margin: 10px 0 22px; background: #313131; display: inline-block; width: 62px; height: 62px; line-height: 62px; border-radius: 50%; } .serviceBox_2:hover { background: #e67e22; color: #fff; -webkit-transition: background-color 0.7s ease-in-out; -moz-transition: background-color 0.7s ease-in-out; -o-transition: background-color 0.7s ease-in-out; -ms-transition: background-color 0.7s ease-in-out; transition: background-color 0.7s ease-in-out; } .serviceBox_2:hover h3, .serviceBox_2:hover p { color: #fff; } .serviceBox_2:hover i { color: #e67e22; background: #fff; } /* service Box 3 ====================================*/ .service_3_detail { border: 1px solid #E7E6E6; padding: 0 10px; } .service_3_img { overflow: hidden; } .service_3_img img { width: 100%; 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; } .serviceBox_3>h3 { display: inline-block; font-size: 20px; font-weight: 600; position: relative; margin-top: 15px; } .serviceBox_3>p { color: #747474; font-family: Pt Sans, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; } .serviceBox_3:hover .service_3_detail { border-bottom-color: #e67e22 } .serviceBox_3:hover img { transform: scale(1.4); -webkit-transform: scale(1.4); -moz-transform: scale(1.4); -ms-transform: scale(1.4); -o-transform: scale(1.4); } /* ===================================================== */ /* 17. CLIENTS */ /* ===================================================== */ .clients {} ul.client_items .img { max-width: 100%; width: 166px !important; } ul.client_items { padding: 0; } ul.client_items li { /*float: left;*/ list-style: none; } ul.client_items { position: relative; display: block; } /*--------------------------------------------------------------------------*/ /* 18. TYPOGRAPHY /*--------------------------------------------------------------------------*/ .typography { padding: 30px 0; } .typography h1 { margin-top: 0; } /* ======================================================================== */ /* 19. BUTTONS */ /* ======================================================================== */ .btn { color: #fff; } .btn-default { background: #e67e22; color: #fff; border: none; border-radius: 2px; 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:hover { background: #e67e22; 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 ================================================== */ .pricingBlock { padding-bottom: 30px; position: relative; } .pricingTable { text-align: center; font-weight: 400; } .pricingTable-sign-up { padding: 20px; text-align: center; background: #f2f2f2; } .pricingContent ul li { padding: 5px 20px; text-align: center; } .pricingContent { background: #fff; border-left: 1px solid #f2f2f2; border-right: 1px solid #f2f2f2; } .pricingTable .pricingTable-header { color: #fff; padding: 0px; } .pricingTable-header .heading { display: inline-block; width: 100%; padding: 15px 0px; text-transform: uppercase; font-size: 15px; font-weight: bold; } .pricingTable .heading { background: #F2F2F2; color: #333; } .pricingTable.business .heading { background: #e74c3c; } .pricingTable .pricingTable-header .price-value { background: #555; } .pricingTable-header .price-value { display: inline-block; width: 100%; padding: 20px 0px; } .pricingBlock.theme-color-pt .pricingTable-header .price-value { background: #e67e22; } .pricingTable-header .price-value span { font-size: 250%; } .pricingTable-header .price-value span.mo { font-size: 150%; } .pricingTable { text-align: center; font-weight: 400; margin-bottom: 30px; background: #fff; 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; } .theme-color-pt .pricingTable, .pricingTable { position: relative; box-shadow: 0px 1px 4px 0px #cccccc; -webkit-box-shadow: 0px 1px 4px 0px #cccccc; -moz-box-shadow: 0px 1px 4px 0px #cccccc; box-shadow: 0px 1px 4px 0px #cccccc; border-bottom: 3px solid #e67e22; } .theme-color-pt .pricingTable:hover { transform: none; overflow: visible; } .theme-color-pt .pricingTable:before, .pricingTable:before { content: ""; right: 23%; top: -3px; width: 50%; height: 3px; background: #e67e22; position: absolute; } .pricingTable { border-bottom-color: #696868; } .pricingTable:before, .pricingTable .btn-default { background: #696868; } .pricingTable .btn-default:hover { background: #403F3F; } .theme-color-pt .btn-default { background: #e67e22; } .theme-color-pt .btn-default:hover { background: #e67e22; } .theme-color-pt .pricingTable .heading, .pricingTable .heading { background: #F2F2F2; color: #333; border: 1px solid #E4E4E4; border-bottom: none; } .pricingContent ul li { color: #434343; overflow: hidden; } .pricingContent ul li { border-bottom: 1px solid #F0F0F0; padding: 15px 0; text-align: center; overflow: hidden; display: block; 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; } .pricingBlock.theme-color-pt .pricingContent ul li:nth-child(2n+2), .pricingContent ul li:nth-child(2n+2) { background: #F4F4F4; } .pricingBlock.theme-color-pt .pricingContent ul li:hover, .pricingContent ul li:hover { padding-left: 15px; } .pricingContent ul { margin: 0; padding: 0; } /* -------------------------------------------------- */ /* 21. TABS /* -------------------------------------------------- */ .nav-tabs { border: none; } .nav-tabs>li>a { background: #F8F8F8; border: 1px solid #ebebeb; margin: 0; color: #777777; border-radius: 0; } .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus { border-color: #ebebeb; outline: none; background: white; color: #e67e22; margin: 0 0 -1px 0; border-bottom: none; border-top: 1px solid #e67e22; } .nav-tabs li.active, .nav-tabs li.active a, .nav-tabs li.active a:hover { border-top: 1px solid #e67e22; color: #e67e22; } ul.nav-tabs li a i { font-size: 24px; font-weight: 500; line-height: 30px; } ul.nav-tabs li.last-tab a { padding: 4px 22px; outline: none; } .tab-content { border: 1px solid #ebebeb; padding: 20px 14px; } .tab-content:first-child { display: block; } .tab-content>h3 { color: #555333; font-size: 20px; font-weight: 600; line-height: 24px; margin-top: 0; } .tab-content>p { font-family: lato, Helvetica, Arial, sans-serif; line-height: 20px; } /* 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: #e67e22; } .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: #e67e22; } .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 */ /* =========================================*/ .panel-heading, .panel-group .panel { border-radius: 0; } .panel-heading { padding-right: 6px; padding-left: 6px; } .panel.active_acc { border-top-color: #e67e22; } .active_acc .panel-title a, .active_acc .accordian-icon { color: #e67e22; } .panel.active_acc, .panel:hover { border-top-color: #e67e22; } .panel-heading:hover a, .panel-heading:hover .accordian-icon { color: #404436; } .accordian-icon { float: left; padding: 0 8px; } .panel-default>.panel-heading { background: none; } .panel-title>a { font-size: 16px; font-weight: 500; margin-bottom: 0; color: #585858; display: block; outline: none; text-decoration: none; } .panel-group .panel-heading+.panel-collapse .panel-body { border-top: none; } /* ===================================================== */ /* 23. PROGRESS SKILL BAR */ /* ===================================================== */ .progress-skill-bar { padding: 0; } .progress_skill { background: #F8F8F8; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-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: #e67e22; 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: #e67e22 !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 { background: #e67e22; border-color: #e67e22; } .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus { background: #e67e22; border-color: #e67e22; } /* ================================================== 26. TITLE ================================================== */ .dividerHeading, .widget_title { text-align: center; position: relative; margin-bottom: 30px; } .dividerHeading h4, .widget_title h4 { font-size: 18px; position: relative; line-height: 0; border-bottom: 1px solid #e67e22; } .dividerHeading h4 span { background: white; position: relative; line-height: 7px; top: 4px; display: inline-block; } .dividerHeading h4 span:before, .dividerHeading h4 span:after, .widget_title h4 span:after, .widget_title h4 span:before { color: #e67e22; font-size: 10px; content: "\f10c"; font-family: fontawesome; display: inline-block; } .dividerHeading h4 span:before, .widget_title h4 span:before { margin-right: 10px; } .dividerHeading h4 span:after, .widget_title h4 span:after { margin-left: 10px; } .widget_title { position: relative; } .widget_title h4 { font-size: 14px; text-transform: uppercase; } .footer .widget_title h4 { border-color: #dfdfdf; } .footer .widget_title h4 span:before, .footer .widget_title h4 span:after { color: #dfdfdf!important; } .footer .widget_title h4 span { color: #fff; padding: 0; background: #323A45; } /* ===================================================== */ /* 27. DROPCAPS */ /* ===================================================== */ .dropcap { float: left; color: #169fe6; font-size: 58px; line-height: 54px; padding: 6px 10px 8px; margin-top: 8px; } .dropcap.default { color: #e67e22; } .dropcap.gray { color: #555; } .dropcap.light { color: #aaa; } .dropcap_block { float: left; background-color: #e67e22; font-size: 50px; line-height: 50px; padding: 6px 10px 8px; margin-top: 8px; margin-right: 10px; color: #fff; } .dropcap_block.default { background-color: #e67e22; } .dropcap_block.gray { background-color: #555; } .dropcap_block.light { background-color: #aaa; } /* ===================================================== */ /* 28. HIGHLIGHT */ /* ===================================================== */ .highlight { padding: 0px 6px 2px; color: #fff; } .highlight.default { background: #e67e22; } .highlight.gray { background: #4c4c4c; } .highlight.light { background: #aaa; } blockquote.default { border-color: #e67e22; 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: #e67e22; } .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 ================================================== */ .porDetCarousel, .porDet2Carousel { margin-bottom: 40px; overflow: hidden; } .carousel-content, .porDetCarousel, .porDet2Carousel { 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%; } .aboutCarousel:hover .carousel-prev { left: 10px; } .aboutCarousel:hover .carousel-next { right: 10px; } .porDetCarousel:hover .carousel-prev { left: 10px; } .porDetCarousel:hover .carousel-next { right: 10px; } .porDet2Carousel:hover .carousel-prev { left: 10px; } .porDet2Carousel: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: #e67e22; } /* ===================================================== */ /* 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); /* internet explorer */ -khtml-opacity: 1; /* khtml, old safari */ -moz-opacity: 1; /* mozilla, netscape */ opacity: 1; /* fx, safari, opera */ } .flickr-feed li .hover { position: absolute; width: 62px; height: 62px; background: #e67e22; 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-right:50px; overflow: hidden; padding: 0; } .footbot_social li { float: left; background: none !important; } .footbot_social li a { background: #1964DA; border-radius: 5px; color: #fff; 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: #e67e22; text-decoration: none; } .list_style li a.active { color: #e67e22; } /* --------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: #e67e22; 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: #e67e22; 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: #e67e22; 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: #e67e22; 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: #e67e22; 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: #e67e22; 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: #e67e22; 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: #e67e22; 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. Media Query */ /* ===================================================== */ @media only screen and (min-width: 980px) and (max-width: 1280px) { .names { font-size: 14px } .team_social { margin: 37% 0 0 29%; } .blog_medium .post_img { width: 30%; } .shares li.shareslabel h3 { padding: 8px 14px; } .comment_form>input { width: 30%; } .large-images .recent-item:hover a.hover-zoom, .medium-images .recent-item:hover a.hover-zoom, .small-images .recent-item:hover a.hover-zoom { left: 22%; top: 38%; } .large-images .recent-item:hover a.hover-link, .medium-images .recent-item:hover a.hover-link, .small-images .recent-item:hover a.hover-link { right: 22%; top: 38%; } .recent-item h5 { margin: 0 0 44%!important; } .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 (min-width: 768px) and (max-width: 989px) { #logo { margin: 0; width: 78px; } .navbar-default .navbar-nav li a { padding: 14px; } .recent-item h5 { margin-top: 20px; } .large-images .recent-item:hover a.hover-zoom, .large-images .recent-item:hover a.hover-link, .medium-images .recent-item:hover a.hover-zoom, .medium-images .recent-item:hover a.hover-link, .small-images .recent-item:hover a.hover-link, .small-images .recent-item:hover a.hover-zoom, .jcarousel .recent-item:hover a.hover-zoom, .jcarousel .recent-item:hover a.hover-link { top: 41%; opacity: 1; } .large-images .recent-item:hover a.hover-zoom, .medium-images .recent-item:hover a.hover-zoom, .small-images .recent-item:hover a.hover-zoom { left: 20%; } .large-images .recent-item:hover a.hover-link, .medium-images .recent-item:hover a.hover-link, .small-images .recent-item:hover a.hover-link { right: 20%; } .tab-content { margin-bottom: 30px; } .team_social { margin: 37% 0 0 29%; } .post-images { margin-right: 15px; } } @media only screen and (max-width:768px) { #logo a img { height: auto; } .jcarousel-list li { width: 248px; } .tab-content { margin-bottom: 30px; } .nav-tabs>li>a { padding: 10px 10px; } .serviceBox_1, .serviceBox_2, .serviceBox_3 { margin-bottom: 30px; } .team_social { margin: 37% 0 0 42%; } .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; } } @media only screen and (max-width: 767px) { #logo-bar { display: none; } #logo { margin: 7px 0 7px 15px; } .navbar { background: #e67e22; border-color: transparent; } .navbar.scroll-to-fixed-fixed { box-shadow: 0 0 10px #9c9999; } .navbar-nav { background: #303436; margin: 0; } .navbar-collapse { position: absolute; width: 100%; } .navbar-nav>li ul>li:first-child>a { border-top: none; } .navbar-default .navbar-nav>li>a, .navbar-nav .dropdown-menu>li>a { padding-top: 12px!important; padding-bottom: 12px!important; border-top: 1px solid #464c4f!important; border-bottom: none!important; } .navbar-nav .open .dropdown-menu>li>a, .navbar-nav .open .dropdown-menu .dropdown-header, .navbar-default .navbar-nav .open .dropdown-menu>li>a { padding-left: 45px; color: #fff; font-size: 13px; } .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover, .navbar-default .navbar-nav .open .dropdown-menu>li>a:focus { background: #e67e22; 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; } .page_head { padding: 20px 0; } .page_head h2 { font-size: 20px; } #breadcrumbs { float: left; clear: left; margin-top: 5px; } .serviceBox_1, .serviceBox_3 { margin-bottom: 30px; } .list_style li i { margin-right: 0; } 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_content a { display: block; float: none; color: #fff; margin-top: 20px; } .list_style { margin: 0 0 30px; } .pricingTable { margin-bottom: 50px; } .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; } } @media only screen and (min-width: 481px) and (max-width: 767px) { .large-images .recent-item:hover a.hover-zoom, .medium-images .recent-item:hover a.hover-zoom, .small-images .recent-item:hover a.hover-zoom { left: 37%; } .large-images .recent-item:hover a.hover-link, .medium-images .recent-item:hover a.hover-link, .small-images .recent-item:hover a.hover-link { right: 37%; } .jcarousel .recent-item:hover a.hover-zoom { left: 37%; } .jcarousel .recent-item:hover a.hover-link { right: 37%; } .author_bio { margin-top: 35%; position: relative; } } @media only screen and (max-width: 480px) { #breadcrumbs { display: none; } .team_social { margin: 37% 0 0 31%; } .large-images .recent-item:hover a.hover-zoom, .medium-images .recent-item:hover a.hover-zoom, .small-images .recent-item:hover a.hover-zoom { left: 37%; } .large-images .recent-item:hover a.hover-link, .medium-images .recent-item:hover a.hover-link, .small-images .recent-item:hover a.hover-link { right: 37%; } .jcarousel .recent-item:hover a.hover-zoom { left: 37%; } .jcarousel .recent-item:hover a.hover-link { right: 37%; } .author_bio { margin-top: 55%; position: relative; } #filter li a { padding: 10px; } .post-images { width: 100%; margin-right: 0px; margin-bottom: 15px; } .post-detail { width: 100%; } } .ch { margin-left: 10px; font-size: 14px; } .sweet-overlay { background-color: rgba(255, 255, 255, 0.9); position: fixed; left: 0; right: 0; top: 0; bottom: 0; display: none; outline: none !important; z-index: 10000; } .sweet-alert { background-color: white; width: 478px; padding: 20px; border-radius: 3px; text-align: center; position: fixed; left: 50%; top: 50%; margin-left: -259px; margin-top: -200px; -webkit-box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.15); overflow: hidden; display: none; z-index: 99999; } @media all and (max-width: 540px) { .sweet-alert { width: auto; margin-left: 0; margin-right: 0; left: 15px; right: 15px; } } .sweet-alert h2 { color: #575757; font-size: 30px; text-align: center; font-weight: 500; text-transform: none; position: relative; margin: 15px 0 0 0; padding: 0; line-height: 40px; display: block; } .sweet-alert p { color: #797979; font-size: 16px; text-align: center; font-weight: 400; position: relative; text-align: inherit; float: none; margin: 0; padding: 0; line-height: normal; } .sweet-alert fieldset { border: none; position: relative; } .sweet-alert .sa-error-container { background-color: #f1f1f1; margin-left: -17px; margin-right: -17px; overflow: hidden; padding: 0 10px; max-height: 0; webkit-transition: padding 0.15s, max-height 0.15s; -webkit-transition: padding 0.15s, max-height 0.15s; -o-transition: padding 0.15s, max-height 0.15s; transition: padding 0.15s, max-height 0.15s; } .sweet-alert .sa-error-container.show { padding: 10px 0; max-height: 100px; webkit-transition: padding 0.2s, max-height 0.2s; -webkit-transition: padding 0.25s, max-height 0.25s; -o-transition: padding 0.25s, max-height 0.25s; transition: padding 0.25s, max-height 0.25s; } .sweet-alert .sa-error-container .icon { display: inline-block; width: 24px; height: 24px; border-radius: 50%; background-color: #ea7d7d; color: white; line-height: 24px; text-align: center; margin-right: 3px; } .sweet-alert .sa-error-container p { display: inline-block; } .sweet-alert .sa-input-error { position: absolute; top: 22px; right: 10px; width: 20px; height: 20px; opacity: 0; -webkit-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transition: all 0.1s; -o-transition: all 0.1s; transition: all 0.1s; } .sweet-alert .sa-input-error::before, .sweet-alert .sa-input-error::after { content: ""; width: 20px; height: 6px; background-color: #f06e57; border-radius: 3px; position: absolute; top: 50%; margin-top: -4px; left: 50%; margin-left: -9px; } .sweet-alert .sa-input-error::before { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .sweet-alert .sa-input-error::after { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .sweet-alert .sa-input-error.show { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .sweet-alert input { display: none; width: 100%; height: 40px; padding: 8px 12px 4px; font-size: 14px; font-weight: 500; line-height: 1.44; color: #555; margin-top: 10px; margin-bottom: 17px; background-color: #fff; background-image: none; border: 2px solid #ccc; border-radius: 3px; -webkit-transition: border-color ease-in-out 0.15s; -o-transition: border-color ease-in-out 0.15s; transition: border-color ease-in-out 0.15s; } .sweet-alert input:focus { border-color: #009688; outline: none; } .sweet-alert.show-input input { display: block; } .sweet-alert .sa-confirm-button-container { display: inline-block; position: relative; } .sweet-alert .la-ball-fall { position: absolute; left: 50%; top: 50%; margin-left: -27px; margin-top: 4px; opacity: 0; visibility: hidden; } .sweet-alert button { background-color: #009688 !important; color: white; border: none; -webkit-box-shadow: none; box-shadow: none; font-size: 17px; font-weight: 500; border-radius: 3px; padding: 8px 20px; margin: 26px 5px 0 5px; cursor: pointer; } .sweet-alert button:focus { outline: none; -webkit-box-shadow: 0 0 2px rgba(128, 179, 235, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.05); box-shadow: 0 0 2px rgba(128, 179, 235, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.05); } .sweet-alert button:hover { background-color: #00877a; } .sweet-alert button:active { background-color: #00635a; } .sweet-alert button.cancel { background-color: #C1C1C1 !important; } .sweet-alert button.cancel:hover { background-color: #b9b9b9; } .sweet-alert button.cancel:active { background-color: #a8a7a7; } .sweet-alert button.cancel:focus { -webkit-box-shadow: rgba(197, 205, 211, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.0470588) 0px 0px 0px 1px inset !important; box-shadow: rgba(197, 205, 211, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.0470588) 0px 0px 0px 1px inset !important; } .sweet-alert button[disabled] { opacity: .6; cursor: default; } .sweet-alert button.confirm[disabled] { color: transparent; } .sweet-alert button.confirm[disabled]~.la-ball-fall { opacity: 1; visibility: visible; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .sweet-alert button::-moz-focus-inner { border: 0; } .sweet-alert[data-has-cancel-button=false] button { -webkit-box-shadow: none !important; box-shadow: none !important; } .sweet-alert[data-has-confirm-button=false][data-has-cancel-button=false] { padding-bottom: 40px; } .sweet-alert .sa-icon { width: 80px; height: 80px; border: 4px solid gray; border-radius: 40px; border-radius: 50%; margin: 20px auto; padding: 0; position: relative; -webkit-box-sizing: content-box; box-sizing: content-box; } .sweet-alert .sa-icon.sa-error { border-color: #F27474; } .sweet-alert .sa-icon.sa-error .sa-x-mark { position: relative; display: block; } .sweet-alert .sa-icon.sa-error .sa-line { position: absolute; height: 5px; width: 47px; background-color: #F27474; display: block; top: 37px; border-radius: 2px; } .sweet-alert .sa-icon.sa-error .sa-line.sa-left { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); left: 17px; } .sweet-alert .sa-icon.sa-error .sa-line.sa-right { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); right: 16px; } .sweet-alert .sa-icon.sa-warning { border-color: #F8BB86; } .sweet-alert .sa-icon.sa-warning .sa-body { position: absolute; width: 5px; height: 47px; left: 50%; top: 10px; border-radius: 2px; margin-left: -2px; background-color: #F8BB86; } .sweet-alert .sa-icon.sa-warning .sa-dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; margin-left: -3px; left: 50%; bottom: 10px; background-color: #F8BB86; } .sweet-alert .sa-icon.sa-info { border-color: #C9DAE1; } .sweet-alert .sa-icon.sa-info::before { content: ""; position: absolute; width: 5px; height: 29px; left: 50%; bottom: 17px; border-radius: 2px; margin-left: -2px; background-color: #C9DAE1; } .sweet-alert .sa-icon.sa-info::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; margin-left: -3px; top: 19px; background-color: #C9DAE1; } .sweet-alert .sa-icon.sa-success { border-color: #A5DC86; } .sweet-alert .sa-icon.sa-success::before, .sweet-alert .sa-icon.sa-success::after { content: ''; border-radius: 40px; border-radius: 50%; position: absolute; width: 60px; height: 120px; background: white; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .sweet-alert .sa-icon.sa-success::before { border-radius: 120px 0 0 120px; top: -7px; left: -33px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 60px 60px; -ms-transform-origin: 60px 60px; transform-origin: 60px 60px; } .sweet-alert .sa-icon.sa-success::after { border-radius: 0 120px 120px 0; top: -11px; left: 30px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0px 60px; -ms-transform-origin: 0px 60px; transform-origin: 0px 60px; } .sweet-alert .sa-icon.sa-success .sa-placeholder { width: 80px; height: 80px; border: 4px solid rgba(165, 220, 134, 0.2); border-radius: 40px; border-radius: 50%; -webkit-box-sizing: content-box; box-sizing: content-box; position: absolute; left: -4px; top: -4px; z-index: 2; } .sweet-alert .sa-icon.sa-success .sa-fix { width: 5px; height: 90px; background-color: white; position: absolute; left: 28px; top: 8px; z-index: 1; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .sweet-alert .sa-icon.sa-success .sa-line { height: 5px; background-color: #A5DC86; display: block; border-radius: 2px; position: absolute; z-index: 2; } .sweet-alert .sa-icon.sa-success .sa-line.sa-tip { width: 25px; left: 14px; top: 46px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .sweet-alert .sa-icon.sa-success .sa-line.sa-long { width: 47px; right: 8px; top: 38px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .sweet-alert .sa-icon.sa-custom { background-size: contain; border-radius: 0; border: none; background-position: center center; background-repeat: no-repeat; } .has-error { color: red !important; border-color: red; } .has-error.form-control, .has-error .form-control {} .has-error.form-control:focus, .has-error .form-control:focus { color: red; } /*///////////////////////////////// ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss///////////////////////////////////////////////*/ legend { display: block; width: 100%; max-width: 100%; padding: 0; margin-bottom: .5rem; font-size: 1.5rem; line-height: inherit; color: inherit; white-space: normal } progress { vertical-align: baseline } [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto } [type=search] { outline-offset: -2px; -webkit-appearance: none } [type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration { -webkit-appearance: none } ::-webkit-file-upload-button { font: inherit; -webkit-appearance: button } output { display: inline-block } summary { display: list-item; cursor: pointer } template { display: none } [hidden] { display: none!important } .display-1 { font-size: 6rem; font-weight: 300; line-height: 1.2 } .display-2 { font-size: 5.5rem; font-weight: 300; line-height: 1.2 } .display-3 { font-size: 4.5rem; font-weight: 300; line-height: 1.2 } .display-4 { font-size: 3.5rem; font-weight: 300; line-height: 1.2 } .small, small { font-size: 80%; font-weight: 400 } .mark, mark { padding: .2em; background-color: #fcf8e3 } .list-unstyled { padding-left: 0; list-style: none } .list-inline { padding-left: 0; list-style: none } .list-inline-item { display: inline-block } .list-inline-item:not(:last-child) { margin-right: .5rem } .initialism { font-size: 90%; text-transform: uppercase } .blockquote { margin-bottom: 1rem; font-size: 1.25rem } .blockquote-footer { display: block; font-size: 80%; color: #6c757d } .blockquote-footer::before { content: "\2014 \00A0" } .img-fluid { max-width: 100%; height: auto } .img-thumbnail { padding: .25rem; background-color: #fff; border: 1px solid #dee2e6; border-radius: .25rem; max-width: 100%; height: auto } .figure { display: inline-block } .figure-img { margin-bottom: .5rem; line-height: 1 } .figure-caption { font-size: 90%; color: #6c757d } code { font-size: 87.5%; color: #e83e8c; word-break: break-word } a>code { color: inherit } kbd { padding: .2rem .4rem; font-size: 87.5%; color: #fff; background-color: #212529; border-radius: .2rem } kbd kbd { padding: 0; font-size: 100%; font-weight: 700 } pre { display: block; font-size: 87.5%; color: #212529 } pre code { font-size: inherit; color: inherit; word-break: normal } .pre-scrollable { max-height: 340px; overflow-y: scroll } @media (min-width:576px) { .form-inline label { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 0 } .form-inline .form-group { display: -ms-flexbox; display: flex; -ms-flex: 0 0 auto; flex: 0 0 auto; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-align: center; align-items: center; margin-bottom: 0 } .form-inline .form-control { display: inline-block; width: auto; vertical-align: middle } .form-inline .form-control-plaintext { display: inline-block } .form-inline .custom-select, .form-inline .input-group { width: auto } .form-inline .form-check { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; width: auto; padding-left: 0 } .form-inline .form-check-input { position: relative; margin-top: 0; margin-right: .25rem; margin-left: 0 } .form-inline .custom-control { -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center } .form-inline .custom-control-label { margin-bottom: 0 } } .fade { transition: opacity .15s linear } .custom-select { display: inline-block; width: 100%; height: calc(2.25rem + 2px); padding: .375rem 1.75rem .375rem .75rem; line-height: 1.5; color: #495057; vertical-align: middle; background-size: 8px 10px; border: 1px solid #ced4da; border-radius: .25rem; -webkit-appearance: none; -moz-appearance: none; appearance: none } .custom-select:focus { border-color: #80bdff; outline: 0; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 5px rgba(128, 189, 255, .5) } .custom-select:focus::-ms-value { color: #495057; background-color: #fff } .custom-select[multiple], .custom-select[size]:not([size="1"]) { height: auto; padding-right: .75rem; background-image: none } .custom-select:disabled { color: #6c757d; background-color: #e9ecef } .custom-select::-ms-expand { opacity: 0 } .custom-select-sm { height: calc(1.8125rem + 2px); padding-top: .375rem; padding-bottom: .375rem; font-size: 75% } .custom-select-lg { height: calc(2.875rem + 2px); padding-top: .375rem; padding-bottom: .375rem; font-size: 125% } .custom-file { position: relative; display: inline-block; width: 100%; height: calc(2.25rem + 2px); margin-bottom: 0 } .custom-file-input { position: relative; z-index: 2; width: 100%; height: calc(2.25rem + 2px); margin: 0; opacity: 0 } .custom-file-input:focus~.custom-file-label { border-color: #80bdff; box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25) } .custom-file-input:focus~.custom-file-label::after { border-color: #80bdff } .custom-file-input:lang(en)~.custom-file-label::after { content: "Browse" } .custom-file-label { position: absolute; top: 0; right: 0; left: 0; z-index: 1; height: calc(2.25rem + 2px); padding: .375rem .75rem; line-height: 1.5; color: #495057; background-color: #fff; border: 1px solid #ced4da; border-radius: .25rem } .custom-file-label::after { position: absolute; top: 0; right: 0; bottom: 0; z-index: 3; display: block; height: 2.25rem; padding: .375rem .75rem; line-height: 1.5; color: #495057; content: "Browse"; background-color: #e9ecef; border-left: 1px solid #ced4da; border-radius: 0 .25rem .25rem 0 } .custom-range { width: 100%; padding-left: 0; background-color: transparent; -webkit-appearance: none; -moz-appearance: none; appearance: none } .custom-range:focus { outline: 0 } .custom-range::-moz-focus-outer { border: 0 } .custom-range::-webkit-slider-thumb { width: 1rem; height: 1rem; margin-top: -.25rem; background-color: #007bff; border: 0; border-radius: 1rem; -webkit-appearance: none; appearance: none } .custom-range::-webkit-slider-thumb:focus { outline: 0; box-shadow: 0 0 0 1px #fff, 0 0 0 .2rem rgba(0, 123, 255, .25) } .custom-range::-webkit-slider-thumb:active { background-color: #b3d7ff } .custom-range::-webkit-slider-runnable-track { width: 100%; height: .5rem; color: transparent; cursor: pointer; background-color: #dee2e6; border-color: transparent; border-radius: 1rem } .custom-range::-moz-range-thumb { width: 1rem; height: 1rem; background-color: #007bff; border: 0; border-radius: 1rem; -moz-appearance: none; appearance: none } .custom-range::-moz-range-thumb:focus { outline: 0; box-shadow: 0 0 0 1px #fff, 0 0 0 .2rem rgba(0, 123, 255, .25) } .custom-range::-moz-range-thumb:active { background-color: #b3d7ff } .custom-range::-moz-range-track { width: 100%; height: .5rem; color: transparent; cursor: pointer; background-color: #dee2e6; border-color: transparent; border-radius: 1rem } .custom-range::-ms-thumb { width: 1rem; height: 1rem; background-color: #007bff; border: 0; border-radius: 1rem; appearance: none } .custom-range::-ms-thumb:focus { outline: 0; box-shadow: 0 0 0 1px #fff, 0 0 0 .2rem rgba(0, 123, 255, .25) } .custom-range::-ms-thumb:active { background-color: #b3d7ff } .custom-range::-ms-track { width: 100%; height: .5rem; color: transparent; cursor: pointer; background-color: transparent; border-color: transparent; border-width: .5rem } .custom-range::-ms-fill-lower { background-color: #dee2e6; border-radius: 1rem } .custom-range::-ms-fill-upper { margin-right: 15px; background-color: #dee2e6; border-radius: 1rem } .card { position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 1px solid rgba(0, 0, 0, .125); border-radius: .25rem } .card>hr { margin-right: 0; margin-left: 0 } .card>.list-group:first-child .list-group-item:first-child { border-top-left-radius: .25rem; border-top-right-radius: .25rem } .card>.list-group:last-child .list-group-item:last-child { border-bottom-right-radius: .25rem; border-bottom-left-radius: .25rem } .card-body { -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 1.25rem } .card-title { margin-bottom: .75rem } .card-subtitle { margin-top: -.375rem; margin-bottom: 0 } .card-text:last-child { margin-bottom: 0 } .card-link:hover { text-decoration: none } .card-link+.card-link { margin-left: 1.25rem } .card-header { padding: .75rem 1.25rem; margin-bottom: 0; background-color: rgba(0, 0, 0, .03); border-bottom: 1px solid rgba(0, 0, 0, .125) } .card-header:first-child { border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0 } .card-header+.list-group .list-group-item:first-child { border-top: 0 } .card-footer { padding: .75rem 1.25rem; background-color: rgba(0, 0, 0, .03); border-top: 1px solid rgba(0, 0, 0, .125) } .card-footer:last-child { border-radius: 0 0 calc(.25rem - 1px) calc(.25rem - 1px) } .card-header-tabs { margin-right: -.625rem; margin-bottom: -.75rem; margin-left: -.625rem; border-bottom: 0 } .card-header-pills { margin-right: -.625rem; margin-left: -.625rem } .card-img-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 1.25rem } .card-img { width: 100%; border-radius: calc(.25rem - 1px) } .card-img-top { width: 100%; border-top-left-radius: calc(.25rem - 1px); border-top-right-radius: calc(.25rem - 1px) } .card-img-bottom { width: 100%; border-bottom-right-radius: calc(.25rem - 1px); border-bottom-left-radius: calc(.25rem - 1px) } .card-deck { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column } .card-deck .card { margin-bottom: 15px } @media (min-width:576px) { .card-deck { -ms-flex-flow: row wrap; flex-flow: row wrap; margin-right: -15px; margin-left: -15px } .card-deck .card { display: -ms-flexbox; display: flex; -ms-flex: 1 0 0%; flex: 1 0 0%; -ms-flex-direction: column; flex-direction: column; margin-right: 15px; margin-bottom: 0; margin-left: 15px } } .card-group { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column } .card-group>.card { margin-bottom: 15px } .progress { display: -ms-flexbox; display: flex; height: 1rem; overflow: hidden; font-size: .75rem; background-color: #e9ecef; border-radius: .25rem } .progress-bar { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: center; justify-content: center; color: #fff; text-align: center; white-space: nowrap; background-color: #007bff; transition: width .6s ease } #ads { margin: 30px 0 30px 0; } #ads .card-notify-badge { position: absolute; left: -10px; top: -20px; background: #ee8019; text-align: center; border-radius: 30px 30px 30px 30px; color: #fff; padding: 5px 10px; font-size: 14px; } #ads .card-notify-year { position: absolute; right: -10px; top: -20px; background: #ff4444; border-radius: 50%; text-align: center; color: #fff; font-size: 14px; width: 50px; height: 50px; padding: 15px 0 0 0; } #ads .card-detail-badge { background: #ee8019; text-align: center; border-radius: 30px 30px 30px 30px; color: #fff; padding: 5px 10px; font-size: 14px; } #ads .card:hover { background: #fff; box-shadow: 12px 15px 20px 0px rgba(46, 61, 73, 0.15); border-radius: 4px; transition: all 0.3s ease; } #ads .card-image-overlay { font-size: 20px; } #ads .card-image-overlay span { display: inline-block; } #ads .ad-btn { text-transform: uppercase; width: 150px; height: 40px; border-radius: 80px; font-size: 16px; line-height: 35px; text-align: center; border: 3px solid #ee8019; display: block; text-decoration: none; margin: 20px auto 1px auto; color: #fff; overflow: hidden; position: relative; background-color: #ee8019; } #ads .ad-btn:hover { background-color: #ee8019; color: #1e1717; border: 2px solid #ee8019; background: transparent; transition: all 0.3s ease; box-shadow: 12px 15px 20px 0px rgba(46, 61, 73, 0.15); } #ads .ad-title h5 { text-transform: uppercase; font-size: 18px; } li.text { list-style-image: url('../img/checkbox.jpg'); margin-top: 20px; } .sub-text { font-size: 18px; } li.text-head { font-size: 60px; color: #e67e22; } .row-img { margin: 80px 0px 80px 0px; } .img-rounded { margin: 10px 10px 10px 10px; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); transition-duration: 0.3s; -webkit-transition-duration: 0.3s; /* Safari */ } .img-rounded:hover { cursor: pointer; -webkit-transform: scale(2, 2); -ms-transform: scale(2, 2); transform: scale(2, 2); transition-duration: 0.3s; -webkit-transition-duration: 0.3s; /* Safari */ box-shadow: 10px 10px 5px #888888; z-index: 1; } .btn:focus, .btn:active, button:focus, button:active { outline: none !important; box-shadow: none !important; } #image-gallery .modal-footer { display: block; text-align: center; } .thumb { margin-top: 15px; margin-bottom: 15px; height: 200px; } .contact-form { background: #fff; margin-top: 10%; margin-bottom: 5%; width: 100%; } .contact-image { text-align: center; } .contact-image img { border-radius: 6rem; margin-top: -3%; width: 11%; } .contact-form form { padding: 5%; } .contact-form form .row { margin-bottom: 10px; } .contact-title { font-size: 32px; margin-bottom: 8%; margin-top: -10%; text-align: center; color: #0062cc; } .contact-form .btnContact { width: 50%; border: none; border-radius: 1rem; padding: 1.5%; background: #dc3545; font-weight: 600; color: #fff; cursor: pointer; } .btnContactSubmit { width: 50%; border-radius: 1rem; padding: 1.5%; color: #fff; background-color: #0062cc; border: none; cursor: pointer; } .btn-success { color: #fff; background-color: #e47e0a; border-color: #e47e0a; } .btn-success.active, .btn-success.focus, .btn-success:active, .btn-success:focus, .btn-success:hover, .open>.dropdown-toggle.btn-success { color: #000; background-color: #fff; border-color: #e47e0a }