/* Import Basic Files -------------------------------------------------------------------------- */ @import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700); @import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700); @import url(../fonts/fontawesome/css/font-awesome.min.css); @import url(../fonts/nestolab/styles.css); @import url(../js/plugins/fancybox/jquery.fancybox.css); @import url(../js/plugins/owl-carousel/owl.carousel.css); @import url(../js/plugins/owl-carousel/owl.theme.css); @import url(../js/plugins/wow/animate.min.css); @import url(../js/plugins/supersized/css/supersized.css); /* Template Name: Batekh Description: Responsive Landing Page Template Version: 1.0 Author: NestoLab Notes: Color: #f05557; 1. General 1.1 Main Styles 1.2 Anchor 1.3 Placeholder 1.4 Loader 1.5 Selection Color 1.6 Scrollbar 1.7 Override Fancybox LightBox 2. Typography 3. Main Wrapper 4. Component 4.1 Social Icons 4.2 Icon Animation 4.3 Buttons 4.3.1 Btn Nesto 4.3.2 Btn Nesto Alternative 4.4 Parallax Section 4.5 Hero Container 4.6 Full Hero 4.6.1 Wrapper 4.6.2 Title 4.6.3 Description 4.6.4 Button 4.6.5 Form 4.7 Half Hero 4.8 Section Title Container 4.8.1 Wrapper 4.8.2 Title 4.8.3 Description 4.9 Nesto Section White 4.10 Feature Box 4.10.1 Feature Icon 4.10.2 Feature Title 4.10.3 Description 4.11 To Top 4.12 To Notification Alert 4.12.1 Wrapper 4.12.2 Close Button 4.12.3 Anchor 4.13 Middle Button 5. Header 5.1 Wrapper 5.2 Top Header 5.2.1 Wrapper 5.2.2 Info Menu 5.2.3 Social Icons 5.3 Header Menu 5.3.1 Wrapper 5.3.2 Navbar 5.3.2.1 Wrapper 5.3.2.2 Logo 5.3.2.3 Items 5.3.2.4 Dropdown Menu 5.4 Fixed Header Menu 6. Home Section 6.1 Wrapper 6.1.1 Parallax Version 6.1.2 Image Slider Version 6.1.3 Video Version 6.2 Overlayer 6.3 Container 7. Feature Box Style 1 7.1 Wrapper 7.2 Hover 8. Quote Section 8.1 Wrapper 8.2 Hero Quote 8.2.1 Wrapper 8.2.2 Typography 8.2.3 Anchor 9. Team Section 9.1 Member Box 9.1.1 Wrapper 9.1.2 Image 9.1.3 Name 9.1.4 Title 9.1.5 Description 9.1.6 Social Icons 9.1.6.1 Wrapper 9.1.6.2 List Items 9.1.6.3 Anchor 9.1.7 Hover 10. Skills Section 10.1 Skill Bar 10.1.1 Wrapper 10.1.2 Override Bootstrap Progress Bar 10.1.3 Progress Bar Colors 11. Numbers Section 11.1 Wrapper 11.2 Number Box 11.2.1 Wrapper 11.2.2 Digit 11.2.3 Title 12. Home Recent Posts 12.1 Wrapper 12.2 Container 12.3 Post Meta 12.4 Title 12.5 Hover 13. Footer 13.1 Wrapper 13.2 Top Footer 13.3 Logo 13.3.1 Wrapper 13.3.2 Anchor 13.3.3 Image 13.4 Social Icons 13.4.1 Wrapper 13.4.2 Items 13.4.3 Anchor 13.5 Copyright 14. Breadcrumb Section 14.1 Wrapper 14.2 Container 14.3 Breadcrumb 14.4 Title 15. Feature Component 15.1 Image Wrapper 15.2 Image 15.3 Feature Content 15.4 Feature Buttons 16. Feature Box Style 2 16.1 Wrapper 16.2 Icon 16.3 Hover 17. Process Box 17.1 Wrapper 17.2 Icon 17.3 Title 17.4 Number 17.5 Hover 18. Accordion 18.1 Wrapper 18.2 Heading 18.3 Panel 18.4 Body 18.5 Title 18.6 Anchor 19. Subscribe Section 19.1 Section Title 19.2 Newsletter Form 19.2.1 Wrapper 19.2.2 Form Group 19.2.3 Form Control 19.2.4 Button 20. Modal 20.1 Dialog 20.2 Content 20.3 Response Message 21. Pricing Table 21.1 Wrapper 21.2 Title 21.3 Price 21.3.1 Wrapper 21.3.2 Sign 21.3.3 Duration 21.4 Details 21.4.1 Wrapper 21.4.2 List 21.4.3 Items 21.5 Button 21.6 Featured Table 22. Portfolio Filter 22.1 Wrapper 22.2 Container 22.3 Header 22.4 List 22.4.1 Wrapper 22.4.2 Item 22.5 Hover 23. Portfolio Grid 23.1 Wrapper 23.2 List Items 23.2.1 Wrapper 23.2.2 Item 23.2.2.1 Wrapper 23.2.2.2 Image 23.2.2.3 Content 23.2.2.3.1 Wrapper 23.2.2.3.2 Title 23.2.2.3.3 Anchor 23.2.3.4 Hover 24. Pagination 25. Testimonials Slider 25.1 Wrapper 25.2 Dots 25.3 Quote Item 25.3.1 Wrapper 25.3.2 Content 25.3.2.1 Wrapper 25.3.2.2 Arrow 25.3.2.3 Image 25.3.2.4 Name 25.3.2.5 Web 25.3.2.6 Rate 26. Client Logo 27. Project Details 27.1 Wrapper 27.2 Image 27.3 Slider 27.4 Video 27.5 Title 27.6 List 27.7 Related Projects 27.7.1 Wrapper 27.7.2 Slider 27.7.2.1 Wrapper 27.7.2.2 Items 28. Contact Form 28.1 Form Control 28.2 Textarea 28.3 Button 28.4 Error 29. Contact Info 29.1 Wrapper 29.2 List 29.3 Items 30. Map Section 30.1 Wrapper 30.2 Container 30.3 Map 30.4 Open Button 30.5 Close Button 30.6 Map Height 31. Blog Section 31.1 Wrapper 31.2 Post 31.2.1 Wrapper 31.2.2 Header 31.2.3 Title 31.2.4 Content 31.2.4.1 Wrapper 31.2.4.2 Image 31.2.4.3 Slider 31.2.4.3.1 Wrapper 31.2.4.3.2 Dots 31.2.4.4 Video 31.2.4.5 Excerpt 31.2.5 Share 31.2.5.1 Wrapper 31.2.5.2 Items 31.2.5.3 Anchor 31.2.6 Link 31.2.7 Pagination 32. Sidebar 32.1 Wrapper 32.2 Widget 32.2.1 Wrapper 32.2.2 Title 32.2.3 Search Widget 32.2.3.1 Form Control 32.2.3.2 Hover 32.2.4 Social Widget 32.2.4.1 Wrapper 32.2.4.2 List 32.2.4.3 Items 32.2.4.4 Anchor 32.2.5 Dribbble Widget 32.2.5.1 Wrapper 32.2.5.2 Slider 32.2.5.2.1 Wrapper 32.2.5.2.2 List 32.2.5.2.3 Anchor 32.2.5.2.4 Arrows 32.2.5.2.5 Hover 32.2.6 Flickr Widget 32.2.6.1 Wrapper 32.2.6.2 List 32.2.6.2.1 Wrapper 32.2.6.2.2 Items 32.2.6.2.3 Anchor 32.2.6.2.4 Image 32.2.6.2.5 Hover 32.2.7 Twitter Widget 32.2.7.1 Wrapper 32.2.7.2 List 32.2.7.2.1 Wrapper 32.2.7.2.2 Items 32.2.7.2.3 Date 32.2.8 Behance Widget 32.2.8.1 Wrapper 32.2.8.2 Slider 32.2.8.2.1 Wrapper 32.2.8.2.2 List 32.2.8.2.3 Anchor 32.2.8.2.4 Arrows 32.2.8.2.5 Hover 32.2.9 Category Widget 32.2.9.1 Wrapper 32.2.9.2 Anchor 32.2.10 Tags Widget 32.2.11 Text Widget 33. Sign In / Sign Up / Forget Password 33.1 Nesto Form 33.1.1 Wrapper 33.1.2 Title 33.1.3 Form Control 33.1.4 Password 33.1.5 Buttons 33.1.6 Social Icons 34. 404 Error 34.1 Wrapper 34.2 Title 34.3 Description 34.4 Content 35. Widget Footer 35.1 Wrapper 35.2 Title 35.3 Slider 35.4 Search Widget 35.5 Social Widget 35.6 Dribbble Widget 35.7 Flickr Widget 35.8 Twitter Widget 35.9 Behance Widget 35.10 Widget Widget 35.11 Tags Widget 35.12 Text Widget 36. Blockquote Section 36.1 Wrapper 36.2 Content and Button 37. Boxed Version 38. Dark Version */ /* ========================================================================== 1. General ========================================================================== */ /* 1.1 Main Styles -------------------------------------------------------------------------- */ body { margin: 0; padding: 0; color: #555555; font-weight: 400; overflow-x: hidden; -webkit-text-size-adjust: 100%; font: 15px/25px 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; background-color: #ffffff; background-repeat: repeat; background-attachment: fixed; background-position: 50% 50%; background-image: url('../images/patterns/bg7.png'); } /* * What follows is the result of much research on cross-browser styling. * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, * Kroc Camen, and the H5BP dev community and team. */ .browsehappy { margin: 0.2em 0; background-color: #cccccc; color: #000000; padding: 0.2em 0; } .container { overflow: hidden; } blockquote { margin: 10px 0; } /* 1.2 Anchor -------------------------------------------------------------------------- */ a { outline: none; color: #f05557; cursor: pointer; text-decoration: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -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; transition: all 0.3s ease-in-out; } a:focus, a:hover { outline: none; color: #242434; text-decoration: none; } /* 1.3 Placeholder -------------------------------------------------------------------------- */ input, textarea { color: #000000; } .placeholder { color: #aaaaaa; } /* 1.4 Loader -------------------------------------------------------------------------- */ #loader { top: 0; left: 0; right: 0; bottom: 0; content: ''; width: 100%; height: 100%; position: fixed; z-index: 999999; overflow: hidden; background-color: #242434; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } #loader-container { left: 0; top: 50%; width: 100%; height: 30px; overflow: hidden; margin-top: -15px; text-align: center; position: absolute; } #loader-container .loader-spinner { width: 57px; height: 30px; margin: 0 auto; font-size: 10px; text-align: center; } .loader-spinner > div { width: 6px; height: 100%; margin-left: 3px; display: inline-block; background-color: #f05557; -webkit-animation: stretchdelay 1.2s infinite ease-in-out; -moz-animation: stretchdelay 1.2s infinite ease-in-out; -ms-animation: stretchdelay 1.2s infinite ease-in-out; -o-animation: stretchdelay 1.2s infinite ease-in-out; animation: stretchdelay 1.2s infinite ease-in-out; } .loader-spinner .rect2 { -webkit-animation-delay: -1.1s; -moz-animation-delay: -1.1s; -ms-animation-delay: -1.1s; -o-animation-delay: -1.1s; animation-delay: -1.1s; } .loader-spinner .rect3 { -webkit-animation-delay: -1.0s; -moz-animation-delay: -1.0s; -ms-animation-delay: -1.0s; -o-animation-delay: -1.0s; animation-delay: -1.0s; } .loader-spinner .rect4 { -webkit-animation-delay: -0.9s; -moz-animation-delay: -0.9s; -ms-animation-delay: -0.9s; -o-animation-delay: -0.9s; animation-delay: -0.9s; } .loader-spinner .rect5 { -webkit-animation-delay: -0.8s; -moz-animation-delay: -0.8s; -ms-animation-delay: -0.8s; -o-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4); } 20% { -webkit-transform: scaleY(1); } } @-moz-keyframes stretchdelay { 0%, 40%, 100% { -moz-transform: scaleY(0.4); } 20% { -moz-transform: scaleY(1); } } @-ms-keyframes stretchdelay { 0%, 40%, 100% { -ms-transform: scaleY(0.4); } 20% { -ms-transform: scaleY(1); } } @-o-keyframes stretchdelay { 0%, 40%, 100% { -o-transform: scaleY(0.4); } 20% { -o-transform: scaleY(1); } } @keyframes stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); } 20% { transform: scaleY(1); } } /* 1.5 Selection Color -------------------------------------------------------------------------- */ ::selection { color: #ffffff; text-shadow: none; background-color: #242434; } ::-webkit-selection { color: #ffffff; text-shadow: none; background-color: #242434; } ::-moz-selection { color: #ffffff; text-shadow: none; background-color: #242434; } /* 1.6 Scrollbar -------------------------------------------------------------------------- */ ::-webkit-scrollbar { width: 5px; height: 5px; background-color: #2e2e3e; } ::-webkit-scrollbar-thumb { background-color: #f05557; } /* 1.7 Override Fancybox LightBox -------------------------------------------------------------------------- */ .fancybox-overlay-fixed { z-index: 9999; } .fancybox-opened { z-index: 99991; } /* ========================================================================== 2. Typography ========================================================================== */ h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; color: #242434; font-weight: 400; font-family: 'Droid Serif', 'Helvetica Neue', Helvetica, Arial, sans-serif; } h1 { font-size: 35px; line-height: 40px; } h2 { font-size: 30px; line-height: 37px; } h3 { font-size: 27px; line-height: 33px; } h4 { font-size: 24px; line-height: 30px; } h5 { font-size: 20px; line-height: 28px; } h6 { font-size: 17px; line-height: 25px; } /* ========================================================================== 3. Main Wrapper ========================================================================== */ #main-wrapper { width: 100%; margin: 0 auto; overflow: hidden; max-width: 1440px; position: relative; background-color: #ffffff; } /* ========================================================================== 4. Component ========================================================================== */ /* 4.1 Social Icons -------------------------------------------------------------------------- */ .social-icons { width: 100%; display: block; overflow: hidden; } .social-icons ul { margin: 0; padding: 0; overflow: hidden; list-style: none; text-align: center; display: inline-block; } .social-icons ul li { float: left; overflow: hidden; display: inline-block; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; } .social-icons ul li a { width: 100%; height: 100%; display: block; overflow: hidden; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; } .btn-gplus { background-color: #d53824; } .btn-vimeo { background-color: #4c8ab0; } .btn-behance { background-color: #1769ff; } .btn-twitter { background-color: #3bc1ed; } .btn-youtube { background-color: #bf2f29; } .btn-dribbble { background-color: #ef5a92; } .btn-facebook { background-color: #4a6d9d; } .btn-linkedin { background-color: #0b7bb5; } .btn-pinterest { background-color: #cb1f25; } .btn-instagram { background-color: #3f6f94; } /* Hover */ .btn-gplus:hover, #footer .widget-social .btn-gplus:hover { background-color: #d53824 !important; } .btn-vimeo:hover, #footer .widget-social .btn-vimeo:hover { background-color: #4c8ab0 !important; } .btn-behance:hover, #footer .widget-social .btn-behance:hover { background-color: #1769ff !important; } .btn-twitter:hover, #footer .widget-social .btn-twitter:hover { background-color: #3bc1ed !important; } .btn-youtube:hover, #footer .widget-social .btn-youtube:hover { background-color: #bf2f29 !important; } .btn-dribbble:hover, #footer .widget-social .btn-dribbble:hover { background-color: #ef5a92 !important; } .btn-facebook:hover, #footer .widget-social .btn-facebook:hover { background-color: #4a6d9d !important; } .btn-linkedin:hover, #footer .widget-social .btn-linkedin:hover { background-color: #0b7bb5 !important; } .btn-pinterest:hover, #footer .widget-social .btn-pinterest:hover { background-color: #cb1f25 !important; } .btn-instagram:hover, #footer .widget-social .btn-instagram:hover { background-color: #3f6f94 !important; } .btn-gplus:hover, .btn-vimeo:hover, .btn-behance:hover, .btn-twitter:hover, .btn-youtube:hover, .btn-dribbble:hover, .btn-facebook:hover, .btn-linkedin:hover, .btn-pinterest:hover, .btn-instagram:hover { color: #ffffff !important; } /* 4.2 Icon Animation -------------------------------------------------------------------------- */ .icon-animation:hover i { -webkit-animation: slidetoleft 0.4s forwards; -moz-animation: slidetoleft 0.4s forwards; -ms-animation: slidetoleft 0.4s forwards; -o-animation: slidetoleft 0.4s forwards; animation: slidetoleft 0.4s forwards; } @-webkit-keyframes slidetoleft { 49% { -webkit-transform: translateX(-200%); } 51% { opacity: 0; -webkit-transform: translateX(200%); } 60% { opacity: 0; } 81% { opacity: 1; } } @-moz-keyframes slidetoleft { 49% { -moz-transform: translateX(-200%); } 51% { opacity: 0; -moz-transform: translateX(200%); } 60% { opacity: 0; } 81% { opacity: 1; } } @-ms-keyframes slidetoleft { 49% { -ms-transform: translateX(-200%); } 51% { opacity: 0; -ms-transform: translateX(200%); } 60% { opacity: 0; } 81% { opacity: 1; } } @-o-keyframes slidetoleft { 49% { -o-transform: translateX(-200%); } 51% { opacity: 0; -o-transform: translateX(200%); } 60% { opacity: 0; } 81% { opacity: 1; } } @keyframes slidetoleft { 49% { transform: translateX(-200%); } 51% { opacity: 0; transform: translateX(200%); } 60% { opacity: 0; } 81% { opacity: 1; } } /* 4.3 Buttons -------------------------------------------------------------------------- */ .btn, button { -webkit-backface-visibility: hidden; backface-visibility: hidden; } .btn-lg { padding: 10px 26px; } button { outline: none; -webkit-border: 0; -moz-border: 0; -o-border: 0; border: 0; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -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; transition: all 0.3s ease-in-out; } /* 4.3.1 Btn Nesto -------------------------------------------------------------------------- */ .btn-nesto, .btn.btn-nesto { z-index: 1; outline: none; margin: 0 5px; color: #ffffff; font-weight: 400; overflow: hidden; position: relative; display: inline-block; background-color: #f05557; text-transform: capitalize; font-family: 'Droid Serif', 'Helvetica Neue', Helvetica, Arial, sans-serif; -webkit-border: 0; -moz-border: 0; -o-border: 0; border: 0; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; } .btn-nesto:hover { background-color: #242434; } /* 4.3.2 Btn Nesto Alternative -------------------------------------------------------------------------- */ .btn-nesto-o, .btn.btn-nesto-o { z-index: 1; outline: none; margin: 0 5px; color: #ffffff; font-weight: 400; overflow: hidden; position: relative; display: inline-block; text-transform: capitalize; background-color: transparent; font-family: 'Droid Serif', 'Helvetica Neue', Helvetica, Arial, sans-serif; -webkit-border: 2px solid #ffffff; -moz-border: 2px solid #ffffff; -o-border: 2px solid #ffffff; border: 2px solid #ffffff; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; } .btn-nesto-o:hover { color: #242434; background-color: #ffffff; } /* 4.4 Parallax Section -------------------------------------------------------------------------- */ .parallax-section { width: 100%; display: block; overflow: hidden; background-color: #ffffff; background-repeat: repeat; background-position: 0 50%; background-attachment: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .parallax-section-container { z-index: 3; width: 100%; display: block; overflow: hidden; position: relative; padding: 120px 0 70px; } /* 4.5 Hero Container -------------------------------------------------------------------------- */ .hero-container { width: 100%; display: block; overflow: hidden; position: relative; } /* 4.6 Full Hero -------------------------------------------------------------------------- */ /* 4.6.1 Wrapper -------------------------------------------------------------------------- */ .full-hero { width: 100%; display: block; overflow: hidden; text-align: center; margin: 50px auto 150px; } /* 4.6.2 Title -------------------------------------------------------------------------- */ .hero-title { width: 100%; display: block; overflow: hidden; padding-top: 50px; margin: 0 auto 20px; } .hero-title h1 { color: #ffffff; font-size: 55px; line-height: 1.2; } /* 4.6.3 Description -------------------------------------------------------------------------- */ .hero-desc { width: 100%; display: block; margin: 0 auto; overflow: hidden; } .hero-desc h3 { color: #ffffff; } /* 4.6.4 Button -------------------------------------------------------------------------- */ .hero-button { width: 100%; display: block; margin: 0 auto; overflow: hidden; padding-top: 80px; } /* 4.6.5 Form -------------------------------------------------------------------------- */ .hero-form { width: 100%; display: block; margin: 0 auto; overflow: hidden; padding-top: 80px; } .hero-form #newsletter-form { margin-bottom: 0; } /* 4.7 Half Hero -------------------------------------------------------------------------- */ /* 4.7.1 Wrapper -------------------------------------------------------------------------- */ .half-hero { width: 100%; display: block; overflow: hidden; text-align: left; margin: 0 auto 50px; } .half-hero .feature-image { margin-bottom: 0; } .half-hero .fitvid-iframe { margin: 100px auto; } /* 4.8 Section Title Container -------------------------------------------------------------------------- */ /* 4.8.1 Wrapper -------------------------------------------------------------------------- */ .section-title-container { width: 100%; overflow: hidden; text-align: center; margin: 0 auto 50px; } /* 4.8.2 Title -------------------------------------------------------------------------- */ .section-title { width: 100%; overflow: hidden; margin: 0 auto 20px; text-transform: capitalize; } .section-title h1 { font-size: 45px; line-height: 55px; } .short-section-title { width: 100%; overflow: hidden; margin: 0 auto 20px; text-transform: capitalize; } /* 4.8.3 Description -------------------------------------------------------------------------- */ .section-desc { width: 100%; max-width: 600px; overflow: hidden; margin: 0 auto 20px; } .section-desc h5 { color: #555555; } /* 4.9 Nesto Section White -------------------------------------------------------------------------- */ .nesto-section-white { margin: 0; width: 100%; overflow: hidden; position: relative; padding: 100px 0 50px; background-color: #ffffff; -webkit-border-bottom: 1px solid #eaeaea; -moz-border-bottom: 1px solid #eaeaea; -o-border-bottom: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; } .nesto-section-grey { margin: 0; width: 100%; overflow: hidden; position: relative; padding: 100px 0 50px; background-color: #f7f7f7; -webkit-border-bottom: 1px solid #eaeaea; -moz-border-bottom: 1px solid #eaeaea; -o-border-bottom: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; } /* 4.10 Feature Box -------------------------------------------------------------------------- */ /* 4.10.1 Feature Icon -------------------------------------------------------------------------- */ .feature-icon { float: left; width: 60px; height: 60px; color: #ffffff; font-size: 25px; overflow: hidden; line-height: 60px; margin-right: 20px; text-align: center; background-color: #f05557; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -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; transition: all 0.3s ease-in-out; } /* 4.10.2 Feature Title -------------------------------------------------------------------------- */ .feature-title { margin: 0 0 10px; overflow: hidden; text-transform: capitalize; } /* 4.10.3 Description -------------------------------------------------------------------------- */ .feature-desc { overflow: hidden; } /* 4.11 To Top -------------------------------------------------------------------------- */ #to-top { width: 40px; height: 40px; z-index: 999; right: -50px; bottom: 16px; position: fixed; font-size: 30px; overflow: hidden; line-height: 34px; text-align: center; background-color: transparent; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; -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; transition: all 0.3s ease-in-out; } #to-top a { width: 40px; height: 40px; display: block; color: #ffffff; overflow: hidden; line-height: 34px; text-align: center; background-color: #f05557; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; -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; transition: all 0.3s ease-in-out; } #to-top a i { line-height: 34px; } #to-top.topdisplay { right: 13px; } #to-top a:hover { background-color: #242434; } /* 4.12 To Notification Alert -------------------------------------------------------------------------- */ /* 4.12.1 Wrapper -------------------------------------------------------------------------- */ #notification-alert { width: 100%; z-index: 99; display: none; margin: 0 auto; color: #e2e2eb; text-align: left; max-width: 1440px; position: relative; padding: 20px 0 10px 0; background-color: #1a1a2a; } #notification-alert p { padding-right: 30px; } /* 4.12.2 Close Button -------------------------------------------------------------------------- */ #notification-alert #close-alert { top: 0; right: 15px; width: 25px; height: 25px; color: #242434; font-size: 16px; line-height: 25px; text-align: center; position: absolute; background-color: #e2e2eb; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; } #notification-alert #close-alert:hover { background-color: #ffffff; } /* 4.12.3 Anchor -------------------------------------------------------------------------- */ #notification-alert a { color: #ffffff; text-decoration: underline; } #notification-alert a:hover { text-decoration: none; } /* 4.13 Middle Button -------------------------------------------------------------------------- */ .middle-button { width: 100%; display: block; overflow: hidden; text-align: center; margin: 0 auto 50px; } /* ========================================================================== 5. Header ========================================================================== */ /* 5.1 Wrapper -------------------------------------------------------------------------- */ #header { margin: 0; padding: 0; width: 100%; z-index: 9999; display: block; position: relative; } /* 5.2 Top Header -------------------------------------------------------------------------- */ /* 5.2.1 Wrapper -------------------------------------------------------------------------- */ #top-header { padding: 0; width: 100%; color: #e2e2eb; display: block; overflow: hidden; line-height: 35px; position: relative; background-color: #242434; -webkit-border-top: 1px solid #2e2e3e; -moz-border-top: 1px solid #2e2e3e; -o-border-top: 1px solid #2e2e3e; border-top: 1px solid #2e2e3e; } #top-header a:hover { color: #ffffff; } /* 5.2.2 Info Menu -------------------------------------------------------------------------- */ #top-header .info-menu { width: 100%; margin: 0 auto; font-size: 13px; font-weight: 300; overflow: hidden; } #top-header .info-menu span { margin-right: 10px; } #top-header .info-menu span:last-child { margin-right: 0; } #top-header .info-menu span i { font-size: 14px; margin-right: 8px; line-height: 35px; } /* 5.2.3 Social Icons -------------------------------------------------------------------------- */ #top-header .social-icons ul { float: right; } #top-header .social-icons ul li { width: 36px; height: 35px; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; -webkit-border-left: 1px solid #2e2e3e; -moz-border-left: 1px solid #2e2e3e; -o-border-left: 1px solid #2e2e3e; border-left: 1px solid #2e2e3e; } #top-header .social-icons ul li:last-child { width: 37px; margin-right: 0; -webkit-border-right: 1px solid #2e2e3e; -moz-border-right: 1px solid #2e2e3e; -o-border-right: 1px solid #2e2e3e; border-right: 1px solid #2e2e3e; } #top-header .social-icons ul li a { color: #e2e2eb; background-color: #242434; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; } /* 5.3 Header Menu -------------------------------------------------------------------------- */ /* 5.3.1 Wrapper -------------------------------------------------------------------------- */ #header-menu { padding: 0; width: 100%; display: block; background-color: rgba(255, 255, 255, 0.90); -webkit-border-bottom: 1px solid #eaeaea; -moz-border-bottom: 1px solid #eaeaea; -o-border-bottom: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; } #header-menu .container { overflow: visible; } body.one-page #header-menu li.active a { color: #242434 !important; } body.one-page #header-menu li.active a:hover { color: #f05557 !important; } /* 5.3.2 Navbar -------------------------------------------------------------------------- */ /* 5.3.2.1 Wrapper -------------------------------------------------------------------------- */ .navbar { margin: 0; -webkit-border: 0; -moz-border: 0; -o-border: 0; border: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; } /* 5.3.2.2 Logo -------------------------------------------------------------------------- */ .navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand { margin-left: 0; } .navbar-brand { padding: 0; margin: 20px 0; font-size: 30px; font-weight: 700; line-height: 50px; letter-spacing: 1px; text-transform: uppercase; font-family: 'Droid Serif', 'Helvetica Neue', Helvetica, Arial, sans-serif; } .navbar-brand img { max-width: 75%; max-height: 75px; } /* 5.3.2.3 Items -------------------------------------------------------------------------- */ .navbar-nav > li { padding: 0; margin-right: 30px; } .navbar-nav > li:last-child { margin-right: 0; } .navbar-nav > li > a { color: #242434; padding: 20px 0; font-size: 16px; font-weight: 400; line-height: 50px; position: relative; text-transform: capitalize; font-family: 'Droid Serif', 'Helvetica Neue', Helvetica, Arial, sans-serif; } .nav .open > a, .nav > li > a:focus, .nav .open > a:focus { color: #242434; background-color: transparent; } .nav > li > a:hover, .nav .open > a:hover, .navbar-nav > .active > a, .nav > li.dropdown:hover > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus { color: #f05557 !important; background-color: transparent; } /* 5.3.2.4 Dropdown Menu -------------------------------------------------------------------------- */ .dropdown-menu { top: 110%; padding: 0; opacity: 0; display: block; min-width: 185px; visibility: hidden; background-color: #242434; margin-top: 1px !important; -webkit-border: 0; -moz-border: 0; -o-border: 0; border: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; box-shadow: none; -webkit-border-color: transparent; -moz-border-color: transparent; -o-border-color: transparent; border-color: transparent; -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; transition: all 0.3s ease-in-out; } .dropdown-menu:after { width: 0; height: 0; left: 5px; top: -25px; content: ''; z-index: -1; position: absolute; -webkit-border: 13px solid transparent; -moz-border: 13px solid transparent; -o-border: 13px solid transparent; border: 13px solid transparent; -webkit-border-bottom-color: #242434; -moz-border-bottom-color: #242434; -o-border-bottom-color: #242434; border-bottom-color: #242434; } .dropdown-menu > li > a { padding: 15px; color: #ffffff; text-transform: capitalize; font-family: 'Droid Serif', 'Helvetica Neue', Helvetica, Arial, sans-serif; -webkit-border-bottom: 1px solid #2e2e3e; -moz-border-bottom: 1px solid #2e2e3e; -o-border-bottom: 1px solid #2e2e3e; border-bottom: 1px solid #2e2e3e; } .dropdown-menu > li:last-child > a { -webkit-border: 0; -moz-border: 0; -o-border: 0; border: 0; } .navbar-right .dropdown-menu { left: 0; right: auto; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { padding-left: 20px; color: #f05557 !important; background-color: transparent; } .navbar-nav > li:hover .dropdown-menu { top: 100%; opacity: 1; visibility: visible; } .dropdown:last-child .dropdown-menu { right: 0; left: auto; } .dropdown:last-child .dropdown-menu:after { left: auto; right: 5px; } .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { color: #f05557; background-color: transparent; } /* 5.4 Fixed Header Menu -------------------------------------------------------------------------- */ #fixed-header-menu { left: 0; right: 0; top: -80px; padding: 0; width: 100%; margin: 0 auto; display: block; position: fixed; max-width: 1440px; background-color: rgba(255, 255, 255, 0.99); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-border-bottom: 1px solid #eaeaea; -moz-border-bottom: 1px solid #eaeaea; -o-border-bottom: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; -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; transition: all 0.3s ease-in-out; } #fixed-header-menu .container { overflow: visible; } #fixed-header-menu .navbar-brand { margin: 10px 0; } #fixed-header-menu .navbar-nav > li > a { padding: 10px 0; } #fixed-header-menu.fixed-menu { top: 0; } /* ========================================================================== 6. Home Section ========================================================================== */ /* 6.1 Wrapper -------------------------------------------------------------------------- */ /* 6.1.1 Parallax Version -------------------------------------------------------------------------- */ .home-section { margin-top: -91px; } /* 6.1.2 Image Slider Version -------------------------------------------------------------------------- */ body.image-slider-version .home-section { background-color: transparent; background-image: none !important; } body.image-slider-version #main-wrapper { background-color: transparent; } body.image-slider-version #supersized, body.image-slider-version #supersized li { right: 0; margin: 0 auto; max-width: 1440px; } #supersized, #supersized-loader { z-index: -1; display: none; } body.image-slider-version #supersized, body.image-slider-version #supersized-loader { display: block; } /* 6.1.3 Video Version -------------------------------------------------------------------------- */ body.video-version .home-section { position: relative; background-color: transparent; } .ytplayer-player { z-index: 1; position: absolute; } #ytplayer-shield { display: none; } /* 6.2 Overlayer -------------------------------------------------------------------------- */ .nesto-overlayer { top: 0; left: 0; z-index: 2; padding: 0; width: 100%; height: 100%; opacity: 0.8; overflow: hidden; position: absolute; background-color: #242434; } /* 6.3 Container -------------------------------------------------------------------------- */ .section-container { z-index: 3; width: 100%; display: block; overflow: hidden; position: relative; } .home-section-container { z-index: 3; width: 100%; display: block; overflow: hidden; position: relative; padding: 190px 0 50px; } /* ========================================================================== 7. Feature Box Style 1 ========================================================================== */ /* 7.1 Wrapper -------------------------------------------------------------------------- */ .feature-box-style1 { width: 100%; overflow: hidden; margin: 0 auto 40px; } /* 7.2 Hover -------------------------------------------------------------------------- */ .feature-box-style1:hover .feature-icon { background-color: #242434; } /* ========================================================================== 8. Quote Section ========================================================================== */ /* 8.1 Wrapper -------------------------------------------------------------------------- */ .quote-section { width: 100%; display: block; overflow: hidden; } /* 8.2 Hero Quote -------------------------------------------------------------------------- */ /* 8.2.1 Wrapper -------------------------------------------------------------------------- */ .hero-quote { width: 100%; max-width: 960px; overflow: hidden; text-align: center; position: relative; margin: 0 auto 50px; } /* 8.2.2 Typography -------------------------------------------------------------------------- */ .hero-quote h1 { color: #ffffff; font-size: 50px; line-height: 65px; } /* 8.2.3 Anchor -------------------------------------------------------------------------- */ .hero-quote a { color: #ffffff; position: relative; } .hero-quote a:after { left: 0; height: 2px; width: 100%; content: ''; bottom: -4px; position: absolute; background-color: #ffffff; -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; transition: all 0.3s ease-in-out; } .hero-quote a:hover:after { width: 0; left: 50%; } /* ========================================================================== 9. Team Section ========================================================================== */ /* 9.1 Member Box -------------------------------------------------------------------------- */ /* 9.1.1 Wrapper -------------------------------------------------------------------------- */ .member-box { width: 100%; display: block; overflow: hidden; text-align: center; margin: 0 auto 40px; } /* 9.1.2 Image -------------------------------------------------------------------------- */ .member-box .member-image { width: 200px; height: 200px; display: block; overflow: hidden; position: relative; margin: 0 auto 25px; } .member-box .member-image:after { top: 0; left: 0; z-index: 4; content: ''; width: 100%; opacity: 0.5; height: 100%; position: absolute; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-border: 7px solid #242434; -moz-border: 7px solid #242434; -o-border: 7px solid #242434; border: 7px solid #242434; } .member-image img { width: 100%; position: relative; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -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; transition: all 0.4s ease-in-out; } .member-box .member-image img.main-image { z-index: 1; } .member-box .member-image img.sec-image { top: 0; left: 0; z-index: 2; opacity: 0; position: absolute; } /* 9.1.3 Name -------------------------------------------------------------------------- */ .member-box .member-name { overflow: hidden; margin: 0 auto 5px; text-transform: capitalize; } /* 9.1.4 Title -------------------------------------------------------------------------- */ .member-box .member-title { overflow: hidden; margin: 0 auto 15px; text-transform: uppercase; } .member-box .member-title h5 { color: #f05557; font-weight: 700; } /* 9.1.5 Description -------------------------------------------------------------------------- */ .member-box .member-desc { width: 100%; display: block; overflow: hidden; } /* 9.1.6 Social Icons -------------------------------------------------------------------------- */ /* 9.1.6.1 Wrapper -------------------------------------------------------------------------- */ .member-box .social-icons { padding: 10px 0 0; } /* 9.1.6.2 List Items -------------------------------------------------------------------------- */ .member-box .social-icons ul li { width: 40px; height: 40px; overflow: hidden; margin: 0 5px 10px; display: inline-block; } /* 9.1.6.3 Anchor -------------------------------------------------------------------------- */ .member-box .social-icons ul li a { margin: 0; padding: 0; color: #ffffff; line-height: 40px; } .member-box .social-icons ul li a:hover { background-color: #242434 !important; } /* 9.1.7 Hover -------------------------------------------------------------------------- */ .member-box:hover img.sec-image { opacity: 1; } /* ========================================================================== 10. Skills Section ========================================================================== */ /* 10.1 Skill Bar -------------------------------------------------------------------------- */ /* 10.1.1 Wrapper -------------------------------------------------------------------------- */ .skill-bar { width: 100%; display: block; overflow: hidden; margin: 0 auto 20px; } .skill-bar p { text-transform: capitalize; } /* 10.1.2 Override Bootstrap Progress Bar -------------------------------------------------------------------------- */ .progress { height: 30px; margin-bottom: 30px; background-color: #eaeaea; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; box-shadow: none; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; } .progress-bar { line-height: 30px; text-align: right; padding-right: 10px; } /* 10.1.3 Progress Bar Colors -------------------------------------------------------------------------- */ .progress-bar-red { background-color: rgba(240, 85, 87, 1); } .progress-bar-orange { background-color: rgba(234, 136, 37, 1); } .progress-bar-green { background-color: rgba(0, 171, 102, 1); } .progress-bar-blue { background-color: rgba(68, 120, 178, 1); } .progress-bar-purble { background-color: rgba(104, 90, 177, 1); } .progress-bar-pink { background-color: rgba(236, 0, 95, 1); } /* ========================================================================== 11. Numbers Section ========================================================================== */ /* 11.1 Wrapper -------------------------------------------------------------------------- */ .numbers-section { width: 100%; display: block; overflow: hidden; } /* 11.2 Number Box -------------------------------------------------------------------------- */ /* 11.2.1 Wrapper -------------------------------------------------------------------------- */ .number-box { width: 100%; overflow: hidden; text-align: center; margin: 0 auto 50px; } /* 11.2.2 Digit -------------------------------------------------------------------------- */ .number-box .number-digit { color: #ffffff; font-size: 40px; overflow: hidden; line-height: 40px; position: relative; margin: 0 auto 30px; padding-bottom: 30px; font-family: 'Droid Serif', 'Helvetica Neue', Helvetica, Arial, sans-serif; } .number-box .number-digit:after { bottom: 0; left: 50%; width: 50px; height: 2px; content: ''; margin-left: -25px; position: absolute; background-color: #f05557; } /* 11.2.3 Title -------------------------------------------------------------------------- */ .number-box .number-title { overflow: hidden; text-transform: capitalize; } .number-box .number-title h4 { color: #ffffff; } /* ========================================================================== 12. Home Recent Posts ========================================================================== */ /* 12.1 Wrapper -------------------------------------------------------------------------- */ .home-recent-posts { width: 100%; display: block; overflow: hidden; margin: 0 auto 50px; } /* 12.2 Container -------------------------------------------------------------------------- */ .home-recent-posts .post-container { z-index: 1; width: 100%; display: block; overflow: hidden; text-align: center; position: relative; padding: 40px 15px 20px; background-color: #ffffff; background-repeat: repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; -webkit-border-top: 1px solid #eaeaea; -moz-border-top: 1px solid #eaeaea; -o-border-top: 1px solid #eaeaea; border-top: 1px solid #eaeaea; } .home-recent-posts .post-container:last-child { -webkit-border-bottom: 1px solid #eaeaea; -moz-border-bottom: 1px solid #eaeaea; -o-border-bottom: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; } .home-recent-posts .post-container:after { top: 0; left: 0; z-index: -1; content: ''; width: 100%; height: 100%; position: absolute; background-color: #ffffff; -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; transition: all 0.3s ease-in-out; } /* 12.3 Post Meta -------------------------------------------------------------------------- */ .post-meta { color: #666666; display: block; overflow: hidden; margin: 0 auto 15px; text-transform: capitalize; } .post-meta span { position: relative; margin-right: 10px; padding-right: 10px; display: inline-block; } .post-meta span i { margin-right: 5px; } .post-meta span:last-child { margin: 0; padding: 0; } .post-meta span:after { top: 0; right: -5px; content: '-'; color: #f05557; font-size: 20px; line-height: 24px; position: absolute; } .post-meta span:last-child:after { display: none; } .post-date { text-transform: uppercase; } /* 12.4 Title -------------------------------------------------------------------------- */ .post-title { width: 100%; overflow: hidden; margin-bottom: 13px; text-transform: uppercase; } /* 12.5 Hover -------------------------------------------------------------------------- */ .home-recent-posts .post-container:hover { background-color: #f05557; } .home-recent-posts .post-container:hover:after { opacity: 0.5; background-color: #f05557; } .home-recent-posts .post-container:hover h2, .home-recent-posts .post-container:hover .post-meta, .home-recent-posts .post-container:hover .post-meta span:after { color: #ffffff; } /* ========================================================================== 13. Footer ========================================================================== */ /* 13.1 Wrapper -------------------------------------------------------------------------- */ #footer { margin: 0; padding: 0; width: 100%; color: #e2e2eb; display: block; overflow: hidden; text-align: center; background-color: #1a1a2a; -webkit-border-bottom: 5px solid #f05557; -moz-border-bottom: 5px solid #f05557; -o-border-bottom: 5px solid #f05557; border-bottom: 5px solid #f05557; } #footer a:hover, #footer a:focus { color: #ffffff; } /* 13.2 Top Footer -------------------------------------------------------------------------- */ #top-footer { width: 100%; display: block; overflow: hidden; padding: 100px 0 0; } /* 13.3 Logo -------------------------------------------------------------------------- */ /* 13.3.1 Wrapper -------------------------------------------------------------------------- */ #footer #logo { width: 100%; display: block; overflow: hidden; margin: 0 auto 40px; } /* 13.3.2 Anchor -------------------------------------------------------------------------- */ #footer #logo a { padding: 0; margin: 0 auto; font-size: 30px; font-weight: 700; line-height: 50px; letter-spacing: 1px; display: inline-block; text-transform: uppercase; font-family: 'Droid Serif', 'Helvetica Neue', Helvetica, Arial, sans-serif; } /* 13.3.3 Image -------------------------------------------------------------------------- */ #footer #logo img { display: block; max-width: 100%; max-height: 50px; } /* 13.4 Social Icons -------------------------------------------------------------------------- */ /* 13.4.1 Wrapper -------------------------------------------------------------------------- */ #footer .social-icons { margin: 0 auto 20px; } /* 13.4.2 Items -------------------------------------------------------------------------- */ #footer .social-icons li { float: none; width: 40px; height: 40px; margin: 0 5px 10px; } /* 13.4.3 Anchor -------------------------------------------------------------------------- */ #footer .social-icons li a { color: #ffffff; line-height: 40px; background-color: #2e2e3e; } /* 13.5 Copyright -------------------------------------------------------------------------- */ #footer #copyright { width: 100%; overflow: hidden; padding-top: 30px; margin: 0 auto 20px; -webkit-border-top: 1px solid #2e2e3e; -moz-border-top: 1px solid #2e2e3e; -o-border-top: 1px solid #2e2e3e; border-top: 1px solid #2e2e3e; } /* ========================================================================== 14. Breadcrumb Section ========================================================================== */ /* 14.1 Wrapper -------------------------------------------------------------------------- */ .breadcrumb-section { margin-top: -91px; } /* 14.2 Container -------------------------------------------------------------------------- */ .breadcrumb-section-container { z-index: 3; width: 100%; display: block; overflow: hidden; position: relative; padding: 140px 0 30px; } /* 14.3 Breadcrumb -------------------------------------------------------------------------- */ .breadcrumb-section .breadcrumb { padding: 0; font-size: 17px; margin-bottom: 5px; text-transform: capitalize; background-color: transparent; } .breadcrumb-section .breadcrumb a:hover, .breadcrumb-section .breadcrumb .active, .breadcrumb-section .breadcrumb > li+li:before { color: #ffffff; } /* 14.4 Title -------------------------------------------------------------------------- */ .breadcrumb-title { width: 100%; display: block; overflow: hidden; margin: 0 auto 10px; text-transform: uppercase; } .breadcrumb-title h3 { color: #ffffff; } /* ========================================================================== 15. Feature Component ========================================================================== */ /* 15.1 Image Wrapper -------------------------------------------------------------------------- */ .feature-image, .main-feature-image { width: 100%; display: block; overflow: hidden; text-align: center; position: relative; margin: 0 auto 50px; } .feature-image { max-width: 600px; } .main-feature-image { max-width: 970px; } /* 15.2 Image -------------------------------------------------------------------------- */ .feature-image img, .main-feature-image img { top: 0; left: 0; width: 100%; margin: 0 auto; display: block; position: absolute; } .feature-image img:first-child, .main-feature-image img:first-child { position: relative; } /* 15.3 Feature Content -------------------------------------------------------------------------- */ .feature-content { width: 100%; overflow: hidden; margin: 0 auto 20px; } .mini-feature-content { width: 100%; overflow: hidden; margin: 0 auto 10px; } /* 15.4 Feature Buttons -------------------------------------------------------------------------- */ .feature-buttons { width: 100%; overflow: hidden; margin: 0 auto 50px; } .feature-buttons a.btn:first-child { margin-left: 0; } /* 15.5 Feature List -------------------------------------------------------------------------- */ .feature-list { width: 100%; overflow: hidden; margin: 0 auto 20px; } .feature-list ul { margin: 0; padding: 0; list-style: none; } .feature-list ul li { display: block; overflow: hidden; padding-left: 20px; position: relative; margin: 0 auto 5px; } .feature-list ul li:before { left: 0; top: 10px; width: 8px; height: 8px; content: ''; position: absolute; background-color: #242434; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; } /* 15.5 Feature Tabs -------------------------------------------------------------------------- */ .feature-tabs { width: 100%; display: block; overflow: hidden; position: relative; margin: 0 auto 50px; } .tabs { width: 100%; margin: 0 auto; overflow: hidden; position: relative; } .tabs nav { text-align: center; } .tabs nav ul { padding: 0; margin: 0 auto; list-style: none; position: relative; display: -webkit-flex; display: -ms-flexbox; display: -moz-flex; display: -ms-flex; display: flex; -webkit-flex-flow: row wrap; -ms-box-orient: horizontal; -moz-flex-flow: row wrap; -ms-flex-flow: row wrap; -ms-box-pack: center; flex-flow: row wrap; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; } .tabs nav ul li { margin: 0; z-index: 1; display: block; position: relative; text-align: center; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; -o-flex: 1; flex: 1; } .tabs nav ul li a { margin: 2px; color: #242434; padding: 8px 0; display: block; font-size: 18px; line-height: 2.5; overflow: hidden; position: relative; white-space: nowrap; text-overflow: ellipsis; background-color: #f7f7f7; text-transform: capitalize; font-family: 'Droid Serif', 'Helvetica Neue', Helvetica, Arial, sans-serif; } .tabs nav ul li a i { width: 100%; display: block; font-size: 30px; margin-top: 10px; overflow: hidden; } .tabs nav ul li a:hover { color: #f05557; } .tabs-style-bar nav { background-color: #eaeaea; } .tabs-style-bar nav ul { -webkit-border: 2px solid transparent; -moz-border: 2px solid transparent; -o-border: 2px solid transparent; border: 2px solid transparent; } .tabs-style-bar nav ul li.tab-current a { color: #ffffff; background-color: #242434; } .content-wrap { position: relative; } .content-wrap section { display: none; margin: 0 auto; overflow: hidden; padding: 40px 25px 0; -webkit-border: 1px solid #eaeaea; -moz-border: 1px solid #eaeaea; -o-border: 1px solid #eaeaea; border: 1px solid #eaeaea; } .content-wrap section.content-current { display: block; } .no-js .content-wrap section { display: block; padding-bottom: 2em; -webkit-border-bottom: 1px solid rgba(255,255,255,0.6); -moz-border-bottom: 1px solid rgba(255,255,255,0.6); -o-border-bottom: 1px solid rgba(255,255,255,0.6); border-bottom: 1px solid rgba(255,255,255,0.6); } .content-wrap section .feature-image { margin-top: 5px; } /* ========================================================================== 16. Feature Box Style 2 ========================================================================== */ /* 16.1 Wrapper -------------------------------------------------------------------------- */ .feature-box-style2 { width: 100%; overflow: hidden; text-align: center; margin-bottom: 40px; } /* 16.2 Icon -------------------------------------------------------------------------- */ .feature-box-style2 .feature-icon { float: none; width: 90px; height: 90px; font-size: 40px; line-height: 90px; margin: 0 auto 25px; } .feature-box-style2 .feature-icon i { line-height: 90px; } /* 16.3 Hover -------------------------------------------------------------------------- */ .feature-box-style2:hover .feature-icon { background-color: #242434; } /* ========================================================================== 17. Process Box ========================================================================== */ /* 17.1 Wrapper -------------------------------------------------------------------------- */ .process-box { width: 100%; overflow: hidden; text-align: center; position: relative; margin: 0 auto 50px; } /* 17.2 Icon -------------------------------------------------------------------------- */ .process-box .process-icon { width: 100px; height: 100px; color: #ffffff; font-size: 40px; overflow: hidden; line-height: 100px; margin: 0 auto 25px; background-color: #f05557; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -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; transition: all 0.3s ease-in-out; } .process-box .process-icon i { line-height: 100px; } /* 17.3 Title -------------------------------------------------------------------------- */ .process-title h4 { color: #ffffff; text-transform: capitalize; } /* 17.4 Number -------------------------------------------------------------------------- */ .process-number { top: 30px; left: 50%; content: ''; width: 40px; height: 40px; color: #ffffff; font-size: 18px; line-height: 40px; margin-left: -70px; position: absolute; background-color: #242434; font-family: 'Droid Serif', 'Helvetica Neue', Helvetica, Arial, sans-serif; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; } /* 17.5 Hover -------------------------------------------------------------------------- */ .process-box:hover .process-icon { background-color: #242434; } /* ========================================================================== 18. Accordion ========================================================================== */ /* 18.1 Wrapper -------------------------------------------------------------------------- */ .panel-nesto { overflow: hidden; background-color: transparent; margin-bottom: 6px !important; -webkit-border: 0 !important; -moz-border: 0 !important; -o-border: 0 !important; border: 0 !important; -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; -o-border-radius: 0 !important; border-radius: 0 !important; } /* 18.2 Heading -------------------------------------------------------------------------- */ .panel-nesto > .panel-heading { color: #242434; padding: 15px 15px 10px 0; text-transform: capitalize; background-color: transparent; -webkit-border: 0; -moz-border: 0; -o-border: 0; border: 0; -webkit-border-top: 1px solid #eaeaea; -moz-border-top: 1px solid #eaeaea; -o-border-top: 1px solid #eaeaea; border-top: 1px solid #eaeaea; } .panel-nesto > .panel-footer + .panel-collapse .panel-body, .panel-nesto > .panel-heading + .panel-collapse .panel-body { -webkit-border: 0; -moz-border: 0; -o-border: 0; border: 0; } .panel-nesto:first-of-type > .panel-heading { -webkit-border-top: 0; -moz-border-top: 0; -o-border-top: 0; border-top: 0; } /* 18.3 Panel -------------------------------------------------------------------------- */ .panel { -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; box-shadow: none; } .panel-group { margin-bottom: 40px; } .panel-group .panel+.panel { margin-top: 0; } /* 18.4 Body -------------------------------------------------------------------------- */ .panel-body { padding: 0; } /* 18.5 Title -------------------------------------------------------------------------- */ .panel-title { font-size: 20px; } /* 18.6 Anchor -------------------------------------------------------------------------- */ .panel-title a { color: #f05557; display: block; line-height: 24px; position: relative; padding: 0 0 0 40px; letter-spacing: 0.5px; } .panel-title a:before { top: 0; left: 0; width: 24px; height: 24px; color: #ffffff; font-size: 16px; content: '\f107'; line-height: 25px; text-align: center; position: absolute; background-color: #f05557; font-family: 'FontAwesome'; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } .panel-title a.collapsed { color: #242434; } .panel-title a.collapsed:hover { color: #f05557; } .panel-title a.collapsed:before { top: 0; left: 0; width: 24px; height: 24px; color: #ffffff; font-size: 16px; content: '\f105'; padding-left: 2px; line-height: 24px; text-align: center; position: absolute; background-color: #f05557; font-family: 'FontAwesome'; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } /* ========================================================================== 19. Subscribe Section ========================================================================== */ /* 19.1 Section Title -------------------------------------------------------------------------- */ .subscribe-section .section-title { margin-bottom: 0; padding-top: 15px; } .subscribe-section .section-title h1 { color: #ffffff; font-size: 40px; text-align: left; line-height: 50px; } /* 19.2 Newsletter Form -------------------------------------------------------------------------- */ /* 19.2.1 Wrapper -------------------------------------------------------------------------- */ #newsletter-form { width: 100%; padding: 15px; max-width: 720px; overflow: hidden; position: relative; margin: 0 auto 50px; background-color: rgba(0, 0, 0, 0.2); -webkit-border-radius: 7px; -moz-border-radius: 7px; -o-border-radius: 7px; border-radius: 7px; } /* 19.2.2 Form Group -------------------------------------------------------------------------- */ .form-group { margin: 0; padding: 0; overflow: hidden; position: relative; } /* 19.2.3 Form Control -------------------------------------------------------------------------- */ .form-control { height: 50px; outline: none; color: #242434; margin: 0 auto; overflow: hidden; -webkit-border: 0; -moz-border: 0; -o-border: 0; border: 0; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; -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; transition: all 0.3s ease-in-out; } .form-control:focus { -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; } #newsletter-form .form-control { padding-right: 150px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; } /* 19.2.4 Button -------------------------------------------------------------------------- */ #newsletter-form button { top: 0; right: 0; padding: 0; height: 50px; width: 135px; line-height: 50px; margin: 0 !important; position: absolute !important; -webkit-backface-visibility: visible; -moz-backface-visibility: visible; } /* ========================================================================== 20. Modal ========================================================================== */ .modal { z-index: 9999; } /* 20.1 Dialog -------------------------------------------------------------------------- */ #ResponseModal .modal-dialog { margin: 15% auto 0; } .modal-body { padding: 45px 15px 25px; } /* 20.2 Content -------------------------------------------------------------------------- */ #ResponseModal .modal-content { -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; } /* 20.3 Response Message -------------------------------------------------------------------------- */ #ResponseModal h5.nesto-response { text-align: center; margin: 30px auto 20px; } #ResponseModalLabel { width: 100%; display: block; margin: 0 auto; font-size: 80px; overflow: hidden; line-height: 80px; text-align: center; } #ResponseModal .nesto_error { color: rgb(240, 85, 87); } #ResponseModal .nesto_success { color: rgb(0, 171, 102); } /* ========================================================================== 21. Pricing Table ========================================================================== */ /* 21.1 Wrapper -------------------------------------------------------------------------- */ .pricing-table { width: 100%; overflow: hidden; text-align: center; margin: 35px auto 50px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -webkit-border: 1px solid #eaeaea; -moz-border: 1px solid #eaeaea; -o-border: 1px solid #eaeaea; border: 1px solid #eaeaea; } .featured-table { margin-top: 0; } /* 21.2 Title -------------------------------------------------------------------------- */ .pricing-table .table-title { width: 100%; position: relative; padding: 20px 15px; text-transform: uppercase; -webkit-border-bottom: 1px solid #eaeaea; -moz-border-bottom: 1px solid #eaeaea; -o-border-bottom: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; -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; transition: all 0.3s ease-in-out; } /* 21.3 Price -------------------------------------------------------------------------- */ /* 21.3.1 Wrapper -------------------------------------------------------------------------- */ .pricing-table .table-price { width: 100%; color: #f05557; font-size: 50px; line-height: 50px; padding: 35px 15px; font-family: 'Droid Serif', 'Helvetica Neue', Helvetica, Arial, sans-serif; -webkit-border-bottom: 1px solid #eaeaea; -moz-border-bottom: 1px solid #eaeaea; -o-border-bottom: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; } .pricing-table .table-price span { display: inline-block; } /* 21.3.2 Sign -------------------------------------------------------------------------- */ .pricing-table .table-price span.dollar-price { font-size: 30px; line-height: 30px; margin-right: 5px; vertical-align: top; } /* 21.3.3 Duration -------------------------------------------------------------------------- */ .pricing-table .table-price span.duration { width: 100%; display: block; color: #242434; font-size: 24px; margin-top: 20px; line-height: 24px; padding-top: 23px; position: relative; text-transform: capitalize; } .pricing-table .table-price span.duration:before { top: 0; left: 50%; width: 50px; height: 2px; content: ''; position: absolute; margin-left: -25px; background-color: #242434; } /* 21.4 Details -------------------------------------------------------------------------- */ /* 21.4.1 Wrapper -------------------------------------------------------------------------- */ .pricing-table .table-details { padding: 0; width: 100%; overflow: hidden; -webkit-border-bottom: 1px solid #eaeaea; -moz-border-bottom: 1px solid #eaeaea; -o-border-bottom: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; } /* 21.4.2 List -------------------------------------------------------------------------- */ .pricing-table .table-details ul { margin: 0; padding: 0; list-style: none; } /* 21.4.3 Items -------------------------------------------------------------------------- */ .pricing-table .table-details ul li { width: 100%; padding: 15px; display: block; font-size: 15px; overflow: hidden; position: relative; -webkit-border-bottom: 1px solid #eaeaea; -moz-border-bottom: 1px solid #eaeaea; -o-border-bottom: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; } .pricing-table .table-details ul li:last-child { -webkit-border-bottom: 0; -moz-border-bottom: 0; -o-border-bottom: 0; border-bottom: 0; } .pricing-table .table-details ul li:nth-child(odd) { background-color: #fbfbfb; } /* 21.5 Button -------------------------------------------------------------------------- */ .pricing-table .table-button { padding: 30px 0; } /* 21.6 Featured Table -------------------------------------------------------------------------- */ .featured-table .table-title h5 { margin-bottom: 10px; } .featured-table .table-title h6 { width: 100%; color: #f05557; font-size: 16px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; } /* ========================================================================== 22. Portfolio Filter ========================================================================== */ /* 22.1 Wrapper -------------------------------------------------------------------------- */ #portfolio-filter, #portfolio-filter > * { outline: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } #portfolio-filter { z-index: 9; height: 45px; position: relative; margin-bottom: 70px; } /* 22.2 Container -------------------------------------------------------------------------- */ #filter-container { top: 0; left: 50%; height: 45px; width: 290px; overflow: hidden; position: absolute; margin-left: -145px; background-color: #f05557; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; -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; transition: all 0.3s ease-in-out; } /* 22.3 Header -------------------------------------------------------------------------- */ #filter-container .filter-header { width: 100%; height: 45px; display: block; color: #ffffff; padding: 0 15px; cursor: pointer; line-height: 45px; position: relative; text-transform: capitalize; font-family: 'Droid Serif', 'Helvetica Neue', Helvetica, Arial, sans-serif; } #filter-container .filter-header:after { top: 0; right: 15px; height: 45px; color: #ffffff; font-size: 16px; content: '\f107'; line-height: 45px; position: absolute; font-family: 'FontAwesome'; } /* 22.4 List -------------------------------------------------------------------------- */ /* 22.4.1 Wrapper -------------------------------------------------------------------------- */ #filter-container .filter-list { margin: 0; padding: 0; width: 320px; height: 205px; overflow-y: scroll; } /* 22.4.2 Item -------------------------------------------------------------------------- */ #filter-container .filter-list .filter-item { margin: 0; width: 100%; display: block; color: #ffffff; padding: 0 15px; cursor: pointer; font-size: 14px; line-height: 40px; background-color: transparent; font-family: 'Droid Serif', 'Helvetica Neue', Helvetica, Arial, sans-serif; -webkit-border-top: 1px solid rgba(0, 0, 0, 0.1); -moz-border-top: 1px solid rgba(0, 0, 0, 0.1); -o-border-top: 1px solid rgba(0, 0, 0, 0.1); border-top: 1px solid rgba(0, 0, 0, 0.1); -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; transition: all 0.3s ease-in-out; } #filter-container .filter-list .filter-item:last-child { -webkit-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; -o-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px; } /* 22.5 Hover -------------------------------------------------------------------------- */ #filter-container .filter-item.active-item, #filter-container .filter-list .filter-item:hover { background-color: rgba(0, 0, 0, 0.1); } #filter-container.filter-list-open { height: 250px; } #filter-container.filter-list-open .filter-header:after { content: '\f106'; } /* ========================================================================== 23. Portfolio Grid ========================================================================== */ /* 23.1 Wrapper -------------------------------------------------------------------------- */ .portfolio-grid { padding: 0; width: 100%; overflow: hidden; list-style: none; position: relative; margin: 0 auto 35px; -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; transition: all 0.3s ease-in-out; } /* 23.2 List Items -------------------------------------------------------------------------- */ /* 23.2.1 Wrapper -------------------------------------------------------------------------- */ .portfolio-grid li { float: left; padding: 15px; display: block; overflow: hidden; position: relative; width: 33.33333333%; } /* 23.2.2 Item -------------------------------------------------------------------------- */ /* 23.2.2.1 Wrapper -------------------------------------------------------------------------- */ .portfolio-item { z-index: 1; width: 100%; display: block; overflow: hidden; position: relative; } .portfolio-item:after { top: 0; left: 0; opacity: 0; z-index: 2; content: ''; width: 100%; height: 100%; position: absolute; background-color: #242434; -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; transition: all 0.3s ease-in-out; } /* 23.2.2.2 Image -------------------------------------------------------------------------- */ .portfolio-item .item-image { width: 100%; display: block; overflow: hidden; } .portfolio-item .item-image img { width: 100%; display: block; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -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; transition: all 0.3s ease-in-out; } /* 23.2.2.3 Content -------------------------------------------------------------------------- */ /* 23.2.2.3.1 Wrapper -------------------------------------------------------------------------- */ .portfolio-item .item-content { left: 0; top: 50%; z-index: 3; content: ''; width: 100%; margin-top: -52px; position: absolute; } /* 23.2.2.3.2 Title -------------------------------------------------------------------------- */ .portfolio-item .item-title { opacity: 0; width: 100%; text-align: center; margin: 0 auto 21px; -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); transform: scale(2); -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; transition: all 0.3s ease-in-out; } .portfolio-item .item-title h3 { color: #ffffff; text-transform: uppercase; } /* 23.2.2.3.3 Anchor -------------------------------------------------------------------------- */ .portfolio-item .item-anchors { opacity: 0; width: 100%; display: block; overflow: hidden; text-align: center; -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; transition: all 0.3s ease-in-out; } .portfolio-item a { width: 50px; height: 50px; color: #ffffff; font-size: 18px; overflow: hidden; line-height: 50px; display: inline-block; background-color: #f05557; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; } .portfolio-item a.portfolio-anchor { margin-right: 25px; } .portfolio-item a.portfolio-preview { margin-left: 25px; } /* 23.2.3.4 Hover -------------------------------------------------------------------------- */ .portfolio-item:hover:after { opacity: 0.8; } .portfolio-item:hover .item-image img { -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); } .portfolio-item:hover .item-title { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .portfolio-item:hover .item-anchors { opacity: 1; } .portfolio-item:hover a.portfolio-anchor { margin-right: 7px; } .portfolio-item:hover a.portfolio-preview { margin-left: 7px; } .portfolio-item a:hover { background-color: #242434; } /* ========================================================================== 24. Pagination ========================================================================== */ .pagination-wrapper { text-align: center; margin: 0 auto 50px; } .pagination { margin: 0 auto; } .pagination > li > a, .pagination > li > span { color: #f05557; background-color: transparent; -webkit-border: 0; -moz-border: 0; -o-border: 0; border: 0; -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; -o-border-radius: 0 !important; border-radius: 0 !important; } .pagination > li > a:hover, .pagination > li > a:focus, .pagination > li > span:hover, .pagination > li > span:focus { color: #ffffff; background-color: #f05557; } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > a:focus, .pagination > .active > span:hover, .pagination > .active > span:focus { color: #242434 !important; background-color: transparent; -webkit-border-color: transparent; -moz-border-color: transparent; -o-border-color: transparent; border-color: transparent; } /* ========================================================================== 25. Testimonials Slider ========================================================================== */ /* 25.1 Wrapper -------------------------------------------------------------------------- */ .owl-testimonials, .owl-testimonials-wrapper { width: 100%; margin: 0 auto; overflow: hidden; position: relative; } /* 25.2 Dots -------------------------------------------------------------------------- */ .owl-pagination { line-height: 12px; } .owl-theme .owl-controls { margin: 0 auto 50px; } .owl-theme .owl-controls .owl-page span { margin: 0 7px; background-color: #f05557; } /* 25.3 Quote Item -------------------------------------------------------------------------- */ /* 25.3.1 Wrapper -------------------------------------------------------------------------- */ .quote-item { padding: 0; width: 100%; display: block; overflow: hidden; margin: 0 auto 50px; } .owl-testimonials-wrapper .quote-item { padding: 0 15px; } /* 25.3.2 Content -------------------------------------------------------------------------- */ /* 25.3.2.1 Wrapper -------------------------------------------------------------------------- */ .quote-content { z-index: 1; width: 100%; font-size: 15px; position: relative; margin: 0 auto 26px; padding: 17px 20px 8px; background-color: #fafafa; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -webkit-border: 1px solid #eaeaea; -moz-border: 1px solid #eaeaea; -o-border: 1px solid #eaeaea; border: 1px solid #eaeaea; } /* 25.3.2.2 Arrow -------------------------------------------------------------------------- */ .quote-content:after { width: 0; height: 0; left: 25px; z-index: 2; content: ''; bottom: -30px; position: absolute; -webkit-border: 15px solid transparent; -moz-border: 15px solid transparent; -o-border: 15px solid transparent; border: 15px solid transparent; -webkit-border-top-color: #eaeaea; -moz-border-top-color: #eaeaea; -o-border-top-color: #eaeaea; border-top-color: #eaeaea; } .quote-content:before { width: 0; height: 0; left: 25px; z-index: 3; content: ''; bottom: -29px; position: absolute; -webkit-border: 15px solid transparent; -moz-border: 15px solid transparent; -o-border: 15px solid transparent; border: 15px solid transparent; -webkit-border-top-color: #fafafa; -moz-border-top-color: #fafafa; -o-border-top-color: #fafafa; border-top-color: #fafafa; } /* 25.3.2.3 Image -------------------------------------------------------------------------- */ .quote-image { float: left; width: 80px; height: 80px; overflow: hidden; margin-right: 12px; display: inline-block; } .quote-image img { width: 100%; display: block; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; } /* 25.3.2.4 Name -------------------------------------------------------------------------- */ .quote-name { margin: 0 0; overflow: hidden; text-transform: capitalize; } /* 25.3.2.5 Web -------------------------------------------------------------------------- */ .quote-web { margin: 0; overflow: hidden; } /* 25.3.2.6 Rate -------------------------------------------------------------------------- */ .quote-rate { margin: 0; overflow: hidden; position: relative; } .rate1:after { color: #555555; font-family: 'FontAwesome'; content: '\f005 \f005 \f005 \f005'; } .rate1:before { color: #f05557; content: '\f005'; font-family: 'FontAwesome' } .rate2:after { color: #555555; font-family: 'FontAwesome'; content: '\f005 \f005 \f005'; } .rate2:before { color: #f05557; content: '\f005 \f005'; font-family: 'FontAwesome' } .rate3:after { color: #555555; content: '\f005 \f005'; font-family: 'FontAwesome' } .rate3:before { color: #f05557; font-family: 'FontAwesome'; content: '\f005 \f005 \f005'; } .rate4:after { color: #555555; content: '\f005'; font-family: 'FontAwesome'; } .rate4:before { color: #f05557; font-family: 'FontAwesome'; content: '\f005 \f005 \f005 \f005'; } .rate5:before { color: #f05557; font-family: 'FontAwesome'; content: '\f005 \f005 \f005 \f005 \f005'; } /* ========================================================================== 26. Client Logo ========================================================================== */ .client-logo { width: 100%; max-width: 260px; overflow: hidden; margin: 0 auto 50px; } .client-logo a, .client-logo img { width: 100%; display: block; } .client-logo a:hover { opacity: 0.6; } /* ========================================================================== 27. Project Details ========================================================================== */ /* 27.1 Wrapper -------------------------------------------------------------------------- */ .project-details { width: 100%; display: block; overflow: hidden; margin: 0 auto 50px; } /* 27.2 Image -------------------------------------------------------------------------- */ .project-image, .project-image a, .project-image img { width: 100%; display: block; overflow: hidden; } .project-image a:hover { opacity: 0.9; } /* 27.3 Slider -------------------------------------------------------------------------- */ .owl-project-slider, .owl-project-slider-wrapper { width: 100%; margin: 0 auto; overflow: hidden; position: relative; } .owl-project-slider-wrapper .project-image { margin-bottom: 20px; } .owl-project-slider-wrapper .owl-theme .owl-controls { margin-bottom: 0; } /* 27.4 Video -------------------------------------------------------------------------- */ .fitvid-iframe { width: 100%; display: block; overflow: hidden; } .fitvid-iframe iframe { margin: 0; padding: 0; -webkit-border: 0; -moz-border: 0; -o-border: 0; border: 0; } /* 27.5 Title -------------------------------------------------------------------------- */ .project-details-title { margin-bottom: 15px; padding-bottom: 15px; text-transform: capitalize; -webkit-border-bottom: 1px solid #eaeaea; -moz-border-bottom: 1px solid #eaeaea; -o-border-bottom: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; } /* 27.6 List -------------------------------------------------------------------------- */ .project-details-list { width: 100%; margin: 0 auto; overflow: hidden; } .project-details-list ul { margin: 0; padding: 0; list-style: none; } .project-details-list ul li { display: block; padding: 10px 0; -webkit-border-bottom: 1px solid #eaeaea; -moz-border-bottom: 1px solid #eaeaea; -o-border-bottom: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; } .project-details-list ul li:last-child { padding-bottom: 0; -webkit-border-bottom: 0; -moz-border-bottom: 0; -o-border-bottom: 0; border-bottom: 0; } .project-details-list strong { margin-right: 15px; text-transform: capitalize; } /* 27.7 Related Projects -------------------------------------------------------------------------- */ /* 27.7.1 Wrapper -------------------------------------------------------------------------- */ .related-projects { width: 100%; margin: 0 auto; overflow: hidden; padding-top: 50px; position: relative; } /* 27.7.2 Slider -------------------------------------------------------------------------- */ /* 27.7.2.1 Wrapper -------------------------------------------------------------------------- */ .owl-related-projects, .owl-related-projects-wrapper { width: 100%; margin: 0 auto; overflow: hidden; position: relative; } /* 27.7.2.2 Items -------------------------------------------------------------------------- */ .owl-related-projects div.owl-item { padding: 15px; } /* ========================================================================== 28. Contact Form ========================================================================== */ /* 28.1 Form Control -------------------------------------------------------------------------- */ #contactform .form-control { color: #242434; padding: 6px 15px; margin-bottom: 30px; -webkit-border: 1px solid #eaeaea; -moz-border: 1px solid #eaeaea; -o-border: 1px solid #eaeaea; border: 1px solid #eaeaea; } #contactform .form-control:hover, #contactform .form-control:focus { -webkit-border-color: #f05557; -moz-border-color: #f05557; -o-border-color: #f05557; border-color: #f05557; } /* 28.2 Textarea -------------------------------------------------------------------------- */ #contactform textarea { resize: none; height: 210px; margin: 0 auto; padding: 15px !important; } /* 28.3 Button -------------------------------------------------------------------------- */ #contactform .middle-button { text-align: left; } #contactform .middle-button button { margin: 0; } /* 28.4 Error -------------------------------------------------------------------------- */ #contact-name.form-error, #contact-email.form-error, #contact-subject.form-error, #contact-message.form-error { -webkit-border-color: #f05557; -moz-border-color: #f05557; -o-border-color: #f05557; border-color: #f05557; } /* ========================================================================== 29. Contact Info ========================================================================== */ /* 29.1 Wrapper -------------------------------------------------------------------------- */ .contact-info { width: 100%; display: block; overflow: hidden; margin: 0 auto 45px; } .contact-info h4 { margin-bottom: 15px; } /* 29.2 List -------------------------------------------------------------------------- */ .contact-info ul { margin: 0; padding: 0; overflow: hidden; list-style: none; background-color: transparent; background-repeat: no-repeat; background-position: center center; background-image: url(../images/map.png); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } /* 29.3 Items -------------------------------------------------------------------------- */ .contact-info ul li { width: 100%; display: block; overflow: hidden; margin-bottom: 5px; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .contact-info ul li:last-child { margin-bottom: 0; } .contact-info ul ul li { padding-left: 30px; } .contact-info ul strong { display: block; margin-bottom: 5px; text-transform: capitalize; } /* ========================================================================== 30. Map Section ========================================================================== */ /* 30.1 Wrapper -------------------------------------------------------------------------- */ #map-section { background-color: #242434; } /* 30.2 Container -------------------------------------------------------------------------- */ #map-section .section-container { height: 100px; -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; transition: all 0.3s ease-in-out; } /* 30.3 Map -------------------------------------------------------------------------- */ #map { width: 100%; position: relative; } /* 30.4 Open Button -------------------------------------------------------------------------- */ #map-open-button { top: 0; left: 0; content: ''; z-index: 99; width: 100%; height: 100%; color: #ffffff; cursor: pointer; font-size: 55px; overflow: hidden; line-height: 100px; text-align: center; position: absolute; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -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; transition: all 0.3s ease-in-out; } #map-open-button i { line-height: 100px; } #map-open-button:hover { background-color: rgba(255, 255, 255, 0.1); } /* 30.5 Close Button -------------------------------------------------------------------------- */ #map-close-button { top: 17px; left: 17px; z-index: 99; width: 50px; height: 50px; display: none; color: #ffffff; font-size: 25px; cursor: pointer; line-height: 45px; text-align: center; position: absolute; background-color: #242434; -webkit-border-radius: 12px; -moz-border-radius: 12px; -o-border-radius: 12px; border-radius: 12px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* 30.6 Map Height -------------------------------------------------------------------------- */ #map-section.map-height #map, #map-section.map-height .section-container { height: 380px; } #map-section.map-height #map-open-button { display: none; } #map-section.map-height #map-close-button { display: block; } /* ========================================================================== 31. Blog Section ========================================================================== */ /* 31.1 Wrapper -------------------------------------------------------------------------- */ .blog-section { background-color: #f7f7f7; } body.left-sidebar .sidebar { float: left; } body.left-sidebar .main-content { float: right; } /* 31.2 Post -------------------------------------------------------------------------- */ /* 31.2.1 Wrapper -------------------------------------------------------------------------- */ .post { width: 100%; overflow: hidden; margin: 1px auto 30px; background-color: #ffffff; -webkit-box-shadow: 0 0 1px #eaeaea; -moz-box-shadow: 0 0 1px #eaeaea; -o-box-shadow: 0 0 1px #eaeaea; box-shadow: 0 0 1px #eaeaea; } /* 31.2.2 Header -------------------------------------------------------------------------- */ .post .post-header { width: 100%; overflow: hidden; text-align: center; padding: 30px 25px 10px; -webkit-border-bottom: 1px solid #eaeaea; -moz-border-bottom: 1px solid #eaeaea; -o-border-bottom: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; } .post .post-header a { color: #666666; display: block; } .post .post-header a:hover { color: #f05557; } /* 31.2.3 Title -------------------------------------------------------------------------- */ .post .post-title a { color: #222222; } /* 31.2.4 Content -------------------------------------------------------------------------- */ /* 31.2.4.1 Wrapper -------------------------------------------------------------------------- */ .post .post-content { width: 100%; display: block; overflow: hidden; padding: 30px 30px 20px; } /* 31.2.4.2 Image -------------------------------------------------------------------------- */ .post .post-image, .post .post-image a, .post .post-image img { width: 100%; display: block; overflow: hidden; } .post .post-image a:hover { opacity: 0.8; } /* 31.2.4.3 Slider -------------------------------------------------------------------------- */ /* 31.2.4.3.1 Wrapper -------------------------------------------------------------------------- */ .owl-post, .owl-post-wrapper { width: 100%; margin: 0 auto; overflow: hidden; position: relative; } /* 31.2.4.3.2 Dots -------------------------------------------------------------------------- */ .owl-post-wrapper .owl-theme .owl-controls { margin: 0 auto } .owl-post-wrapper .owl-theme .owl-controls { left: 0; width: 100%; bottom: 20px; position: absolute; } /* 31.2.4.4 Video -------------------------------------------------------------------------- */ .post .fitvid-iframe { width: 100%; display: block; overflow: hidden; } /* 31.2.4.5 Excerpt -------------------------------------------------------------------------- */ .post .post-excerpt { padding: 0; width: 100%; display: block; overflow: hidden; } /* 31.2.5 Share -------------------------------------------------------------------------- */ /* 31.2.5.1 Wrapper -------------------------------------------------------------------------- */ .post .post-share { width: 100%; display: block; overflow: hidden; padding: 30px 25px 15px; text-align: center; -webkit-border-top: 1px solid #eaeaea; -moz-border-top: 1px solid #eaeaea; -o-border-top: 1px solid #eaeaea; border-top: 1px solid #eaeaea; } /* 31.2.5.2 Items -------------------------------------------------------------------------- */ .post .post-share .social-icons ul li { width: 40px; height: 40px; overflow: hidden; margin: 0 5px 10px; display: inline-block; } /* 31.2.5.3 Anchor -------------------------------------------------------------------------- */ .post .post-share .social-icons ul li a { color: #666666; line-height: 40px; background-color: #eaeaea; } /* 31.2.6 Link -------------------------------------------------------------------------- */ .post .post-link { width: 100%; display: block; overflow: hidden; padding: 30px 25px; text-align: center; -webkit-border-top: 1px solid #eaeaea; -moz-border-top: 1px solid #eaeaea; -o-border-top: 1px solid #eaeaea; border-top: 1px solid #eaeaea; } /* 31.2.7 Pagination -------------------------------------------------------------------------- */ .blog-pagination { margin: 0 auto 30px; } /* 31.2.8 Comments -------------------------------------------------------------------------- */ .post-comments { width: 100%; display: block; overflow: hidden; margin: 0 auto 30px; } /* ========================================================================== 32. Sidebar ========================================================================== */ /* 32.1 Wrapper -------------------------------------------------------------------------- */ .sidebar { overflow: hidden; margin-bottom: 20px; } /* 32.2 Widget -------------------------------------------------------------------------- */ /* 32.2.1 Wrapper -------------------------------------------------------------------------- */ .widget { padding: 0; width: 100%; overflow: hidden; margin: 0 auto 30px; background-color: #ffffff; -webkit-box-shadow: 0 0 1px #eaeaea; -moz-box-shadow: 0 0 1px #eaeaea; -o-box-shadow: 0 0 1px #eaeaea; box-shadow: 0 0 1px #eaeaea; } /* 32.2.2 Title -------------------------------------------------------------------------- */ .widget-title { width: 100%; padding: 15px 20px; text-transform: capitalize; -webkit-border-bottom: 1px solid #eaeaea; -moz-border-bottom: 1px solid #eaeaea; -o-border-bottom: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; } /* 32.2.3 Search Widget -------------------------------------------------------------------------- */ .widget-search { width: 100%; padding: 25px; overflow: hidden; } /* 32.2.3.1 Form Control -------------------------------------------------------------------------- */ .widget-search .form-control { -webkit-border: 1px solid #eaeaea; -moz-border: 1px solid #eaeaea; -o-border: 1px solid #eaeaea; border: 1px solid #eaeaea; } /* 32.2.3.2 Hover -------------------------------------------------------------------------- */ .widget-search .form-control:hover, .widget-search .form-control:focus { -webkit-border-color: #f05557; -moz-border-color: #f05557; -o-border-color: #f05557; border-color: #f05557; } /* 32.2.4 Social Widget -------------------------------------------------------------------------- */ /* 32.2.4.1 Wrapper -------------------------------------------------------------------------- */ .widget-social { width: 100%; padding: 20px; display: block; overflow: hidden; } /* 32.2.4.2 List -------------------------------------------------------------------------- */ .widget-social .social-icons ul { float: left; } /* 32.2.4.3 Items -------------------------------------------------------------------------- */ .widget-social ul li { margin: 5px; width: 43px; height: 43px; float: left !important; } /* 32.2.4.4 Anchor -------------------------------------------------------------------------- */ .widget-social .social-icons ul li a { color: #ffffff; line-height: 43px; } .widget-social .social-icons ul li a:hover { background-color: #242434 !important; } /* 32.2.5 Dribbble Widget -------------------------------------------------------------------------- */ /* 32.2.5.1 Wrapper -------------------------------------------------------------------------- */ .widget-dribbble { width: 100%; padding: 25px; overflow: hidden; } /* 32.2.5.2 Slider -------------------------------------------------------------------------- */ /* 32.2.5.2.1 Wrapper -------------------------------------------------------------------------- */ .widget-dribbble .owl-carousel { display: block; overflow: hidden; -webkit-border: 1px solid #eaeaea; -moz-border: 1px solid #eaeaea; -o-border: 1px solid #eaeaea; border: 1px solid #eaeaea; } /* 32.2.5.2.2 List -------------------------------------------------------------------------- */ .widget-dribbble ul { margin: 0; padding: 0; list-style: none; } /* 32.2.5.2.3 Anchor -------------------------------------------------------------------------- */ .widget-dribbble a, .widget-dribbble img, .widget-dribbble ul li { width: 100%; display: block; overflow: hidden; position: relative; } .widget-dribbble a:after, .widget-dribbble a:before { -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; transition: all 0.3s ease-in-out; } .widget-dribbble a:before { top: 0; left: 0; z-index: 1; opacity: 0; content: ''; width: 100%; height: 100%; position: absolute; background-color: #000000; } .widget-dribbble a:after { top: 50%; left: 50%; z-index: 2; opacity: 0; width: 40px; height: 40px; color: #ffffff; font-size: 40px; content: '\f08e'; line-height: 40px; margin-top: -20px; margin-left: -20px; text-align: center; position: absolute; font-family: 'FontAwesome'; } /* 32.2.5.2.4 Arrows -------------------------------------------------------------------------- */ .widget-dribbble .owl-theme .owl-controls { margin: 0; } .widget-dribbble .owl-prev, .widget-dribbble .owl-next { top: 50%; width: 40px; height: 40px; line-height: 32px; position: absolute; opacity: 1 !important; font-size: 22px !important; margin-top: -20px !important; background-color: #f05557 !important; -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; transition: all 0.3s ease-in-out; } .widget-dribbble .owl-prev { left: 0; } .widget-dribbble .owl-next { right: 0; } /* 32.2.5.2.5 Hover -------------------------------------------------------------------------- */ .widget-dribbble a:hover:after, .widget-dribbble a:hover:before { opacity: 0.5; } .widget-dribbble .owl-prev:hover, .widget-dribbble .owl-next:hover { background-color: #222222 !important; } .widget-dribbble .owl-prev:hover i, .widget-dribbble .owl-next:hover i { -webkit-animation: slidetoleft 0.4s forwards; -moz-animation: slidetoleft 0.4s forwards; -ms-animation: slidetoleft 0.4s forwards; -o-animation: slidetoleft 0.4s forwards; animation: slidetoleft 0.4s forwards; } /* 32.2.6 Flickr Widget -------------------------------------------------------------------------- */ /* 32.2.6.1 Wrapper -------------------------------------------------------------------------- */ .widget-flickr { width: 100%; padding: 21px; display: block; overflow: hidden; } /* 32.2.6.2 List -------------------------------------------------------------------------- */ /* 32.2.6.2.1 Wrapper -------------------------------------------------------------------------- */ .widget-flickr .flickr-feed { margin: 0; padding: 0; width: 100%; overflow: hidden; list-style: none; text-align: center; } /* 32.2.6.2.2 Items -------------------------------------------------------------------------- */ .widget-flickr .flickr-feed li { padding: 0; float: left; margin: 5px; width: 69px; height: 69px; overflow: hidden; text-align: center; display: inline-block; } /* 32.2.6.2.3 Anchor -------------------------------------------------------------------------- */ .widget-flickr .flickr-feed li a { width: 100%; display: block; position: relative; } .widget-flickr .flickr-feed li a:after, .widget-flickr .flickr-feed li a:before { -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; transition: all 0.3s ease-in-out; } .widget-flickr .flickr-feed li a:before { top: 0; left: 0; opacity: 0; content: ''; width: 100%; height: 100%; position: absolute; background-color: #000000; } .widget-flickr .flickr-feed li a:after { top: 50%; left: 50%; opacity: 0; width: 32px; height: 32px; color: #ffffff; font-size: 20px; content: '\f002'; line-height: 32px; margin-top: -13px; margin-left: -13px; text-align: center; position: absolute; font-family: 'FontAwesome'; } /* 32.2.6.2.4 Image -------------------------------------------------------------------------- */ .widget-flickr .flickr-feed li img { width: 100%; display: block; } /* 32.2.6.2.5 Hover -------------------------------------------------------------------------- */ .widget-flickr .flickr-feed li a:hover:after, .widget-flickr .flickr-feed li a:hover:before { opacity: 0.5; } /* 32.2.7 Twitter Widget -------------------------------------------------------------------------- */ /* 32.2.7.1 Wrapper -------------------------------------------------------------------------- */ .widget-twitter { width: 100%; display: block; overflow: hidden; padding: 20px 25px; } /* 32.2.7.2 List -------------------------------------------------------------------------- */ /* 32.2.7.2.1 Wrapper -------------------------------------------------------------------------- */ .widget-twitter ul { margin: 0; padding: 0; width: 100%; display: block; overflow: hidden; list-style: none; } /* 32.2.7.2.2 Items -------------------------------------------------------------------------- */ .widget-twitter ul li { margin: 0; width: 100%; display: block; margin-bottom: 20px; padding-bottom: 20px; -webkit-border-bottom: 1px solid #eaeaea; -moz-border-bottom: 1px solid #eaeaea; -o-border-bottom: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; } .widget-twitter ul li:last-child { margin: 0; padding: 0; -webkit-border: 0; -moz-border: 0; -o-border: 0; border: 0; } /* 32.2.7.2.3 Date -------------------------------------------------------------------------- */ .widget-twitter .date { text-transform: uppercase; } /* 32.2.8 Behance Widget -------------------------------------------------------------------------- */ /* 32.2.8.1 Wrapper -------------------------------------------------------------------------- */ .widget-behance { width: 100%; padding: 25px; overflow: hidden; } /* 32.2.8.2 Slider -------------------------------------------------------------------------- */ /* 32.2.8.2.1 Wrapper -------------------------------------------------------------------------- */ .widget-behance .owl-carousel { display: block; overflow: hidden; -webkit-border: 1px solid #eaeaea; -moz-border: 1px solid #eaeaea; -o-border: 1px solid #eaeaea; border: 1px solid #eaeaea; } /* 32.2.8.2.2 List -------------------------------------------------------------------------- */ .widget-behance ul { margin: 0; padding: 0; list-style: none; } /* 32.2.8.2.3 Anchor -------------------------------------------------------------------------- */ .widget-behance a, .widget-behance img, .widget-behance ul li { width: 100%; display: block; overflow: hidden; position: relative; } .widget-behance a:after, .widget-behance a:before { -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; transition: all 0.3s ease-in-out; } .widget-behance a:before { top: 0; left: 0; z-index: 1; opacity: 0; content: ''; width: 100%; height: 100%; position: absolute; background-color: #000000; } .widget-behance a:after { top: 50%; left: 50%; z-index: 2; opacity: 0; width: 40px; height: 40px; color: #ffffff; font-size: 40px; content: '\f08e'; line-height: 40px; margin-top: -20px; margin-left: -20px; text-align: center; position: absolute; font-family: 'FontAwesome'; } /* 32.2.8.2.4 Arrows -------------------------------------------------------------------------- */ .widget-behance .owl-theme .owl-controls { margin: 0; } .widget-behance .owl-prev, .widget-behance .owl-next { top: 50%; width: 40px; height: 40px; line-height: 32px; position: absolute; opacity: 1 !important; font-size: 22px !important; margin-top: -20px !important; background-color: #f05557 !important; -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; transition: all 0.3s ease-in-out; } .widget-behance .owl-prev { left: 0; } .widget-behance .owl-next { right: 0; } /* 32.2.8.2.5 Hover -------------------------------------------------------------------------- */ .widget-behance a:hover:after, .widget-behance a:hover:before { opacity: 0.5; } .widget-behance .owl-prev:hover, .widget-behance .owl-next:hover { background-color: #222222 !important; } .widget-behance .owl-prev:hover i, .widget-behance .owl-next:hover i { -webkit-animation: slidetoleft 0.4s forwards; -moz-animation: slidetoleft 0.4s forwards; -ms-animation: slidetoleft 0.4s forwards; -o-animation: slidetoleft 0.4s forwards; animation: slidetoleft 0.4s forwards; } /* 32.2.9 Category Widget -------------------------------------------------------------------------- */ /* 32.2.9.1 Wrapper -------------------------------------------------------------------------- */ .widget-category { width: 100%; padding: 25px; overflow: hidden; } /* 32.2.9.2 Anchor -------------------------------------------------------------------------- */ .widget-category a { width: 100%; display: block; overflow: hidden; padding: 0 0 10px; margin: 0 auto 10px; text-transform: capitalize; -webkit-border-bottom: 1px solid #eaeaea; -moz-border-bottom: 1px solid #eaeaea; -o-border-bottom: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; } .widget-category a:last-child { margin-bottom: 0; padding-bottom: 0; -webkit-border-bottom: 0; -moz-border-bottom: 0; -o-border-bottom: 0; border-bottom: 0; } .widget-category a span:first-child { float: left; } .widget-category a span:last-child { float: right; } /* 32.2.10 Tags Widget -------------------------------------------------------------------------- */ .widget-tags { width: 100%; padding: 20px; overflow: hidden; } .widget-tags a.btn { margin-top: 5px; margin-bottom: 5px; } /* 32.2.11 Text Widget -------------------------------------------------------------------------- */ .widget-text { width: 100%; overflow: hidden; padding: 25px 25px 15px; } .widget-text .contact-info { margin-bottom: 0; } /* ========================================================================== 33. Sign In / Sign Up / Forget Password ========================================================================== */ /* 33.1 Nesto Form -------------------------------------------------------------------------- */ /* 33.1.1 Wrapper -------------------------------------------------------------------------- */ .nesto-form { width: 100%; margin: 0 auto; max-width: 428px; overflow: hidden; position: relative; padding: 30px 30px 15px; background-color: #ffffff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } /* 33.1.2 Title -------------------------------------------------------------------------- */ .nesto-form h3 { text-align: center; margin-bottom: 30px; } .nesto-form .or-alter { width: 100%; overflow: hidden; padding-top: 10px; text-align: center; margin: 0 auto 25px; } .form-content { width: 100%; display: block; overflow: hidden; margin: -10px auto 25px; } /* 33.1.3 Form Control -------------------------------------------------------------------------- */ .nesto-form .form-control { color: #242434; padding: 6px 15px; margin-bottom: 25px; -webkit-border: 1px solid #eaeaea; -moz-border: 1px solid #eaeaea; -o-border: 1px solid #eaeaea; border: 1px solid #eaeaea; } .nesto-form .form-control:hover, .nesto-form .form-control:focus { -webkit-border-color: #f05557; -moz-border-color: #f05557; -o-border-color: #f05557; border-color: #f05557; } /* 33.1.4 Password -------------------------------------------------------------------------- */ .nesto-form .password-container { width: 100%; display: block; overflow: hidden; position: relative; } .nesto-form .password-container span { top: 0; right: 10px; height: 50px; line-height: 50px; position: absolute; } /* 33.1.5 Buttons -------------------------------------------------------------------------- */ .nesto-form .buttons-container { width: 100%; display: block; overflow: hidden; position: relative; margin: 0 auto 20px; } .nesto-form .buttons-container button { float: left; width: 47.5%; margin: 0 5% 0 0; } .nesto-form .buttons-container .continue { margin: 0; width: 100%; display: block; } .nesto-form .buttons-container a { margin: 0; float: left; width: 47.5%; background-color: #242434; } .nesto-form .buttons-container .btn-nesto { padding: 12px 16px; } .nesto-form .buttons-container a:hover { background-color: #f05557; } /* 33.1.6 Social Icons -------------------------------------------------------------------------- */ .nesto-form .social-icons { text-align: center; } .nesto-form .social-icons li { margin: 0 10px 10px; } .nesto-form .social-icons button { padding: 0; width: 70px; height: 70px; display: block; color: #ffffff; font-size: 30px; line-height: 70px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; } .nesto-form .social-icons button:hover { background-color: #242434 !important; } /* ========================================================================== 34. 404 Error ========================================================================== */ /* 34.1 Wrapper -------------------------------------------------------------------------- */ .page-error { width: 100%; margin: 0 auto; max-width: 720px; overflow: hidden; text-align: center; } /* 34.2 Title -------------------------------------------------------------------------- */ .page-error h1 { color: #ffffff; font-size: 200px; line-height: 1.2; margin-bottom: 15px; } /* 34.3 Description -------------------------------------------------------------------------- */ .page-error h2 { color: #ffffff; margin: 0 auto 20px; } /* 34.4 Content -------------------------------------------------------------------------- */ .page-error p { color: #e2e2eb; font-size: 18px; margin-bottom: 40px; } .page-error a:hover { color: #ffffff; } /* ========================================================================== 35. Widget Footer ========================================================================== */ /* 35.1 Wrapper -------------------------------------------------------------------------- */ #footer .widget { text-align: left; background-color: transparent; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; box-shadow: none; } /* 35.2 Title -------------------------------------------------------------------------- */ #footer .widget-title { text-align: left; padding: 0 0 20px; -webkit-border-bottom: 0; -moz-border-bottom: 0; -o-border-bottom: 0; border-bottom: 0; } #footer .widget-title h5 { color: #ffffff; } /* 35.3 Slider -------------------------------------------------------------------------- */ #footer .owl-carousel { -webkit-border: 0; -moz-border: 0; -o-border: 0; border: 0; } /* 35.4 Search Widget -------------------------------------------------------------------------- */ #footer .widget-search { padding: 10px 0; } #footer .form-control { color: #ffffff; background-color: transparent; } /* 35.5 Social Widget -------------------------------------------------------------------------- */ #footer .widget-social { padding: 10px 0 0; } #footer .widget-social .social-icons { margin-bottom: 0; } #footer .widget-social .social-icons li { width: 41px; height: 41px; margin: 0 10px 10px 0; } #footer .widget-social .social-icons li:nth-child(7n) { margin-right: 0; } #footer .widget-social .social-icons li a { line-height: 41px; } /* 35.6 Dribbble Widget -------------------------------------------------------------------------- */ #footer .widget-dribbble { padding: 10px 0; } /* 35.7 Flickr Widget -------------------------------------------------------------------------- */ #footer .widget-flickr { padding: 5px 0; } #footer .widget-flickr .flickr-feed li { width: 80px; height: 80px; margin: 5px 10px 5px 0; } #footer .widget-flickr .flickr-feed li:nth-child(4n) { margin-right: 0; } /* 35.8 Twitter Widget -------------------------------------------------------------------------- */ #footer .widget-twitter { padding: 10px 0; } #footer .widget-twitter ul li { -webkit-border-bottom: 1px solid #2e2e3e; -moz-border-bottom: 1px solid #2e2e3e; -o-border-bottom: 1px solid #2e2e3e; border-bottom: 1px solid #2e2e3e; } #footer .widget-twitter ul li:last-child { -webkit-border-bottom: 0; -moz-border-bottom: 0; -o-border-bottom: 0; border-bottom: 0; } /* 35.9 Behance Widget -------------------------------------------------------------------------- */ #footer .widget-behance { padding: 10px 0; } /* 35.10 Widget Widget -------------------------------------------------------------------------- */ #footer .widget-category { padding: 10px 0; } #footer .widget-category a { -webkit-border-bottom: 1px solid #2e2e3e; -moz-border-bottom: 1px solid #2e2e3e; -o-border-bottom: 1px solid #2e2e3e; border-bottom: 1px solid #2e2e3e; } #footer .widget-category a:last-child { -webkit-border-bottom: 0; -moz-border-bottom: 0; -o-border-bottom: 0; border-bottom: 0; } /* 35.11 Tags Widget -------------------------------------------------------------------------- */ #footer .widget-tags { padding: 5px 0; } #footer .widget-tags a.btn:hover { background-color: #2e2e3e; } /* 35.12 Text Widget -------------------------------------------------------------------------- */ #footer .widget-text { padding: 10px 0 0; } /* ========================================================================== 36. Blockquote Section ========================================================================== */ /* 36.1 Wrapper -------------------------------------------------------------------------- */ .blockquote-section { margin: 0; width: 100%; overflow: hidden; position: relative; padding: 75px 0 25px; background-color: #242434; } /* 36.2 Content and Button -------------------------------------------------------------------------- */ .blockquote-button, .blockquote-content { width: 100%; overflow: hidden; margin: 0 auto 50px; } .blockquote-content h4 { color: #ffffff; line-height: 50px; } /* ========================================================================== 37. Boxed Version ========================================================================== */ body.boxed-version #main-wrapper, body.boxed-version #fixed-header-menu, body.boxed-version #notification-alert { max-width: 1200px; -webkit-border-left: 1px solid #eaeaea; -moz-border-left: 1px solid #eaeaea; -o-border-left: 1px solid #eaeaea; border-left: 1px solid #eaeaea; -webkit-border-right: 1px solid #eaeaea; -moz-border-right: 1px solid #eaeaea; -o-border-right: 1px solid #eaeaea; border-right: 1px solid #eaeaea; } body.boxed-version.dark-version #main-wrapper, body.boxed-version.dark-version #fixed-header-menu, body.boxed-version.dark-version #notification-alert { max-width: 1200px; -webkit-border-left: 1px solid #2e2e3e; -moz-border-left: 1px solid #2e2e3e; -o-border-left: 1px solid #2e2e3e; border-left: 1px solid #2e2e3e; -webkit-border-right: 1px solid #2e2e3e; -moz-border-right: 1px solid #2e2e3e; -o-border-right: 1px solid #2e2e3e; border-right: 1px solid #2e2e3e; } /* ========================================================================== 38. Dark Version ========================================================================== */ body.dark-version, body.dark-version .close, body.dark-version .post-meta, body.dark-version .rate1:after, body.dark-version .rate2:after, body.dark-version .rate3:after, body.dark-version .rate4:after, body.dark-version .section-desc h5, body.dark-version .post .post-header a, body.dark-version .post .post-share .social-icons ul li a { color: #e2e2eb; } body.dark-version .btn-nesto-o:hover { color: #242434; } body.dark-version .panel-title a, body.dark-version .panel-title a:focus, body.dark-version .tabs nav ul li a:hover, body.dark-version .post .post-title a:hover, body.dark-version .post .post-header a:hover, body.dark-version .panel-title a.collapsed:hover { color: #f05557; } body.dark-version.one-page #header-menu li.active a:hover { color: #f05557 !important; } body.dark-version h1, body.dark-version h2, body.dark-version h3, body.dark-version h4, body.dark-version h5, body.dark-version h6, body.dark-version a:hover, body.dark-version a:focus, body.dark-version .tabs nav ul li a, body.dark-version .post .post-title a, body.dark-version .navbar-nav > li > a, body.dark-version .panel-title a.collapsed, body.dark-version .nesto-form .form-control, body.dark-version #contactform .form-control, body.dark-version .widget-search .form-control, body.dark-version #newsletter-form .form-control, body.dark-version .pricing-table .table-price span.duration { color: #ffffff; } body.dark-version .pagination > .active > a, body.dark-version .pagination > .active > span, body.dark-version .pagination > .active > a:hover, body.dark-version .pagination > .active > a:focus, body.dark-version.one-page #header-menu li.active a, body.dark-version .pagination > .active > span:hover, body.dark-version .pagination > .active > span:focus { color: #ffffff !important; } body.dark-version, body.dark-version .nesto-form, body.dark-version #main-wrapper, body.dark-version .navbar-toggle, body.dark-version .modal-content, body.dark-version .tabs nav ul li a, body.dark-version .nesto-section-white, body.dark-version #newsletter-form .form-control, body.dark-version .home-recent-posts .post-container, body.dark-version .widget-search .form-control:hover, body.dark-version .widget-search .form-control:focus, body.dark-version .home-recent-posts .post-container:after { background-color: #242434; } body.dark-version .progress, body.dark-version .dropdown-menu, body.dark-version .quote-content, body.dark-version .process-number, body.dark-version #to-top a:hover, body.dark-version .btn-nesto:hover, body.dark-version .tabs-style-bar nav, body.dark-version .nesto-form .form-control, body.dark-version #contactform .form-control, body.dark-version .widget-search .form-control, body.dark-version .dropdown-menu > .active > a, body.dark-version .dropdown-menu > li > a:hover, body.dark-version .dropdown-menu > li > a:focus, body.dark-version .process-box:hover .process-icon, body.dark-version .nesto-form .buttons-container a, body.dark-version .dropdown-menu > .active > a:hover, body.dark-version .dropdown-menu > .active > a:focus, body.dark-version .feature-box-style1:hover .feature-icon, body.dark-version .feature-box-style2:hover .feature-icon, body.dark-version .post .post-share .social-icons ul li a, body.dark-version .pricing-table .table-details ul li:nth-child(odd) { background-color: #2e2e3e; } body.dark-version .post, body.dark-version .widget, body.dark-version #header-menu, body.dark-version #fixed-header-menu, body.dark-version .nesto-section-grey, body.dark-version .nesto-form .form-control:hover, body.dark-version .nesto-form .form-control:focus, body.dark-version #contactform .form-control:hover, body.dark-version #contactform .form-control:focus, body.dark-version #newsletter-form .form-control:hover, body.dark-version #newsletter-form .form-control:focus, body.dark-version .tabs-style-bar nav ul li.tab-current a { background-color: #1a1a2a; } body.dark-version #contact-name.form-error, body.dark-version #contact-email.form-error, body.dark-version #contact-subject.form-error, body.dark-version #contact-message.form-error { background-color: #1a1a2a !important; } body.dark-version .nesto-form .social-icons button:hover, body.dark-version .member-box .social-icons ul li a:hover, body.dark-version .widget-social .social-icons ul li a:hover { background-color: #2e2e3e !important; } body.dark-version .nesto-form .buttons-container a:hover { background-color: #f05557; } body.dark-version .pricing-table .table-price span.duration:before { background-color: #ffffff; } body.dark-version #header-menu, body.dark-version #fixed-header-menu, body.dark-version .nesto-form .form-control, body.dark-version #contactform .form-control, body.dark-version .widget-search .form-control { -webkit-border-color: #1a1a2a; -moz-border-color: #1a1a2a; -o-border-color: #1a1a2a; border-color: #1a1a2a; } body.dark-version .dropdown-menu > li > a { -webkit-border-color: #242434; -moz-border-color: #242434; -o-border-color: #242434; border-color: #242434; } body.dark-version .post-header, body.dark-version .widget-title, body.dark-version .modal-header, body.dark-version .quote-content, body.dark-version .pricing-table, body.dark-version .post .post-link, body.dark-version .post .post-share, body.dark-version .widget-category a, body.dark-version .nesto-section-grey, body.dark-version .nesto-section-white, body.dark-version .content-wrap section, body.dark-version .widget-twitter ul li, body.dark-version .pricing-table .table-price, body.dark-version .pricing-table .table-title, body.dark-version .pricing-table .table-details, body.dark-version .panel-nesto > .panel-heading, body.dark-version .widget-behance .owl-carousel, body.dark-version .widget-dribbble .owl-carousel, body.dark-version .home-recent-posts .post-container, body.dark-version .pricing-table .table-details ul li { -webkit-border-color: #2e2e3e; -moz-border-color: #2e2e3e; -o-border-color: #2e2e3e; border-color: #2e2e3e; } body.dark-version .dropdown-menu:after { -webkit-border-bottom-color: #2e2e3e; -moz-border-bottom-color: #2e2e3e; -o-border-bottom-color: #2e2e3e; border-bottom-color: #2e2e3e; } body.dark-version .quote-content:after, body.dark-version .quote-content:before { -webkit-border-top-color: #2e2e3e; -moz-border-top-color: #2e2e3e; -o-border-top-color: #2e2e3e; border-top-color: #2e2e3e; } body.dark-version .post, body.dark-version .widget { -webkit-box-shadow: 0 0 1px #1a1a2a; -moz-box-shadow: 0 0 1px #1a1a2a; -o-box-shadow: 0 0 1px #1a1a2a; box-shadow: 0 0 1px #1a1a2a; } @media only screen and (max-width: 767px) { body.dark-version .dropdown-menu > li > a, body.dark-version .navbar-nav .open .dropdown-menu > li > a { background-color: #2e2e3e; } } /* ========================================================================== Responsive ========================================================================== */ @media only screen and (min-width: 1440px) { #main-wrapper, #fixed-header-menu, #notification-alert { -webkit-border-left: 1px solid #eaeaea; -moz-border-left: 1px solid #eaeaea; -o-border-left: 1px solid #eaeaea; border-left: 1px solid #eaeaea; -webkit-border-right: 1px solid #eaeaea; -moz-border-right: 1px solid #eaeaea; -o-border-right: 1px solid #eaeaea; border-right: 1px solid #eaeaea; } body.dark-version #main-wrapper, body.dark-version #fixed-header-menu, body.dark-version #notification-alert { -webkit-border-left: 1px solid #2e2e3e; -moz-border-left: 1px solid #2e2e3e; -o-border-left: 1px solid #2e2e3e; border-left: 1px solid #2e2e3e; -webkit-border-right: 1px solid #2e2e3e; -moz-border-right: 1px solid #2e2e3e; -o-border-right: 1px solid #2e2e3e; border-right: 1px solid #2e2e3e; } } /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ @media only screen and (max-width: 1199px) { .home-section { opacity: 1 !important; } body.image-slider-version #supersized li a img { top: 0 !important; } .parallax-section { background-position: 0 50% !important; background-attachment: scroll !important; } .half-hero { text-align: center; } .hero-container { top: 0 !important; } .hero-title h1, .hero-quote h1 { font-size: 50px; } .half-hero .feature-image, .half-hero .fitvid-iframe { margin: 50px auto; } .process-title h4, .number-box .number-title h4 { font-size: 20px; } .subscribe-section .section-title h1 { text-align: center; } .widget-social ul li { width: 40px; height: 40px; } .widget-social .social-icons ul li a { line-height: 40px; } #footer .widget-social .social-icons li { width: 38px; height: 38px; } #footer .widget-social .social-icons li:nth-child(6n) { margin-right: 0; } #footer .widget-social .social-icons li:nth-child(7n) { margin-right: 10px; } #footer .widget-social .social-icons li a { line-height: 38px; } .widget-flickr .flickr-feed li { width: 115px; height: 115px; } #footer .widget-flickr .flickr-feed li { width: 63px; height: 63px; } .blockquote-button, .blockquote-content { text-align: center; } .blockquote-content h4 { line-height: 35px; } } /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ @media only screen and (max-width: 991px) { body.left-sidebar .sidebar, body.left-sidebar .main-content { float: none; } #top-header .info-menu { text-align: center; } .social-icons { text-align: center; } #top-header .social-icons ul { float: none; } #top-header .social-icons ul li, #top-header .social-icons ul li:last-child { margin: 5px 5px 0; -webkit-border: 0; -moz-border: 0; -o-border: 0; border: 0; } .navbar-nav > li { margin-right: 10px; } .hero-title h1, .hero-quote h1 { font-size: 40px; } .hero-desc h3 { font-size: 22px; } .portfolio-grid li { width: 50%; } .widget-social ul li { width: 42px; height: 42px; } .widget-social .social-icons ul li a { line-height: 42px; } #footer .widget-social .social-icons li { width: 43px; height: 43px; margin: 0 11px 10px 0; } #footer .widget-social .social-icons li:nth-child(13n) { margin-right: 0; } #footer .widget-social .social-icons li:nth-child(6n) { margin-right: 11px; } #footer .widget-social .social-icons li a { line-height: 43px; } .widget-flickr .flickr-feed li { width: 103px; height: 103px; } #footer .widget-flickr .flickr-feed li { width: 77px; height: 77px; } #footer .widget-flickr .flickr-feed li:nth-child(4n) { margin: 5px 10px 5px 0; } #footer .widget-flickr .flickr-feed li:nth-child(8n) { margin-right: 0; } .tabs nav ul li a i { margin-bottom: 10px; } .tabs-style-bar nav ul li a span { display: none; } } /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ @media only screen and (max-width: 767px) { .container { width: 700px; } #header .container { width: 100%; } body.one-page #header-menu li.active a { color: #ffffff !important; } body.one-page #header-menu li.active a:hover { color: #f05557 !important; } .navbar-toggle { color: #ffffff; font-size: 20px; margin-right: 0; margin-top: 15px; line-height: 20px; margin-bottom: 15px; background-color: #1a1a2a; -webkit-border-color: #242434; -moz-border-color: #242434; -o-border-color: #242434; border-color: #242434; } #header-menu .navbar-toggle { margin-top: 25px; margin-bottom: 25px; } #fixed-header-menu { display: none; } #fixed-header-menu.fixed-menu { display: block; } .navbar-collapse.collapsing, .navbar-collapse.collapse.in { left: 0; right: 0; top: 100%; width: 100%; max-height: 240px; position: absolute; overflow-y: scroll; background-color: #1a1a2a; -webkit-overflow-scrolling: touch; } .navbar-nav { margin: 0; } .navbar-collapse { padding: 0; } .navbar-nav > li { margin-right: 0; overflow: hidden; } .navbar-nav > li > a, #fixed-header-menu .navbar-nav > li > a { color: #ffffff; font-size: 15px; line-height: 25px; padding: 10px 15px; -webkit-border-bottom: 1px solid #2e2e3e; -moz-border-bottom: 1px solid #2e2e3e; -o-border-bottom: 1px solid #2e2e3e; border-bottom: 1px solid #2e2e3e; } .dropdown-menu { top: 100%; opacity: 1; width: 100%; position: relative; visibility: visible; margin-top: 0 !important; } .dropdown:last-child .dropdown-menu:after { left: 5px; right: auto; } .dropdown-menu > li > a, .navbar-nav .open .dropdown-menu > li > a { font-size: 15px; line-height: 25px; padding: 15px 25px; background-color: #242434; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { padding-left: 25px; } .hero-title h1, .hero-quote h1, .section-title h1, .subscribe-section .section-title h1 { font-size: 30px; line-height: 45px; } .hero-desc h3 { font-size: 20px; } .widget-flickr .flickr-feed li { width: 94px; height: 94px; } #footer .widget-flickr .flickr-feed li { width: 71px; height: 71px; } #footer .widget-social .social-icons li { width: 44px; height: 44px; margin: 0 10px 10px 0; } #footer .widget-social .social-icons li:nth-child(6n) { margin-right: 10px; } #footer .widget-social .social-icons li:nth-child(12n) { margin-right: 0; } #footer .widget-social .social-icons li:nth-child(13n) { margin-right: 10px; } #footer .widget-social .social-icons li a { line-height: 44px; } } /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ @media only screen and (max-width: 705px) { .container { width: 650px; } .widget-flickr .flickr-feed li { width: 86px; height: 86px; } #footer .widget-flickr .flickr-feed li { width: 65px; height: 65px; } #footer .widget-social .social-icons li:nth-child(11n) { margin-right: 0; } #footer .widget-social .social-icons li:nth-child(6n) { margin-right: 10px; } } /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ @media only screen and (max-width: 655px) { .container { width: 600px; } .post-title h2 { font-size: 25px; } .widget-flickr .flickr-feed li { width: 78px; height: 78px; } #footer .widget-flickr .flickr-feed li:nth-child(8n) { margin: 5px 10px 5px 0; } #footer .widget-flickr .flickr-feed li:nth-child(7n) { margin-right: 0; } #footer .widget-flickr .flickr-feed li { width: 68px; height: 68px; } .widget-social ul li { width: 43px; height: 43px; } .widget-social .social-icons ul li a { line-height: 43px; } #footer .widget-social .social-icons li { width: 45px; height: 45px; } #footer .widget-social .social-icons li:nth-child(10n) { margin-right: 0; } #footer .widget-social .social-icons li:nth-child(11n) { margin-right: 10px; } #footer .widget-social .social-icons li a { line-height: 45px; } } /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ @media only screen and (max-width: 605px) { .container { width: 550px; } #to-top { display: none; } .hero-title h1, .hero-quote h1, .section-title h1, .subscribe-section .section-title h1 { font-size: 36px; line-height: 50px; } .section-desc h5 { font-size: 18px; } .portfolio-grid li { width: 100%; } .owl-theme .owl-controls { display: none !important; } .widget-flickr .flickr-feed li { width: 85px; height: 85px; } #footer .widget-flickr .flickr-feed li:nth-child(7n) { margin: 5px 10px 5px 0; } #footer .widget-flickr .flickr-feed li:nth-child(6n) { margin-right: 0; } #footer .widget-flickr .flickr-feed li { width: 73px; height: 73px; } .widget-social ul li { width: 43px; height: 43px; } .widget-social .social-icons ul li a { line-height: 43px; } #footer .widget-social .social-icons li { width: 45px; height: 45px; } #footer .widget-social .social-icons li:nth-child(9n) { margin-right: 0; } #footer .widget-social .social-icons li:nth-child(10n) { margin-right: 10px; } #footer .widget-social .social-icons li a { line-height: 45px; } } /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ @media only screen and (max-width: 555px) { .container { width: 450px; } .hero-title h1, .hero-quote h1, .section-title h1, .subscribe-section .section-title h1 { font-size: 30px; line-height: 40px; } .hero-desc h3, .post-title h2 { font-size: 22px; } .feature-icon { float: none; margin: 0 auto 20px; } .feature-title, .feature-desc { text-align: center; } #newsletter-form .form-control { padding-right: 12px; } #newsletter-form button { width: 100%; margin-top: 15px !important; position: relative !important; } .page-error h1 { font-size: 150px; } .widget-flickr .flickr-feed li { width: 84px; height: 84px; } #footer .widget-flickr .flickr-feed li:nth-child(6n) { margin: 5px 10px 5px 0; } #footer .widget-flickr .flickr-feed li:nth-child(4n) { margin-right: 0; } #footer .widget-flickr .flickr-feed li { width: 90px; height: 90px; } .widget-social ul li { width: 44px; height: 44px; } .widget-social .social-icons ul li a { line-height: 44px; } #footer .widget-social .social-icons li { width: 47px; height: 47px; } #footer .widget-social .social-icons li:nth-child(7n) { margin-right: 0; } #footer .widget-social .social-icons li:nth-child(9n) { margin-right: 10px; } #footer .widget-social .social-icons li a { line-height: 47px; } } /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ @media only screen and (max-width: 455px) { .container { width: 320px; } .col-xs-6 { width: 100%; } #top-header .social-icons ul li { float: none; } #top-header .social-icons ul li:last-child { margin-bottom: 10px; } .hero-title h1, .hero-quote h1, .section-title h1, .subscribe-section .section-title h1 { font-size: 28px; line-height: 40px; } .hero-desc h3, .post-title h2 { font-size: 20px; } .page-error h2 { font-size: 25px; } .nesto-form h3 { font-size: 23px; } .nesto-form .buttons-container button { width: 100%; margin: 0 0 20px 0; } .nesto-form .buttons-container a { width: 100%; } .nesto-form .social-icons button { width: 56px; height: 56px; font-size: 24px; line-height: 56px; } .widget-flickr .flickr-feed li { width: 72px; height: 72px; } #footer .widget-flickr .flickr-feed li:nth-child(4n) { margin: 5px 10px 5px 0; } #footer .widget-flickr .flickr-feed li:nth-child(3n) { margin-right: 0; } #footer .widget-flickr .flickr-feed li { width: 80px; height: 80px; } .widget-social ul li { width: 40px; height: 40px; } .widget-social .social-icons ul li a { line-height: 40px; } #footer .widget-social .social-icons li { width: 44px; height: 44px; } #footer .widget-social .social-icons li:nth-child(5n) { margin-right: 0; } #footer .widget-social .social-icons li:nth-child(7n) { margin-right: 10px; } #footer .widget-social .social-icons li a { line-height: 44px; } .content-wrap section { padding: 20px 0 0; } }