Nav-Appaiya
1/3/2017 - 2:14 PM
gistfile1.txt
/** custom styles Exact templates **/
/* ------------------------
GENERAL
------------------------ */
body {font-family:Arial, Helvetica, sans-serif; color:#808d96; line-height:22px;}
/* TYPOGRAPHY */
h1, h2, h3, h4, h5, h6 {font-family: "alwyn-new-web", sans-serif!important;}
h2 {color:#e1141d;}
h3 {margin:0 0 20px;}
h3, h4 {color:#253b49;}
.subtitle { font-size: 18px; color: #808d96;}
/* BUTTONS */
.btn {border:none;}
.btn-info {background: #3a98fe;color: #ffffff;}
.btn-default {background-color: #e7ebee; color: #565656;}
/* RESET STYLES */
.sp-module {margin-top:0!important;}
#sp-component ul {list-style-type:none; padding:0;}
#sp-component ul li {padding:5px 0 5px 20px; background-image:url('http://www.exact.com/nl/exact-online/templates/exact/i/bg/bullet.png'); background-position:left 8px; background-repeat:no-repeat;}
/* ------------------------
NAV
------------------------ */
#sp-header {height:auto;}
h1.logo {width: 170px; float:left; height:auto!important; margin:0 0 -20px 10px!important; -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease; -o-transition: all 0.1s ease;transition: all 0.1s ease;}
h1.logo img {width:100%!important;}
#sp-header ul li {border:none!important; position:relative;}
#sp-header ul li a {padding:20px 15px; font-size:14px; text-transform:none; line-height:20px; color:#565656;}
#sp-header ul li a:before {display:none!important;}
#sp-header ul li a:hover {background-color: #e7ebee;}
#offcanvas-toggler {padding:18px 10px; line-height:inherit; color:#818181; margin:0;}
#offcanvas-toggler i{color:#818181;}
#sp-header ul li ul {display:none; position:absolute; top:60px; left:0;}
#sp-header ul li:hover ul {display:block;}
#sp-header ul li ul li a { background-color: #e7ebee; padding:10px 15px;}
#sp-header ul li ul li a:hover {background-color: #d1d6dc;}
#sp-header .navbar-right li a.btn {border-radius:0;}
#sp-header .navbar-right li a.btn-default {padding:15px; margin:5px;}
#sp-header .navbar-right li a.btn-info {padding: 10px 15px!important; line-height: 15px; margin: 5px 5px 5px 0;}
#sp-header .navbar-right li a.btn small {color:rgba(255,255,255,0.6);}
#sp-header.menu-fixed li a.btn {margin:0!important;}
#sp-header.menu-fixed ul li a {padding:15px!important;}
#sp-header.menu-fixed .navbar-right li a.btn-default {padding:15.5px 15px!important;}
#sp-header.menu-fixed #offcanvas-toggler {padding:13px 10px;}
#sp-header.menu-fixed h1.logo {width:100px;}
.slide-top-menu .offcanvas-menu {background-color:#FFF;}
.offcanvas-menu .offcanvas-inner .sp-module ul > li a{color:#565656; text-transform:none;}
.offcanvas-menu .offcanvas-inner .sp-module ul > li a:before {display:none;}
.offcanvas-menu .offcanvas-inner .sp-module ul > li a:hover {background-color: #e7ebee;}
.close-offcanvas {color:#565656; border-color:#565656;}
/* SPLIT HEADER HOMEPAGE */
.split-header .sppb-col-md-6, .split-header .sppb-column-addons, .split-header .sppb-column {position:static!important;}
.split-header .sppb-col-md-6 .col-split-header:before { transition: all 0.2s ease; content:""; display:block; position:absolute; width:50%; left:0; height:100%; background-color:rgba(0,0,0,0.8); pointer-events:none;}
.split-header .sppb-col-md-6 .col-split-header.col-right:before {left:50%;}
.split-header .sppb-col-md-6.active .col-split-header:before {background-color: transparent;}
.split-header .container {position:absolute!important; left:0; right:0; top:0; pointer-events:none;}
.split-header .container * {pointer-events:auto;}
.split-header .container .text-center {width:50%; text-align:left; padding-top:80px;}
.split-header .container-right .text-center {float:right; padding-left:30px;}
.split-header .sppb-column {height:500px; background-size:130%!important; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;}
.split-header .active .sppb-column {background-size:150%!important;}
.split-header h2 {width:75%; color:#FFF;}
.split-header p {font-size:18px;}
.split-header a {margin:10px 0; border-radius:0; background-color:transparent; border:1px solid #FFF; color:#FFF;}
.split-header .active a {background-color:#FFF; color:#808d96;}
.split-header a i {float:right; margin:3px 5px 3px 10px; transition: all 0.2s ease;}
.split-header a:hover i {margin-left:15px; margin-right:0px;}
/* TESTIMONIALS BOTTOM & QUOTES */
.bottom-testimonials {margin-top:0!important;}
.bottom-testimonials .sppb-addon {height:270px; position:relative;}
.bottom-testimonials .sppb-addon:before {content:""; position:absolute; top:0; left:0; width:100%; height:100%;background-color:transparent; pointer-events:none; transition: all 0.2s ease;}
.bottom-testimonials .testimonial:hover .sppb-addon:before {background-color:rgba(0,0,0,0.5);}
.bottom-testimonials .sppb-addon-content {position:absolute; bottom:0; left:0; width:100%; padding:15px;}
.bottom-testimonials .sppb-column-addons > div {background-size:120%!important; transition: all 0.3s ease; background-position:center!important;}
.bottom-testimonials .testimonial:hover .sppb-column-addons > div {background-size:130%!important;}
.bottom-testimonials .quote {font-size: 16px; font-style: italic; line-height:20px;}
.bottom-testimonials .quote:before, .bottom-testimonials .quote:after {font-size:30px; color:#DDD; line-height:20px;}
.bottom-testimonials .quote:before {content:open-quote;}
.bottom-testimonials .quote:after {content:close-quote;}
.bottom-testimonials h4 {color:#FFF;}
.bottom-testimonials h5 {font-family:Arial, Helvetica, sans-serif;}
/* CONTACT BAR */
.contact-bar span {width:auto; height:auto; font-size:26px; margin:-3px 5px 0 0; position:relative; top:3px;}
.contact-bar .icon-call {margin-right:0;}
/* HOME PRODUCT SERVICES */
.home-services a {color:#808d96; position:relative; z-index:1; display:block; padding:0 30px 30px;}
.home-services a:hover:after {content: ""; position: absolute; height: 220px; width: 100%; left: 0; top: 80px; background-color: #e7ebee; border-radius: 10px; z-index: -1;}
.home-services a:hover {color:#526B77;}
.home-services a:hover .product-icon {color:#556A75;}
.home-services .product-icon {color:#808d96; background-color:#FFF;}
.home-services .product-icon {color: #bbc3c8; background-color: #FFF; height: 150px; width: 150px; margin: 0 auto; display: block; border-radius: 50%; text-align: center;}
.home-services .product-icon * {font-size:0!important; width:auto; height:auto; margin-top:40px;}
.home-services .product-icon *:before {font-size:70px;}
.price-block {margin-top:45px;}
.price-block small { margin-bottom: 0; color: #586A74; font-family: Alwyn new, Alwyn, Helvetica, Arial, sans-serif;}
.price-block .price {font-size: 50px;color: #586A74;margin-top: 0;font-family: Alwyn new, Alwyn, Helvetica, Arial, sans-serif;line-height: 60px;}
.price-block .price small {font-size: 16px;}
.price-block .sppb-btn {border-color: #586A74; color: #FFFFFF; background: #586A74;}
.price-block .sppb-btn:hover {background-color: #3a98fe; color: #FFF;}
/* FOOTER */
.footer {font-size:12px; line-height:20px;}
.footer a {color:#FFF;}
.footer h3 {font-size:1.4em!important; color:#FFF;}
.footer ul li {float:left; width:calc(50% - 10px); margin-right:10px; border-color:rgba(255,255,255,0.3); padding:5px 0;}
.footer ul li a {display:block;}
.footer .socials a {display:inline-block; margin:0 5px 5px 0;}
.footer .btn-default {background: #fff; color: #566771; margin:0 0 10px;}
/* COPYRIGHT */
.copyright ul {margin-left:2.5%;}
.copyright ul li {border:none; font-size:11px;}
.copyright ul li:first-child a {border-right: 1px solid #808d96;}
.copyright ul li a:before {display:none;}
.copyright ul li a {text-decoration: none; padding: 0 1em; color: #8f9ba2!important; line-height:20px;}
@media(min-width:992px){
.offcanvas-menu .offcanvas-inner .sp-module:last-child {padding:60px 0 0;}
.footer .sp-column {padding:0 10%;}
}
@media(min-width:992px) and (max-width:1199px){
.price-block .price {font-size: 46px!important;}
}
@media(max-width:1400px){
.bottom-testimonials .sppb-column-addons > div {background-size:140%!important;}
.bottom-testimonials .testimonial:hover .sppb-column-addons > div {background-size:150%!important;}
}
@media(max-width:1199px){
.split-header .sppb-column {background-size:160%!important;}
.split-header .active .sppb-column {background-size:180%!important;}
.bottom-testimonials .sppb-addon {height:200px;}
.bottom-testimonials .quote {font-size:12px!important; line-height:15px!important;}
.bottom-testimonials .quote:before, .bottom-testimonials .quote:after {display:none!important;}
}
@media(max-width:991px){
.offcanvas-menu .mobile-mainmenu {padding:60px 0 0!important; margin:0!important;}
.navbar-right {text-align:right;}
.navbar-right li {display:inline-block!important; vertical-align:top;}
#sp-menu {text-align:right;}
#sp-menu .sp-column {height:60px;}
#sp-menu .sp-module {display:inline-block;}
.sp-megamenu-wrapper {float:right;}
.footer .sp-column {margin:0 0 30px;}
.sppb-equalize-columns .sppb-row{display:block!important;}
.split-header .sppb-col-md-6, .split-header .sppb-column-addons, .split-header .sppb-column {position:relative!important;}
.split-header .sppb-col-md-6 .col-split-header:before {width:100%; left:0!important;}
.split-header .container .text-center {float:left!important; width:100%!important; padding-left:0;}
.split-header .sppb-column {height:300px;}
.split-header h2 {margin-top:0!important;}
.home-video {margin-bottom:30px;}
.price-block {display: block; padding: 20px; margin: 20px 0; background-color: #f5f6f8;}
}
@media(min-width:480px) and (max-width:991px){
.testimonials .sppb-col-md-3 {width:50%; float:left;}
.bottom-testimonials .sppb-addon {height:250px;}
}
@media(min-width:768px) and (max-width:991px){
.bottom-testimonials .sppb-addon {height:300px;}
}
@media(min-width:480px) and (max-width:767px){
.bottom-testimonials .sppb-column-addons > div {background-size:160%!important;}
.bottom-testimonials .testimonial:hover .sppb-column-addons > div {background-size:170%!important;}
}
@media(max-width:767px){
.logo img {max-width:100px;}
#sp-bottom {padding:30px 15px;}
}
@media(max-width:480px){
.bottom-testimonials .sppb-addon {height:250px;}
.bottom-testimonials .quote {font-size:16px!important; line-height:20px!important;}
.split-header .container .text-center {padding-top:30px;}
#sp-header .navbar-right li a.btn-default {padding:10px; font-size:12px; margin-right:0;}
#sp-header.menu-fixed .navbar-right li a.btn-default {padding:10px!important;}
#sp-header .navbar-right li a.btn-info {padding:5px 10px!important;}
#sp-header .navbar-right {white-space:nowrap;}
#sp-menu .sp-column{height:40px!important;}
#sp-header.menu-fixed #offcanvas-toggler, #offcanvas-toggler {padding:13px 10px!important;}
}