/* Import Basic Files -------------------------------------------------------------------------- */ @import url(http://fonts.googleapis.com/css?family=Karma:400,700); @import url(http://fonts.googleapis.com/css?family=Montserrat:400,700); @import url(../fonts/fontawesome/css/font-awesome.min.css); @import url(../fonts/pe-icon-7-stroke/css/pe-icon-7-stroke.css); @import url(../js/plugins/owl-carousel/owl.carousel.css); @import url(../js/plugins/owl-carousel/owl.theme.css); @import url(../js/plugins/owl-carousel/owl.transitions.css); @import url(../js/plugins/fancybox/jquery.fancybox.css); @import url(../js/plugins/wow/animate.min.css); /* Notes: Color1: #323133; Color2: #323133; 1. General 1.1 Main Styles 1.2 Anchor 1.3 Placeholder 1.4 Buttons 1.4.1 Main Buttons 1.4.2 Alternative Main Buttons 1.4.3 More Button 1.5 Section Title 1.6 Short Section Title 1.7 Loader 1.8 Override Tooltip 2. Typography 2.1 Headings 2.2 Selection Color 3. Menu 3.1 Wrapper 3.2 Navbar 3.3 Navbar Brand 3.4 Items 3.5 Menu Button 3.6 Sub Menu 3.6.1 Wrapper 3.6.2 List 3.6.3 Items 3.6.4 Anchor 3.6.5 Hover 4. Home Section 4.1 Wrapper 4.1.1 Parallax Image 4.1.2 Parallax Slider 4.1.3 Video Background 4.2 OverLayer 4.3 Home Slider 4.3.1 Wrapper 4.3.2 Content 4.3.2.1 Main 4.3.2.2 Logo 4.3.2.3 Title 4.3.2.4 Description 4.3.2.5 Divider 4.3.2.6 Button 4.3.3 Arrows 4.3.4 Hover 5. About Section 1 5.1 Wrapper 5.2 Section Content 5.3 Section List 5.3.1 Wrapper 5.3.2 List 5.3.3 Items 5.4 Feature Right Image 6. About Section 2 6.1 Wrapper 6.2 Feature Left Image 6.3 Feature Box Style 1 6.3.1 Wrapper 6.3.2 Icon 6.3.3 Hover 7. About Section 3 8. Download Section 8.1 Wrapper 8.2 OverLayer 8.3 Feature Download Image 8.4 Download Content 9. Clients Section 9.1 Wrapper 9.2 Client Slider 9.2.1 Wrapper 9.2.2 Content 9.2.3 Arrows 9.2.4 Hover 10. Services Section 10.1 Wrapper 10.2 Feature Box Style 2 10.2.1 Wrapper 10.2.2 Icon 10.2.3 Title 10.2.4 Content 10.2.5 Hover 11. Video Section 11.1 Wrapper 11.2 Player 11.3 Button 11.4 Hover 12. Process Section 12.1 Wrapper 12.2 Feature Box Style 3 12.2.1 Wrapper 12.2.2 Icon 12.2.3 Number 12.2.4 Title 12.2.5 Content 12.2.6 Hover 13. Numbers Section 13.1 Wrapper 13.2 OverLayer 13.3 Number Box 13.3.1 Wrapper 13.3.2 Numbers 13.3.3 Title 14. Team Section 14.1 Wrapper 14.2 Team Box 14.2.1 Wrapper 14.2.2 Header 14.2.2.1 Wrapper 14.2.2.2 Image 14.2.2.3 Social 14.2.2.3.1 Wrapper 14.2.2.3.2 List 14.2.2.3.3 Items 14.2.2.3.4 anchor 14.2.2.3.5 Hover 14.2.3 Name 14.2.4 Title 14.2.5 Gray Scale 14.2.6 Hover 15. Purchase Section 15.1 Wrapper 15.2 OverLayer 16. Skills Section 16.1 Wrapper 16.2 Skill Box 16.2.1 Wrapper 16.2.2 Value 16.2.3 Title 16.2.4 Description 16.2.5 Hover 17. Portfolio Section 17.1 Wrapper 17.1 Portfolio Slider 17.1.1 Wrapper 17.1.2 Arrows 17.2.3 Hover 17.2 Portfolio Columns 17.2.1 Wrapper 17.2.2 Content 17.2.3 Image 17.2.4 Details 17.2.4.1 Wrapper 17.2.4.2 Info 17.2.4.2.1 Wrapper 17.2.4.2.2 Titel 17.2.4.2.3 Anchor 17.3 Hover 18. Pricing Section 18.1 Wrapper 18.2 Pricing Table 18.2.1 Wrapper 18.2.2 Price 18.2.3 Title 18.2.4 Description & Fetature 18.2.4.1 Wrapper 18.2.4.2 List 18.2.4.3 Items 18.2.5 Button 18.2.6 Hover 19. Subscribe Section 19.1 Wrapper 19.2 OverLayer 19.3 NewsLetter Form 19.3.1 Wrapper 19.3.2 Form Group 19.3.3 Form Control 19.3.4 Error / Success Message 20. Blog Section 20.1 Wrapper 20.2 Recent Post 20.2.1 Wrapper 20.2.2 Image 20.2.3 Title 20.2.4 Meta 20.2.5 Content 20.2.6 Button 20.2.7 Hover 21. Testimonials Section 21.1 Wrapper 21.2 OverLayer 21.3 Home Slider 21.3.1 Wrapper 21.3.2 Content 21.3.2.1 Wrapper 21.3.2.2 Image 21.3.2.3 Name 21.3.2.4 Quote 21.3.2.5 Dots 21.3.2.6 Hover 22. Contact Section 22.1 Wrapper 22.2 Form Control 22.3 Textarea 22.4 Button 22.5 Error / Success Message 23. Map Section 24. Footer Section 24.1 Wrapper 24.2 Copyright 24.2.1 Wrapper 24.2.2 Anchor 24.3 Social Icons 24.3.1 Wrapper 24.3.2 Anchor 25. Blog 25.1 Blog Title 25.2 Breadcrumb Section 25.2.1 Wrapper 25.2.2 Breadcrumb 25.2.2.1 Wrapper 25.2.2.2 Active Item 25.2.2.3 Anchor 25.3 Post Container 25.3.1 Wrapper 25.3.2 Button 25.4 Hover 25.5 Pager 25.6 Widget 25.6.1 Wrapper 25.6.2 Title 25.6.3 Search Widget 25.6.4 Latest Posts Widget 25.6.4.1 Wrapper 25.6.4.2 Latest Post 25.6.4.2.1 Wrapper 25.6.4.2.2 Image 25.6.4.2.3 Title 25.6.5 Categories Widget 25.6.5.1 Categories List 25.6.5.1.1 Wrapper 25.6.5.1.2 Items 25.6.5.1.3 Anchor 25.6.6 Tags Widget 25.6.6.1 Categories List 25.6.6.1.1 Wrapper 25.6.6.1.2 Items 25.6.6.1.3 Anchor 25.7 Post Share 25.7.1 Wrapper 25.7.2 Items 25.7.2.1 Wrapper 25.7.2.2 Icons 25.7.2.3 Anchor 25.8 Post Comments 25.8.1 Number 25.8.2 Comments 25.8.2.1 Wrapper 25.8.2.2 List 25.8.2.3 Items 25.8.2.3.1 Wrapper 25.8.2.3.2 Image 25.8.2.3.3 Comment 25.8.2.3.3.1 Wrapper 25.8.2.3.3.2 Name 25.8.2.3.3.3 Content 25.8.2.3.3.4 Replay Button 25.8.3 Post Replay 25.8.3.1 Wrapper 25.8.3.2 Title 25.8.3.3 Form 25.8.3.3.1 Form Control 25.8.3.3.2 Textarea 25.8.3.3.3 Button 26. Alert Section 27. Countdown Section 27.1 Wrapper 27.2 Countdown 27.2.1 Wrapper 27.2.2 Title 27.2.3 Digit */ /* ========================================================================== 1. General ========================================================================== */ /* 1.1 Main Styles -------------------------------------------------------------------------- */ body { margin: 0; padding: 0; color: #323133; font-weight: 400; overflow-x: hidden; background-color: #ffffff; -webkit-text-size-adjust: 100%; font: 16px/28px 'PT Serif', serif;; } .no-bottom-padding { padding-bottom: 0 !important; } /* * 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; } /* 1.2 Anchor -------------------------------------------------------------------------- */ a { color: #5abb4b; cursor: pointer; } a, a > * { outline: none; cursor: pointer; text-decoration: none; } a:focus, a:hover { outline: none; color: #85dc77; text-decoration: none; } /* 1.3 Placeholder -------------------------------------------------------------------------- */ input, textarea { color: #000000; } .placeholder { color: #aaaaaa; } #subscribe-section .form-control::-webkit-input-placeholder { opacity: 1; color: #ffffff; } #subscribe-section .form-control:-moz-placeholder { opacity: 1; color: #ffffff; } #subscribe-section .form-control::-moz-placeholder { opacity: 1; color: #ffffff; } #subscribe-section .form-control:-ms-input-placeholder { opacity: 1; color: #ffffff; } /* 1.4 Buttons -------------------------------------------------------------------------- */ /* 1.4.1 Main Buttons -------------------------------------------------------------------------- */ .btn-nesto, .btn.btn-nesto { z-index: 1; color: #ffffff; font-size: 20px; font-weight: 700; overflow: hidden; line-height: 28px; padding: 10px 30px; position: relative; font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-border: 2px solid #ffffff; -moz-border: 2px solid #ffffff; -o-border: 2px solid #ffffff; border: 2px solid #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; } .btn-nesto:after { left: 0; bottom: 0; height: 0; width: 100%; content: ''; z-index: -1; 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; } .btn-nesto:hover { color: #323133; } .btn-nesto:hover:after { height: 100%; } /* 1.4.2 Alternative Main Buttons -------------------------------------------------------------------------- */ .btn-nesto-o, .btn.btn-nesto-o { z-index: 1; color: #323133; font-size: 20px; font-weight: 700; overflow: hidden; line-height: 28px; padding: 10px 30px; position: relative; font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-border: 2px solid #e1e1e1; -moz-border: 2px solid #e1e1e1; -o-border: 2px solid #e1e1e1; border: 2px solid #e1e1e1; -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; } .btn-nesto-o:after { left: 0; bottom: 0; height: 0; width: 100%; content: ''; z-index: -1; position: absolute; background-color: #5abb4b; -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; } .btn-nesto-o:hover { color: #ffffff; -webkit-border-color: #8ab8cd; -moz-border-color: #8ab8cd; -o-border-color: #8ab8cd; border-color: #8ab8cd; } .btn-nesto-o:hover:after { height: 100%; } /* 1.4.3 More Button -------------------------------------------------------------------------- */ .btn-more-left { width: 100%; display: block; text-align: left; } .btn-more a { margin: 0 auto 50px; } /* 1.5 Section Title -------------------------------------------------------------------------- */ .section-title { width: 100%; color: #323133; font-size: 40px; font-weight: 700; overflow: hidden; line-height: 50px; text-align: center; position: relative; margin: 50px auto 80px; padding-bottom: 10px; font-family: 'Roboto', sans-serif; } .section-title:after { bottom: 0; left: 50%; width: 80px; height: 2px; content: ''; margin-left: -40px; position: absolute; background-color: #323133; -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; } .section-title:hover:after { width: 120px; margin-left: -60px; } .section-title2 { width: 100%; color: #323133; font-size: 25px; overflow: hidden; line-height: 50px; text-align: center; position: relative; padding-bottom: 10px; font-family: 'Roboto', sans-serif; } .section-title2:after { bottom: 0; left: 50%; width: 80px; height: 2px; content: ''; margin-left: -40px; position: absolute; background-color: #323133; -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; } .section-title2:hover:after { width: 120px; margin-left: -60px; } /* 1.6 Short Section Title -------------------------------------------------------------------------- */ .short-section-title { width: 100%; color: #323133; font-size: 28px; font-weight: 700; overflow: hidden; line-height: 32px; position: relative; margin: 50px auto 20px; padding-bottom: 15px; font-family: 'PT Serif', serif; } .short-section-title:after { left: 0; bottom: 0; height: 2px; content: ''; width: 100px; position: absolute; background-color: #e1e1e1; -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; } .short-section-title:hover:after { width: 150px; } /* 1.7 Loader -------------------------------------------------------------------------- */ #loader { top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; position: fixed; z-index: 999999; background-color: #323133; } #loader-container { left: 0; top: 50%; width: 100%; height: 10px; overflow: hidden; margin-top: -5px; text-align: center; position: absolute; } #loader-container img { display: block; margin: 0 auto; } /* 1.8 Override Tooltip -------------------------------------------------------------------------- */ .tooltip-inner { font-size: 16px; padding: 10px 20px; letter-spacing: 1px; } /* ========================================================================== 2. Typography ========================================================================== */ /* 2.1 Headings -------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; color: #323133; line-height: 1.2; font-weight: normal; font-family: 'Roboto', sans-serif; } h1 { font-size: 30px; } h2 { font-size: 24px; } h3 { font-size: 20px; } h4 { font-size: 17px; } h5 { font-size: 14px; } h6 { font-size: 12px; } p { margin: 0 0 10px; } b, strong { font-weight: 700; } /* 2.2 Selection Color -------------------------------------------------------------------------- */ ::selection { color: #ffffff; text-shadow: none; background-color: #323133; } ::-webkit-selection { color: #ffffff; text-shadow: none; background-color: #323133; } ::-moz-selection { color: #ffffff; text-shadow: none; background-color: #323133; } /* ========================================================================== 3. Menu ========================================================================== */ /* 3.1 Wrapper -------------------------------------------------------------------------- */ #nav-wrapper { top: 0; left: 0; padding: 0; width: 100%; z-index: 999; position: fixed; background-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; } #nav-wrapper.menubgC { background-color: #b0b0b0; } #nav-wrapper .container { overflow: visible; } /* 3.2 Navbar -------------------------------------------------------------------------- */ .navbar { margin: 0; min-height: 50px; -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; } .navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand { margin-left: 0; } /* 3.3 Navbar Brand -------------------------------------------------------------------------- */ .navbar-brand { padding: 0; height: 50px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .navbar-brand img { width: 100%; display: block; margin-top: -10px; padding-right: 15px; max-width: 129px; } .navbar-header a { padding: 0; margin: 20px 0; color: #ffffff; font-size: 14px; line-height: 50px; } .main-logo-right { /** float:right; padding: 150px 50px 0 0; **/ margin-top:50px; } /* 3.4 Items -------------------------------------------------------------------------- */ .navbar-nav > li { padding: 0 10px; margin-left: 0px; position: relative; } .navbar-nav > li:first-child { margin-left: 0; } .nav > li > a:hover, .nav > li > a:focus, .navbar-nav > li.active a { color: #ffffff; background-color: transparent; } .navbar-nav > li > a { color: #ffffff; padding: 20px 0; font-size: 14px; font-weight: 400; line-height: 50px; font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif; -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; } .navbar-nav > li > a:after { left: 0; width: 0; height: 2px; content: ''; bottom: 27px; position: absolute; background-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; } .nav > li > a:hover:after, .nav > li > a:focus:after, .navbar-nav > li.active a:after { left: 0; width: 100%; height: 2px; content: ''; bottom: 27px; position: absolute; background-color: #ffffff; } /* 3.5 Menu Button -------------------------------------------------------------------------- */ .navbar-toggle { margin: 0; padding: 0; color: #ffffff; font-size: 30px; line-height: 50px; } /* 3.6 Sub Menu -------------------------------------------------------------------------- */ /* 3.6.1 Wrapper -------------------------------------------------------------------------- */ .submenu { overflow: hidden; } .submenu:hover { overflow: visible; } /* 3.6.2 List -------------------------------------------------------------------------- */ .submenu ul { left: 0; top: 110%; margin: 0; opacity: 0; padding: 7px 0; font-size: 14px; min-width: 200px; list-style: none; overflow: hidden; position: absolute; background-color: #323133; -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; } .submenu ul:after { width: 0; height: 0; top: -9px; left: 10px; content: ''; position: absolute; -webkit-border-bottom: 10px solid #323133; -moz-border-bottom: 10px solid #323133; -o-border-bottom: 10px solid #323133; border-bottom: 10px solid #323133; -webkit-border-left: 10px solid transparent; -moz-border-left: 10px solid transparent; -o-border-left: 10px solid transparent; border-left: 10px solid transparent; -webkit-border-right: 10px solid transparent; -moz-border-right: 10px solid transparent; -o-border-right: 10px solid transparent; border-right: 10px solid transparent; } /* 3.6.3 Items -------------------------------------------------------------------------- */ .submenu ul li { width: 100%; display: block; overflow: hidden; } .submenu ul li:first-child { -webkit-border-top: 0; -moz-border-top: 0; -o-border-top: 0; border-top: 0; } .submenu ul li:last-child { -webkit-border-bottom: 0; -moz-border-bottom: 0; -o-border-bottom: 0; border-bottom: 0; } /* 3.6.4 Anchor -------------------------------------------------------------------------- */ .submenu ul li a { z-index: 1; color: #e1e1e1; display: block; font-size: 14px; overflow: hidden; padding: 7px 12px; position: relative; font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif; -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; } .submenu ul li a:after { display: none; } .submenu ul li a:before { left: 0; bottom: 0; height: 0; width: 100%; z-index: -1; content: ''; position: absolute; background-color: #282729; -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; } /* 3.6.5 Hover -------------------------------------------------------------------------- */ .submenu ul li a:hover { color: #ffffff; } .submenu ul li a:hover:before { height: 100%; } .submenu:hover ul { top: 100%; opacity: 1; overflow: visible; } /* ========================================================================== 4. Home Section ========================================================================== */ /* 4.1 Wrapper -------------------------------------------------------------------------- */ /* 4.1.1 Parallax Image -------------------------------------------------------------------------- */ .parallax-image #home-section { width: 100%; overflow: hidden; padding: 290px 0; position: relative; background-color: #ffffff; background-repeat: repeat; background-attachment: fixed; background-position: center center; background-image: url(../images/background/homebg.jpg); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .parallax-image #home-blog-section { width: 100%; overflow: hidden; position: relative; padding: 110px 0 0; background-color: #ffffff; background-repeat: repeat; background-attachment: fixed; background-position: center center; background-image: url(../images/background/homebg.jpg); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } /* 4.1.2 Parallax Slider -------------------------------------------------------------------------- */ .parallax-slider #home-section { padding: 0; width: 100%; overflow: hidden; position: relative; background-color: #ffffff; } .parallax-slider #owl-home-wrapper .slide-item { overflow: hidden; position: relative; padding: 215px 0 150px; background-repeat: repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .parallax-slider #owl-home-wrapper .slide-item:after { top: 0; left: 0; content: ''; width: 100%; height: 100%; opacity: 0.3; position: absolute; background-color: #000000; } .parallax-slider #owl-home-wrapper .slide-item .slide-content { z-index: 1; } .parallax-slider #owl-home-wrapper .slide-item .col-md-7 .feature-left-image, .parallax-slider #owl-home-wrapper .slide-item .col-md-7 .feature-left-image img { float: right; margin: 0 !important; } .parallax-slider #owl-home-wrapper .slide-item .col-md-5 .slide-title { font-size: 40px; text-align: left; line-height: 50px; margin-top: 110px !important; } .parallax-slider #owl-home-wrapper .slide-item .col-md-5 .slide-desc { text-align: left; margin-bottom: 15px; } .parallax-slider #owl-home-wrapper .slide-item .col-md-5 .slide-divider { margin: 0 0 30px !important; } .parallax-slider #owl-home-wrapper .slide-item .col-md-5 .slide-button { text-align: left; } .parallax-slider #owl-home-wrapper .slide-item .feature-bottom-image { margin-top: 100px; } /* 4.1.3 Video Background -------------------------------------------------------------------------- */ .video-background #home-section { width: 100%; overflow: hidden; padding: 290px 0; position: relative; background-color: transparent; } /* 4.2 OverLayer -------------------------------------------------------------------------- */ #home-section-overlayer { top: 0; left: 0; content: ''; width: 100%; height: 100%; opacity: 0.3; position: absolute; background-color: #000000; } /* 4.3 Home Slider -------------------------------------------------------------------------- */ /* 4.3.1 Wrapper -------------------------------------------------------------------------- */ .owl-home, #owl-home-wrapper { width: 100%; height: 100%; overflow: hidden; position: relative; text-align: center; } .owl-controls { display: none; } /* 4.3.2 Content -------------------------------------------------------------------------- */ /* 4.3.2.1 Main -------------------------------------------------------------------------- */ .owl-home .slide-content { width: 100%; color: #ffffff; overflow: hidden; position: relative; } .owl-home .slide-item { width: 100%; height: 100%; padding-top: 65px; } /* 4.3.2.2 Logo -------------------------------------------------------------------------- */ .slide-logo { width: 100%; overflow: hidden; margin: 0 auto 45px; } .slide-logo img { display: block; margin: 0 auto; max-width: 154px; } /* 4.3.2.3 Title -------------------------------------------------------------------------- */ .owl-home .slide-title { font-size: 77px; font-weight: 700; line-height: 90px; margin-bottom: 15px; font-family: 'Roboto', sans-serif; } /* 4.3.2.4 Description -------------------------------------------------------------------------- */ .owl-home .slide-desc { font-size: 30px; font-weight: 400; line-height: 30px; margin-bottom: 25px; letter-spacing: 1px; letter-spacing: 0.5px; } /* 4.3.2.5 Divider -------------------------------------------------------------------------- */ .owl-home .slide-divider { height: 2px; width: 200px; margin: 0 auto; display: block; overflow: hidden; margin-bottom: 75px; background-color: #ffffff; } /* 4.3.2.6 Button -------------------------------------------------------------------------- */ .slide-button { width: 100%; overflow: hidden; } /* 4.3.3 Arrows -------------------------------------------------------------------------- */ #owl-home-wrapper .owl-navigation { left: 0; top: 50%; width: 60px; height: 130px; margin-top: -60px; position: absolute; } #owl-home-wrapper .home-prev, #owl-home-wrapper .home-next { z-index: 1; width: 60px; height: 60px; display: block; color: #ffffff; overflow: hidden; font-size: 30px; line-height: 64px; text-align: center; position: relative; margin-left: -60px; -webkit-border: 2px solid #ffffff; -moz-border: 2px solid #ffffff; -o-border: 2px solid #ffffff; border: 2px solid #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; } #owl-home-wrapper .home-prev { margin-bottom: 10px; } #owl-home-wrapper .home-prev:after, #owl-home-wrapper .home-next:after { left: 0; height: 0; bottom: 0; width: 100%; content: ''; z-index: -1; 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; } /* 4.3.4 Hover -------------------------------------------------------------------------- */ #owl-home-wrapper:hover .home-prev, #owl-home-wrapper:hover .home-next { margin-left: 0; } #owl-home-wrapper .home-prev:hover:after, #owl-home-wrapper .home-next:hover:after { height: 100%; } #owl-home-wrapper .home-prev:hover, #owl-home-wrapper .home-next:hover { color: #323133; } /* ========================================================================== 5. About Section 1 ========================================================================== */ /* 5.1 Wrapper -------------------------------------------------------------------------- */ #about-section-1 { width: 100%; overflow: hidden; padding: 100px 0 0; background-color: #ffffff; } /* 5.2 Section Content -------------------------------------------------------------------------- */ .section-content { width: 100%; overflow: hidden; margin-bottom: 15px; letter-spacing: 0.5px; } .section-content a.btn-nesto { margin: 70px 30px 30px 0; } .section-content a.btn-nesto:last-child { margin-right: 0; } /* 5.3 Section List -------------------------------------------------------------------------- */ /* 5.3.1 Wrapper -------------------------------------------------------------------------- */ .section-list { width: 100%; overflow: hidden; margin-bottom: 15px; } /* 5.3.2 List -------------------------------------------------------------------------- */ .section-list ul { margin: 0; padding: 0; list-style: none; } /* 5.3.3 Items -------------------------------------------------------------------------- */ .section-list ul li { margin: 0; display: block; position: relative; padding-left: 17px; letter-spacing: 0.5px; } .section-list ul li:before { top: 0; left: 0; font-size: 10px; content: '\f0c8'; position: absolute; font-family: 'FontAwesome'; } /* 5.4 Feature Right Image -------------------------------------------------------------------------- */ .feature-right-image { width: 100%; overflow: hidden; margin: 45px auto 0; } .feature-right-image img { width: 100%; display: block; margin: 0 auto; max-width: 555px; } /* ========================================================================== 6. About Section 2 ========================================================================== */ /* 6.1 Wrapper -------------------------------------------------------------------------- */ #about-section-2 { width: 100%; overflow: hidden; padding: 0 0 0; background-color: #ffffff; } /* 6.2 Feature Left Image -------------------------------------------------------------------------- */ .feature-left-image { width: 100%; overflow: hidden; margin: auto 0; } .feature-left-image img { /** width: 100%; **/ display: block; margin: 0 auto; max-width: 555px; } /* 6.3 Feature Box Style 1 -------------------------------------------------------------------------- */ /* 6.3.1 Wrapper -------------------------------------------------------------------------- */ .feature-box-style-1 { width: 100%; overflow: hidden; position: relative; margin: 0 auto 15px; } /* 6.3.2 Icon -------------------------------------------------------------------------- */ .feature-box-style-1 .feature-icon { z-index: 1; float: left; width: 50px; height: 50px; color: #323133; font-size: 26px; line-height: 56px; text-align: center; margin-right: 15px; position: relative; background-color: #ffffff; -webkit-border: 2px solid #e1e1e1; -moz-border: 2px solid #e1e1e1; -o-border: 2px solid #e1e1e1; border: 2px solid #e1e1e1; -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; } .feature-box-style-1 .feature-icon i { z-index: 1; position: relative; } .feature-box-style-1 .feature-icon:after { left: 0; height: 0; bottom: 0; content: ''; width: 100%; position: absolute; background-color: #323133; -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; } /* 6.3.3 Hover -------------------------------------------------------------------------- */ .feature-box-style-1:hover .feature-icon { color: #ffffff; -webkit-border-color: #323133; -moz-border-color: #323133; -o-border-color: #323133; border-color: #323133; } .feature-box-style-1:hover .feature-icon:after { height: 100%; } /* ========================================================================== 7. About Section 3 ========================================================================== */ #about-section-3 { width: 100%; overflow: hidden; padding: 100px 0; background-color: #ffffff; } /* ========================================================================== 8. Download Section ========================================================================== */ /* 8.1 Wrapper -------------------------------------------------------------------------- */ #download-section { padding: 0; width: 100%; overflow: hidden; background-color: #ffffff; background-repeat: repeat; background-attachment: fixed; background-position: center center; background-image: url(../images/background/downloadbg.jpg); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #download-section:hover .short-section-title:after { width: 150px; } /* 8.2 OverLayer -------------------------------------------------------------------------- */ #download-section-overlayer { width: 100%; overflow: hidden; padding: 100px 0 0; position: relative; background-color: rgba(0, 0, 0, 0.3); } /* 8.3 Feature Download Image -------------------------------------------------------------------------- */ .feature-bottom-image { margin: 0; padding: 0; float: left; width: 100%; } /* 8.4 Download Content -------------------------------------------------------------------------- */ .download-content { float: right; max-width: 375px; overflow: hidden; margin: 50px auto; padding-left: 30px; letter-spacing: 0.5px; } .download-content .section-content, .download-content .short-section-title { color: #ffffff; } .download-content .section-content { margin-bottom: 30px; } /* ========================================================================== 9. Clients Section ========================================================================== */ /* 9.1 Wrapper -------------------------------------------------------------------------- */ #clients-section { width: 100%; padding: 80px 0; overflow: hidden; background-color: #323133; } /* 9.2 Client Slider -------------------------------------------------------------------------- */ /* 9.2.1 Wrapper -------------------------------------------------------------------------- */ .owl-client, #owl-client-wrapper { width: 100%; overflow: hidden; position: relative; text-align: center; } /* 9.2.2 Content -------------------------------------------------------------------------- */ .owl-client .slide-content { padding: 0 15px; } .owl-client .slide-content a { display: block; -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; } .owl-client .slide-content img { margin: 0 auto; max-width: 170px; } /* 9.2.3 Arrows -------------------------------------------------------------------------- */ #owl-client-wrapper .owl-navigation { top: 0; left: 0; height: 0; width: 100%; position: absolute; } #owl-client-wrapper .client-prev, #owl-client-wrapper .client-next { z-index: 1; width: 40px; height: 40px; color: #ffffff; font-size: 20px; line-height: 44px; text-align: center; position: relative; -webkit-border: 2px solid #ffffff; -moz-border: 2px solid #ffffff; -o-border: 2px solid #ffffff; border: 2px solid #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; } #owl-client-wrapper .client-prev { float: left; margin-left: -60px; } #owl-client-wrapper .client-next { float: right; margin-right: -60px; } #owl-client-wrapper .client-prev:after, #owl-client-wrapper .client-next:after { left: 0; bottom: 0; height: 0; content: ''; z-index: -1; width: 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; } /* 9.2.4 Hover -------------------------------------------------------------------------- */ #owl-client-wrapper:hover .client-prev { margin-left: 0; } #owl-client-wrapper:hover .client-next { margin-right: 0; } #owl-client-wrapper .client-prev:hover:after, #owl-client-wrapper .client-next:hover:after { height: 100%; } #owl-client-wrapper .client-prev:hover, #owl-client-wrapper .client-next:hover { color: #323133; } .owl-client .slide-content a:hover { opacity: 0.5; } /* ========================================================================== 10. Services Section ========================================================================== */ /* 10.1 Wrapper -------------------------------------------------------------------------- */ #articles-section { width: 100%; overflow: hidden; position: relative; padding: 0 0 0px; background-color: #ffffff; } #articles-section:hover .section-title:after { width: 120px; margin-left: -60px; } /* 10.2 Feature Box Style 2 -------------------------------------------------------------------------- */ /* 10.2.1 Wrapper -------------------------------------------------------------------------- */ .feature-box-style-2 { width: 100%; overflow: hidden; position: relative; margin: 0 auto 20px; } /* 10.2.2 Icon -------------------------------------------------------------------------- */ .feature-box-style-2 .feature-icon { z-index: 1; float: left; width: 100px; height: 100px; color: #323133; font-size: 50px; overflow: hidden; position: relative; text-align: center; line-height: 120px; margin: 0 20px 15px 0; background-color: #ffffff; -webkit-border: 2px solid #e1e1e1; -moz-border: 2px solid #e1e1e1; -o-border: 2px solid #e1e1e1; border: 2px solid #e1e1e1; -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; } .feature-box-style-2 .feature-icon i { z-index: 1; position: relative; } .feature-box-style-2 .feature-icon:after { left: 0; bottom: 0; height: 0; content: ''; width: 100%; position: absolute; background-color: #323133; -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; } /* 10.2.3 Title -------------------------------------------------------------------------- */ .feature-box-style-2 .feature-title { color: #323133; font-size: 28px; text-align: left; font-weight: 700; overflow: hidden; line-height: 34px; position: relative; margin: 0 auto 20px; padding-bottom: 10px; font-family: 'Roboto', sans-serif; } .feature-box-style-2 .feature-title:after { left: 0; bottom: 0; height: 2px; content: ''; width: 100px; position: absolute; background-color: #e1e1e1; -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; } /* 10.2.4 Content -------------------------------------------------------------------------- */ .feature-box-style-2 .feature-content { padding: 0 120px; letter-spacing: 0.5px; } .feature-box-style-2 .feature-content-peoples { padding: 0 50px; letter-spacing: 0.5px; } /* 10.2.5 Hover -------------------------------------------------------------------------- */ .feature-box-style-2 .feature-title:hover:after { width: 250px; } .feature-box-style-2:hover .feature-icon { color: #ffffff; -webkit-border-color: #323133; -moz-border-color: #323133; -o-border-color: #323133; border-color: #323133; } .feature-box-style-2:hover .feature-icon:after { height: 100%; } /* ========================================================================== 11. Video Section ========================================================================== */ /* 11.1 Wrapper -------------------------------------------------------------------------- */ #video-section { padding: 0; width: 100%; overflow: hidden; background-color: #ffffff; background-repeat: repeat; background-attachment: fixed; background-position: center center; background-image: url(../images/background/videobg.jpg); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #video-section .short-section-title { margin: 0; padding: 0; color: #ffffff; text-align: center; } #video-section .short-section-title:after { display: none; } #video-section-overlayer { width: 100%; overflow: hidden; padding: 200px 0; position: relative; background-color: rgba(0, 0, 0, 0.3); } /* 11.2 Player -------------------------------------------------------------------------- */ .video-player { top: 0; left: 0; z-index: 1; width: 100%; height: 100%; display: none; position: absolute; -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; } .video-player iframe { width: 100%; height: 100%; -webkit-border: 0; -moz-border: 0; -o-border: 0; border: 0; } /* 11.3 Button -------------------------------------------------------------------------- */ .stop-video, .play-video { z-index: 1; width: 85px; height: 85px; color: #ffffff; display: block; font-size: 60px; position: relative; line-height: 110px; text-align: center; margin: 0 auto 50px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-border: 2px solid #ffffff; -moz-border: 2px solid #ffffff; -o-border: 2px solid #ffffff; border: 2px solid #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; } .stop-video i, .play-video i { z-index: 1; position: relative; } .stop-video:after, .play-video:after { left: 0; bottom: 0; height: 0; content: ''; width: 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; } .stop-video { display: none; } /* 11.4 Hover -------------------------------------------------------------------------- */ .stop-video:hover, .play-video:hover { color: #323133; } .stop-video:hover:after, .play-video:hover:after { height: 100%; } /* ========================================================================== 12. Process Section ========================================================================== */ /* 12.1 Wrapper -------------------------------------------------------------------------- */ #process-section { width: 100%; overflow: hidden; position: relative; padding: 100px 0 50px; background-color: #ffffff; } #process-section:hover .section-title:after { width: 120px; margin-left: -60px; } /* 12.2 Feature Box Style 3 -------------------------------------------------------------------------- */ /* 12.2.1 Wrapper -------------------------------------------------------------------------- */ .feature-box-style-3 { width: 100%; overflow: hidden; position: relative; margin: 0 auto 50px; } /* 12.2.2 Icon -------------------------------------------------------------------------- */ .feature-box-style-3 .feature-icon { z-index: 1; float: left; width: 100px; height: 100px; color: #323133; font-size: 50px; overflow: hidden; position: relative; text-align: center; line-height: 120px; margin: 0 20px 25px 0; background-color: #ffffff; -webkit-border: 2px solid #e1e1e1; -moz-border: 2px solid #e1e1e1; -o-border: 2px solid #e1e1e1; border: 2px solid #e1e1e1; -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; } .feature-box-style-3 .feature-icon i { z-index: 1; position: relative; } .feature-box-style-3 .feature-icon:after { left: 0; bottom: 0; height: 0; content: ''; width: 100%; position: absolute; background-color: #5abb4b; -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.2.3 Number -------------------------------------------------------------------------- */ .feature-box-style-3 .feature-number { top: 0; left: 50px; color: #e1e1e1; font-size: 138px; text-align: left; font-weight: 700; overflow: hidden; line-height: 100px; position: absolute; font-family: 'Roboto', sans-serif; -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.2.4 Title -------------------------------------------------------------------------- */ .feature-box-style-3 .feature-title { width: 100%; display: block; color: #323133; font-size: 28px; text-align: left; font-weight: 700; overflow: hidden; line-height: 34px; position: relative; margin: 0 auto 20px; padding-bottom: 10px; font-family: 'Roboto', sans-serif; } .feature-box-style-3 .feature-title:after { left: 0; bottom: 0; height: 2px; content: ''; width: 100px; position: absolute; background-color: #e1e1e1; -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.2.5 Content -------------------------------------------------------------------------- */ .feature-box-style-3 .feature-content { letter-spacing: 0.5px; } /* 12.2.6 Hover -------------------------------------------------------------------------- */ .feature-box-style-3 .feature-title:hover:after { width: 250px; } .feature-box-style-3:hover .feature-icon { color: #ffffff; -webkit-border-color: #8ab8cd; -moz-border-color: #8ab8cd; -o-border-color: #8ab8cd; border-color: #8ab8cd; } .feature-box-style-3:hover .feature-icon:after { height: 100%; } /* ========================================================================== 13. Numbers Section ========================================================================== */ /* 13.1 Wrapper -------------------------------------------------------------------------- */ #numbers-section { width: 100%; padding: 0; overflow: hidden; background-color: #ffffff; background-repeat: repeat; background-attachment: fixed; background-position: center center; background-image: url(../images/background/article6-section-bg.jpg); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } /* 13.2 OverLayer -------------------------------------------------------------------------- */ #numbers-section-overlayer { width: 100%; overflow: hidden; position: relative; padding: 100px 0 50px; background-color: rgba(0, 0, 0, 0.3); } /* 13.3 Number Box -------------------------------------------------------------------------- */ /* 13.3.1 Wrapper -------------------------------------------------------------------------- */ .number-box { width: 100%; display: block; /** overflow: hidden; **/ text-align: center; margin: 0 auto 50px; font-size: 35px; line-height:17px; } /* 13.3.2 Numbers -------------------------------------------------------------------------- */ .number-box .box-numbers { width: 100%; color: #ffffff; font-size: 60px; font-weight: 700; overflow: hidden; line-height: 70px; text-align: center; position: relative; margin: 0 auto 20px; padding-bottom: 15px; font-family: 'Roboto', sans-serif; } .number-box .box-numbers:after { bottom: 0; left: 50%; height: 2px; content: ''; width: 100px; margin-left: -50px; position: absolute; background-color: #e1e1e1; } /* 13.3.3 Title -------------------------------------------------------------------------- */ .number-box .box-title { color: #ffffff; /** letter-spacing: 0.5px; text-transform: capitalize; **/ } /* ========================================================================== 14. Team Section ========================================================================== */ /* 14.1 Wrapper -------------------------------------------------------------------------- */ #team-section { width: 100%; overflow: hidden; position: relative; padding: 100px 0 50px; background-color: #ffffff; } #team-section:hover .section-title:after { width: 120px; margin-left: -60px; } /* 14.2 Team Box -------------------------------------------------------------------------- */ /* 14.2.1 Wrapper -------------------------------------------------------------------------- */ .team-box { width: 100%; display: block; max-width: 263px; overflow: hidden; margin: 0 auto 50px; } /* 14.2.2 Header -------------------------------------------------------------------------- */ /* 14.2.2.1 Wrapper -------------------------------------------------------------------------- */ .team-box .member-header { width: 100%; display: block; overflow: hidden; position: relative; margin: 0 auto 20px; background-color: #323133; -webkit-border: 2px solid #323133; -moz-border: 2px solid #323133; -o-border: 2px solid #323133; border: 2px solid #323133; } /* 14.2.2.2 Image -------------------------------------------------------------------------- */ .team-box .member-image, .team-box .member-image img { width: 100%; display: block; overflow: hidden; -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; } /* 14.2.2.3 Social -------------------------------------------------------------------------- */ /* 14.2.2.3.1 Wrapper -------------------------------------------------------------------------- */ .team-box .member-social { left: 0; bottom: 0; width: 100%; display: block; overflow: hidden; position: absolute; background-color: #323133; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; -ms-transition: -ms-transform 0.3s; -o-transition: -o-transform 0.3s; transition: transform 0.3s; -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } /* 14.2.2.3.2 List -------------------------------------------------------------------------- */ .team-box .member-social ul { margin: 0; overflow: hidden; list-style: none; text-align: center; padding: 15px 0 0; } /* 14.2.2.3.3 Items -------------------------------------------------------------------------- */ .team-box .member-social ul li { width: 45px; margin: 0 5px 15px; display: inline-block; } /* 14.2.2.3.4 anchor -------------------------------------------------------------------------- */ .team-box .member-social ul li a { display: block; color: #e1e1e1; font-size: 20px; line-height: 40px; text-align: center; position: relative; -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; } /* 14.2.2.3.5 Hover -------------------------------------------------------------------------- */ .team-box .member-social ul li a:hover { color: #ffffff; } /* 14.2.3 Name -------------------------------------------------------------------------- */ .team-box .member-name { width: 100%; display: block; color: #323133; font-size: 28px; text-align: left; font-weight: 700; overflow: hidden; line-height: 34px; position: relative; margin: 0 auto 7px; padding-bottom: 10px; font-family: 'Roboto', sans-serif; } .team-box .member-name:after { left: 0; bottom: 0; height: 2px; content: ''; width: 100px; position: absolute; background-color: #e1e1e1; -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; } .team-box .member-name:hover:after { width: 150px; } /* 14.2.4 Title -------------------------------------------------------------------------- */ .team-box .member-title { color: #323133; letter-spacing: 0.5px; text-transform: capitalize; } /* 14.2.5 Gray Scale -------------------------------------------------------------------------- */ .grayscale { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,#grayscale"); filter: gray; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } /* 14.2.6 Hover -------------------------------------------------------------------------- */ .team-box:hover .member-social { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .team-box:hover .member-image img { margin: -45px auto 45px; } .team-box:hover .grayscale { -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: grayscale(0%); filter: url("data:image/svg+xml;utf8,#grayscale"); filter: gray; filter: none; } /* ========================================================================== 15. Purchase Section ========================================================================== */ /* 15.1 Wrapper -------------------------------------------------------------------------- */ #purchase-section { padding: 0; width: 100%; overflow: hidden; background-color: #ffffff; background-repeat: repeat; background-attachment: fixed; background-position: center center; background-image: url(../images/background/purchasebg.jpg); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #purchase-section .section-content, #purchase-section .short-section-title { color: #ffffff; } #purchase-section .feature-bottom-image img { width: 100%; } #purchase-section .feature-bottom-image { margin-top: 15px; } /* 15.2 OverLayer -------------------------------------------------------------------------- */ #purchase-section-overlayer { width: 100%; overflow: hidden; position: relative; padding: 100px 0 0; background-color: rgba(0, 0, 0, 0.3); } /* ========================================================================== 16. Skills Section ========================================================================== */ /* 16.1 Wrapper -------------------------------------------------------------------------- */ #skills-section { width: 100%; overflow: hidden; position: relative; padding: 100px 0 50px; background-color: #ffffff; } #skills-section:hover .section-title:after { width: 120px; margin-left: -60px; } /* 16.2 Skill Box -------------------------------------------------------------------------- */ /* 16.2.1 Wrapper -------------------------------------------------------------------------- */ .skill-box { width: 100%; display: block; overflow: hidden; text-align: center; margin: 0 auto 50px; } /* 16.2.2 Value -------------------------------------------------------------------------- */ .skill-box .skill-value { width: 130px; height: 130px; display: block; overflow: hidden; position: relative; margin: 0 auto 20px; } .skill-box .skill-value:after { top: 60%; right: 20%; z-index: 2; width: 13px; content: '%'; height: 30px; display: block; color: #323133; font-size: 16px; font-weight: 700; overflow: hidden; text-align: center; position: absolute; font-family: 'Roboto', sans-serif; -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; } .skill-box .skill-value span { top: 9px; left: 9px; z-index: 2; width: 112px; height: 112px; display: block; color: #323133; font-size: 46px; font-weight: 700; overflow: hidden; line-height: 120px; text-align: center; position: absolute; font-family: 'Roboto', sans-serif; -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; } .skill-box .skill-value span:before { left: 0; bottom: 0; height: 0; z-index: -1; content: ''; width: 100%; position: absolute; background-color: #323133; -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; } /* 16.2.3 Title -------------------------------------------------------------------------- */ .skill-box .skill-title { width: 100%; color: #323133; font-size: 28px; font-weight: 700; overflow: hidden; line-height: 32px; position: relative; margin: 0 auto 15px; padding-bottom: 15px; font-family: 'Roboto', sans-serif; } .skill-box .skill-title:after { left: 50%; bottom: 0; height: 2px; content: ''; width: 100px; margin-left: -50px; position: absolute; background-color: #e1e1e1; -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; } /* 16.2.4 Description -------------------------------------------------------------------------- */ .skill-box .skill-desc { letter-spacing: 0.5px; } /* 16.2.5 Hover -------------------------------------------------------------------------- */ .skill-box:hover .skill-value span:before { height: 100%; } .skill-box:hover .skill-value span, .skill-box:hover .skill-value:after { color: #ffffff; } .skill-box:hover .skill-title:after { width: 150px; margin-left: -75px; } /* ========================================================================== 17. Portfolio Section ========================================================================== */ /* 17.1 Wrapper -------------------------------------------------------------------------- */ #portfolio-section { padding: 0; width: 100%; overflow: hidden; position: relative; background-color: #ffffff; } /* 17.1 Portfolio Slider -------------------------------------------------------------------------- */ /* 17.1.1 Wrapper -------------------------------------------------------------------------- */ .owl-portfolio, #owl-portfolio-wrapper { width: 100%; overflow: hidden; position: relative; text-align: center; } /* 17.1.2 Arrows -------------------------------------------------------------------------- */ #owl-portfolio-wrapper .owl-navigation { left: 0; top: 50%; width: 100%; position: absolute; } #owl-portfolio-wrapper .portfolio-prev, #owl-portfolio-wrapper .portfolio-next { z-index: 1; width: 60px; height: 60px; color: #ffffff; font-size: 30px; line-height: 64px; text-align: center; position: relative; -webkit-border: 2px solid #ffffff; -moz-border: 2px solid #ffffff; -o-border: 2px solid #ffffff; border: 2px solid #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; } #owl-portfolio-wrapper .portfolio-prev { float: left; margin-left: -60px; } #owl-portfolio-wrapper .portfolio-next { float: right; margin-right: -60px; } #owl-portfolio-wrapper .portfolio-prev:after, #owl-portfolio-wrapper .portfolio-next:after { left: 0; bottom: 0; height: 0; content: ''; z-index: -1; width: 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; } /* 17.2.3 Hover -------------------------------------------------------------------------- */ #owl-portfolio-wrapper:hover .portfolio-prev { margin-left: 0; } #owl-portfolio-wrapper:hover .portfolio-next { margin-right: 0; } #owl-portfolio-wrapper .portfolio-prev:hover:after, #owl-portfolio-wrapper .portfolio-next:hover:after { height: 100%; } #owl-portfolio-wrapper .portfolio-prev:hover, #owl-portfolio-wrapper .portfolio-next:hover { color: #323133; } /* 17.2 Portfolio Columns -------------------------------------------------------------------------- */ /* 17.2.1 Wrapper -------------------------------------------------------------------------- */ .grid-4 div.slide-item { width: 100%; display: block; overflow: hidden; } .grid-2 div.slide-item { width: 100%; display: block; overflow: hidden; } .grid-3 div.slide-item { width: 100%; display: block; overflow: hidden; } /* 17.2.2 Content -------------------------------------------------------------------------- */ .grid-1 div.slide-item .portfolio-content { width: 100%; float: left; overflow: hidden; position: relative; background-color: #323133; } .grid-4 div.slide-item .portfolio-content { width: 25%; float: left; overflow: hidden; position: relative; background-color: #323133; } .grid-2 div.slide-item .portfolio-content { width: 50%; float: left; overflow: hidden; position: relative; background-color: #323133; } .grid-3 div.slide-item .portfolio-content { float: left; overflow: hidden; position: relative; width: 33.33333333%; background-color: #323133; } /* 17.2.3 Image -------------------------------------------------------------------------- */ div.slide-item .portfolio-content img { width: 100%; display: block; } /* 17.2.4 Details -------------------------------------------------------------------------- */ /* 17.2.4.1 Wrapper -------------------------------------------------------------------------- */ div.slide-item .portfolio-details { left: 0; bottom: 0; width: 100%; height: 100%; display: block; overflow: hidden; position: absolute; -webkit-transition: -webkit-transform 0.2s; -moz-transition: -moz-transform 0.2s; -ms-transition: -ms-transform 0.2s; -o-transition: -o-transform 0.2s; transition: transform 0.2s; -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } /* 17.2.4.2 Info -------------------------------------------------------------------------- */ /* 17.2.4.2.1 Wrapper -------------------------------------------------------------------------- */ div.slide-item .portfolio-info { left: 0; bottom: 0; width: 100%; position: absolute; padding: 15px 20px; background-color: #323133; } /* 17.2.4.2.2 Titel -------------------------------------------------------------------------- */ .portfolio-info span:first-child { float: left; color: #ffffff; font-size: 20px; font-weight: 400; overflow: hidden; overflow: hidden; line-height: 28px; position: relative; font-family: 'Roboto', sans-serif; } /* 17.2.4.2.3 Anchor -------------------------------------------------------------------------- */ .portfolio-info span:last-child, .portfolio-info span:nth-child(2) { width: 30px; height: 30px; float: right; margin: 0 5px; display: inline-block; } .portfolio-info span a { width: 30px; height: 30px; display: block; color: #e1e1e1; font-size: 24px; line-height: 30px; position: relative; -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-info span a i { z-index: 1; line-height: 30px; position: relative; } /* 17.3 Hover -------------------------------------------------------------------------- */ .portfolio-info span a:hover { color: #ffffff; } .portfolio-content:hover img { margin: -45px auto 45px; } .portfolio-content:hover .portfolio-details { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .portfolio-content:hover .grayscale { -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: grayscale(0%); filter: url("data:image/svg+xml;utf8,#grayscale"); filter: gray; filter: none; } /* ========================================================================== 18. Pricing Section ========================================================================== */ /* 18.1 Wrapper -------------------------------------------------------------------------- */ #pricing-section { width: 100%; overflow: hidden; position: relative; padding: 100px 0 50px; background-color: #ffffff; } #pricing-section:hover .section-title:after { width: 120px; margin-left: -60px; } /* 18.2 Pricing Table -------------------------------------------------------------------------- */ /* 18.2.1 Wrapper -------------------------------------------------------------------------- */ .pricing-table { width: 100%; display: block; max-width: 360px; position: relative; padding-top: 100px; margin: 0 auto 50px; -webkit-border: 2px solid #e1e1e1; -moz-border: 2px solid #e1e1e1; -o-border: 2px solid #e1e1e1; border: 2px solid #e1e1e1; } /* 18.2.2 Price -------------------------------------------------------------------------- */ .pricing-table .table-price { z-index: 1; top: -30px; right: 20px; float: right; width: 130px; height: 130px; color: #323133; font-size: 62px; font-weight: 700; overflow: hidden; line-height: 110px; text-align: center; position: absolute; background-color: #ffffff; font-family: 'Roboto', sans-serif; -webkit-border: 2px solid #e1e1e1; -moz-border: 2px solid #e1e1e1; -o-border: 2px solid #e1e1e1; border: 2px solid #e1e1e1; -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; } .pricing-table .table-price:after { left: 0; bottom: 0; height: 0; content: ''; z-index: -1; width: 100%; position: absolute; background-color: #323133; -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; } .pricing-table .table-price span { right: 30px; content: ''; bottom: 20px; color: #323133; font-size: 16px; line-height: 16px; position: absolute; font-family: 'Roboto', sans-serif; -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; } /* 18.2.3 Title -------------------------------------------------------------------------- */ .pricing-table .table-title { width: 100%; color: #323133; font-size: 28px; font-weight: 700; overflow: hidden; line-height: 32px; position: relative; padding-left: 15px; padding-right: 15px; margin: 0 auto 20px; padding-bottom: 15px; font-family: 'Roboto', sans-serif; } .pricing-table .table-title:after { bottom: 0; left: 15px; height: 2px; content: ''; width: 100px; position: absolute; background-color: #e1e1e1; -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; } .pricing-table .table-title:hover:after { width: 150px; } /* 18.2.4 Description & Fetature -------------------------------------------------------------------------- */ /* 18.2.4.1 Wrapper -------------------------------------------------------------------------- */ .pricing-table .table-desc, .pricing-table .table-feature { width: 100%; display: block; padding: 0 15px; overflow: hidden; margin-bottom: 15px; letter-spacing: 0.5px; } /* 18.2.4.2 List -------------------------------------------------------------------------- */ .pricing-table .table-feature ul { margin: 0; width: 100%; display: block; list-style: none; padding: 0 100px 0 0; } /* 18.2.4.3 Items -------------------------------------------------------------------------- */ .pricing-table .table-feature ul li { width: 100%; display: block; position: relative; padding-left: 30px; margin-bottom: 10px; padding-bottom: 8px; letter-spacing: 0.5px; text-transform: capitalize; -webkit-border-bottom: 2px solid #e1e1e1; -moz-border-bottom: 2px solid #e1e1e1; -o-border-bottom: 2px solid #e1e1e1; border-bottom: 2px solid #e1e1e1; } .pricing-table .table-feature ul li:last-child { margin-bottom: 0; padding-bottom: 0; -webkit-border-bottom: 0; -moz-border-bottom: 0; -o-border-bottom: 0; border-bottom: 0; } .pricing-table .table-feature ul li:before { top: 0; left: 10px; color: #e1e1e1; font-size: 10px; content: '\f0c8'; position: absolute; font-family: 'FontAwesome'; } /* 18.2.5 Button -------------------------------------------------------------------------- */ .pricing-table .table-button { width: 100%; display: block; overflow: hidden; text-align: center; -webkit-border-top: 2px solid #e1e1e1; -moz-border-top: 2px solid #e1e1e1; -o-border-top: 2px solid #e1e1e1; border-top: 2px solid #e1e1e1; } .pricing-table .table-button a { z-index: 1; width: 100%; display: block; color: #323133; font-size: 20px; font-weight: 700; overflow: hidden; line-height: 28px; padding: 15px 30px; position: relative; font-family: 'Roboto', sans-serif; -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; } .pricing-table .table-button a:after { left: 0; bottom: 0; height: 0; width: 100%; content: ''; z-index: -1; position: absolute; background-color: #323133; -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; } /* 18.2.6 Hover -------------------------------------------------------------------------- */ .pricing-table:hover .table-price, .pricing-table .table-button a:hover, .pricing-table:hover .table-price span { color: #ffffff; } .pricing-table:hover .table-price:after, .pricing-table .table-button a:hover:after { height: 100%; } /* ========================================================================== 19. Subscribe Section ========================================================================== */ /* 19.1 Wrapper -------------------------------------------------------------------------- */ #subscribe-section { padding: 0; width: 100%; overflow: hidden; background-color: #ffffff; background-repeat: repeat; background-attachment: fixed; background-position: center center; background-image: url(../images/background/newsletterbg.jpg); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #subscribe-section .short-section-title { color: #ffffff; margin-bottom: 40px; } #subscribe-section:hover .short-section-title:after { width: 150px; } /* 19.2 OverLayer -------------------------------------------------------------------------- */ #subscribe-section-overlayer { width: 100%; overflow: hidden; position: relative; padding: 100px 0 65px; background-color: rgba(0, 0, 0, 0.3); } /* 19.3 NewsLetter Form -------------------------------------------------------------------------- */ /* 19.3.1 Wrapper -------------------------------------------------------------------------- */ #newsletter-form { width: 100%; position: relative; } /* 19.3.2 Form Group -------------------------------------------------------------------------- */ .form-group { margin: 0; padding: 0; overflow: hidden; } /* 19.3.3 Form Control -------------------------------------------------------------------------- */ #newsletter-form .form-control { float: left; width: 100%; height: 52px; outline: none; color: #ffffff; font-size: 14px; font-weight: 400; padding: 6px 16px; margin-right: 20px; position: relative; margin-bottom: 30px; letter-spacing: 0.5px; background-color: transparent; -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-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; -webkit-border: 2px solid #ffffff; -moz-border: 2px solid #ffffff; -o-border: 2px solid #ffffff; border: 2px solid #ffffff; } #newsletter-form .form-control:hover, #newsletter-form .form-control:focus { -webkit-border-color: #e1e1e1; -moz-border-color: #e1e1e1; -o-border-color: #e1e1e1; border-color: #e1e1e1; } #newsletter-form .btn.btn-nesto { height: 52px; outline: none; margin-bottom: 30px; background-color: transparent; } /* 19.3.4 Error / Success Message -------------------------------------------------------------------------- */ .nesto-message { margin: 0 auto; min-height: 28px; } p.nesto-response { width: 100%; color: #ffffff; font-weight: 400; margin-bottom: 0; text-align: center; letter-spacing: 0.5px; } /* ========================================================================== 20. Blog Section ========================================================================== */ /* 20.1 Wrapper -------------------------------------------------------------------------- */ #blog-section { width: 100%; overflow: hidden; position: relative; padding: 100px 0 50px; background-color: #ffffff; } #blog-section:hover .section-title:after { width: 120px; margin-left: -60px; } /* 20.2 Recent Post -------------------------------------------------------------------------- */ /* 20.2.1 Wrapper -------------------------------------------------------------------------- */ .recent-post { width: 100%; display: block; overflow: hidden; margin: 0 auto 50px; } /* 20.2.2 Image -------------------------------------------------------------------------- */ .post-image { width: 100%; display: block; overflow: hidden; margin-bottom: 20px; background-color: #323133; -webkit-border: 2px solid #323133; -moz-border: 2px solid #323133; -o-border: 2px solid #323133; border: 2px solid #323133; } .post-image img { width: 100%; display: block; } /* 20.2.3 Title -------------------------------------------------------------------------- */ .post-title { overflow: hidden; margin: 0 auto 5px; } .post-title, .post-title a { width: 100%; color: #323133; font-size: 28px; font-weight: 700; overflow: hidden; line-height: 32px; position: relative; margin: 0 auto 20px; padding-bottom: 15px; font-family: 'Roboto', sans-serif; } .post-title:after { left: 0; bottom: 0; height: 2px; content: ''; width: 100px; position: absolute; background-color: #e1e1e1; -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; } /* 20.2.4 Meta -------------------------------------------------------------------------- */ .post-meta { float: left; width: 70px; height: 70px; color: #323133; font-weight: 700; overflow: hidden; padding-top: 10px; text-align: center; position: relative; margin-right: 20px; font-family: 'Roboto', sans-serif; -webkit-border: 2px solid #e1e1e1; -moz-border: 2px solid #e1e1e1; -o-border: 2px solid #e1e1e1; border: 2px solid #e1e1e1; } .post-meta span { width: 100%; display: block; } .post-meta span:first-child { font-size: 28px; } .post-meta span:last-child { font-size: 14px; line-height: 14px; } /* 20.2.5 Content -------------------------------------------------------------------------- */ .post-content { overflow: hidden; margin-bottom: 20px; letter-spacing: 0.5px; } /* 20.2.6 Button -------------------------------------------------------------------------- */ .post-button { width: 100%; display: block; overflow: hidden; padding-left: 90px; } /* 20.2.7 Hover -------------------------------------------------------------------------- */ .recent-post:hover .grayscale { -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: grayscale(0%); filter: url("data:image/svg+xml;utf8,#grayscale"); filter: gray; filter: none; } /* ========================================================================== 21. Testimonials Section ========================================================================== */ /* 21.1 Wrapper -------------------------------------------------------------------------- */ #testimonials-section { padding: 0; width: 100%; overflow: hidden; background-color: #ffffff; background-repeat: repeat; background-attachment: fixed; background-position: center center; background-image: url(../images/background/article1-section-bg.jpg); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #testimonials-section:hover .short-section-title:after { width: 150px; } /* 21.2 OverLayer -------------------------------------------------------------------------- */ #testimonials-section-overlayer { width: 100%; overflow: hidden; position: relative; padding: 100px 0 90px; background-color: rgba(0, 0, 0, 0.3); } /* 21.3 Home Slider -------------------------------------------------------------------------- */ /* 21.3.1 Wrapper -------------------------------------------------------------------------- */ .owl-testimonials, #owl-testimonials-wrapper { width: 100%; height: 100%; margin: 0 auto; max-width: 960px; overflow: hidden; position: relative; text-align: center; } #owl-testimonials-wrapper .owl-controls { display: block; } /* 21.3.2 Content -------------------------------------------------------------------------- */ /* 21.3.2.1 Wrapper -------------------------------------------------------------------------- */ .owl-testimonials .slide-content { width: 100%; color: #ffffff; overflow: hidden; text-align: center; position: relative; } /* 21.3.2.2 Image -------------------------------------------------------------------------- */ .client-img { width: 125px; height: 125px; display: block; margin: 0 auto 20px; -webkit-border: 2px solid #e1e1e1; -moz-border: 2px solid #e1e1e1; -o-border: 2px solid #e1e1e1; border: 2px solid #e1e1e1; } .client-img img { width: 100%; display: block; } /* 21.3.2.3 Name -------------------------------------------------------------------------- */ .client-name { width: 100%; color: #ffffff; font-size: 35px; font-weight: 400; overflow: hidden; line-height: 38px; text-align: center; position: relative; margin: 0 auto 30px; padding-bottom: 15px; font-family: 'Roboto', sans-serif; } .client-name:after { bottom: 0; left: 50%; width: 80px; height: 2px; content: ''; margin-left: -40px; 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; } /* 21.3.2.4 Quote -------------------------------------------------------------------------- */ .client-quote { width: 100%; display: block; overflow: hidden; margin: 0 auto 10px; letter-spacing: 0.5px; font-style:italic; font-family: Helvetica, serif; font-size: 20px; } /* 21.3.2.5 Dots -------------------------------------------------------------------------- */ #owl-testimonials-wrapper .owl-page span { background-color: transparent; -webkit-border: 2px solid #ffffff; -moz-border: 2px solid #ffffff; -o-border: 2px solid #ffffff; border: 2px solid #ffffff; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; } #owl-testimonials-wrapper .owl-page.active span, #owl-testimonials-wrapper .owl-page:hover span { background-color: #ffffff; } /* 21.3.2.6 Hover -------------------------------------------------------------------------- */ #owl-testimonials-wrapper:hover .client-name:after { width: 120px; margin-left: -60px; } #owl-testimonials-wrapper:hover .grayscale { -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: grayscale(0%); filter: url("data:image/svg+xml;utf8,#grayscale"); filter: gray; filter: none; } /* ========================================================================== 22. Text Section ========================================================================== */ /* 22.1 Wrapper -------------------------------------------------------------------------- */ #text-1-section { width: 100%; overflow: hidden; position: relative; padding: 0 0 50px; background-color: #ffffff; } #text-1-section:hover .section-title:after { width: 120px; margin-left: -60px; } #text-2-section { width: 100%; overflow: hidden; position: relative; padding: 0 0 50px; background-color: #ffffff; } #text-2-section:hover .section-title:after { width: 120px; margin-left: -60px; } #text-3-section { width: 100%; overflow: hidden; position: relative; padding: 0 0 50px; background-color: #ffffff; } #text-3-section:hover .section-title:after { width: 120px; margin-left: -60px; } #text-4-section { width: 100%; overflow: hidden; position: relative; padding: 0 0 50px; background-color: #ffffff; } #text-4-section:hover .section-title:after { width: 120px; margin-left: -60px; } #text-5-section { width: 100%; overflow: hidden; position: relative; padding: 0 0 50px; background-color: #ffffff; } #text-5-section:hover .section-title:after { width: 120px; margin-left: -60px; } /* ========================================================================== 22. Contact Section ========================================================================== */ /* 22.1 Wrapper -------------------------------------------------------------------------- */ #contact-section { width: 100%; overflow: hidden; position: relative; padding: 0px 0 50px; background-color: #ffffff; } #contact-section:hover .section-title:after { width: 120px; margin-left: -60px; } /* 22.2 Form Control -------------------------------------------------------------------------- */ #contactform .form-control { width: 100%; height: 50px; outline: none; color: #323133; font-size: 14px; padding: 6px 16px; margin-bottom: 30px; letter-spacing: 0.5px; background-color: #ffffff; -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-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; -webkit-border: 2px solid #e1e1e1; -moz-border: 2px solid #e1e1e1; -o-border: 2px solid #e1e1e1; border: 2px solid #e1e1e1; } #contactform .form-control:hover, #contactform .form-control:focus { -webkit-border-color: #323133; -moz-border-color: #323133; -o-border-color: #323133; border-color: #323133; } /* 22.3 Textarea -------------------------------------------------------------------------- */ #contactform textarea { width: 100%; resize: none; margin: 0 auto; height: 160px !important; padding: 15px 12px !important; } /* 22.4 Button -------------------------------------------------------------------------- */ #contactform button { outline: none; display: block; margin: 0 auto; background-color: transparent; } /* 22.5 Error / Success Message -------------------------------------------------------------------------- */ .form-message { width: 100%; color: #323133; min-height: 28px; margin-top: 20px; text-align: center; } #name.form-error, #email.form-error, #subject.form-error, #message.form-error { -webkit-border-color: #323133; -moz-border-color: #323133; -o-border-color: #323133; border-color: #323133; } /* ========================================================================== 23. Map Section ========================================================================== */ #map-section { width: 100%; overflow: hidden; position: relative; background-color: #ffffff; } #map { width: 100%; height: 380px; position: relative; } /* ========================================================================== 24. Footer Section ========================================================================== */ /* 24.1 Wrapper -------------------------------------------------------------------------- */ #footer-section { width: 100%; overflow: hidden; position: relative; padding: 55px 0 30px; background-color: #323133; } /* 24.2 Copyright -------------------------------------------------------------------------- */ /* 24.2.1 Wrapper -------------------------------------------------------------------------- */ .copyright { width: 100%; display: block; color: #ffffff; line-height: 40px; margin: 0 auto 20px; } /* 24.2.2 Anchor -------------------------------------------------------------------------- */ .copyright a { color: #e1e1e1; -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; } .copyright a:hover { color: #ffffff; } /* 24.3 Social Icons -------------------------------------------------------------------------- */ /* 24.3.1 Wrapper -------------------------------------------------------------------------- */ .social-icons { width: 100%; display: block; overflow: hidden; margin: 0 auto 20px; } /* 24.3.2 Anchor -------------------------------------------------------------------------- */ .social-icons a { width: 40px; height: 40px; float: right; color: #e1e1e1; font-size: 20px; line-height: 40px; text-align: center; position: relative; display: inline-block; -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; } .social-icons a:hover { color: #ffffff; } /* ========================================================================== 25. Blog ========================================================================== */ /* 25.1 Blog Title -------------------------------------------------------------------------- */ .blog-title { width: 100%; color: #ffffff; font-size: 60px; font-weight: 700; overflow: hidden; line-height: 68px; text-align: center; position: relative; padding-bottom: 20px; margin-bottom: 120px; font-family: 'Roboto', sans-serif; } .blog-title:after { bottom: 0; left: 50%; height: 2px; content: ''; width: 200px; position: absolute; margin-left: -100px; background-color: #ffffff; } /* 25.2 Breadcrumb Section -------------------------------------------------------------------------- */ /* 25.2.1 Wrapper -------------------------------------------------------------------------- */ #blog-breadcrumb-section { z-index: 2; width: 100%; padding: 30px 0; position: relative; background-color: #ffffff; } /* 25.2.2 Breadcrumb -------------------------------------------------------------------------- */ /* 25.2.2.1 Wrapper -------------------------------------------------------------------------- */ .breadcrumb { margin: 0; padding: 0; line-height: 48px; background-color: transparent; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; } /* 25.2.2.2 Active Item -------------------------------------------------------------------------- */ .breadcrumb > li.active { z-index: 1; color: #323133; font-size: 20px; font-weight: 700; line-height: 46px; padding: 10px 5px; position: relative; font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif; } /* 25.2.2.3 Anchor -------------------------------------------------------------------------- */ .breadcrumb > li a { z-index: 1; color: #323133; font-size: 20px; font-weight: 700; overflow: hidden; line-height: 24px; padding: 10px 20px; position: relative; font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; -webkit-border: 2px solid #323133; -moz-border: 2px solid #323133; -o-border: 2px solid #323133; border: 2px solid #323133; -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; } .breadcrumb > li a:after { left: 0; bottom: 0; height: 0; width: 100%; z-index: -1; content: ''; position: absolute; background-color: #323133; -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; } .breadcrumb > li a:hover { color: #ffffff; } .breadcrumb > li a:hover:after { height: 100%; } .breadcrumb > li+li:before { color: #e1e1e1; font-size: 20px; font-weight: 400; padding: 0 10px 0 8px; font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif; } /* 25.3 Post Container -------------------------------------------------------------------------- */ /* 25.3.1 Wrapper -------------------------------------------------------------------------- */ .post-container { width: 100%; display: block; overflow: hidden; } /* 25.3.2 Button -------------------------------------------------------------------------- */ .post-container .post-button { margin-bottom: 40px; padding-bottom: 40px; -webkit-border-bottom: 2px solid #e1e1e1; -moz-border-bottom: 2px solid #e1e1e1; -o-border-bottom: 2px solid #e1e1e1; border-bottom: 2px solid #e1e1e1; } /* 25.4 Hover -------------------------------------------------------------------------- */ .post-container:hover .grayscale { -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: grayscale(0%); filter: url("data:image/svg+xml;utf8,#grayscale"); filter: gray; filter: none; } /* 25.5 Pager -------------------------------------------------------------------------- */ .pager { margin: 0 0 100px; } .pager li > a, .pager li > span { color: #323133; padding: 10px 30px; position: relative; background-color: #ffffff; font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; -webkit-border: 2px solid #323133; -moz-border: 2px solid #323133; -o-border: 2px solid #323133; border: 2px solid #323133; -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; } .pager li > a:after { left: 0; height: 0; bottom: 0; z-index: -1; content: ''; width: 100%; position: absolute; background-color: #323133; -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; } .pager li > a:hover:after { height: 100%; } .pager li > a:hover, .pager li > a:focus { color: #ffffff; background-color: transparent; } /* 25.6 Widget -------------------------------------------------------------------------- */ /* 25.6.1 Wrapper -------------------------------------------------------------------------- */ .widget { width: 100%; display: block; overflow: hidden; margin-bottom: 60px; } /* 25.6.2 Title -------------------------------------------------------------------------- */ .widget-title { color: #323133; font-size: 20px; font-weight: 700; line-height: 28px; position: relative; margin-bottom: 25px; padding-bottom: 10px; font-family: 'Roboto', sans-serif; } .widget-title:after { left: 0; bottom: 0; height: 2px; content: ''; width: 100px; position: absolute; background-color: #e1e1e1; } /* 25.6.3 Search Widget -------------------------------------------------------------------------- */ .search-widget .form-control { width: 100%; height: 50px; outline: none; color: #323133; font-size: 14px; font-weight: 400; padding: 6px 16px; margin-right: 20px; background-color: #ffffff; -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-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; -webkit-border: 2px solid #e1e1e1; -moz-border: 2px solid #e1e1e1; -o-border: 2px solid #e1e1e1; border: 2px solid #e1e1e1; } .search-widget .form-control:hover, .search-widget .form-control:focus { -webkit-border-color: #323133; -moz-border-color: #323133; -o-border-color: #323133; border-color: #323133; } /* 25.6.4 Latest Posts Widget -------------------------------------------------------------------------- */ /* 25.6.4.1 Wrapper -------------------------------------------------------------------------- */ .latest-posts-widget.widget { margin-bottom: 53px; } /* 25.6.4.2 Latest Post -------------------------------------------------------------------------- */ /* 25.6.4.2.1 Wrapper -------------------------------------------------------------------------- */ .latest-post { width: 100%; overflow: hidden; margin-bottom: 17px; padding-bottom: 10px; -webkit-border-bottom: 2px solid #e1e1e1; -moz-border-bottom: 2px solid #e1e1e1; -o-border-bottom: 2px solid #e1e1e1; border-bottom: 2px solid #e1e1e1; } .latest-posts-widget.widget .latest-post:last-child { margin: 0; padding: 0; -webkit-border-bottom: 0; -moz-border-bottom: 0; -o-border-bottom: 0; border-bottom: 0; } /* 25.6.4.2.2 Image -------------------------------------------------------------------------- */ .latest-post .post-image { float: left; width: 70px; height: 70px; margin: 0 10px 10px 0; } .latest-post .post-image img { width: 100%; display: block; } .latest-post:hover .grayscale { -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: grayscale(0%); filter: url("data:image/svg+xml;utf8,#grayscale"); filter: gray; filter: none; } /* 25.6.4.2.3 Title -------------------------------------------------------------------------- */ .latest-post .post-title, .latest-post .post-title a { margin: 0; margin: 0; padding: 0; font-size: 20px; display: inline; line-height: 24px; } .latest-post .post-title:after, .latest-post .post-title a:after { display: none; } /* 25.6.5 Categories Widget -------------------------------------------------------------------------- */ /* 25.6.5.1 Categories List -------------------------------------------------------------------------- */ /* 25.6.5.1.1 Wrapper -------------------------------------------------------------------------- */ .categories { margin: 0; padding: 0; overflow: hidden; list-style: none; } /* 25.6.5.1.2 Items -------------------------------------------------------------------------- */ .categories li { display: block; overflow: hidden; margin-bottom: 10px; padding-bottom: 10px; -webkit-border-bottom: 2px solid #e1e1e1; -moz-border-bottom: 2px solid #e1e1e1; -o-border-bottom: 2px solid #e1e1e1; border-bottom: 2px solid #e1e1e1; } .categories li:last-child { margin: 0; padding: 0; -webkit-border-bottom: 0; -moz-border-bottom: 0; -o-border-bottom: 0; border-bottom: 0; } /* 25.6.5.1.3 Anchor -------------------------------------------------------------------------- */ .categories li a { font-weight: 400; text-transform: capitalize; -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; } /* 25.6.6 Tags Widget -------------------------------------------------------------------------- */ /* 25.6.6.1 Categories List -------------------------------------------------------------------------- */ /* 25.6.6.1.1 Wrapper -------------------------------------------------------------------------- */ .tags { margin: 0; padding: 0; overflow: hidden; list-style: none; } /* 25.6.6.1.2 Items -------------------------------------------------------------------------- */ .tags li { float: left; overflow: hidden; line-height: 38px; margin: 0 10px 10px 0; display: inline-block; } .tags li:last-child { margin: 0; } /* 25.6.6.1.3 Anchor -------------------------------------------------------------------------- */ .tags li a { font-weight: 400; padding: 7px 12px; line-height: 41px; position: relative; text-transform: capitalize; -webkit-border: 2px solid #323133; -moz-border: 2px solid #323133; -o-border: 2px solid #323133; border: 2px solid #323133; -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; } .tags li a:after { left: 0; bottom: 0; height: 0; z-index: -1; content: ''; width: 100%; position: absolute; background-color: #323133; -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; } .tags li a:hover:after { height: 100%; } .tags li a:hover { color: #ffffff; } /* 25.7 Post Share -------------------------------------------------------------------------- */ /* 25.7.1 Wrapper -------------------------------------------------------------------------- */ .post-share { width: 100%; display: block; padding: 10px 0; overflow: hidden; margin: 10px 0 50px; -webkit-border-top: 2px solid #e1e1e1; -moz-border-top: 2px solid #e1e1e1; -o-border-top: 2px solid #e1e1e1; border-top: 2px solid #e1e1e1; -webkit-border-bottom: 2px solid #e1e1e1; -moz-border-bottom: 2px solid #e1e1e1; -o-border-bottom: 2px solid #e1e1e1; border-bottom: 2px solid #e1e1e1; } /* 25.7.2 Items -------------------------------------------------------------------------- */ /* 25.7.2.1 Wrapper -------------------------------------------------------------------------- */ .post-share span { float: left; color: #323133; font-weight: 400; margin-right: 15px; display: inline-block; } .post-share span:last-child { margin-right: 0; } /* 25.7.2.2 Icons -------------------------------------------------------------------------- */ .post-share span i { margin-right: 5px; } /* 25.7.2.3 Anchor -------------------------------------------------------------------------- */ .post-share span a { -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; } /* 25.8 Post Comments -------------------------------------------------------------------------- */ /* 25.8.1 Number -------------------------------------------------------------------------- */ .comments-number { width: 100%; color: #323133; display: block; font-size: 36px; font-weight: 700; overflow: hidden; line-height: 42px; margin-bottom: 50px; font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif; } /* 25.8.2 Comments -------------------------------------------------------------------------- */ /* 25.8.2.1 Wrapper -------------------------------------------------------------------------- */ .comments { width: 100%; display: block; overflow: hidden; margin-bottom: 50px; padding-bottom: 20px; -webkit-border-bottom: 2px solid #e1e1e1; -moz-border-bottom: 2px solid #e1e1e1; -o-border-bottom: 2px solid #e1e1e1; border-bottom: 2px solid #e1e1e1; } /* 25.8.2.2 List -------------------------------------------------------------------------- */ .comments ul { margin: 0; padding: 0; overflow: hidden; list-style: none; } .comments ul ul { margin-top: 30px; margin-left: 100px; } .comments ul ul li:last-child { margin-bottom: 0; } /* 25.8.2.3 Items -------------------------------------------------------------------------- */ /* 25.8.2.3.1 Wrapper -------------------------------------------------------------------------- */ .comments ul li { width: 100%; display: block; margin-bottom: 30px; } .comments ul li:hover .grayscale { -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: grayscale(0%); filter: url("data:image/svg+xml;utf8,#grayscale"); filter: gray; filter: none; } /* 25.8.2.3.2 Image -------------------------------------------------------------------------- */ .comments .avatar-image { float: left; margin: 0 0 15px 0; -webkit-border: 2px solid #323133; -moz-border: 2px solid #323133; -o-border: 2px solid #323133; border: 2px solid #323133; } .comments .avatar-image img { width: 100%; display: block; } /* 25.8.2.3.3 Comment -------------------------------------------------------------------------- */ /* 25.8.2.3.3.1 Wrapper -------------------------------------------------------------------------- */ .comment-container { padding-left: 140px; } /* 25.8.2.3.3.2 Name -------------------------------------------------------------------------- */ .comment-container .author-name { width: 100%; display: block; overflow: hidden; margin-bottom: 13px; } .author-name span { float: left; position: relative; display: inline-block; } .author-name span:first-child { color: #323133; font-size: 20px; font-weight: 700; font-family: 'Roboto', sans-serif; } .author-name span:last-child { font-size: 13px; font-weight: 400; margin-left: 10px; padding-left: 10px; } .author-name span:last-child:after { top: 0; left: 0; width: 1px; content: '|'; height: 100%; color: #e1e1e1; position: absolute; } /* 25.8.2.3.3.3 Content -------------------------------------------------------------------------- */ .comment-content { width: 100%; display: block; overflow: hidden; font-weight: 400; margin-bottom: 7px; } /* 25.8.2.3.3.4 Replay Button -------------------------------------------------------------------------- */ .comment-button { width: 100%; overflow: hidden; } .comment-button a { font-size: 14px; font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif; -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; } /* 25.8.3 Post Replay -------------------------------------------------------------------------- */ /* 25.8.3.1 Wrapper -------------------------------------------------------------------------- */ .post-replay { width: 100%; display: block; overflow: hidden; margin-bottom: 100px; } /* 25.8.3.2 Title -------------------------------------------------------------------------- */ .replay-title { width: 100%; color: #323133; display: block; font-size: 36px; font-weight: 700; overflow: hidden; line-height: 42px; margin-bottom: 50px; font-family: 'Roboto', sans-serif; } /* 25.8.3.3 Form -------------------------------------------------------------------------- */ /* 25.8.3.3.1 Form Control -------------------------------------------------------------------------- */ .post-replay .form-control { width: 100%; height: 50px; outline: none; color: #323133; font-size: 14px; font-weight: 400; padding: 6px 16px; margin-bottom: 30px; background-color: #ffffff; -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-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; -webkit-border: 2px solid #e1e1e1; -moz-border: 2px solid #e1e1e1; -o-border: 2px solid #e1e1e1; border: 2px solid #e1e1e1; } .post-replay .form-control:hover, .post-replay .form-control:focus { -webkit-border-color: #323133; -moz-border-color: #323133; -o-border-color: #323133; border-color: #323133; } /* 25.8.3.3.2 Textarea -------------------------------------------------------------------------- */ .post-replay textarea { width: 100%; resize: none; margin: 0 auto; height: 160px !important; padding: 15px 12px !important; } /* 25.8.3.3.3 Button -------------------------------------------------------------------------- */ .post-replay button { margin: 0; float: right; outline: none; display: block; background-color: transparent; } /* ========================================================================== 26. Alert Section ========================================================================== */ #alert-section { width: 100%; overflow: hidden; padding: 50px 0 40px; background-color: #323133; } #alert-section .short-section-title { color: #ffffff; } /* ========================================================================== 27. Countdown Section ========================================================================== */ /* 27.1 Wrapper -------------------------------------------------------------------------- */ #countdown-section { width: 100%; overflow: hidden; padding: 100px 0; position: relative; background-color: #ffffff; } #countdown-section:hover .section-title:after { width: 120px; margin-left: -60px; } /* 27.2 Countdown -------------------------------------------------------------------------- */ /* 27.2.1 Wrapper -------------------------------------------------------------------------- */ #countdown_dashboard { display: block; margin: 0 auto; max-width: 960px; overflow: hidden; } .dash { text-align: center; -webkit-border-left: 2px solid #e1e1e1; -moz-border-left: 2px solid #e1e1e1; -o-border-left: 2px solid #e1e1e1; border-left: 2px solid #e1e1e1; } .dash.days_dash { -webkit-border: 0; -moz-border: 0; -o-border: 0; border: 0; } /* 27.2.2 Title -------------------------------------------------------------------------- */ .dash_title { width: 100%; color: #323133; display: block; font-size: 18px; text-transform: uppercase; } /* 27.2.3 Digit -------------------------------------------------------------------------- */ .digit { height: 100px; color: #323133; font-size: 100px; overflow: hidden; line-height: 100px; text-align: center; position: relative; display: inline-block; font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif; } /* ========================================================================== Responsive ========================================================================== */ @media only screen and (max-width: 1199px) { .team-box .member-social ul li { width: 30px; } .post-title, .post-title a, .short-section-title, .team-box .member-name, .skill-box .skill-title, .pricing-table .table-title, .post-meta span:first-child, .feature-box-style-3 .feature-title, .feature-box-style-2 .feature-title { font-size: 24px; } .section-content a.btn-nesto { margin: 20px 30px 30px 0; } .pricing-table .table-feature ul { padding: 0 40px 0 0; } .copyright { text-align: center; } .social-icons { text-align: center; } .social-icons a { float: none; margin: 10px 5px 0; } .latest-post .post-title, .latest-post .post-title a { line-height: 20px; } } /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ @media only screen and (max-width: 992px) { #nav-wrapper { background-color: #323133; } .navbar-header { float: none; } .navbar-toggle { display: block; padding: 24px 0 0; } .navbar-collapse.collapse { display: block !important; } .navbar-collapse { top: 0; bottom: 0; margin: 0; width: 230px; right: -230px; position: fixed; overflow: hidden; max-height: 100%; min-height: 100%; padding: 90px 0 0; -webkit-border: 0; -moz-border: 0; -o-border: 0; border: 0; -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; } .navbar-nav { margin: 0; height: 100%; width: 400px; overflow-y: scroll; float: none !important; background-color: #323133; -webkit-overflow-scrolling: touch; } .navbar-nav > li { float: none; width: 230px; margin-left: 0; } .navbar-nav > li:hover, .navbar-nav > li.active { -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; } .navbar-nav > li { padding: 0; } .navbar-nav > li > a:after { display: none; } .navbar-nav > li > a { z-index: 1; display: block; padding: 0 20px; line-height: 50px; position: relative; } .navbar-nav > li.active > a { background-color: #282729; } .navbar-nav > li > a:before { left: 0; bottom: 0; height: 0; width: 100%; z-index: -1; content: ''; position: absolute; background-color: #282729; -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; } .navbar-nav > li > a:hover:before { height: 100%; } .navbar-collapse.collapse.in { display: block !important; } .collapsing { overflow: hidden !important; } .navbar-nav.navbar-right:last-child { margin-right: 0; } .navbar-collapse.nav-visable { -webkit-transform: translate3d(-230px, 0, 0); -moz-transform: translate3d(-230px, 0, 0); -ms-transform: translate3d(-230px, 0, 0); -o-transform: translate3d(-230px, 0, 0); transform: translate3d(-230px, 0, 0); } .submenu ul { margin: 0; opacity: 1; padding: 0; font-size: 14px; min-width: 200px; list-style: none; overflow: hidden; position: relative; background-color: #323133; -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; } .submenu ul li a { z-index: 1; line-height: 50px; position: relative; padding: 0 10px 0 40px; } .submenu ul li a:before { top: 0; left: 20px; content: "-"; position: absolute; } .blog-title { font-size: 50px; line-height: 50px; } .owl-home .slide-title { font-size: 50px; line-height: 70px; margin-bottom: 10px; } .feature-left-image { margin: 0 auto 45px; } .download-content { max-width: 100%; padding-left: 0; margin: 0 auto 50px; } .grid-2 div.slide-item .portfolio-content, .grid-3 div.slide-item .portfolio-content, .grid-4 div.slide-item .portfolio-content { width: 50%; } #newsletter-form .btn.btn-nesto { display: block; margin: 0 auto 30px; } #alert-section { padding: 70px 0; } #alert-section .short-section-title { margin-bottom: 40px; } .digit { height: 70px; font-size: 70px; line-height: 70px; } .parallax-slider #owl-home-wrapper .slide-item .col-md-7 .feature-left-image, .parallax-slider #owl-home-wrapper .slide-item .col-md-7 .feature-left-image img { float: none; margin: 0 auto !important; } .parallax-slider #owl-home-wrapper .slide-item .col-md-5 .slide-title { font-size: 40px; text-align: center; line-height: 50px; margin-top: 110px !important; } .parallax-slider #owl-home-wrapper .slide-item .col-md-5 .slide-desc { text-align: center; margin-bottom: 15px; } .parallax-slider #owl-home-wrapper .slide-item .col-md-5 .slide-divider { margin: 0 auto 30px !important; } .parallax-slider #owl-home-wrapper .slide-item .col-md-5 .slide-button { text-align: center; } } /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ @media only screen and (max-width: 767px) { .container { width: 570px; } .no-bottom-padding { padding-bottom: 150px !important; } .feature-bottom-image { display: none; } #purchase-section, #download-section-overlayer { padding-bottom: 50px; } .dash { margin-bottom: 30px; } .dash.minutes_dash { -webkit-border: 0; -moz-border: 0; -o-border: 0; border: 0; } } /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ @media only screen and (max-width: 599px) { .container { width: 550px; } .blog-title { font-size: 30px; line-height: 40px; } .owl-home .slide-title, .parallax-slider #owl-home-wrapper .slide-item .col-md-5 .slide-title { font-size: 30px; line-height: 50px; margin-bottom: 5px; } .owl-home .slide-desc { font-size: 16px; margin-bottom: 15px; } .owl-home .slide-divider { margin-bottom: 35px; } .feature-box-style-2 .feature-icon { float: none; margin: 0 auto 20px; } .feature-box-style-2 .feature-title { text-align: center; } .feature-box-style-2 .feature-title:after { left: 50%; margin-left: -50px; } .feature-box-style-2 .feature-title:hover:after { margin-left: -125px; } .feature-box-style-2 .feature-content { padding: 0; text-align: center; } #video-section-overlayer { padding: 100px 0; } .grid-2 div.slide-item .portfolio-content, .grid-3 div.slide-item .portfolio-content, .grid-4 div.slide-item .portfolio-content { width: 100%; } .comments ul ul { margin-left: 0; } .comments .avatar-image { float: none; max-width: 120px; margin: 0 auto 25px; } .comment-container { padding: 0; } .comment-container .author-name { text-align: center; } .comment-container .author-name span { float: none; } #map { height: 280px; } } /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ @media only screen and (max-width: 550px) { .container { width: 450px; } } /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ @media only screen and (max-width: 479px) { .video-background #home-section { width: 100%; overflow: hidden; padding: 130px 0; position: relative; background-color: transparent; } .container { width: 320px; } .owl-home .slide-title, .parallax-slider #owl-home-wrapper .slide-item .col-md-5 .slide-title { font-size: 24px; line-height: 44px; } .owl-home .slide-desc { font-size: 14px; line-height: 16px; margin: 10px; } .section-title { font-size: 30px; } .post-meta { float: none; margin: 0 auto 20px; } .post-button { padding: 0; } #map { height: 380px; } .digit { height: 50px; font-size: 50px; line-height: 50px; } } #article01 { padding: 0; width: 100%; overflow: hidden; background-color: #ffffff; background-repeat: repeat; background-attachment: fixed; background-position: center center; background-image: url(../images/background/article1-section-bg.jpg); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #article01 .short-section-title { color: #ffffff; margin-bottom: 40px; } #article01:hover .short-section-title:after { width: 150px; } #article02 { padding: 0; width: 100%; overflow: hidden; background-color: #ffffff; background-repeat: repeat; background-attachment: fixed; background-position: center center; background-image: url(../images/background/article2-section-bg.jpg); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #article02 .short-section-title { color: #ffffff; margin-bottom: 40px; } #article02:hover .short-section-title:after { width: 150px; } #article03 { padding: 0; width: 100%; overflow: hidden; background-color: #ffffff; background-repeat: repeat; background-attachment: fixed; background-position: center center; background-image: url(../images/background/article3-section-bg.jpg); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #article03 .short-section-title { color: #ffffff; margin-bottom: 40px; } #article03:hover .short-section-title:after { width: 150px; } #article04 { padding: 0; width: 100%; overflow: hidden; background-color: #ffffff; background-repeat: repeat; background-attachment: fixed; background-position: center center; background-image: url(../images/background/article4-section-bg.jpg); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #article04 .short-section-title { color: #ffffff; margin-bottom: 40px; } #article04:hover .short-section-title:after { width: 150px; } #article05 { padding: 0; width: 100%; overflow: hidden; background-color: #ffffff; background-repeat: repeat; background-attachment: fixed; background-position: center center; background-image: url(../images/background/article5-section-bg.jpg); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #article05 .short-section-title { color: #ffffff; margin-bottom: 40px; } #article05:hover .short-section-title:after { width: 150px; }