.clear{ clear:both;} body{ position:relative; transition:all .6s .2s ease-in-out; left:0; overflow-x:hidden; } header{ width:100%; height:auto; margin:0; padding:0px 0px 0px; float:left; position:relative; z-index:100; background: #2482c0; } header.sticky{ position:fixed; top:0; left:0; width:100%;} header.sticky .menu li a{ padding:10px 0;} header.sticky .logo{ margin:0px 0px 0px 70px;} header.sticky .logo img{ width:120px; margin:7px 0px 0px;} header.sticky .button{ margin:10px 0 0 0;} header.sticky .button a{ font-size:10px; padding:3px;} header .logo{ float:left; margin:1px 30px; } header .menu{ float:right; margin:0 0 0 24px; padding:0;} header .menu li{ float:left; margin:0 20px 0 0; padding:0; list-style:none; position:relative;} header .menu li .sub-menu{ width:212px; height:auto; background:#000; position:absolute; top:86px; left:-14px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); margin:0; padding:0; opacity:0; visibility:hidden; transition:all .4s ease-in-out; } header .menu li:hover .sub-menu{ opacity:1; visibility:visible;} header .menu li .sub-menu li{ width:100%; height:auto; margin:0; padding:0; float: left;} header .menu li .sub-menu li a{ color:#fff; margin:0; padding:6px 6px 6px 15px; float:left; text-transform:capitalize;} header .menu li:last-child{ margin:0;} header .menu li a{ float:left; color:#fff; margin:0; padding:38px 30px; text-decoration:none; text-transform:uppercase; font-size:14px; font-weight:400} header .button{ float:right; margin:31px 0 0 0;} header .button a{ margin:0; padding:8px 8px; background:#cf1509; color:#fff; text-transform:uppercase; font-size:12px; text-decoration:none; float:left; position:relative; transition:all .6s ease-in-out; border-radius:3px;} header .button a span{ position:relative; z-index:100;} header .button a:after{ width:100%; height:100%; background:#fff; content:""; position:absolute; top:0; left:0; opacity:0; transform:scale(0); transition:all .6s ease-in-out; border-radius:3px;} header .button a:hover{ color:#000;} header .button a:hover:after{ opacity:1; transform:scale(1);} .active .animated-item-1 {-webkit-animation-name: fadeInUp;-moz-animation-name: fadeInUp; -o-animation-name: fadeInUp;-ms-animation-name: fadeInUp;animation-name: fadeInUp;} .active .animated-item-2 {-webkit-animation-name: fadeInDown;-moz-animation-name: fadeInDown;-o-animation-name: fadeInDown;-ms-animation-name: fadeInDown;animation-name: fadeInDown;} .active .animated-item-3 {-webkit-animation-name: fadeInUpBig;-moz-animation-name: fadeInUpBig;-o-animation-name: fadeInUpBig;-ms-animation-name: fadeInUpBig;animation-name: fadeInUpBig;} .active .animated-item-4 {-webkit-animation-name: fadeInLeft;-moz-animation-name: fadeInLeft;-o-animation-name: fadeInLeft;-ms-animation-name: fadeInLeft;animation-name: fadeInLeft;} .active .animated-item-5 {-webkit-animation-name: fadeInRight;-moz-animation-name: fadeInRight;-o-animation-name: fadeInRight;-ms-animation-name: fadeInRight;animation-name: fadeInRight;} .active .animated-item-6 {-webkit-animation-name: flipInX;-moz-animation-name: flipInX;-o-animation-name: flipInX; -ms-animation-name: flipInX;animation-name: flipInX;} .active .animated-item-7 {-webkit-animation-name: fadeIn;-moz-animation-name: fadeIn;-o-animation-name: fadeIn;-ms-animation-name: fadeIn;animation-name: fadeIn;} .carousel-inner .item .text-details {opacity: 0;-webkit-transition: opacity ease-in-out 1s;-moz-transition: opacity ease-in-out 1s;-o-transition: opacity ease-in-out 1s;transition: opacity ease-in-out 1s;} .carousel-inner .item.active .text-details {opacity: 1;-webkit-transition: opacity ease-in-out 1s;-moz-transition: opacity ease-in-out 1s;-o-transition: opacity ease-in-out 1s;transition: opacity ease-in-out 1s;z-index: 1;} .active .animated-item-1.h2{ animation-delay:2s; -webkit-animation-delay:2s;} .mobile-menu{ width:220px; margin:0; padding:0; background:#000; position:fixed; top:0; left:0; height:100%; overflow:auto; z-index:1000; padding:30px 15px 0; display:none; left:-100%; transition:all .6s ease-in-out; opacity:0;} .mobile-menu .menu{ width:100%; height:auto; margin:0 0 40px 0; padding:0; float:left;} .mobile-menu .menu li{ width:100%; height:auto; margin:0; padding:0; float:left; list-style:none; position:relative;} .mobile-menu .menu li a{ margin:0; padding:8px; color:#fff; text-transform:capitalize; font-size:13px; text-decoration:none; position:relative; width:100%; float:left; border-radius:3px; transition:all .4s ease-in-out; position:relative; } .mobile-menu .menu li a:hover{ background:#2b2b2b;} .mobile-menu .menu li .plus{ position:absolute; top:3px; right:8px; cursor:pointer; } .mobile-menu .menu li .plus:before{color:#fff; position:absolute; top:0; right:0; font-size:20px; font-weight:bold; content:"+"} .mobile-menu .menu li .minus{ position:absolute; top:-3px; right:8px; cursor:pointer; } .mobile-menu .menu li .minus:before{color:#fff; position:absolute; top:0; right:0; font-size:25px; font-weight:bold; content:"-"} .mobile-menu .menu li .sub-menu{ width:100%; height:auto; margin:0; padding:0 0 0 20px; position:relative; top:0;} .mobile-menu .menu li .sub-menu li a{ background:none !important;} .body-overalay{ width:100%; height:100%; position:fixed; background:rgba(0,0,0,.8); top:0; left:0; z-index:100; opacity:0; visibility:hidden; transition:all .6s ease-in-out;} .list-icon{ margin:0; padding:0; cursor:pointer; color:#fff; font-size:16px; margin:38px 0 0 0; padding:0; display:none; float:left;} .welcome-section{ width:100%; height:auto; margin:0 0 0 0; padding:120px 0; float:left; text-align:center;} .welcome-section h1{ font-size:36px; margin:0 0 30px 0; padding:0 0 30px 0; font-weight:600; display:inline-block; position:relative; color:#3a4557;} .welcome-section h1:after{ width:60%; height:1px; position:absolute; bottom:0; left:0; right:0; margin:auto; content:""; background:#cf1509;} .welcome-section p{ font-size:16px; line-height:24px; width:40%; display:inline-block; color:#b6bec9;} .all-heading-back{ width:100%; height:auto; margin:0 0 0 0; padding:0px 0; float:left; text-align:center;} .all-heading-back h2{ font-size:36px; margin:0 0 30px 0; padding:0 0 30px 0; font-weight:600; display:inline-block; position:relative; color:#fff; text-transform:capitalize;} .all-heading-back h2:after{ width:60%; height:1px; position:absolute; bottom:0; left:0; right:0; margin:auto; content:""; background:#fff;} .all-heading-back p{ font-size:16px; line-height:24px; width:40%; display:inline-block; color:#fff;} .all-heading-back.tanent{ position:relative;} .all-heading-back.tanent h2{color:#fff;} .all-heading-back.tanent p{ color:#b6bec9;} .all-heading-back.tanent h2:after{ background:#fff;} /*.all-heading-back.tanent:after{ background:url(../images/strip.png) no-repeat; width:126px; height:67px; position:absolute; bottom:-65px; left:0; right:0; margin:auto; content:"";}*/ .our-services-back{ width:100%; height:auto; margin:0; padding:0; float:left; text-align:center;} .our-services-back .bg{ width:100%; height:auto; margin:0; padding:0 0 60px 0; float:left; background-repeat:no-repeat; background-size:cover; background-position:top center; background-attachment:fixed;} .our-services-back .services-list{ width:100%; height:auto; margin:0; padding:0; float:left;} .our-services-back .services-list li{ width:33.33333%; min-height:376px; margin:0; padding:80px 20px 0; float:left; background:#fff; position:relative; border-right:#f1f1f1 1px solid; text-align:center; list-style:none;} .our-services-back .services-list li .icon{ display:inline-block; margin:0 0 30px 0} .our-services-back .services-list li h3{ color:#000; font-weight:600; margin:0 0 20px 0; padding:0; font-size:20px; text-transform:capitalize;} .our-services-back .services-list li p{ color:#333; font-size:14px; line-height:24px; width:80%; display:inline-block;} .our-services-back .services-list li p a{ color:#cf1509;} .max-back{ width:50%; min-height:auto; margin:60px 0 0 0; padding:40px; background:#fff; position:relative; border-right:#f1f1f1 1px solid; text-align:center; list-style:none; display:inline-block;} .max-back h5{ color:#000; margin:0; padding:0; font-size:20px; text-transform:capitalize; line-height:32px;} .max-back h5 a{ font-weight:700; color: #cf1509; font-size:25px} .max-back h5 span{ font-size:32px; color:#000; font-weight:700; letter-spacing:4px; text-transform:uppercase; position:relative; padding:0 0 10px 0;} .max-back h5 span:before{ width:50%; height:1px; background:#cf1509; position:absolute; bottom:0; left:0; margin:auto; content:"";} .max-back h5 span:after{ width:20%; height:1px; background:#000; position:absolute; bottom:-3px; left:0; margin:auto; content:"";} .max-back .or{ font-size:60px; margin:60px 0 60px 0; padding:0; text-transform:uppercase; font-weight:700;} .home-owner-back{ width:100%; height:auto; margin:0; padding:0; float:left;} .home-owner-back .bg{ width:100%; height:auto; margin:0; padding:0 0 60px 0; float:left; background-repeat:no-repeat; background-size:cover; background-position:top center; background-attachment:fixed;} .home-owner-back .home-owner-list{ width:100%; height:auto; margin:0; padding:0; float:left;} .home-owner-back .home-owner-list .portion{ width:100%; height:auto; margin:0; padding:0; float:left; background:#fff;} .home-owner-back .home-owner-list .portion img{ width:100%; display:block; margin:0; padding:0; float:left; border-bottom:#cf1509 3px solid;} .home-owner-back .home-owner-list .portion .content-back{ width:100%; height:auto; margin:0; padding:20px; text-align:left; float:left;} .home-owner-back .home-owner-list .portion .content-back h3{ color:#394659; font-size:20px; margin:0 0 20px; padding:0; font-weight:600; text-transform:capitalize;} .home-owner-back .home-owner-list .portion .content-back h3 span{color:#a9b5c5; font-size:14px;} .home-owner-back .home-owner-list .portion .content-back .contact-details{ width:100%; height:auto; margin:0; padding:0; float:left;} .home-owner-back .home-owner-list .portion .content-back .contact-details li{ width:100%; height:auto; margin:0 0 10px 0; padding:0; float:left; list-style:none;} .home-owner-back .home-owner-list .portion .content-back .contact-details li a{ color:#a6b3bb; font-size:15px; text-decoration:none;} .home-owner-back .home-owner-list .portion .content-back .contact-details li span{ width:28px; margin:0; padding:0; font-weight:normal; font-size:20px;} .home-owner-back .home-owner-list .portion .content-back .social-back{height:auto; margin:9px 0 0 0; padding:0; float:left;} .home-owner-back .home-owner-list .portion .content-back .social-back li{ margin:0 10px 0 0; padding:0; float:left; list-style:none;} .home-owner-back .home-owner-list .portion .content-back .social-back li a{ color:#a6b3bb; font-size:15px; text-decoration:none;} .home-owner-back .home-owner-list .portion .content-back .button{ float:right;} .home-owner-back .home-owner-list .portion .content-back .button a{ margin:0; padding:10px 20px; background:#000; color:#fff; text-transform:uppercase; font-size:14px; text-decoration:none; float:left; position:relative; transition:all .6s ease-in-out; border-radius:3px;} .home-owner-back .home-owner-list .portion .content-back .button a span{ position:relative; z-index:100;} .home-owner-back .home-owner-list .portion .content-back .button a:after{ width:100%; height:100%; background:#cf1509; content:""; position:absolute; top:0; left:0; opacity:0; transform:scale(0); transition:all .6s ease-in-out; border-radius:3px;} .home-owner-back .home-owner-list .portion .content-back .button a:hover{ color:#fff;} .home-owner-back .home-owner-list .portion .content-back .button a:hover:after{ opacity:1; transform:scale(1);} .tanent-listing-back{ width:100%; height:auto; margin:0; padding:115px 0 30px 0; float:left;} .premium-listing-back{ width:100%; height:auto; margin:0; padding:112px 0 0 0; float:left;} .premium-listing-back .portion{ width:100%; height:auto; margin:0 0 30px 0; padding:0; float:left; background:#f7f7f7;} .premium-listing-back .portion .image-back{ width:100%; height:auto; margin:0; padding:0; float:left; position:relative;} .premium-listing-back .portion .image-back img{ width:100%; height:auto; margin:0; padding:0; float:left; object-fit:cover;} .premium-listing-back .portion .image-back .price{ position:absolute; bottom:20px; left:20px; color:#fff; font-weight:700; font-size:16px; background:#000; padding:5px 10px; border-radius:2px;} .premium-listing-back .portion .content-back{ width:100%; height:auto; margin:0; padding:20px 15px;} .premium-listing-back .portion h3{ color:#000; margin:0; padding:0; font-size:18px; font-weight:700; text-transform:capitalize;} .premium-listing-back .portion h3 span{ color:#62748c; margin:0; padding:0; font-size:15px; font-weight:normal;} .premium-listing-back .portion .list-iconback{ margin:20px 0 0 0; padding:0; float:left; border:#ddd 1px solid; border-left:none; border-bottom:none;} .premium-listing-back .portion .list-iconback li{ float:left; list-style:none; margin:0 0 0 0; padding:5px 5px 5px 30px; font-size:15px; text-transform:capitalize; position:relative; width:50%; border-left:#ddd 1px solid; border-bottom:#ddd 1px solid;} .premium-listing-back .portion .list-iconback li img{ position:absolute; top:7px; left:4px;} .premium-listing-back .portion .button{ float:left; margin:10px 0;} .premium-listing-back .portion .button a{ margin:0; padding:10px 20px; background:#000; color:#fff; text-transform:uppercase; font-size:14px; text-decoration:none; float:left; position:relative; transition:all .6s ease-in-out; border-radius:3px;} .premium-listing-back .portion .button a span{ position:relative; z-index:100;} .premium-listing-back .portion .button a:after{ width:100%; height:100%; background:#cf1509; content:""; position:absolute; top:0; left:0; opacity:0; transform:scale(0); transition:all .6s ease-in-out; border-radius:3px;} .premium-listing-back .portion .button a:hover{ color:#fff;} .premium-listing-back .portion .button a:hover:after{ opacity:1; transform:scale(1);} .premium-listing-back .portion .contact-back{ width:100%; height:411px; float:left; background:#fff; margin:0; padding:20px; border:#ddd 1px solid;} .premium-listing-back .portion .contact-back h5{ color:#000; margin:0; padding:0; font-size:20px; text-transform:capitalize; line-height:32px;} .premium-listing-back .portion .contact-back h5 a{ font-weight:700; color: #cf1509; font-size:25px} .premium-listing-back .portion .contact-back h5 span{ font-size:32px; color:#000; font-weight:700; letter-spacing:4px; text-transform:uppercase; position:relative; padding:0 0 10px 0;} .premium-listing-back .portion .contact-back h5 span:before{ width:50%; height:1px; background:#cf1509; position:absolute; bottom:0; left:0; margin:auto; content:"";} .premium-listing-back .portion .contact-back h5 span:after{ width:20%; height:1px; background:#000; position:absolute; bottom:-3px; left:0; margin:auto; content:"";} .premium-listing-back .portion .contact-back .or{ font-size:60px; margin:60px 0 60px 0; padding:0; text-transform:uppercase; font-weight:700;} .premium-listing-back .button{ text-align:center; width:100%; margin:0 0 30px 0} .premium-listing-back .button a{ margin:0; padding:14px 50px; background:#000; color:#fff; text-transform:uppercase; font-size:16px; text-decoration:none;position:relative; transition:all .6s ease-in-out; border-radius:3px; display:inline-block;} .premium-listing-back .button a span{ position:relative; z-index:100;} .premium-listing-back .button a:after{ width:100%; height:100%; background:#cf1509; content:""; position:absolute; top:0; left:0; opacity:0; transform:scale(0); transition:all .6s ease-in-out; border-radius:3px;} .premium-listing-back .button a:hover{ color:#fff;} .premium-listing-back .button a:hover:after{ opacity:1; transform:scale(1);} .premium-listing-back .button a i{ margin:0 10px 0 0; font-size:20px;} .onscroll-back{ width:100%; height:auto; margin:0; padding:0; float:left;} .onscroll-back li{ float:left; margin:0; padding:0; float:left; list-style:none; width:25%;} .onscroll-back li .portion{ width:100%; height:auto; margin:0; padding:0; float:left; } .onscroll-back li .portion .bg{ width:100%; height:284px; margin:0; padding:0; float:left; background-size:cover; background-position:top center; background-repeat:no-repeat; position:relative; text-align:center;} .onscroll-back li .portion .bg .ovarlay{ width:100%; height:100%; position:absolute; top:0; left:0; padding:15px;} .onscroll-back li .portion .bg .ovarlay2{ width:100%; height:100%; position:absolute; top:0; left:0; background:rgba(0,0,0,.8); padding:15px;} .onscroll-back li .portion .bg .text{ font-size:18px; text-transform:capitalize; color:#fff; font-weight:700; text-transform:uppercase; width:100%; text-align:center; margin:0; padding:0;} .onscroll-back li .portion .icon-back{ width:150px; height:150px; background:rgba(0,0,0,.3); display:inline-block; margin:0 0 15px 0; padding:0; border:#333 1px solid; position:relative; border-radius:100%;} .onscroll-back li .portion .icon-back img{ position:absolute; top:0; left:0; right:0; bottom:0; margin: auto;} .satisfied-home-back{ width:100%; height: auto; margin:0; padding:112px 0 30px 0; float:left;} .satisfied-home-back .portion{ width:100%; min-height:240px; margin:0 0 30px 0; padding:20px; float:left; background:#8d4696;} .satisfied-home-back .portion .left{ width:100%; height:auto; margin:0; padding:0; float:left; text-align:center;} .satisfied-home-back .portion .left .image-back img{ width:100px; height:100px; border-radius:100%; border:#fff 5px solid; position:relative; object-fit:cover} .satisfied-home-back .portion .left .image-back{ display:inline-block; position:relative; margin:0 0 10px 0;} .satisfied-home-back .portion .left .image-back:after{ width:30%; height:2px; position:absolute; bottom:0; left:0; right:0; margin:auto; background:#fff; content:"";} .satisfied-home-back .portion .left h4{ font-size:18px; text-transform:capitalize; margin:0; padding:0; color:#fff; font-weight:600;} .satisfied-home-back .portion .left h4 span{ font-size:14px; text-transform:uppercase; color:#c990d1;} .satisfied-home-back .portion .left .social{ display:inline-block; margin:20px 0 0 0; padding:0;} .satisfied-home-back .portion .left .social li{ float:left; margin:0 10px 0 0; padding:0; list-style:none;} .satisfied-home-back .portion .left .social li:last-child{ margin:0;} .satisfied-home-back .portion .left .social li a{ color:#fff; text-decoration:none; font-size:16px;} .satisfied-home-back .portion .right{ width:100%; height:auto; margin:0; padding:10px 0 0 0; float:left; text-align:center;} .satisfied-home-back .portion .right p{ font-size:14px; text-align:left; font-style:italic; line-height:24px; color:#fff;} .satisfied-home-back .common:nth-child(2n+2) .left-div{ float:right;} .satisfied-home-back .common:nth-child(2n+2) .right-div{ float:left;} .satisfied-home-back .max-back{ background:#f7f7f7; border:#ddd 1px solid; margin:30px 0;} .satisfied-home-back .button{ text-align:center; width:100%; margin:0 0 30px 0} .satisfied-home-back .button a{ margin:0; padding:14px 50px; background:#000; color:#fff; text-transform:uppercase; font-size:16px; text-decoration:none;position:relative; transition:all .6s ease-in-out; border-radius:3px; display:inline-block;} .satisfied-home-back .button a span{ position:relative; z-index:100;} .satisfied-home-back .button a:after{ width:100%; height:100%; background:#cf1509; content:""; position:absolute; top:0; left:0; opacity:0; transform:scale(0); transition:all .6s ease-in-out; border-radius:3px;} .satisfied-home-back .button a:hover{ color:#fff;} .satisfied-home-back .button a:hover:after{ opacity:1; transform:scale(1);} .satisfied-home-back .button a i{ margin:0 10px 0 0; font-size:20px;} .team-back{ width:100%; height:auto; margin:0; padding:112px 0 30px 0; float:left;} .team-back .portion{ width:100%; min-height:350px; margin:0; padding:120px 20px 20px 20px; float:left; background:#d2e4f0; text-align:center; transition:all .6s ease-in-out; position:relative;} .team-back .portion .avator{ display:inline-block; margin:0; padding:0; position:absolute; top:-50px; left:0; right:0; margin:auto; width:150px; height:150px;} .team-back .portion .avator img{ width:150px; height:150px; border-radius:100%; display:block; object-fit:cover; } .team-back .portion h5{ color:#52768c; font-weight:600; margin:0; padding:0; font-size:22px; text-transform:capitalize; transition:all .6s ease-in-out;} .team-back .portion h5 span{ font-size:14px; font-weight:normal;} .team-back .portion p{ color:#000; font-family:14px; line-height:24px; display:inline-block; padding:0; width:80%; margin:20px 0 0 0;} .team-back .portion .arrow-view{ display:inline-block; margin:20px 0 0 0; padding:0; position:relative; } .team-back .portion .arrow-view a{ width:40px; height:40px; border-radius:100%; border:#52768c 2px solid; float:left; text-align:center; line-height:36px; font-size:18px; transition:all .6s ease-in-out;transform:rotate(0deg)} .team-back .portion:hover .arrow-view a{ transform:rotate(360deg); background:#fff;; color:#000;} .team-back .portion:hover{ background:#ef5a4c;} .team-back .portion:hover h5{ color:#fff !important;} .footer-back{ width:100%; height:auto; margin:0; padding:60px 0 30px 0; background:#2482c0; float:left;} .footer-back .portion{ width:100%; height:auto; margin:0 0 30px 0; padding:0; float:left;} .footer-back .portion .logo{ float:left; margin:0 0 15px 0; padding:0;} .footer-back .portion p{ color:#fff; font-size:14px; line-height:24px;} .footer-back .portion .details-list{ wi100%; height:auto; margin:0px; padding:0; float:left;} .footer-back .portion .details-list li{ list-style:none; margin:0 0 10px 0; padding:4px 0 0 0px; color:#fff; font-size:14px; position:relative;} .footer-back .portion .details-list li .icon{ position:absolute; top:0; left:0;} .footer-back .portion h2{ font-size:20px; color:#fff; font-weight:700; margin:0 0 49px 0; padding:0; text-transform:uppercase;} .footer-back .portion .footer-nav{ width:100%; height:auto; margin:0; padding:0; float:left;} .footer-back .portion .footer-nav li{ margin:0 10px 10px 0; padding:0; list-style:none; width:100%; float:left;} .footer-back .portion .footer-nav li a{ color:#fff; text-decoration:none; margin:0; padding:0; text-transform:capitalize; width:100%; float:left; padding:0 0 0 20px; position:relative;} .footer-back .portion .footer-nav li a:before{content:"\f0da"; font-family:'FontAwesome'; font-size:16px; position:absolute; top:-1px; left:0;} .footer-back, .fa-facebook-f::before, .fa-facebook::before { padding: 20px 10px 0px 0px; color:#fff;} .footer-back, .fa-twitter::before { padding: 20px 10px 0px 0px; color:#fff;} .footer-back, .fa-google-plus::before { padding: 20px 10px 0px 0px; color:#fff;} .footer-back, .fa-linkedin::before { padding: 20px 10px 0px 0px; color:#fff;} .footer-back, .fa-whatsapp::before {padding: 20px 10px 0px 0px; color:#fff;} .details-list { list-style:none;} .details-list, .fa-map-marker::before { padding:0px 10px 0px;} .details-list, .fa-phone::before { padding:0px 10px 0px;} .details-list, .fa-envelope::before { padding:0px 0px;} .copy-right-text-back{ width:100%; height:auto; margin:0; padding:20px 0; background:#033a5d; color:#fff; text-align:center;} .all-content-back{ width:100%; height:auto; margin:0; padding: 60px 0px; float:left;} .breadcrumb{ width:auto; display:inline-block; background:none} .breadcrumb li{ text-transform:capitalize;} .breadcrumb li a{ text-transform:uppercase; color:#033a5d;} .conatct-us-back-details{ width:100%; height:auto; margin:0; padding:0; float:left;} .conatct-us-back-details .top-addres-details{ width:100%; height: auto; margin:0 0 30px 0; padding:30px 0 0 0; float:left; background: #edefea;} .conatct-us-back-details .top-addres-details .port{ width:100%; height: auto; margin:0 0 30px 0; padding:0; float:left; text-align:center;} .conatct-us-back-details .top-addres-details .port .icon{ width:50px; height:50px; margin:0 0 15px 0; padding:0; border-radius:100%; text-align:center; line-height:50px; display:inline-block; background:#2280be; color:#fff; font-size:20px;} .conatct-us-back-details .form-back{ width:100%; height:auto; margin:0 0 30px 0; padding:0; float:left;} .conatct-us-back-details .map-back{ width:100%; height:auto; margin:0 0 30px 0; padding:0; float:left;} .conatct-us-back-details .map-back iframe{ width:100%; height:460px; margin:0; padding:0; float:left; border:none;} .conatct-us-back-details .form-back h3{ font-size: 36px; margin: 0 0 30px 0; padding: 0 0 30px 0; font-weight: 600; display: inline-block; position: relative; color: #333; text-transform: capitalize;} .conatct-us-back-details .form-back h3:after{ width: 60%; height: 1px; position: absolute; bottom: 0; left: 0; margin: auto; content: ""; background: #333;} .conatct-us-back-details .form-back .portion{ width:100%; height:auto; margin:0 0 30px 0; padding:0; float:left;} .conatct-us-back-details .form-back .portion input[type="text"]{ width:100%; height:40px; margin:0; padding:0 15px; float:left; border:#ddd 1px solid; outline-style:none;} .conatct-us-back-details .form-back .portion input[type="email"]{ width:100%; height:40px; margin:0; padding:0 15px; float:left; border:#ddd 1px solid; outline-style:none;} .conatct-us-back-details .form-back .portion textarea{ width:100%; height:150px; margin:0; padding:15px; float:left; border:#ddd 1px solid; outline-style:none; resize:none;} .conatct-us-back-details .form-back .portion .submit-back{ margin:0; background:#000; color:#fff; text-transform:uppercase; font-size:14px; text-decoration:none; float:left; position:relative; transition:all .6s ease-in-out; border-radius:3px;} .conatct-us-back-details .form-back .portion .submit-back span{ position:relative; z-index:100;} .conatct-us-back-details .form-back .portion .submit-back:after{ width:100%; height:100%; background:#033a5d; content:""; position:absolute; top:0; left:0; opacity:0; transform:scale(0); transition:all .6s ease-in-out; border-radius:3px;} .conatct-us-back-details .form-back .portion .submit-back:hover{ color:#fff;} .conatct-us-back-details .form-back .portion .submit-back:hover:after{ opacity:1; transform:scale(1);} .conatct-us-back-details .form-back .portion input[type="submit"]{ background:none; border:none; cursor:pointer; padding:10px 20px; cursor: pointer; color:#fff; outline-style:none;} .listing-invisual-back-details{ width:100%; height:auto; margin:0 0 30px 0; padding:0; float:left;} .listing-invisual-back-details .left-panel-details{ width:100%; height:auto; margin:0; padding:0; float:left;} .listing-invisual-back-details .left-panel-details .image{ width:100%; display:block; margin:0 0 15px 0; padding:15px; border:#ddd 1px solid; border-radius:5px;} .listing-invisual-back-details .left-panel-details .button-back{ width:100%; height:auto; margin:0; padding:0; float:left;} .listing-invisual-back-details .left-panel-details .button-back .button1{margin:0 0 15px 0; position:relative;padding:0 0 0 52px; height:45px; line-height:45px; float:left; background:#faa25c; color:#fff; text-align:left; border-radius:3px; /*box-shadow:#cc7c3d 0 3px 0;*/ color:#fff; font-size:16px; font-weight:700; text-decoration:none; outline-style:none; width:100%; overflow:hidden;} .listing-invisual-back-details .left-panel-details .button-back .button1 .icon-back{ position:absolute; top:0; left:0; width:40px; height:45px; text-align:center; background:#cc7c3d; color:#fff; line-height:45px; font-size:18px;} .listing-invisual-back-details .left-panel-details .button-back .button2{margin:0 0 15px 0; position:relative;padding:0 0 0 52px; height:45px; line-height:45px; float:left; background:#216eb0; color:#fff; text-align:left; border-radius:3px; /*box-shadow:#16558b 0 3px 0;*/ color:#fff; font-size:16px; font-weight:700; text-decoration:none; outline-style:none; width:100%; overflow:hidden;} .listing-invisual-back-details .left-panel-details .button-back .button2 .icon-back{ position:absolute; top:0; left:0; width:40px; height:45px; text-align:center; background:#16558b; color:#fff; line-height:45px; font-size:18px;} .tool-box{ width:100%; height:auto; margin:0; padding:0; float:left;} .tool-box .panel-title span{ margin:0 10px 0 0; } .tool-box .tool-box-details{ width:100%; height:auto; margin:0; padding:0; float:left;} .tool-box .tool-box-details li{ width:100%; height:auto; margin:0; padding:0; float:left; list-style:none; border-bottom:#ddd 1px solid; color:#000; text-decoration:none !important;} .tool-box .tool-box-details li{ margin:0; padding:10px 0; float:left; width:100%; text-decoration:none; outline-style:none; color:#000; text-decoration:none; font-size:16px;} .tool-box .tool-box-details li a{ text-decoration:none; color:#000;} .tool-box .tool-box-details li a span{ margin:0 10px 0 0; font-size:20px;} .listing-invisual-back-details .right-panel-details-back{ width:100%; height:auto; margin:0; padding:0; float:left;} .listing-invisual-back-details .right-panel-details-back .heading{ width:100%; height:auto; margin:0 0 30px 0; padding:0; float:left;} .listing-invisual-back-details .right-panel-details-back .heading h2{ font-size:25px; margin:0; padding:0;} .listing-invisual-back-details .right-panel-details-back .heading h2 span{ color:#216eb0; font-size:18px;} .listing-invisual-back-details .right-panel-details-back .heading h3{ font-size:25px; margin:0; padding:0; float:right;} .listing-invisual-back-details .right-panel-details-back .heading h3 span{ margin:0 15px 0 0; color:#faa25c;} .listing-invisual-back-details .right-panel-details-back .main-details-back{ width:100%; height:auto; margin:0; padding:0; float:left;} .main-image-back{ width:100%; height:auto; position: relative;} .main-image{ width:100%; display:block; padding:15px; border:#ddd 1px solid; border-radius:5px;} .main-image-back .loader{ width:100%; height:100%; background: url(../images/713.GIF) center center no-repeat rgba(255,255,255,1); position:absolute; top:0; left:0;} .right-details{ width:100%; height:auto; margin:0; padding:0; float:left;} .right-details .top{ width:100%; height:auto; margin:0 0 30px 0; padding:0 0 30px 0; float:left; border-bottom:#ddd 1px solid;} .right-details h4{ margin:0 0 15px 0; font-size:18px;} .right-details .button1{ margin:0 10px 0 0; padding:0; float:left;} .right-details .button1 a{ margin:0; padding:6px 15px; float:left; background:#216eb0; color:#fff; text-align:center; border-radius:3px; box-shadow:#16558b 0 3px 0; color:#fff; font-size:14px; font-weight:500; text-decoration:none; outline-style:none;} .right-details .button1 a span{ margin:0 10px 0 0; font-size:18px;} .right-details .button2{ margin:0; padding:0; float:left;} .right-details .button2 a{ margin:0; padding:6px 15px; float:left; background:#faa25c; color:#fff; text-align:center; border-radius:3px; box-shadow:#cc7c3d 0 3px 0; color:#fff; font-size:14px; font-weight:500; text-decoration:none; outline-style:none;} .right-details .button2 a span{ margin:0 10px 0 0; font-size:18px;} .right-details .bottom{ width:100%; height:auto; margin:0 0 0 0; padding:0 0 0 0; float:left;} .right-details .bottom .del-ias{ width:100%; height:auto; margin:0; padding:0; float:left;} .right-details .bottom .del-ias li{ width:100%; height:auto; margin:0; padding:0; float:left; list-style:none;} .listing-invisual-back-details .right-panel-details-back .main-details-back .right-details .bottom .del-ias li a{ width:100%; height:auto; margin:0; padding:8px 0; border-bottom:#ddd 1px solid; float:left; color:#333;} .listing-invisual-back-details .right-panel-details-back .main-details-back .right-details .reviews-back{ width:100%; height:auto; margin:0; padding:0; float:left;} .listing-invisual-back-details .right-panel-details-back .main-details-back .right-details .reviews-back span{ margin:0 3px 0 0; color:#faa25c; font-size:25px;} .listing-invisual-back-details .right-panel-details-back .main-details-back .reviews-post-back{ width:100%; height:auto; margin:0; padding:0; float:left;} .listing-invisual-back-details .right-panel-details-back .main-details-back .reviews-post-back .portion-reviews{ width:100%; height:auto; margin:0 0 15px 0; padding:0 0 15px 0; float:left; } .listing-invisual-back-details .right-panel-details-back .main-details-back .reviews-post-back .header-rev{ width:100%; height:auto; margin:15px 0 15px 0; padding:0 0 15px 0; border-bottom:#ddd 1px solid; float:left;} .listing-invisual-back-details .right-panel-details-back .main-details-back .reviews-post-back h5{ font-size:25px; margin:0 0 0 0; padding:0 0 0 0; font-weight:600; float:left; } .listing-invisual-back-details .right-panel-details-back .main-details-back .reviews-post-back h5 span{ margin:0 15px 0 0; font-size:32px;} .listing-invisual-back-details .right-panel-details-back .main-details-back .reviews-post-back .header-rev .write-review{margin:0; padding:6px 15px; float:right; background:#216eb0; color:#fff; text-align:center; border-radius:3px; box-shadow:#16558b 0 3px 0; color:#fff; font-size:14px; font-weight:500; text-decoration:none; outline-style:none; cursor:pointer;} .listing-invisual-back-details .right-panel-details-back .main-details-back .reviews-post-back .header-rev .write-review span{ margin:0 10px 0 0; font-size:20px;} .listing-invisual-back-details .right-panel-details-back .main-details-back .reviews-post-back .portion-reviews .image-back{ width:100%; height:100px; display:block; padding:10px; border:#ddd 1px solid; background:#eee; text-align:center; line-height:100px; border-radius:10px;} .listing-invisual-back-details .right-panel-details-back .main-details-back .reviews-post-back .portion-reviews .image-back span{ font-size:40px; } .listing-invisual-back-details .right-panel-details-back .main-details-back .reviews-post-back .portion-reviews .right-section{ width:100%; height:auto; margin:0; padding:15px; float:left; background:#eee; border:#ddd 1px solid; border-radius:3px;} .listing-invisual-back-details .right-panel-details-back .main-details-back .reviews-post-back .portion-reviews .right-section h6{ margin:0; padding:0; float:left; font-size:18px;} .listing-invisual-back-details .right-panel-details-back .main-details-back .reviews-post-back .portion-reviews .right-section h6 span{ color:#216eb0;} .listing-invisual-back-details .right-panel-details-back .main-details-back .reviews-post-back .portion-reviews .right-section .reviews-details{ float:right;} .listing-invisual-back-details .right-panel-details-back .main-details-back .reviews-post-back .portion-reviews .right-section .reviews-details span{ margin:0 3px 0 0; font-size:20px; color:#faa25c;} .listing-invisual-back-details .right-panel-details-back .main-details-back .reviews-post-back .portion-reviews .right-section p{ margin:15px 0 0 0;} .tabify-back{ width:100%; height:auto; margin:30px 0 30px 0; padding:0; float:left; background:#eee; border-radius:5px; box-shadow:#ddd 0 3px 0; text-align:center; } .tabify-back li{ margin:0 0 0 0; padding:0; float:left; display:inline-block;list-style:none; width:33.33333%;} .tabify-back li a{ margin:0; padding:10px 0; float:left; color:#333; font-size:16px; text-transform:capitalize; outline-style:none; border:none; text-decoration:none; text-align:center; float:left; width:100%;} .tabify-back li.active a{ background: #faa25c; box-shadow:#cc7c3d 0 3px 0; color:#fff;} .tabify-back li:first-child a{ border-radius:5px 0 0 5px;} .tab-heading{ font-size:30px; margin:0 0 15px 0; padding:0 0 15px 0; float: left; border-bottom:#ddd 1px solid; width:100%;} .tab-heading span{ margin:0 10px 0 0;} .thumb-image-back{ width:100%; height:auto; margin:15px 0 0 0; padding:0; float:left;} .thumb-image-back li{ width:25%; height:auto; margin:0 0 10px 0; padding:0 8px; float:left; cursor:pointer; list-style:none; } .thumb-image-back li .image{ width:100%; height:100px; display:block; padding:8px; border:#ddd 1px solid; } .map-tab-back{ width:100%; height:auto; margin:0; padding:0; float:left;} .map-tab-back .details{ width:100%; height:auto; margin:0; padding:0; float:left;} .map-tab-back li{ width:33.33333%; height: auto; margin:0; padding:0 10px; float:left; list-style:none;} .map-tab-back li a{ margin:0; padding:10px 0; width:100%; background:#000; color:#fff; text-transform:uppercase; font-size:14px; text-decoration:none; float:left; position:relative; transition:all .6s ease-in-out; text-align:center;} .map-tab-back li a span{ position:relative; z-index:100;} .map-tab-back li a:after{ width:100%; height:100%; background:#cf1509; content:""; position:absolute; top:0; left:0; opacity:0; transform:scale(0); transition:all .6s ease-in-out; border-radius:3px;} .map-tab-back li a:hover{ color:#fff;} .map-tab-back li.active a{ color:#fff;} .map-tab-back li a i{ font-size:16px; margin:0 10px 0 0;} .map-tab-back li a:hover:after{ opacity:1; transform:scale(1);} .map-tab-back li.active a:after{ opacity:1; transform:scale(1);} .map-tab-back iframe{ width:100%; height:300px; margin:30px 0 0 0; padding:0; float:left; border:none;} .view-map-full{ width:100%; height:100%; position:fixed; top:0; left:0; background:#fff; padding:100px; z-index:100; opacity:0; visibility:hidden;} .view-map-full iframe{ width:95%; height:85%; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; border:none;} .view-map-full img{ width:30px; height:30px; position:absolute; top:10px; right:0; cursor:pointer; display:block; left:0; margin:auto;} .index-box-details-back{ width:100%; height:100%; margin:0; padding:0; float:left; background-size:cover; position:fixed; top:0; left:0; background-repeat:no-repeat; background-position:center top} .index-box-details-back .main{ height:345px; margin:0 auto 0; padding:0 0 0 0; position:absolute; max-width:30%; left:35%; right:35%; top:0; bottom:0; margin:auto;} .index-box-details-back .main .sub-back{padding: 0 3.5px; width:50%; margin: 0 0 7px 0; float: left; perspective: 1000px; z-index:99; } .index-box-details-back .main .portion{ width:100%; height:180px; margin:0; padding:0; float:left; position:relative; } .index-box-details-back .main .portion .front{ width:100%; height:100%; border:rgba(255,255,255,.3) 2px solid; position:absolute; top:0; left:0; z-index:9999;} .index-box-details-back .main .portion .back{ width:100%; height:100%; border:rgba(255,255,255,.3) 2px solid; position:absolute; top:0; left:0; } .index-box-details-back .main .sub-back:hover .portion{ transform: rotateY(0deg);} .index-box-details-back .main .portion .sub-menu{ width:100%; padding:18px; margin:0; position:absolute; bottom:0; right:0;} .index-box-details-back .main .portion .sub-menu li{ display:block; margin:0; padding:0;} .index-box-details-back .main .portion .sub-menu li a{ color:#fff; text-decoration:none; text-transform:capitalize;} .index-box-details-back .main .portion .sub-menu li a:hover{ color:#fff; text-decoration:underline;} .index-box-details-back .main .portion .text-del{width:100%; height:100%; padding:18px; margin:0;} .index-box-details-back .main .portion .text-del p{ width:100%; color:#fff; font-size:14px; line-height:22px;} .index-box-details-back .main .portion .text-del a{position:absolute; bottom:10px; right:20px; padding:0 0 0 20px; color:#fff; text-transform:capitalize; font-size:14px; font-weight:normal;} .index-box-details-back .main .portion .plus{ background:url(../images/plus.png) no-repeat; width:14px; height:14px; position:absolute; cursor:pointer;} .index-box-details-back .main .portion h2.text-back{ position:absolute; color:#fff; text-transform:capitalize; font-size:20px; font-weight:normal; text-align:right;} .logo-new{ position:absolute; top:34px; bottom:0; left:0; right:0; margin:auto; z-index:999; height:214px;} .logo-new img{ position:absolute; top:-28px; left:18%; height:264px;} a.new-pop{ position:absolute; top:157px; right:0; background:url(../images/plus-pop.png) no-repeat; width:45px; height:50px;} .logo-name{ position:absolute; top:27px; left:45px;} .copy-right{ width:100%; position:fixed; bottom:0; left:0; font-size:13px; color:#CCC; text-align:center; padding:0 30px} .left-sec{ float:left;} .mid-sec{ display:inline-block;} .right-sec{ float:right;} .left-sec .socila-back{ float:left; list-style:none; color:#ccc; margin:0; padding:0;} .left-sec .socila-back li{ float:left; margin:0 10px 0 0;} .left-sec .socila-back li:last-child{ margin:0;} .left-sec .socila-back li a { color:#CCC; text-decoration:none;} .mid-sec .foote-nav{ float:left; list-style:none; color:#CCC;} .mid-sec .foote-nav li{ float:left; margin:0 10px 0 0; padding:0; position:relative;} .mid-sec .foote-nav li:last-child{ margin:0;} .mid-sec .foote-nav li:last-child{ margin:0;} .mid-sec .foote-nav li:before{ position:absolute; top:3px; right:-6px; width:1px; height:15px; background:#fff; content:"";} .mid-sec .foote-nav li:last-child:before{ display:none;} .mid-sec .foote-nav li a { color:#CCC; text-decoration:none;} .right-sec a{ color:#F00;} .home-about-sliding-section{ margin:0; float:left; padding:0; width:50%; position:fixed; top:24.5%; right:-50%; background:rgba(0,0,0,.9); z-index:100000; transition:all .3s ease-in-out;} .home-about-sliding-section .portion{ width:100%; height:auto; margin:0; padding:0 0 0 0; position:relative;} .home-about-sliding-section .portion .profile-pic-back{ width:100%; text-align:center; margin:0; padding:30px 0; position:relative; float:left;} .home-about-sliding-section .portion .profile-pic-back:after{ width:1px; height:100%; position:absolute; top:0; right:0; content:""; background:#333;} .home-about-sliding-section .portion .profile-pic-back img{ width:100px; height:100px; padding:5px; border:#fff 2px solid; display:inline-block; border-radius:200px; object-fit:cover;} .home-about-sliding-section .portion .profile-pic-back h3{ color:#fff; text-align:center; font-size:16px; text-transform:capitalize;} .home-about-sliding-section .portion .profile-pic-back .login{ width:100%; height:auto; margin:0; padding:0; float:left; text-align:center;} .home-about-sliding-section .portion .profile-pic-back .login li{ display:inline-block; margin:0 0 2px 0; padding:0;} .home-about-sliding-section .portion .profile-pic-back .login li a{ font-size:13px; text-transform:capitalize; text-decoration:none; color:#fff; background:#fe0000; padding:1px 5px 3px; float:left; border-radius:3px; transition:all .2s ease-in-out;} .home-about-sliding-section .portion .profile-pic-back .login li a:hover{ background:#fff !important; color:#000;} .home-about-sliding-section .portion p{ color:#fff; font-size:14px; margin:0; padding:30px 0 0 0;} .home-about-sliding-section .click-icon-croos{ position:absolute; top:0; left:-45px; background:#000; width:45px; height:45px; text-align:center; line-height:45px; color:#fff; font-size:30px; cursor:pointer} .home-about-sliding-section .click-icon-croos img{ width:30px; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto;} .click-plus{ position:absolute; width:100%; height:100%; left:0; top:0; transition:all .3s ease-in-out; z-index:1000;} .click-cross{position:absolute; width:100%; height:100%; left:0; top:0; transition:all .3s ease-in-out; z-index:100000;} .tab-logo{ display:none;} .copy-right.mobile{ background:rgba(0,0,0,.8); padding:10px 30px 0; display:none;} .copy-right.mobile .sub{ display:none} .copy-right.mobile .click{ display:inline-block; position:absolute; top:-18px; left:0; right:0; cursor:pointer; margin:auto; display:none;} .copy-right.mobile .click1{ display:inline-block; position:absolute; top:-18px; left:0; right:0; cursor:pointer; margin:auto; } .price-list{ width:100%; height:auto; margin:0; padding:59px 0 0 0;} .price-list li{ width:100%; float:left; list-style:none; color:#fff; font-size:20px} .price-list li strong{ width:50%; float:left;} .mobile-view-accordian-back{ position:absolute; max-width:100%; height:320px; left:0; right:0; top:0; bottom:0; margin:auto; padding:0 30px} .mobile-view-accordian-back .details-menu{ width:100%; height:auto; margin:0; padding:0;} .mobile-view-accordian-back .details-menu li{ width:100%; height:auto; margin:0; padding:0; float:left; list-style:none; position:relative;} .mobile-view-accordian-back .details-menu li a{ width:100%; height:auto; margin:0; padding:10px 0 10px 50px; float:left; text-decoration:none; color:#fff; text-transform:capitalize;} .mobile-view-accordian-back .details-menu li ul.sub-menu{ width:100%; height:auto; margin:0; padding:0 0 0 0; float:left; background:rgba(0,0,0,.8)} .mobile-view-accordian-back .details-menu li ul.sub-menu a{ padding:5px 30px 5px 50px; border-bottom:#666 1px solid;} .mobile-view-accordian-back .details-menu li ul.sub-menu .text-del{ padding:10px 10px 10px 50px; float:left;} .mobile-view-accordian-back .details-menu li ul.sub-menu .text-del p{ color:#fff;} .mobile-view-accordian-back .details-menu li ul.sub-menu .text-del p a{ padding:10px 0 0 0; border:none;} .mobile-view-accordian-back .details-menu li span.plus{ position:absolute; top:0; left:0; width:40px; height:40px; position:absolute; border-right:rgba(255,255,255,.3) 1px solid;} .mobile-view-accordian-back .details-menu li span.plus:before{ position:absolute; top:0; left:0; color:#fff; content:"+"; font-size:20px; cursor: pointer; text-align:center; height:28px; line-height:28px; width:100%; text-align:center; right:0; margin:auto; bottom:0;} .mobile-view-accordian-back .details-menu li span.minus{ position:absolute; top:0; left:0; width:40px; height:40px; position:absolute; border-right:rgba(255,255,255,.3) 1px solid;} .mobile-view-accordian-back .details-menu li span.minus:before{ position:absolute; top:0; left:0; color:#fff; content:"-"; font-size:20px; cursor: pointer; text-align:center; height:28px; line-height:28px; width:100%; text-align:center; right:0; margin:auto; bottom:0;} /* == malihu jquery custom scrollbar plugin == Plugin URI: http://manos.malihu.gr/jquery-custom-content-scroller */ /* CONTENTS: 1. BASIC STYLE - Plugin's basic/essential CSS properties (normally, should not be edited). 2. VERTICAL SCROLLBAR - Positioning and dimensions of vertical scrollbar. 3. HORIZONTAL SCROLLBAR - Positioning and dimensions of horizontal scrollbar. 4. VERTICAL AND HORIZONTAL SCROLLBARS - Positioning and dimensions of 2-axis scrollbars. 5. TRANSITIONS - CSS3 transitions for hover events, auto-expanded and auto-hidden scrollbars. 6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS 6.1 THEMES - Scrollbar colors, opacity, dimensions, backgrounds etc. via ready-to-use themes. */ /* ------------------------------------------------------------------------------------------------------------------------ 1. BASIC STYLE ------------------------------------------------------------------------------------------------------------------------ */ .mCustomScrollbar{ -ms-touch-action: pinch-zoom; touch-action: pinch-zoom; /* direct pointer events to js */ } .mCustomScrollbar.mCS_no_scrollbar, .mCustomScrollbar.mCS_touch_action{ -ms-touch-action: auto; touch-action: auto; } .mCustomScrollBox{ /* contains plugin's markup */ position: relative; overflow: hidden; height: 100%; max-width: 100%; outline: none; direction: ltr; } .mCSB_container{ /* contains the original content */ overflow: hidden; width: auto; height: auto; } /* ------------------------------------------------------------------------------------------------------------------------ 2. VERTICAL SCROLLBAR y-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_inside > .mCSB_container{ margin-right: 30px; } .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-right: 0; } /* non-visible scrollbar */ .mCS-dir-rtl > .mCSB_inside > .mCSB_container{ /* RTL direction/left-side scrollbar */ margin-right: 0; margin-left: 30px; } .mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-left: 0; } /* RTL direction/left-side scrollbar */ .mCSB_scrollTools{ /* contains scrollbar markup (draggable element, dragger rail, buttons etc.) */ position: absolute; width: 16px; height: auto; left: auto; top: 0; right: 0; bottom: 0; } .mCSB_outside + .mCSB_scrollTools{ right: -26px; } /* scrollbar position: outside */ .mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools, .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ /* RTL direction/left-side scrollbar */ right: auto; left: 0; } .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ left: -26px; } /* RTL direction/left-side scrollbar (scrollbar position: outside) */ .mCSB_scrollTools .mCSB_draggerContainer{ /* contains the draggable element and dragger rail markup */ position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: auto; } .mCSB_scrollTools a + .mCSB_draggerContainer{ margin: 20px 0; } .mCSB_scrollTools .mCSB_draggerRail{ width: 2px; height: 100%; margin: 0 auto; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; } .mCSB_scrollTools .mCSB_dragger{ /* the draggable element */ cursor: pointer; width: 100%; height: 30px; /* minimum dragger height */ z-index: 1; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ /* the dragger element */ position: relative; width: 2px; height: 100%; margin: 0 auto; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; text-align: center; float:right; } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ width: 12px; /* auto-expanded scrollbar */ } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 8px; /* auto-expanded scrollbar */ } .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown{ display: block; position: absolute; height: 20px; width: 100%; overflow: hidden; margin: 0 auto; cursor: pointer; } .mCSB_scrollTools .mCSB_buttonDown{ bottom: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 3. HORIZONTAL SCROLLBAR x-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_horizontal.mCSB_inside > .mCSB_container{ margin-right: 0; margin-bottom: 30px; } .mCSB_horizontal.mCSB_outside > .mCSB_container{ min-height: 100%; } .mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden{ margin-bottom: 0; } /* non-visible scrollbar */ .mCSB_scrollTools.mCSB_scrollTools_horizontal{ width: auto; height: 16px; top: auto; right: 0; bottom: 0; left: 0; } .mCustomScrollBox + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{ bottom: -26px; } /* scrollbar position: outside */ .mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer{ margin: 0 20px; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 2px; margin: 7px 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 30px; /* minimum dragger width */ height: 100%; left: 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 4px; margin: 6px auto; } .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ height: 12px; /* auto-expanded scrollbar */ margin: 2px auto; } .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ height: 8px; /* auto-expanded scrollbar */ margin: 4px 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft, .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{ display: block; position: absolute; width: 20px; height: 100%; overflow: hidden; margin: 0 auto; cursor: pointer; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft{ left: 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{ right: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 4. VERTICAL AND HORIZONTAL SCROLLBARS yx-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_container_wrapper{ position: absolute; height: auto; width: auto; overflow: hidden; top: 0; left: 0; right: 0; bottom: 0; margin-right: 30px; margin-bottom: 30px; } .mCSB_container_wrapper > .mCSB_container{ padding-right: 30px; padding-bottom: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom: 20px; } .mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right: 20px; } /* non-visible horizontal scrollbar */ .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden + .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom: 0; } /* non-visible vertical scrollbar/RTL direction/left-side scrollbar */ .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right: 0; } /* RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ left: 20px; } /* non-visible scrollbar/RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal{ left: 0; } .mCS-dir-rtl > .mCSB_inside > .mCSB_container_wrapper{ /* RTL direction/left-side scrollbar */ margin-right: 0; margin-left: 30px; } .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden > .mCSB_container{ padding-right: 0; } .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden > .mCSB_container{ padding-bottom: 0; } .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden{ margin-right: 0; /* non-visible scrollbar */ margin-left: 0; } /* non-visible horizontal scrollbar */ .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden{ margin-bottom: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 5. TRANSITIONS ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_scrollTools, .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight{ -webkit-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; -moz-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; -o-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; transition: opacity .2s ease-in-out, background-color .2s ease-in-out; } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, /* auto-expanded scrollbar */ .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail{ -webkit-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; -moz-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; -o-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; } /* ------------------------------------------------------------------------------------------------------------------------ 6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS ------------------------------------------------------------------------------------------------------------------------ */ /* ---------------------------------------- 6.1 THEMES ---------------------------------------- */ /* default theme ("light") */ .mCSB_scrollTools{ opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=1)"; -ms-filter: "alpha(opacity=1)"; } .mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollBox:hover > .mCSB_scrollTools, .mCustomScrollBox:hover ~ .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=100)"; -ms-filter: "alpha(opacity=100)"; } .mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; filter: "alpha(opacity=1)"; -ms-filter: "alpha(opacity=1)"; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.75); filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); filter: "alpha(opacity=85)"; -ms-filter: "alpha(opacity=85)"; } .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; } .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight{ background-image: url(mCSB_buttons.png); /* css sprites */ background-repeat: no-repeat; opacity: 0.4; filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; } .mCSB_scrollTools .mCSB_buttonUp{ background-position: 0 0; /* sprites locations light: 0 0, -16px 0, -32px 0, -48px 0, 0 -72px, -16px -72px, -32px -72px dark: -80px 0, -96px 0, -112px 0, -128px 0, -80px -72px, -96px -72px, -112px -72px */ } .mCSB_scrollTools .mCSB_buttonDown{ background-position: 0 -20px; /* sprites locations light: 0 -20px, -16px -20px, -32px -20px, -48px -20px, 0 -92px, -16px -92px, -32px -92px dark: -80px -20px, -96px -20px, -112px -20px, -128px -20px, -80px -92px, -96px -92px, -112 -92px */ } .mCSB_scrollTools .mCSB_buttonLeft{ background-position: 0 -40px; /* sprites locations light: 0 -40px, -20px -40px, -40px -40px, -60px -40px, 0 -112px, -20px -112px, -40px -112px dark: -80px -40px, -100px -40px, -120px -40px, -140px -40px, -80px -112px, -100px -112px, -120px -112px */ } .mCSB_scrollTools .mCSB_buttonRight{ background-position: 0 -56px; /* sprites locations light: 0 -56px, -20px -56px, -40px -56px, -60px -56px, 0 -128px, -20px -128px, -40px -128px dark: -80px -56px, -100px -56px, -120px -56px, -140px -56px, -80px -128px, -100px -128px, -120px -128px */ } .mCSB_scrollTools .mCSB_buttonUp:hover, .mCSB_scrollTools .mCSB_buttonDown:hover, .mCSB_scrollTools .mCSB_buttonLeft:hover, .mCSB_scrollTools .mCSB_buttonRight:hover{ opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCSB_scrollTools .mCSB_buttonUp:active, .mCSB_scrollTools .mCSB_buttonDown:active, .mCSB_scrollTools .mCSB_buttonLeft:active, .mCSB_scrollTools .mCSB_buttonRight:active{ opacity: 0.9; filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; } /* theme: "dark" */ .mCS-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); } .mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: rgba(0,0,0,0.85); } .mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: rgba(0,0,0,0.9); } .mCS-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px 0; } .mCS-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -20px; } .mCS-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -40px; } .mCS-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -56px; } /* ---------------------------------------- */ /* theme: "light-2", "dark-2" */ .mCS-light-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{ width: 4px; background-color: #fff; background-color: rgba(255,255,255,0.1); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-light-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 4px; background-color: #fff; background-color: rgba(255,255,255,0.75); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 4px; margin: 6px auto; } .mCS-light-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); } .mCS-light-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-light-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); } .mCS-light-2.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px 0; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -20px; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -40px; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -56px; } /* theme: "dark-2" */ .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px 0; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -20px; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -40px; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -56px; } /* ---------------------------------------- */ /* theme: "light-thick", "dark-thick" */ .mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{ width: 4px; background-color: #fff; background-color: rgba(255,255,255,0.1); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 6px; background-color: #fff; background-color: rgba(255,255,255,0.75); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 4px; margin: 6px 0; } .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 6px; margin: 5px auto; } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-light-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -16px 0; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -16px -20px; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -20px -40px; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonRight{ background-position: -20px -56px; } /* theme: "dark-thick" */ .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -96px 0; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -96px -20px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -100px -40px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonRight{ background-position: -100px -56px; } /* ---------------------------------------- */ /* theme: "light-thin", "dark-thin" */ .mCS-light-thin.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.1); } .mCS-light-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 2px; } .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; } .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 2px; margin: 7px auto; } /* theme "dark-thin" */ .mCS-dark-thin.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px 0; } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -20px; } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -40px; } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -56px; } /* ---------------------------------------- */ /* theme "rounded", "rounded-dark", "rounded-dots", "rounded-dots-dark" */ .mCS-rounded.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.15); } .mCS-rounded.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger{ height: 14px; } .mCS-rounded.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 14px; margin: 0 1px; } .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 14px; } .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ height: 14px; margin: 1px 0; } .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ width: 16px; /* auto-expanded scrollbar */ height: 16px; margin: -1px 0; } .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 4px; /* auto-expanded scrollbar */ } .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ height: 16px; /* auto-expanded scrollbar */ width: 16px; margin: 0 -1px; } .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ height: 4px; /* auto-expanded scrollbar */ margin: 6px 0; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonUp{ background-position: 0 -72px; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonDown{ background-position: 0 -92px; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonLeft{ background-position: 0 -112px; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonRight{ background-position: 0 -128px; } /* theme "rounded-dark", "rounded-dots-dark" */ .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px -72px; } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -92px; } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -112px; } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -128px; } /* theme "rounded-dots", "rounded-dots-dark" */ .mCS-rounded-dots.mCSB_scrollTools_vertical .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_vertical .mCSB_draggerRail{ width: 4px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ background-color: transparent; background-position: center; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg=="); background-repeat: repeat-y; opacity: 0.3; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ height: 4px; margin: 6px 0; background-repeat: repeat-x; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonUp{ background-position: -16px -72px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonDown{ background-position: -16px -92px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -20px -112px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonRight{ background-position: -20px -128px; } /* theme "rounded-dots-dark" */ .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYV2NkIAAYSVFgDFR8BqrBBEifBbGRTfiPZhpYjiQFBK3A6l6CvgAAE9kGCd1mvgEAAAAASUVORK5CYII="); } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -96px -72px; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -96px -92px; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -100px -112px; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -100px -128px; } /* ---------------------------------------- */ /* theme "3d", "3d-dark", "3d-thick", "3d-thick-dark" */ .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-repeat: repeat-y; background-image: -moz-linear-gradient(left, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%); background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0))); background-image: -webkit-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: -o-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: -ms-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: linear-gradient(to right, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ background-repeat: repeat-x; background-image: -moz-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0))); background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: -o-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: -ms-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); } /* theme "3d", "3d-dark" */ .mCS-3d.mCSB_scrollTools_vertical .mCSB_dragger, .mCS-3d-dark.mCSB_scrollTools_vertical .mCSB_dragger{ height: 70px; } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 70px; } .mCS-3d.mCSB_scrollTools, .mCS-3d-dark.mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-3d.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; } .mCS-3d.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{ width: 8px; background-color: #000; background-color: rgba(0,0,0,0.2); box-shadow: inset 1px 0 1px rgba(0,0,0,0.5), inset -1px 0 1px rgba(255,255,255,0.2); } .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #555; } .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 8px; } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 8px; margin: 4px 0; box-shadow: inset 0 1px 1px rgba(0,0,0,0.5), inset 0 -1px 1px rgba(255,255,255,0.2); } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 8px; margin: 4px auto; } .mCS-3d.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } /* theme "3d-dark" */ .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); box-shadow: inset 1px 0 1px rgba(0,0,0,0.1); } .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ box-shadow: inset 0 1px 1px rgba(0,0,0,0.1); } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } /* ---------------------------------------- */ /* theme: "3d-thick", "3d-thick-dark" */ .mCS-3d-thick.mCSB_scrollTools, .mCS-3d-thick-dark.mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-3d-thick.mCSB_scrollTools, .mCS-3d-thick-dark.mCSB_scrollTools, .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{ -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .mCSB_inside + .mCS-3d-thick.mCSB_scrollTools_vertical, .mCSB_inside + .mCS-3d-thick-dark.mCSB_scrollTools_vertical{ right: 1px; } .mCS-3d-thick.mCSB_scrollTools_vertical, .mCS-3d-thick-dark.mCSB_scrollTools_vertical{ box-shadow: inset 1px 0 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5); } .mCS-3d-thick.mCSB_scrollTools_horizontal, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal{ bottom: 1px; box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5); } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 1px 0 0 rgba(255,255,255,0.4); width: 12px; margin: 2px; position: absolute; height: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #555; } .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ height: 12px; width: auto; } .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer{ background-color: #000; background-color: rgba(0,0,0,0.05); box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1); } .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } /* theme: "3d-thick-dark" */ .mCS-3d-thick-dark.mCSB_scrollTools{ box-shadow: inset 0 0 14px rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal{ box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 1px 0 0 rgba(255,255,255,0.4), inset -1px 0 0 rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #777; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{ background-color: #fff; background-color: rgba(0,0,0,0.05); box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } /* ---------------------------------------- */ /* theme: "minimal", "minimal-dark" */ .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{ right: 0; margin: 0 0; } .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{ bottom: 0; margin: 0 12px; } /* RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, .mCS-dir-rtl > .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{ left: 0; right: auto; } .mCS-minimal.mCSB_scrollTools .mCSB_draggerRail, .mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; } .mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger, .mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger{ height: 50px; } .mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 50px; } .mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.2); filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; } .mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.5); filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; } /* theme: "minimal-dark" */ .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.2); filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; } .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.5); filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; } /* ---------------------------------------- */ /* theme "light-3", "dark-3" */ .mCS-light-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{ width: 6px; background-color: #000; background-color: rgba(0,0,0,0.2); } .mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 6px; } .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 6px; margin: 5px 0; } .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 12px; } .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ height: 12px; margin: 2px 0; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } /* theme "dark-3" */ .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } /* ---------------------------------------- */ /* theme "inset", "inset-dark", "inset-2", "inset-2-dark", "inset-3", "inset-3-dark" */ .mCS-inset.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ width: 12px; background-color: #000; background-color: rgba(0,0,0,0.2); } .mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 6px; margin: 3px 5px; position: absolute; height: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-inset.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ height: 6px; margin: 5px 3px; position: absolute; width: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-inset.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 12px; margin: 2px 0; } .mCS-inset.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } /* theme "inset-dark", "inset-2-dark", "inset-3-dark" */ .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } /* theme "inset-2", "inset-2-dark" */ .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; border-width: 1px; border-style: solid; border-color: #fff; border-color: rgba(255,255,255,0.2); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{ border-color: #000; border-color: rgba(0,0,0,0.2); } /* theme "inset-3", "inset-3-dark" */ .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.6); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.6); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.75); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); } /* CSS OF KD ---------------------------------------- */ .mobile-view{ width:100%; display:none;} .index-box-details-back .main{ display:block;} .mobile-view .logo-new{ position:absolute; top:13px; left:0; right:0; bottom:auto; width:67px;} .portion.one .front .plus{ bottom:10px; left:20px;} .portion.one h2 { position:absolute; top:0px; left: 0px; text-align: left; padding:0px 38px 0px 20px; font-size:20px; word-wrap: break-word; color:#fff; margin-top:20px; margin-bottom:0px;} .portion.one .sub-menu { text-align: left; word-wrap: break-word; bottom:15px; left: 0px; padding: 0px 0px 0px 20px;} .portion.two .front .plus{ bottom:10px; right:20px;} .portion.two h2 { position:absolute; top:0px; right: 0px; text-align: right; padding:0px 20px 0px 38px; font-size:20px; word-wrap: break-word; color:#fff; margin-top:20px; margin-bottom:0px;} .portion.two .sub-menu { text-align: right; word-wrap: break-word; bottom:15px; right: 0px; padding: 0px 20px 0px 0px;} .portion.three .front .plus{ top:10px; left:20px;} .portion.three h2 { position:absolute; bottom:20px; left: 0px; text-align: left; padding:0px 38px 0px 20px; font-size:20px; word-wrap: break-word; color:#fff; margin-top:20px; margin-bottom:0px;} .portion.three .sub-menu { text-align: left; word-wrap: break-word; top:15px; left: 0px; padding: 0px 0px 0px 20px;} .portion.three .text-del { text-align: left;} .portion.three .text-del a{bottom:10px; left:0px; text-align:left; padding:0px 0px 0px 20px;} .portion.four .front .plus{ top:10px; right:20px;} .portion.four h2 { position:absolute; bottom:20px; right: 0px; text-align: right; padding:0px 20px 0px 38px; font-size:20px; word-wrap: break-word; color:#fff; margin-top:20px; margin-bottom:0px;} .portion.four .sub-menu { text-align: right; word-wrap: break-word; bottom:15px; right: 0px; padding: 0px 20px 0px 0px;} .portion.four .text-del { text-align: right;} .portion.four .text-del a{bottom:10px; right:0px; text-align:right; padding:0px 20px 0px 0px;} header .navigation{ float:right; margin:0; padding:0; float:left; width:100%; background: #017bc8;} header .navigation .navi{ width:100%; float:left; margin:0; padding:0;} header .navigation li{ float:left; margin:0; padding:0; list-style:none; position:relative; z-index:100;} header .navigation li a{ padding:10px 17px; float:left; color:#fff; margin:0; text-decoration:none; text-transform:capitalize; font-size:14px; position:relative; transition:all .8s ease-in-out; -webkit-transition:all .8s ease-in-out; -moz-transition:all .8s ease-in-out; -o-transition:all .8s ease-in-out; -ms-transition:all .8s ease-in-out; border-right:#7ECCEA 1px solid;} header .navigation li a:hover{ background:#fff; color:#23B5B9;} header .navigation li:first-child a{border-left:#7ECCEA 1px solid;} header .navigation li .sub-menu{ width:250px; height:auto; margin:0; padding:0; position:absolute; top:30px; left:0; background: #017bc8; opacity:0; visibility:hidden; -webkit-visibility:hidden; -moz-visibility:hidden; -o-visibility:hidden; -ms-visibility:hidden; transition:all .8s ease-in-out; -webkit-transition:all .8s ease-in-out; -moz-transition:all .8s ease-in-out; -o-transition:all .8s ease-in-out; -ms-transition:all .8s ease-in-out;} header .navigation li .sub-menu li{ width:100%; height:auto; margin:0; padding:0; float:left;} header .navigation li .sub-menu li a{ width:100%; padding:8px 2px 8px 15px; float:left; border-bottom:#7ECCEA 1px solid; border-right:none;} header .navigation li:hover .sub-menu{ visibility:visible; -webkit-visibility:visible; -moz-visibility:visible; -o-visibility:visible; -ms-visibility:visible; opacity:1; top:41px;} .all-heading-back img {width: 100%;} .inner-heading { display:block; margin:0px 0px; padding:0px 0px;} .inner-heading h2{ margin:0px 0px; padding:0px 0px 30px; text-align:center; color:#2482c0; font-weight:700;} .productblock{ display:block; margin:0px 0px; padding:0px 0px;} .productblock h2{ margin:0px 0px; padding:20px 0px; color:#000;} .productdetails{ display:block; margin:0px 0px; padding:0px 0px;} .productdetailsimg{ width:100%; object-fit:cover; display:block; margin:0px 0px; padding:10px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border: 1px solid #c6c6c6;} .productdetails p{ margin:0px 0px; padding:20px 0px;} .productinfoblock{ display:block; margin:0px 0px 20px; padding:20px; background:#edefea; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border: 1px solid #c6c6c6;} .productinfoblock h3{ margin:0px 0px; padding:0px 0px 15px; color:#216eb0; font-size:16px; font-weight:600;} .productinfotable{ display:block; margin:20px 0px; padding:0px 0px;} .productinfotable h4{ margin:0px 0px; padding:10px 0px; color:#216eb0; font-weight:600;} .productinfotable h5{ margin:0px 0px; padding:10px; color:#fff; background:#216eb0; text-align:center; font-weight:600; font-family:roboto;} table { border: 1px solid #ccc; border-collapse: collapse; margin: 0; padding: 0; width: 100%; table-layout: fixed;} table caption { font-size: 1.5em; margin: .5em 0 .75em;} table tr { background-color: #f8f8f8; border: 1px solid #ddd; padding: .35em;} table th, table td { padding: .625em; text-align: left;} .break{ display:block;} table th { font-size: .85em; letter-spacing: .1em; text-transform: uppercase;} .tablerow ul {padding: 0px;} .tablerow ul li{ list-style:none;} .footer-back h3 { text-align:center; margin:0px 0px; padding:0px 0px 20px;} .details-list li i {margin: 0px 0px; float: left; text-align: left; font-size:18px;} .details-list li {text-align: center;} .copyleft { text-align:left;} .copymiddle{ text-align:center; } .copyright{ text-align:right; } .headclr{ color:#216eb0;} #contact-request { background: #000; border: none; color: #fff; padding: 10px 20px;} #scroll { position:fixed; right:10px; bottom:10px; cursor:pointer; width:50px; height:50px; background-color:#3498db; text-indent:-9999px; display:none; -webkit-border-radius:60px; -moz-border-radius:60px; border-radius:60px} #scroll span { position:absolute; top:50%; left:50%; margin-left:-8px; margin-top:-12px; height:0; width:0; border:8px solid transparent; border-bottom-color:#ffffff;} #scroll:hover { background-color:#031928; opacity:1;filter:"alpha(opacity=100)"; -ms-filter:"alpha(opacity=100)";} .whywithus{ float:left; width:100%; margin:10px 0px; padding:0px 0px;} /* Removes the default 20px margin and creates some padding space for the indicators and controls */ .carousel { margin-bottom: 0; padding: 0 40px 30px 40px; } /* Reposition the controls slightly */ .carousel-control { left: -12px; } .carousel-control.left { background: none !important; color: #000; font-size: 100px; left: -73px !important; top: 8px;} .carousel-control.right {background: none !important; color: #000; font-size: 100px; right: -73px !important; top: 8px;} .carousel-control:hover, .carousel-control:focus { color: #000 !important; } /* Changes the position of the indicators */ .carousel-indicators { right: 50%; top: auto; bottom: 0px; margin-right: -19px; } /* Changes the colour of the indicators */ .carousel-indicators li { background: #c0c0c0; } .carousel-indicators .active { background: #333333; } .carousel .thumbnail { display: block; padding: 4px; margin: 0px 6px !important; line-height: 1.42857143; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; -webkit-transition: border .2s ease-in-out; -o-transition: border .2s ease-in-out; transition: border .2s ease-in-out; float: left;} .carousel-indicators { display:none;} .break.cleardiv { width: 100%; display: inline-block; vertical-align: top; margin: 0px; padding: 0px; height: auto;} .thumbimg{ width:250px; height:250px; max-width:100%;} @media screen and (max-width: 600px) { table { border: 0; } table caption { font-size: 1.3em; } table thead { border: none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;} table tr { border-bottom: 3px solid #ddd; display: block; margin-bottom: .625em;} table td { border-bottom: 1px solid #ddd; display: block; font-size: .8em; text-align: right;} table td::before { /* * aria-label has no advantage, it won't be read inside a table content: attr(aria-label); */ content: attr(data-label); float: left; font-weight: bold; text-transform: uppercase;} table td:last-child { border-bottom: 0;} } .productviewdetails{ display:block; margin:0px 0px; padding:0px 0px;} .productviewdetailsimg { width:auto; height:auto; margin:20px 0px; padding:2px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border: 1px solid #c6c6c6; background:#2482c0;} .productviewdetails h3{ margin:0px 0px; padding:10px 0px; color:#216eb0; font-weight:600; text-align:center; font-size:16px; line-height:24px; word-wrap:break-word;} .viewbtn{ display:table !important; margin:0 auto 20px; } .tablerow{ display:block; margin:0px 0px; padding:0px 0px;} .col1{ width:10%;} .col2{ width:45%;} .col3{ width:27%;} .col4{ width:18%;} #navbar { margin:18px 0px 0px;} .sticky #navbar { margin:1px 0px 0px;} .sticky .navbar { min-height: 50px; margin-bottom: 0px !important;} .addheightcontent { min-height:600px;} .navbar-nav > li > a { font-size: 18px !important; font-family: 'Raleway', sans-serif;} .sticky .navbar-nav > li > a { font-size: 14px !important;} .why-heading{ color:#2482c0; padding:0px 0px 10px;} .dropdown-menu > li > a { font-family: 'Raleway', sans-serif;} .details-list .col-md-10 {text-align: left;} .details-list .col-md-12 { margin: 0px 0px 10px;} .navbar-nav > li > a { padding: 9px 33px !important; background: none !important; margin: 0px 10px;} .nav > li > a:hover, .nav > li > a:focus { background: none !important;} .footermid{ width:29% !important; margin:0px 0px 0px 45px;} .footerright{ width:25% !important; float:right !important;} .footer-back a { color: #fff; text-decoration:none;} .footer-back a:hover { color: #fff; text-decoration:underline;} @media only screen and (min-width:768px) and (max-width:1023px){ .index-box-details-back .main { height: 345px; max-width: 60%; left: 20%; right: 20%; top: 0; bottom: 0; width: 90%;} .logo-new img { top: -28px; left: 22%; height: 264px;} .navbar-nav > li > a { padding: 9px 4px !important; background: none !important; margin: 0px 4px; font-size: 16px !important;} header .logo { float: left; margin: 1px 6px; width: 23%;} .footermid { width: 100% !important; margin: 0px 0px;} .footerright { width: 100% !important; float: left !important;} .col-md-4.col-sm-12.copyleft { text-align: center;} .col-md-4.col-sm-12.copymiddle { text-align: center;} .col-md-4.col-sm-12.copyright { text-align: center;} .carousel { padding: 0 0px 30px 92px;} .productviewdetailsimg { margin: 20px auto; display: block;} } @media only screen and (min-width:640px) and (max-width:767px){ .index-box-details-back .main { height: 345px; max-width: 60%; left: 20%; right: 20%; top: 0; bottom: 0; width: 90%;} .logo-new img { top: -9px; left: -44%; height: 184px; width: 190%;} .copyleft { text-align:center;} .copymiddle{ text-align:center; } .copyright{ text-align:center; } .nav > li > a { padding: 10px 0px !important;} .navbar-default .navbar-collapse, .navbar-default .navbar-form { width: 100%;} .addheightcontent { min-height:auto;} .footermid { width: 100% !important; margin: 0px 0px;} .footerright { width: 100% !important; float: left !important;} .col-md-4.col-sm-12.copyleft { text-align: center;} .col-md-4.col-sm-12.copymiddle { text-align: center;} .col-md-4.col-sm-12.copyright { text-align: center;} table th, table td { width: 100% !important; display: block !important;} .col1{ width: 100% !important; display: block !important;} .col2{ width: 100% !important; display: block !important;} .col3{ width: 100% !important; display: block !important;} .col4{ width: 100% !important; display: block !important;} .break.cleardiv {display: none !important;} .carousel { padding: 0px 0px;} .carousel-control.right { right: -5% !important;} .carousel-control.left { left: -10% !important;} .productviewdetailsimg { margin: 20px auto; display: block;} } @media only screen and (min-width:480px) and (max-width:639px){ .index-box-details-back .main { height: 345px; max-width: 60%; left: 20%; right: 20%; top: 0; bottom: 0; width: 90%;} .logo-new img { top: -9px; left: -44%; height: 184px; width: 190%;} .mobile-view .logo-new { top: -110px; left: 0; right: 0; bottom: 143px; width:auto; height:auto;} .mobile-view-accordian-back { height:auto; top: 222px; bottom: 0;} .mid-sec .foote-nav { float: left; text-align: left; margin: 0px; padding: 0px;} .copyleft { text-align:center;} .copymiddle{ text-align:center; } .copyright{ text-align:center; } .nav > li > a { padding: 10px 0px !important;} .footermid { width: 100% !important; margin: 0px 0px;} .footerright { width: 100% !important; float: left !important;} .col-md-4.col-sm-12.copyleft { text-align: center;} .col-md-4.col-sm-12.copymiddle { text-align: center;} .col-md-4.col-sm-12.copyright { text-align: center;} table th, table td { width: 100% !important; display: block !important;} .col1{ width: 100% !important; display: block !important;} .col2{ width: 100% !important; display: block !important;} .col3{ width: 100% !important; display: block !important;} .col4{ width: 100% !important; display: block !important;} .break.cleardiv {display: none !important;} .details-list li i { margin: 0px 0px; float: none; text-align: left; font-size: 18px;} .details-list .col-md-10 { text-align: center;} .inner-heading h2 { font-size: 17px;} .carousel { padding: 0px 0px;} .carousel .thumbnail { margin: 0px 82px !important;} .productviewdetailsimg { margin: 20px auto; display: block;} } @media only screen and (min-width:320px) and (max-width:479px){ .index-box-details-back .main { height: 345px; max-width: 60%; left: 20%; right: 20%; top: 0; bottom: 0; width: 90%;} .logo-new img { top: -9px; left: -44%; height: 184px; width: 190%;} .mobile-view .logo-new { top: -110px; left: 0; right: 0; bottom: 143px; width:auto; height:auto;} .mobile-view-accordian-back { height:auto; top: 222px; bottom: 0;} .mid-sec .foote-nav { float: left; text-align: left; margin: 0px; padding: 0px;} .copyleft { text-align:center;} .copymiddle{ text-align:center; } .copyright{ text-align:center; } .nav > li > a { padding: 10px 0px !important;} .footermid { width: 100% !important; margin: 0px 0px;} .footerright { width: 100% !important; float: left !important;} .col-md-4.col-sm-12.copyleft { text-align: center;} .col-md-4.col-sm-12.copymiddle { text-align: center;} .col-md-4.col-sm-12.copyright { text-align: center;} .details-list li i { margin: 0px 0px; float: none; text-align: left; font-size: 18px;} .details-list .col-md-10 { text-align: center;} .topbar h3 { padding: 0px 40px; text-align: center !important;} .topbar h3 span { text-align: center; float: none !important;} table th, table td { width: 100% !important; display: block !important;} .col1{ width: 100% !important; display: block !important;} .col2{ width: 100% !important; display: block !important;} .col3{ width: 100% !important; display: block !important;} .col4{ width: 100% !important; display: block !important;} .break.cleardiv {display: none !important;} .inner-heading h2 { font-size: 17px;} .carousel { padding: 0px 0px;} .carousel .thumbnail { margin: 0px 82px !important;} .productviewdetailsimg { margin: 20px auto; display: block;} } @media only screen and (max-width:319px){ .index-box-details-back .main { height: 345px; max-width: 60%; left: 20%; right: 20%; top: 0; bottom: 0; width: 90%;} .logo-new img { top: -9px; left: -44%; height: 184px; width: 190%;} .mobile-view .logo-new { top: -110px; left: 0; right: 0; bottom: 143px; width:auto; height:auto;} .mobile-view-accordian-back { height:auto; top: 222px; bottom: 0;} .mid-sec .foote-nav { float: left; text-align: left; margin: 0px; padding: 0px;} .copyleft { text-align:center;} .copymiddle{ text-align:center; } .copyright{ text-align:center; } .nav > li > a { padding: 10px 0px !important;} .footermid { width: 100% !important; margin: 0px 0px;} .footerright { width: 100% !important; float: left !important;} .col-md-4.col-sm-12.copyleft { text-align: center;} .col-md-4.col-sm-12.copymiddle { text-align: center;} .col-md-4.col-sm-12.copyright { text-align: center;} .details-list li i { margin: 0px 0px; float: none; text-align: left; font-size: 18px;} .details-list .col-md-10 { text-align: center;} .topbar h3 { padding: 0px 40px; text-align: center !important;} .topbar h3 span { text-align: center; float: none !important;} table th, table td { width: 100% !important; display: block !important;} .col1{ width: 100% !important; display: block !important;} .col2{ width: 100% !important; display: block !important;} .col3{ width: 100% !important; display: block !important;} .col4{ width: 100% !important; display: block !important;} .break.cleardiv {display: none !important;} .details-list .col-md-10 { text-align: center;} .inner-heading h2 { font-size: 17px;} .carousel { padding: 0px 0px;} .carousel .thumbnail { margin: 0px 82px !important;} .productviewdetailsimg { margin: 20px auto; display: block;} } .topbar{ display:block; margin:0px 0px; padding:10px 0px; background:#033a5d;} .topbar h3{ margin:0px 0px; padding:0px 40px; color:#fff; text-align:left; font-size:14px; font-family: 'Roboto', sans-serif;} .topbar h3 span{ color:#fff; text-align:right; font-size:14px; font-family: 'Roboto', sans-serif; float:right;} .caret-up { width: 0; height: 0; border-left: 4px solid rgba(0, 0, 0, 0); border-right: 4px solid rgba(0, 0, 0, 0); border-bottom: 4px solid; display: inline-block; margin-left: 2px; vertical-align: middle;}