/************************************** File Name: style.css Template Name: Initiative Created By: HTML.Design http://themeforest.net/user/wpdestek **************************************/ /************************************** Table of Content 1. FONTS 2. BASIC 3. LOADER 4. HEADER 5. SECTION 6. PORTFOLIO 7. FOOTER 8. ELEMENTS 9. PRICING 10. TESTIMONIAL 11. TEAM MEMBER 12. FORMS 13. PAGES 14. BLOG 15. SIDEBAR WIDGETS 16. SIDEBAR EXPENDED 17. SHOPPING 18. RESPONSIVE **************************************/ /* FONTS **************************************/ @font-face { font-family: "Flaticon"; src: url("fonts/Flaticon.eot"); src: url("fonts/Flaticon.eot?#iefix") format("embedded-opentype"), url("fonts/Flaticon.woff") format("woff"), url("fonts/Flaticon.ttf") format("truetype"), url("fonts/Flaticon.svg#Flaticon") format("svg"); font-weight: normal; font-style: normal; } @media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { font-family: "Flaticon"; src: url("fonts/Flaticon.svg#Flaticon") format("svg"); } } [class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after { font-family: Flaticon; font-style: normal; } .flaticon-travel:before { content: "\f100"; } .flaticon-architect-with-helmet:before { content: "\f101"; } .flaticon-house-sketch:before { content: "\f102"; } .flaticon-set-square:before { content: "\f103"; } /* BASIC **************************************/ body { line-height: 1.7; background-color: #ffffff; } body.boxed { background-color: #333; } body.boxed #wrapper { margin: 2rem auto; max-width: 1240px; } .work-information li, .account-details .list-group-item, .shop-table .table th, .shop-extra .nav-tabs a, .cat-title, .da-thumbs .pitem a div small, .da-thumbs .pitem a div span, .portfolio-filter ul li, .dropdown-item, .readmore, .btn, .navbar-nav .nav-link, h1, h2, h3, h4, h5 { font-family: 'Oswald', serif; } .gform .form-control, body, p { font-family: 'Karla', serif; } h1, h2, h3, h4, h5, h6 { font-weight: 400; line-height: 1.7; color: #141414; letter-spacing: 2px; } h1:hover a, h2:hover a, h3:hover a, h4:hover a, h5:hover a, h6:hover a { text-decoration: underline !important; color: #141414 !important; } h1 { font-size: 32px; line-height: 40px; margin-bottom: 23px } h2 { font-size: 27px; line-height: 38px; margin-bottom: 20px } h3 { font-size: 22px; line-height: 30px; margin-bottom: 17px } h4 { font-size: 19px; line-height: 29px; margin-bottom: 14px } h5 { font-size: 17px; line-height: 25px; margin-bottom: 11px } h6 { font-size: 16px; line-height: 24px; margin-bottom: 11px } a { color: #141414; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } mark { padding: 0; } body, p { color: #5e5e5e; } p { margin-bottom: 26px; font-size: 14px; } a:hover, a:focus { color: #141414; } .blockquote { border: 1px solid #edeff2; background: #fff none repeat scroll 0 0; border-left: 4px solid #eceeef; font-size: 1.1rem; font-style: italic; margin-bottom: 1.5rem; border-radius: 0 !important; padding: 2rem; } .readmore { display: block; font-size: 11px; margin: 1rem 0 0; color: #141414; font-weight: 400; padding: 0; text-transform: uppercase; letter-spacing: 2px; line-height: 1; } .readmore::after { display: inline-block; width: auto; height: auto; margin-left: 0.5em; margin-top: -0.1rem; vertical-align: middle; content: "\f178"; border: 0; font-family: 'FontAwesome'; } /* LOADER **************************************/ #loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; } #loader { display: block; position: relative; left: 0; right: 0; top: 50%; width: 80px; height: 80px; margin: -50px auto; border-radius: 50%; border: 1px solid transparent; border-top-color: #f7bd1f; -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ z-index: 1001; } #loader:before { content: ""; position: absolute; top: 1px; left: 1px; right: 1px; bottom: 1px; border-radius: 50%; border: 1px solid transparent; border-top-color: #f7bd1f; -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ } #loader:after { content: ""; position: absolute; top: 3px; left: 3px; right: 3px; bottom: 3px; border-radius: 50%; border: 1px solid transparent; border-top-color: #f7bd1f; -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: rotate(0deg); /* IE 9 */ transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */ } 100% { -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: rotate(360deg); /* IE 9 */ transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */ } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: rotate(0deg); /* IE 9 */ transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */ } 100% { -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: rotate(360deg); /* IE 9 */ transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */ } } #loader-wrapper .loader-section { position: fixed; top: 0; width: 51%; height: 100%; background: #141414; z-index: 1000; } #loader-wrapper .loader-section.section-left { left: 0; } #loader-wrapper .loader-section.section-right { right: 0; } /* Loaded styles */ .loaded #loader-wrapper .loader-section.section-left { -webkit-transform: translateX(-100%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translateX(-100%); /* IE 9 */ transform: translateX(-100%); /* Firefox 16+, IE 10+, Opera */ -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */ transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */ } .loaded #loader-wrapper .loader-section.section-right { -webkit-transform: translateX(100%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translateX(100%); /* IE 9 */ transform: translateX(100%); /* Firefox 16+, IE 10+, Opera */ -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */ transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */ } .loaded #loader { opacity: 0; -webkit-transition: all 0.3s ease-out; /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */ transition: all 0.3s ease-out; /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */ } .loaded #loader-wrapper { visibility: hidden; -webkit-transform: translateY(-100%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translateY(-100%); /* IE 9 */ transform: translateY(-100%); /* Firefox 16+, IE 10+, Opera */ -webkit-transition: all 0.3s 1s ease-out; /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */ transition: all 0.3s 1s ease-out; /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */ } .boxed-slider .container-fluid { padding: 0; } /* HEADER **************************************/ .header { padding: 0; position: relative; background-color: #141414 !important; } body.boxed .header { padding: 1rem; background-color: rgba(0, 0, 0, 1) !important; } body.boxed .bg-inverse { background-color: rgba(0, 0, 0, 1) !important; } .normal-header { padding: 1rem 3rem; } .normal-header .navbar { padding: 0; } .fixed-top { left: 0; position: fixed; right: 0; top: 0; z-index: 1030; padding: 1rem 3rem; } .bg-inverse { background-color: rgba(0, 0, 0, 0.7) !important; } .navbar-nav .nav-link { font-size: 12px; letter-spacing: 2px; line-height: 1; padding: 0.9rem 0 0.8rem; text-transform: uppercase; } .dropdown-toggle::after { display: inline-block; width: auto; height: auto; margin-left: 0.5em; margin-top: -0.3rem; vertical-align: middle; content: "\f107"; border: 0; font-family: 'FontAwesome'; } .navbar-toggleable-md .navbar-nav .nav-link { padding-left: 0.8rem; padding-right: 0.8rem; } .navbar-toggler { -webkit-align-self: flex-end; -ms-flex-item-align: end; align-self: flex-end; } .navbar-toggler-right { top: 13px; } .header-section { padding: 2rem 0; margin-bottom: 3rem; background-color: #ffffff; border-bottom: 1px dashed #e2e2e2; } .logo img { max-width: 324px; max-width: 100%; margin: auto; text-align: center; display: block; } .searchmenu .form-control { font-size: 13px; background-color: #ffffff; height: 45px; border: 0; border: 1px solid #ecede8; min-width: 220px; float: right; font-style: italic; border-radius: 0 !important; } .searchmenu .input-group-addon { border: 0; border-radius: 0 !important; background-color: #ffffff; } .searchmenu i { font-size: 13px; } .tooltip-inner { font-size: 12px; } .tooltip.tooltip-bottom, .tooltip.bs-tether-element-attached-top { margin-top: 19px; } .navbar-nav { margin: 0; } .menu-right, .social { margin-top: 6px; } .social { border-right: 1px dashed #555; height: 25px; padding-right: 8px; } .menu-right { margin-left: 8px; } .fa-bars { font-size: 14px; } .navbar-brand { padding-top: 0; padding-bottom: 0; padding-left: 0; } .menu-right a, .social a { font-size: 13px; padding: 0; display: inline-block; width: 20px; height: 20px; color: #ffffff; line-height: 20px; text-align: center; } .header .dropdown-menu { padding: 0; box-shadow: none; border-radius: 0; min-width: 240px; border-color: #f5f5f5; } .header .dropdown ul li { border-bottom: 1px solid #f5f5f5; } .dropdown-item { font-weight: 400; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; padding: 5px 1.5rem; } .dropdown-item:hover { background-color: #f2f2f2; } .header .dropdown ul li:last-child { border-bottom: 0; } .header .dropdown-item span { position: absolute; right: 20px; top: 2px; } body.creative-head .header-section { margin-bottom: 0; } .welcome-box .entry { max-width: 200px; margin: auto; } .welcome-box h2 { font-size: 34px; font-weight: bold; padding: 1.6rem 0 0.6rem; margin: 0; } .welcome-box p { line-height: 1.8; font-style: italic; font-size: 1.1rem; padding: 0 0 1.1rem; margin: 0; } .bortop { border-bottom: 1px dashed #e2e2e2; } /* SECTION **************************************/ .section { padding: 2.6rem 0; } .section-button { display: block; margin: 2rem 0 0; } .section-button .btn { padding: 16px 43px; } .video-section { position: relative; } .overlay { position: absolute; top: 0; right: 0; left: 0; bottom: 0; background: url(images/pattern.png) repeat center center rgba(0, 0, 0, 0.7); } .nopadbot { padding-bottom: 0; } .bgwhite { background-color: #ffffff } .bgdark { background-color: #141414; } .bglight { background-color: #f2f2f2; } .bg01 { background: #ffffff url("upload/bg_01.jpg") repeat center center; } .tp-bannertimer { display: none; } .post-media img { width: 100%; } .tp-caption.NotGeneric-Title, .NotGeneric-Title { font-weight: 400 !important; color: #ffffff; letter-spacing: 2px; text-transform: uppercase; font-family: 'Oswald', sans-serif; } .tp-caption.NotGeneric-Title.fstrong, .NotGeneric-Title.fstrong { font-weight: bold !important; color: #212121; letter-spacing: 0 !important; font-family: 'Source Sans Pro', sans-serif; } .tp-caption.NotGeneric-Title span, .NotGeneric-Title span { font-weight: 600 !important; } .tp-caption.NotGeneric-SubTitle, .NotGeneric-SubTitle { color: #ffffff; font-family: 'Karla', sans-serif; line-height: 1.7; letter-spacing: 0; } .NotGeneric-CallToAction:hover, .tp-caption.NotGeneric-CallToAction:hover, .NotGeneric-CallToAction, .tp-caption.NotGeneric-CallToAction { font-family: 'Source Sans Pro', sans-serif; letter-spacing: 0; border-width: 2px !important; border-radius: 500px; } /* PORTFOLIO **************************************/ .pager { list-style: none; padding: 0; } .portfolio-filter ul { padding: 0 0 2rem 0; z-index: 2; display: block; position: relative; margin: 0; } .portfolio-filter ul li { border-radius: 0; display: inline-block; margin: 0 10px 0 0; letter-spacing: 2px; text-decoration: none; text-transform: uppercase; text-align: left !important; vertical-align: middle; } .portfolio-filter ul li:last-child:after { content: ""; } .portfolio-filter ul li a { font-size: 12px; } .item-h2, .item-h1 { height: 100% !important; height: auto !important; } .pitem { padding: 0 !important; margin: 0; } .pitem img { width: 100%; } .isotope-item { z-index: 2; padding: 0; } .isotope-hidden.isotope-item { pointer-events: none; z-index: 1; } .isotope, .isotope .isotope-item { /* change duration value to whatever you like */ -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; transition-duration: 0.8s; } .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; transition-property: transform, opacity; } .da-thumbs { position: relative; } .da-thumbs .pitem { position: relative; } .da-thumbs .pitem a, .da-thumbs .pitem a img { display: block; position: relative; margin : 5px; } .da-thumbs .pitem a { overflow: hidden; } .da-thumbs .pitem a div { position: absolute; background: #000; background-color: rgba(0, 0, 0, 0.7); width: 100%; height: 100%; } .da-thumbs .pitem a div span { display: block; padding: 10px 0 0; margin: 40px 20px 0 20px; letter-spacing: 2px; position: absolute; text-transform: uppercase; font-weight: normal; bottom: 20px; color: rgba(255, 255, 255, 0.9); } .da-thumbs .pitem a div small { display: block; font-size: 11px; padding: 0; letter-spacing: 2px; margin: 5px 20px 20px 0; text-transform: uppercase; font-weight: normal; color: rgba(255, 255, 255, 0.9); } /* Featurettes ------------------------- */ .featurette-divider { margin: 5rem 0; /* Space out the Bootstrap
more */ } /* Thin out the marketing headings */ .featurette-heading { font-weight: 300; line-height: 1; letter-spacing: -.05rem; } .classic-portfolio .pitem { padding: 15px !important; } .classic-portfolio h4 a { text-decoration: none !important; } .classic-portfolio h4 { font-size: 15px; margin: 0; padding: 10px 0 0; text-transform: uppercase; } .classic-portfolio small { padding: 0; margin: 0; display: block; line-height: 1; letter-spacing: 2px; text-transform: uppercase; } .da-thumbs.classic-portfolio .pitem a div i { color: rgba(255, 255, 255, 0.9); display: block; text-align: center; text-transform: uppercase; width: 30px; height: 30px; line-height: 30px; top: 50% !important; } .da-thumbs.classic-portfolio .pitem a div span { bottom: 0; left: 20px; margin: 0; } .da-thumbs.classic-portfolio .pitem p { padding: 10px 0 0; margin: 0; } .da-thumbs.classic-portfolio li { list-style: none; } .da-thumbs.classic-portfolio ul { padding: 0; } .list-portfolio h4 { font-size: 21px; padding: 30px 0 10px; } .post-publish { padding: 0; } .post-publish .fa { background-color: #ffffff; border: 1px solid #121212; color: #121212; border-radius: 100px; display: inline-block; font-size: 14px; width: 30px; height: 30px; line-height: 30px; text-align: center; margin: 0 2px 0; padding: 0; } .work-information { list-style: none; padding: 0 0 5px; } .work-information li { display: block; font-size: 14px; font-weight: 400; letter-spacing: 1px; margin-bottom: 10px; text-transform: uppercase; } .work-information li:last-child { margin-bottom: 0; } .work-details h4 { padding-bottom: 10px; text-transform: uppercase; line-height: 1; } .flex-direction-nav a { background-color: #ffffff !important; color: #000000 !important; line-height: 25px; } /* FOOTER **************************************/ .footer { background-color: #141414; } .footer li, .footer a, .footer p { font-size: 14px; color: rgba(255, 255, 255, 0.6); font-weight: 400; } .widget-title { display: inline-block; padding: 0 0 2rem; margin: 0; z-index: 1; font-size: 18px; line-height: 1; position: relative; color: #ffffff; text-transform: uppercase; } .widget-title.dark-color { color: #121212; } .widget-title:after { background-color: rgba(0, 0, 0, 0.8); content: ""; display: inline-block; height: 1px; left: 0; z-index: -1; position: absolute; top: 9px; width: 100%; } .instagram-wrapper a { margin: 0; border-right: 5px solid transparent; border-bottom: 5px solid transparent; display: inline-block; text-align: center; position: relative; padding: 0; float: left; width: 25% } .entry { position: relative; overflow: hidden; } .entry .team-buttons { position: absolute; top: 50%; text-align: center; margin: -20px auto; left: 0; right: 0; } .entry .team-buttons .btn { padding: 10px; border-radius: 0; } .magnifier { position: absolute; top: 0; right: 0; opacity: 0; visibility: hidden; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.4); -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .instagram-wrapper .magnifier i { position: absolute; top: 50%; margin: -5px auto; left: 0; right: 0; text-align: center; padding: 0; } .entry:hover .magnifier, .instagram-wrapper a:hover .magnifier { opacity: 1; visibility: visible; } .footer .text-widget p { padding: 1rem 0; margin: 0; } .footer .social { border: 0; } .footer .social a { margin-right: 8px; width: auto; } .contact-details { margin-top: 3rem; } #message { display: none; padding: 20px 0; position: relative; text-align: left; } #map { height: 400px; position: relative; width: 100%; z-index: 1; } #map img { max-width: inherit; } .loader { margin-left: 10px; } .map { position: relative; } .map .row { position: relative; } .infobox img { width: 100% !important; } .map .searchmodule { padding: 18px 10px; } .infobox { display: block; margin: 0; padding: 0 0 10px; position: relative; width: 260px; z-index: 100; } .infobox .title { font-size: 13px; line-height: 1; margin-bottom: 0; margin-top: 15px; padding-bottom: 5px; text-transform: capitalize; } .contact-widget ul { padding: 0; margin: 0; list-style: none; } .contact-widget ul li { margin-top: 0; line-height: 1; position: relative; margin-bottom: 18px; } .contact-widget ul li:last-child { margin-bottom: 0; } .contact-widget ul li span { width: 20px; display: inline-block; } .copyrights { padding: 1.5rem 0; background-color: #000000; } .copyrights p { margin-bottom: 0; padding: 0; } .copyrights i { margin-left: 6px; } /* ELEMENTS **************************************/ .process-box h3 { font-size: 20px; font-weight: 400; padding: 0; line-height: 1; letter-spacing: 2px; text-transform: uppercase; margin: 25px 0 25px; margin-bottom: 0; font-size: 16px; color: #ffffff; } .process-end h3 { font-size: 18px; margin-top: 10px; color: #141414; margin-bottom: 15px; } .process-end p { color: #141414; } .process-box i { font-size: 44px; line-height: 1; } .process-box { background-color: #141414; padding: 50px 20px; position: relative; overflow: hidden; } .process-end { top: 0; left: 0; right: 0; bottom: 200px; padding: 30px 20px 0; visibility: hidden; opacity: 0; z-index: 10; position: absolute; -webkit-transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out; -moz-transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out; -o-transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out; transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out; } .process-box:hover .process-end { opacity: 1; z-index: 1000; left: 0; top: 0; right: 0; bottom: 0; position: absolute; visibility: visible; } .tagline-message { max-width: 980px; margin: auto; } .tagline-message h3 span { position: relative; } .tagline-message h3 { color: #ffffff; z-index: 1; letter-spacing: 2px; position: relative; line-height: 1.7; text-transform: uppercase; font-size: 28px; padding: 0 0 3rem; margin: 0; } .darkcolor h3 { color: #141414; } .image-box { position: relative; padding: 3rem 1.5rem; overflow: hidden; } .martop100 { margin-top: -150px; } .normal-box { position: relative; padding: 3rem; overflow: hidden; background-color: #ffffff; } .image-box .details { z-index: 1; bottom: -120px; position: absolute; position: relative; -webkit-transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out; -moz-transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out; -o-transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out; transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out; } .image-box:hover .details { bottom: 0; } hr.invis { border: 0; margin: 2rem 0; } hr.invis1 { border: 0; margin: 4rem 0; } .normal-box p, .image-box p { padding-bottom: 0; margin-bottom: 0; color: rgba(255, 255, 255, 0.7); } .normal-box p { color: rgba(0, 0, 0, 0.7); } .normal-box h4, .image-box h4 { display: inline-block; padding: 0 0 1rem; margin: 0; z-index: 1; font-size: 18px; line-height: 1; position: relative; color: #ffffff; text-transform: uppercase; } .normal-box h4 { color: #141414; } .tagline-message h3 span::after, .normal-box h4::after, .image-box h4::after { background-color: rgba(0, 0, 0, 0.8); content: ""; display: inline-block; height: 1px; z-index: -1; left: 0; position: absolute; top: 9px; width: 100%; } .tagline-message h3 span::after { top: 18px; } .image-box-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.2); -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .image-box:hover .image-box-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.7); } .image-box.bg2, .image-box.bg3, .image-box.bg1 { background: #ffffff url("upload/box_01.jpg") no-repeat center center; -webkit-background-size: 100%; -moz-background-size: 100%; -o-background-size: 100%; background-size: 100%; } .image-box.bg2 { background-image: url("upload/box_02.jpg"); } .image-box.bg3 { background-image: url("upload/box_03.jpg"); } .services img { width: 120px; } .services p { padding: 0; margin: 0 0 1.2rem; } .services .widget-title { display: table; margin: 2rem auto 1rem; padding: 0; width: auto; } .services.text-left .widget-title { display: block; text-align: left; } .services.text-left img { width: 100%; } .btn-primary { background-color: #141414; border: 0 none !important; box-shadow: none !important; border-radius: 500px; font-size: 12px; letter-spacing: 1px; line-height: 1; padding: 12px 24px; text-transform: uppercase; } /* PRICING **************************************/ .pricing-table { margin: 50px 0 0 0; border: 1px solid #ececec; background: #fff; } .pricing-table i { width: 30px; color: #c2c2c2; display: inline-block; margin-right: 10px; padding-right: 5px; border-right: 1px solid #ececec; } .pricing-table .btn-dark { padding: 10px 24px; font-size: 15px; } .pricing-table strong { font-weight: 600; margin-right: 6px; color: #1f1f1f; } .pricing-table-header { padding: 30px 0 25px 0; background: #000; } .pricing-table-header h2 { font-size: 24px; margin: 0; padding: 0; font-weight: 400; text-transform: uppercase; color: #ffffff !important; } .pricing-table-header h3 { font-size: 15px; font-weight: 400; color: #787878; padding-bottom: 0; margin-bottom: 0; margin-top: 0; text-transform: uppercase; } .pricing-table-space { height: 10px; } .pricing-table-text { margin: 15px 30px 0 30px; padding: 0 10px 15px 10px; border-bottom: 1px solid #ececec; font-weight: 300; line-height: 30px; color: #c2c2c2; font-size: 16px; } .pricing-table-text p { font-weight: 400; } .pricing-table-features { margin: 15px 30px 0 30px; padding: 0 10px 15px 30px; border-bottom: 1px solid #ececec; text-align: left; line-height: 30px; font-size: 16px; color: #c2c2c2; } .alignleft { float: left; display: table-cell; margin: 10px 20px 10px 0; } .alignright { float: right; display: table-cell; margin: 10px 0 10px 20px; } .pricing-table-sign-up { margin-top: 25px; padding-bottom: 30px; } /* Highlighted table */ .pricing-table-highlighted { margin-top: 0; } /* TESTIMONIAL **************************************/ .testi-item .lead { margin: 20px auto !important; line-height: 2; font-size: 16px; font-weight: 500; font-style: italic; max-width: 800px !important; padding: 0 !important; text-transform: none; color: #ffffff; } .testi-item img { width: 80px; margin-bottom: 0; } .testi-item h4 { font-size: 21px; margin: 20px 0 5px; padding: 0; font-weight: bold; color: #ffffff; text-transform: uppercase; } .testi-item small { text-transform: uppercase; letter-spacing: 3px; color: #ffffff; font-style: normal; } .testimonial { position: relative; display: block; padding: 0 15px; } .testimonial p { padding-bottom: 0; margin-bottom: 0; padding-top: 30px; } .testimonial:after { font-family: 'FontAwesome'; content: "\f10e"; padding-right: 5px; left: 0; color: #ededed; position: absolute; top: -30px; font-size: 600%; opacity: 0.6; -moz-opacity: 0.6; z-index: 0; filter: alpha(opacity=60); } .bglight .testimonial:after { color: #ddd; } .testimonial h4 { font-size: 18px; font-weight: 400; padding: 0; margin: 0; } .testimonial small { padding: 0 0; font-size: 14px; margin-bottom: 0; display: block; } .testimonial img { margin-right: 15px; width: 75px; border: 0 solid #ffffff !important; height: 75px; margin-top: 0; border: medium none; display: table; image-rendering: optimizequality; max-width: 100%; } .testimonial-meta { overflow: hidden; z-index: 1; display: block; position: relative; } .testimonial.text-center { display: block; position: relative; padding: 0; } .testimonial.text-center .testimonial-meta { margin-top: 15px; } .testimonial.text-center p { padding-top: 10px; } .testimonial.text-center img { margin: 0 auto; position: relative; } .testimonial.text-center::after { display: none; } /* TEAM MEMBERS **************************************/ .team-desc small { font-size: 14px; text-transform: uppercase; padding: 0; margin: 0; font-weight: 300; display: inline-block; font-style: normal; letter-spacing: 5px; line-height: 1; } .team-desc { padding: 20px; background-color: #f9f9f9 } .team-desc h4 { padding-bottom: 1rem !important; margin-bottom: 0; font-weight: 400; letter-spacing: 2px; font-size: 18px; text-transform: uppercase; } /* FORMS **************************************/ .gform .form-control { background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 0; color: #5e5e5e; display: block; font-size: 13px; height: 45px; line-height: 1.25; padding: 0 1rem; text-transform: none; width: 100%; } .big-contact-form .form-control { margin-bottom: 20px; } .gform textarea.form-control { padding-top: 1rem; height: 120px; } .gform .form-control:focus { color: #5e5e5e; background-color: #fff; border-color: #5cb3fd; outline: none; } .gform .form-control::-webkit-input-placeholder { color: #5e5e5e; opacity: 1; } .gform .form-control::-moz-placeholder { color: #5e5e5e; opacity: 1; } .gform .form-control:-ms-input-placeholder { color: #5e5e5e; opacity: 1; } .gform .form-control::placeholder { color: #5e5e5e; opacity: 1; } .contact-details ul { padding: 0; } .contact-details ul li { display: inline-block; float: left; text-align: center; padding: 2rem; width: 50%; } .contact-details ul li:nth-child(1) { border-right: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .contact-details ul li:nth-child(2) { border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .contact-details ul li:nth-child(3) { border-right: 1px solid rgba(0, 0, 0, 0.1); } .contact-details h3 { color: #141414; padding-bottom: 1rem; } .contact-details small { display: block; } /* PAGES **************************************/ .about-widget { padding: 2rem; } .about-widget .lead { font-size: 34px; padding: 0 0; letter-spacing: -2px; line-height: 1.4; color: #111111; font-weight: bold; } .page-title h3 { padding-bottom: 1rem } .page-title img { max-width: 120px; margin: 0 auto 25px; } .page-title p { padding-bottom: 0; font-size: 16px; font-style: italic; margin-bottom: 0; } .notfound h2 { font-family: Comic Sans MS; font-size: 140px; padding: 0 0 1.7rem; margin: 0; line-height: 1; font-weight: bold; } .notfound h3 { font-size: 40px; padding: 0; margin: 0; } .notfound p { padding: 2rem 0 1.4rem; margin-bottom: 0; } .alink { font-weight: bold; text-decoration: underline !important; } .blockquote, .form-control:focus { border-color: #90b695; } .blockquote { background: #f2f2f2 none repeat scroll 0 0; border: 0 !important; font-family: Times New Roman; font-size: 1.25rem; font-style: italic; margin-bottom: 1rem; padding: 2rem; } .blog-box img.float-left { margin-bottom: 0.5rem; margin-right: 1.5rem; margin-top: 0.5rem; } .blog-box img.float-right { margin-bottom: 0.5rem; margin-left: 1.5rem; margin-top: 0.5rem; } /* BLOG **************************************/ .form-wrapper p { padding-bottom: 1rem; margin: 0; } .form-wrapper .clearfix { margin-bottom: 0.6rem; } .form-wrapper .form-control { border-radius: 0; margin-bottom: 1rem; border: 1px solid #e2e2e2; font-size: 12px; min-height: 45px; text-transform: capitalize; font-weight: lighter; } .form-wrapper textarea { padding-top: 20px; min-height: 120px !important; } .user_name { font-size: 16px; text-transform: uppercase; font-weight: 400; padding: 0; } .comments-list .media-right, .comments-list small { color: #999 !important; font-size: 11px; letter-spacing: 2px; margin-top: 5px; padding-left: 10px; text-transform: uppercase; } .comments-list .media { padding: 10px; margin-bottom: 15px; } .media-body .btn-primary { padding: 5px 10px !important; font-size: 11px !important; } .last-child { margin-bottom: 0 !important; } .comments-list img { max-width: 80px; margin-right: 30px; } .comments-list p { padding-bottom: 0; margin-bottom: 15px; } .authorbox { border: 1px dashed #e2e2e2; padding: 2rem 1rem; } .authorbox p { padding: 0; margin: 0 0 0.8rem; } .author-social a { margin-right: 10px; } .authorbox h4 { margin: 0.2rem 0 0.9rem !important; padding: 0; font-size: 21px !important; } .blog-list .blog-desc { padding-top: 0; } .blog-list .blog-desc h4 { padding-top: 0.7rem; } .blog-list .blog-meta { margin: 0.5rem 0; } .homepageblog .blog-box { background-color: #ffffff; } .homepageblog .blog-box .magnifier { top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important; } .homepageblog .blog-box img { width: 100%; } .homepageblog .post-meta { padding: 15px 1rem 0; line-height: 1; } .homepageblog .post-meta a { font-size: 13px; color: #aaa; } .homepageblog .post-meta .list-inline { padding: 0; } .homepageblog .post-meta .list-inline > li { padding-left: 0; padding-right: 0; display: inline-block; margin-right: 10px; } .homepageblog .post-meta li:last-child:after { content: "" } .homepageblog .blog-desc { border-left: 1px dashed #eaeaea; border-right: 1px dashed #eaeaea; border-bottom: 1px dashed #eaeaea; padding: 2rem 1rem 1.5rem; display: block; position: relative; } .homepageblog .blog-desc .widget-title { line-height: 1.5; padding-bottom: 1rem; } .homepageblog .blog-desc p { padding: 0; margin: 0; } .image-boxes img, .blog-media img { width: 100%; ; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .image-boxes img:hover, .blog-media:hover img { -webkit-filter: blur(1px); /* Safari 6.0 - 9.0 */ filter: blur(1px); opacity: 0.9; filter: alpha(opacity=90); /* For IE8 and earlier */ } .blog-box { margin-bottom: 2rem; background-color: #ffffff; } .blog-desc { padding: 2rem 0; } .list-style .blog-desc { padding: 0; } .list-style.blog-box { margin-bottom: 4rem; } .small-blog-box .blog-desc h4 { font-size: 24px; } .small-blog-box .blog-meta { margin: 0.7rem 0 0.6rem; } .cat-title { display: inline-block; font-size: 13px; letter-spacing: 2px; line-height: 1; margin: 0; padding: 3px 10px; text-transform: uppercase; } .blog-desc h4 { font-size: 26px; margin: 0; text-transform: uppercase; padding: 1rem 0 0; } .homepageblog .blog-desc h4 { font-size: 16px; padding: 0 0 1rem !important; } .blog-meta { display: block; font-style: italic; margin: 1rem 0; font-size: 14px; } .blog-social { text-align: center; background: #ffffff; font-weight: bold; padding: 0 3rem; position: relative; z-index: 9; margin-top: 2rem; } .blog-social hr { border-color: #e2e2e2; border-style: dashed; border-width: 1px; left: 0; margin: auto; position: absolute; right: 0; top: 17px; width: 100%; z-index: -1; } .big-social { padding-bottom: 0; } .big-social .blog-social { padding: 0; background: none; } .blog-social a, .blog-social .btn { outline: 0 none !important; text-decoration: none !important; background: #ffffff; } .socibox { width: 35px; height: 35px; margin-top: 3rem; display: inline-block; margin: 0 10px; text-align: center; padding: 0.3rem; background-color: #f9f9f9; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .socibox span { font-size: 14px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); } .socibox:hover span { color: #ffffff; } .post-bottom { border-top: 1px dashed #e2e2e2; padding-top: 1rem; } .post-share { position: relative; display: block; } .customshare { display: inline-block; position: absolute; right: 0; bottom: 1px; } .customshare .list { position: absolute; top: 0.2rem; right: 0; text-align: center; background: transparent; } .customshare .list a { position: relative; display: block; width: 35px; height: 35px; line-height: 35px; margin-top: 10px; z-index: 1000; font-weight: normal; text-align: center; background: #fff; color: #ffffff !important; } .ie9 .customshare .list strong { padding-top: 5px; height: 41px; } .customshare .list a { background: #ff3; -webkit-transition: -webkit-transform .0001s linear, background .0001s ease, color .0001s ease; -moz-transition: -moz-transform .0001s linear, background .0001s ease, color .0001s ease; -ms-transition: -ms-transform .0001s linear, background .0001s ease, color .0001s ease; -o-transition: -o-transform .0001s linear, background .0001s ease, color .0001s ease; transition: transform .0001s linear, background .0001s ease, color .0001s ease; -webkit-transform: scale(0) translate3d(0, 0, 0); -moz-transform: scale(0) translate3d(0, 0, 0); -ms-transform: scale(0) translate3d(0, 0, 0); -o-transform: scale(0) translate3d(0, 0, 0); transform: scale(0) translate3d(0, 0, 0); opacity: 0; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0); } .customshare .list a:hover { color: #fff; text-decoration: none; } .customshare .list .tw, .customshare .list .fb, .customshare .list .gp { font-size: 14px; } .customshare .list:hover strong span, .customshare .list.hover strong span { height: 135px; opacity: 1; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100); -webkit-transition-duration: .3s; -moz-transition-duration: .3s; -ms-transition-duration: .3s; -o-transition-duration: .3s; transition-duration: .3s; } .customshare .list:hover a, .customshare .list.hover a { -webkit-transform: scale(1) translate3d(0, 0, 0); -moz-transform: scale(1) translate3d(0, 0, 0); -ms-transform: scale(1) translate3d(0, 0, 0); -o-transform: scale(1) translate3d(0, 0, 0); transform: scale(1) translate3d(0, 0, 0); opacity: 1; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100); -webkit-transition-duration: .3s, .4s, .4s; -moz-transition-duration: .3s, .4s, .4s; -ms-transition-duration: .3s, .4s, .4s; -o-transition-duration: .3s, .4s, .4s; transition-duration: .3s, .4s, .4s; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); } .customshare .list:hover a .fa { transform: rotate(45deg); } .customshare .list:hover .tw, .customshare .list.hover .tw { -webkit-transition-delay: .1s, .0001s, .0001s; -moz-transition-delay: .1s, .0001s, .0001s; -ms-transition-delay: .1s, .0001s, .0001s; -o-transition-delay: .1s, .0001s, .0001s; transition-delay: .1s, .0001s, .0001s; } .customshare .list:hover .fb, .customshare .list.hover .fb { -webkit-transition-delay: .2s, .0001s, .0001s; -moz-transition-delay: .2s, .0001s, .0001s; -ms-transition-delay: .2s, .0001s, .0001s; -o-transition-delay: .2s, .0001s, .0001s; transition-delay: .2s, .0001s, .0001s; } .customshare .list:hover .gp, .customshare .list.hover .gp { -webkit-transition-delay: .3s, .0001s, .0001s; -moz-transition-delay: .3s, .0001s, .0001s; -ms-transition-delay: .3s, .0001s, .0001s; -o-transition-delay: .3s, .0001s, .0001s; transition-delay: .3s, .0001s, .0001s; } .page-link { background-color: #fff; border: 0 dashed #e2e2e2; border-radius: 0; display: block; font-size: 14px; line-height: 1; margin-left: 3px; padding: 0.6rem 0.8rem; position: relative; text-transform: capitalize; } .page-item:first-child .page-link { margin-left: 0; border-radius: 0; } .page-item:last-child .page-link { border-radius: 0; } .page-link:hover, .page-link:focus { background-color: #141414; } .content { padding-right: 2rem } .blog-grid .blog-bottom.text-center, .blog-grid .blog-desc.text-center { text-align: left !important; } .blog-grid .blog-desc h4 { font-size: 21px; } .blog-grid .blog-desc p { margin-bottom: 20px; } /* SIDEBAR WIDGETS **************************************/ .sidebar .widget { display: block; position: relative; margin-bottom: 3rem; } .sidebar .widget-title { color: #141414; } .blog-list-widget img { border: 1px solid #eaeaea; max-width: 70px; margin-right: 15px !important; } .blog-list-widget .list-group-item { padding: 0; border: 0; margin: 0; background-color: transparent; } .blog-list-widget .w-100 { margin-bottom: 1rem; display: block; } .blog-list-widget .w-100.last-item { margin-bottom: 0; } .blog-list-widget small { text-transform: uppercase; font-size: 11px; } .blog-list-widget .mb-1 { font-size: 15px; letter-spacing: 1px; line-height: 1.3; margin-bottom: 0.25rem; margin-top: 0; } .tag-widget a { background-color: transparent; border: 1px solid #cfcfcf; border-radius: 0; display: inline-block; font-size: 11px; letter-spacing: 2px; margin: 0 0.3rem 0.3rem 0; line-height: 1; padding: 0.5rem 0.6rem; text-transform: uppercase; } /* SIDEBAR WIDGETS (EXPANDED) **************************************/ div.sidewrapper.sidenav { background: #ffffff; display: block; height: 100%; overflow: auto; position: fixed; right: -35em; top: 0; width: 290px; z-index: 99999; transition: right 0.3s ease-in-out 0s; -webkit-transition: right 0.3s ease-in-out 0s; -moz-transition: right 0.3s ease-in-out 0s; -o-transition: right 0.3s ease-in-out 0s; } .sidewrapper .widget { margin-bottom: 1rem; margin-top: 2rem; padding: 1rem 2rem 0; } .nav-expanded div.sidewrapper { right: 0; margin-right: 0; transition: margin-left 0.4s ease-in-out 0s; -webkit-transition: right 0.4s ease-in-out 0s; -moz-transition: right 0.4s ease-in-out 0s; -o-transition: margin-left 0.4s ease-in-out 0s; } #nav-close { border: 1px solid #e2e2e2; border-radius: 50%; display: inline-block; font-size: 13px; height: 30px; line-height: 27px; padding-right: 0; position: relative; right: 30px; text-align: center; top: 17px; width: 30px; } .widget-title.dark-color, .sidewrapper .widget-title { color: #141414; } .category-widget ul { margin: 0; padding: 0; list-style: none; } .category-widget li { padding: 0.3rem; text-transform: capitalize; font-size: 14px; border-bottom: 1px dashed #e2e2e2; } .category-widget li:first-child { border-top: 1px dashed #e2e2e2; } /* SHOPPING **************************************/ .shop-box { margin-bottom: 2rem; position: relative; overflow: hidden; } .onsale { position: absolute; top: 1rem; z-index: 11; right: 1rem; width: 50px; height: 50px; line-height: 50px; border-radius: 50%; text-align: center; background-color: #ddd; } .shop-media { border: 1px solid #e2e2e2; position: relative; } .shop-details h4 { font-size: 15px; margin: 0; padding: 25px 0 0; text-transform: uppercase; } .shop-details h4 a { text-decoration: none !important; } .shop-title span { line-height: 1; margin: 0 3px; font-size: 14px; font-weight: 400; } .old-price { color: #c4c4c4; text-decoration: line-through; } .shop-buttons { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; } .shop-buttons i { padding-right: 10px; } .shop-title { display: block; margin-bottom: 10px; } .rating i { font-size: 11px; } .rating p { padding-bottom: 0; margin-bottom: 0; } .shop-desc small, .shop-desc h3 { padding: 0 0 1rem; margin: 0; } .shop-desc h3 { font-size: 24px; padding: 0 0 0.5rem; text-transform: uppercase; } hr.invis { border: 0; } hr.invis1 { margin: 3rem 0; border: 0; } hr.dashedhr { margin: 2rem 0; border-color: #e2e2e2; border-style: dashed; } .shop-desc small { font-size: 20px; display: inline-block; } .shop-desc small.old-price { font-size: 15px; margin-right: 10px; } .shop-meta { display: block; position: relative; margin: 30px 0; padding: 30px 0; border-top: 1px dashed #e2e2e2; border-bottom: 1px dashed #e2e2e2; } .shop-meta ul { margin-bottom: 0; padding-bottom: 0; margin-top: 20px; } .single-shop-media .image-wrap a { position: absolute; left: 0; right: 0; top: 50%; margin: -1rem auto; color: #ffffff; text-align: center; } .shop-extra { margin-top: 3rem; padding: 3rem 3rem 2rem; border: 1px solid #eaeaea; } .shop-extra .nav-tabs { border: 0 !important; padding: 0; box-shadow: none; } .single-shop-media img { border: 1px solid #eaeaea; } .shop-extra .nav-tabs a { background-color: #ffffff !important; border: 0 !important; border-bottom: 1px solid transparent !important; border-radius: 0; outline: none !important; font-size: 17px; line-height: 1.42857; text-transform: uppercase; padding: 10px 0 0; box-shadow: none !important; margin-right: 2rem; } .shop-extra .tab-content { padding: 1.5rem 0 0; } .shop-extra strong { color: #000000; } .shop-extra .tab-content h3 { font-size: 21px; padding: 0 0 1rem; margin: 0; } .related-products { display: block; margin-top: 80px; } .related-products .text-widget h3 { font-size: 20px; padding-bottom: 10px; } .rating i { color: #f4af0b; display: inline-block; line-height: 1; margin-bottom: 0; padding-bottom: 0; } .custom-select { border: 1px solid #eaeaea; border-radius: 0; color: #464a4c; display: inline-block; font-size: 12px; font-weight: lighter; line-height: 1.25; max-width: 100%; min-height: 45px; outline: medium none; width: 100%; } .account-details .list-group-item { border: 1px solid #eaeaea; border-radius: 0 !important; font-weight: 400; font-size: 14px; line-height: 1; text-transform: uppercase; } .shop-table .btn { margin-top: 1.5rem; } .shop-table .qty-changer { max-width: 80px !important; } .shop-table .form-group { display: block; margin: -14px auto; position: absolute; text-align: center; width: 75px; } .shop-table .text-left.table td { text-align: left !important; } .shop-table img { max-width: 100px; } .table-bordered thead td, .table-bordered thead th { border: 0 none; } .shop-table .table td { text-align: center; vertical-align: middle; } .shop-table .table th { color: #121212; font-weight: 400; text-align: center; text-transform: uppercase; vertical-align: middle; } .couponcode .btn { margin-top: 10px !important; } .payment-methods { background-color: #f2f2f2; padding: 2rem; } .payment-methods .form-check { padding: 0.5rem 0; border-bottom: 1px dashed #dbdbdb; } .shop-table .text-left.table td .form-check-input, .payment-methods .form-check-input { margin-right: 10px; } /* RESPONSIVE **************************************/ @media (min-width: 1199px) { .contact-details ul li { padding: 1.5rem 0.5rem; } } @media (min-width: 992px) { .mobile-menu { display: none; } } @media (max-width: 992px) { .content { padding: 1rem } .normal-header .navbar-toggler-right { top: -3px; } .normal-header .fixed-top { position: relative !important; } .bg-inverse { background-color: #141414 !important; } .m30 { margin: 1rem 0; } .fixed-top { padding: 1rem; } .mobile-menu { display: block; } } @media (max-width: 600px) { .shop-extra { padding: 2rem; } .shop-extra .nav-item, .shop-extra .nav-tabs, .shop-extra .nav-tabs li { float: none !important; display: block !important; width: 100% !important; } .contact-details ul li { width: 100% !important; float: none !important; display: block; border: 0 !important; } .tagline-message h3 { font-size: 16px; } } @media (min-width: 992px) { .header .dropdown-menu { border: 0; margin-top: 25px; } .header .navbar-nav .has-submenu { position: relative; } .header .navbar-nav .has-submenu:hover > ul { visibility: visible; opacity: 1; top: 100%; } .header .navbar-nav .has-submenu:hover > ul li ul { margin-top: 0px; } .header .navbar-nav .has-submenu ul { -webkit-transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out; -moz-transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out; -o-transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out; transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out; } .header .navbar-nav .has-submenu .dropdown-menu { min-width: 180px; padding: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .header .navbar-nav .has-submenu > ul { position: absolute; top: 130%; visibility: hidden; display: block; opacity: 0; left: 0; } .header .navbar-nav .has-submenu > ul.start-right { right: 0; left: auto; } .header .navbar-nav .has-submenu > ul li { position: relative; } .header .navbar-nav .has-submenu > ul li:hover > ul { visibility: visible; opacity: 1; left: 100%; } .header .navbar-nav .has-submenu > ul li:hover > ul.show-right { right: 100%; } .header .navbar-nav .has-submenu > ul li ul { position: absolute; top: 0; visibility: hidden; display: block; opacity: 0; left: 130%; } .header .navbar-nav .has-submenu > ul li ul.show-right { right: 130%; left: auto; } }