/* ============================================================== Template name : Sonno - Multi purpose bootstrap landing page Categorie : Site template Author : Nce18cex Version : v1.0.0 Created : 31 August 2015 Last update : 21 September 2015 ----------------------------------------------------------------- CSS structure ----------------------------------------------------------------- 01. General 02. Featured 03. Video responsive 04. Client 05. Box Icon 06. Background Content 07. Parallax 08. Testimonial 09. Masonry 10. Infinite Scroll 11. Hover Effect 12. Product detail 13. Pricing Table 14. Team 15. Twitter Feed 16. Blog 17. Aside 18. Comments 19. Inner page 20. Input Form 21. Clear Margin 22. List Link 23. Social Link 24. Preloading 25. Ui to top 26. Responsive 27. Preloading 28. Clear spacer 29. Custom left right spacer 30. Custom top spacer 31. Custom bottom spacer 32. Custom left spacer 33. Custom right spacer 34. Custom responsive ============================================================== */ /* Featured =========================== */ .featured{ position:relative; margin:0; } .containt-wrapper{ color:#fff; padding-top:60px; } .video-section{ padding:100px 0; } .containt-wrapper h2{ font-size:72px; line-height:72px; font-weight:900; color:#fff; margin-bottom:10px; } .containt-wrapper h3{ font-size:48px; line-height:54px; font-weight:900; color:#fff; margin-bottom:10px; } .headline{ font-size:36px; line-height:46px; text-transform:uppercase; font-weight:300; } .img-slider{ display:block; width:100%; height:auto; margin-top:15px; } .form-wrapper{ position:relative; margin:0; padding:0; } .slider-wrapper{ position:absolute; overflow:hidden; z-index:9; width:76%; height:auto; top:32.5%; left:11.5%; } .main-form{ position:absolute; top:0; right:0; width: 50%; height:100%; color:#fff; background:rgba(12, 12, 12, 0.8); padding:50px 30px; } .main-form h3{ background:url(../img/white-line.png) no-repeat bottom left; font-size:68px; line-height:58px; font-weight:900; text-transform:uppercase; color:#fff; padding-bottom:25px; margin-bottom:30px; } .main-form h3 span{ font-size:58px; font-weight:300; } .main-form label{ color:#fff; } /* Video responsive =========================== */ .video-container,.map-container,.embed-container{ position:relative; margin:0; padding-bottom:58%; padding-top:30px; height:0; border:none; } .embed-container iframe, .embed-container object, .embed-container embed, .video-container iframe, .map-container iframe, .map-container object, .map-container embed, .video-container video, .video-container source, .video-container object, .video-container embed{ position:absolute; top:0; left:0; width:100%; height:100%; } iframe { border:none; } .video-wrapper{ display:block; position:relative; width:100%; height:auto; border:20px solid #fff; margin-top:20px; } .video-image{ position: absolute; width:100%; height:100%; top: 0; left: 0; z-index:2; } .start-video{ background:rgba(28, 28, 28, 0.6) url(../img/video-play.png) no-repeat center center; position:absolute; width:100%; height:100%; border:none; top:0; left:0; z-index:4; margin:0; opacity:0.4; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .start-video:hover{ opacity:0.95; } /* Client =========================== */ .client{ padding: 0 50px; position: relative; } .item-client{ position: relative; z-index: 1; } .item-client > a{ display: table; margin: auto; opacity: 0.5; filter:alpha(opacity=50); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .item-client:hover > a{ opacity: 1; filter:alpha(opacity=100); } /* Direction =========================== */ .wrap-carousel{ position: relative; } .wrap-carousel .owl-carousel{ z-index: 2; } .direction{ display: table; margin: 10px auto 40px; } .direction > .direction-nav > .direct-prev, .direction > .direction-nav > .direct-next{ cursor: pointer; border: solid 5px #1c1c1c; width: 59px; height: 43px; display: block; float: left; margin: 0px 5px; background-repeat: no-repeat; background-position: center center; text-align:center; font-size:32px; line-height:37px; color:#1c1c1c; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .direction > .direction-nav > .direct-prev:hover, .direction > .direction-nav > .direct-prev:focus, .direction > .direction-nav > .direct-prev:active, .direction > .direction-nav > .direct-next:hover, .direction > .direction-nav > .direct-next:focus, .direction > .direction-nav > .direct-next:active{ color:#fff; } .direction-middle{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .direction-middle > .direction-nav{ top: 50%; margin-top: -17.5px; width: 100%; height: 100%; position: absolute; } .direction-middle > .direction-nav > .direct-next, .direction-middle > .direction-nav > .direct-prev{ cursor: pointer; position: relative; z-index: 2; font-size:42px; line-height:42px; color:#868686; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .direction-middle > .direction-nav > .direct-prev{ float: left; } .direction-middle > .direction-nav > .direct-next{ float: right; } /* Box Icon =========================== */ .box-icon{ position: relative; } .box-icon .icon{ font-size: 47px; } .box-icon h5{ margin-top: 5px; margin-bottom: 5px; } .box-icon p.size16{ font-size: 24px; } .icon-2x { font-size: 2em; } .icon-3x { font-size: 3em; } .icon-4x { font-size: 4em; } .icon-5x { font-size: 5em; } /* Background Content =========================== */ .bg-content{ background-image: url(../img/about/images-feature.png); background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: top center; height: 565px; position: relative; padding: 232px 54px 0px; margin-top: 10px; } .bg-content > .content{ text-align: center; } .bg-content > .content > h4{ font-weight: normal; } .bg-content > .content > h4 > b{ display: block; color: #1c1c1c; margin-top: 8px; margin-bottom: -5px; } .bg-content > .content > p{ margin-bottom: 13px; } /* Parallax =========================== */ .parallax{ position: relative; color: #fff; background-position: center center; background-attachment: fixed; background-repeat: repeat-y -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; padding:100px 0; } .parallax .title-section b{ color: #fff; } .parallax > .overlay{ position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background: #000; opacity: 0.9; filter:alpha(opacity=90); } /* Testimonial =========================== */ .testimonial{ position: relative; margin-bottom: -14px; } .item-testimonial{ position: relative; padding: 0px 0px 20px 20px; margin: 10px 15px; } .item-testimonial > .content, .item-testimonial > .avatar{ border: solid 5px #6c6c6c; } .item-testimonial > .content{ position: relative; padding: 0px; } .item-testimonial > .content > blockquote{ color: #7c7c7c; } .item-testimonial > .avatar{ width: 80px; height: 80px; position: absolute; padding: 10px; bottom: 0px; left: 0px; background: #0c0c0c; z-index: 2; } /* Masonry =========================== */ section.gallery{ padding-bottom: 0px; } .masonry{ position: relative; overflow: hidden; margin: 49px 0 0 0; padding: 0; } ul.filter-items{ padding: 0px; margin: 0px; display: table; margin: auto; } ul.filter-items li{ list-style: none; position: relative; display: block; float: left; margin: 11px 9px; padding: 2px 19px; font-weight: bold; font-size: 18px; color: #1c1c1c; border: solid 3px #1c1c1c; cursor: pointer; text-transform: uppercase; } ul.filter-items li.active:hover, ul.filter-items li.active:focus, ul.filter-items li.active{ color: #fff; } /* Infinite Scroll =========================== */ #infscr-loading{ position: absolute; text-align: center; display: block; bottom: 0px; z-index: 9; font-size: 24px; font-weight: 300; padding: 40px 0; color: #fff; width: 100%; } #infscr-loading img{display: none;} /* Hover Effect =========================== */ .img-hover { position: relative; overflow: hidden; } .img-hover > .dh-overlay { width: 100%; text-align: center; color: #fff; padding: 20px; position: absolute; display: table; } .img-hover > .dh-overlay > .option{ opacity: 0.9; filter: alpha(opacity=90); display: table-cell; vertical-align: middle; height: 100%; } .img-hover > .dh-overlay > .option > a.zoom{ color: #fff; border: solid 2px #fff; display: block; margin: auto; width: 45px; height: 45px; border-radius: 50%; font-size: 23px; text-align: center; padding-top: 7px; } .img-hover > .dh-overlay > .option > a.zoom:hover{ text-decoration: none; background: #fff; } .img-hover > .dh-overlay > .option > h5{ font-size: 16px; margin-top: 14px; } .img-hover > .dh-overlay > .option > h5 a { color:#fff; display: block; } .img-hover > .dh-overlay > .option > h5 a.category{ font-weight: 300; } /* product detail =========================== */ .product-detail{ position:relative; display:block; margin-bottom:30px; } table.parameter-product{ width:100%; margin-bottom:10px; } table.parameter-product tr.active{ background:#f6f6f6; } table.parameter-product tr td{ padding:10px; border:solid 1px #e5e5e5; } /* Pricing Table =========================== */ .pricing-table{ border: solid 1px #dedede; background: #fff; text-align: center; position: relative; margin-bottom: 34px; } .pricing-table:after{ position: absolute; bottom: -35px; left: 0px; width: 100%; height: 34px; content: ""; background: url(../img/shadow-price.png) 50% 50% no-repeat; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; } .pricing-header{ background: #f6f6f6; padding: 32px 0px 2px; } .pricing-header h4{ font-weight: 400; } .pricing-header h4 > span.price{ font-weight: bold; font-size: 60px; } .pricing-header h4 > span.mon{ font-size: 14px; } .pricing-title{ background: #787878; padding: 13px 0px 1px; } .pricing-title > h5{ color: #fff; line-height: 5px; } .pricing-list ul{ margin: 0px; padding: 0px; } .pricing-list ul li{ list-style: none; display: block; border-bottom: solid 1px #dedede; font-size: 16px; padding: 10px 0px 11px; } .pricing-footer{ position: relative; background: #f6f6f6; padding: 20px 0px; } /* Team =========================== */ .team-list{ position: relative; } .team-item{ position: relative; text-align: right; padding: 0 15px 50px 0; } .team-item > .caption{ position: absolute; width: 200px; height: 157px; left: 15px; bottom: 0px; padding: 24px 30px; text-align: left; background: #ccc; } .team-item > .caption > h6, .team-item > .caption > h5{ color: #fff; } .team-item > .caption > h5{ font-weight: 300; } .team-item > .caption > h5 > b{ font-weight: bold; } .team-item > .caption > h6{ font-weight: normal; margin-top: -11px; } .team-item > .caption > ul{ padding: 0px; } .team-item > .caption > ul > li{ list-style: none; float: left; } .team-item > .caption > ul > li > a{ color: #fff; font-size: 41px; margin-right: 5px; } .team-item > .caption > ul > li > a:hover, .team-item > .caption > ul > li > a:focus{ text-decoration: none; } /* Twitter Feed =========================== */ ul.twitter-feed{ margin: 0px; padding: 0px; } ul.twitter-feed > li{ display: none; list-style: none; -webkit-backface-visibility: hidden; font-size: 24px; font-weight: 300; line-height:40px; margin-bottom: -5px; } .twitter-feed :after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } /* Blog =========================== */ article{ display:block; padding-bottom:60px; margin-bottom:60px; border-bottom:1px solid #c9cfd1; } .singlepost{ padding-bottom:40px; } .post-item{ position: relative; margin: 0 15px; padding: 40px 0 0 98px; } .post-article{ margin-bottom: -7px; } .post-title a{ color: #1c1c1c; } .post-title{ margin: 15px 0 15px 0; } .post-meta{ background: #ccc; position: absolute; display: block; width: 170px; height: 170px; top: 0px; left: 0px; color: #fff; text-align: center; padding: 35px 0; z-index:5; } .post-meta > .date{ font-size: 72px; font-weight: 300; margin-bottom: 19px; } .post-meta > .month{ font-size: 24px; font-weight: 300; text-transform: uppercase; margin-bottom: 9px } .post-meta > .comment{ text-transform: uppercase; } .post-meta > .comment > .icon{ font-size: 12px; } .post-meta > .comment > a{ color: #fff; } /* Aside =========================== */ aside, aside .widget{ float:left; width:100%; } aside .widget{ margin-bottom:30px; } .title-aside{ position: relative; padding-bottom:15px; margin-bottom:20px; } .title-aside:after{ content: ""; position: absolute; border-bottom: solid 4px; width: 60px; bottom: 0; left: 0; } .widget fieldset.search-wrapper{ position:relative; padding:1px; margin:0; border:1px solid #c9cfd1; background-color:#fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .widget input.search{ background: none; border: none; margin:0; font-size:12px; padding:5px 10px 5px 10px; } .widget fieldset.search-wrapper button{ position:absolute; right:1px; top:1px; border:none; padding:5px 15px 5px 15px; border-radius:0 3px 3px 0; } ul.cat{ margin:0; padding:0; } ul.cat li{ list-style:none; margin:0; padding:0; border-bottom:1px dashed #c9cfd1; } ul.cat li a{ display:block; color:#595959; padding:0 0 5px 0; margin:0 0 5px 0; } .recent{ margin:0; padding:0; } .recent li{ list-style:none; margin:20px 0 0 0; padding:0; border-bottom:1px solid #f0f0f0; } .post-thumb{ float:left; width:45px; height:45px; margin:0 20px 20px 0; } .recent li h6{ margin-bottom:10px; } .recent li h6 a{ color:#0b0b0b; } ul.tags{ float:left; width:100%; list-style:none; margin:0; padding:0; } ul.tags li{ float:left; list-style:none; margin:0; padding:0; } ul.tags li a{ display:inline-block; color:#595959; border:1px solid #c9cfd1; padding:2px 15px; margin:0 3px 3px 0; font-size:12px; } ul.tags li a:hover, ul.tags li a:active, ul.tags li a:focus{ text-decoration:none; color:#fff; } ul.ads{ float:left; margin:0; padding:0; } ul.ads li{ float:left; list-style:none; width:128px; height:128px; margin:0; padding:0 5px 5px 0; } /* Comments =========================== */ .media-object{ border:1px solid #f0f0f0; padding:5px; } .media-heading a{ color:#0b0b0b; } .media-body{ border:1px solid #f0f0f0; padding:20px 20px 0 20px; } .media .media{ margin-bottom:20px; } .reply{ display:block; width:100%; text-align:right; } .comment-form{ display:block; width:100%; margin-bottom:20px; } .comment-form div{ margin-bottom:20px; } /* Inner page =========================== */ .inner-heading{ padding:60px 0 20px 0; } .inner-page{ padding:80px 0; } /* Input Form =========================== */ ul.listForm{ float:left; width:100%; padding:0; margin:0; } ul.listForm li { float:left; width:50%; padding:0 15px; margin:0; list-style:none; } ul.listForm li.full-list{ width:100%; } #sendmessage{ display:none; } #sendmessage.show,.show { display:block; } .input-form{ padding: 5px 0 0 5px; position: relative; margin-bottom: 22px; } .input-form > .icon{ border: solid 5px #c0c0c0; width: 60px; height: 60px; position: absolute; top: 0px; left: 0px; background: #fff; text-align: center; font-size: 30px; padding-top: 9px; } .input-form > .form-control{ padding-left: 69px; padding-right: 22px; } .input-form:hover > .icon, .input-form > .icon.active{ border: solid 5px; } .input-form > a.btn{ margin-top: 3px; } .contact-icon{ padding-top: 100px; padding-bottom: 74px; } /* Clear Margin =========================== */ .cm-top{ margin-top: 0px; } .cm-right{ margin-right: 0px; } .cm-bottom{ margin-bottom: 0px; } .cm-left{ margin-left: 0px; } /* List Link =========================== */ ul.list-link{ padding: 0; margin: 0; } ul.list-link > li{ list-style: none; display: block; padding: 3px 0; } ul.list-link > li:first-child{ padding-top: 0px; } ul.list-link > li:last-child{ padding-bottom: 0px; } ul.list-link > li > a{ font-size: 12px; color: #858484; } /* Social Link =========================== */ ul.social-network{ padding: 0px; display: inline-block; margin-bottom: -7px; } ul.social-network > li{ list-style: none; float: left; display: block; } ul.social-network > li > a{ color: #858484; font-size: 41px; margin: 5px; } ul.social-network > li:first-child > a{ margin-left: 0px; } ul.social-network > li > a:hover, ul.social-network > li > a:focus{ text-decoration: none; } /* Preloading =========================== */ div.loading-invisible{ display:none; } #loading{ height: 100%; width: 100%; position: fixed; z-index:9999999; margin-top: 0px; top: 0px; color:#fff; text-align:center; font-size:18px; letter-spacing:4px; } .loading-center{ width: 100%; height: 100%; position: relative; } .loading-center-absolute { position: absolute; left: 50%; top: 50%; height: 200px; width: 200px; margin-top: -100px; margin-left: -100px; -ms-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } .object{ -moz-border-radius: 50% 50% 50% 50%; -webkit-border-radius: 50% 50% 50% 50%; border-radius: 50% 50% 50% 50%; position: absolute; border-top: 5px solid #FFF; border-bottom: 5px solid transparent; border-left: 5px solid #FFF; border-right: 5px solid transparent; -webkit-animation: animate 2s infinite; animation: animate 2s infinite; } #object_one{ left: 75px; top: 75px; width: 50px; height: 50px; } #object_two{ left: 65px; top: 65px; width: 70px; height: 70px; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } #object_three{ left: 55px; top: 55px; width: 90px; height: 90px; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } #object_four{ left: 45px; top: 45px; width: 110px; height: 110px; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } @-webkit-keyframes animate { 50% { -ms-transform: rotate(360deg) scale(0.8); -webkit-transform: rotate(360deg) scale(0.8); transform: rotate(360deg) scale(0.8); } } @keyframes animate { 50% { -ms-transform: rotate(360deg) scale(0.8); -webkit-transform: rotate(360deg) scale(0.8); transform: rotate(360deg) scale(0.8); } } .loading-center p{ position: absolute; left: 50%; top: 50%; margin-top: 95px; margin-left: -79px; } /* Ui to top =========================== */ #toTop{ display:none; text-decoration:none; z-index:600; position:fixed; bottom:20px; right:20px; overflow:hidden; width:50px; height:50px; border:none; border-radius:2px; text-indent:-999px; background-image:url(../img/ui.totop.png); background-repeat:no-repeat; background-position: top left; background-color:rgba(0, 0, 0, 0.4); } #toTopHover{ background-image:url(../img/ui.totop.png); background-repeat:no-repeat; background-position: left -50px; width:50px; height:50px; display:block; overflow:hidden; border:none; float:left; opacity: 0; -moz-opacity: 0; filter:alpha(opacity=0); } #toTop:active, #toTop:focus{ outline:none; } /* Responsive =========================== */ @media (min-width: 1200px) { .navbar-nav li a{ padding:50px 12px 50px 12px; } .jwg_slider_module .tabbed_navigation > ul li { padding: 0 25px 0 25px; } .main-form{ width: 41.66666667%; } } @media (min-width: 768px) and (max-width: 990px) { .navbar-brand{ padding-bottom:0; } .navbar-nav{ float:left; width:100%; clear:both; margin-top:50px; margin-bottom:20px; text-align:center; } .navbar-nav li{ float:none; display:inline-block; } .navbar-nav li a, .top-nav-collapse .navbar-nav li a{ padding:15px 12px 15px 12px; } .navbar-right{ position:absolute; top:0; right:15px; } .navbar-right li{ float:left; margin:0 0 0 5px; padding:35px 0 20px 0; } .top-nav-collapse .navbar-nav{ margin-top:30px; } .top-nav-collapse .navbar-nav li a{ padding:15px 12px 0 12px; } .jwg_slider_module .tabbed_navigation > ul li { padding: 0 25px 0 25px; } .bg-content{ display:block; margin-bottom:60px; } .main-form{ clear:both; position:relative; width: 100%; height:100%; } ul.listForm li { width:100%; } .footer-item{ margin-bottom:20px; } aside{ margin-top:40px; } } @media (max-width: 767px) { .navbar-brand, .top-nav-collapse .navbar-brand{ /*padding-top:15px; GP */ padding:10px !important; /*GP*/ width: 220px; } .top-nav-collapse .navbar-nav li a, .navbar-nav li a{ padding:15px 12px 15px 12px; } .navbar-right{ float:left; width:100%; } .top-nav-collapse .navbar-right li, .navbar-right li{ padding:10px 0 10px 0; } .navbar-nav{ clear:both; } .bg-content{ display:block; margin-bottom:60px; } .main-form{ position:relative; width: 100%; height:100%; } ul.listForm li { width:100%; } .footer-item{ margin-bottom:20px; } aside{ margin-top:40px; } .title-section > h3{ font-size: 20px; } .title-section > h3 strong{ font-size: 24px; line-height: 20px; } .btn-noslider{ font-size:17px; } .post-meta{ width: 90px; height: 90px; } .post-meta > .date{ font-size:24px; margin: -15px; } .post-meta > .month{ font-size:12px; margin: 5px; } .post-meta > .comment{ font-size:8px; margin: -16px; } blockquote > footer > a{ font-size: 8px; } .panel-group{ padding-top: 53px; } }